@charset "utf-8";
/* ============================================================================
   뽀바 계산기 공통 디자인
   ----------------------------------------------------------------------------
   계산기 보드 6종(간편견적·아파트·개별자재·건축자재·전기·상가)이 이 파일 하나를 쓴다.
   스킨이나 페이지 안에 <style> 을 새로 만들지 말 것 — 여기만 고치면 전부 바뀐다.

   구성
     1. 색 토큰        모든 색은 여기서만 정의한다
     2. 목록           자재·계산기 타일
     3. 계산 화면      카드 · 입력폼 · 2단 레이아웃
     4. 산출 내역      계산 화면과 결과 화면이 공용
     5. 산출 근거      〃
     6. 단가 배너      〃
     7. 저장 게이트    비회원 입력 포함
     8. 결과 화면      저장 후 보이는 화면
     9. 아파트 계산기
    10. 상가 계산기
    11. 보관함
    12. 간편견적
    13. 게시판 목록
    14. 반응형
   ============================================================================ */


/* == 1. 색 토큰 ============================================================ */
:root{
  /* 글자 */
  --c-ink:      #1c1917;   /* 본문·제목 */
  --c-ink-2:    #44403c;   /* 보조 */
  --c-ink-3:    #57534e;   /* 설명 */
  --c-mute:     #78716c;   /* 흐린 라벨 */
  --c-mute-2:   #a8a29e;   /* 가장 흐림 */

  /* 오렌지 — 뽀바 브랜드 오렌지(ppoba.css --pb-orange)와 같은 계열로 맞췄다.
     전에는 계산기만 #ea580c 를 써서 버튼(#FF6600)과 색이 어긋나 있었다. */
  --c-accent:   #FF6600;   /* = --pb-orange */
  --c-accent-d: #D2570A;   /* = --pb-deep · hover·진한 강조 */
  --c-accent-l: #FF8A3D;   /* 어두운 배경 위 강조 */
  --c-accent-x: #A8420A;   /* 합계 띠 배경 */
  --c-accent-w: #FFF1E8;   /* 연한 배경 */
  --c-accent-b: #FFD4B8;   /* 연한 테두리 */
  --c-accent-f: #FFB37A;   /* 입력 포커스 */

  /* 면·선 */
  --c-card:     #fff;
  --c-surface:  #fafaf9;   /* 카드 안쪽 옅은 면 */
  --c-line:     #e7e5e4;   /* 기본 테두리 */
  --c-line-2:   #f0efec;   /* 옅은 구분선 */
  --c-line-3:   #f5f4f2;   /* 가장 옅은 행 구분 */
  --c-tip-bg:   #fffaf4;   /* 팁·근거 배경 */
  --c-tip-line: #fde9d4;
  --c-tip-tt:   #9a5b28;   /* 팁 제목 */
  --c-on-dark:  #d6d3d1;   /* 어두운 면 위 글자·연한 테두리 */
  --c-badge:    #92400e;   /* 배지·보조 안내 글자 */

  /* 상태색 — 성공·경고·재단 범례. 2026-07-30 추가.
     ★전엔 스킨 인라인에 hex 로 흩어져 있어 토큰을 우회했다. 새 상태색이 필요하면
       여기에 이름을 만들고 쓸 것 — 인라인에 hex 를 다시 적지 말 것. */
  --c-ok:       #166534;   /* 성공 글자 */
  --c-ok-bg:    #EAF3DE;   /* 성공·온장 배경 */
  --c-ok-line:  #8FB85F;   /* 온장 테두리(재단 배치도 범례) */
  --c-warn:     #B4232A;   /* 경고·삭제 글자 */
  --c-warn-bg:  #FDF5F5;   /* 경고 배경 */
  --c-warn-line:#E6B7BA;   /* 경고 테두리 */
  --c-err:      #C0392B;   /* 입력 오류 문구 */
  --c-info:     #2563EB;   /* 안내·링크성 문구 */
  --c-btn2:     #33415A;   /* 보조 버튼 글자 */
  --c-cut-bg:   #FFE2CC;   /* 재단 칸 배경(범례) */

  /* 반경 */
  --c-r-lg: 18px;   /* 카드 */
  --c-r-md: 14px;   /* 블록 */
  --c-r-sm: 11px;   /* 버튼·입력 */
  --c-r-xs:  9px;
}


/* == 2. 목록 — 자재·계산기 타일 ============================================ */
#tkm .tkm-head{margin:4px 2px 2px}
#tkm .tkm-head h2{margin:0;font-size:21px;font-weight:900;letter-spacing:-.02em;color:var(--c-ink)}
#tkm .tkm-head p{margin:6px 0 0;font-size:13px;color:var(--c-ink-3)}
#tkm .tkm-cat{margin:22px 2px 9px;font-size:13px;font-weight:800;color:var(--c-ink-3)}

#tkm .tkm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
#tkm .tkm-tile{
  display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:72px;padding:14px;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-r-md);
  color:var(--c-ink);text-decoration:none;transition:transform .1s ease,border-color .12s
}
#tkm .tkm-tile:hover{border-color:var(--c-accent);box-shadow:0 3px 0 rgba(234,88,12,.14)}
#tkm .tkm-tile:active{transform:scale(.98)}
#tkm .tkm-tile .n{font-size:15px;font-weight:800;letter-spacing:-.01em}
#tkm .tkm-tile .u{font-size:12px;font-weight:600;color:var(--c-mute)}


/* == 3. 계산 화면 — 카드 · 입력폼 · 2단 =================================== */
/* ★카드(.mc)와 헤더(.mc .hd)는 #mm 스코프를 두지 않는다.
   아파트 물량뽀바 스킨은 #mm 없이 <section id="bo_w"><div class="mc"> 구조라,
   #mm 안에만 걸어두면 헤더가 아무 스타일 없는 맨 글자로 나온다(2026-07-30).
   본문(.bd)·입력폼 규칙은 계산기마다 레이아웃이 달라 #mm 스코프를 유지한다. */
.mc{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-r-lg);overflow:hidden}
.mc .hd{display:flex;align-items:center;gap:9px;padding:20px 26px 18px;border-bottom:1px solid var(--c-line-2)}
.mc .hd .ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;
  background:var(--c-accent-w);border-radius:10px;font-size:15px}
.mc .hd .tt{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--c-ink)}
.mc .hd .cat{margin-top:6px;font-size:14px;font-weight:600;color:var(--c-ink-2)}
#mm .mc .bd{padding:22px 26px 26px}

#mm .mc label{display:block;margin:14px 0 5px;font-size:12.5px;font-weight:700;color:var(--c-ink)}
/* ★입력칸 생김새(높이·테두리·반경·포커스)는 전역 ppoba.css 가 !important 로 담당한다.
   여기서 다시 정의하면 두 파일이 싸우고 사이트마다 입력칸이 달라 보인다. 폭만 지정. */
#mm .mc input,#mm .mc select,#mm .mc textarea{width:100%}
#mm .mc .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
#mm .mc .row3{grid-template-columns:1fr 1fr 1fr}
#mm .mc .ro{display:flex;align-items:center;height:42px;padding:0 12px;font-size:15px;font-weight:800;
  letter-spacing:-.01em;color:var(--c-accent);background:var(--c-surface);
  border:1px solid var(--c-line-2);border-radius:var(--c-r-xs)}

/* 좌 입력 · 우 산출도면(따라 내려옴). 좁은 화면은 도면이 위로 */
#mm .mc .c2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
#mm .mc .c2-form{min-width:0}
#mm .mc .c2-viz{position:sticky;top:88px;min-width:0}
#mm .mc .c2 .res{margin:0 0 14px;text-align:left}

/* 큰 숫자 결과 */
#mm .mc .res{margin:18px 0;padding:22px;text-align:center;background:var(--c-surface);
  border:1px solid var(--c-line-2);border-radius:var(--c-r-md)}
#mm .mc .res .rl{font-size:16px;font-weight:800;letter-spacing:.01em;color:var(--c-ink)}
#mm .mc .res .q{display:inline-flex;align-items:baseline;gap:5px;margin-top:8px}
#mm .mc .res .q #m_qout{font-size:48px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c-accent)}
#mm .mc .res .q .un{font-size:18px;font-weight:700;color:var(--c-accent-d)}

/* 산출식 안내 띠 */
#mm .mc .fm{display:flex;align-items:center;gap:8px;margin:2px 0 8px;padding:13px 16px;
  font-size:13px;font-weight:500;color:var(--c-on-dark);background:var(--c-ink);border-radius:var(--c-r-sm)}
#mm .mc .fm b{color:var(--c-accent-l)}
#mm .mc .spec{margin-bottom:8px;font-size:12.5px;font-weight:600;color:var(--c-ink-2)}

/* 재단 방식 선택 카드 */
#mm .ftgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
#mm .ftcard{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px 10px;
  font-family:inherit;text-align:center;cursor:pointer;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:12px;transition:border-color .12s}
#mm .ftcard svg{width:46px;height:38px;color:var(--c-mute-2)}
#mm .ftcard .ftn{font-size:12.5px;font-weight:700;color:var(--c-ink-2)}
#mm .ftcard .ftd{font-size:10.5px;line-height:1.25;color:var(--c-mute-2)}
#mm .ftcard:hover{border-color:var(--c-accent-f)}
#mm .ftcard.on{border-color:var(--c-accent);background:var(--c-accent-w);box-shadow:inset 0 0 0 1px var(--c-accent)}
#mm .ftcard.on svg{color:var(--c-accent)}
#mm .ftcard.on .ftn{color:var(--c-accent-d)}

/* 확인사항 팁 */
#mm .mc .tips{display:flex;gap:10px;margin-top:12px;padding:13px 15px;font-size:12.5px;line-height:1.7;
  color:var(--c-ink);background:var(--c-tip-bg);border:1px solid var(--c-tip-line);border-radius:12px}
#mm .mc .tips .ti{flex:none;font-size:14px;font-weight:800;line-height:1.4;color:var(--c-accent)}
#mm .mc .tips b{display:block;margin-bottom:3px;font-weight:800;color:var(--c-tip-tt)}
#mm .mc .tips ul{margin:0;padding-left:16px}
#mm .mc .tips li{margin:2px 0}

/* 저장 버튼 — 색·높이·반경은 전역 ppoba.css 의 submit 버튼 규칙(!important)이 담당.
   여기서는 계산기에서만 필요한 배치(가로 꽉 채움·위 여백)만 준다. */
#mm .savebtn{width:100%;margin-top:18px;cursor:pointer}

/* 목록으로 돌아가기 · 빈 상태 */
/* 목록으로 돌아가기 — 오른쪽 정렬(2026-07-30 사용자 요청).
   ★inline-flex + margin-left:auto 는 부모가 flex 가 아니면 안 먹는다.
     display:flex + width:max-content 로 만들어야 auto 여백이 왼쪽을 밀어낸다. */
/* ★#mm 안에만 걸면 아파트 물량뽀바 계산기(#emcalc, #mm 없음)에서 스타일이 안 먹는다.
   클래스 이름이 충분히 구체적이므로 전역으로 둔다. */
.tk-back,.mv-back{display:flex;width:max-content;margin:0 0 16px auto;
  align-items:center;gap:7px;padding:7px 13px;
  font-size:13px;font-weight:600;color:var(--c-ink-3);background:var(--c-card);
  border:1px solid var(--c-line);border-radius:var(--c-r-xs)}
#mm .tk-back:hover,#mm .mv-back:hover{border-color:var(--c-on-dark);color:var(--c-ink)}
#mm .tk-empty,#tkm .tk-empty{padding:52px 20px;text-align:center;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:var(--c-r-lg)}
#mm .tk-empty h3,#tkm .tk-empty h3{margin:0 0 6px;font-weight:800;color:var(--c-ink)}
#mm .tk-empty p,#tkm .tk-empty p{margin:0;color:var(--c-mute-2)}


/* == 4. 산출 내역 — 계산 화면과 결과 화면이 공용 ==========================
   전에는 `#mm .mc .calcv` 와 `#mm .mv-calc .calcv` 로 같은 내용이 두 벌이었다.
   `#mm .calcv` 하나면 두 화면 모두 잡는다.                                */
#mm .calcv{margin-top:16px;overflow:hidden;text-align:left;background:var(--c-card);
  border:1px solid var(--c-line-2);border-radius:12px}
#mm .calcv .ct{padding:11px 16px;font-size:12.5px;font-weight:800;letter-spacing:.02em;
  color:var(--c-ink);background:var(--c-surface);border-bottom:1px solid var(--c-line-2)}
#mm .calcv .crh{padding:7px 16px 5px;font-size:11px;font-weight:800;letter-spacing:.06em;
  color:var(--c-mute);background:var(--c-surface);border-bottom:1px solid var(--c-line-3)}
#mm .calcv .cr{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--c-line-3)}
#mm .calcv .cr .cl{display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--c-ink)}
#mm .calcv .cr .cl .clm{font-size:14px;font-weight:800;color:var(--c-ink)}
#mm .calcv .cr .cl .cls{font-size:12px;line-height:1.4;color:var(--c-ink-3)}
#mm .calcv .cr .cv{text-align:right;white-space:nowrap;font-weight:600;color:var(--c-ink)}
#mm .calcv .cr .cv b{font-size:15.5px;font-weight:800;color:var(--c-ink)}
#mm .calcv .cr.rf{padding:9px 16px;background:var(--c-surface)}
#mm .calcv .cr.rf .cl{font-size:12.5px;color:var(--c-ink-2)}
#mm .calcv .cr.rf .cv b{font-size:13px;font-weight:700}
#mm .calcv .fin{align-items:center;padding:18px;background:var(--c-accent-x);border-bottom:0}
#mm .calcv .fin .cl{font-size:15px;font-weight:700;color:var(--c-accent-b)}
#mm .calcv .fin .cv{font-size:29px;font-weight:800;letter-spacing:.01em;color:#fff}


/* == 5. 산출 근거 — 두 화면 공용 ========================================== */
#mm .basis{display:flex;gap:10px;margin-top:12px;padding:13px 15px;text-align:left;
  font-size:12.5px;line-height:1.7;color:var(--c-ink);
  background:var(--c-tip-bg);border:1px solid var(--c-tip-line);border-radius:12px}
#mm .basis .bi{flex:none;font-size:14px;font-weight:800;line-height:1.4;color:var(--c-accent)}
#mm .basis b{display:block;margin-bottom:2px;font-size:12.5px;font-weight:800;color:var(--c-ink)}
#mm .basis .sep{display:block;margin-top:5px;color:var(--c-ink-2)}


/* == 6. 단가 배너 — 두 화면 공용 ========================================== */
#mm .mc-tier,#mm .mv-tier{padding:14px 18px;background:var(--c-accent-w);
  border:1px solid var(--c-accent-b);border-radius:12px}
#mm .mc-tier{margin:14px 0 0}
#mm .mv-tier{margin:14px 28px 0}
#mm .mc-tier .mt-row,#mm .mv-tier .mt-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#mm .mc-tier .mt-ico,#mm .mv-tier .mt-ico{flex:none;font-size:15px}
#mm .mc-tier .mt-main,#mm .mv-tier .mt-main{flex:1;min-width:0;font-size:13.5px;color:var(--c-ink)}
#mm .mc-tier .mt-main b,#mm .mv-tier .mt-main b{font-weight:800;color:var(--c-accent)}
#mm .mc-tier .mt-total,#mm .mv-tier .mt-total{font-weight:800;color:var(--c-accent-x)}
#mm .mc-tier .mt-tag,#mm .mv-tier .mt-tag{flex:none;padding:3px 9px;white-space:nowrap;font-size:11px;
  font-weight:700;color:var(--c-badge);background:var(--c-card);border:1px solid var(--c-accent-b);border-radius:20px}
#mm .mc-tier .mt-promo,#mm .mv-tier .mt-promo{margin-top:8px;padding-left:25px;font-size:12px;
  line-height:1.5;color:var(--c-badge)}
#mm .mc-tier.mt-na,#mm .mv-tier.mt-na{background:var(--c-surface);border-color:var(--c-line)}
#mm .mc-tier.mt-na .mt-main,#mm .mv-tier.mt-na .mt-main{color:var(--c-mute)}
#mm .mt-link{font-weight:600;text-decoration:none;color:var(--c-accent)}


/* == 7. 저장 게이트 ======================================================== */
#mm .res-gate{padding:26px 20px;text-align:center;background:var(--c-accent-w);
  border:1px solid var(--c-accent-b);border-radius:var(--c-r-md)}
#mm .res-gate .rg-lock{font-size:30px;line-height:1}
#mm .res-gate .rg-tt{margin:10px 0 6px;font-size:16px;font-weight:800;color:var(--c-ink)}
#mm .res-gate .rg-tt b{color:var(--c-accent)}
#mm .res-gate .rg-desc{margin-bottom:16px;font-size:13px;line-height:1.6;color:var(--c-ink-3)}
#mm .res-gate .rg-desc b{color:var(--c-accent-d)}
#mm .res-gate .savebtn{margin-top:0}
#mm .res-gate .rg-note{margin-top:12px;font-size:11.5px;line-height:1.6;color:var(--c-mute)}

/* 비회원 저장 입력 — 이름·비밀번호·자동등록방지 */
#mm .res-gate .rg-guest{margin-bottom:14px;padding:13px 13px 14px;text-align:left;
  background:var(--c-card);border:1px solid var(--c-accent-b);border-radius:var(--c-r-sm)}
#mm .res-gate .rg-guest label{display:block;margin:0 0 4px;font-size:12px;font-weight:700;color:var(--c-ink-3)}
#mm .res-gate .rg-guest label+input{margin-bottom:10px}
#mm .res-gate .rg-guest input[type=text],
#mm .res-gate .rg-guest input[type=password]{width:100%}
#mm .res-gate .rg-captcha{margin-top:4px}
#mm .res-gate .rg-captcha img{max-width:100%;height:auto;vertical-align:middle}
#mm .res-gate .rg-captcha input{margin-top:6px}


/* == 8. 결과 화면 ========================================================== */
#mm .mv{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-r-lg);overflow:hidden}
#mm .mv-hd{display:flex;align-items:center;gap:9px;padding:24px 28px 20px;border-bottom:1px solid var(--c-line-2)}
#mm .mv-hd .ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;
  background:var(--c-accent-w);border-radius:10px;font-size:15px}
#mm .mv-hd h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--c-ink)}
#mm .mv-hd .meta{margin-top:3px;font-size:12.5px;font-weight:600;color:var(--c-ink-2)}

#mm .mv-res{padding:30px 28px 8px;text-align:center}
#mm .mv-res .lab{margin-bottom:10px;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--c-ink)}
#mm .mv-res .num{display:inline-flex;align-items:baseline;gap:6px}
#mm .mv-res .big{font-size:64px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--c-accent)}
#mm .mv-res .un{font-size:24px;font-weight:700;color:var(--c-accent-d)}
#mm .mv-res .sub{max-width:640px;margin:16px auto 0;padding:12px 16px;font-size:13.5px;line-height:1.6;
  color:var(--c-ink);background:var(--c-surface);border:1px solid var(--c-line-2);border-radius:var(--c-r-sm)}

#mm .mv-viz{padding:26px 28px 8px}
#mm .mv-viz .vlab{margin-bottom:16px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--c-mute)}
#mm .mv-calc{padding:0 28px}
#mm .mv-strip{display:flex;align-items:center;gap:10px;margin:22px 28px 0;padding:15px 18px;
  font-size:13px;color:var(--c-on-dark);background:var(--c-ink);border-radius:12px}
#mm .mv-strip b{color:var(--c-accent-l)}
#mm .mv-memo{margin:12px 28px 0;padding:13px 16px;font-size:13px;line-height:1.55;color:var(--c-ink);
  background:var(--c-surface);border:1px solid var(--c-line-2);border-radius:var(--c-r-sm)}

#mm .mv-act{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:22px 28px 24px}
#mm .mv-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;font-size:14px;font-weight:700;
  cursor:pointer;border-radius:10px}
#mm .mv-btn.pri{color:#fff;background:var(--c-accent);border:0}
#mm .mv-btn.pri:hover{background:var(--c-accent-d)}
#mm .mv-btn.sec{color:var(--c-ink-2);background:var(--c-card);border:1px solid var(--c-line)}
#mm .mv-btn.sec:hover{border-color:var(--c-on-dark)}
#mm .mv-note{margin-left:auto;font-size:12px;color:var(--c-ink-2)}


/* == 9. 아파트 계산기 (#emcalc) ===========================================
   방·공통벽체·면별 마감을 입력하는 화면. 다른 계산기와 마크업이 달라 별도 섹션이지만
   색·반경은 위 토큰을 그대로 쓴다(전에는 자체 변수 12개를 따로 두고 있었다).
   입력칸 생김새는 전역 ppoba.css 담당 — 여기서 다시 정의하지 않는다.

   ★폭 제한이 여기 있어야 하는 이유: ppoba.css 가 그누보드 컨테이너(#wrapper·#container)를
   `all:unset` 으로 무력화하므로 페이지에 남는 폭 상한이 없다. 상한이 없으면 넓은 모니터에서
   계산기가 화면 끝까지 늘어난다. 결과 화면(#emview)과 같은 720px 로 맞춘다 —
   입력할 때와 결과 볼 때 폭이 달라지면 안 된다. 폭을 바꾸려면 아래 한 줄만 고칠 것.     */
#emcalc{max-width:720px;margin:0 auto}
#emcalc *{box-sizing:border-box}
#emcalc button{font-family:inherit;cursor:pointer}
#emcalc table{width:100%;border-collapse:collapse}
/* ★가로·세로·높이 입력칸은 flex 로 나란히 놓인다. 폭을 주지 않으면 각 칸이 기본 211px 로
   벌어져 좁은 화면에서 둘째·셋째 칸이 밖으로 밀려난다(실제로 그렇게 잘렸었다).
   전역 ppoba.css 는 input 의 width 를 지정하지 않으므로 여기서 준다. min-width:0 이 있어야
   flex 아이템이 칸 폭보다 작게 줄어든다. */
#emcalc input,#emcalc select{width:100%;min-width:0}
#emcalc .em-cbody > div,#emcalc .em-cbody .row{min-width:0}

#emcalc .em-hd{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;
  color:#fff;background:#161D28;border-radius:12px 12px 0 0}
#emcalc .em-body{padding:16px;background:var(--c-surface);
  border:1px solid var(--c-line);border-top:0;border-radius:0 0 12px 12px}

#emcalc .em-fld{margin-bottom:12px;padding:12px;background:var(--c-card);
  border:1px solid var(--c-line-2);border-radius:10px}
#emcalc .em-fld label.tt{display:block;margin-bottom:4px;font-size:12px;color:var(--c-ink-3)}

#emcalc .em-card{margin-bottom:10px;overflow:hidden;background:var(--c-card);
  border:1px solid var(--c-line-2);border-radius:12px}
#emcalc .em-chead{display:flex;align-items:center;gap:8px;padding:9px 12px}
#emcalc .em-cbody{padding:2px 12px 12px;border-top:1px solid var(--c-line-2)}
#emcalc .em-tgl{flex-shrink:0;width:30px;height:30px;padding:0;border:none;background:none;color:var(--c-ink-3)}
#emcalc .em-tgl i{font-size:17px}
#emcalc .em-chevr{display:inline-block;transition:transform .15s}
#emcalc .em-card.collapsed .em-chevr{transform:rotate(-90deg)}
#emcalc .em-card.collapsed .em-cbody{display:none}

#emcalc .em-chips{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto;margin-right:6px;
  font-size:11px;color:var(--c-ink-3)}
#emcalc .em-chips span{padding:1px 7px;white-space:nowrap;background:var(--c-line-3);border-radius:6px}

#emcalc .em-del{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;height:30px;padding:0 12px;
  font-size:12px;font-weight:600;color:#D14343;background:#FEF5F5;
  border:1px solid #F0CFCF;border-radius:8px}
#emcalc .em-del i{font-size:14px}
#emcalc .em-del:hover{color:#B62E2E;background:#FBE3E3;border-color:#E5A9A9}

#emcalc .em-empty{padding:20px;text-align:center;font-size:13px;color:var(--c-mute-2);
  border:1.5px dashed var(--c-line);border-radius:12px}

/* 아파트 결과 화면(#emview) — 저장 후 보이는 산출서 */
#emview{max-width:720px;margin:0 auto;line-height:1.5}
#emview *{box-sizing:border-box}
#emview table{width:100%;border-collapse:collapse}
#emview .hd{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;
  color:#fff;background:#161D28;border-radius:12px 12px 0 0}
#emview .bd{padding:16px;background:var(--c-surface);
  border:1px solid var(--c-line);border-top:0;border-radius:0 0 12px 12px}
#emview .sec{margin:0 0 6px;font-size:14px;font-weight:600}
#emview .card{background:var(--c-card);border:1px solid var(--c-line-2);border-radius:12px}
#emview .lbl{padding:1px 7px;font-size:11px;border-radius:6px}
#emview .btn{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;font-size:13px;
  text-decoration:none;cursor:pointer;color:var(--c-ink);background:var(--c-card);
  border:1px solid var(--c-line);border-radius:8px}
#emview .btn.pri{font-weight:600;color:#fff;background:var(--c-accent);border-color:var(--c-accent)}
/* 자재·견적 해설 (.ppb-guide) — ppoba_guide_render() 가 찍는다.
   계산기 아래에 붙어 그 URL 자체를 실질 콘텐츠 페이지로 만든다. */
.ppb-guide{margin:28px 0 8px;padding-top:22px;border-top:1px solid var(--c-line)}
.ppb-guide .lead{margin:0 0 18px;font-size:14px;line-height:1.75;color:var(--c-ink-2)}
.ppb-guide h2{margin:22px 0 8px;font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--c-ink)}
.ppb-guide h2:first-of-type{margin-top:0}
.ppb-guide p{margin:0;font-size:13.5px;line-height:1.8;color:var(--c-ink-3)}
.ppb-guide .faq{margin:10px 0 0}
.ppb-guide .faq dt{margin-top:14px;font-size:13.5px;font-weight:800;color:var(--c-ink)}
.ppb-guide .faq dt::before{content:'Q. ';color:var(--c-accent)}
.ppb-guide .faq dd{margin:5px 0 0;font-size:13.5px;line-height:1.8;color:var(--c-ink-3)}
.ppb-guide .gnote{margin-top:22px;padding-top:14px;border-top:1px solid var(--c-line-3);
  font-size:11.5px;line-height:1.6;color:var(--c-mute)}

/* 옛 저장본 안내 (wr_7 잘림) — ppoba_calc_broken_notice() 가 찍는다 */
.ppb-broken{margin:14px 0;padding:20px 18px;text-align:center;background:var(--c-surface);
  border:1px dashed var(--c-line);border-radius:var(--c-r-md)}
.ppb-broken .bt{font-size:14.5px;font-weight:800;color:var(--c-ink)}
.ppb-broken .bs{margin-top:8px;font-size:13px;color:var(--c-ink-3)}
.ppb-broken .bm{margin-top:6px;font-size:20px;font-weight:900;color:var(--c-accent-d);
  font-variant-numeric:tabular-nums}
.ppb-broken .bd{margin:12px 0 0;font-size:11.5px;line-height:1.6;color:var(--c-mute)}
.ppb-broken .bb{display:inline-flex;align-items:center;margin-top:14px;padding:9px 16px;
  font-size:13px;font-weight:800;color:#fff;text-decoration:none;
  background:var(--c-accent);border-radius:var(--c-r-sm);box-shadow:0 2px 0 var(--c-accent-d)}

/* 내보내기 버튼 (인쇄·링크복사·내역복사) — 계산기 6종 공용. ppoba_calc_actions() 가 찍는다. */
.ppb-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 4px}
/* ★결과 화면(.mv) 안에서는 좌우 28px 를 준다.
   같은 카드 안의 .mv-act(새 견적 뽑기)가 padding:22px 28px 를 갖고 있고 견적서 sheet 도
   #qt.mv-calc 의 padding 28px 로 들여써져 있는데, 버튼줄만 패딩이 없어 28px 왼쪽으로 튀어나왔다.
   (#emview 등 다른 문맥은 자체 패딩이 있으므로 .mv 자식일 때만 적용한다) */
.mv > .ppb-actions{padding-left:28px;padding-right:28px}
.ppb-actions button{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 13px;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  color:var(--c-ink-2);background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-r-xs)}
.ppb-actions button:hover{border-color:var(--c-accent);color:var(--c-accent-d)}
.ppb-actions button i{font-size:15px}
/* ★[hidden] 을 되살린다 — 위 `display:inline-flex` 가 브라우저 기본 `[hidden]{display:none}` 을
   이겨버려서, 공유를 지원하지 않는 브라우저에서도 공유 버튼이 그대로 보였다(2026-07-30). */
.ppb-actions button[hidden]{display:none!important}
/* 공유는 대표 동작 — 맨 앞에 두는 이유가 보이도록 색으로 구분한다 */
.ppb-actions button[data-act="share"]{color:#fff;background:var(--c-accent);border-color:var(--c-accent)}
.ppb-actions button[data-act="share"]:hover{background:var(--c-accent-d);border-color:var(--c-accent-d);color:#fff}
.ppb-act-msg{font-size:12px;font-weight:700;color:var(--c-accent-d)}

/* ★인쇄 — 전 계산기 공용.
   전에는 #emview(아파트 물량뽀바) 한 곳만 커버해서, 다른 계산기는 인쇄하면
   상단바·탭바·버튼이 그대로 딸려 나왔다. 화면 요소는 전부 숨기고 내용만 남긴다. */
@media print{
  #hd,#ft,.mm-nav,header,footer,.eom-noprint,
  #emview .em-actions,.ppb-actions,.mv-act,.mv-back,.tk-back,.blist-top,
  .ppb-topbar,.ppb-tabbar,.ppb-footlinks,.ppb-foot,.res-gate,.savebtn{display:none!important}
  .ppb-wrap{max-width:100%!important;padding:0!important}
  #emview,#qt,#mm,#mm .mv{max-width:100%!important;margin:0!important;border:0!important}
  #qt .sheet,#mm .mv{box-shadow:none!important}
  /* 표가 페이지 경계에서 잘리지 않게 */
  #qt table,#emview table{page-break-inside:auto}
  #qt tr,#emview tr{page-break-inside:avoid;page-break-after:auto}
  body{background:#fff!important}
}



/* == 10. 상가 계산기 (#sg) — store.php 에서 이동 ========================= */
#sg{--o:var(--c-accent);--od:var(--c-accent-d);--line:var(--c-line);--t2:var(--c-ink-3);--muted:var(--c-mute-2);color:var(--c-ink)}
#sg .hd{background:#161D28;color:#fff;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;border-radius:14px 14px 0 0}
#sg .hd .t{font-weight:700;letter-spacing:.3px;display:flex;align-items:center;gap:9px}
#sg .hd .s{font-size:12px;color:#9AA6B6}
#sg .bd{background:#F6F7F9;border:1px solid #E9ECF1;border-top:0;border-radius:0 0 14px 14px;padding:16px}
#sg .fld{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:14px}
#sg .fld label{font-size:12px;color:var(--t2);display:block;margin-bottom:4px}
#sg input,#sg select{font-family:inherit;font-size:13px;color:#1B2330;background:#fff;border:1px solid #D7DCE4;border-radius:8px;height:36px;padding:0 8px;width:100%;box-sizing:border-box}
#sg input:focus,#sg select:focus{outline:none;border-color:var(--o);box-shadow:0 0 0 2px #FFE2CC}
#sg .cat{display:flex;align-items:center;gap:8px;margin:16px 0 8px}
#sg .cat b{font-size:14.5px}
#sg .cat .add{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
#sg .cat select{width:auto;min-width:150px;height:34px}
#sg .cat button{font-size:13px;height:34px;background:#FFF1E8;border:1px solid #FFD9BF;color:var(--od);font-weight:700;border-radius:8px;padding:0 12px;cursor:pointer;font-family:inherit;white-space:nowrap}
#sg .rows{display:flex;flex-direction:column;gap:8px}
#sg .row{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
#sg .row .r1{display:flex;align-items:center;gap:8px}
#sg .row .nm{font-size:14px;font-weight:700;flex:1;min-width:0}
#sg .row .amt{font-size:14px;font-weight:800;color:var(--o);white-space:nowrap;font-variant-numeric:tabular-nums}
#sg .row .del{border:1px solid #F0CFCF;background:#FEF5F5;height:28px;border-radius:8px;color:#D14343;padding:0 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
#sg .row .r2{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:6px;margin-top:8px}
#sg .row .r2 label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:2px}
#sg .empty{border:1.5px dashed #D7DCE4;border-radius:12px;padding:16px;text-align:center;color:var(--muted);font-size:12.5px}
#sg .sum{background:#fff;border:1px solid var(--line);border-radius:12px;margin-top:18px;overflow:hidden}
#sg .sum table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
#sg .sum th{background:#F3F1EC;color:var(--t2);font-weight:700;padding:8px 6px;font-size:11.5px}
#sg .sum td{border-top:1px solid #F3F1EC;padding:7px 6px}
#sg .sum .num{text-align:right;white-space:nowrap}
#sg .exp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
#sg .exp label{font-size:11.5px;color:var(--t2);display:flex;flex-direction:column;gap:3px}
#sg .tot{background:#161D28;color:#fff;border-radius:14px;margin-top:12px;padding:16px}
#sg .tot .ln{display:flex;justify-content:space-between;font-size:13px;color:#A9B2C0;padding:3px 0;font-variant-numeric:tabular-nums}
#sg .tot .ln.gr{color:#fff;font-weight:800;font-size:18px;border-top:1px solid #26303D;margin-top:8px;padding-top:10px}
#sg .tot .ln .adj{color:#FF9A5C}
#sg .note{font-size:11.5px;color:var(--muted);margin:12px 2px 0;line-height:1.6}

/* == 11. 보관함 (#box) — box.php 에서 이동 ================================= */
#box{max-width:520px;margin:8px auto 30px}
#box .bh{margin:4px 2px 14px;font-size:19px;font-weight:900;letter-spacing:-.02em}
#box details{margin-bottom:12px;overflow:hidden;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:16px}
#box summary{display:flex;align-items:center;gap:10px;padding:14px 16px;list-style:none;cursor:pointer;
  font-size:14.5px;font-weight:800;color:#F4F1EA;background:#161D28}
#box summary::-webkit-details-marker{display:none}
#box summary .cnt{padding:2px 9px;font-size:11.5px;font-weight:800;color:#fff;
  background:var(--c-accent);border-radius:999px}
#box summary .tg{margin-left:auto;transition:transform .15s}
#box details[open] summary .tg{transform:rotate(180deg)}
#box .rows a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;
  font-size:14px;text-decoration:none;color:var(--c-ink);border-bottom:1px solid var(--c-line-3)}
#box .rows a:last-child{border-bottom:0}
#box .rows a:hover{background:var(--c-tip-bg)}
#box .rows .nm{min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#box .rows .q{white-space:nowrap;font-weight:800;color:var(--c-accent);font-variant-numeric:tabular-nums}
#box .rows .dt{white-space:nowrap;font-size:11.5px;color:var(--c-mute-2)}
#box .empty{padding:24px;text-align:center;font-size:13px;color:var(--c-mute-2)}
#box .empty a{font-weight:800;text-decoration:none;color:var(--c-accent-d)}
#box .box-note{margin:14px 2px 0;font-size:12px;line-height:1.6;color:var(--c-mute)}
#box .box-note b{color:var(--c-ink-2)}


/* == 12. 간편견적 (#qt) ====================================================
   아파트 간편견적 — 계산 화면(write)과 결과 화면(view)이 .sheet 를 공유한다.
   색·반경은 위 토큰만 쓴다. 입력칸 생김새는 전역 ppoba.css 담당.        */
#qt{border:1px solid var(--c-line);border-radius:var(--c-r-lg);overflow:hidden;background:var(--c-card);margin-top:14px}
#qt *{box-sizing:border-box}
#qt button{font-family:inherit;cursor:pointer}
#qt .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:11px 14px;background:var(--c-surface);border-bottom:1px solid var(--c-line)}
#qt .hd .t{font-size:15px;font-weight:900;letter-spacing:-.02em;color:var(--c-ink)}
#qt .hd .s{font-size:12px;color:var(--c-mute)}
#qt .bd{padding:14px}

/* 단계 머리 */
#qt .step{display:flex;align-items:center;gap:7px;margin:20px 0 8px;font-size:14px;font-weight:900;color:var(--c-ink)}
#qt .step:first-child{margin-top:0}
#qt .step .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--c-accent);color:#fff;font-size:11px;font-weight:900}
#qt .stepdesc{margin:-2px 0 9px;font-size:12px;color:var(--c-mute);line-height:1.45}
#qt .step .allbtns{margin-left:auto;display:flex;gap:5px}
#qt .step .allbtns button{padding:4px 9px;font-size:11px;font-weight:700;color:var(--c-ink-3);
  background:var(--c-card);border:1px solid var(--c-line);border-radius:999px}
#qt .step .allbtns button:hover{border-color:var(--c-accent-b);color:var(--c-accent-d)}

/* 입력 묶음 */
#qt .fld{margin-bottom:11px}
#qt .fld label{display:block;margin-bottom:4px;font-size:12px;color:var(--c-ink-3)}
#qt .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* 칩 선택 */
#qt .chips{display:flex;flex-wrap:wrap;gap:6px}
#qt .chips button{padding:8px 12px;font-size:13px;font-weight:700;color:var(--c-ink-2);
  background:var(--c-card);border:1px solid var(--c-line);border-radius:999px}
#qt .chips button:hover{border-color:var(--c-accent-b)}
#qt .chips button.on{background:var(--c-accent-w);border-color:var(--c-accent);color:var(--c-accent-d)}
#qt .chips.sm{margin-top:7px}
#qt .chips.sm button{padding:5px 11px;font-size:12px}
#qt .chips.grade{display:grid;grid-template-columns:repeat(3,1fr)}
#qt .chips.grade button{border-radius:var(--c-r-sm);padding:10px 6px}

/* 공종 카드 */
#qt .qi{margin-bottom:8px;padding:11px 12px;background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:var(--c-r-md);opacity:.62;transition:opacity .12s,border-color .12s}
#qt .qi.on{opacity:1;background:var(--c-card);border-color:var(--c-accent-b)}
#qt .qi-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
#qt .qi-chk{display:flex;align-items:center;gap:7px;cursor:pointer;margin:0}
#qt .qi-chk input{width:17px;height:17px;flex-shrink:0;accent-color:var(--c-accent);margin:0}
#qt .qi-n{font-size:14px;font-weight:800;color:var(--c-ink)}
#qt .qi-a{font-size:14px;font-weight:900;color:var(--c-accent-d);font-variant-numeric:tabular-nums;white-space:nowrap}
#qt .qi-d{margin:3px 0 8px 24px;font-size:11.5px;color:var(--c-mute)}
#qt .qseg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
#qt .qseg button{padding:6px 4px;font-size:11.5px;font-weight:800;line-height:1.25;color:var(--c-ink-3);
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-r-xs)}
#qt .qseg button small{display:block;margin-top:1px;font-size:10px;font-weight:600;color:var(--c-mute-2)}
#qt .qseg button.on{background:var(--c-accent-w);border-color:var(--c-accent);color:var(--c-accent-d)}
#qt .qseg button.on small{color:var(--c-accent-d)}
#qt .qcnt{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--c-mute)}
#qt .qcnt button{width:24px;height:24px;font-weight:900;color:var(--c-ink-2);
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-r-xs)}
#qt .qcnt b{min-width:20px;text-align:center;font-size:13px;color:var(--c-ink)}

/* 견적서 — write·view 공용 */
#qt .sheet{border:1px solid var(--c-line);border-radius:var(--c-r-md);overflow:hidden}
#qt .sh-hd{padding:12px 13px;background:var(--c-accent-x);color:#fff}
#qt .sh-t{font-size:15px;font-weight:900;letter-spacing:.28em}
#qt .sh-m{margin-top:3px;font-size:11.5px;color:var(--c-accent-f)}
#qt table{width:100%;border-collapse:collapse}
#qt thead th{padding:7px 8px;font-size:11px;font-weight:800;color:var(--c-ink-3);
  background:var(--c-surface);border-bottom:1px solid var(--c-line)}
#qt tbody td{padding:8px;font-size:12.5px;color:var(--c-ink-2);border-bottom:1px solid var(--c-line-3)}
#qt tbody td.sp{font-size:11.5px;color:var(--c-mute)}
#qt .num{text-align:right;font-variant-numeric:tabular-nums}
#qt tbody td.b{font-weight:800;color:var(--c-ink)}
#qt tbody td.empty{padding:16px 8px;text-align:center;color:var(--c-mute-2);font-size:12.5px}
#qt .tot{padding:10px 13px;background:var(--c-surface);border-top:1px solid var(--c-line)}
#qt .tot .ln{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 0;font-size:12.5px;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
/* ★관리비율 입력칸 — 폭만 준다.
   전역 ppoba.css 가 input 에 `padding:10px 12px !important; font-size:14px !important` 를 걸어
   여기서 padding·font-size 를 줄여도 무조건 진다(두 파일이 싸우는 자리).
   그래서 48px 로 잡았더니 안쪽 여백 24px 를 빼고 24px 만 남아 "10" 이 "1" 로 잘렸다.
   여백을 이길 수 없으니 **칸을 넓혀서** 해결한다. */
#qt .tot .ln input{width:74px;margin:0 4px;text-align:right}
#qt .tot .ln.gr{margin-top:6px;padding-top:9px;border-top:1px solid var(--c-line);
  font-size:15px;font-weight:900;color:var(--c-accent-d)}
#qt .tot .ln.py{font-size:11.5px;color:var(--c-mute)}
#qt .note{margin:11px 2px 0;font-size:11.5px;line-height:1.55;color:var(--c-mute)}

/* 상세견적 전용 — 공종 카드 안의 세부 항목 체크 목록(.qt-detail) */
#qt .qseg-wrap{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
#qt .dopts{display:grid;gap:4px;margin-top:8px}
#qt .dopt{display:flex;align-items:center;gap:7px;margin:0;padding:7px 9px;cursor:pointer;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-r-xs)}
#qt .dopt.on{background:var(--c-accent-w);border-color:var(--c-accent-b)}
#qt .dopt input{width:15px;height:15px;flex-shrink:0;accent-color:var(--c-accent);margin:0}
#qt .dopt .dn{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--c-ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#qt .dopt.on .dn{color:var(--c-accent-d)}
#qt .dopt .dp{font-size:11.5px;color:var(--c-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
#qt .dopt .du{font-size:10.5px;color:var(--c-mute-2);white-space:nowrap}
#qt .dopt .dq{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
#qt .dopt .dq button{width:21px;height:21px;padding:0;font-size:12px;font-weight:900;line-height:1;
  color:var(--c-ink-2);background:var(--c-card);border:1px solid var(--c-line);border-radius:6px}
#qt .dopt .dq b{min-width:17px;text-align:center;font-size:12px;color:var(--c-ink)}
#qt .dopt .dq i{font-style:normal;font-size:10.5px;color:var(--c-mute-2)}

/* == 13. 게시판 목록 (.ppb-blist) ==========================================
   저장물을 표로 보여주는 공용 목록. 지금은 간편견적(tkquote)이 쓰고,
   다른 계산기 목록도 표로 바꿀 때 같은 마크업을 그대로 쓰면 된다.
   ★그누보드 기본 .tbl_head01 을 쓰지 않는 이유: 전역 ppoba.css 가 그 클래스를 물들이고 있어
     계산기 톤과 어긋난다. 여기서 자체 클래스로 분리해 둔다.                */
#tkm .blist-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 2px 9px}
#tkm .blist-top .cnt{font-size:12.5px;color:var(--c-mute)}
#tkm .blist-top .cnt b{color:var(--c-ink);font-weight:800}
#tkm .blist-top .newbtn{display:inline-flex;align-items:center;padding:9px 15px;font-size:13.5px;font-weight:800;
  color:#fff;text-decoration:none;background:var(--c-accent);border-radius:var(--c-r-sm);
  box-shadow:0 2px 0 var(--c-accent-d)}
#tkm .blist-top .newbtn:active{transform:translateY(2px);box-shadow:none}

#tkm .ppb-blist{border:1px solid var(--c-line);border-radius:var(--c-r-md);overflow:hidden;background:var(--c-card)}
/* ★table-layout:fixed 금지 — 고정 레이아웃에서 셀을 display:none 하면 열 너비가 한 칸씩
   밀려 제목이 찌그러진다(2026-07-29 모바일 "반…" 사고). 자동 레이아웃 + 아래 폭 규칙으로 잡는다. */
#tkm .ppb-blist table{width:100%;border-collapse:collapse}
/* 제목이 남는 폭을 전부 가져가고 안쪽에서 말줄임 — max-width:0 이 그 트릭이다 */
#tkm .ppb-blist .subj{width:100%;max-width:0}
#tkm .ppb-blist .money,#tkm .ppb-blist .dt{width:1%;white-space:nowrap}
#tkm .ppb-blist thead th{padding:9px 8px;font-size:11.5px;font-weight:800;color:var(--c-ink-3);
  background:var(--c-surface);border-bottom:1px solid var(--c-line)}
#tkm .ppb-blist tbody td{padding:11px 8px;font-size:12.5px;color:var(--c-ink-2);
  border-bottom:1px solid var(--c-line-3);vertical-align:top}
#tkm .ppb-blist tbody tr:last-child td{border-bottom:0}
#tkm .ppb-blist tbody tr:hover{background:var(--c-surface)}
#tkm .ppb-blist .dt{text-align:center;color:var(--c-mute);font-size:11.5px}
#tkm .ppb-blist .num{text-align:right;font-variant-numeric:tabular-nums}
#tkm .ppb-blist .money{font-weight:800;color:var(--c-accent-d);white-space:nowrap}
#tkm .ppb-blist .subj a{display:block;font-size:13.5px;font-weight:700;color:var(--c-ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tkm .ppb-blist .subj a:hover{color:var(--c-accent-d)}
#tkm .ppb-blist .subj .cc{display:inline-block;margin-left:5px;padding:0 6px;font-size:10.5px;font-weight:800;
  color:#fff;background:var(--c-accent);border-radius:999px}
#tkm .ppb-blist .subj .meta{margin-top:3px;font-size:11px;color:var(--c-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 현장명 입력 묶음 — 계산기 6종 공용(ppoba_calc_subject).
   ★#mm 스코프를 두지 않는다: 스킨 구조 차이로 안 먹는 사고가 반복됐다. */
.fld-subject{margin:0 0 4px}
.fld-subject label{display:block;margin:0 0 5px;font-size:12.5px;font-weight:700;color:var(--c-ink)}
.fld-subject input{width:100%}
.fld-subject label .req{display:inline-block;margin-left:5px;padding:1px 6px;font-size:10px;font-weight:800;
  color:#fff;background:var(--c-accent);border-radius:999px;vertical-align:middle}
.fld-subject .fieldhint{margin:5px 0 0;font-size:11.5px;color:var(--c-mute)}
/* 메모 입력(선택) — 아파트 계산기만 쓰지만 규격은 공용 */
.fld-memo{margin:14px 0 0}
.fld-memo label{display:block;margin:0 0 5px;font-size:12.5px;font-weight:700;color:var(--c-ink)}
.fld-memo textarea{width:100%;font-family:inherit}
/* 저장 안내문 */
.res-gate .rg-note{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--c-mute);text-align:center}
#tkm .ppb-paging{display:flex;justify-content:center;gap:4px;margin:16px 0 4px;flex-wrap:wrap}
#tkm .ppb-paging a,#tkm .ppb-paging strong{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 8px;font-size:12.5px;font-weight:700;text-decoration:none;
  color:var(--c-ink-3);background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-r-xs)}
#tkm .ppb-paging strong{color:#fff;background:var(--c-accent);border-color:var(--c-accent)}

/* == 14. 반복 조각 (유틸) ==================================================
   계산기 스킨의 인라인 style 중 여러 번 되풀이되던 것만 클래스로 뺐다.
   ★새 스타일을 여기에 계속 늘리지 말 것 — 이건 이식 잔재를 걷어내려고 둔 최소한이다.
     새로 만드는 화면은 위 섹션들의 컴포넌트 클래스를 쓴다.                    */
.ta-r{text-align:right}
.c-acc{color:var(--c-accent)}
.c-accd{color:var(--c-accent-d)}
.em-sect{font-size:12px;font-weight:700;color:var(--c-mute);margin-bottom:16px;letter-spacing:.02em}
.em-note{font-size:13.5px;color:var(--c-ink);margin-top:8px;line-height:1.6}
.em-cap{font-size:11px;color:var(--c-mute-2);margin-top:4px}
/* 내역서·견적서 표 행 — 전에는 셀마다 인라인으로 padding·border 를 붙였다 */
#emview table td,#emview table th{padding:6px 4px}
#emview table tr+tr td{border-top:1px solid var(--c-line)}

/* == 15. 반응형 ============================================================ */
@media (max-width:1080px){
  #mm .mc .c2{grid-template-columns:1fr}
  /* ★order:-1 을 쓰지 않는다 — 저장 버튼이 입력폼 위로 올라가 버린다.
     좁은 화면 순서는 "치수 입력 → 저장하고 결과 보기" 가 맞다. */
  #mm .mc .c2-viz{position:static}
}
@media (max-width:560px){
  #mm .ftgrid{grid-template-columns:repeat(2,1fr)}
  #qt .row2{grid-template-columns:1fr}
  #qt .step .allbtns{width:100%;margin-left:0;margin-top:4px}
  /* 좁은 화면에선 번호 칸을 접고 제목·금액·날짜만 남긴다 */
  /* 모바일에선 금액 칸을 숨겨 제목에 폭을 몰아준다 — 금액은 견적서를 열면 보인다.
     (자동 레이아웃이라 셀을 숨겨도 나머지 열이 정상 재배분된다) */
  #tkm .ppb-blist .money{display:none}
}
@media (max-width:520px){
  #mm .mc .row3{grid-template-columns:1fr}
}