/* AI Dure 목업 공용 스타일 — 소개 페이지가 기준 */

/* ═══ 글자 자 한 벌(사용자 확정 2026-09-18) — 이 표가 정본이다. 새 규칙을 더하기 전에 여기부터 본다.
     아이브로우 13/13 · 절 제목 48/28 · 낱장 머리 제목 64/32 · 하단문구 18/18(히어로만 20/16) · 본문 16/16 · 카드·목록 안 글 15/14
   (PC/모바일. 낱장 머리 = 진행 현황·쿠폰·준비 화면의 페이지 머리) ═══ */
:root{
  /* 저채도 중성 그레이 — 온기는 남기고 칙칙함은 뺀다 */
  --g50:#fbfaf9;--g100:#f4f3f1;--g200:#e8e6e3;--g300:#d6d3cf;--g400:#b4afaa;
  --g500:#918b85;--g600:#726c66;--g700:#56514c;--g800:#3a3632;--g900:#201d1a;
  /* 액센트 — 밝은 코랄 */
  --blue:#f0563a;--blue-hover:#d9401f;--blue-weak:#ffede7;--blue-deep:#cf4522;
  --ok:#5f9e3f;--ok-weak:#eff7e9;
  --r-s:8px;--r-m:12px;--r-card:20px;--r-pill:999px;
  --sh-s:0 0 4px 0 rgba(42,38,34,.05),0 4px 16px 0 rgba(42,38,34,.06);
  --sh-m:0 8px 16px 0 rgba(42,38,34,.10),0 4px 8px 0 rgba(42,38,34,.06);
  --sh-l:0 24px 40px 0 rgba(42,38,34,.03),0 16px 24px 0 rgba(42,38,34,.10),0 0 8px 0 rgba(42,38,34,.05);
  --font:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.25,1,.5,1);
  --hd:64px;
  /* 섹션 세로 리듬 — 한 값으로 둔다. 섹션마다 다른 값을 주면 스크롤 호흡이 흔들린다 */
  --sec-y:120px;
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{font-family:var(--font);color:var(--g800);background:#fff;font-size:16px;line-height:1.6;
     word-break:keep-all;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}figure{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;font-style:normal}
/* 문장 경계에서만 줄을 나눈다. 좁은 화면에서는 자동 흐름에 맡긴다 */
br.brk{display:none}
@media(min-width:900px){br.brk{display:inline}}
p{text-wrap:pretty}

/* 클라이언트 내비게이션으로 다시 그린 화면은 진입 연출을 건너뛴다.
   site.js가 다시 붙기까지의 몇 프레임 동안 제목과 티켓이 비어 보였다.
   스크롤 리빌(.rv)은 건드리지 않는다 — 그건 관측이 곧바로 켠다. */
html.spa .lines .ch{opacity:1;transform:none;filter:none}
html.spa .camps .camp-card{opacity:1;animation:none}
html.spa .hero .cta-row.rv{transition-delay:0s}
html.spa .hero .sub.rv{transition-delay:0s}
html.spa .street{animation:none}
html.spa .hero .rv{transition-delay:0s}

/* ═══ 스크롤 리빌 ═══ */
.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}}

/* 히어로 등장 차례 — 큰 제목(글자 21개 x 42ms + 0.9s ≈ 1.8s)이 먼저 다 뜨고,
   그 다음 작은 제목 · 티켓 · 골목 그림이 차례로 온다. 한꺼번에 뜨면 무엇을 먼저 읽을지가 없다. */
.hero .sub.rv{transition-delay:.95s}
.hero .cta-row.rv{transition-delay:1.15s}

/* 티켓은 통이 아니라 **한 장씩** 들어온다. 둘이 한 덩어리로 움직이면 움직인 줄 모른다.
   transform이 아니라 translate 속성을 쓰는 이유 — 카드 호버(transform:translateY(-3px))와
   같은 속성을 두고 다투면 애니메이션이 끝난 뒤 호버가 먹히지 않는다. 둘은 따로 합성된다. */
@keyframes card-in{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
.camps.rv{opacity:1;transform:none;transition:none}
.camps .camp-card{opacity:0}
.camps.on .camp-card{animation:card-in .9s var(--ease) both}
.camps.on .camp-card:nth-child(1){animation-delay:.05s}
.camps.on .camp-card:nth-child(2){animation-delay:.21s}
@media(prefers-reduced-motion:reduce){
  .camps .camp-card{opacity:1;animation:none}
}

/* ═══ 좌측 섹션 레일 — 스크롤 위치와 이동 ═══ */
/* 본문과 겹치는 자리 — 이름이 길어지면 글자 위에 글자가 올라간다.
   판을 네모로 깔면 그 네모가 먼저 보인다. 가장자리를 마스크로 풀어
   **테두리 없는 블러 무리**로 둔다 — 글자는 읽히고 판은 보이지 않는다. */

/* ═══ 히어로 ═══ */
.hero{position:relative;padding:calc(var(--hd) + 96px) 0 128px;overflow:visible;
  background:linear-gradient(180deg,var(--g50) 0%,var(--g50) 42%,#fdfcfb 74%,#fff 100%)}
.hero-top{max-width:1060px;margin:0 auto;padding:0 24px;text-align:center;position:relative;z-index:2}
.eyebrow{font-size:13.5px;font-weight:600;letter-spacing:.115em;color:var(--blue);margin:0 0 24px}
.hero h1{font-size:clamp(36px,6.2vw,74px);font-weight:700;line-height:1.16;
         letter-spacing:-.035em;overflow-wrap:anywhere;min-width:0}
.hero h1{color:var(--g900)}
/* 두 줄의 무게를 한 단 벌린다 — 첫 줄은 SemiBold(600), 둘째 줄은 통째로 Bold(700).
   말의 무게가 「무엇을」에서 「무엇으로」로 넘어가는 자리다 */
.hero h1{font-weight:600}
.hero h1 .hv,.hero h1 b{font-weight:700}
/* 히어로 글자 리빌 — 줄이 아니라 글자 하나씩 블러에서 선명해진다 */
.lines span{display:block}
.lines i{display:block;font-style:normal}
.lines .ch{display:inline-block;white-space:pre;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)}
.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}}
/* 히어로 세로 간격 — 자리마다 다른 값이다(리아 지정 2026-09-16) */
.hero .eyebrow{margin-bottom:32px}
.hero .sub{font-size:clamp(16px,1.9vw,20px);font-weight:400;color:var(--g600);margin:24px 0 0}
.cta-row{display:flex;gap:16px;margin:clamp(24px,2.9vh,32px) 0 0;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;height:52px;padding:0 32px;border-radius:var(--r-pill);
     font-size:17px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .18s var(--ease)}
.btn-1{background:var(--blue);color:#fff}.btn-1:hover{background:var(--blue-hover)}
.btn-2{background:var(--g100);color:var(--g800)}.btn-2:hover{background:var(--g200)}

/* ═══ 홍보비 → 방문 → 기록 ═══ */
.chain{padding:var(--sec-y) 0;background:transparent;position:relative;z-index:2;overflow:clip}
.sec-head{text-align:center;max-width:820px;margin:0 auto 64px}
/* 아이브로우 — 섹션이 어디든 값은 하나다.
   섹션마다 있는 문단 규칙(`.sec-head p`·`.copy p`·`.camp-copy p` 등)이 특이도로 이걸 덮어
   17px 회색으로 나오던 자리가 있었다. 클래스를 두 번 적어 특이도를 올려 못박는다. */
.note,.note.note{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--blue);margin:0 0 16px}
.sec-head h2{font-size:clamp(28px,4.4vw,48px);font-weight:800;line-height:1.18;letter-spacing:-.04em;color:var(--g900);
             overflow-wrap:anywhere;min-width:0}
.sec-head p{font-size:18px;color:var(--g600);margin:24px 0 0;text-wrap:balance}
.sec-head.left{text-align:left;max-width:none;margin-bottom:56px}
.sec-head.left h2{line-height:1.14}
/* 섹션 제목 — 800은 이 길이에서 덩어리로 보인다. SemiBold로 낮춘다 */
.chain .sec-head h2,
.compare .sec-head h2,
.tiles .sec-head h2,
#ai .sec-head h2,
#models .sec-head h2,
#vision .sec-head h2,
.identity .sec-head h2{font-weight:600}
/* 제목이 아래 표와 같은 색을 쓴다 — 두 주어만 칠하고 「과」·「의 차이」는 본문색 그대로 둔다.
   표 머리글과 같은 값이라(기존 g500 · AI Dure blue-deep) 제목을 읽고 표를 보면 색이 이어진다. */
/* 기존 쪽은 검정에서 한 단만 물러난다 — 끝으로 갈수록 어두워져 바로 뒤의 「과」와 이어진다.
   g500까지 밝히면 두 주어가 다른 층으로 갈라져 한 문장으로 안 읽힌다. */
.compare .sec-head h2 .d-old{
  background:linear-gradient(96deg,var(--g600) 0%,var(--g800) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* 제목 안의 브랜드 — 대조·두레·브랜드 스토리가 같은 그라데이션 한 벌을 쓴다 */
.compare .sec-head h2 .d-new,
.identity .sec-head h2 .d-new,
.story-hero h1 .d-new{
  background:linear-gradient(96deg,var(--blue) 0%,var(--blue-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* 한 줄로 화면 폭을 다 쓰는 제목은 아래 HOW IT WORKS와 같은 자를 쓴다 —
   48이면 그 아래 44와 나란히 놓였을 때 혼자 커 보인다 */
/* 제목은 다른 절 머리(.sec-head h2, 48)와 같은 자 — 한때 44로 낮췄으나 2열 배치가 되며 혼자 작아 보였다(사용자 지적) */
/* 두레 부제는 제목의 뒷말이다 — 무게를 올리되 서술어(입니다)까지 세우지는 않는다 */
.identity .sec-head p:not(.note){color:var(--g700)}
.identity .sec-head p:not(.note) b{font-weight:600}
/* 본문 — 제목 아래 한 문단. 마디 셋을 걷어낸 자리다 */
.chain-lead{position:relative;z-index:1;margin:0;
  font-size:16px;font-weight:400;line-height:28px;color:var(--g600)}
/* 한 구절만 세워 문장 안에서 눈이 멈추게 한다 — 색은 안 바꾼다(강조가 둘이 되면 위계가 흐려진다) */
.chain-lead b,
.compare .sec-head p b{font-weight:600;color:var(--g800)}
.chain-rail{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,4vw,56px);align-items:stretch}
/* 화면 전체 폭을 가로지르는 주황 블롭 — 컨테이너에 갇히지 않는다 */
.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}
}
@media(prefers-reduced-motion:reduce){.chain-glow i{animation:none;transform:translate(38vw,-50%);opacity:.85}}
.node{position:relative;z-index:2;border-radius:var(--r-card);min-height:168px;
       /* 토스식: 그림자 없이 흰 면이 아래로 배경에 스며든다 */
       background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.72) 55%,rgba(255,255,255,.18) 100%);
       box-shadow:none;
       padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
       transition:transform .3s var(--ease)}
.node:hover{transform:translateY(-2px)}
.node .k{font-size:14px;font-weight:400;letter-spacing:-.015em;color:var(--g500)}
.node h3{font-size:clamp(20px,2.2vw,26px);font-weight:700;color:var(--g900);letter-spacing:-.03em;line-height:1.2}
.node.hot{background:linear-gradient(180deg,rgba(255,236,230,.96) 0%,rgba(255,244,240,.7) 55%,rgba(255,255,255,.16) 100%)}
.node.hot h3{color:var(--blue-deep)}
@media(max-width:860px){.chain-rail{grid-template-columns:minmax(0,1fr);gap:16px}.node{min-height:132px}}


.stat-line{display:flex;align-items:baseline;gap:16px;margin:32px 0 0;padding-top:24px;
  box-shadow:inset 0 1px 0 var(--g200);flex-wrap:wrap}
.stat-line b{font-size:clamp(26px,3.2vw,36px);font-weight:700;letter-spacing:-.03em;color:var(--g900);
  font-variant-numeric:tabular-nums lining-nums}
.stat-line span{font-size:14.5px;color:var(--g600)}

/* ═══ 쇼케이스 — 좌측 카피 + 우측으로 흘러나가는 카드 스택 ═══ */
.showcase{padding:var(--sec-y) 0;overflow:clip;position:relative;
  background:linear-gradient(180deg,#fff 0%,var(--g50) 14%,var(--g50) 86%,#fff 100%)}
.showcase .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,4vw,56px);align-items:center}
/* 아이브로우는 본문 문단 규칙(.copy p)에 덮이면 안 된다 — 같은 층의 말은 한 값이다 */
.showcase .copy p.note{text-align:left;font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--blue);margin:0 0 16px}
.showcase h2{font-size:clamp(29px,4.3vw,50px);font-weight:700;line-height:1.2;letter-spacing:-.032em;
  color:var(--g900);overflow-wrap:anywhere;min-width:0}
.showcase .copy p{font-size:16px;color:var(--g600);margin:24px 0 0;max-width:34em}
.deck{position:relative;height:min(58vw,660px);padding-right:2%}
.deck .card{position:absolute;border-radius:24px;overflow:hidden;background:#fff}
.deck .c-back{z-index:1;width:92%;right:-8%;top:-8%;aspect-ratio:4/3;border-radius:30px;
  background:linear-gradient(150deg,#ffefe9,#f7f6f4 58%,#eef1f4);
  filter:blur(4px);opacity:.5;box-shadow:0 26px 60px rgba(42,38,34,.06);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 35%,#000 42%,transparent 88%);
          mask-image:radial-gradient(120% 100% at 50% 35%,#000 42%,transparent 88%)}
/* 휴대폰 — 직접 만든 UI. 이미지가 아니라 DOM이라 어느 크기에서도 선명하다 */
.deck .c-mid{z-index:2;width:46%;right:-2%;top:-12%;aspect-ratio:9/19;border-radius:34px;padding:8px;
  background:linear-gradient(165deg,#fff,#eceae6);
  box-shadow:0 30px 60px rgba(42,38,34,.10);
  filter:blur(1.6px);opacity:.42;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 96%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 96%)}
.deck .c-mid::after{content:"";position:absolute;inset:0;border-radius:32px;pointer-events:none;
  background:linear-gradient(205deg,rgba(255,255,255,.36),transparent 42%)}
.deck .c-mid .scr{position:relative;height:100%;border-radius:27px;background:#fff;overflow:hidden;
  padding:16px 16px 0;container-type:inline-size}
/* 앞 차트 카드 — 선명하게 맨 앞 */
.deck .c-front{z-index:4;width:78%;left:-4%;top:20%;padding:24px 32px 24px;border-radius:22px;background:#fff;
  box-shadow:0 34px 72px rgba(42,38,34,.17),0 2px 0 rgba(255,255,255,.7) inset}
.ph-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ph-logo{font-size:11px;font-weight:700;color:var(--g800);letter-spacing:-.01em}
.ph-logo b{color:var(--blue);font-weight:700}
.ph-chip{font-size:8.5px;font-weight:700;color:var(--g600);background:var(--g100);padding:4px 8px;border-radius:var(--r-pill)}
.ph-eyebrow{font-size:9.5px;font-weight:700;color:var(--blue);margin:0 0 4px}
.ph-title{font-size:13px;font-weight:700;line-height:20px;letter-spacing:-.02em;color:var(--g700);margin:0 0 16px}
.ph-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--g100);
  border-radius:12px;overflow:hidden;margin-bottom:16px}
.ph-stats div{background:#fff;padding:8px 8px}
.ph-stats b{font-size:17px;font-weight:700;color:var(--g700);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums}
.ph-stats em{font-style:normal;font-size:9px;font-weight:600;color:var(--g500);margin-left:4px}
.ph-stats i{display:block;font-style:normal;font-size:8.5px;color:var(--g500);margin-top:4px}
.ph-rank{list-style:none;margin:0;padding:0;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--g100)}
.ph-rank li{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:8px;
  padding:8px 8px;background:#fff;box-shadow:inset 0 -1px 0 var(--g100)}
.ph-rank li.lead{background:var(--blue-weak)}
.ph-rank .r{font-size:9.5px;font-weight:700;color:var(--g400);text-align:center;
  font-variant-numeric:tabular-nums}
.ph-rank li.lead .r{color:var(--blue-deep)}
.ph-rank .n{font-size:10.5px;font-weight:600;color:var(--g800)}
.ph-rank .v{font-size:11.5px;font-weight:700;color:var(--g900);font-variant-numeric:tabular-nums lining-nums}
.ph-rank li.lead .v{color:var(--blue-deep)}
/* 앞 카드 내부 — 지표 줄 + 정돈된 줄무늬 바 */
.mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-bottom:16px}
.mini-stats div{position:relative;padding:4px 16px 4px 16px;min-width:0}
.mini-stats div:first-child{padding-left:0}
.mini-stats div:last-child{padding-right:0}
.mini-stats div:not(:first-child)::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--g200)}
.mini-stats .k{font-size:12.5px;font-weight:600;color:var(--g500);margin:0 0 8px;letter-spacing:-.005em;white-space:nowrap}
.mini-stats .v{font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--g900);margin:0;line-height:1;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums lining-nums}
@media(max-width:560px){.mini-stats div{padding:4px 16px}.mini-stats .k{font-size:11.5px}.mini-stats .v{font-size:22px}}
.rank{list-style:none;margin:16px 0 0;padding:16px 0 0;display:flex;flex-direction:column;gap:4px;
  border-top:1px solid var(--g200)}
.rank li{display:grid;grid-template-columns:18px 40px 1fr auto;align-items:center;gap:8px;
  padding:8px 0;transition:transform .85s var(--ease)}
.rank .r{font-size:12px;font-weight:700;color:var(--g400);text-align:center;
  font-variant-numeric:tabular-nums;transition:color .5s var(--ease)}
.rank .lb{font-size:13px;font-weight:600;color:var(--g700);white-space:nowrap;
  transition:color .5s var(--ease)}
.rank .track{position:relative;height:12px;border-radius:3px;background:var(--g100);overflow:hidden}
.rank .fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;color:#f0563a;
  background-image:repeating-linear-gradient(to right,currentColor 0 2px,transparent 2px 5px);
  transition:width 1.05s var(--ease),color .8s var(--ease)}
.rank.on .fill{width:var(--h)}
.rank .cnt{font-size:13.5px;font-weight:700;color:var(--g900);white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums}
.rank .cnt em{font-style:normal;font-size:11px;font-weight:600;color:var(--g500);margin-left:4px}
.rank li.top .r,.rank li.top .lb,.rank li.top .cnt{color:var(--blue-deep)}
@media(max-width:900px){
  .showcase{padding:80px 0 80px}
  .showcase .wrap{grid-template-columns:minmax(0,1fr)}
  .deck{height:min(118vw,540px)}
  .deck .c-back{width:104%;right:-10%;top:-6%}
  .deck .c-mid{width:54%;right:-6%;top:-8%;border-radius:28px;padding:4px;filter:blur(1.2px);opacity:.38}
  .deck .c-mid .scr{border-radius:24px;padding:8px 8px 0}
  .deck .c-front{width:100%;left:0;top:24%}
  .ph-title{font-size:11.5px}.ph-stats b{font-size:15px}
  .deck .c-front{width:96%;left:0;top:26%;padding:16px 16px 16px}
  .rank .lb{font-size:12px}
  .rank li{grid-template-columns:16px 36px 1fr auto;gap:8px}
}

/* ═══ 매스너리 타일 — 사진·영상 자리 + 데이터 타일 혼합 ═══ */
.tiles{padding:var(--sec-y) 0;background:transparent;position:relative;overflow:hidden}
.tiles::before{content:"";position:absolute;inset:-10% -20% auto;height:70%;pointer-events:none;
  background:radial-gradient(45% 55% at 22% 40%,rgba(255,237,231,.9),transparent 70%),
             radial-gradient(40% 50% at 78% 30%,rgba(247,246,244,.9),transparent 70%)}
.tiles .wrap{position:relative;z-index:2}
/* 이 제목은 한 줄로 읽혀야 한다 — 섹션 머리 기본 폭(820)에서는 어정쩡하게 접힌다.
   래퍼 폭(1200)까지 열어 주고, 그래도 넘치면 글자가 줄어 한 줄을 지킨다. */
.tiles .sec-head{margin-bottom:48px;max-width:none}
.tiles .sec-head h2,#ai .sec-head h2{white-space:nowrap}   /* 크기는 절 제목 한 벌(48/28) — 44로 낮추던 규칙은 뺐다(사용자 확정) */
/* LOCAL APPLICATION도 한 줄 제목이다 — 같은 자를 쓴다(1100에서 44 고정으로 남아 다른 한 줄 제목 37.4와 갈렸다) */
#models .sec-head h2{line-height:1.18}
@media(max-width:1180px){.tiles .sec-head h2,#ai .sec-head h2{white-space:normal}}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:start}
.col{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.col:nth-child(2){margin-top:clamp(24px,5vw,72px)}
/* 타일 — 상자로 읽히지 않게 그림자를 걷는다. 면과 라운드만으로 구획한다.
   시연 타일은 안쪽 화면 카드가 스스로 떠 있어 바깥까지 띄우면 상자 안 상자가 된다. */
.tile{position:relative;border-radius:24px;overflow:hidden;box-shadow:none}
.tile>video,.tile>img{display:block;width:100%;height:100%;object-fit:cover}
.tile.r45{aspect-ratio:4/5}.tile.r11{aspect-ratio:1/1}.tile.r54{aspect-ratio:5/4}.tile.r169{aspect-ratio:16/9}
/* 넉 장이 같은 키로 서야 열이 흐트러지지 않는다 — 한 줄짜리(0건)도 두 줄 높이를 지킨다 */
.tile.data{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:clamp(24px,3.4vw,32px);
  min-height:calc(73px + 2 * clamp(24px,3.4vw,32px));box-shadow:none}
.tile.t-sky{background:linear-gradient(150deg,#ffe8e0,#fffaf8)}
.tile.t-mint{background:linear-gradient(150deg,#eaf5e6,#fafdf8)}
.tile.t-lilac{background:linear-gradient(150deg,#fdeee9,#fffcfa)}
.tile.t-sand{background:linear-gradient(150deg,#fcf3e4,#fffdf9)}
.tile .tk{font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--g500);margin:0}
.tile .tv{font-size:clamp(26px,3.6vw,40px);font-weight:700;letter-spacing:-.032em;color:var(--g900);margin:0;
  line-height:1.12;font-variant-numeric:tabular-nums lining-nums}
.tile .tv em{font-style:normal;font-size:.42em;font-weight:600;color:var(--g500);margin-left:8px}
.tile .td{font-size:14.5px;color:var(--g600);margin:0}
.slot{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;
  padding:24px;background:linear-gradient(140deg,var(--g100),var(--blue-weak))}
.slot .tag{font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--blue-deep);
  background:rgba(255,255,255,.75);padding:4px 8px;border-radius:var(--r-pill)}
.slot .what{font-size:15.5px;font-weight:700;color:var(--g800);margin:0;line-height:24px;max-width:20em}
.slot .spec{font-size:11.5px;color:var(--g500);margin:0}
@media(max-width:560px){.cols{grid-template-columns:minmax(0,1fr)}.col:nth-child(2){margin-top:0}}

/* ═══ 수치 밴드 ═══ */

/* ═══ 캡처 / 자리표시 ═══ */
.alt{padding:var(--sec-y) 0}
.alt.g{background:linear-gradient(180deg,#fff 0%,var(--g50) 14%,var(--g50) 86%,#fff 100%)}
.alt .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.alt.flip figure{order:2}
.alt h2{font-size:clamp(27px,4vw,44px);font-weight:700;line-height:1.22;letter-spacing:-.028em;color:var(--g900);
        overflow-wrap:anywhere;min-width:0}
.alt p{font-size:16px;color:var(--g600);margin:16px 0 0;max-width:34em}
.shot{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--sh-l);background:#fff}
.shot img{width:100%;height:auto}
.glass{position:absolute;left:18px;right:18px;bottom:18px;padding:16px 16px;border-radius:var(--r-m);
       background:rgba(255,255,255,.66);backdrop-filter:blur(20px) saturate(180%);
       -webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 8px 24px rgba(42,38,34,.16)}
.glass .k{font-size:12px;font-weight:700;color:var(--blue-deep);margin:0 0 4px}
.glass .v{font-size:15.5px;font-weight:700;color:var(--g900);margin:0;line-height:24px}
.ph{border-radius:24px;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:40px;gap:8px;background:linear-gradient(135deg,var(--g100),var(--blue-weak));
    box-shadow:0 1px 2px rgba(42,38,34,.06),0 6px 12px -4px rgba(42,38,34,.10),0 24px 40px -16px rgba(42,38,34,.26)}
.ph .tag{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--blue-deep);
         background:rgba(255,255,255,.72);padding:8px 16px;border-radius:var(--r-pill)}
.ph .what{font-size:18px;font-weight:700;color:var(--g800);max-width:22em;line-height:28px;margin:0}
.ph .how{font-size:14px;color:var(--g600);max-width:24em;margin:0}
/* 현장 - 테이블 위 QR 스탠드. 회색 자리표 대신 장면을 그린다.
   `.ph`와 같은 모서리·그림자를 쓰되 안쪽 여백은 두지 않는다 — 그림이 판을 꽉 채워야 사진 자리로 읽힌다. */
.qrscene{border-radius:24px;overflow:hidden;line-height:0;background:var(--blue-weak);
  box-shadow:0 1px 2px rgba(42,38,34,.06),0 6px 12px -4px rgba(42,38,34,.10),0 24px 40px -16px rgba(42,38,34,.26)}
.qrscene svg{display:block;width:100%;height:auto}
.ph-note{margin:16px 0 0;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--g500)}
@media(max-width:900px){.alt{padding:72px 0}.alt .wrap{grid-template-columns:minmax(0,1fr)}.alt.flip figure{order:0}}

/* ═══ 가로 스크롤 트랙 — 세로 스크롤이 옆으로 이동한다 ═══ */
.hscroll{position:relative;background:transparent}
.hscroll .stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%)}
.hscroll .head{max-width:1200px;margin:0 auto 40px;padding:0 24px;width:100%}
.hscroll .head .note{text-align:left}
/* 다른 섹션 제목과 같은 자 — 여기만 700/44라 혼자 다른 급으로 보였다 */
.hscroll .head h2{font-size:clamp(28px,4.4vw,48px);font-weight:600;line-height:1.18;letter-spacing:-.04em;color:var(--g900)}
.hscroll .head .lead{margin:24px 0 0;max-width:62em;
  font-size:18px;font-weight:400;line-height:28px;color:var(--g600)}
.hscroll .head .lead b{font-weight:600;color:var(--g800)}
/* 두 줄이 서로 반대로 흐른다 — 윗줄은 왼쪽으로, 아랫줄은 오른쪽으로 민다.
   아랫줄은 row-reverse라 05가 오른쪽 끝에 서고, 밀려날수록 06·07·08이 왼쪽에서 들어온다 */
.hscroll .track{position:relative;display:flex;flex-direction:column;gap:clamp(34px,4.4vh,52px)}

.hscroll .trow{display:flex;gap:clamp(16px,2vw,32px);padding:0 max(24px,calc(50% - 588px));
  will-change:transform}
.hscroll .trow.rev{flex-direction:row-reverse}
/* 줄은 화면 안에 다 들어온다 — 이동 거리는 site.js가 따로 정한다 */
.hscroll .trow{justify-content:center}
/* 두 줄이 한 화면에 들어와야 한다 — 폭(15vw)과 높이(24vh) 중 작은 쪽을 따른다 */
.hscroll{--cw:clamp(150px,min(14vw,26vh),210px)}
/* 쿠폰을 한 겹 더 감싼다 — 바깥은 외곽선이 있는 반투명 쿠폰, 안쪽은 외곽선 없는 쿠폰.
   두 겹의 홈이 같은 줄에 서도록 바깥 --cy는 안쪽 --cy + 여백(12)이다 */
.hcard{flex:0 0 auto;width:var(--cw);display:flex;position:relative;
  --gap:6px;--nr:14px;--cy:70px;padding:var(--gap);border-radius:24px;
  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 left 0 top var(--cy),transparent 97%,#000 100%),
                     radial-gradient(circle var(--nr) at right 0 top var(--cy),transparent 97%,#000 100%);
          mask-image:radial-gradient(circle var(--nr) at left 0 top var(--cy),transparent 97%,#000 100%),
                     radial-gradient(circle var(--nr) at right 0 top var(--cy),transparent 97%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* 칸 사이 갈매기 — 자리는 처음부터 차지하고(안 그러면 다 모일 때 줄이 밀린다)
   제자리에 다 모였을 때 시계 방향 순서대로 하나씩 켜진다 */
/* 켜지는 정도는 site.js가 --lit(0~8)로 준다 — 제 순번(--n)에 닿으면 켜진다 */
.hscroll .cv,.hscroll .turn{position:relative;
  opacity:clamp(0,calc(var(--lit,0) - var(--n) + 1),.85);
  transition:opacity .16s linear}
.hscroll .cv{flex:0 0 auto;align-self:stretch;width:clamp(14px,1.3vw,20px)}
/* 갈매기는 테두리가 아니라 **마스크 + 그라데이션**이다 — 테두리로는 색이 한 가지뿐이고,
   굵기는 카드 안 도형의 선(3.6)과 같게 맞춘다 */
.hscroll .cv::before,.hscroll .turn::before{content:"";position:absolute;left:50%;top:50%;
  width:15px;height:24px;translate:-50% -50%;
  background:linear-gradient(150deg,#f9b6a0 0%,#f0563a 60%,#d9401f 100%);
  -webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
.hscroll{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 24'%3E%3Cpath d='M4 4 11 12 4 20' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.hscroll .trow.rev .cv::before{rotate:180deg}
/* 꺾이는 자리도 칸 사이 갈매기와 같다 — 줄의 마지막 칸 바로 옆, 같은 높이의 중앙 */
/* 줄 **안**의 꺾임 갈매기는 지운다(사용자 지시) — 트랙 가장자리의 것(`.track::before/::after`)이
   같은 꺾임(04→05 · 08→01)을 이미 그려, 화면 가운데에 같은 화살표가 한 벌 더 떠 있었다. */
.hscroll .turn{display:none}
.hscroll .turn.down::before{rotate:90deg}
.hscroll .turn.up::before{rotate:-90deg}

/* 칸도 쿠폰 한 장이다 — 캠페인 티켓(.camp-card)과 같은 문법으로 양옆을 뚫고
   그 자리에 절취선을 긋는다. 다만 선은 아래가 아니라 **번호와 문장 사이**다:
   위는 무슨 단계인지, 아래는 그 단계에서 무슨 일이 일어나는지.
   --cy는 칸 위에서 절취선까지의 거리이고, 구멍도 선도 이 값 하나를 본다. */
/* 홈은 바깥 쿠폰에서 한 번만 뚫는다 — 바깥 마스크가 안쪽까지 같이 잘라내므로
   두 겹이 한 번에 뚫린 것으로 읽힌다. 안쪽에 따로 홈을 두면 호가 두 줄이 된다.
   --nr/--nx는 절취선이 홈에 닿는 지점을 계산하는 데만 쓴다(중심이 제 왼쪽 모서리
   보다 6px 바깥이므로 8px 지점에서 시작한다). */
.hcard .vis{flex:1 1 auto;position:relative;--nr:14px;--nx:-6px;--cy:64px;
  border-radius:18px;background:var(--g100);
  /* 안쪽 쿠폰은 외곽선을 두지 않는다 — 선은 감싸는 쿠폰 몫이다 */
  display:flex;flex-direction:column;text-align:center;
  min-height:calc(var(--cw) * .82)}
/* 절취선 — 홈의 한가운데를 지나 반대쪽 홈까지. 칸 안의 유일한 점선이다 */
.hcard .vis::after{content:"";position:absolute;left:calc(var(--nr) + var(--nx));right:calc(var(--nr) + var(--nx));
  top:calc(var(--cy) - .5px);height:1px;pointer-events:none;
  background:repeating-linear-gradient(to right,rgba(42,38,34,.22) 0 5px,transparent 5px 10px)}
/* 윗칸(번호)은 절취선까지가 제 키다. 아랫칸(문장)은 남은 자리를 다 쓴다 */
.hcard .k{display:flex;align-items:center;justify-content:center;
  height:var(--cy);margin:0;padding:0 14px;
  font-size:12.5px;font-weight:600;letter-spacing:-.005em;line-height:1.45;color:var(--g500)}
.hcard h3{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  margin:0;padding:16px 20px 20px;
  font-size:16px;font-weight:700;color:var(--g900);
  letter-spacing:-.024em;line-height:1.45;text-wrap:balance}
@media(max-width:900px){
  .hscroll .stick{position:static;height:auto;overflow:visible;mask-image:none;-webkit-mask-image:none}
  .hscroll .trow{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
    -webkit-overflow-scrolling:touch;transform:none !important}
  .hscroll .trow.rev{flex-direction:row}
  .hcard{scroll-snap-align:start;width:min(74vw,300px)}
  .hscroll{padding:72px 0}
}
@media(prefers-reduced-motion:reduce){
  .hscroll .stick{position:static;height:auto}
  .hscroll .trow{overflow-x:auto;transform:none !important}
}

/* ═══ 3역할 ═══ */
.roles{padding:var(--sec-y) 0;background:linear-gradient(180deg,#fff 0%,var(--g50) 12%,var(--g50) 100%)}
/* 모델 넷은 고르는 것이라 한 줄에 나란히 놓는다 — 좌우로 나누면 셋째·넷째가
   접혀 내려가 순서가 흐려진다. 제목은 위에 두고 칸 넷은 그 아래 한 줄. */
#models .wrap{display:block}
#models .sec-head{max-width:none;text-align:left;margin:0 0 48px}
#models .models{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
@media(max-width:1100px){#models .models{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){#models .models{grid-template-columns:minmax(0,1fr)}}
/* 「지역에 맞게 설계」만 검은 면에 둔다 — 적용모델 넷이 한 판으로 읽혀야 하는 대목이다.
   비전은 밝은 면 그대로 둔다(끝으로 갈수록 밝아지는 흐름을 끊지 않는다) */
#models{background:var(--g900);color:#fff}
#models .sec-head h2,#models h2{color:#fff}
#models .sec-head p:not(.note){color:rgba(255,255,255,.66)}
#models .note{color:#f7a68d}
#models .model{background:rgba(255,255,255,.06)}
#models .model h3{color:#fff}
#models .model p{color:rgba(255,255,255,.66)}
#models .model .k{color:#f7a68d}
#models .model .opt{color:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
#models .model::after{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26)}
#models .model:hover::after{box-shadow:inset 0 0 0 1.5px #f7a68d,inset 0 0 0 7px #f7a68d}
#models .model:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(247,166,141,.34)}
#models .model:hover{background:rgba(255,255,255,.1)}
.roles .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
/* 그림자 없이 흰 면만으로 세운다 — 배경이 이미 옅은 회색이라 면 차이로 충분히 떠 보인다 */
.role{background:#fff;border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;
      transition:transform .3s var(--ease)}
.role:hover{transform:translateY(-3px)}
.role .vis{min-height:190px;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
           background:linear-gradient(135deg,var(--g100),var(--blue-weak));font-size:14.5px;font-weight:600;color:var(--g700)}
.role .body{padding:24px 24px 32px}
.role .k{font-size:12px;font-weight:700;color:var(--blue-deep);margin:0 0 8px}
.role h3{font-size:20px;font-weight:700;color:var(--g900)}
.role p{font-size:15px;color:var(--g600);margin:8px 0 0}
.role .go2{display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:44px;
  font-size:15px;font-weight:700;color:var(--blue-deep);text-decoration:none;
  transition:gap .2s var(--ease)}
.role .go2:hover{gap:8px}
.role .go2 svg{width:16px;height:16px}
.hd .sub-link{font-size:15px;font-weight:600;color:var(--g700);text-decoration:none;
  padding:8px 16px;border-radius:var(--r-s);transition:background .18s var(--ease)}
.hd .sub-link:hover{background:var(--g100)}
@media(max-width:880px){.hd .sub-link{display:none}}
@media(max-width:900px){.roles{padding:72px 0}.roles .row{grid-template-columns:minmax(0,1fr)}}

/* ═══ 마감 — 그라데이션 지면 + 커서 스포트라이트 ═══ */
.finale{position:relative;overflow:hidden;padding: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}
/* 마지막 섹션의 제목·부제도 다른 섹션과 같은 자를 쓴다 — 여기만 크고 굵으면
   섹션 하나가 아니라 다른 페이지처럼 읽힌다(48 / 600, 부제 17 / 400 / g600) */
.finale h2{font-size:clamp(28px,4.4vw,48px);font-weight:600;line-height:1.18;letter-spacing:-.04em;color:var(--g900);margin-bottom:24px}
.finale .lead{font-size:18px;font-weight:400;line-height:28px;color:var(--g600);margin:0 0 32px;max-width:none}
/* ═══ 법무 문서(/terms · /privacy) — 왼쪽 고정 목차 + 오른쪽 본문 ═══
   배치는 레퍼런스(centras.ai/legal)를 따르되 색·자는 우리 토큰이다.
   **선택된 목차에 면을 깔지 않는다** — 굵은 글씨로만 표시한다(사용자 지시). */
.lg{max-width:1200px;margin:0 auto;padding:calc(var(--hd) + 48px) 24px 96px;
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
.lg-toc{position:sticky;top:calc(var(--hd) + 24px);max-height:calc(100vh - var(--hd) - 48px);overflow:auto}
.lg-toc-h{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--g500)}
.lg-toc ol{list-style:none;margin:0;padding:0;counter-reset:lgn}
.lg-toc li{counter-increment:lgn}
.lg-toc a{display:block;padding:7px 0;font-size:13.5px;font-weight:400;line-height:1.45;color:var(--g500);text-decoration:none}
.lg-toc a::before{content:counter(lgn) ". ";color:var(--g400)}
.lg-toc a:hover{color:var(--g900)}
.lg-toc a.on{font-weight:700;color:var(--g900)}
.lg-toc a.on::before{color:var(--g900)}

.lg-doc{max-width:800px;min-width:0}
.lg-eb{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.115em;color:var(--blue)}
.lg-doc h1{margin:0;font-size:clamp(28px,3.6vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.2;color:var(--g900)}
.lg-note{display:grid;gap:6px;margin:24px 0 0;padding:18px 20px;border-radius:var(--r-m);background:var(--g100)}
.lg-note b{font-size:14.5px;font-weight:700;color:var(--g900)}
.lg-note span{font-size:13.5px;line-height:1.6;color:var(--g600)}
.lg-sec{margin-top:clamp(40px,5vw,56px);scroll-margin-top:calc(var(--hd) + 24px)}
.lg-sec h2{margin:0 0 16px;font-size:clamp(19px,2.1vw,23px);font-weight:700;letter-spacing:-.03em;color:var(--g900)}
.lg-sec h3{margin:28px 0 10px;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--g900)}
.lg-sec p{margin:0 0 12px;font-size:15.5px;line-height:28px;color:var(--g700)}
.lg-sec ul{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:8px}
.lg-sec li{position:relative;padding-left:16px;font-size:15.5px;line-height:26px;color:var(--g700)}
.lg-sec li::before{content:"";position:absolute;left:2px;top:11px;width:4px;height:4px;border-radius:50%;background:var(--g400)}
.lg-sec li.sub{margin-left:18px;font-size:15px;color:var(--g600)}
.lg-sec b{font-weight:700;color:var(--g900)}
.lg-sec code{padding:1px 5px;border-radius:5px;background:var(--g100);font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:.92em}
/* 판단 대기 표식 — 지우지 않는다. 어디가 정해지지 않았는지가 문서의 일부다 */
.mark{font-style:normal;font-weight:700;font-size:.88em;color:var(--blue-deep)}
.lg-tw{overflow-x:auto;margin:0 0 16px}
.lg-sec table{width:100%;border-collapse:collapse;font-size:14.5px}
.lg-sec th,.lg-sec td{padding:12px 14px;text-align:left;vertical-align:top;line-height:1.55;
  box-shadow:inset 0 -1px 0 var(--g200)}
.lg-sec th{font-weight:700;color:var(--g900);background:var(--g50);white-space:nowrap}
.lg-sec td{color:var(--g700)}
@media(max-width:900px){
  .lg{grid-template-columns:minmax(0,1fr);gap:28px}
  /* 좁은 폭에서는 목차가 본문 위에 눕는다 — 고정하면 화면을 덮는다 */
  .lg-toc{position:static;max-height:none;padding-bottom:20px;box-shadow:inset 0 -1px 0 var(--g200)}
  .lg-toc ol{display:flex;flex-wrap:wrap;gap:0 18px}
  .lg-toc a{padding:5px 0}
}

/* ═══ 도입 상담(/contact) — 레퍼런스(로컬 5330 /contact)의 배치만 빌린다 ═══
   왼쪽 머리 → 굵은 가로줄 → 7:5 두 열(폼 | 카드) → 자주 묻는 질문. 색·자·라운드는 전부 우리 토큰.
   폼 규칙이 site.css에 없어 여기서 처음 쓴다 — 랜딩 언어(따뜻한 회색·코랄 하나·알약)를 그대로 잇는다. */
.story-hero.left{text-align:left;padding-left:0;padding-right:0;padding-bottom:0}
.story-hero.left h1{max-width:none;margin-inline:0}
.story-hero.left .lead{margin-left:0;max-width:44em}
.contact{padding:0 0 var(--sec-y)}
.contact-grid{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:start}

/* ── 폼 ── */
.cform{display:grid;gap:22px}
.cform .field label{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:14.5px;font-weight:600;color:var(--g800)}
.req{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:var(--r-pill);
  background:var(--blue-weak);color:var(--blue-deep);font-size:11px;font-weight:700;font-style:normal;letter-spacing:.02em}
.cin{width:100%;height:56px;padding:0 18px;border:0;border-radius:var(--r-m);background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--g200);font-family:inherit;font-size:16px;font-weight:500;color:var(--g900);
  appearance:none;-webkit-appearance:none;box-sizing:border-box;transition:box-shadow .18s var(--ease)}
.cin::placeholder{color:var(--g400);font-weight:400}
.cin:focus{outline:0;box-shadow:inset 0 0 0 2px var(--blue)}
.cin.area{height:auto;padding:16px 18px;line-height:1.6;resize:vertical;min-height:168px}
.cform .hint{margin:8px 0 0;font-size:13px;color:var(--g500)}
/* 셀렉트 — 네이티브 화살표를 끄고 우리 셰브론을 오른콝에 얹는다 */
.csel{position:relative}
.csel .cin{padding-right:48px;cursor:pointer}
.csel .cin{font-weight:600}
.csel svg{position:absolute;right:18px;top:50%;translate:0 -50%;width:16px;height:16px;color:var(--g900);pointer-events:none}
/* 아직 안 고른 상태(첫 옵션) — 값이 아니라 안내라 옅게 */
.csel .cin:has(option:first-child:checked){color:var(--g400);font-weight:400}
.cagree{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;
  padding:16px 18px;border-radius:var(--r-m);background:var(--g50);cursor:pointer}
/* 동의 칸의 네모는 **가입 화면과 같은 모양**이다(사용자 지시) — 기본 체크는 각지고 색도 제각각이라
   운영체제마다 다르게 보였다. 라운드 8에 끝이 둥근 획 하나, 켜지면 브랜드 주황으로 찬다. */
.cagree input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;border:0;border-radius:8px;
  background-color:#fff;background-image:none;
  box-shadow:inset 0 0 0 1.5px var(--g300);
  cursor:pointer;position:relative;transition:background-color .18s,box-shadow .18s}
.cagree input[type="checkbox"]:checked{
  background-color:var(--blue);box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:20px 20px;background-repeat:no-repeat;background-position:center}
.cagree input[type="checkbox"]:focus-visible{
  outline:0;box-shadow:inset 0 0 0 2px var(--blue),0 0 0 3px var(--blue-weak)}
.cagree span{font-size:14.5px;font-weight:500;line-height:1.5;color:var(--g800)}
.cagree small{display:block;margin-top:4px;font-size:12.5px;font-weight:400;color:var(--g500)}
.cta-row.left{justify-content:flex-start;margin-top:4px}
.cform .btn{border:0;cursor:pointer;font-family:inherit}
.cnote{display:grid;gap:4px;padding:16px 18px;border-radius:var(--r-m);font-size:14.5px;line-height:1.5}
.cnote b{font-weight:700}
/* 접수됨 — 「보류」와 같은 판을 쓴다. 성공에 새 색을 만들지 않는다(디자인 토큰만 쓴다). */
.cnote.ok{background:var(--blue-weak);color:var(--g800)}
.cnote.ok b{color:var(--blue-deep)}
.cnote.pending{background:var(--blue-weak);color:var(--g800)}
.cnote.pending b{color:var(--blue-deep)}
.cnote.err{background:var(--g100);color:var(--g800)}

/* ── 옆 카드 — 레퍼런스 OFFICE 카드의 배치(표식 · 이름 · 항목 dl) ── */
.caside{padding:32px;border-radius:var(--r-card);background:var(--g50);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.7)}
.caside .eyebrow{margin-bottom:14px}
.caside h2{margin:0 0 20px;font-size:clamp(19px,1.8vw,22px);font-weight:700;letter-spacing:-.03em;color:var(--g900)}
.caside dl{margin:0;display:grid;gap:16px}
.caside dl div{display:grid;gap:4px}
.caside dt{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--g500)}
.caside dd{margin:0;font-size:15px;font-weight:500;line-height:1.55;color:var(--g800)}
.caside .tel{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--g900);text-decoration:none}
.caside .tel:hover{color:var(--blue-deep)}
.cnote a{color:var(--blue-deep);font-weight:700;text-decoration:none}
/* ── 자주 묻는 질문 — 레퍼런스처럼 질문/답 dl. 여백으로 끊는다 ── */
.faq{padding:0 0 var(--sec-y)}
.faq h2{margin:0 0 28px;font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.035em;color:var(--g900)}
.faq dl{margin:0;display:grid;gap:24px;max-width:56em}
.faq dt{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--g900)}
.faq dd{margin:8px 0 0;font-size:16px;line-height:1.7;color:var(--g600)}

@media(max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}.caside{order:2}}
@media(max-width:560px){.caside{padding:24px}}

/* ── 사이트맵 푸터(.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}}

.fgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);
  gap:clamp(32px,5vw,72px);margin-top:80px;align-items:start}
.fbrand .fmark{font-size:22px;font-weight:700;letter-spacing:-.018em;color:var(--g900);margin:0}
.fbrand .fmark span{color:var(--blue)}
.fbrand .fdesc{font-size:14.5px;color:var(--g600);margin:4px 0 0;line-height:24px}
/* 푸터는 헤더와 같은 세 자리 + 대시보드 하나. 네 칸 목록은 갈 데 없는 링크를 채우고 있었다 */
.fnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px}
.fnav a{font-size:14.5px;font-weight:400;color:var(--g600);text-decoration:none;
  padding:8px 0;transition:color .2s var(--ease)}
.fnav a:hover{color:var(--blue-deep)}
.fnav .fgo{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--g900)}
.fnav .fgo svg{width:16px;height:16px}
@media(max-width:980px){
  .fgrid{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:56px}
}
/* 고스트 워드마크 + 스포트라이트 */
.ghostwrap{position:relative;margin-top:56px;padding-bottom:8px}
.ghost,.ghostlit{margin:0;white-space:nowrap;display:block;
  font-size:clamp(56px,12vw,190px);font-weight:700;letter-spacing:-.045em;line-height:1.06}
.ghostlit{position:absolute;left:0;top:0;right:0}
.ghost{color:rgba(255,255,255,.62)}
.ghostlit{color:#fff;
  -webkit-mask-image:radial-gradient(circle 220px at var(--mx,-500px) var(--my,-500px),#000 0%,rgba(0,0,0,.55) 45%,transparent 72%);
          mask-image:radial-gradient(circle 220px at var(--mx,-500px) var(--my,-500px),#000 0%,rgba(0,0,0,.55) 45%,transparent 72%)}
.fbot{position:relative;z-index:2;padding:24px 0 32px;font-size:12.5px;color:var(--g600)}
.fbot .in{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:900px){
  .finale{padding:88px 0 0}
  .fnav{gap:4px 24px;margin-top:40px}
  .ghostlit{mask-image:none;-webkit-mask-image:none;color:rgba(255,255,255,.62)}
}
/* ═══ 공용 고정 헤더 — 토스 실측 규격 ═══ */
.hd{position:fixed;inset:0 0 auto;height:64px;z-index:100;background:transparent;
  transition:background .25s ease,backdrop-filter .25s ease}
/* 면은 깔지 않는다 — 뒤를 흐리기만 해서 글자가 읽히게 한다(무색) */
.hd.stuck{background:rgba(255,255,255,.5);backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%)}
.hd-in{position:relative;height:100%;display:flex;align-items:center;
  padding:0 clamp(16px,7.5vw,112px)}
.hd .logo{font-size:20px;font-weight:700;color:var(--g900);letter-spacing:-.015em;
  text-decoration:none;-webkit-font-smoothing:antialiased}
.hd .logo span{color:var(--blue)}
.hd nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:24px}
.hd nav a{display:flex;align-items:center;height:64px;font-size:16px;font-weight:500;white-space:nowrap;
  color:#333840;text-decoration:none;transition:color .18s ease}
.hd nav a:hover{color:var(--g900)}
/* 선택 표시 — 굵기만으로는 눈에 안 띈다. 색과 밑줄로 지금 어디인지 못 박는다 */
.hd nav a{position:relative}
.hd nav a.cur{font-weight:700;color:var(--g900)}
/* 우측 둘 — 읽는 사람이 둘로 갈린다. 크리에이터·점주는 로그인(참여자 대시보드), 지자체·기관은 도입 상담.
   무게를 달리한다: 로그인은 글자만(고스트), 도입 상담은 알약. 둘 다 알약이면 헤더가 무겁다. */
.hd .go{margin-left:auto;display:inline-flex;align-items:center;height:36px;padding:0 16px;
  border-radius:12px;background:rgba(42,38,34,.05);color:#333840;font-size:16px;font-weight:500;
  text-decoration:none;white-space:nowrap;transition:background .18s ease}
.hd .go:hover{background:rgba(42,38,34,.09)}
.hd .go.ghost{background:transparent;margin-left:auto}
.hd .go.ghost + .go{margin-left:8px}
/* 900 아래에서 로그인을 통째로 숨겼었다 — 761~900은 글자로, 760 아래는 아이콘으로 남긴다(사용자 지적: 들어갈 길이 없다) */
@media(max-width:1120px){.hd nav{gap:16px}.hd nav a{font-size:15px}}
@media(max-width:900px){.hd nav{gap:8px}.hd nav a{font-size:14px}}
@media(max-width:760px){
  .hd .logo{white-space:nowrap}
  .hd nav{position:static;transform:none;margin-left:auto;gap:4px}
  .hd nav a{white-space:nowrap;font-size:0;padding:0 8px}
  .hd nav a::after{content:attr(data-short);font-size:14px}
  .hd .go{display:none}}

/* ═══ 타일 안 실제 동작 데모 — 영상 대신 UI를 축소해 재생 ═══ */
/* 시연 칸의 높이는 비율이 아니라 내용이 정한다 — 여백 32 + 화면 + 간격 24 + 캡션 40 + 여백 32.
   화면 카드가 폭에 맞춰 줄어들면 높이도 같이 줄어야 하므로 실제 값은 site-demo.js가 잰다 */
.tile.demo{position:relative;background:linear-gradient(150deg,#ffe8e0,#fff8f5);display:flex;align-items:center;justify-content:center;
  aspect-ratio:auto;padding:0;overflow:hidden}
.tile.demo .scr{--s:1;--capH:64px;position:absolute;left:50%;top:calc((100% - var(--capH)) / 2);width:300px;
  transform:translate(-50%,-50%) scale(var(--s));
  /* 그림자는 두지 않는다 — 옅은 칸 위의 흰 면만으로 충분히 떠 보이고,
     18/40짜리 그림자는 칸 밖으로 번져 다른 칸까지 어둡게 만들었다 */
  transform-origin:center;background:#fff;border-radius:18px;
  padding:16px 16px 16px;display:flex;flex-direction:column;gap:8px}
.dh{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--g500);margin-bottom:4px}
.dh b{font-size:13px;color:var(--g900)}
.dh span{font-variant-numeric:tabular-nums}
.dtag{font-size:10px;font-weight:700;color:var(--blue-deep);background:var(--blue-weak);padding:4px 8px;border-radius:999px}
/* 순위 데모 */
.drank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.drank li{display:grid;grid-template-columns:14px 34px 1fr auto;align-items:center;gap:8px;font-size:11.5px;
  transition:transform .7s var(--ease)}
.drank .r{color:var(--g400);font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.drank .n{color:var(--g800);font-weight:600;white-space:nowrap}
.drank .t{height:9px;border-radius:3px;background:var(--g100);overflow:hidden;position:relative}
.drank .f{position:absolute;inset:0 auto 0 0;border-radius:3px;background:repeating-linear-gradient(to right,var(--fc,#f0563a) 0 2px,transparent 2px 4px);
  transition:width .9s var(--ease)}
.drank .v{color:var(--g900);font-weight:700;font-variant-numeric:tabular-nums}
.drank li.top .n,.drank li.top .v{color:var(--blue-deep)}
/* 직원 코드 데모 */
.dl{font-size:11px;font-weight:600;color:var(--g500);margin:4px 0 0}
.dl b{color:var(--g900);font-size:12px}
.dl small{font-weight:500;color:var(--g400)}
.din{position:relative;height:38px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px rgba(42,38,34,.14);
  display:flex;align-items:center;padding:0 16px;font-size:14px;font-weight:600;color:var(--g900);
  font-variant-numeric:tabular-nums}
.din.focus{box-shadow:inset 0 0 0 2px var(--blue)}
.din.pw span{letter-spacing:.24em;font-size:16px}
.din span:empty::before{content:attr(data-ph);color:var(--g400);font-weight:500;letter-spacing:0;font-size:13px}
.din .dok{position:absolute;right:9px;top:50%;width:18px;height:18px;border-radius:50%;background:#5f9e3f;
  transform:translateY(-50%) scale(.5);opacity:0;transition:opacity .2s,transform .25s var(--ease)}
.din .dok::after{content:"";position:absolute;left:5px;top:4px;width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.din .dok.on{opacity:1;transform:translateY(-50%) scale(1)}
.dbtn{margin-top:4px;height:38px;border-radius:999px;background:var(--g100);color:var(--g400);font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s,transform .15s}
.dbtn.on{background:var(--blue);color:#fff}
.dbtn.press{transform:scale(.97)}
.ddone{position:absolute;inset:0;border-radius:18px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.ddone.on{opacity:1}
.ddone p{font-size:12.5px;font-weight:600;color:var(--g700);margin:0}
/* 완료 표식 — 코드 칸에 붙는 체크(.dok)와 같은 모양이다. 도장은 이 화면의 다른
   어디에도 없던 장치라 혼자 튀었다. 체크만 조금 키워 쓴다 */
.dcheck{position:relative;width:30px;height:30px;border-radius:50%;background:#5f9e3f}
.dcheck::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:6px;
  border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;
  transform:translate(-50%,-62%) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.drank li,.drank .f,.dbtn,.ddone{transition:none}}

/* ═══ 타일 캐치프레이즈 — 한 줄, 앞 화면과 살짝 겹친다 ═══ */


/* ═══ 스크롤 채움 타이포 — 연한 글자가 스크롤할수록 한 글자씩 색이 든다 ═══ */
.tw{color:var(--g300)}
.tw .ch{display:inline-block;white-space:pre;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){.tw .ch{color:var(--g900)}.tw.caret .ch{color:var(--blue)}.tw.caret .ch.cur::after{display:none}}

/* ═══ 타일 고스트 캡션 — 투명한 흰 글자 한 줄 ═══ */
/* 워터마크 캡션은 데이터 칸의 수치(.tv)와 같은 자를 쓴다 — 칸마다 글자 크기가
   셋이면 무엇이 제목인지 흐려진다 */
.tile .ghostcap{position:absolute;left:32px;top:24px;z-index:1;pointer-events:none;white-space:nowrap;
  font-size:clamp(26px,3.6vw,40px);font-weight:700;line-height:1;letter-spacing:-.045em;
  color:rgba(255,255,255,.86);text-shadow:0 1px 0 rgba(255,255,255,.4)}
.tile.demo .scr{z-index:2}
/* 시연 타일 캡션 — 하단에 고정한다. 화면 카드는 캡션을 뺀 남은 칸의 중앙에 선다
   (전에는 타일 정중앙이라 캡션과 겹쳤다). */
.tile.demo .ghostcap{top:auto;bottom:32px;left:0;right:0;padding:0 32px;text-align:left;
  color:rgba(255,255,255,.92)}
.tile.slot .ghostcap{color:rgba(255,255,255,.9)}
/* QR 장면 타일 - 배경이 밝아 흰 워터마크가 먹힌다. 같은 워터마크 밀도를 어두운 쪽에서 낸다 */
.tile.qrtile{background:#fff6f2}
/* 도형 셋뿐인 칸 — 시연 칸과 같은 자를 쓴다(여백 32 · 간격 24 · 캡션 40 · 여백 32).
   그림을 칸에 늘리지 않고 제 크기로 두고, 남는 높이를 만들지 않는다 */
.tile.flowtile{background:linear-gradient(150deg,#ffe8e0,#fff8f5);aspect-ratio:auto;
  display:flex;align-items:flex-start;justify-content:center;
  padding:32px 32px calc(32px + 40px + 24px)}
/* 옆 칸의 화면 목업(.scr)과 같은 문법 — 흰 카드 한 장 위에 그래프를 얹는다 */
.tile.flowtile .chart{width:min(300px,100%);background:#fff;border-radius:18px;padding:16px}
.tile.flowtile .ch-hd{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;font-size:12px;color:var(--g500)}
.tile.flowtile .ch-hd b{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--g900)}
.tile.flowtile .chart svg{display:block;width:100%;height:auto}
/* 캡션은 시연 타일과 같이 아래에 둔다 — 위에 두면 바로 위 칸(방문이 순위로)의
   하단 캡션과 붙어 큰 글자 둘이 24px 사이에 겹쳐 선다 */
/* 이 칸의 바탕은 시연 칸과 같다 — 워터마크도 같은 흰색이어야 같은 무게로 읽힌다.
   어두운 회색은 대비가 세서 굵기가 다른 것처럼 보였다 */
.tile.flowtile .ghostcap{top:auto;bottom:32px;left:0;right:0;padding:0 32px;text-align:left;
  color:rgba(255,255,255,.92);text-shadow:none}
.tile.qrtile>svg{display:block;width:100%;height:100%;object-fit:cover}
.tile.qrtile .ghostcap{color:rgba(42,38,34,.16);text-shadow:none}
/* 사진 찍히는 순간 — 스탠드가 먼저 서 있고, 휴대폰이 들어와, 한 번 터지고 화면이 껐다 켜진다.
   타일이 화면에 들어와야(.on) 시작한다. transform 속성과 안 다투게 translate 속성을 쓴다. */
.qrtile .qr-phone{opacity:0}
.qrtile.on .qr-phone{animation:qr-phone-in .75s var(--ease) .45s both}
@keyframes qr-phone-in{from{opacity:0;translate:34px 22px}to{opacity:1;translate:0 0}}

/* 셔터는 **계속 반복된다** — 한 번만 터지면 지나친 사람은 못 본다.
   휴대폰은 처음 한 번만 들어오고 그 자리에 남는다(매 바퀴 다시 들어오면 화면이 시끄럽다). */
.qrtile .qr-flash{opacity:0}
.qrtile.on .qr-flash{animation:qr-flash 5s linear 1.35s infinite}
@keyframes qr-flash{0%{opacity:0}2%{opacity:.95}7%{opacity:0}100%{opacity:0}}

.qrtile.on .qr-cam{animation:qr-screen 5s steps(1,end) 1.35s infinite}
@keyframes qr-screen{0%{opacity:1}2%{opacity:0}10%{opacity:0}10.4%{opacity:1}100%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .qrtile .qr-phone{opacity:1;animation:none}
  .qrtile .qr-flash,.qrtile .qr-cam{animation:none}
}
@media(max-width:560px){.tile .ghostcap{font-size:26px}
  .tile.demo .ghostcap{bottom:18px;padding:0 16px}
  .tile.demo .scr{--capH:72px}}

/* 시연 ✓ — 원 중앙 동글동글한 체크 */
.din .dok{width:20px;height:20px;background:#6fa24f}
.din .dok::after{border:none;left:50%;top:50%;width:9px;height:5px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;
  border-radius:0 0 0 2px;transform:translate(-50%,-62%) rotate(-45deg)}

/* ═══ 라이브 도트 ═══ */
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);position:relative;flex:0 0 auto}
.livedot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--blue);opacity:0;animation:livePing 1.8s ease-out infinite}
@keyframes livePing{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.livedot::after{animation:none}}

/* ═══ 캠페인 이름 서체 ═══
   캠페인 이름 **한 줄에만** 다른 얼굴을 쓴다. 본문까지 번지면 페이지의 활자 계단이 무너진다.
   파일이 없으면 조용히 Pretendard로 떨어진다 — 빈 화면이 되지 않는다.
   주관 기관의 얼굴을 쓴다 - 강원은 강원특별자치도, 화성은 KPC다. 지역이 아니라 주관이 기준이다. */
@font-face{font-family:"Paperlogy";src:url("/fonts/Paperlogy-7Bold.woff2") format("woff2");
  font-weight:700;font-display:swap}
/* 강원특별자치도체는 SemiBold 한 벌뿐이다. 700을 요구하면 가짜 볼드가 씌워지므로 600으로 받는다. */
@font-face{font-family:"GangwonState";src:url("/fonts/GangwonState-SemiBold.woff2") format("woff2");
  font-weight:600;font-display:swap}

/* 강원 - 주관이 강원특별자치도(도청이 직접 성과 검증). 도청 공식 전용서체 「강원특별자치도체」.
   제목용으로 설계돼 자폭이 넓어 자간을 조금 당긴다. */
.camp-nm[data-region="gangwon"]{font-family:"GangwonState",var(--font);font-weight:600;letter-spacing:-.03em}
/* 화성 - 주관이 KPC. KPC는 배포용 전용서체가 없고 웹사이트가 본문 Pretendard · 제목 Paperlogy를
   쓰므로 제목용 얼굴만 빌린다. */
.camp-nm[data-region="hwaseong"]{font-family:"Paperlogy",var(--font);font-weight:700}
/* 「캠페인」은 이름이 아니라 분류어 - 기관의 얼굴은 고유명까지만 쓴다 */
.camp-nm .nm-kind{font-family:var(--font)}

/* ═══ 히어로의 진행 중인 캠페인 ═══
   캠페인 섹션과 같은 티켓(.camp-card)을 그대로 쓰고, 여기서는 가로로 편다.
   옛 라이브 카드(.livecard/.lc-*)는 지웠다 — 같은 것을 두 모양으로 두지 않는다. */
.camps:has(.camp-card:only-child){grid-template-columns:minmax(0,568px);justify-content:start}

/* ═══ 이름이 곧 방법 — 두레의 뜻과 브랜드 스토리로 가는 문 ═══
   대조(표)와 에이전트(타일) 사이에 선다. 앞은 「무엇이 다른가」, 뒤는 「무엇을 하는가」라
   둘 다 기능 얘기다 — 그 사이에서 **이름의 뜻**을 한 번 짚고 간다. */
/* 두레 섹션은 쿠폰 면과 같은 색으로 한 띠를 깐다 — 앞(표)과 뒤(타일 격자) 사이에서
   이 자리만 면이 바뀌어 한 번 숨을 고른다. 옅은 온기 면은 끊기엔 약하고 보이긴 보여
   애매했다. 새 색을 만들지 않고 이미 쓰는 값(쿠폰 면 g100)을 쓴다. */
.identity{padding:var(--sec-y) 0;position:relative}
.identity .sec-head{margin-bottom:56px}   /* KEY POINT와 같은 간격 — 머리 아래는 본문 한 덩어리다 */
/* 판 없이 본문으로 — 문단 사이에 여백을 주지 않아 한 덩어리로 흐른다.
   강조(b)도 걸지 않는다. 이 자리는 설명이고, 세울 말은 제목이 이미 세웠다. */
.idbox{display:flex;flex-direction:column;padding:40px;border-radius:var(--r-card);
  background:linear-gradient(168deg,rgba(255,237,231,.5),rgba(255,255,255,.34));
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.6)}
/* 문단 사이 여백 없이 한 덩어리로 흐른다 — 세 문장이 하나의 설명이다 */
.idbox p{margin:0;font-size:16px;font-weight:400;line-height:28px;color:var(--g600)}
.idbox .btn{align-self:flex-end;margin-top:32px;gap:4px}
.idbox .btn svg{width:16px;height:16px}
@media(max-width:860px){.idbox{padding:24px}}

/* ═══ 진행 중인 캠페인 섹션 ═══ */
/* 캠페인 판 - 아래를 거리 띠가 막는다. 띠 높이만큼 칸을 더 비워 글이 지붕에 닿지 않게 한다 */
/* 띠 높이를 135로 먼저 정하고, 거기서 그림 한 장의 폭이 나온다(446:2172).
   한 장으로는 화면을 못 채우니 가로로 이어 붙인다 — 지붕까지 온전히 보이는 상점가 띠 */
.camp{padding:var(--sec-y) 0 calc(var(--sec-y) + var(--strip-gap) + var(--strip)); position:relative;
  --strip:135px; --strip-u:calc(var(--strip) / 256); --strip-w:calc(2600 * var(--strip-u)); --strip-gap:56px}
/* 거리 띠 - 상점가 한 줄이 화면 끝까지 이어져, 밝은 면과 어두운 면의 경계가 된다.
   wide_street.png는 2172x724 캔버스인데 그림은 y145~595(451px)에만 있고 위아래가 비어 있다.
   띠 높이(135px)를 그림이 그려진 높이(446)에 맞추면 나머지 치수가 다 따라온다(--strip-u).
   이어 붙일 때 이음매가 보이지 않도록 wide_street_tile.webp를 쓴다 — 원본의 흐린 좌우 끝을
   잘라내고 거울상을 덧붙인 4280폭 타일이라, 맞붙는 자리가 언제나 자기 자신이다.
   자르지 않고 통째로 반복하므로 지붕까지 다 보인다. */
.camp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--strip);pointer-events:none;
  background:url("/assets/wide_street_tile.webp") repeat-x;
  filter:saturate(.85) brightness(1.02);opacity:.92;
  background-size:var(--strip-w) auto;
  /* 타일 실측 2600×440 — 지붕 y101 · 지면선 y356(알파 실측). 그 사이만 담아 지붕은 윗변에, 지면선은 밑변(검정 면)에 딱 닿는다 */
  background-position:center calc(-101 * var(--strip-u))}
@media(max-width:860px){.camp{--strip-gap:32px}}
@media(max-width:760px){.camps{grid-template-columns:minmax(0,1fr)}}
/* 글은 위, 티켓은 아래에 가로로 편다 — 옆에 세우면 한 장이 300px대로 좁아져 티켓이 안 된다 */
.camp-grid{display:block}
.camp-copy{max-width:760px}
.camp-copy .note{display:inline-flex;align-items:center;gap:8px;text-align:left}
.camp-copy h2{font-size:clamp(28px,4.4vw,48px);font-weight:600;line-height:1.18;letter-spacing:-.04em;color:var(--g900);margin:0}
.camp-copy p{font-size:16px;font-weight:400;line-height:28px;color:var(--g600);margin:24px 0 0}
.camp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:32px 0 0;padding:0}
.camp-facts div{display:flex;flex-direction:column;gap:4px}
.camp-facts dt{font-size:12.5px;font-weight:600;color:var(--g500)}
.camp-facts dd{margin:0;font-size:17px;font-weight:700;color:var(--g900);letter-spacing:-.02em}
.cta-row.left{justify-content:flex-start}
.camp-live{display:block;text-decoration:none;color:inherit;border-radius:24px;padding:24px 24px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.6));box-shadow:none;
  transition:transform .35s var(--ease)}
.camp-live:hover{transform:translateY(-3px)}
.camp-live .cl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.camp-live .cl-head b{font-size:17px;font-weight:700;color:var(--g900);letter-spacing:-.02em}
.camp-live .cl-head span{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue-deep)}
.camp-live .rank{margin-top:8px;padding-top:8px}
/* 바 눈금은 하단 데모 카드와 같은 간격 */
.camp-live .rank .track{height:9px}
.camp-live .rank .fill{background-image:repeating-linear-gradient(to right,currentColor 0 2px,transparent 2px 4px)}
.camp-live .cl-more{display:inline-flex;align-items:center;gap:4px;margin-top:16px;font-size:14px;font-weight:600;color:var(--g700)}
.camp-live .cl-more svg{width:16px;height:16px}
@media(max-width:860px){.camp-grid{grid-template-columns:minmax(0,1fr);gap:32px}.camp{padding-bottom:88px}}

/* 면 경계 — 목업대로 **테두리 없음**. 층은 면과 그림자로만 낸다.
   링을 둘러 봤더니 카드가 상자로 읽혀 목업의 부드러운 결이 사라졌다. */

/* 어두운 면 위의 레일 — 값만 뒤집고 조형은 그대로 둔다 */

/* ═══ 기존 홍보 사업과의 대조(#compare) ═══
   세 기둥이다 — [구분] [기존 홍보 사업] [AI Dure].
   기둥을 따로 세우면 행 높이를 맞추려고 `min-height`를 줘야 하고, 그러면 내용이 짧은
   칸에 빈 자리가 남는다. **격자 한 벌**로 짜서 행 높이를 내용이 정하게 한다.
   AI Dure 면은 칸마다 칠하지 않고 3열 전체를 덮는 판 하나로 깐다. */
.compare{padding:var(--sec-y) 0;background:linear-gradient(180deg,#fff 0%,var(--g50) 14%,var(--g50) 86%,#fff 100%)}
.cmp{position:relative;display:grid;grid-template-columns:132px minmax(0,0.85fr) minmax(0,1.15fr);   /* 답이 있는 쪽을 넓게 */
  grid-template-rows:auto repeat(5, auto);   /* 판이 -1까지 뻗으려면 행이 명시돼 있어야 한다 */
  column-gap:clamp(16px,2vw,32px);margin-top:56px}
/* AI Dure 면 — 3열을 **머리글부터 마지막 행까지** 한 판으로 덮는다.
   행마다 칠하면 이음매가 생기고, 머리글만 칠하면 제목 뒤에만 색이 뜬다. */
.c-panel{grid-column:3;grid-row:1 / -1;border-radius:var(--r-card);overflow:hidden;pointer-events:none;
  background:linear-gradient(168deg,rgba(255,228,217,.46) 0%,rgba(255,237,231,.34) 44%,rgba(255,255,255,.26) 100%);
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.c-panel::before{content:"";position:absolute;inset:0;
  background:radial-gradient(52% 40% at 50% 0%,rgba(240,86,58,.08),transparent 72%)}
.c-h,.c-k,.c-was,.c-now{grid-row:var(--r)}   /* 행 번호는 마크업이 --r로 준다 */
.c-h{display:flex;align-items:center;padding:16px 24px 8px;font-size:15px;font-weight:700;letter-spacing:-.015em}
.c-h-k{grid-column:1;padding-left:0;padding-right:0}
/* 마지막 행 — 판 아래 여백을 칸 패딩으로 만든다(판에 따로 주면 격자가 어긋난다) */
.c-now:last-of-type,.c-was:last-of-type,.c-k:last-of-type{padding-bottom:24px}
.c-h-was{grid-column:2;color:var(--g500)}
.c-h-now{grid-column:3;color:var(--blue-deep);position:relative;z-index:1}

/* 칸 — 위아래 같은 값. 행 높이는 그 행에서 가장 긴 문장이 정한다 */
.c-k,.c-was,.c-now{display:flex;align-items:flex-start;gap:8px;padding:16px 24px}
.c-k{grid-column:1;justify-content:center;padding-left:0;padding-right:0}
.c-was{grid-column:2}
.c-now{grid-column:3;position:relative;z-index:1}
.c-k span{font-size:14px;font-weight:700;color:var(--g900);text-align:center}
.c-was p,.c-now p{flex:1 1 auto;min-width:0;margin:0;font-size:14.5px;line-height:24px}
.c-was p{color:var(--g600)}
.c-now p{color:var(--g800)}
.c-now p b{font-weight:700;color:var(--g900)}

/* 행 사이 선 — 칸 가장자리까지 가지 않게 안쪽으로 물린다 */
.c-k:not([style*="--r:2"])::before,
.c-was:not([style*="--r:2"])::before,
.c-now:not([style*="--r:2"])::before{content:"";position:absolute;top:0;height:1px}
.c-k,.c-was,.c-now{position:relative}
.c-k:not([style*="--r:2"])::before{left:12px;right:12px;background:var(--g200)}
.c-was:not([style*="--r:2"])::before{left:22px;right:22px;background:var(--g200)}
.c-now:not([style*="--r:2"])::before{left:22px;right:22px;background:rgba(240,86,58,.16)}

/* 기호 — 문장 첫 줄의 가운데. 한글은 글자 상자 위 여백이 커서 계산값보다 조금 올린다 */
/* 아이콘은 첫 줄의 중심에 선다 — (행간 23.2 − 아이콘 16) / 2 = 3.6px.
   이건 간격이 아니라 **광학 보정**이라 8pt 격자에 맞추지 않는다(맞추면 눈에 띄게 어긋난다). */
.c-was .ic,.c-now .ic{flex:0 0 auto;margin-top:3.6px;width:16px;height:16px;border-radius:50%;position:relative}
.c-was .ic{background:var(--g200)}
.c-was .ic::before,.c-was .ic::after{content:"";position:absolute;left:4px;top:7.2px;
  width:8px;height:1.6px;border-radius:1px;background:var(--g500)}
.c-was .ic::before{transform:rotate(45deg)}
.c-was .ic::after{transform:rotate(-45deg)}
.c-now .ic{background:var(--blue)}
/* 체크 — 45도로 돌린 꺾쇠는 회전 뒤 무게중심이 왼쪽 아래로 쏠린다.
   left/top으로 잡지 않고 중심에서 옮겨 광학 중심을 맞춘다. */
.c-now .ic::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:3.6px;
  border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;
  transform:translate(-50%,-62%) rotate(-45deg)}

/* 좁은 폭에서도 **표 구조를 그대로 둔다** — 세 기둥이 나란해야 표로 읽힌다.
   기둥을 접으면 「구분」이 줄머리로 떨어지고 AI Dure 칸만 행마다 따로 칠해져
   표가 아니라 카드 더미가 된다. 여기서는 기둥 폭과 글자만 줄인다. */
@media(max-width:860px){
  .compare{padding:80px 0}
  .cmp{grid-template-columns:78px minmax(0,1fr) minmax(0,1fr);column-gap:8px;margin-top:40px}
  .c-h{padding:16px 16px 8px;font-size:12.5px}
  .c-k,.c-was,.c-now{padding:16px 16px}
  .c-k{padding-left:0;padding-right:0}
  .c-now:last-of-type,.c-was:last-of-type,.c-k:last-of-type{padding-bottom:16px}
  .c-k span{font-size:12.5px;letter-spacing:-.02em}
  .c-was p,.c-now p{font-size:12.5px;line-height:20px}
  .c-was:not([style*="--r:2"])::before,.c-now:not([style*="--r:2"])::before{left:12px;right:12px}
  .c-k:not([style*="--r:2"])::before{left:0;right:0}
  .c-was .ic,.c-now .ic{width:13px;height:13px;margin-top:3.2px}   /* (19.4 − 13) / 2 */
  .c-was .ic::before,.c-was .ic::after{left:3.2px;top:5.8px;width:6.5px}
  .c-now .ic::after{width:5.5px;height:2.8px}
}
@media(max-width:480px){
  .cmp{grid-template-columns:62px minmax(0,1fr) minmax(0,1fr);column-gap:8px}
  .c-h{padding:16px 8px 8px;font-size:11.5px}
  .c-k,.c-was,.c-now{padding:8px 8px}
  .c-k{padding-left:0;padding-right:0}
  .c-k span{font-size:11.5px}
  .c-was p,.c-now p{font-size:11.5px;line-height:16px}
  .c-was:not([style*="--r:2"])::before,.c-now:not([style*="--r:2"])::before{left:9px;right:9px}
}

/* ═══ 전역 스타일 누수 차단 ═══
   `app.html`이 tokens.css·v3.css를 전 화면에 깔기 때문에, 거기 정의된 도구 화면용
   `.lb`(리더보드 판)·`.card`(콘솔 카드)가 **이름이 같다는 이유만으로** 랜딩까지 온다.
   랜딩의 `.lb`는 순위 이름이고 `.card`는 덱의 배경판이라 판이 아니다.
   이름을 바꾸면 목업과 갈리므로 값만 되돌린다. */
.rank .lb{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.deck .card{border:0;padding:0;background:none}
.deck .c-back{background:linear-gradient(150deg,#ffefe9,#f7f6f4 58%,#eef1f4)}
.deck .c-mid{background:linear-gradient(165deg,#fff,#eceae6);padding:8px}
.deck .c-front{background:#fff;padding:24px 32px 24px}

/* 덱 — 배경 카드가 섹션 밖으로 삐져나오지 않게 가둔다.
   `.c-mid`가 top:-12%라 위로 넘치는데, 넘친 조각이 앞 섹션 위에 떠 보였다. */
.showcase{overflow:clip}


/* ═══ 진행 중인 캠페인 카드 ═══
   CTA는 **카드 안**에 둔다. 밖에 두면 어느 캠페인의 버튼인지 갈리지 않는다.
   위계는 셋이다 — 상태(작게) · 캠페인명(가장 크게) · 남은 기간(숫자로 크게, 오른쪽). */
.camps{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
@media(max-width:700px){.camps{grid-template-columns:minmax(0,1fr)}}
.camp-card{z-index:1}
/* 카드 = 티켓. 목업 쿠폰(`목업/coupon.html` .cpn)과 **같은 문법**으로 양옆을 뚫는다 —
   두 원을 마스크로 겹쳐(intersect) 빼내므로 뒤가 그대로 비치고, 테두리로 흉내 낸 홈이 아니다.
   --cy는 카드 **아래에서 절취선까지의 거리**다. 아래 묶음(버튼 48 + 안쪽 여백 24 + 절취선 아래 18)이
   고정 높이라, 카드 키가 달라져도 구멍과 절취선이 항상 같은 줄에 선다. */
.camp-card{position:relative;display:flex;flex-direction:column;padding:24px 24px 24px;
  border-radius:24px;--nr:16px;
  /* 절취선 자리 = 카드 아래에서 (버튼 높이 + 안쪽 여백 24 + 버튼 위 숨 20). 구멍도 점선도 이 값 하나를 본다 */
  --cta-h:48px;--cy:calc(var(--cta-h) + 44px);
  transition:transform .35s var(--ease),filter .35s var(--ease);
  /* 배경 블러는 걷었다 — 뒤의 글자·그림이 끌려 들어와 찌그러져 보였다.
     대신 면 자체를 올려 카드가 스스로 서게 한다 */
  background:linear-gradient(150deg,rgba(255,241,236,.88),rgba(255,255,255,.72));
  /* 바깥 그림자는 box-shadow가 아니라 filter로 준다 - box-shadow는 네모(border-box)를 따라가지만
     drop-shadow는 **마스크로 뚫린 알파 모양**을 따라간다. 그래야 홈이 진짜 파인 것으로 읽힌다. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.62);
  /* 그림자는 한 겹이 아니라 세 겹이다 — 가까운 그림자는 좁고 진하게, 먼 그림자는 넓고 옅게.
     한 겹만 주면 카드가 종이가 아니라 판때기로 보인다 */
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.75))
         drop-shadow(0 2px 4px rgba(42,38,34,.05))
         drop-shadow(0 8px 16px rgba(42,38,34,.07))
         drop-shadow(0 22px 44px rgba(42,38,34,.10));
  -webkit-mask-image:radial-gradient(circle var(--nr) at left 0 bottom var(--cy),transparent 97%,#000 100%),
                     radial-gradient(circle var(--nr) at right 0 bottom var(--cy),transparent 97%,#000 100%);
          mask-image:radial-gradient(circle var(--nr) at left 0 bottom var(--cy),transparent 97%,#000 100%),
                     radial-gradient(circle var(--nr) at right 0 bottom var(--cy),transparent 97%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.camp-card:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.75);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 20px 44px rgba(42,38,34,.18))}
.camp-card>*{position:relative;z-index:1}
/* 절취선 - 구멍 두 개를 잇는다. **흐름에서 빼** --cy에 못 박으므로 버튼이 쌓이든 말든
   구멍 한가운데를 지난다. 두 구멍 안쪽에서 시작해 홈에 물리지 않는다. */
.camp-cut{position:absolute;left:calc(var(--nr) + 6px);right:calc(var(--nr) + 6px);
  bottom:calc(var(--cy) - .5px);height:1px;margin:0;
  background:repeating-linear-gradient(to right,rgba(240,86,58,.34) 0 6px,transparent 6px 12px)}

.camp-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.camp-st{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--g500)}
.camp-card[data-status='active'] .camp-st{color:var(--blue-deep)}
.camp-card[data-status='settling'] .camp-st{color:var(--warn)}
/* 남은 기간 — 캠페인명보다 뒤에 읽혀야 한다. 800/26px은 이름과 무게가 맞먹어
   어느 쪽이 주인공인지 흐려졌다. 한 급 낮춰 보조 수치로 되돌린다. */
.camp-dday{font-size:20px;font-weight:700;letter-spacing:-.03em;color:var(--blue-deep);line-height:1}
/* 「사업 준비중」 — 숫자가 아니라 상태다. D-day의 자리를 쓰되 크기와 색으로 구분한다
   (20px 코랄로 두면 남은 기간처럼 읽히고, 없는 카운트다운을 세는 것처럼 보인다) */
.camp-dday.prep{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--g500)}
/* 히어로·섹션 같은 규격 한 벌 */
.camp-nm{margin:12px 0 0;font-size:clamp(17px,1.8vw,20px);font-weight:700;letter-spacing:-.03em;line-height:1.3;color:var(--g900)}
/* CTA — 카드 안 맨 아래. 주 버튼이 넓고 보조가 좁아 위계가 보인다.
   margin-top 41 = 이름→절취선 20 + 선 1 + 절취선→버튼 20. 절취선은 흐름 밖(--cy)이라 이 값이 그 둘을 정한다 */
.camp-cta{display:flex;gap:8px;margin-top:41px}
.camp-cta .btn{height:48px;padding:0 16px;font-size:15.5px;justify-content:center}
.camp-cta .btn-1{flex:1.45 1 0}
.camp-cta .btn-2{flex:1 1 0;background:rgba(255,255,255,.72)}
.camp-cta .btn-2:hover{background:#fff}
@media(max-width:560px){.camp-cta{flex-direction:column}.camp-cta .btn{flex:1 1 auto}
  .camp-card{--cta-h:106px}}   /* 48 + 10 + 48 */

/* 본문 — 제목 아래 설명문은 regular(400). medium은 라벨·버튼에만 쓴다 */
.sec-head p,.showcase .copy p,.camp-copy p,.hero .sub,
.hcard p,.role p,.node p,.tile .td,.fdesc,.finale .lead{font-weight:400}

/* ═══ 브랜드 스토리(/story) ═══
   랜딩과 같은 조형을 쓰되 이 페이지에만 있는 조립 셋을 더한다 —
   설명 판(.panel) · 혼자/함께 대조(.versus) · 원칙 목록. */
.story-hero{padding:calc(var(--hd) + 96px) 24px 72px;text-align:center;
  background:linear-gradient(180deg,var(--g50) 0%,var(--g50) 42%,#fdfcfb 74%,#fff 100%)}
.sub-p{font-size:16px;font-weight:400;line-height:28px;color:var(--g600);margin:24px auto 0;max-width:720px;text-wrap:balance}
/* 스토리 히어로 - 랜딩 히어로와 **같은 계단**을 쓴다.
   이 페이지에만 있는 이름을 쓰면 규칙이 안 붙어 브라우저 기본값(h1 32px)으로 떨어진다. */
/* 랜딩 히어로(74)보다 한 급 낮춘다 — 여기는 한 줄이 길어서 74로 두면
   글이 화면 끝(1392/1440)까지 닿아 여백이 없다. 무게도 본문 제목과 같은 600 */
.story-hero h1{font-size:clamp(30px,4.2vw,54px);font-weight:600;line-height:1.2;
  letter-spacing:-.038em;color:var(--g900);margin:0;max-width:1100px;margin-inline:auto}

/* 마을 그림 - 히어로의 바닥. dure.png는 1672x941 캔버스에 그림이 y251~800(550px)만 차 있어
   그냥 앉히면 아래에 빈 칸이 생긴다. 아래 여백(140px)만큼 끌어내려 지면에 닿게 한다.
   랜딩 골목과 같은 하단 페이드 + 바닥 그림자를 쓴다 - 두 페이지가 같은 세계로 읽혀야 한다. */
/* 랜딩 히어로와 같은 규율 — 화면 한 장 높이를 잡고, 그림은 **화면 바닥에서 12px** 띄워 못 박는다.
   위 글과의 거리는 남는 높이가 알아서 정한다(겹쳐도 상관없다).
   --vw는 그림 폭. dure.png는 1672x941 캔버스에 그림이 y251~795 만 있어,
   아래 빈 칸(145px = 폭의 0.0867)만큼 더 내려야 지면이 바닥에 닿는다. */
.story-hero .eyebrow{margin-bottom:32px}
/* 마을 그림이 글보다 먼저 온다 — 이름의 출처를 그림으로 먼저 말하는 자리다.
   dure.png는 1672x941 캔버스에 그림이 y251~810에만 있어 위아래 빈 칸을 잘라 쓴다
   (칸 높이 = 폭 x 559/1672, 그림을 폭 x 251/1672 만큼 끌어올린다). */
.story-hero{position:relative;overflow:hidden;--vw:min(460px,62vw)}
.village{position:relative;width:var(--vw);height:calc(var(--vw) * .3343);
  margin:0 auto 40px;overflow:hidden;line-height:0;pointer-events:none}
.village img{position:absolute;left:0;top:calc(var(--vw) * -.1501);width:100%;height:auto;display:block}
.story-hero .sub{font-size:clamp(16px,1.9vw,20px);font-weight:400;line-height:1.6;color:var(--g600);
  margin:24px auto 0;max-width:640px;text-wrap:balance}
.story-hero .lead{font-size:18px;font-weight:400;line-height:28px;color:var(--g500);
  margin:24px auto 0;max-width:680px;text-wrap:balance}

/* 3연 카드 */
.grid.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.grid .card{padding:24px 24px;border-radius:var(--r-card);
  background:rgba(255,255,255,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cap{font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--g500)}
.grid .card h3{margin:8px 0 0;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--g900)}
.grid .card p{margin:8px 0 0;font-size:14.5px;font-weight:400;line-height:24px;color:var(--g700)}
@media(max-width:860px){.grid.g3{grid-template-columns:minmax(0,1fr)}}

/* 예외 안내 - 아이브로우는 페이지 공통 .note 규격 */
.notice{margin-top:24px;padding:24px 24px;border-radius:var(--r-card);background:var(--g50)}
.nt{display:block;font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--blue-deep)}
.notice p{margin:8px 0 0;font-size:15.5px;font-weight:400;line-height:28px;color:var(--g600)}

/* 서명 - 페이지에서 가장 작은 말 */
.sign{margin-top:40px;font-size:13px;font-weight:400;color:var(--g500)}
.sign b{font-weight:600;color:var(--g700)}
/* 마무리 가운데 정렬 */
.finale .in.center{text-align:center}
.finale .in.center .lead{margin-left:auto;margin-right:auto;max-width:640px}
.finale .in.center .cta-row{justify-content:center}
.panel{margin-top:48px;padding:32px 32px;border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.72))}
.panel h3{font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.03em;color:var(--g900)}
.panel p{margin:16px 0 0;font-size:15.5px;font-weight:400;line-height:28px;color:var(--g600)}
/* 혼자 들 때 / 함께 들 때 — 답이 있는 쪽만 면을 준다(대조표와 같은 규율) */
.versus{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(16px,3vw,32px);margin-top:48px;align-items:start}
.vcol{padding:32px 32px;border-radius:var(--r-card)}
.vcol.new{background:linear-gradient(168deg,rgba(255,228,217,.46),rgba(255,255,255,.26));
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.vh{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--g500)}
.vcol.new .vh{color:var(--blue-deep)}
.vcol h3{margin:16px 0 0;font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.03em;color:var(--g900)}
.vcol ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.vcol li{position:relative;padding-left:24px;font-size:14.5px;font-weight:400;line-height:24px;color:var(--g600)}
.vcol.old li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:2px;border-radius:1px;background:var(--g400)}
.vcol.new li{color:var(--g800)}
.vcol.new li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;background:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 7.4 5.7 10.5 11.4 3.9'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 7.4 5.7 10.5 11.4 3.9'/%3E%3C/svg%3E") center / 14px 14px no-repeat}
@media(max-width:860px){.versus{grid-template-columns:minmax(0,1fr)}}

/* ═══ 지역 적용모델(#models) ═══ */
.models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.model{position:relative;padding:32px 32px;border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.72));
  transition:transform .3s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.model:hover{transform:translateY(-3px)}
.model .k{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--blue-deep)}
/* 넷 다 한 줄에 들어오는 크기다 — 선택 표식은 「모델 01」 줄 옆이라 제목 폭을 뺏지 않는다 */
.model h3{margin:8px 0 0;font-size:clamp(17px,1.5vw,21px);font-weight:700;letter-spacing:-.032em;color:var(--g900)}
.model .k{padding-right:34px}
.model p{margin:8px 0 0;font-size:15px;font-weight:400;line-height:24px;color:var(--g600)}
.model .opt{margin-top:16px;padding-top:16px;font-size:13.5px;color:var(--g500);
  box-shadow:inset 0 1px 0 rgba(42,38,34,.08)}
/* 모델 넷은 **고르는 것**이다 — 칸마다 선택 표식을 두고, 가리키면 그 표식이 찬다 */
.model::after{content:"";position:absolute;right:28px;top:30px;width:20px;height:20px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--g300);
  transition:box-shadow .25s var(--ease)}
.model:hover::after{box-shadow:inset 0 0 0 1.5px var(--blue),inset 0 0 0 7px var(--blue)}
@media(max-width:860px){.models{grid-template-columns:minmax(0,1fr)}}

/* ═══ 플랫폼 비전(#vision) — 단계는 셋이고 순서가 뜻이다 ═══ */
/* 로드맵 — 칸 셋을 그리는 대신 점 셋을 선으로 잇는다. 네모가 줄어야 순서가 보인다 */
.road{position:relative;--rgap:clamp(24px,4vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--rgap);margin:8px 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:var(--g50);
  box-shadow:inset 0 0 0 4.5px var(--blue),0 0 0 5px var(--g50)}
/* 선은 판을 넘어 화면 끝까지 간다 — 로드맵은 여기서 시작해 여기서 끝나는 것이 아니다.
   점(.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(19px,2.1vw,23px);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}
}

/* ═══ 마무리 3원칙 ═══ */

/* 섹션 세로 리듬 — 예외는 둘뿐이다.
   히어로는 헤더를 비켜 앉아야 해서 위가 넓고, 마무리는 푸터로 이어져 아래가 없다. */
@media(max-width:860px){:root{--sec-y:76px}}
.compare{padding:var(--sec-y) 0}

/* ═══ 골목 그림 - 히어로의 바닥 ═══
   가로로 긴 상점가 한 줄이라 화면 전체 폭으로 깔고, 히어로가 흰색으로 풀리는
   자리에 앉힌다. 라이브 카드가 그림 위로 살짝 겹쳐 깊이를 만든다. */
.hero{position:relative}
@keyframes street-in{from{opacity:0;transform:translateX(-50%) translateY(22px)}
                     to{opacity:1;transform:translateX(-50%)}}
.street{animation:street-in .9s var(--ease) 1.45s both}
@media(prefers-reduced-motion:reduce){.street{animation:none}}
.street{position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:0;
  pointer-events:none;line-height:0}
.street img{display:block;width:100%;height:auto;position:relative;z-index:1;
  /* 배경 그림이라 앞으로 나오면 안 된다 — 채도만 낮추고 살짝 비운다(형태는 그대로) */
  filter:saturate(.85) brightness(1.02);opacity:.92;
  /* 아래로 갈수록 짧고 급하게 풀어 흰 지면과 이어 붙인다.
     길게 풀면 그림이 흐려 보이고, 짧게 풀어야 바닥에 닿은 것처럼 읽힌다. */
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,.55) 95%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,.55) 95%,transparent 100%)}
/* 바닥 그림자 - 건물이 지면에 놓여 있게 한다. 가로로 길고 세로로 얕다 */
/* 두 겹이다 — 건물 바로 밑에 붙는 짧고 진한 그림자(접지)와, 넓게 퍼지는 옅은 그림자(공기). 한 겹으로는 떠 보이거나 뭉개진다(사용자 지시: 그림 아래 그림자) */
/* 건물 아래 **잔상** — 그림을 세로로 뒤집어 옅게 깔고 아래로 빨리 풀어 물에 비친 듯 보이게 한다(사용자 확정: 타원 그림자·붉은 기 그림자를 거쳐 「다시 이 상태로」).
   PNG는 아래 4%가 비어 있어(알파 12~695/724행) 뒤집으면 그 빈 띠가 위로 오므로 요소를 92%에 놓아 비친 첫 줄이 건물 바닥(96%)에 닿게 한다.
   마스크는 뒤집기 전 좌표라 아래(=비친 뒤 위)가 진하고 위로 풀린다.
   선택자는 `.street img`(위치·z·불투명·마스크를 전부 건다)보다 특이도가 높아야 한다 — 아니면 흐름에 남아 감싸개 높이를 두 배로 만들어 CTA를 덮었다. */
.street img.street-refl{position:absolute;left:0;top:92%;width:100%;height:auto;z-index:0;display:block;pointer-events:none;
  transform:scaleY(-1);opacity:.22;filter:blur(1.2px) saturate(.5) brightness(1.04);
  -webkit-mask-image:linear-gradient(to top,#000 4%,rgba(0,0,0,.35) 12%,transparent 24%);
          mask-image:linear-gradient(to top,#000 4%,rgba(0,0,0,.35) 12%,transparent 24%)}
.street::after{content:none}
@media(prefers-reduced-motion:no-preference){.street img.street-refl{opacity:0;animation:street-shadow-in .9s var(--ease) 1.7s both}}
@keyframes street-shadow-in{to{opacity:.22}}
.hero-top{position:relative;z-index:2}
/* 그림은 늘 히어로 바닥에 못을 박는다(--ground). 다만 **화면 한 장에 맞추는 것은
   가로가 세로보다 긴 화면에서만** 한다 — 세로로 긴 화면(모바일)에서 창 높이를 채우면
   글이 위로 몰리고 그림만 덩그러니 남는다. 거기서는 흐름에 자리를 비워 두고 그 안에 앉힌다.
   그림 가로폭은 어느 쪽이든 창 **너비**만 따라간다(--sw). */
.hero{--sw:min(480px,76vw);padding-bottom:calc(var(--sw) * .3333 + var(--ground,12px))}
.street{bottom:var(--ground,12px);width:var(--sw)}
@media(min-aspect-ratio:1/1) and (min-width:860px){
  .hero{min-height:max(86svh,760px);padding-bottom:0;
    display:flex;flex-direction:column;justify-content:center}
  /* 그림이 앉을 자리만 비워 두고, 그 위 공간의 가운데에 글이 선다 */
  .hero-top{padding-bottom:calc(var(--sw) * .3333 + var(--ground,12px))}
  /* 가운데로 세우므로 위 여백은 헤더를 비키는 만큼이면 된다 */
  .hero{padding-top:calc(var(--hd) + 24px)}
}
@media(max-width:860px){
  /* 좁은 화면에서는 골목이 화면을 채우도록 키우고 좌우를 잘라 낸다 */
  .hero{--sw:112%}
  .street{width:112%}
}
@media(prefers-reduced-motion:reduce){.street{transition:none}}

/* ═══ 브랜드 스토리(/story) — 절 머리와 판을 **랜딩 컴포넌트로** 맞춘다(사용자 지시) ═══
   절마다 제목 크기·정렬이 달랐다(어원 44/왼쪽, 왜 이 이름인가 26/왼쪽+문단 가운데, 누구를 위해 가운데…).
   머리는 전부 `.sec-head`(가운데)이고 2열 안에 서는 어원만 `.left`다. 카드 셋은 `.alt .wrap`의 2열 격자에
   갇혀 반쪽 폭에 몰렸다 — 그 두 절은 `.wrap`을 블록으로 풀어 카드가 전폭 3열로 선다. */
#origin .sec-head{margin:0}
#origin .sec-head h2,#why .sec-head h2,#method .sec-head h2{font-weight:600}
/* ── PRINCIPLES(#method) — 랜딩 LOCAL APPLICATION의 고르기 판을 **밝은 면으로** 옮긴 것(사용자 지시).
   원본은 검은 면이라 흰 반투명으로 칸을 세웠다 — 여기서는 바탕이 g50이므로 흰 면 + 헤어라인으로 같은 무게를 낸다.
   고른 칸은 코랄 테두리와 찬 표식, 그 아래에서 선이 내려와 고정 원칙 판으로 닿는다. ── */
#method .wrap{display:block}
#method .models{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
/* 카드도 같은 규칙이다. 덜어낼 양(--ot/--ob)은 그 자리의 글자 크기·행간이 정하므로 폭마다 다르다 —
   실측해서 적는다(PC 아이브로우 11 · 밑줄 낱말 2, 폰 6 · 3). */
#method .model{--p:40px;--ot:11px;--ob:2px;background:#fff;box-shadow:inset 0 0 0 1px var(--g200);
  padding:calc(var(--p) - var(--ot)) 32px calc(var(--p) - var(--ob))}
/* 번호는 자리를 따른다 — 폰에서 02·03이 자리를 바꾸므로 번호도 같이 바뀐다.
   `display:none`이라 읽어 주는 장치에도 한 번만 읽힌다 */
#method .n-ph{display:none}
/* 여기는 고르는 자리가 아니라 **이미 골라져 있는** 자리다 — 가리켜도 아무것도 변하지 않는다 */
#method .model:hover{transform:none;background:#fff;box-shadow:inset 0 0 0 1px var(--g200)}
#method .model:hover::after{box-shadow:inset 0 0 0 1.5px var(--g300)}
#method .model[aria-current="true"],#method .model[aria-current="true"]:hover{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(240,86,58,.42)}
#method .model[aria-current="true"]::after,#method .model[aria-current="true"]:hover::after{box-shadow:inset 0 0 0 1.5px var(--blue),inset 0 0 0 7px var(--blue)}
/* 고른 칸 밑에서 내려오는 가는 선 — 칸이 셋이라 칸 폭은 (100% - 간격×2)/3,
   `--pick`번째 칸의 가운데는 (pick - .5)×칸폭 + (pick - 1)×간격 */
#method .pick-line{--gap:16px;position:relative;height:clamp(40px,5vw,64px);margin:0}
/* 선은 1px이라 제자리에 두면 가운데가 반 칸 밀린다 — 점과 같은 축에 서도록 0.5 당긴다 */
#method .pick-line::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(240,86,58,.45);
  left:calc((var(--pick) - .5) * (100% - var(--gap) * 2) / 3 + (var(--pick) - 1) * var(--gap) - .5px)}
/* 점은 칸 밑변에 **정확히 걸친다**(사용자 지시) — 지름의 절반만큼 올려야 가운데가 선 위에 온다 */
#method .pick-line::after{content:"";position:absolute;top:-4.5px;width:9px;height:9px;border-radius:50%;background:var(--blue);
  left:calc((var(--pick) - .5) * (100% - var(--gap) * 2) / 3 + (var(--pick) - 1) * var(--gap) - 4.5px)}
/* ── 안 여백은 **글자 상자가 아니라 글자에 맞춘다** ──
   같은 값을 위아래에 줘도 위가 더 벌어져 보인다. 글줄 상자는 글자보다 크고(행간 여유),
   그 여유가 위에는 제목의 몫, 아래에는 본문의 몫으로 서로 다르게 붙기 때문이다.
   실측(폰·PC 같음): 첫 줄 제목은 잉크가 상자 위에서 9 아래에서 시작하고,
   마지막 줄 본문은 잉크가 상자 밑에서 2 위에서 끝난다 — 그만큼씩 덜어 준다.
   `--p`가 **눈에 보이는** 여백이다(위아래 같은 값). 옆은 따로 둔다. */
#method .pick{--p:clamp(28px,3.5vw,44px);position:relative;border-radius:var(--r-card);
  padding:calc(var(--p) - 9px) var(--p) calc(var(--p) - 2px);
  background:#fff;box-shadow:inset 0 0 0 1px rgba(240,86,58,.34)}
/* 판 안은 셋을 **세로선으로만** 나눈다(사용자 지시) — 번호도 머리말도 없다.
   선이 칸 사이 한가운데에 서도록 칸 간격을 0으로 두고 안 여백으로 띄운다(간격에 선을 그으면 한쪽으로 쏠린다) */
/* 판 규칙(.pick-grid)이 board 쪽에서 넘어와 위 여백 20을 얹고 있었다 — 판의 안 여백이 그만큼 커 보인 진짜 원인이다 */
#method .pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:0}
#method .pick-g{padding:0 clamp(18px,2.4vw,32px)}
#method .pick-g:first-child{padding-left:0}
#method .pick-g:last-child{padding-right:0}
#method .pick-g + .pick-g{border-left:1px solid var(--g200)}
#method .pick-g h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--g900)}
/* 칸 안 본문은 줄을 **고르게 채운다** — 전역 `p{text-wrap:pretty}`가 끝줄을 예쁘게 만들려고
   앞줄을 당겨 놓아, 긴 어절이 많은 칸(셋째)만 줄이 46쯤 짧게 끝났다(사용자 지적: 가로가 유독 짧아 보인다).
   어절은 그대로 지키고(`keep-all`) 줄 채우기만 보통으로 돌린다 — 실측 306 자리에서 260·263 → 287·275. */
#method .pick-g p{margin:8px 0 0;font-size:15px;font-weight:400;line-height:24px;color:var(--g600);text-wrap:wrap}
/* 폰 — 칸 셋을 한 줄로 세우면 글자가 뭉개지고, 한 열로 쌓으면 선이 **03 밑에서** 나와
   「03을 골랐다」로 읽힌다. 그래서 폰에서만 02와 03의 자리를 바꾸고 고른 칸(02)을 가로로
   채운다(사용자 지시) — 01·03이 윗줄에 나란히 서고, 그 아래 02가 한 판으로 누워
   가운데에서 선이 곧게 내려온다. 순서는 자리만 바뀌고 읽는 차례(DOM)는 그대로다. */
@media(max-width:860px){
  #method .models{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #method .model:nth-child(2){order:1;grid-column:1 / -1}
  #method .n-pc{display:none}
  #method .n-ph{display:inline}
  #method .pick-line{height:clamp(28px,5vw,40px)}
  #method .pick-line::before{left:calc(50% - .5px)}
  #method .pick-line::after{left:50%;margin-left:-4.5px;top:-4.5px}
  #method .pick-grid{grid-template-columns:minmax(0,1fr)}
  #method .pick-g{padding:0}
  #method .pick-g + .pick-g{border-left:0;border-top:1px solid var(--g200);margin-top:24px;padding-top:24px}
}
/* 윗줄 두 칸이 좁다 — 안 여백과 글자를 한 단 줄인다(캠페인 판과 같은 값) */
@media(max-width:620px){
  #method .model{--p:22px;--ot:6px;--ob:3px;padding:calc(var(--p) - var(--ot)) 14px calc(var(--p) - var(--ob))}
  #method .model h3{font-size:16px}
  #method .model p{font-size:13px;line-height:20px}
  #method .model .opt{margin-top:12px;padding-top:12px;font-size:12px}
  #method .model::after{right:14px;top:16px}
}
@media(max-width:599px){
  #method .pick{--p:28px;padding:calc(var(--p) - 9px) 18px calc(var(--p) - 2px);border-radius:14px}
  #method .model{border-radius:14px}
  #method .pick-g p{font-size:14px;line-height:22px}
  #method .pick-g + .pick-g{margin-top:20px;padding-top:20px}
}


/* 브랜드 스토리 — 모바일(PC는 그대로). 절 사이가 152px로 벌어져 빈 화면처럼 스크롤됐고,
   판·카드의 위 여백(48)도 폰에서는 과했다. 제목은 두 줄이 고르게 나뉘게 균형을 준다. */
@media(max-width:599px){
  #origin,#why,#method{--sec-y:56px}
  .story-hero{padding-bottom:48px}
  .story-hero h1{text-wrap:balance}
  .story-hero .lead,.story-hero .sub{margin-top:18px}
  #origin .panel,.versus{margin-top:28px}
  .grid .card,.panel,.vcol,.notice{padding:20px 18px}
  .sec-head{margin-bottom:32px}
  #origin .sec-head{margin-bottom:0}
}

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

/* 본문 문단의 줄바꿈 — 한글은 어절 단위로 끊는다(`keep-all`): 「측정하는 / 데 한계가」처럼 어절 가운데가 갈리면 읽기가 막힌다.
   손 줄바꿈(.brk)이 숨는 900 아래에서는 균형 줄바꿈(balance)도 끈다 — 줄 길이를 맞추느라 문단이 네모 덩이로 보였다(사용자 지적).
   PC(≥900)는 손 줄바꿈이 살아 있어 그대로 둔다. */
.sec-head p,.chain-lead,.hscroll .head .lead,.story-hero .lead,.story-hero .sub,.sub-p,.finale .lead,.camp-copy p,.alt p{word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:899px){
  .sec-head p:not(.note),.chain-lead,.hscroll .head .lead,.story-hero .lead,.story-hero .sub,.sub-p,.finale .lead,.camp-copy p{text-wrap:pretty}
}

/* ═══ 브랜드 스토리 히어로 — 그림 뒤 부유하는 빛무리(사용자 지시: 허전함을 채우는 투명 그라데이션) ═══
   색은 마무리 절 블롭과 같은 둘(코랄 --blue · 라일락 148,160,205)에 옅은 살구 하나. 새 색을 만들지 않는다.
   그림(폭 --vw)을 기준으로 앉히고, KEY POINT 빛무리처럼 천천히 떠다닌다. 움직임을 줄인 설정에서는 멈춘다. */

/* ═══ 모바일 상자 자(≤599) — 모든 페이지 공통(사용자 지시). 캠페인 낱장에서 정한 값을 그대로 쓴다:
   카드·판은 안 여백 20px 18px, 목록 행은 14px 16px, 라운드는 14. PC 값은 건드리지 않는다. ═══ */
@media(max-width:599px){
  .model,.tile.data,.grid .card,.panel,.vcol,.notice,.node,.camp-card,.role .body,.lg-card,.contact-card{padding:20px 18px}
  .role .vis{padding:18px;min-height:0}
  .model,.tile,.grid .card,.panel,.vcol,.notice,.node,.camp-card,.role,.hcard,.lg-card,.contact-card{border-radius:14px}
  .hcard .vis{border-radius:10px}
  .vcol ul{gap:12px}
  .grid.g3,.models,.cols,.col,.versus{gap:10px}
}

/* 폰에서 데모 타일(.tile.demo)은 높이 0으로 접히는데 격자 간격은 그대로 먹어 타일 사이가 10/20으로 갈렸다(실측 390).
   접힌 것은 자리에서도 빼낸다 — 모든 타일 사이가 10으로 같아진다. */
@media(max-width:599px){.tile.demo{display:none}}

/* 마을 그림은 캔버스가 흰색(불투명)이라 뒤의 빛무리를 다 가렸다(캡처 실측). 곱하기 혼합이면 흰 바탕은 사라지고
   그림만 남아 빛무리가 그림 사이로 비친다. 바탕(g50/#fff)이 밝아서 그림 색은 거의 그대로다. */
.story-hero .village img{mix-blend-mode:multiply}

/* ═══════════════════════════════════════════════════════════════════
   모바일(≤599) — 캠페인 낱장(board.css)에서 정한 규칙을 랜딩에도 **그대로** 적용(사용자 지시:
   화성 페이지에 조정한 것이 메인에는 안 됐다). 원본은 board.css의 같은 이름 블록이고 `.bd` 접두사만 뺐다.
   ⚠ 한쪽을 고치면 다른 쪽도 같이 고친다.
   ═══════════════════════════════════════════════════════════════════ */
/* ── 모바일 리듬(사용자 지시: PC는 그대로, 모바일만 친화적으로) ──
   랜딩은 860 아래에서 절 위아래 여백을 76px로 두는데, 폰에서는 절과 절 사이가 152px로 벌어져 빈 화면처럼 스크롤된다.
   캠페인 낱장은 599 아래에서 56px(사이 112px)로 조인다. 랜딩 자체는 건드리지 않는다(이 시트는 캠페인 낱장만 든다). */
@media(max-width:599px){
  :root{--sec-y:56px}
  /* 가로 흐름 절의 머리만 랜딩 여백(24)을 들고 있어 다른 절(20)보다 4px 안으로 들어갔다 */
  .hscroll .head{padding-left:20px;padding-right:20px}
}
/* ── 모바일 대조표(사용자 지시): 왼쪽에 기준, 오른쓱에 「V 본문」 그 밑에 「X 본문」 한 줄씩 ──
   PC의 3열 격자를 폰에서는 [기준 | 답 두 줄]로 다시 짠다. 행 번호는 마크업의 --r(2~6)이 그대로 주므로
   행마다 자리를 못 박는다 — 기준은 두 줄을 걸치고, AI Dure(V)가 위, 기존(X)이 아래다. */
@media(max-width:599px){
  .cmp{grid-template-columns:76px minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;column-gap:12px;margin-top:32px}
  .c-h,.c-panel{display:none}
  .c-k{grid-column:1;justify-content:flex-start;align-items:center;padding:14px 0}
  .c-k span{text-align:left}
  .c-now{grid-column:2;padding:14px 0 4px}
  .c-was{grid-column:2;padding:0 0 14px}
  .c-k[style*="--r:2"]{grid-row:1 / span 2}
  .c-now[style*="--r:2"]{grid-row:1}
  .c-was[style*="--r:2"]{grid-row:2}
  .c-k[style*="--r:3"]{grid-row:3 / span 2}
  .c-now[style*="--r:3"]{grid-row:3}
  .c-was[style*="--r:3"]{grid-row:4}
  .c-k[style*="--r:4"]{grid-row:5 / span 2}
  .c-now[style*="--r:4"]{grid-row:5}
  .c-was[style*="--r:4"]{grid-row:6}
  .c-k[style*="--r:5"]{grid-row:7 / span 2}
  .c-now[style*="--r:5"]{grid-row:7}
  .c-was[style*="--r:5"]{grid-row:8}
  .c-k[style*="--r:6"]{grid-row:9 / span 2}
  .c-now[style*="--r:6"]{grid-row:9}
  .c-was[style*="--r:6"]{grid-row:10}
  /* 구분선은 묶음 위에 한 줄 — 기준 칸과 V 줄이 같은 높이에서 시작하니 둘의 ::before가 한 선으로 이어진다 */
  .c-was::before{display:none}
  .c-k::before,.c-now::before{content:"";left:0;right:0;background:var(--g200)}
  .c-k[style*="--r:2"]::before,.c-now[style*="--r:2"]::before{display:none}
  .c-was p,.c-now p{font-size:14px;line-height:22px}
  /* 머리글(기존 홍보 사업 / AI Dure)을 숨겼으니 줄마다 누구 말인지 적는다(사용자 지시): V 앞에 「두레」, X 앞에 「기존 홍보」 */
  .c-now p::before{content:"두레 ";font-weight:700;color:var(--blue-deep)}
  .c-was p::before{content:"기존 홍보 ";font-weight:600;color:var(--g500)}
}
/* ── 모바일 가로 흐름(사용자 지시): 카드가 잘리기 시작하는 900 아래부터 곧장 이 배치다 — 옆으로 미는 줄(스냅 스크롤)은 쓰지 않는다.
   01~04 · 05~08 두 줄을 **가로로** 세우고, 왼쪽 끝(01↔05)에 「<」,
   오른쪽 끝(04↔08)에 「>」를 놓아 여덟 걸음이 한 바퀴 도는 것을 보인다. 카드는 좁아지므로 안 여백을 줄이고
   글자는 두 줄 안에 들어오게 이름을 짧게 썼다. 미는 줄(스냅 스크롤)은 쓰지 않는다 — 방향이 둘이면 손이 헷갈린다. */
@media(max-width:900px){
  .hscroll{padding:var(--sec-y) 0}
  .hscroll .head{margin-bottom:24px}
  .hscroll .track{position:relative;gap:14px;padding:0 20px}
  .hscroll .trow,.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}
  .hscroll .cv,.hscroll .turn{display:none}
  .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}
  .hcard .vis{--cy:30px;min-height:0 !important;border-radius:9px;padding:0 0 8px;text-align:center}
  .hcard .vis::after{left:calc(var(--nr) + var(--nx));right:calc(var(--nr) + var(--nx))}
  .hcard .k{height:30px;padding:0 4px;font-size:10px;line-height:1.25;letter-spacing:-.01em}
  .hcard .k br{display:none}
  .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)와 같은 그림이다 */
  .hscroll .track::before,.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}
  .hscroll .track::before{left:22px;transform:translateY(-50%) rotate(-90deg)}   /* 08 → 01: 위로(↑) — 옆으로 넘기는 표시로 읽히지 않게(사용자 지시) */
  .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}
  .dure{padding:24px 0}
  .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}
}
/* ── 모바일 타일·판 — 쿠폰과 같은 자(사용자 지시: 작아졌으니 라운드·여백을 쿠폰들처럼) ──
   숫자 띠·KPI·흐름 티켓이 라운드 14, 안 여백 14~18로 섰다. 다른 상자도 폰에서는 같은 자를 쓴다. */
@media(max-width:599px){
  .tile{border-radius:14px}
  .cols,.col{gap:10px}
  .tile.data{padding:16px 18px;gap:4px;min-height:0}
  .tile.data .tk{font-size:12.5px}
  .tile.data .tv{font-size:26px}
  .tile .ghostcap{font-size:22px}
  #models .model,.pick,.kpi-lead,.biz-lead{border-radius:14px}
  .lbfind-in{border-radius:14px}
}
/* 본문 문단은 폰에서 `text-wrap:balance`를 끈다 — 랜딩은 머리 문단을 균형 줄바꿈으로 두는데, 좁은 폭에서 문장이
   길어지면 줄마다 오른쓱을 비워 최댓값이 걸린 것처럼 보였다(사용자 지적). 제목은 균형을 그대로 둔다. */
@media(max-width:599px){
  .sec-head p:not(.note),.chain-lead,.hscroll .head .lead,.cintro-p,.pick-desc,.dure-p,
  .phase p,.kpi .sec-head p{text-wrap:pretty;max-width:none}
}

/* 데스크톱 순환 셰브론 — 두 줄 양 끝에 「<」(01↔05)·「>」(04↔08). 줄 안의 갈매기가 방향을, 끝의 둘이 한 바퀴를 말한다.
   카드 안 가로 여백도 한 단 줄인다(사용자 지시). */
@media(min-width:901px){
  .hscroll .track{position:relative}
  .hscroll .track::before,.hscroll .track::after{content:"";position:absolute;top:50%;width:14px;height:22px;
    transform:translateY(-50%);background:var(--blue);z-index:2;
    -webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
  /* 순환 갈매기도 미리 떠 있지 않고 **스크롤이 켠다**(사용자 지시: 시계 방향 순서대로) — 줄 안의 갈매기(.cv/.turn)와 같은 --lit 눈금.
     ↓(04→05)는 4번째, ↑(08→01)는 8번째 차례에 켜진다 */
  .hscroll .track::before{left:max(24px,calc(50% - 600px));transform:translateY(-50%) rotate(-90deg);
    opacity:clamp(0,calc(var(--lit,0) - 8 + 1),.85);transition:opacity .35s var(--ease)}   /* 08 → 01: ↑ */
  .hscroll .track::after{right:max(24px,calc(50% - 600px));transform:translateY(-50%) rotate(90deg);
    opacity:clamp(0,calc(var(--lit,0) - 4 + 1),.85);transition:opacity .35s var(--ease)}   /* 04 → 05: ↓ */
  .hcard .k{padding:0 10px}
  .hcard h3{padding:16px 14px 20px}
}

/* LOCAL APPLICATION — 폰에서 모델 넷을 2×2로(캠페인 낱장과 같은 자·사용자 지시). 카드가 좁아 안 여백·글자를 한 단 줄인다. */
@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와 통일) */
}

/* ── HOW IT WORKS 폰 배치(사용자 지시): QR 타일 → [접속부터 직원 확인까지 | 방문 기록 집계] → 데이터가 성과로(전폭)
   → [새로 설치할 장비 | 지원사업 매칭]. 두 열(.col)에 갈라 담긴 타일을 한 격자의 형제로 풀어(display:contents) 순서를 새로 준다. */
@media(max-width:599px){
  /* `align-items:start`가 위에 걸려 있어 한 줄에 선 두 타일의 키가 글자 줄 수대로 달랐다(실측 390: 새로 설치할 장비 79 · 지원사업 매칭 99)
     — 밑변이 어긋나 상자 사이 간격이 제각각으로 보였다(사용자 지적). 줄 안에서는 키를 맞춘다. */
  .tiles .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
  .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{font-size:18px;line-height:1.3}
}

/* 그림 타일의 폰 여백·글자 — 그림 안 캡션(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}
}

/* 본문 바로 아래 서는 CTA — 절 간격이 아니라 **내용 간 간격**(20px)으로 붙인다(사용자 지시: 위계).
   히어로의 CTA는 히어로 자(리아 지정)를 그대로 둔다. */
.finale .lead{margin-bottom:20px}
.finale .cta-row{margin-top:0}
.sec-head .cta-row{margin-top:20px}

/* 세로 로드맵(≤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:var(--g50);box-shadow:inset 0 0 0 3.5px var(--blue),0 0 0 5px var(--g50)}   /* 옆 아이브로우(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}
}

/* ═══ 목록·단계형 컴포넌트의 글자 자(≤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)}
}

/* ═══ 모바일 헤더(≤760) — 로그인·도입 상담이 통째로 숨어 들어갈 길이 없었다(사용자 지적).
   폰(≤760)에는 **로그인 알약 하나만** 남긴다(사용자 지시: 아이콘 말고 글자, 도입 상담은 빼기). ═══ */
@media(max-width:760px){
  .hd .go{display:inline-flex;height:32px;padding:0 12px;font-size:13px;margin-left:8px;white-space:nowrap}
  /* 로그인은 아이콘이 아니라 글자로(사용자 지시: 그냥 「로그인」) — 도입 상담 알약 옆에 유령 알약(바탕 없음) */
  .hd .go.ghost{display:inline-flex;height:32px;padding:0 12px;margin-left:auto;font-size:13px;background:rgba(42,38,34,.06);color:var(--g800)}
  /* 폰에서는 로그인 하나만 남긴다(사용자 지시) — 도입 상담은 히어로·마무리 절 CTA가 이미 맡는다 */
  .hd .go:not(.ghost){display:none}
  .hd nav{margin-left:auto}
  .hd nav a{padding:0 5px}
  .hd .logo{font-size:17px}
  .hd .go{margin-left:6px}
}
@media(max-width:399px){.hd nav a::after{font-size:13px}.hd .go{padding:0 10px}}

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

/* 랜딩 ABOUT DURE 판(.idbox)·AI & PERFORMANCE 카드(.role) — 폰 위계(사용자 지적: 크기·위계가 안 맞다).
   판 본문은 15/26(본문 자), CTA는 본문 아래 20px에 전폭(한 판 안의 오른쪽 정렬 버튼은 폰에서 붕 뜬다).
   카드는 목록형 자(표식 12.5 · 제목 17 · 본문 14/22)로. */
@media(max-width:599px){
  .idbox{padding:20px 18px;border-radius:14px}
  .idbox p{font-size:15px;line-height:26px}
  .idbox .btn{align-self:stretch;justify-content:center;margin-top:20px;height:48px}
  .role .k{font-size:12.5px;margin-bottom:6px}
  .role p{font-size:14px;line-height:22px;margin-top:6px}
  .roles .row{gap:10px}
}

/* 태블릿 폭(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}
}

/* ═══ 랜딩 ABOUT DURE(#identity) — 화성 사업 소개의 ABOUT DURE 절을 **그대로** 옮긴 것(사용자 지시).
   격자·CTA·그림 자는 캠페인 시트 board.css의 .biz/.dure/.cintro-nav/.page-vis와 같은 값이고, 글자 크기만 랜딩 절 머리를 따른다. ═══ */
/* PC도 폰과 같은 **한 열**(사용자 지시: 「이런 배치로 온라인도 통일」) — 머리·부제·본문·CTA가 왼쓱 한 줄기로 내려온다. 2열(머리|본문)은 뺐다 */
.identity .biz{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0;padding:0}
/* 머리 글자는 랜딩 절 머리(.sec-head.left: 아이브로우·제목·부제) **그대로**, 본문은 이전 판(.idbox p)과 같은 17/28 — 배치만 바뀌고 크기는 다른 절과 같다(사용자 지적) */
.identity .biz-l{min-width:0}
.identity .biz .sec-head.left{margin:0}
.identity .biz-r{min-width:0;display:grid;gap:0;align-content:start;margin-top:26px}   /* 부제→본문: 폰 행 간격(26)과 같은 자 */
.identity .dure-p{margin:0;max-width:820px;font-size:16px;font-weight:400;line-height:28px;color:var(--g600);word-break:keep-all;overflow-wrap:anywhere}   /* 한 열이라 줄 길이를 절 머리 폭(820)으로 묶는다 */
/* CTA — 본문 아래 왼쪽 맞춤, 본문과 내용 간 간격(20px). 알약은 캠페인 머리 CTA와 같은 52px */
.identity .cintro-nav{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start}
.identity .cintro-nav .btn{width:auto;height:52px;padding:0 32px;font-size:17px;font-weight:600;flex:0 0 auto}
.identity .dure-cta{grid-column:1;margin-top:20px}
/* 마을 그림 — 캔버스(1672×941) 위 251행이 비어 있어 26.7%만큼 끌어올리고, 상자(폭의 20.5%)가 아래(논)를 잘라 낸다 */
.identity .page-vis{position:relative;margin:clamp(40px,5vw,72px) auto 0;line-height:0}
/* 잘린 그림 아랫변이 다음 절(HOW IT WORKS)의 판에 **바로 붙는다**(사용자 지시) — 캠페인 낱장에서 푸터에 붙이는 것과 같은 문법. 절의 바닥 여백을 없앤다 */
.identity{padding-bottom:0}
.identity .page-vis img{display:block;width:100%;height:auto;transform:translateY(-26.7%)}
@media(max-width:599px){
  .identity .page-vis{margin-top:32px}
}

/* ═══ 폰 CTA 규칙(사용자 지시): **둘이면 가로 한 줄**, **하나면 가로로 채우지 않는다**. ═══
   한 줄에 둘을 넣으려면 알약이 좁아져야 한다 — 여백 14, 글자 15, 화살표 아이콘은 뺀다(글자만 남겨 폭을 번다).
   `:only-child`가 하나짜리다 — 글자 폭만큼. 캠페인 카드 CTA(.camp-cta)도 같은 규칙(전에는 560 아래에서 세로로 쌓았다). */
@media(max-width:599px){
  .cta-row,.identity .cintro-nav{gap:12px;flex-wrap:nowrap}
  .cta-row .btn,.identity .cintro-nav .btn{flex:1 1 0;min-width:0;padding:0 14px;font-size:15px;justify-content:center;white-space:nowrap}
  .cta-row .btn svg{display:none}
  .cta-row .btn:only-child,.identity .cintro-nav .btn:only-child{flex:0 0 auto;padding:0 32px;font-size:17px}
}
@media(max-width:560px){
  .camp-cta{flex-direction:row}
  .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}
  .camp-card{--cta-h:48px}
}

/* 대조표 절 아래 — 표의 마지막 줄이 안 여백(16)을 이미 갖고 있어 다음 절과의 사이가 다른 절보다 16px 넓어 보였다(사용자 지적: 「후속 사업」 아래).
   랜딩·캠페인 사업 소개가 같은 표를 쓰므로 한 자리에서 고친다. */
.compare{padding-bottom:calc(var(--sec-y) - 16px)}

/* ═══ 자 한 벌 못박기 — 같은 특이도의 뒤쪽 규칙(.alt h2 44 · .alt p 17 등)이 절 머리 자를 덮고 있었다(실측 1440: LOCAL APPLICATION 44/16).
   위 표(아이브로우 13 · 절 제목 48/28 · 하단문구 18 · 본문 16)를 파일 끝에서 다시 건다. ═══ */
.sec-head h2,.alt h2{font-size:clamp(28px,4.4vw,48px)}
.sec-head p:not(.note){font-size:18px}

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

/* 제목도 어절로 끊는다 — 한글은 기본값(word-break:normal)에서 음절 사이 어디서나 줄이 바뀐다. 문단(.sec-head p 등)에만 걸려 있던 규칙을 제목까지 넓힌다 */
.sec-head h2,.hscroll .head h2,.alt h2,.cintro-nm,.cuse-h,.finale h2,.story-hero h1{word-break:keep-all;overflow-wrap:anywhere}

/* ═══ 브랜드 스토리 · 두레의 자리 — 벤 다이어그램(사용자 지시: 과거와 현재, 그 교집합에 AI Dure) ═══
   원 둘은 뒤에 깔리는 장식(`.ring`)이고 글은 세 칸(과거 | AI Dure | 현재)이 그 위에 선다.
   칸마다 한 줄씩만 둔다 — 글이 많으면 그림 맛이 죽는다(사용자 지적).
   원 폭 56%씩에 좌우 4%를 비우면 겹치는 자리가 가운데 20%다. 가운데 칸(.66fr)이 딱 그 자리에 앉는다. */
/* 위는 넉넉히 비우고(그림 한 장짜리 절이라 여백이 호흡이다), 아래는 선이 다음 절을 가리키므로 바짝 붙인다(실측 288 → 56) */
.origin{padding:calc(var(--sec-y) + 48px) 0 0}
#origin + .roles{padding-top:clamp(40px,4vw,56px)}
.origin .wrap{display:block}
.origin .venn{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;padding:clamp(72px,9vw,132px) 0}
/* 원 테두리를 그리지 않는다 — 색이 **바깥으로 갈수록 풀려** 끝이 어디인지 모르게 사라진다(사용자 지시).
   색 중심을 겹치는 쪽으로 밀어(70%/30%) 가운데는 또렷하고, 글이 앉는 바깥 끝으로 갈수록 투명해진다(사용자 지시). */
.origin .ring{position:absolute;top:50%;transform:translateY(-50%);width:48%;aspect-ratio:1;border-radius:50%;
  pointer-events:none;z-index:0;mix-blend-mode:multiply;filter:blur(4px)}   /* 가장자리만 아주 살짝 문지른다(사용자 지시: 4) — 번짐은 그러데이션이 내고 blur는 남은 경계만 지운다 */
.origin .ring.r1{left:6%;background:radial-gradient(62% 62% at 70% 50%,rgba(255,199,181,.9) 0%,rgba(255,211,197,.66) 30%,rgba(255,227,218,.3) 58%,rgba(255,242,238,.09) 80%,rgba(255,255,255,0) 100%)}
.origin .ring.r2{right:6%;background:radial-gradient(62% 62% at 30% 50%,rgba(200,209,237,.9) 0%,rgba(212,219,242,.66) 30%,rgba(228,233,248,.3) 58%,rgba(243,245,252,.09) 80%,rgba(255,255,255,0) 100%)}
.origin .v-side,.origin .v-mid{position:relative;z-index:1;min-width:0}
.origin .v-past{text-align:left;padding-left:clamp(8px,2vw,32px)}
.origin .v-now{text-align:right;padding-right:clamp(8px,2vw,32px)}
.origin .v-mid{text-align:center}
.origin .v-k{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--g500)}
/* 과거·현재 문구는 **본문 자**(16/16)를 쓴다(사용자 지시) */
.origin .v-l{margin:0;font-size:16px;font-weight:600;line-height:1.6;letter-spacing:-.02em;color:var(--g800);word-break:keep-all}
/* 겹친 자리 — 이 절의 결론이라 브랜드 이름이 가장 크고 굵다 */
/* 워드마크는 흰색이다(사용자 지시: 사진처럼) — 뒤 색이 아주 옅게만 비친다.
   두 겹이다: 밑에 비치는 글자, 위에 커서를 따라 흰빛이 차오르는 사본(`.ghostlit`, 움직임은 site.js). */
/* 겹친 자리에서 아래 절로 내려가는 선 — 캠페인 상세 판을 가리키는 선(.pick-line)과 같은 재질이다.
   원이 흐린 그림이라 선은 원 밑에서 시작해 아래로 갈수록 풀린다. */
.origin .venn-line{display:block;width:1px;height:clamp(96px,13vw,200px);margin:clamp(24px,3vw,40px) auto 0;
  background:linear-gradient(180deg,rgba(240,86,58,.42),rgba(240,86,58,0))}
.origin .v-mark{position:relative;display:inline-block}
.origin .v-mid .v-t{display:block;margin:0;font-size:clamp(40px,6vw,86px);line-height:1.05;color:rgba(255,255,255,.88);white-space:nowrap}
.origin .v-mid .ghostlit{position:absolute;left:0;top:0;right:0;color:#fff;
  -webkit-mask-image:radial-gradient(circle 130px at var(--mx,-500px) var(--my,-500px),#000 0%,rgba(0,0,0,.55) 45%,transparent 72%);
          mask-image:radial-gradient(circle 130px at var(--mx,-500px) var(--my,-500px),#000 0%,rgba(0,0,0,.55) 45%,transparent 72%)}
/* 워드마크 아래 문단 — 히어로에 있던 글을 여기로 내렸다(사용자 지시). 가운데 칸이 이 폭만큼 넓어지므로 줄 길이를 묶는다 */
.origin .v-mid .v-p{margin:16px auto 0;font-size:16px;line-height:28px;color:var(--g600);word-break:keep-all}   /* 줄바꿈은 손으로 잡는다(사용자 지시) — 폭으로 접지 않는다 */
@media(max-width:1100px){
  .origin .ring{width:52%;filter:blur(4px)}
  .origin .ring.r1{left:3%}.origin .ring.r2{right:3%}
}
@media(max-width:860px){
  /* 폰 — 원 둘을 위아래로 겹치고 가운데 덩이(이름 + 문단)를 그 자리에 놓는다(사용자 지시).
     원은 **판의 한가운데를 기준으로** 위아래로 벌려 세운다: 각자 중심을 (d − ov)/2 만큼 밀면
     겹치는 자리가 언제나 판의 한가운데에 ov 높이로 생긴다. 그래서 흐름으로 가운데 선 덩이가 저절로 그 자리에 앉고,
     문단이 길어 겹친 자리를 넘어가도 원은 그대로다(사용자 지시: 문구가 다 들어갈 필요는 없다). */
  .origin .venn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    --d:min(74vw,308px);--ov:92px;row-gap:84px;padding:0;margin-top:0;min-height:0}   /* 사이는 128의 2/3(사용자 지시) */
  /* 판을 원 높이(2d − ov)로 잡아 두면 글이 줄어든 만큼 위아래에 빈 자리가 남아 **아래 선과의 사이만 좁아 보였다**
     (아래 문구를 뺀 뒤 특히). 판은 글 높이만 잡고, 원은 판 한가운데를 기준으로 서므로 위아래로 조금 삐져나온다 — 옅은 그림이라 티가 안 난다. */
  .origin .venn-line{margin-top:84px}
  .origin .ring,.origin .ring.r1,.origin .ring.r2{width:var(--d);left:50%;right:auto;margin-left:calc(var(--d) / -2);
    top:50%;bottom:auto;filter:blur(3px)}
  .origin .ring.r1{transform:translateY(calc(-50% - (var(--d) - var(--ov)) / 2));
    background:radial-gradient(62% 62% at 50% 70%,rgba(255,199,181,.9) 0%,rgba(255,211,197,.66) 30%,rgba(255,227,218,.3) 58%,rgba(255,242,238,.09) 80%,rgba(255,255,255,0) 100%)}
  .origin .ring.r2{transform:translateY(calc(-50% + (var(--d) - var(--ov)) / 2));
    background:radial-gradient(62% 62% at 50% 30%,rgba(200,209,237,.9) 0%,rgba(212,219,242,.66) 30%,rgba(228,233,248,.3) 58%,rgba(243,245,252,.09) 80%,rgba(255,255,255,0) 100%)}
  .origin .v-side,.origin .v-mid{position:static;transform:none;text-align:center;max-width:none;padding:0 24px;width:100%}
  /* 과거는 라벨이 원 쪽(아래)에 붙는다 — 차례를 뒤집는다 */
  .origin .v-past{display:flex;flex-direction:column-reverse}
  .origin .v-past .v-k{margin:8px 0 0}
  .origin .v-mid .v-p{position:static;padding:0;margin:16px auto 0;text-align:center}
  .origin .v-l br,.origin .v-mid .v-p br{display:none}
  /* 아래쪽 문구는 뺀다(사용자 지시) — 가운데 문단이 이미 아래 원까지 내려와 있어 같은 자리에서 두 번 말한다.
     「현재」 라벨만 남겨 아래 원이 무엇인지만 짚는다 */
  .origin .v-now .v-l{display:none}
  .origin .v-now .v-k{margin:0}
}

/* ═══ 대조표 두 열 변형(.cmp.two) — 브랜드 스토리의 「혼자 들 때 / 함께 들 때」.
   랜딩 대조표는 기준 칸까지 셋인데 여기는 기준이 없다(사용자 지시: 제목만). 열 번호만 한 칸씩 당긴다. ═══ */
.cmp.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto repeat(4,auto)}
.cmp.two .c-panel{grid-column:2}
/* 왼쪽도 상자로 감싼다(사용자 지시) — 오른쪽만 판이면 줄만 떠 있는 것처럼 보인다.
   격자 컨테이너의 `::before`가 그 상자다(칸을 하나 더 만들지 않는다). 오른쪽 판과 같은 라운드, 색만 조용하게. */
/* 오른쪽 판과 **같은 재질**이다(사용자 지시) — 같은 각도·같은 세 마디로 옅어지고, 같은 유리(backdrop) 처리를 쓴다.
   색만 중립(잉크)이라 답이 있는 쪽이 여전히 눈에 먼저 든다. 외곽선은 두지 않는다. */
.cmp.two::before{content:"";grid-column:1;grid-row:1 / -1;border-radius:var(--r-card);
  background:linear-gradient(168deg,rgba(42,38,34,.075) 0%,rgba(42,38,34,.042) 44%,rgba(42,38,34,.014) 100%);
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%)}
/* 유리 처리를 한 판은 제 뒤를 흐리는데, 같은 층에 있는 글까지 빨아들인다 — 오른쪽 칸이 `z-index:1`로 떠 있는 것과
   같은 이유로 왼쪽 칸도 한 층 올린다(안 올리면 머리글이 뿌옇게 뭉갠다). */
.cmp.two .c-h-was,.cmp.two .c-was{position:relative;z-index:1}
.cmp.two .c-h-was,.cmp.two .c-was{grid-column:1}
.cmp.two .c-h-now,.cmp.two .c-now{grid-column:2}
/* 첫 줄은 머리글 바로 아래라 위 선을 긋지 않는다(랜딩은 2행이 첫 줄이라 같은 자리다) */
@media(max-width:599px){
  /* 폰 — 랜딩 대조표와 같은 규율로 **한 열**로 편다. 다만 여기는 기준 칸이 없어 줄을 짝지어 엮을 수 없으므로
     답이 있는 쪽(소상공인 × AI Dure)을 판째 먼저 놓고, 그 아래에 홀로 쪽을 놓는다. */
  /* 랜딩 대조표의 폰 규칙이 이 변형에도 걸린다 — 그쪽 말(「두레」·「기존 홍보」 머리말, 머리글·판 숨김,
     기준 칸 기준의 행 배치)을 여기서 되돌린다. 이 절의 열 이름은 머리글이 따로 말한다. */
  .cmp.two .c-now p::before,.cmp.two .c-was p::before{content:none}
  /* 랜딩 폰 규칙이 `.c-was::before{display:none}`로 왼쪽 줄 사이 선을 통째로 끈다(거기서는 기준 칸이 짝을 묶어 준다).
     이 변형에는 기준 칸이 없어 선이 없으면 줄이 뭉개진다 — 되살린다. */
  .cmp.two .c-was:not([style*="--r:2"])::before{display:block}
  .cmp.two .c-h,.cmp.two .c-panel{display:block}
  .cmp.two .c-h-now{position:relative;z-index:1}
  .cmp.two{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;column-gap:0;margin-top:32px}
  .cmp.two .c-h-now,.cmp.two .c-now,.cmp.two .c-h-was,.cmp.two .c-was{grid-column:1}
  /* 홀로가 먼저다(사용자 지시) — 지금 무엇이 문제인지 읽고 나서 답을 본다 */
  .cmp.two .c-h-was{grid-row:1}
  .cmp.two .c-was[style*="--r:2"]{grid-row:2}
  .cmp.two .c-was[style*="--r:3"]{grid-row:3}
  .cmp.two .c-was[style*="--r:4"]{grid-row:4}
  .cmp.two .c-was[style*="--r:5"]{grid-row:5}
  /* 두 상자의 안 여백은 같아야 한다 — 위쪽 28은 상자 사이를 띄우려던 것인데 빨간 상자만 넉넉해 보였다.
     사이는 회색 상자의 아래 여백(16)이 이미 낸다 */
  .cmp.two .c-h-now{grid-row:6;padding-top:16px}
  .cmp.two .c-now[style*="--r:2"]{grid-row:7}
  .cmp.two .c-now[style*="--r:3"]{grid-row:8}
  .cmp.two .c-now[style*="--r:4"]{grid-row:9}
  .cmp.two .c-now[style*="--r:5"]{grid-row:10}
  .cmp.two .c-panel{grid-column:1;grid-row:6 / 11}
  /* 폰에서는 홀로 쪽도 **상자로 감싼다**(사용자 지시) — 한 열로 펴면 판이 있는 쪽만 묶여 보여 짝이 안 맞는다.
     격자 컨테이너의 `::before`가 그 상자다(칸을 하나 더 만들지 않는다). 아래 판과는 16만큼 띄운다. */
  .cmp.two::before{grid-row:1 / 6;margin-bottom:16px}
  .cmp.two .c-h{padding-left:18px;padding-right:18px}
  .cmp.two .c-now{padding:14px 18px}
  .cmp.two .c-was{padding:14px 18px}
  .cmp.two .c-was p,.cmp.two .c-now p{font-size:14px;line-height:22px}
  .cmp.two .c-was:not([style*="--r:2"])::before{left:18px;right:18px;width:auto}
  .cmp.two .c-now:not([style*="--r:2"])::before{content:"";left:18px;right:18px;width:auto;background:rgba(240,86,58,.16)}
  /* 마지막 줄 — `:last-of-type`은 형제 중 마지막 div(=마지막 .c-now)만 잡아 홀로 쪽에는 걸리지 않았다. 행 번호로 짚는다 */
  .cmp.two .c-now[style*="--r:5"],.cmp.two .c-was[style*="--r:5"]{padding-bottom:22px}
}

/* 브랜드 스토리의 두 열 변형에서는 왼쪽 표식이 **긴 줄표**다(사용자 지시: 원래 있던 것) — ✕는 랜딩 대조표의 말이고,
   여기 왼쪽은 「없다」가 아니라 「혼자 든다」라 부정 기호가 과하다. */
.cmp.two .c-was .ic{background:none;width:14px;height:16px;border-radius:0}
.cmp.two .c-was .ic::before{content:"";position:absolute;left:0;top:7px;width:14px;height:2px;border-radius:1px;background:var(--g400);transform:none}
.cmp.two .c-was .ic::after{content:none}
/* 머리글 — 칩(제목) 아래에 소제목을 세운다 */
/* 마지막 줄은 상자 밑변과 사이를 둔다 — `:last-of-type`은 형제 중 마지막 div만 잡아 왼쪽 칸에 안 걸린다(행 번호로 짚는다) */
.cmp.two .c-was[style*="--r:5"],.cmp.two .c-now[style*="--r:5"]{padding-bottom:28px}
.cmp.two .c-h{display:block;padding-bottom:16px}
.cmp.two .c-chip{display:block;font-size:13px;font-weight:700;letter-spacing:.02em}
.cmp.two .c-h em{display:block;margin-top:6px;font-size:clamp(18px,2vw,22px);font-weight:700;font-style:normal;letter-spacing:-.03em;color:var(--g900)}
.cmp.two .c-h-now em{color:var(--g900)}
@media(max-width:599px){
  /* 폰이라고 표식·글자를 따로 줄이지 않는다(사용자 지시: 모바일을 PC처럼) — 줄 사이 선까지 같은 그림이어야 한다 */
  .cmp.two .c-h em{line-height:1.35}
}

/* 상자의 위·아래 안 여백을 **눈에 맞춘다**(사용자 지시) — 숫자를 28로 똑같이 두면 아래가 좁아 보인다.
   상자 바탕이 아래로 갈수록 옅어져(잉크 .075 → .014) 밑변이 눈에 안 잡히고, 실제보다 10쯤 위에서
   끝난 것처럼 보이기 때문이다. 그래서 아래만 그만큼 더 준다(위 28 · 아래 38). */
@media(max-width:599px){
  .cmp.two .c-h,.cmp.two .c-h-now{padding-top:28px}
  .cmp.two .c-was[style*="--r:5"],.cmp.two .c-now[style*="--r:5"]{padding-bottom:38px}
}
/* 벤 선은 위아래 사이가 **눈에 같아야 한다**(사용자 지시) — 「현재」에서 선까지 86, 선에서 WHY AI DURE까지
   48로 갈려 있었다. 둘을 만드는 값이 달랐다(위는 선 앞 여백 84, 아래는 다음 절의 위 여백 40).
   **아래를 기준으로 위를 맞춘다**(사용자 지시) — 다음 절을 밀어내지 않고 선 앞 여백만 줄인다. */
@media(max-width:599px){
  .origin .venn-line{margin-top:46px}
}
/* 폰에서 「과거」는 라벨이 먼저고 문장이 뒤다(사용자 지시) — 뒤집어 두었던 것을 되돌린다.
   위에 있던 원이 라벨을 덮지 않으므로 뒤집을 이유가 없어졌다. */
@media(max-width:860px){
  .origin .v-past{display:block}
}


/* 줄 사이 구분선은 **칸마다 제 안 여백 안에서** 긋는다 — 랜딩 대조표와 같은 규칙이다(사용자 지시: 표 속 패딩 참고).
   두 열을 가로질러 한 줄로 이어 봤더니 오른쪽 선이 판 밖으로 새고, 무엇보다 그 줄이 AI Dure 묶음의 일부로 안 읽혔다. */
.cmp.two .c-was:not([style*="--r:2"])::before{left:22px;right:22px;width:auto;background:var(--g200)}
.cmp.two .c-now:not([style*="--r:2"])::before{content:"";left:22px;right:22px;width:auto;background:rgba(240,86,58,.16)}

/* 폰에서는 이 절도 **다른 절과 같은 절 여백**을 쓴다(사용자 지적: 위가 너무 넓다). PC의 +48은 그림이 큰 화면에서만 필요하다 — #origin 폰 절 여백 */
@media(max-width:599px){
  .origin{padding-top:var(--sec-y)}
  .origin .venn{margin-top:0}
}

/* ── 고르기 칸(Select.svelte)의 펼친 목록 — 도구 화면(v3.css)과 **같은 모양**이다.
   문의하기 폼은 이 시트를 쓰므로 여기에도 한 벌 둔다. 닫힌 칸은 `.cin`이 그대로 든다. ── */
.sel{position:relative}
.sel-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip:rect(0 0 0 0)}
.sel-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;cursor:pointer}
/* ⚠ 이름을 `.empty`로 두었더니 **빈 상태 부품**(`.empty`: 가운데 정렬·세로 쌓기·큰 여백)과 부딪혀
   닫힌 칸이 320px 높이로 부풀었다(사용자 지적). 이름은 부품 안에서만 쓰는 것으로 좁힌다. */
.sel-btn.sel-empty{color:var(--g400);font-weight:400}
.sel-btn svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.sel.open .sel-btn svg{transform:rotate(180deg)}
.sel.open .sel-btn{box-shadow:inset 0 0 0 2px var(--blue)}
.sel-list{position:absolute;z-index:40;top:calc(100% + 8px);left:0;right:0;margin:0;padding:8px;
  list-style:none;border-radius:16px;background:#fff;
  box-shadow:0 0 0 1px var(--g200),0 12px 32px rgba(42,38,34,.14);max-height:320px;overflow-y:auto}
.sel-list li{margin:0}
/* 안내 줄 — 고를 수 없는 머리말이다(누르면 고른 값이 풀리던 자리) */
.sel-hint{display:flex;align-items:center;min-height:40px;padding:0 20px;
  font-size:13px;font-weight:600;color:var(--g500);cursor:default;user-select:none}
.sel-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:48px;padding:0 20px;border:0;border-radius:10px;background:none;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--g900);text-align:left;cursor:pointer}
.sel-list button svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.sel-list li.act button{background:var(--blue-weak);color:var(--blue-deep)}
/* 고른 줄은 **브랜드 주황**이다(사용자 지시: 검정 말고) — 가리킨 줄은 옅은 주황으로 미리 알린다 */
.sel-list li.on button,.sel-list li.on.act button{background:var(--blue);color:#fff}