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

        /* ───── Main / category bar ───── */
        .main-content {
            max-width: 1280px;
            margin: 0 auto;
            padding: 24px 40px 80px;
            box-sizing: border-box;
        }
        .main-content.detail-main {
            padding-bottom: 28px;
        }

        /* ───── Detail page ───── */
        .breadcrumb {
            font-size: 16px;
            color: var(--color-text-muted);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .breadcrumb a {
            color: var(--color-text-muted);
            text-decoration: underline;
        }
        .breadcrumb a:hover { color: var(--color-brand); }
        .breadcrumb-chevron {
            width: 12px;
            height: 12px;
            color: var(--color-text-disabled);
            flex-shrink: 0;
        }

        /* Detail top — title / actions / subhead on grid so we can rearrange per breakpoint */
        .detail-top {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-areas:
                "title   title"
                "subhead actions";
            column-gap: 16px;
            align-items: end;
            margin-bottom: 22px;
        }
        .detail-top .detail-title { grid-area: title; }
        .detail-top .detail-actions { grid-area: actions; align-self: end; }
        .detail-top .detail-subhead { grid-area: subhead; align-self: start; margin: 8px 0 0; }

        .detail-title {
            font-size: 36px;
            font-weight: 500;
            color: var(--color-text);
            margin: 0;
            letter-spacing: -0.01em;
        }
        /* Verified-owner badge — top edge aligned with title's cap top */
        .owned-badge {
            width: 0.7em;
            height: 0.7em;
            color: var(--color-brand);
            vertical-align: top;
            flex-shrink: 0;
        }
        /* Wrap is the positioning context for the tooltip. */
        .owned-badge-wrap {
            position: relative;
            top: 5px; /* nudge down 5px from the top-aligned position */
            display: inline-flex;
            align-items: center;
            vertical-align: top;
            margin-left: 8px;
        }
        /* Hide badge on unclaimed listings (visible only when owner-verified) */
        [data-claim="unclaimed"] .owned-badge-wrap { display: none; }

        .owned-badge-tooltip {
            position: absolute;
            left: calc(100% + 8px);
            top: 50%;
            transform: translateY(-50%);
            width: max-content;
            max-width: 220px;
            padding: 8px 10px;
            background: var(--color-surface-dark);
            color: var(--color-bg);
            font-family: inherit;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.45;
            text-transform: none;
            letter-spacing: 0;
            border-radius: var(--radius-xs);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease;
            z-index: 10;
            text-align: center;
            white-space: nowrap;
        }
        .owned-badge-tooltip::before {
            content: '';
            position: absolute;
            right: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 5px solid transparent;
            border-right-color: var(--color-surface-dark);
        }
        .owned-badge-wrap:hover .owned-badge-tooltip,
        .owned-badge-wrap:focus-within .owned-badge-tooltip {
            opacity: 1;
            pointer-events: auto;
        }

        /* 뷰포트1 (모바일, ≤743px): the badge sits near the end of the title,
           so the default right-side tooltip (nowrap, left:100%) overflowed the
           viewport — an invisible (opacity:0) element still widens scrollWidth,
           producing the phantom right-side gap / horizontal scroll. Re-anchor
           the tooltip ABOVE the badge, horizontally centered, and flip the
           arrow to point down. */
        @media (max-width: 743px) {
            .owned-badge-tooltip {
                left: 50%;
                right: auto;
                top: auto;
                bottom: calc(100% + 8px);
                transform: translateX(-50%);
                /* Cap width so a long label can't re-overflow at the edge. */
                max-width: min(220px, 80vw);
                white-space: normal;
            }
            .owned-badge-tooltip::before {
                left: 50%;
                right: auto;
                top: 100%;
                bottom: auto;
                transform: translateX(-50%);
                border: 5px solid transparent;
                border-top-color: var(--color-surface-dark);
            }
        }

        .detail-actions {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        /* Vote pill — Reddit-style love/upvote/downvote in unified pill chrome
           (weighted votes: love +3, like +1, dislike −1 — docs/vote.md).
           Buttons fill the pill's full height so each circular hit area
           aligns exactly with the pill's rounded ends. */
        .vote-pill {
            display: inline-flex;
            align-items: center;
            padding: 0;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: 999px;
            transition: border-color 0.2s ease;
        }
        .vote-pill.upvoted { border-color: var(--color-brand); }
        .vote-pill.downvoted { border-color: var(--color-downvote); }
        .vote-pill.loved { border-color: var(--color-notification); }
        .vote-btn {
            width: 40px;
            height: 40px;
            border: none;
            background: none;
            border-radius: 50%;
            color: var(--color-text-secondary);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: color 0.15s ease, transform 0.15s ease;
        }
        .vote-btn:active { transform: scale(0.92); }
        .vote-btn svg {
            width: 22px;
            height: 22px;
            fill: white;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: fill 0.15s ease, stroke 0.15s ease;
        }
        /* Per-direction hover: stroke takes the vote color, fill stays white */
        .vote-love:hover { color: var(--color-notification); }
        .vote-up:hover { color: var(--color-brand); }
        .vote-down:hover { color: var(--color-downvote); }
        /* Active (already voted): icon becomes filled with the vote color */
        .vote-love.active { color: var(--color-notification); }
        .vote-up.active { color: var(--color-brand); }
        .vote-down.active { color: var(--color-downvote); }
        .vote-love.active svg { fill: var(--color-notification); }
        .vote-up.active svg { fill: var(--color-brand); }
        .vote-down.active svg { fill: var(--color-downvote); }
        .vote-score {
            font-size: 16px;
            font-weight: 500;
            color: var(--color-text);
            min-width: 40px;
            padding: 0 4px;
            text-align: center;
            transition: color 0.2s ease;
            font-variant-numeric: tabular-nums;
        }
        .vote-pill.upvoted .vote-score { color: var(--color-brand); }
        .vote-pill.downvoted .vote-score { color: var(--color-downvote); }
        .vote-pill.loved .vote-score { color: var(--color-notification); }

        /* Action tooltip — dark pill above the button, from data-tip. Votes get
           name + weight ("Love +3") so the weighted score is self-explanatory;
           Save just says "Save" (YouTube-style). CSS-only; hover-capable
           pointers only (no stuck tooltips on touch). */
        .vote-btn[data-tip], .detail-action[data-tip] { position: relative; }
        @media (hover: hover) {
            .vote-btn[data-tip]::after, .detail-action[data-tip]::after {
                content: attr(data-tip);
                position: absolute;
                bottom: calc(100% + 8px);
                left: 50%;
                transform: translateX(-50%) translateY(3px);
                background: color-mix(in srgb, var(--color-surface-dark), transparent 38.2%);
                color: #fff;
                font: 400 12px/1 'Outfit', sans-serif;
                padding: 7px 11px;
                border-radius: var(--radius-pill);
                white-space: nowrap;
                opacity: 0;
                pointer-events: none;
                z-index: var(--z-tooltip);
                transition: opacity 0.15s ease, transform 0.15s ease;
            }
            .vote-btn[data-tip]:hover::after, .detail-action[data-tip]:hover::after {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        .detail-action {
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            font-family: inherit;
            font-size: 16px;
            font-weight: 500;
            color: var(--color-text);
            cursor: pointer;
            padding: 9px 16px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        .detail-action svg {
            width: 20px;
            height: 20px;
            transition: fill 0.2s ease, stroke 0.2s ease;
        }

        /* Two zones: bookmark icon (its own intrinsic width) | text slot (fixed width).
           Text centered in its slot — "Save" and "Saved" expand symmetrically around
           the slot's center, so the icon never moves and the button width is locked. */
        .detail-action--save span {
            display: inline-block;
            width: 48px;
            text-align: center;
        }
        .detail-action--save:hover {
            background-color: transparent;
        }
        .detail-action--save:hover svg {
            stroke: var(--color-brand);
        }
        .detail-action--save.saved {
            border-color: var(--color-brand);
        }
        .detail-action--save.saved svg {
            fill: var(--color-brand);
            stroke: var(--color-brand);
        }

        .detail-subhead {
            font-size: 14px;
            color: var(--color-text-secondary);
            margin: 0 0 22px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 22px;
        }
        .detail-subhead a { color: var(--color-text); text-decoration: underline; }
        /* Category links (major › sub) — no underline by default, color change on hover. */
        .detail-subhead .detail-category-group {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .detail-subhead a.detail-category {
            color: var(--color-text-secondary);
            text-decoration: none;
        }
        .detail-subhead a.detail-category:hover { color: var(--color-text); text-decoration: underline; }
        .detail-subhead .detail-category-sep { color: var(--color-text-disabled); font-weight: 300; }

        /* Place rating — japan-guide.com style 4-tier system */
        .place-rating {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .place-rating .dots {
            display: inline-flex;
            gap: 3px;
        }
        .place-rating .dots span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--color-divider);
            display: block;
        }
        .place-rating.tier-3 .dots span:nth-child(-n+3),
        .place-rating.tier-2 .dots span:nth-child(-n+2),
        .place-rating.tier-1 .dots span:nth-child(-n+1) {
            background: var(--color-brand);
        }
        .place-rating .label {
            font-size: 14px;
            font-weight: 400;
            color: var(--color-text-secondary);
            letter-spacing: -0.005em;
        }
        .place-rating.tier-0 .label { color: var(--color-text-faint); }

        /* Gallery markup + styles loaded via /partials/gallery-{n}.html */

        .detail-body {
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
            gap: 80px;
        }

        .detail-section {
            padding: 40px 0;
        }
        /* Dividers wrap only the "What to know" block (top + bottom)
           — robust to siblings (e.g. inline ad) being inserted around it */
        .detail-section--wtk {
            border-top: 1px solid var(--color-divider);
            border-bottom: 1px solid var(--color-divider);
        }

        .detail-section h2 {
            font-size: 22px;
            font-weight: 500;
            color: var(--color-text);
            margin: 0 0 12px;
            letter-spacing: -0.01em;
        }
        .detail-section p {
            font-size: 15px;
            color: var(--color-text-secondary);
            line-height: 1.65;
            margin: 0 0 12px;
        }

        /* Collapsible description */
        .description-collapse {
            position: relative;
            max-height: 200px;
            overflow: hidden;
            transition: max-height 0.35s ease;
        }
        .description-collapse.expanded { max-height: 2000px; }
        .description-collapse p:last-of-type { margin-bottom: 0; }
        .description-fade {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 90px;
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--color-bg) 100%);
            pointer-events: none;
            transition: opacity 0.25s ease;
        }
        .description-collapse.expanded .description-fade { opacity: 0; }

        .show-more-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            padding: 14px 0 0;
            margin: 0;
            font: inherit;
            font-size: 14px;
            font-weight: 400;
            color: var(--color-text-faint);
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-color: var(--color-text-disabled);
            transition: color 0.2s ease, text-decoration-color 0.2s ease;
        }
        .show-more-btn:hover {
            color: var(--color-text-secondary);
            text-decoration-color: var(--color-text-faint);
        }
        .show-more-btn svg {
            width: 14px;
            height: 14px;
            stroke-width: 2;
            transition: transform 0.3s ease;
        }
        .show-more-btn.expanded svg { transform: rotate(180deg); }

        .info-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px 32px;
        }
        .info-list li {
            font-size: 15px;
            font-weight: 500;
            color: var(--color-text-secondary);
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        .info-list svg {
            width: 20px;
            height: 20px;
            stroke: var(--color-text);
            stroke-width: 1.5;
            flex-shrink: 0;
            margin-top: 4px;
        }
        .info-list strong {
            display: block;
            color: var(--color-text-faint);
            font-weight: 400;
            font-size: 14px;
            margin-bottom: 4px;
        }
        /* Tap-able links (email, etc.) inherit text styling — no blue underline */
        /* Note links (What to know rows + season/group note lines) follow the prose
           canonical: faint underline at rest, brand on hover (prose.md link spec). */
        .info-list a, .section-note-detail a {
            color: inherit;
            text-decoration: underline;
            text-decoration-color: var(--color-border);
            text-underline-offset: 3px;
            transition: color 0.15s ease, text-decoration-color 0.2s ease;
        }
        .info-list a:hover, .section-note-detail a:hover {
            color: var(--color-brand);
            text-decoration-color: var(--color-brand);
        }

        /* Copy-to-clipboard button — wraps text + icon as a single hit zone */
        .info-list .copy-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            padding: 4px 8px;
            margin: -4px -8px;
            color: inherit;
            font: inherit;
            cursor: pointer;
            border-radius: var(--radius-xs);
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .info-list .copy-btn:hover {
            background: none;
            transform: scale(1.03);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .info-list .copy-btn .copy-text {
            font: inherit;
            color: inherit;
        }
        .info-list .copy-btn svg {
            width: 14px;
            height: 14px;
            color: var(--color-text-disabled);
            stroke: currentColor;
            stroke-width: 1.8;
            margin: 0;
        }
        .info-list .copy-feedback {
            display: inline-block;
            margin-left: 14px;
            font-size: 13px;
            color: var(--color-brand);
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
        }
        .info-list .copy-feedback.visible {
            opacity: 1;
        }

        /* The aside is the sticky container so the price card AND the ad
           below it scroll together as a single unit */
        .detail-right {
            position: sticky;
            top: 72px;
            align-self: start;
        }

        /* Mobile bottom-sheet bits (hidden on desktop) */
        .mobile-cta-bar,
        .bottom-sheet-backdrop,
        .bottom-sheet-handle,
        .bottom-sheet-close { display: none; }

        /* Sheet header wrapper is layout-transparent by default; only the
           sheet viewports (≤949) promote it to a real sticky box. */
        .bottom-sheet-head { display: contents; }

        /* Unified Plan-your-visit card — Explore + Book in one container */
        .sidebar-card {
            border: 1px solid var(--color-divider);
            border-radius: var(--radius-md);
            padding: 20px;
            background: white;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
        }
        /* Main title — hidden on desktop (sub-titles act as primary headings),
           shown on mobile inside the sheet */
        .sidebar-main-title {
            display: none;
            font-size: 18px;
            font-weight: 500;
            color: var(--color-text);
            margin: 0 0 16px;
            letter-spacing: -0.005em;
        }
        /* Desktop: subtitles look like primary section headings */
        .sidebar-subtitle {
            font-size: 18px;
            font-weight: 500;
            color: var(--color-text);
            margin: 0 0 14px;
            letter-spacing: -0.005em;
        }
        .sidebar-subsection + .sidebar-subsection { margin-top: 24px; }
        .sidebar-nearby {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .sidebar-nearby .nearby-link {
            height: 56px;
            padding: 8px 10px;
            border-radius: var(--radius-sm);
        }
        .sidebar-nearby .nearby-icon { width: 18px; height: 18px; }
        .sidebar-nearby .nearby-text { font-size: 13px; }

        /* Inquiry / Stay CTAs — center single-line text (overrides .price-secondary space-between) */
        #inquiryCta,
        #stayCta { justify-content: center; }

        /* ── Sidebar claim prompt — visible only on unclaimed listings.
              Sits between sidebar-card and ad-slot in the aside. (Static pages only —
              the dynamic demo moved it into .page-meta's right slot; see below.) ── */
        .claim-prompt {
            margin-top: 16px;
            padding: 0;
            text-align: center;
        }
        /* Matches the page-meta "Notice an error? Let us know" recipe: same faint
           gray for prose AND link, link just heavier (600) + gray underline. */
        .claim-prompt p {
            margin: 0;
            font-size: 13px;
            color: var(--color-text-faint);
            line-height: 1.5;
        }
        .claim-prompt a {
            color: var(--color-text-faint);
            font-weight: 600;
            text-decoration: underline;
            text-decoration-color: var(--color-border);
            text-underline-offset: 3px;
            transition: color 0.2s ease, text-decoration-color 0.2s ease;
        }
        .claim-prompt a:hover {
            color: var(--color-brand);
            text-decoration-color: var(--color-brand);
        }
        /* Hide entirely when the listing is owner-claimed */
        [data-claim="claimed"] .claim-prompt { display: none; }

        /* Generic claim-state variant toggling for sidebar (and other) blocks */
        [data-claim="claimed"] [data-claim-show="unclaimed"] { display: none; }
        [data-claim="unclaimed"] [data-claim-show="claimed"] { display: none; }
        /* When the preceding subsection is claim-hidden, drop the inter-subsection gap
           so the visible subsection sits flush under the sidebar title (matches the
           layout of pages that only have one subsection, e.g. Gyeongbokgung). */
        [data-claim="unclaimed"] [data-claim-show="claimed"] + [data-claim-show="unclaimed"] { margin-top: 0; }
        [data-claim="claimed"] [data-claim-show="unclaimed"] + [data-claim-show="claimed"] { margin-top: 0; }

        /* ── Shared sheet-modal base (inquiry / report / claim) ───────────────
           Centered card that slides up from below. Each modal keeps its own
           prefixed classes (.inquiry-*, .report-*, .claim-*) purely as JS
           hooks; all visual styling lives here on .sheet-modal*. ── */
        .sheet-modal {
            position: fixed;
            inset: 0;
            z-index: var(--z-overlay-modal);
            visibility: hidden;
            pointer-events: none;
            /* Delay visibility:hidden until panel finishes sliding out */
            transition: visibility 0s linear var(--modal-slide-duration);
        }
        .sheet-modal.is-open {
            visibility: visible;
            pointer-events: auto;
            transition: visibility 0s linear 0s;
        }
        .sheet-modal__backdrop {
            position: absolute;
            inset: 0;
            background: var(--backdrop-color);
            opacity: 0;
            transition: opacity var(--backdrop-duration) ease;
        }
        .sheet-modal.is-open .sheet-modal__backdrop { opacity: 1; }
        .sheet-modal__panel {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) translateY(100vh);
            width: min(480px, calc(100% - 48px));
            box-sizing: border-box;
            max-height: 88vh;
            overflow-y: auto;
            background: var(--color-bg);
            border-radius: var(--radius-2xl);
            padding: 18px 28px 24px;   /* top 18 → title bottom 46 = X bottom (see .report-body) */
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
            transition: transform var(--modal-slide-duration) var(--modal-ease);
        }
        .sheet-modal.is-open .sheet-modal__panel { transform: translate(-50%, -50%); }
        /* Close button → shared .close-btn .close-btn--corner (see header.css). */
        .sheet-modal__title {
            margin: 0 0 30px;  /* title → first content gap, matches the claim modal's 30 */
            font-size: 22px;   /* matches .claim-title — all modal titles one size */
            font-weight: 600;
            color: var(--color-text);
            letter-spacing: -0.01em;
        }
        .sheet-modal__sub {
            margin: 0 0 18px;
            font-size: 13px;
            color: var(--color-text-muted);
            line-height: 1.5;
        }
        .sheet-modal__form { display: flex; flex-direction: column; gap: 12px; }
        .sheet-modal__form[hidden] { display: none; }
        .sheet-modal__field { display: flex; flex-direction: column; gap: 6px; }
        .sheet-modal__label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); }
        .sheet-modal__optional { font-weight: 400; color: var(--color-text-faint); }
        .sheet-modal__field input,
        .sheet-modal__field select,
        .sheet-modal__field textarea {
            font-family: inherit;
            font-size: 16px; /* ≥16px prevents iOS Safari auto-zoom on focus */
            color: var(--color-text);
            padding: 10px 12px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xs);
            outline: none;
            background: var(--color-bg);
            transition: border-color 0.15s ease;
        }
        .sheet-modal__field input:hover,
        .sheet-modal__field select:hover,
        .sheet-modal__field textarea:hover { border-color: color-mix(in srgb, var(--color-border), #000 20%); }
        .sheet-modal__field input:focus,
        .sheet-modal__field select:focus,
        .sheet-modal__field textarea:focus { border-color: var(--color-text); }
        .sheet-modal__field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
        .sheet-modal__submit {
            margin-top: 4px;
            padding: 12px 16px;
            background: var(--color-brand);
            border: none;
            border-radius: var(--radius-sm);
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-bg);
            cursor: pointer;
            transition: background-color 0.15s ease;
        }
        .sheet-modal__submit:hover { background: var(--color-brand-strong); }
        .sheet-modal__success { text-align: center; padding: 8px 0 12px; }
        .sheet-modal__success-icon {
            display: inline-flex;
            width: 56px;
            height: 56px;
            background: var(--color-brand-tint);
            color: var(--color-brand-strong);
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }
        .sheet-modal__success-icon svg { width: 28px; height: 28px; }
        .sheet-modal__success h3 {
            margin: 0 0 6px;
            font-size: 19px;
            font-weight: 600;
            color: var(--color-text);
        }
        .sheet-modal__success p {
            margin: 0 0 18px;
            font-size: 14px;
            color: var(--color-text-muted);
            line-height: 1.5;
        }

        /* ── Report modal — migrated to the "final submit button" standard
           (modal.md rule 10, 2026-07-10): fixed footer + gap-10 concentric black
           rounded-rect submit. Scoped to .report-* so the shared .sheet-modal
           (inquiry) is untouched. Panel padding moves to the body; footer holds
           the CTA at 10px inset (concentric with the panel's 28px corner). ── */
        .report-panel.sheet-modal__panel {
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
            /* transform = slide (from sheet-modal) · height = 성공 리빌 morph */
            transition: transform var(--modal-slide-duration) var(--modal-ease),
                        height var(--ktg-morph);
        }
        .report-body {
            /* top 18: title (28px tall) bottoms out at 46 = corner X's bottom edge
               (10 + 36) — modal-title alignment convention, matches .claim-glass. */
            padding: 18px 28px 20px;
            position: relative;        /* positioning context for the leaving form-view */
            overflow-y: auto;
        }
        .report-footer {
            flex: none;
            padding: 14px 10px 10px;
        }
        .report-footer[hidden] { display: none; }
        .report-submit {
            width: 100%;
            height: 44px;
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 16px;
            font-family: inherit;
            font-size: 15px;
            font-weight: 500;
            color: #fff;
            background: var(--color-text);
            border: 1px solid var(--color-text);
            border-radius: 18px;   /* concentric: panel 28 − gap 10 */
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, opacity 0.15s;
        }
        .report-submit:hover:not(:disabled) { background: #000; border-color: #000; }
        .report-submit:disabled { opacity: 0.45; cursor: not-allowed; }
        .report-submit[hidden] { display: none; }   /* footer swaps Send ↔ Done by state */
        /* success block = shared .ktg-success (partials/success-reveal.css); its
           44/38 padding + body 28/20 + footer 14 = 72/72 top/bottom gaps */
        @media (max-width: 743px) {
            .report-body { padding: 18px 16px 16px; }   /* top stays 18 (X-bottom alignment) */
        }

        /* ── Sidebar calendar (dermatology booking) ── */
        .sidebar-calendar {
            margin: 12px 0 14px;
            padding: 0;
            background: transparent;
        }
        .cal-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .cal-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text);
            letter-spacing: -0.005em;
        }
        .cal-nav {
            width: 26px;
            height: 26px;
            background: none;
            border: none;
            border-radius: 6px;
            color: var(--color-text-muted);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: background-color 0.15s ease, color 0.15s ease;
        }
        .cal-nav:hover { background: var(--color-surface); color: var(--color-text); }
        .cal-nav svg { width: 12px; height: 12px; }
        .cal-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            font-size: 10px;
            font-weight: 500;
            color: var(--color-text-faint);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .cal-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
        }
        .cal-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--color-text);
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.15s ease;
        }
        .cal-day:hover { background: var(--color-surface); }
        .cal-day.is-out { cursor: default; }
        .cal-day.is-out:hover { background: transparent; }
        .cal-day.is-past {
            color: var(--color-text-disabled);
            cursor: default;
        }
        .cal-day.is-past:hover { background: transparent; }
        .cal-day.is-today {
            background: var(--color-surface-dark);
            color: var(--color-bg);
            font-weight: 500;
        }
        .cal-day.is-today:hover { background: color-mix(in srgb, var(--color-surface-dark), #fff 12%); }
        .cal-day.is-closed {
            color: var(--color-text-disabled);
            cursor: default;
            position: relative;
        }
        .cal-day.is-closed:hover { background: transparent; }
        .cal-day.is-booked {
            color: var(--color-text-disabled);
            text-decoration: line-through;
            cursor: default;
        }
        .cal-day.is-booked:hover { background: transparent; }

        /* Secondary book button (Booking.com) — matches .price-cta width */
        .price-secondary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            box-sizing: border-box;
            height: 44px;                 /* unified button height */
            margin-top: 8px;
            padding: 0 16px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            background: var(--color-bg);
            color: var(--color-text);
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .price-secondary:hover {
            border-color: color-mix(in srgb, var(--color-border), #000 20%);
            transform: scale(1.01);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        }
        .price-secondary:active {
            transform: scale(0.99);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
        }
        .price-secondary .sidebar-secondary-sub {
            font-size: 12px;
            font-weight: 400;
            color: var(--color-text-faint);
        }

        /* Ad placeholder below the price card — matches price-card chrome */
        .ad-slot {
            margin-top: 16px;
            min-height: 250px;
            border: 1px solid var(--color-divider);
            border-radius: var(--radius-md);
            background: var(--color-divider);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: var(--color-text-faint);
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        /* Inline ad slot is mobile-only — must come AFTER .ad-slot to win cascade */
        .ad-slot--inline { display: none; }
        .price-cta {
            width: 100%;
            box-sizing: border-box;
            height: 44px;                 /* unified button height (matches Stay nearby / Guru / modal Submit) */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 14px;
            background: var(--color-brand);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            font-family: inherit;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            margin-bottom: 8px;
            transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .price-cta:hover {
            filter: brightness(1.06);
            transform: scale(1.01);
            box-shadow: 0 4px 14px rgba(35, 211, 211, 0.3);
        }
        .price-cta:active {
            transform: scale(0.99);
            box-shadow: 0 1px 2px rgba(35, 211, 211, 0.25);
        }

        /* Guru Report — common CTA at the bottom of the sidebar (all detail pages) */
        .guru-report-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: 100%;
            box-sizing: border-box;
            height: 44px;                 /* unified button height */
            padding: 0 14px;
            margin-top: 32px;
            background: var(--color-guru-report);
            color: var(--color-bg);
            border: none;
            border-radius: var(--radius-sm);
            font-family: inherit;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        /* display:flex above overrides the [hidden] attribute's UA display:none —
           this restores it so the CTA truly hides when no guru report exists. */
        .guru-report-cta[hidden] { display: none; }
        .guru-report-cta .guru-report-logo {
            display: block;
            width: 36px;
            height: 36px;
        }
        .guru-report-cta:hover {
            filter: brightness(1.15);
            transform: scale(1.01);
            box-shadow: 0 2px 4px rgba(51, 51, 51, 0.25);
        }
        .guru-report-cta:active {
            transform: scale(0.99);
            box-shadow: 0 1px 2px rgba(51, 51, 51, 0.2);
        }

        /* Inline address row at the top of "Where it is" — icon + value baseline-aligned */
        .info-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0 0 18px;
            font-size: 18px;
            color: var(--color-text);
        }
        .info-row svg {
            width: 22px;
            height: 22px;
            stroke: var(--color-text);
            stroke-width: 1.5;
            fill: none;
            flex-shrink: 0;
        }

        .map-placeholder {
            background: var(--color-divider);
            border-radius: var(--radius-md);
            height: 320px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-text-faint);
            font-size: 14px;
        }

        .map-links {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .map-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 16px;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            background: var(--color-bg);
            color: var(--color-text);
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .map-link:hover {
            border-color: color-mix(in srgb, var(--color-border), #000 20%);
            transform: scale(1.03);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }
        .map-link svg {
            width: 13px;
            height: 13px;
            stroke-width: 2;
            color: var(--color-text-faint);
        }

        /* Nearby — discovery-oriented card with icon top-left, label bottom-right */
        .nearby-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        /* Themed maps ("Featured in") — card style like nearby; column count by
           viewport: 4 default (뷰포트2 744–949, 뷰포트4+ ≥1128), 3 at 뷰포트3
           (950–1127), 2 at 뷰포트1 (≤743). Tile = shared .nearby-link in header.css. */
        .themed-maps-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        @media (min-width: 950px) and (max-width: 1127px) {
            .themed-maps-list { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 743px) {
            .themed-maps-list { grid-template-columns: repeat(2, 1fr); }
        }
        /* Nearby grid keeps its own 4→2 (≤720px) behavior, unchanged. */
        @media (max-width: 720px) {
            .nearby-list { grid-template-columns: repeat(2, 1fr); }
        }

        /* ── Visitor map — clickable thumbnail that opens a simple lightbox ── */
        .visitor-map-trigger {
            display: block;
            width: 100%;
            padding: 0;
            border: 1px solid var(--color-divider);
            border-radius: var(--radius-md);
            background: var(--color-surface);
            cursor: zoom-in;
            overflow: hidden;
            position: relative;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .visitor-map-trigger:hover {
            border-color: var(--color-border);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        }
        .visitor-map-trigger img {
            display: block;
            width: 100%;
            height: auto;
        }
        .visitor-map-zoom {
            position: absolute;
            bottom: 12px;
            right: 12px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.55);
            color: #fff;
            border-radius: 50%;
            pointer-events: none;
        }
        .visitor-map-zoom svg { width: 18px; height: 18px; }

        /* Map lightbox overlay (single image, fades in) */
        .map-lightbox {
            position: fixed;
            inset: 0;
            z-index: var(--z-lightbox);
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            box-sizing: border-box;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0s linear 0.2s;
        }
        .map-lightbox.is-open {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.2s ease;
        }
        .map-lightbox-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: var(--radius-sm);
            touch-action: none; /* we handle pinch/pan/double-tap ourselves */
            will-change: transform;
        }
        .map-lightbox-close {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 1; /* keep above the zoomed/transformed image (local stacking) */
            width: 40px;
            height: 40px;
            border: none;
            background: rgba(0, 0, 0, 0.55); /* dark backing so the white × stays visible over light map areas */
            color: #fff;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.15s ease;
        }
        .map-lightbox-close:hover { background: rgba(0, 0, 0, 0.72); }
        .map-lightbox-close svg { width: 22px; height: 22px; }
        /* .nearby-link card (base + themed variant) is the shared component in
           partials/header.css. Only the container grids + sidebar size override
           live here. */

        /* Social — pill links with icon + label */
        .social-list {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .social-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 14px 7px 10px;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            background: var(--color-bg);
            color: var(--color-text);
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .social-link:hover {
            border-color: color-mix(in srgb, var(--color-border), #000 20%);
            transform: scale(1.03);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }
        .social-link svg,
        .social-link img {
            width: 22px;
            height: 22px;
            display: block;
        }

        .similar-places {
            margin-top: 56px;
            padding-top: 40px;
        }

        /* Page meta footer — left: last updated · center: error report · right: claim listing */
        .page-meta {
            margin-top: 56px;
            padding: 24px 0 0;
            color: var(--color-text-faint);
            font-size: 13px;
            line-height: 1.6;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 24px;
            flex-wrap: wrap;
        }
        .page-meta-left { text-align: left; }
        .page-meta-center { text-align: center; }
        .page-meta-right { text-align: right; }
        .page-meta p { margin: 0; }
        /* Claim prompt lives in the right slot (update → error → claim; owner CTA =
           narrowest audience sits last). Neutralize the sidebar-variant box rules —
           link styling (.claim-prompt a) and [data-claim=claimed] hide still apply. */
        .page-meta .claim-prompt { margin: 0; }
        @media (max-width: 743px) {
            .page-meta {
                flex-direction: column;
                text-align: center;
            }
            .page-meta-left,
            .page-meta-center,
            .page-meta-right { text-align: center; }
        }
        .page-meta a,
        .page-meta .meta-link {
            color: var(--color-text-faint);
            text-decoration: underline;
            text-decoration-color: var(--color-border);
            text-underline-offset: 3px;
            transition: color 0.2s ease, text-decoration-color 0.2s ease;
        }
        .page-meta a:hover,
        .page-meta .meta-link:hover {
            color: var(--color-brand);
            text-decoration-color: var(--color-brand);
        }
        /* "Let us know" — button styled as a link, no chrome */
        .page-meta .meta-link {
            background: none;
            border: none;
            padding: 0;
            font: inherit;
            cursor: pointer;
        }
        /* Bolded date / link label — same gray as surrounding text, just heavier weight */
        .page-meta strong { font-weight: 600; }

        /* Affiliate (Klook) — full-bleed band with 3-column vertical card grid */
        /* Affiliate sections inherit .detail-section's vertical padding; bump it a bit
           extra so the Klook / Booking.com blocks breathe more vertically. */
        .affiliate-section.detail-section {
            padding: 56px 0;
            /* Sticky header is ~70px (56px pill + 14px top offset); reserve clearance
               so CTA-triggered scrollIntoView lands the title below the header. */
            scroll-margin-top: 96px;
        }
        .affiliate-section h2 {
            font-size: 22px;
            font-weight: 500;
            color: var(--color-text);
            margin: 0 0 6px;
            letter-spacing: -0.01em;
        }
        /* Bump specificity so .detail-section p (font-size:15px; secondary text) doesn't override */
        .affiliate-section .affiliate-intro {
            font-size: 14px;
            color: var(--color-text-muted);
            margin: 0 0 20px;
            line-height: 1.5;
        }
        .affiliate-list {
            display: flex;
            gap: 18px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            /* Top/bottom: 12/24px breathing room so hover scale + shadow never clip.
               Left AND right: bleed to the VIEWPORT edges (margin calc(50% - 50vw) on
               a centered container) with matching padding — cards scroll flush to both
               screen edges. scroll-padding matches the bleed so the first/last cards
               still PARK aligned with the content column (symmetric, 2026-07-08). */
            padding: 12px calc(50vw - 50%) 24px calc(50vw - 50%);
            margin: -12px calc(50% - 50vw) -24px calc(50% - 50vw);
            /* scroll-padding = the gutter from viewport edge to the content column, so
               the first/last card snap-park there (not flush to the screen edge). MUST
               be px, not the `%` used above: browsers resolve `%` scroll-padding against
               the scroll container's own (bled, full-width) box, so snap ignores it and
               the first card jams left. Gutter = max(.main-content padding 40px,
               50vw − half its 1280px max-width). Keep in sync with .main-content. */
            scroll-padding: 0 max(40px, calc(50vw - 600px));
            /* Beyond the 1280px wrapper (wide screens) HARD-clip the bled cards at the
               wrapper edge, so the row doesn't run endlessly to the screen edge — a
               peek card cuts cleanly there (Airbnb-style). No fade: a gradient fade to
               the page's white bg reads as a cheap overlay on a light UI. The clip inset
               = the gutter OUTSIDE the wrapper, so at ≤1280 it's max(0, negative)=0 → no
               clip = natural edge-to-edge bleed. 640 = 1280/2. */
            -webkit-clip-path: inset(0 max(0px, calc(50vw - 640px)));
            clip-path: inset(0 max(0px, calc(50vw - 640px)));
            -webkit-overflow-scrolling: touch;
        }
        .affiliate-list::-webkit-scrollbar { display: none; }
        /* Borderless card (similar-places v2 look, 2026-07-11): the card is an
           invisible column — the IMAGE frame carries the rounding, resting
           shadow, bevel, and hover lift, mirroring .place-card--v2 .place-card-img
           (partials/place-card.css). */
        .affiliate-card {
            display: flex;
            flex-direction: column;
            flex: 0 0 360px;
            scroll-snap-align: start;
            text-decoration: none;
            color: inherit;
        }
        .affiliate-thumb {
            aspect-ratio: 16 / 10;
            background: var(--color-divider);
            border-radius: var(--radius-lg);
            overflow: hidden;
            position: relative;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
        }
        /* Bevel + hairline keyline — same top-light model as .place-card--v2
           .place-card-img::after, so affiliate thumbs read as the same family. */
        .affiliate-thumb::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            z-index: 3;
            box-shadow:
                inset 0 2px 2px rgba(255, 255, 255, 0.55),
                inset 0 -2px 3px rgba(0, 0, 0, 0.22),
                inset 0 0 0 1px rgba(0, 0, 0, 0.08);
        }
        .affiliate-card:hover .affiliate-thumb {
            transform: scale(1.02);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        .affiliate-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 14px 12px 0;
        }
        .affiliate-body h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 500;
            color: var(--color-text);
            letter-spacing: -0.005em;
        }
        .affiliate-body p {
            margin: 0;
            font-size: 13px;
            color: var(--color-text-muted);
            line-height: 1.5;
        }
        .affiliate-meta {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding-top: 12px;
        }
        .affiliate-price {
            font-size: 15px;
            font-weight: 500;
            color: var(--color-text);
        }
        /* CTA: label + chevron that nudges right on card hover — the same
           affordance as the region-stage name (index.html .region-name-chevron:
           translateX(4px), 0.25s ease). Chevron 13px (x-height match of the
           13px label — the glyph spans half the viewBox). */
        .affiliate-cta {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text);
            display: inline-flex;
            align-items: center;
            gap: 2px;
        }
        .affiliate-cta svg {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: currentColor;
            /* 24-viewBox glyph drawn at 14px scales the stroke by 14/24 —
               2.5 here paints ~1.46px on screen, matching the 14px/500 label. */
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            /* Optical alignment: flex centers the svg BOX, but lowercase text
               reads lower — drop 1px so the glyph sits on the label's midline. */
            position: relative;
            top: 1px;
            transition: transform 0.25s ease;
        }
        .affiliate-card:hover .affiliate-cta svg {
            transform: translateX(3px);
        }
        .affiliate-section .affiliate-disclosure {
            margin: 18px 0 0;
            font-size: 12px;
            color: var(--color-text-faint);
            line-height: 1.4;
        }
        /* ───── Lightbox (ArchDaily-style) ───── */

        .lightbox {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            z-index: var(--z-lightbox);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s ease;
            display: flex;
            flex-direction: column;
        }
        .lightbox.active { opacity: 1; visibility: visible; }

        .lightbox-top {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            padding: 40px 36px 0;
            color: var(--color-bg);
        }
        .lightbox-meta {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            gap: 2px;
        }
        .lightbox-title {
            font-size: 24px;
            font-weight: 500;
            color: var(--color-bg);
            letter-spacing: -0.01em;
        }
        .lightbox-credit {
            font-size: 15px;
            color: var(--color-text-disabled);
        }
        .lightbox-counter {
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0.06em;
            color: var(--color-text-disabled);
            margin-top: 6px;
        }
        .lightbox-close {
            background: none;
            border: none;
            color: var(--color-bg);
            cursor: pointer;
            padding: 20px;
            margin: -20px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.5;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        .lightbox-close:hover {
            opacity: 1;
            transform: scale(1.05);
        }
        .lightbox-close svg { width: 60px; height: 60px; stroke-width: 1; }

        .lightbox-main {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 80px;
            min-height: 0;
        }
        .lightbox-image-wrap {
            position: relative;
            display: inline-flex;
            /* Box geometry comes from the photo's aspect ratio + the viewport
               ONLY — never from the natural size of whichever file is currently
               loaded. So the instant thumbnail and the high-res swap occupy the
               exact same box: sharpness changes, nothing moves. (Before this,
               `max-*` let the small thumb render at its own 800px size, then the
               1600px full "popped" bigger on arrival.)
               min() = contain math: fit --lb-ar into (available width × 60vh).
               --lb-ar is set per photo by detail-page.js; 1.5 is the fallback. */
            width: min(100%, calc(60vh * var(--lb-ar, 1.5)));
            aspect-ratio: var(--lb-ar, 1.5);
        }
        .lightbox-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            user-select: none;
            display: block;
        }
        /* Photo→photo crossfade (View Transitions API — progressive enhancement,
           feature-detected in detail-page.js show()). Naming the wrap gives the
           photo its own transition group, so ONLY it animates. Scoped to .active
           so the closed lightbox never claims the name. Fade only, no geometry
           animation — see the group/old/new rules below. */
        .lightbox.active .lightbox-image-wrap { view-transition-name: lightbox-photo; }
        /* Root snapshots swap instantly — the backdrop and lightbox chrome must
           not cross-fade on every arrow press (only the photo transitions). */
        ::view-transition-image-pair(root) { isolation: auto; }
        ::view-transition-old(root),
        ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
        /* The root GROUP's default 250ms (geometry no-op) must die too: it made
           the transition outlive our 240ms fades, and Chrome's fill-mode
           reverts a finished fade to opacity 1 — the old photo flashed fully
           opaque for the 1-2 frames between fade-end and teardown. */
        ::view-transition-group(root) { animation: none; }
        /* NO box animation. The wrap's size follows each photo's aspect ratio, so
           animating the group meant the frame grew/shrank on every aspect change
           — busy, and (being centre-aligned + top-anchored snapshots) it read as
           "old photo slides down, new slides in from above". Geometry now snaps;
           only opacity animates. */
        ::view-transition-group(lightbox-photo) { animation: none; }
        /* Each snapshot keeps its OWN natural size and centres on the shared
           centre point, instead of the UA default (stretched to the group's
           width, anchored to its top edge). Nothing scales, nothing moves: the
           two photos simply cross-dissolve in place.
           ⚠️ Centering MUST be transform-based, not `inset:0; margin:auto` —
           auto margins break when the snapshot OVERFLOWS the box (the group is
           sized to the NEW photo): over-constrained abspos drops `right`/
           `bottom` and anchors the old photo to the left/top edge, teleporting
           it ~20px sideways at transition start (wide→narrow, i.e. next-arrow
           only). translate(-50%,-50%) centres regardless of overflow. */
        ::view-transition-old(lightbox-photo),
        ::view-transition-new(lightbox-photo) {
            animation-duration: 0.24s;
            /* Hold the fade's end value until teardown — the default reverts a
               finished animation to its specified opacity (1), flashing the old
               photo if ANY other transition animation is still running. */
            animation-fill-mode: both;
            inline-size: auto;
            block-size: auto;
            inset: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        @media (prefers-reduced-motion: reduce) {
            ::view-transition-group(*),
            ::view-transition-old(*),
            ::view-transition-new(*) { animation-duration: 0s !important; }
        }
        .lightbox-nav {
            position: fixed;
            background: none;
            border: none;
            color: var(--color-bg);
            padding: 0;
            cursor: pointer;
            z-index: 2;
        }
        .lightbox-nav .nav-chevron {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0.5;
            transition: opacity 0.2s ease, transform 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .lightbox-prev .nav-chevron { left: 24px; }
        .lightbox-next .nav-chevron { right: 24px; }
        .lightbox-nav:hover .nav-chevron {
            opacity: 1;
            transform: translateY(-50%) scale(1.05);
        }
        .lightbox-nav svg { width: 44px; height: 93px; }

        .lightbox-bottom {
            padding: 14px 28px 20px;
            color: var(--color-text-disabled);
        }
        .lightbox-thumbs {
            display: flex;
            gap: 6px;
            justify-content: center;
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: thin;
        }
        .lightbox-thumbs::-webkit-scrollbar { height: 4px; }
        .lightbox-thumbs::-webkit-scrollbar-thumb { background: var(--color-text-secondary); }

        .lightbox-thumb {
            width: 88px;
            height: 60px;
            background: var(--color-surface-dark);
            flex-shrink: 0;
            cursor: pointer;
            opacity: 0.45;
            border: 2px solid transparent;
            padding: 0;
            overflow: hidden;
            transition: opacity 0.2s ease, border-color 0.2s ease;
        }
        .lightbox-thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            pointer-events: none;
        }
        .lightbox-thumb:hover { opacity: 0.85; }
        .lightbox-thumb.active {
            opacity: 1;
            border-color: var(--color-divider);
        }

        /* ─── Mobile lightbox overrides (placed AFTER all base lightbox rules
           so media-query rules win on viewport ≤743). ─── */
        @media (max-width: 743px) {
            .lightbox-top { padding: 16px 16px 0; }
            .lightbox-title { font-size: 17px; }
            .lightbox-credit { font-size: 13px; }
            .lightbox-counter { font-size: 12px; margin-top: 4px; }
            .lightbox-close { padding: 10px; margin: -10px; }
            .lightbox-close svg { width: 60px; height: 60px; stroke-width: 0.9; }
            .lightbox-main { padding: 0; }   /* landscape photos → full-bleed edges */
            /* No .lightbox-image caps needed here: with padding 0 the wrap's
               width:min(100%, 60vh*ar) already resolves to 100vw for landscape
               and caps portrait at 60vh — same result the old max-* pair gave. */
            /* Prev/Next chevrons flush to viewport edges, thinner stroke */
            .lightbox-prev .nav-chevron { left: 0; }
            .lightbox-next .nav-chevron { right: 0; }
            .lightbox-nav svg { stroke-width: 2; }

            /* Thumb strip: active thumb stays centered, others scroll past.
               Side padding = (viewport - thumb_width) / 2 so first/last can also reach center.
               Thumb width = 88px → padding 50vw - 44px on each side. */
            .lightbox-bottom { padding: 14px 0 20px; }
            .lightbox-thumbs {
                justify-content: flex-start;
                padding-inline: calc(50vw - 44px);
                scroll-snap-type: x mandatory;
                scroll-padding-inline: calc(50vw - 44px);
            }
            .lightbox-thumb { scroll-snap-align: center; }
        }

        .similar-places h2 {
            font-size: 22px;
            font-weight: 500;
            color: var(--color-text);
            margin: 0 0 24px;
            letter-spacing: -0.01em;
        }

        /* Carousel section heading: title left, arrow buttons right */
        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 6px;
        }
        .section-head h2 { margin: 0; }
        .carousel-arrows {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }
        /* Affiliate section head: title + intro on the left, arrows centered on the right */
        .section-head--affiliate {
            align-items: center;
            margin-bottom: 20px;
        }
        .section-head-text {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .section-head-text .affiliate-intro {
            margin: 0;
        }
        /* Disclosure as the section subtitle (under the h2, one per affiliate
           section) — zero out the bottom-position 18px top margin. */
        .section-head-text .affiliate-disclosure {
            margin: 0;
        }
        .carousel-arrow {
            width: 36px;
            height: 36px;
            border: 1px solid var(--color-border);
            border-radius: 50%;
            background: var(--color-bg);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--color-text-secondary);
            transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
        }
        .carousel-arrow:hover:not(:disabled) {
            border-color: color-mix(in srgb, var(--color-border), #000 20%);
            color: var(--color-text);
            transform: scale(1.05);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }
        .carousel-arrow:disabled {
            opacity: 0.35;
            cursor: default;
            transform: none;
            box-shadow: none;
            border-color: var(--color-border);
        }
        .carousel-arrow svg {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        @media (max-width: 743px) {
            /* Hide arrows on mobile (swipe is natural) */
            .carousel-arrows { display: none; }
        }

        /* Similar-place cards now use the shared .place-card template from
           /partials/place-card.css. We only keep carousel-specific styling
           here (horizontal scroll + fixed card width + snap). */
        .similar-grid {
            display: flex;
            gap: 18px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            /* Same edge treatment as .affiliate-list: bleeds to BOTH viewport edges
               (scroll-padding parks first/last cards at the content column). */
            padding: 12px calc(50vw - 50%) 24px calc(50vw - 50%);
            margin: -12px calc(50% - 50vw) -24px calc(50% - 50vw);
            /* scroll-padding = the gutter from viewport edge to the content column, so
               the first/last card snap-park there (not flush to the screen edge). MUST
               be px, not the `%` used above: browsers resolve `%` scroll-padding against
               the scroll container's own (bled, full-width) box, so snap ignores it and
               the first card jams left. Gutter = max(.main-content padding 40px,
               50vw − half its 1280px max-width). Keep in sync with .main-content. */
            scroll-padding: 0 max(40px, calc(50vw - 600px));
            /* Beyond the 1280px wrapper (wide screens) HARD-clip the bled cards at the
               wrapper edge, so the row doesn't run endlessly to the screen edge — a
               peek card cuts cleanly there (Airbnb-style). No fade: a gradient fade to
               the page's white bg reads as a cheap overlay on a light UI. The clip inset
               = the gutter OUTSIDE the wrapper, so at ≤1280 it's max(0, negative)=0 → no
               clip = natural edge-to-edge bleed. 640 = 1280/2. */
            -webkit-clip-path: inset(0 max(0px, calc(50vw - 640px)));
            clip-path: inset(0 max(0px, calc(50vw - 640px)));
            -webkit-overflow-scrolling: touch;
        }
        .similar-grid::-webkit-scrollbar { display: none; }
        .similar-grid > .place-card {
            flex: 0 0 240px;
            scroll-snap-align: start;
        }

        /* ─────────────────────────────────────────────
           Mobile (≤ 760px) — Airbnb-style single column
           ───────────────────────────────────────────── */
        @media (max-width: 743px) {
            /* Layout: trim side padding, stack to single column */
            .main-content { padding: 12px 16px 24px; }
            .main-content.detail-main { padding-bottom: 24px; }
            .detail-body {
                grid-template-columns: 1fr;
                gap: 0;
            }
            /* On mobile, the aside becomes a slide-up bottom sheet — hidden by default */
            .detail-right {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                top: auto;
                z-index: var(--z-overlay-sheet);
                background: var(--color-bg);
                border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
                padding: 14px 16px calc(24px + env(safe-area-inset-bottom));
                max-height: 88vh;
                overflow-y: auto;
                margin: 0;
                transform: translateY(100%);
                transition: transform 0.35s ease;
                -webkit-overflow-scrolling: touch;
            }
            .detail-right.is-open {
                transform: translateY(0);
            }

            .bottom-sheet-handle {
                display: block;
                width: 42px;
                height: 4px;
                background: var(--color-divider);
                border-radius: 2px;
                margin: 0 auto 14px;
                /* Shift up so the handle's top edge aligns with the close button's
                   top edge (close is absolute at top:16, sheet padding-top is 22 → -6) */
                transform: translateY(-6px);
                /* Reserve the gesture for our JS so the browser doesn't pan/scroll
                   when the user starts a drag on the handle */
                touch-action: none;
                cursor: grab;
            }
            .bottom-sheet-handle:active { cursor: grabbing; }
            /* Visuals via shared .close-btn .close-btn--corner
               (header.css); only the responsive show/hide lives here. */
            .bottom-sheet-close { display: flex; }

            /* Backdrop */
            .bottom-sheet-backdrop {
                display: block;
                position: fixed;
                inset: 0;
                background: var(--backdrop-color);
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
                z-index: var(--z-overlay-backdrop);
            }
            .bottom-sheet-backdrop.is-open {
                opacity: 1;
                visibility: visible;
            }

            /* Floating, centered pill CTA — opens the sheet (matches viewport 2).
               iPhone uses a tighter 12px bottom (home indicator is outside the
               web content here, so no overlap); viewport 2 keeps 20px. */
            .mobile-cta-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                position: fixed;
                /* Anchor via dvh/vw, not the fixed ICB. While the mobile header
                   overlay is open, the preview/emulator hands position:fixed a
                   wrong viewport size (inner W/H jump to the host window),
                   pushing a bottom-anchored CTA off-screen. dvh/vw resolve to
                   the real visible viewport, so the CTA stays put. Harmless on
                   real devices (dvh==vh, 50vw==50% with no overlay scrollbar). */
                left: 50vw;
                right: auto;
                bottom: auto;
                top: calc(100dvh - 12px);
                transform: translate(-50%, -100%);
                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;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
                font-family: inherit;
                font-size: 15px;
                font-weight: 500;
                color: var(--color-bg);
                cursor: pointer;
            }
            .mobile-cta-bar > span {
                flex: 1;
                background: var(--color-brand);
                padding: 12px 18px;
                border-radius: 999px;
                text-align: center;
            }
            .mobile-cta-bar svg {
                width: 20px;
                height: 20px;
                color: var(--color-brand);
                flex-shrink: 0;
                margin-right: 8px;
            }
            /* Hide the CTA bar while the sheet is open (replaced by sheet itself) */
            body.sheet-open .mobile-cta-bar { display: none; }
            /* The viewport scroller is <html>, not <body>, so lock both — locking
               only body lets the background keep scrolling behind the sheet. */
            /* Scroll lock moved to JS (KTG.lockBodyScroll fixed-body) —
               overflow:hidden on <html> breaks the sticky header. */

            /* CTA bar is position:fixed so it doesn't need extra document space —
               inherits default 24px padding-bottom from line above */

            .detail-left { order: 1; }

            /* Header row: smaller title; on mobile the actions move below subhead */
            .detail-header { gap: 10px; }
            .detail-top {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "title"
                    "subhead"
                    "actions";
                row-gap: 10px;
                margin-bottom: 18px;
            }
            .detail-top .detail-actions {
                align-self: start;
                justify-self: start;
                margin-top: 4px;
                align-items: stretch;
            }
            .detail-top .detail-subhead { margin: 0; }
            .detail-title { font-size: 26px; letter-spacing: -0.005em; }
            .detail-actions { gap: 8px; }
            /* Match Save button to vote-pill height (= 34px vote-btn + 2px borders = 36px) */
            .detail-action--save {
                height: 36px;
                font-size: 14px;
                padding: 0 14px;
            }
            .detail-action--save span {
                width: 38px;
                font-size: 14px;
            }
            .detail-action svg { width: 18px; height: 18px; }

            /* Vote pill: shrink button cells */
            .vote-btn { width: 34px; height: 34px; }
            .vote-btn svg { width: 18px; height: 18px; }
            .vote-score {
                font-size: 14px;
                min-width: 32px;
                padding: 0 2px;
            }

            /* Subhead — keep on one row, smaller */
            .detail-subhead { gap: 14px; font-size: 13px; }
            .place-rating .label { font-size: 13px; }
            .place-rating .dots span { width: 6px; height: 6px; }

            /* Breadcrumb tighter */
            .breadcrumb { font-size: 14px; gap: 6px; }

            /* Sections: less vertical breathing room */
            .detail-section { padding: 28px 0; }
            .detail-section h2 { font-size: 19px; }

            /* What to know: 1 column */
            .info-list {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            /* Where it is */
            .info-row { font-size: 16px; gap: 10px; }
            .map-placeholder { height: 240px; }

            /* Map link / Social pills wrap nicely */
            .map-links, .social-list { gap: 8px; }

            /* Description */
            .description-collapse { max-height: 220px; }
            .description-fade { height: 80px; }

            /* Sheet-internal spacing — subtitles act as primary headings here too
               (the bottom CTA bar "Plan your visit" already provides context, so the
               main title inside the sheet is redundant) */
            .sidebar-card { padding: 0; box-shadow: none; border: none; }
            /* Mobile sheet keeps main title hidden, subtitles inherit desktop 18px */

            /* Inside the sheet, swap inline ad slot in body; hide sidebar version */
            .ad-slot--sidebar { display: none; }
            .ad-slot--inline {
                display: flex;
                margin: 8px 0 24px;
            }

            /* Affiliate cards: horizontal scroll instead of stacked */
            .affiliate-list {
                display: flex;
                overflow-x: auto;
                gap: 12px;
                scroll-snap-type: x mandatory;
                scroll-padding-left: 28px;
                margin: 0 -16px;
                padding: 4px 16px 8px 28px;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }
            .affiliate-list::-webkit-scrollbar { display: none; }
            .affiliate-card {
                flex: 0 0 78%;
                scroll-snap-align: start;
            }

            /* Similar places: horizontal scroll instead of grid */
            .similar-grid {
                display: flex;
                overflow-x: auto;
                gap: 12px;
                scroll-snap-type: x mandatory;
                scroll-padding-left: 28px;
                margin: 0 -16px;
                padding: 4px 16px 8px 28px;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }
            .similar-grid::-webkit-scrollbar { display: none; }

            /* Page meta already 1 col below 760 */
        }

        /* Extra tight (≤ 420px) — title even smaller, vote/save tighter */
        @media (max-width: 420px) {
            .detail-title { font-size: 22px; }
            .detail-actions { gap: 6px; }
            .detail-action--save { padding: 5px 10px; }
            .vote-btn { width: 32px; height: 32px; }
            .breadcrumb { font-size: 13px; }
        }

        /* ─────────────────────────────────────────────
           Viewport 2 (744–949) — desktop look, but the
           sidebar becomes a slide-up sheet like mobile.
           ───────────────────────────────────────────── */
        @media (min-width: 744px) and (max-width: 949px) {
            /* Single column body since the sidebar is no longer inline */
            .detail-body {
                grid-template-columns: 1fr;
                gap: 0;
            }
            .detail-left { order: 1; }

            /* Sidebar becomes a centered floating sheet (not edge-to-edge) */
            .detail-right {
                order: 2;
                position: fixed;
                left: 50%;
                right: auto;
                bottom: 20px;
                top: auto;
                z-index: var(--z-overlay-sheet);
                width: min(560px, 92vw);
                max-height: min(80vh, 720px);
                background: var(--color-bg);
                border: 1px solid var(--color-divider);
                border-radius: var(--radius-2xl);
                padding: 22px 24px 28px;
                overflow-y: auto;
                margin: 0;
                transform: translate(-50%, calc(100% + 40px));
                transition: transform 0.35s ease;
                -webkit-overflow-scrolling: touch;
            }
            .detail-right.is-open {
                transform: translate(-50%, 0);
                box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
            }

            /* Handle + close ride in a sticky header so they stay pinned to the
               sheet's top edge while the body scrolls underneath. Negative
               margins span the sheet's padding; the opaque bg hides scrolling
               content; it is the positioning context for the absolute close. */
            .bottom-sheet-head {
                display: block;
                position: sticky;
                /* Sticky pins to the scroll container's CONTENT-box top, which is
                   below the sheet's 22px padding. Offset by -22 so the header pins
                   flush to the sheet's visible top edge (matches the -22 margin). */
                top: -22px;
                z-index: 3;
                background: var(--color-bg);
                margin: -22px -24px 0;
                padding: 22px 24px 14px;
                border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
            }
            /* The wide sheet would stretch the square day-cells huge (≈78px).
               Cap the calendar to match the inline sidebar size at 뷰포트4+
               (~400px, ~55px cells); the sheet scrolls to fit the rest. */
            .sidebar-calendar { max-width: 400px; margin: 12px auto 14px; }
            .bottom-sheet-handle {
                display: block;
                width: 42px;
                height: 4px;
                background: var(--color-divider);
                border-radius: 2px;
                margin: 0 auto;
                /* Shift up so the handle's top edge aligns with the close button's
                   top edge (close is absolute at top:16, sheet padding-top is 22 → -6) */
                transform: translateY(-6px);
                /* Reserve the gesture for our JS so the browser doesn't pan/scroll
                   when the user starts a drag on the handle */
                touch-action: none;
                cursor: grab;
            }
            .bottom-sheet-handle:active { cursor: grabbing; }
            /* Visuals via shared .close-btn .close-btn--corner
               (header.css); only the responsive show/hide lives here. */
            .bottom-sheet-close { display: flex; }

            .bottom-sheet-backdrop {
                display: block;
                position: fixed;
                inset: 0;
                background: var(--backdrop-color);
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
                z-index: var(--z-overlay-backdrop);
            }
            .bottom-sheet-backdrop.is-open {
                opacity: 1;
                visibility: visible;
            }

            /* Floating, centered CTA bar — pill style, not edge-to-edge */
            .mobile-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;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
                font-family: inherit;
                font-size: 15px;
                font-weight: 500;
                color: var(--color-bg);
                cursor: pointer;
            }
            .mobile-cta-bar > span {
                flex: 1;
                background: var(--color-brand);
                padding: 12px 18px;
                border-radius: 999px;
                text-align: center;
            }
            .mobile-cta-bar svg {
                width: 20px;
                height: 20px;
                color: var(--color-brand);
                flex-shrink: 0;
                margin-right: 8px;
            }
            body.sheet-open .mobile-cta-bar { display: none; }
            /* The viewport scroller is <html>, not <body>, so lock both — locking
               only body lets the background keep scrolling behind the sheet. */
            /* Scroll lock moved to JS (KTG.lockBodyScroll fixed-body) —
               overflow:hidden on <html> breaks the sticky header. */

            /* CTA bar is position:fixed; default detail-main padding-bottom (28px)
               keeps page-meta close to footer */

            /* Sheet card looks like inline content (no border/shadow) */
            .sidebar-card { padding: 0; box-shadow: none; border: none; }

            /* Swap ad position: sidebar ad hidden (since sidebar is sheet),
               inline ad shows in body flow */
            .ad-slot--sidebar { display: none; }
            .ad-slot--inline {
                display: flex;
                margin: 8px 0 24px;
            }
        }


/* ─────────────────────────────────────────────
   Type-specific sections (dermatology, event)
   ───────────────────────────────────────────── */

/* Section intro paragraph — used under h2 to give context before a list/grid */
.section-intro {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: -4px 0 18px;
    line-height: 1.55;
    max-width: 640px;
}


/* ── Doctors list (dermatology) ─────────────────────────────────── */
.doctor-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.doctor-card {
    padding: 18px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.doctor-card-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 18px;
    user-select: none;
}
.doctor-card-summary::-webkit-details-marker { display: none; }
.doctor-photo {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-divider) 0%, var(--color-surface) 100%);
}
.doctor-body { flex: 1; min-width: 0; }
.doctor-name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}
.doctor-title {
    font-weight: 400;
    font-size: 13px;
    color: var(--color-text-faint);
    margin-left: 6px;
}
.doctor-specialty {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-secondary);
}
.doctor-card-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-text-faint);
    transition: transform 0.2s ease;
}
.doctor-card[open] .doctor-card-chevron {
    transform: rotate(180deg);
    color: var(--color-text);
}
.doctor-card[open] > .doctor-card-summary {
    margin-bottom: 4px;
}
.doctor-creds {
    margin: 0;
    padding: 0 0 0 78px; /* 60 photo + 18 gap = align with body */
    list-style: none;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
}
.doctor-creds li::before {
    content: "·";
    margin-right: 6px;
    color: var(--color-text-disabled);
}
@media (max-width: 743px) {
    .doctor-card { padding: 16px; }
    .doctor-card-summary { gap: 12px; }
    .doctor-creds { padding-left: 72px; } /* 60 + 12 */
}

/* ── Month-period chips above Hours table (travel pages) ── */
.hours-period-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Gestalt: chip belongs to the table below it — gap to table (6px) < gap from heading.
       margin-top 16 collapses with the h2's 12 → 16px above, so the split reads 16 / 6. */
    margin: 16px 0 6px;
    padding: 2px 0;
    touch-action: pan-x;
}
.hours-period-chips::-webkit-scrollbar { display: none; }
.hours-chip {
    flex: none;
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Tab-switch, not navigation → hover darkens border to black (matches map filter-chip
   / header fchip), NOT the scale+shadow treatment used for links. */
.hours-chip:hover { border-color: var(--color-text); color: var(--color-text); }
.hours-chip.is-active {
    background: var(--color-surface-dark);
    color: var(--color-bg);
    border-color: var(--color-text);
}
/* Sole group chip (single-group Admission) — shown for context, not a switch */
.hours-chip--static { cursor: default; }

/* ── Feature / Amenity chips (static, no icon) ── */
.detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.detail-chip {
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* ── Hours table (dermatology) ── */
.hours-table {
    margin-bottom: 12px;
}
.hours-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 12px 0;
    align-items: baseline;
}
.hours-day {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}
.hours-time {
    font-size: 14px;
    color: var(--color-text-secondary);
}
.hours-time.hours-closed {
    color: var(--color-text-faint);
}
@media (max-width: 743px) {
    .hours-row { grid-template-columns: 110px 1fr; }
}

/* ── Event-specific (dates, schedule) — placeholders for event page ── */
.event-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 32px;
    margin: 0 0 18px;
}
.event-date-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.event-date-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-faint);
}
.event-date-value {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.event-schedule-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    padding: 14px 0;
}
.event-schedule-time {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}
.event-schedule-program {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.55;
}
.event-schedule-program strong {
    display: block;
    color: var(--color-text);
    margin-bottom: 2px;
}
@media (max-width: 743px) {
    .event-schedule-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ─────────────────────────────────────────────
   Guru Report bottom sheet (common to all detail pages)
   ───────────────────────────────────────────── */
.guru-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-sheet);
    visibility: hidden;
    pointer-events: none;
    /* Delay visibility:hidden until the panel finishes sliding out */
    transition: visibility 0s linear var(--modal-slide-duration);
}
.guru-sheet.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}
.guru-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: var(--backdrop-color);
    opacity: 0;
    transition: opacity var(--backdrop-duration) ease;
}
.guru-sheet.is-open .guru-sheet-backdrop { opacity: 1; }

.guru-sheet-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateY(100vh);
    width: calc(100% - 48px);
    max-width: 720px;
    height: auto;
    max-height: 86vh;
    background: var(--color-bg);
    border-radius: var(--radius-2xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transition: transform var(--modal-slide-duration) var(--modal-ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.guru-sheet.is-open .guru-sheet-panel {
    transform: translate(-50%, -50%);
}
.guru-sheet-handle {
    flex: none;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-divider);
    margin: 12px auto 0;
}
/* Handle = swipe 어포던스. guru 데스크톱(≥744)은 카드+다크마스트헤드+핀 레이아웃이라
   불필요 — vp2(744~949)에서 뜨면 다크 상단 위에 흰 띠가 생겨 vp3+와 어긋난다. 그래서
   ≥744에서 숨김(모바일 ≤743도 CTA 모프라 숨김 → 사실상 항상 미표시). */
@media (min-width: 744px) {
    .guru-sheet-handle { display: none; }
}
/* Close button → shared .close-btn .close-btn--corner (see header.css). */
.guru-sheet-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 0;
}
/* X 닫기 = 다크 헤더 위 반투명 흰 원(모바일 시트와 통일). blur로 프로스트 처리 —
   타이틀이 회피 없이 자연스럽게 X 밑을 지나가도 텍스트가 뭉개져 X 아이콘 가독 유지 */
.guru-sheet-close {
    z-index: 6;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.guru-sheet-close:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }

/* ── Guru report: 다크 마스트헤드 + iOS 라지타이틀 핀 (전 뷰포트) ─────────
   The eyebrow+title+byline sit on a solid #333 header, branded to match the
   mobile sheet (a translucent glass drifted too light off #333 — dropped
   2026-07-08). Topgap + masthead are both #333 so the whole modal top reads as
   one black band. 마스트헤드는 static — 스크롤하면 통째로 밀려나가고, 제목이
   top을 지나는 순간 아래 .guru-title-pin(제목+X 다크 띠)이 나타난다 (2026-07-08,
   기존 vp1 패턴을 vp2+에도 통일). Mobile (≤743) keeps its own full-height #333
   sheet. Spec: docs/modal.md "Guru report scroll". */
.guru-report-topgap { height: 24px; background: var(--color-guru-report); }
.guru-report-masthead {
    position: static;   /* 스크롤아웃 → 상단 핀 등장 (iOS 라지타이틀, 전 뷰포트 공통) */
    z-index: 2;
    padding: 16px 40px 14px;
    margin-top: -1px;   /* topgap과 맞닿는 서브픽셀 흰 이음새(뒤 흰 패널 비침) 덮기 */
    background: var(--color-guru-report);
}
.guru-report-brandrow { display: none; }   /* mobile-only brand row (vp1 full-height sheet) */
/* 고정 타이틀 핀 (iOS 라지타이틀) — 마스트헤드가 스크롤아웃되면 상단에 제목+X 다크
   띠로 고정. 패널(absolute·overflow:hidden·radius)에 부착, JS가 생성/토글. vp1은 값만 override. */
.guru-title-pin {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 4;              /* 스크롤 콘텐츠 위, X(z6) 아래 */
    height: 56px;            /* 바 중심(28) = X 중심(10+18) */
    display: flex;
    align-items: center;
    padding: 0 56px 0 40px;  /* 좌 40 = 마스트헤드 인셋, 우 56 = X 회피 */
    background: var(--color-guru-report);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.guru-title-pin.is-on { opacity: 1; transform: translateY(0); }
.guru-report-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52px;
    background: linear-gradient(to top, var(--color-bg) 6px, transparent);
    pointer-events: none;
    z-index: 3;
}

/* Body column — centred 640 reading measure, aligned with the masthead inset */
.guru-report {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 0 44px;
}
.guru-report-eyebrow {
    text-transform: lowercase;   /* 사이트와이드 'guru report' 소문자 브랜딩 */
    letter-spacing: 0.02em;
    font-size: 16px;             /* 소문자는 x-height가 낮아 대문자 11px보다 작아 보여 키움 */
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px;
}
.guru-report-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 14px;
    color: #fff;
    letter-spacing: -0.01em;
}
.guru-report-byline {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.66);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.guru-report-byline .guru-report-byline-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}
/* 본문 끝 메타 푸터 — "Last updated <date>" (헤더 byline에서 본문 하단으로 내림).
   .prose 안에 들어가되 div라 prose의 p/h 규칙과 안 부딪힘. */
.guru-report-updated {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--color-divider);
    font-size: 13px;
    color: var(--color-text-faint);
}
/* Guru 본문 타이포는 공유 `.prose`로 이관 (마크업 `.guru-report-body prose`).
   스펙 SSOT = partials/header.css `.prose.prose` + docs/prose.md. `.guru-report-body`
   클래스는 시맨틱 훅으로만 남고 시각 CSS 없음. */

/* Paywall (dermatology only) */
.guru-report-paywall-preview {
    position: relative;
    max-height: 240px;
    overflow: hidden;
    margin-bottom: 24px;
}
.guru-report-paywall-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 55%, var(--color-bg) 100%);
    pointer-events: none;
}
.guru-report-paywall-preview p:last-child { margin-bottom: 0; }
.guru-report-paywall-card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    padding: 32px 28px;
    text-align: center;
}
.guru-report-paywall-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-guru-report);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.guru-report-paywall-icon svg { width: 22px; height: 22px; }
.guru-report-paywall-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 8px;
}
.guru-report-paywall-card > p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0 0 20px;
}
.guru-report-paywall-features {
    list-style: none;
    padding: 0;
    margin: 0 auto 24px;
    text-align: left;
    display: inline-block;
}
.guru-report-paywall-features li {
    font-size: 13px;
    color: var(--color-text);
    padding: 5px 0 5px 24px;
    position: relative;
    line-height: 1.5;
}
.guru-report-paywall-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 14px;
    height: 14px;
    background: var(--color-brand);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}
.guru-report-paywall-cta {
    width: 100%;
    padding: 14px;
    background: var(--color-guru-report);
    color: var(--color-bg);
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.guru-report-paywall-cta:hover {
    filter: brightness(1.15);
    transform: scale(1.01);
    box-shadow: 0 2px 4px rgba(51, 51, 51, 0.25);
}
.guru-report-paywall-cta:active {
    transform: scale(0.99);
    box-shadow: 0 1px 2px rgba(51, 51, 51, 0.2);
}
.guru-report-paywall-sub {
    font-size: 12px;
    color: var(--color-text-faint);
    margin: 12px 0 0;
}

@media (max-width: 743px) {
    /* vp1: full-height edge-to-edge sheet, dark masthead (#333) — the guru CTA
       button "lifts" into the brand row (KTG.guruLiftOpen). v1 — expect tuning. */
    .guru-sheet-panel {
        left: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        background: var(--color-guru-report);
        /* 그림자 제거 — 60px 블러가 경계 위로 번져 라이드업 중인 바텀시트 하단을
           어둡게 만들어 "한 장의 연속면" 컨셉을 깬다 (풀스크린이라 불필요) */
        box-shadow: none;
        transform: translateY(100%);
        transition: transform 0.84s var(--modal-ease);   /* 리프트 비행과 동기 */
    }
    /* 닫힘 시 visibility 홀드를 vp1 하강 시간(.42s)과 동기 — 기본 토큰(.36s)이면
       패널이 아직 내려가는 중에 시트가 hidden 되어 본문이 중간에 사라진다 */
    .guru-sheet { transition: visibility 0s linear 0.84s; }
    .guru-sheet.is-open { transition: visibility 0s linear 0s; }
    /* TEMP dev — guru 슬로우 모드(데모 토글): 패널·홀드·백드롭 10x */
    body.guru-slow .guru-sheet-panel {
        transition-duration: 8.4s;
    }
    body.guru-slow .guru-sheet { transition: visibility 0s linear 8.4s; }
    body.guru-slow .guru-sheet.is-open { transition: visibility 0s linear 0s; }
    body.guru-slow .guru-sheet-backdrop { transition-duration: 3s; }
    .guru-sheet.is-open .guru-sheet-panel { transform: translateY(0); }
    /* 풀스크린 패널이라 백드롭 불필요 — 있으면 라이드업 중인 Plan 시트 위로
       페이드인되어 시트가 어두워져(=페이드아웃처럼) 보인다 */
    .guru-sheet-backdrop { display: none; }
    /* 핸들 제거 — 진입이 버튼 확장 모프라 시트-드래그 어포던스가 개념과 어긋남
       (닫기는 X·역모프). 규칙: 핸들은 swipe-dismiss가 배선된 곳에만 (docs/modal.md #6) */
    .guru-sheet-handle { display: none; }
    .guru-sheet-scroll { padding: 0; display: flex; flex-direction: column; }
    .guru-report-topgap { height: 0; }
    .guru-report-masthead {
        position: static;   /* 스크롤 시 헤더(브랜드행+제목+바이라인) 전체가 밀려나감 */
        flex: none;
        padding: 0 16px 16px;
        margin-top: 0;      /* 데스크톱 이음새 보정(-1px) 리셋 */
        background: var(--color-guru-report);
        box-shadow: none;
    }
    /* vp1 핀 = 베이스 정의 + 모바일 값만 override (좌 인셋 16, 제목 24px).
       진짜 제목이 top을 지나면 나타나는 별도 오버레이 — 리프트 지오메트리와 분리. */
    .guru-title-pin { padding-left: 16px; font-size: 24px; }
    .guru-report-brandrow {
        display: flex;
        align-items: center;
        justify-content: center;   /* 'guru report'는 버튼과 동일하게 중앙 유지 */
        gap: 6px;
        height: 56px;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
    }
    .guru-report-brandrow .guru-report-logo { display: block; width: 24px; height: 24px; }
    .guru-report-eyebrow { display: none; }   /* 브랜드행과 중복 */
    .guru-report-title { font-size: 24px; color: #fff; margin: 2px 0 8px; }
    .guru-report-byline { color: rgba(255, 255, 255, 0.66); margin: 0; }
    .guru-report-byline .guru-report-byline-sep { background: rgba(255, 255, 255, 0.4); }
    .guru-report {
        flex: 1;
        max-width: none;
        margin: 0;
        background: var(--color-bg);
        padding: 20px 16px 32px;
    }
    .guru-report-fade { display: none; }
    /* guru 본문 모바일 타이포도 `.prose` 모바일 오버라이드가 담당 (이관됨) */
    .guru-report-paywall-card { padding: 24px 20px; }
}

/* ─────────────────────────────────────────────
   Procedures — Lv1 category grid (4×2)
   ───────────────────────────────────────────── */
.procedure-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 4px;
}
.procedure-category-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 18px 20px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.procedure-category-btn:hover {
    border-color: color-mix(in srgb, var(--color-border), #000 20%);
    transform: scale(1.01);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.procedure-category-btn:active {
    transform: scale(0.99);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.procedure-category-label {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}
.procedure-category-price {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.3;
}
@media (max-width: 743px) {
    .procedure-categories {
        gap: 8px;
    }
    .procedure-category-btn {
        padding: 14px 14px;
        border-radius: var(--radius-sm);
    }
    .procedure-category-label { font-size: 14px; }
    .procedure-category-price { font-size: 12px; }
}

/* ─────────────────────────────────────────────
   Lv2 Procedure sheet — centered slide-up modal,
   same UX pattern as Guru Report sheet
   ───────────────────────────────────────────── */
.procedure-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-sheet);
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear var(--modal-slide-duration);
}
.procedure-sheet.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}
.procedure-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: var(--backdrop-color);
    opacity: 0;
    transition: opacity var(--backdrop-duration) ease;
}
.procedure-sheet.is-open .procedure-sheet-backdrop { opacity: 1; }

.procedure-sheet-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateY(100vh);
    width: calc(100% - 48px);
    max-width: 720px;
    height: 80vh;
    max-height: 80vh;
    background: var(--color-bg);
    border-radius: var(--radius-2xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transition: transform var(--modal-slide-duration) var(--modal-ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.procedure-sheet.is-open .procedure-sheet-panel {
    transform: translate(-50%, -50%);
}
.procedure-sheet-handle {
    flex: none;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-divider);
    margin: 12px auto 0;
}
/* Handle = swipe-down affordance (touch only) — decorative on desktop, hide */
@media (min-width: 950px) {
    .procedure-sheet-handle { display: none; }
}
/* Visuals → shared .close-btn .close-btn--corner (header.css). Local rule =
   stacking only (sits above the sticky tab header inside the panel). */
.procedure-sheet-close { z-index: 10; }
.procedure-sheet-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 40px 40px;
    -webkit-overflow-scrolling: touch;
}

/* Sheet title (sits above sticky tabs, scrolls away on long content) */
.procedure-sheet-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 16px;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

/* Sticky header inside the sheet — holds title + tabs + chips */
.procedure-sheet-sticky {
    position: sticky;
    top: 0;
    background: var(--color-bg);
    z-index: 5;
    margin: 0 -40px;
    padding: 28px 40px 0;
}

/* Tabs (mirrors map view .type-tabs / .type-tab pattern) */
.procedure-tabs {
    /* Baseline as an inset shadow, NOT border-bottom: this is a horizontally
       scrollable bar (overflow-x:auto forces overflow-y to clip), so a child
       tab's negative-margin underline would be clipped and couldn't paint over
       a real border. An inset shadow is a background-layer line the active tab's
       black border paints cleanly on top of. */
    box-shadow: inset 0 -1px 0 var(--color-divider);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
}
.procedure-tabs::-webkit-scrollbar { display: none; }
.procedure-tabs-scroll {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: max-content;
}
.procedure-tab {
    position: relative;
    padding: 12px 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.procedure-tab:hover { color: var(--color-text); }
.procedure-tab.is-active {
    color: var(--color-text);
    font-weight: 600;
    border-bottom-color: var(--color-text);
}

/* Chip filter (mirrors map view .filter-bar / .filter-chip pattern) */
.procedure-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 14px 0 12px;
    touch-action: pan-x;
}
.procedure-chips::-webkit-scrollbar { display: none; }
.procedure-chip {
    flex: none;
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.procedure-chip:hover { border-color: var(--color-text); }
.procedure-chip.is-active {
    background: var(--color-surface-dark);
    color: var(--color-bg);
    border-color: var(--color-text);
}

/* Category intro (description + Learn more link, below sticky header) */
.procedure-category-intro {
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 16px 0 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.procedure-category-title {
    align-self: stretch;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 6px;
}
.procedure-category-desc {
    align-self: stretch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}
.procedure-category-learn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding: 6px 12px 6px 14px;
    border: 1px solid var(--color-text);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text);
    background: transparent;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.procedure-category-learn svg {
    width: 12px;
    height: 12px;
    flex: none;
}
.procedure-category-learn:hover {
    background: var(--color-surface-dark);
    color: var(--color-bg);
}

/* Items list */
.procedure-items-content {
    padding-top: 20px;
}
.procedure-items-group {
    margin-bottom: 40px;
}
.procedure-items-group:last-child { margin-bottom: 0; }
.procedure-items-group-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-divider);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Info icon + tooltip (per sub-category title).
   Wrapper holds the button + tooltip as siblings (button cannot contain a link). */
.procedure-info {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.procedure-info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--color-text-faint);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}
.procedure-info-trigger:hover { color: var(--color-text); }
.procedure-info-icon {
    width: 14px;
    height: 14px;
    display: block;
}
/* Tooltip popover — fixed positioning; left/top are set by JS so it sits
   above the trigger, centered on it, then clamped to the viewport edges.
   The arrow (::before) points back at the trigger via --arrow-x. */
.procedure-info-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    width: max-content;
    max-width: min(300px, calc(100vw - 24px));
    padding: 12px 14px;
    background: var(--color-surface-dark);
    color: var(--color-bg);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96);
    transform-origin: var(--arrow-x, 50%) 100%;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: var(--z-tooltip);
    text-align: left;
}
/* Arrow — points down at the trigger by default; flips up when placed below */
.procedure-info-tooltip::before {
    content: '';
    position: absolute;
    left: var(--arrow-x, 50%);
    top: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text);
}
.procedure-info-tooltip[data-placement="below"] {
    transform-origin: var(--arrow-x, 50%) 0%;
}
.procedure-info-tooltip[data-placement="below"]::before {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--color-text);
}
.procedure-info-tooltip-text {
    margin: 0;
}
.procedure-info-tooltip-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    color: var(--color-brand);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.procedure-info-tooltip-link svg {
    width: 12px;
    height: 12px;
    flex: none;
}
.procedure-info-tooltip-link:hover {
    color: var(--color-brand);
    text-decoration: underline;
}
/* Transparent full-screen catcher so an outside tap closes the tooltip
   (no dim — the tooltip is a light, trigger-anchored popover). */
.procedure-info-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: var(--z-overlay-backdrop);
}
.procedure-info-backdrop.is-open {
    pointer-events: auto;
}
/* Shown on tap/click (.is-open) or hover/focus (handled in JS + below) */
.procedure-info.is-open .procedure-info-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* Keyboard focus reveal (desktop hover is wired in JS via mouseenter so the
   tooltip can be positioned/clamped against the trigger). */
.procedure-info-trigger:focus-visible ~ .procedure-info-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
.procedure-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.procedure-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
}
.procedure-item-name {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.4;
}
.procedure-item-price {
    font-size: 13px;
    color: var(--color-text-faint);
    white-space: nowrap;
}

@media (max-width: 743px) {
    .procedure-sheet-panel {
        width: calc(100% - 32px);
        height: 84vh;
        max-height: 84vh;
    }
    .procedure-sheet-scroll {
        padding: 0 16px 24px;
    }
    .procedure-sheet-title { font-size: 20px; margin-bottom: 12px; }
    .procedure-sheet-sticky {
        margin: 0 -20px;
        padding: 24px 20px 0;
    }
    .procedure-tabs-scroll { gap: 18px; }
    .procedure-tab { font-size: 13px; padding: 10px 0; }
    .procedure-chips { padding: 12px 0 10px; }
    .procedure-chip { font-size: 12px; padding: 5px 12px; }
    .procedure-items-content { padding-top: 16px; }
    .procedure-item-name { font-size: 13px; }
    .procedure-category-intro {
        padding: 12px 14px;
        border-radius: var(--radius-sm);
        margin: 12px 0 4px;
    }
    .procedure-category-desc { font-size: 13px; }
    .procedure-category-learn { font-size: 12px; }
}

/* ─────────────────────────────────────────────
   Reddit discussion CTA card — links to r/ search
   ───────────────────────────────────────────── */
.reddit-discussion-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 22px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.reddit-discussion-card:hover {
    border-color: color-mix(in srgb, var(--color-border), #000 20%);
    transform: scale(1.005);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.reddit-discussion-card:active {
    transform: scale(0.998);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.reddit-discussion-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reddit-discussion-icon img {
    width: 48px;
    height: 48px;
    display: block;
}
.reddit-discussion-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.reddit-discussion-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.35;
}
.reddit-discussion-sub {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.reddit-discussion-arrow {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--color-text-faint);
}

@media (max-width: 743px) {
    .reddit-discussion-card {
        gap: 12px;
        padding: 14px 16px;
    }
    .reddit-discussion-icon img {
        width: 40px;
        height: 40px;
    }
    .reddit-discussion-title { font-size: 15px; }
    .reddit-discussion-sub { font-size: 12px; }
}

/* ─────────────────────────────────────────────
   Trust & Transparency section
   Collapsed rows: icon + title + chevron. Click to expand.
   Used on clinic detail pages.
   ───────────────────────────────────────────── */
.trust-intro {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 16px;
}
.trust-rows {
    display: flex;
    flex-direction: column;
}
.trust-row {
    border-top: 1px solid var(--color-divider);
}
.trust-row:first-child { border-top: none; }
.trust-row-summary-btn {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 12px;
    user-select: none;
}
.trust-row-summary-btn::-webkit-details-marker { display: none; }

.trust-row-icon {
    flex: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
}
.trust-row-icon svg { width: 20px; height: 20px; }
.trust-row-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}
.trust-row-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-text-faint);
    transition: transform 0.2s ease;
}
.trust-row[open] .trust-row-chevron {
    transform: rotate(180deg);
    color: var(--color-text);
}

.trust-row-content {
    padding: 0 12px 18px 54px; /* align body with title (icon width 28 + gap 14 + 12 inset) */
}
.trust-row-source {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.trust-row-lead {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0 0 8px;
}
.trust-row-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}
.trust-row-desc a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.trust-row-desc a:hover { color: var(--color-text); }

@media (max-width: 743px) {
    .trust-row-summary-btn { gap: 12px; padding: 14px 10px; }
    .trust-row-icon { width: 24px; height: 24px; }
    .trust-row-icon svg { width: 18px; height: 18px; }
    .trust-row-title { font-size: 14px; }
    .trust-row-content { padding: 0 10px 16px 46px; }
    .trust-row-lead { font-size: 13px; }
    .trust-row-desc { font-size: 13px; }
}


/* (dev-only #claim-toggle widget removed 2026-07-10 — the page's claimed face is
   now driven by real places.claimed_by; see p/destinations-demo render.) */

/* ══════════ Claim modal (rebuilt 2026-07-10 — docs/claim.md "모달 v2") ══════════
   Markup = shared .ktg-modal scaffold (header.css) + these claim-* looks.
   psetup-style header/CTA · glass top bar + bottom-fade scroll (search mega
   recipe) · ⓘ tooltip (add-place .tv-info pattern) · 3-state gate slot. */
.claim-panel {
    width: min(480px, calc(100% - 48px));
    max-height: min(640px, 88vh);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--color-bg);
    border-radius: var(--radius-2xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;              /* clip glass + scroller to the 28px radius */
    /* transform = open/close slide (from --slide) · height = 성공 리빌 morph
       (--ktg-morph from success-reveal.css; JS locks px height then animates) */
    transition: transform var(--modal-slide-duration) var(--modal-ease),
                height var(--ktg-morph);
}
.claim-close { z-index: 3; }       /* above the glass bar (shared .close-btn, 36/10) */

/* Top glass bar — the search-mega recipe: the title row floats on frosted
   glass (white 0.6 + blur 6) and the form scrolls UNDER it. */
.claim-glass[hidden] { display: none; }   /* hidden on the success view */
.claim-glass {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 56px;
    box-sizing: border-box;        /* keep 56 total so padding-bottom positions, not grows */
    z-index: 2;
    display: flex;
    /* Bottom-align the title with the corner X's bottom edge: X spans 10–46,
       so glass bottom inset 10 puts both bottoms at 46 (modal-title convention). */
    align-items: flex-end;
    gap: 8px;
    padding: 0 56px 10px 28px;     /* right inset clears the corner X */
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    backdrop-filter: blur(6px) saturate(160%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.claim-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ⓘ tooltip — add-place .tv-info pattern, opening DOWNWARD (bar is at the top) */
.claim-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: none;
    /* Glass bottom-aligns children to the title's BOX bottom (g's descender end);
       lift the icon to the text BASELINE instead (22px Outfit descender ≈ 6px). */
    margin-bottom: 6px;
    color: var(--color-text-disabled);
    cursor: help;
    outline: none;
}
.claim-info:hover, .claim-info:focus, .claim-info:focus-visible { color: var(--color-text-muted); }
.claim-info svg { width: 17px; height: 17px; display: block; }
.claim-info-bubble {
    position: absolute;
    top: calc(100% + 10px); left: -6px;
    z-index: var(--z-tooltip, 1300);
    width: max-content; max-width: 250px;
    background: var(--color-text); color: #fff;
    font-size: 12px; font-weight: 400; line-height: 1.45;
    padding: 8px 10px;
    border-radius: var(--radius-xs);
    text-align: left;
    opacity: 0; visibility: hidden;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.claim-info-bubble::after {
    content: '';
    position: absolute;
    bottom: 100%; left: 12px;
    border: 5px solid transparent;
    border-bottom-color: var(--color-text);
}
.claim-info:hover .claim-info-bubble, .claim-info:focus .claim-info-bubble { opacity: 1; visibility: visible; }

/* Scroll area — content slides under the glass and fades out at the bottom
   (just above the fixed footer). ⚠️ the mask is safe ONLY because no child
   uses backdrop-filter (the glass bar is a SIBLING overlay) — see docs/modal.md
   guru fade note. */
.claim-scroll {
    flex: 1;
    min-height: 0;
    position: relative;            /* positioning context for the leaving form-view */
    overflow-y: auto;
    padding: 76px 28px 20px;       /* 56 glass + 20 gap; footer holds the submit */
    -webkit-mask-image: linear-gradient(to top, transparent 0, transparent 8px, #000 32px, #000 100%);
    mask-image: linear-gradient(to top, transparent 0, transparent 8px, #000 32px, #000 100%);
    scrollbar-width: none;
}
.claim-scroll::-webkit-scrollbar { display: none; }
/* success view: no glass bar, so drop the 76px offset + the bottom fade mask
   (content is short, centred by .ktg-success padding — 72/72 gaps) */
.claim-modal.is-success .claim-scroll {
    padding-top: 28px;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Fixed footer — the submit bar. 10px side/bottom inset so the button's bottom
   corners are CONCENTRIC with the panel's 28px corners: gap 10 + rect radius 18
   → corner centre (28,28) = panel corner centre. (The X button uses the shared
   36/10 close-btn — also concentric.) Top padding (14) = breathing room. */
.claim-footer {
    flex: none;
    padding: 14px 10px 10px;
    background: var(--color-bg);
}
.claim-footer[hidden] { display: none; }

/* Gate slot — log-in nudge / "Claiming as" account row / pending notice */
.claim-gate { margin: 0 0 18px; }
.claim-gate[hidden] { display: none; }
.claim-gate-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}
.claim-gate-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); }
.claim-login {
    align-self: flex-start;
    padding: 9px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: var(--color-text);
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background 0.15s;
}
.claim-login:hover { background: #000; }

.claim-account { display: flex; align-items: center; gap: 12px; padding: 2px 0; }
.claim-account-avatar {
    width: 40px; height: 40px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-circle, 50%);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
}
.claim-account-meta { display: flex; flex-direction: column; min-width: 0; }
.claim-account-label { font-size: 12px; color: var(--color-text-faint); }
.claim-account-name { font-size: 15px; font-weight: 500; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claim-account-email { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Form */
.claim-form { display: flex; flex-direction: column; gap: 14px; }
.claim-form[hidden] { display: none; }
.claim-form.is-locked { opacity: 0.45; pointer-events: none; }   /* logged-out preview */
.claim-field { display: flex; flex-direction: column; gap: 6px; }
.claim-label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); }
.claim-optional { font-weight: 400; color: var(--color-text-faint); }
.claim-field input[type="text"],
.claim-field textarea {
    font-family: inherit;
    font-size: 16px;               /* ≥16px prevents iOS Safari auto-zoom */
    color: var(--color-text);
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    outline: none;
    background: var(--color-bg);
    transition: border-color 0.15s ease;
}
.claim-field textarea { resize: vertical; }
.claim-field input[type="text"]:hover,
.claim-field textarea:hover { border-color: color-mix(in srgb, var(--color-border), #000 20%); }
.claim-field input[type="text"]:focus,
.claim-field textarea:focus { border-color: var(--color-text); }

.claim-file-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 10px 14px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-surface-alt);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.claim-file-trigger:hover { border-color: color-mix(in srgb, var(--color-border), #000 20%); background: var(--color-surface); }
.claim-file-trigger svg { width: 16px; height: 16px; flex: none; color: var(--color-text-secondary); }
.claim-file-trigger input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.claim-file-name {
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.claim-file-name[hidden] { display: none; }
.claim-file-name svg { width: 15px; height: 15px; flex: none; color: var(--color-success); }
.claim-file-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.claim-error { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-danger); }
.claim-error[hidden] { display: none; }
.claim-privacy { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-text-faint); }
.claim-privacy a { color: inherit; text-decoration: underline; }
.claim-privacy a:hover { color: var(--color-text); }

/* Submit — full-width black rounded rect, 44px tall. Corner radius 18 is
   concentric with the panel (gap 10 + 18 = panel corner 28), NOT a pill (a pill
   would be radius 22). Typography matches the sidebar CTAs (15/500). 1px border
   in the same ink so the box parity holds with bordered buttons. Dimmed until
   valid. The success view reuses the class for its Done button. */
.claim-submit {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background: var(--color-text);
    border: 1px solid var(--color-text);
    border-radius: 18px;   /* concentric: panel 28 − gap 10 (intentional off-scale) */
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.claim-submit:hover:not(:disabled) { background: #000; border-color: #000; }
.claim-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.claim-submit[hidden] { display: none; }   /* footer swaps Submit ↔ Done by state */

/* Submit → success = shared "성공 리빌" — the success block (.ktg-success, teal
   check that draws + rotates) and the form-lift/height-morph live in
   partials/success-reveal.{css,js}. Claim keeps only the glass-offset fix below
   (.claim-modal.is-success .claim-scroll) since the glass bar is claim-specific. */

/* Mobile — 32px content inset rule (여백 16 + 패딩 16, docs/modal.md) */
@media (max-width: 743px) {
    .claim-panel { width: calc(100% - 32px); max-height: 82vh; }
    .claim-glass { padding-left: 16px; }
    .claim-scroll { padding: 72px 16px 16px; }
    /* footer keeps 14px (concentric with the 28px panel corners on every width) */
}

/* Mobile: 16px side margins — unified across all modals (guru, login).
   Placed at end of file so it overrides the base .{inquiry,report,claim}-panel
   width rules under equal-specificity source order. */
@media (max-width: 743px) {
    .sheet-modal__panel {
        width: min(480px, calc(100% - 32px));
        padding: 20px 16px 20px;
    }
}

/* Lock the procedure sheet to vertical-only scroll. Tabs/chips have their own
   horizontal scroll containers; the outer scroll area must not also scroll
   sideways (otherwise the whole sheet drifts on swipe). Placed at file end so
   it wins the cascade — earlier split overflow rules let overflow-x compute to
   `auto` via the visible↔auto spec quirk. */
#procedureSheetScroll {
    overflow-x: clip;
}