:root {
    color-scheme: light;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: #eff6ff;
    --color-navy: #0f172a;
    --color-text: #1f2937;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-coral: #f97360;
    --color-coral-soft: #fff1ee;
    --color-teal: #0f9f8f;
    --color-teal-soft: #ecfdf8;
    --color-background: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fbff;
    --color-surface-muted: #f1f5f9;
    --color-muted: var(--color-text-muted);
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-success: #15803d;
    --color-warning: #b45309;
    --color-danger: #b91c1c;
    --font-heading: "Poppins", "Inter", "Pretendard", "Noto Sans KR", system-ui, sans-serif;
    --font-body: "Inter", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: clamp(1.75rem, 4vw, 2.5rem);
    --text-hero: clamp(2.25rem, 6vw, 4.25rem);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);
    --shadow-soft: var(--shadow-sm);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --bg: var(--color-background);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-muted);
    --text: var(--color-text);
    --muted: var(--color-text-muted);
    --line: var(--color-border);
    --border: var(--color-border);
    --accent: var(--color-primary);
    --accent-dark: var(--color-primary-hover);
    --focus: var(--color-primary);
    --shadow: var(--shadow-md);
}

.public-report-section {
    margin-block: 1.25rem;
}

.public-report-control {
    border: 1px solid #d8e4f5;
    border-radius: 12px;
    background: #fff;
    padding: 0.75rem 1rem;
}

.public-report-control summary {
    cursor: pointer;
    color: #475569;
    font-weight: 800;
}

.public-report-control--compact {
    margin-top: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: #f8fbff;
}

.public-report-form {
    display: grid;
    max-width: 36rem;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.public-report-form label {
    display: grid;
    gap: 0.35rem;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 800;
}

.public-report-form select,
.public-report-form textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    padding: 0.65rem 0.75rem;
    color: var(--text);
    font: inherit;
}

.public-report-submit {
    justify-self: start;
    min-height: 40px;
}

@media (max-width: 640px) {
    .public-report-control {
        padding: 0.75rem;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-background);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 3px;
}

button,
input,
select {
    font: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    padding-top: env(safe-area-inset-top);
}

.site-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 12px 18px;
}

.site-brand {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--text);
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.site-brand__icon {
    display: block;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.mobile-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.mobile-account-link,
.mobile-menu {
    position: relative;
}

.mobile-account-link,
.mobile-menu-trigger {
    display: inline-grid;
    min-height: 44px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text);
    padding: 0 14px;
    font-size: 0.86rem;
    font-weight: 900;
    list-style: none;
    text-decoration: none;
    cursor: pointer;
}

.mobile-menu-trigger::-webkit-details-marker {
    display: none;
}

.mobile-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 35;
    display: grid;
    min-width: 190px;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #ffffff;
    padding: 8px;
    box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, 0.08));
}

.mobile-menu-panel a,
.mobile-menu-panel button {
    display: grid;
    min-height: 42px;
    align-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    padding: 0 12px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.mobile-menu-panel a:hover,
.mobile-menu-panel a:focus-visible,
.mobile-menu-panel button:hover,
.mobile-menu-panel button:focus-visible {
    background: #fff1ed;
    color: var(--accent-dark);
}

.mobile-menu-form {
    margin: 0;
}

.desktop-nav {
    display: none;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.site-actions {
    display: none;
}

.nav-action-form {
    margin: 0;
}

.nav-link,
.nav-coming-soon,
.nav-action-button {
    display: inline-grid;
    min-height: 42px;
    align-items: center;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
}

.nav-link {
    color: var(--text);
}

.nav-action-button {
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"],
.nav-action-button:hover,
.nav-action-button:focus-visible {
    background: #fff1ed;
    color: var(--accent-dark);
}

.nav-coming-soon {
    color: var(--muted);
}

.nav-coming-soon-strong {
    border: 1px solid var(--line);
    background: var(--surface);
}

.coming-soon-label {
    color: var(--accent-dark);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.page-shell {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 28px 18px 40px;
}

.hero {
    padding: 24px 0 22px;
}

.eyebrow,
.section-label {
    margin: 0 0 10px;
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    max-width: 720px;
    margin-bottom: 14px;
    font-size: clamp(2.2rem, 10vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.hero-copy {
    max-width: 620px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 1.05rem;
}

.print-itinerary-summary {
    display: none;
}

.hero-copy strong {
    color: var(--text);
}

.compact-hero h1 {
    font-size: clamp(2rem, 9vw, 3.8rem);
}

.plan-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    align-items: center;
    gap: var(--space-6);
    overflow: hidden;
}

.plan-hero__copy {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.plan-hero__mascot {
    display: block;
    width: min(26vw, 240px);
    max-height: 260px;
    justify-self: end;
    object-fit: contain;
}

.plan-hero__mascot--photo {
    width: min(44vw, 420px);
    max-height: 270px;
    aspect-ratio: 16 / 9;
    border-radius: 22px;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.plan-hero--photo-bg {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr);
    align-items: center;
    overflow: hidden;
    min-height: clamp(300px, 31vw, 380px);
    padding: clamp(32px, 5vw, 56px);
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.78)),
        radial-gradient(circle at 82% 18%, rgba(125, 211, 252, 0.24), transparent 34%);
}

.plan-hero--photo-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(248, 251, 255, 0.96) 0%, rgba(248, 251, 255, 0.78) 36%, rgba(248, 251, 255, 0.14) 66%, rgba(248, 251, 255, 0) 100%);
}

.plan-hero--photo-bg .plan-hero__copy {
    position: relative;
    z-index: 1;
    max-width: min(610px, 66%);
}

.plan-hero--photo-bg .plan-hero__mascot--photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    box-shadow: none;
}

.page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 230px);
    align-items: center;
    gap: var(--space-6);
    overflow: hidden;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 22%, rgba(255, 255, 255, 0.72), transparent 32%),
        linear-gradient(135deg, #f8fbff 0%, #fff7ed 58%, #f0fdfa 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.page-hero__content {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.page-hero__eyebrow,
.page-hero__title,
.page-hero__description {
    margin: 0;
}

.page-hero__title {
    max-width: 720px;
    font-size: clamp(2rem, 7vw, 3.8rem);
}

.page-hero__description {
    max-width: 620px;
}

.page-hero__actions {
    margin-top: 2px;
}

.page-hero--guest-my-trip .page-hero__actions {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(150px, 180px) minmax(150px, 180px);
    gap: 10px;
    justify-content: start;
}

.page-hero--guest-my-trip .page-hero__actions .primary-button,
.page-hero--guest-my-trip .page-hero__actions .secondary-link {
    width: 100%;
    justify-content: center;
}

.page-hero__media {
    display: grid;
    place-items: center;
    min-width: 0;
}

.page-hero__mascot {
    display: block;
    width: clamp(120px, 15vw, 150px);
    max-height: 158px;
    object-fit: contain;
}

.page-hero--guide-photo {
    background:
        linear-gradient(90deg, rgba(248, 251, 255, 0.98) 0%, rgba(248, 251, 255, 0.78) 52%, rgba(239, 246, 255, 0.34) 100%),
        linear-gradient(135deg, #f8fbff 0%, #eef8ff 58%, #f4fbff 100%);
}

.page-hero--guide-photo .page-hero__media {
    align-self: stretch;
    min-height: 150px;
    overflow: hidden;
    border-radius: 20px;
    background: transparent;
}

.page-hero--guide-photo .page-hero__mascot {
    width: min(100%, 260px);
    max-height: 220px;
    transform: scale(1.08);
}

.page-hero--auth,
.page-hero--account {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 180px);
    padding: 24px;
}

.page-hero--auth .page-hero__mascot,
.page-hero--account .page-hero__mascot {
    width: clamp(108px, 13vw, 130px);
    max-height: 138px;
}

.page-hero--photo {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    background:
        linear-gradient(90deg, rgba(248, 251, 255, 0.98) 0%, rgba(248, 251, 255, 0.84) 52%, rgba(239, 246, 255, 0.42) 100%),
        linear-gradient(135deg, #f8fbff 0%, #eef8ff 58%, #f4fbff 100%);
}

.page-hero--photo .page-hero__media {
    align-self: stretch;
    min-height: 190px;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.page-hero--photo .page-hero__mascot,
.page-hero--auth.page-hero--photo .page-hero__mascot,
.page-hero--account.page-hero--photo .page-hero__mascot {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
}

.page-hero--photo-bg {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    min-height: clamp(300px, 31vw, 380px);
    padding: clamp(32px, 5vw, 56px);
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.78)),
        radial-gradient(circle at 82% 18%, rgba(125, 211, 252, 0.24), transparent 34%);
}

.page-hero--photo-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(248, 251, 255, 0.96) 0%, rgba(248, 251, 255, 0.78) 36%, rgba(248, 251, 255, 0.14) 66%, rgba(248, 251, 255, 0) 100%);
}

.page-hero--photo-bg .page-hero__content {
    position: relative;
    z-index: 1;
    max-width: min(610px, 66%);
}

.page-hero--photo-bg .page-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
}

.page-hero--photo-bg .page-hero__mascot,
.page-hero--auth.page-hero--photo-bg .page-hero__mascot,
.page-hero--account.page-hero--photo-bg .page-hero__mascot {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    box-shadow: none;
}

.account-signed-in-summary {
    margin: 12px 0 0;
    color: var(--color-muted);
    font-weight: 750;
}

@media (max-width: 900px) {
    .page-hero {
        grid-template-columns: 1fr auto;
        gap: 18px;
        padding: 22px;
        border-radius: 20px;
    }

    .page-hero__mascot {
        width: clamp(92px, 20vw, 128px);
        max-height: 136px;
    }

    .page-hero--auth .page-hero__mascot,
    .page-hero--account .page-hero__mascot {
        width: clamp(88px, 18vw, 118px);
        max-height: 126px;
    }

    .page-hero--photo {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    }

    .page-hero--photo .page-hero__media {
        min-height: 160px;
    }

    .page-hero--photo-bg,
    .page-hero--auth.page-hero--photo-bg,
    .page-hero--account.page-hero--photo-bg {
        grid-template-columns: minmax(0, 1fr);
        min-height: 280px;
        padding: 32px 24px;
    }

    .page-hero--photo-bg .page-hero__content {
        max-width: min(440px, 78%);
    }

    .page-hero--photo-bg .page-hero__media {
        min-height: 0;
    }

    .page-hero--photo-bg .page-hero__mascot,
    .page-hero--auth.page-hero--photo-bg .page-hero__mascot,
    .page-hero--account.page-hero--photo-bg .page-hero__mascot {
        width: 100%;
        height: 100%;
        max-height: none;
    }
}

@media (max-width: 640px) {
    .guide-detail-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px;
    }

    .guide-detail-hero__visual {
        min-height: 180px;
        order: -1;
    }

    .guide-detail-hero__visual img {
        width: min(92%, 260px);
        max-height: 240px;
    }

    .guide-detail-card-grid,
    .guide-detail-related-grid {
        grid-template-columns: 1fr;
    }

    .guide-detail-card,
    .guide-detail-related-card {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px 14px;
    }

    .guide-detail-card__visual {
        width: 88px;
        height: 88px;
    }

    .guide-detail-related-card__visual {
        width: 78px;
        height: 78px;
    }

    .guide-detail-card__body h3 {
        font-size: 1.08rem;
    }

    .guide-detail-card__body ul {
        font-size: 0.95rem;
    }

    .guide-detail-related-card__body h3 {
        font-size: 1.02rem;
    }

    .page-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 18px;
    }

    .page-hero__title {
        font-size: clamp(2rem, 12vw, 2.7rem);
    }

    .page-hero__description {
        font-size: 0.95rem;
    }

    .page-hero__mascot {
        width: clamp(82px, 25vw, 106px);
        max-height: 116px;
    }

    .page-hero--auth,
    .page-hero--account {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .page-hero--photo,
    .page-hero--auth.page-hero--photo,
    .page-hero--account.page-hero--photo {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-hero--photo .page-hero__media {
        min-height: 156px;
    }

    .page-hero--photo .page-hero__mascot,
    .page-hero--auth.page-hero--photo .page-hero__mascot,
    .page-hero--account.page-hero--photo .page-hero__mascot {
        width: 100%;
        max-height: none;
    }

    .page-hero--photo-bg,
    .page-hero--auth.page-hero--photo-bg,
    .page-hero--account.page-hero--photo-bg {
        min-height: 270px;
        padding: 30px 20px;
    }

    .page-hero--photo-bg::after {
        background: linear-gradient(90deg, rgba(248, 251, 255, 0.95) 0%, rgba(248, 251, 255, 0.82) 48%, rgba(248, 251, 255, 0.2) 100%);
    }

    .page-hero--photo-bg .page-hero__content {
        max-width: min(420px, 80%);
    }

    .page-hero--photo-bg .page-hero__mascot,
    .page-hero--auth.page-hero--photo-bg .page-hero__mascot,
    .page-hero--account.page-hero--photo-bg .page-hero__mascot {
        width: 100%;
        height: 100%;
        max-height: none;
        object-position: 58% center;
    }

    .page-hero--guest-my-trip .page-hero__actions {
        grid-template-columns: 1fr 1fr;
    }

    .page-hero--guest-my-trip .page-hero__actions .primary-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 360px) {
    .page-hero--guest-my-trip .page-hero__actions,
    .guest-trip-action-grid {
        grid-template-columns: 1fr;
    }
}

.planner-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.card-header {
    padding: 26px 24px 6px;
}

.card-header h2 {
    margin-bottom: 0;
    font-size: 1.45rem;
    line-height: 1.15;
    letter-spacing: 0;
}

.trip-form {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.plan-basics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.plan-basics-grid > .form-step {
    height: 100%;
}

.form-step {
    display: grid;
    gap: 16px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    background: #ffffff;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.form-step:first-child {
    border-top: 1px solid rgba(148, 163, 184, 0.28);
    padding-top: 18px;
}

.plan-anchor-panel {
    gap: 20px;
    border-color: rgba(37, 99, 235, 0.22);
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
}

.plan-anchor-panel__selected {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    border: 1px solid rgba(147, 197, 253, 0.55);
    border-radius: 14px;
    background: rgba(239, 246, 255, 0.72);
    padding: 16px;
}

.plan-anchor-panel__media {
    overflow: hidden;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 360px;
    margin: 0;
    justify-self: start;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(191, 219, 254, 0.8);
    border-radius: 12px;
    background: #eef6ff;
}

.plan-anchor-panel__media img {
    width: 100%;
    height: 100%;
    display: block;
}

.plan-anchor-panel__media--photo img {
    object-fit: cover;
}

.plan-anchor-panel__media--mascot img {
    width: 74%;
    height: 74%;
    object-fit: contain;
}

.plan-anchor-panel__selected h4 {
    margin: 2px 0 8px;
    font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.plan-anchor-panel__selected p {
    margin: 0;
    max-width: 72ch;
    color: var(--color-muted);
}

.plan-anchor-panel__copy {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.plan-anchor-panel__eyebrow {
    margin: 0;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plan-anchor-panel__area {
    font-weight: 800;
}

.plan-anchor-panel__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 12px;
}

.plan-anchor-panel__meta span {
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 7px 10px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

.plan-anchor-nearby {
    gap: 12px;
}

.plan-anchor-nearby__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.plan-anchor-nearby__option {
    display: block;
    cursor: pointer;
    min-width: 0;
}

.plan-anchor-nearby__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-anchor-nearby__option > span {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    height: 100%;
    min-height: 100%;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 14px;
    background: #ffffff;
    padding: 10px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.plan-anchor-nearby__check {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.24);
}

.plan-anchor-nearby__media {
    overflow: hidden;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(191, 219, 254, 0.8);
    border-radius: 12px;
    background: #eef6ff;
}

.plan-anchor-nearby__media img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    object-position: center;
    place-self: center;
}

.plan-anchor-nearby__media--photo img {
    object-fit: cover;
}

.plan-anchor-nearby__media--mascot img {
    width: 76%;
    height: 76%;
    max-width: 76%;
    max-height: 76%;
    object-fit: contain;
    object-position: center;
    transform: translateY(-6%);
}

.plan-anchor-nearby__body {
    display: grid;
    gap: 7px;
    align-content: start;
    min-width: 0;
}

.plan-anchor-nearby__option strong {
    color: var(--color-text);
    font-size: 0.96rem;
    line-height: 1.2;
}

.plan-anchor-nearby__option small {
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.plan-anchor-nearby__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.plan-anchor-nearby__badges span {
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 5px 8px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.plan-anchor-nearby__option em {
    color: var(--color-muted);
    font-size: 0.82rem;
    font-style: normal;
    line-height: 1.35;
}

.plan-anchor-nearby__more {
    margin-top: 12px;
}

.plan-anchor-nearby__more summary {
    width: fit-content;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, 0.32);
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-primary);
    padding: 0 18px;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.plan-anchor-nearby__more summary::-webkit-details-marker {
    display: none;
}

.plan-anchor-nearby__more summary::after {
    content: "+";
    margin-left: 10px;
    font-size: 1rem;
    line-height: 1;
}

.plan-anchor-nearby__more[open] summary {
    margin-bottom: 12px;
    background: #eff6ff;
}

.plan-anchor-nearby__more[open] summary::after {
    content: "-";
}

.plan-anchor-nearby__option:hover > span,
.plan-anchor-nearby__option:focus-within > span {
    border-color: rgba(37, 99, 235, 0.56);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.1);
}

.plan-anchor-nearby__option input:checked + span {
    border-color: var(--color-primary);
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22);
}

.plan-anchor-nearby__option input:checked + span .plan-anchor-nearby__check {
    display: grid;
}

@media (max-width: 860px) {
    .plan-anchor-panel__selected {
        grid-template-columns: 1fr;
    }

    .plan-anchor-panel__meta {
        justify-content: flex-start;
    }

    .plan-anchor-nearby__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .plan-anchor-panel {
        padding: 14px;
    }

    .plan-anchor-panel__selected {
        padding: 14px;
    }

    .plan-anchor-panel__media {
        max-width: 320px;
        justify-self: center;
    }

    .plan-anchor-nearby__grid {
        grid-template-columns: 1fr;
    }

    .plan-anchor-nearby__option > span {
        min-height: 0;
    }
}

.plan-step-card--date {
    overflow: hidden;
    padding: 0;
}

.plan-step-card--date .trip-date-card {
    border: 0;
    border-radius: inherit;
}

.personalization-panel {
    display: grid;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    background: #ffffff;
    padding: 0;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.personalization-panel summary {
    cursor: pointer;
}

.personalization-panel summary:hover,
.personalization-panel summary:focus-visible {
    background: #f8fbff;
}

.personalization-fields {
    display: grid;
    gap: 16px;
    margin-top: 0;
    border-top: 0;
    padding: 18px;
}

.travel-style-card__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 92px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    color: var(--color-text);
    padding: 18px;
    list-style: none;
}

.travel-style-card__summary::marker {
    content: "";
}

.travel-style-card__summary::-webkit-details-marker {
    display: none;
}

.travel-style-card__heading {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.travel-style-card__heading strong {
    color: var(--color-text);
    font-size: 1.18rem;
    line-height: 1.15;
}

.travel-style-card__meta {
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

.travel-style-card__action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(31, 122, 140, 0.18);
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-primary-hover);
    padding: 9px 12px;
    font-size: 0.88rem;
    font-weight: 900;
}

.travel-style-card__chevron {
    display: inline-block;
    transition: transform 160ms ease;
}

.travel-style-card[open] .travel-style-card__chevron {
    transform: rotate(180deg);
}

.travel-style-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-step-header {
    display: grid;
    gap: 5px;
}

.form-step-header h3 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.2;
}

.form-step-header .section-label {
    margin-bottom: 1px;
}

.form-step-header p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.4;
}

.field-group {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text);
    font-weight: 700;
}

.field-group > span,
legend {
    padding: 0;
    font-size: 0.95rem;
}

select {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text);
    padding: 0 14px;
}

input[type="text"],
input[type="date"] {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text);
    padding: 0 14px;
}

.field-help {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.field-error {
    margin: 0;
    border-left: 4px solid var(--accent);
    border-radius: 4px;
    background: #fff1ed;
    color: var(--accent-dark);
    padding: 9px 10px;
    font-size: 0.9rem;
    font-weight: 800;
}

.has-error input[type="text"],
.has-error select,
.has-error .choice-grid label > span {
    border-color: var(--accent);
}

.choice-grid {
    display: grid;
    gap: 10px;
}

.days-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trip-length-grid {
    gap: 12px;
}

.trip-length-option {
    cursor: pointer;
}

.trip-length-option__body {
    position: relative;
    display: grid;
    min-height: 132px;
    align-content: center;
    justify-items: center;
    gap: 5px;
    border: 1px solid rgba(148, 163, 184, 0.38);
    border-radius: 16px;
    background: #ffffff;
    padding: 16px 12px;
    color: var(--color-text);
    text-align: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.trip-length-option:hover .trip-length-option__body,
.trip-length-option:focus-within .trip-length-option__body {
    border-color: rgba(31, 122, 140, 0.45);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.trip-length-option__number {
    color: var(--color-primary);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 950;
    line-height: 0.95;
}

.trip-length-option__body strong {
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
}

.trip-length-option__description {
    color: #4b5563;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.trip-length-option__check {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.52);
    border-radius: 50%;
    background: #ffffff;
    color: transparent;
    font-size: 0.88rem;
    font-weight: 900;
}

.trip-length-option input:checked + .trip-length-option__body {
    border-color: var(--color-primary);
    background: #eff6ff;
    box-shadow: 0 14px 28px rgba(31, 122, 140, 0.16);
}

.trip-length-option input:checked + .trip-length-option__body .trip-length-option__check {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #ffffff;
}

.trip-date-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    height: 100%;
    min-height: 100%;
    align-items: start;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
    padding: 16px;
}

.trip-date-card__icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

.trip-date-card__icon svg {
    width: 24px;
    height: 24px;
}

.trip-date-card__content {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.trip-date-card h4 {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.2;
}

.trip-date-card .field-group {
    gap: 7px;
}

.trip-date-card__display {
    margin: 0;
    border-radius: 12px;
    background: #eef6f8;
    color: var(--color-primary-hover);
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.35;
}

.interest-groups {
    display: grid;
    gap: 16px;
}

.interest-group {
    display: grid;
    gap: 8px;
}

.interest-group h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0;
}

.interests-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.interest-grid-help {
    margin: 0 0 2px;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
}

.interest-card {
    cursor: pointer;
}

.choice-grid label {
    position: relative;
    min-width: 0;
}

.choice-grid input {
    position: absolute;
    opacity: 0;
}

.choice-grid label > span {
    display: grid;
    min-height: 52px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text);
    padding: 10px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
}

.choice-grid input:checked + span {
    border-color: var(--accent);
    background: #fff1ed;
    color: var(--accent-dark);
}

.interest-card-body {
    position: relative;
    display: grid;
    align-content: start;
    gap: 7px;
    justify-items: center;
    min-height: 190px;
    min-width: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 14px 12px 16px;
    text-align: center;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.interest-card:hover .interest-card-body,
.interest-card:focus-within .interest-card-body {
    border-color: rgba(31, 122, 140, 0.45);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.interest-card-check {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.52);
    border-radius: 50%;
    background: #ffffff;
    color: transparent;
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1;
}

.interest-card-mascot {
    display: block;
    width: clamp(104px, 9vw, 126px);
    height: clamp(104px, 9vw, 126px);
    margin-top: 4px;
    object-fit: contain;
}

.interest-card-title {
    max-width: 100%;
    color: var(--color-text);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.2;
}

.interest-card-description {
    max-width: 100%;
    color: #4b5563;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.interest-card input:checked + .interest-card-body {
    border-color: var(--color-primary);
    background: #eff6ff;
    box-shadow: 0 14px 28px rgba(31, 122, 140, 0.16);
}

.interest-card input:checked + .interest-card-body .interest-card-description {
    color: #1f2937;
}

.interest-card input:checked + .interest-card-body .interest-card-check {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #ffffff;
}

.choice-grid input:focus-visible + span,
input[type="text"]:focus-visible,
select:focus-visible,
.primary-button:focus-visible {
    outline: 3px solid rgba(31, 122, 140, 0.35);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .interests-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .interest-card-mascot {
        width: clamp(92px, 12vw, 112px);
        height: clamp(92px, 12vw, 112px);
    }

    .plan-hero {
        grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
    }

    .plan-hero__mascot {
        width: min(28vw, 200px);
    }

    .plan-hero__mascot--photo {
        width: min(38vw, 320px);
        max-height: 220px;
    }

    .plan-hero--photo-bg {
        grid-template-columns: minmax(0, 1fr);
        min-height: 280px;
        padding: 32px 24px;
    }

    .plan-hero--photo-bg .plan-hero__copy {
        max-width: min(440px, 78%);
    }

    .plan-hero--photo-bg .plan-hero__mascot--photo {
        width: 100%;
        height: 100%;
        max-height: none;
    }
}

.primary-button {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #ffffff;
    cursor: pointer;
    padding: 14px 18px;
    font-size: 1rem;
    font-weight: 800;
}

.primary-button:hover {
    background: var(--accent-dark);
}

.button-link {
    display: grid;
    place-items: center;
    text-decoration: none;
}

.guide-section {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.guide-section-header {
    display: grid;
    gap: 8px;
}

.guide-section-header h2 {
    max-width: 760px;
    margin-bottom: 0;
    font-size: 1.45rem;
    line-height: 1.15;
}

.guide-section-header p:last-child {
    max-width: 720px;
    margin-bottom: 0;
    color: var(--muted);
}

.guide-grid {
    display: grid;
    gap: 12px;
}

.home-section {
    display: grid;
    gap: 16px;
    margin-top: 30px;
}

.home-choice-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
    gap: var(--space-6);
    align-items: center;
    min-height: auto;
}

.home-hero-copy {
    min-width: 0;
}

.home-hero-mascot {
    display: grid;
    min-height: 230px;
    place-items: center;
    align-self: stretch;
    overflow: hidden;
    background: transparent;
}

.home-hero-mascot__image {
    display: block;
    width: min(100%, 150px);
    max-height: 190px;
    object-fit: contain;
}

.home-hero-mascot__image--photo {
    width: min(100%, 440px);
    max-height: 260px;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.home-choice-hero--photo-bg {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr);
    overflow: hidden;
    min-height: clamp(300px, 31vw, 380px);
    padding: clamp(32px, 5vw, 56px);
    background:
        linear-gradient(135deg, rgba(248, 251, 255, 0.92), rgba(255, 255, 255, 0.76)),
        radial-gradient(circle at 84% 16%, rgba(125, 211, 252, 0.24), transparent 34%);
}

.home-choice-hero--photo-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(248, 251, 255, 0.96) 0%, rgba(248, 251, 255, 0.78) 36%, rgba(248, 251, 255, 0.14) 66%, rgba(248, 251, 255, 0) 100%);
}

.home-choice-hero--photo-bg .home-hero-copy {
    position: relative;
    z-index: 1;
    max-width: min(610px, 66%);
}

.home-choice-hero--photo-bg .home-hero-visual {
    position: absolute;
    inset: 0;
    z-index: -2;
    min-height: 0;
    background: transparent;
}

.home-choice-hero--photo-bg .home-hero-mascot__image--photo {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    box-shadow: none;
}

.home-feature-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-feature-card,
.home-city-card,
.city-region-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.home-feature-card {
    display: grid;
    gap: 12px;
    min-height: 190px;
    padding: 16px;
    color: var(--text);
    text-decoration: none;
}

.home-feature-card:hover,
.home-feature-card:focus-visible,
.home-city-card:hover,
.home-city-card:focus-visible,
.city-region-links a:hover,
.city-region-links a:focus-visible {
    border-color: var(--accent);
    background: #fff8f5;
}

.home-feature-visual {
    display: grid;
    align-items: center;
    justify-items: center;
    width: 72px;
    height: 54px;
    border-radius: 8px;
    background: #f1f5f9;
    color: var(--accent-dark);
    font-size: 0.8rem;
    font-weight: 900;
}

.home-feature-copy {
    display: grid;
    gap: 6px;
}

.home-feature-copy strong,
.home-city-card strong {
    color: var(--accent-dark);
    font-size: 1.05rem;
}

.home-feature-copy span,
.home-city-card span {
    color: var(--muted);
    line-height: 1.45;
}

.home-city-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.home-city-card {
    display: grid;
    gap: 4px;
    min-height: 108px;
    padding: 14px;
    color: var(--text);
    text-decoration: none;
}

.home-section-footer {
    display: flex;
    justify-content: flex-start;
}

.compact-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.seoul-popular-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.seoul-popular-card {
    display: flex;
    flex-direction: column;
    min-height: 250px;
}

.seoul-popular-card .guide-link {
    margin-top: auto;
}

.seoul-popular-visual {
    width: 58px;
    min-height: 42px;
    margin-bottom: 4px;
    font-size: 0.72rem;
}

.route-detail-meta {
    margin: 0;
}

.route-detail-stop-list {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-detail-stop-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.route-detail-stop-card .stop-photo {
    margin: 0;
}

.city-region-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.city-region-card {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.city-region-card h3 {
    margin: 0;
    color: var(--accent-dark);
    font-size: 1rem;
}

.city-region-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.city-region-links a {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 800;
}

.supported-cities-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.42fr);
    align-items: center;
    overflow: hidden;
}

.supported-cities-hero__content {
    display: grid;
    gap: var(--space-4);
}

.supported-cities-hero__visual {
    display: grid;
    min-height: clamp(180px, 22vw, 280px);
    place-items: center;
}

.supported-cities-hero__visual img {
    width: clamp(150px, 18vw, 240px);
    max-width: 88%;
    max-height: 260px;
    object-fit: contain;
    object-position: center;
}

.supported-cities-hero--photo-bg {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr);
    min-height: clamp(300px, 31vw, 380px);
    padding: clamp(32px, 5vw, 56px);
    background: #eff6ff;
}

.supported-cities-hero--photo-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.87) 0%, rgba(255, 255, 255, 0.68) 42%, rgba(255, 255, 255, 0.08) 78%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(15, 23, 42, 0.03));
}

.supported-cities-hero--photo-bg .supported-cities-hero__content {
    position: relative;
    z-index: 1;
    max-width: min(610px, 66%);
}

.supported-cities-hero--photo-bg .supported-cities-hero__visual {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    min-height: 0;
    overflow: hidden;
}

.supported-cities-hero--photo-bg .supported-cities-hero__visual img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
}

.supported-cities-section .city-region-grid {
    grid-template-columns: 1fr;
}

.supported-city-region {
    display: grid;
    gap: var(--space-4);
}

.supported-city-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.supported-city-card {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease,
        background-color 160ms ease;
}

.city-region-links .supported-city-card {
    padding: 0;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: inherit;
}

.supported-city-card:hover,
.supported-city-card:focus-visible {
    border-color: rgba(37, 99, 235, 0.36);
    background: #ffffff;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.supported-city-card:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.3);
    outline-offset: 3px;
}

.supported-city-card__media {
    position: relative;
    display: grid;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    place-items: center;
    background: linear-gradient(135deg, #eff6ff, #ecfeff);
}

.supported-city-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 180ms ease;
}

.supported-city-card:hover .supported-city-card__image {
    transform: scale(1.025);
}

.supported-city-card__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.supported-city-card__fallback[hidden] {
    display: none;
}

.supported-city-card__fallback img {
    width: min(68%, 150px);
    max-width: 150px;
    max-height: 78%;
    object-fit: contain;
    object-position: center;
}

.supported-city-card__body {
    display: grid;
    gap: 5px;
    min-height: 96px;
    padding: var(--space-4);
}

.supported-city-card__body strong {
    color: var(--color-navy);
    font-size: 1.02rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.supported-city-card__body span {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.42;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 700;
}

.breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    text-decoration: underline;
}

.city-guide-hero {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(20, 184, 166, 0.1)),
        #ffffff;
}

.city-guide-hero--seoul {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: clamp(18px, 4vw, 42px);
    align-items: center;
    overflow: hidden;
}

.city-guide-hero__content {
    display: grid;
    gap: var(--space-3);
}

.city-guide-hero__visual {
    display: flex;
    min-height: clamp(132px, 18vw, 190px);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 28px;
}

.city-guide-hero__visual img {
    display: block;
    width: min(100%, 178px);
    max-height: 190px;
    object-fit: contain;
    object-position: center;
    transform: scale(1.18);
    transform-origin: center;
}

.region-hero__media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.66);
    border-radius: 22px;
    aspect-ratio: 4 / 3;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.region-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--region-hero-position, center);
    transition: transform 180ms ease;
}

.city-guide-hero__photo,
.city-guide-hero__region-image {
    display: block;
    width: 100%;
    height: 100%;
    object-position: var(--region-hero-position, center);
}

.city-guide-hero__photo,
.city-guide-hero__region-image--cover {
    object-fit: cover;
}

.city-guide-hero__region-image--contain {
    object-fit: contain;
    padding: clamp(12px, 2.2vw, 24px);
}

.city-guide-hero__fallback-mascot {
    display: block;
    width: min(100%, 178px);
    max-height: 190px;
    object-fit: contain;
    object-position: center;
}

.seoul-hero__actions,
.city-guide-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.seoul-hero__action {
    box-sizing: border-box;
    display: inline-flex;
    width: auto;
    min-width: 190px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.city-guide-glance,
.city-guide-events,
.city-guide-final {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding: var(--space-5);
}

.city-guide-glance-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}

.city-guide-glance-list div {
    display: grid;
    gap: 0.25rem;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.city-guide-glance-list dt {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.city-guide-glance-list dd {
    margin: 0;
    color: var(--color-text);
    font-weight: 800;
}

.city-guide-card-grid {
    display: grid;
    gap: 18px;
}

.city-guide-card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.city-guide-card-grid--four {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.seoul-featured-experience {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
    gap: var(--space-5);
    align-items: stretch;
    margin-top: var(--space-6);
    overflow: hidden;
    border-color: rgba(20, 184, 166, 0.18);
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(37, 99, 235, 0.08)),
        #ffffff;
}

.seoul-featured-experience__media {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    border-radius: var(--radius-md);
    background: #ffffff;
}

.seoul-featured-experience__image,
.seoul-featured-experience__placeholder,
.seoul-featured-experience__course-map {
    width: 100%;
    height: auto;
}

.seoul-featured-experience__image {
    display: block;
    object-fit: contain;
}

.seoul-featured-experience__map-link {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: var(--radius-md);
    background: #ffffff;
}

.seoul-featured-experience__map-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.32);
    outline-offset: 3px;
}

.seoul-featured-experience__course-map {
    display: block;
    object-fit: contain;
    background: #ffffff;
}

.seoul-featured-experience__placeholder {
    display: grid;
    place-items: center;
    position: relative;
    min-height: 280px;
    aspect-ratio: 4 / 3;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.seoul-featured-experience__placeholder::before,
.seoul-featured-experience__placeholder::after {
    content: "";
    position: absolute;
    border-radius: 999px;
}

.seoul-featured-experience__placeholder::before {
    width: 62%;
    height: 42%;
    left: 14%;
    bottom: 18%;
    background: rgba(20, 184, 166, 0.18);
}

.seoul-featured-experience__placeholder::after {
    width: 42%;
    height: 54%;
    right: 12%;
    top: 18%;
    background: rgba(37, 99, 235, 0.12);
}

.seoul-featured-experience__placeholder span {
    position: relative;
    z-index: 1;
}

.seoul-featured-experience__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.seoul-featured-experience__content h2 {
    margin: 0;
    color: var(--color-navy);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.08;
}

.seoul-featured-experience__content p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.6;
}

.seoul-featured-experience__meta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: var(--space-3);
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: var(--radius-sm);
    background: rgba(239, 246, 255, 0.72);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 900;
    line-height: 1.35;
}

.seoul-featured-experience__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.seoul-featured-experience__notes {
    display: grid;
    gap: 0.45rem;
    padding-top: var(--space-1);
}

.seoul-featured-experience__notes p {
    padding-left: var(--space-3);
    border-left: 3px solid rgba(20, 184, 166, 0.22);
}

.seoul-trail-map-source {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
    padding: 0 var(--space-1);
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.seoul-trail-map-source__link {
    width: fit-content;
    color: var(--color-primary);
    font-weight: 800;
    text-decoration: none;
}

.seoul-trail-map-source__link:hover,
.seoul-trail-map-source__link:focus-visible {
    text-decoration: underline;
}

.events-weather-page {
    display: grid;
    gap: var(--space-6);
}

.events-weather-hero {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(20, 184, 166, 0.08)),
        #ffffff;
}

.events-weather-hero--with-mascot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 224px);
    gap: clamp(16px, 4vw, 34px);
    align-items: center;
}

.events-weather-hero__content {
    min-width: 0;
}

.events-weather-hero__media {
    display: grid;
    min-width: 0;
    place-items: center;
    overflow: visible;
}

.events-weather-hero__mascot {
    display: block;
    width: clamp(168px, 18vw, 216px);
    max-height: 232px;
    object-fit: contain;
    object-position: center;
    transform: scale(1.16);
    transform-origin: center;
}

.events-weather-hero--photo-bg {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: clamp(300px, 31vw, 380px);
    padding: clamp(32px, 5vw, 56px);
    overflow: hidden;
    background: #eff6ff;
}

.events-weather-hero--photo-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.87) 0%, rgba(255, 255, 255, 0.68) 42%, rgba(255, 255, 255, 0.08) 78%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(15, 23, 42, 0.03));
}

.events-weather-hero--photo-bg .events-weather-hero__content {
    position: relative;
    z-index: 1;
    max-width: min(610px, 66%);
}

.events-weather-hero--photo-bg .events-weather-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    overflow: hidden;
}

.events-weather-hero__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.events-weather-section {
    margin: 0;
}

.events-weather-city-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: var(--space-3);
    align-items: end;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
}

.events-weather-summary-card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-5);
    align-items: start;
    padding: var(--space-5);
    border-color: rgba(37, 99, 235, 0.16);
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.86), rgba(240, 253, 250, 0.76)),
        #ffffff;
}

.events-weather-summary-card h3 {
    margin: 0 0 var(--space-2);
    color: var(--color-navy);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.events-weather-summary-card p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.55;
}

.events-weather-guidance-grid,
.events-weather-event-meta {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.events-weather-guidance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.events-weather-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.events-weather-forecast-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.events-weather-forecast-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
}

.events-weather-forecast-card h3,
.events-weather-forecast-card p {
    margin: 0;
}

.events-weather-forecast-card h3 {
    color: var(--color-navy);
}

.events-weather-forecast-meta {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.events-weather-guidance-grid div,
.events-weather-event-meta div {
    display: grid;
    gap: 0.2rem;
}

.events-weather-guidance-grid dt,
.events-weather-event-meta dt {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 900;
    text-transform: uppercase;
}

.events-weather-guidance-grid dd,
.events-weather-event-meta dd {
    margin: 0;
    color: var(--color-text);
    font-weight: 800;
}

.seoul-event-card__meta {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seoul-event-card__meta div {
    border-radius: 12px;
    background: #f8fafc;
    padding: 9px 10px;
}

.seoul-event-card__meta dt {
    color: #64748b;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
    font-weight: 650;
}

.seoul-event-card__meta dd {
    display: -webkit-box;
    overflow: hidden;
    color: #1f2937;
    font-size: 0.86rem;
    font-weight: 550;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.seoul-event-card__contact {
    grid-column: 1 / -1;
}

.events-weather-plan-grid,
.events-weather-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.events-weather-plan-card,
.events-weather-source-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
}

.events-weather-source-note {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
}

.events-weather-source-note p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.5;
}

.events-weather-plan-card h3,
.events-weather-source-card h3,
.events-weather-event-card h3,
.events-weather-empty h3 {
    margin: 0;
    color: var(--color-navy);
}

.events-weather-plan-card p,
.events-weather-source-card p,
.events-weather-empty p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.5;
}

.events-weather-plan-card .secondary-link {
    margin-top: auto;
}

.events-weather-event-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.events-weather-event-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    padding: 18px;
    border-color: rgba(37, 99, 235, 0.14);
    background: #ffffff;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.seoul-event-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.seoul-event-card__tags {
    min-height: 28px;
}

.events-weather-event-card h3 {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-navy);
    font-size: clamp(1.06rem, 1.4vw, 1.16rem);
    font-weight: 750;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.seoul-event-card__footer {
    display: grid;
    gap: 9px;
    margin-top: auto;
}

.seoul-event-card__button {
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 750;
    padding: 10px 14px;
    text-align: center;
    white-space: nowrap;
}

.seoul-event-card__button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 3px;
}

.events-weather-original-title,
.events-weather-refresh {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.events-weather-event-summary {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.seoul-event-card__description {
    color: #4b5563;
    font-size: 0.92rem;
    font-weight: 450;
    line-height: 1.5;
}

.events-weather-empty {
    padding: var(--space-4);
}

.city-guide-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    overflow: hidden;
    padding: 18px;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.city-guide-card__main-link {
    display: grid;
    min-height: 100%;
    grid-template-rows: auto auto 1fr auto;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.city-guide-card__main-link:focus-visible,
.city-guide-card a:focus-visible,
.city-guide-activity-tile a:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 3px;
}

.city-guide-card__visual {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 150px;
    max-height: 178px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef6ff, #f7fbff);
}

.city-guide-card__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center;
    transition: transform 180ms ease;
}

.city-guide-card__visual--photo img {
    object-fit: cover;
}

.city-guide-card__visual--mascot img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    transform: scale(1.12);
}

.city-media--mascot,
.seoul-mascot-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    --mascot-scale: 1.12;
    --mascot-shift-x: 0;
    --mascot-shift-y: 0;
}

.city-media__mascot-crop {
    display: grid;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    place-items: center;
    overflow: hidden;
}

.city-media .city-media__mascot {
    display: block;
    width: 88%;
    height: 88%;
    max-width: 176px;
    max-height: 176px;
    object-fit: contain;
    object-position: center;
    transform: translate(var(--mascot-shift-x), var(--mascot-shift-y)) scale(var(--mascot-scale));
    transform-origin: center center;
}

.seoul-mascot-media--default,
.city-media--curated-route,
.city-media--planning-anchor {
    --mascot-scale: 1.12;
}

.seoul-mascot-media--lg {
    --mascot-scale: 1.66;
}

.seoul-mascot-media--xl,
.city-media--neighborhood,
.city-media--travel-style,
.city-media--walking {
    --mascot-scale: 1.82;
    --mascot-shift-y: -1px;
}

.city-media--best-route {
    --mascot-scale: 0.88;
}

.city-guide-ready-made-routes .city-media--curated-route {
    --mascot-scale: 1.34;
    --mascot-shift-y: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.city-guide-ready-made-routes .city-media--ready-made-tall {
    --mascot-shift-y: -49px;
}

.city-guide-ready-made-routes--seoul-compact .city-media--curated-route {
    --mascot-scale: 1.2;
}

.jeju-ready-made-routes .city-media--curated-route {
    --mascot-scale: 1.02;
    --mascot-shift-y: -34px;
}

.jeju-ready-made-routes .city-media--jeju-ready-made-spacious {
    --mascot-scale: 1.22;
    --mascot-shift-y: -40px;
}

.city-guide-ready-made-routes .city-media--curated-route .city-media__mascot-crop {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.city-guide-ready-made-routes .city-media--curated-route .city-media__mascot {
    width: min(72%, 184px);
    height: 78%;
    max-width: 184px;
    max-height: 78%;
    margin: 0;
    object-fit: contain;
    object-position: center;
}

.jeju-ready-made-routes .city-media--curated-route .city-media__mascot {
    width: min(58%, 168px);
    height: auto;
    max-width: 168px;
    max-height: none;
}

.city-guide-featured-media--fallback {
    align-content: stretch;
    min-height: clamp(260px, 32vw, 380px);
}

.city-guide-featured-media--fallback .city-media--featured-fallback {
    --mascot-scale: 1.36;
    --mascot-shift-y: -4px;
    width: 100%;
    min-height: inherit;
    height: 100%;
    max-height: none;
    display: grid;
    place-items: center;
    border-radius: 20px;
}

.city-guide-featured-media--fallback .city-media--featured-fallback .city-media__mascot {
    width: 88%;
    height: 88%;
    max-width: 310px;
    max-height: 310px;
    object-fit: contain;
    object-position: center;
}

.city-media [hidden],
.city-guide-best-route-thumb [hidden] {
    display: none !important;
}

.city-media--fallback-shown {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
}

.seoul-place-card__media.city-media--fallback-shown {
    --mascot-scale: 1.66;
}

.city-guide-best-route-thumb.city-media--fallback-shown {
    --mascot-scale: 0.88;
}

.city-guide-card__visual figcaption {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    padding: 5px 8px;
}

.seoul-place-card {
    gap: 0;
    padding: 0;
}

.seoul-place-card__media {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    min-height: 0;
    max-height: none;
    border-radius: 16px 16px 0 0;
    aspect-ratio: 16 / 9;
}

.seoul-place-card__photo {
    object-fit: cover;
    object-position: center;
}

.seoul-place-card__mascot-wrap {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #eef6ff, #f7fbff);
    padding: 6px;
}

.seoul-place-card__mascot {
    display: block;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

.seoul-place-card__mascot--lg {
    --mascot-scale: 1.66;
}

.city-media .seoul-place-card__mascot--lg {
    width: 60%;
    height: 82%;
}

.city-media--planning-anchor.seoul-place-card__media--mascot {
    padding: 0;
}

.city-media--planning-anchor .seoul-place-card__mascot-wrap {
    padding: 0;
}

.city-media--planning-anchor .seoul-place-card__mascot--lg {
    margin: 0 auto;
    object-position: center center;
    --mascot-shift-x: 0;
}

.seoul-place-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 16px 16px 0;
}

.seoul-place-card__body h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.seoul-place-card__description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.seoul-place-card__badges {
    min-height: 30px;
}

.seoul-place-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    margin-top: auto;
    padding: 16px;
}

.seoul-place-card__button,
.seoul-place-card__map-action {
    box-sizing: border-box;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    padding: 10px 12px;
    text-align: center;
    white-space: nowrap;
}

.seoul-place-card__button {
    width: 100%;
    min-width: 0;
}

.seoul-place-card__map-action {
    display: grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    place-items: center;
}

.seoul-place-card__map-action svg {
    display: block;
    flex: none;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.seoul-place-card__actions .seoul-place-card__button,
.seoul-event-card__footer .seoul-event-card__button {
    width: 100%;
    max-width: none;
}

.ready-made-route-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ready-made-route-card__actions > * {
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 9px 10px;
    text-align: center;
    white-space: nowrap;
}

.ready-made-route-card__action {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
}

.ready-made-route-card__action--view {
    background: #ffffff;
    color: var(--color-primary);
}

.ready-made-route-card__action--view:hover {
    border-color: rgba(37, 99, 235, 0.3);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

.ready-made-route-card__action--use {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.ready-made-route-card__action--use:hover,
.ready-made-route-card__action--use:focus-visible {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.ready-made-route-card__action--use:active {
    border-color: #1e40af;
    background: #1e40af;
    color: #ffffff;
}

.city-guide-card__cta {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 900;
    padding: 8px 12px;
}

.city-guide-card h3,
.city-guide-events h2,
.city-guide-final h2,
.city-guide-glance h2 {
    margin: 0;
}

.city-guide-card h3 {
    color: var(--color-navy);
    font-size: clamp(1.08rem, 1.5vw, 1.18rem);
    line-height: 1.28;
}

.city-guide-card p {
    margin: 0;
    color: #4b5563;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.55;
}

.city-guide-card .secondary-link,
.city-guide-card .primary-button,
.city-guide-link-row {
    margin-top: auto;
}

.city-guide-place-card .section-label {
    margin: 0;
}

.city-guide-place-card h3 {
    color: var(--color-navy);
}

.city-guide-place-meta {
    color: var(--color-primary) !important;
    font-size: 0.9rem;
    font-weight: 800;
}

.city-guide-place-card > p:not(.city-guide-place-meta) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.city-guide-more-places {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.city-guide-more-places__summary {
    width: fit-content;
    cursor: pointer;
    list-style: none;
}

.city-guide-more-places__summary::-webkit-details-marker {
    display: none;
}

.city-guide-badges,
.city-guide-mini-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}

.city-guide-mini-list {
    list-style: none;
    color: var(--color-muted);
    font-weight: 700;
}

.city-guide-events {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.city-guide-activity-grid {
    align-items: stretch;
}

.city-guide-activity-tile {
    display: grid;
    min-height: 100%;
    padding: 18px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ffffff, rgba(239, 246, 255, 0.72));
    overflow: hidden;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.city-guide-category-marker {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-items: center;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 900;
}

.city-guide-activity-tile h3 {
    margin: 0;
    color: var(--color-navy);
    font-size: clamp(1.08rem, 1.5vw, 1.18rem);
    line-height: 1.28;
}

.city-guide-activity-tile p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #4b5563;
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.city-guide-activity-tile .secondary-link {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    margin-top: auto;
    font-size: var(--text-sm);
}

.city-guide-activity-more {
    display: grid;
    gap: var(--space-3);
}

.city-guide-activity-more summary {
    width: fit-content;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}

.city-guide-activity-more summary::-webkit-details-marker {
    display: none;
}

.city-guide-activity-more summary span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-4);
    background: #ffffff;
    color: var(--color-primary);
    font-weight: 800;
}

.city-guide-activity-more[open] .city-guide-activity-more-show,
.city-guide-activity-more-hide {
    display: none;
}

.city-guide-activity-more[open] .city-guide-activity-more-hide {
    display: inline-flex;
}

.city-guide-walking-layout {
    display: grid;
    gap: var(--space-3);
}

.city-guide-walking-feature {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid rgba(20, 184, 166, 0.18);
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(37, 99, 235, 0.08)),
        #ffffff;
}

.city-guide-walking-feature h3 {
    margin: 0;
    color: var(--color-navy);
    font-size: var(--text-2xl);
}

.city-guide-walking-feature p {
    max-width: 780px;
    margin: 0;
}

.city-guide-walking-meta {
    color: var(--color-primary) !important;
    font-weight: 900;
}

.city-guide-walking-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (hover: hover) and (pointer: fine) {
    .city-guide-card:hover,
    .city-guide-activity-tile:hover {
        border-color: rgba(37, 99, 235, 0.26);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
        transform: translateY(-3px);
    }

    .events-weather-event-card:hover {
        border-color: rgba(37, 99, 235, 0.24);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.11);
        transform: translateY(-3px);
    }

    .city-guide-card:hover .city-guide-card__visual img,
    .city-guide-activity-tile:hover .city-guide-card__visual img {
        transform: scale(1.04);
    }

    .city-guide-card:hover .city-media--mascot .city-media__mascot,
    .city-guide-activity-tile:hover .city-media--mascot .city-media__mascot {
        transform: translate(var(--mascot-shift-x), var(--mascot-shift-y)) scale(calc(var(--mascot-scale) * 1.02));
    }

    .city-guide-card__main-link:hover .city-guide-card__cta,
    .city-guide-card__main-link:focus-visible .city-guide-card__cta {
        border-color: rgba(37, 99, 235, 0.26);
        background: #eff6ff;
    }

    .city-guide-hero--seoul:hover .region-hero__image {
        transform: scale(1.015);
    }
}

@media (prefers-reduced-motion: reduce) {
    .city-guide-card,
    .city-guide-activity-tile,
    .events-weather-event-card,
    .city-guide-card__visual img,
    .city-media .city-media__mascot,
    .region-hero__image {
        transition: none;
    }

    .city-guide-card:hover,
    .city-guide-activity-tile:hover,
    .events-weather-event-card:hover,
    .city-guide-card:hover .city-guide-card__visual img,
    .city-guide-activity-tile:hover .city-guide-card__visual img,
    .city-guide-hero--seoul:hover .region-hero__image {
        transform: none;
    }

    .city-guide-card:hover .city-media--mascot .city-media__mascot,
    .city-guide-activity-tile:hover .city-media--mascot .city-media__mascot {
        transform: translate(var(--mascot-shift-x), var(--mascot-shift-y)) scale(var(--mascot-scale));
    }
}

.city-grid,
.essentials-grid,
.tool-grid,
.future-grid {
    display: grid;
    gap: 12px;
}

.compact-link-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compact-tool-link {
    display: inline-grid;
    gap: 2px;
    max-width: 240px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    padding: 9px 11px;
    text-decoration: none;
}

.compact-tool-link span {
    color: var(--accent-dark);
    font-size: 0.92rem;
    font-weight: 900;
}

.compact-tool-link small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.compact-tool-link:hover {
    background: #fff8f5;
}

.trip-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.trip-tool-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    max-width: none;
    min-height: 104px;
    border-radius: 16px;
    background: #ffffff;
    padding: 12px;
}

.trip-tool-card img {
    width: clamp(58px, 6vw, 76px);
    aspect-ratio: 1;
    object-fit: contain;
}

.trip-tool-card span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.trip-tool-card strong {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.2;
}

.trip-tool-card small {
    color: #4b5563;
    font-size: 0.78rem;
    line-height: 1.3;
}

@media (max-width: 900px) {
    .trip-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .plan-basics-grid {
        grid-template-columns: 1fr;
    }

    .travel-style-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .trip-tool-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .trip-tool-card img {
        width: 64px;
    }
}

.planner-next-steps {
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 4px;
}

.guide-card {
    display: grid;
    align-content: start;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 18px;
}

.city-card,
.essential-card,
.tool-card,
.status-card,
.future-section-shell {
    display: grid;
    align-content: start;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 18px;
}

.future-section-shell {
    background: var(--surface-soft);
}

.nested-guide-section {
    margin-top: 22px;
}

.guide-card h3 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.2;
}

.guide-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.city-card h3,
.essential-card h3,
.tool-card h3,
.future-grid h3,
.status-card h3,
.future-section-shell h2 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.2;
}

.city-card p,
.essential-card p,
.tool-card p,
.future-grid p,
.status-card p,
.future-section-shell p {
    margin-bottom: 0;
    color: var(--muted);
}

.future-grid article {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 16px;
}

.guide-status {
    width: fit-content;
    border-radius: 999px;
    background: #fff1ed;
    color: var(--accent-dark);
    padding: 5px 9px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.guide-status.coming-soon {
    background: var(--surface-soft);
    color: var(--muted);
}

.guide-link,
.status-link {
    display: grid;
    min-height: 48px;
    place-items: center;
    width: 100%;
    margin-top: 4px;
    border: 1px solid rgba(227, 71, 47, 0.28);
    border-radius: 8px;
    background: #ffffff;
    color: var(--accent-dark);
    padding: 0 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.guide-link:hover,
.guide-link:focus-visible,
.status-link:hover,
.status-link:focus-visible {
    background: #fff1ed;
}

.coming-soon-note {
    width: fit-content;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-admin-link {
    margin: 18px 0 0;
    text-align: center;
    font-size: 0.78rem;
}

.home-admin-link a {
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
}

.home-admin-link a:hover,
.home-admin-link a:focus-visible {
    color: var(--accent-dark);
    text-decoration: underline;
}

.site-footer {
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.72);
}

.footer-inner {
    display: grid;
    gap: 6px;
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 22px 18px 28px;
    color: var(--muted);
    font-size: 0.92rem;
}

.footer-inner p {
    margin-bottom: 0;
}

.footer-brand {
    color: var(--text);
    font-weight: 800;
}

.footer-inner a {
    color: var(--accent-dark);
    font-weight: 800;
}

.mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}

.mobile-nav-item {
    display: grid;
    gap: 3px;
    min-height: 48px;
    place-items: center;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
}

.mobile-nav-icon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
}

.mobile-bottom-icon {
    width: 21px;
    height: 21px;
}

.mobile-nav-item[aria-current="page"],
.mobile-nav-item:focus-visible,
.mobile-nav-item:hover {
    background: #fff1ed;
    color: var(--accent-dark);
}

.mobile-nav-coming-soon {
    color: var(--muted);
}

.results-grid {
    display: grid;
    gap: 18px;
}

.day-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.day-card-header {
    padding: 22px 22px 8px;
}

.day-card-header h2 {
    margin-bottom: 8px;
    font-size: 1.5rem;
    line-height: 1.2;
}

.day-card-header p:last-child {
    margin-bottom: 0;
    color: var(--muted);
    font-weight: 700;
}

.stop-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 16px 22px 22px;
}

.stop-item {
    display: grid;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 18px;
}

.stop-item h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.18rem;
    line-height: 1.25;
}

.stop-item p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 1rem;
}

.stop-guidance {
    display: grid;
    gap: 8px;
    margin: 2px 0 0;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.stop-guidance div {
    display: grid;
    gap: 2px;
}

.stop-guidance dt {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.stop-guidance dd {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.45;
}

.stop-photo {
    display: grid;
    gap: 7px;
    margin: 2px 0 4px;
}

.stop-photo img {
    display: block;
    width: 100%;
    height: 170px;
    border-radius: 8px;
    object-fit: contain;
    object-position: center;
    background: #f8fafc;
}

.stop-photo figcaption {
    display: grid;
    gap: 3px;
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.stop-photo .place-photo-credit {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.3rem;
    row-gap: 0.1rem;
    margin: 0.35rem 0;
    padding: 0;
    font-size: 0.78rem;
}

.place-photo-credit-item {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Credits are content, not an unbreakable minimum width for grid tracks. */
.home-ui .home-section > *,
.home-ui .home-best-route-card,
.home-ui .seoul-experience-card,
.home-photo-card {
    min-width: 0;
}

.home-photo-card > .place-photo-credit {
    display: block;
}

.home-photo-card > .home-destination-card {
    display: block;
    width: 100%;
}

@media (max-width: 759px) {
    .city-destination-rail > .home-photo-card {
        flex: 0 0 170px;
    }
}

.public-share-stop,
.public-share-stop-photo {
    min-width: 0;
    max-width: 100%;
}

.public-share-stop-photo {
    margin: 0;
}

.public-share-stop-photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.stop-photo-placeholder-box {
    display: grid;
    place-items: center;
    gap: 8px;
    width: 100%;
    min-height: 170px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    text-align: center;
}

.stop-photo-placeholder-box span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
}

.stop-photo-placeholder-box strong {
    color: var(--text);
    font-size: 0.95rem;
}

.stop-time {
    color: var(--accent-dark);
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
}

.stop-location-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.stop-location-badge,
.stop-area-match {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.2;
}

.stop-location-badge {
    border: 1px solid rgba(39, 52, 67, 0.14);
    background: #ffffff;
    color: var(--text);
}

.stop-area-match {
    border: 1px solid rgba(66, 140, 110, 0.22);
    background: rgba(229, 246, 238, 0.8);
    color: #23624b;
}

.stop-area-match--related {
    border-color: rgba(218, 143, 40, 0.24);
    background: rgba(255, 245, 222, 0.85);
    color: #77511b;
}

.stop-area-match--city {
    border-color: rgba(78, 96, 122, 0.18);
    background: rgba(242, 245, 249, 0.92);
    color: var(--muted);
}

.maps-link {
    display: grid;
    min-height: 50px;
    place-items: center;
    margin-top: 6px;
    border: 1px solid rgba(227, 71, 47, 0.28);
    border-radius: 8px;
    background: #ffffff;
    color: var(--accent-dark);
    padding: 0 14px;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.maps-link:hover {
    background: #fff1ed;
}

.movement-block {
    display: grid;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    font-size: 0.9rem;
}

.movement-block h3 {
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.movement-block p {
    margin: 0;
    line-height: 1.38;
}

.movement-meta,
.movement-note {
    color: var(--muted);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.movement-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 7px;
    max-width: 100%;
}

.movement-link-row-primary {
    margin-top: 2px;
}

.movement-link {
    display: inline-flex;
    max-width: 100%;
    border: 1px solid rgba(227, 71, 47, 0.2);
    border-radius: 999px;
    background: #ffffff;
    color: var(--accent-dark);
    margin-top: 0;
    padding: 3px 8px;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.movement-link:hover {
    background: #fff1ed;
}

.movement-link-primary {
    border-color: rgba(227, 71, 47, 0.38);
    background: var(--accent);
    color: #ffffff;
    padding: 5px 11px;
}

.movement-link-primary:hover {
    background: var(--accent-dark);
}

.movement-link-local {
    border-color: rgba(78, 96, 122, 0.2);
    color: var(--text);
}

.local-map-options {
    display: grid;
    gap: 5px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(39, 52, 67, 0.08);
}

.replace-toggle {
    display: grid;
    min-height: 48px;
    place-items: center;
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff8f5;
    color: var(--accent-dark);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.replace-toggle:hover,
.replace-toggle[aria-expanded="true"] {
    background: #fff1ed;
}

.replacement-options {
    display: grid;
    gap: 22px;
    margin-top: 12px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #f8fbff;
    padding: 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.replacement-options[hidden] {
    display: none;
}

.replacement-panel-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.replacement-panel-header .section-label {
    margin-bottom: 4px;
}

.replacement-panel-title {
    margin: 0;
    color: var(--ink);
    font-size: 1.06rem;
    font-weight: 900;
    line-height: 1.2;
}

.replacement-panel-close {
    display: inline-grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.replacement-panel-close:hover,
.replacement-panel-close:focus-visible {
    border-color: rgba(37, 99, 235, 0.36);
    color: var(--color-primary-hover);
}

.replacement-current-place {
    display: grid;
    gap: 3px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 14px;
    background: #fff;
    padding: 12px 14px;
}

.replacement-current-place__label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: uppercase;
}

.replacement-current-place__name {
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.3;
}

.replacement-step {
    display: grid;
    gap: 12px;
}

.replacement-step__header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.replacement-step__number {
    display: inline-grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    font-size: 0.83rem;
    font-weight: 900;
    line-height: 1;
}

.replacement-step__header h5 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.22;
}

.replacement-step__header p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.replacement-filter-group {
    display: grid;
    gap: 10px;
}

.replacement-filter-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.replacement-chip-row,
.replacement-scope-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.replacement-scope-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #fff;
    gap: 0;
}

.replacement-filter-chip,
.replacement-scope-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.1;
    padding: 8px 12px;
    text-align: center;
}

.replacement-scope-chip {
    min-width: 0;
    border-width: 0 1px 0 0;
    border-color: var(--color-border);
    border-radius: 0;
    color: var(--ink);
    padding: 11px 10px;
    white-space: normal;
}

.replacement-scope-chip:last-child {
    border-right: 0;
}

.replacement-filter-chip:hover,
.replacement-filter-chip.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.replacement-filter-chip:not(.is-active):hover {
    border-color: rgba(37, 99, 235, 0.42);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

.replacement-scope-chip:hover,
.replacement-scope-chip.is-active {
    background: var(--color-primary);
    color: #fff;
}

.replacement-filter-chip:focus-visible,
.replacement-scope-chip:focus-visible,
.replacement-panel-close:focus-visible,
.replacement-option-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: 2px;
}

.replacement-chip-check {
    display: inline-grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: currentColor;
    font-size: 0.72rem;
    line-height: 1;
}

.replacement-scope-help p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.replacement-option-form {
    margin: 0;
    width: 100%;
}

.replacement-candidate-card {
    display: grid;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.replacement-candidate-card:hover,
.replacement-candidate-card:focus-within {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.12);
    transform: translateY(-2px);
}

.replacement-candidate-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    align-items: center;
    gap: 16px;
}

.replacement-candidate-card__content {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.replacement-candidate-card__action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.replacement-options .replacement-option-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 132px;
    min-height: 44px;
    margin-top: 0;
    box-sizing: border-box;
    padding: 0 16px;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.replacement-option-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 118px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.replacement-option-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.replacement-option-thumb--placeholder {
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 245, 230, 0.95), rgba(248, 250, 252, 0.92) 64%),
        #f8fafc;
}

.replacement-option-thumb img.is-mascot,
.replacement-option-thumb__mascot {
    width: min(108px, 82%);
    height: min(108px, 82%);
    min-height: 0;
    object-fit: contain;
    transition: transform 0.18s ease;
}

.replacement-candidate-card:hover .replacement-option-thumb img {
    transform: scale(1.03);
}

.replacement-candidate-card:hover .replacement-option-thumb img.is-mascot,
.replacement-candidate-card:hover .replacement-option-thumb__mascot {
    transform: scale(1.02);
}

.replacement-option-label {
    margin: 0;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: left;
}

.replacement-option-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.35;
}

.replacement-option-proximity {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    margin: 0;
    min-height: 24px;
    border-radius: var(--radius-pill);
    background: rgba(15, 23, 42, 0.06);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
    padding: 0 9px;
}

.replacement-empty-state {
    display: grid;
    gap: 10px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.72);
    padding: 16px;
}

.replacement-empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.replacement-empty-state__context {
    color: var(--ink) !important;
    font-weight: 900;
}

.replacement-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.replacement-empty-action {
    min-height: 38px;
    border-radius: var(--radius-pill);
    padding: 8px 12px;
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1.1;
}

.replacement-loading-state,
.replacement-error-state {
    display: grid;
    gap: 10px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.4;
    padding: 16px;
}

.replacement-loading-state {
    color: var(--color-primary-hover);
    font-weight: 850;
}

.replacement-error-state p {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .replacement-candidate-card,
    .replacement-option-thumb img,
    .replacement-option-thumb__mascot {
        transition: none;
    }

    .replacement-candidate-card:hover,
    .replacement-candidate-card:focus-within,
    .replacement-candidate-card:hover .replacement-option-thumb img,
    .replacement-candidate-card:hover .replacement-option-thumb__mascot {
        transform: none;
    }
}

@media (max-width: 360px) {
    .replacement-options {
        padding: 14px;
        gap: 18px;
    }

    .replacement-panel-header {
        align-items: start;
    }

    .replacement-scope-row {
        grid-template-columns: 1fr;
    }

    .replacement-scope-chip {
        border-width: 0 0 1px;
    }

    .replacement-scope-chip:last-child {
        border-bottom: 0;
    }

}

@media (max-width: 430px) {
    .supported-city-card-grid {
        grid-template-columns: 1fr;
    }

    .supported-city-card__body {
        min-height: auto;
    }

    .replacement-candidate-card__body {
        grid-template-columns: 1fr;
    }

    .replacement-option-thumb {
        width: 100%;
        height: 118px;
        justify-self: stretch;
    }

    .replacement-option-thumb img {
        height: 100%;
        aspect-ratio: auto;
    }

    .replacement-option-thumb img.is-mascot,
    .replacement-option-thumb__mascot {
        width: min(94px, 82%);
        height: min(94px, 82%);
    }

    .replacement-candidate-card__action-row {
        align-items: center;
    }

    .replacement-options .replacement-option-button {
        width: auto;
        min-width: 126px;
    }
}
.weather-alternatives-notice {
    display: grid;
    gap: 14px;
    margin: 18px 0 20px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffaf7;
}

.weather-alternatives-notice.compact {
    gap: 10px;
}

.weather-alternatives-notice h2 {
    margin: 4px 0;
    font-size: 1.08rem;
}

.weather-meta {
    color: var(--muted);
    font-size: 0.92rem;
}

.weather-link-row,
.weather-alternative-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.weather-link-row a {
    color: var(--accent-dark);
    font-weight: 800;
}

.weather-alternatives-panel {
    display: grid;
    gap: 12px;
}

.weather-alternatives-panel[hidden] {
    display: none;
}

.weather-alternatives-slot {
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.weather-alternatives-slot h3 {
    margin: 4px 0;
    font-size: 1rem;
}

.weather-alternative-links .secondary-link {
    min-height: 44px;
    width: auto;
    min-width: 160px;
    margin-top: 0;
    padding: 0 12px;
    font-size: 0.94rem;
}

.secondary-link {
    display: grid;
    min-height: 52px;
    place-items: center;
    width: 100%;
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--accent-dark);
    font-weight: 800;
    text-decoration: none;
}

.secondary-link:hover {
    background: #fff1ed;
}

.share-tools {
    display: grid;
    gap: 12px;
    margin: 12px 0 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    padding: 14px;
}

.share-tools-header {
    display: grid;
    gap: 4px;
}

.share-tools-header h2 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.25;
}

.action-group {
    display: grid;
    gap: 8px;
    min-width: 0;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.action-group h3 {
    margin: 0;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 900;
    text-transform: uppercase;
}

.itinerary-action-group,
.save-manage-action-group {
    border-top: 1px solid var(--line);
}

.itinerary-action-row {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.itinerary-action-row .secondary-link {
    margin-top: 0;
}

.saved-trip-status {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f4f7f6;
    color: var(--muted);
    font-weight: 900;
}

.cloud-trip-form,
.cloud-trip-card {
    display: grid;
    gap: 10px;
}

.cloud-trip-primary-actions,
.cloud-trip-more-content {
    display: grid;
    gap: 10px;
}

.best-route-card-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}

.best-route-card-status > span:first-child {
    color: var(--text);
}

.trip-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.88rem;
    line-height: 1.2;
    font-weight: 900;
}

.trip-status-neutral {
    background: #f4f7f6;
    border-color: #d9e1df;
    color: #45524f;
}

.trip-status-pending {
    background: #fff6df;
    border-color: #ead7a8;
    color: #7a5411;
}

.trip-status-published {
    background: #e7f6f0;
    border-color: #b7dfcf;
    color: #1f614c;
}

.trip-status-rejected {
    background: #f9ecea;
    border-color: #e4c2bd;
    color: #8a3c32;
}

.cloud-trip-primary-actions .primary-button,
.cloud-trip-primary-actions .secondary-link,
.cloud-trip-primary-actions .cloud-trip-delete-form {
    justify-content: center;
    width: 100%;
    text-align: center;
}

.cloud-trip-delete-form {
    margin: 0;
}

.cloud-trip-delete-form .secondary-link {
    justify-content: center;
    width: 100%;
}

.saved-trips-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.saved-trips-toolbar p {
    margin: 0;
    color: var(--color-muted);
    font-weight: 850;
}

.saved-trips-toolbar form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.saved-trips-toolbar label {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 850;
}

.saved-trips-toolbar select {
    min-height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-text);
    font-weight: 800;
    padding: 6px 34px 6px 12px;
}

.saved-trips-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
}

.saved-trip-cloud-card {
    display: flex;
    position: relative;
    flex-direction: column;
    height: 100%;
    border-color: var(--color-border);
    overflow: hidden;
    padding: 0;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.saved-trip-cloud-card__main-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.saved-trip-cloud-card__main-link:hover .saved-trip-cloud-card__body h3,
.saved-trip-cloud-card__main-link:focus-visible .saved-trip-cloud-card__body h3 {
    color: var(--color-primary);
}

.saved-trip-cloud-card__main-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 3px;
}

.saved-trip-cloud-card__media {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #f8fafc, #eef6f4);
    overflow: hidden;
}

.saved-trip-cloud-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.saved-trip-cloud-card__media.is-mascot img {
    width: 74%;
    height: 74%;
    object-fit: contain;
}

.saved-trip-cloud-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    padding: var(--space-4) var(--space-4) var(--space-3);
}

.saved-trip-cloud-card__body h3 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-height: 2.55em;
    margin: 0;
    overflow: hidden;
    color: var(--color-navy);
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.25;
}

.saved-trip-cloud-card__body h3 > span:first-child {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.saved-trip-cloud-card__open-indicator {
    flex: 0 0 auto;
    color: var(--color-primary);
    line-height: 1.25;
    transition: transform 180ms ease;
}

.saved-trip-cloud-card__meta,
.saved-trip-cloud-card__interests,
.saved-trip-cloud-card__updated {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.saved-trip-cloud-card__meta,
.saved-trip-cloud-card__interests {
    color: var(--color-text);
    font-weight: 800;
}

.saved-trip-cloud-card__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 750;
    line-height: 1.35;
}

.saved-trip-cloud-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    margin-top: auto;
    padding: 0 var(--space-4) var(--space-4);
}

.saved-trip-cloud-card__actions > * {
    min-width: 0;
}

.saved-trip-cloud-card__delete-form {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.saved-trip-cloud-card__action {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin-top: 0;
    padding: 9px 10px;
    line-height: 1.2;
    white-space: nowrap;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

.saved-trip-cloud-card__action--share:hover,
.saved-trip-cloud-card__action--share:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

.saved-trip-cloud-card__action--delete:hover,
.saved-trip-cloud-card__action--delete:focus-visible {
    border-color: var(--color-danger);
    background: #fff3f1;
    color: #8a1f1f;
}

@media (hover: hover) and (pointer: fine) {
    .saved-trip-cloud-card:hover {
        transform: translateY(-3px);
        border-color: rgba(37, 99, 235, 0.32);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    }

    .saved-trip-cloud-card:hover .saved-trip-cloud-card__media img {
        transform: scale(1.025);
    }

    .saved-trip-cloud-card:hover .saved-trip-cloud-card__media.is-mascot img {
        transform: scale(1.01);
    }

    .saved-trip-cloud-card:hover .saved-trip-cloud-card__open-indicator {
        transform: translateX(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .saved-trip-cloud-card,
    .saved-trip-cloud-card__media img,
    .saved-trip-cloud-card__open-indicator,
    .saved-trip-cloud-card__action {
        transition: none;
    }

    .saved-trip-cloud-card:hover,
    .saved-trip-cloud-card:hover .saved-trip-cloud-card__media img,
    .saved-trip-cloud-card:hover .saved-trip-cloud-card__open-indicator {
        transform: none;
    }
}

.saved-trip-cloud-card__actions .secondary-link,
.saved-trip-cloud-card__actions .cloud-trip-delete-form,
.saved-trip-cloud-card__actions .danger-outline-link {
    box-sizing: border-box;
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    padding: 9px 10px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 1279px) {
    .saved-trips-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .saved-trips-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .saved-trips-toolbar {
        align-items: stretch;
    }
}

@media (max-width: 340px) {
    .saved-trip-cloud-card__actions {
        gap: 8px;
    }

    .saved-trip-cloud-card__actions .secondary-link,
    .saved-trip-cloud-card__actions .danger-outline-link {
        padding-inline: 7px;
        font-size: 0.9rem;
    }
}

.danger-outline-link {
    border-color: #e4c2bd;
    color: var(--color-danger);
    background: #fffafa;
}

.danger-outline-link:hover,
.danger-outline-link:focus-visible {
    border-color: var(--color-danger);
    color: #8a1f1f;
    background: #fff3f1;
}

.cloud-trip-more {
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.cloud-trip-more summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text);
    background: var(--surface);
    font-weight: 900;
    cursor: pointer;
}

.cloud-trip-more summary:hover,
.cloud-trip-more summary:focus-visible {
    border-color: var(--accent);
    outline: 3px solid rgba(219, 91, 72, 0.18);
    outline-offset: 2px;
}

.cloud-trip-more-content {
    margin-top: 10px;
}

.cloud-secondary-tools {
    gap: 10px;
}

.cloud-secondary-tool {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    padding: 12px;
}

.cloud-secondary-tool summary {
    cursor: pointer;
    color: var(--accent-dark);
    font-weight: 900;
}

.cloud-secondary-tool summary:focus-visible {
    outline: 3px solid rgba(31, 122, 140, 0.22);
    outline-offset: 3px;
}

.cloud-secondary-tool-content {
    display: grid;
    gap: 12px;
    padding-top: 12px;
}

.browser-import-panel,
.browser-import-form,
.browser-import-list,
.browser-import-card {
    display: grid;
    gap: 12px;
}

.browser-import-panel[hidden],
.browser-import-form[hidden],
.browser-import-empty[hidden] {
    display: none;
}

.browser-import-select-row {
    color: var(--text);
}

.browser-import-card p {
    overflow-wrap: anywhere;
}

.import-result-messages {
    display: grid;
    gap: 6px;
    border-left: 4px solid var(--accent);
    background: #fff1ed;
    padding: 10px;
    font-weight: 800;
}

.trip-preferences-summary {
    display: grid;
    gap: 9px;
    max-width: 680px;
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 14px;
}

.trip-preferences-summary dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.trip-preferences-summary div {
    display: grid;
    gap: 2px;
}

.trip-preferences-summary dt {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.trip-preferences-summary dd {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.trip-preferences-summary a {
    color: var(--accent-dark);
    font-weight: 800;
}

.trip-focus-summary {
    display: grid;
    gap: 10px;
    max-width: 760px;
    margin-top: 18px;
    border: 1px solid rgba(227, 71, 47, 0.16);
    border-radius: 8px;
    background: rgba(255, 241, 237, 0.58);
    padding: 14px;
}

.trip-focus-summary dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 0;
}

.trip-focus-summary div {
    display: grid;
    gap: 2px;
}

.trip-focus-summary dt {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.trip-focus-summary dd {
    margin: 0;
    color: var(--text);
    font-weight: 900;
}

.hero.results-hero {
    display: block;
    padding: 28px 30px;
}

.results-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 180px);
    grid-template-areas:
        "content mascot"
        "actions mascot";
    gap: 24px;
    align-items: center;
}

.results-hero__content {
    display: grid;
    grid-area: content;
    gap: 10px;
    min-width: 0;
}

.results-hero__date,
.results-hero__meta {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}

.results-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.results-hero__chips span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    border: 1px solid rgba(227, 71, 47, 0.2);
    border-radius: 999px;
    background: #fff1ed;
    color: var(--accent-dark);
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 900;
}

.results-hero__mascot {
    grid-area: mascot;
    height: auto;
    max-width: 100%;
    object-position: center;
    width: clamp(125px, 14vw, 155px);
    max-height: 155px;
    justify-self: center;
    align-self: center;
    object-fit: contain;
}

.results-summary-panel__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 6px 0 2px;
}

.results-summary-panel__grid div {
    display: grid;
    gap: 5px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    padding: 14px 16px;
}

.results-summary-panel__grid dt {
    color: #4b5563;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.results-summary-panel__grid dd {
    display: grid;
    gap: 2px;
    margin: 0;
    color: var(--text);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.results-summary-panel__grid dd span {
    color: #4b5563;
    font-size: 0.82rem;
    font-weight: 700;
}

.results-summary-panel__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.results-summary-panel__links a,
.results-action-edit {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--accent-dark);
    padding: 0 14px;
    font-weight: 900;
    text-decoration: none;
}

.results-hero__summary {
    margin-top: 4px;
}

.results-hero__kst {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.results-hero__timezone {
    margin: -2px 0 0;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.4;
}

.results-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
}

.results-hero__action-panel {
    display: grid;
    grid-area: actions;
    gap: 10px;
    min-width: 0;
    align-self: start;
}

.results-edit-trip-form {
    display: contents;
}

.results-edit-trip-button,
.results-change-preferences {
    width: auto;
    min-height: 46px;
    margin-top: 0;
    padding: 0 16px;
}

.results-edit-trip-button.is-loading {
    cursor: progress;
    opacity: 0.78;
}

.results-change-preferences {
    width: auto;
}

.results-edit-trip-message,
.results-weather-link {
    margin: 0;
}

.save-choice-dialog {
    width: min(440px, calc(100vw - 32px));
    border: 1px solid rgba(45, 91, 255, 0.18);
    border-radius: 18px;
    padding: 0;
    background: #fff;
    color: var(--text);
    box-shadow: 0 22px 58px rgba(20, 31, 64, 0.22);
}

.save-choice-dialog::backdrop {
    background: rgba(20, 31, 64, 0.34);
}

.save-choice-dialog__body {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 26px;
}

.save-choice-dialog__body h2,
.save-choice-dialog__body p {
    margin: 0;
}

.save-choice-dialog__body h2 {
    font-size: clamp(1.35rem, 4vw, 1.75rem);
}

.save-choice-dialog__body > p:not(.section-label):not(.field-help) {
    color: var(--color-text-muted);
    font-size: 0.98rem;
    line-height: 1.5;
}

.save-choice-dialog__actions {
    display: grid;
    gap: 10px;
    width: 100%;
}

.save-choice-dialog__action {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.save-choice-dialog__action--tertiary {
    border: 1px solid rgba(45, 91, 255, 0.12);
    background: #eef4ff;
    color: var(--accent-dark);
    cursor: pointer;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 800;
}

.save-choice-dialog__action--tertiary:hover,
.save-choice-dialog__action--tertiary:focus-visible {
    background: #e3edff;
    color: var(--primary-blue);
}

.save-choice-dialog .field-help {
    margin-top: -2px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.save-choice-dialog__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(45, 91, 255, 0.06);
    color: var(--color-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.save-choice-dialog__close:hover,
.save-choice-dialog__close:focus-visible {
    border-color: rgba(45, 91, 255, 0.18);
    background: rgba(45, 91, 255, 0.12);
    color: var(--accent-dark);
}

.results-weather-link a {
    color: var(--accent-dark);
    font-size: 0.9rem;
    font-weight: 800;
}

.day-tab-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
}

.day-tab {
    display: grid;
    min-width: min(220px, 72vw);
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    padding: 12px 14px;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.day-tab.is-active,
.day-tab[aria-selected="true"] {
    border-color: rgba(227, 71, 47, 0.38);
    background: #fff4ef;
    box-shadow: 0 10px 24px rgba(227, 71, 47, 0.12);
}

.day-tab:focus-visible {
    outline: 3px solid rgba(227, 71, 47, 0.22);
    outline-offset: 2px;
}

.day-tab__label {
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.day-tab__date {
    color: var(--text);
    font-size: 1rem;
    font-weight: 900;
}

.day-tab__focus {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.results-day-tabs-enhanced [data-day-panel][hidden] {
    display: none !important;
}

.day-card-header {
    display: flex;
    gap: 12px;
    align-items: start;
    justify-content: space-between;
}

.day-card-header__count {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #f3f6f5;
    color: var(--muted);
    padding: 6px 10px;
    font-size: 0.82rem;
    font-weight: 900;
}

.stop-photo-placeholder {
    align-self: stretch;
}

.stop-photo-placeholder-box {
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 245, 230, 0.95), rgba(248, 250, 252, 0.92) 62%),
        #f8fafc;
}

.stop-photo-placeholder-mascot {
    width: min(72%, 210px);
    height: auto;
    max-height: 150px;
    object-fit: contain;
}

.stop-photo-placeholder-box .stop-photo-placeholder-mascot {
    background: transparent;
    border-radius: 0;
}

.route-connector__summary {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.route-connector__icon {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    font-weight: 900;
}

@media (min-width: 900px) {
    .results-grid {
        max-width: 980px;
        margin-inline: auto;
    }

    .day-tab-list {
        overflow-x: visible;
    }

    .day-tab {
        flex: 1 1 0;
        min-width: 0;
    }

    .stop-item {
        grid-template-columns: minmax(220px, 36%) minmax(0, 1fr);
        grid-auto-flow: row;
        column-gap: 18px;
        align-items: start;
        min-height: 210px;
    }

    .stop-item > .stop-photo {
        grid-column: 1;
        grid-row: 1 / span 12;
        margin: 0;
    }

    .stop-item > :not(.stop-photo) {
        grid-column: 2;
    }

    .stop-photo img,
    .stop-photo-placeholder-box {
        height: 210px;
        min-height: 210px;
    }

    .stop-photo .stop-photo-placeholder-mascot {
        height: auto;
        min-height: 0;
        max-height: 160px;
    }
}

@media print {
    .day-tab-list {
        display: none !important;
    }

    .results-day-tabs-enhanced [data-day-panel][hidden],
    [data-day-panel][hidden] {
        display: block !important;
    }

    .day-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .stop-item {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

.share-tools.results-action-bar {
    grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
    align-items: center;
}

.results-action-bar__header {
    display: none;
}

.results-action-bar .action-group {
    border-top: 0;
    padding-top: 0;
}

.results-action-bar .action-group h3,
.results-action-bar .print-helper {
    display: none;
}

.results-action-bar__save {
    order: 0;
}

.results-action-bar__secondary {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.results-action-bar__secondary .results-action-edit {
    width: auto;
}

.results-action-bar .secondary-link {
    width: auto;
    min-height: 44px;
    margin-top: 0;
    padding: 0 14px;
}

.results-action-bar .itinerary-action-row {
    display: flex;
    flex: 1 1 240px;
    flex-wrap: wrap;
    gap: 8px;
}

.results-action-bar .itinerary-action-row .secondary-link {
    flex: 1 1 110px;
}

.results-focus-data[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .results-hero__layout {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .results-hero__mascot {
        width: clamp(115px, 18vw, 140px);
        max-height: 140px;
    }

    .results-hero .results-summary-panel__grid,
    .results-summary-panel .results-summary-panel__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .results-hero__layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "mascot"
            "actions";
        gap: 12px;
    }

    .results-hero__mascot {
        justify-self: center;
        width: clamp(90px, 30vw, 115px);
        max-height: 115px;
    }

    .results-summary-panel__header {
        display: grid;
        justify-content: stretch;
    }

    .share-tools.results-action-bar {
        grid-template-columns: 1fr;
    }

    .results-action-bar__save {
        order: -1;
    }

    .results-action-bar .save-trip-button,
    .results-action-bar .saved-trip-status {
        width: 100%;
        min-height: 48px;
    }

    .results-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .results-edit-trip-button,
    .results-change-preferences {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .results-summary-panel,
    .share-tools.results-action-bar {
        padding: 12px;
    }
}

.share-tools [hidden] {
    display: none;
}

.share-fallback input {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.share-button {
    border: 1px solid var(--line);
    cursor: pointer;
    font: inherit;
}

.print-button {
    border: 1px solid var(--line);
    cursor: pointer;
    font: inherit;
}

.share-message {
    margin: 0;
    color: var(--accent-dark);
    font-weight: 800;
}

.share-fallback {
    display: grid;
    gap: 6px;
}

.share-fallback input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 12px;
    font: inherit;
}

.auth-panel {
    max-width: 720px;
}

.account-overview-panel,
.account-data-summary {
    max-width: none;
}

.account-overview-grid {
    display: grid;
    gap: 12px;
}

.account-action-card {
    display: grid;
    align-content: start;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 16px;
}

.account-action-card h3 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.2;
}

.account-action-card p {
    margin: 0;
    color: var(--muted);
}

.account-session-card {
    background: #fffdfb;
}

.account-dashboard {
    max-width: none;
}

.account-dashboard-grid {
    display: grid;
    gap: var(--space-4);
}

.account-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
}

.account-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.account-card:hover,
.account-card:focus-within {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
    transform: translateY(-2px);
}

.account-profile-card {
    background: linear-gradient(135deg, #ffffff, #f8fbff);
}

.account-session-card {
    background: #fffdfb;
}

.account-card__visual {
    display: grid;
    width: clamp(84px, 10vw, 104px);
    height: clamp(84px, 10vw, 104px);
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-primary-soft), var(--color-teal-soft));
}

.account-card__visual img {
    display: block;
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.account-mini-card__visual,
.account-person-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(92px, 10vw, 104px);
    height: clamp(92px, 10vw, 104px);
    box-sizing: border-box;
    padding: 0;
}

.account-mini-card__mascot,
.account-person-card__mascot {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    margin: auto;
    transform: scale(1.2);
    transform-origin: 50% 50%;
}

.account-mini-card__visual .account-mini-card__mascot,
.account-person-card__visual .account-person-card__mascot {
    width: 100%;
    height: 100%;
}

.account-card__content {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.account-card__eyebrow {
    margin: 0;
    color: var(--color-primary-hover);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.account-card h3,
.account-profile-card__email {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-navy);
    font-size: clamp(1.06rem, 1.6vw, 1.28rem);
    line-height: 1.22;
}

.account-card__status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border: 1px solid rgba(34, 197, 94, 0.28);
    border-radius: var(--radius-pill);
    background: #ecfdf3;
    color: #166534;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
    padding: 4px 9px;
}

.account-card__description {
    margin: 0;
    color: var(--color-muted);
    font-weight: 750;
    line-height: 1.45;
}

.account-card__action {
    display: grid;
    min-width: min(180px, 100%);
    margin: 0;
}

.account-card__button {
    justify-content: center;
    min-height: 44px;
    width: 100%;
    margin-top: 0;
    padding-inline: 14px;
}

.account-card__button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 3px;
}

.account-data-summary {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    padding: 16px;
}

.account-danger-zone {
    border: 1px solid rgba(227, 71, 47, 0.45);
    border-radius: 8px;
    background: #fff8f5;
    padding: 16px;
}

.account-danger-zone .primary-button {
    background: var(--accent);
}

.account-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.account-message-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    padding: 12px 16px;
}

@media (max-width: 900px) {
    .account-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .account-card__action {
        grid-column: 1 / -1;
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .account-card {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .account-card__visual {
        width: 86px;
        height: 86px;
    }

    .account-mini-card__visual,
    .account-person-card__visual {
        width: 88px;
        height: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-card {
        transition: none;
    }

    .account-card:hover,
    .account-card:focus-within {
        transform: none;
    }
}

.manage-account-back {
    margin: 0 0 var(--space-3);
}

.manage-account-back a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    color: var(--color-primary-hover);
    font-weight: 900;
    text-decoration: none;
}

.manage-account-back a:hover,
.manage-account-back a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.manage-account-section {
    max-width: none;
}

.manage-account-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.manage-account-card:hover,
.manage-account-card:focus-within {
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
    transform: translateY(-3px);
}

.manage-account-card__visual {
    display: grid;
    width: clamp(88px, 11vw, 112px);
    height: clamp(88px, 11vw, 112px);
    place-items: center;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--color-primary-soft), var(--color-teal-soft));
}

.manage-account-card__visual img {
    display: block;
    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    transition: transform 180ms ease;
}

.manage-account-card__visual.account-mini-card__visual,
.manage-account-card__visual.account-person-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(92px, 10vw, 104px);
    height: clamp(92px, 10vw, 104px);
    padding: 0;
}

.manage-account-card__visual .account-mini-card__mascot,
.manage-account-card__visual .account-person-card__mascot {
    width: 100%;
    height: 100%;
    object-position: center center;
    margin: auto;
    transform: scale(1.2);
}

.manage-account-card__content {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.manage-account-card__eyebrow {
    margin: 0;
    color: var(--color-primary-hover);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.current-account-card__email {
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--color-navy);
    font-size: clamp(1.18rem, 2vw, 1.5rem);
    line-height: 1.2;
}

.manage-account-card__status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border: 1px solid rgba(34, 197, 94, 0.28);
    border-radius: var(--radius-pill);
    background: #ecfdf3;
    color: #166534;
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.2;
    padding: 4px 10px;
}

.manage-account-card__description {
    margin: 0;
    color: var(--color-muted);
    font-weight: 750;
    line-height: 1.45;
}

.manage-account-card__action {
    display: grid;
    min-width: min(190px, 100%);
    margin: 0;
}

.manage-account-card__button {
    justify-content: center;
    min-height: 44px;
    width: 100%;
    margin-top: 0;
    padding-inline: 14px;
}

.manage-account-card__button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .account-card:hover .account-mini-card__mascot,
    .account-card:hover .account-person-card__mascot,
    .manage-account-card:hover .account-mini-card__mascot,
    .manage-account-card:hover .account-person-card__mascot {
        transform: scale(1.2);
    }
}

@media (max-width: 900px) {
    .manage-account-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .manage-account-card__action {
        grid-column: 1 / -1;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .manage-account-card {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        padding: 18px;
    }

    .manage-account-card__visual {
        width: 88px;
        height: 88px;
    }

    .manage-account-card__visual.account-mini-card__visual,
    .manage-account-card__visual.account-person-card__visual {
        width: 88px;
        height: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .manage-account-card,
    .manage-account-card__visual img,
    .account-mini-card__mascot,
    .manage-account-card__button {
        transition: none;
    }

    .manage-account-card:hover,
    .manage-account-card:hover .manage-account-card__visual img,
    .manage-account-card:hover .account-mini-card__mascot,
    .manage-account-card:hover .account-person-card__mascot {
        transform: none;
    }
}

.account-switch-modal[hidden] {
    display: none !important;
}

.account-switch-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 32px);
}

.account-switch-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.account-switch-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 460px);
    gap: var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    padding: clamp(20px, 4vw, 28px);
}

.account-switch-modal__visual {
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--color-primary-soft), var(--color-teal-soft));
}

.account-switch-modal__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.12);
}

.account-switch-modal__content {
    display: grid;
    gap: 8px;
}

.account-switch-modal__content h2,
.account-switch-modal__content p {
    margin: 0;
}

.account-switch-modal__content h2 {
    color: var(--color-navy);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    line-height: 1.15;
}

.account-switch-modal__content p {
    color: var(--color-muted);
    font-weight: 750;
    line-height: 1.45;
}

.account-switch-modal__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    margin-top: var(--space-2);
}

.account-switch-modal__cancel,
.account-switch-modal__confirm {
    justify-content: center;
    min-height: 44px;
    width: 100%;
    margin: 0;
}

.account-switch-modal__cancel:focus-visible,
.account-switch-modal__confirm:focus-visible,
.account-switch-modal__dialog:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 3px;
}

body.has-account-switch-modal {
    overflow: hidden;
}

@media (max-width: 480px) {
    .account-switch-modal__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-person-card__mascot,
    .account-switch-modal__visual img {
        transition: none;
    }
}

.auth-form {
    display: grid;
    gap: 12px;
}

.auth-form label {
    display: grid;
    gap: 7px;
    font-weight: 800;
}

.auth-form input,
.auth-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 12px;
    font: inherit;
}

.auth-form textarea {
    min-height: 120px;
    resize: vertical;
}

.auth-form ul,
.auth-form .errorlist {
    margin: 0;
    color: var(--accent-dark);
    font-weight: 800;
}

.form-help {
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.auth-link-row {
    display: grid;
    gap: 8px;
}

.hero-action-row {
    max-width: 720px;
    margin-top: 16px;
}

.compact-auth-form .primary-button {
    margin-top: 0;
}

.cloud-detail-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 800;
}

.cloud-trip-hero {
    gap: var(--space-4);
    padding-block: clamp(24px, 4vw, 38px);
}

.cloud-trip-hero__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
    gap: var(--space-5);
    align-items: center;
}

.cloud-trip-hero__copy {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.cloud-trip-hero__copy h1 {
    margin-bottom: 0;
}

.cloud-trip-hero__summary {
    margin: 0;
    color: var(--ink);
    font-weight: 900;
}

.cloud-trip-hero__mascot {
    width: clamp(128px, 13vw, 148px);
    max-height: 148px;
    margin: 0;
    justify-self: end;
    object-fit: contain;
    object-position: center;
}

.cloud-trip-hero__tools {
    display: grid;
    grid-template-columns: minmax(280px, 520px) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: end;
}

.cloud-trip-save-summary {
    display: grid;
    gap: 0.35rem;
    max-width: 42rem;
}

.cloud-trip-save-summary p {
    margin: 0;
}

.cloud-trip-title-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    max-width: 42rem;
    margin-top: 0;
}

.cloud-trip-title-form label {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    font-weight: 800;
}

.cloud-trip-title-form input {
    width: 100%;
}

.cloud-trip-title-form .primary-button {
    min-width: 142px;
    min-height: 44px;
    white-space: nowrap;
}

.cloud-trip-title-save-button[aria-busy="true"] {
    cursor: progress;
}

.cloud-trip-title-feedback {
    grid-column: 1 / -1;
    min-height: 1.25rem;
    margin: -0.35rem 0 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 850;
}

.cloud-trip-title-feedback[hidden] {
    display: none;
}

.cloud-trip-title-feedback.is-success {
    color: var(--color-teal-dark);
}

.cloud-trip-title-feedback.is-error {
    color: var(--color-danger);
}

.cloud-title-message-stack {
    display: grid;
    gap: 0.5rem;
    max-width: 42rem;
}

.cloud-title-message-stack .trip-toast {
    position: static;
    max-width: none;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.trip-overview {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    max-width: 780px;
}

.trip-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-start;
    margin-top: 0;
}

.trip-header-action {
    min-height: 40px;
}

.trip-overview__summary {
    margin: 0;
    color: var(--ink);
    font-weight: 800;
}

.trip-overview__days {
    display: grid;
    gap: 0.6rem;
}

.trip-overview__day {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.7);
    color: var(--muted);
    line-height: 1.5;
}

.trip-overview__day-text {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.trip-overview__day-mascot {
    display: block;
    width: clamp(64px, 6.5vw, 76px);
    height: clamp(64px, 6.5vw, 76px);
    flex: 0 0 auto;
    object-fit: contain;
}

.trip-overview__day-label {
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trip-overview__day-date {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.3;
}

.trip-overview__places {
    color: var(--ink);
    font-weight: 850;
    line-height: 1.38;
}

.trip-overview__meta,
.trip-overview__focus {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.trip-view-switcher {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.82);
    padding: 4px;
}

.trip-view-switcher__button {
    min-height: 42px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    padding: 0 var(--space-4);
    font-weight: 900;
}

.trip-view-switcher__button[aria-pressed="true"] {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.trip-view-switcher__button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: 2px;
}

.trip-view-helper {
    max-width: 760px;
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: var(--radius-md);
    background: rgba(239, 246, 255, 0.62);
    padding: 10px 12px;
}

.trip-view-helper p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 750;
    line-height: 1.4;
}

.trip-view-helper p[hidden] {
    display: none;
}

.full-itinerary-day-tabs {
    display: flex;
    gap: var(--space-2);
    max-width: 100%;
    margin: 0 0 var(--space-4);
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
}

.full-itinerary-day-tabs[hidden] {
    display: none;
}

.full-itinerary-day-tab {
    display: inline-grid;
    min-width: 112px;
    min-height: 48px;
    flex: 0 0 auto;
    align-content: center;
    gap: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.86);
    color: var(--color-muted);
    cursor: pointer;
    padding: 8px 14px;
    text-align: left;
}

.full-itinerary-day-tab span {
    color: var(--color-text);
    font-weight: 900;
    line-height: 1.1;
}

.full-itinerary-day-tab small {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 800;
}

.full-itinerary-day-tab[aria-selected="true"] {
    border-color: rgba(37, 99, 235, 0.42);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    box-shadow: var(--shadow-sm);
}

.full-itinerary-day-tab:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: 2px;
}

.trip-summary-board--responsive {
    --trip-board-columns: 1;
}

.trip-summary-board--responsive.trip-summary-board--days-2 {
    --trip-board-columns: 2;
}

.trip-summary-board--responsive.trip-summary-board--days-3,
.trip-summary-board--responsive.trip-summary-board--days-many {
    --trip-board-columns: 3;
}

.trip-view-enhanced[data-trip-view-mode="summary"].trip-summary-board--responsive {
    grid-template-columns: repeat(var(--trip-board-columns), minmax(0, 1fr));
    align-items: start;
}

.trip-view-enhanced[data-trip-view-mode="summary"].trip-summary-board--days-1 {
    grid-template-columns: minmax(320px, 480px);
    justify-content: start;
}

.trip-view-enhanced[data-trip-view-mode="details"].trip-summary-board {
    grid-template-columns: minmax(0, 1fr);
}

.trip-view-enhanced[data-trip-view-mode="summary"] .trip-reorder-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-3);
}

.trip-view-enhanced[data-trip-view-mode="summary"] .trip-reorder-stop {
    min-width: 0;
}

.trip-view-enhanced[data-trip-view-mode="details"] .stop-list {
    grid-template-columns: minmax(0, 1fr) !important;
}

.trip-view-enhanced[data-trip-view-mode="summary"] .trip-stop-detail {
    display: none;
}

.trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-summary {
    display: none;
}

.trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-summary__expanded {
    display: none;
}

.trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail {
    display: grid;
    grid-column: 1;
    grid-row: auto;
}

[data-trip-view-mode="summary"] .movement-block {
    display: none;
}

[data-trip-view-mode="details"] .movement-block {
    display: block;
}

.trip-view-enhanced[data-trip-view-mode="summary"] .stop-item {
    gap: var(--space-2);
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-2);
}

.trip-view-enhanced[data-trip-view-mode="details"] .stop-item {
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(14px, 2vw, 20px);
    width: 100%;
    box-sizing: border-box;
}

.trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: clamp(14px, 2vw, 22px);
    align-items: start;
    margin-top: 0;
}

.cloud-trip-stop-detail__media-column,
.cloud-trip-stop-detail__content {
    min-width: 0;
    align-self: start;
}

.cloud-trip-stop-detail__media-column {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    max-width: 300px;
}

.cloud-trip-stop-detail__media-column .stop-photo {
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch;
    overflow: hidden;
}

.cloud-trip-stop-detail__content {
    display: grid;
    gap: var(--space-2);
}

.cloud-trip-stop-detail__note {
    margin: 0;
}

.trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail > .cloud-trip-stop-detail__media-column {
    grid-column: 1;
    grid-row: 1;
}

.trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail > .cloud-trip-stop-detail__content {
    grid-column: 2;
    grid-row: 1;
}

.trip-view-enhanced[data-trip-view-mode="details"] .cloud-trip-stop-detail__media {
    margin: 0;
}

.trip-view-enhanced[data-trip-view-mode="details"] .cloud-trip-stop-detail__media.is-fallback {
    display: block;
}

.trip-view-enhanced[data-trip-view-mode="details"] .cloud-trip-stop-detail__media img {
    height: clamp(190px, 22vw, 230px);
    object-fit: cover;
}

.trip-view-enhanced[data-trip-view-mode="details"] .cloud-trip-stop-detail__media.is-fallback .stop-photo-placeholder-box {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    height: clamp(190px, 22vw, 230px);
    min-height: 0;
    overflow: hidden;
    padding: var(--space-4);
}

.trip-view-enhanced[data-trip-view-mode="details"] .cloud-trip-stop-detail__media.is-fallback .stop-photo-placeholder-mascot {
    width: min(74%, 148px) !important;
    height: min(74%, 148px) !important;
    max-width: 148px;
    max-height: 148px;
    object-fit: contain;
}

.trip-view-enhanced[data-trip-view-mode="details"] .stop-card-meta {
    margin: 0;
}

.trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail > h3 {
    font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.trip-view-enhanced[data-trip-view-mode="details"] .stop-action-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    align-items: stretch;
    width: 100%;
    margin: var(--space-2) 0 0;
}

.trip-view-enhanced[data-trip-view-mode="details"] .stop-action-row .maps-link,
.trip-view-enhanced[data-trip-view-mode="details"] .stop-action-row .stop-delete-button,
.trip-view-enhanced[data-trip-view-mode="details"] .stop-action-row .stop-edit-proxy {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.58rem 0.65rem;
    font-size: var(--text-sm);
    line-height: 1.15;
    white-space: normal;
}

.trip-view-enhanced[data-trip-view-mode="details"] .stop-action-row .stop-delete-form {
    display: flex;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.trip-day-section__toggle {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.trip-day-section__toggle strong {
    display: block;
    color: var(--color-text);
    font-size: clamp(1.05rem, 2.5vw, 1.35rem);
    line-height: 1.2;
}

.trip-day-section__count {
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.trip-day-section__chevron {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.trip-day-section.is-collapsed .trip-day-section__chevron {
    transform: rotate(-45deg);
}

.trip-day-section.is-collapsed .trip-day-section__body {
    display: none;
}

.trip-stop-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.82);
    padding: 0;
}

.trip-stop-summary__media {
    display: flex;
    width: 100%;
    min-height: 118px;
    aspect-ratio: 16 / 10;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-surface-soft);
}

.trip-stop-summary__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trip-stop-summary__media .trip-stop-summary__mascot {
    width: 82%;
    height: 82%;
    max-width: 118px;
    max-height: 118px;
    object-fit: contain;
    object-position: center;
    margin: 0;
}

.trip-stop-summary__body {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 10px 12px 8px;
}

.trip-stop-summary__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 850;
}

.trip-stop-summary__time {
    color: var(--color-primary-hover);
    font-size: var(--text-xs);
    font-weight: 900;
}

.trip-stop-summary__badge {
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: rgba(37, 99, 235, 0.08);
    color: var(--color-primary-hover);
    padding: 3px 7px;
    font-size: 0.68rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-stop-summary__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.trip-stop-summary__description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.35;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.trip-stop-summary__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 22px;
}

.trip-stop-summary__controls {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: 0 10px 10px;
}

.trip-stop-summary .stop-drag-handle,
.trip-stop-summary .drag-handle {
    position: static;
    width: 44px;
    height: 44px;
}

.trip-stop-summary__toggle {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-muted);
    cursor: pointer;
}

.trip-stop-summary__toggle span[aria-hidden="true"] {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.trip-stop-summary__toggle[aria-expanded="true"] span[aria-hidden="true"] {
    transform: rotate(225deg);
}

.trip-stop-summary__expanded {
    display: grid;
    gap: var(--space-2);
    border-top: 1px solid rgba(148, 163, 184, 0.24);
    padding: 0 var(--space-3) var(--space-3);
}

.trip-stop-summary__expanded[hidden] {
    display: none;
}

.trip-stop-summary__expanded p {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.35;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.trip-stop-summary__move-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.trip-stop-summary__move-grid form {
    margin: 0;
}

.trip-stop-summary__move-grid .stop-move-button,
.trip-stop-summary__move-grid .stop-day-move-button {
    min-height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-text);
    padding: 8px 12px;
    font-size: var(--text-xs);
    font-weight: 850;
}

.trip-stop-detail {
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.trip-empty-day {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    border: 1px dashed rgba(148, 163, 184, 0.42);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.72);
    padding: var(--space-4);
    text-align: center;
}

.trip-empty-day .state-mascot {
    width: clamp(90px, 14vw, 115px);
    max-height: 115px;
    margin: 0;
}

.trip-empty-day p {
    margin: 0;
    color: var(--color-text);
    font-weight: 900;
}

.trip-empty-day .field-help {
    color: var(--color-muted);
    font-weight: 700;
}

@media (max-width: 1023px) {
    .cloud-trip-hero__main {
        grid-template-columns: minmax(0, 1fr) minmax(116px, 144px);
    }

    .cloud-trip-hero__mascot {
        width: clamp(108px, 16vw, 128px);
        max-height: 136px;
    }

    .trip-overview__day {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .trip-overview__day-mascot {
        width: clamp(64px, 6.5vw, 76px);
        height: clamp(64px, 6.5vw, 76px);
    }

    .trip-stop-summary__media .trip-stop-summary__mascot {
        max-width: 108px;
        max-height: 108px;
    }

    .cloud-trip-hero__tools {
        grid-template-columns: minmax(0, 1fr);
    }

    .trip-view-enhanced[data-trip-view-mode="details"] .cloud-trip-stop-detail__media img,
    .trip-view-enhanced[data-trip-view-mode="details"] .cloud-trip-stop-detail__media.is-fallback .stop-photo-placeholder-box {
        height: 220px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .trip-view-enhanced[data-trip-view-mode="summary"].trip-summary-board--days-1 {
        grid-template-columns: minmax(340px, 480px);
    }

    .trip-view-enhanced[data-trip-view-mode="summary"].trip-summary-board--days-2,
    .trip-view-enhanced[data-trip-view-mode="summary"].trip-summary-board--days-3,
    .trip-view-enhanced[data-trip-view-mode="summary"].trip-summary-board--days-many {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .full-itinerary-day-tabs {
        margin-inline: -2px;
        padding-bottom: 10px;
        scroll-snap-type: x proximity;
    }

    .full-itinerary-day-tab {
        min-width: 104px;
        scroll-snap-align: start;
        padding-inline: 12px;
    }

    .trip-view-enhanced[data-trip-view-mode="summary"].trip-summary-board--responsive {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .trip-view-enhanced[data-trip-view-mode="summary"] .trip-day-section {
        width: 100%;
    }

    .trip-view-enhanced[data-trip-view-mode="summary"] .trip-day-section__toggle {
        min-height: 52px;
    }

    .trip-view-enhanced[data-trip-view-mode="summary"] .trip-day-section__body {
        min-width: 0;
    }
}

@media (max-width: 899px) {
    .trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail > .cloud-trip-stop-detail__media-column,
    .trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail > .cloud-trip-stop-detail__content {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 430px) {
    .cloud-trip-hero__main {
        grid-template-columns: minmax(0, 1fr) minmax(86px, 104px);
        gap: var(--space-3);
    }

    .cloud-trip-hero__mascot {
        width: clamp(86px, 24vw, 104px);
        max-height: 112px;
    }

    .trip-overview__day {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 0.75rem;
    }

    .trip-overview__day-mascot {
        width: 58px;
        height: 58px;
    }

    .cloud-trip-title-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .cloud-trip-title-form .primary-button {
        width: 100%;
    }

    .trip-view-switcher {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .trip-view-switcher__button {
        min-height: 44px;
        padding-inline: var(--space-2);
    }

    .trip-stop-summary {
        min-height: 0;
    }

    .trip-stop-summary__media {
        min-height: 112px;
    }

    .trip-stop-summary__media .trip-stop-summary__mascot {
        width: 82%;
        height: 82%;
        max-width: 92px;
        max-height: 92px;
    }

    .trip-stop-summary__toggle {
        width: 40px;
        height: 40px;
    }

    .trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail > .cloud-trip-stop-detail__media-column,
    .trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail > .cloud-trip-stop-detail__content {
        grid-column: 1;
        grid-row: auto;
    }

    .trip-view-enhanced[data-trip-view-mode="details"] .trip-stop-detail > .cloud-trip-stop-detail__media-column {
        max-width: none;
    }

    .trip-view-enhanced[data-trip-view-mode="details"] .stop-action-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .trip-view-enhanced[data-trip-view-mode="details"] .stop-action-row .maps-link,
    .trip-view-enhanced[data-trip-view-mode="details"] .stop-action-row .stop-delete-button,
    .trip-view-enhanced[data-trip-view-mode="details"] .stop-action-row .stop-edit-proxy {
        min-height: 44px;
        padding: 0.48rem 0.35rem;
        font-size: clamp(0.68rem, 2.7vw, 0.78rem);
    }

    .trip-view-enhanced[data-trip-view-mode="details"] .cloud-trip-stop-detail__media img,
    .trip-view-enhanced[data-trip-view-mode="details"] .cloud-trip-stop-detail__media.is-fallback .stop-photo-placeholder-box {
        height: 190px;
    }

    .trip-view-enhanced[data-trip-view-mode="details"] .cloud-trip-stop-detail__media.is-fallback .stop-photo-placeholder-mascot {
        width: min(72%, 126px) !important;
        height: min(72%, 126px) !important;
        max-width: 126px;
        max-height: 126px;
    }
}

@media print {
    .trip-view-switcher,
    .trip-stop-summary,
    .trip-empty-day {
        display: none !important;
    }

    .trip-day-section__body[hidden],
    .trip-stop-detail[hidden],
    .trip-stop-detail {
        display: block !important;
    }
}

.cloud-detail-actions,
.cloud-share-actions,
.cloud-detail-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cloud-share-actions {
    align-items: start;
}

.cloud-share-actions .auth-form,
.cloud-share-actions .secondary-link {
    margin-top: 0;
}

.cloud-detail-form {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 16px;
}

.cloud-note-preview {
    background: #fffdfb;
}

.form-helper {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.required-marker {
    color: #d13f2f;
    font-weight: 950;
}

.best-for-client-error[hidden] {
    display: none;
}

.public-share-notice {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    padding: 14px;
}

.public-share-notice h2 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
}

.public-share-notice p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.public-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.events-weather-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.events-weather-filters {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    padding: 16px;
}

.route-hero-actions,
.route-card-actions,
.route-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.route-intro-steps {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    padding: 16px;
}

.route-intro-steps h2 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

.route-intro-steps ol {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    font-weight: 750;
}

.route-intro-steps p {
    margin: 0;
    color: var(--muted);
}

.seoul-route-collections-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: clamp(18px, 4vw, 42px);
    align-items: center;
    padding: var(--space-8);
}

.seoul-route-collections-hero__content {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.seoul-route-collections-hero__content h1,
.seoul-route-collections-hero__content p {
    margin: 0;
}

.seoul-route-collections-page .route-hero-actions a {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    line-height: 1.1;
    padding: 0 20px;
    text-align: center;
    white-space: nowrap;
}

.seoul-route-collections-page .route-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    width: min(100%, 320px);
    align-items: stretch;
}

.seoul-route-hero-media {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.82);
    border-radius: var(--radius-xl);
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #eef6ff, #f7fbff);
    box-shadow: var(--shadow-md);
}

.seoul-route-hero-media > .seoul-route-hero-media__photo,
.seoul-route-hero-media[data-photo-fallback] > [data-photo-image] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: inherit;
    object-fit: cover;
    object-position: center 45%;
}

.seoul-route-hero-media__photo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center 45%;
}

.seoul-route-hero-media__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.seoul-route-hero-media__fallback .city-media__mascot {
    width: min(78%, 260px);
    height: auto;
    max-width: 260px;
    max-height: 260px;
    object-fit: contain;
}

.route-intro-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    padding: 0;
    list-style: none;
}

.route-intro-step-grid li,
.seoul-route-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    min-height: 72px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--radius-md);
    background: #ffffff;
    padding: var(--space-4);
    color: #1f2937;
    line-height: 1.35;
}

.route-intro-step-number,
.seoul-route-step__number {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.route-collection-grid {
    align-items: stretch;
}

.route-collection-card__media {
    position: relative;
    display: grid;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #eef6ff, #f7fbff);
}

.route-collection-card__media img {
    display: block;
    width: 100%;
    height: 100%;
}

.route-collection-card__media [data-photo-image] {
    object-fit: cover;
}

.route-collection-card__photo {
    object-fit: cover;
    object-position: center;
}

.route-collection-card__fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #eef6ff, #f7fbff);
}

.route-collection-card__fallback .city-media__mascot,
.route-collection-card__media .city-media__mascot {
    width: 78%;
    height: 78%;
    max-width: 190px;
    max-height: 190px;
    object-fit: contain;
    object-position: center;
}

.city-media--route-collection-card {
    --mascot-scale: 1;
}

.city-media--route-collection-hero {
    --mascot-scale: 1;
}

.route-collection-card .route-meta-grid,
.route-collection-card .route-tag-list,
.route-collection-card > p {
    margin-right: var(--space-5);
    margin-left: var(--space-5);
}

.route-collection-card .route-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-3);
    margin: auto var(--space-5) var(--space-5);
}

.route-collection-card .ready-made-route-card__action {
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    justify-content: center;
    align-items: center;
    line-height: 1.1;
    padding: 0 14px;
    text-align: center;
    white-space: nowrap;
}

.route-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.route-footer-actions__content {
    display: grid;
    gap: var(--space-1);
}

.route-footer-actions__content p {
    margin: 0;
}

.route-footer-actions__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
}

.route-footer-actions__links .ready-made-route-card__action {
    box-sizing: border-box;
    display: inline-flex;
    min-width: 180px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 20px;
    white-space: nowrap;
}

.route-collection-card {
    display: flex;
    flex-direction: column;
    align-content: start;
    gap: var(--space-4);
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 0;
}

.route-detail-hero__notice {
    max-width: 62ch;
    border-left: 3px solid rgba(37, 99, 235, 0.22);
    padding-left: var(--space-3);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.route-detail-hero .route-hero-actions {
    display: grid;
    width: min(100%, 240px);
    align-items: stretch;
}

.route-detail-hero .route-hero-actions .ready-made-route-card__action {
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    min-width: 210px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.route-detail-hero .seoul-route-hero-media.city-media--mascot {
    display: grid;
    min-height: clamp(210px, 24vw, 300px);
    place-items: center;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.route-detail-hero .seoul-route-hero-media.city-media--mascot .seoul-route-hero-media__fallback {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.route-detail-hero .seoul-route-hero-media.city-media--mascot .city-media__mascot {
    width: min(68%, 260px);
    height: auto;
    max-width: 260px;
    max-height: 260px;
    object-fit: contain;
    object-position: center;
}

.route-detail-summary-card {
    display: grid;
    gap: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.route-detail-summary-card__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
}

.route-detail-summary-card__header h2,
.route-detail-summary-card__header p,
.route-detail-summary-notes p {
    margin: 0;
}

.route-detail-reviewed {
    color: var(--color-primary);
}

.route-detail-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}

.route-detail-summary-item {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: var(--radius-md);
    background: #f8fbff;
    padding: var(--space-4);
}

.route-detail-summary-item--wide {
    grid-column: span 2;
}

.route-detail-summary-item dt,
.route-detail-stop-card__metrics dt {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.route-detail-summary-item dd,
.route-detail-stop-card__metrics dd {
    margin: 0;
    color: var(--color-text);
    font-weight: 850;
    line-height: 1.35;
}

.route-detail-summary-notes {
    display: grid;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    background: #eff6ff;
    padding: var(--space-4);
    color: #334155;
}

.route-detail-stop-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.route-detail-stop-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.route-detail-stop-card__header {
    display: grid;
    gap: var(--space-1);
}

.route-detail-stop-card__header h3,
.route-detail-stop-card__header p,
.route-detail-stop-card__description {
    margin: 0;
}

.route-detail-stop-card__media {
    position: relative;
    display: grid;
    place-items: center;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(226, 232, 240, 0.86);
    border-radius: var(--radius-md);
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #eef6ff, #f7fbff);
    margin: 0;
    padding: 0;
}

.route-detail-stop-card__media[data-photo-fallback] > [data-photo-image],
.route-detail-stop-card__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

.route-detail-stop-card__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #eef6ff, #f7fbff);
}

.route-detail-stop-card__fallback .city-media__mascot,
.route-detail-stop-card__media .city-media__mascot {
    display: block;
    width: min(76%, 190px);
    height: auto;
    max-width: 190px;
    max-height: 82%;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
    transform: none;
    transform-origin: center center;
    justify-self: center;
    align-self: center;
}

.route-detail-photo-credit {
    position: absolute;
    right: var(--space-2);
    bottom: var(--space-2);
    left: var(--space-2);
    display: inline-flex;
    width: fit-content;
    max-width: calc(100% - var(--space-4));
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.68);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    padding: 4px 8px;
}

.route-detail-photo-credit a {
    color: inherit;
    text-decoration: none;
}

.route-detail-stop-card__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}

.route-detail-stop-card__metrics div {
    display: grid;
    gap: 2px;
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    padding: var(--space-3);
}

.route-detail-map-action {
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    margin-top: auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-pill);
    line-height: 1.1;
    text-align: center;
}

.route-detail-map-action svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.route-card-header {
    display: grid;
    gap: 8px;
    padding: 0 var(--space-5);
}

.route-meta-grid {
    display: grid;
    gap: 8px;
    margin: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
}

.route-meta-grid div {
    display: grid;
    gap: 3px;
}

.route-meta-grid dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.route-meta-grid dd {
    margin: 0;
    color: var(--text);
    font-weight: 750;
}

.route-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.route-tag-list span {
    border: 1px solid #d5ddd8;
    border-radius: 999px;
    background: #f7faf8;
    color: #42534a;
    padding: 5px 9px;
    font-size: 0.82rem;
    font-weight: 850;
}

.route-helper-note {
    border-left: 4px solid var(--accent);
    background: #fff1ed;
    padding: 10px;
    font-weight: 800;
}

.best-route-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-end;
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    padding: 16px;
}

.best-route-toolbar h2 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

.sort-link-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.sort-link-list a {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--accent-dark);
    padding: 7px 10px;
    font-size: 0.88rem;
    font-weight: 850;
    text-decoration: none;
}

.sort-link-list a[aria-current="page"],
.sort-link-list a:hover,
.sort-link-list a:focus-visible {
    background: #fff1ed;
}

.best-route-section {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

.best-route-grid,
.home-best-route-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.best-route-card,
.home-best-route-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 16px;
}

.best-route-cover-image,
.home-best-route-cover-image {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 8px;
    background: #f3f4f6;
}

.best-route-cover-image {
    aspect-ratio: 4 / 3;
}

.home-best-route-cover-image {
    aspect-ratio: 16 / 9;
}

.best-route-card-header,
.home-best-route-card {
    min-width: 0;
}

.best-route-card-header h3,
.home-best-route-card h4 {
    margin: 0;
}

.best-route-card-header p,
.home-best-route-card p {
    margin: 0;
}

.best-route-rating-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    color: var(--muted);
    font-size: 0.92rem;
}

.best-route-rating-summary strong {
    color: var(--text);
}

.home-best-route-stars {
    color: #d97706;
    font-size: 1rem;
    line-height: 1;
    overflow-wrap: anywhere;
}

.best-route-rating {
    display: grid;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfb;
    padding: 10px;
}

.best-route-rating--empty {
    background: #fff;
}

.best-route-rating-label,
.best-route-rating-basis,
.best-route-rating-note {
    margin: 0;
}

.best-route-rating-label {
    color: #42534a;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.best-route-rating-row,
.best-route-compact-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    min-width: 0;
    margin: 0;
}

.best-route-rating-score {
    color: var(--ink);
    font-size: clamp(1.45rem, 4vw, 2rem);
    line-height: 1;
}

.best-route-compact-rating strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.25;
}

.best-route-compact-rating--empty {
    align-items: baseline;
    gap: 5px 8px;
}

.best-route-compact-rating--empty span {
    color: var(--muted);
    font-size: 0.88rem;
}

.best-route-stars {
    color: #d97706;
    font-size: 1rem;
    line-height: 1;
    overflow-wrap: anywhere;
}

.best-route-rating-basis {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 800;
}

.best-route-rating-note {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.best-route-recommendation-tags,
.best-route-approved-recommendations {
    display: grid;
    gap: 8px;
}

.route-best-for-summary {
    align-items: baseline;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.88rem;
    gap: 3px 6px;
    line-height: 1.35;
    margin: 0;
}

.route-best-for-summary strong {
    color: var(--text);
}

.best-route-approved-recommendations {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.route-review-details summary {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--accent-dark);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.2;
    padding: 8px 10px;
}

.route-review-details[open] summary {
    margin-bottom: 10px;
}

.best-route-approved-review {
    display: grid;
    gap: 7px;
    border: 1px solid rgba(39, 52, 67, 0.08);
    border-radius: 8px;
    background: #fbfbf8;
    padding: 11px;
}

.best-route-approved-review p {
    margin: 0;
}

.best-route-approved-review-meta {
    color: var(--accent-dark);
    font-size: 0.9rem;
    font-weight: 850;
}

.best-route-traveler-tip {
    border-left: 3px solid var(--accent);
    padding-left: 9px;
    color: var(--text);
}

.best-route-review-photo-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin-top: 2px;
}

.best-route-review-photo {
    display: grid;
    gap: 5px;
    margin: 0;
}

.best-route-review-photo img {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    display: block;
    object-fit: contain;
    background: #f8fafc;
    width: 100%;
}

.best-route-review-photo figcaption {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 0;
}

.best-route-review-status {
    background: #fbfbf8;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    padding: 12px;
}

.best-route-review-status h4,
.best-route-review-status p {
    margin: 0;
}

.best-route-meta {
    margin: 0;
}

.home-best-route-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.best-route-helper-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.best-route-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.best-route-action {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 9px 12px;
    text-align: center;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.2;
}

.best-route-action-primary {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #ffffff;
}

.best-route-action-primary:hover,
.best-route-action-primary:focus-visible {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.best-route-action-secondary {
    border: 1px solid #9ca8a1;
    background: #ffffff;
    color: #34443b;
}

.best-route-action-secondary:hover,
.best-route-action-secondary:focus-visible {
    background: #f3f6f4;
    border-color: #6d7b72;
}

.best-route-detail-page {
    display: grid;
    gap: var(--space-6);
}

.best-route-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-5);
    align-items: center;
}

.best-route-detail-hero__media {
    min-width: 0;
}

.best-route-detail-hero__image,
.best-route-detail-placeholder {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.best-route-detail-hero__image {
    display: block;
    object-fit: cover;
}

.best-route-detail-placeholder {
    display: grid;
    place-items: center;
    gap: var(--space-2);
    color: var(--muted);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.best-route-detail-hero__content {
    display: grid;
    gap: var(--space-3);
}

.best-route-detail-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    align-items: center;
    color: var(--text);
}

.best-route-detail-rating .best-route-stars {
    font-size: 1.35rem;
    line-height: 1;
}

.best-route-detail-rating strong {
    font-size: 1rem;
}

.best-route-detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.best-route-detail-meta-row span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.best-route-detail-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    align-items: stretch;
    max-width: 360px;
}

.best-route-detail-actions > div,
.best-route-detail-actions form {
    display: grid;
    gap: 0.5rem;
    align-content: start;
}

.best-route-detail-actions p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.best-route-day-grid,
.best-route-review-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.best-route-day-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.best-route-day-card__figure,
.best-route-day-card__image,
.best-route-day-card__placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

.best-route-day-card__figure {
    position: relative;
    overflow: hidden;
    margin: 0;
}

.best-route-day-card__image {
    display: block;
    height: 100%;
    object-fit: cover;
}

.best-route-day-card__figure figcaption {
    position: absolute;
    right: 0.65rem;
    bottom: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--muted);
    padding: 0.18rem 0.5rem;
    font-size: 0.74rem;
    font-weight: 800;
}

.best-route-day-card__placeholder {
    display: grid;
    gap: 0.25rem;
    place-items: center;
    color: var(--muted);
    font-weight: 800;
}

.best-route-day-card__placeholder span {
    font-size: 0.8rem;
    font-weight: 700;
}

.best-route-day-card__body {
    display: grid;
    gap: var(--space-3);
    flex: 1;
    padding: var(--space-4);
}

.best-route-stop-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.best-route-stop-list li {
    display: grid;
    gap: 0.15rem;
}

.best-route-stop-list span,
.best-route-more-stops {
    color: var(--muted);
    font-size: 0.9rem;
}

.best-route-review-highlight {
    display: grid;
    gap: var(--space-3);
}

.best-route-review-highlight__image {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.best-route-detail-final-cta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.best-route-review-panel {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.best-route-review-panel summary {
    width: fit-content;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: #42534a;
    padding: 6px 9px;
    font-size: 0.84rem;
    font-weight: 850;
}

.best-route-review-panel summary:hover,
.best-route-review-panel summary:focus-visible {
    background: #f3f6f4;
}

.best-route-review-content {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.best-route-review-content p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.best-route-review-form {
    display: grid;
    gap: 13px;
}

.best-route-recommendation-tags-fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfbf8;
    padding: 12px;
}

.best-route-recommendation-tags-fieldset legend {
    color: var(--text);
    font-weight: 850;
}

.best-route-recommendation-tags-fieldset .form-helper {
    flex-basis: 100%;
    margin: 0;
}

.checkbox-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 7px !important;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    padding: 8px 10px;
    color: var(--text);
    font-weight: 800;
}

.checkbox-chip input {
    width: auto;
}

.best-route-review-form .checkbox-chip input {
    flex: 0 0 auto;
    width: 14px;
}

.best-route-review-form small {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.best-route-tried-route-checkbox {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    display: flex !important;
    gap: 10px !important;
    padding: 11px 12px;
}

.best-route-tried-route-checkbox input {
    flex: 0 0 auto;
    height: 16px;
    margin-top: 2px;
    width: 16px !important;
}

.tried-route-copy {
    display: grid;
    gap: 3px;
    line-height: 1.35;
}

.tried-route-copy strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.tried-route-copy small {
    background: #eef3ef;
    border: 1px solid #d6e2da;
    border-radius: 999px;
    color: #4e6257;
    justify-self: start;
    padding: 2px 7px;
}

.best-route-photo-upload {
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.best-route-photo-upload h3,
.best-route-photo-upload h4 {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
}

.best-route-review-form {
    display: grid;
    gap: 13px;
}

.best-route-review-form label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 850;
}

.best-route-review-form input,
.best-route-review-form select,
.best-route-review-form textarea {
    width: 100%;
    min-width: 0;
}

.best-route-review-form .best-route-tried-route-checkbox input {
    width: 16px !important;
}

.custom-file-picker {
    position: relative;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
    align-items: center;
}

.custom-file-button {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: #42534a;
    padding: 8px 11px;
    font-size: 0.86rem;
    font-weight: 900;
}

.custom-file-name {
    min-width: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.custom-file-picker:focus-within .custom-file-button {
    outline: 3px solid rgba(31, 122, 140, 0.22);
    outline-offset: 2px;
}

.custom-file-input {
    position: absolute;
    width: 1px !important;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.review-submit-button {
    width: fit-content;
}

.best-route-submission-form {
    gap: 12px;
}

.best-route-share-page {
    display: grid;
    gap: clamp(16px, 2vw, 22px);
    margin-bottom: clamp(20px, 3vw, 32px);
}

.best-route-share-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(16px, 3vw, 32px);
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(255, 247, 237, 0.92)),
        #ffffff;
    box-shadow: var(--shadow-soft);
    padding: clamp(20px, 4vw, 34px);
}

.best-route-share-hero__copy {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.best-route-share-hero h2 {
    max-width: 720px;
    color: var(--color-text);
    font-size: clamp(2rem, 5vw, 3.75rem);
    letter-spacing: 0;
    line-height: 1.02;
    margin: 0;
}

.best-route-share-hero p {
    max-width: 620px;
    color: var(--color-muted);
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.5;
    margin: 0;
}

.best-route-share-hero__mascot {
    width: clamp(118px, 16vw, 178px);
    max-height: 210px;
    margin: 0;
    object-fit: contain;
}

.best-route-share-hero__notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.best-route-share-hero__notes span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.74);
    color: var(--color-primary-hover);
    padding: 5px 10px;
    font-size: var(--text-sm);
    font-weight: 900;
}

.best-route-share-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.best-route-share-meta span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--color-text);
    padding: 5px 10px;
    font-size: var(--text-sm);
    font-weight: 900;
}

.best-route-share-status-card,
.best-route-form-section,
.best-route-submit-empty {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.best-route-share-status-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    padding: clamp(16px, 2.5vw, 22px);
}

.best-route-share-status-card h3 {
    margin: 2px 0 0;
}

.best-route-share-status-card .field-help {
    grid-column: 1 / -1;
    margin: 0;
}

.best-route-submission-form {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.best-route-form-section {
    display: grid;
    gap: var(--space-3);
    padding: clamp(16px, 2.5vw, 22px);
}

.best-route-form-section__header {
    display: grid;
    gap: 4px;
}

.best-route-form-section__header h3 {
    margin: 0;
}

.best-route-form-section label {
    display: grid;
    gap: 7px;
}

.best-route-form-section input,
.best-route-form-section textarea {
    border-radius: var(--radius-md);
}

.best-route-submit-checklist ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--color-muted);
    line-height: 1.45;
}

.best-route-submit-cta {
    display: grid;
    gap: 8px;
    justify-items: start;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: var(--radius-lg);
    background: rgba(239, 246, 255, 0.76);
    padding: clamp(16px, 2.5vw, 22px);
}

.best-route-submit-cta .primary-button {
    min-height: 48px;
}

.best-route-submit-cta .form-helper {
    margin: 0;
}

.best-route-share-page + .saved-itinerary-section {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--radius-xl);
    background: rgba(248, 250, 252, 0.8);
    padding: clamp(16px, 3vw, 24px);
}

.best-route-preview-section {
    display: grid;
    gap: var(--space-4);
}

.best-route-preview-section .section-header {
    margin-bottom: 0;
}

.best-route-preview-section .trip-summary-board {
    gap: var(--space-4);
}

.best-route-preview-section .trip-day-section {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.86);
}

.best-route-preview-section .trip-day-section__toggle {
    cursor: default;
}

.best-route-preview-section .trip-day-section__chevron {
    display: none;
}

.best-route-preview-section .trip-stop-detail {
    grid-template-columns: minmax(168px, 220px) minmax(0, 1fr);
}

.best-route-preview-section .cloud-trip-stop-detail__media-column {
    max-width: 220px;
}

.best-route-preview-section .cloud-trip-stop-detail__media img,
.best-route-preview-section .cloud-trip-stop-detail__media.is-fallback .stop-photo-placeholder-box {
    height: clamp(132px, 18vw, 170px);
}

.best-route-preview-section .cloud-trip-stop-detail__content {
    align-content: start;
}

.best-route-preview-section .route-connector,
.best-route-preview-section .stop-action-row,
.best-route-preview-section .stop-edit-details,
.best-route-preview-section .stop-move-options,
.best-route-preview-section .personal-note {
    display: none !important;
}

@media (max-width: 767px) {
    .best-route-share-hero {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        padding: 18px;
    }

    .best-route-share-hero h2 {
        font-size: clamp(2rem, 11vw, 2.75rem);
    }

    .best-route-share-hero__mascot {
        justify-self: center;
        width: clamp(112px, 38vw, 150px);
        max-height: 170px;
    }

    .best-route-share-status-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .best-route-submit-cta,
    .best-route-submit-cta .primary-button {
        width: 100%;
    }

    .best-route-preview-section .trip-stop-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .best-route-preview-section .cloud-trip-stop-detail__media-column {
        max-width: none;
    }
}

.half-star-rating-fieldset {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
}

.half-star-rating-fieldset legend {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 900;
}

.half-star-no-rating {
    display: inline-flex;
    width: fit-content;
    gap: 6px;
    align-items: center;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 850;
}

.half-star-rating-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.half-star-rating-option {
    display: inline-flex;
    min-width: 64px;
    gap: 4px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    padding: 7px 8px;
    color: var(--muted);
    cursor: pointer;
}

.half-star-rating-option input,
.half-star-no-rating input {
    flex: 0 0 auto;
}

.half-star-rating-option:has(input:checked),
.half-star-no-rating:has(input:checked) {
    border-color: #d97706;
    background: #fff7ed;
    color: var(--ink);
    outline: 2px solid #fed7aa;
}

.half-star-rating-option:focus-within,
.half-star-no-rating:focus-within {
    outline: 3px solid rgba(216, 119, 6, 0.28);
    outline-offset: 2px;
}

.half-star-rating-option-visual {
    color: #d97706;
    font-size: 1.05rem;
    line-height: 1;
}

.half-star-left .half-star-rating-option-visual {
    display: inline-block;
    width: 0.55em;
    overflow: hidden;
}

.half-star-rating-option-value,
.half-star-rating-output {
    font-size: 0.86rem;
    font-weight: 850;
}

.half-star-rating-output {
    margin: 0;
    color: var(--accent-dark);
}

.compact-star-rating {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
}

.compact-star-rating legend {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 900;
}

.compact-star-fallback {
    display: grid;
    gap: 6px;
}

.compact-star-fallback select {
    width: min(100%, 220px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    padding: 9px 10px;
    font: inherit;
}

.compact-star-rating.is-enhanced .compact-star-fallback {
    display: none;
}

.compact-star-control {
    --rating-fill: 0%;
    position: relative;
    display: inline-grid;
    width: 9.25rem;
    max-width: 100%;
    isolation: isolate;
}

.compact-star-visual {
    position: relative;
    z-index: 0;
    display: block;
    color: #d97706;
    font-size: 1.78rem;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.compact-star-empty {
    color: #d6d3d1;
}

.compact-star-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--rating-fill);
    overflow: hidden;
    white-space: nowrap;
    color: #d97706;
}

.compact-star-half {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 10%;
    height: 100%;
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.compact-star-half:nth-of-type(1) {
    left: 0;
}

.compact-star-half:nth-of-type(2) {
    left: 10%;
}

.compact-star-half:nth-of-type(3) {
    left: 20%;
}

.compact-star-half:nth-of-type(4) {
    left: 30%;
}

.compact-star-half:nth-of-type(5) {
    left: 40%;
}

.compact-star-half:nth-of-type(6) {
    left: 50%;
}

.compact-star-half:nth-of-type(7) {
    left: 60%;
}

.compact-star-half:nth-of-type(8) {
    left: 70%;
}

.compact-star-half:nth-of-type(9) {
    left: 80%;
}

.compact-star-half:nth-of-type(10) {
    left: 90%;
}

.compact-star-half:focus-visible {
    outline: 3px solid rgba(31, 122, 140, 0.28);
    outline-offset: 3px;
    border-radius: 4px;
}

.compact-star-output {
    margin: 0;
    color: #42534a;
    font-size: 0.9rem;
    font-weight: 850;
}

.best-route-tag-fieldset {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
}

.best-route-tag-fieldset legend {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 900;
}

.best-route-tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.best-route-tag-options label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    padding: 7px 10px;
    color: var(--accent-dark);
    font-size: 0.86rem;
    font-weight: 850;
}

.empty-state-card {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    padding: 16px;
}

.empty-state-card h3,
.empty-state-card p {
    margin: 0;
}

.empty-state-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    font-size: 1.15rem;
    font-weight: 950;
}

.best-routes-empty-state {
    position: relative;
    overflow: hidden;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: clamp(10px, 1.8vw, 18px);
    padding: clamp(18px, 2.5vw, 28px);
    text-align: center;
    border-color: rgba(37, 99, 235, 0.18);
    background:
        radial-gradient(circle at 82% 18%, rgba(37, 99, 235, 0.10), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #eef7ff 58%, #fff8ed 100%);
}

.best-routes-empty-state__copy {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.best-routes-empty-state__eyebrow {
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.best-routes-empty-state__copy h3 {
    max-width: 22ch;
    font-size: clamp(1.55rem, 2.5vw, 2.2rem);
    line-height: 1.08;
}

.best-routes-empty-state__lead {
    max-width: 62ch;
    margin: 0 auto;
    color: #334155;
    font-size: clamp(0.94rem, 1.2vw, 1.05rem);
    line-height: 1.45;
}

.best-routes-empty-state__lead strong {
    display: block;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
}

.best-routes-empty-state__media {
    display: grid;
    place-items: center;
    align-content: center;
    width: 100%;
    max-width: 900px;
    min-height: 0;
}

.best-routes-empty-state__media img {
    display: block;
    width: min(100%, 880px);
    max-height: 330px;
    object-fit: contain;
    filter: drop-shadow(0 20px 28px rgba(15, 23, 42, 0.12));
}

.best-routes-empty-state__actions {
    justify-content: center;
    align-items: center;
    width: 100%;
}

.best-routes-empty-state__actions .primary-button,
.best-routes-empty-state__actions .secondary-link {
    width: auto;
    min-width: 180px;
}

@media (max-width: 720px) {
    .best-routes-empty-state {
        padding: 20px 14px;
        gap: 12px;
    }

    .best-routes-empty-state__media {
        max-width: 100%;
    }

    .best-routes-empty-state__copy h3 {
        max-width: 20ch;
        font-size: clamp(1.55rem, 9vw, 2.1rem);
    }

    .best-routes-empty-state__actions .primary-button,
    .best-routes-empty-state__actions .secondary-link {
        width: 100%;
    }

    .best-routes-empty-state__media img {
        max-height: 250px;
    }
}

.state-mascot {
    display: block;
    width: clamp(120px, 28vw, 220px);
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    margin-inline: auto;
}

.state-mascot[hidden] {
    display: none !important;
}

.state-mascot--error {
    width: clamp(130px, 30vw, 230px);
}

.state-mascot--empty,
.state-mascot--weather {
    width: clamp(118px, 26vw, 205px);
}

.state-mascot--edit,
.state-mascot--share,
.state-mascot--success {
    width: clamp(96px, 16vw, 130px);
    max-height: 160px;
}

.cloud-detail-meta + .state-mascot--edit {
    margin-top: 8px;
    margin-bottom: 8px;
}

.cloud-trip-hero .cloud-trip-hero__mascot {
    width: clamp(128px, 13vw, 148px);
    max-height: 148px;
    margin: 0;
}

@media (max-width: 1023px) {
    .cloud-trip-hero .cloud-trip-hero__mascot {
        width: clamp(108px, 16vw, 128px);
        max-height: 136px;
    }
}

@media (max-width: 430px) {
    .cloud-trip-hero .cloud-trip-hero__mascot {
        width: clamp(86px, 24vw, 104px);
        max-height: 112px;
    }
}

.best-route-submit-panel .state-mascot--share,
.best-route-submit-panel .state-mascot--success {
    margin-top: 6px;
    margin-bottom: 6px;
}

.cloud-trip-save-summary .trip-save-status:not(.is-saved) ~ .state-mascot--success {
    display: none;
}

.error-state-page {
    display: grid;
    min-height: min(620px, calc(100vh - 180px));
    align-items: center;
}

.error-state-card {
    max-width: 620px;
}

.error-state-card h1 {
    margin: 0;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    line-height: 1.08;
}

.mobile-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.travel-guide-hero-actions,
.travel-guide-card-actions,
.travel-guide-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.travel-guide-jump-section {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    padding: 16px;
}

.travel-guide-jump-section h2 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

.travel-guide-jump-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.travel-guide-jump-list a {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--accent-dark);
    padding: 7px 10px;
    font-size: 0.88rem;
    font-weight: 850;
    text-decoration: none;
}

.travel-guide-jump-list a:hover,
.travel-guide-jump-list a:focus-visible {
    background: #fff1ed;
}

.travel-guide-category {
    scroll-margin-top: 90px;
}

.travel-guide-card {
    align-content: start;
}

.travel-guide-card h3 {
    font-size: 1.12rem;
}

.guide-action-card-grid,
.guide-compact-card-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

.guide-action-card-grid:empty,
.guide-compact-card-grid:empty {
    display: none;
}

.guide-action-card-grid,
.guide-compact-card-grid {
    align-items: start;
}

.guide-action-card {
    gap: 14px;
    padding: 20px;
}

.guide-action-card h3 {
    font-size: 1.25rem;
}

.guide-compact-card {
    gap: 8px;
    padding: 14px;
    box-shadow: none;
}

.guide-compact-card h3 {
    font-size: 1.03rem;
}

.guide-compact-card p {
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.45;
}

.guide-action-section {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(39, 52, 67, 0.08);
}

.guide-action-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.guide-action-section p {
    margin: 0;
}

.guide-action-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 1.25rem;
    color: var(--muted);
}

.guide-action-list li {
    line-height: 1.5;
}

.guide-useful-phrase {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(227, 71, 47, 0.16);
    border-radius: 8px;
    background: #fff7f4;
    padding: 10px;
}

.guide-useful-phrase p:first-child {
    color: var(--text);
    font-weight: 850;
}

.guide-useful-phrase p[lang="ko"] {
    color: var(--accent-dark);
    font-weight: 900;
}

.guide-related-tools,
.guide-official-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.guide-related-tools .secondary-link {
    width: auto;
    min-height: 40px;
    margin-top: 0;
    padding: 0 11px;
    font-size: 0.9rem;
}

.guide-official-info a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid rgba(227, 71, 47, 0.18);
    border-radius: 999px;
    background: #fff7f4;
    color: var(--accent-dark);
    padding: 0 10px;
    font-size: 0.9rem;
    font-weight: 850;
    text-decoration: none;
}

.guide-official-info a:hover,
.guide-official-info a:focus-visible {
    background: #fff1ed;
    text-decoration: underline;
}

.guide-hub-page {
    display: grid;
    gap: clamp(20px, 3.2vw, 34px);
    font-size: 1rem;
}

.guide-hub-section,
.guide-topic-section {
    scroll-margin-top: 104px;
}

.guide-essential-grid,
.guide-topic-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
}

.guide-hub-card {
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.guide-hub-card__link {
    display: grid;
    grid-template-columns: minmax(94px, 108px) minmax(0, 1fr);
    gap: 16px;
    height: 100%;
    color: inherit;
    text-decoration: none;
    padding: 16px;
}

.guide-hub-card__link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: -3px;
}

.guide-hub-card__visual {
    display: grid;
    width: 100%;
    min-width: 94px;
    max-width: 108px;
    aspect-ratio: 1 / 1;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 12px;
    background: transparent;
}

.guide-hub-card__visual img {
    display: block;
    width: 92%;
    height: 92%;
    object-fit: contain;
    object-position: center center;
    transform: scale(1.04);
    transform-origin: center;
    transition: transform 180ms ease;
}

.guide-hub-card__body {
    display: grid;
    min-width: 0;
    gap: 8px;
    grid-template-rows: auto auto 1fr;
}

.guide-hub-card__eyebrow {
    color: var(--color-primary-hover);
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.guide-hub-card h3 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--color-navy);
    font-size: clamp(1.06rem, 1.25vw, 1.16rem);
    line-height: 1.28;
}

.guide-hub-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #4b5563;
    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1.44;
}

.guide-hub-card__footer {
    display: none;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin-top: 4px;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.15;
}

.guide-hub-card__meta {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    background: #f1f5f9;
    padding: 5px 9px;
}

.guide-hub-card__arrow {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 10px;
    background: #f8fbff;
    color: var(--color-primary-hover);
    font-size: 0.92rem;
    font-weight: 950;
    padding: 8px 12px;
    transition: transform 180ms ease;
}

.guide-hub-card--blue .guide-hub-card__visual {
    background: transparent;
}

.guide-hub-card--mint .guide-hub-card__visual {
    background: transparent;
}

.guide-hub-card--peach .guide-hub-card__visual {
    background: transparent;
}

.guide-hub-card--lavender .guide-hub-card__visual {
    background: transparent;
}

.guide-hub-card--rose .guide-hub-card__visual {
    background: transparent;
}

.guide-hub-card--sky .guide-hub-card__visual {
    background: transparent;
}

.guide-topic-nav-section {
    display: grid;
    gap: 12px;
}

.guide-topic-nav-section h2 {
    margin: 0;
    color: var(--color-navy);
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.15;
}

.guide-topic-nav-section p:not(.section-label) {
    max-width: 720px;
    margin: 6px 0 0;
    color: #4b5563;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.55;
}

.guide-topic-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.guide-topic-nav a {
    display: inline-flex;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--color-navy);
    font-size: 0.9rem;
    font-weight: 900;
    padding: 8px 12px;
    text-decoration: none;
}

.guide-topic-nav a:hover,
.guide-topic-nav a:focus-visible {
    border-color: rgba(37, 99, 235, 0.3);
    background: #eff6ff;
}

.guide-topic-section {
    border-color: rgba(148, 163, 184, 0.3);
}

.guide-topic-brief {
    display: grid;
    grid-template-areas: "visual content";
    grid-template-columns: minmax(240px, 0.92fr) minmax(280px, 1fr);
    gap: clamp(18px, 3vw, 30px);
    align-items: center;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.88), rgba(255, 255, 255, 0.96));
    padding: clamp(18px, 3vw, 28px);
}

.guide-topic-brief__visual {
    display: grid;
    grid-area: visual;
    width: 100%;
    min-height: clamp(210px, 30vw, 330px);
    aspect-ratio: 4 / 3;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: transparent;
}

.guide-topic-brief__visual img {
    display: block;
    width: min(88%, 420px);
    height: 88%;
    object-fit: contain;
    object-position: center;
}

.guide-topic-brief__body {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.guide-topic-brief__content {
    display: grid;
    grid-area: content;
    min-width: 0;
    max-width: 620px;
    align-content: center;
    gap: 14px;
}

.guide-topic-brief__body h3 {
    margin: 0;
    color: var(--color-navy);
    font-size: clamp(1.1rem, 2vw, 1.34rem);
    line-height: 1.2;
}

.guide-topic-brief__body ul {
    display: grid;
    gap: 9px;
    margin: 0;
    color: #334155;
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.42;
    list-style: none;
    padding-left: 0;
}

.guide-topic-brief__body li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    padding: 9px 11px;
}

.guide-topic-brief__body li::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, #ffffff 0 34%, transparent 36%),
        linear-gradient(135deg, #3b82f6, #0f766e);
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.16);
}

.guide-topic-brief__resources {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
}

.guide-topic-brief__resources a {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 76px;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 14px;
    background: #ffffff;
    color: var(--color-navy);
    font-weight: 950;
    line-height: 1.15;
    padding: 9px 12px 9px 9px;
    text-decoration: none;
}

.guide-topic-brief__resources a::after {
    content: none;
}

.guide-topic-brief__resource-visual {
    display: grid;
    width: 64px;
    aspect-ratio: 1 / 1;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    background: transparent;
}

.guide-topic-brief__resource-visual img {
    display: block;
    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: center;
}

.guide-topic-brief__resource-copy {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.guide-topic-brief__resource-copy > span {
    max-width: 26ch;
    font-size: 0.98rem;
    line-height: 1.15;
}

.guide-topic-brief__resources a:hover,
.guide-topic-brief__resources a:focus-visible {
    border-color: rgba(37, 99, 235, 0.38);
    background: #eff6ff;
}

.guide-topic-brief__resource-copy strong {
    color: var(--color-primary-hover);
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1.1;
}

.guide-topic-brief__resources small {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
}

.guide-hub-section .route-section-header p:not(.section-label),
.guide-topic-section .route-section-header p:not(.section-label) {
    max-width: 760px;
    color: #4b5563;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.55;
}

.guide-hub-section .route-section-header h2,
.guide-topic-section .route-section-header h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    line-height: 1.25;
}

.guide-topic-more {
    margin-top: 14px;
}

.guide-topic-more summary {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--color-primary-hover);
    cursor: pointer;
    font-weight: 950;
    padding: 8px 14px;
}

.guide-topic-more__open {
    display: none;
}

.guide-topic-more[open] .guide-topic-more__closed {
    display: none;
}

.guide-topic-more[open] .guide-topic-more__open {
    display: inline;
}

.guide-topic-more summary:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 3px;
}

.guide-topic-grid--more {
    margin-top: 18px;
}

@media (hover: hover) and (pointer: fine) {
    .guide-hub-card:hover {
        border-color: rgba(37, 99, 235, 0.3);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
        transform: translateY(-3px);
    }

    .guide-hub-card:hover .guide-hub-card__visual img {
        transform: scale(1.12);
    }

    .guide-hub-card:hover .guide-hub-card__arrow {
        transform: translateX(3px);
    }
}

@media (min-width: 768px) {
    .guide-essential-grid,
    .guide-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1180px) {
    .guide-essential-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .guide-topic-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .guide-topic-brief {
        grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1fr);
    }

    .guide-topic-brief__resources {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .guide-hub-card__link {
        grid-template-columns: minmax(78px, 0.32fr) minmax(0, 1fr);
        padding: 14px;
    }

    .guide-hub-card__visual {
        min-width: 78px;
    }

    .guide-hub-card__footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .guide-hub-card__arrow {
        width: 100%;
    }

    .guide-topic-brief {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "visual"
            "content";
    }

    .guide-topic-brief__visual {
        width: 100%;
        min-height: 190px;
    }

    .guide-topic-brief__resources {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-hub-card,
    .guide-hub-card__visual img,
    .guide-hub-card__arrow {
        transition: none;
    }

    .guide-hub-card:hover,
    .guide-hub-card:hover .guide-hub-card__visual img,
    .guide-hub-card:hover .guide-hub-card__arrow {
        transform: none;
    }
}

.route-section {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.route-section-header h2 {
    margin-bottom: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.guide-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
    align-items: center;
    gap: clamp(22px, 4vw, 48px);
    overflow: hidden;
    border: 1px solid rgba(191, 219, 254, 0.86);
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 251, 255, 0.86) 58%, rgba(239, 246, 255, 0.72) 100%),
        radial-gradient(circle at 88% 18%, rgba(14, 165, 233, 0.16), transparent 34%),
        var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.guide-detail-hero__copy {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.guide-detail-hero__visual {
    display: grid;
    min-height: 220px;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.guide-detail-hero__visual img {
    display: block;
    width: min(100%, 360px);
    height: auto;
    max-height: 340px;
    object-fit: contain;
}

.guide-detail-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.guide-detail-card {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 14px 18px;
    min-height: 100%;
    border-color: rgba(191, 219, 254, 0.78);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.guide-detail-card__visual,
.guide-detail-related-card__visual {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(191, 219, 254, 0.72);
    border-radius: 12px;
    background: #eff6ff;
}

.guide-detail-card__visual {
    grid-column: 1;
    grid-row: 1;
    width: 112px;
    height: 112px;
}

.guide-detail-card__visual img,
.guide-detail-related-card__visual img {
    display: block;
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.guide-detail-card__body {
    display: contents;
    min-width: 0;
}

.guide-detail-card__body h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.22;
}

.guide-detail-card__body ul {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    padding-left: 18px;
    font-size: 0.98rem;
    line-height: 1.58;
}

.guide-detail-card__body p,
.guide-detail-card__body .maps-link {
    grid-column: 1 / -1;
    margin: 0;
}

.guide-detail-card__body p {
    color: #334155;
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.55;
}

.guide-detail-card__body .maps-link {
    min-height: 44px;
    justify-content: center;
}

.guide-detail-card__body li + li {
    margin-top: 6px;
}

.guide-detail-card-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.airport-to-hotel-page .guide-detail-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.medical-provider-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: stretch;
}

.medical-provider-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 16px;
    border-color: rgba(191, 219, 254, 0.78);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.medical-provider-card__header {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.medical-provider-card__visual {
    display: grid;
    width: 108px;
    height: 108px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(191, 219, 254, 0.78);
    border-radius: 14px;
    background: #eff6ff;
}

.medical-provider-card__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.medical-provider-card__title {
    min-width: 0;
}

.medical-provider-card__title p {
    margin: 0 0 6px;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.medical-provider-card__title h3 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.22;
}

.medical-provider-card__facts {
    display: grid;
    gap: 10px;
    margin: 0;
}

.medical-provider-card__facts div {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.92);
}

.medical-provider-card__facts dt {
    color: #475569;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.medical-provider-card__facts dd {
    margin: 0;
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1.45;
}

.medical-provider-card__actions {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.medical-provider-card__actions .maps-link {
    min-height: 44px;
    justify-content: center;
}

.guide-detail-note-card {
    min-height: 100%;
    border-color: rgba(191, 219, 254, 0.78);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.guide-detail-note-card p {
    margin: 0;
    color: #334155;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.5;
}

.guide-detail-feature-card {
    margin-bottom: 18px;
}

.guide-detail-phrase-card {
    display: block;
}

.guide-detail-phrase-card .guide-detail-card__body {
    display: block;
}

.guide-detail-phrase-card h3 {
    margin: 0 0 12px;
    font-size: 1.08rem;
}

.guide-detail-phrase-card p {
    margin: 0;
    color: #334155;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.55;
}

.guide-detail-phrase-card p[lang="ko"] {
    color: #0f172a;
    font-size: 1.22rem;
    font-weight: 900;
}

.guide-detail-phrase-card p + p {
    margin-top: 8px;
}

.useful-korean-category-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-color: rgba(191, 219, 254, 0.78);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.useful-korean-category-card__visual {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border: 1px solid rgba(191, 219, 254, 0.72);
    border-radius: 12px;
    background: #eff6ff;
}

.useful-korean-category-card__visual img {
    display: block;
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.useful-korean-category-card__body h3 {
    margin: 0 0 6px;
    font-size: 1.16rem;
    line-height: 1.25;
}

.useful-korean-category-card__body p {
    margin: 0;
    color: #334155;
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.5;
}

.useful-korean-phrase-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.useful-korean-phrase-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 18px;
    border-color: rgba(191, 219, 254, 0.78);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.useful-korean-phrase-card h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.08rem;
    line-height: 1.3;
}

.useful-korean-phrase-card__korean {
    margin: 0;
    color: #0f172a;
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.35;
}

.useful-korean-phrase-card__romanization {
    margin: 0;
    color: #334155;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.35;
}

.useful-korean-phrase-card__note {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .useful-korean-category-card {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .useful-korean-category-card__visual {
        width: 72px;
        height: 72px;
    }

    .useful-korean-category-card__body h3 {
        font-size: 1.05rem;
    }

    .useful-korean-category-card__body p {
        font-size: 0.92rem;
    }

    .useful-korean-phrase-grid {
        grid-template-columns: 1fr;
    }

    .useful-korean-phrase-card {
        gap: 12px;
        padding: 16px;
    }

    .useful-korean-phrase-card__korean {
        font-size: 1.18rem;
    }
}

.guide-detail-related-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.guide-detail-related-card {
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 118px;
    border-color: rgba(191, 219, 254, 0.78);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.guide-detail-related-card:hover,
.guide-detail-related-card:focus-visible {
    border-color: rgba(37, 99, 235, 0.58);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.guide-detail-related-card__visual {
    width: 86px;
    height: 86px;
}

.guide-detail-related-card__body {
    display: grid;
    min-width: 0;
}

.guide-detail-related-card__body h3 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.22;
}

.guide-detail-related-card__body p {
    margin: 6px 0 0;
    color: #334155;
    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1.45;
}

.guide-detail-related-card__body .maps-link {
    margin-top: 10px;
    min-height: 44px;
    justify-content: center;
}

.guide-detail-area-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.guide-detail-area-card {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    min-height: 100%;
    border-color: rgba(191, 219, 254, 0.78);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.guide-detail-area-card__visual {
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(191, 219, 254, 0.72);
    border-radius: 12px;
    background: #eff6ff;
}

.guide-detail-area-card__visual img {
    display: block;
    width: 84%;
    height: 84%;
    object-fit: contain;
}

.guide-detail-area-card__body {
    display: contents;
    min-width: 0;
}

.guide-detail-area-card__body h3 {
    grid-column: 2;
    align-self: center;
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.25;
}

.guide-detail-area-card__body p {
    grid-column: 1 / -1;
    margin: 0;
    color: #334155;
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.5;
}

.guide-detail-area-card__facts {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    margin: 0;
}

.guide-detail-area-card__facts div {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(191, 219, 254, 0.65);
    border-radius: 10px;
    background: rgba(248, 251, 255, 0.78);
}

.guide-detail-area-card__facts dt {
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 900;
}

.guide-detail-area-card__facts dd {
    margin: 0;
    color: #334155;
    font-weight: 750;
    line-height: 1.45;
}

.guide-detail-area-card .maps-link {
    grid-column: 1 / -1;
    min-height: 44px;
    justify-content: center;
}

.seoul-beauty-category-list {
    display: grid;
    gap: 24px;
}

.seoul-beauty-category {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(191, 219, 254, 0.72);
    border-radius: 16px;
    background: rgba(248, 251, 255, 0.72);
}

.seoul-beauty-category__header {
    display: grid;
    max-width: 820px;
    gap: 5px;
}

.seoul-beauty-category__header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.28rem;
    line-height: 1.25;
}

.seoul-beauty-category__header p:not(.section-label) {
    margin: 0;
    color: #475569;
    font-weight: 650;
    line-height: 1.5;
}

.route-grid.seoul-beauty-area-grid,
.guide-detail-area-grid.seoul-beauty-area-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.seoul-beauty-area-card {
    align-items: start;
    grid-template-columns: minmax(360px, 0.48fr) minmax(0, 1fr);
    gap: 20px 30px;
    padding: 22px;
    border-color: rgba(147, 197, 253, 0.58);
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.seoul-beauty-area-card__visual {
    width: 100%;
    min-height: 330px;
    aspect-ratio: 4 / 3;
    background: #eef7ff;
}

.seoul-beauty-area-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.seoul-beauty-area-card__summary {
    display: grid;
    align-self: stretch;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding-top: 8px;
}

.seoul-beauty-area-card__summary h3 {
    grid-column: auto;
    color: #0f172a;
    font-size: clamp(1.5rem, 1.75vw, 1.88rem);
    line-height: 1.12;
}

.seoul-beauty-area-card__summary .stop-time {
    grid-column: auto;
    line-height: 1.15;
    color: #0b5cff;
    font-size: 0.82rem;
    letter-spacing: 0.055em;
}

.seoul-beauty-area-card__description {
    margin: 0;
    color: #475569;
    font-weight: 400;
    line-height: 1.62;
    font-size: clamp(1.02rem, 1.06vw, 1.12rem);
    max-width: 62ch;
}

.seoul-beauty-area-card__facts {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 6px 0 0;
    border-top: 0;
    border-bottom: 0;
}

.seoul-beauty-area-card__facts div {
    grid-template-columns: minmax(150px, 0.24fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.seoul-beauty-area-card__facts div + div {
    border-top: 0;
}

.seoul-beauty-area-card__facts dt,
.seoul-beauty-area-card__facts dd {
    line-height: 1.5;
    font-size: 0.94rem;
}

.seoul-beauty-area-card__facts dt {
    color: #6b7280;
    font-weight: 600;
}

.seoul-beauty-area-card__facts dd {
    color: #334155;
    font-weight: 400;
}

.seoul-beauty-area-card .maps-link {
    grid-column: 1 / -1;
}

.seoul-beauty-route-connector {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    max-width: none;
    margin: 0 18px 2px;
    padding: 10px 2px 12px;
    border: 0;
    border-top: 1px solid rgba(191, 219, 254, 0.82);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 0;
    background: transparent;
    color: #334155;
}

.seoul-beauty-route-connector__label {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #0b5cff;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.seoul-beauty-route-connector__line {
    display: none;
}

.seoul-beauty-route-connector p {
    margin: 0;
    color: #334155;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .seoul-beauty-area-card {
        grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
    }

    .seoul-beauty-area-card__visual {
        min-height: 230px;
    }

    .seoul-beauty-area-card__facts div {
        grid-template-columns: minmax(130px, 0.32fr) minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .guide-detail-area-grid {
        grid-template-columns: 1fr;
    }

    .guide-detail-area-card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .guide-detail-area-card__visual {
        width: 82px;
        height: 82px;
    }

    .guide-detail-area-card__facts,
    .guide-detail-area-card .maps-link {
        grid-column: 1 / -1;
    }

    .seoul-beauty-category {
        padding: 14px;
    }

    .route-grid.seoul-beauty-area-grid,
    .guide-detail-area-grid.seoul-beauty-area-grid {
        grid-template-columns: 1fr;
    }

    .seoul-beauty-area-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }

    .seoul-beauty-area-card__visual {
        width: 100%;
        min-height: 210px;
        aspect-ratio: 16 / 10;
    }

    .seoul-beauty-area-card__summary {
        align-self: start;
        align-content: start;
    }

    .seoul-beauty-area-card__description {
        font-size: 0.94rem;
    }

    .seoul-beauty-area-card__facts,
    .seoul-beauty-area-card .maps-link {
        grid-column: 1 / -1;
    }

    .seoul-beauty-area-card__facts {
        grid-template-columns: 1fr;
    }

    .seoul-beauty-area-card__facts div {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 9px 0;
    }

    .seoul-beauty-route-connector {
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 0;
        border-radius: 14px;
    }

    .seoul-beauty-route-connector__line {
        display: none;
    }

    .medical-provider-grid {
        grid-template-columns: 1fr;
    }

    .medical-provider-card {
        padding: 14px;
    }

    .medical-provider-card__header {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 12px;
    }

    .medical-provider-card__visual {
        width: 86px;
        height: 86px;
    }

    .medical-provider-card__title h3 {
        font-size: 1.05rem;
    }

    .medical-provider-card__facts dd {
        font-size: 0.9rem;
    }
}

.route-list,
.route-grid {
    display: grid;
    gap: 14px;
}

.route-step,
.place-card {
    display: grid;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 18px;
}

.route-step h3,
.place-card h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.18rem;
    line-height: 1.25;
}

.saved-itinerary-section {
    position: relative;
    left: 50%;
    width: min(calc(100vw - 32px), 1180px);
    max-width: none;
    margin: 24px 0 0;
    transform: translateX(-50%);
}

.route-grid.saved-itinerary-grid {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 20px;
    width: 100%;
    align-items: start;
}

.saved-itinerary-grid > * {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.saved-itinerary-grid .place-card,
.saved-itinerary-grid .route-day,
.saved-itinerary-grid .day-card,
.saved-itinerary-grid .trip-day,
.saved-itinerary-grid .route-card {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.saved-itinerary-grid .trip-day-stop,
.saved-itinerary-grid .stop-card,
.saved-itinerary-grid .route-stop {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.route-step p,
.place-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.kpop-route-page .route-list {
    gap: 16px;
}

.kpop-route-page .route-section-header {
    max-width: 860px;
}

.kpop-route-page .route-section-header p:not(.section-label) {
    color: #475569;
    font-size: 1rem;
    line-height: 1.55;
}

.kpop-route-plan {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 4px 0 22px;
}

.kpop-route-plan a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 16px;
    min-height: 116px;
    padding: 18px;
    border: 1px solid rgba(147, 197, 253, 0.78);
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.kpop-route-plan a:hover,
.kpop-route-plan a:focus-visible {
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.kpop-route-plan__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kpop-route-plan__body {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.kpop-route-plan h3 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.06rem, 1.2vw, 1.28rem);
    line-height: 1.22;
}

.kpop-route-plan p {
    margin: 0;
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.48;
}

.kpop-route-plan__hint {
    grid-column: 2;
    color: #64748b;
    font-size: 0.94rem;
    line-height: 1.45;
}

.kpop-route-page .route-list {
    scroll-margin-top: 96px;
}

.kpop-route-page .kpop-route-step {
    display: grid;
    grid-template-columns: 168px minmax(210px, 0.58fr) minmax(360px, 1fr);
    align-items: center;
    gap: 24px;
    min-height: 190px;
    padding: 22px;
    border-color: rgba(147, 197, 253, 0.72);
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.kpop-route-transfer {
    display: grid;
    grid-template-columns: minmax(118px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: min(88%, 860px);
    margin: 0 auto;
    padding: 14px 18px;
    border: 1px solid rgba(147, 197, 253, 0.7);
    border-radius: 999px;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.06);
}

.kpop-route-transfer span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: #dbeafe;
    color: #0b5cff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kpop-route-transfer h3 {
    margin: 0 0 2px;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.28;
}

.kpop-route-transfer p {
    margin: 0;
    color: #475569;
    font-size: 0.94rem;
    line-height: 1.55;
}

.kpop-route-transfer strong {
    color: #1d4ed8;
    font-weight: 700;
}

.kpop-route-step__media,
.kpop-place-card__media {
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 8px;
    background: #edf6ff;
}

.kpop-route-page .kpop-route-step__media {
    width: 168px;
    aspect-ratio: 1;
    align-self: center;
    border-radius: 12px;
}

.kpop-route-step__media img,
.kpop-place-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.kpop-route-page .kpop-route-step__body,
.kpop-place-card__body {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.kpop-route-page .kpop-route-step__body .stop-time {
    width: fit-content;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 5px 10px;
    font-size: 0.74rem;
    line-height: 1;
}

.kpop-route-page .kpop-route-step__body h3 {
    color: #0f172a;
    font-size: clamp(1.2rem, 1.35vw, 1.48rem);
    line-height: 1.18;
}

.kpop-route-page .kpop-route-step__body p:not(.stop-time) {
    color: #475569;
    font-size: 1rem;
    font-weight: 600;
}

.kpop-route-step__details {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid rgba(191, 219, 254, 0.78);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.kpop-route-step__details dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.kpop-route-step__details div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.kpop-route-step__details dt {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kpop-route-step__details dd {
    margin: 0;
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.3;
}

.kpop-route-step__phase {
    width: fit-content;
    margin: 0;
    color: #0b5cff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kpop-route-step__details p {
    margin: 0;
    color: #475569;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.kpop-place-card {
    align-content: start;
    grid-template-rows: auto 1fr;
    padding: 14px;
}

.kpop-place-card__media {
    aspect-ratio: 16 / 10;
}

.kpop-place-card__body {
    height: 100%;
}

.kpop-place-card__body .maps-link {
    margin-top: auto;
}

@media (max-width: 640px) {
    .kpop-route-plan {
        grid-template-columns: 1fr;
    }

    .kpop-route-plan a {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .kpop-route-plan__badge {
        width: fit-content;
    }

    .kpop-route-plan__hint {
        grid-column: auto;
    }

    .kpop-route-page .kpop-route-step {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 14px;
        min-height: 132px;
        padding: 14px;
    }

    .kpop-route-page .kpop-route-step__media {
        width: 108px;
    }

    .kpop-route-step__details {
        grid-column: 1 / -1;
    }

    .kpop-route-step__details dl {
        grid-template-columns: 1fr;
    }

    .kpop-route-transfer {
        grid-template-columns: 1fr;
        align-items: start;
        border-radius: 14px;
        width: calc(100% - 16px);
        margin: 0 auto;
        padding: 13px 14px;
    }

    .kpop-route-transfer span {
        min-height: 32px;
        width: fit-content;
        white-space: normal;
    }

    .kpop-route-transfer p {
        font-size: 0.92rem;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    .kpop-route-plan {
        grid-template-columns: 1fr;
    }

    .kpop-route-page .kpop-route-step {
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 18px;
    }

    .kpop-route-page .kpop-route-step__media {
        width: 132px;
    }

    .kpop-route-step__details {
        grid-column: 1 / -1;
    }

    .kpop-route-transfer {
        width: calc(100% - 36px);
        margin: 0 auto;
    }
}

.route-outline {
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
}

.route-outline ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
}

.my-trip-list {
    display: grid;
    gap: 14px;
}

.saved-trip-card {
    align-content: start;
    gap: 10px;
}

.saved-trip-card[aria-current="true"] {
    border-color: rgba(37, 99, 235, 0.28);
}

.selected-trip-label {
    display: inline-grid;
    place-items: center;
    width: fit-content;
    margin: 0 0 4px;
    padding: 4px 8px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent-dark);
    font-size: 0.8rem;
    font-weight: 900;
}

.saved-trip-card__current-label {
    border-color: rgba(37, 99, 235, 0.28);
    background: #eaf2ff;
    color: var(--color-primary);
    font-size: 0.76rem;
}

.saved-trip-card__summary {
    margin: 0;
    color: var(--color-primary);
    font-weight: 900;
}

.saved-trip-card__meta {
    margin: 0;
    color: #4b5563;
    font-size: 0.92rem;
    font-weight: 750;
}

.saved-trip-card__fresh-meta {
    color: var(--color-primary);
    font-weight: 900;
}

.saved-trip-card__primary-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.saved-trip-card__more {
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.saved-trip-card__more summary,
.workspace-panel > summary {
    width: fit-content;
    min-height: 40px;
    cursor: pointer;
    color: var(--color-primary);
    font-weight: 900;
}

.saved-trip-card__more-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.saved-trip-card .secondary-link,
.saved-trip-card .primary-button,
.my-trip-actions .secondary-link {
    width: 100%;
    margin-top: 0;
    min-width: 0;
}

.rename-form {
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.rename-form[hidden] {
    display: none;
}

.rename-form label {
    display: grid;
    gap: 8px;
    font-weight: 800;
}

.checklist-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    color: var(--muted);
    font-weight: 700;
}

.checklist-item input {
    position: static;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    opacity: 1;
}

.my-trip-actions,
.dialog-actions {
    display: grid;
    gap: 10px;
}

.my-trip-guest-guide {
    display: grid;
    gap: 14px;
}

.browser-trip-info-bar {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 16px;
    background: #eff6ff;
    padding: 12px 14px;
    color: #334155;
}

.browser-trip-info-bar strong {
    color: var(--color-navy);
}

.browser-trip-save-feedback {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 16px;
    background: #eef6ff;
    padding: 13px 14px;
    color: #334155;
}

.browser-trip-save-feedback strong {
    color: var(--color-navy);
}

.browser-trip-save-feedback span {
    line-height: 1.45;
}

.guest-trip-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.guest-trip-action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    padding: 12px;
    color: var(--color-text);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.guest-trip-action-card:hover,
.guest-trip-action-card:focus-visible {
    border-color: rgba(37, 99, 235, 0.24);
    transform: translateY(-1px);
}

.guest-trip-action-card img {
    width: clamp(58px, 7vw, 78px);
    aspect-ratio: 1;
    object-fit: contain;
}

.guest-trip-action-card span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.guest-trip-action-card strong {
    color: var(--color-navy);
    line-height: 1.2;
}

.guest-trip-action-card small {
    color: #4b5563;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.35;
}

.browser-trip-tool-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 430px) {
    .page-hero--guest-my-trip {
        grid-template-columns: 1fr;
    }

    .page-hero--guest-my-trip .page-hero__media {
        justify-content: center;
    }

    .guest-trip-action-grid,
    .browser-trip-tool-strip,
    .saved-trip-card__primary-actions,
    .saved-trip-card__more-actions {
        grid-template-columns: 1fr;
    }

    .guest-trip-action-card {
        grid-template-columns: minmax(54px, auto) minmax(0, 1fr);
        padding: 11px;
    }

    .guest-trip-action-card img {
        width: 58px;
    }
}

.my-trip-app[hidden],
.my-trip-actions[hidden],
.browser-trip-tool-strip[hidden],
.browser-trip-save-feedback[hidden],
.my-trip-guest-guide[hidden],
.selected-trip-workspace[hidden] {
    display: none;
}

.selected-trip-workspace {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdfb;
    padding: 14px;
    min-width: 0;
}

.selected-trip-workspace .trip-day-summary,
.selected-trip-workspace .local-trip-reorder-list,
.selected-trip-workspace .route-connector,
.selected-trip-workspace .route-connector__summary {
    min-width: 0;
    overflow-wrap: anywhere;
}

.workspace-panel {
    display: grid;
    gap: 14px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

details.workspace-panel:not([open]) {
    gap: 0;
}

.workspace-panel[hidden] {
    display: none;
}

.trip-day-view {
    display: grid;
    gap: 14px;
}

.trip-day-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}

.trip-day-button {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.trip-day-button[aria-current="true"] {
    border-color: var(--accent);
    background: #fff1ed;
    color: var(--accent-dark);
}

.trip-day-summary {
    display: grid;
    gap: 10px;
}

.trip-day-stop {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.trip-day-stop h4 {
    margin: 4px 0;
    font-size: 1rem;
}

.add-custom-stop-form {
    display: grid;
    gap: 12px;
    margin-top: 10px;
    padding: 14px;
    border: 1px dashed #c8d4de;
    border-radius: 8px;
    background: #f8fbfc;
}

.add-custom-stop-details,
.stop-edit-details {
    margin-top: 12px;
}

.add-custom-stop-details > summary,
.stop-edit-details > summary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #c8d4de;
    border-radius: 8px;
    background: #f7fafc;
    color: var(--text);
    cursor: pointer;
    font-weight: 850;
}

.add-custom-stop-details > summary:hover,
.add-custom-stop-details > summary:focus-visible,
.stop-edit-details > summary:hover,
.stop-edit-details > summary:focus-visible {
    border-color: var(--focus);
    background: #eef6fb;
    outline: 3px solid rgba(31, 122, 140, 0.18);
    outline-offset: 2px;
}

.add-custom-stop-header {
    gap: 4px;
}

.add-custom-stop-header h4,
.add-custom-stop-header p {
    margin: 0;
}

.add-custom-stop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.add-custom-stop-grid label {
    display: grid;
    gap: 6px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 900;
}

.add-custom-stop-grid input,
.add-custom-stop-grid select,
.add-custom-stop-grid textarea {
    width: 100%;
    min-width: 0;
}

.add-custom-stop-note {
    grid-column: 1 / -1;
}

.add-custom-stop-button {
    justify-self: start;
}

.add-stop-edit-panel {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 16px;
    border: 1px dashed #aebfcb;
    border-radius: 10px;
    background: #f5f9fc;
}

.add-location-stop-section,
.add-own-stop-section,
.add-suggested-stop-section {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 10px;
    border: 1px solid #d8e1e8;
    border-radius: 8px;
    background: #fbfdfe;
}

.add-stop-choice-details > summary {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d5e0e7;
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.2;
}

.add-stop-choice-details[open] {
    gap: 10px;
}

.add-stop-choice-details[open] > summary {
    border-color: #9fb5c3;
    background: #eef6fb;
    min-height: 40px;
}

.add-stop-choice-details > summary:hover,
.add-stop-choice-details > summary:focus-visible {
    border-color: var(--focus);
    background: #f4f9fc;
    outline: 3px solid rgba(31, 122, 140, 0.16);
    outline-offset: 2px;
}

.add-stop-area-select {
    display: grid;
    gap: 6px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 900;
}

.add-stop-area-select select {
    width: 100%;
    min-width: 0;
}

.suggested-place-list {
    display: grid;
    gap: 12px;
}

.suggested-place-card {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px dashed #b9c9d4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(18, 32, 45, 0.04);
}

.suggested-place-card h4,
.suggested-place-card p {
    margin: 0;
}

.suggested-place-label {
    color: #b64d3d;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.suggested-place-title {
    color: var(--text);
    font-size: 1rem;
    font-weight: 900;
}

.suggested-place-area,
.suggested-place-note {
    color: var(--muted);
    font-size: 0.9rem;
}

.suggested-place-note {
    line-height: 1.45;
}

.suggested-place-card form {
    margin: 0;
}

.suggested-place-add-button {
    width: 100%;
    justify-content: center;
}

.nearby-category-field {
    margin-top: 10px;
}

.nearby-location-button {
    justify-self: start;
    margin-top: 8px;
}

.nearby-location-fallback-toggle {
    justify-self: start;
    margin-top: 8px;
}

.nearby-location-fallback {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed #c8d7df;
    border-radius: 8px;
    background: #f8fbfd;
}

.nearby-location-fallback[hidden] {
    display: none !important;
}

.nearby-status {
    margin: 8px 0 0;
}

.nearby-candidate-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.nearby-candidate-card {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid #cfdde5;
    border-radius: 8px;
    background: #fff;
}

.nearby-candidate-label {
    margin: 0;
    color: #526b7a;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nearby-candidate-title {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 900;
}

.nearby-candidate-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    background: #eef3f6;
}

.nearby-candidate-meta,
.nearby-candidate-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.nearby-candidate-card form {
    margin: 4px 0 0;
}

.nearby-candidate-card > .secondary-link {
    width: 100%;
    justify-content: center;
}

.nearby-candidate-map-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.nearby-candidate-map-links .secondary-link {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 0.85rem;
}

.compact-primary-button {
    width: auto;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 0.95rem;
}

.compact-secondary-button {
    width: auto;
    min-height: 38px;
    padding: 8px 12px;
}

.around-me-search {
    display: grid;
    gap: 14px;
}

.around-me-hero {
    align-items: center;
}

.around-me-hero__mascot {
    width: clamp(112px, 16vw, 158px);
    max-height: 170px;
    object-fit: contain;
}

.around-me-hero.plan-hero--photo-bg .around-me-hero__mascot {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
}

.around-me-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.around-search-option {
    min-width: 0;
}

.around-search-option__summary {
    width: 100%;
    min-height: 108px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid #d8e4dd;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fffb 100%);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(31, 41, 55, 0.08);
}

.around-search-option__summary img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.around-search-option__copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.around-search-option__copy strong {
    font-size: 1rem;
    font-weight: 900;
}

.around-search-option__copy span {
    color: #4b5563;
    font-size: 0.91rem;
    line-height: 1.35;
}

.around-search-option__chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

.around-search-option.is-open .around-search-option__summary,
.around-search-option__summary:hover,
.around-search-option__summary:focus-visible {
    border-color: #62b79f;
    background: linear-gradient(135deg, #ffffff 0%, #eefbf5 100%);
    outline: 3px solid rgba(42, 157, 143, 0.16);
    outline-offset: 2px;
}

.around-search-option.is-open .around-search-option__chevron {
    transform: rotate(225deg);
}

.around-me-mode-card {
    display: grid;
    gap: 6px;
    min-height: 96px;
    padding: 14px;
    border: 1px solid #c8d4de;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.around-me-mode-card span {
    font-weight: 900;
}

.around-me-mode-card small {
    color: var(--muted);
    line-height: 1.4;
}

.around-me-mode-card:hover,
.around-me-mode-card:focus-visible {
    border-color: var(--focus);
    background: #f7fbfc;
    outline: 3px solid rgba(31, 122, 140, 0.18);
    outline-offset: 2px;
}

.around-me-category-fieldset {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.around-me-category-fieldset legend {
    font-weight: 900;
}

.around-me-interest-grid {
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 10px;
}

.around-me-interest-card .interest-card-body {
    min-height: 148px;
}

.around-me-interest-card .interest-card-mascot {
    width: clamp(58px, 8vw, 78px);
    height: clamp(58px, 8vw, 78px);
}

.around-me-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.around-me-category-card {
    display: grid;
    cursor: pointer;
}

.around-me-category-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.around-me-category-card span {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid #c8d4de;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-weight: 850;
    text-align: center;
}

.around-me-category-card input:checked + span {
    border-color: var(--focus);
    background: #eef7f5;
    box-shadow: inset 0 0 0 2px rgba(31, 122, 140, 0.18);
}

.around-me-category-card input:focus-visible + span {
    outline: 3px solid rgba(31, 122, 140, 0.25);
    outline-offset: 2px;
}

.around-me-location-button {
    justify-self: start;
}

.around-me-location-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #d8e4dd;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(31, 41, 55, 0.08);
}

.around-me-location-panel[hidden] {
    display: none !important;
}

.around-me-location-panel h3 {
    margin: 0;
}

.around-me-consent-panel {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid #d8e4dd;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(31, 41, 55, 0.08);
}

.around-me-consent-panel[hidden] {
    display: none !important;
}

.around-me-consent-panel h3,
.around-me-consent-panel p {
    margin: 0;
}

.around-me-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.around-me-status {
    margin: 0;
}

.around-me-results {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.around-me-results[hidden] {
    display: none !important;
}

.around-me-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.around-me-pagination[hidden] {
    display: none !important;
}

.around-me-pagination__status {
    min-width: 138px;
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 800;
    text-align: center;
}

.around-me-results .nearby-candidate-card {
    align-content: start;
    gap: 9px;
}

.around-me-results .nearby-candidate-card.no-photo {
    padding-top: 14px;
}

.around-me-results .nearby-candidate-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.around-me-results .nearby-candidate-note {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.around-me-results .nearby-candidate-map-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 2px;
}

.around-me-results .nearby-candidate-map-links .secondary-link {
    min-width: 0;
    min-height: 38px;
    justify-content: center;
    padding: 7px 6px;
    font-size: 0.78rem;
    line-height: 1.1;
    text-align: center;
}

.around-me-results .nearby-candidate-directions {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    justify-content: center;
    margin-top: 2px;
}

@media (max-width: 1100px) {
    .around-me-results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .around-me-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.around-me-results-section[hidden],
.around-me-add-panel[hidden] {
    display: none !important;
}

.around-me-results-section,
.around-me-add-panel {
    display: grid;
    gap: 12px;
}

.around-me-results-section h2,
.around-me-add-panel h2 {
    margin: 0;
    font-size: 1.2rem;
}

.around-me-results .nearby-candidate-card {
    align-content: start;
    padding: 14px;
}

.around-me-results .nearby-candidate-title {
    font-size: 1.05rem;
}

.nearby-candidate-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
    padding: 6px 9px;
    border: 1px solid #c8d4de;
    border-radius: 999px;
    background: #f7fbfc;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 850;
    cursor: pointer;
}

.nearby-candidate-select input {
    width: 16px;
    height: 16px;
    accent-color: var(--focus);
}

.around-me-add-panel {
    margin-top: 4px;
    padding: 14px;
    border: 1px solid #c8d7df;
    border-radius: 8px;
    background: #f8fbfd;
}

.around-me-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: start;
    gap: 12px;
}

.around-me-add-grid label {
    display: grid;
    gap: 6px;
    color: var(--text);
    font-weight: 800;
}

.around-me-add-grid select {
    width: 100%;
    min-height: 40px;
}

.transportation-add-panel form[data-transport-add-form] {
    display: grid;
    gap: 18px;
}

.transportation-add-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(203, 213, 225, 0.72);
}

.transportation-add-actions .primary-button {
    width: auto;
    min-width: 220px;
    min-height: 44px;
    justify-content: center;
}

.transport-native-select--enhanced {
    display: none;
}

.transport-trip-picker {
    position: relative;
}

.transport-trip-picker[hidden] {
    display: none;
}

.transport-trip-picker__button {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #f8fbff;
    color: var(--text);
    padding: 0 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 850;
    line-height: 1.2;
    text-align: left;
}

.transport-trip-picker__button::after {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.transport-trip-picker__button[aria-expanded="true"]::after {
    transform: rotate(225deg) translateY(-1px);
}

.transport-trip-picker__button:hover,
.transport-trip-picker__button:focus-visible {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.transport-trip-picker__button:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

.transport-trip-picker__panel {
    position: absolute;
    z-index: 25;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: grid;
    gap: 8px;
    max-height: min(360px, calc(100vh - 140px));
    overflow: hidden;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 35, 50, 0.14);
}

.transport-trip-picker__panel[hidden] {
    display: none;
}

.transport-trip-picker__search {
    display: grid;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 850;
}

.transport-trip-picker__search input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0 10px;
}

.transport-trip-picker__list {
    display: grid;
    gap: 6px;
    max-height: 260px;
    overflow: auto;
}

.transport-trip-picker__option {
    display: grid;
    gap: 3px;
    width: 100%;
    min-height: 48px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    padding: 8px 10px;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.transport-trip-picker__option strong {
    font-size: 0.9rem;
    line-height: 1.2;
}

.transport-trip-picker__option span {
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.25;
}

.transport-trip-picker__option:hover,
.transport-trip-picker__option:focus-visible,
.transport-trip-picker__option.is-selected {
    border-color: rgba(37, 99, 235, 0.28);
    background: #eff6ff;
    outline: none;
}

.transport-trip-picker__option:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.transport-day-picker__option {
    min-height: 44px;
}

.transport-trip-picker__empty {
    margin: 0;
    color: var(--color-muted);
    padding: 10px;
}

.around-me-add-message {
    margin: 2px 0 0;
    padding: 8px 10px;
    border: 1px solid #e6b8a2;
    border-radius: 8px;
    background: #fff7ed;
    color: #8a3a1b;
    font-size: 0.9rem;
    font-weight: 800;
}

.around-me-add-message[hidden] {
    display: none !important;
}

.around-me-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.transportation-search,
.transportation-results,
.transportation-add-panel,
.transportation-explorer,
.transportation-city-guides,
.transportation-basics,
.transportation-taxi-guide,
.transportation-airport-tips,
.transport-region-panel {
    display: grid;
    gap: 14px;
}

.transportation-hero {
    position: relative;
    isolation: isolate;
    align-items: center;
    overflow: hidden;
    min-height: clamp(300px, 31vw, 380px);
    padding: clamp(32px, 5vw, 56px);
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.9)),
        radial-gradient(circle at 82% 18%, rgba(125, 211, 252, 0.26), transparent 34%);
}

.transportation-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(248, 251, 255, 0.98) 0%, rgba(248, 251, 255, 0.9) 35%, rgba(248, 251, 255, 0.22) 64%, rgba(248, 251, 255, 0.02) 100%);
}

.transportation-hero__copy {
    position: relative;
    z-index: 1;
    max-width: min(560px, 58%);
}

.transportation-hero .hero-copy {
    max-width: 560px;
}

.transportation-hero__support {
    max-width: 640px;
    margin: 8px 0 0;
    color: var(--color-muted);
    line-height: 1.55;
}

.transportation-hero__visual {
    position: absolute;
    inset: 0;
    z-index: -2;
    min-width: 0;
}

.transportation-hero__mascot {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
}

.transportation-section-heading {
    display: grid;
    gap: 4px;
}

.transportation-section-heading h2,
.transportation-section-heading p {
    margin: 0;
}

.transportation-search,
.transportation-results,
.transportation-add-panel,
.transportation-explorer,
.transportation-city-guides,
.transportation-basics,
.transportation-taxi-guide,
.transportation-airport-tips,
.transport-region-panel {
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
}

.transportation-search,
.transportation-results,
.transportation-add-panel,
.transportation-explorer,
.transportation-city-guides,
.transportation-basics,
.transportation-taxi-guide,
.transportation-airport-tips {
    padding: 20px;
}

.transportation-form {
    display: grid;
    gap: 12px;
}

.transportation-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) auto minmax(0, 2fr) minmax(160px, 1fr);
    align-items: end;
    gap: 12px;
}

.transportation-form-grid label,
.transportation-location-field {
    display: grid;
    gap: 6px;
    color: var(--text);
    font-weight: 800;
}

.transportation-form-grid select,
.transportation-form-grid input {
    width: 100%;
    min-height: 44px;
}

.transportation-priority-field {
    display: grid;
    grid-column: 1 / -1;
    gap: 8px;
    margin: 0;
    border: 0;
    padding: 0;
    color: var(--text);
}

.transportation-priority-field legend {
    margin: 0;
    font-weight: 850;
}

.transport-priority-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.transport-priority-group-label {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.transport-priority-card {
    position: relative;
    display: grid;
    grid-template-rows: minmax(118px, auto) auto;
    gap: 8px;
    align-items: start;
    min-height: 188px;
    border: 1px solid rgba(148, 163, 184, 0.48);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    color: var(--text);
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.transport-priority-card:hover,
.transport-priority-card:focus-visible {
    border-color: rgba(37, 99, 235, 0.4);
    background: #eff6ff;
    outline: none;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

.transport-priority-card.is-selected {
    border-color: rgba(37, 99, 235, 0.68);
    background: linear-gradient(180deg, #dbeafe, #eff6ff);
    color: var(--color-primary-hover);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.16);
}

.transport-priority-card--disabled,
.transport-priority-card:disabled {
    cursor: not-allowed;
    opacity: 0.52;
    transform: none;
    box-shadow: none;
}

.transport-priority-card--disabled:hover,
.transport-priority-card--disabled:focus-visible,
.transport-priority-card:disabled:hover,
.transport-priority-card:disabled:focus-visible {
    border-color: rgba(148, 163, 184, 0.48);
    background: #fff;
    box-shadow: none;
}

.transport-priority-card__icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 118px;
    overflow: hidden;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

.transport-priority-card__icon img {
    display: block;
    width: min(96%, 152px);
    height: min(100%, 116px);
    object-fit: contain;
    object-position: center;
}

.transport-priority-icon {
    width: 30px;
    height: 30px;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.62));
}

.transport-priority-card__text {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
}

.transport-priority-card__label {
    min-width: 0;
    font-size: 0.94rem;
    font-weight: 850;
    line-height: 1.15;
}

.transport-priority-card__visible-status {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 780;
    line-height: 1.1;
}

.transport-priority-card.is-selected .transport-priority-card__visible-status {
    color: var(--color-primary-hover);
}

.transport-priority-card__order {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

.transport-priority-card__order:empty {
    display: none;
}

.transportation-location-field {
    min-width: 0;
}

.transportation-location-field__anchor {
    position: relative;
}

.transportation-location-field input[role="combobox"] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 12px;
    background: #fff;
}

.transportation-combobox-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 360px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 35, 50, 0.14);
}

.transportation-combobox-list[hidden] {
    display: none;
}

.transportation-combobox-group {
    padding: 8px 10px 5px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transportation-combobox-sheet-title,
.transportation-combobox-sheet-query {
    display: none;
}

.transportation-combobox-option {
    display: grid;
    width: 100%;
    gap: 2px;
    margin: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.transportation-combobox-option span {
    font-weight: 800;
}

.transportation-combobox-option small {
    color: var(--muted);
    font-size: 0.78rem;
}

.transportation-combobox-option:hover,
.transportation-combobox-option.is-active {
    background: var(--color-surface-soft);
    color: var(--color-primary);
}

.transportation-city-picker {
    position: absolute;
    z-index: 18;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    min-width: min(520px, calc(100vw - 32px));
    width: min(620px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(480px, calc(100vh - 120px));
    overflow: hidden;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 35, 50, 0.14);
}

.transportation-city-picker__top,
.transportation-city-picker__results {
    min-height: 0;
}

.transportation-city-picker__top,
.transportation-city-picker__results {
    display: grid;
    gap: 8px;
}

.transportation-city-picker__top,
.transportation-city-picker__actions {
    flex: 0 0 auto;
}

.transportation-city-picker__results {
    flex: 1 1 auto;
}

.transportation-city-picker[hidden] {
    display: none;
}

.transportation-city-picker__selected-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 6px 8px 6px 12px;
    border-radius: 14px;
    background: var(--color-surface-soft);
}

.transportation-city-picker__selected,
.transportation-city-picker__title {
    margin: 0;
}

.transportation-city-picker__selected {
    color: var(--color-primary);
    font-size: 0.95rem;
    font-weight: 900;
}

.transportation-city-picker__title {
    display: grid;
    gap: 7px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 900;
}

.transportation-city-clear-button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 900;
}

.transportation-city-clear-button:hover,
.transportation-city-clear-button:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    outline: none;
}

.transportation-city-specific-input {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
}

.transportation-city-suggestions-label,
.transportation-city-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.transportation-city-suggestions-label {
    font-weight: 850;
    text-transform: uppercase;
}

.transportation-city-specific-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: min(320px, var(--transportation-city-list-max, 320px));
    overflow-y: auto;
    min-height: 0;
    padding: 0 2px 2px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
}

.transportation-city-empty {
    padding: 8px 10px;
}

.transportation-city-specific-list[hidden] {
    display: none;
}

.transportation-city-place-button {
    display: grid;
    gap: 4px;
    min-height: 58px;
    padding: 11px 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.transportation-city-place-button span {
    font-size: 0.93rem;
    font-weight: 850;
}

.transportation-city-place-button small {
    color: var(--muted);
    font-size: 0.78rem;
}

.transportation-city-place-button:hover,
.transportation-city-place-button:focus-visible,
.transportation-city-place-button.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    outline: none;
}

.transportation-city-picker__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
    background: inherit;
}

.transportation-city-center-button {
    justify-self: start;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 0.82rem;
}

.transportation-swap-cell {
    display: flex;
    align-items: end;
}

.transportation-swap-button {
    min-height: 46px;
    white-space: nowrap;
}

.transportation-form-actions {
    display: flex;
    justify-content: flex-end;
}

.transportation-form-actions .primary-button {
    min-height: 46px;
    min-width: 220px;
}

.transportation-search .transportation-swap-button,
.transportation-search .transportation-form-actions .primary-button {
    min-height: 46px;
    align-items: center;
    justify-content: center;
}

.transportation-loading-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 16px;
    background: #eff6ff;
}

.transportation-loading-panel[hidden] {
    display: none !important;
}

.transportation-loading-mascot {
    width: 72px;
    max-height: 86px;
    margin: 0;
}

.transportation-skeleton-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.transportation-skeleton-grid span {
    min-height: 42px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.68), rgba(147, 197, 253, 0.25), rgba(255, 255, 255, 0.68));
    background-size: 180% 100%;
    animation: transportSkeletonPulse 1.2s ease-in-out infinite;
}

@keyframes transportSkeletonPulse {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.transport-map-links {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.transport-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.transport-map-help {
    margin: 0;
}

.transport-google-route {
    width: auto;
    min-width: 180px;
}

.transport-map-links a,
.transport-map-links button,
.transport-result-actions a,
.transport-continue-links a,
.transport-continue-guide-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.transport-local-map-options {
    width: 100%;
    max-width: 520px;
}

.transport-route-summary-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff, #fff);
}

.transport-route-summary-card__main,
.transport-route-summary-card__meta {
    display: grid;
    gap: 8px;
}

.transport-route-summary-card__main h3,
.transport-route-summary-card__main p {
    margin: 0;
}

.transport-route-summary-card__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: 1 / -1;
}

.transport-route-summary-card__meta div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 10px;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.65);
}

.transport-route-summary-card__meta span {
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transport-route-summary-card__meta strong {
    overflow-wrap: anywhere;
}

.transport-route-summary-card .transport-map-links {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-end;
    gap: 8px;
}

.transport-route-summary-card .transport-map-links .transport-map-help {
    flex-basis: 100%;
    text-align: right;
}

.transport-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.transport-option-card {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid #cfdde5;
    border-radius: 8px;
    background: #fff;
}

.transport-option-card h3,
.transport-option-card p {
    margin: 0;
}

.transport-option-card h3 {
    color: var(--text);
    font-size: 1rem;
}

.transport-option-card p {
    color: var(--muted);
    line-height: 1.45;
}

.transport-comparison-panel,
.transport-how-to-panel {
    display: grid;
    gap: 14px;
    margin-top: 6px;
    padding: 16px;
    border: 1px solid rgba(59, 130, 246, 0.16);
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff, #fff);
}

.transport-comparison-grid,
.transport-how-to-grid,
.transport-city-guide-grid {
    display: grid;
    gap: 14px;
}

.transport-comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.transport-how-to-grid,
.transport-city-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.transport-comparison-card,
.transport-how-to-card,
.transport-city-guide-card,
.transport-unsupported-card,
.transport-continue-card {
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 18px;
    background: #fff;
}

.transport-comparison-card,
.transport-city-guide-card {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.transport-comparison-card {
    grid-template-rows: auto 1fr auto;
    align-content: stretch;
}

.transport-recommended-area,
.transport-other-ways {
    display: grid;
    gap: 12px;
}

.transport-other-ways .transport-comparison-card {
    grid-template-columns: 136px minmax(0, 1fr);
    grid-template-areas:
        "visual body"
        "actions actions";
    grid-template-rows: auto auto;
    align-content: start;
    align-self: start;
    align-items: start;
    gap: 12px 14px;
    padding: 14px;
}

.transport-other-ways .transport-comparison-card__body {
    grid-area: body;
    align-self: center;
}

.transport-other-ways .transport-comparison-card__actions {
    grid-area: actions;
    display: grid;
    gap: 10px;
    align-self: end;
    width: 100%;
}

.transport-recommended-area {
    width: 100%;
}

.transport-comparison-card--recommended {
    border-color: rgba(37, 99, 235, 0.34);
    background: linear-gradient(135deg, #eff6ff, #fff);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.12);
}

.transport-comparison-card--recommended .transport-journey-leg {
    grid-template-columns: 92px minmax(0, 1fr);
    padding: 12px;
}

.transport-comparison-card--recommended .transport-journey-leg__photo {
    width: 92px;
    height: 70px;
}

.transport-comparison-card--alternative {
    border-style: dashed;
}

.transport-comparison-card--tertiary {
    background: #fbfdff;
    opacity: 0.94;
}

.transport-comparison-card__top {
    display: grid;
    grid-template-columns: minmax(132px, 0.34fr) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.transport-comparison-card--recommended .transport-comparison-card__top {
    grid-template-columns: 142px minmax(0, 1fr);
}

.transport-mode-photo,
.transport-option-photo,
.transport-journey-leg__photo {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(203, 213, 225, 0.8);
    border-radius: 16px;
    background: #eff6ff;
    text-decoration: none;
}

.transport-mode-photo {
    aspect-ratio: 1 / 1;
    min-height: 0;
    height: auto;
}

.transport-comparison-card--recommended .transport-mode-photo {
    width: 142px;
    height: 142px;
    justify-self: start;
}

.transport-option-photo {
    aspect-ratio: 16 / 10;
    min-height: 0;
    height: auto;
    max-height: none;
}

.transport-mode-photo img,
.transport-option-photo img,
.transport-journey-leg__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 160ms ease;
}

.transport-mode-photo img {
    width: 90%;
    height: 90%;
    margin: auto;
}

.transport-comparison-card--recommended .transport-mode-photo img {
    width: 78%;
    height: 78%;
}

.transport-other-ways .transport-option-photo {
    grid-area: visual;
    width: 136px;
    height: 136px;
    aspect-ratio: 1 / 1;
    max-height: none;
    align-self: start;
}

.transport-other-ways .transport-option-photo img {
    width: 82%;
    height: 82%;
    margin: auto;
}

.transport-mode-photo:hover img,
.transport-mode-photo:focus-visible img,
.transport-option-photo:hover img,
.transport-option-photo:focus-visible img,
.transport-journey-leg__photo:hover img,
.transport-journey-leg__photo:focus-visible img {
    transform: scale(1.035);
}

.transport-mode-photo:focus-visible,
.transport-option-photo:focus-visible,
.transport-journey-leg__photo:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 2px;
}

.transport-card-rank,
.transport-selected-preferences {
    margin: 0;
    color: var(--color-primary-hover);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transport-selected-preferences {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    text-transform: none;
}

.transport-selected-preferences p,
.transport-selected-preferences ol {
    margin: 0;
}

.transport-selected-preferences p {
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transport-selected-preferences ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.transport-selected-preferences li {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    background: #dbeafe;
    color: var(--color-primary-hover);
    padding: 0 10px 0 6px;
    font-weight: 900;
}

.transport-selected-preferences li span {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    line-height: 1;
}

.transport-preference-notice {
    margin: 0;
    border-radius: 14px;
    background: #fff7ed;
    color: #9a3412;
    padding: 10px 12px;
    font-weight: 760;
    line-height: 1.42;
}

.transport-mode-icon,
.transport-city-guide-card__visual {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #e0f2fe, #f8fbff);
}

.transport-mode-icon img,
.transport-city-guide-card__visual img {
    width: 88%;
    height: 88%;
    min-height: 0;
    object-fit: contain;
    object-position: center;
}

.transport-comparison-card h4,
.transport-comparison-card p,
.transport-how-to-card h4,
.transport-how-to-card p,
.transport-city-guide-card h3,
.transport-city-guide-card p,
.transport-unsupported-card p,
.transport-continue-card h3,
.transport-continue-card p {
    margin: 0;
}

.transport-comparison-card__meta {
    display: grid;
    gap: 8px;
    margin: 0;
}

.transport-comparison-card__meta div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 12px;
    background: #f8fbff;
}

.transport-comparison-card__meta dt {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transport-comparison-card__meta dd {
    margin: 0;
    color: var(--text);
    font-weight: 760;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.transport-comparison-card__meta--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transport-journey-leg-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.transport-journey-leg {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(203, 213, 225, 0.72);
    border-radius: 16px;
    background: #fff;
}

.transport-journey-leg__photo {
    width: 86px;
    height: 66px;
}

.transport-journey-leg strong,
.transport-journey-leg span,
.transport-journey-leg small {
    display: block;
    min-width: 0;
}

.transport-journey-leg__heading {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.transport-journey-leg__heading strong {
    min-width: 0;
    align-self: center;
}

.transport-journey-leg__resource {
    display: grid;
    flex: 0 0 auto;
    align-content: center;
    justify-items: center;
    width: clamp(126px, 22%, 154px);
    min-height: 58px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
    color: var(--color-primary-hover);
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
}

.transport-journey-leg__resource span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--color-primary);
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.14;
}

.transport-journey-leg__resource:hover,
.transport-journey-leg__resource:focus-visible {
    border-color: rgba(37, 99, 235, 0.48);
    background: #dbeafe;
    outline: none;
}

.transport-card-how-to .transport-journey-leg__heading {
    align-items: center;
    flex-direction: row;
    gap: 10px;
}

.transport-card-how-to .transport-journey-leg__resource {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 48%;
    min-height: 30px;
    border-radius: 999px;
    background: #eff6ff;
    padding: 0 10px;
    text-align: center;
}

.transport-card-how-to .transport-journey-leg__resource span {
    font-size: 0.72rem;
    line-height: 1.1;
    overflow-wrap: normal;
    white-space: nowrap;
}

.transport-journey-leg span {
    color: var(--text);
    font-weight: 820;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.transport-journey-leg small {
    color: var(--color-muted);
    line-height: 1.35;
}

.transport-comparison-card__body {
    display: grid;
    align-content: start;
    gap: 10px;
}

.transport-other-ways .transport-comparison-card__body {
    grid-area: body;
}

.transport-other-ways .transport-comparison-card__actions {
    grid-area: actions;
}

.transport-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.transport-tag-row span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    background: #dbeafe;
    color: var(--color-primary-hover);
    padding: 0 9px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.035em;
}

.transport-recommended-for {
    color: var(--color-muted);
    line-height: 1.42;
}

.transport-compact-route {
    color: var(--color-muted);
    font-weight: 820;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.transport-mile-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.transport-mile-chips strong {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transport-mile-chips span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    background: #eef6ff;
    color: var(--color-primary-hover);
    padding: 0 9px;
    font-size: 0.72rem;
    font-weight: 850;
}

.transport-summary-reasons,
.transport-why-ranked ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
}

.transport-why-ranked {
    color: var(--color-muted);
    line-height: 1.42;
}

.transport-why-ranked strong {
    color: var(--text);
}

.transport-comparison-card__actions {
    display: grid;
    align-self: end;
    gap: 8px;
}

.transport-comparison-card__actions--single {
    margin-top: auto;
}

.transport-comparison-card__actions--compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.transport-comparison-card__actions--compact .transport-guide-link {
    min-height: 42px;
    padding: 8px 10px;
}

.transport-how-to-toggle {
    display: inline-flex;
    min-height: 44px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, 0.28);
    border-radius: 14px;
    background: #eff6ff;
    color: var(--color-primary-hover);
    padding: 0 14px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.1;
    cursor: pointer;
}

.transport-how-to-toggle:hover,
.transport-how-to-toggle:focus-visible {
    border-color: rgba(37, 99, 235, 0.5);
    background: #dbeafe;
}

.transport-card-how-to {
    display: grid;
    gap: 12px;
    border-radius: 14px;
    background: #f8fbff;
    padding: 12px;
}

.transport-card-how-to[hidden] {
    display: none;
}

.transport-card-how-to ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.transport-card-how-to li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.transport-card-how-to strong,
.transport-card-how-to p {
    margin: 0;
}

.transport-card-how-to p {
    color: var(--color-muted);
    line-height: 1.4;
}

.transport-planning-note {
    margin: 0;
}

.transport-helper-section {
    gap: 0;
}

.transport-helper-section[open] {
    gap: 14px;
}

.transport-helper-summary {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 64px;
    align-content: center;
    padding-right: 44px;
    cursor: pointer;
    list-style: none;
}

.transport-helper-summary::-webkit-details-marker {
    display: none;
}

.transport-helper-summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--color-primary-hover);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%);
}

.transport-helper-section[open] .transport-helper-summary::after {
    content: "-";
}

.transport-helper-summary h2,
.transport-helper-summary p {
    margin: 0;
}

.transport-how-to-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transport-how-to-card {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.transport-how-to-card ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.transport-how-to-card li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.transport-how-to-card strong {
    display: block;
    margin-bottom: 2px;
}

.transport-unsupported-card {
    display: grid;
    gap: 6px;
    padding: 16px;
}

.transport-continue-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
}

.transport-continue-guide-link {
    flex: 0 0 auto;
}

.transport-continue-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.transport-city-guide-card {
    grid-template-rows: auto 1fr auto;
}

.transport-city-guide-panel {
    display: grid;
    gap: 16px;
    margin-top: 4px;
}

.transport-region-selector--inline {
    max-width: 280px;
    margin-bottom: 8px;
}

.transport-city-guide-card[hidden],
.transport-map-schematic figure[hidden] {
    display: none !important;
}

.transportation-city-guides .transport-city-guide-card {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
        "visual body"
        "visual links";
    align-items: stretch;
    gap: 18px 20px;
    min-height: 0;
    padding: 18px;
    background: linear-gradient(135deg, #f8fbff, #fff);
}

.transportation-city-guides .transport-city-guide-card__visual {
    grid-area: visual;
    width: 100%;
    max-width: 240px;
    height: 100%;
    min-height: 220px;
    aspect-ratio: 1 / 1;
    align-self: stretch;
    justify-self: start;
    border-radius: 18px;
}

.transportation-city-guides .transport-city-guide-card__body {
    grid-area: body;
    align-self: start;
    padding-top: 4px;
}

.transportation-city-guides .transport-city-guide-card--tile-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
        "body"
        "links";
}

.transportation-city-guides .transport-city-guide-card > .transport-resource-card__links {
    grid-area: links;
    align-self: end;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.transportation-city-guides .transport-city-guide-card > .transport-resource-card__links a,
.transport-city-guide-link-group .transport-resource-card__links a {
    min-height: 48px;
    align-content: center;
    text-align: center;
}

.transport-city-guide-card__body {
    display: grid;
    gap: 10px;
}

.transportation-location-panel {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px dashed #c8d7df;
    border-radius: 8px;
    background: #f8fbfd;
}

.transportation-location-panel p {
    margin: 0;
}

.transport-resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.transport-resource-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
        "visual body"
        "links links";
    gap: 12px 18px;
    min-height: 100%;
    padding: 14px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 18px;
    background: #fbfdff;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.transport-resource-card:hover,
.transport-resource-card:focus-within,
.transport-airport-tip-card:hover,
.transport-airport-tip-card:focus-within,
.transport-city-guide-card:hover,
.transport-city-guide-card:focus-within,
.transport-comparison-card:hover,
.transport-comparison-card:focus-within,
.transport-taxi-step:hover,
.transport-taxi-step:focus-within {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.09);
    transform: translateY(-2px);
}

.transport-resource-card__visual {
    display: grid;
    place-items: center;
    grid-area: visual;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(135deg, #dbeafe, #f8fbff);
}

.transport-resource-card__visual img {
    width: 88%;
    height: 88%;
    object-fit: contain;
    object-position: center;
}

.transport-resource-icon {
    width: 42px;
    height: 42px;
    color: #2563eb;
}

.transport-resource-card__body {
    display: grid;
    gap: 6px;
    grid-area: body;
    align-self: center;
}

.transport-resource-card__badge,
.transport-resource-card__body h3,
.transport-resource-card__body p {
    margin: 0;
}

.transport-resource-card__badge {
    display: none;
}

.transport-resource-card__body h3 {
    font-size: 1.05rem;
}

.transport-resource-card__body p {
    color: var(--color-muted);
    line-height: 1.45;
}

.transport-resource-card__points {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 1.05rem;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

.transport-resource-card__points li::marker {
    color: var(--color-primary);
}

.transport-resource-card__links,
.transport-region-links {
    display: grid;
    gap: 8px;
}

.transport-resource-card__links {
    grid-area: links;
    align-self: end;
}

.transport-resource-card__links a,
.transport-region-links a,
.transport-guide-link {
    display: grid;
    gap: 2px;
    min-height: 44px;
    align-content: center;
    padding: 10px 12px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 14px;
    background: #fff;
    color: var(--color-primary);
    text-decoration: none;
    line-height: 1.2;
}

.transport-resource-card__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border-radius: 10px;
    padding: 8px 12px;
    text-align: center;
}

.transport-resource-card__links a::after {
    content: "->";
    flex: 0 0 auto;
    font-weight: 900;
}

.transport-resource-card__links a:hover,
.transport-resource-card__links a:focus-visible,
.transport-region-links a:hover,
.transport-region-links a:focus-visible,
.transport-guide-link:hover,
.transport-guide-link:focus-visible {
    border-color: rgba(37, 99, 235, 0.35);
    background: #eff6ff;
    outline: none;
}

.transport-resource-card__links span,
.transport-region-links span,
.transport-guide-link span {
    font-weight: 850;
}

.transport-resource-card__links small,
.transport-region-links small,
.transport-guide-link small {
    color: var(--color-muted);
    line-height: 1.3;
}

.transport-resource-card__links small {
    display: none;
}

.transport-basics-layout {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(260px, 1fr) minmax(230px, 0.8fr);
    gap: 16px;
    align-items: stretch;
}

.transport-map-schematic {
    position: relative;
    display: grid;
    place-items: stretch;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid rgba(147, 197, 253, 0.28);
    border-radius: 18px;
    background: #f8fbff;
}

.transport-map-schematic figure {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 260px;
    margin: 0;
    padding: 14px;
}

.transport-map-schematic img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center;
}

.transport-map-schematic figcaption {
    color: var(--color-primary-hover);
    font-size: 0.86rem;
    font-weight: 850;
    text-align: center;
}

.transport-basics-steps,
.transport-tmoney-card,
.transport-airport-tip-card__body {
    display: grid;
    gap: 12px;
}

.transport-basics-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    min-height: 58px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.transport-basics-step__photo,
.transport-taxi-step__photo {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #eff6ff;
}

.transport-basics-step__photo {
    width: 46px;
    height: 46px;
    background: transparent;
}

.transport-basics-step__photo img,
.transport-taxi-step__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.transport-basics-step h3,
.transport-basics-step p,
.transport-taxi-step h3,
.transport-taxi-step p,
.transport-tmoney-card h3,
.transport-tmoney-card ul,
.transport-airport-tip-card h3,
.transport-airport-tip-card ul {
    margin: 0;
}

.transport-step-number {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
    background: #dbeafe;
    color: var(--color-primary-hover);
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1;
}

.transport-basics-step p,
.transport-taxi-step p,
.transport-tmoney-card li,
.transport-airport-tip-card li {
    color: var(--color-muted);
    line-height: 1.45;
}

.transport-tmoney-card {
    align-content: start;
    padding: 16px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 18px;
    background: linear-gradient(135deg, #eff6ff, #fff);
}

.transport-tmoney-card__visual {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    width: min(100%, 240px);
    height: 116px;
    border-radius: 18px;
    background: transparent;
}

.transport-tmoney-card__visual img {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.transport-tmoney-card ul,
.transport-airport-tip-card ul {
    display: grid;
    gap: 7px;
    padding-left: 1.1rem;
}

.transport-taxi-step-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(124px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.transport-taxi-step {
    position: relative;
    display: grid;
    grid-template-rows: auto 58px auto 1fr;
    justify-items: center;
    align-content: start;
    gap: 7px;
    min-height: 150px;
    padding: 12px 10px 11px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 18px;
    background: #fbfdff;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.transportation-taxi-guide .transport-taxi-step__photo {
    display: grid;
    place-items: center;
    width: 78px;
    height: 58px;
    border-radius: 18px;
    background: transparent;
}

.transportation-taxi-guide .transport-taxi-step__photo img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.transport-taxi-step .transport-step-number {
    position: static;
    justify-self: start;
    width: 24px;
    height: 24px;
    font-size: 0.76rem;
}

.transport-taxi-step h3,
.transport-taxi-step p {
    text-align: center;
}

.transport-taxi-step h3 {
    font-size: 0.88rem;
    line-height: 1.15;
}

.transport-taxi-step p {
    font-size: 0.78rem;
    line-height: 1.28;
}

.transport-airport-tip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.transport-airport-tip-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(132px, 0.54fr);
    grid-template-areas:
        "body visual"
        "link visual";
    gap: 12px 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 18px;
    background: #fbfdff;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.transport-airport-tip-card__visual {
    grid-area: visual;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #e0f2fe, #f8fbff);
}

.transport-airport-tip-card__visual img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: center;
}

.transport-airport-tip-card__body {
    grid-area: body;
}

.transport-airport-tip-card > .transport-guide-link {
    grid-area: link;
    justify-self: start;
    min-width: 180px;
    width: min(100%, 220px);
}

.transport-region-panel {
    padding: 0;
    overflow: hidden;
}

.transport-region-panel__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 18px;
    border: 0;
    background: #fff;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.transport-region-panel__summary > span:first-child {
    display: grid;
    gap: 4px;
}

.transport-region-panel__summary small {
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.transport-region-panel__summary > span:last-child {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--color-surface-soft);
    color: var(--color-primary);
    font-weight: 900;
}

.transport-region-panel__summary[aria-expanded="true"] > span:last-child {
    transform: rotate(45deg);
}

.transport-region-panel__content {
    display: grid;
    gap: 14px;
    padding: 0 18px 18px;
}

.transport-region-panel__content[hidden],
.transport-region-card[hidden] {
    display: none !important;
}

.transport-region-selector {
    display: grid;
    gap: 6px;
    max-width: 320px;
    font-weight: 850;
}

.transport-region-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: #f8fbff;
}

.transport-region-card h3,
.transport-region-card p {
    margin: 0;
}

.transport-city-guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.transport-city-guide-meta span,
.transport-city-guide-hubs span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    background: #eef6ff;
    color: var(--color-primary-hover);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.1;
    padding: 0 10px;
}

.transport-city-guide-hubs {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.transport-city-guide-hubs strong {
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transport-city-guide-hubs div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.transport-city-guide-hubs span {
    background: #f8fafc;
    color: #475569;
}

.transport-city-guide-link-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    grid-area: links;
    grid-column: 2 / -1;
}

.transport-city-guide-link-group {
    display: grid;
    gap: 10px;
    align-content: space-between;
    min-width: 0;
    border: 1px solid rgba(203, 213, 225, 0.86);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
}

.transport-city-guide-link-group h4,
.transport-city-guide-link-group p {
    margin: 0;
}

.transport-city-guide-link-group h4 {
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
}

.transport-city-guide-link-group p {
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.38;
}

.transport-city-guide-link-group .transport-resource-card__links {
    align-self: end;
}

.transport-city-guide-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    grid-area: links;
}

.transport-city-guide-tile {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 104px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 16px;
    background: #fff;
    color: var(--text);
    padding: 10px;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.transport-city-guide-tile:hover,
.transport-city-guide-tile:focus-visible {
    border-color: rgba(37, 99, 235, 0.38);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.11);
    outline: none;
    transform: translateY(-2px);
}

.transport-city-guide-tile__image {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: #eef6ff;
}

.transport-city-guide-tile__image img {
    display: block;
    width: 74px;
    height: 74px;
    object-fit: contain;
}

.transport-city-guide-tile__copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.transport-city-guide-tile__copy small {
    color: var(--color-primary);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-transform: uppercase;
}

.transport-city-guide-tile__copy strong {
    color: var(--color-primary-hover);
    font-size: 0.94rem;
    font-weight: 900;
    line-height: 1.18;
}

.transport-city-guide-tile__copy em {
    color: var(--color-muted);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
    .transport-resource-card,
.transport-airport-tip-card,
.transport-city-guide-card,
.transport-city-guide-tile,
.transport-comparison-card,
.transport-taxi-step,
    .transport-region-panel__summary > span:last-child,
    .transport-mode-photo img,
    .transport-option-photo img,
    .transport-journey-leg__photo img {
        transition: none;
    }

    .transport-resource-card:hover,
    .transport-resource-card:focus-within,
    .transport-airport-tip-card:hover,
    .transport-airport-tip-card:focus-within,
    .transport-city-guide-card:hover,
    .transport-city-guide-card:focus-within,
    .transport-city-guide-tile:hover,
    .transport-city-guide-tile:focus-visible,
    .transport-comparison-card:hover,
    .transport-comparison-card:focus-within,
    .transport-taxi-step:hover,
    .transport-taxi-step:focus-within,
    .transport-mode-photo:hover img,
    .transport-mode-photo:focus-visible img,
    .transport-option-photo:hover img,
    .transport-option-photo:focus-visible img,
    .transport-journey-leg__photo:hover img,
    .transport-journey-leg__photo:focus-visible img {
        transform: none;
    }
}

@media (max-width: 860px) {
    .transportation-form-grid {
        grid-template-columns: 1fr;
    }

    .transport-priority-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transportation-swap-cell,
    .transportation-form-actions {
        justify-content: stretch;
    }

    .transportation-swap-button,
    .transportation-form-actions .primary-button {
        width: 100%;
    }

    .transportation-city-picker {
        min-width: min(520px, calc(100vw - 40px));
        width: min(620px, calc(100vw - 40px));
        max-height: min(430px, calc(100vh - 120px));
    }

    .transportation-city-specific-list {
        max-height: 280px;
    }

    .transport-route-summary-card,
    .transport-resource-grid,
    .transport-city-guide-grid,
    .transport-city-guide-panel,
    .transport-basics-layout,
    .transport-airport-tip-grid {
        grid-template-columns: 1fr;
    }

    .transport-how-to-grid {
        grid-template-columns: 1fr;
    }

    .transport-comparison-card__top {
        grid-template-columns: 1fr;
    }

    .transport-other-ways .transport-comparison-card {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-areas:
            "visual body"
            "actions actions";
    }

    .transport-other-ways .transport-option-photo {
        width: 112px;
        height: 112px;
        aspect-ratio: 1 / 1;
    }

    .transport-mode-photo {
        aspect-ratio: 1 / 1;
        min-height: 0;
        height: auto;
    }

    .transport-comparison-card--recommended .transport-comparison-card__top {
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: center;
    }

    .transport-comparison-card--recommended .transport-mode-photo {
        width: 112px;
        height: 112px;
        justify-self: start;
    }

    .transport-comparison-card--recommended .transport-mode-photo img {
        width: 92%;
        height: 92%;
    }

    .transport-option-photo {
        aspect-ratio: 16 / 10;
        min-height: 0;
        height: auto;
    }

    .transport-continue-card {
        display: grid;
    }

    .transport-result-actions a,
    .transport-continue-guide-link,
    .transport-continue-links a {
        width: 100%;
        justify-content: center;
    }

    .transport-route-summary-card__meta {
        grid-template-columns: 1fr;
    }

    .transport-taxi-step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transport-map-schematic {
        min-height: 220px;
    }
}

.itinerary-start-label {
    margin: 16px 0 8px;
    color: var(--muted);
}

.my-note-preview {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-left: 3px solid #c8d4de;
    border-radius: 6px;
    background: #f8fbfc;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.personal-note {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #f8fbfc;
}

.personal-note__header,
.personal-note__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.personal-note__header h4,
.personal-note__content,
.personal-note__empty {
    margin: 0;
}

.personal-note__header h4 {
    color: var(--color-navy);
    font-size: var(--text-sm);
    font-weight: 900;
}

.personal-note__content {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.personal-note__content.is-expanded {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}

.personal-note__empty {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.personal-note__edit,
.personal-note__toggle {
    border: 0;
    background: transparent;
    color: var(--color-primary-hover);
    padding: 0;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 800;
    cursor: pointer;
}

.personal-note__edit:hover,
.personal-note__edit:focus-visible,
.personal-note__toggle:hover,
.personal-note__toggle:focus-visible {
    color: var(--color-primary);
    outline: 3px solid rgba(37, 99, 235, 0.16);
    outline-offset: 3px;
}

.personal-note__form {
    display: grid;
    gap: var(--space-2);
}

.personal-note__form[hidden],
.stop-time-popover[hidden] {
    display: none !important;
}

.time-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.time-selector legend {
    flex: 1 0 100%;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.time-selector select {
    width: auto;
    min-width: 68px;
    min-height: 44px;
    padding: 0 0.65rem;
}

.stop-edit-panel {
    display: grid;
    gap: 0;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #d8e1e8;
    border-radius: 10px;
    background: #fbfdfe;
    box-shadow: 0 10px 24px rgba(24, 47, 67, 0.06);
}

.stop-edit-section {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding-top: 0;
    border-top: 1px solid #e4ebf0;
}

.stop-edit-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.stop-edit-section h4 {
    margin: 0;
    color: #48606f;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-transform: uppercase;
}

.stop-edit-accordion {
    display: block;
}

.stop-edit-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 0;
    color: #48606f;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.25;
    list-style: none;
    text-transform: uppercase;
}

.stop-edit-accordion > summary::-webkit-details-marker {
    display: none;
}

.stop-edit-accordion > summary:focus-visible {
    border-radius: 8px;
    outline: 3px solid rgba(31, 122, 140, 0.18);
    outline-offset: 2px;
}

.stop-edit-accordion-indicator::before {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid #c8d4de;
    border-radius: 999px;
    background: #f7fafc;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.stop-edit-accordion[open] .stop-edit-accordion-indicator::before {
    content: "-";
}

.stop-edit-section-body {
    display: grid;
    gap: 10px;
    padding: 2px 0 4px;
}

.stop-edit-section .replace-toggle {
    justify-content: center;
    justify-self: stretch;
    min-height: 42px;
}

.trip-stop-actions,
.stop-order-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px;
    margin-top: 0;
    padding-top: 0;
}

.stop-order-label {
    flex: 0 0 100%;
    margin: 0;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 900;
}

.trip-stop-actions form,
.stop-order-actions form {
    margin: 0;
}

.stop-personal-note-form {
    display: grid;
    gap: 8px;
    margin-top: 0;
}

.stop-manual-time-form {
    display: grid;
    gap: 8px;
    margin-top: 0;
}

.stop-manual-time-form label,
.stop-personal-note-form label {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 900;
}

.stop-manual-time-form .field-help,
.stop-personal-note-form .field-help {
    margin: 0;
}

.stop-time-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.stop-time-input-row input {
    width: 100%;
    min-width: 0;
}

.stop-personal-note-form textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
}

.stop-time-save,
.stop-note-save {
    justify-content: center;
    justify-self: stretch;
    min-height: 42px;
}

.stop-delete-form {
    margin: 0;
}

.stop-edit-delete-section {
    padding-top: 14px;
}

.stop-delete-button {
    width: auto;
    min-height: 40px;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(220, 38, 38, 0.32);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-danger);
    font-weight: 800;
    cursor: pointer;
}

.stop-delete-button:hover,
.stop-delete-button:focus-visible {
    border-color: #b85c5c;
    background: #fff0f0;
    outline: 3px solid rgba(184, 92, 92, 0.18);
    outline-offset: 2px;
}

.stop-day-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px;
    margin-top: 0;
}

.stop-edit-move-body {
    gap: 8px;
}

.stop-day-action-label {
    flex: 0 0 100%;
    margin: 0;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 900;
}

.stop-day-actions form {
    margin: 0;
}

.stop-day-move-button {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #c8d4de;
    border-radius: 8px;
    background: #f7fafc;
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}

.stop-day-move-button:hover,
.stop-day-move-button:focus-visible {
    border-color: var(--focus);
    background: #eef6fb;
    outline: 3px solid rgba(31, 122, 140, 0.18);
    outline-offset: 2px;
}

.my-note-print {
    display: none;
}

.my-note-print-label {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 900;
}

.my-note-print-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.stop-move-button {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #c9d7d1;
    border-radius: 8px;
    background: #f8fbf9;
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}

.stop-move-button:hover,
.stop-move-button:focus-visible {
    border-color: var(--focus);
    background: #eef7f5;
    color: var(--text);
    outline: 3px solid rgba(31, 122, 140, 0.18);
    outline-offset: 2px;
}

.trip-day-actions {
    display: grid;
    gap: 8px;
}

.saved-trip-order-note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 800;
}

.trip-notes-panel {
    gap: 14px;
}

.trip-note-field {
    display: grid;
    gap: 8px;
    font-weight: 800;
}

.trip-note-field textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 12px;
    font: inherit;
}

.trip-note-count,
.trip-note-status {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.trip-note-actions {
    display: grid;
    gap: 8px;
}

.trip-note-actions .primary-button,
.trip-note-actions .secondary-link {
    width: 100%;
    margin-top: 0;
}

.trip-checklist-progress {
    color: var(--muted);
    font-size: 0.95rem;
}

.confirm-dialog {
    max-width: min(92vw, 420px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 20px;
}

.confirm-dialog::backdrop {
    background: rgba(23, 33, 27, 0.45);
}

.replacement-confirm-dialog p {
    margin: 8px 0 16px;
}

.confirm-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.confirm-dialog-actions .primary-button,
.confirm-dialog-actions .secondary-link {
    margin-top: 0;
}

.place-area,
.source-basis {
    font-weight: 700;
}

/* Modern Korea Travel design system */
.site-shell,
.page-container {
    width: min(100%, 1240px);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.page-header,
.section,
.section-header,
.section-actions {
    display: grid;
    gap: var(--space-4);
}

.page-kicker,
.page-lead,
.section-description {
    color: var(--color-text-secondary);
}

.page-title,
.section-title,
h1,
h2,
h3 {
    color: var(--color-navy);
    font-family: var(--font-heading);
}

.btn,
.primary-button,
.secondary-link,
.guide-link,
.status-link,
.best-route-action,
.maps-link,
.nav-action-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    padding: 0.7rem 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.btn-primary,
.primary-button,
.best-route-action-primary {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #ffffff;
}

.btn-primary:hover,
.primary-button:hover,
.best-route-action-primary:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    color: #ffffff;
}

.btn-secondary,
.secondary-link,
.guide-link,
.status-link,
.best-route-action-secondary,
.maps-link {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-primary-hover);
}

.btn-secondary:hover,
.secondary-link:hover,
.guide-link:hover,
.status-link:hover,
.best-route-action-secondary:hover,
.maps-link:hover {
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

.btn-soft {
    border: 1px solid transparent;
    background: var(--color-teal-soft);
    color: #0f766e;
}

.btn-danger,
.stop-delete-form .secondary-link,
.account-danger-zone .primary-button {
    border-color: rgba(185, 28, 28, 0.28);
    background: #fff7f7;
    color: var(--color-danger);
}

.btn-icon {
    width: 44px;
    padding-inline: 0;
}

.btn-sm,
.compact-primary-button,
.compact-secondary-button {
    min-height: 40px;
    padding: 0.55rem 0.85rem;
    font-size: var(--text-sm);
}

.btn-lg,
.save-trip-button {
    min-height: 50px;
    padding-inline: 1.25rem;
}

.btn:disabled,
.primary-button:disabled,
.secondary-link[aria-disabled="true"],
button:disabled {
    cursor: not-allowed;
    opacity: 0.56;
    transform: none;
}

.card,
.card-feature,
.card-route,
.card-city,
.card-stop,
.planner-card,
.guide-card,
.home-feature-card,
.home-city-card,
.home-best-route-card,
.best-route-card,
.city-region-card,
.day-card,
.stop-item,
.place-card,
.route-step,
.suggested-place-card,
.saved-trip-card,
.around-me-mode-card,
.nearby-candidate-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.card-interactive,
.home-feature-card,
.home-city-card,
.guide-card,
.best-route-card,
.home-best-route-card,
.city-region-links a,
.saved-trip-card,
.around-me-mode-card {
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease,
        background-color 160ms ease;
}

.card-interactive:hover,
.home-feature-card:hover,
.home-feature-card:focus-visible,
.home-city-card:hover,
.home-city-card:focus-visible,
.guide-card:hover,
.best-route-card:hover,
.home-best-route-card:hover,
.city-region-links a:hover,
.city-region-links a:focus-visible,
.around-me-mode-card:hover,
.around-me-mode-card:focus-visible {
    border-color: rgba(37, 99, 235, 0.36);
    background: #ffffff;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.saved-trip-card:hover,
.saved-trip-card:focus-within {
    border-color: rgba(37, 99, 235, 0.32);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.saved-trip-card[aria-current="true"] {
    border-color: rgba(37, 99, 235, 0.28);
}

.saved-trip-card.saved-trip-card--current {
    border: 2px solid var(--accent);
    background: #f6f9ff;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14);
}

.saved-trip-card.saved-trip-card--current:hover,
.saved-trip-card.saved-trip-card--current:focus-within {
    border-color: var(--accent);
    background: #f6f9ff;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.18);
}

.badge,
.guide-status,
.trip-status-badge,
.stop-location-badge,
.route-tag-list span,
.best-route-recommendation-tags span,
.coming-soon-note {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    padding: 0.32rem 0.62rem;
    font-size: var(--text-xs);
    font-weight: 800;
    line-height: 1.1;
}

.badge-success {
    background: #ecfdf3;
    color: var(--color-success);
}

.badge-warning {
    background: #fffbeb;
    color: var(--color-warning);
}

.badge-danger {
    background: #fef2f2;
    color: var(--color-danger);
}

.badge-neutral {
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
}

.badge-rating {
    background: #fff7ed;
    color: #c2410c;
}

.badge-coral {
    background: var(--color-coral-soft);
    color: #c2410c;
}

.badge-teal {
    background: var(--color-teal-soft);
    color: #0f766e;
}

.site-header {
    border-bottom-color: rgba(226, 232, 240, 0.92);
    background: rgba(255, 255, 255, 0.9);
}

.site-brand {
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    letter-spacing: 0;
}

.site-header-inner {
    min-height: 64px;
}

.nav-link,
.nav-coming-soon,
.nav-action-button {
    min-height: 44px;
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 700;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"],
.nav-action-button:hover,
.nav-action-button:focus-visible {
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

.page-shell {
    width: min(100%, 1240px);
    padding: var(--space-10) var(--space-4) var(--space-16);
}

.hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.76);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 86% 8%, rgba(15, 159, 143, 0.12), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 62%, #eff6ff 100%);
    box-shadow: var(--shadow-sm);
    padding: var(--space-12) var(--space-6);
}

.photo-hero,
.city-guide-hero,
.best-route-detail-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.86)),
        radial-gradient(circle at 86% 10%, rgba(37, 99, 235, 0.14), transparent 30%),
        var(--color-surface);
}

.icon-hero,
.compact-hero {
    padding: var(--space-10) var(--space-6);
}

.text-compact-hero,
.auth-hero,
.account-hero {
    background:
        linear-gradient(135deg, #ffffff, var(--color-surface-soft));
}

.eyebrow,
.section-label {
    color: var(--color-primary-hover);
    font-size: var(--text-xs);
    font-weight: 800;
}

h1 {
    max-width: 820px;
    font-size: var(--text-hero);
    line-height: 1.03;
}

h2 {
    font-size: var(--text-2xl);
    line-height: 1.18;
}

.hero-copy,
.guide-section-header p:last-child,
.route-section-header p,
.field-help,
.form-helper {
    color: var(--color-text-secondary);
}

.home-section,
.guide-section,
.route-section,
.best-route-section {
    margin-top: var(--space-16);
}

.guide-section-header,
.route-section-header {
    gap: var(--space-2);
}

.home-feature-grid,
.home-city-grid,
.seoul-popular-grid,
.home-best-route-grid,
.city-region-grid,
.route-detail-stop-list,
.best-route-grid {
    gap: var(--space-5);
}

.home-feature-card {
    min-height: 220px;
    align-content: space-between;
    padding: var(--space-6);
}

.home-feature-visual,
.seoul-popular-visual {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary-soft), var(--color-teal-soft));
    color: var(--color-primary-hover);
    font-size: var(--text-sm);
}

.home-feature-copy strong,
.home-city-card strong,
.guide-card h3,
.best-route-card h3,
.home-best-route-card h3 {
    color: var(--color-navy);
}

.home-city-card {
    min-height: 128px;
    padding: var(--space-5);
}

.guide-card,
.home-best-route-card,
.best-route-card,
.city-region-card,
.place-card,
.route-step,
.stop-item,
.suggested-place-card {
    padding: var(--space-5);
}

.guide-card,
.seoul-popular-card,
.home-best-route-card,
.best-route-card {
    min-height: 100%;
}

.guide-link,
.home-best-route-card .secondary-link,
.best-route-actions,
.route-card-actions {
    margin-top: auto;
}

.planner-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.card-header,
.trip-form {
    padding: var(--space-6);
}

.form-step {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    padding: var(--space-5);
}

.field-group input,
.field-group select,
.field-group textarea,
.add-custom-stop-grid input,
.add-custom-stop-grid select,
.cloud-detail-form input,
.cloud-detail-form select,
.cloud-detail-form textarea {
    min-height: 44px;
    border-color: var(--color-border-strong);
    border-radius: var(--radius-md);
}

.interest-card-body,
.choice-grid label span,
.around-me-category-card span {
    border-radius: var(--radius-md);
}

.interest-card input:checked + .interest-card-body,
.choice-grid input:checked + span,
.around-me-category-card input:checked + span {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

.share-tools,
.weather-alternatives-notice,
.trip-preferences-summary,
.trip-focus-summary,
.best-route-toolbar,
.around-me-search {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.results-grid {
    width: 100%;
}

.day-card {
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.day-card-header {
    background: linear-gradient(135deg, var(--color-primary-soft), #ffffff);
}

.stop-list {
    gap: var(--space-4);
}

.stop-item {
    background: #ffffff;
}

.stop-photo img,
.home-best-route-cover-image,
.best-route-cover-image,
.route-detail-stop-card .stop-photo img,
.best-route-detail-hero__image,
.best-route-day-card__image,
.city-guide-best-route-thumb img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.stop-photo img,
.stop-photo-placeholder-box {
    aspect-ratio: 16 / 9;
    height: auto;
}

.stop-photo-placeholder-box,
.best-route-cover-placeholder,
.home-best-route-cover-placeholder,
.best-route-detail-placeholder,
.best-route-day-card__placeholder,
.city-guide-best-route-thumb__placeholder,
.replacement-option-thumb--placeholder {
    border: 1px dashed var(--color-border-strong);
    background: linear-gradient(135deg, var(--color-surface-muted), var(--color-primary-soft));
    color: var(--color-text-muted);
}

.stop-photo-placeholder-box strong,
.best-route-cover-placeholder span,
.home-best-route-cover-placeholder span,
.best-route-detail-placeholder span,
.best-route-day-card__placeholder strong,
.city-guide-best-route-thumb__placeholder strong {
    color: var(--color-primary-hover);
}

.place-photo-credit,
.stop-photo .place-photo-credit,
.best-route-day-card__figure figcaption {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.place-photo-credit a {
    color: var(--color-primary-hover);
}

.stop-edit-details,
.add-stop-details,
.cloud-secondary-tool,
.best-route-review-panel,
.best-route-approved-recommendations {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #ffffff;
}

.stop-edit-details > summary,
.add-stop-details > summary,
.cloud-secondary-tool > summary,
.best-route-review-panel > summary,
.best-route-approved-recommendations > summary {
    min-height: 44px;
    cursor: pointer;
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    color: var(--color-primary-hover);
    font-weight: 800;
}

.stop-edit-panel {
    border-radius: var(--radius-lg);
}

.city-region-links a {
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
    color: var(--color-primary-hover);
    font-weight: 700;
}

.mobile-bottom-nav {
    border-top-color: var(--color-border);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

.mobile-nav-item {
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
}

.mobile-nav-item[aria-current="page"],
.mobile-nav-item:focus-visible,
.mobile-nav-item:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Modern Korea Travel 2nd polish */
.ui-icon {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.home-feature-icon {
    width: 34px;
    height: 34px;
    stroke-width: 1.7;
}

.seoul-popular-icon {
    width: 30px;
    height: 30px;
    stroke-width: 1.75;
}

.home-feature-visual,
.seoul-popular-visual {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(15, 159, 143, 0.08)),
        var(--color-surface-soft);
    color: var(--color-primary-hover);
}

.home-feature-card,
.seoul-popular-card {
    align-content: start;
    gap: var(--space-4);
}

.home-card-copy {
    gap: var(--space-2);
}

.print-button,
.share-button,
.save-trip-button,
.stop-edit-details > summary,
.add-stop-details > summary {
    gap: var(--space-2);
}

.results-grid,
.route-grid.saved-itinerary-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
}

.results-grid .day-card:only-child,
.saved-itinerary-grid .day-card:only-child {
    grid-column: 1 / -1;
}

.results-grid .day-card:only-child .stop-list,
.saved-itinerary-grid .day-card:only-child .stop-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.best-route-card,
.home-best-route-card {
    grid-template-rows: auto auto auto auto auto 1fr auto;
}

.best-route-cover-placeholder,
.home-best-route-cover-placeholder {
    display: grid;
    width: 100%;
    place-items: center;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(15, 159, 143, 0.1)),
        var(--color-surface-muted);
    color: var(--color-primary-hover);
    font-size: var(--text-xs);
    font-weight: 900;
    text-transform: uppercase;
}

.best-route-cover-placeholder,
.best-route-cover-image {
    aspect-ratio: 4 / 3;
}

.home-best-route-cover-placeholder,
.home-best-route-cover-image {
    aspect-ratio: 16 / 9;
}

.best-route-card-header {
    display: grid;
    gap: var(--space-3);
}

.best-route-card-header p:not(.guide-status) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.best-route-rating {
    padding: var(--space-3);
}

.best-route-helper-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.best-route-actions {
    display: grid;
    gap: var(--space-2);
    align-self: end;
}

.best-route-toolbar > div:first-child {
    display: grid;
    gap: var(--space-2);
}

.best-route-toolbar p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.sort-pill {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.sort-pill--active,
.sort-pill[aria-current="page"] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    background-color: var(--color-primary);
    color: #ffffff !important;
    opacity: 1;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.sort-link-list a.sort-pill--active,
.sort-link-list a.sort-pill[aria-current="page"] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    background-color: var(--color-primary);
    color: #ffffff !important;
}

.sort-pill:hover,
.sort-pill:focus-visible {
    transform: translateY(-1px);
}

.best-route-featured-section {
    margin-top: var(--space-10);
}

.best-route-city-filter {
    display: grid;
    gap: 6px;
    margin-top: var(--space-3);
}

.best-route-city-filter label {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 800;
}

.best-route-city-filter select {
    width: min(100%, 220px);
    min-height: 42px;
}

.best-route-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: stretch;
}

.best-route-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.best-route-card.card-route {
    display: flex;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.best-route-card__media {
    width: 100%;
    margin: 0;
    background: var(--color-surface-muted);
    overflow: hidden;
}

.best-route-card__media,
.best-route-card__media .best-route-cover-image,
.best-route-card__fallback {
    aspect-ratio: 16 / 10;
}

.best-route-card--featured .best-route-card__media,
.best-route-card--featured .best-route-cover-image,
.best-route-card--featured .best-route-card__fallback {
    aspect-ratio: 16 / 10;
}

.best-route-card__media .best-route-cover-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}

.best-route-visual-fallback {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    place-items: center;
    border-bottom: 1px solid var(--color-border);
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 127, 80, 0.12), transparent 38%),
        linear-gradient(135deg, rgba(255, 247, 237, 0.9), rgba(238, 242, 255, 0.88));
    color: var(--color-text-muted);
    padding: 0;
    text-align: center;
}

.best-route-visual-fallback img {
    display: block;
    width: min(70%, 280px);
    height: auto;
    aspect-ratio: 1;
    max-width: 280px;
    max-height: 72%;
    object-fit: contain;
}

.best-route-card__body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
}

.best-route-card__body h3 {
    display: -webkit-box;
    min-height: calc(1.25em * 2);
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--color-navy);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.25;
}

.best-route-card__summary {
    display: -webkit-box;
    min-height: 2.9em;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--color-text);
    line-height: 1.45;
}

.best-route-card__meta {
    min-height: 22px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.best-route-card__tags {
    gap: 6px;
    min-height: 30px;
    overflow: hidden;
}

.best-route-card__tags span {
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.best-route-card__rating {
    display: inline-flex;
    width: fit-content;
    min-height: 34px;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-pill);
    background: #fff7ed;
    color: #92400e;
    padding: 7px 10px;
    font-size: var(--text-sm);
    text-decoration: none;
}

.best-route-card__rating strong {
    color: inherit;
}

.best-route-card__rating--empty {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.best-route-card__rating:hover,
.best-route-card__rating:focus-visible {
    color: #78350f;
    text-decoration: none;
}

.best-route-card .best-route-actions {
    width: 100%;
    margin-top: auto;
    padding-top: var(--space-2);
}

.best-route-card .best-route-action-primary {
    width: 100%;
    justify-content: center;
}

.best-route-rating-hero {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
}

.best-route-rating-hero__media {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

.best-route-rating-hero__media .best-route-cover-image,
.best-route-rating-hero__media .best-route-card__fallback {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
}

.best-route-rating-hero__media .best-route-cover-image {
    height: 100%;
    object-fit: cover;
}

.best-route-rating-hero__media .best-route-card__fallback {
    display: grid;
}

.best-route-rating-hero__content {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.best-route-rating-hero__content h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.25rem);
}

.best-route-rating-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-5);
}

.best-route-rating-summary-card,
.best-route-rating-form-card {
    display: grid;
    gap: var(--space-4);
    align-content: start;
    padding: var(--space-5);
}

.best-route-rating-score {
    display: grid;
    gap: var(--space-2);
}

.best-route-rating-score strong {
    color: var(--color-navy);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1;
}

.best-route-rating-score p {
    margin: 0;
    color: var(--color-text-muted);
    font-weight: 700;
}

.best-route-rating-distribution {
    display: grid;
    gap: 10px;
}

.best-route-rating-bar {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 28px;
    gap: 10px;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 800;
}

.best-route-rating-bar div {
    overflow: hidden;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
}

.best-route-rating-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #f59e0b;
}

.best-route-rating-form {
    display: grid;
    gap: var(--space-4);
}

.best-route-star-radio {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

.best-route-star-radio legend {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: var(--color-text);
    font-weight: 900;
}

.best-route-star-radio label {
    display: grid;
    min-width: 0;
    min-height: 76px;
    place-items: center;
    gap: 5px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 8px 6px;
    text-align: center;
}

.best-route-star-radio input {
    position: absolute;
    opacity: 0;
}

.best-route-star-radio span {
    color: #d97706;
    font-size: clamp(0.95rem, 1.8vw, 1.2rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.best-route-star-radio small {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
}

.best-route-star-radio label:focus-within,
.best-route-star-radio label:hover,
.best-route-star-radio input:checked + span {
    color: #b45309;
}

.best-route-star-radio label:has(input:checked) {
    border-color: #f59e0b;
    background: #fff7ed;
}

.best-route-review-highlight {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
}

.best-route-review-header {
    align-items: end;
    gap: var(--space-4);
}

.review-sort {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}

.review-sort__label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.review-sort__options {
    display: inline-flex;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.review-sort__option {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--color-primary-hover);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.review-sort__option.is-active,
.review-sort__option[aria-current="page"] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.review-sort__option:hover,
.review-sort__option:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    text-decoration: none;
}

.review-sort__option.is-active:hover,
.review-sort__option.is-active:focus-visible,
.review-sort__option[aria-current="page"]:hover,
.review-sort__option[aria-current="page"]:focus-visible {
    background: var(--color-primary);
    color: #ffffff;
}

.best-route-load-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-5);
}

.best-route-review-highlight__header {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-width: 0;
}

.best-route-review-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    font-size: var(--text-sm);
    font-weight: 900;
}

.best-route-review-highlight h3 {
    margin: 0;
    color: var(--color-navy);
    font-size: 1rem;
    line-height: 1.2;
}

.best-route-approved-review-meta {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.best-route-day-card__fallback {
    display: grid;
    place-items: center;
    gap: var(--space-2);
    padding: clamp(12px, 5%, 18px);
    text-align: center;
}

.best-route-day-card__fallback img {
    display: block;
    width: min(78%, 320px);
    max-height: 84%;
    object-fit: contain;
}

.best-route-day-card__fallback img {
    width: min(74%, 190px);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .best-route-grid,
    .best-route-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.best-route-approved-recommendations,
.best-route-review-panel {
    margin-top: var(--space-2);
    box-shadow: none;
}

.guide-card {
    grid-template-rows: auto auto 1fr auto;
}

.guide-card .guide-link,
.guide-card .status-link {
    align-self: end;
}

.guide-related-tools,
.related-guide-list,
.guide-related-links {
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    padding: var(--space-4);
}

.route-connector {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: var(--space-3);
    margin: var(--space-2) 0;
    border: 0;
    border-left: 3px solid var(--color-border-strong);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: var(--space-3) 0 var(--space-3) var(--space-5);
}

.route-connector h3 {
    color: var(--color-navy);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.25;
}

.route-connector .section-label,
.route-connector h3,
.route-connector p {
    margin: 0;
}

.route-connector .section-label {
    color: var(--color-primary-hover);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.route-connector .movement-meta {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.5;
}

.route-connector .movement-note {
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.route-connector__header h3 {
    color: var(--color-text);
    font-size: var(--text-base);
}

.route-connector__route,
.route-connector__details {
    display: grid;
    gap: var(--space-2);
}

.route-connector__from,
.route-connector__to,
.route-connector__details p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.55;
}

.route-guidance {
    display: grid;
    gap: 0.45rem;
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.route-guidance p {
    margin: 0;
}

.route-guidance__fallback {
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-muted);
}

.print-only {
    display: none !important;
}

.route-steps {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.route-step {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
}

.route-step__number {
    display: inline-grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 900;
}

.route-step__content {
    min-width: 0;
}

.subway-line-badge {
    display: inline-flex;
    min-height: 1.65rem;
    align-items: center;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    background: var(--color-muted);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 900;
    line-height: 1.2;
}

.subway-line-badge--1 { background: #0052a4; }
.subway-line-badge--2 { background: #00a84d; }
.subway-line-badge--3 { background: #ef7c1c; }
.subway-line-badge--4 { background: #00a5de; }
.subway-line-badge--5 { background: #996cac; }
.subway-line-badge--6 { background: #cd7c2f; }
.subway-line-badge--7 { background: #747f00; }
.subway-line-badge--8 { background: #e6186c; }
.subway-line-badge--9 { background: #bdb092; color: #1c1c1c; }
.subway-line-badge--suin-bundang { background: #f5a200; color: #1c1c1c; }
.subway-line-badge--shinbundang { background: #d4003b; }
.subway-line-badge--airport { background: #0090d2; }
.subway-line-badge--gyeongui-jungang { background: #77c4a3; color: #1c1c1c; }
.subway-line-badge--unknown { background: var(--color-muted); }

.route-map-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.stop-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.stop-action-row .maps-link,
.stop-action-row .stop-delete-button,
.stop-action-row .stop-edit-details > summary,
.stop-action-row .stop-edit-proxy {
    min-height: 40px;
}

.stop-edit-proxy {
    margin-left: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--color-primary-hover);
    padding: 0.55rem 0.85rem;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 800;
    cursor: pointer;
}

.stop-edit-proxy:hover,
.stop-edit-proxy:focus-visible {
    border-color: rgba(37, 99, 235, 0.34);
    background: var(--color-primary-soft);
    outline: 3px solid rgba(37, 99, 235, 0.16);
    outline-offset: 2px;
}

.stop-edit-details.is-proxy-controlled > summary {
    display: none;
}

.stop-delete-inline-form {
    margin: 0;
}

.trip-toast {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 90;
    max-width: min(360px, calc(100vw - 32px));
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-lg);
    color: var(--color-navy);
    padding: 0.8rem 1rem;
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.trip-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.trip-toast.is-success {
    border-color: rgba(22, 163, 74, 0.28);
    background: #f0fdf4;
}

.trip-toast.is-error {
    border-color: rgba(220, 38, 38, 0.28);
    background: #fef2f2;
}

.just-added {
    animation: just-added-pulse 1600ms ease;
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 4px;
}

@keyframes just-added-pulse {
    0% {
        background: var(--color-primary-soft);
        transform: translateY(-2px);
    }
    100% {
        background: inherit;
        transform: translateY(0);
    }
}

.stop-delete-button {
    border: 1px solid rgba(220, 38, 38, 0.32);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-danger);
    padding: 0.55rem 0.85rem;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 800;
    cursor: pointer;
}

.stop-delete-button:hover,
.stop-delete-button:focus-visible {
    background: rgba(254, 226, 226, 0.72);
    outline: 3px solid rgba(220, 38, 38, 0.16);
    outline-offset: 2px;
}

.route-map-link {
    display: inline-flex;
    min-height: 40px;
    min-width: 118px;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--color-primary-hover);
    padding: 0.55rem 0.78rem;
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease,
        background-color 160ms ease;
}

.route-connector__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.route-connector__toggle:hover,
.route-connector__toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.16);
    outline-offset: 4px;
}

.route-connector__summary {
    display: grid;
    gap: 0.2rem;
}

.route-connector__summary strong {
    color: var(--color-navy);
    font-size: var(--text-base);
    line-height: 1.25;
}

.route-connector__summary span:last-child {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 700;
}

.route-connector__chevron {
    width: 0.65rem;
    height: 0.65rem;
    flex: 0 0 0.65rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--color-muted);
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.route-connector.is-expanded .route-connector__chevron,
.route-connector__toggle[aria-expanded="true"] .route-connector__chevron {
    transform: rotate(225deg);
}

.route-connector__details[hidden] {
    display: none;
}

.route-map-link:hover,
.route-map-link:focus-visible {
    border-color: rgba(37, 99, 235, 0.34);
    background: var(--color-primary-soft);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    outline: 3px solid rgba(37, 99, 235, 0.16);
    outline-offset: 2px;
}

.route-map-link-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

body.stop-edit-modal-open {
    overflow: hidden;
}

.stop-edit-modal::before,
.stop-edit-modal__backdrop {
    display: none;
}

.stop-edit-details[open]::before {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(15, 23, 42, 0.28);
    content: "";
}

.stop-edit-details[open] .stop-edit-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 60;
    width: min(720px, calc(100vw - 32px));
    max-height: min(82vh, 760px);
    overflow: auto;
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
}

.stop-edit-modal__panel {
    position: fixed;
}

.stop-edit-modal__header {
    display: flex;
}

.stop-edit-modal__body {
    display: grid;
    gap: var(--space-3);
}

.stop-edit-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.stop-edit-dialog-header .section-label,
.stop-edit-dialog-header h4 {
    margin: 0;
}

.stop-edit-dialog-header h4 {
    margin-top: 0.25rem;
    color: var(--color-navy);
    font-size: var(--text-xl);
    line-height: 1.18;
}

.stop-edit-close {
    flex: 0 0 auto;
    min-height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--color-muted);
    padding: 0.5rem 0.85rem;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 800;
    cursor: pointer;
}

.stop-edit-close:hover,
.stop-edit-close:focus-visible {
    border-color: rgba(37, 99, 235, 0.34);
    color: var(--color-primary-hover);
    outline: 3px solid rgba(37, 99, 235, 0.18);
    outline-offset: 2px;
}

.stop-edit-details[open] > summary {
    position: relative;
    z-index: 61;
}

.stop-more-details {
    margin: var(--space-3) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(248, 250, 252, 0.78);
}

.stop-more-details > summary {
    min-height: 38px;
    padding: 0.55rem 0.75rem;
    color: var(--color-primary-hover);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 800;
}

.stop-more-details[open] {
    padding-bottom: var(--space-2);
}

.stop-more-details .stop-guidance {
    margin: 0;
    padding: 0 var(--space-3) var(--space-2);
}

.trip-reorder-list {
    position: relative;
    min-height: 84px;
    display: grid;
    gap: var(--space-3);
}

.trip-reorder-stop {
    position: relative;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease,
        opacity 220ms ease,
        margin 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.trip-reorder-stop.is-insert-before {
    margin-top: var(--drag-insert-gap, 96px);
}

.trip-reorder-stop.is-insert-after {
    margin-bottom: var(--drag-insert-gap, 96px);
}

.stop-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 3.2rem var(--space-2) 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.stop-time-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.stop-time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 900;
}

.stop-time .ui-icon {
    width: 16px;
    height: 16px;
    color: var(--color-primary-hover);
}

.stop-time-edit-button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-muted);
    cursor: pointer;
}

.stop-time-edit-button:hover,
.stop-time-edit-button:focus-visible {
    border-color: rgba(37, 99, 235, 0.34);
    color: var(--color-primary-hover);
    outline: 3px solid rgba(37, 99, 235, 0.16);
    outline-offset: 2px;
}

.stop-time-popover {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 15;
    min-width: min(260px, 78vw);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
}

.stop-time-popover label {
    display: grid;
    gap: var(--space-1);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.stop-time-popover input[type="time"] {
    width: 100%;
}

.stop-time-popover-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.stop-drag-handle,
.drag-handle {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-muted);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 2;
}

.stop-drag-handle:active,
.drag-handle:active {
    cursor: grabbing;
}

.stop-drag-handle:hover,
.stop-drag-handle:focus-visible,
.drag-handle:hover,
.drag-handle:focus-visible {
    border-color: rgba(37, 99, 235, 0.34);
    color: var(--color-primary-hover);
    outline: 3px solid rgba(37, 99, 235, 0.16);
    outline-offset: 2px;
}

.stop-drag-icon {
    width: 20px;
    height: 20px;
}

.sortable-chosen {
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: var(--shadow-md);
}

.sortable-ghost {
    display: grid;
    min-height: var(--dragged-stop-height, 112px);
    place-items: center;
    opacity: 1;
    outline: 2px dashed var(--color-primary);
    outline-offset: 3px;
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

.sortable-ghost > * {
    visibility: hidden;
}

.sortable-ghost::after {
    content: "Place stop here";
    visibility: visible;
    font-size: var(--text-sm);
    font-weight: 900;
}

.sortable-drag,
.sortable-fallback {
    box-shadow: var(--shadow-lg);
    cursor: grabbing;
}

.sortable-is-dragging,
.sortable-is-dragging * {
    cursor: grabbing;
}

.trip-reorder-list.is-sortable-target {
    outline: 2px dashed rgba(37, 99, 235, 0.24);
    outline-offset: 4px;
}

.sortable-empty-dropzone {
    display: grid;
    min-height: 72px;
    place-items: center;
    border: 2px dashed rgba(37, 99, 235, 0.42);
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    font-size: var(--text-sm);
    font-weight: 800;
    margin: var(--space-2) 0;
}

.itinerary-drag-preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    width: clamp(240px, 32vw, 320px);
    padding: var(--space-3);
    border: 1px solid rgba(37, 99, 235, 0.46);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
    opacity: 0.94;
    pointer-events: none;
    cursor: grabbing;
}

.itinerary-drag-preview__label {
    color: var(--color-primary-hover);
    font-size: var(--text-xs);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.itinerary-drag-preview__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.itinerary-drag-preview__icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary-hover);
}

.itinerary-drag-preview__title {
    margin-top: var(--space-1);
    font-size: var(--text-base);
    font-weight: 900;
    line-height: 1.25;
}

.itinerary-drag-preview__meta {
    margin-top: var(--space-1);
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.local-cross-day-drop-list {
    display: none;
}

.sortable-is-dragging .local-cross-day-drop-list {
    display: grid;
}

.sortable-is-dragging .route-connector {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .trip-reorder-stop {
        transition-duration: 1ms;
    }
}

.trip-save-status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.82);
    padding: 0.35rem 0.7rem;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.trip-save-status.is-saving {
    border-color: rgba(37, 99, 235, 0.28);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

.trip-save-status.is-saved {
    border-color: rgba(20, 184, 166, 0.28);
    color: var(--color-teal-dark);
}

.trip-save-status.is-error {
    border-color: rgba(220, 38, 38, 0.32);
    background: rgba(254, 226, 226, 0.78);
    color: var(--color-danger);
}

.trip-reorder-stop.just-moved,
.trip-day-stop.just-moved {
    animation: just-moved-highlight 1400ms ease;
}

@keyframes just-moved-highlight {
    0% {
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
    }
    100% {
        box-shadow: var(--shadow-sm);
    }
}

.trip-reorder-empty-note {
    margin: var(--space-3) 0 0;
}

.home-choice-hero {
    background:
        radial-gradient(circle at 82% 12%, rgba(249, 115, 96, 0.1), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 56%, var(--color-primary-soft) 100%);
}

.around-me-search,
.best-route-toolbar {
    background:
        linear-gradient(135deg, #ffffff, rgba(236, 253, 248, 0.56));
}

.hero {
    padding: 32px 22px;
}

.hero h1 {
    max-width: 760px;
    margin-bottom: var(--space-4);
    line-height: 1.08;
}

.hero-copy {
    max-width: 680px;
    margin-top: 0;
}

.hero-copy + .hero-copy {
    margin-top: var(--space-3);
}

.home-click-card {
    display: grid;
    grid-template-rows: 48px auto minmax(0, 1fr);
    gap: var(--space-3);
    min-height: 100%;
    padding: var(--space-5);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.home-click-card .home-feature-visual {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: var(--radius-lg);
}

.home-click-card .home-feature-icon,
.home-click-card .ui-icon {
    width: 24px;
    height: 24px;
}

.home-card-copy {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    min-width: 0;
}

.home-card-copy strong {
    display: block;
    color: var(--color-navy);
    font-size: var(--text-lg);
    line-height: 1.2;
}

.home-card-copy > span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.home-feature-card,
.seoul-popular-card {
    min-height: 218px;
}

.seoul-popular-card {
    height: 100%;
}

.route-best-for-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.route-best-for-summary strong {
    color: var(--color-text);
}

.city-guide-best-route-thumb {
    overflow: hidden;
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

.city-guide-best-route-thumb img,
.city-guide-best-route-thumb__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.city-guide-best-route-thumb img {
    object-fit: cover;
}

.city-guide-best-route-thumb .city-media__mascot-crop {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #eef6ff, #f7fbff);
}

.city-guide-best-route-thumb .city-media__mascot {
    width: 88%;
    height: 88%;
    max-width: 180px;
    max-height: 180px;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    transform: translate(var(--mascot-shift-x), var(--mascot-shift-y)) scale(var(--mascot-scale));
}

.city-guide-best-routes .compact-primary-button {
    min-height: 44px;
}

.city-guide-best-route-thumb__placeholder {
    display: grid;
    gap: 0.25rem;
    place-items: center;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.city-guide-best-route-thumb__placeholder strong,
.city-guide-best-route-thumb__placeholder span {
    display: block;
    letter-spacing: 0.04em;
}

.city-guide-best-route-thumb__placeholder strong {
    color: var(--color-text);
}

.city-guide-best-route-thumb__placeholder span {
    color: var(--muted);
    font-size: 0.74rem;
}

.home-category-grid {
    gap: 10px;
}

.home-category-card {
    position: relative;
    isolation: isolate;
    min-height: 198px;
    padding: 16px 14px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.home-category-card .home-action-card__mascot {
    position: absolute;
    top: 57%;
    left: 50%;
    z-index: 0;
    display: block;
    width: clamp(104px, 8.6vw, 124px);
    height: clamp(104px, 8.6vw, 124px);
    object-fit: contain;
    opacity: 0.94;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.home-category-card::after {
    content: none;
}

.home-category-icon {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--home-category-soft, var(--surface-muted));
    color: var(--home-category-color, var(--color-primary));
    box-shadow: none;
}

.home-category-label {
    display: block;
    margin-top: 2px;
    color: var(--home-category-color, var(--color-primary));
    font-size: 0.67rem;
    font-weight: 800;
    min-height: 2.45em;
    letter-spacing: 0.04em;
    line-height: 1.22;
    overflow: visible;
    overflow-wrap: anywhere;
    text-transform: uppercase;
    white-space: normal;
}

.home-category-card .home-card-copy > .home-action-card__category {
    display: block;
    min-height: 2.7em;
    overflow: visible;
    color: var(--home-category-color, var(--color-primary));
    line-height: 1.22;
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
}

.home-category-card .home-feature-copy {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    max-width: none;
    overflow: visible;
}

.home-action-card__bottom {
    display: grid;
    gap: 4px;
    margin-top: auto;
    overflow: visible;
}

.home-category-card .home-feature-copy strong {
    color: var(--color-text);
    font-size: 0.98rem;
    line-height: 1.18;
}

.home-action-card__description {
    display: block;
    overflow: visible;
    color: #4b5563;
    font-size: 0.84rem;
    line-height: 1.35;
}

.home-card-copy > .home-action-card__bottom .home-action-card__description {
    color: #4b5563;
}

.home-category-card--coral {
    --home-category-color: #e85d42;
    --home-category-soft: #fff0eb;
}

.home-category-card--mint {
    --home-category-color: #0f8f7a;
    --home-category-soft: #e8fbf5;
}

.home-category-card--blue {
    --home-category-color: #2563eb;
    --home-category-soft: #eaf1ff;
}

.home-category-card--amber {
    --home-category-color: #b77904;
    --home-category-soft: #fff6d8;
}

.home-category-card--violet {
    --home-category-color: #7c3aed;
    --home-category-soft: #f2ecff;
}

.home-category-card--slate {
    --home-category-color: #475569;
    --home-category-soft: #eef2f7;
}

.home-destination-grid {
    gap: var(--space-4);
}

.home-section-heading,
.city-explorer-heading-row,
.seoul-experience-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
}

.home-section-heading__copy,
.city-explorer-heading-row > div,
.seoul-experience-heading-row > div {
    min-width: 0;
}

.home-section-heading__more,
.city-explorer-more,
.seoul-experience-more {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 0.2rem 0 0.75rem;
    color: var(--color-primary);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
}

.home-section-heading__more::after,
.city-explorer-more::after,
.seoul-experience-more::after {
    margin-left: 0.35rem;
    content: "->";
}

.home-section-heading__more:hover,
.home-section-heading__more:focus-visible,
.city-explorer-more:hover,
.city-explorer-more:focus-visible,
.seoul-experience-more:hover,
.seoul-experience-more:focus-visible {
    color: var(--accent-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.city-destination-rail {
    display: flex;
    gap: var(--space-4);
    margin-inline: calc(var(--space-2) * -1);
    padding: var(--space-2);
    overflow-x: auto;
    overflow-y: visible;
    scroll-padding-inline: var(--space-2);
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.home-destination-card {
    position: relative;
    flex: 0 0 clamp(170px, 14vw, 188px);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--surface-muted);
    box-shadow: var(--shadow-md);
    scroll-snap-align: start;
}

.home-destination-media,
.home-destination-media img,
.home-destination-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.home-destination-media {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #dbeafe, #fef3c7);
}

.home-destination-media img {
    object-fit: cover;
    transition: transform 180ms ease;
}

.home-destination-placeholder {
    display: grid;
    place-items: center;
    color: rgba(15, 23, 42, 0.55);
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.home-destination-card::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.3) 38%, rgba(0, 0, 0, 0) 68%);
    content: "";
}

.home-destination-body {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: end;
    gap: 0.28rem;
    min-height: 100%;
    padding: var(--space-4);
    color: #ffffff;
}

.home-destination-body strong,
.home-city-card .home-destination-body strong {
    color: #ffffff;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.1;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.24);
}

.home-destination-body > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--text-sm);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-city-card .home-destination-meta {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    max-width: calc(100% - 24px);
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.78);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.home-destination-card:hover .home-destination-media img,
.home-destination-card:focus-visible .home-destination-media img {
    transform: scale(1.02);
}

.seoul-experience-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.seoul-experience-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #fff;
    color: var(--color-text);
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.seoul-experience-card__media {
    position: relative;
    display: flex;
    min-height: 170px;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    padding: 10px 12px 4px;
    overflow: hidden;
    background: var(--seoul-experience-soft, #eef2f7);
}

.seoul-experience-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.seoul-experience-card__media img.is-mascot {
    width: 100%;
    height: 100%;
    max-width: 155px;
    max-height: 155px;
    object-fit: contain;
    object-position: center;
    transform: none;
    margin: 0 auto;
}

.seoul-experience-card__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background: transparent;
    color: var(--seoul-experience-color, var(--color-primary));
}

.seoul-experience-card__placeholder.is-mascot {
    padding: 0;
}

.seoul-experience-card__mascot-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 155px;
    max-height: 155px;
    object-fit: contain;
    object-position: center;
}

.seoul-experience-card__placeholder-icon {
    width: 42px;
    height: 42px;
}

.seoul-experience-card__badge {
    position: absolute;
    left: 12px;
    top: 12px;
    max-width: calc(100% - 24px);
    padding: 0.32rem 0.56rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(10px);
}

.seoul-experience-card__body {
    display: grid;
    gap: 0.45rem;
    padding: 15px 16px 16px;
}

.seoul-experience-card__meta {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
}

.seoul-experience-card__body strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text);
    font-size: 1.08rem;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.seoul-experience-card__summary {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.seoul-experience-card:hover,
.seoul-experience-card:focus-visible {
    border-color: rgba(37, 99, 235, 0.26);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.seoul-experience-card:hover .seoul-experience-card__media img,
.seoul-experience-card:focus-visible .seoul-experience-card__media img {
    transform: scale(1.02);
}

.seoul-experience-card:hover .seoul-experience-card__mascot-image,
.seoul-experience-card:focus-visible .seoul-experience-card__mascot-image {
    transform: none;
}

.seoul-experience-card--kpop {
    --seoul-experience-color: #e85d42;
    --seoul-experience-soft: #fff0eb;
    --seoul-experience-soft-2: #fde68a;
}

.seoul-experience-card--first {
    --seoul-experience-color: #2563eb;
    --seoul-experience-soft: #eaf1ff;
    --seoul-experience-soft-2: #fef3c7;
}

.seoul-experience-card--hanok {
    --seoul-experience-color: #7c3aed;
    --seoul-experience-soft: #f2ecff;
    --seoul-experience-soft-2: #e0f2fe;
}

.seoul-experience-card--shop {
    --seoul-experience-color: #d9466a;
    --seoul-experience-soft: #fff1f2;
    --seoul-experience-soft-2: #fce7f3;
}

.seoul-experience-card--trend {
    --seoul-experience-color: #0f8f7a;
    --seoul-experience-soft: #e8fbf5;
    --seoul-experience-soft-2: #dbeafe;
}

.seoul-experience-card--kids {
    --seoul-experience-color: #b77904;
    --seoul-experience-soft: #fff6d8;
    --seoul-experience-soft-2: #dcfce7;
}

.seoul-experience-card--rain {
    --seoul-experience-color: #475569;
    --seoul-experience-soft: #eef2f7;
    --seoul-experience-soft-2: #e0f2fe;
}

.seoul-experience-card--walk {
    --seoul-experience-color: #15803d;
    --seoul-experience-soft: #ecfdf5;
    --seoul-experience-soft-2: #d9f99d;
}

@media (prefers-reduced-motion: reduce) {
    .seoul-experience-card,
    .seoul-experience-card__media img {
        transition: none;
    }
}

.home-category-card:hover,
.home-category-card:focus-visible,
.home-destination-card:hover,
.home-destination-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

.home-category-card:hover,
.home-category-card:focus-visible {
    border-color: var(--home-category-color, var(--color-primary));
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .home-destination-media img {
        transition: none;
    }
}

.best-route-card {
    display: flex;
    flex-direction: column;
}

.best-route-actions {
    margin-top: auto;
}

.home-category-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.home-destination-grid {
    grid-template-columns: none;
}

@media (min-width: 1024px) {
    .home-city-grid.home-destination-grid.city-destination-rail {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-4);
        margin-inline: 0;
        padding: 0;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .home-city-card.home-destination-card {
        width: auto;
        min-width: 0;
        flex: initial;
        scroll-snap-align: none;
    }

    .home-city-card .home-destination-meta {
        top: 12px;
        left: 12px;
        max-width: calc(100% - 24px);
        min-height: 24px;
        padding: 5px 10px;
        font-size: 11px;
    }
}

@media (min-width: 760px) and (max-width: 1023px) {
    .home-city-grid.home-destination-grid.city-destination-rail {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
        margin-inline: 0;
        padding: 0;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .home-city-card.home-destination-card {
        width: auto;
        min-width: 0;
        flex: initial;
        scroll-snap-align: none;
    }

    .home-city-card .home-destination-meta {
        top: 10px;
        left: 10px;
        max-width: calc(100% - 20px);
        min-height: 23px;
        padding: 4px 9px;
        font-size: 10.5px;
    }
}

@media (min-width: 900px) and (max-width: 1279px) {
    .seoul-city-guide .city-guide-card-grid--three,
    .seoul-city-guide .city-guide-card-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seoul-city-guide .events-weather-event-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .seoul-city-guide .city-guide-card-grid--three,
    .seoul-city-guide .city-guide-card-grid--four {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 760px) and (max-width: 899px) {
    .seoul-city-guide .city-guide-card-grid--three,
    .seoul-city-guide .city-guide-card-grid--four,
    .seoul-city-guide .city-guide-walking-secondary,
    .seoul-city-guide .events-weather-event-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .city-guide-hero--seoul,
    .seoul-route-collections-hero {
        grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
    }

    .region-hero__media {
        border-radius: 18px;
    }

    .seoul-route-hero-media {
        min-height: 0;
    }

    .city-guide-hero__visual img {
        width: min(100%, 144px);
        max-height: 154px;
    }
}

@media (min-width: 760px) {
    .site-header-inner {
        padding: 14px 28px;
    }

    .desktop-nav,
    .site-actions {
        display: flex;
    }

    .mobile-header-actions {
        display: none;
    }

    .mobile-bottom-nav {
        display: none;
    }

    .desktop-nav,
    .site-actions {
        min-width: 0;
    }

    .page-shell {
        padding: 44px 28px 56px;
    }

    .hero {
        padding: 40px 28px;
    }

    .share-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .share-tools-header {
        grid-column: 1 / -1;
    }

    .action-group {
        border-top: 1px solid var(--line);
    }

    .card-header {
        padding: 28px;
    }

    .trip-form {
        padding: 28px;
    }

    .interests-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (min-width: 901px) {
        .interests-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    .guide-section {
        gap: 18px;
        margin-top: 30px;
    }

    .guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .city-grid,
    .tool-grid,
    .future-grid,
    .essentials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-card {
        padding: 22px;
    }

    .footer-inner {
        padding: 28px;
    }

    .secondary-link {
        width: fit-content;
        min-width: 220px;
        padding: 0 22px;
    }

    .route-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-action-card-grid,
    .guide-compact-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .site-brand__icon {
        width: 34px;
        height: 34px;
    }

    .supported-cities-hero {
        grid-template-columns: minmax(0, 1fr) minmax(150px, 0.36fr);
    }

    .supported-cities-hero--photo-bg {
        grid-template-columns: minmax(0, 1fr);
    }

    .supported-city-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .best-route-detail-hero {
        grid-template-columns: 1fr;
    }

    .home-feature-grid,
    .home-city-grid,
    .seoul-popular-grid,
    .route-detail-stop-list,
     .compact-guide-grid,
     .city-region-grid,
     .events-weather-event-grid,
     .events-weather-forecast-grid,
     .city-guide-card-grid--three,
     .city-guide-card-grid--four,
     .city-guide-glance-list {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

    .home-category-grid,
    .home-destination-grid,
    .seoul-experience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-destination-card {
        flex-basis: 174px;
    }

    .events-weather-summary-card {
        grid-template-columns: 1fr;
    }

    .city-guide-events {
        grid-template-columns: 1fr;
    }

    .seoul-featured-experience {
        grid-template-columns: 1fr;
    }

    .seoul-route-collections-hero {
        grid-template-columns: 1fr;
    }

    .route-intro-step-grid,
    .route-footer-actions {
        grid-template-columns: 1fr;
    }

    .route-detail-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .route-detail-hero .seoul-route-hero-media.city-media--mascot {
        min-height: clamp(190px, 28vw, 260px);
    }

    .route-detail-hero .seoul-route-hero-media.city-media--mascot .city-media__mascot {
        width: min(68%, 230px);
        max-width: 230px;
        max-height: 230px;
    }

    .route-footer-actions__links {
        justify-content: stretch;
    }

    .route-footer-actions__links .ready-made-route-card__action {
        flex: 1 1 180px;
    }

    .seoul-featured-experience__image,
    .seoul-featured-experience__placeholder {
        min-height: 260px;
    }

    .city-guide-walking-secondary {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 760px) and (max-width: 899px) {
    .seoul-route-collections-hero {
        grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
    }

    .seoul-route-hero-media {
        min-height: 0;
    }

    .route-detail-hero .seoul-route-hero-media.city-media--mascot {
        min-height: 230px;
    }
}

@media (max-width: 620px) {
    .best-route-detail-actions,
    .best-route-day-grid,
    .best-route-review-highlight-grid,
    .best-route-detail-final-cta {
        grid-template-columns: 1fr;
    }

    .supported-cities-hero {
        grid-template-columns: 1fr;
    }

    .supported-cities-hero__visual {
        min-height: 150px;
    }

    .supported-cities-hero__visual img {
        width: clamp(130px, 42vw, 190px);
    }

    .supported-city-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .best-route-detail-final-cta {
        display: grid;
    }

    .home-feature-grid,
    .home-city-grid,
    .seoul-popular-grid,
    .route-detail-stop-list,
     .compact-guide-grid,
     .city-region-grid,
     .events-weather-event-grid,
     .events-weather-plan-grid,
     .events-weather-source-grid,
     .events-weather-guidance-grid,
     .events-weather-forecast-grid,
     .events-weather-city-form,
     .city-guide-card-grid--three,
     .city-guide-card-grid--four,
     .city-guide-glance-list {
         grid-template-columns: 1fr;
     }

    .route-detail-summary-card,
    .route-detail-stop-card {
        padding: var(--space-4);
    }

    .route-detail-summary-grid,
    .route-detail-stop-card__metrics {
        grid-template-columns: 1fr;
    }

    .route-detail-summary-item--wide {
        grid-column: span 1;
    }

    .seoul-route-collections-hero {
        padding: var(--space-5);
    }

    .seoul-route-hero-media {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .seoul-route-hero-media__fallback .city-media__mascot {
        width: min(76%, 180px);
        height: auto;
        max-width: 180px;
        max-height: 180px;
    }

    .route-detail-hero .route-hero-actions {
        width: 100%;
    }

    .route-detail-hero .route-hero-actions .ready-made-route-card__action {
        min-width: 0;
        width: 100%;
    }

    .route-detail-hero .seoul-route-hero-media.city-media--mascot {
        min-height: 190px;
    }

    .route-detail-hero .seoul-route-hero-media.city-media--mascot .city-media__mascot {
        width: min(68%, 180px);
        max-width: 180px;
        max-height: 180px;
    }

    .route-detail-stop-card__fallback .city-media__mascot,
    .route-detail-stop-card__media .city-media__mascot {
        width: min(70%, 154px);
        max-width: 154px;
    }

    .route-intro-step-grid li,
    .seoul-route-step {
        align-items: flex-start;
        min-height: 68px;
    }

    .route-intro-step-number,
    .seoul-route-step__number {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .route-collection-card .route-card-actions,
    .route-footer-actions__links {
        display: grid;
        grid-template-columns: 1fr;
    }

    .route-footer-actions {
        align-items: stretch;
    }

    .route-collection-card .ready-made-route-card__action,
    .route-footer-actions__links .ready-made-route-card__action,
    .route-hero-actions .primary-button,
    .route-hero-actions .secondary-link {
        width: 100%;
    }

    .home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-destination-grid {
        grid-template-columns: 1fr;
    }

    .home-section-heading,
    .city-explorer-heading-row {
        align-items: start;
        gap: var(--space-3);
    }

    .home-section-heading__more,
    .city-explorer-more {
        align-self: start;
        font-size: 0.9rem;
    }

    .city-destination-rail {
        gap: var(--space-3);
        margin-inline: calc(var(--space-3) * -1);
        padding-inline: var(--space-3);
        scrollbar-width: none;
    }

    .city-destination-rail::-webkit-scrollbar {
        display: none;
    }

    .home-destination-card {
        flex-basis: clamp(150px, 46vw, 168px);
        border-radius: 16px;
    }

    .home-city-card .home-destination-meta {
        top: 9px;
        left: 9px;
        max-width: calc(100% - 18px);
        min-height: 22px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .seoul-experience-card {
        border-radius: 16px;
    }

    .seoul-experience-card__media {
        min-height: 154px;
    }

    .seoul-experience-card__media img.is-mascot,
    .seoul-experience-card__mascot-image {
        max-width: 142px;
        max-height: 142px;
    }

    .seoul-experience-card__body {
        padding: 14px;
    }

    .seoul-experience-card__body strong {
        font-size: 1rem;
    }

    .seoul-experience-card__summary {
        -webkit-line-clamp: 2;
    }

    .home-feature-card {
        min-height: 0;
    }

    .hero {
        padding: 32px 22px;
    }

    .home-click-card {
        padding: var(--space-5);
    }

    .home-category-card.home-click-card {
        min-height: 142px;
        padding: 14px 12px;
    }

    .seoul-hero__actions,
    .seoul-hero__action,
    .city-guide-activity-more summary,
    .city-guide-activity-more summary span {
        width: 100%;
    }

    .seoul-hero__action {
        min-width: 0;
    }

    .seoul-featured-experience {
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .seoul-featured-experience__image,
    .seoul-featured-experience__placeholder {
        min-height: 220px;
    }

    .seoul-featured-experience__actions,
    .seoul-featured-experience__actions .primary-button {
        width: 100%;
    }
}

@media (max-width: 340px) {
    .seoul-experience-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1120px) {
    .site-header-inner {
        padding: 14px 34px;
    }

    .page-shell {
        padding: 52px 34px 64px;
    }

    .hero {
        padding: 48px 40px;
    }

    .results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
        align-items: start;
    }

    .day-card-header {
        padding: 26px 26px 10px;
    }

    .stop-list {
        padding: 18px 26px 26px;
    }

    .stop-photo img {
        height: 190px;
    }

    .route-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }

    .guide-action-card-grid {
        gap: 20px;
    }

    .guide-compact-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .guide-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    .city-grid,
    .tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .essentials-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .review-sort {
        width: 100%;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
    }

    .review-sort__options {
        width: 100%;
    }

    .review-sort__option {
        flex: 1;
        min-width: 0;
        padding-inline: 10px;
    }

    .cloud-trip-title-form {
        grid-template-columns: 1fr;
    }

    .cloud-trip-title-form .primary-button {
        width: 100%;
        justify-content: center;
    }

    .suggested-place-add-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 820px) {
    .route-grid.saved-itinerary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 759px) {
    body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .site-header-inner {
        min-height: 56px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 8px 16px;
    }

    .site-brand {
        font-size: 1rem;
    }

    .site-brand__icon {
        width: 32px;
        height: 32px;
    }

    .page-shell {
        padding: 16px 16px calc(104px + env(safe-area-inset-bottom));
    }

    .hero {
        padding: 32px 22px;
    }

    .home-choice-hero {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        min-height: 240px;
        margin: 12px 0 18px;
        border-radius: 20px;
        padding: 28px 20px;
        align-content: center;
    }

    .home-choice-hero--photo-bg {
        min-height: 280px;
        padding: 32px 22px;
    }

    .home-choice-hero--photo-bg::after {
        background: linear-gradient(90deg, rgba(248, 251, 255, 0.95) 0%, rgba(248, 251, 255, 0.82) 48%, rgba(248, 251, 255, 0.2) 100%);
    }

    .home-choice-hero--photo-bg .home-hero-copy {
        max-width: min(420px, 78%);
    }

    .home-hero-mascot {
        order: -1;
        min-height: 150px;
    }

    .home-choice-hero--photo-bg .home-hero-mascot {
        order: initial;
        min-height: 0;
    }

    .home-hero-mascot__image {
        width: min(100%, 118px);
        max-height: 140px;
    }

    .home-hero-mascot__image--photo {
        width: min(100%, 360px);
        max-height: 170px;
    }

    .home-choice-hero--photo-bg .home-hero-mascot__image--photo {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        object-position: 58% center;
    }

    .home-choice-hero h1 {
        max-width: 760px;
        margin-bottom: 16px;
        font-size: clamp(1.82rem, 8.5vw, 2.125rem);
        line-height: 1.08;
    }

    .home-choice-hero .hero-copy {
        display: -webkit-box;
        overflow: hidden;
        max-width: 680px;
        font-size: 1rem;
        line-height: 1.5;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .home-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .home-feature-card,
    .home-click-card {
        min-height: 176px;
        padding: 18px 14px;
        text-align: left;
    }

    .home-category-card.home-click-card {
        gap: 7px;
        min-height: 182px;
        padding: 14px 10px 12px;
    }

    .home-category-card .home-action-card__mascot {
        top: 56%;
        width: clamp(82px, 24vw, 100px);
        height: clamp(82px, 24vw, 100px);
    }

    .home-category-card .home-feature-copy {
        gap: 10px;
    }

    .home-category-icon {
        width: 44px;
        height: 44px;
    }

    .home-card-copy {
        justify-items: start;
    }

    .home-category-label {
        font-size: 0.62rem;
    }

    .home-category-card .home-feature-copy strong {
        font-size: 0.94rem;
    }

    .home-action-card__description {
        font-size: 0.78rem;
    }

    .seoul-experience-card__media {
        min-height: 148px;
    }

    .seoul-experience-card__media img.is-mascot,
    .seoul-experience-card__mascot-image {
        max-width: 136px;
        max-height: 136px;
    }

    .home-card-copy strong {
        font-size: 1rem;
        line-height: 1.2;
    }

    .home-card-copy > span {
        -webkit-line-clamp: 1;
    }

    .home-card-copy > .home-action-card__bottom {
        display: grid;
        overflow: visible;
        -webkit-box-orient: unset;
        -webkit-line-clamp: unset;
    }

    .home-card-copy > .home-action-card__category {
        display: block;
        overflow: visible;
        -webkit-box-orient: unset;
        -webkit-line-clamp: unset;
    }

    .home-action-card__description {
        display: block;
        overflow: visible;
        color: #4b5563;
        -webkit-box-orient: unset;
        -webkit-line-clamp: unset;
    }

    .home-card-copy > .home-action-card__bottom .home-action-card__description {
        color: #4b5563;
    }

    .planner-card {
        border-radius: 18px;
    }

    .plan-hero {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .plan-hero__mascot {
        width: clamp(130px, 42vw, 178px);
        max-height: 190px;
        justify-self: center;
    }

    .plan-hero__mascot--photo {
        width: min(100%, 360px);
        max-height: 170px;
    }

    .plan-hero--photo-bg {
        min-height: 270px;
        padding: 30px 20px;
    }

    .plan-hero--photo-bg::after {
        background: linear-gradient(90deg, rgba(248, 251, 255, 0.95) 0%, rgba(248, 251, 255, 0.82) 48%, rgba(248, 251, 255, 0.2) 100%);
    }

    .plan-hero--photo-bg .plan-hero__copy {
        max-width: min(420px, 80%);
    }

    .plan-hero--photo-bg .plan-hero__mascot--photo {
        width: 100%;
        height: 100%;
        max-height: none;
        object-position: 58% center;
    }

    .card-header {
        padding: 18px 16px 4px;
    }

    .card-header p {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .trip-form {
        gap: 14px;
        padding: 16px;
    }

    .form-step,
    .personalization-panel {
        position: relative;
        gap: 14px;
        border: 1px solid var(--color-border);
        border-radius: 16px;
        background: #ffffff;
        padding: 46px 14px 14px;
        box-shadow: var(--shadow-sm);
    }

    .form-step:first-child {
        border-top: 1px solid var(--color-border);
        padding-top: 46px;
    }

    .mobile-plan-step::before {
        position: absolute;
        top: 14px;
        left: 14px;
        display: inline-flex;
        min-height: 22px;
        align-items: center;
        border-radius: var(--radius-pill);
        background: var(--color-primary-soft);
        color: var(--color-primary-hover);
        padding: 0 9px;
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        content: attr(data-mobile-step);
    }

    .form-step-header {
        gap: 4px;
    }

    .form-step-header h3 {
        font-size: 1.05rem;
    }

    .form-step-header p,
    .field-help {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .field-group {
        gap: 8px;
    }

    select,
    input[type="text"],
    input[type="date"],
    textarea {
        min-height: 50px;
        border-radius: 12px;
        font-size: 16px;
    }

    .days-grid {
        gap: 8px;
    }

    .choice-grid label > span {
        min-height: 46px;
        border-radius: 999px;
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    .choice-grid input:checked + span {
        border-color: var(--color-primary);
        background: var(--color-primary);
        color: #ffffff;
    }

    .interest-groups {
        gap: 12px;
    }

    .interest-group h4 {
        display: none;
    }

    .interests-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .interest-card-body {
        min-height: 178px;
        border-radius: 15px;
        padding: 12px 9px 14px;
    }

    .trip-length-grid {
        gap: 8px;
    }

    .trip-length-option__body {
        min-height: 122px;
        border-radius: 14px;
        padding: 13px 7px;
    }

    .trip-length-option__number {
        font-size: clamp(1.65rem, 9vw, 2.25rem);
    }

    .trip-length-option__description {
        font-size: 0.72rem;
    }

    .trip-length-option__check {
        top: 7px;
        right: 7px;
        width: 21px;
        height: 21px;
    }

    .trip-date-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }

    .trip-date-card__icon {
        width: 42px;
        height: 42px;
    }

    .interest-card-description {
        display: block;
        overflow: visible;
        color: #4b5563;
        font-size: 0.75rem;
        line-height: 1.3;
        text-overflow: clip;
        white-space: normal;
    }

    .interest-card-title {
        font-size: 0.88rem;
    }

    .interest-card-mascot {
        width: clamp(68px, 23vw, 86px);
        height: clamp(68px, 23vw, 86px);
    }

    .interest-card-check {
        top: 8px;
        right: 8px;
        width: 22px;
        height: 22px;
    }

    .mobile-interest-more {
        display: none;
    }

    .personalization-panel summary {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        border-radius: 12px;
        padding: 0 14px;
    }

    .personalization-panel summary span {
        color: var(--color-muted);
        font-size: 0.84rem;
        font-weight: 800;
    }

    .travel-style-card {
        padding: 0;
        overflow: hidden;
    }

    .travel-style-card.mobile-plan-step::before {
        z-index: 2;
    }

    .travel-style-card .travel-style-card__summary {
        min-height: 112px;
        border-radius: 0;
        background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
        padding: 46px 14px 14px;
    }

    .travel-style-card__summary .section-label {
        color: var(--color-primary-hover);
        font-size: 0.72rem;
        font-weight: 900;
    }

    .travel-style-card__heading strong {
        color: var(--color-text);
        font-size: 1.05rem;
    }

    .travel-style-card__meta {
        color: #4b5563;
        font-size: 0.82rem;
        font-weight: 700;
    }

    .travel-style-card__action {
        padding: 7px 9px;
        font-size: 0.78rem;
    }

    .personalization-fields {
        box-shadow: none;
    }

    .mobile-create-step {
        padding: 14px;
    }

    .mobile-create-step::before {
        display: none;
    }

    .mobile-create-step .primary-button,
    .save-trip-button {
        width: 100%;
        min-height: 52px;
        justify-content: center;
    }

    .planner-next-steps {
        display: none;
    }

    .plan-trip-tools {
        display: grid;
        padding: 46px 14px 14px;
    }

    .share-tools {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .save-manage-action-group {
        order: -1;
    }

    .share-tools-header,
    .itinerary-action-group h3,
    .save-manage-action-group h3,
    .print-helper {
        display: none;
    }

    .itinerary-action-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .itinerary-action-row .secondary-link,
    .trip-header-action {
        min-width: 0;
        min-height: 44px;
        padding: 0 12px;
        font-size: 0.9rem;
    }

    .results-grid,
    .route-grid.saved-itinerary-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .day-card {
        border-radius: 16px;
    }

    .day-card-header {
        padding: 18px 16px 6px;
    }

    .day-card-header h2 {
        font-size: 1.25rem;
    }

    .stop-list {
        gap: 14px;
        padding: 14px 14px 16px;
    }

    .stop-item {
        gap: 10px;
        border-radius: 16px;
        padding: 14px;
    }

    .stop-item h3 {
        font-size: 1.08rem;
    }

    .stop-item p:not(.stop-time):not(.section-label):not(.route-connector__from):not(.route-connector__to) {
        display: -webkit-box;
        overflow: hidden;
        line-height: 1.5;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .stop-photo img,
    .nearby-candidate-image,
    .replacement-option-thumb img {
        aspect-ratio: 16 / 9;
        height: auto;
        object-fit: cover;
    }

    .stop-photo img {
        border-radius: 12px;
    }

    .stop-photo figcaption,
    .stop-photo .place-photo-credit {
        font-size: 0.75rem;
        line-height: 1.35;
    }

    .stop-photo-placeholder-box {
        min-height: 0;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }

    .maps-link,
    .replace-toggle,
    .stop-edit-proxy,
    .stop-delete-button,
    .route-map-link,
    .suggested-place-add-button,
    .compact-primary-button,
    .compact-secondary-button,
    .stop-more-details > summary {
        min-height: 44px;
    }

    .stop-action-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .stop-action-row .maps-link,
    .stop-action-row .stop-edit-proxy {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

    .route-connector {
        gap: 10px;
        margin: 6px 0;
        border-left-width: 2px;
        padding: 10px 0 10px 14px;
    }

    .route-connector__summary {
        gap: 4px;
    }

    .route-connector__summary::before {
        color: var(--color-primary-hover);
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        content: "Getting to the next stop";
    }

    .route-map-links {
        display: grid;
        grid-template-columns: 1fr;
    }

    .route-map-link {
        width: 100%;
    }

    .replacement-options {
        max-height: min(70vh, 520px);
        overflow-y: auto;
        border: 1px solid var(--color-border);
        border-radius: 14px;
        background: #f8fbff;
        padding: 14px;
        gap: 18px;
    }

    .replacement-options .replacement-option-button {
        min-height: 44px;
    }

    .replacement-candidate-card__body {
        grid-template-columns: 1fr;
    }

    .replacement-option-thumb {
        width: 100%;
        height: 118px;
        justify-self: stretch;
    }

    .replacement-option-thumb img.is-mascot,
    .replacement-option-thumb__mascot {
        width: min(94px, 82%);
        height: min(94px, 82%);
    }

    .replacement-options .replacement-option-button {
        width: auto;
        min-width: 126px;
    }

    .cloud-trip-title-form,
    .trip-header-actions,
    .trip-overview__days {
        grid-template-columns: 1fr;
    }

    .cloud-trip-title-form .primary-button,
    .trip-header-action {
        width: 100%;
        justify-content: center;
    }

    .stop-edit-details[open] .stop-edit-panel {
        inset: auto 10px calc(10px + env(safe-area-inset-bottom));
        max-height: min(78vh, 620px);
        width: auto;
        overflow-y: auto;
        border-radius: 18px;
    }

    .auth-page,
    .account-page,
    .public-trip-share-page,
    .error-state-page {
        padding-right: 16px;
        padding-left: 16px;
    }

    .auth-hero,
    .account-hero,
    .public-share-hero {
        padding: 28px 20px;
    }

    .auth-hero .hero-copy,
    .account-hero .hero-copy,
    .public-share-hero .hero-copy {
        display: -webkit-box;
        overflow: hidden;
        max-width: 680px;
        line-height: 1.5;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .mobile-form-card,
    .auth-panel,
    .account-card,
    .account-action-card,
    .account-data-summary,
    .account-danger-zone,
    .public-share-notice,
    .best-route-submit-panel {
        max-width: none;
        border-radius: 18px;
        padding: 16px;
    }

    .mobile-auth-form,
    .auth-form,
    .account-danger-form,
    .mobile-best-route-submit-form {
        gap: 12px;
    }

    .mobile-auth-form label,
    .auth-form label,
    .mobile-best-route-submit-form label {
        gap: 7px;
    }

    .auth-form input,
    .auth-form textarea,
    .auth-form select,
    .mobile-best-route-submit-form input,
    .mobile-best-route-submit-form textarea,
    .mobile-best-route-submit-form select {
        min-height: 50px;
        border-radius: 12px;
        font-size: 16px;
    }

    .auth-form .primary-button,
    .auth-link-row .secondary-link,
    .account-card .secondary-link,
    .account-card .primary-button,
    .account-action-card .secondary-link,
    .account-action-card .primary-button,
    .account-danger-form .primary-button,
    .mobile-best-route-submit-form .primary-button,
    .best-route-submit-empty .secondary-link,
    .mobile-empty-state .primary-button,
    .mobile-empty-state .secondary-link {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .auth-link-row,
    .account-overview-grid,
    .account-action-row,
    .cloud-trip-primary-actions {
        grid-template-columns: 1fr;
    }

    .account-mobile-card > p,
    .account-card__description,
    .account-data-summary p,
    .account-danger-zone p,
    .best-route-submit-panel .route-section-header > p:not(.section-label):not(.field-help) {
        display: -webkit-box;
        overflow: hidden;
        line-height: 1.5;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .account-danger-form {
        display: grid;
    }

    .account-danger-form .checklist-item {
        align-items: start;
        border-radius: 14px;
        padding: 12px;
    }

    .public-share-badge {
        display: inline-flex;
        width: fit-content;
        min-height: 28px;
        align-items: center;
        border-radius: var(--radius-pill);
        background: var(--color-primary-soft);
        color: var(--color-primary-hover);
        padding: 0 10px;
    }

    .public-share-meta {
        font-weight: 800;
    }

    .public-share-notice {
        display: grid;
        gap: 8px;
    }

    .public-share-day-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .public-share-day-card,
    .public-share-stop {
        border-radius: 16px;
    }

    .public-share-stop {
        display: grid;
        gap: 8px;
        border: 1px solid var(--color-border);
        background: #ffffff;
        padding: 12px;
    }

    .public-share-stop h4,
    .public-share-stop p {
        margin: 0;
    }

    .public-share-stop-photo {
        margin: 0;
    }

    .public-share-stop-photo img {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        object-fit: cover;
    }

    .public-share-actions,
    .mobile-action-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .public-share-actions .secondary-link,
    .mobile-action-row .primary-button,
    .mobile-action-row .secondary-link,
    .mobile-action-row button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .best-route-submission-status {
        display: grid;
        gap: 6px;
        align-items: start;
    }

    .best-route-tag-options,
    .best-route-recommendation-tags-fieldset {
        gap: 8px;
    }

    .checkbox-chip span,
    .best-route-tag-options label {
        min-height: 44px;
        align-items: center;
    }

    .best-route-photo-upload,
    .custom-file-picker {
        border-radius: 16px;
    }

    .custom-file-picker {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mobile-empty-state,
    .error-state-card {
        justify-items: start;
        border-radius: 18px;
        padding: 18px;
    }

    .mobile-empty-state h1,
    .mobile-empty-state h3,
    .error-state-card h1 {
        overflow-wrap: anywhere;
        line-height: 1.12;
    }

    .error-state-page {
        min-height: calc(100svh - 180px);
        align-items: start;
        padding-top: 18px;
    }

    .confirm-dialog,
    .replacement-confirm-dialog {
        width: calc(100% - 24px);
        max-width: 420px;
        max-height: min(78dvh, 620px);
        overflow-y: auto;
        border-radius: 20px;
    }

    .confirm-dialog form {
        display: grid;
        gap: 12px;
    }

    .dialog-actions,
    .confirm-dialog-actions {
        grid-template-columns: 1fr;
    }

    .trip-toast,
    .share-message {
        right: 16px;
        bottom: calc(96px + env(safe-area-inset-bottom));
        left: 16px;
        max-width: none;
    }

    .mobile-sheet-overlay,
    .mobile-bottom-sheet__backdrop {
        position: fixed;
        inset: 0;
        z-index: 54;
        background: rgba(15, 23, 42, 0.42);
    }

    .mobile-bottom-sheet {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 55;
        display: flex;
        max-height: min(70dvh, 640px);
        flex-direction: column;
        overflow: hidden;
        border-radius: 22px 22px 0 0;
        background: #ffffff;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -18px 44px rgba(15, 23, 42, 0.18);
    }

    .mobile-bottom-sheet__header,
    .mobile-bottom-sheet__footer {
        flex: 0 0 auto;
        padding: 14px 16px;
    }

    .mobile-bottom-sheet__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 0 16px 16px;
    }

    .mobile-bottom-sheet__close {
        display: inline-grid;
        min-width: 44px;
        min-height: 44px;
        place-items: center;
        border: 1px solid var(--color-border);
        border-radius: 999px;
        background: #ffffff;
        color: var(--color-muted);
    }

    .around-me-search,
    .transportation-search,
    .transportation-results,
    .transportation-explorer,
    .transportation-city-guides,
    .transportation-basics,
    .transportation-taxi-guide,
    .transportation-airport-tips,
    .transportation-add-panel,
    .transport-region-panel,
    .best-route-toolbar,
    .best-route-section,
    .events-weather-section,
    .city-guide-glance,
    .city-guide-events,
    .city-guide-final {
        border-radius: 18px;
    }

    .around-me-search > .section-label,
    .around-me-search > h2 {
        display: none;
    }

    .around-me-mode-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .around-me-hero__mascot {
        width: clamp(92px, 30vw, 122px);
        max-height: 132px;
    }

    .around-me-hero.plan-hero--photo-bg .around-me-hero__mascot {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        object-position: center;
    }

    .around-search-option__summary {
        min-height: 82px;
        border-radius: 16px;
        gap: 10px;
        padding: 12px;
    }

    .around-search-option__summary img {
        width: 52px;
        height: 52px;
    }

    .around-search-option__copy strong {
        font-size: 0.95rem;
    }

    .around-search-option__copy span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 0.84rem;
    }

    .around-me-mode-card {
        min-height: 54px;
        border-radius: 16px;
        padding: 12px 14px;
    }

    .around-me-mode-card small {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .around-me-category-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .around-me-interest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .around-me-interest-card .interest-card-body {
        min-height: 136px;
        padding: 10px 8px;
    }

    .around-me-interest-card .interest-card-mascot {
        width: 58px;
        height: 58px;
    }

    .around-me-category-card span {
        min-height: 44px;
        border-radius: var(--radius-pill);
        padding: 0 13px;
        font-size: 0.88rem;
    }

    .around-me-location-panel,
    .around-me-consent-panel,
    .around-me-add-panel,
    .around-me-results-section {
        border-radius: 16px;
        padding: 14px;
    }

    .around-me-results,
    .nearby-candidate-list {
        grid-template-columns: 1fr;
    }

    .around-me-results .nearby-candidate-card,
    .nearby-candidate-card {
        gap: 8px;
        border-radius: 16px;
        padding: 12px;
    }

    .nearby-candidate-image {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        object-fit: cover;
    }

    .nearby-candidate-note {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .around-me-results .nearby-candidate-map-links,
    .nearby-candidate-map-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .around-me-results .nearby-candidate-map-links .secondary-link,
    .nearby-candidate-map-links .secondary-link {
        min-width: 0;
        min-height: 40px;
        padding: 7px 5px;
        font-size: 0.76rem;
    }

    .around-me-results .nearby-candidate-directions {
        min-height: 42px;
    }

    .transportation-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .transportation-search,
    .transportation-results,
    .transportation-explorer,
    .transportation-city-guides,
    .transportation-basics,
    .transportation-taxi-guide,
    .transportation-airport-tips,
    .transportation-add-panel {
        padding: 16px;
    }

    .transportation-location-field {
        gap: 8px;
    }

    .transportation-location-field label,
    .transportation-preference-field > span {
        color: var(--color-primary-hover);
        font-size: 0.75rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .transportation-location-field input[role="combobox"],
    .transportation-form-grid select {
        min-height: 50px;
        border-radius: 14px;
        font-size: 16px;
    }

    .transportation-swap-cell {
        justify-content: center;
    }

    .transportation-swap-button {
        width: auto;
        min-width: 112px;
        border-radius: var(--radius-pill);
    }

    .transportation-hero {
        min-height: 270px;
        padding: 28px 22px;
    }

    .transportation-hero::after {
        background: linear-gradient(90deg, rgba(248, 251, 255, 0.98) 0%, rgba(248, 251, 255, 0.9) 54%, rgba(248, 251, 255, 0.36) 100%);
    }

    .transportation-hero__copy {
        max-width: 72%;
    }

    .transportation-hero__mascot {
        object-position: 58% center;
    }

    .transport-resource-grid,
    .transport-comparison-grid,
    .transport-how-to-grid,
    .transport-city-guide-grid,
    .transport-city-guide-panel,
    .transport-basics-layout,
    .transport-airport-tip-grid,
    .transport-taxi-step-grid {
        grid-template-columns: 1fr;
    }

    .transport-resource-card,
    .transport-airport-tip-card {
        padding: 14px;
    }

    .transportation-city-guides .transport-city-guide-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "visual"
            "body"
            "links";
        min-height: 0;
    }

    .transportation-city-guides .transport-city-guide-card__visual {
        max-width: 220px;
        height: auto;
        min-height: 180px;
        justify-self: center;
    }

    .transport-city-guide-link-groups {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .transport-city-guide-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transport-resource-card {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px 14px;
    }

    .transport-resource-card__visual {
        width: 96px;
        height: 96px;
    }

    .transport-resource-card__visual img {
        width: 100%;
        height: 100%;
    }

    .transport-airport-tip-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "visual"
            "body"
            "link";
    }

    .transport-airport-tip-card > .transport-guide-link {
        justify-self: stretch;
        min-width: 0;
        width: 100%;
    }

    .transport-priority-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transport-priority-card {
        grid-template-columns: none;
        grid-template-rows: minmax(104px, auto) auto;
        min-height: 172px;
    }

    .transport-priority-card__icon {
        width: 100%;
        height: 104px;
    }

    .transport-comparison-card__top {
        grid-template-columns: 1fr;
    }

    .transport-other-ways .transport-comparison-card {
        grid-template-columns: 104px minmax(0, 1fr);
        grid-template-areas:
            "visual body"
            "actions actions";
    }

    .transport-other-ways .transport-option-photo {
        width: 104px;
        height: 104px;
        aspect-ratio: 1 / 1;
    }

    .transport-mode-photo {
        aspect-ratio: 1 / 1;
        min-height: 0;
        height: auto;
    }

    .transport-option-photo {
        aspect-ratio: 16 / 10;
        min-height: 0;
        height: auto;
    }

    .transport-journey-leg {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .transport-comparison-card--recommended .transport-journey-leg {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .transport-journey-leg__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .transport-journey-leg__resource {
        width: 100%;
        min-height: 46px;
    }

    .transport-journey-leg__resource span {
        font-size: 0.8rem;
    }

    .transport-journey-leg__photo {
        width: 78px;
        height: 58px;
    }

    .transport-comparison-card--recommended .transport-journey-leg__photo {
        width: 78px;
        height: 58px;
    }

    .transport-card-how-to .transport-journey-leg__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .transport-card-how-to .transport-journey-leg__resource {
        max-width: 100%;
        min-height: 30px;
    }

    .transport-resource-card__links {
        grid-column: 1 / -1;
    }

    .transport-map-schematic {
        min-height: 200px;
    }

    .transport-map-schematic figure {
        min-height: 0;
    }

    .transport-map-schematic img {
        max-height: 260px;
    }

    .transport-basics-step,
    .transport-taxi-step {
        min-height: auto;
    }

    .transport-taxi-step {
        grid-template-columns: 28px 64px minmax(0, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "number photo title"
            "number photo body";
        justify-items: start;
        align-items: center;
        gap: 4px 10px;
        min-height: 88px;
        padding: 10px 12px;
        text-align: left;
    }

    .transport-taxi-step .transport-step-number {
        grid-area: number;
        align-self: start;
        justify-self: start;
    }

    .transportation-taxi-guide .transport-taxi-step__photo {
        grid-area: photo;
        width: 64px;
        height: 56px;
        align-self: center;
    }

    .transport-taxi-step h3 {
        grid-area: title;
        align-self: end;
        text-align: left;
    }

    .transport-taxi-step p {
        grid-area: body;
        align-self: start;
        text-align: left;
    }

    .transport-guide-link,
    .transport-resource-card__links a,
    .transport-region-links a,
    .transport-continue-links a {
        min-height: 46px;
    }

    .transportation-combobox-list {
        max-height: min(56dvh, 380px);
        border-radius: 16px;
    }

    .transportation-city-picker {
        position: fixed;
        inset: auto 0 0;
        z-index: 55;
        min-width: 0;
        width: auto;
        max-height: min(62dvh, 560px);
        border-radius: 22px 22px 0 0;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        box-shadow: 0 -18px 44px rgba(15, 23, 42, 0.18);
    }

    .transportation-city-picker.is-above {
        top: auto;
        bottom: 0;
    }

    .transportation-city-picker__top {
        gap: 10px;
    }

    .transportation-city-picker__title {
        font-size: 1rem;
    }

    .transportation-city-specific-input {
        min-height: 50px;
        border-radius: 14px;
        font-size: 16px;
    }

    .transportation-city-specific-list {
        grid-template-columns: 1fr;
        max-height: min(220px, var(--transportation-city-list-max, 220px));
        border-radius: 14px;
        padding: 2px;
    }

    .transportation-city-place-button {
        min-height: 52px;
        border-radius: 12px;
        padding: 8px 10px;
    }

    .transportation-city-clear-button {
        width: 44px;
        height: 44px;
    }

    .transportation-city-picker__actions {
        padding-top: 10px;
    }

    .transportation-city-center-button {
        width: 100%;
        min-height: 46px;
        justify-content: center;
    }

    .transportation-combobox-list,
    .transportation-city-picker,
    .transport-trip-picker__panel {
        position: fixed;
        z-index: 80;
        top: auto;
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-height: min(68dvh, 520px);
        border-radius: 20px;
        padding: 14px;
        box-shadow: 0 22px 54px rgba(15, 23, 42, 0.24);
    }

    .transportation-combobox-list {
        display: grid;
        gap: 5px;
        overflow: auto;
    }

    .transportation-combobox-sheet-title {
        display: block;
        position: sticky;
        top: 0;
        z-index: 1;
        margin: -4px -4px 2px;
        border-bottom: 1px solid rgba(203, 213, 225, 0.72);
        background: #fff;
        padding: 4px 4px 10px;
        color: var(--text);
        font-size: 1rem;
        font-weight: 900;
        line-height: 1.2;
    }

    .transportation-combobox-sheet-query {
        display: block;
        margin: -2px 0 4px;
        color: var(--color-muted);
        font-size: 0.82rem;
        font-weight: 750;
        line-height: 1.35;
    }

    .transportation-city-picker {
        overflow: hidden;
        min-width: 0;
        width: auto;
    }

    .transport-trip-picker__panel {
        gap: 10px;
    }

    .transport-trip-picker__list {
        max-height: calc(min(68dvh, 520px) - 86px);
    }

    .transportation-form-actions .primary-button,
    .transport-google-route,
    .transportation-add-panel .primary-button {
        width: 100%;
        min-height: 50px;
        justify-content: center;
    }

    .transport-map-links,
    .transport-local-map-options,
    .transport-option-grid {
        grid-template-columns: 1fr;
        max-width: none;
        width: 100%;
    }

    .transport-option-card {
        border-radius: 16px;
        padding: 14px;
    }

    .transport-option-card p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .best-route-toolbar {
        display: grid;
        gap: 12px;
        padding: 14px;
    }

    .sort-link-list {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
    }

    .sort-link-list a {
        flex: 0 0 auto;
        min-height: 42px;
        border-radius: var(--radius-pill);
        scroll-snap-align: start;
    }

    .best-route-city-filter select {
        width: 100%;
    }

    .best-route-grid,
    .home-best-route-grid,
    .best-route-featured-grid,
    .best-route-day-grid,
    .best-route-review-highlight-grid {
        grid-template-columns: 1fr;
    }

    .best-route-card {
        border-radius: 16px;
        overflow: hidden;
    }

    .best-route-cover-image,
    .home-best-route-cover-image,
    .best-route-detail-hero__image,
    .best-route-day-card__image,
    .best-route-review-highlight__image {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        object-fit: cover;
    }

    .best-route-cover-placeholder,
    .best-route-detail-placeholder,
    .best-route-day-card__placeholder {
        aspect-ratio: 16 / 9;
        min-height: 0;
        border-radius: 12px;
    }

    .best-route-card__media,
    .best-route-card__media .best-route-cover-image,
    .best-route-card__fallback,
    .best-route-card--featured .best-route-card__media,
    .best-route-card--featured .best-route-cover-image,
    .best-route-card--featured .best-route-card__fallback {
        aspect-ratio: 16 / 10;
        border-radius: 0;
    }

    .best-route-card__body {
        padding: 16px;
    }

    .best-route-visual-fallback img {
        width: min(70%, 170px);
        height: auto;
        max-height: 72%;
    }

    .best-route-rating-hero,
    .best-route-rating-layout {
        grid-template-columns: 1fr;
    }

    .best-route-rating-hero {
        gap: 16px;
        padding: 16px;
    }

    .best-route-star-radio {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .best-route-star-radio label {
        min-height: 68px;
        padding: 7px 4px;
    }

    .best-route-star-radio small {
        font-size: 0.68rem;
    }

    .best-route-card-header p,
    .best-route-helper-note {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .best-route-action,
    .best-route-action-primary {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .best-route-approved-recommendations,
    .best-route-review-panel {
        display: none;
    }

    .best-route-detail-hero {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0;
    }

    .best-route-detail-hero__content {
        padding: 0 2px;
    }

    .best-route-detail-actions form,
    .best-route-detail-actions button,
    .best-route-detail-hero .maps-link {
        width: 100%;
    }

    .best-route-stop-list {
        gap: 8px;
    }

    .best-route-review-highlight {
        border-radius: 16px;
    }

    .city-guide-hero,
    .events-weather-hero {
        min-height: 220px;
    }

    .events-weather-hero--with-mascot {
        grid-template-columns: minmax(0, 1fr) minmax(104px, 144px);
        gap: 12px;
    }

    .events-weather-hero__mascot {
        width: clamp(118px, 33vw, 146px);
        max-height: 158px;
        transform: scale(1.12);
    }

    .supported-cities-hero--photo-bg,
    .events-weather-hero--photo-bg {
        min-height: 250px;
        padding: 28px 22px;
    }

    .supported-cities-hero--photo-bg::after,
    .events-weather-hero--photo-bg::after {
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.76) 55%, rgba(255, 255, 255, 0.22) 100%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(15, 23, 42, 0.04));
    }

    .supported-cities-hero--photo-bg .supported-cities-hero__content,
    .events-weather-hero--photo-bg .events-weather-hero__content {
        max-width: min(100%, 420px);
    }

    .city-guide-link-row,
    .events-weather-link-row {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 2px;
    }

    .city-guide-link-row a,
    .events-weather-link-row a {
        flex: 0 0 auto;
        min-height: 42px;
        border-radius: var(--radius-pill);
    }

    .city-guide-link-row a,
    .city-guide-card .secondary-link,
    .city-guide-card .primary-button,
    .city-guide-activity-tile .secondary-link,
    .city-guide-best-route-thumb + * .compact-primary-button,
    .compact-primary-button,
    .compact-secondary-button {
        min-height: 44px;
    }

    .city-guide-card-grid,
    .city-guide-card-grid--three,
    .city-guide-card-grid--four,
    .city-guide-activity-grid,
    .city-guide-walking-secondary,
    .events-weather-event-grid,
    .events-weather-plan-grid,
    .events-weather-source-grid,
    .events-weather-guidance-grid {
        grid-template-columns: 1fr;
    }

    .city-guide-card-grid--four .city-guide-card:nth-child(n + 5),
    .city-guide-card-grid--three .city-guide-card:nth-child(n + 5),
    .city-guide-activity-grid .city-guide-activity-tile:nth-child(n + 7) {
        display: none;
    }

    .seoul-city-guide .city-guide-card-grid--four .city-guide-card:nth-child(n + 5),
    .seoul-city-guide .city-guide-card-grid--three .city-guide-card:nth-child(n + 5),
    .seoul-city-guide .city-guide-activity-grid .city-guide-activity-tile:nth-child(n + 7) {
        display: grid;
    }

    .city-guide-hero--seoul {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .city-guide-hero__visual {
        min-height: 118px;
        justify-content: center;
    }

    .region-hero__media {
        border-radius: 18px;
        aspect-ratio: 16 / 10;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    }

    .region-hero__image {
        object-position: 50% 50%;
    }

    .city-guide-hero__visual img {
        width: 116px;
        max-height: 128px;
        transform: scale(1.14);
    }

    .city-guide-card {
        padding: 16px;
    }

    .seoul-place-card {
        padding: 0;
    }

    .seoul-place-card__body,
    .seoul-place-card__actions {
        padding-inline: 14px;
    }

    .seoul-place-card__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        padding-bottom: 14px;
    }

    .ready-made-route-card__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    .city-guide-card__visual {
        min-height: 138px;
        max-height: 158px;
        border-radius: 14px;
    }

    .seoul-place-card__media {
        min-height: 0;
        max-height: none;
        border-radius: 14px 14px 0 0;
    }

    .events-weather-event-card {
        padding: 16px;
    }

    .seoul-event-card__meta {
        grid-template-columns: 1fr;
    }

    .city-guide-card__main-link {
        gap: 10px;
    }

    .city-guide-card,
    .city-guide-activity-tile,
    .events-weather-event-card,
    .events-weather-plan-card,
    .events-weather-source-card,
    .events-weather-forecast-card {
        border-radius: 16px;
    }

    .city-guide-card p,
    .city-guide-activity-tile p,
    .events-weather-event-summary {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .events-weather-summary-card {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .events-weather-forecast-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, 72%);
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    .events-weather-forecast-card {
        scroll-snap-align: start;
    }

}

@media (min-width: 760px) {
    .results-grid,
    .route-grid.saved-itinerary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .results-grid .day-card:only-child,
    .saved-itinerary-grid .day-card:only-child {
        grid-column: 1 / -1;
    }

    .results-grid .day-card:only-child .stop-list,
    .saved-itinerary-grid .day-card:only-child .stop-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .results-grid,
    .route-grid.saved-itinerary-grid,
    .results-grid .day-card:only-child .stop-list,
    .saved-itinerary-grid .day-card:only-child .stop-list {
        grid-template-columns: 1fr;
    }

    .home-feature-icon {
        width: 30px;
        height: 30px;
    }

    .route-map-link {
        flex: 1 1 100%;
    }

    .stop-edit-proxy {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .trip-toast {
        right: var(--space-3);
        bottom: calc(16px + env(safe-area-inset-bottom));
        left: var(--space-3);
        width: auto;
        max-width: none;
        text-align: center;
    }

    .sortable-empty-dropzone {
        min-height: 72px;
    }
}

@media (max-width: 759px) {
    .home-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.results-itinerary-shell {
    display: block;
    width: min(100%, 1080px);
    max-width: 1080px;
    margin-top: 24px;
    margin-inline: auto;
}

.results-itinerary-shell .day-tab-list {
    width: 100%;
    margin-bottom: 16px;
}

.results-day-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.results-day-panel[hidden] {
    display: none !important;
}

.results-itinerary-shell .day-card-header {
    padding: 20px 22px 12px;
}

.day-card-header__meta {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-weight: 800;
}

.results-itinerary-shell .stop-list {
    grid-template-columns: 1fr !important;
}

.results-itinerary-shell .itinerary-place-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    align-items: start;
}

.results-itinerary-shell .itinerary-place-card > * {
    min-width: 0;
}

.itinerary-place-card__media {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    min-height: 0;
    align-self: start;
}

.itinerary-place-card__figure {
    margin: 0;
    min-width: 0;
    min-height: 0;
    align-self: start;
    width: 100%;
    max-width: 100%;
    gap: 0;
}

.itinerary-place-card__figure [hidden] {
    display: none !important;
}

.itinerary-place-card__content {
    display: grid;
    gap: 9px;
    min-width: 0;
    min-height: 0;
    height: auto;
    align-self: start;
}

.itinerary-place-card__content > p {
    margin: 0;
}

.itinerary-place-card__content .stop-more-details {
    margin-top: 2px;
}

.itinerary-place-card__map-link {
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.itinerary-place-card__map-link svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.itinerary-place-card__attribution {
    margin-top: 6px;
    color: #6b7280;
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.itinerary-place-card__media--fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 16px;
}

.itinerary-place-card__figure[data-photo-fallback] .itinerary-place-card__media--fallback {
    min-height: 100%;
}

.itinerary-place-card__figure--fallback-shown .itinerary-place-card__media--fallback {
    display: flex;
}

.itinerary-place-card__actions {
    display: flex;
    grid-column: 1 / -1;
    gap: 8px;
    margin-top: 0;
    padding-top: 0;
}

.itinerary-place-card__replace-button {
    width: 100%;
    min-height: 42px;
}

.itinerary-place-card__replacement {
    grid-column: 1 / -1;
}

.itinerary-place-card__replacement[hidden] {
    display: none !important;
}

.stop-photo-placeholder-box .stop-photo-placeholder-note {
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
}

.stop-photo-placeholder-box .stop-photo-placeholder-mascot {
    position: static;
    display: block;
    width: clamp(104px, 12vw, 142px) !important;
    height: clamp(104px, 12vw, 142px) !important;
    min-height: 0 !important;
    max-width: 70%;
    max-height: 142px;
    object-fit: contain;
    margin: 0 auto;
    flex: 0 0 auto;
}

@media (min-width: 900px) {
    .results-itinerary-shell .itinerary-place-card {
        display: grid;
        grid-template-columns: minmax(210px, 34%) minmax(0, 1fr);
        grid-template-areas:
            "media content"
            "actions actions"
            "replacement replacement";
        gap: 14px 20px;
        align-items: start;
        grid-auto-rows: auto;
    }

    .results-itinerary-shell .itinerary-place-card__media {
        grid-area: media;
    }

    .results-itinerary-shell .itinerary-place-card__content {
        grid-area: content;
    }

    .results-itinerary-shell .itinerary-place-card__actions {
        grid-area: actions;
    }

    .results-itinerary-shell .itinerary-place-card__replacement {
        grid-area: replacement;
    }

    .results-itinerary-shell .itinerary-place-card__figure img,
    .results-itinerary-shell .stop-photo-placeholder-box {
        height: 210px;
        min-height: 210px;
    }
}

@media (max-width: 767px) {
    .results-itinerary-shell {
        width: 100%;
        margin-top: 20px;
    }

    .results-itinerary-shell .day-card-header {
        padding: 18px 16px 10px;
    }

    .stop-photo-placeholder-box .stop-photo-placeholder-mascot {
        width: clamp(96px, 30vw, 126px) !important;
        height: clamp(96px, 30vw, 126px) !important;
        min-height: 0 !important;
        max-height: 126px;
    }

    .itinerary-place-card__content {
        gap: 8px;
    }
}

@media print {
    @page {
        margin: 10mm 12mm;
        size: A4;
    }

    * {
        box-shadow: none !important;
    }

    body {
        background: #ffffff;
        color: #111111;
        font-size: 9.5pt;
        line-height: 1.35;
        padding-bottom: 0;
    }

    .site-header,
    .site-footer,
    .mobile-bottom-nav,
    .no-print,
    .screen-only {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    .page-shell {
        max-width: none;
        padding: 0;
    }

    .hero,
    .day-card,
    .stop-item {
        border: 0;
        background: #ffffff;
        box-shadow: none;
    }

    .hero {
        padding: 0 0 5px;
        margin-bottom: 5px;
        border-bottom: 1px solid #cccccc;
    }

    .hero h1 {
        font-size: 16pt;
        line-height: 1.1;
        margin-bottom: 2px;
    }

    .hero-copy {
        font-size: 9pt;
        line-height: 1.35;
    }

    .share-tools,
    .mobile-header-actions,
    .mobile-sheet-overlay,
    .mobile-bottom-sheet,
    .mobile-bottom-sheet__backdrop,
    .trip-header-actions,
    .trip-more-actions,
    .trip-management-actions,
    [data-trip-more-actions],
    .cloud-more-actions,
    .cloud-secondary-tools,
    .hero .eyebrow,
    .hero > .hero-copy,
    .trip-preferences-summary,
    .trip-focus-summary,
    .replace-toggle,
    .replacement-options,
    .weather-alternatives-notice,
    .maps-link,
    .public-share-actions,
    .mobile-action-row,
    .plan-another-link,
    .my-note-preview,
    .add-custom-stop-details,
    .trip-toast,
    .trip-save-status,
    .add-custom-stop-form,
    .personal-note__edit,
    .personal-note__toggle,
    .personal-note__form,
    .stop-edit-details,
    .stop-edit-proxy,
    .stop-move-options,
    .stop-drag-handle,
    .drag-handle,
    .stop-time-edit-button,
    .edit-only,
    .stop-inline-time-form,
    .stop-manual-time-form,
    .stop-personal-note-form,
    .stop-delete-form,
    .stop-day-actions,
    .stop-order-actions {
        display: none !important;
    }

    .subway-line-badge {
        border: 1px solid #444444;
        background: #ffffff !important;
        color: #111111 !important;
    }

    .time-not-set {
        display: none !important;
    }

    .route-connector__toggle {
        display: none !important;
    }

    .route-connector__maps,
    .route-map-links {
        display: none !important;
    }

    .print-itinerary-summary {
        display: block !important;
        margin: 0 0 5px;
        color: #333333;
        font-size: 8.8pt;
        line-height: 1.28;
    }

    .print-itinerary-summary p {
        margin: 1px 0;
    }

    .print-trip-summary {
        display: block !important;
        margin: 0 0 4px;
        color: #333333;
        font-size: 9pt;
        line-height: 1.28;
    }

    .print-trip-summary p {
        margin: 1px 0;
    }

    .route-connector__details {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
    }

    .route-connector {
        break-inside: auto;
        page-break-inside: auto;
    }

    .seoul-featured-experience {
        grid-template-columns: 1fr;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .seoul-featured-experience__media {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .seoul-featured-experience__course-map {
        max-height: 145mm;
        object-fit: contain;
    }

    .seoul-trail-map-source {
        color: #333333;
        font-size: 8.5pt;
        line-height: 1.3;
    }

    .seoul-trail-map-source__link {
        color: #111111;
        text-decoration: none;
    }

    .personal-note {
        display: block !important;
        margin-top: 6px;
        padding: 6px 0;
        border: 0;
        border-top: 1px solid #dddddd;
        background: #ffffff;
        break-inside: auto;
        page-break-inside: auto;
    }

    .personal-note__header {
        display: block;
        break-after: avoid;
        page-break-after: avoid;
    }

    .personal-note__content {
        display: block !important;
        height: auto;
        max-height: none;
        max-height: none !important;
        max-width: 100%;
        overflow: visible !important;
        overflow-wrap: anywhere;
        white-space: pre-wrap !important;
        word-break: break-word;
        font-size: 9.5pt;
        line-height: 1.45;
        -webkit-line-clamp: unset !important;
    }

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

    .day-card {
        break-inside: auto;
        page-break-inside: auto;
        padding: 0;
    }

    .day-card-header {
        padding-bottom: 4px;
        break-after: avoid;
        page-break-after: avoid;
    }

    .day-card-header h2 {
        font-size: 13.5pt;
        margin-bottom: 2px;
    }

    .stop-list {
        gap: 6px;
    }

    .stop-item {
        break-inside: auto;
        page-break-inside: auto;
        gap: 3px;
        padding: 6px 0;
        border-top: 1px solid #dddddd;
        border-radius: 0;
    }

    .stop-item h3 {
        font-size: 11.2pt;
        margin-bottom: 2px;
        break-after: avoid;
        page-break-after: avoid;
    }

    .stop-photo {
        max-width: 42mm;
        margin: 2px 0 4px;
    }

    .stop-photo img,
    .stop-photo-placeholder-box {
        max-height: 28mm;
        object-fit: contain;
    }

    .stop-item p,
    .stop-guidance dd,
    .stop-time,
    .section-label {
        font-size: 8.6pt;
    }

    .stop-guidance {
        display: grid !important;
        gap: 3px;
        padding-top: 4px;
    }

    .stop-guidance dt {
        font-size: 8pt;
    }

    .stop-photo img {
        max-height: 28mm;
        object-fit: cover;
    }

    .stop-photo-placeholder {
        display: none !important;
    }

    .stop-more-details > summary {
        display: none !important;
    }

    .stop-more-details {
        display: block !important;
        border: 0;
        padding: 0;
        background: transparent;
    }

    .stop-photo figcaption {
        font-size: 8.5pt;
    }
}

@media print {
    .trip-view-switcher,
    .trip-view-helper,
    .full-itinerary-day-tabs,
    .trip-stop-summary,
    .trip-stop-summary__expanded,
    .trip-stop-summary__controls,
    .trip-empty-day,
    .stop-action-row,
    .stop-edit-details,
    .stop-edit-panel,
    .replacement-options,
    .replacement-panel,
    .stop-move-options,
    .trip-stop-actions,
    .stop-order-actions,
    .stop-day-actions,
    .stop-delete-form,
    .stop-edit-proxy,
    .stop-time-edit-button,
    .stop-time-popover,
    .personal-note__edit,
    .personal-note__toggle,
    .personal-note__form,
    .personal-note.is-empty-note,
    .add-stop-details,
    .add-custom-stop-details,
    .add-custom-stop-form,
    .drag-handle,
    .stop-drag-handle,
    [data-drag-handle] {
        display: none !important;
    }

    .trip-view-enhanced.trip-summary-board {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .saved-itinerary-section {
        break-inside: auto !important;
        page-break-inside: auto !important;
        margin-top: 10px !important;
    }

    .saved-itinerary-section > .route-section-header {
        margin-bottom: 8px !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .saved-itinerary-section > .route-section-header + .trip-view-switcher + .trip-view-helper + .trip-summary-board,
    .saved-itinerary-section > .route-section-header + .trip-summary-board {
        break-before: avoid !important;
        page-break-before: avoid !important;
    }

    .trip-view-enhanced .trip-day-section {
        display: block !important;
        break-inside: auto !important;
        page-break-inside: auto !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    .trip-view-enhanced .day-card-header,
    .trip-view-enhanced .trip-day-section__print-heading {
        margin-bottom: 6px !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .trip-view-enhanced .trip-day-section:first-child {
        break-before: avoid !important;
        page-break-before: avoid !important;
    }

    .trip-day-section__body[hidden],
    .trip-stop-detail[hidden],
    .trip-view-enhanced .trip-stop-detail {
        display: grid !important;
    }

    .trip-view-enhanced .stop-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    .trip-view-enhanced .stop-item {
        display: grid !important;
        gap: 5px !important;
        border-top: 1px solid #dddddd;
        padding: 7px 0 !important;
        break-inside: auto;
        page-break-inside: auto;
    }

    .trip-view-enhanced .trip-stop-detail {
        grid-template-columns: 44mm minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        margin: 0 !important;
        break-inside: avoid-page;
        page-break-inside: auto;
    }

    .trip-view-enhanced .trip-stop-detail > .cloud-trip-stop-detail__media-column {
        display: contents !important;
    }

    .trip-view-enhanced .trip-stop-detail > .cloud-trip-stop-detail__content {
        display: grid !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__media {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 100% !important;
        height: 34mm !important;
        min-height: 34mm !important;
        max-height: 34mm !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: hidden;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: contain !important;
        border-radius: 6px !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__media.is-fallback.stop-photo-placeholder {
        display: block !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__media.is-fallback .stop-photo-placeholder-box {
        display: grid !important;
        width: 100% !important;
        height: 34mm !important;
        min-height: 34mm !important;
        max-height: 34mm !important;
        grid-template-rows: minmax(0, 1fr) auto;
        place-items: center;
        overflow: hidden;
        padding: 4mm 4mm 2mm !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__media.is-fallback .stop-photo-placeholder-mascot {
        display: block !important;
        width: 22mm !important;
        height: 22mm !important;
        max-width: 22mm !important;
        max-height: 22mm !important;
        object-fit: contain !important;
    }

    .trip-view-enhanced .stop-photo-placeholder-note {
        display: block !important;
        font-size: 7.2pt !important;
        line-height: 1.15 !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__note {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin-top: 0 !important;
        padding: 3px 0 0 !important;
        border-top: 1px solid #dddddd !important;
        background: #ffffff !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .trip-view-enhanced .personal-note__empty {
        display: none !important;
    }

    .trip-view-enhanced .personal-note__body[hidden] {
        display: none !important;
    }

    .trip-view-enhanced .personal-note__content {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        -webkit-line-clamp: unset !important;
    }

    .trip-view-enhanced .route-connector {
        display: block !important;
        border-top: 1px dashed #cccccc;
        padding: 5px 0 6px !important;
        break-inside: auto;
        page-break-inside: auto;
    }

    .trip-view-enhanced .route-connector__details {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
    }
}

@media print {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        color: #111827;
        font-size: 10pt;
        line-height: 1.42;
    }

    .cloud-trip-hero {
        display: block !important;
        margin: 0 0 8mm !important;
        padding: 0 0 5mm !important;
        border: 0 !important;
        border-bottom: 2px solid #111827 !important;
        background: #ffffff !important;
    }

    .cloud-trip-hero__main,
    .cloud-trip-hero__copy {
        display: block !important;
    }

    .cloud-trip-hero #page-title {
        display: none !important;
    }

    .cloud-trip-hero h1,
    .print-trip-title {
        margin: 0 0 2mm !important;
        color: #111827 !important;
        font-size: 22pt !important;
        line-height: 1.12 !important;
    }

    .cloud-detail-meta,
    .cloud-trip-hero__summary,
    .cloud-trip-save-summary,
    .cloud-breadcrumb,
    .cloud-title-message-stack,
    .share-message {
        display: none !important;
    }

    .print-trip-summary {
        margin: 0 !important;
        color: #374151 !important;
        font-size: 10pt !important;
        line-height: 1.35 !important;
    }

    .print-trip-summary p {
        margin: 1mm 0 0 !important;
    }

    .trip-overview {
        display: none !important;
    }

    .trip-overview__summary {
        display: none !important;
    }

    .trip-overview__days {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4mm !important;
    }

    .trip-overview__day {
        display: grid !important;
        grid-template-columns: 12mm minmax(0, 1fr) !important;
        gap: 3mm !important;
        height: auto !important;
        min-height: 0 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 4mm !important;
        background: #f8fafc !important;
        padding: 4mm !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .trip-overview__day-mascot {
        width: 11mm !important;
        height: 11mm !important;
    }

    .trip-overview__day-label,
    .trip-overview__day-date,
    .trip-overview__places,
    .trip-overview__meta,
    .trip-overview__focus {
        line-height: 1.3 !important;
    }

    .trip-overview__day-label {
        color: #111827 !important;
        font-size: 8pt !important;
    }

    .trip-overview__day-date {
        color: #374151 !important;
        font-size: 8.5pt !important;
        font-weight: 800 !important;
    }

    .trip-overview__places {
        color: #111827 !important;
        font-size: 9pt !important;
        font-weight: 800 !important;
    }

    .trip-overview__meta,
    .trip-overview__focus {
        color: #4b5563 !important;
        font-size: 8.5pt !important;
    }

    .saved-itinerary-section {
        margin-top: 0 !important;
    }

    .saved-itinerary-section > .route-section-header {
        margin: 0 0 4mm !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .saved-itinerary-section > .route-section-header h2 {
        margin: 0 !important;
        color: #111827 !important;
        font-size: 16pt !important;
        line-height: 1.2 !important;
    }

    .saved-itinerary-section > .route-section-header p {
        display: none !important;
    }

    .trip-view-enhanced .trip-day-section {
        display: block !important;
        border: 0 !important;
        background: #ffffff !important;
        margin: 0 0 7mm !important;
        padding: 0 !important;
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    .trip-view-enhanced .trip-day-section__print-heading {
        display: block !important;
        margin: 0 0 5mm !important;
        border: 0 !important;
        border-bottom: 1px solid #cbd5e1 !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        padding: 0 0 3mm !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .trip-view-enhanced .trip-day-section__print-heading .section-label {
        margin: 0 0 1mm !important;
        color: #1d4ed8 !important;
        font-size: 8pt !important;
        font-weight: 900 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
    }

    .trip-view-enhanced .trip-day-section__print-heading h2 {
        margin: 0 !important;
        color: #111827 !important;
        font-size: 15pt !important;
        line-height: 1.2 !important;
    }

    .trip-view-enhanced .stop-list {
        gap: 0 !important;
    }

    .trip-view-enhanced .stop-item {
        display: block !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 0 4mm !important;
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    .trip-view-enhanced .print-stop-card {
        display: grid !important;
        grid-template-columns: 36mm minmax(0, 1fr) !important;
        gap: 5mm !important;
        align-items: start !important;
        border: 0 !important;
        border-top: 1px solid #dbe3ef !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        margin: 0 !important;
        padding: 4mm 0 !important;
        break-inside: avoid-page !important;
        page-break-inside: avoid !important;
    }

    .trip-view-enhanced .print-stop-card__label {
        display: block !important;
        margin: 0 0 1mm !important;
        color: #1d4ed8 !important;
        font-size: 8pt !important;
        font-weight: 900 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
    }

    .trip-view-enhanced .print-stop-card > .cloud-trip-stop-detail__media-column {
        display: grid !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        gap: 2mm !important;
    }

    .trip-view-enhanced .print-stop-card > .cloud-trip-stop-detail__content {
        display: grid !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        gap: 1.5mm !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__content h3 {
        margin: 0 !important;
        color: #111827 !important;
        font-size: 12.5pt !important;
        line-height: 1.25 !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__content p {
        margin: 0 !important;
    }

    .trip-view-enhanced .stop-card-meta {
        margin: 0 !important;
    }

    .trip-view-enhanced .stop-time {
        margin: 0 !important;
        color: #111827 !important;
        font-size: 9pt !important;
        font-weight: 900 !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__content .section-label {
        color: #4b5563 !important;
        font-size: 8pt !important;
        font-weight: 900 !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__content .field-help {
        color: #374151 !important;
        font-size: 8.7pt !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__media {
        display: block !important;
        width: 36mm !important;
        height: 25mm !important;
        min-height: 25mm !important;
        max-height: 25mm !important;
        border: 1px solid #d1d5db !important;
        border-radius: 3mm !important;
        background: #ffffff !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 0 !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__media.is-fallback .stop-photo-placeholder-box {
        display: grid !important;
        width: 100% !important;
        height: 100% !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        place-items: center !important;
        padding: 3mm !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__media.is-fallback .stop-photo-placeholder-mascot {
        width: 22mm !important;
        height: 22mm !important;
        max-width: 22mm !important;
        max-height: 22mm !important;
        object-fit: contain !important;
    }

    .trip-view-enhanced .stop-photo-placeholder-note {
        margin: 0 !important;
        color: #4b5563 !important;
        font-size: 7.2pt !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__note {
        display: block !important;
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        margin-top: 2mm !important;
        border: 1px solid #dbeafe !important;
        border-radius: 3mm !important;
        background: #ffffff !important;
        padding: 3mm !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__note.is-empty-note {
        display: none !important;
    }

    .trip-view-enhanced .cloud-trip-stop-detail__note h4 {
        margin: 0 0 1mm !important;
        color: #1f2937 !important;
        font-size: 8pt !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    .trip-view-enhanced .personal-note__content {
        color: #111827 !important;
        font-size: 9pt !important;
        line-height: 1.45 !important;
    }

    .trip-view-enhanced .print-transfer-card {
        display: block !important;
        width: calc(100% - 18mm) !important;
        border: 0 !important;
        border-left: 2px solid #93c5fd !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        margin: 0 0 3mm 18mm !important;
        padding: 1.8mm 0 1.8mm 4mm !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .trip-view-enhanced .print-transfer-card__label {
        display: inline !important;
        margin: 0 2mm 0 0 !important;
        color: #1d4ed8 !important;
        font-size: 7.6pt !important;
        font-weight: 900 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
    }

    .trip-view-enhanced .route-connector__route {
        display: none !important;
    }

    .trip-view-enhanced .route-connector__from,
    .trip-view-enhanced .route-connector__to,
    .trip-view-enhanced .route-connector__details p {
        display: block !important;
        margin: 0 2mm 0 0 !important;
        color: #111827 !important;
        font-size: 8.5pt !important;
        line-height: 1.35 !important;
    }

    .trip-view-enhanced .route-connector__from {
        display: none !important;
    }

    .trip-view-enhanced .route-connector__toggle,
    .trip-view-enhanced .route-map-links {
        display: none !important;
    }

    .trip-view-enhanced .route-connector__details[hidden] {
        display: block !important;
    }

    .trip-view-enhanced .movement-meta {
        color: #4b5563 !important;
    }

    .trip-view-enhanced .print-transfer-card__route {
        display: block !important;
        margin: 0 !important;
        color: #111827 !important;
        font-size: 9pt !important;
        line-height: 1.35 !important;
    }

    .trip-view-enhanced .print-transfer-card__route span {
        color: #1d4ed8 !important;
        font-size: 7.6pt !important;
        font-weight: 900 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
    }

    .trip-view-enhanced .print-transfer-card__route strong {
        font-weight: 800 !important;
    }

    .trip-view-enhanced .print-transfer-card__meta {
        display: block !important;
        margin-top: 0.8mm !important;
        color: #4b5563 !important;
        font-size: 8pt !important;
        line-height: 1.3 !important;
    }

    .trip-view-enhanced .route-guidance__fallback.screen-only {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hero.results-hero {
        padding: 22px 16px;
    }

    .hero.results-hero .results-hero__content {
        width: 100%;
        gap: 8px;
    }

    .hero.results-hero h1 {
        font-size: clamp(1.75rem, 9vw, 2.35rem);
        line-height: 1.06;
    }

    .hero.results-hero .hero-copy,
    .results-hero__kst,
    .results-weather-link a {
        font-size: 0.88rem;
        line-height: 1.35;
    }

    .results-summary-panel__grid div {
        padding: 8px;
    }

    .results-hero__actions {
        gap: 8px;
    }
}

@media (max-width: 430px) {
    .transport-city-guide-tiles {
        grid-template-columns: 1fr;
    }

    .transport-city-guide-tile {
        grid-template-columns: 74px minmax(0, 1fr);
        min-height: 96px;
    }

    .transport-city-guide-tile__image {
        width: 74px;
        height: 74px;
    }

    .transport-city-guide-tile__image img {
        width: 66px;
        height: 66px;
    }

    .replacement-candidate-card__body {
        grid-template-columns: 1fr;
    }

    .replacement-option-thumb {
        width: 100%;
        height: 118px;
        justify-self: stretch;
    }

    .replacement-option-thumb img {
        height: 100%;
        aspect-ratio: auto;
    }

    .replacement-option-thumb img.is-mascot,
    .replacement-option-thumb__mascot {
        width: min(94px, 82%);
        height: min(94px, 82%);
    }

    .replacement-candidate-card__action-row {
        align-items: center;
    }

    .replacement-options .replacement-option-button {
        width: auto;
        min-width: 126px;
    }
}

@media (max-width: 360px) {
    .replacement-candidate-card__body {
        grid-template-columns: 1fr;
    }

    .replacement-option-thumb {
        width: 100%;
        height: 118px;
        justify-self: stretch;
    }

    .replacement-candidate-card__action-row {
        display: flex;
    }

    .replacement-options .replacement-option-button {
        width: auto;
        min-width: 126px;
    }
}

@media (min-width: 768px) and (max-width: 920px) {
    .transportation-combobox-list,
    .transportation-city-picker,
    .transport-trip-picker__panel {
        position: fixed;
        z-index: 80;
        top: auto;
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-height: min(62dvh, 520px);
        border-radius: 20px;
        padding: 14px;
        box-shadow: 0 22px 54px rgba(15, 23, 42, 0.24);
    }

    .transportation-combobox-list {
        display: grid;
        gap: 5px;
        overflow: auto;
    }

    .transportation-city-picker {
        overflow: hidden;
    }

    .transport-trip-picker__panel {
        gap: 10px;
    }

    .transport-trip-picker__list {
        max-height: calc(min(62dvh, 520px) - 86px);
    }

    .transportation-combobox-sheet-title {
        display: block;
        position: sticky;
        top: 0;
        z-index: 1;
        margin: -4px -4px 2px;
        border-bottom: 1px solid rgba(203, 213, 225, 0.72);
        background: #fff;
        padding: 4px 4px 10px;
        color: var(--text);
        font-size: 1rem;
        font-weight: 900;
        line-height: 1.2;
    }

    .transportation-combobox-sheet-query {
        display: block;
        margin: -2px 0 4px;
        color: var(--color-muted);
        font-size: 0.82rem;
        font-weight: 750;
        line-height: 1.35;
    }
}
.own-review-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

/* Only large Guide artwork fades into its card; thumbnails stay unchanged. */
.page-hero__mascot.guide-hero-image,
.guide-topic-brief__visual .guide-hero-image,
.guide-detail-hero__visual .guide-hero-image {
    display: block;
    width: auto;
    max-width: min(100%, 420px);
    height: auto;
    max-height: 300px;
    margin: 12px auto;
    object-fit: contain;
    object-position: center;
    transform: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.guide-topic-brief__visual {
    aspect-ratio: auto;
    overflow: visible;
}

/* Keep Guide copy and artwork in separate rows on narrow screens. */
@media (max-width: 767px) {
    .guide-hub-page .page-hero--guide {
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
    }

    .guide-hub-page .page-hero--guide .page-hero__media {
        min-width: 0;
        min-height: 0;
        overflow: visible;
    }

    .guide-hub-page .page-hero--guide .guide-hero-image {
        width: min(100%, 260px);
        height: auto;
        max-height: 300px;
        margin-inline: auto;
    }
}

/* Uploaded transparent artwork needs no edge mask. Scope to these heroes only. */
.guide-detail-hero__visual .guide-hero-image--transparent {
    -webkit-mask-image: none;
    mask-image: none;
    object-fit: contain;
    object-position: center;
    background: transparent;
}

.page-hero--auth.page-hero--signup {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 380px);
}

.page-hero--signup .page-hero__mascot {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
}

@media (max-width: 760px) {
    .page-hero--auth.page-hero--signup,
    .guide-detail-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-hero--signup .page-hero__mascot {
        width: min(100%, 320px);
        max-height: 220px;
    }
}

@media (max-width: 480px) {
    .own-review-actions {
        grid-template-columns: 1fr;
    }
}

/* Transparent artwork is limited to the four topic heroes and route collections. */
.guide-topic-brief__visual .guide-topic-hero-image--transparent {
    -webkit-mask-image: none;
    mask-image: none;
}

.page-hero--route-collections {
    padding: clamp(24px, 5vw, 56px);
    min-height: clamp(300px, 31vw, 380px);
}

.page-hero--route-collections .page-hero__media {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.page-hero--route-collections .route-collections-hero-image {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 760px) {
    .page-hero--route-collections {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Keep desktop artwork beside the heading without increasing the summary row. */
.results-hero__intro {
    display: grid;
    gap: 10px;
    min-width: 0;
}

@media (min-width: 1024px) {
    .results-hero__layout {
        grid-template-columns: minmax(0, 1fr) clamp(180px, 25vw, 300px);
        grid-template-areas: none;
        row-gap: 10px;
        isolation: isolate;
    }

    .results-hero__content {
        display: contents;
    }

    .results-hero__intro {
        grid-column: 1;
        grid-row: 1;
    }

    .results-hero__summary {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: start;
        position: relative;
        z-index: 2;
    }

    .results-hero__mascot {
        grid-area: 1 / 2;
        justify-self: end;
        align-self: stretch;
        width: 100%;
        height: 100%;
        min-height: 0;
        contain: size;
        max-height: none;
        z-index: 0;
        pointer-events: none;
    }

    .results-hero__content > p,
    .results-hero__action-panel {
        grid-area: auto / 1 / auto / -1;
        position: relative;
        z-index: 2;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .results-hero__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "content" "mascot" "actions";
    }
}

/* Keep RTL login text readable over the photo on small screens only. */
@media (max-width: 640px) {
    html[dir="rtl"] .auth-page > .page-hero--auth.page-hero--photo-bg::after {
        background: linear-gradient(270deg, rgba(248, 251, 255, 0.98) 0%, rgba(248, 251, 255, 0.96) 75%, rgba(248, 251, 255, 0.85) 100%);
    }
}

/* Shared navigation/footer only: preserve DOM order and all LTR page content. */
html[dir="rtl"] .site-header,
html[dir="rtl"] .site-footer {
    text-align: start;
}

html[dir="rtl"] .footer-inner ul {
    padding-left: 0;
    padding-inline-start: 2.5rem;
}

html[dir="rtl"] .language-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

html[dir="rtl"] .language-selector select,
html[dir="rtl"] .language-selector button {
    max-inline-size: 100%;
    min-block-size: 44px;
}

.site-footer a[dir="ltr"] {
    unicode-bidi: isolate;
    display: inline-block;
}

html[dir="rtl"] .mobile-nav-label {
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Header language controls retain DOM order after account actions. */
.site-header .language-selector {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    min-inline-size: 0;
    white-space: nowrap;
}
.site-header .language-selector select {
    inline-size: auto;
    min-inline-size: 7rem;
    max-inline-size: 12rem;
    min-block-size: 44px;
    padding-block: 0.5rem;
    padding-inline: 0.5rem 1.75rem;
}
.site-header .language-selector button {
    flex: 0 0 auto;
    min-inline-size: 36px;
    min-block-size: 44px;
}
.site-header .language-globe {
    flex: 0 0 auto;
}
.site-header .site-actions {
    gap: 0.25rem;
}
.site-header .mobile-menu-panel {
    max-inline-size: calc(100vw - 32px);
}
.site-header .mobile-menu-panel .language-selector {
    padding-inline: 0.5rem;
}
.site-header .mobile-menu-panel .language-selector select {
    min-inline-size: 0;
    flex: 1 1 auto;
}
html[dir="rtl"] .home-ui .home-hero-copy,
html[dir="rtl"] .home-ui .home-section-heading__copy,
html[dir="rtl"] .plan-ui .form-step-header,
html[dir="rtl"] .plan-ui .field-group,
html[dir="rtl"] .plan-ui .plan-hero__copy {
    text-align: start;
}
.plan-ui input[type="date"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Keep mobile card copy and decorative artwork in separate flow rows. */
@media (max-width: 759px) {
    .home-ui .home-category-card.home-click-card {
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 12px;
        block-size: auto;
        overflow: visible;
        text-align: start;
    }

    .home-ui .home-category-card .home-feature-copy {
        grid-row: 1;
        min-block-size: 0;
        align-self: start;
        inline-size: 100%;
    }

    .home-ui .home-category-card .home-action-card__mascot {
        position: static;
        grid-row: 2;
        align-self: end;
        justify-self: center;
        inline-size: min(100%, 100px);
        block-size: auto;
        transform: none;
    }
}
/* Saved-trip display only: preserve DOM and stored itinerary order. */
.trip-ui .personal-note__empty[hidden] {
    display: none !important;
}
.results-ui .personal-note__empty[hidden] {
    display: none !important;
}
.trip-ui :is(.saved-trip-card, .saved-trip-cloud-card, .trip-day-section,
    .trip-stop-summary__body, .cloud-trip-hero__copy, .stop-content) {
    min-inline-size: 0;
    text-align: start;
}
.trip-ui :is(.button-row, .dialog-actions, .trip-header-actions,
    .saved-trip-cloud-card__actions, .saved-trip-card__primary-actions) {
    flex-wrap: wrap;
}
.trip-ui :is(button, .primary-button, .secondary-link) {
    white-space: normal;
    overflow-wrap: anywhere;
    max-inline-size: 100%;
}
.trip-ui :is(input, textarea, select) {
    min-inline-size: 0;
    max-inline-size: 100%;
}
.trip-ui :is(.route-connector__summary, .route-connector__toggle) {
    min-inline-size: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
.trip-ui .route-connector__summary::before {
    content: none;
}
.trip-ui .trip-stop-summary__time,
.trip-ui input[name="manual_time"],
.trip-ui [data-public-share-url] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Around Me display only: preserve search values and source content. */
.around-ui .around-search-option,
.around-ui .around-me-location-grid label,
.around-ui .around-me-add-grid label,
.around-ui .nearby-candidate-card {
    min-inline-size: 0;
    text-align: start;
}
.around-ui .around-search-option__summary,
.around-ui .around-me-add-grid select {
    min-inline-size: 0;
    max-inline-size: 100%;
}
.around-ui .primary-button,
.around-ui .secondary-link {
    white-space: normal;
    overflow-wrap: anywhere;
    max-inline-size: 100%;
}
.around-ui .nearby-candidate-meta,
.around-ui .nearby-candidate-map-links {
    unicode-bidi: isolate;
}
.around-ui .around-me-pagination__status {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Best Routes: preserve numeric/star order while allowing translated labels to wrap. */
.best-routes-ui .best-route-stars,
.best-routes-ui .best-route-star-radio,
.best-routes-ui .best-route-rating-distribution {
    direction: ltr;
    unicode-bidi: isolate;
}
.best-routes-ui .best-route-card__rating strong,
.best-routes-ui .best-route-detail-rating strong {
    unicode-bidi: isolate;
}
.best-routes-ui .best-route-action,
.best-routes-ui .primary-button,
.best-routes-ui .secondary-link,
.best-routes-ui .sort-pill {
    white-space: normal;
    overflow-wrap: anywhere;
    max-inline-size: 100%;
}
.best-routes-ui .best-route-star-radio label,
.best-routes-ui .best-route-rating-form-card,
.best-routes-ui .best-route-detail-hero__content {
    min-inline-size: 0;
}
.best-routes-ui .field-group,
.best-routes-ui .best-route-card__body {
    text-align: start;
}

/* Transportation display only: keep maps and route identities unchanged. */
.transportation-ui .transport-priority-card,
.transportation-ui .transport-result-actions,
.transportation-ui .transport-helper-summary { text-align: start; }
.transportation-ui .transport-result-actions { flex-wrap: wrap; }
.transportation-ui .transport-priority-card__text { min-inline-size: 0; }
.transportation-ui .transport-priority-card__label,
.transportation-ui .transport-priority-card__visible-status,
.transportation-ui .compact-primary-button,
.transportation-ui .compact-secondary-button { white-space: normal; overflow-wrap: anywhere; }
.transportation-ui .transport-journey-leg__heading + span,
.transportation-ui .transport-step-number { direction: ltr; unicode-bidi: isolate; }

/* Progressive display enhancement for the Plan native date control only. */
.plan-ui .localized-date-input { position: relative; min-width: 0; }
.plan-ui .localized-date-display { display: none; }
.plan-ui .localized-date-input.is-localized #trip-start-date {
    min-height: 4.5rem;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.plan-ui .localized-date-input.is-localized #trip-start-date::-webkit-datetime-edit {
    opacity: 0;
}
.plan-ui .localized-date-input.is-localized .localized-date-display {
    display: flex;
    align-items: center;
    position: absolute;
    inset: 0 2.75rem 0 0.9rem;
    pointer-events: none;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.3;
}
.plan-ui:dir(rtl) .localized-date-display {
    direction: rtl;
    justify-content: flex-start;
    text-align: right;
}

.plan-calendar-open[hidden] { display: none; }
.plan-calendar-open { margin-block: 0.5rem; min-height: 44px; }
.plan-calendar-dialog {
    box-sizing: border-box;
    width: min(24rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    margin: auto;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 1rem;
    background: #fff;
    color: #0f172a;
}
.plan-calendar-dialog::backdrop { background: rgb(15 23 42 / 45%); }
.plan-calendar-header { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.plan-calendar-header h2 {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 0.5rem;
    text-align: center;
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}
.plan-calendar-dialog button {
    min-height: 44px;
    min-width: 0;
    padding: 0.4rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: inherit;
    font: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.plan-calendar-dialog table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-block: 0.75rem; }
.plan-calendar-dialog th { padding: 0.35rem 0; font-size: 0.75rem; overflow-wrap: anywhere; text-align: center; }
.plan-calendar-dialog td { padding: 1px; border: 0; }
.plan-calendar-dialog td button { width: 100%; padding: 0; }
.plan-calendar-dialog [aria-selected="true"] button { background: #1748d3; color: #fff; }
.plan-calendar-dialog [aria-current="date"] { border: 2px solid #1748d3; }
.plan-calendar-dialog button:focus-visible { outline: 3px solid #e17b00; outline-offset: 1px; }
.plan-calendar-dialog button:disabled { opacity: 0.45; cursor: default; }
.plan-calendar-dialog p { font-size: 0.85rem; line-height: 1.5; }
.plan-calendar-footer { display: flex; gap: 0.5rem; }
.plan-calendar-footer button { flex: 1; }

/* Only successful enhancement replaces the visible native interaction. */
.plan-ui .localized-date-input.has-primary-calendar #trip-start-date {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    pointer-events: none;
}
.plan-ui .localized-date-input.has-primary-calendar .localized-date-display { display: none; }
.plan-ui .has-primary-calendar .plan-calendar-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 4.5rem;
    margin: 0;
    padding: 0.9rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.9rem;
    background: #f1f5f9;
    color: #0f172a;
    font: inherit;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.plan-ui .has-primary-calendar .plan-calendar-open svg { flex-shrink: 0; }
.plan-ui .has-primary-calendar .plan-calendar-open:focus-visible { outline: 3px solid #e17b00; outline-offset: 2px; }

/* Without successful calendar enhancement, expose the native date UI normally. */
.plan-ui .localized-date-input:not(.has-primary-calendar) #trip-start-date {
    color: inherit;
    -webkit-text-fill-color: currentColor;
}
.plan-ui .localized-date-input:not(.has-primary-calendar) #trip-start-date::-webkit-datetime-edit { opacity: 1; }
.plan-ui .localized-date-input:not(.has-primary-calendar) .localized-date-display { display: none; }