:root{
  /* 바탕 — 밝은 계열 3단 */
  --bg:#F4F5FA; --side-bg:#EFF0F6; --card:#FFFFFF; --card-off:#F7F8FC;
  --line:#E4E6EF; --line2:#D2D5E2;
  /* 글자 */
  --tx:#14141F; --muted:#4E5068; --dim:#7C7F95; --ghost:#A6A9BC;
  /* 층 색 */
  --c1:#6D4AE0; --c1s:#F0EBFD;   /* Talent */
  --c2:#0FA99A; --c2s:#E4F7F4;   /* Academy */
  --c3:#3B7BE0; --c3s:#E8F0FD;   /* Contents */
  --c4:#D98815; --c4s:#FDF3E3;   /* Commerce */
  --red:#D33B4E;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--muted);
  font-family:Pretendard,-apple-system,system-ui,sans-serif;
  font-size:14px; line-height:1.6; letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.app{display:flex; min-height:100vh}

/* ══ 사이드 ══ */
.side{
  width:184px; flex:none; background:var(--side-bg); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{padding:22px 20px 20px; border-bottom:1px solid var(--line)}
.brand .logo{height:26px; width:auto; display:block}
.brand .s{font-size:8px; font-weight:700; letter-spacing:.22em; color:var(--ghost); margin-top:9px}
.nav{flex:1; padding:12px 10px; overflow-y:auto}
.nav .grp{font-size:8.5px; font-weight:800; letter-spacing:.18em; color:var(--ghost); padding:12px 10px 6px}
.nav a{
  display:flex; align-items:center; gap:10px; padding:7.5px 10px; border-radius:7px;
  color:var(--muted); font-size:12.5px; font-weight:500; text-decoration:none;
  white-space:nowrap; transition:color .14s, background .14s;
}
.nav a:hover{color:var(--tx); background:rgba(20,20,31,.045)}
.nav a.on{color:var(--c1); background:var(--card); font-weight:600; box-shadow:0 1px 2px rgba(20,20,31,.06)}
.nav a.on .ic{color:var(--c1)}
.nav a .ic{width:14px; text-align:center; font-size:11px; color:var(--ghost); flex:none}
.nav a.lock{color:var(--ghost)}
.nav a.lock:hover{background:none; color:var(--ghost); cursor:default}
.nav a.lock:after{content:""; margin-left:auto; width:4px; height:4px; border-radius:50%; background:var(--line2); flex:none}
.side-foot{
  padding:16px 20px 20px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:8.5px; font-weight:500; line-height:2;
  letter-spacing:.14em; color:var(--ghost);
}

/* ══ 헤더 ══ */
.main{flex:1; min-width:0}
.top{
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px); padding:0 26px;
  display:flex; align-items:center; gap:20px; height:60px; position:sticky; top:0; z-index:20;
}
.top h1{margin:0; font-size:15px; font-weight:700; color:var(--tx); letter-spacing:-0.02em}
.top .tag{
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.1em;
  color:var(--c1); background:var(--c1s); border-radius:5px; padding:3px 7px;
}
.top .mid{flex:1; text-align:center}
.top .sl-ko{font-size:13.5px; font-weight:700; color:var(--tx); letter-spacing:-0.02em; line-height:1.3}
.top .sl-en{font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--c1); letter-spacing:.06em; margin-top:3px}
.top .right{display:flex; align-items:center; gap:16px; font-size:11.5px; color:var(--dim)}
.top .dt{font-family:var(--mono); font-size:11px; letter-spacing:-0.02em}
.who{display:flex; align-items:center; gap:8px}
.who .av{
  width:26px; height:26px; border-radius:7px; background:var(--c1s); border:1px solid rgba(109,74,224,.18);
  color:var(--c1); font-family:var(--mono); font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.who .nm{font-size:11.5px; font-weight:600; color:var(--tx); line-height:1.25}
.who .rl{font-size:9.5px; color:var(--ghost)}

.wrap{padding:26px 26px 60px; max-width:1560px}

/* ══ 플라이휠 ══ */
.fly{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; margin-bottom:34px; box-shadow:0 1px 3px rgba(20,20,31,.05);
}
.fw{background:var(--card); padding:20px 22px 18px; position:relative}
.fw:before{content:""; position:absolute; left:0; right:0; top:0; height:2px}
.fw.on:before{background:var(--ac)}
.fw.off{background:var(--card-off)}
.fw.off:before{background:var(--line2)}
.fw .hd{display:flex; align-items:center; gap:7px; margin-bottom:14px}
.fw .idx{
  font-family:var(--mono); font-size:9px; font-weight:800; letter-spacing:.06em;
  width:17px; height:17px; border-radius:4px; display:flex; align-items:center; justify-content:center;
}
.fw.on .idx{background:var(--acs); color:var(--ac)}
.fw.off .idx{background:#EAECF3; color:var(--ghost)}
.fw .nm{font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.15em}
.fw.on .nm{color:var(--ac)}
.fw.off .nm{color:var(--ghost)}
.fw .v{
  font-family:var(--mono); font-size:38px; font-weight:800; letter-spacing:-0.045em;
  line-height:1; display:flex; align-items:baseline; gap:5px;
}
.fw.on .v{color:var(--tx)}
.fw.off .v{color:#B3B6C7}
.fw .v u{font-family:Pretendard; font-size:14px; font-weight:600; text-decoration:none; color:var(--dim)}
.fw.off .v u{color:#B3B6C7}
.fw .d{font-size:11px; color:var(--dim); margin-top:12px; line-height:1.5}
.fw.off .d{color:var(--ghost)}
.fw .d em{font-style:normal; color:var(--c4); font-weight:600}

/* ══ 층 ══ */
.layer{margin-bottom:38px}
.lh{display:flex; align-items:baseline; gap:12px; margin-bottom:16px}
.lh .k{font-family:var(--mono); font-size:10px; font-weight:800; letter-spacing:.2em}
.lh h2{margin:0; font-size:18px; font-weight:700; color:var(--tx); letter-spacing:-0.03em}
.layer.off .lh h2{color:var(--dim)}
.lh .ln{flex:1; height:1px; background:var(--line); margin:0 4px}
.lh .st{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.1em; border-radius:4px; padding:3px 8px}
.st-live{color:var(--c2); background:var(--c2s)}
.st-part{color:var(--c4); background:var(--c4s)}
.st-none{color:var(--ghost); background:#EAECF3}

.row{display:grid; gap:14px}
.r2{grid-template-columns:1fr 1fr}
.r3{grid-template-columns:1fr 1fr 1fr}
.rA{grid-template-columns:1.5fr 1fr 1fr}
.c{
  background:var(--card); border:1px solid var(--line); border-radius:13px;
  padding:18px 19px; min-width:0; transition:border-color .18s, box-shadow .18s;
  box-shadow:0 1px 2px rgba(20,20,31,.04);
  display:flex; flex-direction:column;
}
.c:hover{border-color:var(--line2); box-shadow:0 2px 8px rgba(20,20,31,.06)}
.c.q{background:var(--card-off); border-style:dashed; box-shadow:none}
.c.q:hover{box-shadow:none}
.c .ch{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex:none}
/* 본문 블록이 남는 세로 공간을 나눠 갖는다 */
.c > .fn, .c > .g, .c > .dn, .c > .tb, .c > svg, .c > .body{flex:1 1 auto; min-height:0}
.c > .fn, .c > .g{display:flex; flex-direction:column; justify-content:space-evenly}
.c > .tb{display:flex; flex-direction:column; justify-content:flex-start}
.c > .note{flex:none; margin-top:auto}
.c > svg{align-self:stretch}
.c h3{margin:0; font-size:12.5px; font-weight:700; color:var(--tx); letter-spacing:-0.015em}
.c.q h3{color:var(--dim)}
.c .sub{margin-left:auto; font-family:var(--mono); font-size:9.5px; color:var(--ghost); letter-spacing:.02em}

/* 퍼널 */
.fn .s{display:flex; align-items:center; gap:12px; padding:7.5px 0}
.fn .l{width:76px; flex:none; font-size:11.5px; color:var(--muted)}
.fn .t{flex:1; height:22px; background:#F1F2F8; border-radius:5px; overflow:hidden}
.fn .f{height:100%; display:flex; align-items:center; padding-left:9px;
  font-family:var(--mono); font-size:10.5px; font-weight:700; color:#fff}
.fn .p{width:48px; flex:none; text-align:right; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--tx)}

/* 도넛 */
.dn{display:flex; align-items:center; gap:16px}
.dn svg{flex:none}
.dn .lg{flex:1; min-width:0}
.dn .r{display:flex; align-items:center; gap:8px; padding:6.5px 0; font-size:12px}
.dn .r .d{width:8px; height:8px; border-radius:2px; flex:none}
.dn .r .n{flex:1; color:var(--tx); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dn .r .p{font-family:var(--mono); font-size:11px; font-weight:700; color:var(--tx)}
.dn .r .c2{font-family:var(--mono); font-size:10px; color:var(--ghost); width:30px; text-align:right}
.dn .r.off .n{color:var(--ghost); font-weight:400}
.dn .r.off .p{color:var(--ghost); font-weight:400}
.dn .r.off .d{opacity:.3}

/* 게이지 */
.g .i{display:flex; align-items:center; gap:11px; padding:7px 0}
.g .n{width:72px; flex:none; font-size:11.5px; color:var(--muted)}
.g .t{flex:1; height:7px; background:#EDEEF5; border-radius:4px; overflow:hidden}
.g .f{display:block; height:7px; border-radius:4px}
.g .p{width:62px; text-align:right; font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--tx)}
.g .p i{font-style:normal; color:var(--ghost); font-weight:400; margin-left:3px}

/* 표 */
table{width:100%; border-collapse:collapse; font-size:11.5px}
th{
  text-align:left; font-family:var(--mono); font-weight:700; color:var(--ghost);
  font-size:9px; letter-spacing:.12em; padding:0 0 8px; border-bottom:1px solid var(--line);
}
th:last-child,td:last-child{text-align:right}
td{padding:8.5px 0; border-bottom:1px solid var(--line); color:var(--muted)}
tr:last-child td{border-bottom:none}
td.k{color:var(--tx); font-weight:500}
td.n{font-family:var(--mono); font-weight:600; color:var(--tx)}
td.z{color:var(--dim)}

/* 빈 상태 */
.q .body{text-align:center; padding:8px 4px 6px}
.q .ttl{font-size:12px; font-weight:600; color:var(--dim); margin-bottom:6px}
.q .txt{font-size:11px; color:var(--ghost); line-height:1.7}
.q .act{
  display:inline-block; margin-top:12px; font-family:var(--mono);
  font-size:9.5px; font-weight:700; letter-spacing:.06em;
  color:var(--c1); background:var(--c1s); border-radius:6px; padding:5px 11px;
}
.note{font-size:10.5px; color:var(--dim); margin-top:12px; padding-top:12px; border-top:1px solid var(--line); line-height:1.65}
.note b{color:var(--tx); font-weight:600}
.note .hi{color:var(--red); font-weight:600}

/* 할 일 */
.td .i{display:flex; align-items:center; gap:11px; padding:8.5px 0; border-bottom:1px solid var(--line)}
.td .i:last-child{border-bottom:none}
.td .n{font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--ghost); width:14px; flex:none}
.td .t{font-size:11.5px; color:var(--muted)}

@keyframes rise{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
.fw,.layer{animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards}
.fw:nth-child(1){animation-delay:.02s} .fw:nth-child(2){animation-delay:.07s}
.fw:nth-child(3){animation-delay:.12s} .fw:nth-child(4){animation-delay:.17s}
.layer:nth-of-type(1){animation-delay:.2s} .layer:nth-of-type(2){animation-delay:.25s}
.layer:nth-of-type(3){animation-delay:.3s} .layer:nth-of-type(4){animation-delay:.35s}

@media(max-width:1300px){
  .fly{grid-template-columns:repeat(2,1fr)}
  .r3,.rA{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .side{display:none}
  .fly,.r2,.r3,.rA{grid-template-columns:1fr}
  .top .mid{display:none}
  .wrap{padding:20px 16px 50px}
  .top{padding:0 16px}
}