/* ══════════════════════════════════════════════════════════
   토끼굴 · Rabbit Hole — v9
   명함이 곧 홈페이지다. 무광 종이 · 검정 잉크 · 그 외의 색은 없다.
   ══════════════════════════════════════════════════════════ */

:root{
  /* ★ 2026-08-15 밤 L: "완전 하얀 색깔 바탕" — 세 페이지 전부.
     옛 종이색 #f7f5f0(무광 아이보리)에서 **순수 흰색**으로 갔다.
     ⚠️ 회사소개를 잠깐 순수 검정으로 뒤집었던 판(PLAN §9-2)은 같은 날 밤에 되돌렸다.
        css/page.css 에 body.tale 색 블록이 남아 있으면 그건 지워야 하는 잔재다 */
  --paper:#fff;
  --ink:#0d0c0b;
  --ash:rgba(13,12,11,.56);
  --faint:rgba(13,12,11,.32);
  --hair:rgba(13,12,11,.16);

  /* 글씨 — L 이 직접 고른 것 (2026-08-15).
     L 이 "이게 좋은듯" 하고 가리킨 글자는 윈도우 내장 **바탕(Batang)** 이었다.
     바탕은 맥·아이폰에 없어서 웹에 못 쓴다 → 가장 가까운 웹폰트로 **고운바탕**을 쓴다
     (폭·세리프 처리가 바탕과 거의 같다. 나눔명조는 더 넓고 둥글어서 덜 맞았다).
     ⚠️ v9 때 L 이 "글씨도 별로" 라 한 게 이 글씨체였다. 그때는 작은 본문에 썼고
        지금은 크게·가운데정렬·동화책 판이라 읽히는 느낌이 다르다. 무르면 나눔명조가 차점.
     한글은 큰 글·작은 글 구분 없이 하나로 간다 — 책은 그렇게 짜여 있다 */
  --kr:'Gowun Batang',serif;
  --kr-big:'Gowun Batang',serif;
  --en:'EB Garamond',Georgia,serif;

  --pad:clamp(20px,4.6vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* 흰 바탕에서 잉크색 꺾쇠가 서게 하는 글로우. 검정판에선 반대로 뒤집힌다 */
  --glow:rgba(255,255,255,.95);

  /* 종이 결 */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ══ 다크 모드 — 바탕·글씨는 토큰으로, **그림은 L 이 그린 다크 원본으로 통째 교체** ══
   L 2026-08-16: "다크버전에서는 이미지를 이걸로 써야겠다 … 크기나 화질, 3D 전부 다 똑같이 이미지만 교체"

   ⛔ `filter:invert` 로 만들지 마라. 한 번 그렇게 했다가 반려당했다 —
      검은 잉크 덩어리가 커서 반전하면 **모자가 하얘지는 네거티브**가 된다.
      지금은 L 이 검은 바탕용으로 따로 그려 준 원본이 있다:
        assets/art/figure-dark.webp · assets/art/banner-dark.webp
      바꾸는 건 CSS 가 아니라 `js/view.js` 다 (`img[data-dark]` 의 src 를 갈아 끼운다).
      메인 인물은 WebGL 이라 `js/figure3d.js` 가 텍스처를 다시 받는다

   ⚠️ 라이트/다크 두 판은 **크기·화질·기울기가 전부 같아야 한다.** 잉크 영역이 3px 안쪽으로 일치하고
      (tools/figure.py 가 같은 방식으로 잰다) figure3d 는 텍스처의 실제 크기를 읽어 쓴다 */
:root[data-theme="dark"]{
  --paper:#000; --ink:#f7f5f0;
  --ash:rgba(247,245,240,.56);
  --faint:rgba(247,245,240,.32);
  --hair:rgba(247,245,240,.16);
  --glow:rgba(0,0,0,.92);
}
:root[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.05}  /* multiply 는 검정 위에서 안 보인다 */
:root[data-theme="dark"] .menu{box-shadow:none}                      /* 하드코딩된 검정 그림자 */
@media (pointer:fine){
  :root[data-theme="dark"] ::-webkit-scrollbar-track{background:#0a0a0a}
  :root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a3a3a;border-color:#0a0a0a}
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--kr);font-weight:400;
  line-height:1.78;letter-spacing:-.012em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--paper)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 종이 결 — 전체에 아주 얕게.
   ⚠️ multiply 라 **바탕을 어둡게 만든다.** 옛 아이보리(#f7f5f0)에 맞춰 .26 이었는데,
   순수 흰색으로 바꾸고 나니 화면이 250.6 으로 떠서 "완전 하얀" 이 아니게 됐다 (실측).
   .13 으로 낮춰 253 까지 올렸다 — 결은 남고 흰색으로 읽힌다.
   L 이 결도 싫다고 하면 이 줄의 opacity 를 0 으로 (요소는 남겨 둬라 · about.html 등에 마크업이 있다) */
.grain{position:fixed;inset:-40px;z-index:3;pointer-events:none;
  opacity:.13;mix-blend-mode:multiply;background-image:var(--grain);background-size:170px 170px}

/* ── 3D 캔버스 ───────────────────────────────────────── */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
/* WebGL 이 뜨기 전/못 뜰 때 보여줄 납작한 판. gl-on 이 붙으면 사라진다 */
.flat{position:fixed;inset:0;z-index:0;display:grid;place-items:end center;pointer-events:none}
.flat img{height:88%;width:auto;object-fit:contain;opacity:.96}
html.gl-on .flat{display:none}

/* ── 활자 ───────────────────────────────────────────── */
/* 로고 = RabbitHole(스크립트) + 그 아래 PRODUCTION
   L: "레빗홀이라고 적어야 될 것 같아요. 아래 프로덕션 이렇게"
   PRODUCTION 은 글자를 하나씩 떼서 flex 로 양끝맞춤한다. 자간을 눈대중으로 맞추면
   로고 폭과 미세하게 어긋나는데, space-between 은 어떤 폭에서도 정확히 맞는다 */
.logo{display:block;width:clamp(104px,11vw,164px);color:var(--ink)}
.mark{display:block;width:100%;color:inherit}
.mark svg{width:100%;height:auto}
.prod{display:flex;justify-content:space-between;width:100%;margin-top:.42em;
  font-family:var(--en);font-size:clamp(7.4px,.78vw,10px);font-weight:400;
  line-height:1;color:var(--ash)}
.prod i{font-style:normal}

.lbl{font-family:var(--en);font-size:11px;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--faint)}
.h1{font-family:var(--kr-big);font-weight:400;font-size:clamp(27px,4.4vw,54px);line-height:1.42;letter-spacing:-.035em}
.h2{font-family:var(--kr-big);font-weight:400;font-size:clamp(21px,2.9vw,38px);line-height:1.5;letter-spacing:-.032em}
.lead{font-size:clamp(15px,1.32vw,18.5px);line-height:1.92;color:var(--ash);max-width:60ch}
.tiny{font-family:var(--en);font-size:11.5px;letter-spacing:.16em;color:var(--faint)}
.script{width:clamp(150px,20vw,290px);color:var(--ink);opacity:.9}

/* ── 상단 바 ──────────────────────────────────────────
   ⚠️ 빈 자리는 클릭을 통과시켜야 한다 (2026-08-15 실측 버그).
   이 띠는 화면 폭 전체에 깔리고 높이가 112px 이나 되는데 z-index 가 메뉴판보다 위다.
   그래서 메뉴판 첫 줄 'Who are we?'(89~135px)가 **띠에 가려 눌리지 않았다.**
   보이는 건 로고와 버튼뿐이니, 그 둘만 클릭을 받게 한다 */
.bar{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:clamp(15px,2.2vw,26px) var(--pad);pointer-events:none}
.bar>*{pointer-events:auto}

/* 오른쪽 묶음 = Dark/Light · Menu (L 2026-08-16)
   ⛔ 여기에 "모바일로 보기 / PC로 보기" 버튼을 다시 만들지 마라 — 한 번 만들었다가 뺐다.
      사이트가 이미 반응형이라 폰으로 열면 폰 화면이 그대로 나온다. 큰 모니터에 폰 액자를 띄우는 건
      제작자용 도구지 손님이 볼 화면이 아니다 (L: "PC에서 핸드폰 누른다고 저렇게 나오는 게 맞아? 좀 이상한데")
   ⚠️ 토글은 **더 작고 더 옅게** 두고 Menu 만 원래 무게를 지킨다.
      화면에 늘 보이는 건 여전히 로고와 Menu 라는 인상을 지키기 위해서다 */
.tools{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);pointer-events:auto}
.tgl{-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;padding:4px 0;
  font-family:var(--en);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);transition:color .3s}
.tgl:hover,.tgl[aria-pressed="true"]{color:var(--ink)}
.tgl[hidden]{display:none}

/* ── 메뉴판 ─────────────────────────────────────────
   L: "메뉴 오른쪽에 딱 뭐 하나 누르면 이런 것 다 뜨고 … 다 메뉴판 안으로"
   전체화면 오버레이 + 가운데정렬 링크는 가장 흔한 골격이라 안 쓴다.
   버튼 바로 아래에 인쇄된 카드 한 장이 놓이는 식으로 — 말 그대로 '메뉴판' */
.menub{
  -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;padding:4px 0;color:var(--ash);
  font-family:var(--en);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  transition:color .3s}
.menub:hover,.menub[aria-expanded="true"]{color:var(--ink)}
.mlines{display:grid;gap:4px;width:19px}
.mlines i{display:block;height:1px;background:currentColor;
  transition:transform .4s var(--ease)}
/* 열리면 두 줄이 겹쳐서 × 가 된다. gap 4px + 선 1px 이라 중심 간격이 5px →
   ±2.5px 로 정확히 포갠 뒤 45° 로 벌린다 */
.menub[aria-expanded="true"] .mlines i:first-child{transform:translateY(2.5px) rotate(45deg)}
.menub[aria-expanded="true"] .mlines i:last-child{transform:translateY(-2.5px) rotate(-45deg)}

.menu{
  position:fixed;z-index:39;
  top:calc(clamp(15px,2.2vw,26px) + 36px);right:var(--pad);
  width:min(84vw,290px);
  background:var(--paper);border:1px solid var(--hair);
  padding:clamp(18px,2.4vw,26px);
  display:grid;gap:clamp(14px,1.9vh,20px);
  box-shadow:0 1px 2px rgba(13,12,11,.05),0 18px 46px -14px rgba(13,12,11,.28);
  transform-origin:100% 0;
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s}
.menu[aria-hidden="true"]{opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-7px) scale(.985)}
.menu[aria-hidden="false"]{opacity:1;visibility:visible;transform:none}

.menu{text-align:center}          /* L: "가운데 정렬하고 싶어 모든 글씨" */
.menu nav{display:grid;gap:2px;justify-items:center}
.menu nav a{position:relative;display:block;padding:5px 0;width:fit-content;
  font-family:var(--en);font-size:20px;letter-spacing:.02em;
  color:var(--ink);transition:opacity .25s}
.menu nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .4s var(--ease)}
.menu nav a:hover::after,.menu nav a[aria-current]::after{transform:scaleX(1)}

.menu .mc{display:grid;gap:1px;justify-items:center;
  border-top:1px solid var(--hair);padding-top:clamp(13px,1.7vh,18px)}
.menu .mc .k{font-family:var(--en);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px}
.menu .mc a{font-family:var(--en);font-size:13px;letter-spacing:.06em;color:var(--ash);
  padding:3px 0;position:relative;width:fit-content;transition:color .25s}
.menu .mc a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s var(--ease)}
.menu .mc a:hover{color:var(--ink)}
.menu .mc a:hover::after{transform:scaleX(1)}

/* 열렸을 때 바깥을 눌러 닫는 판. 어둡게 덮지 않는다 — 그림이 계속 보여야 한다 */
.mscrim{position:fixed;inset:0;z-index:38;background:transparent}
.mscrim[aria-hidden="true"]{visibility:hidden;pointer-events:none}

/* ── 등장 ──────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}.d4{transition-delay:.4s}

/* ── 연락 ──────────────────────────────────────────── */
.contact{display:flex;flex-wrap:wrap;gap:2px clamp(16px,2.4vw,34px);align-items:baseline;
  font-family:var(--en);font-size:13px;letter-spacing:.1em}
.contact a{color:var(--ash);padding:4px 0;transition:color .25s;position:relative}
.contact a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.contact a:hover{color:var(--ink)}
.contact a:hover::after{transform:scaleX(1)}

@media (pointer:fine){
  /* 바탕이 순수 흰색이 되면서 스크롤바도 같이 밝혔다 (옛 값은 아이보리 #eeeae2 였다) */
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:#f2f2f2}
  ::-webkit-scrollbar-thumb{background:#cfcfcf;border:3px solid #f2f2f2;border-radius:10px}
  ::-webkit-scrollbar-thumb:hover{background:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ── SVG 워드마크 = CSS 마스크 ─────────────────────────
   <img> 로 넣으면 색을 못 바꾼다. 마스크로 얹어야 검정↔흰색을 자유롭게 뒤집는다 */
.mark{aspect-ratio:4187/1210;background:currentColor;
  -webkit-mask:url('../assets/type/rabbithole.svg') center/contain no-repeat;
          mask:url('../assets/type/rabbithole.svg') center/contain no-repeat}
.wl{display:block;aspect-ratio:7472/1415;background:currentColor;
  -webkit-mask:url('../assets/type/wonderland.svg') center left/contain no-repeat;
          mask:url('../assets/type/wonderland.svg') center left/contain no-repeat}
.title-flat{display:block;aspect-ratio:8119/728;background:currentColor;
  -webkit-mask:url('../assets/type/whoareyou.svg') center/contain no-repeat;
          mask:url('../assets/type/whoareyou.svg') center/contain no-repeat}