/* ===================================================================
   momstory · 공유 디자인 토큰 & 목업 공통 컴포넌트
   근거: Docs/13_DESIGN_TOKENS.md §11 "따뜻한 손글씨 그림책"(2026-07-01)
        + Docs/07_SCREENS_FLOW.md + CLAUDE.md §6 화면 ID 맵
   ⚠️ 이 파일은 UI 목업 전용(정적 HTML/CSS). 실제 Flutter 토큰은 app_colors.dart.
   =================================================================== */

/* 손글씨 헤더 폰트(§3.1 Gowun Dodum). 온라인 시 로드, 오프라인은 시스템 폰트 폴백. */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

:root {
  /* --- 색상 (주간, §11) --- */
  --cream:        #FDEFE6;   /* 앱 배경 */
  --bg-top:       #FFF6EE;   /* 배경 그라데이션 상단 */
  --bg-bottom:    #FDEFE6;   /* 배경 그라데이션 하단 */
  --apricot:      #EE9E84;   /* 메인 코랄(강조·CTA·현재 탭) */
  --apricot-deep: #E08A6C;   /* 코랄 진하게(눌림) */
  --on-apricot:   #5A2A0E;   /* 살구 위 텍스트 */
  --sky:          #A9D2E6;   /* 2차 강조(하늘) */
  --ink:          #5A4A42;   /* 본문(따뜻한 브라운) */
  --ink-soft:     #9C8E82;   /* 보조 텍스트 */
  --divider:      #EFE4D9;   /* 카드 테두리·구분선 */
  --surface:      #FFFFFF;   /* 카드 배경 */

  /* --- 모드 파스텔 (§11 accent*) --- */
  --accent-play:   #FCE0C9;  /* ☀️ 낮/놀이 */
  --accent-sleep:  #DDE3F7;  /* 🌙 잠자리/수면 */
  --accent-move:   #D3EEDD;  /* 🚗 차량/움직임 */
  --accent-normal: #F8DCE0;  /* 평상시 */

  /* --- 상태 칩 --- */
  --state-done:  #7BC47F;    /* 합성 완료 */
  --state-ready: #C9A998;    /* 준비/대기 */
  --state-free:  #9DD9A8;    /* 무료 */
  --warn:        #D98E5F;    /* 검토 강조(빨강 금지, 살구톤) */
  --ok:          #7BC47F;

  /* --- 야간(잠자리) 모드 (§11 plum) --- */
  --night-bg:      #221C30;
  --night-surface: #2E2742;
  --night-text:    #EDE4F5;
  --night-accent:  #D99A86;

  /* --- 반경 (§11) --- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* --- 간격 (8px 기본) --- */
  --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px; --xl: 32px; --xxl: 48px;

  /* --- 그림자 (최소 사용) --- */
  --shadow-card: 0 2px 8px rgba(90,74,66,.06);
  --shadow-float: 0 6px 18px rgba(224,138,108,.28);

  --font: "Pretendard", -apple-system, "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  --font-display: "Gowun Dodum", "Cafe24 Ssurround", var(--font);  /* 헤더·책 제목(§3.1) */

  /* --- 타이포 사이즈 스케일 (§3.2) --- */
  --fs-display-l: 32px;  /* 온보딩 큰 헤드 */
  --fs-display-m: 28px;  /* 책 제목 */
  --fs-title-l:   22px;  /* 화면 제목 */
  --fs-title-m:   18px;  /* 카드 제목 */
  --fs-body-l:    16px;  /* 본문 */
  --fs-body-m:    14px;  /* 메타 */
  --fs-caption:   12px;  /* 보조 */
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: #E9E2DA;   /* 목업 페이지 바깥 배경(회색) */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

/* ===== 폰 프레임 390x844 ===== */
.phone {
  width: 390px;
  height: 844px;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  border-radius: 40px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 0 0 10px #14100E, 0 0 0 11px #2b2320;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone.night { background: linear-gradient(180deg, #262036, var(--night-bg)); color: var(--night-text); }

/* 상태바 */
.statusbar {
  height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; font-size: 13px; font-weight: 600; color: var(--ink);
}
.night .statusbar { color: var(--night-text); }
.statusbar .dot { letter-spacing: 2px; }

/* 노치 */
.notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 26px; background: #14100E; border-radius: 14px; z-index: 20;
}

/* 앱바 */
.appbar {
  flex: 0 0 auto; padding: 6px 20px 10px;
  display: flex; align-items: center; gap: 12px;
}
.appbar .title { font-size: var(--fs-title-l); font-weight: 700; font-family: var(--font-display); }
.appbar .back { font-size: 24px; color: var(--ink); cursor: default; width: 32px; height: 44px; display: grid; place-items: center; }
.night .appbar .back { color: var(--night-text); }
.appbar .spacer { flex: 1; }
.appbar .icon-btn {
  width: 44px; height: 44px; border-radius: var(--r-pill);   /* 터치 타겟 ≥44 */
  display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--divider); font-size: 18px;
}

/* 라운드 스트로크 아이콘(§6: 부모 UI는 이모지 절제, 둥근 손그림 아이콘) */
.svg-ic { width: 22px; height: 22px; display: block; }
.icon-btn .svg-ic { width: 20px; height: 20px; }
.tab .svg-ic { width: 24px; height: 24px; }
.tab.fab .svg-ic { width: 30px; height: 30px; }

/* 스크롤 영역 */
.screen {
  flex: 1; overflow-y: auto; padding: 4px 20px 20px;
}
.screen::-webkit-scrollbar { width: 0; }

/* ===== 공통 컴포넌트 ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  padding: var(--md);
  box-shadow: var(--shadow-card);
}
.night .card { background: var(--night-surface); border-color: #3a3350; }

.section-title { font-size: 16px; font-weight: 700; margin: 6px 2px 10px; }
.muted { color: var(--ink-soft); }
.night .muted { color: #b3a9c4; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--divider);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.chip.solid { background: var(--apricot); color: var(--on-apricot); border-color: transparent; }
.chip.free  { background: var(--state-free); color: #14361c; border-color: transparent; }
.chip.done  { background: var(--state-done); color: #14361c; border-color: transparent; }
.chip.ready { background: var(--state-ready); color: #3b2a20; border-color: transparent; }
.chip.warn  { background: #FBE6D5; color: var(--warn); border-color: transparent; }
.chip.sky   { background: var(--sky); color: #143843; border-color: transparent; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px; border-radius: var(--r-pill);
  background: var(--apricot); color: var(--on-apricot);
  font-size: 16px; font-weight: 700; border: none; cursor: default;
  box-shadow: var(--shadow-float);
}
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--divider); box-shadow: none; }
.btn.sky { background: var(--sky); color: #143843; box-shadow: none; }
.btn.sm { padding: 11px; font-size: 14px; }

/* 하단 탭바 (홈·서재·＋·월드·설정) */
.tabbar {
  flex: 0 0 76px;
  display: flex; align-items: flex-start; justify-content: space-around;
  padding: 10px 8px 0; background: var(--surface);
  border-top: 1px solid var(--divider);
  position: relative;
}
.night .tabbar { background: var(--night-surface); border-color: #3a3350; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; color: var(--ink-soft); width: 56px; }
.tab .ic { font-size: 22px; }
.tab.active { color: var(--apricot); font-weight: 700; }
.night .tab.active { color: var(--night-accent); }
.tab.fab {
  width: 58px; height: 58px; border-radius: var(--r-pill);
  background: var(--apricot); color: #fff; margin-top: -22px;
  justify-content: center; box-shadow: var(--shadow-float);
}
.tab.fab .ic { font-size: 30px; color: #fff; }

/* 진행바 */
.progress { height: 6px; border-radius: 999px; background: var(--divider); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--apricot); border-radius: 999px; }

/* 표지 플레이스홀더 (T-2: 앱이 기본 그림 제공 안 함 → 이모지/사용자 이미지) */
.cover {
  border-radius: var(--r-md); display: grid; place-items: center;
  font-size: 34px; background: var(--accent-play); color: #7a4a2a;
  border: 1px solid var(--divider);
}

/* 라벨(목업 좌상단 화면 ID) */
.mock-tag {
  position: absolute; top: 14px; left: 14px; z-index: 30;
  background: rgba(20,16,14,.72); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; letter-spacing: .3px;
}