/* ---------- LINE Seed Sans TH ---------- */
  @font-face{
    font-family:"LINE Seed Sans TH"; font-style:normal; font-weight:400; font-display:optional;
    src:url("../fonts/LINESeedSansTH_W_Rg.woff2") format("woff2"),
        url("../fonts/LINESeedSansTH_W_Rg.woff") format("woff");
  }
  @font-face{
    font-family:"LINE Seed Sans TH"; font-style:normal; font-weight:700; font-display:optional;
    src:url("../fonts/LINESeedSansTH_W_Bd.woff2") format("woff2"),
        url("../fonts/LINESeedSansTH_W_Bd.woff") format("woff");
  }
  @font-face{
    font-family:"LINE Seed Sans TH"; font-style:normal; font-weight:800; font-display:optional;
    src:url("../fonts/LINESeedSansTH_W_XBd.woff2") format("woff2"),
        url("../fonts/LINESeedSansTH_W_XBd.woff") format("woff");
  }

  /* ---------- tokens (from DESIGN-cal.md) ---------- */
  :root{
    --canvas:#FBF7EC;         /* the page: cream, almost white but not quite */
    --surface:#ffffff;        /* the cards sitting on it */
    --surface-soft:#F6F0E2;
    --surface-card:#F6F0E2;
    --surface-strong:#E8DFCB;
    --surface-dark:#10302C;
    /* Mac's palette, 2026-08-30 */
    --brand:#249D8F;          /* his exact teal - decoration only, fails contrast under text */
    --brand-strong:#17756A;   /* the working action colour: white text passes AA (5.5:1) */
    --brand-deep:#115C54;     /* the answer: the grand total, footer wordmark */
    --cream:#FDF0D5;          /* the result panel */
    --sand:#E9C46A;           /* caution notes */
    --sienna:#E76F51;         /* disclaimer edge */
    --sienna-text:#C0492C;    /* error text: sienna darkened to pass AA (5.0:1) */
    --teal-tint:#E3F1EE;      /* the chosen-option chip */
    --sand-tint:#FCF4E2;      /* caution notes */
    --sienna-tint:#FDF1EC;    /* the disclaimer */
    --hairline:#E8DFCB;       /* warm borders, not grey ones */
    --hairline-soft:#F1E9DA;
    --ink:#12211F;            /* near-black, warmed with a green cast */
    --ink-active:#24332F;
    --body:#3D4A47;
    --muted:#67716C;
    --muted-soft:#7C8681;
    --on-dark:#ffffff;
    --on-dark-soft:#a1a1aa;
    --accent:#3b82f6;
    --warning:#f59e0b;
    --error:#ef4444;
    --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--canvas); color:var(--body);
    border-top:3px solid var(--brand);
    font-family:"LINE Seed Sans TH","Segoe UI",Tahoma,sans-serif;
    font-weight:400; font-size:16px; line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- page shell ---------- */
  .topnav{
    height:64px; display:flex; align-items:center;
    border-bottom:1px solid var(--hairline); background:var(--canvas);
  }
  .topnav .inner{
    max-width:1000px; margin:0 auto; padding:0 24px; width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
  }
  .navlinks{display:flex; align-items:center; gap:4px}
  .navlinks a{
    font-size:14px; font-weight:700; color:var(--body); text-decoration:none;
    padding:8px 12px; border-radius:var(--r-md); white-space:nowrap;
  }
  .navlinks a.on{background:var(--teal-tint); color:var(--brand-deep)}

  /* the three calculators, as a pill group */
  .tabs{
    display:inline-flex; gap:4px; padding:6px; margin:0 0 40px;
    background:var(--surface-soft); border-radius:var(--r-pill);
  }
  .tabs a{
    padding:8px 18px; border-radius:var(--r-pill); text-decoration:none;
    font-size:14px; font-weight:700; color:var(--muted); white-space:nowrap;
  }
  .tabs a.on{background:var(--surface); color:var(--brand-deep); box-shadow:0 1px 2px rgba(18,33,31,.10)}
  .brand{font-weight:800; font-size:18px; color:var(--brand-deep); text-decoration:none; letter-spacing:0}
  .brand span{color:var(--muted); font-weight:400; font-size:14px; margin-left:10px}

  .wrap{max-width:760px; margin:0 auto; padding:48px 24px 96px}

  /* ---------- type ---------- */
  h1{
    font-weight:800; font-size:36px; line-height:1.3; color:var(--ink);
    margin:0 0 12px; letter-spacing:0;
  }
  .lede{color:var(--muted); font-size:16px; margin:0 0 48px}

  /* ---------- form cards ---------- */
  fieldset{
    border:1px solid var(--hairline); border-radius:var(--r-lg);
    padding:24px; margin:0 0 24px; background:var(--surface);
    min-inline-size:0; min-width:0;
  }
  legend{
    padding:0 8px; font-weight:700; font-size:16px; color:var(--ink); line-height:1.4;
  }
  label{display:block; font-weight:700; font-size:15px; color:var(--ink); margin:20px 0 8px}
  fieldset > label:first-of-type{margin-top:4px}

  input[type=number], input.money{
    width:100%; height:48px; padding:0 14px;
    font-family:inherit; font-size:16px; font-weight:400; color:var(--ink);
    border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--surface);
  }
  input[type=number]:focus, input.money:focus{
    outline:none; border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(36,157,143,.18);
  }
  input::placeholder{color:var(--muted-soft)}

  .hint{color:var(--muted); font-size:13px; line-height:1.6; margin:8px 0 0}
  .hint a{color:var(--brand-strong); text-decoration:none; font-weight:700}
  .hint b{color:var(--body); font-weight:700}

  /* ---------- choice buttons ---------- */
  .btnrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
  .opt{
    border:1px solid var(--hairline); background:var(--surface); color:var(--body);
    border-radius:var(--r-md); padding:0 16px; height:40px;
    font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  }
  .opt[aria-pressed=true]{
    background:var(--teal-tint); border-color:var(--brand-strong); color:var(--brand-deep);
    box-shadow:inset 0 0 0 1px var(--brand-strong);
  }

  .check{display:flex; gap:12px; align-items:flex-start; margin:20px 0 0}
  .check input{margin-top:4px; width:18px; height:18px; flex:none; accent-color:var(--ink)}
  .check label{margin:0; font-size:15px}

  .go{
    width:100%; margin-top:8px; height:56px; padding:0 20px;
    font-family:inherit; font-size:16px; font-weight:700;
    background:var(--brand-strong); color:var(--on-dark);
    border:0; border-radius:var(--r-md); cursor:pointer;
  }
  .go:active{background:var(--brand-deep)}

  /* ---------- result ---------- */
  #out{margin-top:48px}
  .total{
    background:var(--brand-deep); border-radius:var(--r-xl);
    padding:32px 24px; text-align:center;
  }
  .total .c{color:#BEDBD6; font-size:14px; font-weight:400}
  .total .n{
    display:block; font-size:44px; font-weight:800; line-height:1.25;
    color:var(--cream); letter-spacing:0; margin-top:4px;
  }

  table{width:100%; border-collapse:collapse; margin-top:32px}
  th,td{
    text-align:left; padding:20px 0; vertical-align:top;
    border-bottom:1px solid var(--hairline); font-size:15px;
  }
  th{font-weight:700; color:var(--ink)}
  td.amt{
    text-align:right; white-space:nowrap;
    font-weight:800; font-size:17px; color:var(--ink);
  }
  .why{
    display:block; font-weight:400; color:var(--muted);
    font-size:13px; line-height:1.6; margin-top:6px;
  }

  /* ---------- notes and disclaimer ---------- */
  /* คำเตือนวางเป็นคอลัมน์ หัวข้อใหญ่ขึ้น คำอธิบายเล็กลง (2026-09-01) */
  .notes{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
    margin-top:28px; align-items:start;
  }
  .note{
    background:var(--sand-tint); border-left:4px solid var(--sand);
    padding:18px 20px; margin:0; color:var(--body);
    border-radius:0 var(--r-md) var(--r-md) 0;
  }
  /* หัวข้อบรรทัดเดียว คำอธิบายสูงเท่ากันทุกใบ 4 บรรทัด (2026-09-01) */
  .note .nt{
    display:block; font-size:16px; font-weight:800; line-height:1.5;
    color:var(--ink); margin:0 0 8px; min-height:24px;
  }
  .note p{margin:0; font-size:13px; line-height:1.6; min-height:83px}
  .note b{color:var(--ink); font-weight:700}
  @media (max-width:860px){
    .notes{grid-template-columns:1fr 1fr}
  }
  @media (max-width:620px){
    .notes{grid-template-columns:1fr; gap:12px}
  }
  .disc{
    background:var(--sienna-tint); border:1px solid var(--sienna); border-left-width:4px; color:var(--body);
    padding:20px; margin-top:32px; border-radius:var(--r-lg);
    font-size:14px; line-height:1.65;
  }
  .err{color:var(--sienna-text); font-weight:700; margin-top:16px}
  .hidden{display:none}

  /* ---------- footer ---------- */
  .foot{background:var(--surface-dark); color:var(--on-dark-soft); padding:48px 0}
  .foot .inner{max-width:1000px; margin:0 auto; padding:0 24px}
  .foot .fbrand{color:var(--on-dark); font-weight:800; font-size:18px}
  .foot .fbrand::after{content:""; display:block; width:40px; height:3px; background:var(--sand); margin-top:12px}
  .foot p{margin:12px 0 0; font-size:14px; line-height:1.7; max-width:620px}
  .foot .fine{color:var(--on-dark-soft); font-size:13px; margin-top:32px; border-top:1px solid rgba(255,255,255,.12); padding-top:20px}
  .fcols{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:36px}
  .fcols h3{font-size:13px; font-weight:700; color:var(--on-dark); margin:0 0 10px}
  .fcols a{display:block; color:var(--on-dark-soft); text-decoration:none; font-size:14px; padding:5px 0}

  /* ---------- mobile ---------- */
  @media (max-width:860px){
    .fcols{grid-template-columns:repeat(2,1fr); gap:16px 24px}
  }
  @media (max-width:640px){
    .topnav{height:auto; padding:12px 0}
    .topnav .inner{flex-direction:column; align-items:flex-start; gap:10px}
    .brand span{display:none}
    .navlinks{width:100%; overflow-x:auto; gap:2px; margin-left:-8px}
    .navlinks a{padding:8px 10px; font-size:13px}
    .tabs{display:flex; width:100%; overflow-x:auto; margin-bottom:32px}
    .wrap{padding:32px 16px 64px}
    h1{font-size:28px}
    .lede{margin-bottom:32px}
    fieldset{padding:20px 16px}
    .total .n{font-size:36px}
    .topnav .inner, .foot .inner{padding:0 16px}
  }

  /* ---------- content pages and articles ---------- */
  .prose{max-width:680px}
  .prose h2{
    font-size:22px; font-weight:800; color:var(--ink);
    margin:40px 0 12px; line-height:1.4;
  }
  .prose h3{font-size:17px; font-weight:700; color:var(--ink); margin:28px 0 8px}
  .prose p{margin:0 0 16px}
  .prose ul,.prose ol{margin:0 0 16px; padding-left:22px}
  .prose li{margin:0 0 8px}
  .prose a{color:var(--brand-strong); font-weight:700; text-decoration:none}
  .prose b,.prose strong{color:var(--ink); font-weight:700}
  .prose table{margin:8px 0 24px}
  .prose td,.prose th{font-size:14px; padding:12px 0}

  /* a highlighted aside inside an article: a caveat, a deadline, a gotcha */
  .callout{
    background:var(--sand-tint); border:1px solid var(--hairline);
    border-left:4px solid var(--sand); border-radius:var(--r-md);
    padding:16px 18px; margin:0 0 20px;
  }
  .callout p{margin:0}
  .callout p + p{margin-top:10px}
  .callout.warn{background:var(--sienna-tint); border-left-color:var(--sienna)}

  .updated{
    color:var(--muted); font-size:13px; margin:0 0 40px;
    padding-bottom:20px; border-bottom:1px solid var(--hairline);
  }
  .sources{
    background:var(--surface); border:1px solid var(--hairline);
    border-radius:var(--r-lg); padding:20px 24px; margin:40px 0 0;
  }
  .sources h3{margin:0 0 10px; font-size:15px; font-weight:700; color:var(--ink)}
  .sources ul{margin:0; padding-left:20px}
  .sources li{font-size:14px; margin:0 0 6px}

  /* the button an article uses to send the reader into a calculator */
  .calc-cta{
    display:block; background:var(--surface); border:1px solid var(--hairline);
    border-left:4px solid var(--brand-strong); border-radius:var(--r-lg);
    padding:20px 24px; margin:32px 0; text-decoration:none;
  }
  .calc-cta .t{display:block; font-weight:800; color:var(--ink); font-size:16px}
  .calc-cta .s{display:block; color:var(--muted); font-size:14px; margin-top:4px}
  .calc-cta .go-in{
    display:inline-block; margin-top:12px; background:var(--brand-strong); color:var(--on-dark);
    font-size:14px; font-weight:700; padding:10px 18px; border-radius:var(--r-md);
  }

  /* article index */
  .agroup{margin:0 0 40px}
  .agroup h2{font-size:18px; font-weight:800; color:var(--ink); margin:0 0 12px}
  .alist{list-style:none; margin:0; padding:0}
  .alist li{border-bottom:1px solid var(--hairline)}
  .alist a{display:block; padding:16px 0; color:var(--ink); text-decoration:none; font-weight:700}
  .alist a:hover{color:var(--brand-strong)}
  .alist .soon{display:block; padding:16px 0; color:var(--muted-soft); font-weight:400}
  .alist .soon em{font-style:normal; font-size:12px; color:var(--muted-soft)}

  /* save-as-image button under the result */
  .saverow{margin-top:28px; text-align:center}
  .save{
    background:var(--surface); color:var(--brand-deep); border:1px solid var(--brand-strong);
    font-family:inherit; font-size:15px; font-weight:700;
    padding:12px 22px; border-radius:var(--r-md); cursor:pointer;
  }
  .save:active{background:var(--teal-tint)}
  .savehint{color:var(--muted); font-size:13px; margin:10px 0 0}

  /* ---------- เฟดตอนเข้าหน้าใหม่ ----------
     ตัดสินใจ 2026-09-01: เฟดขาเข้าอย่างเดียว ไม่หน่วงตอนกดลิงก์
     เฉพาะเนื้อหา แถบบน ปุ่มสลับเครื่องคำนวณ และฟุตเตอร์ อยู่นิ่ง
     เอาการเลื่อนขึ้นออกแล้ว 2026-09-01 แมคบอกว่าพอมีการขยับแล้วรู้สึกแข็ง เหลือเฟดล้วน
     เขียนด้วย CSS ล้วน ไม่มี JavaScript ถ้าเบราว์เซอร์ไม่รองรับ animation
     ทั้งบรรทัดจะถูกข้ามไป เนื้อหาจึงแสดงตามปกติ ไม่มีทางค้างเป็นหน้าเปล่า */
  @keyframes fadeUp{
    from{ opacity:0 }
    to  { opacity:1 }
  }

  .wrap > *:not(.tabs){ animation:fadeUp .18s ease-out both }

  /* ผลลัพธ์ที่เพิ่งถูกสร้างขึ้นตอนกดคำนวณ ก็เฟดเข้ามาเหมือนกัน */
  #out > *{ animation:fadeUp .18s ease-out both }

  /* เครื่องของผู้ใช้ที่ตั้งค่าไว้ว่าไม่เอาอนิเมชัน ให้แสดงทันทีโดยไม่เฟด */
  @media (prefers-reduced-motion: reduce){
    .wrap > *:not(.tabs), #out > *{ animation:none }
  }

  /* ---------- กล่องพรีวิวก่อนบันทึกรูป ---------- */
  .modal{
    position:fixed; inset:0; z-index:50; padding:20px;
    background:rgba(18,33,31,.55);
    display:flex; align-items:center; justify-content:center;
  }
  .modal[hidden]{display:none}
  .modal .box{
    background:var(--surface); border-radius:var(--r-lg); padding:20px;
    width:100%; max-width:540px; max-height:90vh;
    display:flex; flex-direction:column;
    box-shadow:0 12px 40px rgba(18,33,31,.28);
  }
  .modal h3{margin:0; font-size:17px; font-weight:800; color:var(--ink)}
  .modal .mnote{margin:6px 0 14px; font-size:13px; color:var(--muted)}
  .modal .shot{
    flex:1; min-height:0; overflow:auto;
    border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--canvas);
  }
  .modal .shot img{display:block; width:100%}
  .modal .acts{display:flex; gap:10px; margin-top:16px}
  .modal .acts button{
    flex:1; height:50px; font-family:inherit; font-size:15px; font-weight:700;
    border-radius:var(--r-md); cursor:pointer;
  }
  .modal .mgo{flex:2; background:var(--brand-strong); color:var(--on-dark); border:0}
  .modal .mgo:active{background:var(--brand-deep)}
  .modal .mghost{background:var(--surface); color:var(--body); border:1px solid var(--hairline)}