/* ───────────────────────────────────────────
   Planning section pages — shared styles
   Used by every /planning/<section>/ page.
   Markup for the breadcrumb, hero, nav card and
   bottom sheet is rendered by /js/planning-nav.js
   from /js/planning-data.js (single source of truth).
   Tokens (--color-*, --radius-*, --z-*) come from
   partials/header.css :root, loaded first.
   ─────────────────────────────────────────── */

body {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', Arial, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
}

.main-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 40px 80px;
    box-sizing: border-box;
}

/* Breadcrumb styles moved to the shared partials/breadcrumb.css
   (single source of truth — also used by /procedures/). */

/* ───── Hub hero (mirrors /procedures/ tone) ───── */
.hub-hero {
    text-align: center;
    padding: 40px 24px 64px;
    border-bottom: 1px solid var(--color-divider);
}
.hub-eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}
.hub-title {
    margin: 0 0 14px;
    font-size: 72px;
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--color-text);
}
.hub-tagline {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}
.hub-sub {
    margin: 32px auto 0;
    max-width: 580px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-muted);
}

@media (max-width: 720px) {
    .hub-hero { padding: 28px 20px 48px; }
    /* Cap at 52px, but shrink to fit the longest hub title ("Transportation",
       14 chars) on narrow phones so it never clips. ÷6.74 = that title's rendered
       width per font-px (Outfit 300); the −90px (vs ~72px side space) leaves
       ~18px breathing room from the right edge. Caps at 52px above ~440px wide. */
    .hub-title { font-size: min(52px, calc((100vw - 90px) / 6.74)); }
}

/* ───── Two-column body (mirrors /p/ detail layout) ───── */
.planning-body {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 80px;
    margin-top: 48px;
}

.planning-left {
    min-width: 0;
}

/* Sticky sidebar — same offset as detail pages */
.planning-right {
    position: sticky;
    top: 72px;
    align-self: start;
}

/* Bottom-sheet bits — hidden on desktop, shown on mobile (≤949) */
.planning-cta-bar,
.planning-sheet-backdrop,
.planning-sheet-handle,
.planning-sheet-close { display: none; }

/* ── Planning navigation — floating card w/ recessed inset bar ── */
.planning-nav {
    border: 1px solid var(--color-divider);
    /* Matches the detail-page sidebar card (--radius-md). Not concentric
       with the inset/pill on purpose — just nested tokens, biggest
       outside: card md(16) > inset sm(12) > pill sm(12). */
    border-radius: var(--radius-md);
    padding: 20px;
    background: var(--color-bg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}
/* Card title — matches the detail-page sidebar heading (.sidebar-subtitle
   "Nearby"): 18px / 500 / #222. It's a link to /planning/, so it keeps
   a chevron affordance. */
.planning-nav-title {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s ease;
}
.planning-nav-title:hover {
    color: var(--color-text);
}
.planning-nav-title-chevron {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-text-disabled);
    transition: color 0.2s ease;
}
.planning-nav-title:hover .planning-nav-title-chevron {
    color: var(--color-text-faint);
}
/* Recessed (pressed-in) bar — same treatment as .menu-wrapper */
.planning-inset {
    display: flex;
    flex-direction: column;
    /* 4px visual gap between the (crisp) white pills. The gap is NOT a
       hover dead zone: each item's ::before extends up to cover the gap
       above it, so the cursor is always over some item. */
    gap: 4px;
    padding: 6px;
    /* Inset bumped to lg (20px). Card stays md (16) for consistency
       with other cards, so the inset is intentionally rounder than the
       card here. The pill is kept concentric with THIS inset (below). */
    border-radius: var(--radius-lg);
    background-color: rgba(237, 237, 240, 0.6);
    box-shadow:
        inset 2px 2px 6px rgba(0, 0, 0, 0.10),
        inset -1px -1px 3px rgba(255, 255, 255, 0.7);
}
.planning-nav-link {
    position: relative;
    display: block;
    text-align: left;
    padding: 13px 18px;
    /* Concentric with the inset bar: inset radius (20px) − inset
       padding (6px) = 14px. Intentional off-scale value (not a token). */
    border-radius: 14px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-muted);
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
/* Invisible hit-area that fills the 4px gap ABOVE each item, so moving
   the cursor between rows never lands in a dead zone — it's always over
   some item. Keeps the white pill itself crisp (no clip / border tricks). */
.planning-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    height: 4px;
}
/* White capsule — hover + current page (same as header .menu li.active) */
.planning-nav-link:hover {
    background-color: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.planning-nav-link.is-active {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
/* Drop the active pill whenever the cursor is anywhere in the inset
   (so only the hovered item wears white) — except when hovering the
   active item itself, or when it's expanded. Using :inset:hover (not
   :has(...:hover)) covers the 4px gaps between items too, so the pill
   doesn't flicker back to the active item while passing between rows.
   Bold stays, so it still reads as selected. */
.planning-inset:hover .planning-nav-link.is-active:not(.is-open):not(:hover) {
    background-color: transparent;
    box-shadow: none;
}

/* ── Expandable active item ── */
.planning-nav-link.is-expandable {
    padding: 0;
    overflow: hidden;
    /* Same 14px as the other pills — concentric with the 20px inset. */
    border-radius: 14px;
    cursor: default;
}
.planning-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 13px 18px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}
.planning-nav-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-text-faint);
    transition: transform 0.3s ease;
}
.planning-nav-link.is-open .planning-nav-chevron {
    transform: rotate(180deg);
}

/* Smooth height reveal via grid 0fr→1fr (no fixed height needed) */
.planning-subnav {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.planning-nav-link.is-open .planning-subnav {
    grid-template-rows: 1fr;
}
/* No padding here — any box on the collapsible wrapper would leak its
   height when grid collapses to 0fr, breaking the pill shape. Bottom
   breathing room is carried by the last link's own padding instead. */
.planning-subnav-inner {
    overflow: hidden;
}
.planning-subnav-divider {
    height: 1px;
    background: var(--color-divider);
    margin: 2px 18px 6px;
}
.planning-subnav-link {
    display: flex;
    /* Baseline-align, then the chevron is nudged down so it's centered
       on the x-height (lowercase "a"), not the full cap height. */
    align-items: baseline;
    gap: 6px;
    /* Indented from the parent label so the list reads as nested */
    padding: 8px 18px 8px 32px;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.planning-subnav-link:hover {
    color: var(--color-text);
}
/* Chevron fades in just right of the text on hover, bottom-aligned.
   (opacity:0 keeps it in layout, so the text never shifts.) */
.planning-subnav-chevron {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    /* Center the 13px glyph on the x-height: drop it by (13px − xHeight)/2,
       then nudge up 2px so it sits a touch higher (looks better against the text). */
    transform: translateY(calc((13px - 1ex) / 2 - 2px));
    opacity: 0;
    transition: opacity 0.2s ease;
}
.planning-subnav-link:hover .planning-subnav-chevron {
    opacity: 1;
}
.planning-subnav-seeall {
    color: var(--color-text);
    font-weight: 500;
    padding-bottom: 14px;
}
.planning-subnav-seeall:hover {
    color: var(--color-text);
}

/* Left-column placeholder (content added later) */
.planning-placeholder {
    color: var(--color-text-disabled);
    font-size: 15px;
    line-height: 1.6;
    padding: 40px 0;
}

/* Rendered guide body (Markdown → sanitized HTML, injected by planning-article.js) */
.planning-article {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.planning-article > :first-child { margin-top: 0; }
.planning-article h1,
.planning-article h2 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
    margin: 40px 0 14px;
}
.planning-article h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--color-text);
    margin: 28px 0 10px;
}
.planning-article p { margin: 0 0 16px; }
.planning-article ul,
.planning-article ol { margin: 0 0 16px; padding-left: 22px; }
.planning-article li { margin: 0 0 6px; }
.planning-article a { color: var(--color-brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.planning-article img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 8px 0; }
.planning-article blockquote {
    margin: 0 0 16px;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--color-divider);
    color: var(--color-text-muted);
}
.planning-article hr { border: none; border-top: 1px solid var(--color-divider); margin: 32px 0; }
.planning-article code {
    background: var(--color-surface);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-size: 0.9em;
}
.planning-article-updated {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--color-divider);
    font-size: 13px;
    color: var(--color-text-faint);
}

/* ───── Mobile / tablet: nav becomes a summoned bottom sheet ─────
   The CTA is a shared centered floating pill in both viewports;
   only the sheet shape differs:
     • Viewport 1 (≤743): edge-to-edge bottom sheet
     • Viewport 2 (744–949): centered floating sheet                 */

/* Shared bits for both sheet viewports (≤949) */
@media (max-width: 949px) {
    .planning-body {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* The card is flat inside the sheet (the sheet is the container) */
    .planning-nav {
        border: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        /* Fill the sheet below the handle: "Planning" title stays, inset scrolls.
           min-height:0 lets the inset child shrink so it can overflow. */
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    /* Only the gray "well" scrolls — its size is fixed (fills the space under
       the Planning title); the menu links scroll inside it. */
    .planning-inset {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* The inset is a flex column, so its items default to flex-shrink:1 — they'd
       compress to fit instead of overflowing, so overflow-y:auto would never
       scroll (and the expanded subnav's grid accordion would clip "See All").
       flex-shrink:0 keeps each item's natural height → content overflows → scrolls. */
    .planning-inset > * {
        flex-shrink: 0;
    }
    /* Common sheet shell — position offsets/shape set per viewport below.
       The sheet no longer scrolls; the header (handle + Planning + X) stays put
       and only .planning-inset scrolls internally (below). So it's a
       non-scrolling flex column. */
    .planning-right {
        position: fixed;
        z-index: var(--z-overlay-sheet);
        background: var(--color-bg);
        display: flex;
        flex-direction: column;
        /* Enforce max-height (set per viewport) so the flex children stay within
           it and the inset scrolls instead of the sheet growing past the cap.
           Also clips content to the rounded top corners. */
        overflow: hidden;
        margin: 0;
        transition: transform 0.35s ease;
    }
    .planning-sheet-handle {
        display: block;
        width: 42px;
        height: 4px;
        background: var(--color-divider);
        border-radius: 2px;
        /* 10 (not 14): pulls "Planning" up 4px so its baseline meets the X
           button's bottom edge (was 4px below it). */
        margin: 0 auto 10px;
        /* Shift up to match the detail-page handle (aligns with close btn) */
        transform: translateY(-6px);
    }
    .planning-sheet-close {
        display: flex;   /* visuals → shared .close-btn --corner (header.css) */
    }
    .planning-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--backdrop-color);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--backdrop-duration) ease, visibility var(--backdrop-duration) ease;
        z-index: var(--z-overlay-backdrop);
    }
    .planning-sheet-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }
    /* Floating pill CTA — identical in both viewports (centered, off the
       bottom edge). Only the SHEET shape differs per viewport below. */
    .main-content { padding-bottom: 88px; }
    .planning-cta-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 20px;
        transform: translateX(-50%);
        z-index: var(--z-mobile-cta);
        width: min(420px, 92vw);
        padding: 6px;
        background: var(--color-bg);
        border: 1px solid var(--color-divider);
        border-radius: 999px;
        /* Softer than the detail-page CTA (was 0.12) — closer to the
           site's card shadows, since this is a muted nav button. */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        color: var(--color-text);
        cursor: pointer;
    }
    .planning-cta-bar > span {
        flex: 1;
        background: var(--color-surface);
        padding: 12px 18px;
        border-radius: 999px;
        text-align: center;
    }
    .planning-cta-bar svg {
        width: 20px;
        height: 20px;
        color: var(--color-text-disabled);
        flex-shrink: 0;
        margin-right: 8px;
    }
    body.sheet-open { overflow: hidden; }
    body.sheet-open .planning-cta-bar { display: none; }
}

/* Viewport 1 (≤743) — edge-to-edge bottom sheet */
@media (max-width: 743px) {
    /* Trim top/side padding to match the detail page (gyeongbokgung etc.).
       Bottom stays 88px (set in the ≤949 block) to clear the floating CTA. */
    .main-content { padding-top: 12px; padding-left: 16px; padding-right: 16px; }
    .planning-right {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        padding: 14px 16px calc(24px + env(safe-area-inset-bottom));
        max-height: 88vh;
        transform: translateY(100%);
    }
    .planning-right.is-open {
        transform: translateY(0);
    }
    /* iPhone: tighter bottom gap. (No viewport-fit=cover, so the home
       indicator sits outside the web content — no overlap risk. iPad
       keeps the larger 20px from the shared block.)
       Anchor via dvh/vw (not the fixed ICB): while the mobile header overlay
       is open, the preview/emulator feeds position:fixed a wrong viewport size,
       pushing a bottom-anchored CTA off-screen. dvh/vw track the real visible
       viewport. Harmless on real devices. */
    .planning-cta-bar {
        left: 50vw;
        bottom: auto;
        top: calc(100dvh - 12px);
        transform: translate(-50%, -100%);
    }
}

/* Viewport 2 (744–949) — centered floating sheet */
@media (min-width: 744px) and (max-width: 949px) {
    .planning-right {
        left: 50%;
        right: auto;
        bottom: 20px;
        top: auto;
        width: min(560px, 92vw);
        max-height: min(80vh, 720px);
        border: 1px solid var(--color-divider);
        border-radius: var(--radius-2xl);
        padding: 22px 24px 28px;
        transform: translate(-50%, calc(100% + 40px));
    }
    .planning-right.is-open {
        transform: translate(-50%, 0);
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    }
}