:root {
    --bg: #F7F4FF;
    --bg-2: #FFFFFF;
    --wash: #EEF2FF;
    --card: #FFFFFF;
    --title: #1B1340;
    --text: #2F2A4A;
    --muted: #5B5678;
    --soft: #8B86A3;
    --violet: #7C3AED;
    --lilac: #A78BFA;
    --teal: #14B8A6;
    --coral: #F97316;
    --rose: #E11D48;
    --amber: #F59E0B;
    --indigo: #312E81;
    --line: rgba(124, 58, 237, 0.14);
    --shadow: 0 16px 40px rgba(49, 46, 129, 0.10);
    --grad: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #14B8A6 100%);
    --foot: #1B1340;
    --foot-text: #F4F0FF;
    --max: 1200px;
    --radius: 22px;
}
* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
}
html.is-locked, body.is-locked { overflow: hidden; height: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--violet); }
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--lilac);
    outline-offset: 3px;
}
.skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    background: var(--violet);
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    z-index: 80;
}
.skip-link:focus { top: 12px; color: #fff; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* top bar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 10px 16px 0;
    background: linear-gradient(to bottom, rgba(247,244,255,.96), rgba(247,244,255,.72) 70%, transparent);
}
.brand-bar {
    max-width: 1080px;
    margin: 0 auto;
    height: 64px;
    display: grid;
    grid-template-columns: 52px 1fr auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,.88);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow);
}
.icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--wash);
    color: var(--indigo);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.icon-btn:hover { background: #e4e8ff; }
.icon-dots, .icon-search {
    width: 16px;
    height: 16px;
    display: block;
    background:
        radial-gradient(circle at 2px 8px, var(--indigo) 2px, transparent 2.2px),
        radial-gradient(circle at 8px 8px, var(--indigo) 2px, transparent 2.2px),
        radial-gradient(circle at 14px 8px, var(--indigo) 2px, transparent 2.2px);
}
.icon-search {
    background:
        radial-gradient(circle at 7px 7px, transparent 5px, var(--indigo) 5.5px, var(--indigo) 7px, transparent 7.4px);
    box-shadow: 5px 5px 0 -5.2px var(--indigo);
}
.capsule-group { display: flex; gap: 6px; flex-wrap: wrap; }
.capsule-left { justify-content: flex-end; }
.capsule-right { justify-content: flex-start; }
.capsule {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--title);
    background: transparent;
    border: 1px solid transparent;
    font-size: 14px;
    white-space: nowrap;
}
.capsule:hover { background: var(--wash); color: var(--violet); }
.capsule.is-current {
    border-color: var(--violet);
    color: var(--violet);
    background: #f3edff;
}
.capsule-strong {
    background: var(--grad);
    color: #fff;
    border: 0;
}
.capsule-strong:hover { color: #fff; filter: brightness(1.05); }
.brand-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}
.brand-mark, .drawer-mark, .footer-mark {
    height: 36px;
    width: auto;
    object-fit: contain;
}
.brand-word {
    font-weight: 800;
    color: var(--title);
    letter-spacing: .04em;
}
.top-actions { display: flex; align-items: center; gap: 6px; }
.mobile-app-link {
    display: none;
    min-height: 44px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--grad);
    color: #fff;
    font-size: 14px;
}
.mobile-app-link:hover { color: #fff; }

main {
    max-width: var(--max);
    margin: 0 auto;
    padding: 28px 16px 120px;
}
.page-hero, .section, article.block {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 24px;
    margin: 0 0 22px;
}
.kicker {
    margin: 0 0 8px;
    color: var(--violet);
    font-size: 13px;
    letter-spacing: .12em;
    font-weight: 700;
}
h1 {
    margin: 0 0 14px;
    color: var(--title);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.25;
}
h2 {
    margin: 0 0 12px;
    color: var(--title);
    font-size: 1.35rem;
}
h3 { margin: 18px 0 8px; color: var(--indigo); font-size: 1.08rem; }
p { margin: 0 0 14px; }
.lead { font-size: 1.05rem; color: var(--text); }
.muted, .meta { color: var(--muted); }
.tiny { color: var(--soft); font-size: 13px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--title);
    font-weight: 650;
}
.btn:hover { color: var(--violet); border-color: var(--violet); }
.btn-primary {
    background: var(--grad);
    color: #fff;
    border: 0;
}
.btn-primary:hover { color: #fff; }

.dock-hero {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 22px;
    align-items: center;
}
.media-frame, .img-slot {
    border-radius: 24px;
    overflow: hidden;
    background: var(--wash);
    min-height: 220px;
    aspect-ratio: 16 / 10;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.tag-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.tag-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 16px;
    min-height: 120px;
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}
.dot-v { background: var(--violet); }
.dot-t { background: var(--teal); }
.dot-c { background: var(--coral); }
.dot-r { background: var(--rose); }
.tag-card h3 { margin: 8px 0; }
.tag-card p { margin: 0; color: var(--muted); font-size: 14px; }

.split {
    display: grid;
    grid-template-columns: .4fr .6fr;
    gap: 20px;
    align-items: start;
}
.num-list { list-style: none; margin: 0; padding: 0; }
.num-list li { margin: 0 0 12px; }
.num-list a {
    display: flex;
    gap: 10px;
    min-height: 44px;
    align-items: center;
    color: var(--title);
    font-weight: 700;
}
.num {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--violet);
    font-size: 13px;
}
.n2 { background: var(--teal); }
.n3 { background: var(--coral); }
.n4 { background: var(--rose); }
.n5 { background: var(--amber); color: #1B1340; }

.mosaic {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    grid-template-rows: auto auto;
    gap: 14px;
}
.mosaic article:first-child { grid-row: 1 / 3; }
.mosaic article {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
}
.mosaic .copy { padding: 16px 18px 20px; }

.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.pair article, .folder li, .board-grid a, .card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
}
.pair .copy, .card { padding: 16px 18px 20px; }

.board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: stretch;
}
.board-grid a { padding: 18px; color: inherit; min-height: 140px; }
.board-grid a:nth-child(2), .board-grid a:nth-child(5) { min-height: 190px; background: var(--wash); }

.folder { list-style: none; margin: 0; padding: 0; }
.folder li {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding: 14px;
    margin-bottom: 10px;
}
.folder-ico {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.rank-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.rank-row strong { font-size: 2.4rem; line-height: 1; }
.c1 { color: var(--violet); }
.c2 { color: var(--teal); }
.c3 { color: var(--coral); }
.c4 { color: var(--rose); }
.c5 { color: var(--amber); }

.timeline { border-left: 3px solid var(--lilac); margin: 8px 0 0 12px; padding: 0 0 0 22px; }
.timeline article { position: relative; margin: 0 0 22px; }
.timeline article::before {
    content: "";
    width: 14px;
    height: 14px;
    background: var(--violet);
    border-radius: 50%;
    position: absolute;
    left: -31px;
    top: 6px;
}
.badge {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--wash);
    color: var(--indigo);
    font-size: 12px;
    font-weight: 700;
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.steps article {
    background: var(--wash);
    border-radius: 20px;
    padding: 16px;
}

.faq details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px 16px;
    margin: 0 0 10px;
}
.faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--title);
    min-height: 44px;
    display: flex;
    align-items: center;
}

.index-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.index-grid a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    min-height: 88px;
    color: var(--title);
}

.legal h2 { margin-top: 22px; }

/* footer */
.site-footer {
    background: var(--foot);
    color: var(--foot-text);
    padding: 48px 16px calc(120px + env(safe-area-inset-bottom));
}
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-brand { margin-bottom: 24px; }
.footer-name { font-size: 1.4rem; font-weight: 800; margin: 8px 0 0; color: #fff; }
.footer-en { margin: 0; color: var(--lilac); letter-spacing: .16em; }
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.site-footer h2 { color: #fff; font-size: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #E9E2FF; min-height: 36px; display: inline-flex; align-items: center; }
.site-footer a:hover { color: #fff; }
.footer-note, .footer-copy { color: #C9C0E8; }
.footer-note { margin-top: 28px; }

/* overlay / drawer / search */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 19, 64, .42);
    z-index: 50;
    pointer-events: none;
    visibility: hidden;
}
.overlay.is-on {
    pointer-events: auto;
    visibility: visible;
}
.overlay[hidden], .drawer[hidden], .search-layer[hidden] {
    display: block;
    visibility: hidden;
    pointer-events: none;
}
.drawer, .search-layer {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}
.drawer:not([hidden]), .search-layer:not([hidden]) { pointer-events: none; }
.drawer:not([hidden]) .drawer-panel,
.search-layer:not([hidden]) .search-card { pointer-events: auto; }
.drawer-panel {
    width: min(720px, 100%);
    max-height: 78vh;
    background: #fff;
    border-radius: 28px 28px 0 0;
    box-shadow: var(--shadow);
    overflow: auto;
}
.drawer-head, .search-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: #fff;
}
.drawer-head strong, .search-head strong { flex: 1; color: var(--title); }
.drawer-body { padding: 8px 16px 28px; }
.drawer-body section { margin: 16px 0 22px; }
.drawer-body h2 { font-size: 13px; letter-spacing: .12em; color: var(--soft); }
.drawer-body a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: inherit;
    min-height: 64px;
}
.drawer-body a strong { display: block; color: var(--title); }
.drawer-body a span { display: block; color: var(--muted); font-size: 13px; }

.search-layer { align-items: flex-start; padding-top: 88px; }
.search-card {
    width: min(720px, calc(100% - 24px));
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 8px 16px 22px;
}
.search-field input {
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    border: 1px solid var(--line);
    padding: 0 18px;
    font-size: 16px;
    background: var(--wash);
    color: var(--title);
}
.search-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.search-presets a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--wash);
    color: var(--title);
}

.dock {
    display: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(420px, calc(100% - 32px));
    height: 52px;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow);
    z-index: 35;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
}
.dock a {
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--muted);
    position: relative;
}
.dock a.is-current { color: var(--violet); font-weight: 700; }
.dock a.is-current i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--violet);
    position: absolute;
    top: 6px;
}

.figure-caption { color: var(--soft); font-size: 13px; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.chips a, .chips span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--wash);
    color: var(--indigo);
    font-size: 13px;
}

@media (max-width: 980px) {
    .capsule-group { display: none; }
    .brand-bar { grid-template-columns: 52px 1fr auto; }
    .mobile-app-link { display: inline-flex; }
    .dock-hero, .split, .pair, .mosaic, .footer-grid, .tag-rail, .board-grid, .steps, .index-grid {
        grid-template-columns: 1fr;
    }
    .mosaic article:first-child { grid-row: auto; }
    .search-layer {
        padding-top: 0;
        align-items: stretch;
    }
    .search-card {
        width: 100%;
        min-height: 100%;
        border-radius: 0;
        background: var(--bg);
    }
    .dock { display: grid; }
    main { padding-bottom: 140px; }
}
@media (max-width: 640px) {
    .folder li { grid-template-columns: 1fr; }
    .rank-row { grid-template-columns: 64px 1fr; }
    h1 { font-size: 1.6rem; }
    .page-hero, .section, article.block { padding: 20px 16px; }
}