/* ════════════════════════════════════════════════════════════════════
   화면별 — 히어로 · 분류 · 업체 · 프랜차이즈 · 매물 · 검색

   ⚠️ **날값을 여기 적지 마세요.** 전부 `css/tokens.css` 에 있습니다.
   ⚠️ **화면마다 다른 디자인 언어를 쓰지 마세요** (§54). 머리는
   `.pgh` 한 벌, 카드는 `.cat`/`.pv`/`.fr`/`.mk` 네 벌뿐입니다.
   ⚠️ `display:grid` 인 칸에 글과 태그를 섞지 마세요 — `<b>` 가 딴 칸이
   되어 낱말이 딴 줄에 앉습니다. 글은 `<span>` 으로 감쌉니다.
   ════════════════════════════════════════════════════════════════════ */

/* ════════ 규모감 — 우리가 다루는 범위 ════════════════════════════
   ⚠️ 어두운 히어로 바로 다음이라 **밝아야** 장면이 바뀝니다. 여기를
   어둡게 칠하면 첫 두 화면이 한 덩어리로 읽힙니다.
   ⚠️ 힘은 장식이 아니라 **숫자의 크기와 여백**에서 나옵니다. 여기에
   테두리 · 그림자 · 아이콘을 더하지 마세요. */
.scale{ background:var(--surface); padding:var(--s11) 0; }
.sec-hd-c{ text-align:center; }
/* ⚠️ 이 두 줄은 **랜딩 CSS 에 있던 것**입니다. 2026-10-01 에 랜딩을
   없애면서 `css/landing.css` 를 통째로 지웠는데, 이 둘만 다른 화면도
   같이 쓰고 있었습니다 — 안 옮겼으면 가운데 머리말이 **사이트 전체에서**
   작아졌을 겁니다 (에러도 안 나고 화면도 안 죽습니다). */
.sec-hd-c h2{ font-size:clamp(28px, 3.4vw, 48px); font-weight:900;
  letter-spacing:-.035em; line-height:1.24; color:var(--navy); }
.sec-hd-c > p{ margin-left:auto; margin-right:auto; }
.scale-h{ font-size:var(--t-sig); font-weight:900;
  line-height:1.16; letter-spacing:var(--tr-head); }
.scale-h em{ font-style:normal; color:var(--start-dark); }

.scale-g{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--s6); margin-top:var(--s9); }
.scale-i{ display:grid; align-content:start; gap:6px; text-align:center;
  padding:0 var(--s4); position:relative; }
/* 칸 사이를 선 하나로만 나눕니다 — 카드로 만들면 숫자가 작아 보입니다 */
.scale-i + .scale-i::before{ content:""; position:absolute;
  left:0; top:8%; bottom:8%; width:1px; background:var(--line); }
/* ⚠️ 숫자 폭을 고정합니다. 기본 글꼴은 1 이 좁아서 칸마다 가운데가
   어긋나 보입니다. */
.scale-n{ font-size:var(--t-sig); font-weight:900; line-height:1;
  letter-spacing:-.045em; color:var(--navy);
  font-variant-numeric:tabular-nums; }
.scale-k{ font-size:var(--t-lg); font-weight:800; margin-top:var(--s2); }
.scale-l{ font-size:var(--t-cap); color:var(--ink3); line-height:1.6; }
.scale-n-b{ margin-top:var(--s8); text-align:center;
  font-size:var(--t-cap); color:var(--ink3); }
.scale-n-b b{ color:var(--ink2); }

@media (max-width:820px){
  .scale{ padding:var(--s10) 0; }
  .scale-g{ grid-template-columns:1fr 1fr; gap:var(--s7) var(--s4); }
  /* ⚠️ 두 칸으로 접히면 왼쪽 칸에도 선이 붙습니다. 첫 칸과 셋째
     칸의 선을 다시 꺼야 합니다 — 안 그러면 가운데가 아니라 왼쪽
     끝에 선이 하나 떠 있습니다. */
  .scale-g > .scale-i:nth-child(odd)::before{ content:none; }
}
@media (max-width:420px){
  .scale-i{ padding:0 var(--s2); }
  /* ⚠️ 설명줄을 폰에서 숨기지도, 12px 밑으로 줄이지도 마세요.
     숨기면 숫자만 남아 "업체가 183곳" 으로 읽히고, 줄이면 전수
     점검의 12px 검사에 걸립니다. 줄 수가 늘어나게 두면 됩니다. */
  .scale-l{ line-height:1.5; }
}

/* ── 신뢰 줄 ─────────────────────────────────────────────────────
   ⚠️ **회원 수 · 만족도 · 누적 건수를 적지 마세요.** 여기 적는 것은
   전부 지금 사실이고 우리가 지키는 약속입니다. */
.tbar{ background:var(--bg-2); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:var(--s7) 0; }
.tbar-g{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6); }
.tbar-i{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3);
  align-items:start; color:var(--blue); }
.tbar-i span{ display:grid; gap:2px; }
.tbar-i b{ font-size:var(--t-sm); color:var(--ink); }
.tbar-i em{ font-style:normal; font-size:var(--t-cap); color:var(--ink3); line-height:1.6; }
@media (max-width:900px){ .tbar-g{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .tbar-g{ grid-template-columns:1fr; gap:var(--s4); } }

/* ════════ 창업 쪽 · 폐업 쪽 물들이기 ═════════════════════════════
   랜딩에서 START = 초록 · CLOSE = 주황으로 정했는데, 속화면이 전부
   파랑이면 **같은 사이트로 안 읽힙니다.**

   ⚠️ 규칙을 수십 개 고치지 마세요. 이 저장소의 강조색은 거의 전부
   `--blue` 계열 변수를 거칩니다 — 그 변수를 `#view` 안에서만 다시
   정의하면 아이콘 타일 · 칩 · 버튼 · 머리말 · 포커스 테두리가
   한꺼번에 따라옵니다. 어느 쪽인지는 `js/app.js` 의 `sideOf()` 가
   붙입니다.

   ⚠️ **글자로 쓰는 색은 짙은 쪽(`--start-dark` · `--close-dark`)입니다.**
   `--start`(#12A878) 를 흰 바탕의 글자색으로 쓰면 대비가 3.0 이라
   작은 글씨가 읽히지 않습니다.
   ⚠️ 헤더 · 푸터는 `#view` 밖이라 안 물듭니다. 거기까지 바뀌면
   화면마다 머리가 달라져 한 사이트로 안 읽힙니다. */
.side-start{
  --blue:     var(--start-dark);
  --blue-600: var(--start-deep);
  --blue-400: var(--start);
  --blue-50:  var(--start-soft);
  --blue-100: #D7F0E6;
}
.side-close{
  --blue:     var(--close-dark);
  --blue-600: var(--close-deep);
  --blue-400: var(--close);
  --blue-50:  var(--close-soft);
  --blue-100: #FFE0D2;
}

/* ════════ 화면 머리 — 모든 속화면이 같은 것을 씁니다 ═════════════ */
.pgh{ position:relative; background:var(--surface);
  border-bottom:1px solid var(--line); padding:var(--s10) 0 var(--s9); }
/* ⚠️ 속화면 머리가 밋밋한 흰 판이면 랜딩과 **다른 사이트**로 읽힙니다.
   랜딩 히어로와 같은 식으로 한쪽에만 옅게 번지게 둡니다 — 면으로
   칠하지 않습니다 (§2 면적 비율). */
.side-start .pgh{
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(18,168,120,.13) 0%, rgba(18,168,120,0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, var(--start-soft) 100%); }
.side-close .pgh{
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(242,106,61,.13) 0%, rgba(242,106,61,0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, var(--close-soft) 100%); }
.pgh-tight{ padding:var(--s9) 0 var(--s7); }
.pg-h1{ font-size:var(--t-3xl); font-weight:900; letter-spacing:var(--tr-head); }
.pg-h1 em{ font-style:normal; color:var(--blue); }
.pg-h2{ font-size:var(--t-2xl); margin-bottom:var(--s5); }
.pg-lead{ margin-top:var(--s4); font-size:var(--t-lg); color:var(--ink2); max-width:66ch; }
.pgh .row-cta{ margin-top:var(--s7); }
.pad-pg{ padding:var(--s11) 0; }

.crumb{ display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-bottom:var(--s5); font-size:var(--t-sm); color:var(--ink3); }
.crumb a{ color:var(--ink2); min-height:40px; display:inline-flex; align-items:center; }
.crumb a:hover{ color:var(--blue); }
.crumb b{ color:var(--ink); font-weight:700; }

/* ════════ 업종 고르기 (§6) ═══════════════════════════════════════ */
.ind-g{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
.ind{ display:grid; align-content:start; gap:var(--s2);
  padding:var(--s6); border-radius:var(--r-xl); background:var(--bg-2);
  min-height:150px; transition:background .15s, transform .15s; }
.ind:hover{ background:var(--blue-50); transform:translateY(-2px); }
.ind.on{ background:var(--blue-50); box-shadow:inset 0 0 0 2px var(--blue); }
.ind-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px; margin-bottom:var(--s2);
  background:var(--ic-bg, var(--blue-50)); color:var(--ic-ink, var(--blue)); }
.sec-white .ind{ background:var(--bg-2); }
.ind > b{ font-size:var(--t-lg); }
.ind-l{ font-size:var(--t-cap); color:var(--ink3); line-height:1.6; }
@media (max-width:980px){ .ind-g{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){
  .ind-g{ grid-template-columns:1fr 1fr; gap:var(--s3); }
  .ind{ min-height:0; padding:var(--s5); }
  .ind-ic{ width:40px; height:40px; border-radius:12px; }
  .ind-l{ display:none; }
}

/* ════════ 분류 카드 ══════════════════════════════════════════════ */
.cat-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.cat-g4{ grid-template-columns:repeat(4,1fr); }
.cat{ display:grid; align-content:start; gap:var(--s2); position:relative;
  padding:var(--s6); border-radius:var(--r-xl); background:var(--bg-2);
  transition:background .15s, transform .15s, box-shadow .2s; }
.sec-white .cat{ background:var(--bg-2); }
.cat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); background:var(--surface); }
.cat-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:14px; margin-bottom:var(--s2);
  background:var(--ic-bg, var(--blue-50)); color:var(--ic-ink, var(--blue)); }
.cat > b{ font-size:var(--t-lg); }
.cat-l{ font-size:var(--t-cap); color:var(--ink3); }
.cat-s{ display:flex; flex-wrap:wrap; gap:5px; margin-top:var(--s3); }
.cat-s em{ font-style:normal; font-size:var(--t-cap); color:var(--ink2);
  background:var(--surface); border-radius:var(--r-pill); padding:4px 10px; }
.sec-white .cat-s em{ background:var(--surface); }
.cat-s-more{ color:var(--ink3) !important; background:transparent !important; }
.cat-go{ position:absolute; right:var(--s6); top:var(--s6); color:var(--ink3); }
.cat:hover .cat-go{ color:var(--blue); }
@media (max-width:1040px){ .cat-g,.cat-g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .cat-g,.cat-g4{ grid-template-columns:1fr; gap:var(--s3); }
  .cat{ padding:var(--s5); }
  .cat-ic{ width:38px; height:38px; border-radius:12px; margin-bottom:0; }
}

/* ════════ 어떻게 진행되나 — 세 걸음 ══════════════════════════════
   ⚠️ **세 걸음을 넘기지 마세요.** 넷이 되면 절차로 읽힙니다.
   ⚠️ 카드로 띄우지 않습니다. 번호를 크게 두고 옅은 면으로 깔면
   "읽을 것" 이 아니라 "따라갈 것" 으로 읽힙니다. */
.how-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5);
  margin:0; padding:0; list-style:none; counter-reset:none; }
.how-i{ display:grid; align-content:start; gap:var(--s2);
  padding:var(--s8) var(--s7); border-radius:var(--r-xl);
  background:var(--surface); position:relative; }
.sec-white .how-i{ background:var(--bg-2); }
.how-n{ font-size:var(--t-2xl); font-weight:900; line-height:1;
  color:var(--blue); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; }
.how-ic{ position:absolute; right:var(--s7); top:var(--s8);
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:14px;
  background:var(--blue-50); color:var(--blue); }
.how-t{ font-size:var(--t-lg); margin-top:var(--s4); }
.how-d{ font-size:var(--t-sm); color:var(--ink2); line-height:1.75; }
@media (max-width:900px){ .how-g{ grid-template-columns:1fr; gap:var(--s3); } }
@media (max-width:520px){
  .how-i{ padding:var(--s6) var(--s5); }
  /* ⚠️ 좁아지면 아이콘이 제목 위에 앉습니다. 폰에서는 뺍니다 —
     여기서 아이콘이 없어도 못 알아볼 것이 없습니다. */
  .how-ic{ display:none; }
  .how-t{ margin-top:var(--s2); }
}

/* 입점 분야 — ⚠️ 칩을 다 늘어놓지 않습니다. 분야마다 여섯까지. */
/* ════════ 업체 입점 (/join) — 설득하는 화면 ══════════════════════
   ⚠️ **성과를 지어내지 마세요.** 여기 숫자는 전부 `AM_PROVIDERS` 를
   그 자리에서 센 값이고, 0 이면 0 이라고 말합니다. 글은
   `js/data/join.js` 한 곳에 있습니다. */
.jn-now{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s7) var(--s9);
  align-items:center; }
.jn-now-t h2{ font-size:var(--t-2xl); color:var(--navy); }
.jn-now-t h2 em{ font-style:normal; color:var(--start-dark); }
.jn-now-t .lead{ margin-top:var(--s4); }
.jn-now-t .lead b{ color:var(--ink); }
.jn-now-l{ display:grid; gap:var(--s3); min-width:0; }
.jn-now-l > li{ display:grid; grid-template-columns:auto 1fr; align-items:baseline;
  gap:var(--s4); padding:var(--s4) var(--s5); border-radius:var(--r-lg);
  background:var(--bg); border:1px solid var(--line); }
.jn-now-l b{ font-size:var(--t-lg); font-weight:800; color:var(--navy);
  white-space:nowrap; }
.jn-now-l span{ font-size:var(--t-sm); color:var(--ink2); }
@media (max-width:900px){ .jn-now{ grid-template-columns:1fr; gap:var(--s6); } }

/* 요청이 이런 칸으로 옵니다
   ⚠️ 이 구간의 바탕은 `--bg`(웜 화이트)입니다. 상자까지 `--bg` 로
   두면 **상자가 안 보입니다** — 흰 면으로 띄웁니다. */
.jn-req{ border-radius:var(--r-2xl); background:var(--surface);
  border:1px solid var(--line); padding:var(--s7);
  box-shadow:var(--shadow-card); }
.jn-req-l{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s4); }
.jn-req-l > li{ display:grid; align-content:start; gap:4px; min-width:0;
  padding:var(--s4) var(--s5); border-radius:var(--r-lg);
  background:var(--bg); }
.jn-req-l b{ font-size:var(--t-base); color:var(--ink); }
.jn-req-l span{ font-size:var(--t-cap); color:var(--ink2); line-height:1.6; }
/* ⚠️ 이 줄이 이 구간의 핵심입니다 — 연락처가 안 온다는 말 */
.jn-req-n{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3);
  align-items:start; margin-top:var(--s6); padding-top:var(--s5);
  border-top:1px solid var(--line);
  font-size:var(--t-sm); color:var(--ink2); line-height:1.75; }
.jn-req-n > span > b{ color:var(--ink); }
.jn-req-n > svg{ color:var(--start-dark); margin-top:3px; }
@media (max-width:980px){ .jn-req-l{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:640px){
  .jn-req{ padding:var(--s5); }
  .jn-req-l{ grid-template-columns:1fr 1fr; gap:var(--s3); }
}

/* 약속 넷 */
.jn-why{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); }
.jn-why > li{ display:grid; align-content:start; gap:var(--s3); min-width:0;
  padding:var(--s7); border-radius:var(--r-lg);
  background:var(--bg); border:1px solid var(--line); }
.jn-why-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-sm);
  background:var(--start-soft); color:var(--start-dark); }
.jn-why > li > b{ font-size:var(--t-lg); line-height:1.4; }
.jn-why-d{ font-size:var(--t-sm); color:var(--ink2); line-height:1.8; }
@media (max-width:820px){ .jn-why{ grid-template-columns:1fr; } }

/* 분야마다 지금 몇 곳인가 — ⚠️ 센 값입니다 */
/* ⚠️ `.join-cat > b` 가 **세 곳에** 있었습니다 — 뒤의 것이 이겨서
   여기 적은 것이 조용히 안 먹었습니다. 한 곳으로 합쳤습니다. */
.join-cat > b{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
  font-size:var(--t-base); margin-bottom:var(--s3); }
/* ⚠️⚠️ 글자색은 `--start-dark` 가 아니라 **`--start-deep`** 입니다.
   옅은 초록 위에서 `--start-dark` 는 대비 **4.19** 로 13px 굵은 글씨가
   AA(4.5)에 못 미칩니다 (`--start-deep` 은 5.98). 업체가 0곳일 때는
   `.join-n0`(회색)로 그려져서 **이 배지가 한 번도 안 걸렸습니다** —
   등록이 시작되는 순간 전 분야에 깔리는 글자입니다.
   ⚠️ 바로 위 `.jn-why-ic` 는 **아이콘**이라 3.0 이면 되고 그대로 둡니다. */
.join-n{ font-style:normal; font-size:var(--t-cap); font-weight:700;
  color:var(--start-deep); background:var(--start-soft);
  border-radius:var(--r-pill); padding:3px 10px; }
.join-n0{ color:var(--ink3); background:var(--bg-2); }

.join-g{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s7); }
.chip-more{ color:var(--ink3); background:transparent; }
@media (max-width:760px){ .join-g{ grid-template-columns:1fr; gap:var(--s4); } }

/* MY — 도구에 적어 두신 것 */
.my-tl{ display:grid; gap:var(--s2); margin:var(--s4) 0 0; padding:0; list-style:none; }
.my-tl a{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:var(--s3); min-height:var(--tap); padding:var(--s3) var(--s5);
  border-radius:var(--r-lg); background:var(--bg-2);
  text-decoration:none; color:inherit; transition:background .15s; }
.my-tl a:hover{ background:var(--blue-50); }
.my-tl-ic{ display:inline-flex; color:var(--blue); }
.my-tl-n{ font-size:var(--t-cap); color:var(--ink3); }
.my-tl-go{ color:var(--ink3); }
@media (max-width:520px){
  .my-tl a{ grid-template-columns:auto 1fr auto; }
  /* 좁으면 "n칸" 을 둘째 줄로 내립니다 — 셋째 칸에 자리가 없습니다 */
  .my-tl-n{ grid-column:2; grid-row:2; }
}

/* ════════ 대형 통합검색 (§5) ═════════════════════════════════════
   ⚠️ 히어로가 아니라 **히어로 다음**입니다. 첫 화면의 주인공은 두
   낱말이고, 적는 칸이 하나 생기면 그 둘이 그만큼 작아집니다. */
.sb-b{ text-align:center; }
.sb-h{ font-size:var(--t-3xl); font-weight:900; line-height:1.2;
  letter-spacing:var(--tr-head); }
.sb-p{ margin-top:var(--s3); font-size:var(--t-base); color:var(--ink2); }
.sb-f{ display:flex; align-items:center; gap:var(--s3);
  margin:var(--s7) auto 0; padding:var(--s3) var(--s3) var(--s3) var(--s6);
  border-radius:var(--r-pill); background:var(--bg-2);
  border:1px solid var(--line); transition:border-color .15s, box-shadow .2s; }
.sb-f:focus-within{ border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-50); }
.sb-f-ic{ display:inline-flex; color:var(--ink3); flex:0 0 auto; }
/* ⚠️ `min-width:0` 이 없으면 flex 칸이 안 줄어들어 폰에서 넘칩니다 */
.sb-f input{ flex:1 1 auto; min-width:0; border:0; background:transparent;
  font-size:var(--t-lg); color:var(--ink); min-height:var(--tap);
  outline:none; }
.sb-f input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.sb-f .btn{ flex:0 0 auto; }
.sb-t{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2);
  margin:var(--s5) 0 0; padding:0; list-style:none; }
.sb-t a{ display:inline-flex; align-items:center; min-height:40px;
  padding:0 var(--s5); border-radius:var(--r-pill);
  background:var(--bg-2); color:var(--ink2);
  font-size:var(--t-cap); text-decoration:none; transition:background .15s; }
.sb-t a:hover{ background:var(--blue-50); color:var(--blue); }
@media (max-width:560px){
  .sb-f{ padding:var(--s2) var(--s2) var(--s2) var(--s4); gap:var(--s2); }
  .sb-f input{ font-size:var(--t-base); }
  /* ⚠️ 폰에서 버튼 글자를 지우지 마세요 — 돋보기만 남으면 무엇을
     누르는지가 안 보입니다. 패딩만 줄입니다. */
  .sb-f .btn{ padding:0 var(--s5); }
}

/* ════════ 창업 = 과정 (§7) ═══════════════════════════════════════
   ⚠️ 분류를 늘어놓지 않고 **단계**로 묶습니다. 손님이 알고 싶은 것은
   분류 이름이 아니라 "지금 어디까지 왔고 다음에 뭘 해야 하는가"
   입니다. */
.stp-l{ display:grid; gap:var(--s5); margin:0; padding:0; list-style:none;
  counter-reset:none; }
.stp{ display:grid; grid-template-columns:230px 1fr; gap:var(--s6);
  padding:var(--s7) 0; border-top:1px solid var(--line); }
.stp:first-child{ border-top:0; padding-top:0; }
.stp-h{ display:grid; align-content:start; gap:4px; position:sticky; top:96px; }
/* ⚠️ 글자는 `--gold` 가 아니라 `--gold-text` 입니다 — `--gold` 로 두면
   13px 에서 대비가 1.82 라 거의 안 보입니다 (실제로 그랬습니다). */
.stp-n{ font-size:var(--t-cap); font-weight:900; letter-spacing:.16em;
  color:var(--gold-text); font-variant-numeric:tabular-nums; }
/* ⚠️ 단계를 나누는 선도 골드입니다 — 아주 옅게. 진하게 하면 표가 됩니다. */
.stp{ border-top-color:var(--line); }
.stp-t{ font-size:var(--t-xl); }
.stp-d{ font-size:var(--t-cap); color:var(--ink3); line-height:1.7; }
.stp-c{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.stp-i{ display:grid; align-content:start; gap:4px; position:relative;
  padding:var(--s5) var(--s6); border-radius:var(--r-lg);
  background:var(--bg-2); text-decoration:none; color:inherit;
  transition:background .15s, transform .15s; }
.sec-white .stp-i{ background:var(--bg-2); }
.stp-i:hover{ background:var(--surface); transform:translateY(-2px);
  box-shadow:var(--shadow-md); }
.stp-i-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:11px; margin-bottom:4px;
  background:var(--ic-bg, var(--blue-50)); color:var(--ic-ink, var(--blue)); }
.stp-i > b{ font-size:var(--t-base); }
.stp-i-s{ font-size:var(--t-cap); color:var(--ink3); line-height:1.65; }
.stp-i-go{ position:absolute; right:var(--s5); top:var(--s5); color:var(--ink3); }
.stp-i:hover .stp-i-go{ color:var(--blue); }
@media (max-width:980px){
  .stp{ grid-template-columns:1fr; gap:var(--s4); }
  /* ⚠️ 좁은 폭에서 `position:sticky` 를 풀어야 합니다. 안 풀면 제목이
     화면에 붙은 채 카드만 지나가서 어느 단계인지 헷갈립니다. */
  .stp-h{ position:static; }
}
@media (max-width:620px){ .stp-c{ grid-template-columns:1fr; } }

/* ════════ 폐업 = 무엇을 원하시는가 (§8) ═════════════════════════ */
.wnt-l{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4);
  margin:0; padding:0; list-style:none; }
.wnt{ display:grid; align-content:start; gap:6px; height:100%;
  padding:var(--s7); border-radius:var(--r-xl);
  background:var(--bg-2); border:1px solid transparent;
  text-decoration:none; color:inherit;
  transition:border-color .15s, background .15s, transform .15s; }
.wnt:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md);
  background:var(--surface); }
.wnt.on{ border-color:var(--blue); background:var(--blue-50); }
.wnt-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:14px; margin-bottom:var(--s2);
  background:var(--surface); color:var(--blue); }
.wnt.on .wnt-ic{ background:var(--blue); color:#fff; }
.wnt > b{ font-size:var(--t-lg); line-height:1.4; }
.wnt-l-d{ font-size:var(--t-cap); color:var(--ink3); line-height:1.7; }
.sec-hd-sub{ margin-top:var(--s10); }
@media (max-width:720px){ .wnt-l{ grid-template-columns:1fr; gap:var(--s3); } }

/* ════════ 사장님 도구 ════════════════════════════════════════════ */
.tl-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);
  margin:0; padding:0; list-style:none; }
.tl-c{ display:grid; align-content:start; gap:var(--s2); height:100%;
  padding:var(--s7); border-radius:var(--r-xl); background:var(--bg-2);
  text-decoration:none; color:inherit; transition:transform .15s, box-shadow .2s; }
.tl-c:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.tl-c-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:14px; margin-bottom:var(--s2);
  background:var(--blue-50); color:var(--blue); }
.tl-c > b{ font-size:var(--t-lg); }
.tl-c-l{ font-size:var(--t-cap); color:var(--ink3); line-height:1.7; }
/* ⚠️ 나오는 값 자리에 그럴듯한 숫자를 넣지 마세요 — 무엇을 적으면
   무엇이 나오는지만 적습니다 (절대 규칙 1). */
.tl-c-m{ display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px solid var(--line); color:var(--ink3); }
.tl-c-m em{ font-style:normal; font-size:var(--t-cap); }
@media (max-width:900px){ .tl-g{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .tl-g{ grid-template-columns:1fr; gap:var(--s3); }
  /* 메인의 도구 줄만 옆으로 넘깁니다 (`.tl-g-h`). `/tools` 화면은
     그 목록이 본문이라 그대로 쌓습니다.
     ⚠️ `min-width:0` 이 없으면 감싸개가 안 줄어들어 **문서에 가로
     스크롤**이 생깁니다 — 메인의 분류 줄에서 실제로 그랬습니다. */
  .tl-g-h{
    display:flex; grid-template-columns:none; min-width:0;
    gap:var(--s3); overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:0 calc(var(--s4) * -1); padding:0 var(--s4) var(--s2);
  }
  .tl-g-h::-webkit-scrollbar{ display:none; }
  .tl-g-h > li{ flex:0 0 auto; width:78vw; max-width:300px;
    scroll-snap-align:start; }
}

.tl-h{ font-size:var(--t-xl); margin:var(--s9) 0 var(--s4); }
.tl-h:first-child{ margin-top:0; }
.tl-h span{ font-size:var(--t-cap); font-weight:600; color:var(--ink3);
  margin-left:var(--s3); }

/* ⚠️ **적는 줄은 카드가 아닙니다.** 옅은 면으로 깔려 있어야 합니다 —
   떠 있으면 몇 줄만 이어져도 눈이 아픕니다. */
.tl-l{ display:grid; gap:1px; margin:0; padding:0; list-style:none;
  background:var(--line-soft); border-radius:var(--r-lg); overflow:hidden; }
.tl-i{ display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:var(--s4); padding:var(--s4) var(--s5); background:var(--bg-2);
  min-height:var(--tap); }
.tl-i-l{ display:grid; gap:2px; }
.tl-i-l b{ font-size:var(--t-base); }
.tl-i-l i{ font-style:normal; font-size:var(--t-cap); color:var(--ink3); }
.tl-i-f{ display:flex; align-items:center; gap:6px; }
.tl-i-f input{ width:120px; text-align:right; font-size:var(--t-base);
  font-weight:700; font-variant-numeric:tabular-nums;
  padding:8px var(--s3); min-height:40px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); color:var(--ink); }
.tl-i-f input:focus{ outline:2px solid var(--blue); outline-offset:1px; }
.tl-i-f em{ font-style:normal; font-size:var(--t-cap); color:var(--ink3);
  min-width:30px; }
@media (max-width:520px){
  .tl-i{ grid-template-columns:1fr; gap:var(--s2); padding:var(--s4); }
  .tl-i-f{ justify-content:flex-start; }
  .tl-i-f input{ flex:1 1 auto; width:auto; min-width:0; }
}

/* 결과 — ⚠️ 상태색(--ok/--warn/--bad)을 쓰지 마세요. 판정하지 않습니다.
   ⚠️⚠️ **짙은 남색 칸이었습니다.** 계산기 화면은 짧은데 이 칸은 크고
   길어서, 좁은 폭에서 세로로 쌓이면 화면의 15.8% 가 됐습니다 —
   §22 의 "어두운 카드 금지" 이기도 합니다. 지금은 하늘 틴트 바탕에
   남색 숫자입니다. */
.tl-res{ margin-top:var(--s8); padding:var(--s8) var(--s7);
  border-radius:var(--r-xl); background:var(--bg-sky); color:var(--ink);
  border:1px solid var(--line-sky); }
.tl-res-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.tl-res-g2{ grid-template-columns:1fr 1fr; }
.tl-res-g + .tl-res-g{ margin-top:var(--s6); padding-top:var(--s6);
  border-top:1px solid var(--line-sky); }
.tl-o{ display:grid; gap:4px; align-content:start; }
/* ⚠️ 흐린 글자(--ink3)를 쓰지 마세요 — 하늘 틴트 위에서 13px 이 묻힙니다 */
.tl-o-k{ font-size:var(--t-cap); color:var(--ink2); }
.tl-o-v{ font-size:var(--t-2xl); font-weight:900; line-height:1.1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--navy); }
.tl-o-s{ font-size:var(--t-cap); color:var(--ink2); line-height:1.6; }
.tl-res-n{ margin-top:var(--s6); font-size:var(--t-cap);
  color:var(--ink2); line-height:1.8; }
.tl-res-n + .tl-res-n{ margin-top:var(--s3); }
.tl-res-n b{ color:var(--navy); }
@media (max-width:720px){
  .tl-res{ padding:var(--s6) var(--s5); }
  .tl-res-g, .tl-res-g2{ grid-template-columns:1fr; gap:var(--s4); }
}

.tl-foot{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5); flex-wrap:wrap; margin-top:var(--s6); }
.tl-foot .note{ margin:0; }

/* 체크리스트 */
.ck-l{ display:grid; gap:var(--s2); margin:0; padding:0; list-style:none; }
.ck-b{ display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:var(--s4); width:100%; min-height:var(--tap); text-align:left;
  padding:var(--s4) var(--s5); border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--bg-2); color:inherit;
  cursor:pointer; transition:background .15s, border-color .15s; }
.ck-b:hover{ border-color:var(--blue); }
.ck-x{ display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:8px; flex:0 0 auto;
  border:1px solid var(--line); background:var(--surface); color:transparent; }
.ck-i.on .ck-x{ background:var(--blue); border-color:var(--blue); color:#fff; }
.ck-t{ display:grid; gap:2px; }
.ck-t b{ font-size:var(--t-base); font-weight:600; }
.ck-i.on .ck-t b{ color:var(--ink3); text-decoration:line-through; }
.ck-t i{ font-style:normal; font-size:var(--t-cap); color:var(--ink3);
  line-height:1.6; }
/* ⚠️ `--warn` 은 **배지 바탕**에 쓰는 상태색입니다. 13px 글자로 쓰면
   옅은 바탕에서 대비 3.32 라 안 읽힙니다 — 글자는 짙은 쪽입니다. */
.ck-due{ font-style:normal; font-size:var(--t-cap); font-weight:800;
  color:var(--warn-dark, #8A5300); white-space:nowrap; }
@media (max-width:520px){
  .ck-b{ grid-template-columns:auto 1fr; gap:var(--s3); padding:var(--s4); }
  /* 기한 표시가 셋째 칸인데 두 칸으로 접히면 자리가 없습니다 —
     체크 아이콘 아래 줄로 내립니다 */
  .ck-due{ grid-column:2; }
}

/* ════════ 읽을 것 — 지금 이 자리에서 필요한 글 ═══════════════════ */
.rd-l{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);
  margin:0; padding:0; list-style:none; }
.rd-l a{ display:grid; align-content:start; gap:6px; position:relative;
  height:100%; padding:var(--s7); border-radius:var(--r-xl);
  background:var(--surface); text-decoration:none; color:inherit;
  transition:transform .15s, box-shadow .2s; }
.sec-white .rd-l a{ background:var(--bg-2); }
.rd-l a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
/* ⚠️ 13px 굵은 글씨라 `--blue` 로는 옅은 바탕에서 3.4~4.3 이었습니다. */
.rd-m{ font-size:var(--t-cap); font-weight:800; color:var(--blue-600);
  letter-spacing:.04em; }
.rd-l b{ font-size:var(--t-lg); line-height:1.4; }
.rd-p{ font-size:var(--t-cap); color:var(--ink3); line-height:1.7;
  margin-top:2px; }
.rd-go{ position:absolute; right:var(--s6); top:var(--s7); color:var(--ink3); }
.rd-l a:hover .rd-go{ color:var(--blue); }
@media (max-width:900px){ .rd-l{ grid-template-columns:1fr; gap:var(--s3); } }
@media (max-width:520px){
  .rd-l a{ padding:var(--s6) var(--s5); }
  /* ⚠️ 화살표가 제목 위에 앉습니다. 폰에서는 뺍니다 — 카드 전체가
     링크라 화살표가 없어도 누를 수 있다는 것이 보입니다. */
  .rd-go{ display:none; }
}

/* ════════ 자주 묻는 것 ═══════════════════════════════════════════
   ⚠️ 접지 않습니다. 접힌 글은 검색엔진이 낮춰 볼 수 있고, 답이
   짧아서 접을 이유도 없습니다. */
.w-narrow{ max-width:860px; }
.faq-l{ display:grid; gap:var(--s3); margin:0; padding:0; list-style:none; }
.faq-i{ padding:var(--s7); border-radius:var(--r-xl); background:var(--bg-2); }
.faq-q{ display:block; font-size:var(--t-lg); }
.faq-a{ margin-top:var(--s3); font-size:var(--t-base);
  color:var(--ink2); line-height:1.8; }
@media (max-width:520px){
  .faq-i{ padding:var(--s6) var(--s5); }
  .faq-a{ font-size:var(--t-sm); }
}

/* 창업 / 폐업 두 칸 (메인) */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); }
.two-hd{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5);
  position:relative; }
.two-hd b{ font-size:var(--t-xl); }
.two-k{ font-size:var(--t-cap); font-weight:900; letter-spacing:.18em; color:var(--blue); }
.two-c .cat-g{ grid-template-columns:1fr 1fr; }
@media (max-width:1040px){ .two{ grid-template-columns:1fr; gap:var(--s9); } }
@media (max-width:600px){
  /* ⚠️ 폰에서 열두 장을 세로로 쌓으면 이 구간 하나가 3,300px 입니다 —
     페이지의 3분의 1이 "훑어볼 분류" 로 채워집니다. 옆으로 넘기게
     하면 **하나도 숨기지 않고** 높이만 줄어듭니다.
     ⚠️ 화면 끝까지 닿아야 "더 있다" 가 보입니다. `.w` 의 좌우 여백만큼
     밖으로 빼고 같은 만큼 안쪽 여백을 줍니다 — 잘리는 것은 이 칸이라
     **문서에는 가로 스크롤이 생기지 않습니다.** */
  .two-c{ min-width:0; }
  .two-c .cat-g{
    display:flex; grid-template-columns:none; gap:var(--s3); min-width:0;
    overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:0 calc(var(--s4) * -1); padding:0 var(--s4) var(--s2);
  }
  .two-c .cat-g::-webkit-scrollbar{ display:none; }
  .two-c .cat-g > .cat{
    flex:0 0 auto; width:78vw; max-width:300px; scroll-snap-align:start;
  }
}

/* ════════ 칩 ═════════════════════════════════════════════════════ */
.chip-g{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip{ display:inline-flex; align-items:center; min-height:42px;
  padding:0 var(--s5); border-radius:var(--r-pill);
  background:var(--bg-2); color:var(--ink2);
  font-size:var(--t-sm); font-weight:600; }
.sec-white .chip{ background:var(--bg-2); }
a.chip:hover{ background:var(--blue-50); color:var(--blue); }
/* ⚠️ 고른 칩은 흰 글자라 바탕이 짙어야 합니다 — `--blue` 위에서는
   대비가 3.71 이었습니다. */
.chip.on{ background:var(--blue-600); color:#fff; }
.chip-flat{ background:transparent; box-shadow:inset 0 0 0 1px var(--line); }
.chip-2{ box-shadow:inset 0 0 0 1px var(--line); background:transparent; }
.chip-g-fil{ margin-bottom:var(--s6); }

/* ════════ 거르개 ═════════════════════════════════════════════════ */
.fil{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s4) var(--s5); background:var(--bg-2);
  border-radius:var(--r-lg); margin-bottom:var(--s7); }
.fil-ic{ display:inline-flex; color:var(--ink3); }
.fil .sel{ width:auto; min-width:150px; }
.fil-n{ margin-left:auto; font-size:var(--t-sm); font-weight:700; color:var(--ink2); }
@media (max-width:560px){
  .fil .sel{ flex:1 1 42%; min-width:0; }
  .fil-n{ flex-basis:100%; margin-left:0; }
}

/* ════════ 아무것도 없을 때 ═══════════════════════════════════════
   ⚠️⚠️ **이 자리를 지어낸 카드로 채우지 마세요.** 0 이면 0 이라고
   말합니다. 대신 지금 실제로 되는 것을 같이 냅니다. */
.empty{ display:grid; justify-items:center; text-align:center; gap:var(--s3);
  padding:var(--s10) var(--s6); background:var(--bg-2);
  border-radius:var(--r-2xl); }
.sec-white .empty{ background:var(--bg-2); }
.empty-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink3); margin-bottom:var(--s2); }
.empty > b{ font-size:var(--t-xl); }
.empty p{ color:var(--ink2); max-width:56ch; }
.empty .row-cta{ margin-top:var(--s4); }
@media (max-width:560px){ .empty{ padding:var(--s8) var(--s5); } }

/* ════════ 업체 카드 · 상세 (§36 · §37) ═══════════════════════════ */
.pv-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.pv{ display:grid; grid-template-rows:auto 1fr; border-radius:var(--r-xl);
  overflow:hidden; background:var(--bg-2); transition:transform .15s, box-shadow .2s; }
.pv:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.pv-ph{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--line-soft); }
.pv-ph .ph{ width:100%; height:100%; object-fit:cover; display:block; }
.ph-none{ display:block; width:100%; height:100%; background:var(--line-soft); }
.pv-b{ display:grid; gap:6px; align-content:start; padding:var(--s5) var(--s6) var(--s6); }
.pv-t{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.pv-t b{ font-size:var(--t-lg); }
/* ⚠️ 인증 배지는 **상태색이 아니라 골드**입니다. `--ok`(초록)는
   "좋다/나쁘다" 를 말하는 색인데, 인증은 판정이 아니라 **확인했다는
   표시**입니다. 초록으로 두면 인증 없는 업체가 "나쁘다" 로 읽힙니다. */
/* ⚠️⚠️ 글자는 `--gold` 가 아니라 **`--gold-text`** 입니다. `--gold` 를
   금색 틴트 바탕에 얹으면 대비가 **1.99** 라 13px 굵은 글씨가 거의
   안 보입니다 (재 봤습니다 · `--gold-text` 는 5.84). 업체가 0곳이라
   이 배지가 **한 번도 안 그려져서** 전수 점검의 대비 검사도 못 봤습니다. */
.pv-vf{ display:inline-flex; align-items:center; gap:3px; font-style:normal;
  font-size:var(--t-cap); font-weight:700; color:var(--gold-text);
  background:var(--gold-bg); border-radius:var(--r-pill); padding:3px 9px; }
/* 상세 화면의 확인 배지 줄 */
.pv-vf-l{ display:flex; flex-wrap:wrap; gap:var(--s2); list-style:none;
  padding:0; margin:0 0 var(--s4); }
/* 후기를 누가 · 무슨 일로 썼는지 */
.rv-who{ font-size:var(--t-cap); color:var(--ink2); font-weight:600;
  margin:var(--s2) 0 var(--s1); }
.pv-m{ font-size:var(--t-cap); color:var(--ink3); }
.pv-r{ display:flex; align-items:center; gap:6px; font-size:var(--t-sm); color:var(--ink2); }
.pv-r b{ color:var(--ink); }
.pv-r em{ font-style:normal; color:var(--ink3); font-size:var(--t-cap); }
.pv-r-none{ color:var(--ink3); font-size:var(--t-cap); }
.pv-i{ font-size:var(--t-sm); color:var(--ink2); line-height:1.7; margin-top:2px; }
@media (max-width:1040px){ .pv-g{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .pv-g{ grid-template-columns:1fr; } }

.pv-one-m{ display:flex; gap:var(--s8); flex-wrap:wrap; padding-bottom:var(--s7);
  border-bottom:1px solid var(--line); margin-bottom:var(--s7); }
.pv-stat{ display:grid; gap:2px; }
.pv-stat-v{ display:inline-flex; align-items:center; gap:5px;
  font-size:var(--t-2xl); font-weight:900; color:var(--ink); }
.pv-stat-v svg{ color:var(--warn); }
.pv-stat-l{ font-size:var(--t-cap); color:var(--ink3); }
.pv-sec{ margin-bottom:var(--s8); }
.pv-sec h2{ font-size:var(--t-xl); margin-bottom:var(--s4); }
.price-l{ display:grid; gap:var(--s2); }
.price-l li{ display:grid; grid-template-columns:1fr auto; gap:var(--s3);
  padding:var(--s4) var(--s5); background:var(--bg-2); border-radius:var(--r); }
.price-l em{ grid-column:1 / -1; font-style:normal; font-size:var(--t-cap); color:var(--ink3); }
.pf-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.pf{ display:grid; gap:4px; }
.pf .ph{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-lg); }
.pf b{ font-size:var(--t-base); }
.pf span{ font-size:var(--t-cap); color:var(--ink3); }
@media (max-width:700px){ .pf-g{ grid-template-columns:1fr 1fr; } }

.rv-l{ display:grid; gap:var(--s4); }
.rv{ padding:var(--s5) var(--s6); background:var(--bg-2); border-radius:var(--r-lg); }
.rv-t{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s2); }
.rv-t > b{ display:inline-flex; align-items:center; gap:4px; }
.rv-t svg{ color:var(--warn); }
.rv-bd{ display:inline-flex; align-items:center; gap:3px; font-style:normal;
  font-size:var(--t-cap); font-weight:700; color:var(--ok);
  background:var(--ok-bg); border-radius:var(--r-pill); padding:3px 9px; }
.rv-at{ margin-left:auto; font-size:var(--t-cap); color:var(--ink3); }
.rv p{ color:var(--ink2); line-height:1.8; }
.rv-ax{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s3);
  font-size:var(--t-cap); color:var(--ink3); }

/* 폰에서 늘 붙어 있는 CTA (§37) */
.sticky-cta{ display:none; }
@media (max-width:900px){
  .sticky-cta{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2);
    position:fixed; left:0; right:0; bottom:var(--mnav-h); z-index:55;
    padding:var(--s3) var(--s4); background:var(--surface);
    border-top:1px solid var(--line); }
  .sticky-cta .btn{ width:100%; }
  .sticky-cta:only-child{ grid-template-columns:1fr; }
}

/* ════════ 프랜차이즈 (§8) ════════════════════════════════════════ */
.fc-g{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s3); }
.fc{ display:grid; justify-items:center; text-align:center; gap:6px;
  padding:var(--s6) var(--s3); border-radius:var(--r-xl); background:var(--bg-2);
  transition:background .15s, transform .15s; }
.fc:hover{ background:var(--blue-50); transform:translateY(-2px); }
.fc-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px;
  background:var(--ic-bg, var(--blue-50)); color:var(--ic-ink, var(--blue)); }
.fc b{ font-size:var(--t-base); }
.fc-n{ font-size:var(--t-cap); color:var(--ink3); }
@media (max-width:900px){ .fc-g{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ .fc-g{ grid-template-columns:repeat(3,1fr); } }

.fr-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.fr{ display:grid; grid-template-rows:auto 1fr; border-radius:var(--r-xl);
  overflow:hidden; background:var(--bg-2); transition:transform .15s, box-shadow .2s; }
.fr:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.fr-ph{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--line-soft); }
.fr-ph .ph{ width:100%; height:100%; object-fit:cover; display:block; }
.fr-b{ display:grid; gap:5px; align-content:start; padding:var(--s5) var(--s6) var(--s6); }
.fr-b b{ font-size:var(--t-lg); }
.fr-i{ font-size:var(--t-sm); color:var(--ink2); }
.fr-m{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2); }
.fr-m em{ font-style:normal; font-size:var(--t-cap); font-weight:700; color:var(--ink2);
  background:var(--surface); border-radius:var(--r-pill); padding:4px 10px; }
@media (max-width:1040px){ .fr-g{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .fr-g{ grid-template-columns:1fr; } }

.cost-box{ background:var(--bg-2); border-radius:var(--r-2xl);
  padding:var(--s7); margin-bottom:var(--s8); }
.cost-top{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); padding-bottom:var(--s5); border-bottom:1px solid var(--line); }
.cost-top span{ font-size:var(--t-base); font-weight:700; color:var(--ink2); }
.cost-top b{ font-size:var(--t-2xl); font-weight:900; }
.cost-l{ display:grid; gap:var(--s2); margin-top:var(--s5); }
.cost-l li{ display:flex; justify-content:space-between; gap:var(--s4);
  font-size:var(--t-base); }
.cost-l span{ color:var(--ink2); }

.tick-l{ display:grid; gap:var(--s3); }
.tick-l li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3);
  align-items:start; color:var(--ok); }
.tick-l span{ color:var(--ink2); line-height:1.75; }
.tick-x li{ color:var(--ink3); }

/* ════════ 매물 (§9 · §23~25) ═════════════════════════════════════ */
.mk-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.mk{ display:grid; grid-template-rows:auto 1fr; border-radius:var(--r-xl);
  overflow:hidden; background:var(--bg-2); transition:transform .15s, box-shadow .2s; }
.mk:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.mk-ph{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--line-soft); }
.mk-ph .ph{ width:100%; height:100%; object-fit:cover; display:block; }
.mk-b{ display:grid; gap:5px; align-content:start; padding:var(--s5) var(--s6) var(--s6); }
.mk-m{ font-size:var(--t-cap); color:var(--ink3); }
.mk-m em{ font-style:normal; color:var(--blue); font-weight:700; }
.mk-b b{ font-size:var(--t-lg); }
.mk-p{ font-size:var(--t-base); font-weight:700; color:var(--ink); }
@media (max-width:1040px){ .mk-g{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .mk-g{ grid-template-columns:1fr; } }

/* 카드 맨 아래 "누를 수 있다" 줄 — 사진 → 정보 → CTA (§22).
   ⚠️ 카드 전체가 `<a>` 라 여기에 또 `<a>` 를 넣지 않습니다. 누르는
   것은 카드 한 장이므로 이 줄은 **40px 규칙에 걸리지 않습니다** —
   `<span>` 이고 onclick 도 없습니다. */
.mk-go{ display:inline-flex; align-items:center; gap:5px; margin-top:var(--s3);
  font-size:var(--t-sm); font-weight:700; color:var(--blue); }
.pv:hover .mk-go, .fr:hover .mk-go, .mk:hover .mk-go{ gap:9px; }

/* ════════ 매물 상세 (/s/:id · /a/:id) ════════════════════════════
   ⚠️ 값이 없는 칸은 `mkSpecs()` 가 **아예 안 넣습니다** — CSS 로
   숨기지 않습니다 (빈 상자가 칸 하나를 차지합니다). */
.mk-sp{ display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  list-style:none; margin:var(--s6) 0 var(--s8);
  border-top:1px solid var(--line); }
.mk-sp li{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line); }
.mk-sp-l{ font-size:var(--t-cap); color:var(--ink2); }
.mk-sp-v{ font-size:var(--t-base); font-weight:700; color:var(--ink);
  text-align:right; }
/* ⚠️ 매출은 **확인할 방법이 없는 값**입니다. 30px 으로 두었더니
   화면에서 제일 큰 숫자가 됐습니다 — 제일 못 믿을 숫자를 제일 크게
   내면 그게 지어낸 신뢰입니다. 조건표의 값들과 같은 무게로 둡니다. */
.mk-sales{ font-size:var(--t-xl); font-weight:800; color:var(--navy); }
.mk-text{ font-size:var(--t-base); color:var(--ink2); line-height:1.85;
  white-space:pre-line; }
.mk-gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.mk-gal .ph{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border-radius:var(--r-in); background:var(--line-soft); }
@media (max-width:700px){
  .mk-sp{ grid-template-columns:1fr; }
  .mk-gal{ grid-template-columns:1fr 1fr; }
}

/* ════════ 도움 카드 · 띠 CTA ═════════════════════════════════════ */
.help-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.help{ display:grid; align-content:start; gap:var(--s2);
  padding:var(--s6); border-radius:var(--r-xl); background:var(--bg-2);
  transition:transform .15s, box-shadow .2s; }
.help:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.help-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:13px; margin-bottom:var(--s2);
  background:var(--blue-50); color:var(--blue); }
.help > b{ font-size:var(--t-lg); }
.help-p{ font-size:var(--t-sm); color:var(--ink2); line-height:1.75; }
.help-go{ display:inline-flex; align-items:center; gap:5px; margin-top:var(--s3);
  font-size:var(--t-sm); font-weight:700; color:var(--blue); }
@media (max-width:900px){ .help-g{ grid-template-columns:1fr; } }

.band-cta{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s7); flex-wrap:wrap; padding:var(--s8);
  background:var(--bg-2); border-radius:var(--r-2xl); }
.sec-white .band-cta{ background:var(--bg-2); }
.band-cta h2{ font-size:var(--t-2xl); }
.band-cta .lead{ margin-top:var(--s3); max-width:56ch; font-size:var(--t-base); }
.band-cta-b{ background:var(--blue-50); }

/* 입점 띠 (메인) */
.join-b{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s9);
  align-items:center; }
.join-t h2{ font-size:var(--t-3xl); margin-bottom:var(--s4); }
.join-t .lead{ margin-bottom:var(--s7); }
.join-l{ display:grid; gap:var(--s4); }
.join-l li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3);
  align-items:start; color:var(--blue); }
/* ⚠️ **`display:grid` 인 칸에 글과 태그를 섞지 마세요.** 이 안에는
   `<b>` 와 맨글이 같이 있어서, grid 로 두면 `<b>` 가 딴 칸이 되고
   낱말이 딴 줄에 앉습니다. 전수 점검이 "칸1에 항목2" 로 잡습니다. */
.join-l span{ display:grid; gap:2px; }
.join-l b{ color:var(--ink); font-size:var(--t-base); }
.join-l i{ font-style:normal; color:var(--ink2); font-size:var(--t-sm); line-height:1.7; }
.join-cat{ margin-bottom:var(--s6); }
@media (max-width:980px){ .join-b{ grid-template-columns:1fr; gap:var(--s7); } }

/* ════════ 지원사업 · 정보 · 읽는 글 ══════════════════════════════ */
.sp-l{ display:grid; gap:var(--s4); }
.sp{ display:grid; gap:5px; padding:var(--s6); background:var(--bg-2);
  border-radius:var(--r-xl); }
.sp-m{ font-size:var(--t-cap); color:var(--ink3); }
.sp > b{ font-size:var(--t-lg); }
.sp > span{ font-size:var(--t-sm); color:var(--ink2); }
.sp em{ font-style:normal; display:inline-block; min-width:52px;
  font-weight:700; color:var(--ink); }
.sp-go{ display:inline-flex; align-items:center; gap:5px; min-height:44px;
  font-size:var(--t-sm); font-weight:700; color:var(--blue); }

/* ⚠️ 서른다섯 편이 한 줄로 내려가면 화면 다섯 개 높이가 됩니다.
   넓을 때는 두 칸으로 냅니다 — 좁히면 카드 안 글자 폭이 줄어 낱말
   가운데서 잘리므로(실제로 겪었습니다) 900px 부터만 나눕니다. */
.ct-l{ display:grid; gap:var(--s3); }
@media (min-width:900px){ .ct-l{ grid-template-columns:1fr 1fr; } }
.ct-l a{ display:grid; gap:4px; padding:var(--s6); background:var(--bg-2);
  border-radius:var(--r-xl); transition:transform .15s, box-shadow .2s; }
.ct-l a:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.ct-m{ font-size:var(--t-cap); color:var(--ink3); }
.ct-l b{ font-size:var(--t-lg); }
.ct-p{ font-size:var(--t-sm); color:var(--ink2); line-height:1.7; }
/* 두 번째 거르개 줄(분야) — 첫 줄과 붙어 보이지 않게 위만 당깁니다.
   ⚠️ 첫 줄의 .chip-g-fil 이 이미 아래 여백을 갖고 있습니다 */
.ct-f2{ margin-top:calc(var(--s6) * -1 + var(--s3)); }

.read{ max-width:var(--w-read); }
.read h2{ font-size:var(--t-xl); margin:var(--s8) 0 var(--s4); }
.read p{ color:var(--ink2); line-height:1.9; margin-bottom:var(--s4); }
.read ul{ display:grid; gap:var(--s2); margin-bottom:var(--s5); padding-left:var(--s5); }
.read li{ color:var(--ink2); line-height:1.8; list-style:disc; }
.src{ background:var(--bg-2); border-radius:var(--r-lg); padding:var(--s5) var(--s6);
  margin:var(--s8) 0; font-size:var(--t-sm); color:var(--ink2); }
.src b{ display:block; color:var(--ink); margin-bottom:var(--s2); }
.src li{ line-height:1.8; }
.two-list{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s9); }
.two-list h2{ font-size:var(--t-xl); margin-bottom:var(--s5); }
@media (max-width:820px){ .two-list{ grid-template-columns:1fr; gap:var(--s7); } }

/* ════════ 어디서 찾는가 (/support) ══════════════════════════════
   ⚠️ 여기는 **기관**까지입니다. 개별 공고를 카드로 만들지 마세요 —
   해마다 바뀌고 예산이 소진되면 닫힙니다. */
.spw-l{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.spw{ display:grid; align-content:start; gap:var(--s3); min-width:0;
  padding:var(--s6); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-card); }
.spw > b{ font-size:var(--t-lg); line-height:1.4; color:var(--navy); }
.spw-w{ font-size:var(--t-sm); color:var(--ink2); line-height:1.8; }
/* ⚠️ **맨글을 섞지 않습니다.** `em` 을 `display:block` 으로 만들어
   줄을 나누려 하면 "문장 속 block" 으로 걸립니다 — 이미 한 번 겪은
   길입니다. 칸을 둘로 나누고 글도 태그(`i`)로 감쌉니다. */
.spw-f{ display:grid; gap:2px; font-size:var(--t-sm); color:var(--ink2);
  line-height:1.8; padding-top:var(--s3); border-top:1px solid var(--line-soft); }
.spw-f > em{ font-style:normal; font-size:var(--t-cap);
  font-weight:800; color:var(--blue); }
.spw-f > i{ font-style:normal; }
.spw-go{ display:inline-flex; align-items:center; gap:6px; min-height:40px;
  font-size:var(--t-sm); font-weight:700; color:var(--blue); width:fit-content; }
@media (max-width:820px){ .spw-l{ grid-template-columns:1fr; } }

/* ════════ 검색 ═══════════════════════════════════════════════════ */
.sb{ display:flex; align-items:center; gap:var(--s3); padding:var(--s3);
  background:var(--bg-2); border-radius:var(--r-xl); margin-bottom:var(--s8); }
.sb-ic{ display:inline-flex; padding-left:var(--s3); color:var(--ink3); }
.sb input{ flex:1 1 auto; min-width:0; border:0; background:transparent;
  font-size:var(--t-lg); min-height:52px; padding:0; }
.sb input:focus{ box-shadow:none; background:transparent; }
.sb .btn{ flex:none; }
.sr-hint b{ display:block; margin-bottom:var(--s3); font-size:var(--t-base); }
.sr-g{ margin-bottom:var(--s8); }
.sr-g h2{ font-size:var(--t-xl); margin-bottom:var(--s4); }
.sr-g h2 em{ font-style:normal; color:var(--ink3); font-size:var(--t-base); }
.sr-l{ display:grid; gap:var(--s2); }
.sr-l a{ display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:var(--s2) var(--s4); padding:var(--s4) var(--s5);
  background:var(--bg-2); border-radius:var(--r-lg); }
.sr-l a:hover{ background:var(--blue-50); }
/* ⚠️ `.sr-l span` 은 `.sr-go` 보다 **진한 선택자**입니다
   (클래스1+타입2 vs 클래스1). 그래서 화살표가 1번 칸으로 끌려가고
   제목이 2번 칸으로 밀려, 폰에서 글 칸이 13px 로 쪼그라들어 한
   낱말이 53줄이 됐습니다 — 에러도 가로 스크롤도 안 났습니다.
   덮어쓰는 쪽을 **같은 진하기 이상으로** 다시 써야 합니다. */
.sr-l a > b{ grid-column:1; font-size:var(--t-base); }
.sr-l a > span{ grid-column:1; font-size:var(--t-cap); color:var(--ink3); }
.sr-l a > .sr-go{ grid-column:2; grid-row:1 / span 2; color:var(--ink3); }

/* ════════ MY ═════════════════════════════════════════════════════ */
.my-set{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5);
  padding:var(--s6); background:var(--bg-2); border-radius:var(--r-2xl);
  margin-bottom:var(--s8); }
.my-set .f-r{ margin-bottom:0; }
.my-next{ margin-bottom:var(--s8); }
.my-next h2{ font-size:var(--t-xl); margin-bottom:var(--s4); }
.my-next .row-cta{ margin-top:var(--s5); }
@media (max-width:820px){ .my-set{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .my-set{ grid-template-columns:1fr; } }

/* ════════ 견적 비교 표 ═══════════════════════════════════════════
   ⚠️ 질문은 낱말이 아니라 문장이라 `white-space:nowrap` 을 주면 표가
   화면 밖으로 끝없이 늘어납니다. */
.qc-wrap{ overflow-x:auto; margin-bottom:var(--s5); }
.qc-t{ width:100%; border-collapse:collapse; min-width:520px; }
.qc-t th,.qc-t td{ padding:var(--s3); border:1px solid var(--line);
  text-align:left; vertical-align:top; white-space:normal; }
.qc-t thead th{ background:var(--bg-2); font-size:var(--t-sm); position:relative; }
.qc-t tbody th{ background:var(--bg-2); font-size:var(--t-sm); width:110px;
  font-weight:700; color:var(--ink2); }
.qc-t td input{ min-height:40px; padding:8px var(--s3); background:var(--surface); }
.qc-x{ position:absolute; right:6px; top:6px; border:0; background:transparent;
  color:var(--ink3); cursor:pointer; padding:4px; line-height:0; }

/* ════════ 분류색 — 아이콘 타일 · 배지 · 칩에만 ═══════════════════
   ⚠️ 구간 배경 · 카드 전체 · 버튼에 쓰지 마세요. 브랜드는 파랑 하나입니다.
   ⚠️ 되돌림 값을 빼지 마세요 — tone 이 안 붙은 자리는 파랑이어야 합니다. */
.tn-t1{ --ic-ink:var(--tn1-ink); --ic-bg:var(--tn1-bg); }
.tn-t2{ --ic-ink:var(--tn2-ink); --ic-bg:var(--tn2-bg); }
.tn-t3{ --ic-ink:var(--tn3-ink); --ic-bg:var(--tn3-bg); }
.tn-t4{ --ic-ink:var(--tn4-ink); --ic-bg:var(--tn4-bg); }
.tn-t5{ --ic-ink:var(--tn5-ink); --ic-bg:var(--tn5-bg); }
.tn-t6{ --ic-ink:var(--tn6-ink); --ic-bg:var(--tn6-bg); }
.tn-t7{ --ic-ink:var(--tn7-ink); --ic-bg:var(--tn7-bg); }
.tn-t8{ --ic-ink:var(--tn8-ink); --ic-bg:var(--tn8-bg); }
.tn-t9{ --ic-ink:var(--tn9-ink); --ic-bg:var(--tn9-bg); }
.tn-t10{ --ic-ink:var(--tn10-ink); --ic-bg:var(--tn10-bg); }
.tn-t11{ --ic-ink:var(--tn11-ink); --ic-bg:var(--tn11-bg); }
.tn-t12{ --ic-ink:var(--tn12-ink); --ic-bg:var(--tn12-bg); }
.tn-t13{ --ic-ink:var(--tn13-ink); --ic-bg:var(--tn13-bg); }
.tn-t14{ --ic-ink:var(--tn14-ink); --ic-bg:var(--tn14-bg); }

/* ════════ 약관 · 개인정보처리방침 ════════════════════════════════
   ⚠️ 클래스 이름이 헤더 로고(`.lg`)와 겹치지 않게 `.lgp` 로 둡니다.
   예전에 둘 다 `.lg` 였다가 약관 쪽 padding 이 로고에 먹어서 **모든
   화면에서 로고 윗부분이 잘려** 있었습니다.
   ⚠️ 목차와 되돌아가기는 **누르는 것**입니다 — 40px 이상. */
.lgp{ padding:var(--s9) 0 var(--s11); max-width:var(--w-read); }
.back-l{ display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-sm); font-weight:700; color:var(--ink2); }
.back-l:hover{ color:var(--blue); }
.lg-hd{ margin:var(--s5) 0 var(--s7); }
.lg-hd h1{ font-size:var(--t-3xl); }
.lg-eff{ margin-top:var(--s3); font-size:var(--t-sm); color:var(--ink3); }
.lg-intro{ padding:var(--s6); background:var(--bg-2); border-radius:var(--r-lg);
  color:var(--ink2); line-height:1.85; margin-bottom:var(--s8); }
.lg-toc{ display:grid; gap:2px; padding:var(--s5) var(--s6);
  background:var(--bg-2); border-radius:var(--r-lg); margin-bottom:var(--s9); }
.lg-toc a{ display:flex; align-items:center; min-height:40px;
  font-size:var(--t-sm); color:var(--ink2); }
.lg-toc a:hover{ color:var(--blue); }
.lg-a{ margin-bottom:var(--s8); scroll-margin-top:calc(var(--hdr-h) + 16px); }
/* ⚠️ `.lg-t` · `.lg-t3` 를 되살리지 마세요. 조문 제목용으로 만든
   이름인데 표(`<table class="lg-t">`)가 그걸 쓰고 있어서, 표 글씨가
   제목 크기(23px)로 나오고 표 스타일은 하나도 안 먹었습니다. 그 결과
   수탁자 칸이 99px 로 쪼그라들어 "Slack Technologies, LLC" 가 네 줄로
   쪼개졌습니다 — 에러도 가로 스크롤도 안 났습니다. 표는 `.lg-cols`
   하나뿐입니다. */
.lg-sub{ font-size:var(--t-base); font-weight:700; margin:var(--s5) 0 var(--s2); }
.lg-body{ display:grid; gap:var(--s3); }
.lg-p{ color:var(--ink2); line-height:1.9; }
.lg-n{ font-size:var(--t-sm); color:var(--ink3); }
.lg-none{ color:var(--ink3); }
.lg-tag{ color:var(--blue-600); display:inline-flex; align-items:center; font-size:var(--t-cap);
  font-weight:700; color:var(--blue); background:var(--blue-50);
  border-radius:var(--r-pill); padding:4px 11px; margin-bottom:var(--s3); }
.lg-cols{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.lg-cols th,.lg-cols td{ padding:var(--s3) var(--s4); border:1px solid var(--line);
  text-align:left; vertical-align:top; color:var(--ink2); }
.lg-cols th{ background:var(--bg-2); color:var(--ink); white-space:nowrap; }
.lg-fin{ margin-top:var(--s9); padding-top:var(--s6); border-top:1px solid var(--line); }
.lg-tail{ margin-bottom:0; }
/* ⚠️ 좁은 화면에서 표를 **세로로 폅니다.** 세 칸을 그대로 두면 첫
   칸이 99px 이 되어 회사 이름이 글자 단위로 쪼개집니다. 가로
   스크롤로 두면 손님이 오른쪽에 뭐가 있는지 모릅니다.
   ⚠️ 칸 앞에 `data-h` 로 제목을 붙여야 어느 칸인지 알 수 있습니다 —
   세로로 펴면 머리글 줄이 안 보이기 때문입니다. */
@media (max-width:640px){
  .lg-cols, .lg-cols tbody, .lg-cols tr, .lg-cols td{ display:block; width:100%; }
  .lg-cols thead{ display:none; }
  .lg-cols tr{ border:1px solid var(--line); border-radius:var(--r-lg);
    padding:var(--s4); margin-bottom:var(--s3); }
  .lg-cols td{ border:0; padding:var(--s2) 0; }
  .lg-cols td::before{ content:attr(data-h); display:block;
    font-size:var(--t-cap); font-weight:700; color:var(--ink3);
    margin-bottom:2px; }
  /* ⚠️ `data-h` 가 없는 칸에는 빈 상자를 만들지 마세요 — 빈 문자열은
     "없음" 이 아니라 높이 있는 상자입니다. */
  .lg-cols td:not([data-h])::before{ content:none; }
}

/* ════════ 서비스 허브 (/home) ═══════════════════════════════════
   ⚠️ 랜딩(`/`)이 아닙니다. 랜딩은 3초 안에 무엇인지 알리는 화면이고
   여기는 **기능이 다 모인 화면**입니다 (지시서 §1 · §20).
   ⚠️ 클래스 이름을 `hb-` 로 시작하게 두었습니다 — `landing.css` 가
   이 파일 **뒤에** 실려서, 이름이 겹치면 여기가 조용히 집니다. */
.hb-two{ display:grid; gap:var(--s5); grid-template-columns:1fr 1fr; }
.hb-b{ position:relative; display:grid; gap:var(--s2);
  align-content:center; min-height:190px; padding:var(--s7);
  border-radius:var(--r-3xl); transition:transform .15s, box-shadow .2s; }
.hb-b:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.hb-b-st{ background:var(--start-soft); }
.hb-b-cl{ background:var(--close-soft); }
.hb-b-k{ font-size:var(--t-sm); font-weight:800; letter-spacing:.12em; }
.hb-b-st .hb-b-k{ color:var(--start-dark); }
.hb-b-cl .hb-b-k{ color:var(--close-dark); }
.hb-b b{ font-size:var(--t-3xl); font-weight:900; letter-spacing:-.03em;
  color:var(--navy); }
.hb-b i{ font-style:normal; font-size:var(--t-md); color:var(--ink2); }
/* 그 쪽에 실제로 무엇이 있는지 — 분야 이름 몇 개와 센 값.
   ⚠️ 칩은 누르는 것이 아닙니다(카드 전체가 링크). 그래서 40px 규칙이
   아니라 읽는 글 크기로 둡니다 — 13px(--t-cap)이 하한입니다. */
.hb-b-c{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s2); }
.hb-b-c > span{ font-size:var(--t-cap); font-weight:700; line-height:1.2;
  padding:5px 10px; border-radius:999px; background:var(--surface);
  color:var(--ink2); }
.hb-b-st .hb-b-c > span{ color:var(--start-dark); }
.hb-b-cl .hb-b-c > span{ color:var(--close-dark); }
.hb-b-c .hb-b-c-m{ background:transparent; color:var(--ink3); padding-left:2px; }
.hb-b-n{ margin-top:var(--s2); font-size:var(--t-cap); font-weight:800;
  letter-spacing:.02em; color:var(--ink3); }
.hb-b-go{ position:absolute; right:var(--s6); top:var(--s6);
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px; background:var(--surface); }
.hb-b-st .hb-b-go{ color:var(--start-dark); }
.hb-b-cl .hb-b-go{ color:var(--close-dark); }

.hb-g{ display:grid; gap:var(--s4); grid-template-columns:repeat(4,1fr); }
.hb-g a{ display:grid; gap:var(--s2); align-content:start;
  min-height:172px; padding:var(--s6); border-radius:var(--r-2xl);
  background:var(--surface); box-shadow:var(--shadow-card);
  transition:transform .15s, box-shadow .2s; }
.hb-g a:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card-h); }
.hb-i{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-lg);
  background:var(--blue-50); color:var(--blue); }
/* ⚠️ grid 칸에 맨글과 태그를 섞지 마세요 — `<b>` 가 딴 칸이 됩니다.
   제목과 개수를 **감싸개 하나** 안에 넣고 그 안에서 다시 폅니다. */
.hb-t{ display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap; }
.hb-t b{ font-size:var(--t-lg); font-weight:800; color:var(--ink); }
.hb-t em{ font-style:normal; font-size:var(--t-cap); font-weight:700;
  color:var(--ink3); }
.hb-g i{ font-style:normal; font-size:var(--t-sm); line-height:1.65;
  color:var(--ink2); }

/* 업체 입점 — ⚠️ 남색을 넓게 쓰는 자리는 푸터뿐이라 **카드 한 장**까지 */
.hb-jn{ border-radius:var(--r-3xl); background:var(--navy-dark);
  padding:var(--s8); display:grid; gap:var(--s6);
  grid-template-columns:1fr auto; align-items:center; }
.hb-jn-k{ font-size:var(--t-sm); font-weight:800; letter-spacing:.14em;
  color:var(--gold-on-dark); }
.hb-jn-t h2{ margin-top:var(--s2); font-size:var(--t-2xl); color:#fff; }
.hb-jn-t p{ margin-top:var(--s3); font-size:var(--t-md); line-height:1.7;
  color:rgba(255,255,255,.82); max-width:56ch; }
.hb-jn .btn-w{ min-height:52px; padding:0 var(--s6); font-weight:800;
  color:var(--navy-dark); }

@media (max-width:1100px){ .hb-g{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){
  .hb-two{ grid-template-columns:1fr; }
  .hb-b{ min-height:0; padding:var(--s6); }
  .hb-jn{ grid-template-columns:1fr; }
}
@media (max-width:520px){ .hb-g{ grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════════
   서비스 메인 (/home) — 2026-09-30 메인 개편 지시서

   ⚠️ 이 구간 규칙을 랜딩(css/landing.css)에 쓰지 마세요. 두 화면은
   역할이 다릅니다 (§3).
   ⚠️ 구간 바탕은 §31 의 차례입니다 — 같은 색이 두 번 이어지면 두
   구간이 한 구간으로 읽힙니다.
   ══════════════════════════════════════════════════════════════════ */

/* 구간 바탕 — 2026-10-01 §2 · §21 의 밝은 아홉 가지에서만 고릅니다.
   ⚠️ 한 가지 흰색으로만 만들지 않습니다. 구간마다 번갈아 칠해서
   스크롤에 리듬을 냅니다. */
.sec-cream { background:var(--bg-cream); }
.sec-gray  { background:var(--bg-gray); }
.sec-ivory { background:var(--bg-ivory2); }
.sec-start { background:var(--bg-mint); }
/* §15 — 가격은 Sky Tint 입니다. 바로 앞 매장 구간이 Mint 라 밝기는
   비슷하지만 **치우친 채널이 다릅니다** (민트 G>B>R · 하늘 B>G>R).
   사람 눈은 그 차이를 봅니다 — 검사도 그렇게 봅니다. */
.sec-blue  { background:var(--bg-sky); }

/* ── 아이콘 타일 (§7 · §28) ────────────────────────────────────────
   ⚠️⚠️ **아이콘 크기 · 컨테이너 · 선 굵기 · 모서리를 한 곳에서 정합니다.**
   화면마다 따로 적으면 한 페이지 안에서 아이콘이 제각각이 됩니다 (§29).
   색은 `--ic-ink` / `--ic-bg` 두 변수로만 들어옵니다 — 쓰는 쪽에서
   그 둘만 바꾸면 되고, 아이콘 자체는 손댈 일이 없습니다. */
.ic-t{ display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:52px; height:52px; border-radius:16px;
  background:var(--ic-bg, var(--blue-soft)); color:var(--ic-ink, var(--blue));
  transition:background .2s, color .2s; }
.ic-t svg{ width:27px; height:27px; }
@media (max-width:760px){
  .ic-t{ width:46px; height:46px; border-radius:14px; }
  .ic-t svg{ width:25px; height:25px; }
}
/* 의미가 있는 악센트 한 벌 (§27) — 이름이 곧 뜻입니다 */
.hv-st{ --ic-ink:var(--start-dark); --ic-bg:var(--start-soft); }
.hv-cl{ --ic-ink:var(--close-dark); --ic-bg:var(--close-soft); }
.hv-bl{ --ic-ink:var(--blue-600);   --ic-bg:var(--blue-soft); }
.hv-pu{ --ic-ink:var(--purple);     --ic-bg:var(--purple-soft); }
.hv-pk{ --ic-ink:var(--pink);       --ic-bg:var(--pink-soft); }
.hv-gd{ --ic-ink:var(--gold-ink, #A97F2E); --ic-bg:var(--gold-soft); }
.hv-tl{ --ic-ink:var(--teal);       --ic-bg:var(--teal-soft); }
.hv-sl{ --ic-ink:var(--slate);      --ic-bg:var(--slate-soft); }
/* ══════════════════════════════════════════════════════════════════
   ① 히어로 (2026-10-01 지시서 §4 ~ §10 · §25)
   ══════════════════════════════════════════════════════════════════
   ⚠️⚠️ **어두운 전면 배경을 쓰지 마세요.** 바탕은 크림이고, 좌우로
   아주 옅은 민트 · 피치가 깔립니다. 임팩트는 어둡게 해서 내는 것이
   아니라 **큰 글씨 · 큰 검색창 · 초록/주황 악센트 · 넓은 여백**으로
   냅니다 (§25). 전수 점검이 어두운 면 15% 를 잽니다.

   ⚠️ 데스크톱 첫 화면 **680~760px** (§4). 검사가 660px 아래면 잡습니다. */
/* ⚠️⚠️ **2026-10-03 리뉴얼 — 히어로가 START/CLOSE 두 장이 됐습니다**
   (지시서 §3 ~ §6). 전에는 왼쪽 글 + 오른쪽 비주얼 한 판이었습니다.

   ⚠️⚠️ **어두운 면 규칙이 한 번 뒤집혔습니다.** CLAUDE.md 는 "어두운
   배경을 쓸 수 있는 자리는 업체 입점 카드 하나뿐 · 히어로에는 쓰지
   않습니다" 였습니다. 지시서 §4 가 "사진 위에 Dark Navy Overlay" 로
   **직접 지시**했습니다. 지키는 것은 **면적**입니다 — 전수 점검이
   푸터를 포함한 문서 전체에서 어두운 면 15% 를 재고, 재 보니 이
   카드까지 넣어도 한참 아래입니다. 그 검사를 약하게 만들지 마세요.

   ⚠️ **두 장의 크기 · 비율이 같아야 합니다** (§3 "50:50에 가까운").
   한쪽을 좁히면 그게 "덜 중요한 것" 이라는 말입니다. */
.mh{ background:var(--bg-cream); padding:var(--s4) 0 0; }
.mh2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mh2-c{ position:relative; overflow:hidden; border-radius:var(--r-2xl);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:var(--s8); min-height:540px; padding:var(--s9) var(--s8) var(--s7); }
/* 사진은 액자째 바닥에 깔리고, 그 위에 막이 덮입니다. 0장이면 둘 다
   없고 카드 **자신의 바탕색**이 그 자리를 지킵니다 (절대 규칙 2). */
.mh2-ph{ position:absolute; inset:0; margin:0; z-index:0; }
.mh2-ph .ph{ width:100%; height:100%; object-fit:cover; border-radius:0; }
.mh2-c::after{ content:""; position:absolute; inset:0; z-index:1; }
.mh2-noph::after{ content:none; }
.mh2-b, .mh2-q{ position:relative; z-index:2; }

.mh2-st{ background:var(--navy-dark); color:#fff; }
.mh2-st::after{ background:linear-gradient(100deg,
  rgba(6,43,81,.93) 0%, rgba(6,43,81,.70) 58%, rgba(6,43,81,.52) 100%); }
/* ⚠️ Warm Beige 입니다 — 아홉 바탕 중 아직 안 쓰던 `--bg-sand`.
   왼쪽이 짙은 남색이라 오른쪽은 **밝아야** 대비가 납니다 (§5). */
.mh2-cl{ background:var(--bg-sand); color:var(--ink); }
.mh2-cl::after{ background:linear-gradient(100deg,
  rgba(250,244,232,.95) 0%, rgba(250,244,232,.76) 58%, rgba(250,244,232,.58) 100%); }

.mh2-k{ display:flex; align-items:center; gap:10px;
  font-size:var(--t-sm); letter-spacing:.12em; }
.mh2-k b{ font-weight:900; }
.mh2-k span{ letter-spacing:0; font-weight:600; font-size:var(--t-cap); }
.mh2-k span::before{ content:"|"; margin-right:10px; opacity:.5; }
.mh2-st .mh2-k b{ color:#fff; }
.mh2-st .mh2-k span{ color:rgba(255,255,255,.80); }
.mh2-cl .mh2-k b{ color:var(--close-deep); }
.mh2-cl .mh2-k span{ color:var(--ink2); }

/* ⚠️ 한 글자(창업 · 폐업)가 주인공입니다 — 잔 요소를 더하지 마세요 */
.mh2-h{ margin-top:var(--s4); font-size:clamp(48px, 4.6vw, 68px);
  font-weight:900; letter-spacing:-.03em; line-height:1.05; }
.mh2-st .mh2-h{ color:#fff; }
.mh2-cl .mh2-h{ color:var(--ink); }
.mh2-d{ margin-top:var(--s5); font-size:var(--t-lg); font-weight:600;
  line-height:1.6; }
.mh2-st .mh2-d{ color:rgba(255,255,255,.88); }
.mh2-cl .mh2-d{ color:var(--ink2); }
.mh2-go{ margin-top:var(--s7); }

/* 빠른 진입 여섯 — ⚠️ 누르는 칸입니다. 40px 아래로 내리지 마세요. */
.mh2-q{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s2);
  margin-top:var(--s8); }
.mh2-q > li{ min-width:0; }
.mh2-q a{ display:grid; justify-items:center; gap:8px; text-align:center;
  min-height:76px; padding:8px 2px; border-radius:var(--r-lg);
  transition:background .2s; }
.mh2-qi{ display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--r-pill); }
.mh2-q b{ font-size:var(--t-cap); font-weight:700; line-height:1.35; }
.mh2-st .mh2-qi{ background:rgba(255,255,255,.14); color:#fff; }
.mh2-st .mh2-q b{ color:rgba(255,255,255,.90); }
.mh2-st .mh2-q a:hover{ background:rgba(255,255,255,.10); }
.mh2-cl .mh2-qi{ background:#fff; color:var(--close-deep);
  box-shadow:0 2px 8px rgba(15,43,68,.07); }
.mh2-cl .mh2-q b{ color:var(--ink2); }
.mh2-cl .mh2-q a:hover{ background:rgba(255,255,255,.60); }

/* 밝은 카드 위의 CLOSE 단추 — ⚠️ 주황이지 빨강이 아닙니다 */
.btn-cd{ background:var(--close-deep); color:#fff; border-color:var(--close-deep); }
.btn-cd:hover{ filter:brightness(.94); color:#fff; }

/* ══════════════════════════════════════════════════════════════════
   ② 브랜드 가치 넷 (지시서 §7)
   ══════════════════════════════════════════════════════════════════
   ⚠️⚠️ 이 구간의 h2 자리가 화면의 **h1** 입니다 — 히어로 두 장이
   똑같이 중요해서 한쪽만 h1 으로 올릴 수가 없습니다. */
.mval-k{ letter-spacing:.3em; }
.mval-h{ margin-top:var(--s3); font-size:clamp(28px, 2.9vw, 42px);
  font-weight:900; letter-spacing:-.03em; line-height:1.3; color:var(--navy); }
.mval-h em{ font-style:normal; }
/* ⚠️⚠️ 이 두 줄을 지우지 마세요 — 히어로 CSS 와 함께 지웠다가 제목의
   "폐업" 이 남색이 됐습니다. 창업은 초록 · 폐업은 **주황**(빨강이
   아닙니다)이고, 글자로 쓰는 색이라 **짙은 쪽**을 씁니다. */
.mh-st{ color:var(--start-dark); }
.mh-cl{ color:var(--close-dark); }
.mval-g{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6);
  margin-top:var(--s8); }
.mval-g > li{ display:flex; align-items:flex-start; gap:var(--s4); min-width:0; }
.mval-i{ flex:0 0 auto; display:inline-flex; align-items:center;
  justify-content:center; width:52px; height:52px; border-radius:var(--r-pill);
  background:var(--bg-sky); color:var(--navy); }
.mval-t{ display:grid; gap:4px; min-width:0; }
.mval-t b{ font-size:var(--t-md); font-weight:800; color:var(--ink); }
.mval-t i{ font-style:normal; font-size:var(--t-cap); color:var(--ink2);
  line-height:1.55; }

/* ══════════════════════════════════════════════════════════════════
   ⑥ 큰 카드 셋 — 프랜차이즈 · 점포 · 인테리어 (지시서 §10 · §11)
   ══════════════════════════════════════════════════════════════════
   ⚠️ 사진이 들어오면 사진이 주인공이 되고 글은 막 위에 앉습니다.
   0장이면 **옅은 바탕 + 큰 아이콘**으로 자리를 지킵니다 — "이미지
   준비 중" 같은 자리표시자를 찍지 않습니다. */
.mfeat-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.mfeat-c{ position:relative; overflow:hidden; display:flex;
  min-height:300px; border-radius:var(--r-2xl); border:1px solid var(--line);
  transition:transform .25s, box-shadow .25s; }
.mfeat-c:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(15,43,68,.10); }
.mfeat-ph{ position:absolute; inset:0; margin:0; z-index:0; }
.mfeat-ph .ph{ width:100%; height:100%; object-fit:cover; border-radius:0; }
.mfeat-c::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,43,81,.30) 0%, rgba(6,43,81,.82) 100%); }
.mfeat-noph::after{ content:none; }
.mfeat-b{ position:relative; z-index:2; display:flex; flex-direction:column;
  gap:6px; align-self:flex-end; padding:var(--s7) var(--s6) var(--s6); }
.mfeat-k{ font-style:normal; font-size:var(--t-cap); font-weight:800;
  letter-spacing:.18em; }
.mfeat-h{ font-size:var(--t-2xl); font-weight:900; letter-spacing:-.02em;
  line-height:1.3; }
.mfeat-d{ font-style:normal; margin-top:4px; font-size:var(--t-cap);
  line-height:1.6; }
.mfeat-go{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  min-height:40px; margin-top:var(--s4); padding:0 var(--s5);
  border-radius:var(--r-pill); font-size:var(--t-cap); font-weight:800; }
/* 사진이 있을 때 — 흰 글자 */
.mfeat-c:not(.mfeat-noph) .mfeat-k{ color:var(--gold-on-dark); }
.mfeat-c:not(.mfeat-noph) .mfeat-h,
.mfeat-c:not(.mfeat-noph) .mfeat-d{ color:#fff; }
.mfeat-c:not(.mfeat-noph) .mfeat-go{ background:#fff; color:var(--navy); }
/* 사진이 0장일 때 — 옅은 바탕에 남색 글 (⚠️ 셋이 서로 다른 바탕) */
.mfeat-noph .mfeat-k{ color:var(--ink3); }
.mfeat-noph .mfeat-h{ color:var(--navy); }
.mfeat-noph .mfeat-d{ color:var(--ink2); }
.mfeat-noph .mfeat-go{ background:var(--navy); color:#fff; }
.mfeat-noph.mfeat-franchise{ background:var(--bg-sky); }
.mfeat-noph.mfeat-store{ background:var(--bg-ivory2); }
.mfeat-noph.mfeat-interior{ background:var(--bg-sand); }
.mfeat-ic{ position:absolute; right:-14px; top:-10px; z-index:1;
  color:var(--navy); opacity:.08; pointer-events:none; }

/* ══════════════════════════════════════════════════════════════════
   ⑦ 주요 서비스 여덟 (지시서 §12 · §13)
   ══════════════════════════════════════════════════════════════════
   ⚠️ "지금 많이 찾는" 이 아닙니다 — 이용 데이터를 안 모읍니다. */
.msvc-g{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }
.msvc-g a{ display:grid; gap:4px; height:100%; padding-bottom:var(--s4);
  border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  border:1px solid var(--line); transition:transform .25s, box-shadow .25s; }
.msvc-g a:hover{ transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(15,43,68,.10); }
.msvc-ph{ display:block; aspect-ratio:16/10; }
.msvc-ph .ph{ width:100%; height:100%; object-fit:cover; border-radius:0; }
/* 사진이 0장이면 분류 아이콘이 자리를 지킵니다 */
.msvc-ph-n{ display:flex; align-items:center; justify-content:center;
  background:var(--ic-bg); color:var(--ic-ink); }
.msvc-g b{ margin-top:var(--s4); padding:0 var(--s5);
  font-size:var(--t-md); font-weight:800; color:var(--ink); }
.msvc-g i{ font-style:normal; padding:0 var(--s5); font-size:var(--t-cap);
  color:var(--ink2); line-height:1.55; }


/* ══════════════════════════════════════════════════════════════════
   ② 범위 숫자 띠 (§11)
   ══════════════════════════════════════════════════════════════════
   ⚠️ 히어로에 **붙는** 띠라 위 여백이 없습니다. 구간으로 떼어 놓으면
   첫 화면이 길어져 START/CLOSE 가 밀립니다. */
/* ⚠️ 2026-10-03 — 히어로 안의 얇은 띠에서 **자기 구간**으로 커졌습니다
   (지시서 §3 · §8). 숫자가 "작은 정보" 가 아니라 **규모를 말하는
   Brand Asset** 이 되는 것이 목표입니다. */
.mnum{ padding-top:var(--s9); padding-bottom:var(--s9); }
.mst-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6);
  padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
/* 시안(AFTER)처럼 **테두리 카드**에 담습니다 — 숫자가 "작은 정보" 가
   아니라 규모를 말하는 한 덩어리로 읽히게. */
.mst-box{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s7); flex-wrap:wrap; padding:var(--s7) var(--s8);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-soft); }
.mst-box > .mst-g{ flex:1 1 520px; }
.mst-g > li{ display:grid; gap:4px; justify-items:center; text-align:center;
  position:relative; }
/* 영문은 장식입니다 — ⚠️ 한글 이름을 지우지 마세요.
   ⚠️⚠️ **11.5px 로 두었다가 전수 점검에 네 폭 전부 걸렸습니다.**
   12px 미만은 금지이고 제일 작은 단계가 `--t-cap` 13px 입니다 —
   아래 네비가 11.5px 로 175건 걸렸던 것과 **똑같은 자리**입니다.
   작아 보이게 하려면 크기가 아니라 **자간과 색**으로 합니다. */
.mst-k{ font-size:var(--t-cap); font-weight:800; letter-spacing:.08em;
  color:var(--ink3); }
/* 칸 사이 얇은 금 — ⚠️ 테두리 상자로 묶으면 다시 "작은 정보" 가 됩니다 */
.mst-g > li + li::before{ content:""; position:absolute; left:calc(var(--s6) / -2);
  top:12%; bottom:12%; width:1px; background:var(--line); }
.mst-g b{ font-size:var(--t-num); font-weight:900; letter-spacing:-.04em;
  color:var(--navy); line-height:1; }
.mst-g i{ font-style:normal; font-size:var(--t-base); font-weight:700;
  color:var(--ink2); }
@media (max-width:700px){
  /* ⚠️ 폰에서도 **3열을 지킵니다** (지시서 §8) — 세로로 쌓으면 세 숫자가
     한눈에 안 들어옵니다. 숫자만 줄입니다. */
  .mst-g{ gap:var(--s4); }
  .mst-g b{ font-size:var(--t-num-s); }
  .mst-g i{ font-size:var(--t-cap); }
  .mst-g > li + li::before{ left:calc(var(--s4) / -2); }
}
/* ⚠️ **이 줄을 숨기지 마세요.** 숫자만 띄우면 "업체가 183곳" 으로
   읽힙니다 — 폰에서도 보입니다. */
.mst-n{ display:flex; align-items:center; gap:7px; flex:0 1 auto;
  margin:0; font-size:var(--t-cap); color:var(--ink2); }
.mst-n svg{ flex:0 0 auto; color:var(--ink3); }
.mst-n b{ color:var(--navy); }
@media (max-width:900px){
  .mst-box{ justify-content:center; padding:var(--s6) var(--s5); }
  .mst-n{ justify-content:center; text-align:center; }
}

/* ══════════════════════════════════════════════════════════════════
   ③ START / CLOSE 큰 카드 (§13 ~ §16)
   ══════════════════════════════════════════════════════════════════
   ⚠️ **두 카드의 크기와 비율이 같아야 합니다** — 1fr 1fr 에
   `align-items:stretch` 입니다. 폐업 쪽을 좁히면 그게 "덜 중요한 것"
   이라는 말입니다. */
.ms-two{ display:grid; gap:var(--s5); grid-template-columns:1fr 1fr;
  align-items:stretch; }
.ms{ display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-2xl); box-shadow:var(--shadow-soft); }
.ms-st{ background:var(--bg-mint); border:1px solid var(--line-mint);
  --ic-ink:var(--start-dark); --ic-bg:#fff; }
.ms-cl{ background:var(--bg-peach); border:1px solid var(--line-peach);
  --ic-ink:var(--close-dark); --ic-bg:#fff; }
/* §16 — 카드의 30~40%. ⚠️ 사진 위에 짙은 막을 씌우지 마세요. */
.ms-ph .ph{ width:100%; aspect-ratio:16/7; object-fit:cover; display:block; }
.ms-b{ display:flex; flex-direction:column; flex:1 1 auto; padding:var(--s7); }
.ms-k{ font-size:var(--t-sm); font-weight:800; letter-spacing:.12em; }
/* ⚠️ 15px 굵은 글씨라 민트 · 피치 위에서 `--start-dark` 는 3.69,
   `--close-dark` 는 4.21 이었습니다. 한 단계 더 짙은 쪽으로 — 초록과
   주황은 그대로입니다 (`check.js` 가 빨강으로 넘어가는지 봅니다). */
.ms-st .ms-k{ color:var(--start-deep); }
.ms-cl .ms-k{ color:var(--close-deep); }
.ms-h{ margin-top:var(--s2); font-size:var(--t-3xl); font-weight:900;
  letter-spacing:-.03em; color:var(--navy); }
.ms-d{ margin-top:6px; font-size:var(--t-md); color:var(--ink2); }
.ms-g{ display:grid; gap:var(--s3); grid-template-columns:repeat(3,1fr);
  margin-top:var(--s5); }
.ms-g > li > a{ display:grid; gap:8px; justify-items:center; text-align:center;
  min-height:var(--tap); padding:var(--s4) 10px; background:var(--surface);
  border-radius:16px; transition:transform .2s, box-shadow .2s; }
.ms-g > li > a:hover{ transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(15,43,68,.10); }
.ms-g b{ font-size:var(--t-cap); font-weight:700; color:var(--ink);
  line-height:1.4; }
.ms-more{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  justify-content:space-between; margin-top:auto; padding-top:var(--s5); }
.ms-more a{ display:inline-flex; align-items:center; gap:6px;
  min-height:var(--tap); font-size:var(--t-md); font-weight:800; }
.ms-st .ms-more a{ color:var(--start-dark); }
.ms-cl .ms-more a{ color:var(--close-dark); }
.ms-more i{ font-style:normal; font-size:var(--t-cap); font-weight:700;
  color:var(--ink2); }

/* ══════════════════════════════════════════════════════════════════
   ④ 업종 열넷 (§17 ~ §19)
   ══════════════════════════════════════════════════════════════════
   ⚠️ **카드는 흰색**이고 색은 아이콘 타일에만 들어갑니다. */
.mi-g{ display:grid; gap:var(--s3); grid-template-columns:repeat(7,1fr); }
.mi-g > li > a{ display:grid; gap:8px; justify-items:center; text-align:center;
  min-height:var(--tap); padding:var(--s4) 6px; background:var(--surface);
  border:1px solid var(--line); border-radius:18px;
  transition:transform .25s, box-shadow .25s, border-color .25s; }
.mi-g > li > a:hover{ transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(15,43,68,.10);
  border-color:var(--ic-ink, var(--blue)); }
.mi-g > li > a:hover .ic-t{ transform:scale(1.06); }
.mi-g b{ font-size:var(--t-cap); font-weight:700; color:var(--ink);
  line-height:1.4; }
/* ⚠️ **색은 "내 업종이 어느 것인가" 를 말해 주지 못합니다.** 사진이 0장
   이라 카드를 분류색 틴트로 갈라 두었는데, 틴트로 갈리는 것은 **서로
   다르다**까지이고 미용실 사장님이 "헤어 · 바버 · 두피관리" 를 보고
   자기 자리를 찾는 일은 글이 합니다. `industries.js` 의 `lead` 열넷을
   그대로 냅니다 (`/startup` 의 `.ind-l` 과 같은 값).
   ⚠️ `--ink3` 는 아이보리 위에서 4.63 이라 margin 이 얇습니다 —
   틴트 열넷 위에 깔리는 글이라 `--ink2`(6.02) 를 씁니다. */
.mi-l{ font-style:normal; font-size:var(--t-cap); font-weight:500;
  color:var(--ink2); line-height:1.55; }

/* ══════════════════════════════════════════════════════════════════
   ⑤ 핵심 서비스 여덟 (§20)
   ══════════════════════════════════════════════════════════════════ */
.mv-g{ display:grid; gap:var(--s4); grid-template-columns:repeat(4,1fr); }
.mv-g > li > a{ display:flex; align-items:center; gap:var(--s4);
  min-height:var(--tap); padding:var(--s5); background:var(--surface);
  border:1px solid var(--line); border-radius:20px;
  transition:transform .25s, box-shadow .25s, border-color .25s; }
.mv-g > li > a:hover{ transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(15,43,68,.09);
  border-color:var(--ic-ink, var(--blue)); }
.mv-t{ display:grid; gap:2px; min-width:0; flex:1 1 auto; }
.mv-t b{ font-size:var(--t-md); font-weight:800; color:var(--ink); }
.mv-t i{ font-style:normal; font-size:var(--t-cap); color:var(--ink2);
  line-height:1.5; }
.mv-go{ flex:0 0 auto; display:inline-flex; color:var(--ic-ink, var(--blue));
  opacity:.45; transition:opacity .2s, transform .2s; }
.mv-g > li > a:hover .mv-go{ opacity:1; transform:translateX(3px); }

/* ── ⑨ 가격 ──────────────────────────────────────────────────────── */
.hp-g{ display:grid; gap:var(--s4); grid-template-columns:repeat(3,1fr); }
.hp-g > li{ display:grid; gap:6px; padding:var(--s5);
  background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.hp-g b{ font-size:var(--t-md); font-weight:800; color:var(--ink); }
.hp-g em{ font-style:normal; font-size:var(--t-2xl); font-weight:900;
  color:var(--navy); letter-spacing:-.02em; }
.hp-g i{ font-style:normal; font-size:var(--t-cap); color:var(--ink3); }

/* ══════════════════════════════════════════════════════════════════
   ⑩ 창업 ↔ 폐업 연결 (§22 · §23)
   ══════════════════════════════════════════════════════════════════
   ⚠️ 히어로 다음으로 기억에 남아야 하는 구간입니다.
   ⚠️ **짙은 남색 바탕을 쓰지 마세요.** 대비는 바탕을 어둡게 해서가
   아니라 **주황 → 남색 → 초록 악센트 차이**로 냅니다. */
.mbr{ background:var(--bg-cream); }
.mbr-g{ display:grid; gap:var(--s6); grid-template-columns:1fr auto 1fr;
  align-items:stretch; }
.mbr-c{ display:flex; flex-direction:column; gap:var(--s4);
  padding:var(--s6); border-radius:var(--r-2xl); }
.mbr-cl{ background:var(--bg-peach); --ic-ink:var(--close-dark); --ic-bg:#fff;
  box-shadow:var(--shadow-soft), inset 0 0 0 1px var(--line-peach); }
.mbr-st{ background:var(--bg-mint); --ic-ink:var(--start-dark); --ic-bg:#fff;
  box-shadow:var(--shadow-soft), inset 0 0 0 1px var(--line-mint); }
.mbr-k{ font-size:var(--t-sm); font-weight:800; font-style:italic;
  color:var(--close-deep); }
.mbr-k-st{ color:var(--start-deep); }
/* ⚠️ `photoBox()` 를 쓰는 자리에는 반드시 `object-fit:cover` 를 주세요 —
   기본값이 `fill` 이라 안 주면 사진이 비율을 무시하고 늘어납니다. */
.mbr-p .ph{ width:100%; aspect-ratio:5/3; border-radius:var(--r-lg);
  object-fit:cover; }
.mbr-l{ display:grid; gap:var(--s3); }
.mbr-l > li{ display:flex; align-items:center; gap:var(--s3); }
.mbr-l b{ font-size:var(--t-md); font-weight:800; color:var(--ink); }
.mbr-tx{ display:grid; gap:2px; min-width:0; }
.mbr-tx i{ font-style:normal; font-size:var(--t-cap); color:var(--ink2);
  line-height:1.5; }
.mbr-m{ display:grid; gap:var(--s4); justify-items:center; align-self:center; }
/* ⚠️⚠️ **시안(AFTER)은 이 구간을 통째로 어둡게** 했지만 그대로 하면
   390px 에서 어두운 면이 **15.5%** 가 됩니다 (재 봤습니다 — 지금 5.2%
   에 이 구간이 10.3% 를 더합니다). CLAUDE.md 가 "어두운 면은 입점
   카드 하나" 라고 못박아 둔 것도 그 까닭입니다.
   그래서 **가운데 연결부만** 짙게 가져왔습니다 — 시안이 기억에 남기려
   한 것이 "주황 → 인수인계 → 초록" 의 한가운데이고, 이 원판은 1440px
   에서 0.6% 밖에 안 됩니다. 밴드는 밝게 둡니다. */
.mbr-logo{ display:grid; gap:3px; justify-items:center; text-align:center;
  width:188px; height:188px; align-content:center; border-radius:999px;
  background:var(--navy-dark); box-shadow:0 20px 44px rgba(6,43,81,.28); }
.mbr-logo-i{ display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:13px; margin-bottom:4px;
  background:rgba(255,255,255,.14); color:#fff; }
/* ⚠️ 흰 글자가 올라앉는 면이라 **짙은 쪽**(`--navy-dark`)입니다 */
.mbr-logo b{ font-size:var(--t-xl); font-weight:900; letter-spacing:-.01em;
  color:#fff; }
.mbr-logo i{ font-style:normal; font-size:var(--t-cap); color:rgba(255,255,255,.82);
  padding:0 var(--s4); line-height:1.5; }
.mbr-arw{ position:relative; width:100%; max-width:190px; height:10px; }
.mbr-arw::before{ content:""; position:absolute; inset:3px 12px 3px 0;
  border-radius:999px; }
.mbr-arw::after{ content:""; position:absolute; right:0; top:50%;
  margin-top:-7px; border:7px solid transparent; border-left-width:11px; }
.mbr-arw-in::before{ background:linear-gradient(90deg,
  rgba(243,107,56,.16), var(--close)); }
.mbr-arw-in::after{ border-left-color:var(--close); }
.mbr-arw-out::before{ background:linear-gradient(90deg,
  var(--start), rgba(8,168,117,.16)); }
.mbr-arw-out::after{ border-left-color:rgba(8,168,117,.22); }

/* ── ⑪ 도구 ──────────────────────────────────────────────────────── */
.mt-g{ display:grid; gap:var(--s4); grid-template-columns:repeat(3,1fr); }
.mt-g > li > a{ display:grid; gap:8px; align-content:start;
  min-height:var(--tap); padding:var(--s5);
  background:var(--surface); border:1px solid var(--line);
  border-radius:20px; transition:transform .25s, box-shadow .25s,
  border-color .25s; }
.mt-g > li > a:hover{ transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(15,43,68,.09);
  border-color:var(--ic-ink, var(--blue)); }
.mt-g b{ margin-top:6px; font-size:var(--t-md); font-weight:800; color:var(--ink); }
.mt-g i{ font-style:normal; font-size:var(--t-cap); color:var(--ink2);
  line-height:1.55; }

/* ── ⑫ 후기 ──────────────────────────────────────────────────────── */
.hr-g{ display:grid; gap:var(--s4); grid-template-columns:repeat(3,1fr); }
.hr-g > li{ display:grid; gap:var(--s3); align-content:start; padding:var(--s6);
  background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.hr-q{ display:inline-flex; color:var(--blue); opacity:.5; }
.hr-g p{ font-size:var(--t-md); color:var(--ink); line-height:1.7; }
.hr-g i{ font-style:normal; font-size:var(--t-cap); color:var(--ink3); }

/* ── ⑬ 업체 입점 ──────────────────────────────────────────────────
   ⚠️ 이 화면에서 어두운 면은 이 카드 **한 장**까지입니다. */
.mjn{ background:var(--surface); }
.mjn-c{ display:grid; gap:var(--s6); grid-template-columns:1fr auto;
  align-items:center; padding:var(--s8);
  background:var(--navy-dark); border-radius:var(--r-3xl); color:#fff; }
.mjn-k{ font-size:var(--t-sm); font-weight:800; letter-spacing:.12em;
  color:var(--gold-on-dark); }
.mjn-t h2{ margin-top:var(--s2); font-size:var(--t-3xl); font-weight:900;
  letter-spacing:-.03em; color:#fff; }
.mjn-t > p{ margin-top:var(--s3); font-size:var(--t-md); color:var(--on-dark);
  max-width:56ch; line-height:1.7; }
.mjn-l{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s5); }
.mjn-l > li{ display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--on-dark-line); font-size:var(--t-cap);
  font-weight:700; color:var(--on-dark); }
.mjn-l svg{ width:16px; height:16px; opacity:.8; }
.mjn-go{ flex:0 0 auto; }

/* ── 좁은 화면 ───────────────────────────────────────────────────── */
@media (max-width:1180px){
  .mh2-c{ padding:var(--s8) var(--s6) var(--s6); min-height:500px; }
  .mh2-q{ grid-template-columns:repeat(3,1fr); row-gap:var(--s3); }
  .mval-g{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1100px){
  .mi-g{ grid-template-columns:repeat(5,1fr); }
  .mv-g{ grid-template-columns:repeat(2,1fr); }
  .ms-g{ grid-template-columns:repeat(3,1fr); }
  .msvc-g{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:980px){
  /* §30 — 폰 차례: 제목 → 설명 → 검색 → START/CLOSE → 비주얼.
     DOM 이 그 차례라 한 칸으로 쌓기만 하면 됩니다. */
  /* 지시서 §24 — 폰에서는 START/CLOSE 를 **세로로 쌓습니다.**
     나란히 두면 한 장이 180px 이라 제목도 빠른 진입도 안 들어갑니다. */
  .mh2{ grid-template-columns:1fr; }
  .mh2-c{ min-height:0; }
  .ms-two{ grid-template-columns:1fr; }
  .mfeat-g{ grid-template-columns:1fr; }
  .mfeat-c{ min-height:220px; }
}
@media (max-width:900px){
  .mbr-g{ grid-template-columns:1fr; }
  .mbr-m{ padding:var(--s2) 0; }
  .mbr-arw{ max-width:none; width:10px; height:44px; }
  .mbr-arw::before{ inset:0 3px 12px 3px; }
  .mbr-arw::after{ right:50%; top:auto; bottom:0; margin:0 -7px 0 0;
    border:7px solid transparent; border-top-width:11px; }
  .mbr-arw-in::after{ border-top-color:var(--close); border-left-color:transparent; }
  .mbr-arw-out::after{ border-top-color:rgba(8,168,117,.22); border-left-color:transparent; }
  .mbr-arw-in::before{ background:linear-gradient(180deg,
    rgba(243,107,56,.16), var(--close)); }
  .mbr-arw-out::before{ background:linear-gradient(180deg,
    var(--start), rgba(8,168,117,.16)); }
  .hp-g, .hr-g, .mt-g{ grid-template-columns:repeat(2,1fr); }
  .mjn-c{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .mi-g{ grid-template-columns:repeat(3,1fr); }
  .mst{ padding-top:var(--s7); }
  .mst-g{ padding:var(--s5) var(--s4); }
  .msvc-g{ grid-template-columns:repeat(2,1fr); }
  .mval-g{ grid-template-columns:1fr; gap:var(--s5); }
}
@media (max-width:560px){
  /* 아이콘 + 이름뿐이라 폰에서도 셋이 들어갑니다 (지시서 §24) */
  .mi-g{ grid-template-columns:repeat(3,1fr); }
  .mv-g, .hp-g, .hr-g, .mt-g{ grid-template-columns:1fr; }
  .ms-g{ grid-template-columns:repeat(2,1fr); }
  .ms-b{ padding:var(--s6); }
  .mjn-c{ padding:var(--s6); }
  /* 숫자 셋을 한 줄에 두면 "183" 이 눌립니다 */
  .mst-g{ grid-template-columns:1fr; gap:var(--s4); }
  .mh2-c{ padding:var(--s7) var(--s5) var(--s5); gap:var(--s6); }
  .mh2-q{ gap:2px; margin-top:var(--s6); }
  .mh2-q a{ min-height:68px; }
  .mh2-go .btn{ width:100%; justify-content:center; }
}

/* "더 보기" 안의 센 값 — ⚠️ `--ink3` 는 흰 바탕(`--surface`)에서 4.63
   으로 AA(4.5)를 넘깁니다. `.btn-o` 바탕이 흰색이라 그 값이 그대로
   적용됩니다. 더 흐리게 두지 마세요. */
.more-n{ font-style:normal; font-size:var(--t-cap); font-weight:400;
  color:var(--ink3); }

/* ════════ 업종 고르기 · 고른 업종에 필요한 모든 것 (2026-10-03) ════
   ⚠️ 고른 업종은 주소(`?i=`)에 실립니다 — 상태를 CSS 로만 들고 있으면
   새로고침에 날아가고 링크로 공유도 안 됩니다. */

.mi-x{ position:absolute; top:6px; right:6px; display:inline-flex;
  align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:var(--r-pill); }
.mi-g > li > a{ position:relative; }
.mi-g + .row-cta{ margin-top:var(--s6); }

/* 창업 준비 / 사업 정리 토글 — ⚠️ 새 개념이 아니라 기존 START/CLOSE
   를 보는 각도만 바꾸는 것입니다 (지시서 §17). */
.mfit-tb{ display:inline-flex; gap:4px; padding:4px; margin-bottom:var(--s7);
  background:var(--bg-2); border-radius:var(--r-pill); }
.mfit-t{ display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 var(--s7); border-radius:var(--r-pill);
  font-size:var(--t-base); font-weight:700; color:var(--ink2);
  transition:background .18s, color .18s, box-shadow .18s; }
.mfit-t:hover{ color:var(--ink); }
/* ⚠️ 켜진 쪽은 **흰 글자**라 바탕이 짙어야 합니다 — `--start`/`--close`
   는 옅어서 대비가 3.0 입니다 (CLAUDE.md 의 "글자로 쓰는 색은 짙은 쪽"). */
.mfit-t.on{ background:var(--surface); color:var(--navy);
  box-shadow:var(--shadow-md); }
@media (max-width:560px){
  .mfit-tb{ display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .mfit-t{ padding:0 var(--s4); }
}

/* 작은 Empty — ⚠️ 빈 구간이 다섯 개 이어지는 메인에서 씁니다 (§28).
   분야 화면(`/providers/:cat` 등)은 그 화면에 Empty 가 하나뿐이라
   큰 쪽을 그대로 씁니다. */
.empty-sm{ padding:var(--s7) var(--s6); }
.empty-sm .empty-ic{ width:44px; height:44px; }
.empty-sm > b{ font-size:var(--t-lg); }
.empty-sm > p{ max-width:56ch; font-size:var(--t-sm); }
@media (max-width:560px){ .empty-sm{ padding:var(--s6) var(--s5); } }

/* ════════ 폰에서 길이 줄이기 (2026-10-03 지시서 §36 · §37) ════════
   ⚠️ 재어 보고 고쳤습니다 — 390px 에서 "필요한 모든 것" 구간이
   **3,488px**(화면 네 개)였고 문서 전체가 15,514px 였습니다.

   ⚠️ **2열로 나누지 않았습니다.** 390px 을 둘로 쪼개면 카드 안 글자
   칸이 175px 이라 "업종별 창업정보" 같은 말이 **낱말 가운데서
   잘립니다** — 글 목록에서 이미 겪은 일입니다. 대신 **하위 항목
   미리보기만** 접습니다. 카드는 열셋 다 보이고, 하위 항목은 눌러
   들어간 그 화면에 전부 있습니다. */
@media (max-width:700px){
  .cat-s{ display:none; }
}

/* ════════ 작은 분야 카드 — 시안(AFTER)의 밀도 ════════════════════
   ⚠️ 큰 카드(`.cat`)로 열셋을 내면 1440px 에서 1,801px 이었습니다. */
.fit-g{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);
  list-style:none; }
.fit{ display:grid; grid-template-columns:auto 1fr; gap:var(--s4);
  align-items:start; padding:var(--s5); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-xl);
  transition:transform .15s, box-shadow .2s, border-color .2s; }
.fit:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md);
  border-color:var(--blue); }
.fit-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:13px;
  background:var(--ic-bg); color:var(--ic-ink); }
/* ⚠️ grid 칸에 맨글과 태그를 섞지 않습니다 — `<b>` 가 딴 칸이 됩니다 */
.fit-b{ display:grid; gap:3px; min-width:0; }
.fit-b > b{ display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:var(--t-base); color:var(--ink); }
/* 센 값입니다 — ⚠️ **업체 수가 아닙니다.** 구간 아래 한 줄이 그렇게 밝힙니다 */
.fit-n{ font-style:normal; font-size:var(--t-cap); font-weight:700;
  color:var(--ink3); }
.fit-b > i{ font-style:normal; font-size:var(--t-cap); color:var(--ink2);
  line-height:1.6; }
@media (max-width:1040px){ .fit-g{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){  .fit-g{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  /* ⚠️ 390px 을 둘로 쪼개면 글자 칸이 좁아 낱말이 잘립니다 — 한 칸입니다 */
  .fit-g{ grid-template-columns:1fr; }
}

/* 머리말 오른쪽 "전체보기" (시안) */
.sec-hd-row{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s6); flex-wrap:wrap; }
.sec-hd-all{ display:inline-flex; align-items:center; gap:5px;
  min-height:var(--tap); padding:0 var(--s4); border-radius:var(--r-pill);
  font-size:var(--t-sm); font-weight:700; color:var(--blue); flex:0 0 auto; }
.sec-hd-all:hover{ background:var(--blue-50); }

/* ════════ 색감 올리기 (2026-10-03 사장님 지시 — 시안대로) ════════
   ⚠️⚠️ **규칙이 한 번 뒤집혔습니다.** CLAUDE.md §19 · §22 는 "카드는
   흰색이고 색은 아이콘 타일에만" 이었습니다. 시안(AFTER)의 업종 ·
   서비스 카드는 **사진**이라 그 자체가 색인데, 사진이 0장이라 흰
   카드만 남아 "색이 없는 화면" 이 됐습니다 — 사장님이 "색감있게" 라고
   하신 자리입니다.

   그래서 **관계를 뒤집습니다** — 카드가 분류색의 **옅은 바탕**(`--ic-bg`,
   채도 4~8%)을 쓰고, 아이콘 타일이 **흰색**으로 떠오릅니다.
   ⚠️ 어두운 카드가 아닙니다. `--tn*-bg` 는 전부 흰색에 가까운 틴트라
   글자 대비가 그대로입니다 (전수 점검이 네 폭에서 봅니다).
   ⚠️ 사진이 들어오면 사진이 주인공이 되므로 그때 다시 보세요. */
/* ⚠️⚠️ **2026-10-03 리뉴얼 §8 — 업종 카드만 흰색으로 되돌렸습니다.**
   같은 날 아침에는 카드를 분류색 틴트로 칠했는데(사장님 "색감있게"),
   리뉴얼로 이 줄의 **역할이 바뀌었습니다** — 고르는 카드가 아니라
   **거르개**입니다. §8 이 "나머지는 White Card · 선택된 업종은 Navy
   Background + White Icon/Text" 라고 못박았고, 거르개는 **무엇이
   켜졌는지**가 한눈에 보여야 합니다. 열넷이 전부 틴트면 켜진 하나가
   묻힙니다.
   ⚠️ 색은 안 없어졌습니다 — 아이콘 타일이 그대로 분류색이고, 서비스
   여덟 · 큰 카드 셋 · 히어로가 색을 냅니다.
   ⚠️ `.fit` (고른 업종에 필요한 것)은 **틴트 그대로**입니다. 거기는
   거르개가 아니라 고르는 카드입니다. */
.fit{ background:var(--ic-bg); border-color:transparent; }
.fit-ic{ background:#fff; color:var(--ic-ink);
  box-shadow:0 2px 8px rgba(15,43,68,.06); }
.fit:hover{ border-color:var(--ic-ink); }
.mi-g > li > a .ic-t{ background:var(--ic-bg); color:var(--ic-ink); }
.mi-g > li > a:hover{ border-color:var(--ic-ink); }
.mi-g > li.on > a{ background:var(--navy); border-color:var(--navy);
  box-shadow:var(--shadow-md); }
.mi-g > li.on > a .ic-t{ background:rgba(255,255,255,.16); color:#fff; }
.mi-g > li.on b{ color:#fff; }
.mi-x{ background:#fff; color:var(--navy); }

/* 숫자 카드도 민숭민숭하지 않게 — 하늘 틴트 + 금 실선 (§21 의 악센트) */
.mst-box{ background:var(--bg-sky); border-color:var(--gold-line); }