/* ==========================================================================
   KorporPrep — design tokens · v2 (27 ก.ย. 2026) = v1.1 + palette 6 / 23
   v1.1 = v1 + ค่าที่เสนอเพิ่ม 3 ตัว (ทำเครื่องหมาย [v1.1] ไว้) รอ B ยืนยัน
   วางไฟล์นี้ที่ web/css/tokens.css แล้ว <link> ไว้ก่อน CSS อื่นทุกหน้า
   กฎ: ในไฟล์อื่นห้ามเขียน hex ตรง ๆ ให้อ้าง var(--...) เท่านั้น
   ========================================================================== */
:root{
  --c-pink:#FF2E63; --c-pink-dark:#F0104A; --c-pink-text:#D1164A; --c-pink-tint:#FFF0F5;
  --c-ink:#141414; --c-ink-soft:#3A3A3A; --c-muted:#5E5E5E; --c-muted-dark:#A8A8A8;
  --c-white:#FFFFFF; --c-card:#F5F5F2; --c-line:#E6E6E1; --c-lime:#C9F27A;
  --c-ok:#1F9D55; --c-bad:#C62828; --c-line-brand:#06C755;
  --c-ink-raised:#1F1F1F;   /* [v1.1] การ์ดบนพื้นดำ (ค่าเดิมจาก homepage v3) */
  --c-bad-tint:#FDECEC;     /* [v1.1] ย้ายจาก --state-bad-bg ที่เคยเป็น hex ตรง */

  /* ---------- [v2] palette 6 ชมพูแดง × ดำ ---------- */
  --c-p6-pink:#FF2E63; --c-p6-text:#D1164A; --c-p6-tint:#FFF0F3;
  /* ---------- [v2] palette 23 แก้วมังกร ---------- */
  --c-p23-pink:#E6317D; --c-p23-text:#C21F66; --c-p23-tint:#FFF0F5; --c-p23-ink:#111111;
  /* ---------- [v2] กลางที่หน้าแรกใช้เพิ่ม ---------- */
  --c-line-dark:#2E2E2E;   /* เส้นขอบการ์ดบนพื้นดำ */
  --c-paper-line:#EADFE4;  /* เส้นกระดาษในแนว 2 วงครู */

  --bg:var(--c-white); --bg-alt:var(--c-card); --bg-tint:var(--c-pink-tint); --bg-dark:var(--c-ink);
  --bg-dark-raised:var(--c-ink-raised);   /* [v1.1] */
  --border-on-dark:var(--c-ink-soft);     /* [v1.1] เส้นขอบ/แถบ progress ว่างบนพื้นดำ */
  --text:var(--c-ink); --text-muted:var(--c-muted); --text-on-dark:var(--c-white);
  --text-muted-on-dark:var(--c-muted-dark); --border:var(--c-line);

  --accent:var(--c-pink); --accent-hover:var(--c-pink-dark); --accent-text:var(--c-pink-text);
  --on-accent:var(--c-ink); --accent-on-dark:var(--c-pink);
  --highlight-bg:var(--c-lime); --highlight-ink:var(--c-ink);

  --state-ok:var(--c-ok); --state-ok-bg:var(--c-white); --state-bad:var(--c-bad);
  --state-bad-bg:var(--c-bad-tint); --state-selected:var(--c-ink);

  --font-head:'Prompt',sans-serif; --font-body:'Sarabun',sans-serif;
  --fs-h1:clamp(30px,8vw,52px); --fs-h2:clamp(25px,6vw,38px); --fs-h3:19px; --fs-lead:18px;
  --fs-body:17px; --fs-sm:15px; --fs-xs:13px;
  --fw-head:700; --fw-semi:600; --fw-body:400; --lh-head:1.3; --lh-body:1.65;

  --r-xl:28px; --r:18px; --r-btn:14px; --r-sm:12px; --r-hl:6px; --r-pill:999px;
  --shadow-accent:0 6px 18px rgba(255,46,99,.28); --shadow-card:0 12px 30px rgba(20,20,20,.08);

  --max:1120px; --gutter:16px; --section-y:64px; --tap-min:52px;
  --num-s:36px; --num-m:48px; --num-l:78px;
}
@media (min-width:760px){ :root{ --section-y:88px; } }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);
  font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.btn,.num,.price{font-family:var(--font-head);line-height:var(--lh-head)}
h1{font-size:var(--fs-h1);font-weight:var(--fw-head)}
h2{font-size:var(--fs-h2);font-weight:var(--fw-head)}
h3{font-size:var(--fs-h3);font-weight:var(--fw-semi)}
a{color:var(--accent-text)} a:hover{color:var(--accent-hover)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap-min);
  padding:16px 26px;border:0;border-radius:var(--r-btn);font-size:18px;font-weight:var(--fw-semi);
  text-decoration:none;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-accent)}
.btn-primary:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn-ghost{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
.btn-line{background:var(--c-line-brand);color:var(--c-white);font-weight:var(--fw-head)}

.num{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-weight:var(--fw-head);flex-shrink:0}
.num.s{width:var(--num-s);height:var(--num-s);font-size:16px}
.num.m{width:var(--num-m);height:var(--num-m);font-size:20px}
.num.soft{background:var(--bg-tint);color:var(--accent-text)}

.hl{background:var(--highlight-bg);color:var(--highlight-ink);border-radius:var(--r-hl);padding:0 .15em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.bg-dark .hl{background:none;color:var(--c-lime)}

.opt{width:100%;min-height:var(--tap-min);padding:12px 16px;text-align:left;border-radius:var(--r-sm);
  background:var(--bg);border:1.5px solid var(--border);color:var(--text);
  font-family:var(--font-head);font-size:18px;font-weight:var(--fw-semi)}
.opt[aria-pressed="true"]{border-color:var(--state-selected);border-width:2px}
.opt.is-correct{border-color:var(--state-ok);background:var(--state-ok-bg)}
.opt.is-wrong{border-color:var(--state-bad);background:var(--state-bad-bg)}
.state{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:var(--fw-semi)}
.state-ok{color:var(--text)}
.state-ok .ic{color:var(--state-ok)}
.state-bad,.state-bad .ic{color:var(--state-bad)}

.pill{display:inline-block;border-radius:var(--r-pill);padding:4px 12px;font-family:var(--font-head);
  font-size:14px;font-weight:var(--fw-semi);background:var(--bg-tint);color:var(--accent-text)}
.card{background:var(--bg-alt);border-radius:var(--r);padding:22px}
.bg-dark{background:var(--bg-dark);color:var(--text-on-dark)}
.bg-dark p{color:var(--text-muted-on-dark)}