/* Jeno Unified Crystal UI — public Apex + synthetic Demo
   2026-10-29 full-theme cutover. Visual-only, no auth/routing changes. */
:root{
  color-scheme:light;--bg:#f7fafc;--surface:#fff;--ink:#173149;
  --muted:#587084;--line:#dbe7ef;--blue:#276da6;--blue-deep:#195883;
  --blue-soft:#e8f3fa;--teal:#238eac;--radius:18px;
  font:400 15px/1.55 "Public Sans","Segoe UI Variable Text","Segoe UI","Noto Sans KR",Arial,sans-serif;
  color:var(--ink);background:var(--bg)
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;min-width:320px;color:var(--ink);
 background:radial-gradient(ellipse at 86% 5%,rgba(210,235,251,.62),transparent 32rem),
 radial-gradient(ellipse at 22% 59%,rgba(225,243,251,.38),transparent 35rem),var(--bg)}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit}
.hidden{display:none!important}
:where(a,button,select,input,[tabindex]):focus-visible{outline:3px solid #72b5da;outline-offset:3px}
.layout{min-height:100vh;display:grid;grid-template-columns:236px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;min-height:600px;background:rgba(255,255,255,.96);
 color:var(--ink);padding:22px 14px 18px;display:flex;flex-direction:column;
 border-right:1px solid var(--line);box-shadow:7px 0 32px rgba(31,75,108,.028);z-index:5}
.brand{display:flex;align-items:center;gap:12px;padding:5px 9px 22px;margin-bottom:14px;
 border-bottom:1px solid #e5eef3}
.brand-mark{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;
 background:linear-gradient(140deg,#f6fcff,#e7f3fa);border:1px solid #dfeef4;
 border-radius:14px;box-shadow:0 7px 17px rgba(27,87,119,.07)}
.brand-mark img{width:36px;height:36px;object-fit:contain;display:block}
.brand strong{display:block;font:600 25px/1.1 Georgia,"Times New Roman",serif;
 letter-spacing:-.035em;color:#17374d}
.brand small{display:block;color:#7290a2;font-size:10px;font-weight:650;margin-top:4px;letter-spacing:.01em}
.nav{display:grid;align-content:start;gap:5px}
.nav-link{display:flex;align-items:center;gap:12px;padding:11px 13px;min-height:44px;
 border-radius:11px;border:1px solid transparent;color:#46657a;font-size:13px;font-weight:650;
 transition:background-color .18s,color .18s,border-color .18s}
.nav-link:hover{background:#f0f7fb;color:var(--blue-deep)}
.nav-link.active{color:#175e8a;background:#e8f3fa;border-color:#d3e6f0;font-weight:750}
.nav-link svg{width:19px;height:19px;flex:0 0 19px;stroke:currentColor;stroke-width:1.8;
 fill:none;stroke-linecap:round;stroke-linejoin:round;color:#4081a5}
.nav-link svg rect{fill:none}
.nav-link:nth-child(3) svg path{fill:currentColor;stroke:none}
.nav-divider{height:1px;background:#e8eff4;margin:12px 6px}
#privilegedNav{display:contents}
.sidebar-bottom{margin-top:auto;display:grid;gap:11px;border-top:1px solid #e5eef3;padding:17px 7px 0}
.locale-label{display:grid;gap:6px;color:#6d8797;font-size:11px;font-weight:700}
.locale-label select{height:40px;width:100%;min-width:0;padding:7px 11px;background:white;
 color:#234b66;border:1px solid #cbdce7;border-radius:10px;cursor:pointer}
.identity-nav{display:grid;gap:7px}
.auth-link,.profile-link{display:flex;align-items:center;gap:9px;min-height:39px;
 padding:8px 12px;border:1px solid #d2e2ea;border-radius:10px;color:#285c7c;
 background:#fff;font-size:12px;font-weight:700}
.auth-link:hover{background:#f0f8fb}
.profile-link{justify-content:center;color:#185e87;background:#e8f3fa;border-color:#d3e6f0}
.profile-link:hover{background:#dceef8}
.status-dot{width:8px;height:8px;border-radius:50%;background:#9bafba;flex:0 0 8px}
.status-dot.online{background:#2aa78f}
main{min-width:0;padding:0 0 28px}
.topbar,.hero{max-width:1260px;margin:32px auto 22px;padding:clamp(30px,4.5vw,60px);
 min-height:325px;border-radius:24px;border:1px solid #d7e7f0;
 background:radial-gradient(circle at 94% 12%,rgba(152,210,245,.35),transparent 31%),
 linear-gradient(125deg,#ffffff 22%,#eff8fc 100%);
 box-shadow:0 18px 52px -38px rgba(26,78,111,.22);
 display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:34px;position:relative;overflow:hidden}
.topbar::after,.hero::after{content:"";position:absolute;pointer-events:none;width:260px;height:260px;
 border:1px solid rgba(89,169,212,.12);border-radius:38%;right:-150px;top:-145px;
 transform:rotate(25deg)}
.eyebrow{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:10px;
 font-weight:800;color:#387b9e}
.topbar h1,.hero h1{max-width:850px;margin:14px 0 19px;letter-spacing:-.044em;
 font:600 clamp(37px,4.8vw,65px)/1.06 Georgia,"Times New Roman",serif;color:#173149}
.topbar p,.hero p{max-width:680px;color:#536d80;font-size:16px;line-height:1.7;margin:0}
.primary-cta,.secondary-cta,.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;padding:11px 18px;border-radius:11px;white-space:nowrap;
 font-size:13px;font-weight:750;transition:background-color .18s,box-shadow .18s,transform .18s}
.primary-cta,.primary{background:linear-gradient(145deg,#317fae,#1d628f);color:white;
 box-shadow:0 8px 18px -12px #286e95}
.primary-cta:hover,.primary:hover{background:#195b89;transform:translateY(-1px)}
.secondary-cta,.secondary{background:#eaf4fa;color:#245e82;border:1px solid #cfe3ee}
.secondary-cta:hover,.secondary:hover{background:#deedf7}
.hero-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:150px}
.hero-grid,.section{max-width:1260px;margin:0 auto 22px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.48fr) minmax(240px,.86fr);gap:18px}
.hero-panel,.signal-panel,.feature-card,.card,.split,.deck-link,.host-pair>span{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 box-shadow:0 14px 38px -30px rgba(24,68,96,.22),0 2px 8px rgba(32,84,115,.035)}
.hero-panel{padding:clamp(24px,3vw,35px);border-left:4px solid #66b1d8}
.metric-kicker{display:inline-flex;font-size:11px;font-weight:800;color:#297aa5;
 background:#eaf5fa;border:1px solid #d6ebf5;border-radius:100px;padding:6px 11px}
.hero-panel h2,.section-head h2,.split h2,.boundary h2{color:#19364f;
 font:600 clamp(23px,2.5vw,31px)/1.22 Georgia,"Times New Roman",serif;
 letter-spacing:-.035em;margin:15px 0 13px}
.hero-panel p,.section p,.feature-card p,.card p,.split p{
 color:var(--muted);line-height:1.72}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.pill,.tag{display:inline-flex;align-items:center;border:1px solid #d3e7ee;background:#edf7fa;
 color:#2b698a;border-radius:100px;padding:6px 11px;font-size:11px;font-weight:750}
.signal-panel{padding:16px 20px}
.signal-row{display:flex;justify-content:space-between;align-items:center;
 gap:12px;padding:19px 1px;border-bottom:1px solid #e6eff3;font-size:13px;color:#557182}
.signal-row:last-child{border-bottom:0}
.signal-row strong{color:#1d577e;font-weight:750}
.signal-icon{display:inline-grid;place-items:center}
.trend-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
 stroke-linecap:round;stroke-linejoin:round}
.section{padding-top:37px;padding-bottom:10px}
.section-head{max-width:880px;margin-bottom:20px}
.section-head h2{margin:9px 0 13px}
.feature-grid,.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.feature-card,.card{padding:25px;min-width:0;position:relative}
.feature-card:hover,.card:hover{border-color:#b9d9e9}
.step,.card-icon{display:inline-flex;align-items:center;justify-content:center;
 min-width:35px;height:30px;background:#e6f3f9;color:#2176a2;border:1px solid #d1e8f1;
 border-radius:9px;font-size:11px;font-weight:850}
.feature-card h3,.card h3{font-size:17px;line-height:1.35;margin:17px 0 9px;color:#203b51}
.feature-card p,.card p{font-size:13px;margin:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
 padding:32px;margin-top:26px}
.split p{margin-bottom:0;max-width:740px}
.action-stack{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
footer{max-width:1260px;margin:30px auto 0;padding:22px 0 38px;
 border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;
 color:#8097a5;font-size:12px}
.status-strip{max-width:1260px;margin:0 auto 10px;padding:13px 17px;
 border:1px solid #d4e6ec;border-radius:13px;background:#e9f5f9;
 display:flex;align-items:center;gap:10px;color:#436b81;font-size:12px}
.status-strip strong{color:#1a638c}
.status-strip span:last-child{color:#547a90}
.boundary{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.84fr);
 gap:22px;align-items:center}
.boundary p{max-width:690px;margin:0}
.host-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.host-pair>span{min-width:0;padding:17px}
.host-pair small,.host-pair strong,.host-pair em{display:block}
.host-pair small{font-size:10px;color:#5b95b3;letter-spacing:.12em;font-weight:800}
.host-pair strong{font-size:13px;word-break:break-word;margin-top:7px;color:#224b69}
.host-pair em{font-size:11px;font-style:normal;color:#6f8898;margin-top:8px}
.host-pair>i{font-size:20px;color:#66a7c7;font-style:normal}
.card{overflow:hidden;min-height:210px}
.card::after{content:"DEMO";position:absolute;right:18px;top:20px;color:#a1c0d0;
 font-size:9px;letter-spacing:.13em;font-weight:850}
.card-icon{margin-bottom:3px}
.card p{margin-bottom:20px;min-height:48px}
.featured-deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:24px;align-items:center}
.deck-link{padding:19px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.deck-count{display:grid;place-items:center;width:49px;height:49px;background:#22709d;
 color:white;border-radius:12px;font-weight:850}
.deck-link strong,.deck-link small{display:block}
.deck-link strong{font-size:14px}
.deck-link small{font-size:11px;color:var(--muted);margin-top:4px}
.deck-link svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
@media(max-width:1380px){
 .topbar,.hero,.hero-grid,.section,.status-strip,footer{margin-left:32px;margin-right:32px}
}
@media(max-width:1060px){
 .layout{grid-template-columns:220px minmax(0,1fr)}
 .topbar,.hero{grid-template-columns:1fr;min-height:0}
 .primary-cta,.hero-actions{justify-self:start}
 .hero-actions{flex-direction:row}
 .hero-grid{grid-template-columns:1fr}
 .boundary{grid-template-columns:1fr}
 .cards,.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
 .layout{display:block}
 .sidebar{position:relative;height:auto;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr) auto;padding:12px 18px;gap:10px;border-right:0;border-bottom:1px solid var(--line)}
 .brand{margin:0;padding:0;border:0}
 .brand-mark{height:40px;width:40px;flex-basis:40px;border-radius:12px}
 .brand-mark img{height:31px;width:31px}
 .brand strong{font-size:22px}
 .nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
 .nav-link{min-height:38px;padding:7px 12px}
 .nav-divider{display:none}
 .sidebar-bottom{margin:0;padding:0;border:0;align-self:center;min-width:136px}
 .locale-label span{display:none}
 .locale-label select{height:35px;font-size:12px}
 .auth-link,.profile-link{min-height:34px;padding:5px 8px;font-size:11px}
 .topbar,.hero{margin:20px 18px 18px;padding:30px}
 .hero-grid,.section,.status-strip,footer{margin-left:18px;margin-right:18px}
 .feature-grid,.cards{gap:12px}
 .split{grid-template-columns:1fr}
 .action-stack{align-items:flex-start}
 .topbar h1,.hero h1{font-size:clamp(34px,7vw,50px)}
}
@media(max-width:570px){
 .sidebar{padding:12px;gap:12px;grid-template-columns:1fr}
 .brand small{display:block}
 .nav{grid-column:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .nav-link{justify-content:center;gap:5px;white-space:nowrap;font-size:12px;padding:8px 5px}
 .nav-link svg{display:none}
 .sidebar-bottom{display:flex;align-items:center;justify-content:space-between;
  gap:10px;min-width:0}
 .locale-label{min-width:105px;max-width:145px;flex:1}
 .identity-nav{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
 .auth-link,.profile-link{white-space:nowrap;min-height:36px}
 .topbar,.hero{margin:14px 12px;padding:25px 21px;border-radius:18px}
 .topbar h1,.hero h1{font-size:clamp(32px,9vw,42px);line-height:1.12}
 .topbar p,.hero p{font-size:14px}
 .hero-grid,.section,.status-strip,footer{margin-left:12px;margin-right:12px}
 .feature-grid,.cards{grid-template-columns:1fr}
 .hero-panel,.feature-card,.card,.split{padding:21px}
 .section{padding-top:25px}
 .signal-panel{padding:11px 18px}
 .split{margin-top:18px}
 .status-strip{flex-wrap:wrap;align-items:flex-start}
 .status-strip span:last-child{width:100%}
 .host-pair{grid-template-columns:1fr}
 .host-pair>i{text-align:center;transform:rotate(90deg)}
 .hero-actions{flex-wrap:wrap}
 footer{display:flex;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .nav-link,.primary-cta,.primary,.secondary-cta,.secondary{transition:none}
}

/* Localized heading typography and four-item Demo navigation on narrow phones. */
html[lang="ko"] :is(.topbar h1,.hero h1,.hero-panel h2,.section-head h2,.split h2,.boundary h2){
 font-family:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo","Segoe UI",sans-serif;
 font-weight:750;letter-spacing:-.055em
}
@media(max-width:570px){
 .nav:has(> .nav-link:nth-of-type(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
}