/* 온보딩 (spec §5): 시작하기 체크리스트 · 화면별 안내 카드 · 첫 방문 투어.
   기존 디자인 토큰만 쓴다 — 새 색·간격 토큰을 만들지 않는다. */

/* ── 시작하기 체크리스트 (§5.2) ───────────────────────────────── */
.onboarding-card {
    margin-bottom: var(--space-4, 1rem);
    padding: var(--space-4, 1rem);
}

.onboarding-head {
    display: flex;
    align-items: center;
    gap: var(--space-2, .5rem);
}

.onboarding-head > strong {
    font-size: 1.05rem;
}

.onboarding-progress {
    margin-left: auto;
    font-size: .85rem;
    color: var(--color-text-muted, #6b7280);
}

.onboarding-head #onboardingClose {
    flex: 0 0 auto;
}

.onboarding-lead {
    margin: var(--space-1, .25rem) 0 var(--space-3, .75rem);
    font-size: .9rem;
}

.onboarding-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, .5rem);
}

.onboarding-step {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-2, .5rem);
    padding: var(--space-2, .5rem) 0;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.onboarding-step:first-child {
    border-top: 0;
}

.onboarding-mark {
    width: 1.4rem;
    text-align: center;
    color: var(--color-text-muted, #6b7280);
}

.onboarding-step.done .onboarding-mark {
    color: var(--color-success, #16a34a);
}

.onboarding-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.onboarding-label small {
    font-size: .8rem;
}

.onboarding-step.done .onboarding-label strong {
    opacity: .7;
}

/* 좁은 화면: 표시·설명이 한 줄, 그 아래 한 줄에 할 일과 건너뛰기가 나란히. */
@media (max-width: 480px) {
    .onboarding-step {
        grid-template-columns: auto 1fr auto;
        row-gap: var(--space-1, .25rem);
    }

    .onboarding-label {
        grid-column: 2 / -1;
    }

    .onboarding-step > .badge,
    .onboarding-step > .btn,
    .onboarding-step > a.btn {
        grid-column: 2;
        justify-self: start;
    }

    .onboarding-step > .onboarding-skip {
        grid-column: 3;
        justify-self: end;
    }
}

/* ── 화면별 안내 카드 (§5.1) ──────────────────────────────────── */
.intro-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3, .75rem);
    align-items: start;
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
}

.intro-card-ico {
    color: var(--color-primary, #2563eb);
    margin-top: 2px;
}

.intro-card-text > strong {
    display: block;
    margin-bottom: 2px;
}

.intro-card-text p {
    margin: 0 0 2px;
    font-size: .9rem;
}

.intro-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, .5rem);
    margin-top: var(--space-2, .5rem) !important;
}

@media (max-width: 480px) {
    .intro-card {
        grid-template-columns: auto 1fr;
    }

    .intro-card > [data-intro-dismiss] {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
    }

    .intro-card-text {
        grid-column: 1 / -1;
    }
}

/* ── 투어 (§5.3, 접근성 §7) ───────────────────────────────────── */
/* 어둡게만 하고 클릭은 통과시킨다: §7 이 스크롤 잠금을 금지하는 것과 같은
   이유로 투어는 화면을 인질로 잡지 않는다. 말풍선 밖을 누르면 공용 팝오버
   레지스트리가 투어를 dismissed 로 닫고, 그 클릭은 원래 하려던 일을 그대로
   한다 — 투어 때문에 첫 로그인의 첫 클릭이 먹히지 않는 일이 없다. */
.onb-tour {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 1400;
    pointer-events: none;
}

.onb-spot {
    outline: 3px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
    border-radius: 6px;
    position: relative;
    z-index: 1401;
}

.onb-bubble {
    position: fixed;
    max-width: 320px;
    background: var(--color-surface, #fff);
    color: var(--color-text, #111827);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    padding: var(--space-3, .75rem);
    z-index: 1402;
    transition: opacity .15s ease;
}

.onb-bubble h2 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.onb-bubble p {
    margin: 0 0 var(--space-3, .75rem);
    font-size: .9rem;
    color: var(--color-text-muted, #6b7280);
}

.onb-bubble-foot {
    display: flex;
    align-items: center;
    gap: var(--space-2, .5rem);
}

.onb-bubble-count {
    font-size: .8rem;
    color: var(--color-text-muted, #6b7280);
}

.onb-bubble-foot .onb-next {
    margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
    .onb-bubble {
        transition: none;
    }
}