/* ── Landing page ───────────────────────────────────────────────────────
   The approved light TOKEN values that PR4 piloted here now live in main.css
   (PR7 activation) — a shared component's tokens belong with the sheet that
   defines them. What stays below is rule-level: decisions about how landing's
   own elements use those tokens, which is page CSS by definition.

   The :root:not([data-theme="dark"]) scope is kept for the same reason as in
   main.css — these rules restyle surfaces whose dark appearance is unchanged
   by PR7. */

/* Chip hover mirrors the spec: the border darkens rather than the fill. */
:root:not([data-theme="dark"]) .hero-chip:hover {
    border-color: var(--color-text-muted);
}

/* The white field needs separation from the near-white band. */
:root:not([data-theme="dark"]) .hero-search {
    box-shadow: var(--shadow-lg);
}

/* A visible focus indicator that is not the accent, so focus stays legible on
   accent-coloured controls. Adopted from the token schema step. */
:root:not([data-theme="dark"]) .hero a:focus-visible,
:root:not([data-theme="dark"]) .hero button:focus-visible,
:root:not([data-theme="dark"]) .hero input:focus-visible,
:root:not([data-theme="dark"]) .landing-hero a:focus-visible,
:root:not([data-theme="dark"]) .landing-hero button:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Touch targets. The approved spec holds every hero control to 44px on
   phones; .hero-chip and the search button are below that by default. */
@media (max-width: 560px) {
    .hero-chip,
    .hero-search button,
    .hero-search input {
        min-height: 44px;
    }

    .hero-chip {
        display: inline-flex;
        align-items: center;
    }
}

/* ── Landing page ── */
.landing-hero {
    padding: 3.5rem 0 3rem;
    text-align: left;
}

.landing-hero-main {
    position: relative;
    z-index: 1;
}

.landing-hero-main {
    display: grid;
    gap: 1rem;
    /* B-2a: with the 2-column hero aside removed, keep the search-first hero as a
       single centered column so the shared centered subtitle/search bar stay
       aligned with the copy instead of drifting across the full width. */
    max-width: 680px;
    margin: 0 auto;
}

/* .landing-kicker → .kicker (components.css §19) */

.landing-hero-main h1 {
    max-width: none;
    margin-bottom: 0;
    white-space: nowrap;
}

.landing-hero-copy {
    display: grid;
    gap: 0.85rem;
    max-width: 64ch;
}

.landing-project-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    padding: 0.625rem 0.9rem;
    border: 1px solid var(--color-hero-badge-border);
    border-radius: 999px;
    background: var(--color-hero-panel-bg);
    color: var(--color-hero-badge-text);
    font-size: 0.875rem;
}

/* ★ 라이트 재타겟에서 `--color-hero-*` 는 전부 재매핑됐는데 이 라벨만 전역
   `--color-text-inverse`(#ffffff)를 써서 빠졌다. 흰 배지 위 흰 글자가 되어
   라벨이 사라지고, 차지한 자리는 남아 이름이 오른쪽으로 밀려 보였다.
   hero 토큰을 쓰면 테마가 다시 바뀌어도 따라간다. */
.landing-project-badge strong {
    color: var(--color-hero-text);
}

.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.landing-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.landing-stat {
    padding: 0.95rem 1rem;
    border-radius: var(--radius-md);
    background: var(--color-hero-panel-bg);
    border: 1px solid var(--color-hero-panel-border);
    backdrop-filter: blur(8px);
}

.landing-stat .hero-stat-value {
    font-size: 1.35rem;
}

.landing-stat .hero-stat-label {
    color: var(--color-hero-text-soft);
}

.landing-section-shell {
    padding: 3rem 0;
}

.landing-section-shell.surface {
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-sunken) 100%);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.landing-section-head {
    display: grid;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* .landing-section-note → .card-sm (components.css §19) */

@media (max-width: 980px) {
    .landing-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .landing-hero {
        padding: 2.75rem 0 2.5rem;
    }

    .landing-stats {
        grid-template-columns: 1fr;
    }

    .landing-hero-actions > * {
        width: 100%;
        justify-content: center;
    }

    .landing-hero-main h1 {
        white-space: normal;
    }
}

/* 참고자료 카드가 3개일 때 왼쪽으로 치우쳐 보이던 문제.

   전역 `.card-grid` 는 `auto-fill` 이라 1280px 폭에서 **4번째 빈 칸을 만들어 두고**
   카드 3개를 왼쪽에 몰아 놓는다. `auto-fit` 은 빈 트랙을 접어 남은 카드가 행을
   가득 채우므로, 카드 수를 늘리지 않고도 4개일 때와 **같은 가로 공간**을 쓴다.

   `justify-content` 는 트랙이 행을 다 채우지 못하는 경우(나중에 카드 최대폭을
   두게 되면)를 대비한 안전장치다. */
.landing-reference-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content: center;
}