@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;700&display=swap");
/* 관리자: 고객 화면과 같은 점검기록부 양식. 매일 쓰는 화면이라 촘촘하고 조용하게. 상태는 왼쪽 띠 색으로 구분 */
:root{--paper:#EEF2F7;--card:#fff;--ink:#13203A;--muted:#56657D;--line:#C9D3E1;--rule:#2D4A7A;--field:#F7F9FC;--edge:#7A8AA5;--sticker:#FFE14D;--sticker-edge:#D9B500;--signal:#2D4A7A;--signal-soft:#E2EAF5;--stamp:#CC2B2B;--warn:#B23A1E;--danger:#B42323;--ok:#1F6B4A;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--paper:#0E1626;--card:#16213A;--ink:#E6ECF5;--muted:#9AA8BF;--line:#2B3B59;--rule:#7FA2DA;--field:#111B30;--edge:#5E7196;--sticker:#F0CF3A;--sticker-edge:#F0CF3A;--signal:#9DBBEA;--signal-soft:#1C2A47;--stamp:#FF6B66;--warn:#FF9A7A;--danger:#FF8A84;--ok:#6FCB9F;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 "IBM Plex Sans","IBM Plex Sans KR",system-ui,sans-serif;padding:0 max(16px,env(safe-area-inset-left,0px)) 40px max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding-top:20px}
h1{margin:0;font-size:1.35rem;letter-spacing:-.01em}
a{color:var(--signal);text-underline-offset:3px}
input,select,textarea,button{font:inherit;color:var(--ink)}
input,select,textarea{background:var(--field);border:1px solid var(--line);border-bottom:2px solid var(--rule);border-radius:2px;padding:8px 10px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rule);box-shadow:0 0 0 3px var(--signal-soft)}
button{background:var(--ink);color:var(--card);border:0;border-radius:2px;padding:8px 16px;font-weight:700;cursor:pointer}
button:hover{background:var(--rule)}
button.link{background:none;color:var(--signal);padding:0;font-weight:400;text-decoration:underline;text-underline-offset:3px}
button.danger{background:transparent;color:var(--danger);border:1.5px solid var(--danger)}
button.danger:hover{background:var(--danger);color:var(--card)}
:focus-visible{outline:3px solid var(--rule);outline-offset:2px}
.login{max-width:360px;margin:12vh auto 0;background:var(--card);border:2px solid var(--rule);border-radius:2px;padding:0 24px 24px;display:flex;flex-direction:column;gap:10px}
.login h1{margin:0 -24px 10px;padding:12px 24px;background:var(--rule);color:var(--card);font-size:1.05rem}
.login label{font-size:.88rem;font-weight:700}
.err{color:var(--warn);font-weight:700;margin:0}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--rule)}
.tools{display:flex;gap:16px;align-items:baseline;padding-bottom:8px;font-size:.9rem}
.tools form{margin:0}
.flash{background:var(--signal-soft);color:var(--signal);border-left:4px solid var(--rule);padding:8px 12px;border-radius:2px;margin:0;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--edge);background:var(--card);border-radius:2px;padding:4px 11px;text-decoration:none;color:var(--ink);font-size:.88rem}
.chip:hover{border-color:var(--rule)}
.chip b{font-variant-numeric:tabular-nums;margin-left:4px}
.chip.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.filter{display:flex;gap:8px;flex-wrap:wrap}
.filter select{width:auto}.filter input{flex:1 1 200px;width:auto}
.row{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--sticker-edge);border-radius:2px;padding:14px;display:grid;grid-template-columns:150px minmax(0,1fr) 230px;gap:14px;align-items:start}
.row.st-1{border-left-color:var(--rule)}
.row.st-2,.row.st-3{border-left-color:var(--ok)}
.row.st-4,.row.st-5{border-left-color:var(--line)}
.meta{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ref{color:var(--ink);font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.pill{display:inline-block;width:max-content;max-width:100%;font-size:.76rem;font-weight:700;padding:1px 7px;border-radius:2px;border:1px solid var(--rule);color:var(--rule);background:transparent}
pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:.92rem;line-height:1.6;padding-left:14px;border-left:1px solid var(--line)}
.edit{display:flex;flex-direction:column;gap:6px;font-size:.85rem}
.edit label{font-weight:700}
.btns{display:flex;justify-content:flex-end}
.del{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:10px;font-size:.82rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.del input{width:auto}
.empty{color:var(--muted)}
.pager{display:flex;justify-content:space-between;align-items:center}
@media (max-width:760px){.row{grid-template-columns:1fr}pre{padding-left:0;border-left:0}}
.tabs{display:flex;gap:2px;flex-wrap:wrap}
.tab{padding:8px 14px 7px;text-decoration:none;color:var(--muted);font-weight:700;border-bottom:4px solid transparent;margin-bottom:-2px}
.tab.on{color:var(--ink);border-bottom-color:var(--sticker-edge)}
.tab:not(.on):hover{color:var(--ink);border-bottom-color:var(--line)}
.hint{color:var(--muted);font-size:.88rem;margin:0}
h2{font-size:1.1rem;margin:12px 0 0}
.addcar{background:var(--card);border:2px solid var(--rule);border-radius:2px;padding:0 16px 16px;display:flex;flex-direction:column;gap:10px}
.addcar h2{margin:0 -16px 6px;padding:10px 16px;background:var(--sticker);color:#13203A;font-size:1rem}
.carrow{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--rule);border-radius:2px;padding:14px;display:flex;flex-direction:column;gap:10px}
.carrow.hidden-car{background:var(--field);border-style:dashed;border-top:3px dashed var(--edge)}
.carrow.hidden-car img{filter:grayscale(1)}
.carrow-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill.muted{border-color:var(--line);color:var(--muted)}
.carform{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:start}
.cf-photo{display:flex;flex-direction:column;gap:6px;font-size:.85rem}
.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;border:1px solid var(--line);background:var(--field)}
.thumb.empty{display:flex;align-items:center;justify-content:center;color:var(--muted);border-style:dashed}
.cf-fields{display:flex;flex-direction:column;gap:6px;font-size:.88rem;min-width:0}
.cf-fields>label,.cf-row label{font-weight:700}
.cf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cf-row>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.cf-checks{display:flex;gap:18px;flex-wrap:wrap;margin-top:4px}
label.inline{display:flex;align-items:center;gap:6px;font-weight:400;min-height:28px}
.del label{display:flex;align-items:center;gap:6px;min-height:28px}
label.inline input{width:auto;accent-color:var(--rule)}
input[type=file]{padding:6px;font-size:.82rem;border-bottom-width:1px}
button[disabled]{opacity:.6;cursor:progress}
@media (max-width:760px){.carform{grid-template-columns:1fr}.cf-row{grid-template-columns:1fr 1fr}}
/* 사진 여러 장: 관리자 화면 마크업(admin-views.js, admin.js)에 맞춘 점검기록부 스타일 */
.photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ph{margin:0;position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;font-size:.78rem}
.ph .thumb{display:block}
.ph:first-child .thumb{border-color:var(--sticker-edge);box-shadow:0 0 0 2px var(--sticker)}
.ph.new .thumb{border-style:dashed;border-color:var(--rule);box-shadow:none}
.ph:has([data-remove]:checked) .thumb{opacity:.3;filter:grayscale(1)}
.ph label.inline{min-height:24px;gap:4px;white-space:nowrap}
.ph button.link{align-self:flex-start;font-size:.78rem}
.cover-tag,.new-tag{position:absolute;left:6px;top:6px;font-size:.72rem;font-weight:700;padding:1px 7px;border-radius:2px;background:var(--sticker);color:var(--sticker-ink)}
.new-tag{background:var(--rule);color:#fff}
.cf-photo-add{display:flex;flex-direction:column;gap:4px}
.cf-photo-add label{font-weight:700;margin-top:4px}
.thumb.empty[hidden]{display:none}
input[type=file][disabled]{opacity:.5}
.carform{grid-template-columns:240px minmax(0,1fr)}
@media (max-width:760px){.carform{grid-template-columns:1fr}.photos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]),select,button:not(.link),.chip,.tab{min-height:44px}.chip,.tab{display:inline-flex;align-items:center}.tools a,.tools button.link{display:inline-block;padding:11px 0}label.inline{min-height:44px}.del label{display:flex;align-items:center;gap:6px;min-height:44px}}
/* 접수함: 이력, 답변 */
.hist{margin:8px 0;padding-left:18px;font-size:.82rem;color:var(--muted)}
.reply{margin:8px 0;padding:8px 10px;border-left:3px solid var(--rule);background:rgba(0,0,0,.03)}
.reply p{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.reply .tr{color:var(--muted)}
.reply .trfail{color:#b3261e;font-size:.82rem}
.replyform{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.replyform label{font-weight:700;font-size:.88rem}
/* 회원 탭·내 정보 */
.row.member{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.member .meta{flex-direction:row;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.member.locked{opacity:.75}
.pill.lock{border-color:var(--danger);color:var(--danger)}
.member .del{justify-content:space-between}
.login.mepw{margin:4vh auto 0;width:100%}
.tempbox{max-width:480px;background:var(--card);border:2px solid var(--rule);border-radius:2px;padding:0 24px 20px}
.tempbox h1{margin:0 -24px 14px;padding:12px 24px;background:var(--rule);color:var(--card);font-size:1.05rem}
.temppw{font:700 1.6rem/1.2 ui-monospace,Consolas,monospace;letter-spacing:.08em;background:var(--sticker);color:#13203A;padding:12px 14px;border-radius:2px;user-select:all;word-break:break-all}