/* device.sw4u.kr — 색·글꼴·간격은 모두 /assets/tokens.css(.design/tokens.css) 변수만 쓴다.
 * 레이아웃: 2026-10-07 web-designer 시안. 넓은 화면 기준 container-lg(1024px), 글 많은 섹션은 container-md.
 * 접힘: 1024px 이상 / 640~1023px / 640px 미만 (tokens.css 의 기준과 같다) */

*,
*::before,
*::after { box-sizing: border-box; }

/* html 에 data-theme 가 항상 붙어 tokens.css 의 기본 color-scheme 규칙이 안 걸린다 → 폼 컨트롤·스크롤바도 다크로 */
[data-theme="dark"] { color-scheme: dark; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--line-base);
    word-break: keep-all;
}

a { color: var(--color-primary-soft-fg); }

/* 포커스 표시는 페이지 전체에서 하나로 통일 */
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: calc(var(--space-12) * -1);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-fg);
    z-index: var(--z-toast);
}
.skip-link:focus { top: var(--space-2); }

.container {
    width: 100%;
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: 0 var(--space-8);
}
/* 좁은 섹션도 바깥 폭은 같게 두고(왼쪽 시작선 정렬) 안쪽 줄 길이만 줄인다 */
.container--narrow > * { max-width: var(--container-md); }

/* ── 상단 바 ── */
.topbar { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--space-16);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}
.theme-toggle {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-fg);
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}
.theme-toggle:hover { background: var(--color-surface-2); }

/* ── 앱 아이콘 (남색 타일은 브랜드 자산이라 SVG 안에서 색 고정) ── */
.app-icon { display: block; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.app-icon--sm { width: var(--space-8); height: var(--space-8); border-radius: var(--radius-sm); }
.app-icon--hero { display: none; width: var(--space-16); height: var(--space-16); margin-bottom: var(--space-4); }
.app-icon--stage { width: calc(var(--space-16) * 2.5); height: calc(var(--space-16) * 2.5); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }
/* 다크 바탕에서는 남색 타일이 묻히므로 테두리선으로 띄운다 */
[data-theme="dark"] .app-icon { box-shadow: 0 0 0 1px var(--color-border-strong); }

/* ── 히어로 ── */
.hero {
    padding: var(--space-16) 0;
    background: var(--color-primary-soft);
    border-bottom: 1px solid var(--color-border);
}
.hero__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--space-12);
    align-items: center;
}
.eyebrow {
    margin: 0;
    color: var(--color-primary-soft-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--letter-wide);
}
.hero h1 {
    margin: var(--space-3) 0 var(--space-4);
    font-size: var(--fs-4xl);
    line-height: var(--line-tight);
    letter-spacing: var(--letter-tight);
}
.lead { margin: 0 0 var(--space-8); color: var(--color-fg-muted); font-size: var(--fs-md); }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.btn-download {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-lg);
    background: var(--color-primary-strong);
    color: var(--color-primary-fg);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn-download:hover { box-shadow: var(--shadow-lg); transform: translateY(calc(var(--space-1) * -0.5)); }
.btn-download__meta { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.text-link { font-weight: var(--fw-semibold); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.hero__meta { margin: var(--space-4) 0 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }
.hero__meta + .hero__meta { margin-top: var(--space-1); }
.hero__meta a { overflow-wrap: anywhere; }
/* 히어로 띠(primary-soft) 위에서는 muted 가 4.5:1 에 못 미쳐 본문색을 쓴다 — 위계는 글자 크기로 */
.hero .lead,
.hero .hero__meta { color: var(--color-fg); }

.hero__art { position: relative; display: flex; justify-content: center; padding-bottom: var(--space-10); }
.icon-stage {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: calc(var(--space-16) * 4.5);
    aspect-ratio: 1;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}
/* QR 판은 스킨과 관계없이 흰색 + 진한 글자 (반전된 QR 을 못 읽는 스캐너가 있다) — 그래서 고정 팔레트 gray 를 쓴다 */
.qr-card {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-on-dark);
    box-shadow: var(--shadow-lg);
}
.qr-card img { width: calc(var(--space-16) * 1.5); height: calc(var(--space-16) * 1.5); }
.qr-card figcaption { color: var(--gray-700); font-size: var(--fs-xs); line-height: var(--line-tight); }

.notice { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-warn-soft); }

/* ── 섹션 공통 ── */
.section { padding: var(--space-16) 0 0; }
.section:last-of-type { padding-bottom: var(--space-16); }
.section__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-2xl);
    line-height: var(--line-tight);
    letter-spacing: var(--letter-tight);
}
.section__lead { margin: 0 0 var(--space-6); color: var(--color-fg-muted); }
.hint { margin: var(--space-4) 0 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }

/* ── 지원 기기 ── */
.device-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.device-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.device-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.device-card__art {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
}
.device-card__art img { width: calc(var(--space-16) * 2.5); height: auto; }
.device-card.is-pending .device-card__art img { opacity: .55; }
.device-card__name { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.device-card__model { margin: var(--space-1) 0 0; color: var(--color-fg-muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
.device-card__feature { flex: 1; margin: var(--space-2) 0 var(--space-4); color: var(--color-fg-muted); font-size: var(--fs-sm); }
.device-card__link { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; }
.device-card__link:hover { text-decoration: underline; }

.badge {
    align-self: flex-start;
    flex-shrink: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-success-soft);
    color: var(--color-success-soft-fg);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}
.badge.is-pending { background: var(--color-surface); color: var(--color-fg-muted); border: 1px solid var(--color-border); }

/* ── 설치 3단계 ── */
.steps-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.step {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}
.step p { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }
.step__num {
    display: inline-grid;
    place-items: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
    font-weight: var(--fw-bold);
}
.step__title { margin: var(--space-3) 0 var(--space-2); font-size: var(--fs-md); }
.step .step__hint { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); }

/* ── 기기별 사용법 ── */
.guide-common {
    margin: 0 0 var(--space-6);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-10);
    border-radius: var(--radius-lg);
    background: var(--color-surface-2);
    display: grid;
    gap: var(--space-1);
}
.guide { border-top: 1px solid var(--color-border); }
.guide:last-of-type { border-bottom: 1px solid var(--color-border); }
.guide__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    cursor: pointer;
    font-weight: var(--fw-semibold);
    list-style: none;
}
.guide__summary::-webkit-details-marker { display: none; }
.guide__summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--color-fg-muted);
    transition: transform var(--duration-fast) var(--ease-out);
}
.guide[open] .guide__summary::after { transform: rotate(180deg); }
.guide__summary img {
    width: var(--space-10);
    height: var(--space-10);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}
.guide__model { margin-left: var(--space-2); color: var(--color-fg-muted); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.guide__steps { margin: 0 0 var(--space-4); padding-left: calc(var(--space-10) + var(--space-8)); color: var(--color-fg-muted); display: grid; gap: var(--space-1); }

/* ── 방명록 (#wish) ── */
.wish-layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    grid-template-areas:
        "flash flash"
        "form  tally"
        "form  list";
    /* 폼이 두 줄을 차지해도 순위·최근 요청은 위에 붙여 쌓는다 */
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-10);
    row-gap: var(--space-6);
    align-items: start;
}
.wish-layout .flash { grid-area: flash; }
.wish-tally { grid-area: tally; }
.wish-form { grid-area: form; }
.wish-list { grid-area: list; }

.sub-h { margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--color-fg-muted); }

.tally { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); counter-reset: tally; }
.tally li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    counter-increment: tally;
}
.tally li::before { content: counter(tally); min-width: 1.5em; color: var(--color-primary-soft-fg); font-weight: var(--fw-bold); }
.tally-model { flex: 1; min-width: 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.tally-count { color: var(--color-fg); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.flash { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.flash.is-ok { background: var(--color-success-soft); color: var(--color-success-soft-fg); }
.flash.is-error { background: var(--color-warn-soft); color: var(--color-fg); }

.wish-form {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}
.field { display: grid; gap: var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.field em { margin-left: var(--space-1); color: var(--color-primary-soft-fg); font-style: normal; font-size: var(--fs-xs); }
.field input,
.field textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg);
    font: inherit;
    font-weight: var(--fw-regular);
}
.field ::placeholder { color: var(--color-fg-muted); }
.field input:focus-visible,
.field textarea:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.field textarea { resize: vertical; }
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wish-row { display: flex; align-items: flex-end; gap: var(--space-3); }
.wish-row .field { flex: 1; min-width: 0; }
/* 주 행동은 APK 내려받기 → 방명록 버튼은 한 단계 낮은 soft 버튼 */
.wish-form button {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
    font: inherit;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
}
.wish-form button:hover { background: var(--color-surface-2); }
.wish-form .hint { margin: 0; }

.wishes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.wishes li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.wish-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; }
.wish-head span { color: var(--color-fg-muted); font-size: var(--fs-xs); }
.wish-body { margin: var(--space-1) 0 0; color: var(--color-fg-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* ── 버전 기록 ── */
.versions details { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.versions details:last-of-type { border-bottom: 1px solid var(--color-border); }
.versions summary { cursor: pointer; font-weight: var(--fw-semibold); }
.versions summary span { margin-left: var(--space-2); color: var(--color-fg-muted); font-weight: var(--fw-regular); font-size: var(--fs-sm); }
.versions ul { margin: var(--space-2) 0; padding-left: var(--space-5); }
.checksum { margin: var(--space-2) 0; font-size: var(--fs-xs); color: var(--color-fg-muted); }
.checksum code { font-family: var(--font-mono); word-break: break-all; }

.footer {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    text-align: center;
}

/* ── 태블릿 (640~1023px) ── */
@media (max-width: 1023px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__art { display: none; }
    .app-icon--hero { display: block; }
    .hero h1 { font-size: var(--fs-3xl); }
    .device-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: 1fr; }
    .step { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); }
    .step__num { grid-row: span 3; }
    .step__title { margin-top: var(--space-1); }
    .wish-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "flash" "tally" "form" "list";
        grid-template-rows: none;
    }
}

/* ── 휴대폰 (640px 미만) ── */
@media (max-width: 639px) {
    .container { padding: 0 var(--space-4); }
    .hero { padding: var(--space-10) 0; }
    .hero h1 { font-size: var(--fs-2xl); }
    .lead { font-size: var(--fs-base); }
    .btn-download { width: 100%; }
    .section { padding-top: var(--space-12); }
    .section:last-of-type { padding-bottom: var(--space-12); }
    .device-grid { grid-template-columns: 1fr; gap: var(--space-3); }
    /* 1열에서는 그림 왼쪽 + 글 오른쪽 가로 행 */
    .device-card {
        display: grid;
        grid-template-columns: var(--space-16) 1fr;
        column-gap: var(--space-4);
        align-items: start;
        padding: var(--space-3);
    }
    .device-card__art { grid-row: span 5; aspect-ratio: 1; margin: 0; }
    .device-card__art img { width: var(--space-12); height: var(--space-12); }
    .device-card__feature { margin-bottom: var(--space-2); }
    .guide__steps { padding-left: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-download,
    .device-card,
    .guide__summary::after { transition: none; }
    .btn-download:hover { transform: none; }
}