/* ── 속 페이지 ───────────────────────────────────────
   회사소개·포트폴리오는 **동화책 한 권처럼** 읽혀야 한다 (L 2026-08-14).
   그림 한 장 → 점 셋 → 짧은 글. 그 반복. 화면 UI 처럼 보이는 것(라벨 레일 · 카드 그리드 ·
   섹션 제목)은 전부 뺐다. 책에는 그런 게 없다
   ══════════════════════════════════════════════════════ */

/* ⛔ 회사소개를 순수 검정으로 뒤집었던 블록(PLAN §9-2)은 2026-08-15 밤에 **지웠다.**
   L 이 같은 날 밤에 배너를 흰 종이 위 펜화로 바꾸면서 *"바탕은 완전 하얀 색깔, 글씨는 검은색"* 으로
   되돌렸기 때문이다. 세 페이지 전부 `--paper:#fff` 다 (css/base.css).
   ⚠️ `body.tale` 은 여전히 about 만 잡는 핸들로 살아 있다(아래 `body.tale main`).
      색을 뒤집는 용도로 되살리지 마라 — 되돌린 판이다. 옛 검정판은 git 에 있다 */

.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--pad)}

/* ── 배너 — 회사소개 맨 위 (PLAN §9-1) ────────────────
   ⚠️ <main> **바깥**에 둔다. main 은 max-width:920px 이라 안에 넣으면 배너가 좁아진다.
      100vw + 음수 마진으로 뚫는 방법은 스크롤바 폭만큼 가로 넘침을 만든다 (qa.py 가 잡는다)
   ⚠️ 비율이 1.357:1 이라 가로형 배너가 아니다. object-fit:cover 로 채우면
      "WONDERLAND" 글자가 잘린다 → **contain**. 남는 자리는 검정인데 페이지도 검정이라 안 보인다
   ⚠️ display:grid + place-items:center 로 짜지 마라 (2026-08-15 실측 버그).
      가운데정렬된 그리드 아이템은 stretch 가 아니라서 img 의 height:100% 가 안 풀리고,
      **비율로 되계산돼 1440x1061 이 됐다** — 배너 상자(1440x900)를 161px 뚫고 나가
      바로 아래 인사글을 덮어 버렸다. 그냥 블록 하나면 height:100% 가 제대로 풀린다
   ⚠️⚠️ 2026-08-15 밤 실측 버그 — **상자를 그림에 맞춰야 마스크가 그림에 닿는다.**
      전에는 img 를 `width:100%;height:100%;object-fit:contain` 으로 뒀다. 그때 배너는 비 1.357 이라
      상자를 세로로 꽉 채워서 마스크와 그림이 1:1 이었다. 그런데 세 번째 배너는 비 1.95 로 넓어져
      1440x900 상자 안에 1440x**738** 로만 그려졌다 → 마스크의 92~100% 는 **그림 아래 빈칸**을 지나가고
      정작 그림 아랫단은 **칼로 자른 그대로** 남았다 (실측: y=735 에서 밝기가 0 → 251 로 뚝 떨어졌다).
      그래서 지금은 flex 로 가운데 놓고 `max-width/max-height` 로만 재운다 —
      **상자 크기 = 그려지는 크기** 라서 마스크가 어떤 비율에서도 그림에 정확히 맞는다 */
.banner{position:relative;height:100dvh;width:100%;
  display:flex;align-items:center;justify-content:center}
/* ★ 아랫단은 종이로 흘려보낸다 (L 2026-08-15 밤: "그림이 너무 딱 잘라보이니까
   페이드 아웃되게 자연스럽게 이어지게"). 원본이 아랫변에서 잘려 있어서 그냥 두면
   칼로 자른 것처럼 끝났다. 마스크는 알파를 깎는 것이라 **바탕색이 뭐든 그대로 통한다** —
   검정판일 때 잡은 값을 흰 바탕에서도 그대로 쓴다
   ⚠️ 메인 인물(css/home.css 의 .fig)에는 넣지 마라 — 거기선 L 이 빼라고 했다 (PLAN §3-2)
   ⚠️ contain 이라 그려지는 그림이 상자를 세로로 꽉 채운다 → 요소에 건 마스크가 그림에 1:1 로 맞는다.
      가로로 남는 여백은 원래 종이색이라 마스크가 지나가도 티가 안 난다
   ⚠️ 세기는 두 번 조정했다. 82% 부터 흘렸더니 L: **"페이드아웃되는 게 너무 심하다"** →
      **92% 부터**로 줄였다. 지금은 그림의 마지막 8% 에서만 옅어진다.
      더 줄이면(96% 이상) 흐려지는 구간이 너무 짧아 다시 "칼로 자른" 느낌이 돌아온다 */
/* 크기 — L 2026-08-15 밤: "이 이미지가 너무 커. 이거에 한 삼 분의 이 정도 크기면 좋겠어"
   (아랫단 페이드는 "딱 좋다" 고 했으니 건드리지 마라)
   화면 폭의 100% → **66%** 로. 배너 상자는 100dvh 그대로 두고 그림만 줄여서 가운데 놓는다 —
   종이 위에 판 한 장 얹은 모양이 된다.
   ⚠️ 폰은 이미 200px 밖에 안 된다. 거기까지 66% 로 줄이면 인물이 안 보인다 → 아래 미디어쿼리에서 따로 */
.banner img{max-width:66%;max-height:100%;width:auto;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 92%,rgba(0,0,0,.72) 96%,
    rgba(0,0,0,.3) 98.5%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 92%,rgba(0,0,0,.72) 96%,
    rgba(0,0,0,.3) 98.5%,transparent 100%)}
/* 폰은 세로가 길어서 contain 하면 그림이 화면의 3분의 1로 쪼그라들고 위아래가 텅 빈다.
   → 폰에서만 높이를 풀고 위아래 여백으로만 숨을 준다 (스크린샷 보고 정한 값) */
@media (max-width:820px){
  /* 세 번째 배너는 가로로 아주 넓어서(비 1.95) 폰에서는 200px 밖에 안 된다.
     그 위아래로 검정… 아니 흰 여백까지 크게 남으면 그림이 붕 뜬다 → 여백을 더 조였다 */
  .banner{height:auto;padding-block:7dvh 5dvh}
  /* 데스크톱의 66% 를 여기까지 끌고 오면 인물이 130px 로 뭉개진다. 폰은 살짝만 줄인다 */
  .banner img{max-width:88%}
}
/* 스크롤 신호 — 아래를 가리키는 작은 꺾쇠 하나. ⛔ 글자는 쓰지 않는다 (L: 말이 길면 반려)
   ⚠️ 이게 **그림 위**에 얹힌다 (contain 이 세로를 꽉 채우므로). 세 번 틀리고 잡았다:
      ① 크림색 반투명 **세로선** → 검정판에서 밝은 드레스 위에 완전히 안 보였다
      ② 흰 세로선 → 보이긴 하는데 하필 그 자리가 옷 주름이라 **주름으로 읽혔다**
      ③ 흰 꺾쇠 → 바탕이 흰색으로 뒤집히면서 이번엔 흰 배경에 묻혔다
      → 잉크색 꺾쇠 + 흰 글로우. 앉는 자리가 마스크로 거의 흰색까지 흐려진 구간이라 잘 선다 */
.scrolltip{position:absolute;left:50%;bottom:clamp(18px,3.2vh,36px);
  width:13px;height:13px;transform:translateX(-50%) rotate(45deg);
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);opacity:.55;
  filter:drop-shadow(0 0 3px var(--glow))}   /* 다크에선 글로우가 검정으로 뒤집힌다 */

/* 책의 한 장 — 가운데로 모으고 위아래로 크게 숨을 준다 */
body.tale main{max-width:920px;margin-inline:auto;padding-inline:var(--pad)}
.leaf{display:grid;justify-items:center;text-align:center;
  padding:clamp(30px,6vh,64px) 0}
.leaf.first{padding-top:clamp(96px,15vh,170px)}
.leaf.end{padding-bottom:clamp(80px,13vh,150px)}

/* ⛔ 삽화(.plate) 규칙은 2026-08-15 에 지웠다 — 회사소개에서 앨리스 그림(alice.webp)을
   뺐기 때문이다 (L 확정 · PLAN §9). 파일은 지우지 않았으니 되돌릴 일이 있으면 git 에 있다 */

/* 장면 사이 — 책의 여백. 이게 호흡을 만든다 */
.dots{text-align:center;color:var(--faint);letter-spacing:.5em;
  font-size:13px;padding:clamp(18px,3.4vh,40px) 0}

/* ── 인사 — 배너 바로 아래, 아주 작게 (L 확정 · PLAN §9-3 ②) ──
   "안녕하세요 / 숏폼 프로덕션 토끼굴입니다" 는 배너에 자리를 내주고 여기로 내려왔다.
   큰 줄은 아래 .hey 가 맡는다 */
/* ⚠️ 본문(.tell)이 세 번 작아지면서 이 인사가 본문보다 커져 버렸다 (15.1 vs 14.3px · 실측).
   인사는 배너에 자리를 내주고 내려온 **작은 줄**이므로 본문 아래에 있어야 한다.
   지금 이 페이지의 활자 사다리 (1440 기준): .hey 32.6 > .tell 14.3 > .hello 13.5 > .fine 13.25.
   본문 크기를 건드리면 이것도 같이 확인해라 — 셋이 1px 안에 붙어 있어서 쉽게 뒤집힌다 */
.hello{font-family:var(--kr);font-weight:400;color:var(--ash);
  font-size:clamp(11.3px,.94vw,13.8px);line-height:2.15;letter-spacing:-.012em}
.leaf.greet{padding:clamp(40px,9vh,96px) 0 clamp(10px,2vh,24px)}

/* ── 인사 한 줄 — 이 페이지에서 제일 큰 글씨 ──────────
   L: "너무 다 똑같은 글씨라 재미도 없고" → 큰 줄 · 중간 · 작은 줄, 셋으로 벌린다.
   여기엔 업종 설명을 붙이지 않는다. 이름만 크게 말하고 나머지는 아래에서 작게 (조사 결과).
   ⚠️ 한글 세리프는 커질수록 자간이 벌어져 보인다 → 큰 글씨일수록 letter-spacing 을 더 조인다 */
/* 2026-08-15 밤 L: "여기 사는 사람들은 부터 그때 뵙겠습니다 까지" 축소.
   처음엔 ÷1.5 로 갔다가 **÷1.35 로 되돌렸다** (L: "그래도 저거보단 1.3-1.45배 더?").
   옛 23/3.5vw/44 → 17/2.59vw/32.6 */
.hey{font-family:var(--kr);font-weight:400;
  font-size:clamp(17px,2.59vw,32.6px);line-height:1.62;letter-spacing:-.042em}
.leaf.hi{padding:clamp(6px,1.4vh,18px) 0 clamp(24px,4.6vh,52px)}

/* ── 우리는 누구인가 ────────────────────────────────
   L 이 고른 크기다 — "요 글씨 크기 딱 좋아" (문구 후보 화면의 그 크기 그대로).
   가운데정렬 · 마침표 없음 · 문단 사이는 한 줄 띄운 만큼만 */
/* ⚠️ 줄바꿈이 <br> 로 고정돼 있다 (PLAN §9-3) → **한 줄이라도 접히면 판이 무너진다.**
   제일 긴 줄이 14.5px 에서 325px 인데, 폰 본문 폭은 (화면폭 − 좌우 20px) 이다.
   390px 폰은 350px 라 여유가 있지만 **360px 안드로이드에서 실제로 접혔다**(실측).
   그래서 좁은 화면에서만 글씨를 줄여 줄바꿈을 지킨다 — 325 / 14.5 ≒ 22.4 (글씨 1px 당 줄 22.4px)
   → 필요한 최대 크기 = (100vw − 20*2) / 22.4 ≒ 4.25vw − 1.8px  (390px 에서는 14.775 라 안 걸린다.
     L 이 고른 14.5px 는 목표 화면에서 그대로 남는다) */
/* ★ 크기가 세 번 움직였다. 마지막 판이 지금이다 (2026-08-15 밤)
   ① "소개글 살짝 크기 더 작게"                    14.5 → 13.4px
   ② "1.5배 정도 작게"                             13.4 → 8.93px  ← 너무 갔다
   ③ "애벌레 글씨보다는 살짝 더 크게 · 저거보단 1.3-1.45배"  → **지금 판**

   ⚠️ ② 가 왜 실패했나 — 본문이 맨 아래 애벌레 줄(`.fine`)보다 **작아졌다.**
      `.fine` 은 L 이 "크기까지 그대로 두라" 한 곳이라 줄일 수가 없다.
   ⚠️ 그래서 지금 판은 **`.fine` 의 곡선에 1.08배를 곱한 것**이다 —
      `.fine` = clamp(11, .92vw, 13.5) · `.tell` = clamp(11.9, .99vw, 14.6).
      어느 화면 폭에서도 본문이 애벌레보다 딱 8% 크다. **이 관계를 깨지 마라.**
      한쪽만 고치면 폰(11 vs 11.9)이나 데스크톱(13.2 vs 14.3) 중 하나에서 다시 뒤집힌다
   ⚠️ 1440 에서 14.3px = 옛 19.3px 의 **÷1.35** (L 이 말한 1.3~1.45 안).
      폰은 옛 13.4 → 11.9 라 ÷1.13 밖에 안 된다. 애벌레의 폰 하한(11px)이 높아서
      더 줄이면 다시 뒤집히기 때문이다. 폰만 비율이 다른 건 의도한 것이다

   min 의 두 번째 인자는 좁은 화면에서 줄바꿈이 접히는 걸 막는 식이다 (위 설명 참고).
   지금 크기에서는 320px 화면에서만 걸린다 */
.tell{font-family:var(--kr);font-weight:400;
  font-size:min(clamp(11.9px,.99vw,14.6px),calc(4.25vw - 1.8px));
  line-height:2.1;letter-spacing:-.018em}
/* ★ 강약은 **크기로만** 준다 (L 지시 2026-08-15: "두께 말고 크기로만").
   그래서 이 사이트에 굵은 글씨는 없다. 세리프 본문은 굵히면 획이 뭉쳐서
   같은 글씨체로 안 읽히기도 한다 — 크기로 주면 결이 그대로 남는다 */
.tell em{font-style:normal;font-size:1.22em;letter-spacing:-.028em}
/* 문단 사이 — L 이 2026-08-15 밤에 **두 번** 더 벌리라고 했다.
   32→52 (1차) → **40~66px** (2차). 데스크톱 900h 에서 63px 이 나온다.
   ⚠️ 픽셀만 보지 말고 **줄 수**로 봐라. 글씨가 ÷1.5 로 작아져 줄간이 40 → 27px 이 됐으므로
      같은 45px 이라도 1.1줄에서 1.7줄로 이미 벌어져 있었다. 지금은 2.3줄이다 */
.leaf.say{gap:clamp(40px,7vh,66px);padding:clamp(10px,2vh,26px) 0 clamp(40px,8vh,90px)}

/* 맨 마지막 줄 — **진짜 작은 글씨** (L 지시). 조용히 닫는다 */
.fine{font-family:var(--kr);font-weight:400;color:var(--ash);
  font-size:clamp(11px,.92vw,13.5px);line-height:2.3;letter-spacing:-.01em}

/* ── 빈 페이지 (포트폴리오 · 아직 아무것도 안 넣는다) ────
   L: "포트폴리오는 아직 그냥 아무것도 넣지 마" · 여기도 책의 한 장처럼 */
main.blank{min-height:100dvh;display:grid;align-content:center;justify-items:center;
  text-align:center;max-width:920px;margin-inline:auto;
  padding:clamp(96px,16vh,180px) var(--pad) clamp(40px,8vh,90px)}
main.blank .soon{font-family:var(--en);font-size:clamp(30px,5.4vw,66px);font-weight:400;
  letter-spacing:-.01em;line-height:1.08}
main.blank .soonsub{margin-top:clamp(16px,2.6vh,30px);color:var(--ash);
  font-size:clamp(12.5px,1.02vw,15px);line-height:2.0;max-width:40ch}

/* ── 포트폴리오 목록 (data/work.js 에 건이 들어오면 선다) ── */
.works{display:grid;margin-top:clamp(26px,5vh,60px)}
.work{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.1fr) auto;
  gap:clamp(12px,2vw,34px);align-items:baseline;
  padding:clamp(17px,2.6vh,30px) 0;border-bottom:1px solid var(--hair);transition:background .3s}
.work:first-child{border-top:1px solid var(--hair)}
.work:hover{background:rgba(13,12,11,.035)}
:root[data-theme="dark"] .work:hover{background:rgba(247,245,240,.05)}   /* 위 줄이 하드코딩이라 따로 */
.work .no{font-family:var(--en);font-size:12px;color:var(--faint)}
.work h3{font-family:var(--kr-big);font-weight:400;font-size:clamp(17px,2vw,26px);
  letter-spacing:-.035em;line-height:1.4}
.work .kind{font-family:var(--en);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-top:3px}
.work .desc{color:var(--ash);font-size:clamp(13.5px,1.08vw,16px);line-height:1.7}
.work .go{font-family:var(--en);font-size:11px;letter-spacing:.18em;color:var(--faint);white-space:nowrap}
.work a.hit{position:absolute;inset:0}
.work:hover .go{color:var(--ink)}

/* ── 하단 ─────────────────────────────────────────── */
.pagefoot{border-top:1px solid var(--hair);
  padding:clamp(24px,3.6vh,40px) 0 clamp(20px,3vh,30px);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px clamp(18px,3vw,40px);
  align-items:baseline}
.pagefoot .contact{font-size:12.5px}

@media (max-width:820px){
  /* .plate 를 여기서 다시 줄이지 않는다 — 위의 max-height 가 이미 폭으로 잡아 준다.
     L: "앨리스 사진 크게" (2026-08-15) */
  .work{grid-template-columns:34px minmax(0,1fr);row-gap:7px}
  .work .desc,.work .go{grid-column:2}
}

/* Contact 라벨 — 메인(.line .k)과 같은 모양 */
.pagefoot .contact .k{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}