/* Labelo 랜딩, 라벨 인쇄소: 따뜻한 종이 + 잉크 + 실물 라벨(2026-09-07 리뉴얼 스펙 §6).
   크롬은 종이 + 실선이다. 블러·반투명 배경·그라데이션 메시 금지.
   앱 style.css 와 완전 격리(상호 import 없음, 값 중복은 허용된 설계). */
/* dynamic subset: unicode-range 분할이라 사용 구간만 받는다(스펙 §1.5).
   CDN css 의 family 명은 "Pretendard Variable"(실측): body 스택 1순위와 일치 필수 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* LabeloSerif = MaruBuri(Copyright (c) 2010 NAVER, SIL OFL 1.1) 서브셋. RFN 준수 개명(스펙 §5.5) */
@font-face{font-family:"LabeloSerif";font-weight:700;font-style:normal;font-display:swap;src:url("/fonts/MaruBuri-Bold.subset.woff2") format("woff2")}
/* LabeloMonoLatin = 로컬 mono 래퍼(모바일 정돈 웨이브 D2, 이월 항목 "--mono-kr" 해소).
   원인 실측: mono 폴백의 공백 advance 가 12px 에서 8.20px 로 Pretendard 3.98px 의
   2.06배다. 그래서 "고시 그대로" 같은 두 어절 카피가 자간 음수(-.01em)인데도
   벌어져 보였다(자간 원인 배제 실증). unicode-range 에서 U+0020 을 빼면 공백만
   다음 스택(Pretendard)으로 흘러가고 라틴·숫자 글리프는 mono 로 남는다.
   U+00D7 포함: "80×60 mm" 의 곱셈 기호를 현행 mono 렌더 그대로 보존한다.
   local() 만 쓰므로 네트워크 요청 0건이고, 로컬에 해당 폰트가 없는 기계에서는
   face 가 통째로 실패해 Pretendard 로 폴백된다(그 경로에서도 공백은 좁다). */
/* local() 이름 실측(헤드리스 Chrome, macOS 26): "SF Mono"·"SFMono-Regular"·
   "Menlo"(패밀리명)·"JetBrains Mono"·"Consolas" 는 전부 해석 실패라 face 가
   통째로 죽는다(실패 시 폭 68.22 = serif 폴백). 실제로 붙는 건 PostScript·
   full name 인 "Menlo-Regular"/"Menlo Bold" 계열이고, 그 폭 65.48px 은 현행
   현행 --mono 렌더(65.48px)와 정확히 같다 = 라틴 렌더 무회귀. 가중치 2종을
   따로 선언하는 이유: 소비처 3곳이 전부 font-weight:700 이라 400 단일 face 만
   두면 실 Bold 대신 합성 볼드로 바뀐다. 700 face 가 없는 기계에서는 400 face +
   합성 볼드로 정상 열화한다(Pretendard 로 떨어지지 않는다). */
@font-face{font-family:"LabeloMonoLatin";font-style:normal;font-weight:400;src:local("SF Mono"),local("SFMono-Regular"),local("Menlo-Regular"),local("Menlo Regular"),local("JetBrains Mono"),local("Consolas"),local("Monaco");unicode-range:U+0021-007E,U+00D7}
@font-face{font-family:"LabeloMonoLatin";font-style:normal;font-weight:700;src:local("SF Mono Bold"),local("SFMono-Bold"),local("Menlo-Bold"),local("Menlo Bold"),local("JetBrains Mono Bold"),local("Consolas Bold");unicode-range:U+0021-007E,U+00D7}

:root{
  --accent:#C4402F; --accent-hover:#A63523; --accent-ink:#8C2B1E; --accent-weak:#F5E3DC; --accent-line:#EDCBC2;
  --ink:#1F1B16; --ink-2:#45403A; --muted:#6B6157; --line:#E7DFD2;
  --bg:#F7F1E8; --bg-alt:#ECE3D4;
  --tint-paper:#FFFDF9;
  --fs-12:12px; --fs-13:13px; --fs-15:15px; --fs-16:16px; --fs-17:17px; --fs-18:18px; --fs-22:22px;
  --sp-2:8px; --sp-3:12px; --sp-35:14px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --wrap:1120px;
  --display:"LabeloSerif","Nanum Myeongjo",ui-serif,Georgia,serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Menlo","Consolas",monospace;
  /* 한글 섞임 카피 전용 mono. 라틴·숫자는 mono, 공백과 한글은 Pretendard(위 @font-face).
     주의: 소비처 카피에 새 특수문자를 넣으면 위 unicode-range 동기화가 필요하다.
     범위 밖 글자는 조용히 Pretendard 로 떨어져 모노 정체성만 부분 손실된다
     (에러가 안 나므로 눈으로만 잡힌다). 현재 범위 = 라틴 가시 글리프 + U+00D7. */
  --mono-kr:"LabeloMonoLatin","Pretendard Variable",Pretendard,sans-serif;
  /* 괘선 마감. 급진 제거로 인한 떠보임 방지용 최소 그림자만 유지(§3.2). */
  --shadow:0 1px 0 rgba(31,27,22,.06);
  /* 종이 두께(작업대 위 종이 스펙 §1.2): 두께는 종이(목업 받침·조각·블로그 본문)만
     갖는다. 컨트롤은 잉크 자국이라 평면이고 눌림(press/press-ink)만 파임으로 표현한다.
     위 --shadow 와는 별도 패밀리다: --shadow 는 괘선 마감 헤어라인으로 남고 불변 구역
     목업이 소비한다. 랜딩은 --recess 와 --elev-float 를 정의하지 않는다(선택 상태와
     팝오버가 없어 소비처 0, 참조 0 토큰은 test_no_dead_root_tokens 가 잡는다).
     값은 tests/test_elevation_guard.py 의 ELEV_VOCAB 이 정확히 잠근다. */
  --press:inset 0 2px 3px rgba(31,27,22,.10),inset 0 0 0 1px rgba(31,27,22,.04);
  --press-ink:inset 0 2px 4px rgba(31,27,22,.22),inset 0 0 0 1px rgba(31,27,22,.06);
  --elev-paper:0 0 0 1px rgba(31,27,22,.06),0 1px 2px rgba(31,27,22,.06),0 6px 12px -6px rgba(31,27,22,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;font-family:"Pretendard Variable","Pretendard",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* 워드마크(마크 차별화 스펙 §3.1): "라벨로"(주) -> 인영 -> "Labelo"(부) 순서 고정.
   서명 뒤 날인이 인쇄소 세계관의 제스처다. 꼬리 글자 액센트 장치는 전 표면에서
   폐기했고 tests/test_brand_wordmark.py 가 재발을 잠근다.
   브랜드 헤더 단순화(2026-09-08, Kevin 실사용 피드백): KR nav 는 세 덩어리가
   로고 식별을 흐린다는 판단에 따라 Latin 부기를 뺀 "라벨로" + 인영 두 덩어리로
   조판한다(index.html nav, 블로그 nav). 푸터·문서 헤더는 세 덩어리 조판 유지. */
/* nowrap: 주 표기는 브랜드명 한 덩어리라 어떤 폭에서도 쪼개지면 안 된다.
   flex 아이템이라 320px nav 에서 "라벨로" 가 세로로 파단됐다(실측). */
.wm{font-family:var(--display);font-weight:700;white-space:nowrap}
.wm-seal{width:20px;height:20px;flex:none}
.wm-en{font-family:var(--display);font-weight:700;color:var(--muted);font-size:13px}
/* lp-final 모티프(§3.4): 확대 인영. 정적 transform 이라 신규 애니메이션 0건 유지 */
.wm-seal-lg{width:44px;height:44px;transform:rotate(-3deg);margin-bottom:var(--sp-4)}

/* 섹션 태그(디자인 규율 패스 §5.1): 구 eyebrow·stamp 통일. .lp-step-tag 의
   모노·자간(.08em)·--accent 문법 + uppercase 는 여기서 명시 선언(.lp-step-tag 는
   카피 자체가 대문자라 선언이 없다). 회전·세리프 없음. KR/EN 동형 */
.lp-sec-tag{display:inline-block;font-family:var(--mono-kr);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}

/* 버튼 */
/* transition(질감 패스 §4.3·§7): transform 눌림은 제거했고(눌림은 말미 섹션의
   --press/--press-ink inset 파임이 표현한다) box-shadow 전환을 그 자리에 둔다.
   background 단축은 background-color 롱핸드로 좁힌다. border-color 는 그대로
   유지한다: 아래 .lp-btn-ghost:hover 의 테두리 액센트 전환이 유일한 소비처이고,
   섹션에서 .lp-btn-ghost 에 transition 을 재선언하면 단축 특성상 이 롱핸드가
   통째로 지워진다(그래서 섹션은 .lp-btn 계열의 transition 을 재선언하지 않고
   .lp-lang 만 자기 전환을 선언한다). 모션 감소는 섹션 말미 블록이 끈다. */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:46px;padding:0 var(--sp-6);border-radius:999px;font-weight:700;font-size:var(--fs-15);transition:box-shadow .12s ease,background-color .15s ease,border-color .15s ease;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.lp-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 4px var(--accent-weak)}
.lp-btn-primary{background-color:var(--accent);color:#fff}
.lp-btn-primary:hover{background-color:var(--accent-hover)}
.lp-btn-ghost{background-color:var(--tint-paper);color:var(--ink);border-color:var(--line)}
.lp-btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.lp-btn-lg{height:54px;padding:0 28px;font-size:var(--fs-16)}

/* 네비(§6.3-1): 종이 위 실선. rgba 흰 배경 + 블러 제거 */
.lp-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;width:100%;padding:14px max(24px,calc((100% - var(--wrap))/2));background:var(--bg);border-bottom:1px solid var(--line)}
.lp-brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-18);color:var(--ink);letter-spacing:-.01em}
.lp-nav-links{display:flex;gap:24px;margin-left:auto;font-weight:600;color:var(--muted)}
.lp-nav-links a{transition:color .12s}
.lp-nav-links a:hover{color:var(--ink)}
.lp-nav-cta{margin-left:20px}
/* padding 12 = svg 20px + 24 -> 44x44 타깃(QA 목표값). 종전 6px 는 32x32 로
   WCAG 2.5.8(24px)은 통과하되 44 기준에 못 미쳤다. */
.lp-nav-toggle{display:none;margin-left:auto;background:none;border:none;color:var(--ink);cursor:pointer;padding:12px}
/* 메뉴 안 언어 스위처(모바일 정돈 웨이브 D1). 641 이상에서는 바 쪽 .lp-lang 이
   보이므로 이 항목은 숨긴다(이중 노출 금지). ≤640 에서만 메뉴 항목으로 살아난다. */
.lp-nav-lang{display:none}

/* 히어로(§6.3-2). 그레인 질감 장식은 컬링(디자인 규율 패스 §5.1) */
/* 뷰포트 채움(Kevin 실사용 피드백, 2026-09-08): 첫 폴드가 히어로로 끝나고 다음 섹션 제목이 걸치지 않게.
   75px = .lp-nav 실측 높이(sticky, KR/EN·1440/1280/390 폭 공통, CDP 실측). svh 미지원 폴백으로 vh 우선 선언. */
.lp-hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;width:100%;padding:88px max(24px,calc((100% - var(--wrap))/2)) 84px;min-height:calc(100vh - 75px);min-height:calc(100svh - 75px)}
/* word-break:keep-all: 한글 기본 줄바꿈은 음절 단위라 좁은 폭에서 "…뽑아 드려" 다음
   "요" 한 글자만 다음 줄로 고아 줄바꿈된다(1440px 실측, Kevin 리포트). 어절(단어) 단위로만
   끊게 강제한다. CJK 가 아닌 라틴 텍스트(en.html)에는 normal 과 동등해 영향이 없다.
   결정 변경(2026-09-10, Kevin 재실사용 피드백): 이전에는 본문 문단(.lp-sub 등)을
   긴 URL 강제 파단 트레이드오프를 이유로 제외했으나, 실측(1440/1280)에서 본문
   전반이 음절 중간에 끊기고 카드 문구가 "요." 2자 고아 줄로 남는 결함이 재현돼
   뒤집는다. 본문 요소에도 keep-all 을 걸되 overflow-wrap:break-word 를 같이
   선언해 keep-all 로도 못 끊는 긴 토큰(URL 등)은 강제 파단되게 안전장치를 둔다.
   text-wrap:pretty 도 같이 건다(미지원 브라우저는 무시, 점진 개선). 실측 결과
   "요." 2자 고아는 keep-all 재배치만으로 1440/1280 에서 이미 해소됐다(빠진
   알레르기 카드 마지막 줄이 "있어요." 로 바뀜, 카피 변경 없음).
   조상 상속 통합(2026-09-11 리뷰 M5): 7개 셀렉터(.lp-sub .lp-lead .lp-step p
   .lp-card p .lp-import-copy p .lp-faq-item summary/p)에 세 선언을 각각
   반복하던 걸 공통 조상 4곳(.lp-hero-copy .lp-section .lp-final .lp-footer)
   한 선언으로 통합했다(아래 규칙, word-break/overflow-wrap/text-wrap 은 전부
   상속 속성). .lp-mock 은 .lp-hero-visual 아래라 .lp-hero-copy 밖이고
   .lp-section 도 아니라서(히어로 자체는 .lp-hero 클래스, .lp-section 이 아님)
   이 상속이 GUARD:INVARIANT 구역에 닿지 않는다(실측 확인, 조상 체인에 없음).
   .lp-hero h1/.lp-h2/.lp-final h2 제목 계층은 word-break:keep-all 단독
   선언을 그대로 유지한다(overflow-wrap/text-wrap 은 조상 상속으로 추가
   수신하지만 제목에 해가 없는 점진 개선이라 문제 없음). */
.lp-hero-copy,.lp-section,.lp-final,.lp-footer{word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
/* clamp 하한 34 -> 32(트랜치 B6, 이월 해소). 375(iPhone SE)에서 KR 히어로 제목은
   34px 에서 3줄(120.33px), 33px 이하에서 2줄(77.88px)로 떨어진다 = 하한 1px 차이가
   만드는 줄바꿈 절벽이다. 절벽 바로 위(33)에 두면 글리프 메트릭이 조금만 움직여도
   3줄로 되돌아가므로 32 로 여유를 둔다. 상한 54 는 불변이라 데스크톱 무회귀
   (1440 은 5.2vw=74.88 이 상한에 걸려 하한과 무관). 390 은 하한이 걸리지만 이미
   2줄이라 80.22 -> 75.5 로 줄 뿐이고 목업 폴드 진입이 더 좋아진다. */
.lp-hero h1{font-size:clamp(32px,5.2vw,54px);line-height:1.18;letter-spacing:-.02em;margin:14px 0 20px;font-weight:700;word-break:keep-all}
.lp-sub{font-size:clamp(16px,2vw,19px);color:var(--ink-2);margin:0 0 var(--sp-8);max-width:33em}
.lp-cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* 검인 태그(§4.1): 스탯 카드 문법 폐기, 다이컷 점선 + 장별 미세 회전. 펀치 구멍은
   라디오 버튼으로 읽혀 폐기했다(작업대 위 종이 K10). */
.lp-proof{display:flex;gap:14px;flex-wrap:wrap;margin:var(--sp-6) 0 0}
.lp-proof-tag{position:relative;background:var(--tint-paper);border:1px solid var(--line);
  border-radius:3px;padding:10px 16px;box-shadow:var(--shadow);
  outline:1px dashed var(--line);outline-offset:-5px}
.lp-proof-tag:nth-child(1){transform:rotate(-1.2deg)}
.lp-proof-tag:nth-child(2){transform:rotate(.7deg)}
.lp-proof-tag:nth-child(3){transform:rotate(-.6deg)}
.lp-proof-tag b{display:block;font-family:var(--mono-kr);font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--accent)}
.lp-proof-tag span{font-size:var(--fs-12);color:var(--muted)}
.lp-proof-note{margin:12px 0 0;font-size:13px;color:var(--muted)}

/* 히어로 비주얼 = 작업대 위 흑백 인쇄물(§6.3-2). #EFE7DA/#D6CCBB 는 작업대 소품
   하드코딩(앱 .desk 와 동일 근거, §7.2), #111/#555/#ddd 는 라벨 종이 문법(.nfacts 동형) */
.lp-hero-visual{display:flex;justify-content:center}
.lp-desk{position:relative;width:100%;max-width:430px;background:#EFE7DA;border:1px solid #D6CCBB;border-radius:4px;padding:32px}  /* 상단 46px 는 눈금자 여유였다. 눈금자 컬링과 함께 균등 32px 재판정. radius 4px(작업대 위 종이 §3.1): 매트는 가구라 다이컷 3px 이 아니고, 16px 알약 모서리도 아니다 */
.lp-mock-wrap{position:relative;width:100%;max-width:360px;margin:0 auto}
/* GUARD:INVARIANT-START lp-mock */
.lp-mock{position:relative;z-index:1;background:#fff;border:1.5px solid #111;border-radius:4px;box-shadow:var(--shadow);padding:22px 22px 16px;color:#111;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.lp-mock-cap{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#111;margin-bottom:6px}
.lp-mock-title{display:flex;align-items:baseline;justify-content:space-between;border-bottom:3px solid #111;padding-bottom:8px}
.lp-mock-title b{font-size:20px;font-weight:800}
.lp-mock-title span{font-size:12px;color:#555;font-weight:600}
.lp-mock-serv{font-size:12px;color:#555;padding:8px 0;border-bottom:1px solid #ddd}
.lp-mock-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #ddd;font-size:14px}
.lp-mock-row b{font-weight:700}
.lp-mock-row .dv{color:#111;font-weight:800;min-width:38px;text-align:right}
.lp-mock-row.cal{font-weight:800;font-size:15px}
.lp-mock-row.sub{padding-left:14px;color:#555}
.lp-mock-foot{font-size:10.5px;color:#555;padding-top:8px}
/* GUARD:INVARIANT-END lp-mock */
/* 히어로 라벨 조각(작업대 위 종이 §4.2, K6 H1): 목업 받침(.lp-mock-wrap)과 이 조각들만
   페이지에서 그림자를 받는다(그림자는 말미 GUARD:ELEVATION 섹션). 좌표는 구 배지 좌표
   승계(cite = 구 chip-a, aller = 구 chip-b, 목업 글리프 교집합 0 실증값). recy 는
   aller 와 같은 하단 여백 띠의 우측에 둔다: 조각 폭(도안 32px + 글자)이 목업 우측 패딩
   22px 보다 훨씬 넓어 행 띠 높이에 두면 %DV 글리프와 겹친다. 겹침 0 은
   tests/test_landing_piece_overlap_gate.py 가 실측한다. nowrap: 조각이 2줄이 되면
   세로로 커져 여백 띠를 벗어난다. 조각은 회전하지 않는다(미세 회전은 검인 태그 시그니처). */
.lp-piece{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--tint-paper);border:1px solid var(--line);border-radius:3px;padding:var(--sp-2) var(--sp-3);font-size:13px;font-weight:600;word-break:keep-all;white-space:nowrap}
.lp-piece-h{font-size:var(--fs-12);font-weight:700;letter-spacing:.02em;color:var(--muted)}
.lp-piece-cite{top:-23px;right:-18px;font-family:var(--mono-kr);font-variant-numeric:tabular-nums;font-size:var(--fs-12);font-weight:700;letter-spacing:.02em;color:var(--accent-ink);background:var(--accent-weak);border-color:var(--accent-line)}
.lp-piece-aller{bottom:-28px;left:-26px}
.lp-piece-recy{bottom:-28px;right:-30px}
.lp-piece-recy svg{width:32px;height:auto}

/* 섹션 공통 */
/* 섹션 구획은 채움이 아니라 헤어라인이다(작업대 위 종이 §3.2). 64 는 G2 4배수.
   괘선은 섹션 "사이"에만 선다(형제 결합자): 랜딩은 히어로 뒤 첫 섹션부터 전부 받고,
   블로그 목록(blog/index.html)의 유일한 섹션은 .lp-nav 의 border-bottom 바로 아래라
   받지 않는다(2px 이음 방지, 계획 B-5). 블로그 글(.lp-article)은 무관. */
.lp-section{max-width:var(--wrap);margin:0 auto;padding:64px 24px}
.lp-hero + .lp-section, .lp-section + .lp-section{border-top:1px solid var(--line)}
.lp-section-alt{max-width:none;border-block:1px solid var(--line)}
.lp-section-alt>*{max-width:var(--wrap);margin-inline:auto}
/* 제목 계층 행간(트리아지 ②, 2026-09-14 트랜치 B2): body line-height:1.6 은
   본문 리듬이라 제목에 무선언 상속되면 안 된다. 아래 제목 규칙 전량이 자기
   행간을 선언한다 - clamp 계열(25~38px) 1.2, 18~22px 계열 1.3.
   반행간 보상: 1.6 -> 1.2 로 줄면 제목 아래 반행간이 (1.6-1.2) x fs / 2 만큼
   사라진다(36px 기준 7.2px). 6px 이상 사라지는 규칙만 margin-bottom 으로 4/8
   그리드(G2) 위에서 되돌린다. 18~22px 계열은 손실이 2.7~3.3px 라 그리드
   해상도 밑이므로 보상 대상이 아니다.
   보상값은 **인접 마진 상쇄를 이긴 뒤** 기준이다(리뷰 I4 실측): .lp-h2 의
   실소비처는 .lp-head 이고 다음 형제 .lp-lead 가 margin-top:12px 라, 8px 를
   주면 max(8,12)=12 로 통째로 먹혀 렌더 효과가 0 이었다(0px/8px 스윕 모두
   실간격 12px 실측). 20px 이어야 max(20,12)=20 = 종전 12 + 보상 8 이 된다.
   .lp-final h2 / .lp-prose>h2 와 같은 값이라 제목 계층 리듬도 일치한다. */
.lp-head{text-align:center;max-width:38rem;margin:0 auto 48px}
.lp-h2{font-size:clamp(25px,3.6vw,36px);line-height:1.2;letter-spacing:-.015em;font-weight:700;margin:0 0 20px;word-break:keep-all}
.lp-lead{color:var(--muted);font-size:clamp(15px,1.8vw,17px);margin:12px 0 0}

/* 3스텝(§6.3-4): 그림자 카드 -> 실선 괘선, hover 승격 제거(정적 마감).
   인쇄소 어휘 확장(2026-09-10, 피드백 4 - 하단 콘셉트 회귀, Kevin 서명): radius 를
   히어로 실측 어휘(.lp-proof-tag 다이컷 3px)로 통일. 범용 스트로크 SVG 아이콘
   타일(구 "ico" 클래스, tests/test_brand_wordmark.py DEAD_MARKS 잠금이라 이 주석도
   접두 뺀 표기를 쓴다)은 전부 폐기했다(자립 근거, 2026-09-11 리뷰 M9 - 워크트리
   소멸 대비: 제거 단독안과 "제거+01/02/03 번호표 교체"안을 헤드리스 inventory로
   비교한 결과, #how(STEP 태그)·#import(sec-tag)는 이미 모노 정체성 표지가 있어
   아이콘이 중복이었지만 #why 만 표지가 없었다. 그래서 #why 카드에만
   .lp-card-no(모노·tabular-nums·accent, .lp-proof-tag b 문법 직수)를 신설해
   히어로 어휘와의 적극적 토큰 일치를 만들었고, #how·#import 는 중복을 피해
   그대로 뒀다. 두 상태 모두 radius 통일·아이콘 삭제는 동일해 정합 손실은
   없고, 교체안만 히어로와의 토큰 일치를 추가로 만든다). */
/* 3스텝 = 헤어라인 표(§3.2): 카드 2연속을 푼다. 열 사이 세로 괘선, 위아래 가로 괘선. */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-step{position:relative;background:transparent;border:0;border-left:1px solid var(--line);border-radius:0;padding:32px 24px}
.lp-step:first-child{border-left:0}
.lp-step-tag{display:block;font-family:var(--mono-kr);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--accent);margin-bottom:6px}
.lp-step h3{font-size:18px;line-height:1.3;margin:0 0 8px;font-weight:700;letter-spacing:-.01em}
.lp-step p{margin:0;color:var(--muted);font-size:15px}

/* 차별화 카드. 번호표 = .lp-proof-tag b 문법 직수(모노·tabular-nums·17px·accent) */
.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.lp-card{background:var(--tint-paper);border:1px solid var(--line);border-radius:3px;padding:var(--sp-8) var(--sp-6)}
.lp-card-no{display:block;font-family:var(--mono-kr);font-variant-numeric:tabular-nums;font-size:17px;font-weight:700;color:var(--accent);margin-bottom:10px}
.lp-card h3{font-size:18px;line-height:1.3;margin:0 0 10px;font-weight:700;letter-spacing:-.01em}
.lp-card p{margin:0;color:var(--muted);font-size:15px}

/* 수입 서브(§6.3-7): 그라데이션 -> 종이 패널 + 실선. radius 도 3px 다이컷으로
   통일(피드백 4) - 24px 는 페이지에서 가장 둥근 패널이라 남기면 불일치가 더
   두드러진다. --radius-xl 소비처가 이것 하나라 토큰 정의도 같이 지운다. */
.lp-import{position:relative;overflow:hidden;background:var(--tint-paper);border:1px solid var(--line);border-radius:3px;padding:56px 48px}
.lp-import-copy{max-width:60ch;margin:0 auto;text-align:center;position:relative;z-index:1}
.lp-import-copy .lp-h2{margin-bottom:20px}
.lp-import-copy p{color:var(--ink-2);margin:0 0 var(--sp-6)}

/* FAQ */
/* FAQ = 문서 목록(§3.2): 카드 4장이 아니라 헤어라인으로 나뉜 한 장. 첫 문항은 기본 펼침(K11).
   첫 장은 :first-of-type(랜딩 index.html:178 과 블로그 글 .lp-faq 둘 다 details 가 첫 자식이지만
   컨테이너에 제목이 들어와도 꺼지지 않게, 계획 B-5). */
.lp-faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.lp-faq-item{background:var(--tint-paper);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px var(--sp-6)}
.lp-faq-item:first-of-type{border-top:1px solid var(--line)}
.lp-faq-item[open]{box-shadow:var(--shadow)}
.lp-faq-item summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:center;gap:12px}
.lp-faq-item summary::-webkit-details-marker{display:none}
.lp-faq-item summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s ease;margin-top:-4px}
.lp-faq-item[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.lp-faq-item p{margin:0 0 var(--sp-4);color:var(--muted);font-size:15px}

/* 최종 CTA(§6.3-8): 종이 배경 + 상단 괘선 + 중앙 인영 모티프(마크 차별화 §3.4) */
.lp-final{position:relative;text-align:center;padding:96px 24px;background:var(--bg);border-top:1px solid var(--line)}
.lp-final h2{font-size:clamp(27px,3.8vw,38px);line-height:1.2;letter-spacing:-.015em;font-weight:700;margin:0 0 20px;word-break:keep-all}
.lp-final p{color:var(--muted);margin:0 0 var(--sp-8)}

/* 푸터 */
.lp-footer{max-width:var(--wrap);margin:0 auto;padding:44px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;color:var(--muted);border-top:1px solid var(--line)}
.lp-footer-brand{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--ink);font-weight:700}
/* flex-wrap:wrap(모바일 정돈 웨이브 D6): 미지정일 때 390 에서 링크 5개가
   콘텐츠 경계(366)를 16.73px 침범하고 "앱 열기"가 27.66px 로 눌려 2줄로
   파단됐다(전 링크 stretch 높이 51.19px). 전 폭에서 무해한 선언이다. */
.lp-footer-links{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-left:auto;font-weight:600}
.lp-footer-links a:hover{color:var(--ink)}
.lp-footer-copy{margin:0;font-size:13px;width:100%}

/* 반응형 */
@media (max-width:860px){
  /* D5 히어로 리듬(모바일 정돈 웨이브). 수용 기준은 390x844 에서 .lp-mock
     rect.top ≤ 700(첫 화면 노출 ≥ 144px)인데 종전은 837.14 였고, D3·D4 의
     세로 스택으로 검인 밴드가 163.56 -> 253.79 로 늘면서 925.92 가 됐다.
     1차 수단(간격 압축) 기각 근거(산술): 필요 절감 225.92px 대 ≤860 블록에서
     압축 가능한 세로 리듬 총합 218px(패딩 56 + sec-tag 16 + h1 34 + sub 32 +
     proof 24 + note 12 + 그리드 갭 44). 전부 0 으로 만드는 극단에서도 7.92px
     모자라므로 압축만으로는 도달 불가 = 2차 수단(시각 재배열)으로 전환한다.
     방식: .lp-hero-copy 를 display:contents 로 지워 카피 6개를 히어로 그리드의
     직계 아이템으로 올리고 order 로 [태그·제목·본문·CTA] -> 비주얼 ->
     [검인·주석] 순으로 재배열한다(내러티브: 제목 -> CTA -> 제품 -> 증빙).
     - 접근성: order 는 시각 순서만 바꾼다. 재배열로 앞뒤가 바뀌는 .lp-hero-visual
       (.lp-mock)·.lp-proof·.lp-proof-note 셋 다 포커스 가능 요소가 0개라
       탭 순서 영향이 없다(실측 재확인). DOM 순서는 그대로다.
     - 상속: word-break/overflow-wrap/text-wrap(조상 통합 규칙)과 text-align 은
       전부 상속 속성이라 display:contents 를 그대로 통과한다. .lp-hero-copy 에
       직접 걸린 박스 속성은 없어 이전할 선언도 없다(전수 확인).
     - 간격: 박스가 사라지면서 형제 간 간격이 그리드 갭 + 각 아이템 마진의 합이
       된다. 갭을 16 으로 낮추고 카피 마진을 재지정해 16/20/32/40/32/16 리듬으로
       조판한다(종전 흐름 조판의 30/20/32/44/24/12 를 대체).
     - min-height:auto: calc(100svh - 75px)=769px 는 실높이(1264.67)에 한참
       못 미쳐 390 에서는 이미 무의미하다(렌더 델타 0 실측). 다만 아이템이
       7개로 늘어난 지금은 세로로 긴 641~860 뷰포트에서 auto 행이 stretch 로
       벌어질 수 있어, 그 실패 경로를 막으려고 해제한다. */
  .lp-hero{grid-template-columns:1fr;gap:16px;padding:56px 24px 64px;min-height:auto}
  .lp-hero-copy{display:contents;text-align:center}
  .lp-hero-visual{order:1}
  .lp-hero .lp-proof{order:2;margin-top:16px}
  .lp-hero .lp-proof-note{order:3;margin-top:0}
  .lp-hero h1{margin:0 0 4px}
  .lp-hero .lp-sub{margin-bottom:16px}
  .lp-hero .lp-cta-row{margin-bottom:24px}
  .lp-hero .lp-cta-row,.lp-hero .lp-proof{justify-content:center}
  .lp-sub{margin-inline:auto}
  /* margin-inline:auto(모바일 정돈 웨이브 D6 보조): max-width:460px 만 있으면
     508~860 밴드에서 1열 카드가 좌측으로 쏠린다(390 은 콘텐츠 342 < 460 이라
     무영향, 1440 은 이 블록 밖이라 무영향 - 둘 다 렌더 델타 0 실측). */
  .lp-steps,.lp-cards{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  /* 1열이면 세로 괘선 대신 가로 괘선으로 행을 나눈다(§3.2) */
  .lp-step{border-left:0;border-top:1px solid var(--line)}
  .lp-step:first-child{border-top:0}
  .lp-import{padding:40px 24px}
}
@media (max-width:640px){
  /* D1. 바에는 로고·CTA·햄버거 세 덩어리만 남기고 언어 스위처는 메뉴로 옮긴다.
     종전: 인플로 4개(267.72px) + 갭 60 = 327.72 라 슬랙 14.28px 을 .lp-nav-cta 와
     .lp-nav-toggle 의 auto 마진 둘이 7.14px 씩 나눠 가져 시각 간격이 27/20/27 로
     균일해졌다(묶음 구분 소멸). auto 마진을 CTA 한 곳만 남기면 슬랙이 전부
     로고 뒤로 모여 "로고 <- 슬랙 -> [CTA·햄버거]" 두 덩어리로 읽힌다. */
  .lp-nav>.lp-lang{display:none}
  .lp-nav-toggle{margin-left:0}
  .lp-nav-links .lp-nav-lang{display:block}
  /* D3. 검인 태그 1열 세로 스택. 390 콘텐츠 342px 에서 3개 1행은 478px 이
     필요해 성립할 수 없고, wrap 하면 3번째만 홀로 가운데 놓인다. 폭을 통일해야
     다이컷 티켓을 포개 놓은 인상이 된다(회전 3종은 그대로 유지). */
  .lp-proof{flex-direction:column;align-items:center}
  .lp-proof-tag{width:220px;max-width:100%}
  /* D4. CTA 세로 스택 + 동일 폭. 158.5+12+189.84=360.34 > 342 라 어차피 2행인데
     행별 독립 가운데 정렬이라 left 가 115.75/100.08 로 들쭉날쭉했다.
     .lp-btn 의 white-space:nowrap 은 손대지 않고(nowrap 잠금 화이트리스트)
     폭 지정으로만 해결한다. 320px 는 현행 최장 카피 189.84px 에 여유가 크다. */
  .lp-cta-row{flex-direction:column;align-items:center}
  .lp-cta-row .lp-btn{width:min(100%,320px)}
  .lp-nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 24px;display:none}
  .lp-nav-links.open{display:flex}
  .lp-nav-links a{padding:12px 0}
  .lp-nav-cta{margin-left:auto}
  .lp-nav-toggle{display:inline-flex}
  .wm-en{display:none}                           /* 헤더 nav 는 이제 Latin 부기가 아예 없다(브랜드 헤더 단순화). 이 규칙은 남은 유일한 소비처인 lp-footer-brand 의 Latin 부기를 폰에서 생략. style.css:733 미러링 */
  /* 조각은 정적 흐름(§4.2): 목업 아래 한 줄로 흐른다. .lp-mock 규칙 자체(불변 구역)는
     무접촉이고 flex 아이템 지정은 자식 셀렉터로 구역 밖에 둔다. */
  .lp-mock-wrap{display:flex;flex-wrap:wrap}
  .lp-mock-wrap > .lp-mock{flex:0 0 100%}
  .lp-piece{position:static;margin:12px 8px 0 0}
  .lp-footer-links{margin-left:0}
}

/* 언어 스위처(KR <-> EN 랜딩). 구 슬레이트 하드코딩 4건을 웜 토큰으로(실측 발견분) */
.lp-lang{font-size:var(--fs-12); font-weight:700; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:6px 10px; text-decoration:none; flex:none}
.lp-lang:hover{color:var(--ink); background-color:var(--bg-alt)}

/* 블로그, 글 셸·본문(prose). 기존 토큰만 쓰고 새 커스텀 프로퍼티를 만들지 않는다.
   생성기: tools/build_blog.py (설계: docs/superpowers/specs/2026-08-25-blog-infra-design.md) */
/* 블로그 본문 = 놓인 종이 1장(작업대 위 종이 §1.4): 720 - 80 = 본문 폭 약 640(17px 기준 약 37자). */
.lp-article{max-width:720px;margin:32px auto 64px;padding:48px 40px 64px;background:var(--tint-paper);border:1px solid var(--line);border-radius:3px}
.lp-article h1{font-size:clamp(28px,4.4vw,42px);line-height:1.22;letter-spacing:-.03em;font-weight:700;margin:0 0 14px}
.lp-post-meta{margin:0 0 40px;font-size:var(--fs-13);letter-spacing:.02em;font-weight:600;color:var(--muted)}

.lp-prose{font-size:var(--fs-17);line-height:1.8;color:var(--ink-2)}
.lp-prose>h2{font-size:clamp(21px,2.8vw,27px);line-height:1.2;letter-spacing:-.025em;font-weight:700;color:var(--ink);margin:48px 0 20px}
.lp-prose>h3{font-size:18px;line-height:1.3;letter-spacing:-.01em;font-weight:700;color:var(--ink);margin:32px 0 10px}
.lp-prose>p{margin:0 0 20px}
.lp-prose>ul,.lp-prose>ol{margin:0 0 20px;padding-left:24px}
.lp-prose li{margin:var(--sp-2) 0}
.lp-prose strong{font-weight:700;color:var(--ink)}
.lp-prose code{font-family:var(--mono);font-size:.88em;background:var(--bg-alt);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--ink)}
/* 전역 a{color:inherit;text-decoration:none} 상쇄, 없으면 본문 링크가 보이지 않는다. */
.lp-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.lp-prose a:hover{color:var(--accent-ink)}
.lp-prose>table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.lp-prose th,.lp-prose td{border-bottom:1px solid var(--line);padding:var(--sp-3) var(--sp-3);text-align:left;vertical-align:top}
.lp-prose thead th{color:var(--ink);font-weight:700;border-bottom:2px solid var(--ink)}
.lp-prose>.lp-faq{margin:0 0 24px}

/* 인용 -> 콜아웃(§6.3-9). radius 3px(2026-09-11 리뷰 M6 (b)판정): 인쇄소
   어휘 확장을 블로그 브랜드 표면까지 통일. .lp-prose code(아래, 10px 인라인
   코드 칩)는 텍스트 인라인 요소라 예외로 존치한다. */
.lp-callout{margin:0 0 24px;padding:var(--sp-35) var(--sp-4);background:var(--accent-weak);border-left:3px solid var(--accent);border-radius:3px;color:var(--ink-2)}
.lp-callout p{margin:0}

/* 함께 읽으면 좋은 글 */
.lp-related{margin:64px 0 0;padding-top:var(--sp-8);border-top:1px solid var(--line)}
.lp-related h2{font-size:var(--fs-18);line-height:1.3;font-weight:700;letter-spacing:-.01em;margin:0 0 var(--sp-4)}
.lp-related .lp-cards{grid-template-columns:repeat(2,1fr)}

/* 글 하단 CTA. radius 3px(2026-09-11 리뷰 M6 (b)판정, .lp-callout 과 동일 근거) */
.lp-post-cta{margin:52px 0 0;padding:40px var(--sp-6);text-align:center;background:var(--tint-paper);border:1px solid var(--line);border-radius:3px}
.lp-post-cta h2{font-size:var(--fs-22);line-height:1.3;letter-spacing:-.02em;font-weight:700;margin:0 0 8px;color:var(--ink)}
.lp-post-cta p{margin:0 0 var(--sp-6);color:var(--muted);font-size:15px}

/* 목록 카드 */
/* 목록·related 카드의 대표 이미지(설계: docs/superpowers/specs/2026-09-19-blog-images-design.md).
   카드 패딩 var(--sp-8) var(--sp-6) 를 음수 마진으로 상쇄한 풀블리드. 폭은 콘텐츠 폭 +
   좌우 패딩(display:block 의 width:100% 는 콘텐츠 폭이라 우측이 비므로 calc). 전역
   img{max-width:100%} 가 calc 를 콘텐츠 폭으로 도로 누르므로 max-width:none. 모서리는
   a.lp-card 의 overflow:hidden 이 카드 radius 3px 로 자른다. 랜딩 #why 의
   article.lp-card 는 셀렉터 밖이라 무접촉. */
a.lp-card{display:block;overflow:hidden}
.lp-card-img{display:block;width:calc(100% + var(--sp-6) * 2);max-width:none;height:auto;aspect-ratio:600/314;object-fit:cover;margin:calc(var(--sp-8) * -1) calc(var(--sp-6) * -1) var(--sp-4);background-color:var(--bg-alt)}
/* 글 상단 히어로. radius 3px 는 .lp-article/.lp-card 와 같은 종이 리터럴
   (landing.css 에 --r-* 토큰이 없다, RADIUS_PX_ALLOWED landing 0/3/4/999). */
.lp-hero-img{margin:0 0 var(--sp-6);border:1px solid var(--line);border-radius:3px;overflow:hidden;background-color:var(--bg-alt)}
.lp-hero-img img{display:block;width:100%;height:auto;aspect-ratio:1200/627;object-fit:cover}
/* 사진 출처 1줄. 전역 a{text-decoration:none} 상쇄로 밑줄을 준다(.lp-prose 밖). */
.lp-photo-credit{margin:var(--sp-8) 0 0;font-size:var(--fs-12);color:var(--muted)}
.lp-photo-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lp-card h2{font-size:18px;line-height:1.3;margin:0 0 10px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.lp-card-date{display:block;margin-top:14px;font-size:13px;letter-spacing:.02em;font-weight:600;color:var(--muted)}
.lp-blog-empty{max-width:760px;margin:0 auto;text-align:center;color:var(--muted)}

@media (max-width:860px){
  .lp-related .lp-cards{grid-template-columns:1fr}
}
@media (max-width:640px){
  .lp-article{padding:36px var(--sp-6) 60px}
  .lp-prose{font-size:16px}
  .lp-prose>table{display:block;overflow-x:auto}
}

@media print{
  .lp-btn-ghost, .lp-btn-primary, .lp-lang, .lp-mock-wrap, .lp-piece, .lp-article{box-shadow:none !important; background-image:none !important}
}

/* GUARD:ELEVATION-START */
/* 종이 두께 단일 생성점(작업대 위 종이 스펙 §1.1). 캔버스(작업대)는 어둡고
   평면이다. 종이는 밝고, 페이지에서 그림자를 받는 유일한 물체다. 컨트롤은
   종이 위 잉크 자국이라 평면이며, 눌림(press)만 파임으로 표현한다.
   파일 말미인 이유는 동률 특이성의 background 단축 리셋을 후행 승리로
   이기는 것이다. tests/test_elevation_guard.py (a) 가 "END 뒤는 공백뿐"을
   단언한다. 순서: (1) active (3) paper. 랜딩에는 선택 상태(recess)와 무장식
   변형이 없어 (2)(4) 는 비어 있다. 셀렉터 집합은 ELEVATED 레지스트리와
   양방향 정확 일치다. 검인 태그·헤어라인 카드·콜아웃·FAQ 장·CTA 밴드·작업대·
   라벨 종이 목업은 평면이고, 그 표면의 --shadow 헤어라인은 별도 패밀리다. */

/* (1) active: 눌림은 inset 파임으로만. transform 은 쓰지 않는다 */
.lp-btn-ghost:active,
.lp-lang:active{box-shadow:var(--press)}
.lp-btn-primary:active{box-shadow:var(--press-ink)}

/* (3) paper: 놓인 종이. 목업 받침·히어로 조각·블로그 본문 */
.lp-mock-wrap,
.lp-piece,
.lp-article{box-shadow:var(--elev-paper)}
/* GUARD:ELEVATION-END */