/*
 * 온보딩 투어 말풍선 테마 (2026-09-29)
 * driver.js 기본 스타일(driver.css) 위에 사이트 디자인(Primary #1877F2, rounded-2xl, 다크모드)을 입힌다.
 * 관련: static/js/onboarding/tour-core.js, templates/includes/onboarding_tour.html
 */

.driver-popover.ia-tour-popover {
    --ia-tour-bg: #ffffff;
    --ia-tour-text: #111827;
    --ia-tour-sub: #4b5563;
    --ia-tour-border: #e5e7eb;
    --ia-tour-primary: #1877F2;
    --ia-tour-primary-hover: #1464d8;
    --ia-tour-secondary-bg: #f3f4f6;
    --ia-tour-secondary-text: #374151;

    font-family: 'Pretendard', 'Noto Sans KR', ui-sans-serif, system-ui, -apple-system, sans-serif;
    background-color: var(--ia-tour-bg);
    color: var(--ia-tour-text);
    border: 1px solid var(--ia-tour-border);
    border-radius: 1rem;
    padding: 18px 18px 14px;
    min-width: 260px;
    max-width: 340px;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
}

.dark .driver-popover.ia-tour-popover,
[data-theme="dark"] .driver-popover.ia-tour-popover {
    --ia-tour-bg: #1f2937;
    --ia-tour-text: #ffffff;
    --ia-tour-sub: #d1d5db;
    --ia-tour-border: #374151;
    --ia-tour-secondary-bg: #374151;
    --ia-tour-secondary-text: #f3f4f6;
}

.ia-tour-popover .driver-popover-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ia-tour-text);
    padding-right: 24px; /* 닫기 버튼 자리 */
}

.ia-tour-popover .driver-popover-description {
    margin-top: 6px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ia-tour-sub);
    word-break: keep-all;
}

.ia-tour-popover .driver-popover-description b,
.ia-tour-popover .driver-popover-description strong {
    color: var(--ia-tour-text);
}

.ia-tour-popover .driver-popover-description .ia-tour-pill {
    display: inline-block;
    padding: 1px 8px;
    margin: 0 1px;
    border-radius: 9999px;
    background: rgba(24, 119, 242, 0.12);
    color: var(--ia-tour-primary);
    font-weight: 600;
    font-size: 0.82rem;
}

.dark .ia-tour-popover .driver-popover-description .ia-tour-pill,
[data-theme="dark"] .ia-tour-popover .driver-popover-description .ia-tour-pill {
    background: rgba(96, 165, 250, 0.18);
    color: #93c5fd;
}

.ia-tour-popover .driver-popover-description a {
    color: var(--ia-tour-primary);
    text-decoration: underline;
}

.ia-tour-popover .driver-popover-close-btn {
    color: #9ca3af;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 20px;
    background: transparent;
    border-radius: 9999px;
}

.ia-tour-popover .driver-popover-close-btn:hover {
    color: var(--ia-tour-text);
}

/* driver.js 가 열릴 때 닫기 버튼에 자동 포커스를 줘서 테두리/배경이 글자를 가리는 문제 → 색만 바꿔 표시 */
.ia-tour-popover .driver-popover-close-btn:focus,
.ia-tour-popover .driver-popover-close-btn:focus-visible {
    outline: none;
    background: transparent;
    color: var(--ia-tour-text);
}

.ia-tour-popover .driver-popover-footer {
    margin-top: 14px;
    align-items: center;
    gap: 8px;
}

.ia-tour-popover .driver-popover-progress-text {
    font-size: 0.78rem;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}

.ia-tour-popover .driver-popover-navigation-btns {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* 버튼: 터치 영역 40px 이상 */
.ia-tour-popover .driver-popover-footer button,
.ia-tour-popover .ia-tour-later-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    text-shadow: none;
    transition: background-color 0.15s ease;
}

.ia-tour-popover .driver-popover-footer .driver-popover-next-btn {
    background-color: var(--ia-tour-primary);
    color: #ffffff;
}

.ia-tour-popover .driver-popover-footer .driver-popover-next-btn:hover,
.ia-tour-popover .driver-popover-footer .driver-popover-next-btn:focus-visible {
    background-color: var(--ia-tour-primary-hover);
}

.ia-tour-popover .driver-popover-footer .driver-popover-prev-btn {
    background-color: var(--ia-tour-secondary-bg);
    color: var(--ia-tour-secondary-text);
}

.ia-tour-popover .driver-popover-footer .ia-tour-later-btn {
    background: transparent;
    color: #6b7280;
    font-weight: 500;
    margin-right: auto;
}

.ia-tour-popover .driver-popover-footer .ia-tour-later-btn:hover {
    color: var(--ia-tour-text);
}

.ia-tour-popover button:focus-visible {
    outline: 2px solid var(--ia-tour-primary);
    outline-offset: 2px;
}

/* 말풍선 화살표 색 (다크모드에서 흰 화살표가 튀지 않게) */
.ia-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--ia-tour-bg); }
.ia-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--ia-tour-bg); }
.ia-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--ia-tour-bg); }
.ia-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--ia-tour-bg); }

/* 요소 없이 화면 가운데 뜨는 환영 카드 */
.ia-tour-popover.ia-tour-welcome {
    max-width: 380px;
    text-align: center;
}

.ia-tour-popover.ia-tour-welcome .driver-popover-title {
    font-size: 1.25rem;
    padding-right: 0;
}

.ia-tour-popover .ia-tour-emoji {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 6px;
}

/* 모바일: 화면 폭에 맞추기 */
@media (max-width: 640px) {
    .driver-popover.ia-tour-popover {
        max-width: calc(100vw - 32px);
        min-width: 0;
    }
}

/* 투어 중에는 어두운 배경 위로 튀어나오는 떠 있는 요소(피드백 버튼, 1회성 툴팁)를 숨긴다 */
.onboarding-running #fab-tooltip,
.onboarding-running #feedback-float-btn {
    display: none !important;
}