/* ════════════════════════════════════════════════════════════════════════════
   kaizen-award — Document Intelligence Studio (Modern SaaS, light)
   โทเคนใน :root ยกมาตรงจาก ~/Claude/kaizen/frontend/assets/css/base.css
   (ซึ่งยกจาก document-studio อีกที) เพื่อให้แอปในตระกูลเดียวกันหน้าตาตรงกัน
   ส่วนที่เพิ่ม: เลย์เอาต์มือถือสำหรับ LINE Mini App — แถบล่าง + safe-area
   โครงสร้างหลักคือ flat + hairline borders · ไม่มี gradient · ไม่มี backdrop-filter
   ════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light;
  --bg-primary:#fff; --bg-secondary:#f2f2f7; --bg-tertiary:#fff;
  --bg-elevated:#fff; --bg-quaternary:#e5e5ea; --bg-grouped:#f2f2f7;
  --label:rgba(0,0,0,.88); --label-2:rgba(60,60,67,.6);
  --label-3:rgba(60,60,67,.56); --label-4:rgba(60,60,67,.18);
  --sep:rgba(0,0,0,.12); --sep-opaque:#dadadd;
  --border:rgba(0,0,0,.14); --border-strong:rgba(0,0,0,.20);
  --fill-1:rgba(0,0,0,.07); --fill-2:rgba(0,0,0,.05);
  --fill-3:rgba(0,0,0,.04); --fill-4:rgba(0,0,0,.025);
  --blue:#007aff; --blue-hover:#0a6ae6; --blue-active:#0057cc;
  --green:#34c759; --green-text:#1e803a; --indigo:#5856d6;
  --orange:#ff9500; --orange-text:#b8690a; --purple:#af52de;
  --red:#ff3b30; --red-text:#d70015; --teal:#30b0c7;
  --font:'Inter','Noto Sans Thai',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono','Menlo',monospace;
  --r-xs:3px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-badge:5px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow-md:0 1px 3px rgba(0,0,0,.06);
  --shadow-lg:0 4px 12px rgba(0,0,0,.08); --shadow-xl:0 8px 24px rgba(0,0,0,.12);
  --ease:cubic-bezier(.25,.46,.45,.94); --dur-fast:.12s; --dur-normal:.2s;
  --s-1:4px; --s-2:6px; --s-3:8px; --s-4:10px; --s-5:12px; --s-6:16px;
  --s-7:20px; --s-8:24px; --s-9:32px;
  --header-h:52px; --nav-h:58px;
}

@font-face{font-family:'Inter';src:url('../fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'Noto Sans Thai';src:url('../fonts/NotoSansThai-400.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans Thai';src:url('../fonts/NotoSansThai-600.woff2') format('woff2');
  font-weight:600;font-display:swap}

/* องค์ประกอบที่ตั้ง display: ไว้ (grid/flex) จะชนะแอตทริบิวต์ hidden
   ถ้าไม่บังคับตรงนี้ ปุ่มย้อนกลับกับรูปโปรไฟล์จะโผล่ในหน้าเข้าสู่ระบบ */
[hidden]{display:none!important}

html,body{height:100%}
body{background:var(--bg-grouped);color:var(--label);font-family:var(--font);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}

/* ── โครงหน้าจอ ─────────────────────────────────────────────────────────── */
#app{min-height:100%;display:flex;flex-direction:column}
.hdr{position:sticky;top:0;z-index:30;height:var(--header-h);flex:0 0 auto;
  display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-5);
  background:var(--bg-primary);border-bottom:1px solid var(--sep)}
.hdr h1{font-size:16px;font-weight:600;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .back{width:32px;height:32px;margin-left:-6px;border:0;background:none;
  border-radius:var(--r-md);display:grid;place-items:center;font-size:20px;
  color:var(--blue);cursor:pointer}
.hdr .back:active{background:var(--fill-2)}
.avatar{width:30px;height:30px;border-radius:50%;border:1px solid var(--sep);
  object-fit:cover;background:var(--fill-2);flex:0 0 auto;cursor:pointer;
  display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--label-2)}
main{flex:1 1 auto;padding:var(--s-5);padding-bottom:calc(var(--nav-h) + 28px);
  max-width:760px;width:100%;margin:0 auto}
@media(min-width:768px){main{padding:var(--s-7) var(--s-6)
  calc(var(--nav-h) + 32px)}}

/* ── แถบล่าง (สูงสุด 6 แท็บก่อนจะอึดอัดบนจอ 320px) ─────────────────────── */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:var(--bg-primary);border-top:1px solid var(--sep);
  padding-bottom:env(safe-area-inset-bottom,0)}
.nav a{flex:1;min-width:0;height:var(--nav-h);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-size:10.5px;
  color:var(--label-3);font-weight:500}
.nav a .ic{font-size:19px;line-height:1}
.nav a.on{color:var(--blue)}
.nav a:active{background:var(--fill-3)}

/* ── การ์ด · ส่วน ──────────────────────────────────────────────────────── */
.card{background:var(--bg-primary);border:1px solid var(--sep);
  border-radius:var(--r-xl);padding:var(--s-5);margin-bottom:var(--s-4)}
.card.tap{cursor:pointer;transition:border-color var(--dur-fast) var(--ease)}
.card.tap:active{border-color:var(--border-strong);background:var(--fill-4)}
.card h3{font-size:15px;font-weight:600;margin-bottom:var(--s-2)}
.sec-t{font-size:11.5px;font-weight:600;color:var(--label-2);
  text-transform:uppercase;letter-spacing:.05em;margin:var(--s-7) 0 var(--s-3)}
.sec-t:first-child{margin-top:0}
.muted{color:var(--label-2)}
.small{font-size:13px}
.xs{font-size:12px}
.mt{margin-top:var(--s-4)}
.row{display:flex;gap:var(--s-3);align-items:center}
.row.wrap{flex-wrap:wrap}
.spread{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}

/* ── badge เหลี่ยม 5px (ไม่ใช่ pill) ───────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  border-radius:var(--r-badge);font-size:11.5px;font-weight:600;
  background:var(--fill-2);color:var(--label-2);border:1px solid transparent;
  white-space:nowrap}
.badge.b{background:#eef5ff;color:var(--blue-hover);border-color:#cfe2ff}
.badge.g{background:#eefaf0;color:var(--green-text);border-color:#cdead6}
.badge.o{background:#fff5e6;color:var(--orange-text);border-color:#ffe2b8}
.badge.r{background:#ffeceb;color:var(--red-text);border-color:#ffd4d1}
.badge.i{background:#eeeefc;color:#4341c0;border-color:#d8d8f6}

/* ── ปุ่ม ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 15px;border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--bg-primary);font-size:14px;font-weight:600;cursor:pointer;
  transition:background var(--dur-fast) var(--ease);min-height:40px}
.btn:active{background:var(--fill-2)}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:active{background:var(--blue-active);border-color:var(--blue-active)}
.btn.blk{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:6px 11px;min-height:32px;font-size:13px}
.btn.dgr{color:var(--red-text)}

/* ── ฟอร์ม ─────────────────────────────────────────────────────────────── */
.f{margin-bottom:var(--s-5)}
.f label{display:block;font-size:13px;font-weight:600;margin-bottom:var(--s-2)}
.f .hint{display:block;font-size:12px;color:var(--label-2);font-weight:400;
  margin-top:3px;line-height:1.45}
.f input,.f textarea,.f select,.sh-form .body > textarea{width:100%;padding:9px 11px;font-size:15px;
  background:var(--bg-tertiary);border:1px solid var(--border);
  border-radius:var(--r-lg);transition:border-color var(--dur-fast) var(--ease)}
.f textarea,.sh-form .body > textarea{min-height:84px;resize:vertical;line-height:1.55}
.f input:focus,.f textarea:focus,.f select:focus,.sh-form .body > textarea:focus{outline:none;
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,122,255,.12)}
.f.err input,.f.err textarea{border-color:var(--red)}
.f .msg{font-size:12px;color:var(--red-text);margin-top:4px}

/* ── chip เลือกได้ ─────────────────────────────────────────────────────── */
.bul{padding-left:var(--s-6);margin:var(--s-1) 0}
.bul li+li{margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{padding:6px 11px;border-radius:var(--r-badge);border:1px solid var(--border);
  background:var(--bg-primary);font-size:13px;font-weight:500;cursor:pointer;
  transition:all var(--dur-fast) var(--ease)}
.chip:active{background:var(--fill-2)}
.chip.on{background:#eef5ff;border-color:var(--blue);color:var(--blue-hover);font-weight:600}

/* ── แท็บขีดล่าง ───────────────────────────────────────────────────────── */
.tabs{display:flex;gap:var(--s-6);border-bottom:1px solid var(--sep);
  margin-bottom:var(--s-5);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:none;padding:9px 1px;font-size:14px;font-weight:600;
  color:var(--label-2);cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--blue);border-bottom-color:var(--blue)}

/* ── progress · meter (ใช้ภาพแทนข้อความสถานะ) ──────────────────────────── */
.bar{height:6px;border-radius:99px;background:var(--fill-1);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--blue);border-radius:99px;
  transition:width var(--dur-slow,.32s) var(--ease)}
.bar.g>i{background:var(--green)} .bar.o>i{background:var(--orange)}
.bar.r>i{background:var(--red)}

/* ── KPI ───────────────────────────────────────────────────────────────── */
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.kpi>div{border:1px solid var(--sep);border-radius:var(--r-lg);
  padding:var(--s-4) var(--s-2);text-align:center;background:var(--bg-primary)}
.kpi .lb{font-size:11px;color:var(--label-2);margin-bottom:2px}
.kpi .vl{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;
  line-height:1.2}
.kpi .un{font-size:10.5px;color:var(--label-3)}
.kpi .up .vl{color:var(--green-text)} .kpi .dn .vl{color:var(--red-text)}

/* ── รายการตรวจ ────────────────────────────────────────────────────────── */
.ck{display:flex;gap:var(--s-3);padding:var(--s-3) 0;
  border-bottom:1px solid var(--fill-3);align-items:flex-start}
.ck:last-child{border-bottom:0}
.ck .mk{width:18px;height:18px;border-radius:var(--r-sm);flex:0 0 auto;
  display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:1px}
.ck.ok .mk{background:#eefaf0;color:var(--green-text)}
.ck.no .mk{background:var(--fill-2);color:var(--label-3)}
.ck .tx{flex:1;min-width:0;font-size:13.5px}
.ck .fx{font-size:12.5px;color:var(--label-2);margin-top:3px}

/* ── flag ──────────────────────────────────────────────────────────────── */
.flag{border:1px solid var(--sep);border-left:3px solid var(--orange);
  border-radius:var(--r-lg);padding:var(--s-4);margin-bottom:var(--s-3);
  background:var(--bg-primary)}
.flag.high{border-left-color:var(--red)}
.flag.low{border-left-color:var(--label-4)}
.flag .is{font-size:13.5px;font-weight:600;margin-bottom:3px}
.flag .sg{font-size:13px;color:var(--label-2)}

/* ── รูป ───────────────────────────────────────────────────────────────── */
.ph{border:1px solid var(--sep);border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-secondary);position:relative}
.ph img{width:100%;height:130px;object-fit:cover;display:block}
.ph .empty{height:130px;display:grid;place-items:center;color:var(--label-3);
  font-size:12.5px;cursor:pointer;text-align:center;padding:var(--s-3)}
.ph .cap{font-size:11.5px;font-weight:600;padding:5px 9px;
  background:var(--fill-4);border-bottom:1px solid var(--sep);color:var(--label-2)}
.ph .rm{position:absolute;top:30px;right:6px;background:rgba(0,0,0,.6);color:#fff;
  border:0;border-radius:var(--r-sm);width:24px;height:24px;cursor:pointer;font-size:14px}

/* ── สถานะว่าง / โหลด ─────────────────────────────────────────────────── */
.empty-st{text-align:center;padding:var(--s-9) var(--s-5);color:var(--label-2)}
.empty-st .ic{font-size:34px;margin-bottom:var(--s-3);opacity:.35}
.spin{width:22px;height:22px;border:2px solid var(--fill-1);
  border-top-color:var(--blue);border-radius:50%;animation:sp .7s linear infinite;
  margin:var(--s-8) auto}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px);transform:translateX(-50%);
  background:rgba(0,0,0,.86);color:#fff;padding:9px 15px;border-radius:var(--r-lg);
  font-size:13.5px;z-index:90;max-width:88vw;text-align:center;
  animation:tin var(--dur-normal) var(--ease)}
.toast.err{background:var(--red-text)}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}}

/* ── กล่องความรู้ ──────────────────────────────────────────────────────── */
.kb{border:1px solid var(--sep);border-radius:var(--r-lg);padding:var(--s-4);
  margin-bottom:var(--s-3);background:var(--bg-primary)}
.kb .t{font-size:14px;font-weight:600;margin-bottom:2px}
.kb .m{font-size:12px;color:var(--label-3);margin-bottom:var(--s-2)}
.kb dl{font-size:13px;margin-top:var(--s-2)}
.kb dt{font-weight:600;color:var(--label-2);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.04em;margin-top:var(--s-2)}
.kb dd{margin-top:1px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ════════════════════════════════════════════════════════════════════════════
   landing page — สกิน "Blue" ยกมาจาก qccprize.com
   (ต้นแบบ: ~/Claude/qcc-story-lab/prototype/frontend/skin-blue.css)

   กลิ่นแบบ canva: มุมโค้งใหญ่ เงานุ่มแทนเส้น hairline ไทล์สีพาสเทล และ
   gradient ไซแอน→ฟ้า→คราม เป็นสำเนียงเดียวของทั้งหน้า

   ⚠ ขอบเขตอยู่ใต้ #landing เท่านั้น — ตัวแอป (#app) ยังเป็น Document
     Intelligence Studio เดิมทุกประการ (flat · hairline · ไม่มี gradient)
     สองสกินนี้อยู่คนละโลกโดยตั้งใจ: หน้าโปรโมทต้องสะดุดตา หน้าทำงานต้องเงียบ
   ════════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Anuphan';src:url('../fonts/Anuphan-thai.woff2') format('woff2');
  font-weight:400 700;font-display:swap;
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Anuphan';src:url('../fonts/Anuphan-latin.woff2') format('woff2');
  font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

#landing{
  /* โทเคนของสกินนี้ ไม่รั่วออกไปหาตัวแอป */
  --cv-cyan:#00c4cc; --cv-sky:#0a8fef; --cv-indigo:#3d52e3;
  --cv-blue:#0071e3; --cv-blue-d:#005ec4;
  --cv-ink:#101a2b; --cv-ink-soft:#4d5a6e; --cv-ink-3:#657080;
  --cv-grad:linear-gradient(95deg,#00c4cc 0%,#0a8fef 48%,#3d52e3 100%);
  /* gradient สำหรับ "ตัวอักษร" ต้องเข้มกว่าชุดตกแต่ง — ชุดสดวัดได้ 2.02:1
     ตกเกณฑ์ WCAG large text (3:1) · ชุดนี้วัดแล้ว 4.42 / 4.70 / 8.27 */
  --cv-grad-text:linear-gradient(95deg,#0a7f92 0%,#0b6fd0 48%,#3038b8 100%);
  --cv-r-tile:16px; --cv-r-card:20px; --cv-r-panel:28px; --cv-pill:980px;
  --cv-shadow:0 1px 2px rgba(16,26,43,.04),0 10px 26px rgba(16,26,43,.07);
  --cv-shadow-hi:0 3px 8px rgba(16,26,43,.06),0 22px 44px rgba(16,26,43,.13);
  --cv-line:rgba(16,26,43,.10);
  --cv-lift:transform .24s var(--ease),box-shadow .24s var(--ease);

  font-family:'Anuphan','Noto Sans Thai',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:14.5px;line-height:1.7;color:var(--cv-ink-soft);
  background:#fff;min-height:100%}
/* รีเซ็ตสีลิงก์ — ใช้ :where() ให้ specificity เป็นศูนย์ (กติกาข้อ 160)
   เดิมเป็น `#landing a` (1,0,1) ซึ่งชนะกฎคลาสทุกตัวที่ตั้งสีลิงก์ไว้
   ปุ่มหลัก ลิงก์ "อ่านต่อ" และลิงก์ท้ายหน้าจึงได้สีที่สืบทอดมา ไม่ใช่สีที่เขียนไว้ */
:where(#landing) a{color:inherit}
#landing ::selection{background:rgba(0,113,227,.14)}

/* ── แถบบน — โปร่งแสงเบลอฉากหลัง + ปุ่มทรงยาปั้ม ────────────────────────── */
.lp-nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:13px 28px;
  background:rgba(255,255,255,.78);border-bottom:1px solid rgba(16,26,43,.07)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lp-nav{-webkit-backdrop-filter:saturate(180%) blur(20px);
          backdrop-filter:saturate(180%) blur(20px)}
}
.lp-brand{display:flex;align-items:baseline;gap:9px;min-width:0;white-space:nowrap;
  font-size:17px;font-weight:700;letter-spacing:-.022em;color:var(--cv-ink)}
.lp-by{font-size:12px;font-weight:400;color:var(--cv-ink-3);letter-spacing:0;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.lp-nav nav{display:flex;align-items:center;gap:22px;font-size:13.5px;flex:none}
.lp-nav nav a{color:var(--cv-ink-soft);white-space:nowrap}
.lp-nav nav a:hover{color:var(--cv-blue)}
.lp-nav nav a.lp-cta-sm{border:1px solid var(--cv-line);border-radius:var(--cv-pill);
  padding:7px 18px;color:var(--cv-ink);font-weight:600;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.lp-nav nav a.lp-cta-sm:hover{border-color:rgba(0,113,227,.45);color:var(--cv-blue)}

/* ── HERO — gradient mesh สี่จุด ไม่ใช่พื้นเทาเรียบ ──────────────────────── */
.lp-hero{text-align:center;padding:clamp(56px,10vw,104px) 28px clamp(48px,8vw,80px);
  background:
    radial-gradient(680px 500px at 22% 14%,rgba(  0,196,204,.22),transparent 64%),
    radial-gradient(640px 480px at 80% 20%,rgba( 10,143,239,.22),transparent 62%),
    radial-gradient(600px 440px at 68% 86%,rgba( 61, 82,227,.16),transparent 64%),
    radial-gradient(560px 430px at 24% 88%,rgba(  0,164,220,.16),transparent 64%),
    linear-gradient(180deg,#fff 0%,#fafcff 58%,#f2f7ff 100%)}
.lp-hero-in{max-width:820px;margin:0 auto}

/* eyebrow = pill โปร่งแสง มีจุด gradient นำหน้า */
.lp-eyebrow{display:inline-flex;align-items:center;gap:9px;
  padding:7px 17px 7px 13px;border-radius:var(--cv-pill);
  background:rgba(255,255,255,.75);border:1px solid rgba(0,113,227,.18);
  color:var(--cv-ink-soft);font-size:12.5px;font-weight:500;
  box-shadow:0 1px 2px rgba(16,26,43,.04),0 8px 20px rgba(16,26,43,.06);
  margin-bottom:26px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lp-eyebrow{-webkit-backdrop-filter:saturate(180%) blur(10px);
              backdrop-filter:saturate(180%) blur(10px)}
}
.lp-eyebrow::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--cv-grad)}

.lp-hero h1{font-size:clamp(30px,5.4vw,48px);font-weight:700;line-height:1.15;
  letter-spacing:-.038em;color:var(--cv-ink);margin-bottom:22px}
.lp-hero h1 .accent{color:var(--cv-blue)}
.lp-lede{font-size:clamp(15px,1.8vw,17px);line-height:1.75;color:var(--cv-ink-soft);
  max-width:640px;margin:0 auto}

/* ── ปุ่ม — ทรงยาปั้ม เรืองเงาสีฟ้า ยกตอน hover ─────────────────────────── */
.lp-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 30px;border-radius:var(--cv-pill);border:1px solid var(--cv-line);
  background:rgba(255,255,255,.9);color:var(--cv-ink);font-size:14.5px;font-weight:600;
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),var(--cv-lift)}
.lp-btn:hover{background:#fff;color:var(--cv-blue);border-color:rgba(0,113,227,.45);
  transform:translateY(-2px);box-shadow:var(--cv-shadow)}
.lp-btn.pri{background:var(--cv-blue);border-color:var(--cv-blue);color:#fff;
  box-shadow:0 2px 6px rgba(0,113,227,.22),0 10px 22px rgba(0,113,227,.20)}
.lp-btn.pri:hover{background:var(--cv-blue-d);border-color:var(--cv-blue-d);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,113,227,.24),0 16px 30px rgba(0,113,227,.26)}

/* ── แถบตัวเลข — ตัวเลข gradient บนพื้นนวล ต่อเนื่องจาก hero ────────────── */
.lp-stats{background:linear-gradient(180deg,#f2f7ff 0%,#f7faff 100%);
  padding:34px 28px}
.lp-stats-in{max-width:820px;margin:0 auto;display:flex;flex-wrap:wrap;
  justify-content:center;gap:0}
.lp-stat{flex:1 1 150px;text-align:center;position:relative;padding:6px 18px}
.lp-stat+.lp-stat::before{content:'';position:absolute;left:0;top:14%;height:72%;
  width:1px;background:rgba(16,26,43,.08)}
.lp-stat b{display:block;font-size:clamp(26px,3.6vw,34px);font-weight:700;
  letter-spacing:-.045em;color:var(--cv-ink);font-variant-numeric:tabular-nums}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .lp-stat b{background:var(--cv-grad-text);-webkit-background-clip:text;
    background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.lp-stat span{font-size:13px;color:var(--cv-ink-3)}

/* ── SECTION — ไล่พื้นต่อเนื่อง ไม่ให้เห็นรอยต่อ ────────────────────────── */
.lp-section{padding:clamp(52px,7vw,84px) 28px}
.lp-section-in{max-width:1120px;margin:0 auto}
.lp-sec-a{background:linear-gradient(180deg,#f7faff 0%,#fff 100%)}
.lp-sec-b{background:linear-gradient(180deg,#fff 0%,#f5f9ff 100%)}
.lp-kicker{display:block;text-align:center;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cv-blue);
  margin-bottom:12px}
.lp-h2{font-size:clamp(23px,3.2vw,32px);font-weight:700;letter-spacing:-.03em;
  color:var(--cv-ink);text-align:center;margin-bottom:14px;line-height:1.25}
.lp-sub{text-align:center;color:var(--cv-ink-soft);max-width:640px;
  margin:0 auto 44px;line-height:1.75}

/* ── การ์ดใหญ่ของผลิตภัณฑ์หลัก — แผงมุมโค้ง 28 ────────────────────────── */
.lp-feature{max-width:1120px;margin:0 auto;padding:0 28px}
.lp-feature>div{background:#fff;border-radius:var(--cv-r-panel);
  padding:clamp(28px,4.4vw,52px);box-shadow:var(--cv-shadow)}
.lp-feature h2{font-size:clamp(25px,3.6vw,36px);font-weight:700;
  letter-spacing:-.032em;color:var(--cv-ink);margin-bottom:16px;line-height:1.25}
.lp-feature-desc{color:var(--cv-ink-soft);line-height:1.8;margin-bottom:30px;max-width:66ch}
.lp-checks{list-style:none;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.lp-checks li{display:flex;gap:13px;align-items:flex-start;line-height:1.7;
  color:var(--cv-ink-soft)}
.lp-checks strong{color:var(--cv-ink);font-weight:600}
.lp-tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--cv-grad);
  color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin-top:3px}
.lp-feature .lp-actions{justify-content:flex-start;margin-top:32px}

/* ── การ์ด — มุมโค้ง 20 เงานุ่มแทนเส้น ยกตอน hover ──────────────────────── */
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:18px}
.lp-grid.sm{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.lp-card{display:block;background:#fff;border-radius:var(--cv-r-card);
  padding:26px 24px;box-shadow:var(--cv-shadow);transition:var(--cv-lift)}
a.lp-card:hover{transform:translateY(-4px);box-shadow:var(--cv-shadow-hi)}
a.lp-card:focus-visible{outline:none;
  box-shadow:0 0 0 4px rgba(0,113,227,.28),var(--cv-shadow-hi)}
.lp-card h3{font-size:17.5px;font-weight:700;letter-spacing:-.018em;
  color:var(--cv-ink);margin-bottom:10px;transition:color var(--dur-fast) var(--ease)}
a.lp-card:hover h3{color:var(--cv-blue)}
.lp-card p{font-size:14px;color:var(--cv-ink-soft);line-height:1.75}
.lp-more{display:inline-block;margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(16,26,43,.08);font-size:13px;font-weight:600;
  color:var(--cv-blue);width:100%}

/* ไทล์ไอคอนพาสเทล — จุดที่รับกลิ่น "ไทล์สี" มาจากต้นแบบ วนหกเฉดในตระกูลฟ้า */
.lp-tile{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--cv-r-tile);font-size:19px;
  margin-bottom:16px}
.lp-grid .lp-card:nth-child(6n+1) .lp-tile{background:#e4f6f7;color:#0a7183}
.lp-grid .lp-card:nth-child(6n+2) .lp-tile{background:#e6f1fd;color:#0b6fd0}
.lp-grid .lp-card:nth-child(6n+3) .lp-tile{background:#eaeafb;color:#3038b8}
.lp-grid .lp-card:nth-child(6n+4) .lp-tile{background:#e3f4fb;color:#0d6f96}
.lp-grid .lp-card:nth-child(6n+5) .lp-tile{background:#edf0fc;color:#3a4bbd}
.lp-grid .lp-card:nth-child(6n+6) .lp-tile{background:#e7f7f3;color:#0b7a63}

/* ── ป้าย — เหลี่ยมมุมแคบ ไม่ใช่ยาปั้ม (ยังเป็นกฎเดิมของบ้านนี้) ─────────── */
.lp-badge{display:inline-block;border-radius:5px;padding:4px 10px;font-size:11px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px}
.lp-badge.on{background:#e9f7ef;color:#178a45}
.lp-badge.free{background:#eaf3fd;color:#0062c4}

/* ── กล่องเข้าสู่ระบบ ────────────────────────────────────────────────────── */
.lp-signin{background:linear-gradient(180deg,#f5f9ff 0%,#eef5ff 100%)}
.lp-signin .lp-section-in{max-width:460px}
.lp-signin .card{margin-top:0!important;border:0;border-radius:var(--cv-r-card);
  box-shadow:var(--cv-shadow)}

/* ── ท้ายหน้า ───────────────────────────────────────────────────────────── */
.lp-foot{background:#fff;border-top:1px solid rgba(16,26,43,.07);
  padding:44px 28px;text-align:center;color:var(--cv-ink-soft);font-size:13.5px}
.lp-foot p{max-width:640px;margin:0 auto;line-height:1.8}
.lp-foot strong{color:var(--cv-ink)}
.lp-foot-links{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;
  margin-top:22px!important}
.lp-foot-links a{color:var(--cv-blue);font-weight:600}
.lp-foot-c{margin-top:22px!important;font-size:12.5px;color:var(--cv-ink-3)}

@media (max-width:620px){
  .lp-nav{padding:11px 18px}
  .lp-nav nav{gap:16px;font-size:13px}
  /* เมนูหน้าสาธารณะมี 5 ลิงก์ + ปุ่ม — จอแคบวางไม่พอในแถวเดียว (วัดที่ 320px ล้นไป 115px)
     ย้ายลงใต้ชื่อแบรนด์แล้วตัดบรรทัดได้ แทนที่จะดันทั้งหน้าให้กว้างเกินจอ
     · ไม่ใช้เลื่อนแนวนอน เพราะปุ่มเข้าสู่ระบบท้ายแถวจะตกขอบจนไม่มีใครเห็น */
  .lp-nav{flex-wrap:wrap;row-gap:8px}
  .lp-nav nav{flex:1 1 100%;min-width:0;flex-wrap:wrap;gap:8px 16px}
  .lp-nav nav a[href="#products"],.lp-nav nav a[href="#kaizen-award"]{display:none}
  .lp-by{display:none}
  .lp-actions .lp-btn{flex:1 1 100%}
  .lp-stat{flex:1 1 100%}
  .lp-stat+.lp-stat::before{display:none}
  .lp-stat+.lp-stat{border-top:1px solid rgba(16,26,43,.08);padding-top:16px;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .lp-btn,.lp-card{transition:none}
  .lp-btn:hover,a.lp-card:hover{transform:none}
}

/* ป้ายระดับความยากบนหน้าคลังเครื่องมือ (/tools) — โทนเดียวกับป้ายอื่นในสกิน Blue */
.lp-badge.mid{background:#fbf1d9;color:#9a7208}
.lp-badge.hard{background:#fbecea;color:#c0392e}
/* หน้าคลังเครื่องมือมีการ์ดเยอะ ย่อระยะลงหน่อยให้กวาดตาได้เร็ว */
.lp-card .lp-badge{margin-bottom:12px}
/* ตัวเลขในแถบสถิติที่กดได้ (ลิงก์ไป /tools) — ยกนิดเดียวพอให้รู้ว่ากดได้ */
a.lp-stat{transition:transform var(--dur-normal) var(--ease)}
a.lp-stat:hover{transform:translateY(-2px)}
a.lp-stat:hover span{color:var(--cv-blue)}
/* ชิปลิงก์ไขว้ระหว่างเครื่องมือ · กลุ่มปัญหา · หลักการ (หน้าสาธารณะ) */
.lp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lp-chip{display:inline-block;padding:6px 14px;border-radius:var(--cv-pill);
  background:#eaf3fd;color:#0062c4;font-size:13px;font-weight:600;
  transition:background var(--dur-fast) var(--ease)}
.lp-chip:hover{background:#d8e9fc}

/* ── บทความ /blog — markdown ที่ server แปลงแล้ว ───────────────────────── */
.lp-date{font-size:13px;color:var(--cv-ink-soft);margin-bottom:8px;font-variant-numeric:tabular-nums}
.lp-prose{color:var(--cv-ink)}
.lp-prose h2{font-size:clamp(20px,2.6vw,24px);font-weight:700;letter-spacing:-.02em;margin:36px 0 12px}
.lp-prose h2:first-child{margin-top:0}
.lp-prose h3{font-size:18px;font-weight:700;margin:26px 0 10px}
.lp-prose p,.lp-prose li{font-size:16.5px;line-height:1.85}
.lp-prose p{margin-bottom:16px}
.lp-prose ul,.lp-prose ol{margin:0 0 18px;padding-left:1.4em}
.lp-prose li{margin-bottom:6px}
.lp-prose a:not(.lp-chip):not(.lp-btn){color:#0062c4;text-decoration:underline;text-underline-offset:3px}
.lp-note{font-size:13px;color:var(--cv-ink-soft);margin-top:34px;padding-top:16px;
  border-top:1px solid #e3e8ef;line-height:1.7}

/* ── ฟอร์มผู้ช่วยแนะนำ (/advise) — form ธรรมดา ไม่มี JS ────────────────── */
.lp-ask{background:#fff;border-radius:var(--cv-r-card);padding:clamp(22px,3.5vw,34px);
  box-shadow:var(--cv-shadow);display:flex;flex-direction:column;gap:14px}
.lp-ask label{margin-bottom:0}
.lp-ask textarea{width:100%;resize:vertical;font:inherit;color:var(--cv-ink);
  padding:14px 16px;border:1px solid var(--cv-line);border-radius:var(--cv-r-tile);
  background:#fbfcfe;line-height:1.7}
.lp-ask textarea:focus{outline:none;border-color:rgba(0,113,227,.55);
  box-shadow:0 0 0 3px rgba(0,113,227,.16)}
.lp-ask .lp-btn{align-self:flex-start}
.lp-ask-note{font-size:12.5px;color:var(--cv-ink-3);margin:0}
.lp-phase{margin-bottom:34px}
.lp-phase-h{font-size:15px;font-weight:700;color:var(--cv-ink);margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid rgba(16,26,43,.10)}
/* เหตุผลที่เครื่องมือถูกแนะนำ — ยาวกว่าลิงก์ "อ่านต่อ" ปกติ ต้องตัดบรรทัดได้ */
.lp-phase .lp-more{font-weight:500;color:var(--cv-ink-3);line-height:1.6}

/* ── หน้าทบทวนความรู้ (#/learn) ─────────────────────────────────────────── */
.prog{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s-5);font-size:13px;color:var(--label-2)}
.prog .chip{background:var(--fill-2);border-radius:var(--r-badge);padding:3px var(--s-4)}
.qcard h3{font-size:17px;line-height:1.5}
/* เฉลยต้องต่างจากคำถามให้เห็นชัด — คนกวาดตาหาเฉลยทันทีที่กดเปิด */
.ans{margin-top:var(--s-6);padding:var(--s-6);background:var(--fill-3);
  border-radius:var(--r-lg);border-left:3px solid var(--blue);
  font-size:15.5px;line-height:1.75}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);
  margin-top:var(--s-5)}
.grades .grade{flex-direction:column;gap:2px;height:auto;padding:var(--s-4) 2px;
  line-height:1.3;text-align:center}
.grades .grade b{font-size:14px}
.grades .grade .small{font-size:10.5px;color:var(--label-3)}
.grades .grade.r{border-color:var(--red);color:var(--red-text)}
.grades .grade.o{border-color:var(--orange);color:var(--orange-text)}
.grades .grade.g{border-color:var(--green);color:var(--green-text)}
.grades .grade.b{border-color:var(--blue);color:var(--blue)}
.srow{display:flex;justify-content:space-between;padding:var(--s-3) 0;
  border-bottom:1px solid var(--sep);font-size:14px}
.srow:last-child{border-bottom:0}
@media (max-width:340px){ .grades{grid-template-columns:repeat(2,1fr)} }
/* ตัวเลือกในโหมดเลือกตอบ — สูงพอให้กดด้วยนิ้วโป้งบนมือถือหน้างาน */
.opts{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
.opts .opt{height:auto;min-height:44px;padding:var(--s-4) var(--s-5);text-align:left;
  justify-content:flex-start;white-space:normal;line-height:1.6;font-weight:400}
.opts .opt:disabled{opacity:1}          /* ล็อกหลังตอบ แต่ยังต้องอ่านออก */
.opts .opt.right{border-color:var(--green);background:rgba(52,199,89,.10);
  color:var(--green-text);font-weight:600}
.opts .opt.wrong{border-color:var(--red);background:rgba(255,59,48,.08);
  color:var(--red-text);text-decoration:line-through}

/* ── ใบฝึกทบทวนสาธารณะ (/learn/<ชุด>) — ซ่อนเฉลยด้วย <details> ไม่มี JS ── */
.practice{margin-bottom:14px}
.practice h3{font-size:16.5px;line-height:1.55;margin-bottom:0}
.practice details{margin-top:14px}
.practice summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  list-style:none;padding:8px 18px;border-radius:var(--cv-pill);
  border:1px solid var(--cv-line);background:#fbfcfe;
  font-size:13.5px;font-weight:600;color:var(--cv-ink);
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.practice summary::-webkit-details-marker{display:none}
.practice summary::before{content:'›';font-size:16px;line-height:1;
  transition:transform var(--dur-normal) var(--ease)}
.practice summary:hover{border-color:rgba(0,113,227,.45);color:var(--cv-blue)}
.practice details[open] summary{color:var(--cv-blue);border-color:rgba(0,113,227,.45)}
.practice details[open] summary::before{transform:rotate(90deg)}
.ans-pub{margin-top:14px;padding:16px 18px;background:#f5f8fd;border-radius:var(--cv-r-tile);
  border-left:3px solid var(--cv-blue);font-size:15.5px;line-height:1.75;color:var(--cv-ink)}
.practice .small-muted{font-size:13px;color:var(--cv-ink-3);margin-top:10px}
.practice .small-muted a{color:var(--cv-blue);font-weight:600}
@media (prefers-reduced-motion:reduce){ .practice summary::before{transition:none} }

/* ── มุมมองทีม (#/team) ─────────────────────────────────────────────────── */
.tmrow{display:flex;gap:var(--s-8);flex-wrap:wrap}
.tmrow .big{font-size:26px;font-weight:600;letter-spacing:-.02em}
.trow{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) 0;border-bottom:1px solid var(--sep);color:var(--label)}
.trow:last-child{border-bottom:0}
.trow b{font-weight:600}
.rate{font-weight:600;color:var(--red-text);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.rate .muted{font-weight:400}

/* ── คลังองค์ความรู้ (#/kb) ─────────────────────────────────────────────── */
.docrow{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) 0;
  border-bottom:1px solid var(--sep)}
.docrow:last-child{border-bottom:0}
.docrow .grow{flex:1;min-width:0;color:var(--label)}
.hit{padding:var(--s-4) 0;border-bottom:1px solid var(--sep);font-size:14px;line-height:1.65}
.hit:last-child{border-bottom:0}
.btn.danger{color:var(--red-text);border-color:var(--red)}

/* ── ใบงานพร้อมผลตรวจ (sheet.js) ─────────────────────────────────────────
   ผลตรวจอยู่ข้างหัวข้อที่มันพูดถึง ผูกกับคำในใบด้วยเลขกำกับตัวเดียวกัน
   ⚠ ไม่ใช้แถบสีข้างกล่อง — ระดับความสำคัญอยู่ที่เลขกำกับ (ทึบ = ต้องแก้ · เส้นประ = ยังขาด)
   สีของธงอยู่ที่พื้นไฮไลต์และเลขกำกับ ตัวอักษรเป็นสีปกติเสมอ (กติกาข้อ 99) */
.sh-head{display:flex;justify-content:flex-end;margin:0 0 var(--s-4)}
.sh-tally{display:flex;gap:var(--s-3)}
.sh-tally span,.sh-tally a{border:1px solid var(--border);border-radius:var(--r-badge);padding:3px 9px;
  font-size:12.5px;background:var(--bg-primary);white-space:nowrap}
.sh-tally b{font-weight:600}

.sh-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s-2);background:var(--bg-primary);
  border:1px solid var(--sep);border-radius:var(--r-lg);padding:var(--s-4);margin-bottom:var(--s-6)}
.sh-seg{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:0;
  border-radius:var(--r-sm);padding:2px}
.sh-seg:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sh-seg .cells{display:flex;gap:2px;height:8px}
.sh-seg .cells i{flex:1;border-radius:1px;background:var(--fill-1)}
.sh-seg .cells i.on{background:var(--label)}
.sh-seg .cells i.warn{background:var(--orange)}
.sh-seg .nm{font-size:11.5px;line-height:1.3;color:var(--label-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sh-seg .ct{font-size:11px;color:var(--label-3)}
.sh-seg.done .nm{color:var(--label)}
.sh-seg:hover .nm{color:var(--blue)}
@media (max-width:520px){
  .sh-strip{grid-template-columns:repeat(4,1fr);row-gap:var(--s-5);column-gap:var(--s-3)}
  .sh-seg .nm{white-space:normal}
}

.sh-sheet{background:var(--bg-primary);border:1px solid var(--sep);border-radius:var(--r-xl);overflow:hidden;
  container-type:inline-size}
.sh-sec{display:grid;grid-template-columns:1fr;border-top:1px solid var(--sep);scroll-margin-top:calc(var(--header-h) + 12px)}
.sh-sec:first-child{border-top:0}
.sh-sec .body{padding:var(--s-6) var(--s-6) var(--s-5);min-width:0}
.sh-sec .no{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-2)}
.sh-sec .no em{font-style:normal;font-family:var(--font-mono);font-size:12px;color:var(--label-3);letter-spacing:.04em}
.sh-sec .no h3{font-size:13.5px;font-weight:600}
.sh-sec .no .st{margin-left:auto;font-size:11.5px;color:var(--label-3)}
.sh-txt{font-size:14.5px;line-height:1.75;white-space:pre-wrap}
.sh-txt.empty{color:var(--label-3);font-style:italic}
.sh-sec.flash{animation:sh-flash 1.1s var(--ease)}
@keyframes sh-flash{0%{background:rgba(0,122,255,.08)}100%{background:transparent}}
.sh-sheet.only-todo .sh-sec.ok{display:none}

/* ไฮไลต์ — สีอยู่ที่พื้นกับเส้นใต้ · ตอนเลือกแค่พื้นเข้มขึ้น ไม่มีกรอบ */
.sh-hl{background:rgba(255,59,48,.10);color:inherit;border-bottom:2px solid var(--red);
  padding:0 1px;border-radius:2px;cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.sh-hl.sh-on{background:rgba(255,59,48,.22)}
.sh-ref{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 3px;margin-left:2px;
  border-radius:4px;background:var(--red-text);color:#fff;font-size:10px;font-weight:600;line-height:1;
  vertical-align:4px;font-variant-numeric:tabular-nums;cursor:pointer;font-style:normal}
.sh-ref.gap{background:transparent;color:var(--label-2);border:1px dashed var(--label-3)}

.sh-grid{display:grid;grid-template-columns:auto 1fr 1fr;border:1px solid var(--sep);border-radius:var(--r-md);
  overflow:hidden;margin-top:var(--s-4);font-size:13px}
.sh-grid > div{padding:7px 10px;border-top:1px solid var(--sep);border-left:1px solid var(--sep);min-width:0}
.sh-grid > div:nth-child(3n+1){border-left:0;color:var(--label-2)}
.sh-grid > div:nth-child(-n+3){border-top:0;background:var(--fill-3);font-size:11.5px;color:var(--label-2);font-weight:500}
.sh-grid .v{font-weight:600}
.sh-grid .miss{color:var(--label-3);font-weight:400}
.sh-grid .note{white-space:pre-wrap}

.sh-photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-4);max-width:400px}
.sh-ph{margin:0}
.sh-ph img,.sh-ph .ph-empty{width:100%;aspect-ratio:4/3;border-radius:var(--r-md);border:1px solid var(--sep);
  object-fit:cover;display:block}
.sh-ph .ph-empty{border-style:dashed;display:flex;align-items:center;justify-content:center;gap:2px;
  font-size:12px;color:var(--label-3)}
.sh-ph figcaption{font-size:11.5px;color:var(--label-2);margin-top:4px}

.sh-sec .margin{padding:0 var(--s-6) var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.sh-sec .margin:empty{display:none}          /* จอแคบ: ขอบว่างไม่ต้องกินที่ใต้เนื้อความ */
.sh-note{display:grid;grid-template-columns:22px 1fr;gap:0 10px;border:1px solid var(--sep);
  border-radius:var(--r-lg);padding:10px 12px;font-size:12.5px;line-height:1.55;background:var(--bg-primary);
  cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.sh-note:hover{border-color:var(--border)}
.sh-note:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sh-note.sh-on{border-color:var(--border-strong);background:var(--fill-4)}
.sh-note .tag{width:22px;height:22px;border-radius:var(--r-badge);display:grid;place-items:center;
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:1px;
  background:var(--red-text);color:#fff}
.sh-note.gap{border-style:dashed}
.sh-note.gap .tag{background:transparent;border:1px dashed var(--label-3);color:var(--label-2)}
.sh-note .k{font-size:11px;color:var(--label-2);margin-bottom:1px}
.sh-note .k b{font-weight:600;color:var(--label)}
.sh-note .is{font-weight:600}
.sh-note .do{color:var(--label-2);margin-top:2px}
.sh-note .tl{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.sh-pass{font-size:12px;color:var(--label-2);display:flex;flex-wrap:wrap;gap:4px 12px}
.sh-pass span::before{content:"✓ ";color:var(--green-text);font-weight:600}

/* ใบกว้างพอ: ขอบกระดาษไปอยู่ขวาจริง · วัดที่ตัวใบ ไม่ใช่จอ — main กว้างสุด 760px */
@container (min-width:680px){
  .sh-sec{grid-template-columns:minmax(0,1fr) 260px}
  .sh-sec.solo{grid-template-columns:minmax(0,1fr)}
  .sh-sec .margin:empty{display:flex}        /* จอกว้าง: คงคอลัมน์ไว้ให้เส้นแบ่งต่อเนื่อง */
  .sh-sec .margin{padding:var(--s-6) var(--s-5);border-left:1px dashed var(--sep);background:var(--fill-4)}
}
.sh-aside .lb{font-size:11px;color:var(--label-2);margin-bottom:4px}
.sh-aside .chips{gap:4px}
.sh-aside p{font-size:12.5px;line-height:1.55;white-space:pre-wrap}
.sh-foot{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;margin-top:var(--s-5)}
.sh-tog{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--label-2);cursor:pointer;user-select:none}
.sh-tog input{accent-color:var(--blue)}
@media (prefers-reduced-motion:reduce){.sh-sec.flash{animation:none}.sh-hl,.sh-note{transition:none}}

/* ── ทะเบียนผลงาน (sheet.ledger) ─────────────────────────────────────────
   แถวเป็นลิงก์ทั้งแถว · ไม่มีการ์ดแยกต่อรายการ — กรอบเดียวกับใบงาน */
.sh-ledger .sh-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-5);
  padding:var(--s-5) var(--s-6);border-top:1px solid var(--sep);color:inherit;text-decoration:none;
  transition:background var(--dur-fast) var(--ease)}
.sh-ledger .sh-row:first-child{border-top:0}
.sh-ledger .sh-row:hover{background:var(--fill-4)}
.sh-ledger .sh-row:active{background:var(--fill-3)}
.sh-ledger .sh-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.sh-ledger .cd{grid-column:1/-1;white-space:nowrap;font-family:var(--font-mono);font-size:11.5px;color:var(--label-3);
  letter-spacing:.04em;margin-bottom:2px}
.sh-ledger .t{font-weight:600;font-size:14.5px;line-height:1.4}
.sh-ledger .m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;
  font-size:12px;color:var(--label-2)}
.sh-ledger .margin{text-align:right;align-self:center;min-width:84px}
.sh-ledger .dl{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-ledger .dl.up{color:var(--green-text)}
.sh-ledger .dl.dn{color:var(--red-text)}
.sh-ledger .dl.none{color:var(--label-3);font-weight:400}
.sh-ledger .ba{font-size:11.5px;color:var(--label-3);white-space:nowrap;margin-top:1px}
/* ใบกว้าง: รหัสเป็นคอลัมน์ซ้ายแบบเลขหัวข้อ · ผลไปอยู่ในขอบกระดาษขวาที่มีพื้นของมันเอง */
@container (min-width:560px){
  .sh-ledger .sh-row{grid-template-columns:118px minmax(0,1fr) 150px;padding:0}
  .sh-ledger .cd{grid-column:auto;padding:var(--s-5) 0 var(--s-5) var(--s-6);margin:0;line-height:1.9}
  .sh-ledger .body{padding:var(--s-5) 0}
  .sh-ledger .margin{align-self:stretch;display:flex;flex-direction:column;justify-content:center;
    padding:var(--s-4) var(--s-6);border-left:1px dashed var(--sep);background:var(--fill-4)}
}

/* ── หน้าแรก — ภาษาเดียวกับใบงาน ─────────────────────────────────────── */
.sh-hello{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-5);
  margin:0 var(--s-1) var(--s-6)}
.sh-hello .nm{font-size:21px;font-weight:600;line-height:1.3}
.sh-tally a{color:inherit;text-decoration:none}
.sh-tally a:hover{border-color:var(--label-3)}
.sh-label{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px;font-weight:600;
  color:var(--label-2);margin:0 var(--s-1) var(--s-3)}
.sh-label a{font-weight:500;color:var(--blue);text-decoration:none}

.sh-resume{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-5);
  background:var(--bg-primary);border:1px solid var(--sep);border-radius:var(--r-xl);
  padding:var(--s-5) var(--s-6);margin-bottom:var(--s-5)}
.sh-resume .k{font-size:11.5px;color:var(--label-2)}
.sh-resume .t{display:block;font-weight:600;font-size:15px;line-height:1.4;margin-top:1px;color:inherit;text-decoration:none}
.sh-resume .gap{font-size:12px;color:var(--label-2);margin-top:var(--s-2);display:flex;align-items:center;gap:var(--s-3)}
.sh-resume .mini{display:inline-flex;gap:2px}
.sh-resume .mini i{width:10px;height:6px;border-radius:1px;background:var(--fill-1)}
.sh-resume .mini i.on{background:var(--label)}
.sh-resume .mini i.warn{background:var(--orange)}

/* สารบัญ — container query ต้องอยู่บนลูกของ .sh-sheet ไม่ใช่ตัวมันเอง (ตัวเองถามตัวเองไม่ได้) */
.sh-toc a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:0 var(--s-4);align-items:baseline;
  padding:13px var(--s-6);border-top:1px solid var(--sep);color:inherit;text-decoration:none;
  transition:background var(--dur-fast) var(--ease)}
.sh-toc a:first-child{border-top:0}
.sh-toc a:hover{background:var(--fill-4)}
.sh-toc a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.sh-toc em{font-style:normal;font-family:var(--font-mono);font-size:12px;color:var(--label-3);letter-spacing:.04em}
.sh-toc .t{font-weight:600;font-size:14.5px}
.sh-toc .d{grid-column:2;font-size:12.5px;color:var(--label-2);line-height:1.5}
.sh-toc .go{grid-row:1/3;grid-column:3;align-self:center;color:var(--label-3);font-size:18px}
@container (min-width:560px){
  .sh-toc{display:grid;grid-template-columns:1fr 1fr}
  .sh-toc a:nth-child(2){border-top:0}
  .sh-toc a:nth-child(even){border-left:1px solid var(--sep)}
}

/* ── ฟอร์มเขียนไคเซ็น — ใบงานที่กรอกได้ ──────────────────────────────────
   ขอบกระดาษเริ่มเป็นคำแนะนำ (.sh-hint) แล้วถูกแทนด้วยผลตรวจจริงหลังบันทึกครั้งแรก */
.sh-form .body > textarea{display:block;font:inherit;font-size:15px;color:inherit}
.sh-form .f:last-child{margin-bottom:0}
.sh-form .no{margin-bottom:var(--s-4)}
.sh-hint{font-size:12.5px;line-height:1.55;color:var(--label-2)}
.sh-more{margin-top:var(--s-4);border-top:1px solid var(--sep);padding-top:var(--s-3)}
.sh-more summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--label-2);list-style:none;
  display:flex;align-items:center;gap:6px}
.sh-more summary::-webkit-details-marker{display:none}
.sh-more summary::before{content:"›";display:inline-block;transition:transform var(--dur-fast) var(--ease)}
.sh-more[open] summary::before{transform:rotate(90deg)}
.sh-more[open] summary{margin-bottom:var(--s-3)}
@media (prefers-reduced-motion:reduce){.sh-more summary::before{transition:none}}

/* ── เช็กลิสต์ประกวด (#/award) — ใบงานที่ผู้ใช้ประเมินเล่มตัวเอง ─────────────
   แถบบนมีหนึ่งช่องต่อหนึ่งขั้น จำนวนขั้นต่างกันตามประเภท (11–16) จึงใช้ --n ไม่ใช่ 7 ตายตัว
   · เกิน 8 ขั้นแบ่งสองแถว (award.js) — 16 ช่องแถวเดียวชื่อขั้นเหลือแค่ "แนะ…" */
.sh-strip.steps{grid-template-columns:repeat(var(--n,7),minmax(0,1fr));row-gap:var(--s-5)}
.sh-strip.steps .nm{white-space:normal;overflow:visible}
@media (max-width:520px){.sh-strip.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sh-award-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  margin:0 var(--s-1) var(--s-5)}
.sh-award-head .k{font-size:12px;color:var(--label-2);margin-bottom:var(--s-2)}
.sh-award-head ul{margin:0}
.sh-sub{font-size:11.5px;font-weight:600;color:var(--label-2);margin:0 0 var(--s-2)}
.sh-award ul.bul{margin-top:0}
.sh-pits{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s-3)}
.sh-pits li{font-size:12.5px;line-height:1.55;color:var(--label);padding-left:14px;position:relative}
.sh-pits li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:1px;
  background:var(--orange)}
.sh-plain{padding:var(--s-5) var(--s-6)}
.sh-plain ul{margin:0}

/* ── คอร์สเรียน (views/courses.js · กติกาข้อ 122) ──
   ไม่มีแถบสีข้างกล่อง — ระดับของ callout บอกด้วยป้ายเหลี่ยม (กติกาข้อ 111) */
.lsn-t{font-size:20px;font-weight:700;line-height:1.4;margin:var(--s-2) 0 var(--s-3)}
.lsn-body{font-size:15px;line-height:1.75}
.lsn-body p{margin:0 0 var(--s-4)}
.lsn-body ul{margin:0 0 var(--s-4);padding-left:1.25em}
.lsn-body li{margin-bottom:var(--s-2)}
.lsn-h{font-size:16px;font-weight:700;margin:var(--s-7) 0 var(--s-3)}
.lsn-co{border:1px solid var(--sep);border-radius:var(--r-lg);background:var(--fill-4);
  padding:var(--s-4) var(--s-5);margin:0 0 var(--s-5)}
.lsn-co .badge{margin-bottom:var(--s-3)}
.lsn-co p:last-child,.lsn-q p:last-child{margin-bottom:0}
.lsn-q{margin:0 0 var(--s-5);padding:var(--s-4) var(--s-5);border:1px solid var(--sep);
  border-radius:var(--r-lg);color:var(--label-2);font-style:italic}
.vid-wrap{margin:0 0 var(--s-5)}
.vid{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:var(--fill-2);border:1px solid var(--sep)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-wrap figcaption{margin-top:var(--s-2)}
.lsn-rel{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--sep)}
.lsn-row{text-decoration:none;color:inherit}
.lsn-row .badge{flex:0 0 auto;align-self:center}
.opts .opt.sel{border-color:var(--blue);background:#eef5ff;font-weight:600}

/* แถบความครบแบบย่อในฟอร์ม — ติดใต้หัวจอ (form.js) */
.sh-mini{all:unset;box-sizing:border-box;position:sticky;top:var(--header-h);z-index:20;display:flex;align-items:center;
  gap:var(--s-3);width:100%;margin:0 0 var(--s-4);padding:8px var(--s-3);background:var(--bg-primary);
  border:1px solid var(--sep);border-radius:var(--r-lg);font-size:12.5px;cursor:pointer}
.sh-mini:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sh-mini .bar{flex:0 0 72px;height:6px;border-radius:3px;background:var(--fill-1);overflow:hidden}
.sh-mini .bar i{display:block;height:100%;background:var(--label);transition:width var(--dur-fast) var(--ease)}
.sh-mini .go{margin-left:auto;color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.sh-mini .bar i{transition:none}}
.sh-example p{margin:0 0 var(--s-2);font-size:13.5px;line-height:1.6;color:var(--label-2)}
/* แถบย่อกินที่ใต้หัวจอ ~40px — กระโดดไปหัวข้อแล้วหัวเรื่องต้องไม่ไปอยู่ใต้แถบ */
.sh-form .sh-sec{scroll-margin-top:calc(var(--header-h) + 56px)}

/* ── HERO สองคอลัมน์ + ภาพจำลองหน้าจอ (SVG ในหน้า ไม่ใช่ไฟล์รูป) ─────────
   เหตุผลที่เป็น SVG: หน้านี้ไม่มี build step และรูป raster จะทำให้ LCP แย่ลง
   · `max-width:820px` เดิมของ .lp-hero-in ถูกยกเป็น 1120 เฉพาะตอนมีสองคอลัมน์ */
.lp-hero-in:has(.lp-hero-art){max-width:1120px}
.lp-hero-copy{max-width:820px;margin:0 auto}
.lp-hero-art{margin:40px auto 0;max-width:300px}
.lp-mock{display:block;width:100%;height:auto;
  filter:drop-shadow(0 3px 8px rgba(16,26,43,.06)) drop-shadow(0 22px 44px rgba(16,26,43,.13))}
.lp-hero-art figcaption{margin-top:14px;font-size:12px;color:var(--cv-ink-3);text-align:center}

/* ⚠ กริดสองคอลัมน์ใช้ได้เฉพาะ hero ที่มีภาพจำลอง คือหน้าแรกเท่านั้น (กติกาข้อ 160)
   หน้าสาธารณะที่ server เรนเดอร์ใช้ .lp-hero ตัวเดียวกัน แต่ลูกเป็น eyebrow/h1/lede
   เรียงกันตรง ๆ — ตั้งกริดโดยไม่กรอง ทั้งสามชิ้นถูกโยนลงคนละช่องจนหน้าอ่านไม่ได้
   · :has() ไม่รองรับ = อยู่คอลัมน์เดียวแบบเดิม ซึ่งยังอ่านได้ครบ */
@media (min-width:900px){
  .lp-hero:has(.lp-hero-art){text-align:left}
  .lp-hero-in:has(.lp-hero-art){display:grid;grid-template-columns:minmax(0,1fr) 300px;
    gap:clamp(32px,5vw,64px);align-items:center}
  .lp-hero-in:has(.lp-hero-art) .lp-hero-copy{margin:0}
  .lp-hero-in:has(.lp-hero-art) .lp-lede{margin:0}
  .lp-hero:has(.lp-hero-art) .lp-actions{justify-content:flex-start}
  .lp-hero-art{margin:0}
}

/* ── ทำงานยังไง — สามขั้น เลขนำหน้าแบบเดียวกับใบงานในแอป ────────────────── */
.lp-steps{list-style:none;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.lp-steps li{background:#fff;border-radius:var(--cv-r-card);padding:26px 24px;
  box-shadow:var(--cv-shadow)}
.lp-step-n{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;
  color:var(--cv-blue);font-variant-numeric:tabular-nums;margin-bottom:12px}
.lp-steps h3{font-size:17.5px;font-weight:700;letter-spacing:-.018em;
  color:var(--cv-ink);margin-bottom:10px}
.lp-steps p{font-size:14px;color:var(--cv-ink-soft);line-height:1.75}

/* พื้นขาวล้วน — ใช้คั่นระหว่างสองท่อนที่จบและเริ่มด้วยสีขาวอยู่แล้ว */
.lp-sec-plain{background:#fff}

/* ── แถบบนบนจอแคบ — ไม่ sticky ──────────────────────────────────────────
   แบรนด์ + เมนูตัดบรรทัด + ปุ่มเข้าสู่ระบบ สูงรวม ~145px บนจอ 812px =
   กินพื้นที่อ่าน 18% ค้างตลอดการเลื่อน · ซ่อนเมนูตอนเลื่อนต้องใช้ JS ซึ่ง
   หน้านี้ตั้งใจไม่มี (กติกาข้อ 19 · 31) จึงปล่อยให้แถบเลื่อนหายไปแทน —
   CTA ยังมีซ้ำที่ hero · ท้ายท่อนผลิตภัณฑ์ · และกล่องเข้าสู่ระบบท้ายหน้า */
@media (max-width:620px){
  .lp-nav{position:static}
}

/* ── ท่อนที่หัวเรื่องอยู่ซ้าย ปุ่มอยู่ขวา ───────────────────────────────
   ทุกท่อนเดิมเป็น kicker/h2/sub กึ่งกลางแล้วตามด้วยกริด — เหมือนกันสามท่อนติด
   จนกวาดตาแล้วไม่มีที่พัก · ท่อนคลังความรู้มีปุ่มหกปุ่มซึ่งวางเป็นคอลัมน์ขวาได้พอดี */
@media (min-width:900px){
  .lp-split .lp-section-in{display:grid;grid-template-columns:minmax(0,1fr) 300px;
    gap:clamp(32px,5vw,64px);align-items:center}
  .lp-split .lp-kicker,.lp-split .lp-h2,.lp-split .lp-sub{text-align:left}
  .lp-split .lp-sub{margin:0;max-width:none}
  .lp-split .lp-actions{margin-top:0;flex-direction:column;align-items:stretch}
}

/* ── งานรับทำของ Execuron — บรรทัดเดียวบนโดเมนของผลิตภัณฑ์นี้ ──────────── */
.lp-services .lp-section-in{max-width:760px;text-align:center}
.lp-services-line{color:var(--cv-ink-soft);line-height:1.8;margin-bottom:22px}
.lp-services .lp-kicker{display:inline;margin-right:8px;font-size:11px}
.sh-example ol{margin:0 0 var(--s-2) 1.2em;padding:0;font-size:13.5px;line-height:1.6;color:var(--label-2)}

/* เทคนิคที่เหมาะกับเรื่องนี้ ในหัวข้อวิธีแก้ของฟอร์ม */
.sh-tech{margin:0 0 var(--s-4)}
.sh-tech:empty{display:none}
.sh-tech-h{font-size:13px;font-weight:600;margin-bottom:var(--s-2)}
.sh-tech-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-2) 0;
  border-top:1px solid var(--sep);font-size:13.5px}
.sh-tech-row .btn{flex:0 0 auto}
.sh-tech p{margin:var(--s-2) 0}