/* 1단 화면 목업 전용 — 26.09.03 신설
   색·크기 값을 직접 쓰지 않는다. 토큰은 `_style.css` 하나에서 읽는다(화면지침 5장).
   여기 있는 px 는 셋뿐이다 — 틀 규격 · 로고 규격(CI지침 1-1) · 표 열 폭(화면지침 8.2). */

/* ── 목업 틀 — 실물 크기로 박는다(화면지침 6장) ──
   가로 1560 = 본문 폭(화면지침 2장) · 세로 900 = 1080 화면에서 브라우저 껍데기를 뺀 값 */
.mk-h{width:1560px;margin:var(--s6) auto var(--s2);font-size:var(--fs4);font-weight:var(--w3);
  color:var(--hq)}
.mk-h b{font-weight:var(--w3)}
.mk-h i{font-style:normal;font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3);
  margin-left:var(--s2)}
/* 목업 뼈대 — 설명 상자와 마지막 틀 아래 여백. 태그에 박지 않고 여기서 잡는다(화면지침 4장) */
.mk-note{width:1560px;margin:var(--s5) auto 0}
.frm:last-of-type{margin-bottom:var(--s7)}

.frm{width:1560px;height:900px;overflow:hidden;margin:0 auto;
  background:var(--bg);border:1px solid var(--line2);border-radius:var(--r2)}
.frm .page{width:100%;height:100%;display:flex;flex-direction:column;padding-bottom:var(--s4)}

/* ── 머리띠 (CI지침 1-1 · 26.09.03 사용자 확정) ──
   업무 화면 띠는 마크만 쓴다. 「씨엘케이 주식회사」 글자는 로그인 · 계정 신청 두 장이 갖는다.
   ★ 지침과 어긋나는 두 곳은 사용자가 정했다(`작업현황.md` 규칙 제안 대기)
     · 마크 높이 22px — CI 4.5 는 마크 단독 최소를 32px 로 둔다
     · 세로 가운데 맞춤 — CI 1-1 은 마크 밑선을 글자 밑선에 맞추라고 한다
   남색 위라 흰색으로 뒤집는다(CI 2.2). 마크 50 × 22px.
   flex gap 16px + 8px = 24px — 보호 여백(마크 높이의 1/3 = 7.3px) 위다(CI 4.4) */
.top{align-items:center}
.top .mk{cursor:pointer;height:22px;filter:brightness(0) invert(1);margin-right:var(--s2)}

/* 걸음 넷 · 사람 자리 — 머리띠 한 줄에 같이 태워 세로를 아낀다(화면지침 1장) */
/* ★ 사람 자리는 안 접힌다(26.09.15) — 지름길 단추가 다섯으로 늘자 「첫 관리자」가
   한 글자씩 세로로 접히고 띠 높이가 110px 로 불었다. 좁으면 맥락 줄이 먼저 줄어든다. */
.who{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs2);color:var(--ink-on);
  flex:none;white-space:nowrap;position:relative}
.who b{color:var(--card);font-weight:var(--w2)}
/* 이름 단추와 메뉴 — 내 검토건 · 내 보고서 · 승인관리는 이름을 누르면 연다(26.10.11 사용자 승인) */
.who .me{display:flex;align-items:center;gap:var(--s2);background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.who .me i{font-style:normal;color:var(--ink-on)}
.who .menu{position:absolute;top:100%;left:0;margin-top:var(--s2);background:var(--card);border:1px solid var(--line);box-shadow:var(--lift);padding:var(--s2) 0;min-width:140px;z-index:10}
.who .menu a{display:block;padding:var(--s2) var(--s3);color:var(--ink);font-size:var(--fs2);text-decoration:none}
.who .menu a[hidden]{display:none}
.who .btn.on{background:var(--pick);color:var(--hq);font-weight:var(--w3);box-shadow:inset 0 -2px 0 var(--red)}

/* ── 단추 ── */
/* `<a>` 에도 쓴다 — 양식 내려받기처럼 누르면 파일이 오는 자리다 (26.09.14) */
.btn{display:inline-block;text-decoration:none;
  font-family:inherit;font-size:var(--fs3);font-weight:var(--w2);line-height:var(--lh3);
  border-radius:var(--r1);padding:7px 16px;cursor:pointer;white-space:nowrap;
  background:var(--card);color:var(--ink);border:1px solid var(--line2)}
.btn:hover{background:var(--sink)}
/* 하는 단추 — 한 구역에 하나뿐인 주된 일이다(화면지침 9.2).
   브랜드 레드를 면으로 쓰는 자리는 여기 하나다 (26.09.15 사용자) */
.btn.go{background:var(--red);color:var(--card);border-color:var(--red);font-weight:var(--w3)}
.btn.go:hover{background:var(--red7);border-color:var(--red7)}
.btn.sm{font-size:var(--fs2);padding:3px 10px}
.btn.warn{color:var(--warn);border-color:var(--warn-line)}
.lnk{background:none;border:0;padding:0;font-family:inherit;font-size:var(--fs3);
  color:var(--hq);font-weight:var(--w2);cursor:pointer;text-decoration:underline}

/* ── 로그인 · 신청 · 대기 — 처음 만나는 한 장 ── */
/* ── 문 앞 두 화면(로그인 · 계정 신청) — 26.09.05 사용자 승인 ──
   사진을 남색으로 어둡게 깔고 그 위에 흰 카드를 얹는다(CI지침 2.2).
   로고는 카드가 아니라 화면 맨 아래에 두고, 사진 위라 흰색판으로 뒤집는다.
   사진은 Pexels 무료 스톡이다 — 파일을 프로젝트 안에 둔다(설계 3-1 · 바깥 주소를 부르지 않는다) */
.gate-page{position:relative;width:100%;max-width:none;
  background:url(assets/bg-gate.jpg) center/cover}
.gate-page::before{content:'';position:absolute;inset:0;background:var(--veil)}
.gate-page>*{position:relative;z-index:1}

.gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4)}
.gate .box{width:400px;background:var(--card);border:0;border-top:3px solid var(--red);
  border-radius:var(--r2);padding:var(--s6) var(--s5) var(--s5);box-shadow:var(--lift)}

/* 제목 앞 마크 22px — 업무 화면 띠와 같은 값이다(CI 4.5 는 화면 최소를 32px 로 두므로 예외다).
   사이 12px 는 보호 여백(마크 높이의 1/3 = 7.3px) 위다(CI 4.4) */
.gate .nm{display:flex;align-items:center;justify-content:center;gap:var(--s3);
  font-size:var(--fs6);font-weight:var(--w3);letter-spacing:var(--ls1);
  color:var(--hq);line-height:var(--lh2);margin-bottom:var(--s5)}
.gate .nm .mk{height:22px;width:auto;flex:none}

/* 화면 맨 아래 로고 — 마크+국문+영문 흰색판(CI 1-1 · 2.2) */
.pfoot{text-align:center;padding-bottom:var(--s5)}
.pfoot img{width:170px}
.fld{margin-bottom:var(--s3)}
.fld label{display:block;font-size:var(--fs2);color:var(--ink3);margin-bottom:var(--s1)}
.fld input{width:100%;font-family:inherit;font-size:var(--fs3);color:var(--ink);
  background:var(--sink);border:1px solid var(--line2);border-radius:var(--r1);padding:8px 11px}
.fld input:focus{outline:0;box-shadow:var(--ring);background:var(--card)}
.fld.two{display:flex;gap:var(--s3)}
.fld.two>div{flex:1}
/* 로그인 판의 단추는 먹색이다(26.09.15 사용자) — 빨강 면이 너무 세다.
   브랜드 빨강은 판 위 3px 기둥과 마크가 갖는다. */
.gate .btn.go{width:100%;margin-top:var(--s3);padding:10px;
  background:var(--hq);border-color:var(--hq)}
.gate .btn.go:hover{background:var(--hq-dk);border-color:var(--hq-dk)}
.gate .foot{margin-top:var(--s4);text-align:center;font-size:var(--fs3);color:var(--ink3)}
/* 계정 신청은 문 앞에서 처음 오는 사람이 찾는 자리다 — 글이 아니라 단추로 둔다.
   「들어가기」와 폭을 맞추되 색은 안 채워 둘의 무게를 가른다 (26.09.14 사용자) */
.gate .foot .btn{width:100%;padding:9px}

/* 화면 판 — 배포 뒤에 옛 화면을 보고 있는지 가린다. 값은 `config.js` 한 곳 (26.09.14) */
.buildtag{position:fixed;right:var(--s2);bottom:var(--s1);font-size:var(--fs1);
  color:var(--ink3);opacity:.55;pointer-events:none;z-index:9}
.err{margin-bottom:var(--s3);font-size:var(--fs2);color:var(--warn);
  background:var(--note-bg);border:1px solid var(--warn-line);border-radius:var(--r1);
  padding:6px 11px}
.wait{text-align:center}
.wait .big{font-size:var(--fs6);font-weight:var(--w3);letter-spacing:var(--ls1);color:var(--hq);
  line-height:var(--lh2);margin-bottom:var(--s2)}
.wait p{margin:0;font-size:var(--fs3);color:var(--ink2)}

/* ── 탭 — 승인 화면 둘 · 걸음 넷 ── */
.tabs{display:flex;gap:var(--s1);margin-top:var(--s3)}
.tabs button{font-family:inherit;font-size:var(--fs3);font-weight:var(--w2);color:var(--ink3);
  background:none;border:0;border-bottom:2px solid transparent;padding:7px 14px;cursor:pointer}
.tabs button.on{color:var(--hq);font-weight:var(--w3);border-bottom-color:var(--red)}
.tabs .cnt{font-size:var(--fs1);font-weight:var(--w2);letter-spacing:var(--ls3);
  color:var(--card);background:var(--calm);border-radius:var(--r3);padding:0 5px;margin-left:5px}
.tabs button.on .cnt{background:var(--red)}
/* 탭 줄 오른쪽 빈자리가 그 탭의 설명을 갖는다 — 판마다 카드 머리를 또 두지 않는다(26.09.08) */
.tabs .sp{flex:1}
.tabs em{font-style:normal;font-size:var(--fs2);color:var(--ink3);align-self:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs .tag{align-self:center;margin-left:var(--s2)}
/* ── 지적 등급 꼬리표 (26.09.15 사용자 승인) ──────────────────────
   ★ 색만으로 안 가른다 — 모양이 먼저 가른다.
   단정은 채우고 · 확인 요망은 외곽선 · 참고는 아무 꼴도 없고 · 알림은 옅은 면이다.
   적록 색각이상에서 색상이 무너져도 이 넷은 꼴로 갈린다. */
.gr{display:inline-block;font-size:var(--fs1);font-weight:var(--w3);letter-spacing:var(--ls3);
  line-height:var(--lh4);border-radius:var(--r3);padding:0 8px;
  border:1px solid transparent;white-space:nowrap}
.gr.say{background:var(--g-say);color:var(--card);border-color:var(--g-say)}
.gr.ask{background:var(--g-ask-bg);color:var(--g-ask);border-color:var(--g-ask-ln)}
.gr.ref{background:none;color:var(--g-ref);padding-left:0;padding-right:0}
.gr.note{background:var(--g-note-bg);color:var(--g-note);border-color:var(--g-note-ln)}

/* 검사 셋과 표 셋을 한 줄에 두되 갈래는 가른다. 단추 줄에서는 고른 줄용과 걸음용을 가른다 */
.tabs .dv2,.bar .dv2{width:1px;align-self:center;height:16px;background:var(--line2);margin:0 var(--s3)}

/* ── 표 (화면지침 8장) ──
   표 폭 1480 = 본문 1560 − 페이지 여백 48 − 카드 여백 32.
   열 폭은 <col> 에 박는다. 남는 자리를 0 으로 만든다(8.2). */
.tb{width:100%;border-collapse:collapse;table-layout:fixed}
/* ★ 표 머리는 붙박이다 — 세로로 굴리면 머리가 같이 올라가 무슨 열인지 몰랐다(26.09.10 사용자).
   `border-bottom` 은 붙박이가 되면 같이 스크롤돼 사라지므로 `box-shadow` 로 긋는다. */
.tb th{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink3);text-align:center;
  background:var(--head);padding:7px 6px;white-space:nowrap;
  position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--line2)}
.tb td{font-size:var(--fs3);text-align:center;border-bottom:1px solid var(--hair);
  padding:7px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb tbody tr:hover{background:var(--hover)}
/* 표 안의 고르기 — 칸 폭을 넘지 않게 묶는다 (26.09.19). 안 묶으면 옵션 글자만큼
   넓어져 표가 2px 넘치고 가로 스크롤이 생긴다(화면지침 8.2) */
.tb td select{width:100%;font-family:inherit;font-size:var(--fs3);color:var(--ink)}
/* 목표 역산 — 갈래와 값이 한 줄에 선다. 위 규칙의 100% 를 이 두 칸에서만 되돌린다 (26.09.19) */
#target-kind{width:150px}
#target-value{width:200px}
.tb .lt{text-align:left}
.tb .rt{text-align:right}
.tb .zero{color:var(--calm)}
.tb .wn{color:var(--warn)}
.tb .act{display:flex;gap:var(--s1);justify-content:center}
.rm{width:200px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:left;color:var(--ink2)}
.rm.wide{width:280px;max-width:280px}   /* 비고를 읽으러 오는 표(화면지침 8.2 넓힘 예외) */
.card .scroll{flex:1;min-height:0;overflow:auto}
/* 견본 한 줄만 섰을 때 — 표가 세로를 다 먹지 않게 한다 (26.09.15).
   쓰는 곳은 사업지 목록 하나다. 나머지 빈 목록은 표를 통째로 감춘다 */
.card .scroll.shrink{flex:0 0 auto}

/* ── 일하는 화면 껍데기 ── */
.bar{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.bar .sp{flex:1}
.bar h2{margin:0;font-size:var(--fs4);font-weight:var(--w3);color:var(--hq)}
/* 다음으로 못 가는 까닭 — 막힌 단추 왼쪽에 적는다(26.09.15). 눌러도 아무 일이 없으면 고장으로 읽힌다 */
.bar .why{font-size:var(--fs2);color:var(--warn)}
.step{display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  margin-top:var(--s3)}
/* overflow:hidden 을 두면 아래로 펼치는 「자세히」 판이 띠 높이에서 잘린다(26.09.29) — 첫 단추만 모서리를 맞춘다 */
.step > button:first-child{border-radius:var(--r2) 0 0 var(--r2)}
/* 걸음 띠가 걸음 이동을 맡는다 — 아래 단추 줄이 하던 일이다(26.09.08).
   잠긴 걸음은 조건을 안 채운 앞 걸음이다. 눌러도 안 간다. */
.step button{flex:1;font-family:inherit;font-size:var(--fs3);font-weight:var(--w2);color:var(--ink3);
  text-align:center;padding:9px 0;background:none;border:0;cursor:pointer}
.step button+button{border-left:1px solid var(--hair)}
.step button:disabled{color:var(--line2);cursor:default}
/* ★ 지금 걸음은 채우지 않고 CLK 레드 3px 밑줄 하나로 알린다 (CLKGB 관리자 화면과 같은 규칙).
   레드는 「하나만 튀어야 하는 곳」 전용이라 면이 아니라 선으로 쓴다(위파크-방명록/theme.css).
   box-shadow 라 칸 높이가 안 밀린다 — border 를 두면 1px 씩 밀린다. */
.step button:not(:disabled):hover{box-shadow:inset 0 -3px 0 var(--accent-line)}
.step button.on{color:var(--red);font-weight:var(--w3);box-shadow:inset 0 -3px 0 var(--red)}
/* 걸음 띠 오른쪽에 접어 둔 곁값(26.09.15 사용자) — 머리띠의 맥락 줄을 걷고 이리로 옮겼다.
   걸음 단추는 flex:1 로 자리를 나눠 갖고 이 칸만 제 폭을 쓴다. */
.top .more{position:relative;flex:none;display:flex;align-items:center}
.top .more > button{flex:none;font-family:inherit;font-size:var(--fs2);color:var(--ink-on);cursor:pointer;
  background:none;border:1px solid var(--ink-on);border-radius:var(--r1);padding:var(--s1) var(--s3)}
.top .more > button.open,.top .more > button:hover{color:var(--card);border-color:var(--card)}
.top .vals{position:absolute;left:0;top:100%;z-index:5;display:flex;flex-direction:column;
  gap:var(--s1);min-width:200px;margin-top:var(--s1);padding:var(--s3) var(--s4);
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:var(--lift)}
.top .vals span{display:flex;gap:var(--s3);font-size:var(--fs2);color:var(--ink);white-space:nowrap}
.top .vals i{flex:none;min-width:56px;font-style:normal;color:var(--ink3)}
/* 갈 곳이 없는 가운데 마디 — 사업지명이 그렇다. 눌리지 않는 글이다 */
.crumb .at{font-size:var(--fs5);font-weight:var(--w3);letter-spacing:var(--ls2);
  line-height:var(--lh2);white-space:nowrap;color:var(--card)}
.step button.on:hover{box-shadow:inset 0 -3px 0 var(--red)}
/* 지나온 걸음 · 지금 · 앞으로를 갈라 어디까지 왔는지 한눈에 보인다 */
.step button.done{background:var(--sink);color:var(--ink2)}
.step button.done:hover{background:var(--sink);box-shadow:inset 0 -3px 0 var(--accent-line)}
.step i{font-style:normal;font-size:var(--fs2);color:var(--calm);margin-left:var(--s2)}
/* 곁말은 잠긴 걸음에만 — 열린 걸음에 「개요 입력 후 사용」이 남아 있었다(26.09.27 사용자) */
.step button:not(:disabled) i{display:none}
.step button:disabled i{color:var(--line2)}
/* ★ 사업수지 다섯 단계 — 한 줄에 이름 · 상태(26.10.01 사용자 · 목업 6e P1). 분양성 띠는 그대로 둔다 */
.step.five button{display:flex;align-items:center;justify-content:center;gap:var(--s2);white-space:nowrap}
.step.five button i{display:inline;margin:0;font-size:var(--fs1);font-weight:var(--w2);color:var(--calm)}
.step.five button b{font-weight:var(--w3)}
.step.five button.done b,.step.five button.done i{color:var(--g-note)}
.step.five button.on{background:var(--red1)}
.step.five button.on i{color:var(--red)}
.step.five button.lock{color:var(--calm)}
.step.five button.lock b{font-size:12px;opacity:.8}
.step.five button.lock i{color:var(--calm)}

/* 빈 화면 — 1단은 자리만 잡는다 */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);border:1px dashed var(--line2);border-radius:var(--r2);
  background:var(--card);margin-top:var(--s3)}
.empty .t{font-size:var(--fs4);font-weight:var(--w3);color:var(--ink3)}
.empty .s{font-size:var(--fs3);color:var(--calm)}
/* 첫 화면의 갈래 둘 — 사업지 아래에서 길이 갈린다는 것을 여기서 한 번 보여 준다.
   카드는 설명만 한다. 누르는 자리는 아래 단추 하나다(화면지침 9.2 · 26.09.15 조사) */
/* 사업지를 만들면 그 아래로 갈래 둘이 달린다 — 그 모양을 선으로 보인다(26.09.15 사용자).
   단추에서 세로로 내려와 가로로 벌어지고 카드마다 다시 내려간다. */
.empty .ways{position:relative;display:flex;gap:var(--s4);
  width:100%;max-width:760px;margin-top:var(--s6);padding-top:var(--s4)}
.empty .ways::before{content:'';position:absolute;left:25%;right:25%;top:0;
  height:1px;background:var(--line2)}
.empty .ways::after{content:'';position:absolute;left:50%;top:calc(var(--s6) * -1);
  width:1px;height:var(--s6);background:var(--line2)}
.empty .way{position:relative;flex:1;display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r2);
  background:var(--sink);text-align:left}
.empty .way::before{content:'';position:absolute;left:50%;top:calc(var(--s4) * -1);
  width:1px;height:var(--s4);background:var(--line2)}
.empty .way b{font-size:var(--fs3);font-weight:var(--w3);color:var(--ink2)}
.empty .way span{font-size:var(--fs2);color:var(--ink3);line-height:var(--lh3)}
/* 주된 단추는 안내 바로 아래에 가로로 길게 눕힌다 — 갈래 카드와 폭을 맞춘다
   (26.09.15 사용자). 문 앞 화면의 「들어가기」와 같은 꼴이다 */
.empty .btn.go{width:100%;max-width:760px;margin-top:var(--s4);padding:10px}

/* 표 아래 남는 자리에 갈래 둘을 적어 둔다(26.09.15 사용자).
   ★ 아직 한 건도 시작 안 했을 때만 뜬다 — 채우고 나면 사라진다.
   빈 화면의 갈래 카드와 같은 꼴이되 잇는 선은 안 둔다. 여기는 표 아래라 이을 것이 없다. */
.hint{display:flex;justify-content:center;gap:var(--s4);
  padding:var(--s6) var(--s4) var(--s5)}
.hint .way{flex:0 1 360px;display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r2);
  background:var(--sink);text-align:left}
.hint .way b{font-size:var(--fs3);font-weight:var(--w3);color:var(--ink2)}
.hint .way span{font-size:var(--fs2);color:var(--ink3);line-height:var(--lh3)}
.hint .way span b{font-weight:var(--w3);color:var(--ink2)}
/* 미리보기 — 고른 시트 앞머리와 프로그램이 읽은 두 열 (26.09.15 사용자).
   표가 넓어 가로로만 스크롤한다. 이름 열은 고른 줄 색, 금액 열은 짚어 주는 상자 색으로 갈라 둔다. */
.prewrap{overflow-x:auto;border:1px solid var(--line2);border-radius:var(--r1)}
.tb.pre{font-size:var(--fs2);white-space:nowrap}
.tb.pre th,.tb.pre td{padding:var(--s1) var(--s2);text-align:left;
  border-bottom:1px solid var(--line2)}
.tb.pre .no{width:44px;color:var(--ink3);text-align:right}
.tb.pre th.c{color:var(--ink3);font-weight:var(--w2)}
.tb.pre .gap{color:var(--line2);text-align:center;width:24px}
.tb.pre .lab{background:var(--pick)}
/* 왼쪽 열에서 받아 온 부모 이름 — 그 칸에 직접 적힌 것이 아니라 옅게 둔다 */
.tb.pre .lab.back{color:var(--ink3);font-style:italic}
.tb.pre td{max-width:200px;overflow:hidden;text-overflow:ellipsis}
/* 미리보기 표의 금액 칸 — 걷어낸 옛 토큰을 써서 색이 안 나오고 있었다 (26.09.19 사용자).
   이름이 바뀔 때 이 줄만 안 따라갔다 */
.tb.pre .amt{background:var(--note-bg);text-align:right}
.tb.pre th.lab,.tb.pre th.amt{color:var(--ink2);font-weight:var(--w3)}
.prepick{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s1) 0}
.prepick label{font-size:var(--fs2);color:var(--ink3)}
.prepick select{font-family:inherit;font-size:var(--fs2);max-width:260px}
.prepick .sp{flex:1}
.prepick .note{font-size:var(--fs2);color:var(--ink3)}
.prepick .note.wn{color:var(--warn)}

/* 쪽 나누기 — 표 바로 아래 한 줄 (26.09.15 사용자). 한 쪽뿐이면 통째로 감춘다.
   왼쪽에 「모두 N건」, 오른쪽에 쪽 단추. 자리를 적게 먹게 단추를 작게 둔다. */
.pager{display:flex;align-items:center;gap:var(--s1);
  padding:var(--s3) var(--s1) 0;font-size:var(--fs2)}
.pager .all{color:var(--ink3);margin-right:auto}
.pager button{min-width:28px;height:26px;padding:0 var(--s2);
  background:var(--card);color:var(--ink2);border:1px solid var(--line2);
  border-radius:var(--r1);font-size:var(--fs2);cursor:pointer}
.pager button:hover:not(:disabled){background:var(--sink)}
.pager button.now{background:var(--ink2);color:var(--card);border-color:var(--ink2);
  font-weight:var(--w3)}
.pager button:disabled{color:var(--line2);cursor:default}
.pager button.gap{border-color:transparent;background:none}

/* 걸음을 줄줄이 적는 넓은 카드 — 갈래 카드 둘 대신 하나로 눕힌다 */
.hint .way.wide{flex:0 1 760px}
.hint .way.wide span{white-space:normal}

/* 견본 줄 — 채워졌을 때 모습을 한 줄로 보여 준다(Airtable · Linear 방식).
   ★ 화면에만 그린다. DB 에 넣지 않고 누를 수도 없다 */
.tb tr.sample td{color:var(--calm);background:var(--sink)}
.tb tr.sample:hover td{background:var(--sink)}
.tb tr.sample .mark{display:inline-block;font-size:var(--fs1);font-weight:var(--w3);
  letter-spacing:var(--ls3);color:var(--ink3);background:var(--card);
  border:1px solid var(--line2);border-radius:var(--r3);padding:0 7px;margin-right:var(--s2)}

/* 빈 자리에 이 걸음에서 할 일을 적는다 — 설계 5-5~5-8 이 정한 것을 옮긴다.
   2단에서 실물 폼과 검사 결과로 갈린다 */
.empty ul{margin:var(--s3) 0 0;padding:0;list-style:none;text-align:left;
  font-size:var(--fs3);color:var(--ink3);line-height:1.9}
.empty li{position:relative;padding-left:var(--s4)}
.empty li::before{content:'';position:absolute;left:5px;top:.85em;
  width:4px;height:4px;border-radius:var(--r3);background:var(--line2)}

/* 카드 하나가 남은 세로를 다 먹는다 — 표가 길어져도 페이지는 안 구른다.
   그래도 모자라면(창이 낮을 때) 뷰가 구른다 — 아래 아랫한계와 붙박이 단추 줄이 짝이다. */
.grow{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}

/* 카드가 여럿인 뷰 — 카드를 짓눌러 한 줄씩 보이게 하지 않고 뷰를 통째로 굴린다.
   아래 단추 줄만 붙박이로 두어 창이 낮아도 손이 닿는다(26.09.08). */
/* 위쪽 요약 판은 내용 높이대로 서고, 남은 자리는 아래 큰 카드가 먹는다.
   안 그러면 flex:1 이 요약 판까지 눌러 결과 여덟 줄 중 넷이 잘린다(26.09.08). */
.grow>.cols{flex:0 0 auto}
.grow>.cols .card{flex:0 0 auto}
/* 맨 아래 두 칸은 남은 자리를 먹는다 — 위에 큰 카드가 없는 뷰(①받기 · ①여섯 고르기)는
   그러지 않으면 카드가 위에 몰리고 아래가 통째로 빈다(26.09.10).
   ★ `:last-child` 로 잡았다가 아래 단추 줄을 붙이는 순간 마지막이 아니게 되어 다시 빈 자리가 생겼다.
     단추 줄은 어느 화면에나 서므로 마지막 여부로 잡지 않는다(26.09.10). */
.grow>.cols:nth-last-child(-n+2){flex:1;min-height:0}
.grow>.cols:nth-last-child(-n+2) .card{flex:1;min-height:0}
/* 뷰 안에서 자리를 먹는 것은 grow 를 단 카드뿐이다. 안 그러면 큰 표와 작은 목록이
   자리를 똑같이 나눠 가져 표가 서너 줄만 보인다(26.09.08). */
.grow>.card:not(.grow){flex:0 0 auto}

/* 창이 낮으면 큰 판이 0 으로 눌려 표가 머리만 남는다. 판에 아랫한계를 주고
   단추 줄은 바닥에 붙여 언제나 손이 닿게 둔다. 창 높이 600 · 720 · 900 에서 재고 넣었다(26.09.08). */
.grow>.card.grow{min-height:168px}   /* 카드 머리 + 표 머리 + 두 줄 */
.grow>.bar{position:sticky;bottom:0;background:var(--bg);padding-bottom:var(--s1)}
.card.grow>.bar{background:var(--card)}   /* 카드 안 단추 줄은 카드 바탕을 따른다(26.09.29 사용자) */

.ch{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3);
  font-size:var(--fs4);font-weight:var(--w3);color:var(--hq)}
.ch .sp{flex:1}
.ch em{font-style:normal;font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3);
  margin-left:var(--s2)}

/* 프로그램 이름과 화면 이름은 크기가 같고 색만 다르다 (26.09.03 사용자 확정).
   프로그램 이름은 늘 같아 옅게, 화면 이름은 지금 어디인지 알려 주므로 흰색이다. */
.top .pgm,.top h1{font-size:var(--fs5);font-weight:var(--w3);letter-spacing:var(--ls2);
  line-height:var(--lh2)}
/* 프로그램 이름도 안 접힌다 — 접히면 띠가 두 줄이 된다(26.09.15).
   좁아지면 맥락 줄과 빵부스러기가 먼저 줄어든다. 둘 다 넘침을 숨긴다. */
.top .pgm{cursor:pointer;color:var(--ink-on);white-space:nowrap;flex:none}
/* 길 — 마지막 조각만 지금 자리이고 앞 조각은 다 눌린다 (26.09.14 사용자).
   되돌아가기 단추를 화면마다 따로 두지 않는다. 길 하나가 그 일을 한다. */
.crumb{display:flex;align-items:center;gap:var(--s3);min-width:0}
.crumb h1{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb .up{font-family:inherit;font-size:var(--fs5);font-weight:var(--w3);
  letter-spacing:var(--ls2);line-height:var(--lh2);white-space:nowrap;
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink-on)}
.crumb i{font-style:normal;font-size:var(--fs4);color:var(--ink-on);opacity:.6}
.top .mk:hover,.top .pgm:hover,.crumb .up:hover{opacity:.8}
.top .dv{width:1px;height:18px;background:var(--ink-on);opacity:.5;margin:0 var(--s4)}

/* 목록 줄을 눌러 일하는 화면으로 간다 — 26.09.04 신설 */
.tb tbody tr.rowlink{cursor:pointer}

/* ── 2단 ①받기 ─────────────────────────────────────────────
   화면 안 알림줄 · 파일 넣는 자리 · 사람이 고르는 여섯 · 원본 검사 결과.
   목업 `_screens.css` 그대로 옮겼다 — 값을 안 바꿨다(26.09.08). */

/* 좌우 두 칸 — 옆에 놓을 수 있으면 옆에 놓는다(화면지침 1장) */
.cols{display:flex;gap:var(--s4);flex:1;min-height:0}
.cols .pane{flex:1;min-width:0;display:flex;flex-direction:column}

/* 파일을 끌어다 놓는 자리 */
.drop{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);background:var(--sink);border:2px dashed var(--line2);
  border-radius:var(--r2);color:var(--ink3);font-size:var(--fs3)}
.drop .t{font-size:var(--fs4);font-weight:var(--w3);color:var(--ink2)}
.drop .why{font-size:var(--fs2);color:var(--warn)}

/* 폼 격자 — 기본 셋. 반 폭 칸 안에서는 둘 */
.flds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3) var(--s4)}
.flds .fld{margin-bottom:0}
/* 고르기 칸 — 입력칸과 같은 높이 · 면 · 모서리 · 제 화살표(26.09.30 사용자 '이런 박스만 다른 디자인').
   브라우저 기본 고르기는 글자만큼 좁고 모양이 입력칸과 달랐다. .flds 밖 .fld 에도 건다 */
.fld select,.flds select{appearance:none;-webkit-appearance:none;width:100%;height:38px;font-family:inherit;
  font-size:var(--fs3);color:var(--ink);padding:0 34px 0 11px;border:1px solid var(--line2);border-radius:var(--r1);
  background-color:var(--sink);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2369737f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.fld select:focus,.flds select:focus{outline:0;box-shadow:var(--ring);background-color:var(--card)}
.fld select:disabled,.flds select:disabled{cursor:default;color:var(--ink3)}
.flds .fld.done label{color:var(--hq);font-weight:var(--w2)}
/* 고르지 않고 정해진 값 — 담당자는 넣은 사람이다(`docs/design.md` 9-3) */
.flds .ro{width:100%;font-size:var(--fs3);color:var(--ink);
  padding:7px var(--s2);border:1px solid var(--line2);border-radius:var(--r1);background:var(--line2)}
.pane .flds{grid-template-columns:repeat(2,1fr)}
/* ④ 조정 칸 열둘 — 두 칸으로 세우면 여덟 줄이 되어 판이 세로로 굴렀다.
   세 칸으로 눕히고 낱개 다섯을 한 묶음으로 모아 다섯 줄로 줄인다(26.09.10 사용자) */
#adj-fields .flds{grid-template-columns:repeat(3,1fr)}
#adj-fields .ch{margin-top:var(--s3)}
#adj-fields .ch:first-child{margin-top:0}
/* 넷을 한 줄에 눕힌다 — 세로를 아낀다(화면지침 1장). 현장명이 가장 길어 넓게 준다 */
.flds.c4{grid-template-columns:2fr 1.3fr 1fr 1fr}

/* 서술 넷은 한 줄에 눕히면 가로가 좁아 글이 접힌다 — 위아래로 쌓고 가로를 다 준다.
   담당자가 문장으로 적는 칸이라 두 줄은 보여야 한다 (26.09.14 사용자) */
.flds.stack{grid-template-columns:1fr}
.flds.stack textarea{height:58px}
/* ③지도 입지 칸 — 이름 오른쪽에 등급 고르개(26.09.29 사용자) */
.fld .lbrow{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s1)}
.fld .lbrow label{margin-bottom:0}
.fld .lbrow select{margin-left:auto;width:80px;height:24px;padding:0 var(--s1);font-size:var(--fs2)}

/* 다섯을 한 줄에 눕힌다 — 유형이 상품 · 방식 둘로 갈렸다(`docs/rules.md` 2장) */
.flds.c5{grid-template-columns:2fr 1.3fr 1.1fr 1fr 1fr}

/* 구성 다섯 — 세목을 켜는 것은 유형이 아니라 이 체크다(`docs/rules.md` 3장 뒤) */
.compo{margin-top:var(--s3);margin-bottom:0}
.compo>div{display:flex;align-items:center;gap:var(--s4);height:34px}
.compo>div label{display:flex;align-items:center;gap:var(--s1);margin:0;
  font-size:var(--fs3);color:var(--ink);cursor:pointer}
.compo>div input{width:14px;height:14px;accent-color:var(--hq);margin:0}
.compo>div em{font-style:normal;font-size:var(--fs2);color:var(--ink3);margin-left:var(--s3)}

/* 원본 검사 결과 — 개수만 낸다. 경로도 파일 이름도 안 낸다(`docs/checks.md` 3장) */
.chk{margin:0;padding:0;list-style:none}
.chk li{display:flex;align-items:center;gap:var(--s2);padding:7px 0;
  border-bottom:1px solid var(--hair);font-size:var(--fs3)}
.chk li:last-child{border-bottom:0}
.chk li>span{flex:1;color:var(--ink2)}
.chk b{font-weight:var(--w2);color:var(--ink)}
.chk .wn{color:var(--warn);font-weight:var(--w2)}
.chk .num{flex:none;width:64px;text-align:right}
.chk .lv{flex:none;width:96px;text-align:right;color:var(--ink3)}

/* 꼬리표 — 10px · 굵기 600 이상 · 8자 이하(화면지침 4-1) */
.tag{font-size:var(--fs1);font-weight:var(--w2);letter-spacing:var(--ls3);line-height:var(--lh4);
  padding:0 7px;border-radius:var(--r3);background:var(--sink);color:var(--ink3);white-space:nowrap}
.tag.wn{background:var(--card);border:1px solid var(--warn-line);color:var(--warn)}
.tag.on{background:var(--hq);color:var(--card)}
.chk .zero{color:var(--calm)}

/* 결과 여덟 줄 — 4열 × 2행으로 눕힌다. 세로 여덟 줄이 두 줄이 된다(화면지침 1장 · 26.09.08).
   줄 안은 그대로다. 값은 자리가 칸마다 달라 폭을 안 박는다 — 박으면 열두 자리가 넘친다.
   줄 사이 실선은 첫 줄 넷에만 둔다 — 맨 아래에 뜬 선이 생기지 않는다. */
/* 표 칸 안의 곁말 — 이름에 딱 붙어 나오던 자리다(26.09.10).
   ★ 26.09.10 주요 지표 CSS 를 갈아 끼우다 이 규칙을 통째로 지웠고 곁말이 다시 붙었다.
     사용자가 「말도 안 했는데 왜 바뀌었냐」로 짚었다. 되돌린다. */
.tb td i{font-style:normal;font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3);
  margin-left:var(--s2)}

/* ★ 26.09.10 주요 지표 여덟 — 시안 셋을 견주어 「한 줄」로 정했다(사용자).
   한 줄로 늘어놓기(구분 안 됨) → 두 줄(여전히 어려움) → 세 줄(세로만 먹음) → 시안 셋.
   고른 안은 한 줄에 이름 · 값 · 뜻을 나란히 놓고 칸막이로 여덟을 가른다.
   카드 높이 247px → 151px. 값은 18 이 아니라 16px 다 — 한 줄에 셋이 들어가야 한다. */
.chk.g4{display:grid;grid-template-columns:repeat(4,1fr);column-gap:0}
.chk.g4 li{display:flex;align-items:baseline;gap:var(--s2);min-width:0;
  padding:var(--s2) var(--s4);border-bottom:0}
.chk.g4 li:not(:nth-child(4n+1)){border-left:1px solid var(--line)}
.chk.g4 li:nth-child(-n+4){border-bottom:1px solid var(--line)}
.chk.g4 li>b{flex:none;font-size:var(--fs2);font-weight:var(--w2);color:var(--ink3);white-space:nowrap}
.chk.g4 .v{flex:none;font-size:var(--fs4);font-weight:var(--w3);letter-spacing:var(--ls2);
  white-space:nowrap}
/* 뜻은 남는 자리를 오른쪽 끝까지 먹는다 — 모자라면 접히지 말고 말줄임으로 잘린다 */
.chk.g4 .why{flex:1;min-width:0;text-align:right;font-size:var(--fs2);color:var(--calm);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chk.g4 .wn{color:var(--warn)}

/* 짚어 주는 한 줄 — 카드 아래에 붙인다.
   ★ 규칙이 아예 없어 굵은 머리와 뒷말이 딱 붙어 나왔다(26.09.10 사용자) —
     「계산과 원본의 차」 + 「이자 -164억원」이 「계산과 원본의 차이자」로 읽혔다.
     고쳐 놓고 CSS 범위를 갈아 끼우다 또 지웠다. 화면짜임검사 4번이 이제 센다. */
.msg{display:flex;align-items:baseline;gap:var(--s3);margin-top:var(--s3);
  padding:var(--s2) var(--s3);background:var(--note-bg);border:1px solid var(--note-line);
  border-radius:var(--r1);font-size:var(--fs2);line-height:var(--lh3)}
.msg b{flex:none;font-weight:var(--w3);color:var(--ink);
  padding-right:var(--s3);border-right:1px solid var(--note-line)}
.msg span{min-width:0;color:var(--ink2)}

/* ── ④ 조정 표 — 「원래 값 → 조정 → 조정한 값」 한 줄 ─────────────────
   ★ 26.09.10 이 덩어리를 두 번 지웠다. 주요 지표 CSS 를 범위로 갈아 끼우면서
     같은 범위에 있던 이 규칙까지 함께 날렸고, 입력칸이 177px 로 부풀어
     159px 칸 밖으로 24px 삐져나가 `td{overflow:hidden}` 에 잘렸다(사용자 「박스가 짤림」).
     `tools/화면짜임검사.js` 4번이 이제 이 선택자들이 살아 있는지 센다. */
.tb.adj td{padding:5px 6px}
.tb.adj td.lt b{font-weight:var(--w2)}
.tb.adj input{width:100%;font-family:inherit;font-size:var(--fs3);color:var(--ink);text-align:right;
  padding:5px var(--s2);border:1px solid var(--line2);border-radius:var(--r1);background:var(--sink);min-width:0}
.tb.adj input::placeholder{color:var(--calm);font-size:var(--fs2)}
.tb.adj input:disabled{background:var(--hair);color:var(--calm)}
.tb.adj .big2{font-weight:var(--w3);color:var(--ink)}
/* 평당가는 총액 아래 한 줄로 — 실무가 총액보다 평당가로 조정한다(26.09.10 사용자) */
.tb.adj td.rt i{display:block;margin-left:0;font-size:var(--fs2);color:var(--calm)}
/* 주택형 폈다 접었다 — 엑셀 개요의 + · − 와 같은 모양이다 */
.tb .fold{width:16px;height:16px;margin-right:var(--s2);padding:0;line-height:1;
  font-family:inherit;font-size:var(--fs2);font-weight:var(--w3);color:var(--ink2);
  background:var(--card);border:1px solid var(--line2);border-radius:3px;cursor:pointer;
  vertical-align:middle}
.tb .fold:hover{background:var(--head)}
.tb.adj tr.sub td{background:var(--sink)}
.tb.adj tr.sub td.lt{padding-left:var(--s6)}
.tb.adj tr.sub td.lt b{font-weight:var(--w1);color:var(--ink2)}
/* 분양 사례 분양가 탭 — 주택형 줄 아래 펼친 층별 표(26.10.13 사용자) */
.tb tr.sub>td[colspan]{padding:var(--s2) var(--s3) var(--s3) var(--s6);background:var(--sink)}
.tb.in{background:var(--card)}

/* ★ 숨김은 언제나 이긴다 — 26.09.04 신설
   `_style.css` 의 `body.app .page{display:flex}` · `body.app .card{display:flex}` 가
   특이도로 `[hidden]` 을 밀어낸다. 한 줄로 다 막는다. 자리마다 막으면 다음 자리를 또 놓친다. */
[hidden]{display:none !important}

/* 사업지 화면(sites.html) — 목업 mockups/screens-sites.html 에서 옮겼다(26.09.13 승인) */
.tb tr.ed td{background:var(--sink)}
.tb tr.ed input{width:100%;font-family:inherit;font-size:var(--fs3);color:var(--ink);
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r1);padding:4px 8px}
.tb tr.ed input::placeholder{color:var(--calm)}
.tb tr.ed input.wn{border-color:var(--warn-line);background:var(--note-bg)}
.tb tr.ed input.wn::placeholder{color:var(--warn)}
/* 수정 줄에는 저장·취소 말고 보관·지우기가 더 선다(18-4). 둘씩 두 줄로 접는다.
   ★ 여기 단추는 기준 크기다(26.09.15 사용자) — 작은 단추 넷을 접으면 눌러야 할 것이 안 보인다 */
.tb tr.ed .act{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.tb tr.ed .act .btn{font-size:var(--fs3);padding:5px 12px}
/* 공유 줄 — 목록 줄 아래에 펼친다(18-4) */
.shr{display:flex;align-items:center;gap:var(--s3);padding:var(--s1) 0}
.shr > b{font-size:var(--fs2);color:var(--ink3)}
.shr .chips{flex-wrap:wrap}
.shr select{font-family:inherit;font-size:var(--fs2);color:var(--ink);
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r1);padding:3px 8px}
.tb .lnk.zero{color:var(--calm);font-weight:var(--w1)}
/* 아직 아무것도 없는 갈래 — 셈 대신 다음 걸음을 적고 앞에 더하기 표를 둔다(26.09.15 사용자).
   회색으로 눕히지 않는다. 여기가 직원이 처음 눌러야 할 자리다. */
.tb .lnk .go{color:var(--red);font-weight:var(--w3)}
.tb .lnk .go::before{content:'+';margin-right:4px;font-weight:var(--w3)}
/* 분양성 칸은 4단에 화면이 생길 때까지 못 누른다(21-1). 그때 이 줄을 걷는다. */
.tb .lnk:disabled{color:var(--calm);font-weight:var(--w1);text-decoration:none;cursor:default}

/* 시장조사 보고서 — 걸음 다섯은 가로 띠다. 수지 걸음 넷과 같은 꼴이다(26.09.14 사용자) */
/* ②수집 진행 막대 — 4-b (26.09.14, mockups/screens-4b-수집.html 승인) */
.pg{height:6px;border-radius:var(--r3);background:var(--hair);overflow:hidden}
.pg i{display:block;height:100%;background:var(--red);border-radius:var(--r3)}
.pg.done i{background:var(--accent-line)}
.ch .pg{flex:0 0 160px;margin-left:var(--s3)}
.ch .cnt{font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3);margin-left:var(--s2)}
/* 막대가 든 칸은 가운데로 모은다 — 칸이 넓어 왼쪽에 붙으면 따로 논다 */
.tb td .pgwrap{position:relative;max-width:260px;margin:0 auto}
/* 막대는 글자 밑 여백에 얹는다 — 도는 줄만 두 줄 높이가 되어 표가 들쭉날쭉했다(26.09.27 사용자) */
.tb td .pgwrap .pg{position:absolute;left:0;right:0;bottom:-7px;height:3px}
.tb .tick{font-size:var(--fs2);color:var(--ink3);white-space:nowrap}
.tb .tick b{font-weight:var(--w2);color:var(--ink)}

/* ③고르기 — 4-c (26.09.14, mockups/screens-4c-고르기.html 승인) */
/* 표 안에서 빈 칸을 채우는 입력 — 칸 폭을 그대로 쓰고 테두리만 옅게 둔다 */
.tb input.cell{width:100%;font-family:inherit;font-size:var(--fs3);text-align:center;color:var(--ink);
  background:var(--sink);border:1px solid var(--line2);border-radius:var(--r1);padding:3px 4px}
.tb input.cell.lt{text-align:left}
/* 안 담은 줄은 옅게 눕힌다 — 지우지 않고 그대로 두어 되담을 수 있다 */
.tb tr.off td,.tb tr.off input.cell{color:var(--calm)}
/* 담은 뒤에 수집이 다시 돌았을 때 띄우는 한 줄 */
.stale{margin:var(--s3) 0 0;padding:var(--s2) var(--s3);border-radius:var(--r1);
  background:var(--sink);border:1px solid var(--line2);font-size:var(--fs2);color:var(--warn)}
.stale .btn{margin-left:var(--s3)}

/* ④확정값 — 4-d (26.09.14, mockups/screens-4d-확정값.html 승인) */
/* 평점 합계 줄 — 표의 마지막 줄이라 위에 선을 하나 더 긋는다 */
.tb tr.sum td{font-weight:var(--w3);color:var(--hq);background:var(--head);
  box-shadow:inset 0 1px 0 var(--line2)}
/* 화면이 센 값 — 고치면 옅은 표시를 뗀다 */
.tb input.cell.auto,.fld input.auto{color:var(--ink3);font-style:italic}
/* 평점표 등급 — 고르는 칸 옆에 가중치를 곱한 점수를 보인다(26.09.28 사용자) */
.tb .grade{display:flex;align-items:center;justify-content:center;gap:var(--s2)}
.tb .grade select{width:64px}
.tb .grade span{min-width:40px;text-align:right;color:var(--ink2)}
/* 가중치 — 화살표로 고친다. 합이 100 이 아니면 합계 칸을 경고색으로 둔다 */
.tb input.cell.wt{width:72px;text-align:center}
.tb .wt-warn{color:var(--warn)}
.tb em.wt-warn{font-style:normal;margin-left:var(--s2)}
.flds.w-peer{grid-template-columns:repeat(4,1fr)}
/* 확정값 저장을 막은 까닭 — 단추 옆 한 줄(26.09.28) */
.fix-msg{font-size:var(--fs2);color:var(--warn);margin-right:var(--s2)}
/* 고른 비교단지의 최소 정보 한 줄 — 입주 · 세대수 · 거리 · 전용 · 평당가 */
.peer-info{margin-top:var(--s1);min-height:var(--lh2);font-size:var(--fs2);color:var(--calm)}
.flds.w-price{grid-template-columns:repeat(6,minmax(0,1fr))}   /* 평당가 기준을 맨 앞에 둔다(26.09.29 사용자) */
/* ⑥ 분양가 — 평점표 아래 한 줄에 제안가 · 분양가를 나란히 둔다(26.09.30 사용자) */
.fix-row{margin-top:var(--s3);align-items:stretch}
.fix-row .grp{margin-top:0;height:100%}
.pane .flds.w-price{grid-template-columns:repeat(3,minmax(0,1fr))}
.flds.w-terms{grid-template-columns:2fr 1fr;margin-top:var(--s3)}
.flds.w-concl{grid-template-columns:repeat(2,1fr)}
.fld textarea.tall{height:96px}

/* ④확정값 요약 탭 — 장마다 두 줄 (26.09.14 · 21-2 함정 11) */
.flds.w-head{grid-template-columns:repeat(2,1fr)}
.fld label em{font-style:normal;color:var(--calm);margin-left:var(--s1)}
.fld label em.over{color:var(--warn);font-weight:var(--w2)}   /* 입지 4문구 줄 글자 수 넘침(26.09.30) */

/* 다음 단추 — 못 넘어갈 때 남은 일(26.09.30 사용자 · mockups/screens-4h-다음단추팝업.html 승인) */
.nudge-veil{position:fixed;inset:0;background:var(--veil);display:flex;align-items:center;justify-content:center;z-index:40}
.nudge{width:440px;max-width:calc(100vw - var(--s6));background:var(--card);border-radius:var(--r2);
  box-shadow:var(--lift);padding:var(--s5)}
.nudge h3{margin:0 0 var(--s3);font-size:var(--fs4);font-weight:var(--w3);color:var(--hq)}
.nudge ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.nudge li{display:flex;gap:var(--s2);font-size:var(--fs3);color:var(--ink)}
.nudge li::before{content:'';flex:none;width:6px;height:6px;margin-top:9px;border-radius:var(--r3);background:var(--warn)}
.nudge .bar{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s5)}
/* 요약은 PPT 에서 한 줄이다 — 칸도 한 줄로 둔다(세로를 아낀다) */
.fld textarea.one{height:38px}

/* ⑤산출 — 4-e (26.09.14, mockups/screens-4e-산출.html 승인) */
.flds.w-out{grid-template-columns:repeat(5,minmax(0,1fr))}   /* 1fr 은 칸 글자 폭 아래로 안 줄어 카드 밖으로 넘쳤다(26.09.29) */
/* 칸 줄 아래 표는 한 칸 띄운다 — 붙으면 표 머리가 칸의 일부처럼 보인다 */
.grp .flds + .tb{margin-top:var(--s4)}
/* ── 구역 — 제목을 왼쪽 기둥으로 눕힌다 (26.09.14 사용자 · 안 2) ────────
   제목이 한 줄을 통째로 먹던 것을 없애고 그 세로를 칸이 쓴다.
   목업 `mockups/grp-batch-2an.html` 에서 재 보니 구역 셋이 291 → 251px 로 줄었다.
   화면지침 1장 「가로를 채우고 세로를 아낀다」. `.grp` 는 분양성 개요 화면에만 있다. */
.grp{border:1px solid var(--line);border-radius:var(--r2);margin-top:var(--s3);
  display:grid;grid-template-columns:var(--w-grptitle) 1fr;
  column-gap:var(--s4);row-gap:var(--s3);padding:var(--s3) var(--s4)}
.grp > .ch{grid-column:1;grid-row:1;margin:0;font-size:var(--fs2);
  align-items:flex-start;padding-top:var(--s1)}
.grp > *:not(.ch){grid-column:2}

/* 제목 줄에 단추를 단 구역은 기둥이 좁아 눕히지 않는다 — 「상품」 하나다 */
.grp:has(.ch .btn){display:block;padding:var(--s4)}
.grp:has(.ch .btn) > .ch{margin:0 0 var(--s3);font-size:var(--fs4);padding-top:0}
/* 제목이 없는 구역은 기둥을 비워 두지 않는다 — ③지도의 입지 4문구(26.09.27 사용자) */
.grp:not(:has(> .ch)){display:block}
.grp:first-child{margin-top:0}
.flds.c7{grid-template-columns:repeat(7,1fr)}
.fld textarea{width:100%;height:64px;resize:vertical;font-family:inherit;font-size:var(--fs3);
  color:var(--ink);background:var(--sink);border:1px solid var(--line2);border-radius:var(--r1);
  padding:7px var(--s2)}
.fld textarea::placeholder,.fld input::placeholder{color:var(--calm)}
.btn:disabled{color:var(--calm);border-color:var(--line2);background:var(--sink);cursor:default}
.btn.go.off,.btn.go.off:hover{color:var(--calm);border-color:var(--line2);background:var(--sink);font-weight:var(--w2);cursor:pointer}   /* 회색이어도 누르면 남은 일이 뜬다(26.09.30) */
.tb tr.hardened{color:var(--calm)}
.tb tr.hardened b{font-weight:var(--w2);color:var(--calm)}
.pane-lbl{font-size:var(--fs2);font-weight:var(--w2);color:var(--ink3);margin-bottom:var(--s2)}
/* 요약 칸 — 한 칸에 두 줄. 남는 가로를 값으로 채운다(화면지침 8.2) */
.tb td.sum{line-height:1.35}
.tb td.sum em{display:block;font-style:normal;font-size:var(--fs2);color:var(--ink3)}
/* ①개요 본문은 좌우 2단이다 — 가로를 채우고 세로를 아낀다(화면지침 1장) */
.ov{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:start}
.ov>div{min-width:0}
.ov .grp{margin-top:var(--s3)}
.ov .grp:first-child{margin-top:0}
/* 칸 폭은 값 길이에 맞춘다. 균등하게 펴면 짧은 값 옆이 뜬다 */
/* 날짜는 2026-09-13 열 글자가 다 보여야 한다 — 좁으면 잘린다(26.09.14 실측) */
/* 표지 · 위치는 두 줄이다 — 긴 값 하나를 위에 펴고 짧은 셋을 아래 줄에 둔다 (26.09.22 사용자) */
.flds.w-cover{grid-template-columns:2fr 1fr 1fr}
.flds.w-cover > :first-child{grid-column:1 / -1}
.flds.w-place{grid-template-columns:.8fr 1.2fr 1.6fr}
.flds.w-place > :first-child{grid-column:1 / -1}
.flds.w-size{grid-template-columns:repeat(4,1fr)}
.flds.w-pick{grid-template-columns:repeat(4,1fr)}
/* ③지도 — 왼쪽에서 지도를 탭으로 하나씩 보고 오른쪽에서 입지 4문구를 쓴다 (26.09.22 사용자) */
/* 셋을 쌓으면 판이 한 화면을 넘어 탭으로 갈랐다(화면지침 1장) */
.mapshots .shot{position:relative;margin-top:var(--s3);border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden}
/* 지도 상자와 글 상자의 위아래를 맞춘다 — 탭 줄은 지도 위에 두고 글 상자는 지도와 같은 줄에 앉힌다(26.09.27 사용자) */
.ov:has(> .mapshots){grid-template-rows:auto 1fr;align-items:stretch}
.ov > .mapshots{display:contents}
.ov > .mapshots > .tabs{grid-column:1;grid-row:1}
.ov > .mapshots > .shot{grid-column:1;grid-row:2;margin-top:0}
.ov:has(> .mapshots) > .grp{grid-column:2;grid-row:2;margin-top:0}
.mapshots img{display:block;width:100%;height:auto}
/* 주변 인프라 지도 위 시설 이름 — 점과 이름표. 오른쪽 끝의 이름표는 점 왼쪽에 붙인다(26.09.28 사용자) */
.mapshots .pin{position:absolute;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;
  background:var(--ser1);border:2px solid var(--card)}
.mapshots .tag{position:absolute;transform:translate(8px,-50%);white-space:nowrap;padding:1px var(--s1);
  font-size:var(--fs2);line-height:var(--lh1);color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r1)}
.mapshots .tag.lf{transform:translate(calc(-100% - 8px),-50%)}
.mapshots .tag.hl{border-color:var(--red);font-weight:700}
.mapshots .tag em{font-style:normal;color:var(--calm);margin-left:var(--s1)}
.mapshots .none{padding:var(--s7) var(--s3);text-align:center;font-size:var(--fs3);color:var(--calm)}
/* ④차트 — 아홉을 셋씩 세 줄로 그려 놓고 눌러서 고른다 (26.09.22 사용자) */
/* 앞서 ①개요의 칩 한 줄이던 자리다. 그림 없이 이름만 보고 골랐다 */
.chartgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.chartgrid figure{margin:0;padding:var(--s3);background:var(--card);cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r2)}
.chartgrid figure.on{border-color:var(--red);background:var(--red1)}
.chartgrid figcaption{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);
  font-size:var(--fs3);font-weight:var(--w2);color:var(--ink)}
.chartgrid figcaption em{font-style:normal;margin-left:auto;
  font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3)}
.chartgrid .no{font-style:normal;font-size:var(--fs1);font-weight:var(--w2);
  color:var(--card);background:var(--red);border-radius:var(--r3);padding:0 5px}
.chartgrid .no:empty{display:none}
/* 두 계열 범례 — 네모는 막대, 가는 줄은 선이다(26.09.27 사용자) */
.chartgrid .lg{display:flex;align-items:center;gap:var(--s1);
  font-size:var(--fs1);font-weight:var(--w1);color:var(--ink3)}
.chartgrid .lg i{width:8px;height:8px;background:var(--ser1)}
.chartgrid .lg i.s1{height:2px;margin-left:var(--s2);background:var(--ser2)}
.chartgrid .cv{display:block;width:100%;height:120px}
/* 계열 색은 보고서 정본과 같다 — 기둥은 네이비다. 레드는 계열 3이라 여기 안 쓴다 */
.chartgrid rect.s0{fill:var(--ser1)}
.chartgrid rect.s1{fill:var(--ser2)}
.chartgrid circle.s0{fill:var(--ser1)}
.chartgrid circle.s1{fill:var(--ser2)}
.chartgrid polyline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linejoin:round}
.chartgrid polyline.s0{stroke:var(--ser1)}
.chartgrid polyline.s1{stroke:var(--ser2)}
.chartgrid line.gd{stroke:var(--hair);stroke-width:1;vector-effect:non-scaling-stroke}
.chartgrid .vl{display:flex;font-size:var(--fs1);font-variant-numeric:tabular-nums;
  margin-bottom:var(--s1);font-weight:var(--w2);color:var(--ink2)}
.chartgrid .lb{display:flex;font-size:var(--fs1);font-variant-numeric:tabular-nums;
  margin-top:var(--s1);color:var(--calm)}
.chartgrid .vl span,.chartgrid .lb span{flex:1;text-align:center}
.chartgrid .none{padding:var(--s6) 0;text-align:center;font-size:var(--fs2);color:var(--calm)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{font-family:inherit;font-size:var(--fs2);font-weight:var(--w2);color:var(--ink3);
  background:var(--sink);border:1px solid var(--line2);border-radius:var(--r3);
  padding:5px 10px;cursor:pointer;display:flex;align-items:center;gap:4px}
.chip.on{color:var(--hq);font-weight:var(--w3);background:var(--card);border-color:var(--red)}
.chip:disabled{cursor:default}
.chip i{font-style:normal;font-size:var(--fs1);font-weight:var(--w2);letter-spacing:var(--ls3);
  color:var(--card);background:var(--calm);border-radius:var(--r3);padding:0 5px}
.chip.on i{background:var(--red)}
.reps-box{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);flex:1}
.bar em{font-style:normal;font-size:var(--fs2);color:var(--calm)}

/* PDF로 채우기 받기 창(26.09.30 사용자 · mockups/screens-4i-개요PDF.html 승인) */
.imp-veil{position:fixed;inset:0;background:var(--veil);display:flex;align-items:center;justify-content:center;z-index:40}
.imp-veil .imp{width:1080px;max-width:calc(100vw - var(--s6));max-height:calc(100vh - var(--s6));display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--r2);box-shadow:var(--lift);padding:var(--s5)}
.imp-veil .imp.narrow{width:460px}
.imp h3{margin:0;font-size:var(--fs4);font-weight:var(--w3);color:var(--hq)}
.imp .src{font-size:var(--fs2);color:var(--ink3);margin:var(--s1) 0 var(--s3)}
.imp .imp-body{overflow:auto;min-height:0}
.imp table{width:100%;border-collapse:collapse;font-size:var(--fs2)}
.imp th{text-align:left;font-weight:var(--w2);color:var(--ink3);padding:var(--s2);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.imp td{padding:var(--s2);border-bottom:1px solid var(--line2);vertical-align:top}
.imp td.k{width:120px;font-weight:var(--w2);color:var(--ink)}
.imp td.now{width:180px;color:var(--ink3)}
.imp td.new{width:250px;color:var(--ink);font-weight:var(--w2)}
.imp td.why{color:var(--ink3)}
.imp td.ok{width:52px;text-align:center}
.imp tr.diff td.new{color:var(--warn)}
.imp tr.same td{color:var(--ink3)}
.imp .tag{display:inline-block;font-size:var(--fs1);padding:0 var(--s1);border-radius:var(--r3);background:var(--bg);color:var(--ink3);margin-left:var(--s1)}
.imp .tag.wn{color:var(--warn)}
.imp .mini{border-collapse:collapse;width:auto}
.imp .mini td{padding:1px var(--s2) 1px 0;border:0;font-weight:var(--w1)}
.imp .bar{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4)}
.imp .bar .sp{flex:1}
.imp .bar em{font-style:normal;font-size:var(--fs2);color:var(--ink3)}
.imp ul.fail{margin:var(--s3) 0 0;padding-left:var(--s5);font-size:var(--fs2);color:var(--ink2)}

/* 채울 칸 강조(26.09.30 사용자 · mockups/screens-4j-채울칸강조.html 승인)
   파랑 = 담당자가 정하는 칸(f-ask · 비면 f-need) · 주황 점선 = AI · PDF 가 못 채운 빈 칸(f-miss) */
.fld.f-ask > label::after{content:'직접';margin-left:var(--s1);font-size:var(--fs1);font-weight:var(--w2);color:var(--g-ask)}
.lbrow.f-ask > label::after{content:'직접';margin-left:var(--s1);font-size:var(--fs1);font-weight:var(--w2);color:var(--g-ask)}
.fld.f-need input,.fld.f-need select,.fld.f-need textarea,td.f-need select,td.f-need input,.lbrow.f-need select{background-color:var(--g-ask-bg);border-color:var(--g-ask)}
.fld.f-miss > label::after,.fld.f-miss > .lbrow > label::after{content:'비어 있음';margin-left:var(--s1);font-size:var(--fs1);font-weight:var(--w2);color:var(--warn)}
.fld.f-miss input,.fld.f-miss select,.fld.f-miss textarea,td.f-miss input{background-color:var(--note-bg);border:1px dashed var(--warn)}
/* 자동 = 원본 · AI 가 넣은 칸(26.09.30 사용자 · 사업수지 7단계). 면은 안 칠하고 이름표만 단다 */
.fld.f-auto > label::after{content:'자동';margin-left:var(--s1);font-size:var(--fs1);font-weight:var(--w2);color:var(--g-ref)}
.fill-cnt{margin-left:var(--s2);font-size:var(--fs2);font-weight:var(--w2)}
.fill-cnt .cnt-ask{color:var(--g-ask)}
.fill-cnt .cnt-miss{color:var(--warn)}
.out-warn{margin:0 0 var(--s3);padding:var(--s3) var(--s4);background:var(--note-bg);border:1px solid var(--note-line);border-radius:var(--r2);font-size:var(--fs2);color:var(--ink2)}
.out-warn b{color:var(--warn);font-weight:var(--w2)}
.out-warn ul{margin:var(--s1) 0 0;padding-left:var(--s5)}

/* ③ 세목 지정 표의 '표준 항목' 칸 — 같은 색 넷을 칸 끝 이름표로 단다 */
.tb td.f-auto::after,.tb td.f-ask::after,.tb td.f-need::after,.tb td.f-miss::after{margin-left:var(--s1);font-size:var(--fs1);font-weight:var(--w2)}
.tb td.f-auto::after{content:'자동';color:var(--g-ref)}
.tb td.f-ask::after{content:'직접';color:var(--g-ask)}
.tb td.f-need{background:var(--g-ask-bg)}
.tb td.f-need::after{content:'확인 필요';color:var(--g-ask)}
.tb td.f-miss{background:var(--note-bg);outline:1px dashed var(--warn);outline-offset:-3px}
.tb td.f-miss::after{content:'비어 있음';color:var(--warn)}

/* ④ 계산 조건 — 왼쪽 묶음 목록 · 오른쪽 한 묶음 표(26.09.30 사용자 · mockups/screens-6b-계산조건배치.html 승인) */
#view-cond > .card.grow{min-height:360px}
.cbody{flex:1;min-height:0;display:grid;grid-template-columns:200px minmax(0,1fr)}
.cnav{border-right:1px solid var(--hair);padding:var(--s2);display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.cnav button{display:flex;align-items:center;gap:var(--s1);width:100%;padding:9px 10px;border:0;background:none;
  border-radius:var(--r2);font-family:inherit;font-size:var(--fs3);color:var(--ink2);text-align:left;cursor:pointer}
.cnav button b{flex:1;font-weight:var(--w2)}
.cnav button:hover{background:var(--hover)}
.cnav button.on{background:var(--sink);color:var(--red);box-shadow:inset 3px 0 0 var(--red)}
.cnav .n{font-size:var(--fs1);font-weight:var(--w2);padding:0 6px;border-radius:9px}
.cnav .n.k{background:var(--g-ask-bg);color:var(--g-ask)}
.cnav .n.m{background:var(--note-bg);color:var(--warn)}
.cnav .n.ok{color:var(--ink3)}
.cnav .only{display:flex;align-items:center;gap:var(--s1);margin-top:var(--s3);padding:var(--s2) 10px 0;
  border-top:1px solid var(--hair);font-size:var(--fs2);color:var(--ink2)}
.cpane{min-width:0;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
.cpane > .scroll{flex:1;min-height:0}
#cond-spec-pane .scroll{max-height:260px}
#cond-spec-empty{padding:var(--s4)}
.ctb td{white-space:normal;vertical-align:middle;padding:6px 8px}
.ctb td.it{font-weight:var(--w2)}
.ctb td.it i{display:block;margin:0}
.ctb td.src{font-size:var(--fs2);color:var(--ink3)}
.ctb input.one{width:260px;max-width:100%}
.ctb .parts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.ctb .pt{display:flex;align-items:center;gap:var(--s1);font-size:var(--fs2);color:var(--ink2)}
.ctb .pt.opt{color:var(--ink3)}
/* 입력칸 — 목업과 같은 30px 높이 · 둥근 모서리 · 흐린 단위 글(26.09.30 사용자) */
.ctb input,.ctb select{height:30px;border:1px solid var(--line2);border-radius:5px;padding:0 8px;
  font-family:inherit;font-size:var(--fs2);background:var(--card);color:var(--ink);box-sizing:border-box}
.ctb input::placeholder{color:var(--ink3)}
.ctb .pt input{width:70px}
.ctb .pt select{width:100px}
.ctb tr.c-need td{background:var(--g-ask-bg)}
.ctb tr.c-miss td{background:var(--note-bg)}
.ctb .e-need{border-color:var(--g-ask)}
.ct{display:inline-block;padding:1px 7px;border-radius:4px;font-size:var(--fs1);font-weight:var(--w2);border:1px solid}
.ct.auto{color:var(--g-ref);background:var(--g-ref-bg);border-color:var(--g-ref-ln)}
.ct.ask{color:var(--g-ask);background:var(--card);border-color:var(--g-ask)}
.ct.need{color:var(--g-ask);background:var(--g-ask-bg);border-color:var(--g-ask)}
.ct.miss{color:var(--warn);background:var(--note-bg);border:1px dashed var(--warn)}

/* ── 단계 틀(26.09.30 사용자 · mockups/screens-6c-단계틀.html 승인) ──
   왼쪽 = 이 단계 입력 · 오른쪽 = 단계 판(할 일 · 남은 칸 · 다음 조건). ① ② ④ ⑤ 가 같은 꼴이다 */
.sw{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s3)}
.sw > .main{min-height:0;display:flex;flex-direction:column;gap:var(--s3);overflow-y:auto;padding:var(--s3) 0}
.sw > .main > .card:not(.grow){flex:0 0 auto}
.sw > .main > .card.grow{flex:1;min-height:180px;display:flex;flex-direction:column}
.sw > .main > .cols{flex:1;min-height:0;gap:var(--s3);margin:0}
.side{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s4);min-height:0;overflow-y:auto;overflow-x:hidden}
.side-body{display:flex;flex-direction:column;gap:var(--s4)}
.side h4{margin:0 0 var(--s2);font-size:var(--fs2);color:var(--ink3);font-weight:var(--w2)}
.side .todo{font-size:var(--fs3);color:var(--ink);line-height:1.6}
.side .todo.s{font-size:var(--fs2);color:var(--ink2)}
.side .todo.s + .todo.s{margin-top:var(--s1)}
.side .todo b{color:var(--red)}
.side .left{display:flex;gap:var(--s2);flex-wrap:wrap}
.side .left span{font-size:var(--fs2);font-weight:var(--w2);padding:2px 8px;border-radius:9px}
.side .left .k{background:var(--g-ask-bg);color:var(--g-ask)}
.side .left .m{background:var(--note-bg);color:var(--warn)}
.side .left .ok{background:var(--sink);color:var(--ink3)}
.side dl{display:grid;grid-template-columns:84px 1fr;gap:6px var(--s2);margin:0;font-size:var(--fs2)}
.side dt{color:var(--ink3)}
.side dd{margin:0;color:var(--ink)}
.side dd.no{color:var(--warn)}
.side .next{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--hair);font-size:var(--fs2);color:var(--ink2);
  display:flex;flex-direction:column;gap:var(--s2);
  /* 판이 길면 다음 · 이전이 스크롤 밖으로 밀렸다(26.10.01 평택 대조 — 직접 입력 칸) — 판 아래에 붙인다 */
  position:sticky;bottom:calc(-1 * var(--s4));background:var(--card);padding-bottom:var(--s4);margin-bottom:calc(-1 * var(--s4))}
.side .next-btns{display:flex;gap:var(--s2)}
.side .next-btns .btn{flex:1}
.side .next-btns .btn.go{flex:2}
.side .side-chk{margin:0;padding:0}
.side .side-chk li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:var(--s2);align-items:center;padding:4px 0;font-size:var(--fs2)}
.side .side-chk li .num{text-align:right;min-width:0}
.side .side-chk li .lv{display:none}
/* ① 검토건 */
.info{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6,32px);padding:var(--s3) var(--s4);background:var(--sink);
  border-radius:var(--r2);font-size:var(--fs2);color:var(--ink2)}
.info b{color:var(--ink);font-weight:var(--w2);margin-left:var(--s2)}
.flds.form2{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5);padding:var(--s4)}
.flds.form2 .wide{grid-column:1 / -1}
.chips label{position:relative;display:flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--line2);border-radius:18px;
  font-size:var(--fs2);color:var(--ink2);background:var(--card);cursor:pointer;margin:0}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label:has(input:checked){border-color:var(--red);color:var(--red);background:var(--red1)}
.chips label:has(input:checked)::before{content:'✓'}
.chips label:has(input:disabled){cursor:default;opacity:.7}
.hintline{font-size:var(--fs2);color:var(--ink3);margin-top:var(--s2)}
.tb tr.on td{background:var(--sink)}
/* ② 파일 */
.slot{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);padding:var(--s4);align-items:stretch}
.slot .s{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.slot .s.empty{border:1px dashed var(--line2);align-items:center;justify-content:center;color:var(--ink3);text-align:center;gap:var(--s2)}
.slot .s .t{font-weight:var(--w2);color:var(--ink)}
.slot .s .m{font-size:var(--fs2);color:var(--ink3)}
.slot .s .row{display:flex;gap:var(--s2);align-items:center;font-size:var(--fs2);flex-wrap:wrap}
.slot .s .row.end{margin-top:auto}
.ch .fld.inl{display:flex;align-items:center;gap:var(--s2);margin:0}
.ch .fld.inl label{margin:0;white-space:nowrap}
.ch .fld.inl select{width:130px;height:32px}
/* ⑤ 대조 */
.flds.pick{padding:var(--s4)}
/* ③ ⑥ ⑦ 단계 판 — 고른 줄 지정 · 주요 지표 · 조정 단추(26.09.30 사용자 · 단계 틀) */
.side-sec h4 em,.side h4 em{font-style:normal;font-weight:var(--w1);margin-left:var(--s2);color:var(--calm)}
.side h4.gap{margin-top:var(--s4)}
.side .flds.stack{gap:var(--s2)}
.side-btns{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.side-btns .btn{flex:1}
.side-btns select{flex:1;height:34px;border:1px solid var(--line2);border-radius:var(--r1);background:var(--sink);padding:0 var(--s2);font-family:inherit}
.side .side-list li{flex-wrap:wrap;font-size:var(--fs2);padding:5px 0}
.side .side-list li>span{flex:1 1 60%}
.side .kpi li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);padding:6px 0;font-size:var(--fs2)}
.side .kpi li>b{font-weight:var(--w1);color:var(--ink2)}
.side .kpi .v{font-weight:var(--w3);color:var(--ink);text-align:right;white-space:nowrap}
.side .kpi .v.wn{color:var(--warn)}
.side .kpi .why{display:none}
#view-adjust .sw > .main > .cols{flex:1;min-height:0}
/* 가로 잘림 고침(26.09.30 사용자 · Chrome 전 화면 점검) — 단계 판 옆 표는 긴 글을 접는다.
   잘린 글은 마우스를 올리면 뜬다(app.js 잘린 글 풍선) */
/* 내용 칸(.lt)만 접는다 — 비고(.rm)까지 접으니 ⑦ 한 줄이 열두 줄로 늘었다(26.09.30 사용자). 비고는 한 줄 · 마우스로 전체 */
.sw .tb td.lt{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.side .side-chk li>span{white-space:normal;min-width:0}

.side .side-chk .num{min-width:0;width:auto;flex:none}
.sw .tb td.rm,#view-adjust .tb td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ⑦ 조정 다시 짬 · 단계 판과 선 맞춤(26.09.30 사용자 '잘린 것 · 판이 작다 · 위아래 선이 안 맞다')
   카드 위아래 12px(body.app .card)이 판과 어긋났다 — 틀 안에서는 gap 이 사이를 맡는다 */
body.app .sw .card{margin:0}   /* body.app .card(0,2,1) 보다 세게 */
.sw .pane{display:flex;flex-direction:column;gap:var(--s3);min-height:0;min-width:0}
.sw .pane > .card.grow{flex:1;min-height:0}
.sw .pane > .tabs,.sw > .main > .tabs{margin:0}
/* 항목 아래 곁말 — 한 줄 · 넘치면 말줄임 · 마우스로 전체 */

#view-adjust .tb td.lt i{display:block;margin:0;font-size:var(--fs1);color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-adjust .tabs em{font-style:normal;font-size:var(--fs2);color:var(--ink3)}
/* 단계 띠와 왼쪽 첫 카드 사이 12px 은 그대로 둔다(26.09.30 사용자 '기존 간격이 좋다').
   틀 안 위아래 12px 을 왼쪽 · 오른쪽 판이 똑같이 갖는다 — 판 높이를 카드에 맞춘다 */
.sw > .side{margin:var(--s3) 0}

/* ── 카드 규칙(26.09.30 사용자 · mockups/screens-6d-카드규칙.html 승인) ──
   R1 단계 이름을 카드 제목으로 다시 안 씀 · R2 한 단계 카드 하나 · 하위 탭은 머리 줄 왼쪽
   R3 동작 단추는 머리 줄 오른쪽 · R4 셈은 판에만 · R5 카드 안 상자 없음(구획은 선 + 소제목) */
.hd{flex:none;display:flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s4);border-bottom:1px solid var(--line)}
.hd .tabs{margin:0;align-self:stretch;align-items:stretch;flex:none;flex-wrap:nowrap;white-space:nowrap}
.hd .tabs button{display:flex;align-items:center}
.hd .sp{flex:1}
.hd .fld.inl{display:flex;align-items:center;gap:var(--s2);margin:0}
.hd .fld.inl label{margin:0;white-space:nowrap}
.hd .fld.inl select{width:130px;height:32px}
.hd select.s{width:110px;height:32px;appearance:none;-webkit-appearance:none;border:1px solid var(--line2);border-radius:var(--r1);
  background:var(--sink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2369737f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/12px 8px;
  padding:0 28px 0 10px;font-family:inherit;font-size:var(--fs2);color:var(--ink)}
.hd .hnote{font-style:normal;font-size:var(--fs2);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.card > .body{flex:1;min-height:0;overflow-y:auto}
.sec{padding:var(--s4)}
.sec + .sec,.sec + table,.sec + .tb{border-top:1px solid var(--line)}
.sec h3{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3);font-size:var(--fs2);font-weight:var(--w2);color:var(--ink3)}
.sec h3 em{font-style:normal;font-weight:var(--w1);color:var(--calm)}
.sec h3 .sp{flex:1}
.kv{display:flex;flex-wrap:wrap;gap:var(--s2) 40px;font-size:var(--fs3);color:var(--ink)}
.kv span{color:var(--ink3);font-size:var(--fs2);margin-right:var(--s2)}
.kv b{font-weight:var(--w2)}
.dropline{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-top:var(--s3);
  padding:var(--s3);border:1px dashed var(--line2);border-radius:var(--r2);font-size:var(--fs2);color:var(--ink3)}
.dropline .dv2{width:1px;height:16px;background:var(--line2)}
/* 판(pnl) — 카드 안에서 탭마다 바뀌는 몸 */
.pnl{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.pnl > .scroll{flex:1;min-height:0}
.pnote{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);font-size:var(--fs2);color:var(--ink3);border-bottom:1px solid var(--hair)}
.pnote .sp{flex:1}
/* ⑦ 가운데 선 두 칸 */
.two{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr}
.two > div{min-height:0;min-width:0;overflow-y:auto;display:flex;flex-direction:column}
.two > div + div{border-left:1px solid var(--line)}
/* ④ 묶음 목록 — 카드 안 선으로 가른다 */
.cbody.cb .cnav{border-right:1px solid var(--line)}
/* ⑦ 칸마다 머리 줄 — 왼쪽 '조정 항목' · 되돌리기 / 오른쪽 탭 넷 · 엑셀 */
#view-adjust .two > div{overflow:hidden}
#view-adjust .colbody{flex:1;min-height:0;overflow-y:auto}
.hd .htitle{font-size:var(--fs3);font-weight:var(--w3);color:var(--ink)}

/* 머리 줄 탭은 한 줄 고정 — 줄바꿈하면 탭 이름이 무너진다 */
#check-pnote:has(#check-tabnote:empty){display:none}

/* ── 다섯 단계(26.09.30 사용자) — 판 맨 위 세부 목록 · ⑤ 최종 결과 ── */
.side .subs{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--s3);border-bottom:1px solid var(--hair)}
.side .subs button{display:flex;align-items:center;gap:var(--s2);width:100%;padding:7px 10px;border:0;background:none;
  border-radius:var(--r2);font-family:inherit;font-size:var(--fs3);color:var(--ink2);text-align:left;cursor:pointer}
.side .subs button span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--sink);color:var(--ink3);font-size:var(--fs1);font-weight:var(--w2)}
.side .subs button:hover{background:var(--hover)}
.side .subs button.on{background:var(--sink);color:var(--red);font-weight:var(--w2);box-shadow:inset 3px 0 0 var(--red)}
.side .subs button.on span{background:var(--red);color:var(--card)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r1);overflow:hidden}
.seg button{border:0;background:var(--card);padding:5px 12px;font-family:inherit;font-size:var(--fs2);color:var(--ink2);cursor:pointer}
.seg button + button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--ink2);color:var(--card)}
.seg[hidden]{display:none}
.final-frame{width:100%;height:100%;min-height:600px;border:0;background:var(--bg)}
/* 보고서 미리보기는 안쪽(iframe) 휠 하나만 — 바깥 칸도 휠을 내 둘이 섰다(26.10.01 사용자) */
#final-report-body,#check-report-body{display:flex;overflow:hidden}
#report-list li{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs2)}
#report-list li .btn{margin-left:auto}
.cf table{border-collapse:collapse;font-size:var(--fs2)}
.cf th,.cf td{padding:5px 10px;border-bottom:1px solid var(--hair);white-space:nowrap;text-align:right}
.cf th{background:var(--head);color:var(--ink3);font-weight:var(--w2);position:sticky;top:0;z-index:1}
.cf td:first-child,.cf th:first-child{text-align:left;position:sticky;left:0;background:var(--card);z-index:2}
.cf th:first-child{background:var(--head);z-index:3}
.cf td i{font-style:normal;color:var(--ink3);font-size:var(--fs1)}
.cf tr.sum td{font-weight:var(--w3);background:var(--sink)}
.cf .scroll,.scroll.cf{overflow:auto}
/* body.app .scroll 이 가로를 숨겨(_style.css) 월 칸이 잘렸다(26.10.01 평택 91개월) — 월별 표만 가로 휠을 되살린다 */
body.app .cf .scroll,body.app .scroll.cf{overflow-x:auto}

/* 대조 — 원본 합계 직접 입력(26.09.30 사용자) */
.gman{display:flex;gap:6px;margin-top:6px}
.gman input{flex:1;min-width:0}
.gman input:first-child{flex:0 0 38%;text-align:right}

/* ── 끝낼 조건 · 막힌 다음 · AI 먼저(26.10.01 사용자 · 목업 6e P1 · P2 승인) ── */
.side .bar{height:8px;background:var(--sink);border-radius:4px;overflow:hidden;margin-bottom:var(--s2)}
.side .bar > span{display:block;height:100%;background:var(--red)}
.side .bar.full > span{background:var(--g-note)}
.side ul.cond{list-style:none;margin:0;padding:0;font-size:var(--fs2);line-height:1.9;color:var(--ink)}
.side ul.cond li::before{content:'☐ ';color:var(--red)}
.side ul.cond li.ok{color:var(--calm)}
.side ul.cond li.ok::before{content:'☑ ';color:var(--g-note)}
.side .next-btns .btn.go.wait{background:var(--sink);color:var(--ink2);border-color:var(--line2);font-weight:var(--w2);line-height:1.25}
.side .next-btns .btn.go.wait small{display:block;font-size:var(--fs1);color:var(--red);font-weight:var(--w3)}
.btn.ai{background:var(--ser1);border-color:var(--ser1);color:var(--card);font-weight:var(--w3)}
.btn.ai:hover{background:var(--ser1-hv);border-color:var(--ser1-hv)}
.btn.ai::before{content:'✦ ';color:var(--ink-on)}
.btn.ai:disabled{background:var(--sink);border-color:var(--line2);color:var(--calm)}
.btn.ai:disabled::before{color:var(--calm)}
.side .aibox{border:1px solid var(--line2);background:var(--sink);border-radius:var(--r1);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.side .aibox .t{font-size:var(--fs3);font-weight:var(--w2);color:var(--ser1)}
.side .aibox p{margin:0;font-size:var(--fs2);color:var(--ink2);line-height:1.6}
.side .aibox .btn.ai{width:100%;padding:9px 0;font-size:var(--fs3)}
.side .aibox .opt{display:flex;gap:var(--s2);align-items:center;font-size:var(--fs2);color:var(--ink3)}
.side .aibox .opt select{height:30px;font-size:var(--fs2);width:auto}

/* 세목 지정 — 탭 아래 한 줄 · AI 제안 칸 · AI 탭 수(목업 6e P3) */
.card .tabnote{display:flex;align-items:center;gap:var(--s2);padding:6px var(--s4);border-bottom:1px solid var(--hair);font-size:var(--fs2);color:var(--ink3);min-height:40px}
.card .tabnote .sp{flex:1}
.tb td.aisug{color:var(--ser1);font-weight:var(--w2)}
.tb td.aisug b{font-weight:var(--w2);color:var(--ink3);margin:0 2px}
.tb td.aisug b.lo{color:var(--warn)}
.tb td.aisug .btn.sm{padding:1px 8px;margin-left:2px}
.tb td.aisug small{display:block;color:var(--ink3);font-weight:var(--w1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs button.ai .cnt{background:var(--ser1)}

/* 단추 위계 넷(26.10.01 사용자 승인 · 목업 6e P4)
   1 다음 — 빨강 채움 · 판 아래 하나 / 2 AI — 남색 채움(.btn.ai) / 3 한꺼번에 · 고치기 — 테두리 / 4 드문 것 — 글자 단추 */
.btn.txt{border:0;background:none;padding:3px 4px;font-size:var(--fs2);color:var(--ink3);text-decoration:underline;text-underline-offset:3px}
.btn.txt:hover{background:none;color:var(--ink)}
.btn.txt:disabled{background:none;color:var(--calm)}
.side .next .btn.go.full{width:100%}

/* ① 입력 한 화면 — 파일 구획 제목 줄에 사업 시작월 · 부가세(26.10.01 사용자) */
.sec h3.hrow{display:flex;align-items:center;gap:var(--s3)}
.sec h3.hrow .fld.inl{display:flex;align-items:center;gap:var(--s2);margin:0;font-weight:var(--w1)}
.sec h3.hrow .fld.inl input,.sec h3.hrow .fld.inl select{width:130px;height:32px}

/* ① 입력 한 화면 — 세로 휠 없이(26.10.01 사용자 · 여백 · 큰 상자 줄임) */
#site-card .sec{padding:var(--s3) var(--s4)}
#site-card .sec h3{margin-bottom:var(--s2)}
#site-card .flds.site-form{grid-template-columns:2fr 1fr 1fr;gap:var(--s3) var(--s4);padding:0}
#site-card .flds.site-form .fld.wide:first-child{grid-column:auto}
#site-card .fld input,#site-card .fld select{height:34px;padding-top:0;padding-bottom:0}
#site-card #fld-compo{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3)}
#site-card #fld-compo > label{margin:0}
#site-card #fld-compo .hintline{margin:0}
#site-card .chips label{padding:3px 12px}
#site-card .tb td,#site-card .tb th{padding-top:6px;padding-bottom:6px}
#site-card .dropline{margin-top:var(--s2);padding:var(--s2)}

/* 지우는 동안 화면 전체를 덮는다(26.10.02 사용자) — app.js 화면잠금 이 aria-busy 를 켠다. inert 만으로는 잠긴 것이 안 보였다 */
body[aria-busy="true"]::after{content:attr(data-busy);position:fixed;inset:0;background:var(--veil);display:flex;align-items:center;justify-content:center;
  z-index:50;color:var(--card);font-size:var(--fs5);font-weight:600;cursor:progress}

/* 분양 사례 목록(26.10.11 사용자 목업 승인) — 검색 줄 · 실패 꼬리표.
   26.10.13 사용자 — 검색 줄을 목록 카드 안으로 옮기고 지난 공고 가져오기 칸을 뺐다. 셈은 쪽 단추 줄 왼쪽에 둔다 */
.flds.w-find{grid-template-columns:2fr 1fr 1fr 2fr 1.6fr 1.4fr auto;align-items:end}
.flds .act{display:flex;gap:var(--s2)}
.rng{display:flex;align-items:center;gap:var(--s2)}
.rng i{font-style:normal;color:var(--ink3)}
#list-scroll{margin-top:var(--s3)}
.lfoot{display:flex;align-items:center;gap:var(--s2);padding-top:var(--s3);min-height:calc(26px + var(--s3))}   /* 쪽 단추가 뜨기 전과 뒤의 높이를 같게 — 다르면 줄 수가 바뀌어 목록을 두 번 읽는다(26.10.14) */
.lfoot em{margin-right:auto;font-style:normal;font-size:var(--fs2);color:var(--ink3)}
.lfoot .pager{padding-top:0}
.lfoot .pager .all{display:none}   /* 셈은 왼쪽 em 이 갖는다 */
.fwhy{margin:var(--s2) 0 0;font-size:var(--fs2);color:var(--warn);text-align:right}
.tag.bad{background:var(--card);border:1px solid var(--red);color:var(--red)}

/* 분양 사례 단지 상세 — 26.10.11 목업 승인 */
.tabs+.scroll,.tabs+.cols{margin-top:var(--s3)}
#card-detail,#card-detail .scroll{scrollbar-gutter:stable}   /* 휠이 생겨도 내용이 옆으로 안 밀린다(26.10.13 사용자) */
#card-detail.busy>.tabs~*{opacity:.5}   /* 탭 내용이 0.3초 넘게 안 오면 앞 내용을 흐리게 둔다 */
.cols .pane.wide{flex:3}
.cols .pane.narrow{flex:2}
.pane.sep{border-left:1px solid var(--line);padding-left:var(--s4)}   /* 두 칸 사이 세로선. .side 는 다른 화면의 상자라 이름을 갈랐다(26.10.12) */
.fbtn{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s3)}
.tag.fix{margin:0 var(--s2)}
.tb tr.all td{font-weight:var(--w3);background:var(--sink)}
.tb tr.fold td{color:var(--ink3)}
.tb .lnk.fx{margin-left:var(--s3);font-size:var(--fs2)}
.fld label .lnk{font-size:var(--fs1)}
.flds.ov-a{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1.6fr)}   /* 개요 구역 — 칸 폭은 값 길이에 맞춘다(26.10.12 사용자) */
.flds.ov-b{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr)}
.flds.ov-c{grid-template-columns:repeat(3,minmax(0,1fr))}
.flds.ov-d{grid-template-columns:minmax(0,3fr) repeat(5,minmax(0,1fr))}
.flds.ov-e{grid-template-columns:repeat(6,minmax(0,1fr)) minmax(0,2fr) minmax(0,2fr) minmax(0,1fr)}   /* 두 칸 묶음은 기간 */
.ov.ov-c2 .grp{margin-top:0}
.ov .grp.full{grid-column:1 / -1}
.flds.w-tf{grid-template-columns:repeat(5,minmax(0,1fr))}
.tform{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.fld input:disabled{background:var(--hair);color:var(--calm)}
/* 분양 사례 조건과 혜택 — 26.10.12 목업 ledger-terms-v2 2안 승인 */
.tb.tv td.gname{font-weight:var(--w2);color:var(--ink2);background:var(--sink);vertical-align:middle}   /* 구역 이름 칸 */
.tb.tv tr.gl td{border-top:2px solid var(--line2)}   /* 구역 첫 줄 위 굵은 경계선 */
.tb.tv .new{background:var(--hair);padding:4px 6px}   /* 새 차수 열 옅은 바탕 */
.tb.tv th .sub{font-weight:var(--w1);color:var(--ink3)}   /* 공고 머리 아래 작은 글 */
.tb.tv th .lnk.sm{margin-left:var(--s1);font-size:var(--fs1)}   /* 차수 머리 삭제 링크 */
.tb.tv th.new input{width:56px;margin-left:var(--s1)}   /* 새 차수 머리 입력칸 */
.tb.tv tr.add td{border-top:2px solid var(--line2)}   /* 분양률 맨 아래 입력 줄 */
.tb.tv tr.add .cell.pt{width:auto;margin-right:var(--s1)}   /* 시점 고르기 옆에 개월 수 */
.tb.tv tr.add .cell.mo{width:64px}
.tb.tv td.chg{font-weight:var(--w3);color:var(--ink)}   /* 왼쪽 값과 달라진 값 굵게 */
.tb.tv td{white-space:normal}   /* 차수 열이 좁아져도 값이 다 보이게 줄을 바꾼다 */

/* 분양 사례 공고문 확인 · 올리기 — 26.10.11 목업 승인(장면 3) */
.tb tr.bad td{background:var(--red1);color:var(--red)}
.tb tr.bad input.cell,.tb tr.bad select.cell{color:var(--red)}
.tb input.cell.rt,.tb select.cell.rt{text-align:right}
.tb select.cell{width:100%;font-family:inherit;font-size:var(--fs3);color:var(--ink);background:var(--sink);
  border:1px solid var(--line2);border-radius:var(--r1);padding:3px 4px}
.pdfbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);font-size:var(--fs2);color:var(--ink3)}
.pdfbar .sp{flex:1}
.pane .scroll .pdfbar:not(:first-child){margin-top:var(--s4)}
.pdf{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  background:var(--line);border:1px solid var(--line2);border-radius:var(--r2);color:var(--ink3)}
iframe.pdf{display:block;width:100%;background:var(--card)}
.pdf .t{font-size:var(--fs4);font-weight:var(--w3);color:var(--ink2)}
.pdf .s{font-size:var(--fs3)}
.flds.w-nf{grid-template-columns:repeat(6,minmax(0,1fr))}
.flds.w-tf3{grid-template-columns:repeat(3,minmax(0,1fr))}
.thumb{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r1);background:var(--line)}

/* 분양 사례 청약 탭(26.10.12 목업 v4) — 이 표에만 건다 */
.cm-sum{display:flex;flex:none;gap:var(--s5);align-items:baseline;margin-top:var(--s3);padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--r2);font-size:var(--fs3);color:var(--ink2)}
.cm-sum b{font-size:var(--fs4);color:var(--ink);margin-left:var(--s2)}
.cm th.g{border-bottom:1px solid var(--line2)}
.cm td.short{color:var(--red);font-weight:var(--w3)}
.cm .sx{background:var(--hair)}
.cm th.sx{background:var(--line)}
.cm .gl{border-left:2px solid var(--line2)}
.cm-src{flex:none;margin-top:var(--s2);font-size:var(--fs2);color:var(--ink3)}

/* ── 화면 안 알림 한 줄(설계 24-3) — alert 를 대신한다. 오른쪽 판 맨 위, 판이 없으면 화면 맨 위 ── */
.say-line{flex:0 0 auto;margin-bottom:var(--s3);padding:var(--s2) var(--s3);white-space:pre-line;
  font-size:var(--fs2);line-height:var(--lh3);color:var(--warn);background:var(--note-bg);
  border:1px solid var(--warn-line);border-radius:var(--r1)}
.say-line.ok{color:var(--ink2);background:var(--sink);border-color:var(--line2)}