/* 한 줄 요약: 프로그램 전체 모양 — 색·글자·입체감·화면 배치·문서(보고서) 인쇄 모양
 *
 * [역할]   모든 화면의 생김새를 정한다
 * [하는 일] 색과 간격을 변수(:root)로 정해 두고, 부품(버튼·카드·칩·문서)마다 모양을 입힌다
 * [원리]   폰 화면을 기준으로 만들고(@media 없이 기본이 폰), 넓은 화면(960px~)에서만 옆 메뉴로 바꾼다
 * [이유]   현장에서 장갑 낀 손·밝은 햇빛 아래에서 쓰므로: 버튼은 크게(최소 48px), 글자는 진하게, 배경은 밝게
 * [관계]   index.html 이 불러오고, 클래스 이름은 public/js/*.js 의 h() 호출과 짝을 이룬다
 *
 * 디자인 개념 — "장비 랙과 라벨 테이프"
 *   통신실의 랙 장비처럼 눌리는 입체 버튼(아래 테두리가 두껍고 누르면 내려감)과,
 *   케이블에 붙이는 노란 라벨 테이프를 상호·강조 표시에 사용. 색은 남색 잉크 + 신호 파랑 + 라벨 노랑.
 */
:root {
  --bg: #E9EEF4;         /* 바탕: 차가운 패널 회색 */
  --surface: #FFFFFF;
  --ink: #12213A;        /* 글자·머리: 남색 잉크 */
  --muted: #55657F;
  --line: #D3DCE8;
  --blue: #1F56E0;       /* 주 동작: 신호 파랑 */
  --blue-d: #153C9E;
  --tape: #FFC83A;       /* 라벨 테이프 노랑 */
  --ok: #128A54; --ok-bg: #E2F5EC;
  --bad: #D0342A; --bad-bg: #FDEBE9;
  --fix: #B86E00; --fix-bg: #FFF1D6;
  --na: #6C7A90; --na-bg: #E8ECF2;
  --r: 14px;
  --lift: 0 1px 0 #fff inset, 0 1px 2px rgba(18,33,58,.08), 0 10px 24px -14px rgba(18,33,58,.35);
  --font: "Pretendard Variable", Pretendard, -apple-system, "Noto Sans KR", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); word-break: keep-all; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: 1.06rem; margin: 0 0 .6rem; font-weight: 750; }
h3 { font-size: .95rem; margin: 1.1rem 0 .4rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 2px; }
[hidden] { display: none !important; }
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1.5px solid var(--line); border-radius: 11px; background: #fff;
  box-shadow: inset 0 2px 3px rgba(18,33,58,.06);
}
textarea { min-height: 48px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(31,86,224,.18); }

/* ── 화면 틀 ─────────────────────────────── */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem max(1rem, env(safe-area-inset-left)); background: var(--ink); color: #fff; box-shadow: 0 6px 16px -8px rgba(18,33,58,.6); }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: #fff; min-width: 0; }
.brand-sub { font-size: .8rem; color: #B9C6DC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 라벨 테이프: 살짝 기울어진 노란 띠 + 아래 그림자로 붙어 있는 느낌 */
.tape { display: inline-block; background: var(--tape); color: var(--ink); font-weight: 800; padding: .12rem .55rem; border-radius: 3px; letter-spacing: -.01em;
  box-shadow: 0 2px 0 #C99400, 0 4px 8px rgba(0,0,0,.25); transform: rotate(-1.2deg); white-space: nowrap; }
.tape.big { font-size: 1.3rem; padding: .2rem .8rem; }
.top-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.who { font-size: .82rem; color: #B9C6DC; }
.sync { border: 0; border-radius: 99px; padding: .32rem .7rem; font-size: .78rem; font-weight: 700; cursor: pointer; background: #1E3558; color: #BFE9D3; min-height: 32px; }
.sync::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #35D07F; margin-right: .4rem; box-shadow: 0 0 6px #35D07F; }
.sync.wait { color: #FFE4A1; } .sync.wait::before { background: var(--tape); box-shadow: 0 0 6px var(--tape); }
.sync.busy::before { background: #6FA2FF; box-shadow: 0 0 6px #6FA2FF; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }

#view { max-width: 860px; margin: 0 auto; padding: 1rem 1rem calc(6.5rem + env(safe-area-inset-bottom)); outline: none; }
.stack { display: grid; gap: 1.1rem; } .stack-s { display: grid; gap: .6rem; }
.loading { padding: 3rem 1rem; text-align: center; color: var(--muted); }

/* 하단 메뉴: 화면에서 떠 있는 판 */
.tabs { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(.6rem + env(safe-area-inset-bottom)); width: min(96vw, 520px);
  display: grid; grid-template-columns: repeat(5, 1fr); background: var(--ink); border-radius: 20px; padding: .3rem;
  box-shadow: 0 2px 0 #060D1A, 0 14px 30px -8px rgba(18,33,58,.65), 0 1px 0 rgba(255,255,255,.12) inset; }
.tabs a { display: grid; justify-items: center; gap: .05rem; padding: .42rem 0 .34rem; color: #9FB0CB; text-decoration: none; font-size: .68rem; font-weight: 650; border-radius: 15px; }
.tabs a.on { color: var(--ink); background: var(--tape); box-shadow: 0 2px 0 #C99400; }
.ico svg { width: 22px; height: 22px; display: block; }

/* ── 부품 ─────────────────────────────── */
.card { background: var(--surface); border-radius: var(--r); padding: 1rem; box-shadow: var(--lift); }
.card.empty { text-align: center; color: var(--muted); padding: 1.6rem 1rem; display: grid; gap: .8rem; justify-items: center; }
.hint { font-size: .84rem; color: var(--muted); }
.lead { font-size: 1.02rem; margin-bottom: 1rem; }
.txt-bad { color: var(--bad); } .txt-warn { color: var(--fix); font-weight: 650; }

/* 입체 버튼: 아래 테두리가 두껍고, 누르면 그만큼 내려간다 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .55rem 1.05rem; border-radius: 12px; cursor: pointer;
  font-weight: 700; text-decoration: none; color: var(--ink); background: linear-gradient(#fff, #F3F6FA); border: 1.5px solid #C4CFDE;
  box-shadow: 0 3px 0 #B4C0D2, 0 6px 12px -6px rgba(18,33,58,.3); transition: transform .06s, box-shadow .06s; white-space: nowrap; }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 #B4C0D2; }
.btn.primary { color: #fff; background: linear-gradient(#3A70F2, var(--blue)); border-color: var(--blue-d); box-shadow: 0 3px 0 var(--blue-d), 0 10px 18px -8px rgba(31,86,224,.7); }
.btn.primary:active { box-shadow: 0 0 0 var(--blue-d); }
.btn.danger { color: #fff; background: linear-gradient(#E4574D, var(--bad)); border-color: #9C231B; box-shadow: 0 3px 0 #9C231B; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn.big { min-height: 60px; font-size: 1.12rem; padding: .8rem 1.6rem; border-radius: 16px; }
.btn.small { min-height: 38px; padding: .3rem .8rem; font-size: .84rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; }
.icon-btn:disabled { opacity: .35; }

.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .row.end { justify-content: flex-end; }
.actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.back { display: inline-block; font-size: .86rem; text-decoration: none; color: var(--muted); padding: .2rem 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 420px) { .grid2.form-wide, .form .grid2 { grid-template-columns: 1fr; } }
.form { display: grid; gap: .75rem; }
.field { display: grid; gap: .25rem; } .field-label { font-size: .84rem; font-weight: 650; color: var(--muted); }
.check { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--blue); flex-shrink: 0; }

/* 홈 */
.hero { background: var(--ink); color: #fff; border-radius: 20px; padding: 1.3rem 1.2rem 1.4rem; display: grid; gap: .9rem; justify-items: start;
  background-image: repeating-linear-gradient(0deg, transparent 0 26px, rgba(255,255,255,.045) 26px 27px); box-shadow: 0 3px 0 #060D1A, 0 18px 30px -16px rgba(18,33,58,.8); }
.hero-date { color: var(--tape); font-weight: 700; font-size: .9rem; }
.hero h1 { font-size: 1.45rem; }

.row-card { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; background: var(--surface); border: 0; border-radius: var(--r); padding: .85rem 1rem; margin-bottom: .55rem;
  text-decoration: none; color: inherit; box-shadow: var(--lift); cursor: pointer; }
.row-card:active { transform: translateY(1px); }
.row-main { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.row-title { font-weight: 720; } .row-sub { font-size: .84rem; color: var(--muted); }
.chev { font-size: 1.5rem; color: #A9B6C9; }
.bar { height: 6px; border-radius: 3px; background: #E3E9F1; overflow: hidden; margin-top: .25rem; box-shadow: inset 0 1px 2px rgba(18,33,58,.15); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #35B0FF); border-radius: 3px; }
/* 상태 도장 */
.stamp { flex-shrink: 0; font-size: .76rem; font-weight: 800; padding: .2rem .55rem; border-radius: 6px; border: 2px solid currentColor; transform: rotate(-3deg); background: #fff; }
.stamp.draft { color: var(--fix); } .stamp.done { color: var(--blue); } .stamp.submitted { color: var(--ok); }

.alert { display: grid; gap: .1rem; padding: .7rem .9rem .7rem 1.1rem; border-radius: 12px; margin-bottom: .5rem; text-decoration: none; color: var(--ink); background: var(--fix-bg);
  border-left: 6px solid var(--fix); box-shadow: 0 1px 2px rgba(18,33,58,.08); font-size: .92rem; }
.alert.bad { background: var(--bad-bg); border-left-color: var(--bad); } .alert.ok { background: var(--ok-bg); border-left-color: var(--ok); }
.link-card { display: grid; gap: .15rem; text-decoration: none; color: var(--ink); } .link-card span { font-size: .86rem; color: var(--muted); }

.chips { display: flex; gap: .4rem; overflow-x: auto; padding: .15rem .1rem .45rem; scrollbar-width: none; } .chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { flex-shrink: 0; min-height: 40px; padding: .3rem .85rem; border-radius: 99px; border: 1.5px solid #C4CFDE; background: #fff; font-weight: 650; font-size: .88rem; cursor: pointer; box-shadow: 0 2px 0 #C4CFDE; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 2px 0 #060D1A; }
.chip.add { border-style: dashed; color: var(--muted); box-shadow: none; }
.date-head { margin: .9rem 0 .45rem; color: var(--muted); font-size: .86rem; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0 0 .7rem; font-size: .93rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; }
.diag { font-size: .9rem; font-weight: 650; padding: .55rem .8rem; border-radius: 10px; background: var(--na-bg); color: var(--na); }
.diag.on { background: #E3ECFF; color: var(--blue-d); } .diag.off { background: var(--ok-bg); color: var(--ok); }
.stat { background: var(--surface); border-radius: var(--r); padding: .8rem .9rem; display: grid; gap: .1rem; box-shadow: var(--lift); border-top: 5px solid var(--fix); }
.stat.ok { border-top-color: var(--ok); } .stat b { font-size: .84rem; } .stat span { font-size: 1.15rem; font-weight: 800; } .stat.ok span { color: var(--ok); } .stat.todo span { color: var(--fix); }
.stat small { color: var(--muted); font-size: .76rem; }

/* 안내 5단계: 실제 순서가 있는 내용이라 번호를 붙인다 */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: .6rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 54px 1fr; background: var(--surface); border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); }
.steps li::before { content: counter(s); background: var(--ink); color: var(--tape); font-weight: 800; font-size: 1.5rem; display: grid; place-items: center; }
.steps li > div { padding: .8rem .9rem; display: grid; gap: .25rem; } .steps p { font-size: .92rem; } .steps .note { font-size: .82rem; color: var(--muted); }
.table-wrap { overflow-x: auto; border-radius: var(--r); box-shadow: var(--lift); background: #fff; }
.tbl { border-collapse: collapse; width: 100%; font-size: .85rem; min-width: 640px; }
.tbl th { background: var(--ink); color: #fff; text-align: left; padding: .55rem .7rem; white-space: nowrap; } .tbl td { padding: .55rem .7rem; border-top: 1px solid var(--line); vertical-align: top; }
.list { margin: 0; padding-left: 2rem; font-size: .92rem; }

/* 설비 고르기 */
.equip-pick fieldset { border: 1.5px solid var(--line); border-radius: 12px; margin: 0 0 .6rem; padding: .3rem .8rem .5rem; min-width: 0; }
.equip-pick legend { font-weight: 750; font-size: .86rem; padding: 0 .4rem; color: var(--blue-d); }
.equip-row + .equip-row { border-top: 1px dashed var(--line); }
.equip-detail { display: grid; grid-template-columns: 1.3fr .7fr 1.3fr; gap: .4rem; padding: 0 0 .55rem 2.2rem; } .equip-detail input { min-height: 40px; font-size: .88rem; }
.equip-row > .chips { padding-left: 2.2rem; }
.step h2 { display: flex; align-items: center; gap: .5rem; }
.big-select { min-height: 56px; font-weight: 700; font-size: 1.05rem; }
.kind-pick { display: grid; gap: .55rem; }
.kind { text-align: left; display: grid; gap: .1rem; padding: .8rem 1rem; border-radius: 13px; border: 1.5px solid #C4CFDE; background: #fff; cursor: pointer; box-shadow: 0 3px 0 #C4CFDE; }
.kind small { color: var(--muted); font-size: .82rem; } .kind .formno { font-size: .76rem; }
.kind.on { border-color: var(--blue); background: #EDF3FF; box-shadow: 0 3px 0 var(--blue), 0 0 0 3px rgba(31,86,224,.15); }
.pick-count { text-align: right; color: var(--blue-d); }

/* ── 현장 작업 ─────────────────────────────── */
.job-meta { font-size: .88rem; color: var(--muted); margin-top: .35rem; }
.equip { background: var(--surface); border-radius: var(--r); box-shadow: var(--lift); overflow: hidden; }
.equip summary { display: flex; align-items: center; gap: .55rem; padding: .85rem 1rem; cursor: pointer; list-style: none; font-weight: 750; background: linear-gradient(#fff, #F4F7FB); min-height: 56px; }
.equip summary::-webkit-details-marker { display: none; }
.equip summary::before { content: ""; width: 6px; align-self: stretch; border-radius: 3px; background: var(--tape); flex-shrink: 0; }
.equip summary small { color: var(--muted); font-weight: 600; font-size: .78rem; }
.equip-name { flex: 1; min-width: 0; }
.count { font-size: .82rem; font-weight: 800; padding: .12rem .55rem; border-radius: 99px; background: var(--na-bg); color: var(--na); }
.count.full { background: var(--ok-bg); color: var(--ok); }
.equip-body { padding: .2rem .8rem .9rem; display: grid; gap: .7rem; border-top: 1px solid var(--line); }
.item { border: 1.5px solid var(--line); border-radius: 13px; padding: .75rem; display: grid; gap: .55rem; background: #FBFCFE; }
.item-title { font-weight: 720; }
/* 결과 버튼: 장비의 누름 스위치처럼 — 선택되면 눌려 들어가고 색이 켜진다 */
.results { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.res { min-height: 52px; border-radius: 11px; border: 1.5px solid #C4CFDE; background: linear-gradient(#fff, #EEF2F7); font-weight: 750; font-size: .92rem; cursor: pointer; box-shadow: 0 3px 0 #B4C0D2; padding: 0 .2rem; }
.res.on { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(0,0,0,.25); color: #fff; }
.res.r-0.on { background: var(--ok); border-color: #0B5E38; } .res.r-1.on { background: var(--bad); border-color: #8E1F18; }
.res.r-2.on { background: var(--fix); border-color: #7C4A00; } .res.r-3.on { background: var(--na); border-color: #4A566A; }
.photos { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .2rem; align-items: stretch; }
.thumb { flex-shrink: 0; width: 76px; height: 76px; padding: 0; border: 2px solid #fff; border-radius: 10px; overflow: hidden; cursor: pointer; box-shadow: 0 2px 6px rgba(18,33,58,.3); background: #DDE4EE; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shoot { flex-shrink: 0; min-width: 76px; height: 76px; border-radius: 10px; border: 0; background: var(--ink); color: #fff; font-weight: 750; cursor: pointer; display: grid; place-content: center; gap: .1rem; box-shadow: 0 3px 0 #060D1A; padding: 0 .7rem; }
.shoot small { color: var(--tape); font-size: .74rem; } .shoot:active { transform: translateY(3px); box-shadow: none; }
.shoot.alt { background: #fff; color: var(--muted); border: 1.5px dashed #B4C0D2; box-shadow: none; font-size: .82rem; font-weight: 650; }
.job-bar { position: fixed; z-index: 25; left: 0; right: 0; bottom: calc(4.6rem + env(safe-area-inset-bottom)); padding: 0 .6rem; pointer-events: none; }
.job-bar-in { pointer-events: auto; max-width: 860px; margin: 0 auto; display: flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.96); border-radius: 16px; padding: .5rem .6rem; box-shadow: 0 2px 0 #C4CFDE, 0 12px 28px -8px rgba(18,33,58,.45); }
.job-bar .btn { min-height: 44px; padding: .4rem .8rem; font-size: .9rem; }
.prog { flex: 1; min-width: 0; font-size: .8rem; font-weight: 700; color: var(--muted); }
.job { padding-bottom: 4.5rem; }
.viewer-img { width: 100%; border-radius: 10px; background: #DDE4EE; min-height: 160px; display: block; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .45rem; }
.thumb.lg { width: 100%; height: auto; aspect-ratio: 1; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* 워터마크 편집 */
.wm-preview { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--lift); display: block; }
.wm-field { display: grid; grid-template-columns: minmax(8.5rem, 1fr) 1.2fr 40px 40px; gap: .4rem; align-items: center; }
.signpad { width: 100%; height: auto; border: 2px dashed #B4C0D2; border-radius: 12px; background: #fff; touch-action: none; }

/* 시트(아래에서 올라오는 창) · 토스트 */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(10,18,34,.55); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(100%, 520px); max-height: 92dvh; background: var(--bg); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,.35); animation: up .18s ease-out; }
.sheet.wide { width: min(100%, 760px); }
@keyframes up { from { transform: translateY(24px); opacity: .5; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem .6rem; } .sheet-head h2 { margin: 0; font-size: 1.15rem; }
.sheet-body { padding: .2rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); overflow-y: auto; }
#toasts { position: fixed; z-index: 60; left: 0; right: 0; bottom: calc(9.6rem + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: .4rem; pointer-events: none; padding: 0 1rem; }
.toast { background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 12px; font-size: .9rem; font-weight: 600; box-shadow: 0 8px 20px rgba(18,33,58,.4); border-left: 5px solid var(--tape); }
.toast.bad { border-left-color: #FF6B5E; } .toast.ok { border-left-color: #35D07F; }

/* 로그인 */
.login { min-height: 100dvh; display: grid; align-content: center; gap: 1.4rem; padding: 1.5rem 1.2rem; max-width: 460px; margin: 0 auto; }
.login-brand { display: grid; gap: .8rem; justify-items: start; } .login-brand h1 { font-size: 2.1rem; } .login-brand p { color: var(--muted); }
.login-card { display: grid; gap: .8rem; }

/* ── 문서(보고서·현황표): 관공서 서식 모양 ─────────────────────────────── */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
.doc-scroll { overflow-x: auto; border-radius: 6px; box-shadow: var(--lift); background: #fff; }
.doc { position: relative; background: #fff; color: #000; padding: 1.4rem 1.2rem; font-size: .82rem; line-height: 1.5; min-width: 560px; font-family: "Pretendard Variable", "Malgun Gothic", sans-serif; }
.doc.pdf { width: 760px; min-width: 760px; padding: 0; font-size: 12.5px; }
.doc-no { font-size: .78em; color: #333; margin-bottom: .4rem; }
.doc h1 { text-align: center; font-size: 1.55em; letter-spacing: .12em; margin: .5rem 0 1rem; font-weight: 800; }
.doc-tbl { width: 100%; border-collapse: collapse; margin-bottom: .8rem; table-layout: auto; }
.doc-tbl th, .doc-tbl td { border: 1px solid #333; padding: .35rem .5rem; vertical-align: middle; text-align: left; }
.doc-tbl th { background: #EEF1F5; font-weight: 700; white-space: nowrap; text-align: center; }
.doc-tbl thead th { background: #DDE3EB; }
.doc .center { text-align: center; } .doc .pre { white-space: pre-wrap; min-height: 3.2em; vertical-align: top; }
.doc .res-1 { color: #C0261C; font-weight: 800; } .doc .res-2 { color: #9A5B00; font-weight: 700; }
.doc-decl { text-align: center; margin: 1rem 0 .4rem; } .doc-date { text-align: center; font-weight: 700; margin-bottom: .8rem; }
.sign-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.sign { border: 1px solid #333; padding: .5rem .7rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .2rem .6rem; min-height: 72px; }
.sign span { font-weight: 700; } .sign i { grid-column: 1 / -1; color: #888; font-size: .85em; text-align: right; } .sign img { grid-column: 1 / -1; justify-self: end; height: 46px; }
.doc-foot { font-size: .8em; color: #333; }
.doc-stamp { position: absolute; top: 1.2rem; right: 1.4rem; width: 62px; height: 62px; border: 3px solid #C0261C; color: #C0261C; border-radius: 50%; display: grid; place-content: center; text-align: center; font-weight: 800; transform: rotate(-12deg); line-height: 1.1; }
.doc-stamp small { font-size: .5rem; font-weight: 700; }
.doc-photos-head { font-size: 1.1em; border-bottom: 2px solid #333; padding-bottom: .3rem; margin: 1.2rem 0 .7rem; break-before: page; page-break-before: always; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.photo-cell { margin: 0; border: 1px solid #333; break-inside: avoid; } .photo-cell img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: contain; background: #F0F2F5; }
.photo-cell figcaption { padding: .3rem .5rem; border-top: 1px solid #333; font-size: .86em; min-height: 2.2em; }

/* 넓은 화면(PC): 하단 메뉴를 왼쪽 세로 메뉴로 */
@media (min-width: 960px) {
  .tabs { left: 1rem; top: 5rem; bottom: auto; transform: none; width: 104px; grid-template-columns: 1fr; gap: .2rem; }
  .tabs a { padding: .7rem 0; font-size: .76rem; }
  #view { padding: 1.4rem 1.5rem 3rem 9rem; max-width: 1080px; }
  .job-bar { bottom: 1rem; padding-left: 8rem; } #toasts { bottom: 5.5rem; }
  .sheet-wrap { align-items: center; } .sheet { border-radius: 22px; }
  .kind-pick { grid-template-columns: repeat(3, 1fr); }
  .filters { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* 인쇄: 문서만 남긴다 */
@media print {
  body { background: #fff; }
  .top, .tabs, .no-print, .head-row, .toolbar, #toasts, .hint, .actions, .alert { display: none !important; }
  #view { padding: 0; max-width: none; } .doc-scroll { box-shadow: none; overflow: visible; } .doc { min-width: 0; padding: 0; }
  @page { size: A4; margin: 12mm; }
}