/* [Define404] */
/* Define404 동네 장면 (js/hero-town.js + js/hero-mount.js)
   캔버스 하나를 화면 뒤에 고정하고, 히어로와 밤 창에서만 보이게 한다.
   다른 구간은 종이색 바탕이 장면을 덮는다. */

html { background: var(--paper); }
html.has-town body.d404 { background: transparent; }

.hero-gl {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; max-width: none;
  z-index: 0; pointer-events: none; user-select: none;
  opacity: 0; transition: opacity var(--t-slow) var(--ease);
}
.hero-gl.is-on { opacity: 1; }

/* 장면 위에 올라오는 것들 */
main, .site-foot, .ticker { position: relative; z-index: 1; }
html.has-town .chapter { background: var(--paper); }
html.has-town .chapter-ink { background: var(--ink-1); }
html.has-town .hero { background: transparent; }
.hero > .hero-inner, .hero > .scroll-cue { position: relative; z-index: 1; }

/* 장면 위 글자: 아침 장면은 밝으므로 먹색 그대로. 바닥 글은 읽히도록 종이색 받침을 아주 얇게 둔다 */
/* 글이 읽히도록 하는 종이색 막은 렌더러 안에서 씌운다(town.setVeil). 선택한 건물만 막 밖으로 나온다 */
.hero.is-picking { cursor: pointer; }

/* 건물 이름표 */
.town-tip {
  position: fixed; left: 0; top: 0; z-index: 75; pointer-events: none;
  max-width: 280px; padding: 10px 12px; border: var(--bw) solid var(--ink-1); border-radius: var(--r-sm);
  background: var(--paper-raised); color: var(--ink-1);
  display: grid; gap: 4px; font-size: 13px; line-height: 1.45;
  opacity: 0; transition: opacity var(--t-quick) var(--ease);
}
.town-tip.is-on { opacity: 1; }
.town-tip-from { font-size: 11px; font-weight: 600; letter-spacing: var(--tr-label); color: var(--ink-3); }
.town-tip-q { font-weight: 650; }
.town-tip-state { justify-self: start; margin-top: 2px; padding: 1px 6px; font-size: 11px; font-weight: 700; border: var(--bw) dashed var(--line-2); color: var(--ink-3); font-style: italic; }
.town-tip.is-defined .town-tip-state { border-style: solid; border-color: var(--ink-1); background: var(--ink-1); color: var(--paper); font-style: normal; }

/* 밤 창: 마감 결산 직전, 비어 있는 화면 너머로 밤 동네가 보인다 */
.night-window { position: relative; z-index: 1; height: 120vh; display: flex; align-items: flex-end; }
.night-window .wrap { padding-bottom: var(--s8); }
.night-time { display: block; font-size: clamp(56px, 9vw, 140px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--paper); font-feature-settings: "tnum" 1; }
.night-note { display: block; margin-top: var(--s4); font-size: var(--fs-lead); font-weight: 600; color: var(--paper); max-width: 32ch; }
html:not(.has-town) .night-window { display: none; }

@media (max-width: 899px) {
  html.js .hero-foot { margin-top: var(--s7); }
  .night-window { height: 90vh; }
}

/* 장면이 주인공이므로 제목은 낮고 작게: 왼쪽 아래 비워 둔 광장 위에 놓는다 */
html.has-town .hero-title { font-size: clamp(34px, 4.6vw, 72px); max-width: 7.6em; }
html.has-town .hero-label { margin-bottom: var(--s4); }
html.has-town .hero-foot { margin-top: var(--s6); }

/* 첫 화면 글 받침 (김팀장 10-14): 막 대신 반투명 종이 상자 위에 글을 올린다. 동네는 막 없이 선명하게 둔다 */
html.has-town .hero-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s6); }
html.has-town .hero-copy {
  width: fit-content; max-width: 100%; padding: clamp(18px, 2vw, 28px);
  background: rgba(246, 244, 239, 0.35); border: var(--bw) solid rgba(17, 17, 17, 0.08); border-radius: var(--r-sm);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html.has-town .hero-copy .hero-lead { margin-top: var(--s5); }
html.has-town .hero-actions { display: grid; gap: var(--s3); justify-items: start; }
/* 표어는 받침 없이 색 반전(흰 글자). 밝은 장면 위에서도 읽히게 그림자만 옅게 둔다 */
html.has-town .hero-actions .tagline { color: #fff; text-shadow: 0 1px 2px rgba(17, 17, 17, 0.5), 0 2px 14px rgba(17, 17, 17, 0.45); }
html.has-town .hero-actions .tagline .d404-wordmark::after { background: #fff; }

@media (max-width: 720px) {
  html.has-town .hero-inner { gap: var(--s4); }
  html.has-town .hero-copy { padding: 18px 16px; }
  html.has-town .hero-actions { width: 100%; }
}
html.has-town .hero-actions .btn-ghost { background: rgba(246, 244, 239, 0.65); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* 제목은 작게: 받침 상자를 줄여 동네가 더 보이게 한다 (김팀장 10-14) */
html.has-town .hero-title { font-size: clamp(26px, 2.6vw, 40px); max-width: 14em; }
html.has-town .hero-copy .hero-lead { margin-top: var(--s4); }

/* 모바일 첫 화면 (김팀장 10-14): 글을 줄이고 받침 상자 대신 아래쪽만 종이색으로 덮는다. 위쪽 동네는 흐림 없이 그대로 보인다 */
@media (max-width: 720px) {
  html.has-town .hero::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 0; pointer-events: none;
    background: linear-gradient(to top, var(--paper) 0%, var(--paper) 52%, rgba(246, 244, 239, 0.85) 72%, rgba(246, 244, 239, 0) 100%);
  }
  html.has-town .hero-copy { padding: 0; background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* 문제 세 줄을 빼면 '이런 일을'이 가리킬 것이 없어지므로 설명 문단 전체를 뺀다. 제목만으로 뜻이 선다 */
  html.has-town .hero-label, html.has-town .hero-copy .hero-lead { display: none; }
  html.has-town .hero-actions .tagline { color: var(--ink-1); text-shadow: none; }
  html.has-town .hero-actions .tagline .d404-wordmark::after { background: var(--ink-1); }
  html.has-town .hero-actions .btn-ghost { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}