/* 새 메인 시안 (피그마 891:557, 3840×2160). 값은 피그마 px × var(--k) */
.hero-page { overflow: hidden; height: 100vh; }
/* 간격 규칙 (kuhlandhan.com 참고): 화면 네 귀퉁이 여백 하나(--edge)로 통일하고,
   이름 글자 윗선 · 소개 윗선 · 메뉴 캡슐 윗선을 한 줄(--edge)에 맞춤 */
.hero-page { --edge: max(16px, calc(48 * var(--k))); }
.hero-page .header {
  grid-template-columns: 1fr auto auto auto;
  column-gap: 10px;
  align-items: start;
  height: auto;
  padding: var(--edge) var(--edge) 0;
}
.hero-page .header::before { display: none; }
.hero-page .bgm { grid-column: 2; }          /* ♪ (bgm.js) — 메뉴 왼쪽 */
.hero-page .nav { grid-column: 3; }
.hero-page .lang { grid-column: 4; }

.stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  /* 렌더가 배경 투명(webp)이면 이 색이 그대로 배경. 실험: hero.html#bg=111 */
  background: var(--stage-bg, var(--page-bg));
  user-select: none;
}
/* 렌더는 화면을 꽉 채움 (cover). 드래그 중엔 잡는 손 커서 */
.stage__render {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.stage__render.is-dragging { cursor: grabbing; }
.stage__render--live { cursor: auto; }   /* hero3d: 드래그 없이 커서만 따라감 */

/* ---------- 메인 ICON 공 (balls.js, 10-31) ---------- 위치·회전은 JS 가 매 프레임 transform 으로 */
.pit { position: absolute; inset: 0; overflow: hidden; touch-action: none; -webkit-tap-highlight-color: transparent; }
/* 아이폰: "기울이기·흔들기 켜기" 안내 (balls.js). 허락 창은 화면을 누른 순간에만 뜰 수 있어서 누르라고 알려 줌.
   폰 글자 버튼처럼 글자만, 공이 다 떨어질 즈음 천천히 나타남 */
/* 11-01 2차 사용자: 쌓인 공 가운데(아래쪽)에 글라스 버튼으로 → 상단 메뉴 캡슐과 같은 유리 (공 위라 블러가 잘 보임) */
.pit__ask {
  position: absolute;
  left: 50%;
  top: 74%;                                  /* 공이 아래 절반에 쌓이니 그 가운데쯤 */
  z-index: 3;
  display: flex;
  align-items: center;
  height: 42px;
  margin: 0;
  padding: 0 20px;
  translate: -50% -50%;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: var(--track);
  white-space: nowrap;
  color: #333;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(235, 235, 235, 0.48));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 30px rgba(0, 0, 0, 0.12);
  animation: ask-in 1s 1.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition: opacity 0.6s;
}
.pit__ask.is-out { opacity: 0; }
@keyframes ask-in { from { opacity: 0; translate: -50% calc(-50% + 8px); } }

/* 메인 하단바: 폰에서만 (아래 폰 블록). 컴퓨터 메인은 한 화면 그대로 */
.main-page .foot--main { display: none; }   /* about.css(.foot = grid)보다 뒤에 와도 이기게 두 단계 */
.pit__ball {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;                     /* 커서·손가락은 .pit 이 받음 (10-31 3차: 눌러서 터뜨리기는 뺌) */
}

/* ---------- 룩 (블렌더 CinematicCompositor 대신) ----------
   강도는 여기 변수만 바꾸면 됨. 0 이면 끔 */
.stage {
  --glow: 0.6;            /* 밝은 부분이 번지는 빛 (할레이션/블룸) */
  --glow-blur: 22px;
  --vignette: 0.18;       /* 가장자리 어둡게 (밝은 배경이라 약하게) */
  --grain: 0.08;          /* 필름 그레인 */
}
.stage__glow, .stage__vignette, .stage__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* 렌더의 밝은 부분만 뽑아(hero.js) 흐리게 해서 화면에 더함 → 실루엣 바깥(투명 배경 위)까지 빛이 번짐 */
.stage__glow {
  filter: blur(var(--glow-blur));
  mix-blend-mode: screen;
  opacity: var(--glow);
}
.stage__vignette {
  background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 45%, rgb(0 0 0 / var(--vignette)) 100%);
}
.stage__grain {
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.6 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: var(--grain);
  animation: grain 0.6s steps(6) infinite;
}
@keyframes grain {   /* 필름처럼 알갱이가 매 프레임 바뀌어 보이게 무작위로 뜀 */
  0% { transform: translate(0, 0); }
  17% { transform: translate(-7%, 4%); }
  33% { transform: translate(5%, -6%); }
  50% { transform: translate(-3%, 8%); }
  67% { transform: translate(8%, 2%); }
  83% { transform: translate(-6%, -5%); }
}
@media (prefers-reduced-motion: reduce) { .stage__grain { animation: none; } }

.title, .more { position: absolute; z-index: 2; }
.title { pointer-events: none; }
a.title { pointer-events: auto; }   /* about·work 의 로고는 메인으로 가는 링크 */

/* 이름: 글자 윗선(H·b·h 꼭대기)이 --edge 에 오게. ABC Areal 은 글자 상자 위에 em 의 약 0.11 여백 */
.title {
  --fs: max(22px, calc(129 * var(--k)));   /* 폰에선 13px 까지 작아져서 최소 22px */
  left: calc(var(--edge) - var(--fs) * 0.06);
  top: calc(var(--edge) - var(--fs) * 0.065);
  color: var(--fg);
  font-size: var(--fs);
  font-weight: 500;          /* 로고만 Medium (디자인 원칙 2). 모든 페이지 공통 — about.css·work.css 에 따로 두지 말 것 */
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
/* IM 뱃지: ® 처럼 이름 끝 위에 바짝. SVG 라 작은 크기에서도 원·글자 중심이 픽셀 반올림으로 어긋나지 않음 */
.title__badge {
  position: absolute;
  left: calc(100% + 0.04em);
  top: 0.11em;
  width: 0.36em;
  height: 0.36em;
  overflow: visible;
}
.title__badge text {
  fill: currentColor;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
}


/* ---------- See More ---------- */
/* 피그마: 글자 + 오른쪽 화살표 캡슐(176×75, 짧은 화살표가 오른쪽 끝). 캡슐 너비·글자 밀림·진한 회색은 hero.js (메뉴와 같은 스프링) */
.more {
  right: var(--edge);
  bottom: var(--edge);
  height: calc(75 * var(--k));
  display: flex;
  align-items: center;
  gap: calc(32 * var(--k));
  color: var(--fg);
  font-size: var(--t-md);
  font-weight: 400;
  letter-spacing: var(--track);
}
.more__label { white-space: nowrap; will-change: transform; }
.more__pill {
  position: relative;
  flex: none;
  height: 100%;
  width: calc(176 * var(--k));
  border-radius: 999px;
  overflow: hidden;
  /* 메뉴 글라스와 같은 톤 */
  background: linear-gradient(180deg, rgba(205, 205, 205, 0.55), rgba(180, 180, 180, 0.42));
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
}
/* 진한 캡슐: 메뉴(.nav__blob)와 같은 색·블러 */
.more__blob {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(180deg, rgba(110, 110, 110, 0.55) 0%, rgba(80, 80, 80, 0.58) 55%, rgba(70, 70, 70, 0.5) 100%);
  filter: blur(5px);
}
.more__arrow {
  position: absolute;
  right: calc(23 * var(--k));
  top: 50%;
  width: calc(32 * var(--k));
  transform: translateY(-50%);
  color: var(--fg-ui);
  transition: color 0.45s ease;
}
.more.is-active .more__arrow { color: #fff; }

/* 언어 캡슐이 오른쪽 끝이라 목록은 오른쪽 기준으로 펼침 */
.hero-page .lang__menu { left: auto; right: 0; }

/* ---------- 폰 (11-01 다시 짬, kuhlandhan.com 모바일의 규칙만: 위 왼쪽 큰 로고 → 바로 아래 메뉴 한 줄, 여백 20px 하나) ----------
   예전(10-31)엔 메뉴를 화면 아래 가운데에 띄웠는데 사용자 "아래 메뉴 이상해" → 로고 아래 줄로.
   이름은 화면 폭의 약 85% (--fs-m), 메뉴 줄 = Work·About·Contact 캡슐(왼쪽) | 언어(오른쪽). 터치라 캡슐 36px.
   헤더는 고정 대신 페이지와 같이 스크롤 (로고도 그러니 둘이 붙어 다님). ♪ 는 폰에서 없음 (bgm.js 도 안 돎).
   본문 시작 = --page-top (about·work·상세가 다 이 값) */
@media (max-width: 760px) {
  .hero-page {
    --edge: 20px;
    --fs-m: min(48px, 12vw);
    --menu-top: calc(var(--edge) + var(--fs-m) * 0.95 + 16px);
    --page-top: calc(var(--menu-top) + 20px + 72px);
  }
  .title { --fs: var(--fs-m); }
  /* 메뉴 줄: 글자 버튼 (style.css「폰: 글자 버튼」) — Work About Contact 왼쪽, EN 오른쪽, 이름과 같은 왼쪽 선 */
  .hero-page .header {
    position: absolute;
    top: var(--menu-top);
    height: auto;
    padding: 0 var(--edge);
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
  }
  .hero-page .header > .nav { grid-column: 1; justify-self: start; }
  .hero-page .bgm { display: none; }
  .hero-page .lang { grid-column: 3; }
  .hero-page .lang__chev { width: 9px; height: 9px; }
  .hero-page .lang .nav__item { color: var(--fg-2); }   /* 언어는 메뉴보다 한 단계 흐리게 (사용자 11-01) */
  .more { display: none; }
  /* 메인: 공 화면(한 화면) 아래로 스크롤하면 하단바 (사용자 11-01). 세로로 쓸면 스크롤, 그 밖의 손가락 움직임은 공을 끌어당김 */
  .main-page { overflow: visible; height: auto; }
  .main-page .stage { height: 100svh; }
  .main-page .pit { touch-action: pan-y; }
  .main-page .foot--main { display: grid; font-weight: 400; }
}