/* 시안 B「하루」— 운영본(land.css)과 **한 줄도 공유하지 않는다.**
 *
 *  왜 따로인가: 같은 파일을 고치면 시안을 만지다 운영 화면이 같이 바뀐다.
 *  ⛔클래스 이름도 운영본과 겹치면 안 된다 — 겹친 이름은 남의 상자를 뒤집어쓴다
 *    (`.sr` 이 계산기 결과를 몇 주간 안 보이게 했던 사고). 여기 이름은 전부 이 파일 전용이다.
 *
 *  색  바닥 #04040A · 물 #0A1018 · 우리 #22d3ee · 침입 #ff8a3d · 경고 #f43f5e · 지켜짐 #10b981
 *  글  IBM Plex Sans KR(한글·라틴) + IBM Plex Mono(계기 숫자)
 *      ⛔브라우저 기본폰트 금지(대표 규칙) → 스택 끝까지 실물을 적는다.
 */

:root {
  --ink: #04040A;
  --sea: #0A1018;
  --fg: #EAF1F8;
  --fg2: rgba(234, 241, 248, .64);
  /* ⭐08-22 — 본페이지 승격 뒤 이 색이 판매 9쪽의 부제·캡션·푸터를 칠하게 됐다.
     알파 .40 은 가장 어두운 바닥에서 **3.39:1** 밖에 안 나와 글이 안 읽혔다(기준 4.5).
     ⚠시안일 땐 눈에 안 띄었다 — 시안은 아무도 안 읽으니까. 파는 쪽이 되면 기준이 바뀐다.
     .52 는 가장 어두운 바닥(#04040A)에서도 5.10:1 이다(실측). --fg2(.64)와 위계도 남는다. */
  --fg3: rgba(234, 241, 248, .52);
  --line: rgba(234, 241, 248, .13);
  --ours: #22d3ee;
  --warn: #ff8a3d;
  --bad: #f43f5e;
  --kept: #10b981;
  --sans: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  /* ⚠`IBM Plex Mono` 에는 **한글이 없다.** 계기 글씨에 한글이 섞이면(「최소 10분」·
     「다음 날 아침」) 그 글자만 브라우저가 몰래 고른 폰트로 떨어진다 — 실측으로
     스택의 한글 폭 239.4 가 generic monospace 235.2 와 거의 같았다. 그건 내가 고른 게 아니다.
     ⇒ 숫자·영문은 Plex Mono, **한글은 Plex Sans KR** 로 못 박는다(대표 규칙: 기본폰트 금지). */
  --mono: 'IBM Plex Mono', 'IBM Plex Sans KR', 'Apple SD Gothic Neo',
          'Malgun Gothic', 'Noto Sans KR', monospace;
}

/* 이 시안은 **한 가지 세계에 못 박는다** — 검은 물 위의 밤이다.
   그래서 밝은 테마로 뒤집지 않는다. 대신 모든 색을 여기서 직접 칠한다
   (안 칠하면 뷰어 바탕이 비쳐서 글이 안 읽힌다). */
/* ⭐분기의 정본 — 화면 모양 **3단**이다(08-22 프레임 3단 재추출과 한 쌍).
     wide : 가로 화면                                          → 2520×1080 (2.33)
     mid  : 세로인데 화면비 ≥ 0.66(폴드 884×1104=0.80 · 아이패드 세로 820×1180=0.695)
                                                               → 1509×1886 (0.80)
     sm   : 세로이고 화면비 < 0.66 — 폭 760 이하는 화면비 무관 무조건 → 943×1886 (0.50)
   pseq.js·chrono.js 는 matchMedia 를 다시 적지 않고 이 값을 읽는다.
   쿼리를 바꿀 땐 chrono.py 의 MQ_MD·MQ_SM 을 함께 바꾼다(정지그림과 캔버스는 같은 판이어야 한다).
   ⚠배치용 @media 4곳(`(max-width:760px), (orientation:portrait)`)은 그대로 둔다 —
     mid 도 sm 과 같은 '세로 배치'(그림 위·글 아래)라서 세로 전체가 한 묶음이 맞다.
   ⚠아래 넉 줄은 **순서가 값이다**(나중 규칙이 이긴다):
     세로는 일단 sm → 화면비 ≥ 0.66 이고 폭 761 이상만 mid 로 승격 → 폭 760 이하는 무조건 sm.
   (08-21 실측: 두 벌(wide/sm)뿐일 때 폴드가 sm(0.50)을 2.06배로 늘려 받았다 — mid 판을 둔 이유) */
:root { --v3-mode: wide; }
@media (orientation: portrait) { :root { --v3-mode: sm; } }
/* ⭐0.60(3/5) 부터 mid — **프레임 크기로 계산해서** 정했다(08-22).
     원본 @sm 943×1886 · @md 1509×1886 · 확대율 = max(캔버스폭÷원본폭, 캔버스높이÷원본높이)
     800×1280(0.625) 태블릿 · DPR2 → 캔버스 1600×2560
       @sm: max(1600/943, 2560/1886) = 1.70   @md: max(1600/1509, 2560/1886) = 1.36
     ⇒ 0.66 으로 두면 이 태블릿이 sm 을 받아 25% 더 늘어난다. 그래서 0.60 이 맞다.
   ⚠파이썬 `chrono.MQ_MD` 와 **글자까지 같아야 한다**(정지그림 srcset 과 캔버스가 같은 판을 골라야
     캔버스가 켜지는 순간 구도가 안 튄다). 갈라지면 `_chk_mq_parity.py` 가 잡는다.
   경계 숫자는 화면 목록에서 정한다 — 감으로 두면 그 사이에 빠지는 기기가 생긴다(폴드 884 가 그랬다). */
@media (orientation: portrait) and (min-aspect-ratio: 3/5) and (min-width: 761px) { :root { --v3-mode: mid; } }
@media (max-width: 760px) { :root { --v3-mode: sm; } }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.v3 {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;              /* 가로 트랙이 밖으로 새지 않게 */
  word-break: keep-all;            /* 한글은 낱말 단위로 끊는다(대표 규칙) */
}

img { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--ours); color: #04040A; }

:focus-visible {
  outline: 2px solid var(--ours);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.b {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 20px; border-radius: 999px;
  font: 500 13.5px/1 var(--sans); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.b.lg { padding: 15px 30px; font-size: 15px; }
.b.p { background: var(--ours); border-color: var(--ours); color: #04121A; font-weight: 600; }
.b.p:hover { transform: translateY(-2px); background: #5ce4f6; }
.b.g { background: rgba(234, 241, 248, .05); color: var(--fg); }
.b.g:hover { border-color: rgba(234, 241, 248, .35); transform: translateY(-2px); }

/* ── 머리 ─────────────────────────────────────────────────────────────── */
.ch {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: 26px;
  padding: 14px clamp(16px, 4vw, 46px);
  background: linear-gradient(#04040ADD, #04040A00);
  backdrop-filter: blur(9px);
}
.ch .lg {
  display: flex; align-items: center; gap: 9px;
  font: 600 14.5px/1 var(--sans); letter-spacing: .01em; text-decoration: none;
}
.ch .lg i {
  width: 9px; height: 9px; border-radius: 2px; background: var(--ours);
  box-shadow: 0 0 14px var(--ours);
}
.ch nav { display: flex; gap: 22px; margin-left: 8px; }
.ch nav a {
  font: 400 13px/1 var(--sans); color: var(--fg2); text-decoration: none;
  transition: color .16s;
}
.ch nav a:hover { color: var(--fg); }
.ch .hact { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 900px) {
  .ch nav { display: none; }
  .ch .hact .b.g { display: none; }
}

/* ── 공통 조판 ────────────────────────────────────────────────────────── */
.eb {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px;
  font: 500 11.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ours);
}
.eb .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ours);
  box-shadow: 0 0 10px var(--ours);
}
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.028em; font-weight: 600; }
.sub { color: var(--fg2); font-size: 16px; margin: 18px 0 0; max-width: 46ch; }

/* ── 1막 · 여는 화면 ──────────────────────────────────────────────────── */
.op { position: relative; height: 190vh; }
.opin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center;
}
.opbg { position: absolute; inset: -8%; z-index: 0; transform: scale(1.08); }
.opbg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.opsc {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, #04040AF2 0%, #04040ACC 34%, #04040A44 60%, #04040A22 100%),
    linear-gradient(#04040A99, #04040A00 30%, #04040ADD);
}
.opwrap {
  position: relative; z-index: 2;
  padding: 0 clamp(20px, 6vw, 92px); max-width: 780px; will-change: transform, opacity;
}
.op h1 {
  font-size: clamp(34px, 6.2vw, 74px); line-height: 1.14; font-weight: 600;
}
.op h1 em {
  font-style: normal; color: var(--ours);
  text-shadow: 0 0 46px rgba(34, 211, 238, .45);
}
.opb { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 34px; }
.scroll {
  position: absolute; z-index: 3; left: clamp(20px, 6vw, 92px); bottom: 34px;
  display: flex; align-items: center; gap: 11px;
  font: 400 11.5px/1 var(--mono); letter-spacing: .1em; color: var(--fg3);
}
.scroll span {
  width: 1px; height: 34px; background: linear-gradient(var(--ours), transparent);
  animation: cdrop 2.1s ease-in-out infinite;
}
@keyframes cdrop { 0%, 100% { opacity: .3; transform: scaleY(.5); transform-origin: top; }
                   50% { opacity: 1; transform: scaleY(1); transform-origin: top; } }

/* ── 2막 · 가로 트랙 ──────────────────────────────────────────────────── */
/*  세로로 굴린 만큼 `.pans` 가 옆으로 밀린다. 트랙 키가 곧 가로 이동 거리다.
    ⚠판 너비는 `--pw`(JS 가 잰 실제 폭)를 쓴다. `100vw` 는 스크롤바를 포함해 어긋난다. */
/* ⚠판 통과 거리를 줄이면 **같은 장수로 더 부드럽다** — 이건 공짜다.
   실측: 620vh 일 때 판 하나 통과에 1,123px. 460vh 면 777px 로 준다.
   프레임 193장과 합치면 **4px 스크롤마다 한 장**이 된다(전엔 47px). */
.tr { position: relative; height: 460vh; }
.rail { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.pans {
  display: flex; height: 100%; will-change: transform;
  --pw: 100vw;
}
.pan {
  flex: 0 0 var(--pw); width: var(--pw); height: 100%;
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
/* ⚠가로 여백은 **패럴랙스 이동폭보다 커야** 한다(이동 0.12 < 여백 0.20).
   작으면 배경이 모자라 판 경계가 드러난다 — 08-21 에 -14% 여백에 0.16 을 밀어 그랬다. */
.pbg { position: absolute; inset: -4% -20%; z-index: 0; will-change: transform; }
.pbg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }

/* 스크롤을 따라 흐르는 프레임. **정지 그림 위에 얹는다** —
   프레임을 못 받거나 JS 가 죽으면 밑에 깔린 정지 그림이 그대로 남는다.
   ⚠캔버스는 그림이지 글이 아니다. 여기가 통째로 비어도 읽을 것은 하나도 안 사라진다. */
.pseq {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; transition: opacity .4s ease;
}
.pseq.on { opacity: 1; }
.pseq canvas { display: block; width: 100%; height: 100%; }
.pscrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg, #04040AF7 0%, #04040AE0 30%, #04040A55 58%, #04040A1A 100%);
}
/* ⭐판과 판이 만나는 자리를 **어둠으로 접는다.**
   서로 다른 사진 두 장이 맞닿으면 그 선이 '잘린 것'으로 읽힌다. 양 끝을 어둡게 눌러
   경계가 컷이 아니라 그림자로 보이게 한다. */
.pan::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, #04040A 0%, #04040A00 9%),
    linear-gradient(270deg, #04040A 0%, #04040A00 9%);
}
/* 밝은 장면(09:30 아침 · 14:07 한낮)은 글이 뜨니 한 겹 더 덮는다. */
.pan.t-bad .pscrim,
.pan[style*='--i:2'] .pscrim {
  background: linear-gradient(96deg, #04040AFA 0%, #04040AEE 34%, #04040A88 62%, #04040A33 100%);
}
.pin {
  position: relative; z-index: 2;
  padding: 0 clamp(20px, 6vw, 92px); max-width: 620px;
  will-change: transform, opacity;
}
.clk { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.clk .hh {
  font: 500 clamp(30px, 4.4vw, 46px)/1 var(--mono);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.clk .no {
  font: 400 11px/1 var(--mono); letter-spacing: .12em; color: var(--fg3);
}
.pan h2 { font-size: clamp(24px, 3.5vw, 40px); line-height: 1.24; }
.pan .pin > p { color: var(--fg2); font-size: 15.5px; margin: 16px 0 0; max-width: 40ch; }
.pan .pin > p b { color: var(--fg); font-weight: 600; }

/* 색이 곧 뜻이다 — 한 판에 강조색은 하나만 */
.t-warn .clk .hh { color: var(--warn); }
.t-ours .clk .hh { color: var(--ours); }
.t-bad  .clk .hh { color: var(--bad); }
.t-kept .clk .hh { color: var(--kept); }

.mts { display: flex; gap: 34px; margin-top: 32px; flex-wrap: wrap; }
.mt { display: flex; flex-direction: column; gap: 5px; }
.mt .k {
  font: 400 11px/1.3 var(--mono); letter-spacing: .09em; color: var(--fg3);
}
.mt .v {
  font: 500 21px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--fg);
}
.t-warn .mt .v { color: var(--warn); }
.t-bad  .mt .v { color: var(--bad); }
.t-kept .mt .v { color: var(--kept); }
.t-ours .mt .v { color: var(--ours); }

/* 하루가 얼마나 갔나 — 화면 아래 가느다란 막대 */
.tl {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  height: 2px; background: rgba(234, 241, 248, .1);
}
.tl i {
  display: block; height: 100%; background: var(--ours); transform-origin: 0 50%;
  transform: scaleX(0); box-shadow: 0 0 12px var(--ours);
}

/* ── 3막 · 무한 띠 ────────────────────────────────────────────────────── */
.tkr {
  position: relative; padding: 74px 0 62px; overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(#04040A, #070A12);
}
.tkin { display: flex; width: max-content; will-change: transform; }
.tkr1 { display: flex; flex: 0 0 auto; }
.ti {
  display: inline-flex; align-items: baseline; gap: 11px;
  padding: 0 34px; border-right: 1px solid var(--line);
  font: 400 13.5px/1 var(--sans); color: var(--fg3); white-space: nowrap;
}
.ti b {
  font: 500 25px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--fg);
}
.tkf {
  margin: 34px 0 0; text-align: center;
  font: 400 11.5px/1 var(--mono); letter-spacing: .09em; color: var(--fg3);
}

/* ── 4막 · 요금 ───────────────────────────────────────────────────────── */
.pz, .ct { padding: clamp(78px, 11vw, 138px) clamp(20px, 6vw, 92px); }
/* ⚠`.in` 은 **직계 래퍼에만** 건다 — 등장 연출이 카드에 붙이던 상태 클래스와 이름이
   같아서(`.in`), 카드가 `margin:0 auto` 를 받아 **그리드 트랙 안에서 내용 폭으로
   줄며 제각각 가운데 정렬**됐다(폰 실측 08-22: 170px 트랙에 92~159px).
   상태 클래스는 `.seen` 으로 바꿨고, 래퍼 규칙도 `>` 로 좁혀 재발을 막는다. */
.pz > .in, .ct > .in { max-width: 1140px; margin: 0 auto; }
.pz h2, .ct h2 { font-size: clamp(27px, 4vw, 44px); line-height: 1.24; }
.pcs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px; margin-top: 46px;
}
.pc {
  position: relative; padding: 32px 28px 30px;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(#0A1018, #070A12);
  display: flex; flex-direction: column;
}
.pc.hot { border-color: rgba(34, 211, 238, .45); background: linear-gradient(#0C1A22, #070A12); }
.pc .tag {
  position: absolute; top: -10px; left: 28px; padding: 4px 11px; border-radius: 999px;
  font: 500 10.5px/1.5 var(--mono); letter-spacing: .08em;
  background: var(--ours); color: #04121A;
}
.pc h3 { font-size: 17px; font-weight: 600; }
.pr { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 0; }
.pr b {
  font: 600 36px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.pr span { font-size: 13px; color: var(--fg3); }
.pc .cap { margin: 12px 0 0; font-size: 12.8px; color: var(--fg3); }
.pc ul { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 11px; }
.pc li {
  position: relative; padding-left: 21px; font-size: 13.6px; color: var(--fg2);
}
.pc li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--ours); opacity: .8;
}
.pc li b { color: var(--fg); font-weight: 600; }
.pc .b { margin-top: auto; }
.note { margin: 30px 0 0; font-size: 13px; color: var(--fg3); }
.note a { color: var(--ours); text-decoration: none; }
.note a:hover { text-decoration: underline; }

/* ── 5막 · 맺음 ───────────────────────────────────────────────────────── */
/* ⚠position 없이 두면 fixed 배경(.abg/.pgbg 는 positioned z:0)이 **위에** 칠해져
   맺음 구획이 통째로 안 보인다(08-21 실측: 9쪽 전부 CTA 미표시 — '하단 공백'의 정체).
   비위치 요소의 배경·글자는 positioned 요소보다 항상 아래에 칠해진다. */
.ct { position: relative; z-index: 2; text-align: center; background: linear-gradient(#04040A, #081018); }
.ct p { color: var(--fg2); margin: 20px auto 0; max-width: 52ch; font-size: 15.5px; }
.ct .opb { justify-content: center; }

/* ── 바닥 ─────────────────────────────────────────────────────────────── */
/* ⚠.ct 와 같은 이유 — 홈(.abg)에서 footer 가 fixed 배경에 덮여 안 보였다(08-21 실측). */
.cf { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 46px clamp(20px, 6vw, 92px) 60px; }
.cf > .in { max-width: 1140px; margin: 0 auto; display: grid; gap: 16px; }
.cf .bz, .cf .cp { font-size: 12.3px; color: var(--fg3); line-height: 1.9; }
.cf .cp a { color: var(--ours); }

/* ── 폰 ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px), (orientation: portrait) {
  .op { height: 165vh; }
  .tr { height: 400vh; }             /* 판당 스크롤을 줄인다 — 손가락은 마우스보다 느리다 */
  /* ⭐세로 화면에서는 **그림이 위, 글이 아래**다.
     한가운데에 글을 두고 화면 전체를 덮개로 눌렀더니 그림이 데스크톱의 1/5 밝기가 됐다
     (실측 0.10 → 0.017). 그림이 이 시안의 절반인데 그걸 죽인 것이다.
     ⇒ 위쪽은 거의 안 덮고, 글이 앉는 아래쪽만 진하게 덮는다. */
  .pan { align-items: flex-end; }
  .pin { max-width: none; padding: 0 22px 76px; }
  .pan .pin > p { max-width: none; font-size: 14.5px; }
  .mts { gap: 24px; margin-top: 24px; }
  .mt .v { font-size: 18px; }
  .pscrim {
    background: linear-gradient(#04040A55 0%, #04040A1F 24%, #04040A8C 48%,
                                #04040AF0 72%, #04040AFC 100%);
  }
  .pan.t-bad .pscrim, .pan[style*='--i:2'] .pscrim {
    background: linear-gradient(#04040A80 0%, #04040A4D 24%, #04040AB8 48%,
                                #04040AF7 72%, #04040AFC 100%);
  }
  .opsc { background: linear-gradient(#04040A99 0%, #04040A4D 34%, #04040AF2 78%, #04040A 100%); }
  .opwrap { padding-bottom: 76px; }
  .opin { align-items: flex-end; }
  .ti { padding: 0 22px; }
  .ti b { font-size: 20px; }
  .scroll { bottom: 24px; font-size: 10.5px; }
}

/* ── 움직임을 원치 않는 사람 ──────────────────────────────────────────────
 *  ⭐트랙을 **세로 나열로 떨어뜨린다.** 가로로 안 흘러도 여섯 장면을 다 읽을 수 있어야 한다.
 *    (JS 가 안 돌 때도 이 배치가 바닥이 된다 — 움직임은 얹는 것이지 기대는 게 아니다.)
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .op { height: auto; }
  /* ⚠`static` 이 아니라 `relative` 다. `static` 으로 떨어뜨리면 `.opbg`(absolute)의
     기준점이 바깥 `.op` 로 옮겨가 **`.opin` 의 overflow:hidden 을 빠져나간다** —
     실측으로 문서가 115px 넓어졌다(움직임 끔 상태에서만 나던 가로 넘침).
     자리 잡기를 풀 때는 그 안에 무엇이 기대고 있었는지 같이 봐야 한다. */
  .opin { position: relative; height: auto; min-height: 88svh; }
  .tr { height: auto; }
  .rail { position: relative; height: auto; }
  .pans { display: block; height: auto; }
  .pan {
    width: auto; height: auto; min-height: 78svh; flex: none;
    border-bottom: 1px solid var(--line);
  }
  .pin { opacity: 1 !important; transform: none !important; }
  .pbg, .opbg, .opwrap { transform: none !important; }
  .tl { display: none; }
  .scroll span { animation: none; }
  .pseq { display: none; }          /* 움직임 끔 — 프레임을 아예 안 받는다 */
  .tkin { transform: none !important; }
  .b:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 *  홈페이지 조각들 (2026-08-21)
 *  대표: *"가장 중요한건 원페이지 짜리라는거지 / 홈페이지를 만들어야 되는데"*
 *  ⇒ 아홉 쪽이 각자 주소를 갖는다. 아래는 속쪽에서 쓰는 조각들이다.
 * ══════════════════════════════════════════════════════════════════════════ */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  padding: 10px 16px; background: var(--ours); color: #04121A;
  font: 600 13px/1 var(--sans); border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* 지금 보고 있는 쪽 표시 — 어디에 있는지 모르면 그건 홈페이지가 아니다 */
.ch nav a.on { color: var(--fg); }
.ch nav a.on::after {
  content: ''; display: block; height: 1px; margin-top: 5px;
  background: var(--ours); box-shadow: 0 0 8px var(--ours);
}

/* ── 폰 메뉴 ───────────────────────────────────────────────────────────────
 *  ⚠폰에서 nav 를 그냥 숨기면 **일곱 쪽으로 갈 길이 사라진다.** 반드시 대신 열어야 한다.
 */
.burger {
  display: none; margin-left: auto; width: 40px; height: 40px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
}
.burger i { display: block; width: 16px; height: 1.5px; background: var(--fg); border-radius: 2px; }
.menu {
  position: fixed; inset: 0; z-index: 50;
  background: #04040AF5; backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
}
.menu[hidden] { display: none; }
.min { display: grid; gap: 6px; padding: 24px; width: min(420px, 88vw); }
.min a {
  padding: 15px 18px; border-radius: 12px; border: 1px solid var(--line);
  font: 500 16px/1 var(--sans); text-decoration: none; color: var(--fg);
  background: rgba(234, 241, 248, .03);
}
.min a.on { border-color: var(--ours); color: var(--ours); }
.min a.out { border: none; text-align: center; color: var(--fg3); font-size: 13px; }

/* ── 일반 구획 ─────────────────────────────────────────────────────────── */
.sc { position: relative; z-index: 2; padding: clamp(74px, 10vw, 128px) clamp(20px, 6vw, 92px); }
.sc > .in { max-width: 1140px; margin: 0 auto; }
.sc h2 { font-size: clamp(26px, 3.7vw, 42px); line-height: 1.26; }
.sc .sub { margin-top: 18px; }
.sc .sub b { color: var(--fg); font-weight: 600; }

/* ── 카드 셋 ───────────────────────────────────────────────────────────────
 *  스크롤에 맞춰 하나씩 들어온다. ⚠들어오기 전 상태를 `opacity:0` 으로 두면
 *  JS 가 죽었을 때 **글이 통째로 안 보인다.** 그래서 `.js` 가 붙었을 때만 숨긴다.
 */
.cds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 44px;
}
.cd {
  padding: 28px 26px; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(#0A1018, #070A12);
}
.cd h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; }
.cd p { margin: 12px 0 0; font-size: 14px; color: var(--fg2); line-height: 1.78; }
.cd p a { color: var(--ours); text-decoration: none; white-space: nowrap; }
.cd p a:hover { text-decoration: underline; }
.cd.warn { border-color: rgba(255, 138, 61, .3); }
.cd.warn h3 { color: var(--warn); }
.cd.bad { border-color: rgba(244, 63, 94, .3); }
.cd.bad h3 { color: var(--bad); }

.js .cd[data-in], .js .mc[data-in], .js .pc[data-in] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1) calc(var(--k) * 70ms),
              transform .6s cubic-bezier(.22, .61, .36, 1) calc(var(--k) * 70ms);
}
.js .cd.seen, .js .mc.seen, .js .pc.seen { opacity: 1; transform: none; }

/* ── 핀 고정 계단 ──────────────────────────────────────────────────────────
 *  홈의 가로 트랙과 **같은 원리, 다른 방향**이다. 속쪽까지 가로로 흐르게 하면
 *  아홉 쪽이 전부 같은 연출이 되어 다시 '공통'이 된다.
 */
.rail2 { position: relative; margin-top: 44px; }
.rin { display: grid; grid-template-columns: 1fr 44px; gap: 30px; }
.sts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.st {
  display: flex; gap: 20px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(#0A1018, #070A12);
}
.st .num {
  flex: 0 0 auto; font: 500 13px/1.1 var(--mono); color: var(--fg3);
  padding-top: 4px; font-variant-numeric: tabular-nums;
}
.st h3 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.st p { margin: 9px 0 0; font-size: 14px; color: var(--fg2); line-height: 1.78; }

.js .st { transition: border-color .4s ease, background .4s ease, opacity .4s ease; }
.js .st:not(.now) { opacity: .42; }
.js .st.now { border-color: rgba(34, 211, 238, .42); background: linear-gradient(#0C1A22, #070A12); }
.js .st.now .num { color: var(--ours); }

.prog { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.prog i {
  display: block; flex: 1; width: 2px; margin: 0 auto; border-radius: 2px;
  background: rgba(234, 241, 248, .12); transition: background .4s ease;
}
.prog i.on { background: var(--ours); box-shadow: 0 0 8px var(--ours); }

/* ── 실측 수치 ─────────────────────────────────────────────────────────── */
.mgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px; margin-top: 44px;
  background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.mc {
  padding: 26px 22px; background: #070A12;
  display: flex; flex-direction: column; gap: 7px;
}
.mc b {
  font: 500 26px/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; color: var(--ours);
}
.mc span { font-size: 12.5px; color: var(--fg3); }

/* ── 비교표 ────────────────────────────────────────────────────────────── */
.tw { margin-top: 40px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.cmp { width: 100%; border-collapse: collapse; min-width: 560px; background: #070A12; }
.cmp th, .cmp td {
  padding: 15px 18px; text-align: left; font-size: 14px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.cmp thead th {
  font: 500 11.5px/1 var(--mono); letter-spacing: .09em; color: var(--fg3);
  text-transform: uppercase; background: #0A1018;
}
.cmp tbody th { font-weight: 600; color: var(--fg); }
.cmp td { color: var(--fg2); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: none; }
.v3only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 문의 폼 ───────────────────────────────────────────────────────────── */
.form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin-top: 40px;
}
.form .full { grid-column: 1 / -1; }
.form label { display: block; margin-bottom: 8px; font-size: 13px; color: var(--fg2); }
.form input, .form select, .form textarea {
  width: 100%; padding: 13px 15px; border-radius: 11px;
  border: 1px solid var(--line); background: #070A12; color: var(--fg);
  font: 400 15px/1.5 var(--sans);
}
.form textarea { min-height: 132px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--ours); outline-offset: 1px; border-color: transparent;
}
.form .agree { display: flex; gap: 10px; align-items: flex-start; }
.form .agree input { width: auto; margin-top: 4px; flex: 0 0 auto; }
.form .agree label { margin: 0; font-size: 13px; line-height: 1.7; }
.form .agree a { color: var(--ours); }
.form .send { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.msg { font-size: 13.5px; color: var(--fg2); }
.msg.ok { color: var(--kept); }
.msg.no { color: var(--bad); }

/* ── 바닥 링크 ─────────────────────────────────────────────────────────── */
.cf .fl { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.cf .fl a { font-size: 13px; color: var(--fg2); text-decoration: none; }
.cf .fl a:hover { color: var(--fg); }

/* ── 폰 ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .burger { display: flex; }
  .ch .hact { display: none; }
}
@media (max-width: 760px) {
  .rin { grid-template-columns: 1fr; }
  .prog { display: none; }
  .st { padding: 18px 18px; gap: 14px; }
  .cds { gap: 12px; margin-top: 32px; }
  .cd { padding: 22px 20px; }
  .mgrid { margin-top: 32px; }
  .mc b { font-size: 22px; }
  .form { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .cd[data-in], .js .mc[data-in], .js .pc[data-in] {
    opacity: 1 !important; transform: none !important; transition: none;
  }
  .js .st:not(.now) { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
 *  페이지 전체 배경 (2026-08-21)
 *  대표: *"서브페이지들은 거의 대부분다 고정이고"*
 *    앞선 판은 히어로에만 배경이 있고 **그 아래는 배경 요소가 0개**였다(실측).
 *    ⇒ 배경을 페이지 전체로 끌어올리고 문서 스크롤 진행도에 물린다.
 *      끝까지 내려가는 동안 물결이 계속 흐른다.
 * ══════════════════════════════════════════════════════════════════════════ */
/* ⭐높이 고정 — `inset:0` 은 폰 주소창이 접힐 때마다 세로로 늘어난다(.abg 와 같은 이유·08-22).
   배경이 늘었다 줄면 캔버스가 다시 맞춰지며 그림이 미세하게 튄다. lvh 로 고정한다. */
.pgbg {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh; height: 100lvh;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.pgbg > picture, .pgbg > picture img { width: 100%; height: 100%; display: block; }
.pgbg img { object-fit: cover; object-position: 58% 46%; will-change: transform; }
.pgbg .pseq { inset: 0; }
/* 위는 밝게 두고 아래로 갈수록 눌러 글자리를 만든다 */
.pgsc {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, #04040AE8 0%, #04040AC4 30%, #04040A5E 60%, #04040A2E 100%),
    linear-gradient(#04040A6B 0%, #04040A00 26%, #04040A00 52%, #04040ACC 100%);
}

/* 히어로가 자기 배경을 안 들 때(속쪽) — 페이지 배경이 그대로 비친다 */
.op.bare .opin { background: none; }
.op.bare .opsc {
  background: linear-gradient(100deg, #04040AC4 0%, #04040A8F 34%, #04040A17 66%, #04040A00 100%);
}

/* ⭐구획들은 **반투명 바닥**을 깐다 — 뒤에서 물결이 계속 흐르는 게 보여야 한다.
   ⚠글 읽기가 먼저다. 실측 대비 4.5:1 아래로 내려가면 안 된다(검출기가 잰다). */
.v3 .pgbg ~ main .sc { background: rgba(4, 4, 10, .90); }
.v3 .pgbg ~ main .sc.airy { background: rgba(4, 4, 10, .72); }
.v3 .pgbg ~ main .ct { background: linear-gradient(rgba(4, 4, 10, .84), rgba(4, 4, 10, .96)); }
.v3 .pgbg ~ main .tkr { background: rgba(4, 4, 10, .93); }
.v3 .pgbg ~ footer.cf { position: relative; z-index: 2; background: rgba(4, 4, 10, .96); }

/* 계단 구간만 살짝 열어 둔다 — 여기가 그 쪽에서 가장 오래 머무는 자리다 */
.v3 .pgbg ~ main .sc:has(.rail2) { background: rgba(4, 4, 10, .80); }

@media (prefers-reduced-motion: reduce) {
  .pgbg img { transform: none !important; }
  .pgbg .pseq { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 *  글 뒤 덮개 (2026-08-21)
 *  ⚠히어로가 자기 배경을 안 들게 바꾸면서 덮개가 약해졌다 — 실측 **최악 2.0:1**.
 *    빛나는 기둥이 흰 글자 뒤를 지나가면 글이 사라진다.
 *  ⭐구획 전체를 어둡게 누르면 그림이 죽는다(폰에서 이미 한 번 그랬다).
 *    ⇒ **글이 놓인 자리에만** 덮개를 깐다. 그림은 그대로 살아 있다.
 * ══════════════════════════════════════════════════════════════════════════ */
.opwrap { position: relative; }
/* ⚠08-22 — 홈(`.ain::before`)에서 고친 것과 **똑같은 결함**이 여기 남아 있었다.
   반경(130%)이 상자보다 커서 모서리에서 불투명한 채 끊긴다 → 화면에 **사각형·가로선**이
   드러난다(대표 캡처: 부정클릭·방문분석·대행사 세 쪽 전부).
   ⇒ 반경을 상자보다 작게 잡고 여백을 넉넉히 줘, 마지막 stop 이 상자 **안에서** 0 에 닿게 한다. */
.opwrap::before {
  content: ''; position: absolute; z-index: -1;
  inset: -150px -340px -170px -96px;
  background: radial-gradient(ellipse 58% 44% at 13% 50%,
              #04040AF7 0%, #04040AEE 28%, #04040AA6 50%,
              #04040A54 68%, #04040A00 84%);
}
@media (max-width: 760px), (orientation: portrait) {
  /* 폰은 글이 아래에 앉는다 — 아래에서 위로 덮는다 */
  /* ⚠세로로만 페이드하면 **가로 끝에서 뚝 끊긴다.**
     폰(390·430)은 글상자가 화면 폭을 다 써서 덮개 오른쪽 끝(+24px)이 화면 밖이라 안 보이지만,
     폴드(884)는 글상자가 548px 뿐이라 끝이 572px — **화면 안**이라 세로선이 드러난다
     (08-22 대표 캡처: 부정클릭·방문분석·대행사). 폭만 보고 나눈 분기가 또 폴드에서 샌 것이다.
     ⇒ `mask` 로 **가로 방향에도** 페이드를 건다. 배경 그라데이션(세로)은 그대로 두고
       오른쪽만 서서히 지운다 — 글 자리의 진하기는 손대지 않는다. */
  .opwrap::before {
    inset: -60px -300px -420px -24px;
    background: linear-gradient(#04040A00 0%, #04040AC4 12%, #04040AF7 30%,
                                #04040AF7 52%, #04040A6B 76%, #04040A00 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 58%, transparent 92%);
    mask-image: linear-gradient(to right, #000 0%, #000 58%, transparent 92%);
  }
}

/* 구획 덮개도 한 겹 올린다(글 자리 쪽) */
.op.bare .opsc {
  background: linear-gradient(100deg, #04040AE6 0%, #04040AB8 36%, #04040A47 68%, #04040A0F 100%);
}
@media (max-width: 760px), (orientation: portrait) {
  .op.bare .opsc {
    background: linear-gradient(#04040A99 0%, #04040A54 30%, #04040AC4 68%, #04040AF2 100%);
  }
}

/* 계기 숫자·아이브로도 같은 자리에 있으니 함께 덮인다 */
.op .eb, .op h1, .op .sub, .op .opb { position: relative; }

/* ══════════════════════════════════════════════════════════════════════════
 *  컨셉 Ⓐ — 페이지 전체 스크롤 (2026-08-21)
 *  marlin-jet 방식: 배경은 `fixed` 한 장, 장면들이 100vh 씩 그 위를 지나간다.
 *  ⛔가로 트랙(.tr/.rail/.pans)은 이 쪽에서 안 쓴다 — 규칙은 남겨 둔다(되돌릴 길).
 * ══════════════════════════════════════════════════════════════════════════ */

/* 배경 — 문서 전체에 하나. 스크롤이 곧 프레임 번호다. */
/* ⭐높이를 **고정**한다 — `inset:0` 은 주소창이 접힐 때마다 세로로 늘어난다(fixed 는 지금
   보이는 화면을 따른다). 그런데 장면은 `100svh` 라 안 변한다. 배경만 늘었다 줄어
   글과 어긋나 **화면이 팅긴다**(08-22 대표: "주소창 있고 없고의 차이로 바뀌는것 같긴하네").
   `lvh` = 주소창이 접힌 **가장 큰** 상태. 그 크기로 고정하면 주소창이 보일 때 아래가
   조금 화면 밖으로 나갈 뿐, 흔들리지 않는다. `100vh` 는 못 받는 브라우저용 폴백이다. */
.abg {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh; height: 100lvh;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.abg > picture, .abg > picture img { display: block; width: 100%; height: 100%; }
.abg img { object-fit: cover; object-position: 62% 50%; }
.abg .pseq { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .45s ease; }
.abg .pseq.on { opacity: 1; }
.abg .pseq canvas { display: block; width: 100%; height: 100%; }

/* ⭐글은 **왼쪽 1/3**에 온다 — 그림도 그 자리를 비워 두고 만들었다.
   그래서 덮개도 왼쪽만 진하게 눌러 그림을 살린다. */
.absc {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(100deg, #04040AF2 0%, #04040AE0 26%, #04040A5C 52%, #04040A14 100%),
    linear-gradient(#04040A73 0%, #04040A00 22%, #04040A00 60%, #04040AB8 100%);
}

/* 장면 — 하나가 100svh. 자기 진행도로 글이 들고 난다. */
.atrack { position: relative; z-index: 2; }
.ascene {
  min-height: 100svh; display: flex; align-items: center;
  padding: 0 clamp(20px, 6vw, 92px);
}
.ain { max-width: 620px; will-change: transform, opacity; }
.ascene.first .ain { max-width: 780px; }
.ascene h1 { font-size: clamp(34px, 6vw, 72px); line-height: 1.14; font-weight: 600; }
.ascene h2 { font-size: clamp(27px, 4vw, 46px); line-height: 1.22; font-weight: 600; }
.ascene h1 em, .ascene h2 em {
  font-style: normal; color: var(--ours); text-shadow: 0 0 46px rgba(34, 211, 238, .42);
}
.ascene .sub { margin-top: 18px; }

/* ⚠글 뒤에만 덮개 — 구획 전체를 누르면 그림이 죽는다(08-21 에 한 번 그랬다) */
.ain { position: relative; }
/* ⚠08-21 — 여기서 **검은 직사각형**이 그림 위에 그대로 보였다(밝은 장면 14:07 에서 뚜렷).
   원인은 gradient 가 상자 **안에서 투명해지지 않은 것**이다:
     반경 130% × 상자폭 894 = 1162px 인데 중심은 16%(143px), 오른쪽 끝까지는 751px —
     751/1162 = 65% 지점, 즉 마지막 stop(100%)에 한참 못 미친 **58% 불투명**에서 뚝 끊긴다.
     끊긴 자리가 곧 상자 모서리라 사각형으로 보인다. 세로도 같은 이유로 위아래가 각졌다.
   ⇒ 반경을 상자보다 **작게** 잡고 여백(inset)을 넉넉히 줘, 마지막 stop 이 상자 안에서
     0 에 닿게 한다. 아래 값은 실측으로 맞췄다(가로 750px·세로 여유 90px+ 지점에서 투명). */
.ain::before {
  content: ''; position: absolute; z-index: -1;
  inset: -150px -340px -170px -96px;
  background: radial-gradient(ellipse 58% 44% at 13% 50%,
              #04040AF2 0%, #04040AE8 28%, #04040AA6 50%,
              #04040A54 68%, #04040A00 84%);
}

/* 시각 표시 */
.ascene .clk { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.ascene .clk .hh {
  font: 500 clamp(28px, 3.6vw, 40px)/1 var(--mono);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ascene .clk .no { font: 400 11px/1 var(--mono); letter-spacing: .12em; color: var(--fg3); }
.ascene.t-calm .clk .hh { color: var(--fg2); }
.ascene.t-warn .clk .hh { color: var(--warn); }
.ascene.t-ours .clk .hh { color: var(--ours); }
.ascene.t-bad  .clk .hh { color: var(--bad); }
.ascene.t-kept .clk .hh { color: var(--kept); }
.ascene.t-warn .mt .v { color: var(--warn); }
.ascene.t-bad  .mt .v { color: var(--bad); }
.ascene.t-kept .mt .v { color: var(--kept); }
.ascene.t-ours .mt .v { color: var(--ours); }

/* 하루가 얼마나 갔나 */
.atrack .tl {
  position: fixed; z-index: 6; left: 0; right: 0; bottom: 0;
  height: 2px; background: rgba(234, 241, 248, .1);
}
.atrack .tl i {
  display: block; height: 100%; background: var(--ours);
  transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px var(--ours);
}

/* 아래 정보 구획은 반투명 바닥 — 뒤에서 배경이 계속 흐르는 게 보여야 한다 */
.v3 .abg ~ main .sc { background: rgba(4, 4, 10, .90); }
.v3 .abg ~ main .ct { background: linear-gradient(rgba(4, 4, 10, .86), rgba(4, 4, 10, .97)); }
.v3 .abg ~ main .tkr { background: rgba(4, 4, 10, .93); }
.v3 .abg ~ footer.cf { position: relative; z-index: 2; background: rgba(4, 4, 10, .97); }

@media (max-width: 760px), (orientation: portrait) {
  /* 폰은 글이 아래에 앉는다 — 위는 그림, 아래는 글 */
  .ascene { align-items: flex-end; padding: 0 22px 84px; }
  .ain { max-width: none; }
  /* ⚠08-21 — 폰 화면 한가운데에 **가로 경계선**이 보였다(대표 캡처).
     아래 끝이 `#04040AFC`(98% 불투명)로 **뚝 끊겨** 그 자리가 선으로 드러난 것이다.
     상자 아래 96px 지점 — 계산과 캡처가 정확히 맞았다.
     데스크톱에서 같은 유형을 고쳤는데(반경이 상자 안에서 0 에 안 닿아 사각형이 보였다)
     폰은 세로 gradient 라 아래 끝만 남아 있었다.
     ⇒ 아래로 넉넉히 늘리고 **마지막을 투명으로** 끝낸다. 글 영역의 진하기는 그대로 둔다. */
  .ain::before {
    inset: -60px -24px -420px -24px;
    background: linear-gradient(#04040A00 0%, #04040ABF 12%, #04040AF2 30%,
                                #04040AF2 52%, #04040A6B 76%, #04040A00 100%);
  }
  .absc {
    background: linear-gradient(#04040A4D 0%, #04040A1A 24%, #04040A87 50%,
                                #04040AEE 74%, #04040AFC 100%);
  }
  .abg img { object-position: 60% 44%; }
}

@media (prefers-reduced-motion: reduce) {
  .abg .pseq { display: none; }
  .abg img { transform: none !important; }
  .ain { opacity: 1 !important; transform: none !important; }
  .atrack .tl { display: none; }
}