/* 조작 장면: 머리줄과 발표자 조작줄 */
.demo{gap:24px;padding:72px 120px 40px}
.demo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.demo-head h2{font-size:44px;color:var(--chrome-deep)}
.guide{font-size:26px;color:var(--sub);margin-top:10px}
.ctl{display:flex;align-items:center;gap:12px;flex:none;padding-top:6px}
.clock-note{font-size:18px;color:var(--sub);margin-right:8px}
.ctl button,.side button{font:inherit;font-size:19px;font-weight:600;color:var(--chrome-deep);background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:10px 18px;cursor:pointer}
.ctl button:hover,.side button:hover{border-color:var(--chrome)}
.side{display:flex;flex-direction:column;gap:12px;width:400px}
.side>b{font-size:22px;color:var(--sub);font-weight:600}
.side button{text-align:left;font-size:22px;padding:16px 20px}
.side button[aria-pressed="true"]{background:var(--sel);border-color:var(--teal);color:var(--ink)}
.side p{font-size:19px;line-height:1.5;color:var(--sub);margin-top:8px}

/* 기기 화면: 앱은 390pt 폭으로 만들고 틀에 맞춰 줄인다 */
.phone{--s:.92821;--h:832px}
.phone.small{--s:.77436;--h:842px}
.phone .screen{position:relative}
.app{position:absolute;left:0;top:0;width:390px;height:var(--h);transform:scale(var(--s));transform-origin:0 0;
  display:flex;flex-direction:column;background:#fff;color:var(--ink);font-size:14px;line-height:1.35;overflow:hidden;
  font-variant-numeric:tabular-nums;user-select:none;-webkit-user-select:none}
.app button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.app button:disabled{cursor:default}
.app .body{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff}

/* 상태 표시줄 */
.sb{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;background:var(--chrome-top);color:#fff}
.sb.ios{height:52px;padding:10px 30px 0 40px;font-size:16px;font-weight:600}
.sb.and{height:32px;padding:0 18px;font-size:13px;font-weight:500}
.sb .isl{position:absolute;left:50%;top:11px;width:118px;height:34px;margin-left:-59px;background:#000;border-radius:20px}
.sb .cam{position:absolute;left:50%;top:9px;width:13px;height:13px;margin-left:-6px;background:#000;border-radius:50%}
.sb .sys{display:flex;align-items:center;gap:6px}
.sb .sig{width:17px;height:11px;background:linear-gradient(90deg,#fff 0 3px,transparent 3px 5px,#fff 5px 8px,transparent 8px 10px,#fff 10px 13px,transparent 13px 15px,#fff 15px);clip-path:polygon(0 75%,22% 75%,22% 50%,48% 50%,48% 25%,74% 25%,74% 0,100% 0,100% 100%,0 100%)}
.sb .bat{width:24px;height:12px;border:1.5px solid rgba(255,255,255,.8);border-radius:3.5px;position:relative}
.sb .bat::after{content:"";position:absolute;inset:1.5px 5px 1.5px 1.5px;background:#fff;border-radius:1.5px}

/* 머리줄 */
.mh{flex:none;display:flex;align-items:center;gap:12px;height:50px;padding:0 12px;border-bottom:1px solid var(--grid)}
.ham{display:flex;flex-direction:column;gap:4px;padding:7px;border:1px solid var(--grid);border-radius:6px}
.ham i{width:16px;height:2px;background:var(--ink)}
.mh .dt{font-size:19px;font-weight:700;letter-spacing:-.01em}
.mh .who{margin-left:auto;text-align:right;display:flex;flex-direction:column}
.mh .who b{font-size:14px}.mh .who small{font-size:10px;color:var(--sub)}
.bb{flex:none;display:flex;align-items:stretch;justify-content:space-between;height:40px;background:#fff;border-bottom:1px solid var(--grid)}
.bb button{background:var(--chrome)!important;color:#fff!important;font-weight:600!important;font-size:14px!important;padding:0 16px!important}
.bb span{align-self:center;padding-right:12px;font-size:14px;font-weight:600;color:var(--ink)}
.tb{flex:none;display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 12px;background:var(--head);font-size:13px}
.tbr{font-size:12px;color:var(--sub)}
.pt{flex:none;display:flex;justify-content:space-between;align-items:center;height:30px;padding:0 12px;background:var(--head);font-size:13px}
.pt span{font-weight:600}
.cb{flex:none;display:flex;justify-content:space-between;align-items:center;height:34px;padding:0 12px;font-size:13px;border-bottom:1px solid var(--grid)}
.mini{display:flex;gap:5px}
.mini button{font-size:11px!important;font-weight:600!important;color:var(--chrome)!important;border:1px solid var(--border)!important;border-radius:6px;padding:3px 8px!important}

/* 지표 */
.mt{flex:none;display:grid;grid-template-columns:repeat(4,1fr);margin:6px 8px;border:1px solid var(--grid);border-radius:6px;overflow:hidden}
.mt div{display:flex;flex-direction:column;align-items:center;padding:4px 0 5px;border-right:1px solid var(--grid)}
.mt div:last-child{border-right:0}
.mt small{font-size:10px;color:var(--sub)}
.mt b{font-size:18px;font-weight:700;white-space:nowrap}
.late{color:var(--danger)!important}
.mt b.late{font-size:14px;line-height:25px}

/* 처치 줄 */
.acts{flex:none;display:flex;flex-direction:column;gap:5px;padding:2px 8px 6px}
.row{display:grid!important;grid-template-columns:52px 1fr auto;align-items:center;height:40px;border:1px solid var(--grid)!important;border-radius:8px;overflow:hidden;text-align:left;background:#fff}
.row.on{border:2px solid var(--ink)!important}
.row.att{background:var(--warn-fill)!important}
.row b{font-size:17px;font-weight:700;padding-left:12px;letter-spacing:-.01em}
.row .st{font-size:12px;padding-right:12px;color:var(--ink)}
.row .tag{height:100%;border-radius:0}
.row:active{background:var(--sel)}
.tag{display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink);border-radius:4px;padding:0 4px;white-space:nowrap}
.c-start{background:#DE9AB0}.c-comp{background:#DC6F84}.c-shock{background:#EEC43A}.c-rhy{background:#7CC062}
.c-epi{background:#A386EE}.c-amio{background:#87BBD2}.c-vs{background:#7CC2BA}.c-proc{background:#EDA66A}.c-memo{background:#C3CDD8}

/* 도구 버튼 */
.tools{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:0 8px 6px}
.tools button{height:36px;border:1px solid var(--border)!important;border-radius:8px;font-size:13px!important;font-weight:600!important}
.tools button:active{background:var(--sel)}

/* 기록 내역 */
.hist{flex:1;min-height:0;display:flex;flex-direction:column;margin:0 8px;border:1px solid var(--grid);border-radius:6px;overflow:hidden}
.hh{flex:none;display:flex;justify-content:space-between;align-items:center;height:30px;padding:0 10px;background:var(--th);font-size:13px}
.hh span{font-size:12px;color:var(--sub)}
.hs{flex:1;overflow:auto}
.hist table,.sec table{width:100%;border-collapse:collapse;font-size:12px}
.hist th,.sec th{background:var(--alt);font-weight:600;color:var(--sub);height:24px;border-bottom:1px solid var(--grid);font-size:11px}
.hist td{height:28px;border-bottom:1px solid var(--grid);text-align:center;padding:0 3px}
.hist td:nth-child(2),.nt td:nth-child(2){font-weight:700;font-size:11px;width:44px}
.hist td:nth-child(3){text-align:left;word-break:keep-all}
.hist td:first-child{width:44px}.hist td:nth-child(4){width:42px;color:var(--sub)}.hist td:last-child{width:44px}
.hist tr.del td{color:var(--muted);text-decoration:line-through}
.hist tr.del td:nth-child(2){background:var(--th)!important}
.hist tr.del td:last-child{text-decoration:none;font-size:11px}
.lnk{color:var(--danger)!important;font-weight:600!important;font-size:12px!important}
.eq{flex:none;display:flex;justify-content:space-between;align-items:center;margin:6px 8px 0;padding:0 10px;height:32px;background:var(--th);border-radius:6px;font-size:12px;font-weight:600}
.eq button{font-size:11px!important;border:1px solid var(--border)!important;border-radius:6px;padding:3px 10px!important;background:#fff!important}
.end{flex:none;margin:6px 8px 10px;height:42px;border:1.5px solid var(--danger)!important;border-radius:8px;color:var(--danger)!important;font-size:15px!important;font-weight:700!important}
.v-record{padding-bottom:4px}

/* 첫 화면 */
.home{flex:1;display:flex;flex-direction:column;gap:12px;padding:12px}
.bigstart{height:120px;border-radius:10px;background:var(--chrome)!important;color:#fff!important;font-size:30px!important;font-weight:700!important}
.home .hh{border-radius:6px}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:10px}

/* 공통 묶음 */
.sec{flex:none;margin:8px 8px 0;border:1px solid var(--grid);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.sec.grow{flex:1;min-height:0;margin-bottom:8px}
.sh{display:flex;justify-content:space-between;align-items:center;height:30px;padding:0 10px;background:var(--th);font-size:13px}
.sh span{font-size:12px;color:var(--sub)}
.seg3,.seg2{display:grid;margin:8px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg3{grid-template-columns:repeat(3,1fr)}.seg2{grid-template-columns:1fr 1fr}
.seg2.pad{flex:none;margin:8px 8px 0}
.seg3 button,.seg2 button{height:34px;font-size:13px!important;font-weight:600!important;border-right:1px solid var(--border)!important}
.seg3 button:last-child,.seg2 button:last-child{border-right:0!important}
.seg3 .on,.seg2 .on{background:var(--chrome)!important;color:#fff!important}
.field{display:flex;align-items:center;gap:8px;margin:0 8px 8px;font-size:13px;font-weight:600}
.field input{flex:1;height:36px;border:1px solid var(--border);border-radius:6px;padding:0 10px;font:inherit;font-size:16px;font-weight:700;text-align:right;user-select:text}
.field em{font-style:normal;color:var(--sub)}
.kv{width:100%;border-collapse:collapse}
.kv th{width:120px;text-align:left;padding:7px 10px;font-size:12px!important;color:var(--sub);background:#fff!important;border-bottom:1px solid var(--grid);height:auto!important}
.kv td{padding:7px 10px;font-size:13px;font-weight:600;border-bottom:1px solid var(--grid)}
.dt td{border-bottom:1px solid var(--grid);padding:6px 6px;vertical-align:middle}
.dt td b{display:block;font-size:13px}.dt td small{font-size:10.5px;color:var(--sub)}
.dt .num{text-align:right;font-weight:700;font-size:14px;white-space:nowrap;color:var(--chrome-deep)}
.sm{font-size:12px!important;font-weight:600!important;color:var(--chrome)!important;border:1px solid var(--border)!important;border-radius:6px;padding:4px 8px!important}
.sm:active{background:var(--sel)!important}
.fine{font-size:10.5px;color:var(--sub);padding:8px 10px;line-height:1.5}
.fine.big{font-size:13px}

/* 타이머 */
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 8px 8px}
.presets button{height:40px;border:1px solid var(--border)!important;border-radius:8px;font-size:12.5px!important;font-weight:600!important;color:var(--chrome)!important}
.presets button:active{background:var(--sel)}
.tt td{height:30px;border-bottom:1px solid var(--grid);text-align:center;font-size:13px}
.tt td:first-child{text-align:left;padding-left:10px}
.tt .num{font-weight:700;font-size:15px}
.tt tr.ring td{background:var(--warn-fill)}
.warn{color:var(--warn)}

/* 선택 화면 */
.choice{padding:10px 8px}
.pair,.trio{display:grid;gap:8px}.pair{grid-template-columns:1fr 1fr}.trio{grid-template-columns:repeat(3,1fr)}
.opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border:1.5px solid var(--chrome)!important;border-radius:10px;font-size:17px!important;font-weight:700!important;color:var(--chrome-deep)!important}
.opt:active{background:var(--sel)}
.opt small{font-size:11px;font-weight:500;color:var(--sub)}
.list{display:flex;flex-direction:column}
.list button{display:grid;grid-template-columns:90px 1fr;align-items:center;height:46px;padding:0 14px;border-bottom:1px solid var(--grid)!important;text-align:left}
.list button b{font-size:15px}.list button span{color:var(--sub);font-size:13px}
.list button:active{background:var(--sel)}

/* 음성 · 자유기록 */
.voice,.smart{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:8px;overflow:auto}
.smart{flex:none;overflow:visible}
.mic{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:110px;border-radius:12px;background:var(--chrome)!important;color:#fff!important}
.mic b{font-size:22px}.mic small{font-size:12px;opacity:.85}
.mic.rec{background:var(--danger)!important}
.mic.wait{background:var(--chrome-deep)!important}
.raw{font-size:12px;color:var(--sub);padding:0 2px}
.hint{font-size:12.5px;line-height:1.55;color:var(--sub);padding:4px 2px}
.cands{display:flex;flex-direction:column;gap:6px}
.cand{border:1px solid var(--grid);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px;background:#fff}
.cand.need{border-color:var(--warn);background:#FFFBEA}
.cand .ch{display:flex;align-items:center;gap:8px}
.cand .tag{height:22px;min-width:40px}
.cand b{font-size:14px}
.why{font-size:12px;color:var(--warn);font-weight:600}
.cbtn{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:6px}
.cbtn button{height:32px;border:1px solid var(--border)!important;border-radius:6px;font-size:13px!important;font-weight:600!important}
.cbtn .pri,.pri{background:var(--chrome)!important;color:#fff!important;border-color:var(--chrome)!important}
.cbtn .pri:disabled,.pri:disabled{background:#B7C3D0!important;border-color:#B7C3D0!important}
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.routes button{height:30px;border:1px solid var(--border)!important;border-radius:6px;font-weight:700!important}
.routes .on{background:var(--sel)!important;border-color:var(--teal)!important}
.cand.saved{flex-direction:row;align-items:center;gap:8px;background:var(--alt)}
.okmark{margin-left:auto;font-size:12px;font-weight:700;color:var(--ok)}
.smart textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit;font-size:14px;line-height:1.5;resize:none;user-select:text;-webkit-user-select:text}
.wide{height:38px;border-radius:8px;font-size:14px!important;font-weight:700!important}
.nt td{height:28px;border-bottom:1px solid var(--grid);font-size:12px;text-align:center}
.nt td:last-child{text-align:left;padding-left:6px}
.nt td:first-child{width:46px}

/* 종료 */
.endbox{display:flex;flex-direction:column;gap:8px;padding:12px 8px}
.endbox .q{text-align:center;font-size:16px;font-weight:700;padding:10px 0}
.opt.danger{border-color:var(--danger)!important;color:var(--danger)!important}
.opt.plain{border-color:var(--border)!important;color:var(--ink)!important;min-height:42px}
.reasons{display:flex;flex-direction:column}
.reasons button{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;border-bottom:1px solid var(--grid)!important;font-size:14px!important;font-weight:600!important;text-align:left}
.reasons i{width:18px;height:18px;border:1.5px solid var(--border);border-radius:4px;flex:none}
.reasons .on{background:var(--sel)!important}
.reasons .on i{background:var(--chrome);border-color:var(--chrome);box-shadow:inset 0 0 0 3px #fff}
.foot{margin-top:auto;display:grid;grid-template-columns:1fr 1.6fr;gap:8px;padding:10px 8px 14px}
.foot.one{grid-template-columns:1fr}
.foot button{height:42px;border:1px solid var(--border)!important;border-radius:8px;font-weight:700!important}

/* 알림 */
.toast{position:absolute;left:16px;right:16px;bottom:24px;padding:12px 14px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;text-align:center}

/* ---------- 웹 ---------- */
.screen.web,.web-in{position:relative;display:flex;flex-direction:column;overflow:hidden;font-variant-numeric:tabular-nums;background:#fff}
.web-in{position:absolute;left:0;top:0;width:1180px;height:708px;transform-origin:0 0}
.wtop{flex:none;display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 18px;background:var(--chrome-top);color:#fff}
.wtop b{font-size:20px;letter-spacing:.02em}.wtop span{font-size:13px;color:#C9D7E6}
.wtabs{flex:none;display:grid;grid-template-columns:repeat(9,1fr);background:var(--chrome-deep)}
.wtabs span{height:34px;display:grid;place-items:center;color:#fff;font-size:13.5px;font-weight:600;border-right:1px solid #2B5A88}
.wtabs .on{background:var(--head);color:var(--ink);box-shadow:inset 0 3px 0 var(--teal)}
.wpanel{flex:1;min-height:0;display:flex;flex-direction:column;margin:8px;border:1px solid var(--grid);background:#fff}
.wph{flex:none;display:flex;align-items:center;gap:16px;height:40px;padding:0 12px;background:var(--head);font-size:14px}
.wpatient{font-size:13px;color:var(--sub)}
.wstate{margin-left:auto}
.wstate em{font-style:normal;font-size:12px;font-weight:700;color:#fff;background:var(--teal);border-radius:5px;padding:4px 10px}
.wstate em.idle{background:var(--muted)}.wstate em.done{background:var(--chrome-deep)}
.wcount{font-size:13px;color:var(--sub)}.wcount b{color:var(--ink)}
.wsheet{flex:1;min-height:0;padding:8px;overflow:hidden}

/* 기록지 표 (웹 실시간 · 최종 공용) */
.sheet{width:100%;height:100%;border-collapse:collapse;table-layout:fixed;font-size:11px}
.sheet col.g{width:30px}.sheet col.l{width:150px}.sheet col.sg{width:40px}
.sheet th,.sheet td{border:1px solid #9AA6B2;text-align:center;padding:0 2px;line-height:1.15;overflow:hidden}
.sheet thead th{font-weight:600;background:#fff;height:26px}
.sheet th.lab{text-align:left;font-weight:500;padding-left:6px;white-space:nowrap}
.sheet th.grp{font-weight:600;font-size:11px;writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-2px}
.sheet td.hit{background:#F9C3BC;font-weight:600}
.sheet td.new{animation:cellin 2.4s ease-out}
.sheet td.sg{writing-mode:vertical-lr;text-orientation:upright;font-size:11px;letter-spacing:1px}
@keyframes cellin{0%{background:var(--teal);color:#fff}35%{background:var(--teal);color:#fff}100%{background:#F9C3BC;color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.sheet td.new{animation:none}}

/* PDF 화면 */
.pdfwait{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:#E9EDF1;text-align:center}
.pdfwait p{font-size:22px;line-height:1.6;color:var(--sub)}
.pdfwait b{color:var(--danger)}
.pdfwait button{font:inherit;font-size:17px;font-weight:600;color:var(--chrome-deep);background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:10px 18px;cursor:pointer}
.pdfbg{flex:1;min-height:0;background:#5B6773;display:grid;place-items:center;padding:16px}
.page{position:relative;width:960px;height:678px;background:#fff;padding:22px 30px 18px;display:flex;flex-direction:column;gap:6px;color:#111}
.page h1{text-align:center;font-size:24px;letter-spacing:.02em;margin-bottom:6px}
.page .pg{position:absolute;right:30px;top:28px;font-size:11px;color:#555}
.page .info{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:11px}
.page .info b{font-weight:700}
.page .sheet{flex:1;margin-top:6px;font-size:10px}
.page .sheet col.l{width:132px}
.page .sheet td.hit{background:#FBC8C1}
.foot-note{font-size:9px;color:#555}