/* =========================================================
   걱앤정 — 픽셀 로펌 디자인 시스템
   연애인사청문회(heoui)의 디자인 시스템을 그대로 가져와 색만 걱앤정(네이비·블랙·골드)으로 바꿨다.
   변수 이름은 연애인사청문회와 같게 둔다(화면 코드를 옮겨 올 때 그대로 쓰도록). velvet = 걱앤정의 짙은 남색 계열.
   실제 로펌·기관의 상표와 혼동되는 표지는 쓰지 않는다.
   ========================================================= */
:root {
  --ink: #1b1424;
  --ink2: #3a2f45;
  --muted: #625670; /* 종이 바탕 위 대비 5.6:1 이상 */
  --paper: #fbf6ea;
  --paper2: #f3e8cf;
  --paper3: #e2d0a6;
  --line: #c9b48a;
  --velvet: #1f2b5c;
  --velvet2: #2e3f80;
  --velvet-dk: #0c1230;
  --gold: #e3b54f;
  --gold2: #b07f25;
  --gold-dk: #8a6418;
  --gold-lt: #f8e09a;
  --navy: #141c3a;
  --navy2: #22305e;
  --night: #080b18;
  --teal: #4f8b84;
  --rose: #ec5f86;
  --red: #c8323c;
  --green: #3f8f5a;
  --orange: #d9822b;
  --wood: #7a4a2a;
  --wood2: #4f2e18;
  --font-ui: 'Galmuri11', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --font-title: 'Galmuri14', 'Galmuri11', 'Apple SD Gothic Neo', sans-serif;
  --font-small: 'Galmuri9', 'Galmuri11', sans-serif;
  --font-mono: 'GalmuriMono11', 'Galmuri11', monospace;
  --font-doc: 'Nanum Myeongjo', 'AppleMyungjo', 'Batang', serif;
  /* 노치·상태 표시줄·홈 막대 자리. iOS 는 env(), Android(Capacitor 8 SystemBars)는 웹뷰가 140 이상이면 env() 와 주입 변수가 같고,
     그보다 낮으면 웹뷰를 그만큼 띄우고 둘 다 0 이 된다 → 둘 중 큰 값이면 어느 쪽이든 한 번만 비운다 */
  --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --tabbar-h: 62px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: none;
  overscroll-behavior: none;
  word-break: keep-all; /* 한글은 단어 중간에서 줄을 바꾸지 않는다 */
  overflow-wrap: anywhere;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
canvas.px, img.px { image-rendering: pixelated; }

#app {
  position: relative;
  max-width: 480px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--velvet-dk);
}
@media (min-width: 481px) {
  body { background: radial-gradient(circle at 50% 30%, #18224a 0%, #04060d 70%); }
  #app { box-shadow: 0 0 0 4px #000, 0 0 60px rgba(0,0,0,.6); }
}

/* ---------- screen scaffold ---------- */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: screen-in .22s steps(4) both;
}
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.screen-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(24px + var(--safe-bottom));
}
.with-tabbar .screen-body { padding-bottom: calc(var(--tabbar-h) + 24px + var(--safe-bottom)); }
.bg-velvet { background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 8px),
  linear-gradient(var(--velvet) , var(--velvet-dk)); }
.bg-navy { background: linear-gradient(var(--navy), var(--night)); }
.bg-paper { background: var(--paper2); }
.bg-wood { background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 3px, transparent 3px 22px),
  linear-gradient(#6b3f22, #4a2913); }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: calc(10px + var(--safe-top)) 12px 10px;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 3px solid #000;
  box-shadow: inset 0 -3px 0 var(--velvet);
  min-height: 52px;
  z-index: 3;
}
.topbar h1 { flex: 1; margin: 0; font-family: var(--font-title); font-size: 15px; font-weight: 400; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .sub { display:block; font-family: var(--font-small); font-size: 10px; color: var(--gold-lt); opacity: .8; }
.icon-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.icon-btn img { width: 24px; height: 24px; }
.stamp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--paper); color: var(--ink);
  padding: 3px 8px 3px 4px; font-size: 13px; cursor: pointer; border: 0;
  box-shadow: 0 0 0 2px #000, inset -2px -2px 0 var(--paper3);
}
.stamp-chip img { width: 20px; height: 20px; }

/* ---------- tab bar ---------- */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--ink); border-top: 3px solid #000;
  box-shadow: inset 0 3px 0 var(--velvet);
  z-index: 10;
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: #a99cb5; text-decoration: none; font-size: 11px; position: relative;
}
.tabbar a img { width: 26px; height: 26px; opacity: .7; }
.tabbar a.on { color: var(--gold-lt); }
.tabbar a.on img { opacity: 1; }
.tabbar a.on::before { content: ''; position: absolute; top: 3px; width: 24px; height: 3px; background: var(--gold); }
.tabbar .dot { position: absolute; top: 8px; right: calc(50% - 20px); width: 8px; height: 8px; background: var(--rose); box-shadow: 0 0 0 2px #000; }

/* ---------- pixel boxes ---------- */
.pbox {
  position: relative;
  background: var(--paper);
  margin: 4px 4px 14px;
  padding: 14px;
  box-shadow:
    inset -3px -3px 0 var(--paper3),
    inset 3px 3px 0 #fff,
    -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink);
}
.pbox.dark { background: var(--ink2); color: var(--paper); box-shadow: inset -3px -3px 0 #241b2e, inset 3px 3px 0 #4f425c, -4px 0 0 0 #000, 4px 0 0 0 #000, 0 -4px 0 0 #000, 0 4px 0 0 #000; }
.pbox.gold { background: var(--gold-lt); box-shadow: inset -3px -3px 0 var(--gold), inset 3px 3px 0 #fff6d6, -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink); }
.pbox.velvet { background: var(--velvet); color: var(--paper); box-shadow: inset -3px -3px 0 var(--velvet-dk), inset 3px 3px 0 var(--velvet2), -4px 0 0 0 #000, 4px 0 0 0 #000, 0 -4px 0 0 #000, 0 4px 0 0 #000; }
.pbox h2, .pbox h3 { margin: 0 0 8px; font-family: var(--font-title); font-weight: 400; }
.pbox h2 { font-size: 16px; }
.pbox h3 { font-size: 14px; }

/* ---------- buttons ---------- */
.btn {
  --b: var(--gold); --bl: var(--gold-lt); --bd: var(--gold2); --fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 10px 16px; margin: 4px;
  background: var(--b); color: var(--fg);
  border: 0; cursor: pointer; text-decoration: none; font-size: 15px; line-height: 1.2;
  box-shadow:
    inset -4px -4px 0 0 var(--bd), inset 4px 4px 0 0 var(--bl),
    -3px 0 0 0 #000, 3px 0 0 0 #000, 0 -3px 0 0 #000, 0 3px 0 0 #000;
  user-select: none; -webkit-user-select: none;
  transition: transform .05s steps(1);
}
.btn:active { transform: translateY(2px); box-shadow: inset 4px 4px 0 0 var(--bd), -3px 0 0 0 #000, 3px 0 0 0 #000, 0 -3px 0 0 #000, 0 3px 0 0 #000; }
.btn[disabled] { --b: #9a8fa3; --bl: #b9afc1; --bd: #6f6578; --fg: #3b3442; cursor: not-allowed; }
.btn.block { display: flex; width: calc(100% - 8px); }
.btn.red { --b: var(--velvet2); --bl: #4a5ea8; --bd: var(--velvet-dk); --fg: var(--paper); }
.btn.navy { --b: var(--navy2); --bl: #3d4b8a; --bd: #11162e; --fg: var(--paper); }
.btn.paper { --b: var(--paper); --bl: #fff; --bd: var(--paper3); --fg: var(--ink); }
.btn.green { --b: #4fa56c; --bl: #7ccc94; --bd: #2a6b40; --fg: #fff; }
.btn.ghost { --b: transparent; --bl: transparent; --bd: transparent; --fg: var(--paper); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.btn.sm { min-height: 40px; padding: 6px 10px; font-size: 13px; box-shadow: inset -3px -3px 0 0 var(--bd), inset 3px 3px 0 0 var(--bl), -2px 0 0 0 #000, 2px 0 0 0 #000, 0 -2px 0 0 #000, 0 2px 0 0 #000; }
.btn .cost { font-size: 12px; opacity: .85; display: inline-flex; align-items: center; gap: 2px; }
.btn .cost img { width: 16px; height: 16px; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }

/* ---------- forms ---------- */
.field { margin: 0 0 16px; }
.field > label, .field > .label { display: block; font-size: 13px; margin: 0 0 6px; color: var(--ink2); }
.field .hint, .hint.solo { font-size: 11px; color: var(--muted); margin-top: 4px; font-family: var(--font-small); }
.req::after { content: ' *'; color: var(--red); }
.input, select.input, textarea.input {
  width: 100%; padding: 10px 10px; background: #fff; border: 0; outline: none; border-radius: 0;
  box-shadow: inset 2px 2px 0 var(--paper3), 0 0 0 2px var(--ink);
  font-size: 15px; -webkit-appearance: none; appearance: none;
}
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.input:focus { box-shadow: inset 2px 2px 0 var(--paper3), 0 0 0 2px var(--ink), 0 0 0 5px var(--gold); }
textarea.input { min-height: 80px; resize: vertical; line-height: 1.5; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 11px; background: #fff; border: 0; cursor: pointer; font-size: 13px;
  box-shadow: 0 0 0 2px var(--ink), inset -2px -2px 0 var(--paper3);
  margin: 2px;
}
.chip.on { background: var(--velvet2); color: #fff; box-shadow: 0 0 0 2px var(--ink), inset -2px -2px 0 var(--velvet-dk), inset 2px 2px 0 #4a5ea8; }
.chip.on.gold { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), inset -2px -2px 0 var(--gold2), inset 2px 2px 0 var(--gold-lt); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; box-shadow: 0 0 0 2px var(--ink); background: #fff; }
.seg button { border: 0; background: transparent; padding: 8px 4px; font-size: 12px; cursor: pointer; border-right: 2px solid var(--ink); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--ink); color: var(--gold-lt); }
.seg.mode button.on[data-v="must"] { background: var(--red); color: #fff; }
.seg.mode button.on[data-v="prefer"] { background: var(--gold); color: var(--ink); }
.seg.mode button.on[data-v="none"] { background: #8d8296; color: #fff; }

.check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 2px dashed var(--paper3); cursor: pointer; }
.check input { display: none; }
.check .box { flex: none; width: 20px; height: 20px; background: #fff; box-shadow: 0 0 0 2px var(--ink); margin-top: 1px; position: relative; }
.check input:checked + .box { background: var(--velvet2); }
.check input:checked + .box::after { content: ''; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; background:
  linear-gradient(#fff,#fff) 0 6px/3px 3px no-repeat, linear-gradient(#fff,#fff) 3px 9px/3px 3px no-repeat,
  linear-gradient(#fff,#fff) 6px 6px/3px 3px no-repeat, linear-gradient(#fff,#fff) 9px 3px/3px 3px no-repeat, linear-gradient(#fff,#fff) 9px 0/3px 3px no-repeat; }
.check .t { font-size: 13px; }
.check .t small { display: block; color: var(--muted); font-size: 11px; font-family: var(--font-small); margin-top: 2px; line-height: 1.5; }
.tag-req { color: var(--red); }
.tag-opt { color: var(--muted); }

/* scale (Likert) */
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0 4px; }
.scale button { height: 44px; border: 0; background: #fff; cursor: pointer; box-shadow: 0 0 0 2px var(--ink), inset -2px -2px 0 var(--paper3); font-size: 12px; }
.scale button.on { background: var(--velvet2); color: #fff; box-shadow: 0 0 0 2px var(--ink), inset -2px -2px 0 var(--velvet-dk); }
.scale-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); gap: 12px; }
.scale-labels span:last-child { text-align: right; }
.opt-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.opt-list button { text-align: left; padding: 12px 14px; background: #fff; border: 0; cursor: pointer; box-shadow: 0 0 0 2px var(--ink), inset -3px -3px 0 var(--paper3); font-size: 14px; }
.opt-list button.on { background: var(--velvet2); color: #fff; box-shadow: 0 0 0 2px var(--ink), inset -3px -3px 0 var(--velvet-dk); }

/* ---------- progress ---------- */
.progress { height: 12px; background: var(--ink); padding: 2px; box-shadow: 0 0 0 2px #000; }
.progress > i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, var(--gold2) 6px 8px); transition: width .25s steps(6); }
.form-head { padding: 12px 16px 10px; background: var(--ink); color: var(--paper); }
.form-head .form-no { font-family: var(--font-small); font-size: 10px; color: var(--gold-lt); letter-spacing: 1px; }
.form-head h2 { margin: 2px 0 8px; font-family: var(--font-title); font-weight: 400; font-size: 17px; }
.form-foot { padding: 10px 12px calc(10px + var(--safe-bottom)); background: var(--ink); display: flex; gap: 6px; border-top: 3px solid #000; }
.form-foot .btn { flex: 1; }

/* ---------- document (공문/보고서) ---------- */
.doc {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(160,130,80,.08) 27px 28px),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-doc);
  font-size: 14.5px; line-height: 1.75;
  padding: 22px 18px 26px;
  margin: 4px 4px 16px;
  box-shadow: -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), 8px 8px 0 0 rgba(0,0,0,.35);
}
.doc .doc-org { text-align: center; font-family: var(--font-ui); font-size: 11px; letter-spacing: 3px; color: var(--velvet); }
.doc .doc-title { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 6px; margin: 4px 0 12px; }
.doc .doc-title.sm { font-size: 18px; letter-spacing: 3px; }
.doc hr.double { border: 0; border-top: 3px double var(--ink); margin: 10px 0 14px; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.doc table.meta { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.doc table.meta th { width: 30%; text-align: left; font-weight: 700; padding: 5px 6px; background: var(--paper2); border: 1px solid var(--line); vertical-align: top; }
.doc table.meta td { padding: 5px 8px; border: 1px solid var(--line); }
/* 위원장 지명 보고(숫자만): 단계 이름이 길어 왼쪽 칸을 넓히고 숫자는 오른쪽 정렬 */
.doc table.meta.steps th { width: 72%; font-weight: 400; }
.doc table.meta.steps td { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.doc table.meta.steps tr:last-child th, .doc table.meta.steps tr:last-child td { font-weight: 700; color: var(--velvet); }
.doc h3 { font-family: var(--font-doc); font-weight: 800; font-size: 15.5px; margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--ink); }
.doc h3 .no { color: var(--velvet); margin-right: 4px; }
.doc h4 { font-size: 14.5px; margin: 14px 0 6px; font-weight: 800; }
.doc p { margin: 6px 0; }
.doc ul { margin: 6px 0; padding-left: 18px; }
.doc li { margin: 3px 0; }
.doc .sign { text-align: right; margin-top: 18px; font-weight: 800; position: relative; padding-right: 44px; }
.doc .seal { position: absolute; right: -6px; top: -22px; width: 64px; height: 64px; opacity: .85; mix-blend-mode: multiply; transform: rotate(-8deg); }
.doc .footnote { font-size: 11.5px; color: var(--muted); margin-top: 16px; font-family: var(--font-ui); line-height: 1.6; }
.doc .center { text-align: center; }
.doc .ui { font-family: var(--font-ui); }
.stamp {
  display: inline-block; font-family: var(--font-title); font-size: 13px; padding: 2px 8px; transform: rotate(-4deg);
  color: var(--red); box-shadow: 0 0 0 2px var(--red), inset 0 0 0 1px var(--red); background: rgba(255,255,255,.4);
}
.stamp.big { font-size: 22px; padding: 4px 14px; box-shadow: 0 0 0 3px var(--red), inset 0 0 0 2px var(--red); }
.stamp.ok { color: var(--red); }
.stamp.no { color: #555; box-shadow: 0 0 0 2px #555, inset 0 0 0 1px #555; }
.stamp.mix { color: var(--orange); box-shadow: 0 0 0 2px var(--orange), inset 0 0 0 1px var(--orange); }
.stamp.hold { color: var(--muted); box-shadow: 0 0 0 2px var(--muted), inset 0 0 0 1px var(--muted); }
.stamp-in { animation: stamp-in .35s steps(5) both; }
@keyframes stamp-in { 0% { transform: scale(2.4) rotate(-12deg); opacity: 0; } 70% { transform: scale(.92) rotate(-4deg); opacity: 1; } 100% { transform: scale(1) rotate(-4deg); } }

.mask { font-family: var(--font-mono); letter-spacing: 1px; color: var(--ink2); background: repeating-linear-gradient(45deg, rgba(27,20,36,.06) 0 3px, transparent 3px 6px); padding: 0 3px; }
.lock-note { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-small); font-size: 10px; color: var(--velvet); }
.lock-note img { width: 12px; height: 12px; }

/* bars */
.bars { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-ui); }
.bar { display: grid; grid-template-columns: 74px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; }
.bar .track { height: 12px; background: #fff; box-shadow: 0 0 0 2px var(--ink); position: relative; }
.bar .track i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, var(--velvet2) 0 5px, var(--velvet) 5px 6px); }
.bar .track i.hi { background: repeating-linear-gradient(90deg, var(--green) 0 5px, #2d6e43 5px 6px); }
.bar .track i.lo { background: repeating-linear-gradient(90deg, #9a8fa3 0 5px, #7b6f86 5px 6px); }
.bar .track .pass { position: absolute; left: 60%; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .45; }
.bar .v { text-align: right; font-family: var(--font-mono); }

/* opinions */
.op { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.op:last-child { border-bottom: 0; }
.op img { width: 44px; height: 44px; background: var(--paper2); box-shadow: 0 0 0 2px var(--ink); }
.op .who { font-family: var(--font-ui); font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.op .who b { font-weight: 700; }
.op .who small { color: var(--muted); font-size: 10.5px; font-family: var(--font-small); }
.op .txt { font-size: 13.5px; margin-top: 3px; }

/* ---------- splash: TV 한 대 + 위원 8인 ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.splash { color: #fff; overflow: hidden; background:
  radial-gradient(70% 45% at 50% 34%, rgba(70,120,255,.28), rgba(10,20,70,0) 70%),
  repeating-linear-gradient(90deg, rgba(120,160,255,.05) 0 1px, transparent 1px 28px),
  repeating-linear-gradient(0deg, rgba(120,160,255,.05) 0 1px, transparent 1px 28px),
  linear-gradient(#040a24, #0a1844 55%, #050b26); }
.splash .bgm-btn { position: absolute; z-index: 3; top: calc(10px + var(--safe-top)); right: 10px; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(6,14,48,.7); border: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(110,160,255,.45); cursor: pointer; opacity: .8; }
.splash .bgm-btn.on { opacity: 1; }
.splash .bgm-btn img { width: 18px; height: 18px; }
.tvsplash { display: block; }
/* TV 를 화면 정가운데에: 위·아래 칸을 같은 비율로 나누고, 아래 내용이 길면 그만큼만 밀린다 */
.tvsplash .sp-grid { position: absolute; inset: 0; overflow-y: auto; display: grid; grid-template-rows: minmax(min-content, 1fr) auto minmax(min-content, 1fr); justify-items: center; padding: calc(10px + var(--safe-top)) 16px calc(10px + var(--safe-bottom)); }
.tvsplash .sp-top { align-self: end; padding: 44px 0 16px; }
.tvsplash .sp-tvbox { width: min(100%, 420px); filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.tvsplash .sp-tvbox .tv-wrap { margin: 0; }
.tvsplash .sp-bottom { align-self: start; width: min(100%, 420px); display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.open-office { display: grid; grid-template-columns: 112px 1fr; align-items: stretch; width: 100%; padding: 0; border: 0; cursor: pointer; text-align: left; font: inherit; color: #fff; background: linear-gradient(135deg, #2f4fa6, #22397c); box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(160,190,255,.35); overflow: hidden; }
.open-office img { width: 112px; height: 105px; object-fit: cover; object-position: center top; image-rendering: pixelated; display: block; }
.open-office .oo-text { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 14px; }
.open-office b { font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: .5px; }
.open-office small { font-size: 12.5px; color: #c9d6f5; }
.open-office em { font-style: normal; font-size: 13.5px; line-height: 1.45; margin-top: 2px; }
.open-office:active { transform: translateY(1px); }
.tvsplash .sp-members { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.tvsplash .sp-mem { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0 5px; border: 0; cursor: pointer; font: inherit; color: #fff; background: rgba(10,20,60,.7); box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(120,160,255,.3); min-width: 0; }
.tvsplash .sp-mem img { width: 34px; height: 34px; image-rendering: pixelated; background: linear-gradient(#22325f, #121a3a); }
.tvsplash .sp-mem b { font-weight: 400; font-size: 10px; white-space: nowrap; }
.tvsplash .sp-mem span { font-family: var(--font-small); font-size: 8.5px; color: #9fb7ef; white-space: nowrap; }
.tvsplash .cta { display: flex; flex-direction: column; gap: 2px; }
.tvsplash .cta .btn { font-size: 15px; letter-spacing: 1px; }
.splash .sp-link { background: none; border: 0; color: #b9c6e8; font: inherit; font-size: 12.5px; padding: 10px 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.splash .disclaimer { font-family: var(--font-small); font-size: 10px; text-align: center; color: rgba(205,214,240,.6); line-height: 1.5; }
.tv-screen.off { background: #020203; }
.tv-screen.off::before { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; transform: translate(-50%, -50%); background: rgba(255,255,255,.5); box-shadow: 0 0 8px rgba(255,255,255,.6); }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- home ---------- */
.vacancy { text-align: center; }
.vacancy .post { font-family: var(--font-title); font-size: 18px; margin: 6px 0; }
.vacancy .badge-vacant { display: inline-block; background: var(--red); color: #fff; padding: 2px 8px; font-size: 12px; box-shadow: 0 0 0 2px #000; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.list-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 2px dashed var(--paper3); cursor: pointer; text-decoration: none; color: inherit; }
.list-item:last-child { border-bottom: 0; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .t1 { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .t2 { font-size: 11px; color: var(--muted); font-family: var(--font-small); }
.list-item .arrow { font-size: 16px; color: var(--muted); }
.section-title { color: var(--gold-lt); font-family: var(--font-title); font-size: 14px; margin: 18px 4px 10px; display: flex; align-items: center; gap: 6px; text-shadow: 2px 2px 0 #000; }
.section-title img { width: 20px; height: 20px; }
.empty { text-align: center; color: var(--muted); font-size: 13px; padding: 14px 0; }
.unread { display: inline-block; width: 8px; height: 8px; background: var(--rose); box-shadow: 0 0 0 2px #000; margin-right: 4px; vertical-align: middle; }

/* ---------- committee ---------- */
.member-card { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; }
.member-card img { width: 72px; height: 72px; background: linear-gradient(#8a5a35, #5b3520); box-shadow: 0 0 0 3px var(--ink); }
.member-card .nm { font-family: var(--font-title); font-size: 16px; }
.member-card .former { font-size: 11px; color: var(--velvet); font-family: var(--font-small); }
.member-card .dom { display: inline-block; margin: 6px 0 4px; font-size: 12px; background: var(--ink); color: var(--gold-lt); padding: 1px 6px; }
.member-card p { margin: 4px 0 0; font-size: 12.5px; }
.member-card .quote { color: var(--velvet); font-size: 12px; }

/* ---------- hearing ---------- */
.hearing { background: #0b0a14; color: var(--paper); }
.broadcast { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #000; flex: none; overflow: hidden; }
.broadcast canvas { width: 100%; height: 100%; display: block; }
.broadcast .bug { position: absolute; left: 8px; top: 8px; display: flex; gap: 6px; align-items: center; font-family: var(--font-small); font-size: 10px; }
.broadcast .live { background: var(--red); color: #fff; padding: 1px 6px; box-shadow: 0 0 0 2px #000; }
.broadcast .ch { background: rgba(0,0,0,.6); padding: 1px 6px; }
.broadcast .clock { position: absolute; right: 8px; top: 8px; font-family: var(--font-mono); font-size: 11px; background: rgba(0,0,0,.6); padding: 1px 6px; }
.broadcast .lower3 { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 8px 8px; transition: opacity .2s steps(3); }
.broadcast .lower3 .l3-name { display: inline-block; background: var(--velvet2); color: #fff; font-family: var(--font-title); font-size: 13px; padding: 2px 8px; box-shadow: 0 0 0 2px #000; }
.broadcast .lower3 .l3-role { display: inline-block; background: var(--paper); color: var(--ink); font-size: 10.5px; padding: 2px 8px; box-shadow: 0 0 0 2px #000; margin-left: -2px; }
.broadcast .lower3 .l3-sub { margin-top: 5px; background: rgba(10,8,20,.86); padding: 5px 8px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 0 0 2px #000; min-height: 22px; max-height: 58px; overflow: hidden; }
.broadcast .phase { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); background: var(--ink); color: var(--gold-lt); font-family: var(--font-title); font-size: 18px; padding: 8px 16px; box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px #000; white-space: nowrap; animation: phase-in 1.6s steps(8) both; pointer-events: none; }
@keyframes phase-in { 0% { opacity: 0; transform: translate(-50%,-50%) scale(1.4); } 15% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

.cand-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px 6px; background: var(--ink); flex: none; border-bottom: 3px solid #000; }
.cand-tab { position: relative; background: var(--ink2); padding: 4px 2px 5px; text-align: center; box-shadow: 0 0 0 2px #000; cursor: pointer; border: 0; color: var(--paper); }
.cand-tab.on { background: var(--velvet); box-shadow: 0 0 0 2px var(--gold); }
.cand-tab img { width: 30px; height: 30px; display: block; margin: 0 auto 2px; background: #2c2338; }
.cand-tab .no { font-size: 10px; font-family: var(--font-small); white-space: nowrap; overflow: hidden; }
.cand-tab .mask { color: var(--gold-lt); background: none; padding: 0; letter-spacing: 0; }
.cand-tab .gauge { height: 5px; background: #000; margin: 3px 3px 0; }
.cand-tab .gauge i { display: block; height: 100%; background: var(--gold); transition: width .4s steps(5); }
.cand-tab .vstamp { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%) rotate(-10deg); font-family: var(--font-title); font-size: 11px; padding: 0 3px; background: rgba(255,255,255,.88); white-space: nowrap; }
.cand-tab .vstamp.ok { color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.cand-tab .vstamp.no { color: #444; box-shadow: 0 0 0 2px #444; }
.cand-tab .vstamp.mix { color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.cand-tab .crown { position: absolute; top: -6px; right: -2px; width: 16px; height: 16px; }
/* 한 쌍 검증(매칭 구조 v2): 후보자 1인 + 위원장(지명권자·표결 불참) + 표결판 위원 7인 */
.pair-panel { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 6px; padding: 6px; background: var(--ink); flex: none; border-bottom: 3px solid #000; }
.pair-panel .pp-cand img.face { width: 34px; height: 34px; }
.pp-cand .pp-seal { position: absolute; top: -5px; right: -4px; font-family: var(--font-title); font-size: 11px; line-height: 1; padding: 3px 4px; color: #fff; background: var(--red); box-shadow: 0 0 0 2px #000; transform: rotate(8deg); }
.pp-board { background: var(--ink2); box-shadow: 0 0 0 2px #000; padding: 3px 4px 4px; min-width: 0; transition: box-shadow .3s steps(3); }
.pp-board.res-ok { box-shadow: 0 0 0 2px var(--red); }
.pp-board.res-no { box-shadow: 0 0 0 2px #8a8494; }
.pp-board.res-mix { box-shadow: 0 0 0 2px var(--orange); }
.pp-head { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-family: var(--font-small); font-size: 11px; color: var(--paper); white-space: nowrap; }
.pp-board.counting .pp-chair em { display: none; } /* 표결 중에는 머리줄을 표 수에 양보 */
.pp-chair { display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; }
.pp-chair img { width: 16px; height: 16px; background: #2c2338; flex: none; }
.pp-chair b { color: var(--gold-lt); font-weight: 400; }
.pp-chair em { font-style: normal; color: #b9adc8; margin-left: 3px; padding: 0 3px; box-shadow: 0 0 0 1px #6c5d7c; }
.pp-chair.speaking img { box-shadow: 0 0 0 1.5px var(--gold); }
.pp-count { color: var(--gold-lt); flex: none; }
.pp-count .ok { color: #ff9aa0; }
.pp-count .no { color: #cfc6da; }
.pp-votes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 3px; }
.pv { position: relative; display: flex; flex-direction: column; align-items: center; background: #241b2f; box-shadow: 0 0 0 1px #000; padding: 2px 0 1px; min-width: 0; }
.pv img { width: 18px; height: 18px; background: #2c2338; }
.pv i { font-style: normal; font-family: var(--font-small); font-size: 10.5px; line-height: 13px; color: #d8cde4; white-space: nowrap; overflow: hidden; max-width: 100%; }
.pv b { font-family: var(--font-small); font-weight: 400; font-size: 10.5px; min-height: 13px; line-height: 13px; color: #a99bb8; white-space: nowrap; }
.pv.speaking { box-shadow: 0 0 0 1.5px var(--gold); background: #3a2b48; }
.pv.ok b { color: #ff9aa0; }
.pv.no b { color: #cfc6da; }
.pv.hold b { color: var(--orange); }
.pv.voted { animation: pv-in .3s steps(3) both; }
.pv.voted.ok { background: #5a1a2a; box-shadow: 0 0 0 1.5px var(--red); }
.pv.voted.no { background: #2c2a33; box-shadow: 0 0 0 1.5px #8a8494; }
.pv.voted.hold { box-shadow: 0 0 0 1.5px var(--orange); }
@keyframes pv-in { from { transform: scale(1.3); } to { transform: none; } }

.minutes { flex: 1; overflow-y: auto; background: var(--paper); color: var(--ink); padding: 12px 12px 90px; font-family: var(--font-doc); font-size: 14px; line-height: 1.7; }
.minutes .m-head { text-align: center; font-family: var(--font-ui); border-bottom: 3px double var(--ink); padding-bottom: 8px; margin-bottom: 10px; }
.minutes .m-head .t { font-family: var(--font-title); font-size: 15px; }
.minutes .m-head .s { font-size: 11px; color: var(--muted); }
.mline { display: grid; grid-template-columns: 34px 1fr; gap: 8px; margin: 0 0 10px; animation: mline-in .18s steps(3) both; }
@keyframes mline-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.mline img { width: 34px; height: 34px; background: var(--paper2); box-shadow: 0 0 0 2px var(--ink); }
.mline .spk { font-family: var(--font-ui); font-size: 12px; color: var(--velvet); }
.mline .spk b { color: var(--ink); font-weight: 700; }
.mline .txt { font-size: 14px; }
.mline.chair .spk { color: var(--navy2); }
.mline.chair .txt { font-weight: 700; }
.mline.pres .spk { color: var(--teal); }
.mnote { text-align: center; font-size: 12.5px; color: var(--ink2); margin: 4px 0 12px; font-family: var(--font-doc); }
.mnote.quote { text-align: left; background: var(--paper2); padding: 8px 10px; box-shadow: inset 3px 0 0 var(--line); font-size: 13px; }
.mstage { text-align: center; margin: 16px 0 12px; font-family: var(--font-ui); font-size: 12px; color: #fff; background: var(--ink); padding: 4px; box-shadow: 0 0 0 2px var(--gold) inset; }
.mvote { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 6px 0; }
.mvote span { font-family: var(--font-small); font-size: 11px; padding: 2px 5px; box-shadow: 0 0 0 1.5px currentColor; }
.mvote .ok { color: var(--red); }
.mvote .no { color: #555; }
.mvote .hold { color: var(--muted); }
.mvote .res { font-family: var(--font-ui); font-size: 11px; color: #fff; }
.mvote .res.ok { background: var(--red); box-shadow: 0 0 0 1.5px var(--red); }
.mvote .res.no { background: #555; box-shadow: 0 0 0 1.5px #555; }
.mvote .res.mix { background: var(--orange); box-shadow: 0 0 0 1.5px var(--orange); }
/* 공방(치열한 검증) 줄 · 경보 단계 · 지명 보고 요약 */
.mline.heated { box-shadow: inset 3px 0 0 var(--red); background: linear-gradient(90deg, rgba(200,50,60,.09), transparent 80%); padding: 3px 0 3px 5px; }
.mline .spk .hot { display: inline-block; margin-left: 6px; font-family: var(--font-small); font-size: 10.5px; line-height: 15px; color: #fff; background: var(--red); padding: 0 4px; vertical-align: 1px; }
.mstage.alert { background: #b0142b; box-shadow: 0 0 0 2px #ff9aa4 inset; }
.broadcast .phase.alert { background: #b0142b; color: #fff; box-shadow: 0 0 0 3px #ff9aa4, 0 0 0 6px #000; }
.mnote.funnel { text-align: left; font-family: var(--font-small); font-size: 11px; line-height: 1.6; color: var(--navy2); background: var(--paper2); padding: 6px 8px; box-shadow: inset 0 0 0 1px var(--line); }
.typing::after { content: '▌'; animation: blink .6s steps(1) infinite; color: var(--velvet); }
.hearing-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px calc(8px + var(--safe-bottom)); background: linear-gradient(transparent, rgba(11,10,20,.92) 30%); display: flex; gap: 6px; align-items: center; justify-content: space-between; z-index: 4; }
.hearing-controls .seg { flex: none; width: 150px; background: var(--paper); color: var(--ink); }
.hearing-controls .btn { flex: 1; margin: 3px; }

/* ---------- president / petition ---------- */
.scene-wrap { position: relative; background: #000; }
.scene-wrap canvas { width: 100%; display: block; }
.dialog-box { position: relative; margin: -4px 0 0; background: var(--ink); color: var(--paper); padding: 12px 14px; box-shadow: inset 0 0 0 3px var(--gold2), inset 0 0 0 6px #000; min-height: 76px; font-size: 14px; }
.dialog-box .nm { font-family: var(--font-title); color: var(--gold-lt); font-size: 13px; margin-bottom: 4px; }
.funnel { display: flex; flex-direction: column; gap: 6px; }
.funnel .f { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 7px 10px; background: #fff; box-shadow: 0 0 0 2px var(--ink); font-size: 12.5px; position: relative; overflow: hidden; }
.funnel .f b { font-family: var(--font-mono); font-size: 15px; }
.funnel .f i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(156,44,82,.13); }
.nominee { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.nominee img { width: 52px; height: 52px; box-shadow: 0 0 0 2px var(--ink); background: #2c2338; }
.nominee .n1 { font-family: var(--font-ui); font-size: 13px; }
.nominee .n2 { font-size: 12.5px; color: var(--ink2); }

/* ---------- report ---------- */
.report-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 4px 10px; margin: 0 -4px; scrollbar-width: none; }
.report-tabs::-webkit-scrollbar { display: none; }
.report-tabs button { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; background: var(--paper); border: 0; cursor: pointer; box-shadow: 0 0 0 2px var(--ink); font-size: 12px; position: relative; margin: 2px; }
.report-tabs button img { width: 26px; height: 26px; }
.report-tabs button.on { background: var(--velvet2); color: #fff; }
.report-tabs button .star { position: absolute; top: -8px; right: -6px; width: 16px; height: 16px; }
.dossier { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.dossier .photo { position: relative; width: 96px; height: 120px; background: #2c2338; box-shadow: 0 0 0 2px var(--ink); overflow: hidden; }
.dossier .photo img { width: 100%; height: 100%; object-fit: cover; }
.dossier .photo .lockbadge { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(27,20,36,.85); color: var(--gold-lt); font-family: var(--font-small); font-size: 10px; text-align: center; padding: 2px; }
.dossier table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dossier th { text-align: left; font-weight: 700; width: 56px; padding: 3px 4px; background: var(--paper2); border: 1px solid var(--line); }
.dossier td { padding: 3px 6px; border: 1px solid var(--line); }
.unlock-panel { margin-top: 12px; padding: 12px; background: var(--ink); color: var(--paper); font-family: var(--font-ui); box-shadow: 0 0 0 3px var(--gold2) inset; text-align: center; }
.unlock-panel p { margin: 0 0 8px; font-size: 12.5px; }
.unlock-panel .btn { width: 100%; margin: 4px 0 0; }
.verdict-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.tally { font-family: var(--font-ui); font-size: 12px; }
.tally b { font-family: var(--font-mono); }
table.summary { width: 100%; border-collapse: collapse; font-size: 12.5px; font-family: var(--font-ui); }
table.summary th, table.summary td { border: 1px solid var(--line); padding: 5px 4px; text-align: center; }
table.summary th { background: var(--paper2); font-weight: 400; font-size: 11.5px; }
table.summary tr.final td { background: #fff1c9; }
table.summary tr { cursor: pointer; }
.debate { padding: 10px; background: var(--paper2); margin: 8px 0; box-shadow: inset 3px 0 0 var(--velvet2); }
.debate .vs { font-family: var(--font-ui); font-size: 12px; color: var(--velvet); margin-bottom: 4px; }
.debate p { margin: 4px 0; font-size: 13px; }
.locked-block { position: relative; padding: 14px; background: repeating-linear-gradient(45deg, var(--paper2) 0 6px, var(--paper3) 6px 12px); text-align: center; font-family: var(--font-ui); font-size: 12.5px; box-shadow: 0 0 0 2px var(--line) inset; }

/* record card */
.record-photo { width: 100%; aspect-ratio: 1; max-width: 220px; margin: 0 auto 10px; display: block; box-shadow: 0 0 0 3px var(--ink); background: #2c2338; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.vbadge { font-family: var(--font-small); font-size: 10.5px; padding: 2px 6px; background: #fff; box-shadow: 0 0 0 1.5px var(--green); color: var(--green); }
.vbadge.off { box-shadow: 0 0 0 1.5px #aaa; color: #999; }

/* certificate */
.cert {
  position: relative; margin: 8px 4px 16px; padding: 28px 22px 26px; background: #fffaf0; font-family: var(--font-doc); text-align: center;
  box-shadow: 0 0 0 4px var(--gold2), 0 0 0 8px var(--paper), 0 0 0 11px var(--gold), 0 0 0 14px #000, 10px 10px 0 14px rgba(0,0,0,.35);
}
.cert .c-title { font-size: 32px; font-weight: 800; letter-spacing: 14px; margin: 6px 0 20px; }
.cert .c-body { font-size: 16px; line-height: 2; text-align: left; }
.cert .c-date { margin-top: 22px; font-size: 14px; }
.cert .c-sign { margin-top: 18px; font-weight: 800; font-size: 16px; position: relative; display: inline-block; }
.cert .c-sign canvas { position: absolute; right: -20px; top: -24px; width: 64px; height: 64px; transform: rotate(-6deg); }
.cert .c-no { font-family: var(--font-ui); font-size: 11px; text-align: left; color: var(--muted); }
.cert .c-corner { position: absolute; width: 28px; height: 28px; }

/* shop */
.product { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 2px dashed var(--paper3); }
.product:last-child { border-bottom: 0; }
.product img { width: 56px; height: 56px; }
.product .pn { font-family: var(--font-title); font-size: 15px; }
.product .pd { font-size: 11px; color: var(--muted); font-family: var(--font-small); }
.product .btn { min-width: 92px; }
.ribbon { display: inline-block; background: var(--red); color: #fff; font-size: 10px; padding: 0 5px; margin-left: 4px; font-family: var(--font-small); vertical-align: middle; }

/* chat */
.chat { display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 78%; padding: 8px 11px; font-size: 14px; box-shadow: 0 0 0 2px var(--ink); background: #fff; }
.bubble.me { align-self: flex-end; background: var(--gold-lt); }
.bubble.sys { align-self: center; max-width: 100%; background: var(--ink); color: var(--paper); font-size: 12px; text-align: center; }
.chat-input { display: flex; gap: 6px; padding: 8px 10px calc(8px + var(--safe-bottom)); background: var(--ink); }
.chat-input .input { flex: 1; }

/* ---------- overlays ---------- */
#overlay-root { position: fixed; inset: 0; pointer-events: none; z-index: 100; display: flex; justify-content: center; }
.backdrop { position: absolute; inset: 0; background: rgba(8,6,16,.72); pointer-events: auto; animation: fade .15s steps(3) both; display: flex; align-items: center; justify-content: center; padding: 20px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 100%; max-width: 400px; max-height: 86vh; overflow-y: auto; animation: modal-in .2s steps(4) both; }
@keyframes modal-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal .pbox { margin: 4px; }
.modal .m-actions { display: flex; gap: 6px; margin-top: 12px; }
.modal .m-actions .btn { flex: 1; }
.toast { position: absolute; bottom: calc(86px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 14px; font-size: 13px; box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px #000; max-width: 88%; text-align: center; animation: toast 2.6s steps(6) both; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.photo-upload { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: start; }
.photo-upload .frame { width: 112px; aspect-ratio: 1; max-width: 100%; background: #e9dfca; box-shadow: 0 0 0 2px var(--ink); display: grid; place-items: center; text-align: center; font-size: 11px; color: var(--muted); overflow: hidden; }
.photo-upload .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-upload label.btn { margin: 0; }
.mosaic-preview { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.mosaic-preview img { width: 48px; height: 48px; box-shadow: 0 0 0 2px var(--ink); }
.input.static { display: flex; align-items: center; background: #efe7d6; color: var(--muted); }
.notice-pop { pointer-events: auto; position: absolute; top: calc(10px + var(--safe-top, 0px)); left: 50%; transform: translateX(-50%); width: min(92%, 420px); display: flex; gap: 10px; align-items: center; text-align: left; background: var(--paper); color: var(--ink); border: 0; padding: 10px 12px; font: inherit; font-size: 13px; box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px #000, 0 8px 0 6px rgba(0,0,0,.25); cursor: pointer; z-index: 60; animation: pop-in .35s steps(4) both; }
.notice-pop img { width: 24px; height: 24px; flex: none; }
.notice-pop span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notice-pop b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-pop small { font-size: 10.5px; color: var(--muted); font-family: var(--font-small); }
@keyframes pop-in { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.flash-gavel { position: absolute; inset: 0; pointer-events: none; background: #fff; animation: flash .25s steps(2) both; }
@keyframes flash { from { opacity: .5; } to { opacity: 0; } }

/* misc */
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.tiny { font-size: 10.5px; font-family: var(--font-small); }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mb0 { margin-bottom: 0; }
.gold-t { color: var(--gold-lt); }
.velvet-t { color: var(--velvet); }
.red-t { color: var(--red); }
.flex { display: flex; align-items: center; gap: 8px; }
.between { justify-content: space-between; }
.spacer { flex: 1; }
.pix-divider { height: 6px; margin: 14px 0; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px); opacity: .25; }
.ai-note { display: flex; gap: 6px; align-items: flex-start; font-family: var(--font-small); font-size: 10.5px; line-height: 1.5; color: var(--muted); padding: 8px 10px; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1.5px var(--line); }
.ai-note b { color: var(--velvet); font-weight: 400; }
.on-dark .ai-note { background: rgba(0,0,0,.25); color: #cbbfd6; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); }
.portrait-editor { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.portrait-editor canvas { width: 96px; height: 96px; box-shadow: 0 0 0 3px var(--ink); background: linear-gradient(#8a5a35, #5b3520); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.swatch { width: 26px; height: 26px; border: 0; cursor: pointer; box-shadow: 0 0 0 2px var(--ink); }
.swatch.on { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--gold); }
.q-card { min-height: 240px; }
.q-no { font-family: var(--font-small); font-size: 11px; color: var(--velvet); letter-spacing: 1px; }
.q-text { font-family: var(--font-doc); font-size: 17px; font-weight: 800; margin: 6px 0 4px; line-height: 1.5; }
.receipt-no { font-family: var(--font-mono); font-size: 16px; letter-spacing: 1px; }
[data-msgs] { display: flex; flex-direction: column; gap: 10px; }

/* ---------- 청문회 개최 동의 스위치 ---------- */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch-row .sw-label { font-family: var(--font-title); font-size: 15px; }
.switch-row .sw-sub { font-size: 11px; color: var(--muted); font-family: var(--font-small); }
.pswitch { position: relative; width: 74px; height: 34px; flex: none; border: 0; padding: 0; cursor: pointer; background: #8d8296; box-shadow: 0 0 0 3px var(--ink), inset 0 3px 0 rgba(0,0,0,.25); }
.pswitch::before { content: 'OFF'; position: absolute; right: 8px; top: 9px; font-family: var(--font-small); font-size: 11px; color: #fff; }
.pswitch i { position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; background: var(--paper); box-shadow: inset -3px -3px 0 var(--paper3), 0 0 0 2px var(--ink); transition: left .12s steps(3); }
.pswitch.on { background: var(--green); }
.pswitch.on::before { content: 'ON'; left: 10px; right: auto; }
.pswitch.on i { left: 44px; }
.waiting .scene-wrap { margin: -14px -14px 0; }
.notice-soft { background: #fff7dc; box-shadow: inset 3px 0 0 var(--gold2); padding: 10px 12px; font-size: 12.5px; margin: 10px 0 0; }
.countdown { font-family: var(--font-mono); color: #a3202b; }
.bolt-card { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.bolt-card .bt { font-family: var(--font-title); font-size: 15px; }
.bolt-card .bd { font-size: 11.5px; color: var(--ink2); }
.badge-live { display: inline-block; background: var(--orange); color: var(--ink); font-size: 10.5px; padding: 1px 6px; box-shadow: 0 0 0 2px #000; font-family: var(--font-small); }
.action-banner { margin: 10px 0; padding: 10px 12px; background: var(--velvet); color: #fff; font-family: var(--font-ui); font-size: 13px; box-shadow: 0 0 0 3px var(--gold) inset; }
.info-grid { display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; font-size: 13px; margin: 0; }
.info-grid dt { color: var(--muted); font-family: var(--font-ui); font-size: 12px; }
.info-grid dd { margin: 0; }
.photo-box { position: relative; width: 100%; aspect-ratio: 1; max-width: 200px; margin: 0 auto 10px; box-shadow: 0 0 0 3px var(--ink); background: #2c2338; overflow: hidden; }
.photo-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-box .veil { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px; text-align: center; font-family: var(--font-small); font-size: 10.5px; background: rgba(27,20,36,.85); color: var(--gold-lt); }

/* ---------- 미니 중계(다시보기 하이라이트) ---------- */
.broadcast.mini { cursor: pointer; box-shadow: 0 0 0 3px #000; }
.broadcast.mini .lower3 .l3-name { font-size: 11.5px; }
.broadcast.mini .lower3 .l3-role { font-size: 10.5px; }
.broadcast.mini .lower3 .l3-sub { font-size: 11.5px; max-height: 40px; min-height: 18px; }
.broadcast.mini .phase-tag { position: absolute; right: 8px; top: 30px; font-family: var(--font-small); font-size: 10px; background: rgba(10,8,20,.8); color: var(--gold-lt); padding: 1px 6px; box-shadow: 0 0 0 1.5px var(--gold2); }
.broadcast.mini.heated .phase-tag { background: var(--red); color: #fff; box-shadow: 0 0 0 1.5px #000; }
/* 채널 전환 OSD('CH 01')가 떠 있는 동안은 단계 꼬리표를 숨긴다(겹침 방지) */
.tv-screen:has(.tv-osd.on) .phase-tag { visibility: hidden; }
.broadcast.mini .play-hint { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: var(--font-ui); font-size: 12px; color: #fff; background: rgba(10,8,20,.72); padding: 4px 10px; box-shadow: 0 0 0 2px var(--gold2); opacity: 0; transition: opacity .2s; }
.broadcast.mini:hover .play-hint, .broadcast.mini:focus-visible .play-hint { opacity: 1; }
.work-log { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.work-log div { background: var(--ink2); color: var(--paper); padding: 6px 4px; text-align: center; box-shadow: 0 0 0 2px #000; }
.work-log b { display: block; font-family: var(--font-mono); font-size: 17px; color: var(--gold-lt); }
.work-log span { font-size: 10.5px; font-family: var(--font-small); }
.work-log.light div { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.work-log.light b { color: var(--velvet); }
.status-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.status-line span { font-family: var(--font-small); font-size: 11px; padding: 2px 7px; box-shadow: 0 0 0 1.5px var(--line); color: var(--muted); background: #fff; }
.status-line span.on { color: #2d6e43; box-shadow: 0 0 0 1.5px #2d6e43; }

/* ---------- 간소화한 가입 서식 ---------- */
.link-btn { border: 0; background: none; padding: 0; color: var(--velvet2); text-decoration: underline; font: inherit; cursor: pointer; }
details.more { margin: 0 0 14px; box-shadow: 0 0 0 2px var(--line); background: rgba(255,255,255,.45); padding: 0 12px; }
details.more > summary { list-style: none; cursor: pointer; padding: 11px 0; font-size: 13px; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: '▶'; font-size: 9px; color: var(--velvet2); transition: transform .15s steps(2); }
details.more[open] > summary::before { transform: rotate(90deg); }
details.more[open] { padding-bottom: 12px; }
.pbox details.more { margin-top: 4px; }
.photo-pbox .photo-upload { display: flex; gap: 14px; align-items: center; }
.photo-pbox .frame { flex: none; width: 96px; height: 96px; display: grid; place-items: center; background: var(--paper2); box-shadow: 0 0 0 3px var(--ink); cursor: pointer; overflow: hidden; text-align: center; font-size: 11px; color: var(--muted); }
.photo-pbox .frame.empty { background: repeating-linear-gradient(45deg, var(--paper2) 0 6px, var(--paper3) 6px 8px); color: var(--ink2); }
.photo-pbox .frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-pbox .ph-title { font-family: var(--font-title); font-size: 15px; margin-bottom: 4px; }
.photo-pbox .mosaic-mini { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--ink); }
.id-line { display: flex; gap: 8px; align-items: center; font-size: 12.5px; margin: 0 0 14px; padding: 8px 10px; background: rgba(63,143,90,.12); box-shadow: inset 0 0 0 1.5px rgba(63,143,90,.5); color: var(--ink2); }
.hobby-group { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: start; margin-bottom: 10px; }
.hobby-group .hg-label { font-family: var(--font-small); font-size: 10.5px; color: var(--muted); padding-top: 7px; }
.mb12 { margin-bottom: 12px; }

/* ---------- 픽셀아트 TV 수상기 ---------- */
.tv { position: relative; width: 100%; aspect-ratio: 384 / 300; margin: 2px 0 0; }
.tv-cab { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; pointer-events: none; }
.tv-screen { position: absolute; overflow: hidden; border-radius: 1px; background: #000; }
.tv-screen > .broadcast { width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; }
.tv-screen canvas { image-rendering: auto; }
.tv-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255,255,255,.08) 0 14%, rgba(255,255,255,0) 26%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, rgba(0,0,0,0) 1px 3px);
  box-shadow: inset 0 0 8px rgba(0,0,0,.5); }
.tv .broadcast .bug { left: 7px; top: 7px; }
.tv .broadcast .lower3 { padding: 0 7px 7px; }
.tv .broadcast.mini, .tv .broadcast.tvs { box-shadow: none; }
.tvs .lower3 .l3-name { font-size: 11.5px; }
.tvs .lower3 .l3-role { font-size: 9.5px; }
.tvs .lower3 .l3-sub { font-size: 11.5px; min-height: 18px; max-height: 40px; }
.tv-caption { display: flex; align-items: center; gap: 6px; }
.onair { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-small); font-size: 10px; color: #ffb3b3; margin-left: auto; }
.onair::before { content: ''; width: 6px; height: 6px; background: #ff4a4a; box-shadow: 0 0 0 1px #000; animation: blink-dot 1.2s steps(2) infinite; }
@keyframes blink-dot { 50% { opacity: .25; } }
.broadcast { color: #f4eefa; }
/* TV 속 자막은 한 줄로 얇게 — 화면을 가리지 않게 */
.tv .broadcast .lower3 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0; padding: 0 6px 6px; }
.tv .broadcast .lower3 .l3-name { font-size: 10.5px; padding: 1px 6px; }
.tv .broadcast .lower3 .l3-role { font-size: 9px; padding: 2px 6px; }
.tv .broadcast .lower3 .l3-sub { flex-basis: 100%; margin-top: 3px; font-size: 11px; line-height: 1.35; padding: 3px 7px; min-height: 0; max-height: 34px; background: rgba(10,8,20,.78); }
.tv .broadcast .bug { font-size: 9.5px; }
.tv .broadcast.mini .phase-tag { top: 7px; }

/* ---------- 디자인 검토 반영 ---------- */
.icon-btn { min-width: 44px; min-height: 44px; }
.stamp-chip { min-height: 36px; position: relative; }
.stamp-chip::after { content: ''; position: absolute; inset: -6px; }
.seg button { padding: 11px 4px; }
.chip { padding: 10px 12px; }
/* 고해상도 화면에서는 TV 화면·캐비닛도 픽셀을 또렷하게 */
@media (min-resolution: 2dppx) { .tv-screen canvas, .tv-cab { image-rendering: pixelated; } }
/* TV 자막은 최대 2줄 */
.tv .broadcast .lower3 .l3-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: none; overflow: hidden; }
.tvs .lower3 .l3-sub { -webkit-line-clamp: 1; }
/* 접는 칸 제목은 한 덩어리로 */
details.more > summary { flex-wrap: wrap; }
details.more > summary .sum-t { flex: none; white-space: nowrap; }
/* 시작 화면: 키 작은 폰에서도 시작 버튼이 보이게 */
@media (max-height: 620px) { .photo-pbox .frame span { line-height: 1.3; font-size: 11px; } }
.photo-pbox .frame span img { width: 32px; height: 32px; }
.vacancy .empty-seat { width: 44px; height: 44px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--ink); background: repeating-linear-gradient(45deg, #efe4c9 0 4px, #e2d0a6 4px 6px); font-family: var(--font-title); font-size: 20px; color: var(--muted); }
.section-title .sec-link { margin-left: auto; font-family: var(--font-body, inherit); text-shadow: none; text-decoration: none; padding: 8px 0 8px 8px; }

/* ---------- 채널 TV + 리모컨 ---------- */
.tv-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 8px; }
.tv-ch-holder, .tv-ch-holder > .broadcast { width: 100%; height: 100%; }
.tv-ch-holder > .broadcast { aspect-ratio: auto; box-shadow: none; }
.tv-screen > [hidden] { display: none !important; }
.tv-wait { height: 100%; display: grid; place-items: center; color: #9aa6c8; font-family: var(--font-small); font-size: 11px; background: #06081a; }
.tv-noise { position: absolute; inset: 0; width: 100%; height: 100%; display: none; image-rendering: pixelated; z-index: 3; }
.tv-noise.on { display: block; }
.tv-screen.roll > .broadcast { animation: tv-roll .38s steps(6) 1; }
@keyframes tv-roll { 0% { transform: translateY(-8%) scaleY(1.05); filter: brightness(1.8) saturate(0); } 60% { transform: translateY(3%); } 100% { transform: none; filter: none; } }
.tv-osd { position: absolute; z-index: 4; top: 7%; right: 4%; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--font-mono); color: #5dff7e; text-shadow: 2px 2px 0 #000, 0 0 6px rgba(93,255,126,.5); opacity: 0; transition: opacity .15s steps(2); pointer-events: none; }
.tv-osd.on { opacity: 1; }
.tv-osd b { font-weight: 400; font-size: clamp(16px, 5.6vw, 24px); letter-spacing: 1px; }
.tv-osd span { font-size: clamp(10px, 3vw, 12px); }
/* ---------- 청문 절차 안내: 한 줄씩 툭툭 ---------- */
.intro-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.intro-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.7; opacity: 0; animation: step-in .32s steps(4) forwards; animation-delay: calc(var(--i) * .5s + .15s); }
.intro-steps li > i { font-style: normal; width: 26px; height: 26px; display: grid; place-items: center; background: var(--velvet2); color: #fff; font-family: var(--font-title); font-size: 13px; box-shadow: 0 0 0 2px var(--ink); margin-top: 2px; }
.intro-steps li b { display: block; font-size: 14.5px; color: var(--velvet-dk, #6d1a36); }
.intro-steps li span { display: block; color: var(--ink); }
.intro-steps em { font-style: normal; font-weight: 700; color: #b0213f; background: linear-gradient(transparent 62%, rgba(227,181,79,.45) 62%); }
.intro-steps em.ok { color: #23683f; background: linear-gradient(transparent 62%, rgba(63,143,90,.22) 62%); }
.intro-after { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; opacity: 0; animation: step-in .32s steps(4) forwards; animation-delay: calc(var(--i) * .5s + .15s); }
@keyframes step-in { 0% { opacity: 0; transform: translateY(10px) scale(.98); } 60% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .intro-steps li, .intro-after { animation: none; opacity: 1; } }
/* ---------- 인지 판매소 · 충전 ---------- */
.refund-banner { display: flex; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 14px; background: #e9f6ec; color: var(--ink); box-shadow: 0 0 0 3px #2d6e43, 0 0 0 6px #000; }
.refund-banner img { width: 26px; height: 26px; flex: none; }
.refund-banner b { display: block; font-family: var(--font-title); font-size: 16px; color: #1f5a35; }
.refund-banner span { display: block; font-size: 13px; line-height: 1.55; }
.refund-banner u { text-decoration: none; font-weight: 700; color: #1f5a35; background: linear-gradient(transparent 60%, rgba(63,143,90,.3) 60%); }
.use-table td b { color: var(--velvet2); }
.ok-t { display: inline-block; margin-left: 2px; padding: 0 5px; font-size: 10.5px; font-family: var(--font-small); color: #1f5a35; background: #dff1e4; box-shadow: inset 0 0 0 1px #8fc79f; white-space: nowrap; }
.red-t { color: var(--red, #c8323c); }
.topup-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.topup-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; cursor: pointer; font: inherit; text-align: left; background: var(--paper2, #f6efdc); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), inset -2px -2px 0 var(--paper3); }
.topup-item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topup-item small { font-size: 11px; color: var(--muted); }
.topup-item em { font-style: normal; font-family: var(--font-title); font-size: 15px; white-space: nowrap; }
/* ---------- 채팅: 대화에 집중 ---------- */
.chat-screen .screen-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-screen .chat-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-screen .chat-input { flex: none; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255,250,240,.94); box-shadow: 0 0 0 2px var(--ink); }
.chat-head img { width: 40px; height: 40px; object-fit: cover; background: #f3e8cf; box-shadow: 0 0 0 2px var(--ink); }
.chat-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-head b { font-size: 15px; }
.chat-head span { font-size: 11px; color: var(--muted); font-family: var(--font-small); }
.bubble.sys.tip { background: rgba(27,20,36,.75); font-size: 11.5px; line-height: 1.6; }
.topbar .icon-btn[data-menu] { margin-left: auto; color: var(--paper); font-size: 22px; background: none; border: 0; cursor: pointer; }
.cert-pop { z-index: 70; cursor: pointer; }
.cert-pop .cert { max-width: 360px; width: calc(100% - 40px); margin: 0; animation: pop-in .35s steps(4) both; }
.cert-pop .cert-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none; font-size: 20px; color: var(--ink); cursor: pointer; }
.use-table th { white-space: nowrap; text-align: left; vertical-align: top; padding-right: 10px; width: 1%; }
.use-table td { line-height: 1.6; }
.cert-pop .cert { box-sizing: border-box; width: min(340px, 100%); min-width: 0; padding: 26px 18px 22px; }
.cert-pop .cert .c-title { font-size: 26px; letter-spacing: 6px; margin: 6px 0 14px; }
.cert-pop .cert .c-body { font-size: 14.5px; line-height: 1.9; }
.cert-pop .cert { animation: cert-in .3s steps(4) both; }
@keyframes cert-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* 리모컨: 픽셀아트 버튼 */
.remote { display: flex; align-items: stretch; gap: 6px; width: min(100%, 380px); margin-top: 8px; padding: 6px; background: #1b1424; box-shadow: 0 0 0 3px #000, inset 0 0 0 2px #3a2f4a; }
.remote .rm-power { flex: none; width: 10px; align-self: center; height: 10px; background: #ff3b3b; box-shadow: 0 0 0 2px #000, 0 0 6px rgba(255,59,59,.7); margin: 0 2px 0 4px; }
.remote .rm-ch { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 6px; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--paper); box-shadow: 0 0 0 2px #000, inset -3px -3px 0 var(--paper3), inset 3px 3px 0 #fff; }
.remote .rm-ch i { flex: none; font-style: normal; font-family: var(--font-title); font-size: 13px; color: var(--velvet2); }
.remote .rm-ch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote .rm-ch.on { background: var(--gold); box-shadow: 0 0 0 2px #000, inset -3px -3px 0 var(--gold2), inset 3px 3px 0 var(--gold-lt); }
.remote .rm-ch.on i { color: var(--ink); }
.remote .rm-ch:active { box-shadow: 0 0 0 2px #000, inset 3px 3px 0 var(--paper3); transform: translateY(1px); }
.remote .rm-step { flex: none; display: flex; flex-direction: column; gap: 4px; }
.remote .rm-step button { min-width: 40px; flex: 1; border: 0; cursor: pointer; font-family: var(--font-small); font-size: 9px; color: #fff; background: #4a3d5c; box-shadow: 0 0 0 2px #000, inset -2px -2px 0 #2e2440, inset 2px 2px 0 #6b5a80; }
.remote .rm-step button:active { transform: translateY(1px); }
.tvsplash .sp-bottom { gap: 8px; padding-top: 12px; }
.open-office img { height: 98px; }
.open-office .oo-text { padding: 8px 12px; gap: 2px; }
.tvsplash .disclaimer { margin-top: -2px; }
.badge-price { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 10px; flex-wrap: wrap; }
.badge-price .bp-tag { align-self: center; font-family: var(--font-small); font-size: 11px; padding: 2px 6px; background: #ffd23f; color: var(--ink); box-shadow: 0 0 0 2px #000; }
.badge-price s { color: rgba(255,255,255,.65); font-size: 14px; }
.badge-price b { font-family: var(--font-title); font-weight: 400; font-size: 24px; color: var(--gold-lt); }
.badge-price span { font-size: 13px; opacity: .85; }

/* ---------- 시작 화면: 뉴스 속보 로고(옆으로 미끄러져 등장) · 이 시각 청문회 LIVE ---------- */
.tvsplash .sp-top { padding: 40px 0 10px; width: min(100%, 400px); }
.news-logo { position: relative; width: 100%; aspect-ratio: 216 / 96; } /* newsintro.js LOGO_W / LOGO_H. 띠가 화면 끝에서 들어오도록 자르지 않는다(.splash 가 화면 밖을 가린다) */
.news-logo .nl { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.news-logo .nl-bg { animation: nl-fade .6s steps(6) both; }
.news-logo .nl-red { animation: nl-left .55s cubic-bezier(.2,.9,.25,1) .1s both; }
.news-logo .nl-line { animation: nl-left .5s cubic-bezier(.2,.9,.25,1) .25s both; }
.news-logo .nl-white { animation: nl-right .55s cubic-bezier(.2,.9,.25,1) .3s both; }
.news-logo .nl-live { animation: nl-pop .32s steps(4) .8s both; transform-origin: 80% 25%; }
/* 반짝임: 두 띠 모양(--nl-mask) 안에서만 보이는 비스듬한 픽셀 줄무늬가 왼쪽에서 오른쪽으로 계단식으로 지나간다 */
.news-logo .nl-sheen { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--nl-mask) 0 0 / 100% 100% no-repeat; mask: var(--nl-mask) 0 0 / 100% 100% no-repeat; background: linear-gradient(105deg, transparent 0 44%, rgba(255,255,255,.7) 44% 46.5%, transparent 46.5% 48%, rgba(255,255,255,.45) 48% 49.2%, transparent 49.2% 100%) no-repeat; background-size: 300% 100%; background-position: 100% 0; animation: nl-sheen .8s steps(12) 1.05s both; }
@keyframes nl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nl-left { from { transform: translateX(-110%); } to { transform: none; } }
@keyframes nl-right { from { transform: translateX(110%); } to { transform: none; } }
@keyframes nl-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: none; } }
@keyframes nl-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .news-logo .nl, .news-logo .nl-sheen { animation: none; } }
.onair-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: -4px; }
.news-cam { width: 96px; height: 78px; image-rendering: pixelated; flex: none; }
.onair-label { display: flex; align-items: center; gap: 8px; font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif; font-weight: 800; font-size: 19px; color: #fff; letter-spacing: .5px; text-shadow: 2px 2px 0 #000; }
.onair-label b { font-family: var(--font-mono); font-weight: 400; font-size: 15px; letter-spacing: 1px; padding: 3px 8px 2px; background: #e8243a; box-shadow: 0 0 0 2px #000; text-shadow: none; display: inline-flex; align-items: center; gap: 5px; }
.onair-label b::before { content: ''; width: 7px; height: 7px; background: #fff; animation: onair 1.2s steps(1) infinite; }
@keyframes onair { 50% { opacity: .2; } }
.tvsplash .sp-top { padding: 34px 0 6px; }
.news-cam { width: 80px; height: 65px; }
.onair-label { font-size: 17px; }
.onair-row { margin-top: -6px; }
.open-office { grid-template-columns: 92px 1fr; }
.open-office img { width: 92px; height: 86px; }
.open-office b { font-size: 19px; }
.open-office em { font-size: 12.5px; }
.tvsplash .sp-mem img { width: 28px; height: 28px; }
.tvsplash .sp-mem b { font-size: 9.5px; }
.tvsplash .sp-mem span { display: none; }
/* 시작 화면: TV 전체가 시작 버튼. 방송이 켜지고 2초 뒤 화면에 안내 문구가 오락실 'PRESS START'처럼 뜬다.
   글자는 늘 켜 두고 ▶ 와 금테만 깜빡여 읽기를 방해하지 않는다. 아래 자막 이름표와 겹치지 않게 조금 위에 둔다. */
.tv-start-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.tv-start-btn:focus-visible .tv-cab { box-shadow: 0 0 0 3px var(--gold); }
.tvsplash .play-hint { display: none; }
.tv-start { position: absolute; z-index: 5; inset: 0 0 28%; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.tv-start.show { opacity: 1; }
.tv-start b { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); font-family: var(--font-title); font-weight: 400; font-size: clamp(13px, 4vw, 17px); letter-spacing: .5px; color: #fff; text-shadow: 2px 2px 0 #000; white-space: nowrap; background: rgba(8, 14, 44, .85); padding: 5px 10px 4px; box-shadow: 0 0 0 1px #000, 0 0 0 3px #ffd23f, 0 0 16px rgba(255, 210, 63, .45); }
.tv-start b i { font-style: normal; color: #ffd23f; }
.tv-start.show b { animation: tv-start-ring 1.2s steps(1) infinite; }
.tv-start.show b i { animation: tv-start-arrow 1.2s steps(1) infinite; }
@keyframes tv-start-ring { 0%, 59% { box-shadow: 0 0 0 1px #000, 0 0 0 3px #ffd23f, 0 0 16px rgba(255, 210, 63, .45); } 60%, 100% { box-shadow: 0 0 0 1px #000, 0 0 0 3px #7a5c12, 0 0 0 rgba(0, 0, 0, 0); } }
@keyframes tv-start-arrow { 0%, 59% { opacity: 1; } 60%, 100% { opacity: .15; } }
.tv-start-btn:active .tv-start b { transform: translateY(1px); }
.tvsplash .sp-login { align-self: center; min-height: 44px; padding: 0 12px; color: #dfe7ff; text-shadow: 1px 1px 0 #000; }
@media (prefers-reduced-motion: reduce) { .tv-start { transition: none; } .tv-start.show b, .tv-start.show b i { animation: none; } }
/* 시작 화면이 넘어갈 때 잠깐 보이는 바탕도 시작 화면과 같은 남색으로 */
#app:has(> .tvsplash), #app:empty { background: #080b18; } /* 첫 화면을 그리기 전(빈 #app)에도 남색 */
.tvsplash .sp-top { padding: 30px 0 4px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.tvsplash .onair-row { margin: 0; }

/* 시작 화면 · 한 화면에 다 안 들어갈 때(작은 폰, 노치·홈 바가 있는 아이폰 등): splash.js 가 .tight 를 붙여
   로고·카메라·TV·카드를 줄인다 */
.tvsplash.tight .sp-top { padding: 6px 0 0; gap: 0; }
.tvsplash.tight .news-logo { width: 74%; }
.tvsplash.tight .news-cam { width: 64px; height: 52px; }
.tvsplash.tight .onair-label { font-size: 15px; }
.tvsplash.tight .onair-label b { font-size: 13px; padding: 2px 6px 1px; }
.tvsplash.tight .sp-tvbox { width: min(90%, 420px); }
.tvsplash.tight .sp-bottom { gap: 6px; padding-top: 4px; }
.tvsplash.tight .sp-login { min-height: 40px; }
.tvsplash.tight .open-office { grid-template-columns: 74px 1fr; }
.tvsplash.tight .open-office img { width: 74px; height: 70px; }
.tvsplash.tight .open-office .oo-text { padding: 6px 12px; gap: 1px; }
.tvsplash.tight .open-office b { font-size: 17px; }
.tvsplash.tight .open-office em { font-size: 12px; line-height: 1.35; }

/* ---------- 한 쌍 청문회: 공방 꼬리표 · 낮은 화면 · 동작 줄이기 ---------- */
.broadcast .debate-tag { display: none; position: absolute; right: 8px; top: 30px; z-index: 3; font-family: var(--font-ui); font-size: 11px; line-height: 1; padding: 4px 7px; color: #fff; background: var(--red); box-shadow: 0 0 0 2px #000; animation: debate-blink 1s steps(2) infinite; }
.broadcast.debating .debate-tag { display: block; }
@keyframes debate-blink { 50% { opacity: .55; } } /* 배경색을 바꾸지 않는다(그림으로 바꿔도 빨간 상자가 비치지 않게) */
/* 낮은 화면(예: 360×640)에서는 표결판 초상을 접어 회의록 자리를 넓힌다(패널 약 55px) */
@media (max-height: 700px) {
  .pair-panel { padding: 4px 6px; gap: 5px; }
  .pair-panel .pp-cand { padding: 2px 2px 3px; }
  .pair-panel .pp-cand { display: flex; flex-direction: column; justify-content: center; }
  .pair-panel .pp-cand img.face { display: none; }
  .pv img { display: none; }
  .pv i, .pv b { line-height: 12px; min-height: 12px; }
  .pv { padding: 1px 0 0; }
  .pp-board { padding: 2px 4px; }
  .pp-head { line-height: 13px; }
  .pp-votes { margin-top: 2px; }
  /* 접힌 카드(약 47px)에서는 적격 도장이 이름 줄을 덮으므로, 도장이 찍히면 이름을 감추고 도장을 카드 가운데에, 결재 도장은 왼쪽 위로 */
  .pair-panel .pp-cand.stamped .no { visibility: hidden; }
  .pair-panel .pp-cand .vstamp { top: 50%; }
  .pair-panel .pp-cand .pp-seal { right: auto; left: -4px; }
}
@media (max-width: 374px) {
  .remote .rm-ch { font-size: 11.5px; gap: 3px; padding: 6px 3px; }
  .remote .rm-ch i { font-size: 12px; }
  .remote .rm-step button { min-width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .pv.voted, .stamp-in, .mline, .broadcast .debate-tag, .broadcast .phase { animation: none; }
  .flash-gavel { display: none; }
}

/* ---------- 위원장 지명 보고: 서류 압축·검토 장면(방송 화면 위) ---------- */
.sl-ov { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: rgba(11, 10, 20, .9); color: var(--paper); font-family: var(--font-ui); transition: opacity .3s steps(3); }
.sl-ov.bye { opacity: 0; }
.sl-top { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.sl-top b { font-family: var(--font-title); font-size: 14px; color: var(--gold-lt); font-weight: 400; }
.sl-top span { color: #cfc6da; font-size: 11px; }
.sl-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sl-funnel li { position: relative; width: var(--w); min-width: 150px; max-width: 100%; height: 17px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-4px); transition: opacity .25s steps(3), transform .25s steps(3); }
.sl-funnel li.on { opacity: 1; transform: none; }
.sl-funnel li i { position: absolute; inset: 0; background: var(--velvet2); box-shadow: 0 0 0 1.5px #000; }
.sl-funnel li:last-child i { background: var(--red); }
.sl-funnel li span { position: relative; font-size: 11px; white-space: nowrap; color: #fff; text-shadow: 1px 1px 0 #000; }
.sl-cards { flex: 1; display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 0; perspective: 400px; }
.sl-card { position: relative; width: 58px; opacity: 0; transform: translateY(10px); transition: opacity .3s steps(3), transform .3s steps(3), filter .3s steps(3); }
.sl-card.in { opacity: 1; transform: none; }
.sl-card.out { opacity: .28; transform: translateY(6px) scale(.9); filter: grayscale(1); }
.sl-flip { position: relative; width: 58px; height: 66px; transform-style: preserve-3d; transition: transform .5s steps(6); }
.sl-card.flip .sl-flip { transform: rotateY(180deg); }
.sl-f, .sl-b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--paper3); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sl-b { transform: rotateY(180deg); background: var(--gold-lt); }
.sl-f img, .sl-b img { width: 40px; height: 40px; background: #2c2338; object-fit: cover; }
.sl-f b, .sl-b b { font-size: 11px; font-weight: 400; line-height: 1.1; }
.sl-card em { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font-style: normal; font-size: 11px; color: #8fe3a4; opacity: 0; white-space: nowrap; }
.sl-card.seen em { opacity: 1; }
.sl-card.seen em::before { content: '✓ '; }
.sl-card.pick em { opacity: 0; }
.sl-stamp { position: absolute; top: -6px; right: -10px; z-index: 2; font-family: var(--font-title); font-size: 12px; line-height: 1; padding: 3px 5px; color: #fff; background: var(--red); box-shadow: 0 0 0 2px #000; transform: rotate(10deg); opacity: 0; }
.sl-card.pick .sl-stamp { opacity: 1; animation: stamp-in .35s steps(5) both; }
.sl-lens { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; opacity: 0; transition: left .25s steps(4), top .25s steps(4), opacity .2s steps(2); pointer-events: none; z-index: 3; }
.sl-lens.on { opacity: 1; }
.sl-cap { min-height: 16px; text-align: center; font-size: 11.5px; color: var(--gold-lt); }
/* 동작 줄이기: 움직임 없이 단계별 정지 화면 */
.sl-ov.still, .sl-ov.still * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sl-ov, .sl-ov * { transition: none !important; animation: none !important; } }
/* 경과보고서 Ⅰ: 추린 서류 N장 중 1장 지명(정지 그림) */
.sl-mini { display: flex; gap: 10px; align-items: flex-end; margin: 8px 0 4px; flex-wrap: wrap; }
.sl-mini .c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 4px 3px; background: var(--paper2); box-shadow: 0 0 0 1.5px var(--line); font-family: var(--font-ui); font-size: 11px; opacity: .55; }
.sl-mini .c img { width: 32px; height: 32px; background: #2c2338; }
.sl-mini .c.pick { opacity: 1; box-shadow: 0 0 0 2px var(--red); }
.sl-mini .c.pick::after { content: '지명'; position: absolute; top: -8px; right: -10px; font-family: var(--font-title); font-size: 11px; line-height: 1; padding: 2px 4px; color: #fff; background: var(--red); box-shadow: 0 0 0 1.5px #000; transform: rotate(8deg); }

/* =========================================================
   걱앤정 시작 화면 — 연애인사청문회 시작 화면 틀 위에 색·인원만 바꾼다
   (파란 뉴스 배경 → 네이비·블랙 + 금색 격자, 위원 8인 → 구성원 5인, 열린위원실 → 열린대표실)
   ========================================================= */
.splash { background:
  radial-gradient(70% 45% at 50% 36%, rgba(226,176,74,.16), rgba(20,16,10,0) 70%),
  repeating-linear-gradient(90deg, rgba(226,176,74,.05) 0 1px, transparent 1px 28px),
  repeating-linear-gradient(0deg, rgba(226,176,74,.05) 0 1px, transparent 1px 28px),
  linear-gradient(#04060d, #0c1230 55%, #05070f); }
.splash .bgm-btn { background: rgba(8,11,24,.75); box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(226,176,74,.5); }
.tvsplash .sp-tvbox { filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(226,176,74,.12)); }
/* 열린대표실: 남색 판 + 금테 */
.open-office { background: linear-gradient(135deg, #22305e, #141c3a); box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(226,176,74,.55); }
.open-office small { color: var(--gold-lt); }
/* 구성원 5인: 칸이 넓어진 만큼 얼굴을 크게, 담당도 보인다 */
.tvsplash .sp-members { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tvsplash .sp-mem { background: rgba(8,11,24,.75); box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(226,176,74,.35); padding: 5px 0 6px; }
.tvsplash .sp-mem img { width: 44px; height: 44px; background: linear-gradient(#22305e, #0f1630); }
.tvsplash .sp-mem b { font-size: 11px; }
.tvsplash .sp-mem span { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--gold-lt); }
.splash .disclaimer { color: rgba(232,236,247,.6); }
/* TV 속 하단 자막: 이름표는 금색 */
.broadcast .lower3 .l3-name { background: var(--gold); color: var(--ink); }
.broadcast .live { background: #d8283c; }
/* 첫 장면(단체사진)에는 자막을 한 줄만 둬 앞줄 얼굴을 가리지 않는다 */
.broadcast.mini.intro .lower3 .l3-sub { display: none; }
/* 클로즈업에서는 시작 안내 상자를 얼굴(화면 위 17~45%) 아래, 자막 위로 내린다 */
.tv-screen:has(.broadcast.close) .tv-start { inset: 42% 0 26%; }
/* 시작 안내 문구: 노란 테 → 금색 테 */
.tv-start b { background: rgba(8,11,24,.85); box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold), 0 0 16px rgba(226,176,74,.45); }
.tv-start b i { color: var(--gold-lt); }
@keyframes tv-start-ring { 0%, 59% { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold), 0 0 16px rgba(226,176,74,.45); } 60%, 100% { box-shadow: 0 0 0 1px #000, 0 0 0 3px #6e5220, 0 0 0 rgba(0,0,0,0); } }
.member-card img { background: linear-gradient(#22305e, #0f1630); }
.tvsplash.tight .sp-mem img { width: 34px; height: 34px; }
.tvsplash.tight .sp-mem span { display: none; }

/* =========================================================
   홈: 상담 채팅방(구성원 5인 단체 상담) — 연애인사청문회 채팅(.chat-screen·.bubble) 위에 얹는다
   ========================================================= */
.home-chat .topbar { gap: 4px; }
.home-chat .topbar .icon-btn { width: 44px; height: 44px; }
.home-chat .topbar .new-case { margin: 0 0 0 2px; min-height: 44px; padding: 4px 10px; font-size: 13px; }
.home-chat .topbar h1 .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.icon-btn.lbl { flex-direction: column; gap: 1px; color: #cfd6ea; }
.icon-btn.lbl img { width: 16px; height: 16px; } /* 32px 그림의 정확히 절반 — 픽셀이 빠지지 않게 */
.icon-btn.lbl span { font-size: 10px; line-height: 1; }
.home-chat .bubble { white-space: pre-wrap; }
.case-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--paper); background: rgba(8,11,24,.6); box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(226,176,74,.35); }
.case-head .ch-faces { display: flex; padding-right: 6px; }
.case-head .ch-faces img { width: 30px; height: 30px; margin-right: -6px; background: linear-gradient(#22305e, #0f1630); box-shadow: 0 0 0 2px #000; }
.case-head .ch-t { display: flex; flex-direction: column; min-width: 0; }
.case-head .ch-t b { font-weight: 400; font-size: 13px; }
.case-head .ch-t span { font-size: 11px; color: var(--gold-lt); }
.home-chat .bubble.sys { background: rgba(8,11,24,.8); color: #cfd6ea; box-shadow: 0 0 0 2px #000; font-size: 11.5px; }
/* 구성원 말풍선: 얼굴 + 이름·직함 + 흰 말풍선 */
.cmsg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: start; max-width: 90%; }
.cmsg .cav { width: 40px; height: 40px; background: linear-gradient(#22305e, #0f1630); box-shadow: 0 0 0 2px #000; }
.cmsg .cname { font-size: 12px; color: var(--gold-lt); margin: 0 0 4px 2px; text-shadow: 1px 1px 0 #000; }
.cmsg .cname small { font-family: var(--font-ui); font-size: 11px; color: #b9c2dc; }
.cmsg .bubble { display: inline-block; max-width: 100%; margin-left: 2px; }
.cmsg.cont { margin-top: -4px; }
.cmsg.cont .cav { visibility: hidden; height: 0; }
.cmsg.cont .cname { display: none; }
.dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.dots i { width: 6px; height: 6px; background: var(--ink); animation: dots 1s steps(2) infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 50% { opacity: .2; } }
.meeting { align-self: center; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: rgba(8,11,24,.8); color: var(--gold-lt); font-size: 12px; box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(226,176,74,.4); }
.meeting .mt-faces { display: flex; gap: 2px; }
.meeting img { width: 22px; height: 22px; animation: bob .9s steps(2) infinite; }
.meeting img:nth-child(2) { animation-delay: .18s; } .meeting img:nth-child(3) { animation-delay: .36s; } .meeting img:nth-child(4) { animation-delay: .54s; } .meeting img:nth-child(5) { animation-delay: .72s; }
@keyframes bob { 50% { transform: translateY(-3px); } }
/* 표결 카드 */
.vcard { align-self: stretch; padding: 10px 12px; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--gold-dk); }
.vc-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-family: var(--font-title); font-size: 14px; color: var(--gold-lt); }
.vc-h img { width: 18px; height: 18px; }
.vc-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-top: 4px; padding: 6px 8px; background: rgba(255,255,255,.06); font-size: 13px; }
.vc-opt.win { background: rgba(226,176,74,.18); box-shadow: inset 3px 0 0 var(--gold); }
.vc-faces { display: flex; padding-left: 4px; }
.vc-faces img { width: 22px; height: 22px; margin-left: -4px; background: #22305e; box-shadow: 0 0 0 1.5px #000; }
.vc-opt b { font-family: var(--font-mono); font-weight: 400; color: var(--gold-lt); }
.vc-result { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(226,176,74,.4); font-size: 12.5px; color: var(--gold-lt); text-align: right; }
/* 자문 의견서(종이 문서) */
.opinion { align-self: stretch; padding: 14px 16px 12px; background: var(--paper); color: var(--ink); font-family: var(--font-doc); box-shadow: 0 0 0 2px #000, inset 0 0 0 3px var(--paper3), 0 4px 0 2px rgba(0,0,0,.4); animation: stamp-in .35s steps(4) both; }
.op-org { text-align: center; font-family: var(--font-ui); font-size: 11px; letter-spacing: 2px; color: var(--velvet); }
.op-title { text-align: center; font-weight: 800; font-size: 20px; letter-spacing: 6px; margin: 4px 0; }
.op-no { text-align: center; font-family: var(--font-ui); font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 6px; }
.opinion h4 { margin: 10px 0 2px; font-size: 13px; color: var(--velvet); }
.opinion p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.opinion ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.op-date { margin-top: 12px; text-align: right; font-size: 13px; }
.op-sign { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; font-weight: 700; }
.seal { display: inline-grid; place-items: center; width: 42px; height: 42px; color: #c8323c; border: 2px solid #c8323c; font-size: 11px; font-weight: 800; letter-spacing: -1px; transform: rotate(-8deg); }
@keyframes stamp-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
/* 결론 보고서 뒤 · 지난 고민 */
.next-case, .resume { align-self: center; min-height: 44px; padding: 0 14px; border: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--gold-lt); background: rgba(8,11,24,.8); box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(226,176,74,.45); }
.resume { width: 100%; text-align: left; }
/* 위기 안내 */
.crisis { align-self: stretch; padding: 12px; color: #fff; background: #2a0f16; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #e8243a; }
.crisis b { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 400; font-family: var(--font-title); }
.cr-main { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 10px; margin-bottom: 8px; padding: 10px 12px; color: #1b0a0f; background: #fff; text-decoration: none; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #e8243a; }
.cr-main span { font-size: 14px; font-weight: 700; }
.cr-main b { grid-row: span 2; font-family: var(--font-title); font-weight: 400; font-size: 30px; color: #c8102e; }
.cr-main small { font-size: 11.5px; color: #5a3a42; }
.cr-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-list .btn { flex: 1 1 calc(50% - 8px); margin: 0; min-height: 44px; font-size: 13px; text-decoration: none; }
.crisis-mini { align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; font-size: 13px; color: #fff; text-decoration: none; background: #2a0f16; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #e8243a; }
.crisis-mini b { margin: 0 4px; font-family: var(--font-title); font-weight: 400; font-size: 18px; }
.cr-list .btn span { font-family: var(--font-mono); }
.crisis p { margin: 10px 0 0; font-size: 12px; color: #f3d6db; }
/* 예시 고민 · 입력창 */
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px 4px; background: var(--ink); }
.examples .ex-h { flex-basis: 100%; padding: 0 2px 2px; font-size: 11px; color: var(--gold-lt); }
.examples::-webkit-scrollbar { display: none; }
.examples[hidden] { display: none; }
.examples .chip { margin: 2px; min-height: 44px; padding: 6px 10px; font-size: 13px; }
.home-chat .chat-input { align-items: flex-end; }
.home-chat .chat-input textarea.input { min-height: 44px; max-height: 120px; resize: none; padding-top: 10px; }
.home-chat .chat-input .btn { min-height: 44px; margin: 0; }
/* 고민 기록 */
.case-item { cursor: pointer; padding-right: 54px; }
.case-item .ci-no { font-size: 11px; color: var(--muted); }
.case-item .ci-t { font-family: var(--font-title); font-size: 15px; margin: 2px 0; }
.case-item .ci-last { font-size: 12.5px; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.case-item .ci-del { position: absolute; right: 4px; top: 4px; min-width: 44px; min-height: 44px; font-size: 12px; }
.case-item .ci-state { display: inline-block; margin-left: 4px; padding: 0 5px; font-size: 10.5px; color: #fff; background: var(--velvet2); vertical-align: 1px; }
.case-item .ci-state.done { background: var(--green); }
.case-item .ci-state.crisis { background: #c8102e; }
@media (prefers-reduced-motion: reduce) { .dots i, .meeting img, .opinion { animation: none; } }

/* =========================================================
   보내기 연출: 고민 쪽지를 내밀면 → 공동대표가 받으러 와 '긴급' 도장 → 회의실로 가져간다
   ========================================================= */
.home-chat .chat-scroll, .home-chat .examples, .home-chat .chat-input { transition: opacity .35s steps(5), transform .35s steps(5); }
.home-chat.leaving .chat-scroll, .home-chat.leaving .examples, .home-chat.leaving .chat-input { opacity: 0; transform: translateY(10px); pointer-events: none; }
.intake-ov { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px 0; overflow: hidden;
  background: radial-gradient(60% 40% at 50% 40%, rgba(226,176,74,.14), rgba(0,0,0,0) 70%), repeating-linear-gradient(90deg, rgba(226,176,74,.04) 0 1px, transparent 1px 28px), #0a0f22; animation: fade .25s steps(3) both; }
.intake-doc { position: relative; width: 300px; padding: 14px 16px 12px; background: var(--paper); color: var(--ink); font-family: var(--font-doc);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 3px var(--paper3), 0 10px 0 -2px rgba(0,0,0,.35); }
/* 고민 받는 곳: 뒤에 공동대표(상반신), 앞에 나무 창구, 창구 위에 고민 쪽지 */
.io-stage { position: relative; width: 100%; max-width: 420px; height: 380px; flex: none; }
/* 뒷벽: 금색 '고민 받는 곳' 간판과 패널 */
.io-stage::before { content: '걱앤정 · 고민 우체국'; position: absolute; left: 50%; top: -40px; transform: translateX(-50%); padding: 6px 16px; white-space: nowrap;
  font-family: var(--font-title); font-size: 15px; color: var(--gold-lt); background: #07090f; box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #c9a24a; text-shadow: 1px 1px 0 #000; }
.io-stage::after { content: ''; position: absolute; left: 0; right: 0; top: 52px; height: 184px; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px); box-shadow: inset 0 1px 0 rgba(201,162,74,.5); }
.io-counter { position: absolute; left: 0; right: 0; top: 236px; bottom: 0; z-index: 2;
  background: linear-gradient(#a0703f 0 3px, #6b4426 3px 16px, #1f120a 16px 18px, #3a2416 18px 100%); box-shadow: inset 0 -2px 0 #000; }
.io-counter::after { content: ''; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: #c9a24a; }
.io-counter span { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); padding: 3px 12px; font-size: 12px; color: var(--gold-lt); background: #07090f; box-shadow: 0 0 0 1px #8a6a2a; white-space: nowrap; }
/* 서류 아래끝을 창구 윗면에 걸친다(길이와 상관없이) */
.io-docwrap { position: absolute; z-index: 3; left: calc(50% - 182px); bottom: 130px; width: 300px; transform: scale(.68); transform-origin: left bottom; }
.intake-ov .io-docwrap { animation: doc-push .6s cubic-bezier(.2,.9,.25,1) both; }
@keyframes doc-push { from { opacity: 0; translate: 0 60vh; rotate: 6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.intake-ov.taken .io-docwrap { animation: none; transition: transform .45s steps(6), opacity .45s steps(6), left .45s steps(6), bottom .45s steps(6); left: calc(50% + 30px); bottom: 150px; transform: scale(.08); opacity: 0; }
.io-person { position: absolute; z-index: 1; left: calc(50% + 8px); top: 100px; width: 144px; height: 200px; transform: translateX(80vw); }
.io-person .io-sprite { width: 144px; height: 200px; display: block; }
.io-person.enter { transition: transform 1.2s steps(12); transform: none; }
.io-person.exit { transition: transform 1s steps(10); transform: translateX(80vw); }
.io-person.walking .io-sprite { animation: walk-bob .3s steps(2) infinite; }
@keyframes walk-bob { 50% { transform: translateY(-4px); } }
.io-carry { position: absolute; left: 22px; top: 112px; width: 24px; height: 30px; background: var(--paper); box-shadow: 0 0 0 2px #000, inset 0 -6px 0 var(--paper3); opacity: 0; transform: rotate(-8deg); }
.taken .io-carry { opacity: 1; transition: opacity .2s steps(2) .3s; }
.io-say { position: absolute; right: -6px; bottom: 214px; width: max-content; max-width: 220px; padding: 8px 10px; font-size: 13px; line-height: 1.7; color: var(--ink); background: #fff;
  box-shadow: 0 0 0 2px #000; animation: fade .2s steps(2) both; }
.io-say::after { content: ''; position: absolute; right: 64px; bottom: -8px; width: 8px; height: 8px; background: #fff; box-shadow: 2px 2px 0 0 #000; transform: skewX(-30deg); }
.id-org { text-align: center; font-family: var(--font-ui); font-size: 11px; letter-spacing: 2px; color: var(--velvet); }
.id-title { text-align: center; font-weight: 800; font-size: 19px; letter-spacing: 5px; margin: 4px 0 2px; }
.id-no { text-align: center; font-family: var(--font-ui); font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 8px; }
.id-label { font-size: 12px; color: var(--velvet); font-weight: 700; }
.id-body { margin-top: 2px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: keep-all; max-height: 9.6em; overflow: hidden; }
.id-foot { margin-top: 10px; text-align: right; font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
.id-stamp { position: absolute; right: 14px; top: 44px; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid #c8323c; color: #c8323c;
  font-family: var(--font-title); font-size: 16px; transform: rotate(-12deg); opacity: 0; }
.stamped .id-stamp, .b-doc .id-stamp { opacity: .9; }
.intake-ov.stamped .id-stamp { animation: stamp-slam .28s steps(4) both; }
@keyframes stamp-slam { from { opacity: 0; transform: rotate(-12deg) scale(2.4); } to { opacity: .9; transform: rotate(-12deg) scale(1); } }
.io-cap { min-height: 20px; font-size: 13px; color: var(--gold-lt); text-shadow: 1px 1px 0 #000; }
.io-faces { display: flex; gap: 4px; }
.io-faces[hidden] { display: none; }
/* 방송으로 넘어가는 컷: 짧은 화면 잡음 */
.intake-ov.cut::after { content: ''; position: absolute; inset: 0; z-index: 30; background: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 2px, rgba(0,0,0,.6) 2px 4px); animation: fade .3s steps(3) both; }
.intake-ov.fast * { transition-duration: .1s !important; animation-duration: .1s !important; }
.io-faces img { width: 30px; height: 30px; background: linear-gradient(#22305e, #0f1630); box-shadow: 0 0 0 2px #000; animation: bob .9s steps(2) infinite; }
.io-faces img:nth-child(2) { animation-delay: .18s; } .io-faces img:nth-child(3) { animation-delay: .36s; } .io-faces img:nth-child(4) { animation-delay: .54s; } .io-faces img:nth-child(5) { animation-delay: .72s; }

/* =========================================================
   구성원 회의 중계(연애인사청문회 .hearing 틀): 표결판 · 방송 위 문서 · 회의록 표결
   ========================================================= */
.meeting-room { background: #080b18; }
.meeting-room .broadcast .live { background: #d8283c; }
.vote-strip { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px; background: var(--ink); border-bottom: 3px solid #000; }
.vote-strip .pv { padding: 3px 0 2px; background: #141a33; }
.vote-strip .pv img { width: 28px; height: 28px; background: #22305e; }
.vote-strip .pv i { font-size: 11px; line-height: 14px; color: #dfe4f2; }
.vote-strip .pv b { font-size: 12px; color: var(--gold-lt); }
.vote-strip .pv.speaking { background: #22305e; box-shadow: 0 0 0 2px var(--gold); }
.vote-strip .pv.voted { animation: pv-in .3s steps(3) both; }
.vote-strip .pv.win { background: #3a2f10; box-shadow: 0 0 0 2px var(--gold); }
.b-ov { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(4,6,15,.55); animation: fade .2s steps(3) both; pointer-events: none; }
.b-doc { width: 300px; flex: none; transform: scale(.6); transform-origin: center; animation: b-doc-in .35s steps(5) both; }
.b-doc.b-op { transform: scale(.5); }
.b-doc .intake-doc, .b-doc .opinion { box-shadow: 0 0 0 2px #000, inset 0 0 0 3px var(--paper3), 0 8px 0 0 rgba(0,0,0,.4); }
@keyframes b-doc-in { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
.meeting-room .lower3 .l3-name { background: var(--gold); color: var(--ink); }
.mv-g { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 10px; background: var(--paper2); box-shadow: inset 0 0 0 1.5px var(--line); }
.mv-g .mv-q { font-family: var(--font-ui); font-size: 12.5px; color: var(--velvet); }
.mv-g .opt { font-family: var(--font-doc); font-size: 13px; box-shadow: none; padding: 0; }
.mv-g .mv-votes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.mv-g .mv-votes span { font-family: var(--font-ui); font-size: 11px; padding: 1px 5px; color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink2); }
.mv-g .mv-res { font-family: var(--font-ui); font-size: 12.5px; color: #fff; background: var(--velvet); padding: 3px 8px; margin-top: 4px; }
.minutes .opinion { margin: 10px 0; }
/* 채팅방: 공방 말풍선 · 회의 다시보기 */
.cmsg.hot .bubble { box-shadow: 0 0 0 2px var(--ink), inset 3px 0 0 #d8283c; }
.cmsg .hot-tag { display: inline-block; margin-left: 5px; padding: 0 4px; font-size: 10.5px; line-height: 15px; color: #fff; background: #d8283c; vertical-align: 1px; text-shadow: none; }
.replay { align-self: center; min-height: 44px; padding: 0 14px; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; color: #dfe4f2; background: rgba(216,40,60,.18); box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(216,40,60,.6); }
@media (prefers-reduced-motion: reduce) { .intake-ov .io-docwrap, .intake-ov.stamped .id-stamp, .io-faces img, .b-doc, .b-ov, .io-person.walking .io-sprite { animation: none; } .io-person.enter, .io-person.exit, .intake-ov.taken .io-docwrap { transition: none; } }

/* 방송 위 요약 카드(읽을 수 있는 크기) · 회의 화면 글자·터치 크기 */
.b-card { position: relative; width: min(78%, 280px); padding: 10px 14px 12px; background: var(--paper); color: var(--ink); font-family: var(--font-doc);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 3px var(--paper3), 0 6px 0 0 rgba(0,0,0,.45); animation: b-doc-in .35s steps(5) both; }
.b-card .bc-t { font-weight: 800; font-size: 17px; letter-spacing: 3px; text-align: center; }
.b-card .bc-no { font-family: var(--font-ui); font-size: 11px; color: var(--muted); text-align: center; margin-bottom: 6px; }
.b-card .bc-body { font-size: 14px; line-height: 1.5; }
.b-card .bc-sign { margin-top: 6px; font-size: 12px; font-weight: 700; text-align: right; padding-right: 48px; }
.b-card .bc-stamp { position: absolute; right: 10px; top: 8px; display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid #c8323c; color: #c8323c;
  font-family: var(--font-title); font-size: 14px; transform: rotate(-12deg); }
.b-card .bc-stamp.seal-s { top: auto; bottom: 8px; width: 40px; height: 40px; font-size: 11px; border-width: 2px; }
.meeting-room .hearing-controls .seg button { min-height: 44px; }
.meeting-room .hearing-controls .btn { min-height: 44px; }
.meeting-room .broadcast .bug { font-size: 11px; }
.meeting-room .lower3 .l3-role { font-size: 11px; }
.mline .spk .hot, .cmsg .hot-tag { font-size: 11px; }
.mnote.quote b { color: var(--velvet); margin-right: 4px; }

/* =========================================================
   회의 중계: 뉴스 그래픽(속보 띠 · 속보 표식)
   ========================================================= */
.meeting-room .broadcast .lower3 { bottom: 16px; padding-bottom: 4px; }
.meeting-room .ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 16px; display: flex; align-items: center; overflow: hidden;
  font-size: 11px; background: rgba(8,11,24,.94); box-shadow: 0 -1px 0 #c9a24a; }
.meeting-room .ticker b { flex: none; height: 100%; display: flex; align-items: center; padding: 0 6px; font-weight: 400; color: #fff; background: #b0142b; }
.meeting-room .ticker span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.meeting-room .ticker i { display: inline-block; padding-left: 100%; font-style: normal; color: #e8ecf7; animation: ticker 16s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
.meeting-room .broadcast.breaking .ticker { box-shadow: 0 -1px 0 #ff9aa4; }
.meeting-room .broadcast.breaking .ticker b { animation: blink-dot 1s steps(2) infinite; }
.broadcast .flash-tag { padding: 1px 6px; color: #1b1424; background: #ffd23f; box-shadow: 0 0 0 2px #000; font-size: 11px; }
.mline .spk .hot.brief { background: var(--gold-dk); }
@media (prefers-reduced-motion: reduce) { .meeting-room .ticker i { animation: none; padding-left: 0; } }

/* =========================================================
   홈 = 걱앤정 대회의실(살아 있는 회의장 + 안내판) · 고민 쪽지 · 위기 안내 · 고민 기록 · 설정
   ========================================================= */
.room-home .screen-body { padding: 0 0 calc(16px + var(--safe-bottom)); }
.room-home .topbar .icon-btn { width: 44px; height: 44px; }
.room-home .topbar h1 .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.room-live { box-shadow: 0 3px 0 #000; }
.room-live .room-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: 11px; color: #e8ecf7; background: rgba(8,11,24,.75); }
.room-panel { margin: 12px 12px 0; padding: 12px; color: var(--paper); background: rgba(8,11,24,.82); box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(226,176,74,.45); }
.room-panel .btn { margin: 8px 0 0; }
.room-panel .btn.block { width: 100%; }
.room-panel .btn.big { min-height: 56px; font-size: 17px; letter-spacing: 1px; }
.rp-state { font-size: 13px; line-height: 1.6; }
.rp-state b { color: var(--gold-lt); font-weight: 400; }
.rp-tag { display: inline-block; margin-right: 4px; padding: 0 6px; font-size: 11px; color: #fff; background: #b0142b; }
.rp-tag.done { background: var(--green); }
.rp-q { margin-top: 8px; padding: 8px 10px; font-family: var(--font-doc); font-size: 14px; line-height: 1.6; color: var(--ink); background: var(--paper); box-shadow: inset 3px 0 0 var(--gold-dk); }
.rp-q b { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 11px; color: var(--velvet); }
.rp-row { display: flex; gap: 6px; }
.rp-row .btn { flex: 1; min-height: 44px; }
.rp-hint { margin-top: 8px; font-size: 12px; color: #cfd6ea; }
.room-note { margin: 10px 14px 0; font-size: 11px; color: #9aa2bd; text-align: center; }
/* 고민 쪽지(편지지) */
.stmt-ov { position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6,8,18,.78); animation: fade .2s steps(3) both; }
.stmt { position: relative; width: min(100%, 380px); max-height: 100%; overflow-y: auto; padding: 14px 16px; background: var(--paper); color: var(--ink); font-family: var(--font-doc);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 3px var(--paper3), 0 8px 0 0 rgba(0,0,0,.4); animation: doc-push .45s cubic-bezier(.2,.9,.25,1) both; }
.stmt-q { margin: 6px 0 8px; padding: 8px 10px; font-size: 14px; line-height: 1.6; background: #fff7e0; box-shadow: inset 3px 0 0 var(--gold2), 0 0 0 1px var(--line); }
.stmt-q b { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 11px; color: var(--velvet); }
.stmt .id-label { display: block; margin: 4px 0; font-family: var(--font-ui); font-weight: 400; font-size: 12px; }
.stmt-t { width: 100%; min-height: 140px; padding: 10px; border: 0; resize: vertical; font-family: var(--font-doc); font-size: 15px; line-height: 26px; color: var(--ink);
  background: repeating-linear-gradient(transparent 0 25px, #e2d6bb 25px 26px), #fffdf6; box-shadow: inset 0 0 0 2px var(--line); }
.stmt-t { background-position: 0 10px; background-attachment: local; } /* 줄을 글자 행(26px)에 맞추고 스크롤과 함께 움직이게 */
.stmt-t:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold-dk); }
.stmt-count { text-align: right; font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
.stmt-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.stmt-ex > span { flex-basis: 100%; font-family: var(--font-ui); font-size: 11px; color: var(--velvet); }
.stmt-ex .chip { margin: 0; min-height: 44px; font-family: var(--font-ui); font-size: 12.5px; }
.stmt-btns { display: flex; gap: 8px; margin-top: 12px; }
.stmt-btns .btn { flex: 1; margin: 0; min-height: 48px; }
/* 위기 안내 팝업 */
.crisis-pop .crisis-box { width: min(100%, 380px); max-height: 92%; overflow-y: auto; padding: 14px; color: #fff; background: #1a0b10; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #e8243a; }
.cp-who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cp-who img { width: 40px; height: 40px; background: #22305e; box-shadow: 0 0 0 2px #000; }
.cp-who b { font-weight: 400; color: var(--gold-lt); }
.cp-line { margin: 6px 0; font-size: 14px; line-height: 1.6; }
.crisis-pop .crisis { margin: 10px 0; }
/* 고민 기록(하나) */
.rec-turn .rt-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.rec-turn .rt-h b { font-family: var(--font-title); font-weight: 400; font-size: 15px; }
.rec-turn .rt-h span { font-size: 11px; color: var(--muted); }
.rec-turn .rt-q { margin-bottom: 8px; padding: 8px 10px; font-family: var(--font-doc); font-size: 14px; line-height: 1.6; background: var(--paper2); box-shadow: inset 3px 0 0 var(--line); white-space: pre-wrap; }
.rec-turn .rt-q span { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--velvet); }
.rec-turn .btn { margin: 0 0 8px; min-height: 44px; }
.rec-turn .vcard, .rec-turn .opinion { margin-top: 8px; }
/* 설정 */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 0; border-bottom: 1px dashed var(--line); cursor: pointer; }
.set-row:last-child { border-bottom: 0; }
.set-row b { display: block; font-weight: 400; font-size: 14px; }
.set-row small { font-size: 11.5px; color: var(--muted); }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 52px; height: 30px; margin: 0; cursor: pointer; background: #9aa2bd; box-shadow: 0 0 0 2px var(--ink); position: relative; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; background: #fff; box-shadow: 0 0 0 2px var(--ink); transition: left .15s steps(3); }
.switch:checked { background: var(--green); }
.switch:checked::after { left: 25px; }
.switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.io-faces img.off { opacity: .25; animation: none; }

/* ---------------- 토론 중계 그래픽(속보 오프닝 · 모서리 꼬리표 · 표결 집계 · 질문 · 끝 화면) */
.meeting-room .lower3 .l3-sub { background: rgba(10,8,20,.97); }
.broadcast .ctag { position: absolute; right: 8px; top: 30px; z-index: 2; font-family: var(--font-ui); font-size: 11px; line-height: 1; padding: 4px 7px; color: var(--gold-lt); background: rgba(10,8,20,.85); box-shadow: 0 0 0 1.5px var(--gold2); }
.broadcast.debating .ctag { visibility: hidden; }
.broadcast .bn { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(4,6,15,.82); pointer-events: none; animation: fade .15s steps(2) both; }
.broadcast .bn .news-logo { width: 78%; }
.broadcast .bn .bn-sub { font-family: var(--font-ui); font-size: 12px; color: #fff; background: rgba(0,0,0,.6); padding: 3px 8px; box-shadow: 0 0 0 1.5px var(--gold2); max-width: 92%; text-align: center; }
.b-card .bc-stamp.slam { animation: stamp-slam .28s steps(4) both; }
.b-tally .bt-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px; font-family: var(--font-ui); font-size: 13px; border-bottom: 1px dashed var(--line); }
.b-tally .bt-row b { font-weight: 400; }
.b-tally .bt-row.win { background: #fff1c9; box-shadow: inset 3px 0 0 var(--gold2); }
.b-tally .bc-stamp { top: auto; bottom: 6px; right: 8px; }
.b-q .bc-sign { padding-right: 0; text-align: center; font-family: var(--font-ui); font-weight: 400; font-size: 11px; color: var(--velvet); }
.b-end { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 20px; background: rgba(10,8,20,.9); box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px #000; }
.b-end b { font-family: var(--font-title); font-weight: 400; font-size: 24px; color: var(--gold-lt); letter-spacing: 4px; }
.b-end span { font-family: var(--font-ui); font-size: 13px; color: #fff; }
.b-end i { font-style: normal; font-family: var(--font-small); font-size: 11px; color: #cfd6ea; }
.mstage.sm { margin: 10px auto 8px; width: fit-content; padding: 2px 10px; font-size: 11px; background: var(--paper2); color: var(--velvet); box-shadow: 0 0 0 1.5px var(--gold2) inset; }
.mline.press { grid-template-columns: 34px 1fr; }
.mline.press .mic-ico { display: grid; place-items: center; width: 34px; height: 34px; background: var(--ink); box-shadow: 0 0 0 2px var(--gold2); }
.mline.press .spk b { color: var(--navy2); }
.on-dark .ai-note { color: #dfe4f2; font-size: 11.5px; }
.on-dark .ai-note b { color: var(--gold-lt); }
@media (prefers-reduced-motion: reduce) { .broadcast .bn, .b-card .bc-stamp.slam { animation: none; } }
.b-doc .bc-stamp:not(.slam) { opacity: 0; }
/* 홈: 자막은 위로(의장석 마이크·타이머를 가리지 않게), 전경 아래 출석 구성원 줄 */
.room-live .room-cap { top: auto; bottom: 6px; right: auto; max-width: 46%; left: 6px; padding: 2px 7px; box-shadow: 0 0 0 1.5px rgba(0,0,0,.6); } /* 벽 모니터·의장석 LED 를 가리지 않게 왼쪽 아래 */
.room-roster { border-bottom: 0; }
.room-roster .pv { border: 0; color: inherit; cursor: pointer; min-height: 52px; font: inherit; }
.room-roster .pv b { font-size: 10.5px; color: var(--gold-lt); }
.room-roster .pv:active { background: #22305e; }
/* 고민 받는 곳: 생성 그림(www/art/counter.png). 벽·창구 전체를 무대 배경으로, 창구 앞면만 한 번 더 앞에 깔아 대표가 창구 뒤에 서게 한다 */
.io-stage { background: url(../art/counter.png) center bottom / auto 380px no-repeat; image-rendering: pixelated; }
.io-stage::before, .io-stage::after, .io-counter::after { content: none; }
.io-counter { background: url(../art/counter.png) center bottom / auto 380px no-repeat; image-rendering: pixelated; box-shadow: none; }
.io-sign { position: absolute; left: 50%; top: -46px; z-index: 3; transform: translateX(-50%); height: 36px; width: auto; image-rendering: pixelated; }
.io-person { width: auto; height: 192px; top: 104px; }
.io-person .io-sprite { width: auto; height: 192px; image-rendering: pixelated; }
.b-end .be-logo { height: 36px; width: auto; image-rendering: pixelated; }

/* ---------------- 생성 장식 그래픽(www/art/ui_*.png — Higgsfield 로 만든 금테·리본·양피지·인장·버튼 판) */
.broadcast .phase { width: 240px; height: 60px; padding: 0 0 20px; display: flex; align-items: center; justify-content: center; font-size: 17px;
  color: var(--gold-lt); text-shadow: 1px 1px 0 #000, -1px 0 0 #000; background: url(../art/ui_ribbon.png) center / 100% 100% no-repeat; box-shadow: none; image-rendering: pixelated; }
.broadcast .phase.alert { color: #fff4c2; background: url(../art/ui_ribbon_red.png) center / 100% 100% no-repeat; box-shadow: none; } /* 예전 빨간 상자(474행)의 배경색까지 지운다 */
.broadcast .ctag { height: 22px; line-height: 22px; padding: 0 2px; border-style: solid; border-width: 0 12px; border-image: url(../art/ui_tag.png) 0 22 fill / 0 12px stretch;
  background: none; box-shadow: none; image-rendering: pixelated; text-shadow: 1px 1px 0 #000; }
.b-card { border: 18px solid transparent; border-image: url(../art/ui_card.png) 26 fill / 18px stretch; background: none; box-shadow: none; padding: 0 2px 2px;
  image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0,0,0,.45)); }
.b-card .bc-stamp { right: 0; top: -6px; }
.b-card .bc-seal { position: absolute; right: -4px; bottom: -6px; width: 44px; height: auto; image-rendering: pixelated; }
.b-end { background: none; box-shadow: none; padding: 0; gap: 4px; }
.b-end .be-seal { width: 52px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.b-end .be-plaque { display: flex; align-items: center; justify-content: center; width: 300px; height: 46px; font-family: var(--font-title); font-size: 15px; color: var(--gold-lt);
  text-shadow: 1px 1px 0 #000; background: url(../art/ui_plaque.png) center / 100% 100% no-repeat; image-rendering: pixelated; }
.b-end i { padding: 2px 8px; background: rgba(4,6,15,.7); }
.opinion .seal-img { width: 44px; height: auto; vertical-align: middle; image-rendering: pixelated; transform: rotate(-8deg); }
.btn.lux { --fg: var(--gold-lt); min-height: 54px; padding: 0 8px; border: 12px solid transparent; border-image: url(../art/ui_button.png) 22 fill / 12px stretch;
  background: none; box-shadow: none; color: var(--gold-lt); text-shadow: 1px 1px 0 #000; image-rendering: pixelated; }
.btn.lux:active { transform: translateY(2px); box-shadow: none; filter: brightness(1.15); }
/* 판(기록·설정·구성원 소개)은 양피지, 홈 안내판은 금테 남색 판 — 생성 그림 9칸 늘이기 */
.pbox:not(.dark):not(.gold):not(.velvet) { border: 16px solid transparent; border-image: url(../art/ui_card.png) 26 fill / 16px stretch; background: none; box-shadow: none;
  padding: 2px 4px 4px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.room-panel { border: 12px solid transparent; border-image: url(../art/ui_button.png) 22 fill / 12px stretch; background: none; box-shadow: none; padding: 2px 4px 6px; image-rendering: pixelated; }
/* 고민 받는 곳: 대표가 말을 시작할 때 아래를 붙인 채 눌렸다 늘어났다 돌아온다 */
.io-person .io-sprite { transform-origin: 50% 100%; }
.io-person .io-sprite.boing { animation: boing .28s steps(6) both; }
@keyframes boing { 0% { transform: scale(1, 1); } 30% { transform: scale(1.06, .91); } 65% { transform: scale(.95, 1.08); } 100% { transform: scale(1, 1); } }
@media (prefers-reduced-motion: reduce) { .io-person .io-sprite.boing { animation: none; } }
/* ---------------- 디자인 검증(10-17) 반영 */
.b-card.b-doc { width: min(78%, 280px); transform: none; }                 /* 예전 쪽지용 .b-doc(60% 축소)이 낭독 카드에 걸리지 않게 */
.meeting-room .lower3 .l3-sub { background: #0b0a16; }                       /* 불투명 — 아래 명패 글자가 비치지 않게 */
.broadcast .lower3.dim .l3-name, .broadcast .lower3.dim .l3-role { opacity: .35; } /* 반응 컷: 화면 속 사람과 이름 막대가 달라 보이지 않게 */
.broadcast.carding .ctag { visibility: hidden; }                              /* 카드가 떠 있는 동안 모서리 꼬리표를 가리지 않게 숨김 */
.b-ov.end { background: none; align-items: flex-end; padding-bottom: 26px; } /* 끝 화면: 어둡게 깔지 않고 아래 1/3 에 — 인사하는 대표가 보이게 */
.b-end .be-plaque { position: relative; padding-left: 30px; }
.b-end .be-plaque .be-seal { position: absolute; left: -14px; top: 50%; width: 44px; transform: translateY(-50%); }
/* 팔레트 밖 초록 대신 금색(결론 발표 꼬리표 · 설정 스위치) */
.case-item .ci-state.done, .rp-tag.done { background: #b8862c; color: #fff4c2; }
.switch:checked { background: var(--gold2); }
/* 고민 하나 화면: 양피지 판 안의 결론 보고서는 겹종이로 보이지 않게, 아래 버튼과 간격 */
.pbox .opinion { box-shadow: none; background: transparent; padding: 6px 4px 4px; }
.pbox .opinion + .btn { margin-top: 12px; }
/* 장식 그림 1:1 판본(10-17): 모서리 장식이 조각 안에 다 들어가고, 화면 크기 그대로 그려 금테 선이 빠지지 않게 */
.pbox:not(.dark):not(.gold):not(.velvet) { border-width: 18px; border-image: url(../art/ui_card_s.png) 18 fill / 18px stretch; padding: 0 2px 2px; }
.b-card { border-width: 18px; border-image: url(../art/ui_card_s.png) 18 fill / 18px stretch; }
.btn.lux { border-width: 12px; border-image: url(../art/ui_button_s.png) 12 fill / 12px stretch; }
.room-panel { border-width: 12px; border-image: url(../art/ui_button_s.png) 12 fill / 12px stretch; }
.broadcast .ctag { border-width: 0 15px; border-image: url(../art/ui_tag_s.png) 0 15 fill / 0 15px stretch; padding: 0 1px; }
.b-end .be-plaque { background-image: url(../art/ui_plaque_s.png); }

/* ================= 생성 그림 2차(10-17): 방송 그래픽 · 버튼 · 조작 요소(www/art/bc_* · btn_* · seg_* · sw_* · bubble). 모두 화면 크기 1:1 */
/* 방송 표식: LIVE 붉은 유리판, 채널·시계 검은 유리판(양 끝 7px 는 그대로, 가운데만 늘림) */
.broadcast .live, .broadcast .ch, .broadcast .clock { height: 20px; line-height: 20px; padding: 0 2px; border-style: solid; border-width: 0 7px; background: none; box-shadow: none; text-shadow: 1px 1px 0 #000; image-rendering: pixelated; }
.broadcast .live { border-image: url(../art/bc_live.png) 0 7 fill / 0 7px stretch; color: #fff; }
.broadcast .ch, .broadcast .clock { border-image: url(../art/bc_glass.png) 0 7 fill / 0 7px stretch; color: var(--gold-lt); }
.broadcast .flash-tag { display: none !important; }   /* 속보 띠에 '속보'가 이미 있어 노란 상자는 뺀다 */
/* '공방 중' · 속보 띠 라벨: 진홍 꼬리표 */
.broadcast .debate-tag { height: 22px; line-height: 22px; padding: 0 2px; border-style: solid; border-width: 0 12px; border-image: url(../art/bc_red.png) 0 12 fill / 0 12px stretch;
  background: none; box-shadow: none; color: #fff4c2; text-shadow: 1px 1px 0 #000; image-rendering: pixelated; }
.meeting-room .ticker b { padding: 0 2px; border-style: solid; border-width: 0 8px; border-image: url(../art/bc_red.png) 0 12 fill / 0 8px stretch; background: none; color: #fff4c2; image-rendering: pixelated; }
/* 하단 자막: 금박 이름판 · 양피지 직함판 · 남색 유리 자막판 */
.broadcast .lower3 .l3-name, .meeting-room .lower3 .l3-name { height: 24px; line-height: 24px; padding: 0 3px; border-style: solid; border-width: 0 8px; border-image: url(../art/bc_name.png) 0 8 fill / 0 8px stretch;
  background: none; box-shadow: none; color: #1b1424; image-rendering: pixelated; }
.broadcast .lower3 .l3-role, .meeting-room .lower3 .l3-role { height: 20px; line-height: 20px; padding: 0 2px; margin-left: 2px; vertical-align: 2px; border-style: solid; border-width: 0 6px; border-image: url(../art/bc_role.png) 0 6 fill / 0 6px stretch;
  background: none; box-shadow: none; color: #1b1424; image-rendering: pixelated; }
.broadcast .lower3 .l3-sub, .meeting-room .lower3 .l3-sub { border: 4px solid transparent; border-image: url(../art/bc_sub.png) 4 fill / 4px stretch; background: #0b0f24; box-shadow: none; padding: 1px 4px; image-rendering: pixelated; }
.tv .broadcast .lower3 .l3-name, .tv .broadcast .lower3 .l3-role { height: 18px; line-height: 18px; }
.tv .broadcast .lower3 .l3-name { border-width: 0 6px; border-image-width: 0 6px; }
/* 도장(긴급 · 가결 · 동수 · 쪽지 '긴급'): 인주 도장 틀 그림 위에 붉은 글자 */
.b-card .bc-stamp, .id-stamp { border: 0; background: url(../art/bc_stamp.png) center / 100% 100% no-repeat; image-rendering: pixelated; width: 52px; height: 48px; }
/* 상단바: 남색 금테 띠(양 끝 꽃장식 40px 그대로) — 글자·버튼은 그 위에 */
.topbar { position: relative; background: #0b1024; box-shadow: none; border-bottom: 0; }
.topbar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; pointer-events: none; border-style: solid; border-width: 8px 26px; border-image: url(../art/bc_header.png) 10 40 fill / 8px 26px stretch; image-rendering: pixelated; z-index: 0; opacity: .95; }
.topbar > * { position: relative; z-index: 1; }
/* 버튼: 양피지 · 진홍(위험) · 남색 금테, 금테 버튼 눌림 — 위기 안내 창은 장식 없이 그대로 */
.btn.paper:not(.crisis-pop .btn):not(.crisis .btn) { border: 12px solid transparent; border-image: url(../art/btn_paper.png) 12 fill / 12px stretch; background: none; box-shadow: none; padding: 0 6px; min-height: 48px; image-rendering: pixelated; }
.btn.red:not(.crisis-pop .btn) { border: 12px solid transparent; border-image: url(../art/btn_red.png) 12 fill / 12px stretch; background: none; box-shadow: none; padding: 0 6px; min-height: 48px; color: #fff4c2; text-shadow: 1px 1px 0 #000; image-rendering: pixelated; }
.btn.navy:not(.crisis-pop .btn) { border: 12px solid transparent; border-image: url(../art/ui_button_s.png) 12 fill / 12px stretch; background: none; box-shadow: none; padding: 0 6px; color: var(--gold-lt); text-shadow: 1px 1px 0 #000; image-rendering: pixelated; }
.btn.sm.paper:not(.crisis-pop .btn):not(.crisis .btn), .btn.sm.navy:not(.crisis-pop .btn) { min-height: 44px; font-size: 13px; }
.btn.paper:active:not(.crisis-pop .btn), .btn.red:active, .btn.navy:active { box-shadow: none; filter: brightness(1.12); }
.btn.lux:active { border-image-source: url(../art/btn_glow.png); }
/* 배속 3칸: 남색 금테 판, 고른 칸은 금판 */
.hearing-controls .seg { background: url(../art/seg_bar.png) center / 100% 100% no-repeat; box-shadow: none; image-rendering: pixelated; }
.hearing-controls .seg button { border-right: 0; color: var(--gold-lt); text-shadow: 1px 1px 0 #000; background: none; }
.hearing-controls .seg button.on { background: url(../art/seg_on.png) center / 100% 100% no-repeat; color: #1b1424; text-shadow: none; image-rendering: pixelated; }
/* 설정 스위치: 금 토글 */
.switch { width: 64px; height: 28px; background: url(../art/sw_off.png) center / 100% 100% no-repeat; box-shadow: none; image-rendering: pixelated; }
.switch::after { display: none; }
.switch:checked { background: url(../art/sw_on.png) center / 100% 100% no-repeat; }
/* 고민 받는 곳 말풍선: 양피지 금테(꼬리 오른쪽 아래) */
.io-say { background: none; box-shadow: none; border-style: solid; border-width: 18px 30px 24px 22px; border-image: url(../art/bubble.png) 20 52 26 22 fill / 18px 30px 24px 22px stretch; padding: 0 4px 0 2px; image-rendering: pixelated; }
.io-say::after { display: none; }
/* 남은 단색 요소(10-17 2차): 기본 금색 버튼 → 금테 남색 판, 예시 칩 → 작은 금테 판 */
.btn:not(.paper):not(.red):not(.navy):not(.green):not(.ghost):not(.lux):not(.crisis-pop .btn):not(.crisis .btn) {
  border: 12px solid transparent; border-image: url(../art/ui_button_s.png) 12 fill / 12px stretch; background: none; box-shadow: none;
  padding: 0 8px; min-height: 52px; color: var(--gold-lt); text-shadow: 1px 1px 0 #000; image-rendering: pixelated; }
.btn:not(.paper):not(.red):not(.navy):not(.green):not(.ghost):not(.crisis-pop .btn):not(.crisis .btn):active { border-image-source: url(../art/btn_glow.png); box-shadow: none; }
.stmt-ex .chip { border: 10px solid transparent; border-image: url(../art/ui_button_s.png) 12 fill / 10px stretch; background: none; box-shadow: none;
  padding: 0 4px; min-height: 44px; color: var(--gold-lt); text-shadow: 1px 1px 0 #000; image-rendering: pixelated; }
.stmt-ex .chip:active { border-image-source: url(../art/btn_glow.png); }
.ai-note .an-seal { flex: none; width: 22px; height: 22px; image-rendering: pixelated; }
/* 고민 받는 곳 간판: 위쪽 빈 공간에 떠 있지 않게 창구 앞판(가운데 장식 자리)에 붙인다 */
.io-sign { top: auto; bottom: 30px; height: 34px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)); }
/* 장식 비율 오류 수정(10-17): 9칸 늘이기의 가장자리 조각은 가로·세로를 같은 배율로(꽃문양·말풍선 꼬리가 눌리지 않게) */
.topbar::before { height: 44px; border-width: 0 40px; border-image: url(../art/bc_header.png) 0 40 fill / 0 40px stretch; }   /* 띠 높이 = 그림 높이(44) → 양 끝 꽃장식 1:1 */
.io-say { border-width: 18px 47px 23px 20px; border-image: url(../art/bubble.png) 20 52 26 22 fill / 18px 47px 23px 20px stretch; padding: 0 0 0 2px; }  /* 모두 0.9배 */
.meeting-room .ticker b { border-width: 0 9px; border-image: url(../art/bc_red.png) 0 12 fill / 0 9px stretch; } /* 높이 16 ≈ 22×0.73 → 양 끝도 0.75배 */
/* ---------------- 생성 그림 3차(10-17): 금박 제목 · 열린대표실 카드 · 구성원 카드 */
.topbar h1 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; }
.topbar h1 .tb-title { display: block; height: 24px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.topbar h1 .tb-text { font-family: var(--font-title); font-size: 17px; color: var(--gold-lt); text-shadow: 0 1px 0 #5a3a10, 1px 2px 0 #000; letter-spacing: .5px; }
.topbar h1 .sub { margin-top: 1px; }
/* 열린대표실: 금테 남색 카드(왼쪽 액자 창에 두 대표), 양 끝 장식은 1:1, 가운데만 늘린다 */
.open-office { position: relative; display: block; width: 100%; height: 105px; padding: 0; text-align: left; color: #fff;
  border-style: solid; border-width: 0 50px 0 131px; border-image: url(../art/oo_card.png) 0 50 0 131 fill / 0 50px 0 131px stretch;
  background: none; box-shadow: none; image-rendering: pixelated; overflow: visible; }
.open-office img[data-ceo], .tvsplash.tight .open-office img[data-ceo] { position: absolute; left: -83px; top: 21px; width: 72px; height: 68px; object-fit: cover; object-position: center top; }
.open-office .oo-text { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 2px 6px 4px; }
.open-office img.oo-title, .tvsplash.tight .open-office img.oo-title { height: 22px; width: auto; object-fit: fill; align-self: flex-start; image-rendering: pixelated; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.open-office small { font-size: 11.5px; color: #e8d9a8; }
.open-office em { font-size: 12px; line-height: 1.4; color: #fff; }
.tvsplash .sp-divider { display: block; width: 240px; height: auto; margin: 6px auto 2px; image-rendering: pixelated; }
/* 구성원 카드: 아치 초상 창 + 금 명판(이름) + 아래 담당 */
.tvsplash .sp-mem { position: relative; display: block; aspect-ratio: 62 / 100; padding: 0; border: 0; background: url(../art/mem_card.png) center / 100% 100% no-repeat; box-shadow: none; image-rendering: pixelated; }
.tvsplash .sp-mem img { position: absolute; left: 50%; top: 21%; width: 56%; height: auto; aspect-ratio: 1; transform: translateX(-50%); background: none; }
.tvsplash .sp-mem b { position: absolute; left: 14%; right: 14%; top: 76%; height: 12%; display: flex; align-items: center; justify-content: center; font-size: 9.5px; color: #1b1424; line-height: 1; }
.tvsplash .sp-mem span { position: absolute; left: 0; right: 0; bottom: 1%; display: block; text-align: center; font-size: 8px; color: var(--gold-lt); }
/* 상단바: 금테 띠(높이 44) 안에 제목·버튼이 들어가게 위아래 여백을 줄이고 띠를 내용에 맞춘다. 버튼 뒤에는 짙은 원판(꽃장식과 겹쳐 보이지 않게) */
.topbar { padding: calc(4px + var(--safe-top)) 8px 4px; min-height: 52px; }
.topbar::before { top: auto; bottom: 4px; height: 44px; }
.topbar h1 .tb-title { height: 22px; }
.topbar h1 .sub { font-size: 10px; line-height: 1.1; }
.topbar .icon-btn { background: radial-gradient(closest-side, rgba(11,16,36,.96) 78%, rgba(11,16,36,0) 100%); }
/* 상단바 띠 56px(양 끝 꽃장식 51px 1:1). 뒤로 가기 버튼이 없는 화면은 제목을 왼쪽 장식 밖으로 */
.topbar { padding: calc(2px + var(--safe-top)) 8px 2px; min-height: calc(60px + var(--safe-top)); }   /* 안쪽 높이 = 금테 띠 56 → 노치가 있어도 제목·부제가 띠 가운데(띠 테두리에 걸치지 않게) */
.topbar::before { bottom: 2px; height: 56px; border-width: 0 51px; border-image: url(../art/bc_header.png) 0 51 fill / 0 51px stretch; }
.topbar > h1:first-child { padding-left: 40px; }
.topbar h1 .sub { margin-top: 2px; }
/* 고민 받는 곳 말풍선 가운데 정렬(10-17): 오른쪽 테두리(47)는 꼬리 자리까지 포함 → 왼쪽도 47로 맞추고, 아래 꼬리(16)만큼 글자를 올린다 */
.io-say { text-align: center; max-width: 250px; padding: 0 0 10px 27px; }
/* 상단바 4차(10-17): 띠 끝 조각 = 금테 + 꽃 한 송이(40px, 1:1 — 잎사귀 장식이 좁은 화면에서 눌리던 것을 걷어 냄).
   제목·뒤로·버튼은 양 끝 꽃 안쪽에만 둔다 */
.topbar { padding-left: 38px; padding-right: 36px; }
.topbar::before { border-width: 0 40px; border-image: url(../art/bc_header.png) 0 40 fill / 0 40px stretch; }
.topbar > h1:first-child { padding-left: 2px; }
.topbar h1 .tb-title { height: 24px; }   /* 제목 글씨 그림은 1:1(24) — 22로 줄이면 픽셀이 빠진다 */
@media (max-width: 340px) {   /* 아주 좁은 화면: 제목 + 버튼 셋이 꽃 안쪽에 들어가게 버튼 간격을 줄인다 */
  .room-home .topbar { gap: 4px; }
  .room-home .topbar .icon-btn { width: 42px; min-width: 42px; }
}
/* ---------------- 디자인 재검증 2차 반영(10-17) */
.meeting-room .broadcast .live { background: none; }   /* 예전 빨간 바탕(1148행)이 금테 팔각형 모서리로 비치지 않게 */
.broadcast .lower3.vs-right { text-align: right; }      /* 공방 2분할에서 말하는 사람이 오른쪽이면 이름판도 오른쪽 */
.broadcast .lower3.vs-right .l3-sub { text-align: left; }
/* 남은 단색 상자 → 생성 그림 판(모두 높이 1:1, 양 끝 조각 그대로) */
.broadcast.mini .phase-tag { height: 22px; line-height: 22px; padding: 0 1px; border-style: solid; border-width: 0 15px; border-image: url(../art/ui_tag_s.png) 0 15 fill / 0 15px stretch;
  background: none; box-shadow: none; color: var(--gold-lt); text-shadow: 1px 1px 0 #000; image-rendering: pixelated; }
.broadcast.mini.heated .phase-tag { border-width: 0 12px; border-image: url(../art/bc_red.png) 0 12 fill / 0 12px stretch; background: none; box-shadow: none; color: #fff4c2; }
.onair-label b, .tvsplash.tight .onair-label b { height: 20px; line-height: 20px; padding: 0 3px; font-size: 14px; border-style: solid; border-width: 0 7px; border-image: url(../art/bc_live.png) 0 7 fill / 0 7px stretch;
  background: none; box-shadow: none; text-shadow: 1px 1px 0 #000; image-rendering: pixelated; }
.tv-start b { border: 12px solid transparent; border-image: url(../art/ui_button_s.png) 12 fill / 12px stretch; background: none; box-shadow: none; padding: 0 4px; line-height: 1.3; image-rendering: pixelated; }
.tv-start.show b { animation: tv-start-glow 1.2s steps(1) infinite; }
@keyframes tv-start-glow { 0%, 59% { border-image-source: url(../art/btn_glow.png); } 60%, 100% { border-image-source: url(../art/ui_button_s.png); } }
.rp-tag, .case-item .ci-state { height: 22px; line-height: 22px; padding: 0 1px; vertical-align: middle; border-style: solid; border-width: 0 12px; border-image: url(../art/bc_red.png) 0 12 fill / 0 12px stretch;
  background: none; box-shadow: none; color: #fff4c2; text-shadow: 1px 1px 0 #000; image-rendering: pixelated; }
.rp-tag.done, .case-item .ci-state.done { border-width: 0 15px; border-image: url(../art/ui_tag_s.png) 0 15 fill / 0 15px stretch; background: none; color: var(--gold-lt); }
.case-item .ci-state.crisis { border: 0; background: #3a2a4a; color: #e8e1f2; height: auto; line-height: 1.6; padding: 0 6px; text-shadow: none; }   /* 위기 고민은 장식 없이 조용히 */
.room-live .room-cap, .broadcast .bn .bn-sub { border: 4px solid transparent; border-image: url(../art/bc_sub.png) 4 fill / 4px stretch; background: none; box-shadow: none; image-rendering: pixelated; }
.b-end i { border: 4px solid transparent; border-image: url(../art/bc_sub.png) 4 fill / 4px stretch; background: none; padding: 0 6px; }
/* 하단 자막: 카드가 떠 있는 동안 숨기고, 이름판·자막판·속보 띠 사이 틈을 없앤다(틈으로 명패·LED 가 반쯤 보이지 않게) */
.broadcast.carding .lower3 { visibility: hidden; }
.meeting-room .broadcast .lower3 { padding-bottom: 0; font-size: 0; line-height: 0; }
.meeting-room .lower3 .l3-sub { margin-top: 0; }
/* 끝 화면: 명판과 안내 글 사이 틈으로 단상 글자가 잘려 보이지 않게 붙인다 */
.b-end { gap: 0; }
.b-end i { margin-top: -2px; }
/* 속보 띠 라벨: 띠 높이(16)에 맞춰 따로 만든 bc_red_s(62x16) 를 1:1 로 — 꽃이 뭉개지지 않게 */
.meeting-room .ticker b { border-width: 0 12px; border-image: url(../art/bc_red_s.png) 0 12 fill / 0 12px stretch; padding: 0 1px; }
/* 배속 3칸: 글자가 모서리 꽃에 닿지 않게 조금 작게 */
.hearing-controls .seg button { font-size: 11px; letter-spacing: -.3px; padding: 0; }
/* 예시 칩: 버튼 판 조각 12px 를 1:1 로 */
.stmt-ex .chip { border-width: 12px; border-image: url(../art/ui_button_s.png) 12 fill / 12px stretch; padding: 0 2px; }
/* 눌림은 금빛 판으로 통일(남색·양피지 버튼도) */
.btn.navy:active:not(.crisis-pop .btn), .btn.paper:active:not(.crisis-pop .btn):not(.crisis .btn) { border-image-source: url(../art/btn_glow.png); filter: none; color: var(--gold-lt); text-shadow: 1px 1px 0 #000; }

/* ================= 처음 시작 안내(10-17): 약관 동의 → 걱앤정 멤버십 → 이용 안내. 시작 화면과 같은 남색 바탕, 금 명판 제목, 양피지 카드 */
.onb { position: absolute; inset: 0; z-index: 5; pointer-events: auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at 50% 0%, #17204a 0%, #080b18 62%) #080b18; animation: fade .2s steps(3) both; }
.onb::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(120,150,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,150,255,.05) 1px, transparent 1px); background-size: 24px 24px; }
.onb.out { opacity: 0; transition: opacity .2s steps(3); }
.onb-in { position: relative; max-width: 420px; min-height: 100%; margin: 0 auto; padding: calc(16px + var(--safe-top)) 16px calc(18px + var(--safe-bottom));
  display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.onb-steps { display: flex; justify-content: center; gap: 12px; }
.onb-steps img { width: 22px; height: 22px; image-rendering: pixelated; filter: grayscale(1) brightness(.55); opacity: .7; }
.onb-steps img.on { filter: none; opacity: 1; transform: scale(1.18); }
.onb-plaque, .ms-plaque { align-self: center; width: 300px; max-width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; padding-bottom: 2px;
  background: url(../art/ui_plaque_s.png) center / 100% 100% no-repeat; image-rendering: pixelated; font-family: var(--font-title); font-size: 16px; color: var(--gold-lt); text-shadow: 1px 1px 0 #000; letter-spacing: 1px; }
.onb-ceo { align-self: center; width: 224px; height: 150px; object-fit: cover; object-position: 50% 30%; image-rendering: pixelated; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold), 0 0 0 6px #000; }
.onb-card { margin: 0; color: var(--ink); }
.onb-lead { margin: 0 0 10px; font-size: 13px; line-height: 1.65; text-align: center; }
.onb-lead b, .onb-free b, .onb-offer b { color: #7a1020; font-weight: 700; }
.onb-all { display: flex; align-items: center; gap: 10px; padding: 10px 6px; font-weight: 700; font-size: 14px; border-bottom: 2px solid rgba(138,106,42,.35); cursor: pointer; }
.onb-list { list-style: none; margin: 4px 0 8px; padding: 0; }
.onb-list li { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; border-bottom: 1px dashed rgba(138,106,42,.3); }
.onb-list label { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.45; cursor: pointer; padding: 6px 0; }
.onb-list em { font-style: normal; font-size: 10px; color: #fff4c2; background: #8c1d2c; padding: 1px 4px; margin-right: 5px; vertical-align: 1px; }
.onb-view { flex: none; min-width: 44px; min-height: 36px; background: none; border: 0; color: #6b4a12; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.onb-chk { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; background: #fff8e6; cursor: pointer;
  box-shadow: inset 0 0 0 2px #8a6a2a, inset 2px 2px 0 2px #e9d9b0; }
.onb-chk:checked { background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' shape-rendering='crispEdges'%3E%3Cpath fill='%231b1424' d='M1 5h2v1h1v1h1V6h1V5h1V4h1V3h1V2h1v2H9v1H8v1H7v1H6v1H5v1H4V8H3V7H2V6H1z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  box-shadow: inset 0 0 0 2px #5a3d0c, inset -2px -2px 0 2px #b8862c; }
.onb-chk:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; }
.onb-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; color: #4b4252; }
.onb-note b { color: #7a1020; }
.onb-next[disabled] { filter: grayscale(.7) brightness(.8); }
.onb-skip { margin-top: -4px; }
.onb-seal-hero { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.onb-seal-hero img { width: 104px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0,0,0,.5)); }
.onb-seal-hero span { font-family: var(--font-title); font-size: 13px; color: var(--gold-lt); text-shadow: 1px 1px 0 #000; }
.onb-free { text-align: center; font-size: 13.5px; padding: 4px 0 10px; border-bottom: 2px solid rgba(138,106,42,.35); }
.onb-offer, .ms-offer { padding-top: 8px; }
.oo-price { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 6px; }
.oo-price small { font-size: 11px; color: #6b6276; }
.oo-price b { font-family: var(--font-title); font-weight: 400; font-size: 22px; color: #7a1020; }
.onb-offer ul, .ms-offer ul { margin: 6px 0 4px; padding: 0 0 0 18px; font-size: 12.5px; line-height: 1.75; }
.onb-offer ul small, .ms-offer ul small { color: #6b6276; }
.onb-guide { display: flex; flex-direction: column; gap: 10px; }
.og-row { display: flex; gap: 10px; align-items: flex-start; }
.og-row i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; font-style: normal; font-family: var(--font-title); font-size: 14px; color: var(--gold-lt);
  background: #1b2a5c; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--gold); }
.og-row b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.og-row span { display: block; font-size: 12px; line-height: 1.55; color: #3a3248; }
.og-faces { display: flex !important; gap: 4px; margin-top: 6px; }
.og-faces img { width: 32px; height: 32px; image-rendering: pixelated; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--gold); background: #22325f; }
/* 홈 안내판 아래: 오늘 남은 무료 의뢰 · 금인장 */
.rp-wallet { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 8px; padding: 4px 6px; background: rgba(8,11,24,.55); border: 0;
  box-shadow: inset 0 0 0 1px rgba(227,181,79,.35); color: #e8dcb5; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.rp-wallet img { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.rp-wallet span { flex: 1; }
.rp-wallet b { color: var(--gold-lt); font-weight: 400; }
.rp-wallet i { font-style: normal; color: var(--gold); font-size: 16px; }
.rp-wallet .wl-local { color: #b9c3e6; }
.set-wallet { display: flex; align-items: center; gap: 8px; }
.set-wallet img { width: 22px; height: 22px; image-rendering: pixelated; }
/* 작업 요청 사양 · 무료 소진 안내 창 */
.ot-line { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: 13px; line-height: 1.55; }
.ot-line img { flex: none; width: 36px; height: 36px; image-rendering: pixelated; box-shadow: 0 0 0 2px #000; }
.ot-line b { display: block; font-size: 11px; color: #6b4a12; }
.pw-offer { display: flex; gap: 10px; align-items: center; margin-top: 8px; padding: 8px; background: rgba(227,181,79,.18); box-shadow: inset 0 0 0 1px rgba(138,106,42,.4); font-size: 12.5px; line-height: 1.55; }
.pw-offer img { width: 34px; height: 34px; image-rendering: pixelated; flex: none; }
.pw-offer b { display: block; color: #7a1020; }
/* 멤버십 화면 */
.membership .ms-hero { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.membership .ms-lineup { width: 100%; max-width: 356px; aspect-ratio: 356 / 200; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold), 0 0 0 6px #000; }
.membership .ms-plaque { margin-top: -24px; position: relative; }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; }
.ms-grid div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: rgba(138,106,42,.12); box-shadow: inset 0 0 0 1px rgba(138,106,42,.35); }
.ms-grid small { font-size: 11px; color: #6b6276; }
.ms-grid b { display: flex; align-items: center; gap: 4px; font-family: var(--font-title); font-weight: 400; font-size: 17px; color: #1b1424; }
.ms-grid b img { width: 22px; height: 22px; image-rendering: pixelated; }
.ms-offer .btn { margin-top: 8px; }
.ms-web { text-align: center; color: #7a1020; margin: 6px 0 0; }
.ms-fine { font-size: 11px; line-height: 1.6; color: #6b6276; margin: 10px 0 6px; }
.ms-links { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; }
.ms-links button { min-height: 36px; background: none; border: 0; padding: 0 2px; color: #6b4a12; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
/* 약관 보기 */
.doc-v h2 { text-align: center; margin-bottom: 2px; }
.doc-ver { text-align: center; font-size: 11px; color: #6b6276; margin-bottom: 8px; }
.doc-v h3 { font-size: 13px; margin: 12px 0 4px; color: #3a2a10; }
.doc-v p { margin: 0; font-size: 12.5px; line-height: 1.7; }
.doc-t { width: 100%; border-collapse: collapse; margin: 6px 0 2px; font-size: 11.5px; line-height: 1.5; }
.doc-t th, .doc-t td { text-align: left; padding: 4px 5px; border-bottom: 1px solid rgba(138,106,42,.35); vertical-align: top; }
.doc-t th { color: #6b4a12; font-weight: 700; }
.doc-co { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 14px 0 0; font-size: 12px; }
.doc-co dt { color: #6b6276; }
.doc-co dd { margin: 0; }
#overlay-root > .backdrop { z-index: 10; }   /* 처음 시작 안내(.onb, z 5) 위에서 약관 보기 · 안내 창이 열리게 */
/* 고민 전달 쪽지: 300px 카드를 0.68배로 줄이면 글자가 7.5px 로 뭉개진다 → 줄이지 않고 작은 판형(214px)에 글자 크기를 맞춘다 */
.io-docwrap { width: 214px; left: max(4px, calc(50% - 186px)); transform: none; }
.intake-ov .intake-doc { width: 214px; padding: 10px 12px 9px; }
.intake-ov .id-org { font-size: 9.5px; letter-spacing: 1px; }
.intake-ov .id-title { font-size: 15px; letter-spacing: 4px; margin: 2px 0 1px; }
.intake-ov .id-no { font-size: 10px; padding-bottom: 4px; margin-bottom: 5px; }
.intake-ov .id-label { font-size: 10.5px; }
.intake-ov .id-body { font-size: 12px; line-height: 1.5; max-height: 6em; }
.intake-ov .id-foot { font-size: 9.5px; margin-top: 6px; }
.intake-ov .id-stamp { right: 8px; top: 30px; }
/* 고민 쪽지: 예시 대신 비밀 유지 안내 + 약관 보기(10-18) */
.stmt-secret { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 9px; background: #f3ead2; box-shadow: inset 0 0 0 1px rgba(138,106,42,.45), inset 3px 0 0 var(--gold2); font-family: var(--font-ui); }
.stmt-secret img { flex: none; width: 28px; height: 28px; image-rendering: pixelated; }
.stmt-secret b { display: block; font-size: 13px; color: #5a1420; font-weight: 700; }
.stmt-secret span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.55; color: #3a3248; }
.stmt-terms { margin-top: 4px; min-height: 36px; padding: 0 2px; background: none; border: 0; color: #6b4a12; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
/* 약관 전문: 머리말 · 고민이 지나가는 길 그림 · 문서 사이 줄 */
.doc-lead { margin: 6px 0 2px !important; padding: 8px 10px; background: rgba(227,181,79,.16); box-shadow: inset 3px 0 0 var(--gold2); font-weight: 700; }
.doc-sep { border: 0; border-top: 2px dashed rgba(138,106,42,.45); margin: 18px 0 12px; }
.doc-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: 8px 0 4px; padding: 10px 6px; background: #1b2a5c; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--gold); }
.df-node { flex: 1 1 0; min-width: 84px; padding: 6px 4px; text-align: center; background: #0e1530; box-shadow: inset 0 0 0 1px var(--gold2); color: var(--gold-lt); }
.df-node b { display: block; font-family: var(--font-title); font-weight: 400; font-size: 12px; }
.df-node small { display: block; margin-top: 2px; font-size: 10px; line-height: 1.35; color: #c9d3f0; }
.df-arrow { font-style: normal; font-size: 11px; color: var(--gold-lt); }
.df-back { flex-basis: 100%; text-align: center; font-size: 10.5px; color: #c9d3f0; margin-top: 2px; }
/* 고민 전달: 쪽지가 반으로 접혀(겉면 = 봉인된 편지) 내용이 보이지 않게 된 뒤 대표가 가져간다 */
.intake-doc .id-cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(#efe4c6, #e4d6b0); box-shadow: inset 0 0 0 2px #b79b5c, inset 0 -3px 0 2px rgba(0,0,0,.08);
  transform-origin: 50% 0; transform: perspective(520px) rotateX(-92deg); opacity: 0; backface-visibility: hidden; font-family: var(--font-ui); color: #5a4420; }
.intake-doc .id-cover::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 0; border-top: 2px dashed rgba(122,90,30,.35); }
.intake-doc .id-cover img { width: 36px; height: 36px; image-rendering: pixelated; position: relative; }
.intake-doc .id-cover b { font-family: var(--font-title); font-weight: 400; font-size: 14px; letter-spacing: 3px; position: relative; }
.intake-doc .id-cover small { font-size: 10px; letter-spacing: 1px; color: #7a6230; position: relative; }
.intake-ov.folded .id-cover { opacity: 1; transform: perspective(520px) rotateX(0deg); transition: transform .55s steps(7), opacity .1s steps(1); }
.intake-ov.folded .intake-doc { transition: transform .3s steps(4) .5s; transform: scaleY(.62); transform-origin: 50% 100%; }
.intake-ov .id-stamp { z-index: 3; }
.doc-flow { flex-direction: column; align-items: stretch; gap: 3px; padding: 10px; }
.doc-flow .df-node { flex: none; min-width: 0; }
.doc-flow .df-arrow, .doc-flow .df-back { text-align: center; }

/* 10-18: 접히는 움직임은 빼고, 봉인된 겉면이 바로 덮이게 */
.intake-doc .id-cover, .intake-ov.folded .id-cover { transform: none; transition: opacity .15s steps(2); }
.intake-ov.folded .intake-doc { transform: none; transition: none; }
.stmt-badge { display: inline-block; margin-top: 5px; padding: 2px 6px; font-style: normal; font-size: 11px; line-height: 1.5; color: #fff4c2; background: #1b2a5c; box-shadow: inset 0 0 0 1px var(--gold); }
.doc-t th:first-child, .doc-t td:first-child { width: 30%; word-break: keep-all; }

/* ---------- 특별 자문위원(멤버십 전용 교체 구성원 · 오만복) ---------- */
/* 대회의실: 출석 구성원 바로 아래 줄(5칸) — 오만복 + COMING SOON 4칸 */
.room-roster.guest-row { padding-top: 0; background: var(--ink); }
.guest-row .pv.gv { position: relative; overflow: hidden; background: linear-gradient(#1c2447, #11152b); box-shadow: inset 0 0 0 1px var(--gold2), inset 0 0 0 2px #000; }
.guest-row .pv.gv img { box-shadow: 0 0 0 1px var(--gold); }
.guest-row .pv.gv i { color: var(--gold-lt); }
.guest-row .pv.gv b { color: var(--gold); }
.guest-row .pv.gv.locked img { filter: grayscale(.65) brightness(.5); }
.guest-row .pv.gv.locked i { color: #b9b2c6; }
.guest-row .pv.gv.locked b { color: #f3c2c6; font-size: 11px; }
.guest-row .gv-lock { position: absolute; left: 50%; top: 5px; transform: translateX(-50%); width: 28px; height: 28px; display: grid; place-items: center; }
.guest-row .gv-lock img { width: 16px !important; height: 16px !important; background: none !important; box-shadow: none !important; filter: drop-shadow(1px 1px 0 #000); }
.guest-row .pv.gv.on { background: linear-gradient(#3a2f10, #1a1508); box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 1px #000; }
.guest-row .pv.gv.on b { color: #fff6c8; }
.guest-row .pv.gv:active { filter: brightness(1.15); }
.guest-row .pv.soon { background: #141a33; box-shadow: inset 0 0 0 1px #3a4370; cursor: default; }
.guest-row .pv.soon img { box-shadow: 0 0 0 1px var(--gold-dk); }
.guest-row .pv.soon i { font-size: 10.5px; letter-spacing: .5px; color: #aeb6d6; }
.guest-row .pv.soon b { font-size: 10.5px; letter-spacing: .5px; color: var(--gold); }
/* 출석 줄 · 표결판에 앉은 특별 자문위원 */
.vote-strip .pv.guest-on { box-shadow: inset 0 0 0 2px var(--gold-dk); }
.vote-strip .pv.guest-on i { color: var(--gold-lt); }
.vote-strip .pv.guest-on.win { background: #3a2f10; box-shadow: 0 0 0 2px var(--gold); }
/* 낮은 화면(360×640 등): 얼굴을 접는 규칙(.pv img 숨김)에 맞춰 특별 자문위원 줄을 한 줄 띠로 — 오만복 칸 + COMING SOON 한 칸 */
@media (max-height: 700px) {
  .room-roster.guest-row { grid-template-columns: 1fr 1fr; padding-bottom: 4px; }
  .guest-row .pv { flex-direction: row; justify-content: center; gap: 6px; min-height: 30px; }
  .guest-row .pv.soon ~ .pv.soon { display: none; }
  .guest-row .gv-lock { position: static; transform: none; width: auto; height: auto; }
  .guest-row .gv-lock img { display: block !important; width: 12px !important; height: 12px !important; }
}

/* 자리 고르기 창 */
.lu-head { display: flex; gap: 10px; align-items: center; }
.lu-head img { width: 64px; height: 64px; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold); background: #22305e; }
.lu-head small { display: block; font-family: var(--font-small); font-size: 10.5px; color: var(--velvet); }
.lu-head b { display: block; font-family: var(--font-title); font-size: 17px; }
.lu-head span { font-size: 12px; color: #6b4a12; }
.lu-quote { margin: 8px 0 4px; font-size: 12.5px; color: var(--velvet); }
.lu-lead { margin: 6px 0 8px; font-size: 13px; line-height: 1.6; }
.lu-seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lu-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; background: var(--paper2); border: 0; box-shadow: inset 0 0 0 2px var(--gold2); font: inherit; color: var(--ink); cursor: pointer; }
.lu-seat img { width: 40px; height: 40px; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink); }
.lu-seat i { font-style: normal; font-size: 12.5px; font-weight: 700; }
.lu-seat b { font-weight: 400; font-size: 11px; color: var(--velvet); }
.lu-seat em { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; background: var(--ink); color: var(--gold-lt); padding: 0 5px; white-space: nowrap; }
.lu-seat.on { background: var(--gold-lt); box-shadow: inset 0 0 0 3px var(--gold), 0 0 0 2px var(--ink); }
.lu-seat:active { filter: brightness(.95); }
.lu-fine { font-size: 11px; color: #6b6276; margin: 8px 0 10px; }

/* AI 를 못 불렀을 때: 걱봉식 대표 접촉사고 */
.acc { text-align: center; }
.acc-top { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; }
.acc-badge { height: 22px; line-height: 22px; padding: 0 4px; border-style: solid; border-width: 0 12px; border-image: url(../art/bc_red.png) 0 12 fill / 0 12px stretch; font-family: var(--font-title); font-size: 12px; color: #fff4c2; letter-spacing: 3px; image-rendering: pixelated; }
.acc-live { height: 20px; line-height: 20px; padding: 0 2px; border-style: solid; border-width: 0 7px; border-image: url(../art/bc_live.png) 0 7 fill / 0 7px stretch; font-family: var(--font-small); font-size: 10.5px; color: #fff; align-self: center; image-rendering: pixelated; animation: acc-blink 1s steps(2) infinite; }
@keyframes acc-blink { 50% { opacity: .2; } }
.acc-art { display: block; width: 240px; max-width: 100%; height: auto; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold); margin: 6px auto 12px; }
.acc-head { margin: 0 0 6px; font-family: var(--font-title); font-size: 15px; line-height: 1.5; }
.acc-head b { color: #b0142b; }
.acc-body { font-size: 12.5px; line-height: 1.65; margin: 0 0 6px; }
.acc-more-btn { border: 0; background: none; color: var(--velvet); font: inherit; font-size: 12.5px; text-decoration: underline; min-height: 44px; padding: 0 14px; cursor: pointer; }
@media (max-height: 700px) { .acc-art { width: 180px; margin: 4px auto 8px; } .acc-body { font-size: 12px; line-height: 1.55; } }
.acc-more { text-align: left; font-size: 12px; line-height: 1.6; background: #f3e6e6; box-shadow: inset 0 0 0 1px #c8323c; padding: 8px 10px; margin: 2px 0 10px; }
.acc-more b { display: block; color: #b0142b; margin-bottom: 2px; }
.acc-more small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: #6b6276; }
@media (prefers-reduced-motion: reduce) { .acc-live { animation: none; } }

/* 멤버십 화면: 특별 자문위원 소개(기자회견 단상 춤) */
.ms-guest { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ms-guest.hl { box-shadow: inset 0 0 0 3px var(--gold), 0 0 0 3px var(--ink), 0 0 18px rgba(227,181,79,.6); }
.msg-stage { position: relative; height: 162px; overflow: hidden; background: url(../art/brief_bg.png) center / cover, #16214a; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold); image-rendering: pixelated; }
.msg-dance { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background-repeat: no-repeat; image-rendering: pixelated; animation: msg-dance .66s steps(1) infinite; }
@keyframes msg-dance { 0% { background-position: var(--f6) 0; } 50% { background-position: var(--f7) 0; } }
.msg-txt small { display: block; font-family: var(--font-small); font-size: 10.5px; color: var(--velvet); }
.msg-txt > b { display: block; font-family: var(--font-title); font-size: 16px; }
.msg-txt p b { color: #7a1020; }
.msg-txt p { margin: 4px 0 0; font-size: 12px; line-height: 1.55; }
.msg-txt .msg-how { color: #3a2f10; }
.msg-txt .btn { display: block; width: 100%; margin-top: 8px; white-space: nowrap; }
.msg-lock { display: inline-block; margin-top: 8px; font-size: 11px; background: var(--ink); color: var(--gold-lt); padding: 2px 8px; }
@media (prefers-reduced-motion: reduce) { .msg-dance { animation: none; background-position: var(--f6) 0; } }

/* 구성원 소개: 특별 자문위원 */
.mem-sec { color: var(--gold-lt); font-family: var(--font-title); font-size: 15px; margin: 22px 4px 6px; text-shadow: 2px 2px 0 #000; }
.mem-sec small { font-family: var(--font-small); font-size: 11px; color: var(--gold); margin-left: 4px; }
.member-card.guest { position: relative; }
.member-card.guest img { background: linear-gradient(#1d2a52, #0e1530); box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--gold); }
.member-card .mc-badge { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 4px; height: 22px; line-height: 22px; padding: 0 2px; border-style: solid; border-width: 0 12px; border-image: url(../art/ui_tag_s.png) 0 15 fill / 0 12px stretch; font-size: 11px; color: var(--gold-lt); image-rendering: pixelated; }
.member-card .mc-badge img { width: 12px !important; height: 12px !important; box-shadow: none !important; background: none !important; }
.member-card.soon { opacity: .85; }
.member-card.soon img { background: #11152b; box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--gold-dk); }

/* 토론 중계: 특별 자문위원 긴급 투입 카드 */
.b-card.b-guest { display: flex; gap: 10px; align-items: center; background: linear-gradient(#fff6d6, var(--paper)); box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px #000; }
.b-card.b-guest .bg-face { width: 64px; height: 64px; flex: none; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold); background: #1d2a52; }
.b-card.b-guest .bc-t { color: #b0142b; text-align: left; font-size: 15px; }
.b-card.b-guest .bg-name { font-family: var(--font-title); font-size: 16px; margin: 2px 0; }
.b-card.b-guest .bc-sign { padding-right: 0; text-align: left; font-size: 11px; }
.mstage.sm.guest { background: var(--gold-lt); color: #3a2f10; box-shadow: 0 0 0 1.5px var(--gold) inset; }
/* 낮은 화면: 홈 안내판의 결론 미리보기를 4줄로 줄여 '새 고민 보내기'가 첫 화면에 들어오게(전문은 결론 보고서 보기) */
@media (max-height: 700px) {
  .room-panel .rp-q { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}
/* 앱(iOS 노치 · Android 전체 화면): 창 · 쪽지 · 전달 연출이 상태 표시줄과 홈 막대 밑으로 들어가지 않게 */
.backdrop { padding: calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom)); }
.modal { max-height: 100%; }
.stmt-ov { padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)); }
.intake-ov { padding: calc(16px + var(--safe-top)) 0 calc(16px + var(--safe-bottom)); }