@page{ size:A4; margin:10mm; }

:root{
    --accent:#000000;
    --accent-dark:#000000;
    --ink:#111111;
    --muted:#555555;
    --line:#000000;
    --soft:#efefef;
    --grid:#e3e3e3;
    --pos:#000000;
}

*{ box-sizing:border-box; }

body{
    margin:0;
    background:#cfd4d3;
    color:var(--ink);
    font-family:"Sarabun",Tahoma,sans-serif;
    font-size:14px;
    line-height:1.4;
}

/* one sheet = one A4 page on screen */
.sheet{
    width:210mm;
    min-height:297mm;
    background:#fff;
    margin:12px auto;
    padding:14mm;
    box-shadow:0 2px 14px rgba(0,0,0,.25);
    position:relative;
    overflow:hidden;
}

/* faint logo watermark — behind content on every sheet (screen + print) */
.sheet::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("logo.jpg") no-repeat center 44%;
    background-size:58%;
    opacity:.05;
    pointer-events:none;
    z-index:0;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
}
/* keep all sheet content above the watermark */
.sheet > *{ position:relative; z-index:1; }

/* print: drop screen chrome, break only BETWEEN sheets (no trailing blank) */
@media print{
    body{ background:#fff; }
    .sheet{
        width:auto; min-height:0;
        margin:0; padding:0;
        box-shadow:none;
    }
    .sheet + .sheet{ page-break-before:always; }
    /* running footer — repeats on every printed page */
    body::after{
        content:"เนื้อหาประกอบการสอนดัดแปลงเรือไฟฟ้า ผลิตโดย วิสาหกิจชุมชนอารยะคลองบางมดสร้างสรรค์";
        position:fixed;
        left:0; right:0; bottom:2mm;
        text-align:center;
        font-size:7.5pt;
        color:#666;
    }
}

/* on-screen footer credit — shows under every sheet in the web/combined view */
@media screen{
    .sheet{ position:relative; }
    .sheet::after{
        content:"เนื้อหาประกอบการสอนดัดแปลงเรือไฟฟ้า ผลิตโดย วิสาหกิจชุมชนอารยะคลองบางมดสร้างสรรค์";
        display:block;
        margin-top:16px;
        padding-top:8px;
        border-top:1px dashed #ccc;
        text-align:center;
        font-size:11px;
        color:#888;
    }
}

/* ---------- header ---------- */
.hd{
    border:2px solid var(--accent-dark);
    border-radius:10px;
    overflow:hidden;
    margin-bottom:8px;
}
.hd-main{
    background:var(--accent);
    color:#fff;
    padding:8px 14px;
}
.hd-main h1{ margin:0; font-size:21px; font-weight:800; }
.hd-sub{ font-size:13px; opacity:.92; margin-top:2px; }
.hd-meta{
    display:flex; gap:18px;
    padding:8px 16px;
    background:var(--soft);
    font-size:14px;
}
.hd-meta .f{ flex:1; display:flex; align-items:baseline; gap:6px; }
.hd-meta .ln{ flex:1; border-bottom:1px dotted var(--line); }

/* ---------- section ---------- */
.sec{
    border:1.5px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    margin-bottom:8px;
}
.sec > h2{
    margin:0; font-size:14.5px; font-weight:700;
    background:var(--accent); color:#fff;
    padding:6px 12px;
    display:flex; align-items:center; gap:9px;
}
.n{
    display:inline-flex; width:23px; height:23px;
    align-items:center; justify-content:center;
    background:#fff; color:var(--accent-dark);
    border-radius:50%; font-weight:800; font-size:13px;
    flex:none;
}
.sec .bd{ padding:9px; }

/* ---------- tables ---------- */
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th,td{ border:1px solid #aaaaaa; padding:4px 9px; text-align:left; }
thead th{ background:var(--accent-dark); color:#fff; }
tbody tr:nth-child(even){ background:var(--soft); }
.c{ text-align:center; }
.strong{ font-weight:700; color:var(--accent-dark); }

/* ---------- two / three columns ---------- */
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cols.cols3{ grid-template-columns:1fr 1fr 1fr; }
.cols .sec{ margin-bottom:0; }

.formula{
    background:var(--soft);
    border:1px dashed var(--accent);
    border-radius:7px;
    padding:6px 10px; margin:6px 0;
    text-align:center; font-weight:600;
}
.formula b{ color:var(--accent-dark); }

/* ---------- diagram ---------- */
.dia{
    border:1px solid #bbbbbb; border-radius:7px;
    background:#ffffff; padding:4px; text-align:center;
}
.dia svg{ width:100%; height:auto; display:block; }
.cap{ font-size:12.5px; color:var(--muted); margin-top:3px; }

/* ---------- note lines ---------- */
.lines{ margin-top:8px; }
.lines .l{ border-bottom:1px solid #888888; height:22px; }

/* ---------- exercises ---------- */
.ex{
    border:1.5px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    margin-bottom:9px;
    page-break-inside:avoid;   /* overflow -> whole block to next page */
}
.ex > h3{
    margin:0; font-size:14.5px;
    background:var(--soft);
    border-bottom:1px solid var(--line);
    padding:6px 12px;
    display:flex; align-items:center; gap:9px;
}
.ex .tag{
    background:var(--accent); color:#fff;
    border-radius:5px; padding:2px 9px; font-size:13px; font-weight:700;
    flex:none;
}
.ex .bd{ padding:9px; }

.res{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0; }
.res.res3{ grid-template-columns:1fr 1fr 1fr; }
.res .cell{ border:1px solid #aaaaaa; border-radius:7px; padding:6px 9px; }
.res .cell label{ display:block; font-weight:700; color:var(--accent-dark); font-size:13px; margin-bottom:7px; }
.res .cell .blank{ border-bottom:1.5px solid var(--line); height:22px; }

/* drawing area with light grid */
.draw{
    height:105px; border:1.5px dashed #999999; border-radius:7px;
    background-color:#ffffff;
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:22px 22px;
    display:flex; align-items:center; justify-content:center;
    color:#999999; font-size:13px;
}
.draw.tall{ height:170px; }
.draw.xl{ height:250px; }

/* ---------- summary footer ---------- */
.summary{
    border:2px solid var(--accent-dark);
    border-radius:10px; padding:12px;
    page-break-inside:avoid;
}
.summary h3{ margin:0 0 6px; color:var(--accent-dark); font-size:15px; }
.summary .l{ border-bottom:1px solid #888888; height:23px; }

/* ---------- added utilities (B/W printable) ---------- */

/* safety / warning callout */
.warn{
    border:1.5px solid #000; border-left:6px solid #000;
    border-radius:7px; padding:6px 11px; margin:6px 0;
    background:#fff; font-size:13.5px;
}
.warn b{ display:block; margin-bottom:2px; }

/* tip / note callout */
.tip{
    border:1px dashed #000; border-left:5px solid #000;
    border-radius:7px; padding:6px 11px; margin:6px 0;
    background:var(--soft); font-size:13.5px;
}
.tip b{ display:block; margin-bottom:2px; }

/* numbered step list */
ol.steps{ margin:6px 0; padding-left:22px; }
ol.steps li{ margin:3px 0; }

/* checklist with printable boxes */
ul.chk{ list-style:none; padding-left:0; margin:8px 0; }
ul.chk li{ display:flex; gap:9px; align-items:flex-start; margin:4px 0; }
ul.chk li::before{
    content:""; width:15px; height:15px; flex:none; margin-top:3px;
    border:1.5px solid #000; border-radius:3px;
}

/* inline fill-in blank (use inside a sentence) */
.fill{
    display:inline-block; min-width:64px;
    border-bottom:1.5px solid var(--line);
    margin:0 3px;
}

/* small key/value list */
ul.kv{ list-style:none; padding:0; margin:6px 0; }
ul.kv li{ display:flex; gap:8px; padding:3px 0; border-bottom:1px dotted #ccc; }
ul.kv li b{ min-width:130px; color:var(--accent-dark); }

/* chapter overview: นิยาม / หน้าที่ / ความสำคัญ */
.overview{
    border:2px solid var(--accent-dark);
    border-radius:10px;
    padding:8px 13px; margin-bottom:8px;
}
.overview h2{ margin:0 0 5px; font-size:14.5px; font-weight:800; color:var(--accent-dark); }
.overview .row{ display:flex; gap:10px; padding:3px 0; border-bottom:1px dotted #ccc; font-size:13.5px; }
.overview .row:last-child{ border-bottom:none; }
.overview .row b{ min-width:92px; flex:none; color:var(--accent-dark); }