/* 랜딩 전용 레이어 — 잉크·도장 시스템(/legal/assets/release.css)의 확장.
 *
 * 규율 하나: **이 파일에 맨 요소로 시작하는 규칙이 있으면 안 된다.** release.css는 운영 중인
 * /legal/terms · /legal/privacy · /support · /account-deletion 네 페이지가 공유하는 파일이고,
 * 여기서 요소 셀렉터 하나가 새면 그 네 페이지가 즉시 깨진다. 모든 규칙은 `.landing`(또는
 * `:root.js-on .landing`)으로 시작한다. @ 규칙만 예외.
 * 이 불변식은 `node scripts/check-public-release.mjs`가 기계로 강제한다(predeploy 경유).
 *
 * 시각 방향은 「기입선(記入線)」 — 왼쪽 여백에 잉크 한 줄이 그어지고 아홉 개 항목이 그 선에
 * 걸려 기입되며, 마지막에 페이지가 자기 자신의 TRALALERO.md 행을 적고 도장을 찍는다.
 */

/* ────────────────────────────────────────────────────────────────────────────
 * 1. 토큰 — :root가 아니라 .landing에 선언한다(전역 오염 금지).
 * ──────────────────────────────────────────────────────────────────────────── */

.landing {
  --lp-rail: 4rem;
  --lp-sheet: 72rem;
  --lp-gap: clamp(1rem, 2vw, 1.75rem);

  /* 잉크면 위 본문. paper 위 --mist(4.27:1)는 소형 텍스트 AA 미달이라 이 페이지에서
   * 텍스트로 쓰지 않고, 잉크면에서는 이 값을 쓴다(잉크 위 약 9:1). */
  --lp-dim: #c9ccd2;
  /* 잉크면 위 링크·강조. release.css:497의 .contact-card a와 같은 값(잉크 위 10.0:1).
   * --cobalt(#2f70b4)는 잉크 위 3.21:1로 AA 미달이라 잉크면에서 텍스트로 쓰지 않는다. */
  --lp-on-ink: #a8cef5;

  /* 보드 목업은 앱 토큰(app/lib/ui/tokens.dart)의 전사다 — 앱을 본 사용자가 같은 화면으로
   * 알아보게 하려면 웹 팔레트가 아니라 앱 값을 그대로 써야 하는 자리들. */
  --lp-bed: #eef2f6;        /* InkTokens.boardColumnBed */
  --lp-divider: #e2e8f0;    /* InkTokens.boardDivider */
  --lp-meter: #579de6;      /* InkTokens.cobalt — 페이지에서 유일한 코발트 계열 면(fill) */
  --lp-rework: #9a6700;     /* InkTokens.reworkText */

  /* 도장 색. **--seal(#c03a32)이 아니다.** 디자인 정본 §1이 두 빨강을 분리한다:
   * seal #D5453C = 도장·배지 그래픽(인주), sealText #C03A32 = 작은 에러 텍스트(5.5:1).
   * 웹 포트의 --seal은 후자 값이다. 48px 도장은 텍스트가 아니라 그래픽이므로 앱 SealStamp와
   * 같은 붉은색이 되려면 이 값이어야 한다. 토큰 통일을 이유로 --seal로 바꾸지 말 것. */
  --lp-stamp: #d5453c;

  --lp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lp-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  background: var(--canvas);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 2. 전역 요소 셀렉터 누수 무력화 — release.css는 문서 페이지용이라 마케팅 조판과 싸운다.
 * ──────────────────────────────────────────────────────────────────────────── */

.landing h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* h3{margin:2.25rem 0 .65rem}가 카드·셀 내부를 위로 밀어낸다. */
.landing h3 {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.landing p {
  margin: 0 0 1.1rem;
}

.landing .lp-plain {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.landing .lp-plain li + li {
  margin-top: 0;
}

/* .eyebrow는 release.css:185-196에서 th·.section-number와 한 규칙으로 묶여
 * mono + uppercase + letter-spacing .08em을 받는다. IBM Plex Mono에 한글·가나 글리프가
 * 없으므로 한국어·일본어가 섞이면 글자마다 폰트가 갈리는 랜섬노트가 된다. 여기서 끄고,
 * 라틴만 담는 .lp-mono 스팬에만 되돌린다. */
.landing .eyebrow {
  margin: 0 0 0.85rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* 웨이트 예산: Pretendard OTF는 웨이트당 약 1.5MB다. 이 페이지는 400/800 두 벌만 쓴다.
 * 600을 실제로 요구하는 셀렉터는 release.css의 .button과 .language-nav뿐이라, 두 줄로
 * SemiBold(1,583,704B) fetch가 통째로 사라진다. */
.landing .button {
  font-weight: 800;
}

.landing .language-nav a {
  font-weight: 400;
}

.landing .dek {
  max-width: 26rem;
  margin: 0 0 1.75rem;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
}

.landing .lead {
  margin: 0 0 1.1rem;
}

.landing .notice {
  margin: 2rem 0 0;
  border-radius: 0.65rem;
}

.landing .action-row {
  margin: 0;
}

/* .primary-nav는 쓰지 않는다(헤더 절 주석 참조). 880px 미디어쿼리가 3번째 칸을 2행으로
 * 떨구는 규칙은 .primary-nav 전용이라 무해하지만, 헤더 트랙 수는 우리가 정한다. */
.landing .site-header {
  grid-template-columns: minmax(10rem, 1fr) auto;
}

.landing .lp-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 3. 타이포 삼분할 — 문자 집합으로 폰트를 가른다.
 *    .lp-mono 라틴·숫자 전용(장부의 목소리) / .lp-tag 한글·가나 라벨 / .lp-data 수치
 * ──────────────────────────────────────────────────────────────────────────── */

.landing .lp-mono {
  font-family: "Tralalero Ledger", ui-monospace, monospace;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 라벨. 절대 mono를 쓰지 않는다 — 한글·가나가 들어오는 자리다. */
.landing .lp-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--graphite);
}

/* 줄바꿈 규칙은 언어 문제라 컴포넌트가 아니라 여기 한 곳에서 정한다.
 * keep-all은 **한국어 전용**이다: 어절 중간에서 끊기는 것을 막아 준다. 같은 값을 일본어에
 * 적용하면 공백이 없어 문장 전체가 끊을 수 없는 한 덩어리가 되고 카드 밖으로 넘친다.
 * 영어는 공백에서 자연히 끊기므로 기본값이면 충분하다. */
.landing [data-lang-panel="ko"] h1,
.landing [data-lang-panel="ko"] h2,
.landing [data-lang-panel="ko"] h3,
.landing [data-lang-panel="ko"] p,
.landing [data-lang-panel="ko"] dd,
.landing [data-lang-panel="ko"] .lp-tool__what,
.landing [data-lang-panel="ko"] .lp-ledger__val {
  word-break: keep-all;
}

/* 파일 경로처럼 공백 없는 라틴 문자열이 칸을 넘지 않게 하는 안전판. */
.landing .lp-ledger__val,
.landing .lp-path {
  overflow-wrap: anywhere;
}

/* 수치. 라틴·숫자만 담긴다는 전제 위에서만 mono. */
.landing .lp-data {
  font-family: "Tralalero Ledger", ui-monospace, monospace;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.landing .lp-data--lg {
  font-size: 1.6rem;
  color: var(--ink);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 4. 시트 격자와 기입선 — 전 섹션이 공유하는 단 하나의 축.
 * ──────────────────────────────────────────────────────────────────────────── */

.landing .lp-sec {
  padding-block: clamp(3.25rem, 6.5vw, 5.75rem);
}

.landing .lp-sec--paper {
  background: var(--paper);
}

.landing .lp-sec--canvas {
  background: var(--canvas);
}

/* 잉크 풀블리드. 레일과 마크가 종이색으로 반전된다. */
.landing .lp-sec--ink {
  color: var(--paper);
  background: var(--ink);
}

.landing .lp-sheet {
  display: grid;
  grid-template-columns: var(--lp-rail) minmax(0, 1fr);
  max-width: var(--lp-sheet);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.landing .lp-rail {
  position: relative;
  min-width: 0;
}

/* 기입선 본체. release.css:56의 body 배경은 x=31–32px에 3.5% 헤어라인 한 줄을 긋는다
 * (background-size/repeat가 없어 반복 격자가 아니다). 이 레일은 그 제스처를 100% 농도로
 * 올린 것 — 새로 발명한 장치가 아니라 시스템이 이미 갖고 있던 선이다. */
.landing .lp-rail::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
  transform-origin: top center;
}

.landing .lp-sec--ink .lp-rail::after {
  background: var(--paper);
}

.landing .lp-mark {
  position: absolute;
  top: 0.2rem;
  right: 0.85rem;
  color: var(--graphite);
}

.landing .lp-sec--ink .lp-mark {
  color: var(--lp-dim);
}

.landing .lp-field {
  min-width: 0;
  padding-left: var(--lp-gap);
}

.landing .lp-prose {
  max-width: var(--measure);
}

/* 히어로의 첫 기입선 — 필드 전폭 1px. */
.landing .lp-hr {
  height: 1px;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 5. 히어로
 * ──────────────────────────────────────────────────────────────────────────── */

/* 보드가 시트 오른쪽으로 넘쳐 잘린다. hidden이 아니라 clip이어야 세로 스크롤 문맥이
 * 새로 생기지 않는다. */
.landing .lp-sec--hero {
  overflow-x: clip;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3.25rem, 6vw, 5.5rem);
  background: var(--paper);
}

.landing .lp-hero h1 {
  max-width: 20ch;
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  font-size: clamp(2.1rem, 4.6vw, 4.1rem);
  font-weight: 800;
  line-height: 1.06;
  /* -.045em은 새 값이 아니라 release.css h2(:310)의 자간을 그대로 가져온 것.
   * 전역 h1의 -.07em은 문서 제목용이라 한국어 마케팅 문장에서 받침이 붙는다. */
  letter-spacing: -0.045em;
  text-wrap: balance;
}

/* 일본어 패널만 시스템 폰트로 떨군다. 앱이 같은 판단을 한다(theme.dart:39, 정본 §2):
 * Pretendard의 한자 커버리지가 일본어 문장을 두 폰트로 쪼개 그려 랜섬노트가 된다.
 * .lp-mono·.lp-data는 자기 규칙으로 패밀리를 직접 지정하므로 이 상속에 지지 않는다. */
.landing [data-lang-panel="ja"] {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
}

.landing [data-lang-panel="en"] .lp-hero h1 {
  max-width: 24ch;
  letter-spacing: 0;
}

/* 음수 자간은 한글 전용 조판이다(디자인 정본 §2: 영문·일본어는 0px). 랜딩은 <html lang>이
 * 아니라 패널 속성으로 언어를 가르는데, en만 리셋하면 일본어 패널이 한글용 값(h2 -0.04em·
 * .lp-pull -0.035em 등)을 그대로 상속해 가나·한자가 서로 붙는다. release.css는 이미 en·ja를
 * 함께 덮으므로(release.css:135) 여기만 en에 머물면 같은 규칙이 파일마다 갈린다.
 * 히어로 h1이 이 목록에 없는 이유: ja는 0이 아니라 -0.02em을 웨이트 700·행간 1.16과 한 벌로
 * 의도해 아래에서 따로 쥔다(제목 한 줄짜리 큰 활자만의 예외). 합치면 그 의도가 지워진다. */
.landing [data-lang-panel="en"] h2,
.landing [data-lang-panel="en"] h3,
.landing [data-lang-panel="en"] .lp-board__name,
.landing [data-lang-panel="en"] .lp-card__title,
.landing [data-lang-panel="en"] .lp-pull,
.landing [data-lang-panel="en"] .lp-stair__line,
.landing [data-lang-panel="ja"] h2,
.landing [data-lang-panel="ja"] h3,
.landing [data-lang-panel="ja"] .lp-board__name,
.landing [data-lang-panel="ja"] .lp-card__title,
.landing [data-lang-panel="ja"] .lp-pull,
.landing [data-lang-panel="ja"] .lp-stair__line {
  letter-spacing: 0;
}

.landing [data-lang-panel="ja"] .lp-hero h1 {
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.landing .lp-hero__cols {
  display: grid;
  grid-template-columns: minmax(19rem, 26rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.landing .lp-hero__caps {
  display: block;
  margin-top: 1rem;
  color: var(--graphite);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 6. 보드 목업 — 앱 화면의 전사. 디바이스 프레임·브라우저 크롬·3D 틸트를 두지 않는다.
 *    보드는 스크린샷이 아니라 같은 종이 위에 놓인 같은 표면이다.
 * ──────────────────────────────────────────────────────────────────────────── */

.landing .lp-board {
  width: calc(100% + var(--gutter) + 6rem);
  min-width: 46rem;
}

.landing .lp-board__meter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
  padding-bottom: 0.7rem;
  /* 앱은 월 사용량 미터와 칸반 영역을 이 1px로 가른다(InkTokens.boardDivider). */
  border-bottom: 1px solid var(--lp-divider);
}

.landing .lp-board__name {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.landing .lp-board__hours {
  color: var(--graphite);
}

.landing .lp-bar {
  display: block;
  width: 7rem;
  height: 10px;
  border-radius: 999px;
  background: var(--lp-divider);
}

.landing .lp-bar__fill {
  display: block;
  width: 86%;
  height: 100%;
  border-radius: 999px;
  background: var(--lp-meter);
}

.landing .lp-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.landing .lp-col {
  min-width: 0;
}

.landing .lp-col__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.25rem 0.5rem;
}

/* --mist는 paper 위 4.27:1로 소형 텍스트 AA에 미달한다. 이 페이지는 텍스트에 쓰지 않는다. */
.landing .lp-col__head .lp-data {
  color: var(--graphite);
}

/* 칼럼 자체에는 프레임을 두지 않는다(board_column.dart:11). 배치면과 흰 카드의
 * 면 대비만으로 구분한다. */
.landing .lp-bed {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem;
  min-height: 12rem;
  border-radius: 0.625rem;
  background: var(--lp-bed);
}

/* 카드에는 테두리도 상시 그림자도 없다(board_card_tile.dart:68-72에 border 0). */
.landing .lp-card {
  padding: 0.6rem 0.7rem;
  border-radius: 0.625rem;
  background: #ffffff;
}

.landing .lp-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.landing .lp-card__id {
  color: var(--graphite);
}

.landing .lp-card__title {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.landing .lp-card__foot {
  display: block;
  margin-top: 0.4rem;
  color: var(--graphite);
}

/* 긴급은 '필 없는 컬러 볼드 텍스트'가 아니다 — _UrgentLabel(board_card_tile.dart:227-251)은
 * error 10% 면 + radius 5 + 볼드 텍스트다. 필 없는 볼드는 재요청 배지 쪽이다. */
.landing .lp-urgent {
  padding: 0.19rem 0.44rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--seal) 10%, transparent);
  color: var(--seal);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
}

.landing .lp-rework {
  color: var(--lp-rework);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
}

.landing .lp-ghost {
  min-height: 2.6rem;
  border: 1px dashed color-mix(in srgb, var(--graphite) 45%, transparent);
  border-radius: 0.625rem;
}

/* 페이지 전체에서 그림자는 이 하나뿐이다. 정본 §1이 허용하는 유일한 그림자 상태(드래그)를
 * 그대로 옮긴 것 — blur 0의 하드 셰이도(InkTokens.dragShadow). 상시 그림자 금지 규율의
 * 위반이 아니므로 지우지 말 것. */
.landing .lp-lifted {
  transform: rotate(-2deg);
  box-shadow: 0 2px 0 rgba(27, 29, 34, 0.12);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 7. 절벽 — 계단은 문장 길이가 아니라 고정 들여쓰기가 만든다(3언어 동형).
 * ──────────────────────────────────────────────────────────────────────────── */

.landing .lp-sec--cliff {
  min-height: min(108vh, 60rem);
  display: flex;
  align-items: center;
}

.landing .lp-stair {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.landing .lp-stair__line {
  max-width: 30ch;
  margin: 0 0 0.85rem;
  color: var(--lp-dim);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.landing .lp-stair__line:nth-child(1) { font-size: clamp(1.35rem, 2.6vw, 2.15rem); padding-left: 0; }
.landing .lp-stair__line:nth-child(2) { font-size: clamp(1.28rem, 2.45vw, 2.03rem); padding-left: 2.5rem; }
.landing .lp-stair__line:nth-child(3) { font-size: clamp(1.21rem, 2.3vw, 1.91rem); padding-left: 5rem; }
.landing .lp-stair__line:nth-child(4) { font-size: clamp(1.14rem, 2.15vw, 1.79rem); padding-left: 7.5rem; }

/* 계단의 정점은 크기가 아니라 대비가 진다. */
.landing .lp-stair__line--key {
  color: var(--paper);
  font-weight: 800;
}

/* 마지막 계단 아래 아무것도 없는 잉크 — 바닥이 안 보인다. 임의 뷰포트 높이에서
 * '잘리게 한다'는 연출은 CSS로 보장할 수 없어 이 방식으로 대신한다. */
.landing .lp-void {
  height: clamp(6rem, 14vh, 10rem);
}

.landing .lp-sec--ink .lead,
.landing .lp-sec--ink p {
  color: var(--lp-dim);
}

.landing .lp-sec--ink a {
  color: var(--lp-on-ink);
}

.landing .lp-sec--ink h2,
.landing .lp-sec--ink h3 {
  color: var(--paper);
}

.landing .lp-sec--ink .lp-tag {
  color: var(--lp-dim);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 8. 원리 3원칙 — 하나의 장부 펼침면.
 * ──────────────────────────────────────────────────────────────────────────── */

/* 세 칸의 머리·제목·본문이 각각 같은 선에서 시작해야 장부의 펼침면으로 읽힌다.
 * 제목에 min-height를 먹이면 한 줄짜리 제목에서 그냥 빈 공간이 되므로, subgrid로
 * 실제 행을 공유한다(미지원 브라우저에서는 정렬만 느슨해질 뿐 무너지지 않는다). */
.landing .lp-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.landing .lp-principle {
  position: relative;
  min-width: 0;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
}

/* 칸 사이 괘선이 내용 위아래로 24px씩 넘어간다 — 각인된 장부의 손버릇. */
.landing .lp-principle + .lp-principle::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: calc(-1 * clamp(1.5rem, 3vw, 2.5rem) / 2);
  width: 1px;
  height: calc(100% + 3rem);
  background: var(--ink);
}

.landing .lp-principle__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.landing .lp-principle h3 {
  margin: 0 0 0.9rem;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
}

.landing .lp-principle p {
  margin: 0;
  color: var(--graphite);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 9. 작동 4단계 — release.css의 .steps는 쓰지 않는다(그 border-left가 페이지 레일과
 *    겹쳐 세로선이 두 줄 생긴다). 실물 판 4장을 레일에서 다른 거리로 놓는다.
 * ──────────────────────────────────────────────────────────────────────────── */

.landing .lp-plates {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.landing .lp-plate {
  min-width: 0;
}

.landing .lp-plate:nth-child(2) { margin-left: 2rem; }
.landing .lp-plate:nth-child(4) { margin-left: 4rem; }

.landing .lp-plate__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.landing .lp-plate__head .lp-tag {
  font-size: 0.86rem;
  color: var(--ink);
}

.landing .lp-plate__note {
  margin: 0.75rem 0 0;
  max-width: 34rem;
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ⓐ 요청 카드 한 장 — 히어로와 정확히 같은 컴포넌트를 배치면 조각 위에 올린다.
 * 칼럼이 아니라 조각이므로 배치면의 최소 높이는 걷는다. */
.landing .lp-plate__card {
  max-width: 22rem;
}

.landing .lp-plate__card .lp-bed {
  min-height: 0;
}

/* ⓑ 산정 리드아웃 */
.landing .lp-readout {
  max-width: 26rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--paper);
}

.landing .lp-paths {
  display: grid;
  gap: 0.35rem;
  margin: 0.7rem 0 0.9rem;
}

.landing .lp-path {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--graphite);
}

/* 코발트는 면(fill)으로 쓰지 않는다. 이 틱은 비텍스트 그래픽이라 3:1 기준으로 통과한다 —
 * 같은 색을 텍스트로 올리면 AA에 걸린다. */
.landing .lp-tick {
  flex: none;
  width: 4px;
  height: 4px;
  background: var(--cobalt);
}

.landing .lp-readout__sum {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

/* ⓒ 보드 2칼럼 크롭 */
.landing .lp-crop {
  max-width: 26rem;
}

.landing .lp-crop .lp-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.landing .lp-crop .lp-bed {
  min-height: 6rem;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 10. 기능 격자 8칸 — .fact-grid의 기하만 차용하고 클래스는 쓰지 않는다.
 *     격자는 채워진 면이 아니므로 라운드를 갖지 않는다(radius 규율은 면에 적용된다).
 * ──────────────────────────────────────────────────────────────────────────── */

.landing .lp-grid8 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.landing .lp-cell {
  min-width: 0;
  min-height: 8.5rem;
  padding: 1.1rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.landing .lp-cell .lp-mono {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--graphite);
}

.landing .lp-cell h3 {
  font-size: 0.98rem;
  font-weight: 800;
}

.landing .lp-cell p {
  margin: 0;
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 11. AI 에이전트 · MCP — 터미널 창을 그리지 않는다.
 * ──────────────────────────────────────────────────────────────────────────── */

.landing .lp-clients {
  display: block;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--paper);
  font-size: 0.78rem;
}

.landing .lp-tools {
  display: grid;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.landing .lp-tool {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 17rem) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(255, 254, 249, 0.16);
}

.landing .lp-tool:last-child {
  border-bottom: 1px solid rgba(255, 254, 249, 0.16);
}

.landing .lp-tool__name {
  color: var(--paper);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

.landing .lp-tool__what {
  color: var(--lp-dim);
  font-size: 0.94rem;
  line-height: 1.5;
}

.landing .lp-tool__tick {
  width: 4px;
  height: 10px;
  background: var(--cobalt);
  align-self: center;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 12. 신뢰 — 페이지에서 가장 좁은 절. <table>은 쓰지 않는다(전역 min-width 38rem이
 *     320px에서 가로 스크롤을 강제하고, th의 mono가 ko/ja 헤더를 깨뜨린다).
 * ──────────────────────────────────────────────────────────────────────────── */

.landing .lp-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

.landing .lp-compare > div {
  min-width: 0;
  margin: 0;
}

.landing .lp-compare dt {
  margin: 0 0 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* seal 4회 중 마지막. 이 한 줄이 두 열의 성격을 가른다. */
.landing .lp-compare .lp-col--never {
  border-top-color: var(--seal);
  color: var(--seal);
}

.landing .lp-compare dd {
  margin: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--graphite);
  font-size: 0.94rem;
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 13. 브랜드 스토리 — 지면에서 유일하게 레일을 넘는 요소.
 * ──────────────────────────────────────────────────────────────────────────── */

.landing .lp-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.landing .lp-brand__mark {
  /* WebP 우선 <picture>가 끼면서 이 이미지는 그리드 아이템이 아니라 래퍼 안의
   * 인라인 상자가 됐다. 인라인 대체 요소는 베이스라인에 앉아 아래로 디센더만큼
   * 빈 줄을 남기므로(실측 9px) 블록으로 되돌린다. 래퍼에 display:contents를 주는
   * 길은 쓰지 않는다 — <source>에는 UA display:none이 없어 그 순간 함께 그리드
   * 아이템이 되고, 2열 그리드가 2행으로 접혀 상어가 본문 오른쪽으로 튄다
   * (2026-08-27 Chromium 실측: 컨테이너 높이 337px → 679px). */
  display: block;
  width: clamp(9rem, 22vw, 16rem);
  height: auto;
  border-radius: 1.5rem;
  /* 여덟 개 절 동안 어떤 것도 넘지 않은 척추를 상어만 넘어선다. 앞선 절들의 엄격함이
   * 이 파격의 대가를 미리 지불한다. */
  /* 레일 칸을 침범하되 기입 마크는 덮지 않을 만큼만 내려온다. 마크까지 가리면 장부
   * 번호가 01–07, 09로 끊겨 '아홉 개 항목'이라는 전제가 깨진다. 덕분에 상어의 윗변이
   * 제목 상자 꼭대기가 아니라 글줄에 맞아 시각적으로도 더 앉는다. */
  margin: 2.25rem 0 0 calc(-1 * (var(--lp-rail) + var(--lp-gap)));
  /* 레일선(.lp-rail::after)은 position:absolute라 위치 지정 요소 레이어에 그려지고,
   * 위치 미지정 이미지는 그보다 아래 레이어라 DOM 순서와 무관하게 선이 상어 위를 지난다.
   * 넘어서는 쪽이 위에 있어야 파격이 성립하므로 여기서만 레이어를 올린다
   * (헤더 z-index 10·스킵 링크 50보다는 낮게 둔다). */
  position: relative;
  z-index: 1;
}

.landing .lp-brand__body {
  min-width: 0;
  max-width: 34rem;
}

.landing .lp-pull {
  margin: 1.5rem 0 0;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 14. 시그니처 — 마지막 행과 도장.
 * ──────────────────────────────────────────────────────────────────────────── */

.landing .lp-close {
  position: relative;
}

/* 레일이 장부 행의 베이스라인에서 굵어지며 종결한다. 그 아래로 레일은 존재하지 않고,
 * CTA는 척추가 끝난 바로 다음 자리에 놓인다 — 무한 스크롤 랜딩이 못 갖는 마침표. */
.landing .lp-sec--close .lp-rail::after {
  bottom: auto;
  height: 78%;
}

.landing .lp-sec--close .lp-rail::before {
  content: "";
  position: absolute;
  top: 78%;
  right: 0;
  width: 2px;
  height: 24px;
  background: var(--ink);
}

.landing .lp-ledger {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.landing .lp-ledger__file {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--graphite);
  text-transform: none;
}

.landing .lp-ledger__grid {
  display: grid;
  grid-template-columns: 6.5rem 4.5rem repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr);
}

.landing .lp-ledger__cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 라벨의 border-box가 칸 전폭이라 아래 테두리가 칸을 넘어 이어진다 — padding은 테두리
 * 안쪽이므로 글자만 들어가고 선은 끊기지 않는다. 이 한 줄이 헤더 행의 잉크선이다. */
.landing .lp-ledger__cell > .lp-tag {
  padding: 0 0.8rem 0.5rem 0;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  text-transform: none;
}

.landing .lp-ledger__val {
  padding-right: 0.8rem;
  color: var(--graphite);
  font-size: 0.88rem;
  line-height: 1.45;
}

.landing .lp-ledger__val .lp-data {
  color: var(--ink);
}

/* 값이 흐름 높이를 정하고 플레이스홀더가 그 위에 겹친다 — 채워지는 동안 행 높이가
 * 흔들리지 않는다. 기본 상태(JS 없음)는 '이미 다 채워진 행'이므로 플레이스홀더는 숨어
 * 있고, js-on일 때에만 드러난다. */
.landing .lp-slot {
  position: relative;
  display: block;
}

.landing .lp-slot__val {
  display: block;
}

.landing .lp-slot__ph {
  position: absolute;
  inset: 0;
  opacity: 0;
  color: var(--graphite);
}

/* ④단계 장부의 빈칸. 여기는 끝까지 채워지지 않는다 — 채우기와 도장은 마지막 절의 독점이다. */
.landing .lp-ph {
  color: var(--graphite);
}

.landing .lp-stamp {
  display: block;
  width: 3rem;
  height: 3rem;
  /* 도장은 문서 위에 눌러 찍힌 것이라 행에 바짝 붙는다. */
  margin: -1rem 0.25rem 0 auto;
  fill: none;
  /* 인라인 style이 CSP에 막히므로 색은 여기서 준다. 값의 근거는 --lp-stamp 선언부 주석. */
  stroke: var(--lp-stamp);
}

.landing .lp-close__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 15. 모션 — 외부 라이브러리 0, 스크롤 리스너 0. IntersectionObserver만.
 *
 *     CSS 기본값이 곧 **최종 상태**다. landing.js가 :root에 js-on을 붙일 때에만
 *     pre-state가 활성화되고, js-on은 prefers-reduced-motion이 아닐 때만 붙는다.
 *     따라서 JS가 죽어도 / CSP가 스크립트를 막아도 / 모션 축소 설정이어도 페이지는
 *     처음부터 완전히 읽힌다 — 숨은 콘텐츠가 영원히 안 보이는 사고가 구조적으로 불가능하다.
 * ──────────────────────────────────────────────────────────────────────────── */

:root.js-on .landing [data-reveal] .lp-rail::after {
  transform: scaleY(0);
}

:root.js-on .landing [data-reveal].is-in .lp-rail::after {
  transform: scaleY(1);
  transition: transform 0.5s var(--lp-ease);
}

:root.js-on .landing [data-reveal] .lp-mark {
  color: var(--graphite);
}

:root.js-on .landing [data-reveal].is-in .lp-mark {
  color: var(--ink);
  transition: color 0.15s linear;
}

:root.js-on .landing .lp-sec--ink[data-reveal].is-in .lp-mark {
  color: var(--paper);
}

/* 10px이지 40px이 아니다 — 종이는 날아 들어오지 않는다. */
:root.js-on .landing [data-reveal] .lp-field {
  opacity: 0;
  transform: translateY(10px);
}

:root.js-on .landing [data-reveal].is-in .lp-field {
  opacity: 1;
  transform: none;
  transition: opacity 0.42s var(--lp-ease), transform 0.42s var(--lp-ease);
}

/* 스태거. CSP가 인라인 style을 막으므로 --i 같은 커스텀 프로퍼티를 마크업에 실을 수 없다 —
 * 지연은 반드시 클래스나 :nth-child로만 준다. */
:root.js-on .landing [data-reveal].is-in .d1 { transition-delay: 0.06s; }
:root.js-on .landing [data-reveal].is-in .d2 { transition-delay: 0.12s; }
:root.js-on .landing [data-reveal].is-in .d3 { transition-delay: 0.18s; }
:root.js-on .landing [data-reveal].is-in .d4 { transition-delay: 0.24s; }

/* 시그니처: 슬롯 3칸이 왼쪽에서 오른쪽으로 채워진 뒤 도장이 찍힌다. */
:root.js-on .landing .lp-slot__val {
  opacity: 0;
  transform: translateY(4px);
}

:root.js-on .landing .lp-ledger.is-written .lp-slot__val {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s linear, transform 0.2s var(--lp-ease);
}

:root.js-on .landing .lp-slot__ph {
  opacity: 1;
}

:root.js-on .landing .lp-ledger.is-written .lp-slot__ph {
  opacity: 0;
  transition: opacity 0.12s linear;
}

:root.js-on .landing .lp-ledger.is-written .s1 { transition-delay: 0s; }
:root.js-on .landing .lp-ledger.is-written .s2 { transition-delay: 0.14s; }
:root.js-on .landing .lp-ledger.is-written .s3 { transition-delay: 0.28s; }

/* 도장: SealStampIn(app/lib/ui/brand.dart)의 240ms / 1.4→1.0 / easeOutBack을 그대로.
 * -8° 회전은 SVG 안에 있으므로 CSS scale과 충돌하지 않는다. */
:root.js-on .landing .lp-stamp {
  opacity: 0;
  transform: scale(1.4);
}

:root.js-on .landing .lp-ledger.is-written .lp-stamp {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.24s linear 0.48s, transform 0.24s var(--lp-ease-back) 0.48s;
}

/* 언어 전환 직후 한 프레임 동안 일괄 애니메이션을 막는다(강제 완료 패스). */
:root.js-on .landing .no-anim,
:root.js-on .landing .no-anim * {
  transition: none;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 16. 반응형
 * ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .landing .lp-hero__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing .lp-board {
    width: calc(100% + var(--gutter));
    margin-top: 2.5rem;
  }

  .landing .lp-grid8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  /* .primary-nav를 쓰지 않으므로 release.css의 2행 이동 규칙이 발화하지 않는다.
   * 트랙 수만 우리가 유지한다. */
  .landing .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .landing {
    --lp-rail: 2.5rem;
  }

  .landing .lp-mark {
    right: 0.5rem;
  }

  .landing .lp-sec--cliff {
    min-height: 0;
    display: block;
  }

  .landing .lp-stair__line:nth-child(2) { padding-left: 1.25rem; }
  .landing .lp-stair__line:nth-child(3) { padding-left: 2.5rem; }
  .landing .lp-stair__line:nth-child(4) { padding-left: 3.75rem; }

  .landing .lp-principles {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }

  /* 1열에서는 세로 괘선 대신 가로 구분선. */
  .landing .lp-principle + .lp-principle::before {
    top: -1rem;
    left: 0;
    width: 100%;
    height: 1px;
  }

  .landing .lp-principle h3 {
    min-height: 0;
  }

  .landing .lp-plate:nth-child(2),
  .landing .lp-plate:nth-child(4) {
    margin-left: 0;
  }

  .landing .lp-tool {
    grid-template-columns: 0.75rem minmax(0, 1fr);
    row-gap: 0.25rem;
  }

  .landing .lp-tool__what {
    grid-column: 2;
  }

  .landing .lp-compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing .lp-brand {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 1열로 서면 레일을 침범할 것도, 마크를 피할 것도 없다. */
  .landing .lp-brand__mark {
    margin: 0;
  }

  /* 장부 행은 가로 스크롤이 아니라 세로 라벨/값 스택으로 바꾼다. 가로 스크롤로 두면
   * 페이지의 유일한 페이로프(도장)가 화면 밖으로 나간다. */
  .landing .lp-ledger__grid {
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--ink);
  }

  .landing .lp-ledger__cell {
    flex-direction: row;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
  }

  .landing .lp-ledger__cell > .lp-tag {
    flex: none;
    width: 7.5rem;
    padding: 0;
    margin: 0;
    border-bottom: 0;
    color: var(--graphite);
  }

  .landing .lp-sec--close .lp-rail::after {
    height: 100%;
  }

  .landing .lp-sec--close .lp-rail::before {
    display: none;
  }
}

@media (max-width: 760px) {
  /* 목업이 축소 불가능한 폭을 가지므로 이 지점부터 스크롤 영역으로 바꾼다. */
  .landing .lp-board,
  .landing .lp-crop {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .landing .lp-board .lp-cols,
  .landing .lp-crop .lp-cols {
    min-width: 34rem;
  }

  .landing .lp-board__meter {
    min-width: 0;
  }
}

@media (max-width: 620px) {
  .landing .lp-grid8 {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing .lp-cell {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  /* release.css:569-572가 이 지점에서 body의 헤어라인 배경을 스스로 지운다. 레일도 함께
   * 물러나고, 절 상단의 가로 잉크선이 그 자리를 대신한다. */
  .landing {
    --lp-rail: 0rem;
    --lp-gap: 0rem;
  }

  .landing .lp-rail::after {
    display: none;
  }

  .landing .lp-sec--close .lp-rail::before {
    display: none;
  }

  .landing .lp-mark {
    position: static;
    display: block;
    margin-bottom: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ink);
  }

  .landing .lp-sec--ink .lp-mark {
    border-top-color: var(--paper);
  }

  .landing .lp-sheet {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing .lp-rail {
    display: contents;
  }

  .landing .lp-hero h1 {
    font-size: clamp(1.95rem, 8.5vw, 2.6rem);
  }

  .landing .lp-brand__mark {
    width: clamp(8rem, 40vw, 11rem);
  }

  .landing .lp-ledger__cell > .lp-tag {
    width: 6rem;
  }
}

@media print {
  .landing .lp-sec--ink {
    color: var(--ink);
    background: #fff;
  }

  .landing .lp-sec--ink .lead,
  .landing .lp-sec--ink p,
  .landing .lp-tool__what {
    color: var(--ink);
  }
}