:root {
    color-scheme: light;
    --ink: #172033;
    --muted: #687386;
    --line: #dfe4ec;
    --surface: #ffffff;
    --surface-soft: #f4f6fa;
    --navy: #111827;
    --blue: #315efb;
    --blue-soft: #eaf0ff;
    --green: #16a36a;
    --orange: #f05a2a;
    --purple: #7c4dff;
    --lime: #d9f56b;
    --shadow-sm: 0 8px 24px rgba(26, 36, 58, 0.07);
    --shadow-md: 0 18px 50px rgba(26, 36, 58, 0.11);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background: #f6f7fa;
    color: var(--ink);
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }

.container { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.skip-link {
    position: fixed;
    z-index: 1000;
    top: 10px;
    left: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    font-weight: 800;
    transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(17, 24, 39, .94);
    color: #fff;
    backdrop-filter: blur(16px);
}
.header-inner { display: flex; align-items: center; min-height: 72px; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(145deg, #5378ff, #2549d8);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(49, 94, 251, .28);
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; font-weight: 900; letter-spacing: .02em; }
.brand small { margin-top: 1px; color: #8fa0bd; font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.main-nav { display: flex; justify-content: center; gap: 28px; margin-left: auto; }
.main-nav a { color: #b8c2d3; font-size: 12px; font-weight: 700; text-decoration: none; transition: color .2s; }
.main-nav a:hover { color: #fff; }
.portal-live, .analytics-on, .gachi-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.portal-live { padding: 7px 10px; border: 1px solid rgba(52,211,153,.24); border-radius: 999px; color: #7ee2b8; font-size: 10px; font-weight: 800; }
.portal-live i, .analytics-on i, .gachi-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .12); }

/* Hero */
.hero-wrap {
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 5%, rgba(76, 111, 255, .24), transparent 32%),
        radial-gradient(circle at 4% 100%, rgba(124, 77, 255, .14), transparent 30%),
        var(--navy);
    color: #fff;
}
.portal-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
    align-items: center;
    gap: 72px;
    min-height: 360px;
    padding-block: 62px 82px;
}
.portal-hero::after {
    content: '';
    position: absolute;
    right: -130px;
    bottom: -270px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255,255,255,.018), 0 0 0 110px rgba(255,255,255,.012);
    pointer-events: none;
}
.hero-eyebrow, .section-kicker {
    margin: 0 0 9px;
    color: var(--blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em;
}
.hero-eyebrow { color: #7895ff; }
.hero-copy h1 { margin: 0; font-size: clamp(38px, 5.2vw, 62px); font-weight: 900; letter-spacing: -.06em; line-height: 1.15; }
.hero-copy h1 span { color: #8da4ff; }
.hero-copy > p:last-child { max-width: 570px; margin: 20px 0 0; color: #aeb9cb; font-size: 14px; line-height: 1.9; }
.hero-finder { position: relative; z-index: 1; padding: 25px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.07); box-shadow: 0 22px 60px rgba(0,0,0,.18); backdrop-filter: blur(10px); }
.hero-finder > label { display: block; margin-bottom: 10px; color: #dce3ef; font-size: 12px; font-weight: 800; }
.search-box { display: grid; grid-template-columns: 21px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 0 14px 0 17px; border: 2px solid transparent; border-radius: 13px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.search-box:focus-within { border-color: #7694ff; box-shadow: 0 0 0 4px rgba(118,148,255,.16); }
.search-box svg { width: 21px; fill: none; stroke: #7c8798; stroke-width: 2; stroke-linecap: round; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.search-box input::placeholder { color: #9aa4b3; }
.search-box kbd { padding: 3px 7px; border: 1px solid #dbe0e8; border-bottom-width: 2px; border-radius: 5px; background: #f7f8fa; color: #8b95a4; font-family: inherit; font-size: 10px; }
.hero-quick-links { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.hero-quick-links span { margin-right: 2px; color: #8f9bb0; font-size: 10px; }
.hero-quick-links button { padding: 4px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.06); color: #c5cede; font-size: 10px; cursor: pointer; }
.hero-quick-links button:hover { border-color: rgba(255,255,255,.3); color: #fff; }

/* Overview */
.overview-strip {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: -36px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--shadow-md);
}
.overview-item { display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 18px 22px; }
.overview-item + .overview-item { border-left: 1px solid #e7eaf0; }
.overview-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 14px; font-weight: 900; flex: 0 0 38px; }
.overview-blue { background: var(--blue-soft); color: var(--blue); }
.overview-green { background: #e9f8f2; color: var(--green); }
.overview-orange { background: #fff0eb; color: var(--orange); }
.overview-purple { background: #f0ebff; color: var(--purple); }
.overview-item strong, .overview-item span { display: block; }
.overview-item strong { color: var(--ink); font-size: 20px; font-weight: 900; line-height: 1.1; }
.overview-item div span { margin-top: 5px; color: var(--muted); font-size: 10px; }

/* Shared sections */
.section-heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.section-heading-row h2 { margin: 0; color: var(--ink); font-size: clamp(25px, 3vw, 34px); font-weight: 900; letter-spacing: -.04em; }
.section-heading-row > div > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.subtle-btn, .control-btn, .load-more-btn, .empty-state button {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: #4d596b;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.subtle-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; font-size: 11px; }
.subtle-btn:hover, .control-btn:hover { border-color: #aeb9ca; color: var(--ink); }
.subtle-btn:disabled { cursor: wait; opacity: .6; }

/* Featured */
.gachi-showcase {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(260px, .78fr) minmax(0, 1.35fr);
    gap: 44px;
    margin-top: 70px;
    padding: 42px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 94% 4%, rgba(217,245,107,.18), transparent 34%),
        linear-gradient(140deg, #151c29, #111827 68%, #18201a);
    color: #fff;
    box-shadow: var(--shadow-md);
}
.gachi-showcase::before { content: 'GACHI'; position: absolute; top: -30px; left: -8px; color: rgba(255,255,255,.025); font-size: 140px; font-weight: 900; line-height: 1; pointer-events: none; }
.gachi-intro { position: relative; z-index: 1; align-self: center; }
.gachi-intro .section-kicker { color: var(--lime); }
.gachi-intro h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 900; letter-spacing: -.06em; line-height: 1.15; }
.gachi-intro > p:not(.section-kicker) { margin: 17px 0 0; color: #aeb9ca; font-size: 12px; line-height: 1.85; }
.gachi-points { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 22px; color: #d6deea; font-size: 10px; font-weight: 700; }
.gachi-points span::first-letter { color: var(--lime); }
.gachi-capacity { display: flex; align-items: center; gap: 7px; margin-top: 21px; color: #8e9aab; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.gachi-capacity strong { color: #fff; font-size: 15px; font-weight: 900; }
.gachi-capacity span { width: 1px; height: 15px; margin-inline: 4px; background: rgba(255,255,255,.15); }
.gachi-feature-card { position: relative; z-index: 1; display: block; padding: 27px; border: 1px solid rgba(217,245,107,.55); border-radius: 18px; background: linear-gradient(135deg, rgba(42,53,70,.88), rgba(24,31,44,.95)); color: #fff; text-decoration: none; box-shadow: 0 22px 48px rgba(0,0,0,.22); transition: transform .2s, border-color .2s; }
.gachi-feature-card:hover { transform: translateY(-4px); border-color: var(--lime); }
.gachi-feature-card:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.gachi-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.gachi-feature-mark { display: grid; place-items: center; width: 57px; height: 57px; border-radius: 15px; background: var(--orange); color: #fff; font-size: 27px; font-weight: 900; box-shadow: 0 12px 26px rgba(240,90,42,.26); }
.gachi-live-badge { padding: 6px 10px; border-radius: 999px; background: var(--lime); color: #273016; font-size: 9px; font-weight: 900; }
.gachi-live-badge i { width: 6px; height: 6px; background: #268348; box-shadow: none; }
.gachi-feature-category { margin: 0; color: #ff8b68; font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.gachi-feature-card h3 { margin: 2px 0 0; font-size: clamp(30px, 4vw, 42px); font-weight: 900; letter-spacing: -.05em; }
.gachi-feature-card > p:not(.gachi-feature-category) { max-width: 560px; margin: 8px 0 0; color: #b8c2d1; font-size: 12px; line-height: 1.75; }
.gachi-feature-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.gachi-feature-tags span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #c8d0dd; font-size: 9px; font-weight: 700; }
.gachi-feature-cta { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.1); color: var(--lime); font-size: 12px; font-weight: 900; }
.gachi-future-section { position: relative; z-index: 1; grid-column: 1 / -1; padding-top: 27px; border-top: 1px solid rgba(255,255,255,.1); }
.gachi-shelf-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.gachi-shelf-heading p { margin: 0 0 3px; color: #7f8a9a; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.gachi-shelf-heading h3 { margin: 0; color: #f1f4f8; font-size: 17px; font-weight: 900; letter-spacing: -.03em; }
.gachi-shelf-heading > span { padding: 5px 8px; border: 1px solid rgba(217,245,107,.2); border-radius: 999px; color: #adbd78; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.gachi-future-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gachi-future-card { min-width: 0; min-height: 157px; padding: 15px; border: 1px dashed rgba(164,176,194,.25); border-radius: 13px; background: rgba(9,14,24,.34); transition: border-color .2s, background .2s, transform .2s; }
.gachi-future-card:hover { transform: translateY(-2px); border-color: rgba(217,245,107,.35); background: rgba(24,32,45,.65); }
.gachi-future-live { border-style: solid; border-color: rgba(109,93,252,.7); background: linear-gradient(145deg, rgba(109,93,252,.2), rgba(9,14,24,.62)); color: inherit; text-decoration: none; }
.gachi-future-live:hover { border-color: #a99fff; background: linear-gradient(145deg, rgba(109,93,252,.3), rgba(24,32,45,.72)); }
.gachi-future-live:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.gachi-future-live .gachi-future-top i { background: #6d5dfc; color: #fff; font-weight: 900; }
.gachi-future-live h4 { color: #fff; }
.gachi-future-live p { color: #aeb9ca; }
.gachi-future-live small { color: var(--lime); }
.gachi-future-top { display: flex; align-items: center; justify-content: space-between; }
.gachi-future-top > span { color: #657083; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.gachi-future-top i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: rgba(255,255,255,.055); color: #748094; font-size: 13px; font-style: normal; }
.gachi-future-card h4 { margin: 23px 0 0; overflow: hidden; color: #c6ceda; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.gachi-future-card p { margin: 5px 0 0; color: #687487; font-size: 8px; line-height: 1.5; }
.gachi-future-card small { display: block; margin-top: 14px; color: #566174; font-size: 7px; font-weight: 900; letter-spacing: .12em; }

/* Tool directory */
.tools-section { margin-top: 82px; }
.tool-controls { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.category-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.category-filters button { padding: 8px 12px; border: 1px solid #e2e6ed; border-radius: 999px; background: #f8f9fb; color: #687386; font-size: 10px; font-weight: 800; cursor: pointer; transition: all .2s; }
.category-filters button:hover { border-color: #b8c5ef; color: var(--blue); }
.category-filters button[data-category="gachi"] { border-color: #f4c3b3; background: #fff4ef; color: #c94c25; }
.category-filters button.active { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 5px 13px rgba(49,94,251,.2); }
.category-filters button[data-category="gachi"].active { border-color: var(--orange); background: var(--orange); color: #fff; box-shadow: 0 5px 13px rgba(240,90,42,.22); }
.tool-control-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #edf0f4; }
.control-btn { padding: 8px 11px; font-size: 10px; }
.control-btn[aria-pressed="true"] { border-color: #f2b84a; background: #fff8e8; color: #9b6800; }
.sort-control { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.sort-control select { padding: 8px 30px 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); outline: 0; font-size: 10px; }
.sort-control select:focus { border-color: var(--blue); }
.tools-result-row { display: flex; justify-content: space-between; gap: 20px; margin: 16px 1px 13px; }
.tools-result-row p { margin: 0; color: #798496; font-size: 10px; }
#tools-count { color: #4c586a; font-weight: 800; }
.tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(29,39,59,.045); transition: transform .2s, border-color .2s, box-shadow .2s; }
.tool-card:hover { transform: translateY(-3px); border-color: #b8c6f4; box-shadow: 0 15px 34px rgba(35,53,97,.1); }
.tool-card-featured { border-color: #f0b39f; background: linear-gradient(145deg, #fff8f5, #fff); box-shadow: 0 8px 24px rgba(240,90,42,.09); }
.tool-card-featured:hover { border-color: var(--orange); box-shadow: 0 15px 34px rgba(240,90,42,.14); }
.tool-card-featured .tool-category { color: var(--orange); }
.tool-card-featured .tool-open-arrow { background: #fff0ea; color: var(--orange); }
.tool-card-link { display: flex; flex-direction: column; min-height: 204px; padding: 19px; color: inherit; text-decoration: none; }
.tool-card-top { display: flex; align-items: center; gap: 12px; padding-right: 31px; }
.tool-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; font-size: 20px; flex: 0 0 43px; }
.tool-card-heading { min-width: 0; }
.tool-category { display: block; margin-bottom: 2px; color: #8b95a5; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.tool-name { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 900; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.tool-desc { margin: 14px 0 0; color: #6f7a8b; font-size: 10px; line-height: 1.7; }
.tool-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 15px; }
.tool-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 999px; background: #f1f3f6; color: #7a8595; font-size: 8px; font-weight: 900; }
.tool-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-online { background: #e9f8f2; color: #14885c; }
.status-slow { background: #fff4da; color: #a66b00; }
.status-offline { background: #feebec; color: #c83b45; }
.tool-open-meta { display: flex; align-items: center; gap: 7px; color: #9aa4b3; font-size: 8px; }
.tool-open-arrow { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: #f1f4fa; color: var(--blue); font-size: 12px; font-weight: 900; }
.favorite-btn { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: #a7b0be; font-size: 18px; cursor: pointer; transition: background .2s, color .2s; }
.favorite-btn:hover { background: #fff7df; color: #d59a20; }
.favorite-btn[aria-pressed="true"] { background: #fff4cf; color: #d2920e; }
.empty-state { padding: 50px 20px; border: 1px dashed #cfd5df; border-radius: 16px; background: #fff; text-align: center; }
.empty-state > span { color: #a7b0bf; font-size: 40px; }
.empty-state h3 { margin: 6px 0 0; font-size: 16px; }
.empty-state p { margin: 7px 0 17px; color: var(--muted); font-size: 11px; }
.empty-state button { padding: 9px 13px; font-size: 10px; }
.load-more-btn { display: block; min-width: 220px; margin: 24px auto 0; padding: 12px 22px; font-size: 11px; }
.load-more-btn:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }

/* Ad */
.ad-shell { min-height: 74px; margin: 58px auto 0; padding: 10px 14px 14px; overflow: hidden; border: 1px solid #e5e8ed; border-radius: 12px; background: #fff; text-align: center; }
.ad-shell > span { display: block; margin-bottom: 4px; color: #a7afbb; font-size: 7px; font-weight: 800; letter-spacing: .18em; }
.ad-shell > div { max-width: 960px; margin: 0 auto; }

/* Insights */
.insights-section, .community-section, .recent-section { margin-top: 82px; }
.analytics-on { padding: 8px 11px; border: 1px solid #bce8d5; border-radius: 999px; background: #ecfaf4; color: #11714d; font-size: 9px; font-weight: 900; }
.insights-layout { display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 14px; }
.insight-card { min-height: 180px; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.insight-card .insight-label { display: block; margin-bottom: 13px; color: #8490a1; font-size: 9px; font-weight: 900; letter-spacing: .07em; }
.insight-card > strong { color: var(--ink); font-size: 23px; font-weight: 900; letter-spacing: -.03em; }
.insight-card > p { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.75; }
.analytics-card { position: relative; overflow: hidden; background: linear-gradient(135deg, #172033, #202d47); color: #fff; }
.analytics-card::after { content: ''; position: absolute; right: -55px; bottom: -65px; width: 180px; height: 180px; border: 32px solid rgba(92,126,255,.12); border-radius: 50%; }
.analytics-card .insight-label { color: #8fa4fb; }
.analytics-card > strong { color: #fff; }
.analytics-card > p { position: relative; z-index: 1; max-width: 440px; color: #b3bed0; }
.privacy-note { position: relative; z-index: 1; display: inline-block; margin-top: 13px; color: #7ee2b8; font-size: 9px; font-weight: 800; }
.popular-card { grid-column: 1 / -1; min-height: 0; }
.popular-tools-list { display: flex; flex-wrap: wrap; gap: 8px; }
.popular-tools-list p { margin: 0; color: var(--muted); font-size: 10px; }
.popular-tool { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: #f1f4f9; color: #465164; font-size: 9px; font-weight: 800; }
.popular-tool b { color: var(--blue); }

/* Community stats */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 122px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.stat-card.stat-primary { border-color: #b8c7fd; background: linear-gradient(145deg, #f5f7ff, #fff); }
.stat-label { color: var(--muted); font-size: 10px; font-weight: 700; }
.stat-value { color: var(--ink); font-size: 32px; font-weight: 900; letter-spacing: -.04em; }
.stat-primary .stat-value { color: var(--blue); }
.board-breakdown { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-top: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.board-breakdown > div { display: flex; align-items: center; gap: 6px; color: #687386; font-size: 9px; }
.board-breakdown strong { color: var(--ink); }
.board-breakdown > span { margin-left: auto; color: #919baa; font-size: 9px; }
.board-dot { width: 6px; height: 6px; border-radius: 50%; }
.board-dot.line { background: #20c279; }
.board-dot.kakao { background: #e4b72e; }
.board-dot.insta { background: #ba52d6; }
.board-dot.email { background: #4a86e8; }

.site-visit-panel { margin-top: 22px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.site-visit-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.site-visit-heading .section-kicker { margin-bottom: 5px; }
.site-visit-heading h3 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.site-visit-heading > div:first-child > p:last-child { max-width: 650px; margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.site-visit-summary { display: flex; flex-shrink: 0; gap: 8px; }
.site-visit-summary span { min-width: 102px; padding: 11px 13px; border: 1px solid #dce3f9; border-radius: 11px; background: #f7f9ff; color: #768299; font-size: 8px; font-weight: 800; }
.site-visit-summary strong { display: block; margin-bottom: 2px; color: var(--blue); font-size: 19px; font-weight: 900; }
.site-visit-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding: 12px; border-radius: 12px; background: #f5f7fa; }
.visit-date-nav { display: flex; align-items: center; gap: 7px; }
.visit-date-nav label { color: #647084; font-size: 9px; font-weight: 900; }
.visit-date-nav button { display: grid; place-items: center; min-width: 31px; height: 31px; padding: 0 9px; border-color: #d9dee7; background: #fff; color: #596579; font-size: 10px; }
.visit-date-nav button:disabled { cursor: not-allowed; opacity: .4; }
.visit-date-nav .visit-today-btn { display: block; min-width: auto; }
.visit-date-nav input { height: 31px; padding: 0 8px; border: 1px solid #d9dee7; border-radius: 7px; background: #fff; color: var(--ink); font: inherit; font-size: 10px; font-weight: 700; }
.visit-site-search { display: flex; align-items: center; width: min(260px, 100%); padding: 0 10px; border: 1px solid #d9dee7; border-radius: 8px; background: #fff; color: #9aa3b1; }
.visit-site-search input { width: 100%; height: 31px; padding: 0 0 0 7px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 9px; }
.site-visit-table-head, .site-visit-row { display: grid; grid-template-columns: minmax(210px, 1.2fr) minmax(130px, 2fr) 70px; align-items: center; gap: 20px; }
.site-visit-table-head { margin-top: 17px; padding: 0 13px 7px; color: #98a1af; font-size: 8px; font-weight: 900; }
.site-visit-table-head span:last-child { text-align: right; }
.site-visits-list { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.site-visit-row { min-height: 58px; padding: 8px 13px; border-top: 1px solid #edf0f4; }
.site-visit-row:first-child { border-top: 0; }
.site-visit-row:hover { background: #fafbfe; }
.site-visit-name { display: flex; align-items: center; min-width: 0; gap: 8px; }
.site-visit-rank { width: 18px; flex: 0 0 18px; color: #a3abb8; font-size: 8px; font-weight: 800; text-align: center; }
.site-visit-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; font-size: 11px; font-weight: 900; }
.site-visit-name a { min-width: 0; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 900; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.site-visit-name a:hover { color: var(--blue); }
.site-visit-name small { display: block; margin-top: 2px; overflow: hidden; color: #98a2b1; font-size: 7px; font-weight: 600; text-overflow: ellipsis; }
.site-visit-bar { height: 7px; overflow: hidden; border-radius: 999px; background: #edf0f5; }
.site-visit-bar i { display: block; height: 100%; border-radius: inherit; opacity: .76; transition: width .3s ease; }
.site-visit-row > strong { color: var(--ink); font-size: 15px; font-weight: 900; text-align: right; }
.site-visit-row > strong small { margin-left: 2px; color: #8893a3; font-size: 7px; }
.site-visits-message { margin: 0; padding: 30px 18px; color: var(--muted); font-size: 10px; text-align: center; }
.site-visits-error { color: #b94a56; background: #fff8f8; }
.visit-updated { margin: 8px 2px 0; color: #929cab; font-size: 8px; text-align: right; }

/* Recent posts */
.compact-heading { align-items: center; margin-bottom: 17px; }
.sample-note { padding: 5px 8px; border-radius: 999px; background: #eceff4; color: #758092; font-size: 8px; font-weight: 800; }
.real-posts-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.real-post { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.real-post-avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; font-size: 15px; }
.real-post-avatar.female { background: #f9eaf5; }
.real-post-avatar.male { background: #eaf2fc; }
.real-post-avatar.other { background: #eef0f4; }
.real-post-info { min-width: 0; }
.real-post-name { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.real-post-meta { margin-top: 2px; color: #8a95a5; font-size: 8px; }
.real-post-side { display: flex; align-items: flex-end; flex-direction: column; gap: 5px; }
.real-post-board { padding: 3px 7px; border-radius: 999px; font-size: 8px; font-weight: 800; }
.real-post-board.line { background: #e7f9f1; color: #12865b; }
.real-post-board.kakao { background: #fff5d9; color: #946900; }
.real-post-board.insta { background: #f7eafb; color: #8e3baa; }
.real-post-board.email { background: #e9f1fc; color: #3268a8; }
.real-post-time { color: #9aa4b3; font-size: 8px; }
.no-data { grid-column: 1 / -1; margin: 0; padding: 30px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 11px; text-align: center; }

/* Footer */
.footer { margin-top: 82px; padding: 34px 0; background: var(--navy); color: #fff; }
.footer-inner { display: flex; align-items: center; gap: 24px; }
.footer-brand { color: #fff; }
.footer-inner > p { margin: 0 auto 0 0; color: #8e9aae; font-size: 10px; }
.footer-inner > span { color: #768298; font-size: 9px; }

/* Responsive */
@media (max-width: 980px) {
    .portal-hero { grid-template-columns: 1fr 1fr; gap: 35px; }
    .main-nav { display: none; }
    .portal-live { margin-left: auto; }
    .overview-strip { grid-template-columns: repeat(2, 1fr); }
    .overview-item:nth-child(3) { border-left: 0; border-top: 1px solid #e7eaf0; }
    .overview-item:nth-child(4) { border-top: 1px solid #e7eaf0; }
    .gachi-showcase { grid-template-columns: .8fr 1.2fr; gap: 28px; padding: 34px; }
    .gachi-future-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .insights-layout { grid-template-columns: 1.25fr .75fr; }
    .insight-card:nth-child(3) { grid-column: 1 / -1; min-height: 140px; }
}

@media (max-width: 720px) {
    .container { width: min(100% - 28px, 1200px); }
    .header-inner { min-height: 64px; }
    .portal-live { padding: 6px 8px; font-size: 8px; }
    .portal-hero { grid-template-columns: 1fr; gap: 31px; min-height: auto; padding-block: 46px 70px; }
    .hero-copy h1 { font-size: clamp(36px, 12vw, 52px); }
    .hero-copy > p:last-child { font-size: 12px; }
    .hero-finder { padding: 18px; }
    .overview-strip { margin-top: -28px; }
    .overview-item { min-height: 80px; padding: 14px; }
    .overview-item strong { font-size: 16px; }
    .overview-icon { width: 34px; height: 34px; flex-basis: 34px; }
    .gachi-showcase { grid-template-columns: 1fr; gap: 26px; margin-top: 56px; padding: 27px; }
    .gachi-intro h2 br { display: none; }
    .gachi-future-section { min-width: 0; padding-top: 23px; }
    .gachi-future-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 68vw); margin-right: -27px; padding-right: 27px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .gachi-future-grid::-webkit-scrollbar { display: none; }
    .gachi-future-card { scroll-snap-align: start; }
    .tools-section, .insights-section, .community-section, .recent-section { margin-top: 62px; }
    .section-heading-row { align-items: flex-start; flex-direction: column; gap: 14px; }
    .compact-heading { flex-direction: row; align-items: center; }
    .tool-control-actions { align-items: stretch; flex-direction: column; }
    .sort-control { justify-content: space-between; }
    .sort-control select { flex: 1; }
    .tools-result-row { align-items: flex-start; flex-direction: column; gap: 5px; }
    .tools-grid { grid-template-columns: 1fr; }
    .tool-card-link { min-height: 186px; }
    .insights-layout { grid-template-columns: 1fr; }
    .insight-card:nth-child(3), .popular-card { grid-column: auto; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .board-breakdown > span { width: 100%; margin-left: 0; padding-top: 3px; }
    .site-visit-panel { padding: 18px; }
    .site-visit-heading { flex-direction: column; gap: 14px; }
    .site-visit-summary { width: 100%; }
    .site-visit-summary span { flex: 1; }
    .site-visit-controls { align-items: stretch; flex-direction: column; }
    .visit-site-search { width: 100%; }
    .site-visit-table-head { display: none; }
    .site-visits-list { margin-top: 14px; }
    .site-visit-row { grid-template-columns: minmax(0, 1fr) 58px; gap: 8px 12px; padding: 11px; }
    .site-visit-bar { grid-column: 1 / -1; grid-row: 2; }
    .real-posts-list { grid-template-columns: 1fr; }
    .footer-inner { align-items: flex-start; flex-direction: column; gap: 13px; }
    .footer-inner > p { margin: 0; }
}

@media (max-width: 430px) {
    .brand strong { font-size: 12px; }
    .portal-live { font-size: 0; gap: 0; }
    .portal-live i { margin: 0; }
    .overview-strip { border-radius: 14px; }
    .overview-item { gap: 9px; padding: 12px 10px; }
    .overview-item div span { font-size: 8px; }
    .gachi-showcase { margin-inline: -2px; padding: 22px; border-radius: 19px; }
    .gachi-intro h2 { font-size: 30px; }
    .gachi-feature-card { padding: 20px; }
    .gachi-shelf-heading > span { display: none; }
    .gachi-future-grid { margin-right: -22px; padding-right: 22px; }
    .category-filters { flex-wrap: nowrap; margin-inline: -4px; padding: 2px 4px 8px; overflow-x: auto; scrollbar-width: none; }
    .category-filters::-webkit-scrollbar { display: none; }
    .category-filters button { flex-shrink: 0; }
    .stat-card { min-height: 106px; padding: 16px; }
    .stat-value { font-size: 27px; }
    .visit-date-nav { flex-wrap: wrap; }
    .visit-date-nav label { width: 100%; }
    .visit-date-nav input { flex: 1; min-width: 132px; }
    .compact-heading { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}