/* =============================================================
   AR ความรู้ทั่วไปเกี่ยวกับโรคเบาหวาน — UI kit + layout
   อ้างอิง Mockup-AR (01–05, ar01-*, ar02-*, ar03-*, ar04-*)
   และ Flow/Wireframe ฉบับล่าสุด
   ============================================================= */

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--c-bg);
}

body {
  position: fixed;
  inset: 0;
  font-family: var(--f-thai);
  font-size: var(--fs-body);
  color: var(--c-text);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--c-purple-500); outline-offset: 2px; }

/* ---------- stage ---------- */
/* เวทีต้องสูงเท่าตัว body (เต็มจอ) — ห้ามผูก height กับ --app-h
   รอบก่อนตั้ง height: var(--app-h) จาก visualViewport ทำให้กล่องสั้นกว่าจอ
   เหลือแถบว่างสีพื้นด้านล่างเหนือ toolbar ของ Safari/Chrome */
.stage {
  position: relative;
  width: 100%;
  max-width: var(--stage-max-w);
  height: 100%;
  margin-inline: auto;
  overflow: hidden;
  /* พื้นหลังจริงจากทีมออกแบบ (assets/img/pic/BG-1.png) แทนลายที่วาดเองด้วย SVG
     ยึดขอบล่าง เพราะลายคลื่นสีเข้ม+ชมพูอยู่ด้านล่าง ถ้ายึดกลางแล้วจอเตี้ยจะโดนครอปหาย
     ส่วนด้านบนเป็นพื้นโปร่งเกือบว่าง ครอปทิ้งได้ไม่เสียลาย */
  background: var(--c-bg) url('../img/pic/web/bg-main.webp') center bottom / cover no-repeat;
  isolation: isolate;
}

/* ---------- screens ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(var(--safe-t) + var(--sp-4)) var(--sp-5) calc(var(--safe-b) + var(--chrome-b, 0px) + var(--sp-4));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
/* หน้าวิธีใช้ + ขออนุญาตกล้อง — ปุ่มล่างยกขึ้นเหนือขอบล่าง ~14% ของความสูงจอตามแบบ
   (02.png / 03.png: ขอบล่างเงาปุ่มห่างขอบจอ 272/1921 = 14.2%) ให้ปุ่มลอยอยู่เหนือลายคลื่นสีเข้ม
   ของพื้นหลัง (ซึ่งยึดขอบล่างและสเกลตามความสูงจอ) — เดิมชิดล่าง 22px จนปุ่มจมอยู่บนคลื่น
   จอเตี้ย (<800px ที่เห็นจริง) ดูกฎถัดไป */
#screen-howto,
#screen-permission {
  padding-bottom: calc(var(--safe-b) + var(--chrome-b, 0px) + max(var(--sp-4), calc(var(--app-h, 800px) * 0.13)));
}
/* จอเตี้ย (<800px) — เช่นจอ 390×867 ตอนแถบที่อยู่ของ Chrome โผล่ เหลือพื้นที่จริงแค่ ~718px
 * วิธีใช้: รายการ 4 ขั้นสั้น พื้นว่างเหลือเฟือ ใช้ 13% ได้ทุกความสูง (วัดที่ 640px ยังว่างเหนือปุ่ม 57px)
 * ขออนุญาตกล้อง: เนื้อหาสูงกว่า ค่อย ๆ ลดจาก 13% (≥~715px) ลงถึง 8% (≤~660px) ให้ว่างเหนือปุ่ม ≥ ~30px
 * เดิมตัดเหลือ 7% ทันทีที่ต่ำกว่า 800 ปุ่มจึงดูต่ำกว่าแบบบนมือถือจริง (ลูกค้าแจ้ง 2026-09-30) */
:root[data-short-screen='true'] #screen-permission {
  padding-bottom: calc(var(--safe-b) + var(--chrome-b, 0px) + max(var(--sp-4),
    min(calc(var(--app-h, 800px) * 0.13), max(calc(var(--app-h, 800px) * 0.08), calc((var(--app-h, 800px) - 600px) * 0.85)))));
}

/* เนื้อหาพอดีจอ — ห้ามเลื่อน เพื่อไม่ให้แถบเบราว์เซอร์มือถือยุบแล้วดันเลย์เอาต์ */
.screen.is-fitted { overflow-y: hidden; }

.screen.is-active {
  display: flex;
  animation: screen-in var(--t-base) var(--ease-out) both;
}

/* หน้าจอโหมด AR ไม่มี padding เพราะกล้องต้องเต็มจอ */
.screen--bleed { padding: 0; overflow: hidden; }

@keyframes screen-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- topbar ---------- */
.topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  flex: 0 0 auto;
}

.topbar__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  text-align: center;
  color: var(--c-navy-900);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
/* display:grid ชนะ [hidden] ของ UA stylesheet — ต้องประกาศทับให้ซ่อนได้จริง */
.icon-btn[hidden] { display: none; }
.icon-btn:active { transform: scale(0.92); }
.icon-btn:hover { background: rgba(36, 36, 107, 0.06); }
.icon-btn svg { width: 26px; height: 26px; }
.icon-btn img { width: 26px; height: 26px; object-fit: contain; }

/* ---------- typography helpers ---------- */
.display {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--c-navy-900);
}
.display em {
  display: block;
  font-style: normal;
  color: var(--c-magenta-500);
}

.lead {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-text-muted);
}
/* คำโปรยหน้าแรกขอขนาดคงที่ 20px แยกจาก .lead ทั่วไป (ที่ยังยืดหดตาม --fs-body)
   เพราะหน้าขออนุญาตกล้องใช้ class เดียวกันแต่ขอ 17px คนละขนาด */
.lead--landing { font-size: 20px; }
/* คำอธิบายหน้าขออนุญาตกล้อง — สุ่มพิกเซลจาก Mockup-AR/03.png เป็นสีเข้มเดียวกับหัวข้อ
   ไม่ใช่สีจางแบบ .lead ทั่วไป (ตรงกับที่พบในหน้าวิธีใช้งานด้วย — ดู .step-card__desc) */
.lead--permission { font-size: 17px; color: var(--c-text); }

/* ไล่สีขาวฟุ้งบน-ล่าง กันลายจุด/กากบาทตกแต่งของพื้นหลัง (.stage) รบกวนหัวข้อ/ปุ่ม
   เว้นกลางจอโปร่งไว้ไม่แตะ (ที่วางไอคอนกล้อง) — เทคนิคเดียวกับ .gauge-top::before ของ AR3
   ห้ามใส่ position:relative ทับ .screen — .screen เป็น absolute+inset:0 อยู่แล้ว
   ถ้าเปลี่ยนเป็น relative ความสูงจะยุบเท่าเนื้อหา (638px จาก 844px) แล้วขอบล่างของ
   ไล่สีนี้จะกลายเป็นเส้นขาวพาดกลางจอ + .spacer ยืดไม่ได้ ปุ่มลอยไม่ติดขอบล่าง */
#screen-permission::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0) 24%,
    rgba(255, 255, 255, 0) 76%,
    rgba(255, 255, 255, 0.85) 100%);
}
#screen-permission > * { position: relative; z-index: 1; }

.h2 { margin: 0; font-size: var(--fs-h2); font-weight: 800; color: var(--c-navy-900); }
.h3 { margin: 0; font-size: var(--fs-h3); font-weight: 700; color: var(--c-navy-900); }
.center { text-align: center; }
.muted { color: var(--c-text-muted); }
/* ดันเนื้อหาให้ห่างกัน — ยุบได้จนถึง 0 เมื่อจอเตี้ย จะได้ไม่ดันให้ต้องเลื่อนหน้าจอ */
.spacer { flex: 1 1 auto; min-height: 0; }
/* ช่องว่างคงที่ระหว่างปุ่มกับแถบผู้สนับสนุน
   ต้อง flex:0 0 auto ไม่งั้นในคอลัมน์ flex จะถูกบีบเหลือ 0 แล้วเงาปุ่มไปทับแถบด้านล่าง */
.gap-3 { height: var(--sp-3); flex: 0 0 auto; }

/* กองปุ่มล่าง + แถบผู้สนับสนุน
   เงาปุ่ม --sh-btn เป็น 6px ทึบ + เบลอ 10px ซึ่งไม่กินพื้นที่เลย์เอาต์
   ต้องจองที่ด้วย margin ของปุ่ม + gap จริง ไม่งั้นขอบปุ่มจะทับกรอบผู้สนับสนุน */
.screen-dock {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 0 0 auto;
  flex-shrink: 0;
  padding-top: var(--sp-2);
}
.screen-dock .btn {
  margin-bottom: 6px;
}

/* สองบรรทัดลิขสิทธิ์ท้ายหน้า Landing (ตาม Flow Design 2026-09-03)
   ระยะและขนาดผูกกับความสูงจอจริง เพื่อไม่ให้ดันปุ่ม "เริ่มต้นใช้งาน" ตกจอบนเครื่องเตี้ย

   สีขาว ไม่ใช่ --c-text-muted เพราะบรรทัดนี้ตกลงไปอยู่บนคลื่นสีเข้มขอบล่างของ BG-1.png
   (พื้นหลังยึดขอบล่าง คลื่นจึงอยู่ใต้บรรทัดนี้ทุกความสูงจอ) — เทียบกับไฟล์แบบ
   pic/txt-copy right.png ที่ทีมออกแบบทำเป็นตัวอักษรสีขาวเช่นกัน */
.copyright-note {
  margin: clamp(2px, calc(var(--app-h, 800px) * 0.007), 6px) 0 0;
  font-size: clamp(9.5px, calc(var(--app-h, 800px) * 0.0136), var(--fs-xs));
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(20, 20, 60, 0.35);
}

/* จอเตี้ย (< 760px) — บีบระยะในกองปุ่มล่างให้บรรทัดลิขสิทธิ์อยู่ในจอครบสองบรรทัด
   วัดที่ 390x640: ก่อนบีบเนื้อหาล้น 21px (บรรทัดที่สองถูกตัดหาย) หลังบีบเหลือ 0
   จำกัดด้วย data-short-screen เพื่อไม่ให้กระทบจอ 844 ที่เทียบกับ mockup ไว้แล้ว */
:root[data-short-screen='true'] .screen-dock {
  gap: 14px;
  padding-top: 2px;
}
:root[data-short-screen='true'] .copyright-note {
  margin-top: 2px;
  line-height: 1.35;
}

/* ---------- buttons ---------- */
.btn {
  --btn-shadow: var(--sh-btn);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 62px;
  padding: var(--sp-3) var(--sp-6);
  border: 0;
  border-radius: var(--r-btn);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-text-invert);
  background: var(--g-brand);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
  -webkit-user-select: none;
  user-select: none;
  /* .btn ใช้กับ <a> ด้วย (ปุ่มดูวิดีโอ) ต้องตัดขีดเส้นใต้ของลิงก์ออก */
  text-decoration: none;
  /* ห้ามหดในคอลัมน์ flex — ปุ่มมีเงาทึบใต้ตัว ถ้าโดนบีบจะไปทับแถบผู้สนับสนุน */
  flex: 0 0 auto;
}

.btn:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 0 #1a1a4d, 0 4px 10px rgba(36, 36, 107, 0.22);
}

.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn svg { width: 26px; height: 26px; flex: 0 0 auto; }

/* ปุ่ม "เริ่มต้นใช้งาน" หน้าแรก — สีไล่ + เงาไล่สีของตัวเองแยกจากปุ่มอื่นทั้งแอป
 * (ปุ่มอื่นยังใช้ --g-brand/--sh-btn เดิม ไม่กระทบ)
 * เงาทึบด้านล่าง (lip) เดิมทำด้วย box-shadow สีเดียว ใส่ไล่สีให้ box-shadow ไม่ได้
 * จึงย้ายไปทำด้วย ::after ไล่สีซ้อนใต้ปุ่มแล้วเลื่อนลง (เทคนิคเดียวกับ .btn--ghost::after) */
.btn--start {
  /* background ไม่ต้องประกาศแยกแล้ว — --g-brand ทั่วระบบอัปเดตเป็นสีชุดนี้แล้ว (ดู tokens.css) */
  --btn-shadow: 0 10px 22px rgba(29, 34, 109, 0.32);
  font-weight: 600;
}
.btn--start::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(6px);
  background: linear-gradient(100deg, #1d226d 0%, #953478 100%);
  border-radius: inherit;
}
/* กดแล้วปุ่มจมลง 5px (จาก .btn:active ทั่วไป) — หุบเงาไล่สีให้เหลือ 1px เหมือนกัน
   ไม่ใช้ box-shadow สีเดียวทับแบบปุ่มอื่น เพราะ box-shadow ใส่ไล่สีไม่ได้ ตัดสีเดิมออกให้เหลือแต่เงาฟุ้ง */
.btn--start:active { box-shadow: 0 4px 10px rgba(29, 34, 109, 0.24); }
.btn--start:active::after { transform: translateY(1px); }
.btn--start svg { width: 32px; height: 32px; }

/**
 * ปุ่มขาว: ขอบไล่สี + ตัวอักษรไล่สี + เงาทึบใต้ปุ่มไล่สี (ตามภาพปุ่มจริงจากทีมออกแบบ)
 *
 * เงาใช้ ::after ไม่ใช่ box-shadow เพราะ box-shadow ใส่ไล่สีไม่ได้ (รับได้แค่สีเดียว)
 * จึงวางกล่องไล่สีซ้อนใต้ปุ่มแล้วเลื่อนลง ให้โผล่มาเป็นเงาแทน
 */
.btn--ghost {
  --btn-shadow: 0 10px 22px rgba(36, 36, 107, 0.16);
  --ghost-lift: 6px;
  color: var(--c-magenta-500);
  background: var(--c-surface);
  border: 2px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--g-brand-soft);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.btn--ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(var(--ghost-lift));
  background: var(--g-brand-soft);
  border-radius: inherit;
  transition: transform var(--t-fast) var(--ease-out);
}
/* ตัวอักษรไล่สี — ตัดสีพื้นให้เป็นรูปตัวอักษร (ต้องทำที่ลูกใน ไม่ใช่ตัวปุ่ม
   เพราะพื้นของปุ่มถูกใช้ทำขอบไล่สีไปแล้ว) */
.btn--ghost > span {
  background: var(--g-brand-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.btn--ghost:active {
  box-shadow: 0 4px 10px rgba(36, 36, 107, 0.16);
}
/* กดแล้วปุ่มจมลง 5px — หุบเงาให้เท่ากันไม่ให้ดูลอย */
.btn--ghost:active::after { transform: translateY(1px); }

/**
 * ปุ่ม "สแกนใหม่" — ตัวอักษรน้ำเงินเข้ม ไอคอนม่วงสด (ตามภาพปุ่มจริงจากทีมออกแบบ)
 * ต่างจาก .btn--ghost ใบอื่นที่ตัวอักษรเป็นไล่สีชมพู จึงต้องล้างการตัดพื้นเป็นรูปตัวอักษรออกก่อน
 */
.btn--rescan > span {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--c-navy-900);
  font-weight: 800;
}
.btn--rescan > svg {
  width: 28px;
  height: 28px;
  color: var(--c-violet-500);
}

/* ยุบได้ถึง 46px บนจอเตี้ย — ยังเกินเกณฑ์ touch target 44px */
.btn--sm {
  min-height: clamp(46px, calc(var(--app-h, 800px) * 0.064), 54px);
  font-size: var(--fs-body);
  gap: var(--sp-2);
}
.btn--auto { width: auto; align-self: center; padding-inline: var(--sp-8); }
/* ปุ่ม "ยกเลิก" ตอนกำลังตรวจจับ marker — เดิมไม่ได้อยู่ใน .action-row (ไม่มีตัวจัดกลาง)
   จึงชิดซ้ายตามการไหลของบล็อกปกติ ใส่ margin auto ให้เข้ากลางเอง + ขยายขนาดขึ้น */
.btn--cancel {
  margin-inline: auto;
  padding-inline: var(--sp-10);
  min-height: 58px;
  font-size: var(--fs-h3);
}

/* แถวปุ่มล่างของโหมด AR */
.action-row { display: grid; justify-items: center; }
.action-row .btn { justify-self: stretch; }
.action-row .btn--auto { justify-self: center; }
.action-row--pair {
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-3);
}
.action-row--pair .btn { padding-inline: var(--sp-3); }

/* ---------- cards ---------- */
.card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}
.card--pad { padding: var(--sp-5); }

/* การ์ดรายการ ไอคอนวงกลม | เส้นคั่น | เนื้อหา (หน้าวิธีใช้งาน)
   ขนาดไอคอน/ระยะขอบผูกกับความสูงจอจริง (--app-h) เพื่อให้ 4 ขั้นตอน + ปุ่ม + แถบผู้สนับสนุน
   พอดีหน้าจอเดียวบนมือถือ ไม่ต้องเลื่อนขึ้นลง */
.step-card {
  --step-fig: clamp(44px, calc(var(--app-h, 800px) * 0.078), 72px);
  --step-pad: clamp(6px, calc(var(--app-h, 800px) * 0.014), var(--sp-3));
  display: grid;
  grid-template-columns: var(--step-fig) 1px 1fr;
  align-items: center;
  gap: var(--step-pad);
  padding: var(--step-pad);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  text-align: left;
  flex: 0 0 auto;
}

.step-card__figure {
  display: grid;
  place-items: center;
  width: var(--step-fig);
  height: var(--step-fig);
  border-radius: var(--r-pill);
  /* พื้นวงกลมมาพร้อมไอคอนจริงแล้ว (ไฟล์ icon-howto-*.webp) ไม่ต้องวาดพื้นซ้ำอีกชั้น */
}
.step-card__figure img { width: 100%; height: 100%; }
.step-card__rule { align-self: stretch; background: var(--c-line); }

/* เว้นช่องระหว่างเลขลำดับกับหัวข้อให้มากกว่าเดิม ตามแบบ */
.step-card__head { display: flex; align-items: center; gap: var(--sp-4); }
.step-card__title { margin: 0; font-size: clamp(16px, 4.4vw, 22px); font-weight: 800; }
/* สุ่มพิกเซลจาก Mockup-AR/02.png ตัวอักษรบรรทัดนี้เป็นสีเข้มเดียวกับหัวข้อ ไม่ใช่สีจางแบบ text-muted */
.step-card__desc { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-text); line-height: 1.45; }

/* หัวเรื่อง + ระยะห่างระหว่างการ์ด ยุบตามความสูงจอ เพื่อให้ 4 ขั้นตอนพอดีจอเดียว */
.howto-title {
  margin-block:
    clamp(var(--sp-1), calc(var(--app-h, 800px) * 0.012), var(--sp-3))
    clamp(var(--sp-2), calc(var(--app-h, 800px) * 0.016), var(--sp-4));
  flex: 0 0 auto;
}
.howto-steps {
  display: grid;
  gap: clamp(8px, calc(var(--app-h, 800px) * 0.016), var(--sp-4));
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
}

.step-badge {
  display: grid;
  place-items: center;
  width: clamp(28px, 8vw, 36px);
  height: clamp(28px, 8vw, 36px);
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  font-size: clamp(15px, 4.2vw, 20px);
  font-weight: 800;
  color: #fff;
  background: var(--c-navy-900);
}
/* สีสุ่มพิกเซลจาก Mockup-AR/02.png ตรง ๆ (ของเดิมกะจากโทนสีระบบ ไม่ตรงเป๊ะ) */
.step-badge--1 { background: #191333; }
.step-badge--2 { background: #e16faa; }
.step-badge--3 { background: #f27233; }
.step-badge--4 { background: #7464ab; }

/* ---------- brand ---------- */
.brand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  /* ระยะในแถบบีบเท่าที่จำเป็นเพื่อให้ข้อความอยู่บรรทัดเดียว (เดิม 16px ตัดเป็น 2 บรรทัด
   * มีคำ "รัฐบาล" ห้อยบรรทัดล่าง)
   *
   * ช่องที่ข้อความได้ = กว้างจอ − 40 (padding หน้าจอ) − 24 (padding แถบ) − 56 (ไอคอน) − 8 (gap)
   * "สนับสนุนโดย สำนักงานสลากกินแบ่งรัฐบาล" ต้องการ 244px ที่ 14px (วัดจริงด้วย probe nowrap)
   *   จอ 390 → ได้ 262px ✓ · จอ 375 → 247px ✓ · จอ 360 → 232px ✗ ขาด 12px
   * จอ ≤380 จึงลดเป็น 13px (ต้องการ 226px) ให้ยังบรรทัดเดียว — ดู media query ใต้บล็อกนี้
   * ไอคอน 56px และ padding บน-ล่าง 4px คงไว้ตามที่ขอ */
  gap: var(--sp-2);
  width: 100%;
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--sh-card);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-navy-900);
  flex: 0 0 auto;
}
.brand-bar img { width: 56px; height: 56px; }
/* จอแคบ (Android 360, iPhone X/11 Pro/12 mini 375) — 14px ไม่พอบรรทัดเดียว ลดเป็น 13px */
@media (max-width: 380px) {
  .brand-bar { font-size: 13px; }
}

/* ไม่มีพื้นขาวรองหลังตราแล้ว ตามแบบ Mockup-AR/01.png — ดวงตรานั่งอยู่บนพื้นหลังตรง ๆ
   ไม่มีวงกลม/เงาซ้อน (เดิมมีไว้กันดวงตราจมกับพื้นหลังบางโทน แต่ไม่ตรงกับแบบ) */
.brand-mark {
  position: absolute;
  top: calc(var(--safe-t) + var(--sp-4));
  left: var(--sp-5);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
}
.brand-mark img { width: 100%; height: auto; }

.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}
.brand-lockup img { width: 68px; height: auto; }
.brand-lockup b { display: block; font-size: var(--fs-sm); color: var(--c-navy-900); }
.brand-lockup span { display: block; font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--c-text-muted); }

/* ---------- hero ---------- */
/* จำกัดด้วยความสูงกล่อง ไม่จำกัด max-height ที่ตัว img
   Safari จะคง width จาก attribute แล้วบีบแค่ height เมื่อมี max-height
   ทำให้ icon-main.webp (จัตุรัส) แบนในหน้า Mobile
   min-height/min-width: 0 จำเป็น เพราะ flex/grid item ค่าเริ่มต้นเป็น auto
   จะไม่ยอมหดต่ำกว่าขนาด intrinsic ของรูป */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-block: clamp(2px, calc(var(--app-h, 800px) * 0.008), var(--sp-2));
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
}
.hero img {
  display: block;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.hero--primary {
  height: clamp(88px, calc(var(--app-h, 100svh) * 0.22), 200px);
}
.hero--primary img {
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1;
}

.hero--secondary {
  height: clamp(74px, calc(var(--app-h, 100svh) * 0.195), 180px);
}
.hero--secondary img {
  height: 100%;
  width: auto;
  max-width: min(98%, 400px);
  max-height: 100%;
  aspect-ratio: 900 / 469;
}

/* =============================================================
   โหมด AR
   ============================================================= */
.ar-root {
  position: absolute;
  inset: 0;
  background: #0d0d18; /* พื้นสำรองระหว่างรอกล้องเปิด */
  /* สร้าง stacking context ครอบไว้ — MindAR ใส่ z-index:-2 ให้ <video> แบบ inline
     ถ้าไม่ครอบ วิดีโอจะไปอยู่หลังพื้นสีของ .ar-root แล้วภาพกล้องจะไม่ขึ้นเลย (จอดำ) */
  isolation: isolate;
}
/* ระหว่างดาวน์โหลดเนื้อหา (กล้องยังไม่เปิด) — ใช้พื้นหลังแบบหน้าอื่นของแอปแทนจอดำ
   เดิมช่วงนี้สั้นไม่ถึงวินาที แต่ตอนนี้กล้องรอเปิดจนของครบ บนเน็ตช้าอาจรอเป็นสิบวินาที
   พื้นดำทำให้หัวข้อ/ปุ่มสีกรมท่าจมหายอ่านไม่ออก (ดู showLoading ใน src/screens/ar.js) */
#screen-ar.is-loading .ar-root { background: transparent; }

/* หน้า AR ไม่มีอะไรให้เลื่อน/ซูมหน้าเว็บ — ปิดท่าทางของเบราว์เซอร์ทั้งหน้า ให้นิ้วเป็นของเราทั้งหมด
 *
 * ถ้าไม่ปิด (ค่าเริ่มต้น touch-action: auto) พอลากนิ้วไปไม่กี่พิกเซล เบราว์เซอร์มือถือจะตัดสินว่า
 * เป็นการเลื่อนหน้า / ดึงเพื่อรีเฟรช / ซูมหน้าเว็บ แล้วยิง pointercancel ตัดการลากของเรากลางทาง
 * วัดด้วยนิ้วจำลอง (test-touch.mjs): ลาก 160px ตับอ่อนหมุนได้แค่ 15° จากที่ควรได้ ~100°
 * และกางสองนิ้วซูมได้ไม่ถึงครึ่ง — ลูกค้าแจ้งว่า "หมุน/ซูมยากเกินไป" (2026-09-30)
 * การแตะปุ่ม/แท็บยังทำงานปกติ (touch-action คุมเฉพาะท่าเลื่อน/ซูม ไม่ใช่การแตะ) */
#screen-ar { touch-action: none; }

/* MindAR ยัด <video> กับ <canvas> เข้ามาใน container นี้
 *
 * สำคัญ: ห้ามกำหนด width/height/inset/object-fit ให้ <video> เอง
 * MindAR คำนวณขนาดและตำแหน่งวิดีโอเองเพื่อทำ "cover" พร้อมปรับ fov ของกล้อง 3D
 * ให้สอดคล้องกัน ถ้าเราไป override ภาพกล้องจะไม่ตรงกับโมเดล 3D
 * (โมเดลจะลอยเยื้องออกจาก marker)
 *
 * ที่ต้องแก้เองมีแค่ลำดับชั้น: MindAR ใส่ z-index:-2 ให้ video แบบ inline
 * ซึ่งทำให้วิดีโอไปอยู่หลังพื้นสีของ .ar-root จนจอดำ
 * และ canvas อยู่ก่อน video ใน DOM จึงต้องระบุ z-index ทั้งคู่ให้ชัด
 */
.ar-root video { z-index: 0 !important; }
.ar-root canvas { z-index: 1 !important; }

.ar-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, calc(var(--app-h, 800px) * 0.0142), var(--sp-3));
  /* ระยะล่าง ~6% ของความสูงจอ ตามแบบ (ar0X-*.png: ปุ่ม "สแกนใหม่" รวมเงาใต้ปุ่มห่างขอบล่าง 5.4%)
     เดิมชิดขอบล่าง 12px (1.4%) ลูกค้าแจ้งว่าปุ่มล่างต่ำเกินไม่ตรงแบบ (2026-09-30) */
  padding: calc(var(--safe-t) + var(--sp-3)) var(--sp-4)
    calc(var(--safe-b) + var(--chrome-b, 0px) + max(var(--sp-3), calc(var(--app-h, 800px) * 0.06)));
  pointer-events: none;
}
/* จอเตี้ย (<800px ที่เห็นจริง) — ระยะล่างไล่จาก 6% ที่ 800px ลงเป็นเส้นตรงถึง ~2.5% ที่ 667px
 * ไม่งั้นเนื้อหา AR3 (เกจ + มาสคอต + การ์ด 2 ใบ) ล้นจอจนปุ่มล่างโดนตัด (วัดที่ 390×667: ล้น 13px)
 * เดิมตัดเหลือ 2.5% ทันทีทุกจอที่ต่ำกว่า 800 — จอ 718px (Chrome มีแถบที่อยู่) ปุ่มจึงชิดล่างเกินแบบ
 * วัดมาสคอต AR3: 718px → ~140px · 740px → ~160px ยังเห็นหัว-ไหล่ครบ */
:root[data-short-screen='true'] .ar-overlay {
  padding-bottom: calc(var(--safe-b) + var(--chrome-b, 0px) + max(var(--sp-3),
    min(calc(var(--app-h, 800px) * 0.06), calc((var(--app-h, 800px) - 600px) * 0.25))));
}
/* เฉพาะ control ที่ต้องกดได้ */
.ar-overlay > *,
.ar-overlay .pointer { pointer-events: auto; }
/* พื้นที่ตรงกลางต้องปล่อยให้นิ้วลากหมุนโมเดลได้ */
/* ช่องกลางจอ — เป็นทั้งที่ให้นิ้วลากหมุนโมเดล (marker 01) และที่วางมาสคอต (marker 03)
   min-height ต้องยุบตามความสูงจอจริง ไม่งั้นบนจอ 667px เลย์เอาต์จะล้นจนปุ่มล่างหลุดจอ */
.ar-overlay__gap {
  flex: 1 1 auto;
  min-height: clamp(16px, calc(var(--app-h, 800px) * 0.057), 48px);
  pointer-events: none;
}
.ar-overlay > [data-top],
.ar-overlay > [data-body],
.ar-overlay > [data-action-slot] { flex: 0 0 auto; }

/* topbar ในโหมด AR: บ้าน | หัวข้อ | ชิปความคืบหน้า
 *
 * ต้องเป็น 1fr auto 1fr ไม่ใช่ flex ธรรมดา — ปุ่มบ้าน (44px) กับกลุ่มเครื่องมือขวา
 * (ชิปความคืบหน้า+ปุ่มเสียง) กว้างไม่เท่ากัน ถ้าใช้ flex ธรรมดาหัวข้อกลางจะเบี้ยวไปทาง
 * ด้านที่แคบกว่าเสมอ (วัดจริง: เยื้อนซ้าย ~12px จากกึ่งกลางจอ)
 * คอลัมน์ 1fr เท่ากันสองข้าง + หัวข้อ auto ตรงกลาง การันตีกึ่งกลางจริงไม่ว่าอีกฝั่งจะกว้างแค่ไหน */
.topbar--ar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
}
.topbar--ar .icon-btn { justify-self: start; }
.topbar--ar .ar-tools { justify-self: end; }
.topbar--ar .topbar__title {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* ข้อความสีเข้มบนภาพกล้อง — ใส่เงาอ่อนให้อ่านออกทุกพื้นหลัง */
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.85), 0 0 14px rgba(255, 255, 255, 0.6);
}
.topbar--ar .icon-btn {
  filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.9));
}

/* กลุ่มเครื่องมือมุมขวาของโหมด AR
   ชิปความคืบหน้าอยู่ในแถวปกติ จึงอยู่ระดับเดียวกับหัวเรื่องพอดี
   ส่วนปุ่มลำโพงวางแบบ absolute ใต้ชิป — ไม่นับเป็นความสูงของแถบบน
   ถ้าปล่อยให้อยู่ในแถวด้วย (คอลัมน์) แถบจะสูงขึ้นแล้วดันชิปให้ลอยเหนือหัวเรื่อง */
.ar-tools {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ar-tools .icon-btn {
  position: absolute;
  top: calc(100% + var(--sp-1));
  right: 0;
  width: 34px;
  height: 34px;
}
.ar-tools .icon-btn svg { width: 22px; height: 22px; }
/* ไอคอนลำโพงขยายใหญ่ขึ้นจากเดิม (ตามที่ขอ) — ใหญ่กว่าปุ่มอื่นในกลุ่มเครื่องมือเล็กน้อย */
.ar-tools .icon-btn img { width: 30px; height: 30px; object-fit: contain; }
/* ปุ่มลำโพงตอนปิดเสียง — ทำให้จางลงให้เห็นสถานะชัด */
.icon-btn.is-off { opacity: 0.55; }

/* hint ใต้หัวข้อ — ข้อความเปล่า ไม่มีพื้นหลัง ตามแบบใหม่ */
.ar-hint {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  /* ต้องอยู่เหนือ .gauge-top ของ AR3 — บล็อกนั้นมี z-index:0 + position:relative
     จึงสร้าง stacking context ทั้งก้อน ทำให้ ::before (พื้นขาวที่ยืดขึ้นไป -600px)
     ทับบรรทัด hint จนมองไม่เห็นเลย ทั้งที่ยังกินพื้นที่เลย์เอาต์อยู่ */
  position: relative;
  z-index: 1;
}
.ar-hint:empty { display: none; }
/* จอเตี้ย (< 760px ที่เห็นจริง) — ซ่อนบรรทัด hint เพื่อคืนความสูงให้โมเดล
   ธงมาจาก src/lib/viewport.js ซึ่งวัดด้วย visualViewport.height (เชื่อได้กว่า max-height)
   ข้อความยังอยู่ใน DOM ให้โปรแกรมอ่านหน้าจออ่านได้ จึงไม่ใช้ display:none */
:root[data-short-screen='true'] .ar-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* บรรทัดคำแนะนำแบบภาพจริง (ไอคอน+ข้อความรวมในภาพเดียว) — จัดกลางจอเสมอ (.ar-hint มี
   justify-content:center ให้แล้ว) จำกัดความสูงไว้ไม่ให้ใหญ่เกินบรรทัดข้อความทั่วไป */
.ar-hint__img { height: 26px; width: auto; max-width: 90%; }

.ar-hint__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-navy-900);
  text-align: center;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.7);
}
.ar-hint__inner svg {
  width: 26px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--c-purple-500);
}
.hint__ar { color: var(--c-magenta-500); }

/* ข้อความใต้กรอบสแกน — ไม่ใช้ text-shadow กันข้อความจมกับพื้นหลังกล้องแล้ว
   เปลี่ยนไปใช้ไล่สีขาวฟุ้งทั้งบล็อกแทน (ดู #screen-ar.is-scanning .ar-overlay::before)
   ลดความหนา + ขนาดตัวอักษรลงเล็กน้อยตามที่ขอ */
.scan-hint {
  margin: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-navy-900);
}

/* หน้าสแกน (ก่อนเจอ marker) — ไล่สีขาวฟุ้งบน-ล่าง เว้นกลางจอโปร่งไว้ (ที่วางกรอบสแกน)
   แทนที่ text-shadow รายจุดของหัวข้อ/บรรทัดใต้กรอบ ให้อ่านออกบนพื้นกล้องได้โดยไม่ต้องพึ่งเงาแยกทีละอัน */
#screen-ar.is-scanning .ar-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, 0) 74%,
    rgba(255, 255, 255, 0.85) 100%);
}
#screen-ar.is-scanning .topbar--ar .topbar__title { text-shadow: none; }
#screen-ar.is-scanning .topbar--ar .icon-btn { filter: none; }

/* AR1 (ตับอ่อน) — ไล่สีขาวฟุ้งบน-ล่างแบบเดียวกัน ("เหมือนในหน้าเปิดกล้อง" ตามที่ขอ)
   ใช้ :has() เลือกจาก panel ที่กำลังแสดงอยู่ เพราะ .ar-overlay ไม่มี id/class บอกว่าเป็น marker ไหน */
.ar-overlay:has([data-panel="types"])::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0) 78%,
    rgba(255, 255, 255, 0.7) 100%);
}

/* แถบผู้สนับสนุนแบบบางในโหมด AR — ต้องมีทุกหน้าจอตามเกณฑ์ตรวจรับ */
.ar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-1) var(--sp-4);
  align-self: center;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 2px 8px rgba(20, 20, 45, 0.18);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-navy-900);
  flex: 0 0 auto;
}

/* ---------- ชิปความคืบหน้า ---------- */
/* ความสูงตั้งให้ใกล้เคียงความสูงตัวอักษรของหัวเรื่อง (--fs-h3 × line-height 1.2)
   เพื่อไม่ให้ชิปดูใหญ่ข่มหัวเรื่องบนแถบเดียวกัน */
.progress-chip {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--fs-h3) * 1.25);
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--g-brand);
  box-shadow: 0 2px 8px rgba(36, 36, 107, 0.28);
  cursor: pointer;
  flex: 0 0 auto;
}
.progress-chip__dots { display: flex; gap: 5px; }
.progress-chip__dots i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.42);
  transition: background var(--t-base);
}
.progress-chip__dots i.on { background: #fff; }

/* ---------- กรอบสแกน ---------- */
/* วาดด้วย CSS border (ไม่ใช้ภาพ ui-focus.png) — เต็มจอเกินไปเทียบกับตำแหน่งเดิมที่ตั้งไว้
   กรอบเว้นระยะจากขอบจอตามสัดส่วนเดิม (บน 11% / ล่าง 13% / ซ้ายขวา 7%) */
.scan-frame {
  position: absolute;
  top: 11%;
  bottom: 13%;
  left: 7%;
  right: 7%;
  z-index: 2;
  pointer-events: none;
}
.scan-frame::before,
.scan-frame::after,
.scan-frame span::before,
.scan-frame span::after {
  content: '';
  position: absolute;
  width: 62px;
  height: 62px;
  border: 6px solid var(--c-purple-500);
  border-radius: 6px;
}
.scan-frame::before  { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.scan-frame::after   { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.scan-frame span::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.scan-frame span::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.scan-frame--pulse { animation: scan-pulse 1.9s var(--ease-in-out) infinite; }
@keyframes scan-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- แท็บ ---------- */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 5px;
  border-radius: var(--r-pill);
  /* กรอบชุดแท็บ 2 ช่อง (marker 01) — ไม่เว้นขอบขาวรอบช่องที่เลือกตามที่ขอ
     ทำได้เพราะทั้งกรอบและช่องเป็นแคปซูลรัศมีเดียวกัน ขอบจึงแนบสนิทไม่มีสีโผล่ตามมุม
     ชุด 4 ช่องแบบมีไอคอน (--icons) ยังเว้น 5px ตามเดิม เพราะช่องที่เลือกเป็นสี่เหลี่ยม
     ต้องมีขอบขาวคั่นไม่ให้มุมสี่เหลี่ยมทับมุมโค้งของกรอบ */
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-card-lg);
  backdrop-filter: blur(6px);
}
.segmented:not(.segmented--icons) { padding: 0; }

.seg-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 50px;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-navy-900);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-base) var(--ease-out);
}
.seg-btn[aria-selected='true'] {
  color: #fff;
  background: var(--g-brand);
  box-shadow: 0 4px 12px rgba(36, 36, 107, 0.28);
}

.seg-btn__icon { display: grid; place-items: center; flex: 0 0 auto; color: var(--c-purple-600); }
.seg-btn__icon svg { width: 24px; height: 24px; }
.seg-btn[aria-selected='true'] .seg-btn__icon { color: #fff; }

/* ไอคอนแท็บแบบภาพจริง (marker 04) — สองใบซ้อนช่องเดียวกันใน grid
   โชว์ใบม่วงตอนไม่ได้เลือก · ใบขาวตอนเลือก (พื้นเป็น gradient)
   ซ้อนช่องเดียวกันเพื่อไม่ให้ความกว้างปุ่มขยับตอนสลับแท็บ */
.seg-btn__ico {
  grid-area: 1 / 1;
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.seg-btn__ico--on,
.seg-btn[aria-selected='true'] .seg-btn__ico { visibility: hidden; }
.seg-btn[aria-selected='true'] .seg-btn__ico--on { visibility: visible; }

/* แท็บ 4 ช่องแบบมีไอคอน (marker 04) — ตัวอักษรเล็กลง + เส้นคั่นระหว่างช่อง
 *
 * มุมกรอบใช้ --r-btn เท่าปุ่มอื่นทั้งแอป (เดิมเป็น --r-pill = แคปซูลเต็ม)
 * ส่วนช่องที่ถูกเลือกเป็น "สี่เหลี่ยม" ไม่มีมุมโค้ง ยกเว้นช่องหัวแถวและท้ายแถว
 * ที่ต้องโค้งด้านนอกให้รับกับมุมกรอบ ไม่งั้นสี่เหลี่ยมจะโผล่ล้นออกนอกมุมกรอบ
 * (แท็บชุด 2 ช่องของ marker 01 ไม่โดนกฎนี้ ยังเป็นแคปซูลตามแบบเดิม) */
.segmented--icons {
  /* มุมในของช่องที่เลือก = มุมกรอบ − padding ของกรอบ (--r-btn 14 − 5) ให้เส้นโค้งขนานกัน */
  --seg-inner-r: 9px;
  border-radius: var(--r-btn);
  /* ช่องกว้างตามเนื้อหา ไม่ใช่กว้างเท่ากันหมด (1fr) แล้วแบ่งที่ว่างที่เหลือให้ทุกช่องเท่า ๆ กัน
     (track แบบ auto ยืดรับ free space เองเมื่อ justify-content เป็นค่าเริ่มต้น)
     เพราะ 4 ช่องนี้ป้ายยาวไม่เท่ากัน — "ยา" 15px แต่ "ออก/กำลังกาย" 54px
     ถ้าบังคับกว้างเท่ากัน ช่องที่ยาวสุดจะเป็นตัวกำหนดเพดาน: วัดจริงที่จอ 390
     เนื้อหาช่องนั้นกว้าง 86px ในช่อง 87px = เหลือข้างละ 1px และ padding ที่ใส่เพิ่ม
     ก็ไม่มีผล เพราะเนื้อหาล้นออกนอกกล่องปุ่มไปเลย (วัดได้ -5.1px ที่จอ 320)
     พอให้ช่องกว้างตามเนื้อหา ทุกช่องได้ที่ว่างซ้าย-ขวาจริงตาม padding + ส่วนแบ่ง */
  grid-auto-columns: auto;
}
/* ระยะซ้าย-ขวาในแต่ละช่อง
 *
 * เดิม 4px ทำให้ไอคอน/ตัวอักษรเกือบชนเส้นคั่นและชนขอบ pill ที่เลือกอยู่
 * วัดจริงที่จอ 390: ช่อง "ออกกำลังกาย" เนื้อหากว้าง 86px ในช่อง 87px = เหลือข้างละ 1px
 *
 * ที่ว่างที่มีให้แบ่งขึ้นกับความกว้างจอ (คอลัมน์กว้างเท่ากันทั้ง 4 ช่อง
 * และช่องที่ยาวสุดเป็นตัวกำหนดเพดาน) จึงผูก padding กับ vw แทนค่าคงที่
 * แล้วลดไอคอน 26 → 24px และ gap 6 → 5px เพื่อคืนที่ให้ตัวอักษรอีกช่องละ 3px */
.segmented--icons .seg-btn {
  font-size: var(--fs-sm);
  padding-inline: clamp(5px, 2.1vw, 12px);
  gap: 5px;
  border-radius: 0;
}
.segmented--icons .seg-btn__ico { width: 24px; height: 24px; }

/* จอแคบกว่า 360px (เช่น iPhone SE รุ่นแรก) ที่ว่างไม่พอให้เว้นเท่าจอปกติ
   ลดตัวอักษรลงมาที่ --fs-xs และบีบ padding เพื่อให้ยังไม่ล้นกรอบ
   (วัดที่ 320px: เนื้อหา+padding รวม 267px ในกรอบกว้างใช้ได้ 278px) */
@media (max-width: 359px) {
  .segmented--icons .seg-btn {
    font-size: var(--fs-xs);
    padding-inline: 4px;
  }
  .segmented--icons .seg-btn__ico { width: 22px; height: 22px; }
}
.segmented--icons .seg-btn:first-child {
  border-top-left-radius: var(--seg-inner-r);
  border-bottom-left-radius: var(--seg-inner-r);
}
.segmented--icons .seg-btn:last-child {
  border-top-right-radius: var(--seg-inner-r);
  border-bottom-right-radius: var(--seg-inner-r);
}
/* ป้ายกำกับตัดบรรทัดตาม <br> ที่กำหนดไว้ในเนื้อหาเท่านั้น
   ไม่ปล่อยให้เบราว์เซอร์ตัดเองจนกลายเป็น 3 บรรทัด */
.segmented--icons .seg-btn__label { white-space: nowrap; }
.segmented--icons .seg-btn + .seg-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--c-line);
}
/* ซ่อนเส้นคั่นที่ติดกับช่องที่ถูกเลือก ไม่ให้ตัดขอบ pill */
.segmented--icons .seg-btn[aria-selected='true']::before,
.segmented--icons .seg-btn[aria-selected='true'] + .seg-btn::before { display: none; }

/* ---------- การ์ดคำอธิบาย ---------- */
.info-card {
  /* ขนาดไอคอนและระยะขอบยุบตามความสูงจอจริง เหมือน .step-card ของหน้าวิธีใช้งาน
     บนจอเตี้ยจะได้ไม่ดันปุ่มล่างหลุดจอ และคืนที่ให้มาสคอตของ AR3 */
  --card-fig: clamp(56px, calc(var(--app-h, 800px) * 0.104), 88px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(9px, calc(var(--app-h, 800px) * 0.019), var(--sp-4));
  padding: clamp(9px, calc(var(--app-h, 800px) * 0.019), var(--sp-4)) var(--sp-5);
  /* มุมโค้งการ์ดทั้งระบบ (การ์ดคำอธิบายทุกจุด AR1-4) ลดจาก --r-lg (24px) เป็น 14px ตามที่ขอ */
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--sh-card-lg);
  backdrop-filter: blur(8px);
}

.info-card__icon {
  display: grid;
  place-items: center;
  width: var(--card-fig, 88px);
  height: var(--card-fig, 88px);
  flex: 0 0 auto;
  border-radius: var(--r-pill);
}
.info-card__icon svg,
.info-card__icon img { width: 55%; height: 55%; }

.info-card__icon--pink   { background: var(--c-magenta-050); color: var(--c-magenta-500); }
.info-card__icon--violet { background: var(--c-purple-100);  color: var(--c-purple-600); }

/* วงแหวน gradient ขอบบาง พื้นขาว (marker 04) */
.info-card__icon--ring {
  color: var(--c-purple-600);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--g-pink) border-box;
  border: 3px solid transparent;
}

/* วงแหวนสีตามโซนระดับน้ำตาล (marker 03) */
.info-card__icon--zone {
  background: #fff;
  border: 4px solid var(--c-normal);
}
.info-card__icon--zone[data-tone='low']    { border-color: var(--c-low); }
.info-card__icon--zone[data-tone='normal'] { border-color: var(--c-normal); }
.info-card__icon--zone[data-tone='high']   { border-color: var(--c-high); }
.info-card__icon--zone svg { width: 62%; height: 52%; }

/* ไอคอนภาพจริงจากทีมออกแบบ — ภาพเองมีวงแหวน/พื้นหลังสีมาแล้ว ไม่ต้องซ้อน CSS ทับอีกชั้น */
.info-card__icon--photo {
  background: none;
  border: none;
}
.info-card__icon--photo img { width: 100%; height: 100%; border-radius: 50%; }

.info-card__title { margin: 0 0 var(--sp-1); font-size: var(--fs-h3); font-weight: 800; }
.info-card__title--accent { color: var(--c-magenta-500); }
/* สุ่มพิกเซลจาก Mockup-AR/ar03-2.png (และ 02.png, 03.png ก่อนหน้า) ตัวอักษรคำอธิบาย
   ทุกจุดในแอปเป็นสีเข้ม #191333 เดียวกันหมด ไม่ใช่สีจาง text-muted — แก้เป็นสีเดียวทั้งระบบ */
.info-card__body { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-text); }
.info-card__body ul { margin: var(--sp-1) 0 0; padding-left: 1.15em; }

/* ขนาดฟ้อนหัวข้อ/คำอธิบายต่อ marker ตามที่ทีมออกแบบขอเพิ่ม (ต่างจาก clamp เดิมของระบบ) */
[data-panel="types"] .info-card__body { font-size: 18px; }
[data-panel="symptoms"] .info-card__title { font-size: 28px; }
[data-panel="symptoms"] .info-card__body { font-size: 19px; }
[data-panel="glucose"] .info-card__body { font-size: 18px; }
[data-panel="selfcare"] .info-card__title { font-size: 26px; }
[data-panel="selfcare"] .info-card__body { font-size: 18px; }

.info-card--stack { grid-template-columns: 1fr; gap: var(--sp-3); }

/* ---------- แถบหัวข้อเต็มความกว้าง (marker 02) ---------- */
/* แถบหัวข้อของ marker 02 — ทรงเดียวกับป้ายชื่อ .hs-chip (มุมโค้ง 10px น้ำหนักฟอนต์ 400)
   ตามภาพปุ่มจริงจากทีมออกแบบ ซึ่งเป็นสี่เหลี่ยมมุมมน ไม่ใช่แคปซูล */
/* แถบหัวข้อ "จุดเฝ้าระวัง" (AR2) — เป็นป้ายหัวข้อบาง ๆ ไม่ใช่ปุ่ม
 * วัดจาก Mockup-AR/ar02-2.png (1080 กว้าง → 390): สูง 80px → ~29px · ตัวอักษร ~16px
 * เดิม padding 12px + ฟอนต์ h3 (~19px) สูง 52px ดูเหมือนปุ่มกดได้ (ลูกค้าแจ้ง 2026-09-30)
 * 29px บางเกินไปบนมือถือจริง → ขยายเป็น ~38px (ลูกค้าขอเพิ่มความสูง 2026-09-30) */
.section-bar {
  margin: 0;
  padding: 6px var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--g-brand);
  box-shadow: 0 4px 12px rgba(36, 36, 107, 0.22);
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
}

/* ---------- การ์ดสถานะ (กำลังตรวจจับ marker) ---------- */
.status-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  /* ลด padding ลงจากเดิม (--sp-4 --sp-5) ตามที่ขอ — การ์ด "กำลังตรวจจับ.../เตรียมโหลด..." */
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--sh-card-lg);
}
.status-card__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-purple-600);
}
.status-card__icon svg { width: 34px; height: 34px; }
.status-card__title { margin: 0; font-size: var(--fs-h3); font-weight: 700; }
.status-card__sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }

.progress {
  height: 12px;
  margin-top: var(--sp-3);
  border-radius: var(--r-pill);
  background: #e7e5ef;
  overflow: hidden;
}
.progress__bar {
  /* เป็นแท็ก <i> (inline) — ต้องเป็น block ไม่งั้น width/height ไม่มีผล แถบไม่ขึ้นสีเลยทุกเปอร์เซ็นต์ */
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--g-brand);
  transition: width var(--t-base) linear;
}

/* =============================================================
   MARKER 02 — hotspot + ป้ายชื่อ + การ์ด popup
   ============================================================= */
.hs-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hs-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hs-line {
  stroke: var(--c-navy-700);
  stroke-width: 0.35;
  stroke-dasharray: 1.6 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity var(--t-fast);
}

/* จุดเรืองแสงบนตัวโมเดล
 * เล็กตามแบบ (~15px รวมขอบขาว) — เดิม 18px + ขอบขาว 6px = 30px และวงกระเพื่อมขยายถึง ~80px
 * บนจอมือถือเล็กตัวหุ่นกว้างแค่ ~130px จุดเลยบังหน้า/ท้องจนมองไม่เห็นโมเดล (ลูกค้าแจ้ง 2026-09-30)
 * พื้นที่แตะยังกว้าง 44px ผ่าน ::before เหมือนเดิม
 * --dot ถูกปรับทุกเฟรมจาก panels.js ตามขนาดหุ่นบนจอ (ส่องใกล้ = ใหญ่ · ถอยออก = เล็ก) — 12px คือค่าเริ่ม */
.hs-dots { position: absolute; inset: 0; --dot: 12px; }
.hotspot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--dot);
  height: var(--dot);
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 42% 34%, #ff8ac4 0 20%, #e9268f 48%, #b3126b 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.8),
    0 0 8px 2px rgba(233, 38, 143, 0.45),
    0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  pointer-events: auto;
  visibility: hidden;
  transition: transform var(--t-fast);
}
/* พื้นที่กดจริงกว้างกว่าจุดที่เห็น (44px) เพื่อให้แตะติดง่ายบนมือถือ */
.hotspot::before {
  content: '';
  position: absolute;
  inset: calc((44px - var(--dot)) / -2);
  border-radius: inherit;
}
/* วงกระเพื่อมบาง ๆ บอกว่าแตะได้ — ขยายแค่ 1.7 เท่า ไม่แผ่ทับตัวหุ่น */
.hotspot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  box-shadow: 0 0 0 1.5px rgba(233, 38, 143, 0.55);
  animation: hotspot-ring 1.9s var(--ease-out) infinite;
}
.hotspot[aria-pressed='true']::after { animation: none; }

@keyframes hotspot-ring {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

/* ป้ายชื่อฝั่งขวา */
.hs-chips { position: absolute; inset: 0; }
.hs-chip {
  position: absolute;
  right: var(--sp-4);
  transform: translateY(-50%);
  min-width: 96px;
  min-height: 44px;
  padding: 7px var(--sp-5);
  /* padding แนวตั้งเดิม (7px) รวมกับความสูงบรรทัดได้แค่ ~38px
     ซึ่งต่ำกว่าเกณฑ์ touch target 44px ใช้ flex จัดกึ่งกลางแทนเพื่อคุมความสูงขั้นต่ำ
     โดยไม่ต้องเพิ่ม padding จนตัวป้ายดูอ้วนเกินสัดส่วนในแบบ */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--g-brand-x);
  box-shadow: 0 4px 14px rgba(36, 36, 107, 0.34);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
/* ป้ายที่ถูกเลือก — ยกลอยขึ้นแทนการตีกรอบ
   ตามแบบล่าสุดป้ายต้องไม่มีขอบเลย จึงใช้เงาที่ลึกขึ้น + ขยายเล็กน้อยเป็นสัญญาณแทน
   (ต้องใส่ translateY(-50%) ซ้ำ เพราะ transform ตัวเดียวเขียนทับของเดิมทั้งก้อน) */
/* กรอบขอบขาวบอกว่ากำลังกดดูจุดไหนอยู่ (ตามที่ขอ) — ไม่ใช้ border สีจาง/โปร่งใส
   เพราะเคยเจอบั๊ก "ขอบขาวหลุด" ตอน border-color เพี้ยนเป็น rgba โปร่งใส (ดูคอมเมนต์เก่าที่อื่น)
   ที่นี่ตั้งใจใส่กรอบทึบชัดเจนแทน ไม่ใช่ผลพลอยได้จากบั๊ก */
.hs-chip[aria-pressed='true'] {
  border: 2px solid #fff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 8px 22px rgba(36, 36, 107, 0.45);
}

/* การ์ด popup ลอยข้างจุดที่เลือก */
.popup-card {
  position: absolute;
  left: var(--sp-4);
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  /* ตัวอักษรถูกขอให้ใหญ่ขึ้นเป็น 28/19px จึงต้องคืนความกว้างให้คอลัมน์ข้อความ
     แต่ห้ามกว้างเกินขอบซ้ายของป้าย hotspot ที่ลอยอยู่ริมขวา (วัดจริง x=278 ที่จอ 390)
     ไม่งั้นการ์ดจะบังป้ายจนกดป้ายอื่นไม่ได้จนต้องปิดการ์ดก่อน (check-audio จับได้)
     calc(100% - 140px) = กันที่ริมขวาไว้ให้ป้ายที่ยาวสุด ("ตับอ่อน" 102px) + ระยะห่าง 8px
     + เผื่อไว้อีกหน่อยเผื่อป้ายยาวขึ้นในอนาคต (วัดแล้วเหลือช่องว่างจริง ~9px)
     ที่เหลือไปคืนให้ข้อความด้วยไอคอนที่เล็กลง + padding/gap ที่แคบลง */
  width: min(86%, 310px, calc(100% - 140px));
  padding: var(--sp-3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--sh-card-lg);
  pointer-events: auto;
  animation: screen-in var(--t-fast) var(--ease-out) both;
}
.popup-card__icon {
  display: grid;
  place-items: center;
  /* 48px ไม่ใช่ 62px — คืนความกว้าง 14px ให้คอลัมน์ข้อความ (ดูเหตุผลที่ .popup-card) */
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--c-purple-100);
  color: var(--c-purple-600);
}
.popup-card__icon svg { width: 36px; height: 36px; }
.popup-card__icon--photo { background: none; }
.popup-card__icon--photo img { width: 100%; height: 100%; border-radius: 50%; }
/* ขนาดฟ้อนหัวข้อ/คำอธิบาย popup ตามที่ทีมออกแบบขอเพิ่ม (เดิม clamp ตามระบบ) */
.popup-card__title { margin: 0 0 2px; font-size: 28px; font-weight: 800; }
.popup-card__body { margin: 0; font-size: 19px; line-height: 1.45; color: var(--c-text); }

/* =============================================================
   MARKER 03 — เกจ + สไลเดอร์
   ============================================================= */
.gauge-top {
  position: relative;
  z-index: 0;
  display: grid;
  justify-items: center;
  /* ระยะในบล็อกนี้บีบไว้ตั้งใจ — ช่องวางมาสคอตคือระยะจากขอบล่างบล็อกนี้
     ถึงขอบบนการ์ด "ปรับระดับของคุณ" ทุก px ที่คืนมาทำให้มาสคอตใหญ่ขึ้นตรง ๆ
     (มาสคอตจะโตเกินช่องไม่ได้ เพราะด้านบนมีเกจทับ ด้านล่างมีการ์ดทับ) */
  gap: 5px;
  padding: clamp(4px, calc(var(--app-h, 800px) * 0.0095), var(--sp-2)) var(--sp-4) 2px;
  margin: 0 calc(var(--sp-4) * -1) 0;
}
/* ไล่ขาวจากบนลงล่าง กันข้อความ/ภาพพิมพ์บนแผ่นพับ (ที่เห็นผ่านกล้อง) ทะลุมาทับตัวเลขอ่านค่า
   ยืดขึ้นเกินขอบจอเสมอ (top ติดลบมาก ๆ) ให้พื้นขาวชนขอบบนสุดของจอจริง
   ไม่ว่า topbar/hint จะสูงแค่ไหนบนอุปกรณ์นั้น ๆ */
.gauge-top::before {
  content: '';
  position: absolute;
  top: -600px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(180deg, #fff 0%, #fff calc(100% - 90px), rgba(255, 255, 255, 0) 100%);
}

/* ช่องว่างสำหรับมาสคอต 3D — ตัวโมเดลถูกเรนเดอร์ด้วย WebGL ทับตรงนี้พอดี
   (engine.placeInSlot จัดให้ขอบล่างโมเดลตรงกับขอบล่างช่อง = ขอบบนการ์ดสไลเดอร์)
   div นี้จึงเป็นแค่ "ที่จองพื้นที่" ไม่มีเนื้อหาและกดทะลุไปหาโมเดลได้ */
/* การ์ดอธิบายโซนของหน้า AR3 — ทุกใบซ้อนในช่องกริดเดียว
   ใบที่ยังไม่ถึงคิวถูกซ่อนด้วย opacity (ไม่ใช่ display:none) จึงยังกินความสูงอยู่
   ทำให้ความสูงบล็อกนี้เท่ากับใบที่ข้อความยาวสุดเสมอ กรอบสไลเดอร์ด้านบนไม่ขยับ
   ผลพลอยได้: ได้การไล่ภาพนุ่ม ๆ ตอนเปลี่ยนโซนมาฟรี */
.gauge-zones {
  display: grid;
}
.gauge-zones > .info-card {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.gauge-zones > .info-card.is-on {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .gauge-zones > .info-card { transition: none; }
}

.gauge-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  line-height: 1;
}
.gauge-readout__value {
  /* ผูกกับความสูงจอ ไม่ใช่ความกว้าง — ตัวเลขนี้แย่งที่กับมาสคอตในแนวตั้ง
     ค่าที่ได้บนจอ 844px ≈ 37px เท่ากับของเดิมที่ผูกกับความกว้าง (9.6vw) */
  /* ขยายขึ้นจากเดิม (สูงสุด 42px) ตามที่ขอ */
  font-size: clamp(30px, calc(var(--app-h, 800px) * 0.052), 50px);
  font-weight: 800;
  color: var(--c-magenta-500);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.85);
}
/* หน่วยเป็นน้ำเงินตามธีม ต่างจากตัวเลขที่เป็นชมพู — ตามแบบล่าสุด
   (เดิมชมพูทั้งคู่ ทำให้ตัวเลขไม่เด่นออกมาจากหน่วย) */
.gauge-readout__unit {
  margin-top: 2px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-navy-800);
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9);
}

/* ความสูงหน้าปัดมาจากความกว้าง (สัดส่วนคงที่) จึงคุมความกว้างด้วยความสูงจอไปด้วย
   ย่อลงจากเดิม (218px, 0.28) ตามที่ขอ "ลดความสูง Process Grade" — คืนพื้นที่แนวตั้งให้มาสคอต
   (ไม่ได้ลดเป๊ะ 50% เพราะตัวเลข 70/180 จะเล็กจนอ่านไม่ออก ลดไว้ที่พอเห็นผลชัดแต่ยังอ่านง่าย) */
/* ความสูงมาสคอตที่ "มองเห็น" = ระยะจากขอบล่างบล็อกเกจถึงขอบบนการ์ดสไลเดอร์
   (ส่วนที่เกินลงไปถูกการ์ดทับ) เกจแคบลงทุก px จึงคืนความสูงให้มาสคอตตรง ๆ
   34% (=132px ที่จอ 390) ยังอ่านเลข 70/180 บนเส้นโค้งได้ — แคบกว่านี้ตัวเลขเริ่มชนกัน */
.gauge-dial { width: min(38%, 148px, calc(var(--app-h, 800px) * 0.19)); }
.gauge-svg {
  width: 100%;
  height: auto;
  padding: var(--sp-2) var(--sp-3) 0;
  /* แผ่นขาวโปร่งรองหลังเกจ ให้เส้นและตัวเลขอ่านออกบนภาพกล้อง */
  background: rgba(255, 255, 255, 0.88);
  border-radius: 40% 40% 22% 22% / 46% 46% 18% 18%;
  box-shadow: 0 6px 20px rgba(36, 36, 107, 0.14);
}
.gauge-svg__tick {
  font-family: var(--f-thai);
  font-size: 12px;
  font-weight: 700;
  fill: var(--c-navy-900);
  text-anchor: middle;
}

/* ป้าย ต่ำ/เป้าหมาย/สูง ใต้เข็มเกจ
 *
 * กว้างกว่ากรอบเกจโดยตั้งใจ — เกจถูกย่อลงเพื่อคืนความสูงให้มาสคอต ถ้าป้ายกว้างเท่าเกจ
 * สามคำจะเบียดทับกันเอง (วัดจริง: กรอบ 122px แต่สามคำต้องการ ~150px) จึงกาง 216px
 * แล้วดึงกลับมากึ่งกลางด้วย margin แบบเปอร์เซ็นต์ (อ้างความกว้างกรอบเกจ)
 *
 * มีพื้นขาวรองด้วย เพราะป้ายกางเลยแผ่นขาวของเกจออกไป ถ้าไม่มีพื้นจะไปทับข้อความ
 * ที่พิมพ์บนแผ่นพับ (เห็นผ่านกล้อง) แล้วอ่านไม่ออกทั้งสองฝ่าย — text-shadow ไม่พอ */
.gauge-dial__labels {
  display: flex;
  justify-content: space-between;
  width: 216px;
  margin-top: -2px;
  margin-inline-start: calc(50% - 108px);
  padding: 1px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.gauge-dial__labels [data-tone='low'],
.gauge-card__labels [data-tone='low'] { color: var(--c-navy-900); }
.gauge-dial__labels [data-tone='normal'],
.gauge-card__labels [data-tone='normal'] { color: var(--c-magenta-500); }
.gauge-dial__labels [data-tone='high'],
.gauge-card__labels [data-tone='high'] { color: var(--c-navy-900); }

/* การ์ดสไลเดอร์ — มุม 14px เท่ากรอบ Card อื่นทั้งแอปตามที่ขอ */
.gauge-card {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--sh-card-lg);
  overflow: hidden;
}
/* การ์ด "ปรับระดับของคุณ" บีบระยะในให้ใกล้แบบ (ar03-2.png: ทั้งการ์ดสูง ~72px ของเราเดิม 122px)
 * ทุก px ที่คืนมาไปเป็นความสูงมาสคอตตรง ๆ (ช่องมาสคอต = ระหว่างเกจกับการ์ดนี้)
 * ต้องบีบหลังยกปุ่มล่างขึ้นตามแบบ (2026-09-30) ซึ่งกินความสูงไป ~40px ไม่งั้นมาสคอตกลับไปเหลือแค่หัว
 * ขนาดตัวอักษรคงเดิมตามที่ขอไว้ — ลดเฉพาะช่องว่าง (ยังเผื่อที่ให้หัวจับแถบ 30px ที่ยื่นพ้นแถบ 16px) */
.gauge-card__head {
  margin: 0;
  padding: 3px var(--sp-4);
  background: var(--g-brand);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 700;
  text-align: center;
}
.gauge-card__body {
  padding: 6px var(--sp-5) 12px;
}
.gauge-card__labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
  line-height: 1.25;
  /* ขยายขึ้นจาก --fs-sm (12.5-15px) ตามที่ขอ */
  font-size: 17px;
  font-weight: 700;
}

.gauge-track {
  position: relative;
  height: 16px;
  border-radius: var(--r-pill);
  /* ไล่สีต่อเนื่องไม่มีรอยแบ่งโซน — ตามอาร์ตเวิร์ก assets/img/pic/ar3/ar3-img-1.png
     (สุ่มพิกเซลตามยาว: ปลายซ้าย #3b5bbe · กลาง #22aca6 · ปลายขวา #ed4c26)
     รอบก่อนแบ่งเป็น 3 บล็อกสีตามขีด 70/180 ซึ่งไม่ตรงแบบ — ขอบโซนสื่อด้วยเกจด้านบนแล้ว
     สีตรงนี้จึงไม่ใช้โทเคน --c-low/--c-normal/--c-high เพราะปลายไล่สีของแถบ
     เป็นสีคนละชุดกับแถบโค้งของเกจ (น้ำเงินอมม่วงกว่า) ตามที่ทีมออกแบบวาดมา */
  background: linear-gradient(90deg, #3b5bbe 0%, #22aca6 50%, #ed4c26 100%);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.18);
}

.gauge-input {
  position: absolute;
  inset: -14px 0;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.gauge-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border: 4px solid var(--c-navy-800);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.gauge-input::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 4px solid var(--c-navy-800);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* =============================================================
   หน้าสรุปการเรียนรู้
   ============================================================= */
.modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  padding: var(--sp-4);
  place-items: center;
  background: rgba(20, 20, 45, 0.42);
  backdrop-filter: blur(3px);
}
.modal.is-open { display: grid; animation: screen-in var(--t-base) var(--ease-out) both; }

/**
 * การ์ดหน้าสรุป — ตัวนอกไม่เลื่อน ทำหน้าที่คุมมุมโค้งและตัดสิ่งที่ล้น
 * ส่วนที่เลื่อนคือ .modal__scroll ด้านใน ซึ่งถูกเว้นจากขอบการ์ดไว้
 *
 * ทำไมต้องแยกสองชั้น: เบราว์เซอร์ไม่ตัดแถบเลื่อนตาม border-radius
 * ถ้าให้ตัวการ์ดเลื่อนเอง แถบจะไปวางทับมุมโค้งจนดูเหมือนโพล่ออกนอกกรอบ
 * (iOS ยังเมิน ::-webkit-scrollbar อีก จะแก้ด้วย CSS แถบเลื่อนตรง ๆ ไม่ได้)
 */
.modal__panel {
  position: relative;
  width: 100%;
  max-height: 100%;
  padding: var(--sp-3) var(--sp-2) var(--sp-3) 0;
  overflow: hidden;
  /* ลดมุมโค้งจาก --r-xl (32px) ตามที่ขอ ให้เหลือ 14px เท่าปุ่ม (--r-btn) */
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 238, 248, 0.97));
  box-shadow: var(--sh-card-lg);
  display: flex;
}

.modal__scroll {
  /* ระยะห่างทุกจุดในหน้าสรุปยุบตามความสูงจอจริง เพื่อให้เนื้อหาพอดีจอเดียว
     ตั้งแต่มือถือเตี้ย (~640px) ขึ้นไป ไม่ต้องเลื่อนขึ้นลง */
  --sum-gap: clamp(8px, calc(var(--app-h, 800px) * 0.0185), 16px);
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  padding: var(--sum-gap) var(--sp-4) var(--sum-gap) var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Firefox — แถบเลื่อนบางสีม่วงตามโทนระบบ */
  scrollbar-width: thin;
  scrollbar-color: var(--c-purple-500) transparent;
}

/* WebKit/Blink — แถบม่วงมนตามโทนระบบ ขอบโปร่งใสทำให้ thumb บางและไม่ชนขอบ */
.modal__scroll::-webkit-scrollbar { width: 12px; }
.modal__scroll::-webkit-scrollbar-track { background: transparent; }
.modal__scroll::-webkit-scrollbar-thumb {
  background: var(--c-purple-500);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: var(--r-pill);
}
.modal__scroll::-webkit-scrollbar-thumb:hover {
  background: var(--c-purple-600);
  background-clip: padding-box;
}
.modal__close { position: absolute; top: var(--sp-3); right: var(--sp-3); }

/* ---------- หน้าสรุปการเรียนรู้ (modal) ---------- */
.summary-title {
  /* เว้นทางให้ปุ่มปิดที่ลอยมุมขวาบน */
  margin: 0 44px;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-navy-900);
}

/* หัวเรื่องหน้าสรุป — ภาพเดียวจากทีมออกแบบ (result-topic.webp)
   รวมหัวข้อ "สรุปการเรียนรู้" + ตราเครื่องหมายถูก + ประกาย + "เรียนรู้ครบแล้ว!" ไว้แล้ว

   คุมด้วยความสูง ไม่ใช่ความกว้าง เพราะบล็อกนี้แทนที่ข้อความ 4 บรรทัดที่เคยยืดหดตามจอ
   ถ้าคุมด้วยความกว้าง จอเตี้ยจะสูงเกินจนต้องเลื่อนหน้าจอ */
.summary-topic {
  display: block;
  width: auto;
  height: clamp(190px, calc(var(--app-h, 800px) * 0.315), 268px);
  max-width: 100%;
  margin: calc(var(--sum-gap) * 0.5) auto calc(var(--sum-gap) * 0.25);
}

/* ตราเครื่องหมายถูกเดี่ยว ๆ — ใช้ตอนยังดูไม่ครบ 4 หัวข้อ (พาดหัวต้องเป็นข้อความ)
   สีเทาแทนไล่สีชมพู-ม่วง เพื่อสื่อว่า "ยังไม่บรรลุ" — ตัดกับภาพเดียวกันตอนครบ (RESULT_TOPIC)
   ซึ่งมีตราเครื่องหมายถูกสีสันเต็มอยู่แล้วในภาพนั้นเอง */
.summary-badge {
  display: block;
  width: auto;
  height: clamp(76px, calc(var(--app-h, 800px) * 0.125), 104px);
  margin: var(--sum-gap) auto calc(var(--sum-gap) * 0.75);
  filter: grayscale(1);
}

.summary-heading {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-navy-900);
}
.summary-sub {
  margin: calc(var(--sum-gap) * 0.5) 0 0;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--c-text-muted);
}

.summary-list { margin-top: var(--sum-gap); padding: var(--sp-1) var(--sp-5); }

/* การ์ดโรงพยาบาลท้ายหน้าสรุป — ตรา | ชื่อไทย (หนา) + ชื่ออังกฤษ (บาง)
   Flow 2026-09-03: ไม่มีเส้นคั่นไล่สี และไม่มีข้อความผู้สนับสนุนอยู่ในการ์ดแล้ว
   (แถวผู้สนับสนุนย้ายออกไปอยู่นอกการ์ด — ดู .summary-sponsor)

   ตรา+ข้อความจัดเป็นก้อนกึ่งกลางการ์ดด้วย grid-template-columns: auto auto + justify-content
   ไม่ใช่ auto 1fr แบบเดิม เพราะเดิมคอลัมน์ข้อความกินที่ว่างทั้งหมดแล้วจัดกลางในคอลัมน์ตัวเอง
   ทำให้ทั้งก้อนเยื้องขวาเมื่อชื่อสั้นลง (เหลือสองบรรทัดจากสามบรรทัด) */
.summary-org {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sum-gap);
  padding: calc(var(--sum-gap) * 0.75) var(--sp-5);
}
/* ขนาดโลโก้เท่ากับตราหน้าแรก (.brand-mark) ตามที่ขอ */
.summary-org__logo { width: 74px; height: auto; }
.summary-org__text { text-align: left; }
.summary-org__name {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.25;
  color: var(--c-navy-900);
}
.summary-org__name-en {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
}

/* แถวผู้สนับสนุน — อยู่ "นอก" การ์ด บนพื้น popup ตาม Flow ฉบับใหม่
   จึงไม่มีพื้นขาว/เงาแบบ .brand-bar ของหน้าอื่น */
.summary-sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: calc(var(--sum-gap) * 0.55) 0 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-muted);
}
.summary-sponsor img { width: 26px; height: 26px; }
/* ชื่อผู้สนับสนุนเป็นสีชมพูตัวหนา ตัดกับคำ "สนับสนุนโดย" สีจาง — ตามแบบใน Flow */
.summary-sponsor b { font-weight: 700; color: var(--c-magenta-500); }

.checklist { display: grid; margin: 0; padding: 0; list-style: none; }
.checklist li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding: calc(var(--sum-gap) * 0.7) 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--c-navy-900);
}
.checklist li:last-child { border-bottom: 0; }
.checklist__tick { width: 34px; height: 34px; }
/* หัวข้อที่ยังไม่ได้ดู — ใช้ภาพใบเดียวกันแต่ถอดสีออก จะได้ไม่ต้องมีไฟล์สองชุด */
.checklist li[data-done='false'] .checklist__tick {
  filter: grayscale(1) opacity(0.4);
}


/* ปุ่ม บันทึก / แชร์ / ดูวิดีโอ */
/* ---------- ประตูล็อกแนวตั้ง ---------- */
.rotate-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  color: #fff;
  background: var(--g-brand);
}
.rotate-gate__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--sp-5);
  animation: rotate-nudge 2.4s var(--ease-in-out) infinite;
}
.rotate-gate h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-h2); font-weight: 800; }
.rotate-gate p { margin: 0; font-size: var(--fs-body); opacity: 0.9; }

@keyframes rotate-nudge {
  0%, 45%, 100% { transform: rotate(-90deg); }
  60%, 85% { transform: rotate(0deg); }
}

/* จอแนวนอน = บังทั้งหมด (กติกาหลัก ใช้ได้ทุกเบราว์เซอร์รวม iOS) */
@media (orientation: landscape) and (max-height: 560px) {
  .rotate-gate { display: grid; }
  .stage { visibility: hidden; }
}
html[data-force-portrait='true'] .rotate-gate { display: grid; }
html[data-force-portrait='true'] .stage { visibility: hidden; }

/* ---------- โหมดพรีวิว ?mock= ---------- */
.ar-mock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #10101f;
}
.ar-mocktag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  padding: 2px 12px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--c-high);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
  pointer-events: none;
}

.ar-debug {
  position: absolute;
  bottom: calc(var(--safe-b) + 2px);
  left: 6px;
  z-index: 30;
  margin: 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #6cf;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  pointer-events: none;
}

/* ---------- misc ---------- */
.notice {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: #fff6e5;
  border: 1px solid #f3d9a4;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #6b4a10;
}

.spinner {
  width: 34px;
  height: 34px;
  border: 4px solid rgba(36, 36, 107, 0.18);
  border-top-color: var(--c-magenta-500);
  border-radius: var(--r-pill);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stack   { display: grid; gap: var(--sp-4); }
/* flex:0 0 auto — ปุ่มข้างในเป็น grid item จึงไม่ได้รับผลจาก flex ของตัวเอง
   ถ้าไม่ล็อกตรงนี้ กลุ่มปุ่มจะถูกบีบจนเงาไปทับแถบผู้สนับสนุนตอนจอเตี้ย */
.stack-3 { display: grid; gap: var(--sp-3); flex: 0 0 auto; }