/* ============================================================
   2026 WE TOGETHER RUN — WTR Design System
   Dark base + electric accents / oversized display type
   Replaces app.css + redesign.css
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&display=swap');

:root {
    /* ---- LIGHT palette (default) ---- */
    --bg: #f7f8f3;
    --bg-raise: #eef0e8;
    --surface: #ffffff;
    --surface-2: #f1f3ec;
    --line: rgba(20, 22, 15, 0.10);
    --line-strong: rgba(20, 22, 15, 0.20);
    --ink: #14160f;
    --ink-soft: #3f4433;
    --muted: #6b7057;

    /* deep accents — legible as text on light bg, still vivid as fills */
    --lime: #5f7d00;
    --lime-deep: #4c6600;
    --cyan: #0a7a93;
    --magenta: #c81570;
    --coral: #cf3f18;
    --violet: #5a40d0;

    --on-lime: #ffffff;

    /* semantic tints / scrims (theme-aware) */
    --shadow-pop: 0 20px 60px rgba(20, 22, 15, 0.14);
    --topbar-bg: rgba(247, 248, 243, 0.82);
    --regbar-bg: rgba(247, 248, 243, 0.9);
    --tint-hover: rgba(20, 22, 15, 0.05);
    --tint-row: rgba(20, 22, 15, 0.03);
    --tint-chip: rgba(20, 22, 15, 0.05);
    --track: rgba(20, 22, 15, 0.09);
    --ghost-stroke: rgba(20, 22, 15, 0.5);

    /* type */
    --font-body: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    --font-display: 'Archivo', 'Pretendard Variable', Pretendard, sans-serif;

    /* layout */
    --content: 1280px;
    --pad-x: clamp(20px, 4vw, 48px);
    --radius: 18px;
    --radius-sm: 10px;
    --radius-btn: 10px;
    --header-h: 72px;
}

/* ---- DARK palette ---- original design, restored when the OS
   prefers dark (and the user hasn't forced light) or when toggled on ---- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0a0b0f;
        --bg-raise: #10121a;
        --surface: #151824;
        --surface-2: #1b1f2e;
        --line: rgba(255, 255, 255, 0.09);
        --line-strong: rgba(255, 255, 255, 0.18);
        --ink: #f3f5ec;
        --ink-soft: #c6cbd6;
        --muted: #8b93a5;

        --lime: #d8ff3a;
        --lime-deep: #b8e30e;
        --cyan: #53e9ff;
        --magenta: #ff4fa3;
        --coral: #ff6b4a;
        --violet: #8b7bff;

        --on-lime: #10130a;

        --shadow-pop: 0 24px 80px rgba(0, 0, 0, 0.55);
        --topbar-bg: rgba(10, 11, 15, 0.82);
        --regbar-bg: rgba(13, 15, 21, 0.88);
        --tint-hover: rgba(255, 255, 255, 0.07);
        --tint-row: rgba(255, 255, 255, 0.025);
        --tint-chip: rgba(255, 255, 255, 0.06);
        --track: rgba(255, 255, 255, 0.08);
        --ghost-stroke: rgba(243, 245, 236, 0.65);
    }
}

html[data-theme="dark"] {
    --bg: #0a0b0f;
    --bg-raise: #10121a;
    --surface: #151824;
    --surface-2: #1b1f2e;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.18);
    --ink: #f3f5ec;
    --ink-soft: #c6cbd6;
    --muted: #8b93a5;

    --lime: #d8ff3a;
    --lime-deep: #b8e30e;
    --cyan: #53e9ff;
    --magenta: #ff4fa3;
    --coral: #ff6b4a;
    --violet: #8b7bff;

    --on-lime: #10130a;

    --shadow-pop: 0 24px 80px rgba(0, 0, 0, 0.55);
    --topbar-bg: rgba(10, 11, 15, 0.82);
    --regbar-bg: rgba(13, 15, 21, 0.88);
    --tint-hover: rgba(255, 255, 255, 0.07);
    --tint-row: rgba(255, 255, 255, 0.025);
    --tint-chip: rgba(255, 255, 255, 0.06);
    --track: rgba(255, 255, 255, 0.08);
    --ghost-stroke: rgba(243, 245, 236, 0.65);
}

/* smooth theme transition on the big surfaces */
body { transition: background 0.3s ease, color 0.3s ease; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
    width: 100%; max-width: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--lime); color: var(--on-lime); }

body.menu-open { overflow: hidden; }

/* subtle grain */
.noise {
    position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- display type ---------- */
.display {
    font-family: var(--font-display);
    font-weight: 900;
    font-stretch: 115%;
    line-height: 0.92;
    letter-spacing: -0.015em;
    text-transform: uppercase;
}
.display .outline,
.outline {
    color: transparent;
    -webkit-text-stroke: 1.6px var(--ink);
}
.display .accent { color: var(--lime); }
.display em { font-style: italic; color: var(--lime); }

.kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-display);
    font-weight: 700; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--lime);
}
.kicker::before { content: ''; width: 26px; height: 2px; background: var(--lime); }

.section-lead { color: var(--muted); font-size: clamp(16.5px, 1.9vw, 21px); line-height: 1.65; max-width: 660px; }

/* ---------- shell ---------- */
.shell { width: 100%; max-width: var(--content); min-width: 0; margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .display { font-size: clamp(38px, 6.4vw, 84px); }
.section-head.row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

/* ---------- topbar ---------- */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 0 var(--pad-x);
    border-bottom: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.topbar.scrolled {
    background: var(--topbar-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom-color: var(--line);
}
.brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 900; font-size: 17px;
    letter-spacing: 0.02em; text-transform: uppercase;
}
.brand { transition: opacity 0.2s; }
.brand:hover { opacity: 0.85; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand .brand-mark { width: 36px; height: 36px; flex: 0 0 auto; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.brand .brand-mark svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 10px rgba(216, 255, 58, 0.25)); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
.brand .brand-text { line-height: 1; }
.brand .brand-text em { font-style: italic; color: var(--lime); margin-left: 5px; }
.brand .brand-year { color: var(--lime); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
    padding: 8px 14px; border-radius: 999px;
    font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
    transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--ink); background: var(--tint-hover); }

.top-actions { display: flex; align-items: center; gap: 12px; }
.language-picker {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px;
    color: var(--ink-soft); font-size: 13px;
}
.language-picker svg { width: 15px; height: 15px; }
.language-picker select {
    appearance: none; background: transparent; border: 0; color: inherit;
    font: inherit; font-weight: 700; cursor: pointer; outline: none;
}
.language-picker select option { color: #10130a; }

/* DB 언어 카탈로그 — 데스크톱 팝오버 / 모바일 바텀시트 */
.language-menu { position: relative; z-index: 90; }
.language-trigger {
    min-height: 38px; padding: 7px 11px;
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--tint-chip); color: var(--ink-soft);
    font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.language-trigger > svg:first-child { width: 16px; height: 16px; }
.language-trigger > svg:last-child { width: 13px; height: 13px; transition: transform .16s ease; }
.language-trigger[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.language-backdrop { display: none; }
.language-popover {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 92;
    width: 230px; padding: 8px;
    border: 1px solid var(--line-strong); border-radius: 19px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 16px 44px rgba(0,0,0,.22);
    -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
}
.language-popover[hidden], .language-backdrop[hidden] { display: none !important; }
.language-popover-head { padding: 8px 8px 7px; display: flex; align-items: center; justify-content: space-between; }
.language-popover-head b { color: var(--ink); font-size: 13px; }
.language-popover-head > button { width: 28px; height: 28px; display: none; place-items: center; border: 0; border-radius: 50%; background: var(--tint-chip); color: var(--muted); }
.language-popover-head > button svg { width: 15px; height: 15px; }
.language-search { margin: 0 4px 7px; padding: 0 9px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 11px; background: var(--tint-chip); color: var(--muted); }
.language-search svg { width: 14px; height: 14px; }
.language-search input { min-width: 0; min-height: 36px; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.language-options { display: grid; gap: 2px; }
.language-option {
    width: 100%; min-height: 42px; padding: 8px 10px;
    display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px;
    border: 0; border-radius: 12px; background: transparent; color: var(--ink-soft);
    font: inherit; text-align: left; cursor: pointer;
}
.language-option:hover { background: var(--tint-hover); color: var(--ink); }
.language-option > svg { width: 16px; height: 16px; color: var(--lime); opacity: 0; }
.language-option > span { font-size: 13px; font-weight: 800; }
.language-option > small { color: var(--muted); font-size: 10px; }
.language-option.is-active { background: color-mix(in srgb, var(--lime) 11%, transparent); color: var(--ink); }
.language-option.is-active > svg { opacity: 1; }
.language-option[hidden] { display: none; }

@media (max-width: 720px) {
    .language-trigger { padding: 7px 10px; }
    .topbar .language-trigger > span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .language-backdrop, .language-popover { display: none !important; }
    .language-option { min-height: 48px; border-radius: 14px; }
    .language-option > span { font-size: 14px; }
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 28px; border-radius: var(--radius-btn); border: 1px solid transparent;
    background: transparent; color: var(--ink);
    appearance: none; -webkit-appearance: none;
    font-family: var(--font-display); font-weight: 800; font-size: 15px;
    letter-spacing: 0.06em; text-transform: uppercase;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-lime { background: var(--lime); color: var(--on-lime); box-shadow: 0 0 0 rgba(216, 255, 58, 0); }
.btn-lime:hover { box-shadow: 0 8px 40px rgba(216, 255, 58, 0.35); transform: translateY(-2px); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-dark { background: var(--on-lime); color: var(--lime); }
.btn-dark:hover { transform: translateY(-2px); }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: 0.4; pointer-events: none; }

.top-cta { padding: 10px 22px; font-size: 13.5px; }

/* ---------- mobile menu ---------- */
.menu-toggle {
    display: none; flex-direction: column; gap: 5px;
    background: transparent; border: 0; padding: 10px;
}
.menu-toggle span { width: 22px; height: 2px; background: var(--ink); transition: 0.2s; }

.mobile-menu {
    position: fixed; inset: 0; z-index: 1000;
    background: var(--bg);
    display: flex; flex-direction: column;
    padding: 18px var(--pad-x) 40px;
    transform: translateY(-100%); opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.mobile-close { background: transparent; border: 0; color: var(--ink); font-size: 34px; line-height: 1; padding: 6px; }
.mobile-menu-list { display: flex; flex-direction: column; margin-top: 30px; overflow-y: auto; }
.mobile-menu-list a {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(28px, 7vw, 40px); line-height: 1.25;
    padding: 15px 2px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
}
.mobile-menu-list a::after { content: '→'; color: var(--lime); font-size: 0.7em; }
.mobile-menu-group {
    margin-top: 26px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--lime); font-weight: 700;
}
/* ---------- messages / toast ---------- */
.message-stack {
    position: fixed; top: calc(var(--header-h) + 12px); right: max(20px, var(--pad-x));
    z-index: 2100; display: flex; flex-direction: column; gap: 8px;
    width: min(420px, calc(100vw - 40px)); pointer-events: none;
}
.message {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 11px; padding: 13px 12px 13px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--line-strong);
    font-weight: 600; font-size: 14.5px; box-shadow: var(--shadow-pop);
    color: var(--ink-soft); pointer-events: auto;
    animation: msg-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.message.success { border-color: rgba(216, 255, 58, 0.5); }
.message.error { border-color: rgba(255, 107, 74, 0.6); }
.message.info { border-color: rgba(83, 233, 255, 0.5); }
.message-icon { display: inline-flex; color: var(--cyan); }
.message.success .message-icon { color: var(--lime); }
.message.error .message-icon { color: var(--coral); }
.message-icon svg { width: 19px; height: 19px; }
.message-text { line-height: 1.45; overflow-wrap: anywhere; }
.message-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px;
    background: transparent; color: var(--muted);
}
.message-close:hover { background: var(--tint-hover); color: var(--ink); }
.message-close svg { width: 17px; height: 17px; }
.message.is-hiding { animation: msg-out 0.24s ease forwards; }
@keyframes msg-in { from { opacity: 0; transform: translateX(20px); } }
@keyframes msg-out { to { opacity: 0; transform: translateX(22px); } }
@media (max-width: 680px) {
    .message-stack { top: calc(var(--header-h) + 8px); left: 16px; right: 16px; width: auto; }
    .message { font-size: 13.5px; }
}

#toast {
    position: fixed; bottom: 32px; left: 50%; transform: translate(-50%, 20px);
    background: var(--lime); color: var(--on-lime);
    padding: 13px 24px; border-radius: 999px; font-weight: 800; font-size: 14.5px;
    opacity: 0; pointer-events: none; transition: 0.3s; z-index: 1200;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- hero ---------- */
.hero {
    position: relative; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: calc(var(--header-h) + 40px) 0 0;
    overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.38; filter: saturate(0.85) contrast(1.05); }
.hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(120% 90% at 80% 0%, rgba(139, 123, 255, 0.16), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 25%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 62%, var(--bg) 100%);
}
.hero-organizer-shell {
    position: absolute; top: calc(var(--header-h) + 28px); left: 50%; z-index: 2;
    display: flex; justify-content: flex-end; transform: translateX(-50%); pointer-events: none;
}
.hero-organizer-lockup {
    display: flex; align-items: center; gap: clamp(14px, 1.7vw, 22px);
    max-width: 100%; padding: 6px 0;
    pointer-events: auto;
}
.hero-organizer-seoul { width: auto; height: 42px; object-fit: contain; }
.hero-organizer-divider { width: 1px; height: 48px; background: var(--line-strong); }
.hero-organizer-label {
    flex: 0 0 auto; color: var(--ink-soft); font-size: 19px; font-weight: 800;
    letter-spacing: .08em; white-space: nowrap;
}
.hero-organizer-global { width: auto; height: 42px; object-fit: contain; }
.hero-inner { display: flex; flex-direction: column; gap: clamp(28px, 5vh, 52px); padding-bottom: clamp(64px, 11vh, 130px); }
.hero-info {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    margin-top: -6px;
    font-size: clamp(15px, 1.7vw, 18px); font-weight: 600; color: var(--ink-soft);
}
.hero-info .slash { color: var(--lime); font-family: var(--font-display); font-weight: 900; font-style: italic; }
.hero-title { font-size: clamp(56px, 12.5vw, 176px); }
.hero-title .row { display: block; }
.hero-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
.hero-sub p { max-width: 580px; color: var(--ink-soft); font-size: clamp(16.5px, 1.9vw, 20px); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }


.hero-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
}
.hero-stat {
    padding: 22px clamp(14px, 2vw, 30px);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 4px;
}
.hero-stat:last-child { border-right: 0; }
.hero-stat .num {
    font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 3.6vw, 44px);
    letter-spacing: -0.01em; line-height: 1;
}
.hero-stat .num .unit { font-size: 0.55em; color: var(--lime); margin-left: 2px; }
.hero-stat .label { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---------- marquee ---------- */
.marquee {
    overflow: hidden; white-space: nowrap; user-select: none;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 16px 0; background: var(--bg-raise);
}
.marquee-track { display: inline-flex; gap: 48px; animation: marquee 28s linear infinite; will-change: transform; }
.marquee-track span {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(18px, 2.6vw, 30px); letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 48px;
}
.marquee-track span::after { content: '✦'; color: var(--lime); font-size: 0.8em; }
.marquee-track .ghost { color: transparent; -webkit-text-stroke: 1.2px var(--ghost-stroke); }
.marquee.lime { background: var(--lime); border-color: var(--lime); }
.marquee.lime span { color: var(--on-lime); }
.marquee.lime span::after { color: var(--on-lime); }
.marquee.lime .ghost { color: transparent; -webkit-text-stroke: 1.2px rgba(16, 19, 10, 0.75); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- status strip ---------- */
.status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: 999px; font-weight: 800; font-size: 13px;
    border: 1px solid var(--line-strong);
}
.status-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.8s infinite; }
.status-pill.open { color: var(--lime); border-color: rgba(216, 255, 58, 0.45); }
.status-pill.almost-full { color: var(--coral); border-color: rgba(255, 107, 74, 0.5); }
.status-pill.closed { color: var(--muted); }
.status-pill.closed::before { animation: none; }
@keyframes pulse { 50% { opacity: 0.35; } }

.progress {
    height: 10px; border-radius: 999px; background: var(--track); overflow: hidden;
}
.progress > i {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--lime), var(--cyan));
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- run bands (2-category wide layout) ---------- */
.run-bands { display: flex; flex-direction: column; gap: 18px; }
.run-band {
    --acc: var(--lime);
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: clamp(92px, 13vw, 168px) 1fr auto;
    align-items: center; gap: clamp(20px, 3.4vw, 52px);
    border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 9%, var(--surface)) 0%, var(--surface) 60%);
    padding: clamp(30px, 3.4vw, 48px) clamp(28px, 3.4vw, 54px);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.run-band:hover { transform: translateY(-4px); border-color: var(--acc); }
.run-band.c-fun { --acc: var(--magenta); }
.run-band .rb-mark {
    justify-self: start;
    font-family: var(--font-display); font-weight: 900; font-style: italic;
    font-size: clamp(42px, 5.4vw, 78px); line-height: 0.82; letter-spacing: -0.03em;
    align-self: center;
    color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--acc) 55%, transparent);
    transition: -webkit-text-stroke-color 0.3s;
}
.run-band:hover .rb-mark { -webkit-text-stroke-color: var(--acc); }
.run-band .rb-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.run-band .rb-main .category-no { color: var(--acc); }
.run-band .rb-name {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(26px, 3.6vw, 46px); line-height: 0.95; letter-spacing: -0.01em;
}
.run-band .rb-desc { color: var(--muted); font-size: clamp(15px, 1.7vw, 17.5px); max-width: 52ch; }
.run-band .rb-title-row { display: flex; align-items: center; gap: 10px; }
.run-band .rb-award-info {
    position: relative; flex: 0 0 auto;
    width: 34px; height: 34px; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--magenta);
    cursor: help;
}
.run-band .rb-award-info::before {
    content: ''; position: absolute; inset: 3px; border-radius: inherit;
    background: color-mix(in srgb, var(--magenta) 12%, transparent);
    transition: transform .18s ease, background-color .18s ease;
}
.run-band .rb-award-info > svg { position: relative; width: 17px; height: 17px; }
.run-band .rb-award-info:hover::before,
.run-band .rb-award-info:focus-visible::before { transform: scale(1.08); background: color-mix(in srgb, var(--magenta) 19%, transparent); }
.run-band .rb-award-info:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.run-band .rb-award-tooltip {
    position: absolute; z-index: 8; left: calc(100% + 10px); top: 50%;
    min-width: max-content; padding: 10px 12px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    border: 1px solid color-mix(in srgb, var(--magenta) 32%, var(--line)); border-radius: 12px;
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(5px, -50%); transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.run-band .rb-award-tooltip b { font-size: 12px; white-space: nowrap; }
.run-band .rb-award-tooltip small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.run-band .rb-award-info:hover .rb-award-tooltip,
.run-band .rb-award-info:focus-visible .rb-award-tooltip,
.run-band .rb-award-info:focus-within .rb-award-tooltip { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.run-band .rb-side { justify-self: end; }
.run-band .rb-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: var(--radius-btn);
    background: var(--acc); color: var(--on-lime);
    font-family: var(--font-display); font-weight: 800; font-size: 14px;
    letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.run-band .rb-cta svg { width: 16px; height: 16px; }
.run-band .rb-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 34px color-mix(in srgb, var(--acc) 35%, transparent); }
@media (max-width: 880px) {
    .run-band { grid-template-columns: clamp(64px, 20vw, 96px) 1fr; gap: 12px 20px; padding: 26px 22px; }
    .run-band .rb-mark { grid-row: span 2; align-self: start; font-size: clamp(40px, 13vw, 68px); }
    .run-band .rb-side { justify-self: stretch; }
    .run-band .rb-cta { justify-content: center; width: 100%; }
}
@media (max-width: 680px) {
    .run-band { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .run-band .rb-mark { grid-row: auto; font-size: clamp(48px, 17vw, 64px); }
    .run-band .rb-main { width: 100%; }
    .run-band .rb-side { width: 100%; }
    .run-band .rb-award-tooltip { left: auto; right: 0; top: calc(100% + 8px); transform: translateY(5px); }
    .run-band .rb-award-info:hover .rb-award-tooltip,
    .run-band .rb-award-info:focus-visible .rb-award-tooltip,
    .run-band .rb-award-info:focus-within .rb-award-tooltip { transform: translateY(0); }
}

/* ---------- category cards ---------- */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.category-card {
    --acc: var(--lime);
    position: relative; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface);
    padding: clamp(24px, 3vw, 36px);
    display: flex; flex-direction: column; gap: 16px; min-height: 340px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.category-card:hover { transform: translateY(-6px); border-color: var(--acc); }
.category-card::after {
    content: ''; position: absolute; inset: auto -30% -45% -30%; height: 65%;
    background: radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%);
    pointer-events: none;
}
.category-card.c-duo { --acc: var(--cyan); }
.category-card.c-fun { --acc: var(--magenta); }
.category-no {
    font-family: var(--font-display); font-weight: 900; font-size: 15px;
    color: var(--acc); letter-spacing: 0.18em;
}
.category-name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 3vw, 38px); line-height: 0.95; }
.category-name small { display: block; font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: 15px; color: var(--ink-soft); margin-top: 8px; letter-spacing: 0; }
.category-desc { color: var(--muted); font-size: 15px; flex: 1; }
.category-tag {
    align-self: flex-start; margin-top: auto;
    padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
    background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc);
    border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent);
}

/* category card extras */
.category-watermark {
    position: absolute; right: -6px; bottom: -30px; z-index: 0;
    font-family: var(--font-display); font-weight: 900; font-style: italic;
    font-size: clamp(90px, 11vw, 150px); line-height: 1; letter-spacing: -0.04em;
    color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--acc) 22%, transparent);
    pointer-events: none; user-select: none;
    transition: -webkit-text-stroke-color 0.3s, transform 0.3s;
}
.category-card:hover .category-watermark {
    -webkit-text-stroke-color: color-mix(in srgb, var(--acc) 55%, transparent);
    transform: translateY(-6px);
}
.category-card > * { position: relative; z-index: 1; }
.category-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.category-stats {
    display: flex; gap: 26px; margin: 4px 0;
    border-top: 1px solid var(--line); padding-top: 16px;
}
.category-stats .cs { display: flex; flex-direction: column; gap: 3px; }
.category-stats .cs b { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.category-stats .cs span { font-family: var(--font-display); font-weight: 900; font-size: 17px; }
.category-stats .cs span em { font-style: normal; color: var(--acc); }
.category-cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
    font-weight: 800; font-size: 14px; color: var(--acc);
}
.category-cta svg { width: 16px; height: 16px; transition: transform 0.25s; }
.category-card:hover .category-cta svg { transform: translateX(4px); }

/* ---------- ops band (start-time one-liner) ---------- */
.ops-band {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(120deg, rgba(216, 255, 58, 0.07), var(--surface) 58%);
    padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3.4vw, 44px);
    display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
}
.ops-band .ob-time {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: -0.01em;
    white-space: nowrap;
}
.ops-band .ob-time em { font-style: normal; color: var(--lime); }
.ops-band .ob-time .ob-arrow { color: var(--muted); font-size: 0.6em; vertical-align: 6px; margin: 0 4px; }
.ops-band .ob-copy { flex: 1; min-width: 240px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.ops-band .ob-copy b { color: var(--ink); }

/* ---------- wave timeline ---------- */
.wave-timeline-wrap { overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.wave-timeline {
    position: relative; display: flex; min-width: 880px;
    padding: 30px 0 2px;
}
.wave-timeline::before {
    content: ''; position: absolute; left: 4%; right: 4%; top: 75px; height: 3px;
    background: linear-gradient(90deg, var(--lime), var(--cyan));
    border-radius: 2px;
}
.wave-node {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0;
    position: relative; text-align: center;
}
.wave-node .wn-time {
    font-family: var(--font-display); font-weight: 900;
    font-size: 21px; line-height: 28px; height: 28px; margin-bottom: 11px;
    transition: color 0.2s, transform 0.2s;
}
.wave-node .wn-dot {
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--bg); border: 3px solid var(--lime);
    margin-bottom: 12px; transition: 0.2s; z-index: 1;
}
.wave-node:nth-child(n+6) .wn-dot { border-color: var(--cyan); }
.wave-node .wn-label {
    font-family: var(--font-display); font-weight: 900; font-size: 11.5px;
    letter-spacing: 0.14em; color: var(--muted);
}
.wave-node .wn-size { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.wave-node:hover .wn-time { color: var(--lime); transform: translateY(-3px); }
.wave-node:nth-child(n+6):hover .wn-time { color: var(--cyan); }
.wave-node:hover .wn-dot { transform: scale(1.35); }
.wave-node.first .wn-dot { background: var(--lime); box-shadow: 0 0 16px rgba(216, 255, 58, 0.6); }
.wave-node.last .wn-dot { background: var(--cyan); box-shadow: 0 0 16px rgba(83, 233, 255, 0.6); }
.wave-node .wn-flag {
    position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
}
.wave-node.first .wn-flag { background: var(--lime); color: var(--on-lime); }
.wave-node.last .wn-flag { background: var(--cyan); color: var(--on-lime); }
/* ---------- stat band ---------- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-cell {
    --acc: var(--lime);
    border-top: 2px solid var(--line-strong);
    padding: 20px 4px 6px;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color 0.25s;
}
.stat-cell:hover { border-top-color: var(--acc); }
.stat-cell .st-num {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(40px, 5.5vw, 68px); line-height: 0.95; letter-spacing: -0.01em;
}
.stat-cell .st-num .unit { font-size: 0.45em; color: var(--acc); margin-left: 3px; }
.stat-cell .st-label { font-weight: 800; font-size: 15.5px; }
.stat-cell .st-desc { color: var(--muted); font-size: 13.5px; }
.stat-cell.acc-cyan { --acc: var(--cyan); }
.stat-cell.acc-coral { --acc: var(--coral); }
.stat-cell.acc-violet { --acc: var(--violet); }
@media (max-width: 900px) { .stat-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-band { grid-template-columns: 1fr; } }

.footnote {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 28px; max-width: 640px;
    color: var(--muted); font-size: 13.5px; line-height: 1.65;
}
.footnote svg, .footnote .lucide { width: 16px; height: 16px; flex: 0 0 auto; color: var(--lime); margin-top: 3px; }

/* ---------- course map extras ---------- */
.map-legend {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 14px 20px; border-top: 1px solid var(--line);
}
.map-legend .legend-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--muted); font-weight: 600;
}
.map-legend .legend-chip i.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.map-legend .legend-chip i.dash {
    width: 18px; height: 0; display: inline-block;
    border-top: 3px dotted var(--cyan);
}
.elevation-card {
    width: 100%; max-width: 100%; min-width: 0;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); padding: 16px 18px;
    display: flex; align-items: center; gap: 16px; margin-top: 20px;
}
.elevation-card svg { flex: 1; height: 34px; min-width: 0; }
.elevation-card .ec-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.elevation-card .ec-copy b { font-family: var(--font-display); font-weight: 900; font-size: 16px; }
.elevation-card .ec-copy span { font-size: 12px; color: var(--muted); }
@media (max-width: 520px) {
    .elevation-card { align-items: stretch; flex-direction: column; gap: 10px; padding: 15px 16px; }
    .elevation-card svg { flex: none; width: 100%; }
    .elevation-card .ec-copy { white-space: normal; }
}

/* ---------- wave list (info page schedule) ---------- */
.wave-list {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 clamp(32px, 5vw, 72px);
    border-bottom: 1px solid var(--line);
}
.wave-row {
    display: grid; grid-template-columns: 58px 1fr auto minmax(84px, auto);
    align-items: center; gap: 14px;
    padding: 15px 4px; border-top: 1px solid var(--line);
    transition: background 0.2s;
}
.wave-row:hover { background: var(--tint-row); }
.wave-row .wr-no {
    font-family: var(--font-display); font-weight: 900; font-size: 12.5px;
    letter-spacing: 0.12em; color: var(--muted);
}
.wave-row .wr-time { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1; }
.wave-row .wr-size { color: var(--muted); font-size: 13px; }
.wave-row .wr-flag { justify-self: end; }
.wave-row.first .wr-no, .wave-row.first .wr-time { color: var(--lime); }
.wave-row.last .wr-no, .wave-row.last .wr-time { color: var(--cyan); }

/* ---------- wave schedule ---------- */
.wave-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.wave-cell {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 2px;
    transition: border-color 0.2s, transform 0.2s;
}
.wave-cell:hover { border-color: var(--lime); transform: translateY(-3px); }
.wave-cell .w-no { font-family: var(--font-display); font-weight: 900; font-size: 13px; color: var(--lime); letter-spacing: 0.12em; }
.wave-cell .w-time { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2.2vw, 26px); }
.wave-cell .w-size { font-size: 12.5px; color: var(--muted); }

/* ---------- ticket / info rows ---------- */
.info-board { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.info-row {
    display: flex; flex-direction: column; gap: 6px;
    border-top: 2px solid var(--line-strong); padding: 18px 4px 6px;
}
.info-row dt { font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime); font-weight: 700; }
.info-row dd { margin: 0; font-size: clamp(17px, 2vw, 21px); font-weight: 700; }
.info-row dd small { display: block; font-weight: 500; color: var(--muted); font-size: 14px; margin-top: 3px; }

/* ---------- generic cards ---------- */
.card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); padding: clamp(22px, 3vw, 32px);
}
.card h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 14.5px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card .card-emoji { font-size: 30px; margin-bottom: 14px; display: block; }
.card .card-icon {
    width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(216, 255, 58, 0.12); color: var(--lime);
}
.card .card-icon svg { width: 22px; height: 22px; }

/* ---------- icon chips (emoji replacement) ---------- */
.icon-chip {
    --chip: var(--lime);
    width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--chip) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--chip) 32%, transparent);
    color: var(--chip);
}
.icon-chip svg { width: 22px; height: 22px; stroke-width: 1.8; }
.icon-chip.sm { width: 36px; height: 36px; border-radius: 10px; }
.icon-chip.sm svg { width: 17px; height: 17px; }
.icon-chip.lg { width: 58px; height: 58px; border-radius: 16px; }
.icon-chip.lg svg { width: 27px; height: 27px; }
.icon-chip.cyan { --chip: var(--cyan); }
.icon-chip.magenta { --chip: var(--magenta); }
.icon-chip.coral { --chip: var(--coral); }
.icon-chip.violet { --chip: var(--violet); }
.card > .icon-chip { margin-bottom: 16px; }
.shout .icon-chip { --chip: var(--on-lime); }

.icon-inline {
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: -3px; color: var(--lime);
}
.icon-inline svg { width: 15px; height: 15px; stroke-width: 2; }

/* ---------- divided grid (no boxes, editorial columns) ---------- */
.divided-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
}
.divided-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.divided-cell {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    padding: clamp(28px, 3.4vw, 44px) clamp(20px, 2.6vw, 34px);
    border-right: 1px solid var(--line);
    transition: background 0.25s;
}
.divided-cell:last-child { border-right: 0; }
.divided-cell:hover { background: var(--tint-row); }
.divided-cell .dc-stat {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(30px, 4.2vw, 50px); line-height: 1; letter-spacing: -0.01em;
}
.divided-cell .dc-stat em { font-style: normal; font-size: 0.5em; margin-left: 3px; }
.divided-cell h3 { font-size: 17px; font-weight: 800; }
.divided-cell p { color: var(--muted); font-size: 14px; }
.divided-cell .icon-chip { margin-bottom: 6px; }

/* ---------- step flow (numbered sequence) ---------- */
.step-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3.4vw, 48px); }
.step {
    --acc: var(--lime);
    border-top: 2px solid var(--line-strong); padding-top: 22px;
    position: relative; display: flex; flex-direction: column; gap: 10px;
    transition: border-color 0.3s;
}
.step:hover { border-top-color: var(--acc); }
.step .st-no {
    font-family: var(--font-display); font-weight: 900; font-style: italic;
    font-size: clamp(36px, 4.2vw, 54px); line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px var(--acc);
    transition: color 0.3s;
}
.step:hover .st-no { color: var(--acc); }
.step .st-title { font-weight: 800; font-size: 17.5px; }
.step .st-desc { color: var(--muted); font-size: 14px; }
.step:not(:last-child)::after {
    content: '→'; position: absolute; top: 30px;
    right: calc(clamp(12px, 1.7vw, 24px) * -1 - 8px);
    font-family: var(--font-display); font-weight: 900; font-size: 20px;
    color: var(--muted);
}
.step.acc-cyan { --acc: var(--cyan); }
.step.acc-violet { --acc: var(--violet); }
.step.acc-magenta { --acc: var(--magenta); }
.step.acc-coral { --acc: var(--coral); }

/* ---------- notice list (borderless checklist) ---------- */
.notice-list {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 clamp(32px, 5vw, 64px);
    border-bottom: 1px solid var(--line);
}
.notice-item {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 22px 4px; border-top: 1px solid var(--line);
}
.notice-item .icon-chip.sm { margin-top: 2px; }
.notice-item b { display: block; font-size: 16px; font-weight: 800; }
.notice-item p { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ---------- tool cards (app launcher) ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tool-card {
    --acc: var(--lime);
    position: relative; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: clamp(24px, 3vw, 32px); min-height: 235px;
    display: flex; flex-direction: column; gap: 12px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--acc) 9%, var(--surface)) 0%, var(--surface) 62%);
    transition: transform 0.25s, border-color 0.25s;
}
.tool-card:hover { transform: translateY(-6px); border-color: var(--acc); }
.tool-card.t-cyan { --acc: var(--cyan); }
.tool-card.t-magenta { --acc: var(--magenta); }
.tool-card.t-coral { --acc: var(--coral); }
.tool-card.t-violet { --acc: var(--violet); }
.tool-card .tc-top { display: flex; justify-content: space-between; align-items: center; }
.tool-card .tc-title {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(22px, 2.6vw, 30px); line-height: 1;
}
.tool-card .tc-title small {
    display: block; font-family: var(--font-body); font-weight: 700;
    font-size: 13.5px; color: var(--acc); text-transform: none;
    margin-top: 7px; letter-spacing: 0.02em;
}
.tool-card .tc-desc { color: var(--muted); font-size: 14px; flex: 1; max-width: 85%; }
.tool-card .tc-watermark {
    position: absolute; right: -22px; bottom: -22px; pointer-events: none;
    color: color-mix(in srgb, var(--acc) 13%, transparent);
    transition: color 0.3s, transform 0.3s;
}
.tool-card .tc-watermark svg { width: 132px; height: 132px; stroke-width: 1; }
.tool-card:hover .tc-watermark { color: color-mix(in srgb, var(--acc) 30%, transparent); transform: rotate(-8deg); }
.tool-card .ix-arrow { transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.tool-card:hover .ix-arrow { background: var(--acc); border-color: var(--acc); color: var(--on-lime); }
.tool-card:hover .ix-arrow svg { transform: rotate(-45deg); }

/* ---------- sticker wall (fun run themes) ---------- */
.sticker-wall {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: clamp(12px, 2vw, 20px) clamp(10px, 1.6vw, 16px);
}
.sticker {
    --acc: var(--lime);
    --tilt: 0deg;
    display: inline-flex; align-items: center; gap: 12px;
    padding: clamp(14px, 2vw, 20px) clamp(22px, 3vw, 34px);
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--acc) 50%, transparent);
    background: color-mix(in srgb, var(--acc) 8%, transparent);
    color: var(--ink);
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(17px, 2.4vw, 26px); line-height: 1;
    transform: rotate(var(--tilt));
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s, color 0.25s, box-shadow 0.25s;
    cursor: default; position: relative;
}
.sticker svg, .sticker .lucide { width: 22px; height: 22px; color: var(--acc); flex: 0 0 auto; transition: color 0.25s; stroke-width: 2; }
.sticker:hover {
    background: var(--acc); color: var(--on-lime);
    transform: rotate(0deg) translateY(-5px) scale(1.04);
    box-shadow: 0 14px 44px color-mix(in srgb, var(--acc) 35%, transparent);
    z-index: 1;
}
.sticker:hover svg, .sticker:hover .lucide { color: var(--on-lime); }
.sticker .sticker-desc {
    position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%) translateY(-4px);
    padding: 8px 14px; border-radius: 10px; white-space: nowrap;
    background: var(--surface-2); border: 1px solid var(--line-strong);
    color: var(--ink-soft); font-family: var(--font-body); font-weight: 600; font-size: 12.5px;
    opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 5;
}
.sticker:hover .sticker-desc { opacity: 1; transform: translateX(-50%) translateY(0); }
.sticker.has-theme-example { cursor: zoom-in; }
.sticker.has-theme-example:focus-visible { outline: 3px solid color-mix(in srgb, var(--acc) 48%, transparent); outline-offset: 4px; }
.theme-example-indicator { width: 25px; height: 25px; display: inline-grid; place-items: center; margin-left: 2px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 999px; opacity: .72; }
.sticker .theme-example-indicator svg, .sticker .theme-example-indicator .lucide { width: 13px; height: 13px; color: currentColor; }
.theme-preview-source { display: none !important; }
.theme-example-popover { position: fixed; z-index: 2300; width: min(380px, calc(100vw - 28px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); opacity: 0; pointer-events: none; box-shadow: 0 24px 70px rgba(0,0,0,.42); transform: translateY(6px) scale(.97); transform-origin: 50% 100%; transition: opacity .16s ease, transform .16s ease; }
.theme-example-popover[hidden] { display: none; }
.theme-example-popover.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.theme-example-popover[data-placement="below"] { transform-origin: 50% 0; }
.theme-example-popover-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-raise); }
.theme-example-popover-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.theme-example-popover-copy { padding: 16px 18px 18px; display: grid; gap: 5px; }
.theme-example-popover-copy strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.theme-example-popover-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* tilt + color rotation */
.sticker-wall > .sticker:nth-child(6n+1) { --acc: var(--lime); --tilt: -2deg; }
.sticker-wall > .sticker:nth-child(6n+2) { --acc: var(--cyan); --tilt: 1.6deg; }
.sticker-wall > .sticker:nth-child(6n+3) { --acc: var(--magenta); --tilt: -1.2deg; }
.sticker-wall > .sticker:nth-child(6n+4) { --acc: var(--violet); --tilt: 2deg; }
.sticker-wall > .sticker:nth-child(6n+5) { --acc: var(--coral); --tilt: -1.6deg; }
.sticker-wall > .sticker:nth-child(6n+6) { --acc: var(--lime); --tilt: 1.2deg; }
/* decorative ghost stickers */
.sticker.ghost-sticker {
    border-style: dashed; background: transparent;
    color: var(--muted); border-color: var(--line-strong);
    text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(14px, 1.8vw, 19px);
}
.sticker.ghost-sticker:hover {
    background: transparent; color: var(--acc); transform: rotate(0deg);
    border-color: var(--acc); box-shadow: none;
}
@media (max-width: 680px) {
    .sticker { padding: 13px 20px; gap: 9px; }
    .sticker svg, .sticker .lucide { width: 17px; height: 17px; }
    .sticker .sticker-desc { display: none; }
    .theme-example-popover { width: min(330px, calc(100vw - 20px)); border-radius: 4px; }
    .theme-example-popover-copy { padding: 13px 15px 15px; }
}

/* ---------- editorial index list ---------- */
.index-list { border-top: 1px solid var(--line-strong); }
.index-row {
    --acc: var(--lime);
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 90px 1fr auto 56px;
    align-items: center; gap: clamp(16px, 3vw, 40px);
    padding: clamp(20px, 3vw, 30px) 8px;
    border-bottom: 1px solid var(--line);
    transition: padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.index-row::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 10%, transparent), transparent 70%);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.index-row:hover { padding-left: 22px; }
.index-row:hover::before { transform: scaleX(1); }
.index-row .ix-no {
    font-family: var(--font-display); font-weight: 900; font-size: clamp(15px, 1.6vw, 18px);
    color: var(--acc); letter-spacing: 0.12em;
}
.index-row .ix-title {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(20px, 3.2vw, 36px); line-height: 1.05; letter-spacing: -0.01em;
    transition: color 0.25s;
}
.index-row:hover .ix-title { color: var(--acc); }
.index-row .ix-desc { color: var(--muted); font-size: clamp(14.5px, 1.6vw, 17px); margin-top: 7px; max-width: 600px; }
.index-row .ix-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.index-row .ix-tag {
    padding: 6px 14px; border-radius: 999px; white-space: nowrap;
    font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
    color: var(--acc);
    background: color-mix(in srgb, var(--acc) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
}
.index-row .ix-arrow {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
    transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.index-row .ix-arrow svg { width: 19px; height: 19px; transition: transform 0.3s; }
.index-row:hover .ix-arrow {
    background: var(--acc); border-color: var(--acc); color: var(--on-lime);
}
.index-row:hover .ix-arrow svg { transform: rotate(-45deg); }
.index-row.acc-cyan { --acc: var(--cyan); }
.index-row.acc-magenta { --acc: var(--magenta); }
.index-row.acc-coral { --acc: var(--coral); }
.index-row.acc-violet { --acc: var(--violet); }
@media (max-width: 760px) {
    .index-row { grid-template-columns: 44px 1fr 40px; }
    .index-row .ix-meta { display: none; }
    .index-row .ix-arrow { width: 38px; height: 38px; }
}

/* ---------- lime shout section ---------- */
.shout {
    background: var(--lime); color: var(--on-lime);
    padding: clamp(64px, 9vw, 120px) 0;
}
.shout .kicker { color: var(--on-lime); }
.shout .kicker::before { background: var(--on-lime); }
.shout .display { color: var(--on-lime); font-size: clamp(36px, 6vw, 78px); }
.shout .outline { color: transparent; -webkit-text-stroke: 1.6px var(--on-lime); }
.shout .section-lead { color: rgba(16, 19, 10, 0.72); }
.shout .card { background: rgba(16, 19, 10, 0.06); border-color: rgba(16, 19, 10, 0.18); }
.shout .card h3 { color: var(--on-lime); }
.shout .card p { color: rgba(16, 19, 10, 0.65); }

/* ---------- timeline ---------- */
.timeline { display: flex; flex-direction: column; }
.timeline-item {
    display: grid; grid-template-columns: 130px 1fr; gap: 24px;
    padding: 22px 0; border-bottom: 1px solid var(--line);
}
.timeline-item .t-time { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--lime); }
.timeline-item .t-title { font-weight: 800; font-size: 17px; }
.timeline-item .t-body { color: var(--muted); font-size: 15.5px; margin-top: 4px; }

/* ---------- course ---------- */
.course-map-frame {
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    background: var(--surface); position: relative;
}
.course-map-frame img { width: 100%; }
.course-points { display: flex; flex-direction: column; }
.course-point {
    display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line);
    align-items: flex-start;
}
.course-point .cp-km {
    flex: 0 0 76px;
    font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--lime);
}
.course-point .cp-name { font-weight: 800; font-size: 16.5px; }
.course-point .cp-desc { color: var(--muted); font-size: 14px; margin-top: 3px; }
/* 코스 팩트 — 코스 포인트 리스트와 같은 문법으로 이어지는 행 */
.course-facts { display: block; margin-top: 0; }
.course-facts .info-row {
    flex-direction: row; align-items: baseline; gap: 18px;
    padding: 18px 0; border-top: 0; border-bottom: 1px solid var(--line);
}
.course-facts .info-row dt {
    flex: 0 0 88px;
    color: var(--lime);
    font-size: 13.5px;
    font-weight: 900;
    letter-spacing: .08em;
}
.course-facts .info-row dd { font-size: 16.5px; font-weight: 800; }

/* route svg */
.route-svg { width: 100%; height: auto; display: block; }

/* kakao course map */
.kakao-course-map {
    width: 100%; aspect-ratio: 16 / 10;
    filter: saturate(0.82) contrast(1.02);
    background: var(--bg-raise);
}
.kmap-label {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 14px; border-radius: 10px; white-space: nowrap;
    background: #10130a; color: #f3f5ec;
    font-family: 'Archivo', 'Pretendard Variable', sans-serif; font-weight: 900;
    font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    border: 1.5px solid #d8ff3a;
}
.kmap-label small { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-weight: 600; font-size: 10.5px; color: #9aa38b; text-transform: none; letter-spacing: 0; }
.kmap-label.turn { border-color: #53e9ff; }
/* 부스 위치 핀 — 기존 번호 + 이름 가로형 문법 유지 */
.kmap-label.booth { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0; text-transform: none; }
.kmap-label.booth em { color: #d8ff3a; font-family: 'Archivo', sans-serif; font-size: 12px; font-style: normal; font-weight: 900; letter-spacing: .06em; }

/* 부스 위치 모달 */
.index-row[data-my-modal-open] { cursor: pointer; }
.index-row .ix-tag.is-map { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.index-row .ix-tag.is-map svg { width: 12px; height: 12px; color: var(--lime); }
.booth-map-modal { width: min(640px, calc(100vw - 32px)); }
.booth-map-body { padding: 0 !important; }
.booth-map-body .kakao-course-map { width: 100%; aspect-ratio: 16 / 11; min-height: 320px; }
.booth-map-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 14px 20px 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.booth-map-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--lime); }
.kmap-label.booth.has-stamp em { color: #ff9dcb; }
/* 스캐너 직행 코스튬 등록 — 촬영 인풋 하이라이트 */
.costume-file.is-autophoto { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 10px; animation: costume-autophoto-pulse 1.4s ease infinite; }
@keyframes costume-autophoto-pulse { 50% { outline-color: color-mix(in srgb, var(--lime) 35%, transparent); } }

/* 관리자 — 대시보드 큼직 카드 */
.dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-kpi { --acc: var(--lime); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dash-kpi.k-cyan { --acc: var(--cyan); }
.dash-kpi.k-magenta { --acc: var(--magenta); }
.dash-kpi.k-coral { --acc: var(--coral); }
.dash-kpi .k-label { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.dash-kpi-num { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.dash-kpi-num b { color: var(--acc); font-family: var(--font-display); font-size: clamp(38px, 3.4vw, 54px); font-weight: 900; font-stretch: 110%; line-height: 1; letter-spacing: -.02em; }
.dash-kpi-num small { color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.dash-kpi-bar { width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: var(--track); }
.dash-kpi-bar i { display: block; height: 100%; border-radius: inherit; background: var(--acc); transition: width .4s ease; }
.dash-kpi-bar.is-static { opacity: .25; }
.dash-kpi-foot { color: var(--muted); font-size: 11.5px; font-weight: 700; }

.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 20px 0; align-items: stretch; }
.dash-grid > .panel { margin: 0; display: flex; flex-direction: column; }
.dash-category-list { display: flex; flex-direction: column; gap: 15px; padding: 18px 22px 22px; }
.dash-category-row span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dash-category-row b { font-size: 14px; font-weight: 800; }
.dash-category-row small { color: var(--muted); font-size: 12px; font-weight: 700; }
.dash-category-row i { display: block; height: 8px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: var(--track); }
.dash-category-row i b { display: block; height: 100%; border-radius: inherit; background: var(--lime); }
.dash-category-row:nth-child(2) i b { background: var(--cyan); }
.dash-category-row:nth-child(3) i b { background: var(--violet); }
.dash-category-row:nth-child(4) i b { background: var(--magenta); }
.dash-country-panel .country-quota-grid { flex: 1; }
.dash-activity-panel { margin: 0 0 20px; }
.dash-activity-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 16px 22px 20px; list-style: none; }
.dash-activity-list li { --acc: var(--lime); display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--tint-row); }
.dash-activity-list li.tone-cyan { --acc: var(--cyan); }
.dash-activity-list li.tone-magenta { --acc: var(--magenta); }
.dash-activity-icon { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--acc) 13%, transparent); color: var(--acc); }
.dash-activity-icon svg { width: 16px; height: 16px; }
.dash-activity-copy { display: grid; gap: 1px; min-width: 0; flex: 1; }
.dash-activity-copy b { overflow: hidden; font-size: 13.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.dash-activity-copy small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.dash-activity-list time { flex: 0 0 auto; color: var(--muted); font-family: var(--font-display); font-size: 12px; font-weight: 800; }
.dash-activity-empty { color: var(--muted); font-size: 13px; }
@media (max-width: 1080px) {
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-activity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .dash-activity-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .dash-kpis { grid-template-columns: 1fr; }
}

/* 관리자 — 부스 관리 */
.booth-manage-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.booth-add-filter { flex-wrap: wrap; align-items: center; }
.booth-add-filter .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.booth-add-filter .btn svg { width: 14px; height: 14px; }
.booth-add-check { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.booth-split {
    /* 목록·지도 공통 높이 — 두 패널이 항상 같은 키로 정렬 */
    --booth-h: min(760px, calc(100dvh - 120px));
    display: grid; grid-template-columns: minmax(430px, .82fr) minmax(460px, 1.18fr);
    align-items: stretch; gap: 18px;
}
.booth-split > .panel { display: flex; flex-direction: column; height: var(--booth-h); margin: 0; min-width: 0; }
.booth-split > .panel + .panel { margin: 0; } /* 베이스 .panel+.panel 20px 마진 무력화 — 좌우 밑단 정렬 */
.booth-list-panel .panel-head { flex: 0 0 auto; padding: 15px 17px; }
.booth-list-panel .panel-head p { margin-top: 3px; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
/* 가로 스크롤 금지 — 남는 건 세로뿐 (베이스 .data-table min-width:880px 무력화) */
.booth-list-panel .booth-table-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.data-table.booth-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 12.5px; }
.data-table.booth-table th { padding: 9px 8px; font-size: 10px; letter-spacing: .08em; }
.data-table.booth-table td { padding: 7px 8px; vertical-align: middle; }
.data-table.booth-table th:nth-child(1) { width: 72px; }
.data-table.booth-table th:nth-child(3) { width: 214px; }
.booth-table .booth-td-name { min-width: 0; }
.booth-table .booth-td-name .t-strong,
.booth-table .booth-td-name .t-sub {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.booth-table .booth-td-name .t-strong { font-size: 12.5px; }
.booth-table .booth-td-name .t-sub { max-width: 100%; font-size: 10.5px; }
.booth-table .pill { padding: 3px 6px; font-size: 8.5px; letter-spacing: 0; }
.booth-table .mini-btn { min-height: 28px; padding: 5px 7px; font-size: 10px; }
.booth-td-order { white-space: nowrap; }
.booth-td-order .t-strong { font-family: var(--font-display); font-size: 12px; vertical-align: middle; }
/* 드래그 핸들 — 잡아서 상하 이동 */
.booth-drag { display: inline-grid; place-items: center; width: 24px; height: 32px; margin-right: 3px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: grab; vertical-align: middle; }
.booth-drag:active { cursor: grabbing; color: var(--ink); }
.booth-drag svg { width: 15px; height: 15px; }
.booth-table tr.is-dragging td { opacity: .45; }
/* 관리 버튼 3개 — 가로 한 줄, 행 두께 최소화 */
.booth-td-actions .inline-actions { display: flex; flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
.booth-td-actions .mini-btn { width: auto; white-space: nowrap; text-align: center; }
.booth-td-coord { margin-top: 2px; overflow: hidden; }
.booth-td-coord span { color: var(--muted); font-family: var(--font-display); font-size: 9px; letter-spacing: 0; white-space: nowrap; }
.booth-table tr.is-selected td { background: color-mix(in srgb, var(--lime) 8%, transparent); }
.booth-table tr.is-selected .booth-td-name .t-strong { color: var(--lime); }
.booth-map-panel { position: sticky; top: 18px; }
.booth-map-panel .panel-head { flex: 0 0 auto; padding: 15px 18px; }
.booth-map-panel .panel-head p[data-booth-hint] { margin-top: 3px; color: var(--ink-soft); font-size: 11px; font-weight: 700; line-height: 1.45; }
/* 지도가 패널의 남은 높이를 꽉 채움 → 목록과 밑단 정렬 */
.booth-manage-map {
    flex: 1 1 auto; width: 100%; height: auto; min-height: 0; aspect-ratio: auto; margin-top: 0;
    border: 0; border-radius: 0 0 var(--radius) var(--radius);
}
.booth-visitor-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.booth-visitor-panel { overflow: hidden; }
.booth-visitor-table { min-width: 900px; }
.booth-visitor-table th:first-child { width: 120px; }
.booth-visitor-table th:nth-child(3) { width: 120px; }
.booth-visitor-table th:nth-child(4) { width: 90px; }
.booth-visitor-table th:nth-child(5) { width: 90px; }
.booth-visitor-table th:last-child { width: 150px; }
.booth-visitor-empty { min-height: 300px; padding: 40px 24px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; }
.booth-visitor-empty > svg { width: 32px; height: 32px; color: var(--magenta); }
.booth-visitor-empty h2 { margin: 0; color: var(--ink); font-size: 20px; }
.booth-visitor-empty p { max-width: 460px; margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 1180px) {
    .booth-split { grid-template-columns: 1fr; }
    .booth-split > .panel { height: auto; }
    .booth-map-panel { position: static; order: -1; }
    .booth-manage-map { height: clamp(380px, 58vw, 580px); flex: 0 0 auto; }
    .booth-list-panel .booth-table-scroll { max-height: 60dvh; }
}
@media (max-width: 600px) {
    .course-facts .info-row dt { flex-basis: 82px; font-size: 12.5px; }
    .course-facts .info-row dd { font-size: 15.5px; }
    .booth-manage-kpis { grid-template-columns: 1fr; }
    .booth-visitor-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .booth-map-panel .panel-head { align-items: flex-start; }
    .booth-manage-map { height: 410px; }
}
.kmap-label::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #10130a;
}

/* ---------- booth grid ---------- */
.booth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.booth-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); padding: 24px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color 0.2s, transform 0.2s;
}
.booth-card:hover { border-color: var(--cyan); transform: translateY(-4px); }
.booth-card .b-no { font-family: var(--font-display); font-weight: 900; font-size: 13px; color: var(--cyan); letter-spacing: 0.15em; }
.booth-card .b-name { font-weight: 800; font-size: 17.5px; }
.booth-card .b-desc { color: var(--muted); font-size: 14px; flex: 1; }
.booth-card .b-meta { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 24px 4px; font-weight: 800; font-size: clamp(16px, 2vw, 19px);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; font-family: var(--font-display); font-weight: 900; font-size: 26px;
    color: var(--lime); transition: transform 0.25s; flex: 0 0 auto;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 4px 26px; color: var(--muted); max-width: 760px; }

/* ---------- forms ---------- */
.form-control {
    display: block; width: 100%; max-width: 100%; min-width: 0; padding: 14px 16px;
    background: var(--bg-raise); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    color: var(--ink); font: inherit; font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(216, 255, 58, 0.15); }
.form-control::placeholder { color: var(--muted); }
select.form-control option { background: var(--surface); color: var(--ink); }
textarea.form-control { resize: vertical; min-height: 90px; }
[data-address-field][readonly] { cursor: pointer; }
input[type='date'].form-control,
.field input[type='date'] {
    width: 100%; max-width: 100%; min-width: 0; -webkit-min-logical-width: 0;
}

/* application entry mode */
.apply-mode-switch {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    margin-bottom: 14px;
}
.apply-mode-switch a {
    display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 18px 20px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
    color: var(--ink-soft); transition: border-color .2s, background .2s, transform .2s;
}
.apply-mode-switch a:hover { transform: translateY(-2px); border-color: var(--lime); }
.apply-mode-switch a.active { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 8%, var(--surface)); color: var(--ink); }
.apply-mode-switch a.is-closed { opacity: 0.55; }
.apply-mode-switch a.is-closed:hover { transform: none; border-color: var(--line); }
.apply-mode-switch svg { width: 25px; height: 25px; flex: 0 0 auto; color: var(--lime); }
.apply-mode-switch span { display: flex; flex-direction: column; gap: 4px; }
.apply-mode-switch b { font-family: var(--font-display); font-size: 17px; }
.apply-mode-switch small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.apply-entry-head { display: flex; flex-direction: column; gap: 18px; }
.apply-entry-options { padding-top: clamp(34px, 5vw, 70px); }
.apply-entry-page .apply-mode-switch { gap: clamp(14px, 2vw, 24px); margin: 0; }
.apply-entry-page .apply-mode-switch a { position: relative; min-height: clamp(150px, 18vw, 210px); padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); overflow: hidden; }
.apply-entry-page .apply-mode-switch a::after { content: '→'; position: absolute; right: clamp(24px, 3vw, 38px); top: 50%; transform: translateY(-50%); color: var(--lime); font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); }
.apply-entry-page .apply-mode-switch svg { width: clamp(34px, 4vw, 50px); height: clamp(34px, 4vw, 50px); }
.apply-entry-page .apply-mode-switch span { gap: 8px; padding-right: 54px; }
.apply-entry-page .apply-mode-switch b { font-size: clamp(24px, 3vw, 38px); }
.apply-entry-page .apply-mode-switch small { font-size: clamp(13px, 1.4vw, 17px); }
.apply-entry-help { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: var(--muted); font-size: 13px; text-align: center; }
.apply-entry-help svg { width: 17px; height: 17px; color: var(--lime); flex: 0 0 auto; }
.apply-notice {
    display: grid; grid-template-columns: minmax(230px, .68fr) minmax(0, 1.32fr);
    gap: clamp(34px, 6vw, 88px); margin-bottom: 42px; padding: 32px 0 34px;
    border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.apply-notice-head { display: flex; flex-direction: column; align-items: flex-start; }
.apply-notice-head > span {
    margin-bottom: 10px; color: var(--lime); font-family: var(--font-display);
    font-size: 10px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase;
}
.apply-notice-head h2 { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -.025em; }
.apply-notice-head p { max-width: 300px; margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.apply-notice ol {
    counter-reset: notice; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(28px, 4vw, 56px); padding: 0; list-style: none;
}
.apply-notice li {
    counter-increment: notice; position: relative; display: grid; gap: 5px;
    min-width: 0; padding: 16px 0 17px 42px; border-top: 1px solid var(--line);
}
.apply-notice li:nth-child(-n+2) { padding-top: 0; border-top: 0; }
.apply-notice li::before {
    content: "0" counter(notice); position: absolute; left: 0; top: 17px;
    color: var(--lime); font-family: var(--font-display); font-size: 11px; font-weight: 850; letter-spacing: .08em;
}
.apply-notice li:nth-child(-n+2)::before { top: 1px; }
.apply-notice li b { font-size: 13.5px; }
.apply-notice li span { color: var(--muted); font-size: 12.5px; line-height: 1.6; }

/* group application */
.single-apply-form > form { width: min(1120px, 100%); margin: 0 auto; }
.group-apply-form { width: min(1120px, 100%); margin: 0 auto; }
.group-member-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 18px; }
.group-member-heading .form-section-title { margin-bottom: 6px; }
.group-member-heading p { color: var(--muted); font-size: 13px; }
.group-member-list { display: grid; gap: 9px; }
.group-member-card { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; align-items: end; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.group-member-card-head { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 3px 0; }
.group-member-card-head b { font-family: var(--font-display); font-size: 13px; white-space: nowrap; }
.group-member-card-head .mini-btn { padding: 6px 9px; font-size: 10.5px; }
.group-member-card .member-fields { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.member-fields .member-name { grid-column: span 3; }
.member-fields .member-birth { grid-column: span 3; }
.member-fields .member-gender { grid-column: span 2; }
.member-fields .member-resident-type { grid-column: span 2; }
.member-fields .member-nationality { grid-column: span 2; }
.member-fields .member-visa { grid-column: span 3; }
.member-contact-head {
    grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px;
    margin-top: 2px; padding: 9px 11px; border-radius: 8px;
    background: color-mix(in srgb, var(--lime) 7%, transparent);
}
.member-contact-head b { font-size: 11.5px; }
.member-contact-head small { color: var(--muted); font-size: 10.5px; }
.member-contact-head .req { color: var(--coral); }
.group-member-card.contact-invalid { border-color: var(--coral); }
.group-member-card.contact-invalid .member-contact-head { background: color-mix(in srgb, var(--coral) 8%, transparent); }
.group-member-card.contact-invalid .member-contact-head small { color: var(--coral); }
.form-control.client-invalid,
select.client-invalid,
textarea.client-invalid {
    border-color: var(--coral) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 14%, transparent) !important;
}
.client-invalid-block.choice-grid,
.client-invalid-block.sticker-wall,
.client-invalid-block.verify-method-switch,
.client-invalid-block.consent-row {
    border-radius: 18px;
    outline: 2px solid color-mix(in srgb, var(--coral) 72%, transparent);
    outline-offset: 5px;
}
.contact-verification.client-invalid-block,
.group-member-card.client-invalid-block {
    border-color: var(--coral) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 10%, transparent);
}
.member-fields .member-phone { grid-column: span 3; }
.member-fields .member-email { grid-column: span 3; }
.member-fields .member-medical { grid-column: span 3; }
.member-fields > .errorlist { grid-column: 1 / -1; }
.group-member-card .field { gap: 4px; }
.form-grid [hidden],
[data-residency-fields] [hidden] { display: none !important; }
.group-member-card .field > label { font-size: 11.5px; }
.group-member-card .form-control { min-height: 42px; padding: 9px 10px; border-radius: 8px; font-size: 13px; }
.compact-consent-section { max-width: none; }
.consent-stack { display: grid; gap: 10px; }
.group-submit { padding: 19px; font-size: 16px; }
.group-pass-page { padding-top: calc(var(--header-h) + 56px); }
.group-pass-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 34px; }
.group-code { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; }
.group-code span { color: var(--muted); font-size: 12px; }
.group-code b { font-family: var(--font-display); letter-spacing: .08em; }
.group-pass-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.group-pass-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.group-pass-card h2 { margin-top: 5px; font-family: var(--font-display); font-size: 22px; }
.group-pass-card p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.group-pass-card img { width: min(180px, 70%); aspect-ratio: 1; align-self: center; padding: 10px; border-radius: 12px; background: white; }
.group-pass-help { margin-top: 24px; color: var(--muted); font-size: 13px; text-align: center; }
.lookup-hero-head { display: flex; flex-direction: column; gap: 18px; }
.lookup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lookup-grid.single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.lookup-entry-choice { max-width: 1180px; margin: 0 auto; }
.lookup-entry-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: var(--muted); font-size: 12px; text-align: center; }
.lookup-entry-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--lime); }
.lookup-mode-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(760px, 100%); margin: 0 auto 14px; }
.lookup-mode-head > span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.lookup-panel { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.lookup-panel-head { display: flex; align-items: center; gap: 14px; }
.lookup-panel-head h2 { margin-top: 3px; font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 28px); }
.lookup-panel > p, .lookup-panel li { color: var(--muted); font-size: 13px; line-height: 1.65; }
.lookup-panel ul { display: grid; gap: 6px; padding-left: 20px; }
.lookup-panel.individual .btn { margin-top: auto; }
.lookup-form { display: grid; gap: 13px; }
.my-login-shell {
    width: 100%; max-width: 1120px;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
    align-items: stretch; gap: clamp(18px, 3vw, 34px);
}
.my-login-panel { gap: 22px; padding: clamp(24px, 4vw, 42px); }
.my-login-panel-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.my-login-step {
    margin-left: auto; padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 999px;
    color: var(--muted); font-family: var(--font-display); font-size: 10px; font-weight: 900; letter-spacing: .1em;
}
.my-login-note {
    display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; padding-top: 18px;
    border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.6;
}
.my-login-note svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: var(--lime); }
.my-login-apply { color: var(--muted); font-size: 12.5px; }
.my-login-apply a { color: var(--lime); font-weight: 800; }
.my-login-guide {
    display: flex; flex-direction: column; gap: 28px; padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    background:
        radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--lime) 13%, transparent), transparent 70%),
        var(--bg-raise);
}
.my-login-guide h2 { margin-top: 8px; font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); line-height: .98; }
.my-login-guide h2 span { color: var(--lime); }
.my-login-guide > div > p { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.my-login-guide-list { display: grid; border-top: 1px solid var(--line); }
.my-login-guide-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.my-login-guide-list li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.my-login-guide-list b { font-size: 14px; }
.my-login-guide-list small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.my-login-guide-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: color-mix(in srgb, var(--lime) 10%, var(--surface)); color: var(--lime); }
.my-login-guide-icon svg { width: 20px; height: 20px; }
.my-login-guide-foot { display: flex; align-items: flex-start; gap: 9px; margin-top: auto; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.my-login-guide-foot svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--lime); }
@media (max-width: 900px) {
    .my-login-shell { grid-template-columns: 1fr; max-width: 760px; }
}
.lookup-result-flag { display: flex; align-items: center; gap: 11px; padding: 14px 15px; border: 1px solid var(--lime); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--lime) 8%, var(--surface)); }
.lookup-result-flag > svg { width: 22px; height: 22px; color: var(--lime); flex: 0 0 auto; }
.lookup-result-flag span { display: flex; flex-direction: column; gap: 2px; }
.lookup-result-flag b { font-size: 14px; }
.lookup-result-flag small { color: var(--muted); font-size: 11.5px; }
.lookup-detail-list { display: grid; border-top: 1px solid var(--line); }
.lookup-detail-list > div { display: grid; grid-template-columns: minmax(92px, .65fr) minmax(0, 1.35fr); gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.lookup-detail-list dt { color: var(--muted); font-size: 12px; }
.lookup-detail-list dd { overflow-wrap: anywhere; font-size: 12.5px; font-weight: 750; text-align: right; }
.lookup-empty-result { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--coral) 55%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--coral) 6%, var(--surface)); }
.lookup-empty-result b { color: var(--coral); font-size: 13px; }
.lookup-empty-result span { color: var(--muted); font-size: 11.5px; }
.lookup-result-help { color: var(--muted); font-size: 11.5px; text-align: center; }
.lookup-result-help a { color: var(--lime); font-weight: 800; }
.lookup-member-list { display: grid; gap: 7px; }
.lookup-member-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-raise); }
.lookup-member-list span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lookup-member-list b { font-size: 12.5px; }
.lookup-member-list small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.lookup-member-list strong { display: flex; align-items: center; gap: 7px; color: var(--lime); font-family: var(--font-display); font-size: 13px; white-space: nowrap; }
.lookup-member-list svg { width: 16px; height: 16px; }
.lookup-result-shell { width: min(1040px, 100%); }
.lookup-result-card { display: grid; gap: clamp(22px, 3vw, 34px); padding: clamp(24px, 5vw, 60px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 28px 70px rgba(0,0,0,.08); }
.lookup-result-card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.lookup-result-card-head h2 { margin-top: 8px; font-family: var(--font-display); font-size: clamp(34px, 6vw, 72px); line-height: .95; }
.lookup-result-card-head p { margin-top: 10px; color: var(--muted); font-size: 14px; }
.lookup-result-bib { color: var(--lime); font-family: var(--font-display); font-size: clamp(40px, 7vw, 86px); line-height: .85; letter-spacing: .02em; }
.lookup-result-bib small { margin-left: 4px; font-size: .25em; }
.lookup-result-bib-pending { display: block; max-width: 120px; font-size: clamp(18px, 2.5vw, 26px); line-height: 1.05; text-align: right; }
.lookup-result-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.lookup-result-details > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 18px 6px; border-bottom: 1px solid var(--line); }
.lookup-result-details > div:nth-child(odd) { padding-right: 28px; }
.lookup-result-details > div:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
.lookup-result-details dt { color: var(--muted); font-size: 13px; }
.lookup-result-details dd { overflow-wrap: anywhere; font-size: 14px; font-weight: 800; text-align: right; }
.lookup-result-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.lookup-result-actions .btn { min-height: 58px; }
.lookup-result-members { display: grid; gap: 8px; }
.lookup-result-members h3 { margin-bottom: 6px; font-family: var(--font-display); font-size: 20px; }
.lookup-result-members a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise); transition: border-color .2s, transform .2s; }
.lookup-result-members a:hover { border-color: var(--lime); transform: translateX(3px); }
.lookup-member-no { color: var(--muted); font-family: var(--font-display); font-size: 11px; }
.lookup-result-members a > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lookup-result-members b { font-size: 14px; }
.lookup-result-members small { color: var(--muted); font-size: 11px; }
.lookup-result-members strong { display: flex; align-items: center; gap: 8px; color: var(--lime); font-family: var(--font-display); font-size: 16px; }
.lookup-result-members svg { width: 18px; height: 18px; }
.lookup-back-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; color: var(--muted); font-size: 13px; font-weight: 750; }
.lookup-back-link svg { width: 16px; height: 16px; }
@media (max-width: 1000px) {
    .group-member-card { display: block; }
    .group-member-card-head { flex-direction: row; align-items: center; margin-bottom: 10px; }
    .group-member-card .member-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .group-member-card .member-fields > .field { grid-column: auto; }
    .group-pass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lookup-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .apply-mode-switch { grid-template-columns: 1fr; }
    .apply-mode-switch a { min-height: 78px; }
    .group-member-heading { align-items: stretch; flex-direction: column; }
    .group-member-heading .btn { width: 100%; }
    .group-member-card .member-fields, .group-pass-grid { grid-template-columns: 1fr; }
    .group-member-card .member-fields > .field { grid-column: 1; }
    .member-contact-head { align-items: flex-start; flex-direction: column; gap: 2px; }
    .apply-notice { grid-template-columns: 1fr; gap: 26px; padding: 28px 0; }
    .apply-notice-head p { max-width: none; }
    .apply-notice ol { grid-template-columns: 1fr; }
    .apply-notice li:nth-child(2) { padding-top: 16px; border-top: 1px solid var(--line); }
    .apply-notice li:nth-child(2)::before { top: 17px; }
    .lookup-result-card-head { align-items: flex-start; flex-direction: column-reverse; }
    .lookup-result-details { grid-template-columns: 1fr; }
    .lookup-result-details > div:nth-child(odd), .lookup-result-details > div:nth-child(even) { padding: 14px 2px; border-left: 0; }
    .lookup-result-members a { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 13px 11px; }
    .my-login-panel { padding: 22px 18px; }
    .my-login-panel-head { align-items: flex-start; }
    .my-login-step { margin-top: 2px; }
    .my-login-guide { gap: 22px; padding: 24px 20px; }
    .my-login-guide h2 { font-size: 30px; }
}

.field { min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 8px; }
.field input:not([type='checkbox']):not([type='radio']):not(.form-control),
.field select:not(.form-control),
.field textarea:not(.form-control) {
    display: block; width: 100%; max-width: 100%; min-width: 0; padding: 14px 16px;
    background: var(--bg-raise); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    color: var(--ink); font: inherit; font-size: 15px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(216, 255, 58, 0.15); }
.errorlist { color: var(--coral); font-size: 13px; font-weight: 600; list-style: none; margin: 0; padding: 0; }
.field > span, .field > label { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.field .req { color: var(--coral); }
.field-error { color: var(--coral); font-size: 13px; font-weight: 600; }
.field-hint { color: var(--muted); font-size: 12.5px; }

.form-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.form-grid > *, .choice-grid > *, .course-preview-grid > * { min-width: 0; }
.form-grid .span-2 { grid-column: span 2; }

.form-section { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.form-section-title {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    font-size: 15px; letter-spacing: 0.14em; color: var(--lime);
    display: flex; align-items: center; gap: 14px;
}
.form-section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- apply page layout ---------- */
.apply-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 330px;
    gap: clamp(32px, 4.5vw, 72px); align-items: start;
}
.apply-side {
    position: sticky; top: calc(var(--header-h) + 24px);
    display: flex; flex-direction: column; gap: 16px;
}
.apply-side .as-rows { display: flex; flex-direction: column; }
.apply-side .as-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.apply-side .as-row:last-child { border-bottom: 0; }
.apply-side .as-row b { color: var(--muted); font-weight: 600; white-space: nowrap; }
.apply-side .as-row span { font-weight: 700; text-align: right; }
@media (max-width: 1080px) {
    .apply-layout { grid-template-columns: 1fr; }
    .apply-side { position: static; order: 2; }
}

/* radio sticker (theme picker) */
.sticker-radio { position: relative; }
.sticker-radio input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.sticker-radio { cursor: pointer; }
.sticker-radio.checked, .sticker-radio:has(input:checked) {
    background: var(--acc); color: var(--on-lime);
    transform: rotate(0deg) scale(1.03);
    box-shadow: 0 10px 36px color-mix(in srgb, var(--acc) 35%, transparent);
}
.sticker-radio.checked svg, .sticker-radio:has(input:checked) svg { color: var(--on-lime); }
.sticker-radio input:focus-visible ~ * { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* choice cards (category / theme radios) */
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.choice-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.choice-card { position: relative; }
.choice-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice-card .choice-body {
    display: flex; flex-direction: column; gap: 6px; height: 100%;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--bg-raise); padding: 18px;
    transition: border-color 0.2s, background 0.2s; cursor: pointer;
}
.choice-card input:checked + .choice-body {
    border-color: var(--lime); background: rgba(216, 255, 58, 0.07);
    box-shadow: 0 0 0 1px var(--lime);
}
.choice-card input:focus-visible + .choice-body { outline: 2px solid var(--cyan); outline-offset: 2px; }
.choice-card .choice-title { font-weight: 800; font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.choice-card .choice-desc { color: var(--muted); font-size: 13px; }
.choice-card .choice-emoji { font-size: 20px; }
.choice-card .choice-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.choice-card .choice-check {
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
    border: 2px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    color: transparent; transition: 0.2s;
}
.choice-card .choice-check svg { width: 13px; height: 13px; stroke-width: 3; }
.choice-card input:checked + .choice-body .choice-check {
    background: var(--lime); border-color: var(--lime); color: var(--on-lime);
}

/* 종목 선택 카드 — 메인 카테고리 카드 디자인 언어 */
.cat-choice { --acc: var(--lime); }
.cat-choice.c-duo { --acc: var(--cyan); }
.cat-choice.c-fun { --acc: var(--magenta); }
.cat-choice .choice-body {
    position: relative; overflow: hidden;
    min-height: 190px; padding: 22px; gap: 8px;
    background: var(--surface);
}
.cat-choice .choice-body > *:not(.category-watermark) { position: relative; z-index: 1; }
.cat-choice .category-watermark {
    right: -8px; bottom: -22px;
    font-size: clamp(64px, 7vw, 92px);
    -webkit-text-stroke-color: color-mix(in srgb, var(--acc) 20%, transparent);
}
.cat-choice .category-no { color: var(--acc); font-size: 13px; }
.cat-choice .choice-title {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(19px, 2vw, 24px); line-height: 1; margin-top: 4px;
}
.cat-choice .choice-desc { margin-top: 2px; }
.cat-choice:hover .choice-body { border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.cat-choice:hover .category-watermark { -webkit-text-stroke-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.cat-choice input:checked + .choice-body {
    border-color: var(--acc);
    background: color-mix(in srgb, var(--acc) 7%, var(--surface));
    box-shadow: 0 0 0 1px var(--acc), 0 12px 40px color-mix(in srgb, var(--acc) 18%, transparent);
}
.cat-choice input:checked + .choice-body .category-watermark {
    -webkit-text-stroke-color: color-mix(in srgb, var(--acc) 55%, transparent);
}
.cat-choice input:checked + .choice-body .choice-check {
    background: var(--acc); border-color: var(--acc); color: var(--on-lime);
}
@media (max-width: 680px) {
    .cat-choice .choice-body { min-height: 160px; padding: 20px; }
    .cat-choice .category-watermark {
        right: 10px; bottom: -10px; font-size: 60px;
        -webkit-text-stroke-color: color-mix(in srgb, var(--acc) 14%, transparent);
    }
}

.consent-row {
    display: flex; gap: 12px; align-items: flex-start;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 16px 18px; background: var(--bg-raise);
}
.consent-row input[type='checkbox'] {
    width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lime); cursor: pointer; flex: 0 0 auto;
}
.consent-row label { font-size: 14px; font-weight: 600; cursor: pointer; }
.consent-row small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }

/* conditional blocks */
[data-show-when] { display: none; }
[data-show-when].visible { display: block; animation: msg-in 0.3s; }
[data-show-when-type] { display: none !important; }
[data-show-when-type].visible { display: flex !important; animation: msg-in 0.3s; }

/* contact verification states */
.contact-verification { gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.verify-method-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.verify-method-switch label { position: relative; cursor: pointer; }
.verify-method-switch input { position: absolute; opacity: 0; pointer-events: none; }
.verify-method-switch label > span { min-height: 72px; display: flex; flex-direction: column; justify-content: center; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; }
.verify-method-switch b { font-size: 14px; }
.verify-method-switch small { margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.verify-method-switch input:checked + span { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 8%, transparent); }
.verify-method-switch input:disabled + span { cursor: not-allowed; opacity: .42; }
.verify-contact-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.verify-contact-row > .field { min-width: 0; }
.verify-send-btn { align-self: end; min-height: 58px; }
[data-verify-target][hidden],
[data-login-method-target][hidden],
[data-contact-email-field][hidden] { display: none !important; }
[data-contact-verify].verified [data-verify-send] { border-color: rgba(216, 255, 58, 0.5); color: var(--lime); pointer-events: none; }
[data-contact-verify] .verify-ok { color: var(--lime); font-weight: 700; }
[data-contact-verify] .verify-err { color: var(--coral); font-weight: 700; }
@media (max-width: 560px) {
    .verify-method-switch { grid-template-columns: 1fr; }
    .verify-contact-row { grid-template-columns: 1fr; }
    .verify-send-btn { width: 100%; }
}

/* ---------- pass ticket ---------- */
.pass-wrap { max-width: 460px; margin: 0 auto; }
.pass-ticket {
    border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-pop);
    border: 1px solid var(--line-strong);
    background: linear-gradient(160deg, var(--surface-2), var(--surface));
}
.pass-head {
    background: var(--lime); color: var(--on-lime); padding: 22px 26px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pass-head .p-brand { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 15px; letter-spacing: 0.06em; }
.pass-head .p-tag { font-weight: 800; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; border: 1.5px solid var(--on-lime); border-radius: 999px; padding: 4px 12px; }
.pass-body { padding: 26px; display: flex; flex-direction: column; gap: 22px; }
.pass-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 6vw, 36px); text-transform: uppercase; line-height: 1; }
.pass-bib {
    font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 9vw, 60px);
    color: var(--lime); line-height: 1; letter-spacing: 0.02em;
}
.pass-bib-pending { display: inline-block; font-size: clamp(20px, 4vw, 28px); letter-spacing: -.02em; }
.pass-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.pass-meta .pm { display: flex; flex-direction: column; gap: 2px; }
.pass-meta .pm b { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pass-meta .pm span { font-weight: 700; font-size: 15px; }
.pass-qr {
    background: #fff; border-radius: 16px; padding: 18px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pass-qr img { width: min(230px, 60vw); height: auto; }
.pass-qr .p-code { color: #10130a; font-family: var(--font-display); font-weight: 900; letter-spacing: 0.1em; font-size: 15px; }
.pass-divider {
    position: relative; height: 0; border-top: 2px dashed var(--line-strong); margin: 0 10px;
}
.pass-divider::before, .pass-divider::after {
    content: ''; position: absolute; top: -13px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--bg);
}
.pass-divider::before { left: -23px; }
.pass-divider::after { right: -23px; }
.pass-status { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; }
.pass-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

/* ---------- mobile field pass launcher ---------- */
html.pass-launcher-root {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
.pass-launcher-body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 320px;
    overflow: hidden;
    overscroll-behavior: none;
    background: #000;
    color: var(--ink);
}
.pass-launcher-body > .noise,
.pass-launcher-body > .topbar,
.pass-launcher-body > .mobile-menu,
.pass-launcher-body > .footer,
.pass-launcher-body > .reg-bar,
.pass-launcher-body > .toast { display: none !important; }
.pass-launcher-body > main {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.pass-launcher-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000;
}
/* PC·모바일 동일 UI — 기기와 무관하게 항상 같은 앱 컬럼으로 렌더링 */
.pass-launcher {
    /* 위젯·타일 공통 카드색 — 반투명이 아니라 고정색이라 위치와 무관하게 동일 */
    --pass-card: color-mix(in srgb, var(--lime) 6%, color-mix(in srgb, #ffffff 5%, var(--bg)));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(100%, 520px);
    max-width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 0;
    background:
        radial-gradient(circle at 18% -4%, color-mix(in srgb, var(--lime) 13%, transparent), transparent 32%),
        radial-gradient(circle at 88% 108%, color-mix(in srgb, var(--lime) 7%, transparent), transparent 30%),
        var(--bg);
}
/* 패널 영역만 스크롤 — 독은 항상 고정 */
.pass-panels {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px 26px;
    scrollbar-width: none;
}
.pass-panels::-webkit-scrollbar { display: none; }
.pass-launcher-head,
.pass-launcher-greeting,
.launcher-pass-top,
.launcher-pass-main,
.launcher-pass-foot,
.launcher-alert,
.launcher-section-head,
.launcher-dock {
    display: flex;
    align-items: center;
}
.pass-launcher-panel { animation: launcher-panel-in .2s ease both; }
.pass-launcher-panel[hidden] { display: none !important; }
@keyframes launcher-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.pass-launcher-greeting { justify-content: space-between; gap: 16px; margin-top: 0; }
/* 프로필 행 — 모든 탭 상단에 고정되는 내비바 (프로필·테마·날씨) */
.pass-profile-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
    border-bottom: 1px solid var(--line);
}
html[data-theme="light"] .pass-profile-row { border-color: rgba(20,24,18,.1); }
.pass-profile { display: flex; flex: 1 1 auto; align-items: center; gap: 11px; min-width: 0; padding: 6px 8px 6px 6px; border: 0; border-radius: 16px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .16s ease; }
.pass-profile:active { background: var(--tint-chip); }
.pass-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(140deg, var(--lime), #7fd3ff); color: var(--on-lime); font-family: var(--font-display); font-size: 17px; font-weight: 900; }
.pass-profile-copy { display: grid; gap: 1px; min-width: 0; }
.pass-profile-copy b { overflow: hidden; font-size: 17px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.pass-profile-copy small { overflow: hidden; color: var(--muted); font-size: 10.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pass-profile > svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
.pass-greeting { margin: 16px 0 0; color: var(--ink); font-family: var(--font-display); font-size: 23px; line-height: 1.16; letter-spacing: -.045em; }

/* 대회 전 체크리스트 */
.pass-checklist { margin-top: 22px; }
.pass-checklist ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pass-checklist li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--tint-chip); }
.pass-checklist li > svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: var(--lime); }
.pass-checklist li span { display: grid; gap: 2px; min-width: 0; }
.pass-checklist li b { color: var(--ink); font-size: 14.5px; font-weight: 800; }
.pass-checklist li small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
html[data-theme="light"] .pass-checklist li { border-color: rgba(20,24,18,.1); background: rgba(20,24,18,.04); }
html[data-theme="light"] .pass-checklist li b { color: #171c13; }
html[data-theme="light"] .pass-greeting { color: #171c13; }
html[data-theme="light"] .pass-profile { color: #171c13; }
html[data-theme="light"] .pass-profile-copy b { color: #171c13; }

/* 스탬프 패널 */
.pass-stamp-count { display: inline-flex; align-items: baseline; gap: 2px; color: var(--muted); font-weight: 800; }
.pass-stamp-count b { color: var(--lime); font-family: var(--font-display); font-size: 26px; font-weight: 900; font-stretch: 115%; line-height: 1; letter-spacing: -.02em; }
.pass-stamp-count small { font-family: var(--font-display); font-size: 13px; font-weight: 900; }
.pass-stamp-board { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.pass-stamp-map-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 1px 2px 10px; border: 0; }
.pass-stamp-progress { margin: 0; }
.pass-stamp-board .stamp-map.seal-grid { border: 0; border-radius: 0; background: transparent; }
.pass-finish-banner { text-decoration: none; color: inherit; }

/* ── 패스 스킨: 본 사이트의 에디토리얼 문법 ── */
.pass-hero { margin-top: 20px; }
.pass-hero .kicker { font-size: 10.5px; }
.pass-hero-title { margin: 10px 0 0; color: var(--ink); font-size: clamp(46px, 15vw, 64px); }
.pass-hero-title .outline { color: transparent; -webkit-text-stroke: 1.4px var(--lime); }
.pass-hero-sub { margin: 12px 0 0; max-width: 34ch; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
html[data-theme="light"] .pass-hero-title { color: #171c13; }

/* 마퀴 스트립 — 얇은 티커 */
.pass-marquee { margin: 14px -18px 0; padding: 9px 0; overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); user-select: none; }
.pass-marquee .marquee-track { display: inline-flex; gap: 30px; animation: marquee 22s linear infinite; will-change: transform; }
.pass-marquee .marquee-track span { display: inline-flex; align-items: center; gap: 30px; color: var(--ink-soft); font-family: var(--font-display); font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pass-marquee .marquee-track span::after { content: '✦'; color: var(--lime); font-size: .85em; }
.pass-marquee .marquee-track .ghost { color: transparent; -webkit-text-stroke: 1px rgba(215,220,210,.5); }
html[data-theme="light"] .pass-marquee { border-color: rgba(20,24,18,.12); }
html[data-theme="light"] .pass-marquee .marquee-track span { color: #3a4234; }
html[data-theme="light"] .pass-marquee .marquee-track .ghost { -webkit-text-stroke-color: rgba(58,66,52,.45); }

/* 섹션 헤드 — 킥커 문법 (라임 바 + 레터스페이스) */
.launcher-section-head { justify-content: space-between; gap: 12px; margin-top: 26px; }
.launcher-section-head h2 { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 13.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.launcher-section-head h2::before { content: ''; width: 22px; height: 2px; background: var(--lime); }
.launcher-section-head > span { color: transparent; -webkit-text-stroke: 1px rgba(144,153,139,.7); font-family: var(--font-display); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
html[data-theme="light"] .launcher-section-head h2 { color: #171c13; }

/* 체크리스트 — 번호 에디토리얼 (헤어라인 리스트) */
.pass-checklist ol { display: block; margin: 6px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pass-checklist li { display: flex; align-items: flex-start; gap: 14px; padding: 13px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.pass-checklist li em { flex: 0 0 auto; margin-top: 1px; color: var(--lime); font-family: var(--font-display); font-size: 13px; font-style: normal; font-weight: 900; letter-spacing: .06em; }
html[data-theme="light"] .pass-checklist ol { border-color: rgba(20,24,18,.18); }
html[data-theme="light"] .pass-checklist li { border-color: rgba(20,24,18,.1); }

/* 패스 카드 — 티켓 노치 + 절취선 */
.launcher-pass-card {
    position: relative;
    background:
        repeating-linear-gradient(-52deg, rgba(16,19,10,.05) 0 2px, transparent 2px 13px),
        #d8ff3a;
}
.launcher-pass-main { position: relative; overflow: hidden; }
.launcher-pass-ghost {
    position: absolute; right: -14px; top: 50%; transform: translateY(-54%); z-index: 0;
    color: transparent; -webkit-text-stroke: 2px rgba(16,19,10,.14);
    font-family: var(--font-display); font-size: 170px; font-weight: 900; font-stretch: 115%;
    line-height: 1; pointer-events: none; user-select: none;
}
.launcher-pass-qr-button { position: relative; z-index: 1; }
.launcher-pass-qr { position: relative; }
.qr-corner { position: absolute; width: 22px; height: 22px; border: 3px solid #10130a; }
.qr-corner.tl { top: -8px; left: -8px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.qr-corner.tr { top: -8px; right: -8px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.qr-corner.bl { bottom: -8px; left: -8px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.qr-corner.br { bottom: -8px; right: -8px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.launcher-pass-foot { position: relative; border-top: 1.5px dashed rgba(16,19,10,.3) !important; }
.launcher-pass-foot::before,
.launcher-pass-foot::after {
    content: ''; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--bg);
}
.launcher-pass-foot::before { left: -27px; }
.launcher-pass-foot::after { right: -27px; }

/* 아바타 — 원형 그라디언트 → 비브 넘버 타일 */
.pass-avatar { border-radius: 12px; background: var(--lime); color: var(--on-lime); font-stretch: 115%; }

/* ── 패스 모달: 애플식 바텀시트 ── */
.pass-launcher-body .my-modal {
    position: fixed; inset: auto 0 0 0;
    width: min(520px, 100vw); max-height: calc(100dvh - 52px);
    margin: 0 auto; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 26px 26px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: pass-sheet-up .32s cubic-bezier(.22, 1, .3, 1);
}
.pass-launcher-body .my-modal::before {
    content: ''; display: block; width: 40px; height: 4.5px; margin: 9px auto 0;
    border-radius: 999px; background: var(--line-strong); opacity: .8;
}
.pass-launcher-body .my-modal::backdrop { background: rgba(5, 7, 5, .58); backdrop-filter: blur(3px); }
.pass-launcher-body .my-modal-head { padding: 10px 20px 15px; border-bottom: 1px solid var(--line); }
@keyframes pass-sheet-up { from { transform: translateY(48px); opacity: .4; } to { transform: none; opacity: 1; } }
/* 참가 정보: 박스 행 → 헤어라인 에디토리얼 리스트 */
.launcher-profile-card { display: block; margin: 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: transparent; }
.launcher-profile-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 2px; border: 0; border-bottom: 1px solid var(--line); }
.launcher-profile-card dt { color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; }
.launcher-profile-card dd { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 900; letter-spacing: -.01em; }

/* 코스 모달 */
.pass-course-body { display: flex; flex-direction: column; gap: 0; padding: 0 !important; }
.pass-course-body .kakao-course-map { width: 100%; aspect-ratio: 4 / 4.4; min-height: 300px; }
.pass-course-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 15px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.pass-course-facts div { min-width: 0; }
.pass-course-facts dt { color: var(--muted); font-size: 10.5px; font-weight: 900; letter-spacing: .1em; }
.pass-course-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 800; line-height: 1.35; }


.pass-utility-cluster { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.pass-theme-toggle { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--tint-chip); color: var(--ink); cursor: pointer; transition: border-color .16s ease; }
.pass-theme-toggle:hover { border-color: var(--line-strong); }
.pass-theme-toggle svg { width: 16px; height: 16px; }
.pass-launcher-greeting > div > span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.pass-launcher-greeting h1 { margin: 7px 0 0; color: var(--ink); font-family: var(--font-display); font-size: 27px; line-height: 1.12; letter-spacing: -.055em; }
.pass-weather { min-height: 44px; flex: 0 0 auto; padding: 5px 13px; display: grid; grid-template-columns: auto auto; align-content: center; justify-content: center; align-items: center; gap: 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint-chip); color: var(--ink); }
.pass-weather svg { width: 17px; height: 17px; color: #ffd45a; }
.pass-weather b { font-size: 13.5px; }
.pass-weather small { grid-column: 1 / -1; margin-top: 2px; color: var(--muted); font-size: 9.5px; font-weight: 800; text-align: center; }
.launcher-pass-card { margin-top: 18px; overflow: hidden; border-radius: 25px; background: #d8ff3a; color: #10130a; box-shadow: 0 18px 42px rgba(0,0,0,.26); }
.launcher-pass-card.is-cancelled { background: #ff8a7d; }
.launcher-pass-top { justify-content: space-between; gap: 10px; padding: 17px 18px 14px; border-bottom: 1px solid rgba(16,19,10,.16); }
.launcher-pass-kicker { display: block; font-size: 8px; font-weight: 900; letter-spacing: .17em; }
.launcher-pass-top h2 { margin: 3px 0 0; font-family: var(--font-display); font-size: 34px; font-weight: 900; font-stretch: 115%; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
/* 브랜드 킥커 — 종목 대신 상단을 차분하게 */
.launcher-pass-brand { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-display); font-size: 14px; font-weight: 900; font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; }
.launcher-pass-brand em { color: transparent; -webkit-text-stroke: 1.2px rgba(16,19,10,.5); font-size: 14px; font-style: normal; letter-spacing: .02em; }
.launcher-ready { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; font-size: 10.5px; font-weight: 900; letter-spacing: .14em; white-space: nowrap; }
.launcher-ready i { width: 6px; height: 6px; border-radius: 50%; background: #0b6b31; box-shadow: 0 0 0 3px rgba(11,107,49,.13); }
.launcher-ready.is-waiting i { background: #cc5c00; box-shadow: 0 0 0 3px rgba(204,92,0,.13); }
.launcher-ready.is-cancelled i { background: #a31616; box-shadow: 0 0 0 3px rgba(163,22,22,.13); }
.launcher-pass-main { align-items: center; gap: 17px; flex-direction: column; padding: 18px; }
.launcher-pass-qr-button { padding: 0; display: flex; align-items: center; gap: 7px; flex-direction: column; border: 0; background: transparent; color: #10130a; font: inherit; cursor: pointer; }
.launcher-pass-qr-button > small { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 900; }
.launcher-pass-qr-button > small svg { width: 12px; height: 12px; }
.launcher-pass-qr { width: min(238px, 100%); aspect-ratio: 1; height: auto; flex: 0 0 auto; padding: 12px; display: block; border-radius: 18px; background: white; box-shadow: 0 10px 26px rgba(16,19,10,.18); }
.launcher-pass-qr img { width: 100%; height: 100%; display: block; }
.launcher-pass-data { width: 100%; min-width: 0; margin: 0; display: grid; grid-template-columns: 1.2fr .85fr .75fr; border-top: 1px solid rgba(16,19,10,.16); }
.launcher-pass-data div { min-width: 0; padding: 12px 10px 0; border-right: 1px solid rgba(16,19,10,.16); }
.launcher-pass-data div:first-child { padding-left: 0; }
.launcher-pass-data div:last-child { padding-right: 0; border-right: 0; }
.launcher-pass-data dt { font-size: 8.5px; font-weight: 900; letter-spacing: .14em; opacity: .62; }
.launcher-pass-data dd { margin: 3px 0 0; overflow: hidden; font-family: var(--font-display); font-size: 19px; font-weight: 900; font-stretch: 110%; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.launcher-pass-data dt { font-size: 9.5px; font-weight: 900; letter-spacing: .15em; opacity: .65; }
.launcher-pass-data dd { margin: 3px 0 0; overflow: hidden; font-family: var(--font-display); font-size: 17px; font-weight: 900; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.launcher-pass-data div:nth-child(2) dd { font-size: 22px; }
.launcher-pass-foot { justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 18px 15px; background: transparent; color: #10130a; font-family: var(--font-display); font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.launcher-pass-foot span:last-child { color: rgba(16,19,10,.55); }
/* 지금 내 상태 — 체크인·스탬프·D-day 한 줄 스트립 */
.pass-status-strip { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--tint-chip); }
.pass-status-strip > * { display: grid; gap: 4px; min-width: 0; padding: 13px 15px; border: 0; border-right: 1px solid var(--line); background: transparent; color: inherit; font: inherit; text-align: left; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.pass-status-strip > *:last-child { border-right: 0; }
.pass-status-strip button { cursor: pointer; }
.pass-status-strip button:hover { background: var(--tint-hover); }
.pass-status-strip small { color: var(--muted); font-size: 9.5px; font-weight: 900; letter-spacing: .13em; }
.pass-status-strip b { display: inline-flex; align-items: center; gap: 7px; overflow: hidden; color: var(--ink); font-family: var(--font-display); font-size: 16px; font-weight: 900; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.pass-status-strip b em { color: var(--lime); font-size: 21px; font-style: normal; line-height: 1; }
.status-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.status-dot.is-ok { background: #35c26a; box-shadow: 0 0 0 3px rgba(53,194,106,.16); }
.status-dot.is-wait { background: #f0982e; box-shadow: 0 0 0 3px rgba(240,152,46,.16); }
.status-dot.is-off { background: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.16); }
html[data-theme="light"] .pass-status-strip { background: #fff; }

/* 현장 바로가기 — 슬림 필: 아이콘 + 라벨 한 줄, 내비바 캡슐과 같은 문법 */
.pass-quick-row { display: grid; grid-template-columns: repeat(var(--pass-quick-count, 3), minmax(0, 1fr)); gap: 9px; }
.pass-quick {
    --acc: var(--lime);
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-width: 0; min-height: 48px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 16px;
    background: var(--pass-card, var(--tint-chip)); color: var(--ink); font: inherit; cursor: pointer;
    transition: background-color .3s ease, border-color .16s ease, color .3s ease, transform .12s ease;
}
.pass-quick.is-medical { --acc: var(--coral); }
.pass-quick.is-assembly { --acc: var(--cyan); }
.pass-quick.is-booth { --acc: var(--lime); }
.pass-quick:active { transform: scale(.965); }
.pass-quick:hover { border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.pass-quick .pq-icon { display: grid; flex: 0 0 auto; place-items: center; color: var(--acc); }
.pass-quick .pq-icon svg { width: 17px; height: 17px; stroke-width: 2; }
.pass-quick b { overflow: hidden; font-size: 12.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="light"] .pass-quick { background: #fff; }
.pass-home-tools .launcher-alert-icon { width: 34px; height: 34px; }

/* 홈 날씨 위젯 — 내비바 칩에서 승격 */
.pass-weather-widget { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 17px; background: var(--pass-card, var(--tint-chip)); transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.pww-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pww-main > svg { width: 31px; height: 31px; flex: 0 0 auto; color: #ffd45a; }
.pww-main b { font-family: var(--font-display); font-size: 33px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.pww-main span { display: grid; gap: 2px; min-width: 0; }
.pww-main em { overflow: hidden; color: var(--ink); font-size: 13.5px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.pww-main small { color: var(--muted); font-size: 10px; font-weight: 700; }
.pww-facts { display: flex; flex: 0 0 auto; margin: 0; }
.pww-facts div { display: grid; gap: 3px; padding: 0 11px; border-left: 1px solid var(--line); text-align: center; }
.pww-facts div:last-child { padding-right: 1px; }
.pww-facts dt { color: var(--muted); font-size: 9.5px; font-weight: 900; letter-spacing: .08em; }
.pww-facts dd { margin: 0; font-family: var(--font-display); font-size: 14.5px; font-weight: 900; }
.pww-facts dd i { margin-left: 1px; color: var(--muted); font-size: 9px; font-style: normal; font-weight: 800; }
html[data-theme="light"] .pass-weather-widget { background: #fff; }

/* 스탬프 → 부스 위치 모달 */
.pass-launcher .ring-seal[data-stamp-title] { cursor: pointer; }
.pass-launcher .ring-seal[data-stamp-title]:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 50%; }
.pass-stamp-complete-body { display: grid; justify-items: center; gap: 8px; padding: 28px 22px 32px; text-align: center; }
.pass-stamp-thanks-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--lime) 18%, var(--tint-chip)); color: var(--lime); }
.pass-stamp-thanks-icon svg { width: 30px; height: 30px; }
.pass-stamp-complete-body > b { margin-top: 4px; color: var(--ink); font-family: var(--font-display); font-size: 21px; }
.pass-stamp-complete-body p { margin: 0; color: var(--muted); font-size: 13px; }
.pass-stamp-complete-body p strong { color: var(--ink); }
.pass-stamp-complete-body small { color: var(--lime); font-size: 11px; font-weight: 800; }
.pass-booth-body { padding: 0 !important; }
.pass-booth-body .kakao-course-map { width: 100%; aspect-ratio: 4 / 3; min-height: 280px; }
.pass-booth-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.pass-booth-foot p { min-width: 0; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pass-booth-foot .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pass-booth-foot .btn svg { width: 15px; height: 15px; }

/* 패스 모달 — 킥커 제거, 타이틀 확대 */
.pass-launcher-body .my-modal-head h2 { font-size: 24px; }

.launcher-alert { width: 100%; gap: 11px; margin-top: 14px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 17px; background: var(--tint-chip); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.launcher-alert:hover { border-color: var(--line-strong); background: var(--tint-hover); }
.launcher-alert.is-urgent { border-color: rgba(255,111,97,.32); background: rgba(255,111,97,.09); }
.launcher-alert.is-tool .launcher-alert-icon { background: var(--lime); color: var(--on-lime); }
.launcher-alert.is-tool small { color: var(--muted); }
.launcher-alert-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 12px; background: #ff6f61; color: #111; }
.launcher-alert-icon svg { width: 17px; height: 17px; }
.launcher-alert > span:nth-child(2) { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.launcher-alert small { color: #ff968c; font-size: 9.5px; font-weight: 900; letter-spacing: .13em; }
.launcher-alert b { margin-top: 2px; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.launcher-alert > svg { width: 15px; height: 15px; color: #737b6e; }
.launcher-tools { margin-top: 23px; }
.launcher-section-head { justify-content: space-between; }
.launcher-section-head h2 { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 17px; letter-spacing: -.035em; }
.launcher-section-head span { color: var(--muted); font-size: 9.5px; font-weight: 900; letter-spacing: .13em; }
.launcher-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
.launcher-app {
    position: relative; min-width: 0; min-height: 86px; padding: 14px 15px;
    display: flex; align-items: flex-start; gap: 3px; flex-direction: column; justify-content: flex-end;
    border: 1px solid var(--line); border-radius: 18px; background: var(--tint-chip);
    color: var(--ink); font: inherit; text-align: left; cursor: pointer; text-decoration: none;
    transition: border-color .16s ease, background .16s ease, transform .12s ease;
}
.launcher-app:active { transform: scale(.975); }
.launcher-app:hover { border-color: color-mix(in srgb, var(--lime) 55%, transparent); background: var(--tint-hover); }
.launcher-app > span { position: absolute; top: 13px; left: 15px; display: grid; place-items: center; width: auto; height: auto; border: 0; background: transparent; color: var(--lime); }
.launcher-app > span svg { width: 21px; height: 21px; stroke-width: 2; }
.launcher-app b { width: 100%; overflow: hidden; font-size: 14.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.launcher-app small { color: transparent; -webkit-text-stroke: .8px rgba(115,123,110,.85); font-family: var(--font-display); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.launcher-app em { min-width: 17px; height: 17px; padding: 0 4px; position: absolute; top: 11px; right: 11px; display: grid; place-items: center; border-radius: 999px; background: var(--lime); color: var(--on-lime); font-size: 8px; font-style: normal; font-weight: 900; }
html[data-theme="light"] .launcher-app { border-color: rgba(20,24,18,.14); background: rgba(20,24,18,.035); color: #171c13; }
html[data-theme="light"] .launcher-app:hover { border-color: #7a9906; background: rgba(20,24,18,.06); }
html[data-theme="light"] .launcher-app > span { color: #5d7a00; }
.launcher-dock {
    position: relative; z-index: 5;
    display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: center;
    min-height: 62px; padding: 7px 10px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--topbar-bg);
    -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.launcher-dock button, .launcher-dock .dock-item { position: relative; width: 50px; height: 50px; min-height: 0; padding: 0; justify-self: center; display: grid; place-items: center; border: 0; border-radius: 17px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; text-decoration: none; transition: color .16s ease, background-color .16s ease, transform .12s ease; }
.launcher-dock button:active, .launcher-dock .dock-item:active { transform: scale(.94); }
.launcher-dock button.active:not(.dock-qr-fab) { background: color-mix(in srgb, var(--lime) 10%, transparent); color: var(--ink); }
.launcher-dock button.active:not(.dock-qr-fab)::after { content: ''; position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.launcher-dock button.active svg { color: var(--lime); }
html[data-theme="light"] .launcher-dock button.active:not(.dock-qr-fab) { color: #171c13; }
.launcher-dock button svg, .launcher-dock .dock-item svg { width: 31px; height: 31px; stroke-width: 1.9; }
.pass-notification-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border: 2px solid var(--topbar-bg); border-radius: 50%; background: #ff453a; box-shadow: 0 1px 5px rgba(255,69,58,.48); }
.pass-notification-dot[hidden] { display: none; }
/* 센터 QR FAB — 패스가 이 화면의 주인공: 홈(QR) 탭을 독 위로 띄운다 */
.launcher-dock .dock-qr-fab {
    justify-self: center; display: grid; place-items: center;
    width: 68px; height: 68px; min-height: 0; padding: 0; margin-top: -32px; border-radius: 50%;
    background: var(--lime); color: var(--on-lime);
    border: 4px solid var(--bg);
    box-shadow: 0 10px 26px rgba(0,0,0,.42), 0 0 0 1px var(--line);
    transition: transform .14s ease, box-shadow .14s ease;
}
.launcher-dock .dock-qr-fab.active {
    background: var(--lime);
    color: var(--on-lime);
    box-shadow: 0 10px 26px rgba(0,0,0,.42), 0 0 0 3px color-mix(in srgb, var(--lime) 70%, transparent);
}
.launcher-dock .dock-qr-fab::after { display: none; }
.launcher-dock .dock-qr-fab:active { transform: scale(.92); }
.launcher-dock .dock-qr-fab svg { width: 31px; height: 31px; color: var(--on-lime) !important; }

.launcher-panel-head { margin-top: 8px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.launcher-panel-head > div { min-width: 0; }
.launcher-panel-title { display: flex; align-items: center; gap: 11px; }
.launcher-panel-title::before { content: ''; width: 5px; height: 29px; flex: 0 0 auto; border-radius: 999px; background: linear-gradient(180deg, var(--lime), var(--cyan)); }
.launcher-panel-head h1 { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 32px; line-height: 1.05; letter-spacing: -.055em; white-space: nowrap; }
.launcher-panel-head button { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--tint-chip); color: var(--ink-soft); cursor: pointer; }
.launcher-panel-head button svg { width: 18px; }
@media (max-width: 340px) {
    .launcher-panel-head { gap: 10px; }
    .launcher-panel-title { gap: 9px; }
    .launcher-panel-head h1 { font-size: 25px; }
}
.launcher-panel-lead { margin: 9px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.launcher-hashtags { margin-top: 15px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.launcher-hashtags::-webkit-scrollbar { display: none; }
.launcher-hashtags span { padding: 6px 9px; flex: 0 0 auto; border: 1px solid rgba(183,245,0,.2); border-radius: 999px; background: rgba(183,245,0,.06); color: var(--lime); font-size: 9px; font-weight: 800; }
.launcher-feed-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; overflow: hidden; border-radius: 19px; }
.launcher-feed-grid > article { aspect-ratio: 1; position: relative; overflow: hidden; background: var(--surface-2); }
.launcher-feed-grid > article > .instagram-media { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .2s ease; }
.launcher-feed-grid > article > span { width: 100%; height: 100%; display: grid; place-items: center; color: #899481; }
.launcher-feed-grid > article > span svg { width: 24px; }
.launcher-feed-grid > article > svg { width: 15px; height: 15px; position: absolute; top: 7px; right: 7px; color: white; filter: drop-shadow(0 1px 3px rgba(0,0,0,.8)); }
.launcher-panel-empty { grid-column: 1 / -1; min-height: 220px; padding: 34px 25px; display: flex; align-items: center; justify-content: center; gap: 7px; flex-direction: column; background: var(--surface-2); color: var(--ink-soft); text-align: center; }
.launcher-panel-empty > svg { width: 28px; color: var(--lime); }
.launcher-panel-empty p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.launcher-panel-empty.pass-vote-empty { min-height: clamp(280px, 52vh, 440px); padding: 28px; gap: 5px; background: transparent; }
.launcher-panel-empty.pass-vote-empty b { color: var(--ink-soft); font-family: var(--font-display); font-size: 21px; letter-spacing: -.025em; }
.launcher-panel-empty.pass-vote-empty p { font-size: 11px; }
.launcher-wide-link { width: 100%; margin-top: 15px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 15px; background: var(--tint-chip); color: var(--ink); font-size: 11px; font-weight: 800; }
.launcher-wide-link svg { width: 16px; color: var(--lime); }
.launcher-notice-list { margin-top: 17px; display: flex; gap: 10px; flex-direction: column; }
.launcher-notice-card { --notice-accent: #4d8fff; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
.launcher-notice-card.type-urgent { --notice-accent: #ff5d55; }
.launcher-notice-card.type-transport { --notice-accent: #7d68e8; }
.launcher-notice-card.type-weather { --notice-accent: #4e9ed6; }
.launcher-notice-card.type-program { --notice-accent: #719900; }
.launcher-notice-card.type-finish { --notice-accent: #b7791f; }
.launcher-notice-card summary,
.pass-notice-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px; list-style: none; cursor: pointer; }
.pass-notice-link { color: inherit; text-decoration: none; transition: border-color .16s ease, transform .12s ease; }
.pass-notice-link:hover { border-color: color-mix(in srgb, var(--notice-accent) 45%, var(--line)); }
.pass-notice-link:active { transform: scale(.992); }
.launcher-notice-card summary::-webkit-details-marker { display: none; }
.launcher-notice-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, color-mix(in srgb, var(--notice-accent) 90%, white), color-mix(in srgb, var(--notice-accent) 82%, black)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px color-mix(in srgb, var(--notice-accent) 24%, transparent); }
.launcher-notice-icon svg { width: 21px; height: 21px; stroke-width: 2; }
.launcher-notice-copy { min-width: 0; }
.launcher-notice-meta { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); font-size: 9.5px; line-height: 1.25; }
.launcher-notice-meta b { color: var(--notice-accent); font-weight: 900; }
.launcher-notice-meta small { overflow: hidden; font-size: inherit; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.launcher-notice-card h2 { margin: 4px 0 0; color: var(--ink); font-size: 16px; line-height: 1.3; }
.launcher-notice-card p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.launcher-notice-card summary > svg,
.pass-notice-link > svg { width: 15px; height: 15px; margin-top: 13px; color: var(--muted); transition: transform .18s ease; }
.launcher-notice-card[open] summary > svg { transform: rotate(180deg); }
.launcher-notice-card > div { margin: 0 14px 14px 68px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.launcher-notice-card > div p { margin: 0 0 8px; color: inherit; }
.launcher-notice-card .announcement-body { white-space: pre-line; }
.pass-notice-action { min-height: 34px; margin-top: 8px; padding: 7px 11px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--notice-accent) 55%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--notice-accent) 10%, transparent); color: var(--ink); font-size: 11px; font-weight: 900; text-decoration: none; }
.launcher-guide-links { margin-top: 13px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.launcher-guide-links > a { min-width: 0; padding: 12px 8px; display: flex; align-items: center; gap: 8px; flex-direction: column; border: 1px solid var(--line); border-radius: 15px; background: var(--tint-chip); color: var(--ink); text-align: center; }
.launcher-guide-links > a > svg { width: 19px; color: var(--lime); }
.launcher-guide-links span { min-width: 0; display: flex; flex-direction: column; }
.launcher-guide-links b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.launcher-guide-links small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.launcher-profile-card > div:last-child { border-bottom: 0; }
.launcher-profile-card dd { text-align: right; overflow-wrap: anywhere; }
.launcher-data-note { margin: 14px 2px 0; display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.launcher-data-note svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--lime); }
/* 현장 추천 툴바 — 팀 검색 + 정렬 세그먼트 (공개 투표 페이지 규칙에 안 덮이도록 패스 스코프) */
.launcher-vote-tools { margin-top: 14px; display: flex; gap: 8px; }
.pass-launcher .vote-search { position: static; flex: 1 1 auto; max-width: none; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--tint-chip); color: var(--muted); }
.pass-launcher .vote-search svg { position: static; transform: none; width: 16px; height: 16px; flex: 0 0 auto; }
.pass-launcher .vote-search input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding-left: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; }
.pass-launcher .vote-search input:focus { outline: 0; }
.pass-launcher .vote-search input::placeholder { color: var(--muted); }
.pass-launcher .vote-search:focus-within { border-color: color-mix(in srgb, var(--lime) 55%, transparent); }
.pass-launcher .vote-sort { width: auto; flex: 0 0 auto; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--tint-chip); }
.pass-launcher .vote-sort button { flex: 0 0 auto; padding: 0 13px; min-height: 44px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; }
/* 선택 = 주변 머테리얼과 같은 라임 토큰: 다크는 형광 라임+먹색, 라이트는 딥 라임+흰색 */
.pass-launcher .vote-sort button.active { background: var(--lime); color: var(--on-lime); font-weight: 900; }
.vote-search-empty { margin: 18px 2px 0; color: var(--muted); font-size: 13px; }
/* 무한 스크롤 센티널 */
.vote-feed-sentinel { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; padding: 12px; color: var(--muted); font-size: 12px; font-weight: 700; }
.vote-feed-sentinel:not(.is-loading) { display: none; }
.vote-feed-sentinel svg { width: 15px; height: 15px; animation: vote-feed-spin 1s linear infinite; }
@keyframes vote-feed-spin { to { transform: rotate(360deg); } }
.launcher-vote-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.launcher-vote-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--tint-chip); }
.launcher-vote-card.is-selected { border-color: rgba(255,79,160,.55); }
.launcher-vote-photo { width: 100%; padding: 0; border: 0; aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); font: inherit; color: inherit; }
button.launcher-vote-photo { cursor: zoom-in; }
.launcher-vote-photo img { width: 100%; height: 100%; object-fit: cover; }
.launcher-vote-photo span { font-size: 36px; }
.launcher-vote-card > div:nth-child(2) { padding: 10px 11px 7px; display: flex; flex-direction: column; }
.launcher-vote-card > div:nth-child(2) small { color: var(--muted); font-size: 9.5px; }
.launcher-vote-card > div:nth-child(2) b { margin-top: 2px; color: var(--ink); font-size: 13.5px; }
.launcher-vote-card form { padding: 0 8px 9px; }
.launcher-vote-card form button { width: 100%; min-height: 34px; padding: 6px 8px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--tint-chip); color: var(--ink-soft); font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer; }
.launcher-vote-card form button svg { width: 14px; }
.launcher-vote-card.is-selected form button { border-color: #ff4fa0; background: rgba(255,79,160,.1); color: #ff7fba; }
.launcher-vote-card.is-selected form button svg { fill: currentColor; }
/* 후보 사진 확대 — 하프모달(바텀시트) */
.pass-vote-photo-heading { display: grid; gap: 2px; }
.pass-vote-photo-heading small { color: var(--muted); font-size: 10.5px; font-weight: 800; line-height: 1.25; }
.pass-vote-photo-heading h2 { margin-top: 0 !important; }
.pass-vote-photo-heading p { max-width: min(68vw, 360px); margin: 2px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.vote-photo-body { padding: 0 !important; }
.vote-photo-body img { display: block; width: calc(100% - 24px); max-height: calc(68dvh - 12px); margin: 12px 12px 12px; object-fit: contain; background: var(--surface-2); }
.pass-qr-modal { width: min(420px, calc(100% - 24px)); }
.launcher-qr-modal-body { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.launcher-modal-qr { width: min(330px, 100%); aspect-ratio: 1; padding: 15px; border-radius: 23px; background: #fff; box-shadow: 0 12px 36px rgba(0,0,0,.16); }
.launcher-modal-qr img { width: 100%; height: 100%; display: block; }
.launcher-qr-modal-body > strong { font-family: var(--font-display); font-size: 17px; letter-spacing: .1em; }
.launcher-qr-modal-body > p { max-width: 320px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

/* 패스 전용 라이트 테마 */
html[data-theme="light"] body.pass-launcher-body,
html[data-theme="light"] .pass-launcher-stage { background: #d9ddd4; }
html[data-theme="light"] .pass-launcher-greeting > div > span,
html[data-theme="light"] .launcher-panel-lead,
html[data-theme="light"] .launcher-app small,
html[data-theme="light"] .launcher-data-note { color: #697267; }
html[data-theme="light"] .pass-launcher-greeting h1,
html[data-theme="light"] .launcher-section-head h2,
html[data-theme="light"] .launcher-panel-head h1,
html[data-theme="light"] .launcher-app,
html[data-theme="light"] .launcher-notice-card h2,
html[data-theme="light"] .launcher-profile-card dd,
html[data-theme="light"] .launcher-vote-card > div:nth-child(2) b { color: #141812; }
html[data-theme="light"] .pass-theme-toggle,
html[data-theme="light"] .pass-lang .language-trigger,
html[data-theme="light"] .pass-weather,
html[data-theme="light"] .launcher-alert,
html[data-theme="light"] .launcher-wide-link,
html[data-theme="light"] .launcher-notice-card,
html[data-theme="light"] .launcher-vote-card { border-color: rgba(20,24,18,.12); background: #fff; color: #151912; }
html[data-theme="light"] .pass-theme-toggle { color: #151912; }
html[data-theme="light"] .launcher-alert b { color: #151912; }
html[data-theme="light"] .launcher-alert:hover { background: #fff; border-color: rgba(20,24,18,.22); }
html[data-theme="light"] .launcher-alert.is-urgent { background: #fff3f1; border-color: rgba(224,78,65,.25); }
html[data-theme="light"] .launcher-alert.is-tool small { color: #6c766a; }
html[data-theme="light"] .launcher-panel-head button { border-color: rgba(20,24,18,.12); background: #fff; color: #151912; }
html[data-theme="light"] .launcher-feed-grid > article,
html[data-theme="light"] .launcher-vote-photo,
html[data-theme="light"] .launcher-panel-empty { background: #e9ede5; color: #333a31; }
html[data-theme="light"] .launcher-panel-empty.pass-vote-empty { background: transparent; }
html[data-theme="light"] .launcher-notice-card p,
html[data-theme="light"] .launcher-notice-card > div,
html[data-theme="light"] .launcher-profile-card dt { color: #657063; }
html[data-theme="light"] .launcher-notice-card > div,
html[data-theme="light"] .launcher-profile-card div { border-color: rgba(20,24,18,.1); }
html[data-theme="light"] .launcher-vote-card form button { border-color: rgba(20,24,18,.12); background: #f3f5f0; color: #394137; }
html[data-theme="light"] .launcher-dock button, html[data-theme="light"] .launcher-dock .dock-item { color: #737c70; }
html[data-theme="light"] .launcher-dock button.active:not(.dock-qr-fab) { color: #4e7300; }
/* 라이트 모드 — 추천 선택 상태·툴바에도 핑크/라임 액센트 유지 */
html[data-theme="light"] .launcher-vote-card.is-selected { border-color: #ff2f8e; }
html[data-theme="light"] .launcher-vote-card.is-selected form button { border-color: #ff2f8e; background: #ffeaf4; color: #d61d76; }
html[data-theme="light"] .pass-launcher .vote-search,
html[data-theme="light"] .pass-launcher .vote-sort { border-color: rgba(20,24,18,.14); background: #fff; }
html[data-theme="light"] .pass-launcher .vote-search { color: #667061; }
html[data-theme="light"] .pass-launcher .vote-search input { color: #151912; }
html[data-theme="light"] .pass-launcher .vote-search input::placeholder { color: #8c958a; }
html[data-theme="light"] .pass-launcher .vote-sort button { color: #667061; }
html[data-theme="light"] .pass-launcher .vote-sort button.active { background: var(--lime); color: #fff; }
html[data-theme="light"] .vote-search-empty { color: #697267; }
html[data-theme="light"] .vote-photo-body img { background: #e9ede5; }

/* 테마 전환 뾰로롱 — 본 사이트와 동일한 컬러 트랜지션 */
.pass-launcher-stage, .pass-launcher, .pass-profile-row, .pass-profile, .pass-theme-toggle, .pass-weather, .pass-lang,
.launcher-alert, .launcher-app, .launcher-notice-card, .launcher-notice-card > div, .launcher-vote-card, .launcher-vote-card form button,
.launcher-dock, .launcher-dock button, .launcher-dock .dock-item, .vote-search, .vote-sort, .vote-sort button,
.launcher-panel-empty, .launcher-vote-photo, .launcher-profile-card > div, .pass-checklist li, .pass-marquee {
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* 내비바 언어 선택 — 홈페이지 language-picker 재사용 */
.pass-lang .language-trigger { min-height: 44px; border-color: var(--line); background: var(--tint-chip); color: var(--ink); }
.pass-lang .language-trigger > span { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass-language-modal-body { display: grid; gap: 8px; }
.pass-language-modal-body .language-search { margin: 0 0 4px; }
.pass-language-modal-body .language-options { gap: 3px; }
.pass-language-modal-body .language-option { min-height: 50px; padding: 10px 12px; border-radius: 14px; }
.pass-language-modal-body .language-option > span { font-size: 14px; }
.site-language-modal { width: min(440px, calc(100vw - 32px)); }

/* ── 패스 수직 리듬 통일 — 기본 14px, 패널 헤드 아래 12px, 섹션성 블록 22px ── */
.pass-launcher .pass-launcher-panel > * { margin-top: 0; margin-bottom: 0; }
.pass-launcher .pass-launcher-panel > * + * { margin-top: 14px; }
.pass-launcher .pass-launcher-panel > .launcher-panel-head + * { margin-top: 12px; }
.pass-launcher .pass-launcher-panel > .pass-checklist,
.pass-launcher .pass-launcher-panel > .launcher-notice-list { margin-top: 22px; }
.pass-launcher .pass-launcher-panel > .pass-marquee { margin-right: -18px; margin-left: -18px; }

/* 당일 레이스 인포 — 박스 대신 헤어라인 에디토리얼 행 */
.pass-race-note { display: flex; align-items: center; gap: 9px; padding: 13px 4px 1px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.pass-race-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--lime); }
.pass-race-note b { color: var(--ink); font-weight: 800; }

/* 완주 배너 · 의무실 버튼 — launcher-alert 변형 */
.launcher-alert { text-decoration: none; }
.launcher-alert.is-medical .launcher-alert-icon { background: #e5484d; color: #fff; }
.launcher-alert.is-medical small { color: #e5766f; }
html[data-theme="light"] .launcher-alert.is-medical small { color: #c03530; }

.pass-notice-board { display: grid; gap: 10px; }
.pass-notice-board.is-empty { min-height: clamp(280px, 52vh, 440px); place-items: center; }
.pass-notice-empty { display: grid; justify-items: center; gap: 5px; padding: 28px; color: var(--muted); text-align: center; }
.pass-notice-empty b { color: var(--ink-soft); font-family: var(--font-display); font-size: 21px; letter-spacing: -.025em; }
.pass-notice-empty small { font-size: 11px; }

.pass-launcher-body .pass-vote-photo-modal { padding-bottom: 0; }
.pass-vote-photo-action {
    position: sticky; bottom: 0;
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
}
.pass-vote-photo-action button { width: 100%; min-height: 48px; padding: 10px 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint-chip); color: var(--ink-soft); font: inherit; font-weight: 900; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .12s ease; }
.pass-vote-photo-action button:hover { border-color: var(--line-strong); background: var(--tint-hover); }
.pass-vote-photo-action button:active { transform: scale(.985); }
.pass-vote-photo-action button:disabled { cursor: wait; opacity: .58; }
.pass-vote-photo-action button svg { width: 19px; height: 19px; }
.pass-vote-photo-action button.is-selected { border-color: #ff4fa0; background: rgba(255,79,160,.1); color: #ff7fba; }
.pass-vote-photo-action button.is-selected svg { fill: currentColor; }
html[data-theme="light"] .pass-vote-photo-action button { border-color: rgba(20,24,18,.12); background: #f3f5f0; color: #394137; }
html[data-theme="light"] .pass-vote-photo-action button:hover { border-color: rgba(20,24,18,.22); background: #ecefe9; }
html[data-theme="light"] .pass-vote-photo-action button.is-selected { border-color: #ff2f8e; background: #ffeaf4; color: #d61d76; }

/* 라이트 모드 — 네온 라임 대신 화이트 페이퍼 티켓 */
html[data-theme="light"] .launcher-pass-card {
    background:
        repeating-linear-gradient(-52deg, rgba(16,19,10,.028) 0 2px, transparent 2px 13px),
        #ffffff;
    color: #14160f;
    border: 1px solid rgba(20,24,18,.12);
    box-shadow: 0 14px 32px rgba(30, 38, 26, .13);
}
html[data-theme="light"] .launcher-pass-card.is-cancelled { background: #ffece9; border-color: rgba(224,78,65,.3); }

/* ---------- pass return, notices ---------- */
.notice-manage-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- DB 언어·번역 관리 ---------- */
.translation-loading-screen { position: fixed; z-index: 2400; inset: 0; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 78%, transparent); opacity: 0; backdrop-filter: blur(12px); transition: opacity .18s ease; }
.translation-loading-screen[hidden] { display: none; }
.translation-loading-screen.is-visible { opacity: 1; }
.translation-loading-card { width: min(480px, 100%); padding: 34px; display: grid; justify-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 24px; background: var(--surface); color: var(--ink); text-align: center; box-shadow: 0 28px 80px rgba(0,0,0,.28); transform: translateY(10px) scale(.985); transition: transform .18s ease; }
.translation-loading-screen.is-visible .translation-loading-card { transform: translateY(0) scale(1); }
.translation-loading-spinner { position: relative; width: 54px; height: 54px; margin-bottom: 7px; border: 4px solid var(--tint-chip); border-top-color: var(--lime); border-radius: 50%; animation: translation-spin .85s linear infinite; }
.translation-loading-card.is-complete .translation-loading-spinner, .translation-loading-card.is-failed .translation-loading-spinner { animation: none; border-color: color-mix(in srgb, var(--lime) 32%, var(--line)); }
.translation-loading-card.is-complete .translation-loading-spinner::after { content: ''; position: absolute; left: 16px; top: 11px; width: 11px; height: 20px; border: solid var(--lime); border-width: 0 4px 4px 0; transform: rotate(45deg); }
.translation-loading-card.is-failed .translation-loading-spinner { border-color: color-mix(in srgb, var(--coral) 45%, var(--line)); }
.translation-loading-card.is-failed .translation-loading-spinner::before, .translation-loading-card.is-failed .translation-loading-spinner::after { content: ''; position: absolute; left: 23px; top: 11px; width: 4px; height: 25px; border-radius: 99px; background: var(--coral); transform: rotate(45deg); }
.translation-loading-card.is-failed .translation-loading-spinner::after { transform: rotate(-45deg); }
.translation-loading-card .kicker { margin-top: 2px; }
.translation-loading-card h2 { margin: 2px 0 0; font-size: clamp(21px, 4vw, 28px); }
.translation-loading-card > p { min-height: 42px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.translation-loading-progress { width: 100%; height: 10px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: var(--tint-chip); }
.translation-loading-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime), var(--cyan)); box-shadow: 0 0 18px color-mix(in srgb, var(--lime) 38%, transparent); transition: width .32s ease; }
.translation-loading-meta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.translation-loading-meta strong { color: var(--lime); font-size: 17px; }
.translation-loading-meta span { color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.translation-loading-card > small { margin-top: 5px; color: var(--muted); font-size: 9.5px; line-height: 1.55; }
.translation-loading-card > .btn { margin-top: 8px; }
@keyframes translation-spin { to { transform: rotate(360deg); } }
.translation-manage-page .shell { max-width: 1480px; }
.translation-api-state { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 800; }
.translation-api-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.translation-api-state.is-ready i { background: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 14%, transparent); }
.translation-manage-layout { display: grid; grid-template-columns: minmax(0, 1fr) 318px; align-items: start; gap: 20px; }
.translation-main-column { min-width: 0; display: grid; gap: 18px; }
.translation-main-column > .panel + .panel { margin-top: 0; }
.translation-security-note { padding: 14px 16px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.translation-security-note > svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--cyan); }
.translation-security-note p { margin: 0; display: grid; gap: 3px; }
.translation-security-note b { color: var(--ink); font-size: 12.5px; }
.translation-security-note span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.translation-languages-panel { padding: 0; overflow: visible; }
.translation-languages-panel > .panel-head { padding: 18px 20px; }
.translation-add-language { padding: 14px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--tint-chip) 48%, transparent); }
.translation-add-language > label { grid-column: 1 / -1; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.translation-add-language > select { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); }
.translation-add-language .btn { min-width: 78px; min-height: 42px; }
.translation-language-grid { padding: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 10px; }
.translation-language-order-meta { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.translation-language-order-meta [data-language-sort-status] { color: var(--muted); font-size: 9.5px; font-weight: 750; }
.translation-language-order-meta [data-language-sort-status].is-error { color: var(--coral); }
.translation-language-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); transition: border-color .16s ease, background-color .16s ease, opacity .16s ease, transform .16s ease; }
.translation-language-card:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--tint-hover) 45%, var(--surface)); }
.translation-language-card.is-selected { border-color: color-mix(in srgb, var(--lime) 68%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 24%, transparent); }
.translation-language-card.is-inactive { opacity: .55; }
.translation-language-card.is-dragging { z-index: 2; opacity: .58; transform: scale(.985); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.translation-language-card.is-drop-target { border-color: var(--cyan); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cyan) 38%, transparent); }
.translation-language-card-head { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; }
.translation-language-card-head > a { min-width: 0; display: grid; grid-template-columns: 37px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: inherit; }
.translation-language-drag { width: 26px; height: 37px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: grab; touch-action: none; }
.translation-language-drag:hover, .translation-language-drag:focus-visible { background: var(--tint-chip); color: var(--ink); outline: 0; }
.translation-language-drag:active { cursor: grabbing; }
.translation-language-drag svg { width: 17px; height: 17px; pointer-events: none; }
.translation-language-code { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; background: var(--tint-chip); color: var(--lime); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.translation-language-card h3 { margin: 0; overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.translation-language-card p { margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.translation-language-card-head > a > strong { color: var(--ink-soft); font-size: 12px; }
.translation-progress { height: 4px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: var(--tint-chip); }
.translation-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--lime), var(--cyan)); }
.translation-language-card footer { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.translation-language-card footer > span { overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.translation-language-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.translation-language-actions form { margin: 0; }
.translation-workspace { padding: 0; overflow: clip; }
.translation-workspace-head { padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.translation-workspace-head h2 { margin: 3px 0 0; color: var(--ink); font-size: 20px; }
.translation-workspace-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.translation-workspace-head .ops-actions { align-items: center; }
.translation-workspace-head .ops-actions form { margin: 0; display: flex; }
.translation-workspace-head .ops-actions .btn { height: 42px; min-height: 42px; padding: 0 16px; line-height: 1; }
.translation-workspace-head .ops-actions .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.translation-filter { padding: 12px 20px; display: grid; grid-template-columns: minmax(220px, 1fr) 165px auto; gap: 8px; border-bottom: 1px solid var(--line); background: var(--surface); }
.translation-filter .form-control { min-height: 42px; }
.translation-search-field { position: relative; display: block; }
.translation-search-field > svg { position: absolute; z-index: 1; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.translation-search-field input { width: 100%; padding-left: 38px; }
.translation-result-meta { padding: 9px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.translation-result-meta b { color: var(--ink); }
.translation-list { display: grid; }
.translation-row { padding: 17px 20px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(310px, 1.1fr); gap: 20px; border-bottom: 1px solid var(--line); }
.translation-row.status-needs_review { background: color-mix(in srgb, #f0b429 4%, transparent); }
.translation-row.status-stale { background: color-mix(in srgb, var(--coral) 4%, transparent); }
.translation-key-line { display: flex; align-items: center; gap: 8px; }
.translation-key-line code { min-width: 0; overflow: hidden; color: var(--cyan); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.translation-status { flex: 0 0 auto; padding: 3px 6px; border-radius: 999px; background: var(--tint-chip); color: var(--muted); font-size: 8px; font-weight: 900; }
.status-needs_review .translation-status { background: rgba(240,180,41,.13); color: #c28a0f; }
.status-stale .translation-status { background: rgba(255,111,97,.12); color: var(--coral); }
.status-approved .translation-status { background: color-mix(in srgb, var(--lime) 12%, transparent); color: var(--lime); }
.translation-source p { margin: 8px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.translation-source > small { margin-top: 7px; display: block; color: var(--muted); font-size: 9px; }
.translation-value-form { display: grid; gap: 7px; }
.translation-value-form textarea { min-height: 76px; resize: vertical; font-size: 12px; line-height: 1.5; }
.translation-value-form > div { display: flex; justify-content: flex-end; gap: 6px; }
.translation-pagination { padding: 14px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--tint-chip) 34%, var(--surface)); }
.translation-page-numbers { display: flex; align-items: center; justify-content: center; gap: 5px; }
.translation-page-arrow, .translation-page-number, .translation-page-gap { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); font-size: 11px; font-weight: 850; }
.translation-page-arrow > svg { width: 15px; height: 15px; }
.translation-page-arrow:hover, .translation-page-number:hover { border-color: var(--line-strong); background: var(--tint-hover); }
.translation-page-number.is-current { border-color: var(--lime); background: var(--lime); color: #071000; }
.translation-page-arrow.is-disabled { opacity: .32; }
.translation-page-gap { border-color: transparent; color: var(--muted); }
.translation-empty-workspace { min-height: 172px; margin: 0; padding: 28px; display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--muted); text-align: left; }
.translation-empty-workspace > span { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; background: color-mix(in srgb, var(--lime) 11%, transparent); color: var(--lime); }
.translation-empty-workspace > span svg { width: 23px; height: 23px; }
.translation-empty-workspace h2 { margin: 0; color: var(--ink); font-size: 17px; }
.translation-empty-workspace p { margin: 5px 0 0; font-size: 11px; line-height: 1.55; }
.translation-jobs-aside { position: sticky; top: 18px; align-self: start; max-height: calc(100dvh - 36px); overflow-y: auto; scrollbar-width: thin; }
.translation-jobs-panel { margin: 0; padding: 0; overflow: hidden; }
.translation-jobs-panel .panel-head { padding: 18px; }
.translation-jobs-panel .panel-head h2 { font-size: 16px; }
.translation-job-list { display: grid; border-top: 1px solid var(--line); }
.translation-job-card { padding: 14px 16px; display: grid; gap: 7px; border-bottom: 1px solid var(--line); }
.translation-job-card:last-child { border-bottom: 0; }
.translation-job-card.status-failed { background: color-mix(in srgb, var(--coral) 5%, transparent); }
.translation-job-card.status-running, .translation-job-card.status-pending { background: color-mix(in srgb, var(--lime) 4%, transparent); }
.translation-job-top, .translation-job-card p { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.translation-job-top time { color: var(--muted); font-size: 9.5px; }
.translation-job-card h3 { margin: 0; color: var(--ink); font-size: 13px; }
.translation-job-card p { margin: 0; color: var(--muted); font-size: 9px; }
.translation-job-progress { height: 4px; overflow: hidden; border-radius: 99px; background: var(--tint-chip); }
.translation-job-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime), var(--cyan)); }
.translation-job-card small { padding-top: 6px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 8.5px; line-height: 1.45; overflow-wrap: anywhere; }
.translation-job-empty { min-height: 190px; padding: 26px 20px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
.translation-job-empty > svg { width: 24px; height: 24px; color: var(--lime); }
.translation-job-empty b { color: var(--ink-soft); font-size: 12px; }
.translation-job-empty span { max-width: 220px; font-size: 9.5px; line-height: 1.5; }

/* Select2 — 관리자 언어 검색 */
.translation-add-language .select2-container { min-width: 0; }
.translation-add-language .select2-container .select2-selection--single { height: 42px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.translation-add-language .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 42px 0 13px; color: var(--ink); font-size: 12px; line-height: 40px; }
.translation-add-language .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.translation-add-language .select2-container--default .select2-selection--single .select2-selection__arrow { top: 8px; right: 8px; }
.translation-add-language .select2-container--default.select2-container--focus .select2-selection--single,
.translation-add-language .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 15%, transparent); }
.select2-dropdown { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); color: var(--ink); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.select2-container--default .select2-search--dropdown .select2-search__field { min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); outline: 0; }
.select2-container--default .select2-results__option { padding: 9px 11px; font-size: 11px; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--lime); color: #071000; }
.select2-container--default .select2-results__option--selected { background: var(--tint-chip); }

@media (max-width: 1180px) {
    .translation-manage-layout { grid-template-columns: 1fr; }
    .translation-jobs-aside { position: static; order: -1; max-height: none; overflow: visible; }
    .translation-job-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .translation-job-card { border-right: 1px solid var(--line); }
}
@media (max-width: 980px) {
    .translation-row { grid-template-columns: 1fr; gap: 12px; }
    .translation-job-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .translation-loading-screen { padding: 14px; }
    .translation-loading-card { padding: 28px 20px; border-radius: 20px; }
    .translation-language-grid, .translation-job-list { grid-template-columns: 1fr; }
    .translation-languages-panel > .panel-head { align-items: flex-start; }
    .translation-language-order-meta { align-items: flex-end; flex-direction: column-reverse; }
    .translation-add-language { grid-template-columns: 1fr; }
    .translation-add-language .btn { width: 100%; }
    .translation-workspace-head { align-items: flex-start; flex-direction: column; }
    .translation-filter { grid-template-columns: 1fr; }
    .translation-row { padding: 15px; }
    .translation-empty-workspace { align-items: center; flex-direction: column; text-align: center; }
    .translation-page-numbers .translation-page-number:not(.is-current), .translation-page-gap { display: none; }
}

/* 공지 리스트 — 테이블 */
.notice-list-panel { overflow: hidden; }
.notice-list-head-meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.notice-list-head-meta small { color: var(--muted); font-size: 9.5px; font-weight: 750; }
.notice-list-head-meta small.is-error { color: var(--coral); }
.notice-order-head, .notice-td-order { width: 52px; min-width: 52px; text-align: center !important; }
.notice-td-order > span { color: var(--muted); }
.notice-drag { width: 30px; height: 34px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: grab; }
.notice-drag:hover, .notice-drag:focus-visible { background: var(--tint-hover); color: var(--ink); outline: 0; }
.notice-drag:active { cursor: grabbing; }
.notice-drag svg { width: 17px; height: 17px; }
.notice-tr.is-dragging td { opacity: .42; background: color-mix(in srgb, var(--lime) 8%, var(--surface)); }
.notice-table .notice-td-title { min-width: 240px; }
.notice-table .notice-td-title .t-strong { display: flex; align-items: center; gap: 9px; }
.notice-tr { --nc: var(--muted); }
.notice-tr.cat-general { --nc: var(--cyan); }
.notice-tr.cat-urgent { --nc: var(--coral); }
.notice-tr.cat-transport { --nc: var(--magenta); }
.notice-tr.cat-weather { --nc: #f0b429; }
.notice-tr.cat-program { --nc: var(--lime); }
.notice-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--nc); }
.notice-table .t-sub { margin-top: 3px; max-width: 340px; }
.notice-table .t-sub-strong { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.notice-td-period { color: var(--muted); font-size: 11.5px; line-height: 1.5; white-space: nowrap; }
.notice-td-empty { padding: 42px 20px !important; color: var(--muted); text-align: center; }
.notice-row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.notice-row-actions form { display: contents; }
.notice-row-actions .mini-btn { min-width: 62px; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.notice-delete-modal { width: min(460px, calc(100vw - 32px)); }
.notice-delete-body { display: grid; gap: 22px; }
.notice-delete-body p { margin: 0; display: grid; gap: 7px; }
.notice-delete-body p strong { color: var(--ink); font-size: 16px; overflow-wrap: anywhere; }
.notice-delete-body p span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.notice-delete-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-coral { border-color: color-mix(in srgb, var(--coral) 65%, var(--line)); background: color-mix(in srgb, var(--coral) 12%, var(--surface)); color: var(--coral); }
.btn-coral:hover { border-color: var(--coral); background: var(--coral); color: #fff; }
.notice-live-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--lime) 14%, transparent); color: color-mix(in srgb, var(--lime) 60%, var(--ink)); font-size: 9.5px; font-weight: 900; white-space: nowrap; }
.notice-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px color-mix(in srgb, var(--lime) 80%, transparent); animation: notice-live-pulse 1.8s ease-in-out infinite; }
@keyframes notice-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* 작성/수정 — 전용 페이지 */
.notice-write-panel { overflow: hidden; }
.notice-editor-form, .notice-editor-form label { display: flex; flex-direction: column; gap: 7px; }
.notice-editor-form { gap: 18px; padding: 26px; }
.notice-editor-form .form-control:focus { border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 18%, transparent); outline: 0; }
.notice-editor-form textarea.form-control { min-height: 130px; resize: vertical; }
.notice-editor-form label > span { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 800; }
.notice-editor-form label > span small { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.notice-editor-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.notice-editor-row.three { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 12px; }
.notice-auto-translation { padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--cyan) 6%, transparent); }
.notice-auto-translation > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cyan); }
.notice-auto-translation > span { min-width: 0; display: grid; gap: 3px; }
.notice-auto-translation b { color: var(--ink); font-size: 12px; }
.notice-auto-translation small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.notice-write-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.notice-write-foot .btn { flex: 0 0 auto; padding: 14px 34px; }
.notice-publish-row { padding: 12px 14px; flex-direction: row !important; align-items: center; border: 1px solid var(--line); border-radius: 12px; }
.notice-publish-check { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--lime); }
.notice-publish-row > span { display: flex; flex-direction: column; }
.notice-publish-row b { font-size: 12.5px; }
.notice-publish-row small { color: var(--muted); font-size: 10.5px; }

@media (max-width: 640px) {
    .notice-manage-kpis { grid-template-columns: repeat(3, 1fr); }
    .notice-editor-row.two, .notice-editor-row.three { grid-template-columns: 1fr; }
    .notice-write-foot { flex-direction: column; align-items: stretch; }
    .notice-list-head-meta { align-items: flex-end; flex-direction: column-reverse; }
}

/* ---------- best dresser recommendation feed ---------- */
.vote-feed-hero .shell { display: flex; flex-direction: column; gap: 18px; }
.vote-feed-hero .accent { font-size: 0.72em; }
.vote-feed-section { padding-top: 34px; }
.vote-feed-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 14px; }
.vote-feed-meta > div { display: flex; align-items: baseline; gap: 7px; }
.vote-feed-meta b { color: var(--magenta); font-family: var(--font-display); font-size: 25px; }
.vote-feed-meta span { color: var(--muted); font-size: 13px; font-weight: 700; }
.vote-feed-meta b [data-vote-mine] { color: inherit; font: inherit; }
.vote-guest-note { display: flex; align-items: flex-start; gap: 9px; max-width: 720px; margin-bottom: 20px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.vote-guest-note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--magenta); }
.vote-feed-tools { display: flex; gap: 10px; margin-bottom: 24px; }
.vote-search { position: relative; flex: 1; max-width: 480px; }
.vote-search svg { position: absolute; z-index: 1; left: 15px; top: 50%; width: 17px; transform: translateY(-50%); color: var(--muted); }
.vote-search input { padding-left: 43px; }
.vote-sort { width: 118px; flex: 0 0 auto; }
.vote-feed-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vote-post { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.vote-post.recommended { border-color: color-mix(in srgb, var(--magenta) 58%, var(--line)); }
.vote-post-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-raise); }
.vote-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.vote-post:hover .vote-post-media img { transform: scale(1.025); }
.vote-photo-placeholder {
    width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: radial-gradient(circle at 70% 15%, color-mix(in srgb, var(--magenta) 24%, transparent), transparent 42%), var(--bg-raise);
}
.vote-photo-placeholder span { font-size: clamp(38px, 6vw, 64px); }
.vote-photo-placeholder small { color: var(--muted); font-family: var(--font-display); font-size: 10px; letter-spacing: 0.12em; }
.vote-post-body { display: flex; flex-direction: column; gap: 15px; padding: 16px; }
.vote-post-copy { min-width: 0; }
.vote-post-copy .v-theme { color: var(--magenta); font-size: 11.5px; font-weight: 800; }
.vote-post-copy h2 { margin-top: 3px; font-size: 18px; overflow-wrap: anywhere; }
.vote-post-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.vote-recommend-btn {
    width: 100%; min-height: 42px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
    padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; color: var(--ink-soft); font-weight: 800;
}
.vote-recommend-btn svg { width: 17px; }
.vote-recommend-btn b { color: var(--muted); font-size: 12px; }
.vote-recommend-btn:disabled { opacity: .62; cursor: wait; }
.vote-post.recommended .vote-recommend-btn { border-color: var(--magenta); color: var(--magenta); background: color-mix(in srgb, var(--magenta) 8%, transparent); }
.vote-post.recommended .vote-recommend-btn svg { fill: currentColor; }
.vote-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; }
.vote-pagination span { color: var(--muted); font-size: 13px; font-weight: 800; }
.vote-feed-empty { min-height: clamp(280px, 48vh, 440px); padding: 40px 20px; display: grid; place-content: center; justify-items: center; gap: 5px; color: var(--muted); text-align: center; }
.vote-feed-empty strong { color: var(--ink-soft); font-family: var(--font-display); font-size: 21px; letter-spacing: -.025em; }
.vote-feed-empty p { margin: 0; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 1100px) { .vote-feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .vote-feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 480px) {
    .vote-feed-tools { flex-wrap: wrap; }
    .vote-search { flex-basis: 100%; max-width: none; }
    .vote-feed-tools .btn { flex: 1; }
    .vote-post-body { padding: 12px; }
    .vote-post-copy h2 { font-size: 16px; }
    .vote-recommend-btn { font-size: 12.5px; }
}

/* ---------- stamps ---------- */
.stamp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stamp-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); padding: 22px; position: relative;
    display: flex; flex-direction: column; gap: 8px;
}
.stamp-card .s-emoji { font-size: 30px; }
.stamp-card .s-title { font-weight: 800; font-size: 16px; }
.stamp-card .s-desc { color: var(--muted); font-size: 13.5px; flex: 1; }
.stamp-card .s-state { font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stamp-card.done { border-color: rgba(216, 255, 58, 0.55); }
.stamp-card.done .s-state { color: var(--lime); }
.stamp-card.done::after {
    content: '✓'; position: absolute; top: 16px; right: 18px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--lime); color: var(--on-lime);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; transform: rotate(-8deg);
}
.stamp-form-btn { background: transparent; border: 0; padding: 0; text-align: left; width: 100%; }

/* ---------- stamp seal map ---------- */
.stamp-map {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: clamp(20px, 3.4vw, 40px) clamp(16px, 3vw, 36px);
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid var(--line); border-radius: var(--radius);
    background:
        radial-gradient(60% 90% at 90% 0%, rgba(139, 123, 255, 0.07), transparent 60%),
        var(--surface);
}
.seal { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 108px; text-align: center; }
.seal .seal-face {
    width: 92px; height: 92px; border-radius: 50%;
    border: 2.5px dashed var(--line-strong);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); background: var(--bg-raise);
    transition: 0.25s;
}
.seal .seal-face svg { width: 25px; height: 25px; }
.seal .seal-no {
    font-family: var(--font-display); font-weight: 900; font-size: 9.5px;
    letter-spacing: 0.2em; opacity: 0.8;
}
.seal .seal-title { font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.35; }
.seal.done .seal-face {
    border: 3px solid var(--lime); color: var(--lime);
    background: rgba(216, 255, 58, 0.09);
    outline: 2px solid rgba(216, 255, 58, 0.35); outline-offset: 3px;
    box-shadow: 0 0 24px rgba(216, 255, 58, 0.18);
}
.seal.done .seal-title { color: var(--ink); }
.seal.done:nth-child(odd) .seal-face { transform: rotate(-8deg); }
.seal.done:nth-child(even) .seal-face { transform: rotate(6deg); }
.seal.done:nth-child(3n) .seal-face { transform: rotate(-4deg); }
.seal .seal-face:hover { border-color: var(--lime); color: var(--lime); }
/* ── 원형 실링 스탬프 (성주 스탬프투어 무드) ── */
.stamp-map.seal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; padding: clamp(20px, 4vw, 34px); }
.seal-grid .ring-seal { position: relative; width: 100%; aspect-ratio: 1; display: block; --seal-ink: var(--muted); transition: transform .3s ease; }
.seal-grid .ring-seal > .seal-ring-svg { width: 100%; height: 100%; display: block; }
.ring-seal .ring-outer { fill: none; stroke: var(--seal-ink); stroke-width: 3.5; }
.ring-seal .ring-mid { fill: none; stroke: var(--seal-ink); stroke-width: 1; opacity: .55; }
.ring-seal .ring-inner { fill: none; stroke: var(--seal-ink); stroke-width: 1.4; }
.ring-seal .ring-text { fill: var(--seal-ink); font-family: var(--font-display); font-size: 14px; font-weight: 900; letter-spacing: .3em; text-transform: uppercase; }
.ring-seal .ring-text-en { font-size: 10.5px; letter-spacing: .34em; opacity: .8; }
.ring-seal .seal-core { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--seal-ink); text-align: center; }
.ring-seal .seal-core svg { width: clamp(30px, 10vw, 42px); height: clamp(30px, 10vw, 42px); stroke-width: 1.6; }
.ring-seal .seal-core b { font-family: var(--font-display); font-size: 9.5px; font-weight: 900; letter-spacing: .26em; }
.ring-seal:not(.done) { opacity: .42; }
.ring-seal:not(.done) .ring-outer { stroke-dasharray: 2 9; stroke-linecap: round; }
.ring-seal.done .seal-ring-svg { filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--seal-ink) 18%, transparent)); }
.ring-seal.done .ring-outer { stroke-width: 4.8; opacity: .94; }
.ring-seal.done .ring-mid {
    fill: color-mix(in srgb, var(--seal-ink) 14%, transparent);
    stroke-width: 1.8; opacity: .9;
}
.ring-seal.done .ring-inner {
    fill: color-mix(in srgb, var(--seal-ink) 11%, transparent);
    stroke-width: 2.2; opacity: .92;
}
.ring-seal.done .seal-core svg { stroke-width: 2.05; filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--seal-ink) 32%, transparent)); }
.ring-seal.done .seal-core b { text-shadow: 0 1px 0 color-mix(in srgb, var(--seal-ink) 22%, transparent); }
.seal-grid .ring-seal.done:nth-child(6n+1) { --seal-ink: #c69133; }
.seal-grid .ring-seal.done:nth-child(6n+2) { --seal-ink: #7ba456; }
.seal-grid .ring-seal.done:nth-child(6n+3) { --seal-ink: #6f9fd8; }
.seal-grid .ring-seal.done:nth-child(6n+4) { --seal-ink: #a678d1; }
.seal-grid .ring-seal.done:nth-child(6n+5) { --seal-ink: #55997b; }
.seal-grid .ring-seal.done:nth-child(6n) { --seal-ink: #e09a44; }
html[data-theme="light"] .seal-grid .ring-seal.done:nth-child(6n+1) { --seal-ink: #a3761f; }
html[data-theme="light"] .seal-grid .ring-seal.done:nth-child(6n+2) { --seal-ink: #5e8a3a; }
html[data-theme="light"] .seal-grid .ring-seal.done:nth-child(6n+3) { --seal-ink: #4b7fb3; }
html[data-theme="light"] .seal-grid .ring-seal.done:nth-child(6n+4) { --seal-ink: #8557b5; }
html[data-theme="light"] .seal-grid .ring-seal.done:nth-child(6n+5) { --seal-ink: #35785c; }
html[data-theme="light"] .seal-grid .ring-seal.done:nth-child(6n) { --seal-ink: #c47f27; }
.ring-seal.done:nth-child(odd) { transform: rotate(-5deg); }
.ring-seal.done:nth-child(even) { transform: rotate(4deg); }
@media (min-width: 760px) { .stamp-map.seal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 패스 런처 내부는 뷰포트 폭과 무관하게 모바일과 동일 — 2열·고정 패딩 */
.pass-launcher .stamp-map.seal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 4px 22px; }

.stamp-admin-section { padding-top: calc(var(--header-h) + clamp(28px, 5vw, 64px)); }
.admin-stamp-toolbar { margin-bottom: 22px; }
.admin-stamp-toolbar .kicker { margin-bottom: 8px; }
.admin-stamp-workspace {
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr);
    gap: 20px; align-items: start;
}
.admin-stamp-panel, .admin-stamp-participant { overflow: hidden; }
.admin-stamp-panel-title { min-width: 0; }
.admin-stamp-panel-title p { margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.admin-stamp-completion {
    color: var(--lime); font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px);
    font-weight: 900; line-height: 1;
}
.admin-stamp-panel-body { display: flex; flex-direction: column; gap: 18px; }
.admin-stamp-progress { width: 100%; }
.stamp-admin-guide {
    margin: 0; padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--lime) 32%, var(--line));
    border-radius: var(--radius-sm); background: color-mix(in srgb, var(--lime) 6%, var(--surface));
    color: var(--muted); font-size: 13.5px; line-height: 1.55;
}
.stamp-admin-guide.is-error { border-color: color-mix(in srgb, var(--coral) 45%, var(--line)); color: var(--coral); background: color-mix(in srgb, var(--coral) 6%, var(--surface)); }
.admin-stamp-map {
    justify-content: center; min-height: 260px; padding: 22px 4px 8px;
    border: 0; border-radius: 0; background: transparent;
}
.stamp-seal-form { margin: 0; }
.stamp-seal-button {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 100%; padding: 0; border: 0; background: transparent;
    color: inherit; font: inherit; text-align: center; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.stamp-seal-button:focus-visible { outline: 2px solid var(--lime); outline-offset: 8px; border-radius: 8px; }
.stamp-seal-button:disabled { cursor: wait; opacity: 0.58; }
.admin-stamp-participant { position: sticky; top: calc(var(--header-h) + 18px); }
.admin-stamp-participant-body { display: flex; flex-direction: column; gap: 22px; }
.admin-stamp-identity { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.admin-stamp-code {
    color: var(--lime); font-family: var(--font-display); font-size: 12px;
    font-weight: 900; letter-spacing: .12em;
}
.admin-stamp-identity strong { display: block; margin-top: 5px; font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); line-height: 1.05; }
.admin-stamp-identity p { margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.admin-stamp-meta { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.admin-stamp-participant-actions { display: grid; gap: 9px; }
.admin-stamp-participant-actions .btn { width: 100%; }

@media (max-width: 980px) {
    .admin-stamp-workspace { grid-template-columns: 1fr; }
    .admin-stamp-participant { position: static; order: -1; }
    .admin-stamp-participant-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); align-items: center; }
    .admin-stamp-identity { padding: 0 20px 0 0; border-right: 1px solid var(--line); border-bottom: 0; }
    .admin-stamp-meta { padding: 0; border-bottom: 0; }
    .admin-stamp-participant-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .admin-stamp-toolbar .ops-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .admin-stamp-participant-body { display: flex; align-items: stretch; }
    .admin-stamp-identity { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--line); }
    .admin-stamp-meta { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
    .admin-stamp-participant-actions { grid-template-columns: 1fr; }
    .admin-stamp-map { gap: 26px 14px; padding: 22px 14px; }
    .admin-stamp-map .seal { width: calc(33.333% - 10px); min-width: 82px; }
    .admin-stamp-map .seal-face { width: 82px; height: 82px; }
}

/* verification code input */
.code-input {
    font-family: var(--font-display); font-weight: 900;
    font-size: 30px; letter-spacing: 0.4em; text-align: center;
}

/* my page ticket (compact) */
.my-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 1080px) {
    .my-grid { grid-template-columns: 1fr; }
    .my-grid .pass-wrap { order: -1; margin: 0; }
}

/* my page — mobile-first action hub */
.my-page-shell { max-width: 940px; display: flex; flex-direction: column; gap: 24px; }
.my-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.my-page-head .display { margin-top: 10px; font-size: clamp(32px, 7vw, 58px); }
.my-summary-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); overflow: hidden;
}
.my-summary-top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.my-summary-top h2 { margin-top: 3px; font-size: 20px; }
.my-summary-code {
    font-family: var(--font-display); font-weight: 900; font-size: 12px;
    letter-spacing: 0.1em; color: var(--lime);
}
.my-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.my-summary-grid > div { padding: 18px 20px; min-width: 0; }
.my-summary-grid > div + div { border-left: 1px solid var(--line); }
.my-summary-grid dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.my-summary-grid dd { margin: 4px 0 0; font-weight: 800; overflow-wrap: anywhere; }
/* big QR as its own row between the header and the info grid (layout unchanged) */
.my-summary-qr-row {
    display: flex; flex-direction: column; align-items: center;
    padding: clamp(16px, 3vw, 24px); border-bottom: 1px solid var(--line);
}
.my-summary-qr-row .qr-box {
    width: min(480px, 100%); background: #fff; border-radius: var(--radius);
    padding: clamp(14px, 2.2vw, 20px); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.my-summary-qr-row .qr-box img { width: 100%; aspect-ratio: 1; }
.my-summary-qr-row .qr-box strong { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; color: #10130a; }
.my-summary-qr-hint { color: var(--muted); font-size: 13px; margin: 0; text-align: center; }
.my-actions-head { margin: 6px 0 14px; }
.my-actions-head h2 { font-size: 20px; }
.my-actions-head p { margin-top: 3px; color: var(--muted); font-size: 13px; }
.my-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.my-action-card {
    --action-accent: var(--lime);
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 12px; min-height: 104px; padding: 17px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); transition: transform 0.18s, border-color 0.18s;
    width: 100%; color: var(--ink); text-align: left; appearance: none;
}
.my-action-card:hover { transform: translateY(-2px); border-color: var(--action-accent); }
.my-action-card.stamp { --action-accent: var(--cyan); }
.my-action-card.vote { --action-accent: var(--magenta); }
.my-action-card.finish { --action-accent: var(--coral); }
.my-action-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 9px;
    color: var(--action-accent); background: color-mix(in srgb, var(--action-accent) 11%, transparent);
}
.my-action-icon svg { width: 19px; height: 19px; }
.my-action-card > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.my-action-card b { font-size: 15px; }
.my-action-card small { margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.my-action-arrow { width: 16px; color: var(--muted); }
.my-action-card.disabled { opacity: 0.48; cursor: not-allowed; }
.my-action-card.disabled:hover { transform: none; border-color: var(--line); }

/* my page quick-view dialogs */
body.my-modal-open { overflow: hidden; }
.my-modal {
    width: min(720px, calc(100vw - 32px)); max-height: min(820px, calc(100dvh - 32px));
    padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop);
    overflow: hidden;
}
.my-modal[open] { display: flex; flex-direction: column; }
.my-modal::backdrop { background: rgba(5, 7, 10, 0.72); backdrop-filter: blur(5px); }
.my-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.my-modal-head h2 { margin-top: 2px; font-size: 21px; }
.my-modal-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 9px;
    border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
}
.my-modal-close:hover { border-color: var(--ink); color: var(--ink); }
.my-modal-close svg { width: 19px; height: 19px; }
.my-modal-body { padding: 20px; overflow-y: auto; }
.qr-modal-body { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.my-qr-owner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.my-qr-owner > div { display: flex; flex-direction: column; }
.my-qr-owner b { font-size: 20px; }
.my-qr-owner span:not(.pill) { color: var(--muted); font-size: 13px; }
.my-qr-code {
    width: min(380px, 100%); padding: clamp(18px, 5vw, 30px);
    border-radius: var(--radius); background: #fff; color: #10130a;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.my-qr-code img { width: 100%; aspect-ratio: 1; }
.my-qr-code strong { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.12em; }
.qr-modal-body > p,
.my-modal-note { color: var(--muted); font-size: 13px; text-align: center; }
.stamp-modal { width: min(820px, calc(100vw - 32px)); }
.stamp-modal .progress { margin-bottom: 18px; }
.stamp-modal .stamp-map { justify-content: center; }
.stamp-modal .my-modal-note { margin-top: 16px; }
@media (max-width: 1050px) {
    .my-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .my-page { padding-top: calc(var(--header-h) + 22px) !important; }
    .my-page-shell { gap: 20px; }
    .my-page-head { align-items: center; }
    .my-summary-top { padding: 17px 18px; }
    .my-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .my-summary-grid > div { padding: 13px 10px; }
    .my-summary-grid > div + div { border-left: 1px solid var(--line); }
    .my-summary-grid dt { font-size: 10px; }
    .my-summary-grid dd { font-size: 13px; }
    .my-action-grid { grid-template-columns: 1fr; }
    .my-action-card { min-height: 96px; padding: 16px; gap: 11px; }
    .my-action-icon { width: 38px; height: 38px; }
    .my-action-arrow { display: none; }
    .my-modal {
        width: 100%; max-width: none; max-height: 91dvh; margin: auto 0 0;
        border-radius: 20px 20px 0 0; border-width: 1px 0 0;
    }
    .my-modal-head { padding: 16px 18px; }
    .my-modal-body { padding: 18px; }
    .my-qr-code { width: min(72vw, 330px); }
}

/* ---------- WTR camera (native full-screen) ---------- */
body.photo-studio-body {
    min-height: 100vh; min-height: 100dvh; overflow: hidden; overscroll-behavior: none;
    background: #000; color: #fff;
}
.photo-studio-body > .topbar,
.photo-studio-body > .mobile-menu,
.photo-studio-body > .noise,
.photo-studio-body > .footer { display: none !important; }
.photo-studio-body main { height: 100vh; height: 100svh; overflow: hidden; }
/* toast lives inside the camera stage (reparented in initPhotoStudio) — id selector needed to beat #toast */
.cam-stage #toast {
    position: absolute; bottom: 16px; z-index: 40;
    max-width: calc(100% - 32px); padding: 9px 16px;
    background: rgba(16, 17, 21, .62); color: #fff;
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wtr-cam-page { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; background: #000; }
.cam-app {
    --cam-accent: #d8ff3a; --cam-cyan: #67e8ff; --cam-pink: #ff4fa0;
    --cam-glass: rgba(16, 17, 21, .44); --cam-glass-line: rgba(255, 255, 255, .14);
    position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto;
    width: min(100%, 520px); min-width: 0; max-width: 100%; height: 100%; overflow: hidden;
    background: #000; color: #fff; isolation: isolate;
    font-family: var(--font-body); -webkit-tap-highlight-color: transparent;
}
.cam-app button, .cam-app label, .cam-app a {
    appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: none;
    color: inherit; font: inherit; text-decoration: none; touch-action: manipulation;
}
.cam-app button:focus-visible, .cam-app label:focus-within, .cam-app a:focus-visible { outline: 2px solid var(--cam-accent); outline-offset: 2px; border-radius: 14px; }
.cam-app [hidden] { display: none !important; }

/* ----- stage ----- */
.cam-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0b0c0f; isolation: isolate; touch-action: none; }
.cam-stage > video, .cam-stage > img {
    position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover;
    background: #0b0c0f; transition: filter .22s ease, opacity .18s ease;
}
.cam-stage[data-mirror='true'] > video { transform: scaleX(-1); }
.cam-stage.has-photo > video { opacity: 0; }
.cam-stage[data-filter='warm'] > img { filter: sepia(.22) saturate(1.28) contrast(1.02) brightness(1.03); }
.cam-stage[data-filter='pop'] > img { filter: saturate(1.6) contrast(1.12) brightness(1.04); }
.cam-stage[data-filter='seoul'] > img { filter: saturate(1.28) hue-rotate(-8deg) contrast(1.06) brightness(1.02); }
.cam-stage[data-filter='film'] > img { filter: sepia(.32) saturate(.9) contrast(1.12) brightness(.97); }
.cam-stage[data-filter='mono'] > img { filter: grayscale(1) contrast(1.12); }
.cam-stage[data-filter='fresh'] > img { filter: saturate(1.18) hue-rotate(-5deg) brightness(1.07) contrast(1.02); }
.cam-stage[data-filter='sunset'] > img { filter: sepia(.28) saturate(1.42) hue-rotate(-14deg) contrast(1.06); }
.cam-stage[data-filter='pale'] > img { filter: saturate(.76) brightness(1.09) contrast(.92); }
.cam-stage[data-filter='drama'] > img { filter: contrast(1.3) saturate(1.02) brightness(.95); }
.cam-stage[data-filter='neon'] > img { filter: saturate(1.55) contrast(1.2) brightness(.93) hue-rotate(6deg); }

/* live-preview filter via backdrop overlay (direct CSS filter on camera <video> renders black on iOS Safari) */
.cam-filter-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; transition: -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease; }
.cam-stage.has-photo .cam-filter-layer { display: none; }
.cam-stage[data-filter='warm'] .cam-filter-layer { -webkit-backdrop-filter: sepia(.22) saturate(1.28) contrast(1.02) brightness(1.03); backdrop-filter: sepia(.22) saturate(1.28) contrast(1.02) brightness(1.03); }
.cam-stage[data-filter='pop'] .cam-filter-layer { -webkit-backdrop-filter: saturate(1.6) contrast(1.12) brightness(1.04); backdrop-filter: saturate(1.6) contrast(1.12) brightness(1.04); }
.cam-stage[data-filter='seoul'] .cam-filter-layer { -webkit-backdrop-filter: saturate(1.28) hue-rotate(-8deg) contrast(1.06) brightness(1.02); backdrop-filter: saturate(1.28) hue-rotate(-8deg) contrast(1.06) brightness(1.02); }
.cam-stage[data-filter='film'] .cam-filter-layer { -webkit-backdrop-filter: sepia(.32) saturate(.9) contrast(1.12) brightness(.97); backdrop-filter: sepia(.32) saturate(.9) contrast(1.12) brightness(.97); }
.cam-stage[data-filter='mono'] .cam-filter-layer { -webkit-backdrop-filter: grayscale(1) contrast(1.12); backdrop-filter: grayscale(1) contrast(1.12); }
.cam-stage[data-filter='fresh'] .cam-filter-layer { -webkit-backdrop-filter: saturate(1.18) hue-rotate(-5deg) brightness(1.07) contrast(1.02); backdrop-filter: saturate(1.18) hue-rotate(-5deg) brightness(1.07) contrast(1.02); }
.cam-stage[data-filter='sunset'] .cam-filter-layer { -webkit-backdrop-filter: sepia(.28) saturate(1.42) hue-rotate(-14deg) contrast(1.06); backdrop-filter: sepia(.28) saturate(1.42) hue-rotate(-14deg) contrast(1.06); }
.cam-stage[data-filter='pale'] .cam-filter-layer { -webkit-backdrop-filter: saturate(.76) brightness(1.09) contrast(.92); backdrop-filter: saturate(.76) brightness(1.09) contrast(.92); }
.cam-stage[data-filter='drama'] .cam-filter-layer { -webkit-backdrop-filter: contrast(1.3) saturate(1.02) brightness(.95); backdrop-filter: contrast(1.3) saturate(1.02) brightness(.95); }
.cam-stage[data-filter='neon'] .cam-filter-layer { -webkit-backdrop-filter: saturate(1.55) contrast(1.2) brightness(.93) hue-rotate(6deg); backdrop-filter: saturate(1.55) contrast(1.2) brightness(.93) hue-rotate(6deg); }
@supports not ((-webkit-backdrop-filter: sepia(1)) or (backdrop-filter: sepia(1))) {
    .cam-stage[data-filter='warm'] > video { filter: sepia(.22) saturate(1.28) contrast(1.02) brightness(1.03); }
    .cam-stage[data-filter='pop'] > video { filter: saturate(1.6) contrast(1.12) brightness(1.04); }
    .cam-stage[data-filter='seoul'] > video { filter: saturate(1.28) hue-rotate(-8deg) contrast(1.06) brightness(1.02); }
    .cam-stage[data-filter='film'] > video { filter: sepia(.32) saturate(.9) contrast(1.12) brightness(.97); }
    .cam-stage[data-filter='mono'] > video { filter: grayscale(1) contrast(1.12); }
    .cam-stage[data-filter='fresh'] > video { filter: saturate(1.18) hue-rotate(-5deg) brightness(1.07) contrast(1.02); }
    .cam-stage[data-filter='sunset'] > video { filter: sepia(.28) saturate(1.42) hue-rotate(-14deg) contrast(1.06); }
    .cam-stage[data-filter='pale'] > video { filter: saturate(.76) brightness(1.09) contrast(.92); }
    .cam-stage[data-filter='drama'] > video { filter: contrast(1.3) saturate(1.02) brightness(.95); }
    .cam-stage[data-filter='neon'] > video { filter: saturate(1.55) contrast(1.2) brightness(.93) hue-rotate(6deg); }
}

/* Face-following 2D AR is rendered on canvas so preview and exported photos match. */
.cam-ar-layer {
    position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.cam-ar-status {
    position: absolute; z-index: 10; top: max(68px, calc(env(safe-area-inset-top) + 58px)); left: 50%;
    max-width: calc(100% - 32px); padding: 7px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
    background: rgba(10,11,15,.58); color: rgba(255,255,255,.88); font-size: 10px; font-weight: 850;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    transform: translateX(-50%); pointer-events: none;
}
.cam-ar-status.is-ready { color: #111; border-color: var(--cam-accent); background: rgba(216,255,58,.92); }

/* ----- start / permission gate ----- */
.cam-gate {
    position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 9px; padding: 36px; text-align: center; color: rgba(255,255,255,.6);
    background: radial-gradient(circle at 50% 28%, #1b1d23 0, #0a0b0e 62%, #050506 100%);
    transition: opacity .22s, visibility .22s;
}
.cam-stage.camera-on .cam-gate, .cam-stage.has-photo .cam-gate { opacity: 0; visibility: hidden; pointer-events: none; }
.cam-gate-lens { position: relative; display: grid; place-items: center; width: 86px; height: 86px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.04); }
.cam-gate-lens::before { content: ''; width: 48px; height: 48px; border: 2px solid rgba(255,255,255,.34); border-radius: 50%; }
.cam-gate-lens i { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--cam-accent); opacity: .8; filter: blur(6px); animation: cam-lens-pulse 2.4s ease-in-out infinite; }
@keyframes cam-lens-pulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.35); opacity: .45; } }
.cam-gate b { color: #fff; font-size: 16px; font-weight: 800; }
.cam-gate small { max-width: 270px; font-size: 11.5px; line-height: 1.6; white-space: pre-line; }
.cam-gate-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; }
.cam-gate-actions button, .cam-gate-actions label {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px;
    padding: 0 22px; border-radius: 999px; font-size: 13px; font-weight: 900; cursor: pointer;
}
.cam-gate-actions button { background: #fff; color: #0a0a0c; }
.cam-gate-actions label { color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.cam-gate-actions svg { width: 16px; height: 16px; }

/* ----- top overlay ----- */
.cam-top {
    position: absolute; z-index: 20; top: 0; right: 0; left: 0; display: flex; align-items: flex-start;
    justify-content: space-between; padding: calc(max(10px, env(safe-area-inset-top)) + 2px) max(14px, env(safe-area-inset-right)) 30px max(14px, env(safe-area-inset-left));
    background: linear-gradient(to bottom, rgba(0,0,0,.44), transparent); pointer-events: none;
}
.cam-top > *, .cam-top-group > * { pointer-events: auto; }
.cam-top-group { display: flex; gap: 6px; }
.cam-icon {
    position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--cam-glass); border: 1px solid var(--cam-glass-line);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    cursor: pointer; transition: background .18s, transform .18s, color .18s, border-color .18s;
}
.cam-icon:hover { background: rgba(255,255,255,.16); }
.cam-icon:active { transform: scale(.9); }
.cam-icon.active { color: #111; background: var(--cam-accent); border-color: var(--cam-accent); }
.cam-icon svg { width: 19px; height: 19px; }
.cam-icon > b {
    position: absolute; top: -3px; right: -3px; display: grid; place-items: center; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 999px; background: var(--cam-accent); color: #111; font-size: 9px; font-weight: 900;
}
.cam-app[data-photo-state='review'] .cam-top-group { display: none; }

/* ----- stage overlays ----- */
.cam-grid { position: absolute; z-index: 4; inset: 0; opacity: 0; pointer-events: none; transition: opacity .18s; }
.cam-stage.show-grid .cam-grid { opacity: 1; }
.cam-grid i { position: absolute; background: rgba(255,255,255,.26); }
.cam-grid i:nth-child(1), .cam-grid i:nth-child(2) { top: 0; bottom: 0; width: 1px; }
.cam-grid i:nth-child(1) { left: 33.333%; }
.cam-grid i:nth-child(2) { left: 66.666%; }
.cam-grid i:nth-child(3), .cam-grid i:nth-child(4) { right: 0; left: 0; height: 1px; }
.cam-grid i:nth-child(3) { top: 33.333%; }
.cam-grid i:nth-child(4) { top: 66.666%; }
.cam-zoom {
    position: absolute; z-index: 9; bottom: 16px; left: 50%; transform: translateX(-50%);
    padding: 4px 11px; border-radius: 999px; background: var(--cam-glass); border: 1px solid var(--cam-glass-line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    font-size: 11px; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.cam-zoom.show { opacity: 1; }
.cam-countdown {
    position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; pointer-events: none;
    color: #fff; font-family: var(--font-display); font-size: clamp(96px, 30vw, 150px); font-weight: 950;
    text-shadow: 0 6px 40px rgba(0,0,0,.6);
}
.cam-countdown.tick { animation: cam-count-pop .9s ease; }
@keyframes cam-count-pop { 0% { transform: scale(1.22); opacity: 0; } 18% { transform: scale(1); opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
.cam-flash { position: absolute; z-index: 30; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-stage.captured .cam-flash { animation: cam-flash .18s ease-out; }
@keyframes cam-flash { 0% { opacity: .92; } 100% { opacity: 0; } }

/* ----- frame overlays (preview) ----- */
.cam-frame { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.cf { display: none; position: absolute; inset: 0; overflow: hidden; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.cam-stage[data-frame='together'] .cf-together,
.cam-stage[data-frame='seoul'] .cf-seoul,
.cam-stage[data-frame='fun'] .cf-fun,
.cam-stage[data-frame='finisher'] .cf-finisher { display: block; }
.cf-custom { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.cf-custom img, .cf-custom-text { position: absolute; max-width: none; transform-origin: center; }
.cf-custom img { height: auto; }
.cf-custom-text {
    display: block; width: max-content; max-width: 96%; white-space: pre; text-wrap: nowrap;
    text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.cf::after { content: ''; position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 48%; background: linear-gradient(to top, rgba(0,0,0,.66), transparent); }
.cf-bl { position: absolute; right: 18px; bottom: 16px; left: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cf-bc { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.cf-spark, .cf-star { position: absolute; animation: cam-twinkle 2.6s ease-in-out infinite; }
.cf-spark.s2, .cf-star.st2 { animation-delay: .9s; }
.cf-spark.s3, .cf-star.st3 { animation-delay: 1.5s; }
.cf-spark.s4, .cf-star.st4 { animation-delay: .5s; }
.cf-star.st5 { animation-delay: 2s; }
@keyframes cam-twinkle { 0%, 100% { transform: scale(.78); opacity: .6; } 50% { transform: scale(1.12); opacity: 1; } }

/* ── 투게더 : RACE DAY ── */
.cf-tick { position: absolute; width: 22px; height: 22px; border: 2.5px solid var(--cam-accent); opacity: .95; }
.cf-tick.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.cf-tick.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.cf-tick.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.cf-tick.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.cf-bib { position: absolute; top: 56px; left: 18px; width: 92px; transform: rotate(-4deg); }
.cf-datepill {
    position: absolute; top: 64px; right: 16px; padding: 5px 11px; border-radius: 999px;
    background: rgba(10,10,14,.5); border: 1px solid rgba(255,255,255,.24);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; transform: rotate(3deg);
}
.cf-side {
    position: absolute; top: 34%; right: 11px; color: rgba(255,255,255,.62);
    writing-mode: vertical-rl; font-size: 9.5px; font-weight: 800; letter-spacing: .32em;
}
.cf-together .cf-spark.s1 { top: 30%; left: 5%; width: 34px; }
.cf-together .cf-spark.s2 { top: 42%; right: 6%; width: 26px; }
.cf-together .cf-spark.s3 { top: 17%; left: 43%; width: 21px; }
.cf-together .cf-bl::before { content: ''; width: 34px; height: 4px; background: var(--cam-accent); }
.cf-together small { color: var(--cam-accent); font-family: var(--font-display); font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.cf-together .cf-bl > b { color: #fff; font-family: var(--font-display); font-size: clamp(37px, 11.5vw, 54px); font-weight: 950; line-height: .9; letter-spacing: -.03em; }
.cf-together .cf-bl > span { color: rgba(255,255,255,.8); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.cf-together .cf-bl > em { color: var(--cam-accent); font-size: 11px; font-style: normal; font-weight: 900; letter-spacing: .04em; }

/* ── 서울 웨이브 : NIGHT WAVE ── */
.cf-neon { position: absolute; }
.cf-neon.outer { inset: 10px; border: 2px solid var(--cam-cyan); border-radius: 20px; box-shadow: 0 0 18px rgba(103,232,255,.5), inset 0 0 18px rgba(103,232,255,.22); }
.cf-neon.inner { inset: 17px; border: 1px solid rgba(103,232,255,.5); border-radius: 14px; }
.cf-toppill {
    position: absolute; top: 60px; left: 50%; padding: 5px 13px; border-radius: 999px;
    border: 1px solid rgba(103,232,255,.65); background: rgba(5,10,16,.45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--cam-cyan); font-size: 9.5px; font-weight: 900; letter-spacing: .22em; transform: translateX(-50%);
}
.cf-star.st1 { top: 16%; left: 10%; width: 34px; }
.cf-star.st2 { top: 25%; right: 12%; width: 24px; }
.cf-star.st3 { top: 38%; left: 21%; width: 19px; }
.cf-star.st4 { top: 20%; left: 34%; width: 14px; opacity: .8; }
.cf-star.st5 { top: 33%; right: 26%; width: 12px; opacity: .7; }
.cf-waves { position: absolute; right: 24px; bottom: 124px; left: 24px; height: 44px; filter: drop-shadow(0 0 8px rgba(103,232,255,.45)); animation: cam-wave 5s ease-in-out infinite alternate; }
@keyframes cam-wave { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
.cf-seoul .cf-bc { bottom: 24px; gap: 6px; }
.cf-seoul .cf-bc > b {
    font-family: var(--font-display); font-size: clamp(36px, 11vw, 50px); font-weight: 950; letter-spacing: -.02em; line-height: .92;
    background: linear-gradient(92deg, var(--cam-cyan), var(--cam-accent)); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 2px 12px rgba(0,0,0,.55));
}
.cf-seoul .cf-bc > span { color: rgba(255,255,255,.85); font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.cf-seoul .cf-owner { color: var(--cam-cyan); font-size: 11px; font-weight: 800; letter-spacing: .1em; }

/* ── 펀런 : STICKER BOMB ── */
.cf-tape {
    position: absolute; top: 52px; left: -6%; width: 112%; padding: 6px 0; overflow: hidden;
    background: var(--cam-pink); transform: rotate(-3deg); box-shadow: 0 6px 18px rgba(255,79,160,.4);
    white-space: nowrap; text-shadow: none;
}
.cf-tape span {
    display: inline-block; color: #fff; font-family: var(--font-display); font-size: 12px; font-weight: 950;
    letter-spacing: .18em; will-change: transform; animation: cf-tape-move 14s linear infinite;
}
@keyframes cf-tape-move { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }
.cf-emoji { position: absolute; }
.cf-emoji.e1 { top: 22%; right: 8%; width: 46px; transform: rotate(10deg); animation: cam-bob 3.4s ease-in-out infinite; }
.cf-emoji.e2 { top: 36%; left: 7%; width: 36px; transform: rotate(-12deg); animation: cam-pulse 2.2s ease-in-out infinite; }
@keyframes cam-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -7px; } }
@keyframes cam-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
.cf-go { position: absolute; right: 12%; bottom: 33%; width: 54px; transform: rotate(8deg); animation: cam-pulse 2.8s ease-in-out infinite; }
.cf-fun .cf-spark.s1 { top: 52%; left: 5%; width: 30px; }
.cf-fun .cf-spark.s2 { top: 19%; left: 30%; width: 22px; }
.cf-fun .cf-spark.s3 { top: 46%; right: 29%; width: 22px; }
.cf-fun .cf-spark.s4 { top: 60%; right: 7%; width: 24px; }
.cf-sticker { position: absolute; left: 12px; bottom: 62px; width: clamp(210px, 62vw, 268px); transform: rotate(-6deg); }
.cf-hash { position: absolute; bottom: 32px; left: 20px; color: #fff; font-family: var(--font-display); font-size: 15px; font-weight: 900; }
.cf-ownertag {
    position: absolute; right: 14px; bottom: 18px; padding: 6px 11px; border-radius: 8px;
    background: #fff; color: #111; font-size: 10px; font-weight: 900; transform: rotate(2deg);
    box-shadow: 0 6px 16px rgba(0,0,0,.3); text-shadow: none;
}

/* ── 피니셔 : MEDALIST ── */
.cf-finisher { box-shadow: inset 0 0 0 5px var(--cam-accent); }
.cf-inline { position: absolute; inset: 11px; border: 1.5px solid rgba(255,255,255,.75); }
.cf-ribbon {
    position: absolute; top: 56px; right: 32px; left: 32px; padding: 8px 0; text-align: center;
    background: var(--cam-accent); color: #0a0a0c; font-family: var(--font-display);
    font-size: 13px; font-weight: 950; letter-spacing: .3em; text-indent: .3em;
    box-shadow: 0 10px 26px rgba(216,255,58,.3); text-shadow: none;
}
.cf-confetti { position: absolute; top: -6%; width: 8px; height: 13px; border-radius: 2px; opacity: .92; animation: cam-confetti 5.2s linear infinite; }
.cf-confetti.c1 { left: 12%; background: var(--cam-accent); --rot: 24deg; }
.cf-confetti.c2 { right: 16%; background: var(--cam-cyan); --rot: -18deg; animation-duration: 6.1s; animation-delay: .8s; }
.cf-confetti.c3 { left: 24%; background: var(--cam-pink); --rot: 48deg; animation-duration: 4.6s; animation-delay: 1.6s; }
.cf-confetti.c4 { right: 28%; width: 7px; height: 10px; background: #fff; --rot: -40deg; animation-delay: 2.4s; }
.cf-confetti.c5 { left: 8%; background: var(--cam-cyan); --rot: 12deg; animation-duration: 6.6s; animation-delay: 3.1s; }
.cf-confetti.c6 { right: 10%; background: var(--cam-accent); --rot: -28deg; animation-duration: 5.7s; animation-delay: 1.2s; }
.cf-confetti.c7 { left: 44%; background: var(--cam-pink); --rot: 8deg; animation-duration: 4.9s; animation-delay: 2s; }
.cf-confetti.c8 { right: 44%; width: 6px; height: 9px; background: #fff; --rot: 60deg; animation-duration: 6.3s; animation-delay: .4s; }
@keyframes cam-confetti {
    0% { top: -6%; transform: rotate(var(--rot, 20deg)); }
    100% { top: 104%; transform: rotate(calc(var(--rot, 20deg) + 300deg)); }
}
.cf-medal { width: 74px; margin-bottom: 2px; }
.cf-finisher .cf-bc { bottom: 26px; gap: 7px; }
.cf-name { color: #fff; font-family: var(--font-display); font-size: clamp(27px, 8.4vw, 38px); font-weight: 950; line-height: .95; letter-spacing: -.02em; }
.cf-finisher .cf-bc > span { color: var(--cam-accent); font-size: 11px; font-weight: 900; letter-spacing: .18em; }

/* ----- dock ----- */
.cam-dock {
    position: relative; z-index: 20; display: flex; flex-direction: column; min-width: 0;
    padding: 4px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    background: #000;
}
.cam-strip {
    display: flex; align-items: flex-start; gap: 4px; max-height: 0; padding: 0 2px; overflow-x: auto;
    overscroll-behavior-x: contain; scrollbar-width: none; opacity: 0; transform: translateY(8px);
    transition: max-height .24s ease, opacity .18s ease, transform .24s ease; pointer-events: none;
}
.cam-strip::-webkit-scrollbar { display: none; }
.cam-app[data-photo-panel='filters'] .cam-strip[data-photo-options='filters'],
.cam-app[data-photo-panel='ar'] .cam-strip[data-photo-options='ar'],
.cam-app[data-photo-panel='frames'] .cam-strip[data-photo-options='frames'] { max-height: 104px; padding-top: 8px; opacity: 1; transform: none; pointer-events: auto; }
.cam-strip button { display: flex; flex: 0 0 62px; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 2px; color: rgba(255,255,255,.58); cursor: pointer; }
.cam-strip button span { display: block; max-width: 62px; overflow: hidden; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.cam-strip button.active { color: #fff; }
.cam-strip button[disabled] { opacity: .35; cursor: not-allowed; }
.cam-thumb {
    display: block; width: 50px; height: 50px; overflow: hidden; border: 2px solid transparent; border-radius: 50%;
    background: linear-gradient(145deg, #3c4150, #14151a 68%); transition: border-color .16s, transform .16s;
}
.cam-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cam-thumb.ft-warm  { filter: sepia(.22) saturate(1.28) contrast(1.02) brightness(1.03); }
.cam-thumb.ft-pop   { filter: saturate(1.6) contrast(1.12) brightness(1.04); }
.cam-thumb.ft-seoul { filter: saturate(1.28) hue-rotate(-8deg) contrast(1.06) brightness(1.02); }
.cam-thumb.ft-film  { filter: sepia(.32) saturate(.9) contrast(1.12) brightness(.97); }
.cam-thumb.ft-mono  { filter: grayscale(1) contrast(1.12); }
.cam-thumb.ft-fresh { filter: saturate(1.18) hue-rotate(-5deg) brightness(1.07) contrast(1.02); }
.cam-thumb.ft-sunset { filter: sepia(.28) saturate(1.42) hue-rotate(-14deg) contrast(1.06); }
.cam-thumb.ft-pale  { filter: saturate(.76) brightness(1.09) contrast(.92); }
.cam-thumb.ft-drama { filter: contrast(1.3) saturate(1.02) brightness(.95); }
.cam-thumb.ft-neon  { filter: saturate(1.55) contrast(1.2) brightness(.93) hue-rotate(6deg); }
.cam-strip button.active .cam-thumb { border-color: var(--cam-accent); transform: scale(1.06); }
.cam-ar-thumb {
    position: relative; display: grid; place-items: center; width: 50px; height: 50px; overflow: hidden;
    border: 2px solid transparent; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #3b3e48, #15161b 70%);
    color: #fff; font-style: normal; transition: border-color .16s, transform .16s;
}
.cam-ar-thumb { background-size: 78% auto; background-position: center; background-repeat: no-repeat; }
.cam-ar-thumb img { position: relative; z-index: 1; display: block; width: 88%; height: 88%; object-fit: contain; }
.cam-ar-thumb.ar-headband { background-image: url('../img/camera/ar-headband.png'); }
.cam-ar-thumb.ar-shades { background-image: url('../img/camera/ar-shades.png'); }
.cam-ar-thumb.ar-cheer { background-image: url('../img/camera/ar-cheer-left.png'); background-size: 58% auto; }
.cam-ar-thumb.ar-crown { background-image: url('../img/camera/ar-crown.png'); background-size: 64% auto; }
.cam-ar-thumb::before {
    content: ''; position: absolute; width: 29px; height: 34px; border: 1px solid rgba(255,255,255,.23);
    border-radius: 46% 46% 44% 44%; background: rgba(255,255,255,.04);
}
.cam-ar-thumb b { position: relative; z-index: 1; font-family: var(--font-display); font-size: 11px; font-weight: 950; line-height: 1; }
.cam-ar-thumb.ar-none::before { display: none; }
.cam-ar-thumb.ar-none b { color: rgba(255,255,255,.55); font-size: 23px; font-family: var(--font-body); font-weight: 400; }
.cam-ar-thumb.ar-headband b { width: 34px; padding: 3px 0; background: var(--cam-accent); color: #111; font-size: 7px; text-align: center; transform: translateY(-8px) rotate(-4deg); }
.cam-ar-thumb.ar-shades b { color: #111; font-size: 9px; text-shadow: 0 0 1px #fff; transform: translateY(-3px); }
.cam-ar-thumb.ar-cheer b { color: var(--cam-pink); font-size: 17px; text-shadow: 14px 4px 0 var(--cam-cyan); transform: translate(-7px, 4px); }
.cam-ar-thumb.ar-crown b { color: #ffd84a; font-size: 20px; text-shadow: 0 2px 8px rgba(255,216,74,.4); transform: translateY(-10px); }
.cam-strip button.active .cam-ar-thumb { border-color: var(--cam-accent); transform: scale(1.06); box-shadow: 0 0 0 1px var(--cam-accent); }
.cam-strip[data-photo-options='ar'].is-loading button:not([data-photo-ar='none']) { opacity: .48; pointer-events: none; }
.cam-fcard {
    position: relative; display: grid; place-items: end start; width: 44px; height: 56px; padding: 5px;
    overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
    background: linear-gradient(160deg, #23252c, #101114 70%); font-style: normal;
    transition: border-color .16s, transform .16s;
}
.cam-fcard b { font-family: var(--font-display); font-size: 7px; font-weight: 950; line-height: 1.05; letter-spacing: 0; }
.cam-fcard > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.cam-fcard.fc-none { background-image: linear-gradient(160deg, #23252c, #101114 70%), linear-gradient(135deg, transparent 46%, rgba(255,255,255,.3) 49%, rgba(255,255,255,.3) 51%, transparent 54%); background-blend-mode: normal, screen; }
.cam-fcard.fc-together b { color: var(--cam-accent); }
.cam-fcard.fc-together::before { content: ''; position: absolute; bottom: 22px; left: 5px; width: 11px; height: 2px; background: var(--cam-accent); }
.cam-fcard.fc-seoul { place-items: end center; border-color: rgba(103,232,255,.55); }
.cam-fcard.fc-seoul b { color: var(--cam-cyan); }
.cam-fcard.fc-fun { place-items: center; }
.cam-fcard.fc-fun b { padding: 2px 5px 3px; border-radius: 4px; background: var(--cam-pink); color: #fff; transform: rotate(-6deg); }
.cam-fcard.fc-finisher { place-items: center; border-color: color-mix(in srgb, var(--cam-accent) 55%, transparent); }
.cam-fcard.fc-finisher svg { width: 15px; height: 15px; color: var(--cam-accent); }
.cam-strip button.active .cam-fcard { border-color: var(--cam-accent); transform: scale(1.05); box-shadow: 0 0 0 1px var(--cam-accent); }

.cam-chips { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0 4px; }
.cam-chips button {
    min-height: 31px; padding: 0 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
    background: rgba(255,255,255,.07); color: rgba(255,255,255,.62); font-size: 11px; font-weight: 800;
    cursor: pointer; transition: background .18s, color .18s, border-color .18s;
}
.cam-chips button.active { background: #fff; border-color: #fff; color: #0a0a0c; }

.cam-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 92px; }
.cam-side { display: flex; flex-direction: column; align-items: center; gap: 4px; justify-self: center; min-width: 54px; cursor: pointer; }
.cam-side > span { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(255,255,255,.08); transition: background .18s, transform .18s; }
.cam-side:active > span { transform: scale(.92); }
.cam-side svg { width: 20px; height: 20px; }
.cam-side small { color: rgba(255,255,255,.5); font-size: 9px; font-weight: 800; }
/* dock gallery button — shows latest saved shot as a thumbnail */
.cam-gallery-open { border: 0; background: none; padding: 0; }
.cam-gallery-open .cam-gallery-thumb { position: relative; overflow: hidden; }
.cam-gallery-open .cam-gallery-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-gallery-open.has-shots .cam-gallery-thumb { border-color: rgba(255,255,255,.45); background: #000; }
.cam-gallery-open.has-shots .cam-gallery-thumb svg { display: none; }
/* on-device gallery overlay — 카메라와 같은 디자인 언어 */
.cam-gallery {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; background: #000; color: #f4f6f0; z-index: 60;
}
.cam-gallery[open] { display: flex; flex-direction: column; }
.cam-gallery.opening { animation: cam-gallery-in .26s cubic-bezier(.22, .9, .26, 1); }
@keyframes cam-gallery-in { from { opacity: 0; transform: translateY(4%); } to { opacity: 1; transform: none; } }
.cam-gallery-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 4px; padding-top: max(12px, env(safe-area-inset-top));
}
.cam-gallery-select {
    display: inline-flex; align-items: center; justify-content: center; min-width: 68px; height: 44px; padding: 0 18px;
    border: 1px solid var(--cam-glass-line); border-radius: 999px; background: var(--cam-glass); color: #fff;
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    font-size: 13px; font-weight: 900; cursor: pointer;
    transition: background .18s, transform .18s, color .18s, border-color .18s;
}
.cam-gallery-select:hover { background: rgba(255,255,255,.16); }
.cam-gallery-select:active { transform: scale(.94); }
.cam-gallery.selecting .cam-gallery-select { background: var(--cam-glass); border-color: rgba(183,245,0,.55); color: var(--cam-accent); }
.cam-gallery-title { padding: 2px 18px 12px; }
.cam-gallery-title b { display: block; font-family: var(--font-display); font-size: 25px; font-weight: 900; letter-spacing: -.02em; }
.cam-gallery-title small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.52); }
.cam-gallery-grid {
    flex: 1 1 auto; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 3px; padding: 0 3px max(10px, env(safe-area-inset-bottom)); align-content: start; overscroll-behavior: contain;
}
.cam-gallery-cell {
    position: relative; padding: 0; border: 0; border-radius: 4px; background: #131417;
    aspect-ratio: 1; overflow: hidden; cursor: pointer;
    animation: cam-cell-in .3s ease backwards;
}
@keyframes cam-cell-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.cam-gallery-cell img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .16s ease, opacity .16s ease; }
.cam-gallery-cell:active img { transform: scale(.96); }
.cam-gallery-check {
    position: absolute; right: 6px; bottom: 6px; display: none; align-items: center; justify-content: center;
    width: 23px; height: 23px; border: 1.5px solid rgba(255,255,255,.9); border-radius: 50%;
    background: rgba(0,0,0,.3); color: transparent; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.cam-gallery-check svg { width: 14px; height: 14px; }
.cam-gallery.selecting .cam-gallery-check { display: flex; }
.cam-gallery.selecting .cam-gallery-cell img { opacity: .82; }
.cam-gallery.selecting .cam-gallery-cell.selected img { opacity: 1; transform: scale(.88); }
.cam-gallery-cell.selected { box-shadow: inset 0 0 0 2px var(--cam-accent); }
.cam-gallery-cell.selected .cam-gallery-check { background: var(--cam-accent); border-color: var(--cam-accent); color: #111; }
.cam-gallery-empty {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 64px 20px; color: rgba(255,255,255,.55); text-align: center;
}
.cam-gallery-empty svg { width: 40px; height: 40px; margin-bottom: 6px; color: rgba(255,255,255,.3); }
.cam-gallery-empty b { color: rgba(255,255,255,.85); font-size: 15.5px; font-weight: 800; }
.cam-gallery-empty small { font-size: 12.5px; line-height: 1.6; }
.cam-gallery-empty button {
    margin-top: 14px; min-height: 42px; padding: 0 22px; border: 0; border-radius: 999px;
    background: var(--cam-accent); color: #111; font-size: 13px; font-weight: 900; cursor: pointer;
}
.cam-gallery-selbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px; padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.1); background: rgba(12,13,16,.72);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.cam-gallery-selbar span { font-size: 13.5px; font-weight: 800; }
.cam-gallery-selbar .danger, .cam-gallery-viewer-actions .danger { color: #ff8a7a; }
/* viewer */
.cam-gallery-viewer { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; opacity: 0; transition: opacity .17s ease; }
.cam-gallery-viewer.show { opacity: 1; }
.cam-gallery-viewer-top {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
    transition: opacity .2s ease, transform .2s ease;
}
.cam-gallery-viewer-meta { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cam-gallery-viewer-meta b { font-family: var(--font-display); font-size: 14px; font-weight: 900; letter-spacing: .04em; }
.cam-gallery-viewer-meta small { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.55); }
.cam-icon-ghost { visibility: hidden; }
.cam-gallery-viewer-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; }
.cam-gv-track { display: flex; width: 300%; height: 100%; transform: translateX(-33.333%); will-change: transform; }
.cam-gv-pane { flex: 0 0 33.333%; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 6px 10px; }
.cam-gv-pane img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; will-change: transform; }
.cam-gallery-viewer-stage.zoomed { cursor: grab; }
.cam-gallery-viewer-stage.zoomed:active { cursor: grabbing; }
.cam-gallery-filmstrip {
    display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none;
    transition: opacity .2s ease, transform .2s ease;
}
.cam-gallery-filmstrip::-webkit-scrollbar { display: none; }
.cam-film-thumb {
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0; overflow: hidden;
    border: 2px solid transparent; border-radius: 8px; background: #131417;
    cursor: pointer; opacity: .55; transition: opacity .18s, border-color .18s, transform .18s;
}
.cam-film-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cam-film-thumb.active { border-color: var(--cam-accent); opacity: 1; transform: scale(1.06); }
.cam-gallery-viewer-actions {
    display: flex; align-items: center; justify-content: space-around;
    padding: 12px 18px; padding-bottom: max(14px, env(safe-area-inset-bottom));
    transition: opacity .2s ease, transform .2s ease;
}
.cam-gallery-viewer-actions button {
    display: inline-flex; align-items: center; justify-content: center; width: 47px; height: 47px;
    border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.08);
    color: #f4f6f0; cursor: pointer; transition: background .18s, transform .12s;
}
.cam-gallery-viewer-actions button:active { transform: scale(.9); }
.cam-gallery-viewer-actions svg { width: 21px; height: 21px; }
/* 몰입 모드 — 사진 탭으로 UI 숨김 */
.cam-gallery-viewer.immersive .cam-gallery-viewer-top,
.cam-gallery-viewer.immersive .cam-gallery-filmstrip,
.cam-gallery-viewer.immersive .cam-gallery-viewer-actions { opacity: 0; transform: translateY(6px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .cam-gallery.opening, .cam-gallery-cell { animation: none !important; }
    .cam-gv-track, .cam-gallery-viewer { transition: none !important; }
}
.cam-shutter { position: relative; display: grid; place-items: center; width: 78px; height: 78px; cursor: pointer; }
.cam-shutter::before { content: ''; position: absolute; inset: 0; border: 4px solid #fff; border-radius: 50%; }
.cam-shutter span { width: 62px; height: 62px; border-radius: 50%; background: #fff; transition: transform .12s ease, background .2s ease; }
.cam-shutter:active span { transform: scale(.85); }
.cam-shutter:disabled { cursor: default; opacity: .35; }
.cam-app.counting .cam-shutter span { background: var(--cam-accent); }
.cam-review { display: grid; grid-template-columns: .9fr 1.35fr .9fr; gap: 9px; align-items: center; min-height: 92px; }
.cam-review button {
    display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 10px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.08);
    font-size: 11.5px; font-weight: 900; cursor: pointer; transition: background .18s;
}
.cam-review button.primary { border-color: var(--cam-accent); background: var(--cam-accent); color: #111; }
.cam-review button:disabled { opacity: .55; cursor: wait; }
.cam-review button.is-preparing svg { animation: cam-spin .8s linear infinite; }
.cam-review svg { width: 17px; height: 17px; }
@keyframes cam-spin { to { transform: rotate(360deg); } }
.cam-app[data-photo-state='camera'] .cam-review { display: none; }
.cam-app[data-photo-state='review'] .cam-actions { display: none; }

@media (max-width: 360px) {
    .cam-icon { width: 44px; height: 44px; }
    .cam-shutter { width: 72px; height: 72px; }
    .cam-shutter span { width: 57px; height: 57px; }
    .cam-actions, .cam-review { min-height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
    .cam-countdown.tick, .cam-gate-lens i { animation-duration: .01ms; animation-iteration-count: 1; }
    .cf-tape span, .cf-spark, .cf-star, .cf-confetti, .cf-emoji, .cf-go, .cf-waves { animation: none !important; }
    .cam-app * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ---------- ops / manager ---------- */
/* 관리 셸 — 퍼블릭 크롬 제거 + 사이드바 대시보드 */
.ops-body > .topbar,
.ops-body > .mobile-menu,
.ops-body > .footer,
.ops-body > .noise,
.ops-body .reg-bar { display: none !important; }
.ops-body .ops-page { padding-top: 30px !important; }
.ops-shell { display: grid; grid-template-columns: 226px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.ops-sidebar {
    position: sticky; top: 0; display: flex; flex-direction: column; gap: 20px;
    height: 100vh; height: 100dvh; padding: 22px 14px 18px; overflow-y: auto;
    border-right: 1px solid var(--line); background: var(--surface);
}
.ops-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; text-decoration: none; color: var(--ink); }
.ops-brand .brand-text { font-family: var(--font-display); font-size: 15px; font-weight: 900; letter-spacing: -.02em; }
.ops-brand .brand-text em { color: var(--lime); font-style: normal; }
.ops-brand > b { padding: 3px 8px; border-radius: 999px; background: var(--tint-chip); color: var(--lime); font-family: var(--font-display); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.ops-nav { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.ops-nav-label { margin: 14px 8px 5px; color: var(--muted); font-size: 9.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.ops-nav-label:first-child { margin-top: 0; }
.ops-nav a, .ops-side-foot a, .ops-theme-toggle {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px;
    color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.ops-theme-toggle { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.ops-nav a svg, .ops-side-foot a svg, .ops-theme-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ops-nav a:hover, .ops-side-foot a:hover, .ops-theme-toggle:hover { background: var(--tint-chip); color: var(--ink); }
.ops-nav a.active { background: color-mix(in srgb, var(--lime) 13%, transparent); color: color-mix(in srgb, var(--lime) 55%, var(--ink)); font-weight: 800; }
.ops-side-foot { display: flex; flex-direction: column; gap: 3px; padding-top: 14px; border-top: 1px solid var(--line); }
.ops-main { min-width: 0; }
@media (min-width: 901px) {
    .ops-body:not(.scan-kiosk-body) .ops-shell { display: block; }
    .ops-body:not(.scan-kiosk-body) .ops-sidebar {
        position: fixed; inset: 0 auto 0 0; z-index: 60;
        width: 226px; height: auto;
    }
    .ops-body:not(.scan-kiosk-body) .ops-main { margin-left: 226px; }
}
/* 스캐너 작업 선택 — lookup식 큰 버튼 */
.scan-choice-lead { max-width: 640px; margin: -6px 0 22px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.scan-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.scan-choice a {
    position: relative; display: flex; align-items: center; gap: 20px; min-height: 168px;
    padding: 30px 66px 30px 28px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.scan-choice a::after {
    content: '→'; position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
    color: var(--lime); font-family: var(--font-display); font-size: 32px; font-weight: 900;
    opacity: 0; transition: opacity .18s ease;
}
.scan-choice a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lime) 45%, var(--line)); box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
.scan-choice a:hover::after { opacity: 1; }
.scan-choice a:active { transform: scale(.985); }
.scan-choice a > svg { width: 42px; height: 42px; flex: 0 0 auto; color: var(--lime); }
.scan-choice a span { display: grid; gap: 6px; min-width: 0; }
.scan-choice a b { font-size: clamp(19px, 2vw, 23px); font-weight: 800; }
.scan-choice a small { color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) { .scan-choice { grid-template-columns: 1fr; } .scan-choice a { min-height: 128px; } }

/* 바코드 리더 모드 — 상시 대기 인풋 */
.scan-barcode-hero {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 34px 22px 28px; border: 1px dashed var(--line-strong); border-radius: 15px;
    background: var(--bg-raise); text-align: center;
}
.scan-barcode-hero > svg { width: 40px; height: 40px; margin-bottom: 4px; color: var(--lime); }
.scan-barcode-hero > b { font-size: 17px; font-weight: 800; }
.scan-barcode-hero > span { max-width: 380px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.scan-barcode-input {
    width: 100%; max-width: 420px; height: 60px; margin-top: 14px;
    font-size: 18px; font-weight: 700; letter-spacing: .04em; text-align: center;
}
.scan-barcode-input:focus {
    border-color: var(--lime); outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent);
    animation: scan-input-ready 2.2s ease-in-out infinite;
}
@keyframes scan-input-ready {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lime) 10%, transparent); }
}

/* 결과 패널 — 인식 성공 강조 */
.scan-result-panel.has-result { border-color: color-mix(in srgb, var(--lime) 42%, var(--line)); }
.scan-result-panel.has-result .panel-head { background: color-mix(in srgb, var(--lime) 7%, transparent); }

/* 스캐너 고정 작업 배너 — 오작동 방지용 잠금 표시 */
.scan-lock-banner {
    display: flex; align-items: center; gap: 13px; padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--lime) 40%, var(--line)); border-radius: 13px;
    background: color-mix(in srgb, var(--lime) 8%, transparent);
}
.scan-lock-banner > svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--lime); }
.scan-lock-banner > svg:last-child { margin-left: auto; width: 16px; height: 16px; color: var(--muted); }
.scan-lock-banner span { display: grid; gap: 2px; min-width: 0; }
.scan-lock-banner small { color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.scan-lock-banner b { font-size: 15px; font-weight: 800; }
.scan-lock-banner-slim { max-width: 480px; margin-bottom: 18px; }

.scan-kiosk-body .ops-sidebar { display: none; }
.scan-kiosk-body .ops-shell { grid-template-columns: 1fr; }
@media (max-width: 900px) {
    .ops-shell { grid-template-columns: 1fr; }
    .ops-sidebar {
        position: sticky; top: 0; z-index: 60; flex-direction: row; align-items: center; gap: 6px;
        height: auto; padding: 10px 12px; overflow-x: auto; overflow-y: hidden;
        border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none;
    }
    .ops-sidebar::-webkit-scrollbar { display: none; }
    .ops-brand { flex: 0 0 auto; }
    .ops-brand > b { display: none; }
    .ops-nav { flex-direction: row; align-items: center; flex: 0 0 auto; }
    .ops-nav-label { display: none; }
    .ops-nav a, .ops-side-foot a, .ops-theme-toggle { flex: 0 0 auto; width: auto; padding: 8px 11px; font-size: 12px; white-space: nowrap; }
    .ops-side-foot { flex-direction: row; padding-top: 0; border-top: 0; }
    .ops-body .ops-page { padding-top: 20px !important; }
}

.ops-page { padding-top: calc(var(--header-h) + 40px); }
.ops-page .shell { max-width: 1640px; }
.ops-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.ops-head .display { font-size: clamp(32px, 5vw, 56px); }
.ops-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dashboard-ops-actions > form,
.dashboard-ops-actions > .ops-settings { width: 210px; }
.dashboard-ops-actions > form > .btn,
.dashboard-ops-actions > .ops-settings > summary {
    width: 100%; height: 46px; min-height: 46px;
    padding: 0 16px; line-height: 1.2;
}
@media (max-width: 680px) {
    .dashboard-ops-actions { width: 100%; }
    .dashboard-ops-actions > form,
    .dashboard-ops-actions > .ops-settings { width: 100%; }
}
.ops-settings { position: relative; }
.ops-settings > summary { list-style: none; }
.ops-settings > summary::-webkit-details-marker { display: none; }
.ops-settings[open] > summary { border-color: var(--lime); color: var(--lime); }
.ops-settings-pop {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 100;
    width: min(380px, calc(100vw - 40px)); padding: 10px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); box-shadow: var(--shadow-pop);
}
.ops-setting-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 18px; padding: 12px;
}
.ops-setting-row + .ops-setting-row { border-top: 1px solid var(--line); }
.ops-setting-row > div { display: flex; flex-direction: column; min-width: 0; }
.ops-setting-row b { font-size: 14px; }
.ops-setting-row span { color: var(--muted); font-size: 12px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.kpi {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); padding: 20px 22px;
    display: flex; flex-direction: column; gap: 4px;
}
.kpi .k-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 3vw, 40px); line-height: 1; }
.kpi .k-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.kpi.k-lime .k-num { color: var(--lime); }
.kpi.k-cyan .k-num { color: var(--cyan); }
.kpi.k-magenta .k-num { color: var(--magenta); }
.kpi.k-coral .k-num { color: var(--coral); }

.panel {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); overflow: hidden;
}
.panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.panel-head h3 { font-size: 16px; font-weight: 800; }
.panel-body { padding: 22px; }
.panel + .panel { margin-top: 20px; }

.pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
    white-space: nowrap;
    font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
    background: color-mix(in srgb, var(--lime) 12%, transparent); color: var(--lime);
    border: 1px solid color-mix(in srgb, var(--lime) 38%, transparent);
}
.pill svg, .pill .lucide { width: 14px; height: 14px; flex: 0 0 auto; }
.pill.lime { background: color-mix(in srgb, var(--lime) 12%, transparent); color: var(--lime); border-color: color-mix(in srgb, var(--lime) 38%, transparent); }
.pill.cyan { background: rgba(83, 233, 255, 0.1); color: var(--cyan); border-color: rgba(83, 233, 255, 0.35); }
.pill.magenta { background: color-mix(in srgb, var(--magenta) 12%, transparent); color: var(--magenta); border-color: color-mix(in srgb, var(--magenta) 38%, transparent); }
.pill.gray { background: var(--tint-chip); color: var(--muted); border-color: var(--line-strong); }
.pill.coral { background: rgba(255, 107, 74, 0.12); color: var(--coral); border-color: rgba(255, 107, 74, 0.4); }

/* tables */
.table-scroll { overflow-x: auto; }
.table-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: 999px;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 880px; }
.data-table th {
    text-align: left; padding: 12px 14px;
    font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.data-table td {
    padding: 14px; border-bottom: 1px solid var(--line);
    vertical-align: middle; white-space: nowrap;
}
.data-table tr:hover td { background: var(--tint-row); }
.data-table .t-strong { font-weight: 800; }
.data-table .t-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.row-cancelled td { opacity: 0.45; }

.inline-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mini-btn {
    display: inline-flex; align-items: center;
    padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 800;
    border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft);
    white-space: nowrap; appearance: none; -webkit-appearance: none;
    transition: 0.15s; cursor: pointer;
}
.mini-btn:hover { border-color: var(--lime); color: var(--lime); }
.mini-btn.danger:hover { border-color: var(--coral); color: var(--coral); }
.mini-btn.on { border-color: rgba(216, 255, 58, 0.5); color: var(--lime); background: rgba(216, 255, 58, 0.08); }

/* dashboard data area */
.ops-dashboard-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px; align-items: start;
}
.ops-dashboard-grid.single { grid-template-columns: minmax(0, 1fr); }
.ops-dashboard-aside {
    position: sticky; top: 18px; align-self: start;
    display: flex; flex-direction: column; gap: 20px;
    max-height: calc(100dvh - 36px); overflow-y: auto; scrollbar-width: thin;
}
.participant-panel-head { gap: 18px; }
.participant-category-summary { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; flex-wrap: wrap; }
.participant-category-summary > span:not(.pill) { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.participant-category-summary b { color: var(--lime); font-family: var(--font-display); font-size: 16px; line-height: 1; }
.registrations-table { min-width: 1060px; table-layout: fixed; }
.registrations-table .registration-col-participant { width: 24%; }
.registrations-table .registration-col-category { width: 13%; }
.registrations-table .registration-col-bib { width: 11%; }
.registrations-table .registration-col-status { width: 14%; }
.registrations-table .registration-col-actions { width: 38%; }
.registrations-table td:first-child,
.registrations-table td:last-child { white-space: normal; }
.registrations-table td:first-child { overflow-wrap: anywhere; }
.registrations-table tbody tr:last-child td { border-bottom: 0; }
.registrations-table .inline-actions > form > .mini-btn,
.registrations-table .inline-actions > a.mini-btn,
.registrations-table .cancel-details > summary {
    width: 96px; min-height: 34px; justify-content: center;
}

/* cancellation confirmation stays in the row, so a scroll container cannot clip it */
.cancel-details { display: inline-flex; align-items: center; gap: 6px; }
.cancel-details > summary { list-style: none; }
.cancel-details > summary::-webkit-details-marker { display: none; }
.cancel-details[open] > summary { border-color: var(--coral); color: var(--coral); }
.cancel-details .cancel-pop {
    position: static;
    display: flex; align-items: center; gap: 8px; padding: 6px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: none;
}
.cancel-details .cancel-pop input { width: 150px; padding: 7px 11px; font-size: 12.5px; }

@media (max-width: 1520px) {
    .ops-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .ops-dashboard-aside {
        position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none; overflow: visible;
    }
    .ops-dashboard-aside .panel + .panel { margin-top: 0; }
}

@media (max-width: 760px) {
    .ops-dashboard-aside { grid-template-columns: 1fr; }
    .registrations-table { min-width: 980px; }
    .participant-panel-head { align-items: flex-start; flex-direction: column; }
    .participant-category-summary { justify-content: flex-start; }
}

/* scan */
.scan-task-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 18px;
}
.scan-task-toolbar h1 { font-size: clamp(24px, 3vw, 34px); }
.costume-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.costume-manage-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.costume-manage-layout > .panel + .panel { margin-top: 0; }
.costume-manage-aside {
    position: sticky; top: 18px; align-self: start; display: grid; gap: 20px;
    max-height: calc(100dvh - 36px); overflow-y: auto; scrollbar-width: thin;
}
.costume-manage-aside > .panel { margin: 0; }
.costume-vote-overview-body { display: flex; flex-direction: column; gap: 15px; }
.costume-vote-overview-body > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.costume-vote-overview-body b { font-family: var(--font-display); font-size: 22px; }
.costume-vote-overview-body b.magenta { color: var(--magenta); }
.costume-vote-overview-body b.cyan { color: var(--cyan); }
.costume-vote-overview-body p { padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.55; }
.costume-workflow-guide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 20px 0 26px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.costume-workflow-guide li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 11px; min-width: 0; padding: 17px 18px; }
.costume-workflow-guide li:not(:last-child) { border-right: 1px solid var(--line); }
.costume-workflow-guide li:not(:last-child)::after { content: '→'; position: absolute; z-index: 1; right: -8px; top: 50%; transform: translateY(-50%); color: var(--muted); background: var(--surface); font-weight: 900; }
.costume-workflow-guide li > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--lime) 11%, var(--surface)); color: var(--lime); font-family: var(--font-display); font-weight: 900; }
.costume-workflow-guide div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.costume-workflow-guide b { font-size: 13.5px; }
.costume-workflow-guide small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.costume-filter { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.costume-filter input { width: min(360px, 100%); }
.costume-filter select { width: 150px; }
.costume-candidate-panel > .panel-head { align-items: flex-end; }
.costume-candidate-panel > .panel-head > div { display: flex; flex-direction: column; gap: 4px; }
.costume-candidate-panel > .panel-head p { color: var(--muted); font-size: 12px; }
.manage-list-columns {
    display: grid; align-items: center; gap: 14px; padding: 9px 16px;
    border-bottom: 1px solid var(--line); background: var(--tint-row); color: var(--muted);
    font-size: 10.5px; font-weight: 850; letter-spacing: .055em;
}
.manage-list-columns span:last-child { text-align: center; }
.costume-manage-columns,
.stamp-manage-columns { grid-template-columns: minmax(220px, 1fr) 84px minmax(170px, .65fr) 208px; }
.costume-work-list { display: grid; }
.costume-manage-row {
    display: grid; grid-template-columns: minmax(220px, 1fr) 84px minmax(170px, .65fr) 208px;
    align-items: center; gap: 14px; min-height: 72px; padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.costume-manage-row:last-child { border-bottom: 0; }
.costume-manage-row:hover { background: var(--tint-row); }
.costume-manage-person { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; min-width: 0; }
.costume-manage-person > img,
.costume-manage-person > span { width: 42px; height: 48px; border-radius: 8px; }
.costume-manage-person > img { object-fit: cover; }
.costume-manage-person > span { display: grid; place-items: center; border: 1px dashed var(--line-strong); color: var(--muted); background: var(--bg-raise); }
.costume-manage-person svg { width: 17px; height: 17px; }
.costume-manage-person > div { min-width: 0; }
.costume-manage-person strong { display: block; font-family: var(--font-display); font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.costume-manage-person p { margin-top: 5px; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.costume-manage-state { justify-self: start; }
.costume-manage-votes { min-width: 0; }
.costume-manage-votes-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.costume-manage-votes-copy span { color: var(--muted); font-size: 12px; }
.costume-manage-votes-copy span b { color: var(--ink); font-family: var(--font-display); font-size: 23px; }
.costume-manage-votes-copy strong { color: var(--magenta); font-family: var(--font-display); font-size: 13px; white-space: nowrap; }
.costume-vote-split { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--track); }
.costume-vote-split i { display: block; height: 100%; }
.costume-vote-split i.m { background: var(--magenta); }
.costume-vote-split i.g { background: var(--cyan); }
.costume-manage-votes > small { color: var(--muted); font-size: 10.5px; }
.costume-manage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.costume-manage-actions .btn { width: 100%; white-space: nowrap; }
.costume-work-card { padding: clamp(18px, 2.4vw, 26px); border-bottom: 1px solid var(--line); }
.costume-work-card:last-child { border-bottom: 0; }
.costume-work-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 17px; }
.costume-work-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.costume-work-title strong { font-family: var(--font-display); font-size: 19px; }
.costume-work-head p { margin-top: 5px; color: var(--muted); font-size: 11.5px; }
.costume-work-badges { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.costume-vote-count {
    display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 1px 5px;
    min-width: 104px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--magenta) 42%, var(--line));
    border-radius: 10px; background: color-mix(in srgb, var(--magenta) 7%, var(--surface));
}
.costume-vote-count strong { color: var(--magenta); font-family: var(--font-display); font-size: 23px; line-height: 1; }
.costume-vote-count > span { color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.costume-vote-count small { grid-column: 1 / -1; color: var(--muted); font-size: 8.5px; white-space: nowrap; }
.costume-work-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .3fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--surface-2) 52%, transparent); }
.costume-candidate-form { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(280px, 1.28fr) auto; gap: 16px; align-items: end; padding: 18px; }
.costume-work-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.costume-step-label { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 12px; }
.costume-step-label i { display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%; background: var(--tint-chip); color: var(--lime); font-family: var(--font-display); font-size: 10px; font-style: normal; font-weight: 900; }
.costume-candidate-form .form-control { min-height: 44px; padding: 9px 11px; font-size: 12.5px; }
.costume-photo-control { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.costume-photo-control > span:last-child { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.costume-photo-control small { color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.costume-file { min-width: 0; color: var(--muted); font-size: 11.5px; }
.costume-file::file-selector-button { margin-right: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--ink-soft); font-weight: 700; }
.costume-thumb, .costume-photo-empty { width: 46px; height: 52px; flex: 0 0 auto; border-radius: 7px; }
.costume-thumb { object-fit: cover; }
.costume-photo-empty { display: grid; place-items: center; border: 1px dashed var(--line-strong); color: var(--muted); }
.costume-photo-empty svg { width: 18px; height: 18px; }
.costume-save-step { display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.costume-publish-step { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px; border-left: 1px solid var(--line); }
.costume-publish-step p { color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.costume-publish-step .btn { width: 100%; }
.costume-publish-step .btn[disabled] { opacity: .42; cursor: not-allowed; }
.costume-publish-step .danger { border-color: color-mix(in srgb, var(--coral) 52%, var(--line)); color: var(--coral); }
.costume-manage-empty { padding: 48px 22px; color: var(--muted); text-align: center; }
.costume-theme-list { display: grid; }
.costume-theme-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 12px; }
.costume-theme-list > div:last-child { border-bottom: 0; }
.costume-theme-list b { color: var(--lime); font-family: var(--font-display); font-size: 18px; }
.costume-theme-list > p { padding: 20px; color: var(--muted); font-size: 12px; }
.costume-theme-head-actions { display: inline-flex; align-items: center; gap: 7px; }

/* costume theme database manager */
.costume-theme-manage-shell { max-width: 1480px; }
.costume-theme-page-note { margin-top: 6px; color: var(--muted); font-size: 12px; }
.costume-theme-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.costume-theme-create-panel { margin: 20px 0; }
.costume-theme-create-panel .panel-head > div,
.costume-theme-list-panel .panel-head > div { min-width: 0; }
.costume-theme-create-panel .panel-head p,
.costume-theme-list-panel .panel-head p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.costume-theme-create-form {
    display: grid; grid-template-columns: 78px minmax(170px, .8fr) minmax(240px, 1.35fr) minmax(190px, .8fr) auto auto;
    align-items: end; gap: 10px; padding: 16px 18px;
}
.costume-theme-create-form > label:not(.costume-theme-active-check) { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.costume-theme-create-form > label > span { color: var(--muted); font-size: 10.5px; font-weight: 800; }
.costume-theme-create-form > label > small { color: var(--muted); font-size: 8.5px; }
.costume-theme-create-form .form-control { min-height: 42px; padding: 9px 11px; font-size: 12px; }
.costume-theme-create-form .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; white-space: nowrap; }
.costume-theme-create-form .btn svg { width: 14px; height: 14px; }
.costume-theme-emoji-field input { text-align: center; font-size: 19px !important; }
.costume-theme-active-check,
.costume-theme-row-check { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.costume-theme-active-check { min-height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-raise); }
.costume-theme-active-check input,
.costume-theme-row-check input { width: 17px; height: 17px; accent-color: var(--lime); }
.costume-theme-manage-head,
.costume-theme-manage-row {
    display: grid; grid-template-columns: 76px 58px minmax(145px, .75fr) minmax(220px, 1.25fr) 130px 68px 78px 108px;
    align-items: center; gap: 9px;
}
.costume-theme-manage-head {
    padding: 9px 14px; border-bottom: 1px solid var(--line-strong); background: var(--tint-row);
    color: var(--muted); font-size: 9.5px; font-weight: 850; letter-spacing: .07em;
}
.costume-theme-manage-row { min-width: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); transition: background .18s, opacity .18s; }
.costume-theme-manage-row:last-child { border-bottom: 0; }
.costume-theme-manage-row:hover { background: var(--tint-row); }
.costume-theme-manage-row.is-inactive { opacity: .58; }
.costume-theme-manage-row .form-control { min-width: 0; min-height: 38px; padding: 8px 9px; font-size: 11.5px; }
.costume-theme-emoji-input { text-align: center; font-size: 18px !important; }
.costume-theme-order { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.costume-theme-order > strong { font-family: var(--font-display); font-size: 11px; }
.costume-theme-order > span { display: inline-flex; gap: 2px; }
.costume-theme-order .mini-btn { min-width: 25px; min-height: 27px; padding: 3px 5px; }
.costume-theme-mobile-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.costume-theme-mobile-label > span { display: none; }
.costume-theme-mobile-label small { overflow: hidden; color: var(--muted); font-family: var(--font-display); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.costume-theme-row-image { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 4px 6px; min-width: 0; }
.costume-theme-image-preview { width: 54px; height: 42px; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--bg-raise); color: var(--muted); }
.costume-theme-image-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.costume-theme-image-preview svg { width: 15px; height: 15px; }
.costume-theme-image-preview small { font-size: 7px; }
.costume-theme-image-upload { min-width: 0; justify-content: center; overflow: hidden; cursor: pointer; }
.costume-theme-image-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.costume-theme-image-remove { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; cursor: pointer; }
.costume-theme-image-remove input { width: 12px; height: 12px; accent-color: var(--coral); }
.costume-theme-row-check { flex-direction: column; gap: 3px; color: var(--muted); font-size: 9.5px; }
.costume-theme-use-count { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.costume-theme-use-count b { color: var(--lime); font-family: var(--font-display); font-size: 17px; line-height: 1; }
.costume-theme-use-count small { margin-top: 3px; color: var(--muted); font-size: 8.5px; white-space: nowrap; }
.costume-theme-row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.costume-theme-row-actions .mini-btn { justify-content: center; min-width: 0; min-height: 30px; padding: 5px 7px; font-size: 9.5px; }
.mini-btn.is-disabled { cursor: not-allowed; opacity: .45; }
@media (max-width: 1100px) {
    .costume-theme-create-form { grid-template-columns: 72px minmax(160px, .8fr) minmax(220px, 1.2fr); }
    .costume-theme-image-field { grid-column: 1 / 3; }
    .costume-theme-create-form .costume-theme-active-check,
    .costume-theme-create-form .btn { grid-column: auto; }
    .costume-theme-list-panel { overflow-x: auto; }
    .costume-theme-manage-head,
    .costume-theme-manage-row { min-width: 1040px; }
}
@media (max-width: 680px) {
    .costume-theme-kpis { grid-template-columns: 1fr; }
    .costume-theme-create-form { grid-template-columns: 64px minmax(0, 1fr); padding: 14px; }
    .costume-theme-description-field { grid-column: 1 / -1; }
    .costume-theme-image-field { grid-column: 1 / -1; }
    .costume-theme-create-form .costume-theme-active-check { grid-column: 1 / -1; justify-content: flex-start; }
    .costume-theme-create-form .btn { grid-column: 1 / -1; }
    .costume-theme-manage-head { display: none; }
    .costume-theme-list-panel { overflow: hidden; }
    .costume-theme-manage-row {
        grid-template-columns: 62px minmax(0, 1fr); gap: 9px; min-width: 0; padding: 15px;
    }
    .costume-theme-order { grid-column: 1 / -1; justify-content: space-between; }
    .costume-theme-emoji-input { grid-column: 1; }
    .costume-theme-mobile-label { grid-column: 2; }
    .costume-theme-row-description { grid-column: 1 / -1; }
    .costume-theme-row-image { grid-column: 1 / -1; grid-template-columns: 64px minmax(90px, 150px); }
    .costume-theme-image-preview { width: 64px; height: 48px; }
    .costume-theme-mobile-label > span { display: block; color: var(--muted); font-size: 9.5px; font-weight: 800; }
    .costume-theme-row-check { grid-column: 1; }
    .costume-theme-use-count { grid-column: 2; }
    .costume-theme-row-actions { grid-column: 1 / -1; }
}

/* photo studio asset manager */
.photo-asset-manage-shell { max-width: 1380px; }
.photo-asset-page-note, .photo-frame-upload-note { margin-top: 6px; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.photo-kind-tabs {
    display: flex; width: max-content; max-width: 100%; gap: 4px; margin: 0 0 18px; padding: 4px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.photo-kind-tab {
    display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 12px;
    border: 0; border-radius: 7px; background: transparent; color: var(--muted);
    font: 850 11px/1 var(--font-body); cursor: pointer; transition: background .16s, color .16s;
}
.photo-kind-tab svg { width: 15px; height: 15px; }
.photo-kind-tab b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--tint-chip); font-size: 8px; }
.photo-kind-tab.is-active { background: var(--lime); color: #101114; }
.photo-kind-tab.is-active b { background: rgba(16,17,20,.13); color: #101114; }
.photo-asset-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-asset-create-panel { margin: 20px 0 14px; }
.photo-asset-create-panel > summary { cursor: pointer; list-style: none; }
.photo-asset-create-panel > summary::-webkit-details-marker { display: none; }
.photo-asset-create-panel > summary .mini-btn { display: inline-flex; align-items: center; gap: 5px; }
.photo-asset-create-panel > summary .mini-btn svg { width: 13px; height: 13px; }
.photo-asset-create-panel[open] > summary { border-bottom: 1px solid var(--line); }
.photo-asset-create-panel .panel-head p, .photo-layer-section-head p { margin-top: 4px; color: var(--muted); font-size: 10.5px; }
.photo-effect-create-form {
    display: grid; grid-template-columns: 150px minmax(150px, .8fr) minmax(180px, 1fr) minmax(180px, 1fr);
    align-items: end; gap: 12px; padding: 18px;
}
.photo-effect-create-form > label, .photo-ar-setting-grid > label, .photo-effect-settings > label:not(.photo-check),
.photo-layer-form > label:not(.photo-check), .photo-layer-create form > label:not(.photo-check) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.photo-effect-create-form label > span, .photo-effect-settings label > span, .photo-layer-form label > span,
.photo-layer-create label > span { color: var(--muted); font-size: 9.5px; font-weight: 850; }
.photo-effect-create-form label > small, .photo-layer-form label > small { color: var(--muted); font-size: 8px; }
.photo-effect-create-form .form-control, .photo-effect-settings .form-control, .photo-layer-form .form-control,
.photo-layer-create .form-control { min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 11px; }
.photo-ar-setting-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)) auto; align-items: end; gap: 10px; }
.photo-ar-setting-grid[hidden] { display: none; }
.photo-text-setting-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(88px, 1fr)); align-items: end; gap: 7px; }
.photo-text-setting-grid[hidden], [data-layer-image-fields][hidden], [data-layer-text-fields][hidden] { display: none !important; }
.photo-text-setting-grid > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.photo-create-flags { display: flex; align-items: center; gap: 14px; min-height: 40px; }
.photo-check { display: inline-flex; align-items: center; gap: 6px; min-width: max-content; color: var(--muted); font-size: 9.5px; font-weight: 800; }
.photo-check input { width: 16px; height: 16px; accent-color: var(--lime); }
.photo-frame-upload-note { padding: 0 18px 18px; }
.photo-asset-editor {
    display: grid; grid-template-columns: minmax(560px, 1.18fr) minmax(350px, .82fr); align-items: start; gap: 18px;
}
.photo-effect-list-panel { overflow: hidden; margin: 0; min-width: 0; }
.photo-effect-list-panel > .panel-head { min-height: 70px; }
.photo-effect-list-panel > .panel-head p { margin-top: 4px; color: var(--muted); font-size: 10.5px; }
.photo-effect-manage-head, .photo-effect-head {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(72px, auto) 68px 24px; align-items: center; gap: 12px;
}
.photo-effect-manage-head { padding: 9px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--tint-row); color: var(--muted); font-size: 8px; font-weight: 850; }
.photo-effect-manage-head span:nth-child(n + 3) { text-align: center; }
.photo-effect-list { display: block; min-width: 0; }
.photo-asset-library { max-height: calc(100dvh - 190px); overflow-y: auto; scrollbar-gutter: stable; }
.photo-asset-library .photo-effect-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-effect-card { overflow: hidden; margin: 0; border-bottom: 1px solid var(--line); transition: background .18s, opacity .18s; }
.photo-effect-card:last-child { border-bottom: 0; }
.photo-effect-card.is-selected { background: color-mix(in srgb, var(--lime) 3%, var(--surface)); box-shadow: inset 3px 0 0 var(--lime); }
.photo-effect-card.is-inactive { opacity: .7; }
.photo-effect-card[hidden] { display: none; }
.photo-effect-card:not(.is-selected) > .photo-effect-settings,
.photo-effect-card:not(.is-selected) > .photo-layer-section,
.photo-effect-card:not(.is-selected) > .photo-effect-danger { display: none; }
.photo-effect-head { min-height: 68px; padding: 9px 14px; cursor: pointer; }
.photo-effect-head:hover { background: color-mix(in srgb, var(--lime) 4%, transparent); }
.photo-effect-card.is-selected .photo-effect-head { background: color-mix(in srgb, var(--lime) 5%, transparent); }
.photo-effect-head:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.photo-effect-preview, .photo-layer-preview {
    display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-strong); background: #101114;
}
.photo-effect-preview { width: 44px; height: 50px; border-radius: 8px; }
.photo-effect-preview img, .photo-layer-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.photo-effect-preview svg, .photo-layer-preview svg { width: 20px; color: var(--muted); }
.photo-effect-title { min-width: 0; }
.photo-effect-title h2 { margin-top: 1px; font-family: var(--font-display); font-size: 15px; }
.photo-effect-title p { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.photo-effect-badges, .photo-order-actions, .photo-layer-actions, .photo-layer-actions form { display: flex; align-items: center; justify-content: center; gap: 5px; }
.photo-order-actions .mini-btn, .photo-layer-actions .mini-btn { min-width: 28px; min-height: 28px; padding: 4px 6px; }
.photo-effect-toggle { display: grid; place-items: center; color: var(--muted); transition: transform .18s, color .18s; }
.photo-effect-toggle svg { width: 16px; height: 16px; }
.photo-effect-card.is-selected .photo-effect-toggle { color: var(--lime); transform: rotate(180deg); }
.photo-effect-settings {
    display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) auto auto auto auto;
    align-items: end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--tint-row);
}
.photo-layer-section { padding: 18px; border-top: 1px solid var(--line); }
.photo-layer-section-head { margin-bottom: 12px; }
.photo-layer-section-head h3 { font-size: 13px; }
.photo-layer-list { display: grid; gap: 8px; }
.photo-layer-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; transition: border-color .16s, background .16s; }
.photo-layer-row.is-selected { border-color: color-mix(in srgb, var(--cyan) 65%, var(--line)); background: color-mix(in srgb, var(--cyan) 5%, transparent); }
.photo-layer-row.is-inactive { opacity: .56; }
.photo-layer-preview { position: relative; width: 52px; height: 52px; border-radius: 9px; cursor: pointer; }
.photo-layer-preview > small { position: absolute; right: 3px; bottom: 3px; padding: 2px 4px; border-radius: 999px; background: rgba(0,0,0,.72); color: rgba(255,255,255,.8); font-size: 6px; font-weight: 900; }
.photo-layer-preview.is-text { padding: 6px; background: color-mix(in srgb, var(--cyan) 8%, #101114); }
.photo-layer-text-preview { display: -webkit-box; overflow: hidden; color: #fff; font-family: var(--font-display); font-size: 8px; font-weight: 900; line-height: 1.15; text-align: center; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.photo-layer-form { display: grid; grid-template-columns: repeat(3, minmax(92px, 1fr)); align-items: end; gap: 7px; min-width: 0; }
.photo-layer-form .form-control { min-height: 35px; padding: 6px 7px; font-size: 10px; }
.photo-layer-form textarea.form-control, .photo-layer-create textarea.form-control { resize: vertical; line-height: 1.4; }
.photo-layer-actions { flex-direction: column; align-items: stretch; }
.photo-layer-actions form { justify-content: flex-end; }
.photo-layer-empty { padding: 28px 18px; color: var(--muted); font-size: 11px; text-align: center; }
.photo-layer-create { margin-top: 12px; }
.photo-layer-create > summary { width: max-content; list-style: none; cursor: pointer; }
.photo-layer-create > summary::-webkit-details-marker { display: none; }
.photo-layer-create > summary svg { width: 13px; height: 13px; }
.photo-layer-create form { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(170px, 1fr) repeat(5, minmax(80px, .55fr)) auto auto; align-items: end; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--tint-row); }
.photo-effect-danger { display: flex; justify-content: flex-end; padding: 0 18px 16px; }
.photo-position-editor { position: sticky; top: 16px; overflow: hidden; margin: 0; min-width: 0; }
.photo-position-editor-head { align-items: flex-start; padding: 15px 17px; }
.photo-position-editor-head h2 { margin-top: 2px; font-family: var(--font-display); font-size: 22px; }
.photo-position-editor-head p { max-width: 420px; margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.photo-position-editor-head .pill.is-saving { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); }
.photo-editor-workspace { display: grid; place-items: center; padding: 18px; background: color-mix(in srgb, var(--bg) 84%, #000); }
.photo-editor-stage {
    width: min(100%, 450px); aspect-ratio: 3 / 4; min-height: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 18px;
    box-shadow: 0 24px 54px rgba(0,0,0,.3); cursor: crosshair;
}
.photo-editor-scene { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: color-mix(in srgb, var(--surface) 88%, var(--ink) 12%); }
.photo-editor-person { position: absolute; z-index: 1; bottom: -2%; left: 50%; width: 76%; height: auto; color: color-mix(in srgb, var(--ink) 18%, transparent); transform: translateX(-50%); }
.photo-editor-safe { position: absolute; z-index: 4; inset: 4%; border: 1px dashed rgba(255,255,255,.21); border-radius: 9px; pointer-events: none; }
.photo-editor-safe::before, .photo-editor-safe::after,
.photo-editor-safe > i:nth-child(1), .photo-editor-safe > i:nth-child(2) { content: ''; position: absolute; background: rgba(255,255,255,.1); }
.photo-editor-safe::before, .photo-editor-safe::after { top: 0; bottom: 0; width: 1px; }
.photo-editor-safe::before { left: 33.333%; }.photo-editor-safe::after { right: 33.333%; }
.photo-editor-safe > i:nth-child(1), .photo-editor-safe > i:nth-child(2) { right: 0; left: 0; height: 1px; }
.photo-editor-safe > i:nth-child(1) { top: 33.333%; }.photo-editor-safe > i:nth-child(2) { bottom: 33.333%; }
.photo-editor-layer-host { position: absolute; z-index: 6; inset: 0; overflow: hidden; }
.photo-editor-layer { position: absolute; touch-action: none; cursor: grab; transform-origin: center; outline: 1px solid transparent; }
.photo-editor-layer:active { cursor: grabbing; }
.photo-editor-layer > img { display: block; width: 100%; height: auto; max-width: none; pointer-events: none; user-select: none; filter: drop-shadow(0 3px 8px rgba(0,0,0,.2)); }
.photo-editor-layer.is-text { width: auto; min-width: 1ch; }
.photo-editor-text { display: block; width: max-content; max-width: none; white-space: pre; text-wrap: nowrap; pointer-events: none; user-select: none; text-shadow: 0 2px 12px rgba(0,0,0,.52); }
.photo-editor-layer.is-selected { outline: 1.5px solid var(--cyan); outline-offset: 3px; }
.photo-editor-handle { position: absolute; display: none; width: 15px; height: 15px; border: 2px solid #101114; border-radius: 50%; background: var(--cyan); box-shadow: 0 2px 7px rgba(0,0,0,.35); }
.photo-editor-layer.is-selected .photo-editor-handle { display: block; }
.photo-editor-handle.resize { right: -11px; bottom: -11px; cursor: nwse-resize; }
.photo-editor-handle.rotate { top: -28px; left: 50%; background: var(--lime); cursor: grab; transform: translateX(-50%); }
.photo-editor-handle.rotate::after { content: ''; position: absolute; top: 13px; left: 5px; width: 1px; height: 12px; background: var(--lime); }
.photo-editor-anchor { position: absolute; z-index: 5; display: none; padding: 2px 4px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; background: rgba(6,7,10,.55); color: rgba(255,255,255,.82); font-size: 7px; font-weight: 900; transform: translate(-50%, -50%); pointer-events: none; }
.photo-editor-stage[data-kind='ar'] .photo-editor-anchor { display: block; }
.photo-editor-anchor.a-forehead { top: 22.5%; left: 50%; }.photo-editor-anchor.a-eyes { top: 30.5%; left: 50%; }.photo-editor-anchor.a-nose { top: 35.5%; left: 50%; }.photo-editor-anchor.a-mouth { top: 40.5%; left: 50%; }
.photo-editor-base-label { position: absolute; z-index: 9; top: 12px; left: 12px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(8,9,12,.5); color: rgba(255,255,255,.75); font-size: 7.5px; font-weight: 850; letter-spacing: .04em; pointer-events: none; backdrop-filter: blur(8px); }
.photo-editor-inspector { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line); background: var(--tint-row); }
.photo-editor-inspector > div { min-width: 0; }.photo-editor-inspector span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 8px; font-weight: 850; }.photo-editor-inspector strong { display: block; overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.photo-editor-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 11px 16px 14px; color: var(--muted); font-size: 8.5px; font-weight: 750; }
.photo-editor-legend span { display: inline-flex; align-items: center; gap: 5px; }.photo-editor-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }.photo-editor-legend i.drag { background: var(--cyan); }.photo-editor-legend i.resize { border-radius: 2px; background: var(--cyan); }.photo-editor-legend i.rotate { background: var(--lime); }
@media (max-width: 1180px) {
    .photo-effect-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .photo-ar-setting-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .photo-text-setting-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .photo-effect-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .photo-asset-editor { grid-template-columns: 1fr; }
    .photo-asset-library { max-height: none; overflow: visible; }
    .photo-position-editor { position: static; order: -1; }
    .photo-editor-stage { width: min(100%, 420px); }
    .photo-layer-row { grid-template-columns: 58px minmax(0, 1fr); }
    .photo-layer-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
    .photo-layer-form, .photo-layer-create form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .photo-kind-tabs { width: 100%; }
    .photo-kind-tab { flex: 1 1 0; }
    .photo-asset-kpis { grid-template-columns: 1fr; }
    .photo-effect-create-form, .photo-ar-setting-grid, .photo-effect-settings,
    .photo-layer-form, .photo-layer-create form, .photo-text-setting-grid { grid-template-columns: 1fr; }
    .photo-effect-manage-head { display: none; }
    .photo-effect-head { grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 8px 10px; }
    .photo-effect-preview { grid-row: 1 / 3; }
    .photo-effect-badges { grid-column: 2; justify-content: flex-start; }
    .photo-order-actions { grid-column: 2 / 4; justify-content: flex-start; }
    .photo-effect-toggle { grid-column: 3; grid-row: 1; }
    .photo-layer-row { grid-template-columns: 1fr; }
    .photo-layer-preview { width: 100%; height: 90px; }
    .photo-editor-workspace { padding: 10px; }
    .photo-editor-stage { width: min(100%, 360px); border-radius: 12px; }
    .photo-editor-inspector { grid-template-columns: 1fr; }
}

/* costume candidate detail */
.costume-detail-shell { max-width: 1280px; }
.costume-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.costume-detail-grid > .panel + .panel { margin-top: 0; }
.costume-detail-editor { overflow: hidden; }
.costume-detail-editor .panel-head > div { min-width: 0; }
.costume-detail-editor .panel-head p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.costume-detail-body { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); gap: 24px; padding: 24px; }
.costume-detail-photo { min-height: 330px; border-radius: 14px; overflow: hidden; background: var(--bg-raise); border: 1px dashed var(--line-strong); }
.costume-detail-photo img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; }
.costume-detail-photo > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 330px; color: var(--muted); }
.costume-detail-photo svg { width: 32px; height: 32px; }
.costume-detail-form { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-width: 0; }
.costume-detail-form .field { display: flex; flex-direction: column; gap: 8px; }
.costume-detail-form .field > span { color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.costume-detail-form .costume-file { min-height: 58px; padding: 10px; }
.costume-detail-publish { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-top: 1px solid var(--line); background: var(--tint-row); }
.costume-detail-publish p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.costume-detail-publish .btn[disabled] { opacity: .42; cursor: not-allowed; }
.costume-detail-publish .danger { border-color: color-mix(in srgb, var(--coral) 52%, var(--line)); color: var(--coral); }
.costume-detail-aside {
    position: sticky; top: 18px; align-self: start; display: grid; gap: 20px;
    max-height: calc(100dvh - 36px); overflow-y: auto; scrollbar-width: thin;
}
.costume-detail-aside > .panel { margin: 0; }
.costume-detail-meta { display: grid; }
.costume-detail-meta > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.costume-detail-meta > div:last-child { border-bottom: 0; }
.costume-detail-meta dt { color: var(--muted); font-size: 11px; }
.costume-detail-meta dd { max-width: 65%; text-align: right; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.costume-detail-meta.vote dd { color: var(--magenta); font-family: var(--font-display); font-size: 19px; }
.costume-detail-page.is-field-capture .costume-detail-body { grid-template-columns: minmax(300px, .9fr) minmax(300px, 1.1fr); align-items: center; }
.costume-camera-stage {
    position: relative; min-height: 0; aspect-ratio: 4 / 5; border: 0; border-radius: 18px;
    background: #080a07; box-shadow: inset 0 0 0 1px rgba(255,255,255,.11);
}
.costume-camera-stage video,
.costume-camera-stage > img {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
    object-fit: cover; background: #080a07;
}
.costume-camera-stage [hidden] { display: none; }
.costume-camera-frame { position: absolute; inset: 6%; pointer-events: none; }
.costume-camera-frame i { position: absolute; width: 42px; height: 42px; border-color: rgba(255,255,255,.82); border-style: solid; filter: drop-shadow(0 1px 2px rgba(0,0,0,.48)); }
.costume-camera-frame i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; border-radius: 12px 0 0; }
.costume-camera-frame i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; border-radius: 0 12px 0 0; }
.costume-camera-frame i:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-radius: 0 0 12px; }
.costume-camera-frame i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 2px 2px; border-radius: 0 0 0 12px; }
.costume-camera-status {
    position: absolute; z-index: 3; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 8px;
    max-width: calc(100% - 32px); padding: 9px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
    background: rgba(8,10,7,.76); color: #fff; font-size: 11px; line-height: 1.35; text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.22); backdrop-filter: blur(12px); transform: translateX(-50%);
}
.costume-camera-status svg { flex: 0 0 auto; width: 15px; height: 15px; }
.costume-camera-stage[data-camera-state="loading"] .costume-camera-status,
.costume-camera-stage[data-camera-state="error"] .costume-camera-status { bottom: 50%; width: max-content; justify-content: center; transform: translate(-50%, 50%); }
.costume-camera-stage[data-camera-state="error"] .costume-camera-status { border-color: rgba(255,105,105,.42); background: rgba(65,9,9,.78); }
.costume-camera-stage[data-camera-state="saving"]::after {
    content: ''; position: absolute; z-index: 2; inset: 0; background: rgba(0,0,0,.36); backdrop-filter: blur(2px);
}
.costume-camera-controls { display: grid; gap: 15px; }
.costume-camera-help { color: var(--muted); font-size: 11.5px; line-height: 1.65; }
.costume-camera-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 94px; }
.costume-camera-actions > small { color: var(--muted); font-size: 10px; font-weight: 800; }
.costume-shutter {
    display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border: 3px solid var(--lime);
    border-radius: 50%; background: transparent; cursor: pointer; transition: transform .16s ease, opacity .16s ease;
}
.costume-shutter span { display: block; width: 52px; height: 52px; border: 2px solid var(--surface); border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); }
.costume-shutter:hover { transform: scale(1.04); }
.costume-shutter:active { transform: scale(.96); }
.costume-shutter:disabled { opacity: .35; cursor: wait; transform: none; }
.costume-camera-review-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; }
.costume-camera-review-actions .btn { min-height: 48px; }
.costume-camera-review-actions[hidden] { display: none; }
.costume-camera-fallback { display: grid; gap: 8px; padding-top: 15px; border-top: 1px solid var(--line); }
.costume-camera-fallback > span { color: var(--muted); font-size: 10.5px; font-weight: 750; }
.costume-camera-fallback .costume-file { min-height: 52px; }
.costume-save-spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: costume-save-spin .7s linear infinite; }
@keyframes costume-save-spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) {
    .costume-workflow-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .costume-workflow-guide li:nth-child(2) { border-right: 0; }
    .costume-workflow-guide li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
    .costume-workflow-guide li:nth-child(2)::after { display: none; }
    .costume-work-body { grid-template-columns: 1fr; }
    .costume-publish-step { border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 1180px) {
    .costume-manage-layout { grid-template-columns: 1fr; }
    .costume-manage-aside {
        position: static; order: -1; grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none; overflow: visible;
    }
    .costume-vote-overview-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
    .costume-vote-overview-body > div { padding: 8px 12px; border-right: 1px solid var(--line); }
    .costume-vote-overview-body > div:nth-child(3) { border-right: 0; }
    .costume-vote-overview-body p, .costume-vote-overview-body .btn { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
    .costume-manage-columns,
    .stamp-manage-columns { grid-template-columns: minmax(220px, 1fr) 84px minmax(150px, .55fr); }
    .manage-list-columns span:last-child { display: none; }
    .costume-manage-row { grid-template-columns: minmax(220px, 1fr) 84px minmax(150px, .55fr); }
    .costume-manage-actions { grid-column: 1 / -1; justify-self: end; width: 208px; }
}
@media (max-width: 760px) {
    .manage-list-columns { display: none; }
    .costume-work-head { align-items: flex-start; flex-direction: column; gap: 10px; }
    .costume-work-badges { width: 100%; justify-content: space-between; }
    .costume-manage-aside { grid-template-columns: 1fr; }
    .costume-vote-overview-body { display: flex; }
    .costume-vote-overview-body > div { padding: 0; border-right: 0; }
    .costume-candidate-form { grid-template-columns: 1fr; align-items: stretch; }
    .costume-photo-control { grid-template-columns: auto minmax(0, 1fr); }
    .costume-manage-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px; }
    .costume-manage-person { grid-column: 1 / -1; }
    .costume-manage-state { justify-self: end; }
    .costume-manage-votes { grid-column: 1 / -1; }
    .costume-manage-actions { grid-column: 1 / -1; justify-self: stretch; width: auto; }
    .costume-detail-grid { grid-template-columns: 1fr; }
    .costume-detail-aside { position: static; order: -1; grid-row: 1; max-height: none; overflow: visible; }
    .costume-detail-page.is-field-capture .costume-detail-aside { order: initial; grid-row: auto; }
    .costume-detail-page.is-field-capture .costume-detail-body { grid-template-columns: 1fr; }
    .costume-detail-body { grid-template-columns: 1fr; padding: 18px; }
    .costume-detail-photo, .costume-detail-photo img, .costume-detail-photo > span { min-height: 260px; }
    .costume-camera-stage, .costume-camera-stage > img { min-height: 0; }
    .costume-camera-stage { width: min(100%, 430px); margin-inline: auto; }
    .costume-detail-publish { align-items: stretch; flex-direction: column; }
}

/* stamp operations */
.stamp-manage-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.participant-manage-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stamp-manage-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.stamp-manage-layout > .panel + .panel { margin-top: 0; }
.stamp-mission-overview {
    position: sticky; top: 18px; align-self: start; margin: 0;
    max-height: calc(100dvh - 36px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
}
.stamp-mission-overview .panel-head > div, .stamp-participant-panel .panel-head > div { min-width: 0; }
.stamp-mission-overview .panel-head p, .stamp-participant-panel .panel-head p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.stamp-mission-grid { display: grid; grid-template-columns: 1fr; }
.stamp-mission-grid > a, .stamp-mission-card-static {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px;
    min-width: 0; padding: 17px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    transition: background .18s, color .18s;
}
.stamp-mission-card-static { opacity: .55; }
.stamp-mission-grid > a:hover { background: color-mix(in srgb, var(--lime) 7%, var(--surface)); }
.stamp-mission-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint-chip); color: var(--lime); }
.stamp-mission-icon svg { width: 18px; height: 18px; }
.stamp-mission-grid > a > span:nth-child(2), .stamp-mission-card-static > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stamp-mission-grid b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.stamp-mission-grid small { color: var(--muted); font-size: 10px; }
.stamp-mission-grid strong { display: inline-flex; align-items: baseline; gap: 3px; color: var(--lime); font-family: var(--font-display); }
.stamp-mission-grid strong b { font-size: 22px; }
.stamp-mission-grid strong small { color: currentColor; font: 800 9px/1 var(--font-body); }
.stamp-manage-filter { display: flex; gap: 10px; margin: 24px 0; flex-wrap: wrap; }
.stamp-manage-filter input { width: min(380px, 100%); }
.stamp-manage-filter select { width: 170px; }
.stamp-participant-panel { overflow: hidden; }
.stamp-manage-list { display: grid; }
.stamp-manage-row {
    display: grid; grid-template-columns: minmax(220px, 1fr) 84px minmax(170px, .65fr) 208px;
    align-items: center; gap: 14px; min-height: 72px; padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.stamp-manage-row:last-child { border-bottom: 0; }
.stamp-manage-row:hover { background: var(--tint-row); }
.stamp-manage-card { padding: clamp(18px, 2.3vw, 25px); border-bottom: 1px solid var(--line); }
.stamp-manage-card:last-child { border-bottom: 0; }
.stamp-manage-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.stamp-manage-person { min-width: 0; }
.stamp-manage-person strong { font-family: var(--font-display); font-size: 19px; }
.stamp-manage-person p { margin-top: 5px; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.stamp-manage-card-body { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(260px, 1.28fr) auto; align-items: center; gap: 24px; }
.stamp-manage-progress { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stamp-manage-progress-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.stamp-manage-progress-copy span { color: var(--muted); font-size: 12px; }
.stamp-manage-progress-copy span b { color: var(--ink); font-family: var(--font-display); font-size: 23px; }
.stamp-manage-progress-copy strong { color: var(--lime); font-family: var(--font-display); font-size: 18px; }
.stamp-manage-progress > small { color: var(--muted); font-size: 10.5px; }
.stamp-manage-progress.compact { gap: 6px; }
.stamp-manage-progress-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.stamp-manage-progress-top > strong { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.stamp-manage-progress-top > strong b { color: var(--ink); font-family: var(--font-display); font-size: 23px; line-height: 1; }
.stamp-manage-progress-top > strong span { color: var(--muted); font-size: 10px; font-weight: 800; }
.stamp-manage-progress-top > small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.stamp-mini-map { display: flex; align-items: center; gap: 5px; min-width: 0; }
.stamp-mini-map > span { width: 12px; height: 12px; flex: 0 0 12px; border: 1px dashed var(--line-strong); border-radius: 50%; background: var(--bg-raise); }
.stamp-mini-map > span.done { border-style: solid; border-color: var(--lime); background: var(--lime); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lime) 13%, transparent); }
.stamp-manage-seals { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.stamp-manage-seals > span {
    display: grid; place-items: center; position: relative; width: 42px; height: 42px;
    border: 1px dashed var(--line-strong); border-radius: 50%; color: var(--muted); background: var(--bg-raise);
}
.stamp-manage-seals > span.done { border: 2px solid var(--lime); color: var(--lime); background: color-mix(in srgb, var(--lime) 8%, var(--surface)); box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 14%, transparent); }
.stamp-manage-seals svg { width: 17px; height: 17px; }
.stamp-manage-seals small { position: absolute; right: -2px; bottom: -3px; padding: 1px 3px; border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 7px; font-weight: 900; }
.stamp-manage-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.stamp-manage-card-actions .btn { width: 100%; white-space: nowrap; }
.stamp-manage-empty { padding: 48px 22px; color: var(--muted); text-align: center; }

@media (max-width: 1080px) {
    .stamp-manage-row { grid-template-columns: minmax(220px, 1fr) 84px minmax(150px, .55fr); }
    .stamp-manage-card-actions { grid-column: 1 / -1; justify-self: end; width: 208px; }
}

@media (max-width: 1180px) {
    .stamp-manage-layout { grid-template-columns: 1fr; }
    .stamp-mission-overview { position: static; order: -1; max-height: none; overflow: visible; }
    .stamp-mission-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

@media (max-width: 760px) {
    .stamp-manage-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .participant-manage-kpis { grid-template-columns: 1fr; }
    .stamp-manage-filter { display: grid; grid-template-columns: 1fr auto; }
    .stamp-manage-filter input { width: 100%; grid-column: 1 / -1; }
    .stamp-manage-filter select { width: 100%; }
    .stamp-manage-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px; }
    .stamp-manage-person { min-width: 0; }
    .stamp-manage-state { justify-self: end; }
    .stamp-manage-progress { grid-column: 1 / -1; }
    .stamp-manage-card-actions { grid-column: 1 / -1; justify-self: stretch; width: auto; }
}

.scan-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.scan-layout > .panel + .panel,
.admin-stamp-workspace > .panel + .panel { margin-top: 0; }
.scan-result-panel {
    position: sticky; top: 18px; align-self: start;
    max-height: calc(100dvh - 36px); overflow-y: auto; scrollbar-width: thin;
}
.scan-mode-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.scan-mode-tabs a {
    min-width: 150px; padding: 10px 16px; border-radius: var(--radius-btn);
    border: 1px solid var(--line-strong); color: var(--ink-soft);
    display: flex; flex-direction: column; gap: 1px;
}
.scan-mode-tabs a.active { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }
.scan-mode-tabs strong { font-size: 14px; font-weight: 800; }
.scan-mode-tabs small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.scan-mode-tabs a.active small { color: inherit; opacity: 0.7; }
.scan-panel-title { min-width: 0; }
.scan-panel-title p { margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.scan-reader {
    border: 2px dashed var(--line-strong); border-radius: var(--radius-sm);
    min-height: 180px; display: flex; flex-direction: column; gap: 10px;
    align-items: center; justify-content: center; padding: 18px; text-align: center;
    position: relative; overflow: hidden;
}
.scan-reader video { width: 100%; border-radius: 10px; }
.scan-reader-guide {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--muted); font-size: 14px;
}
.scan-reader-guide b { color: var(--ink-soft); font-size: 15px; }
.scan-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.scan-reader.scanning { border-color: var(--lime); }
.scan-reader.scanning::after {
    content: ''; position: absolute; left: 8%; right: 8%; height: 2px; background: var(--lime);
    box-shadow: 0 0 18px var(--lime); animation: scanline 1.6s ease-in-out infinite alternate;
}
@keyframes scanline { from { top: 12%; } to { top: 88%; } }
.scan-result-empty { color: var(--muted); text-align: center; padding: 44px 20px; }
[data-tablet-scan-link][aria-disabled="true"] { opacity: .48; pointer-events: none; }

/* tablet self check-in: one purpose, always-on camera, no operator controls */
.scan-kiosk-body .footer,
.scan-kiosk-body .topbar .nav-links,
.scan-kiosk-body .topbar .top-cta { display: none; }
.scan-kiosk-page { min-height: 100vh; padding-top: calc(var(--header-h) + 18px) !important; }
.scan-kiosk-page .ops-heading-copy,
.scan-kiosk-page .scan-mode-tabs { display: none !important; }
.scan-kiosk-page .ops-head { justify-content: flex-end; margin-bottom: 14px; }
.scan-kiosk-page .scan-manual-only,
.scan-kiosk-page .scan-controls,
.scan-kiosk-page .scan-submit { display: none; }
.scan-kiosk-page .scan-reader { min-height: min(52vh, 520px); overflow: hidden; }
.scan-kiosk-page .scan-reader video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 8px;
}
.scan-kiosk-page .scan-reader-guide {
    margin-top: auto; width: min(92%, 520px); padding: 14px 18px;
    border-radius: 10px; background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(8px);
}
.scan-kiosk-page [data-qr-scanner].scan-fallback .scan-manual-only { display: flex; }
.scan-kiosk-page [data-qr-scanner].scan-fallback .scan-controls,
.scan-kiosk-page [data-qr-scanner].scan-fallback .scan-submit { display: flex; }

/* standalone tablet scanner: no site navigation, result panel or dashboard chrome */
.tablet-scanner-body { min-height: 100dvh; overflow: hidden; background: #080b06; color: #f7f8f2; }
.tablet-scanner-body .noise { display: none; }
.tablet-scanner { position: relative; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.tablet-scanner-head { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 4px 4px 18px; }
.tablet-scanner-head span { color: #b7f500; font-family: var(--font-display); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.tablet-scanner-head h1 { margin-top: 3px; color: #fff; font-size: clamp(20px, 3vw, 30px); }
.tablet-scanner-head a { flex: 0 0 auto; padding: 10px 14px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; color: #fff; font-size: 12px; font-weight: 800; }
.tablet-scanner-form { min-height: 0; position: relative; }
.tablet-scanner-camera { position: absolute; inset: 0; min-height: 0; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; background: #111; }
.tablet-scanner-camera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 19px; }
.tablet-scanner-camera.scanning::after { left: 20%; right: 20%; background: #b7f500; box-shadow: 0 0 24px #b7f500; }
.tablet-scan-frame { position: absolute; z-index: 2; left: 50%; top: 47%; width: min(54vw, 440px); aspect-ratio: 1; transform: translate(-50%,-50%); border: 3px solid rgba(183,245,0,.9); border-radius: 28px; box-shadow: 0 0 0 9999px rgba(0,0,0,.22); pointer-events: none; }
.tablet-scanner-guide { position: absolute; z-index: 3; left: 50%; bottom: 26px; width: min(620px, calc(100% - 40px)); transform: translateX(-50%); padding: 16px 20px; border-radius: 14px; background: rgba(8,11,6,.78); backdrop-filter: blur(10px); text-align: center; }
.tablet-scanner-guide b { display: block; color: #fff; font-size: clamp(16px, 2.3vw, 22px); }
.tablet-scanner-guide span { display: block; margin-top: 3px; color: rgba(255,255,255,.7); font-size: 13px; }
.tablet-scanner-fallback-input,.tablet-fallback-submit { display: none; }
.tablet-scanner-form.scan-fallback { display: grid; place-items: center; gap: 10px; align-content: center; }
.tablet-scanner-form.scan-fallback .tablet-scanner-camera { opacity: .3; }
.tablet-scanner-form.scan-fallback .tablet-scanner-fallback-input,.tablet-scanner-form.scan-fallback .tablet-fallback-submit { position: relative; z-index: 5; display: block; width: min(520px,80%); }
.tablet-scanner-form.scan-fallback .tablet-scanner-fallback-input { padding: 18px; border: 2px solid #b7f500; border-radius: 12px; background: #fff; color: #111; font-size: 22px; }
.tablet-fallback-submit { padding: 16px; border: 0; border-radius: 12px; background: #b7f500; color: #111; font-weight: 900; }
.tablet-scan-feedback { position: fixed; z-index: 8; left: 50%; top: 50%; width: min(540px,calc(100vw - 40px)); transform: translate(-50%,-50%); padding: 26px; border-radius: 18px; background: #fff; color: #111; box-shadow: 0 20px 80px rgba(0,0,0,.48); text-align: center; }
.tablet-scan-feedback.ok { border: 4px solid #b7f500; }
.tablet-scan-feedback b { display: block; font-size: clamp(18px,3vw,28px); }
.tablet-scan-feedback span { display: block; margin-top: 7px; color: #5e6557; font-weight: 700; }
@media (orientation: portrait) { .tablet-scan-frame { width: min(68vw,440px); } }

/* login */
.auth-wrap { max-width: 420px; margin: 0 auto; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 40px; background: var(--bg-raise); }
.footer-inner { display: flex; flex-direction: column; gap: 36px; }
.footer-top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer-brand { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 5vw, 48px); line-height: 0.95; }
.footer-brand .accent { color: var(--lime); }
.footer-links { display: flex; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap; }
.footer-links dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-links dt { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.footer-links dd { margin: 0; }
.footer-links a { color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.footer-links a:hover { color: var(--lime); }
.footer-bottom {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    border-top: 1px solid var(--line); padding-top: 24px;
    color: var(--muted); font-size: 13px;
}

/* ---------- bottom live registration bar ---------- */
body.has-reg-bar { padding-bottom: 82px; }
.reg-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
    /* match the flowing marquee band: lime in light, bright lime in dark.
       recolor the tokens the bar consumes so foreground = on-lime and flips with the theme */
    --ink: var(--on-lime);
    --muted: color-mix(in srgb, var(--on-lime) 58%, transparent);
    --line: color-mix(in srgb, var(--on-lime) 22%, transparent);
    --line-strong: color-mix(in srgb, var(--on-lime) 30%, transparent);
    --tint-chip: color-mix(in srgb, var(--on-lime) 10%, transparent);
    background: var(--lime);
    border-top: 1px solid color-mix(in srgb, var(--on-lime) 18%, transparent);
    transform: translateY(100%); opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s;
}
.reg-bar.shown { transform: translateY(0); opacity: 1; }
.reg-bar-inner {
    display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.4vw, 26px);
    padding-top: 8px; padding-bottom: 8px; min-height: 82px;
}
.rb-live-status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--lime); font-weight: 900; }
.rb-live-status i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 14%, transparent); }
.rb-live-status.open i { animation: rb-pulse 1.8s ease-in-out infinite; }
.rb-live-status.almost-full { color: var(--coral); }
.rb-live-status.closed { color: var(--coral); }
@keyframes rb-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 6%, transparent); } }
.rb-cta-apply {
    flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap;
    padding: 11px 24px; border-radius: 999px;
    background: var(--lime); color: var(--on-lime);
    font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: .04em;
    transition: transform .18s ease, box-shadow .18s ease;
}
.rb-cta-apply:hover { transform: translateY(-2px); box-shadow: 0 10px 30px color-mix(in srgb, var(--lime) 40%, transparent); }
.rb-cta-apply.is-closed { background: var(--tint-chip); color: var(--muted); cursor: default; pointer-events: none; }
.rb-status-copy { display: flex; flex-direction: column; gap: 1px; }
.rb-status-copy small { display: none; color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .18em; }
.rb-status-copy b { font-weight: 900; }
.rb-registration-count { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rb-registration-count strong { font-family: var(--font-display); color: var(--ink); font-size: clamp(24px, 3vw, 32px); line-height: 1; }
.rb-registration-count span { color: var(--muted); font-size: 13px; font-weight: 700; }
.rb-registration-progress { flex: 0 1 220px; min-width: 120px; max-width: 220px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--line); }
.rb-registration-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime), var(--cyan)); }
.rb-flip-clock { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.rb-flip-meta { display: flex; align-items: flex-start; flex-direction: column; gap: 3px; }
.rb-flip-meta > small { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.rb-flip-title { color: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 900; letter-spacing: .14em; white-space: nowrap; }
.rb-mobile-label { display: none; }
.rb-flip-units { display: flex; align-items: flex-start; gap: 5px; }
.rb-flip-unit { display: grid; justify-items: center; gap: 2px; }
.rb-flip-card {
    display: block; min-width: 38px; color: var(--ink);
    font-family: var(--font-display); font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em;
    text-align: center;
}
.rb-flip-card.wide { min-width: 48px; }
.rb-flip-unit small { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.rb-flip-separator { margin-top: 1px; color: var(--muted); font-family: var(--font-display); font-size: 24px; line-height: 1; }
.rb-dday-only { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.rb-dday-only b { color: var(--ink); font-family: var(--font-display); font-size: clamp(34px, 4vw, 50px); line-height: 1; font-variant-numeric: tabular-nums; }
.rb-dday-only small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
/* one shared layout for both states — spread to edges, countdown chips.
   count-off simply drops the count/progress, leaving an intentional middle gap. */
.reg-bar .reg-bar-inner { justify-content: space-between; }
.reg-bar .rb-flip-separator { display: none; }
.reg-bar .rb-flip-units { gap: 6px; }
.reg-bar .rb-flip-unit {
    background: var(--tint-chip); border: 1px solid var(--line);
    border-radius: 8px; padding: 5px 9px 4px; gap: 1px;
}
.reg-bar.is-minimal .reg-bar-inner { max-width: 1080px; gap: clamp(18px, 3vw, 44px); }
.reg-bar.is-minimal .rb-live-status { margin-left: 0; }
/* accents that were lime now sit on a lime bar — use on-lime so they stay visible */
.reg-bar .rb-live-status { color: var(--on-lime); font-weight: 600; }
.reg-bar .rb-registration-progress i { background: var(--on-lime); }
/* slimmer type in the bar — lighter than the heavy display weights for an airy look */
.reg-bar .rb-flip-title { font-weight: 600; }
.reg-bar .rb-flip-card { font-weight: 500; }
.reg-bar .rb-flip-unit small { font-weight: 600; }
.reg-bar .rb-status-copy b { font-weight: 600; }
.reg-bar .rb-registration-count strong { font-weight: 500; }
.reg-bar .rb-registration-count span { font-weight: 500; }
/* longer progress bar */
.reg-bar .rb-registration-progress { flex: 1 1 auto; min-width: 200px; max-width: 480px; }
@media (max-width: 680px) {
    body.has-reg-bar { padding-bottom: 70px; }
    .reg-bar-inner { min-height: 70px; gap: 8px; }
    .rb-flip-clock { gap: 5px; }
    .rb-flip-meta, .rb-flip-unit small { display: none; }
    .rb-mobile-label {
        display: flex; flex: 0 0 auto; flex-direction: column; gap: 1px;
        color: var(--ink); white-space: nowrap;
    }
    .rb-mobile-label b { font-family: var(--font-display); font-size: 11px; line-height: 1; letter-spacing: .1em; }
    .rb-mobile-label small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .04em; }
    .rb-flip-units { align-items: center; gap: 3px; }
    .rb-flip-card { min-width: 31px; font-size: 20px; }
    .rb-flip-card.wide { min-width: 43px; }
    .rb-flip-separator { margin-top: 0; font-size: 13px; }
    .rb-registration-progress, .rb-registration-count { display: none; }
    .rb-live-status { font-size: 13px; }
    .rb-cta-apply { padding: 9px 16px; font-size: 12px; }
    .reg-bar.is-minimal .reg-bar-inner { gap: clamp(18px, 6vw, 32px); padding: 0 clamp(16px, 4vw, 24px); }
    .reg-bar.is-minimal .rb-flip-clock { width: auto; flex: 0 1 auto; gap: 6px; }
    .reg-bar.is-minimal .rb-flip-meta { display: none; }
    .reg-bar.is-minimal .rb-live-status { flex: 0 0 auto; font-size: 13px; }
    .rb-dday-only { gap: 5px; }
    .rb-dday-only b { font-size: 28px; }
    .rb-dday-only small { font-size: 7px; }
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- page hero (subpages) ---------- */
.page-hero {
    padding: calc(var(--header-h) + clamp(48px, 8vw, 96px)) 0 clamp(40px, 6vw, 72px);
    display: flex; flex-direction: column; gap: 20px;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(90% 120% at 85% -20%, rgba(139, 123, 255, 0.14), transparent 60%),
        radial-gradient(70% 100% at 10% -30%, rgba(216, 255, 58, 0.08), transparent 55%);
}
.page-hero .display { font-size: clamp(40px, 8vw, 104px); }
.page-hero.compact-apply-hero { padding-top: calc(var(--header-h) + clamp(34px, 5vw, 64px)); padding-bottom: clamp(32px, 4vw, 48px); }
.page-hero.compact-apply-hero .display { font-size: clamp(40px, 6vw, 78px); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
    .nav-links { display: none; }
    .menu-toggle { display: flex; }
    .card-grid, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .divided-grid, .divided-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .divided-cell { border-bottom: 1px solid var(--line); }
    .divided-cell:nth-child(even) { border-right: 0; }
    .step-flow { grid-template-columns: repeat(2, 1fr); }
    .step:not(:last-child)::after { display: none; }
    .tool-grid { grid-template-columns: 1fr; }
    .tool-card { min-height: 0; }
    .notice-list { grid-template-columns: 1fr; }
    .wave-list { grid-template-columns: 1fr; }
    .booth-grid { grid-template-columns: repeat(2, 1fr); }
    .wave-strip { grid-template-columns: repeat(3, 1fr); }
    .category-grid { grid-template-columns: 1fr; }
    .category-card { min-height: 0; }
    .scan-layout { grid-template-columns: 1fr; }
    .scan-result-panel { position: static; max-height: none; overflow: visible; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .hero-stat { border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
    .course-preview-grid { grid-template-columns: 1fr !important; }
}

/* ---------- theme toggle ---------- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle svg { width: 17px; height: 17px; }

/* icon/label swap: show sun in dark (→ go light), moon in light (→ go dark) */
[data-theme-toggle] .ic-sun { display: none; }
[data-theme-toggle] .ic-moon { display: inline-flex; }
html[data-theme="dark"] [data-theme-toggle] .ic-sun { display: inline-flex; }
html[data-theme="dark"] [data-theme-toggle] .ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [data-theme-toggle] .ic-sun { display: inline-flex; }
    :root:not([data-theme="light"]) [data-theme-toggle] .ic-moon { display: none; }
}
@media (max-width: 680px) {
    .section { padding: 56px 0; }
    .section-head { margin-bottom: 34px; }
    .section-head.row { align-items: stretch; flex-direction: column; gap: 24px; }
    .section-head.row > .btn { width: 100%; }
    .top-cta { display: none; }
    .card-grid, .card-grid.cols-4, .card-grid.cols-2 { grid-template-columns: 1fr; }
    .divided-grid, .divided-grid.cols-4 { grid-template-columns: 1fr; }
    .divided-cell { border-right: 0; }
    .step-flow { grid-template-columns: 1fr; }
    .booth-grid { grid-template-columns: 1fr; }
    .wave-strip { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: span 1; }
    .form-control,
    .field input:not([type='checkbox']):not([type='radio']),
    .field select,
    .field textarea { max-width: 100%; min-width: 0; font-size: 16px; }
    input[type='date'].form-control,
    .field input[type='date'] {
        display: block; inline-size: -webkit-fill-available; width: -webkit-fill-available !important;
        max-inline-size: 100%; max-width: 100% !important; min-inline-size: 0; min-width: 0 !important;
        block-size: 54px; height: 54px !important; min-height: 54px !important; padding: 14px 16px !important;
        line-height: 1.5;
        -webkit-appearance: none; appearance: none;
    }
    input[type='date']::-webkit-date-and-time-value { min-width: 0; text-align: left; }
    .choice-grid, .choice-grid.cols-2 { grid-template-columns: 1fr; }
    .info-board { grid-template-columns: 1fr; }
    .vote-grid, .stamp-grid { grid-template-columns: 1fr; }
    .timeline-item { grid-template-columns: 1fr; gap: 4px; }
    .scan-task-toolbar { align-items: flex-start; flex-direction: column; }
    .scan-task-toolbar .ops-actions { width: 100%; }
    .scan-task-toolbar .ops-actions .btn { flex: 1; }
    .costume-kpis { grid-template-columns: 1fr; }
    .costume-filter input, .costume-filter select, .costume-filter .btn { width: 100%; }
    .course-map-frame, .kakao-course-map { width: 100%; max-width: 100%; min-width: 0; }
}


/* ---------- course safety — 아이콘이 주인공인 에디토리얼 그리드 ---------- */
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: safety; }
.safety-item {
    --acc: var(--lime);
    position: relative;
    display: flex; align-items: flex-start; gap: 19px;
    padding: 30px 28px 32px 0;
    border-top: 1px solid var(--line);
    counter-increment: safety;
}
/* 우측 상단 고스트 넘버 — 본 사이트의 아웃라인 타이포 문법 */
.safety-item::after {
    content: '0' counter(safety);
    position: absolute; top: 24px; right: 24px;
    color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--acc) 45%, transparent);
    font-family: var(--font-display); font-size: 32px; font-weight: 900; line-height: 1;
    pointer-events: none; user-select: none;
}
.safety-item:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); padding-left: 28px; }
.safety-item.acc-cyan { --acc: var(--cyan); }
.safety-item.acc-coral { --acc: var(--coral); }
.safety-item.acc-violet { --acc: var(--violet); }
.safety-item.acc-magenta { --acc: var(--magenta); }
/* 좌측에 똭 — 큼직한 틴트 타일 + 살짝 기울여 스탬프 무드 */
.safety-item .si-icon {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 76px; height: 76px; border-radius: 24px;
    border: 1.5px solid color-mix(in srgb, var(--acc) 42%, transparent);
    background: color-mix(in srgb, var(--acc) 10%, transparent);
    color: var(--acc);
    transform: rotate(-4deg);
    transition: transform .22s ease;
}
.safety-item:nth-child(even) .si-icon { transform: rotate(3deg); }
.safety-item:hover .si-icon { transform: rotate(0deg) scale(1.05); }
.safety-item .si-icon svg { width: 36px; height: 36px; }
.safety-item > div { min-width: 0; padding-right: 30px; }
.safety-item h4 { font-family: var(--font-display); font-weight: 800; font-size: 17px; margin: 4px 0 7px; }
.safety-item p { color: var(--muted); font-size: 14px; line-height: 1.65; }
@media (max-width: 980px) {
    .safety-grid { grid-template-columns: repeat(2, 1fr); }
    .safety-item:not(:nth-child(3n + 1)) { border-left: 0; padding-left: 0; }
    .safety-item:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 24px; }
}
@media (max-width: 620px) {
    .safety-grid { grid-template-columns: 1fr; }
    .safety-item,
    .safety-item:nth-child(2n) { border-left: 0; padding-left: 0; padding-top: 22px; padding-bottom: 24px; }
    .safety-item .si-icon { width: 64px; height: 64px; border-radius: 20px; }
    .safety-item .si-icon svg { width: 30px; height: 30px; }
    .safety-item::after { top: 18px; right: 4px; font-size: 27px; }
}

/* ---------- my page auth ticket (theme-aware) ---------- */
.auth-ticket {
    border-radius: 12px; overflow: hidden;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 20px 54px color-mix(in srgb, var(--ink) 10%, transparent);
}
.auth-ticket .at-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #d8ff3a; color: #10130a; padding: 15px 24px;
}
.auth-ticket .at-brand {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-display); font-weight: 900; font-style: italic;
    font-size: 14.5px; letter-spacing: 0.03em; text-transform: uppercase;
}
.auth-ticket .at-brand svg { width: 21px; height: 21px; }
.auth-ticket .at-steps { display: inline-flex; gap: 6px; }
.auth-ticket .at-steps i {
    width: 26px; height: 6px; border-radius: 3px;
    background: rgba(16, 19, 10, 0.22);
    transition: background 0.3s;
}
.auth-ticket .at-steps i.on { background: #10130a; }
.auth-ticket .at-body { padding: 28px 24px 26px; display: flex; flex-direction: column; gap: 20px; }
.auth-ticket .at-body h3 { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 2.6vw, 27px); }
.auth-ticket .at-sub { color: var(--muted); font-size: 13.5px; margin-top: 7px; line-height: 1.6; }
.auth-ticket .at-perf { position: relative; border-top: 2px dashed var(--line-strong); margin: 0 24px; }
.auth-ticket .at-perf::before,
.auth-ticket .at-perf::after {
    content: ''; position: absolute; top: -12px; width: 24px; height: 24px;
    border-radius: 50%; background: var(--bg);
    border: 1px solid var(--line);
}
.auth-ticket .at-perf::before { left: -37px; }
.auth-ticket .at-perf::after { right: -37px; }
.auth-ticket .at-foot {
    padding: 18px 24px 22px; color: var(--muted); font-size: 13.5px; line-height: 1.6;
    display: flex; gap: 9px; align-items: flex-start;
}
.auth-ticket .at-foot svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--lime); }
.auth-ticket .at-foot a { color: var(--lime); font-weight: 700; }

/* ---------- my page features — flat divided grid ---------- */
.my-bento { display: grid; grid-template-columns: 1fr 1fr; }
.mb-card {
    --acc: var(--lime);
    display: flex; flex-direction: column; gap: 11px;
    padding: 26px 26px 28px 0;
    border-top: 1px solid var(--line);
}
.mb-card:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 26px; }
.mb-card.acc-cyan { --acc: var(--cyan); }
.mb-card.acc-violet { --acc: var(--violet); }
.mb-card.acc-magenta { --acc: var(--magenta); }
.mb-card .mb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mb-card .mb-icon { color: var(--acc); display: inline-flex; }
.mb-card .mb-icon svg { width: 22px; height: 22px; }
.mb-card .mb-tag {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
    padding: 4px 11px; border-radius: 999px; white-space: nowrap;
    background: color-mix(in srgb, var(--acc) 12%, transparent);
    color: color-mix(in srgb, var(--acc) 72%, var(--ink));
}
.mb-card b { font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 2vw, 21px); }
.mb-card p { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 640px) {
    .my-bento { grid-template-columns: 1fr; }
    .mb-card:nth-child(2n) { border-left: 0; padding-left: 0; }
    .mb-card { padding-top: 20px; padding-bottom: 22px; }
}

/* ---------- Instagram community board ---------- */
.instagram-board-hero { padding-bottom: clamp(42px, 6vw, 76px); }
.instagram-board-hero .section-lead { max-width: 720px; }
.instagram-hashtags { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 26px; }
.instagram-hashtags a svg { width: 13px; height: 13px; }
.instagram-hashtags .instagram-cta {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px;
    border: 0 !important; color: #fff !important; font-weight: 900;
    background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
    box-shadow: 0 8px 22px rgba(220, 39, 67, .3); transition: transform .18s ease, box-shadow .18s ease;
}
.instagram-hashtags .instagram-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(220, 39, 67, .42); color: #fff; }
.instagram-hashtags a,
.instagram-hashtags > span {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
    color: var(--ink); background: var(--surface); font-size: 13px; font-weight: 800;
}
.instagram-hashtags a:hover { border-color: var(--magenta); color: var(--magenta); }
.instagram-board-section { padding-top: clamp(34px, 4vw, 54px); background: var(--bg-raise); }
.instagram-feed-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
    color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.instagram-feed-bar span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.instagram-feed-bar svg { width: 15px; height: 15px; color: var(--lime); }
.instagram-feed-bar small { font: inherit; color: var(--muted); }
.instagram-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.instagram-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.instagram-tile {
    position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line);
    border-radius: 16px; background: var(--bg-raise); aspect-ratio: 1;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.instagram-tile:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 16px 38px rgba(0, 0, 0, .16); }
.instagram-tile > a { position: absolute; inset: 0; display: block; color: #fff; }
.instagram-media { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.instagram-tile:hover .instagram-media { transform: scale(1.045); }
.instagram-media-fallback { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); background: var(--bg-raise); }
.instagram-media-fallback svg { width: 34px; height: 34px; }
.instagram-tile-shade { position: absolute; z-index: 2; inset: 32% 0 0; background: linear-gradient(transparent, rgba(5, 6, 9, .86)); opacity: 0; transition: opacity .25s ease; }
.instagram-copy { position: absolute; z-index: 3; right: 15px; bottom: 14px; left: 15px; display: grid; gap: 5px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.instagram-copy span { overflow: hidden; display: -webkit-box; font-size: 14px; font-weight: 600; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.instagram-copy small { color: var(--lime); font-size: 12px; font-weight: 800; }
.instagram-type { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: rgba(5, 6, 9, .62); backdrop-filter: blur(6px); }
.instagram-type svg { width: 15px; height: 15px; }
.instagram-tile:hover .instagram-tile-shade,
.instagram-tile:focus-within .instagram-tile-shade,
.instagram-tile:hover .instagram-copy,
.instagram-tile:focus-within .instagram-copy { opacity: 1; }
.instagram-tile:hover .instagram-copy,
.instagram-tile:focus-within .instagram-copy { transform: translateY(0); }
.instagram-grid.is-empty { grid-template-columns: 1fr; }
.instagram-empty { grid-column: 1 / -1; display: grid; min-height: clamp(280px, 46vh, 440px); place-items: center; align-content: center; gap: 5px; padding: 40px 24px; color: var(--muted); text-align: center; }
.instagram-empty strong { color: var(--ink-soft); font-family: var(--font-display); font-size: 21px; letter-spacing: -.025em; }
.instagram-empty p { margin: 0; font-size: 12px; line-height: 1.55; }

.instagram-home-head { align-items: end; }
.instagram-home-head .section-lead { margin-top: 10px; }
.ig-home-section { border-top: 1px solid var(--line); background: var(--bg-raise); }

/* 홈 인스타 피드 — IG 포스트 카드 가로 스크롤 */
.ig-feed {
    display: flex; gap: 16px; margin: 0 -20px; padding: 6px 20px 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.ig-feed::-webkit-scrollbar { display: none; }
.ig-card {
    flex: 0 0 clamp(250px, 27vw, 315px); min-width: 0; scroll-snap-align: start;
    border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ig-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
.ig-card > a { display: block; color: inherit; text-decoration: none; }
.ig-card-head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.ig-card-user { display: grid; gap: 1px; min-width: 0; }
.ig-card-user b { overflow: hidden; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ig-card-user small { overflow: hidden; color: var(--muted); font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ig-card-more { width: 14px; height: 14px; margin-left: auto; color: var(--muted); }
.ig-card-media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-raise); }
.ig-card-media .instagram-media { transition: transform .4s ease; }
.ig-card:hover .ig-card-media .instagram-media { transform: scale(1.04); }
.ig-card-foot { display: grid; gap: 6px; padding: 11px 13px 13px; }
.ig-card-icons { display: flex; gap: 12px; color: var(--ink-soft); }
.ig-card-icons svg { width: 18px; height: 18px; }
.ig-card:hover .ig-card-icons svg:first-child { color: #dc2743; fill: #dc2743; }
.ig-card-foot p { margin: 0; overflow: hidden; color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ig-card-foot p b { color: var(--ink); font-weight: 800; }
.ig-card-foot small { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
@media (max-width: 640px) {
    .ig-feed { gap: 12px; margin: 0 -16px; padding: 4px 16px 12px; }
    .ig-card { flex-basis: 78vw; }
}
.instagram-home-head .instagram-hashtags { margin-top: 16px; }
.instagram-manage-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.board-settings-aside {
    position: sticky; top: 18px; align-self: start; margin: 0;
    max-height: calc(100dvh - 36px); overflow-y: auto; scrollbar-width: thin;
}
.board-settings-aside .board-settings-form { flex-direction: column; align-items: stretch; gap: 14px; }
.board-settings-aside .board-hashtag-field { flex: 0 0 auto; }
.board-settings-aside .board-hashtag-field .form-control { width: 100%; height: 48px; min-height: 48px; padding: 0 14px; }
.board-settings-options { display: grid; gap: 0; padding: 3px 14px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--bg-raise) 68%, transparent); }
.board-settings-aside .instagram-check-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 11px 0; }
.board-settings-aside .instagram-check-row + .instagram-check-row { border-top: 1px solid var(--line); }
.board-settings-aside .instagram-check-row span { display: grid; gap: 3px; }
.board-settings-aside .instagram-check-row small { color: var(--muted); font-size: 10.5px; font-weight: 500; line-height: 1.45; }
.board-settings-aside .panel-head form { flex: 0 0 auto; }
.board-settings-aside .panel-head .btn svg { width: 14px; height: 14px; }
.board-settings-aside .panel-head .btn:disabled { cursor: not-allowed; opacity: .42; }
.board-settings-aside .board-settings-form > .btn { width: 100%; min-height: 42px; margin: 0; }
@media (max-width: 1180px) {
    .board-settings-aside { position: static; max-height: none; overflow: visible; }
}
.board-sync-meta { display: flex; align-items: center; gap: 14px; }
.board-sync-meta > span { color: var(--muted); font-size: 11.5px; }
.board-sync-meta b { color: var(--ink); }
.board-sync-meta .btn svg { width: 14px; height: 14px; }
.board-settings-form {
    display: flex; align-items: end; gap: 18px; flex-wrap: wrap; padding: 20px 22px;
}
.board-hashtag-field { display: grid; flex: 1 1 320px; gap: 8px; min-width: 0; }
.board-hashtag-field > span { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 800; }
.board-hashtag-field > span small { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.board-settings-form .instagram-check-row { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 9px; }
.instagram-check-row { cursor: pointer; }
.instagram-check-row input {
    appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto;
    width: 40px; height: 23px; border: 1px solid var(--line-strong);
    border-radius: 999px; background: var(--tint-chip); cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.instagram-check-row input::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
    border-radius: 50%; background: var(--muted); transition: transform .2s ease, background .2s ease;
}
.instagram-check-row input:checked { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 30%, transparent); }
.instagram-check-row input:checked::after { transform: translateX(17px); background: var(--lime); }
.board-settings-form .instagram-check-row b { font-size: 12px; white-space: nowrap; }
.board-settings-form > .btn { margin-bottom: 3px; }
.board-sync-error { margin: 0 22px 18px; color: var(--coral); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.board-sync-error.is-info { color: var(--muted); }
.board-connection-status { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; margin: 0 22px 22px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--bg-raise); overflow-wrap: anywhere; }
.board-connection-status > svg { width: 17px; height: 17px; margin-top: 1px; }
.board-connection-status > span { display: grid; gap: 4px; }
.board-connection-status b { color: var(--ink); font-size: 11.5px; }
.board-connection-status small { font-size: 10.5px; line-height: 1.55; }
.board-connection-status code { color: var(--ink); }
.board-connection-status.is-off { border-color: color-mix(in srgb, var(--coral) 30%, var(--line)); background: color-mix(in srgb, var(--coral) 5%, var(--bg-raise)); }
.board-connection-status.is-off > svg { color: var(--coral); }
.instagram-manage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.instagram-moderation-panel.is-empty { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.instagram-moderation-panel.is-empty > .panel-head { padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.instagram-moderation-panel.is-empty .instagram-manage-grid { grid-template-columns: 1fr; padding: 0; }
.instagram-manage-tile {
    position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface); aspect-ratio: 1; transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.instagram-manage-tile:hover { border-color: var(--line-strong); box-shadow: 0 10px 26px rgba(0, 0, 0, .1); }
.instagram-manage-tile > a { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--bg-raise); }
.instagram-manage-shade { position: absolute; z-index: 2; inset: 28% 0 0; background: linear-gradient(transparent, rgba(5, 6, 9, .9)); }
.instagram-manage-copy { position: absolute; z-index: 3; right: 15px; bottom: 14px; left: 15px; display: grid; gap: 6px; color: white; text-shadow: 0 1px 4px rgba(0,0,0,.72); }
.instagram-manage-copy > span { overflow: hidden; display: -webkit-box; font-size: 14px; font-weight: 600; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.instagram-manage-copy small { overflow: hidden; color: var(--lime); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.instagram-manage-copy small b { color: white; font-weight: 850; }
.instagram-hidden-status { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; place-items: center; transform: translate(-50%, -50%); color: rgba(255,255,255,.58); filter: drop-shadow(0 2px 7px rgba(0,0,0,.5)); }
.instagram-hidden-status svg { width: 30px; height: 30px; stroke-width: 1.7; }
.instagram-manage-actions { position: absolute; z-index: 3; top: 10px; right: 10px; display: flex; gap: 8px; }
.instagram-manage-actions form { margin: 0; }
.instagram-manage-icon { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: white; background: rgba(7,9,12,.7); box-shadow: 0 6px 18px rgba(0,0,0,.2); cursor: pointer; -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.instagram-manage-icon:hover { transform: translateY(-1px); border-color: var(--lime); background: rgba(7,9,12,.9); }
.instagram-manage-icon:active { transform: scale(.9); }
.instagram-manage-icon:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.instagram-manage-icon svg { width: 19px; height: 19px; }
.instagram-manage-icon.is-visible { color: var(--lime); }
.instagram-manage-icon.danger:hover { border-color: var(--coral); color: var(--coral); }
.instagram-manage-tile.is-hidden { border-color: color-mix(in srgb, var(--muted) 44%, var(--line)); box-shadow: 0 14px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.05); }
.instagram-manage-tile.is-hidden .instagram-media { filter: grayscale(1) brightness(.38); opacity: .78; }
.instagram-manage-tile.is-hidden .instagram-manage-shade { inset: 0; background: linear-gradient(rgba(5,6,9,.16), rgba(5,6,9,.78)); }
.instagram-manage-tile.is-hidden .instagram-manage-copy { opacity: .62; }

@media (max-width: 980px) {
    .instagram-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .instagram-grid,
    .instagram-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .instagram-grid .instagram-tile { border-radius: 12px; }
    .instagram-manage-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .instagram-manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .instagram-copy { opacity: 1; transform: none; }
    .instagram-tile-shade { opacity: 1; }
}
@media (max-width: 440px) {
    .instagram-manage-grid { grid-template-columns: 1fr; }
}

/* ---------- nationality quota controls ---------- */
.country-limit-setting form { display: flex; align-items: center; gap: 6px; }
.country-limit-setting input[type="number"] {
    width: 62px; padding: 7px 6px; border: 1px solid var(--line-strong); border-radius: 7px;
    color: var(--ink); background: var(--bg-raise); font: inherit; font-size: 12px; text-align: center;
}
.country-quota-panel { margin-bottom: 24px; }
.country-quota-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; padding: 20px 22px; }
.country-quota-grid > p { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.country-quota-row { display: grid; gap: 9px; min-width: 0; }
.country-quota-row > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.country-quota-row b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.country-quota-row small { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.country-quota-row > i { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: var(--tint-chip); }
.country-quota-row > i > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--lime)); }
@media (max-width: 980px) { .country-quota-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .country-quota-grid { grid-template-columns: 1fr; } }

/* ---------- official partner logos ---------- */
.home-partner-section {
    padding: clamp(64px, 8vw, 112px) 0;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-raise) 72%, var(--bg));
}
.home-partner-layout {
    display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
    align-items: start; gap: clamp(48px, 8vw, 112px);
}
.home-partner-heading { position: sticky; top: calc(var(--header-h) + 34px); }
.home-partner-heading .display {
    margin-top: 18px; font-size: clamp(48px, 6vw, 82px); line-height: .9;
    word-break: keep-all;
}
.home-partner-title { word-break: keep-all; }
.home-partner-content { min-width: 0; }
.partner-strip { display: flex; align-items: center; gap: clamp(20px, 4vw, 46px); }
.partner-strip-label {
    display: flex; flex: 0 0 auto; align-items: center; gap: 12px;
    color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; white-space: nowrap;
}
.partner-strip-label::after { content: ''; width: 30px; height: 1px; background: var(--line-strong); }
.partner-strip-logos { display: flex; align-items: center; gap: clamp(20px, 4.5vw, 50px); flex-wrap: wrap; min-width: 0; }
.partner-strip-logos img {
    height: 32px; width: auto; max-width: 190px; object-fit: contain;
    opacity: .68; filter: grayscale(1) contrast(1.02);
    transition: opacity .22s ease, filter .22s ease;
}
.partner-strip-logos .logo-global-center { height: 38px; }
.partner-strip-logos .logo-marketian { height: 36px; }
.partner-strip-logos img:hover { opacity: 1; filter: none; }
/* 다크 모드: 컬러 로고 대신 화이트 모노톤 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .partner-strip-logos img { filter: none; opacity: 1; }
    :root:not([data-theme="light"]) .partner-strip-logos img:hover { filter: none; opacity: 1; }
}
html[data-theme="dark"] .partner-strip-logos img { filter: none; opacity: 1; }
html[data-theme="dark"] .partner-strip-logos img:hover { filter: none; opacity: 1; }

.home-partner-primary {
    display: grid; grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr);
    align-items: start; gap: clamp(36px, 5vw, 68px);
    padding-bottom: clamp(36px, 5vw, 62px); border-bottom: 1px solid var(--line-strong);
}
.home-partner-host { min-width: 0; }
.home-partner-role-logo { min-height: 112px; display: flex; align-items: center; padding: 22px 0 6px; }
.home-partner-role-logo img { width: auto; max-width: 100%; object-fit: contain; }
.home-partner-role-label {
    display: block; margin-top: 8px; color: var(--muted);
    font-size: 12px; font-weight: 800; letter-spacing: .08em;
}
.home-partner-host-logo .logo-global-center { height: clamp(62px, 5.5vw, 78px); }
.home-partner-supporting { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
.home-partner-support-item { min-width: 0; padding-right: clamp(28px, 4vw, 56px); }
.home-partner-support-item + .home-partner-support-item {
    padding-right: 0; padding-left: clamp(28px, 4vw, 56px); border-left: 1px solid var(--line-strong);
}
.home-partner-support-item .home-partner-role-logo { min-height: 126px; padding-top: 26px; }
.home-partner-support-item .logo-marketian { height: clamp(66px, 6vw, 86px); }
.home-partner-support-item .logo-opennol { height: clamp(48px, 4.5vw, 62px); }
.home-partner-support-link {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%; min-width: 0; gap: clamp(14px, 1.6vw, 22px); color: var(--ink);
}
.home-partner-support-link img { min-width: 0; justify-self: start; }
.home-partner-support-link .logo-opennol { width: min(100%, 176px); height: auto; }
.home-partner-support-link span { font-size: clamp(17px, 2vw, 22px); font-weight: 800; white-space: nowrap; }
.home-partner-support-link svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); }
.home-partner-support-link:hover span,
.home-partner-support-link:hover svg { color: var(--lime); }
.home-partner-about { margin: 0; padding: 0; }
.home-partner-about-en {
    display: block; margin-bottom: 8px; color: var(--lime);
    font-family: var(--font-display); font-size: 12px; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
}
.home-partner-about h3 { font-size: clamp(25px, 3vw, 36px); line-height: 1.2; }
.home-partner-about p {
    max-width: 660px; margin-top: 15px; color: var(--ink-soft);
    font-size: clamp(16px, 1.7vw, 19px); line-height: 1.72; word-break: keep-all;
}
.home-partner-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 23px;
    border-bottom: 1px solid currentColor; color: var(--ink); font-weight: 800;
}
.home-partner-link:hover { color: var(--lime); }
.home-partner-link svg { width: 17px; height: 17px; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hero-organizer-seoul,
    :root:not([data-theme="light"]) .hero-organizer-global,
    :root:not([data-theme="light"]) .home-partner-role-logo img {
        filter: none; opacity: 1;
    }
    :root:not([data-theme="light"]) .hero-organizer-seoul,
    :root:not([data-theme="light"]) .logo-seoul-city { content: url("../img/partners/seoul-city-stacked-dark.png"); }
    :root:not([data-theme="light"]) .hero-organizer-global,
    :root:not([data-theme="light"]) .logo-global-center { content: url("../img/partners/seoul-global-center-dark.png"); }
    :root:not([data-theme="light"]) .logo-marketian { content: url("../img/partners/marketian-dark.svg"); }
    :root:not([data-theme="light"]) .logo-opennol { content: url("../img/partners/opennol-dark.png"); }
}
html[data-theme="dark"] .hero-organizer-seoul,
html[data-theme="dark"] .hero-organizer-global,
html[data-theme="dark"] .home-partner-role-logo img { filter: none; opacity: 1; }
html[data-theme="dark"] .hero-organizer-seoul,
html[data-theme="dark"] .logo-seoul-city { content: url("../img/partners/seoul-city-stacked-dark.png"); }
html[data-theme="dark"] .hero-organizer-global,
html[data-theme="dark"] .logo-global-center { content: url("../img/partners/seoul-global-center-dark.png"); }
html[data-theme="dark"] .logo-marketian { content: url("../img/partners/marketian-dark.svg"); }
html[data-theme="dark"] .logo-opennol { content: url("../img/partners/opennol-dark.png"); }

.apply-partners {
    display: grid; grid-template-columns: minmax(170px, .4fr) minmax(0, 1.6fr);
    align-items: stretch; gap: clamp(30px, 5vw, 72px); margin-bottom: 34px;
    padding: 26px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.apply-partners-heading { align-self: center; }
.apply-partners-heading > span {
    display: block; margin-bottom: 7px; color: var(--lime); font-family: var(--font-display);
    font-size: 10px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase;
}
.apply-partners-heading h2 { font-size: clamp(19px, 2vw, 25px); line-height: 1.25; letter-spacing: -.025em; }
.apply-partner-list { display: grid; grid-template-columns: .65fr 1.2fr .8fr 1fr; min-width: 0; }
.apply-partner-city {
    display: flex; align-items: center; min-width: 0; padding-right: clamp(18px, 2.6vw, 36px);
    border-right: 1px solid var(--line);
}
.apply-partner-city .logo-seoul-city { width: auto; height: clamp(34px, 3.5vw, 46px); object-fit: contain; }
.apply-partner-item { display: grid; align-content: center; min-width: 0; padding: 0 clamp(18px, 2.6vw, 36px); }
.apply-partner-item + .apply-partner-item { border-left: 1px solid var(--line); }
.apply-partner-role {
    display: block; margin-bottom: 13px; color: var(--muted);
    font-size: 10.5px; font-weight: 850; letter-spacing: .08em;
}
.apply-partner-logo { display: flex; align-items: center; min-width: 0; min-height: 42px; }
.apply-partner-logo img { width: auto; max-width: 100%; object-fit: contain; }
.apply-partner-logo .logo-global-center { height: clamp(34px, 3.5vw, 46px); }
.apply-partner-logo .logo-marketian { height: clamp(40px, 4vw, 54px); }
.apply-partner-logo .logo-opennol { width: min(100%, 164px); height: auto; }
a.apply-partner-logo { transition: opacity .2s ease; }
a.apply-partner-logo:hover { opacity: .7; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .apply-partner-logo img { filter: none; opacity: 1; }
}
html[data-theme="dark"] .apply-partner-logo img { filter: none; opacity: 1; }

.page-partner-band { padding: 26px 0; border-top: 1px solid var(--line); }
.page-partners { justify-content: center; }
.page-partners .partner-strip-logos img { height: 27px; }
.page-partners .partner-strip-logos .logo-global-center { height: 32px; }
.page-partners .partner-strip-logos .logo-marketian { height: 30px; }

.footer-partners {
    display: grid; grid-template-columns: minmax(100px, .22fr) minmax(0, 1.78fr);
    gap: clamp(24px, 4vw, 60px); margin-top: 10px; padding-top: 24px; border-top: 1px solid var(--line);
}
.footer-partners-title {
    color: var(--muted); font-family: var(--font-display); font-size: 10px;
    font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.footer-partner-groups { display: grid; grid-template-columns: .58fr 1fr .9fr 1fr; min-width: 0; }
.footer-partner-city {
    display: flex; align-items: center; min-width: 0; padding-right: clamp(18px, 2.5vw, 34px);
    border-right: 1px solid var(--line);
}
.footer-partner-city .logo-seoul-city { width: auto; height: 27px; object-fit: contain; opacity: .72; }
.footer-partner-group { min-width: 0; padding: 0 clamp(18px, 2.5vw, 34px); }
.footer-partner-group + .footer-partner-group { border-left: 1px solid var(--line); }
.footer-partner-role {
    display: block; margin-bottom: 11px; color: var(--muted);
    font-size: 10px; font-weight: 800; letter-spacing: .08em;
}
.footer-partner-logos { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); min-width: 0; min-height: 34px; }
.footer-partner-logos img { width: auto; max-width: 100%; object-fit: contain; opacity: .72; }
.footer-partner-logos .logo-global-center { height: 29px; }
.footer-partner-logos .logo-marketian { height: 28px; }
.footer-partner-logos .logo-opennol { width: min(100%, 132px); height: auto; }
a.footer-partner-logos { transition: opacity .2s ease; }
a.footer-partner-logos:hover { opacity: .72; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer-partner-logos img,
    :root:not([data-theme="light"]) .footer-partner-city img { filter: none; opacity: 1; }
}
html[data-theme="dark"] .footer-partner-logos img,
html[data-theme="dark"] .footer-partner-city img { filter: none; opacity: 1; }

@media (max-width: 760px) {
    .partner-strip { flex-direction: column; align-items: flex-start; gap: 14px; }
    .partner-strip-logos { gap: 18px 26px; }
    .partner-strip-logos img { height: 26px; max-width: 150px; }
    .partner-strip-logos .logo-global-center { height: 31px; }
    .partner-strip-logos .logo-marketian { height: 29px; }
    .apply-partners { grid-template-columns: 1fr; gap: 24px; }
    .footer-partners { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 540px) {
    .apply-partner-list { grid-template-columns: 1fr; }
    .apply-partner-city { padding: 0 0 15px; border-right: 0; border-bottom: 1px solid var(--line); }
    .apply-partner-city .logo-seoul-city { height: 34px; }
    .apply-partner-item { grid-template-columns: 58px minmax(0, 1fr); align-items: center; padding: 15px 0; }
    .apply-partner-item + .apply-partner-item { border-top: 1px solid var(--line); border-left: 0; }
    .apply-partner-role { margin: 0; }
    .apply-partner-logo { min-height: 38px; }
    .apply-partner-logo .logo-global-center { height: 34px; }
    .apply-partner-logo .logo-marketian { height: 40px; }
    .apply-partner-logo .logo-opennol { width: min(100%, 150px); }
    .footer-partner-groups { grid-template-columns: 1fr; }
    .footer-partner-city { padding: 0 0 13px; border-right: 0; border-bottom: 1px solid var(--line); }
    .footer-partner-group { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; padding: 13px 0; }
    .footer-partner-group + .footer-partner-group { border-top: 1px solid var(--line); border-left: 0; }
    .footer-partner-role { margin: 0; }
}
@media (max-width: 900px) {
    .home-partner-layout { grid-template-columns: 1fr; gap: 42px; }
    .home-partner-heading { position: static; }
    .home-partner-heading .display { max-width: none; }
}
@media (max-width: 720px) {
    .home-partner-primary { grid-template-columns: 1fr; gap: 30px; }
    .home-partner-host-logo { min-height: 94px; }
    .home-partner-supporting { grid-template-columns: 1fr; gap: 28px; }
    .home-partner-support-item { padding-right: 0; }
    .home-partner-support-item + .home-partner-support-item { padding: 28px 0 0; border-top: 1px solid var(--line-strong); border-left: 0; }
    .home-partner-support-item .home-partner-role-logo { min-height: 92px; padding-top: 18px; }
}
@media (max-width: 640px) {
    .hero-organizer-shell { top: calc(var(--header-h) + 14px); }
    .hero-organizer-lockup { gap: 10px; }
    .hero-organizer-seoul { height: 25px; }
    .hero-organizer-divider { height: 30px; }
    .hero-organizer-label { font-size: 13px; letter-spacing: .06em; }
    .hero-organizer-global { height: 26px; }
    .home-partner-section { padding: 58px 0 70px; }
    .home-partner-layout { gap: 36px; }
    .home-partner-primary { padding-bottom: 36px; }
    .home-partner-supporting { margin-top: 26px; }
    .home-partner-support-item .home-partner-role-logo { min-height: 102px; }
}
@media (max-width: 440px) {
    .hero-organizer-lockup { gap: 8px; }
    .hero-organizer-seoul { height: 22px; }
    .hero-organizer-divider { height: 27px; }
    .hero-organizer-label { font-size: 12px; }
    .hero-organizer-global { height: 23px; }
    .home-partner-support-item .home-partner-role-logo { min-height: 80px; padding-top: 18px; }
    .home-partner-support-link { gap: 14px; }
}
/* 전면 카메라 화면 플래시: 캡처 순간 화면 전체를 조명으로 쓴다 (사진에는 안 찍힘) */
#camScreenFlash { position: fixed; inset: 0; z-index: 9999; background: #fff; opacity: 0; pointer-events: none; transition: opacity .1s ease; }
#camScreenFlash.on { opacity: 1; transition: opacity .06s ease; }