/* ── 밑그림(mitgeurim) v5 — 다크 잉크+연필 편집 문법 (2026-07-07 다크 확정) ──
   obys 뼈대(오프셋 리스트·hover 프리뷰) + nofail 콘텐츠 설계(문제:해결 쌍·서사)
   금지: 알약 뱃지 · 그라데이션 강조 · 알약 버튼 2개 · 부유 카드 · 영문 라벨 남발 · 대형 Pretendard */

:root{
  --paper:#0D0D0C;
  --paper2:#151514;
  --ink:#F2F1EC;
  --mut:rgba(242,241,236,.62);
  /* 2026-07-29 접근성 감사 — 알파 .42는 paper(#0D0D0C)·카드(#151514) 양쪽에서 3.75:1로
     AA 본문 기준 4.5:1 미달이었고, 이 토큰 하나에 위반 노드 110여 개가 걸려 있었다
     (푸터 본문·크럼·캡션·날짜·.price-note·약속 카드 라벨 등).
     알파 스윕 실측: .46=4.27 / .48=4.53 / .50=4.86 / .52=5.18 → 여유를 두고 .50. */
  --faint:rgba(242,241,236,.50);
  --line:rgba(242,241,236,.16);
  --red:#FF4D33;

  /* ── 레이아웃 그리드 (2026-07-28) ─────────────────────────────────
     --edge 하나로 전 섹션의 시작 x축을 맞춘다. 이전에는 .wrap만
     max-width:1240px로 가운데 정렬돼서, 전폭 요소(네비·히어로·워크리스트)는
     4vw(=57.6px)에서 시작하고 섹션 콘텐츠는 157.6px에서 시작했다 — 100px 어긋남.
     padding의 %는 컨테이닝 블록(=전폭)을 기준으로 풀리므로, 전폭 요소와
     .wrap이 같은 식을 쓰면 두 축이 정확히 일치한다. 폭 계산 결과는 종전과 동일. */
  --gut:4vw;
  --shell:1240px;
  --edge:max(var(--gut), calc(50% - var(--shell)/2 + var(--gut)));

  /* ── 타입 스케일 6단 ──────────────────────────────────────────────
     1rem 미만이 18종(16.8·16.32·16·15.68·15.2·14.88·14.72·14.4·14.28·14.08·
     13.6·13.44·13.12·12.8·12.48·12·11.52·10.88px)까지 늘어나 위계가 아니라
     잡음이었다. 라벨/보조/본문/리드 4단 + 소제목으로 접는다.
     2026-07-29 — --t-label을 .72rem(11.52px)에서 .75rem(12px)으로 올렸다.
     스케일 단수·비율은 그대로고 하한만 표준선(12px)에 맞춘 것이다: 11.52px는
     라벨 66개소에 걸려 있었고, 본문 축소 설정을 쓰는 사용자에게 가장 먼저
     읽기를 포기하게 되는 크기다. rem 기반이라 브라우저 폰트 확대 설정을 따른다. */
  --t-label:.75rem;   /* 트래킹 대문자 라벨·섹션 번호·인덱스 (하한 12px) */
  --t-xs:.8rem;       /* 각주·푸터 하단·메타 */
  --t-sm:.88rem;      /* 보조 설명 */
  --t-md:1rem;        /* 본문 — 16px 웹표준 (2026-07-29 상향, 종전 .96rem=15.36px) */
  --t-lg:1.06rem;     /* 리드 문단 */
  --t-h3:1.16rem;     /* 소제목 */
  --t-h2:1.3rem;      /* 플랜명·가격 (한 정보 단위라 같은 단) */

  /* ── 읽기 폭 ─────────────────────────────────────────────────────
     em 기준이라 글자 크기가 달라도 "몇 글자"가 일정하다.
     Pretendard 한글 자폭은 실측 0.87em이라 31em ≈ 36자.
     종전 산포: 25.6자 ~ 48.7자 (기준 없음). */
  --measure:31em;      /* 본문 ≈36자 */
  --measure-sm:27em;   /* 폼·좁은 칼럼 ≈31자 */
  --measure-head:28em; /* 섹션 헤드라인 */

  /* ── 여백 리듬 2단 ────────────────────────────────────────────── */
  --sp-sec:12vh;        /* 섹션 기본 */
  --sp-sec-tight:6vh;   /* 앞 섹션에서 곧바로 이어지는 경우 */
  --sp-sec-flush:2vh;   /* 페이지 헤더 바로 뒤 (헤더가 아래 여백을 이미 가짐) */
  --sp-head:8vh;        /* 섹션 헤드 → 첫 콘텐츠 */
}

*{box-sizing:border-box;margin:0;padding:0}
/* scroll-behavior:smooth를 쓰지 않는다 — 16,000px 페이지에서 앵커 점프 한 번이
   0.9~1.5초 걸리고, 그동안 화면은 읽을 수 없는 흐름이 된다(실측: 클릭→완전정지
   1,707ms 중 1,453ms가 스크롤 애니메이션). 착지 위치는 그대로고 이동만 즉시가 된다.
   대신 고정 헤더(74px) 높이만큼 착지점을 내린다 — 안 그러면 #pricing·#faq 제목
   상단이 헤더에 잘린다(실측: 제목 top 54px·36px < nav 74px). */
html{scroll-padding-top:92px}

/* 페이지 간 전환 — View Transitions API (SPA 없이 부드러운 이동. 미지원 브라우저는 기존 하드 로드) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease-out both}
::view-transition-new(root){animation:vt-in .34s ease-out both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
/* 네비는 두 페이지 공통 요소라 전환 중 고정 (끊김 없이 이어지는 핵심) */
.nav{view-transition-name:site-nav}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  ::view-transition-old(site-nav),::view-transition-new(site-nav){animation:none}
}
body{
  font-family:'Pretendard Variable',sans-serif;
  background:var(--paper);color:var(--ink);
  line-height:1.6;word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:var(--ink);color:var(--paper)}

.lat{font-family:'Zodiak',serif;font-style:normal;font-weight:400}

/* 화면에서는 감추되 보조기술에는 남기는 텍스트 (표 캡션·새 창 안내 등).
   display:none·visibility:hidden과 달리 접근성 트리에서 사라지지 않는다. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* 발행일 화면 숨김 (2026-07-30) — <time>의 datetime 속성·JSON-LD·sitemap 날짜는 그대로 두고
   방문자 화면에서만 감춘다. 다시 노출하려면 아래 선언부를 지우면 된다(마크업 수정 불필요). */
.pubdate{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* 본문 바로가기 — 평소엔 화면 위로 밀어 두고 포커스 시에만 내려온다.
   position:absolute라 레이아웃에는 기여하지 않는다(전 페이지 픽셀 무변화 확인). */
.skip{position:absolute;left:var(--edge);top:10px;z-index:80;
  padding:10px 16px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  font-size:var(--t-sm);font-weight:700;
  transform:translateY(-250%);transition:transform .18s ease}
.skip:focus{transform:none}
main:focus{outline:none}

/* ── 터치 타깃 24×24 확보 (WCAG 2.2 AA 2.5.8) ────────────────────────
   padding으로 키우면 줄 높이가 밀리므로, 투명한 ::after 히트박스로만 넓힌다.
   글자 위치는 1px도 움직이지 않고 누를 수 있는 면적만 커진다.
   대상(실측 히트박스): 개인정보처리방침 75×13 · 내용 보기 48×16 · 칼럼 크럼 23×14 */
.foot-bottom .ph-note a,.pv-link,.crumb a{position:relative}
.foot-bottom .ph-note a::after,.pv-link::after,.crumb a::after{
  content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:24px}
/* 크럼 "칼럼"은 폭도 23px라 좌우로 1px씩 넓힌다 */
.crumb a::after{left:-1px;right:-1px}

.wrap{width:100%;padding:0 var(--edge)}

/* 관통 한 획 (2026-08-06) — 스크롤 스크럽 전용 연필 선. throughline.js가 경로 생성.
   z-index:-1: #way의 종이(paper2) 뒤로 지나갔다 다시 나오는 게 의도된 연출.
   선 자체는 항상 본문 뒤 — 글자를 덮지 않는다. */
main{position:relative}
#throughline{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#throughline path{fill:none;stroke:rgba(242,241,236,.15);stroke-width:1.3;stroke-linecap:round}
@media(max-width:720px){#throughline path{stroke:rgba(242,241,236,.12);stroke-width:1.1}}

/* 그레인 제거 (v2) — 배경은 완전 무지 다크가 기본.
   종전 .grain은 전 페이지 position:fixed 레이어로 배경 휘도를 13 → 20.5로 들어올리고 있었다.
   무지에서 색 띠·밴딩이 관찰되면 그때만 지각 한계 이하의 최소 그레인을 되살린다
   (판정 근거는 VERIFY-v2.md의 밴딩 실측 절). */

/* 커서 점(#cur) 제거 — 조준은 OS 커서가 전담 (콰이어트 버전) */

/* 손그림 SVG 공통 — 기본은 "이미 그어진" 정적 상태.
   드로잉 애니메이션은 시그니처 2곳(히어로 밑줄·추천 플랜)만 motion.js가 인라인으로 건다. */
.draw path{stroke-dasharray:var(--len,300);stroke-dashoffset:0}

/* ── 네비 ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px var(--edge);
  transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(13,13,12,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.wordmark{position:relative;display:inline-block;font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.wordmark svg{position:absolute;left:-2%;bottom:-7px;width:104%;height:10px}
.wordmark small{font-family:'Zodiak',serif;font-style:normal;font-weight:400;font-size:var(--t-label);color:var(--faint);margin-left:9px}
.nav .links{display:flex;gap:26px;font-size:var(--t-sm);font-weight:500;color:var(--mut);list-style:none}
.nav .links a:hover{color:var(--ink)}
/* 현재 페이지 표시 — 종전에는 각 페이지 마크업에 style="color:var(--ink)" 인라인으로
   박혀 있어 스타일이 CSS 밖에 있었고 보조기술에는 아무 신호도 없었다. */
.nav .links a[aria-current="page"]{color:var(--ink)}
.cta{position:relative;display:inline-block;font-weight:700;font-size:var(--t-sm);padding:9px 16px}
.cta svg{position:absolute;inset:-6px -10px;width:calc(100% + 20px);height:calc(100% + 12px);pointer-events:none}

/* ── 히어로 ── */
.hero-intro{padding:17vh var(--edge) 5vh;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
/* 폴드 활자 위계 (2026-07-28) — 종전에는 폴드 최대 활자가 워크리스트 브랜드명(89.3px)이었고
   무엇을 파는지 말하는 한글 문장은 21.6px로 4.1배 작았다. 한글을 리드 문장 크기까지 올리고
   브랜드명을 목록 크기로 내려 역전을 해소한다. 한글을 영문 슬로건급으로 키우는 방식은
   쓰지 않는다 — 대형 Pretendard는 이 프로젝트에서 배제된 표현이다(라틴 대형은 Zodiak 전담). */
.hero-intro h1{font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.5;font-weight:700;max-width:var(--measure-head);letter-spacing:-.015em}
.hero-intro h1 .big{display:block;font-size:clamp(2.6rem,5.6vw,5rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:18px}
.hero-intro h1 .kv{display:block}
.hero-intro h1 .kv2{display:block;margin-top:14px;font-size:var(--t-md);font-weight:500;line-height:1.6;letter-spacing:-.005em;color:var(--mut)}
.hero-intro .u{position:relative;white-space:nowrap}
.hero-intro .u svg{position:absolute;left:-1%;bottom:-4px;width:102%;height:12px}
.hero-intro .cnt{font-size:var(--t-label);letter-spacing:.14em;color:var(--faint);font-weight:600;white-space:nowrap;text-align:right;line-height:1.9}

.worklist{border-top:1px solid var(--line);list-style:none}
.wl{display:block;border-bottom:1px solid var(--line);padding:2.4vh var(--edge);position:relative}
.wl .row{display:flex;align-items:center;gap:2.2vw}
.wl .ix{font-size:var(--t-label);color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums}
.wl .ti{font-family:'Zodiak',serif;font-weight:400;line-height:1.15;font-size:clamp(1.25rem,1.75vw,1.55rem);letter-spacing:.01em;transition:transform .45s cubic-bezier(.19,1,.22,1)}
.wl .kr{font-size:var(--t-sm);font-weight:400;color:var(--faint)}
/* 01~04에도 05와 같은 ↗ 어포던스 — 종전에는 마지막 행만 클릭 단서를 가졌다 */
.wl .go{color:var(--ink);white-space:nowrap;font-weight:600}
@media(hover:hover){.wl:hover .ti{transform:translateX(.6vw)}.wl:hover .go{color:var(--red)}}
.thumb{width:clamp(72px,7vw,104px);aspect-ratio:16/11;object-fit:cover;border:3px solid #1E1E1C;box-shadow:0 2px 10px rgba(20,20,18,.18);flex-shrink:0}
/* 히어로 워크리스트 은퇴 (2026-08-07 사용자 결정) — 목차화(8/6)를 거쳐 완전 제거.
   히어로는 선언만 하고 1막(스테이지)으로 바로 이어진다. 관련 마크업(.worklist·#pv)은 index에서 삭제됨. */
.t1{transform:rotate(-3.2deg)}.t2{transform:rotate(2.1deg)}.t3{transform:rotate(-1.6deg)}
.wl .me{margin-left:auto;text-align:right;font-size:var(--t-xs);color:var(--faint);line-height:1.65;white-space:nowrap}
.wl.off1 .row{padding-left:8vw}
.wl.off3 .row{padding-left:15vw}
.wl.last .ti{font-size:clamp(1.1rem,1.5vw,1.32rem)}
.hero-foot{display:flex;justify-content:space-between;gap:20px;padding:3.5vh var(--edge) 6vh;font-size:var(--t-xs);color:var(--faint)}
.hero-foot b{color:var(--ink);font-weight:700}
/* 히어로 배경 — v2: 구도선 캔버스 제거. 무지 다크 배경 위에 글씨만 선다. */
#top{position:relative}

/* hover 프리뷰 — 바깥(#pv)은 JS transform 이동 전용, 안쪽(.pv-in)이 등장 트랜지션 담당 (transform 충돌 분리) */
#pv{position:fixed;z-index:40;left:0;top:0;width:0;height:0;pointer-events:none;transform:translate3d(-100px,-100px,0)}
#pv .pv-in{position:absolute;left:0;top:0;width:min(30vw,430px);aspect-ratio:16/10;overflow:hidden;opacity:0;transform:translate(-50%,-56%) rotate(-1.2deg) scale(.94);transition:opacity .25s,transform .25s;border:4px solid #1E1E1C;box-shadow:0 10px 40px rgba(20,20,18,.25)}
#pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
#pv img.on{opacity:1}
#pv.show .pv-in{opacity:1;transform:translate(-50%,-56%) rotate(-1.2deg) scale(1)}

/* ── 섹션 공통 ── */
.section{padding:var(--sp-sec) 0}
.section.tight{padding-top:var(--sp-sec-tight)}
/* 페이지 헤더(히어로) 바로 뒤에 이어지는 섹션 — 헤더가 이미 아래 여백을 갖고 있어
   섹션 기본값(12vh)을 다시 주면 두 배가 된다. 종전에는 6개 페이지에
   style="padding-top:2vh" / "padding-top:0" 인라인으로 흩어져 있던 값이다. */
.section.flush{padding-top:var(--sp-sec-flush)}
.section.flush-0{padding-top:0}
.shead{margin-bottom:var(--sp-head);display:flex;align-items:baseline;gap:18px}
.shead .no{font-size:var(--t-label);color:var(--red);font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0}
.shead h2{font-weight:700;font-size:clamp(1.02rem,1.5vw,var(--t-h2));letter-spacing:-.005em;line-height:1.55;max-width:var(--measure-head)}
.shead h2 .big{display:block;font-weight:400;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:12px}
.shead .sub{margin-left:auto;font-size:var(--t-sm);color:var(--mut);max-width:22em;text-align:right;align-self:flex-end}

/* ── 문제:해결 (교정 부호) ── */
/* 2026-07-28 — 4행 × (교정쌍 + 본문 2문단) 구성을 교정쌍 4줄만 남긴 1블록으로 접었다.
   상세 진단은 /diagnose 페이지가 전담한다(종전에는 홈에서 그 페이지로 가는 링크가 0개였다). */
.fix-sum{border-top:1px solid var(--line);list-style:none}
.fix-sum .fx{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 16px;
  padding:3vh 0;border-bottom:1px solid var(--line);
  font-weight:800;font-size:clamp(1.1rem,1.7vw,var(--t-h2));line-height:1.55;letter-spacing:-.02em}
.fix-sum .ar{color:var(--red);font-weight:400;font-size:.82em}
.strike{position:relative;white-space:nowrap;color:var(--faint)}
.strike svg{position:absolute;left:-2%;top:54%;width:104%;height:10px}
.fixu{position:relative;white-space:nowrap}
.fixu svg{position:absolute;left:-1%;bottom:-3px;width:102%;height:10px}

/* ── 논증 막 (①문제 조사 · ②문제 정의 · ⑤반박 대응) ──
   toss.im 섹션 리듬 이식(뼈대만): "한 섹션 = 한 메시지" 센터 정렬 + 대량 여백.
   센터 축은 이 세 섹션과 #way 안에서만 유효한 예외다 — 정보 밀도가 필요한
   ④증거·⑥플랜·여섯 걸음은 전 페이지 좌측 축(--edge)을 그대로 쓴다.
   (원본 toss도 히어로 직후만 센터고 중반 제품 섹션은 좌측 정렬이다) */
.act .shead{flex-direction:column;align-items:center;text-align:center;gap:14px}
.act .shead h2{max-width:22em}
.act .shead .sub{margin-left:0;text-align:center;align-self:center;max-width:30em}
.act .sec-cta{text-align:center}
/* 논증 막이 연달아 오면 섹션 패딩이 12vh+12vh=24vh로 겹쳐 빈 화면이 한 장 생긴다 */
.act + .act{padding-top:var(--sp-sec-tight)}
/* ① 교정쌍 4줄 — 축만 센터로. 단 단순 center 정렬로 두면 좌우 구절 길이가 제각각이라
   화살표가 줄마다 다른 x에 서고 "무엇 → 무엇" 대응이 눈으로 안 묶인다.
   3열 그리드로 화살표를 한 축에 고정하고, 왼쪽은 우측정렬·오른쪽은 좌측정렬로 마주보게 한다. */
#problem .fix-sum{max-width:44em;margin:0 auto}
#problem .fx{display:grid;grid-template-columns:1fr auto 1fr;gap:0 16px;align-items:baseline}
#problem .fx .strike{justify-self:end;text-align:right}
#problem .fx .fixu{justify-self:start;text-align:left}
/* ② 스토리 박스 — 블록만 센터로 옮기고 안쪽 문단은 좌측 정렬 유지.
   읽으라고 쓴 두 문장을 센터로 두면 줄머리가 매번 달라져 읽기가 느려진다. */
#why .story{margin-left:auto;margin-right:auto;text-align:left;margin-top:0}
/* ⑤ 반박 3문 — 접힌 아코디언이 아니라 펼쳐진 문답. 질문이 카피, 답이 근거 */
.objs{list-style:none;text-align:center;max-width:40em;margin:0 auto}
.ob + .ob{margin-top:8vh}
.oq{font-weight:800;font-size:var(--t-h3);letter-spacing:-.015em;margin-bottom:14px}
.oq::before{content:"";display:block;width:26px;height:2px;background:var(--red);margin:0 auto 16px}
.oa{color:var(--mut);font-size:var(--t-md);line-height:1.7}

/* ── 방식 ──
   v2 — toss.im 섹션 리듬 이식(뼈대만): "한 섹션 = 한 메시지" 센터 정렬 + 대량 여백.
   약속 3종을 3열 카드로 동시에 늘어놓지 않고, 스크롤로 한 번에 하나씩 지나가는
   센터 타이포 3연으로 바꾼다. 카드 그리드는 "정보 3덩어리"로 읽히고
   시퀀스는 "선언 세 번"으로 읽힌다 — 이 섹션이 파는 것은 정보가 아니라 태도다.

   토스에서 가져오는 것과 안 가져오는 것:
   · 가져옴 — 센터 축, 한 화면 한 메시지, 카피 사이 대량 여백, 섹션 배경 톤 전환(.way의 --paper2)
   · 안 가져옴 — 그레이 위계 컬러 시스템(우리는 다크+레드 유지),
     한글 대형 타이포(토스는 자체 서체라 성립. Pretendard 대형은 "앱 볼드" AI티가 남는다.
     대형은 Zodiak 라틴 전담, 한글은 본문 스케일 유지 — ref.md 서체 함정 항목)

   센터 축은 #way 안에서만 유효한 예외다. 전 페이지 좌측 정렬축(--edge, 1440에서 157.6px)은
   그대로 두고, 아래 규칙은 전부 `#way ` 스코프 안에 가둔다. */
.way{background:var(--paper2)}
/* 섹션 헤드도 이 섹션에서는 센터 — 한 섹션 안에 좌·중 두 축이 공존하면 예외가 사고로 보인다 */
#way .shead{flex-direction:column;align-items:center;text-align:center;gap:14px}
#way .shead h2{max-width:20em}
#way .shead .sub{margin-left:0;text-align:center;align-self:center}

#way .creed{list-style:none;text-align:center;margin-top:8vh}
#way .cr + .cr{margin-top:12vh}   /* 여백이 리듬의 본체 — 한 번에 하나만 시야에 들어오게 */
#way .cn{display:block;font-size:var(--t-label);color:var(--red);font-weight:600;letter-spacing:.12em}
#way .ct{font-family:'Zodiak',serif;font-weight:400;font-size:clamp(1.9rem,3.6vw,3.1rem);
  line-height:1.1;letter-spacing:-.01em;margin:12px 0 18px}
#way .cr h3{font-weight:800;font-size:var(--t-h3);letter-spacing:-.015em;margin-bottom:12px}
#way .cd{color:var(--mut);font-size:var(--t-md);max-width:34em;margin:0 auto}
/* 스토리 박스 — 블록만 센터로 옮기고 안쪽 문단은 좌측 정렬 유지.
   읽으라고 쓴 두 문장을 센터로 두면 줄머리가 매번 달라져 읽기가 느려진다. */
/* ③막의 CTA는 센터 — 단 여섯 걸음 블록은 좌측 축이라 그 안의 CTA는 좌측으로 되돌린다.
   축이 바뀐 블록에서 CTA만 센터에 남으면 정렬이 실수처럼 보인다. */
#way .sec-cta{text-align:center}
#way .steps-wrap .sec-cta{text-align:left}
.story{margin-top:12vh;padding:34px 38px;border:1.5px solid var(--ink);position:relative;max-width:760px}
/* .story .tape 제거 (2026-08-07 구도 감사) — 테이프 연출이 얼룩으로 읽혀 삭제. 마크업의 .tape 요소도 함께 제거됨 */
.story p{font-size:var(--t-lg);line-height:1.75;max-width:var(--measure)}
.story p b{font-weight:800}
.story .who{margin-top:16px;font-size:var(--t-xs);color:var(--faint)}

/* ── 과정 ── */
/* 여섯 걸음은 문장 그대로 유지하고 높이만 줄인다 — 행 패딩 3.2vh→1.8vh, 본문 행간 1.6→1.5,
   섹션 헤드 여백 8vh→5vh. 걸음 수나 문장을 깎으면 "어디서 무엇을 결정하는지"라는
   이 섹션의 유일한 기능이 사라진다. */
.steps{border-top:1px solid var(--line);list-style:none}
.step{display:grid;grid-template-columns:96px 1fr 1.4fr;gap:3vw;padding:1.8vh 0;border-bottom:1px solid var(--line);align-items:baseline}
.step .n{font-size:var(--t-label);color:var(--red);font-weight:700;font-variant-numeric:tabular-nums}
.step h3{font-weight:800;font-size:var(--t-h3);letter-spacing:-.015em}
.step p{color:var(--mut);font-size:var(--t-md);line-height:1.5;max-width:var(--measure)}

/* 여섯 걸음 — ③막 안의 하위 블록. 종전 독립 섹션에서 6행 세로 목록이던 것을
   3열 압축(.steps-c)으로 바꿔 세로 길이를 3분의 1로 줄였다. 걸음별 문장은 그대로다.
   여기는 정보 목록이라 ③막의 센터 축을 쓰지 않고 좌측 축으로 되돌린다. */
.steps-wrap{margin-top:10vh;text-align:left}
.sub-h{display:block;text-align:left;font-weight:700;font-size:clamp(1.02rem,1.5vw,var(--t-h2));
  line-height:1.55;letter-spacing:-.005em;max-width:var(--measure-head);margin-bottom:4vh}
.sub-h .lat{display:block;font-family:'Zodiak',serif;font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;letter-spacing:-.01em;margin-bottom:10px}
.steps-c{display:grid;grid-template-columns:repeat(3,1fr);gap:0 3vw;border-top:1px solid var(--line)}
.steps-c .step{display:block;grid-template-columns:none;padding:2.4vh 0;gap:0}
.steps-c .step:nth-child(-n+3){border-bottom:1px solid var(--line)}
.steps-c .step:nth-child(n+4){border-bottom:none}
.steps-c .step .n{display:block;margin-bottom:8px}
.steps-c .step h3{margin-bottom:8px}
.steps-c .step p{max-width:none}

/* ── 작업 ── */
.reel{margin:0 auto 12vh;width:min(46vw,600px);position:relative}
.reel .cap{position:absolute;top:-26px;left:0;font-size:var(--t-label);letter-spacing:.14em;color:var(--faint);font-weight:600;display:flex;align-items:center;gap:8px}
.reel .cap i{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block}
.reel .frame{overflow:hidden;aspect-ratio:16/10;background:#000;border:4px solid #fff;box-shadow:0 12px 44px rgba(20,20,18,.22)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.pf{display:grid;grid-template-columns:1.35fr 1fr;gap:5vw;align-items:center;padding:7vh 0;border-top:1px solid var(--line)}
.pf:last-of-type{border-bottom:1px solid var(--line)}
.pf .shot{border:4px solid #1E1E1C;box-shadow:0 8px 30px rgba(20,20,18,.16)}
.pf:nth-of-type(odd) .shot{transform:rotate(-1.1deg)}
.pf:nth-of-type(even) .shot{transform:rotate(.9deg)}
.pf .ix{font-size:var(--t-label);color:var(--faint);font-weight:600;margin-bottom:16px;letter-spacing:.1em}
/* 케이스 제목은 index에서는 섹션 h2 아래라 h3, work.html에서는 페이지 h1 바로 아래라
   h2다(h1→h3 건너뜀 해소). 두 단계가 같은 활자를 쓰므로 셀렉터를 함께 받는다. */
.pf h2,.pf h3{font-family:'Zodiak',serif;font-weight:400;font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.01em;margin-bottom:6px}
.pf .cat{font-size:var(--t-sm);color:var(--faint);margin-bottom:16px;display:block}
.pf .desc{color:var(--mut);max-width:var(--measure);font-size:var(--t-md)}
.pf .meta{margin-top:20px;padding-top:14px;border-top:1px dashed rgba(20,20,18,.22);font-size:var(--t-sm);color:var(--faint)}
.pf:nth-of-type(even) .shot{order:2}
.pf:nth-of-type(even) .prints{order:2}
/* 종전 HTML에 style="margin-top:16px"로 12곳에 인라인으로 박혀 있던 값 */
.pf .live{margin-top:16px}
/* 홈의 케이스는 논증의 증거로 강등됐다 — 케이스 간 간격을 줄여 자랑 목록이 아니라
   근거 목록처럼 읽히게 한다. work.html(포트폴리오 전용)은 7vh 그대로 둔다. */
#work .pf{padding:5vh 0}

/* ── 가격 ── */
/* 종전: 1.1fr 1.5fr .9fr 를 1,125px 전폭에 펼쳐 플랜명(x=158) → 기능(x=533) → 가격(x=1023)
   으로 한 행에 시선이 세 번 건너뛰었다. 가격과 플랜명은 같은 정보 단위이므로 왼쪽에
   포개고, 기능 목록만 오른쪽에 둔다 — 읽기 밴드가 1,125px → 약 780px로 좁아진다. */
.plans{border-bottom:1px solid var(--line);list-style:none}
.plan{
  display:grid;
  grid-template-columns:minmax(0,16em) minmax(0,26em);
  column-gap:clamp(36px,4vw,64px);
  row-gap:18px;
  padding:5vh 0;border-top:1px solid var(--line);align-items:start;
  position:relative;
}
.plan>div:first-child{grid-column:1;grid-row:1}
.plan ul{grid-column:2;grid-row:1/span 2}
.plan .side{grid-column:1;grid-row:2}
/* 추천 플랜 위계 — 배경 패널 대신 붉은 괘선 + 한 단 큰 이름·가격.
   손그림 동그라미(시그니처 ②)와 경쟁하지 않도록 면이 아니라 선으로 표시한다. */
.plans>.plan:nth-child(2){padding-block:6vh}
.plans>.plan:nth-child(2)::before{
  content:"";position:absolute;left:-20px;top:-1px;bottom:0;width:2px;background:var(--red);
}
.plans>.plan:nth-child(2) h3,.plans>.plan:nth-child(2) .price{font-size:1.5rem}
.plan h3{font-weight:800;font-size:var(--t-h2);letter-spacing:-.02em;position:relative;display:inline-block}
.plan h3 svg{position:absolute;inset:-10px -16px;width:calc(100% + 32px);height:calc(100% + 20px);pointer-events:none}
.plan .term{margin-top:10px;color:var(--faint);font-size:var(--t-sm)}
.plan .rec{font-size:var(--t-label);color:var(--red);font-weight:700;letter-spacing:.1em;display:block;margin-bottom:8px}
.plan ul li{list-style:none;color:var(--mut);font-size:var(--t-md);padding:6px 0;border-bottom:1px dashed rgba(20,20,18,.14)}
.plan ul li:last-child{border-bottom:none}
.plan .side{text-align:left}
.plan .price{font-weight:800;font-size:var(--t-h2);margin-bottom:16px;letter-spacing:-.01em}
.plan .price .ph{color:var(--faint)}
.ul{display:inline-block;font-weight:700;font-size:var(--t-md);border-bottom:2px solid var(--ink);padding-bottom:4px;transition:opacity .2s}
.ul:hover{opacity:.6}
/* 운영 자동화 옵션 (2026-08-10 소개서와 정합 — 업셀 라인 첫 사이트 노출) */
.price-opt{margin-top:26px;padding:10px 0 10px 14px;border-left:2px solid var(--red);font-size:var(--t-sm);color:var(--mut);max-width:44em}
.price-opt b{color:var(--ink)}
.price-note{margin-top:18px;font-size:var(--t-xs);color:var(--faint)}
/* 가격 섹션 상단 "왜 여기냐" 한 줄 — 약속 3종 요약(#way는 이 위에 있고, 비교 견적자는
   되돌아 올라가지 않는다). 알약 뱃지가 아니라 붉은 괘선 한 줄로 단다. */
.pchip{margin:0 0 5vh;padding-left:14px;border-left:2px solid var(--red);
  font-size:var(--t-sm);color:var(--mut);letter-spacing:.01em}
#pricing .shead{margin-bottom:3.5vh}
/* 본문 CTA — 종전 히어로~가격 사이 10.3화면에 본문 CTA가 하나도 없었다.
   섹션 경계마다 가벼운 텍스트 한 줄로 간격을 메운다(버튼 추가 아님). */
.sec-cta{margin-top:5vh;font-size:var(--t-sm);color:var(--mut)}
.work-top{margin-bottom:5vh;font-size:var(--t-sm);color:var(--mut)}
.mid-cta{padding:4vh 0 0;font-size:var(--t-sm);color:var(--mut)}
/* 이 세 줄에는 .rv를 붙이지 않는다 — 한 줄짜리 텍스트의 진입 페이드는 읽는 데 보태는 게
   없으면서 동시 실행 개수만 올린다(페이지가 짧아져 .rv 밀도가 이미 높아졌다). */

/* ── FAQ ── */
.faq{max-width:38em}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 2px;font-weight:700;font-size:var(--t-lg)}
.qa summary::-webkit-details-marker{display:none}
.qa .ic{font-weight:400;font-size:1.25rem;color:var(--faint);transition:transform .25s;flex-shrink:0}
.qa[open] .ic{transform:rotate(45deg)}
.qa .a{padding:0 2px 26px;color:var(--mut);font-size:var(--t-md);max-width:var(--measure);line-height:1.7}

/* ── CTA ── */
.final{padding:calc(var(--sp-sec) * 1.3) 0;background:var(--paper2);text-align:left}
.final h2{font-weight:700;font-size:clamp(1.05rem,1.6vw,var(--t-h2));letter-spacing:-.005em;line-height:1.6}
.final h2 .big{display:block;font-weight:400;font-size:clamp(2.8rem,6.4vw,5.6rem);line-height:1.05;letter-spacing:-.01em;margin-bottom:16px}
.final h2 .lat{letter-spacing:0}
.final p{margin-top:22px;color:var(--mut);font-size:var(--t-md);max-width:var(--measure-sm)}
.final .cta{margin-top:38px;font-size:var(--t-lg);padding:12px 24px}
.final .price-note{margin-top:30px}

/* ── 문의 폼 (2026-07-23) ── */
/* 종전: 1fr 1.2fr 가 전폭을 채워 이름 입력칸 하나가 566px(41.8자)까지 늘어났다.
   짧은 답을 받는 칸은 짧아야 채우기 쉽다 — 폼 전체를 한 읽기 밴드로 묶는다. */
/* 콘택트 그리드 (2026-08-07 수리) — 종전 두 칼럼(21em+27em)이 좌측에 몰려 끝나
   와이드에서 우측이 죽은 공간이 됐다(1920px 실측: 우측 238px 공백). 푸터와 같은
   문법으로 좌 칼럼=좌축, 폼 칼럼=우축 정렬 — 가운데 여백이 의도된 구도가 된다. */
.contact-grid{display:grid;grid-template-columns:minmax(0,21em) minmax(0,27em);
  justify-content:space-between;column-gap:clamp(40px,5vw,80px);row-gap:48px;margin-top:7vh;align-items:start}
.ch{font-weight:800;font-size:var(--t-lg);margin-bottom:14px;letter-spacing:-.01em}
.contact-grid p{color:var(--mut)}
/* 종전 HTML의 style="margin-top:30px" (카카오톡 CTA 감싸개) */
.contact-grid .act{margin-top:30px}
.cform{display:flex;flex-direction:column;gap:24px;max-width:27em}
.cform label{display:flex;flex-direction:column;gap:9px;font-size:var(--t-xs);color:var(--mut);font-weight:600;letter-spacing:.02em}
/* 미포커스 테두리를 --line(1.5:1)에서 --faint(4.86:1)로 — 1.4.11 비텍스트 대비 3:1 기준.
   종전에는 입력할 곳의 경계가 사실상 안 보였다. 포커스 시 --ink 전환은 그대로. */
.cform input[type=text],.cform textarea{background:transparent;border:0;border-bottom:1px solid var(--faint);color:var(--ink);font:inherit;font-size:var(--t-md);padding:11px 2px;border-radius:0;transition:border-color .2s}
.cform input[type=text]:focus,.cform textarea:focus{outline:none;border-bottom-color:var(--ink)}
.cform textarea{resize:vertical;line-height:1.6}
.cform ::placeholder{color:var(--faint)}
/* 동의 레이블은 안에 링크(.pv-link)를 품고 있어 ::after 확장을 쓰면 그 링크를 덮는다.
   그래서 여기만 실제 높이를 20px→24px로 키운다 (폼 한 줄이 4px 높아지는 유일한 지점). */
.cform label.agree{flex-direction:row;align-items:center;gap:10px;font-weight:400;letter-spacing:0;min-height:24px}
.agree input{accent-color:var(--red);width:15px;height:15px;flex-shrink:0}
.pv-link{border-bottom:1px solid var(--faint);color:var(--mut)}
.pv-link:hover{color:var(--ink)}
.submit-ul{align-self:flex-start;background:none;border:0;border-bottom:2px solid var(--ink);padding:0 0 4px;color:var(--ink);font:inherit;font-weight:700;font-size:var(--t-md);cursor:pointer;transition:opacity .2s;margin-top:4px}
@media(hover:hover){.submit-ul:hover{opacity:.6}}
.submit-ul:disabled{opacity:.4;cursor:default}
.hp{position:absolute;left:-9999px;opacity:0}
.form-msg{font-size:var(--t-sm);color:var(--mut);min-height:1.2em;margin:0}
.form-msg.ok{color:var(--ink)}
.form-msg.err{color:var(--red)}

/* ── 푸터 ── */
footer{padding:8vh 0 4vh;border-top:1px solid var(--line)}
/* 푸터 재배분 (2026-08-06) — 종전 1.6fr 1fr 1fr은 문의 칼럼(링크 1개)이 우측 축(--edge 대칭)에서
   176px 못 미쳐 끝나 우측이 휑했다. 링크 칼럼을 auto로 접어 우측 축에 붙이고, 메뉴 8링크는
   데스크톱에서 2열로 접어 푸터 세로 비대를 줄인다. */
.foot-grid{display:grid;grid-template-columns:1fr auto auto;gap:6vw;margin-bottom:7vh}
@media(min-width:721px){
  nav[aria-labelledby="foot-menu"] ul{columns:2;column-gap:38px}
  .foot-col li{break-inside:avoid}
}
.foot-brand{font-weight:800;font-size:var(--t-lg);margin-bottom:12px}
.foot-grid p{color:var(--faint);font-size:var(--t-sm);max-width:var(--measure)}
.foot-col h3{font-size:var(--t-label);letter-spacing:.12em;font-weight:600;color:var(--faint);margin-bottom:14px}
.foot-col a{display:block;color:var(--mut);font-size:var(--t-sm);padding:4px 0}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--faint)}
/* .85em은 부모가 --t-lg(16.96px)인 푸터 브랜드에선 14.4px지만, --t-xs(12.8px)인
   하단 저작권 줄에선 10.88px까지 내려갔다(실측). max()로 12px 하한만 건다 —
   브랜드 줄의 14.4px는 그대로 유지된다. */
.ph-note{color:var(--faint);font-size:var(--t-xs)}
.foot-col ul{list-style:none}

/* ── reveal ── */
/* 워크리스트 제목 슬라이드업 제거 — 히어로는 처음부터 읽히는 상태 (콰이어트 버전) */
.lm{overflow:hidden}.lm>*{display:inline-block}
/* 진입 리빌 — 전 요소 단일 규격 0.35s 페이드.
   translateY를 뺀 이유: 속성 하나당 트랜지션이 하나씩 잡혀 동시 실행 수가 정확히 2배가 된다
   (실측: 4요소 진입 시 8개 → 4개). 카피·레이아웃은 그대로다. */
.rv{opacity:0;transition:opacity .35s ease-out}
.rv.on{opacity:1}
.noanim .rv{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── 모바일 ── */
@media(max-width:820px){
  :root{--sp-sec:10vh;--sp-sec-tight:5vh;--sp-head:5.5vh}
  .nav .links{display:none}
  .hero-intro{flex-direction:column;align-items:flex-start;padding-top:14vh}
  .hero-intro .cnt{text-align:left}
  .wl.off1 .row,.wl.off3 .row{padding-left:0}
  .wl .row{flex-wrap:wrap;gap:14px}
  .wl .me{margin-left:0;text-align:left;white-space:normal;width:100%}
  #pv{display:none}
  .hero-foot span:last-child{display:none}
  .shead{flex-wrap:wrap}
  .shead .sub{margin-left:0;text-align:left;max-width:none}
  /* 교정쌍은 짧은 구절이라 통째로 줄바꿈시킨다 — 구절 안에서 끊기면
     그 위에 겹쳐 그린 손그림 획이 두 줄에 걸쳐 늘어난다 */
  .fix-sum .fx{padding:2.4vh 0;gap:0 12px}
  .strike,.fixu{white-space:nowrap}
  /* 좁은 화면에서는 vh 여백이 그대로면 막 사이가 화면 한 장씩 비어 스크롤만 길어진다 */
  #way .creed{margin-top:7vh}
  #way .cr + .cr{margin-top:9vh}
  .ob + .ob{margin-top:6vh}
  .steps-wrap{margin-top:9vh}
  /* 3열은 360px에서 한 칼럼이 100px 남짓이라 성립하지 않는다 — 2열로 내린다.
     걸음 본문이 2~3줄로 늘어나므로 세로 압축 효과는 데스크톱보다 작다. */
  .steps-c{grid-template-columns:repeat(2,1fr);gap:0 5vw}
  .steps-c .step:nth-child(-n+3){border-bottom:none}
  .steps-c .step:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .story{padding:26px;margin-top:9vh}
  .step{grid-template-columns:64px 1fr;gap:14px}
  .step p{grid-column:2}
  .reel{width:88vw}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .pf{grid-template-columns:1fr;gap:24px;padding:5vh 0}
  .pf:nth-of-type(even) .shot{order:0}
  .pf:nth-of-type(even) .prints{order:0}
  .plan{grid-template-columns:1fr;gap:20px;padding:4.5vh 0}
  /* 단일 칼럼에선 DOM 순서(이름 → 기능 → 가격)를 그대로 쓴다 */
  .plan>div:first-child,.plan ul,.plan .side{grid-column:1;grid-row:auto}
  .plans>.plan:nth-child(2){padding-block:5vh}
  .plans>.plan:nth-child(2)::before{left:-9px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
}

/* ── 마퀴 (FAQ→CTA 브릿지) ── */
.mq{overflow:hidden;border-top:1px solid var(--line);background:var(--paper2)}
/* 마퀴 정지 — 흐르지 않는 정적 텍스트 띠 (콰이어트 버전) */
.mq-track{display:flex;width:max-content}
.mq-set{display:flex;align-items:center;flex-shrink:0}
.mi{display:inline-flex;align-items:center;gap:2.2vw;padding:3.4vh 1.1vw 3.4vh 2.2vw;font-family:'Zodiak',serif;font-weight:400;font-size:clamp(1.7rem,3.4vw,3rem);line-height:1;letter-spacing:-.01em;color:var(--mut);white-space:nowrap}
.mi svg{width:clamp(28px,3vw,44px);height:auto;flex-shrink:0}

/* ── 모바일 메뉴 (main.js가 .nav .links를 복제해 생성 — 820px 이하 전용) ── */
.mbtn{display:none;background:none;border:0;color:var(--ink);font-family:inherit;font-weight:700;font-size:var(--t-sm);letter-spacing:.02em;padding:8px 2px;margin-left:4px;cursor:pointer}
.mmenu{position:fixed;inset:0;z-index:70;background:rgba(13,13,12,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s ease}
.mmenu.open{opacity:1;pointer-events:auto}
.mmenu-in{padding:15vh 8vw 0}
/* 데스크톱 .links(ul)를 그대로 복제하므로 모바일 메뉴도 목록 구조를 유지한다.
   종전에는 nav 안에 a만 늘어놓아 스크린리더가 "항목 N개"를 알리지 못했다. */
.mmenu-list{display:flex;flex-direction:column;gap:4px;list-style:none}
.mmenu-in a{opacity:0;transform:translateY(10px);font-weight:700;font-size:1.45rem;letter-spacing:-.01em;padding:11px 0;color:var(--ink);transition:opacity .3s ease,transform .3s ease;display:block}
.mmenu.open .mmenu-in a{opacity:1;transform:none}
.mmenu-in a.m-cta{margin-top:28px;color:var(--red);font-size:var(--t-lg)}
.mclose{position:absolute;top:16px;right:var(--gut);background:none;border:0;color:var(--mut);font-family:inherit;font-weight:700;font-size:var(--t-sm);padding:10px;cursor:pointer}
@media(max-width:820px){.mbtn{display:block}}
@media(prefers-reduced-motion:reduce){.mmenu,.mmenu-in a{transition:none}}

/* ── 1막 스크롤 스테이지 (2026-08-06 와우 라운드 — 시안 v2 승인 후 이식) ──────────
   마크업은 정적 완전판(4쌍 전부) 그대로 두고, stage.js가 초기화에 성공했을 때만
   .stage-live로 승격한다. reduce·noanim·JS 실패 = 현행 정적 레이아웃 그대로.
   페이스는 시안 v2 확정값(등장 .3s / 획 .34s / 획 간격 .36s / 스텝당 75vh). */
#problem.stage-live{height:300vh;padding:0}
#problem.stage-live .wrap{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
#problem.stage-live .shead{margin-bottom:7vh}
#problem.stage-live .fix-sum{border-top:0;position:relative;height:8em;max-width:none;margin:0}
#problem.stage-live .fx{position:absolute;inset:0;align-content:center;justify-content:center;
  font-size:clamp(1.2rem,3vw,1.9rem);font-weight:700;
  opacity:0;transform:translateY(34px);transition:opacity .3s ease-out,transform .3s cubic-bezier(.2,.7,.2,1)}
#problem.stage-live .fx.on{opacity:1;transform:none}
#problem.stage-live .fx.done{opacity:0;transform:translateY(-46px)}
#problem.stage-live .sec-cta{opacity:0;transition:opacity .3s ease-out;margin-top:5vh}
#problem.stage-live.stage-end .sec-cta{opacity:1}
.stage-dots{display:none}
#problem.stage-live .stage-dots{display:flex;gap:8px;justify-content:center;margin-top:5vh}
#problem.stage-live .stage-dots i{width:5px;height:5px;border-radius:50%;background:var(--faint);opacity:.4;transition:opacity .3s,background .3s}
#problem.stage-live .stage-dots i.on{opacity:1;background:var(--red)}

/* ── 포폴 2판형 인쇄물 (2026-08-07 A안 확정) ─────────────────────────────
   데스크톱 인쇄물(기존 .shot) 모서리에 모바일 판형이 겹쳐 놓인 구성 —
   기기 프레임 없이 실화면 비율만으로 반응형을 증명한다. 3안 렌더 비교 후 채택. */
.prints{position:relative}
.shot-m{position:absolute;width:27%;height:auto;right:-3.5%;bottom:-9%;transform:rotate(2.2deg);
  border:4px solid #1E1E1C;box-shadow:0 6px 22px rgba(20,20,18,.4)}
.pf:nth-of-type(even) .shot-m{right:auto;left:-3.5%;transform:rotate(-2.2deg)}
@media(max-width:720px){
  .shot-m{width:25%;right:-1.5%;bottom:-7%}
  .pf:nth-of-type(even) .shot-m{left:-1.5%}
}

/* ── Six steps 재설계 (2026-08-07) — "대충 그리드" 지적 반영.
   원칙: 구조가 정보를 말하게 한다 — 카피가 "두 번째 걸음에서 갈립니다"라고 주장하므로
   걸음 2만 빨간 연필 프레임으로 승격하고, 각 걸음에 큰 라틴 번호 워터마크로 여정의 순서를 새긴다. */
.steps-c .step{position:relative;padding-right:14px}
.step .bign{position:absolute;right:0;top:1.6vh;font-family:'Zodiak',serif;font-weight:400;
  font-size:clamp(2.2rem,3.2vw,3.2rem);line-height:1;color:rgba(242,241,236,.08);pointer-events:none}
.step.key{padding-left:18px;padding-right:18px}
.step.key .sketchbox{position:absolute;inset:6px -2px;width:calc(100% + 4px);height:calc(100% - 12px);pointer-events:none}
.step.key .sketchbox path{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;opacity:.85}
.step.key .bign{color:rgba(255,77,51,.16);right:14px}
@media(max-width:900px){.step.key{padding-left:14px}}