/* ===== board.css — 공개 리더보드 `/board`(S5 v1.6) 전용 · 전광판 =====
   정본: wiki/design/design-system.md v2.6
         §2(토큰·순위 배지 토큰) · §3(.hd·.stats·3단 헤더·푸터) · §4(.lb-row·.roll) · §6(아이콘 규율)
         §7(스페이싱) · §9(모션 12·13·14·15·16) · §10(접근성) · §12(qr `/board` 예외 2건)
         + 확정 실물 public/index.html(마케팅 문법 실측값)

   담는 것: tokens.css에 없는 것 = 마케팅 문법(헤더·3단 타이틀·.stats·.fn·푸터)
            + `/board` 전광판 규격(순위 배지·행 막대·숫자 롤·변동 표식·갱신 도트).
   담지 않는 것: .lb / .lb-row 기본 골격 / .btn / .num / base — 전부 tokens.css(§11) 소관.
                 여기서는 §12가 `/board`에 허용한 확장만 얹는다(막대 슬롯·배지 열·변동 열).

   색: 전부 var(--…). 리터럴은 §3 규격이 명시한 #fff·rgba(255,255,255,.8)(헤더 블러) 2건뿐이다.
       순위 배지 색은 tokens.css에 등재된 --rank-1·--rank-3 토큰을 그대로 쓴다(신규 색 발명 0건).

   수직 리듬: `/board`는 qr 프로퍼티(§12) — 마케팅 헤더는 허용되지만 섹션 100px 리듬은 금지다.
   따라서 블록 24 · 그룹 40의 도구 리듬을 쓰고, 상단만 고정 헤더 높이(60)를 비켜 앉는다. */

/* ── 마케팅 헤더(.hd) — 고정 60px · 블러 반투명 ── */
.hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  height: var(--header-h); display: flex; align-items: center;
  transition: box-shadow .2s ease;          /* §9-3 헤더 그림자 */
}
.hd.scrolled { box-shadow: 0 1px 0 var(--g200); }
.hd-in {
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { font-size: 18px; font-weight: 700; color: var(--g900); white-space: nowrap; }
.logo .pt { color: var(--blue); }

/* 헤더 우측 상태 묶음 — 시연 데이터 태그 · 갱신 실패 태그 · 수동 새로고침 */
.hd-st { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hd-st .tag { white-space: nowrap; }
.hd-st .btn { flex: none; }

/* 폭에 따라 라벨을 줄이는 공통 문법(스탯 단위 라벨과 같은 규칙) */
.u-short { display: none; }

/* 상태 태그·"더 보기"는 display를 직접 잡는 요소라 [hidden]이 밀린다 — 여기서 못박는다. */
[hidden] { display: none !important; }

/* ── 본문 컨테이너 ── */
.bd { padding: calc(var(--header-h) + 40px) 24px 64px; }
.bd-in { max-width: var(--maxw); margin: 0 auto; }

/* ── 3단 타이틀 블록 [아이브로 → h2 → sub] ── */
.eyebrow { font-size: 18px; font-weight: 700; color: var(--blue); margin-bottom: 12px; }
.bd-head h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.3; letter-spacing: -0.01em; max-width: 720px; }
.bd-head .sub {
  font-size: clamp(16px, 2vw, 19px); line-height: 1.55; font-weight: 600;
  color: var(--g600); margin-top: 16px; max-width: 640px;
}

/* 갱신 도트(§9-14) — 기준 시각 옆. `.pill .dot` 문법 재사용(신규 모션 아님: keyframes도 tokens의 pulse). */
.live { display: inline-flex; align-items: center; margin-left: 8px; vertical-align: middle; }
.live .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
  animation: pulse 1.6s ease-in-out infinite;
}
/* 갱신 요약 한 줄 — 이 화면에서 aria-live를 갖는 유일한 노드(§10 남발 금지) */
.upd { font-size: 13px; line-height: 1.6; color: var(--g500); margin-top: 8px; }

/* ── 요약 스탯(.stats) — 목업 규격 이식: 한 장 분할이 아니라 타일 4장 ──
   라벨을 위로 올리고 숫자를 아래에 둔다(목업 .tile = .k → .n → .l 순서). 마크업은 그대로 두고
   flex order로 순서만 바꾼다 — 화면에 보이는 값과 문구는 하나도 건드리지 않는다. */
.stats {
  display: flex; gap: 12px; margin: 28px -24px 0; padding: 0 24px 6px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: none; border-radius: 0; box-shadow: none;
}
.stats::-webkit-scrollbar { display: none; }
.stat {
  flex: 0 0 auto; width: clamp(168px, 42vw, 214px); scroll-snap-align: start;
  background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-s);
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px;
  position: static;
}
.stat + .stat::before { content: none; }          /* 디바이더 제거 — 타일이 각자 판이다 */
.stat > span {                                     /* 라벨 — 타일 맨 위 */
  order: -1; margin-top: 0;
  font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--g500);
}
.stat b {
  display: flex; align-items: baseline; gap: 3px;
  font-size: 30px; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: var(--g900);
  font-variant-numeric: tabular-nums lining-nums;
}
.stat b small { font-size: 13px; font-weight: 600; color: var(--g500); margin-left: 0; }
@media (min-width: 1100px) {
  .stats { margin: 28px 0 0; padding: 0; overflow: visible; }
  .stat { width: auto; flex: 1 1 0; }
}

/* ── 리더보드(.lb 카드 자체 규격은 tokens.css) ── */
.lb { margin-top: 24px; }
.lb-empty { padding: 40px 24px; text-align: center; font-size: 15px; color: var(--g600); }

/* 행 = [순위 28] [이름 1fr] [막대 minmax] [오늘 auto] [총 건수 auto] — 목업 규격.
   메달 도형을 걷었다. 상위 세 자리를 그림으로 구분하면 시선이 순위표가 아니라 아이콘에 간다.
   순위는 숫자 하나로 읽히고, 길이 비교는 막대가 맡는다. */
.lb-row {
  grid-template-columns: 28px minmax(88px, 132px) minmax(80px, 1fr) auto auto;
  align-items: center; gap: 14px;
  min-height: 56px; padding: 9px 10px; margin: 0 -10px;
  border-radius: 10px; position: relative;
  transition: background .2s var(--ease);
}
.lb-row:hover { background: none; }   /* 행에 면을 깔지 않는다 — 막대가 이미 그 행을 가리킨다 */
.lb-row > * { min-width: 0; }

/* 순위 — 숫자만. 1위만 색으로 든다 */
.lb-row .rk { font-size: 13px; font-weight: 700; color: var(--g400); text-align: center; }
/* 1위 행에 면을 깔지 않는다 - 공용 tokens.css의 `.lb-row.r1{background:var(--blue-weak)}`가
   이 화면까지 넘어온다. 1위는 색으로만 가리킨다(막대·숫자), 뒤에 상자를 세우지 않는다. */
.lb-row.r1 { background: none; }
.lb-row.r1 .rk { color: var(--blue-deep); }
.lb-row[data-tier='1'] .rk, .lb-row[data-tier='2'] .rk, .lb-row[data-tier='3'] .rk { color: var(--g700); }

/* 건수 비례 막대(§12 `/board` 예외 2) — 목업 규격의 [트랙 + 줄무늬 채움].
   값이 면적이 아니라 눈금으로 읽혀 옆 행과 길이를 견주기 쉽다. 폭은 서버가 준 비율(--w)이다. */
.lb-row .bar { display: block; height: 12px; border-radius: 3px; background: var(--g100); overflow: hidden; }
.lb-row .bar i {
  display: block; height: 100%; width: var(--w, 0%); border-radius: 3px; color: var(--blue);
  background-image: repeating-linear-gradient(to right, currentColor 0 2px, transparent 2px 5px);
}
.lb-row.r1 .bar i { color: var(--blue-deep); }
.lb-row[data-tier='top10'] .bar i { color: #f78e6c; }
.lb-row[data-tier='rest'] .bar i { color: var(--g300); }
/* 진입(§9-15)·이동(§9-16) — 폭이 즉시 점프하지 않는다. */
.lb-row .bar.grow i { transition: width .6s cubic-bezier(.2,.8,.2,1); will-change: width; }
.lb-row .bar.move i { transition: width .4s cubic-bezier(.2,.8,.2,1); will-change: width; }

/* 오늘 증가분 — 승인 한 건마다 움직이는 자리라 상시 표시다.
   0인 행은 빈 칸으로 두고 글자를 만들지 않는다(0이 줄줄이 붙으면 소음이다). */
.lb-row .td { min-width: 62px; text-align: right; font-size: 13px; font-weight: 600; color: var(--blue-deep); }

/* 총 건수 */
.lb-row .sc { text-align: right; font-size: 15px; font-weight: 700; color: var(--g900); white-space: nowrap; }
.lb-row .sc small { font-size: 11px; font-weight: 600; color: var(--g500); margin-left: 2px; }
.lb-row.r1 .sc { color: var(--blue-deep); }

@media (max-width: 599px) {
  .lb-row { grid-template-columns: 22px minmax(64px, 96px) minmax(40px, 1fr) auto; gap: 10px; }
  .lb-row .td { display: none; }   /* 좁은 폭에서는 총 건수만 남긴다 */
}

/* 표시명 + 코드(S5 v1.5 · P-1-1) — 실명은 어떤 경우에도 오지 않는다:
   서버가 표시명과 채널 아이디만 내려준다. */
.lb-row .nm { display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1.25; }
.nm-t { font-size: 14.5px; font-weight: 600; color: var(--g800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row.r1 .nm-t { color: var(--blue-deep); }
.ch { display: flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 11.5px; line-height: 1.4; font-weight: 500; color: var(--g500); }
.ch svg { flex: none; fill: none; stroke: var(--g500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch .h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch a.h { text-decoration: underline; text-underline-offset: 2px; }

/* ── 숫자 롤(.roll · DS §4 v2.6 · 모션 §9-12) ─────────────────────────────
   값이 바뀔 때 자릿수가 세로로 굴러가는 흔한 카운터 연출. **배경 상자·힌지·낱장은 없다 —
   글자만 움직인다.** 상자를 씌우면 자형이 갇혀 깨진다(v2.5 split-flap 실패 원인).
   덕분에 40px 스탯 숫자와 18px 행 건수가 같은 문법을 쓴다.

   정지 상태 = `.roll > .roll-in > i` 글자 하나. 굴릴 때만 board.js가 스택에 두 글자를 넣고
   `transform: translateY()`로 민다(끝나면 다시 한 글자로 접고 will-change도 함께 걷는다).
   애니메이션 속성은 transform 하나뿐이다 — 레이아웃·페인트를 유발하지 않는다. */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rolls { display: inline-flex; align-items: center; }
.stat .v { display: inline-flex; vertical-align: middle; }
.roll {
  display: block; width: 1ch; height: 1.2em; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.roll-in { display: block; }
.roll-in > i, .rolls .sep {
  display: block; height: 1.2em; line-height: 1.2em; font-style: normal; text-align: center;
}
.roll-in.go { transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }

/* ── "더 보기" — 20행 단위로 아래에 펼친다(페이지 이동 없음) ── */
.bd-more { margin-top: 24px; display: flex; justify-content: center; }
.bd-more .btn { width: auto; padding: 0 28px; }

/* ── 각주(.fn) ── */
.fn { font-size: 13px; line-height: 1.6; color: var(--g500); margin-top: 40px; max-width: var(--textw); }
.fn + .fn { margin-top: 8px; }

/* ── 푸터 ── */
footer { background: var(--g50); border-top: 1px solid var(--g200); padding: 32px 24px; }
.ft-in {
  max-width: var(--maxw); margin: 0 auto; font-size: 12.5px; line-height: 1.7;
  color: var(--g500); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ── 4폭 대응(1440 · 1100 · 900 · 390) ── */
@media (max-width: 1199px) {
  .stat b { font-size: 34px; }
}
@media (max-width: 1000px) {
  /* 막대 선단(2px)을 걷어낸다 — 이 폭부터는 하위권 막대의 끝이 채널 아이디 글자 위에 얹힌다
     (900 실측: 막대 끝 153px vs 아이디 끝 158px). 막대 색면은 그대로라 비율은 그대로 읽힌다. */
  .lb-row .bar::after { display: none; }
}
@media (max-width: 939px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--g100); }
}
@media (max-width: 599px) {
  .bd { padding: calc(var(--header-h) + 40px) 20px 64px; }
  footer { padding: 32px 20px; }
  /* 로고는 프로퍼티명만 남긴다 — 캠페인명까지 두면 18/700이 헤더 폭을 넘는다 */
  .logo-c { display: none; }
  /* 라벨 축약(screen-specs S5 검증 항목) — 스탯 단위 라벨·갱신 실패 태그 공통 */
  .u-long { display: none; }
  .u-short { display: inline; }
}
@media (max-width: 479px) {
  /* §12 `/board` 예외 1: ≤479에서도 스탯 2열.
     1열은 스탯만 540px를 먹어 390 첫 화면(844)에 순위 1행도 들어오지 않는다(craft §1-3).
     2열 셀 폭(390에서 내용 폭 135)에는 34px 숫자가 들어가지 않아 단위가 줄바꿈됐다 —
     예외 1을 성립시키기 위한 한 단계 축소다(craft §2-4 단위 병기·캡션 줄수 일치 유지). */
  .stat { padding: 24px 20px; }
  .stat b { font-size: 28px; }
}

/* ── 캠페인 목록(/campaigns) — 지역마다 캠페인이 따로 돈다 ──────────────
   `/board` 하나가 "지금 활성인 캠페인 하나"를 골라 버리면 어느 지역을 보는지 알 수 없다.
   목록에서 고르고 들어가는 구조라야 배치가 둘 이상 돌아도 말이 된다. */
.camps { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-top:40px; }
.camp { position:relative; display:flex; flex-direction:column; gap:6px;
  padding:24px 22px 20px; border-radius:var(--r-card);
  background:linear-gradient(180deg, #fff, rgba(255,255,255,.72));
  box-shadow:var(--shadow-s); color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.camp:hover { transform:translateY(-3px); box-shadow:var(--shadow-m); }
.camp-st { display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--g500); }
.camp-st .dot { width:8px; height:8px; border-radius:50%; background:var(--g300); }
.camp[data-status='active'] .camp-st { color:var(--blue-deep); }
.camp[data-status='active'] .camp-st .dot { background:var(--blue); animation:pulse 1.6s ease-in-out infinite; }
.camp[data-status='settling'] .camp-st { color:var(--warn); }
.camp[data-status='settling'] .camp-st .dot { background:var(--warn); }
.camp-nm { font-size:clamp(20px,2.2vw,24px); font-weight:700; letter-spacing:-.03em; line-height:1.25; color:var(--g900); }
.camp-rg { font-size:14px; color:var(--g600); }
.camp-meta { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:14px; padding-top:14px; box-shadow:inset 0 1px 0 var(--g100); }
.camp-term { font-size:13px; color:var(--g500); font-variant-numeric:tabular-nums; }
.camp-left { font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--g900); }
.camp-go { display:inline-flex; align-items:center; gap:4px; margin-top:14px;
  font-size:14px; font-weight:700; color:var(--blue-deep); transition:gap .2s var(--ease); }
.camp:hover .camp-go { gap:8px; }
.camp-go svg { width:16px; height:16px; }

/* 캠페인 카드 CTA — 랜딩 히어로와 같은 버튼 한 벌 */
.camp-item{display:flex;flex-direction:column;gap:14px}
.camp-cta{display:flex;gap:10px;flex-wrap:wrap}
.camp-cta .btn{flex:1 1 auto;width:auto;height:52px;padding:0 24px;font-size:17px;font-weight:600;border-radius:var(--r-pill)}
@media(max-width:560px){.camp-cta .btn{flex:1 1 100%}}

/* ═══ 순위 목록 — 카드를 걷고 배경 위에 바로 세운다 ═══
   흰 판 안에 넣으니 행이 판 여백에 눌려 양끝이 잘렸다. 목록은 지면 위에 바로 놓고
   여백은 본문 컬럼(.bd-in)이 준다. 행 하나하나가 카드가 아니라 **표의 줄**로 읽힌다. */
.lb{background:none;border-radius:0;box-shadow:none;overflow:visible;margin-top:8px}
.lb-row{padding-left:4px;padding-right:4px;margin-left:0;margin-right:0}

/* 검색칸도 판이 아니라 지면 위 입력으로 */
.find{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;margin:0;padding:6px 0 10px}
.find svg{left:18px}
.find button{right:2px}
@media(max-width:760px){.lb-row{padding-left:2px;padding-right:2px}}

/* ═══ 플랫폼 헤더 — 랜딩과 같은 한 벌 ═══ */
.hd .pg{display:flex;gap:24px;margin:0 auto}
.hd .pg a{display:flex;align-items:center;height:var(--header-h);font-size:16px;font-weight:500;
  white-space:nowrap;color:var(--g700);transition:color .18s ease}
.hd .pg a:hover{color:var(--g900)}
/* 선택 표시 — 랜딩과 같은 문법(색 + 밑줄) */
.hd .pg a{position:relative}
.hd .pg a.cur{font-weight:700;color:var(--g900)}

/* ── 하위 페이지 표식 — **지금 보고 있는 것**을 로고 옆에 붙인다.
   내비게이션은 「어느 층인지」만 말하고, 이 칩이 「그 층의 무엇인지」를 말한다.
   전에는 랜딩과 머리가 완전히 같아 페이지를 옮겼는지 알 수 없었다. ── */
.hd-where { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
/* 지역명 — 주관 기관의 얼굴로 적는다(강원=강원특별자치도체, 화성=Paperlogy).
   랜딩 티켓의 캠페인 이름과 같은 규칙이다. 파일이 없으면 조용히 Pretendard로 떨어진다. */
@font-face{font-family:"Paperlogy";src:url("/fonts/Paperlogy-7Bold.woff2") format("woff2");
  font-weight:700;font-display:swap}
@font-face{font-family:"GangwonState";src:url("/fonts/GangwonState-SemiBold.woff2") format("woff2");
  font-weight:600;font-display:swap}
.hd-where .rg { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--g900); white-space: nowrap; }
.hd-where .rg[data-region="hwaseong"] { font-family: "Paperlogy", 'Pretendard Variable', Pretendard, sans-serif; font-weight: 700; }
.hd-where .rg[data-region="gangwon"] { font-family: "GangwonState", 'Pretendard Variable', Pretendard, sans-serif; font-weight: 600; letter-spacing: -.03em; }
@media (max-width: 560px) { .hd-where .rg { font-size: 16px; } }
.hd .go{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:12px;
  background:rgba(42,38,34,.05);font-size:16px;font-weight:500;color:var(--g800);
  transition:background .18s ease;white-space:nowrap}
.hd .go:hover{background:rgba(42,38,34,.09)}
@media(max-width:760px){
  .hd .pg{gap:2px;margin-left:auto;margin-right:8px}
  .hd .pg a{font-size:14px;padding:0 8px}
  .hd .go{display:inline-flex;height:32px;padding:0 12px;font-size:13px;margin-left:8px;white-space:nowrap}   /* 숨기지 않는다 — 플랫폼으로 가는 길(사용자 지적) */
}

/* ═══ 집계 — 상자 대신 선과 여백으로 가른다 ═══
   흰 상자 넷을 늘어놓으면 숫자보다 상자가 먼저 보인다.
   위에 굵은 선 하나를 긋고 칸 사이는 얇은 세로선만 둔다(레퍼런스 규격). */
@media(max-width:760px){

}

/* 본문 — 설명문은 regular(400) */
.bd-head .sub,.fn,.lb-empty,.camp-rg{font-weight:400}

/* ═══ 캠페인 페이지 — 소개 · 순위 · 쿠폰 찍기 ═══
   이 화면은 순위표가 아니라 **캠페인 한 건의 페이지**다. 순위는 그 안의 한 단이다. */
/* ═══ 스크롤 리빌 — 랜딩 site.css의 규칙을 글자 그대로 옮긴 것 ═══
   플랫폼과 캠페인이 한 사이트인데 한쪽만 정지 화면이면 다른 사이트로 읽힌다.
   눈금(시간·거리·이징)을 바꾸지 않는다 — 바꾸면 "비슷한데 다른" 것이 된다. */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.3,.7,.3,1),transform 1.05s cubic-bezier(.22,.61,.24,1)}
.rv.on{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}.rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s}.rv[data-d="4"]{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── 골목 띠 — 랜딩 `.camp::after`와 같은 그림·같은 규격 ──
   캠페인 페이지의 바닥이 랜딩과 같은 그림으로 끝난다. 장식이라 읽기를 막지 않는다. */
/* 위 여백은 `.bd`의 바닥(64px)이 이미 든다 — 여기서 또 주면 CTA와 그림 사이가 200px 가까이 벌어졌다(사용자 지적) */
/* 랜딩 시트(landing.css)에도 `.street`가 있다 — 히어로 그림 감싸개(절대 위치·left:50%·translateX(-50%)·bottom:12px·
   1.45s 미끄러져 들어오는 애니메이션). 이름이 같아 캠페인 띠에 그대로 걸려 띠가 12px 떠 있고(아래 상자와 틈) 왼쪽으로
   밀려 있었다(실측 top:-12px·translateX(-218px)). 여기서 전부 되돌린다. */
.street{position:relative;height:var(--strip);margin-top:0;left:auto;right:auto;bottom:auto;top:auto;width:auto;
  transform:none;animation:none;z-index:auto;
  /* 타일 실측 2600×440 — 지붕 윗선 y101, 지면선 y356(알파 기준 실측). 그 사이(256행)만 띠에 담는다:
     한 단위 u = 띠 높이/256, 그림 폭 = 2600u, 위로 101u 올려 지붕이 띠 윗변에, 지면선이 띠 밑변에 딱 닿는다.
     (전에는 4280×446으로 잡아 그림이 띠보다 커져 지붕이 잘리고, 지면 아래 흐린 보도가 아래 상자와 사이를 벌렸다) */
  --strip:135px;--strip-u:calc(var(--strip) / 256);--strip-w:calc(2600 * var(--strip-u));
  background:url("/wide_street_tile.webp") repeat-x;
  background-size:var(--strip-w) auto;
  background-position:center calc(-101 * var(--strip-u));
  filter:saturate(.85) brightness(1.02);opacity:.92;pointer-events:none}
@media(max-width:620px){.street{--strip:96px}}
/* 띠 위 여백 — 폰에서 그림이 붕 떠 보였다(사용자 지적: 진행 현황·쿠폰 둘 다). 랜딩의 띠 여백(--strip-gap: 56 → 좁으면 32)과 같은 자로 맞춘다.
   `.bd`의 바닥 여백(64)이 그 자리라, 띠가 따라오는 낱장에서만 줄인다. */
.bd.strip{padding-bottom:56px}
@media(max-width:860px){.bd.strip{padding-bottom:32px}}
.street::after{display:none}   /* 랜딩 .street의 바닥 그림자도 끈다 */
.street img,.street img.street-refl{display:none}

/* ── ABOUT DURE(#dure) — 랜딩 시트의 `.identity` 규칙이 그린다(사용자 지시: 메인 랜딩과 한 벌). 여기서는 캠페인 `.biz` 2열 자가 걸리지 않게만 한다.
   구조가 랜딩과 같아(section.identity > .wrap > .biz.dure) `.identity .biz`가 `.biz`의 2열 격자·위 여백을 한 열·0으로 덮는다. */
.identity .biz.dure{padding:0}   /* `.biz:first-of-type{padding-top:clamp(40~72)}`(특이도 0,2,0)가 랜딩의 `.identity .biz{padding:0}`를 뒤에서 이겼다 — 절 여백은 .identity가 갖는다 */
.identity .dure-p{font-size:16px;line-height:28px}   /* 랜딩 자(17/28) — 이 시트의 폰 눈금 목록에도 .dure-p가 있어 폰에서는 공통 눈금을 따른다 */

/* ── 순위 막대 — 화면에 들어오면 0에서 자란다 ──
   숫자가 실시간이라고 적어 두고 막대가 완성된 채로 서 있으면 정지 화면으로 읽힌다.
   폭은 인라인 스타일(--w)이 정하고, 여기서는 **자라나는 과정**만 준다. */
.lb.on .bar i{animation:bargrow .9s cubic-bezier(.22,.61,.24,1) both}
.lb .bar i{width:var(--w,0%)}
@keyframes bargrow{from{width:0}to{width:var(--w,0%)}}
.lb.on .lb-row:nth-child(1) .bar i{animation-delay:.04s}
.lb.on .lb-row:nth-child(2) .bar i{animation-delay:.12s}
.lb.on .lb-row:nth-child(3) .bar i{animation-delay:.2s}
.lb.on .lb-row:nth-child(4) .bar i{animation-delay:.28s}
.lb.on .lb-row:nth-child(5) .bar i{animation-delay:.36s}
.lb.on .lb-row:nth-child(n+6) .bar i{animation-delay:.44s}
@media(prefers-reduced-motion:reduce){.lb.on .bar i{animation:none}}

/* ── 캠페인 소개 머리 — **랜딩 히어로와 같은 자** ──
   새 조형을 만들지 않는다. 눈금만 랜딩에서 그대로 가져온다:
   아이브로우 13.5/600/.115em · 제목 clamp(30,4.2vw,54)/600 · 본문 clamp(16,1.9vw,21)/400 ·
   버튼 52px 알약. 앞서 26~40px에 24px 간격으로 눌러 두니 캠페인 이름이 숫자에 밀렸다. */
.cintro { padding: clamp(24px, 3.6vw, 56px) 0 0; text-align: center; }
/* 제목 그림 — 세로형(1122×1402). 브랜드 스토리 마을 그림 자리에 서되 세로라 폭을 더 묶는다.
   너무 크면 그림이 제목을 먹고, 너무 작으면 아이콘이 된다 — 300px 남짓이 이름과 같은 무게다. */
.cintro-img { width: min(120px, 32vw); margin: 0 auto 24px; line-height: 0; }
.cintro-img img { display: block; }
.cintro-p { margin-left: auto; margin-right: auto; }
.cintro-nav { justify-content: center; }
.cintro-facts div { align-items: center; text-align: center; }
/* 낱장 머리 한 벌(사용자 확정): 아이브로우 13 · 제목 64/32 · 하단문구 18. 히어로(랜딩·스토리)만 20/16이다 */
.cintro-k { font-size: 13px; font-weight: 600; letter-spacing: .115em; color: var(--blue); margin: 0 0 32px; }
.cintro-nm { font-size: clamp(32px, 5vw, 64px); font-weight: 600; letter-spacing: -.035em;
  line-height: 1.2; color: var(--g900); margin: 0; text-wrap: balance; }
.cintro-p { margin: 24px 0 0; font-size: 18px; font-weight: 400;
  line-height: 1.6; color: var(--g600); max-width: 40em; }
/* 랜딩의 `.cta-row` 규격. qr tokens의 `.btn`은 손님 화면용이라 `width:100%`다 — 여기서 푼다.
   폭을 안 풀면 버튼 둘이 화면을 가로지르는 판이 돼 제목보다 무거워진다. */
.cintro-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(24px, 2.9vh, 32px); }
.cintro-nav .btn { width: auto; height: 52px; padding: 0 32px; font-size: 17px; font-weight: 600; flex: 0 0 auto; }
/* ── 숫자 띠 = 쿠폰 한 장(.cintro-facts) ──
   네 칸을 **한 박스**에 넣고 칸 사이를 **세로 절취선**으로 끊는다(랜딩 흐름 카드의 가로 절취선을
   세로로 세운 것 — 사용자 지시). 절취선 위아래에 홈을 판다: 마스크로 원 여섯 개를 빼내므로
   테두리로 흉내 낸 홈이 아니라 뒤가 그대로 비친다. 라운드는 14 — 티켓(24)보다 덜 굴린다.
   칸이 같은 폭(1fr)이어야 홈(25·50·75%)과 절취선이 한 자리에 선다. */
/* 두 겹이다 — 랜딩 흐름 카드(.hcard)와 같은 문법. 바깥 틀은 반투명(뒤가 비친다)이고 홈은 바깥에만,
   안쪽 판(g100)은 6px 안에 앉는다. 라운드는 바깥 14 · 안 8(차이 6 = 띄운 만큼, 흐름 카드의 24·18과 같은 관계). */
.cintro-facts { --nr: 9px; --r: 14px; --gap: 6px;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin: clamp(32px, 4vw, 48px) auto 0; max-width: 880px; padding: var(--gap);
  border-radius: var(--r); background: rgba(244, 243, 241, .5);
  box-shadow: inset 0 0 0 1px rgba(42, 38, 34, .12);
  -webkit-mask-image:
    radial-gradient(circle var(--nr) at 25% 0, transparent 97%, #000 100%),
    radial-gradient(circle var(--nr) at 50% 0, transparent 97%, #000 100%),
    radial-gradient(circle var(--nr) at 75% 0, transparent 97%, #000 100%),
    radial-gradient(circle var(--nr) at 25% 100%, transparent 97%, #000 100%),
    radial-gradient(circle var(--nr) at 50% 100%, transparent 97%, #000 100%),
    radial-gradient(circle var(--nr) at 75% 100%, transparent 97%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(circle var(--nr) at 25% 0, transparent 97%, #000 100%),
    radial-gradient(circle var(--nr) at 50% 0, transparent 97%, #000 100%),
    radial-gradient(circle var(--nr) at 75% 0, transparent 97%, #000 100%),
    radial-gradient(circle var(--nr) at 25% 100%, transparent 97%, #000 100%),
    radial-gradient(circle var(--nr) at 50% 100%, transparent 97%, #000 100%),
    radial-gradient(circle var(--nr) at 75% 100%, transparent 97%, #000 100%);
          mask-composite: intersect; }
.cintro-facts::before { content: ""; position: absolute; inset: var(--gap); z-index: 0;
  border-radius: calc(var(--r) - var(--gap)); background: var(--g100); }
/* CTA 뒤에 설 때만 크게 벌린다 — 머리의 바닥을 그림처럼 받치는 자리(사업 소개) */
.cintro-nav + .cintro-facts { margin-top: clamp(72px, 9vw, 128px); }
/* 기준 시각 줄 — 본문이 아니라 **메타**다. 21px 본문 자로 세우면 제목과 다툰다 */
/* 기준 줄 — 제목 아래 24px(랜딩 `.sub`과 같은 자), 가운데 정렬(사용자 지시). 그 아래 숫자 띠까지는 넉넉히 벌린다 —
   머리·제목·기준 줄·띠가 붙어 한 덩이로 읽혔다(사용자 지적). */
.cintro-p.meta { margin: 24px auto 0; text-align: center; font-size: 18px; line-height: 28px; color: var(--g500); }
.cintro-p.meta + .cintro-facts { margin-top: clamp(48px, 6vw, 80px); }
.cintro-facts div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 16px; text-align: center; }
/* 세로 절취선 — 홈 안쪽에서 시작해 홈에 물리지 않는다(점선 5·5는 랜딩 흐름 카드와 같은 눈금) */
.cintro-facts div + div::before { content: ""; position: absolute; left: -.5px; top: calc(var(--nr) + 2px); bottom: calc(var(--nr) + 2px);
  width: 1px; background: repeating-linear-gradient(to bottom, rgba(42, 38, 34, .22) 0 5px, transparent 5px 10px); }
.cintro-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--g500); }
.cintro-facts dd { margin: 0; font-size: clamp(19px, 2.2vw, 26px); font-weight: 800;
  letter-spacing: -.03em; color: var(--g900); line-height: 1; white-space: nowrap; }
/* 기간은 **세는 값이 아니라 읽는 값**이다 — 같은 크기로 세우면 두 줄로 접힌다 */
.cintro-facts .per dd { font-size: clamp(15px, 1.6vw, 19px); font-weight: 700; }
/* 4칸 가로가 우선이다(사용자 지시) — 접기 전에 먹임과 글자를 먼저 줄인다 */
.dday-chip { display: none; }
@media (max-width: 760px) {
  .cintro-facts div { padding: 20px 8px; gap: 8px; }
  .cintro-facts dd { font-size: clamp(15px, 3.6vw, 20px); }
  /* 기간은 이 구간에서 칸보다 길다(실측 600: 140 > 135). 칸을 접지 않고 날짜를 두 줄로 접는다 — 4칸이 우선이다 */
  .cintro-facts .per dd { font-size: clamp(12px, 3vw, 15px); white-space: normal; line-height: 1.25; max-width: 9ch; }
  .cintro-facts dt { font-size: 11px; letter-spacing: .06em; }
  .cintro-nav .btn { flex: 1 1 auto; }
}
/* 그래도 안 들어가면 2×2 — 절취선은 **십자**(세로 하나 + 가로 하나), 홈은 네 변 가운데 */
/* 좁아지면 **기간과 남은 기간을 합친다** — 같은 내용이라 둘 다 세우면 자리만 먹는다(사용자 지시).
   남은 기간은 기간 칸 위에 칩으로 붙고, 칸은 셋이 된다: 기간(+D-day) · 참여자 · 누적 실방문.
   가로 셋이 서는 동안은 홈을 33·67%에 판다. */
@media (max-width: 560px) {
  .cintro-facts { grid-template-columns: repeat(3, minmax(0, 1fr));
    -webkit-mask-image:
      radial-gradient(circle var(--nr) at 33.333% 0, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 66.667% 0, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 33.333% 100%, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 66.667% 100%, transparent 97%, #000 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      radial-gradient(circle var(--nr) at 33.333% 0, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 66.667% 0, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 33.333% 100%, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 66.667% 100%, transparent 97%, #000 100%);
            mask-composite: intersect; }
  .cintro-facts .per + div { display: none; }                 /* 남은 기간 칸 — 칩이 대신 말한다 */
  /* 기간 칸이 칩 때문에 더 높다 — 나머지 두 칸은 그 높이 안에서 세로 중앙에 선다(사용자 지시) */
  .cintro-facts div { padding: 18px 8px; gap: 8px; justify-content: center; }
  .cintro-facts dd { font-size: 19px; }
  .cintro-facts .per dd { font-size: 13px; white-space: normal; line-height: 1.25; max-width: 9ch; }
  .dday-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; margin-bottom: 2px;
    border-radius: var(--r-pill); background: var(--blue-weak); color: var(--blue-deep); font-size: 12px; font-weight: 700; }
}
/* 모바일 — 하나로 뭉치지 않고 **위에서 아래로 내려오는 리스트 셋**(사용자 지시). 위아래 여백은 더 작고,
   칸 사이는 가로 절취선, 홈은 양 옆 가장자리 33·67%에 판다. 같은 쿠폰이 세로로 선 것뿐이다. */
@media (max-width: 400px) {
  .cintro-facts { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr;
    -webkit-mask-image:
      radial-gradient(circle var(--nr) at 0 33.333%, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 0 66.667%, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 100% 33.333%, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 100% 66.667%, transparent 97%, #000 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      radial-gradient(circle var(--nr) at 0 33.333%, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 0 66.667%, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 100% 33.333%, transparent 97%, #000 100%),
      radial-gradient(circle var(--nr) at 100% 66.667%, transparent 97%, #000 100%);
            mask-composite: intersect; }
  .cintro-facts div { flex-direction: row; justify-content: space-between; align-items: center; padding: 14px 18px; gap: 12px; text-align: left; }
  .cintro-facts .per { flex-wrap: wrap; }
  .cintro-facts .per dd { font-size: 15px; white-space: nowrap; max-width: none; }
  .cintro-facts dd { font-size: 18px; }
  /* 세로 절취선 → 가로 절취선. 홈 안쪽에서 시작해 홈에 물리지 않는다 */
  .cintro-facts div + div::before { left: calc(var(--nr) + 2px); right: calc(var(--nr) + 2px); top: -.5px; bottom: auto; height: 1px; width: auto;
    background: repeating-linear-gradient(to right, rgba(42, 38, 34, .22) 0 5px, transparent 5px 10px); }
  .dday-chip { order: 3; margin: 0; }
}

/* 쿠폰 찍는 법 — 손님이 실제로 하는 일 셋 */
/* ── 사이트맵 푸터(.sf) — 페이지를 낱장으로 가른 뒤의 지도 ──
   묶음은 **누구의 화면인가**로 가른다: 플랫폼 · 지역별 캠페인 · 운영 · 손님.
   가로 나열(구 .fnav)로는 층이 안 보인다 — 열마다 머리를 세워 층을 눈에 넣는다. */
.sf{background:var(--g900);color:#fff}
.sf-in{max-width:1176px;margin:0 auto;padding:56px 24px 40px}
.sf-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.sf-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.sf-h{margin:0 0 4px;font-size:14px;font-weight:700;letter-spacing:-.01em;color:#fff}
.sf-col a{font-size:14px;font-weight:400;line-height:20px;color:rgba(255,255,255,.62);text-decoration:none}
/* 누를 수 없는 줄 — 손님 쿠폰 화면은 매장 QR로만 열린다. 링크와 같은 자리에 서되 색과 커서로 「여기는 길이 아니다」를 말한다 */
.sf-off{display:block;font-size:14px;font-weight:400;line-height:20px;color:rgba(255,255,255,.34);cursor:default}
.sf-col a:hover{color:#fff}
.sf-n{margin:2px 0 0;font-size:12px;line-height:18px;color:rgba(255,255,255,.38)}
.sf-bot{max-width:1176px;margin:0 auto;padding:20px 24px 40px;
  font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.45);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px}
/* 법적 고지 — 사이트맵 칸이 아니라 바닥 줄에 둔다(어느 페이지에서나 같은 자리) */
.sf-legal{display:flex;gap:18px}
.sf-legal a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .15s ease}
.sf-legal a:hover{color:#fff}
@media(max-width:1000px){.sf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}}
@media(max-width:620px){.sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-in{padding:40px 20px 28px}.sf-bot{padding:16px 20px 32px}}

/* ── 사업 소개(.biz) — 절마다 왼쪽 머리 + 오른쪽 내용 ──
   판(카드) 안에 좌우를 넣던 것을 **절 자체의 2열**로 폈다. 카드로 감싸면 절이 부품처럼
   보이고, 절이 둘 이상 이어질 때 카드가 겹겹이 쌓여 층이 안 읽힌다.
   왼쪽 좁고 오른쪽 넓게 — 왼쪽은 한 번 읽고 지나가는 머리, 오른쪽은 눈이 훑는 목록이다.
   절끼리는 헤어라인으로만 끊는다(배경을 갈면 흰 바탕의 도구 화면과 싸운다). */
.biz{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,5vw,72px);padding:clamp(48px,7vw,88px) 0 0}
.biz:first-of-type{padding-top:clamp(40px,6vw,72px)}
.biz-l{min-width:0}
.biz-eb{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--blue)}
.biz-t{margin:0;font-size:clamp(20px,2.3vw,26px);font-weight:700;letter-spacing:-.03em;
  line-height:1.35;color:var(--g900);text-wrap:balance}
/* 「진행 중」 — 점이 살아 있어야 진행 중으로 읽힌다(랜딩 티켓과 같은 문법) */
.biz-live{display:inline-flex;align-items:center;gap:6px;margin-right:10px;
  padding:4px 10px;border-radius:var(--r-pill);background:var(--blue-weak);
  color:var(--blue-deep);font-size:12px;font-weight:700;vertical-align:middle}
.biz-live i{width:6px;height:6px;border-radius:50%;background:var(--blue);
  animation:bizdot 1.8s ease-in-out infinite}
@keyframes bizdot{0%,100%{opacity:1}50%{opacity:.35}}
.biz-as{margin:12px 0 0;font-size:13px;font-weight:600;color:var(--g500)}
.biz-lead{margin-top:24px}
.biz-lk{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--g500)}
.biz-ln{display:flex;align-items:baseline;gap:4px;margin:0}
.biz-ln b{font-size:clamp(38px,5vw,52px);font-weight:800;letter-spacing:-.04em;color:var(--g900);line-height:1}
.biz-ln small{font-size:15px;font-weight:600;color:var(--g500)}
.biz-p{margin:20px 0 0;font-size:14px;line-height:23px;color:var(--g600)}
.biz-lnk{display:inline-flex;align-items:center;gap:2px;margin-top:18px;
  font-size:13.5px;font-weight:700;color:var(--blue-deep);text-decoration:none}
.biz-lnk svg{width:15px;height:15px}
.biz-lnk:hover{text-decoration:underline}

/* ── 계보(.lin) — 랜딩 적용모델 넷 중 이 캠페인이 고른 하나 ──
   라디오 조형은 랜딩 `.model::after`를 그대로 쓴다(안쪽 링 1.5px, 고르면 7px 채움).
   고른 칸 아래로 코랄이 옅어지는 선이 흘러 다음 내용으로 이어진다 —
   "넷 중 하나가 여기로 내려왔다"를 글로 적지 않고 배치로 말한다. */
.lin{margin-top:26px}
.lin-k{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--g500)}
.lin-list{list-style:none;margin:0;padding:0;position:relative}
.lin-list li{display:flex;align-items:center;gap:10px;padding:9px 0;position:relative}
.lin-list .dot{flex:none;width:16px;height:16px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--g300);transition:box-shadow .25s var(--ease)}
.lin-list li.on .dot{box-shadow:inset 0 0 0 1.5px var(--blue),inset 0 0 0 5px var(--blue)}
.lin-list .n{flex:none;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--g400)}
.lin-list li.on .n{color:var(--blue-deep)}
.lin-list .t{font-size:13.5px;font-weight:500;color:var(--g500);letter-spacing:-.01em}
.lin-list li.on .t{font-weight:700;color:var(--g900)}
/* 고른 칸에서 아래로 흐르는 선 — 코랄이 옅어지며 다음 내용에 닿는다 */
.lin-list li.on::after{content:"";position:absolute;left:7.5px;top:calc(50% + 12px);
  width:2px;height:calc(100% + 26px);border-radius:1px;
  background:linear-gradient(180deg,var(--blue) 0%,rgba(240,86,58,.35) 55%,rgba(240,86,58,0) 100%)}
.lin-list li.on:last-child::after{display:none}

.biz-r{min-width:0;display:grid;gap:28px;align-content:start}
.biz-gk{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--g500)}
/* 이름과 값이 한 줄 — 이름 열을 고정해야 값이 세로로 정렬된다.
   행 사이는 헤어라인 하나로만 끊는다(레퍼런스 「주요 약력」 문법). */
.biz-rows{margin:0}
.biz-rows{display:grid;gap:14px}
.biz-rows > div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px}
.biz-rows dt{margin:0;font-size:13px;font-weight:700;color:var(--blue-deep)}
.biz-rows dd{margin:0;font-size:14px;font-weight:500;line-height:21px;letter-spacing:-.01em;color:var(--g800)}
.biz-note{margin:4px 0 0;font-size:12.5px;line-height:19px;color:var(--g500)}
@media(max-width:860px){
  .biz{grid-template-columns:minmax(0,1fr);gap:26px;padding:32px 0}
  .biz-rows > div{grid-template-columns:72px minmax(0,1fr);gap:12px}
}

/* ── 내 이름 찾기(.lbfind) — 표 **바로 위** ──
   규격은 목업 campaign.html `.find`를 따른다(52px · g100 바탕 · 포커스 때 흰 바탕 + 코랄 2px).
   자리도 목업과 같다: 고르는 손과 걸러지는 표가 붙어 있어야 한다.
   판(g50 카드)은 걷었다 — 표의 도구이지 표와 나란한 별개 블록이 아니다. */
.lbfind { margin: 22px 0 10px; }
.lbfind-in { position: relative; display: flex; align-items: center; }
.lbfind-in svg { position: absolute; left: 18px; width: 18px; height: 18px; color: var(--g400); pointer-events: none; }
.lbfind-in input { width: 100%; height: 52px; border: 0; border-radius: var(--r-m); background: var(--g100);
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--g900); padding: 0 48px;
  appearance: none; -webkit-appearance: none; box-sizing: border-box; }
.lbfind-in input::-webkit-search-cancel-button,
.lbfind-in input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.lbfind-in input::placeholder { color: var(--g400); }
.lbfind-in input:focus { outline: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--blue); }
.lbfind-clr { position: absolute; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--g200); color: var(--g700); font-size: 18px; line-height: 1; cursor: pointer; }
.lbfind-clr:hover { background: var(--g300); }
.lbfind-none { margin: 10px 0 0; font-size: 13.5px; line-height: 20px; color: var(--g500); }
.lbfind-none b { font-weight: 700; color: var(--g700); }

/* ── 쿠폰 낱장(.cuse) — 절 둘(사용법 · 코드 발급), 단계는 랜딩 로드맵 문법 ──
   판(g50 카드)은 걷었다 — 로드맵의 선이 화면 끝까지 가려면 절이 판 안에 갇히면 안 된다. */
.cuse { padding: clamp(40px, 6vw, 72px) 0 0; }
.cuse + .cuse { margin-top: clamp(24px, 4vw, 48px); }
.cuse .cintro-k { margin-bottom: 14px; }
/* 쿠폰은 **낱장 머리가 없고 절 제목만 있는** 낱장이다(사용자 지시) — 절 제목 한 벌(48/28)을 쓴다 */
.cuse-h { margin: 0; font-size: clamp(28px, 4.4vw, 48px); font-weight: 600; letter-spacing: -.035em; line-height: 1.25; color: var(--g900); }
.cuse-lead { margin: 14px 0 0; font-size: 18px; line-height: 28px; color: var(--g600); max-width: 40em; }
.cuse-fn { margin: 28px 0 0; font-size: 12.5px; line-height: 20px; color: var(--g500); }
/* 하단 CTA — 머리의 CTA(.cintro-nav)와 같은 간격·크기(32 위, 52px 알약, 폭은 글자만큼) */
.cuse-cta { display: flex; margin-top: 20px; }   /* 본문→CTA 20 */
.cuse-cta .btn { width: auto; height: 52px; padding: 0 32px; font-size: 17px; font-weight: 600; }

/* ── 로드맵(.road/.phase) — 랜딩 site.css의 규칙을 글자 그대로 옮긴 것. 열 수만 --n으로 받는다 ── */
.road{position:relative;--rgap:clamp(24px,4vw,56px);display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
  gap:var(--rgap);margin:40px 0 0;padding:0;list-style:none}
.phase{position:relative;padding:38px 0 0}
/* 점 — 속이 빈 원. 바깥으로 배경색 고리를 한 겹 둘러 선이 원에 닿지 않게 한다 */
.phase::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:inset 0 0 0 4.5px var(--blue),0 0 0 5px #fff}
/* 선은 판을 넘어 화면 끝까지 간다 — 점(.phase::before)이 뒤에 오는 형제라 선 위에 덮인다 */
.road::before{content:"";position:absolute;left:50%;translate:-50% 0;width:100vw;
  top:8px;height:2px;pointer-events:none;background:rgba(240,86,58,.26)}
.phase .k{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--blue-deep)}
.phase h3{margin:8px 0 0;font-size:clamp(17px,1.8vw,21px);font-weight:700;letter-spacing:-.03em;color:var(--g900)}
.phase p{margin:10px 0 0;font-size:15px;font-weight:400;line-height:24px;color:var(--g600);max-width:24em}
@media(max-width:860px){
  .road{grid-template-columns:minmax(0,1fr);gap:32px}
  .road::before{display:none}
  .phase::after{content:"";position:absolute;left:8px;top:18px;bottom:-32px;width:2px;background:rgba(240,86,58,.26)}
  .phase:last-child::after{display:none}
}

/* 다른 캠페인 — 목록 페이지를 따로 두지 않고 여기서 건너뛴다 */
.cothers { margin-top: 48px; }
.cothers-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 16px; }
.cothers-item { display: flex; align-items: baseline; gap: 8px; padding: 16px;
  border-radius: 16px; background: #fff; box-shadow: var(--shadow-s); text-decoration: none;
  transition: transform .2s var(--ease); }
.cothers-item:hover { transform: translateY(-2px); }
.cothers-item b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--g900); }
.cothers-item span { font-size: 12.5px; color: var(--g500); }

/* 고르기 화면의 줄 — 이름과 설명이 두 줄로 선다(다른 캠페인 줄은 한 줄짜리라 baseline 정렬) */
.cothers-item.pickone { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; }

/* ── 준비 중(.prep) — 히어로는 또렷, 아래는 흐림 ──
   빈 화면을 내놓으면 "없는 것"으로 읽힌다. 아래에 자리가 흐리게 깔리면 **아직 안 열린 것**으로 읽힌다.
   흐린 것은 가짜 뼈대다 — 진짜 문안·숫자는 서버가 내려보내지 않는다. */
.prep{padding:clamp(24px,5vw,56px) 0 0;text-align:center}
.prep .cintro-nm{margin-top:18px}
/* 타이핑 — 끝까지 쓴 글을 투명하게 깔아 자리를 잡고 그 위에 지금까지 친 글을 얹는다.
   글이 늘어나며 아래가 들썩이면 준비 중이 아니라 고장으로 보인다. */
/* 캠페인 이름 — 주관 기관의 얼굴로 적는다(헤더의 지역명·랜딩 티켓 이름과 같은 규칙).
   이름이 서는 자리면 어디든 같다: 준비 화면 제목·사업 소개 제목.
   qr에는 `--font` 토큰이 없다 — var()가 무효면 font-family 선언이 통째로 버려진다(실측으로 겪었다). */
.cintro-nm[data-region="gangwon"]{font-family:"GangwonState",'Pretendard Variable',Pretendard,sans-serif;
  font-weight:600;letter-spacing:-.03em}
.cintro-nm[data-region="hwaseong"]{font-family:"Paperlogy",'Pretendard Variable',Pretendard,sans-serif;font-weight:700}
.prep-type{position:relative}
.prep-type .ghosttext{visibility:hidden}
.prep-type .typed{position:absolute;inset:0;display:block}
.prep-line2{margin:18px 0 0;font-size:18px;font-weight:600;
  letter-spacing:-.03em;color:var(--blue-deep)}
/* 커서 — 치는 동안만. 다 치면 사라진다(계속 깜빡이면 입력칸으로 읽힌다) */
.car{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;
  background:var(--blue);animation:carblink .9s steps(1) infinite}
@keyframes carblink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.car{display:none}}
.prep .cintro-nav{justify-content:center;margin-top:36px}
/* 숫자 띠 — 사업 소개 낱장의 `.cintro-nav + .cintro-facts`와 같은 자(랜딩 히어로 아래 여백 128px).
   준비 화면에서는 이 띠 **한가운데부터 아래가 싹 다 흐리다**(사용자 지시).
   경계선은 긋지 않는다 — 선을 그으니 흐림이 시작되는 자리가 오히려 더 눈에 띄었다.
   흐림을 서서히 먹이면 「덜 그려진 화면」으로 읽힌다 — 여기서 할 말은 「여기부터는 안 보인다」라
   경계를 **딱 끊는다**. 한 요소에 반만 블러를 걸 방법이 없어 같은 띠를 두 겹으로 두고
   마스크를 50%에서 맞물린다: 또렷한 층은 위 절반, 흐린 층은 아래 절반. */
.prep .cintro-nav + .prep-cut{margin-top:clamp(72px,9vw,128px)}
.prep-cut{position:relative}
.prep-cut .cintro-facts{margin-top:0}
/* 자르는 자리는 「라벨 아래·값 위」다. 절반(50%)로 두면 칸 높이가 폭마다 달라 값이 반쯤 걸렸다(사용자 지적).
   라벨 줄의 바닥을 px로 못 박아 폭마다 다시 잡는다(--cut). 400 아래 세로 리스트는 라벨·값이 한 줄에 나란히
   서므로 위아래가 아니라 **왼쪽(라벨)·오른쪽(값)**으로 가른다. */
.prep-cut{--cut:50px}   /* 실측: 라벨 바닥 43 · 값 윗변 53 */
.cut-sharp{-webkit-mask-image:linear-gradient(to bottom,#000 var(--cut),transparent var(--cut));
  mask-image:linear-gradient(to bottom,#000 var(--cut),transparent var(--cut))}
.cut-blur{position:absolute;inset:0;filter:blur(7px);opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--cut),#000 var(--cut));
  mask-image:linear-gradient(to bottom,transparent var(--cut),#000 var(--cut))}
@media(max-width:760px){.prep-cut{--cut:46px}}
@media(max-width:560px){.prep-cut{--cut:42px}
  /* 기간 칸의 D-day 칩은 라벨 아래로 — 그래야 세 칸의 라벨이 한 줄에 서고 자르는 선이 라벨 밑을 정확히 지난다 */
  .prep-cut .per .dday-chip{order:1;margin:2px 0 0}.prep-cut .per dd{order:2}}
@media(max-width:400px){
  /* 실측 390: 라벨 오른끝 12~22% · 기간 값 시작 26% — 24%에서 가른다 */
  .cut-sharp{-webkit-mask-image:linear-gradient(to right,#000 24%,transparent 24%);mask-image:linear-gradient(to right,#000 24%,transparent 24%)}
  .cut-blur{-webkit-mask-image:linear-gradient(to right,transparent 24%,#000 24%);mask-image:linear-gradient(to right,transparent 24%,#000 24%)}
  .prep-cut .per .dday-chip{order:3;margin:0}}
/* 가로선 아래는 싹 다 흐리다 — 뼈대도, 마무리 절도. 푸터만 흐림 밖에 남는다. */
.prep-veil{filter:blur(7px);opacity:.5;pointer-events:none;user-select:none}
.prep-cut + .prep-skel{margin-top:clamp(20px,2.5vw,32px)}
@media(prefers-reduced-motion:reduce){.cut-blur{display:none}.cut-sharp{-webkit-mask-image:none;mask-image:none}}

/* 아래로 이어질 자리 — 흐린 뼈대. 아래로 갈수록 옅어져 "여기서 끊긴다"가 아니라 "이어진다"로 보인다 */
.prep-skel{margin-top:clamp(56px,8vw,88px);filter:blur(7px);opacity:.5;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.sk{border-radius:10px;background:linear-gradient(90deg,var(--g100) 0%,var(--g200) 50%,var(--g100) 100%);
  background-size:200% 100%;animation:skshine 2.2s linear infinite}
@keyframes skshine{from{background-position:200% 0}to{background-position:-200% 0}}
.sk-box{display:grid;grid-template-columns:repeat(4,1fr);width:min(880px,100%);margin:0 auto;
  padding:6px;border-radius:14px;background:var(--g100)}
.sk-cell{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px}
.sk-k{width:56px;height:12px}
.sk-v{width:78px;height:26px}
.sk-two{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,5vw,72px);margin-top:clamp(48px,7vw,88px);text-align:left}
.sk-col{display:grid;gap:12px;align-content:start}
.sk-eb{width:80px;height:12px}
.sk-h2{width:88%;height:26px}
.sk-h2.short{width:62%}
.sk-p{width:100%;height:14px;margin-top:8px}
.sk-p.short{width:74%;margin-top:0}
.sk-row2{width:100%;height:18px}
@media(max-width:760px){.sk-box{grid-template-columns:repeat(2,1fr)}.sk-two{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}



/* ── 발급 진척(.prog-steps) — **세로로 세운 로드맵**이다(사용자 지시) ──
   쿠폰 사용법은 손님이 한 번에 끝내는 일이라 가로(`.road`)이고, 코드 발급은 기다리는 일이라 세로다.
   **다른 것은 선의 방향뿐**이다 — 색(코랄 26%)도 굵기(2px)도 `.road`에서 그대로 가져온다.
   판(배경·테두리)과 「발급 진척 · 4단계」 머리는 뺐다. 선은 첫 칸 위에서 마지막 칸 아래까지
   내용이 서는 자리 그대로 흐른다. 원 안의 숫자는 남긴다 — 순서가 곧 뜻이라 번호가 필요하다. */
.prog-steps{position:relative;list-style:none;margin:32px 0 0;padding:0}
/* 선 — `.road::before`와 같은 색·같은 굵기. 가로가 세로가 됐을 뿐이다.
   목록 위에서 아래까지 한 줄로 흐른다(칸 사이에서 끊지 않는다). */
.prog-steps::before{content:"";position:absolute;left:13px;top:0;bottom:calc(-1 * var(--tail,0px));width:2px;
  background:rgba(240,86,58,.26);pointer-events:none}
/* 선은 4 아래에서 끊기지 않고 **참여자 포털 열기 쪽으로** 이어진다. 다만 버튼에 닿거나 넘어가면 안 된다(사용자 지시) —
   CTA 위 여백 32px 중 20px만 내려와 12px 틈을 남긴다. */
.cuse .prog-steps{--tail:10px}   /* CTA 위 20px 중 10px만 내려와 10px 틈 */
.prog-steps li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;
  gap:14px;align-items:start;padding:0 0 28px}
.prog-steps li:last-child{padding-bottom:0}
/* 점 — `.phase::before`와 같은 조형(코랄 링 + 배경색 고리로 선을 끊는다). 안에 번호가 앉는다 */
.prog-steps .no{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 4.5px var(--blue),0 0 0 5px #fff;   /* 링 굵기 — 참고 이미지의 1.5배(사용자 지시) */
  /* 숫자를 원 한가운데에 — 비례폭 숫자는 「1」이 오른쪽으로 쏠려 보인다. 고정폭 숫자·행간 1·글자 위 여백 0 */
  font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--blue-deep);padding:0}
.prog-steps .tx{min-width:0;display:grid;gap:4px}
.prog-steps b{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--g900)}
.prog-steps span.st{flex:none;font-size:12px;font-weight:700;color:var(--g500);white-space:nowrap;padding-top:6px}
.prog-steps .tx span{font-size:13.5px;line-height:21px;color:var(--g600)}
/* 대기 — 여기서 멈춰 선다는 것을 색이 아니라 **속이 빈 회색 링**으로 말한다(코랄은 발급에 쓴다) */
.prog-steps li.wait .no{box-shadow:inset 0 0 0 4.5px var(--g300),0 0 0 5px #fff;color:var(--g500)}
.prog-steps li.wait .st{color:var(--g700)}
/* 발급 — 끝점만 속을 채운다. 여기가 목적지다 */
.prog-steps li.done .no{background:var(--blue);box-shadow:0 0 0 5px #fff;color:#fff}
.prog-steps li.done .st{color:var(--blue-deep)}
.prog-box-fn{margin:20px 0 0;padding:0 0 0 42px;font-size:12.5px;line-height:20px;color:var(--g500)}
@media(max-width:560px){
  .prog-steps li{grid-template-columns:24px minmax(0,1fr);gap:12px;padding-bottom:24px}
  .prog-steps::before{left:11px}
  .prog-steps .no{width:24px;height:24px;font-size:12px}
  /* 좁은 폭에서는 상태말을 본문 아래로 내린다 — 세 열이 서면 글이 갈라진다 */
  .prog-steps span.st{grid-column:2;padding-top:0}
  .prog-box-fn{padding-left:36px}
}

/* ── 마무리(.finale) — 랜딩 site.css의 규칙을 글자 그대로 옮긴 것 ──
   플랫폼의 어느 페이지든 같은 절로 끝난다. 고스트 워드마크는 흰 글자 한 겹만 쓴다
   (랜딩의 스포트라이트는 이미 걷은 연출이라 여기서도 두지 않는다). */
.finale{position:relative;overflow:hidden;padding:clamp(88px,10vw,128px) 0 0;
  background:linear-gradient(158deg,#f9e7de 0%,#f1e6e6 34%,#e9e8ee 66%,#e2e5ec 100%)}
.finale .blob{position:absolute;pointer-events:none;border-radius:50%;filter:blur(70px);opacity:.5}
.finale .b1{width:46%;aspect-ratio:1;left:-8%;top:6%;background:radial-gradient(50% 50% at 50% 50%,rgba(240,86,58,.34),transparent 70%)}
.finale .b2{width:40%;aspect-ratio:1;right:-6%;top:-10%;background:radial-gradient(50% 50% at 50% 50%,rgba(148,160,205,.40),transparent 70%)}
.finale .in{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 24px}
.finale h2{margin:0 0 24px;font-size:clamp(28px,4.4vw,48px);font-weight:600;line-height:1.18;
  letter-spacing:-.04em;color:var(--g900)}
.finale .lead{margin:0 0 20px;font-size:17px;font-weight:400;line-height:28px;color:var(--g600)}   /* 본문→CTA 20 */
/* 버튼 — qr tokens의 `.btn`은 손님 화면용이라 `width:100%`다. 여기서 푼다(머리 CTA와 같은 처치) */
.finale .fin-cta{display:inline-flex;width:auto;height:52px;padding:0 32px;
  border-radius:var(--r-pill);background:var(--blue);color:#fff;font-size:17px;font-weight:600;text-decoration:none}
.finale .fin-cta:hover{background:var(--blue-hover)}
.ghostwrap{position:relative;margin-top:56px;padding-bottom:8px}
.ghost{margin:0;white-space:nowrap;display:block;color:rgba(255,255,255,.62);
  font-size:clamp(56px,12vw,190px);font-weight:700;letter-spacing:-.045em;line-height:1.06}
@media(max-width:620px){.finale .fin-cta{width:100%}}

/* ═══ KEY POINT(.chain) — 랜딩 site.css의 규칙을 글자 그대로 옮긴 것 ═══
   스크롤 채움 타이포(연한 글자에 한 글자씩 색이 든다)와 코랄 빛무리까지 같은 조형이다.
   왼쪽 정렬이라 가운데 정렬인 머리(.cintro)와 다른 컨테이너를 쓴다. */
.chain{padding:clamp(72px,9vw,120px) 0 0;position:relative;z-index:2;overflow:clip}
.chain .wrap{position:relative;z-index:1}
.chain .sec-head{text-align:center;max-width:820px;margin:0 auto 64px}
.chain .sec-head.left{text-align:left;max-width:none;margin-bottom:56px}
/* 아이브로우 — 섹션이 어디든 값은 하나다(랜딩과 같은 규칙, 특이도까지 같이 못박는다) */
.chain .note,.chain .note.note{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--blue);margin:0 0 16px}
.chain .sec-head h2{font-size:clamp(28px,4.4vw,48px);font-weight:600;line-height:1.18;letter-spacing:-.04em;
  color:var(--g900);overflow-wrap:anywhere;min-width:0;margin:0}
.chain-lead{position:relative;z-index:1;margin:28px 0 0;
  font-size:17px;font-weight:400;line-height:28px;color:var(--g600)}
.chain-lead b{font-weight:600;color:var(--g800)}
.chain-glow{position:absolute;left:50%;transform:translateX(-50%);width:100vw;
  top:26%;height:64%;z-index:0;pointer-events:none}
.chain-glow i{position:absolute;left:0;top:50%;width:26vw;aspect-ratio:1/.72;
  background:radial-gradient(50% 50% at 50% 50%,rgba(240,86,58,.29),rgba(240,86,58,.09) 46%,transparent 72%);
  filter:blur(46px);transform:translate(-14vw,-50%);
  animation:chainDrift 13s linear infinite;will-change:transform}
.chain-glow i.b2{width:18vw;aspect-ratio:1/.9;animation-duration:19s;animation-delay:-7s;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,166,110,.21),transparent 70%);filter:blur(58px)}
@keyframes chainDrift{
  0%   {transform:translate(-30vw,-50%);opacity:0}
  10%  {opacity:1}
  90%  {opacity:1}
  100% {transform:translate(104vw,-50%);opacity:0}
}
/* ── 스크롤 채움 타이포 — 연한 글자가 스크롤할수록 한 글자씩 색이 든다 ── */
.tw{color:var(--g300)}
.tw .ch{display:inline-block;white-space:pre;font:inherit;letter-spacing:inherit;
  color:var(--g300);transition:color .18s linear}
.tw .ch.lit{color:var(--g900)}
.tw.caret .ch.lit{color:var(--blue)}
.tw.caret .ch.cur{position:relative}
.tw.caret .ch.cur::after{content:"";position:absolute;right:-.16em;top:.02em;width:.075em;height:.96em;
  background:var(--blue);animation:caretBlink 1s steps(1) infinite}
.tw.caret.done .ch.cur::after{display:none}
@keyframes caretBlink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .chain-glow i{animation:none;transform:translate(38vw,-50%);opacity:.85}
  .tw .ch{color:var(--g900)}.tw.caret .ch{color:var(--blue)}.tw.caret .ch.cur::after{display:none}
}

/* 히어로 제목 글자 리빌 — 랜딩 히어로(.lines)의 조형·눈금을 그대로 옮긴 것(사용자 지시).
   줄 단위가 아니라 글자 하나씩 블러에서 선명해진다.
   `.ch`는 이 시트에 이미 다른 뜻(캡션 조각)으로 있어 `.lines` 아래로만 좁힌다. */
.lines span{display:block}
.lines i{display:block;font-style:normal}
.lines .ch{display:inline-block;white-space:pre;font:inherit;letter-spacing:inherit;color:inherit;
  transform:translateY(.18em);opacity:0;filter:blur(8px);
  transition:transform .9s cubic-bezier(.22,.61,.24,1),opacity .7s cubic-bezier(.3,.7,.3,1),filter .8s cubic-bezier(.3,.7,.3,1);
  transition-delay:calc(var(--i) * 42ms + 120ms)}
.lines.on .ch{transform:none;opacity:1;filter:blur(0)}
@media(prefers-reduced-motion:reduce){.lines .ch{transform:none;opacity:1;filter:none;transition:none}}

/* 주관·수행 로고 한 벌 — 캠페인 이름 바로 아래(사용자 지시).
   두 로고는 원본 비율이 달라(KPC 191×45 · JCG 886×330) 높이를 맞추면 JCG가 더 커 보인다.
   눈에 같은 무게로 앉도록 높이를 따로 잡는다. */
.orgs{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:12px}   /* 제목과 한 묶음으로 — 본문 안 간격(12)으로 붙인다(사용자 지시) */
.orgs img{display:block;width:auto}
.orgs .org-kpc{height:26px}
.orgs .org-jcg{height:17px}
.orgs .org-x{color:var(--g300);font-size:16px;font-weight:500;line-height:1}
@media (max-width:480px){
  .orgs{gap:13px;margin-top:10px}
  .orgs .org-kpc{height:20px}.orgs .org-jcg{height:13px}
}

/* ══════════════════════════════════════════════════════════════════
   랜딩 절 위에 얹는 **캠페인 전용** 규칙 — 바탕은 landing.css가 깐다(불러오는 순서: tokens → landing → board).
   여기엔 랜딩에 없는 것(KPI 표 · 고른 모델 · 배달특급 상세)과 캠페인 낱장이라 달라야 하는 것만 둔다.
   ══════════════════════════════════════════════════════════════════ */
/* 이식한 절은 **랜딩과 같이 화면 폭 끝까지** 선다. `.bd-in`(max 1140) 안에 가두면 KEY POINT의 빛무리가
   움직일 때 잘리고 가로 흐름의 카드가 끊긴다(사용자 지적) — 랜딩에는 바깥 컨테이너가 없어서 문제가 없었다.
   절을 컨테이너 밖으로 펴고, 안의 `.wrap`이 `.bd-in`과 **같은 자리**(내용 폭 1140 · 좌우 24)에 내용을 세운다. */
.bd .chain,.bd .compare,.bd .kpi,.bd .tiles,.bd .hscroll,.bd .lapp,.bd .roles{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.bd .wrap{max-width:1188px;margin:0 auto;padding:0 24px}
@media (max-width: 599px){.bd .wrap{padding:0 20px}}   /* `.bd`가 좁은 폭에서 20px로 줄 때 같이 줄어야 한 자리에 선다 */
/* 절 머리 제목 — 랜딩은 절마다 600을 따로 주는데(compare·tiles…) 캠페인 낱장의 절은 전부 같은 무게여야 한다.
   KPI만 기본값 800으로 서서 다른 절보다 굵게 보였다(사용자 지적). */
.bd .sec-head h2{font-weight:600}

/* ── KPI — 왼쫙 정렬 머리(사용자 지시: DIFFERENCE와 HOW IT WORKS 사이) ──
   01 핵심은 본문 문장에 녹였고, 02~05 넷만 **체크리스트**다(사용자 지시). 글자 크기는 다른 절의
   본문(15/24)과 같은 자다 — 여기만 커 보였다(사용자 지적). 체크는 CSS로 그린다 — 이모지 금지. */
.kpi{padding:var(--sec-y) 0}
.kpi .sec-head p b{font-weight:600;color:var(--g800)}
/* 부제는 다른 절 머리와 **같은 자**(.sec-head p 17px, 폰 눈금도 공통) — 한때 16/28로 따로 내렸는데 문장이 둘로 줄며 이유가 없어졌고,
   폰에서는 이 규칙이 공통 눈금을 이겨 오히려 더 커 보였다(사용자 지적) */
/* 체크리스트 = **쿠폰**(사용자 지시). 숫자 띠(.cintro-facts)와 같은 두 겹 조형 — 바깥 반투명 틀 + 안쪽 g100 판.
   넷이 **세로 목록**으로 선다 — [✓ 라벨 ……… 값(오른쪽)] 한 줄씩, 줄 사이는 가로 절취선, 양 옆 가장자리에 홈.
   전에는 PC에서 넷이 가로로 서고 좁아질 때만 세로가 됐는데, 사용자 지시로 **PC도 폰과 같은 이 배치**다. 판은 가운데에 선다. */
.kpi-list{--nr:9px;--r:14px;--gap:6px;list-style:none;position:relative;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:0;margin:0 auto;max-width:880px;padding:var(--gap);
  border-radius:var(--r);background:rgba(244,243,241,.5);box-shadow:inset 0 0 0 1px rgba(42,38,34,.12);
  -webkit-mask-image:
    radial-gradient(circle var(--nr) at 0 25%,transparent 97%,#000 100%),
    radial-gradient(circle var(--nr) at 0 50%,transparent 97%,#000 100%),
    radial-gradient(circle var(--nr) at 0 75%,transparent 97%,#000 100%),
    radial-gradient(circle var(--nr) at 100% 25%,transparent 97%,#000 100%),
    radial-gradient(circle var(--nr) at 100% 50%,transparent 97%,#000 100%),
    radial-gradient(circle var(--nr) at 100% 75%,transparent 97%,#000 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    radial-gradient(circle var(--nr) at 0 25%,transparent 97%,#000 100%),
    radial-gradient(circle var(--nr) at 0 50%,transparent 97%,#000 100%),
    radial-gradient(circle var(--nr) at 0 75%,transparent 97%,#000 100%),
    radial-gradient(circle var(--nr) at 100% 25%,transparent 97%,#000 100%),
    radial-gradient(circle var(--nr) at 100% 50%,transparent 97%,#000 100%),
    radial-gradient(circle var(--nr) at 100% 75%,transparent 97%,#000 100%);
          mask-composite:intersect}
.kpi-list::before{content:"";position:absolute;inset:var(--gap);z-index:0;border-radius:calc(var(--r) - var(--gap));background:var(--g100)}
.kpi-list li{position:relative;z-index:1;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;text-align:left;padding:14px 18px}
.kpi-list li > div{display:contents}
/* 가로 절취선 — 홈 안쪽에서 시작해 홈에 물리지 않는다(점선 5·5는 숫자 띠와 같은 눈금) */
.kpi-list li + li::before{content:"";position:absolute;left:calc(var(--nr) + 2px);right:calc(var(--nr) + 2px);top:-.5px;height:1px;
  background:repeating-linear-gradient(to right,rgba(42,38,34,.22) 0 5px,transparent 5px 10px)}
/* 체크 — 원도 외곽선도 없이 코랄 체크만 라벨 옆에(사용자 지시) */
.kpi-list .ck{position:relative;width:16px;height:16px;order:0}
.kpi-list .ck::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;
  border:solid var(--blue);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.kpi-list b{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--g500);flex:0 0 auto}
.kpi-list span.v{font-size:15px;line-height:22px;font-weight:600;color:var(--g900);text-align:right;text-wrap:balance}
@media(max-width:860px){.kpi-list span.v{font-size:14px}}

/* ── LOCAL APPLICATION — 어두운 판은 **랜딩 시트(`#models`)가 이미 그대로 그린다**(사용자가 준 사진이 그것이다).
   여기서는 「모델 03이 골라져 있다」만 더한다. 고른 상태 = 랜딩의 가리킨 상태(hover)와 **같은 색**이다
   (사용자 지시: 원본 선택된 상태로, 외곽선도 그 색으로): 표식 채움 #f7a68d · 외곽선 rgba(247,166,141,.34).
   랜딩 규칙이 ID 선택자(#models)라 여기서도 같은 무게로 쓴다 — 클래스만으로는 못 이긴다(실측: 표식이 안 찼다). */
.lapp{padding:var(--sec-y) 0}
/* 여기서는 고르는 자리가 아니다 — 이미 골라져 있다. 가리켜도 아무것도 변하지 않는다(사용자 지시) */
#models .model:hover{transform:none;background:rgba(255,255,255,.06);box-shadow:none}
#models .model:hover::after{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26)}
/* 「골라져 있다」는 `aria-current`로 말한다 — `.on`은 리빌 스크립트가 **모든 .rv에** 붙이는 이름이라
   그걸 쓰면 화면에 들어온 카드 넷이 전부 골라진 것처럼 찼다(390 실측). 상태는 의미 속성에, 리빌은 클래스에. */
#models .model[aria-current="true"],#models .model[aria-current="true"]:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(247,166,141,.34)}
#models .model[aria-current="true"]::after,#models .model[aria-current="true"]:hover::after{box-shadow:inset 0 0 0 1.5px #f7a68d,inset 0 0 0 7px #f7a68d}
/* 고른 카드에서 내려오는 가는 주황 선 — 카드 아래 가운데(`--pick`번째 칸)에서 상세 판 윗변까지.
   칸 폭은 (100% - 간격×3)/4 이므로 가운데는 (pick - .5)×칸폭 + (pick - 1)×간격 */
.pick-line{--gap:16px;position:relative;height:clamp(40px,5vw,64px);margin:0}
.pick-line::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(247,166,141,.6);
  left:calc((var(--pick) - .5) * (100% - var(--gap) * 3) / 4 + (var(--pick) - 1) * var(--gap))}
.pick-line::after{content:"";position:absolute;top:-6px;width:9px;height:9px;border-radius:50%;background:#f7a68d;
  left:calc((var(--pick) - .5) * (100% - var(--gap) * 3) / 4 + (var(--pick) - 1) * var(--gap) - 4px)}
/* 상세 판 — 선이 닿는 곳. 위 카드와 같은 재질에 코랄 테두리 */
.pick{position:relative;padding:clamp(28px,3.5vw,44px);border-radius:var(--r-card);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(247,166,141,.34)}   /* 고른 카드와 같은 외곽선(사용자 지시) */
.pick-hd .k{margin:0;font-size:13px;font-weight:700;letter-spacing:.02em;color:#f7a68d}
.pick-hd h3{margin:8px 0 0;font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:-.03em;color:#fff}   /* 판 제목 — 절 제목보다 낮고 카드 제목보다 한 단 위 */
.pick-desc{margin:14px 0 0;font-size:15px;line-height:26px;color:rgba(255,255,255,.66);max-width:44em}
.pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(28px,3vw,40px)}
.pick-gk{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.5)}
.pick-rows{margin:0}
.pick-rows div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.1)}
.pick-rows div:last-child{border-bottom:0}
.pick-rows dt{margin:0;font-size:14px;font-weight:600;color:#f7a68d}
.pick-rows dd{margin:0;font-size:14px;line-height:22px;color:rgba(255,255,255,.82)}
.pick-note{margin:clamp(20px,2.5vw,28px) 0 0;padding-top:16px;font-size:13px;line-height:20px;color:rgba(255,255,255,.45);
  border-top:1px solid rgba(255,255,255,.1)}
/* 랜딩 `#models .models`가 1100에서 두 줄이 된다 — 선의 자리도 같은 문턱에서 옮긴다 */
@media(max-width:1100px){
  /* 두 줄이 되면 모델 03은 둘째 줄 첫 칸 — 선의 자리도 따라간다 */
  .pick-line::before,.pick-line::after{left:calc((100% - 16px) / 4)}
  .pick-line::after{margin-left:-4px}}
/* 폰에서는 모델 넷을 2×2로(사용자 지시) — 한 줄로 세우면 선이 04 아래에서 내려와 어색했다.
   모델 03은 둘째 줄 첫 칸이라 선은 첫 칸 가운데((100% - 간격)/4)에서 내려온다. 카드가 좁아지니 안 여백·글자를 한 단 줄인다. */
@media(max-width:620px){
  #models .models{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #models .model{padding:16px 14px}
  #models .model p{font-size:13px;line-height:20px}
  #models .model .opt{margin-top:12px;padding-top:12px;font-size:12px}
  #models .model::after{right:14px;top:16px}   /* 원은 PC와 같은 20px — 16으로 줄이면 안쪽 검정 원이 2px 점이 됐다(사용자 지적: 살구 원 안 검정 원 크기 PC와 통일) */
  .pick-line{--gap:10px}
  .pick-line::before,.pick-line::after{left:calc((100% - var(--gap)) / 4)}
  .pick-line::after{margin-left:-4px}
  .pick-grid{grid-template-columns:minmax(0,1fr)}
  .pick-rows div{grid-template-columns:72px minmax(0,1fr)}}

/* ── PLATFORM VISION — 랜딩 `.roles`는 g50 바탕인데, 어두운 판 바로 다음이라 흰 바탕으로 둔다 ── */
.bd .roles{background:transparent}

/* ── ABOUT DURE — 사업 소개 낱장의 **마지막** 절(사용자 지시). 원래 블록 그대로(왼쪽 머리에 작은 마을 그림),
   아래에 크게 깔던 그림은 뺐다(사용자 지시). 마무리 절 없이 푸터로 이어지므로 `.bd`의 바닥 여백은 그대로 둔다. ── */

/* 헤더 짧은 이름 — 랜딩 시트는 좁은 폭에서 `::after`로 짧은 이름(data-short)을 덧그리고 원래 글자를 지운다.
   캠페인 헤더(.pg)는 자기 규칙으로 글자를 그대로 두므로 둘이 겹쳐 「사업 소개사업」으로 읽혔다(390px 실측).
   캠페인 헤더는 항목이 셋뿐이라 줄일 것이 없다 — 덧그림만 끈다. */
.hd .pg a::after{content:none}

/* ── 모바일 리듬(사용자 지시: PC는 그대로, 모바일만 친화적으로) ──
   랜딩은 860 아래에서 절 위아래 여백을 76px로 두는데, 폰에서는 절과 절 사이가 152px로 벌어져 빈 화면처럼 스크롤된다.
   캠페인 낱장은 599 아래에서 56px(사이 112px)로 조인다. 랜딩 자체는 건드리지 않는다(이 시트는 캠페인 낱장만 든다). */
@media(max-width:599px){
  :root{--sec-y:56px}
  /* 가로 흐름 절의 머리만 랜딩 여백(24)을 들고 있어 다른 절(20)보다 4px 안으로 들어갔다 */
  .bd .hscroll .head{padding-left:20px;padding-right:20px}
}

/* ── 모바일 대조표(사용자 지시): 왼쪽에 기준, 오른쓱에 「V 본문」 그 밑에 「X 본문」 한 줄씩 ──
   PC의 3열 격자를 폰에서는 [기준 | 답 두 줄]로 다시 짠다. 행 번호는 마크업의 --r(2~6)이 그대로 주므로
   행마다 자리를 못 박는다 — 기준은 두 줄을 걸치고, AI Dure(V)가 위, 기존(X)이 아래다. */
@media(max-width:599px){
  .bd .cmp{grid-template-columns:76px minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;column-gap:12px;margin-top:32px}
  .bd .c-h,.bd .c-panel{display:none}
  .bd .c-k{grid-column:1;justify-content:flex-start;align-items:center;padding:14px 0}
  .bd .c-k span{text-align:left}
  .bd .c-now{grid-column:2;padding:14px 0 4px}
  .bd .c-was{grid-column:2;padding:0 0 14px}
  .bd .c-k[style*="--r:2"]{grid-row:1 / span 2}
  .bd .c-now[style*="--r:2"]{grid-row:1}
  .bd .c-was[style*="--r:2"]{grid-row:2}
  .bd .c-k[style*="--r:3"]{grid-row:3 / span 2}
  .bd .c-now[style*="--r:3"]{grid-row:3}
  .bd .c-was[style*="--r:3"]{grid-row:4}
  .bd .c-k[style*="--r:4"]{grid-row:5 / span 2}
  .bd .c-now[style*="--r:4"]{grid-row:5}
  .bd .c-was[style*="--r:4"]{grid-row:6}
  .bd .c-k[style*="--r:5"]{grid-row:7 / span 2}
  .bd .c-now[style*="--r:5"]{grid-row:7}
  .bd .c-was[style*="--r:5"]{grid-row:8}
  .bd .c-k[style*="--r:6"]{grid-row:9 / span 2}
  .bd .c-now[style*="--r:6"]{grid-row:9}
  .bd .c-was[style*="--r:6"]{grid-row:10}
  /* 구분선은 묶음 위에 한 줄 — 기준 칸과 V 줄이 같은 높이에서 시작하니 둘의 ::before가 한 선으로 이어진다 */
  .bd .c-was::before{display:none}
  .bd .c-k::before,.bd .c-now::before{content:"";left:0;right:0;background:var(--g200)}
  .bd .c-k[style*="--r:2"]::before,.bd .c-now[style*="--r:2"]::before{display:none}
  .bd .c-was p,.bd .c-now p{font-size:14px;line-height:22px}
  /* 머리글(기존 홍보 사업 / AI Dure)을 숨겼으니 줄마다 누구 말인지 적는다(사용자 지시): V 앞에 「두레」, X 앞에 「기존 홍보」 */
  .bd .c-now p::before{content:"두레 ";font-weight:700;color:var(--blue-deep)}
  .bd .c-was p::before{content:"기존 홍보 ";font-weight:600;color:var(--g500)}
}

/* ── 모바일 가로 흐름(사용자 지시): 카드가 잘리기 시작하는 900 아래부터 곧장 이 배치다 — 옆으로 미는 줄(스냅 스크롤)은 쓰지 않는다.
   01~04 · 05~08 두 줄을 **가로로** 세우고, 왼쪽 끝(01↔05)에 「<」,
   오른쪽 끝(04↔08)에 「>」를 놓아 여덟 걸음이 한 바퀴 도는 것을 보인다. 카드는 좁아지므로 안 여백을 줄이고
   글자는 두 줄 안에 들어오게 이름을 짧게 썼다. 미는 줄(스냅 스크롤)은 쓰지 않는다 — 방향이 둘이면 손이 헷갈린다. */
@media(max-width:900px){
  .bd .hscroll{padding:var(--sec-y) 0}
  .bd .hscroll .head{margin-bottom:24px}
  .bd .hscroll .track{position:relative;gap:14px;padding:0 20px}
  .bd .hscroll .trow,.bd .hscroll .trow.rev{display:flex;flex-direction:row;gap:6px;padding:0 14px;overflow:visible;
    scroll-snap-type:none;transform:none !important;justify-content:stretch}
  .bd .hscroll .cv,.bd .hscroll .turn{display:none}
  .bd .hcard{flex:1 1 0;min-width:0;width:auto;height:auto;min-height:0;--gap:4px;--nr:7px;--cy:34px;padding:var(--gap);border-radius:12px;scroll-snap-align:none}
  .bd .hcard .vis{--cy:30px;min-height:0 !important;border-radius:9px;padding:0 0 8px;text-align:center}
  .bd .hcard .vis::after{left:calc(var(--nr) + var(--nx));right:calc(var(--nr) + var(--nx))}
  .bd .hcard .k{height:30px;padding:0 4px;font-size:10px;line-height:1.25;letter-spacing:-.01em}
  .bd .hcard .k br{display:none}
  .bd .hcard h3{padding:8px 4px 0;font-size:11.5px;line-height:1.35;letter-spacing:-.02em;text-align:center;justify-content:flex-start}
  /* 순환 셰브론 — 두 줄의 한가운데 높이, 판 양 끝. 랜딩 갈매기(--chev)와 같은 그림이다 */
  .bd .hscroll .track::before,.bd .hscroll .track::after{content:"";position:absolute;top:50%;width:10px;height:16px;
    transform:translateY(-50%);background:var(--blue);
    -webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
  .bd .hscroll .track::before{left:22px;transform:translateY(-50%) rotate(-90deg)}   /* 08 → 01: 위로(↑) — 옆으로 넘기는 표시로 읽히지 않게(사용자 지시) */
  .bd .hscroll .track::after{right:22px;transform:translateY(-50%) rotate(90deg)}       /* 04 → 05: 아래로(↓) */
}


/* ── 모바일 상자 안 여백(사용자 지시: 폰에서는 컴팩트하게). PC 값은 그대로다. ── */
@media(max-width:599px){
  #models .model{padding:20px 18px}
  #models .model::after{right:18px;top:20px}
  .pick{padding:20px 18px}
  .pick-grid{gap:18px;margin-top:20px}
  .pick-rows div{padding:9px 0;gap:10px}
  .tile.data{padding:18px}
  .cintro-facts div{padding:12px 16px}
  .kpi-list li{padding:14px 16px}
  .phase{padding-top:30px}
  .prog-steps li{padding-bottom:20px}
  .lapp .sec-head,.kpi .sec-head,.compare .sec-head,.tiles .sec-head,.roles .sec-head{margin-bottom:32px}
  .chain .sec-head.left{margin-bottom:28px}
}

/* 세로 로드맵(≤860)에서 선(::after)이 점(::before) 위로 지나갔다 — 같은 요소의 두 가상 요소는 ::after가
   나중에 그려져 위에 온다. 점을 한 층 올려 선이 점 뒤로 숨게 한다(점의 흰 고리가 선을 끊는 자리). */
@media(max-width:860px){.phase::before{z-index:1}.phase::after{z-index:0}}

/* 본문 문단은 폰에서 `text-wrap:balance`를 끈다 — 랜딩은 머리 문단을 균형 줄바꿈으로 두는데, 좁은 폭에서 문장이
   길어지면 줄마다 오른쓱을 비워 최댓값이 걸린 것처럼 보였다(사용자 지적). 제목은 균형을 그대로 둔다. */
@media(max-width:599px){
  .bd .sec-head p:not(.note),.bd .chain-lead,.bd .hscroll .head .lead,.bd .cintro-p,.bd .pick-desc,.bd .dure-p,
  .bd .phase p,.bd .kpi .sec-head p{text-wrap:pretty;max-width:none}
}

/* ── 모바일 타일·판 — 쿠폰과 같은 자(사용자 지시: 작아졌으니 라운드·여백을 쿠폰들처럼) ──
   숫자 띠·KPI·흐름 티켓이 라운드 14, 안 여백 14~18로 섰다. 다른 상자도 폰에서는 같은 자를 쓴다. */
@media(max-width:599px){
  .bd .tile{border-radius:14px}
  .bd .cols,.bd .col{gap:10px}
  .bd .tile.data{padding:16px 18px;gap:4px;min-height:0}
  .bd .tile.data .tk{font-size:12.5px}
  .bd .tile.data .tv{font-size:26px}
  .bd .tile .ghostcap{font-size:22px}
  #models .model,.pick,.bd .kpi-lead,.bd .biz-lead{border-radius:14px}
  .bd .lbfind-in{border-radius:14px}
}

/* ── 페이지 바닥 그림(.page-vis) — 사업 소개 낱장의 마지막. 폭 1080, 그린 부분(캔버스 y251~)부터 담고
   아래를 잘라 푸터에 바로 붙인다. 이 낱장은 마무리 절이 없으므로 `.bd`의 바닥 여백도 0(main.bd.nofin). ── */
.page-vis{position:relative;margin:clamp(40px,5vw,72px) auto 0;line-height:0}
/* 캔버스(1672×941)의 위 251행은 비어 있다 — 그림 자기 높이의 26.7%(251/941)만큼 끌어올린다.
   상자 높이는 폭의 28%(aspect-ratio)라 y251~y720만 보이고 아래는 잘린다. (%높이·top은 부모 높이를 봐서 608px로 부풀었었다) */
.page-vis img{display:block;width:100%;height:auto;transform:translateY(-26.7%)}
.bd.nofin{padding-bottom:0}
@media(max-width:599px){.page-vis{margin-top:32px}}

/* ── HOW IT WORKS 폰 배치(사용자 지시): QR 타일 → [접속부터 직원 확인까지 | 방문 기록 집계] → 데이터가 성과로(전폭)
   → [새로 설치할 장비 | 지원사업 매칭]. 두 열(.col)에 갈라 담긴 타일을 한 격자의 형제로 풀어(display:contents) 순서를 새로 준다. */
@media(max-width:599px){
  .tiles .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tiles .col{display:contents}
  .tile.qrtile{order:1;grid-column:1 / -1}
  .tile.t-mint{order:2}                 /* 접속부터 직원 확인까지 · 30초 */
  .tile.t-lilac{order:3}                /* 방문 기록 집계 · 100% */
  .tile.flowtile{order:4;grid-column:1 / -1}   /* 데이터가 성과로 */
  .tile.t-sky{order:5}                  /* 새로 설치할 장비 · 0건 */
  .tile.t-sand{order:6}                 /* 지원사업 매칭 */
  .tile.data{padding:16px 14px}
  .tile.data .tk{font-size:12px;line-height:1.35}
  .tile.data .tv{font-size:24px}
  .tile.t-sand .tv,.bd .tile.t-sand .tv{font-size:18px;line-height:1.3}   /* 글 값은 숫자 값(24)보다 한 단 작게 — 그림 캡션(18)과 같은 자 */
}

/* 그림 타일의 폰 여백·글자 — 그림 안 캡션(QR 찍고 30초 · 데이터가 성과로)은 「기본정보로 자동 안내」와 같은 18px,
   그림 타일의 안 여백도 다른 타일과 같은 16/14로(사용자 지시). 데스크톱 값(32·40·24)은 그대로다. */
@media(max-width:599px){
  .tile.flowtile{padding:16px 14px calc(16px + 24px + 12px)}
  .tile.flowtile .chart{padding:12px;border-radius:12px}
  .tile .ghostcap,.tile.flowtile .ghostcap,.tile.qrtile .ghostcap{font-size:18px;line-height:1.3;letter-spacing:-.02em;padding:0 14px}
  .tile.flowtile .ghostcap{bottom:14px}
  .tile.qrtile .ghostcap{top:14px}
}

/* 세로 로드맵(≤860) — 코드 발급 진척과 **같은 배치**(사용자 지시): 점은 왼쪽 열에, 글은 점 오른쪽에 나란히.
   점을 위에 두고 글을 아래에 깔면 점·선이 글과 따로 놀았다. 링은 진척 점과 같은 28px·4.5px. */
@media(max-width:860px){
  .road{gap:28px}
  .phase{padding:0 0 0 36px}
  .phase::before{top:-2px;left:0;width:22px;height:22px;background:#fff;box-shadow:inset 0 0 0 3.5px var(--blue),0 0 0 5px #fff}   /* 옆 아이브로우(12.5px) 줄에 맞춘 크기(사용자 지시) */
  .phase::after{left:10px;top:22px;bottom:-30px;width:2px}
  .phase .k{margin-top:4px}
  /* 아이브로우는 지금 간격 그대로, 제목·설명은 코드 발급 목록처럼 붙인다(사용자 지시) */
  .phase h3{margin-top:4px}
  .phase p{margin-top:4px;max-width:none}
}

/* ── 낱장 머리(진행 현황·쿠폰)의 세로 자 — 아이브로우→제목 24 · 제목→기준 줄 24 · 기준 줄→띠 40.
   32/24/48로 제각각이던 것을 한 걸음(24)으로 맞춘다(사용자 지적). 첫 화면 히어로(32)는 랜딩 히어로 자라 그대로 둔다. */
/* 자는 모델 카드(모델 03 · 제목 · 설명)의 것을 따른다(사용자 지시: 이 간격·자간처럼) — 아이브로우→제목 16, 제목→줄 12, 자간 조임 */
.cintro:not(#about) .cintro-k,.cuse .cintro-k{margin-bottom:16px}
.cintro:not(#about) .cintro-nm{letter-spacing:-.035em}
.cintro-p.meta{margin-top:12px;letter-spacing:-.01em}
.cuse-lead{margin-top:12px}
.cintro-p.meta + .cintro-facts{margin-top:40px}

/* 모델 03 상세 판의 세로 자 — 모델 카드와 같은 걸음(사용자 지시): 표식→제목 8 · 제목→설명 12 · 설명→묶음 24 · 묶음 이름→행 4 */
.pick-hd h3{margin-top:8px}
.pick-desc{margin-top:12px}
.pick-grid{margin-top:24px}
.pick-gk{margin-bottom:4px}
.pick-rows div{padding:10px 0}
.pick-note{margin-top:20px;padding-top:14px}

/* ═══ 목록·단계형 컴포넌트의 글자 자(≤860) — 한 벌(사용자 지시: 코드 발급처럼 전부 같은 자로).
   표식 12.5/700 · 제목 15/700/24 · 본문 14/400/22. 로드맵·진척·KPI 티켓·상세 행·모델 카드·스토리 카드·대조표 줄에 같이 건다.
   PC는 각자 자(랜딩 정본)를 둔다. ═══ */
@media(max-width:860px){
  .phase .k,.hcard .k,.prog-steps .st,.model .k,.cap,.vh,.pick-gk,.kpi-list b{font-size:12.5px}   /* `.pick-hd .k`는 절 아이브로우라 13 한 벌(뺐다) */
  /* 목록 행의 제목(로드맵·진척)은 15, 카드의 제목(모델·역할·스토리 카드·혼자/함께 판)은 한 단 위 16 — 카드는 본문 덩이가 커서 15면 본문(14)과 붙어 보인다 */
  .phase h3,.prog-steps b{font-size:15px;line-height:24px;font-weight:700;letter-spacing:-.02em}
  .grid .card h3,.vcol h3,.model h3,.role h3{font-size:16px;line-height:24px;font-weight:700;letter-spacing:-.02em}
  .phase p:not(.k),.grid .card p,.vcol li,.pick-rows dt,.pick-rows dd,.kpi-list span.v,.model p,.prog-steps .tx span,.pick-desc,.c-was p,.c-now p{font-size:14px;line-height:22px}
  .model .opt,.pick-note{font-size:12.5px;line-height:20px}
  /* 로드맵 점은 아이브로우 줄(24) 한가운데에 */
  .phase::before{top:5px}
  .phase::after{top:29px}
}

/* 그림 타일 캡션(QR 찍고 30초 · 데이터가 성과로) — 폰에서는 워터마크(투명 글자)가 너무 작고 안 보였다(사용자 지적).
   폰에서만 **읽히는 캡션**으로 바꾼다: 20px/700, 잉크색, 그림자 없음. PC의 워터마크 연출은 그대로. */
@media(max-width:599px){
  .tile .ghostcap,.tile.flowtile .ghostcap,.tile.qrtile .ghostcap{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.025em;
    color:var(--g800);text-shadow:none;opacity:1;white-space:normal;padding:0 14px}
  .tile.qrtile .ghostcap{top:14px;left:0;right:0}
  .tile.flowtile .ghostcap{bottom:14px;left:0;right:0;text-align:left}
  .tile.flowtile{padding-bottom:calc(16px + 26px + 14px)}
}

@media(max-width:860px){.pick-hd h3{font-size:17px;line-height:1.4}}   /* 폰: 카드 제목(15) 바로 위 단(사용자 지적: 커 보임) */


/* 캠페인 헤더(≤760) — 로고+지역명 묶음이 줄어들며 내비와 겹쳤다(실측: 묶음 폭 31px). 묶음은 줄지 않게, 내비는 오른쪽으로 붙인다 */
@media(max-width:760px){
  .hd-where{flex:0 0 auto;white-space:nowrap}
  .hd .pg{position:static;transform:none;margin:0 8px 0 auto;gap:2px}
  .hd .pg a{padding:0 6px}
}

/* 캠페인 내비도 폰에서는 짧은 이름으로(사업·현황·쿠폰) — 긴 이름이면 「플랫폼 소개」 알약이 오른쪽으로 넘쳤다(실측 418>390).
   앞서 겹침을 막으려고 끈 덧그림을 다시 켜되, 이번엔 원래 글자를 0으로 접는다(랜딩과 같은 방식). */
@media(max-width:760px){
  .hd .pg a{font-size:0}
  .hd .pg a::after{content:attr(data-short);font-size:14px}
}

/* KEY POINT 제목(.tw)은 글자마다 span으로 쪼개져 어절 단위 줄바꿈(keep-all)이 먹지 않는다 — 390에서 「입증합 / 니다」로
   갈렸다(실측). 폰에서는 한 줄에 들어오는 크기(22px)로 내린다. */
@media(max-width:599px){.chain .sec-head h2{line-height:1.3}}   /* 크기는 절 제목 한 벌(28) */

/* 태블릿 폭(600~900)의 흐름 티켓 — 카드가 폰보다 두 배 넓으니 글자도 한 단 키운다 */
@media(min-width:600px) and (max-width:900px){
  .hscroll .track{padding:0 24px}
  .hcard .k{font-size:12px;height:34px}
  .hcard h3{font-size:14px;line-height:1.4;padding:10px 8px 2px}
  .hcard .vis{padding-bottom:12px}
}

/* 폰에서는 플랫폼 헤더와 똑같이 **로그인 알약 하나만** 남긴다(사용자 지시) — 「플랫폼 소개」는 랜딩 시트의 폰 규칙대로 숨고, 그 길은 로고가 잇는다 */

/* ═══ 폰 CTA 규칙(사용자 지시): **둘이면 가로 한 줄**, **하나면 가로로 채우지 않는다** — 랜딩 시트와 같은 규칙. ═══
   머리·마무리·ABOUT DURE의 .cintro-nav(둘), 캠페인 카드 .camp-cta(둘), 쿠폰 .cuse-cta·마무리 .fin-cta(하나). */
@media(max-width:599px){
  .cintro-nav{gap:12px;flex-wrap:nowrap}
  .cintro-nav .btn{flex:1 1 0;min-width:0;padding:0 14px;font-size:15px;justify-content:center;white-space:nowrap}
  .cintro-nav .btn:only-child{flex:0 0 auto;padding:0 32px;font-size:17px}
  .cuse-cta .btn{width:auto}
}
@media(max-width:560px){
  .camp-cta .btn{flex:1 1 0;min-width:0;padding:0 12px;font-size:15px;white-space:nowrap}
  .camp-cta .btn:only-child{flex:0 0 auto;padding:0 24px}
}
@media(max-width:620px){.finale .fin-cta{width:auto}}

.tw .w{white-space:nowrap}   /* 스크롤 채움 제목은 글자로 쪼개지므로 어절 묶음이 줄바꿈을 막는다(site.js twInit) */