/* ============================================================
   수훈 개인 디자인 시스템 — base.css  (v1.1, 2026-09-06 — --dim·--warm 대비 WCAG AA로 상향)
   무드: "고양이와 스프" — 숲속 오두막에서 스프 끓이는 저녁.
   저채도 자연색 · 둥근 형태 · 느린 앰비언트 · 재촉 없는 말투.
   적용 대상: lifeos 웹앱, 결혼 사이트, ~/life/문서 산출물 등
   수훈의 모든 개인 웹앱. SSOT는 이 파일 (~/life/디자인/base.css,
   Drive LIFE/디자인 — 자비스에도 10분 내 동기화됨).

   사용법
   - <body data-phase="morning|day|dusk|night"> 로 시간대 팔레트.
     서버 렌더면 시간 보고 직접 박고, 정적 페이지면 아래 한 줄:
     <script>document.body.dataset.phase=(h=>h<5?"night":h<11?"morning":h<17?"day":h<22?"dusk":"night")(new Date().getHours())</script>
   - 다크 모드(기기 설정)는 시간대보다 우선한다.
   - 폰트: Gowun Dodum(본문) + Quicksand(숫자·데이터). 페이지에서 로드:
     <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Quicksand:wght@500;600&display=swap" rel="stylesheet">

   말투 규칙 (코드만큼 중요)
   - 존댓말, 재촉 금지, 스트릭·압박 없음. 명령형 대신 초대형.
   - 빈 화면은 실패가 아니라 초대: "비어 있는 하루예요. 천천히 보내요."
   - 시간대 인사: 좋은 아침이에요 / 좋은 오후예요 / 좋은 저녁이에요 / 고요한 밤이에요.
   - 의성어·잔글씨 환영 (보글보글, 사뿐사뿐) — 단 화면당 한두 번.

   차트 규칙 (dataviz 검증 완료 팔레트)
   - 축은 하나만. 시리즈 2개 이상이면 범례, 마지막 점만 직접 라벨.
   - 선 2px 둥근 끝, 면은 --accent 그라디언트 페이드(0.18→0).
   - 카테고리 색은 --chart-1→4 순서 고정, 5개째부터는 "기타"로 접기.
   - good/bad/warn 은 상태 전용 — 시리즈 색으로 쓰지 않는다.
   ============================================================ */

/* ---------- 1. 토큰: 낮(기본) ---------- */
body {
  --bg: #EFEDE0;            /* 크림 리넨 */
  --card: #FBF9F0;
  --text: #43402F;
  --dim: #696657;            /* 잔글씨 — 모든 밝은 바탕에서 4.5:1 이상 */
  --accent: #6E7F4E;        /* 이끼 */
  --warm: #A0581E;          /* 스프 테라코타 (진하게 — 숫자·라벨 대비 4.5:1) */
  --good: #4C7A47;
  --bad: #A85B44;
  --chipbg: #6E7F4E1c;
  --warnbg: #F3E4C8;
  --warntext: #7A5A2E;
  --shadow: 0 2px 10px #43402F14;
  --chart-1: #67833C;       /* 이끼   — 검증: CVD·대비 통과 (2026-08-30) */
  --chart-2: #2F6FB2;       /* 호수   */
  --chart-3: #C7772A;       /* 스프   */
  --chart-4: #8E4463;       /* 산딸기 */
  --r-card: 18px;
  --r-pill: 999px;
  --font-body: "Gowun Dodum", "Apple SD Gothic Neo", sans-serif;
  --font-num: "Quicksand", "Apple SD Gothic Neo", sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);  /* 살짝 튀는 촉감 */
}

/* ---------- 1b. 시간대 팔레트 — 바닥색만 옮겨가고 정체성(accent)은 유지 ---------- */
body[data-phase="morning"] {          /* 살구빛 아침 */
  --bg: #F3EBDC; --card: #FDF8EE; --warnbg: #F6E7CB;
}
body[data-phase="dusk"] {             /* 호박빛 저녁 */
  --bg: #EDE3CD; --card: #FAF2E0; --shadow: 0 2px 10px #4A3D2414;
}
body[data-phase="night"] {            /* 밤 = 다크와 같은 세계 */
  --bg: #22241B; --card: #2E3024; --text: #E8E4D2; --dim: #ABA88F;
  --accent: #A8B583; --warm: #DFA262; --good: #93BB88; --bad: #D69477;
  --chipbg: #A8B58326; --warnbg: #3C3323; --warntext: #E8C795;
  --shadow: 0 2px 10px #00000040;
  --chart-1: #7E9C48; --chart-2: #4E86CC; --chart-3: #C77E36; --chart-4: #AF6089;
}

/* ---------- 1c. 다크 모드 — 기기 설정이 시간대보다 우선 ---------- */
@media (prefers-color-scheme: dark) {
  body, body[data-phase] {
    --bg: #22241B; --card: #2E3024; --text: #E8E4D2; --dim: #ABA88F;
    --accent: #A8B583; --warm: #DFA262; --good: #93BB88; --bad: #D69477;
    --chipbg: #A8B58326; --warnbg: #3C3323; --warntext: #E8C795;
    --shadow: 0 2px 10px #00000040;
    --chart-1: #7E9C48; --chart-2: #4E86CC; --chart-3: #C77E36; --chart-4: #AF6089;
  }
}

/* ---------- 2. 바탕 ---------- */
* { box-sizing: border-box }
body {
  font-family: var(--font-body);
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  transition: background .6s ease;   /* 시간대가 바뀌는 순간도 부드럽게 */
  color-scheme: light dark;
}

/* ---------- 3. 타이포 — 큰 숫자, 조용한 라벨 ---------- */
h1 { font-size: 22px; font-weight: 400; margin: 2px 0; letter-spacing: -.01em }
h2, .eyebrow {                       /* 섹션 눈썹: 작고 초록, 소리 낮춤 */
  font-size: 13px; font-weight: 400; color: var(--accent);
  margin: 22px 0 10px; letter-spacing: .02em;
}
.num { font-family: var(--font-num); font-weight: 600 }
.hero-num {                          /* 화면의 주인공 숫자 (체중 48px 등) */
  font-family: var(--font-num); font-size: 48px; font-weight: 600;
  margin: 10px 0 0; letter-spacing: -.02em;
}
.hero-num small { font-size: 16px; color: var(--dim); font-weight: 500 }
.meta { color: var(--dim); font-size: 13px; margin-top: 2px }
.dim { color: var(--dim) }
small, .fine { color: var(--dim); font-size: 12px; line-height: 1.45 }
a { color: var(--accent); text-decoration: none }

/* ---------- 4. 표면: 카드·칩·포커스·경고 ---------- */
ul.cards, ul.plain { list-style: none; margin: 0; padding: 0 }
.card, ul.cards > li {
  display: flex; align-items: baseline; gap: 2px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--card); border-radius: var(--r-card);
  font-size: 15px; box-shadow: var(--shadow);
}
.card small, ul.cards > li small { display: block; margin-top: 3px }
.chip {
  display: inline-block; background: var(--chipbg); border-radius: var(--r-pill);
  padding: 6px 14px; margin: 10px 6px 0 0; font-size: 13px;
}
.chip b { color: var(--warm); font-family: var(--font-num); font-weight: 600 }
.focus {                             /* 원씽 같은 '지금 이것 하나' 상자 */
  background: var(--chipbg); border-radius: var(--r-card);
  padding: 13px 15px; margin-top: 14px; font-size: 14px; line-height: 1.55;
}
.focus span { display: block; color: var(--accent); font-size: 12px; margin-bottom: 4px }
.warn {
  background: var(--warnbg); color: var(--warntext);
  padding: 12px 14px; border-radius: var(--r-card); font-size: 13px;
}

/* 카드 안 왼쪽 라벨(시각·번호·디데이) — 색으로 종류를 말한다 */
.tm  { color: var(--accent); font-family: var(--font-num); font-weight: 600; font-size: 13px; min-width: 46px; flex-shrink: 0 }
.lid { color: var(--warm);   font-family: var(--font-num); font-weight: 600; font-size: 12px; min-width: 30px; flex-shrink: 0 }
.due { color: var(--warm);   font-family: var(--font-num); font-weight: 600; font-size: 13px; min-width: 48px; flex-shrink: 0 }

/* ---------- 5. 빈 상태 — 빈 화면이 제일 다정해야 한다 ---------- */
.empty {
  text-align: center; color: var(--dim); font-size: 14px;
  padding: 36px 20px; line-height: 1.7;
}
.empty .face { display: block; font-size: 34px; margin-bottom: 8px; filter: saturate(.85) }
/* 예: <div class="empty"><span class="face">🍃</span>오늘은 루프가 조용하네요</div> */

/* ---------- 6. 촉감 — 누르는 맛 ---------- */
.press {                             /* 탭 가능한 모든 것에 */
  transition: transform .18s var(--spring), box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.press:active { transform: scale(.96) }

button.btn {
  font-family: inherit; font-size: 14px; border: none;
  background: var(--accent); color: var(--card);
  padding: 11px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow);
}
button.btn.quiet { background: var(--chipbg); color: var(--accent); box-shadow: none }

/* 만족스러운 체크박스 — <label class="check"><input type="checkbox"><i></i> 라벨글</label> */
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent }
.check input { position: absolute; opacity: 0; width: 0; height: 0 }
.check i {
  width: 25px; height: 25px; flex-shrink: 0; border-radius: 9px;
  border: 2px solid var(--dim); position: relative;
  transition: background .2s ease, border-color .2s ease;
}
.check i::after {                    /* 체크 표시: 그려지듯 나타남 */
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--card); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform .22s var(--spring) .05s;
}
.check input:checked + i { background: var(--accent); border-color: var(--accent); animation: pop .3s var(--spring) }
.check input:checked + i::after { transform: rotate(45deg) scale(1) }
.check input:checked ~ span { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--chipbg) }
.check input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px }
@keyframes pop { 0% { transform: scale(1) } 45% { transform: scale(1.22) } 100% { transform: scale(1) } }

/* ---------- 7. 앰비언트 — 살아있는 요소는 화면당 하나만 ---------- */
.bowl { position: relative; font-size: 30px; line-height: 1; filter: saturate(.85) }
.bowl i {
  position: absolute; left: 50%; bottom: 100%; width: 5px; height: 12px;
  border-radius: var(--r-pill); background: var(--dim); opacity: 0; filter: blur(2.5px);
}
.bowl i:nth-child(1) { margin-left: -6px; animation: steam 4.8s ease-in-out infinite }
.bowl i:nth-child(2) { margin-left: 2px; animation: steam 6.2s ease-in-out 1.4s infinite }
@keyframes steam {
  0% { transform: translateY(4px) scaleY(.7); opacity: 0 }
  35% { opacity: .5 }
  100% { transform: translateY(-14px) scaleY(1.3); opacity: 0 }
}
.drift { animation: drift 14s ease-in-out infinite }   /* 구름·잎사귀용 아주 느린 흔들림 */
@keyframes drift {
  0%, 100% { transform: translateX(0) translateY(0) }
  50% { transform: translateX(9px) translateY(-4px) }
}

/* ---------- 8. 등장 — 화면이 사뿐히 올라온다 ---------- */
.rise > * { animation: rise .45s ease both }
.rise > *:nth-child(2) { animation-delay: .05s }
.rise > *:nth-child(3) { animation-delay: .1s }
.rise > *:nth-child(4) { animation-delay: .15s }
.rise > *:nth-child(5) { animation-delay: .2s }
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ---------- 9. 여정 바 — 진행률에 압박 대신 산책의 감각 ---------- */
.path { position: relative; height: 10px; background: var(--chipbg); border-radius: var(--r-pill); margin: 18px 0 6px }
.trail { height: 100%; background: var(--accent); border-radius: var(--r-pill); opacity: .55 }
.paw { position: absolute; top: -9px; margin-left: -13px; font-size: 16px; filter: saturate(.85) }
.pathlab { display: flex; justify-content: space-between; color: var(--dim); font-size: 12px; font-family: var(--font-num) }
.pathlab span:nth-child(2) { font-family: var(--font-body); color: var(--accent) }

/* ---------- 10. 탭바 (폰 하단) ---------- */
nav.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; gap: 2px; background: var(--card);
  border-radius: var(--r-pill); padding: 5px; box-shadow: var(--shadow);
}
nav.tabbar button {
  background: none; border: none; color: var(--dim); font-size: 12px;
  font-family: inherit; padding: 8px 13px; border-radius: var(--r-pill);
  white-space: nowrap; transition: background .25s, color .25s;
}
nav.tabbar button span { display: block; font-size: 19px; margin-bottom: 1px; filter: saturate(.85) }
nav.tabbar button.on { color: var(--accent); background: var(--chipbg) }

/* ---------- 11. 상태 색 (상태 전용 — 시리즈 색 아님) ---------- */
.good { color: var(--good); font-size: 14px }
.bad { color: var(--bad); font-size: 14px }

/* ---------- 12. 움직임 줄이기 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
  .bowl i, .drift, .rise > *, .check input:checked + i { animation: none }
  .press, .check i, .check i::after { transition: none }
  body { transition: none }
}