/* ==========================================================================
   K-II NINE — SAFE & CARE CITY 인천
   base.css — design tokens, reset, brand glyph, shared chrome, fx layers
   Ported from the Design handoff (designer2-e4a6f641).
   ========================================================================== */

:root{
  --ink:#16181d; --ink2:#4a4f5a; --ink3:#8a8f99; --line:#e2e0d9; --paper:#f7f6f2;
  --safe:oklch(0.56 0.14 255); --global:oklch(0.56 0.14 190); --care:oklch(0.60 0.14 35);
  --safe-l:oklch(0.90 0.05 255); --global-l:oklch(0.90 0.05 190); --care-l:oklch(0.91 0.05 35);
  --safe-d:oklch(0.38 0.12 255); --global-d:oklch(0.38 0.10 190); --care-d:oklch(0.44 0.13 35);
  --gov:#16181d;
  --cover-dark:#0f1a2b; --eod-bg:#12151b;
  --font-sans:Pretendard,"Apple SD Gothic Neo",sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --font-sys:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-sans);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:#111;
}
/* Korean typography: never break a word mid-eojeol (avoids "비/전" splits) */
h1,h2,h3,h4,p,li,blockquote{word-break:keep-all}
/* grid/flex children must be allowed to shrink below min-content */
.gap>*,.pol>*,.s2b>*,.pils>*,.fnd>*,.mx>*,.mx .rw>*,.mx .hr>*,
.val>*,.val .rw>*,.val .hr>*,.ops>*,.fs>*,.rk>*,.dc>*,.two>*,.d100>*{min-width:0}
.mono{font-family:var(--font-mono)}
svg{display:block}
button{font:inherit;color:inherit}

/* ---------- K-II pillar glyph (brand core) ---------------------------------
   Drawn from font-size: width .4em x height 1em, serif thickness .1em
   (full-bleed top & bottom), stem inset .085em left/right.
   Vertical label inside the stem: JetBrains Mono 800, .12em, ls .2em,
   writing-mode vertical-rl rotated 180deg.                                        */
.pil{position:relative;width:.4em;height:1em;display:flex;align-items:center;justify-content:center;flex:none}
.pil::before,.pil::after{content:"";position:absolute;left:0;right:0;height:.1em;background:var(--pc)}
.pil::before{top:0}
.pil::after{bottom:0}
.pil .st{position:absolute;top:.1em;bottom:.1em;left:.085em;right:.085em;background:var(--pc)}
.pil .v{
  position:relative;writing-mode:vertical-rl;transform:rotate(180deg);
  color:#fff;font-size:.12em;font-weight:800;letter-spacing:.2em;
  font-family:var(--font-mono);
}
.pl{display:inline-flex;gap:.1em;margin:0 .08em 0 .06em}

/* ---------- dynamic backgrounds (.fx) — slides 2–7 -------------------------*/
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.fx i{position:absolute;display:block}
.fx .b1,.fx .b2,.fx .b3{border-radius:50%}
.fx .b1{width:1100px;height:1100px;left:-380px;top:-520px;background:radial-gradient(circle,oklch(0.70 0.12 255 / .26) 0%,transparent 65%)}
.fx .b2{width:1000px;height:1000px;right:-360px;bottom:-560px;background:radial-gradient(circle,oklch(0.74 0.12 35 / .26) 0%,transparent 65%)}
.fx .b3{width:760px;height:760px;right:260px;top:-420px;background:radial-gradient(circle,oklch(0.74 0.10 190 / .2) 0%,transparent 65%)}
.fx .gr{
  inset:0;
  background-image:linear-gradient(rgba(22,24,29,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(22,24,29,.05) 1px,transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 0%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 0%,transparent 75%);
}
.fx .pp{right:70px;bottom:-60px;display:flex;gap:44px;opacity:.07}
.fx .pp s{display:block;width:150px;height:600px;border:3px solid;border-top-width:36px;border-bottom-width:36px;box-sizing:border-box}
.fx .pp s:first-child{border-color:var(--safe)}
.fx .pp s:last-child{border-color:var(--care)}
.fx .sw2{left:0;right:0;top:0;height:220px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.5),transparent);opacity:0}

/* per-slide fx variation */
[data-screen-label^="03"] .fx .b1{left:auto;right:-420px}
[data-screen-label^="03"] .fx .b2{right:auto;left:-380px}
[data-screen-label^="04"] .fx .b3{right:auto;left:600px;top:auto;bottom:-460px}
[data-screen-label^="05"] .fx .b1{background:radial-gradient(circle,oklch(0.74 0.10 190 / .26) 0%,transparent 65%)}
[data-screen-label^="06"] .fx .b2{background:radial-gradient(circle,oklch(0.70 0.12 255 / .24) 0%,transparent 65%)}

/* dark (E.O.D / cover-dark) fx tints */
.eod .fx .b1{background:radial-gradient(circle,oklch(0.60 0.14 255 / .38) 0%,transparent 65%)}
.eod .fx .b2{background:radial-gradient(circle,oklch(0.62 0.14 35 / .34) 0%,transparent 65%)}
.eod .fx .b3{background:radial-gradient(circle,oklch(0.60 0.12 190 / .24) 0%,transparent 65%)}
.eod .fx .gr{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                              linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}

/* ---------- motion primitives ----------------------------------------------*/
@keyframes fu{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fl{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes fuC{from{opacity:0;transform:translate(-50%,26px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes kb{from{transform:scale(1.08) translateX(-1.5%)}to{transform:scale(1)}}
@keyframes dr1{to{transform:translate(260px,160px) scale(1.12)}}
@keyframes dr2{to{transform:translate(-240px,-120px) scale(1.1)}}
@keyframes dr3{to{transform:translate(-320px,120px) scale(.9)}}
@keyframes gm{to{background-position:96px 96px,96px 96px}}
@keyframes pf{from{transform:translateY(0)}to{transform:translateY(-40px)}}
@keyframes sw{0%{transform:translateY(-240px);opacity:0}15%{opacity:1}60%{opacity:.6}100%{transform:translateY(1100px);opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pc)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes sh{to{background-position:-200% 0}}

[data-fx-live] .fx .b1{animation:dr1 18s ease-in-out infinite alternate}
[data-fx-live] .fx .b2{animation:dr2 22s ease-in-out infinite alternate}
[data-fx-live] .fx .b3{animation:dr3 16s ease-in-out infinite alternate}
[data-fx-live] .fx .gr{animation:gm 30s linear infinite}
[data-fx-live] .fx .pp{animation:pf 9s ease-in-out infinite alternate}
[data-fx-live] .fx .sw2{animation:sw 8s ease-in-out 1.2s infinite}

/* ---------- brand chip used in sub-heads / ikey ----------------------------*/
.ikey{display:flex;flex-direction:column;gap:9px;padding:0 26px 2px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.ikey div{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.ikey .g{width:10px;height:22px;background:var(--pc);flex:none;align-self:center;box-shadow:inset 0 3px 0 rgba(0,0,0,.18),inset 0 -3px 0 rgba(0,0,0,.18)}
.ikey .m{font-weight:800;font-size:18px;letter-spacing:-.3px;color:var(--pc)}
.ikey .s{font-size:13px;color:var(--ink2)}

/* ---------- SDG chips ------------------------------------------------------*/
.sdgc{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 6px;border-radius:4px;color:#fff;font-weight:800;font-size:19px;font-family:var(--font-mono)}
.flags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.flags span{font-size:21px;padding:6px 14px;border:1.5px solid var(--global);color:var(--global-d);border-radius:40px;font-weight:600}

/* ---------- shared content-slide chrome (deck only) ----------
   Scoped under deck-stage so these absolute placements can never leak into
   the Gantt page (which uses its own .hd .ttl flex header).                    */
deck-stage .ttl{position:absolute;left:96px;right:96px;top:124px}
deck-stage .ttl .eb{font-family:var(--font-mono);font-size:20px;font-weight:700;letter-spacing:3px;color:var(--care)}
deck-stage .ttl h2{font-size:46px;font-weight:800;letter-spacing:-1.5px;line-height:1.24;margin-top:14px;max-width:1600px;text-wrap:balance}
deck-stage .ttl h2 em{font-style:normal;color:var(--safe)}
deck-stage .src{position:absolute;left:96px;right:96px;bottom:36px;font-size:18px;color:var(--ink3);border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;gap:40px}
deck-stage .sec{font-size:22px;font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:14px;margin-bottom:18px}
deck-stage .sec::after{content:"";flex:1;height:1px;background:var(--ink)}
deck-stage .sec .m{font-family:var(--font-mono);font-size:17px;color:var(--ink3);font-weight:700;letter-spacing:2px}
/* Gantt header group must stay in normal flow inside .hd */
.hd .ttl{position:static;left:auto;right:auto;top:auto}

/* ---------- top chrome bar (deck slides) -----------------------------------*/
.top{position:absolute;left:96px;right:96px;top:64px;display:flex;justify-content:space-between;align-items:center;font-size:20px;color:var(--ink3)}
.top .l{display:flex;align-items:center;gap:16px;font-weight:600;color:var(--ink2)}
.top .pg{font-family:var(--font-mono);font-size:18px}
.mini{display:inline-flex;align-items:flex-end;font-weight:900;font-size:26px;letter-spacing:-1px;color:var(--ink);line-height:.8}
.mini .p{display:inline-flex;gap:3px;margin:0 3px}
.mini .p i{width:8px;height:22px;background:var(--pc)}

/* ---------- accessibility / print -----------------------------------------*/
@media print{*{animation:none!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}