/* 고촌 이사관리 시스템 — DESIGN.md 규격 구현 (본문 17px · 딥그린 · 4px 배수 여백) */

/* 제목용 더존체 — 설치된 PC 에서만 보이고, 없으면 Pretendard 로 떨어진다.
   회사 폰트라 웹 배포 라이선스 확인 전까지 서버에 파일을 올리지 않는다. */
@font-face{font-family:'DZ';src:local('[더존] 본문체 50'),local('DOUZONEText50');font-weight:700;font-display:swap}

:root{
  --ink:#163300; --body:#333733; --sub:#6a6c6a; --muted:#9a9d99;
  --canvas:#f2f4f0; --card:#fff; --line:#e3e6e0; --line-strong:#c9cec6;
  --brand:#2f6b4f; --brand-deep:#24543e; --brand-soft:#e8f1ec;
  --red:#cb272f; --red-soft:#fbeceb; --amber:#b45309; --amber-soft:#fdf4e7;
  --blue:#0b4c72; --blue-soft:#e9f0f7; --plum:#8a4a68; --plum-soft:#fbeef3;
  --tr-A:#2f6b4f; --tr-B:#0b4c72; --tr-C:#8a5a2b; --tr-D:#5b4c8f; --tr-E:#8a4a68; --tr-W:#6a6c6a;
  --shadow-pop:0 6px 20px rgba(0,0,0,.08);
  --side-w:240px; --tab-h:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--canvas);color:var(--body);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  font-size:17px;font-weight:400;line-height:1.55;letter-spacing:-.01em;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:'DZ','Pretendard',sans-serif;font-weight:700;color:var(--ink);margin:0}
b,strong{font-weight:700}
.hidden{display:none !important}
button,input,select,textarea{font-family:inherit;font-size:17px;color:inherit}
svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic16{width:16px;height:16px}
.num{font-variant-numeric:tabular-nums}

/* ═══════════ 로그인 ═══════════ */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
#login .box{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:48px 32px;max-width:420px;width:100%;text-align:center}
#login .mark{width:56px;height:56px;margin:0 auto 20px;border-radius:12px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center}
#login .mark svg{width:28px;height:28px;stroke:var(--brand-deep)}
#login h1{font-size:28px;letter-spacing:-.02em;margin-bottom:8px}
#login p{font-size:17px;color:var(--sub);margin:0 0 24px}
#login p b{color:var(--body)}
#login small{display:block;margin-top:20px;font-size:15px;color:var(--sub);line-height:1.6}
.kbtn{width:100%;min-height:52px;border:0;border-radius:8px;background:#fee500;color:#191600;
  font-size:17px;font-weight:700;cursor:pointer}
.err{background:var(--red-soft);color:var(--red);border-radius:8px;padding:12px 16px;
  font-size:15px;margin-bottom:16px;text-align:left}

/* ═══════════ 레이아웃 ═══════════ */
#app{display:flex;min-height:100vh;min-height:100dvh}
.side{width:var(--side-w);flex:0 0 auto;background:#fff;border-right:1px solid var(--line);
  padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .brand{font-family:'DZ','Pretendard',sans-serif;font-size:19px;font-weight:700;color:var(--ink);line-height:1.4}
.side .addr{font-size:15px;color:var(--sub);margin:4px 0 24px;line-height:1.5}
.side nav{display:flex;flex-direction:column;gap:4px}
.side nav button{display:flex;align-items:center;gap:12px;padding:12px;border:0;border-radius:8px;
  background:none;color:var(--body);font-size:17px;text-align:left;cursor:pointer;min-height:44px;width:100%}
.side nav button.on{background:var(--brand-soft);color:var(--brand-deep);font-weight:700}
.side .foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--sub)}
.lnk{background:none;border:0;color:var(--brand);font-size:15px;font-weight:700;padding:4px 0;cursor:pointer}

.topbar{display:none}

main{flex:1;min-width:0;padding:32px;display:flex;flex-direction:column}
/* 화면 폭을 그대로 쓴다. 최대폭을 걸면 넓은 모니터에서 좌우가 크게 비어 보인다 (2026-08-23 수석님 지시) */
main > section{width:100%;display:flex;flex-direction:column;flex:1}
/* 빈 공간 금지 — 마지막 블록이 남는 높이를 흡수한다 (DESIGN.md §3-2-1) */
main > section > *{flex:0 0 auto}
main > section > *:last-child{flex:1 1 auto;min-height:0}

/* ═══════════ 공통 조각 ═══════════ */
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.ph h2{font-size:28px;letter-spacing:-.02em}
.ph .sub2{font-size:17px;color:var(--sub);margin-top:4px}
.ph-btns{display:flex;gap:8px;flex-wrap:wrap}

.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:1.3fr 1fr}
.g2e{grid-template-columns:1fr 1fr}
.stack{display:flex;flex-direction:column;gap:16px;min-height:0}
.stack > *{flex:0 0 auto}
.stack > *:last-child{flex:1 1 auto}
.mb16{margin-bottom:16px}

.c{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px}
.lbl{font-size:13px;color:var(--sub);font-weight:700;letter-spacing:.03em;margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.lbl .n{font-weight:400;letter-spacing:0}
.empty{font-size:17px;color:var(--muted);padding:16px 0}

/* 버튼 */
.btn{min-height:44px;border-radius:8px;padding:12px 20px;font-size:17px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.pri{background:var(--brand);color:#fff;border:0;font-weight:700}
.btn.sec{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.btn.dgr{background:#fff;color:var(--red);border:1px solid var(--red);font-weight:700}
.btn.wide{width:100%}
/* 저장 + 취소를 한 칸에 나란히 — 모든 추가 상자에서 같은 모양으로 쓴다.
   ⚠️ flex 로 두면 남는 폭을 나눌 때 **소수점이 갈려 두 단추 폭이 1~2px 어긋난다**
   (편집칸은 테두리가 2px 라 안쪽 폭이 홀수가 된다 — 실측 377 / 379).
   그리드는 트랙 크기를 먼저 정하고 배치하므로 두 칸이 같은 값을 받는다. 쓰는 곳 13군데 모두 단추 2개다. */
.btn2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn2 .btn{width:100%}

/* 취소는 삭제와 같은 색으로 (2026-08-24 수석님 지시 · DESIGN §5-1 Danger 규격).
   🔴 `.btn.sec` 를 통째로 바꾸면 안 된다 — 취소 말고도 '수정'·'여러 장 고르기'·'순서 바꾸기'
      같은 보조 단추 8곳이 같은 클래스라 함께 빨개진다(실측).
   이 앱의 취소 단추는 **전부 `onclick="cancel…()"`** 이다(14곳 실측)이므로 그것만 고른다.
   앞으로 새로 만들 취소 단추는 `class="btn sec cxl"` 을 붙이면 함수 이름과 무관하게 걸린다. */
.btn.sec[onclick^="cancel"],
.btn.cxl{color:var(--red);border-color:var(--red);font-weight:700}

/* 입력 */
input,select,textarea{border:1px solid var(--line-strong);border-radius:8px;padding:12px 16px;
  background:#fff;min-height:44px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-2px;border-color:var(--brand)}

/* 🔴 날짜칸은 브라우저가 제 마음대로 그린다. iOS 는 내용 크기만큼 넓혀 버려서
   카드 밖으로 삐져나오고 값도 가운데로 몰린다. 기본 모양을 끄고 폭을 강제해야
   다른 입력칸과 같은 크기가 된다. */
input[type=date]{-webkit-appearance:none;appearance:none;width:100%;max-width:100%;min-width:0}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}

.form{display:grid;gap:12px;margin-bottom:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
/* 격자 칸의 기본값 min-width:auto 는 '내용보다 좁아지지 마라'는 뜻이라
   날짜칸 같은 것이 칸을 밀어낸다. 0 으로 풀어 준다 */
.form > *,.row2 > *,.row3 > *{min-width:0}

/* 지표 */
.kpi .big{font-family:'DZ','Pretendard',sans-serif;font-size:56px;font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--brand);font-variant-numeric:tabular-nums}
.kpi .big u{font-size:22px;color:var(--sub);margin-left:6px;text-decoration:none;font-weight:400}
.kpi .mid{font-family:'DZ','Pretendard',sans-serif;font-size:34px;font-weight:700;line-height:1.15;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi .unit{font-size:17px;color:var(--sub);margin-top:12px}
.kpi .meta{font-size:15px;color:var(--sub);margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.kpi .meta b{color:var(--body)}
.kpi.amber .big{color:var(--amber)}
.kpi.blue .mid{color:var(--blue)}

/* 진행률 */
.pr{margin-bottom:16px}
.pr:last-child{margin-bottom:0}
.pr .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:17px;margin-bottom:8px}
.pr .t b{font-weight:700;display:flex;align-items:center;gap:8px}
.pr .t i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.pr .t span{font-size:15px;color:var(--sub);font-variant-numeric:tabular-nums}
.bar{height:8px;background:#e6e9e3;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand);border-radius:4px}

/* 타임라인 */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}
.tl li:last-child{border-bottom:none}
.tl .dot{width:10px;height:10px;border-radius:50%;background:#d3d6d1;flex:0 0 auto}
.tl li.ok .dot{background:var(--brand)}
.tl li.now .dot{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.tl .d{width:80px;flex:0 0 auto;font-size:15px;color:var(--sub)}
.tl .n{flex:1;min-width:0;font-size:17px}
.tl .n small{display:block;font-size:15px;color:var(--sub)}
.tl .dl{font-size:15px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums}
.tl li.ok .n,.tl li.ok .n small{color:var(--muted)}
.tl li.clk{cursor:pointer}
/* 일정 줄 오른쪽 끝 — 수정 · 삭제. 줄 전체를 누르면 완료 표시가 되므로 버튼은 클릭을 가로챈다 */
.tl .acts{display:flex;gap:4px;flex:0 0 auto}
.tl .acts .cbtn{color:var(--muted);padding:4px}
.tl .acts .cbtn:hover{color:var(--red)}
.tl .acts .cbtn:first-child:hover{color:var(--brand)}
.tl li.editing{display:block;padding:16px 0;cursor:default}

/* 필터 칩 */
.chips{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.chip{font-size:15px;padding:8px 16px;border-radius:9999px;background:#fff;color:var(--body);
  border:1px solid var(--line);cursor:pointer;min-height:40px;white-space:nowrap}
.chip.on{background:var(--brand);color:#fff;font-weight:700;border-color:var(--brand)}
.chip b{font-weight:700;font-variant-numeric:tabular-nums}

/* 할 일 */
.tk{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.tk:last-child{border-bottom:none}
.cb{width:22px;height:22px;min-height:22px;border:1.8px solid var(--line-strong);border-radius:6px;
  flex:0 0 auto;margin-top:2px;background:#fff;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.cb.on{background:var(--brand);border-color:var(--brand)}
.cb svg{width:14px;height:14px;stroke:#fff;stroke-width:2.6}
.tk .bd{flex:1;min-width:0}
.tk .ttl{font-size:17px}
.tk.done .ttl{color:var(--muted);text-decoration:line-through}
.tk .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:15px;color:var(--sub)}
.tag{font-size:13px;font-weight:700;padding:3px 9px;border-radius:6px;letter-spacing:0;white-space:nowrap}
.t-urgent{background:var(--red-soft);color:var(--red)}
.t-me{background:var(--blue-soft);color:var(--blue)}
.t-wife{background:var(--plum-soft);color:var(--plum)}
.t-plain{background:#eef0ec;color:var(--sub)}
.cbtn{background:none;border:0;color:var(--sub);font-size:15px;padding:4px 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.tk .meta .del-tk{margin-left:auto;color:var(--muted)}
.tk .meta .del-tk:hover{color:var(--red)}
/* 순서 바꾸는 중에만 나오는 줄 — 완료 체크·의견·삭제 자리에 ▲▼ 와 트랙 고르는 칸이 들어선다 */
.tk.moving{align-items:center}
.tk .grip{display:flex;gap:2px;flex:0 0 auto}
.tk .grip .cbtn{padding:6px;color:var(--muted)}
.tk .grip .cbtn:disabled{opacity:.3;cursor:default}
.tk .grip .cbtn:not(:disabled):hover{color:var(--brand)}
.tk .ordbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.tk .ordbar select{min-height:40px;padding:8px 12px;font-size:15px;width:auto;max-width:220px}
.cmts{margin-top:12px;padding:12px 16px;background:#f7f8f6;border-radius:8px}
.cmt{font-size:15px;padding:4px 0}
.cmt b{color:var(--ink);font-weight:700}
.cmt-add{display:flex;gap:8px;margin-top:8px}
.cmt-add input{min-height:40px;padding:8px 12px;font-size:15px}
.cmt-add button{min-height:40px;padding:8px 16px;border-radius:8px;border:1px solid var(--line-strong);
  background:#fff;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}

/* 표 */
table{width:100%;border-collapse:collapse;font-size:17px}
th{text-align:left;font-size:13px;color:var(--sub);font-weight:700;letter-spacing:.03em;
  padding:0 8px 12px 0;border-bottom:1px solid var(--line)}
th.r,td.r{text-align:right}
td{padding:16px 8px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
td:last-child,th:last-child{padding-right:0}
tr:last-child td{border-bottom:none}
td .memo{display:block;font-size:15px;color:var(--sub);margin-top:2px}
/* 금액은 색으로만 구분하고 굵기는 빼둔다. 강조는 결과값인 누적 잔고에 준다 */
.in{color:var(--brand);font-weight:400;font-variant-numeric:tabular-nums}
.out{color:var(--red);font-weight:400;font-variant-numeric:tabular-nums}
.bal{font-weight:700;color:var(--ink)}
tr.plan td,tr.plan .memo{color:var(--muted)}
tr.plan .in{color:#8aa798}
tr.plan .out{color:#c9989a}
tr.total td{border-top:2px solid var(--ink);border-bottom:none;padding-top:16px;
  font-weight:700;font-size:19px;color:var(--ink)}
.tbl-wrap{overflow-x:auto}
.warn{margin-top:20px;background:var(--amber-soft);border:1px solid #f0dcb8;border-radius:8px;
  padding:16px 20px;font-size:17px;color:#7a4f12}
.warn.red{background:var(--red-soft);border-color:#f2d5d4;color:var(--red)}

/* 파일 목록 */
.drop{border:1.5px dashed var(--line-strong);border-radius:12px;padding:32px;text-align:center;
  color:var(--sub);font-size:17px;background:#fafbf9;cursor:pointer;display:block}
.drop b{display:block;color:var(--ink);font-weight:700;margin-bottom:4px}
.drop.over{border-color:var(--brand);background:var(--brand-soft)}
.frow{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:none}
.frow.editing{display:block;padding:16px 0}
.fic{width:40px;height:40px;border-radius:8px;background:var(--brand-soft);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.fic svg{width:20px;height:20px;stroke:var(--brand-deep)}
.fic.c-매도{background:var(--brand-soft)} .fic.c-매도 svg{stroke:var(--brand-deep)}
.fic.c-매수{background:var(--blue-soft)} .fic.c-매수 svg{stroke:var(--blue)}
.fic.c-인테리어{background:#f5ece0} .fic.c-인테리어 svg{stroke:var(--tr-C)}
.fic.c-대출{background:#eeeaf6} .fic.c-대출 svg{stroke:var(--tr-D)}
.fic.c-기타{background:#eef0ec} .fic.c-기타 svg{stroke:var(--sub)}
.fname{flex:1;min-width:0;font-size:17px}
.fname small{display:block;font-size:15px;color:var(--sub)}
.fact{display:flex;gap:4px;flex:0 0 auto}

/* 사진 */
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.th{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#e6e9e3}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th .cap{position:absolute;left:8px;bottom:8px;right:8px;font-size:13px;font-weight:700;color:#fff;
  background:rgba(22,51,0,.62);padding:3px 8px;border-radius:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th .ops{position:absolute;top:6px;right:6px;display:flex;gap:4px}
.th .op{width:36px;height:36px;border-radius:6px;border:0;background:rgba(22,51,0,.55);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
@media (hover:hover){
  .th .ops{display:none}
  .th:hover .ops{display:flex}
}

/* 사진 정보 고치기 — 미리보기 + 입력칸 */
.pedit{display:flex;gap:16px;align-items:flex-start}
.pedit img{width:120px;height:120px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex:0 0 auto}

/* 여러 장 고르는 중 — 사진을 누르면 골라진다 */
.th.pick{cursor:pointer}
.th.pick.on{outline:3px solid var(--brand);outline-offset:-3px}
.th .pk{position:absolute;top:6px;left:6px;width:28px;height:28px;border-radius:6px;
  background:rgba(255,255,255,.92);border:1.8px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center}
.th.on .pk{background:var(--brand);border-color:var(--brand)}
.th.on .pk svg{stroke:#fff;stroke-width:2.6}
/* 아래까지 내려가서 고르더라도 '바꾸기' 단추가 따라오도록 화면에 붙여 둔다 */
.pickbar{position:sticky;top:0;z-index:15;box-shadow:var(--shadow-pop)}

/* 견적 */
.qt td.co{font-weight:700;color:var(--ink)}
.qt td.co .ord{margin-left:8px;vertical-align:middle}
/* 순서 ▲▼ + 삭제 묶음. 맨 위/맨 아래 항목은 해당 화살표가 흐려진다 */
.ord{display:inline-flex;gap:2px;align-items:center}
.ord .cbtn{padding:4px;color:var(--muted)}
.ord .cbtn:disabled{opacity:.3;cursor:default}
.ord .cbtn:not(:disabled):hover{color:var(--brand)}
.ord .cbtn:last-child:not(:disabled):hover{color:var(--red)}
/* 표 머리 — 업체 이름 옆 ◀ ▶ ×. 업체는 '칸'이라 위아래가 아니라 좌우로 옮긴다 */
.qt th .ord{margin-left:6px;vertical-align:middle}
.qt th.r{white-space:nowrap}
/* 휴대폰 견적에는 표 머리가 없다(칩으로 업체를 고른다). 그래서 이 줄에서 옮기고 지운다 */
.co-ord{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 0;margin-bottom:12px;border-bottom:1px solid var(--line);font-size:15px;color:var(--sub)}
.co-ord b{color:var(--ink);font-size:17px;font-weight:700}
.qt input{min-height:40px;padding:8px 12px;text-align:right;font-size:17px}
.qt .miss{color:var(--muted)}
.qt .best{background:var(--brand-soft)}
/* 표 안에서 공정 이름을 고치는 줄. 위 .qt input 은 금액칸용(오른쪽 정렬·40px)이라
   이름·메모칸까지 오른쪽으로 붙어 버린다. 이 줄에서만 보통 입력칸으로 되돌린다 */
.qt tr.editing td{padding:16px 8px}
.qt tr.editing input{text-align:left;min-height:44px;padding:12px 16px}

/* 모바일 시트 */
.sheet{position:fixed;inset:0;background:rgba(22,51,0,.28);z-index:50;display:flex;align-items:flex-end}
.sheet-in{background:#fff;width:100%;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-pop)}
.sheet-h{display:flex;justify-content:space-between;align-items:center;font-size:19px;font-weight:700;
  color:var(--ink);padding:8px 8px 16px}
.sheet-i{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px;
  border:0;background:none;font-size:17px;text-align:left;cursor:pointer;border-radius:8px}
.sheet-i:active{background:var(--brand-soft)}

/* 로딩·알림 */
/* 🔴 width:max-content 가 핵심이다. position:fixed + left:50% 는 쓸 수 있는 폭이
   '화면의 절반' 으로 계산되고, max-width 는 상한일 뿐 그 폭을 넓히지 못한다.
   2026-08-23 390px 실측 — max-width 만 넣으면 195px·4줄로 손대기 전과 똑같았다.
   width:max-content 를 함께 주면 351px·2줄이 된다. */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + 24px);
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:8px;font-size:15px;z-index:80;
  box-shadow:var(--shadow-pop);width:max-content;max-width:min(90vw,420px);text-align:center}

/* ═══════════ 반응형 ═══════════ */
@media (max-width:1080px){
  .g3{grid-template-columns:1fr 1fr}
  .g2,.g2e{grid-template-columns:1fr}
  main > section > *:last-child{flex:0 0 auto}
}

@media (max-width:767px){
  #app{display:block}
  .side{display:none}
  .topbar{display:flex;position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);
    padding:16px;justify-content:space-between;align-items:center}
  .topbar .t{font-family:'DZ','Pretendard',sans-serif;font-size:22px;font-weight:700;color:var(--ink)}
  .topbar .u{font-size:15px;color:var(--sub);display:flex;align-items:center;gap:12px}
  main{padding:16px 16px calc(var(--tab-h) + 32px)}
  main > section{display:block}
  .c{padding:20px}
  .ph{margin-bottom:16px}
  .ph h2{display:none}          /* 상단바에 이미 제목이 있다 */
  .ph .sub2{margin-top:0}
  .g3{grid-template-columns:1fr}
  .tl li{flex-wrap:wrap}
  .tl .n{flex:1 1 100%;order:3}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  .th .op{width:44px;height:44px}
  .th .pk{width:44px;height:44px}
  .pickbar{top:57px}          /* 상단바(약 57px) 아래에 붙는다 */
  .pedit{flex-direction:column}
  .pedit img{width:100%;height:180px}
  /* 🔴 손가락으로 누르는 단추는 44px 이상이어야 한다. 24px 로 두면 ▲▼ 를 누르려다
     바로 옆의 ×(삭제)가 눌린다 — 업체·공정을 잘못 지우면 넣어 둔 금액이 함께 사라진다.
     사진 단추를 44px 로 키운 것과 같은 이유다 (2026-08-23 4차) */
  .ord .cbtn,.tk .grip .cbtn,.tl .acts .cbtn{min-width:44px;min-height:44px;justify-content:center;padding:4px}
  .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px 16px;padding:0 16px 4px}
  .row2,.row3{grid-template-columns:1fr}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);
    display:flex;padding:8px 0 calc(8px + env(safe-area-inset-bottom));
    transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
  .tabbar button{flex:1;border:0;background:none;font-size:13px;font-weight:700;color:var(--sub);
    display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;cursor:pointer}
  .tabbar button.on{color:var(--brand)}
  /* 표는 카드로 바꾼다 — 가로 스크롤 표를 만들지 않는다 (DESIGN.md §6) */
  .cash-tbl{display:none}
  .cash-cards{display:block}
}
@media (min-width:768px){
  .tabbar{display:none}
  .cash-cards{display:none}
}

.mcard{border:1px solid var(--line);border-radius:8px;padding:16px;background:#fff;margin-bottom:12px}
.mcard:last-child{margin-bottom:0}
.mcard.plan{color:var(--muted)}
.mcard .d1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mcard .dt{font-size:15px;color:var(--sub)}
.mcard .nm{font-size:17px;margin-top:4px}
.mcard .memo{font-size:15px;color:var(--sub)}


/* ══════════════ 터치 규격 (2026-08-23 13차 적대검증) ══════════════
   기준을 '화면 폭' 에서 '손가락' 으로 바꾼다. 종전에는 @media (max-width:767px) 안에서만
   단추를 키웠고, 그래서 두 구멍이 남아 있었다.
   ① 문서 화면(.fact)이 승격 목록에서 통째로 빠져 16×24px 로 남았다 — 삭제(×)와 수정(✎)이
      4px 간격이라 오조작이 곧 문서 삭제였다.
   ② 768~1024px 태블릿은 손가락으로 쓰는데도 아무것도 커지지 않았다.
   DESIGN.md §5-1·§6 = 터치 대상 최소 44×44px. */
@media (hover:none), (pointer:coarse){
  .fact .cbtn,
  .ord .cbtn,.tk .grip .cbtn,.tl .acts .cbtn{
    min-width:44px;min-height:44px;justify-content:center;padding:4px}
  .th .op,.th .pk{width:44px;height:44px}
  /* 자료 카드에서 사진 한 장을 지우는 × — 오조작이 곧 사진 손실이라 손가락 크기로 키운다.
     ⚠️ 새 조작 UI 를 만들면 이 목록에 넣었는지 반드시 확인한다 (13차 교훈) */
  .rth .rthx{width:44px;height:44px}
  /* 자료 카드의 참고 링크 — 눌러서 새 탭을 여는 '조작'이다.
     글자 높이 그대로 두면 23px 라 손가락에 안 맞는다 (2026-08-24 실측). */
  .rcard .rlk{min-height:44px;display:flex;align-items:center}
  .sheet-h .lnk{min-width:44px;min-height:44px}
  /* 완료 체크박스 — 보이는 상자는 22px 그대로 두고 누를 수 있는 넓이만 44px 로 넓힌다.
     이 앱에서 가장 자주 누르는 조작이다. 생김새는 바뀌지 않는다. */
  .cb{position:relative}
  .cb::before{content:'';position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
}

/* 가족 승인 화면 — 승인 대기자 줄 */
.pend{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.pend:last-child{border-bottom:none}
.pend .who{flex:1;min-width:0}
.pend .who b{font-size:17px;display:block}
.pend .who span{font-size:15px;color:var(--sub)}


/* ══════════════ 지연 — 날짜는 지났는데 아직 안 끝난 일정 (15차) ══════════════
   🔴 완료(.ok)와 반드시 갈라 보여야 한다. 종전에는 둘이 똑같이 '완료' 로 보여,
   승인받지도 않은 토지거래허가가 9/16 이 되면 완료로 뜨는 자리였다.
   완료는 흐려지지만(--muted) 지연은 흐려지면 안 된다 — 아직 해야 할 일이기 때문이다. */
.tl li.late .dot{background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.tl li.late .dl{color:var(--red);font-weight:700}
.tl li.late .n{color:var(--body)}
.tl li.late .n small{color:var(--sub)}

/* ══════════════ 고촌 매수 대금 — 계약금 · 중도금 · 잔금 (15차) ══════════════
   금액이 큰 순서가 아니라 '내는 순서' 로 놓는다. 시간 흐름이 곧 자금 압박의 순서다. */
.deal-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  flex-wrap:wrap;margin-bottom:16px}
.deal-total{font-size:24px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.deal-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line);margin-bottom:4px}
.deal-bar i{display:block;height:100%}
.deal-bar i.s1{background:var(--blue)}
.deal-bar i.s2{background:#4a7fa5}
.deal-bar i.s3{background:#9db8cc}
.deal-legend{display:flex;font-size:13px;color:var(--sub);margin-bottom:20px}
.deal-steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.deal-step{border-left:3px solid var(--blue);padding-left:16px}
.deal-step.s2{border-left-color:#4a7fa5}
.deal-step.s3{border-left-color:#9db8cc}
.deal-step.none{border-left-color:var(--line)}
.deal-step .st{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.03em}
/* 금액은 절대 두 줄로 접지 않는다 — '5억 / 650만원' 으로 끊기면 딴 금액처럼 읽힌다 */
.deal-step .amt{font-size:22px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;margin:4px 0;white-space:nowrap}
.deal-step .amt.plan{color:var(--muted)}
.deal-step .dt{font-size:15px;color:var(--body);white-space:nowrap}
.deal-step .dd{font-size:15px;color:var(--sub)}
.deal-note{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-size:15px;color:var(--sub);line-height:1.7}
.deal-note b{color:var(--body)}
.deal-warn{margin-top:16px;padding:16px;border-radius:8px;background:var(--red-soft);
  color:var(--red);font-size:15px;line-height:1.7}

/* 확정 / 미확정 / 계산값을 색으로 가른다 (DESIGN.md 1-4 — 돈은 이 구분이 가장 중요하다) */
.badge-plan{display:inline-block;background:var(--amber-soft);color:var(--amber);
  font-size:13px;font-weight:700;padding:3px 9px;border-radius:6px}
.badge-fix{display:inline-block;background:var(--brand-soft);color:var(--brand-deep);
  font-size:13px;font-weight:700;padding:3px 9px;border-radius:6px}
.badge-calc{display:inline-block;background:var(--blue-soft);color:var(--blue);
  font-size:13px;font-weight:700;padding:3px 9px;border-radius:6px}

/* 입력칸 위의 작은 이름표 — 칸이 여섯 개가 되면 무엇을 넣는 칸인지 보여야 한다 */
.edlbl{font-size:13px;font-weight:700;color:var(--sub);display:block;margin-bottom:4px}
.form label{display:block;min-width:0}

/* ── 협상 시뮬레이터 — 「협상 연습」 을 눌렀을 때만 펼쳐진다 ── */
.sim{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.sim-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.sim-row .sl{font-size:15px;font-weight:700;color:var(--sub);min-width:64px}
.sim-opt{display:flex;gap:8px;flex-wrap:wrap}
/* 조작 단추 — 터치 최소 44px (DESIGN.md 5-1·6) */
.sim-opt button{min-height:44px;min-width:64px;padding:0 16px;border-radius:8px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-size:17px;cursor:pointer}
.sim-opt button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.sim-out{margin-top:16px;padding:16px;border-radius:8px;background:var(--brand-soft);font-size:17px}
.sim-out.warn{background:var(--red-soft)}
.sim-out .big{font-size:22px;font-weight:700;color:var(--brand-deep);
  font-variant-numeric:tabular-nums;margin:4px 0}
.sim-out.warn .big{color:var(--red)}
.sim-out .why{font-size:15px;color:var(--sub)}

@media (max-width:767px){
  .deal-steps{grid-template-columns:1fr;gap:12px}
  .sim .row3{grid-template-columns:1fr}
  .deal-step{padding-left:12px}
  .deal-total{font-size:22px}
  .sim-row .sl{min-width:56px}
}

/* ══ 인테리어 자료 (카드) ══
   ⭐ 기준 = FHD(1920×1080) 한 화면에 **2열 × 2줄 = 4개** (2026-08-24 수석님 지시).
   실제 쓸 수 있는 높이 950px 에서 제목·분류칩 170px 을 빼면 780px → 카드 하나가 380px 이하여야 한다.

   그래서 **사진을 위가 아니라 왼쪽에** 둔다(가로 배치). 사진을 위에 두면 카드 폭이 871px 일 때
   4:3 사진이 653px 가 되어 카드가 460px 를 넘고 한 화면에 2개밖에 안 들어온다(실측).
   가로 배치는 카드 220px → 한 화면에 6개까지 보인다.

   🔴 같은 줄의 카드는 높이가 같아야 한다 (DESIGN §3-2-1).
   align-items:start 로 두면 메모·링크가 없는 카드만 짧아져 아래가 들쭉날쭉해진다. */
/* ⭐ 해상도와 무관하게 **한 화면에 6개(2열 × 3줄)가 꽉 차게** 한다 (2026-08-24 수석님 지시).
   행 높이를 뷰포트에서 직접 계산한다 — 254px = 그리드 시작 위치 190(main 패딩 32 + 제목 74 + 칩 40 + 여백)
   + main 아래 패딩 32 + 줄 사이 간격 16×2. 이 190 은 FHD·QHD 에서 **같은 값**임을 실측했다.
   ⚠️ `grid-auto-rows:1fr` 로 두면 컨테이너에 정해진 높이가 없어 오히려 **내용 기준으로 부푼다**
      (실측 — 행이 449px 가 되어 그리드가 1380px, 뷰포트 950px 를 620px 넘겼다). */
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);
  grid-auto-rows:calc((100vh - 254px) / 3);
  gap:16px;align-items:stretch;align-content:start}
/* 🔴 고치거나 펼치는 중에는 행 높이 계산을 **푼다**.
   편집칸은 제목+주소+분류+메모+사진목록+단추라 400px 을 넘는데 행이 320px 로 묶여 있고
   `.rcard{overflow:hidden}` 이라 **[저장][취소] 가 통째로 잘려 아예 보이지 않았다**
   (2026-08-24 수석님 지적 — "수정을 눌렀는데 저장 및 취소버튼이 없네").
   그동안만 내용 높이에 맡기고, 닫으면 6개 꽉 차는 규격으로 돌아온다. */
.rgrid.free{grid-auto-rows:auto}
/* 🔴 자료 그리드는 남는 화면 높이를 흡수하지 않는다.
   `#v-refs` 가 flex 라 마지막 블록인 이 그리드가 `flex:1 1 auto` 를 받아
   **행 하나가 1243px 로 늘어나고 카드 안에 888px 짜리 공란**이 생겼다(2026-08-24 실측).
   DESIGN §3-2-1 도 "억지로 늘려 여백을 만드는 것보다 배치를 바꾸는 편이 낫다"고 한다. */
#v-refs .rgrid{flex:0 0 auto}

/* 사진 왼쪽 · 글 오른쪽 (가로 배치) */
.rcard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:row}
/* 편집칸은 자르지 않는다 — 위 `.rgrid.free` 와 짝이다. 여기가 hidden 이면 행이 늘어나도 카드가 자른다.
   ⭐ 고칠 때는 **한 줄을 다 쓴다**(`grid-column:1/-1`) — 절반 폭이면 긴 메모가 자꾸 접혀 읽기 어렵다 */
.rcard.editing{border-color:var(--brand);border-width:2px;flex-direction:column;overflow:visible;
  grid-column:1/-1}
.rcard.editing .rbd{padding:16px}
/* 메모칸은 growRefMemo() 가 내용만큼 높이를 잡아 준다. resize 손잡이는 남겨 둔다(더 넓히고 싶을 때) */
.rcard.editing textarea{resize:vertical;line-height:1.6}

/* ⭐ 「메모 전체 보기」로 펼친 카드 — 한 줄을 다 쓰고 메모를 **끝까지** 보여 준다.
   카드 규격(한 화면에 6개)은 평상시 값이고, 펼친 카드는 그 규격에서 빠진다. */
.rcard.open{grid-column:1/-1;overflow:visible;position:relative}
.rcard.open .rmm{overflow:visible;max-height:none;flex:0 0 auto}
/* 🔴 펼치면 카드가 길어지는데 사진은 `height:100%` + 4/3 이라 폭이 함께 폭주한다(카드 800px → 사진 1066px).
   펼친 카드에서만 폭을 먼저 정하고 높이는 사진에 맡긴다. */
.rcard.open .rshot{flex:0 0 auto;height:auto;align-self:flex-start}
/* ⭐ 펼치면 넣어 둔 사진이 **전부** 세로로 이어진다 (2026-08-24 수석님 지시 —
   "사진을 2장 이상 되면 나머지 사진도 보여야 해"). 접었을 때만 첫 장 + 「+N」 이다.
   🔴 폭은 화면을 따라 커진다 — 340px 로 묶었더니 **"너무 사진 이미지가 작아"** 는 지적을 받았다.
      FHD 는 576px, QHD 는 상한 620px 다. */
.rcard.open .rshots{flex:0 0 clamp(320px, 30vw, 620px);display:flex;flex-direction:column;gap:12px;
  align-self:flex-start}
/* 🔴 펼친 사진은 **자르지 않는다**. 목록에서는 4/3 으로 잘라 줄을 맞추지만,
   펼친 것은 자료를 읽으려고 연 것이라 세로로 긴 캡처도 통째로 보여야 한다.
   실제 자료가 그렇다 — 올려 둔 두 장이 1000×1000 과 **738×1600**(비율 0.46) 이라
   4/3 틀에 `cover` 로 넣으면 위아래가 통째로 잘려 나갔다 (2026-08-24 수석님 지적).
   한 장이 화면 하나를 넘지 않게 높이 상한(100vh)만 둔다 — 걸리면 폭이 줄고 가운데 선다. */
.rcard.open .rshots .rshot{flex:0 0 auto;width:100%;height:auto;aspect-ratio:auto;
  border-radius:8px;background:none;overflow:visible}
/* 🔴 `width:auto` + 두 방향 상한 — 폭이든 높이든 **먼저 닿는 쪽에 맞춰 줄어들고 비율은 그대로**다.
   `width:100%` 로 두면 세로로 긴 사진이 높이 상한에 걸릴 때 좌우에 빈 띠가 생긴다. */
.rcard.open .rshots .rshot img{display:block;width:auto;max-width:100%;height:auto;max-height:100vh;
  margin:0 auto;border-radius:8px}

/* 「접기」 — 카드 오른쪽 위에 고정한다. 메모 아래에 두었더니 긴 메모를 다 내려야 보여
   **"뒤로가기가 없어"** 로 읽혔다 (2026-08-24 수석님 지적) */
.rclose{position:absolute;right:12px;top:12px;z-index:2;display:flex;align-items:center;gap:6px;
  min-height:44px;padding:0 16px;border-radius:9999px;border:1px solid var(--line);
  background:var(--card);color:var(--sub);font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow-pop)}
.rcard.open .rmb{display:none}      /* 접는 길은 오른쪽 위 하나로 모은다 */
/* 메모를 더 볼 수 있다는 표시 — 링크처럼 보이되 손가락으로 누를 수 있는 크기(44px)를 지킨다 */
.rmb{display:flex;align-items:center;min-height:44px;padding:0;margin:-4px 0 4px;
  background:none;border:0;cursor:pointer;font-size:15px;font-weight:700;
  color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}

/* 🔴 사진 자리는 **폭이 아니라 비율**을 고정한다 (2026-08-24 수석님 지시 — "QHD 화면처럼 비슷하게").
   폭을 476px 로 묶었더니 카드 높이가 해상도마다 달라 **비율이 깨졌다** —
   QHD 476×350(1.36) 은 자연스러운데 FHD 476×230 은 **2.07 로 납작**해지고,
   그 탓에 본문이 322px 로 좁아져 **제목이 두 줄로 접혔다**(실측).
   높이(=카드 높이)에서 폭을 끌어내면 두 해상도 모두 **1.33 로 같아진다**
   — FHD 307×230 · QHD 467×350, 본문도 491 / 651px 로 넉넉해진다. */
.rshot{position:relative;flex:0 0 auto;height:100%;aspect-ratio:4/3;background:var(--line);overflow:hidden}
.rshot img{width:100%;height:100%;object-fit:cover;display:block}
.rshot.none{display:flex;align-items:center;justify-content:center}
.rshot.none svg{width:32px;height:32px;stroke:var(--muted)}
/* 파일이 없어진 사진 — 깨진 아이콘 대신 이유를 적는다 (refShotGone) */
.rshot.gone{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px}
.rshot.gone img{display:none}
.rshot.gone::after{content:'사진 파일을 찾을 수 없습니다';font-size:15px;color:var(--muted);line-height:1.5}
/* 사진이 여러 장이면 몇 장 더 있는지 알려 준다 (안 그러면 첫 장만 있는 줄 안다).
   눌러서 바로 펼칠 수 있는 **단추**다 — 나머지 사진을 보는 가장 짧은 길이다. */
.rmore{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.62);color:#fff;
  font-size:13px;font-weight:700;padding:0 12px;min-height:32px;border-radius:9999px;
  border:0;cursor:pointer;display:flex;align-items:center}

.rbd{padding:12px;display:flex;flex-direction:column;flex:1;min-height:0}
.rti{font-size:17px;font-weight:700;line-height:1.4;margin-bottom:6px;word-break:break-word}
.rmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.rcat{font-size:13px;font-weight:700;padding:3px 9px;border-radius:6px;
  background:var(--plum-soft);color:var(--plum)}
.rstat{font-size:13px;font-weight:700;padding:3px 9px;border-radius:6px}
.rstat.s-chk{background:var(--line);color:var(--sub)}
.rstat.s-hold{background:var(--amber-soft);color:var(--amber)}
.rstat.s-keep{background:var(--brand-soft);color:var(--brand-deep)}
.rstat.s-drop{background:var(--red-soft);color:var(--red)}
/* 메모가 **남는 높이를 흡수**한다 — 그래서 화면이 클수록 메모가 더 많이 보인다.
   FHD 는 카드 232px 라 1~2줄, QHD 는 352px 라 6줄쯤 보이고, 넘치는 만큼만 잘린다.
   🔴 `-webkit-line-clamp` 로 줄 수를 고정하지 않는다. 고정하면 QHD 에서 아래가 남고
      FHD 에서는 넘친다. 그리고 .rbd 가 flex 라 `display:-webkit-box` 가 blockify 되어
      자르기 자체가 풀린다(2026-08-24 실측 — 카드가 1243px 로 폭주했다). */
/* 🔴 `white-space:pre-wrap` — 넣을 때 나눈 줄을 그대로 보여 준다.
   기본값 `normal` 은 줄바꿈을 **공백 한 칸으로 뭉갠다**. 그래서 12줄로 정리해 넣은 에어컨 견적 메모가
   화면에서는 한 덩어리로 이어져 읽을 수 없었다(2026-08-24 수석님 지적). 긴 줄은 그대로 접힌다. */
.rmm{font-size:15px;color:var(--sub);line-height:1.6;margin-bottom:8px;
  flex:1 1 auto;min-height:0;overflow:hidden;white-space:pre-wrap}
.rlk{display:block;font-size:15px;color:var(--brand-deep);word-break:break-all;
  margin-bottom:12px;text-decoration:underline}
/* 단추는 카드 바닥에 붙인다 — 메모가 짧은 카드도 옆 카드와 단추 줄이 맞는다 */
.racts{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.racts .btn{flex:1}

/* 휴대폰 — 가로 배치는 폭이 좁아 못 쓴다. 1열 · 사진 위로 되돌린다.
   ⚠️ 행 높이도 화면 기준 계산을 풀고 내용에 맡긴다(DESIGN §6 — 모바일은 고정 높이를 주지 않는다). */
@media (max-width:820px){
  .rgrid{grid-template-columns:1fr;grid-auto-rows:auto}
  /* 🔴 `min-width:0` — 그리드 칸의 기본 최소폭은 `auto`(=내용 크기)라
     사진이 제 크기를 못 잡으면 **칸이 사진 원본 폭까지 벌어져 카드가 화면 밖으로 나간다** */
  .rcard{flex-direction:column;min-width:0}
  /* 🔴 세로 배치에서는 폭을 채우고 높이를 비율에 맡긴다.
     `width:auto` + `height:100%`(가로 배치용) 를 그대로 두었더니 부모 높이가 내용에서 나오고
     내용은 다시 사진에서 나오는 **순환**이 되어 크기 계산이 풀렸다 —
     사진이 원본 크기로 부풀어 화면 밖으로 넘쳤다(2026-08-24 수석님 휴대폰 실측). */
  .rshot{width:100%;height:auto;flex:0 0 auto;aspect-ratio:4/3}
  .rmm{flex:0 1 auto;max-height:96px}
  /* 🔴 펼친 카드의 `flex:0 0 340px` 은 세로 배치에서 **높이 340px** 이 되어
     비율 4/3 이 폭 453px 을 만든다 — 390px 화면을 넘긴다. 세로 배치에서는 되돌린다.
     휴대폰과 데스크톱은 **같은 것을 보여 준다** — 배치만 다르고 빠지는 내용은 없다. */
  .rcard.open .rshot, .rcard.open .rshots{flex:0 0 auto;width:100%;height:auto}
  .rcard.editing, .rcard.open{grid-column:auto}
}

/* 고칠 때 보이는 사진 목록 — 한 장씩 지울 수 있다 */
.rthumbs{display:flex;gap:8px;flex-wrap:wrap}
.rth{position:relative;width:88px;height:66px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.rth img{width:100%;height:100%;object-fit:cover;display:block}
.rthx{position:absolute;right:2px;top:2px;width:28px;height:28px;border-radius:9999px;
  background:rgba(0,0,0,.62);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;padding:0}
.rthx svg{stroke:#fff}