:root{
  --navy:#0f2a44;--navy2:#173b5e;--ink:#17202a;--mute:#5b6876;--line:#d6dde5;--bg:#f2f5f8;--card:#fff;
  --ok:#1e8449;--okBg:#e7f6ed;--ng:#c0392b;--ngBg:#fdecea;--fix:#b9770e;--fixBg:#fff4de;--na:#6c7a89;--naBg:#eef1f4;
  --blue:#1f6fb2;--blueBg:#e6f0fa;--r:14px;--tap:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;font-size:17px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,.report{-webkit-user-select:text;user-select:text}
.sigPad{touch-action:none;-webkit-user-select:none;user-select:none}
button{cursor:pointer;border:0;background:none}
[hidden]{display:none!important}

/* 위 막대 */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:var(--navy);color:#fff}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-align:left;min-height:44px}
.logo{width:40px;height:40px;border-radius:10px;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:20px}
.brandTxt b{display:block;font-size:18px}
.brandTxt small{display:block;font-size:12px;opacity:.75}
.barRight{display:flex;gap:8px;align-items:center}
.net,.who{min-height:44px;padding:6px 14px;border-radius:999px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;white-space:nowrap}
.net{background:#e7f6ed;color:#145a32}
.net.off{background:#ffe1dc;color:#922b21;animation:pulse 1.6s ease-in-out infinite}
.net.sending{background:#fff4de;color:#7e5109}
.net .dot{width:12px;height:12px;border-radius:50%;background:currentColor}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,225,220,.35)}}
.who{background:rgba(255,255,255,.14);color:#fff}

main{max-width:1240px;margin:0 auto;padding:16px 16px 120px}
h1{font-size:26px;margin:4px 0 6px}
h2{font-size:20px;margin:22px 0 10px}
.lead{color:var(--mute);margin:0 0 14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.note{font-size:14px;color:var(--mute)}
.sample{display:inline-block;font-size:12px;font-weight:800;color:#7e5109;background:#fff4de;border:1px solid #f5d38a;border-radius:6px;padding:1px 7px;vertical-align:middle}

/* 버튼 */
.btn{min-height:var(--tap);padding:10px 20px;border-radius:12px;font-weight:800;font-size:18px;background:#fff;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.pri{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.danger{color:var(--ng);border-color:#f0b7b0}
.btn.sm{min-height:46px;font-size:16px;padding:8px 14px}
.btn:disabled{opacity:.45}
.btnRow{display:flex;flex-wrap:wrap;gap:10px}

/* 처음 화면 */
.demoNote{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:#fff4de;border:1px solid #f5d38a;color:#7e5109;border-radius:12px;padding:8px 12px;margin-bottom:12px;font-size:15px}
.demoNote .btn{background:#fff}
.offlineHero{display:flex;gap:14px;align-items:flex-start;background:#0f2a44;color:#fff;border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.offlineHero .big{font-size:20px;font-weight:800}
.offlineHero ol{margin:6px 0 0;padding-left:20px;font-size:15px;opacity:.92}
.offlineHero .btn{flex:none}
.step{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;margin:20px 0 10px}
.step i{font-style:normal;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:var(--tap);padding:10px 20px;border-radius:999px;border:2px solid var(--line);background:#fff;font-weight:800;font-size:18px}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip.add{border-style:dashed;color:var(--mute)}
.grp{font-size:15px;font-weight:800;color:var(--mute);margin:16px 0 8px}
.tplGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tpl{text-align:left;background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:16px;min-height:110px;display:flex;flex-direction:column;gap:6px}
.tpl:active{border-color:var(--navy)}
.tpl b{font-size:19px}
.tpl .no{font-size:13px;color:var(--mute);font-weight:700}
.tpl .sub{font-size:14px;color:var(--mute)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;text-align:left}
.stat b{display:block;font-size:30px}
.stat span{font-size:14px;color:var(--mute);font-weight:700}
.stat.ng b{color:var(--ng)}
.stat.pend b{color:var(--fix)}
.resume{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:2px solid var(--fix);background:var(--fixBg)}

/* 입력 */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field label{display:block;font-weight:800;font-size:15px;margin-bottom:6px}
.field input,.field select,textarea{width:100%;min-height:var(--tap);border:2px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;font-size:18px}
.field input:focus,.field select:focus,textarea:focus{outline:none;border-color:var(--blue)}
.vinRow{display:flex;gap:8px}
.vinRow input{flex:1;font-family:ui-monospace,Consolas,monospace;letter-spacing:.5px;text-transform:uppercase}
.field.full{grid-column:1/-1}
.req{color:var(--ng)}

/* 검사 화면 */
.chkTop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;background:var(--blueBg);border:1px solid #bcd6ee;border-radius:12px;padding:10px 14px}
.chkTop .veh{font-weight:800;font-size:18px}
.chkTop .veh small{display:block;font-weight:600;color:var(--mute);font-size:14px}
.prog{height:10px;background:#dfe5ec;border-radius:99px;overflow:hidden;margin:6px 0 0;min-width:200px}
.prog i{display:block;height:100%;background:var(--ok);transition:width .25s}
.chkWrap{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:start}
.secNav{position:sticky;top:84px;display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 200px);overflow:auto;padding-bottom:6px}
.secBtn{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;min-height:52px;padding:8px 12px;border-radius:12px;background:#fff;border:2px solid var(--line);font-weight:800;font-size:16px}
.secBtn.on{border-color:#f5b041;background:var(--navy);color:#fff;box-shadow:0 0 0 3px #f5b041}
.secBtn.on > span:first-child::before{content:"▶ ";color:#f5b041}
.secBtn .cnt{font-size:13px;font-weight:800;padding:2px 8px;border-radius:99px;background:var(--naBg);color:var(--mute)}
.secBtn.done .cnt{background:var(--okBg);color:var(--ok)}
.secBtn.hasNg .cnt{background:var(--ngBg);color:var(--ng)}
.secBtn.on .cnt{background:rgba(255,255,255,.2);color:#fff}
.secHead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;background:var(--navy);color:#fff;border-radius:12px;padding:10px 14px;border-left:8px solid #f5b041}
.secHead .note{color:#dfe7ef}
.secHead h2{margin:0}
.guide{background:var(--blueBg);border:1px solid #bcd6ee;border-radius:12px;padding:10px 14px;font-size:15px;margin-bottom:12px}
.guide ul{margin:4px 0 0;padding-left:20px}
.guide summary{cursor:pointer;min-height:32px}
.items{display:flex;flex-direction:column;gap:10px}
.item{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:12px 14px}
.item.s-ok{border-color:#9fd8b5}
.item.s-ng{border-color:var(--ng);background:#fffafa}
.item.s-fixed{border-color:#f0c36d}
.item.s-na{border-color:var(--line);opacity:.8}
/* 줄 구분(교수님 의견 10/19): 체크한 줄은 결과 색 바탕, 안 한 줄은 짝수 줄만 옅은 바탕, 체크 안 한 줄엔 왼쪽 띠 없음 */
.items .item:nth-child(even){background:#f1f4f8}
.items .item.s-ok{background:#e9f7ee;border-left:8px solid var(--ok)}
.items .item.s-ng{background:#fdeceb;border-left:8px solid var(--ng)}
.items .item.s-fixed{background:#fff4de;border-left:8px solid var(--fix)}
.items .item.s-na{background:#eceff3;border-left:8px solid var(--na);opacity:1}
.items .item.s-info{background:#e8f1fb;border-left:8px solid var(--blue)}
.item.flash{animation:flash 1s ease 2}
@keyframes flash{50%{box-shadow:0 0 0 5px rgba(192,57,43,.35)}}
.iTop{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.iTxt{font-size:18px;font-weight:700}
.iTxt .num{display:inline-block;min-width:30px;color:var(--mute);font-weight:800}
.key{display:inline-block;font-size:12px;font-weight:800;color:#fff;background:#d35400;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.range{font-size:13px;color:var(--mute);font-weight:700;margin-left:6px}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.o{min-height:var(--tap);min-width:96px;padding:8px 16px;border-radius:12px;border:2px solid var(--line);background:#fff;font-weight:800;font-size:17px}
.o.ok.on{background:var(--ok);border-color:var(--ok);color:#fff}
.o.ng.on{background:var(--ng);border-color:var(--ng);color:#fff}
.o.fix.on{background:var(--fix);border-color:var(--fix);color:#fff}
.o.na.on{background:var(--na);border-color:var(--na);color:#fff}
.o.sel.on{background:var(--blue);border-color:var(--blue);color:#fff}
.o.resolve{border-color:var(--fix);color:var(--fix);background:var(--fixBg)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding:10px;background:var(--ngBg);border-radius:12px}
.tag{min-height:48px;padding:6px 14px;border-radius:10px;border:2px solid #f0b7b0;background:#fff;font-weight:800;font-size:16px}
.tag.on{background:var(--ng);border-color:var(--ng);color:#fff}
.nums{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;align-items:center}
.nums label{display:flex;align-items:center;gap:6px;font-weight:800}
.nums input{width:130px;min-height:var(--tap);border:2px solid var(--line);border-radius:12px;padding:8px 12px;font-size:20px;text-align:right}
.nums input.bad{border-color:var(--ng);background:var(--ngBg);color:var(--ng)}
.nums input.good{border-color:var(--ok)}
.defect{margin-top:10px;padding:12px;border-radius:12px;background:var(--ngBg);display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start}
.defect textarea{min-height:70px;font-size:17px}
.defect .need{grid-column:1/-1;font-size:14px;font-weight:800;color:var(--ng)}
.photoBox{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.photoBox img{cursor:zoom-in;width:96px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #fff}
.camBtn{min-height:var(--tap);padding:8px 14px;border-radius:12px;background:#fff;border:2px dashed var(--ng);color:var(--ng);font-weight:800}
.camBtn.has{border-style:solid}
.secMemo{margin-top:12px}
.secMemo label{font-weight:800;font-size:15px}
.workerRow{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.workerRow input{min-height:50px;border:2px solid var(--line);border-radius:12px;padding:8px 12px;width:200px}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:15;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(15,42,68,.08)}
.dockIn{max-width:1240px;margin:0 auto;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dock .sum{font-weight:800;font-size:16px}
.dock .sum .ngN{color:var(--ng)}

/* 서명 */
.verdict{font-size:30px;font-weight:900;padding:14px 18px;border-radius:var(--r);text-align:center}
.verdict.pass{background:var(--okBg);color:var(--ok);border:2px solid #9fd8b5}
.verdict.fail{background:var(--ngBg);color:var(--ng);border:2px solid #f0b7b0}
.sigPad{width:100%;height:220px;background:#fff;border:2px dashed #9aa8b6;border-radius:var(--r);touch-action:none;display:block}
.sigWrap{position:relative}
.sigWrap .ph{position:absolute;inset:0;display:grid;place-items:center;color:#9aa8b6;font-weight:800;pointer-events:none}
.ngList{margin:8px 0 0;padding-left:20px}
.ngList li{margin:4px 0}
.ngList li b{color:var(--ng)}

/* 목록 */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tab{min-height:50px;padding:8px 16px;border-radius:999px;border:2px solid var(--line);background:#fff;font-weight:800}
.tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.recs{display:flex;flex-direction:column;gap:10px}
.rec{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:12px 16px;width:100%}
.badge{display:inline-block;font-weight:900;font-size:16px;padding:6px 12px;border-radius:10px}
.badge.pass{background:var(--okBg);color:var(--ok)}
.badge.fail{background:var(--ngBg);color:var(--ng)}
.rec .t{font-weight:800}
.rec .m{font-size:14px;color:var(--mute)}
.syncTag{font-size:13px;font-weight:800;padding:4px 10px;border-radius:99px;white-space:nowrap}
.syncTag.sent{background:var(--okBg);color:var(--ok)}
.syncTag.pending{background:var(--fixBg);color:var(--fix)}
.syncTag.sending{background:var(--blueBg);color:var(--blue)}
.dlist{display:flex;flex-direction:column;gap:10px}
.dItem{display:grid;grid-template-columns:110px 1fr;gap:12px;background:#fff;border:2px solid #f0b7b0;border-radius:var(--r);padding:12px;text-align:left;width:100%}
.dItem img,.dItem .noimg{width:110px;height:82px;object-fit:cover;border-radius:8px;background:var(--naBg);display:grid;place-items:center;font-size:13px;color:var(--mute)}
.empty{padding:30px;text-align:center;color:var(--mute);background:#fff;border:2px dashed var(--line);border-radius:var(--r)}

/* 성적서 */
.report{background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px;max-width:1000px;margin:0 auto}
.rpTitle{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid var(--ink);padding-bottom:8px;margin-bottom:10px;gap:10px}
.rpTitle h1{margin:0;font-size:24px}
.rpTitle .no{font-size:13px;color:var(--mute);text-align:right}
table.rp{width:100%;border-collapse:collapse;font-size:14px}
table.rp th,table.rp td{border:1px solid #9aa8b6;padding:5px 7px;vertical-align:top}
table.rp th{background:#eef2f6;text-align:left;white-space:nowrap}
table.rp td.c{text-align:center;white-space:nowrap}
table.rp tbody tr:nth-child(even) td{background:#f4f6f9}
table.rp tr.ng td{color:var(--ng);font-weight:700}
.rpSec{background:#e3e9ef;font-weight:800}
.rpCols{columns:2;column-gap:14px}
.rpCols table{break-inside:avoid}
.rpFoot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}
.rpFoot div{border:1px solid #9aa8b6;padding:6px 8px;min-height:90px}
.rpFoot img{max-height:70px;max-width:100%}
.rpPhotos{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.rpPhotos figure{margin:0;width:180px;font-size:12px}
.rpPhotos img{width:180px;height:135px;object-fit:cover;border:1px solid #9aa8b6}
.legend{font-size:13px;color:var(--mute);margin:6px 0}

/* 양식 관리 */
.adm .sec{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:12px}
.adm .secTitle{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.adm .secTitle input{flex:1;min-width:180px;font-weight:800}
.adm input,.adm select{min-height:48px;border:2px solid var(--line);border-radius:10px;padding:6px 10px;background:#fff}
.adm .row{display:grid;grid-template-columns:1fr 130px auto;gap:8px;align-items:center;padding:6px 0;border-top:1px dashed var(--line)}
.adm .row .ext{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:14px}
.adm .row .ext input{width:110px}
.adm .row .ext input.wide{width:min(520px,100%)}
.iconBtn{min-width:46px;min-height:46px;border-radius:10px;border:2px solid var(--line);background:#fff;font-weight:900}

/* 모달·알림 */
.modal{position:fixed;inset:0;z-index:50;background:rgba(10,20,30,.6);display:grid;place-items:center;padding:16px}
.modalBox{background:#fff;border-radius:18px;max-width:560px;width:100%;padding:20px;max-height:90vh;overflow:auto}
.modalBox h2{margin-top:0}
.scanVid{width:100%;max-height:52vh;background:#000;border-radius:12px;object-fit:cover}
.toast{position:fixed;left:50%;top:72px;transform:translateX(-50%);z-index:60;background:#17202a;color:#fff;padding:12px 20px;border-radius:12px;font-weight:700;max-width:90vw;text-align:center}

/* 세로·폰 */
@media (max-width:900px){
  .chkWrap{grid-template-columns:1fr}
  .secNav{position:sticky;top:64px;z-index:10;flex-direction:row;overflow-x:auto;max-height:none;background:var(--bg);padding:6px 0 8px;margin:0 -2px}
  .secBtn{flex:none;min-height:50px}
  .rpCols{columns:1}
}
@media (max-width:420px){.brandTxt{display:none}}
@media (max-width:640px){
  body{font-size:16px}
  main{padding:12px 12px 130px}
  .brandTxt small{display:none}
  .who{max-width:110px;overflow:hidden;text-overflow:ellipsis}
  .net .lbl{display:none}
  .form{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat b{font-size:24px}
  .o{min-width:0;flex:1 1 0;padding:6px 3px;font-size:14px;letter-spacing:-.3px;white-space:normal;line-height:1.25;word-break:keep-all}
  .o.resolve,.o.fix.on{flex-basis:100%}
  .opts.many .o{flex:1 1 40%}
  .brandTxt b{font-size:16px}
  .logo{width:34px;height:34px;font-size:17px}
  .dock .sum{display:none}
  .dockIn{flex-wrap:nowrap}
  .dock .btnRow{flex-wrap:nowrap;width:100%}
  .dock .btn{flex:1;font-size:15px;padding:8px 8px;min-height:52px}
  .dock .long{display:none}
  .offlineHero{flex-direction:column}
  .rec{grid-template-columns:auto 1fr}
  .rec .syncTag{grid-column:2}
  .defect{grid-template-columns:1fr}
  .rpFoot{grid-template-columns:1fr}
  .adm .row{grid-template-columns:1fr}
  .report{padding:12px}
  table.rp th,table.rp td{white-space:normal;word-break:break-word;overflow-wrap:anywhere}
  table.rp td.c{white-space:normal}
  table.rpHead tr{display:grid;grid-template-columns:auto 1fr}
  table.rpHead th,table.rpHead td{display:block}
  table.rpHead th:empty,table.rpHead td:empty{display:none}
  table.rpHead td[colspan]{grid-column:2}
}

@media print{
  @page{size:A4;margin:10mm}
  html,body{background:#fff!important;font-size:12px}
  .rpPhotoBlock,.rpFoot{break-inside:avoid}
  .bar,.dock,.noPrint,.toast,.modal{display:none!important}
  main{padding:0;max-width:none}
  .report{border:0;padding:0;max-width:none}
  table.rp{font-size:10.5px}
  table.rp th,table.rp td{padding:2px 4px}
  .rpCols{columns:2}
  .rpPhotos figure{width:150px}
  .rpPhotos img{width:150px;height:112px}
}