/* ==========================================================================
   gantt.css — K-II NINE 9대 사업 24개월 로드맵 인포그래픽
   ========================================================================== */
.gantt-body{height:100%;overflow:hidden;background:#1b1d22;color:var(--ink)}
#gantt-stage{
  position:absolute;left:50%;top:50%;width:1920px;height:1080px;
  transform-origin:center center;background:var(--paper);overflow:hidden;
}

/* ---------- header ---------- */
.hd{position:absolute;left:64px;right:64px;top:44px;height:108px;display:flex;align-items:flex-end;justify-content:space-between;border-bottom:2px solid var(--ink)}
.hd .ttl{display:flex;align-items:flex-end;gap:26px;padding-bottom:16px}
.brand{display:flex;align-items:flex-end;font-weight:900;font-size:76px;letter-spacing:-3px;line-height:.82}
.brand .k,.brand .nine{line-height:.74}
.brand i{font-style:normal;color:var(--ink3);font-weight:300;letter-spacing:-1px;margin-left:10px}
.pillars{display:flex;gap:9px;margin:0 4px 0 8px}
.pillars .pil{width:34px;height:84px;font-size:84px}
.pillars .pil::before,.pillars .pil::after{height:9px}
.pillars .pil .st{top:9px;bottom:9px;left:7px;right:7px}
.pillars .pil .v{font-size:10.5px;letter-spacing:2.5px}
.sub{padding-bottom:4px}
.sub .k{font-size:26px;font-weight:700;letter-spacing:-.5px}
.sub .e{font-size:15px;color:var(--ink2);margin-top:6px;letter-spacing:.2px}
.hd .meta{text-align:right;padding-bottom:18px;font-size:14px;color:var(--ink2);line-height:1.6}
.hd .meta .mono{font-size:13px;color:var(--ink3)}
.legend{display:flex;gap:22px;justify-content:flex-end;margin-bottom:8px;font-size:14px;color:var(--ink2);align-items:center}
.legend span{display:flex;align-items:center;gap:8px}
.sw{width:30px;height:14px;border-radius:3px;display:inline-block}
.dia{width:12px;height:12px;transform:rotate(45deg);background:var(--ink);display:inline-block;border:2px solid var(--paper);box-shadow:0 0 0 1.5px var(--ink)}

/* ---------- chart canvas ---------- */
#chart{position:absolute;left:64px;right:64px;top:170px;bottom:118px}
.phase-bg{position:absolute;top:0;bottom:0}
.phase-bg.alt{background:rgba(22,24,29,.028)}
.phase-hd{position:absolute;top:0;height:40px;display:flex;align-items:center;gap:12px;padding-left:14px;border-left:2px solid var(--ink)}
.phase-hd .n{font-family:var(--font-mono);font-weight:700;font-size:13px;background:var(--ink);color:#fff;padding:3px 7px;border-radius:3px}
.phase-hd .t{font-weight:700;font-size:17px;white-space:nowrap}
.phase-hd .d{font-size:13px;color:var(--ink3);white-space:nowrap}
.months{position:absolute;top:44px;height:36px}
.mo{position:absolute;top:0;height:36px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:var(--font-mono);font-size:13px;color:var(--ink2);border-left:1px solid var(--line)}
.mo .y{font-size:10px;color:var(--ink3);height:12px}
.mo.q{color:var(--ink)}
.grid{position:absolute;top:80px;bottom:0;width:1px;background:var(--line)}
.grid.ph{width:2px;background:rgba(22,24,29,.55)}
.grid.yr{background:rgba(22,24,29,.2)}

.row{position:absolute;left:0;right:0}
.lab{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;gap:14px}
.num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;font-family:var(--font-mono);flex:none}
.lab .nm{font-weight:700;font-size:19px;letter-spacing:-.4px;line-height:1.15}
.lab .ds{font-size:13px;color:var(--ink3);margin-top:3px;letter-spacing:-.1px}
.cl-hd{position:absolute;left:0;display:flex;align-items:center;gap:12px}
.cl-hd .c{font-weight:900;font-size:15px;letter-spacing:3px}
.cl-hd .k{font-size:13px;color:var(--ink2)}
.cl-hd .ln{position:absolute;left:190px;right:0;top:50%;height:1px;opacity:.35}
.row-line{position:absolute;left:0;right:0;bottom:0;border-bottom:1px dashed var(--line)}

.bar{position:absolute;height:30px;border-radius:4px;display:flex;align-items:center;padding:0 10px;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;cursor:default;transition:transform .15s,box-shadow .15s,opacity .2s}
.bar:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.14);z-index:5}
.bar.prep{background:#ecebe6;color:var(--ink2);border:1px dashed #c9c6bd}
.bar.hard{color:#fff;font-weight:700;position:absolute}
.bar.hard::after{content:"";position:absolute;right:0;top:0;bottom:0;width:4px;background:rgba(0,0,0,.25)}
.ms{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%) rotate(45deg);background:var(--ink);border:2px solid var(--paper);box-shadow:0 0 0 1.5px var(--ink);z-index:6}
.ms-t{position:absolute;font-size:12.5px;font-weight:700;white-space:nowrap;transform:translateX(-6px);color:var(--ink)}
.ms-t .mono{font-weight:500;color:var(--ink3);margin-right:4px;font-size:11px}
.gov .bar{background:var(--ink);color:#fff}
.gov .ms{background:#fff;border-color:var(--ink)}
.dim .bar,.dim .ms,.dim .ms-t{opacity:.18}
.cl-hd{cursor:pointer}

/* ---------- footer insights ---------- */
.ft{position:absolute;left:64px;right:64px;bottom:36px;height:66px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;border-top:2px solid var(--ink);padding-top:14px}
.ft div{display:flex;gap:14px;align-items:flex-start}
.ft .n{font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--ink3);padding-top:3px}
.ft p{font-size:15px;line-height:1.45;color:var(--ink2);text-wrap:pretty}
.ft p b{color:var(--ink)}

/* ---------- tooltip ---------- */
#tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;padding:12px 14px;border-radius:6px;font-size:14px;line-height:1.5;max-width:340px;opacity:0;transition:opacity .12s;z-index:50}
#tip .t{font-weight:700;font-size:15px}
#tip .d{font-family:var(--font-mono);font-size:12px;color:#b9bcc4}
#tip .x{color:#d7d9de;margin-top:4px}

/* entry stagger for rows */
#gantt-stage[data-fx-live] .row{animation:fl .5s cubic-bezier(.2,.7,.2,1) both}
#gantt-stage[data-fx-live] .hd,#gantt-stage[data-fx-live] .ft{animation:fu .7s cubic-bezier(.2,.7,.2,1) both}

@media print{*{animation:none!important}}