/* ============================================================
   진행 프로젝트 현황 — 서비스 운영 콘솔 덱
   상황판(보드) 위에 패널을 띄우고, 상태 램프와 실측 지표로 말한다.
   ============================================================ */

@font-face{
  font-family:"Pretendard Variable";
  src:url("../fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight:45 920; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/JetBrainsMono-latin.woff2") format("woff2-variations");
  font-weight:500 700; font-display:swap;
}

:root{
  color-scheme:dark;
  --bg:#0F1317;              /* 콘솔 바탕 */
  --bg-deep:#090C0F;         /* 무대 밖 */
  --panel:#161C23;           /* 패널 */
  --panel-2:#1B222B;         /* 패널 헤더/호버 */
  --hair:rgba(255,255,255,.13);
  --hair-soft:rgba(255,255,255,.07);
  --ink:#E9EDF1;             /* 본문 */
  --dim:#A3ADB8;             /* 보조 */
  --faint:#8B95A1;           /* 캡션 (4.5:1 이상) */
  --green:#3DDC84;           /* 상태: 운영 중 */
  --green-dim:rgba(61,220,132,.10);
  --green-line:rgba(61,220,132,.38);
  --blue:#6FB3FF;            /* 웨이파인딩: ID·태그 */
  --mono:"JetBrains Mono","Pretendard Variable",monospace;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%; overflow:hidden; background:var(--bg-deep)}
body{
  font-family:"Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",-apple-system,sans-serif;
  letter-spacing:-0.02em; -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center;
  word-break:keep-all; overflow-wrap:break-word;
  color:var(--ink);
}
button{font:inherit; color:inherit}
img{display:block}

/* 1600×900 무대 — 화면 크기에 맞춰 통째로 스케일 */
#stage{width:1600px; height:900px; position:relative; background:var(--bg);
       transform-origin:center center; overflow:hidden}

.slide{position:absolute; inset:0; padding:36px 48px 34px;
       display:none; flex-direction:column; background:var(--bg)}
.slide.on{display:flex}

/* ---------- 상태 램프 ---------- */
.lamp{display:inline-flex; align-items:center; gap:8px; font-size:15px;
      font-weight:700; color:var(--ink); white-space:nowrap}
.lamp::before{content:""; width:8px; height:8px; border-radius:50%;
              background:var(--green); box-shadow:0 0 10px rgba(61,220,132,.8)}

/* ============================================================
   표지 — 상황판 헤더
   ============================================================ */
.cover{padding:0}
.mast{flex:none; display:flex; align-items:center; gap:26px;
      padding:22px 48px; border-bottom:1px solid var(--hair)}
.mast-brand{font-family:var(--mono); font-weight:700; font-size:15px;
            letter-spacing:.14em; color:var(--dim)}
.mast .lamp{margin-left:auto; font-size:14.5px}
.mast-date{font-family:var(--mono); font-weight:500; font-size:14px; color:var(--faint)}

.cover-main{flex:1; min-height:0; display:flex; flex-direction:column;
            justify-content:center; padding:0 96px}
.cover-main h1{font-size:120px; font-weight:900; letter-spacing:-0.04em;
               line-height:1.06}
.cover-lede{margin-top:26px; font-size:27px; font-weight:500; color:var(--dim)}
.cover-lede b{color:var(--ink); font-weight:800}
.cover-sum{margin-top:56px; display:flex; gap:14px; max-width:1000px}
.cover-sum > div{flex:1; border:1px solid var(--hair); background:var(--panel);
                 padding:20px 24px; display:flex; align-items:baseline; gap:14px}
.cover-sum b{font-size:44px; font-weight:800; letter-spacing:-0.03em;
             font-variant-numeric:tabular-nums; line-height:1}
.cover-sum span{font-size:16.5px; color:var(--dim)}
.cover-sum > div.sum-live{border-color:var(--green-line); background:var(--green-dim)}
.cover-sum .sum-live b{color:var(--green)}
.cover-enter{margin-top:60px; display:flex; align-items:center; gap:10px;
             font-size:15.5px; color:var(--faint)}
.cover-enter svg{stroke:var(--faint)}

/* ============================================================
   상단 바 (현황판·상세 공통)
   ============================================================ */
.way{flex:none; display:flex; align-items:center; gap:22px;
     padding-bottom:14px; border-bottom:1px solid var(--hair)}
.way-home{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
          background:transparent; border:1px solid var(--hair);
          padding:7px 13px; font-size:14px; font-weight:600; color:var(--dim);
          transition:border-color .14s, color .14s}
.way-home svg{stroke:currentColor}
.way-home:hover, .way-home:focus-visible{border-color:var(--blue); color:var(--ink); outline:none}
.way-ex{display:flex; align-items:baseline; gap:9px; margin-right:auto;
        font-family:var(--mono)}
.way-ex b{font-weight:700; font-size:20px; letter-spacing:.04em}
.way-ex b i{font-style:normal; color:var(--blue)}
.way-ex .of{font-weight:500; font-size:14px; color:var(--faint)}
.way-ex em{font-style:normal; font-family:"Pretendard Variable",sans-serif;
           font-size:15px; font-weight:600; color:var(--dim); letter-spacing:-0.02em;
           border-left:1px solid var(--hair); margin-left:6px; padding-left:14px}
.way-cat{font-size:15px; color:var(--dim); border:1px solid var(--hair);
         padding:5px 12px}
.way-title{margin-right:auto; display:flex; align-items:baseline; gap:14px}
.way-title b{font-family:var(--mono); font-weight:700; font-size:19px; letter-spacing:.1em}
.way-title span{font-size:16px; font-weight:600; color:var(--dim)}
.way-date{font-size:15px; color:var(--dim)}

/* ============================================================
   현황판 (홈) — 서비스 목록
   ============================================================ */
.blist{flex:1; min-height:0; display:flex; flex-direction:column;
       justify-content:center; gap:22px; padding-top:10px}
.bgroup h4{display:flex; align-items:baseline; gap:10px; font-size:15px;
           font-weight:700; letter-spacing:.02em; color:var(--dim);
           padding:0 2px 8px}
.bgroup h4 em{font-style:normal; font-family:var(--mono); font-weight:500;
              font-size:13px; color:var(--faint)}
.brow{display:grid; grid-template-columns:110px 230px 1fr 120px;
      align-items:center; gap:18px; width:100%; text-align:left;
      background:var(--panel); border:1px solid var(--hair); border-top-width:0;
      padding:11px 20px; cursor:pointer;
      transition:background .13s, border-color .13s}
.bgroup .brow:first-of-type{border-top-width:1px}
.brow:hover, .brow:focus-visible{background:var(--panel-2); border-color:rgba(111,179,255,.55);
      outline:none; position:relative; z-index:1}
.brow .bid{font-family:var(--mono); font-weight:500; font-size:14.5px;
           letter-spacing:.04em; color:var(--blue)}
.brow .bname{font-size:19px; font-weight:800; letter-spacing:-0.03em}
.brow .bdesc{font-size:14.5px; color:var(--dim); white-space:nowrap;
             overflow:hidden; text-overflow:ellipsis}
.brow .bstat{justify-self:end}
.brow .lamp{font-size:13.5px; font-weight:600; color:var(--dim)}

/* ============================================================
   서비스 상세 (개요)
   ============================================================ */
.svc-body{flex:1; min-height:0; display:grid; grid-template-columns:620px 1fr;
          gap:44px; padding-top:26px}
.svc-left{display:flex; flex-direction:column; min-height:0}
.svc-head{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.svc-head h2{font-size:54px; font-weight:900; letter-spacing:-0.04em; line-height:1.08}
.tagline{margin-top:13px; font-size:24px; line-height:1.42; font-weight:500; color:var(--dim)}
.points{list-style:none; flex:1; min-height:0; display:flex; flex-direction:column;
        justify-content:center; gap:18px; padding:18px 0}
.points li{position:relative; padding-left:24px; font-size:20px; line-height:1.5;
           color:#DCE2E8}
.points li::before{content:""; position:absolute; left:0; top:.58em;
                   width:8px; height:8px; background:var(--blue)}
.meta{flex:none; display:flex; flex-wrap:wrap; gap:8px}
.meta span{font-size:13.5px; color:var(--dim); border:1px solid var(--hair);
           background:var(--panel); padding:6px 12px; letter-spacing:0}

/* ---------- 패널: 스크린샷 뷰어 ---------- */
.panel{display:flex; flex-direction:column; min-height:0;
       background:var(--panel); border:1px solid var(--hair)}
.phead{flex:none; display:flex; align-items:center; gap:12px;
       padding:10px 16px; border-bottom:1px solid var(--hair-soft);
       background:var(--panel-2)}
.ptag{font-size:14px; font-weight:700; letter-spacing:-0.01em; color:var(--ink)}
.ptag::before{content:""; display:inline-block; width:7px; height:7px;
              background:var(--blue); margin-right:9px; vertical-align:2px}
.pbody{flex:1; min-height:0; padding:16px}
.pbody img{width:100%; height:100%; object-fit:contain}
.pcap{flex:none; padding:10px 16px 12px; border-top:1px solid var(--hair-soft);
      font-size:14.5px; line-height:1.45; color:var(--faint)}

/* ---------- 정보 카드 3장 ---------- */
.cards{flex:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px}
.card{background:var(--panel); border:1px solid var(--hair); padding:15px 19px 16px}
.card b{display:block; font-size:12.5px; font-weight:700; letter-spacing:.1em;
        color:var(--faint); margin-bottom:8px}
.card p{font-size:16px; line-height:1.5; color:#D4DAE1}

/* ============================================================
   실제 화면 — 텔레메트리 + 패널 그리드
   ============================================================ */
.tstrip{flex:none; display:flex; align-items:center; gap:28px; margin-top:18px;
        background:var(--panel); border:1px solid var(--hair); padding:13px 22px}
.tstrip h3{font-size:24px; font-weight:800; letter-spacing:-0.035em; margin-right:auto}
.tstrip h3 i{font-style:normal; font-weight:500; font-size:16px;
             color:var(--faint); margin-left:12px}
.specs{display:flex; align-items:flex-end}
.specs > div{display:flex; flex-direction:column; align-items:flex-end;
             padding:0 22px; border-left:1px solid var(--hair-soft)}
.specs > div:first-child{border-left:0}
.specs .sv{font-size:25px; font-weight:800; letter-spacing:-0.02em; line-height:1.05;
           font-variant-numeric:tabular-nums}
.specs .sl{margin-top:4px; font-size:12.5px; color:var(--faint)}
.specs .asof{align-self:flex-end; font-family:var(--mono); font-weight:500;
             font-size:11.5px; color:var(--faint); padding:0 0 3px 22px}

.pgrid{flex:1; min-height:0; display:flex; gap:22px; padding-top:22px;
       align-items:stretch; justify-content:center}
.pgrid .panel{flex:1; min-width:0}
.pgrid.n1 .panel{max-width:1280px}
.pgrid .pcap{text-align:center}

/* ---------- 핵심 요약 배너 ---------- */
.keyline{flex:none; margin-top:20px; padding:14px 22px;
         background:var(--green-dim); border:1px solid var(--green-line);
         display:flex; gap:18px; align-items:baseline}
.keyline b{flex:none; font-size:13px; font-weight:800; letter-spacing:.12em;
           color:var(--green)}
.keyline span{font-size:19.5px; font-weight:600; line-height:1.42; color:var(--ink)}

/* ============================================================
   진행 바 · 힌트 · 목차
   ============================================================ */
#prog{position:absolute; left:0; bottom:0; height:3px; background:var(--blue);
      width:100%; transform:scaleX(0); transform-origin:left;
      transition:transform .2s; z-index:5}
#hint{position:absolute; right:48px; bottom:10px; font-size:13px; color:var(--faint)}
#stage:has(.cover.on) #hint{display:none}

#toc{position:absolute; inset:0; background:var(--bg); display:none;
     padding:52px 56px; flex-direction:column; z-index:4}
#toc.on{display:flex}
#toc h3{font-family:var(--mono); font-weight:700; font-size:14px;
        letter-spacing:.14em; color:var(--faint); margin-bottom:6px}
#toc .toc-title{font-size:36px; font-weight:900; letter-spacing:-0.035em; margin-bottom:26px}
.toc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.toc-grid button{text-align:left; border:1px solid var(--hair); background:var(--panel);
                 padding:15px 18px; cursor:pointer;
                 transition:background .13s, border-color .13s}
.toc-grid button:hover, .toc-grid button:focus-visible{background:var(--panel-2);
                 border-color:rgba(111,179,255,.55); outline:none}
.toc-grid .tn{display:block; font-family:var(--mono); font-weight:500; font-size:13px;
              letter-spacing:.05em; color:var(--blue); margin-bottom:6px}
.toc-grid .tt{display:block; font-size:19.5px; font-weight:800; letter-spacing:-0.03em}
.toc-grid .ts{display:block; margin-top:5px; font-size:13.5px; color:var(--dim)}

/* ============================================================
   모션 — 패널이 온라인으로 올라온다
   ============================================================ */
@keyframes online{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.slide.on .panel{animation:online .34s cubic-bezier(.16,1,.3,1) both}
.slide.on .pgrid .panel:nth-child(2){animation-delay:.05s}
.slide.on .pgrid .panel:nth-child(3){animation-delay:.1s}
.slide.on .cards .card{animation:online .34s cubic-bezier(.16,1,.3,1) both}
.slide.on .cards .card:nth-child(2){animation-delay:.04s}
.slide.on .cards .card:nth-child(3){animation-delay:.08s}
.slide.on .keyline{animation:online .34s .08s cubic-bezier(.16,1,.3,1) both}
.slide.on .bgroup{animation:online .34s cubic-bezier(.16,1,.3,1) both}
.slide.on .bgroup:nth-child(2){animation-delay:.05s}
.slide.on .bgroup:nth-child(3){animation-delay:.1s}
@media (prefers-reduced-motion: reduce){
  .slide.on .panel, .slide.on .cards .card, .slide.on .keyline,
  .slide.on .bgroup{animation:none}
}