/* 공통 리셋 + 스케치북 컴포넌트 (tokens.css 의존) */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;overflow-x:hidden;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict}
img,video{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* 앱 셸: 화면 높이에 고정하고 스크롤은 화면 안에서만 일어난다.
   (페이지가 통째로 스크롤되면 상단 HUD·하단 탭이 밀려 웹페이지처럼 보인다) */
/* [개정 2026-08-17 v4] 하단 안전영역: #nav 는 fixed 캡슐이라 bottom 오프셋으로 safe-area 를
   비켜 뜨고, 콘텐츠 쪽은 아래 #app:has(#nav) .screen 패딩 공식이 확보한다.
   네비가 없는 화면(온보딩·레슨)은 .screen 기본 패딩이 직접 확보한다(불변). */
#app{max-width:520px;margin:0 auto;height:100dvh;overflow:hidden;position:relative;
  display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 0}
.screen{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
  padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom))}
/* [개정 2026-08-17 v4] #nav 가 fixed 캡슐이 되어 flow 에서 빠졌다 (SPEC-DESIGN-V4 §2-1) —
   콘텐츠가 캡슐에 가리지 않게 하단 패딩 = inset + 캡슐 높이 + 숨 + safe-area.
   --nav-h 는 tokens.css C2 계약 — base.css #nav 변경 시 같은 커밋에서 갱신. */
#app:has(#nav) .screen{
  padding-bottom:calc(var(--nav-inset) + var(--nav-h) + var(--sp-3) + env(safe-area-inset-bottom))}

/* 스케치북 형태 */
.wobble{border-radius:var(--wobble)}
.tilt-l{transform:var(--tilt-l)} .tilt-r{transform:var(--tilt-r)}
.card{background:var(--card);border:1.5px solid var(--edge);border-radius:var(--wobble);
  box-shadow:var(--shadow-card);padding:var(--sp-4)}
.scrim{background:var(--scrim);border-radius:var(--wobble-lg);box-shadow:var(--shadow-card)}
.hand{font-family:var(--font-hand);font-weight:700}
.crayon-underline{position:relative;display:inline-block}
.crayon-underline::after{content:"";position:absolute;left:-3%;right:-3%;bottom:-4px;height:9px;
  background:var(--cray-yellow);opacity:.55;border-radius:6px 3px 8px 4px;transform:rotate(-.6deg);z-index:-1}

/* 버튼 */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap-min);
  padding:12px 22px;border-radius:var(--wobble);border:1.5px solid var(--edge);
  font-family:var(--font-hand);font-size:20px;font-weight:700;
  box-shadow:0 6px 20px rgba(58,52,46,.13);
  /* [개정 2026-08-17 v4] 뗄 때만 스프링 복귀 — 누를 땐 :active 가 .06s 로 즉각 (§2-4) */
  transition:transform var(--dur-quick) var(--spring), box-shadow var(--dur-quick) var(--spring)}
.btn:active{transform:translate(2px,3px);box-shadow:0 1px 0 rgba(58,52,46,.25);
  transition-duration:.06s}
.btn-primary{background:var(--cray-yellow)}
.btn-green{background:var(--cray-green);color:#fff}
.btn-ghost{background:var(--card);color:var(--sub);border-color:var(--line);box-shadow:none}
.btn[disabled]{opacity:.4;pointer-events:none}

/* 말풍선 */
.bubble{background:#fff;border:1.5px solid var(--edge);border-radius:6px 24px 22px 20px;
  padding:var(--sp-3) var(--sp-4);font-family:var(--font-hand);font-size:21px;line-height:1.55;
  box-shadow:0 6px 20px rgba(58,52,46,.13);position:relative}

/* 볼륨 슬라이더 (설정) — 크레용 트랙 위를 굴러가는 동그란 손잡이 */
.vol{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent}
.vol::-webkit-slider-runnable-track{height:10px;border-radius:999px;
  background:var(--line);border:1.5px solid var(--edge)}
.vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-10px;border-radius:50%;
  background:var(--cray-yellow);border:1.5px solid var(--edge);
  box-shadow:0 3px 10px rgba(58,52,46,.10)}
.vol:focus-visible::-webkit-slider-thumb{outline:3px solid var(--cray-blue);outline-offset:2px}
.vol-val{font-size:17px;color:var(--sub);min-width:46px;text-align:right;
  font-variant-numeric:tabular-nums}

/* 하단 네비게이션 — "크레용 글래스" 플로팅 캡슐 (SPEC-DESIGN-V4 §2-1, 2026-08-17 전면 개정)
   셀로판을 씌운 스케치북: 반투명·블러는 쓰되 잉크 테두리 2.5px + 오프셋 그림자 +
   비정형 라운드라는 크레용 문법은 유지한다. 마크업(navHTML)은 불변 — 순수 CSS 개정. */
#nav{position:fixed;z-index:20;
  left:max(var(--nav-inset), calc((100vw - 520px)/2 + var(--nav-inset)));
  right:max(var(--nav-inset), calc((100vw - 520px)/2 + var(--nav-inset)));
  bottom:calc(var(--nav-inset) + env(safe-area-inset-bottom));
  margin:0 auto;max-width:488px;                 /* 520 - 16*2 */
  display:flex;padding:8px 10px;
  border:1.5px solid var(--edge);
  border-radius:34px 38px 32px 36px / 36px 32px 38px 34px;   /* 살짝 비정형 */
  background:rgba(251,246,236,.68);               /* --paper 의 rgba */
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 6px 20px rgba(58,52,46,.13), 0 8px 24px rgba(90,70,40,.14);
  overflow:hidden;                                /* 블러가 라운드 밖으로 새지 않게 */
  transition:max-width var(--dur-move) var(--spring), padding var(--dur-move) var(--spring)}
/* 구형 WebView 폴백 — 블러 미지원이면 불투명도만 올린다 (갤럭시 저버전 대비) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #nav{background:rgba(251,246,236,.94)}
}
#nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:5px 0;border-radius:14px;opacity:.45;position:relative}
#nav button img{width:30px;height:30px;object-fit:contain;
  transition:width var(--dur-move) var(--spring), height var(--dur-move) var(--spring)}
#nav button span{font-family:var(--font-hand);font-size:13px;font-weight:700;
  transition:opacity .12s, font-size var(--dur-move) var(--spring)}
/* [신설 2026-08-19] 탭 배지 — 빨간 크레용 점 (notify.js 가 켜고 끈다, main.js navHTML .nv-dot) */
#nav button .nv-dot{position:absolute;top:3px;left:calc(50% + 9px);width:10px;height:10px;
  border-radius:52% 48% 50% 50% / 48% 52% 48% 52%;background:var(--cray-red);
  border:1.5px solid var(--card);box-shadow:0 1px 3px rgba(58,52,46,.25)}
#nav button .nv-dot[hidden]{display:none}
/* 활성 탭 = 노란 크레용 얼룩 (사각 배경 폐기 — §2-1) */
#nav button.on{opacity:1}
#nav button.on::before{content:"";position:absolute;inset:4px 6px;z-index:-1;
  background:var(--cray-yellow);opacity:.55;
  border-radius:42% 58% 46% 54% / 55% 45% 58% 42%;transform:rotate(-2deg)}
/* [신설 2026-08-17] 키보드 표시 중 네비 숨김 (SPEC-FEED-V3 §2-2, C1 — main.js 가 토글).
   캡슐이어도 통째 숨김 — kb-open 이 nav-mini 를 이긴다(display:none 이 우선). */
html.kb-open #nav{display:none}
/* 스크롤 미니 모드 (SPEC-DESIGN-V4 §2-2, C8 — main.js 스크롤 감지가 html.nav-mini 토글).
   FAB 페이드는 레인 F(feed.css) 소유 — 여기서는 캡슐 축소·라벨 숨김만. */
html.nav-mini #nav{max-width:272px;padding:6px 8px}
html.nav-mini #nav button span{opacity:0;font-size:0}      /* 라벨 숨김 — 아이콘만 */
html.nav-mini #nav button img{width:28px;height:28px}      /* 아이콘 축소 (자산 교체 없음, INV-1) */

/* [신설 2026-08-17 v4] 화면 전환 모션 (SPEC-DESIGN-V4 §2-4 — main.js route() 가
   .screen-in 부여). 떠오름(entrance)이지 튐이 아니므로 스프링이 아니라 ease-out 커브 —
   스프링(--spring)은 눌림 복귀·미니 모드 같은 "반동" 자리에만 쓴다(공통 원칙). */
@keyframes v4-screen-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* fill-mode 는 backwards — 'both' 는 종료 상태(opacity:1/transform:none)를 영구 고정해
   nav-mini/kb-open FAB 페이드(C8·C1)와 .tilt-l/.tilt-r, :active 변형을 덮어쓴다.
   backwards 는 stagger 지연 동안만 숨기고 끝나면 원래 캐스케이드로 돌려준다. */
.screen-in{animation:v4-screen-in var(--dur-move) cubic-bezier(.22,.9,.36,1) backwards}
/* 첫 진입 stagger — 화면 직계 자식 앞 4개가 60ms 간격으로 뒤따라 떠오른다 */
.screen-in > *{animation:v4-screen-in var(--dur-move) cubic-bezier(.22,.9,.36,1) backwards}
.screen-in > :nth-child(1){animation-delay:0ms}
.screen-in > :nth-child(2){animation-delay:60ms}
.screen-in > :nth-child(3){animation-delay:120ms}
.screen-in > :nth-child(4){animation-delay:180ms}
@media (prefers-reduced-motion:reduce){
  .screen-in,.screen-in > *{animation:none}
  #nav,#nav button span,#nav button img,.btn{transition:none}
}

/* 진행 점 (Day 트랙) */
.dots{display:flex;gap:10px;align-items:center}
.dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--edge);background:var(--card)}
.dot.done{background:var(--cray-green)}
.dot.now{background:var(--cray-yellow);transform:scale(1.25)}

/* 소셜 로그인 버튼 */
/* hidden 은 브라우저 기본 규칙(display:none)이 약해서 인라인 display 에 진다.
   flex 컨테이너에 hidden 을 걸어도 그대로 보이는 사고가 난다 — 여기서 못 박는다. */
[hidden]{display:none!important}

/* 소셜 버튼 — 상징은 왼쪽에 고정하고 글자는 버튼 가운데에 둔다.
   상징을 글자 옆에 붙이면 문구 길이(카카오/Google/Apple)에 따라 아이콘 위치가 들쭉날쭉해진다. */
.btn.sso{width:100%;font-size:18px;position:relative}
.btn.sso .sso-mark{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:19px;height:19px}
.btn.sso .sso-mark svg{display:block}

/* 인증 화면 */
.fld{width:100%;min-height:var(--tap-min);padding:12px 15px;background:var(--card);
  border:2.5px solid var(--line);border-radius:14px;font-family:inherit;font-size:16px;
  color:var(--ink);-webkit-appearance:none;appearance:none}
.fld:focus{outline:none;border-color:var(--cray-blue)}
select.fld{background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),
  linear-gradient(135deg,var(--sub) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.fld-label{display:block;font-size:12px;font-weight:700;color:var(--sub);margin-bottom:5px}
.auth-msg{font-size:13px;font-weight:700;line-height:1.6;text-align:center;
  padding:11px 14px;border-radius:12px}
.auth-msg.bad{background:#FADCD6;color:#8B3520}
.auth-msg.good{background:#DDF0D6;color:#2F6B29}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--sub);font-size:12px;font-weight:700}
.auth-or::before,.auth-or::after{content:"";flex:1;height:0;border-top:2px dashed var(--line)}
.lnk{font-size:13px;font-weight:700;color:var(--sub);text-decoration:underline;
  text-underline-offset:3px;padding:8px 4px}

/* 기분 신호 버튼 — 원탭, 크게, 누른 느낌이 확실하게 */
.mood-btn{width:100%;min-height:210px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;background:#FFE0E7;border:1.5px solid var(--edge);
  border-radius:var(--wobble-lg);box-shadow:0 7px 0 rgba(58,52,46,.3);
  transition:transform .07s,box-shadow .07s,background .12s}
.mood-btn img{width:108px;pointer-events:none}
.mood-btn span{font-size:26px;font-weight:700}
.mood-btn:active,.mood-btn.hit{transform:translateY(6px);box-shadow:0 1px 0 rgba(58,52,46,.3);
  background:var(--cray-pink)}
.mood-screen{gap:0}
@media (prefers-reduced-motion:reduce){ .mood-btn{transition:none} }

/* 개빡침 — 단계가 오를수록 버튼이 세진다 */
.mood-btn[data-lv="1"]{background:#FFD3DD}
.mood-btn[data-lv="2"]{background:var(--cray-pink)}
.mood-btn[data-lv="3"]{background:var(--cray-red);color:#fff}
.mood-btn.hit{animation:shake .3s}
@keyframes shake{
  0%,100%{transform:translateY(6px) rotate(0)}
  25%{transform:translateY(6px) rotate(-2.5deg)}
  75%{transform:translateY(6px) rotate(2.5deg)}
}
.rage-card{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:none}50%{transform:scale(1.014)}}
@media (prefers-reduced-motion:reduce){
  .mood-btn.hit,.rage-card{animation:none}
}

/* 오늘 모드 칩 */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:2.5px solid var(--line);background:var(--card);border-radius:999px;
  padding:8px 14px;font-weight:700;font-size:13px;line-height:1;transition:all .1s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--cray-pink);border-color:var(--ink);color:var(--ink)}
/* [신설 2026-08-16] 모드 14칩 수용 (§4-6) — 가로 스크롤 2단. mood.js 전용 변형 */
.chips-2row{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;
  justify-content:start;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.chips-2row .chip{white-space:nowrap}

/* ── 화면 헤더 (ui/screen-head.js) — 하위 화면 공용 [2026-08-25] ──────────
   뒤로가기는 모든 화면에서 같은 자리·같은 모양이어야 한다(대표 지적). */
.scr-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-3)}
.scr-head.sticky{position:sticky;top:0;z-index:5;background:var(--paper);
  padding-top:6px;margin-top:-6px}
.scr-back{flex:none;background:var(--card);border:1.5px solid var(--edge);
  border-radius:var(--radius-pill);min-height:38px;padding:0 14px;
  font:inherit;font-size:14px;font-weight:800;color:var(--sub);cursor:pointer;
  transition:transform var(--dur-quick) var(--spring)}
.scr-back:active{transform:scale(.95)}
.scr-title{flex:1;min-width:0;font-size:24px;font-weight:700}