/* 시설 고충처리일지 화면·인쇄(2026-11-12). 색은 상록보육원 테마 변수(common/sangrok-theme.css --sg-*). 휴대폰(760px 이하)은 맨 아래 블록. 인쇄는 #printArea 만(app.js 가 채움) */
[hidden]{display:none !important}
*{box-sizing:border-box}
body{margin:0;background:var(--sg-primary-bg,#F4FAF6);color:var(--sg-ink,#1F2A22);font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;font-size:14px}
button,input,select,textarea{font:inherit;color:inherit}
.gr-wrap{max-width:1600px;margin:0 auto;padding:18px 22px 40px}
.gr-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.gr-head h1{margin:0;font:800 24px/1.3 var(--sg-head,sans-serif);letter-spacing:-.4px;white-space:nowrap}
.gr-status{color:var(--sg-ink-3,#6A7F6F);font-size:13px}
.gr-status.is-bad{color:#d93025;font-weight:600}

.gr-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.gr-grow{flex:1 1 0}
.gr-in{height:38px;padding:0 10px;border:1px solid #d2d9d4;border-radius:8px;background:#fff;min-width:0}
textarea.gr-in{height:auto;min-height:38px;padding:8px 10px;resize:vertical;line-height:1.5}
.gr-search{flex:1 1 260px;max-width:440px}
.gr-btn{height:38px;padding:0 14px;border:1px solid #d2d9d4;border-radius:8px;background:#fff;font-weight:600;cursor:pointer;white-space:nowrap;word-break:keep-all}
.gr-btn:hover{border-color:var(--sg-primary-dark,#509D69);color:var(--sg-primary-ink,#3F5C3E)}
.gr-btn:disabled{opacity:.45;cursor:default}
.gr-primary{background:var(--sg-brand,#008548);border-color:var(--sg-brand,#008548);color:#fff}
.gr-primary:hover{background:var(--sg-brand-hover,#00733E);border-color:var(--sg-brand-hover,#00733E);color:#fff}
.gr-danger{color:#d93025;border-color:#f3c2bd}
.gr-danger:hover{border-color:#d93025;color:#d93025;background:#fff5f4}
.gr-btn:focus-visible,.gr-in:focus-visible,.gp-add:focus-visible,.gp-x:focus-visible,.gp-ph a:focus-visible{outline:2px solid var(--sg-brand,#008548);outline-offset:2px}
.gr-year{display:inline-flex;align-items:center;gap:6px}
.gr-year b{min-width:64px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.gr-ybtn{width:38px;padding:0}
.gr-sum{color:var(--sg-ink-2,#566A5B);font-size:13px;margin:0 0 8px;font-weight:600;min-height:1lh} /* 한 줄 자리를 미리(2026-11-12 '움직이지 않게' — 빈 줄 0px 이 목록을 받은 뒤 한 줄이 되며 표가 23~25px 내려앉았음) */
.gr-empty{padding:28px;text-align:center;color:var(--sg-ink-3,#6A7F6F);background:#fff;border-radius:12px;margin:0}

/* 목록 표 */
.gr-table-wrap{background:#fff;border-radius:12px;border:1px solid #e3ebe5;overflow:auto}
.gr-table{width:100%;border-collapse:collapse;font-size:13.5px}
.gr-table th{position:sticky;top:0;z-index:1;background:#f7faf8;text-align:left;font-weight:600;color:var(--sg-ink-2,#566A5B);padding:10px 8px;border-bottom:1px solid #e3ebe5;white-space:nowrap}
.gr-table td{padding:8px;border-bottom:1px solid #eef3ef;vertical-align:middle}
.gr-table tbody tr{cursor:pointer}
.gr-table tbody tr:hover{background:var(--sg-primary-bg,#F4FAF6)}
.gr-table tbody tr:focus-visible{outline:2px solid var(--sg-brand,#008548);outline-offset:-2px}
.c-ph{width:60px}
.c-no{font-family:ui-monospace,Consolas,monospace;white-space:nowrap}
.c-date{white-space:nowrap;font-variant-numeric:tabular-nums}
.c-title{font-weight:700;min-width:180px}
.c-st{white-space:nowrap}
.gr-thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;display:block;background:#eef3ef}
.gr-phw{position:relative;display:block;width:44px;height:44px}
.gr-phn{position:absolute;right:-6px;bottom:-4px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;line-height:17px;white-space:nowrap}
.gr-noph{display:inline-block;width:44px;text-align:center;color:#c2ccc5}
.gr-state{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.st-recv{background:#fff1e3;color:#a65a17}
.st-doing{background:#e8f0fe;color:#1967d2}
.st-done{background:#e3f4ea;color:#1e7e34}

/* 접수·고침 창 */
.gr-dlg{width:min(920px,calc(100vw - 24px));max-height:calc(100vh - 24px);border:0;border-radius:16px;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.gr-dlg::backdrop{background:rgba(0,0,0,.35)}
.gr-dlg form{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.gr-dlg h2{margin:0;font:800 19px/1.3 var(--sg-head,sans-serif)}
.gf-sec{margin:0;padding:12px 14px 14px;border:1px solid #e3ebe5;border-radius:12px;min-width:0}
.gf-sec legend{padding:0 6px;font-weight:800;color:var(--sg-primary-ink,#3F5C3E)}
.gf-sec legend small{font-weight:500;color:var(--sg-ink-3,#6A7F6F);margin-left:6px}
.gf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
.gf-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--sg-ink-2,#566A5B);min-width:0}
.gf-grid label em{color:#d93025;font-style:normal}
.gf-wide{grid-column:1 / -1}
.gf-err{color:#d93025;font-weight:600;margin:0;min-height:1em;font-size:13px}
.gf-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* 사진: 처리 전·처리 후 각 칸 */
.gp-side{display:flex;gap:12px;align-items:flex-start;padding:6px 0}
.gp-h{flex:none;width:56px;padding-top:8px;font-size:13px;font-weight:700;color:var(--sg-ink-2,#566A5B);word-break:keep-all}
.gp-list{display:flex;gap:10px;flex-wrap:wrap;min-width:0}
.gp-ph{position:relative;width:104px;height:104px;border-radius:10px;overflow:hidden;background:#eef3ef;border:1px solid #e3ebe5}
.gp-ph.is-new{border:2px solid var(--sg-primary,#5FBB7D)}
.gp-ph a{display:block;width:100%;height:100%}
.gp-ph img{width:100%;height:100%;object-fit:cover;display:block}
.gp-new{position:absolute;left:4px;bottom:4px;padding:0 6px;border-radius:999px;background:var(--sg-brand,#008548);color:#fff;font-size:11px;line-height:18px;pointer-events:none}
.gp-x{position:absolute;top:4px;right:4px;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:28px;cursor:pointer}
.gp-x:hover{background:#d93025}
.gp-add{width:104px;height:104px;border:2px dashed #c2d3c7;border-radius:10px;background:#fff;color:var(--sg-primary-ink,#3F5C3E);font-weight:700;cursor:pointer;word-break:keep-all}
.gp-add:hover{border-color:var(--sg-brand,#008548);background:var(--sg-primary-bg,#F4FAF6)}
.gp-info{margin:4px 0 0;font-size:12.5px;color:var(--sg-ink-3,#6A7F6F);line-height:1.5;word-break:keep-all}

/* ---------- 인쇄 ---------- */
.print-only{display:none}
@media print{
  @page{size:A4 portrait;margin:12mm}
  @page land{size:A4 landscape;margin:10mm}
  html,body{background:#fff !important}
  body > :not(#printArea){display:none !important}
  #printArea{display:block !important}
  .pr-doc{font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:#000;font-size:9.5pt}
  .pr-land{page:land;font-size:8.5pt}
  .pr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10mm;margin-bottom:5mm}
  .pr-head h1{margin:0;font-size:18pt;letter-spacing:4px}
  .pr-sub{margin-top:2mm;font-size:9pt;color:#222}
  .pr-appr{border-collapse:collapse;font-size:8.5pt}
  .pr-appr th,.pr-appr td{border:1px solid #000;text-align:center;font-weight:400}
  .pr-appr th{width:20mm;height:6mm}
  .pr-appr td{height:15mm}
  .pr-appr .pr-appr-side{width:6mm;writing-mode:vertical-rl;letter-spacing:3px}
  .pr-table{width:100%;border-collapse:collapse}
  .pr-table th,.pr-table td{border:1px solid #000;padding:1.6mm 2mm;vertical-align:middle;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
  .pr-table th{background:#eee;font-weight:700;text-align:center;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pr-table thead{display:table-header-group}
  .pr-table tr{break-inside:avoid}
  .pr-list th,.pr-list td{padding:1.2mm 1.4mm}
  .pr-list .c-n{text-align:center;width:8mm}
  .pr-list .c-no{width:18mm;text-align:center;white-space:nowrap}
  .pr-list .c-d{width:19mm;text-align:center;white-space:nowrap}
  .pr-list .c-s{width:13mm;text-align:center}
  .pr-list .c-act{width:62mm;font-size:8pt}
  .pr-kv th.k{width:28mm}
  .pr-kv td{width:auto}
  .pr-kv .v-title{font-weight:700;font-size:10.5pt}
  /* 글이 짧고 처리 전·후 사진이 3장씩이어도 A4 한 장(본문 273mm)에 들어가게 — 칸 높이·사진 높이를 함께 맞춤. 글이 길면 칸이 늘어 다음 장으로 */
  .pr-kv .v-tall{height:30mm;vertical-align:top}
  .pr-kv .v-mid{height:13mm;vertical-align:top}
  .pr-port h2{font-size:11pt;margin:4mm 0 2mm}
  .pr-ph-side{break-inside:avoid;margin-bottom:2.5mm}
  .pr-ph-h{font-weight:700;margin-bottom:1.2mm}
  .pr-ph-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3mm}
  .pr-ph-grid img{display:block;width:100%;height:40mm;object-fit:contain;border:1px solid #999;background:#fff}
  .pr-date{text-align:center;margin-top:6mm;font-size:11pt;letter-spacing:1px}
}

/* ---------- 휴대폰(760px 이하) — 화면만, 인쇄 모양은 위 그대로 ---------- */
@media screen and (max-width:760px){
  .gr-wrap{padding:12px 12px 32px}
  .gr-head{gap:10px;margin-bottom:10px}
  .gr-head h1{font-size:20px}
  .gr-search{flex:1 1 100%;max-width:none;order:3}
  #fStatus{flex:1 1 0}
  .gr-bar #btnNew{flex:1 1 100%;order:4}
  .gr-grow{display:none}
  /* 목록: 표 → 카드(사진 왼쪽, 칸 이름은 data-label) */
  .gr-table-wrap{background:none;border:0;overflow:visible}
  #list thead{display:none}
  #list,#list tbody{display:block}
  #list tr{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:10px;background:#fff;border:1px solid #e3ebe5;border-radius:12px;padding:10px;margin-bottom:8px}
  #list td{border:0;padding:1px 0;display:flex;gap:8px;grid-column:2;font-size:13px;min-width:0;overflow-wrap:anywhere}
  #list td[data-label]::before{content:attr(data-label);flex:none;width:60px;color:#8a978e;font-size:12px}
  #list td:empty{display:none}
  #list td.c-ph{grid-column:1;grid-row:1 / span 8;padding:0;display:block}
  #list td.c-title{font-size:15px;min-width:0;order:-1}
  #list td.c-title::before{display:none}
  #list td.c-no{font-family:inherit} /* 칸 이름(::before)이 고정폭 글꼴을 물려받아 벌어지지 않게 */
  .gr-dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .gr-dlg form{padding:16px 14px}
  .gf-sec{padding:10px 10px 12px}
  .gf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gp-side{flex-direction:column;gap:4px}
  .gp-h{width:auto;padding-top:0}
  .gp-ph,.gp-add{width:calc((100vw - 74px) / 3);height:calc((100vw - 74px) / 3);max-width:104px;max-height:104px}
  .gf-foot .gr-btn{flex:1 1 auto}
}