/* 온보딩 투어 말풍선 — 가리키는 타일의 배지 색을 배경으로 쓰고, 흰 글씨를 굵게 올린다. */

/* ── 색 ─────────────────────────────────────────
   tone = 가리키는 타일의 배지 색(tour.js 가 스텝의 tone 으로 tone-* 클래스를 붙인다).
   흰 글씨 대비 4.5:1 을 넘기려고 주황·청록은 700 을 쓴다
   (amber-600 3.2:1, cyan-600 3.7:1 은 부족 / blue-600 5.2 · amber-700 5.0 · purple-600 5.4 · cyan-700 5.4).
   흰 말풍선·다크 말풍선과 나란히 띄워 비교한 뒤 사용자가 이걸 골랐다. */
.driver-popover.naesin-tour             { --tour-bg: #2563eb; }
.driver-popover.naesin-tour.tone-amber  { --tour-bg: #b45309; }
.driver-popover.naesin-tour.tone-purple { --tour-bg: #9333ea; }
.driver-popover.naesin-tour.tone-cyan   { --tour-bg: #0e7490; }

/* ── 말풍선 ─────────────────────────────────────
   driver.css 가 all:unset + font:...sans-serif 로 family 를 고정한다 → body 에서 물려받는다.
   이름을 적지 않는다: 사이트는 'Pretendard Variable' 로 불러오는데(base.html) 'Pretendard' 로 적었다가
   로드된 폰트가 없어 system-ui 로 떨어진 적이 있다.
   폭: driver.css 최대 300px 은 한 줄 약 18자라 문장이 잘게 끊긴다 → 360px, 모바일은 화면 폭 − 32px. */
.driver-popover.naesin-tour {
    font-family: inherit;
    max-width: min(360px, calc(100vw - 32px));
    padding: 1.125rem 1.25rem;
    border-radius: 12px;
    background-color: var(--tour-bg);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35);
}

.driver-popover.naesin-tour .driver-popover-title,
.driver-popover.naesin-tour .driver-popover-description,
.driver-popover.naesin-tour .driver-popover-progress-text,
.driver-popover.naesin-tour .driver-popover-footer button {
    font-family: inherit;
}

/* 꼬리는 driver.css 가 흰 border 로 그리고 안 보이는 세 면을 투명으로 둔다.
   보이는 한 면만 배경색으로 칠한다 — 네 면을 다 칠하면 꼬리가 사각형이 된다. */
.driver-popover.naesin-tour .driver-popover-arrow-side-left   { border-left-color: var(--tour-bg); }
.driver-popover.naesin-tour .driver-popover-arrow-side-right  { border-right-color: var(--tour-bg); }
.driver-popover.naesin-tour .driver-popover-arrow-side-top    { border-top-color: var(--tour-bg); }
.driver-popover.naesin-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--tour-bg); }

/* ── 글씨 ───────────────────────────────────────
   크기는 rem — 사이트가 가독성 때문에 html 을 17px(640px↑ 18px)로 키워뒀다.
   굵기는 상세의 '크레딧부터'(font-black)처럼 Pretendard 를 굵게 쓴다.
   word-break: keep-all — 한글이 단어 중간에서 끊겨('엮어 / 요') 빽빽하고 안 읽혔다. */
.driver-popover.naesin-tour .driver-popover-title {
    font-size: 1.125rem;
    font-weight: 900;
    color: #ffffff;
    word-break: keep-all;
    padding-right: 68px;         /* 오른쪽 위 '건너뛰기' 자리 */
}

.driver-popover.naesin-tour .driver-popover-title[style*=block] + .driver-popover-description {
    margin-top: 0.5rem;          /* driver.css 기본 5px */
}

.driver-popover.naesin-tour .driver-popover-description {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.94);
    word-break: keep-all;
}

.driver-popover.naesin-tour .driver-popover-progress-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ── 건너뛰기 ────────────────────────────────────
   닫기 버튼을 '건너뛰기' 글자로 쓴다(글자는 tour.js 가 넣는다).
   기본값은 32×28px 의 ✕ 라 글자를 넣으면 넘친다. */
.driver-popover.naesin-tour .driver-popover-close-btn {
    top: 10px;
    right: 10px;
    width: auto;
    height: auto;
    min-height: 28px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

.driver-popover.naesin-tour .driver-popover-close-btn:hover,
.driver-popover.naesin-tour .driver-popover-close-btn:focus {
    color: #ffffff;
    text-decoration: underline;
}

/* ── 버튼 ──────────────────────────────────────── */
.driver-popover.naesin-tour .driver-popover-footer {
    margin-top: 1.125rem;        /* driver.css 기본 15px */
}

.driver-popover.naesin-tour .driver-popover-footer button {
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 6px;
    text-shadow: none;           /* driver.css 의 흰 글자 그림자가 색 배경에서 번진다 */
}

.driver-popover.naesin-tour .driver-popover-prev-btn {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

.driver-popover.naesin-tour .driver-popover-prev-btn:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/* 다음 버튼은 흰 바탕에 그 스텝 색 글씨 */
.driver-popover.naesin-tour .driver-popover-next-btn {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--tour-bg);
}

.driver-popover.naesin-tour .driver-popover-next-btn:hover,
.driver-popover.naesin-tour .driver-popover-next-btn:focus {
    background-color: rgba(255, 255, 255, 0.9);
}

/* 고정 헤더 대응은 CSS(scroll-margin-top)로 하지 않는다. driver.js 는 화면 안 판정을 top>=0 으로
   해서 헤더 밑에 걸친 대상은 스크롤 자체를 안 하고, 스크롤할 때는 가운데로 보낸다. tour.js 가 처리한다. */

/* ── 모바일 ─────────────────────────────────────
   터치 영역을 키운다. 모바일은 1인당 방문이 1.1회로 데스크탑 1.9회보다
   첫 방문 비중이 높아 투어가 더 자주 발동한다 → 건너뛰기가 더 중요하다. */
@media (max-width: 640px) {
    .driver-popover.naesin-tour .driver-popover-close-btn {
        min-height: 36px;
        padding: 8px 10px;
        font-size: 0.8125rem;
    }
    .driver-popover.naesin-tour .driver-popover-footer button {
        min-height: 36px;
        padding: 8px 14px;
    }
    .driver-popover.naesin-tour .driver-popover-title {
        padding-right: 76px;
    }
}