/* Smile Watching You 画面の見た目(要件定義書12-4、デザイン見本の方向C) */
:root {
  --bg: #F4F1EA;
  --ink: #1F1D1A;
  --sub: #5E5A52;
  --card: #FFFFFF;
  --line: #CFC9BC;
  --rust: #9A3A18;
  --rust-bg: #FBE9E2;
  --green: #2F6B4F;
  --yellow: #F2C94C;
  --on-rust: #FFFFFF;
  --btn-dark-text: #FBFAF6;
  --tobacco: #C8834A;
  /* 自分磨きの上限到達(12-4) */
  --stain-base: #E6D9A8;
  --stain-1: rgba(140,110,40,0.28);
  --stain-2: rgba(120,100,30,0.22);
  --stain-3: rgba(150,120,50,0.25);
  --stain-text: #6E6A2E;
  --stain-card: #F3ECCF;
  --stain-btn: #CDBB7A;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1F1D1A;
    --ink: #EDE8DD;
    --sub: #B5AE9F;
    --card: #2A2723;
    --line: #5A554C;
    --rust: #E0865F;
    --rust-bg: #3A2620;
    --green: #7DC39C;
    --on-rust: #1F1D1A;
    --btn-dark-text: #1F1D1A;
    /* 暗い画面の染み:明度を下げた黄土色。値は固定せず、文字とボタンが読める濃さを試作で確認する(12-4) */
    --stain-base: #3B3522;
    --stain-1: rgba(170,140,60,0.30);
    --stain-2: rgba(150,125,50,0.26);
    --stain-3: rgba(180,150,70,0.28);
    --stain-text: #D8CF8A;
    --stain-card: #332E1F;
    --stain-btn: #7A6A38;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font-family: inherit; font-size: 16px; color: var(--ink); }
button { cursor: pointer; }
button:disabled { opacity: 0.45; cursor: default; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* 数字:Zen Maru Gothicは等幅数字に対応していないため、数字は標準の書体の等幅数字で表示する(12-4) */
.num { font-family: -apple-system, 'Helvetica Neue', 'Hiragino Sans', sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; }

#app { min-height: 100%; }
.page {
  padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(120px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 16px;
  max-width: 480px; margin: 0 auto;
}
.page.no-tab { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

/* ホームの上部:🙂と吹き出し */
.head { display: flex; align-items: center; gap: 10px; }
.smile { font-size: 48px; line-height: 1; flex: none; }
.bubble {
  background: var(--card); border: 2px solid var(--ink); border-radius: 14px;
  padding: 6px 12px; font-size: 13px; font-weight: 700; line-height: 1.5;
}
.head-right { margin-left: auto; text-align: right; flex: none; }
.head-date { font-size: 12px; color: var(--sub); }
.head-mode { font-size: 15px; font-weight: 900; }

/* ポップな枠(ずらした影あり) */
.card {
  background: var(--card); border: 2px solid var(--ink); border-radius: 20px;
  box-shadow: 3px 3px 0 var(--ink); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.card-title { font-size: 13px; font-weight: 900; }
.big-date { font-size: 22px; font-weight: 900; }

/* 真面目な場所(平ら。影なし) */
.flat {
  background: var(--card); border: 2px solid var(--ink); border-radius: 16px;
  padding: 4px 16px; display: flex; flex-direction: column;
}
.flat-title { font-size: 13px; font-weight: 900; color: var(--sub); margin: 4px 4px -8px; }
.row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 0; }
.row + .row { border-top: 1px solid var(--line); }
.row-label { flex: 1 1 auto; font-size: 15px; font-weight: 700; }
.row-sub { display: block; font-size: 12px; color: var(--sub); font-weight: 500; }
.row-value { font-size: 15px; }
.note { font-size: 12px; color: var(--sub); line-height: 1.6; padding: 4px 0 10px; }
.line { font-size: 14px; color: var(--sub); line-height: 1.7; }

/* ボタン */
.btn {
  min-height: 52px; border-radius: 26px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--btn-dark-text); font-size: 16px; font-weight: 700;
  padding: 0 20px; width: 100%;
}
.btn.pop { box-shadow: 3px 3px 0 var(--ink); }
.btn.sub { background: var(--card); color: var(--ink); }
.btn.small { min-height: 44px; width: auto; font-size: 14px; padding: 0 16px; }
.btn.rust { background: var(--rust); border-color: var(--rust); color: var(--on-rust); }
.round {
  width: 44px; height: 44px; border-radius: 999px; background: var(--card);
  border: 2px solid var(--ink); font-size: 20px; flex: none; padding: 0;
}
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper .val { width: 56px; text-align: center; font-size: 20px; }
.stepper .unit { font-size: 13px; color: var(--sub); width: 1.5em; }
.link { background: none; border: none; color: var(--ink); font-size: 13px; text-decoration: underline; min-height: 44px; padding: 0 4px; }
.back { align-self: flex-start; background: none; border: none; font-size: 15px; font-weight: 700; min-height: 44px; padding: 0 4px 0 0; }
.page-title { font-size: 20px; font-weight: 900; margin: 0; }

/* 入力欄 */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; }
.input {
  min-height: 48px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card);
  padding: 0 12px; width: 100%;
}
textarea.input { padding: 10px 12px; min-height: 76px; resize: vertical; line-height: 1.5; }
.pin { font-size: 24px; letter-spacing: 0.5em; text-align: center; }
.price-input { width: 120px; text-align: right; }

/* エラー・警告の1行 */
.err { color: var(--rust); font-size: 13px; line-height: 1.6; }
.warn-box { background: var(--rust-bg); border: 2px solid var(--rust); border-radius: 16px; padding: 12px 14px; color: var(--rust); font-size: 13px; line-height: 1.6; }

/* 衝動のメッセージ */
.msg { display: flex; align-items: flex-start; gap: 8px; padding: 10px 0; }
.msg + .msg { border-top: 1px solid var(--line); }
.msg-body { flex: 1 1 auto; font-size: 14px; line-height: 1.6; word-break: break-all; padding-top: 10px; }

/* 祝日の一覧 */
details summary { min-height: 52px; display: flex; align-items: center; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '›'; margin-left: auto; transform: rotate(90deg); }
details[open] summary::after { transform: rotate(-90deg); }
.holiday { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.holiday-year { font-size: 13px; font-weight: 900; padding: 10px 0 2px; }

/* メニュー */
.menu-item { display: flex; align-items: center; gap: 12px; min-height: 56px; width: 100%; background: none; border: none; font-size: 16px; font-weight: 700; text-align: left; padding: 0; }
.menu-item + .menu-item { border-top: 1px solid var(--line); }
.menu-item .emoji { font-size: 22px; width: 28px; text-align: center; }
.menu-item .chev { margin-left: auto; color: var(--sub); }

/* タブ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 8px 0 env(safe-area-inset-bottom, 0px);
  background: var(--card); border-top: 2px solid var(--ink);
  display: flex; align-items: flex-start; justify-content: space-around;
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--sub); background: none; border: none; width: 56px; min-height: 44px; padding: 0; }
.tab.on { color: var(--ink); font-weight: 700; }
.tab svg { width: 22px; height: 22px; }
.urge-btn {
  margin-top: -36px; width: 72px; height: 72px; border-radius: 999px;
  background: var(--rust); color: var(--on-rust); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); font-size: 15px; font-weight: 700; padding: 0;
}

/* 保存後の短い表示(タブの上。自動で消える) */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 20;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--bg); border-radius: 999px;
  padding: 10px 18px; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.toast[hidden] { display: none; }

.center { text-align: center; }
.login-title { font-size: 22px; font-weight: 900; margin: 24px 0 0; }
.version { font-size: 11px; color: var(--sub); text-align: center; }

/* ---------- 段階1-2:ホームの入力と記録画面 ---------- */
.sub-label { font-size: 12px; color: var(--sub); }
.divider { border-top: 1px solid var(--line); }
.right { display: flex; justify-content: flex-end; }
.rust-text { color: var(--rust) !important; }
.done-mark { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--green); }
.btn.pop-y { box-shadow: 3px 3px 0 var(--yellow); font-weight: 900; }
.link.inline { min-height: 32px; font-size: 12px; padding: 0 2px; }

/* 選択ボタン(選択中は山吹色) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 44px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card);
  font-size: 14px; font-weight: 700; padding: 0 12px;
}
.chip.on { background: var(--yellow); color: #1F1D1A; font-weight: 900; }
.chip.grow { flex: 1 1 0; }
.chip.tall { min-height: 48px; }
.chip.plain { background: transparent; border-width: 1px; font-weight: 500; }

/* 体調の顔・飲みたい度 */
.faces { display: flex; gap: 6px; }
.face { flex: 1 1 0; height: 52px; border-radius: 16px; border: 2px solid var(--ink); background: var(--card); font-size: 24px; padding: 0; }
.faces.big .face { height: 64px; font-size: 26px; }
.face.num { font-size: 20px; }
.face.on { background: var(--yellow); color: #1F1D1A; }
.scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); }
.craving-last { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--sub); }

/* むくみ・胃もたれ・体重の行 */
.three { display: flex; align-items: center; gap: 8px; }
.three-label { width: 64px; flex: none; font-size: 13px; font-weight: 700; }
.three .chip { font-weight: 500; font-size: 15px; padding: 0 4px; }
.three .chip.on { font-weight: 700; }
.weight-input { flex: 1 1 0; min-width: 0; text-align: center; font-size: 22px; padding: 0 4px; }
.unit-s { font-size: 13px; color: var(--sub); }

/* 睡眠 */
.sleep-row { display: flex; gap: 8px; }
.sleep-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sleep-val { width: 64px; font-size: 22px; }

/* 1行要約 */
.mini-row { display: flex; gap: 8px; }
.card.mini { flex: 1 1 0; gap: 2px; padding: 12px; }
.mini-val { font-size: 26px; }
.mini-unit { font-size: 13px; color: var(--sub); font-weight: 500; }

/* 記録する・喫煙 */
.action-row { display: flex; gap: 8px; align-items: stretch; }
.action-row .btn { flex: 1 1 0; }
.smoke-btn {
  width: 96px; flex: none; min-height: 52px; border-radius: 26px; background: transparent; border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px 4px;
}
.smoke-plus { font-size: 17px; font-weight: 700; }
.smoke-one { display: inline-block; padding: 0 3px; margin-left: 1px; border-radius: 2px; background: #FFFFFF; color: #1F1D1A; border-right: 6px solid var(--tobacco); }
.smoke-count { font-size: 10px; color: var(--sub); white-space: nowrap; }

/* 深夜モードの入力状況 */
.st-card { gap: 0; }
.st-card .card-title { margin-bottom: 4px; }
.st-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 2px 0; }
.st-sep { border-top: 1.5px dashed var(--line); }
.dot { font-size: 14px; color: var(--sub); width: 14px; }
.dot.done { color: var(--green); }
.dot.miss { color: var(--rust); }
.st-name { width: 72px; flex: none; font-size: 14px; font-weight: 700; text-align: left; }
.link-name { background: none; border: none; padding: 0; min-height: 44px; }
.st-right { flex: 1 1 0; display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.st-val { font-size: 13px; font-weight: 700; }
.st-val.good { color: var(--green); }
.st-val.bad { color: var(--rust); }
.st-val.muted { color: var(--sub); font-weight: 500; }
.st-val.plain { color: var(--ink); }
.st-row.stained {
  margin: 0 -16px; padding: 2px 16px;
  background: radial-gradient(circle at 20% 40%, var(--stain-1) 0 14px, transparent 30px),
              radial-gradient(circle at 75% 60%, var(--stain-2) 0 18px, transparent 36px), var(--stain-base);
}
.fly { font-size: 16px; }

/* 記録の選択(S02):下から出る小画面 */
.overlay { position: fixed; inset: 0; background: rgba(31,29,26,0.45); z-index: 30; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-width: 480px; margin: 0 auto;
  background: var(--bg); border-top: 2px solid var(--ink); border-radius: 28px 28px 0 0;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px;
  animation: sheet-up .2s ease-out;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.grip { align-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--line); }
.sheet-title { font-size: 16px; font-weight: 900; }
.sheet-item { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; min-height: 44px; text-align: left; width: 100%; }
.sheet-emoji { font-size: 28px; }
.sheet-text { display: flex; flex-direction: column; }
.sheet-name { font-size: 16px; font-weight: 900; }
.sheet-sub { font-size: 11px; color: var(--sub); }
.sheet-item .chev { margin-left: auto; font-size: 18px; }

/* 記録画面(S03〜S06) */
.rec-head { display: flex; align-items: center; gap: 8px; }
.rec-date { font-size: 12px; color: var(--sub); margin-top: -8px; }
.fblock { display: flex; flex-direction: column; gap: 8px; }
.two-col { display: flex; gap: 12px; }
.two-col .fblock { flex: 1 1 0; }
.big-stepper { display: flex; align-items: center; gap: 12px; }
.round.big { width: 52px; height: 52px; font-size: 24px; }
.big-val { flex: 1 1 0; text-align: center; font-size: 44px; font-weight: 900; }
.big-unit { font-size: 16px; }
.amount-box { display: flex; align-items: center; gap: 8px; border: 2px solid var(--ink); border-radius: 16px; padding: 0 14px; min-height: 52px; background: var(--card); }
.amount-box input { flex: 1 1 0; min-width: 0; border: none; outline: none; background: transparent; font-size: 24px; }
.penalty-box { background: var(--card); border: 1.5px solid var(--rust); border-radius: 16px; padding: 14px 16px; font-size: 13px; color: var(--rust); }
.btn.save { min-height: 56px; border-radius: 28px; box-shadow: 3px 3px 0 var(--yellow); font-size: 17px; font-weight: 900; }

/* 自分磨き(S06)と上限到達の2段階(12-4。動きは付けない) */
.polish-card { align-items: center; }
.polish-count { font-size: 48px; font-weight: 900; }
.polish-unit { font-size: 18px; }
.stage-text { font-size: 13px; font-weight: 700; color: var(--stain-text); text-align: center; }
.btn.polish-btn { min-height: 72px; border-radius: 36px; box-shadow: 3px 3px 0 var(--ink); font-size: 22px; font-weight: 900; }
.polish-page { position: relative; }
.polish-page.stained .polish-card { background: var(--stain-card); }
.polish-page.stained .polish-btn { background: var(--stain-btn); color: var(--ink); border-color: var(--ink); }
.stain-bg { position: fixed; inset: 0; z-index: -1; }
.stain-bg.stage1, .stain-bg.stage2 {
  background:
    radial-gradient(circle at 15% 20%, var(--stain-1) 0 44px, transparent 80px),
    radial-gradient(circle at 82% 34%, var(--stain-2) 0 60px, transparent 104px),
    radial-gradient(circle at 34% 76%, var(--stain-3) 0 54px, transparent 96px),
    radial-gradient(circle at 70% 88%, var(--stain-1) 0 40px, transparent 76px),
    radial-gradient(circle at 55% 52%, var(--stain-2) 0 36px, transparent 70px),
    radial-gradient(circle at 8% 58%, var(--stain-3) 0 30px, transparent 60px),
    var(--stain-base);
}
.smell { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; display: flex; justify-content: space-around; z-index: -1; pointer-events: none; }
.smell svg { width: 44px; height: 30px; stroke: var(--stain-text); }
.fly-abs { position: fixed; font-size: 20px; z-index: -1; pointer-events: none; }
.hairs { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; stroke: var(--stain-text); }