/* ============================================================
     스틸그레이드 팔레트 + 큐비즘
     둥근 것을 걷어내고, 각진 면과 단단한 그림자로 화면을 나눈다.
     ============================================================ */
  :root{
    --bg:#dbe4ed; --panel:#f9fbfd; --panel2:#e7eef6;
    --ink:#14283c; --dim:#5d7385; --line:#b4c5d5; --shade:#c1d0de;
    --blue:#1e5f8c; --blue-l:#dbeaf5;
    --teal:#2b7a6b; --teal-l:#d9efe8;
    --ochre:#d99a2b; --ochre-l:#f9edd2;
    --rust:#c0522a; --rust-l:#f9ded3;
    --good:#2b7a6b; --warn:#c0522a;
    --cut:14px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--bg);color:var(--ink);
    font:17px/1.62 "Pretendard","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    background-image:linear-gradient(135deg,rgba(255,255,255,.45) 0 25%,transparent 25% 50%,
      rgba(255,255,255,.45) 50% 75%,transparent 75%);
    background-size:72px 72px}
  .wrap{max-width:1060px;margin:0 auto;padding:22px 18px 80px}

  h1{font-size:30px;margin:0 0 6px;letter-spacing:-.035em;font-weight:800;line-height:1.2}
  h2{font-size:19px;margin:0 0 12px;letter-spacing:-.025em;font-weight:800}
  .sub{color:var(--dim);font-size:15px;margin:0 0 22px;max-width:62ch}

  /* ---------- 면(面) ---------- */
  .card{background:var(--panel);border:2px solid var(--ink);
    padding:18px 18px 16px;margin-bottom:16px;position:relative;
    box-shadow:6px 6px 0 var(--shade);
    clip-path:polygon(0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
      calc(100% - var(--cut)) 100%,0 100%)}
  .grid{display:grid;gap:16px}
  @media(min-width:860px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }

  /* ---------- 상단 계기판 ---------- */
  .hud{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
  .stat{background:var(--panel);border:2px solid var(--ink);padding:9px 13px;
    min-width:118px;flex:1 1 auto;box-shadow:4px 4px 0 var(--shade);
    clip-path:polygon(0 9px,9px 0,100% 0,100% 100%,0 100%)}
  .stat .k{font-size:12px;color:var(--dim);font-weight:700;letter-spacing:.02em}
  .stat .v{font-size:21px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
    line-height:1.25}
  .v.neg{color:var(--rust)} .v.pos{color:var(--teal)}

  .phase{display:inline-block;padding:2px 11px;font-size:14px;font-weight:800;
    border:2px solid var(--ink);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
  .ph-BUST{background:var(--rust-l);color:var(--rust)}
  .ph-NORMAL{background:var(--panel2);color:var(--dim)}
  .ph-BOOM{background:var(--teal-l);color:var(--teal)}

  /* ---------- 사람이 말한다 ---------- */
  .say{display:flex;gap:14px;align-items:flex-start;margin:0 0 14px}
  .face{width:60px;height:60px;flex:0 0 60px;overflow:hidden;
    border:2px solid var(--ink);background:var(--panel2);
    display:grid;place-items:center;font-size:27px;
    clip-path:polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
  .facepic{width:100%;height:100%;object-fit:cover;display:block}
  .bubble{background:var(--panel2);border:2px solid var(--ink);padding:10px 15px;
    font-size:16.5px;max-width:64ch;box-shadow:4px 4px 0 var(--shade);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
  .bubble .who{font-size:12.5px;color:var(--dim);display:block;margin-bottom:2px;font-weight:800;
    letter-spacing:.02em}

  /* 첫 화면 크레딧 */
  .byline{text-align:center;margin:-8px 0 2px;font-size:14px;color:var(--dim);letter-spacing:-.01em}
  .byline b{color:var(--blue)}
  .thanks{text-align:center;margin:0 0 16px;font-size:12px;color:var(--dim);
    letter-spacing:.02em;opacity:.85}

  /* 이어하기 · 설치 안내 · 명예의 전당 */
  .records{border-color:var(--ink)}
  .resume{border-color:var(--blue);box-shadow:5px 5px 0 var(--blue-l)}
  .install .steps{margin:6px 0 2px;padding-left:20px;font-size:14px;line-height:1.8}
  .install .steps b{color:var(--blue)}
  .iways{display:grid;gap:12px;margin-top:12px}
  @media(min-width:760px){ .iways{grid-template-columns:1fr 1fr} }
  .iway{border:2px solid var(--line);background:var(--panel2);padding:12px 14px 13px}
  .iway.on{border-color:var(--blue);background:var(--blue-l)}
  .iway h3{margin:0 0 6px;font-size:15px;font-weight:800;letter-spacing:-.02em}
  .iway p{margin:4px 0 9px;font-size:14px}
  .iway button.primary{width:100%}
  .hbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
  .rectbl{overflow-x:auto;margin-top:8px}
  .rectbl table{width:100%;border-collapse:collapse;font-size:13px}
  .rectbl th{background:var(--blue);color:#fff;padding:6px 7px;font-size:11.5px;font-weight:800;
    border:1px solid var(--ink);white-space:nowrap}
  .rectbl td{padding:6px 7px;border:1px solid var(--line);white-space:nowrap;
    font-variant-numeric:tabular-nums;text-align:right}
  .rectbl td.hname,.rectbl td.hstyle{text-align:left;font-weight:700}
  .rectbl td.hgrade{font-weight:900;color:var(--blue);text-align:center}
  .rectbl td.dn{color:var(--rust);font-weight:800}
  .savebtn{margin-left:auto}

  /* 저장 알림 */
  #toast{position:fixed;left:50%;bottom:-70px;transform:translateX(-50%);z-index:99;
    background:var(--ink);color:#fff;padding:11px 18px;font-size:14px;font-weight:700;
    border:2px solid var(--ink);box-shadow:4px 4px 0 var(--shade);max-width:90vw;
    transition:bottom .22s ease;pointer-events:none}
  #toast.on{bottom:22px}

  /* 고객군별 소재 발주 — 숫자를 직접 적는 화면 */
  .ordwrap{padding:14px 16px 16px}
  .ordt{width:100%;border-collapse:collapse;font-size:13px}
  .ordt th{background:var(--blue);color:#fff;padding:6px 5px;font-weight:800;font-size:11.5px;
    line-height:1.25;border:1px solid var(--ink);text-align:center}
  .ordt th i{font-style:normal;font-weight:600;opacity:.8;font-size:10.5px}
  .ordt td{padding:6px 5px;border:1px solid var(--line);text-align:right;
    font-variant-numeric:tabular-nums}
  .ordt td.oname{text-align:left;font-weight:800;white-space:nowrap}
  .ordt td.oname i{font-style:normal;font-weight:600;color:var(--dim);font-size:11px;display:block}
  .ordt td.dn{color:var(--rust);font-weight:800}
  .ordt td.oaf{font-weight:800;background:var(--blue-l)}
  .ordt input{width:84px;padding:5px 6px;border:2px solid var(--ink);background:var(--panel);
    color:var(--ink);font:inherit;font-weight:800;text-align:right;
    font-variant-numeric:tabular-nums}
  .ordbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
    margin:12px 0 4px;padding:9px 11px;background:var(--panel2);border:2px solid var(--ink)}
  .osum{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;font-size:14px}
  .osum b{font-size:17px}
  .osum .up{color:var(--teal);font-weight:800}
  .osum .dn{color:var(--rust);font-weight:800}
  .obtns{display:flex;gap:6px;flex-wrap:wrap}
  button.mini{padding:5px 10px;font-size:12px;font-weight:800;border:2px solid var(--ink);
    background:var(--panel);color:var(--ink);cursor:pointer}
  button.mini:hover{background:var(--blue);color:#fff}
  @media(max-width:560px){
    .ordwrap{padding:10px 8px 12px}
    .ordt{font-size:11.5px}
    .ordt th{font-size:10px;padding:4px 2px}
    .ordt td{padding:4px 2px}
    .ordt input{width:62px;padding:4px}
  }

  /* 인과 고리 — 그때 그 결정 → 몇 달 뒤 → 지금 */
  .chain{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:7px;font-size:13px}
  .c-then{background:var(--panel2);border:2px solid var(--ink);padding:3px 9px;font-weight:700}
  .c-then i{display:block;font-style:normal;font-size:11px;color:var(--dim);font-weight:800;
    letter-spacing:.02em}
  .c-arrow{color:var(--blue);font-weight:800;letter-spacing:-.01em}
  .c-now{background:var(--blue);color:#fff;padding:3px 9px;font-weight:800;border:2px solid var(--ink)}

  /* 사람이 실제로 하는 말에는 따옴표를 붙인다. 보고서가 아니라 대사로 읽히게. */
  .says::before{content:'“';color:var(--blue);font-weight:800;margin-right:1px}
  .says::after{content:'”';color:var(--blue);font-weight:800;margin-left:1px}
  .bubble.says::before,.bubble.says::after{font-size:1.1em;line-height:0}

  /* ---------- 조작 ---------- */
  label.row{display:block;margin:16px 0 0}
  .row .lab{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;
    margin-bottom:6px;font-weight:700}
  .row .lab b{font-size:17px;font-variant-numeric:tabular-nums}
  input[type=range]{width:100%;accent-color:var(--blue);height:26px}
  .hint{font-size:14px;color:var(--dim);margin-top:5px}

  button{font:inherit;cursor:pointer;border:2px solid var(--ink);
    background:var(--panel);color:var(--ink);padding:10px 17px;transition:.1s;
    font-weight:700;box-shadow:3px 3px 0 var(--shade)}
  button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--shade)}
  button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shade)}
  button:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:3px 3px 0 var(--shade)}
  .primary{background:var(--blue);border-color:var(--ink);color:#fff;font-weight:800;
    padding:15px 32px;font-size:19px;letter-spacing:-.02em;box-shadow:5px 5px 0 var(--ink)}
  .primary:hover{box-shadow:7px 7px 0 var(--ink)}
  .primary:active{box-shadow:2px 2px 0 var(--ink)}
  .choice{display:flex;gap:9px;flex-wrap:wrap}
  .choice button.on{background:var(--teal);border-color:var(--ink);color:#fff}

  table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
  th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right}
  th:first-child,td:first-child{text-align:left}
  th{color:var(--dim);font-weight:700;font-size:12.5px;letter-spacing:.02em}
  tr.tot td{font-weight:800;border-top:3px solid var(--ink);border-bottom:none}

  .bars{display:flex;flex-direction:column;gap:9px;margin-top:6px}
  .bar{display:grid;grid-template-columns:78px 1fr 86px;gap:10px;align-items:center;font-size:14px;
    font-weight:700}
  .track{height:20px;background:var(--panel2);border:2px solid var(--ink);overflow:hidden;
    position:relative}
  .fill{display:block;height:100%;background:var(--teal)}
  .fill.over{background:var(--rust)}
  .cap{position:absolute;top:0;bottom:0;width:3px;background:var(--ink)}
  .bar .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim);font-weight:600}

  .note{background:var(--blue-l);border:2px solid var(--ink);padding:11px 15px;
    font-size:15px;margin:12px 0;box-shadow:3px 3px 0 var(--shade)}
  .note.bad{background:var(--rust-l)}
  .note.good{background:var(--teal-l)}

  dialog{border:none;padding:0;max-width:640px;width:calc(100% - 28px);
    background:transparent;color:var(--ink)}
  dialog::backdrop{background:rgba(30,38,43,.62)}
  .dlg{padding:20px;background:var(--panel);border:3px solid var(--ink);
    box-shadow:10px 10px 0 rgba(30,38,43,.32)}
  dialog.deck .dlg{padding:0}
  .ok{text-align:right;margin-top:18px}

  .big{font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
  .center{text-align:center}
  .muted{color:var(--dim)}
  .sep{height:2px;background:var(--ink);margin:16px 0;opacity:.18}
  .tag{display:inline-block;background:var(--panel2);border:2px solid var(--ink);
    padding:2px 10px;font-size:12.5px;color:var(--ink);margin-right:5px;font-weight:700;
    clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}


  /* ---------- 픽셀 아트 공통 ---------- */
  .halls img, .lines img, .rack img, .facepic, .crew-pic img, .vwho img{
    image-rendering:pixelated; image-rendering:crisp-edges}
  /* ---------- 공장동: 칸을 꽉 채운다 ---------- */
  .halls{display:flex;flex-direction:column;gap:12px}
  .hall{position:relative;width:100%;background:var(--panel2);
    border:2px solid var(--ink);box-shadow:4px 4px 0 var(--shade);overflow:hidden}
  .hallimg{display:block;width:100%;height:auto}
  .hallcrane{position:absolute;left:50%;top:20%;width:27%;transform:translateX(-50%);display:block}
  .halltag{position:absolute;left:0;top:0;background:var(--ink);color:var(--panel);
    padding:2px 11px;font-size:13px;font-weight:800}
  .hallfoot{font-size:13.5px;font-weight:700;color:var(--dim);text-align:center;margin-top:10px}

  /* ---------- 설비: 기계가 주인공, 가동률은 한 줄 ---------- */
  .lines{display:flex;flex-direction:column;gap:12px}
  .lrow{border:2px solid var(--ink);background:var(--panel2);padding:9px 11px 10px;
    box-shadow:4px 4px 0 var(--shade)}
  .lrow img{display:block;width:100%;height:auto;max-height:230px;object-fit:contain;
    margin:4px 0 6px}
  .ltop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .ltop b{font-size:17px;font-weight:800;letter-spacing:-.02em}
  .ltop i{font-style:normal;font-size:13px;font-weight:800;padding:1px 10px;
    border:2px solid var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  .ltop i.on{background:var(--teal-l);color:var(--teal)}
  .ltop i.hot{background:var(--rust-l);color:var(--rust)}
  .ltop i.off{background:var(--panel);color:var(--dim)}
  .ltop i.wip{background:var(--ochre-l);color:#8a6410}
  .lbot{display:flex;align-items:center;gap:10px}
  .lbot .track{flex:1;height:8px;border-width:1.5px}
  .lbot .sub{font-size:12.5px;color:var(--dim);font-weight:700;
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .lrow.idle img{filter:grayscale(.85) opacity(.55)}
  .lrow.slim{background:var(--panel)}
  .lrow.slim .ph{margin-top:7px;padding:14px 10px;text-align:center;
    border:2px dashed var(--line);color:var(--dim);font-size:13px;font-weight:600}


  /* ---------- 야드 진열 ---------- */
  .rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .cell{border:2px solid var(--ink);background:var(--panel2);padding:8px 8px 9px;text-align:center;
    box-shadow:3px 3px 0 var(--shade);display:flex;flex-direction:column;align-items:center;gap:2px}
  .cell img{width:100%;max-width:110px;height:auto;display:block;margin-bottom:2px}
  .cell .ph{width:100%;max-width:110px;aspect-ratio:1/1;display:grid;place-items:center;
    border:2px dashed var(--line);color:var(--dim);font-size:12.5px;font-weight:700;margin-bottom:2px}
  .cell b{font-size:14.5px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
  .cell i{font-style:normal;font-size:12.5px;font-weight:800;padding:1px 9px;
    border:1.5px solid var(--ink);font-variant-numeric:tabular-nums}
  .cell i.on{background:var(--teal-l);color:var(--teal)}
  .cell i.off{background:var(--panel);color:var(--dim)}
  .cell i.off.bad{background:var(--rust-l);color:var(--rust);border-color:var(--rust)}
  .cell .sub{font-size:11.5px;color:var(--dim);line-height:1.35;font-weight:600}
  .cell.bad{background:var(--rust-l);border-color:var(--rust)}
  @media(max-width:560px){
    .rack{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
    .cell b{font-size:13px} .cell .sub{font-size:11px}
    .lrow img{max-height:180px}
    .lrow b{font-size:14px}
  }


  /* ---------- 지표표 · 고객 ---------- */
  .metrics table td:nth-child(n+2),.metrics table th:nth-child(n+2){text-align:right}
  .metrics td.up{color:var(--teal);font-weight:800}
  .metrics td.dn{color:var(--rust);font-weight:800}
  .metrics td.up.inv{color:var(--rust)} .metrics td.dn.inv{color:var(--teal)}
  .metrics tr.sub td:first-child{padding-left:20px;color:var(--dim)}
  /* 카테고리 머리줄 — 판매 실적 / 손익 / 재고·재원 / 순운전자본 / 차입이 눈에 갈리게
     띠를 깔아준다. 줄이 스무 개 넘어가면 어디서 어디까지가 한 덩어리인지 안 보인다. */
  .metrics tr.head th{text-align:left;color:#fff;font-size:13px;font-weight:800;
    background:var(--blue);padding:7px 8px;letter-spacing:-.01em;
    border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
  .metrics tr.head th:nth-child(n+2){text-align:right;color:rgba(255,255,255,.75);font-weight:700}
  .metrics tr.head.c-sale th{background:var(--blue)}
  .metrics tr.head.c-pl   th{background:var(--teal)}
  .metrics tr.head.c-stock th{background:var(--ochre);color:var(--ink)}
  .metrics tr.head.c-stock th:nth-child(n+2){color:rgba(20,40,60,.7)}
  .metrics tr.head.c-wc   th{background:var(--rust)}
  .metrics tr.head.c-debt th{background:var(--ink)}
  .custbar{display:grid;grid-template-columns:168px 1fr 54px;gap:10px;align-items:center;
    font-size:15px;margin:7px 0;font-weight:700}
  .custbar .track{height:18px}
  .custbar .pend{font-size:12.5px;color:var(--rust);margin-left:5px;font-weight:800}
  @media(max-width:560px){ .custbar{grid-template-columns:118px 1fr 46px;font-size:13.5px} }

  /* ---------- 시작 화면 모드 ---------- */
  .modes{display:grid;gap:14px;margin-top:6px}
  @media(min-width:760px){ .modes{grid-template-columns:1fr 1fr} }
  .modecard{text-align:left;padding:18px 20px;line-height:1.55;
    border:2px solid var(--ink);background:var(--panel);box-shadow:5px 5px 0 var(--shade)}
  .modecard:hover{background:var(--blue-l)}
  .modecard b{display:block;font-size:24px;letter-spacing:-.03em;font-weight:800}
  .modecard .n{display:block;font-size:13.5px;color:var(--blue);font-weight:800;margin:3px 0 8px;
    letter-spacing:.02em}
  .modecard .d{display:block;font-size:14.5px;color:var(--dim)}


  /* ============================================================
     직원이 들어온다 — 결재 카드
     얼굴을 크게 깔고, 이름을 명패처럼 박고, 말은 말대로 크게.
     ============================================================ */
  .deckhead{display:flex;justify-content:space-between;align-items:center;
    background:var(--ink);color:var(--panel);padding:9px 18px;font-size:13px;font-weight:800;
    letter-spacing:.04em}
  .deckhead .step{opacity:.62;font-variant-numeric:tabular-nums}

  .crew{display:flex;align-items:stretch;border-bottom:3px solid var(--ink)}
  .crew-pic{width:132px;flex:0 0 132px;background:var(--panel2);position:relative;
    border-right:3px solid var(--ink);overflow:hidden}
  .crew-pic img{width:100%;height:100%;object-fit:cover;display:block}
  .crew-pic .emoji{width:100%;height:100%;display:grid;place-items:center;font-size:54px}
  .crew-plate{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--panel);
    padding:5px 9px;line-height:1.25}
  .crew-plate b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
  .crew-plate i{font-style:normal;font-size:11.5px;opacity:.78;font-weight:600}
  .crew-body{flex:1;padding:16px 18px;min-width:0;display:flex;flex-direction:column;
    justify-content:center;background:var(--blue-l)}
  .crew-body .line{font-size:18px;line-height:1.58;font-weight:600;letter-spacing:-.015em}
  @media(max-width:560px){
    .crew-pic{width:96px;flex:0 0 96px}
    .crew-plate b{font-size:14px}
    .crew-body{padding:13px 14px}
    .crew-body .line{font-size:16px}
  }

  .deckq{padding:16px 18px 4px}
  .deckq h2{font-size:21px;margin:0;letter-spacing:-.03em;line-height:1.35}

  .optlist{display:flex;flex-direction:column;gap:10px;padding:12px 18px 18px}
  .optlist button{text-align:left;padding:14px 16px;line-height:1.5;width:100%;
    box-shadow:4px 4px 0 var(--shade)}
  .optlist button b{display:block;font-size:17.5px;font-weight:800;letter-spacing:-.02em}
  .optlist button .why{display:block;font-size:14.5px;color:var(--dim);margin-top:3px}
  .optlist button:hover{background:var(--blue-l);border-color:var(--blue)}

  /* 선택지에 붙는 효과 칩 — 고르기 전에 뭘 얻고 잃는지 보인다 */
  .fx{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
  .fx span{font-size:12.5px;font-weight:800;padding:1px 8px;border:1.5px solid var(--ink);
    font-variant-numeric:tabular-nums;background:var(--panel2)}
  .fx .up{background:var(--teal-l);color:var(--teal)}
  .fx .dn{background:var(--rust-l);color:var(--rust)}
  .fx .neu{background:var(--panel2);color:var(--dim)}
  .fx .rsk{background:var(--ochre-l);color:#8a6410}

  /* ---------- 결과 ---------- */
  .verdict{padding:22px 20px 8px;text-align:center}
  .vlabel{font-size:12.5px;color:var(--dim);letter-spacing:.14em;font-weight:800}
  .vchoice{font-size:28px;font-weight:800;letter-spacing:-.035em;margin:6px 0 16px;
    color:var(--blue);line-height:1.25}
  .vwho{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px}
  .vwho img{width:46px;height:46px;object-fit:cover;border:2px solid var(--ink);display:block}
  .vwho .em{width:46px;height:46px;display:grid;place-items:center;font-size:24px;
    border:2px solid var(--ink);background:var(--panel2)}
  .vwho span{font-size:13.5px;font-weight:800;color:var(--dim)}
  .vmsg{font-size:17px;line-height:1.62;margin:0 auto 4px;max-width:46ch;font-weight:500;
    background:var(--panel2);border:2px solid var(--ink);padding:12px 16px;text-align:left;
    box-shadow:4px 4px 0 var(--shade)}

  .chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}
  .chip{display:inline-block;padding:4px 13px;font-size:15px;font-weight:800;
    border:2px solid var(--ink);font-variant-numeric:tabular-nums}
  .chip.up{background:var(--teal-l);color:var(--teal)}
  .chip.down{background:var(--rust-l);color:var(--rust)}
  .chip.neu{background:var(--panel2);color:var(--dim)}

  .vfoot{padding:4px 18px 18px;text-align:right}


  /* 좁은 화면에서는 표를 조인다. 라벨이 세로로 깨지면 읽기가 어렵다. */
  @media(max-width:560px){
    body{font-size:16px}
    .wrap{padding:16px 14px 70px}
    h1{font-size:25px}
    table{font-size:13.5px}
    th,td{padding:6px 5px}
    td:first-child{white-space:nowrap}
    .stat{min-width:104px;padding:8px 11px}
    .stat .v{font-size:19px}
    .card{padding:15px 14px 13px}
    .primary{padding:14px 22px;font-size:17px}
    .optlist button b{font-size:16.5px}
    .vchoice{font-size:24px}
    .big{font-size:40px}
  }


  .modecard.on{background:var(--blue-l);border-color:var(--blue);box-shadow:5px 5px 0 var(--blue)}
  .modecard.on b{color:var(--blue)}


  /* ============================================================
     글씨
       본문 — Pretendard. 맑은 고딕보다 자간과 획이 정돈돼 있다.
       제목·숫자·배지 — Galmuri11. 픽셀 아트와 같은 격자 위에 놓인다.
     둘 다 CDN이라, 인터넷이 없으면 시스템 고딕으로 내려가고 게임은 그대로 돈다.
     ============================================================ */
  :root{
    --sans:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
    --px:"Galmuri11","Galmuri11 Condensed",var(--sans);
  }
  body{font-family:var(--sans)}

  /* 픽셀 폰트는 작게 쓰면 뭉개진다. 11의 배수(11·22·33)에서 제일 또렷하다. */
  h1{font-family:var(--px);font-size:28px;letter-spacing:0;font-weight:400;line-height:1.35}
  h2{font-family:var(--px);font-size:18px;letter-spacing:0;font-weight:400}
  .big{font-family:var(--px);font-weight:400;letter-spacing:0;font-size:44px}
  .stat .v{font-family:var(--px);font-weight:400;letter-spacing:0;font-size:18px}
  .stat .k{letter-spacing:0}
  .phase{font-family:var(--px);font-weight:400;font-size:13px}
  .ltop b,.cell b{font-family:var(--px);font-weight:400;letter-spacing:0}
  .ltop i,.cell i,.chip,.pltag,.fx span{font-family:var(--px);font-weight:400;letter-spacing:0}
  .vchoice{font-family:var(--px);font-weight:400;letter-spacing:0;font-size:26px}
  .modecard b{font-family:var(--px);font-weight:400;letter-spacing:0;font-size:22px}
  .modecard .n{font-family:var(--px);font-weight:400;letter-spacing:0}
  .primary{font-family:var(--px);font-weight:400;letter-spacing:0;font-size:18px}
  .deckhead{font-family:var(--px);font-weight:400;letter-spacing:0}
  .crew-plate b{font-family:var(--px);font-weight:400;letter-spacing:0;font-size:15px}
  .optlist button b{font-family:var(--px);font-weight:400;letter-spacing:0;font-size:17px}
  .halltag,.hallfoot,.lbot .sub,.pstat b{font-family:var(--px);font-weight:400;letter-spacing:0}
  /* 표는 한 글꼴로만 쓴다.
     합계 줄과 증감 칸만 픽셀 폰트로 바꿔놨더니 같은 표 안에서 글씨가 두 종류로 보여
     숫자를 눈으로 따라가기가 어려웠다. 강조는 글꼴이 아니라 굵기와 색으로 한다.
     숫자는 tabular-nums로 자릿수를 맞춰 세로로 읽히게 한다. */
  table{font-family:var(--sans);font-variant-numeric:tabular-nums}
  td,th{letter-spacing:0}
  tr.tot td{font-weight:800}

  /* 픽셀 폰트는 글자 위아래 여백이 넉넉해서 줄간격을 조금 줄여야 맞는다 */
  h1,h2,.vchoice,.modecard b,.big{line-height:1.4}
  @media(max-width:560px){
    h1{font-size:22px} .big{font-size:33px} .vchoice{font-size:22px}
    .modecard b{font-size:18px} .primary{font-size:16px}
  }


  /* ============================================================
     경영 대시보드 · 청구서 · 경고 · 부서 보고
     ============================================================ */
  .yearban{background:var(--blue);color:#fff;border-color:var(--ink);display:flex;flex-direction:column;gap:4px}
  .yearban b{font-family:var(--px);font-weight:400;font-size:20px}
  .yearban span{font-size:15px;opacity:.95}
  .yearban .chap{font-size:13px;opacity:.75}
  .yearban .note{color:var(--ink)}

  .dash{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
  .dtile{border:2px solid var(--ink);background:var(--panel2);padding:7px 10px;display:flex;flex-direction:column;gap:1px}
  .dtile i{font-style:normal;font-size:12px;color:var(--dim);font-weight:700}
  .dtile b{font-family:var(--px);font-weight:400;font-size:18px;line-height:1.3}
  .dtile span{font-family:var(--px);font-size:12px}
  .dtile .up{color:var(--teal)} .dtile .dn{color:var(--rust)} .dtile .neu{color:var(--dim)}

  .fired{border-color:var(--rust);background:var(--rust-l)}
  .fired h2{color:var(--rust)}
  .fire{border-left:5px solid var(--rust);background:var(--panel);padding:9px 13px;margin:8px 0;
    display:flex;flex-direction:column;gap:3px}
  .fire b{font-size:16px}
  .fire span{font-size:13.5px;color:var(--dim);font-weight:600}

  .imps{display:flex;flex-direction:column;gap:10px}
  .imp b{font-size:15px}
  .warns .warn,.urg .warn{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--line)}
  .warns .warn i,.urg .warn i{font-style:normal;font-family:var(--px);font-size:13px;color:var(--rust);white-space:nowrap}
  .warns .warn span,.urg .warn span{font-size:14.5px}

  .briefs{display:flex;flex-direction:column;gap:10px}
  .brief{display:flex;gap:12px;align-items:flex-start}
  .bface{width:52px;height:52px;flex:0 0 52px;border:2px solid var(--ink);overflow:hidden;background:var(--panel2)}
  .bface img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
  .btext{font-size:15.5px;line-height:1.55}
  .bwho{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--dim);font-weight:800;margin-bottom:1px}
  .bwho em{font-style:normal;font-family:var(--px);font-size:11px;padding:0 7px;border:1.5px solid var(--ink)}
  .k-ok{background:var(--teal-l);color:var(--teal)}
  .k-est{background:var(--ochre-l);color:#8a6410}
  .k-rum{background:var(--rust-l);color:var(--rust)}

  .custbar{grid-template-columns:150px 1fr 72px 84px 92px 158px}
  .custbar .rel{font-size:12px;padding:1px 6px;border:1.5px solid var(--ink);text-align:center;
    white-space:nowrap;font-weight:800}
  .custbar .eff{font-size:12px;font-weight:800;white-space:nowrap;text-align:center;
    padding:1px 6px;border:1.5px solid var(--ink);background:var(--blue-l);color:var(--blue)}
  .custbar.off .eff{background:var(--panel2);color:var(--dim);border-style:dashed}
  .custbar.off .fill{opacity:.45}
  .custbar .leak{font-size:12.5px;color:var(--dim);white-space:nowrap;font-weight:700;
    font-variant-numeric:tabular-nums}
  .custbar .leak i{display:block;font-style:normal;font-size:11px;font-weight:800;margin-top:1px}
  .custbar .leak i.tmp{color:var(--ochre,#8a6410)}
  .custbar .leak i.pdg{color:var(--rust)}
  .rel.up{background:var(--teal-l);color:var(--teal)} .rel.neu{background:var(--panel2);color:var(--dim)}
  .rel.dn{background:var(--rust-l);color:var(--rust)}
  @media(max-width:760px){ .custbar{grid-template-columns:120px 1fr 62px 72px 84px;font-size:13px}
    .custbar .leak{grid-column:1 / -1;text-align:right;margin-top:-4px} }

  /* 발주 미리보기 — 부작용 없는 예측이라 색만으로 말하지 않고 숫자와 단어를 같이 쓴다 */
  /* ▲▼⚠ 는 픽셀 폰트에 없어 두부로 나온다. 본문 폰트로 강제한다. */
  .fx .fxm{font-family:var(--sans);font-style:normal;font-weight:900;margin-right:2px;
    display:inline;letter-spacing:0}
  .warns .warn i,.urg .warn i,.ctx .ck{font-family:var(--sans)}

  /* 메인 화면 — 목표·긴급, 핵심 지표, 지난 결과 순서 */
  .card.goal{border-width:3px}
  .goalrow{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}
  .gbox{flex:1 1 220px;border:2px solid var(--line);background:var(--panel2);padding:9px 12px}
  .gbox .gl{display:block;font-size:12px;color:var(--dim);font-weight:700}
  .gbox .gv{display:block;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;margin:2px 0}
  .gbox .gv.bad{color:var(--rust)} .gbox .gv.good{color:var(--teal)}
  .gbox .gn{display:block;font-size:11.5px;color:var(--dim);font-weight:600}
  .gbox .gn.bad{color:var(--rust);font-weight:800}
  .urg{display:grid;gap:5px} .urg.none{color:var(--dim);font-size:13px;font-weight:700}

  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;margin:0 0 14px}
  .kpi{border:2px solid var(--ink);background:var(--panel);padding:9px 11px}
  .kpi .kl{display:block;font-size:11.5px;color:var(--dim);font-weight:800}
  .kpi .kv{display:block;font-size:21px;font-weight:900;font-variant-numeric:tabular-nums;margin:1px 0}
  .kpi .ks{display:block;font-size:11px;font-weight:700;color:var(--dim)}
  .kpi.k-good{border-left:7px solid var(--teal)} .kpi.k-good .kv{color:var(--teal)}
  .kpi.k-warn{border-left:7px solid #b8860b} .kpi.k-warn .kv{color:#8a6410}
  .kpi.k-bad{border-left:7px solid var(--rust)} .kpi.k-bad .kv{color:var(--rust)}

  .card.tops .top{border-left:5px solid var(--line);padding:6px 0 6px 10px;margin-bottom:7px}
  .card.tops .top.bill{border-left-color:var(--rust)}
  .card.tops .top b{display:block;font-size:14.5px}
  .card.tops .fx{margin-top:5px}
  .card.tops .top span{font-size:12px;color:var(--dim);font-weight:600}

  details.fold{margin:0 0 14px;border:2px solid var(--line);background:var(--panel2)}
  details.fold>summary{cursor:pointer;padding:9px 14px;font-weight:900;font-size:14px;
    font-family:var(--px);list-style:none}
  details.fold>summary::before{content:'▸ ';font-family:var(--sans)}
  details.fold[open]>summary::before{content:'▾ '}
  details.fold[open]{padding-bottom:2px}
  details.fold>*:not(summary){margin-left:10px;margin-right:10px}

  /* 집중 프로젝트 진척 */
  .card.proj{border-width:3px}
  .card.proj.p-good{border-color:var(--teal)}
  .card.proj.p-warn{border-color:#b8860b}
  .card.proj.p-bad{border-color:var(--rust)}
  .pbar{position:relative;height:18px;border:2px solid var(--ink);background:var(--panel2);margin:2px 0 8px}
  .pbar span{display:block;height:100%;background:var(--blue)}
  .p-good .pbar span{background:var(--teal)}
  .p-warn .pbar span{background:#b8860b}
  .p-bad .pbar span{background:var(--rust)}
  .pbar i{position:absolute;top:-4px;bottom:-4px;width:3px;background:var(--ink)}
  .prow{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;font-weight:700}
  .prow b{font-size:18px;font-variant-numeric:tabular-nums}
  .prow .ps{margin-left:auto;font-weight:800}
  .pwhy{margin:8px 0 0;padding:7px 10px;background:var(--panel2);border-left:4px solid #b8860b;font-size:12.5px;font-weight:600}
  .pwhy b{font-family:var(--px);font-size:11px;margin-right:5px}
  .p-good .prow .ps{color:var(--teal)} .p-warn .prow .ps{color:#8a6410} .p-bad .prow .ps{color:var(--rust)}

  /* 이정표 — 짧게, 그러나 눈에 띄게 */
  .mile{border:3px solid var(--teal);background:var(--teal-l);padding:11px 14px;margin:0 0 12px}
  .mile .mt{font-family:var(--sans);font-weight:900;font-size:15px;color:var(--teal);margin-bottom:6px}
  .mile .mwho{display:flex;align-items:center;gap:7px;font-weight:800;font-size:12.5px;margin-bottom:3px}
  .mile .mwho img{width:26px;height:26px;image-rendering:pixelated;border:1.5px solid var(--ink)}
  .mile .mwho .em{font-size:18px}
  .mile p{margin:0 0 6px;font-size:14px}
  .mile .mnext{font-size:12.5px;font-weight:800;color:var(--dim);border-top:1.5px dashed var(--teal);padding-top:5px}
  .mrow{display:flex;gap:10px;align-items:baseline;padding:4px 0;border-bottom:1px dashed var(--line)}
  .mrow i{font-style:normal;font-size:12px;color:var(--dim);font-weight:700;white-space:nowrap}
  .mrow b{font-size:14px}
  .card.grow .ordt tr.off td{opacity:.5}

  /* 공장에 남은 선택의 흔적 */
  .marks{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
  .mk{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;
    padding:2px 8px;border:2px solid var(--ink);background:var(--panel2);white-space:nowrap}
  .mk b{font-size:14px;font-weight:400}

  /* 모션을 끌 수 있게. 중요한 정보는 정지 화면에서도 전부 읽힌다. */
  @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }
  body.nomotion *{animation:none!important;transition:none!important}

  /* 결산 첫 화면 */
  .rhead{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin:2px 0 12px}
  .rbox{border:2px solid var(--ink);background:var(--panel2);padding:8px 11px}
  .rbox .rl{display:block;font-size:11.5px;color:var(--dim);font-weight:800}
  .rbox .rv{display:block;font-size:21px;font-weight:900;font-variant-numeric:tabular-nums}
  .rbox .rv.bad{color:var(--rust)} .rbox .rv.good{color:var(--teal)}
  .rbox .rn{display:block;font-size:11px;color:var(--dim);font-weight:700}
  .rcause{margin:0 0 12px}
  .rc{display:flex;justify-content:space-between;gap:10px;padding:4px 0;
    border-bottom:1px dashed var(--line);font-size:13.5px;font-weight:700}
  .rc b{font-variant-numeric:tabular-nums;white-space:nowrap}
  details.grp summary{cursor:pointer;list-style:none}
  details.grp summary::before{content:'▸ '}
  details.grp[open] summary::before{content:'▾ '}
  details.grp .gl{font-size:12.5px;padding:3px 0 3px 14px;border-top:1px dashed var(--line)}
  details.grp .gl i{font-style:normal;color:var(--dim);font-weight:800;margin-right:7px}
  .rc.rcsep{border-bottom:2px solid var(--line);font-size:11.5px;font-weight:700;padding-top:7px}
  .rrisk{border:2px solid var(--rust);background:var(--rust-l);padding:8px 12px;
    font-size:13.5px;font-weight:700;margin:0 0 12px}
  .rrisk b{font-family:var(--px);font-size:12px;margin-right:4px}

  /* 안건별 판단 근거 — 확인 / 추정 / 소문을 기호와 글자로 구분한다 */
  .ctxs{display:grid;gap:5px;margin:0 0 12px;padding:10px 12px;
    background:var(--panel2);border:2px solid var(--line)}
  .ctx{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:baseline;font-size:13px}
  .ctx.w .cv{color:var(--rust)}
  .ctx .ck{font-family:var(--px);font-size:10px;padding:1px 4px;text-align:center;
    border:1.5px solid var(--ink);white-space:nowrap}
  .ctx .cl{color:var(--dim);font-weight:700}
  .ctx .cv{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
  .ctx .cn{grid-column:2 / -1;font-size:11.5px;color:var(--dim);font-weight:600;margin-top:-3px}

  /* 결재 중 펼쳐보는 현황 */
  .minis{margin:10px 0 0;border:2px dashed var(--line);background:var(--panel2)}
  .minis summary{cursor:pointer;padding:7px 12px;font-weight:800;font-size:13px;color:var(--dim)}
  .minis table{margin:0 12px 10px;width:calc(100% - 24px)}
  .minis td{padding:3px 0;font-size:13px}
  .minis td:last-child{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}

  /* 고른 뒤에도 질문과 선택지를 남긴다 */
  .optlist.done button{opacity:.38;cursor:default}
  .optlist.done button.picked{opacity:1;border-width:3px;background:var(--blue-l)}
  .verdict.inline{margin-top:14px;border-top:3px solid var(--ink);padding-top:12px}
  /* 사내 이야기는 작게 — 큰 경영 안건과 무게를 구분한다 */
  .dlg.slim{max-width:520px}
  .dlg.slim .deckq h2{font-size:19px}
  .ofc{margin-top:10px;border-top:2px dashed var(--line);padding-top:10px}
  .ordt.fct th{background:var(--panel2);color:var(--ink);font-size:11px}
  .ordt.fct td{font-size:12px;padding:4px 5px}
  .ordt td.capby{font-size:10.5px;color:var(--dim);font-weight:700;white-space:nowrap}
  .ordt td.warn,.fcnote .warn{color:#8a6410;font-weight:800}
  .fcnote{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:7px;font-size:12.5px;font-weight:700}
  .fcnote.alt{color:var(--dim);font-weight:600;font-size:12px}
  .fcnote .est{font-style:italic}
  .osum .sub{font-weight:600;color:var(--dim);font-size:12.5px}
  @media(max-width:560px){ .ordt.fct th,.ordt.fct td{font-size:10.5px;padding:3px 2px}
    .ordt .capby{display:none}
    .ordwrap{overflow-x:auto}
    .ordt{min-width:340px} }

  /* 영업 자원 배분 표 — 0점을 준 줄은 눈에 보이게 죽인다 */
  .ordt tr.off td{opacity:.5;background:var(--panel2)}
  .ordt tr.off td.oname::after{content:' · 무관리';font-size:10.5px;color:var(--rust);font-weight:800}

  .profile{max-width:620px;margin:16px auto 0;text-align:left}
  .profile p{font-size:16.5px;line-height:1.75;margin:0 0 10px}


  /* 경영지표 표는 좁은 화면에서 표만 옆으로 민다. 페이지 전체가 밀리면 안 된다. */
  .metrics{overflow-x:auto}
  @media(max-width:560px){ .metrics table{font-size:12.5px} .metrics th,.metrics td{padding:5px 4px} }


  /* 상단 한 줄 — 회사·날짜·시황만 */
  .topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;
    padding:8px 14px;border:2px solid var(--ink);background:var(--panel);box-shadow:4px 4px 0 var(--shade)}
  .topbar b{font-family:var(--px);font-weight:400;font-size:18px}
  .topbar span{font-family:var(--px);font-size:16px}
  .topbar i{font-style:normal;font-size:12px;color:var(--dim)}
  .h3{font-size:14px;font-weight:800;margin:16px 0 6px;color:var(--ink)}
  .perf td .sh{font-size:11.5px;color:var(--dim);margin-left:4px}
  .perf td .rn{display:block;font-size:11px;color:var(--dim);font-weight:500}
  .perf td span.up{color:var(--teal);font-weight:800} .perf td span.dn{color:var(--rust);font-weight:800}
  .perf td span.neu{color:var(--dim)}
  .brief-take .bubble{max-width:none;font-size:16px;line-height:1.7}


/* ============================================================
   폰 레이아웃.

   데스크톱 화면을 그대로 줄여 놓으면 폰에서 한 판을 볼 수가 없다.
   실측해 보니 결재 전 메인 화면이 4,100px — 폰 다섯 화면 분량이고,
   「결재 시작」 버튼에 닿으려면 세 번을 쓸어 올려야 했다.

   폰에서는 세 가지를 다르게 한다.
     1. 글자와 여백을 손가락 크기에 맞춘다 (제목은 작게, 누르는 건 크게)
     2. 「결재 시작」을 화면 아래에 고정한다 — 언제든 한 번에 닿는다
     3. 표는 가로로 줄이지 않고 가로 스크롤하거나 줄 단위로 접는다
   ============================================================ */
@media (max-width: 620px) {

  /* ---------- 전체 밀도 ---------- */
  body { font-size: 15px; }
  .wrap { padding: 10px 12px 96px; }        /* 아래는 고정 버튼 자리 */
  .card { padding: 12px 13px; margin-bottom: 11px; }
  h1 { font-size: 21px; line-height: 1.3; }
  h2 { font-size: 15.5px; }
  .h3 { font-size: 13px; margin: 10px 0 5px; }
  .sep { margin: 10px 0; }
  .hint { font-size: 12px; line-height: 1.55; }

  /* ---------- 상단바 — 한 줄로 ---------- */
  .topbar { padding: 6px 9px; gap: 5px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.35; }
  .topbar b { font-size: 14px; }
  .topbar .mini { padding: 4px 8px; font-size: 11.5px; }
  .topbar #btn-motion { order: 9; }

  /* ---------- 연차 배너 — 두 줄로 줄인다 ---------- */
  .yearban { padding: 11px 13px; }
  .yearban b { font-size: 16px; }
  .yearban p { font-size: 13px; line-height: 1.5; }
  .yearban .sub { font-size: 11.5px; }

  /* ---------- 목표 · 긴급 ---------- */
  .goalrow { gap: 8px; }
  .gbox { flex: 1 1 100%; padding: 8px 10px; }
  .gbox .gv { font-size: 19px; }
  .gbox .gl, .gbox .gn { font-size: 11px; }
  .urg .warn { padding: 5px 0; }
  .urg .warn span { font-size: 13px; line-height: 1.45; }

  /* ---------- 핵심 지표 — 2열 ---------- */
  .kpis { grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 11px; }
  .kpi { padding: 7px 9px; border-left-width: 5px !important; }
  .kpi .kl { font-size: 10.5px; }
  .kpi .kv { font-size: 17px; }
  .kpi .ks { font-size: 10px; line-height: 1.35; }

  /* ---------- 지난 결과 ---------- */
  .card.tops .top b { font-size: 13.5px; }
  .card.tops .top span { font-size: 11.5px; }
  .fx span { font-size: 11.5px; padding: 1px 6px; }

  /* ---------- 진행 중 프로젝트 ---------- */
  .prow { font-size: 12.5px; gap: 4px 10px; }
  .prow b { font-size: 16px; }
  .prow .ps { margin-left: 0; width: 100%; }
  .pwhy { font-size: 11.5px; }

  /* ---------- 「결재 시작」을 화면 아래 고정 ----------
     폰에서 제일 많이 누르는 버튼이 스크롤 세 번 아래에 있으면 안 된다. */
  .center { margin: 4px 0 8px !important; }
  .center .hint { display: none; }
  #go {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 41;
    width: auto; padding: 15px 0; font-size: 17px;
    box-shadow: 0 4px 0 var(--ink), 0 8px 18px rgba(0,0,0,.28);
  }
  /* 고정 버튼 뒤로 화면이 비쳐 보이면 지저분하다. 띠를 깔아 분리한다.
     결재 팝업이 떠 있는 동안에는 버튼도 띠도 감춘다 — 팝업 위에 뜨면 그냥 방해물이다. */
  body:has(#go)::after {
    content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 86px; z-index: 40;
    background: linear-gradient(to top, var(--bg) 58%, transparent);
    pointer-events: none;
  }
  body:has(dialog[open])::after { display: none; }
  body:has(dialog[open]) #go { display: none; }

  /* ---------- 접는 상세 ---------- */
  details.fold > summary { padding: 11px 12px; font-size: 13.5px; }
  details.fold > *:not(summary) { margin-left: 5px; margin-right: 5px; }

  /* ---------- 표 — 줄이지 말고 밀어서 본다 ---------- */
  .card table, .metrics table, .perf table { font-size: 12px; }
  .metrics, .perf { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .metrics table, .perf table { min-width: 460px; }
  .metrics th, .metrics td, .perf th, .perf td { padding: 4px 5px; white-space: nowrap; }

  /* ---------- 고객 구성 — 한 줄에 다 넣지 않는다 ---------- */
  .custbar {
    grid-template-columns: 1fr auto auto;
    gap: 3px 8px; padding: 9px 0; font-size: 13px;
  }
  .custbar > span:first-child { grid-column: 1 / -1; font-weight: 800; }
  .custbar .track { grid-column: 1 / -1; height: 12px; }
  .custbar .leak { grid-column: 1 / -1; text-align: left; margin-top: 2px; white-space: normal; }

  /* ---------- 결재 팝업 — 전체 화면 ---------- */
  dialog.deck { width: 100%; max-width: 100%; margin: 0; border-width: 0; }
  dialog.deck .dlg { border-radius: 0; padding: 0 0 14px; }
  .deckhead { padding: 9px 12px; font-size: 12px; position: sticky; top: 0; z-index: 5; }
  .crew { padding: 0; }
  .crew-pic img { width: 92px; height: 92px; }
  .crew-body .line { font-size: 14.5px; line-height: 1.65; padding: 11px 12px; }
  .deckq { padding: 0 12px; }
  .deckq h2 { font-size: 17px; line-height: 1.35; }
  .optlist { padding: 0 12px; gap: 9px; }
  .optlist button { padding: 12px 13px; }
  .optlist button b { font-size: 15.5px; line-height: 1.35; }
  .optlist button .why { font-size: 12px; }
  .ctxs { margin: 0 12px 11px; padding: 9px 10px; gap: 4px; }
  .ctx { grid-template-columns: 38px 1fr; font-size: 12px; }
  .ctx .cv { grid-column: 2; justify-self: start; }
  .ctx .cn { font-size: 11px; }
  .minis { margin: 10px 12px 0; }
  .verdict.inline { margin: 12px 12px 0; }
  .vchoice { font-size: 20px; line-height: 1.3; }
  .vmsg { font-size: 14.5px; line-height: 1.65; }
  .vfoot { padding: 12px; }
  .vfoot .primary, .ok .primary { width: 100%; padding: 14px 0; font-size: 16px; }

  /* ---------- 발주 표 — 고객군마다 한 장 ----------
     여덟 칸짜리 표를 폰에 밀어 넣으면 숫자가 서로 붙어 못 읽는다.
     줄을 카드로 풀고, 사장이 손대는 입력칸만 크게 남긴다. */
  .ordwrap { padding: 0 12px; }
  .ordt:not(.fct) { display: block; width: 100%; }
  .ordt:not(.fct) tbody { display: block; width: 100%; }
  .ordt:not(.fct) tr { display: block; width: 100%; box-sizing: border-box;
    border: 2px solid var(--ink); background: var(--panel);
    margin-bottom: 9px; padding: 9px 10px; }
  .ordt:not(.fct) tr:first-child { display: none; }          /* 헤더 행은 감춘다 */
  .ordt:not(.fct) td { display: flex; justify-content: space-between; align-items: center;
    border: 0; border-bottom: 1px dashed var(--line); padding: 5px 0; text-align: right;
    font-size: 13px; white-space: normal; }
  .ordt:not(.fct) td:last-child { border-bottom: 0; padding-top: 9px; }
  .ordt:not(.fct) td::before { content: attr(data-l); color: var(--dim);
    font-weight: 800; font-size: 11.5px; text-align: left; }
  .ordt:not(.fct) td.oname { display: block; text-align: left; font-size: 15px;
    border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 3px; }
  .ordt:not(.fct) td.oname::before { content: none; }
  .ordt:not(.fct) input { width: 118px; padding: 9px 8px; font-size: 16px; }
  .ordbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .obtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .obtns .mini { padding: 9px 4px; font-size: 12.5px; }
  .osum { font-size: 15px; }
  /* 예측표는 가로로 민다 — 달이 줄줄이 있어야 흐름이 보인다 */
  .ofc { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ordt.fct { min-width: 420px; }
  .fcnote { font-size: 11.5px; gap: 5px 10px; }
  #osubmit, #ssubmit { width: 100%; padding: 15px 0; font-size: 16px; margin-top: 10px; }

  /* ---------- 결산 ---------- */
  .rhead { grid-template-columns: 1fr 1fr; gap: 7px; }
  .rbox { padding: 7px 9px; }
  .rbox .rv { font-size: 17px; }
  .rbox .rl, .rbox .rn { font-size: 10.5px; }
  .rc { font-size: 12.5px; }
  .rrisk { font-size: 12.5px; padding: 7px 10px; }
  .mile { padding: 10px 11px; }
  .mile p { font-size: 13.5px; }

  /* ---------- 공장 그림 ---------- */
  .marks { gap: 5px; }
  .mk { font-size: 11px; padding: 2px 6px; }
}

/* 아주 좁은 폰 (아이폰 SE 등) */
/* 아주 좁은 폰(아이폰 SE 375px)에서도 지표는 2열을 유지한다.
   1열로 풀면 다섯 칸이 434px을 먹어 첫 화면이 지표만으로 차 버린다. */
@media (max-width: 340px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi .kv { font-size: 19px; }
  h1 { font-size: 19px; }
  .crew-pic img { width: 76px; height: 76px; }
}

.cc-audio-settings { width:min(100%, 36rem); padding:0; box-shadow:var(--cc-window-shadow); }
.cc-audio-settings .cc-dossier-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--cc-space-3); padding:var(--cc-space-4); background:var(--cc-raised); border-bottom:1px solid var(--cc-border); }
.cc-audio-settings h2 { margin:0; font-size:var(--cc-text-heading); }
.cc-audio-settings .cc-dossier-close { flex-shrink:0; }
.cc-audio-settings .cc-dossier-content { display:grid; gap:var(--cc-space-4); padding:var(--cc-space-4); }
.cc-audio-settings p { margin:0; }
.cc-audio-mute { display:flex; gap:var(--cc-space-3); align-items:center; min-height:44px; }
.cc-audio-settings input[type='checkbox'] { width:24px; height:24px; accent-color:var(--cc-gold); }
.cc-audio-levels { display:grid; gap:var(--cc-space-4); }
.cc-audio-level { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--cc-space-2); }
.cc-audio-level output { color:var(--cc-gold); font-variant-numeric:tabular-nums; }
.cc-audio-settings input[type='range'] { grid-column:1/-1; width:100%; min-width:0; min-height:44px; margin:0; accent-color:var(--cc-gold); }
.cc-audio-preview { min-width:0; display:grid; gap:var(--cc-space-3); padding:var(--cc-space-4); border:1px solid var(--cc-border); }
.cc-audio-preview legend { padding:0 var(--cc-space-2); font-size:var(--cc-text-label); }
.cc-audio-preview select { width:100%; min-width:0; }
.cc-audio-preview-actions { display:flex; flex-wrap:wrap; gap:var(--cc-space-2); }
.cc-audio-preview-actions button { flex:1; }
.cc-audio-status { color:var(--cc-muted); font-size:var(--cc-text-small); line-height:1.5; }
.cc-nav .cc-audio-status { flex-basis:100%; }
.cc-game .cc-nav { flex-wrap:wrap; }
.cc-audio-settings .cc-audio-controls { display:grid; gap:var(--cc-space-3); }
@media(max-width:760px) {
  .cc-game .cc-nav .cc-audio-status { grid-column:1/-1; }
  .cc-audio-settings .cc-dossier-content { padding:var(--cc-space-3); }
  .cc-audio-preview { padding:var(--cc-space-3); }
}

.cc-history-ending .cc-company-history {
  margin-block: var(--cc-space-4);
  font-size: var(--cc-text-body);
  line-height: 1.5;
}
.cc-company-history .cc-history-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-6); }
.cc-company-history .cc-history-stack > section { min-width: 0; }
.cc-company-history h3 { font-size: var(--cc-text-heading); margin: 0 0 var(--cc-space-3); }
.cc-company-history h4 { font-size: var(--cc-text-body); margin: var(--cc-space-4) 0 var(--cc-space-2); }
.cc-company-history p { margin: var(--cc-space-2) 0; }
.cc-company-history .cc-history-meta { color: var(--cc-muted); font-size: var(--cc-text-small); }
.cc-company-history table { width: 100%; font-size: var(--cc-text-label); }
.cc-company-history caption { text-align: left; padding-block: var(--cc-space-2); color: var(--cc-muted); }
.cc-company-history th, .cc-company-history td { text-align: left; white-space: normal; min-width: 8em; }
.cc-company-history .cc-history-records { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cc-space-4); }
.cc-company-history .cc-history-record { border-top: 1px solid var(--cc-border); padding-top: var(--cc-space-4); }
.cc-company-history .cc-history-record h3 { font-size: var(--cc-text-body); }
.cc-company-history .cc-history-response { display: flex; align-items: flex-start; gap: var(--cc-space-3); margin: var(--cc-space-3) 0 0; padding: var(--cc-space-3); background: var(--cc-dark); }
.cc-company-history .cc-history-response .cc-portrait { flex: 0 0 60px; width: 60px; height: 72px; }
.cc-company-history .cc-history-response > div { min-width: 0; }
.cc-company-history .cc-history-response p:first-child { font-size: var(--cc-text-label); }
.cc-company-history .cc-history-related { font-size: var(--cc-text-label); color: var(--cc-muted); }
.cc-company-history .cc-history-pending { padding: var(--cc-space-4); background: var(--cc-dark); }
.cc-company-history .cc-history-pending h4 { margin-top: 0; }
.cc-company-history .cc-history-projects { padding-left: var(--cc-space-6); display: grid; gap: var(--cc-space-3); }
.cc-history-ending > .grid > .card { min-width: 0; }
.cc-history-ending .cc-table-scroll { max-width: 100%; }
body:has(.cc-history-ending) #toast:not(.on) { visibility: hidden; }
@media (max-width: 760px) {
  .cc-history-ending > .grid { grid-template-columns: minmax(0, 1fr); }
  .cc-history-ending .cc-company-history { font-size: calc(17px * var(--cc-text-scale, 1)); }
  .cc-company-history .cc-history-response { flex-wrap: wrap; }
}

.cc-portrait.cc-state-portrait { position:relative; overflow:hidden; background-image:none; }
.cc-state-portrait > img { position:absolute; width:300%; height:200%; max-width:none; object-fit:fill; image-rendering:pixelated; }
.cc-state-portrait > .cc-portrait-fallback { display:none; }
.cc-portrait.cc-portrait-unavailable { width:auto; height:auto; max-width:100%; padding:4px; background:var(--cc-dark); }
.cc-portrait-unavailable > .cc-portrait-fallback { display:block; font-size:var(--cc-text-small); line-height:1.5; white-space:normal; }
.cc-app .cc-map-place .cc-place-state { display:block; font-size:var(--cc-text-small); color:var(--cc-muted); line-height:1.5; white-space:normal; }
.cc-app .cc-map-place[data-place-state="concerned"] .cc-place-state,
.cc-app [data-staff-state="concerned"] { color:var(--cc-warning); }
.cc-app [data-staff-state="positive"] { color:var(--cc-good); }
.cc-app .cc-person .cc-staff-state { margin-top:4px; white-space:normal; }
.cc-app .cc-report-state { padding:8px; background:var(--cc-dark); }
@media (max-width:760px) {
  .cc-app .cc-map-place .cc-place-state { font-size:var(--cc-text-small); }
}
.cc-app .cc-map-place[data-place-state="concerned"] { max-width:240px; }
.cc-game .cc-person:has(.cc-portrait-unavailable) { flex-direction:column; align-items:stretch; }
.cc-app .cc-dialogue:has(> .cc-portrait-unavailable) { flex-direction:column; }
.cc-portrait.cc-state-portrait.cc-portrait-unavailable[data-portrait-state] { width:auto; height:auto; }

dialog.cc-confirm { max-width: 560px; }
.cc-confirm .cc-dossier-actions { flex-wrap: wrap; gap: var(--cc-space-3); }
.cc-confirm .cc-dossier-content > p { margin: 0; }

dialog.deck .cc-decision-guide {
  margin: 8px 0 16px;
  padding: 12px;
  background: var(--cc-dark);
  color: var(--cc-muted);
  font-size: 14px;
  line-height: 1.5;
}
dialog.deck .cc-decision-effects,
dialog.deck .cc-effect-group,
dialog.deck .cc-effect-note { display:block; }
dialog.deck .cc-effect-group { margin-top:var(--cc-space-3); }
dialog.deck .cc-effect-label { display:block; margin-bottom:var(--cc-space-2); color:var(--cc-gold); font-size:var(--cc-text-small); }
dialog.deck .cc-effect-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--cc-space-2); }
dialog.deck .cc-decision-effects .cc-effect-text {
  display:flex; align-items:baseline; gap:var(--cc-space-2); min-width:0;
  padding:var(--cc-space-2) var(--cc-space-3); border:1px solid var(--cc-border);
  background:var(--cc-dark); color:var(--cc-text); font-size:var(--cc-text-label); font-weight:400; line-height:1.5;
}
dialog.deck .cc-effect-text:only-child { grid-column:1/-1; }
dialog.deck .cc-effect-badge {
  --cc-effect-ink:var(--cc-text);
  display:inline-flex; flex:none; align-items:center; justify-content:center; gap:var(--cc-space-1);
  min-width:5em; padding:var(--cc-space-1); color:var(--cc-effect-ink);
  background:color-mix(in srgb,var(--cc-effect-ink) 12%,var(--cc-dark));
  font-size:var(--cc-text-small); font-weight:700; line-height:1.5;
}
dialog.deck [data-cc-tone='positive'] .cc-effect-badge { --cc-effect-ink:var(--cc-good); }
dialog.deck [data-cc-tone='negative'] .cc-effect-badge { --cc-effect-ink:var(--cc-warning); }
dialog.deck [data-cc-tone='uncertain'] .cc-effect-badge { --cc-effect-ink:var(--cc-gold); }
dialog.deck .cc-effect-symbol { font-size:var(--cc-text-label); line-height:1; }
dialog.deck .cc-effect-copy { min-width:0; overflow-wrap:anywhere; }
dialog.deck .cc-effect-value { color:var(--cc-text); font-size:var(--cc-text-body); font-weight:800; font-variant-numeric:tabular-nums; }
dialog.deck .cc-decision-effects .cc-effect-note {
  margin-top:var(--cc-space-3); padding-top:var(--cc-space-2); border-top:1px solid var(--cc-border);
  color:var(--cc-muted); font-size:var(--cc-text-small); font-weight:400; line-height:1.5;
}
dialog.deck .cc-effect-group[data-cc-effect='risk'] .cc-effect-label { color: var(--cc-warning); }
dialog.deck .cc-effect-group[data-cc-effect='risk'] .cc-effect-items { grid-template-columns:minmax(0,1fr); }
@media (max-width: 760px) {
  dialog.deck .cc-effect-items { grid-template-columns:minmax(0,1fr); }
  dialog.deck .cc-decision-guide { font-size:var(--cc-text-label); }
  dialog.deck .cc-decision-effects .cc-effect-text { padding:var(--cc-space-2); }
}

dialog.deck.cc-decision-layout {
  border: 2px solid var(--cc-border);
  box-shadow: inset 0 0 0 2px var(--cc-dark), 8px 8px 0 var(--cc-shadow);
}
dialog.deck.cc-decision-layout::backdrop {
  background: color-mix(in srgb, var(--cc-shadow) 78%, transparent);
}
.deck.cc-decision-layout .dlg { border: 0; }
.deck.cc-decision-layout .deckhead {
  background: var(--cc-raised);
  color: var(--cc-text);
  border-bottom: 1px solid var(--cc-border);
  padding: var(--cc-space-3) var(--cc-space-4);
  font-size: var(--cc-text-small);
}
.deck.cc-decision-layout .deckhead .step { opacity: 1; color: var(--cc-gold); }
.deck.cc-decision-layout .deckq { padding: var(--cc-space-4); }
.deck.cc-decision-layout .deckq h2 { margin: 0; font-size: var(--cc-text-heading); }
.deck.cc-decision-layout .crew {
  flex-direction: column;
  border-block: 1px solid var(--cc-border);
}
.deck.cc-decision-layout .crew-pic {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  flex: none;
  width: 100%;
  padding: var(--cc-space-2) var(--cc-space-4);
  border: 0;
  background: var(--cc-dark);
}
.deck.cc-decision-layout .cc-crew-portrait { width: 60px; height: 72px; flex: 0 0 60px; }
.deck.cc-decision-layout .cc-crew-portrait.cc-portrait-unavailable { width: auto; height: auto; flex: 0 1 auto; }
.deck.cc-decision-layout .crew-plate {
  position: static;
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--cc-text);
}
.deck.cc-decision-layout .crew-plate b { font-size: var(--cc-text-label); }
.deck.cc-decision-layout .crew-plate i { font-size: var(--cc-text-small); opacity: 1; color: var(--cc-muted); }
.deck.cc-decision-layout .crew-body { padding: var(--cc-space-3) var(--cc-space-4); }
.deck.cc-decision-layout .crew-body .line { padding: 0; font-size: var(--cc-text-body); font-weight: 400; }
.deck.cc-decision-layout .cc-decision-preview { margin: 0; }
.deck.cc-decision-layout .cc-decision-disclosure > summary {
  min-height: 44px;
  padding-block: var(--cc-space-3);
  cursor: pointer;
  color: var(--cc-gold);
  font-size: var(--cc-text-label);
}
.deck.cc-decision-layout .cc-decision-instructions { padding-inline: var(--cc-space-4); }
.deck.cc-decision-layout .cc-decision-guide { margin: 0 0 var(--cc-space-3); }
.deck.cc-decision-layout .cc-decision-disclosure > summary:focus-visible { outline: 3px solid var(--cc-gold); outline-offset: 2px; }

dialog.cc-dossier {
  padding: 2px;
  border: 2px solid var(--cc-border);
  border-radius: 0;
  background: var(--cc-panel);
  box-shadow: inset 0 0 0 2px var(--cc-dark), 8px 8px 0 var(--cc-shadow);
}
dialog.cc-dossier::backdrop {
  background: color-mix(in srgb, var(--cc-shadow) 78%, transparent);
}
.cc-dossier > .cc-dossier-heading {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-4);
  padding: var(--cc-space-4) var(--cc-space-6);
  background: var(--cc-raised);
  border-bottom: 1px solid var(--cc-border);
}
.cc-dossier-heading > h2 {
  margin: 0;
  min-width: 0;
  font-family: var(--cc-font-title);
  font-size: var(--cc-text-heading);
}
.cc-dossier-heading > .cc-dossier-close {
  flex: 0 0 auto;
  min-width: 80px;
}
.cc-dossier > .cc-dossier-content { padding: var(--cc-space-6); }
dialog.cc-dossier[open] {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
.cc-dossier > .cc-dossier-heading,
.cc-dossier > .cc-dossier-actions { flex: 0 0 auto; }
.cc-dossier > .cc-dossier-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cc-dossier-actions {
  display: flex;
  justify-content: flex-end;
  padding: var(--cc-space-4) var(--cc-space-6);
  background: var(--cc-raised);
  border-top: 1px solid var(--cc-border);
}
.cc-dossier-actions > button { min-width: 160px; }
@media (max-width: 760px), (max-height: 540px) {
  .cc-dossier > .cc-dossier-heading,
  .cc-dossier > .cc-dossier-content,
  .cc-dossier > .cc-dossier-actions { padding: var(--cc-space-4); }
  .cc-dossier-actions > button { width: 100%; }
}

.cc-ending-motion { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; visibility:hidden; }
.cc-ending-reflection { fill:var(--cc-text); }
.nomotion .cc-ending-motion { display:none; }
@media(prefers-reduced-motion:reduce) {
  .cc-ending-motion { display:none; }
}

.cc-ending { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; overflow:hidden; background:var(--cc-bg); color:var(--cc-text); font-family:var(--cc-font-body); }
.cc-ending-main { flex:1 1 auto; min-height:0; width:min(100%,1100px); margin:0 auto; padding:24px; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; }
.cc-ending-stage { position:relative; display:grid; place-items:center; aspect-ratio:8/5; background:var(--cc-dark); border:2px solid var(--cc-border); box-shadow:inset 0 0 0 2px var(--cc-shadow); }
.cc-ending-art { position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
.cc-ending-art[hidden],.cc-ending-image-fallback[hidden] { display:none; }
.cc-ending-image-fallback { padding:24px; line-height:1.6; }
.cc-ending-person { position:absolute; z-index:1; bottom:0; left:50%; transform:translateX(-50%); }
.cc-ending-person .cc-ending-portrait { display:block; width:clamp(100px,25vw,240px); height:auto; aspect-ratio:1; background-size:300% 200%; }
.cc-ending-caption { padding:20px 24px; min-height:130px; border:2px solid var(--cc-border); border-top:0; background:var(--cc-panel); text-align:center; font-size:calc(18px * var(--cc-text-scale,1)); line-height:1.6; word-break:keep-all; overflow-wrap:anywhere; }
.cc-ending-heading { margin:0 0 12px; color:var(--cc-gold); font-family:var(--cc-font-title); font-size:calc(24px * var(--cc-text-scale,1)); }
.cc-ending-heading:empty { display:none; }
.cc-ending-line { margin:8px 0; }
.cc-ending-line-label,.cc-ending-grade,.cc-ending-date { color:var(--cc-muted); }
.cc-ending-notice { margin:12px 0; text-align:center; line-height:1.5; overflow-wrap:anywhere; }
.cc-ending-controls { flex:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px)); background:var(--cc-panel); border-top:2px solid var(--cc-border); }
.cc-ending-controls button { min-width:44px; min-height:44px; padding:10px 16px; font:inherit; font-size:calc(16px * var(--cc-text-scale,1)); color:var(--cc-text); background:var(--cc-raised); border:2px solid var(--cc-border); }
.cc-ending-controls button:focus-visible { outline:3px solid var(--cc-gold); outline-offset:2px; }
.cc-ending-controls .cc-ending-finish { color:var(--cc-bg); background:var(--cc-gold); }
@media(max-width:760px) {
 .cc-ending-main { padding:12px; }
 .cc-ending-caption { padding:16px 12px; font-size:calc(17px * var(--cc-text-scale,1)); }
 .cc-ending-heading { font-size:calc(22px * var(--cc-text-scale,1)); }
 .cc-ending-controls button { flex:1 1 auto; padding:10px 8px; }
}

.cc-quarter-guidance {
  padding: var(--cc-space-4, 16px);
}
.cc-quarter-guidance h2, .cc-handover h3 {
  margin: 0 0 12px;
  color: var(--cc-gold);
  font-family: var(--cc-font-title);
  font-size: var(--cc-text-heading, 22px);
}
.cc-guidance-brief {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 8px;
}
.cc-guidance-brief .cc-portrait {
  flex: 0 0 60px;
  width: 60px;
  height: 72px;
}
.cc-guidance-brief > div { min-width: 0; }
.cc-guidance-brief h3 { margin: 0 0 8px; font-size: 18px; }
.cc-guidance-brief p, .cc-quarter-guidance > p { margin: 0 0 8px; }
.cc-quarter-guidance > button { margin: 4px 8px 4px 0; min-height: 44px; }
.cc-handover ol { padding-left: 24px; }
.cc-handover li { margin-bottom: 12px; }
.cc-quarter-guidance[data-guidance-stage="independent"] h2 { font-size: 18px; }
@media (max-width: 760px) {
  .cc-quarter-guidance { padding: 12px; }
  .cc-quarter-guidance > button { width: 100%; margin: 4px 0; }
  .cc-guidance-brief { gap: 8px; }
}

.cc-opening-motion { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; visibility:hidden; }
.cc-opening-metal-light { fill:var(--cc-text); opacity:.3; }
.cc-opening-metal-dark { fill:var(--cc-bg); opacity:.2; }
.nomotion .cc-opening-motion { display:none; }
@media(prefers-reduced-motion:reduce) {
  .cc-opening-motion { display:none; }
}

.cc-opening { position:fixed; inset:0; z-index:100; height:100svh; background:var(--cc-bg); color:var(--cc-text); overflow:hidden; font-family:var(--cc-font-body); }
.cc-opening-main { position:relative; width:100%; height:100%; }
.cc-opening-stage { display:flex; flex-direction:column; justify-content:center; width:min(100%,1480px); height:100%; margin:auto; padding:24px; box-sizing:border-box; }
.cc-opening-picture { position:relative; display:flex; align-items:center; justify-content:center; min-height:0; flex:0 1 auto; }
.cc-opening-picture:empty { display:none; }
.cc-opening-art { display:block; width:100%; max-height:calc(100svh - 160px); object-fit:contain; }
.cc-opening-copy { flex:none; margin:24px 0 0; text-align:center; color:var(--cc-text); font-size:calc(22px * var(--cc-text-scale,1)); line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
.cc-opening-credit { display:flex; align-items:center; justify-content:center; text-align:center; }
.cc-opening-credit h1 { width:min(900px,90vw,calc(300svh - 288px)); max-width:100%; margin:0; font:400 calc(clamp(26px,4vw,48px) * var(--cc-text-scale,1))/1.4 var(--cc-font-title); letter-spacing:.025em; overflow-wrap:anywhere; }
.cc-opening-wordmark-frame { position:relative; display:grid; place-items:center; aspect-ratio:3/1; overflow:hidden; }
.cc-opening-wordmark { position:absolute; display:block; top:0; left:0; width:100%; height:auto; }
.cc-opening-wordmark-frame[data-logo="ethan"] .cc-opening-wordmark { top:auto; bottom:0; }
.cc-opening-title { position:absolute; margin:0; padding:16px 24px; background:transparent; color:var(--cc-text); font:700 calc(clamp(36px,6vw,72px) * var(--cc-text-scale,1))/1.3 var(--cc-font-title); text-align:center; letter-spacing:.04em; text-shadow:-1px -1px 0 var(--cc-bg),1px -1px 0 var(--cc-bg),-1px 1px 0 var(--cc-bg),1px 1px 0 var(--cc-bg),0 3px 4px var(--cc-bg); }
.cc-opening-title span { display:block; }
.cc-opening-stage[data-scene="staff"] .cc-opening-art { position:absolute; inset:0; height:100%; opacity:.25; }
.cc-opening-stage[data-scene="staff"] .cc-opening-picture { flex:1; }
.cc-opening-staff { position:relative; width:min(100%,880px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 32px; padding:24px 0; }
.cc-opening-staff figure { min-width:0; margin:0; text-align:center; }
.cc-opening-staff .cc-opening-portrait { display:block; width:min(100%,200px); height:auto; aspect-ratio:1; margin:0 auto 8px; background-size:300% 200%; image-rendering:auto; }
.cc-opening-staff figcaption { color:var(--cc-text); font-size:calc(20px * var(--cc-text-scale,1)); line-height:1.5; overflow-wrap:anywhere; word-break:keep-all; }
.cc-opening-skip { position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; }
.cc-opening-skip:hover,.cc-opening-skip:active { background:transparent; transform:none; }
.cc-opening-skip:focus-visible { outline:3px solid var(--cc-gold); outline-offset:-6px; }
.cc-opening-caption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.cc-opening-prompt { position:absolute; right:16px; bottom:24px; left:16px; margin:0; color:var(--cc-text); text-align:center; font-size:calc(16px * var(--cc-text-scale,1)); line-height:1.5; word-break:keep-all; }
@media(max-width:760px) {
  .cc-opening-stage { padding:16px 12px; }
  .cc-opening-copy { margin-top:24px; font-size:calc(17px * var(--cc-text-scale,1)); }
  .cc-opening-staff { gap:24px 12px; }
  .cc-opening-staff figcaption { font-size:calc(17px * var(--cc-text-scale,1)); }
  .cc-opening-title { padding:12px; font-size:calc(clamp(36px,10vw,56px) * var(--cc-text-scale,1)); }
}
@media(max-height:540px) {
  .cc-opening-staff { width:min(100%,640px); gap:8px 24px; padding:8px 0; }
  .cc-opening-staff .cc-opening-portrait { width:min(100%,120px,calc((100svh - 120px - 60px * var(--cc-text-scale,1)) / 2)); }
}

:root { --cc-text-scale:1; }
.cc-preferences label { display:block; margin-bottom:8px; }
.cc-preferences fieldset { min-width:0; display:flex; flex-wrap:wrap; gap:8px; }
.cc-preferences [aria-pressed='true'] { background:var(--cc-gold); color:var(--cc-bg); }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

.cc-game .cc-progress-guide {
  padding: var(--cc-space-4);
  margin-top: var(--cc-space-3);
}
.cc-progress-guide h2 {
  margin: 0 0 var(--cc-space-2);
  text-wrap: balance;
  color: var(--cc-gold);
  font: 700 var(--cc-text-heading)/1.5 var(--cc-font-title);
}
.cc-progress-guide .cc-progress-phase {
  margin: 0 0 var(--cc-space-4);
  color: var(--cc-muted);
  font-size: var(--cc-text-small);
}
.cc-progress-guide .cc-progress-items {
  list-style: decimal;
  margin: 0;
  padding-left: var(--cc-space-6);
}
.cc-progress-guide .cc-progress-item {
  padding: 0 0 var(--cc-space-4) var(--cc-space-1);
}
.cc-progress-guide h3 {
  margin: 0 0 var(--cc-space-1);
  font-size: var(--cc-text-label);
  color: var(--cc-text);
}
.cc-progress-guide p { margin: 0 0 var(--cc-space-2); }
.cc-progress-guide button { min-height: 44px; max-width: 100%; white-space: normal; }
.cc-progress-guide .cc-progress-chapter {
  background: var(--cc-dark);
  border: 1px solid var(--cc-border);
  padding: var(--cc-space-3);
  margin-bottom: var(--cc-space-4);
}
.cc-progress-chapter[data-progress-chapter="entering"] { animation: cc-progress-enter 240ms ease-out; }
@keyframes cc-progress-enter { from { opacity: 0; transform: translateY(var(--cc-space-2)); } to { opacity: 1; transform: none; } }
.nomotion .cc-progress-chapter { animation: none; }
@media (prefers-reduced-motion: reduce) { .cc-progress-chapter { animation: none; } }
@media (max-width: 760px) {
  .cc-game .cc-progress-guide {
    padding: var(--cc-space-3);
    scroll-margin-block-end: calc(var(--cc-turn-height, 56px) + var(--cc-space-6) + env(safe-area-inset-bottom));
  }
  .cc-progress-guide button { width: 100%; }
}

.cc-release-version { margin: .6rem 0 0; color: var(--ink); font-size: calc(.875rem * var(--cc-text-scale, 1)); overflow-wrap: anywhere; }
.cc-release-info .cc-dossier-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-space-3); padding: var(--cc-space-4); border-bottom: 1px solid var(--cc-border); }
.cc-release-info .cc-dossier-content { padding: var(--cc-space-4); overflow-wrap: anywhere; }
.cc-release-info h3 { margin: 1.4em 0 .4em; }
.cc-release-info a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.cc-release-info a:focus-visible { outline: 3px solid var(--cc-gold); outline-offset: 3px; }

.cc-save-banner { margin-block: var(--cc-space-4); padding: var(--cc-space-3) var(--cc-space-4); color: var(--cc-warning); }
.cc-save-banner[hidden] { display: none; }
.cc-save-banner p { margin-block: 0 var(--cc-space-2); }
dialog.cc-save-manager { width: min(1320px, calc(100vw - 24px)); font-family: var(--cc-font-body); font-size: var(--cc-text-label); }
.cc-save-manager .cc-dossier-heading h2 { margin: 0; font-family: var(--cc-font-title); font-size: var(--cc-text-heading); }
.cc-save-manager .cc-dossier-heading .hint { margin: var(--cc-space-1) 0 0; color: var(--cc-muted); }
.cc-save-manager .cc-dossier-content { display: flex; flex-direction: column; gap: var(--cc-space-4); min-inline-size: 0; }
.cc-save-manager p { margin: 0; overflow-wrap: anywhere; }
.cc-save-manager button { min-block-size: 44px; font-family: var(--cc-font-body); font-size: var(--cc-text-label); overflow-wrap: anywhere; }
.cc-save-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 256px; gap: var(--cc-space-4); align-items: start; }
.cc-save-layout > section { min-inline-size: 0; border: 1px solid var(--cc-border); background: var(--cc-dark); }
.cc-save-layout h3 { margin: 0; font-family: var(--cc-font-body); font-size: var(--cc-text-label); }
.cc-save-records { display: grid; gap: var(--cc-space-2); padding: var(--cc-space-3); }
.cc-save-record { display: flex; flex-direction: column; align-items: stretch; gap: var(--cc-space-1); inline-size: 100%; min-inline-size: 0; padding: var(--cc-space-3); text-align: start; font-weight: 400; background: var(--cc-panel); border: 1px solid var(--cc-border); box-shadow: inset 0 0 0 2px var(--cc-dark); }
.cc-save-record[aria-pressed='true'] { background: var(--cc-raised); color: var(--cc-text); }
.cc-save-record[aria-pressed='true'] .cc-save-record-kind { color: var(--cc-gold); }
.cc-save-record[aria-pressed='true'] .cc-save-record-kind::before { content: '✓ '; }
.cc-save-record-kind, .cc-save-record small { font-size: var(--cc-text-small); color: var(--cc-muted); }
.cc-save-record strong { font-size: var(--cc-text-label); font-weight: 700; }
.cc-save-file { display: flex; flex-direction: column; gap: var(--cc-space-2); margin: 0 var(--cc-space-3) var(--cc-space-3); padding: var(--cc-space-3); background: var(--cc-panel); }
.cc-save-file input { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; font-size: var(--cc-text-small); }
.cc-save-file input::file-selector-button { min-block-size: 44px; margin-inline-end: var(--cc-space-2); font: inherit; color: var(--cc-text); background: var(--cc-raised); border: 1px solid var(--cc-border); }
.cc-save-library > .hint, .cc-save-overview > .hint { padding: 0 var(--cc-space-3) var(--cc-space-3); color: var(--cc-muted); }
.cc-save-landscape { margin: var(--cc-space-3); }
.cc-save-landscape img { display: block; width: 100%; height: auto; max-height: min(28dvh, 280px); aspect-ratio: 8 / 5; object-fit: contain; }
.cc-save-landscape figcaption { margin-block-start: var(--cc-space-1); font-size: var(--cc-text-small); color: var(--cc-muted); }
.cc-save-detail { display: flex; flex-direction: column; gap: var(--cc-space-2); padding: 0 var(--cc-space-3) var(--cc-space-3); }
.cc-save-company { margin: 0; font: 700 var(--cc-text-body)/1.5 var(--cc-font-body); }
.cc-save-description, .cc-save-detail .hint { color: var(--cc-muted); }
.cc-save-progress-label { font-size: var(--cc-text-small); }
.cc-save-detail progress { display: block; inline-size: 100%; block-size: var(--cc-space-3); border: 1px solid var(--cc-border); border-radius: 0; background: var(--cc-panel); accent-color: var(--cc-gold); }
.cc-save-detail progress::-webkit-progress-bar { background: var(--cc-panel); }
.cc-save-detail progress::-webkit-progress-value { background: var(--cc-gold); }
.cc-save-detail progress::-moz-progress-bar { background: var(--cc-gold); }
.cc-save-manager .cc-save-replace-note { padding: var(--cc-space-3); color: var(--cc-warning); }
.cc-save-load-actions { display: grid; gap: var(--cc-space-2); padding: 0 var(--cc-space-3) var(--cc-space-3); }
.cc-save-load-actions button { inline-size: 100%; min-inline-size: 0; }
.cc-save-management { margin: 0 var(--cc-space-3) var(--cc-space-3); border-top: 1px solid var(--cc-border); }
.cc-save-management summary { padding: var(--cc-space-2) 0; font-size: var(--cc-text-small); cursor: pointer; }
.cc-save-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-space-2); }
.cc-save-actions > button { min-inline-size: 0; inline-size: 100%; white-space: normal; }
.cc-save-statistics { margin: 0; padding: var(--cc-space-3); font-variant-numeric: tabular-nums; }
.cc-save-statistics > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cc-space-1) var(--cc-space-2); padding-block: var(--cc-space-3); border-bottom: 1px solid var(--cc-border); }
.cc-save-statistics dt { color: var(--cc-muted); }
.cc-save-statistics dd { min-inline-size: 0; margin: 0 0 0 auto; text-align: end; overflow-wrap: anywhere; }
#cc-save-feedback { color: var(--cc-warning); }
#cc-save-feedback:empty { display: none; }
.cc-save-approval-export { margin: var(--cc-space-3); white-space: normal; }
@media (max-width: 1100px) {
  .cc-save-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .cc-save-library { grid-row: 1 / span 2; }
  .cc-save-overview { grid-column: 2; }
}
@media (max-width: 760px) {
  .cc-save-layout { grid-template-columns: minmax(0, 1fr); }
  .cc-save-library { grid-row: auto; }
  .cc-save-overview { grid-column: auto; }
  .cc-save-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-save-record { padding: var(--cc-space-2); }
  .cc-save-record:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .cc-save-records, .cc-save-actions { grid-template-columns: minmax(0, 1fr); }
}

.cc-settlement-guide {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--cc-border);
  background: var(--cc-dark);
  color: var(--cc-text);
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.cc-settlement-guide h3 { margin: 0 0 8px; font-size: 18px; }
.cc-settlement-guide p { margin: 8px 0; font-size: 16px; }
.cc-settlement-guide dl { margin: 16px 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.cc-settlement-guide dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.cc-settlement-guide dt { min-width: 0; }
.cc-settlement-guide dd { margin: 0; text-align: right; flex-shrink: 0; }
.cc-settlement-guide .cc-settlement-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cc-border); font-weight: 700; }
.cc-settlement-guide .cc-settlement-note { color: var(--cc-muted); font-size: 14px; }
.cc-settlement-items .rcause { margin: 0; border: 0; }
@media (max-width: 480px) {
  .cc-settlement-guide { padding: 12px; }
  .cc-settlement-guide dl > div { flex-wrap: wrap; gap: 4px 12px; }
  .cc-settlement-guide dd { margin-left: auto; }
}

:root {
  --cc-font-body:system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --cc-font-title:'AppleMyungjo','Batang',Georgia,serif;
  --cc-text-body:calc(18px * var(--cc-text-scale, 1)); --cc-text-small:calc(14px * var(--cc-text-scale, 1)); --cc-text-label:calc(16px * var(--cc-text-scale, 1)); --cc-text-heading:calc(22px * var(--cc-text-scale, 1));
  --cc-space-1:4px; --cc-space-2:8px; --cc-space-3:12px; --cc-space-4:16px; --cc-space-6:24px; --cc-space-8:32px;
  --cc-window-shadow:inset 0 0 0 2px var(--cc-dark),inset 0 0 0 3px #3b575c,3px 3px 0 var(--cc-shadow);
  --cc-staff-width:164px; --cc-report-width:320px;
}
body:has(.cc-app) { font:var(--cc-text-body)/1.5 var(--cc-font-body); }
body:has(.cc-app)::before,body:has(.cc-app)::after { display:none; }
.cc-app.wrap { max-width:1480px; padding:var(--cc-space-4); }
.cc-app button { box-shadow:inset 0 0 0 2px var(--cc-dark); }
.cc-app button.primary,.cc-app button[aria-current='page'] { background:var(--cc-gold); color:var(--cc-bg); font-weight:700; box-shadow:inset 0 0 0 2px #6b5835,inset 0 0 0 3px #eed29a; }
.cc-window { border:1px solid var(--cc-border); background:var(--cc-panel); box-shadow:var(--cc-window-shadow); }
.cc-window-title { font-size:var(--cc-text-label); padding:var(--cc-space-3); margin:0; border-bottom:1px solid var(--cc-border); background:var(--cc-raised); }
.cc-window-body { padding:var(--cc-space-4); }
.cc-status { display:flex; align-items:center; gap:var(--cc-space-8); padding:var(--cc-space-2) 0 var(--cc-space-4); border-bottom:2px solid var(--cc-border); margin-bottom:var(--cc-space-3); }
.cc-status > div { min-width:0; }
.cc-status small,.cc-status strong { display:block; }
.cc-status small { color:var(--cc-muted); font-size:var(--cc-text-small); }
.cc-status strong { font-size:calc(20px * var(--cc-text-scale, 1)); }
.cc-brand { margin-right:auto; padding-right:var(--cc-space-4); border-right:1px solid var(--cc-border); }
.cc-brand span { font:26px var(--cc-font-title); color:var(--cc-gold); }
.cc-brand b { display:block; font-size:var(--cc-text-small); margin-top:var(--cc-space-1); }
.cc-game .cc-nav { display:flex; gap:var(--cc-space-1); margin-bottom:var(--cc-space-3); }
.cc-game .cc-nav button { min-width:112px; flex:0 1 auto; font-size:calc(16px * var(--cc-text-scale, 1)); padding:8px 16px; }
.cc-game .cc-nav button:last-child { margin-left:auto; }
.cc-game .cc-layout { display:grid; grid-template-columns:var(--cc-staff-width) minmax(0,1fr) var(--cc-report-width); gap:var(--cc-space-3); align-items:start; }
.cc-main,.cc-commands { min-width:0; }
.cc-location-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--cc-space-3); padding:var(--cc-space-3); margin-bottom:var(--cc-space-2); background:var(--cc-raised); }
.cc-location-heading > div { min-width:0; }
.cc-location-heading h2 { margin:0; color:var(--cc-gold); font-size:var(--cc-text-heading); }
.cc-location-heading p { margin:var(--cc-space-1) 0 0; color:var(--cc-muted); font-size:var(--cc-text-small); }
.cc-location-heading button { flex:none; font-size:var(--cc-text-label); }
.cc-scene-unavailable { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--cc-space-3); height:100%; padding:var(--cc-space-6); background:var(--cc-dark); color:var(--cc-muted); text-align:center; }
.cc-scene-unavailable p { max-width:80%; margin:0; font-size:var(--cc-text-label); }
.cc-game .cc-staff { display:block; padding-bottom:var(--cc-space-2); }
.cc-game .cc-staff h2 { font-size:var(--cc-text-label); margin:0; color:var(--cc-text); }
.cc-game .cc-person { width:calc(100% - 16px); margin:var(--cc-space-2) var(--cc-space-2) 0; padding:var(--cc-space-2); display:flex; align-items:center; gap:var(--cc-space-2); text-align:left; }
.cc-game .cc-person small,.cc-game .cc-person b { display:block; font-size:var(--cc-text-small); }
.cc-game .cc-person small { color:var(--cc-muted); font-size:calc(12px * var(--cc-text-scale, 1)); line-height:1.4; }
.cc-game .cc-person .cc-portrait { width:46px; height:56px; }
.cc-game .cc-person[aria-pressed='true'] b::before { content:none; }
.cc-game .cc-person[aria-pressed='true'] b { color:var(--cc-gold); }
.cc-portrait { display:inline-block; flex:none; width:54px; height:65px; background-image:url('art/strategy-officers.webp'); background-size:300% 200%; background-position:var(--portrait-x) var(--portrait-y); image-rendering:pixelated; border:1px solid var(--cc-border); }
.cc-game .cc-scene { position:relative; aspect-ratio:8/5; overflow:hidden; padding:3px; }
.cc-scene-art { width:100%; height:100%; display:block; object-fit:cover; image-rendering:pixelated; }
.cc-scene-caption { position:absolute; right:8px; bottom:8px; background:var(--cc-dark); padding:4px 8px; border:1px solid var(--cc-border); font-size:var(--cc-text-small); }
.cc-app .cc-map-place { position:absolute; transform:translate(-50%,-50%); white-space:nowrap; min-height:44px; font-size:var(--cc-text-label); background:var(--cc-dark); padding:8px 12px; box-shadow:2px 2px 0 var(--cc-shadow),inset 0 0 0 2px var(--cc-panel); }
.cc-app .cc-map-place:active { transform:translate(-50%,calc(-50% + 1px)); }
.cc-place-mark { display:inline-block; height:7px; width:7px; margin-right:6px; background:var(--cc-gold); }
.cc-dialogue { display:flex; align-items:flex-start; gap:var(--cc-space-4); padding:var(--cc-space-4); margin-top:var(--cc-space-3); min-height:164px; }
.cc-dialogue-portrait { width:88px; height:106px; }
.cc-dialogue h2 { margin:0 0 var(--cc-space-2); font-size:var(--cc-text-heading); color:var(--cc-gold); }
.cc-dialogue h2 small { display:block; font:var(--cc-text-small)/1.5 var(--cc-font-body); color:var(--cc-muted); }
.cc-dialogue p { margin:var(--cc-space-2) 0; font-size:var(--cc-text-label); }
.cc-game .cc-commands > .cc-dialogue { display:grid; grid-template-columns:60px minmax(0,1fr); gap:var(--cc-space-2) var(--cc-space-3); padding:var(--cc-space-3); margin:0; min-height:0; }
.cc-game .cc-commands .cc-dialogue-portrait { width:60px; height:72px; }
.cc-game .cc-commands .cc-dialogue > div { display:contents; }
.cc-game .cc-commands .cc-dialogue h2 { margin:0; align-self:center; }
.cc-game .cc-commands .cc-dialogue :is(p,.cc-report-help,.cc-report-actions) { grid-column:1/-1; margin:0; }
.cc-game .cc-report-actions { display:flex; flex-wrap:wrap; gap:var(--cc-space-2); }
.cc-game .cc-report-actions button { flex:1 1 100%; font-size:var(--cc-text-small); }
.cc-game .cc-report-help { border-top:1px solid var(--cc-border); }
.cc-game .cc-report-help summary { color:var(--cc-muted); font-size:var(--cc-text-small); }
.cc-game :is(.cc-field-ledgers,.cc-work-guide,.cc-mission,.cc-report-help) summary { padding:var(--cc-space-2) var(--cc-space-3); cursor:pointer; font-size:var(--cc-text-label); }
.cc-game .cc-field-ledgers { margin-top:var(--cc-space-2); }
.cc-game .cc-field-ledgers > summary,.cc-game .cc-work-guide > summary { color:var(--cc-text); background:var(--cc-raised); }
.cc-game .cc-work-guide .cc-quarter-guidance { border:0; box-shadow:none; padding:var(--cc-space-3); }
.cc-game .cc-work-guide .cc-guidance-brief { display:block; }
.cc-game .cc-work-guide .cc-guidance-brief > .cc-portrait { display:none; }
.cc-game .cc-work-guide .cc-quarter-guidance > button { width:100%; margin:var(--cc-space-1) 0; }
.cc-game .cc-mission .cc-window-body { padding:var(--cc-space-3); }
.cc-game .cc-mission .cc-window-body > p { margin:0; font-size:var(--cc-text-small); }
.cc-game .cc-mission summary { padding:var(--cc-space-2) 0 0; color:var(--cc-muted); font-size:var(--cc-text-small); }
.cc-report-kind { color:var(--cc-good); border-bottom:1px solid var(--cc-border); font-size:var(--cc-text-small); }
.cc-commands { display:grid; gap:var(--cc-space-3); }
.cc-command-list { display:grid; gap:var(--cc-space-2); padding:var(--cc-space-3); }
.cc-command-list button { text-align:left; padding-left:var(--cc-space-4); }
.cc-command-list button::before { content:'›'; margin-right:var(--cc-space-3); color:var(--cc-gold); }
.cc-mission p { margin:0 0 var(--cc-space-3); }
.cc-mission strong { display:block; color:var(--cc-gold); font-size:var(--cc-text-heading); }
.cc-rule { display:block; border-top:1px solid var(--cc-border); margin:var(--cc-space-4) 0; }
.cc-turn { margin-top:var(--cc-space-3); padding:var(--cc-space-3) var(--cc-space-4); display:flex; justify-content:space-between; gap:var(--cc-space-4); align-items:center; }
.cc-turn b { color:var(--cc-gold); }
.cc-turn p { margin:var(--cc-space-1) 0 0; color:var(--cc-muted); font-size:var(--cc-text-small); }
.cc-turn #go { position:static; width:220px; flex:none; min-height:56px; font-size:calc(20px * var(--cc-text-scale, 1)); }
.cc-app.cc-title.wrap { position:relative; max-width:none; min-height:100svh; padding:0; background:var(--cc-bg) url('art/strategy-office.png') center/cover; }
.cc-title-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,20,27,.94),rgba(6,20,27,.68) 35%,rgba(6,20,27,.07) 72%),linear-gradient(0deg,rgba(6,20,27,.75),transparent 50%); }
.cc-title-content { position:relative; padding:clamp(32px,7vh,80px) max(32px,8vw) 32px; min-height:100svh; display:flex; flex-direction:column; align-items:flex-start; }
.cc-title-heading > p:first-child { font-size:calc(14px * var(--cc-text-scale, 1)); color:var(--cc-gold); letter-spacing:.12em; margin:0 0 20px; }
.cc-title h1 { font-family:var(--cc-font-title); font-size:clamp(48px,5.7vw,84px); font-weight:400; margin:0; letter-spacing:.08em; text-shadow:3px 4px var(--cc-shadow); }
.cc-title-story { font-size:calc(20px * var(--cc-text-scale, 1)); line-height:1.8; margin:24px 0 32px; }
.cc-title-menu { width:300px; display:grid; gap:8px; padding:16px; }
.cc-title-menu p { font-size:calc(14px * var(--cc-text-scale, 1)); color:var(--cc-gold); margin:0 0 4px; letter-spacing:.08em; }
.cc-title-menu small { font-size:calc(12px * var(--cc-text-scale, 1)); color:var(--cc-muted); }
.cc-title-credit { margin-top:auto; padding-top:32px; font-size:calc(12px * var(--cc-text-scale, 1)); color:var(--cc-muted); }
.cc-title-edition { position:absolute; right:32px; bottom:32px; font-size:calc(12px * var(--cc-text-scale, 1)); color:var(--cc-text); }
.cc-back { margin-bottom:24px; }
.cc-app.cc-setup { max-width:1000px; }
.cc-setup .modecard { clip-path:none; border-color:var(--cc-border); }
.cc-setup .modecard.on { background:var(--cc-raised); color:var(--cc-text); }
.cc-setup .modecard .n,.cc-setup .modecard .d { font-size:calc(14px * var(--cc-text-scale, 1)); line-height:1.6; }
.cc-setup .modecard.primary .n,.cc-setup .modecard.primary .d { color:inherit; }
.cc-setup-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--cc-space-3); margin-block:var(--cc-space-4); }
.cc-setup-tools > button { min-inline-size:0; inline-size:100%; min-block-size:48px; }
.cc-setup-tools > .cc-audio-status { grid-column:1/-1; order:1; margin:0; }
@media(max-width:760px) {
  .cc-setup-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:480px) {
  .cc-setup-tools { grid-template-columns:minmax(0,1fr); }
}
.cc-table-scroll { max-width:100%; overflow-x:auto; margin-bottom:8px; }
.cc-table-scroll table { margin-bottom:0; }
table,.card table,.metrics table,.perf table { font-size:calc(14px * var(--cc-text-scale, 1)); font-variant-numeric:tabular-nums; }
.cc-skip { position:absolute; top:-100px; left:16px; z-index:100; background:var(--cc-gold); color:var(--cc-bg); padding:12px; }
.cc-skip:focus { top:8px; }
.cc-person[aria-pressed='true'] { border-color:var(--cc-gold); background:var(--cc-raised); }
.cc-game .cc-nav button[aria-current='page'] { background:var(--cc-gold); color:var(--cc-bg); }
.metrics tr.head.c-pl th,.metrics tr.head.c-stock th,.metrics tr.head.c-wc th,.metrics tr.head.c-debt th { background:var(--cc-raised); color:var(--cc-text); }
.cc-crew-portrait { width:150px; height:180px; max-width:100%; }
.crew-pic:has(.cc-portrait) { background:var(--cc-dark); }
.cc-face { width:64px; height:77px; }
@media(max-width:1100px) {
  .cc-game .cc-layout { grid-template-columns:minmax(0,1fr); }
  .cc-game .cc-main { grid-row:1; }
  .cc-game .cc-staff { grid-row:2; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
  .cc-game .cc-commands { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .cc-game .cc-commands > .cc-dialogue { grid-column:1/-1; }
  .cc-game .cc-report-actions button { flex-basis:auto; }
  .cc-staff .cc-window-title { grid-column:1/-1; }
  .cc-game .cc-person { flex-direction:column; text-align:center; }
  .cc-game .cc-person small { min-height:34px; }
  .cc-status { gap:16px; flex-wrap:wrap; }
  .cc-status strong { font-size:calc(18px * var(--cc-text-scale, 1)); }
  .cc-game .cc-nav button { min-width:0; flex:1; padding:8px; font-size:calc(16px * var(--cc-text-scale, 1)); }
}
@media(max-width:760px) {
  .cc-location-heading { flex-wrap:wrap; gap:var(--cc-space-2); }
  .cc-game .cc-scene[data-location-scene] { aspect-ratio:auto; display:flex; flex-wrap:wrap; gap:var(--cc-space-2); }
  .cc-game .cc-scene[data-location-scene] .cc-scene-art { height:auto; aspect-ratio:8/5; }
  .cc-game .cc-scene[data-location-scene] .cc-map-place { position:static; transform:none; flex:1 1 40%; white-space:normal; font-size:var(--cc-text-label); }
  .cc-game .cc-scene[data-location-scene] .cc-map-place:active { transform:translateY(1px); }
  .cc-game .cc-scene[data-location-scene] .cc-scene-caption { position:static; flex-basis:100%; }
  .cc-scene-unavailable { width:100%; height:auto; min-height:160px; }
  .cc-scene-unavailable p { max-width:100%; }
  :root {
    --cc-text-body:calc(17px * var(--cc-text-scale, 1)); --cc-title-mobile-size:clamp(36px,10vw,56px);
    --cc-ledger-label-width:124px; --cc-ledger-value-width:128px;
    --cc-turn-height:56px; --cc-layer-turn:41;
    --cc-crew-width:60px; --cc-crew-height:72px;
  }
  .cc-app.wrap { padding:8px; }
  .cc-app.cc-game.wrap { padding-bottom:calc(var(--cc-turn-height) + var(--cc-space-6) + env(safe-area-inset-bottom,0px)); }
  .cc-status { gap:8px 12px; padding:4px 4px 8px; }
  .cc-brand { width:100%; border:0; padding:0; }
  .cc-brand span { font-size:calc(24px * var(--cc-text-scale, 1)); }
  .cc-status > div:not(.cc-brand) { flex:1 1 40%; }
  .cc-status strong { font-size:calc(16px * var(--cc-text-scale, 1)); }
  .cc-app.cc-game .cc-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cc-app.cc-game .cc-nav button { padding:var(--cc-space-2) var(--cc-space-1); }
  .cc-game .cc-nav button:last-child { margin:0; }
  .cc-game .cc-layout { grid-template-columns:minmax(0,1fr); }
  .cc-main { grid-row:1; }
  .cc-game .cc-staff { grid-row:2; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cc-game .cc-person { flex-direction:column; padding:8px 4px; gap:4px; }
  .cc-game .cc-person .cc-portrait { width:34px; height:41px; }
  .cc-game .cc-person small { display:none; min-height:0; }
  .cc-game .cc-person .cc-staff-state:not([data-staff-state='neutral']) { display:block; }
  .cc-game .cc-person b { font-size:calc(13px * var(--cc-text-scale, 1)); }
  .cc-app .cc-map-place { padding:4px 6px; font-size:calc(12px * var(--cc-text-scale, 1)); }
  .cc-place-mark { width:5px; height:5px; margin-right:4px; }
  .cc-scene-caption { font-size:calc(11px * var(--cc-text-scale, 1)); padding:2px 4px; }
  .cc-dialogue { padding:12px; gap:12px; }
  .cc-dialogue-portrait { width:60px; height:72px; }
  .cc-dialogue h2 { font-size:calc(20px * var(--cc-text-scale, 1)); }
  .cc-game .cc-commands { grid-template-columns:minmax(0,1fr); }
  .cc-command-list { grid-template-columns:1fr 1fr; }
  .cc-command-list button { padding:8px; font-size:calc(16px * var(--cc-text-scale, 1)); }
  .cc-command-list button::before { margin-right:6px; }
  .cc-mission { display:block; }
  .cc-turn { flex-wrap:wrap; padding:12px; }
  .cc-turn #go {
    position:fixed; left:var(--cc-space-3); right:var(--cc-space-3);
    bottom:calc(var(--cc-space-3) + env(safe-area-inset-bottom,0px));
    z-index:var(--cc-layer-turn); width:auto; min-height:var(--cc-turn-height);
    padding:var(--cc-space-3) var(--cc-space-4); line-height:1.4;
  }
  body:has(dialog[open]) .cc-turn #go { display:none; }
  .cc-title-content { padding:40px 24px 24px; }
  .cc-title h1 { font-size:var(--cc-title-mobile-size); white-space:nowrap; }
  .cc-title-menu { width:min(300px,100%); }
  .cc-title-story { font-size:calc(18px * var(--cc-text-scale, 1)); }
  .cc-title-edition { right:16px; bottom:24px; }
  .cc-title-credit { max-width:50%; }
  .cc-crew-portrait { width:100px; height:120px; }
  .metrics.perf:has(> .cc-table-scroll) { overflow:visible; }
  .perf > .cc-table-scroll table {
    table-layout:fixed; width:calc(var(--cc-ledger-label-width) + 3 * var(--cc-ledger-value-width)); min-width:100%;
  }
  .perf > .cc-table-scroll tr > :first-child:not([colspan]) {
    position:sticky; left:0; z-index:1; width:var(--cc-ledger-label-width);
    white-space:normal; overflow-wrap:anywhere; background:var(--cc-panel);
    box-shadow:inset -1px 0 var(--cc-border);
  }
  .perf > .cc-table-scroll tr.sub td:first-child { padding-left:var(--cc-space-2); }
  .perf > .cc-table-scroll th:not([colspan]) { white-space:normal; }
  dialog.deck .crew { flex-direction:column; }
  dialog.deck .crew-pic {
    display:flex; align-items:center; gap:var(--cc-space-3); flex:auto; width:100%;
    padding:var(--cc-space-2) var(--cc-space-3); border-right:0;
  }
  dialog.deck .cc-crew-portrait { width:var(--cc-crew-width); height:var(--cc-crew-height); }
  dialog.deck .crew-plate {
    position:static; min-width:0; padding:0; background:transparent; color:var(--cc-text);
  }
  dialog.deck .crew-body { padding:var(--cc-space-3); }
  dialog.deck .crew-body .line { padding:0; font-size:var(--cc-text-body); }
}
@media (max-width:760px) and (max-height:540px) {
  .cc-app.cc-game.wrap { padding-bottom:var(--cc-space-3); }
  .cc-app.cc-game .cc-turn #go { position:static; width:100%; }
}
@media (min-width:640px) and (max-width:760px) and (max-height:540px) {
  .cc-game .cc-status { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .cc-game .cc-brand { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--cc-space-2); }
  .cc-game .cc-brand b { margin:0; }
  .cc-app.cc-game .cc-nav { grid-template-columns:repeat(6,minmax(0,1fr)); }
}

dialog.cc-system-menu { width: min(640px, calc(100% - 24px)); }
.cc-system-menu .cc-dossier-content { display: grid; gap: var(--cc-space-6); }
.cc-system-group { min-width: 0; }
.cc-system-group h3 { margin: 0 0 var(--cc-space-3); font-size: var(--cc-text-label); color: var(--cc-gold); }
.cc-system-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-space-2); }
.cc-system-actions > button { min-width: 0; text-align: left; }
.cc-system-audio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-space-2); margin-top: var(--cc-space-3); }
.cc-system-audio .cc-audio-mute, .cc-system-audio .cc-audio-status { grid-column: 1 / -1; margin: 0; }
.cc-system-audio input[type='checkbox'] { width: 24px; height: 24px; accent-color: var(--cc-gold); }
@media (max-width: 420px) {
  .cc-system-actions { grid-template-columns: minmax(0, 1fr); }
}

/* The accessible original stays complete; the decorative text reserves every line. */
.cc-reveal-original {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
[data-cc-reveal-pending] { visibility: hidden; }
[data-cc-reveal-tone="warning"],
[data-cc-reveal-highlight="warning"] { color: var(--cc-warning); }
[data-cc-reveal-highlight="number"] { color: var(--cc-gold); }
[data-cc-reveal-highlight] { font-weight: 600; }
.says:has([data-cc-reveal-pending])::before,
.says:has([data-cc-reveal-pending])::after { visibility: hidden; }
.cc-reveal-finish {
  display: block;
  width: auto;
  min-height: 32px;
  margin: 8px 0 0 auto;
  padding: 4px 10px;
  font-size: .78rem;
  line-height: 1.4;
  white-space: nowrap;
}
.cc-game .cc-commands .cc-dialogue .cc-reveal-finish { grid-column: 1 / -1; justify-self: end; }
.cc-reveal-finish:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  [data-cc-reveal-pending] { visibility: visible; }
  .says:has([data-cc-reveal-pending])::before,
  .says:has([data-cc-reveal-pending])::after { visibility: visible; }
}

:root {
  color-scheme: dark;
  --cc-bg: #0b1b24;
  --cc-panel: #142e38;
  --cc-raised: #213f48;
  --cc-dark: #10252f;
  --cc-border: #708c87;
  --cc-shadow: #06141b;
  --cc-text: #e9e1cc;
  --cc-muted: #b7c6bb;
  --cc-gold: #d8b56f;
  --cc-good: #acd5b7;
  --cc-warning: #f1ab90;
  --bg: var(--cc-bg); --panel: var(--cc-panel); --panel2: var(--cc-dark);
  --ink: var(--cc-text); --dim: var(--cc-muted); --line: var(--cc-border);
  --shade: var(--cc-shadow); --blue: var(--cc-gold); --blue-l: var(--cc-raised);
  --teal: var(--cc-good); --teal-l: var(--cc-raised);
  --ochre: var(--cc-gold); --ochre-l: var(--cc-dark);
  --rust: var(--cc-warning); --rust-l: var(--cc-dark);
  --good: var(--cc-good); --warn: var(--cc-warning); --cut: 0px;
  --sans: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --px: var(--sans);
}
body { background: var(--cc-bg); color: var(--cc-text); font: 16px/1.6 var(--sans); word-break: keep-all; overflow-wrap: anywhere; }
button, input, select, textarea { font-family: var(--sans); font-size: calc(16px * var(--cc-text-scale, 1)); }
button { min-height: 44px; border-radius: 0; clip-path: none; }
summary { min-height:44px; }
button.mini { font-size: calc(14px * var(--cc-text-scale, 1)); }
button:hover { background: var(--cc-raised); color: var(--cc-text); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; }
:focus-visible { outline: 3px solid var(--cc-gold); outline-offset: 4px; }
button.primary { background: var(--cc-gold); color: var(--cc-bg); border-color: var(--cc-gold); font-weight: 700; }
button.primary:hover { background: var(--cc-text); color: var(--cc-bg); }
input:not([type='range']), select { min-height: 44px; background: var(--cc-dark); color: var(--cc-text); }
h1 { font-family: Georgia, 'Batang', serif; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; font-weight: 700; }
h2 { font-size: calc(20px * var(--cc-text-scale, 1)); line-height: 1.4; font-weight: 700; }
.wrap { max-width: 1480px; padding: 24px 24px 48px; }
.card, .fold { border: 1px solid var(--cc-border); outline: 1px solid var(--cc-dark); outline-offset: -4px; background: var(--cc-panel); border-radius: 0; clip-path: none; box-shadow: 4px 4px 0 var(--cc-shadow); }
.card { padding: 16px; margin-bottom: 16px; }
.fold { margin-bottom: 16px; }
.fold > summary { min-height: 44px; padding: 12px 16px; font-size: calc(16px * var(--cc-text-scale, 1)); color: var(--cc-text); }
.fold > .card { margin: 16px; }
.hint, .sub, .note, .muted, .hallfoot { font-size: calc(14px * var(--cc-text-scale, 1)); line-height: 1.5; }
.yearban, .rectbl th, .ordt th, .metrics tr.head th, .c-now { background: var(--cc-raised); color: var(--cc-text); }
.metrics tr.head.c-sale th, .metrics tr.head.c-cost th, .metrics tr.head.c-scrap th,
.metrics tr.head.c-other th, .metrics tr.head.c-profit th, .metrics tr.head th {
  background: var(--cc-raised); color: var(--cc-text);
}
#toast { background: var(--cc-raised); color: var(--cc-text); border: 1px solid var(--cc-border); font-size: calc(16px * var(--cc-text-scale, 1)); }
.topbar #btn-motion { background: var(--cc-dark); color: var(--cc-text); }
.ordt tr.off td { opacity: 1; }
.choice button.on { background: var(--cc-good); color: var(--cc-dark); }
.ltop i.wip, .fx .rsk, .k-est, .kpi.k-warn .kv, .p-warn .prow .ps, .ordt td.warn, .fcnote .warn { color: var(--cc-gold); }
.p-warn .pbar span { background: var(--cc-gold); }
.card.proj.p-warn, .pwhy { border-color: var(--cc-gold); }
.bubble .who, .thanks, .rectbl th, .ordt th, .ordt th i, .ordt td.oname i,
.c-then i, .lbot .sub, .cell .sub, .crew-plate i, .fx span, .vlabel, .vwho span,
.yearban .chap, .dtile i, .dtile span, .bwho, .bwho em, .custbar .rel, .custbar .eff,
.custbar .leak, .custbar .leak i, .gbox .gl, .gbox .gn, .card.tops .top span,
.pwhy, .pwhy b, .mile .mwho, .mile .mnext, .mrow i, .mk, .rbox .rl, .rbox .rn,
.ctx .ck, .ctx .cn, .minis summary, .minis td, .ordt.fct th, .ordt.fct td,
.ordt td.capby, .perf td .sh, .perf td .rn, .fcnote, .fcnote.alt { font-size: calc(14px * var(--cc-text-scale, 1)); }
dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; border-color: var(--cc-border); background: var(--cc-panel); color: var(--cc-text); }
dialog .hint, dialog .note, dialog .who, dialog .n, dialog .d { font-size: calc(14px * var(--cc-text-scale, 1)); }
dialog button { min-height: 44px; }
.cc-input-error { color: var(--cc-warning); font-size: calc(14px * var(--cc-text-scale, 1)); }
.cc-input-error:empty { display: none; }
[aria-invalid='true'] { border-color: var(--cc-warning); }
dialog { box-sizing:border-box; width:min(960px, calc(100vw - 24px)); overflow-wrap:anywhere; }
dialog .cc-dossier-heading { background:var(--cc-panel); flex-wrap:wrap; }
dialog .cc-dossier-close { flex-shrink:0; }
dialog input, dialog select { max-width:100%; box-sizing:border-box; }
.cc-app button, dialog button { white-space:normal; overflow-wrap:anywhere; }
.cc-game .cc-nav { flex-wrap:wrap; }
.cc-dialogue > div, .cc-person > span, .cc-dossier-content { min-width:0; }
.cc-guidance-brief h3, .cc-quarter-guidance[data-guidance-stage='independent'] h2,
.cc-settlement-guide h3 { font-size:calc(18px * var(--cc-text-scale, 1)); }
.cc-settlement-guide p, .cc-settlement-guide dl { font-size:var(--cc-text-label); }
.cc-settlement-guide dd { min-width:0; max-width:100%; flex-shrink:1; overflow-wrap:anywhere; }
dialog .custbar .leak, dialog .custbar .eff, dialog .custbar .rel { white-space:normal; min-width:0; overflow-wrap:anywhere; }
.cc-settlement-guide .cc-settlement-note,
dialog.deck .cc-effect-label, dialog.deck .cc-effect-text, dialog.deck .cc-effect-note,
dialog.deck .cc-decision-effects { font-size:var(--cc-text-small); }
@media(max-width:760px) {
  .cc-game :is(button, input, select, textarea, a[href], summary, [tabindex]) {
    scroll-margin-block-end: calc(var(--cc-turn-height, 56px) + var(--cc-space-6) + env(safe-area-inset-bottom));
  }
  dialog.deck .cc-effect-note { font-size:var(--cc-text-label); }
}
@media(max-width:400px) {
  .cc-dialogue { flex-wrap:wrap; }
  .cc-app .cc-scene { aspect-ratio:auto; display:flex; flex-wrap:wrap; gap:8px; }
  .cc-app .cc-scene-art { height:auto; aspect-ratio:8/5; }
  .cc-app .cc-map-place { position:static; transform:none; flex:1 1 40%; }
  .cc-app .cc-map-place:active { transform:translateY(1px); }
  .cc-scene-caption { position:static; }
  .cc-game .cc-nav, .cc-command-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:300px) {
  .cc-game .cc-turn #go { position:static; width:100%; }
  .cc-title-content { padding:24px 8px; }
  .cc-title h1 { font-size:clamp(20px, 12vw, 36px); }
  .cc-title-credit { max-width:100%; }
  .cc-title-edition { position:static; display:block; padding:8px; }
  .cc-game .cc-staff { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cc-game .cc-nav, .cc-command-list { grid-template-columns:minmax(0,1fr); }
  .cc-app .cc-map-place { flex-basis:100%; }
  dialog .cc-dossier-heading { padding:8px; }
  dialog .cc-dossier-content { padding:8px; }
  dialog .bar, dialog .grid, dialog .dash { grid-template-columns:minmax(0,1fr); }
  dialog .bar .track { width:100%; }
  dialog .card, dialog .dtile { min-width:0; }
  dialog .ltop, dialog .lbot { flex-wrap:wrap; }
  dialog .ltop i, dialog .lbot .sub { white-space:normal; max-width:100%; }
  dialog .say, dialog .brief { flex-direction:column; }
  dialog .bubble, dialog .btext { min-width:0; max-width:100%; }
  dialog .warns .warn, dialog .urg .warn { flex-direction:column; align-items:stretch; }
  dialog .warns .warn i, dialog .urg .warn i { white-space:normal; }
  dialog .warns .warn span, dialog .urg .warn span { min-width:0; }
  dialog .ctx { grid-template-columns:minmax(0,1fr); }
  dialog .ctx .cv, dialog .ctx .cn { grid-column:auto; white-space:normal; }
}

.cc-table-scroll .cc-hq-watch-table { width:max-content; min-width:100%; table-layout:auto; }
.cc-hq-watch-table .cc-hq-watch-number { white-space:nowrap; overflow-wrap:normal; }

.cc-update-banner { margin: var(--cc-space-12, 12px) 0; padding: var(--cc-space-16, 16px); }
.cc-update-banner[hidden], .cc-update-manager [hidden] { display: none; }
.cc-update-manager [data-cc-update-status] { overflow-wrap: anywhere; }
.cc-update-manager .cc-dossier-content > button { margin: 4px; min-height: 44px; }
.cc-update-manager .install { margin-top: 16px; }