/* 디자이너 시안 diary4-app.html 에서 그대로 가져온 스타일.
   손으로 고치지 않는다 — 시안이 바뀌면 tools/sync-sian.js 로 다시 뽑는다.
   추출 시각 기준 744줄 */

/* ══════════════════════════════════════════════════════════════════
   다이어트일기 — **환자가 로그인해서 쓰는 화면** (시안 4 계열)
   `site/diary4.html` 은 "이런 서비스입니다" 를 설명하는 소개 페이지고,
   이 파일은 그 설명을 걷어낸 **실제 앱 화면** 이다. 한 장 안에서
     로그인(게이트) → 오늘 대시보드 → 일기 작성
   이 모두 끝난다. 실제 앱의 `/diary/login` · `/diary` · `/diary/[date]`
   세 경로를 한 화면에 합친 모양이라, 개발로 넘길 때 그대로 쪼개면 된다.
   토큰(색·라운드·서체)은 시안4 와 동일하게 유지 — 같은 제품으로 읽혀야 한다.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#000000;
  --body:#6f6f6f;
  /* 바탕 세 단 — 2026-08-24 베이지로 교체.
     예전 값(#fffbf2 #fff5e0 #fff2d7)은 어두워지는 대신 **노래지는** 방식이라
     단이 내려갈수록 노랑이 짙어졌다. 지금은 밝기로 내린다(250→242→233).
     소개페이지(tools/latte.py 의 TONES["beige"])와 같은 값이다 — 함께 고칠 것. */
  --cream:#faf7f2;
  --cream2:#f2ede4;
  --cream3:#e9e2d6;
  /* 버튼 네 단 — 금색을 걷어내고 **--point 세이지 초록**으로.
     앱이 이미 쓰는 색이라 새 색이 들어오지 않는다.
     되돌리려면 : #dfa92e #e9b93e #f2ca45 #fad24e · glow 224,168,46 · edge 120,80,10
                 · ink #2b2119 · hi .6 */
  --btn-1:#2c4636; --btn-2:#33513e; --btn-3:#3a5c48; --btn-4:#456b54;
  --btn-ink:#faf7f2;      /* 짙은 버튼이라 글자를 크림으로 뒤집는다 */
  --btn-hi:.18;           /* 위쪽 흰 하이라이트 — 짙은 바탕이라 크게 줄인다 */
  --btn-glow:44,70,54;    /* 아래로 퍼지는 빛 (rgb 세 값) */
  --btn-edge:12,26,18;    /* 아래 안쪽 1px · 눌림 그림자 (rgb 세 값) */
  --line:rgba(0,0,0,.09);
  --point:#2c4636;        /* 짙은 세이지 — 앱바·선택된 끼니·등록 버튼 */
  --point-2:#3a5c48;
  --point-soft:#e6efe7;
  --point-line:rgba(44,70,54,.26);
  --warn:#c0562f;
  --r:32px; --r-sm:24px; --r-xs:10px;
  --sans:'Poppins','Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--cream);color:var(--body);
  font-size:12.96px;line-height:1.6;letter-spacing:0;word-break:keep-all;min-height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
h1,h2,h3,h4{color:var(--ink);font-weight:600;line-height:1.2;letter-spacing:0}
input,select,textarea{font:inherit}

/* ══ 버튼 : 시안4 의 Gold Glass + 화살표 그대로 ═══════════════════ */
.pill{display:inline-flex;align-items:center;padding:14px 26px 15px;border-radius:14px;
  color:var(--btn-ink);font-weight:600;font-size:12.96px;letter-spacing:.01em;cursor:pointer;
  background-color:var(--btn-3);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(180deg,var(--btn-1) 0%,var(--btn-2) 16%,var(--btn-3) 56%,var(--btn-4) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,var(--btn-hi)),inset 0 -1px 0 rgba(var(--btn-edge),.28),
    0 12px 26px -10px rgba(var(--btn-glow),.75),0 3px 10px -4px rgba(var(--btn-edge),.4);
  transition:transform .35s cubic-bezier(.3,1.2,.45,1),box-shadow .35s,filter .35s}
.pill:hover{transform:translateY(-2px);filter:brightness(1.05)}
.pill:active{transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(var(--btn-edge),.35),0 4px 12px -6px rgba(var(--btn-glow),.6)}
.pill:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pill.soft{color:var(--ink);background-image:none;background-color:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 20px -10px rgba(60,44,30,.35)}
.pill.soft:hover{background-color:rgba(255,255,255,.94);filter:none}
.pill.sm{padding:9px 15px 10px;border-radius:10px;font-size:9.72px}
.pill .ar{display:inline-flex;align-items:center;justify-content:center;width:0;overflow:visible;
  flex:none;transition:width .7s cubic-bezier(.3,1.22,.45,1),
    margin .7s cubic-bezier(.3,1.22,.45,1),opacity .38s ease .04s}
.pill .ar svg{width:19px;height:14px;flex:none;display:block;
  transition:transform .7s cubic-bezier(.3,1.32,.45,1)}
.pill .ar.l{opacity:0}
.pill .ar.l svg{transform:rotate(-90deg) scale(0)}
.pill .ar.r{width:19px;opacity:1;margin-left:11px}
.pill:hover .ar.r{width:0;margin-left:0}
.pill:hover .ar.r svg{transform:rotate(-90deg) scale(0)}
.pill:hover .ar.l{width:19px;opacity:1;margin-right:11px}
.pill:hover .ar.l svg{transform:none}
.pill.sm .ar svg{width:12px;height:9px}
.pill.sm .ar.r{width:12px;margin-left:6px}
.pill.sm:hover .ar.l{width:12px;margin-right:6px}
.lb{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.pill,.pill .ar,.pill .ar svg{transition:none}}

/* ══════════════════════════════════════════════════════════════════
   ① 로그인 게이트
   계획서 §5 의 `/diary/login`. 소셜 3종(카카오·네이버·구글)만 두고
   비밀번호는 아예 만들지 않는다. 시안이라 어느 버튼을 눌러도 통과한다.
   ══════════════════════════════════════════════════════════════════ */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
  background:var(--cream);
  /* 크림 위에 아주 옅은 세이지 후광 두 개 — 빈 화면이 허전하지 않게 */
  background-image:
    radial-gradient(680px 480px at 82% 8%,rgba(44,70,54,.09),transparent 62%),
    radial-gradient(560px 420px at 10% 94%,rgba(224,168,46,.16),transparent 64%);
  transition:opacity .5s ease,visibility .5s}
.gate[hidden]{display:grid;opacity:0;visibility:hidden;pointer-events:none}
/* 게이트가 떠 있는 동안은 뒤 화면이 스크롤되지 않게 잠근다 */
body.locked{overflow:hidden}
.gbox{width:min(432px,100%);text-align:center}
.glogo{height:56px;width:auto;margin:0 auto 22px}
.gbox h1{font-size:23.5px;line-height:1.3}
.gbox .gsub{margin-top:10px;font-size:12.555px}
.gsocial{display:grid;gap:9px;margin-top:30px}
.gs{display:flex;align-items:center;justify-content:center;gap:9px;height:52px;
  border-radius:14px;font-size:13.5px;font-weight:600;
  transition:transform .3s cubic-bezier(.3,1.2,.45,1),box-shadow .3s,filter .3s}
.gs:hover{transform:translateY(-2px)}
.gs:active{transform:translateY(1px)}
.gs:focus-visible{outline:2px solid var(--point);outline-offset:3px}
.gs i{width:19px;height:19px;display:grid;place-items:center;flex:none}
.gs.kakao{background:#fee500;color:#191600;box-shadow:0 10px 22px -12px rgba(180,150,0,.7)}
.gs.naver{background:#03c75a;color:#fff;box-shadow:0 10px 22px -12px rgba(3,140,64,.7)}
.gs.google{background:#fff;color:#1f1f1f;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 8px 20px -12px rgba(0,0,0,.4)}
.gnote{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-size:10.935px;line-height:1.75}
.gnote b{color:var(--point);font-weight:600}
.glinks{margin-top:14px;display:flex;gap:16px;justify-content:center;font-size:10.53px}
.glinks a{text-decoration:underline;text-underline-offset:3px}

/* ══════════════════════════════════════════════════════════════════
   ② 앱 셸 — 상단 앱바 + 왼쪽 레일 + 본문
   소개 페이지의 마케팅 내비(스크롤 앵커)와 달리 **자리를 고정한 도구 화면**.
   레일은 실제 앱에서 /diary 하위 메뉴가 될 자리다.
   ══════════════════════════════════════════════════════════════════ */
.app{min-height:100vh;display:flex;flex-direction:column;
  opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
.app.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.app{transition:none}}

.abar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  padding:0 clamp(16px,2.2vw,26px);height:58px;background:var(--point);color:#fff}
.abrand{display:flex;align-items:center;gap:11px;margin-right:auto}
.abrand img{height:22px;width:auto;flex:none}
.abrand b{font-size:13.77px;font-weight:500;color:#fff}
.abadge{margin-left:4px;border-radius:100px;padding:4px 10px;font-size:9.72px;font-weight:500;
  background:rgba(255,255,255,.16);color:rgba(255,255,255,.9)}
.auser{display:flex;align-items:center;gap:10px;font-size:11.34px;color:rgba(255,255,255,.78)}
.auser b{color:#fff;font-weight:500}
.aface{width:29px;height:29px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.18);color:#fff;font-size:11.34px;font-weight:600}
.aout{border-radius:100px;padding:7px 14px;font-size:10.53px;color:rgba(255,255,255,.82);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);transition:background .3s,color .3s}
.aout:hover{background:rgba(255,255,255,.14);color:#fff}

.shell{flex:1;display:grid;grid-template-columns:210px minmax(0,1fr)}
/* 왼쪽 레일 */
.rail{border-right:1px solid var(--line);background:var(--cream2);
  padding:20px 14px;display:flex;flex-direction:column;gap:4px}
.rl{display:flex;align-items:center;gap:11px;border-radius:12px;padding:11px 13px;
  font-size:12.555px;font-weight:500;transition:background .28s,color .28s;text-align:left;width:100%}
.rl svg{width:17px;height:17px;flex:none;opacity:.75}
.rl:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.rl.on{background:var(--point);color:#fff}
.rl.on svg{opacity:1}
.rl u{margin-left:auto;text-decoration:none;border-radius:100px;padding:2px 8px;
  font-size:9.72px;font-weight:600;background:var(--warn);color:#fff}
.rl.on u{background:rgba(255,255,255,.24)}
.rspace{flex:1}
.rnote{border-radius:var(--r-sm);background:#fff;padding:14px 15px;font-size:10.53px;line-height:1.7;
  box-shadow:inset 0 0 0 1px var(--line)}
.rnote b{display:block;color:var(--ink);font-size:11.34px;font-weight:600;margin-bottom:5px}

.main{padding:clamp(18px,2.2vw,28px) clamp(16px,2.4vw,32px) 40px;max-width:1560px;width:100%}

/* ── 인사줄 ─────────────────────────────────────────────────────── */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:clamp(14px,1.8vh,20px)}
.hello h2{font-size:clamp(19.44px,2.1vw,25.92px)}
.hello p{margin-top:6px;font-size:12.15px}
.hello p b{color:var(--point);font-weight:600}
.hdate{display:flex;align-items:center;gap:8px;font-size:11.34px}
.hdate .dbtn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,color .25s}
.hdate .dbtn:hover{background:var(--point);color:#fff;box-shadow:none}
.hdate .dbtn[disabled]{opacity:.35;cursor:not-allowed}
.hdate b{color:var(--ink);font-weight:600;font-size:12.555px;min-width:8.6em;text-align:center}

/* ── 상단 스탯 타일 ──────────────────────────────────────────────
   대시보드의 "한눈에" 를 담당하는 줄. 숫자는 아래 카드들과 연동된다
   (체중 칸을 고치면 첫 타일이 따라 움직인다). */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,14px);
  margin-bottom:clamp(12px,1.6vh,18px)}
.st{background:#fff;border-radius:var(--r-sm);padding:16px 18px 15px;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.st .lb2{font-size:10.53px;font-weight:500}
.st .nu{display:flex;align-items:baseline;gap:5px;margin-top:5px;color:var(--ink)}
.st .nu strong{font-size:23.5px;font-weight:600;line-height:1}
.st .nu em{font-style:normal;font-size:11.34px;color:var(--body)}
.st .dl{margin-top:6px;font-size:10.53px;font-weight:600;color:var(--point)}
.st .dl.up{color:var(--warn)}
.st .dl span{color:var(--body);font-weight:400}
/* 진행 막대 — `.st` 안으로 범위를 좁힌다.
   맨 이름 `.bar` 로 두면 주간 비교 범례의 `.wk-lg.bar` 까지 잡아먹는다. */
.st .bar{margin-top:9px;height:5px;border-radius:100px;background:var(--cream3);overflow:hidden}
.st .bar i{display:block;height:100%;border-radius:100px;background:var(--point);
  transition:width .6s cubic-bezier(.22,.8,.3,1)}
.spark{position:absolute;right:14px;bottom:12px;width:78px;height:30px;opacity:.9}

/* ── 본문 2단 ───────────────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,.78fr);
  gap:clamp(12px,1.4vw,18px);align-items:start}
.side{display:grid;gap:clamp(12px,1.4vw,18px)}

/* 카드 공통 */
.card{background:#fff;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line)}
.card-h{display:flex;align-items:center;gap:10px;padding:16px 18px 0}
.card-h b{font-size:13.5px;color:var(--ink);font-weight:600}
.card-h span{margin-left:auto;font-size:10.53px}
.card-b{padding:14px 18px 18px}

/* ══ 일기 작성 카드 (시안4 의 작성 패널을 그대로 옮겨 온 것) ══════ */
.wpane{background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 34px 80px -40px rgba(44,70,54,.4),0 12px 30px -18px rgba(0,0,0,.1),
    inset 0 0 0 1.6px var(--point-line)}
.wtop{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px 24px;border-bottom:1px solid var(--line)}
.wtop b{font-size:15.39px;color:var(--ink);font-weight:600}
.wtop .wst{font-size:11.34px}
.wtop .wst.ok{color:var(--point);font-weight:600}
.wtabs{display:flex;gap:6px;padding:16px 20px 0;flex-wrap:wrap}
.wtab{flex:1 1 0;min-width:84px;border-radius:var(--r-xs);padding:11px 10px 9px;
  cursor:pointer;text-align:center;
  background:#f3f2ef;color:var(--body);font-size:13.5px;font-weight:500;
  transition:background .3s,color .3s;position:relative}
.wtab b{display:block;font-weight:inherit}
/* 먹은 시각은 **직접 고친다** — 탭이 곧 입력칸이다.
   `<button>` 안에는 입력칸을 넣을 수 없어 탭을 `role="tab"` 인 div 로 바꿨다.
   ⚠️ `type="time"` 은 쓰지 않는다 — 표시 형식이 **브라우저 로케일**을 따라가
   한국어 환경에서 `오후 06:50` 으로 나온다(`lang` 을 줘도 바뀌지 않는다).
   이 시안은 관리자 목록·발송 로그까지 전부 24시간제라 형식을 직접 맞춘다.
   숫자만 받아 `HH:MM` 으로 정리하고, 폰에서는 숫자 키패드가 뜬다. */
.wtime{display:block;width:100%;font-variant-numeric:tabular-nums;margin-top:3px;border:0;outline:0;background:none;padding:2px 0;
  font:inherit;font-size:10.53px;color:inherit;opacity:.8;text-align:center;cursor:text;
  border-radius:6px;transition:background .2s,opacity .2s}
.wtab:hover .wtime{background:rgba(0,0,0,.05)}
.wtab.on:hover .wtime{background:rgba(255,255,255,.14)}
.wtime:focus{opacity:1;background:rgba(0,0,0,.07);box-shadow:inset 0 0 0 1.4px var(--point)}
.wtab.on .wtime:focus{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.6)}
/* 비어 있으면 '기록 전' 이 흐리게 — 아직 안 적은 끼니가 한눈에 보인다 */
.wtime::placeholder{color:inherit;opacity:.55}
.wtab.t-empty .wtime{opacity:.6}
.wtab.on{background:var(--point);color:#fff}
.wtab .dot{position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;
  background:var(--point);opacity:.5}
.wtab.on .dot{background:#fff;opacity:.9}
.wtab.empty .dot{background:transparent;box-shadow:inset 0 0 0 1.2px rgba(0,0,0,.2)}
.wbody{padding:18px 24px 4px}
.wp{display:none}
.wp.on{display:block;animation:wfade .35s ease}
@keyframes wfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wp.on{animation:none}}
.wshots{display:flex;gap:10px;flex-wrap:wrap}
.wshot,.wadd{width:86px;height:86px;border-radius:var(--r-xs);flex:none}
.wshot{background:#f2f1ee;position:relative;background-size:cover;background-position:center}
.wdel{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.72);color:#fff;font-size:11.34px;line-height:1;display:grid;
  place-items:center;opacity:0;transition:opacity .2s}
.wshot:hover .wdel,.wdel:focus{opacity:1}
.wadd{border:1.6px dashed var(--point-line);color:var(--point);opacity:.72;font-size:19.44px;
  cursor:pointer;display:grid;place-items:center;background:#f2f1ee;
  transition:border-color .3s,color .3s,opacity .3s,background .3s}
.wadd:hover{border-color:var(--point);color:var(--point);opacity:1;background:var(--point-soft)}
.wadd[hidden]{display:none}
.whint{margin-top:11px;font-size:11.34px}
.wstatus{color:var(--ink);font-weight:500}
.wstatus:empty{display:none}
.wta{display:block;width:100%;border:0;outline:0;resize:vertical;margin-top:13px;
  background:var(--point-soft);border-radius:var(--r-xs);padding:16px 18px;
  font-size:13.77px;line-height:1.7;color:var(--ink);min-height:104px}
.wta::placeholder{color:rgba(0,0,0,.32)}
.wta:focus{box-shadow:inset 0 0 0 1.6px var(--point)}
.wcc{margin-top:8px;text-align:right;font-size:11.745px}
.wcc b{color:var(--point);font-weight:600}
.wcc.max b{color:var(--warn)}
.wfoot{display:flex;align-items:center;gap:14px;justify-content:flex-end;
  padding:16px 24px 22px;flex-wrap:wrap}
.wsim{margin-right:auto;font-size:10.935px}

/* ── 오늘의 컨디션 (오른쪽 카드) ────────────────────────────────── */
.conds{display:grid;gap:8px}
.wx{display:flex;align-items:center;gap:8px;cursor:text;background:#f4f3f0;
  border-radius:100px;padding:9px 16px}
.wx>span{font-size:11.34px;flex:none;min-width:2.8em}
.wx input{border:0;outline:0;background:none;padding:0;font-size:12.96px;
  font-weight:500;color:var(--ink);width:100%;min-width:2.4em}
.wx input::placeholder{color:rgba(0,0,0,.3);font-weight:400}
.wx:focus-within{box-shadow:inset 0 0 0 1.5px var(--point)}
.wx.num input{width:3.4em;flex:none;text-align:right}
.wx em{font-style:normal;font-size:11.16px;margin-left:-3px}
.wx select{border:0;outline:0;background:none;font-size:12.96px;font-weight:500;
  color:var(--ink);cursor:pointer;padding:0 2px 0 0;margin-right:auto}
.wx.water input{width:1.8em;min-width:1.8em;text-align:center;flex:none}
.wxb{width:20px;height:20px;border-radius:50%;flex:none;line-height:1;
  background:#fff;color:var(--ink);font-size:12.15px;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,color .2s}
.wxb:hover{background:var(--point);color:#fff;box-shadow:none}
.wx.water .wxml{font-style:normal;font-size:11.16px;margin-left:auto}
.wx.water.full{background:var(--point-soft)}
.wx.water.full .wxml{color:var(--point);font-weight:600}
.wchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.wchip{border-radius:100px;padding:7px 13px;font-size:10.935px;font-weight:500;
  background:#f4f3f0;color:var(--body);transition:background .25s,color .25s}
.wchip:hover{background:var(--cream3);color:var(--ink)}
.wchip.on{background:var(--point);color:#fff}

/* ── 이번 주 (달력 스트립) ──────────────────────────────────────── */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.wd{border-radius:12px;padding:9px 2px 8px;text-align:center;background:#f4f3f0;
  transition:background .25s,color .25s}
.wd i{display:block;font-style:normal;font-size:9.72px;opacity:.7}
.wd b{display:block;margin-top:3px;font-size:12.555px;color:var(--ink);font-weight:600}
.wd u{display:block;margin:5px auto 0;width:5px;height:5px;border-radius:50%;
  background:var(--point);text-decoration:none}
.wd.miss u{background:transparent;box-shadow:inset 0 0 0 1.2px rgba(0,0,0,.18)}
.wd.today{background:var(--point)}
.wd.today b,.wd.today i{color:#fff}
.wd.today u{background:#fff}
.wd.fu{opacity:.42}
.wsum{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:6px;font-size:10.935px}
.wsum b{color:var(--ink);font-size:12.15px;font-weight:600}

/* ── 다이어트코칭 ──────────────────────────────────────────────── */
.cmt{border-radius:var(--r-xs);background:var(--point-soft);padding:14px 16px;
  font-size:12.15px;line-height:1.75;color:var(--point)}
.cmt+.cmt{margin-top:8px}
.cmt .who{display:flex;align-items:center;gap:7px;margin-bottom:6px;
  font-size:10.53px;font-weight:600;opacity:.8}
.cmt .who u{margin-left:auto;text-decoration:none;font-weight:400}
.cmt.old{background:#f4f3f0;color:var(--body)}
.cmt.old .who{color:var(--ink)}
.cnone{font-size:11.34px;padding:12px 0 2px}

/* ── 알림 안내 줄 ───────────────────────────────────────────────── */
.notice{margin-top:clamp(12px,1.4vw,18px);border-radius:var(--r-sm);background:var(--cream2);
  padding:14px 18px;font-size:11.34px;line-height:1.7;display:flex;gap:10px;align-items:flex-start}
.notice svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--point)}
.notice b{color:var(--ink);font-weight:600}

/* ── 지난 기록 패널 (레일에서 전환) ─────────────────────────────── */
.view[hidden]{display:none}
.hist{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.hcard{background:#fff;border-radius:var(--r-sm);overflow:hidden;text-align:left;
  box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s cubic-bezier(.22,.8,.3,1),box-shadow .3s}
.hcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(44,70,54,.45)}
.hphotos{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;aspect-ratio:3/1.05;background:#f2f1ee}
.hphotos i{display:block;background-size:cover;background-position:center}
.hbody{padding:13px 15px 15px}
.hbody b{font-size:12.555px;color:var(--ink);font-weight:600}
.hmeta{margin-top:5px;font-size:10.53px}
.hmeta u{text-decoration:none;color:var(--point);font-weight:600}
.hmeta u.warn{color:var(--warn)}

/* ══════════════════════════════════════════════════════════════════
   ③ 주간 비교
   소개 페이지(`diary4.html`)의 **겹친 패널 연출을 통째로** 옮겼다 —
   CSS 는 그 파일의 같은 블록을 그대로 복사한 것이라 손대지 않았다.
   밝은 카드 = 이번 주 / 어두운 카드 = 비교 주(탭에서 고른 주).
   비스듬히 겹쳐 있다가 누르면 그 카드가 정면으로 펴진다.

   막대(운동)와 선(체중)이 한 그래프에 겹쳐 있어 축이 둘이다.
   보통은 피하는 형태지만, 이 판은 **요일마다 체중·운동·수면을 숫자로 그대로 찍어 둔다**
   → 값을 눈금에서 읽을 필요가 없어 축이 겹쳐도 잘못 읽히지 않는다.
   ══════════════════════════════════════════════════════════════════ */
/* ══ 겹친 패널 연출 ══════════════════════════════════════════════
   컴포넌트 소개 이미지(AI Model Comparison, Agapea)의 배치를 그대로 옮겼다 —
   왼쪽 타이틀 블록 + 비스듬히 겹친 패널 두 장 + 유리구슬 배경.
   원본이 같은 대시보드의 라이트/다크 테마를 겹쳐 놓은 자리에,
   여기서는 **오늘 기록지(밝게) 와 지난주 기록지(어둡게)** 를 겹쳐 놓았다.
   클릭하면 그 패널이 앞으로 나온다. */
.show{position:relative;overflow:hidden;border-radius:28px;
  background:linear-gradient(128deg,#fffdf9 0%,#f9f6ee 40%,#eaf0ea 78%,#dfe9e1 100%);
  padding:clamp(26px,3.2vw,44px)}
/* 잘라내기는 **배경 장식(후광)에만** 건다.
   전에는 .show 자체가 overflow:hidden 이라, 카드를 눌러 펴는 동안 회전하며 튀어나온
   모서리가 잘렸다(다 펴지고 나면 멀쩡해서 더 헷갈렸다). */
.show-bg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
/* 카드를 펴는 동안에만 잘라내기를 푼다 — 쉬고 있을 때의 구성(카드가 판 가장자리에서
   잘려 보이는 모양)은 그대로 두어야 한다. 후광은 .show-bg 가 계속 잘라 준다. */
.show:has(.show-stack.focusing){overflow:visible}
.show-orb{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 30%,#fff,rgba(255,255,255,0) 68%);opacity:.85}
.show-orb.a{width:520px;height:520px;right:-170px;top:-230px;
  background:radial-gradient(circle at 34% 34%,#fff 0%,rgba(255,255,255,.75) 42%,rgba(255,255,255,0) 72%)}
.show-orb.b{width:360px;height:360px;left:-140px;bottom:-120px;
  background:radial-gradient(circle at 40% 36%,#fff 0%,rgba(255,255,255,.6) 46%,rgba(255,255,255,0) 74%)}

/* 겹친 패널 두 장 — 원본 소개 이미지의 각도를 실측해 맞췄다.
   윗변 −3.4° / 아랫변 +2.1° / 왼쪽변 수직에서 +1.0°, 오른쪽 변이 왼쪽보다 11% 길다
   → 2D 회전이 아니라 **오른쪽이 앞으로 나오는 3D 원근**이다.
   perspective(1400px) rotateY(-13deg) 가 그 비율(≈1.11)을 만든다.
   공중에 뜬 느낌은 **크고 부드러운 그림자 두 겹**이 만든다. */
.show-stack{position:relative;width:100%;height:clamp(430px,38vw,560px);
  z-index:2;perspective:2000px}
.sp{position:absolute;cursor:pointer;
  border-radius:24px;padding:18px;
  transition:transform .6s cubic-bezier(.22,.8,.3,1),filter .6s;transform-origin:center}
.sp:focus-visible{outline:3px solid #3a5c48;outline-offset:10px}
.sp.dark{background:#1f3327}
.sp.light{background:#fffdf9}
/* 공중에 뜬 느낌 : 그림자 세 겹 */
.sp{box-shadow:0 80px 120px -40px rgba(30,45,36,.40),
  0 34px 60px -22px rgba(30,45,36,.24), 0 8px 18px -6px rgba(30,45,36,.12)}
/* 기울기 : 원본 실측(윗변 −5.2° · 아랫변 0° · 오른쪽 13% 큼)에 맞춘 값 */
.sp.dark{top:4%;right:14%;width:64%;z-index:1;
  transform:perspective(1200px) rotateY(-18deg) rotate(-2.4deg) scale(.99)}
.sp.light{top:30%;left:5%;width:64%;z-index:2;
  transform:perspective(1200px) rotateY(-18deg) rotate(-2.4deg)}
.sp.front{z-index:4;
  transform:perspective(1400px) rotateY(-12deg) rotate(-1.6deg) scale(1.02)}
.sp.back{z-index:1;filter:saturate(.94) brightness(.99);
  transform:perspective(1100px) rotateY(-21deg) rotate(-3deg) scale(.95)}
/* 클릭하면 그 카드만 **정면으로 펴지고 크게** 보인다 (다시 누르면 제자리).
   무대 높이를 auto 로 풀고 카드를 흐름 안에 넣어, 주간 그래프까지 잘리지 않게 한다. */
.sp{cursor:zoom-in}
.show-stack.focusing{height:auto}
/* 펴는 동안 : 폭은 곧바로 100% 가 되는데 회전만 천천히 풀려서, 도는 내내 카드가
   판 밖으로 크게 튀어나왔다. 펼 때는 회전을 끌지 않고 살짝 커지며 열리게 한다. */
.show-stack.focusing .sp{transition:none}
.sp.focus{animation:spopen .34s cubic-bezier(.22,.8,.3,1)}
@keyframes spopen{from{opacity:.55;transform:scale(.975)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sp.focus{animation:none}}
.sp.focus{position:relative;left:auto;right:auto;top:auto;width:100%;z-index:8;cursor:zoom-out;
  transform:none;filter:none;
  box-shadow:0 60px 100px -30px rgba(30,45,36,.34),0 20px 40px -14px rgba(30,45,36,.2)}
.show-stack.focusing .sp:not(.focus){opacity:0;pointer-events:none}
/* 정면일 때는 안쪽 글자·그래프도 키운다 — 이 상태에서 전부 읽는다 */
.sp.focus .sp-main{padding:clamp(6px,1vw,14px)}
.sp.focus h4{font-size:16.2px}
.sp.focus h4 i{font-size:11.34px}
.sp.focus .sp-eyebrow{font-size:10.53px}
.sp.focus .sp-tab,.sp.focus .sp-backl{font-size:11.34px;padding:7px 14px}
.sp.focus .sp-s{padding:12px 14px}
.sp.focus .sp-s span{font-size:10.53px}
.sp.focus .sp-s b{font-size:18.63px}
.sp.focus .sp-d{font-size:10.125px;padding:3px 9px}
.sp.focus .wk-plot{height:clamp(150px,17vw,230px)}
.sp.focus .wk-dot{width:8px;height:8px;margin:-4px 0 0 -4px}
.sp.focus .wk-day{font-size:11.34px}
.sp.focus .wk-cell .wk-w{font-size:12.555px}
.sp.focus .wk-cell .wk-m{font-size:10.125px}
.sp.focus .wk-legend{font-size:10.125px}
.sp.focus .sp-chip{font-size:11.34px}
.sp.focus .sp-cta .pill{font-size:11.34px}

.sp.focus .sp-star{width:28px;height:28px;font-size:11.34px}

.sp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid rgba(0,0,0,.08)}
.sp-eyebrow{font-size:9px;font-weight:600;letter-spacing:.16em;color:#3a5c48}
.sp h4{font-size:12.15px;margin-top:4px}
.sp h4 i{font-style:normal;font-size:9px;font-weight:500;margin-left:7px;color:#6f6f6f}
.sp.dark h4 i{color:#9fb3a6}
.sp.light h4{color:#000000}
.sp.dark h4{color:#fff}
/* 비교 탭 — 앞(이번 주) 카드에만. 누르면 **뒤 카드가 그 주로** 바뀐다. */
.sp-tabs{display:flex;gap:2px;border-radius:100px;padding:3px;background:#eceae5}
.sp-tab{border-radius:100px;padding:5px 10px;font-size:9px;color:#6f6f6f;
  transition:background .3s,color .3s}
.sp-tab.on{background:#fff;color:#2c4636;font-weight:600;box-shadow:0 1px 4px rgba(30,45,36,.14)}
.sp-backl{flex:none;border-radius:100px;padding:5px 10px;font-size:9px;
  background:rgba(255,255,255,.1);color:#bcd6c4}
.sp-backl b{margin-left:5px;color:#fff;font-weight:600}
/* 탭을 눌러도 바뀌는 것이 **뒤 카드**라 앞에서는 아무 일도 없어 보였다 →
   ① 앞 카드에도 "지금 견주는 대상"을 글자로 박고 ② 뒤 카드를 한 번 깜빡인다. */
/* 탭을 누른 결과를 **앞 카드 맨 위 한 줄**로 끌어온다.
   예전에는 뒤 카드만 바뀌어 조작이 죽은 것처럼 보였다(깜빡임으로 때우지 않는다). */
.sp-vs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:-2px 0 10px;font-size:10.53px;color:#3d5245}
.sp-vs b{color:#000000;font-weight:600}
.sp.dark .sp-vs{color:#9fb3a6}
.sp.dark .sp-vs b{color:#fff}
.sp-vs span{display:flex;gap:5px;flex-wrap:wrap}
.sp-vd{border-radius:100px;padding:2px 8px;font-size:9.72px;font-weight:600;white-space:nowrap}
.sp-vd.good{color:#2c4636;background:rgba(44,70,54,.11)}
.sp-vd.bad{color:#c0562f;background:rgba(192,86,47,.12)}
.sp-vd.same{color:#6f6f6f;background:rgba(0,0,0,.06)}
.sp.focus .sp-vs{font-size:12.555px;margin-bottom:14px}
.sp.focus .sp-vd{font-size:11.34px;padding:3px 10px}
/* 탭 자체가 데이터가 된다 — 누르기 전에도 어느 주가 얼마나 차이 나는지 보인다 */
.sp-tab{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.25}
.sp-tab i{font-style:normal}
.sp-tab u{text-decoration:none;font-size:8.1px;font-weight:600;color:#8c8c8c}
.sp-tab.on u{color:#2c4636}
.sp.focus .sp-tab u{font-size:10.125px}
/* 전면(클릭)일 때만 나오는 되돌아가기 버튼 */
.sp-close{display:none}
.sp.focus .sp-close{display:inline-flex;align-items:center;gap:6px;
  position:absolute;right:clamp(14px,1.6vw,22px);top:clamp(14px,1.6vw,22px);z-index:3;
  border-radius:100px;padding:9px 15px;font-size:11.34px;font-weight:600;
  background:#000000;color:#fff;box-shadow:0 6px 18px rgba(30,45,36,.28)}
.sp.focus .sp-close:hover{background:#3a5c48}
.sp.focus .sp-top{padding-right:clamp(120px,12vw,170px)}
.sp.dark.focus .sp-close{background:#fff;color:#000000}

/* 주간 요약 4개 — 차이 배지는 앞 카드에만 */
.sp-sums{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:12px}
.sp-s{border-radius:10px;padding:8px 10px}
.sp.light .sp-s{background:#f4f3f0}
.sp.dark .sp-s{background:rgba(255,255,255,.06)}
.sp-s span{display:block;font-size:8.5px;color:#8c8c8c}
.sp-s b{display:block;margin-top:2px;font-size:12.15px;font-weight:600;
  font-variant-numeric:tabular-nums}
.sp.light .sp-s b{color:#000000}
.sp.dark .sp-s b{color:#fff}
.sp-s b em{font-style:normal;font-size:.62em;font-weight:500;margin-left:2px;color:#8c8c8c}
.sp-d{display:inline-block;margin-top:4px;text-decoration:none;font-size:8.5px;font-weight:600;
  white-space:nowrap;border-radius:100px;padding:2px 7px}
.sp-d.good{color:#2c4636;background:rgba(44,70,54,.11)}
.sp-d.bad{color:#c0562f;background:rgba(192,86,47,.12)}
.sp-d.same{color:#6f6f6f;background:rgba(0,0,0,.06)}
.sp-d:empty{display:none}

/* ── 주간 그래프 : 막대 = 운동 시간, 선 = 체중 ─────────────────
   체중은 매일 재는 값이라 요일마다 점을 찍고 선으로 잇는다.
   두 카드의 눈금은 **모든 주를 통틀어** 잡아 겹쳐 놓고 견줄 수 있게 했다(JS). */
.wk-plot{position:relative;height:96px;transition:height .4s cubic-bezier(.22,.8,.3,1)}
.wk-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  align-items:stretch}
.wk-col{display:flex;align-items:flex-end}
.wk-bar{display:flex;align-items:flex-end;width:100%;height:100%;
  border-radius:5px 5px 2px 2px;overflow:hidden}
.wk-bar u{display:block;width:100%;height:0;border-radius:5px 5px 2px 2px;text-decoration:none;
  background:linear-gradient(180deg,rgba(76,115,89,.55),rgba(44,70,54,.2));
  transition:height .5s cubic-bezier(.22,.8,.3,1)}
.sp.dark .wk-bar u{background:linear-gradient(180deg,rgba(150,190,165,.42),rgba(44,70,54,.15))}
.wk-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wk-line polyline{fill:none;stroke:#2c4636;stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.sp.dark .wk-line polyline{stroke:#bcd6c4}
.wk-dots{position:absolute;inset:0;pointer-events:none}
.wk-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:#2c4636;box-shadow:0 0 0 2px #fff;transition:top .5s cubic-bezier(.22,.8,.3,1)}
.sp.dark .wk-dot{background:#bcd6c4;box-shadow:0 0 0 2px #1f3327}
.wk-dot[hidden]{display:none}
.wk-x{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.wk-cell{text-align:center}
.wk-day{display:block;font-size:9px;font-weight:600;color:#6f6f6f}
.sp.dark .wk-day{color:#9fb3a6}
.wk-cell .wk-w{display:block;margin-top:3px;font-size:9.72px;font-weight:600;
  font-variant-numeric:tabular-nums;color:#000000}
.sp.dark .wk-cell .wk-w{color:#fff}
.wk-cell .wk-m{display:block;margin-top:1px;font-size:8.5px;color:#8c8c8c}
.wk-cell .wk-s{display:block;margin-top:2px;font-size:8.1px;color:#a3a3a3}
.sp.dark .wk-cell .wk-s{color:#6f6f6f}
.sp.focus .wk-cell .wk-s{font-size:10.125px}
.wk-cell.today .wk-day{color:#2c4636}
.sp.dark .wk-cell.today .wk-day{color:#bcd6c4}
.wk-cell.today .wk-w{position:relative}
.wk-cell.empty .wk-w,.wk-cell.empty .wk-m{color:#b5b5b5}
.wk-legend{display:flex;gap:12px;margin-top:9px;font-size:8.5px;color:#8c8c8c}
.wk-lg{display:inline-flex;align-items:center;gap:4px}
.wk-lg::before{content:"";width:9px;height:6px;border-radius:2px;
  background:rgba(44,70,54,.34)}
.wk-lg.line::before{width:11px;height:2px;border-radius:2px;background:#2c4636}
.wk-lg.note::before{display:none}
.sp.dark .wk-lg.line::before{background:#bcd6c4}
/* 어두운 판에서는 막대 견본도 밝혀 준다 — 원본은 이 한 줄이 빠져 있어 거의 안 보였다 */
.sp.dark .wk-lg::before{background:rgba(188,214,196,.45)}

.sp-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:11px;padding:10px 12px;border-radius:14px}
.sp.light .sp-foot{background:#f4f3f0}
.sp.dark .sp-foot{background:rgba(255,255,255,.06)}
.sp-star{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;color:#3a5c48;background:rgba(44,70,54,.13);flex:none}
.sp-fchips{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.sp-chip{border-radius:100px;padding:3px 8px;font-size:9px;white-space:nowrap;color:#2c4636;
  background:rgba(44,70,54,.09)}
.sp-cta{margin-left:auto;white-space:nowrap}


.cmp-note{margin-top:18px;font-size:11.34px}

/* ══ 카드 안 계산 줄 ═══════════════════════════════════════════
   Framer *Calorie Burn* 재현물을 **겹쳐 뜬 기록지 카드 안으로 흡수**한 것(2026-08-16).
   따로 떠 있던 검은 2단 카드는 없앴다 — 이 섹션은 카드 한 장이 전부다.
   카드가 3D 로 기울어지므로 드래그 대신 **−/+ 버튼 + 드롭다운**만 쓴다.
   공식은 그대로 : kcal = MET × 3.5 × 체중(kg) ÷ 200 × 분 */
.pcal{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:10px;padding:9px 10px;border-radius:12px}
.sp.light .pcal{background:rgba(44,70,54,.05)}
.sp.dark .pcal{background:rgba(255,255,255,.06)}
.pc-l{font-size:9px;color:#8c8c8c}
.pc-sel{border:0;outline:0;border-radius:99px;padding:4px 8px;font:inherit;font-size:9px;
  font-weight:600;color:#2c4636;background:rgba(44,70,54,.11);cursor:pointer}
.pc-step{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:3px 6px;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sp.dark .pc-step{background:rgba(255,255,255,.08);box-shadow:none}
.pc-step button{width:15px;height:15px;border-radius:50%;line-height:1;font-size:10px;
  font-weight:600;color:#2c4636;background:rgba(44,70,54,.11);transition:background .2s,color .2s}
.pc-step button:hover{background:#3a5c48;color:#fff}
.pc-step input{width:2.1em;border:0;outline:0;background:none;padding:0;text-align:center;
  font:inherit;font-size:9.72px;font-weight:600;color:#000000}
.sp.dark .pc-step input{color:#fff}
.pc-step em{font-style:normal;font-size:8.1px;color:#8c8c8c}
.pc-arrow{font-size:9px;color:#8c8c8c}
.pc-out b{font-size:13.365px;font-weight:600;color:#2c4636;font-variant-numeric:tabular-nums}
.sp.dark .pc-out b{color:#bcd6c4}
.pc-out em{font-style:normal;font-size:8.1px;color:#8c8c8c;margin-left:2px}
.pc-eq{font-size:8.5px;color:#8c8c8c}
.pc-eq b{font-size:9px;color:#2c4636;font-weight:600;margin-right:3px}
.pc-goal{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:8.5px;color:#8c8c8c}
.pc-goal i{font-style:normal}
.pc-goal b{font-weight:600;color:#000000;font-variant-numeric:tabular-nums}
.sp.dark .pc-goal b{color:#fff}
.pc-goal b u{text-decoration:none}
.pc-bar{width:54px;height:4px;border-radius:99px;background:rgba(44,70,54,.16);overflow:hidden}
.pc-bar u{display:block;height:100%;width:0;border-radius:99px;text-decoration:none;
  background:linear-gradient(90deg,#4c7359,#2c4636);transition:width .4s cubic-bezier(.22,.8,.3,1)}
/* 정면(클릭)일 때는 조금 키워 읽기 쉽게 */
.sp.focus .pcal{padding:13px 15px;gap:10px}
.sp.focus .pc-l,.sp.focus .pc-sel,.sp.focus .pc-eq,.sp.focus .pc-goal{font-size:11.34px}
.sp.focus .pc-step input{font-size:12.555px}
.sp.focus .pc-step button{width:19px;height:19px;font-size:12.15px}
.sp.focus .pc-out b{font-size:18.63px}


/* ── 모달 · 토스트 ──────────────────────────────────────────────── */
.wmodal[hidden],.lightbox[hidden]{display:none}
.wmodal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px}
.wm-bg{position:absolute;inset:0;background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.wm-box{position:relative;width:min(440px,100%);background:#fff;border-radius:var(--r);
  padding:30px 28px 22px;box-shadow:0 24px 60px rgba(0,0,0,.28);
  animation:wmpop .24s cubic-bezier(.2,.9,.3,1)}
@keyframes wmpop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wm-box{animation:none}}
.wm-box h3{font-size:17.82px}
.wm-date{margin-top:5px;font-size:10.935px}
.wm-sum{margin:20px 0;padding-top:16px;border-top:1px solid var(--line)}
.wm-sum li{position:relative;padding-left:15px;font-size:12.15px;line-height:1.95;color:var(--ink)}
.wm-sum li::before{content:"";position:absolute;left:2px;top:.88em;width:5px;height:5px;
  border-radius:50%;background:var(--point)}
.wm-sum li.warn{color:var(--warn)}
.wm-sum li.warn::before{background:var(--warn)}
.wm-note{font-size:10.935px;line-height:1.7;background:var(--cream2);
  border-radius:var(--r-sm);padding:13px 15px}
.wm-act{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:22px}
.wtoast[hidden]{display:none}
.wtoast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:95;
  background:var(--point);color:#fff;border-radius:100px;padding:14px 24px;
  font-size:11.745px;font-weight:500;box-shadow:0 12px 30px rgba(0,0,0,.3)}

/* ══ 데스크톱에서 작성 카드를 세로로 키운다 ═══════════════════════
   이 화면에서 **가장 오래 머무는 곳**인데 오른쪽 열(컨디션·이번 주·코칭)보다
   한참 짧아 왼쪽 아래가 비어 보였다. 사진·메모 칸이 작아 답답하기도 했다.
   폰에서는 이미 화면을 꽉 쓰므로 **1181px 이상에서만** 키운다
   (1180px 아래는 `.cols` 가 한 열로 접히는 지점이다). */
@media (min-width:1181px){
  .wtop{padding:24px 28px}
  .wtop b{font-size:17.28px}
  .wtop .wst{font-size:12.15px}

  .wtabs{padding:20px 24px 0;gap:8px}
  .wtab{padding:16px 12px 14px;font-size:14.58px}
  .wtab .wtime{font-size:11.745px;margin-top:5px;padding:3px 0}
  .wtab .dot{top:10px;right:11px;width:7px;height:7px}

  .wbody{padding:22px 28px 6px}
  .wshot,.wadd{width:114px;height:114px;border-radius:14px}
  .wadd{font-size:23px}
  .wshots{gap:12px}
  .whint{margin-top:14px;font-size:11.745px}

  .wta{margin-top:16px;min-height:200px;padding:20px 22px;
    font-size:14.58px;line-height:1.75;border-radius:14px}
  .wcc{margin-top:10px;font-size:12.15px}

  .wfoot{padding:22px 28px 28px;gap:18px}
  .wsim{font-size:11.34px}
}

/* ══ 반응형 ═══════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .cols{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* 레일이 위로 올라와 가로 스크롤 탭이 된다.
     1fr 이 아니라 minmax(0,1fr) 여야 한다 — 1fr 은 최소 폭이 '내용 폭'이라
     표(min-width:560px)가 열을 통째로 넓혀 페이지가 가로로 넘친다. */
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{flex-direction:row;align-items:center;gap:6px;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--line);padding:10px 14px;
    position:sticky;top:58px;z-index:40}
  .rl{width:auto;flex:none;padding:9px 14px;font-size:12.15px}
  .rspace,.rnote{display:none}
}
/* 주간 비교 판 — 소개 페이지와 같은 지점에서 같은 방식으로 접는다 */
@media (max-width:810px){
  /* 겹친 패널을 기울이지 않고 위아래로 편다 — 소개 페이지와 같은 규칙 */
  .show{padding-bottom:clamp(24px,4vw,40px);min-height:0}
  .show-stack{position:static;width:100%;height:auto;display:grid;gap:16px;perspective:none}
  .sp,.sp.front,.sp.back{position:static;width:100%;transform:none;filter:none;opacity:1}
  .sp.front{box-shadow:0 16px 40px rgba(52,38,26,.22)}
  .sp.light{order:-1}          /* 위아래로 펴면 **이번 주**가 먼저 와야 한다 */
  .show-stack.focusing .sp:not(.focus){display:none}   /* 편 상태에서도 정면 보기는 살린다 */
  .sp-top{flex-direction:column}
  .sp-tabs{align-self:stretch}
  .sp-tab{flex:1}
  /* 요약 다섯 칸을 한 줄에 두면 폰에서 글자가 오른쪽으로 터진다 → 두 칸씩 */
  .sp-sums{grid-template-columns:repeat(2,1fr)}
  .sp-vs{font-size:11.34px}
  .wk-plot{height:120px}
  .wk-cell .wk-s{display:none}   /* 요일 칸이 좁아 세 줄은 겹친다 → 수면은 요약으로 본다 */
  .pcal{gap:6px}
  .pc-goal{margin-left:0}
  .pc-arrow{display:none}        /* 줄이 접히면 화살표가 허공을 가리킨다 */
  .sp-cta{margin-left:0;width:100%}
  .sp-cta .pill{width:100%;justify-content:center}
  /* 손가락으로 누르는 것들 — 폰에서 15px 짜리는 못 누른다 */
  .pc-step{padding:4px 6px}
  .pc-step button{width:28px;height:28px;font-size:14px}
  .sp-tab{padding:9px 12px}
  .pc-step input,.pc-sel{font-size:16px}
}
@media (max-width:640px){
  .abadge{display:none}
  .auser b{display:none}
  .hello{align-items:flex-start}
  .hdate{width:100%;justify-content:space-between}
  .wtabs{padding:14px 16px 0}
  .wbody{padding:16px 16px 4px}
  .wtop,.wfoot{padding-inline:16px}
  .wshot,.wadd{width:calc(33.333% - 7px);height:auto;aspect-ratio:1/1}
  .wfoot .pill{flex:1 1 auto;justify-content:center}
  .wsim{flex:1 0 100%;margin:0 0 4px;text-align:center}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr}
  .gbox h1{font-size:20.4px}
}
/* 폰에서 입력칸 글자를 16px 이상으로 — iOS 자동 확대 방지 */
@media (max-width:640px){
  .wta,.wx input,.wx select,.gs{font-size:16px}
  .wtime{font-size:13px}
  .wcc{font-size:11.745px}
}

/* 홈페이지로 나가는 링크 — 로그아웃 버튼과 같은 모양 (2026-09-05).
   일기를 쓰다가 홈페이지로 돌아갈 길이 없다는 지적에서 왔다. */
.ahome{display:inline-flex;align-items:center;text-decoration:none}
.abrand{text-decoration:none}
.abrand:hover b{text-decoration:underline;text-underline-offset:3px}