/* ==========================================================================
   가이드 스포트라이트 — 전역 스타일 (Base/Tour/CleviTourHost + js/clevi-tour-spotlight.js)

   스코프드 CSS 가 아니라 전역 파일인 이유: 스크림·프리즘은 JS 가 body 끝에 만드는 요소라
   스코프 속성이 붙지 않고, Ivy 는 스코프드 번들이 첫 화면 뒤에 늦게 오므로 콜드 스타트에서
   재개되는 가이드가 잠깐 맨 카드로 그려진다. 두 index.html 이 surface.css 다음에 링크한다.

   층 순서: 스크림 1500 · 프리즘 1501 · 카드/알약 1502 — 다이얼로그(1000/1001) 위, 툴팁(2100) 아래.
   Mist 규칙: 선·링 없음. 딤은 스크림 색의 알파가 지고 흐림은 scrim-blur — 요소 opacity 로 딤을 만들지
   않는다. 카드는 다이얼로그와 같은 L3 베일 재질이고 blur 는 ::before 층이 진다(backdrop root 함정).
   무한 애니메이션 없음 — 프리즘의 도착 스침(한 번)은 테마 프리미티브(.clv-emphasis-prism)가 소유한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 스크림 — 한 층이 딤·흐림·클릭 막기를 함께 한다. 대상 자리는 JS 가 clip-path(evenodd) 로 뚫는다.
      clip-path 는 hit-test 도 잘라 구멍 안은 그대로 조작된다. 위로 자르기 조상이 없어야 하므로 body 끝.
   -------------------------------------------------------------------------- */
.clv-tour-scrim {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: var(--clv-scrim);
    -webkit-backdrop-filter: var(--clv-scrim-blur);
    backdrop-filter: var(--clv-scrim-blur);
    pointer-events: auto;
    cursor: default;
}

.clv-tour-scrim[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   2. 강조 프리즘 자리 — 프리미티브의 position(absolute)을 뷰포트 고정으로 덮는다. 위치·크기·반경은 JS 인라인.
      빛의 구성·토큰은 테마(Components)가 소유하고 여기서는 자리만 준다.
   -------------------------------------------------------------------------- */
/* 프리미티브와 한 칸짜리 특이도로 맞서면 시트 순서가 승자를 정한다 — 웹 호스트는 테마 시트를
   body 안에서 붙여 head 의 이 파일보다 늦게 온다. 두 칸으로 올려 순서와 무관하게 이기게 둔다. */
.clv-emphasis-prism.clv-tour-prism {
    position: fixed;
    z-index: 1501;
    pointer-events: none;
}

.clv-emphasis-prism.clv-tour-prism[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   3. 카드 — 한 요소, 세 모드(data-mode: loading | banner | coach)
      떠 있는 표면 계약: 요소는 투명, 재질(오버레이 베일 + blur)은 뒤층(::before)이 진다 — 요소 자신이
      backdrop root 가 되지 않아야 카드 안 팝업이 제 뒤를 흐릴 수 있다. 등장은 페이드가 아니라 transform 전환.
   -------------------------------------------------------------------------- */
.clv-tour-card {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1502;
    box-sizing: border-box;
    width: min(420px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 12px;
    border-radius: var(--clv-overlay-radius);
    background: transparent;
    box-shadow: var(--clv-overlay-shadow);
    color: var(--clv-text-primary);
    font-size: 13px;
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.clv-tour-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--clv-overlay-surface);
    -webkit-backdrop-filter: var(--clv-overlay-blur);
    backdrop-filter: var(--clv-overlay-blur);
    box-shadow: inset 0 1px 0 var(--clc-material-specular);
    pointer-events: none;
}

.clv-tour-card[hidden] {
    display: none;
}

/* 코치 카드는 창보다 커지지 않는다 — 확인할 것이 여러 줄이면 짧은 창에서 머리(단계 미터·[가이드 끄기])가
   화면 위로 밀려 손이 닿지 않는다. 카드 높이를 창 안에 묶어 JS 의 모서리 배치도 항상 안쪽에 떨어지게 한다. */
.clv-tour-card[data-mode="coach"] {
    max-height: calc(var(--clv-viewport-height, 100dvh) - 24px);
    overflow: auto;
}

/* 초점 사이 이동 — 구멍이 미끄러지는 동안 카드가 먼저 간다. JS 가 380ms 동안만 붙인다. */
.clv-tour-card.is-travel {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 도킹 — 비출 곳이 없거나(배너) 판정 중(로딩)이면 오른쪽 아래. JS 는 transform 을 쓰지 않는다. */
.clv-tour-card[data-mode="banner"],
.clv-tour-card[data-mode="loading"] {
    left: auto;
    top: auto;
    right: calc(16px + var(--clv-safe-area-right, 0px));
    bottom: calc(16px + var(--clv-safe-area-bottom, 0px));
    transform: none;
}

/* 좁은 화면 — 코치는 하단 시트, 배너·로딩은 하단 탭바 위에 꽉 찬 폭. */
@media (max-width: 768px) {
    .clv-tour-card[data-mode="banner"],
    .clv-tour-card[data-mode="loading"],
    .clv-tour-card[data-place="sheet"],
    .clv-tour-card[data-place="sheet-top"] {
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        border-radius: 18px;
        transform: none;
    }

    .clv-tour-card[data-mode="banner"],
    .clv-tour-card[data-mode="loading"],
    .clv-tour-card[data-place="sheet"] {
        top: auto;
        bottom: calc(72px + var(--clv-safe-area-bottom, 0px));
    }

    .clv-tour-card[data-place="sheet"],
    .clv-tour-card[data-place="sheet-top"] {
        max-height: calc(var(--clv-viewport-height, 100dvh) * 0.62);
        overflow: auto;
    }

    .clv-tour-card[data-place="sheet-top"] {
        top: calc(10px + var(--clv-safe-area-top, 0px));
        bottom: auto;
    }
}

/* --------------------------------------------------------------------------
   4. 로딩·배너 내용
   -------------------------------------------------------------------------- */
.clv-tour-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--clv-text-secondary);
    font-size: 13px;
}

.clv-tour-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clv-tour-progress-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--clv-text-secondary);
    font-size: 12px;
}

.clv-tour-dot {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clc-material-field);
    color: var(--clv-text-secondary);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 현재·끝난 칩은 의미색 Shade 짝 — 소비처가 색을 섞어 잉크를 만들지 않는다. */
.clv-tour-progress-item--current {
    color: var(--clc-primary);
    font-weight: 700;
}

.clv-tour-progress-item--current .clv-tour-dot {
    background: var(--clc-primary-lighter);
    color: var(--clc-on-primary-lighter);
}

.clv-tour-progress-item--done .clv-tour-dot {
    background: var(--clc-success-lighter);
    color: var(--clc-on-success-lighter);
}

.clv-tour-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.clv-tour-body strong {
    font-size: 13.5px;
}

.clv-tour-body span {
    color: var(--clv-text-secondary);
    font-size: 12.5px;
}

.clv-tour-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   5. 코치 내용 — 네 칸(지금 할 일 · 이렇게 되면 다음으로 · 확인할 것 · 잘 안 될 때)
   -------------------------------------------------------------------------- */
.clv-tour-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.clv-tour-step-label {
    color: var(--clc-primary);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.clv-tour-meter {
    display: inline-flex;
    gap: 3px;
}

.clv-tour-meter i {
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background: var(--clc-material-field-strong);
}

.clv-tour-meter i.is-done {
    background: var(--clc-success);
}

.clv-tour-meter i.is-now {
    background: var(--clc-primary);
}

.clv-tour-off {
    margin-left: auto;
}

.clv-tour-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.clv-tour-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.clv-tour-cell p {
    margin: 0;
}

.clv-tour-label {
    color: var(--clv-text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.clv-tour-label--do {
    color: var(--clc-primary);
}

/* 성공 조건 상자 — 옅은 성공 채움과 그 짝 잉크. */
.clv-tour-cell--ok {
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--clc-success-lighter);
    color: var(--clc-on-success-lighter);
}

.clv-tour-cell--ok .clv-tour-label {
    color: var(--clc-on-success-lighter);
}

.clv-tour-more summary {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--clv-text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.clv-tour-more summary::-webkit-details-marker {
    display: none;
}

.clv-tour-more summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s;
}

.clv-tour-more[open] summary::before {
    transform: rotate(45deg);
}

.clv-tour-more-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 9px;
}

.clv-tour-card[data-place="sheet"] .clv-tour-more-body,
.clv-tour-card[data-place="sheet-top"] .clv-tour-more-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
}

.clv-tour-checks {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clv-tour-checks li {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 8px;
    color: var(--clv-text-secondary);
}

.clv-tour-checks li::before {
    content: "";
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 4px;
    background: var(--clc-material-field-strong);
}

.clv-tour-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
}

.clv-tour-auto {
    margin-left: auto;
    color: var(--clv-text-secondary);
    font-size: 11.5px;
}

.clv-tour-card kbd {
    padding: 0 5px;
    border-radius: 4px;
    background: var(--clc-material-field-strong);
    color: var(--clv-text-secondary);
    font-family: inherit;
    font-size: 10.5px;
}

/* --------------------------------------------------------------------------
   6. 카드 안 작은 버튼 — 디자인 시스템 버튼(.clc-*)은 건드리지 않고 카드 전용 클래스만 칠한다.
   -------------------------------------------------------------------------- */
.clv-tour-text-button,
.clv-tour-chip-button,
.clv-tour-pill {
    appearance: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.clv-tour-text-button {
    padding: 2px 4px;
    background: none;
    color: var(--clv-text-secondary);
    font-size: 12px;
}

.clv-tour-text-button:hover {
    color: var(--clv-text-primary);
    text-decoration: underline;
}

.clv-tour-chip-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--clc-material-field);
    color: var(--clv-text-primary);
    font-size: 12px;
    font-weight: 600;
}

.clv-tour-chip-button:hover {
    background: var(--clc-material-field-strong);
}

.clv-tour-text-button:focus-visible,
.clv-tour-chip-button:focus-visible,
.clv-tour-pill:focus-visible,
.clv-tour-more summary:focus-visible {
    outline: none;
    box-shadow: var(--clc-mist-focus-shadow);
}

/* --------------------------------------------------------------------------
   7. 알약 — 잠시 숨긴 동안 남는 [가이드 다시 비추기]. 카드와 같은 자리에 도킹하지만 재질은 다르다:
      이때는 스크림이 걷혀 사용자가 하던 일과 함께 읽히므로, 화면을 점유하는 L3 베일이 아니라
      바형 L2⁺ 크롬이다(surface.css 2절의 역할 판정 · 크롬 두 형태 중 알약).
      구조는 카드와 같다 — 요소는 투명하고 재질·blur 는 ::before 가 진다.
      점은 액센트 잉크가 아니라 액센트 채움이라 잉크 짝이 필요 없다.
   -------------------------------------------------------------------------- */
.clv-tour-pill {
    position: fixed;
    z-index: 1502;
    right: calc(16px + var(--clv-safe-area-right, 0px));
    bottom: calc(16px + var(--clv-safe-area-bottom, 0px));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--clc-mist-radius-pill, 999px);
    background: transparent;
    box-shadow: var(--clv-chrome-shadow);
    color: var(--clc-primary);
    font-size: 12.5px;
    font-weight: 700;
}

.clv-tour-pill::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--clv-chrome-surface);
    -webkit-backdrop-filter: var(--clv-chrome-blur);
    backdrop-filter: var(--clv-chrome-blur);
    box-shadow: inset 0 1px 0 var(--clc-material-specular);
    pointer-events: none;
}

.clv-tour-pill::after {
    content: "";
    order: -1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clc-primary);
}

@media (max-width: 768px) {
    .clv-tour-pill {
        bottom: calc(72px + var(--clv-safe-area-bottom, 0px));
    }
}

/* --------------------------------------------------------------------------
   8. 움직임 줄이기 — surface.css §6 이 duration 을 눌러 주지만, 카드 이동은 아예 끊는다(자리가 튀어도 된다).
   -------------------------------------------------------------------------- */
html[data-clevi-motion="reduced"] .clv-tour-card.is-travel,
html[data-clevi-motion="reduced"] .clv-tour-more summary::before {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    html:not([data-clevi-motion="full"]) .clv-tour-card.is-travel,
    html:not([data-clevi-motion="full"]) .clv-tour-more summary::before {
        transition: none;
    }
}