/**
 * 펠로우 (pellow) — Soft Daylight Design System
 * 정본: pellow-design/design-guide/index.html · DESIGN_GUIDE.md
 * ⚠️ 색은 이 토큰만 사용(하드코딩 hex 금지). 아이별 액센트는 [data-pet]로 스킨.
 */
:root{
  /* 중립(고정) */
  --paper:#FCF8F1; --card:#FFFFFF; --cream:#FBF6EE; --cream-2:#F3EADD;
  --ink:#3D342C; --ink-2:#7A6E63; --ink-3:#AA9E90; --line:rgba(61,52,44,.10);
  --ico-chrome:#9A9184; --brand:#F4A65B; --brand-ink:#6B3D12; --tint:#FCEBD8; --churu:#F0994B;
  --pellow-primary:#F4A65B; /* dialog-login 등 공용 컴포넌트 액센트 = 브랜드 */
  /* elevation */
  --sh-1:0 4px 14px rgba(90,70,45,.10); --sh-2:0 14px 34px rgba(70,55,35,.20);
  --float:rgba(255,252,247,.92);
  /* safe-area (목업/iframe은 env=0 → 52px 확보로 노치 회피, 실기기는 env 존중) */
  --safe-top:max(env(safe-area-inset-top),52px); --safe-bot:max(env(safe-area-inset-bottom),20px);
  /* 타이포 */
  --disp:"Gowun Dodum",system-ui,sans-serif;
  --ui:"Pretendard","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  --r-card:22px;
  /* 기본 액센트(브랜드) — 특정 아이 스킨 전이면 apricot */
  --accent:#F4A65B; --accent-ink:#6B3D12;
}
/* 아이별 파스텔 액센트 스킨 (활성 아이의 무대/컨테이너에 data-pet) */
/* 파스텔 팔레트 키 (pe_pet.accentKey). 새 아이는 팔레트에서 순환 배정. */
[data-pet="apricot"]{ --accent:#F4A65B; --accent-ink:#6B3D12; --tint:#FCEBD8; }
[data-pet="mint"]{ --accent:#63C3B4; --accent-ink:#12463F; --tint:#DDF3EF; }
[data-pet="rose"]{ --accent:#F090AE; --accent-ink:#6B1F38; --tint:#FCE4EC; }
[data-pet="lavender"]{ --accent:#9B8CE0; --accent-ink:#3A2E6B; --tint:#EAE4FB; }
[data-pet="sky"]{ --accent:#5FB0E5; --accent-ink:#124463; --tint:#DDEEFB; }
[data-pet="butter"]{ --accent:#E9C15A; --accent-ink:#6B5512; --tint:#FBF3D8; }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; background:#000; overflow:hidden; }
/* 펠로우 SPA — 씬은 풀스크린, SCENE.switch가 활성 씬만 표시 */
.pellow-app, #scene-area{ position:fixed; inset:0; overflow:hidden; }
#scene-area > div[include-scene]{ position:absolute; inset:0; overflow:hidden; }
/* 씬 루트 = 프레임 채움 + flex column (전면 씬은 absolute 자식이라 무해, 스크롤 씬은 header+body 레이아웃 성립) */
#scene-area > div[include-scene] > *{ position:absolute; inset:0; display:flex; flex-direction:column; }
/* mount 래퍼 = 레이아웃 투명(display:contents) → 씬 CSS 가 '직접 자식' 기준으로 짜여도 성립.
   (mount 패턴이 끼운 래퍼가 flex 체인을 끊어 .body{flex:1} 스크롤이 죽는 문제 원천 차단) */
#scene-area [class$="-mount"]{ display:contents; }
body{
  font-family:var(--ui);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 장면 전환 디졸브 (햇살 톤). NSKit SCENE 전환에 사용. [프레임워크 승격 후보] */
.page-veil{ position:fixed; inset:0; z-index:9999; background:var(--paper); opacity:0; pointer-events:none; transition:opacity .34s ease; }
.page-veil.show{ opacity:1; pointer-events:auto; }

/* 터치 재미(delight) — 하트/발바닥 뿅뿅. [프레임워크 승격 후보] */
.pop{ position:absolute; z-index:36; pointer-events:none; will-change:transform,opacity; animation:pellow-pop 1.05s cubic-bezier(.22,1,.3,1) forwards; }
.pop iconify-icon{ font-size:34px; filter:drop-shadow(0 2px 7px rgba(0,0,0,.28)); }
@keyframes pellow-pop{
  0%{ transform:translate(-50%,-50%) scale(.3) rotate(0); opacity:0; }
  18%{ opacity:1; transform:translate(-50%,-64%) scale(1.18) rotate(var(--r0,0deg)); }
  100%{ transform:translate(calc(-50% + var(--dx,0)),-210%) scale(.8) rotate(var(--r1,0deg)); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .page-veil{ transition:none; }
  .pop{ display:none; }
}

/* ── 데스크톱/태블릿(넓은 뷰포트) = PC 버전 없음 → 앱을 중앙 폰 프레임(430px)으로 고정 ──
   §23 회피: transform 센터링 금지(fixed/absolute 자식 어긋남) → left:50% + margin-left 로 센터.
   .pellow-app(=#scene-area) 는 동일 엘리먼트. 씬/오버레이는 이 프레임 기준(absolute inset:0)이라 그대로 정렬. */
@media (min-width:500px){
  html,body{ background:radial-gradient(130% 100% at 50% -10%,#F7EEDF 0%,#ECE1D0 55%,#E4D8C4 100%); }
  .pellow-app, #scene-area{ left:50%; right:auto; width:430px; margin-left:-215px;
    box-shadow:0 24px 70px rgba(60,45,25,.30), 0 0 0 1px rgba(60,45,25,.06); }
  .page-veil{ left:50%; right:auto; width:430px; margin-left:-215px; }
}

/* ── PAGE(sub-page) 레이아웃 override — §11 필수 가드 (PAGE-ready 기본 탑재) ──
   .show{display:block!important} 유틸이 PAGE 컨테이너의 flex 를 깨 스크롤 불가 → 아래로 복원.
   펠로우는 현재 SCENE-only 지만, 향후 PAGE 사용 시 스크롤 깨짐을 원천 차단. [NSKit 2.0 W0 기본] */
.sub-page-container.show{ display:flex!important; }
.sub-page-content{ min-height:0; background:transparent; }
:root{ --nskit-page-header-height:64px; }