/* ============================================
   Tour Detail — Page-specific Styles
   ============================================ */

/* Loading Overlay */
.td-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cream,#FAF9F6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px
}

.td-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #E5E7EB;
    border-top-color: var(--cta,#3F7FFF);
    border-radius: 50%;
    animation: td-spin .8s linear infinite
}

@keyframes td-spin {
    to {
        transform: rotate(360deg)
    }
}

.td-loading span {
    font-size: 14px;
    color: #6B7280
}

/* Hero — no dark overlay over the photo. Readability comes from text-shadow
   on the headings and a narrow bottom-only scrim that only covers the text band. */
.detail-hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    margin-top: 68px;
    overflow: hidden;
    background: #0F1E3C
}

    .detail-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }
    /* Narrow bottom scrim, just behind the title block, ~38% of hero height. */
    .detail-hero::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 38%;
        background: linear-gradient(180deg,rgba(15,30,60,0) 0%,rgba(15,30,60,.55) 60%,rgba(15,30,60,.78) 100%);
        pointer-events: none
    }

.detail-hero-content {
    position: absolute;
    bottom: 48px;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 0 24px
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.92);
    font-size: 13px;
    margin-bottom: 14px;
    text-shadow: 0 1px 4px rgba(0,0,0,.55)
}

    .breadcrumb a {
        color: rgba(255,255,255,.92)
    }

        .breadcrumb a:hover {
            color: var(--gold-light)
        }

.detail-hero-content h1 {
    font-family: var(--font-serif);
    font-size: clamp(30px,4vw,46px);
    color: #fff;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.01em;
    word-break: keep-all;      /* 한글이 어절(띄어쓰기) 단위로 줄바꿈 — 단어 중간에서 끊기지 않음 */
    overflow-wrap: anywhere;
    margin-bottom: 12px;
    text-shadow: 0 2px 12px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.6)
}

    .detail-hero-content h1 em {
        font-style: normal;
        color: var(--gold-light)
    }

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: #fff;
    font-size: 15px;
    text-shadow: 0 1px 6px rgba(0,0,0,.6)
}

    .hero-meta span {
        display: flex;
        align-items: center;
        gap: 6px
    }

/* Summary Bar */
.summary-bar {
    background: var(--white);
    border-bottom: 1px solid #EEE;
    position: sticky;
    top: 68px;
    z-index: 100
}

.summary-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    gap: 20px;
    overflow-x: auto
}

.summary-chips {
    display: flex;
    gap: 8px;
    flex-shrink: 0
}

.chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius);
    background: var(--light);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid #E8E8E8
}

    .chip i {
        color: var(--cta);
        font-size: 16px
    }

.summary-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0
}

.summary-price {
    text-align: right
}

    .summary-price small {
        font-size: 12px;
        color: var(--text-muted);
        display: block
    }

    .summary-price strong {
        font-family: var(--font-sans);
        font-size: 26px;
        color: var(--text);
        font-weight: 800
    }

        .summary-price strong span {
            font-size: 14px;
            font-weight: 500
        }

/* Layout */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    padding: 48px 0;
    align-items: start
}

.detail-main {
    min-width: 0
}

.detail-sidebar {
    position: sticky;
    top: 140px
}

/* Price Card */
.price-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 28px;
    border: 1px solid #E8E8E8;
    margin-bottom: 20px
}

    .price-card h3 {
        font-family: var(--font-serif);
        font-size: 20px;
        color: var(--navy);
        margin-bottom: 20px;
        font-weight: 700
    }

.price-option {
    border: 2px solid #E8E8E8;
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .price-option.selected {
        border-color: var(--cta);
        background: var(--cta-light)
    }

.price-option-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text)
}

    .price-option-label small {
        display: block;
        font-size: 12px;
        font-weight: 400;
        color: var(--text-muted);
        margin-top: 2px
    }

.price-option-amount {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 800;
    color: var(--text)
}

.departures-list {
    margin-top: 20px
}

.departure-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;
    font-size: 14px
}

.departure-date {
    font-weight: 600;
    color: var(--text)
}

.departure-status {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius)
}

.status-confirmed {
    background: #E8F8F5;
    color: #00B894
}

.status-recruiting {
    background: #FEF5E7;
    color: #F39C12
}

.status-closed {
    background: #FDEDEC;
    color: #E74C3C
}

.departure-seats {
    color: var(--text-muted);
    font-size: 12px
}

/* Guide Mini */
.guide-mini {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid #E8E8E8;
    display: flex;
    gap: 16px;
    align-items: center
}

    .guide-mini img {
        width: 56px;
        height: 56px;
        border-radius: var(--radius);
        object-fit: cover
    }

.guide-mini-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text)
}

.guide-mini-info p {
    font-size: 13px;
    color: var(--text-muted)
}

/* Content Sections */
.content-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 36px;
    border: 1px solid #E8E8E8;
    margin-bottom: 24px
}

    .content-section h2 {
        font-family: var(--font-serif);
        font-size: 22px;
        color: var(--navy);
        font-weight: 700;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 10px
    }

        .content-section h2 i {
            color: var(--cta);
            font-size: 20px
        }

/* Section toggle — collapsible h2 header */
.section-toggle-header {
    cursor: pointer;
    user-select: none;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 0 !important
}
.section-toggle-header:hover { opacity: .8 }
.section-toggle-chevron {
    font-size: 22px !important;
    color: var(--brand) !important;
    transition: transform .3s ease;
    flex-shrink: 0
}
.section-toggle-header[aria-expanded="false"] .section-toggle-chevron {
    transform: rotate(-180deg)
}
.section-toggle-body {
    overflow: visible;
    transition: max-height .35s ease, opacity .3s ease;
    max-height: 2000px;
    opacity: 1;
    margin-top: 24px
}
.section-toggle-body.is-collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0
}

/* Highlights — dynamic grid: 1=full, 2=2cols, 3=3cols, 4+=auto-fill. Each
   card is a clickable accordion: click to reveal DetailDescription.
   v17c — switched from dark navy background to white card to match the rest
   of the content sections (per user request). Inner cards now use the cool
   periwinkle (--brand-softer) chip style instead of translucent-on-dark. */
.content-section--highlights {
    background: var(--white);
    border-color: var(--border)
}

    .content-section--highlights h2 {
        color: var(--brand)
    }

        .content-section--highlights h2 i {
            color: var(--brand)
        }

/* Highlights — single-row horizontal scroller (v17d).
   Previous grid took ~8 vertical rows on tours with many highlights. The
   carousel keeps the section to one tidy row and lets users swipe / drag /
   scroll horizontally instead.
   Implementation:
     - flex row, no wrap
     - each .highlight-card is fixed-width with scroll-snap so it locks
       to the start of the viewport on release
     - subtle visual cue (fade on right edge) hints "more to scroll"
     - on touch devices the native momentum scroll handles it
     - on desktop a thin scrollbar appears on hover; arrow buttons (added
       by JS in renderHighlights) provide click navigation */
.highlights-scroll-wrap {
    position: relative
}

.highlights-grid-v2 {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-soft) transparent
}

.highlights-grid-v2::-webkit-scrollbar {
    height: 6px
}
.highlights-grid-v2::-webkit-scrollbar-thumb {
    background: var(--brand-soft);
    border-radius: 6px
}
.highlights-grid-v2::-webkit-scrollbar-thumb:hover {
    background: var(--brand-baby)
}

.highlights-grid-v2 .highlight-card {
    flex: 0 0 auto;
    width: 240px;
    scroll-snap-align: start
}

/* Right-edge fade hint — only shown when the scroller has overflow.
   Pure CSS, no JS measurement needed: a fixed-position gradient on top of
   the wrap. The .highlights-scroll-wrap parent positions it. */
.highlights-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 4px; right: 0; bottom: 12px;
    width: 32px;
    background: linear-gradient(to right, transparent, #fff);
    pointer-events: none;
    opacity: 0.85
}

/* Arrow buttons (mounted by renderHighlights when there are 3+ cards) */
.highlights-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(20,23,40,.12);
    z-index: 5;
    transition: background .15s var(--ease), transform .1s var(--ease)
}
.highlights-nav:hover { background: var(--brand-softer); transform: translateY(-50%) scale(1.05) }
.highlights-nav:active { transform: translateY(-50%) scale(.95) }
.highlights-nav--prev { left: -28px }
.highlights-nav--next { right: -28px }
.highlights-nav[disabled] { opacity: .35; cursor: default; pointer-events: none }

@media(max-width:640px) {
    .highlights-grid-v2 .highlight-card { width: 200px }
    /* On touch screens, hide the arrow buttons — users swipe. */
    .highlights-nav { display: none }
    .highlights-scroll-wrap::after { display: none }
}

.highlight-card {
    padding: 0;
    border-radius: var(--radius-lg);
    background: var(--brand-softer);            /* light periwinkle chip */
    border: 1px solid var(--brand-soft);
    transition: var(--transition);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

    .highlight-card:hover {
        background: var(--brand-soft);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm)
    }

    .highlight-card.is-open {
        background: #FFFFFF;
        border-color: var(--brand)
    }

.highlight-card--accent {
    background: var(--brand);
    border-color: var(--brand)
}

    .highlight-card--accent:hover {
        background: var(--brand-hover)
    }

    .highlight-card--accent .highlight-icon {
        background: rgba(255,255,255,.2)
    }

    .highlight-card--accent h4, .highlight-card--accent p {
        color: var(--white)
    }

.highlight-img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    background: var(--brand-soft)
}

.highlight-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.highlight-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background: #FFFFFF;                        /* white pill on the periwinkle card */
    border: 1px solid var(--brand-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px
}

    .highlight-icon i {
        font-size: 20px;
        color: var(--brand)                     /* brand-blue glyph */
    }

.highlight-card--accent .highlight-icon {
    background: rgba(255,255,255,.2);
    border-color: transparent
}

.highlight-card--accent .highlight-icon i {
    color: var(--white)
}

.highlight-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 6px;
    line-height: 1.4
}

.highlight-card p {
    font-size: 14.5px;
    color: var(--text-light);
    line-height: 1.65;
    margin: 0
}

.highlight-toggle {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--brand);
    font-weight: 600
}

.highlight-card.is-open .highlight-toggle i {
    transform: rotate(180deg)
}

.highlight-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease,margin-top .35s ease;
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.75
}

.highlight-card.is-open .highlight-detail {
    max-height: 600px;
    margin-top: 12px
}

.highlight-detail-inner {
    padding: 12px 14px;
    border-top: 1px dashed var(--brand-soft);
    white-space: pre-line
}

/* Itinerary — shoestring.kr-inspired card layout. Each day is a self-
   contained collapsible white card with a brand-blue title row, big photo,
   description body, and a meta line of icon+text rows for hotel/transport/
   meals/distance. Header + body collapse with native <details> for a11y. */
/* Itinerary section header — h2 + 전체 toggle button live in the same flex
   row so the toggle aligns with the section title instead of stacking below.
   The static h2 already lives in #itinerarySection so we just style its
   wrapping .itinerary-head as a flex row. */
.itinerary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px
}

.itinerary-head h2 {
    margin: 0
}

.itinerary-controls {
    display: flex;
    align-items: center;
    flex-shrink: 0
}

.itinerary-toggle-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast)
}

    .itinerary-toggle-all:hover {
        border-color: var(--brand);
        color: var(--brand)
    }

    .itinerary-toggle-all i {
        transition: transform .2s var(--ease);
        color: var(--brand)
    }

    .itinerary-toggle-all.is-collapsed i {
        transform: rotate(-90deg)
    }

@keyframes dayCardReveal {
    from { opacity: 0; transform: translateY(20px) }
    to   { opacity: 1; transform: translateY(0) }
}

@keyframes dayBodyOpen {
    from { opacity: 0 }
    to   { opacity: 1 }
}

.itinerary-anim-ready .day-card {
    opacity: 0;
    transform: translateY(20px)
}

.itinerary-anim-ready .day-card.is-revealed {
    animation: dayCardReveal .4s cubic-bezier(.2,.6,.35,1) both;
}

.day-card[open] .day-card-body {
    animation: dayBodyOpen .28s ease both;
}

.day-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .2s var(--ease)
}

    .day-card:hover {
        box-shadow: var(--shadow-sm)
    }

    .day-card[open] {
        box-shadow: var(--shadow-sm)
    }

    .day-card summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 22px;
        cursor: pointer;
        list-style: none;
        user-select: none
    }

        .day-card summary::-webkit-details-marker {
            display: none
        }

        .day-card summary:hover .day-card-title {
            color: var(--brand-hover)
        }

.day-card-title {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    color: var(--brand);
    line-height: 1.4;
    letter-spacing: -0.01em;
    flex: 1;
    min-width: 0
}

.day-card-title-date {
    /* Inherit color, size, and weight from .day-card-title so the date sits
       seamlessly on the same line as the title (per user request). The only
       distinction is a small left margin to separate "·" from the title. */
    margin-left: 8px;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit
}

.day-card-toggle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-softer);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .2s var(--ease),background .2s var(--ease)
}

    .day-card-toggle i {
        font-size: 18px;
        transition: transform .2s var(--ease)
    }

.day-card[open] .day-card-toggle {
    background: var(--brand);
    color: #fff
}

    .day-card[open] .day-card-toggle i {
        transform: rotate(180deg)
    }

.day-card-body {
    padding: 0 22px 22px
}

.day-card-desc {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 14px;
    white-space: pre-line
}

/* Rich-text colors / highlights from the admin editor. Inline style="…"
   on <span> / <font> already wins on specificity, but legacy <font color>
   tags need an explicit hook because contenteditable in some browsers
   emits them instead of <span style="color:">. */
.day-card-desc font[color] { color: inherit }
.day-card-desc font[color="#DC2626"], .day-card-desc font[color="red"]    { color: #DC2626 }
.day-card-desc font[color="#2563EB"], .day-card-desc font[color="blue"]   { color: #2563EB }
.day-card-desc font[color="#15803D"], .day-card-desc font[color="green"]  { color: #15803D }
/* Make sure inline background-color (the 형광펜 highlights) renders even
   inside dark-theme overrides. */
.day-card-desc span[style*="background"] { padding: 0 2px; border-radius: 3px; }

.day-card-photo {
    margin: 0 -22px 14px
}

    .day-card-photo img {
        width: 100%;
        display: block;
        object-fit: cover;
        aspect-ratio: 16/9;
        border: 0
    }

.day-card-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px dashed var(--border)
}

.day-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.55
}

    .day-meta-row i {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--brand-softer);
        color: var(--brand);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        margin-top: 1px
    }

.day-meta-row--food i {
    background: var(--warm-sand);
    color: var(--warm-stone)
}

.day-meta-row--hotel i {
    background: var(--warm-sand);
    color: var(--warm-stone)
}

.day-meta-row--transport i {
    background: var(--warm-sand);
    color: var(--warm-stone)
}

.day-meta-row--distance i {
    background: var(--warm-sand);
    color: var(--warm-stone)
}

.day-meta-row--city i {
    background: var(--warm-sand);
    color: var(--warm-stone)
}

.day-meta-row--note i {
    background: var(--warm-sand);
    color: var(--warm-stone)
}

.day-meta-row--note {
    background: var(--brand-softer);
    border: 1px solid var(--brand-soft);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text)
}

    .day-meta-row--note i {
        background: transparent
    }

@media(max-width:640px) {
    .day-card summary {
        padding: 14px 16px
    }

    .day-card-body {
        padding: 0 16px 18px
    }

    .day-card-photo {
        margin: 0 -16px 12px
    }

    .day-card-title {
        font-size: 16px
    }

    .day-card-title-date {
        /* On mobile keep the date on its own line for breathing room, but
           still inherit the title color/size so the visual matches the
           desktop unified-typography pattern. */
        display: block;
        margin: 4px 0 0
    }
}

/* Include/Exclude */
.inc-exc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.inc-list, .exc-list {
    list-style: none
}

    .inc-list li, .exc-list li {
        padding: 8px 0;
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        border-bottom: 1px solid #F5F5F5
    }

    .inc-list i {
        color: #00B894
    }

    .exc-list i {
        color: #E74C3C
    }

.inc-exc h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px
}

/* Gallery */
.gallery-masonry {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

.gallery-col {
    display: flex;
    flex-direction: column;
    gap: 10px
}

    .gallery-col img {
        width: 100%;
        object-fit: cover;
        border-radius: var(--radius);
        cursor: pointer;
        transition: var(--transition);
        border: 1px solid #E8E8E8
    }

        .gallery-col img:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow-lg)
        }

        .gallery-col img:not(.gallery-tall) {
            aspect-ratio: 4/3
        }

        .gallery-col img.gallery-tall {
            aspect-ratio: 3/4
        }

/* Gallery Grid (flat) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

    .gallery-grid img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        border-radius: var(--radius);
        cursor: pointer;
        transition: var(--transition);
        border: 1px solid #E8E8E8
    }

        .gallery-grid img:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow-lg)
        }

/* Lightbox */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.9);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

    .lightbox-overlay.active {
        display: flex
    }

    .lightbox-overlay img {
        max-width: 90vw;
        max-height: 90vh;
        object-fit: contain;
        border-radius: var(--radius-lg)
    }

/* Reviews */
.reviews-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--cream);
    border-radius: var(--radius);
    border: 1px solid #F0EDE8
}

.reviews-score {
    text-align: center;
    min-width: 80px
}

    .reviews-score .score-num {
        font-size: 40px;
        font-weight: 800;
        color: var(--text);
        line-height: 1
    }

    .reviews-score .score-label {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px
    }

.reviews-stars {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin: 4px 0
}

    .reviews-stars i {
        color: var(--cta);
        font-size: 14px
    }

.reviews-bars {
    flex: 1
}

.review-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-muted)
}

.review-bar-fill {
    flex: 1;
    height: 6px;
    background: #EEE;
    border-radius: 3px;
    overflow: hidden
}

    .review-bar-fill span {
        display: block;
        height: 100%;
        background: var(--cta);
        border-radius: 3px
    }

.review-item {
    padding: 20px 0;
    border-bottom: 1px solid #F0F0F0
}

    .review-item:last-child {
        border-bottom: none
    }

.review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-muted)
}

.review-author {
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.review-date {
    font-size: 12px;
    color: var(--text-muted)
}

.review-rating {
    display: flex;
    gap: 2px;
    margin-bottom: 6px
}

    .review-rating i {
        color: var(--cta);
        font-size: 12px
    }

.review-text {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.8
}

.review-tags {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap
}

.review-tag {
    padding: 3px 8px;
    border-radius: var(--radius);
    background: var(--light);
    font-size: 11px;
    color: var(--text-muted)
}

.reviews-empty {
    text-align: center;
    padding: 32px 0;
    color: var(--text-muted);
    font-size: 14px
}

/* Quick Summary Box (Block 10.2) */
.quick-summary-section {
    background: linear-gradient(135deg,#F8FAFC 0%,#EFF6FF 100%);
    border-left: 4px solid var(--brand)
}

.quick-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 8px
}

.quick-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}

    .quick-summary-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14.5px;
        color: var(--text);
        line-height: 1.5;
        min-height: 22px
    }

        .quick-summary-list li i {
            flex-shrink: 0;
            font-size: 18px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            height: 22px
        }

.quick-summary-list--include li i {
    color: #10B981
}

.quick-summary-list--exclude li i {
    color: #EF4444
}

@media(max-width:768px) {
    .quick-summary-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }
}

/* Sidebar overrides — when these blocks live in the right column they need
   a narrower, single-column treatment so they don't overflow the ~340px
   width. (Phase 17b — moved from left main into the sidebar so the long
   left column reads lighter.) */
.detail-sidebar .quick-summary-section {
    padding: 18px 20px;
    margin-bottom: 16px;
    border-radius: 12px
}

    .detail-sidebar .quick-summary-section h2 {
        font-size: 16px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--brand)
    }

        .detail-sidebar .quick-summary-section h2 i {
            font-size: 18px
        }

.detail-sidebar .quick-summary-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 6px
}

.detail-sidebar .quick-summary-list {
    gap: 8px
}

    .detail-sidebar .quick-summary-list li {
        font-size: 13.5px;
        line-height: 1.45;
        align-items: flex-start
    }

        .detail-sidebar .quick-summary-list li i {
            font-size: 16px;
            margin-top: 1px
        }

.detail-sidebar #flightCallout {
    margin-bottom: 16px !important
}

.detail-sidebar .kakao-share-section {
    margin-bottom: 0
}

.detail-sidebar .kakao-share-card {
    padding: 18px 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    border-radius: 12px
}

.detail-sidebar .kakao-share-icon {
    width: 40px;
    height: 40px
}

    .detail-sidebar .kakao-share-icon i {
        font-size: 20px
    }

.detail-sidebar .kakao-share-body {
    min-width: 0
}

    .detail-sidebar .kakao-share-body h3 {
        font-size: 15px
    }

    .detail-sidebar .kakao-share-body p {
        font-size: 12.5px
    }

.detail-sidebar .share-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%
}

    .detail-sidebar .share-actions .btn {
        width: 100%;
        justify-content: center
    }

/* Cancellation Policy (Block 10.7) */
.cancel-policy-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px
}

    .cancel-policy-list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 11px 0;
        border-bottom: 1px dashed #E5E7EB;
        font-size: 14.5px
    }

        .cancel-policy-list li:last-child {
            border-bottom: none
        }

    .cancel-policy-list strong {
        color: var(--navy);
        font-weight: 700;
        flex-shrink: 0;
        min-width: 120px
    }

    .cancel-policy-list span {
        color: var(--text-light);
        text-align: right
    }

.cancel-policy-note {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
    padding: 10px 14px;
    background: #F9FAFB;
    border-radius: 6px;
    border-left: 3px solid #E5E7EB
}

.cancel-policy-plain {
    font-size: 14px;
    color: var(--text-light);
    margin: 8px 0 0
}

/* Share / Email / Print — neutral card with color-differentiated action buttons. */
.kakao-share-section {
    background: transparent;
    padding: 0
}

.kakao-share-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    flex-wrap: wrap
}

.kakao-share-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #0F1E3C;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

    .kakao-share-icon i {
        font-size: 24px;
        color: #fff
    }

.kakao-share-body {
    flex: 1;
    min-width: 200px
}

    .kakao-share-body h3 {
        font-size: 17px;
        font-weight: 700;
        color: #0F1E3C;
        margin-bottom: 4px
    }

    .kakao-share-body p {
        font-size: 13px;
        color: #4B5563;
        line-height: 1.6;
        margin: 0
    }

.share-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}
/* Each share button gets its own brand color so users can scan the 3 actions
   at a glance: yellow=KakaoTalk, blue=Email, neutral white=Print. */
.kakao-share-btn {
    background: #FEE500;
    color: #3C1E1E;
    border: 1px solid transparent;
    padding: 11px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s ease
}

    .kakao-share-btn:hover {
        transform: translateY(-2px);
        background: #FCD400
    }

.share-btn-email {
    background: #2B7FFF;
    color: #fff;
    border: 1px solid transparent;
    padding: 11px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s ease
}

    .share-btn-email:hover {
        transform: translateY(-2px);
        background: #1A6AE8
    }

.share-btn-print {
    background: #fff;
    color: #475569;
    border: 1px solid #CBD5E1;
    padding: 11px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s ease
}

    .share-btn-print:hover {
        transform: translateY(-2px);
        background: #F1F5F9;
        border-color: #94A3B8
    }

@media(max-width:640px) {
    .kakao-share-card {
        justify-content: center;
        text-align: center
    }

    .share-actions {
        width: 100%
    }

    .kakao-share-btn, .share-btn-email, .share-btn-print {
        flex: 1;
        justify-content: center;
        min-width: 0
    }
}

/* ───────── Print stylesheet ─────────
   Hide all site chrome (header, footer, nav, floating buttons, sidebar, mobile
   sticky CTA, share buttons) and present only the tour content as a clean
   read-only document. Triggered by window.print() or browser Print.

   Browser-level URL/date headers are NOT controllable via CSS — users must
   uncheck "Headers and footers" in the Chrome print dialog. The @page rule
   below just sets comfortable margins. */
@page {
    margin: 10mm 12mm 14mm 12mm
}

@media print {
    /* Reset body for print rendering — consistent font stack, tight line-height
     for print density, exact color reproduction for the navy/gold accents. */
    body {
        background: #fff !important;
        color: #111 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-family: 'Malgun Gothic','Noto Sans KR','Apple SD Gothic Neo',sans-serif !important;
        font-size: 11pt !important;
        line-height: 1.5 !important
    }
    /* Print-banner header with hans branding at very top */
    .detail-main::before {
        content: 'HANS TRAVEL · 한스여행사';
        display: block;
        font-size: 9pt;
        color: #B49650;
        letter-spacing: 3px;
        text-transform: uppercase;
        border-bottom: 1px solid #0F1E3C;
        padding-bottom: 6px;
        margin-bottom: 8px;
        font-weight: 700;
    }
    /* Hide every piece of site chrome. Selectors match the live markup —
     header is <header id="header" class="header">, footer is
     <footer id="site-footer" class="footer">, etc. */
    header, .header, #header, .nav, .nav-mega-wrap,
    footer, .footer, #site-footer,
    .summary-bar, .price-card, .detail-sidebar, .booking-sidebar,
    .mobile-cta, .float-cta, .floating-icons,
    .kakao-share-section, #kakaoShareSection,
    .similar-grid, #similarSection, #reviewsSection,
    .lightbox-overlay, .breadcrumb, .page-loading, #pageLoading,
    .reveal-on-scroll {
        display: none !important;
        visibility: hidden !important
    }
    /* Hero — compact, no overlay, dark title color */
    .detail-hero {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        background: #fff !important;
        overflow: visible !important
    }

        .detail-hero img {
            max-height: 200px;
            width: 100%;
            object-fit: cover;
            display: block
        }

        .detail-hero::after {
            display: none !important;
            content: none !important
        }

    .detail-hero-content {
        position: static !important;
        padding: 14px 0 8px !important
    }

        .detail-hero-content h1 {
            color: #0F1E3C !important;
            text-shadow: none !important;
            font-size: 22px !important;
            margin-bottom: 4px !important;
            font-weight: 700
        }

    .hero-meta {
        color: #444 !important;
        text-shadow: none !important;
        font-size: 12px !important;
        gap: 10px !important;
        display: flex !important
    }
    /* Body layout — single column */
    .container {
        padding: 0 !important;
        max-width: none !important
    }

    .detail-layout {
        display: block !important;
        grid-template-columns: none !important;
        padding: 0 !important;
        gap: 0 !important
    }

    .detail-main {
        min-width: 0 !important;
        width: 100% !important
    }
    /* Sections */
    .content-section {
        background: #fff !important;
        border: 1px solid #DDD !important;
        padding: 12px 16px !important;
        margin-bottom: 10px !important;
        page-break-inside: avoid;
        box-shadow: none !important;
        border-radius: 8px !important
    }

        .content-section h2 {
            font-size: 14px !important;
            color: #0F1E3C !important;
            margin-bottom: 8px !important;
            font-weight: 700
        }

            .content-section h2 i {
                color: #0F1E3C !important;
                font-size: 14px !important
            }
    /* Quick Summary */
    .quick-summary-section {
        background: #F8FAFC !important;
        border: 1px solid #DDD !important;
        border-left: 3px solid #0F1E3C !important
    }

    .quick-summary-grid {
        gap: 14px !important
    }

    .quick-summary-list li {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        padding: 0 !important
    }
    /* Highlights — invert dark theme to light for print */
    .content-section--highlights {
        background: #fff !important;
        border: 1px solid #DDD !important
    }

        .content-section--highlights h2 {
            color: #0F1E3C !important
        }

    .highlights-grid-v2 {
        gap: 8px !important
    }

        .highlights-grid-v2[data-count] {
            grid-template-columns: repeat(2,1fr) !important
        }

    .highlight-card {
        border: 1px solid #DDD !important;
        color: #111 !important;
        page-break-inside: avoid;
        cursor: default !important
    }

        .highlight-card.highlight-card--accent {
            background: #FAFAFA !important;
            border-color: #DDD !important
        }

        .highlight-card h4 {
            color: #0F1E3C !important;
            font-size: 13px !important;
            line-height: 1.3 !important
        }

        .highlight-card p {
            color: #444 !important;
            font-size: 12px !important;
            line-height: 1.5 !important
        }

    .highlight-toggle {
        display: none !important
    }

    .highlight-icon {
        background: #E5E7EB !important;
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 8px !important
    }

        .highlight-icon i {
            color: #0F1E3C !important;
            font-size: 16px !important
        }

    .highlight-img {
        max-height: 120px !important;
        aspect-ratio: auto !important
    }

    .highlight-body {
        padding: 10px 12px !important
    }

    .highlight-detail {
        max-height: none !important;
        margin-top: 6px !important
    }

    .highlight-detail-inner {
        color: #222 !important;
        border-color: #DDD !important;
        padding: 6px 8px !important;
        font-size: 11.5px !important
    }
    /* Itinerary */
    .day-item {
        page-break-inside: avoid;
        padding: 0 0 16px 20px !important;
        margin-left: 8px !important
    }

        .day-item:last-child {
            padding-bottom: 0 !important
        }

    .day-num {
        color: #0F1E3C !important;
        font-size: 11px !important;
        font-weight: 700 !important
    }

    .day-title {
        font-size: 14px !important;
        color: #0F1E3C !important;
        margin-bottom: 4px !important
    }

    .day-desc {
        font-size: 12px !important;
        color: #222 !important;
        line-height: 1.55 !important;
        margin-bottom: 6px !important
    }

    .day-chip {
        font-size: 10.5px !important;
        padding: 3px 8px !important;
        background: #fff !important;
        border: 1px solid #DDD !important
    }

    .day-photo-full img {
        max-height: 140px !important;
        aspect-ratio: auto !important;
        border-radius: 6px !important
    }
    /* Cancellation policy table */
    .cancel-policy-list li {
        padding: 8px 0 !important;
        font-size: 12px !important
    }

    .cancel-policy-list strong {
        font-size: 12px !important
    }

    .cancel-policy-note {
        font-size: 11px !important;
        padding: 6px 10px !important
    }
    /* Inclusions/Exclusions */
    .inc-exc {
        gap: 14px !important
    }

    .inc-list li, .exc-list li {
        font-size: 12px !important;
        padding: 4px 0 !important
    }
    /* Strip link styling — printed page is read-only */
    a {
        color: inherit !important;
        text-decoration: none !important
    }
    /* Print-only contact footer */
    .print-footer {
        display: block !important;
        margin-top: 14px;
        padding: 10px 0;
        border-top: 2px solid #0F1E3C;
        font-size: 10.5px;
        color: #444;
        text-align: center;
        page-break-inside: avoid
    }
}

.print-footer {
    display: none
}

/* FAQ */
.faq-item {
    border-bottom: 1px solid #EEE;
    padding: 16px 0
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--text)
}

    .faq-q i {
        transition: var(--transition);
        color: var(--cta)
    }

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s;
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.8
}

.faq-item.open .faq-a {
    max-height: 500px;
    padding-top: 12px
}

.faq-item.open .faq-q i {
    transform: rotate(180deg)
}

/* Similar Tours */
.similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
    gap: 16px
}

.similar-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid #E8E8E8;
    transition: var(--transition)
}

    .similar-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg)
    }

    .similar-card img {
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: cover
    }

.similar-card-body {
    padding: 16px
}

    .similar-card-body h4 {
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 6px
    }

    .similar-card-body p {
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 8px
    }

    .similar-card-body strong {
        font-size: 18px;
        color: var(--text);
        font-weight: 800
    }

/* Mobile Sticky CTA */
.mobile-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid #EEE;
    padding: 12px 20px;
    z-index: 999;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08)
}

.mobile-cta-price small {
    font-size: 11px;
    color: var(--text-muted);
    display: block
}

.mobile-cta-price strong {
    font-size: 20px;
    color: var(--text);
    font-weight: 800
}

/* Error State */
.td-error {
    text-align: center;
    padding: 120px 24px;
    color: var(--text-muted)
}

    .td-error h2 {
        font-family: var(--font-serif);
        color: var(--navy);
        margin-bottom: 12px
    }

    .td-error p {
        margin-bottom: 24px
    }

/* Responsive */
@media(max-width:1024px) {
    .detail-layout {
        grid-template-columns: 1fr
    }

    .detail-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    .price-card {
        margin-bottom: 0
    }
}

@media(max-width:768px) {
    .detail-hero {
        height: 50vh
    }

    .content-section {
        padding: 20px
    }

    .inc-exc {
        grid-template-columns: 1fr
    }

    .gallery-masonry {
        grid-template-columns: repeat(2,1fr)
    }

    .gallery-col:nth-child(3) {
        display: none
    }

    .gallery-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .detail-sidebar {
        grid-template-columns: 1fr
    }

    .summary-bar {
        display: none
    }

    .mobile-cta {
        display: flex
    }

    .float-cta {
        bottom: 80px
    }

    .day-photo-full img {
        aspect-ratio: 16/9
    }

    .highlights-grid-v2 {
        grid-template-columns: 1fr 1fr
    }
}