/* ============================================================================
   about.css — /about (I AM SEAL) 조판 · v3 (2026-08-05 밤)

   ⛔ v1 반려 — *"텍스트 디자인 운영이 너무 조악하다. 영상과 이미지의 구도 조합이나
      텍스트의 구성이 정말 끔찍할만큼 쓰레기같아."* (본문 크기 균일 · 전부 가운데 ·
      그림이 칸막이)
   ⛔ v2 도 반려 — 레퍼런스에서 형태만 가져오고 **전제를 빠뜨렸다**:
      · 첫 문단만 42px — *"첫번째문단을 크게 한 이유는 이게 더 중요해보여서 그래?"*
        레퍼런스가 크게 쓰는 것은 네 단어짜리 선언이지 188자 문단이 아니다
      · 대각 흩뿌리기 — *"정리되지않은 것 같고 밸런스가 안맞는 레이아웃"*
        basicagency 의 어긋 배치는 짧은 덩어리 전제다
      · 영상이 관계 없는 문단 옆에 주차 — *"무슨 생각으로 이따위로 조합하는거야"*
      · 근거층(로고·숫자) 제안 — *"여기가 물건 판매 사이트야?"* → 폐기. 파는 면이 아니다

   ── v3 의 규칙 (전부 근거가 말로 선다) ──────────────────────────────
   ① 절 = 키워드(디스플레이) → 산문(한 크기 20px) → 현장.
      "강력한 키워드" 는 지어내지 않고 Seal 라이브의 마커를 쓴다(ALIEN LIFE · STORYTELLER,
      강조색 절반도 라이브 표기다). 얼굴은 Anton — 홈 히어로·푸터와 같은 큰 글자 계열
   ② 산문 다섯 문단은 **전부 한 크기다.** 확정 산문은 이어지는 한 편의 글이라
      한 문단만 키우면 없는 위계를 지어내는 것이다
   ③ 글과 미디어는 윗선을 맞춰 나란히 서고, 움직임은 좌우 교대 하나뿐이다
      (라이브 어바웃의 배치 문법 — 1차 사료)
   ④ 미디어는 관계를 말로 설명할 수 있는 절에만 붙는다 — 제작 절에 제작 현장 2컷,
      기다림 문단에 밀림에서 기다리는 컷. 관계가 없으면 안 붙인다
   ⑤ 닫는 문단은 풀블리드 인물 위, 그 아래 연락 두 줄 — 라이브가 닫는 방식 그대로

   실측 레퍼런스 원장 = docs/superpowers/specs/2026-08-05-about-reference-study.md
   ⚠ 서체는 확정 4종 밖으로 나가지 않는다.
   ⚠ CSS 주석에 별표 강조를 쓰지 않는다(별표 둘 + 슬래시가 주석 종료 기호다).
   ============================================================================ */

/* ══ 1. 지면 · 격자 ═══════════════════════════════════════════════════
   지면은 body.tone-void 한 곳에서만 칠한다.
   통은 사이트 기본(1180)보다 넓다 — 키워드 디스플레이와 글|미디어 나란히서기는
   폭이 있어야 성립한다(레퍼런스 셋 다 1440 에서 좌우 80~100px 만 비운다). */
.ab{ position:relative; --abmax:1420px; --abgap:clamp(16px,1.8vw,26px); }
.ab-grid{
  max-width:var(--abmax); margin:0 auto; padding:0 clamp(20px,4vw,58px);
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--abgap);
}
.ab{ --cap-ko:"Onest","Gmarket Sans",sans-serif; --cap-track:-.02em; }

/* ── M2. 여백 라벨 — 절의 이름은 글줄 옆에 작게 선다 (phantom · Seal 라이브) ──
   ★낱말은 지어내지 않았다. `ALIEN LIFE`·`STORY TELLER` 는 **Seal 이 라이브 어바웃에
     직접 쓴 마커**다. 라이브에 없는 절에는 라벨을 달지 않는다 — 그 자리는 그림이 이름을 대신한다. */
.ab-mark{
  font-family:var(--body-en); font-size:11px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; line-height:1.7; color:var(--dim);
  display:flex; flex-direction:column; gap:2px; padding-top:.7em;
}
.ab-mark b{ color:var(--accent); font-weight:700; }

/* ── M4. 헤어라인 메타 행 — 절 사이를 큰 여백이 아니라 선이 가른다 ──────
   locomotive 의 `Manifesto | 미디어 | [01:11]` 세 칸 행에서 왔다. */
.ab-rule{
  grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; border-top:1px solid rgba(255,255,255,.15); padding-top:14px;
  font-family:var(--body-en); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:#6E6E6E;
}

/* ══ 2. 히어로 — 한 덩어리다 ══════════════════════════════════════════
   v1 은 제목과 세로 영상이 관계 없이 한 줄에 나란히 앉았다. 하나로 합친다:
   화면을 채우는 영상 위에 확정 한 줄이 앉는다(`/film` 상세의 `is-fill` 과 같은 처방).
   ★position:relative 는 안전장치다 — 없으면 모바일 inset:0 의 기준이 main 으로 올라가
     히어로가 면 전체를 덮는다(sol-20260805-009). 밑판에 박는다. */
.ab-hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:0 0 clamp(30px,6svh,64px); overflow:hidden;
}
.ab-hero .ab-media{ position:absolute; inset:0; overflow:hidden; background:#000; }
.ab-hero .ab-media video, .ab-hero .ab-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ab-hero .ab-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.12) 52%,rgba(0,0,0,.5));
}
.ab-hero .ab-grid{ position:relative; z-index:2; width:100%; row-gap:18px; }
.ab-hero .ab-rule{ border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.72); }

/* 확정 한 줄. 얼굴·무게·자간은 척추 제목층 값(레퍼런스 35곳 실측 → Seal 확정 C안)이다.
   두 줄이라 행간을 1.0 까지 조인다 — 전시 밴드는 0.90~1.00 이다. */
.ab-h1{
  grid-column:1 / 11;
  font-family:var(--body-ko); font-weight:900; color:var(--ink);
  font-size:clamp(34px,6.2vw,94px); line-height:1.0; letter-spacing:-.045em;
}

/* ══ 3. 읽는 글은 한 크기다 ═══════════════════════════════════════════
   ⛔ v2 가 첫 문단만 42px 로 키웠다가 반려됐다.
      Seal: *"이것들은 왜 도대체 서체와 크기가 다른거야? 첫번째문단을 크게 한 이유는
      이게 더 중요해보여서 그래?"*
   ★답은 **아니오** 였다. 그냥 첫 문단이라 키웠고 **편집상의 근거가 없었다.**
     레퍼런스가 여는 글을 크게 쓰는 건 맞지만 그쪽이 크게 쓰는 것은 **네 단어짜리 선언**이다
     (basicagency `WE TURN CULTURAL VALUE` · kesselskramer 의 한 줄들).
     크기만 베끼고 **짧아야 한다는 전제**를 빠뜨렸다. 188자를 42px 로 놓으면 선언이 아니라 벽이다.
   ★확정 산문은 이어지는 한 편의 글이다. 한 문단만 크게 하면 **없는 위계를 지어내는 것**이라
     보는 사람 눈에는 그냥 안 맞아 보인다. → **다섯 문단을 한 크기로 둔다.**
     층은 크기가 아니라 **자리와 그림이 만든다.**                                        */
/* 본문 규격도 YSK `.say p` 를 따른다 — `clamp(15,1.15vw,17)` · 색은 dim · `max-width:40ch`.
   ⚠ 행간만 1.7 → **1.85** 로 연다. YSK 는 영문이고 한글은 글자가 빽빽해 같은 행간에서 답답하다.
     이 한 값 말고는 승인된 실물의 숫자를 그대로 쓴다. */
.ab-copy{
  font-family:var(--body-ko); font-size:clamp(15px,1.2vw,17.5px); line-height:1.85;
  color:var(--dim); letter-spacing:-.015em; font-weight:450; max-width:40ch;
}
.ab-copy + .ab-copy{ margin-top:1.5em; }

/* ══ 4. 절 — 키워드가 열고, 산문이 받고, 현장이 옆에 선다 ═════════════
   ⛔ v2 의 대각 흩뿌리기가 반려됐다. Seal: *"이런 정리되지않은 것 같고 밸런스가 안맞는
      레이아웃은 어떤 의도야?"* — 의도가 없었다. basicagency 의 어긋 배치는 **짧은 덩어리**
      사이에서 성립하는데 긴 문단을 그 자리에 밀어 넣었다.
   ★규칙 넷:
     ① 절은 **키워드(디스플레이) → 산문(한 크기)** 순서다. "강력한 키워드와 함께" 라는
        지시의 답이 여기다 — 낱말은 지어내지 않고 **Seal 라이브의 마커**를 쓴다
     ② 본문 절은 **둘뿐이고 둘 다 키워드를 갖는다**(아래 "왜 셋에서 둘이 됐나" 참고).
        같은 장치가 절반의 절에만 있으면 방문자는 그것을 **덜 만든 것**으로 읽는다
     ③ 글과 미디어는 **윗선을 맞춰** 나란히 서고 **같이 끝난다**. 위아래로 흩지 않는다
     ④ 미디어는 **짝지은 근거를 말로 적을 수 있을 때만** 붙는다. 못 적으면 안 붙인다
   ⚠ 격자에 놓인 칸은 흐름 마진을 받지 않는다(`.fc-duo` 에서 밟은 자리와 같다). */
.ab-sec{ margin-top:clamp(80px,11vw,170px); row-gap:0; align-items:start; }
.ab-sec > *{ margin-top:0; }

/* 절 키워드 — Seal 라이브의 낱말(ALIEN LIFE · STORYTELLER)을 디스플레이로.
   얼굴 = Anton: 이 사이트의 큰 라틴 글자 계열(홈 히어로·푸터·전체화면 내비)과 같은 자리다.
   강조색 절반은 라이브 표기 그대로다(라이브가 ALIEN·STORY 를 주황으로 쓴다). */
/* 제목 — YSK `.say h3` 자리. **한국어 문장**이고 강조색은 `em` 에만 준다(YSK 그대로).
   ⚠ 여기 영문 두 낱말(ALIEN LIFE)을 112px 로 세웠던 것이 반려의 한 원인이었다.
     그 낱말들은 위의 킥커(`.ab-n`, 11px)로 내려갔고 이 자리엔 **할 말이 있는 문장**이 온다.
   ⚠ 크기는 YSK 밴드(26~44)에서 한글이 빽빽한 만큼만 낮춘다. */
.ab-key{
  font-family:var(--body-ko); font-weight:700; color:var(--ink);
  font-size:clamp(23px,2.8vw,38px); line-height:1.28; letter-spacing:-.03em;
  margin-bottom:22px;
}
.ab-key em{ font-style:normal; color:var(--accent); }

/* 펀치라인 — YSK `.say .subtitle` 규격 그대로(위 26 · 안쪽 16 · 왼쪽 2px 강조선 · 600).
   본문이 끝난 자리에 못을 박는다. 절이 여기서 착지한다. */
.ab-sub{
  margin-top:26px; padding-left:16px; border-left:2px solid var(--accent);
  font-family:var(--body-ko); font-size:15.5px; line-height:1.65;
  color:var(--ink); font-weight:600; letter-spacing:-.02em;
}

/* ⛔ `.ab-run`(비트 뒤에 글만 이어 흐르던 자리)은 2026-08-06 에 지웠다 —
   그 자리에 있던 확정 산문 P4 가 Seal 지시로 내려가면서 쓰는 데가 없어졌다.
   (`.ab-vid` 를 지운 것과 같은 처방 — 안 쓰는 선언을 남겨 두면 다음 사람이
    "이 면은 이런 절이 있나 보다" 하고 되살린다.)
   그 문단이 받던 펀치라인은 셋째 악장의 `.say` 안으로 올라갔다. */

/* 키워드와 제 산문 사이 — 한 덩어리로 붙는 간격 */
.ab-sec .ab-row{ margin-top:clamp(30px,4vw,60px); }

/* ⛔ 세로 영상 규칙(`.ab-vid`)은 지웠다 — 쓰는 데가 없으면 남기지 않는다.
   (`Earth Account` 라운드에서 `data-cine-src` 를 넣었다 되돌린 것과 같은 처방.
    안 쓰는 선언이 남아 있으면 다음 사람이 "이 면은 세로를 쓰나 보다" 하고 되살린다) */
.ab-fig{ margin:0; }
.ab-fig img{ width:100%; height:auto; display:block; background:#000; }

/* ── 왜 절이 셋에서 **둘**이 됐나 (2026-08-05 밤 · v3 반려 반영) ──────────
   v3 는 본문 절이 셋인데 키워드가 둘에만 있었다. 내 근거는 *"라이브에 대응 낱말이
   없어서"* 였는데 그건 **출처에 관한 이유지 화면에 관한 이유가 아니다.** 방문자는
   이전 사이트를 모른다 — 큰 제목이 둘 나오다 셋째 절에서 없어지면 **덜 만든 것**으로 읽힌다.
   ★제약(새 낱말을 못 만든다)이 **구조를 결정하게 두면 안 된다.** 구조를 먼저 세우고
     제약 안에서 채운다. 확정 산문의 실제 구조가 이미 둘이었다:
       P1        = 내가 어디서 왔나        → ALIEN LIFE
       P2·P3·P4  = 내가 어떻게 만드나      → STORYTELLER
       P5        = 닫는 말 (풀블리드 위)
   묶고 나니 **키워드가 절마다 하나씩**이 된다. 낱말을 지어내지도 않았다.

   ── 왜 세로 폰 영상을 뺐나 ──────────────────────────────────────────────
   9:16 클립은 4칸(419px)에 놓으면 **높이가 745px** 로 결정된다. 옆에 오는 5줄 문단은
   190px 이라 **질량비 3.9:1** 이다. 칸을 어떻게 배정해도(3칸 551 · 5칸 931) 안 맞고,
   16:9 로 잘라 맞추면 폰 세로 프레임이 거의 다 잘려 나간다.
   ★**판형이 안 맞는 자산을 억지로 넣지 않는다.** gear·jungle(둘 다 16:9)은 글과 그냥 맞는다.
   ⬛ 세로 두 클립은 자산으로 남겨 둔다 — 세로가 맞는 자리가 나오면 그때 쓴다.

   ── 행 배정 ⚠ **아직 안 쟀다** ──────────────────────────────────────────
   행마다 두 칸이 **같이 끝나야 한다**(질량비 2:1 이하 · 꼬리 260px 이하).
   아래 칸 배정은 손으로 계산한 값이다 — 통 1304 · 칸 86.7 · 간격 24 기준:
     P2 6칸(640w) 약 190px  |  gear 6칸(640w) 16:9 = 360px   → 예상 1.9:1
     jungle 7칸(693w) 390px |  P4 5칸(520w) 약 380px          → 예상 1.03:1
   ⛔ **계산은 검증이 아니다.** `node build/check-balance.mjs _probe/page/about-v1.html`
     를 돌려 숫자가 나오기 전까지 이 조판은 검증된 것이 아니다.
     (2026-08-05 밤 도구가 막혀 못 돌렸다. 풀리면 돌리고 이 주석을 갱신한다)            */

/* ══ 4-B. 비트 — YSK 랜딩의 조판을 그대로 옮긴다 ══════════════════════
   ⛔⛔ 이 라운드에서 가장 크게 틀린 것: **YSK 를 열어 보지 않았다.**
      Seal: *"yourstorykorea 홈랜딩에 사진과 세로영상을 잘 활용한 예가 있어.
      넌 이 정보를 가지고 있잖아. 이런걸 yourstorykorea는 하고 넌 못하는 이유는 뭐야?"*
      이 저장소에서 가장 오래된 규칙이 **"이미 승인된 것에서 출발한다"** 인데
      (v1·v2 가 밑바닥에서 미감을 뽑다 반려됐다) 나는 밖에서 레퍼런스를 찾아 나섰다.
      밖을 뒤지는 건 리서치처럼 느껴지고 **옆 폴더를 여는 건 일처럼 안 느껴진다.** 그게 전부다.

   ── 출처 (읽어서 옮긴 것 · 발명 아님) ────────────────────────────────
   `Seal's AI/태국강의사업/site/src/v7-landing.html` §BEATS
     .beat{grid 1.12fr .88fr · gap clamp(26,5vw,72) · align-items:center · padding 7vh 0}
     .beat + .beat{border-top 1px}          절 사이 헤어라인
     .beat.flip .media{order:2}             좌우 교대
     .media .land{aspect-ratio 16/9}        가로가 바닥
     .media .port{absolute · right:-5% · bottom:-13% · width:40% · aspect 9/16
                  · border:5px solid 지면색}  세로가 모서리를 뚫고 겹친다
     .beat.flip .media .port{right:auto; left:-5%}
     모바일: 1열 · .media{margin-bottom:22%} · .port{relative · width:56% · margin:-14% 0 0 auto}

   ★**이게 내가 못 푼 문제의 답이다.** 나는 "9:16 세로는 5줄 문단 옆에서 질량비가
     3.9:1 이라 못 쓴다" 며 **영상을 버렸다.** YSK 는 세로를 **가로 위에 겹쳐 한 덩어리로**
     만들어 그 덩어리의 질량을 글과 맞춘다. 문제를 푸는 대신 재료를 버린 것이 오답이었다.

   ⚠ 검은 지면이라 **액자 색만 바꾼다** — YSK 는 밝은 지면에 밝은 액자(`--haze`)를 두르고
     그림자로 띄우지만, 검정 위에서는 그림자가 안 보인다. 대신 **지면색 액자**가 두 미디어
     사이에 틈을 만들어 세로가 가로에 녹아 붙지 않게 한다. 값(5%·13%·40%)은 안 건드린다. */
/* ⚠ `.ab-grid`(12칸) 안에 놓이므로 **먼저 12칸을 다 차지해야** 제 격자를 편다.
   안 그러면 1번 칸에만 끼어 들어가 통째로 찌그러진다(에러는 안 난다). */
.ab-beat{
  grid-column:1 / -1;
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(26px,5vw,72px); align-items:center;
  padding:clamp(56px,7vh,96px) 0;
}
/* 악장 = 키워드 + 비트(+ 이어지는 글). 선은 **악장 사이에만** 긋는다 —
   YSK 는 `.beat + .beat` 에 그었지만 그쪽은 비트 하나가 곧 악장이다. 우리는 둘째 악장이
   비트 + 글 두 덩이라, 비트마다 그으면 이어지는 글이 새 절로 잘려 나간다. */
.ab-mv + .ab-mv{ border-top:1px solid rgba(255,255,255,.14); }
.ab-beat.flip .media{ order:2; }
.ab-beat .media{ position:relative; }
.ab-beat .land{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:#0A0A0A;
}
.ab-beat .port{
  position:absolute; right:-5%; bottom:-13%; width:40%; aspect-ratio:9/16;
  overflow:hidden; background:#0A0A0A;
  border:6px solid var(--void); box-shadow:0 18px 44px rgba(0,0,0,.6);
}
.ab-beat.flip .port{ right:auto; left:-5%; }
.ab-beat .land img, .ab-beat .land video,
.ab-beat .port img, .ab-beat .port video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* 텍스트 층 — YSK `.say` 의 킥커 규격을 그대로 쓴다(11px · 자간 .24em · 앞에 22px 선).
   ★키워드를 112px 디스플레이로 세웠던 것을 **여기로 내린다.** YSK 의 그 자리는 킥커이고,
     큰 글자는 `h3`(짧은 문장) 몫인데 **우리에겐 그 문장이 없다**(확정 산문뿐이라 못 짓는다).
   ⬛ 열린 항목 — 절마다 `h3` 한 줄과 펀치라인 한 줄이 들어갈 자리가 비어 있다.
     YSK 는 그 둘이 있어서 텍스트가 세 층으로 선다. 문장을 받으면 그때 채운다. */
.ab-n{
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  font-family:var(--body-en); font-size:11px; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim);
}
.ab-n i{ display:block; width:22px; height:1.5px; background:var(--accent); }
.ab-n em{ font-style:normal; color:var(--accent); }

/* ══ 5. M6 — 닫는 말. 무대가 화면을 붙들고 스크롤이 두 박자를 민다 ═════
   2026-08-06 Seal: *"마무리발언을 한문장으로. 그걸 " " 처리해서 마지막 센터에
   히어로처럼 애니메이션화 하고 그 뒤에 지금의 풀브리드 이미지를 서서히 띄어지는
   구도로 하자. 스크롤 플레이야."*

   ── 두 박자 ──────────────────────────────────────────────────────────
   ① 검은 지면 위로 **어절이 차례로** 뜬다(따옴표 먼저 · 사이트 리빌 토큰 그대로
      y .5em · blur 7 → 0). 글만 있는 동안 화면에 다른 것이 없다
   ② 문장이 다 서고 나서 **그 뒤에서** 인물 사진이 밝아진다(불투명도 0 → 1 ·
      배율 1.12 → 1). 나타나는 것이지 움직이는 것이 아니다 — 배율은 서서히 놓는 손이다
   ★순서가 뜻이다. 사진이 먼저 오면 문장이 사진의 캡션이 되고, 문장이 먼저 오면
     사진이 그 문장이 서 있는 자리가 된다. Seal 이 지시한 순서가 뒤쪽이다.

   ── 왜 sticky 인가 ───────────────────────────────────────────────────
   `film-case.css` §도시 라벨에서 sticky 가 한 번 반려됐다. 거기서 틀린 것은
   **고정된 요소가 흐르는 콘텐츠 위를 덮은 것**이다. 여기는 덮을 것이 없다 —
   무대가 곧 화면 전체이고 그 아래로 지나가는 것이 없다.
   ⚠ 그래서 `overflow:hidden` 은 절이 아니라 **무대**에 준다(절에 주면 sticky 가 죽는다).

   ★가운데 정렬은 이 면에서 여기 한 곳뿐이다 — 짧은 선언에만 쓴다는 배치 카드 규칙 그대로.
   ⚠ 초기 숨김은 `html.vw` 가 걸릴 때만 생긴다. JS 가 죽거나 모션을 끈 환경에서는
     클래스가 안 붙어 문장과 사진이 그냥 보인다(`html.mo`·`html.fx` 와 같은 장치). */
/* ⚠ 길이와 앞 여백은 2026-08-06 에 한 번 줄였다 (Seal: *"글이 나오는 공간이 지금은 너무
   떨어져있는데 조금 붙일 수 있을까? 글자는 스크롤되면 빨리 나오면서 이미지 풀블리드도
   나중에 나오는 해결책은 없을까?"*). 240svh + 앞 여백 180px → **180svh + 40px**.
   ★두 요구는 서로 안 부딪힌다 — 절 길이는 **두 박자의 간격**을 정하고, 글이 언제 뜨는지는
     `site.js §11` 의 구간이 정한다. 짧게 만들고 글 구간을 앞으로 당기면 둘 다 된다.
   ⚠ 더는 못 줄인다 — 무대가 붙들리기 전 구간은 **늘 화면 하나만큼**(100svh)이고
     그 뒤로 두 박자가 지나갈 자리가 남아야 한다. 150svh 아래로 내리면 사진이 뜨다 만다. */
.ab-close{
  position:relative; margin-top:clamp(28px,4vw,56px);
  height:180svh;
}
.ab-stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ab-close .ab-media{
  position:absolute; inset:0;
  transform:scale(1.12); transform-origin:50% 46%;
}
.ab-close .ab-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ⚠ 평평한 어둠으로 덮지 않는다 — .55~.72 를 통으로 깔았더니 이미 어두운 흑백 사진이
   뭉개져 인물이 안 보였다(실물에서 잡혔다). 글이 앉는 **가운데 띠에만** 어둠을 모으고
   위아래는 사진을 살린다. 대비는 오버레이가 아니라 글 자신의 그림자가 만든다. */
.ab-close .ab-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.62) 42%,
             rgba(0,0,0,.62) 62%,rgba(0,0,0,.34) 100%);
}

/* 문장 — 이 면에서 가장 큰 한글이다. 얼굴은 산문과 같은 Pretendard 900 이고
   크기만 히어로 밴드로 올린다(새 서체를 들이지 않는다 — 확정 4종 밖으로 안 나간다). */
.ab-vow{
  position:relative; z-index:2; text-align:center;
  max-width:min(22em,92vw); padding:0 var(--edge);
  font-family:var(--body-ko); font-weight:900; color:var(--ink);
  /* 문장이 짧아지면 크기를 올린다 — 히어로는 글자 크기가 아니라 **화면 점유율**이다.
     27자였을 때 5.2vw(76px)로 첫 줄이 통의 73% 였다. 지금은 9자라 같은 크기면 40% 밖에 안 된다.
     7.4vw(106px)에서 첫 줄이 다시 70% 가 된다. */
  font-size:clamp(38px,7.4vw,106px); line-height:1.30; letter-spacing:-.05em;
  text-shadow:0 2px 34px rgba(0,0,0,.72);
}
/* ⚠ 어절은 inline-block 이어야 한다 — 그냥 inline 이면 transform 이 **조용히 무시된다**.
   덤으로 어절이 통째로 넘어가서 ` ` 를 따로 안 박아도 된다(`서 있는` 은 이미 박았다). */
.ab-vow .w, .ab-vow .qm{ display:inline-block; will-change:opacity,transform,filter; }
/* 따옴표는 글줄 밖으로 내민다 — 안 내밀면 첫 글자의 왼쪽 선이 따옴표 폭만큼 밀려
   가운데 정렬이 눈에 보이게 틀어진다(행잉 문장부호). 색은 강조색을 안 쓴다:
   이 면의 강조색은 절 안에서 일하고, 닫는 말은 조용히 닫는다. */
.ab-vow .qm{ color:rgba(255,255,255,.46); margin-left:-.42em; }
.ab-vow .qm.is-end{ margin-left:0; margin-right:-.42em; }

/* 스크롤에 걸리는 값 — JS 가 살아 있을 때만(site.js §11 이 `html.vw` 를 건다).
   ⚠ 초기 숨김을 따로 안 적는다. `var(--ip,0)` 의 **대체값 0 이 곧 초기 상태**라
   선언을 둘로 나누면 같은 것을 두 번 적는 것이 된다(뒤엣것이 이기므로 앞엣것은 죽는다). */
html.vw .ab-close .ab-media{
  opacity:var(--ip,0);
  transform:scale(calc(1.12 - .12 * var(--ip,0)));
}
html.vw .ab-vow .w, html.vw .ab-vow .qm{
  opacity:var(--q,0);
  transform:translate3d(0,calc((1 - var(--q,0)) * .5em),0);
  filter:blur(calc((1 - var(--q,0)) * 7px));
}

/* ══ 6. 연락 — 폼이 아니라 두 줄이다 ══════════════════════════════════
   2026-08-05 Seal: *"컨택트폼은 만들지않아도돼. 그냥 내 이메일과 인스타그램 연락처만
   남겨놓고 연결하게끔해."* → 폼·백엔드 배선을 걷고 링크 둘만 남긴다.
   ⛔ 예산·목적은 물론이고 **아무것도 묻지 않는다.** 사이트 = 소개(자석 아님).
   주소는 라이브에서 실측한 것이다(`instagram.com/sealkimbkk` — 라이브 어바웃 DOM). */
/* ⚠ 작은 글자를 세 겹으로 두지 않는다 — `SAY HELLO` 라벨 + `MAIL` + `INSTAGRAM` 이
   한 행에 나란히 서서 층이 겹쳤다(실물에서 잡혔다). 절 라벨을 걷고 **주소 앞 라벨만**
   남긴다. 그러면 링크가 다른 절과 같은 왼쪽 선(1번 칸)에서 시작한다. */
.ab-ask{ margin-top:clamp(70px,10vw,140px); row-gap:0; }
.ab-ask .links  { grid-column:1 / 13; display:flex; flex-direction:column;
                  gap:clamp(10px,1.4vw,20px); }
.ab-link{
  display:inline-flex; align-items:baseline; gap:.7em; width:fit-content; max-width:100%;
  text-decoration:none; color:var(--ink);
  font-family:var(--body-ko); font-weight:900; letter-spacing:-.04em; line-height:1.06;
  font-size:clamp(24px,4.4vw,64px);
  transition:color .3s cubic-bezier(.16,1,.3,1);
}
/* ⚠ 라벨 폭을 고정한다 — `MAIL` 과 `INSTAGRAM` 은 글자 수가 달라서, 그냥 두면 큰 글자의
   시작 x 가 두 줄에서 어긋난다(1차 실물에서 25px 틀어졌다). 자리마다 손으로 맞추지 않고
   밑판이 막는다(`Earth Account` 원장 두 칸에서 배운 그 처방). */
.ab-link small{
  font-family:var(--body-en); font-size:11px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim);
  flex:0 0 auto; width:9.4em; transition:color .3s;
}
.ab-link:hover{ color:var(--accent); }
.ab-link:hover small{ color:var(--ink); }

/* ══ 7. 접는 자리 ═════════════════════════════════════════════════════
   좁은 폭에서는 나란히 세울 자리가 없다. 키워드 → 산문 → 그림 → 산문 순으로
   **전부 통 폭**으로 눕는다. ⚠ 여기서 칸을 들쭉날쭉 들여쓰지 않는다 —
   데스크톱에서 균형을 맞춰 놓고 모바일에서 다시 어긋내면 같은 결함이 반복된다.  */
@media(max-width:860px){
  .ab-grid{ grid-template-columns:repeat(6,1fr); }
  .ab-h1{ grid-column:1 / -1; }

  /* 닫는 말 — 좁은 폭에서는 붙들어 두는 길이를 더 줄인다(폰은 한 번에 넘기는 양이 크다).
     ⚠ `<br>` 은 **살려 둔다** — 문장이 짧아져서(`저는 영상이 좋아요.` / `너무너무`)
       폰 폭에서도 두 줄이 그대로 들어간다. 못을 빼면 `너무너무` 가 첫 줄로 딸려 올라간다. */
  .ab-close{ height:165svh; }

  .ab-ask .links{ grid-column:1 / -1; }
  /* 좁은 폭에서는 라벨을 주소 위로 올린다 — 한 줄에 두면 주소가 접힌다 */
  .ab-link{ flex-direction:column; align-items:flex-start; gap:4px; }
  .ab-link small{ width:auto; }
}

/* ══ 8. 비트 모바일 — 글이 세로를 **타고 흐른다** (2026-08-06) ══════════
   > Seal: *"세로영상은 원래 크기대로 두고 가로영상과 세로영상의 빈 공간에 텍스트를
   >   넣으란거였어. 텍스트박스를 거기에 위치시키고 크기를 더 줄이던지 어쩐지해서말이야.
   >   위쪽에 공간이 있잖아? 저기로 넣어보자는거야."*

   ── 여기까지 두 번 헛짚었다 ─────────────────────────────────────────
   ① 1차 — *"세로가 너무 크다"* 를 글자 그대로 받아 56%→42% 로 줄였다. **증상만 건드렸다.**
      매달린 세로의 왼쪽이 비는 것이 문제였지 세로가 큰 것이 문제가 아니었다.
   ② 2차 — 격자 두 칸으로 갈라 제목을 세로 옆에 세웠다. 칸을 나눴더니 **세로가 그 칸에
      갇혀** 더 작아졌고(124px) 제목은 반대로 커졌다. Seal: *"이건 세로 영상이 반대로
      너무 작아. 난 이걸 원하는게 아니야."*
   ★두 번 다 **재료를 건드려 자리를 만들었다.** 요구는 반대였다 —
     **재료는 그대로 두고 글이 그 옆으로 들어가는 것.**

   ── 그래서 격자가 아니라 흐름(float)이다 ────────────────────────────
   세로를 오른쪽으로 **띄우면**(float) 뒤따르는 글줄이 알아서 그 옆을 채우고,
   세로가 끝나는 자리부터 저절로 전폭으로 돌아온다. 칸을 나누지 않으므로
   세로는 제 크기(42%)를 그대로 쓰고 **글이 형태에 맞춰 들어간다.**

     [가로 — 전폭                    ]
     [킥커·제목·본문 첫 줄들 | 세로  ]   ← 빈 공간을 글이 채운다
     [본문 나머지 — 전폭             ]
     [펀치라인 — 전폭                ]

   ⚠ **flex 상자는 플로트를 안 피한다** — 킥커(`.ab-n`)가 `display:flex` 라 세로 밑으로
     그냥 들어간다. 모바일에서만 블록으로 바꾸고 앞의 짧은 선을 `inline-block` 으로 세운다.
     (글줄이 플로트를 피하는 것은 **줄상자**이지 블록상자가 아니다. 블록 자체는 폭이 그대로다)
   ⚠ `.ab-beat` 에 `flow-root` 를 준다 — 안 주면 플로트가 절 밖으로 새어 다음 악장을 민다.
   ⚠ 펀치라인은 `clear:both` — 왼쪽 강조선이 세로 옆에서 시작하면 절의 착지가 흐트러진다.
   ⚠ display:contents 는 rect 가 전부 0 이라 `check-balance` 가 그냥 두면 아무것도 못 잰다.
     검사기에 **상자 없는 자식을 손자로 갈아 끼우는 처리**를 같이 넣었다(거짓 통과 방지). */
@media(max-width:860px){
  .ab-beat{ display:flow-root; }
  .ab-beat .media, .ab-beat .say{ display:contents; }
  /* ⚠ 42% 에 px 상한을 건다 — 폭이 넓어지면 세로는 42% 만큼 계속 커지는데 옆의 글은
     줄이 길어져 **짧아진다.** 재 보니 820 에서 세로가 글보다 238px 더 내려갔다(그 옆이 빈다).
     폰(390)에서는 42% 가 147px 이라 상한에 안 닿는다 — 원래 크기 그대로다.
     ⚠ 물리는 깊이도 통 폭이 아니라 **세로 제 폭**에 걸어야 한다. 통에 걸면 넓은 폭에서
       음수 마진만 커져 세로가 가로를 덮는다. */
  .ab-beat .port, .ab-beat.flip .port{
    position:relative; inset:auto; float:right;
    width:min(42%,168px);
    margin:calc(min(42%,168px) * -.25) 0 20px clamp(15px,4vw,24px);
  }
  /* 킥커 — 블록으로 바꿔야 글줄이 세로를 피한다 */
  .ab-beat .ab-n{ display:block; margin-bottom:14px; }
  .ab-beat .ab-n i{ display:inline-block; vertical-align:middle; margin-right:11px; }
  /* 제목은 좁아진 자리에 맞춰 **줄인다** — 이 자리에서 큰 글자는 자리를 못 찾는다 */
  .ab-beat .ab-key{ font-size:clamp(21px,5.4vw,28px); margin-bottom:16px; }
  .ab-beat .ab-sub{ clear:both; }
}