/* 첫 화면 시안 h1 "숲 속"(2026-10-16). 맥 잠금 화면 문법: 위 가운데 날짜 줄과 큰 시계, 아래 가운데 사용자 동그라미와 암호칸.
   시계 자리에 Thinket., 암호칸 자리에 질문칸. 글자는 흰 반투명 유리(맥 시계처럼 85% 남짓에 은은한 그림자).
   숲은 forest.js(three.js), 투칸 비행은 /shared/toucan.js. 글꼴은 라이브 Jost(OFL, /L/fonts/Jost-var.woff2, base.css 가 싣는다)와
   한글 Noto Sans KR(OFL). 새 글꼴은 들이지 않았다. */

.hero-v[data-hero="h1"] {
  height: max(600px, 100svh);
  min-height: 0;
  color: #fff;
  /* 숲이 그려지기 전과 WebGL 이 없을 때의 바탕: 같은 숲의 색(그늘 청록, 해 쪽 따뜻한 안개) */
  background:
    radial-gradient(60% 50% at 72% 46%, rgba(255, 222, 170, .55), rgba(255, 222, 170, 0) 70%),
    linear-gradient(180deg, #2c463f 0%, #5f8a80 52%, #33503f 78%, #22362c 100%);
}
html[data-theme="dark"] .hero-v[data-hero="h1"] {
  background:
    radial-gradient(60% 50% at 72% 46%, rgba(80, 120, 170, .35), rgba(80, 120, 170, 0) 70%),
    linear-gradient(180deg, #04080b 0%, #12222a 55%, #0b1512 100%);
}
.h1-gl { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; max-width: none; }
.h1-nogl .h1-gl { display: none; }

/* 아래쪽 옅은 어둠 막: 밝은 고사리 위에서도 이름 줄과 안내 줄이 또렷하게(잠금 화면 사진의 아래가 어두운 것과 같은 몫).
   휴대폰은 후처리를 끄므로 비네트도 여기서 함께 */
.h1-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(3, 14, 11, .42) 0%, rgba(3, 14, 11, .16) 20%, rgba(3, 14, 11, 0) 36%);
}

/* 실앱 창이 열리면(shared/app-window.js) 숲은 창 뒤 배경화면이 되어 조금 가라앉는다 */
.h1-dim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(4, 13, 10, .3); opacity: 0; transition: opacity .7s ease; }
.h1-open .h1-dim { opacity: 1; }

/* ── 장면 속 투칸: 빛줄기 속 그루터기 위. 역광이라 몸은 조금 어둡고, 해 쪽(오른쪽 위) 가장자리에 따뜻한 빛 테두리 ── */
.h1-toucan {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 180px; pointer-events: none;
  opacity: 0; transition: opacity .8s ease, filter .6s ease;
  filter: brightness(.84) saturate(1.04)
    drop-shadow(1.6px -1.8px 0 rgba(255, 224, 168, .92))
    drop-shadow(0 0 16px rgba(255, 204, 140, .34));
}
.h1-toucan.on { opacity: 1; }
/* 창틀에 앉은 투칸: 창 앞이라 역광 빛 테두리 대신 창 위에 드리운 그림자만 */
.h1-toucan.guide { z-index: 6; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .3)); }
.h1-night .h1-toucan.guide { filter: brightness(.92) drop-shadow(0 6px 9px rgba(0, 0, 0, .45)); }
.h1-night .h1-toucan {
  filter: brightness(.66) saturate(.85)
    drop-shadow(1.4px -1.6px 0 rgba(196, 214, 255, .8))
    drop-shadow(0 0 14px rgba(150, 180, 240, .26));
}
/* 한 숲: 투칸이 히어로 상자 밖(문서 맨 위 층)에서 화면 기준으로 앉고 난다(hero.js 10-19). 본문 판(z 1) 위, 머리글(z 50) 아래 */
.h1-toucan.tc-free { position: fixed; z-index: 3; }
.h1-toucan.tc-free.guide { z-index: 6; }
/* 밤(한 숲은 걷기의 밤, hero.js 가 tc-night 을 붙인다): 달빛 역광. 히어로 상자 밖으로 옮겨져 .h1-night 조상이 없을 때도 같게 */
.h1-toucan.tc-night:not(.guide) {
  filter: brightness(.66) saturate(.85)
    drop-shadow(1.4px -1.6px 0 rgba(196, 214, 255, .8))
    drop-shadow(0 0 14px rgba(150, 180, 240, .26));
}

/* ── 위 가운데: 날짜 자리와 시계 자리 ── */
.h1-clock {
  position: absolute; z-index: 3; left: 0; right: 0;
  top: calc(var(--nav-h) + clamp(10px, 3.6svh, 44px));
  margin: 0; padding: 0 16px; text-align: center; pointer-events: none;
}
.h1-date {
  margin: 0;
  font-size: clamp(17px, 1.55vw, 24px); font-weight: 600; letter-spacing: -.012em; line-height: 1.3;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 2px rgba(4, 20, 16, .18), 0 2px 18px rgba(4, 20, 16, .34);
}
.h1-time {
  margin: -.04em 0 0;
  font-family: "Jost", var(--font); font-weight: 300;
  font-size: clamp(110px, 15vw, 240px); line-height: 1; letter-spacing: -.035em;
  color: rgba(255, 255, 255, .86);
  filter: drop-shadow(0 1px 1px rgba(4, 20, 16, .12)) drop-shadow(0 4px 30px rgba(4, 20, 16, .3));
}
/* 유리 같은 흰 글자: 위는 더 밝고 아래로 조금 투명해진다 */
.h1-time span {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96) 12%, rgba(255, 255, 255, .78) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── 아래 가운데: 사용자 동그라미, 이름 자리, 유리 질문칸, 안내 한 줄 ── */
.h1-lock {
  position: absolute; z-index: 3; left: 0; right: 0;
  bottom: clamp(22px, 6svh, 70px);
  width: min(468px, calc(100% - 32px)); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
/* 유리의 흐림은 CSS backdrop-filter 가 아니라 숲의 마지막 패스가 같은 자리를 흐려서 낸다(hero.js syncGlass, 성능 때문).
   여기서는 우윳빛 막과 테두리만 얹는다. 후처리가 없는 판(.h1-flat)은 흐림 대신 짙은 반투명 유리 */
.h1-flat .h1-field { background: rgba(16, 34, 27, .46); }
.h1-flat .h1-field:focus-within { background: rgba(16, 34, 27, .58); }
.h1-name {
  margin: 0 0 14px;   /* 위의 투칸 동그라미를 뺀 자리(10-17 21:24 Y) */
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; text-align: center;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 2px rgba(4, 20, 16, .2), 0 1px 12px rgba(4, 20, 16, .32);
}
.h1-field {
  position: relative; display: flex; align-items: center;
  width: 100%; height: 52px; padding: 0 7px 0 22px; border-radius: 26px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32), 0 14px 44px rgba(2, 14, 10, .22);
  cursor: text;
  transition: background-color .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .h1-field:hover { background: rgba(255, 255, 255, .2); }
}
.h1-field:focus-within {
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 4px rgba(255, 255, 255, .12), 0 14px 44px rgba(2, 14, 10, .26);
}
.h1-field input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  color: #fff; caret-color: #fff; font: inherit; font-size: 16px;
}
/* 예시 질문: 입력칸 위에 겹친 글씨 층. 지금 질문이 위로 빠지며 옅어지고 다음 질문이 아래에서 올라온다 */
.h1-ph {
  position: absolute; left: 22px; right: 54px; top: 0; bottom: 0;
  overflow: hidden; pointer-events: none;
  color: rgba(255, 255, 255, .72); font-size: 16px;
  transition: opacity .15s ease;
}
.h1-ph span {
  position: absolute; left: 0; right: 0; top: 50%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: translateY(-50%);
  transition: transform .65s cubic-bezier(.2, .8, .2, 1), opacity .65s ease;
}
.h1-ph .ph-next { transform: translateY(30%); opacity: 0; }
.h1-ph.go .ph-cur { transform: translateY(-130%); opacity: 0; }
.h1-ph.go .ph-next { transform: translateY(-50%); opacity: 1; }
.h1-ph.snap span { transition: none; }
.h1-field.has-val .h1-ph { opacity: 0; }
.h1-go {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #183525; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.h1-go:hover { background: #fff; }
.h1-go:active { transform: scale(.94); }
.h1-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.h1-go svg { width: 18px; height: 18px; }
.h1-hint {
  margin: 12px 0 0;
  font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: center;
  color: rgba(255, 255, 255, .74);
  text-shadow: 0 1px 8px rgba(4, 20, 16, .36);
}

/* AI 고지(라이브 .ask-note 와 같은 자리, 안내 줄보다 한 단계 옅고 작게) */
.h1-note {
  margin: 6px 0 0;
  font-size: 11.5px; font-weight: 500; line-height: 1.45; text-align: center;
  color: rgba(255, 255, 255, .6);
  text-shadow: 0 1px 8px rgba(4, 20, 16, .36);
}
.h1-note span { display: inline-block; }

/* ── 휴대폰: 시계 글자는 화면 폭의 80%, 질문칸은 아래쪽 ── */
@media (max-width: 700px) {
  .h1-veil {
    background:
      linear-gradient(0deg, rgba(3, 14, 11, .42) 0%, rgba(3, 14, 11, .16) 20%, rgba(3, 14, 11, 0) 36%),
      radial-gradient(120% 90% at 50% 46%, rgba(0, 0, 0, 0) 52%, rgba(3, 14, 11, .38) 100%);
  }
  .h1-clock { top: calc(var(--nav-h) + 14px); }
  .h1-date { font-size: 15.5px; }
  .h1-time { font-size: calc(80vw / 2.76); }   /* Jost 300, 자간 -0.035em 에서 "Thinket." 폭 = 글자 크기의 2.76배(실측) */
  .h1-lock { bottom: max(48px, 6svh); }        /* 아래 구석의 시안 표지와 겹치지 않게 */
  .h1-name { margin: 0 0 12px; font-size: 14px; }
  .h1-field { height: 50px; padding-left: 18px; }
  .h1-ph { left: 18px; font-size: 15px; }
  .h1-field input { font-size: 16px; }   /* 16px 미만이면 iOS 가 확대한다 */
  /* 안내 문장('질문을 입력하고 버튼을 누르거나, 그냥 버튼을 눌러보세요')은 휴대폰에서 뺀다(10-20 Y 19:45 "텍스트가 너무 많다는 인식을 주고, 투칸을 가려서 문제야").
     아이폰 사파리는 숲과 투칸을 도구막대가 접힌 높이(100lvh)로, 글은 펼친 높이(100svh)로 놓아 투칸이 글 쪽으로 내려앉는다. 이 줄을 빼면 질문칸 묶음이
     아래로 내려가 투칸 발치와 글 사이가 36px 이상 벌어진다(375x629 ~ 430x739 실측). 질문칸의 예시 질문과 화살표 단추가 같은 안내를 맡는다. AI 고지는 그대로 */
  .h1-hint { display: none; }
}

/* ── 낮은 가로 화면(휴대폰 가로, 높이 520px 이하, 10-20): 첫 화면을 화면 높이에 맞춘다. 전에는 높이가 최소 600px 이라 질문칸이 화면 아래로 밀려
   첫 화면에 보이지 않았다(844x390 에서 질문칸 위 끝 461px). 시계 글자는 높이에 비례해 줄이고 질문칸은 아래에 붙인다 ── */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-v[data-hero="h1"] { height: 100svh; }
  .h1-clock { top: calc(var(--nav-h) + 6px); }
  .h1-date { font-size: 14px; }
  .h1-time { font-size: min(clamp(110px, 15vw, 240px), 25svh); }
  .h1-lock { bottom: 10px; }
  .h1-name { margin: 0 0 8px; font-size: 13.5px; }
  .h1-field { height: 46px; }
  .h1-hint { display: none; }
  .h1-note { margin-top: 6px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .h1-ph span { transition: none; }
  .h1-toucan { transition: none; }
}