/* ============================================================
   TESLA WHITE — Design Tokens
   ============================================================ */
:root {
    --bg-0:#fff; --bg-1:#fafafa; --bg-2:#f5f5f5; --bg-3:#f0f0f0; --bg-4:#e8e8e8;
    --line:#ebebeb; --line-strong:#d4d4d4; --line-bright:#a3a3a3;
    --tx-1:#0a0a0a; --tx-2:#262626; --tx-3:#525252; --tx-4:#737373; --tx-5:#a3a3a3;
    --accent:#0a0a0a; --accent-hover:#262626; --accent-tx:#fff;
    --ok:#16a34a; --ok-bg:#f0fdf4;
    --warn:#d97706; --warn-bg:#fffbeb;
    --danger:#dc2626; --danger-bg:#fef2f2;
    --info:#0284c7; --info-bg:#f0f9ff;
    --hive-red:#dc2626;
    --hive-green:#16a34a;
    --ease:cubic-bezier(.25,.8,.35,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-bounce:cubic-bezier(.18,1.25,.4,1);
    --t-fast:120ms; --t-norm:220ms; --t-slow:360ms;
    --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:16px; --r-2xl:24px; --r-pill:999px;
    --gap-1:4px; --gap-2:8px; --gap-3:12px; --gap-4:16px; --gap-5:24px; --gap-6:32px; --gap-7:48px; --gap-8:64px; --gap-9:96px; --gap-10:128px;
    --shadow-sm:0 1px 2px rgba(0,0,0,.04);
    --shadow-md:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --shadow-lg:0 4px 14px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.03);
    --shadow-xl:0 18px 48px rgba(0,0,0,.08),0 6px 12px rgba(0,0,0,.04);
    --shadow-2xl:0 32px 80px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.04);
    --font-sans:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mono:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --maxw:1240px; --nav-h:64px;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {word-break: keep-all!important;
    margin:0; font-family:var(--font-sans);
    font-size:16px; line-height:1.65;
    background:var(--bg-0); color:var(--tx-2);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    padding-bottom:64px; /* sticky CTA */
}
/* 본문 텍스트 최소 16px 정책 — micro 라벨/뱃지/admin mockup 내부 chrome 만 예외 */
h1,h2,h3,h4,h5,h6 { margin:0; color:var(--tx-1); font-weight:600; letter-spacing:-.02em; line-height:1.15; }
p { margin:0; }
a { color:inherit; text-decoration:none; transition:color var(--t-fast) var(--ease); }
button { font-family:inherit; cursor:pointer; }
img { max-width:100%; display:block; }
.mono { font-family:var(--font-mono); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
    position:sticky; top:0; z-index:50;
    height:var(--nav-h);
    background:rgba(255,255,255,.78);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    border-bottom:1px solid var(--line);
}
.nav-inner {
    max-width:var(--maxw); margin:0 auto; height:100%;
    padding:0 var(--gap-5);
    display:flex; align-items:center; gap:var(--gap-7);
}
.brand {
    display:flex; align-items:center; gap:var(--gap-2);
    font-weight:700; font-size:17px; letter-spacing:-.02em; color:var(--tx-1);
}
.brand-mark {
    width:26px; height:26px;
    background:var(--accent); color:var(--accent-tx);
    display:grid; place-items:center;
    font-family:var(--font-mono); font-size:16px; font-weight:700;
    border-radius:var(--r-sm);
}
.nav-menu {
    display:flex; align-items:center; gap:var(--gap-6);
    list-style:none; padding:0; margin:0; flex:1;
}
.nav-menu a {
    font-size:16px; color:var(--tx-3);
    font-weight:500; position:relative; padding:6px 0;
}
.nav-menu a:hover { color:var(--tx-1); }
.nav-menu a::after {
    content:''; position:absolute; left:0; right:0; bottom:0;
    height:1.5px; background:var(--accent);
    transform:scaleX(0); transform-origin:left;
    transition:transform var(--t-norm) var(--ease);
}
.nav-menu a:hover::after { transform:scaleX(1); }
.nav-cta { display:flex; align-items:center; gap:var(--gap-3); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:var(--gap-2); padding:0 var(--gap-5); height:44px;
    background:var(--bg-2); color:var(--tx-1);
    border:1px solid var(--line); border-radius:var(--r-pill);
    font-family:var(--font-sans); font-size:16px; font-weight:600;
    letter-spacing:-.005em; cursor:pointer;
    transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    text-decoration:none; white-space:nowrap;
}
.btn:hover { background:var(--bg-4); border-color:var(--line-strong); }
.btn:active { transform:scale(.98); }
.btn.primary { background:var(--accent); color:var(--accent-tx); border-color:var(--accent); }
.btn.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--tx-2); }
.btn.ghost:hover { background:var(--bg-2); color:var(--tx-1); border-color:transparent; }
.btn.outline { background:transparent; border-color:var(--accent); color:var(--accent); }
.btn.outline:hover { background:var(--accent); color:var(--accent-tx); }
.btn.lg { height:56px; padding:0 var(--gap-7); font-size:17px; }
.btn.sm { height:36px; padding:0 var(--gap-4); font-size:16px; }
.btn .arrow { display:inline-block; transition:transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform:translateX(2px); }

/* ============================================================
   CONTAINERS / SECTIONS
   ============================================================ */
.container { max-width:var(--maxw); margin:0 auto; padding:0 var(--gap-5); }
.container.wide { max-width:1480px; }
section { padding:var(--gap-10) 0; }
.eyebrow {
    font-family:var(--font-sans); font-size:16px;
    color:var(--tx-4); text-transform:uppercase;
    letter-spacing:.14em; font-weight:700;
    margin-bottom:var(--gap-3);
    display:inline-flex; align-items:center; gap:var(--gap-2);
}
.eyebrow::before { content:''; display:inline-block; width:18px; height:1px; background:var(--tx-4); }
.section-title {
    font-size:clamp(28px,4vw,46px);
    margin-bottom:var(--gap-4);
    letter-spacing:-.03em; font-weight:700;
}
.section-lead {
    font-size:18px; color:var(--tx-3);
    line-height:1.6; max-width:680px;
    margin-bottom:var(--gap-7);
}
.sec-headline {
    text-align:center;
    margin-bottom:var(--gap-7);
}
.sec-headline .eyebrow { margin:0 auto var(--gap-3); }
.sec-headline .eyebrow::before { display:none; }
.sec-headline h2 {
    font-size:clamp(32px,4.6vw,52px);
    letter-spacing:-.03em; margin-bottom:var(--gap-3);
    font-weight:700;
}
.sec-headline p {
    font-size:18px; color:var(--tx-3);
    max-width:680px; margin:0 auto; line-height:1.6;
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding:var(--gap-9) 0 var(--gap-7); position:relative; overflow:hidden; }
.hero-bg {
    position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(circle at 18% 0%, rgba(0,0,0,.045), transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(0,0,0,.03), transparent 50%);
    pointer-events:none;
}
.hero-grid {
    position:relative; z-index:1;
    display:grid; grid-template-columns:1fr; gap:var(--gap-7);
    align-items:center;
}
@media (min-width:1080px) { .hero-grid { grid-template-columns:1fr 1.2fr; gap:var(--gap-8); } }
.hero-tagline {
    font-family:var(--font-sans); font-size:16px;
    text-transform:uppercase; letter-spacing:.18em;
    color:var(--tx-4); margin-bottom:var(--gap-5);
    display:inline-flex; align-items:center; gap:var(--gap-3);
    font-weight:600;
}
.hero-tagline .dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--ok);
    box-shadow:0 0 0 4px rgba(22,163,74,.12);
    animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.hero h1 {
    font-size:clamp(36px,5.4vw,68px);
    line-height:.98; letter-spacing:-.038em;
    font-weight:700; margin-bottom:var(--gap-5);
}
.hero h1 .accent {
    display:inline-block;
    background:linear-gradient(180deg, var(--tx-1) 0%, var(--tx-3) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead {
    font-size:19px; color:var(--tx-3);
    line-height:1.65; margin-bottom:var(--gap-6); max-width:560px;
}
.hero-lead strong { color:var(--tx-1); font-weight:700; }
.hero-cta { display:flex; flex-wrap:wrap; gap:var(--gap-3); }
.hero-meta {
    margin-top:var(--gap-7); padding-top:var(--gap-5);
    border-top:1px solid var(--line);
    display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-5);
}
@media (min-width:560px) { .hero-meta { grid-template-columns:repeat(4,1fr); } }
.hero-meta .meta-item { display:flex; flex-direction:column; }
.hero-meta .num {
    font-family:var(--font-sans); font-size:32px; font-weight:800;
    color:var(--tx-1); letter-spacing:-.03em; line-height:1;
}
.hero-meta .num small { font-size:.45em; color:var(--tx-4); font-weight:600; margin-left:2px; }
.hero-meta .lbl { font-size:16px; color:var(--tx-4); margin-top:10px; line-height:1.45; font-weight:500; }

/* ============================================================
   ADMIN SHELL MOCKUP
   ============================================================ */
.shell-frame {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); overflow:hidden;
    box-shadow:var(--shadow-2xl);
    transform:perspective(1600px) rotateY(-2deg) rotateX(1.5deg);
    transition:transform var(--t-slow) var(--ease);
}
.shell-frame:hover { transform:perspective(1600px) rotateY(0) rotateX(0); }
.shell-frame.flat { transform:none; box-shadow:var(--shadow-xl); }
.shell-frame.flat:hover { transform:none; }

.shell-chrome {
    height:32px; background:var(--bg-2);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; padding:0 var(--gap-3);
    gap:var(--gap-2);
}
.shell-chrome .dot { width:10px; height:10px; border-radius:50%; background:var(--line-strong); }
.shell-chrome .dot.r { background:#ff5f57; }
.shell-chrome .dot.y { background:#febc2e; }
.shell-chrome .dot.g { background:#28c840; }
.shell-chrome .url {
    flex:1; margin-left:var(--gap-2);
    height:22px; border-radius:var(--r-sm);
    background:var(--bg-0); border:1px solid var(--line);
    display:flex; align-items:center; padding:0 var(--gap-3);
    font-family:var(--font-mono); font-size:11px; color:var(--tx-4);
    gap:6px;
}
.shell-chrome .url::before {
    content:'\f4ea'; font-family:'phosphor';
    font-size:11px; color:var(--ok);
}

.shell-body {
    display:grid;
    grid-template-columns:64px 1fr;
    grid-template-rows:44px 1fr;
    grid-template-areas:"modes adminbar" "modes content";
    min-height:560px;
    background:var(--bg-0);
}

/* modes-nav */
.modes-nav {
    grid-area:modes;
    background:var(--accent); color:var(--accent-tx);
    display:flex; flex-direction:column; align-items:center;
    padding:var(--gap-3) 0;
    gap:6px; position:relative;
}
.mn-logo {
    width:36px; height:36px;
    background:var(--accent-tx); color:var(--accent);
    border-radius:var(--r-md);
    display:grid; place-items:center;
    font-weight:800; font-size:15px;
    margin-bottom:var(--gap-2);
    font-family:var(--font-mono);
}
.mn-master {
    font-family:var(--font-mono); font-size:9px;
    background:rgba(255,255,255,.12); color:var(--accent-tx);
    padding:3px 6px; border-radius:3px;
    letter-spacing:.12em; font-weight:700;
    margin-bottom:var(--gap-3);
}
.mn-item {
    width:44px; padding:8px 0;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color:rgba(255,255,255,.55);
    border-radius:var(--r-md);
    transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    cursor:pointer; position:relative;
}
.mn-item .ic { font-size:17px; line-height:1; }
.mn-item .lbl { font-size:9px; letter-spacing:-.005em; opacity:.8; }
.mn-item:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.9); }
.mn-item.active { background:rgba(255,255,255,.14); color:var(--accent-tx); }
.mn-item.active::before {
    content:''; position:absolute; left:0; top:6px; bottom:6px;
    width:3px; background:var(--accent-tx); border-radius:0 2px 2px 0;
}
.mn-item.locked { opacity:.35; }
.mn-item.locked .lock-badge { position:absolute; top:4px; right:6px; font-size:9px; }
.mn-divider { width:36px; height:1px; background:rgba(255,255,255,.1); margin:6px 0; }
.mn-divider[data-label]::after {
    content:attr(data-label); display:block; text-align:center;
    font-family:var(--font-mono); font-size:8px;
    color:rgba(255,255,255,.4); letter-spacing:.12em; margin-top:4px;
    transform:translateY(-2px);
}
.mn-spacer { flex:1; }

/* admin-bar */
.admin-bar {
    grid-area:adminbar;
    background:var(--accent); color:var(--accent-tx);
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center;
    padding:0 var(--gap-4); gap:var(--gap-3);
    font-size:11.5px;
}
.ab-title { display:flex; align-items:center; gap:8px; min-width:0; }
.ab-title .hive { font-weight:700; letter-spacing:.22em; font-size:11px; }
.ab-title .sep { color:rgba(255,255,255,.32); font-size:10px; }
.ab-title .leaf { color:rgba(255,255,255,.7); font-size:11px; }
.ab-grow { flex:1; }
.device-tog {
    display:inline-flex;
    background:rgba(255,255,255,.06);
    border-radius:var(--r-sm); padding:2px;
    gap:2px;
}
.device-tog button {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px; height:24px;
    background:transparent; border:0;
    color:rgba(255,255,255,.55);
    font-size:10px; font-weight:600;
    border-radius:3px;
}
.device-tog button .ph { font-size:11px; }
.device-tog button.active { background:rgba(255,255,255,.14); color:var(--accent-tx); }
.chip {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 8px; height:20px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--r-sm);
    font-family:var(--font-mono); font-size:9.5px;
    color:rgba(255,255,255,.7);
    letter-spacing:.04em;
}
.chip.live { color:var(--ok); border-color:rgba(22,163,74,.3); }
.chip.live::before {
    content:''; width:5px; height:5px;
    border-radius:50%; background:var(--ok);
    animation:pulse 2.4s var(--ease) infinite;
}
.chip.warn { color:var(--warn); border-color:rgba(217,119,6,.3); }
.chip.danger { color:var(--danger); border-color:rgba(220,38,38,.3); }
.btn-exit {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px; height:24px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--r-sm);
    color:rgba(255,255,255,.7);
    font-size:10px;
}

/* shell-content */
.shell-content {
    grid-area:content; display:grid;
    grid-template-columns:320px 1fr;
    background:var(--bg-1);
    overflow:hidden;
}

/* edit-panel */
.edit-panel {
    background:var(--bg-0);
    border-right:1px solid var(--line);
    display:flex; flex-direction:column;
    overflow:hidden;
}

/* panel minimap */
.panel-minimap {
    padding:var(--gap-3);
    border-bottom:1px solid var(--line);
    background:var(--bg-1);
}
.pmm-chrome {
    display:flex; align-items:center; gap:6px;
    height:22px; padding:0 8px;
    background:var(--bg-3);
    border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.pmm-chrome .pmm-dots { display:flex; gap:4px; }
.pmm-chrome .pmm-dot { width:7px; height:7px; border-radius:50%; }
.pmm-chrome .pmm-dot.r { background:#ff5f57; opacity:.65; }
.pmm-chrome .pmm-dot.y { background:#febc2e; opacity:.65; }
.pmm-chrome .pmm-dot.g { background:#28c840; opacity:.65; }
.pmm-chrome .pmm-domain {
    flex:1; text-align:center;
    font-family:var(--font-mono); font-size:9px;
    color:var(--tx-4); letter-spacing:.02em;
}
.pmm-frame {
    background:var(--bg-2);
    padding:4px;
    display:flex; flex-direction:column; gap:2px;
    border-radius:0 0 var(--r-sm) var(--r-sm);
}
.pmm-box {
    position:relative; overflow:hidden;
    background:var(--bg-0);
    border:1px solid var(--line);
    border-radius:3px;
    cursor:pointer;
    transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pmm-box[data-h="sm"] { height:22px; }
.pmm-box[data-h="md"] { height:36px; }
.pmm-box[data-h="lg"] { height:50px; }
.pmm-box[data-h="xl"] { height:64px; }
.pmm-box:hover { border-color:var(--line-strong); }
.pmm-box.active { background:var(--accent); border-color:var(--accent); }
.pmm-box .pmm-box-label {
    position:absolute; top:4px; left:6px; z-index:3;
    font-size:9px; font-weight:700; letter-spacing:.005em;
    color:var(--tx-3);
    padding:1px 5px; background:var(--bg-1);
    border-radius:2px; line-height:1;
}
.pmm-box.active .pmm-box-label { color:var(--accent-tx); background:rgba(255,255,255,.12); }
.pmm-box[data-h="sm"] .pmm-box-label { top:50%; transform:translateY(-50%); background:transparent; }
.pmm-box.active[data-h="sm"] .pmm-box-label { background:transparent; }
.pmm-mini {
    position:absolute; inset:0;
    display:flex; align-items:center; gap:3px;
    padding:4px 6px 4px 56px;
    pointer-events:none; z-index:1;
    opacity:.8;
}
.pmm-box[data-h="sm"] .pmm-mini { padding:0 8px 0 50px; }
.pmm-box[data-h="lg"] .pmm-mini, .pmm-box[data-h="xl"] .pmm-mini { padding:18px 8px 6px; }
.pmm-mini .pe { background:var(--bg-3); border-radius:1.5px; flex-shrink:0; }
.pmm-box.active .pe { background:rgba(255,255,255,.18); }
.pe-logo { width:14px; height:5px; }
.pe-flex { flex:1; background:transparent !important; }
.pe-dot { width:3px; height:3px; border-radius:50%; }
.pe-stack { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:3px; margin:auto; }
.pe-line { height:2.5px; }
.pe-line.w50 { width:36px; }
.pe-line.w70 { width:50px; }
.pe-pill { width:28px; height:6px; border-radius:3px; }
.pe-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; width:100%; max-width:180px; margin:auto; position:relative; z-index:1; }
.pe-grid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:2px; width:100%; max-width:200px; margin:auto; position:relative; z-index:1; }
.pe-card { aspect-ratio:1.4; background:var(--bg-3); border-radius:1.5px; }
.pmm-box.active .pe-card { background:rgba(255,255,255,.18); }
.pe-row { position:relative; z-index:1; display:flex; gap:6px; width:100%; padding:0 6px; margin:auto; }
.pe-doc, .pe-rev { display:flex; flex-direction:column; gap:2px; flex:1; align-items:center; }
.pe-circle { width:12px; height:12px; border-radius:50%; background:var(--bg-3); }
.pmm-box.active .pe-circle { background:rgba(255,255,255,.22); }
.pmm-cap {
    display:flex; align-items:center; gap:8px;
    margin-top:8px; padding:0 4px;
    font-size:9.5px;
}
.pmm-cap-tag {
    font-family:var(--font-mono); font-size:8px;
    color:var(--tx-5); letter-spacing:.12em;
    padding:2px 5px; background:var(--bg-2); border-radius:2px;
}
.pmm-cap-dot { width:4px; height:4px; border-radius:50%; background:var(--ok); }
.pmm-cap-current { color:var(--tx-2); font-weight:600; }

/* edit-panel forms */
.ep-section { padding:var(--gap-4); border-bottom:1px solid var(--line); }
.ep-section:last-child { border-bottom:none; }
.ep-h {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:var(--gap-3);
}
.ep-h .name {
    font-size:11px; font-weight:700;
    color:var(--tx-4); text-transform:uppercase;
    letter-spacing:.08em;
}
.ep-h .badge {
    font-family:var(--font-mono); font-size:9px;
    color:var(--tx-3); padding:2px 6px;
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r-sm);
}
.ep-row {
    display:grid; grid-template-columns:80px 1fr;
    gap:var(--gap-3); align-items:center;
    padding:6px 0; font-size:12px;
}
.ep-row .lbl { color:var(--tx-4); font-size:11px; }
.ep-row .val {
    height:26px; padding:0 8px;
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-sm);
    display:flex; align-items:center;
    font-family:var(--font-mono); font-size:11px;
    color:var(--tx-2);
}
.ep-slider {
    position:relative; height:4px;
    background:var(--bg-3); border-radius:2px;
    margin:14px 0 4px;
}
.ep-slider .fill { position:absolute; left:0; top:0; bottom:0; background:var(--accent); border-radius:2px; }
.ep-slider .knob {
    position:absolute; top:50%; transform:translate(-50%,-50%);
    width:14px; height:14px;
    background:var(--bg-0); border:1.5px solid var(--accent);
    border-radius:50%; box-shadow:var(--shadow-md);
}
.ep-slider .balloon {
    position:absolute; top:-22px; transform:translateX(-50%);
    background:var(--accent); color:var(--accent-tx);
    font-family:var(--font-mono); font-size:10px; font-weight:600;
    padding:2px 6px; border-radius:3px;
}
.ep-slider .balloon::after {
    content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
    border:4px solid transparent; border-top-color:var(--accent); border-bottom:0;
}
.bgrp {
    display:inline-flex; padding:2px;
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r-sm); gap:1px;
}
.bgrp button {
    border:0; background:transparent;
    padding:4px 10px; font-size:10px; font-weight:600;
    color:var(--tx-3); border-radius:3px;
    transition:all var(--t-fast) var(--ease);
}
.bgrp button.on { background:var(--accent); color:var(--accent-tx); }

/* canvas */
.canvas-wrap {
    background:var(--bg-2);
    padding:var(--gap-4);
    display:flex; align-items:stretch; justify-content:center;
    min-height:0; overflow:hidden;
}
.canvas-frame {
    flex:1;
    background:var(--bg-0);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-md);
    overflow:hidden;
    display:flex; flex-direction:column;
}
.canvas-iframe-h {
    height:28px; background:var(--bg-1);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center;
    padding:0 var(--gap-3); gap:8px;
    font-family:var(--font-mono); font-size:9.5px;
    color:var(--tx-4);
}
.canvas-iframe-h::before {
    content:'\f31d'; font-family:'phosphor'; font-size:11px;
}
.canvas-body { flex:1; padding:var(--gap-4); overflow:hidden; position:relative; }

.preview-hero {
    height:160px; background:linear-gradient(135deg,#fafafa 0%,#f0f0f0 100%);
    border-radius:var(--r-md);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    margin-bottom:var(--gap-3);
    border:1px solid var(--line); position:relative;
}
.preview-hero h2 {
    font-size:24px; letter-spacing:-.025em; color:var(--tx-1); margin-bottom:6px;
}
.preview-hero p { font-size:11px; color:var(--tx-3); }
.preview-hero .accent-line {
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    width:24px; height:2px; background:var(--accent); border-radius:1px;
}
.preview-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.preview-cell {
    aspect-ratio:4/3; background:var(--bg-2);
    border-radius:var(--r-sm); position:relative;
}
.preview-cell::after {
    content:''; position:absolute; bottom:6px; left:6px;
    width:60%; height:4px; background:var(--bg-3); border-radius:2px;
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust { padding:var(--gap-7) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-1); }
.trust-grid {
    display:grid; gap:var(--gap-6); align-items:center;
    grid-template-columns:1fr;
}
@media (min-width:880px) { .trust-grid { grid-template-columns:1fr auto; } }
.trust-logos {
    display:flex; flex-wrap:wrap; gap:var(--gap-7);
    align-items:center;
}
.trust-label {
    font-family:var(--font-mono); font-size:11px;
    color:var(--tx-4); text-transform:uppercase; letter-spacing:.12em;
    margin-bottom:var(--gap-3); display:block;
}
.logo-mark {
    font-weight:700; color:var(--tx-3);
    font-size:17px; letter-spacing:-.02em;
    opacity:.6;
    transition:opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.logo-mark:hover { opacity:1; color:var(--tx-1); }
.trust-stats {
    display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-4);
    padding-left:var(--gap-6); border-left:1px solid var(--line);
}
@media (min-width:560px) { .trust-stats { grid-template-columns:repeat(4,1fr); } }
@media (max-width:879px) { .trust-stats { padding-left:0; border-left:none; padding-top:var(--gap-5); border-top:1px solid var(--line); } }
.trust-stat .num {
    font-family:var(--font-sans); font-size:24px; font-weight:800;
    color:var(--tx-1); letter-spacing:-.02em; line-height:1;
}
.trust-stat .lbl { font-size:16px; color:var(--tx-4); margin-top:8px; font-weight:500; }
.trust-label { font-family:var(--font-sans); font-size:16px; font-weight:700; }
.logo-mark { font-size:20px; }

/* ============================================================
   GLOBAL FONT FLOOR — 본문 텍스트 최소 16px 정책
   (mockup chrome 은 별도 selector 우선순위로 보존)
   ============================================================ */
.problem-card h4 { font-size:18px; }
.problem-card .v { font-family:var(--font-sans); font-size:28px; font-weight:800; }
.problem-card p { font-size:16px; line-height:1.6; }
.problem-clos { font-size:clamp(22px,2.6vw,30px); }

.why-card .num { font-family:var(--font-sans); font-size:16px; font-weight:700; }
.why-card h4 { font-size:20px; margin-bottom:var(--gap-3); }
.why-card p { font-size:16px; line-height:1.65; }

.roi-side .ttl { font-family:var(--font-sans); font-size:16px; font-weight:700; }
.roi-list li { font-size:16px; }
.roi-list li .v { font-family:var(--font-sans); font-size:20px; font-weight:800; }
.roi-side .total .lbl { font-size:16px; }
.roi-side .total .v { font-family:var(--font-sans); font-size:40px; font-weight:800; }
.roi-side.hive .big p { font-size:19px; }
.roi-side.hive .big small { font-family:var(--font-sans); font-size:16px; font-weight:600; }

.cmp-thead { font-family:var(--font-sans); font-size:16px; font-weight:700; padding:var(--gap-4) var(--gap-5); }
.cmp-row { padding:var(--gap-4) var(--gap-5); }
.cmp-row .lbl { font-size:17px; }
.cmp-row .out, .cmp-row .hv { font-size:16px; }

.tl-time { font-family:var(--font-sans); font-size:22px; font-weight:800; }
.tl-action { font-size:17px; }
.tl-action small { font-family:var(--font-sans); font-size:16px; font-weight:500; letter-spacing:0; }
.tl-mini { font-family:var(--font-sans); font-size:16px; padding:8px 12px; }
.tl-clos { font-size:clamp(20px,2.4vw,26px); padding:var(--gap-6); }

.scene .stage { font-family:var(--font-sans); font-size:16px; font-weight:700; }
.scene h4 { font-size:20px; }
.scene .flow-step { font-size:16px; padding:14px 16px; }
.scene .flow-step .v { font-family:var(--font-sans); font-size:16px; font-weight:600; }
.scene p { font-size:16px; line-height:1.65; }

.builder-tabs button { font-size:16px; height:42px; padding:8px 22px; }
.builder-info h3 { font-size:30px; margin-bottom:var(--gap-4); }
.builder-info p { font-size:17px; line-height:1.65; margin-bottom:var(--gap-5); }
.builder-feat-list li { font-size:16px; padding:12px 0; grid-template-columns:28px 1fr; }
.builder-feat-list li .ph { width:28px; height:28px; font-size:14px; }
.builder-feat-list li strong { font-size:16px; }
.builder-feat-list li small { font-family:var(--font-sans); font-size:16px; font-weight:500; letter-spacing:0; }

/* CW */
.cw-step .num { font-family:var(--font-sans); font-size:16px; font-weight:700; }
.cw-step h5 { font-size:16px; }
.cw-step p { font-size:15px; }
.cw-mod h5 { font-size:17px; margin-bottom:var(--gap-3); }
.cw-mod ul li { font-size:16px; padding-left:16px; }
.cw-clos { font-size:clamp(18px,2vw,22px); padding:var(--gap-5) var(--gap-6); }

/* SEASON */
.season-hero p { font-size:16px; }
.season-card .meta { font-size:16px; gap:var(--gap-3); padding:var(--gap-4) var(--gap-5); }
.season-card .meta .tag { font-family:var(--font-sans); font-size:14px; font-weight:700; padding:5px 9px; }
.season-card .meta .v { font-family:var(--font-sans); font-size:17px; font-weight:800; }
.season-clos p { font-size:18px; }

/* AI */
.ai-block .label { font-family:var(--font-sans); font-size:16px; font-weight:700; }
.ai-block h3 { font-size:24px; }
.ai-list li { padding:14px 16px; }
.ai-list li .name { font-size:16px; }
.ai-list li .desc { font-family:var(--font-sans); font-size:15px; font-weight:500; letter-spacing:0; }

/* GLOBAL — gl-pill만 컨트롤 (본문). gl-glossary/gl-card/gl-engines 는 mockup 이라 원본 폰트 유지 */
.gl-pill { font-family:var(--font-sans); }

/* IMAGE / IC — img-convert mockup 은 원본 폰트 유지 (admin UI 시각화) */

/* HQ — hub/branch/flow-row 는 다이어그램 mockup 이라 원본 폰트 유지. side/policy 만 본문 */
.hq-side h3 { font-size:24px; }
.hq-side .desc { font-size:16px; }
.hq-side .feat-list li { font-size:16px; padding:10px 0; }
.hq-policy .label { font-family:var(--font-sans); font-size:16px; font-weight:700; }
.hq-policy h4 { font-size:20px; }
.hq-policy p { font-size:16px; line-height:1.65; }
.hq-policy ul li { font-size:16px; padding:8px 0 8px 18px; }

/* MIGRATION */
.mig-card h3 { font-size:24px; }
.mig-card .lead { font-size:16px; }
.mig-tool { padding:16px 18px; }
.mig-tool .ic { width:40px; height:40px; font-family:var(--font-sans); font-size:14px; font-weight:800; }
.mig-tool .nm { font-size:16px; }
.mig-tool .desc { font-family:var(--font-sans); font-size:14px; font-weight:500; letter-spacing:0; }
.mig-tool .stat { font-family:var(--font-sans); font-size:16px; font-weight:700; padding:4px 10px; }
.mig-promise .big { font-family:var(--font-sans); font-size:40px; font-weight:800; }
.mig-promise .txt { font-size:15px; }
.mig-stat .num { font-family:var(--font-sans); font-size:32px; font-weight:800; }
.mig-stat .lbl { font-size:15px; }
.mig-flow .step .n { font-family:var(--font-sans); font-size:14px; font-weight:700; width:32px; height:32px; }
.mig-flow .step h5 { font-size:16px; }
.mig-flow .step p { font-size:15px; }

/* OTA */
.ota-tick .ver { font-family:var(--font-sans); font-size:16px; font-weight:800; }
.ota-tick .label { font-family:var(--font-sans); font-size:14px; font-weight:600; }
.ota-card { padding:var(--gap-5); }
.ota-card h5 { font-size:17px; }
.ota-card p { font-size:15px; }
.ota-promise { font-size:clamp(22px,2.8vw,30px); }
.ota-promise span { font-size:.6em; }

/* PRICING */
.pri-cmp-side h4 { font-family:var(--font-sans); font-size:16px; font-weight:700; }
.pri-cmp-side ul li { font-size:16px; padding:10px 0; }
.price-card .tier { font-family:var(--font-sans); font-size:14px; font-weight:700; }
.price-card h3 { font-size:24px; }
.price-card .desc { font-size:14px; }
.price-card .amount .num { font-family:var(--font-sans); font-size:36px; font-weight:800; }
.price-card .amount .unit { font-size:14px; font-weight:600; }
.price-card .billing { font-family:var(--font-sans); font-size:16px; }
.price-card ul.feats li { font-size:14px; }
.price-setup .lbl { font-family:var(--font-sans); font-size:14px; font-weight:700; }
.price-setup .v { font-family:var(--font-sans); font-size:32px; font-weight:800; }
.price-setup p { font-size:14px; }

/* FAQ */
.faq-item summary { font-size:19px; padding:var(--gap-5) 0; }
.faq-item summary::after { font-size:28px; }
.faq-item .faq-body { font-size:16px; line-height:1.7; }
.faq-item .faq-body code { font-family:var(--font-sans); font-size:15px; font-weight:600; }

/* CTA + FOOTER */
.cta-final p { font-size:19px; }
.footer-brand p { font-size:15px; }
.footer h5 { font-family:var(--font-sans); font-size:14px; font-weight:700; }
.footer ul li a { font-size:15px; }
.footer-bottom { font-size:14px; }

/* Sticky CTA bar */
.sticky-cta .lbl { font-size:16px; }

/* === 추가 폰트 보강 — 본문 영역 16px 미만 일괄 상향 === */
.btn.sm { font-size:15px; height:38px; padding:0 16px; }
.nav-cta .btn.sm { font-size:14px; }

/* problem cards */
.problem-card .v { font-size:30px; }

/* WHY cards */
.why-card .num { font-size:18px; }

/* ROI */
.roi-list li { font-size:17px; padding-bottom:14px; }
.roi-list li .v { font-size:22px; }
.roi-side .ttl { font-size:17px; }
.roi-side .total .lbl { font-size:17px; }

/* CMP */
.cmp-thead { font-size:17px; padding:var(--gap-5); }
.cmp-row { padding:var(--gap-4) var(--gap-5); }
.cmp-row .lbl { font-size:18px; }
.cmp-row .out, .cmp-row .hv { font-size:17px; }

/* Timeline */
.tl-time { font-size:24px; }
.tl-action { font-size:18px; }
.tl-action small { font-size:16px; }
.tl-mini { font-size:16px; padding:9px 14px; }

/* SCENES */
.scene .stage { font-size:16px; }
.scene h4 { font-size:22px; }
.scene .flow-step { font-size:16px; padding:14px 16px; }
.scene .flow-step .v { font-size:16px; }
.scene p { font-size:17px; line-height:1.7; }

/* BUILDER */
.builder-tabs button { font-size:16px; height:44px; padding:8px 22px; }
.builder-info h3 { font-size:32px; }
.builder-info p { font-size:18px; line-height:1.7; }
.builder-feat-list li { font-size:17px; padding:14px 0; grid-template-columns:32px 1fr; }
.builder-feat-list li .ph { width:32px; height:32px; font-size:16px; }
.builder-feat-list li strong { font-size:17px; }
.builder-feat-list li small { font-size:16px; }

/* HiQ side / policy */
.hq-side h3 { font-size:26px; }
.hq-side .desc { font-size:17px; }
.hq-side .feat-list li { font-size:17px; padding:12px 0; }
.hq-side .feat-list li::before { font-size:18px; }
.hq-policy .label { font-size:17px; }
.hq-policy h4 { font-size:22px; }
.hq-policy p { font-size:17px; line-height:1.7; }
.hq-policy ul li { font-size:17px; padding:10px 0 10px 18px; }

/* Image feat list */
.img-feat h5 { font-size:20px; }
.img-feat p { font-size:17px; line-height:1.7; }

/* CW */
.cw-step h5 { font-size:18px; }
.cw-step p { font-size:16px; }
.cw-step .num { font-size:17px; }
.cw-mod h5 { font-size:18px; }
.cw-mod ul li { font-size:17px; padding-left:18px; }

/* AI */
.ai-block .label { font-size:17px; }
.ai-block h3 { font-size:26px; }
.ai-list li { padding:16px 18px; }
.ai-list li .name { font-size:17px; }
.ai-list li .desc { font-size:16px; }
.ai-list li .ic { width:38px; height:38px; font-size:17px; }

/* Season meta sidebar — 본문 영역 (mockup 아님) */
.ss-meta-card .lbl { font-size:14px; }
.ss-meta-card .num { font-size:36px; }
.ss-meta-card .sub { font-size:15px; }
.ss-meta-action { font-size:16px; padding:20px 22px; }
.ss-opt-list li { font-size:16px; padding:10px 0; }
.ss-opt-list .v { font-size:14px; padding:4px 10px; }

/* Seo auto cards */
.seo-auto-card { padding:var(--gap-4) var(--gap-5); }
.seo-auto-card .ic { width:40px; height:40px; font-size:18px; }
.seo-auto-card .name { font-size:17px; }
.seo-auto-card .desc { font-size:14px; }
.seo-auto-card .stat { font-size:14px; }

/* Pricing */
.price-card .tier { font-size:14px; }
.price-card h3 { font-size:26px; }
.price-card .desc { font-size:16px; line-height:1.6; }
.price-card .amount .num { font-size:38px; }
.price-card .amount .unit { font-size:16px; }
.price-card .billing { font-size:14px; line-height:1.5; }
.price-card ul.feats li { font-size:15px; line-height:1.55; }
.price-setup .lbl { font-size:14px; }
.price-setup .v { font-size:36px; }
.price-setup p { font-size:15px; }

/* PriCmp */
.pri-cmp-side h4 { font-size:17px; }
.pri-cmp-side ul li { font-size:17px; padding:12px 0; }

/* FAQ */
.faq-tabs button { font-size:16px; height:46px; padding:10px 20px; }
.faq-tabs button .cnt { font-size:14px; }
.faq-item summary { font-size:20px; padding:var(--gap-5) 0; }
.faq-item summary::after { font-size:30px; }
.faq-item .faq-body { font-size:17px; line-height:1.75; }
.faq-item .faq-body code { font-size:16px; }

/* Footer */
.footer-brand p { font-size:16px; line-height:1.6; }
.footer h5 { font-size:14px; }
.footer ul li a { font-size:16px; }
.footer-bottom { font-size:15px; }

/* CTA */
.cta-final p { font-size:20px; line-height:1.6; }

/* OTA cards */
.ota-card h5 { font-size:18px; }
.ota-card p { font-size:16px; line-height:1.65; }
.ota-tick .ver { font-size:17px; }
.ota-tick .label { font-size:14px; }

/* Section close lines */
.ps-clos { font-size:clamp(22px,2.8vw,30px); }
.ps-clos span { font-family:var(--font-sans); font-size:.55em; }

.seo-auto-card { padding:var(--gap-4) var(--gap-5); }
.seo-auto-card .ic { width:36px; height:36px; font-size:16px; }
.seo-auto-card .name { font-size:15px; }
.seo-auto-card .desc { font-family:var(--font-sans); font-size:14px; font-weight:500; }
.seo-auto-card .stat { font-family:var(--font-sans); font-size:16px; font-weight:700; }

/* hero meta breakpoint adjust */
@media (min-width:560px) {
    .hero-meta .num { font-size:36px; }
}

/* ============================================================
   STICKY BOTTOM CTA
   ============================================================ */
.sticky-cta {
    position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    border-top:1px solid var(--line);
    padding:10px var(--gap-5);
    display:flex; align-items:center; justify-content:center;
    gap:var(--gap-3);
    transform:translateY(100%);
    transition:transform var(--t-norm) var(--ease-out);
}
.sticky-cta.show { transform:translateY(0); }
.sticky-cta .lbl {
    font-size:16px; color:var(--tx-3);
    font-weight:600; letter-spacing:-.005em;
    margin-right:var(--gap-2);
}
.sticky-cta .lbl strong { color:var(--tx-1); font-weight:700; }
@media (max-width:560px) {
    .sticky-cta .lbl { display:none; }
}

/* ============================================================
   REVEAL ANIM
   ============================================================ */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity:1; transform:translateY(0); }

/* ============================================================
   03. PROBLEM CARDS
   ============================================================ */
.problem-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-4);
    margin-top:var(--gap-7);
}
@media (min-width:600px) { .problem-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px) { .problem-grid { grid-template-columns:repeat(4,1fr); } }
.problem-card {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:var(--gap-6);
    transition:border-color var(--t-norm) var(--ease), transform var(--t-norm) var(--ease);
    position:relative; overflow:hidden;
}
.problem-card:hover { border-color:var(--hive-red); transform:translateY(-3px); }
.problem-card .ic {
    width:40px; height:40px;
    background:var(--danger-bg); color:var(--hive-red);
    border-radius:var(--r-md);
    display:grid; place-items:center;
    font-size:18px; margin-bottom:var(--gap-4);
}
.problem-card h4 {
    font-size:16px; margin-bottom:var(--gap-2);
    letter-spacing:-.01em;
}
.problem-card .v {
    font-family:var(--font-mono); font-size:24px; font-weight:700;
    color:var(--hive-red); letter-spacing:-.02em;
    margin-bottom:var(--gap-2);
}
.problem-card p { font-size:16px; color:var(--tx-3); line-height:1.55; }
.problem-clos {
    margin-top:var(--gap-7); text-align:center;
    font-size:clamp(20px,2.4vw,28px); font-weight:700;
    color:var(--tx-1); letter-spacing:-.02em;
}
.problem-clos span { color:var(--hive-green); }

/* ============================================================
   04. WHY NOW
   ============================================================ */
.why-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-4);
    margin-top:var(--gap-7);
}
@media (min-width:760px) { .why-grid { grid-template-columns:repeat(3,1fr); } }
.why-card {
    background:var(--bg-1); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:var(--gap-6);
    position:relative; overflow:hidden;
}
.why-card .arr {
    position:absolute; right:var(--gap-4); top:var(--gap-4);
    color:var(--hive-red); font-size:20px;
}
.why-card .num {
    font-family:var(--font-mono); font-size:11px; font-weight:700;
    color:var(--tx-5); letter-spacing:.12em;
    margin-bottom:var(--gap-3);
}
.why-card h4 {
    font-size:18px; margin-bottom:var(--gap-3); letter-spacing:-.015em;
}
.why-card p { font-size:16px color:var(--tx-3); line-height:1.6; }

/* ============================================================
   05. ROI COUNTER
   ============================================================ */
.roi-section { background:var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.roi-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-6);
    margin-top:var(--gap-7);
}
@media (min-width:880px) { .roi-grid { grid-template-columns:1fr 1fr; gap:var(--gap-7); align-items:stretch; } }
.roi-side {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:var(--gap-7);
    display:flex; flex-direction:column;
    position:relative; overflow:hidden;
}
.roi-side.outsource { border-color:rgba(220,38,38,.2); background:linear-gradient(180deg,#fff 0%, #fef2f2 100%); }
.roi-side.hive { border-color:var(--accent); background:var(--accent); color:var(--accent-tx); }
.roi-side .ttl {
    font-family:var(--font-mono); font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.12em;
    margin-bottom:var(--gap-5);
    display:inline-flex; align-items:center; gap:8px;
}
.roi-side.outsource .ttl { color:var(--hive-red); }
.roi-side.hive .ttl { color:rgba(255,255,255,.55); }
.roi-side .ttl::before {
    content:''; width:6px; height:6px; border-radius:50%; background:currentColor;
}
.roi-list {
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:14px;
    flex:1;
}
.roi-list li {
    display:flex; justify-content:space-between; align-items:baseline;
    padding-bottom:12px; border-bottom:1px dashed rgba(220,38,38,.18);
    font-size:14px;
}
.roi-list li .name { color:var(--tx-2); font-weight:500; }
.roi-list li .v {
    font-family:var(--font-mono); font-weight:700;
    color:var(--hive-red); font-size:18px; letter-spacing:-.01em;
}
.roi-side .total {
    margin-top:var(--gap-5); padding-top:var(--gap-4);
    border-top:2px solid rgba(220,38,38,.2);
    display:flex; justify-content:space-between; align-items:baseline;
}
.roi-side .total .lbl { font-size:16px; color:var(--tx-3); font-weight:600; }
.roi-side .total .v {
    font-family:var(--font-mono); font-size:36px; font-weight:800;
    color:var(--hive-red); letter-spacing:-.03em;
}
.roi-side.hive .big {
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
}
.roi-side.hive .big .free {
    font-family:var(--font-mono); font-size:clamp(80px,12vw,160px); font-weight:800;
    line-height:1; letter-spacing:-.05em;
    background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,.6) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-bottom:var(--gap-4);
}
.roi-side.hive .big p {
    font-size:18px; color:rgba(255,255,255,.85); line-height:1.5;
    max-width:280px;
}
.roi-side.hive .big small {
    display:block; margin-top:var(--gap-3);
    font-size:12px; color:rgba(255,255,255,.5);
    font-family:var(--font-mono); letter-spacing:.05em;
}

/* ============================================================
   06. COMPARISON TABLE
   ============================================================ */
.cmp-table {
    margin-top:var(--gap-7);
    border:1px solid var(--line); border-radius:var(--r-xl);
    overflow:hidden; background:var(--bg-0);
    box-shadow:var(--shadow-md);
}
.cmp-thead {
    display:grid; grid-template-columns:1.4fr 1fr 1fr;
    background:var(--bg-1);
    border-bottom:1px solid var(--line);
    padding:var(--gap-4) var(--gap-5);
    font-family:var(--font-mono); font-size:16px; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--tx-4);
}
.cmp-thead .h-hive { color:var(--accent); }
.cmp-row {
    display:grid; grid-template-columns:1.4fr 1fr 1fr;
    padding:var(--gap-4) var(--gap-5);
    border-bottom:1px solid var(--line);
    align-items:center;
    transition:background var(--t-fast) var(--ease);
}
.cmp-row:hover { background:var(--bg-1); }
.cmp-row:last-child { border-bottom:none; }
.cmp-row .lbl { font-weight:600; color:var(--tx-1); font-size:16px; }
.cmp-row .out { color:var(--hive-red); font-size:16px display:flex; align-items:center; gap:6px; }
.cmp-row .out::before { content:'\f1fb'; font-family:'phosphor'; font-size:16px; }
.cmp-row .hv { color:var(--hive-green); font-size:16px font-weight:600; display:flex; align-items:center; gap:6px; }
.cmp-row .hv::before { content:'\f3ed'; font-family:'phosphor'; font-size:16px; }

/* ============================================================
   07. DAILY SCENARIO TIMELINE
   ============================================================ */
.timeline {
    margin-top:var(--gap-7);
    position:relative;
    padding-left:var(--gap-6);
}
.timeline::before {
    content:''; position:absolute; left:14px; top:8px; bottom:8px;
    width:1.5px; background:var(--line);
}
.tl-row {
    position:relative;
    display:grid; grid-template-columns:90px 1fr 1fr;
    gap:var(--gap-5);
    padding:var(--gap-4) 0;
    align-items:center;
    border-bottom:1px solid var(--line);
}
.tl-row:last-child { border-bottom:none; }
.tl-row::before {
    content:''; position:absolute;
    left:-26px; top:50%; transform:translateY(-50%);
    width:14px; height:14px; border-radius:50%;
    background:var(--bg-0); border:2px solid var(--accent);
    box-shadow:0 0 0 4px var(--bg-0);
}
.tl-row.active::before {
    background:var(--accent);
    box-shadow:0 0 0 4px var(--bg-0), 0 0 0 6px rgba(0,0,0,.08);
}
.tl-time {
    font-family:var(--font-mono); font-size:18px; font-weight:700;
    color:var(--tx-1); letter-spacing:-.02em;
}
.tl-action {
    font-size:16px; font-weight:600; color:var(--tx-1);
    letter-spacing:-.005em;
}
.tl-action small {
    display:block; margin-top:4px;
    font-size:16px; font-weight:500; color:var(--tx-4);
    font-family:var(--font-mono); letter-spacing:.02em;
}
.tl-mini {
    display:flex; align-items:center; gap:6px;
    padding:6px 10px;
    background:var(--bg-1); border:1px solid var(--line);
    border-radius:var(--r-md);
    font-size:16px; color:var(--tx-3);
    width:fit-content; justify-self:end;
    font-family:var(--font-mono);
}
.tl-mini .ph { color:var(--accent); font-size:16px; }
.tl-clos {
    margin-top:var(--gap-7); padding:var(--gap-5);
    background:var(--accent); color:var(--accent-tx);
    border-radius:var(--r-xl);
    text-align:center;
    font-size:clamp(18px,2.2vw,24px); font-weight:700;
    letter-spacing:-.02em;
}
.tl-clos span { color:#fff; opacity:.7; font-weight:500; }

/* ============================================================
   08. AUTOMATION SCENES
   ============================================================ */
.scenes {
    display:grid; grid-template-columns:1fr; gap:var(--gap-5);
    margin-top:var(--gap-7);
}
@media (min-width:880px) { .scenes { grid-template-columns:repeat(3,1fr); } }
.scene {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:var(--gap-6);
    display:flex; flex-direction:column; gap:var(--gap-4);
    transition:border-color var(--t-norm) var(--ease), transform var(--t-norm) var(--ease);
}
.scene:hover { border-color:var(--line-strong); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.scene .stage {
    font-family:var(--font-mono); font-size:11px; font-weight:700;
    color:var(--tx-5); letter-spacing:.12em;
    display:inline-flex; align-items:center; gap:6px;
}
.scene .stage::before {
    content:''; width:18px; height:1px; background:var(--tx-5);
}
.scene h4 { font-size:18px; letter-spacing:-.015em; }
.scene .flow {
    display:flex; flex-direction:column; gap:0;
    background:var(--bg-1); border:1px solid var(--line);
    border-radius:var(--r-md); overflow:hidden;
}
.scene .flow-step {
    padding:12px 14px;
    display:flex; align-items:center; gap:10px;
    font-size:16px; color:var(--tx-2);
    border-bottom:1px dashed var(--line);
    position:relative;
}
.scene .flow-step:last-child { border-bottom:none; }
.scene .flow-step .ic {
    width:24px; height:24px;
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-sm);
    display:grid; place-items:center;
    font-size:12px; color:var(--accent);
    flex-shrink:0;
}
.scene .flow-step.done .ic { background:var(--accent); color:var(--accent-tx); border-color:var(--accent); }
.scene .flow-step .v { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--tx-4); }
.scene .flow-step .v.ok { color:var(--ok); font-weight:700; }
.scene .flow-step .arr { position:absolute; left:23px; bottom:-7px; color:var(--line-strong); font-size:10px; z-index:1; }
.scene .flow-step:last-child .arr { display:none; }
.scene p { font-size:16px; color:var(--tx-3); line-height:1.6; }

/* ============================================================
   09. BUILDER TABS (5 tabs incl. CODE)
   ============================================================ */
.builders-section { background:var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.builder-tabs {
    display:flex; flex-wrap:wrap; gap:4px;
    margin:0 auto var(--gap-7);
    padding:4px;
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-pill);
    width:fit-content;
}
.builder-tabs button {
    border:0; background:transparent;
    padding:8px 18px; height:38px;
    font-size:16px; font-weight:600;
    color:var(--tx-3); border-radius:var(--r-pill);
    display:inline-flex; align-items:center; gap:6px;
    cursor:pointer;
    transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    letter-spacing:-.005em;
}
.builder-tabs button .ph { font-size:14px; }
.builder-tabs button:hover { color:var(--tx-1); }
.builder-tabs button.active { background:var(--accent); color:var(--accent-tx); }

.builder-pane { display:none; }
.builder-pane.active { display:block; animation:fadeIn .4s var(--ease-out); }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.builder-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-7);
    align-items:start;
}
@media (min-width:980px) {
    .builder-grid { grid-template-columns:380px 1fr; }
}
.builder-info h3 {
    font-size:28px; letter-spacing:-.025em; margin-bottom:var(--gap-3);
}
.builder-info p {
    font-size:16px; color:var(--tx-3); line-height:1.6;
    margin-bottom:var(--gap-5);
}
.builder-feat-list {
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:var(--gap-2);
}
.builder-feat-list li {
    display:grid; grid-template-columns:24px 1fr;
    gap:var(--gap-3); font-size:16px;
    color:var(--tx-2); line-height:1.5;
    padding:10px 0;
    border-bottom:1px dashed var(--line);
}
.builder-feat-list li:last-child { border-bottom:none; }
.builder-feat-list li .ph {
    width:24px; height:24px;
    background:var(--bg-2); color:var(--accent);
    border-radius:var(--r-sm);
    display:grid; place-items:center;
    font-size:16px;
}
.builder-feat-list li strong { color:var(--tx-1); font-weight:700; display:block; margin-bottom:2px; font-size:16px; }
.builder-feat-list li small { font-family:var(--font-mono); font-size:16px; color:var(--tx-4); }

/* HEADER BUILDER side panel mockup */
.hb-frame {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); box-shadow:var(--shadow-xl);
    overflow:hidden;
    display:grid; grid-template-columns:320px 1fr;
    min-height:580px;
}
.hb-panel {
    background:#161616; color:#d4d4d4;
    display:flex; flex-direction:column;
    border-right:1px solid #1f1f1f;
    overflow:hidden;
}
.hb-ph {
    height:46px;
    border-bottom:1px solid #1f1f1f;
    display:flex; align-items:center;
    padding:0 12px; gap:8px;
    background:#0d0d0d;
}
.hb-ph-badge {
    background:#f59e0b; color:#1a1a1a;
    font-family:var(--font-mono); font-size:9px; font-weight:800;
    letter-spacing:.12em; padding:3px 7px; border-radius:3px;
}
.hb-ph-site { font-size:11px; color:#888; flex:1; letter-spacing:-.005em; }
.hb-ph-actions { display:flex; align-items:center; gap:4px; }
.hb-status-badge {
    font-family:var(--font-mono); font-size:9px; font-weight:600;
    padding:3px 7px; border-radius:3px;
    background:rgba(245,158,11,.18); color:#f59e0b;
}
.hb-status-badge.gray { background:rgba(255,255,255,.06); color:#888; }
.hb-btn-save {
    background:#f5f5f5; color:#0a0a0a;
    border:0; border-radius:3px;
    height:22px; padding:0 10px;
    font-size:10px; font-weight:700;
    display:inline-flex; align-items:center; gap:4px;
}
.hb-icon-btn {
    width:22px; height:22px;
    background:rgba(255,255,255,.04);
    border:0; border-radius:3px;
    color:#888;
    display:inline-grid; place-items:center;
    font-size:11px;
}
.hb-tabs {
    display:flex; border-bottom:1px solid #1f1f1f;
    background:#111; overflow-x:auto;
}
.hb-tabs button {
    background:transparent; border:0;
    padding:11px 8px; min-width:0;
    color:#777; font-size:10px; font-weight:600;
    display:inline-flex; flex-direction:column; align-items:center; gap:3px;
    flex:1; cursor:pointer;
    border-bottom:2px solid transparent;
    transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
    white-space:nowrap;
}
.hb-tabs button .ph { font-size:14px; }
.hb-tabs button.on { color:#fff; border-bottom-color:#fff; }
.hb-tabs button:hover:not(.on) { color:#aaa; }
.hb-body {
    flex:1; padding:16px; overflow-y:auto;
    background:#161616;
}
.hb-group { margin-bottom:18px; }
.hb-glabel {
    font-size:9px; font-weight:700; color:#555;
    letter-spacing:.12em; text-transform:uppercase;
    margin-bottom:8px; padding-bottom:4px;
    border-bottom:1px solid #1f1f1f;
}
.hb-sb { margin-bottom:12px; }
.hb-sb-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:6px;
}
.hb-sb-lbl { color:#aaa; font-size:11px; }
.hb-sb-num {
    display:inline-flex; align-items:center;
    background:#0a0a0a; border:1px solid #222;
    border-radius:3px; padding:0 6px; height:22px;
    font-family:var(--font-mono); font-size:10.5px;
}
.hb-sb-num input { width:30px; background:transparent; border:0; color:#f5f5f5; font:inherit; }
.hb-sb-unit { color:#555; font-size:9.5px; margin-left:2px; }
.hb-sb-track {
    position:relative; height:4px;
    background:#1f1f1f; border-radius:2px;
}
.hb-sb-track .fill {
    position:absolute; left:0; top:0; bottom:0;
    background:linear-gradient(90deg, #888 0%, #fff 100%);
    border-radius:2px;
}
.hb-sb-track .knob {
    position:absolute; top:50%; transform:translate(-50%,-50%);
    width:14px; height:14px;
    background:#fff; border-radius:50%;
    box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.hb-sb-balloon {
    position:absolute; top:-22px; transform:translateX(-50%);
    background:#fff; color:#0a0a0a;
    font-family:var(--font-mono); font-size:9.5px; font-weight:700;
    padding:2px 6px; border-radius:3px;
}

.hb-row {
    display:grid; grid-template-columns:80px 1fr;
    gap:8px; align-items:center; margin-bottom:8px;
}
.hb-row-lbl { color:#888; font-size:10.5px; }
.hb-bgrp {
    display:inline-flex; gap:1px;
    background:#0d0d0d; border:1px solid #222;
    border-radius:4px; padding:2px;
}
.hb-bgrp button {
    background:transparent; border:0;
    padding:4px 8px;
    color:#888; font-size:10px; font-weight:600;
    border-radius:3px;
    cursor:pointer;
}
.hb-bgrp button.on { background:#fff; color:#0a0a0a; }

.hb-color-row {
    display:grid; grid-template-columns:80px 1fr 60px;
    gap:8px; align-items:center; margin-bottom:8px;
}
.hb-color-sw {
    width:22px; height:22px;
    border-radius:4px; border:1px solid #2a2a2a;
}
.hb-color-hex {
    background:#0a0a0a; border:1px solid #222;
    border-radius:3px; padding:0 6px; height:22px;
    font-family:var(--font-mono); font-size:10px;
    color:#d4d4d4;
    display:inline-flex; align-items:center;
}

.hb-canvas {
    background:var(--bg-1);
    overflow:hidden;
    display:flex; flex-direction:column;
}
.hb-canvas-toolbar {
    height:36px; padding:0 var(--gap-3);
    display:flex; align-items:center; gap:var(--gap-2);
    border-bottom:1px solid var(--line);
    background:var(--bg-0);
}
.hb-canvas-toolbar .url {
    flex:1; font-family:var(--font-mono); font-size:10.5px;
    color:var(--tx-4); letter-spacing:.02em;
}
.hb-canvas-body { flex:1; padding:0; overflow:hidden; background:#fff; }

/* live preview header replica */
.lp-header {
    background:#fff; border-bottom:1px solid var(--line);
    padding:18px 36px;
    display:flex; align-items:center; gap:28px;
    position:relative;
}
.lp-header .lp-logo {
    font-weight:800; font-size:18px; letter-spacing:-.02em; color:#1a1a1a;
}
.lp-header .lp-logo small { color:#ccab89; font-weight:600; }
.lp-header nav {
    flex:1; display:flex; gap:24px;
    font-size:16px; color:#444; font-weight:500;
}
.lp-header nav a { color:inherit; }
.lp-header .lp-cta { display:inline-flex; gap:8px; }
.lp-header .lp-cta a {
    padding:7px 14px; font-size:12px; font-weight:600;
    border-radius:3px;
}
.lp-header .lp-cta a:first-child { color:#444; }
.lp-header .lp-cta a:last-child { background:#1a1a1a; color:#fff; }
.lp-hero {
    padding:80px 36px;
    background:linear-gradient(180deg, #fafafa, #fff);
    text-align:center;
}
.lp-hero h1 { font-size:38px; letter-spacing:-.03em; margin-bottom:14px; color:#1a1a1a; }
.lp-hero p { color:#666; font-size:14px; max-width:480px; margin:0 auto 18px; }
.lp-hero .pill {
    display:inline-block; padding:9px 22px;
    background:#1a1a1a; color:#fff;
    border-radius:999px; font-size:12px; font-weight:600;
}
.lp-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
    padding:20px 36px 30px;
}
.lp-grid .cell { aspect-ratio:4/3; background:#f0f0f0; border-radius:6px; }

/* MAIN BUILDER mockup */
.mb-frame {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); box-shadow:var(--shadow-xl);
    overflow:hidden; min-height:580px;
    display:flex; flex-direction:column;
}
.mb-bar {
    background:#0a0a0a; color:#fff;
    height:50px;
    padding:0 14px;
    display:flex; align-items:center; gap:8px;
    flex-wrap:nowrap; overflow-x:auto;
    border-bottom:1px solid #1a1a1a;
}
.mb-bar .arrow {
    width:28px; height:28px;
    background:rgba(255,255,255,.04);
    border:0; border-radius:4px;
    color:rgba(255,255,255,.5);
    display:grid; place-items:center; font-size:12px;
    flex-shrink:0;
}
.mb-bar .badge {
    background:#fff; color:#0a0a0a;
    font-weight:700; letter-spacing:.12em;
    height:28px; padding:0 10px;
    border-radius:4px; font-size:10px;
    display:inline-flex; align-items:center;
    flex-shrink:0;
}
.mb-bar .lbl { font-size:11.5px; color:rgba(255,255,255,.65); padding:0 2px; flex-shrink:0; }
.mb-bar .sep { width:1px; height:18px; background:rgba(255,255,255,.08); flex-shrink:0; }
.mb-tog {
    display:inline-flex; align-items:center; gap:6px;
    height:26px; padding:0 11px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    border-radius:4px; font-size:11px; font-weight:600;
    color:rgba(255,255,255,.5);
    flex-shrink:0; cursor:pointer;
    transition:all var(--t-fast) var(--ease);
}
.mb-tog .dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.2); }
.mb-tog.on { color:#fff; background:rgba(124,58,237,.18); border-color:rgba(124,58,237,.4); }
.mb-tog.on .dot { background:#c4b5fd; box-shadow:0 0 6px rgba(196,181,253,.6); }
.mb-tog:hover { color:#fff; }
.mb-bar .grow { flex:1; }
.mb-changed {
    background:rgba(255,255,255,.1); color:#f5f5f5;
    height:22px; padding:0 8px; border-radius:3px;
    font-size:10px; font-weight:600;
    display:inline-flex; align-items:center; flex-shrink:0;
}
.mb-ver { font-size:10.5px; color:#525252; flex-shrink:0; }
.mb-btn {
    height:28px; padding:0 12px; border:0;
    border-radius:4px; font-size:11.5px; font-weight:600;
    display:inline-flex; align-items:center; gap:5px;
    flex-shrink:0; cursor:pointer;
    letter-spacing:-.005em;
}
.mb-btn .ph { font-size:12px; }
.mb-btn-main { background:rgba(124,58,237,.18); color:#c4b5fd; border:1px solid rgba(124,58,237,.35); }
.mb-btn-cfg { background:#fff; color:#0a0a0a; box-shadow:0 0 12px rgba(255,255,255,.25); }
.mb-btn-edit { background:rgba(255,255,255,.08); color:#fff; }

.mb-canvas {
    flex:1;
    background:var(--bg-2);
    padding:var(--gap-4);
    overflow:hidden;
    display:flex; flex-direction:column; gap:var(--gap-3);
}
.mb-section {
    background:#fff;
    border:2px solid transparent;
    border-radius:var(--r-md);
    padding:var(--gap-5);
    transition:border-color var(--t-fast) var(--ease);
    position:relative;
}
.mb-section:hover { border-color:rgba(124,58,237,.4); }
.mb-section.editing { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.1); }
.mb-section-tag {
    position:absolute; top:-10px; left:12px;
    background:#7c3aed; color:#fff;
    font-size:9.5px; font-weight:700; letter-spacing:.08em;
    padding:2px 8px; border-radius:3px;
    text-transform:uppercase; font-family:var(--font-mono);
}
.mb-hero h2 {
    font-size:32px; letter-spacing:-.03em;
    margin-bottom:8px; text-align:center;
}
.mb-hero p { font-size:16px; color:var(--tx-3); text-align:center; margin-bottom:16px; }
.mb-hero .row { display:flex; gap:10px; justify-content:center; }
.mb-hero .row .pill { padding:8px 18px; background:#0a0a0a; color:#fff; border-radius:999px; font-size:12px; font-weight:600; }
.mb-hero .row .pill.outline { background:transparent; color:#0a0a0a; border:1px solid #d4d4d4; }
.mb-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.mb-grid .cell {
    aspect-ratio:1; background:var(--bg-2);
    border-radius:4px; padding:8px;
    display:flex; flex-direction:column; justify-content:flex-end;
}
.mb-grid .cell .lbl { font-size:9px; font-weight:700; color:var(--tx-2); }
.mb-grid .cell .sub { font-size:8.5px; color:var(--tx-4); }

/* CODE BUILDER mockup */
.code-frame {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); box-shadow:var(--shadow-xl);
    overflow:hidden;
    display:grid; grid-template-columns:280px 1fr;
    min-height:560px;
}
.code-side {
    background:var(--bg-1);
    border-right:1px solid var(--line);
    padding:var(--gap-5);
    overflow-y:auto;
}
.code-side h5 {
    font-size:10px; font-weight:700;
    color:var(--tx-4); text-transform:uppercase;
    letter-spacing:.12em;
    margin-bottom:var(--gap-3);
}
.code-snippet-list {
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:6px;
    margin-bottom:var(--gap-5);
}
.code-snippet-list li {
    padding:10px 12px;
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-md); cursor:pointer;
    display:flex; align-items:center; gap:8px;
    font-size:12px; color:var(--tx-2);
    transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.code-snippet-list li:hover { border-color:var(--line-strong); background:var(--bg-2); }
.code-snippet-list li.on { border-color:var(--accent); background:var(--bg-3); font-weight:600; }
.code-snippet-list li .ic {
    width:18px; height:18px; border-radius:3px;
    display:grid; place-items:center;
    font-size:10px; color:#fff; font-weight:700; font-family:var(--font-mono);
}
.code-snippet-list li .ic.naver { background:#03c75a; }
.code-snippet-list li .ic.ga { background:#f4b400; }
.code-snippet-list li .ic.meta { background:#1877f2; }
.code-snippet-list li .ic.kakao { background:#ffe812; color:#000; }
.code-snippet-list li .ic.json { background:var(--accent); color:#fff; }
.code-snippet-list li .ic.iframe { background:#7c3aed; color:#fff; }
.code-side .help {
    padding:var(--gap-3); background:var(--bg-0);
    border:1px dashed var(--line); border-radius:var(--r-md);
    font-size:11px; color:var(--tx-4); line-height:1.55;
}

.code-main {
    background:#0d1117; color:#c9d1d9;
    display:flex; flex-direction:column;
    overflow:hidden;
}
.code-main-toolbar {
    height:40px; padding:0 var(--gap-4);
    background:#161b22; border-bottom:1px solid #21262d;
    display:flex; align-items:center; gap:var(--gap-3);
    font-size:11px;
}
.code-main-toolbar .tab {
    height:28px; padding:0 12px;
    display:inline-flex; align-items:center; gap:6px;
    background:#0d1117; border:1px solid #21262d; border-bottom:0;
    border-radius:4px 4px 0 0;
    font-family:var(--font-mono); font-size:11px;
    color:#c9d1d9; font-weight:600;
    margin-bottom:-1px;
}
.code-main-toolbar .tab .ph { color:#7c3aed; font-size:12px; }
.code-main-toolbar .grow { flex:1; }
.code-main-toolbar .meta {
    font-family:var(--font-mono); font-size:10px;
    color:#6e7681; letter-spacing:.04em;
}
.code-main-toolbar .save-pill {
    padding:3px 10px; height:22px;
    background:#238636; color:#fff;
    border-radius:3px;
    font-size:10px; font-weight:700;
    display:inline-flex; align-items:center; gap:4px;
}
.code-editor {
    flex:1; padding:var(--gap-4) 0;
    font-family:var(--font-mono); font-size:12.5px; line-height:1.6;
    overflow:auto;
    counter-reset:line;
}
.code-editor .ln {
    display:grid; grid-template-columns:36px 1fr;
    align-items:start; gap:0;
}
.code-editor .ln::before {
    counter-increment:line;
    content:counter(line);
    text-align:right; padding:0 8px;
    color:#484f58; user-select:none;
    font-size:11px;
}
.code-editor .ln code { padding:0; background:transparent; border-radius:0; color:#c9d1d9; }
.code-editor .ln.active { background:rgba(56,139,253,.06); }
.code-editor .ln.active::before { color:#c9d1d9; }
.tag { color:#7ee787; }
.attr { color:#79c0ff; }
.str { color:#a5d6ff; }
.com { color:#8b949e; font-style:italic; }
.kw { color:#ff7b72; }
.fn { color:#d2a8ff; }
.num { color:#ffa657; }

.code-status {
    display:flex; align-items:center; gap:var(--gap-3);
    padding:8px var(--gap-4);
    background:#161b22; border-top:1px solid #21262d;
    font-family:var(--font-mono); font-size:10.5px;
    color:#8b949e;
}
.code-status .stat-ok { color:#3fb950; }
.code-status .stat-ok::before {
    content:''; display:inline-block;
    width:6px; height:6px; border-radius:50%; background:currentColor;
    margin-right:5px; vertical-align:middle;
}
.code-status .grow { flex:1; }

/* ============================================================
   BOARD LAYOUTS — 12 종 thumbs (재사용)
   ============================================================ */
.layouts {
    display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-3);
    max-width:1280px; margin:0 auto;
}
@media (min-width:600px) { .layouts { grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px) { .layouts { grid-template-columns:repeat(4,1fr); } }
.layout-card {
    border:1px solid var(--line); border-radius:var(--r-lg);
    overflow:hidden; background:var(--bg-0); cursor:pointer;
    transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.layout-card:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.layout-thumb {
    aspect-ratio:4/3; background:var(--bg-1);
    display:grid; gap:6px; padding:var(--gap-3);
    border-bottom:1px solid var(--line);
}
.lt-grid3 { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); }
.lt-grid3 .b { background:var(--bg-3); border-radius:var(--r-sm); }
.lt-grid3 .b:nth-child(1) { background:var(--accent); }
.lt-mag { grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
.lt-mag .b { background:var(--bg-3); border-radius:var(--r-sm); }
.lt-mag .b:first-child { grid-row:span 2; background:var(--accent); }
.lt-list { grid-template-columns:1fr; grid-template-rows:repeat(4,1fr); gap:4px; }
.lt-list .b { background:var(--bg-3); border-radius:var(--r-sm); display:flex; align-items:center; padding:0 6px; gap:6px; }
.lt-list .b::before { content:''; width:14%; height:80%; background:var(--bg-4); border-radius:2px; }
.lt-mason { grid-template-columns:repeat(3,1fr); grid-auto-rows:12px; }
.lt-mason .b { background:var(--bg-3); border-radius:var(--r-sm); }
.lt-mason .b:nth-child(1) { grid-row:span 4; background:var(--accent); }
.lt-mason .b:nth-child(2) { grid-row:span 3; }
.lt-mason .b:nth-child(3) { grid-row:span 2; }
.lt-mason .b:nth-child(4) { grid-row:span 3; }
.lt-mason .b:nth-child(5) { grid-row:span 4; }
.lt-mason .b:nth-child(6) { grid-row:span 2; }
.lt-card { grid-template-columns:repeat(2,1fr); }
.lt-card .b { background:var(--bg-3); border-radius:var(--r-sm); display:flex; flex-direction:column; padding:6px; gap:4px; }
.lt-card .b::before { content:''; flex:1; background:var(--bg-4); border-radius:2px; }
.lt-card .b::after { content:''; height:4px; width:60%; background:var(--accent); border-radius:2px; opacity:.6; }
.lt-banner { grid-template-rows:2fr 1fr; }
.lt-banner .b { background:var(--bg-3); border-radius:var(--r-sm); }
.lt-banner .b:first-child { background:linear-gradient(135deg, var(--accent), var(--tx-3)); }
.lt-thumb { grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr; }
.lt-thumb .b { background:var(--bg-3); border-radius:var(--r-sm); }
.lt-hero { grid-template-rows:3fr 1fr; }
.lt-hero .b:first-child { background:var(--bg-3); border-radius:var(--r-sm); background-image:linear-gradient(135deg, var(--accent) 0%, transparent 50%); }
.lt-hero .b:last-child { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:transparent; }
.lt-hero .b:last-child::before, .lt-hero .b:last-child::after { content:''; background:var(--bg-3); border-radius:var(--r-sm); }
.lt-side { grid-template-columns:1fr 2fr; }
.lt-side .b { background:var(--bg-3); border-radius:var(--r-sm); }
.lt-side .b:first-child { background:var(--accent); }
.lt-table { grid-template-rows:repeat(5,1fr); gap:3px; }
.lt-table .b { background:var(--bg-3); border-radius:2px; }
.lt-table .b:first-child { background:var(--tx-2); }
.lt-tab { grid-template-rows:1fr 5fr; }
.lt-tab .b:first-child { background:transparent; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.lt-tab .b:first-child::before { content:''; background:var(--accent); border-radius:2px; }
.lt-tab .b:first-child::after { content:''; background:var(--bg-3); border-radius:2px; }
.lt-tab .b:last-child { background:var(--bg-3); border-radius:var(--r-sm); }
.lt-iso { grid-template-columns:repeat(2,1fr); grid-template-rows:1fr 1fr 1fr; }
.lt-iso .b { background:var(--bg-3); border-radius:var(--r-sm); }
.lt-iso .b:nth-child(odd) { background:var(--accent); opacity:.9; }
.layout-meta {
    padding:var(--gap-3) var(--gap-4);
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--gap-2);
}
.layout-meta .name { font-size:12px; font-weight:600; color:var(--tx-1); letter-spacing:-.005em; }
.layout-meta .code { font-family:var(--font-mono); font-size:10px; color:var(--tx-5); }

/* ============================================================
   10. MOTION · INTERACTION LAB
   ============================================================ */
.motion-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-4);
    margin-top:var(--gap-7);
}
@media (min-width:600px) { .motion-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px) { .motion-grid { grid-template-columns:repeat(3,1fr); } }

.motion-card {
    aspect-ratio:5/4;
    border:1px solid var(--line); border-radius:var(--r-xl);
    background:var(--bg-0);
    overflow:hidden;
    position:relative;
    cursor:crosshair;
    transition:border-color var(--t-norm) var(--ease), transform var(--t-norm) var(--ease), box-shadow var(--t-norm) var(--ease);
}
.motion-card:hover { border-color:var(--accent); }
.motion-card .stage {
    position:absolute; inset:0 0 64px 0;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.motion-card .meta {
    position:absolute; left:0; right:0; bottom:0;
    padding:14px 18px;
    border-top:1px solid var(--line);
    background:var(--bg-0);
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
}
.motion-card .meta .name {
    font-size:16px; font-weight:700; color:var(--tx-1);
    letter-spacing:-.005em;
}
.motion-card .meta .tag {
    font-size:16px; color:var(--tx-4); font-weight:600;
}

/* M-1: Scale + Lift */
.m-1 .stage::before {
    content:''; width:60%; aspect-ratio:1;
    background:linear-gradient(135deg, var(--tx-1), var(--tx-3));
    border-radius:var(--r-xl);
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    transition:transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
.m-1:hover .stage::before {
    transform:translateY(-12px) scale(1.04);
    box-shadow:0 24px 60px rgba(0,0,0,.28);
}

/* M-2: Animated Gradient Morph */
.m-2 .stage {
    background:
        linear-gradient(135deg, #0a0a0a 0%, #2a2a2a 25%, #525252 50%, #2a2a2a 75%, #0a0a0a 100%);
    background-size:300% 300%;
    animation:gradientShift 8s var(--ease) infinite;
}
@keyframes gradientShift {
    0%,100% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
}

/* M-3: 3D Tilt on Hover */
.m-3 { perspective:900px; }
.m-3 .stage::before {
    content:''; width:54%; aspect-ratio:3/4;
    background:linear-gradient(180deg, var(--bg-2), var(--bg-4));
    border:1px solid var(--line-strong);
    border-radius:var(--r-md);
    box-shadow:0 4px 16px rgba(0,0,0,.08);
    transition:transform 500ms var(--ease-out);
    transform-style:preserve-3d;
}
.m-3:hover .stage::before {
    transform:rotateY(-18deg) rotateX(8deg);
}

/* M-4: Shimmer */
.m-4 .stage {
    background:
        linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 40%, var(--bg-1) 50%, var(--bg-3) 60%, var(--bg-2) 100%);
    background-size:200% 100%;
    animation:shimmer 2.4s linear infinite;
}
@keyframes shimmer {
    0% { background-position:200% 0; }
    100% { background-position:-200% 0; }
}
.m-4 .stage::after {
    content:'';
    width:50%; aspect-ratio:3/2;
    background:var(--bg-0);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-sm);
}

/* M-5: Card Flip */
.m-5 { perspective:1000px; }
.m-5 .stage { transform-style:preserve-3d; }
.m-5 .stage .face {
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:54%; aspect-ratio:1;
    border-radius:var(--r-md);
    backface-visibility:hidden;
    transition:transform 700ms var(--ease-out);
}
.m-5 .stage .face.front {
    background:linear-gradient(135deg, var(--tx-1), var(--tx-3));
    z-index:2;
}
.m-5 .stage .face.back {
    background:var(--bg-2);
    border:1px solid var(--line);
    transform:translate(-50%,-50%) rotateY(180deg);
}
.m-5:hover .stage .face.front { transform:translate(-50%,-50%) rotateY(180deg); }
.m-5:hover .stage .face.back { transform:translate(-50%,-50%) rotateY(360deg); }

/* M-6: Stagger Reveal Lines */
.m-6 .stage {
    flex-direction:column; gap:10px;
    padding:20% 18%;
    align-items:flex-start; justify-content:center;
}
.m-6 .stage .ln {
    height:8px; border-radius:4px;
    background:var(--tx-1);
    width:0;
    animation:lineReveal 3.2s var(--ease-out) infinite;
}
.m-6 .stage .ln:nth-child(1) { animation-delay:0s; max-width:80%; }
.m-6 .stage .ln:nth-child(2) { animation-delay:.15s; max-width:60%; background:var(--tx-3); }
.m-6 .stage .ln:nth-child(3) { animation-delay:.3s; max-width:70%; background:var(--tx-4); }
.m-6 .stage .ln:nth-child(4) { animation-delay:.45s; max-width:40%; background:var(--accent); }
@keyframes lineReveal {
    0% { width:0; opacity:0; }
    20% { width:var(--w,80%); opacity:1; }
    80% { width:var(--w,80%); opacity:1; }
    100% { width:0; opacity:0; }
}
.m-6 .stage .ln { width:80%; }
.m-6 .stage .ln:nth-child(2) { width:60%; }
.m-6 .stage .ln:nth-child(3) { width:70%; }
.m-6 .stage .ln:nth-child(4) { width:40%; }

/* hint chip — bottom-right corner micro */
.motion-card .hint {
    position:absolute; top:14px; right:14px;
    padding:5px 10px;
    background:var(--bg-1); border:1px solid var(--line);
    border-radius:var(--r-pill);
    font-size:16px; color:var(--tx-4); font-weight:600;
    z-index:3;
}

/* ============================================================
   11. PAGESPEED CARD (CSS recreate)
   ============================================================ */
.ps-section { background:var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ps-card {
    max-width:980px; margin:var(--gap-7) auto 0;
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); overflow:hidden;
    box-shadow:var(--shadow-xl);
}
.ps-h {
    padding:var(--gap-5) var(--gap-6);
    border-bottom:1px solid var(--line);
    background:var(--bg-1);
}
.ps-h .brand {
    display:flex; align-items:center; gap:8px;
    color:var(--tx-2); font-size:14px; font-weight:600;
    margin-bottom:6px;
}
.ps-h .brand .ic { color:#4285f4; font-size:18px; }
.ps-h .brand .name { letter-spacing:-.005em; }
.ps-h .ts { font-family:var(--font-mono); font-size:11px; color:var(--tx-4); }

.ps-url-bar {
    padding:var(--gap-4) var(--gap-6);
    display:flex; gap:var(--gap-3); align-items:center;
    border-bottom:1px solid var(--line);
}
.ps-url {
    flex:1; height:38px;
    border:1px solid var(--line); border-radius:var(--r-sm);
    padding:0 var(--gap-3);
    display:flex; align-items:center;
    font-family:var(--font-mono); font-size:16px; color:var(--tx-2);
    background:var(--bg-0);
}
.ps-url-bar .analyze {
    height:38px; padding:0 22px;
    background:#1a73e8; color:#fff; border:0;
    border-radius:var(--r-sm); font-weight:600;
    font-size:16px;
}

.ps-device {
    padding:var(--gap-4) 0;
    text-align:center;
    border-bottom:1px solid var(--line);
}
.ps-device button {
    background:transparent; border:0;
    padding:8px 18px;
    color:var(--tx-4); font-size:16px; font-weight:500;
    border-bottom:2px solid transparent;
    cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
}
.ps-device button .ph { font-size:14px; }
.ps-device button.on { color:var(--info); border-bottom-color:var(--info); font-weight:600; }

.ps-info-row {
    padding:var(--gap-4) var(--gap-6);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:var(--gap-3);
    font-size:16px;
}
.ps-info-row .ic { color:#4285f4; font-size:16px; }
.ps-info-row .grow { flex:1; }
.ps-info-row .nodata {
    color:var(--tx-4); font-size:12px;
    display:inline-flex; align-items:center; gap:6px;
}

.ps-section-h {
    padding:var(--gap-4) var(--gap-6);
    display:flex; align-items:center; gap:var(--gap-2);
    font-size:14px; font-weight:600;
    color:var(--tx-2);
}
.ps-section-h .ic { color:#1a73e8; font-size:16px; }

.ps-scores {
    padding:var(--gap-7) var(--gap-6) var(--gap-5);
    display:flex; justify-content:center; gap:var(--gap-7);
    border-bottom:1px solid var(--line);
    flex-wrap:wrap;
}
.ps-score {
    display:flex; flex-direction:column; align-items:center; gap:8px;
}
.ps-donut {
    width:64px; height:64px;
    border-radius:50%;
    display:grid; place-items:center;
    background:conic-gradient(var(--ok) calc(var(--p,99)*1%), rgba(22,163,74,.12) 0);
    position:relative;
}
.ps-donut::before {
    content:''; position:absolute; inset:5px;
    background:var(--bg-0); border-radius:50%;
}
.ps-donut span {
    position:relative; z-index:1;
    font-family:var(--font-mono); font-size:18px; font-weight:700;
    color:var(--ok); letter-spacing:-.02em;
}
.ps-score .lbl { font-size:16px; color:var(--tx-2); }

.ps-detail {
    padding:var(--gap-7) var(--gap-6);
    display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-6);
    align-items:center;
    border-bottom:1px solid var(--line);
}
@media (max-width:760px) { .ps-detail { grid-template-columns:1fr; } }
.ps-perf-big {
    display:flex; flex-direction:column; align-items:center; gap:var(--gap-3);
}
.ps-donut-big {
    width:140px; height:140px; border-radius:50%;
    background:conic-gradient(var(--ok) 99%, rgba(22,163,74,.12) 0);
    display:grid; place-items:center; position:relative;
}
.ps-donut-big::before {
    content:''; position:absolute; inset:14px;
    background:var(--bg-0); border-radius:50%;
}
.ps-donut-big span {
    position:relative; z-index:1;
    font-family:var(--font-mono); font-size:48px; font-weight:700;
    color:var(--ok); letter-spacing:-.03em;
}
.ps-perf-big .ttl { font-size:18px; font-weight:600; color:var(--tx-1); }
.ps-perf-big .desc {
    font-size:11px; color:var(--tx-4); text-align:center;
    line-height:1.55; max-width:280px;
}
.ps-perf-big .desc a { color:var(--info); text-decoration:underline; }
.ps-legend {
    display:flex; gap:14px; margin-top:6px;
    font-size:11px; color:var(--tx-4);
}
.ps-legend span { display:inline-flex; align-items:center; gap:4px; }
.ps-legend .swatch { width:0; height:0; }
.ps-legend .swatch.warn { color:var(--danger); }
.ps-legend .swatch.warn::before { content:'▲'; font-size:12px; }
.ps-legend .swatch.mid { color:var(--warn); }
.ps-legend .swatch.mid::before { content:'■'; font-size:12px; }
.ps-legend .swatch.good { color:var(--ok); }
.ps-legend .swatch.good::before { content:'●'; font-size:12px; }

.ps-screenshot {
    aspect-ratio:16/10;
    border-radius:var(--r-md); overflow:hidden;
    background:#0a0a0a; color:#fff;
    position:relative;
    display:flex; align-items:flex-end; padding:var(--gap-5);
    border:1px solid var(--line);
}
.ps-screenshot::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(circle at 75% 30%, rgba(255,255,255,.08), transparent 50%),
        linear-gradient(135deg, #0d2818 0%, #0a0a0a 60%);
}
.ps-screenshot::after {
    content:''; position:absolute; right:0; top:0; width:55%; height:100%;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(46,77,40,.6), rgba(20,40,20,.3) 60%, transparent 80%);
    background-size:cover;
    opacity:.85;
}
.ps-screenshot .top-bar {
    position:absolute; top:0; left:0; right:0; height:20px;
    background:rgba(0,0,0,.5);
    display:flex; align-items:center;
    padding:0 8px; gap:14px;
    font-family:var(--font-mono); font-size:8px; color:rgba(255,255,255,.4);
}
.ps-screenshot .top-bar .links { display:flex; gap:8px; }
.ps-screenshot .resum {
    position:relative; z-index:2;
    margin-bottom:8px;
}
.ps-screenshot .resum-logo {
    font-family:'Times New Roman', serif;
    font-size:11px; font-style:italic;
    color:rgba(255,255,255,.7); margin-bottom:14px;
    letter-spacing:.1em;
}
.ps-screenshot .resum-logo::before { content:'Ⓜ '; opacity:.6; }
.ps-screenshot h3 {
    font-family:'Times New Roman', serif;
    color:#fff; font-size:28px; line-height:1.05;
    font-weight:400; letter-spacing:.04em;
    text-transform:uppercase;
}
.ps-screenshot .play {
    position:absolute; bottom:14px; right:14px;
    width:24px; height:24px; border-radius:50%;
    background:rgba(255,255,255,.25);
    display:grid; place-items:center;
    color:#fff; font-size:11px;
    z-index:2;
}

.ps-metrics {
    padding:var(--gap-5) var(--gap-6);
    display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-4) var(--gap-6);
    background:var(--bg-1);
    border-bottom:1px solid var(--line);
}
@media (max-width:560px) { .ps-metrics { grid-template-columns:1fr; } }
.ps-met {
    display:flex; flex-direction:column; gap:4px;
}
.ps-met .h {
    display:flex; align-items:center; gap:6px;
    font-size:16px; color:var(--tx-2); font-weight:500;
}
.ps-met .h::before {
    content:''; width:8px; height:8px; border-radius:50%;
    background:var(--ok);
}
.ps-met .v {
    font-family:var(--font-mono); font-size:24px; font-weight:700;
    color:var(--tx-1); letter-spacing:-.02em;
}

.ps-meta-row {
    padding:var(--gap-4) var(--gap-6);
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--gap-4);
    font-family:var(--font-mono); font-size:10px; color:var(--tx-4);
    line-height:1.6;
}
@media (max-width:760px) { .ps-meta-row { grid-template-columns:1fr; } }
.ps-meta-row .item { display:flex; gap:6px; align-items:center; }
.ps-meta-row .item .ph { font-size:16px; opacity:.6; }
.ps-meta-row a { color:var(--info); }

/* SEO autohandled below ps-card */
.seo-auto {
    margin-top:var(--gap-7);
    display:grid; grid-template-columns:1fr; gap:var(--gap-3);
    max-width:980px; margin-left:auto; margin-right:auto;
}
@media (min-width:760px) { .seo-auto { grid-template-columns:repeat(2,1fr); } }
.seo-auto-card {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-md); padding:var(--gap-4) var(--gap-5);
    display:flex; align-items:center; gap:var(--gap-3);
}
.seo-auto-card .ic {
    width:32px; height:32px;
    background:var(--bg-2); color:var(--accent);
    border-radius:var(--r-sm);
    display:grid; place-items:center; font-size:14px;
}
.seo-auto-card .name { font-size:16px; font-weight:700; color:var(--tx-1); }
.seo-auto-card .desc { font-size:11px; color:var(--tx-4); margin-top:2px; font-family:var(--font-mono); }
.seo-auto-card .grow { flex:1; }
.seo-auto-card .stat { font-size:10px; color:var(--ok); font-weight:700; }

.ps-clos {
    margin:var(--gap-7) auto 0;
    text-align:center;
    font-size:clamp(20px,2.4vw,26px); font-weight:700;
    letter-spacing:-.02em; color:var(--tx-1);
    max-width:760px;
}
.ps-clos span { color:var(--tx-4); font-weight:500; display:block; margin-top:8px; font-size:.65em; }

/* ============================================================
   12. CLINIC WORKFLOW
   ============================================================ */
.cw-flow {
    margin-top:var(--gap-7);
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); overflow:hidden;
    box-shadow:var(--shadow-md);
}
.cw-pipeline {
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    background:var(--bg-1);
    border-bottom:1px solid var(--line);
}
@media (max-width:980px) { .cw-pipeline { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px) { .cw-pipeline { grid-template-columns:repeat(2,1fr); } }
.cw-step {
    padding:var(--gap-5) var(--gap-4);
    border-right:1px solid var(--line);
    display:flex; flex-direction:column; gap:8px;
    position:relative;
    transition:background var(--t-fast) var(--ease);
}
.cw-step:hover { background:var(--bg-0); }
.cw-step:last-child { border-right:none; }
.cw-step .num {
    font-family:var(--font-mono); font-size:16px;
    color:var(--tx-5); letter-spacing:.12em; font-weight:700;
}
.cw-step .ic {
    width:36px; height:36px;
    background:var(--accent); color:var(--accent-tx);
    border-radius:var(--r-md);
    display:grid; place-items:center;
    font-size:16px;
}
.cw-step h5 {
    font-size:16px; font-weight:700;
    letter-spacing:-.005em;
    margin:4px 0 2px;
}
.cw-step p { font-size:16px; color:var(--tx-4); line-height:1.5; }
.cw-step::after {
    content:'→'; position:absolute;
    right:-8px; top:50%; transform:translateY(-50%);
    color:var(--line-strong);
    font-family:var(--font-mono); font-size:14px;
    background:var(--bg-1); width:16px; height:16px;
    display:grid; place-items:center;
    z-index:1;
}
.cw-step:last-child::after { display:none; }

.cw-modules {
    display:grid; grid-template-columns:1fr; gap:0;
    padding:var(--gap-5);
}
@media (min-width:760px) { .cw-modules { grid-template-columns:repeat(2,1fr); gap:var(--gap-3); } }
@media (min-width:1080px) { .cw-modules { grid-template-columns:repeat(4,1fr); } }
.cw-mod {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-md); padding:var(--gap-4) var(--gap-5);
    transition:border-color var(--t-fast) var(--ease);
}
.cw-mod:hover { border-color:var(--accent); }
.cw-mod h5 {
    display:flex; align-items:center; gap:8px;
    font-size:16px; font-weight:700;
    margin-bottom:var(--gap-3);
    letter-spacing:-.01em;
}
.cw-mod h5 .ph {
    width:24px; height:24px;
    background:var(--bg-2); color:var(--accent);
    border-radius:var(--r-sm);
    display:grid; place-items:center; font-size:16px;
}
.cw-mod ul {
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:6px;
}
.cw-mod ul li {
    font-size:16px; color:var(--tx-3);
    display:flex; gap:8px;
    line-height:1.5;
    padding-left:14px; position:relative;
}
.cw-mod ul li::before {
    content:'·'; position:absolute; left:4px;
    color:var(--accent); font-weight:700;
}
.cw-clos {
    margin-top:var(--gap-6);
    padding:var(--gap-5);
    text-align:center;
    background:var(--accent); color:var(--accent-tx);
    border-radius:var(--r-md);
    font-size:clamp(16px,2vw,20px); font-weight:700;
    letter-spacing:-.01em;
}

/* ============================================================
   13. 시즌 리뉴얼 — 인터랙티브 토글
   ============================================================ */
.season-section { background:var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* 시즌 토글 탭 */
.season-toggle {
    display:flex; flex-wrap:wrap;
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-pill); padding:5px; gap:2px;
    margin:0 auto var(--gap-6);
    width:fit-content;
    box-shadow:var(--shadow-md);
}
.season-toggle button {
    padding:11px 22px; height:44px;
    border:0; background:transparent;
    border-radius:var(--r-pill);
    font-family:var(--font-sans); font-size:16px; font-weight:700;
    color:var(--tx-3); cursor:pointer;
    display:inline-flex; align-items:center; gap:9px;
    letter-spacing:.04em;
    transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    white-space:nowrap;
}
.season-toggle button:hover { color:var(--tx-1); }
.season-toggle button.active { background:var(--accent); color:#fff; }
.season-toggle .sd {
    width:12px; height:12px; border-radius:50%;
    flex-shrink:0;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.sd-spring { background:radial-gradient(circle at 30% 30%, #fbcfe8, #ec4899); }
.sd-summer { background:radial-gradient(circle at 30% 30%, #bae6fd, #0891b2); }
.sd-autumn { background:radial-gradient(circle at 30% 30%, #fde68a, #b45309); }
.sd-winter { background:radial-gradient(circle at 30% 30%, #cbd5e1, #1e293b); }

/* 인터랙티브 stage — CSS 변수로 톤 전환 */
.seasonal-stage {
    display:grid; grid-template-columns:1fr;
    gap:var(--gap-5); align-items:stretch;
    /* default = spring */
    --s-bg:linear-gradient(180deg, #fef3f5 0%, #fde2e8 100%);
    --s-accent:#ec4899;
    --s-tx:#831843;
    --s-tx-2:#9d174d;
    --s-tx-3:#be185d;
    --s-card-bg:#fff;
    --s-line:rgba(190,24,93,.12);
    --s-eyebrow:#9d174d;
    --s-badge-bg:#ec4899;
    --s-badge-tx:#fff;
}
@media (min-width:1080px) { .seasonal-stage { grid-template-columns:1fr 280px; } }
.seasonal-stage[data-season="spring"]  { --s-bg:linear-gradient(180deg, #fef3f5 0%, #fde2e8 100%); --s-accent:#ec4899; --s-tx:#831843; --s-tx-2:#9d174d; --s-tx-3:#be185d; --s-card-bg:#fff; --s-line:rgba(190,24,93,.12); --s-eyebrow:#9d174d; --s-badge-bg:#ec4899; --s-badge-tx:#fff; }
.seasonal-stage[data-season="summer"]  { --s-bg:linear-gradient(180deg, #ecfeff 0%, #cffafe 100%); --s-accent:#0891b2; --s-tx:#155e75; --s-tx-2:#0e7490; --s-tx-3:#0891b2; --s-card-bg:#fff; --s-line:rgba(14,116,144,.14); --s-eyebrow:#0e7490; --s-badge-bg:#0891b2; --s-badge-tx:#fff; }
.seasonal-stage[data-season="autumn"]  { --s-bg:linear-gradient(180deg, #fef3e2 0%, #fde6c0 100%); --s-accent:#b45309; --s-tx:#7c2d12; --s-tx-2:#92400e; --s-tx-3:#b45309; --s-card-bg:#fff; --s-line:rgba(180,83,9,.16); --s-eyebrow:#92400e; --s-badge-bg:#b45309; --s-badge-tx:#fff; }
.seasonal-stage[data-season="winter"]  { --s-bg:linear-gradient(180deg, #1e293b 0%, #0f172a 100%); --s-accent:#94a3b8; --s-tx:#f1f5f9; --s-tx-2:#e2e8f0; --s-tx-3:#cbd5e1; --s-card-bg:#334155; --s-line:rgba(255,255,255,.08); --s-eyebrow:#94a3b8; --s-badge-bg:#cbd5e1; --s-badge-tx:#0f172a; }

/* 사이트 mockup frame */
.ss-frame {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); overflow:hidden;
    box-shadow:var(--shadow-xl);
}
.ss-chrome {
    height:36px; background:var(--bg-2);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; padding:0 12px; gap:8px;
}
.ss-chrome .dot { width:10px; height:10px; border-radius:50%; }
.ss-chrome .dot.r { background:#ff5f57; }
.ss-chrome .dot.y { background:#febc2e; }
.ss-chrome .dot.g { background:#28c840; }
.ss-chrome .ss-url {
    flex:1; margin:0 var(--gap-3);
    height:24px; padding:0 12px;
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:4px;
    font-size:12px; color:var(--tx-4);
    display:flex; align-items:center;
}
.ss-chrome .ss-badge {
    padding:5px 11px;
    background:var(--s-badge-bg); color:var(--s-badge-tx);
    border-radius:4px;
    font-size:11px; font-weight:700;
    letter-spacing:.08em;
    transition:background 600ms var(--ease-out), color 600ms var(--ease-out);
}

.ss-site {
    background:var(--s-bg);
    transition:background 700ms var(--ease-out);
    min-height:540px; padding:0;
}
.ss-nav {
    background:var(--s-card-bg);
    border-bottom:1px solid var(--s-line);
    padding:18px 36px;
    display:flex; align-items:center; gap:32px;
    transition:background 700ms var(--ease-out), border-color 700ms var(--ease-out);
}
.ss-logo {
    color:var(--s-tx);
    font-size:20px; font-weight:800;
    letter-spacing:-.02em;
    transition:color 700ms var(--ease-out);
}
.ss-logo small { color:var(--s-accent); transition:color 700ms var(--ease-out); }
.ss-nav nav {
    flex:1;
    display:flex; gap:24px;
    font-size:14px; color:var(--s-tx-2);
    font-weight:500;
    transition:color 700ms var(--ease-out);
}
.ss-cta { display:flex; gap:8px; }
.ss-cta a {
    padding:8px 16px; border-radius:4px;
    font-size:16px; font-weight:600;
    transition:all 700ms var(--ease-out);
}
.ss-btn-out { color:var(--s-tx-2); }
.ss-btn-pri { background:var(--s-accent); color:#fff; }

.ss-hero {
    padding:64px 36px 40px;
    text-align:center;
    transition:padding 700ms var(--ease-out);
}
.ss-eyebrow {
    display:inline-block;
    font-size:16px; font-weight:700;
    color:var(--s-eyebrow);
    text-transform:uppercase;
    letter-spacing:.18em;
    margin-bottom:18px;
    transition:color 700ms var(--ease-out);
}
.ss-h1 {
    font-size:38px;
    color:var(--s-tx);
    margin-bottom:14px;
    letter-spacing:-.03em;
    line-height:1.12;
    transition:color 700ms var(--ease-out);
}
.ss-sub {
    color:var(--s-tx-3);
    font-size:15px;
    max-width:480px;
    margin:0 auto 28px;
    line-height:1.6;
    transition:color 700ms var(--ease-out);
}
.ss-pills { display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.ss-btn-pri-lg, .ss-btn-out-lg {
    padding:13px 26px;
    border-radius:999px;
    font-size:14px; font-weight:700;
    transition:all 700ms var(--ease-out);
}
.ss-btn-pri-lg { background:var(--s-accent); color:#fff; }
.ss-btn-out-lg {
    background:transparent;
    border:1.5px solid var(--s-tx-3);
    color:var(--s-tx);
}

.ss-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:12px;
    padding:0 36px 48px;
}
.ss-cell {
    aspect-ratio:4/3;
    background:var(--s-card-bg);
    border:1px solid var(--s-line);
    border-radius:8px;
    padding:14px;
    display:flex; flex-direction:column; justify-content:flex-end;
    transition:background 700ms var(--ease-out), border-color 700ms var(--ease-out);
    position:relative; overflow:hidden;
}
.ss-cell::before {
    content:''; position:absolute; right:-20%; top:-20%;
    width:60%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle, rgba(0,0,0,.04), transparent 70%);
    transition:background 700ms var(--ease-out);
}
.seasonal-stage[data-season="winter"] .ss-cell::before { background:radial-gradient(circle, rgba(255,255,255,.06), transparent 70%); }
.ss-cell-label {
    font-size:14px; font-weight:700;
    color:var(--s-tx);
    transition:color 700ms var(--ease-out);
    position:relative; z-index:1;
}
.ss-cell-sub {
    font-size:11px; font-weight:600;
    color:var(--s-eyebrow);
    margin-top:3px;
    letter-spacing:.06em;
    transition:color 700ms var(--ease-out);
    position:relative; z-index:1;
}

/* 우측 메트릭 사이드 */
.ss-meta {
    display:flex; flex-direction:column; gap:12px;
}
.ss-meta-card {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:18px 22px;
    transition:border-color var(--t-fast) var(--ease);
}
.ss-meta-card:hover { border-color:var(--line-strong); }
.ss-meta-card .lbl {
    font-size:16px; font-weight:700;
    color:var(--tx-4);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:8px;
}
.ss-meta-card .num {
    font-family:var(--font-sans); font-size:32px; font-weight:800;
    color:var(--tx-1);
    letter-spacing:-.03em; line-height:1;
}
.ss-meta-card .num small { font-size:.5em; color:var(--tx-4); margin-left:3px; font-weight:600; }
.ss-meta-card .num.red { color:var(--hive-red); }
.ss-meta-card .num.green { color:var(--hive-green); }
.ss-meta-card .sub { font-size:14px; color:var(--tx-4); margin-top:6px; line-height:1.5; }
.ss-opt-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.ss-opt-list li {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border-bottom:1px dashed var(--line);
    font-size:16px;
}
.ss-opt-list li:last-child { border-bottom:none; }
.ss-opt-list .k { color:var(--tx-4); font-weight:500; }
.ss-opt-list .v {
    font-weight:700; color:var(--tx-1);
    padding:3px 9px; background:var(--bg-2); border-radius:4px;
    font-size:12px; letter-spacing:-.005em;
    transition:all 350ms var(--ease-out);
}

.ss-meta-action {
    margin-top:auto;
    padding:18px 22px;
    background:var(--accent); color:#fff;
    border-radius:var(--r-md);
    font-size:14px; font-weight:700;
    text-align:center;
    line-height:1.5;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.ss-meta-action .ph { font-size:18px; animation:bounceLeft 1.6s var(--ease) infinite; }
@keyframes bounceLeft {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-4px); }
}

@media (max-width:560px) {
    .ss-hero { padding:40px 20px 28px; }
    .ss-h1 { font-size:28px; }
    .ss-nav { padding:14px 20px; gap:14px; flex-wrap:wrap; }
    .ss-nav nav { display:none; }
    .ss-grid { padding:0 20px 28px; gap:8px; }
    .ss-cell { padding:10px; }
}

/* ============================================================
   시즌별 레이아웃 변형 — 빌더 옵션 가능 범위 (헤더 정렬·높이 / 색상 / 그리드 컬럼·라운드)
   ============================================================ */

/* ===== SPRING — 헤더 가운데 정렬 + 라운드 + 그리드 3컬럼 ===== */
.seasonal-stage[data-season="spring"] .ss-nav {
    justify-content:space-between;
    padding:22px 36px;
}
.seasonal-stage[data-season="spring"] .ss-logo {
    order:2; font-size:22px; font-weight:800;
}
.seasonal-stage[data-season="spring"] .ss-menu {
    order:1; gap:18px; font-size:16px;
}
.seasonal-stage[data-season="spring"] .ss-cta { order:3; }
.seasonal-stage[data-season="spring"] .ss-btn-pri,
.seasonal-stage[data-season="spring"] .ss-btn-out {
    border-radius:999px; padding:8px 18px;
}
.seasonal-stage[data-season="spring"] .ss-hero {
    padding:80px 36px 56px;
}
.seasonal-stage[data-season="spring"] .ss-h1 {
    font-size:42px; font-weight:700; letter-spacing:-.025em;
}
.seasonal-stage[data-season="spring"] .ss-btn-pri-lg,
.seasonal-stage[data-season="spring"] .ss-btn-out-lg {
    border-radius:999px; padding:14px 28px;
}
.seasonal-stage[data-season="spring"] .ss-grid {
    grid-template-columns:repeat(3,1fr); gap:14px;
}
.seasonal-stage[data-season="spring"] .ss-cell {
    border-radius:18px; aspect-ratio:4/3;
    box-shadow:0 4px 14px rgba(190,24,93,.06);
}
.seasonal-stage[data-season="spring"] .ss-cell:nth-child(n+4) { display:none; }


/* ===== SUMMER — 헤더 좌측 정렬 컴팩트 + 직각 + 그리드 4컬럼 ===== */
.seasonal-stage[data-season="summer"] .ss-nav {
    justify-content:flex-start;
    padding:14px 36px; gap:36px;
}
.seasonal-stage[data-season="summer"] .ss-logo { font-size:18px; font-weight:800; }
.seasonal-stage[data-season="summer"] .ss-menu {
    flex:0 1 auto; gap:22px; font-size:16px;
}
.seasonal-stage[data-season="summer"] .ss-cta { margin-left:auto; }
.seasonal-stage[data-season="summer"] .ss-btn-pri,
.seasonal-stage[data-season="summer"] .ss-btn-out {
    border-radius:0; padding:8px 16px; font-weight:700;
}
.seasonal-stage[data-season="summer"] .ss-hero {
    padding:88px 36px 52px;
    background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.4) 100%);
}
.seasonal-stage[data-season="summer"] .ss-eyebrow {
    background:#0891b2; color:#fff;
    padding:5px 12px; border-radius:0;
    letter-spacing:.16em; font-size:11px;
}
.seasonal-stage[data-season="summer"] .ss-h1 {
    font-size:48px; font-weight:800; letter-spacing:-.04em; line-height:1.05;
}
.seasonal-stage[data-season="summer"] .ss-btn-pri-lg,
.seasonal-stage[data-season="summer"] .ss-btn-out-lg {
    border-radius:0; padding:14px 32px; font-weight:700;
}
.seasonal-stage[data-season="summer"] .ss-btn-out-lg { border-width:2px; }
.seasonal-stage[data-season="summer"] .ss-grid {
    grid-template-columns:repeat(4,1fr); gap:8px;
}
.seasonal-stage[data-season="summer"] .ss-cell {
    border-radius:0; aspect-ratio:3/4;
    border-left:3px solid var(--s-accent); padding:14px;
}
.seasonal-stage[data-season="summer"] .ss-cell:nth-child(n+5) { display:none; }


/* ===== AUTUMN — 헤더 큰 보더 + 매거진 그리드 (1 big + 4 small) ===== */
.seasonal-stage[data-season="autumn"] .ss-nav {
    justify-content:space-between;
    padding:28px 36px;
    border-bottom:2px solid var(--s-tx);
}
.seasonal-stage[data-season="autumn"] .ss-logo {
    font-size:26px; font-weight:800; letter-spacing:-.03em;
}
.seasonal-stage[data-season="autumn"] .ss-menu {
    gap:22px; font-size:16px; font-weight:600;
    text-transform:uppercase; letter-spacing:.08em;
}
.seasonal-stage[data-season="autumn"] .ss-menu a { font-size:12px; }
.seasonal-stage[data-season="autumn"] .ss-btn-pri,
.seasonal-stage[data-season="autumn"] .ss-btn-out {
    border-radius:0; padding:8px 14px;
    font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
}
.seasonal-stage[data-season="autumn"] .ss-btn-pri { background:var(--s-tx); color:#fff; }
.seasonal-stage[data-season="autumn"] .ss-btn-out { border:1px solid var(--s-tx); color:var(--s-tx); }
.seasonal-stage[data-season="autumn"] .ss-hero {
    padding:64px 36px 48px;
}
.seasonal-stage[data-season="autumn"] .ss-eyebrow {
    border-left:3px solid var(--s-accent);
    padding-left:12px; letter-spacing:.14em;
}
.seasonal-stage[data-season="autumn"] .ss-h1 {
    font-size:48px; font-weight:800; letter-spacing:-.035em; line-height:1.05;
}
.seasonal-stage[data-season="autumn"] .ss-btn-pri-lg {
    background:var(--s-tx); color:#fff;
    border-radius:0; padding:14px 28px; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em; font-size:16px;
}
.seasonal-stage[data-season="autumn"] .ss-btn-out-lg {
    background:transparent; border:0;
    border-bottom:2px solid var(--s-tx);
    color:var(--s-tx); border-radius:0; padding:14px 4px;
    text-transform:uppercase; letter-spacing:.08em; font-size:16px; font-weight:700;
}
.seasonal-stage[data-season="autumn"] .ss-grid {
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:8px; padding:0 36px 48px;
}
.seasonal-stage[data-season="autumn"] .ss-cell {
    border-radius:0; border:1px solid var(--s-tx);
    aspect-ratio:auto; padding:18px;
}
.seasonal-stage[data-season="autumn"] .ss-cell:first-child {
    grid-row:span 2;
    background:var(--s-tx); color:var(--s-card-bg);
    aspect-ratio:auto;
}
.seasonal-stage[data-season="autumn"] .ss-cell:first-child .ss-cell-label {
    color:var(--s-card-bg); font-size:24px;
}
.seasonal-stage[data-season="autumn"] .ss-cell:first-child .ss-cell-sub {
    color:rgba(255,255,255,.6);
}
.seasonal-stage[data-season="autumn"] .ss-cell::before { display:none; }


/* ===== WINTER — 헤더 stack 미니멀 + 시네마틱 2 그리드 ===== */
.seasonal-stage[data-season="winter"] .ss-nav {
    flex-direction:column;
    align-items:center;
    padding:18px 36px 14px;
    gap:8px;
    border-bottom:1px solid var(--s-line);
    position:relative;
}
.seasonal-stage[data-season="winter"] .ss-logo {
    order:1; font-size:26px; font-weight:300;
    letter-spacing:.32em; text-transform:uppercase;
    color:var(--s-tx);
}
.seasonal-stage[data-season="winter"] .ss-logo small { display:none; }
.seasonal-stage[data-season="winter"] .ss-menu {
    order:2; gap:30px; font-size:11px;
    text-transform:uppercase; letter-spacing:.18em; font-weight:500;
}
.seasonal-stage[data-season="winter"] .ss-menu a { color:var(--s-tx-2); }
.seasonal-stage[data-season="winter"] .ss-cta {
    position:absolute; right:36px; top:24px; order:3;
}
.seasonal-stage[data-season="winter"] .ss-btn-pri,
.seasonal-stage[data-season="winter"] .ss-btn-out {
    background:transparent; color:var(--s-tx);
    border:1px solid var(--s-tx-3); border-radius:0;
    padding:6px 12px; font-size:11px;
    text-transform:uppercase; letter-spacing:.12em;
}
.seasonal-stage[data-season="winter"] .ss-hero {
    padding:120px 36px 80px;
}
.seasonal-stage[data-season="winter"] .ss-eyebrow {
    font-size:10px; letter-spacing:.4em;
    color:var(--s-eyebrow); text-transform:uppercase;
    font-weight:500; margin-bottom:32px;
}
.seasonal-stage[data-season="winter"] .ss-h1 {
    font-size:64px; font-weight:200;
    letter-spacing:-.04em; line-height:1;
}
.seasonal-stage[data-season="winter"] .ss-sub {
    margin-top:20px; font-size:14px; letter-spacing:.04em;
}
.seasonal-stage[data-season="winter"] .ss-pills { margin-top:36px; gap:14px; }
.seasonal-stage[data-season="winter"] .ss-btn-pri-lg {
    background:transparent; border:1px solid var(--s-tx-3);
    color:var(--s-tx); border-radius:0; padding:14px 32px;
    text-transform:uppercase; letter-spacing:.18em;
    font-size:11px; font-weight:500;
}
.seasonal-stage[data-season="winter"] .ss-btn-out-lg {
    background:transparent; border:0; color:var(--s-tx-3);
    padding:14px 8px; text-transform:uppercase; letter-spacing:.18em;
    font-size:11px; font-weight:500;
}
.seasonal-stage[data-season="winter"] .ss-grid {
    grid-template-columns:1fr 1fr; gap:1px;
    padding:0; background:var(--s-line);
}
.seasonal-stage[data-season="winter"] .ss-cell {
    border-radius:0; aspect-ratio:16/9;
    padding:24px; background:var(--s-card-bg); border:0;
}
.seasonal-stage[data-season="winter"] .ss-cell-label {
    font-size:20px; font-weight:300; letter-spacing:.04em;
}
.seasonal-stage[data-season="winter"] .ss-cell-sub {
    font-size:10px; letter-spacing:.18em;
}
.seasonal-stage[data-season="winter"] .ss-cell:nth-child(n+3) { display:none; }
.seasonal-stage[data-season="winter"] .ss-cell::before { display:none; }

/* 모바일 */
@media (max-width:760px) {
    .seasonal-stage[data-season="autumn"] .ss-grid { grid-template-columns:1fr; }
    .seasonal-stage[data-season="autumn"] .ss-cell:first-child { grid-row:auto; }
    .seasonal-stage[data-season="winter"] .ss-h1 { font-size:42px; }
    .seasonal-stage[data-season="winter"] .ss-grid { grid-template-columns:1fr; }
    .seasonal-stage[data-season="winter"] .ss-cta { position:static; margin-top:8px; }
}

/* ============================================================
   14. AI · AUTOMATION
   ============================================================ */
.ai-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-7);
    margin-top:var(--gap-7);
}
@media (min-width:880px) { .ai-grid { grid-template-columns:1fr 1fr; gap:var(--gap-6); } }
.ai-block {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:var(--gap-6);
}
.ai-block.dark { background:var(--accent); color:var(--accent-tx); border-color:var(--accent); }
.ai-block .label {
    font-family:var(--font-mono); font-size:11px;
    text-transform:uppercase; letter-spacing:.12em;
    color:var(--tx-4); margin-bottom:var(--gap-3);
    display:inline-flex; align-items:center; gap:8px;
    font-weight:700;
}
.ai-block .label::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--ok); }
.ai-block.dark .label { color:rgba(255,255,255,.6); }
.ai-block.dark .label::before { background:rgba(255,255,255,.4); }
.ai-block h3 { font-size:22px; letter-spacing:-.02em; margin-bottom:var(--gap-5); }
.ai-block.dark h3 { color:#fff; }

.ai-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.ai-list li {
    display:grid; grid-template-columns:34px 1fr;
    gap:14px; align-items:center;
    padding:12px 14px;
    background:var(--bg-1); border:1px solid var(--line);
    border-radius:var(--r-md);
    transition:border-color var(--t-fast) var(--ease);
}
.ai-list li:hover { border-color:var(--line-strong); }
.ai-list li .ic {
    width:34px; height:34px;
    background:var(--accent); color:var(--accent-tx);
    border-radius:var(--r-sm);
    display:grid; place-items:center;
    font-size:16px;
}
.ai-list li .name { font-size:16px font-weight:700; color:var(--tx-1); letter-spacing:-.005em; }
.ai-list li .desc { font-size:16px; color:var(--tx-4); margin-top:2px; font-family:var(--font-mono); }

.ai-block.dark .ai-list li {
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.08);
    color:#fff;
}
.ai-block.dark .ai-list li:hover { border-color:rgba(255,255,255,.2); }
.ai-block.dark .ai-list li .ic { background:rgba(255,255,255,.12); color:#fff; }
.ai-block.dark .ai-list li .name { color:#fff; }
.ai-block.dark .ai-list li .desc { color:rgba(255,255,255,.5); }

/* ============================================================
   15. GLOBAL CLINIC SYSTEM
   ============================================================ */
.global-section { background:var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.global-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-7);
    margin-top:var(--gap-7); align-items:start;
}
@media (min-width:980px) { .global-grid { grid-template-columns:1.05fr 1fr; gap:var(--gap-8); } }

.gl-pills {
    display:flex; flex-wrap:wrap; gap:var(--gap-2);
    margin-bottom:var(--gap-5);
}
.gl-pill {
    padding:8px 14px;
    border-radius:var(--r-pill);
    border:1px solid var(--line-strong);
    background:var(--bg-0);
    font-family:var(--font-mono); font-size:16px;
    font-weight:600; color:var(--tx-2);
    display:inline-flex; align-items:center; gap:8px;
    cursor:pointer;
    transition:all var(--t-fast) var(--ease);
}
.gl-pill .flag { font-family:var(--font-sans); font-size:16px; }
.gl-pill.on { background:var(--accent); color:var(--accent-tx); border-color:var(--accent); }

.gl-glossary {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-md);
    margin-top:var(--gap-4);
}
.gl-glossary .h {
    padding:var(--gap-3) var(--gap-4);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:11px;
    color:var(--tx-4); letter-spacing:.08em;
    text-transform:uppercase; font-weight:700;
}
.gl-glossary .h::before {
    content:''; width:6px; height:6px; border-radius:50%;
    background:var(--ok);
}
.gl-glossary .row {
    display:grid; grid-template-columns:90px 1fr 1fr 1fr 1fr;
    padding:10px var(--gap-4);
    border-bottom:1px solid var(--line);
    font-size:12px; align-items:center; gap:8px;
}
.gl-glossary .row:last-child { border-bottom:none; }
.gl-glossary .ko { color:var(--tx-1); font-weight:700; }
.gl-glossary .tgt { color:var(--tx-3); font-size:11.5px; }
.gl-glossary .row.head {
    background:var(--bg-1);
    font-family:var(--font-mono); font-size:9.5px;
    color:var(--tx-5); letter-spacing:.08em;
    text-transform:uppercase; font-weight:700;
    padding:8px var(--gap-4);
}

.gl-card {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:var(--gap-6);
    box-shadow:var(--shadow-lg);
    position:relative;
}
.gl-card .badge-corner {
    position:absolute; top:var(--gap-4); right:var(--gap-4);
    background:var(--bg-2); color:var(--tx-2);
    font-family:var(--font-mono); font-size:10px;
    padding:4px 10px; border-radius:var(--r-pill);
    font-weight:700; letter-spacing:.08em;
    text-transform:uppercase;
}
.gl-card .source {
    font-family:var(--font-mono); font-size:10px;
    color:var(--tx-4); text-transform:uppercase; letter-spacing:.1em;
    margin-bottom:var(--gap-2); font-weight:700;
}
.gl-card .ko-src {
    font-size:18px; color:var(--tx-1); font-weight:700;
    margin-bottom:var(--gap-5); line-height:1.4;
    padding-bottom:var(--gap-4); border-bottom:1px dashed var(--line);
}
.gl-target {
    display:grid; grid-template-columns:60px 1fr;
    gap:var(--gap-3); padding:10px 0;
    border-bottom:1px dashed var(--line);
    font-size:16px; align-items:flex-start;
}
.gl-target:last-child { border-bottom:none; padding-bottom:0; }
.gl-target .lang {
    font-family:var(--font-mono); font-size:10px;
    color:var(--tx-4); font-weight:700;
    text-transform:uppercase; letter-spacing:.08em;
    margin-top:2px;
}
.gl-target .text {font-size:10px; color:var(--tx-2); line-height:1.5; }

.gl-engines {
    display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
    margin-top:var(--gap-5); padding-top:var(--gap-5);
    border-top:1px solid var(--line);
}
.gl-engines .e {
    padding:10px 12px;
    background:var(--bg-1); border:1px solid var(--line);
    border-radius:var(--r-sm);
    font-size:11.5px;
}
.gl-engines .e .nm { font-weight:700; color:var(--tx-1); font-size:16px; }
.gl-engines .e .role { color:var(--tx-4); font-size:16px; margin-top:1px; font-family:var(--font-mono); }

/* ============================================================
   16. EXCLUSIVE MODELS / IMAGES
   ============================================================ */
.models-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-6);
    margin-top:var(--gap-7); align-items:start;
}
@media (min-width:980px) { .models-grid { grid-template-columns:1.2fr 1fr; gap:var(--gap-7); } }

.cat-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-3);
}
@media (min-width:560px) { .cat-grid { grid-template-columns:repeat(3,1fr); } }
.cat-card {
    aspect-ratio:1;
    border:1px solid var(--line); border-radius:var(--r-lg);
    overflow:hidden;
    position:relative;
    cursor:pointer;
    transition:transform var(--t-norm) var(--ease), border-color var(--t-norm) var(--ease);
}
.cat-card:hover { transform:translateY(-3px); border-color:var(--line-strong); }
.cat-card .bg { position:absolute; inset:0; }
.cat-card .ovl {
    position:absolute; inset:0; padding:14px;
    display:flex; flex-direction:column; justify-content:flex-end;
    background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.85) 100%);
    color:#fff;
    z-index:2;
}
.cat-card .ovl .tag {
    font-family:var(--font-mono); font-size:9px;
    text-transform:uppercase; letter-spacing:.1em;
    color:rgba(255,255,255,.6); margin-bottom:3px;
}
.cat-card .ovl .name { font-size:14px; font-weight:700; letter-spacing:-.005em; }
.cat-card .ovl .count { font-size:10px; color:rgba(255,255,255,.55); margin-top:2px; font-family:var(--font-mono); }

.cat-1 .bg { background:linear-gradient(135deg, #fef3e2 0%, #d4a574 100%); }
.cat-1 .bg::after { content:''; position:absolute; right:-20%; top:-20%; width:80%; height:80%; border-radius:50%; background:rgba(212,165,116,.4); }
.cat-2 .bg { background:linear-gradient(160deg, #1e293b 0%, #475569 100%); }
.cat-2 .bg::after { content:''; position:absolute; left:-15%; bottom:-15%; width:65%; height:65%; border-radius:50%; background:rgba(148,163,184,.3); }
.cat-3 .bg { background:linear-gradient(140deg, #fdf2f8 0%, #f9a8d4 100%); }
.cat-3 .bg::after { content:''; position:absolute; right:-10%; bottom:-10%; width:60%; height:60%; border-radius:50%; background:rgba(244,114,182,.4); }
.cat-4 .bg { background:linear-gradient(135deg, #ecfdf5 0%, #6ee7b7 100%); }
.cat-4 .bg::after { content:''; position:absolute; left:50%; top:30%; transform:translateX(-50%); width:50%; height:50%; border-radius:50%; background:rgba(110,231,183,.4); }
.cat-5 .bg { background:linear-gradient(135deg, #eff6ff 0%, #93c5fd 100%); }
.cat-5 .bg::after { content:''; position:absolute; right:0; top:0; width:60%; height:60%; background:radial-gradient(circle at 70% 30%, rgba(147,197,253,.5), transparent 60%); }
.cat-6 .bg { background:linear-gradient(140deg, #fdf4ff 0%, #d8b4fe 100%); }
.cat-6 .bg::after { content:''; position:absolute; right:-10%; bottom:-10%; width:55%; height:55%; border-radius:50%; background:rgba(216,180,254,.5); }

/* image conversion mockup */
.img-convert {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); overflow:hidden;
    box-shadow:var(--shadow-md);
}
.img-convert-h {
    padding:var(--gap-4) var(--gap-5);
    border-bottom:1px solid var(--line);
    background:var(--bg-1);
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:11px;
    color:var(--tx-3); font-weight:700; letter-spacing:.06em;
    text-transform:uppercase;
}
.img-convert-h .ic { color:var(--accent); font-size:14px; }
.img-convert-h .stat {
    margin-left:auto;
    font-family:var(--font-mono); font-size:10px;
    color:var(--ok); padding:2px 8px;
    background:var(--ok-bg); border-radius:3px;
    letter-spacing:.04em;
}

.ic-row {
    padding:var(--gap-4) var(--gap-5);
    display:grid; grid-template-columns:1fr 30px 1fr;
    gap:var(--gap-3); align-items:center;
    border-bottom:1px solid var(--line);
}
.ic-row:last-child { border-bottom:none; }
.ic-row .arrow { color:var(--line-strong); font-size:18px; text-align:center; }
.ic-cell {
    background:var(--bg-1); border:1px solid var(--line);
    border-radius:var(--r-sm);
    padding:10px 12px;
}
.ic-cell .label {
    font-family:var(--font-mono); font-size:9px;
    color:var(--tx-5); letter-spacing:.1em;
    text-transform:uppercase; margin-bottom:4px;
}
.ic-cell .value {
    font-family:var(--font-mono); font-size:18px; font-weight:700;
    color:var(--tx-1); letter-spacing:-.02em;
}
.ic-cell .sub { font-size:10.5px; color:var(--tx-4); margin-top:2px; }
.ic-cell.after .value { color:var(--ok); }

.ic-sizes {
    padding:var(--gap-4) var(--gap-5);
    background:var(--bg-1);
    display:flex; gap:8px; flex-wrap:wrap;
}
.ic-size {
    flex:1; min-width:60px;
    padding:8px 10px;
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-sm);
    text-align:center;
    font-family:var(--font-mono);
}
.ic-size .w { font-size:16px; font-weight:700; color:var(--tx-1); letter-spacing:-.02em; }
.ic-size .name { font-size:9px; color:var(--tx-5); margin-top:2px; }

/* IMAGE AUTOMATION — 새 레이아웃 (16번 섹션) */
.img-auto-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-6);
    margin-top:var(--gap-7); align-items:start;
}
@media (min-width:980px) { .img-auto-grid { grid-template-columns:1fr 1fr; gap:var(--gap-7); } }
.img-feat-list {
    display:flex; flex-direction:column; gap:var(--gap-3);
}
.img-feat {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:var(--gap-5);
    display:grid; grid-template-columns:48px 1fr; gap:var(--gap-4);
    align-items:flex-start;
    transition:border-color var(--t-norm) var(--ease), transform var(--t-norm) var(--ease), box-shadow var(--t-norm) var(--ease);
}
.img-feat:hover { border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.img-feat .ic {
    width:48px; height:48px;
    background:var(--accent); color:var(--accent-tx);
    border-radius:var(--r-md);
    display:grid; place-items:center;
    font-size:22px;
}
.img-feat h5 { font-size:18px; letter-spacing:-.015em; margin-bottom:6px; }
.img-feat p { font-size:16px; color:var(--tx-3); line-height:1.6; }

/* ============================================================
   17. HQ / FRANCHISE
   ============================================================ */
.hq-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-6);
    margin-top:var(--gap-7); align-items:stretch;
}
@media (min-width:980px) { .hq-grid { grid-template-columns:1.05fr 1fr; gap:var(--gap-7); } }

.hq-diagram {
    background:var(--accent); color:var(--accent-tx);
    border-radius:var(--r-xl); padding:var(--gap-7);
    position:relative; overflow:hidden;
    min-height:420px;
}
.hq-diagram::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,.07), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,.04), transparent 40%);
}
.hq-hub {
    position:relative; z-index:2;
    width:120px; height:120px; margin:0 auto var(--gap-7);
    background:var(--accent-tx); color:var(--accent);
    border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-weight:800;
    box-shadow:0 0 0 8px rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.4);
}
.hq-hub .lbl { font-family:var(--font-mono); font-size:16px; letter-spacing:.12em; }
.hq-hub .name { font-size:18px; letter-spacing:-.02em; margin-top:4px; }
.hq-hub::before, .hq-hub::after {
    content:''; position:absolute;
    border:1px dashed rgba(255,255,255,.2); border-radius:50%;
    pointer-events:none;
    animation:rotate 24s linear infinite;
}
.hq-hub::before { inset:-22px; }
.hq-hub::after { inset:-44px; animation-duration:36s; animation-direction:reverse; }
@keyframes rotate { to { transform:rotate(360deg); } }

.hq-branches {
    position:relative; z-index:2;
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
    margin-bottom:var(--gap-6);
}
@media (max-width:560px) { .hq-branches { grid-template-columns:repeat(2,1fr); } }
.hq-branch {
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--r-md); padding:10px;
    text-align:center;
    font-size:16px; color:rgba(255,255,255,.85);
    transition:background var(--t-fast) var(--ease);
}
.hq-branch:hover { background:rgba(255,255,255,.1); }
.hq-branch .ic {
    font-size:18px; color:rgba(255,255,255,.4); margin-bottom:4px;
}
.hq-branch .nm { font-weight:700; font-size:16px; }
.hq-branch .city { font-size:9.5px; color:rgba(255,255,255,.5); margin-top:2px; font-family:var(--font-mono); }

.hq-flows {
    position:relative; z-index:2;
    display:flex; flex-direction:column; gap:8px;
}
.hq-flow-row {
    display:flex; align-items:center; gap:10px;
    padding:8px 12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--r-sm);
    font-size:11.5px; color:rgba(255,255,255,.85);
}
.hq-flow-row .ph { color:rgba(255,255,255,.5); font-size:16px; }
.hq-flow-row .grow { flex:1; }
.hq-flow-row .v {
    font-family:var(--font-mono); font-size:16px;
    color:rgba(255,255,255,.5); letter-spacing:.04em;
}

.hq-side {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:var(--gap-6);
    display:flex; flex-direction:column; gap:var(--gap-5);
}
.hq-side h3 { font-size:22px; letter-spacing:-.02em; }
.hq-side .desc { font-size:16px; color:var(--tx-3); line-height:1.6; }
.hq-side .feat-list {
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:8px;
}
.hq-side .feat-list li {
    display:flex; gap:8px; align-items:flex-start;
    font-size:16px; color:var(--tx-2);
    padding:8px 0; border-bottom:1px dashed var(--line);
}
.hq-side .feat-list li::before {
    content:'+'; color:var(--accent); font-weight:700;
    font-family:var(--font-mono);
}
.hq-side .feat-list li:last-child { border-bottom:none; }

.hq-policy {
    margin-top:var(--gap-7);
    background:var(--bg-1);
    border:1px solid var(--line); border-left:3px solid var(--accent);
    border-radius:var(--r-md);
    padding:var(--gap-6);
}
.hq-policy .label {
    font-family:var(--font-mono); font-size:16px; font-weight:700;
    color:var(--accent); letter-spacing:.12em;
    text-transform:uppercase; margin-bottom:var(--gap-3);
}
.hq-policy h4 { font-size:18px; letter-spacing:-.015em; margin-bottom:var(--gap-3); }
.hq-policy p { font-size:16px color:var(--tx-3); line-height:1.6; margin-bottom:var(--gap-4); }
.hq-policy ul { list-style:none; padding:0; margin:0 0 var(--gap-5); }
.hq-policy ul li {
    font-size:16px; color:var(--tx-2);
    padding:6px 0 6px 18px; position:relative;
    line-height:1.55;
}
.hq-policy ul li::before {
    content:'·'; position:absolute; left:6px;
    color:var(--accent); font-weight:700;
}

/* ============================================================
   18. MIGRATION
   ============================================================ */
.mig-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-6);
    margin-top:var(--gap-7); align-items:stretch;
}
@media (min-width:980px) { .mig-grid { grid-template-columns:1.1fr 1fr; gap:var(--gap-7); } }

.mig-card {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:var(--gap-7);
    box-shadow:var(--shadow-md);
}
.mig-card h3 { font-size:24px; letter-spacing:-.02em; margin-bottom:var(--gap-3); }
.mig-card .lead { font-size:14px; color:var(--tx-3); line-height:1.6; margin-bottom:var(--gap-5); }
.mig-tools {
    display:flex; flex-direction:column; gap:8px;
    margin-bottom:var(--gap-5);
}
.mig-tool {
    display:grid; grid-template-columns:auto 1fr auto;
    gap:var(--gap-3); align-items:center;
    padding:14px 16px;
    background:var(--bg-1); border:1px solid var(--line);
    border-radius:var(--r-md);
    transition:border-color var(--t-fast) var(--ease);
}
.mig-tool:hover { border-color:var(--line-strong); }
.mig-tool .ic {
    width:36px; height:36px;
    background:var(--accent); color:var(--accent-tx);
    border-radius:var(--r-sm);
    display:grid; place-items:center;
    font-size:14px; font-weight:800;
    font-family:var(--font-mono);
}
.mig-tool .nm { font-size:14px; font-weight:700; color:var(--tx-1); letter-spacing:-.005em; }
.mig-tool .desc { font-size:11.5px; color:var(--tx-4); margin-top:2px; font-family:var(--font-mono); }
.mig-tool .stat {
    font-family:var(--font-mono); font-size:10px;
    color:var(--ok); padding:3px 8px;
    background:var(--ok-bg); border-radius:3px;
    font-weight:700; letter-spacing:.04em;
}

.mig-promise {
    background:var(--bg-1);
    border:1px dashed var(--line-strong);
    border-radius:var(--r-md);
    padding:var(--gap-4) var(--gap-5);
    display:grid; grid-template-columns:auto 1fr;
    gap:var(--gap-3); align-items:center;
}
.mig-promise .big {
    font-family:var(--font-mono); font-size:36px; font-weight:800;
    color:var(--tx-1); letter-spacing:-.03em; line-height:1;
}
.mig-promise .txt { font-size:12.5px; color:var(--tx-3); line-height:1.55; }
.mig-promise .txt strong { color:var(--tx-1); }

.mig-stats {
    display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-3);
    margin-bottom:var(--gap-6);
}
.mig-stat {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-md); padding:var(--gap-4);
}
.mig-stat .num {
    font-family:var(--font-mono); font-size:28px; font-weight:800;
    color:var(--tx-1); letter-spacing:-.03em; line-height:1;
}
.mig-stat .num small { font-size:.5em; color:var(--tx-4); margin-left:2px; font-weight:600; }
.mig-stat .lbl { font-size:11.5px; color:var(--tx-4); margin-top:8px; line-height:1.4; }

.mig-flow {
    display:flex; flex-direction:column; gap:0;
}
.mig-flow .step {
    padding:14px 0;
    display:grid; grid-template-columns:32px 1fr;
    gap:14px; align-items:flex-start;
    border-bottom:1px dashed var(--line);
    position:relative;
}
.mig-flow .step:last-child { border-bottom:none; }
.mig-flow .step .n {
    width:28px; height:28px;
    background:var(--bg-2); color:var(--tx-2);
    border:1px solid var(--line);
    border-radius:50%;
    display:grid; place-items:center;
    font-family:var(--font-mono); font-size:11px; font-weight:700;
}
.mig-flow .step.done .n { background:var(--accent); color:var(--accent-tx); border-color:var(--accent); }
.mig-flow .step h5 { font-size:14px; font-weight:700; color:var(--tx-1); letter-spacing:-.005em; }
.mig-flow .step p { font-size:12px; color:var(--tx-4); margin-top:3px; line-height:1.5; }

/* ============================================================
   19. OTA UPDATE
   ============================================================ */
.ota-section { background:var(--accent); color:var(--accent-tx); }
.ota-section .sec-headline h2,
.ota-section .sec-headline p,
.ota-section .eyebrow { color:var(--accent-tx) !important; }
.ota-section .sec-headline h2 { color:#fff; }
.ota-section .sec-headline p { color:rgba(255,255,255,.7); }
.ota-section .eyebrow { color:rgba(255,255,255,.5); }
.ota-section .eyebrow::before { background:rgba(255,255,255,.4); }

.ota-timeline {
    margin-top:var(--gap-7);
    position:relative;
    display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gap-3);
}
@media (max-width:760px) { .ota-timeline { grid-template-columns:repeat(2,1fr); } }
.ota-timeline::before {
    content:''; position:absolute;
    left:0; right:0; top:32px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.2) 10%, rgba(255,255,255,.2) 90%, transparent);
}
.ota-tick {
    text-align:center; position:relative;
}
.ota-tick .dot {
    width:14px; height:14px; border-radius:50%;
    background:var(--accent); border:2px solid rgba(255,255,255,.2);
    margin:25px auto 18px;
    position:relative; z-index:2;
    transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ota-tick.now .dot { background:#fff; border-color:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.12); }
.ota-tick.future .dot { border-style:dashed; opacity:.5; }
.ota-tick .ver {
    font-family:var(--font-mono); font-size:16px; font-weight:700;
    color:#fff; letter-spacing:-.01em;
}
.ota-tick .label {
    font-family:var(--font-mono); font-size:16px;
    color:rgba(255,255,255,.5); margin-top:4px;
    letter-spacing:.06em;
}
.ota-tick.now .label { color:var(--ok); }

.ota-feat {
    margin-top:var(--gap-8);
    display:grid; grid-template-columns:1fr; gap:var(--gap-3);
}
@media (min-width:760px) { .ota-feat { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px) { .ota-feat { grid-template-columns:repeat(4,1fr); } }
.ota-card {
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--r-md);
    padding:var(--gap-5);
    transition:background var(--t-fast) var(--ease);
}
.ota-card:hover { background:rgba(255,255,255,.08); }
.ota-card .ic {
    width:36px; height:36px;
    background:rgba(255,255,255,.08);
    border-radius:var(--r-sm);
    display:grid; place-items:center;
    font-size:16px; color:#fff;
    margin-bottom:var(--gap-3);
}
.ota-card h5 { color:#fff; font-size:16px; letter-spacing:-.005em; margin-bottom:6px; }
.ota-card p { font-size:16px; color:rgba(255,255,255,.55); line-height:1.5; }

.ota-promise {
    margin-top:var(--gap-8);
    text-align:center;
    font-size:clamp(20px,2.6vw,28px); font-weight:700;
    color:#fff; letter-spacing:-.02em;
}
.ota-promise span { color:rgba(255,255,255,.55); font-weight:500; display:block; margin-top:8px; font-size:.65em; }

/* ============================================================
   20. PRICING
   ============================================================ */
.pricing-section { background:var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.pri-cmp {
    margin-top:var(--gap-7);
    display:grid; grid-template-columns:1fr; gap:var(--gap-4);
    margin-bottom:var(--gap-7);
}
@media (min-width:760px) { .pri-cmp { grid-template-columns:1fr 1fr; gap:var(--gap-5); } }
.pri-cmp-side {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:var(--gap-6);
}
.pri-cmp-side.out { border-color:rgba(220,38,38,.2); }
.pri-cmp-side.hv { background:var(--accent); color:var(--accent-tx); border-color:var(--accent); }
.pri-cmp-side h4 {
    font-size:16px; font-weight:700;
    text-transform:uppercase; letter-spacing:.12em;
    margin-bottom:var(--gap-4);
    font-family:var(--font-mono);
}
.pri-cmp-side.out h4 { color:var(--hive-red); }
.pri-cmp-side.hv h4 { color:rgba(255,255,255,.6); }
.pri-cmp-side ul { list-style:none; padding:0; margin:0; }
.pri-cmp-side ul li {
    font-size:16px; padding:8px 0;
    display:flex; align-items:center; gap:10px;
    border-bottom:1px dashed var(--line);
}
.pri-cmp-side ul li:last-child { border-bottom:none; }
.pri-cmp-side.out ul li::before {
    content:'\f1fb'; font-family:'phosphor';
    color:var(--hive-red); font-size:14px;
}
.pri-cmp-side.hv ul li {
    color:rgba(255,255,255,.85);
    border-color:rgba(255,255,255,.1);
}
.pri-cmp-side.hv ul li::before {
    content:'\f3ed'; font-family:'phosphor';
    color:var(--ok); font-size:16px;
}

.price-grid {
    display:grid; grid-template-columns:1fr; gap:var(--gap-4);
    margin-top:var(--gap-7);
}
@media (min-width:560px) { .price-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px) { .price-grid { grid-template-columns:repeat(4,1fr); align-items:stretch; } }
.price-card {
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:var(--gap-6);
    display:flex; flex-direction:column;
    transition:border-color var(--t-norm) var(--ease), transform var(--t-norm) var(--ease), box-shadow var(--t-norm) var(--ease);
    position:relative;
}
.price-card:hover { border-color:var(--line-strong); transform:translateY(-3px); }
.price-card.featured {
    background:var(--accent); color:var(--accent-tx); border-color:var(--accent);
    transform:scale(1.015); box-shadow:var(--shadow-xl);
}
.price-card.featured::before {
    content:'MOST POPULAR';
    position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    background:var(--bg-0); color:var(--accent);
    font-family:var(--font-mono); font-size:9.5px; font-weight:700;
    padding:4px 11px; border-radius:var(--r-pill);
    letter-spacing:.12em; border:1px solid var(--accent);
    white-space:nowrap;
}
.price-card .tier {
    font-family:var(--font-mono); font-size:10px;
    text-transform:uppercase; letter-spacing:.12em;
    color:var(--tx-4); margin-bottom:var(--gap-3); font-weight:700;
}
.price-card.featured .tier { color:rgba(255,255,255,.6); }
.price-card h3 { font-size:22px; margin-bottom:var(--gap-2); letter-spacing:-.02em; }
.price-card.featured h3 { color:var(--accent-tx); }
.price-card .desc {
    font-size:12.5px; color:var(--tx-3);
    margin-bottom:var(--gap-5); line-height:1.5;
}
.price-card.featured .desc { color:rgba(255,255,255,.7); }
.price-card .amount {
    display:flex; align-items:baseline; gap:6px;
    margin-bottom:6px;
}
.price-card .amount .num {
    font-family:var(--font-mono); font-size:32px; font-weight:800;
    letter-spacing:-.03em; color:var(--tx-1); line-height:1;
}
.price-card.featured .amount .num { color:var(--accent-tx); }
.price-card .amount .unit { font-size:12px; color:var(--tx-4); font-weight:600; }
.price-card.featured .amount .unit { color:rgba(255,255,255,.6); }
.price-card .price-old {
    font-family:var(--font-mono); font-size:13px; font-weight:600;
    color:var(--tx-5); text-decoration:line-through;
    margin-bottom:4px; display:flex; align-items:center; gap:8px;
}
.price-card.featured .price-old { color:rgba(255,255,255,.45); }
.price-card .price-old .save {
    background:var(--hive-green); color:#fff;
    font-family:var(--font-sans); font-size:10px; font-weight:800;
    padding:2px 7px; border-radius:var(--r-sm); letter-spacing:.04em;
    text-decoration:none;
}
.price-card .billing { font-size:11px; color:var(--tx-4); margin-bottom:var(--gap-5); font-family:var(--font-mono); }
.price-card.featured .billing { color:rgba(255,255,255,.5); }
.price-card .badge-early {
    position:absolute; top:-11px; left:20px;
    background:var(--accent); color:#fff;
    font-family:var(--font-sans); font-size:11px; font-weight:800;
    padding:4px 12px; border-radius:var(--r-pill);
    letter-spacing:.06em; text-transform:uppercase;
    box-shadow:0 4px 12px rgba(0,0,0,.16); z-index:2;
}
.price-card.featured .badge-early { background:var(--hive-green); }
.price-card { position:relative; }
/* 3개월 모드 (기본): 정가 노출 — 할인 표기 숨김. 연 모드일 때만 노출 */
.pricing-section:not(.cycle-year) .price-card .badge-early,
.pricing-section:not(.cycle-year) .price-card .price-old { display:none; }
.price-card ul.feats {
    list-style:none; padding:0; margin:var(--gap-4) 0;
    display:flex; flex-direction:column; gap:8px;
    flex:1; border-top:1px solid var(--line); padding-top:var(--gap-4);
}
.price-card.featured ul.feats { border-color:rgba(255,255,255,.16); }
.price-card ul.feats li {
    display:flex; align-items:flex-start; gap:8px;
    font-size:12.5px; color:var(--tx-2); line-height:1.5;
}
.price-card.featured ul.feats li { color:rgba(255,255,255,.85); }
.price-card ul.feats li::before {
    content:'+'; color:var(--tx-5); flex-shrink:0;
    font-family:var(--font-mono); font-weight:600; margin-top:1px;
}
.price-card.featured ul.feats li::before { color:rgba(255,255,255,.5); }
.price-card .btn { margin-top:auto; width:100%; }
.price-card.featured .btn { background:var(--accent-tx); color:var(--accent); border-color:var(--accent-tx); }
.price-card.featured .btn:hover { background:var(--bg-2); border-color:var(--bg-2); }

.price-setup-row {
    margin-top:var(--gap-7);
    display:grid; gap:var(--gap-4);
    grid-template-columns:1fr;
}
@media (min-width:720px) { .price-setup-row { grid-template-columns:1fr 1fr; } }
.price-setup {
    background:var(--bg-0); border:1px dashed var(--line-strong);
    border-radius:var(--r-md);
    padding:var(--gap-5); text-align:center;
}
.price-setup.accent { border-style:solid; border-color:var(--accent); background:var(--bg-1); }
.price-setup .sub-lbl {
    font-size:11px; color:var(--tx-4); font-family:var(--font-mono);
    margin-top:4px;
}

/* 결제 주기 토글 */
.billing-toggle {
    display:flex; padding:5px;
    background:var(--bg-0); border:1px solid var(--line);
    border-radius:var(--r-pill);
    margin:0 auto var(--gap-6);
    box-shadow:var(--shadow-sm);
    gap:2px; width:fit-content;
}
.billing-toggle button {
    padding:11px 22px; height:44px;
    border:0; background:transparent;
    border-radius:var(--r-pill);
    font-family:var(--font-sans); font-size:15px; font-weight:700;
    color:var(--tx-3); cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
    transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    white-space:nowrap;
}
.billing-toggle button:hover { color:var(--tx-1); }
.billing-toggle button.active { background:var(--accent); color:#fff; }
.billing-toggle .bonus {
    background:var(--hive-green); color:#fff;
    padding:3px 9px; border-radius:var(--r-sm);
    font-size:12px; font-weight:700; letter-spacing:-.005em;
}
.billing-toggle button.active .bonus { background:#fff; color:var(--hive-green); }

/* Image Engine 무료 배지 (year 모드) */
.price-card[data-image-card] { position:relative; }
.price-card[data-image-card]::after {
    content:'무료 포함';
    display:none;
    position:absolute; top:-12px; right:20px;
    background:var(--hive-green); color:#fff;
    font-size:12px; font-weight:800;
    padding:4px 12px; border-radius:var(--r-pill);
    letter-spacing:.04em; text-transform:uppercase;
    box-shadow:0 4px 12px rgba(22,163,74,.3);
    z-index:2;
}
.pricing-section.cycle-year .price-card[data-image-card]::after { display:inline-block; }
.pricing-section.cycle-year .price-card[data-image-card] {
    border-color:var(--hive-green);
    box-shadow:0 0 0 2px rgba(22,163,74,.12);
}
.pricing-section.cycle-year .price-card[data-image-card] .amount .num { color:var(--hive-green); }

.price-setup .lbl {
    font-family:var(--font-mono); font-size:11px;
    text-transform:uppercase; letter-spacing:.12em;
    color:var(--tx-4); font-weight:700;
}
.price-setup .v {
    font-family:var(--font-mono); font-size:28px; font-weight:800;
    color:var(--tx-1); letter-spacing:-.02em;
    margin:6px 0;
}
.price-setup p { font-size:12px; color:var(--tx-4); }

/* ============================================================
   21. FAQ — 카테고리별 탭 + 대량
   ============================================================ */
.faq-tabs {
    display:flex; flex-wrap:wrap; gap:6px;
    margin-top:var(--gap-6);
    padding:6px;
    background:var(--bg-1); border:1px solid var(--line);
    border-radius:var(--r-pill);
    width:fit-content; max-width:100%;
    box-shadow:var(--shadow-sm);
}
.faq-tabs button {
    padding:10px 18px; height:42px;
    border:0; background:transparent;
    border-radius:var(--r-pill);
    font-family:var(--font-sans); font-size:15px; font-weight:700;
    color:var(--tx-3); cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
    transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    letter-spacing:-.005em; white-space:nowrap;
}
.faq-tabs button:hover { color:var(--tx-1); }
.faq-tabs button.active { background:var(--accent); color:#fff; }
.faq-tabs button .ph { font-size:16px; }
.faq-tabs button .cnt {
    font-size:16px; font-weight:700;
    padding:2px 8px; background:rgba(0,0,0,.06);
    border-radius:var(--r-pill); color:var(--tx-4);
}
.faq-tabs button.active .cnt { background:rgba(255,255,255,.18); color:#fff; }

.faq-pane { display:none; margin-top:var(--gap-5); }
.faq-pane.active { display:block; animation:fadeIn .35s var(--ease-out); }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary {
    list-style:none; cursor:pointer;
    padding:var(--gap-5) 0;
    display:flex; align-items:center; gap:var(--gap-4);
    font-size:17px; font-weight:600;
    color:var(--tx-1); letter-spacing:-.01em;
    transition:color var(--t-fast) var(--ease);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
    content:'+'; margin-left:auto;
    font-family:var(--font-mono); font-size:24px; font-weight:300;
    color:var(--tx-3);
    transition:transform var(--t-norm) var(--ease), color var(--t-fast) var(--ease);
}
.faq-item summary:hover { color:var(--accent); }
.faq-item[open] summary::after { transform:rotate(45deg); color:var(--accent); }
.faq-item .faq-body {
    padding:0 0 var(--gap-5);
    color:var(--tx-3); font-size:15px; line-height:1.65; max-width:780px;
}
.faq-item .faq-body code {
    font-family:var(--font-mono); font-size:16px;
    padding:2px 8px; background:var(--bg-2);
    border:1px solid var(--line); border-radius:var(--r-sm);
    color:var(--tx-2);
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final {
    background:var(--accent); color:var(--accent-tx);
    border-radius:var(--r-2xl);
    padding:var(--gap-10) var(--gap-6);
    text-align:center;
    margin:var(--gap-9) var(--gap-5);
    position:relative; overflow:hidden;
}
.cta-final::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,.05), transparent 40%);
    pointer-events:none;
}
.cta-final h2 {
    color:var(--accent-tx);
    font-size:clamp(32px,5vw,56px);
    letter-spacing:-.03em; line-height:1.05;
    margin-bottom:var(--gap-4); position:relative;
}
.cta-final p {
    color:rgba(255,255,255,.7); font-size:18px;
    max-width:640px; margin:0 auto var(--gap-6);
    line-height:1.55; position:relative;
}
.cta-final .btns { display:inline-flex; flex-wrap:wrap; gap:var(--gap-3); justify-content:center; position:relative; }
.cta-final .btn { background:var(--accent-tx); color:var(--accent); border-color:var(--accent-tx); }
.cta-final .btn:hover { background:var(--bg-2); border-color:var(--bg-2); }
.cta-final .btn.ghost { background:transparent; color:var(--accent-tx); border-color:rgba(255,255,255,.3); }
.cta-final .btn.ghost:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--bg-1); padding:var(--gap-8) 0 var(--gap-5); border-top:1px solid var(--line); }
.footer-grid {
    display:grid; grid-template-columns:1.4fr repeat(4,1fr);
    gap:var(--gap-6); margin-bottom:var(--gap-7);
}
@media (max-width:760px) { .footer-grid { grid-template-columns:1fr 1fr; } }
.footer-brand .brand { margin-bottom:var(--gap-3); }
.footer-brand p { font-size:16px; color:var(--tx-4); line-height:1.55; max-width:280px; }
.footer h5 {
    font-family:var(--font-mono); font-size:11px;
    text-transform:uppercase; letter-spacing:.12em;
    color:var(--tx-4); margin-bottom:var(--gap-3); font-weight:600;
}
.footer ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.footer ul li a { font-size:16px; color:var(--tx-3); transition:color var(--t-fast) var(--ease); }
.footer ul li a:hover { color:var(--tx-1); }
.footer-bottom {
    border-top:1px solid var(--line); padding-top:var(--gap-4);
    display:flex; justify-content:space-between; flex-wrap:wrap;
    gap:var(--gap-3); font-size:12px; color:var(--tx-4);
}
.footer-bottom .legal { display:flex; gap:var(--gap-5); }
.footer-bottom .legal a { color:var(--tx-4); }
.footer-bottom .legal a:hover { color:var(--tx-2); }

/* ============================================================
   RESPONSIVE base
   ============================================================ */
@media (max-width:980px) {
    .hb-frame, .code-frame { grid-template-columns:1fr; min-height:0; }
    .hb-panel, .code-side { max-height:380px; }
    .mb-bar { font-size:10px; }
    .cw-pipeline .cw-step::after { display:none; }
}
@media (max-width:880px) {
    .nav-menu { display:none; }
    section { padding:var(--gap-9) 0; }
    .shell-frame { transform:none !important; }
    .shell-body { grid-template-columns:56px 1fr; min-height:480px; }
    .shell-content { grid-template-columns:1fr; }
    .edit-panel { display:none; }
    .hero h1 { font-size:40px; }
    .builder-tabs { width:100%; overflow-x:auto; flex-wrap:nowrap; }
    .builder-tabs button { white-space:nowrap; }
    .gl-glossary .row { grid-template-columns:1fr; gap:6px; padding:12px var(--gap-4); }
    .gl-glossary .row.head { display:none; }
    .gl-glossary .ko { font-size:14px; margin-bottom:4px; }
    .gl-glossary .tgt { font-size:12px; padding-left:12px; }
    .ic-row { grid-template-columns:1fr; gap:8px; }
    .ic-row .arrow { transform:rotate(90deg); width:20px; margin:0 auto; }
    .roi-side .total .v { font-size:28px; }
    .roi-side.hive .big .free { font-size:96px; }
    .cmp-thead, .cmp-row { grid-template-columns:1.2fr 1fr 1fr; padding:var(--gap-3) var(--gap-4); font-size:12px; }
    .cmp-row .lbl { font-size:16px; }
    .cmp-row .out, .cmp-row .hv { font-size:12px; }
    .tl-row { grid-template-columns:64px 1fr; gap:var(--gap-3); }
    .tl-mini { display:none; }
    .timeline { padding-left:var(--gap-5); }
    .ps-detail { padding:var(--gap-5) var(--gap-4); }
    .ps-screenshot h3 { font-size:20px; }
    .footer-bottom { flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px) {
    .hero { padding:var(--gap-7) 0 var(--gap-7); }
    .hero h1 { font-size:34px; }
    .hero-meta .num { font-size:22px; }
    .nav-cta .btn { padding:0 var(--gap-3); font-size:11px; }
    .cta-final { padding:var(--gap-8) var(--gap-5); margin:var(--gap-7) var(--gap-3); }
    .ota-promise { font-size:18px; }
    .ps-scores { gap:var(--gap-4); }
    .ps-donut { width:54px; height:54px; }
    .ps-donut span { font-size:15px; }
}

/* 상단 검정 바 관련 CSS는 builder.php 인라인 스타일로 처리됨 */