/* ============================================================
   สมุดบัญชี 50 ปี — ระบบสไตล์กลาง
   ใช้ร่วมกันทุกหน้าใน web/
   หลักการ (impeccable): ไม่ใช้เทาแท้ ต้องผสมสีเสมอ ·
   ไม่ซ้อนการ์ดในการ์ด · ไม่ใช้ easing แบบเด้ง ·
   ความยาวบรรทัดไม่เกิน ~70ch · เป้าแตะอย่างน้อย 44px
   ============================================================ */

:root{
  /* กระดาษและหมึก — ทุกค่าผสมสีเขียวอมเทาไว้แล้ว ไม่มีเทาแท้ */
  --paper:#EFEDE2;
  --paper-2:#F8F6EC;
  --paper-3:#FFFEF6;
  --ink:#16211E;
  --ink-2:#3E4A46;
  --ink-3:#5C6864;
  --rule:#CFCAB6;
  --rule-soft:#E3DECB;

  /* สีหลัก */
  --cover:#123F38;
  --cover-2:#1D5C52;
  --cover-3:#2F7A6B;
  --gold:#966D14;
  --gold-2:#B08423;
  --gold-wash:#FBF6E7;
  --red:#98211C;
  --red-2:#A72520;
  --red-wash:#FBF2F1;

  /* ตัวอักษรบนพื้นเข้ม — สว่างพอสำหรับ AA */
  --on-cover:#EDF3F1;
  --on-cover-2:#C2D6D1;

  --sp:clamp(16px,4vw,22px);
  --maxw:1120px;
  --ease:cubic-bezier(.2,0,.2,1); /* ไม่เด้ง */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Sarabun','Noto Sans Thai',ui-sans-serif,sans-serif;
  font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp)}
.narrow{max-width:74ch}

/* ---------- แถบนำทาง ---------- */
/* แถบลอย ไม่ชนขอบจอ พื้นหลังเป็นสีกระดาษเพื่อให้เนื้อหาเลื่อนลอดไปได้อย่างสะอาด */
.nav{position:sticky;top:0;z-index:40;background:var(--paper);padding:12px clamp(18px,4.5vw,34px) 10px}
.nav .bar{
  display:flex;align-items:center;gap:16px;min-height:54px;
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 8px 0 16px;
  background:var(--cover);border:1.5px solid var(--gold-2);border-radius:14px;
  box-shadow:0 3px 0 rgba(22,33,30,.14);
  overflow:hidden;white-space:nowrap;
  transition:width .9s var(--ease);
}
/* เจาะจงเฉพาะโลโก้ ห้ามใช้ .nav .bar>* เพราะจะไปทับกฎ flex ของ ul
   (0-2-0 ชนะ 0-1-1) ทำให้ ul ไม่ยอมหด แล้วโดน overflow:hidden ตัดทิ้ง
   ผลคือเมนูเลื่อนไม่ได้ และบนมือถือจะกดเมนูท้าย ๆ ไม่ได้เลย */
.nav .bar>.brand{flex:0 0 auto}
/* ตอนเปิดหน้าใหม่ แถบเริ่มจากตรงกลางแล้วคลี่ออกสองข้าง */
html.nav-start .nav .bar{width:min(232px,100%)}
.nav .bar .brand,.nav .bar ul{opacity:1;transition:opacity .5s var(--ease) .34s}
html.nav-start .nav .bar ul{opacity:0;transition-delay:0s}
.nav .brand{
  font-family:'Kanit',sans-serif;font-weight:600;font-size:15px;
  color:var(--on-cover);text-decoration:none;white-space:nowrap;
}
.nav .brand span{color:var(--gold-2)}
/* เมนูต้องหดได้ (min-width:0) จึงจะเลื่อนในตัวเองได้ ไม่ใช่ดันจนล้นกรอบ */
.nav .bar>ul{
  list-style:none;display:flex;gap:2px;
  flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;   /* ให้เลื่อนลื่นบน iOS */
  overscroll-behavior-x:contain;      /* เลื่อนสุดแล้วไม่ไปลากทั้งหน้า */
  scrollbar-width:none;
}
.nav ul::-webkit-scrollbar{display:none}

/* บอกใบ้ว่ายังเลื่อนต่อได้ ด้วยการไล่สีจางที่ขอบขวาของแถบ */
.nav .bar{position:relative}
.nav .bar::after{
  content:"";position:absolute;top:1px;right:1px;bottom:1px;width:28px;
  border-radius:0 13px 13px 0;pointer-events:none;
  background:linear-gradient(to left,var(--cover) 12%,rgba(18,63,56,0));
}

/* มือถือ: บีบระยะให้พอดี และยังกดได้ครบทุกปุ่ม (สูงอย่างน้อย 44px) */
@media (max-width:640px){
  .nav{padding:8px 12px}
  .nav .bar{gap:10px;padding:0 4px 0 12px;min-height:50px;border-radius:12px}
  .nav .bar::after{border-radius:0 11px 11px 0;width:22px}
  .nav .brand{font-size:13.5px}
  .nav a.item{padding:12px 9px;font-size:11.5px;gap:6px}
  html.nav-start .nav .bar{width:min(180px,100%)}
}
.nav a.item{
  display:flex;align-items:center;gap:7px;padding:12px 11px;min-height:44px;
  font-family:'Space Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.06em;
  color:var(--on-cover-2);text-decoration:none;white-space:nowrap;
  border-radius:9px;
  transition:color .15s var(--ease),background-color .15s var(--ease);
}
.nav a.item .ic{
  width:15px;height:15px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.72;transition:opacity .15s var(--ease);
}
.nav a.item:hover .ic,.nav a.item[aria-current="page"] .ic{opacity:1}
.nav a.item:hover{color:var(--on-cover);background:rgba(237,243,241,.07)}
.nav a.item[aria-current="page"]{color:var(--gold-2);background:rgba(176,132,35,.18)}

/* ---------- ส่วนหัวหน้า ---------- */
.phead{background:var(--cover);color:var(--on-cover);padding:38px 0 34px;position:relative;overflow:hidden}
/* ฝนเงินวาดบนผืนผ้าใบ อยู่หลังตัวอักษรเสมอ */
.phead .rain{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
/* ม่านบาง ๆ คลุมฝั่งข้อความ ให้เงินที่ร่วงไม่ไปแย่งอ่านกับหัวเรื่อง */
.phead::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(18,63,56,.90) 0%, rgba(18,63,56,.78) 38%,
    rgba(18,63,56,.42) 72%, rgba(18,63,56,.10) 100%);
}
.phead>.wrap{position:relative;z-index:2}
.phead::after{
  content:"";position:absolute;inset:auto 0 0 0;height:6px;
  background:repeating-linear-gradient(90deg,var(--gold-2) 0 20px,transparent 20px 40px);opacity:.5;
}
.kicker{
  font-family:'Space Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-2);display:block;
}
.phead h1{
  font-family:'Kanit',sans-serif;font-weight:600;letter-spacing:-.015em;line-height:1.1;
  font-size:clamp(28px,5.4vw,50px);margin-top:12px;max-width:20ch;
}
.phead h1 em{font-style:normal;color:var(--gold-2)}
.phead .lede{margin-top:14px;max-width:62ch;font-size:18px;color:var(--on-cover-2)}

/* ---------- เนื้อหา ---------- */
section{margin:52px 0;scroll-margin-top:64px}
.eyebrow{
  font-family:'Space Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);display:block;margin-bottom:8px;
}
h2{font-family:'Kanit',sans-serif;font-weight:600;font-size:clamp(23px,3.8vw,34px);line-height:1.22;margin-bottom:10px}
h3{font-family:'Kanit',sans-serif;font-weight:500;font-size:20px;margin:26px 0 6px}
h4{font-family:'Kanit',sans-serif;font-weight:500;font-size:16px;margin:18px 0 4px}
p{max-width:70ch}
p+p{margin-top:12px}
.muted{color:var(--ink-3)}
.small{font-size:14.5px;line-height:1.65}
mark{background:#F2E3A8;padding:0 3px;color:var(--ink)}
a{color:var(--cover-2)}

/* ---------- สูตร ---------- */
.formula{
  background:var(--ink);color:var(--paper-2);padding:20px 16px;text-align:center;
  font-family:'Kanit',sans-serif;font-weight:500;font-size:clamp(18px,3.6vw,28px);margin-top:14px;
}
.formula .v{color:#E3B65A}
.fkey{border:1.5px solid var(--ink);border-top:0;padding:10px 14px;font-size:14.5px;text-align:center;background:var(--paper-2)}

/* ---------- เครื่องมือ (ไม่ซ้อนการ์ด) ---------- */
.tool{border:2px solid var(--ink);background:var(--paper-2);margin-top:20px}
.tool-head{
  background:var(--ink);color:var(--paper-2);padding:11px 18px;
  font-family:'Kanit',sans-serif;font-weight:500;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
}
.tool-body{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr)}
.tool-in{padding:20px;border-right:2px solid var(--ink)}
.tool-out{padding:20px;min-width:0}
@media (max-width:820px){
  .tool-body{grid-template-columns:1fr}
  .tool-in{border-right:0;border-bottom:2px solid var(--ink)}
}

/* ปุ่มสลับโหมด */
.segs{display:flex;flex-wrap:wrap;gap:0}
.segs button{
  font-family:'Kanit',sans-serif;font-weight:500;font-size:13.5px;
  padding:9px 14px;min-height:40px;border:1px solid var(--gold-2);
  background:transparent;color:#E8C979;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.segs button+button{border-left:0}
.segs button[aria-pressed="true"]{background:var(--gold-2);color:var(--ink)}

/* ---------- ฟอร์ม ---------- */
.field{margin-bottom:15px}
.field label{
  display:block;font-family:'Space Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:5px;
}
input[type=number],select{
  width:100%;font-family:'Sarabun',sans-serif;font-size:16px;padding:11px 10px;min-height:44px;
  border:1.5px solid var(--ink);background:var(--paper-3);color:var(--ink);border-radius:0;
}
input[type=range]{width:100%;accent-color:var(--cover);min-height:32px}
.readout{font-family:'Space Mono',ui-monospace,monospace;font-size:12.5px;color:var(--red);text-transform:none;letter-spacing:0}
:focus-visible{outline:3px solid var(--red-2);outline-offset:2px}

button.go{
  width:100%;font-family:'Kanit',sans-serif;font-weight:600;font-size:17px;
  padding:13px;min-height:48px;border:1.5px solid var(--ink);
  background:var(--cover);color:var(--on-cover);cursor:pointer;
  box-shadow:4px 4px 0 var(--gold-2);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);
}
button.go:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gold-2)}
button.go:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--gold-2)}

/* ---------- ตัวเลขสรุป (แถวเดียว ไม่ห่อการ์ด) ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border:1.5px solid var(--ink);background:var(--paper-3)}
.stat{padding:11px 13px;border-right:1px solid var(--rule-soft)}
.stat:last-child{border-right:0}
.stat span{
  display:block;font-family:'Space Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;
}
.stat b{font-family:'Kanit',sans-serif;font-weight:600;font-size:21px;display:block;line-height:1.3}
.stat b.pos{color:var(--cover-2)}
.stat b.neg{color:var(--red)}

/* ---------- ตาราง ---------- */
.tablewrap{overflow-x:auto;border:1.5px solid var(--ink);background:var(--paper-2);margin-top:18px}
table.data{border-collapse:collapse;width:100%;min-width:700px;font-size:14.5px}
table.data th,table.data td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--rule)}
table.data th{
  background:var(--ink);color:var(--paper-2);font-family:'Kanit',sans-serif;font-weight:500;
  font-size:13px;position:sticky;top:0;text-align:right;
}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data tbody tr:nth-child(even){background:rgba(207,202,182,.18)}
table.data td.mono{font-family:'Space Mono',ui-monospace,monospace}
table.data td.pos{color:var(--cover-2);font-weight:700}
table.data td.neg{color:var(--red);font-weight:700}
caption{caption-side:bottom;padding:9px 12px;font-size:13px;color:var(--ink-3);text-align:left}
.swatch{display:inline-block;width:10px;height:10px;margin-right:7px;vertical-align:baseline}

/* สมุดบัญชีรายปี */
.book{background:var(--paper-3);border:1.5px solid var(--ink);max-height:340px;overflow:auto;font-family:'Space Mono',ui-monospace,monospace;font-size:12.5px}
.book table{width:100%;border-collapse:collapse;min-width:430px}
.book th{position:sticky;top:0;background:var(--cover);color:var(--on-cover);font-weight:400;font-size:10.5px;letter-spacing:.08em;padding:7px 9px;text-align:right}
.book th:first-child{text-align:left}
.book td{padding:5px 9px;text-align:right;border-bottom:1px dotted var(--rule)}
.book td:first-child{text-align:left;color:var(--ink-3)}
.book tr.hi td{background:#F2EBD3;font-weight:700}
.book td.pos{color:var(--cover-2);font-weight:700}

/* ---------- กราฟ ---------- */
.chart{position:relative;margin-top:12px}
canvas{width:100%;display:block;border:1.5px solid var(--ink);background:var(--paper-3)}
.legend{font-family:'Space Mono',ui-monospace,monospace;font-size:11px;color:var(--ink-2);display:flex;gap:7px 15px;flex-wrap:wrap;margin-top:9px}
.legend i{display:inline-block;width:15px;height:3px;vertical-align:middle;margin-right:5px}
.legend button{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:2px 0;display:flex;align-items:center;gap:0}
.legend button[aria-pressed="false"]{opacity:.38;text-decoration:line-through}
.tip{
  position:absolute;pointer-events:none;background:var(--ink);color:var(--paper-2);
  font-family:'Space Mono',ui-monospace,monospace;font-size:11.5px;padding:7px 9px;
  border-left:3px solid var(--gold-2);opacity:0;transition:opacity .12s var(--ease);white-space:nowrap;z-index:5;
}
.tip.on{opacity:1}

/* ---------- กล่องข้อความ ---------- */
.note{border-left:4px solid var(--ink);background:var(--paper-2);padding:13px 16px;margin-top:18px}
.note.red{border-left-color:var(--red-2);background:var(--red-wash)}
.note.gold{border-left-color:var(--gold-2);background:var(--gold-wash)}
.note p{max-width:none}

/* ---------- บัตรนำทางหน้าแรก ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5px;background:var(--ink);border:1.5px solid var(--ink);margin-top:22px}
.card{background:var(--paper-2);padding:18px 20px;text-decoration:none;color:inherit;display:block;transition:background .15s var(--ease)}
.card:hover{background:var(--paper-3)}
.card .n{font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;color:var(--red)}
.card h3{font-family:'Kanit',sans-serif;font-weight:600;font-size:19px;margin:5px 0 5px}
.card p{font-size:14.5px;color:var(--ink-2);max-width:none;line-height:1.6}

ol.refs{padding-left:22px;font-size:14px;line-height:1.7;margin-top:12px}
ol.refs li{margin-bottom:8px}
ol.refs a{word-break:break-word}

footer{background:var(--cover);color:var(--on-cover-2);padding:30px 0;margin-top:60px;font-size:14px}
footer b{color:var(--on-cover)}
footer .wrap>*+*{margin-top:8px}

/* ============================================================
   การเคลื่อนไหวเมื่อเลื่อนหน้าจอ
   ซ่อนเฉพาะตอนที่ JavaScript ทำงานเท่านั้น (html.reveal-on)
   ถ้าสคริปต์พัง เนื้อหาต้องยังอ่านได้ตามปกติ
   ============================================================ */
html.reveal-on [data-rv]{
  opacity:0;
  transform:translateY(16px);
  will-change:opacity,transform;
}
html.reveal-on [data-rv="left"]{transform:translateX(-18px)}
html.reveal-on [data-rv="scale"]{transform:scale(.97)}

html.reveal-on [data-rv].seen{
  opacity:1;
  transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--d,0ms);
}

/* แถบแสดงความคืบหน้าการเลื่อน */
.progress{
  position:absolute;left:0;bottom:-3px;height:3px;width:100%;
  background:var(--gold-2);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* ---------- ผิวสามมิติของดอกเบี้ยทบต้น ---------- */
.stage{
  position:relative;border:1.5px solid var(--ink);background:#0E2C27;
  margin-top:18px;overflow:hidden;
}
.stage canvas{display:block;border:0;background:transparent;width:100%}
.stage .hud{
  position:absolute;left:0;bottom:0;right:0;padding:10px 14px;
  background:linear-gradient(to top,rgba(14,44,39,.92),rgba(14,44,39,0));
  font-family:'Space Mono',ui-monospace,monospace;font-size:11.5px;color:var(--on-cover-2);
  display:flex;gap:8px 18px;flex-wrap:wrap;pointer-events:none;
}
.stage .hud b{color:#E3B65A;font-weight:400}
.stage .fallback{padding:26px 18px;color:var(--on-cover-2);font-size:14.5px}
.stage-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.stage-controls button{
  font-family:'Kanit',sans-serif;font-weight:500;font-size:13.5px;padding:9px 14px;min-height:40px;
  border:1.5px solid var(--ink);background:var(--paper-2);color:var(--ink);cursor:pointer;
  transition:background .15s var(--ease);
}
.stage-controls button:hover{background:var(--paper-3)}
.stage-controls button[aria-pressed="true"]{background:var(--cover);color:var(--on-cover)}

@media print{
  .phead .rain{display:none}
  html.reveal-on [data-rv]{opacity:1!important;transform:none!important}
  .stage,.progress{display:none}
  .nav,button.go,.segs{display:none}
  body{background:#fff;font-size:11pt}
  .tool-body{grid-template-columns:1fr}
  section{margin:18px 0;page-break-inside:avoid}
  .phead{background:#fff;color:#000;padding:0 0 12px}
  .phead h1,.phead .lede{color:#000}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* สำคัญ: ต้องยกเลิกการซ่อนด้วย ไม่อย่างนั้นเนื้อหาจะหายไปถาวร
     เพราะ transition ถูกปิด ทำให้ไม่มีอะไรพากลับมาเป็น opacity:1 */
  html.reveal-on [data-rv]{opacity:1!important;transform:none!important}
  .progress{display:none}
}