/* Kidzo — base tokens & component styles. Ported from design bundle. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

[x-cloak] { display: none !important; }

:root {
    --kr-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    --kr-primary-50:  #eef3ee;
    --kr-primary-100: #d8e3d8;
    --kr-primary-300: #8eaa8e;
    --kr-primary-500: #3a5a3a;
    --kr-primary-600: #324f32;
    --kr-primary-700: #2a432a;
    --kr-primary-900: #1a2c1a;

    --kr-secondary-50:  #fbeee7;
    --kr-secondary-200: #f3cdb8;
    --kr-secondary-500: #ce8966;
    --kr-secondary-700: #a86a4b;

    --kr-bg:       #f5f2ed;
    --kr-surface:  #ffffff;
    --kr-card:     #ffffff;
    --kr-n-50:  #f5f2ed;
    --kr-n-100: #ece7df;
    --kr-n-200: #ddd6cb;
    --kr-n-300: #c2bbae;
    --kr-n-500: #8a8275;
    --kr-n-700: #4a463e;
    --kr-n-800: #2e2b25;
    --kr-n-900: #1c1a16;

    --kr-success: #4f7a4a;
    --kr-warning: #b88030;
    --kr-error:   #b75a4f;
    --kr-info:    #4a6e8a;

    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
    --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;

    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;

    --sh-1: 0 1px 2px rgba(28,26,22,.04), 0 1px 1px rgba(28,26,22,.03);
    --sh-2: 0 1px 3px rgba(28,26,22,.06), 0 2px 8px rgba(28,26,22,.05);
    --sh-3: 0 4px 16px rgba(28,26,22,.08), 0 2px 4px rgba(28,26,22,.04);
    --sh-pop: 0 12px 36px rgba(28,26,22,.14), 0 2px 8px rgba(28,26,22,.06);
}

[data-palette="forest"] {
    --kr-primary-50:#eef3ee;--kr-primary-100:#d8e3d8;--kr-primary-300:#8eaa8e;
    --kr-primary-500:#3a5a3a;--kr-primary-600:#324f32;--kr-primary-700:#2a432a;--kr-primary-900:#1a2c1a;
}
[data-palette="teal"] {
    --kr-primary-50:#e8f0f0;--kr-primary-100:#c9dcdc;--kr-primary-300:#7ba6a6;
    --kr-primary-500:#1f4a4a;--kr-primary-600:#1a4040;--kr-primary-700:#163636;--kr-primary-900:#0e2424;
}
[data-palette="indigo"] {
    --kr-primary-50:#e9eef3;--kr-primary-100:#cad4df;--kr-primary-300:#7e92ab;
    --kr-primary-500:#2c5266;--kr-primary-600:#244355;--kr-primary-700:#1d3645;--kr-primary-900:#11212a;
}
[data-palette="moss"] {
    --kr-primary-50:#eef1ea;--kr-primary-100:#d6dcc8;--kr-primary-300:#9aaa7c;
    --kr-primary-500:#4a5a32;--kr-primary-600:#3e4c2a;--kr-primary-700:#333e22;--kr-primary-900:#1f2614;
}

[data-secondary="coral"] {
    --kr-secondary-50:#fbeee7;--kr-secondary-200:#f3cdb8;--kr-secondary-500:#ce8966;--kr-secondary-700:#a86a4b;
}
[data-secondary="ochre"] {
    --kr-secondary-50:#f8efdb;--kr-secondary-200:#ecd29c;--kr-secondary-500:#c79a4c;--kr-secondary-700:#9f7935;
}
[data-secondary="peach"] {
    --kr-secondary-50:#fbece0;--kr-secondary-200:#f4cdae;--kr-secondary-500:#d49a6a;--kr-secondary-700:#a87749;
}

[data-radius="sharp"] {
    --r-xs: 0px; --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --r-pill: 999px;
}
[data-radius="soft"] {
    --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
}
[data-radius="round"] {
    --r-xs: 8px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--kr-bg);
    font-family: var(--kr-font);
    color: var(--kr-n-800);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.5;
}

.kr {
    font-family: var(--kr-font);
    color: var(--kr-n-800);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.5;
}
.kr *, .kr *::before, .kr *::after { box-sizing: border-box; }
.kr h1, .kr h2, .kr h3, .kr h4, .kr p { margin: 0; }
.kr button { font-family: inherit; }
.kr a { color: inherit; text-decoration: none; }
.kr ul { margin: 0; padding: 0; list-style: none; }
.kr .num, .kr .tabular { font-variant-numeric: tabular-nums; }

.kr .t-12 { font-size: 12px; line-height: 1.4; }
.kr .t-14 { font-size: 14px; line-height: 1.45; }
.kr .t-16 { font-size: 16px; line-height: 1.55; }
.kr .t-18 { font-size: 18px; line-height: 1.5; }
.kr .t-20 { font-size: 20px; line-height: 1.4; }
.kr .t-24 { font-size: 24px; line-height: 1.3; letter-spacing: -0.005em; }
.kr .t-32 { font-size: 32px; line-height: 1.2; letter-spacing: -0.012em; font-weight: 700; }
.kr .t-40 { font-size: 40px; line-height: 1.15; letter-spacing: -0.018em; font-weight: 700; }
.kr .t-56 { font-size: 56px; line-height: 1.05; letter-spacing: -0.024em; font-weight: 800; }

.kr .muted  { color: var(--kr-n-700); }
.kr .strong { color: var(--kr-n-900); }
.kr .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.kr .upper { text-transform: uppercase; letter-spacing: .08em; }

.kr-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 16px; border-radius: var(--r-sm);
    border: 1px solid transparent; cursor: pointer;
    font-weight: 600; font-size: 15px; line-height: 1;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
    white-space: nowrap;
    font-family: inherit;
}
.kr-btn:active { transform: translateY(0.5px); }
.kr-btn.sm { padding: 7px 12px; font-size: 13px; }
.kr-btn.lg { padding: 14px 22px; font-size: 16px; }
.kr-btn.primary { background: var(--kr-primary-500); color: #fff; }
.kr-btn.primary:hover { background: var(--kr-primary-600); }
.kr-btn.primary:active { background: var(--kr-primary-700); }
.kr-btn.secondary { background: var(--kr-surface); color: var(--kr-n-900); border-color: var(--kr-n-200); }
.kr-btn.secondary:hover { border-color: var(--kr-n-300); background: var(--kr-n-50); }
.kr-btn.tertiary { background: transparent; color: var(--kr-n-800); }
.kr-btn.tertiary:hover { background: var(--kr-n-100); }
.kr-btn.destructive { background: var(--kr-error); color: #fff; }
.kr-btn[disabled], .kr-btn.disabled { opacity: .45; cursor: not-allowed; }

.kr-input, .kr-select {
    display: block; width: 100%;
    padding: 11px 14px; border-radius: var(--r-sm);
    border: 1px solid var(--kr-n-200); background: var(--kr-surface);
    font: inherit; color: var(--kr-n-900);
    transition: border-color .15s, box-shadow .15s;
}
.kr-input::placeholder { color: var(--kr-n-500); }
.kr-input:focus, .kr-select:focus {
    outline: none; border-color: var(--kr-primary-500);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--kr-primary-500) 18%, transparent);
}
.kr-input[aria-invalid="true"] { border-color: var(--kr-error, #b94a3b); }

.kr-form-group { display: block; }
.kr-field-error {
    display: block; margin-top: 4px;
    color: var(--kr-error, #b94a3b);
    font-size: 12px; line-height: 1.3;
}
.kr-field-error:empty { display: none; }

.kr-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--r-pill);
    background: var(--kr-surface); border: 1px solid var(--kr-n-200);
    font-size: 13px; font-weight: 500; color: var(--kr-n-800);
    cursor: pointer; transition: border-color .15s, background .15s;
}
.kr-chip:hover { border-color: var(--kr-n-300); }
.kr-chip.active {
    background: var(--kr-primary-500); color: #fff; border-color: var(--kr-primary-500);
}
.kr-chip.removable { padding-right: 8px; }

.kr-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: var(--r-xs);
    font-size: 12px; font-weight: 600;
    background: var(--kr-n-100); color: var(--kr-n-800);
}
.kr-badge.verified  { background: var(--kr-primary-50); color: var(--kr-primary-700); }
.kr-badge.secondary { background: var(--kr-secondary-50); color: var(--kr-secondary-700); }
.kr-badge.success   { background: #e6efe5; color: var(--kr-success); }
.kr-badge.warning   { background: #faecd0; color: var(--kr-warning); }

.kr-card {
    background: var(--kr-surface);
    border: 1px solid var(--kr-n-100);
    border-radius: var(--r-md);
    overflow: hidden;
}
.kr-card.elev { box-shadow: var(--sh-2); border-color: transparent; }

.kr-noscroll::-webkit-scrollbar { display: none; }
.kr-noscroll { scrollbar-width: none; }

.kr .row     { display: flex; }
.kr .col     { display: flex; flex-direction: column; }
.kr .gap-1   { gap: 4px; }
.kr .gap-2   { gap: 8px; }
.kr .gap-3   { gap: 12px; }
.kr .gap-4   { gap: 16px; }
.kr .gap-5   { gap: 20px; }
.kr .gap-6   { gap: 24px; }
.kr .gap-8   { gap: 32px; }
.kr .gap-10  { gap: 48px; }
.kr .center  { align-items: center; }
.kr .between { justify-content: space-between; }
.kr .grow    { flex: 1 1 auto; }
.kr .wrap    { flex-wrap: wrap; }
.kr .divider { height: 1px; background: var(--kr-n-100); }

.kr-range { position: relative; height: 36px; padding: 0 10px; }
.kr-range .track {
    position: absolute; left: 10px; right: 10px; top: 50%; height: 4px;
    border-radius: 999px; background: var(--kr-n-100); transform: translateY(-50%);
}
.kr-range .fill {
    position: absolute; top: 50%; height: 4px;
    border-radius: 999px; background: var(--kr-primary-500); transform: translateY(-50%);
}
.kr-range .handle {
    position: absolute; top: 50%; width: 20px; height: 20px;
    background: #fff; border: 2px solid var(--kr-primary-500);
    border-radius: 999px; transform: translate(-50%, -50%);
    box-shadow: var(--sh-1);
}

/* Layout primitives */
.kr-page { background: var(--kr-bg); min-height: 100vh; display: flex; flex-direction: column; }
.kr-page > main { flex: 1 0 auto; }
.kr-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* Header */
.kr-header {
    height: 64px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--kr-n-100);
    display: flex; align-items: center; padding: 0 32px; gap: 32px;
    position: sticky; top: 0; z-index: 5;
}
.kr-header .brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--kr-n-900);
}
.kr-header nav {
    display: flex; gap: 24px; margin-left: 8px;
    font-size: 14px; color: var(--kr-n-700);
}
.kr-header nav a:hover { color: var(--kr-n-900); }
.kr-header .city-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: var(--r-sm);
    color: var(--kr-n-700); font-size: 13px; font-weight: 500;
    background: transparent; border: none; cursor: pointer;
    font-family: inherit;
}
.kr-header .city-btn:hover { background: var(--kr-n-100); color: var(--kr-n-900); }

/* City switcher popover */
.city-switch { position: relative; }
.city-switch__panel {
    position: absolute; top: calc(100% + 8px); left: 0;
    width: 260px;
    background: #fff; border: 1px solid var(--kr-n-200);
    border-radius: var(--r-md);
    padding: 6px 0;
    box-shadow: 0 16px 40px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.04);
    z-index: 50;
}
.city-switch__title {
    font-size: 11px; font-weight: 600; color: var(--kr-n-500);
    text-transform: uppercase; letter-spacing: .06em;
    margin: 0; padding: 6px 14px 8px;
}
.city-switch__search-wrap { padding: 4px 10px 8px; }
.city-switch__search {
    width: 100%; box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--kr-n-200); border-radius: var(--r-sm);
    font: inherit; font-size: 13px; color: var(--kr-n-900); background: #fff;
    outline: none;
}
.city-switch__search:focus { border-color: var(--kr-primary-300); }
.city-switch__list {
    list-style: none; margin: 0; padding: 0;
    max-height: 320px; overflow-y: auto;
}
.city-switch__item form { margin: 0; padding: 0; background: none; border: 0; }
.city-switch__item button {
    appearance: none; -webkit-appearance: none;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; text-align: left;
    padding: 9px 14px;
    background: transparent; border: 0; border-radius: 0;
    cursor: pointer;
    font: inherit; font-size: 14px; line-height: 1.2;
    color: var(--kr-n-800);
    transition: background .12s, color .12s;
}
.city-switch__item button:hover,
.city-switch__item button:focus-visible {
    background: var(--kr-n-50); color: var(--kr-n-900);
    outline: none;
}
.city-switch__item--active button {
    color: var(--kr-primary-700); font-weight: 600;
}
.city-switch__check {
    flex: 0 0 auto; color: var(--kr-primary-500);
    display: inline-flex;
}

/* Footer wave + dark footer */
.kr-footer-wrap { margin-top: 24px; }
.kr-footer-wave {
    display: block; width: 100%; height: 64px;
}
.kr-footer {
    background: var(--kr-n-900);
    padding: 16px 32px 32px;
    color: color-mix(in oklab, var(--kr-n-50) 78%, transparent);
}
.kr-footer .grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px; max-width: 1280px; margin: 0 auto;
}
.kr-footer h4 {
    font-size: 14px; font-weight: 700; margin: 0 0 12px;
    color: var(--kr-n-50);
}
.kr-footer ul { display: grid; gap: 8px; font-size: 14px; }
.kr-footer .brand-row {
    display: flex; align-items: center; gap: 10px;
    font-weight: 800; font-size: 19px; color: var(--kr-n-50);
}
.kr-footer .legal {
    border-top: 1px solid color-mix(in oklab, var(--kr-n-50) 12%, transparent);
    padding-top: 20px; margin-top: 40px;
    font-size: 12px;
    display: flex; justify-content: space-between;
    color: color-mix(in oklab, var(--kr-n-50) 50%, transparent);
    max-width: 1280px; margin-left: auto; margin-right: auto;
}
.kr-footer .legal-links { display: flex; gap: 20px; }
.kr-footer p { margin: 0; }
.kr-footer .desc {
    margin-top: 12px; max-width: 360px; font-size: 14px;
    color: color-mix(in oklab, var(--kr-n-50) 65%, transparent);
}
.kr-footer .compliance {
    margin-top: 12px; font-size: 12px;
    color: color-mix(in oklab, var(--kr-n-50) 50%, transparent);
}

/* Section helpers */
.kr-section { padding: 32px 32px; max-width: 1280px; margin: 0 auto; }
.kr-section.tight { padding: 16px 32px; }
.kr-section.wide  { padding: 48px 32px; }

.kr-section-head {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; gap: 16px;
}
.kr-section-head .right-link { color: var(--kr-primary-700); font-weight: 600; font-size: 14px; }

/* Hero on city page */
.kr-hero {
    position: relative;
    padding: 64px 32px 56px;
    overflow: hidden;
    background: var(--kr-bg);
}
.kr-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-image: url('/img/hero-bg.jpg');
    background-size: cover; background-position: center 60%;
    filter: saturate(0.7);
}
.kr-hero-wash {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, var(--kr-bg) 0%, color-mix(in oklab, var(--kr-bg) 70%, transparent) 40%, var(--kr-bg) 100%);
}
.kr-hero-grid {
    position: relative; z-index: 1;
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px;
    align-items: center;
}
.kr-hero-eyebrow {
    display: flex; align-items: center; gap: 8px;
    color: var(--kr-primary-700); font-size: 14px; font-weight: 600;
}
.kr-hero-eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--kr-primary-500);
}
.kr-hero h1 {
    margin-top: 16px; color: var(--kr-n-900); max-width: 720px;
    font-size: 56px; line-height: 1.04; letter-spacing: -0.024em; font-weight: 800;
}
.kr-hero .lead {
    margin-top: 16px; max-width: 560px;
    font-size: 18px; color: var(--kr-n-700); line-height: 1.5;
}
.kr-hero .popular {
    margin-top: 18px;
}
.kr-hero .popular-label {
    margin-bottom: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    text-transform: uppercase; letter-spacing: .08em;
    font-size: 12px; color: var(--kr-n-700);
}
.kr-hero .popular-chips {
    display: flex; gap: 8px; flex-wrap: wrap;
}

/* Hero search pill */
.kr-search {
    margin-top: 28px; padding: 6px 6px 6px 18px;
    display: flex; align-items: center; gap: 10px;
    border-radius: 999px; height: 60px;
    background: var(--kr-surface);
    border: 1px solid transparent;
    box-shadow: var(--sh-2);
}
.kr-search .icon { color: var(--kr-n-700); display: inline-flex; }
.kr-search input {
    flex: 1; border: none; background: transparent;
    font-size: 17px; padding: 12px 4px; font-weight: 500;
    color: var(--kr-n-900); font-family: inherit; outline: none; min-width: 0;
}
.kr-search input::placeholder { color: var(--kr-n-500); }
.kr-search .sep {
    width: 1px; height: 28px; background: var(--kr-n-100);
}
.kr-search .pill-btn {
    background: transparent; border: none;
    padding: 10px 14px; color: var(--kr-n-800);
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit;
}
.kr-search .submit {
    border-radius: 999px;
    padding: 0 22px; height: 48px;
    background: var(--kr-primary-500); color: #fff; border: none;
    font-size: 15px; font-weight: 600; cursor: pointer;
    font-family: inherit;
}
.kr-search .submit:hover { background: var(--kr-primary-600); }

/* Hero collage */
.kr-collage { position: relative; aspect-ratio: 4/5; }
.kr-collage .img {
    position: absolute;
    border-radius: var(--r-lg); overflow: hidden;
    background-size: cover; background-position: center;
    box-shadow: 0 12px 32px rgba(28,26,22,.12);
}
.kr-collage .img-a {
    inset: 0 30% 30% 0;
    background-image: url('https://images.unsplash.com/photo-1452860606245-08befc0ff44b?w=900&q=75');
}
.kr-collage .img-b {
    inset: 32% 0 0 32%;
    background-image: url('https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=900&q=75');
}
.kr-collage .float-card {
    position: absolute; padding: 10px 14px;
    display: flex; gap: 10px; align-items: center; max-width: 240px;
    background: var(--kr-surface); border-radius: var(--r-md);
    box-shadow: var(--sh-2);
}
.kr-collage .float-card.tl { left: -24px; top: 44%; }
.kr-collage .float-card.br { right: -16px; bottom: 16px; }
.kr-collage .float-card .ico {
    width: 36px; height: 36px; border-radius: var(--r-sm);
    color: #fff; display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.kr-collage .float-card .ico.primary { background: var(--kr-primary-500); }
.kr-collage .float-card .ico.secondary { background: var(--kr-secondary-500); }
.kr-collage .float-card .title { font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--kr-n-900); }
.kr-collage .float-card .sub { font-size: 12px; color: var(--kr-n-700); margin-top: 2px; }

/* Direction tile */
.kr-tile {
    background: var(--kr-surface);
    border: 1px solid var(--kr-n-100);
    border-radius: var(--r-md);
    padding: 20px; display: flex; flex-direction: column; gap: 12px;
    cursor: pointer; transition: border-color .15s, transform .15s;
    text-decoration: none;
}
.kr-tile:hover { border-color: var(--kr-primary-300); }
.kr-tile .ico {
    width: 44px; height: 44px; border-radius: var(--r-sm);
    background: var(--kr-primary-50); color: var(--kr-primary-700);
    display: flex; align-items: center; justify-content: center;
}
.kr-tile .name { font-size: 18px; font-weight: 700; color: var(--kr-n-900); }
.kr-tile .meta { font-size: 14px; color: var(--kr-n-700); margin-top: 2px; }

/* Step / Why-us cards */
.kr-step {
    background: var(--kr-surface);
    border: 1px solid var(--kr-n-100);
    border-radius: var(--r-md);
    padding: 24px; display: grid; gap: 10px;
}
.kr-step .num {
    color: var(--kr-secondary-700); font-weight: 700;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px;
}
.kr-step .title { font-size: 20px; font-weight: 700; color: var(--kr-n-900); }
.kr-step .body { font-size: 14px; color: var(--kr-n-700); }

.kr-promo {
    background: var(--kr-primary-500); color: #fff;
    border-radius: var(--r-md); padding: 32px;
}
.kr-promo h2 { color: #fff; max-width: 640px; }
.kr-promo .promo-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px;
}
.kr-promo .promo-grid > div {
    border-top: 1px solid rgba(255,255,255,.18);
    padding-top: 16px;
}
.kr-promo .promo-grid .t { font-size: 18px; font-weight: 700; }
.kr-promo .promo-grid .b { font-size: 14px; margin-top: 6px; opacity: 0.78; }

/* Districts */
.kr-districts {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.kr-districts .item {
    background: var(--kr-surface);
    border: 1px solid var(--kr-n-100);
    border-radius: var(--r-md);
    padding: 16px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: default;
}

/* FAQ */
.kr-faq { display: grid; gap: 12px; max-width: 880px; }
.kr-faq details {
    background: var(--kr-surface);
    border: 1px solid var(--kr-n-100);
    border-radius: var(--r-md);
    padding: 20px;
}
.kr-faq summary {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; list-style: none;
    font-size: 18px; font-weight: 600; color: var(--kr-n-900);
}
.kr-faq summary::-webkit-details-marker { display: none; }
.kr-faq details[open] summary svg { transform: rotate(180deg); }
.kr-faq summary svg { transition: transform .2s; }
.kr-faq details p {
    margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--kr-n-700);
}

/* Activity / listing breadcrumbs */
.kr-breadcrumbs {
    padding: 16px 32px;
    max-width: 1280px;
    margin: 0 auto;
    font-size: 14px;
    color: var(--kr-n-700);
    display: flex;
    gap: 8px;
    align-items: center;
}
.kr-breadcrumbs .current { color: var(--kr-n-900); }
.kr-breadcrumbs a { color: inherit; }
.kr-breadcrumbs a:hover { color: var(--kr-n-900); }

/* Empty state */
.kr-empty {
    background: var(--kr-surface);
    border: 1px solid var(--kr-n-100);
    border-radius: var(--r-md);
    padding: 56px;
    text-align: center;
    display: grid; gap: 24px;
    justify-items: center;
    max-width: 600px;
    margin: 48px auto 0;
}
.kr-empty .ico-wrap {
    width: 72px; height: 72px; border-radius: 999px;
    background: var(--kr-primary-50); color: var(--kr-primary-700);
    display: flex; align-items: center; justify-content: center;
}
.kr-empty h2 { font-size: 24px; font-weight: 700; color: var(--kr-n-900); }
.kr-empty p { font-size: 16px; color: var(--kr-n-700); margin-top: 8px; }

/* Site home (city hub) */
.kr-cities-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.kr-city-card {
    background: var(--kr-surface);
    border: 1px solid var(--kr-n-100);
    border-radius: var(--r-md);
    padding: 24px; display: grid; gap: 12px;
    text-decoration: none;
}
.kr-city-card:hover { border-color: var(--kr-primary-300); }
.kr-city-card .name { font-size: 24px; font-weight: 700; color: var(--kr-n-900); letter-spacing: -0.005em; }
.kr-city-card .meta { font-size: 14px; color: var(--kr-n-700); }
.kr-city-card .meta strong { color: var(--kr-n-900); }
.kr-city-card .more {
    display: flex; align-items: center; gap: 6px;
    color: var(--kr-primary-700); font-weight: 600; font-size: 14px;
}
.kr-city-card.dimmed { opacity: 0.55; pointer-events: none; }

/* Filial card (compact, in listings) */
.kr-filial-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.kr-filial-card {
    background: var(--kr-surface);
    border: 1px solid var(--kr-n-100);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.kr-filial-card .photo {
    position: relative; aspect-ratio: 16/10; display: block; overflow: hidden;
    background: color-mix(in oklab, var(--kr-primary-50) 80%, white);
}
.kr-filial-card .photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.kr-filial-card .photo .schematic {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 25% 75%, color-mix(in oklab, var(--kr-secondary-200) 70%, transparent) 0 14%, transparent 15%),
        radial-gradient(circle at 80% 30%, color-mix(in oklab, var(--kr-primary-100) 80%, transparent) 0 18%, transparent 19%),
        linear-gradient(180deg, color-mix(in oklab, var(--kr-primary-50) 80%, white) 0 60%, color-mix(in oklab, var(--kr-n-100) 80%, white) 60% 100%);
}
.kr-filial-card .photo .badges {
    position: absolute; top: 10px; left: 10px; display: flex; gap: 6px;
}
.kr-filial-card .photo .badges .kr-badge { background: rgba(255,255,255,.92); }
.kr-filial-card .body {
    padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.kr-filial-card .title-row {
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.kr-filial-card .titles { min-width: 0; }
.kr-filial-card .club {
    font-size: 12px; font-weight: 600; color: var(--kr-n-700);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px;
}
.kr-filial-card .name {
    font-size: 18px; font-weight: 700; color: var(--kr-n-900);
    text-decoration: none;
}
.kr-filial-card .name:hover { color: var(--kr-primary-700); }
.kr-filial-card .price {
    font-size: 14px; font-weight: 700; color: var(--kr-n-900);
    white-space: nowrap;
}
.kr-filial-card .meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; color: var(--kr-n-700);
}
.kr-filial-card .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.kr-filial-card .actions {
    display: flex; gap: 8px; margin-top: 4px;
}
.kr-filial-card .actions > * { flex: 1; }

/* Listing layout (sidebar + grid) */
.kr-listing {
    padding-bottom: 48px;
    display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start;
}
.kr-listing .filters { position: sticky; top: 80px; align-self: start; }

/* Filial detail page */
.kr-filial-hero {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start;
}
.kr-filial-hero .hero-photo {
    position: relative; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden;
    background: color-mix(in oklab, var(--kr-primary-50) 80%, white);
}
.kr-filial-hero .hero-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.kr-filial-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; color: var(--kr-n-800); margin-top: 16px;
}
.kr-filial-meta .muted { color: var(--kr-n-700); }
.kr-filial-badges {
    display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px;
}
.kr-filial-cta {
    display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px;
}

.kr-filial-grid-2col {
    display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start;
}
.kr-filial-side { position: sticky; top: 80px; align-self: start; }

.kr-schedule-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.kr-schedule-table th, .kr-schedule-table td {
    padding: 10px 8px; text-align: left;
    border-bottom: 1px solid var(--kr-n-100);
}
.kr-schedule-table th {
    font-weight: 600; color: var(--kr-n-700);
    font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
}
.kr-schedule-table td.num, .kr-schedule-table .num { font-variant-numeric: tabular-nums; }

.kr-price-list {
    list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;
}
.kr-price-list li {
    display: grid; grid-template-columns: 1fr auto; gap: 8px;
    padding: 12px 0; border-bottom: 1px solid var(--kr-n-100);
    align-items: baseline;
}
.kr-price-list li:last-child { border-bottom: none; }
.kr-price-list .label { font-weight: 500; color: var(--kr-n-900); }
.kr-price-list .amount { font-weight: 700; color: var(--kr-n-900); }
.kr-price-list .note {
    grid-column: 1 / -1; font-size: 12px; margin-top: 2px;
}

.kr-contact-list {
    list-style: none; padding: 0; margin: 0; display: grid; gap: 10px;
    font-size: 14px;
}
.kr-contact-list li {
    display: flex; align-items: center; gap: 10px;
    color: var(--kr-n-800);
}
.kr-contact-list a { color: var(--kr-primary-700); font-weight: 600; }
.kr-contact-list a:hover { color: var(--kr-primary-500); text-decoration: underline; }

.kr-hours {
    list-style: none; padding: 0; margin: 0; display: grid; gap: 6px;
    font-size: 14px;
}
.kr-hours li {
    display: grid; grid-template-columns: 36px 1fr; gap: 8px;
    color: var(--kr-n-800);
}
.kr-hours .day { font-weight: 600; color: var(--kr-n-700); }

.kr-gallery {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.kr-gallery img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--r-md);
    display: block;
}

/* Mobile tweaks */
@media (max-width: 760px) {
    .kr-header { padding: 0 16px; gap: 12px; height: 56px; }
    .kr-header nav, .kr-header .desktop-only { display: none; }
    .kr-section { padding: 20px 16px; }
    .kr-breadcrumbs { padding: 12px 16px; font-size: 12px; }
    .kr-hero { padding: 24px 16px 32px; }
    .kr-hero h1 { font-size: 32px; }
    .kr-hero .lead { font-size: 16px; }
    .kr-hero-grid { grid-template-columns: 1fr; gap: 24px; }
    .kr-collage { display: none; }
    .kr-search { height: auto; flex-wrap: wrap; padding: 10px; border-radius: var(--r-md); }
    .kr-search .sep, .kr-search .pill-btn { display: none; }
    .kr-search .submit { width: 100%; height: 48px; border-radius: var(--r-sm); }
    .kr-footer { padding: 8px 16px 24px; }
    .kr-footer .grid { grid-template-columns: 1fr; gap: 24px; }
    .kr-footer .legal { flex-direction: column; gap: 12px; padding: 12px 0 0; }
    .kr-footer-wave { height: 36px; }
    .kr-promo .promo-grid,
    .kr-cities-grid,
    .kr-districts {
        grid-template-columns: 1fr 1fr;
    }
    .kr-listing { grid-template-columns: 1fr; gap: 16px; }
    .kr-listing .filters { position: static; }
    .kr-filial-hero { grid-template-columns: 1fr; gap: 16px; }
    .kr-filial-hero .hero-photo { aspect-ratio: 16/10; }
    .kr-filial-grid-2col { grid-template-columns: 1fr; }
    .kr-filial-side { position: static; }
    .kr-filial-grid { grid-template-columns: 1fr; }
    .kr-gallery { grid-template-columns: 1fr 1fr; }
    .kr-schedule-table th, .kr-schedule-table td { padding: 8px 6px; font-size: 13px; }
}