/* ==========================================================================
   Apple Baby — app.css
   모바일 웹뷰(iOS/Android) 기준. 이 파일 하나만 링크하면 됩니다.
   값은 전부 아래 토큰에서 나옵니다. 하드코딩된 hex를 새로 만들지 마세요.
   ========================================================================== */

:root {
  /* --- 색: 6개만 씁니다 ------------------------------------------------ */
  --paper:      #fbf7f0;   /* 화면 바탕 (따뜻한 종이색) */
  --surface:    #ffffff;   /* 카드/시트 */
  --surface-2:  #fdfaf5;   /* 카드 안 보조 영역 */
  --ink:        #2a2724;   /* 본문 */
  --gold:       #f5b72c;   /* 브랜드 노랑 — 선·게이지·작은 마크에만 */
  --gold-ink:   #7d5411;   /* 노랑 계열 "글자"는 항상 이 색 (대비 확보) */
  --gold-line:  #e1ad66;   /* 노랑 테두리 */

  /* 상태색 (신호등) */
  --ok:    #3f6a46;
  --warn:  #7d5411;
  --avoid: #8f4232;

  /* 잉크 파생값 — 투명도 직접 쓰지 말고 이 변수를 쓰세요 (대비 4.5:1 이상) */
  --ink-2:   rgba(42, 39, 36, .78);  /* 보조 본문 */
  --ink-3:   rgba(42, 39, 36, .68);  /* 라벨·비활성 탭 */
  --ink-4:   rgba(42, 39, 36, .62);  /* 플레이스홀더 (최소선) */
  --line:    rgba(42, 39, 36, .14);  /* 테두리 */
  --line-2:  rgba(42, 39, 36, .09);  /* 구분선 */

  /* --- 타입 ------------------------------------------------------------ */
  --font-ui: "Gowun Dodum", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-num: "Cormorant Garamond", Georgia, serif;   /* 숫자·브랜드 표기 */

  /* --- 간격 / 라운드 / 그림자 ------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;

  --tap: 48px;                                  /* 최소 터치 타겟 */
  --shadow-float: 0 6px 20px rgba(42, 39, 36, .13);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --nav-h: calc(62px + env(safe-area-inset-bottom, 0px));   /* 하단 탭 총 높이 */
}

/* --- 어두운 화면 -----------------------------------------------------------
   README 의 방식대로 토큰만 덮어쓴다. 컴포넌트 규칙은 손대지 않는다.
   폰 설정을 따르는 상태(스탬프 없음)와 사용자가 직접 고른 상태 양쪽을 모두 덮는다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #17140f;
    --surface:   #201b14;
    --surface-2: #262019;
    --ink:       #f3ebdc;
    --gold-ink:  #e8bf72;   /* 어두운 바탕에서는 밝은 쪽이 대비가 난다 */
    --gold-line: #5c4520;
    --ok:    #6fbf87;
    --warn:  #e8bf72;
    --avoid: #e28b76;
    --ink-2:  rgba(243, 235, 220, .80);
    --ink-3:  rgba(243, 235, 220, .70);
    --ink-4:  rgba(243, 235, 220, .64);
    --line:   rgba(243, 235, 220, .16);
    --line-2: rgba(243, 235, 220, .10);
    --shadow-float: 0 6px 20px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --paper:     #17140f;
  --surface:   #201b14;
  --surface-2: #262019;
  --ink:       #f3ebdc;
  --gold-ink:  #e8bf72;
  --gold-line: #5c4520;
  --ok:    #6fbf87;
  --warn:  #e8bf72;
  --avoid: #e28b76;
  --ink-2:  rgba(243, 235, 220, .80);
  --ink-3:  rgba(243, 235, 220, .70);
  --ink-4:  rgba(243, 235, 220, .64);
  --line:   rgba(243, 235, 220, .16);
  --line-2: rgba(243, 235, 220, .10);
  --shadow-float: 0 6px 20px rgba(0, 0, 0, .45);
}

/* --- 리셋 / 웹뷰 기본기 --------------------------------------------------- */
* { box-sizing: border-box; }

/* 화면 이동 사이의 흰 깜빡임 방지.
   CSS 가 적용되기 전 첫 페인트는 브라우저 기본 캔버스(흰색)로 그려진다.
   html 에 바탕색을 직접 주고 color-scheme 을 알려주면 그 순간부터 우리 색이 된다. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { color-scheme: dark; }
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.7 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;               /* 웹뷰 바운스 억제 */
  padding-bottom: var(--nav-h);                 /* 하단 탭에 콘텐츠가 가리지 않게 */
}

a { color: var(--gold-ink); text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

/* 기본 회색 탭 하이라이트 대신 우리가 만든 눌림 상태를 씁니다 */
a, button, .tap { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tap:active, button:active, a:active { opacity: .72; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

::selection { background: rgba(245, 183, 44, .35); }

/* hidden 속성은 어떤 display 규칙보다 세게 이겨야 한다.
   .btn 처럼 display 를 지정한 클래스에 hidden 을 걸면 그냥은 안 숨는다. */
[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }

/* 아이콘은 Lucide SVG. currentColor를 물려받게 씁니다. */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.icon-sm { width: 17px; height: 17px; }

/* --- 레이아웃 ------------------------------------------------------------ */
.page { padding: var(--s-5) var(--s-5) var(--s-8); display: flex; flex-direction: column; gap: var(--s-5); }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row-between { display: flex; align-items: baseline; justify-content: space-between; }
.spacer { flex: 1; }

.label {
  font-size: 11px; line-height: 1; letter-spacing: .14em;
  color: var(--ink-3);
}
.section-title { font-size: 15px; line-height: 1; }
.muted { color: var(--ink-3); }
/* Cormorant Garamond 의 기본 숫자는 옛날식이라 3·4·5·7·9 가 기준선 아래로 내려간다.
   'W' 나 'D-' 처럼 대문자와 붙여 쓰면 숫자만 처진 것처럼 보여서 라이닝 숫자로 맞춘다.
   큰 주수 표시(.weeks__big/__mid)는 숫자만 있어 옛날식 그대로 둔다. */
.num { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; }

/* --- 헤더 ---------------------------------------------------------------- */
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s-2);
  padding: calc(var(--safe-t) + 12px) var(--s-5) 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
}
.app-header__brand { font-family: var(--font-num); font-size: 17px; letter-spacing: .02em; }
.app-header__brand em { font-style: normal; color: var(--gold-ink); }
.app-header__mark {
  width: 28px; height: 28px;          /* 사과 모양 그대로 — 테두리 원 없음 */
  object-fit: contain;
}
.icon-btn {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--ink-3); border-radius: var(--r-sm);
}
.icon-btn:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }

/* --- 카드 ---------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;                 /* 안쪽 구획이 라운드를 따라가게 */
}
.card__body { padding: 18px; }
.card__foot {                        /* 카드 안 보조 구획 (예: 이번 주 아기) */
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
  padding: var(--s-4) 18px;
  display: flex; gap: var(--s-4); align-items: flex-start;
}

/* --- 주차 진행 (구 노란 배너) --------------------------------------------- */
.progress-head { display: flex; align-items: baseline; justify-content: space-between; }
.progress-head .dday { font-family: var(--font-num); font-size: 12px; letter-spacing: .06em; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }

.weeks { display: flex; align-items: baseline; gap: 6px; margin-top: var(--s-2); }
.weeks__big { font-family: var(--font-num); font-size: 52px; line-height: .9; font-variant-numeric: tabular-nums; }
.weeks__mid { font-family: var(--font-num); font-size: 34px; line-height: .9; margin-left: 4px; font-variant-numeric: tabular-nums; }
.weeks__unit { font-size: 15px; color: var(--ink-2); }
.weeks__meta { margin-left: auto; text-align: right; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

.gauge { margin-top: var(--s-4); height: 3px; border-radius: 2px; background: var(--line-2); position: relative; }
.gauge__fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--gold); }
.gauge__scale { margin-top: 7px; display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* 이번 주 아기 썸네일 */
.baby__thumb { width: 56px; height: 56px; flex: none; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); object-fit: cover; }
.baby__title { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; font-size: 14px; }
.baby__fruit { color: var(--gold-ink); font-size: 13px; }
.baby__size { font-family: var(--font-num); font-size: 12px; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.baby__desc { margin: 7px 0 0; font-size: 13px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }

.link-more { display: inline-block; margin-top: var(--s-2); font-size: 12px; color: var(--gold-ink); border-bottom: 1px solid var(--gold-line); padding-bottom: 2px; }

/* --- 검색 ---------------------------------------------------------------- */
.search {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 14px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: var(--r-md);
  color: var(--ink-4);
}
.search .icon { color: var(--gold-ink); stroke-width: 1.7; }
.search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: none; outline: none;
  font-size: 16px;                  /* 16px 미만이면 iOS가 포커스 시 확대합니다 */
}
.search input::placeholder { color: var(--ink-4); }
.search:focus-within { border-color: var(--gold-line); }

/* 떠 있는 검색 바를 쓸 때 (1c 안) */
.search--float {
  position: fixed; left: var(--s-5); right: var(--s-5);
  bottom: calc(var(--nav-h) + var(--s-3)); z-index: 15;
  height: 54px; border-radius: var(--r-lg); box-shadow: var(--shadow-float);
}

/* --- 카테고리 그리드 ------------------------------------------------------ */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: var(--s-3); }
.cat {
  min-height: 74px; padding: var(--s-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 12.5px; color: var(--ink);
}
.cat .icon { color: var(--gold-ink); width: 19px; height: 19px; stroke-width: 1.4; }
.cat:hover { border-color: var(--gold-line); background: var(--surface-2); }

/* --- 칩 (최근 검색어) ----------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s-3); }
.chip {
  padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: var(--r-sm);
  background: none; font-size: 13px; line-height: 1; color: var(--ink-2);
}
.chip:hover { border-color: var(--gold-line); color: var(--gold-ink); }

/* --- 리스트 (검색 결과 / 최근 본 것) --------------------------------------- */
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.list__row {
  display: flex; gap: var(--s-3);
  min-height: var(--tap); padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap;                  /* 좁은 폰에서 옆칸이 아래로 내려가게 */
  /* 설명이 두세 줄인 줄이 많다. 가운데 정렬하면 점·배지가 글 중간에 떠서
     줄마다 위치가 달라 보인다. 항상 '제목 줄'에 맞춘다. */
  align-items: flex-start;
}
/* 제목 줄(14.5px × 1.7 ≈ 25px)의 한가운데로 내린다 */
.list__row > .dot { margin-top: 8px; }
.list__row > .list__verdict { margin-top: 2px; }
.list__row:last-child { border-bottom: 0; }
.list__row:active { background: var(--surface-2); }
/* 이름 칸이 반 이하로 쪼그라들면 두세 글자씩 줄바꿈된다. 그 전에 옆칸을 내려보낸다.
   기준 폭(flex-basis)은 반드시 50% 로 둔다. auto 로 두면 긴 문장의 natural width 가
   기준이 되어, 한 줄에 들어갈 수 있는데도 옆칸이 아래로 밀려난다. */
.list__name { font-size: 14.5px; flex: 1 1 50%; min-width: 0; }
.list__verdict { margin-left: auto; font-size: 12px; }

/* 신호등: 색 점 + 글자를 항상 함께 (색만으로 뜻을 전달하지 않기) */
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.is-ok    .dot { background: var(--ok); }    .is-ok    .list__verdict { color: var(--ok); }
.is-warn  .dot { background: var(--gold); }  .is-warn  .list__verdict { color: var(--warn); }
.is-avoid .dot { background: var(--avoid); } .is-avoid .list__verdict { color: var(--avoid); }

/* --- 버튼 ---------------------------------------------------------------- */
.btn {
  min-height: var(--tap); padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border-radius: var(--r-md); font-size: 15px; cursor: pointer;
  border: 1px solid var(--gold-line); background: none; color: var(--gold-ink);
}
.btn:hover { background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--solid:hover { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
.btn--block { display: flex; width: 100%; }

/* --- 하단 탭 -------------------------------------------------------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  /* 예전 바(style.css)는 backdrop-filter 가 있어 사파리가 늘 별도 레이어로
     합성했고, 그래서 <details> 가 많은 긴 화면에서도 다시 그려지지 않았다.
     will-change/translateZ 만으로는 부족해서 그 설정을 그대로 되살린다.
     배경은 92% 불투명이라 보이는 결과는 거의 같다. */
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
          backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  /* env() 를 var() 로 감싸면 iOS 가 안전영역을 뒤늦게 채우며 높이가 한 번 튄다.
     고정 바에는 env() 를 직접 쓴다. */
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.tabbar__item {
  min-height: var(--tap);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-size: 10.5px; color: var(--ink-3);
}
.tabbar__item .icon { color: var(--ink-3); }
.tabbar__item.is-active,
.tabbar__item.is-active .icon { color: var(--gold-ink); }

/* --- 접근성 --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}