:root{
  --gold:#C8A600;--gold-bright:#FFD700;--gold-dim:#8a7200;--gold-bg:rgba(200,166,0,.18);
  --up:#C8A600;--down:#4A9EE8;
  --bg:#0b0f14;--bg2:#131920;--bg3:#1c2330;--bg4:#242e3d;
  --txt:#e8edf4;--txt2:#8fa0b4;--txt3:#4e6070;
  --red:#f04e4e;--green:#3cb96b;--orange:#e88a1a;
  --radius:12px;--radius-sm:8px;
  --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:-apple-system,'Noto Sans KR','Segoe UI',sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ── 앱 레이아웃 ── */
#app{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;padding-left:var(--safe-left);padding-right:var(--safe-right)}
#header{background:var(--bg2);border-bottom:1.5px solid var(--gold);padding:calc(10px + var(--safe-top)) 16px 10px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-badge{width:32px;height:32px;border-radius:50%;background:var(--gold);color:#000;font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.app-title{font-size:15px;font-weight:700;color:var(--gold);flex:1}
.status-pill{display:flex;align-items:center;gap:5px;background:var(--bg3);border-radius:20px;padding:4px 10px;font-size:11px;color:var(--txt2)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 1.5s infinite}
.pulse.off{background:var(--red);animation:none}
.status-retry{display:none;width:28px;height:28px;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--bg4);border-radius:50%;color:var(--txt2);font-size:18px;line-height:1;cursor:pointer;flex-shrink:0}
.status-retry:active{border-color:var(--gold);color:var(--gold)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── 탭 바 ── */
#tabBar{display:flex;background:var(--bg2);border-bottom:1px solid var(--bg4);flex-shrink:0}
.tab-btn{flex:1;padding:11px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;border:none;background:none;color:var(--txt3);cursor:pointer;transition:color .2s;font-size:10px;border-bottom:2px solid transparent}
.tab-btn.active{color:var(--gold);border-bottom-color:var(--gold)}
.tab-icon{font-size:18px;line-height:1}
.subway-route-tab-icon{display:block;width:20px;height:20px;margin:0 auto;color:currentColor}

/* ── 페이지 컨테이너 ── */
#pages{flex:1;overflow:hidden;position:relative}
.page{position:absolute;inset:0;overflow-y:auto;display:none;-webkit-overflow-scrolling:touch}
.page.active{display:block}

/* ════════════════════════════════
   PAGE 1 — 실시간 노선도
════════════════════════════════ */
#mapPage{background:var(--bg)}

/* 상단 요약 카드 */
.summary-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:12px 14px 0}
.s-card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius-sm);padding:8px 10px;text-align:center}
.s-val{font-size:17px;font-weight:700;color:var(--gold)}
.s-val.green{color:var(--green)}
.s-val.red{color:var(--red)}
.s-val.blue{color:var(--down)}
.s-label{font-size:9px;color:var(--txt3);margin-top:2px}

/* 내 열차 간격 패널 */
.gap-panel{margin:10px 14px 0;background:var(--bg2);border:1px solid var(--gold-dim);border-radius:var(--radius);padding:12px 14px}
.gap-panel-title{font-size:11px;color:var(--gold);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.gap-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.gap-box{background:var(--bg3);border-radius:var(--radius-sm);padding:10px 8px;text-align:center;border:1px solid var(--bg4)}
.gap-box.warn{border-color:var(--red)}
.gap-box.caution{border-color:var(--orange)}
.gap-box.ok{border-color:var(--green)}
.gap-dir{font-size:9px;color:var(--txt3);margin-bottom:3px}
.gap-time{font-size:18px;font-weight:800;line-height:1}
.gap-time.warn{color:var(--red)}
.gap-time.caution{color:var(--orange)}
.gap-time.ok{color:var(--green)}
.gap-stn{font-size:10px;color:var(--txt2);margin-top:3px}
.gap-stations{font-size:9px;color:var(--txt3);margin-top:1px}
.gap-me{display:flex;flex-direction:column;align-items:center;gap:2px}
.gap-me-badge{background:var(--gold);color:#000;font-size:9px;font-weight:900;border-radius:4px;padding:2px 6px}
.gap-me-stn{font-size:10px;color:var(--gold)}
.gap-arrow{color:var(--txt3);font-size:14px;text-align:center}

/* 범례 */
.legend{display:flex;gap:10px;padding:8px 14px 0;flex-wrap:wrap}
.li{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--txt2)}
.lb{width:12px;height:7px;border-radius:2px}

/* 노선도 스크롤 영역 */
.map-scroll{overflow-x:auto;padding:8px 0 4px;-webkit-overflow-scrolling:touch}
.map-wrap{position:relative;padding:10px 20px 12px;min-width:1040px}
.track-up{position:absolute;left:30px;right:30px;height:4px;background:var(--up);top:66px;border-radius:2px;z-index:0}
.track-down{position:absolute;left:30px;right:30px;height:4px;background:var(--down);top:118px;border-radius:2px;z-index:0}
.track-lbl-up{position:absolute;left:4px;top:63px;font-size:8px;color:var(--up);font-weight:700}
.track-lbl-dn{position:absolute;left:4px;top:115px;font-size:8px;color:var(--down);font-weight:700}
.stations-row{display:flex;justify-content:space-between;position:relative;z-index:1}
.stn{display:flex;flex-direction:column;align-items:center;width:26px;cursor:pointer}
.stn-name{font-size:7.5px;color:var(--txt3);text-align:center;line-height:1.2;height:26px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:3px;word-break:keep-all}
.stn-name.express{color:var(--txt2)}
.stn-circle{width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--up);margin:0 auto;transition:transform .2s}
.stn.express .stn-circle{background:var(--up);border-color:var(--up)}
.stn-circle.my-train-stn{border-color:var(--gold);box-shadow:0 0 6px var(--gold);background:var(--gold)}
.stn-bottom{height:34px}

/* 열차 마커 */
.train-marker{position:absolute;z-index:10;cursor:default;transition:left .8s cubic-bezier(.4,0,.2,1)}
.train-marker.my-train-marker{z-index:20}
.train-marker.evacuation-enabled{cursor:pointer}
.train-marker.evacuation-enabled:focus-visible .train-body{outline:2px solid #fff;outline-offset:2px}
.train-body{width:22px;height:12px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;color:#000;position:relative}
.train-body.up{background:var(--up)}
.train-body.down{background:var(--down);color:#fff}
.train-body.express-t{background:var(--red)!important;color:#fff!important}
.train-body.evacuation-stop{background:var(--green)!important;color:#fff!important;box-shadow:0 0 10px 3px rgba(60,185,107,.75)}
.train-body.my{box-shadow:0 0 8px 3px rgba(255,220,0,.7);border:1.5px solid #fff}
.train-num{font-size:7px;color:var(--txt3);text-align:center;line-height:1;margin-top:1px}
.train-num.my{color:var(--gold);font-weight:700}

/* 도착정보 탭 */
.section-head{padding:10px 14px 4px;font-size:11px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.arrival-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 14px 14px}
.a-card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius-sm);padding:10px}
.a-card-head{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.a-card-name{font-size:12px;font-weight:700;color:var(--txt)}
.exp-badge{background:var(--gold);color:#000;font-size:8px;padding:1px 4px;border-radius:3px;font-weight:700}
.a-item{display:flex;justify-content:space-between;align-items:center;font-size:10px;padding:3px 0;border-bottom:1px solid var(--bg3)}
.a-item:last-child{border:none}
.a-dir{color:var(--txt3)}
.a-time{font-weight:700}
.a-time.soon{color:var(--red)}
.a-time.med{color:var(--orange)}
.a-time.ok{color:var(--green)}

/* 업로드된 index_재열이수정_21.html의 첫 화면 전용 노선도 */
.my-train-setting-bar{background:var(--bg2);border-bottom:1px solid var(--bg4);padding:8px 16px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.my-train-setting-label{font-size:12px;color:var(--txt2);font-weight:700}.my-train-setting-bar button{background:var(--gold-bg);border:1px solid var(--gold-dim);color:var(--gold);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:800;cursor:pointer;flex-shrink:0}
#myTrainStatus{font-size:11px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-notes-banner{margin:12px 14px 6px;background:#1e1b10;border:2px solid #FFD700;border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 12px rgba(200,166,0,.25)}
.map-note-item{font-size:14px;line-height:1.5;color:#fff;white-space:pre-wrap;word-break:break-all}
.map-note-item.drive-inst{border-left:4px solid #FFD700;padding-left:10px}.map-note-item.mainline-issue{border-left:4px solid var(--red);padding-left:10px}
.map-note-item strong{font-size:14px;font-weight:900;margin-right:6px}.map-note-item.drive-inst strong{color:var(--gold-bright)}.map-note-item.mainline-issue strong{color:#ff6b6b}
.summary-strip{padding-top:8px}.s-val{font-size:18px;font-weight:800}.s-label{font-size:10px;color:var(--txt2);font-weight:700}
.gap-panel-title{font-size:12px;font-weight:800}.gap-dir{font-size:10px;color:var(--txt2);font-weight:700}.gap-time{font-size:20px;font-weight:900}
.gap-stn{font-size:12px;color:var(--txt);font-weight:700}.gap-stations{font-size:10px;color:var(--txt2)}
.gap-train-no,.gap-me-train-no{font-size:13px;font-weight:800;color:#f39c12;margin-top:2px}.gap-me-train-no{font-size:14px;color:#007aff}
.gap-me-badge{font-size:10px}.gap-me-stn{font-size:12px;font-weight:700}.gap-arrow{color:var(--txt2)}.legend{gap:12px;padding:12px 14px 6px;background:var(--bg2);margin:10px 14px 0;border-radius:var(--radius-sm);border:1px solid var(--bg4)}
.li{gap:6px;font-size:11px;color:var(--txt);font-weight:700}.lb{width:14px;height:8px}.express-legend-dot{width:14px;height:14px;border-radius:50%;background:var(--red);border:2px solid #fff}.last-updated{margin-left:auto;font-size:10px;color:var(--txt3)}
.map-vertical-container{display:flex;flex-direction:column;gap:12px;padding:10px 14px 30px}
.section-block{position:relative;padding:10px 16px;background:var(--bg2);border-radius:var(--radius-sm);border:1px solid var(--bg4);overflow-x:auto;-webkit-overflow-scrolling:touch}
.section-block.my-train-current-section{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,204,0,.16),0 10px 28px rgba(0,0,0,.28)}
.section-block.my-train-current-section .section-title{box-shadow:0 0 14px rgba(255,204,0,.25)}
.section-title{font-size:12px;font-weight:900;color:var(--gold);background:var(--bg3);display:inline-block;padding:3px 10px;border-radius:12px;border:1px solid var(--gold-dim);margin-bottom:12px}
.section-block .track-up{left:35px;right:10px;height:6px;top:112px;border-radius:3px}.section-block .track-down{left:35px;right:10px;height:6px;top:185px;border-radius:3px}
.section-block .track-lbl-up{left:0;top:104px;font-size:10px;font-weight:900;background:var(--bg2);padding:2px 4px;border:1px solid var(--up);border-radius:4px;z-index:2}
.section-block .track-lbl-dn{left:0;top:177px;font-size:10px;font-weight:900;background:var(--bg2);padding:2px 4px;border:1px solid var(--down);border-radius:4px;z-index:2}
.section-block .stations-row{min-width:100%}.section-block .stn{width:46px;flex-shrink:0}
.section-block .stn-name{font-size:11px;color:var(--txt2);height:38px;margin-bottom:8px;font-weight:600;transition:all .2s}.section-block .stn-name.express,.section-block .stn-name-down.express{color:#ff5252;font-weight:900;font-size:13px;text-shadow:0 0 6px rgba(255,82,82,.4)}
.stn-name-down{font-size:11px;color:var(--txt2);text-align:center;line-height:1.2;margin-top:88px;word-break:keep-all;font-weight:600;transition:all .2s}
.section-block .stn-circle{width:14px;height:14px;background:var(--bg2);border:3px solid var(--gold);position:absolute;z-index:2;box-shadow:0 0 4px rgba(0,0,0,.8)}
.section-block .stn-circle.up{top:108px}.section-block .stn-circle.down{top:181px}.section-block .stn.express .stn-circle{width:22px;height:22px;background:var(--red);border:3.5px solid #fff;box-shadow:0 0 8px rgba(240,78,78,.8)}
.section-block .stn.express .stn-circle.up{top:104px}.section-block .stn.express .stn-circle.down{top:177px}.section-block .stn-bottom{height:78px}.section-block .stn-icon{font-size:11px;margin-bottom:2px}
.section-block .train-marker{transition:left .8s cubic-bezier(.4,0,.2,1);transform:translateX(-50%)}.section-block .train-body{width:50px;height:24px;border-radius:6px;font-size:9.5px;box-shadow:0 3px 6px rgba(0,0,0,.5);gap:2px}
.section-block .train-marker.my-train-marker{transition:left var(--train-move-duration,5s) linear,opacity .25s ease;will-change:left,opacity}
.section-block .train-marker.my-train-marker.section-switching{opacity:0}
.section-block .train-stop-badge{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-3px);padding:2px 6px;border-radius:8px;background:#fff;color:#111;font-size:8px;font-weight:900;line-height:1;white-space:nowrap;box-shadow:0 2px 7px rgba(0,0,0,.55)}
.section-block .train-body.my{box-shadow:0 0 15px 6px rgba(255,220,0,1);border:2.5px solid #fff;animation:myPulse 1.1s infinite alternate}
@keyframes myPulse{from{transform:scale(1)}to{transform:scale(1.25)}}
.section-block .train-num{font-size:10px;color:var(--txt);text-align:center;line-height:1;margin-top:3px;font-weight:800;background:rgba(0,0,0,.8);padding:2px 4px;border-radius:4px;white-space:nowrap}.section-block .train-num.my{color:var(--gold);font-size:11px;font-weight:900;border:1px solid var(--gold)}
.section-block .train-num.my[role="button"]{cursor:pointer;outline:none}.section-block .train-num.my[role="button"]:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold)}

/* 일반열차 클릭 — 엑셀 기반 대피역 안내 */
.evacuation-overlay{position:fixed;inset:0;z-index:650;background:rgba(0,0,0,.72);display:flex;align-items:flex-end;justify-content:center;padding:16px max(16px,var(--safe-right)) calc(16px + var(--safe-bottom)) max(16px,var(--safe-left));backdrop-filter:blur(3px)}
.evacuation-sheet{width:min(100%,430px);max-height:min(78vh,620px);overflow-y:auto;background:var(--bg2);border:1px solid var(--gold-dim);border-radius:18px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.evacuation-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.evacuation-head>div{display:flex;align-items:center;gap:8px}.evacuation-head span{font-size:11px;color:var(--txt2);font-weight:800}.evacuation-head strong{font-size:21px;color:var(--gold);letter-spacing:.03em}
.evacuation-head button{width:32px;height:32px;border:1px solid var(--bg4);border-radius:50%;background:var(--bg3);color:var(--txt2);font-size:22px;line-height:1;cursor:pointer}
.evacuation-meta{font-size:10px;color:var(--txt3);margin-top:2px}.evacuation-title{font-size:13px;font-weight:900;color:var(--txt);margin:18px 0 9px;padding-bottom:8px;border-bottom:1px solid var(--bg4)}
.evacuation-list{display:flex;flex-direction:column;gap:8px}.evacuation-item{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--bg4);border-radius:10px;padding:11px 12px}
.evacuation-order{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gold);color:#111;font-size:11px;font-weight:900}.evacuation-item strong{font-size:14px;color:var(--txt)}
.evacuation-loading,.evacuation-empty{padding:30px 10px;text-align:center;color:var(--txt2);font-size:12px;line-height:1.6}.evacuation-loading small{display:block;margin-top:5px;color:var(--red)}
@media(min-width:700px){.evacuation-overlay{align-items:center}.evacuation-sheet{border-radius:18px}}

/* PAGE — 운행다이아 */
#diaPage{background:var(--bg);padding:16px;gap:16px}
#diaPage.page.active{display:flex!important;flex-direction:column}
.dia-card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:16px}
.dia-title{font-size:15px;font-weight:800;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.dia-select-group{display:flex;flex-direction:column;gap:12px}
.dia-select-wrap{display:flex;flex-direction:column;gap:6px}
.dia-select-wrap label{font-size:11px;color:var(--txt2);font-weight:700}
.dia-dropdown{width:100%;padding:12px;font-size:14px;font-weight:700;background-color:var(--bg3);border:1px solid var(--bg4);color:var(--txt);border-radius:var(--radius-sm);outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill='%23C8A600' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 10px center}
.dia-dropdown:focus{border-color:var(--gold)}.dia-dropdown:disabled{opacity:.4;cursor:not-allowed}
.dia-btn{width:100%;background:var(--gold);color:#000;border:none;border-radius:var(--radius-sm);padding:14px;font-size:14px;font-weight:800;cursor:pointer;margin-top:6px;transition:background .2s}.dia-btn:active{background:var(--gold-dim)}
.dia-help{font-size:12px;color:var(--txt3);padding:0 8px;line-height:1.6}
.dia-file-status{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--bg4);border-radius:var(--radius-sm);padding:11px 12px;margin-bottom:14px}
.dia-file-status.empty{border-color:rgba(240,78,78,.5)}
.dia-file-status-icon{font-size:22px;flex-shrink:0}
.dia-file-status-copy{min-width:0;flex:1}.dia-file-status-title{font-size:12px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dia-file-status-meta{font-size:10px;color:var(--txt3);margin-top:3px}
.dia-admin-card{border-color:rgba(200,166,0,.35)}
.dia-admin-desc{font-size:11px;line-height:1.55;color:var(--txt2);margin:-4px 0 12px}
.dia-admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.dia-manage-btn{flex:1;min-width:120px;border:1px solid var(--bg4);border-radius:var(--radius-sm);background:var(--bg3);color:var(--txt);padding:10px 9px;font-size:11px;font-weight:800;cursor:pointer}
.dia-manage-btn.primary{background:var(--gold);border-color:var(--gold);color:#111}.dia-manage-btn:disabled{opacity:.35;cursor:not-allowed}
.dia-replace-panel{background:var(--bg3);border:1px solid var(--gold-dim);border-radius:var(--radius-sm);padding:12px;margin-top:12px}
.dia-selected-file{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}.dia-selected-file strong{font-size:12px;color:var(--gold);word-break:break-all}.dia-selected-file span{font-size:10px;color:var(--txt3)}
.dia-mapping-title{font-size:11px;font-weight:800;color:var(--txt2);margin-bottom:7px}
.dia-mapping-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.dia-mapping-grid label{font-size:10px;color:var(--txt3)}.dia-mapping-grid input{width:100%;margin-top:4px;background:var(--bg2);border:1px solid var(--bg4);border-radius:7px;padding:8px;color:var(--txt);font-size:12px;outline:none}.dia-mapping-grid input:focus{border-color:var(--gold)}
.dia-mapping-preview{font-size:10px;line-height:1.55;color:var(--txt2);background:var(--bg2);border-radius:7px;padding:8px;margin:9px 0 10px}
.dia-upload-progress{margin:10px 0;font-size:10px;color:var(--txt2)}.dia-upload-progress-bar{height:6px;background:var(--bg2);border-radius:6px;overflow:hidden;margin-bottom:5px}.dia-upload-progress-bar span{display:block;width:0;height:100%;background:var(--gold);transition:width .2s}
.dia-previous-file{font-size:10px;color:var(--txt3);margin-top:10px;padding-top:9px;border-top:1px solid var(--bg4)}
.dia-inline-btn{margin-left:5px;border:1px solid var(--bg4);border-radius:6px;background:var(--bg2);color:var(--gold);padding:4px 7px;font-size:9px;cursor:pointer}
.dia-slot-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dia-slot-loading{grid-column:1/-1;text-align:center;color:var(--txt3);font-size:11px;padding:14px}
.dia-slot-card{background:var(--bg3);border:1px solid var(--bg4);border-radius:var(--radius-sm);padding:10px;min-width:0}
.dia-slot-card.empty{border-style:dashed}.dia-slot-head{display:flex;align-items:center;gap:6px;margin-bottom:7px}.dia-slot-number{font-size:11px;font-weight:900;color:var(--gold)}.dia-slot-purpose{margin-left:auto;border-radius:10px;background:var(--bg2);padding:3px 7px;font-size:9px;color:var(--txt2)}
.dia-slot-file{font-size:11px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dia-slot-meta{font-size:9px;color:var(--txt3);margin-top:3px;line-height:1.4}.dia-slot-empty-text{font-size:10px;color:var(--txt3);margin:9px 0}
.dia-slot-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.dia-slot-actions button{flex:1;min-width:58px;border:1px solid var(--bg4);border-radius:6px;background:var(--bg2);color:var(--txt2);padding:6px 5px;font-size:9px;cursor:pointer}.dia-slot-actions button.primary{background:var(--gold);border-color:var(--gold);color:#111;font-weight:800}.dia-slot-actions button.danger{color:var(--red)}.dia-slot-actions button:disabled{opacity:.3;cursor:not-allowed}
.dia-pending-slot{display:inline-block;background:var(--gold-bg);border:1px solid var(--gold-dim);border-radius:12px;padding:4px 9px;color:var(--gold);font-size:10px;font-weight:900;margin-bottom:8px}.dia-purpose-select{margin-bottom:11px}
.dia-purpose-hint{margin-top:6px;font-size:10px;line-height:1.45;color:var(--txt3)}.dia-purpose-hint.detected{color:var(--gold)}.dia-purpose-hint.warning{color:var(--red)}

/* PAGE — 지시/특이사항 */
#notePage{background:var(--bg);padding:16px;gap:16px}
#notePage.page.active{display:flex!important;flex-direction:column}
.note-card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px}
.note-title{font-size:15px;font-weight:800;color:var(--gold);display:flex;align-items:center;gap:6px}
.note-textarea{width:100%;height:130px;background:var(--bg3);border:1px solid var(--bg4);border-radius:var(--radius-sm);color:var(--txt);padding:12px;font-size:13px;line-height:1.5;outline:none;resize:vertical;font-family:inherit}
.note-textarea:focus{border-color:var(--gold)}
.note-textarea[readonly]{cursor:default;resize:none;color:var(--txt2);background:var(--bg2);border-color:var(--bg4)}
.note-permission-hint{font-size:11px;line-height:1.4;color:var(--txt3);background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius-sm);padding:9px 11px}
.note-permission-hint.master{color:var(--gold);border-color:rgba(255,204,0,.35)}
.note-btn-group{display:flex;gap:8px;justify-content:flex-end}.note-btn{background:var(--gold);color:#000;border:none;border-radius:var(--radius-sm);padding:8px 16px;font-size:12px;font-weight:800;cursor:pointer}.note-btn.secondary{background:var(--bg3);color:var(--txt2);border:1px solid var(--bg4)}

/* ════════════════════════════════
   PAGE 2 — 근무현황
════════════════════════════════ */
#workPage{background:var(--bg);padding:14px}
.work-detail-title{font-size:14px;font-weight:700;color:var(--gold);margin-bottom:10px}
.work-date-nav{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius-sm);padding:8px 10px;margin-bottom:10px}
.work-date-nav button{background:var(--bg3);border:1px solid var(--bg4);color:var(--txt);border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer}
.work-date-label{flex:1;text-align:center;font-size:13px;font-weight:700;color:var(--txt)}
.work-date-sub{font-size:10px;color:var(--txt3);text-align:center;margin-top:1px}
.work-summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.work-s-card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius-sm);padding:8px 4px;text-align:center}
.work-s-val{font-size:15px;font-weight:800}
.work-s-lab{font-size:8.5px;color:var(--txt3);margin-top:2px}
.work-search-wrap{display:flex;gap:6px;margin-bottom:8px}
.work-search{flex:1;background:var(--bg3);border:1px solid var(--bg4);color:var(--txt);border-radius:var(--radius-sm);padding:8px 10px;font-size:13px;outline:none}
.work-search:focus{border-color:var(--gold)}
.work-filter-chips{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.work-filter-chips::-webkit-scrollbar{display:none}
.wf-chip{background:var(--bg3);border:1px solid var(--bg4);border-radius:20px;padding:4px 10px;font-size:10px;color:var(--txt2);cursor:pointer;white-space:nowrap;flex-shrink:0}
.wf-chip.active{background:var(--gold-bg);border-color:var(--gold);color:var(--gold);font-weight:700}
.work-card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:11px 13px;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:border-color .2s}
.work-card:active{border-color:var(--gold)}
.wc-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.wc-info{flex:1;min-width:0}
.wc-name{font-size:13px;font-weight:700;color:var(--txt)}
.wc-sub{font-size:10px;color:var(--txt3);margin-top:1px}
.wc-time{font-size:10.5px;color:var(--green);margin-top:2px;font-weight:700}
.wc-status{font-size:12px;font-weight:800;padding:4px 10px;border-radius:8px;flex-shrink:0;text-align:center;min-width:52px}
.wc-status.work{background:rgba(200,166,0,.18);color:var(--gold)}
.wc-status.off{background:rgba(74,158,232,.18);color:var(--down)}
.wc-status.rest{background:rgba(232,138,26,.18);color:var(--orange)}
.wc-status.holi{background:rgba(240,78,78,.18);color:var(--red)}

/* 개인 상세 패널 */
.work-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:150;display:none;align-items:flex-end;justify-content:center}
.work-detail-overlay.show{display:flex}
.work-detail-sheet{background:var(--bg2);border-radius:16px 16px 0 0;width:100%;max-width:480px;height:60vh;max-height:92vh;min-height:30vh;overflow-y:auto;padding:0 16px 16px;-webkit-overflow-scrolling:touch;transition:height .15s ease;touch-action:none}
#workDetailOverlay{align-items:stretch;background:var(--bg)}
#workDetailSheet{box-sizing:border-box;width:100%;max-width:none;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;max-height:none;border-radius:0;padding:calc(10px + var(--safe-top)) max(14px,var(--safe-right)) calc(18px + var(--safe-bottom)) max(14px,var(--safe-left));touch-action:pan-y;overscroll-behavior:contain}
#workDetailSheet .wd-drag-handle{display:none}
#workDetailSheet .wd-head{position:sticky;top:calc(-10px - var(--safe-top));z-index:6;background:var(--bg2);padding:10px 0 9px;margin-bottom:8px;border-bottom:1px solid var(--bg4)}
.wd-drag-handle{position:sticky;top:0;background:var(--bg2);padding:8px 0 6px;display:flex;justify-content:center;cursor:grab;z-index:5;touch-action:none}
.wd-drag-bar{width:40px;height:4px;border-radius:2px;background:var(--bg4)}
.wd-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.wd-name{font-size:16px;font-weight:800;flex:1}
.wd-close{background:var(--bg3);border:1px solid var(--bg4);color:var(--txt);border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer}
.wd-badge{font-size:10px;padding:3px 8px;border-radius:8px;background:var(--bg3);color:var(--txt2)}
.wd-week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:14px}
.wd-day{background:var(--bg3);border:1px solid var(--bg4);border-radius:8px;padding:7px 2px;text-align:center}
.wd-day.today{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.wd-day-date{font-size:9px;color:var(--txt3)}
.wd-day-wd{font-size:8px;color:var(--txt3);margin-bottom:3px}
.wd-day-val{font-size:11px;font-weight:800}
.wd-month-title{font-size:11px;color:var(--txt3);font-weight:700;margin:10px 0 6px;text-transform:uppercase;letter-spacing:.04em}
.wd-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wd-mday{background:var(--bg3);border-radius:7px;padding:7px 2px 8px;text-align:center;font-size:11px}
.wd-mday-date{color:var(--txt3);font-size:10px}
.wd-mday-val{font-weight:800;margin-top:3px;font-size:13px}
.wd-mday-time{font-size:9.5px;color:var(--txt2);line-height:1.4;margin-top:3px;font-weight:600}
.wd-timebox{display:flex;gap:8px;background:var(--bg3);border:1px solid var(--gold-dim);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.wd-timebox-item{flex:1;text-align:center;font-size:14px;font-weight:700;color:var(--gold)}
.wd-timebox-lab{font-size:9px;color:var(--txt3)}
.wd-timebox-val{font-size:16px;font-weight:800;color:var(--gold);margin-top:2px}
.wd-timebox-none{font-size:12px;color:var(--txt3);text-align:center;padding:6px 0}
.work-alarm-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:stretch;margin-bottom:6px}
.work-alarm-overview .wd-timebox{margin-bottom:0;padding:8px 10px}
.work-alarm-overview .wd-timebox:only-child{grid-column:1/-1}
.work-alarm-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:8px}
.work-alarm-actions .work-alarm-btn:only-child{grid-column:1/-1}
.work-alarm-btn{width:100%;margin:0;border-radius:7px;padding:8px 7px;font-size:10.5px;font-weight:700;cursor:pointer}
.work-alarm-btn.primary{background:var(--bg3);border:1px solid var(--down);color:var(--down)}
.work-alarm-btn.cancel{background:rgba(240,78,78,.08);border:1px solid var(--red);color:#ff7474}
.work-alarm-btn.secondary{background:transparent;border:1px solid var(--bg4);color:var(--txt2)}
.work-alarm-overview .work-alarm-btn{height:100%}
.work-alarm-btn.preview{cursor:help}
.work-alarm-web-note{grid-column:1/-1;padding:2px 4px;text-align:center;color:var(--txt3);font-size:10px;line-height:1.45}

/* ════════════════════════════════
   PAGE 3 — PDF 매뉴얼
════════════════════════════════ */
#pdfPage{background:var(--bg);display:flex;flex-direction:column}
.pdf-toolbar{background:var(--bg2);border-bottom:1px solid var(--bg4);padding:10px 14px;flex-shrink:0}
.pdf-search-wrap{display:flex;gap:8px;margin-bottom:8px}
.pdf-search{flex:1;background:var(--bg3);border:1px solid var(--bg4);color:var(--txt);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;outline:none}
.pdf-search:focus{border-color:var(--gold)}
.pdf-search::placeholder{color:var(--txt3)}
.search-btn{background:var(--gold);color:#000;border:none;border-radius:var(--radius-sm);padding:9px 14px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0}
.search-btn-icon{padding:9px 12px;font-size:14px}
.pdf-file-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.pdf-file-tabs::-webkit-scrollbar{display:none}
.pdf-ftab{background:var(--bg3);border:1px solid var(--bg4);border-radius:20px;padding:4px 10px;font-size:10px;color:var(--txt2);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s}
.pdf-ftab.active{background:var(--gold-bg);border-color:var(--gold);color:var(--gold)}
.pdf-add-btn{background:var(--bg3);border:1px dashed var(--bg4);border-radius:20px;padding:4px 10px;font-size:10px;color:var(--txt3);cursor:pointer;white-space:nowrap;flex-shrink:0}

/* 검색 결과 */
.pdf-results{flex:1;overflow-y:auto;padding:10px 14px;-webkit-overflow-scrolling:touch}
.result-count{font-size:11px;color:var(--txt3);margin-bottom:8px}
.result-card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius-sm);padding:12px;margin-bottom:8px;cursor:pointer;transition:border-color .2s}
.result-card:active{border-color:var(--gold)}
.rc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.rc-file{font-size:10px;color:var(--gold);font-weight:700}
.rc-page{font-size:10px;color:var(--txt3);background:var(--bg3);border-radius:4px;padding:1px 6px}
.rc-text{font-size:12px;color:var(--txt2);line-height:1.6}
.rc-text mark{background:rgba(200,166,0,.35);color:var(--gold);border-radius:2px;padding:0 1px}
.pdf-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:var(--txt3)}
.pdf-empty-icon{font-size:36px;margin-bottom:12px}
.pdf-empty-title{font-size:14px;font-weight:700;color:var(--txt2);margin-bottom:6px}
.pdf-empty-desc{font-size:12px;line-height:1.6}

/* PDF 뷰어 */
.pdf-viewer-wrap{position:fixed;inset:0;background:var(--bg);z-index:100;display:flex;flex-direction:column;display:none}
.pdf-viewer-wrap.show{display:flex}
.pdf-viewer-header{background:var(--bg2);border-bottom:1px solid var(--bg4);padding:10px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.pdf-viewer-back{background:var(--bg3);border:1px solid var(--bg4);color:var(--txt);border-radius:var(--radius-sm);padding:6px 12px;font-size:12px;cursor:pointer}
.pdf-viewer-title{font-size:13px;font-weight:700;color:var(--txt);flex:1}
.pdf-viewer-page{font-size:11px;color:var(--txt2)}
.pdf-viewer-search{background:var(--bg2);border-bottom:1px solid var(--bg4);padding:8px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.pdf-viewer-search-main{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.pdf-viewer-search-input{min-width:0;flex:1;background:var(--bg3);border:1px solid var(--bg4);border-radius:8px;padding:8px 10px;color:var(--txt);font-size:12px;outline:none}
.pdf-viewer-search-input:focus{border-color:var(--gold)}
.pdf-viewer-search-input::-webkit-search-cancel-button{filter:grayscale(1);opacity:.7}
.pdf-viewer-search-btn{background:var(--gold);border:1px solid var(--gold);border-radius:8px;padding:8px 13px;color:#111;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}
.pdf-viewer-search-btn:disabled{opacity:.55;cursor:default}
.pdf-viewer-search-result{display:flex;align-items:center;gap:5px;min-width:180px}
.pdf-viewer-search-status{flex:1;min-width:0;color:var(--txt2);font-size:10.5px;line-height:1.35;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-viewer-search-status.no-text{color:#ff9b73}
.pdf-viewer-search-move{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--bg4);border-radius:7px;color:var(--txt);font-size:10px;cursor:pointer;flex-shrink:0}
.pdf-viewer-search-move:disabled{opacity:.3;cursor:default}
.pdf-canvas-wrap{flex:1;min-height:0;overflow:auto;display:block;padding:10px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none}
.pdf-canvas-wrap.pdf-pinching{overscroll-behavior:none;touch-action:none}
.pdf-page-layer{position:relative;max-width:none;border-radius:4px;overflow:hidden;margin:0 auto}
.pdf-canvas-wrap canvas{display:block;max-width:none;border-radius:4px}
.pdf-search-highlight-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:4px}
.pdf-search-highlight{position:absolute;box-sizing:border-box;background:rgba(255,224,46,.5);border:1px solid rgba(224,164,0,.62);border-radius:2px;mix-blend-mode:multiply}
.pdf-search-highlight.current{background:rgba(255,193,7,.72);border-color:rgba(255,152,0,.9);box-shadow:0 0 0 1px rgba(255,214,0,.35)}
.pdf-nav{display:flex;justify-content:center;align-items:center;gap:14px;padding:10px;background:var(--bg2);border-top:1px solid var(--bg4);flex-shrink:0}
.pdf-nav-btn{background:var(--bg3);border:1px solid var(--bg4);color:var(--txt);border-radius:var(--radius-sm);padding:7px 16px;font-size:12px;cursor:pointer}
.pdf-nav-btn:disabled{opacity:.3;cursor:default}
.pdf-zoom-controls{display:flex;align-items:center;overflow:hidden;border:1px solid var(--bg4);border-radius:8px;background:var(--bg3);flex-shrink:0}
.pdf-zoom-btn,.pdf-zoom-label{height:30px;border:0;background:transparent;color:var(--txt);cursor:pointer;font-weight:800}
.pdf-zoom-btn{width:32px;font-size:18px}
.pdf-zoom-label{min-width:50px;padding:0 5px;border-left:1px solid var(--bg4);border-right:1px solid var(--bg4);font-size:10px;color:var(--gold)}
.pdf-zoom-btn:disabled{opacity:.3;cursor:default}

@media(max-width:600px){
  .pdf-viewer-search{padding:8px calc(10px + var(--safe-right)) 8px calc(10px + var(--safe-left));display:block}
  .pdf-viewer-search-result{min-width:0;margin-top:6px}
  .pdf-viewer-search-status{text-align:left}
  .pdf-nav{gap:6px;padding:8px max(7px,var(--safe-right)) calc(8px + var(--safe-bottom)) max(7px,var(--safe-left))}
  .pdf-nav-btn{padding:7px 9px;font-size:10.5px}
  .pdf-zoom-btn{width:28px}
  .pdf-zoom-label{min-width:43px;font-size:9px}
  #pdfPageLabel{font-size:10px!important;white-space:nowrap}
}

/* 로딩 */
.loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:200;display:none}
.loading-overlay.show{display:flex}
.loading-box{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:20px 28px;text-align:center}
.spinner{width:28px;height:28px;border:3px solid var(--bg4);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}

/* 바텀 네비 */
#bottomNav{background:var(--bg2);border-top:1px solid var(--bg4);display:flex;padding-bottom:var(--safe-bottom);flex-shrink:0}

/* 스크롤바 */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}

/* 업로드 버튼 */
#pdfUpload{display:none}

.no-results{padding:20px;text-align:center;color:var(--txt3);font-size:13px}

/* ════════════════════════════════
   텍스트 매뉴얼
════════════════════════════════ */
.manual-mode-tabs{display:flex;background:var(--bg2);border-bottom:1px solid var(--bg4);flex-shrink:0}
.manual-mode-btn{flex:1;padding:10px 4px;background:none;border:none;color:var(--txt3);font-size:12px;font-weight:700;cursor:pointer;border-bottom:2px solid transparent}
.manual-mode-btn.active{color:var(--gold);border-bottom-color:var(--gold)}
.manual-card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius-sm);padding:12px;margin-bottom:8px;cursor:pointer;transition:border-color .2s}
.manual-card:active{border-color:var(--gold)}
.mc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.mc-title{font-size:13px;font-weight:700;color:var(--txt)}
.mc-cat{font-size:9px;padding:2px 7px;border-radius:8px;background:var(--gold-bg);color:var(--gold);flex-shrink:0;margin-left:6px}
.mc-preview{font-size:11px;color:var(--txt3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-match{margin-top:6px;padding-top:6px;border-top:1px dashed var(--bg4);font-size:11px;color:var(--txt2);line-height:1.5}
.mc-match-page{color:var(--gold);font-weight:700}
.mc-match mark{background:var(--gold-bg);color:var(--gold);border-radius:3px;padding:0 2px}
.mc-match-summary{color:var(--txt3);margin-bottom:4px}
.mc-match-item{padding:6px 8px;margin-top:4px;background:var(--bg3);border-radius:6px;cursor:pointer}
.mc-match-item:active{background:var(--bg4)}
.manual-viewer{position:fixed;inset:0;background:var(--bg);z-index:120;display:none;flex-direction:column}
.manual-viewer.show{display:flex}
.mv-header{background:var(--bg2);border-bottom:1px solid var(--bg4);padding:10px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.mv-title{font-size:14px;font-weight:700;flex:1}
.mv-body{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch;font-size:14px;line-height:1.8;white-space:pre-wrap}
.mv-cat-badge{font-size:10px;padding:3px 8px;border-radius:8px;background:var(--gold-bg);color:var(--gold);margin-bottom:10px;display:inline-block}
.manual-editor-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:130;display:none;align-items:center;justify-content:center;padding:16px}
.manual-editor-overlay.show{display:flex}
.manual-editor-box{background:var(--bg2);border-radius:14px;padding:16px;width:100%;max-width:420px;max-height:88vh;overflow-y:auto}
.me-label{font-size:11px;color:var(--txt2);margin:10px 0 5px}
.me-input,.me-textarea,.me-select{width:100%;background:var(--bg3);border:1px solid var(--bg4);color:var(--txt);border-radius:8px;padding:9px 10px;font-size:13px;font-family:inherit}
.me-textarea{min-height:160px;resize:vertical;line-height:1.6}
.me-btn-row{display:flex;gap:8px;margin-top:14px}
.me-btn{flex:1;border:none;border-radius:8px;padding:10px;font-size:12px;font-weight:700;cursor:pointer}
.me-btn.save{background:var(--gold);color:#000}
.me-btn.cancel{background:var(--bg3);color:var(--txt2);border:1px solid var(--bg4)}
.me-btn.delete{background:rgba(240,78,78,.15);color:var(--red);border:1px solid rgba(240,78,78,.4)}
.me-file-replace-btn{display:block;margin-top:6px;background:var(--bg3);border:1px solid var(--gold-dim);color:var(--gold);border-radius:8px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer}

/* ── 로그인 화면 ── */
body:not(.authed) #app{display:none}
body.authed .login-screen{display:none}
.login-screen{position:fixed;inset:0;background:var(--bg);z-index:500;display:flex;align-items:center;justify-content:center;padding:calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left))}
.login-box{width:100%;max-width:320px;text-align:center}
.login-title{font-size:18px;font-weight:700;color:var(--gold);margin-bottom:4px}
.login-sub{font-size:12px;color:var(--txt3);margin-bottom:20px}
.login-box .me-input{text-align:left}
.login-error{min-height:16px;font-size:11px;color:var(--red);margin-top:10px}

/* ── 기존 메시지 데이터 표시 스타일(데이터 보존용) ── */
.msg-thread-card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:11px 13px;margin-bottom:8px;cursor:pointer}
.msg-thread-card:active{border-color:var(--gold)}
.msg-thread-name{font-size:13px;font-weight:700;color:var(--txt)}
.msg-thread-preview{font-size:11.5px;color:var(--txt2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-thread-time{font-size:9.5px;color:var(--txt3);margin-top:3px}

/* ── 비상 ── */
#messagesPage{background:var(--bg)}
.emergency-page-header{background:var(--bg2);border-bottom:1px solid var(--bg4);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.emergency-page-title{font-size:15px;font-weight:900;color:#ff5d5d}
.emergency-page-sub{font-size:10px;color:var(--txt3);margin-top:3px}
.emergency-refresh-btn{background:var(--bg3);border:1px solid var(--bg4);color:var(--txt2);border-radius:7px;padding:7px 10px;font-size:10.5px;cursor:pointer}
.emergency-page-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}
.emergency-my-train-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg2);border:1px solid var(--bg4);border-radius:10px;padding:9px 11px;color:var(--txt2);font-size:11px;font-weight:800}
.emergency-my-train-row button{background:var(--bg3);border:1px solid var(--bg4);border-radius:7px;color:var(--txt2);padding:6px 9px;font-size:10px;font-weight:800;cursor:pointer}
.emergency-status-card,.emergency-confirmation-panel,.emergency-master-panel,.emergency-guidance{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:15px}
.emergency-status-card.active{border-color:rgba(255,58,58,.8);box-shadow:0 0 0 1px rgba(255,58,58,.15),0 0 24px rgba(255,32,32,.12)}
.emergency-status-row{display:flex;align-items:center;gap:10px}
.emergency-status-dot{width:12px;height:12px;border-radius:50%;background:var(--txt3);flex-shrink:0}
.emergency-status-dot.active{background:#ff3030;box-shadow:0 0 0 5px rgba(255,48,48,.14);animation:emergencyDotPulse 1s ease-in-out infinite}
.emergency-status-title{font-size:15px;font-weight:900;color:var(--txt)}
.emergency-status-time{font-size:10px;color:var(--txt3);margin-top:2px}
.emergency-current-message{margin-top:14px;min-height:54px;padding:13px;border-radius:9px;background:var(--bg3);color:var(--txt2);font-size:14px;line-height:1.6;white-space:pre-wrap}
.emergency-status-card.active .emergency-current-message{color:#fff;background:rgba(152,24,24,.28);border:1px solid rgba(255,68,68,.3)}
.emergency-ack-btn{width:100%;margin-top:10px;background:#ffcc00;color:#111;border:0;border-radius:8px;padding:10px;font-size:12px;font-weight:900;cursor:pointer}
.emergency-ack-btn:disabled{opacity:.55;cursor:default}
.emergency-confirmation-title{font-size:13px;font-weight:900;color:var(--txt);margin-bottom:10px}
.emergency-confirmation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.emergency-confirmation-grid>div{min-width:0;background:var(--bg3);border:1px solid var(--bg4);border-radius:9px;padding:10px;display:flex;flex-direction:column;gap:5px}
.emergency-confirmation-grid span{font-size:9.5px;color:var(--txt3)}
.emergency-confirmation-grid strong{font-size:12px;color:var(--txt2);line-height:1.35;word-break:keep-all}
#emergencyConfirmationStatus.waiting{color:#ff7777}
#emergencyConfirmationStatus.complete{color:#56d58b}
.emergency-master-title{font-size:13px;font-weight:900;color:#ff7777}
.emergency-master-help{font-size:10.5px;color:var(--txt3);margin:4px 0 10px}
.emergency-target-label{display:block;margin-bottom:5px;color:var(--txt2);font-size:10.5px;font-weight:800}
.emergency-master-panel input{width:100%;margin-bottom:9px;background:var(--bg3);border:1px solid var(--bg4);border-radius:9px;color:var(--txt);padding:11px;font:inherit;font-size:13px;outline:none}
.emergency-master-panel input:focus{border-color:#ff5555}
.emergency-master-panel textarea{width:100%;min-height:100px;resize:vertical;background:var(--bg3);border:1px solid var(--bg4);border-radius:9px;color:var(--txt);padding:11px;font:inherit;font-size:13px;line-height:1.5;outline:none}
.emergency-master-panel textarea:focus{border-color:#ff5555}
.emergency-master-actions{display:flex;gap:8px;margin-top:9px}
.emergency-master-actions button{flex:1;border-radius:8px;padding:10px 8px;font-size:12px;font-weight:900;cursor:pointer}
.emergency-master-actions button:disabled{opacity:.35;cursor:default}
.emergency-activate-btn{background:#e52c2c;color:#fff;border:1px solid #ff5b5b}
.emergency-clear-btn{background:var(--bg3);color:var(--txt2);border:1px solid var(--bg4)}
.emergency-guidance{display:flex;flex-direction:column;gap:4px;font-size:10.5px;line-height:1.5;color:var(--txt3)}
.emergency-guidance strong{color:var(--txt2)}
.emergency-screen-alert{position:fixed;z-index:12001;left:max(12px,var(--safe-left));right:max(12px,var(--safe-right));top:max(12px,var(--safe-top));display:flex;align-items:center;gap:10px;background:#a70d16;border:2px solid #ff6a6a;border-radius:12px;padding:12px 13px;color:#fff;box-shadow:0 10px 36px rgba(0,0,0,.5)}
.emergency-screen-alert[hidden]{display:none}
.emergency-screen-icon{font-size:25px;animation:emergencyIconPulse 1s ease-in-out infinite}
.emergency-screen-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.emergency-screen-copy strong{font-size:14px;font-weight:900}
.emergency-screen-copy span{font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emergency-screen-alert button{background:#fff;color:#99111a;border:0;border-radius:8px;padding:8px 13px;font-size:11px;font-weight:900;cursor:pointer;flex-shrink:0}
#tab-messages.emergency-tab-active{color:#ff6464!important;background:rgba(156,15,24,.3);box-shadow:inset 0 0 0 1px rgba(255,76,76,.4)}
#tab-messages.emergency-tab-unacknowledged{animation:emergencyTabPulse 1s ease-in-out infinite}
body.emergency-unacknowledged::after{content:"";position:fixed;z-index:12000;inset:0;pointer-events:none;border:8px solid rgba(255,31,31,.92);background:rgba(255,0,0,.08);animation:emergencyScreenPulse 1s ease-in-out infinite}
@keyframes emergencyScreenPulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes emergencyTabPulse{0%,100%{filter:brightness(.8)}50%{filter:brightness(1.7);box-shadow:inset 0 0 0 2px #ff5555,0 0 18px rgba(255,40,40,.55)}}
@keyframes emergencyDotPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes emergencyIconPulse{0%,100%{transform:scale(.92)}50%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){
  body.emergency-unacknowledged::after,#tab-messages.emergency-tab-unacknowledged,.emergency-status-dot.active,.emergency-screen-icon{animation:none!important}
  body.emergency-unacknowledged::after{opacity:1;background:rgba(255,0,0,.04)}
}
@media(max-width:480px){
  .emergency-confirmation-grid{grid-template-columns:1fr}
  .emergency-confirmation-grid>div{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
}

/* ════════════════════════════════
   AI 챗봇
════════════════════════════════ */
#chatPage{background:var(--bg)}
.chat-header{background:var(--bg2);border-bottom:1px solid var(--bg4);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.chat-messages{flex:1;overflow-y:auto;padding:14px;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px}
.chat-empty{margin:auto;text-align:center;padding:20px}
.chat-bubble{max-width:82%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.55;white-space:pre-wrap}
.chat-bubble.user{align-self:flex-end;background:var(--gold);color:#000;border-bottom-right-radius:4px}
.chat-bubble.bot{align-self:flex-start;background:var(--bg2);border:1px solid var(--bg4);color:var(--txt);border-bottom-left-radius:4px}
.chat-bubble.loading{color:var(--txt3);font-style:italic}
.chat-sources{align-self:flex-start;display:flex;flex-wrap:wrap;gap:6px;max-width:82%;margin-top:-4px}
.chat-source-chip{background:var(--bg3);border:1px solid var(--bg4);color:var(--txt2);border-radius:12px;padding:4px 10px;font-size:10.5px;cursor:pointer;white-space:nowrap}
.chat-source-chip:hover{border-color:var(--gold);color:var(--gold)}
.chat-followup-chip{background:var(--gold-bg);border:1px solid var(--gold);color:var(--gold);border-radius:12px;padding:5px 11px;font-size:11px;line-height:1.4;cursor:pointer;max-width:100%}
.chat-followup-chip:active{background:var(--gold);color:#000}
.chat-retry-actions{align-self:flex-start;max-width:82%;margin-top:-4px}
.chat-retry-btn{border:1px solid rgba(255,116,116,.5);background:rgba(240,78,78,.09);color:#ff9a9a;border-radius:10px;padding:8px 12px;font-size:11px;font-weight:900;cursor:pointer}
.chat-retry-btn:active{transform:scale(.98);background:rgba(240,78,78,.16)}
.chat-video-actions{align-self:flex-start;max-width:82%;margin-top:-4px}
.chat-grounding{align-self:flex-start;max-width:82%;display:flex;align-items:flex-start;gap:7px;padding:7px 10px;margin-top:-4px;border-radius:9px;border:1px solid var(--bg4);background:var(--bg2);font-size:9.5px;line-height:1.4}
.chat-grounding strong{flex-shrink:0;color:var(--txt2)}
.chat-grounding span{color:var(--txt3)}
.chat-grounding.verified{border-color:rgba(62,207,126,.35);background:rgba(62,207,126,.08)}
.chat-grounding.verified strong{color:#55d892}
.chat-grounding.related{border-color:rgba(255,204,0,.3);background:rgba(255,204,0,.06)}
.chat-grounding.related strong{color:var(--gold)}
.chat-grounding.insufficient{border-color:rgba(240,78,78,.3);background:rgba(240,78,78,.07)}
.chat-grounding.insufficient strong{color:#ff7777}
.chat-pipeline{align-self:flex-start;max-width:82%;display:flex;align-items:flex-start;gap:7px;padding:6px 10px;margin-top:-4px;border-radius:9px;border:1px solid rgba(83,162,255,.25);background:rgba(50,130,230,.07);font-size:9.5px;line-height:1.4}
.chat-pipeline strong{flex-shrink:0;color:#65adff}
.chat-pipeline span{color:var(--txt3)}
.chat-video-btn{border:1px solid rgba(0,180,255,.55);background:linear-gradient(135deg,rgba(0,123,206,.2),rgba(83,57,194,.22));color:#79ccff;border-radius:10px;padding:8px 12px;font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 5px 18px rgba(0,105,210,.12)}
.chat-video-btn span{display:inline-block;margin-left:4px;padding:2px 5px;border-radius:5px;background:#2369bd;color:#fff;font-size:8px;letter-spacing:.5px;vertical-align:1px}
.chat-video-actions.related .chat-video-btn{border-color:rgba(255,204,0,.55);background:linear-gradient(135deg,rgba(255,204,0,.14),rgba(195,135,0,.16));color:#ffe16a;box-shadow:0 5px 18px rgba(255,190,0,.1)}
.chat-video-actions.related .chat-video-btn span{background:#9a7200}
.chat-video-actions.insufficient .chat-video-btn{border-color:rgba(255,86,98,.55);background:linear-gradient(135deg,rgba(240,68,82,.16),rgba(126,36,70,.17));color:#ff9ca4;box-shadow:0 5px 18px rgba(240,68,82,.1)}
.chat-video-actions.insufficient .chat-video-btn span{background:#a83242}
.chat-video-btn:active{transform:scale(.98)}
.training-video-overlay{position:fixed;inset:0;height:100vh;height:100dvh;z-index:140;background:#070b12;display:none;flex-direction:column;color:#fff}
.training-video-overlay.show{display:flex}
.training-video-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(11px + var(--safe-top)) calc(15px + var(--safe-right)) 11px calc(15px + var(--safe-left));background:#0d1420;border-bottom:1px solid #202c3c;flex-shrink:0}
.training-video-brand{font-size:14px;font-weight:900;color:#e8f5ff}
.training-video-brand span{display:inline-block;margin-left:5px;padding:2px 6px;border-radius:5px;background:#2779d4;color:#fff;font-size:8px;letter-spacing:.7px;vertical-align:2px}
.training-video-sub{font-size:9.5px;color:#8292a7;margin-top:3px}
.training-video-close{width:34px;height:34px;border-radius:50%;border:1px solid #2a3748;background:#141e2c;color:#9aacbf;font-size:17px;cursor:pointer}
.training-video-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:18px max(16px,var(--safe-right)) calc(18px + var(--safe-bottom)) max(16px,var(--safe-left));-webkit-overflow-scrolling:touch}
.training-video-stage{position:relative;width:min(100%,900px);aspect-ratio:16/9;min-height:310px;overflow:hidden;border:1px solid #30445c;border-radius:16px;padding:clamp(24px,5vw,58px);display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 86% 15%,rgba(31,129,223,.27),transparent 33%),radial-gradient(circle at 9% 90%,rgba(210,174,0,.17),transparent 32%),linear-gradient(145deg,#101b2a,#080d15 62%);box-shadow:0 18px 55px rgba(0,0,0,.45)}
.training-video-stage::before{content:"9";position:absolute;right:4%;bottom:-19%;font-size:clamp(190px,34vw,410px);font-weight:1000;line-height:1;color:rgba(255,204,0,.035);pointer-events:none}
.training-video-stage.scene-enter{animation:trainingSceneEnter .42s ease-out}
.training-video-line9{position:absolute;top:20px;right:24px;padding:6px 10px;border:1px solid rgba(255,204,0,.35);border-radius:16px;color:#e2bd00;font-size:9.5px;font-weight:900;letter-spacing:.7px}
.training-video-scene-label{position:relative;z-index:1;color:#55b9ff;font-size:11px;font-weight:900;letter-spacing:1.2px;margin-bottom:10px}
.training-video-stage h2{position:relative;z-index:1;max-width:85%;margin:0;color:#fff;font-size:clamp(22px,4vw,42px);line-height:1.25;letter-spacing:-.5px;word-break:keep-all}
.training-video-scene-text{position:relative;z-index:1;max-width:88%;margin-top:18px;color:#cad5e1;font-size:clamp(13px,2vw,19px);line-height:1.65;white-space:pre-line;word-break:keep-all;max-height:42%;overflow-y:auto}
.training-video-source{position:absolute;z-index:1;left:clamp(24px,5vw,58px);right:clamp(24px,5vw,58px);bottom:19px;color:#738499;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.training-video-stage.training-animation-mode{aspect-ratio:auto;min-height:590px;padding:42px clamp(22px,5vw,58px) 52px;justify-content:flex-start;background:radial-gradient(circle at 82% 12%,rgba(31,129,223,.2),transparent 31%),linear-gradient(155deg,#101c29,#080d15 68%)}
.training-animation-visual[hidden],.training-cinematic-visual[hidden],.training-generic-visual[hidden],.training-animation-warning[hidden]{display:none}
.training-animation-visual{position:relative;z-index:1;width:100%;max-width:760px;height:260px;margin:0 auto 12px;flex-shrink:0}
.training-animation-visual svg{display:block;width:100%;height:100%;overflow:visible}
.training-animation-visual .animation-train{fill:#dfe7ed;stroke:#9baab5;stroke-width:2}
.training-animation-visual .animation-window{fill:#203a50;stroke:#7890a1;stroke-width:1.5}
.training-animation-visual .animation-door{fill:#b9c6cf;stroke:#6f7e88;stroke-width:2}
.training-animation-visual .animation-door-line{stroke:#687983;stroke-width:2}
.training-animation-visual .animation-door-fault{fill:#ef9aa0;stroke:#f04452;filter:drop-shadow(0 0 8px rgba(240,68,82,.62))}
.training-animation-visual .animation-door-fault-line{stroke:#f04452}
.training-animation-visual .animation-track{stroke:#536476;stroke-width:4;stroke-linecap:round}
.training-animation-visual .animation-line-nine{stroke:#d8b900;stroke-width:7;stroke-linecap:round}
.training-animation-visual .animation-wheel{fill:#111923;stroke:#8292a0;stroke-width:3}
.training-animation-visual .animation-train-label{fill:#183147;font-size:18px;font-weight:900}
.training-animation-visual .animation-scene{opacity:0;transition:opacity .28s ease;pointer-events:none}
.training-animation-visual .animation-speed-common{opacity:0;transition:opacity .28s ease;pointer-events:none}
.training-animation-visual[data-family="speed"] .animation-speed-common{opacity:1}
.training-animation-visual[data-family="speed"] .animation-door-fault{fill:#b9c6cf;stroke:#6f7e88;filter:none}
.training-animation-visual[data-family="speed"] .animation-door-fault-line{stroke:#687983}
.training-animation-visual[data-scene="speed-general"] [data-animation-scene="speed-general"],
.training-animation-visual[data-scene="speed-coupled"] [data-animation-scene="speed-coupled"],
.training-animation-visual[data-scene="speed-signal"] [data-animation-scene="speed-signal"],
.training-animation-visual[data-scene="speed-turnout"] [data-animation-scene="speed-turnout"],
.training-animation-visual[data-scene="speed-earthquake"] [data-animation-scene="speed-earthquake"],
.training-animation-visual[data-scene="door-alert"] [data-animation-scene="door-alert"],
.training-animation-visual[data-scene="control-reset"] [data-animation-scene="control-reset"],
.training-animation-visual[data-scene="door-recheck"] [data-animation-scene="door-recheck"],
.training-animation-visual[data-scene="crew-move"] [data-animation-scene="crew-move"],
.training-animation-visual[data-scene="door-secure"] [data-animation-scene="door-secure"],
.training-animation-visual[data-scene="return-run"] [data-animation-scene="return-run"]{opacity:1}
.training-animation-visual .animation-alert-ring{fill:none;stroke:#ff4f5c;stroke-width:4;transform-box:fill-box;transform-origin:center;animation:trainingDoorRing 1.2s infinite}
.training-animation-visual .animation-signal-wave{fill:none;stroke:#ffd329;stroke-width:4;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:trainingDoorPulse 1.35s infinite}
.training-animation-visual .animation-scene-tag{stroke:none}
.training-animation-visual .animation-scene-tag-danger{fill:#f04452}
.training-animation-visual .animation-scene-tag-safe{fill:#276b50}
.training-animation-visual .animation-scene-tag-text{fill:#fff;text-anchor:middle;font-size:15px;font-weight:900}
.training-animation-visual .animation-panel{fill:#1f3346;stroke:#56aaf1;stroke-width:2}
.training-animation-visual .animation-panel-gold{stroke:#f5ca19}
.training-animation-visual .animation-panel-text{fill:#85c9ff;text-anchor:middle;font-size:14px;font-weight:900}
.training-animation-visual .animation-panel-text-gold{fill:#f5ca19}
.training-animation-visual .animation-top-text{fill:#ffca32;text-anchor:middle;font-size:15px;font-weight:900}
.training-animation-visual .animation-top-text-blue{fill:#79c9ff}
.training-animation-visual .animation-top-text-gold{fill:#f5ca19}
.training-animation-visual .animation-top-text-green{fill:#69dda8}
.training-animation-visual .animation-top-text-danger{fill:#ff6874}
.training-animation-visual .animation-speed-dial{fill:#111e2b;stroke:#3c5368;stroke-width:3}
.training-animation-visual .animation-speed-arc{fill:none;stroke:#f5ca19;stroke-width:4;stroke-linecap:round}
.training-animation-visual .animation-speed-needle{stroke:#ff5a66;stroke-width:4;stroke-linecap:round;transform-box:fill-box;transform-origin:0 100%;animation:trainingSpeedNeedle 1.7s ease-in-out infinite alternate}
.training-animation-visual .animation-speed-hub{fill:#ff5a66}
.training-animation-visual .animation-speed-value{fill:#fff;text-anchor:middle;font-size:15px;font-weight:900}
.training-animation-visual .animation-speed-unit{fill:#f5ca19;text-anchor:middle;font-size:11px;font-weight:900}
.training-animation-visual .animation-speed-motion{fill:none;stroke:#49aef4;stroke-width:5;stroke-linecap:round;animation:trainingRunLines 1.1s linear infinite}
.training-animation-visual .animation-coupled-car{fill:#b9c6cf;stroke:#6f7e88;stroke-width:2}
.training-animation-visual .animation-coupled-wheel{fill:#111923;stroke:#8292a0;stroke-width:2}
.training-animation-visual .animation-coupler{fill:none;stroke:#f5ca19;stroke-width:6;stroke-linecap:round}
.training-animation-visual .animation-push-arrow{fill:none;stroke:#79c9ff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;animation:trainingPushArrow 1.3s ease-in-out infinite alternate}
.training-animation-visual .animation-atc-wave{fill:none;stroke:#79c9ff;stroke-width:4;stroke-linecap:round;animation:trainingDoorPulse 1.35s infinite}
.training-animation-visual .animation-signal-post{fill:#748493}
.training-animation-visual .animation-signal-head{fill:#172532;stroke:#7890a1;stroke-width:2}
.training-animation-visual .animation-signal-red{fill:#f14b58;filter:drop-shadow(0 0 7px rgba(241,75,88,.7))}
.training-animation-visual .animation-signal-amber{fill:#d8b900}
.training-animation-visual .animation-turnout-base,.training-animation-visual .animation-turnout-branch{fill:none;stroke:#f5ca19;stroke-width:5;stroke-linecap:round}
.training-animation-visual .animation-turnout-branch{stroke:#54b8fa;stroke-dasharray:9 7;animation:trainingTurnoutFlow 1.2s linear infinite}
.training-animation-visual .animation-turnout-point{fill:#ff5a66;filter:drop-shadow(0 0 6px rgba(255,90,102,.65))}
.training-animation-visual .animation-quake-wave{fill:none;stroke:#ff5a66;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;animation:trainingQuake .45s ease-in-out infinite alternate}
.training-animation-visual .animation-quake-mark{fill:none;stroke:#ffb64d;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;animation:trainingQuake .45s ease-in-out infinite alternate}
.training-animation-visual .animation-crew{transform-box:fill-box;transform-origin:center;animation:trainingCrewMove 2.6s ease-in-out infinite alternate}
.training-animation-visual .animation-crew-head{fill:#f3c796}
.training-animation-visual .animation-crew-body{fill:#f2c71a;stroke:#101820;stroke-width:2}
.training-animation-visual .animation-crew-limb{fill:none;stroke:#f2c71a;stroke-width:7;stroke-linecap:round}
.training-animation-visual .animation-kit{fill:#516579;stroke:#9fb1c0;stroke-width:2}
.training-animation-visual .animation-kit-handle{fill:none;stroke:#9fb1c0;stroke-width:3}
.training-animation-visual .animation-scan{stroke:#62dba4;stroke-width:5;stroke-linecap:round;animation:trainingDoorScan 1.5s ease-in-out infinite alternate}
.training-animation-visual .animation-sticker{fill:#f6cd18;stroke:#101820;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:trainingStickerPop 1.25s ease-in-out infinite alternate}
.training-animation-visual .animation-sticker-text{fill:#111820;text-anchor:middle;font-size:10px;font-weight:900}
.training-animation-visual .animation-check-box{fill:#1d3042;stroke:#64dba5;stroke-width:3}
.training-animation-visual .animation-check{fill:none;stroke:#64dba5;stroke-width:4}
.training-animation-visual .animation-moving-lines{fill:none;stroke:#47aaf0;stroke-width:4;stroke-linecap:round;animation:trainingRunLines 1.1s linear infinite}
.training-video-stage.training-cinematic-mode{min-height:600px;background:radial-gradient(circle at 50% 22%,rgba(255,204,0,.14),transparent 38%),linear-gradient(155deg,#111d29,#080d15 70%)}
.training-cinematic-visual{position:relative;z-index:1;width:100%;max-width:760px;height:auto;aspect-ratio:720/270;margin:0 auto 12px;flex-shrink:0;filter:drop-shadow(0 15px 22px rgba(0,0,0,.28))}
.training-cinematic-visual svg{display:block;width:100%;height:100%;overflow:visible}
.cinematic-station-bg{fill:#182636;stroke:#33475b;stroke-width:2}
.cinematic-station-sign{fill:#0c151f;stroke:#d7b900;stroke-width:2}
.cinematic-station-text{fill:#f4cf1d;text-anchor:middle;font-size:13px;font-weight:900}
.cinematic-platform-line{stroke:#f0c913;stroke-width:8;stroke-linecap:round}
.cinematic-train-body{fill:url(#cinematicTrainBody);stroke:#899aa6;stroke-width:2}
.cinematic-window,.cinematic-door-window{fill:url(#cinematicWindow);stroke:#6d8799;stroke-width:2}
.cinematic-line-nine{fill:#d5b700}
.cinematic-train-label{fill:#203849;font-size:13px;font-weight:1000;letter-spacing:1px}
.cinematic-wheel{fill:#111923;stroke:#83929d;stroke-width:4}
.cinematic-door-frame{fill:#95a5af;stroke:#657985;stroke-width:2}
.cinematic-door-panel{fill:#c9d3d9;stroke:#778a95;stroke-width:1.5}
.cinematic-door-seam{stroke:#627783;stroke-width:2}
.cinematic-fault-ring{fill:none;stroke:#ff5361;stroke-width:5;opacity:.15;transform-box:fill-box;transform-origin:center}
.cinematic-success-disc{fill:rgba(33,161,101,.9);stroke:#78efb7;stroke-width:4;opacity:0}
.cinematic-success-check{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.cinematic-inspect-beam{stroke:#72efbd;stroke-width:7;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 7px rgba(114,239,189,.85))}
.cinematic-passengers{fill:#75c8ff;stroke:#75c8ff;stroke-width:4;stroke-linecap:round;opacity:0}
.cinematic-announcement-waves{fill:none;stroke:#ffd329;stroke-width:4;stroke-linecap:round;opacity:0}
.cinematic-operator{transform-box:fill-box;transform-origin:center;transition:transform .65s ease}
.cinematic-operator-head{fill:#f0c28e;stroke:#14202b;stroke-width:2}
.cinematic-operator-body{fill:#f4cd1c;stroke:#121b24;stroke-width:2}
.cinematic-operator-limb{fill:none;stroke:#f4cd1c;stroke-width:7;stroke-linecap:round}
.cinematic-radio{fill:#2d4354;stroke:#8da3b4;stroke-width:1.5}
.cinematic-radio-wave{fill:none;stroke:#69c4ff;stroke-width:3.5;stroke-linecap:round;opacity:0}
.cinematic-equipment-bag{fill:#435c6f;stroke:#a8bac6;stroke-width:2;opacity:0}
.cinematic-control-room,.cinematic-tool-panel,.cinematic-stop-signal,.cinematic-speed-lines{opacity:0;transition:opacity .35s ease}
.cinematic-control-room rect:first-child,.cinematic-tool-panel rect:first-child{fill:#102030;stroke:#5baddf;stroke-width:2}
.cinematic-control-room circle{fill:#f0c28e}
.cinematic-control-room path{fill:#4ba6df}
.cinematic-control-room rect:not(:first-child){fill:#4ba6df;opacity:.7}
.cinematic-control-room text,.cinematic-tool-panel text{fill:#98d9ff;text-anchor:middle;font-size:10px;font-weight:900}
.cinematic-tool-panel rect:not(:first-child){fill:#253a4c;stroke:#607d90;stroke-width:1.5}
.cinematic-switch-knob{fill:#ffd329;transform-box:fill-box;transform-origin:center}
.cinematic-switch-line{stroke:#15212a;stroke-width:3;stroke-linecap:round}
.cinematic-stop-signal rect:first-child{fill:#748595}
.cinematic-stop-signal rect:nth-child(2){fill:#172531;stroke:#718594;stroke-width:2}
.cinematic-stop-signal circle:first-of-type{fill:#ff4f5c;filter:drop-shadow(0 0 8px rgba(255,79,92,.8))}
.cinematic-stop-signal circle:last-of-type{fill:#4b5964}
.cinematic-speed-lines path{fill:none;stroke:#58b9f5;stroke-width:5;stroke-linecap:round}
.training-cinematic-visual[data-scene="report"] .cinematic-control-room,
.training-cinematic-visual[data-scene="report"] .cinematic-radio-wave{opacity:1}
.training-cinematic-visual[data-scene="report"] .cinematic-radio-wave{animation:trainingCinematicRadio 1.35s ease-out infinite}
.training-cinematic-visual[data-scene="stop"] .cinematic-stop-signal,
.training-cinematic-visual[data-scene="warning"] .cinematic-stop-signal{opacity:1}
.training-cinematic-visual[data-scene="stop"] .cinematic-fault-ring,
.training-cinematic-visual[data-scene="warning"] .cinematic-fault-ring{opacity:1;animation:trainingCinematicFault 1.15s ease-out infinite}
.training-cinematic-visual[data-scene="operate"] .cinematic-operator{transform:translate(210px,24px)}
.training-cinematic-visual[data-scene="operate"] .cinematic-tool-panel{opacity:1}
.training-cinematic-visual[data-scene="operate"] .cinematic-switch-knob{animation:trainingCinematicSwitch 1.2s ease-in-out infinite alternate}
.training-cinematic-visual[data-scene="passenger"] .cinematic-passengers,
.training-cinematic-visual[data-scene="passenger"] .cinematic-announcement-waves{opacity:1}
.training-cinematic-visual[data-scene="passenger"] .cinematic-announcement-waves{animation:trainingCinematicRadio 1.45s ease-out infinite}
.training-cinematic-visual[data-scene="equipment"] .cinematic-equipment-bag{opacity:1;animation:trainingCinematicBag 1.2s ease-in-out infinite alternate}
.training-cinematic-visual[data-scene="equipment"] .cinematic-operator{transform:translate(74px,0)}
.training-cinematic-visual[data-scene="check"] .cinematic-operator,
.training-cinematic-visual[data-scene="step"] .cinematic-operator{transform:translate(210px,24px)}
.training-cinematic-visual[data-scene="check"] .cinematic-inspect-beam,
.training-cinematic-visual[data-scene="step"] .cinematic-inspect-beam{opacity:1;animation:trainingCinematicInspect 1.6s ease-in-out infinite alternate}
.training-cinematic-visual[data-scene="check"] .cinematic-success-disc,
.training-cinematic-visual[data-scene="check"] .cinematic-success-check{opacity:1;animation:trainingCinematicSuccess 1.5s ease-in-out infinite alternate}
.training-cinematic-visual[data-scene="check"] .cinematic-fault-ring{opacity:0}
.training-cinematic-visual[data-scene="step"] .cinematic-speed-lines{opacity:.85;animation:trainingRunLines 1.1s linear infinite}
.training-video-stage.training-guide-mode{min-height:540px;background:radial-gradient(circle at 50% 25%,rgba(53,152,238,.2),transparent 35%),linear-gradient(155deg,#101c29,#080d15 68%)}
.training-video-stage.training-guide-mode[data-grounding="related"]{border-color:rgba(255,204,0,.42);background:radial-gradient(circle at 50% 25%,rgba(255,204,0,.15),transparent 36%),linear-gradient(155deg,#1b1b14,#090d13 68%)}
.training-video-stage.training-guide-mode[data-grounding="insufficient"]{border-color:rgba(240,68,82,.45);background:radial-gradient(circle at 50% 25%,rgba(240,68,82,.17),transparent 36%),linear-gradient(155deg,#1d151b,#090d13 68%)}
.training-generic-visual{--guide-color:#4eb6ff;--guide-soft:rgba(78,182,255,.16);position:relative;z-index:1;width:min(100%,540px);height:220px;margin:0 auto 13px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.training-generic-visual[data-scene="guide-check"]{--guide-color:#62dba4;--guide-soft:rgba(98,219,164,.16)}
.training-generic-visual[data-scene="guide-report"]{--guide-color:#65c1ff;--guide-soft:rgba(101,193,255,.16)}
.training-generic-visual[data-scene="guide-warning"],.training-generic-visual[data-scene="guide-caution"]{--guide-color:#ffd329;--guide-soft:rgba(255,211,41,.17)}
.training-generic-visual[data-scene="guide-insufficient"]{--guide-color:#ff6874;--guide-soft:rgba(255,104,116,.17)}
.training-generic-orbit{position:absolute;border:1px solid var(--guide-color);border-radius:50%;opacity:.35;animation:trainingGuideOrbit 6s linear infinite}
.training-generic-orbit.orbit-one{width:176px;height:176px}
.training-generic-orbit.orbit-two{width:132px;height:132px;border-style:dashed;animation-direction:reverse;animation-duration:4.8s}
.training-generic-icon{position:relative;z-index:3;width:88px;height:88px;border:2px solid var(--guide-color);border-radius:28px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--guide-soft),rgba(8,15,24,.96));color:var(--guide-color);font-size:28px;font-weight:1000;box-shadow:0 0 34px var(--guide-soft),inset 0 0 18px var(--guide-soft);animation:trainingGuidePulse 1.8s ease-in-out infinite}
.training-generic-label{position:absolute;z-index:3;left:50%;bottom:4px;transform:translateX(-50%);padding:6px 13px;border:1px solid var(--guide-color);border-radius:16px;background:rgba(8,14,22,.86);color:var(--guide-color);font-size:10px;font-weight:900;letter-spacing:.7px;white-space:nowrap;opacity:.9}
.training-generic-card{position:absolute;width:70px;height:45px;border:1px solid var(--guide-color);border-radius:9px;background:linear-gradient(145deg,var(--guide-soft),rgba(13,22,32,.88));opacity:.62;box-shadow:0 8px 20px rgba(0,0,0,.24);animation:trainingGuideCard 2.2s ease-in-out infinite alternate}
.training-generic-card::before,.training-generic-card::after{content:"";position:absolute;left:10px;height:3px;border-radius:2px;background:var(--guide-color);opacity:.68}
.training-generic-card::before{top:13px;width:44px}
.training-generic-card::after{top:23px;width:31px}
.training-generic-card.card-one{left:8%;top:24px;transform:rotate(-7deg)}
.training-generic-card.card-two{right:8%;top:24px;transform:rotate(7deg);animation-delay:.35s}
.training-generic-card.card-three{right:13%;bottom:13px;width:58px;height:38px;transform:rotate(-4deg);animation-delay:.7s}
.training-video-stage.training-animation-mode .training-video-scene-label{margin-bottom:7px}
.training-video-stage.training-animation-mode h2{max-width:100%;font-size:clamp(18px,3vw,29px)}
.training-video-stage.training-animation-mode .training-video-scene-text{max-width:100%;max-height:none;margin-top:9px;font-size:clamp(12px,1.7vw,15.5px);line-height:1.6;overflow-wrap:anywhere}
.training-animation-warning{position:relative;z-index:1;width:100%;margin-top:11px;padding:8px 10px;border:1px solid rgba(240,68,82,.4);border-radius:8px;background:rgba(240,68,82,.1);color:#ff9ba3;font-size:10.5px;font-weight:800;line-height:1.45}
.training-animation-evidence{position:relative;z-index:1;width:100%;margin-top:11px;padding:10px 12px;border:1px solid rgba(96,219,164,.34);border-radius:9px;background:rgba(96,219,164,.08);color:#b8f1d7;font-size:10.5px;font-weight:700;line-height:1.55}
.training-animation-evidence::before{content:"원문 대조 완료  ";color:#69dda8;font-weight:1000}
.training-animation-warning::before{content:"중요  ";color:#ff5361}
.training-video-stage[data-grounding="related"] .training-animation-warning{border-color:rgba(255,204,0,.42);background:rgba(255,204,0,.08);color:#ffe684}
.training-video-stage[data-grounding="related"] .training-animation-warning::before{content:"원문 확인  ";color:#ffd329}
.training-video-stage[data-grounding="insufficient"] .training-animation-warning::before{content:"안전 안내  ";color:#ff5361}
@keyframes trainingDoorPulse{0%,100%{opacity:.28;transform:scale(.86)}50%{opacity:1;transform:scale(1.06)}}
@keyframes trainingDoorRing{0%{opacity:1;transform:scale(.72)}100%{opacity:0;transform:scale(1.2)}}
@keyframes trainingCrewMove{from{transform:translateX(-18px)}to{transform:translateX(35px)}}
@keyframes trainingDoorScan{from{transform:translateX(-15px)}to{transform:translateX(35px)}}
@keyframes trainingStickerPop{from{transform:scale(.88)}to{transform:scale(1.06)}}
@keyframes trainingRunLines{from{transform:translateX(0)}to{transform:translateX(-22px)}}
@keyframes trainingSpeedNeedle{from{transform:rotate(-18deg)}to{transform:rotate(16deg)}}
@keyframes trainingPushArrow{from{transform:translateX(-8px)}to{transform:translateX(8px)}}
@keyframes trainingTurnoutFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-32}}
@keyframes trainingQuake{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
@keyframes trainingGuidePulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.04)}}
@keyframes trainingGuideOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes trainingGuideCard{from{margin-top:-5px;opacity:.42}to{margin-top:5px;opacity:.8}}
@keyframes trainingCinematicRadio{0%{opacity:.18;transform:scale(.82)}55%{opacity:1}100%{opacity:0;transform:scale(1.08)}}
@keyframes trainingCinematicFault{0%{opacity:1;transform:scale(.72)}100%{opacity:0;transform:scale(1.18)}}
@keyframes trainingCinematicInspect{from{transform:translateX(0)}to{transform:translateX(82px)}}
@keyframes trainingCinematicSwitch{from{transform:scale(.82)}to{transform:scale(1.12)}}
@keyframes trainingCinematicBag{from{transform:translateY(-2px)}to{transform:translateY(5px)}}
@keyframes trainingCinematicSuccess{from{transform:scale(.88);opacity:.65}to{transform:scale(1.04);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .training-animation-visual *,.training-cinematic-visual *,.training-generic-visual *{animation:none!important;transition:none!important}
}
.training-video-progress{width:min(100%,900px);height:4px;margin-top:13px;border-radius:2px;background:#202b39;overflow:hidden;flex-shrink:0}
.training-video-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#1e91ef,#ffcc00);transition:width .08s linear}
.training-video-meta{width:min(100%,900px);display:flex;justify-content:space-between;padding:8px 2px 0;color:#708196;font-size:9.5px}
.training-video-controls{width:min(100%,900px);display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.training-video-controls button{min-width:48px;border:1px solid #2a3a4d;background:#111b28;color:#aebed0;border-radius:10px;padding:9px 13px;font-size:11px;font-weight:800;cursor:pointer}
.training-video-controls button:disabled{opacity:.35;cursor:default}
.training-video-controls .training-video-play{min-width:116px;background:#1978c9;border-color:#45a9f6;color:#fff}
.training-video-notice{width:min(100%,900px);margin-top:13px;padding:9px 12px;border-radius:9px;background:rgba(255,204,0,.06);border:1px solid rgba(255,204,0,.15);color:#9e9470;font-size:9.5px;line-height:1.5;text-align:center}
@keyframes trainingSceneEnter{from{opacity:.45;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
/* AI가 정리 못해 원문 그대로 첨부한 자료 - 일반 답변 말풍선과 톤이 다르다는 걸
   한눈에 알 수 있게 별도 카드로 분리(주황 계열로 "주의/원문" 느낌을 준다). */
.chat-raw-appendix{align-self:flex-start;max-width:82%;border:1px solid rgba(232,138,26,.4);background:rgba(232,138,26,.08);border-radius:12px;padding:10px 12px}
.chat-raw-appendix-title{font-size:11px;font-weight:700;color:var(--orange);margin-bottom:6px}
.chat-raw-item{font-size:12px;line-height:1.55;color:var(--txt2);white-space:pre-wrap}
.chat-raw-item+.chat-raw-item{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(232,138,26,.3)}
/* 답변 문장 끝에 붙는 "(p.12)" 텍스트 인용을 NotebookLM처럼 작은 원형 배지로 표시 */
.chat-cite{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 4px;margin:0 2px;border-radius:8px;background:var(--bg4);color:var(--txt2);font-size:9px;font-weight:700;vertical-align:middle;line-height:1}
.chat-input-wrap{display:flex;gap:8px;padding:10px 14px;background:var(--bg2);border-top:1px solid var(--bg4);flex-shrink:0}
.chat-input{flex:1;background:var(--bg3);border:1px solid var(--bg4);color:var(--txt);border-radius:20px;padding:10px 14px;font-size:13px;outline:none}
.chat-input:focus{border-color:var(--gold)}
.chat-send-btn{background:var(--gold);color:#000;border:none;border-radius:20px;padding:10px 18px;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0}
.chat-send-btn:disabled{opacity:.5;cursor:default}

/* 매뉴얼 퀴즈 오버레이 */
.quiz-overlay{position:fixed;inset:0;height:100vh;height:100dvh;background:var(--bg);z-index:130;display:none;flex-direction:column}
.quiz-overlay.show{display:flex}
.quiz-header{background:var(--bg2);border-bottom:1px solid var(--bg4);padding:calc(10px + var(--safe-top)) calc(14px + var(--safe-right)) 10px calc(14px + var(--safe-left));display:flex;align-items:center;gap:10px;flex-shrink:0}
.quiz-header-title{font-size:14px;font-weight:700;color:var(--gold);flex:1}
.quiz-body{flex:1;width:100%;max-width:760px;margin:0 auto;overflow-y:auto;padding:16px 16px calc(16px + var(--safe-bottom));-webkit-overflow-scrolling:touch}
.quiz-q{background:var(--bg2);border:1px solid var(--bg4);border-radius:10px;padding:14px;margin-bottom:12px}
.quiz-q-title{font-size:13px;font-weight:700;color:var(--txt);margin-bottom:10px;line-height:1.5}
.quiz-opt{padding:10px 12px;border-radius:8px;background:var(--bg3);border:1px solid var(--bg4);font-size:12.5px;margin-bottom:6px;cursor:pointer;line-height:1.5}
.quiz-opt:active{background:var(--bg4)}
.quiz-opt.selected{border-color:var(--gold);background:var(--gold-bg)}
.quiz-opt.correct{border-color:#3ecf7e;background:rgba(62,207,126,.15);color:#3ecf7e}
.quiz-opt.wrong{border-color:var(--red);background:rgba(240,78,78,.15);color:var(--red)}
.quiz-explain{margin-top:8px;padding-top:8px;border-top:1px dashed var(--bg4);font-size:11.5px;color:var(--txt2);line-height:1.6}
.quiz-score{text-align:center;padding:16px;font-size:15px;font-weight:700;color:var(--gold)}
.quiz-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:var(--txt3)}

/* ════════════════════════════════
   모바일(작은 화면) 최적화
   PC/태블릿은 기존 크기 유지, 좁은 화면에서만 축소
════════════════════════════════ */
@media (max-width: 1024px){
  #header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto auto;
    grid-template-areas:
      "logo title title title"
      "status mode retry user";
    gap:7px 8px;
  }
  .logo-badge{grid-area:logo}
  .app-title{grid-area:title;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .status-pill{grid-area:status;min-width:0;overflow:hidden;white-space:nowrap}
  .status-pill span{overflow:hidden;text-overflow:ellipsis}
  #modeBadge{grid-area:mode;white-space:nowrap}
  #retryRealtimeBtn{grid-area:retry}
  #userBadge{grid-area:user;min-width:0;justify-self:end;overflow:hidden;white-space:nowrap}
  #userBadgeText{overflow:hidden;text-overflow:ellipsis}

  .quiz-header-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .quiz-header button{width:44px;height:44px;flex-shrink:0}
  .mv-header,.pdf-viewer-header{padding-top:calc(10px + var(--safe-top));padding-left:calc(14px + var(--safe-left));padding-right:calc(14px + var(--safe-right))}
  .mv-body,.pdf-canvas-wrap{padding-bottom:calc(16px + var(--safe-bottom))}
  .manual-editor-overlay{padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left))}
  .work-detail-sheet{padding-bottom:calc(16px + var(--safe-bottom))}
}
@media (min-width: 601px) and (max-width: 1024px){
  #header{padding:calc(10px + var(--safe-top)) 18px 10px}
  #userBadge{max-width:220px}
  #userBadgeText{max-width:130px}
  .tab-btn{min-height:56px}
  .map-wrap{min-width:960px}
  .arrival-grid{max-width:1024px;margin:0 auto}
  .quiz-header-title{font-size:15px}
}
@media (max-width: 600px){
  #header{
    order:0;
    padding:calc(9px + var(--safe-top)) 12px 9px;
  }
  .my-train-setting-bar{order:1;padding:7px 12px}
  .logo-badge{grid-area:logo;width:30px;height:30px}
  .app-title{font-size:14px}
  #userBadge{grid-area:user;min-width:0;max-width:150px;justify-self:end;overflow:hidden;white-space:nowrap}
  #userBadgeText{max-width:76px;overflow:hidden;text-overflow:ellipsis}

  #pages{order:2}
  #tabBar{order:3;border-top:1px solid var(--bg4);border-bottom:0;padding-bottom:var(--safe-bottom);box-shadow:0 -4px 14px rgba(0,0,0,.22)}
  .tab-btn{min-width:0;min-height:52px;font-size:9px;padding:7px 2px 6px;border-top:2px solid transparent;border-bottom:0}
  .tab-btn.active{border-top-color:var(--gold);border-bottom-color:transparent}
  .tab-icon{font-size:17px}
  .subway-route-tab-icon{width:19px;height:19px}
  .dia-mapping-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dia-slot-list{grid-template-columns:1fr}
  .dia-admin-actions{display:grid;grid-template-columns:1fr 1fr}.dia-manage-btn{min-width:0}.dia-admin-actions .dia-manage-btn:last-child:nth-child(3){grid-column:1/-1}

  .summary-strip{gap:6px;padding:10px 10px 0}
  .s-card{padding:8px 5px}
  .gap-panel{margin:9px 10px 0;padding:11px 10px}
  .gap-row{gap:6px}
  .gap-box{padding:9px 5px}
  .legend{gap:8px;padding:8px 10px 0}
  .map-wrap{min-width:820px}
  .section-block .train-body{width:40px;height:22px;font-size:8.5px}
  .section-block .train-num{font-size:9px}
  .arrival-grid{gap:7px;padding:4px 10px 12px}

  .quiz-header-title{font-size:15px}
  .quiz-body{padding:12px 10px calc(16px + var(--safe-bottom))}
  .quiz-q{padding:12px;margin-bottom:10px;border-radius:8px}
  .quiz-q-title{font-size:14px;line-height:1.55}
  .quiz-opt{font-size:13.5px;padding:11px 12px;margin-bottom:7px}

  .training-video-body{padding:10px max(10px,var(--safe-right)) calc(12px + var(--safe-bottom)) max(10px,var(--safe-left))}
  .training-video-stage{aspect-ratio:auto;min-height:52vh;max-height:58vh;border-radius:12px;padding:48px 22px 54px}
  .training-video-stage.training-animation-mode{min-height:510px;max-height:none;padding:40px 14px 48px}
  .training-video-stage.training-guide-mode{min-height:500px}
  .training-video-stage.training-cinematic-mode{min-height:500px;padding-left:10px;padding-right:10px}
  .training-animation-visual{height:auto;aspect-ratio:720/250;margin-bottom:9px}
  .training-cinematic-visual{width:calc(100% + 8px);margin-left:-4px;margin-right:-4px;margin-bottom:10px}
  .training-generic-visual{height:184px;margin-bottom:10px}
  .training-generic-orbit.orbit-one{width:148px;height:148px}
  .training-generic-orbit.orbit-two{width:110px;height:110px}
  .training-generic-icon{width:74px;height:74px;border-radius:23px;font-size:24px}
  .training-generic-card{width:58px;height:38px}
  .training-video-stage.training-animation-mode h2{font-size:17px;line-height:1.38}
  .training-video-stage.training-animation-mode .training-video-scene-text{font-size:11.5px;line-height:1.55;margin-top:8px}
  .training-animation-warning{font-size:9.5px;margin-top:9px}
  .training-video-line9{top:14px;right:14px;font-size:8px}
  .training-video-scene-label{font-size:9px;margin-bottom:8px}
  .training-video-stage h2{max-width:94%;font-size:22px}
  .training-video-scene-text{max-width:100%;max-height:48%;margin-top:13px;font-size:13.5px;line-height:1.6}
  .training-video-source{left:22px;right:22px;bottom:15px;font-size:8.5px}
  .training-video-controls{gap:6px;margin-top:9px}
  .training-video-controls button{padding:9px 10px}
  .training-video-notice{font-size:8.5px;margin-top:10px}

  .status-pill{font-size:10px;padding:3px 8px}
  #modeBadge{font-size:9px!important;padding:2px 6px!important}

  .work-detail-title{font-size:13px}
  .work-date-nav{padding:6px 8px}
  .work-date-label{font-size:12px}
  .work-s-val{font-size:13px}
  .work-s-lab{font-size:8px}
  .work-search{font-size:12px;padding:7px 9px}
  .wf-chip{font-size:9px;padding:3px 8px}

  .work-card{padding:9px 10px;gap:8px}
  .wc-name{font-size:12px}
  .wc-sub{font-size:9px}
  .wc-time{font-size:9px}
  .wc-status{font-size:11px;padding:3px 8px;min-width:44px}

  .wd-name{font-size:14px}
  .wd-badge{font-size:9px}
  .wd-timebox-item{font-size:12px}
  .wd-month-title{font-size:10px}

  .wd-month-grid{gap:4px}
  .wd-mday{padding:5px 1px 6px;font-size:9px;border-radius:6px}
  .wd-mday-date{font-size:8.5px}
  .wd-mday-val{font-size:11px;margin-top:2px}
  .wd-mday-time{font-size:7.5px;margin-top:2px}
}
@media (max-width: 360px){
  #userBadge{max-width:102px}
  #userBadgeText{display:none}
  .arrival-grid{grid-template-columns:1fr}
}
@media (max-width: 340px){
  .wd-mday-time{display:none} /* 아주 좁은 화면에선 시간 텍스트 생략, 숫자만 유지 */
  .wd-mday{padding:6px 1px}
}