/* ================================================================
   인생.닷컴 — 하얀 우주의 오성(五星)
   메뉴 없음 · 헤더/푸터 없음 · CTA 없음 · 잇는 선 없음
   별의 좌표·색·밝기는 app.js 가 매 프레임 계산한다.
   ================================================================ */

/* ---- 세 폰트의 unicode-range 합성 (CLAUDE.md 6) ---- */
@font-face {
  font-family: 'LifedotcomSans';
  src: url('/fonts/number_cipher.ttf') format('truetype');
  font-display: swap;
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: 'LifedotcomSans';
  src: url('/fonts/english.ttf') format('truetype');
  font-display: swap;
  unicode-range: U+0041-005A, U+0061-007A;
}
@font-face {
  font-family: 'LifedotcomSans';
  src: url('/fonts/korean.ttf') format('truetype');
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+3130-318F, U+1100-11FF, U+0020-002F, U+003A-0040;
}

/* ---- 팔레트 (CLAUDE.md 4.1) ---- */
:root {
  --paper:      #FAFAF7;  /* 백 — 미세하게 따뜻한 백지(우주) */
  --ink:        #1F1F1C;  /* 먹 — 이름 텍스트 */
  --ink-soft:   rgba(31, 31, 28, 0.55);
  --seal-solid: #9C4A3A;
  --seal-faint: rgba(150, 82, 68, 0.42);  /* 톤 다운된 바랜 인주 — 이름 앞 낙관 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
}

body {
  min-height: 100svh;
  overflow: hidden;
  font-family: 'LifedotcomSans', serif;
  letter-spacing: 0.12em;   /* 숨 쉬는 조판 (CLAUDE.md 4.2) */
  line-height: 1.8;
  word-break: keep-all;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---- 마당(우주) ---- */
.madang {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* 커서·손터치를 따라 흐르는 금빛 입자층 (app.js) */
.flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ---- 오성(五星) ---- */
.way {
  position: absolute;
  left: 50%;              /* 첫 프레임 전 임시 위치 — 이후 app.js 가 px 로 갱신 */
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  z-index: 3;             /* 금빛 입자층 위 */
  text-decoration: none;
  color: inherit;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 넉넉한 터치/포인터 히트 반경 */
.way::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 132px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
@media (max-width: 640px) {
  .way::after { width: 108px; height: 108px; }
}

/* 별 하나의 아주 느린 미세 호흡 (그룹 이동 위에 겹치는 개별 떨림) */
.breath {
  display: block;
  animation: breathe var(--dur, 12s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
@keyframes breathe {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(var(--bx, 3px), var(--by, -3px)); }
  100% { transform: translate(0, 0); }
}

/* 별점은 이제 캔버스(.flow)에 그린다 — DOM .mark 는 자리만 잡고 숨긴다.
   (.way 는 이름 라벨 + 투명 히트영역 역할만) */
.mark { display: none; }

/* 이름 — 별 아래에 절대배치 (레이아웃 흔들림 방지) */
.name {
  position: absolute;
  left: 50%;
  top: calc(50% + 1.2em);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(0.92rem, 2.5vw, 1.12rem);
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

/* 낙관(도장) — samyeonga 파비콘 실루엣을 비율 유지 축소 + 톤 다운된
   바랜 인주색으로. PNG 의 알파를 마스크로 삼아 그 모양만 인주로 칠한다. */
.name::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  vertical-align: -0.12em;
  background-color: var(--seal-faint);
  -webkit-mask: url('/samyeonga.png') center / contain no-repeat;
  mask: url('/samyeonga.png') center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* 발견(dwell / tap / focus) — 이름과 낙관이 스며 나온다 */
.way.revealed .name,
.way.revealed .name::before,
.way:focus-visible .name,
.way:focus-visible .name::before { opacity: 1; }

/* ---- PWA 설치 팝업 — 가레산스이 & 이케바나 風 (CLAUDE.md 7.2) ---- */
#pwa-install {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.7em 1.05em;
  border: 1px solid rgba(31, 31, 28, 0.06);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: 'LifedotcomSans', serif;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  animation: pwa-in 1.6s ease both;
}
#pwa-install[hidden] { display: none; }
#pwa-install.dismiss      { opacity: 0; transition: opacity 0.55s ease; }
#pwa-install.dismiss--now { opacity: 0; transition: opacity 0.12s ease; }
#pwa-symbol {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}
#pwa-echo { font-size: 0.82rem; opacity: 0.7; }
@keyframes pwa-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 모션 최소화 선호 ---- */
@media (prefers-reduced-motion: reduce) {
  .breath      { animation: none !important; }
  #pwa-install { animation: none; }
  /* app.js 도 reduce 를 읽어 패턴 이동·입자 흐름을 멈춘다 */
}