/* 쏙쏙다이어트 브랜드 토큰 — ssoksok-web/app/globals.css 테마 C(살구와 자두) 운영 확정값.
   이 파일은 환자 화면(/)·원장 화면(/clinic/)·본점 화면(/admin/) 세 벌이 함께 읽는다.
   클래스를 지우거나 이름을 바꾸면 clinic/admin 이 같이 깨진다.

   대비 규칙(홈페이지와 동일 — 앱은 야외에서 폰으로 보므로 더 중요하다):
     --pt (#D9744A) 는 흰 배경 대비 3.2:1 이다. 큰 숫자와 그래픽 채움에만 쓴다.
     작은 글자·링크·포커스 링은 --pt-strong, 채운 버튼은 --btn + --btn-ink.
     --pt-strong 은 흰 배경 4.91:1, --bg 위 4.63:1 로 통과하지만
     --bg2(#FBEDE4) 위에서는 4.28:1 로 미달이다 — bg2 로 채운 칩·타일·머리판의
     작은 글자는 --ink 나 --body 를 쓴다. (머리판 그라디언트의 가장 진한 끝을
     --bg2 로 못 박아 둔 이유가 이것이다. 더 진하게 내려가면 --ink/--body 마저
     계산을 다시 해야 한다.)

   서체(2026-07-30 3차 → 자체 호스팅으로 전환):
     본문·UI = Pretendard Variable, 표시용 = Gowun Batang.
     **CDN 이 아니라 같은 오리진의 /fonts 에서 받는다** — 환자가 앱을 열 때마다
     jsDelivr·Google 로 요청이 나가던 것을 없앴다(public/fonts.css 주석 참고).
     @font-face 는 public/fonts.css 에 있고 환자 화면(index.html)만 그 파일을 읽는다 —
     원장(/clinic/)·본점(/admin/) 화면은 예전처럼 시스템 폰트로 떨어진다. 그 두 화면의
     디자인 차례가 오면 <link rel="stylesheet" href="/fonts.css"> 한 줄을 같이 넣으면 된다.

     Pretendard 서브셋은 KS X 1001 한글 2,350자를 담는다 — 환자가 입력하는 이름·메모를
     받아야 하므로 "화면에 있는 글자"로 줄이지 않았다. 반면 Gowun Batang 은 고정 UI
     문구의 글자만 있다(표시용). 그래서 **임의의 한글이 들어오는 자리에는 --serif 를
     쓰지 않는다** — .h1-name 주석 참고. */
:root {
  --bg: #FFF7F2;
  --bg2: #FBEDE4;
  --card: #FFFFFF;
  --ink: #4A2340;
  --body: #6B4A62;
  --pt: #D9744A;
  --pt2: #8E6182;
  --pt-strong: #B4552F;
  --btn: #B4552F;
  --btn-ink: #FFFFFF;
  --line: rgba(74, 35, 64, 0.13);
  --danger: #B3261E;
  /* 경고 카드의 아주 연한 면. 복약 가이드의 필수 주의사항 한 자리에만 쓴다 —
     이 톤이 흔해지면 정작 위험한 문장이 안 보인다. 브라우저 계산값 실측: 이 면 위에서
     --danger 는 5.83:1, --body 는 6.74:1 이라 17px/700 제목과 15px 본문 모두 통과한다. */
  --danger-tint: #FDEFEC;

  /* 추가 토큰 — 같은 살구·자두 가족 안에서만 늘렸다. */
  --plum: #F6EFF4;                          /* 자두 틴트: 진행 트랙·비활성 면 */
  --track: rgba(142, 97, 130, 0.18);        /* 얇은 진행선 트랙 */
  --apricot-soft: rgba(217, 116, 74, 0.14); /* 정(錠) 외곽선·그래프 면 */

  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ── 그림자: 한 겹이 아니라 두 겹 ───────────────────────────────────────
     블러 하나로만 만든 그림자가 카드를 납작하고 흔해 보이게 만든다.
     면이 바닥에 닿는 자리를 잡아주는 1px 접촉 그림자 + 넓게 퍼지는 확산 그림자를
     겹치고, 검정 대신 잉크색(74,35,64)으로 물들여 따뜻한 배경과 같은 계열로 둔다.
     확산 쪽은 음수 spread 로 조여서 아래로만 떨어지게 한다. */
  --shadow-soft: 0 1px 2px rgba(74, 35, 64, .045), 0 6px 16px -10px rgba(74, 35, 64, .10);
  --shadow: 0 1px 2px rgba(74, 35, 64, .05), 0 10px 26px -14px rgba(74, 35, 64, .13);
  --shadow-lift: 0 1px 2px rgba(74, 35, 64, .06), 0 3px 8px -3px rgba(74, 35, 64, .07),
                 0 22px 44px -20px rgba(74, 35, 64, .22);

  /* ── 서체 ──────────────────────────────────────────────────────────────
     Pretendard Variable 은 45~920 가변축이라 굵기 대비를 실제로 쓸 수 있다.
     CDN 이 막히면 시스템 한글 산세리프로 떨어질 뿐 레이아웃은 그대로 선다. */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  /* 표시용 명조. 화면에서 몇 군데(체중 숫자·화면 제목·남은 약·워드마크)에만 쓴다. */
  --serif: "Gowun Batang", "Nanum Myeongjo", "Batang", Georgia, "Times New Roman", serif;

  /* ── 타입 스케일 ────────────────────────────────────────────────────────
     12 / 13 / 15 / 17 / 20 / 26 / 34 / 56. 이 여덟 칸 밖의 font-size 를
     app.js·index.html 에 흘리지 않는다(그렇게 흘린 값들이 화면을 '무스타일'로
     보이게 했다). 아래 의미 토큰은 전부 이 여덟 칸을 가리킨다. */
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-15: .9375rem;
  --fs-17: 1.0625rem;
  --fs-20: 1.25rem;
  --fs-26: 1.625rem;
  --fs-34: 2.125rem;
  --fs-56: 3.5rem;

  --fs-display: var(--fs-56);   /* 오늘 체중 */
  --fs-num: var(--fs-34);       /* 남은 약 정수 */
  --fs-h1: var(--fs-26);        /* 화면 제목 */
  --fs-sec: var(--fs-20);       /* 섹션 제목(카드 밖) */
  --fs-body: var(--fs-17);      /* 본문 */
  --fs-meta: var(--fs-15);      /* 보조 설명 */
  --fs-label: var(--fs-13);     /* 줄 라벨 */
  --fs-eyebrow: var(--fs-12);   /* 눈썹 · 탭 라벨 */

  /* 굵기 — Pretendard 가변축을 실제로 쓴다. */
  --w-body: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-black: 800;

  /* 한글 지표. 라틴 기본값(1.4)으로 한글 본문을 짜면 답답하다 — 1.65 로 둔다.
     반대로 큰 한글 표시 글자는 자간을 음수로 조여야 벌어져 보이지 않는다. */
  --lh-body: 1.65;
  --lh-snug: 1.42;
  --lh-tight: 1.12;
  --tr-display: -.03em;   /* 34px 이상 */
  --tr-title: -.022em;    /* 20~26px */
  --tr-body: -.003em;
  --tr-label: .02em;      /* 작은 라벨은 살짝 양수로 벌린다 */
  --tr-eyebrow: .075em;

  --gap: .875rem;
  --pad: 1rem;            /* .wrap 좌우 여백 — 머리판이 이 값을 음수로 상쇄한다 */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { color: var(--ink); margin: 0 0 .5rem; line-height: var(--lh-snug); }
/* 화면 제목 = 표시용 명조. 탭마다 한 번씩만 나오는 자리라 여기에 쓰는 값이 크다. */
h1 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-title);
  line-height: var(--lh-tight);
}
/* 환자 이름이 들어가는 제목(「오늘」 탭의 인사말)은 명조를 쓰지 않는다.
   표시용 명조(Gowun Batang)는 고정 UI 문구의 글자만 담은 서브셋이라(scripts/build-fonts.py),
   서브셋에 없는 이름 글자는 시스템 명조로 떨어져 「홍길동」과 「님」이 서로 다른 서체로
   그려진다. 이름은 자유 입력이라 어떤 글자가 올지 알 수 없으므로, 이 자리만 본문 서체의
   가장 굵은 축(800)으로 세운다 — 크기·자간·행간은 h1 과 똑같다. */
.pagehead h1.h1-name {
  font-family: var(--font);
  font-weight: var(--w-black);
}
h2 { font-size: var(--fs-20); font-weight: var(--w-black); letter-spacing: var(--tr-title); }
h3 { font-size: var(--fs-17); font-weight: var(--w-bold); letter-spacing: var(--tr-title); }
a { color: var(--pt-strong); }
img { max-width: 100%; }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }

/* 열에 놓이거나 제자리에서 바뀌는 숫자는 전부 등폭으로 — 체중·정수·날짜·혈당이
   한 자리 바뀔 때 좌우로 흔들리지 않게 한다. */
.tnum, .num, .display, .kgchip, .wk-n, .input-lg, .tagpill, .big-num, .date,
.pbar-legend, .meter-note, .pills-left {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 면 ───────────────────────────────────────────────────────────────── */
/* 테두리 없는 흰 카드. 따뜻한 --bg 위에 놓이므로 경계는 배경 대비와
   두 겹 그림자가 만든다. 1px 테두리를 다시 넣지 말 것.
   .card 는 '보조' 층이다(납작하게). 화면의 주인공에는 .card-hero 를 얹는다. */
.card {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.125rem 1.25rem;
  margin-bottom: var(--gap);
}
/* 층위: 히어로(체중)만 확실히 떠 있고 나머지는 바닥에 가깝다.
   전부 같은 무게였던 게 "아무것도 앞장서지 않는" 화면의 원인이었다. */
.card-hero {
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius-lg);
  padding: 1.375rem 1.25rem 1.25rem;
}
/* 카드 전체가 버튼인 경우(기록 목록·피드백 목록). .card 가 배경·패딩·그림자를 주므로
   여기서는 버튼 기본 스타일만 지운다 — padding 을 건드리면 .card 와 싸운다. */
.card-link {
  display: block; width: 100%; text-align: left;
  font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer;
  border: 0; background: var(--card);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card-link:active { transform: translateY(1px); box-shadow: var(--shadow-soft); }

.wrap { max-width: 520px; margin: 0 auto; padding: var(--pad) var(--pad) 0; }

/* 화면에서는 감추되 키보드 포커스는 살려 둔다(식단 사진 입력). */
.vis-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── 글자 ─────────────────────────────────────────────────────────────── */
.num {
  font-family: var(--serif);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-display);
}
.display {
  margin: 0;                        /* <p> 기본 여백(1em = 56px)이 그대로 남으면 카드가 벌어진다 */
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: var(--w-bold);
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--pt);
}
/* 오늘 아직 안 잰 체중(최근 체중) — 브랜드색은 '오늘 기록됨'의 신호로만 남긴다. */
.display-dim { color: var(--ink); }
.display-unit {
  font-family: var(--font);
  font-size: var(--fs-17);
  font-weight: var(--w-semi);
  color: var(--body);
  letter-spacing: var(--tr-label);
  margin-left: .2rem;
}
/* 섹션 제목 — 카드 밖. 20px/800/조인 자간. 위아래 여백을 한 벌로 고정한다. */
.sec {
  font-size: var(--fs-sec);
  font-weight: var(--w-black);
  color: var(--ink);
  letter-spacing: var(--tr-title);
  line-height: var(--lh-snug);
  margin: 1.75rem .125rem .6875rem;
}
.sec:first-child { margin-top: .25rem; }
.eyebrow {
  color: var(--pt-strong);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-eyebrow);
  line-height: 1.3;
  margin: 0 0 .5rem;
}
.muted { color: var(--pt2); font-size: var(--fs-meta); font-weight: var(--w-medium); }
/* clinic/admin 이 쓰는 기존 이름 — 유지한다. */
.label {
  color: var(--pt-strong); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow); font-weight: var(--w-bold);
}
.big-num {
  color: var(--pt); font-family: var(--serif); font-size: var(--fs-34);
  font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--tr-display);
}
.strong-ink { color: var(--ink); font-weight: var(--w-bold); }
/* 카드 안 보조 문장 — 본문보다 한 칸 작고 한 칸 진하다. */
.note { color: var(--body); font-size: var(--fs-meta); font-weight: var(--w-body); margin: .75rem 0 0; }
.note-tight { margin: .5rem 0 0; }
.note-lead { margin: 0 0 .75rem; }
.note-wide { margin: 1rem 0 0; }
/* 체중 입력 묶음(라벨 + 큰 입력칸 + 저장) */
.kg-field { margin-top: 1.25rem; }
.kg-field .input-lg { margin-top: .375rem; }
.kg-field .btn { margin-top: .625rem; }
/* 기록 목록 한 줄 요약 · 피드백 본문 */
.daymeta { margin: .35rem 0 0; }
.comment-body {
  margin: .5rem 0 0; white-space: pre-wrap; color: var(--body);
  font-size: var(--fs-meta); line-height: var(--lh-body);
}
.go-link { margin: .75rem 0 0; }

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.btn {
  background: var(--btn); color: var(--btn-ink);
  border: 0; border-radius: var(--radius-pill);
  padding: .8rem 1.25rem;
  font-size: var(--fs-body); font-weight: var(--w-bold); font-family: inherit;
  letter-spacing: var(--tr-title);
  line-height: 1.2; cursor: pointer;
  min-height: 48px;
  box-shadow: 0 1px 2px rgba(74, 35, 64, .10), 0 8px 18px -10px rgba(180, 85, 47, .45);
  transition: transform .12s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px) scale(.995); box-shadow: 0 1px 2px rgba(74, 35, 64, .12); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.btn-ghost {
  background: var(--card); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(74, 35, 64, .04);
}
.btn-ghost:active { box-shadow: inset 0 0 0 1px var(--line); }
.btn-block { display: block; width: 100%; }
/* 로그아웃처럼 되돌리기 번거로운 동작. 채운 붉은 버튼은 이 화면에서 너무 세니
   글자만 danger 로 둔다(흰 면 위 6.54:1 — 실측). */
.btn-ghost.btn-warn { color: var(--danger); }
/* 좁은 flex 칸(입력칸 옆의 「저장」 등) 안에 놓이는 작은 버튼.
   ⚠ white-space: nowrap 이 이 클래스의 핵심이다. .btn 은 알약 반지름(999px) + 48px
   최소 높이라, 좁은 칸에서 라벨이 두 줄로 접히는 순간 폭보다 높이가 커져 **버튼이
   동그라미로 그려진다**(원장 화면의 「등록」이 실측 70×64 원이었다). 접히지 않게
   막는 것이 모양을 지키는 유일한 방법이다 — 반지름을 줄여서 가리지 않는다. */
.btn-sm {
  min-height: 44px; padding: .55rem 1rem; font-size: var(--fs-label);
  white-space: nowrap;
}

/* ── 입력 ─────────────────────────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="password"],
input[type="time"], input[type="date"], textarea, select {
  width: 100%; padding: .75rem .875rem;
  font-size: var(--fs-body); font-family: inherit; font-weight: var(--w-medium);
  letter-spacing: var(--tr-body);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
  min-height: 48px;
}
input::placeholder { color: var(--pt2); opacity: 1; font-weight: var(--w-body); }
/* ⚠ 반드시 `input.input-lg` 로 쓴다. `.input-lg`(0,1,0) 는 위의
   `input[type="number"]`(0,1,1) 에 밀려서 font-size 가 전혀 먹지 않았다
   — 그래서 이 큰 입력칸이 오랫동안 본문 크기로 그려지고 있었다.
   같은 이유로 아래 .meal-memo 도 `input.meal-memo` 로 쓴다. */
input.input-lg {
  font-size: var(--fs-26); font-weight: var(--w-bold);
  text-align: center; letter-spacing: var(--tr-title); min-height: 60px;
}
/* 힌트가 큰 굵은 글씨로 나오면 이미 입력된 값처럼 읽힌다. */
input.input-lg::placeholder { font-size: var(--fs-body); font-weight: var(--w-body); }
:focus-visible { outline: 2px solid var(--pt-strong); outline-offset: 2px; }

/* ── 화면 머리 ─────────────────────────────────────────────────────────── */
.pagehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin: .25rem .125rem 1rem;
}
.pagehead h1 { margin: 0; }
.tagpill {
  flex: none;
  background: var(--card); color: var(--pt-strong);
  font-size: var(--fs-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-label);
  padding: .35rem .75rem; border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(74, 35, 64, .05), 0 4px 10px -6px rgba(74, 35, 64, .12);
}

/* ── 「오늘」 머리판 ────────────────────────────────────────────────────── */
/* 화면이 똑같은 카드 세 장으로 시작하면 '목록'으로 읽힌다. 인사말 + 며칠차 +
   주간 스트립을 따뜻한 그라디언트 판 하나에 묶고, 체중 카드가 그 판의 아래
   모서리를 덮고 올라앉게 해서 '시작'을 만든다. 아래쪽은 전부 조용히 납작하다.

   그라디언트의 가장 진한 끝은 --masthead-deep(#F3DBCC) 이다. 이 값은 임의로
   내리면 안 된다 — 이 판 위의 작은 글자가 --body(5.69:1)·--ink(9.85:1)로만
   버티고 있고, --pt-strong 은 여기서 3.69:1 이라 이 판에서는 아예 쓰지 않는다
   (주간 스트립의 요일·날짜를 --body/--ink 로 내린 이유가 이것이다). */
.masthead {
  --masthead-deep: #F3DBCC;
  position: relative;
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 0;
  padding: calc(var(--pad) + env(safe-area-inset-top, 0px)) var(--pad) 2.75rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background:
    radial-gradient(130% 88% at 4% -14%, #FFFFFF 0%, rgba(255, 255, 255, .55) 34%, rgba(255, 255, 255, 0) 66%),
    radial-gradient(105% 72% at 104% -8%, rgba(217, 116, 74, .16) 0%, rgba(217, 116, 74, 0) 64%),
    linear-gradient(166deg, #FFF9F5 4%, var(--bg2) 46%, var(--masthead-deep) 100%);
  box-shadow: inset 0 -1px 0 rgba(74, 35, 64, .05);
}
.masthead .pagehead { margin: 0 .125rem .875rem; }
.masthead .week { margin-bottom: 0; }
.masthead-note {
  margin: .75rem .125rem 0; color: var(--body);
  font-size: var(--fs-label); font-weight: var(--w-semi); letter-spacing: var(--tr-label);
}
/* 머리판 아래 모서리를 덮고 올라앉는 카드. */
.hero-overlap { position: relative; z-index: 1; margin-top: -1.75rem; }

/* ── 주간 스트립 ───────────────────────────────────────────────────────── */
/* gap 0 — 360px 폰에서 7칸을 나누면 gap 을 주는 순간 한 칸이 44px 아래로 떨어진다.
   칸 사이 여백은 안쪽 동그라미(.wk-n)가 만든다. */
.week { display: flex; gap: 0; margin: 0 0 var(--gap); }
.wk {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: none; border: 0; padding: .45rem .1rem; cursor: pointer;
  border-radius: var(--radius-pill); font-family: inherit;
  min-height: 56px;
}
/* 머리판(bg2 계열) 위에 놓이므로 작은 글자는 --pt-strong(4.28:1) 을 쓰지 않는다. */
.wk-d {
  font-size: var(--fs-eyebrow); font-weight: var(--w-semi);
  letter-spacing: var(--tr-label); color: var(--body);
}
.wk-n {
  font-size: var(--fs-meta); font-weight: var(--w-semi); color: var(--ink);
  letter-spacing: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.wk[aria-current="date"] .wk-n {
  background: var(--btn); color: var(--btn-ink); font-weight: var(--w-bold);
  box-shadow: 0 2px 6px -1px rgba(180, 85, 47, .45);
}
.wk[aria-current="date"] .wk-d { color: var(--ink); font-weight: var(--w-bold); }
.wk[aria-pressed="true"] .wk-n { box-shadow: inset 0 0 0 2px var(--pt-strong); }
.wk[aria-current="date"][aria-pressed="true"] .wk-n {
  box-shadow: 0 2px 6px -1px rgba(180, 85, 47, .45); color: var(--btn-ink);
}
.wk:disabled { cursor: default; }
/* 비활성(아직 오지 않은 날짜) — WCAG 1.4.3 은 비활성 컨트롤을 대비 요건에서 뺀다. */
.wk:disabled .wk-n, .wk:disabled .wk-d { color: rgba(107, 74, 98, .48); }
.wk:not(:disabled):active .wk-n { transform: scale(.94); }

/* ── 정(錠) ───────────────────────────────────────────────────────────── */
/* 쏙쏙빠정: 1회 1정. 체크박스가 아니라 실제 알약 모양으로 그린다.
   납작하게 한 색으로 채우면 '둥근 네모'로 읽힌다 — 아주 얕은 수직 그라디언트 +
   위쪽 안쪽 하이라이트 1.5px + 아래쪽 안쪽 그림자로 부피를 만들고,
   가운데 분할선(::after)은 1px 로 얇게, 흰 하이라이트를 옆에 붙여 파인 것처럼 둔다.

   크기: 알약은 44×26px 이다(2026-07-30 수정 — 그 전 65×44 는 면적이 2.5배라
   네 개가 채워지면 체중 숫자보다 화면을 더 크게 먹었고, 분할선이 '줄'이 아니라
   '띠'로 보였다). 탭 타깃은 버튼 자체를 44×44 로 두고 위아래 9px 을 여백으로
   비워서 확보한다 — 모양을 키워서 44px 을 맞추면 처음 문제로 되돌아간다.

   채움의 그라디언트는 --pt(#D9744A, 흰 배경 3.21:1)에서 시작해 아래로만 어두워진다.
   위쪽을 더 밝게 하면 3:1 아래로 떨어진다 — 밝은 쪽 끝을 --pt 보다 올리지 말 것. */
.tablets { display: flex; gap: .5rem; }
.tablet {
  position: relative; display: block;
  flex: 0 1 auto; width: 44px; height: 44px;   /* 탭 타깃 44×44 */
  background: none; border: 0; padding: 0; cursor: pointer;
}
/* 보이는 알약. 아직 안 먹은 정의 테두리는 --pt-strong 이라야 --bg2 채움 위에서
   4.28:1 로 또렷하다(--pt 는 2.8:1 로 '누를 수 있는 것'처럼 안 보인다). */
.tablet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 26px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #FFFFFF 0%, #FDF4EE 42%, var(--bg2) 100%);
  box-shadow:
    inset 0 0 0 1.5px var(--pt-strong),
    inset 0 1.5px 0 rgba(255, 255, 255, .85),
    inset 0 -4px 6px -4px rgba(74, 35, 64, .28);
  transition: background .18s ease, box-shadow .18s ease;
}
.tablet::after {
  content: ""; position: absolute; top: 16px; height: 12px; left: 50%;
  width: 1px; margin-left: -.5px; border-radius: 1px;
  background: rgba(74, 35, 64, .10);
  box-shadow: .5px 0 0 rgba(255, 255, 255, .65);
}
.tablet.on::before {
  background: linear-gradient(180deg, var(--pt) 0%, #CE6B43 58%, #BE5F38 100%);
  box-shadow:
    inset 0 0 0 1px rgba(155, 72, 39, .55),
    inset 0 1.5px 0 rgba(255, 255, 255, .34),
    inset 0 -5px 7px -4px rgba(120, 48, 20, .40);
}
.tablet.on::after {
  background: rgba(112, 44, 18, .42);
  box-shadow: .5px 0 0 rgba(255, 255, 255, .34);
}
.tablet:disabled { cursor: default; }
@keyframes tabletSettle {
  0%   { transform: scale(1); }
  38%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.tablet.just::before { animation: tabletSettle .34s cubic-bezier(.34, 1.4, .64, 1); }

/* 정 상태 표시(지난 날짜 · 보기 전용) */
.tablet-static { pointer-events: none; }

/* 남은 약 — 이 화면에서 명조가 나오는 세 번째(마지막) 자리다. */
.pills-left { display: flex; align-items: baseline; gap: .4rem; margin: 1.125rem 0 0; }
.pills-left .num { font-size: var(--fs-num); color: var(--ink); line-height: 1.05; }
.pills-left .muted { font-weight: var(--w-semi); }
.meter-note {
  margin: .5rem 0 0; color: var(--body);
  font-size: var(--fs-label); font-weight: var(--w-medium); letter-spacing: var(--tr-label);
}

/* 시작 → 목표 진행바 (chart.js 의 weightProgressBar 가 그린다) */
.pbar {
  height: 8px; border-radius: 999px; background: var(--track);
  overflow: hidden; margin: 1rem 0 0;
  box-shadow: inset 0 1px 1px rgba(74, 35, 64, .06);
}
.pbar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, #E07E52 0%, var(--pt) 55%, #C4633B 100%);
}
.pbar-legend {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; margin: .5rem 0 0;
  font-size: var(--fs-label); letter-spacing: var(--tr-label);
}
.pbar-legend b { color: var(--pt-strong); font-weight: var(--w-bold); }

/* ── 칩 ───────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  background: var(--bg2); color: var(--ink);
  border: 0; border-radius: var(--radius-pill);
  padding: .6rem 1rem; min-height: 44px;
  font-size: var(--fs-meta); font-weight: var(--w-semi); font-family: inherit;
  letter-spacing: var(--tr-label);
  cursor: pointer;
  transition: transform .12s ease, background-color .18s ease;
}
.chip:active { transform: scale(.97); }
.chip.on {
  background: var(--btn); color: var(--btn-ink); font-weight: var(--w-bold);
  box-shadow: 0 1px 2px rgba(74, 35, 64, .10), 0 6px 14px -8px rgba(180, 85, 47, .5);
}
.chip-static { cursor: default; }

/* ── 컨디션 (좋음 / 보통 / 나쁨) ────────────────────────────────────────────
   이상반응 태그(.chip)와 **다른 축**이다. 그래서 모양도 다르게 둔다 — 태그는 작은
   알약 칩이고 컨디션은 큰 타일 세 개다. 한 번 누르면 정해지고 같은 것을 다시 누르면
   지워진다.
   ⚠ 「나쁨」에 danger 색을 쓰지 않는다. 컨디션은 마황 이상반응 경로가 아니라 그냥
   그날의 컨디션이고(README 「컨디션은 이상반응이 아니다」), 붉은 타일은 환자에게
   "이걸 누르면 이상반응으로 신고된다"고 잘못 읽힌다. 세 타일 모두 같은 브랜드
   채움을 쓴다. */
.mood { display: flex; gap: .5rem; }
.mood-btn {
  flex: 1 1 0; min-width: 0; min-height: 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem;
  background: var(--bg2); color: var(--ink);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; font-size: var(--fs-meta); font-weight: var(--w-semi);
  letter-spacing: var(--tr-label); line-height: 1.2;
  transition: transform .12s ease, background-color .18s ease, box-shadow .18s ease;
}
.mood-btn svg { display: block; width: 36px; height: 36px; }
.mood-btn:active { transform: scale(.97); }
.mood-btn.on {
  background: var(--btn); color: var(--btn-ink); font-weight: var(--w-bold);
  box-shadow: 0 1px 2px rgba(74, 35, 64, .10), 0 8px 18px -10px rgba(180, 85, 47, .5);
}
/* 지난 날짜(보기 전용). 고르지 않은 타일은 눌린 것과 확실히 구별되게 낮춘다. */
.mood-static { cursor: default; }
.mood-static:not(.on) { background: var(--plum); color: var(--body); }

/* ── 걸음수 ────────────────────────────────────────────────────────────────
   자동으로 읽어오는 값이 아니다(네이티브 포장 이후의 과제) — 그래서 입력칸 아래에
   "직접 적어 주세요"를 반드시 적는다. 자동인 줄 알고 비워 두는 환자가 생기면
   그 칸은 그냥 빈 데이터가 된다. */
.steps-row { display: flex; gap: .5rem; align-items: center; }
.steps-row input { flex: 1 1 auto; min-width: 0; text-align: right; font-weight: var(--w-bold); }
.steps-unit {
  flex: none; font-size: var(--fs-meta); font-weight: var(--w-semi); color: var(--ink);
  letter-spacing: var(--tr-label);
}
.steps-row .btn { flex: none; }
.steps-static { font-weight: var(--w-bold); color: var(--ink); }

/* ── 식단 줄 ───────────────────────────────────────────────────────────── */
/* 한 끼니 = 한 줄(2026-07-30 수정). 그 전에는 썸네일 4칸 격자 + 그 아래 끼니별
   메모줄 4개(각각 저장 버튼)라서, 한 끼니를 적는 데 컨트롤이 열두 개였고
   아침·점심·저녁·간식 라벨이 격자와 메모줄에 두 번씩 나왔다.
   지금은 [썸네일][끼니 이름][한 줄 메모] 한 줄이고 저장 버튼이 없다
   (메모는 포커스를 잃을 때 저장한다 — app.js 의 focusout 핸들러). */
.meals { display: flex; flex-direction: column; gap: .5rem; }
.mealrow { display: flex; align-items: center; gap: .625rem; }
.meal { flex: none; display: block; }
.meal-slot {
  flex: none; width: 2.375rem;
  font-size: var(--fs-label); font-weight: var(--w-bold); color: var(--ink);
  letter-spacing: var(--tr-label);
}
.tile {
  display: flex; align-items: center; justify-content: center;
  flex: none; width: 48px; height: 48px;      /* 탭 타깃 ≥44px */
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg2); color: var(--pt-strong);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(74, 35, 64, .05);
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-static { cursor: default; }
/* 지난 날짜에 사진이 없는 끼니 — bg2 타일 위 글자라 --body(6.59:1)를 쓴다. */
.tile-dash { color: var(--body); font-weight: var(--w-semi); }
/* 파일 입력이 .vis-hidden 이라 포커스 링이 안 보인다 — 타일에 대신 그린다. */
.meal:focus-within .tile { outline: 2px solid var(--pt-strong); outline-offset: 2px; }
input.meal-memo {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  padding: .5rem .625rem; font-size: var(--fs-meta);
}
.meal-memo-text {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-meta); color: var(--body); overflow-wrap: anywhere;
}
/* 컨디션 한 줄 메모(입력 + 저장 버튼 한 줄) */
.memo-row { display: flex; gap: .4rem; align-items: center; margin-top: .75rem; }
.memo-row input { min-height: 44px; padding: .5rem .625rem; font-size: var(--fs-meta); }
.memo-row .btn { flex: none; }

/* ── 기록 목록 ─────────────────────────────────────────────────────────── */
.dayrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dayrow .date {
  font-size: var(--fs-body); font-weight: var(--w-bold); color: var(--ink);
  letter-spacing: var(--tr-title);
}
.kgchip {
  flex: none; background: var(--bg2); color: var(--ink);
  border-radius: var(--radius-pill); padding: .28rem .7rem;
  font-weight: var(--w-bold); font-size: var(--fs-meta); letter-spacing: var(--tr-label);
}
.thumbs { display: flex; gap: .375rem; margin-top: .625rem; flex-wrap: wrap; }
.thumbs img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 10px; display: block;
  box-shadow: 0 1px 2px rgba(74, 35, 64, .06);
}

/* ── 빈 상태 ───────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 1.5rem .5rem .25rem; }
.empty p {
  color: var(--body); margin: 0 0 1.125rem;
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.empty strong { color: var(--ink); font-weight: var(--w-bold); }

/* ── 「더보기」 ─────────────────────────────────────────────────────────────
   기존 카드 언어를 그대로 쓴다(테두리 없는 흰 카드 + --shadow-soft + 카드 밖 섹션 제목).
   새 카드 스타일을 만들지 않는다. */

/* 내 정보 — 이름·지점은 자유 입력이라 본문 서체다. */
.info-name {
  margin: 0; font-size: var(--fs-20); font-weight: var(--w-black); color: var(--ink);
  letter-spacing: var(--tr-title); line-height: var(--lh-snug);
}
.info-branch { margin: .125rem 0 0; }
.info-rows {
  display: flex; flex-direction: column; gap: .625rem;
  margin: 1.125rem 0 0; padding: 0;
}
.info-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
}
.info-row dt { flex: none; }
.info-row dd {
  margin: 0; text-align: right;
  font-size: var(--fs-meta); font-weight: var(--w-bold); color: var(--ink);
  letter-spacing: var(--tr-label);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* 문의하기 — 전화/카톡. 값이 없는 쪽은 버튼을 아예 만들지 않는다(app.js paintContact). */
.contact-row { display: flex; gap: .5rem; margin-top: 1rem; }
.contact-btn { flex: 1 1 0; min-width: 0; }
/* 버튼처럼 보이는 링크(tel:, 카카오). .btn 의 글자 정렬만 링크용으로 고친다. */
a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; text-align: center;
}
a.btn.btn-ghost { color: var(--ink); }

/* 메뉴 줄(읽을거리 세 화면). 한 줄이 통째로 버튼이고 높이는 최소 56px 이다. */
.menu { padding: .25rem .375rem; }
.menu-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; min-height: 60px; padding: .75rem .875rem;
  background: none; border: 0; border-radius: var(--radius-sm);
  cursor: pointer; text-align: left; font-family: inherit;
  transition: background-color .18s ease;
}
.menu-row + .menu-row { box-shadow: inset 0 1px 0 var(--line); }
.menu-row:active { background: var(--bg2); }
.menu-row .menu-t {
  display: block; font-size: var(--fs-body); font-weight: var(--w-bold); color: var(--ink);
  letter-spacing: var(--tr-title); line-height: var(--lh-snug);
}
.menu-row .menu-d {
  display: block; margin-top: .125rem;
  font-size: var(--fs-label); font-weight: var(--w-medium); color: var(--pt2);
  letter-spacing: var(--tr-label);
}
.menu-row .chev { flex: none; color: var(--pt-strong); font-size: var(--fs-20); line-height: 1; }

/* 읽을거리 화면으로 들어갔을 때 머리에 놓는 되돌아가기. */
.backlink {
  display: inline-flex; align-items: center; gap: .25rem;
  min-height: 44px; padding: .5rem .5rem .5rem .25rem;
  margin: 0 0 .25rem -.25rem;
  background: none; border: 0; border-radius: var(--radius-pill);
  font-family: inherit; font-size: var(--fs-label); font-weight: var(--w-bold);
  color: var(--pt-strong); letter-spacing: var(--tr-label); cursor: pointer;
}
.backlink .chev { font-size: var(--fs-20); line-height: 1; }

/* ── 읽을거리 블록(content.js) ─────────────────────────────────────────── */
.doc-lead {
  margin: 0; font-size: var(--fs-20); font-weight: var(--w-black); color: var(--ink);
  letter-spacing: var(--tr-title); line-height: var(--lh-snug);
}
.doc-note { margin: .5rem 0 0; color: var(--body); font-size: var(--fs-meta); line-height: var(--lh-body); }
.doc-title { margin: 0 0 .75rem; }
.doc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.doc-list li {
  position: relative; padding-left: 1.05rem;
  font-size: var(--fs-meta); color: var(--body); line-height: var(--lh-body);
}
/* 점은 글자가 아니라 그래픽이므로 --pt(3.21:1)로 채워도 된다. */
.doc-list li::before {
  content: ""; position: absolute; left: .2rem; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--pt);
}
.doc-pairs { display: grid; grid-template-columns: auto 1fr; gap: .5rem .75rem; margin: 0; }
.doc-pairs dt { align-self: start; padding-top: .15rem; }
.doc-pairs dd {
  margin: 0; font-size: var(--fs-meta); font-weight: var(--w-semi); color: var(--ink);
  line-height: var(--lh-body); overflow-wrap: anywhere;
}
/* 경고 카드 — 복용 가이드의 필수 주의사항 한 자리에만 쓴다. */
.card-caution { background: var(--danger-tint); }
.card-caution .doc-title { color: var(--danger); }
.card-caution .doc-list li::before { background: var(--danger); }
.doc-q {
  margin: 0 0 .375rem; font-size: var(--fs-body); font-weight: var(--w-bold); color: var(--ink);
  letter-spacing: var(--tr-title); line-height: var(--lh-snug);
}
.doc-a { margin: 0; font-size: var(--fs-meta); color: var(--body); line-height: var(--lh-body); }
/* 이상반응 태그와 같은 모양의 칩을 보여주는 자리(복용 가이드). 「오늘」의 그 줄과
   같은 것이라는 걸 색·모양으로 알아보게 하는 게 목적이다. */
.doc-chips { margin-top: .875rem; }
.doc-action { margin-top: 1rem; }

/* ── 폼 한 줄(도구 화면들이 함께 쓴다) ─────────────────────────────────────
   [라벨] 위, [입력칸] 아래. 라벨을 옆에 두면 360px 에서 입력칸이 44px 아래로 눌린다. */
.form-row + .form-row { margin-top: .875rem; }
.form-row > .label { display: block; margin-bottom: .375rem; }
/* 값 + 단위. 단위는 입력칸 밖에 둔다 — 안에 넣으면 placeholder 와 겹친다. */
.unit-row { display: flex; align-items: center; gap: .5rem; }
.unit-row input { flex: 1 1 auto; min-width: 0; text-align: right; font-weight: var(--w-bold); }
.unit {
  flex: none; color: var(--body);
  font-size: var(--fs-label); font-weight: var(--w-semi); letter-spacing: var(--tr-label);
}
/* 카드 안에서 눌러 다른 화면으로 보내는 작은 글자 버튼(예: 지난 검진 「고치기」). */
.linkbtn {
  /* 실측 42×44 였다 — 폭도 44px 을 넘겨야 한다(패딩만으로는 「고치기」 세 글자가 42px). */
  flex: none; min-height: 44px; min-width: 44px; padding: .5rem .5rem;
  margin-right: -.25rem;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: var(--fs-label); font-weight: var(--w-bold);
  color: var(--pt-strong); letter-spacing: var(--tr-label);
}
/* 되돌릴 수 없는 작은 동작(지난 검진 「지우기」). 흰 면 위 --danger 는 6.54:1 이다(실측). */
.linkbtn-warn { color: var(--danger); }
/* 한 줄에 작은 버튼이 둘 이상 붙을 때(고치기 · 지우기). */
.row-acts { display: flex; flex: none; align-items: center; gap: .125rem; }

/* ── 혈당 ──────────────────────────────────────────────────────────────────
   측정 시점(공복·식후2시간·취침전)은 **글자 + 점 모양**으로 함께 구분한다. 색만으로
   나누면 색약인 환자에게 세 값이 같아 보이고, 무엇보다 같은 130mg/dL 이 공복인지
   식후2시간인지가 이 화면의 정보 전부다. 점 모양은 chart.js 의 glucoseMark() 가 그리고
   추이 그래프의 점과 **같은 모양**이다.
   ⚠ 값에 따라 색을 바꾸지 않는다(정상·주의 판정은 이 앱이 하지 않는다). */
.chip-ctx { display: inline-flex; align-items: center; gap: .35rem; }
/* 고른 칩은 면이 --btn(=--pt-strong 과 같은 색)이라 「공복」의 채운 점이 배경에 묻혀
   사라진다 — 고른 칩에서만 표식을 글자색(흰색)으로 뒤집는다. SVG 의 fill/stroke 는
   표현속성이라 CSS 규칙이 항상 이긴다.
   요소 이름은 chart.js 의 GLUCOSE_STYLE 이 정한 모양과 짝이다:
   circle=공복(채움) / rect=식후2시간(빈 사각) / path=취침전(채운 마름모). */
.chip.on .chip-mark circle, .chip.on .chip-mark path { fill: currentColor; }
.chip.on .chip-mark rect { fill: none; stroke: currentColor; }
/* 목록 안의 칩은 누를 수 없으므로(정적) 44px 타깃 규칙 대상이 아니다 — 줄을 낮춘다. */
.gl-row .chip-ctx {
  min-height: 0; padding: .28rem .6rem;
  font-size: var(--fs-label); font-weight: var(--w-semi);
}
.gl-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.gl-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: .25rem .5rem;
  padding: .375rem 0;
}
.gl-row + .gl-row { box-shadow: inset 0 1px 0 var(--line); }
.gl-time {
  font-size: var(--fs-label); font-weight: var(--w-bold); color: var(--ink);
  letter-spacing: var(--tr-label);
}
.gl-val { font-size: var(--fs-20); font-weight: var(--w-bold); color: var(--ink); letter-spacing: var(--tr-title); }
.gl-unit {
  margin-left: .15rem; font-size: var(--fs-eyebrow); font-weight: var(--w-semi);
  color: var(--body); letter-spacing: var(--tr-label);
}
.gl-del {
  min-height: 44px; min-width: 44px; padding: .5rem .35rem;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: var(--fs-eyebrow); font-weight: var(--w-bold);
  color: var(--pt-strong); letter-spacing: var(--tr-label);
}
.gl-memo {
  grid-column: 1 / -1; margin-top: -.125rem;
  font-size: var(--fs-label); color: var(--body); overflow-wrap: anywhere;
}
/* 그래프 범례 — 점 모양이 무엇을 뜻하는지 글자로 말해 준다. */
.g-legend { display: flex; flex-wrap: wrap; gap: .375rem .875rem; margin: .625rem 0 0; }
.g-legend-i {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-eyebrow); font-weight: var(--w-semi); color: var(--body);
  letter-spacing: var(--tr-label);
}

/* ── 게임: 물길 잇기 ────────────────────────────────────────────────────────
   조급하게 만들지 않는다 — 시간 제한도 실패도 없다(app.js 의 게임 절 주석).
   칸은 5×5 가 상한이다: 360px 폰의 카드 안쪽 폭이 약 290px 이라 5칸이면 한 칸
   54px 로 44px 타깃을 지키지만, 6칸이면 44px 아래로 내려간다. */
.game-grid {
  display: grid; grid-template-columns: repeat(var(--gn, 5), 1fr);
  gap: 5px; padding: 5px; margin-top: .25rem;
  background: var(--plum); border-radius: var(--radius-sm);
}
.gcell {
  aspect-ratio: 1; min-width: 0; padding: 0; display: block;
  background: var(--card); border: 0; border-radius: 10px; cursor: pointer;
  transition: background-color .18s ease, transform .12s ease;
}
/* 물이 닿은 칸. 색만 바뀌는 게 아니라 배관이 굵어지고 면이 따뜻해진다
   (선 색 --pt-strong 은 이 면 위에서 4.28:1 — 그래픽 기준 3:1 을 넘는다). */
.gcell.lit { background: var(--bg2); }
.gcell svg { display: block; width: 100%; height: 100%; }
.gcell:active { transform: scale(.94); }
.gcell:disabled { cursor: default; }
.game-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: 1rem;
}
.game-foot .muted { font-size: var(--fs-eyebrow); text-align: right; }
/* 다 이었을 때. 축하는 하되 요란하지 않게 — 브랜드 틴트 한 겹이다. */
.card-win { background: var(--bg2); }

/* ── 스토어 ────────────────────────────────────────────────────────────────
   **장바구니도 결제도 없다.** 카드에는 홈페이지로 나가는 링크 하나만 둔다.
   상품 사진은 없을 수 있다(imageUrl 이 null) — 그때는 아래 타일이 그 자리를 채운다.
   그래서 「깨진 이미지」가 나올 자리가 이 화면에 없다. */
.store-head { display: flex; align-items: center; gap: .75rem; }
.store-tile {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg2); color: var(--pt-strong);
  box-shadow: inset 0 0 0 1px rgba(74, 35, 64, .05);
}
.store-tile svg { display: block; width: 30px; height: 30px; }
.store-tile-img { background: var(--plum); }
.store-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 사진이 실제로 뜬 카드는 사진이 주인공이 된다. 위의 56px 타일은 사진이 없을 때의 모습이다.
   원본이 정사각이라 1/1 로 두면 잘리는 곳 없이 상품이 다 보인다. */
.store-head.has-photo { display: block; }
.store-head.has-photo .store-tile {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  margin-bottom: .65rem; border-radius: var(--radius-sm);
}
.store-head.has-photo .store-name { display: block; }
.store-name {
  font-size: var(--fs-body); font-weight: var(--w-bold); color: var(--ink);
  letter-spacing: var(--tr-title); line-height: var(--lh-snug);
}
.store-tag { margin-top: .75rem; }
.store-price {
  margin: .5rem 0 0; font-size: var(--fs-body); font-weight: var(--w-bold);
  color: var(--ink); letter-spacing: var(--tr-label);
}
.store-go { margin-top: 1rem; }
/* 나간다는 사실을 문구·화살표·안내문 세 곳에서 말한다. */
.store-out { margin-left: .375rem; font-weight: var(--w-semi); }

/* ── 하단 탭 ──────────────────────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; background: var(--card);
  box-shadow: 0 -1px 0 rgba(74, 35, 64, .06), 0 -10px 28px -14px rgba(74, 35, 64, .18);
  /* 아래쪽은 홈 인디케이터(safe-area) + 여유 .5rem. 이게 없으면 라벨의 아랫부분이
     화면 맨 끝에 붙어 잘린 것처럼 보인다. */
  padding: .5rem .25rem calc(.75rem + env(safe-area-inset-bottom, 0px));
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  background: none; border: 0; padding: .25rem .25rem 0;
  font-family: inherit; font-size: var(--fs-eyebrow); font-weight: var(--w-semi);
  letter-spacing: var(--tr-label); line-height: 1.25;
  color: var(--pt2); cursor: pointer; min-height: 52px;
  position: relative;
}
.tab svg { display: block; width: 24px; height: 24px; }
.tab[aria-selected="true"] { color: var(--pt-strong); font-weight: var(--w-bold); }
.dot {
  position: absolute; top: .3rem; right: 50%; margin-right: -14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
  box-shadow: 0 0 0 2px var(--card);
}
.scroll-pad { height: calc(88px + env(safe-area-inset-bottom, 0px)); }

/* ── 로그인 ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 46vh; min-height: 260px; max-height: 420px;
  background: var(--bg2);
  overflow: hidden;
}
.hero img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  display: block;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56%;
  background: linear-gradient(to bottom, rgba(255, 247, 242, 0), var(--bg));
}
.login-body { position: relative; margin-top: -2.25rem; }
/* 워드마크 — 명조가 나오는 네 자리 중 하나. 홈페이지(ssoksokdiet.com)와 같은 짝이다. */
.brandmark {
  font-family: var(--serif);
  font-size: var(--fs-26); font-weight: var(--w-bold); color: var(--ink);
  letter-spacing: var(--tr-title); line-height: var(--lh-tight);
  margin: 0 0 .375rem;
}
.login-lead { margin: 0 0 1.125rem; }
.login-body .card { box-shadow: var(--shadow-lift); border-radius: var(--radius-lg); }
.field + .field { margin-top: .875rem; }
.field label { display: block; margin-bottom: .375rem; }
.field-gap { height: 1.125rem; }
/* 초대코드는 명조 대문자로 받는다(이름칸은 본문 산세리프 그대로).
   힌트는 반드시 산세리프 보통 굵기로 — 명조 굵은 글씨로 코드 모양 힌트를 넣으면
   이미 입력된 코드처럼 읽힌다. */
#code {
  font-family: var(--serif); font-size: var(--fs-26); font-weight: var(--w-bold);
  letter-spacing: .22em; text-align: center;
}
#code::placeholder {
  font-family: var(--font); font-size: var(--fs-meta); font-weight: var(--w-medium);
  letter-spacing: var(--tr-body); color: var(--pt2);
}
.err {
  color: var(--danger); font-size: var(--fs-meta); font-weight: var(--w-semi);
  margin: .75rem 0 0; min-height: 1.25rem;
}

/* ── 카드 등장(탭을 바꿀 때만) ──────────────────────────────────────────── */
/* #panel 은 복약 토글마다 다시 그려진다 — 그때마다 애니메이션이 돌면 깜빡임이 된다.
   그래서 app.js 가 '탭이 실제로 바뀐' 렌더에만 .stagger 를 붙인다. */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.stagger > * { animation: cardIn .34s cubic-bezier(.22, .8, .3, 1) both; }
.stagger > :nth-child(1) { animation-delay: 0ms; }
.stagger > :nth-child(2) { animation-delay: 40ms; }
.stagger > :nth-child(3) { animation-delay: 80ms; }
.stagger > :nth-child(4) { animation-delay: 110ms; }
.stagger > :nth-child(5) { animation-delay: 135ms; }
.stagger > :nth-child(n + 6) { animation-delay: 155ms; }

/* ── 움직임을 줄이도록 설정한 기기 ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .btn:active, .chip:active, .card-link:active, .mood-btn:active,
  .gcell:active, .wk:not(:disabled):active .wk-n {
    transform: none !important;
  }
}

/* 360px 폰. 가로 스크롤이 절대 생기지 않아야 한다. */
@media (max-width: 380px) {
  :root {
    --fs-display: 3rem;      /* 56 → 48px */
    --fs-num: 1.75rem;       /* 34 → 28px */
    --pad: .875rem;
  }
  .card { padding: 1rem 1rem; }
  .card-hero { padding: 1.25rem 1rem 1.125rem; }
  .chip { padding: .6rem .8rem; }
}