/* ============================================================
   DESIGN MUDI — 리뉴얼 공통 스타일 (디자인 핸드오프 styles.css 이식)
   토큰 단일 소스: 여기 정의된 색/타이포/간격 외 임의 값 추가 금지
   ============================================================ */

@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url('./fonts/pretendard/PretendardVariable.woff2') format('woff2-variations');
}

:root{
  /* color */
  --ink:        #16151A;
  --ink-2:      #44424C;
  --ink-3:      #87848F;
  --ink-4:      #B7B4BC;
  --line:       #ECEAE6;
  --line-2:     #E0DDD8;
  --bg:         #FFFFFF;
  --bg-soft:    #F7F6F3;
  --bg-soft-2:  #F1EFEA;
  --dark:       #002B49;
  --dark-2:     #003D63;

  /* brand palette (D·MUDI) — theme magenta, point teal, navy */
  --coral:      #E22E8B;
  --coral-ink:  #C12775;
  --coral-deep: #99205C;
  --coral-soft: #FBD9EC;
  --coral-tint: #FDEFF7;

  --point:      #0F8FB6;
  --point-ink:  #0B7390;
  --navy:       #003153;
  --acc-green:  #0E8C65;
  --acc-yellow: #FFBA00;
  --acc-purple: #B269D2;

  --ok:         #0E8C65;

  /* type */
  --sans: "Pretendard Variable","Pretendard",-apple-system,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;

  /* shape */
  --r-sm: 8px;
  --r:    13px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(20,18,24,.05), 0 1px 1px rgba(20,18,24,.04);
  --shadow:    0 4px 16px -6px rgba(20,18,24,.14), 0 2px 6px -3px rgba(20,18,24,.08);
  --shadow-lg: 0 22px 50px -18px rgba(20,18,24,.28), 0 8px 20px -10px rgba(20,18,24,.12);

  --maxw: 1240px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
input,select,textarea{ font-family:inherit; font-size:1rem; color:var(--ink); }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--coral); color:#fff; }

.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* layout helpers */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:84px 0; }
.section-tight{ padding:56px 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.04em;
  color:var(--coral-ink); text-transform:uppercase;
}
/*.eyebrow::before{ content:""; width:18px; height:2px; background:var(--coral); border-radius:2px; }*/
.sec-title{ font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-.025em; line-height:1.12; }
.sec-sub{ color:var(--ink-3); font-size:16px; margin-top:10px; max-width:56ch; }
/* 가운데 정렬 섹션 — 폭이 제한된 본문(.sec-sub)도 블록째 가운데로 (좌측 쏠림 방지) */
.center-sec{ text-align:center; }
.center-sec .sec-sub{ margin-left:auto; margin-right:auto; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 22px; border-radius:999px; border:1px solid transparent;
  font-size:15px; font-weight:700; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .12s ease, background .18s ease, box-shadow .18s ease, border-color .18s;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--coral); color:#fff; box-shadow:0 6px 18px -6px rgba(226,46,139,.55); }
.btn-primary:hover{ background:var(--coral-ink); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-sm{ height:40px; padding:0 16px; font-size:14px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* chips / tags */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 14px; border-radius:999px;
  border:1px solid var(--line-2); background:#fff;
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  transition:all .15s ease; white-space:nowrap;
}
.chip:hover{ border-color:var(--ink-3); color:var(--ink); }
.chip[aria-pressed="true"], .chip.is-active{
  background:var(--ink); color:#fff; border-color:var(--ink);
}
.chip.coral.is-active{ background:var(--coral); border-color:var(--coral); }

/* ============================================================
   HEADER / NOTICE
   ============================================================ */
.notice{
  background:var(--ink); color:#fff; font-size:13.5px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:38px; padding:0 16px; overflow:hidden;
}
.notice .tag{
  background:var(--coral); color:#fff; font-weight:700; font-size:11px;
  padding:2px 8px; border-radius:999px; letter-spacing:.02em; flex:none;
}
.notice .msg{ white-space:nowrap; opacity:.92; overflow:hidden; text-overflow:ellipsis; animation:fadeup .5s ease; }
@keyframes fadeup{ from{ opacity:0; transform:translateY(6px); } to{ opacity:.92; transform:none; } }

.header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--line);
}
.header-in{ display:flex; align-items:center; gap:28px; height:72px; }
.header .brand{ flex-shrink:0; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.03em; font-size:21px; }
.brand .logo-img{ height:30px; width:auto; display:block; }
.footer .brand .logo-img{ height:28px; }
.nav{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav a{
  padding:9px 14px; border-radius:9px; font-size:15px; font-weight:600; color:var(--ink-2);
  transition:all .15s; position:relative; white-space:nowrap;
}
.nav a:hover{ color:var(--ink); background:var(--bg-soft); }
.nav a.active{ color:var(--coral-ink); }
.header-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:42px; height:42px; border-radius:11px; border:1px solid var(--line-2); background:#fff;
  display:grid; place-items:center; color:var(--ink-2); transition:all .15s;
}
.icon-btn:hover{ color:var(--ink); border-color:var(--ink-3); }
.hamb{ display:none; }

/* header login affordance */
.link-btn{
  display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px;
  border:none; background:transparent; color:var(--ink-2); font-weight:700; font-size:14.5px;
  border-radius:10px; transition:all .15s;
}
.link-btn:hover{ color:var(--ink); background:var(--bg-soft); }
.link-btn svg{ width:18px; height:18px; }

/* mobile nav */
.m-nav{ display:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--dark); color:#C9C6CE; padding:64px 0 40px; font-size:14px; }
.footer .brand{ color:#fff; }
.footer .brand small{ color:#6E6B76; }
/* 마지막 칸(공식 채널)은 auto — 아이콘 행 폭(190px)에 딱 맞춰 절대 줄바꿈되지 않게 한다.
   fr 로 주면 좁은 폭에서 칸이 아이콘보다 작아져 2×2 로 접힌다. */
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-grid h5{ color:#fff; font-size:13px; letter-spacing:.04em; margin:0 0 14px; font-weight:700; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.foot-grid a:hover{ color:#fff; }
.foot-legal{ padding-top:26px; color:#7C7986; font-size:12.5px; line-height:1.7; display:flex; flex-direction:column; gap:6px; }
.foot-legal b{ color:#B6B3BC; font-weight:600; }
.foot-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.foot-tel{ font-size:30px; font-weight:800; color:#fff; letter-spacing:-.02em; }
/* 대표번호 하단 안내 — 지금 응대 가능하다는 신호라 점을 살짝 깜빡인다 */
.foot-ai{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  padding:6px 12px; border-radius:999px;
  background:rgba(226,46,139,.12); border:1px solid rgba(226,46,139,.32);
  font-size:15px; font-weight:700; color:#F5A9CF; white-space:nowrap;
}
.foot-ai .dot{
  width:6px; height:6px; border-radius:50%; background:var(--coral); flex:none;
  animation:aipulse 1.8s ease-in-out infinite;
}
@keyframes aipulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (prefers-reduced-motion: reduce){
  .foot-ai .dot{ animation:none; }
}

/* 아이콘만 있는 링크의 접근성 이름 겸 크롤러용 텍스트 (화면에서만 숨긴다) */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* 공식 채널(SNS) — 네이버 '사이트 연관채널' 판단 근거가 되는 실제 아웃바운드 링크 */
/* 위 간격은 h5(margin-bottom:14px)가 준다 */
.foot-sns{ display:flex; gap:10px; flex-wrap:wrap; }
.sns-btn{
  width:40px; height:40px; border-radius:11px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  display:grid; place-items:center; color:#C9C6CE;
  transition:color .15s, background .15s, border-color .15s;
}
.sns-btn svg{ width:18px; height:18px; display:block; }
/* color 는 .foot-grid a:hover(190행)가 특이도로 이기지만 값이 같다. 명시해 둔다 */
.sns-btn:hover{ color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.32); }
.sns-btn:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }

/* ============================================================
   STAT COUNTERS
   ============================================================ */
/* 3칸은 항상 한 줄로 둔다. wrap 을 허용하면 561~580px 구간과 모바일에서 세 번째 칸만
   아래로 떨어져 '2+1' 로 깨진다. min-width:0 이라야 flex 아이템이 실제로 줄어든다. */
.stat-row{ display:flex; gap:14px; flex-wrap:nowrap; }
.stat{
  flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px 26px; position:relative; overflow:hidden;
}
.stat .label{ font-size:13.5px; color:var(--ink-3); font-weight:600; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.stat .dot{ width:7px; height:7px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 3px var(--coral-soft); }
/* clamp 하한을 34px 로 두면 561~810px 구간에서 칸(약 125px)보다 글자가 커져
   '130.4' 와 단위 '억원' 이 두 줄로 갈라진다. vw 가 실제로 값을 끌도록 하한을 낮춘다.
   810px 이상에서는 4.2vw 가 34px 을 넘으므로 기존과 동일하게 보인다. */
.stat .value{ font-size:clamp(22px,4.2vw,52px); font-weight:800; letter-spacing:-.035em; line-height:1; margin-top:14px; white-space:nowrap; }
/* 가맹점 미니홈의 '담당 지역'은 값이 데이터라 길이가 변한다('세종특별자치시' 7자).
   nowrap 이면 .stat 의 overflow:hidden 에 잘려 글자가 사라지므로 여기만 줄바꿈을 허용한다. */
#fr-stat-region{ white-space:normal; }
.stat .value .unit{ font-size:.46em; font-weight:700; color:var(--ink-3); margin-left:4px; letter-spacing:-.02em; }
.stat .auto{ position:absolute; top:18px; right:18px; font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-4); border:1px solid var(--line-2); padding:3px 7px; border-radius:999px; }

/* ============================================================
   MAP
   ============================================================ */
.mapwrap{ position:relative; }
.map-stage{
  position:relative; width:100%; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
}
.map-stage svg{ display:block; width:100%; height:auto; }
.map-grid line{ stroke:rgba(22,21,26,.05); stroke-width:1; }
.korea-fill{ fill:#ECEAE5; stroke:#D9D5CE; stroke-width:1.5; }
.korea-glow{ fill:url(#kgrad); opacity:.5; }
.pin{ cursor:pointer; }
.pin .head{ fill:var(--coral); stroke:#fff; stroke-width:2; transition:transform .15s; transform-box:fill-box; transform-origin:center; }
.pin:hover .head, .pin.active .head{ fill:var(--coral-ink); }
.pin .ring{ fill:none; stroke:var(--coral); opacity:0; }
.pin.active .ring{ animation:ringpulse 1.4s ease-out infinite; }
.pin .count{ fill:#fff; font-size:11px; font-weight:800; text-anchor:middle; }
@keyframes ringpulse{ 0%{ opacity:.5; r:8 } 100%{ opacity:0; r:26 } }
.map-legend{ position:absolute; left:18px; bottom:18px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:12.5px; box-shadow:var(--shadow-sm); }
.map-legend .row{ display:flex; align-items:center; gap:8px; color:var(--ink-2); font-weight:600; }
.map-legend .row+.row{ margin-top:6px; }

/* 홈 지도 레이아웃 (네이버 지도 임베드) — 홈은 옆 목록을 없애고 전체 폭으로 쓴다.
   폭이 넓어진 만큼 높이를 키워 마커가 몰린 지역이 눌려 보이지 않게 한다.
   ※ .home-map-grid 는 무인쇼룸 페이지에서 계속 사용한다(열 구성은 인라인으로 덮어씀). */
.home-map-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:24px; align-items:start; }
.map-stage .nmap{ width:100%; height:620px; }
/* 지도는 본문 폭보다 살짝 좁게 — 꽉 채우면 섹션 제목과 폭이 같아 여백이 없어 보인다 */
.map-stage{ max-width:1080px; margin-inline:auto; }
@media (max-width: 860px){
  .home-map-grid{ grid-template-columns:1fr; }
  .map-stage .nmap{ height:420px; }
}
@media (max-width: 560px){
  .map-stage .nmap{ height:360px; }
}

/* map detail popover/card */
.site-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:4px;
}
.site-card .nm{ font-weight:800; font-size:16px; letter-spacing:-.02em; white-space:nowrap; }
.site-card .to svg, .site-card svg{ flex:none; width:16px; height:16px; }
.site-card .meta{ font-size:13px; color:var(--ink-3); }
.site-card .to{ margin-top:8px; font-size:13px; font-weight:700; color:var(--coral-ink); display:inline-flex; gap:4px; align-items:center; }

/* ============================================================
   CASE CARDS
   ============================================================ */
.case-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.case{ display:flex; flex-direction:column; cursor:pointer; }
.case .ph{
  position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
}
.case .ph .ov{ position:absolute; inset:0; transition:transform .4s ease; }
.case:hover .ph .ov{ transform:scale(1.045); }
.case .ph .ov img{ width:100%; height:100%; object-fit:cover; }
.case .badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(22,21,26,.82); color:#fff; font-size:11.5px; font-weight:700;
  padding:5px 10px; border-radius:999px; backdrop-filter:blur(4px);
}
.case .area-badge{
  position:absolute; top:12px; right:12px; z-index:2; background:rgba(255,255,255,.92);
  color:var(--ink); font-size:11.5px; font-weight:800; padding:5px 10px; border-radius:999px;
}
.case .info{ padding:14px 2px 4px; }
.case .apt{ font-weight:800; font-size:16.5px; letter-spacing:-.02em; }
.case .sub{ font-size:13.5px; color:var(--ink-3); margin-top:3px; }
/* 소속 가맹점이 없는 사례(본사·비노출 조직)는 이 줄이 비는데, 그대로 두면 카드만
   한 줄 짧아져 그리드 행이 어긋난다. 공백 문자로 한 줄 높이를 유지한다. */
.case .sub:empty::before{ content:"\00a0"; }
.case .price{ margin-top:11px; display:flex; align-items:baseline; gap:8px; }
.case .price .total{ font-size:20px; font-weight:800; letter-spacing:-.03em; }
.case .price .per{ font-size:12.5px; color:var(--ink-4); font-weight:600; }

/* ============================================================
   비공개 시공사례 — 사진만 가리고 자재·금액은 그대로 공개한다
   ============================================================ */
/* 목록 카드의 사진 자리. 로고를 옅게 깔아 '무디 사례이긴 하다'를 남기면서
   실제 현장 사진과 헷갈리지 않게 한다. */
.case .ph.is-private{ background:var(--bg-soft); }
.case .ph.is-private .ov{ display:flex; align-items:center; justify-content:center; }
.case:hover .ph.is-private .ov{ transform:none; }   /* 확대할 사진이 없다 */
.case .ph.is-private .ov img{
  width:52%; max-width:190px; height:auto; object-fit:contain; opacity:.22;
}
.case .ph .lock-badge{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:2;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  background:rgba(255,255,255,.94); border:1px solid var(--line); color:var(--ink-3);
  font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:999px;
}

/* 상세페이지 안내 박스 */
.private-note{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px;
}
.private-note .pn-badge{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); color:var(--ink-3);
}
.private-note .pn-body{ min-width:0; }
.private-note .pn-body b{ font-size:16px; font-weight:800; letter-spacing:-.02em; }
.private-note .pn-body p{ margin:6px 0 0; font-size:14px; color:var(--ink-3); line-height:1.6; }
.private-note .pn-body p b{ font-size:inherit; color:var(--ink); }
@media (max-width:560px){
  .private-note{ padding:16px 15px; gap:11px; }
  .private-note .pn-badge{ width:36px; height:36px; }
  .private-note .pn-body b{ font-size:14.5px; }
  .private-note .pn-body p{ font-size:13px; }
}

/* photo placeholder swatches */
.ph-a{ background:linear-gradient(135deg,#E9E3DB,#D7CcBE); }
.ph-b{ background:linear-gradient(135deg,#DDE2E4,#C3CDD1); }
.ph-c{ background:linear-gradient(135deg,#E7DEDA,#D2BFB6); }
.ph-d{ background:linear-gradient(135deg,#E2E0D6,#CBC8B6); }
.ph-e{ background:linear-gradient(135deg,#E4DDE3,#CABFCB); }
.ph-f{ background:linear-gradient(135deg,#DCE3DD,#BDccc0); }
.ph-deco{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:34px 34px; }
.ph-cam{ position:absolute; inset:0; display:grid; place-items:center; color:rgba(22,21,26,.22); }

/* ============================================================
   FRANCHISE (가맹점 소개)
   ============================================================ */
.fr-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.fr{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:20px; transition:all .18s ease; cursor:pointer;
}
.fr:hover{ border-color:var(--ink); box-shadow:var(--shadow); transform:translateY(-2px); }

/* ---------- 가맹점 프로필 썸네일 ----------
   대표이미지가 인물 사진 위주라 가로 배너(21:6)로 자르면 얼굴이 잘린다.
   원형 썸네일로 통일하고, 이미지가 없는 곳(대부분)은 이니셜 배지로 대체해
   있고 없고에 따라 레이아웃이 달라지지 않게 한다. */
.fr-avatar{
  border-radius:50%; flex:none; overflow:hidden; position:relative;
  display:grid; place-items:center; background:var(--bg-soft-2);
}
/* 이미지는 이니셜 위에 덮어씌운다 — grid 자식으로 나란히 두면 원 안에서 위아래로 쪼개진다.
   원본이 사라진 이미지는 JS 가 태그를 제거해 아래의 이니셜이 그대로 드러난다. */
.fr-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.fr-avatar .ini{ font-weight:900; color:#fff; letter-spacing:-.04em; line-height:1; }

/* 목록 카드 */
.fr .fr-avatar{ width:56px; height:56px; }
.fr .fr-avatar .ini{ font-size:22px; }
/* 아바타 왼쪽 · 텍스트 오른쪽 2줄. 세로로 쌓으면 카드가 길어지고
   지역까지 빠진 지금은 빈 공간만 늘어난다. */
.fr{ display:flex; align-items:center; gap:16px; }
.fr-body{ min-width:0; flex:1; }

/* 미니홈 헤더 */
.fr-head{ display:flex; align-items:center; gap:18px; min-width:0; }
.fr-head .fr-avatar{
  width:88px; height:88px;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.fr-head .fr-avatar .ini{ font-size:32px; }
@media (max-width:560px){
  .fr-head{ gap:14px; }
  .fr-head .fr-avatar{ width:64px; height:64px; }
  .fr-head .fr-avatar .ini{ font-size:24px; }
}
.fr .nm{
  font-weight:800; font-size:16px; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
/* 담당자는 가맹점명과 같은 줄 — 굵기·크기를 낮춰 이름이 먼저 읽히게 한다 */
.fr .nm .owner{ font-size:13px; font-weight:600; color:var(--ink-3); letter-spacing:0; }
/* 건수는 '시공중 N건 / 시공완료 N건' 두 조각이라 폭이 모자랄 수 있다.
   wrap 을 열어 한 줄 우선 · 좁으면 두 줄로 접히게 한다(잘리지 않는다).
   4열(1440px)에서 여유가 6px 뿐이라 세 자리가 되면 실제로 접힌다. */
/* gap 은 4px. 6px 이면 4열(1440px)에서 필요폭이 170px 로 칸 폭과 정확히 같아져
   47곳 중 4곳이 반올림 차이로 두 줄이 되고, 그리드 행 높이가 들쭉날쭉해진다.
   4px 이면 164px 라 현재 데이터는 전부 한 줄이다(세 자리가 되면 아래 wrap 이 받는다). */
.fr .cnt{ margin-top:7px; font-size:12.5px; color:var(--ink-2); font-weight:600; display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.fr .cnt .sep{ color:var(--ink-4); font-weight:500; }
/* 무인쇼룸 운영 배지 — 운영하는 가맹점에만 세 번째 줄로 붙는다.
   이름·건수 줄에 끼우면 4열(1440px) 170px 폭에서 줄이 접히므로 따로 둔다. */
.fr .fr-sr{
  margin-top:7px; display:flex; width:fit-content; align-items:center; gap:4px;
  padding:3px 9px 3px 7px; border-radius:999px; white-space:nowrap;
  background:#FDEFF7; color:var(--coral-ink); font-size:11.5px; font-weight:700; letter-spacing:-.01em;
}
.fr .fr-sr svg{ width:13px; height:13px; flex:none; }
@media (max-width: 1024px){ .fr-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 860px){ .fr-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){
  /* 2열이면 아바타(56)와 여백을 빼고 텍스트에 55px 밖에 안 남아 가맹점명이 4줄로 접힌다.
     1열로 바꾸면 242px 를 확보해 이름·담당자·건수가 각각 한 줄에 들어간다.
     카드 높이가 186px → 96px 로 낮아져 전체 길이는 거의 그대로다. */
  .fr-grid{ grid-template-columns:1fr; }
  /* 미니홈 통계는 4칸이라 한 줄에 넣으면 칸당 62px — 지역명이 세로로 눕는다.
     .stat-row 는 홈 현황(3칸)용으로 nowrap 이므로 여기만 되돌려 2x2 로 접는다. */
  #fr-stats{ flex-wrap:wrap; }
  #fr-stats .stat{ flex:1 1 calc(50% - 7px); }
}

/* ============================================================
   가맹점 모바일 명함 (/franchise/{seq}/card)
   ============================================================ */
.namecard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; margin:0 auto; width:min(400px,100%);
}
/* 상단 밴드 — 브랜드 그라데이션 고정. 대표이미지는 아래 원형 프로필로 얹는다
   (인물 사진을 가로로 넓게 깔면 얼굴이 잘리고, 이미지 유무로 레이아웃이 갈린다) */
.nc-band{
  /* 프로필이 지름의 절반만큼 올라타므로, 밴드 높이 - 75px 이 프로필 위 여백이 된다 */
  height:124px;
  background:linear-gradient(135deg,var(--coral) 0%,var(--coral-deep) 60%,var(--navy) 100%);
}
/* 밴드 경계에 걸치는 원형 프로필 — margin-top 은 지름의 절반(밴드에 정확히 50% 걸침) */
.nc-avatar{
  position:relative; z-index:1; width:150px; height:150px; border-radius:50%;
  margin:-75px auto 0; overflow:hidden;
  display:grid; place-items:center;
  border:5px solid #fff; box-shadow:0 8px 22px -10px rgba(20,18,24,.42);
}
.nc-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.nc-avatar .ini{ color:#fff; font-size:56px; font-weight:900; letter-spacing:-.04em; line-height:1; }
.nc-body{ padding:22px 24px 20px; }   /* 위쪽은 프로필과 이름 사이 간격 */
/* 프로필이 가운데 있으므로 이름 묶음도 가운데 정렬, 연락처 목록부터 좌측 정렬로 돌아온다 */
.nc-head{ text-align:center; }
.nc-name{ font-size:24px; font-weight:800; letter-spacing:-.03em; line-height:1.2; }
/* 가맹점 정식명(.nc-org)은 가맹점명과 같은 말이라 제거됨 — 담당자 줄만 남는다 */
.nc-owner{ font-size:14px; font-weight:700; color:var(--ink-2); margin-top:6px; }
.nc-lines{ margin-top:18px; display:flex; flex-direction:column; gap:2px; }
.nc-line{
  display:flex; align-items:center; gap:10px; padding:9px 0;
  font-size:14.5px; color:var(--ink-2); border-bottom:1px solid var(--line);
}
.nc-line:last-child{ border-bottom:none; }
.nc-line svg{ width:17px; height:17px; flex:none; color:var(--coral); }
a.nc-line{ font-weight:600; }
a.nc-line:hover{ color:var(--ink); }
.nc-foot{
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12.5px; font-weight:600; color:var(--ink-3);
}
.nc-brand{ height:18px; width:auto; opacity:.85; }

/* 액션 바 — 보조 액션은 한 줄에 균등 분배, 주 액션(공유하기)은 아래 전체폭
   ※ 그리드 고정 열수는 버튼 개수(전화번호 유무로 3~5개)에 따라 빈칸이 생겨 flex 로 처리 */
.nc-actions{
  display:flex; flex-wrap:wrap; gap:8px;
  width:min(400px,100%); margin:18px auto 0;   /* 명함 카드와 같은 폭·중앙 정렬 */
}
.nc-act{
  /* 보조 액션 4개는 모두 a 태그로 맞춘다 — button 을 섞으면 내재 크기 때문에
     flex:1 1 0 을 줘도 그 칸만 넓어진다(91/91/91/103). 주 액션만 button. */
  flex:1 1 0; min-width:0; white-space:nowrap; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  height:64px; border-radius:var(--r); border:1px solid var(--line-2); background:#fff;
  font-size:12.5px; font-weight:700; color:var(--ink-2); transition:all .15s;
}
.nc-act svg{ width:19px; height:19px; }
.nc-act:hover{ border-color:var(--ink); color:var(--ink); }
.nc-act-primary{
  flex:1 1 100%; flex-direction:row; gap:8px; height:52px; font-size:14.5px;
  background:var(--coral); border-color:var(--coral); color:#fff; box-shadow:0 6px 18px -6px rgba(226,46,139,.5);
}
.nc-act-primary:hover{ background:var(--coral-ink); border-color:var(--coral-ink); color:#fff; }

/* 목록 카드의 명함 아이콘 — 카드(a.fr) 안에 링크를 중첩할 수 없어 래퍼의 형제로 띄운다 */
.fr-wrap{ position:relative; display:flex; }
/* 그리드 행 높이에 맞춰 카드가 채워지도록. display 는 .fr 의 flex 를 덮지 않게 유지한다
   (여기서 block 을 주면 특이도로 이겨서 아바타·본문이 세로로 쌓인다) */
.fr-wrap > .fr{ flex:1; }
.fr-card-btn{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:10px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.94); display:grid; place-items:center; color:var(--ink-3);
  transition:all .15s;
}
.fr-card-btn:hover{ color:var(--coral-ink); border-color:var(--coral); }
.fr-card-btn svg{ width:16px; height:16px; }

@media (max-width: 560px){
  .nc-body{ padding:18px 18px 16px; }
  .nc-name{ font-size:21px; }
  .nc-act{ min-width:calc(50% - 4px); }   /* 좁은 화면에선 보조 액션 2열로 */
}

/* ============================================================
   FILTER BAR (cases page)
   ============================================================ */
.filterbar{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm); }
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.filter-row + .filter-row{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-2); }
.filter-label{ font-size:12.5px; font-weight:800; color:var(--ink-3); width:78px; flex:none; letter-spacing:.02em; }
/* 상세필터 패널의 첫 줄에도 같은 구분선을 준다 — 부모가 달라 .filter-row + .filter-row 가 안 걸린다 */
#detail-filters > .filter-row:first-child{ padding-top:14px; border-top:1px dashed var(--line-2); }
.result-bar{ display:flex; align-items:center; justify-content:space-between; margin:28px 0 22px; flex-wrap:wrap; gap:12px; }
.result-bar .cnt b{ color:var(--coral-ink); }

/* ============================================================
   FORMS (consult / AS)
   ============================================================ */
.tabs{ display:inline-flex; padding:5px; background:var(--bg-soft-2); border-radius:999px; gap:4px; }
.tabs button{
  height:44px; padding:0 28px; border:none; background:transparent; border-radius:999px;
  font-size:15px; font-weight:700; color:var(--ink-3); transition:all .18s;
}
.tabs button.active{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:13.5px; font-weight:700; color:var(--ink-2); }
.field label .req{ color:var(--coral); margin-left:3px; }
.input, .select, .textarea{
  height:52px; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:0 16px;
  background:#fff; transition:border-color .15s, box-shadow .15s; width:100%;
}
.textarea{ height:auto; padding:14px 16px; min-height:120px; resize:vertical; line-height:1.5; }
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-soft); }
.input::placeholder, .textarea::placeholder{ color:var(--ink-4); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow-sm); }

.upload{
  border:1.5px dashed var(--line-2); border-radius:var(--r); padding:26px; text-align:center;
  color:var(--ink-3); background:var(--bg-soft); transition:all .15s; cursor:pointer;
}
.upload:hover{ border-color:var(--coral); background:var(--coral-tint); color:var(--coral-ink); }

.consent{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; background:var(--bg-soft); border-radius:var(--r); border:1px solid var(--line); }
.consent .cbx{ width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line-2); flex:none; display:grid; place-items:center; background:#fff; cursor:pointer; transition:all .15s; margin-top:1px; }
.consent .cbx.on{ background:var(--coral); border-color:var(--coral); color:#fff; }

.notebox{ background:var(--coral-tint); border:1px solid var(--coral-soft); border-radius:var(--r); padding:18px 20px; font-size:13.5px; color:var(--coral-deep); line-height:1.7; }
.notebox ul{ margin:6px 0 0; padding-left:18px; }
.notebox li{ margin:3px 0; }

/* ============================================================
   SHOWROOM
   ============================================================ */
.steps{ display:flex; gap:0; counter-reset:s; }
.step{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; color:var(--ink-4); }
.step::before{ content:""; position:absolute; top:17px; left:-50%; width:100%; height:2px; background:var(--line-2); z-index:0; }
.step:first-child::before{ display:none; }
.step .num{ width:36px; height:36px; border-radius:50%; background:#fff; border:2px solid var(--line-2); display:grid; place-items:center; font-weight:800; font-size:14px; z-index:1; transition:all .2s; }
.step .nm{ font-size:12.5px; font-weight:700; }
.step.active{ color:var(--coral-ink); }
.step.active .num{ background:var(--coral); border-color:var(--coral); color:#fff; }
.step.done{ color:var(--ink); }
.step.done .num{ background:var(--ink); border-color:var(--ink); color:#fff; }
.step.done::before, .step.active::before{ background:var(--coral); }

.cal{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal-head .mo{ font-size:18px; font-weight:800; }
.cal-nav{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2); background:#fff; display:grid; place-items:center; color:var(--ink-2); }
.cal-nav:hover{ border-color:var(--ink); color:var(--ink); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow{ text-align:center; font-size:12px; font-weight:700; color:var(--ink-3); padding:6px 0; }
.cal-cell{ aspect-ratio:1/.92; border-radius:10px; border:1px solid transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-weight:700; font-size:15px; transition:all .14s; position:relative; }
.cal-cell.day{ background:var(--bg-soft); }
.cal-cell.day:hover{ background:var(--coral-tint); }
.cal-cell.muted{ color:var(--ink-4); background:transparent; }
.cal-cell.sun{ color:#E0414E; }
.cal-cell.sat{ color:#2D6BD6; }
.cal-cell.has::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--coral); position:absolute; bottom:7px; }
.cal-cell.sel{ background:var(--coral); color:#fff!important; box-shadow:0 6px 14px -5px rgba(226,46,139,.55); }
.cal-cell.sel::after{ background:#fff; }
/* 선택된 날짜에 마우스를 올리면 .day:hover 가 배경을 연한 톤으로 덮어써
   흰 글자가 묻힌다. 선택 상태를 우선하고 hover 는 더 진한 톤으로 표현한다. */
.cal-cell.day.sel:hover{ background:var(--coral-ink); color:#fff!important; }
.cal-cell.disabled{ opacity:.32; cursor:not-allowed; }

.slot-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.slot{ height:48px; border-radius:10px; border:1px solid var(--line-2); background:#fff; font-weight:700; font-size:14px; color:var(--ink-2); transition:all .14s; }
.slot:hover:not(.taken){ border-color:var(--coral); color:var(--coral-ink); }
.slot.sel{ background:var(--coral); border-color:var(--coral); color:#fff; }
/* 선택된 시간대도 마찬가지 — :hover 의 글자색이 코랄 배경 위에 얹혀 안 보인다 */
.slot.sel:hover:not(.taken){ background:var(--coral-ink); border-color:var(--coral-ink); color:#fff; }
.slot.taken{ background:var(--bg-soft); color:var(--ink-4); cursor:not-allowed; text-decoration:line-through; }

.region-pick{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.region-card{ border:1.5px solid var(--line-2); border-radius:var(--r); padding:18px 20px; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:space-between; background:#fff; }
.region-card:hover{ border-color:var(--ink-3); }
.region-card.sel{ border-color:var(--coral); background:var(--coral-tint); }
.region-card .nm{ font-weight:800; font-size:16px; }
.region-card .sub{ font-size:12.5px; color:var(--ink-3); }

/* OTP */
.otp{ display:flex; gap:10px; }
.otp input{ width:54px; height:62px; text-align:center; font-size:24px; font-weight:800; border:1px solid var(--line-2); border-radius:10px; }
.otp input:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-soft); }

/* pill info */
.infonote{ font-size:13px; color:var(--ink-3); line-height:1.8; }
.infonote .star{ color:var(--coral); font-weight:800; }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero-slogan{ font-size:clamp(32px,5.2vw,64px); font-weight:800; letter-spacing:-.04em; line-height:1.08; }
.hero-slogan .hl{ color:var(--coral); }
.hero-lead{ font-size:clamp(16px,1.6vw,19px); color:var(--ink-2); margin-top:22px; max-width:46ch; line-height:1.6; }

/* dark hero */
.hero-dark{ background:var(--dark); color:#fff; }
.hero-dark .hero-lead{ color:#B7B4BC; }
.hero-dark .stat{ background:var(--dark-2); border-color:rgba(255,255,255,.09); }
.hero-dark .stat .value{ color:#fff; }
.hero-dark .stat .label{ color:#9D9AA4; }

/* 무인쇼룸 히어로 배치 — 좌: 카피/CTA, 우: 이용 안내.
   ※ 이전엔 .home-map-grid + 인라인 grid-template-columns 를 썼는데, 인라인이
     미디어쿼리를 이겨 모바일에서도 2단이 유지돼 카피와 CTA 가 잘게 쪼개졌다. */
.showroom-hero{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:center; gap:40px;
}
@media (max-width:860px){
  .showroom-hero{ grid-template-columns:1fr; align-items:stretch; gap:28px; }
}

/* 다크 히어로 위의 보조 CTA (무인쇼룸 → 상담신청)
   반투명 흰색 버튼은 남색 배경에 묻혀 눈에 띄지 않는다. 흰색 솔리드로 대비를 최대한 주고
   아이콘에만 코랄을 써서, 아래 예약 흐름의 코랄 버튼과 역할이 겹쳐 보이지 않게 한다. */
.hero-cta{
  display:inline-flex; align-items:center; gap:12px;
  height:54px; padding:0 14px 0 12px; border-radius:999px;
  background:#fff; color:var(--dark);
  font-size:15px; font-weight:800; letter-spacing:-.01em;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6);
  transition:transform .14s ease, box-shadow .18s ease;
}
.hero-cta .ico{
  width:32px; height:32px; border-radius:10px; flex:none;
  background:var(--coral); color:#fff; display:grid; place-items:center;
}
.hero-cta .ico svg{ width:18px; height:18px; }
.hero-cta .go{ color:var(--coral-ink); display:inline-flex; transition:transform .18s ease; }
.hero-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(0,0,0,.65); }
.hero-cta:hover .go{ transform:translateX(3px); }
.hero-cta:active{ transform:translateY(0); }
@media (max-width:560px){
  .hero-cta{ height:auto; padding:12px; font-size:14px; align-items:flex-start; border-radius:var(--r); }
  .hero-cta .go{ margin-left:auto; }
}
@media (prefers-reduced-motion: reduce){
  .hero-cta, .hero-cta .go{ transition:none; }
  .hero-cta:hover{ transform:none; }
}

/* tag line metric strip */
.metric-strip{ display:flex; gap:34px; flex-wrap:wrap; }
.metric-strip .m .v{ font-size:30px; font-weight:800; letter-spacing:-.03em; }
.metric-strip .m .l{ font-size:13px; color:var(--ink-3); font-weight:600; }

/* reveal — transition 은 첫 페인트 전 트리거 시 시작값에 멈추는 이슈가 있어 keyframes 로 구동 */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.in{ animation:revealIn .6s ease both; }
@keyframes revealIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } .reveal.in{ animation:none; } }
@media print{ .reveal{ opacity:1 !important; transform:none !important; animation:none !important; } }

/* ============================================================
   CASE DETAIL
   ============================================================ */
.crumb{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-3); font-weight:600; }
.crumb a:hover{ color:var(--ink); }
.detail-title{ font-size:clamp(26px,3.2vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.scope-tags{ display:flex; gap:7px; flex-wrap:wrap; }
.scope-tag{ font-size:12.5px; font-weight:700; color:var(--point-ink); background:#E8F4F8; border:1px solid #CDE7EF; padding:5px 11px; border-radius:999px; }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:12px; }
.gal-item{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); cursor:pointer; }
.gal-item.big{ grid-column:span 2; grid-row:span 2; }
.gal-item .ovw{ position:absolute; inset:0; transition:transform .4s ease; }
.gal-item:hover .ovw{ transform:scale(1.05); }
.gal-item .ovw img{ width:100%; height:100%; object-fit:cover; }
.gal-item .lbl{ position:absolute; left:10px; bottom:9px; font-size:11.5px; font-weight:700; color:#fff; background:rgba(22,21,26,.6); padding:3px 9px; border-radius:999px; backdrop-filter:blur(3px); }
.gal-more{ position:absolute; inset:0; background:rgba(0,49,83,.62); color:#fff; display:grid; place-items:center; font-weight:800; font-size:15px; white-space:nowrap; backdrop-filter:blur(2px); }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(10,12,16,.94); display:flex; flex-direction:column; }
.lb-top{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; color:#fff; }
.lb-stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:0 16px 30px; position:relative; }
.lb-img{ width:min(1000px,90vw); height:min(70vh,640px); border-radius:14px; overflow:hidden; position:relative; }
.lb-img img{ width:100%; height:100%; object-fit:contain; }
.lb-nav{ width:52px; height:52px; border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; cursor:pointer; flex:none; }
.lb-nav:hover{ background:rgba(255,255,255,.26); }
/* 가로 스와이프를 브라우저 기본 동작에 뺏기지 않게. 세로는 그대로 둔다. */
.lb-stage{ touch-action:pan-y; }
/* 끌 때 이미지가 선택되거나 드래그 고스트가 뜨지 않게 */
.lb-img img{ -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }

@media (max-width:560px){
  /* 화살표가 flex 자리를 차지하면 좌우로 104px 를 먹어 이미지가 그만큼 눌린다.
     모바일에서는 스와이프가 주 조작이므로 버튼을 양끝에 겹쳐 띄우고 폭을 이미지에 준다. */
  .lb-stage{ padding:0 10px 20px; }
  .lb-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:40px; height:40px; background:rgba(255,255,255,.2);
  }
  #lb-prev{ left:6px; }
  #lb-next{ right:6px; }
  .lb-img{ width:100%; height:min(64vh,560px); }
}
.lb-x{ width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; cursor:pointer; }

/* statement table */
.stmt{ width:100%; border-collapse:collapse; font-size:14px; }
.stmt thead th{ text-align:left; font-size:12.5px; font-weight:700; color:var(--ink-3); padding:11px 14px; background:var(--bg-soft); border-bottom:1px solid var(--line); white-space:nowrap; }
.stmt thead th:last-child, .stmt td.amt{ text-align:right; }
.stmt tbody td{ padding:13px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); }
.stmt tbody tr:hover{ background:var(--bg-soft); }
.stmt td.amt{ font-weight:700; color:var(--ink); white-space:nowrap; }
.stmt .catpill{ font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.cat-labor{ background:#FDEFF7; color:var(--coral-ink); }
.cat-mat{ background:#E8F4F8; color:var(--point-ink); }
.cat-etc{ background:#FFF4DB; color:#9A6B00; }
.stmt-foot{ display:flex; flex-direction:column; gap:2px; }

/* ── 그룹 테이블(자재목록·정산서) ─────────────────────────────
   rowspan 병합 셀이 '밴드'로 읽히도록 배경·경계선을 주고,
   병합으로 생기는 빈 세로 공간에는 건수/소계 메타를 채운다. */
.stmt.grouped tbody td{ border-bottom:1px solid var(--line); }
/* 1단계 그룹 (종목 / 항목) */
.stmt.grouped td.gcell{
  vertical-align:top; padding:14px; background:var(--bg-soft);
  border-right:1px solid var(--line);
}
/* 2단계 그룹 (분류) */
.stmt.grouped td.gsub{
  vertical-align:top; padding:13px 14px; background:#FCFBFA;
  border-right:1px solid var(--line);
}
.stmt.grouped .gname{ display:block; font-weight:800; color:var(--ink); line-height:1.35; word-break:keep-all; }
.stmt.grouped td.gsub .gname{ font-weight:700; color:var(--ink-2); font-size:13.5px; }
/* 메타(소계·건수)는 줄 중간에서 끊기지 않도록 각 줄 nowrap — 좁아지면 축소만 되고 깨지지 않음 */
.stmt.grouped .gmeta{ display:block; margin-top:5px; font-size:11.5px; font-weight:600; color:var(--ink-4); letter-spacing:.01em; white-space:nowrap; }
.stmt.grouped .gmeta + .gmeta{ margin-top:2px; }
.stmt.grouped td.gcell .catpill{ display:inline-block; }
/* 그룹 시작 행 구분선 — 어디서 묶음이 바뀌는지 한눈에 */
.stmt.grouped tbody tr.gstart > td{ border-top:1px solid var(--line-2); }
.stmt.grouped tbody tr:first-child > td{ border-top:0; }
/* 병합 셀은 hover 대상에서 제외 (한 행만 칠해져 어긋나 보이는 현상 방지) */
.stmt.grouped tbody tr:hover{ background:transparent; }
.stmt.grouped tbody tr:hover > td:not(.gcell):not(.gsub){ background:var(--bg-soft); }
@media (max-width: 560px){
  .stmt.grouped tbody td, .stmt.grouped td.gcell, .stmt.grouped td.gsub{ padding:11px 10px; }
  .stmt.grouped{ font-size:13px; }
}

.detail-grid{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:32px; align-items:start; }
@media (max-width: 860px){
  .detail-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:120px; }
}
.detail-aside{ position:sticky; top:96px; }
.cost-card{ background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:26px; }
.cost-card .row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; font-size:14px; color:#AFC4D2; }
.cost-card .row b{ color:#fff; font-weight:700; }
.cost-card .total-row{ border-top:1px solid rgba(255,255,255,.16); margin-top:8px; padding-top:16px; }
.cost-card .total-row .big{ font-size:30px; font-weight:800; letter-spacing:-.03em; color:#fff; }

/* ============================================================
   모달 셸 (공통)
   ============================================================ */
.modal-scrim{
  position:fixed; inset:0; z-index:140; background:rgba(15,12,18,.55);
  backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  padding:24px; overflow:auto; animation:scrimIn .2s ease;
}
@keyframes scrimIn{ from{ opacity:0; } to{ opacity:1; } }
.modal-x{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  border:none; background:var(--bg-soft); color:var(--ink-2); display:grid; place-items:center; transition:all .15s;
}
.modal-x:hover{ background:var(--bg-soft-2); color:var(--ink); }
@keyframes cardIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }

/* ============================================================
   인증 모달 (로그인/회원가입)
   ============================================================ */
.text-link{
  background:none; border:none; padding:0; color:var(--coral-ink); font-weight:700;
  font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
}
.text-link:hover{ text-decoration:underline; }
.auth-card{
  position:relative; width:100%; max-width:432px; background:#fff; border-radius:var(--r-xl);
  padding:36px 34px 28px; box-shadow:var(--shadow-lg); max-height:92vh; overflow:auto;
  margin:auto; /* flex 중앙정렬에서 카드가 화면보다 클 때 상단 잘림 방지 */
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
  animation:cardIn .26s cubic-bezier(.2,.8,.2,1);
}
.auth-card::-webkit-scrollbar{ width:6px; }
.auth-card::-webkit-scrollbar-track{ background:transparent; margin:14px 0; }
.auth-card::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:999px; }
.auth-card::-webkit-scrollbar-thumb:hover{ background:var(--ink-4); }
.auth-head{ text-align:center; margin-bottom:22px; }
.auth-head .logo-img{ margin:0 auto 16px; height:30px; }
.auth-head h2{ font-size:21px; font-weight:800; letter-spacing:-.025em; }
.auth-head p{ font-size:13.5px; color:var(--ink-3); margin-top:7px; line-height:1.5; }
.auth-tabs{ display:flex; background:var(--bg-soft-2); border-radius:999px; padding:5px; gap:4px; margin-bottom:22px; }
.auth-tabs button{ flex:1; height:42px; border:none; background:transparent; border-radius:999px; font-weight:700; font-size:14.5px; color:var(--ink-3); transition:all .18s; }
.auth-tabs button.on{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }
.auth-form{ display:flex; flex-direction:column; gap:16px; }
.auth-foot{ text-align:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-3); }
.field-msg{ font-size:12.5px; font-weight:600; min-height:16px; }
.field-msg.ok{ color:var(--ok); }
.field-msg.err{ color:#E0414E; }
.icon-btn.logged-in{ position:relative; }
.icon-btn.logged-in::after{
  content:""; position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%;
  background:var(--coral); box-shadow:0 0 0 2px #fff;
}

/* ============================================================
   견적서 document
   ============================================================ */
.doc-scrim{ align-items:flex-start; overflow:auto; padding:0; }
.doc-shell{ width:100%; min-height:100%; display:flex; flex-direction:column; align-items:center; padding:0 0 60px; }
.doc-toolbar{
  position:sticky; top:0; z-index:5; width:100%; background:rgba(15,12,18,.92); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; color:#fff;
}
.doc-toolbar .btn-ghost{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff; }
.doc-toolbar .btn-ghost:hover{ border-color:#fff; }
.estimate-doc{
  background:#fff; width:min(820px,94vw); margin-top:30px; border-radius:8px; box-shadow:var(--shadow-lg);
  padding:52px 56px; color:var(--ink); font-size:14px;
}
.doc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:22px; border-bottom:2px solid var(--ink); }
.doc-head .doc-tag{ font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:8px; }
.doc-title-block{ text-align:right; }
.doc-title-block h1{ font-size:34px; font-weight:800; letter-spacing:.24em; padding-left:.24em; white-space:nowrap; }
.doc-meta{ margin-top:10px; font-size:12.5px; color:var(--ink-3); display:flex; flex-direction:column; gap:3px; }
.doc-meta b{ color:var(--ink); font-weight:700; }
.doc-parties{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px; }
.party{ border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; background:var(--bg-soft); }
.party-label{ font-size:11.5px; font-weight:800; letter-spacing:.06em; color:var(--coral-ink); }
.party-name{ font-size:17px; font-weight:800; letter-spacing:-.02em; margin:6px 0 12px; }
.party dl{ margin:0; display:flex; flex-direction:column; gap:6px; }
.party dl > div{ display:flex; gap:10px; font-size:12.5px; line-height:1.5; }
.party dt{ flex:none; width:64px; color:var(--ink-3); font-weight:600; }
.party dd{ margin:0; color:var(--ink-2); font-weight:600; }
.doc-summary{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:22px; padding:18px 22px; background:var(--ink); color:#fff; border-radius:var(--r); flex-wrap:wrap; }
.doc-summary .ds-amount{ font-size:28px; font-weight:800; letter-spacing:-.03em; }
.doc-summary .ds-note{ font-size:12.5px; color:rgba(255,255,255,.66); }
.doc-stmt{ margin-top:24px; }
.doc-stmt thead th{ background:var(--bg-soft-2); }
.doc-stmt tfoot td{ padding:11px 14px; font-weight:800; font-size:13px; border-bottom:1px solid var(--line); background:#fff; }
.doc-stmt tfoot .sub td:first-child{ color:var(--ink-3); }
.doc-totals{ margin-top:18px; margin-left:auto; width:min(360px,100%); }
.doc-totals .row{ display:flex; justify-content:space-between; padding:9px 0; font-size:13.5px; color:var(--ink-2); border-bottom:1px solid var(--line); }
.doc-totals .grand{ border-bottom:none; border-top:2px solid var(--ink); margin-top:4px; padding-top:14px; font-size:16px; font-weight:800; color:var(--ink); }
.doc-totals .grand span:last-child{ font-size:22px; color:var(--coral-ink); letter-spacing:-.02em; }
.doc-foot{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); display:flex; gap:24px; justify-content:space-between; flex-wrap:wrap; }
.doc-foot ul{ margin:0; padding-left:16px; font-size:12px; color:var(--ink-3); line-height:1.8; max-width:46ch; }
.doc-foot b{ color:var(--ink-2); }
.doc-sign{ text-align:right; align-self:flex-end; }
.doc-sign .num{ font-size:13px; color:var(--ink-3); }
.doc-sign .sign-name{ font-size:16px; font-weight:800; margin-top:6px; display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.doc-sign .seal{ display:inline-grid; place-items:center; width:34px; height:34px; border:2px solid var(--coral); color:var(--coral); border-radius:6px; font-size:14px; font-weight:800; }

/* ============================================================
   견적내기 (시공섹션 아코디언 + 품목 + 가격)
   ============================================================ */
.est-summary{
  position:sticky; top:82px; z-index:40;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 24px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.est-summary .amounts{ display:flex; gap:28px; align-items:baseline; flex-wrap:wrap; }
.est-summary .amt-label{ font-size:12.5px; color:var(--ink-3); font-weight:600; display:block; }
.est-summary .amt-consult{ font-size:18px; font-weight:800; letter-spacing:-.02em; }
.est-summary .amt-total{ font-size:28px; font-weight:800; letter-spacing:-.03em; color:var(--coral-ink); }
.est-summary .actions{ display:flex; gap:10px; flex-wrap:wrap; }

.est-group{ margin-top:34px; }
.est-group-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:0 4px 12px; border-bottom:2px solid var(--ink);
}
.est-group-head .nm{ font-size:19px; font-weight:800; letter-spacing:-.02em; }
.est-group-head .sum{ font-size:16px; font-weight:800; color:var(--coral-ink); }
.est-group-head .sum small{ font-size:12px; color:var(--ink-3); font-weight:600; margin-right:6px; }

.est-acc{ border:1px solid var(--line); border-radius:var(--r); background:#fff; margin-top:12px; overflow:hidden; }
.est-acc summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; font-weight:700; font-size:15.5px; letter-spacing:-.01em; transition:background .15s;
}
.est-acc summary::-webkit-details-marker{ display:none; }
.est-acc summary:hover{ background:var(--bg-soft); }
.est-acc summary .meta{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-3); font-weight:600; }
.est-acc summary .meta .picked{ color:var(--coral-ink); font-weight:800; }
.est-acc summary .chev{ transition:transform .2s; color:var(--ink-3); flex:none; }
.est-acc[open] summary{ border-bottom:1px solid var(--line); background:var(--bg-soft); }
.est-acc[open] summary .chev{ transform:rotate(180deg); }
.est-acc .stmt input.qty{
  width:76px; height:38px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:0 10px; text-align:right; font-weight:700; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.est-acc .stmt input.qty:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-soft); }
.est-acc .stmt tr.picked td{ background:var(--coral-tint); }
.est-note{ font-size:12.5px; color:var(--ink-4); margin-top:14px; }

@media (max-width: 720px){
  .est-summary{ top:70px; padding:14px 16px; }
  .est-summary .amt-total{ font-size:22px; }
  .est-acc .stmt{ font-size:12.5px; }
  .est-acc .stmt thead th, .est-acc .stmt tbody td{ padding:9px 8px; }
  .est-acc .stmt input.qty{ width:58px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* 초간편 견적 추가에 맞춰 좁은 화면은 모바일 메뉴로 전환한다. */
@media (max-width: 1100px){
  .nav, .header-right .btn, .header-right .link-btn{ display:none; }
  .hamb{ display:grid; }
  /* mobile drawer */
  .m-nav{ display:block; position:fixed; inset:0; z-index:90; pointer-events:none; }
  .m-nav .scrim{ position:absolute; inset:0; background:rgba(22,21,26,.5); opacity:0; transition:opacity .25s; }
  .m-nav .panel{ position:absolute; top:0; right:0; bottom:0; width:min(82vw,340px); background:#fff; transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); padding:22px; display:flex; flex-direction:column; gap:6px; overflow:auto; }
  .m-nav.open{ pointer-events:auto; }
  .m-nav.open .scrim{ opacity:1; }
  .m-nav.open .panel{ transform:none; }
  .m-nav a{ padding:15px 12px; border-radius:11px; font-size:17px; font-weight:700; border-bottom:1px solid var(--line); }
  .m-nav a.active{ color:var(--coral-ink); }
}
@media (max-width: 1024px){
  .case-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 860px){
  .wrap{ padding:0 18px; }
  .section{ padding:56px 0; }
  .case-grid{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr; gap:28px; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .region-pick{ grid-template-columns:1fr; }
  .slot-grid{ grid-template-columns:repeat(3,1fr); }
  .sec-head{ margin-bottom:26px; }
  .step .nm{ font-size:11px; }

}
@media (max-width: 720px){
  .estimate-doc{ padding:30px 22px; }
  .doc-head{ flex-direction:column; gap:14px; }
  .doc-title-block{ text-align:left; }
  .doc-parties{ grid-template-columns:1fr; }
  .doc-foot{ flex-direction:column; }
  .doc-sign{ text-align:left; }
  .doc-sign .sign-name{ justify-content:flex-start; }
  .doc-totals{ width:100%; }
}
@media (max-width: 560px){
  .case-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  /* 좁은 칸에서 라벨·숫자가 두 줄로 접히면 수치가 한눈에 안 들어온다.
     nowrap 으로 접힘을 막고, 칸 폭에 비례해 글자를 줄여 잘림도 없게 한다.
     (칸 안쪽 폭 ≈ (100vw-56)/3 - 16 → 320px 에서도 라벨 한 줄이 들어간다) */
  .stat-row{ gap:8px; }
  /* PC 와 같은 구조(코랄 점 + 라벨 + 큰 숫자)를 유지한다. 점을 빼면 카드가 밋밋해진다.
     점+여백이 10px 를 먹으므로 좌우 패딩을 화면폭에 연동해 그만큼을 되찾는다. */
  .stat{ padding:15px clamp(6px, 2vw, 12px); text-align:left; }
  .stat .auto{ display:none; }         /* '자동 집계' 배지는 칸 폭을 넘겨 여기서만 감춘다 */
  .stat .dot{ width:5px; height:5px; box-shadow:0 0 0 2.5px var(--coral-soft); }
  .stat .label{
    justify-content:flex-start; gap:4px; white-space:nowrap; letter-spacing:-.02em;
    /* 텍스트 가용폭 = 칸 안쪽 - 점(5) - 여백(4). 그 폭에 '현재까지 계약건수'(7.24em)가
       한 줄로 들어가도록 화면폭에 비례시킨다. 320px 에서 2px 여유가 남는다. */
    font-size:clamp(8.8px, calc(4vw - 4px), 12.5px);
  }
  .stat .value{
    /* 상한 23.5px 은 560px 에서의 데스크톱 값(4.2vw)과 같다.
       더 크게 두면 561px 로 넘어가는 순간 글자가 오히려 작아지며 튄다. */
    margin-top:9px; white-space:nowrap;
    font-size:clamp(17px, calc(8.6vw - 9.6px), 23.5px);
  }
  .stat .value .unit{ margin-left:2px; }

  /* 미니홈 통계는 2x2 라 칸이 173px — 홈 현황(113px)용 축소값을 그대로 물려받으면
     글자는 작고 오른쪽이 100px 넘게 비어 내용이 좌측으로 쏠려 보인다.
     칸에 여유가 있으므로 PC 와 같은 크기·여백을 쓴다. */
  /* 2x2 타일은 정사각형에 가깝고 내용(최대 87px)이 칸(139px)보다 훨씬 짧다.
     PC 처럼 좌측 정렬하면 오른쪽만 100px 가까이 비어 한쪽으로 쏠려 보이므로
     여기서는 가운데로 모은다. */
  #fr-stats .stat{ padding:18px 16px; text-align:center; }
  #fr-stats .stat .dot{ width:7px; height:7px; box-shadow:0 0 0 3px var(--coral-soft); }
  #fr-stats .stat .label{ justify-content:center; gap:7px; font-size:13.5px; letter-spacing:.02em; }
  #fr-stats .stat .value{ margin-top:12px; font-size:clamp(22px, 6.4vw, 28px); }

  .form-card{ padding:22px 18px; }
  .slot-grid{ grid-template-columns:repeat(2,1fr); }
  .foot-tel{ font-size:24px; }
  .sns-btn{ width:44px; height:44px; }   /* 모바일 터치 타깃 */
  .steps .nm{ display:none; }
  /* 필터(모바일): 라벨 폭 축소 + 상세필터 버튼 전체폭 한 줄 */
  .filterbar{ padding:16px 16px; }
  .filter-label{ width:auto; font-size:12px; }
  .filter-row > div{ min-width:0 !important; }
  #toggle-detail{ margin-left:0 !important; width:100%; justify-content:center; }
}

/* ============================================================
   PRINT — 견적서만 출력
   ============================================================ */
@media print{
  body{ background:#fff; }
  .header, .notice, .footer, .doc-toolbar, .no-print{ display:none !important; }
  /* 견적서 모달이 열린 상태(body.doc-open)에서는 본문 대신 견적서만 인쇄
     — 모달이 main 안에 있으므로 main 자체가 아니라 형제 요소들을 숨긴다 */
  body.doc-open main > :not(.doc-scrim){ display:none !important; }
  /* JS 가 인라인 display:flex 로 열기 때문에 !important 로 눌러야 다중 페이지 인쇄가 된다 */
  .modal-scrim.doc-scrim{ position:static; background:none; backdrop-filter:none; padding:0; display:block !important; overflow:visible; }
  .doc-shell{ padding:0; display:block; }
  .estimate-doc{ width:100%; max-width:100%; margin:0; box-shadow:none; border-radius:0; padding:0; font-size:12px; }
  .party, .doc-stmt thead th, .catpill, .doc-summary, .doc-sign .seal{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  /* 인쇄 지면 폭(A4 210mm − 여백)은 688~718px 라 720px 모바일 분기에 걸린다.
     그대로 두면 화면 미리보기(가로 2단)와 달리 세로로 쌓여 인쇄되므로,
     문서 레이아웃을 데스크톱 기준으로 명시 복원한다. */
  .doc-head{ flex-direction:row; gap:24px; }
  .doc-title-block{ text-align:right; }
  .doc-parties{ grid-template-columns:1fr 1fr; }
  .doc-foot{ flex-direction:row; }
  .doc-sign{ text-align:right; }
  .doc-sign .sign-name{ justify-content:flex-end; }
  .doc-totals{ width:min(360px,100%); margin-left:auto; }
  @page{ margin:14mm; }
}

/* ============================================================
   LEGAL — 이용약관 / 개인정보 처리방침
   조문이 길어 읽는 흐름이 끊기지 않도록 본문 폭을 제한하고
   조 제목·목록 간격만 또렷하게 잡는다.
   ============================================================ */
.legal{ max-width:820px; }
.legal-updated{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:13px; font-weight:700; color:var(--ink-3);
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:999px; padding:7px 14px;
}
.legal-body{ margin-top:34px; color:var(--ink-2); font-size:15.5px; line-height:1.85; }
.legal-body section + section{ margin-top:34px; }
.legal-body h2{
  font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.02em;
  line-height:1.4; margin-bottom:10px;
}
.legal-body p{ margin:0 0 10px; }
.legal-body p:last-child{ margin-bottom:0; }
.legal-body ol, .legal-body ul{ margin:10px 0 0; padding-left:20px; }
.legal-body li{ margin-bottom:7px; }
.legal-body li:last-child{ margin-bottom:0; }
.legal-body ol{ list-style:decimal; }
.legal-body ul{ list-style:disc; }
.legal-body strong{ font-weight:700; color:var(--ink); }
/* 담당자·연락처처럼 항목이 짧게 나열되는 블록 */
.legal-card{
  margin-top:12px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:16px 18px;
}
.legal-card dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0; font-size:14.5px; }
.legal-card dt{ font-weight:700; color:var(--ink-3); white-space:nowrap; }
.legal-card dd{ margin:0; color:var(--ink); font-weight:600; }
@media (max-width:560px){
  .legal-body{ font-size:15px; }
  .legal-card dl{ grid-template-columns:1fr; gap:2px 0; }
  .legal-card dd{ margin-bottom:8px; }
}