/* AI 팀 사무실(/office/, /en/office/) — 시안 v9(claude.ai 아티팩트, 한/영 한 파일)에서 옮김. D-058·D-059 */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
:root{
  color-scheme:light;
  --paper:#FFFFFF;--surface:#F3F5F8;--line:#DCE1E8;
  --ink:#0B1B2E;--navy:#0B2447;--body:#3B4856;--muted:#5E6B7B;--context:#949EAB;
  --blue:#2461E8;--blue-soft:#E8EFFD;--sky:#8DB1F2;--brief:#1A44A8;
  --warn:#8A5A12;--warn-bg:#FBF3E3;--warn-line:#D9A441;--ok:#1C6B45;--ok-bg:#E7F4EC;
  --serif:"Noto Serif KR","Source Serif 4",Georgia,serif;
  --sans:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pix:"DotGothic16","Do Hyeon",ui-monospace,monospace;
  --game:"Do Hyeon","DotGothic16",system-ui,sans-serif;
}
html,body{background:var(--paper)}
body{color:var(--body);font:15.5px/1.8 var(--sans)}
a{color:var(--blue)}
.topbar{border-bottom:1px solid var(--line);background:var(--paper)}
.topbar .in{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:14px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.wordmark{font:600 18px var(--serif);color:var(--ink);text-decoration:none}
.tagh{font:12px var(--mono);color:var(--muted);letter-spacing:.08em}
.lang{color:var(--blue);text-decoration:none;border:1px solid var(--line);padding:1px 7px}
.lang:hover{border-color:var(--blue)}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:44px 64px;display:grid;gap:48px}
.eyebrow{margin:0 0 10px;font:12.5px var(--mono);letter-spacing:.1em;color:var(--blue);text-transform:uppercase}
h1{margin:0;font:600 clamp(26px,3.6vw,38px)/1.35 var(--serif);color:var(--ink);text-wrap:balance;max-width:26em}
.lede{margin:14px 0 0;max-width:62ch}
.found{display:inline-block;margin-top:16px;font:12.5px var(--mono);color:var(--muted);border-top:1px solid var(--line);padding-top:8px}

.exhibit{display:grid;gap:14px}
.ex-label{margin:0;font:12.5px var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase;border-top:2px solid var(--navy);padding-top:10px}
.ex-title{margin:0;font:600 clamp(19px,2.4vw,24px)/1.45 var(--serif);color:var(--ink);text-wrap:balance}
.src{margin:0;font:12.5px var(--mono);color:var(--muted)}

/* game frame — the reversal lives only inside this box */
.game-scroll{overflow-x:auto;padding-bottom:6px}
.game{min-width:680px;border:3px solid var(--navy);background:var(--navy);display:grid}
.hud{display:flex;align-items:stretch;gap:6px;padding:6px;background:var(--navy)}
.hbox{background:#fff;color:var(--ink);border:2px solid #22395E}
.hud-top .date{flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 14px;font:400 19px/1.3 var(--game)}
.hud-top .date b{font:400 21px var(--pix);letter-spacing:.04em;color:var(--navy)}
.hud-top .sys{display:flex;align-items:center;gap:14px;padding:3px 12px;font:15px var(--game);white-space:nowrap}
.hud-top .sys span{display:flex;align-items:center;gap:6px}
.sq{width:9px;height:9px;display:inline-block;flex:none}
#office{display:block;width:100%;aspect-ratio:720/400;image-rendering:pixelated;cursor:pointer;touch-action:manipulation}
.hbtn{font:400 16px var(--game);color:var(--ink);background:#fff;border:2px solid #22395E;padding:6px 12px;cursor:pointer;min-width:78px}
.hbtn:hover{background:var(--blue-soft)}
.hbtn:active{transform:translate(1px,1px)}
.hbtn:focus-visible{outline:3px solid var(--sky);outline-offset:1px}
.hbtn.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.hud-bot .stats{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:10px;align-items:center;padding:4px 12px}
.proj{display:grid;gap:3px}
.proj .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.proj .pname{font:400 16px var(--game)}
.proj .pct{font:400 20px var(--pix);color:var(--navy)}
.pbar{height:8px;background:var(--surface);border:1px solid var(--line)}
.pbar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--blue) 0 6px,#1A44A8 6px 8px)}
.proj .now{font:12.5px var(--sans);color:var(--muted)}
.nums{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 12px}
.nums li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.nums svg{width:16px;height:16px;flex:none}
.nums b{font:400 18px var(--pix);color:var(--navy)}
.nums small{font:13px var(--game);color:var(--muted)}
.nums li{min-width:0;overflow:hidden}.nums small{overflow:hidden;text-overflow:ellipsis}
html[lang=en] .nums small{font-size:12px}

/* report sections */
.card{background:var(--paper);border:1px solid var(--line);padding:18px}
.res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media (max-width:880px){.res-grid{grid-template-columns:minmax(0,1fr)}}
.res-col{display:grid;gap:14px;align-content:start;border:1px solid var(--line);padding:18px}
.res-col .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.res-col h3{margin:0;font:600 17px var(--sans);color:var(--ink)}
.res-col h3 span{display:block;font:12.5px var(--mono);color:var(--muted);font-weight:400}
.seg{display:flex;border:1px solid var(--line)}
.seg button{font:12.5px var(--mono);color:var(--muted);background:#fff;border:0;padding:4px 10px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.seg button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpis div{padding:10px 12px}
.kpis div+div{border-left:1px solid var(--line)}
.kpis b{display:block;font:600 22px/1.2 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.kpis small{font:12px var(--mono);color:var(--muted)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.bars li{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr) 5.2em;gap:10px;align-items:center;font-size:13.5px}
.bars .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.bars .nm.lock{color:var(--muted)}
.bars .nm.gray{color:var(--context)}
.bars .nm small{display:block;font:11.5px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track{height:12px;background:var(--surface);display:flex;overflow:hidden}
.track i{display:block;height:100%;box-shadow:inset -1px 0 0 #fff}
.track i.hatch{background:repeating-linear-gradient(135deg,#8C97A8 0 3px,#D5DAE2 3px 6px)!important}
.track i.grayb{background:repeating-linear-gradient(135deg,#B8C0CC 0 3px,#E6E9EE 3px 6px)!important}
.bars .v{font:13.5px var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.mlegend{display:flex;flex-wrap:wrap;gap:14px;font:12px var(--mono);color:var(--muted)}
.mlegend i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
.insight{margin:0;font-size:14px;color:var(--body);border-left:3px solid var(--blue);padding-left:12px}
.fine{font-size:13.5px;color:var(--body)}
.fine summary{cursor:pointer;font:12.5px var(--mono);color:var(--blue)}
.fine ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}

.below{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,410px);gap:20px;align-items:start}
@media (max-width:880px){.below{grid-template-columns:minmax(0,1fr)}}
.col{display:grid;gap:20px}
.card h2{margin:0 0 12px;font:600 17px var(--sans);color:var(--ink)}
.chips-h{margin:0 0 8px;font:12px var(--mono);color:var(--muted);letter-spacing:.06em}
.roster{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.roster button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:6px 10px 6px 9px;font:14.5px var(--sans);font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line);cursor:pointer}
.roster button .nm{display:flex;align-items:center;gap:6px}
.roster button .dot{width:8px;height:8px;background:var(--context)}
.roster button small{font:12px var(--mono);color:var(--muted);font-weight:400}
.roster button:hover{border-color:var(--sky)}
.roster button[aria-pressed="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:var(--blue-soft)}
.roster button.lock{border-style:dashed}
.roster button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hint{margin:0;font:12.5px var(--sans);color:var(--muted)}
#log{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-height:178px;align-content:start}
#log li{display:flex;gap:10px;font-size:14px;color:var(--muted);border-left:2px solid var(--line);padding-left:10px}
#log li:first-child{border-left-color:var(--blue);color:var(--ink)}
#log li.real{border-left-color:var(--navy)}
#log b{font:500 12.5px var(--mono);color:var(--blue);min-width:5.4em;flex:none;padding-top:2px}

.insp .ctop{display:flex;gap:14px;align-items:center}
#mini{width:72px;height:84px;image-rendering:pixelated;background:var(--navy);flex:none}
.insp .tag{margin:0;font:12px var(--mono);color:var(--muted);letter-spacing:.06em}
.insp h3{margin:2px 0 0;font:600 26px/1.2 var(--serif);color:var(--ink)}
.insp .sub{margin:2px 0 0;color:var(--blue);font-size:14px}
.insp .job{margin:14px 0 12px}
.nowbox{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:8px 10px;background:var(--surface);font-size:14px;color:var(--ink)}
.nowbox .sq{margin-top:7px}
.nowbox b{font:500 11.5px var(--mono);color:var(--muted);display:block;letter-spacing:.05em}
.blk{margin:0 0 12px;border:1px solid var(--line)}
.blk h4{margin:0;padding:6px 10px;font:500 12px var(--mono);color:var(--navy);letter-spacing:.05em;border-bottom:1px solid var(--line);background:var(--surface);display:flex;justify-content:space-between;gap:8px}
.blk h4 em{font-style:normal;color:var(--muted)}
.blk .in{padding:8px 10px;display:grid;gap:7px;font-size:13.5px}
.jrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline}
.jrow .n{font-weight:500;color:var(--ink)}
.jrow small{grid-column:1/-1;color:var(--muted);font-size:12.5px}
.pill{font:500 11.5px var(--mono);padding:1px 7px;border:1px solid;white-space:nowrap}
.pill.running{color:var(--ok);border-color:#9FCDB3;background:var(--ok-bg)}
.pill.ok{color:var(--navy);border-color:var(--line);background:#fff}
.pill.fail{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.pill.unloaded{color:var(--muted);border-color:var(--line);background:var(--surface)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0}
.kv dt{font:12px var(--mono);color:var(--muted);padding-top:2px}
.kv dd{margin:0;font-variant-numeric:tabular-nums;color:var(--ink)}
.meter{height:8px;background:var(--surface)}
.meter i{display:block;height:100%;background:var(--blue)}
.perms{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.perm{font:500 12px var(--mono);padding:2px 8px;border:1px solid}
.perm.on{color:var(--navy);border-color:var(--navy)}
.perm.off{color:var(--context);border-color:var(--line)}
.perm.hot{color:#fff;border-color:var(--blue);background:var(--blue)}
.note{margin:0 0 12px;font-size:13.5px;color:var(--body);border-left:3px solid var(--sky);padding-left:10px}
.rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
@media (max-width:900px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:500px){.rules{grid-template-columns:minmax(0,1fr)}}
.rule{padding:16px 18px 16px 0}
.rule .no{font:600 22px var(--serif);color:var(--blue)}
.rule h3{margin:4px 0 6px;font:600 16px/1.45 var(--sans);color:var(--ink)}
.rule p{margin:0;font-size:14px}
.sitefoot{border-top:1px solid var(--line)}
.sitefoot .in{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--muted)}
.sitefoot .wm{font:600 15px var(--serif);color:var(--ink)}
@media (prefers-reduced-motion: reduce){.hbtn:active{transform:none}}

/* 인라인 style 을 쓰지 않는다(사이트 CSP style-src 'self', D-057) — 범례 칸 색은 클래스로 */
.lg-main{background:#2461E8}.lg-sub{background:#8DB1F2}
.lg-priv{background:repeating-linear-gradient(135deg,#8C97A8 0 3px,#D5DAE2 3px 6px)}
.lg-unk{background:repeating-linear-gradient(135deg,#B8C0CC 0 3px,#E6E9EE 3px 6px)}