/*
 * 매매계약서 화면 — contract-new.html(작성·서명 받기·완료 보기) · contracts.html(목록). 데스크톱·모바일 공용 한 장(반응형).
 * 계약 team/contracts/sale-contract.md §4(builder-C1). 색 = 토큰만(다크 대응), 구성 B(큰 라운드 면·부드러운 그림자).
 * 40대+ 원칙: 본문 16~17px · 보조 14px↑ · 누르는 곳 48px↑(주 행동 56px) · 글자 라벨 · 쉬운 말.
 * 계약서 인쇄 모양(.ct-*)은 builder-C2 의 css/contract.css — 여기서는 화면 틀과 인쇄 때 숨길 것만.
 * 접두사: cp-(공통 틀) · cn-(작성 화면) · cl-(목록).
 * (2026-10-14 ui-declutter B2 — team/contracts/ui-declutter.md) 모양 = 뜻: 버튼·고르기·목록 행은 공통 부품(css/ui.css — .btn 위계 ·
 *   .opt-row(성별·건강 3칸) · .opt-list(까닭·예/아니오) · .seg(상태 필터·볼 문서) · .row-list > .row-link(목록·서명 받기 두 갈래)).
 *   이 파일은 공통 버튼을 다시 칠하지 않는다(배치·크기만). 표시(상태)는 작은 알약 .cp-st, 고정값은 상자 없이 글자.
 */
body.cp-page{min-height:100vh;}
.cp-top{max-width:1100px;margin:0 auto;min-height:64px;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s2) var(--s8);}
/* 뒤로 = 글자 버튼(물러나는 일 — 화면에서 가장 큰 버튼이 [뒤로]이던 것을 낮춤) */
.cp-top .cp-back{padding-left:var(--s2);font-size:var(--t-lg);}
.cp-sp{flex:1;}
.cp-where{font-size:var(--t-md);color:var(--ink-3);min-width:0;overflow-wrap:anywhere;}
.cp-where b{color:var(--ink);font-weight:var(--w-bold);margin-left:4px;}
.cp-main{max-width:1100px;margin:0 auto;padding:0 var(--s8) 160px;display:flex;flex-direction:column;gap:var(--s5);}
.cp-head{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin:var(--s2) 0;}
.cp-head .cp-sp{flex:1;}
.cp-head .page-sub{margin-top:var(--s1);}
.cp-head .cp-head-act{align-self:center;}

/* 상태 표시(작성 중/서명 기다림/완료/분양 취소/그만둠/무효) — 누르지 못하는 작은 알약(28 · 14/600) */
.cp-st{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--s3);border-radius:var(--r-tag);
  font-size:var(--t-xs);font-weight:var(--w-bold);line-height:1;white-space:nowrap;background:var(--fill);color:var(--ink-2);}
.cp-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.cp-st[data-st="draft"]{background:var(--warn-soft);color:var(--warn);}
.cp-st[data-st="awaiting"]{background:var(--info-soft);color:var(--info);}
.cp-st[data-st="signed"]{background:var(--ok-soft);color:var(--ok);}
.cp-st[data-st="void"]{background:var(--fill-2);color:var(--ink-3);}
.cp-st[data-st="cancelled"]{background:var(--dang-soft);color:var(--dang);}
.cp-st[data-st="dropped"]{background:var(--fill-2);color:var(--ink-3);}
.cp-st.sm{height:28px;}
.cp-head .cp-st{align-self:center;}

/* 막힘·안내 카드 */
.cp-gate{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s10) var(--s6);text-align:center;max-width:640px;margin:0 auto;width:100%;}
.cp-gate-t{margin:0 0 var(--s2);font-size:var(--t-xl);font-weight:var(--w-black);color:var(--ink);}
.cp-gate-d{margin:0 0 var(--s6);font-size:var(--t-md);color:var(--ink-2);line-height:1.65;white-space:pre-line;}
.cp-gate-btns{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;}
.cp-note{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;padding:var(--s4) var(--s5);border-radius:var(--r-lg);
  background:var(--fill);color:var(--ink);font-size:var(--t-md);line-height:1.6;}
.cp-note .cp-note-t{flex:1 1 320px;min-width:0;}
.cp-note .cp-note-t b{display:block;font-size:var(--t-lg);font-weight:var(--w-bold);}
.cp-note .cp-note-t > span{display:block;}
.cp-note.warn{background:var(--warn-soft);}
.cp-note.info{background:var(--info-soft);}
.cp-note.ok{background:var(--ok-soft);}
.cp-note.muted{background:var(--fill-2);}
.cp-note.dang{background:var(--dang-soft);}
.cp-note.dang .cp-note-t b{color:var(--dang);}
.cp-note[hidden]{display:none;}

/* ---- 작성 화면 섹션 ---- */
#cn-form,#cn-wform{display:flex;flex-direction:column;gap:var(--s5);}
#cn-form[hidden],#cn-wform[hidden]{display:none;}
.cn-sec{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s6) var(--s8);}
.cn-sec[hidden]{display:none;}
.cn-sec-h{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s5);}
.cn-num{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:var(--t-md);font-weight:var(--w-black);}
.cn-sec-h h2{margin:0;font-size:var(--t-xl);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.015em;}
.cn-sec-h .cp-sp{flex:1;}
.cn-sec-sub{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-3);margin-left:4px;}
/* 카드 제목 아래 한 줄 힌트(카드 설명 문단 대신) */
.cn-sec-hint{margin:calc(var(--s2) - var(--s5)) 0 var(--s5);}
.cn-sub-h{margin:var(--s8) 0 var(--s4);padding-top:var(--s5);border-top:1px solid var(--line);font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);}
.cn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s6);}
.cn-grid .cn-wide{grid-column:1/-1;}
.cn-f{display:flex;flex-direction:column;gap:var(--s2);min-width:0;}
.cn-f > label,.cn-f > .cn-lbl{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink);}
.cn-f > label small,.cn-f > .cn-lbl small{font-weight:var(--w-reg);color:var(--ink-3);font-size:var(--t-xs);margin-left:4px;}
/* "꼭" — 서명 전에 있어야 하는 칸(회색 괄호 대신 짧은 표시 하나) */
.cn-req{margin-left:4px;font-size:var(--t-xs);font-weight:var(--w-bold);color:var(--dang);}
.cn-f .f-input{font-size:17px;}
.cn-hint{margin:0;font-size:var(--t-sm);color:var(--ink-3);line-height:1.5;}
.cn-f .df-row .f-input{flex:1 1 auto;min-width:0;}
.cn-none{color:var(--ink-3);font-weight:var(--w-reg);}
/* 바꿀 수 없는 고정값 = 상자 없이 글자 */
.cn-ro{min-height:var(--ctl);display:flex;align-items:center;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);overflow-wrap:anywhere;}

/* 금액 */
.cn-money{display:flex;align-items:center;gap:var(--s2);}
.cn-money .f-input{font-size:var(--t-xl);font-weight:var(--w-bold);height:var(--ctl-lg);font-variant-numeric:tabular-nums;}
.cn-money .cn-won{font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink-2);flex:0 0 auto;}
.cn-ko{margin:0;min-height:30px;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--accent);line-height:1.45;overflow-wrap:anywhere;}
.cn-ko.empty{color:var(--ink-4);font-weight:var(--w-semi);font-size:var(--t-md);}

/* 고르기(성별·건강) = 이어 붙인 3칸(.opt-row — css/ui.css). 여기는 폭만 */
.cn-pick.opt-row{max-width:420px;}
.cn-pick.opt-row > button:disabled{opacity:.55;cursor:default;}
.cn-pick.opt-row > button:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;position:relative;z-index:2;}
.cn-inline{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;}
.cn-inline .f-input{flex:1 1 200px;min-width:0;}

/* 판매인(매도인) 한 줄 — 자세한 값은 "계약서 정보" 페이지 */
.cn-seller-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:var(--t-md);color:var(--ink-2);}
.cn-sl-k{font-weight:var(--w-semi);color:var(--ink-3);flex:0 0 auto;}
.cn-sl-v{flex:1 1 240px;min-width:0;overflow-wrap:anywhere;}
.cn-sl-v b{color:var(--ink);font-weight:var(--w-bold);}

/* 세부 기록(0~5줄) */
.cn-recs{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s5);}
.cn-recs-h{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.cn-recs-h .cn-lbl{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink);}
.cn-recs-h .cn-n{font-size:var(--t-sm);color:var(--ink-3);}
.cn-rec{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) auto;gap:var(--s3);align-items:end;
  padding:var(--s4);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1.5px var(--line-2);}
.cn-rec .cn-f > label{font-size:var(--t-sm);}
.cn-rec .cn-del{align-self:end;}
.cn-recs-empty{margin:0;font-size:var(--t-md);color:var(--ink-3);}
.cn-clause{margin:0 0 var(--s4);padding:var(--s4);border-radius:var(--r-md);background:var(--fill);font-size:var(--t-md);color:var(--ink-2);line-height:1.6;}

/* 요약·판매인 목록(dl) */
.cn-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s3) var(--s5);margin:0;font-size:var(--t-md);}
.cn-dl dt{color:var(--ink-3);font-weight:var(--w-semi);}
.cn-dl dd{margin:0;color:var(--ink);font-weight:var(--w-semi);overflow-wrap:anywhere;}
.cn-nw{white-space:nowrap;}
.cn-seal{width:180px;max-width:100%;height:90px;border-radius:var(--r-md);background:var(--sig-bg,#fff);box-shadow:0 0 0 1.5px var(--line-2) inset;
  display:grid;place-items:center;overflow:hidden;}
.cn-seal img{max-width:94%;max-height:94%;object-fit:contain;}
.cn-buyer-note{margin:0;font-size:var(--t-md);color:var(--ink-2);line-height:1.6;}

/* ---- 서명 받기 · 확인 서명 = 행 전체 누름(.row-link) ---- */
.cn-rows{margin:calc(var(--s2) * -1) calc(var(--s3) * -1) 0;}
.cn-rows > .row-link .rl-t{font-weight:var(--w-bold);}
.cn-rows > .row-link:disabled{opacity:.55;cursor:not-allowed;}
/* ---- 링크 보내기(서명 기다림 · 해지서 서명 기다림 · 보기 링크) ---- */
.cn-link{display:flex;flex-direction:column;gap:var(--s4);}
#cn-link-box,#cn-tl-box,#cn-view-box{display:flex;flex-direction:column;gap:var(--s3);}
#cn-link-box[hidden],#cn-tl-box[hidden],#cn-view-box[hidden]{display:none;}
.cn-urlrow{display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;}
.cn-link-url{flex:1 1 280px;min-width:0;margin:0;padding:var(--s3) var(--s4);border-radius:var(--r-btn);box-shadow:inset 0 0 0 1.5px var(--line-2);font-family:var(--mono);
  font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink);line-height:1.5;word-break:break-all;user-select:all;}
.cn-link-url.big{font-size:var(--t-xl);box-shadow:0 0 0 3px var(--accent);}
.cn-msg{margin:0;padding:var(--s4) var(--s5);border-radius:var(--r-lg);background:var(--panel);box-shadow:0 0 0 1.5px var(--line-2) inset;
  font-size:var(--t-md);color:var(--ink);line-height:1.65;white-space:pre-wrap;word-break:break-all;user-select:all;}
.cn-lbl2{margin:0;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink);}
.cn-until{margin:calc(var(--s2) - var(--s5)) 0 var(--s4);font-size:var(--t-md);color:var(--ink-2);}
.cn-btns{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;}
/* 다른 방법 — 글자 버튼 한 줄(다시 만들기·여기서 서명·링크 취소) */
.cn-other{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s2);padding-top:var(--s3);border-top:1px solid var(--line);}
.cn-relink-main{align-self:flex-start;max-width:100%;}
@media (max-width:768px){ .cn-relink-main{align-self:stretch;} }
.cn-other-t{font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink-3);margin-right:var(--s2);}
/* 맨 아래 글자 버튼 줄(그만두기 · 되돌리기 · 링크 끊기) — 카드 없이 */
.cn-foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s2);padding:0 var(--s2);}
.cn-foot[hidden]{display:none;}
.cn-foot-t{font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink-3);margin-right:var(--s2);}
.cn-foot .cn-acts{display:inline-flex;flex-wrap:wrap;gap:var(--s1) var(--s2);}
.cn-foot .cn-acts[hidden]{display:none;}
.cn-foot .cn-ta-lock{flex:1 1 100%;}

/* ---- 완료본 ---- */
#cn-done{display:flex;flex-direction:column;gap:var(--s4);}
#cn-done[hidden]{display:none;}
.cn-doc-wrap{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s5) var(--s6) var(--s6);overflow-x:auto;}
.cn-doc-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);margin:0 0 var(--s4);}
.cn-doc-bar .seg[hidden]{display:none;}
#cn-print-hint{margin:calc(var(--s2) * -1) 0 var(--s3);}
.cn-doc{min-width:0;}
.cn-doc-fallback{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s2) var(--s5);margin:0;font-size:var(--t-md);}
.cn-doc-fallback dt{color:var(--ink-3);font-weight:var(--w-semi);}
.cn-doc-fallback dd{margin:0;color:var(--ink);overflow-wrap:anywhere;}
.cn-doc-fallback img{max-width:200px;max-height:90px;background:var(--sig-bg,#fff);border-radius:var(--r-sm);}
.cn-viewpart{display:flex;flex-direction:column;gap:var(--s3);}
.cn-viewpart[hidden]{display:none;}
.cn-viewpart .cn-hint{margin-top:calc(var(--s2) - var(--s5));}
.cn-sharepart{margin-top:var(--s5);}
.cn-sharepart[hidden]{display:none;}

/* 미리 보기(겹침 창) */
.cn-pv{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;background:var(--bg);}
.cn-pv[hidden]{display:none;}
.cn-pv-top{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s6);min-height:72px;background:var(--panel);box-shadow:var(--sh-1);
  padding-top:calc(var(--s3) + env(safe-area-inset-top,0px));}
.cn-pv-top b{font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);}
.cn-pv-b{flex:1;overflow:auto;padding:var(--s6);-webkit-overflow-scrolling:touch;}
.cn-pv-b .cn-doc{max-width:900px;margin:0 auto;background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s5);}

/* 아래 저장 바 */
.cp-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--panel);box-shadow:0 -6px 20px rgba(0,0,0,.08);
  padding:var(--s3) var(--s6) calc(var(--s3) + env(safe-area-inset-bottom,0px));}
.cp-bar[hidden]{display:none;}
.cp-bar-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.cp-bar-msg{flex:1 1 220px;min-width:0;font-size:var(--t-md);color:var(--ink-3);}
.cp-bar-msg.dirty{color:var(--warn);font-weight:var(--w-semi);}

/* ---- 목록(계약서 · 도매 기록) — 상태 필터 = .seg 하나, 줄 = 행 전체 누름(표 줄 · 휴대폰 .row-link) ---- */
#cl-body:not([hidden]),#wl-body:not([hidden]){display:flex;flex-direction:column;gap:var(--s4);}
#cl-body > [hidden],#wl-body > [hidden]{display:none;}
.cl-filter.seg[hidden]{display:none;}
/* 컴퓨터 — 상태 seg 는 글자만큼 폭(다른 목록 화면 seg 와 같음 — 세로 flex 안에서 줄 끝까지 늘지 않게) */
.cl-filter.seg{align-self:flex-start;max-width:100%;}
/* (2026-10-15 list-toolbar.md ④) 개수 줄 = 공용 .lt-count/.lt-cnt(css/ui.css) — 상태 seg 아래·목록 바로 위. 목록과 조금 가깝게 */
.cl-cntrow{margin-bottom:calc(-1 * var(--s2));}
/* 받을 개체 목록 — #tr-sub 를 개수 줄 글(공용 .lt-cnt 와 같은 크기·색)로. ?id= 한 건 화면에서는 부제목(그대로) */
.st-sub.tr-cnt{font-size:var(--t-md);line-height:1.5;color:var(--ink-3);}
.st-sub.tr-cnt b{color:var(--ink);font-weight:var(--w-bold);}
/* 휴대폰 — 상태 칸이 한 줄을 꽉 채움. 칸 안은 공용 .seg-fit(css/ui.css — 개체·알·경매 상태 칸과 같은 모양):
   넉넉하면 "전체 6" 한 줄, 좁으면 그 칸 안에서만 이름 위·숫자 아래(9,999 도 칸 안에 — 가로 스크롤 없음) */
@media (max-width:480px){
  .cl-filter.seg{display:flex;width:100%;}
}
html.app-m .cl-filter.seg{display:flex;width:100%;}
html.app-m .cl-filter.seg[hidden]{display:none;}
.cl-filter.seg > button .n{font-size:var(--t-xs);font-weight:var(--w-bold);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.cl-filter.seg > button.on .n{color:var(--ink-2);}
.cl-box{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s4) var(--s6);}
.cl-tbl td{font-size:var(--t-md);}
.cl-tbl td.cl-nm{font-weight:var(--w-bold);color:var(--ink);white-space:normal;overflow-wrap:anywhere;min-width:9em;}
/* 긴 매수인·상호(띄어쓰기 없는 100자)도 칸 안에서 줄바꿈 — 표가 화면 밖으로 밀리지 않게(len 행렬 2026-10-14) */
.cl-tbl td.cl-buyer,.wh-tbl td.wh-who{white-space:normal;overflow-wrap:anywhere;min-width:7em;}
.cl-tbl td[colspan],.wh-tbl td[colspan]{white-space:normal;}
.cl-tbl td.cl-nm small{display:block;font-size:var(--t-xs);font-weight:var(--w-reg);color:var(--ink-3);}
.cl-tbl td.num{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:var(--w-semi);}
.cl-tbl td.cl-go{width:1%;text-align:right;white-space:nowrap;}
.cl-tbl tbody tr:focus-visible td{background:var(--accent-soft);}
.cl-tbl .cl-go-t{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-md);font-weight:var(--w-bold);color:var(--accent);white-space:nowrap;}
.cl-tbl .cl-go-t::after{content:"›";font-size:24px;font-weight:var(--w-reg);line-height:1;color:var(--ink-3);}
/* 휴대폰 = 한 목록 면 + 행(.row-link.cl-card) */
.cl-cards{display:none;background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s2);}
.cl-cards > .cl-card{border-radius:var(--r-btn);}
.cl-cards > .cl-card .rl-t{display:flex;align-items:center;flex-wrap:wrap;gap:4px var(--s2);font-weight:var(--w-bold);}
.cl-cards > .cl-card .rl-t > b{font-weight:inherit;min-width:0;overflow-wrap:anywhere;}
.cl-cards > .cl-card .rl-s{display:flex;flex-wrap:wrap;gap:0 var(--s2);line-height:1.45;}
.cl-cards > .cl-card .rl-s > span{white-space:nowrap;}
.cl-cards > .cl-card .rl-s .cl-amt{font-weight:var(--w-bold);color:var(--ink);white-space:normal;}
.cl-cards > .cl-card .rl-s .cl-num{white-space:nowrap;} /* 금액은 한 덩어리(쪼개지지 않게), "총액" 글자와는 줄이 갈려도 됨 */
/* 아주 좁은 폰(≤400) — 줄 오른쪽 동사 글자("이어 쓰기")는 빼고 "›"만(상태 딱지가 같은 뜻 · 999,999,999,999원 자리 확보) */
@media (max-width:400px){ .cl-cards > .cl-card .rl-go{display:none;} }
.cl-cards > .cl-card .rl-s .cl-auc,.cl-cards > .cl-card .rl-s .cl-wrap{white-space:normal;overflow-wrap:anywhere;min-width:0;}
.cl-cards > div.cl-card{cursor:default;}
.cl-cards > div.cl-card::after{content:none;}
.cl-cards > div.cl-card:hover{background:transparent;}
.cl-cards .cl-empty{padding:var(--s4);}
/* 경매 낙찰 계약서 "경매: 경매명 N번"(js/contracts.js — 2026-10-14) — 긴 경매명도 칸 안에서 줄바꿈 */
.cl-auc{overflow-wrap:anywhere;min-width:0;}
.cl-hint{margin:0;font-size:var(--t-md);color:var(--ink-3);line-height:1.6;}

/* ---- 그만두기 · 분양 취소(해지서) · 지난 기록 (team/contracts/contract-cancel.md §4) ---- */
.cn-term[hidden]{display:none;}
.cn-ferr{margin:0;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--dang);line-height:1.5;white-space:pre-line;}
.cn-ferr[hidden]{display:none;}
/* 까닭 고르기 · 예/아니오 = 옵션 목록(.opt-list) — 고르지 않았을 때 빨간 테두리 */
.cn-reason .opt[aria-invalid="true"],.cn-yn.bad .opt{box-shadow:inset 0 0 0 2px var(--dang);}
.cn-yn.opt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
.cn-ta{height:auto;min-height:96px;padding:var(--s3) var(--s4);line-height:1.55;resize:vertical;font-family:inherit;}
.cn-term-btns{margin-top:var(--s6);justify-content:flex-end;}
.cn-tsign-note{margin:calc(var(--s2) - var(--s5)) 0 var(--s4);}
/* 분양 취소 완료 — 손님 확인 서명 상태 */
.cn-tstate-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}
#cn-ts-later-row[hidden]{display:none;}
.cn-sstate{display:inline-flex;align-items:center;height:28px;padding:0 var(--s3);border-radius:var(--r-tag);font-size:var(--t-xs);font-weight:var(--w-bold);
  background:var(--fill-2);color:var(--ink-2);white-space:nowrap;}
.cn-sstate[data-s="signed"]{background:var(--ok-soft);color:var(--ok);}
.cn-sstate[data-s="waiting"]{background:var(--info-soft);color:var(--info);}
.cn-act{display:flex;align-items:center;gap:var(--s2) var(--s4);flex-wrap:wrap;}
.cn-act[hidden]{display:none;}
.cn-act > span{flex:1 1 260px;min-width:0;font-size:var(--t-md);color:var(--ink-2);line-height:1.55;}
/* 미리 보기 아래 버튼(해지서) */
.cn-pv-foot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s6) calc(var(--s3) + env(safe-area-inset-bottom,0px));
  background:var(--panel);box-shadow:0 -6px 20px rgba(0,0,0,.08);}
.cn-pv-foot[hidden]{display:none;}
.cn-pv-msg{flex:1 1 260px;min-width:0;font-size:var(--t-md);color:var(--ink-2);line-height:1.5;}
/* 지난 기록 */
.cn-hist{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);overflow:hidden;}
.cn-hist[hidden]{display:none;}
.cn-hist > summary{list-style:none;display:flex;align-items:center;gap:var(--s3);min-height:64px;padding:0 var(--s6);cursor:pointer;
  font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);}
.cn-hist > summary::-webkit-details-marker{display:none;}
.cn-hist > summary::before{content:"";width:10px;height:10px;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:rotate(-45deg);
  transition:transform var(--dur-1) var(--ease);flex:0 0 auto;margin-right:2px;}
.cn-hist[open] > summary::before{transform:rotate(45deg);}
.cn-hist > summary:hover{background:var(--fill);}
.cn-hist > summary:focus-visible{outline:3px solid var(--accent-ring);outline-offset:-3px;}
.cn-hist-b{padding:0 var(--s6) var(--s5);}
.cn-hl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.cn-hl li{display:grid;grid-template-columns:minmax(150px,max-content) minmax(0,1fr);gap:var(--s1) var(--s5);padding:var(--s3) 0;border-top:1px solid var(--line-2);}
.cn-hl li:first-child{border-top:0;}
.cn-hl time{font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.cn-hl b{display:block;font-size:var(--t-md);font-weight:var(--w-bold);color:var(--ink);}
.cn-hl .who{font-size:var(--t-sm);color:var(--ink-3);margin-left:var(--s2);font-weight:var(--w-semi);}
.cn-hl p{margin:2px 0 0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.55;overflow-wrap:anywhere;}
.cn-hist-empty{margin:0;font-size:var(--t-md);color:var(--ink-3);}
/* 목록 — 그만둠·무효 흐리게, 분양 취소 보조 줄 */
.cl-tbl tbody tr.dim td{opacity:.55;}
.cl-card.dim{opacity:.6;}
.cl-st-sub{display:block;margin-top:4px;font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap;}
/* 버튼 글자가 길어도 화면 밖으로 안 나가게(좁은 칸에서 줄바꿈) */
.cn-btns .btn,.cn-act .btn,.cn-pv-foot .btn,.cp-note .btn{max-width:100%;}

/* ---- 좁은 화면(휴대폰) ---- */
@media (max-width:768px){
  .cp-top{padding:var(--s2) var(--s4);min-height:56px;}
  .cp-main{padding:0 var(--s4) 170px;gap:var(--s4);}
  .cp-head .page-title{font-size:var(--t-2xl);}
  .cn-sec{padding:var(--s5) var(--s4);}
  .cn-grid{grid-template-columns:minmax(0,1fr);gap:var(--s4);}
  .cn-rec{grid-template-columns:minmax(0,1fr);}
  .cn-f .f-input,.cn-f input{font-size:17px;}
  .cn-dl{grid-template-columns:minmax(0,1fr);gap:2px var(--s3);}
  .cn-dl dd{margin-bottom:var(--s2);}
  .cn-doc-wrap{padding:var(--s3);}
  .cn-pv-top{padding-left:var(--s4);padding-right:var(--s4);}
  .cn-pv-b{padding:var(--s3);}
  .cp-bar{padding-left:var(--s4);padding-right:var(--s4);}
  .cp-bar-in .btn{flex:1 1 0;}
  .cp-bar-msg{flex:1 1 100%;font-size:var(--t-sm);}
  .cl-box{display:none;}
  .cl-cards{display:flex;flex-direction:column;padding:var(--s1);}
  .cn-btns .btn{flex:1 1 100%;}
  .cn-btns .btn,.cn-act .btn,.cn-pv-foot .btn,.cp-note .btn{white-space:normal;height:auto;min-height:var(--ctl-lg);padding-top:var(--s2);padding-bottom:var(--s2);line-height:1.3;text-align:center;}
  .cn-btns .btn.txt{min-height:var(--ctl);}
  .cn-act .btn,.cp-note .btn{flex:1 1 100%;}
  .cn-urlrow .btn{flex:1 1 100%;}
  .cn-yn.opt-list{grid-template-columns:minmax(0,1fr);}
  .cn-term-btns .btn{flex:1 1 100%;}
  .cn-pv-foot{padding-left:var(--s4);padding-right:var(--s4);}
  .cn-pv-foot .btn{flex:1 1 0;}
  .cn-pv-msg{flex:1 1 100%;font-size:var(--t-sm);}
  .cn-hist > summary{padding:0 var(--s4);}
  .cn-hist-b{padding:0 var(--s4) var(--s4);}
  .cn-hl li{grid-template-columns:minmax(0,1fr);gap:2px;}
  .cn-doc-bar .btn{flex:1 1 0;}
  .cn-doc-bar .seg{flex:1 1 100%;}
  .cn-doc-bar .seg > button{flex:1 1 0;}
  .cn-doc-bar .cp-sp{display:none;}
  .cn-foot{padding:0;}
  .cn-foot-t{flex:1 1 100%;}
}

/* ---- 도매 계약서 작성(#cn-wform, team/contracts/wholesale.md §5) ---- */
.cn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.cn-wsum{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3);}
.cn-wsum p{margin:0;}
/* 요약 한 줄(마릿수 · 금액 적은 개체 합계 · 총액) — 상자 없이 */
.cn-wsum-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s5);font-size:var(--t-md);color:var(--ink-2);}
.cn-wsum-main > b{font-size:var(--t-xl);font-weight:var(--w-black);color:var(--ink);}
.cn-wsum-main b{color:var(--ink);font-variant-numeric:tabular-nums;}
.cn-wsum-bad{padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--dang-soft);color:var(--dang);font-size:var(--t-md);font-weight:var(--w-semi);line-height:1.5;}
.cn-wsum-warn{padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--warn-soft);color:var(--ink);font-size:var(--t-md);line-height:1.5;}
.cn-wsum-badrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);}
.cn-wsum-badrow .cn-wsum-bad{flex:1 1 280px;}
.cn-wundo{margin-bottom:var(--s3);}
.cn-wtbl-box{border-radius:var(--r-lg);box-shadow:0 0 0 1.5px var(--line-2) inset;overflow:hidden;}
.cn-wtbl-box[hidden]{display:none;}
.cn-wtbl{width:100%;border-collapse:collapse;table-layout:auto;}
.cn-wtbl th{height:44px;padding:0 var(--s3);text-align:left;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink-3);border-bottom:1.5px solid var(--line-2);white-space:nowrap;}
.cn-wtbl th small{font-weight:var(--w-reg);}
.cn-wtbl td{padding:var(--s2) var(--s3);border-top:1px solid var(--line-2);font-size:var(--t-md);color:var(--ink);vertical-align:middle;}
.cn-wtbl tr.bad td{background:var(--dang-soft);}
.cn-wtbl tr.warn td{background:color-mix(in srgb,var(--warn-soft) 55%,transparent);}
.cn-wtbl .cn-wno{width:1%;text-align:left;font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap;}
.cn-wtbl .cn-wph{width:1%;}
.cn-wph img,.cn-wnoph{display:block;width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--fill-2);}
.cn-wnm{min-width:160px;}
.cn-wnm b{display:block;font-weight:var(--w-bold);overflow-wrap:anywhere;}
.cn-wnm small{display:block;font-size:var(--t-sm);color:var(--ink-3);font-family:var(--mono);}
.cn-wflag{display:block;margin-top:4px;font-size:var(--t-sm);font-weight:var(--w-semi);line-height:1.4;color:var(--ink-2);}
.cn-wflag[data-tone="dang"]{color:var(--dang);}
.cn-wflag[data-tone="warn"]{color:var(--warn);}
.cn-wmeta{display:flex;flex-wrap:wrap;gap:2px var(--s2);margin-top:2px;font-size:var(--t-sm);color:var(--ink-2);}
.cn-wsex{white-space:nowrap;}
.cn-wmorph{color:var(--ink-2)!important;overflow-wrap:anywhere;min-width:0;}
.cn-wsex + .cn-wmorph::before{content:"· ";color:var(--ink-3);}
.cn-wtbl .cn-wpr{width:1%;}
.cn-wpr-l,.cn-whl-l{display:none;}
.cn-wmoney{display:flex;align-items:center;gap:6px;}
.cn-wmoney .f-input{width:150px;height:48px;font-size:17px;font-variant-numeric:tabular-nums;text-align:right;}
.cn-wmoney span{font-weight:var(--w-semi);color:var(--ink-2);}
.cn-wtbl .cn-whl{width:1%;}
.cn-wtbl .cn-wmore{width:1%;text-align:right;}

/* ---- 개체별 건강상태·특이사항(2026-10-14 team/contracts/wholesale-item-health.md §3 · ui-declutter B2) ----
   줄 = 건강 ▾(select.cn-whsel) + "특이사항 적기 ▾"(.cn-wnote-b — 펼치면 줄 아래 tr.cn-wnote-row: 특이사항 칸 + 이 개체 빼기).
   이상·치료필요 줄 = 왼쪽 색 띠 + 선택칸 테두리 색. 표 위 도구 #cn-whtools = 한 줄(건강 요약 + 작은 보조 버튼). 색 = 토큰만. */
.cn-whtools{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:0 0 var(--s3);}
.cn-whtools[hidden]{display:none;}
.cn-whcount,.cn-whealth-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);margin:0;font-size:var(--t-md);color:var(--ink-2);}
.cn-whcount{flex:1 1 260px;}
.cn-whc-t{font-weight:var(--w-bold);color:var(--ink);}
.cn-whc{white-space:nowrap;}
.cn-whc b{font-size:var(--t-lg);font-weight:var(--w-black);color:var(--ink);font-variant-numeric:tabular-nums;}
.cn-whc[data-on][data-h="이상"],.cn-whc[data-on][data-h="이상"] b{color:var(--warn);font-weight:var(--w-bold);}
.cn-whc[data-on][data-h="치료필요"],.cn-whc[data-on][data-h="치료필요"] b{color:var(--dang);font-weight:var(--w-bold);}
.cn-whealth-sum{gap:var(--s1);}
.cn-whc-ref{font-size:var(--t-sm);color:var(--ink-3);line-height:1.5;white-space:normal;}
.cn-whtools-b{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);}
.cn-whtools-b .btn{max-width:100%;}
.cn-whtools-b .btn[hidden]{display:none;}
.cn-whpick-n{font-size:var(--t-md);font-weight:var(--w-bold);color:var(--accent);}
.cn-whpick-n:empty{display:none;}
/* 고르기 칸 */
.cn-wck{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;cursor:pointer;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.cn-wck input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--accent);cursor:pointer;}
.cn-wck-t{display:none;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-2);}
.cn-wtbl tr.picked:not(.bad):not(.warn) > td{background:var(--accent-soft);}
/* 건강 ▾ */
.cn-whsel{width:auto;min-width:118px;height:48px;font-size:var(--t-md);font-weight:var(--w-semi);}
.cn-whsel[data-h="이상"]{border-color:var(--warn);color:var(--warn);font-weight:var(--w-bold);}
.cn-whsel[data-h="치료필요"]{border-color:var(--dang);color:var(--dang);font-weight:var(--w-bold);}
.cn-whsel:disabled{opacity:.6;}
/* 펼치기 단추 "특이사항 적기 ▾" */
.cn-wnote-b{white-space:nowrap;}
.cn-wnote-b::after{content:"▾";font-size:14px;color:var(--ink-3);margin-left:2px;}
.cn-wnote-b[aria-expanded="true"]::after{content:"▴";}
.cn-wnote-b[aria-expanded="true"]{background:var(--btn2-hover);box-shadow:var(--btn2-sh-hover,var(--btn2-sh,none));}
.cn-wnote-pv{display:block;margin-top:6px;padding:4px 8px;border-radius:8px;background:var(--fill);font-size:var(--t-sm);color:var(--ink);line-height:1.45;overflow-wrap:anywhere;}
.cn-wnote-pv b{display:inline;margin-right:4px;font-weight:var(--w-semi);color:var(--ink-3);}
/* 이상·치료필요 줄 — 왼쪽 색 띠(표 = 첫 칸, 카드 = 카드 전체 — 아래 좁은 화면) */
.cn-wtbl tr[data-health="이상"] > td:first-child,.cn-wtbl tr[data-health="이상"] + tr.cn-wnote-row > td{box-shadow:inset 5px 0 0 var(--warn);}
.cn-wtbl tr[data-health="치료필요"] > td:first-child,.cn-wtbl tr[data-health="치료필요"] + tr.cn-wnote-row > td{box-shadow:inset 5px 0 0 var(--dang);}
/* 펼친 줄 */
.cn-wtbl tr.cn-wnote-row > td{border-top:0;padding:0 var(--s3) var(--s3) var(--s4);}
.cn-wnote-box{display:flex;flex-direction:column;gap:6px;padding:var(--s3) var(--s4);border-radius:var(--r-md);box-shadow:inset 0 0 0 1.5px var(--line-2);background:var(--panel);}
.cn-wnote-l{font-size:var(--t-md);font-weight:var(--w-bold);color:var(--ink);}
.cn-wnote-l small{display:block;margin-top:2px;font-size:var(--t-sm);font-weight:var(--w-reg);color:var(--ink-3);line-height:1.45;}
.cn-wnote{width:100%;min-height:76px;height:auto;padding:var(--s2) var(--s3);line-height:1.5;resize:vertical;font-family:inherit;font-size:17px;}
.cn-wnote-f{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s3);}
.cn-wnote-n{margin:0;font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.cn-wempty{margin:0;padding:var(--s6) var(--s4);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1.5px var(--line-2);text-align:center;font-size:var(--t-md);color:var(--ink-2);}
.cn-wempty[hidden]{display:none;}
.cn-wadd{display:flex;align-items:center;gap:var(--s3) var(--s4);flex-wrap:wrap;margin-top:var(--s4);}
.cn-wadd .btn{max-width:100%;}
/* 도매 완료 — 보낸 개체 정리 */
.cn-whd[hidden]{display:none;}
.cn-whd-sum{margin:calc(var(--s2) - var(--s5)) 0 var(--s4);font-size:var(--t-lg);font-weight:var(--w-semi);color:var(--ink);line-height:1.5;}
.cn-whd .cn-act{margin-bottom:var(--s4);}
.cn-whd-tr{margin-bottom:var(--s4);}
.cn-whd-tr[hidden]{display:none;}
.cn-whd-tr ul{margin:var(--s2) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s2);}
.cn-whd-tr li{padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--fill);font-size:var(--t-md);color:var(--ink);line-height:1.5;overflow-wrap:anywhere;}
.cn-whd-tr li[data-st="pending"]{background:var(--info-soft);}
.cn-whd-tr li[data-st="accepted"]{background:var(--ok-soft);}
.cn-whd-tr li[data-st="rejected"],.cn-whd-tr li[data-st="expired"]{background:var(--warn-soft);}
.cn-whd-items > summary{display:flex;align-items:center;min-height:52px;padding:0 var(--s3);border-radius:var(--r-btn);cursor:pointer;
  font-size:var(--t-md);font-weight:var(--w-bold);color:var(--accent);list-style:none;}
.cn-whd-items > summary:hover{background:var(--fill);}
.cn-whd-items > summary::-webkit-details-marker{display:none;}
.cn-whd-items > summary::before{content:"";width:9px;height:9px;margin-right:var(--s3);border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:rotate(-45deg);flex:0 0 auto;}
.cn-whd-items[open] > summary::before{transform:rotate(45deg);}
.cn-whd-list{margin:var(--s3) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;max-height:520px;overflow:auto;}
.cn-whd-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s3);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line-2);font-size:var(--t-md);}
.cn-whd-list li b{font-weight:var(--w-bold);color:var(--ink);overflow-wrap:anywhere;}
.cn-whd-list li span{flex:1 1 220px;min-width:0;color:var(--ink-2);overflow-wrap:anywhere;}
.cn-whd-list li em{font-style:normal;font-weight:var(--w-bold);color:var(--ink);}

/* 도매 — 좁은 화면(위 데스크톱 규칙 뒤에 둬야 이긴다) */
/* 도매 개체 표 → 한 마리 = 카드(1023px 까지)
   카드: 사진 · 이름/번호/성별·모프/안내/특이사항 미리 보기 → 금액 칸 · 건강 ▾ → 고르기 · "특이사항 적기 ▾" → (펼친 곳) 특이사항 · 이 개체 빼기 */
@media (max-width:1023px){
  .cn-wtbl-box{box-shadow:none;border-radius:0;overflow:visible;}
  .cn-wtbl,.cn-wtbl tbody{display:block;}
  .cn-wtbl thead{display:none;}
  /* 맨 아래 줄 = 고르기(1·2칸) · 특이사항 단추(3칸) — 가운데 칸 최소 24px 로 "☐ 고르기" 가 칸 안에(좁으면 단추 글이 두 줄) */
  .cn-wtbl tr[data-gid]{display:grid;grid-template-columns:44px minmax(24px,1fr) auto;
    grid-template-areas:"ph nm nm" "pr pr hl" "ck ck nb";
    column-gap:var(--s3);row-gap:var(--s2);
    padding:var(--s3);margin-bottom:var(--s2);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1.5px var(--line-2);background:var(--panel);}
  .cn-wtbl tr.bad{background:var(--dang-soft);}
  .cn-wtbl tr.warn{background:var(--warn-soft);}
  .cn-wtbl tr.picked:not(.bad):not(.warn){background:var(--accent-soft);}
  .cn-wtbl td{display:block;padding:0;border:0;background:none!important;width:auto;}
  .cn-wtbl td.cn-wno{grid-area:ck;width:auto;align-self:center;}
  .cn-wtbl .cn-wck-n{display:none;}
  .cn-wtbl .cn-wck-t{display:inline;}
  .cn-wtbl .cn-wck{min-height:48px;white-space:nowrap;}
  .cn-wtbl .cn-wck input{width:26px;height:26px;}
  .cn-wtbl td.cn-wph{grid-area:ph;}
  .cn-wtbl td.cn-wnm{grid-area:nm;min-width:0;}
  .cn-wtbl td.cn-wpr{grid-area:pr;width:auto;display:flex;align-items:center;gap:var(--s2);min-width:0;}
  .cn-wtbl .cn-wpr-l,.cn-wtbl .cn-whl-l{display:block;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink-2);white-space:nowrap;flex:0 0 auto;}
  .cn-wtbl .cn-wmoney{flex:1 1 120px;min-width:0;}
  .cn-wtbl .cn-wmoney .f-input{width:100%;min-width:0;}
  .cn-wtbl td.cn-whl{grid-area:hl;width:auto;display:flex;align-items:center;gap:var(--s2);}
  .cn-wtbl .cn-whsel{min-width:112px;}
  .cn-wtbl td.cn-wmore{grid-area:nb;justify-self:end;align-self:center;max-width:100%;width:auto;}
  .cn-wtbl .cn-wnote-b{min-height:48px;height:auto;white-space:normal;line-height:1.25;text-align:center;padding-top:4px;padding-bottom:4px;}
  /* 이상·치료필요 — 카드 왼쪽 색 띠 */
  .cn-wtbl tr[data-health] > td:first-child{box-shadow:none;}
  .cn-wtbl tr[data-health="이상"],.cn-wtbl tr[data-health="이상"] + tr.cn-wnote-row{box-shadow:inset 6px 0 0 var(--warn),inset 0 0 0 1.5px var(--line-2);}
  .cn-wtbl tr[data-health="치료필요"],.cn-wtbl tr[data-health="치료필요"] + tr.cn-wnote-row{box-shadow:inset 6px 0 0 var(--dang),inset 0 0 0 1.5px var(--line-2);}
  /* 펼친 곳 = 카드 아래에 붙은 칸 */
  .cn-wtbl tr.note-open{margin-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;}
  .cn-wtbl tr.cn-wnote-row{display:block;margin-bottom:var(--s2);padding:0 var(--s3) var(--s3);border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--panel);
    box-shadow:inset 0 0 0 1.5px var(--line-2);}
  .cn-wtbl tr.bad + tr.cn-wnote-row{background:var(--dang-soft);}
  .cn-wtbl tr.warn + tr.cn-wnote-row{background:var(--warn-soft);}
  .cn-wtbl tr.picked:not(.bad):not(.warn) + tr.cn-wnote-row{background:var(--accent-soft);}
  .cn-wtbl tr.cn-wnote-row > td{display:block;padding:0;box-shadow:none!important;}
  .cn-wtbl .cn-wnote-box{padding:var(--s3) 0 0;box-shadow:none;background:transparent;}
}
/* 좁은 휴대폰(≤480) — 금액 칸·건강 ▾ 를 한 줄씩(999,999,999,999 도 칸 안에 다 보이게) */
@media (max-width:480px){
  .cn-wtbl tr[data-gid]{grid-template-areas:"ph nm nm" "pr pr pr" "hl hl hl" "ck ck nb";}
  .cn-wtbl .cn-wnote-b{padding-left:12px;padding-right:12px;}
  .cn-wtbl .cn-wpr-l,.cn-wtbl .cn-whl-l{min-width:2.6em;}
  .cn-wtbl td.cn-whl .cn-whsel{flex:1 1 auto;width:100%;}
}
@media (max-width:768px){
  .cn-sec-h{flex-wrap:wrap;}
  .cn-wsum-main{gap:var(--s1) var(--s3);}
  .cn-wadd .btn,.cn-wsum-badrow .btn{flex:1 1 100%;white-space:normal;height:auto;min-height:var(--ctl-lg);}
  .cn-whtools-b .btn{flex:1 1 auto;}
  .cn-wnote-f .btn{flex:1 1 100%;}
}
@media (pointer:coarse){ .cn-whtools-b .btn.sm,.cn-wnote-f .btn.sm{height:var(--ctl);} }

/* 까닭·건강상태 고르기 창(uiForm 커스텀 칸 .cn-rpick = .opt-list — 창은 body 에 붙지만 이 css 가 같은 화면에 있다) */
.cn-rpick-other{display:flex;flex-direction:column;gap:7px;margin-top:var(--s3);}
.cn-rpick-other[hidden]{display:none;}

/* ---- 인쇄: 계약서 본문만(A4 레이아웃은 C2 css/contract.css) ---- */
@media print{
  body.cp-page{background:#fff;}
  body.cp-page .cp-top,body.cp-page .cp-bar,body.cp-page .cp-head,body.cp-page .cp-note,body.cp-page .cn-sec,body.cp-page .cn-foot,body.cp-page .cn-doc-bar,
  body.cp-page #cn-print-hint,body.cp-page #cn-done-acts,body.cp-page .uidlg-host,body.cp-page .uidlg-toasts,body.cp-page #cgm-mobile-pill,
  body.cp-page #cn-new-again{display:none!important;}
  body.cp-page .cp-main{padding:0;max-width:none;}
  body.cp-page .cn-doc-wrap{box-shadow:none;padding:0;border-radius:0;overflow:visible;}
  body.cp-page.cn-printing-pv > *:not(.cn-pv){display:none!important;}
  body.cp-page .cn-pv{position:static;background:#fff;}
  body.cp-page .cn-pv-top{display:none;}
  body.cp-page .cn-pv-b{padding:0;overflow:visible;}
  body.cp-page .cn-pv-b .cn-doc{box-shadow:none;padding:0;max-width:none;}
  body.cp-page .cn-pv-foot,body.cp-page .cn-hist,body.cp-page .cn-term,body.cp-page #cn-tsign{display:none!important;}
}