/* =====================================================================
   MATSUMOTO TONKATSU ACADEMY — Visual Manual Design System
   Editorial infographic (portrait) · เลียนแบบสไตล์ NotebookLM manual
   ใช้ร่วมกันทุกไฟล์ doc-m1..m6  ·  1 .page = 1 การ์ดเต็มหน้า (ratio 4:5)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&family=Noto+Serif+Thai:wght@600;700&family=Noto+Serif:ital,wght@0,600;0,700;1,600&display=swap');

:root{
  --wine:#5c1f2b;           /* burgundy หลัก */
  --wine-deep:#491722;      /* เข้มสำหรับปก */
  --wine-soft:#6e2733;      /* header card */
  --gold:#c49a52;
  --gold-deep:#a87f3c;
  --gold-soft:#e3cfa3;
  --gold-line:#e8dcc4;
  --cream:#faf6ec;          /* พื้นหน้า */
  --cream-2:#f3ecdd;
  --paper:#f6f1e6;
  --ink:#2b2620;
  --soft:#6a5f54;
  --olive:#7d7a3a;          /* header ซอสยูสึ */
  --sesame:#8a6a3a;         /* header ซอสงา */
  --danger:#9c2b27;
  --shadow:0 10px 34px rgba(60,30,20,.18);
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Noto Sans Thai','Segoe UI',sans-serif;
  color:var(--ink);line-height:1.5;
  background:#cbc4b8;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
  padding:26px 0;
}

/* ----- หน้า (การ์ดเต็มหน้า) ----- */
.page{
  position:relative;width:1080px;min-height:1350px;margin:0 auto 30px;
  background:var(--cream);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(196,154,82,.05), transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(92,31,43,.04), transparent 42%);
  box-shadow:var(--shadow);
  padding:74px 70px 90px;display:flex;flex-direction:column;overflow:hidden;
}
.page::after{ /* subtle paper texture */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(120,90,50,.012) 3px,rgba(120,90,50,.012) 4px);
}
.page>*{position:relative;z-index:1;}

/* ----- โหมดหน้า A4 (1080 x 1527 = สัดส่วน A4) ----- */
.page.a4{height:1527px;min-height:1527px;}
.page.a4 .page-foot{margin-top:auto;}
.cover.a4{height:1527px;min-height:1527px;}
.page-head .h2cont{font-size:34px;font-weight:700;color:var(--gold-deep);}
.page.a4 .img-band img{height:780px;object-fit:cover;}

/* ----- โหมด A4 compact (บีบ ~15-20% เพื่อรวมหน้า) ----- */
.page.a4.compact{padding:56px 60px 66px;}
.page.a4.compact .page-head{margin-bottom:6px;}
.page.a4.compact .page-head .num{font-size:60px;}
.page.a4.compact .page-head h2{font-size:42px;}
.page.a4.compact .subtitle{font-size:25px;margin:2px 0 18px;line-height:1.4;}
.page.a4.compact .card{margin-bottom:18px;}
.page.a4.compact .card .ch{padding:12px 24px;}
.page.a4.compact .card .ch h3{font-size:28px;}
.page.a4.compact .card .cb{padding:18px 24px;font-size:23px;line-height:1.45;}
.page.a4.compact .card.with-img .cb{padding:0;}
.page.a4.compact .card.with-img .cb .info{padding:18px 24px;}
.page.a4.compact .card.with-img .cb .pic{min-height:220px;}
.page.a4.compact table.recipe td{padding:5px 4px;}
.page.a4.compact table.diag th,.page.a4.compact table.diag td{padding:10px 14px;font-size:21px;line-height:1.4;}
.page.a4.compact .flow-v .step{padding:4px 0;gap:16px;}
.page.a4.compact .flow-v .step .n{width:44px;height:44px;font-size:22px;}
.page.a4.compact .flow-v .step .d{font-size:23px;line-height:1.38;padding-top:4px;}
.page.a4.compact .flow-v .step:not(:last-child) .n::after{top:46px;height:16px;}
.page.a4.compact .tip,.page.a4.compact .warn,.page.a4.compact .science{font-size:22px;line-height:1.45;padding:16px 20px;margin-bottom:14px;}
.page.a4.compact .tip,.page.a4.compact .warn{padding-left:58px;}
.page.a4.compact .tip::before,.page.a4.compact .warn::before{left:18px;top:15px;font-size:26px;}
.page.a4.compact .science .lab{font-size:24px;}
.page.a4.compact .endnote{font-size:22px;line-height:1.45;padding:16px 22px;}
.page.a4.compact .highlight-gold{padding:26px 32px;}
.page.a4.compact .highlight-gold .hg-title{font-size:40px;margin-bottom:10px;}
.page.a4.compact .stat-box{gap:24px;}
.page.a4.compact .stat-box .big{font-size:92px;}
.page.a4.compact .stat-box .txt{font-size:24px;line-height:1.42;}
.page.a4.compact .stat-box .txt .lab{font-size:26px;}
.page.a4.compact .timeline li{padding:8px 0;gap:18px;}
.page.a4.compact .timeline li .t{font-size:25px;min-width:100px;}
.page.a4.compact .timeline li .d{font-size:23px;}
.page.a4.compact .compare{margin-bottom:16px;}
.page.a4.compact .compare .cbar{font-size:25px;}
.page.a4.compact .compare .col{padding:16px 20px;font-size:22px;line-height:1.42;}
.page.a4.compact .compare .cfoot{padding:10px;font-size:21px;}
.page.a4.compact .supply{padding:12px 20px;font-size:22px;line-height:1.42;margin-bottom:10px;}
.page.a4.compact .checklist li{padding:12px 0;font-size:26px;gap:18px;}
.page.a4.compact .checklist li::before{width:42px;height:42px;font-size:25px;}
.page.a4.compact .img-band{margin-bottom:16px;}
.page.a4.compact .img-band img{height:520px;}
.page.a4.compact .method{font-size:22px;}
.page.a4.compact ul.eq li{font-size:22px;padding:6px 0 6px 40px;}
.page.a4.compact .page-foot{margin-top:auto;padding-top:12px;}

/* ----- หน้าพื้น wine (workshop/highlight) ----- */
.page.dark{background:linear-gradient(160deg,var(--wine),var(--wine-deep));color:#f4e7d8;}
.page.dark::after{opacity:.2;}
.page.dark .page-head .num{color:var(--gold);}
.page.dark .page-head h2{color:#fff;}
.page.dark .page-head .pg{color:var(--gold-soft);}
.page.dark .subtitle{color:#e7cfb8;}
.page.dark .rule{background:linear-gradient(90deg,var(--gold),transparent);}
.page.dark .checklist li{color:#f5ead9;border-color:rgba(196,154,82,.3);}
.page.dark .checklist li::before{border-color:var(--gold);color:var(--gold);}
.page.dark .page-foot{color:#c9a878;border-color:rgba(196,154,82,.22);}
.page.dark .page-foot .lg{color:var(--gold-soft);}

/* ----- ปก ----- */
.cover{
  width:1080px;min-height:1500px;margin:0 auto 30px;
  background:
    radial-gradient(circle at 50% 26%, rgba(196,154,82,.16), transparent 46%),
    linear-gradient(160deg,var(--wine) 0%,var(--wine-deep) 100%);
  color:var(--cream);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:90px 80px;position:relative;
}
.cover .kanji{font-family:'Noto Serif',serif;font-size:150px;color:var(--gold);line-height:1;
  text-shadow:0 4px 22px rgba(0,0,0,.3);}
.cover .acad{letter-spacing:9px;font-size:23px;font-weight:600;color:var(--gold-soft);
  text-transform:uppercase;margin-top:24px;}
.cover .daytag{display:inline-block;border:1.6px solid var(--gold);color:var(--gold-soft);
  border-radius:40px;padding:13px 40px;font-size:27px;font-weight:600;margin:90px 0 56px;}
.cover h1{font-size:104px;font-weight:800;line-height:1.04;letter-spacing:-1px;margin-bottom:34px;}
.cover .sub{font-size:33px;line-height:1.5;color:#ecd9bf;max-width:760px;font-weight:500;}
.cover .cover-foot{position:absolute;bottom:78px;left:0;right:0;font-size:21px;color:#c9a878;}

/* ----- หัวหน้า ----- */
.page-head{display:flex;align-items:flex-start;gap:22px;margin-bottom:10px;}
.page-head .num{font-family:'Noto Serif',serif;font-weight:700;font-size:74px;color:var(--wine);
  line-height:.9;flex:none;}
.page-head .ht{flex:1;}
.page-head h2{font-size:50px;font-weight:800;color:var(--wine);line-height:1.1;letter-spacing:-.5px;}
.page-head .pg{margin-left:auto;font-size:19px;color:var(--gold-deep);font-weight:600;
  white-space:nowrap;padding-top:14px;}
.subtitle{font-size:29px;color:var(--soft);font-weight:500;margin:4px 0 26px;line-height:1.45;}
.rule{height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin:0 0 30px;border:none;}

/* ----- กล่อง stat ตัวเลขใหญ่ (63°C) ----- */
.stat-box{display:flex;gap:30px;align-items:center;background:#fffdf8;border:1px solid var(--gold-line);
  border-radius:18px;padding:34px 40px;margin-bottom:30px;box-shadow:0 6px 20px rgba(120,80,40,.07);}
.stat-box .big{font-family:'Noto Serif',serif;font-weight:700;font-size:120px;color:var(--gold);
  line-height:.85;flex:none;}
.stat-box .txt{font-size:28px;line-height:1.5;color:var(--ink);}
.stat-box .txt b{color:var(--wine);}
.stat-box .txt .lab{display:block;font-weight:700;color:var(--wine);font-size:30px;margin-bottom:4px;}

/* ----- เหรียญทอง (1:1.1) ----- */
.medallion-row{display:flex;gap:36px;align-items:center;margin-bottom:30px;}
.medallion{width:240px;height:240px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#f1ddac,#caa052 62%,#b5863c);
  border:5px solid #d9bd7e;box-shadow:0 10px 26px rgba(150,110,50,.32),inset 0 3px 10px rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
  font-family:'Noto Serif',serif;font-weight:700;font-size:74px;color:#5a3f12;}
.medallion-info{flex:1;font-size:30px;line-height:1.7;}
.medallion-info .ln{display:flex;justify-content:space-between;gap:18px;
  border-bottom:1px dashed var(--gold-line);padding:8px 0;}
.medallion-info .ln b{color:var(--wine);}

/* ----- recipe / data card ----- */
.card{border-radius:18px;overflow:hidden;margin-bottom:26px;background:#fffdf8;
  border:1px solid var(--gold-line);box-shadow:0 7px 22px rgba(120,80,40,.09);}
.card .ch{background:var(--wine);color:var(--cream);padding:18px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.card .ch h3{font-size:33px;font-weight:700;}
.card.sesame .ch{background:linear-gradient(100deg,var(--sesame),#a07c3e);}
.card.olive  .ch{background:linear-gradient(100deg,var(--olive),#9a9450);}
.card .cb{padding:28px 30px;font-size:27px;line-height:1.55;}
.card-badge{background:var(--cream);color:var(--wine);font-size:21px;font-weight:700;
  border-radius:40px;padding:8px 22px;white-space:nowrap;}

/* card ที่มีรูปครึ่งใบด้านขวา */
.card.with-img .cb{display:flex;gap:0;padding:0;}
.card.with-img .cb .info{flex:1.15;padding:28px 30px;}
.card.with-img .cb .pic{flex:1;background-size:cover;background-position:center;min-height:300px;}

/* ตารางสูตร */
table.recipe{width:100%;border-collapse:collapse;font-size:26px;margin-bottom:14px;}
table.recipe td{padding:8px 4px;border-bottom:1px dashed var(--gold-line);}
table.recipe td:last-child{text-align:right;color:var(--wine);font-weight:700;white-space:nowrap;}
.method{font-size:25px;line-height:1.5;color:var(--soft);font-style:italic;margin-top:10px;}
.method b{color:var(--wine);font-style:normal;}

/* ----- step flow (วงกลมเลข) ----- */
.flow{display:flex;justify-content:space-between;gap:8px;margin:24px 0;position:relative;}
.flow::before{content:"";position:absolute;top:33px;left:7%;right:7%;height:2px;
  background:var(--gold-line);z-index:0;}
.flow .step{flex:1;text-align:center;position:relative;z-index:1;}
.flow .step .n{width:66px;height:66px;border-radius:50%;background:var(--cream);
  border:2.5px solid var(--gold);color:var(--gold-deep);font-family:'Noto Serif',serif;
  font-size:32px;font-weight:700;display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;}
.flow .step .d{font-size:23px;line-height:1.4;color:var(--ink);padding:0 6px;}
.flow .step .d b{color:var(--wine);}

/* step flow แนวตั้ง */
.flow-v{margin:18px 0;}
.flow-v .step{display:flex;gap:22px;align-items:flex-start;padding:10px 0;}
.flow-v .step .n{width:58px;height:58px;flex:none;border-radius:50%;background:var(--cream);
  border:2.5px solid var(--gold);color:var(--gold-deep);font-family:'Noto Serif',serif;
  font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.flow-v .step .d{font-size:27px;line-height:1.45;padding-top:8px;}
.flow-v .step .d b{color:var(--wine);}
.flow-v .step:not(:last-child) .n{position:relative;}
.flow-v .step:not(:last-child) .n::after{content:"";position:absolute;top:60px;left:50%;
  transform:translateX(-50%);width:2px;height:30px;background:var(--gold-line);}

/* ----- กล่อง tip / warn / science ----- */
.tip,.warn,.science{font-size:25px;line-height:1.55;border-radius:14px;padding:22px 26px;
  margin-bottom:20px;}
.tip,.warn{position:relative;padding-left:66px;}
.tip{background:#fbf2d9;border:1.5px dashed var(--gold);color:#5a4a1f;}
.tip::before{content:"💡";position:absolute;left:22px;top:21px;font-size:30px;line-height:1.2;}
.tip b{color:var(--wine);}
.warn{background:#fbeae8;border:1.5px solid #d8a59f;color:#8a2c25;}
.warn::before{content:"⚠";position:absolute;left:22px;top:21px;font-size:30px;color:#b5362c;line-height:1.2;}
.warn b{color:#8a2c25;}
.warn.solid{background:var(--wine);color:#fbe9e6;border-color:var(--wine-deep);}
.warn.solid::before{color:#f0c2bc;}
.warn.solid b{color:#fff;}
.science{background:#f3eefa;border-left:5px solid #7a6a9a;border-radius:0 14px 14px 0;color:#3f3556;}
.science b{color:#4a3d66;}
.science .lab{display:block;font-weight:700;font-size:27px;color:#4a3d66;margin-bottom:6px;}

/* ----- timeline ----- */
.timeline{list-style:none;}
.timeline li{display:flex;gap:24px;padding:13px 0;border-bottom:1px dotted var(--gold-line);align-items:baseline;}
.timeline li .t{font-family:'Noto Serif',serif;font-weight:700;color:var(--wine);font-size:30px;min-width:120px;}
.timeline li .d{font-size:27px;flex:1;}
.timeline li .tag{margin-left:auto;font-size:20px;color:var(--gold-deep);white-space:nowrap;}

/* ----- ตารางเทียบ 2 คอลัมน์ (header wine เต็มแถบ) ----- */
.compare{border:1px solid var(--gold-line);border-radius:14px;overflow:hidden;margin-bottom:24px;}
.compare .cbar{background:var(--wine);color:var(--cream);text-align:center;font-size:30px;
  font-weight:700;padding:14px;}
.compare .cgrid{display:flex;}
.compare .col{flex:1;padding:24px 28px;font-size:26px;line-height:1.5;}
.compare .col:first-child{border-right:1px solid var(--gold-line);}
.compare .col b{color:var(--wine);}
.compare .cfoot{background:var(--cream-2);text-align:center;padding:16px;font-size:25px;font-weight:600;}

/* ----- equipment list (2 คอลัมน์) ----- */
ul.eq{list-style:none;columns:2;column-gap:40px;font-size:26px;}
ul.eq li{padding:11px 0 11px 38px;position:relative;break-inside:avoid;
  border-bottom:1px dotted var(--gold-line);}
ul.eq li::before{content:"▢";position:absolute;left:4px;color:var(--gold);font-size:26px;top:9px;}
ul.eq li.star::before{content:"★";color:var(--wine);}

/* supply group (วัตถุดิบแบ่งหมวด) */
.supply{background:#fffdf8;border:1px solid var(--gold-line);border-radius:12px;
  padding:18px 26px;margin-bottom:14px;font-size:26px;line-height:1.5;}
.supply b{color:var(--wine);display:inline-block;margin-bottom:2px;}

/* ----- checklist (workshop) ----- */
.checklist{list-style:none;}
.checklist li{display:flex;gap:22px;align-items:flex-start;padding:20px 0;
  border-bottom:1px solid rgba(196,154,82,.25);font-size:30px;line-height:1.4;}
.checklist li::before{content:"✓";flex:none;width:50px;height:50px;border-radius:10px;
  border:2.5px solid var(--gold);color:var(--gold);font-weight:800;font-size:30px;
  display:flex;align-items:center;justify-content:center;}

/* กล่อง highlight ทอง */
.highlight-gold{background:linear-gradient(135deg,#e7cd92,#d2ad5e);border-radius:18px;
  padding:40px 44px;text-align:center;color:#4a3410;box-shadow:0 8px 24px rgba(160,120,50,.28);}
.highlight-gold .hg-title{font-size:50px;font-weight:800;color:#4a2a10;margin-bottom:16px;}
.highlight-gold .hg-body{font-size:28px;line-height:1.55;}

/* ----- ตาราง diagnostic 3 คอลัมน์ ----- */
table.diag{width:100%;border-collapse:collapse;font-size:25px;border-radius:14px;overflow:hidden;
  box-shadow:0 6px 20px rgba(120,80,40,.09);}
table.diag th{background:var(--wine);color:var(--cream);padding:18px 20px;font-size:27px;font-weight:700;text-align:left;}
table.diag td{padding:18px 20px;border-bottom:1px solid var(--gold-line);vertical-align:top;line-height:1.45;}
table.diag tr:nth-child(even) td{background:var(--cream-2);}
table.diag td:first-child{color:#8a2c25;font-weight:700;width:26%;}
table.diag td b{color:var(--wine);}

/* ----- รูปลอย / รูปเต็มแถบ ----- */
.img-band{width:100%;border-radius:16px;overflow:hidden;margin-bottom:24px;box-shadow:0 7px 22px rgba(120,80,40,.12);}
.img-band img{width:100%;display:block;}
.img-float{border-radius:14px;overflow:hidden;box-shadow:0 7px 20px rgba(120,80,40,.16);}
.img-float img{width:100%;display:block;}
.two-img{display:flex;gap:18px;margin-bottom:24px;}
.two-img .img-float{flex:1;}

/* spacer ดันเนื้อหาให้กล่องท้ายอยู่ล่าง */
.spacer{flex:1;min-height:14px;}

/* footer หน้า */
.page-foot{margin-top:26px;border-top:1px solid var(--gold-line);padding-top:16px;
  font-size:19px;color:#9a8c7a;display:flex;justify-content:space-between;}
.page-foot .lg{font-weight:600;color:var(--gold-deep);}

/* ----- โน้ตท้าย (เน้น) ----- */
.endnote{background:var(--wine);color:#f2e3d6;border-radius:16px;padding:26px 30px;
  font-size:26px;line-height:1.55;}
.endnote b{color:#fff;}
.endnote.gold{background:linear-gradient(135deg,#e7cd92,#d2ad5e);color:#4a3410;}
.endnote.gold b{color:#3a2810;}

/* badge pending */
.pending-tag{background:var(--gold);color:var(--wine);font-size:21px;font-weight:700;
  border-radius:40px;padding:8px 22px;white-space:nowrap;}
.card.pending{border:2px dashed var(--gold);background:#fffaf0;}

/* ----- กล่อง prompt (เล่ม AI) ----- */
.prompt{background:#2e2a25;color:#f2e6d2;border-radius:14px;padding:20px 26px;margin-bottom:20px;
  font-size:24px;line-height:1.5;white-space:pre-wrap;border-left:5px solid var(--gold);}
.prompt .pl{display:block;font-weight:700;color:var(--gold);font-size:22px;margin-bottom:8px;
  letter-spacing:.5px;}
.prompt .fill{color:#e6b96a;font-weight:600;}
.page.a4.compact .prompt{font-size:21px;line-height:1.45;padding:16px 20px;margin-bottom:14px;}
.page.a4.compact .prompt .pl{font-size:20px;margin-bottom:5px;}

/* ----- worksheet เส้นให้กรอก (เล่ม AI) ----- */
.ws{border:1px solid var(--gold-line);border-radius:14px;overflow:hidden;margin-bottom:18px;background:#fffdf8;}
.ws .wrow{display:flex;border-bottom:1px solid var(--gold-line);}
.ws .wrow:last-child{border-bottom:none;}
.ws .wk{flex:none;width:300px;background:var(--cream-2);padding:14px 20px;font-size:23px;
  font-weight:700;color:var(--wine);border-right:1px solid var(--gold-line);}
.ws .wv{flex:1;padding:14px 20px;min-height:104px;
  background:repeating-linear-gradient(transparent,transparent 44px,#e3d6ba 44px,#e3d6ba 45px);}
.ws .wv.h2x{min-height:148px;}

/* checkbox inline (ลิสต์ที่ติ๊กได้) */
.chk{list-style:none;font-size:25px;line-height:1.5;}
.chk li{padding:9px 0 9px 44px;position:relative;border-bottom:1px dotted var(--gold-line);}
.chk li::before{content:"☐";position:absolute;left:6px;top:7px;color:var(--gold-deep);font-size:28px;}
.page.a4.compact .chk{font-size:22px;}
.page.a4.compact .chk li{padding:6px 0 6px 40px;}

@media print{
  body{background:#fff;padding:0;}
  .page,.cover{margin:0;box-shadow:none;page-break-after:always;break-after:page;}
  .card,.compare,table.diag,.flow,.stat-box,.highlight-gold,.timeline{break-inside:avoid;}
}