/* กินได้มั้ย — ลายเส้นวาดมือ ตีมตาชั่ง+จาน · มือถือมาก่อน
   สเปก: DESIGN.md · ปรับตามงานวิจัย 15 ส.ค. (mobile-first · เว็บระดับโลก · แอปแคล · ตัวอักษรไทย · in-app browser)
   ห้าม: gradient · glass · box-shadow · การ์ดเรียงเป็นบอร์ด · สีแดงที่แปลว่า "ผิด" */

@font-face {
  font-family: "Itim";
  src: url("fonts/itim.woff2") format("woff2"), url("fonts/itim.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
  /* จำกัดช่วงอักขระ — ตัวไหนไม่มีในฟอนต์ ให้ตกไปฟอนต์ไทยของระบบ ไม่ใช่ฟอนต์ละติน */
  unicode-range: U+0E01-0E5B, U+0020-007E, U+00A0-00FF, U+2010-205E, U+20B8-20BA;
}

:root {
  /* ── สี ── */
  --paper:    #efe6d0;
  --paper-2:  #f6efdd;
  --ink:      #1e2c4d;
  --ink-soft: #6b6656;
  --marker:   #c2331f;   /* ปากกาแดง = ลายเซ็นแบรนด์ (วงกลม/เครื่องหมาย ?) — ห้ามใช้แปลว่า "เกิน/ผิด" */
  --ok:       #2f6b46;
  --warn:     #9a6212;   /* "ต้องแลกอะไรสักอย่าง" — อุ่น ไม่ใช่สัญญาณอันตราย */
  --rule:     #cbb894;

  /* ── ตัวอักษร: 6 ขนาดทั้งเว็บ ห้ามมีขนาดที่ 7 ── */
  --t-hero:    clamp(2rem, 8.4vw, 2.3rem);              /* คำตัดสิน — ครั้งเดียวต่อหน้าจอ */
  --t-display: clamp(1.4rem, 5.4vw, 1.6rem);            /* หัวข้อหน้าจอ */
  --t-lead:    1.2rem;                                  /* ประโยคขยาย · ตัวเลขในตาราง */
  --t-body:    clamp(1.0625rem, 1rem + .5vw, 1.1875rem);/* เนื้อความ 17→19px */
  --t-ui:      1.0625rem;                               /* ปุ่ม ชิป แถว — 17px (ต่ำกว่า 16 iOS ซูมเอง) */
  --t-meta:    .9375rem;                                /* คำกำกับ 15px = พื้นขั้นต่ำของไทย */

  /* ── ระยะบรรทัด: ไทยต้องสูงกว่าฝรั่ง เพราะสระ/วรรณยุกต์ซ้อนบน-ล่าง ── */
  --lh-display: 1.25;
  --lh-ui:      1.6;
  --lh-body:    1.78;

  --hand: "Itim", "Noto Sans Thai", "Thonburi", "Krungthep", system-ui, sans-serif;
  --body: "Sukhumvit Set", "Noto Sans Thai", "Thonburi", -apple-system, system-ui, sans-serif;

  --gutter: 1rem;
  --bar-h: 4.6rem;
  --ease: cubic-bezier(.17, .67, .2, 1);
}

@media (min-width: 48rem) { :root { --gutter: 2rem; } }

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1b201d; --paper-2: #242a26; --ink: #ece5d4; --ink-soft: #a39d8b;
    --marker: #e2705c; --ok: #7fbf95; --warn: #d9a83f; --rule: #3d453e;
  }
}

* { box-sizing: border-box; letter-spacing: 0; }   /* ไทยห้าม letter-spacing สระจะหลุดจากพยัญชนะ */
/* .intro/.bar ตั้ง display:flex ⇒ ทับ [hidden] ของเบราว์เซอร์ ต้องบังคับซ่อนเอง */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;  /* กัน iOS ขยายตัวอักษรตอนหมุนจอ */
  overscroll-behavior-y: contain;                           /* กันลากลงแล้วรีเฟรช = คำตอบหาย */
  hyphens: none;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: var(--lh-ui);
  font-synthesis: none;              /* Itim มีน้ำหนักเดียว — bold ปลอมทำให้วรรณยุกต์เละ */
  word-break: normal; line-break: auto; overflow-wrap: break-word;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
body.no-bar { padding-bottom: 1rem; }

body::after {   /* เกรนกระดาษ */
  content: ""; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
main { max-width: 33rem; margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-left)) 2.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── ทุกอย่างที่แตะได้ ── */
button, a, input, select, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-family: inherit; }
button { font-size: var(--t-ui); line-height: var(--lh-ui); }
.btn, .chip, .sorts button, .nav button, .row, .leochip, .leorow, .quota, .bar__main, .bar__side {
  transition: transform 120ms var(--ease), background 120ms var(--ease), color 120ms var(--ease);
}
.btn:active, .chip:active, .sorts button:active, .nav button:active,
.row:active, .leochip:active, .leorow:active, .quota:active,
.bar__main:active, .bar__side:active { transform: scale(.97); }

/* ── หัวกระดาษ ── */
.mast { max-width: 33rem; margin: 0 auto; padding: 1.3rem var(--gutter) .3rem; }
.wordmark-btn { display: block; min-height: 48px; padding: 0; background: 0; border: 0; text-align: left; color: inherit; cursor: pointer; }
.wordmark { display: block; font-family: var(--hand); font-size: var(--t-display); line-height: var(--lh-display); }
.wordmark em { font-style: normal; color: var(--marker); }
.byline { margin: 0; color: var(--ink-soft); font-size: var(--t-meta); }
.byline strong { color: var(--ink); font-weight: 600; }

/* ── ตัวอักษรร่วม ── */
.screen-h {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-family: var(--hand); font-weight: 400; font-size: var(--t-display);
  line-height: var(--lh-display); margin: 1.5rem 0 .6rem;
}
.screen-h--sm { font-size: var(--t-lead); color: var(--ink-soft); margin: 1.4rem 0 .5rem; }
.lead { font-size: var(--t-lead); line-height: 1.55; margin: 0 0 1rem; max-inline-size: 26ch; }
.meta { font-size: var(--t-meta); color: var(--ink-soft); line-height: var(--lh-ui); }
.meta--center { text-align: center; }
.cut { width: 2.4rem; height: auto; color: var(--rule); flex: 0 0 auto; }

/* ── ปุ่ม ── */
.btn {
  display: block; width: 100%; min-height: 52px; cursor: pointer; border: 0;
  font-family: var(--hand); font-size: var(--t-display); line-height: 1.3; padding: .7rem 1rem;
  border-radius: 26px 22px 28px 20px / 20px 26px 20px 24px;  /* ขอบเบี้ยวคนละมุม = ไม่เหมือนเทมเพลต */
}
.btn--primary { color: var(--paper-2); background: var(--marker); }
.btn--ghost {
  color: var(--ink); background: transparent; border: 2px solid var(--rule);
  font-family: var(--body); font-size: var(--t-ui); min-height: 48px;
}

/* ── หน้าเปิด ── */
.intro { min-height: 70vh; min-height: 70svh; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: .5rem 0 1.5rem; }
.scale--hero { max-width: 15rem; margin: 0 auto 1.1rem; }
.scale--hero .arm { animation: sway 5.5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-9deg); } to { transform: rotate(-5deg); } }
.intro__h { font-family: var(--hand); font-weight: 400; font-size: var(--t-hero); line-height: var(--lh-display); margin: 0 auto .5rem; max-inline-size: 18ch; }
.intro__h b { color: var(--marker); font-weight: 400; }
.intro__p { margin: 0 auto 1.5rem; color: var(--ink-soft); max-inline-size: 24ch; }
.intro .btn { max-width: 20rem; margin: 0 auto; }

/* ── ฟอร์ม ── */
.livequota { font-family: var(--hand); font-size: var(--t-lead); margin: 0 0 1.2rem; }
.livequota b { font-size: var(--t-hero); color: var(--marker); }
.field { border: 0; padding: 0; margin: 0 0 1.3rem; }
.field legend, .field__label { display: block; padding: 0; margin-bottom: .35rem; font-size: var(--t-meta); color: var(--ink-soft); }
.field input, .field select {
  width: 100%; min-height: 52px; height: auto;      /* ห้ามล็อกความสูง สระไทยจะโดนตัดหัว-ท้าย */
  font-family: var(--hand); font-size: var(--t-display); line-height: 1.5;
  padding: .5rem .2rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--rule);
  border-radius: 0; -webkit-appearance: none;
}
.field input:focus, .field select:focus { outline: 0; border-bottom-color: var(--marker); }
.field input::placeholder { color: var(--rule); }

.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.seg--3 { grid-template-columns: repeat(3, 1fr); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: .5rem .4rem; font-size: var(--t-ui);
  border: 1.6px solid var(--rule); border-radius: 14px 12px 15px 11px / 12px 15px 11px 14px;
}
.seg input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--marker); outline-offset: 2px; }

.more { margin: -.3rem 0 1.2rem; }
.more summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; color: var(--ink-soft); font-size: var(--t-meta); }
.more__grid { display: grid; gap: .3rem; padding: .5rem 0 0; }

/* ── โควต้า (ทั้งแถบแตะเพื่อแก้) ── */
.quota {
  display: block; width: 100%; text-align: left; cursor: pointer; color: inherit;
  background: 0; border: 0; border-bottom: 2px solid var(--ink);
  padding: .9rem .1rem .7rem; margin: .5rem 0 0;
}
.quota__label { display: block; font-size: var(--t-meta); color: var(--ink-soft); }
.quota__row { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.quota__num { font-family: var(--hand); font-weight: 400; font-size: var(--t-hero); line-height: 1.15; color: var(--marker); }
.quota__edit { margin-left: auto; font-size: var(--t-meta); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ── BMR/TDEE ย่อ: เห็นทันทีไม่ต้องกด (ฉบับเต็มอยู่ในแผงข้างล่าง) ── */
.qstat { margin: .7rem 0 .2rem; padding: 0; }
.qstat__i { display: flex; align-items: baseline; gap: .5rem; padding: .2rem 0; }
.qstat dt { flex: 0 0 auto; font-size: var(--t-meta); color: var(--ink-soft); }
.qstat dt b { font-family: var(--hand); font-weight: 400; font-size: var(--t-lead); color: var(--ink); }
.qstat dd { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-meta); line-height: var(--lh-ui); color: var(--ink-soft); }
.qstat__note { margin: .3rem 0 0; font-size: var(--t-meta); line-height: var(--lh-ui); color: var(--ink-soft); }

/* ── ที่มาของเลข (ปิดไว้ กางเองเมื่ออยากรู้) ── */
.qmath { margin: .2rem 0 .1rem; }
.qmath > summary {
  display: flex; align-items: center; min-height: 48px; cursor: pointer;
  font-size: var(--t-meta); color: var(--ink-soft);
}
.qmath > summary::marker { color: var(--rule); }
.qmath__body { padding: 0 0 .4rem; border-left: 2px solid var(--rule); padding-left: .85rem; margin: 0 0 .3rem; }
.qmath__row { padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.qmath__row:last-of-type { border-bottom: 0; }
.qmath__head { display: block; font-family: var(--hand); font-weight: 400; font-size: var(--t-lead); line-height: var(--lh-display); color: var(--ink); }
.qmath__note { display: block; margin-top: .15rem; font-size: var(--t-meta); line-height: var(--lh-body); color: var(--ink-soft); }
.qmath__lead { margin: .1rem 0 .6rem; font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); }
.qmath__lead b { color: var(--marker); }
.qmath__foot { margin: .5rem 0 0; font-size: var(--t-meta); line-height: var(--lh-body); color: var(--ink-soft); }

/* ── ค้นหา ── */
.search { margin: 1rem 0 .2rem; }
.search input {
  width: 100%; min-height: 52px; height: auto;
  font-size: var(--t-ui); line-height: 1.5; padding: .8rem .95rem;
  color: var(--ink); background: var(--paper-2);
  border: 1.6px solid var(--rule);
  border-radius: 18px 14px 20px 15px / 14px 18px 15px 19px; -webkit-appearance: none;
}
.search input:focus { outline: 2px solid var(--marker); outline-offset: 1px; }

/* ── ชิปแตะเร็ว (ทางที่ไม่ต้องพิมพ์) ── */
.chips-wrap { margin-top: .3rem; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
  min-height: 48px; display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .9rem; font-size: var(--t-ui); cursor: pointer;
  color: var(--ink); background: var(--paper-2); border: 1.6px solid var(--rule);
  border-radius: 16px 20px 14px 18px / 18px 14px 20px 15px;
}
/* หน่วยต่อท้ายตัวเลข — เบากว่าเลข ไม่แย่งสายตา แต่ต้องมี ไม่งั้นเลขลอยไม่รู้ว่าอะไร */
.chip small, .mealitems li small { font-size: var(--t-meta); color: var(--ink-soft); }
.chip:nth-child(2n) { transform: rotate(-.7deg); }
.chip:nth-child(3n) { transform: rotate(.5deg); }
.chip:nth-child(2n):active, .chip:nth-child(3n):active { transform: scale(.97); }

.sorts { display: flex; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.sorts button {
  min-height: 44px; padding: .3rem .85rem; font-size: var(--t-meta); cursor: pointer;
  color: var(--ink-soft); background: transparent; border: 1.5px solid var(--rule);
  border-radius: 14px 11px 15px 10px / 11px 14px 10px 13px;
}
.sorts button.on { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.linky {
  margin-left: auto; min-height: 44px; padding: 0 .2rem; cursor: pointer;
  font-size: var(--t-meta); color: var(--marker); background: 0; border: 0;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── จานลีโอ (แถบเลื่อน) ── */
.leostrip { display: flex; gap: .55rem; overflow-x: auto; padding: .2rem 0 .5rem; scrollbar-width: none; overscroll-behavior-x: contain; }
.leostrip::-webkit-scrollbar { display: none; }
.leochip {
  flex: 0 0 auto; min-height: 60px; text-align: left; cursor: pointer;
  padding: .5rem .85rem; color: var(--ink); background: transparent;
  border: 1.6px solid var(--ink); border-radius: 16px 20px 14px 18px / 18px 14px 20px 15px;
}
.leochip b { display: block; font-family: var(--hand); font-weight: 400; font-size: var(--t-ui); }
.leochip small { display: block; font-size: var(--t-meta); color: var(--ink-soft); }

/* ── รายการจาน: แถวสูงเท่ากัน ไม่มีเส้นคั่นทุกแถว (เส้นทุกแถว = หน้าตาสเปรดชีต) ── */
.list { list-style: none; margin: .2rem 0 0; padding: 0; }
.list li + li { margin-top: .5rem; }
.row {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 76px;
  text-align: left; cursor: pointer; color: inherit;
  padding: .6rem .7rem; background: var(--paper-2); border: 0;
  border-radius: 18px 14px 20px 15px / 14px 18px 15px 19px;
}
.row--feature { min-height: 104px; border: 2px solid var(--ink); }
.glyph { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; color: var(--ink-soft); }
.list li:nth-child(3n) .glyph { transform: rotate(7deg); }
.list li:nth-child(3n+1) .glyph { transform: rotate(-5deg); }
.row__body { flex: 1 1 auto; min-width: 0; }
.row__name { display: block; font-size: var(--t-ui); font-weight: 600; }
.row__tag { display: block; font-size: var(--t-meta); color: var(--ink-soft); }
.row__kcal { flex: 0 0 auto; font-family: var(--hand); font-size: var(--t-display); text-align: right; }
.row__kcal small { display: block; font-family: var(--body); font-size: var(--t-meta); color: var(--ink-soft); }

/* ── แคลมาจากไหน ── */
.parts { margin: 1.2rem 0 .4rem; }
.parts__h { margin: 0 0 .5rem; font-family: var(--hand); font-weight: 400; font-size: var(--t-lead); }
.parts__list { list-style: none; margin: 0; padding: 0; }
.part {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  gap: 0 .6rem; padding: .5rem .6rem; margin-bottom: .3rem;
  border: 1.5px solid var(--rule); border-radius: 10px 12px 11px 13px;   /* มุมไม่เท่ากัน = ลายมือ ไม่ใช่เทมเพลต */
}
/* แถบพื้นหลัง = สัดส่วนแคลของส่วนนั้น อ่านได้โดยไม่ต้องดูเลข */
.part::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%);
  background: var(--paper-2); border-radius: 9px 0 0 9px; z-index: 0;
}
.part > * { position: relative; z-index: 1; }
.part__name { font-size: var(--t-ui); line-height: var(--lh-ui); }
.part__name small { color: var(--ink-soft); font-size: var(--t-meta); }
.part__kcal { font-family: var(--hand); font-size: var(--t-lead); text-align: right; white-space: nowrap; }
.part__kcal small { margin-left: .25rem; font-family: var(--body); font-size: var(--t-meta); color: var(--ink-soft); }
.part__macro { grid-column: 1 / -1; font-size: var(--t-meta); color: var(--ink-soft); }
.parts__foot { margin: .5rem 0 0; font-size: var(--t-meta); line-height: var(--lh-body); color: var(--ink-soft); }

.empty { padding: 1.2rem .2rem; }
.empty h3 { font-family: var(--hand); font-weight: 400; font-size: var(--t-lead); margin: 0 0 .6rem; }

/* ── ตาชั่ง ── */
.result__dish { margin: 1rem 0 .2rem; font-size: var(--t-meta); color: var(--ink-soft); }
.scale { margin: .4rem auto .2rem; max-width: 18rem; color: var(--ink); }
.scale svg { display: block; width: 100%; height: auto; overflow: visible; }
@supports (transform-box: view-box) {
  .arm  { transform: rotate(var(--tilt, 0deg)); transform-box: view-box; transform-origin: 110.5px 45px; transition: transform .75s var(--ease); }
  .hang { transform: rotate(calc(-1 * var(--tilt, 0deg))); transform-box: view-box; transition: transform .75s var(--ease); }
  .hang--l { transform-origin: 41px 46px; }
  .hang--r { transform-origin: 180px 46px; }
}
.pan-num { font-family: var(--hand); font-size: 14px; text-anchor: middle; fill: var(--ink); }
.pan-cap { font-family: var(--body); font-size: 9px; text-anchor: middle; fill: var(--ink-soft); }

/* ── คำตัดสิน = ของชิ้นเดียวที่ใหญ่สุดในหน้าจอ ── */
.verdictwrap { position: relative; display: inline-block; padding: .8rem 2.2rem .9rem 2.3rem; margin: 0 0 0 -.9rem; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--marker); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ring path { stroke-dasharray: 900; stroke-dashoffset: 900; }
.ring.draw path { animation: ink .55s var(--ease) forwards; }
@keyframes ink { to { stroke-dashoffset: 0; } }
.verdictwrap[data-lines="1"] { border-bottom: 0; }
.verdictwrap:not([data-lines="1"]) { padding: .2rem .3rem .5rem 0; margin-left: 0; border-bottom: 3px solid currentColor; }
.verdictwrap:not([data-lines="1"]) .ring { display: none; }
.verdict {
  position: relative; margin: 0; max-inline-size: 16ch;
  font-family: var(--hand); font-weight: 400;
  font-size: var(--t-hero); line-height: var(--lh-display); color: var(--ok);
}
.verdict[data-tone="tight"] { color: var(--warn); }
.verdict[data-tone="big"]   { color: var(--ink); }   /* กินเกินโควต้า ≠ ความผิด — ห้ามใช้แดง */

.provenance {
  display: inline-flex; align-items: center; gap: .4rem; margin: .2rem 0 1rem;
  font-size: var(--t-meta); color: var(--ink-soft);
  border: 1.5px solid var(--rule); border-radius: 12px 9px 13px 8px / 9px 12px 8px 12px;
  padding: .3rem .7rem;
}
.provenance b { color: var(--ink); font-weight: 600; }

/* ── ตัวเลข ── */
.tally {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .5rem; row-gap: 1rem;
  margin: 0; padding: 1rem 0; border-top: 2px solid var(--ink); border-bottom: 2px dotted var(--rule);
}
.tally div { min-width: 0; }
.tally dt { font-size: var(--t-meta); color: var(--ink-soft); }
.tally dd { margin: .1rem 0 0; font-size: var(--t-meta); }
.tally b { font-family: var(--hand); font-weight: 400; font-size: var(--t-display); }
.tally small { display: block; color: var(--ink-soft); font-size: var(--t-meta); }
.d { display: inline-block; width: .63em; text-align: center; }  /* Itim เลขความกว้างไม่เท่ากัน ต้องบังคับเอง */

.pencil { margin: 1rem 0 0; padding-left: .85rem; border-left: 3px solid var(--marker); line-height: var(--lh-body); }

.mealitems { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.mealitems li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px dotted var(--rule); }
.mealitems li span { flex: 1 1 auto; min-width: 0; font-size: var(--t-ui); }
.mealitems li b { font-family: var(--hand); font-weight: 400; font-size: var(--t-lead); }
.mealitems .x { min-width: 48px; min-height: 48px; font-size: var(--t-display); color: var(--marker); background: 0; border: 0; cursor: pointer; }
.mealitems .mult { font-family: var(--hand); color: var(--marker); }

/* ── ปุ่มเพิ่ม/ลดจำนวนจาน (กินซ้ำได้) ── */
.step { display: inline-flex; gap: .25rem; flex: 0 0 auto; }
.step__b {
  min-width: 44px; min-height: 44px; padding: 0; cursor: pointer;
  font-family: var(--hand); font-size: var(--t-lead); line-height: 1;
  color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--rule);
  border-radius: 11px 9px 12px 10px;   /* มุมไม่เท่ากันให้เข้ากับของอื่นในหน้า */
}
.step__b:active { transform: scale(.94); }
.inmeal {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin: .8rem 0 0; padding: .5rem .7rem;
  font-size: var(--t-ui); color: var(--ink);
  border: 1.5px dashed var(--rule); border-radius: 12px 10px 13px 11px;
}
.inmeal b { font-family: var(--hand); font-size: var(--t-lead); color: var(--marker); }
.clearmeal {
  display: block; margin: -.6rem 0 1.2rem; min-height: 44px; padding: 0;
  font-size: var(--t-meta); color: var(--ink-soft); background: 0; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

.leobox { margin: 1.3rem 0 0; padding: 1rem 0 .2rem; border-top: 2px dotted var(--rule); }
.stamp {
  display: inline-block; font-family: var(--hand); font-size: var(--t-ui); color: var(--ok);
  padding: .1rem .7rem .15rem; border: 2px solid var(--ok);
  border-radius: 12px 9px 13px 8px / 9px 12px 8px 12px; transform: rotate(-2deg);
}
.leobox p, .hook p { margin: .8rem 0 0; line-height: var(--lh-body); }
.hook { margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 2px dotted var(--rule); }
.hook p { margin: 0; }
#tune-btn { margin: 1.2rem 0 0; }

.linecta {
  display: block; margin: 1.2rem 0 0; padding: .9rem 1.1rem; text-decoration: none;
  color: var(--paper); background: var(--ink);
  border-radius: 22px 18px 24px 17px / 17px 22px 18px 21px;
}
.linecta span { display: block; font-family: var(--hand); font-size: var(--t-lead); }
.linecta small { font-size: var(--t-meta); opacity: .85; }

/* ── ตารางจานลีโอ ── */
.leotable { list-style: none; margin: .6rem 0 0; padding: 0; }
.leotable li + li { margin-top: .5rem; }
.leorow {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 76px;
  text-align: left; color: inherit; cursor: pointer;
  padding: .6rem .7rem; background: var(--paper-2); border: 0;
  border-radius: 18px 14px 20px 15px / 14px 18px 15px 19px;
}
.leorow__ep {
  flex: 0 0 auto; font-family: var(--hand); font-size: var(--t-ui);
  color: var(--paper); background: var(--ink); padding: .1rem .5rem;
  border-radius: 9px 7px 10px 6px / 7px 10px 6px 9px; transform: rotate(-1.5deg);
}
.leorow__name { flex: 1 1 auto; min-width: 0; font-size: var(--t-ui); font-weight: 600; }
.leorow__name small { display: block; font-weight: 400; font-size: var(--t-meta); color: var(--ink-soft); }
.leorow__nums { flex: 0 0 auto; text-align: right; font-size: var(--t-meta); color: var(--ink-soft); }
.leorow__nums b { display: block; font-family: var(--hand); font-weight: 400; font-size: var(--t-display); color: var(--ink); }

/* ── หน้าทำไมไม่อ้วน ── */
.why__block { margin: 1.5rem 0; padding-bottom: 1.3rem; border-bottom: 2px dotted var(--rule); }
.why__block:last-of-type { border-bottom: 0; }
.why__ic { width: 3.2rem; height: auto; color: var(--marker); display: block; margin-bottom: .3rem; }
.why__block h3 { font-family: var(--hand); font-weight: 400; font-size: var(--t-lead); margin: 0 0 .4rem; line-height: var(--lh-display); }
.why__block p { margin: 0 0 .7rem; line-height: var(--lh-body); }
.why__block b { color: var(--marker); font-weight: 600; }
.why__take { padding-left: .85rem; border-left: 3px solid var(--ink); }

/* ── แถบล่างติดจอ: ปุ่มหลักอยู่ในระยะนิ้วโป้ง ── */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; gap: .5rem; align-items: stretch;
  padding: .6rem max(var(--gutter), env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 2px solid var(--ink);
}
.bar__main {
  flex: 1 1 auto; min-height: 52px; cursor: pointer; border: 0;
  font-family: var(--hand); font-size: var(--t-display);
  color: var(--paper-2); background: var(--marker);
  border-radius: 22px 18px 24px 17px / 17px 22px 18px 21px;
}
.bar__back, .bar__side {
  flex: 0 0 auto; min-width: 56px; min-height: 52px; cursor: pointer; padding: 0 .9rem;
  font-family: var(--hand); font-size: var(--t-ui);
  color: var(--ink); background: transparent; border: 2px solid var(--ink);
  border-radius: 18px 22px 16px 20px / 20px 16px 22px 17px;
}
.bar__side.on { color: var(--paper); background: var(--ink); }
@media (max-height: 30rem) { .bar { position: static; } body { padding-bottom: 1rem; } }

/* ── ท้ายหน้า ── */
.foot { max-width: 33rem; margin: 0 auto; padding: 1.4rem var(--gutter) 2rem; color: var(--ink-soft); font-size: var(--t-meta); line-height: var(--lh-ui); }
.nav { display: flex; gap: .6rem; justify-content: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.nav button { min-height: 48px; padding: .4rem 1.1rem; font-family: var(--hand); font-size: var(--t-ui); color: var(--ink); background: transparent; border: 1.5px solid var(--rule); border-radius: 15px 12px 16px 11px / 12px 15px 11px 14px; cursor: pointer; }
.cut--foot { display: block; width: 3rem; margin: 0 auto 1rem; color: var(--rule); }
.foot p { margin: 0 0 .6rem; }
.foot b { color: var(--ink); }
.foot a { color: var(--marker); }

/* hover เฉพาะเครื่องที่มีเมาส์จริง — บนมือถือ hover ค้างหลังแตะ */
@media (hover: hover) and (pointer: fine) {
  .row:hover, .leorow:hover, .chip:hover { border-color: var(--ink); }
  .btn--primary:hover { filter: brightness(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .ring path { stroke-dashoffset: 0; }
}