:root {
  --bg: #0a0d12; --chrome: #0d1117; --panel: #10141b; --panel2: #131821; --raised: #151a23; --select: #17243a;
  --line: #222936; --line2: #2c3443;
  --t1: #ffffff; --t2: #d6ddE8; --t3: #9aa5b5; --t4: #7f8a9b;
  --blue: #4a8cff; --action: #2f6fe0; --cyan: #3fc1d0; --amber: #e0a630; --green: #3fbf7f; --red: #f0605a; --violet: #a37bf7; --gray: #6b7687;
  --font: 'IBM Plex Sans', 'Noto Sans KR', 'Noto Sans SC', 'Apple SD Gothic Neo', 'Malgun Gothic', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--t2); font-family: var(--font); font-size: 14px; line-height: 1.6; }
a { color: #6fa8ff; text-decoration: none; } a:hover { color: #a4c8ff; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* top nav */
.topnav { background: var(--chrome); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.topnav .wrap { display: flex; align-items: center; gap: 4px; min-height: 52px; flex-wrap: wrap; }
.brand { font-weight: 600; color: var(--t1); margin-right: 16px; display: flex; align-items: center; gap: 8px; }
.brand svg { color: var(--cyan); }
.topnav a.nav { color: var(--t3); padding: 6px 12px; border-radius: 4px; font-size: 13px; }
.topnav a.nav:hover { background: var(--raised); color: var(--t1); }
.topnav a.nav.on { background: var(--select); color: var(--t1); }

/* page */
main { padding: 40px 0 72px; }
h1 { margin: 0 0 12px; font-size: 28px; line-height: 1.25; color: var(--t1); font-weight: 600; }
h2 { margin: 40px 0 6px; font-size: 18px; color: var(--t1); font-weight: 600; }
.lead { color: var(--t3); max-width: 760px; margin: 0 0 8px; }
.meta { color: var(--t4); font-size: 12.5px; margin: 4px 0 0; }
.mono { font-family: var(--mono); }

/* cards */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; color: inherit; }
a.card:hover { border-color: var(--blue); background: var(--panel2); }
.card h3 { margin: 0; font-size: 16px; color: var(--t1); font-weight: 600; }
.card p { margin: 0; color: var(--t3); }

/* KPI */
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.kpi .l { font-size: 12px; color: var(--t4); }
.kpi .v { font-size: 26px; color: var(--t1); font-weight: 600; margin: 2px 0 8px; } .kpi .v small { font-size: 14px; color: var(--t4); font-weight: 400; }
.kpi.gold { border-color: #5a4a12; background: #1d1a0e; }

/* progress */
.bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--blue); }
.bar.green > i { background: var(--green); } .bar.amber > i { background: var(--amber); } .bar.gray > i { background: var(--gray); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* badges */
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 3px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.b-done { background: #0f2a22; color: #7ee2ae; } .b-active { background: #3a2e12; color: #f2c14e; } .b-planned { background: #1f2733; color: #9aa5b5; }
.b-sample { background: #16283f; color: #7fb0ff; } .b-base { background: #2a1f45; color: #c4b0ff; } .b-fail { background: #3a1a1a; color: #ff9a94; }

/* callout */
.note { border-left: 3px solid var(--amber); background: var(--panel); padding: 12px 16px; border-radius: 0 6px 6px 0; color: var(--t2); margin: 24px 0; max-width: 860px; }
.note b { color: var(--t1); }

/* phase + step cards */
.phase { display: flex; align-items: center; gap: 12px; margin: 36px 0 12px; }
.phase .dot { width: 36px; height: 36px; border-radius: 18px; border: 2px solid var(--blue); color: #9fc2ff; display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: 0 0 36px; }
.phase h2 { margin: 0; font-size: 16px; }
.step .id { font-family: var(--mono); font-size: 12px; color: var(--t4); }
.step .first { font-size: 12.5px; color: #9fc2ff; }
.step .foot { border-top: 1px dashed var(--line2); margin-top: auto; padding-top: 8px; color: var(--t4); font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--t4); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--panel2); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid #1a202a; vertical-align: top; }
.tablewrap { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }

/* gantt */
.gantt { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.gantt-in { --w: 17px; min-width: calc(240px + 52 * var(--w)); position: relative; }
.g-head, .g-row { display: grid; grid-template-columns: 240px repeat(52, var(--w)); align-items: center; }
.g-head { background: var(--panel2); border-bottom: 1px solid var(--line); font-size: 10.5px; color: var(--t4); }
.g-head > div { padding: 6px 0; text-align: center; border-left: 1px solid #1a202a; } .g-head > div:first-child { text-align: left; padding-left: 12px; border: 0; }
.g-row { border-bottom: 1px solid #1a202a; min-height: 36px; }
.g-row .nm { padding: 4px 12px; font-size: 12.5px; color: var(--t1); } .g-row .nm small { display: block; color: var(--t4); font-size: 11px; }
.g-bar { height: 16px; border-radius: 3px; background: var(--blue); opacity: .85; }
.g-bar.done { background: var(--green); } .g-bar.active { background: var(--amber); }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); opacity: .8; pointer-events: none; }
.g-ms { height: 12px; width: 12px; transform: rotate(45deg); background: var(--cyan); margin-left: 9px; }

/* architecture */
.layer { border: 1px solid var(--line2); border-radius: 8px; padding: 14px 16px; background: var(--panel); margin-bottom: 12px; }
.layer > .lt { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--t3); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 8px; }
.layer.l-web { border-color: #1c5560; } .layer.l-api { border-color: #2c4b88; } .layer.l-data { border-color: #5a4a12; } .layer.l-agent { border-color: #5a3a8a; } .layer.l-cust { border-color: #3a4558; border-style: dashed; }
.boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.box { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.box b { color: var(--t1); font-size: 13px; display: block; } .box span.d { color: var(--t4); font-size: 11.5px; display: block; margin: 2px 0 6px; }
.arrow { text-align: center; color: var(--t4); font-size: 12px; margin: -4px 0 8px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--t3); margin: 12px 0; align-items: center; }

/* screens gallery */
.shot { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.shot img { width: 100%; display: block; background: #05070a; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 10; object-fit: contain; }
.shot .cap { padding: 10px 12px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.shot .cap b { color: var(--t1); font-weight: 600; font-size: 13px; }
.shot .cap small { color: var(--t4); font-family: var(--mono); font-size: 11px; display: block; }

footer { border-top: 1px solid var(--line); padding: 20px 0 40px; color: var(--t4); font-size: 12px; }

@media (max-width: 900px) { .g2, .g3, .g5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .g2, .g3, .g5 { grid-template-columns: 1fr; } .wrap { padding: 0 16px; } h1 { font-size: 23px; } }