/* ════════════════════════════════════════════════════════════════════
   랜딩 (/) — 2026-09-30 지시서

   ⚠️⚠️ **여기는 브랜드 소개 화면입니다** (§23). 실제 서비스 메인이
   아닙니다. 검색 결과 · 업체 수십 개 · 프랜차이즈 수십 개 · 계산기
   전체 · MY · 복잡한 거르개를 **여기 끌어오지 마세요.** 그것들은
   각자 주소(`/search` · `/providers` · `/franchise` · `/tools` ·
   `/my`)에 이미 있습니다.

   ⚠️ **밝은 화면입니다** (§0 · §26). 어두운 테마로 되돌리지 마세요.
   면적 비율은 흰색·아이보리 70% · 남색 12~15% · 초록 7~8% ·
   주황 7~8% · 그 밖 5% 이하입니다 (§2).
   ⚠️ **짙은 남색을 넓게 쓰는 자리는 푸터뿐입니다.** 여기서는 업체
   입점 카드 한 장까지입니다.

   ⚠️ **START = 초록 · CLOSE = 주황** (§25). 폐업 쪽을 붉게 물들이지
   마세요 — 주황과 빨강은 다릅니다. 폐업은 실패가 아니라 **정리와
   다음 단계**입니다 (§6).

   ⚠️ **날값을 여기 적지 마세요.** 색 · 크기 · 간격은 tokens.css 에
   있습니다. 여기 적으면 한 곳에서 못 바꿉니다.
   ⚠️ `display:grid` 인 칸에 글과 태그를 섞지 마세요 — `<b>` 가 딴
   칸이 되어 낱말이 딴 줄에 앉습니다. 글은 태그로 감쌉니다.
   ════════════════════════════════════════════════════════════════════ */

/* ════════ ① HERO (§5 · §6) ═══════════════════════════════════════
   ⚠️ **사진 위에 검은 막을 씌우지 마세요** (§5). 밝고 따뜻해야
   합니다. 글자 가독성은 **흰 그라디언트**로 얻습니다.
   ⚠️ 사진이 없으면 겹(`.lh-veil`)을 아예 안 냅니다 — 없는 사진 위에
   흰 막을 덮으면 화면이 통째로 흰 판이 됩니다.
   ⚠️ 주인공은 **창업 · 폐업 두 낱말**입니다. 여기에 적는 칸 ·
   칩 · 숫자를 더하지 마세요 — 하나 더할 때마다 두 낱말이 작아집니다. */
.lh{ position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(46% 64% at 4% 22%,  rgba(18,168,120,.13) 0%, rgba(18,168,120,0) 70%),
    radial-gradient(46% 64% at 96% 22%, rgba(242,106,61,.13) 0%, rgba(242,106,61,0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--ivory) 100%); }

/* 사진 자리 — 좌(새로 시작) · 우(정리). 지금은 비어 있습니다.
   ⚠️ 없을 때 회색 판을 깔지 않습니다 (`background:none`). */
.lh-ph{ position:absolute; top:0; bottom:0; width:33%; z-index:-2; }
.lh-ph-l{ left:0; } .lh-ph-r{ right:0; }
.lh-ph .ph{ width:100%; height:100%; object-fit:cover; display:block; }
.lh-ph .ph-none{ background:none; }
.lh-veil{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    rgba(255,255,255,.42) 0%, rgba(255,255,255,.93) 24%,
    #fff 44%, #fff 56%, rgba(255,255,255,.93) 76%, rgba(255,255,255,.42) 100%); }

/* ⚠️ 이 칸은 `.w` 를 같이 답니다. `padding` 을 통째로 적으면 `.w` 의
   **좌우 여백이 지워집니다** — 폰에서 단추가 화면 끝에 붙었습니다.
   위아래만 따로 적으세요. */
.lh-in{ min-height:620px; display:grid; align-content:center; justify-items:center;
  text-align:center;
  padding-top:var(--sec-y); padding-bottom:calc(var(--sec-y) + var(--s9)); }
/* §21 — 샴페인 골드는 악센트 네 자리뿐이고, 여기가 그 하나입니다 */
.lh-k{ font-size:var(--t-cap); font-weight:900; letter-spacing:.26em;
  color:var(--gold); }
.lh-h{ margin-top:var(--s5); font-size:var(--t-hero); font-weight:900;
  line-height:var(--lh-hero); letter-spacing:var(--tr-hero); color:var(--navy); }
/* 두 낱말 — ⚠️ 이 클래스 이름을 바꾸지 마세요. 전수 점검이 "히어로의
   주인공이 창업 · 폐업 두 낱말이다" 로 이것을 셉니다. */
.sh-n{ font-style:normal; }
.lh-h .sh-n{ position:relative; }
.lh-st{ color:var(--start-dark); }
.lh-cl{ color:var(--close-dark); }
/* ⚠️ 폭을 좁게 잡지 마세요. 24ch 로 두었더니 "… 모든 것을 한 /
   곳에서." 로 끊겨서 한 낱말이 혼자 떨어졌습니다. */
.lh-h2{ margin-top:var(--s4); font-size:var(--t-xl); font-weight:700;
  color:var(--ink); }
.lh-d{ margin-top:var(--s4); font-size:var(--t-lg); color:var(--ink2);
  line-height:1.75; max-width:34ch; }
.lh-cta{ margin-top:var(--s8); display:flex; gap:var(--s4); flex-wrap:wrap;
  justify-content:center; }
/* ⚠️ 두 단추는 **같은 크기**입니다 (§5). 한쪽만 키우면 다른 쪽이
   "안 해도 되는 것" 으로 읽힙니다. */
.lh-cta .btn{ min-width:216px; }
@media (max-width:900px){
  .lh-in{ min-height:0;
    padding-top:var(--s9); padding-bottom:calc(var(--s10) + var(--s9)); }
  .lh-ph{ width:50%; opacity:.9; }
  .lh-h2{ font-size:var(--t-lg); }
  .lh-d{ font-size:var(--t-base); }
}
@media (max-width:560px){
  /* 폰에서는 두 단추를 꽉 채워 쌓습니다 — 손가락이 닿는 폭이 커집니다 */
  .lh-cta{ width:100%; }
  .lh-cta .btn{ min-width:0; flex:1 1 100%; }
}

/* ════════ ② 떠 있는 플랫폼 정보 (§7) ════════════════════════════
   ⚠️⚠️ **없는 숫자를 적지 마세요.** 지금 업체 0곳 · 브랜드 0개 ·
   매물 0건입니다. 값이 없으면 **지금 상태**를 적습니다 — "모집중" ·
   "준비중" 은 사실이고, "1,200곳" 은 거짓입니다. 절대 규칙 1.
   화면 쪽은 `StatBar()` 가 실제 배열 길이를 보고 고릅니다. */
.lst{ position:relative; z-index:2; margin-top:calc(var(--s9) * -1); }
.lst-c{ background:var(--surface); border-radius:var(--r-xl);
  box-shadow:var(--shadow-float); padding:var(--s7) var(--s6);
  display:grid; grid-template-columns:repeat(4,1fr); }
.lst-i{ display:grid; align-content:start; justify-items:center; gap:6px;
  padding:0 var(--s5); position:relative; min-width:0; text-align:center; }
.lst-i + .lst-i::before{ content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:1px; background:var(--line); }
.lst-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r-sm);
  background:var(--navy-soft); color:var(--navy); }
.lst-k{ font-size:var(--t-cap); font-weight:700; color:var(--ink3); }
.lst-v{ font-size:var(--t-lg); font-weight:800; color:var(--ink); line-height:1.35; }
.lst-n{ margin-top:var(--s5); text-align:center; font-size:var(--t-sm);
  color:var(--ink3); }
@media (max-width:820px){
  .lst-c{ grid-template-columns:1fr 1fr; gap:var(--s6) 0; padding:var(--s6) var(--s4); }
  .lst-i:nth-child(odd)::before{ content:none; }
}
@media (max-width:430px){ .lst-i{ padding:0 var(--s3); } }

/* ════════ ③ ONE STOP (§8) ════════════════════════════════════════
   ⚠️ 글을 가운데로 몰지 마세요 (§22). 제목은 왼쪽, 설명은 오른쪽
   칸입니다 — 이 짜임새가 "읽는 화면" 을 만듭니다. */
.lin{ background:var(--bg); padding:var(--sec-y) 0; }
.lin-g{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s7) var(--s10);
  align-items:end; }
.lin-e{ font-size:var(--t-cap); font-weight:900; letter-spacing:.2em;
  color:var(--start-dark); margin-bottom:var(--s4); }
.lin-h{ font-size:var(--t-3xl); font-weight:800; color:var(--navy);
  line-height:1.15; letter-spacing:var(--tr-head); }
.lin-p{ font-size:var(--t-lg); color:var(--ink2); line-height:1.85; }
.lin-p b{ color:var(--ink); }

/* 우리가 다루는 **범위** — ⚠️ 이 숫자는 전부 `AM_INDUSTRIES` ·
   `AM_CATS` 를 **그 자리에서 센 값**입니다. 손으로 고쳐 쓸 자리가
   없습니다. `n+` 꼴로도 쓰지 마세요 — 부풀린 값이 됩니다.
   ⚠️ 아래 "분야의 수" 줄을 지우지 마세요. 숫자만 두면 "업체가
   183곳" 으로 읽힙니다. */
.scale-b{ margin-top:var(--s9); padding-top:var(--s7);
  border-top:1px solid var(--line); }
.lin-n{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }
.lin-n > li{ display:grid; align-content:start; gap:2px; min-width:0;
  padding-left:var(--s4); border-left:2px solid var(--gold-line); }
/* ⚠️ `.scale-n` 은 `/about` 의 규모감 구간도 쓰는 이름입니다. 여기에
   그냥 적으면 이 파일이 뒤에 실려서 **저쪽 글씨 크기까지** 바뀝니다 —
   `.lin-n` 안으로 한정합니다. */
.lin-n .scale-n{ font-size:var(--t-num-s); font-weight:900; line-height:1.1;
  letter-spacing:-.04em; color:var(--navy); }
.lin-n > li > span{ font-size:var(--t-sm); font-weight:700; color:var(--ink2); }
.lin-nb{ margin-top:var(--s5); font-size:var(--t-sm); color:var(--ink3);
  line-height:1.75; }
.lin-nb b{ color:var(--ink2); }
@media (max-width:640px){ .lin-n{ grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4); } }
@media (max-width:900px){
  .lin-g{ grid-template-columns:1fr; gap:var(--s6); align-items:start; }
  .lin-p{ font-size:var(--t-base); }
}

/* ════════ ④ START / CLOSE 대형 카드 (§9) ═════════════════════════
   ⚠️ 두 카드는 **같은 크기 · 같은 무게**입니다. 폐업 쪽을 작게
   만들면 "덜 중요한 것" 으로 읽힙니다 (§6).
   ⚠️ 카드 안의 작은 카드는 **흰색**입니다. 전부 남색으로 만들지
   마세요 (§26). */
.ltwo{ background:var(--surface); padding:var(--sec-y) 0; }
.ltwo-g{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--s7);
  align-items:stretch; }
.lsc{ min-width:0; border-radius:var(--r-3xl); padding:var(--s8);
  display:grid; align-content:start; }
.lsc-st{ background:linear-gradient(135deg, var(--start-soft) 0%, #F8FCFA 100%); }
.lsc-cl{ background:linear-gradient(135deg, var(--close-soft) 0%, #FFF9F6 100%); }
.lsc-k{ font-size:var(--t-cap); font-weight:900; letter-spacing:.24em; }
.lsc-st .lsc-k{ color:var(--start-dark); }
.lsc-cl .lsc-k{ color:var(--close-dark); }
.lsc-t{ margin-top:var(--s3); font-size:var(--t-sig); font-weight:900;
  line-height:1.05; letter-spacing:-.04em; color:var(--navy); }
.lsc-d{ margin-top:var(--s3); font-size:var(--t-base); color:var(--ink2); }
/* ⚠️ **두 칸입니다.** 네 칸으로 두었더니 1024px 에서 칸 안쪽 글자
   폭이 46px 이 되어 "인테리어 · 시공" 이 낱말 가운데서 잘렸습니다 —
   전수 점검의 "낱말 가운데 잘림" 에 네 건이 걸렸습니다. 한 줄에
   아이콘과 이름을 나란히 두면 이름이 쓸 폭이 세 배가 됩니다. */
.lsc-g{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3);
  margin-top:var(--s7); }
.lsc-i{ display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:var(--s3); min-width:0; min-height:62px; padding:var(--s3) var(--s4);
  background:var(--surface); border-radius:var(--r-sm);
  box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease; }
@media (hover:hover){
  .lsc-i:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-h); }
}
.lsc-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none; border-radius:var(--r-sm);
  background:var(--tint, var(--bg-2)); color:var(--tone, var(--ink2)); }
.lsc-i > b{ font-size:var(--t-cap); font-weight:700; color:var(--ink);
  line-height:1.45; }
.lsc-m{ margin-top:var(--s6); }
.lsc-st .lsc-m .btn{ background:var(--start); border-color:var(--start); color:#fff; }
.lsc-cl .lsc-m .btn{ background:var(--close); border-color:var(--close); color:#fff; }

/* 가운데 흐름 — 초록에서 주황으로 이어집니다 (§9) */
.lflow{ display:grid; align-content:center; justify-items:center; gap:var(--s4);
  width:168px; text-align:center; }
.lflow-r{ width:92px; height:92px; border-radius:var(--r-pill);
  display:grid; place-items:center; color:var(--navy);
  background:var(--surface); box-shadow:var(--shadow-float);
  border:1px solid var(--line-soft); }
.lflow-t{ font-size:var(--t-base); font-weight:800; color:var(--navy);
  line-height:1.5; }
.lflow-b{ width:2px; height:56px;
  background:linear-gradient(180deg, var(--start) 0%, var(--close) 100%); }
/* ⚠️ 1180px 에서 이미 쌓습니다. 1024px 에서 세 칸(카드·흐름·카드)을
   버티면 카드 하나가 364px 이 되고 그 안에서 글자가 잘립니다. */
@media (max-width:1180px){
  .ltwo-g{ grid-template-columns:1fr; gap:var(--s6); }
  .lflow{ width:100%; grid-auto-flow:column; justify-content:center;
    align-items:center; gap:var(--s4); }
  .lflow-b{ width:56px; height:2px;
    background:linear-gradient(90deg, var(--start) 0%, var(--close) 100%); }
  .lsc{ padding:var(--s7) var(--s6); }
}
@media (max-width:480px){
  .lsc-g{ grid-template-columns:1fr; }
  .lflow-t{ font-size:var(--t-sm); }
}

/* ════════ ⑤ 문제 제기 (§10) ══════════════════════════════════════
   "따로 따로 알아보셨죠" → "이제 한곳에서." 이 구간은 **시각적으로
   제일 센 자리**입니다 (§10).
   ⚠️ 사진 자리는 비워 둡니다. "이미지 준비 중" 같은 글을 찍지
   마세요 — 사진이 없으면 옅은 면으로 자리만 지킵니다. */
.lpb{ background:var(--surface); padding:var(--sec-y) 0; }
.lpb-h{ font-size:var(--t-3xl); font-weight:800; color:var(--navy);
  line-height:1.15; letter-spacing:var(--tr-head); max-width:22ch; }
.lpb-h em{ font-style:normal; color:var(--close-dark); }
.lpb-w{ display:grid; grid-template-columns:1fr 296px; gap:var(--s9);
  align-items:center; margin-top:var(--s8); }
.lpb-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);
  min-width:0; }
/* ⚠️ 흰 구간 위의 카드라 **바탕색이 구간과 달라야** 카드로 보입니다.
   이 저장소는 카드를 그림자가 아니라 면으로 구분합니다 —
   `check.js` 의 "카드가 구간 바탕과 같은 색이 아니다" 가 봅니다. */
.lpb-i{ min-width:0; border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg); border:1px solid var(--line);
  box-shadow:var(--shadow-card); }
/* ⚠️ 사진이 없을 때 **빈 액자를 두지 않습니다.** 옅은 회색 판 여섯
   개는 "그림이 안 뜬 화면" 으로 읽힙니다 — 대신 그 분류의 아이콘을
   냅니다. 사진이 들어오면 아이콘 자리에 사진이 깔립니다. */
.lpb-f{ display:grid; place-items:center; aspect-ratio:16/10;
  background:var(--tint, var(--bg-2)); }
/* ⚠️ 저채도로 둡니다 (§10). 사진이 들어오면 여기서 채도를 낮춥니다. */
.lpb-f .ph{ width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.55) contrast(1.02); }
.lpb-ic{ display:inline-flex; color:var(--tone, var(--ink3)); opacity:.75; }
.lpb-l{ display:grid; gap:2px; padding:var(--s4) var(--s5); }
.lpb-l > b{ font-size:var(--t-base); color:var(--ink); }
.lpb-l > span{ font-size:var(--t-cap); color:var(--ink3); }
.lpb-r{ display:grid; justify-items:start; gap:var(--s4); }
.lpb-ar{ color:var(--close); }
.lpb-n{ font-size:var(--t-sig); font-weight:900; line-height:1.1;
  letter-spacing:-.04em; color:var(--navy); }
.lpb-n em{ font-style:normal; color:var(--start-dark); }
.lpb-p{ font-size:var(--t-base); color:var(--ink2); line-height:1.8; }
@media (max-width:1024px){
  .lpb-w{ grid-template-columns:1fr; gap:var(--s7); }
  .lpb-r{ justify-items:center; text-align:center; }
  .lpb-ar{ transform:rotate(90deg); }
}
@media (max-width:640px){
  .lpb-g{ grid-template-columns:1fr 1fr; gap:var(--s3); }
  .lpb-l{ padding:var(--s3) var(--s4); }
}

/* ════════ ⑥ 끝은 또 다른 시작 (§11) ═════════════════════════════
   이 플랫폼의 **핵심 브랜드 장면**입니다. 색은 주황 → 남색 → 초록
   순서로 흐릅니다 (§11).
   ⚠️ 여기에 매물 목록을 깔지 마세요 — 그 순간 양도양수 사이트가
   됩니다. 이어진다는 **말**까지입니다. */
.lbr{ background:var(--ivory); padding:var(--sec-y) 0; }
.lbr-hd{ text-align:center; margin-bottom:var(--s9); }
.lbr-h{ font-size:var(--t-3xl); font-weight:800; color:var(--navy);
  line-height:1.15; letter-spacing:var(--tr-head); }
.lbr-p{ margin:var(--s4) auto 0; max-width:48ch; font-size:var(--t-lg);
  color:var(--ink2); line-height:1.8; }
.lbr-g{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
  gap:var(--s5); align-items:center; }
.lbr-c{ min-width:0; border-radius:var(--r-2xl); padding:var(--s7) var(--s6);
  background:var(--surface); box-shadow:var(--shadow-card);
  display:grid; align-content:start; gap:var(--s3); }
.lbr-c-cl{ border-top:3px solid var(--close); }
.lbr-c-nv{ background:var(--navy); box-shadow:var(--shadow-float);
  text-align:center; justify-items:center; }
.lbr-c-st{ border-top:3px solid var(--start); }
.lbr-k{ font-size:var(--t-cap); font-weight:900; letter-spacing:.2em; }
.lbr-c-cl .lbr-k{ color:var(--close-dark); }
.lbr-c-st .lbr-k{ color:var(--start-dark); }
.lbr-c-nv .lbr-k{ color:var(--gold-on-dark); }
.lbr-t{ font-size:var(--t-xl); font-weight:800; color:var(--navy); }
.lbr-c-nv .lbr-t{ color:#fff; }
.lbr-c-nv .lbr-d{ color:var(--on-dark); font-size:var(--t-sm); line-height:1.75; }
.lbr-l{ display:grid; gap:var(--s2); }
.lbr-l > li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s2);
  align-items:center; font-size:var(--t-sm); color:var(--ink2); }
.lbr-c-cl .lbr-l > li > span:first-child{ color:var(--close); }
.lbr-c-st .lbr-l > li > span:first-child{ color:var(--start); }
.lbr-a{ display:grid; place-items:center; color:var(--ink3); }
.lbr-cta{ margin-top:var(--s8); display:flex; gap:var(--s3);
  justify-content:center; flex-wrap:wrap; }
@media (max-width:980px){
  .lbr-g{ grid-template-columns:1fr; gap:var(--s4); }
  .lbr-a{ transform:rotate(90deg); }
  .lbr-hd{ margin-bottom:var(--s7); }
}

/* ════════ ⑦ 업체 분류 (§12 · §13) ═══════════════════════════════
   ⚠️ **업체 카드를 여기 나열하지 마세요.** 분류까지입니다 — 업체를
   깔면 그 순간 전화번호부이고, 지금은 0곳이라 지어내게 됩니다.
   ⚠️ 카드 색을 전부 같게 만들지 마세요 (§26). 분류마다 옅은 파스텔
   한 가지씩입니다. */
.lcat{ background:var(--surface); padding:var(--sec-y) 0; }
.lcat-g{ display:grid; grid-template-columns:.82fr 1.18fr; gap:var(--s10);
  align-items:start; }
.lcat-t{ min-width:0; position:sticky; top:calc(var(--hdr-h) + var(--s7)); }
.lcat-h{ font-size:var(--t-3xl); font-weight:800; color:var(--navy);
  line-height:1.15; letter-spacing:var(--tr-head); }
.lcat-p{ margin-top:var(--s5); font-size:var(--t-lg); color:var(--ink2);
  line-height:1.8; }
.lcat-cta{ margin-top:var(--s6); display:flex; gap:var(--s3); flex-wrap:wrap; }
.lcat-l{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
  min-width:0; }
.lcc{ display:grid; align-content:start; gap:var(--s3); min-width:0;
  min-height:130px; padding:var(--s5); border-radius:var(--r-lg);
  background:var(--tint, var(--bg-2));
  transition:transform .25s ease, box-shadow .25s ease; }
@media (hover:hover){
  .lcc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-h); }
}
.lcc-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-sm);
  background:var(--surface); color:var(--tone, var(--ink2)); }
.lcc > b{ font-size:var(--t-base); font-weight:700; color:var(--ink);
  line-height:1.4; }
.lcc > span{ font-size:var(--t-cap); color:var(--ink2); line-height:1.6; }
@media (max-width:1024px){
  .lcat-g{ grid-template-columns:1fr; gap:var(--s7); }
  .lcat-t{ position:static; }
  .lcat-l{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .lcat-l{ grid-template-columns:1fr 1fr; }
  .lcc{ min-height:0; padding:var(--s4); }
}

/* 분류색 (§13) — ⚠️ 여기 없는 색을 화면에서 만들지 마세요.
   ⚠️ 한 줄에 나란히 서는 것끼리는 서로 다른 색이어야 합니다. */
.lt-franchise{ --tint:#FFF1ED; --tone:#E9633A; }
.lt-interior { --tint:#EAF8F3; --tone:#0C8F65; }
.lt-demolish { --tint:#FFF2E8; --tone:#CF6526; }
.lt-equip    { --tint:#EEF4FA; --tone:#2C74BC; }
.lt-pos      { --tint:#EAF7FB; --tone:#2D93A8; }
.lt-tax      { --tint:#F2EEFC; --tone:#6F52C0; }
.lt-mkt      { --tint:#FDEEF5; --tone:#CE4C85; }
.lt-estate   { --tint:#EEF5FA; --tone:#367DB2; }
.lt-food     { --tint:#F5F7EA; --tone:#66803A; }
.lt-furniture{ --tint:#F8F0E8; --tone:#9C6A41; }
.lt-clean    { --tint:#EFF6F3; --tone:#3E8F77; }
.lt-etc      { --tint:#F2F4F7; --tone:#56708E; }

/* ════════ ⑧ 업체 입점 (§14) ═════════════════════════════════════
   ⚠️ **"월 n건의 요청" · "등록 업체 n곳" 을 적지 마세요.** 지금 그
   값이 없습니다. 적을 수 있는 것은 **어떻게 하겠다는 약속**입니다.
   ⚠️ 남색을 넓게 쓰는 자리는 푸터뿐이라, 여기는 **카드 한 장**까지
   입니다 — 구간 배경을 남색으로 칠하지 마세요 (§2). */
.ljn{ background:var(--bg); padding:var(--sec-y) 0; }
.ljn-c{ border-radius:var(--r-3xl); background:var(--navy);
  padding:var(--s9) var(--s9); display:grid;
  grid-template-columns:1.05fr .95fr; gap:var(--s7) var(--s9);
  align-items:center; position:relative; isolation:isolate; overflow:hidden; }
.ljn-c::before{ content:""; position:absolute; z-index:-1; inset:auto -10% -60% 55%;
  height:340px; border-radius:var(--r-pill);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(52,136,216,.35) 0%, rgba(52,136,216,0) 70%); }
.ljn-k{ font-size:var(--t-cap); font-weight:900; letter-spacing:.2em;
  color:var(--gold-on-dark); }
.ljn-h{ margin-top:var(--s3); font-size:var(--t-2xl); font-weight:800;
  color:#fff; line-height:1.25; }
.ljn-p{ margin-top:var(--s4); font-size:var(--t-base); color:var(--on-dark);
  line-height:1.8; }
.ljn-l{ display:grid; gap:var(--s3); min-width:0; }
.ljn-l > li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3);
  align-items:start; color:var(--gold-on-dark); }
.ljn-l > li > span{ display:grid; gap:2px; min-width:0; }
.ljn-l b{ font-size:var(--t-base); color:#fff; }
.ljn-l i{ font-style:normal; font-size:var(--t-sm); color:var(--on-dark-2);
  line-height:1.7; }
.ljn-cta{ margin-top:var(--s6); display:flex; gap:var(--s3); flex-wrap:wrap; }
.ljn-cta .btn-w{ background:#fff; color:var(--navy); }
@media (max-width:900px){
  .ljn-c{ grid-template-columns:1fr; padding:var(--s8) var(--s6); }
}

/* ════════ ⑨ 마지막 CTA — 초록 / 주황 반반 (§15) ══════════════════
   ⚠️ **둘의 크기가 같아야 합니다.** 폐업 쪽을 좁히면 "덜 중요한
   것" 으로 읽힙니다.
   ⚠️ 바탕은 **짙은 쪽**을 씁니다. 옅은 초록·주황에 흰 글자를 얹으면
   눈에 안 읽힙니다 — 여기가 화면의 마지막 말입니다. */
.lfin{ display:grid; grid-template-columns:1fr 1fr; }
.lfin-s{ position:relative; isolation:isolate; overflow:hidden;
  min-height:360px; display:grid; align-content:center;
  padding:var(--s10) var(--s9); color:#fff; }
.lfin-st{ background:var(--start-dark); }
.lfin-cl{ background:var(--close-deep); }
.lfin-s::before{ content:""; position:absolute; z-index:-1; inset:0;
  background:radial-gradient(60% 70% at 78% 8%,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%); }
.lfin-ph{ position:absolute; inset:0; z-index:-2; opacity:.34; }
.lfin-ph .ph{ width:100%; height:100%; object-fit:cover; display:block; }
.lfin-ph .ph-none{ background:none; }
.lfin-k{ font-size:var(--t-cap); font-weight:900; letter-spacing:.24em;
  color:rgba(255,255,255,.8); }
.lfin-h{ margin-top:var(--s3); font-size:var(--t-2xl); font-weight:900;
  color:#fff; line-height:1.2; }
.lfin-p{ margin-top:var(--s3); font-size:var(--t-base);
  color:rgba(255,255,255,.88); line-height:1.75; max-width:32ch; }
.lfin-go{ margin-top:var(--s7); display:inline-flex; align-items:center;
  gap:var(--s2); width:fit-content; min-height:var(--tap);
  padding:0 var(--s7); border-radius:var(--r-in);
  background:#fff; font-size:var(--t-base); font-weight:800;
  transition:transform .2s, box-shadow .2s; }
.lfin-st .lfin-go{ color:var(--start-dark); }
.lfin-cl .lfin-go{ color:var(--close-deep); }
@media (hover:hover){
  .lfin-go:hover{ transform:translateY(-2px); box-shadow:var(--shadow-btn); }
}
@media (max-width:820px){
  .lfin{ grid-template-columns:1fr; }
  .lfin-s{ min-height:0; padding:var(--s9) var(--s6); }
}

/* ⚠️ 차례를 열둘까지 늘립니다 — app.css 는 여섯까지만 있습니다.
   없으면 일곱째부터 한꺼번에 나타나서 흐름이 끊깁니다. */
.rv-stg > [data-rv]:nth-child(7){  --rvd:.30s; }
.rv-stg > [data-rv]:nth-child(8){  --rvd:.35s; }
.rv-stg > [data-rv]:nth-child(9){  --rvd:.40s; }
.rv-stg > [data-rv]:nth-child(10){ --rvd:.45s; }
.rv-stg > [data-rv]:nth-child(11){ --rvd:.50s; }
.rv-stg > [data-rv]:nth-child(12){ --rvd:.55s; }