/* poster.css — โปสเตอร์ปาจื้อ (กระดาษสีครีม ใช้สีคงที่ ไม่ตามธีมมืด เพื่อให้รูปที่บันทึกออกมาเหมือนกันทุกเครื่อง) */
.poster {
  --pbg: #fbf6ee; --pcard: #fffdf8; --pline: #e7d9c0; --pink: #3c3227; --pmute: #8b7f6d;
  --phead: #f6e9d6; --pgood: #eef7ec; --pgoodl: #cfe7cb; --pbad: #fdeef0; --pbadl: #f3ccd3;
  --pblue: #eef2fb; --pbluel: #cdd8ef; --ppink: #fdeef3;
  --pf: "Mali"; --e0: #2f8a3e; --e1: #d23a2c; --e2: #8a5a2b; --e3: #a37a24; --e4: #2356c7;
  container-type: inline-size;
  background: var(--pbg); color: var(--pink); border-radius: 22px; padding: 16px;
  border: 1px solid var(--pline); box-shadow: 0 8px 30px rgba(90, 70, 40, .12);
  font-family: "IBM Plex Sans Thai", system-ui, sans-serif; line-height: 1.5;
}
.poster * { box-sizing: border-box; }
.poster .muted { color: var(--pmute); }
.poster b { color: inherit; }
.pz { font-family: "Noto Serif SC", serif; font-size: 2.6rem; font-weight: 700; line-height: 1.1; display: block; }
.pz.xl { font-size: 4rem; }
.pz.muted { color: var(--pmute); }
.poster .pin { display: block; font-size: .72rem; color: var(--pmute); letter-spacing: .04em; }
.poster .pel, .poster .pan { display: block; font-size: .72rem; line-height: 1.35; margin-top: 2px; }
.poster .pan { color: #6a5f51; }

.p-top { display: grid; gap: 12px; grid-template-columns: 1fr; }
.p-hero { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--pline); min-height: 230px; background: #f7efe1; }
.p-land-cool { display: none; }
.p-land { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-hero-in { position: relative; z-index: 1; padding: 18px 16px; text-align: center; }
.p-title { font-family: var(--pf), sans-serif; font-size: 2rem; font-weight: 700; color: #3f3529; }
.p-sub { font-size: .82rem; color: #6d6252; line-height: 1.4; margin-bottom: 8px; }
.p-name { font-family: var(--pf), sans-serif; font-size: 1.1rem; color: #a3543f; }
.p-date { font-size: 1rem; font-weight: 600; margin-top: 6px; }
.p-note { font-size: .74rem; color: var(--pmute); }
.p-tag { margin-top: 10px; font-size: .82rem; color: #6d6252; font-style: italic; }

.p-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--pline); border-radius: 18px; overflow: hidden; background: var(--pcard); }
.p-col { text-align: center; border-right: 1px solid var(--pline); }
.p-col:last-child { border-right: 0; }
.p-col.is-day { background: #fffaf0; }
.p-colh { background: var(--phead); font-family: var(--pf), sans-serif; font-weight: 700; font-size: .92rem; padding: 6px 2px; line-height: 1.25; }
.p-colh small { display: block; font-size: .66rem; font-weight: 400; color: #7d7062; }
.p-cell { padding: 8px 2px; border-bottom: 1px solid #f0e6d6; }
.p-hid { font-size: .68rem; color: #6a5f51; padding: 6px 4px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; }
.p-hid b { font-size: .64rem; color: var(--pmute); }
.hz { display: inline-flex; flex-direction: column; align-items: center; font-family: "Noto Serif SC", serif; font-size: 1rem; line-height: 1.1; }
.hz small { font-family: "IBM Plex Sans Thai", sans-serif; font-size: .6rem; color: var(--pmute); }

.p-els { background: var(--ppink); border: 1px solid #f0cfd8; border-radius: 18px; padding: 10px 12px; }
.p-boxh { font-family: var(--pf), sans-serif; font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.p-boxh small { font-weight: 400; font-size: .7rem; color: var(--pmute); margin-left: 4px; }
.p-elrow { display: grid; grid-template-columns: 26px 62px 1fr; align-items: center; gap: 6px; margin-bottom: 6px; }
.p-eli { font-size: 1.1rem; }
.p-eln { font-size: .82rem; line-height: 1.2; }
.p-eln small { color: var(--pmute); font-size: .7rem; }
.p-elbar { height: 12px; background: #eee4d6; border-radius: 3px; overflow: hidden; display: block; }
.p-elbar i { display: block; height: 100%; border-radius: 3px; }
.p-elsum { margin-top: 10px; font-size: .78rem; line-height: 1.7; border-top: 1px dashed #e3c3ce; padding-top: 8px; }
.p-elsum b { color: #a33b52; }

.p-mid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.p-box { background: var(--pcard); border: 1px solid var(--pline); border-radius: 18px; padding: 12px 14px; }
.p-box.good { background: var(--pgood); border-color: var(--pgoodl); }
.p-box.bad { background: var(--pbad); border-color: var(--pbadl); }
.p-box.blue { background: var(--pblue); border-color: var(--pbluel); }
.p-dm { text-align: center; }
.p-dmtxt { font-size: .85rem; margin: 8px 0 4px; }
.p-small { font-size: .76rem; color: var(--pmute); margin: 0; }
.p-list { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.p-list li { display: flex; gap: 7px; align-items: flex-start; margin-bottom: 5px; line-height: 1.4; }
.p-list .ok, .p-list .no { flex: none; width: 17px; height: 17px; border-radius: 50%; color: #fff; font-size: .68rem; display: grid; place-items: center; margin-top: 2px; }
.p-list .ok { background: #43a047; }
.p-list .no { background: #e05a6d; font-weight: 700; }
.p-list .ji { flex: none; width: 18px; text-align: center; }

.p-luck { margin-top: 12px; background: var(--pcard); border: 1px solid var(--pline); border-radius: 18px; padding: 10px 12px; }
.p-luckh { font-family: var(--pf), sans-serif; font-size: .95rem; margin-bottom: 8px; }
.p-luckh span { font-family: "IBM Plex Sans Thai", sans-serif; font-size: .74rem; color: var(--pmute); font-weight: 400; }
.p-lkrow { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.p-lk { flex: none; width: 104px; text-align: center; border: 1px solid var(--pline); border-radius: 12px; padding: 6px 4px; background: #fffdf7; }
.p-lk.now { border: 2px solid #e08aa6; background: #fdf1f5; }
.lk-age { font-size: .7rem; font-weight: 600; line-height: 1.25; }
.lk-age small { font-weight: 400; color: var(--pmute); font-size: .64rem; }
.lk-zh { display: flex; justify-content: center; gap: 2px; margin: 2px 0; }
.lk-zh .pz { font-size: 1.5rem; }
.lk-pin { font-size: .62rem; color: var(--pmute); }
.lk-el { font-size: .66rem; color: #6a5f51; }
.lk-st { font-size: .7rem; letter-spacing: 1px; color: #b9ac96; }
.lk-st.r5, .lk-st.r4 { color: #d79b1f; }
.lk-st.r1, .lk-st.r2 { color: #cf6b57; }
.lk-txt { font-size: .64rem; line-height: 1.35; color: #5f5547; margin-top: 2px; }
.p-lk-empty { font-size: .8rem; color: #a33b52; padding: 6px; }

.p-bottom { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.p-b { display: flex; gap: 8px; align-items: flex-start; background: var(--pcard); border: 1px solid var(--pline); border-radius: 16px; padding: 10px 12px; }
.p-b .bi { font-size: 1.2rem; flex: none; }
.p-b b { font-family: var(--pf), sans-serif; font-size: .92rem; }
.p-b p { margin: 2px 0 0; font-size: .8rem; line-height: 1.45; }
.p-quote { text-align: center; font-size: .8rem; color: #6d6252; font-style: italic; margin: 12px 0 2px; }
.p-quote span { color: var(--pmute); font-style: normal; }

/* จอกว้างขึ้น (ใช้ container query เพื่อให้รูปที่บันทึกได้เลย์เอาต์เต็มเสมอ) */
@container (min-width: 700px) {
  .p-top { grid-template-columns: 250px 1fr 250px; }
  .p-mid { grid-template-columns: 1fr 1fr; }
  .p-bottom { grid-template-columns: 1fr 1fr; }
}
@container (min-width: 1000px) {
  .p-top { grid-template-columns: 270px 1fr 270px; }
  .p-mid { grid-template-columns: repeat(4, 1fr); }
  .p-bottom { grid-template-columns: repeat(4, 1fr); }
  .p-lkrow { overflow: visible; }
  .p-lk { flex: 1 1 0; width: auto; }
}
.p-export { width: 1240px; padding: 22px; }

/* ให้โปสเตอร์กว้างเต็มจอได้ แม้คอลัมน์เนื้อหาหลักจะแคบกว่า */
#bzPosterWrap { --pw: min(1240px, calc(100vw - 28px)); width: var(--pw); margin-left: calc((100% - var(--pw)) / 2); }

@media print {
  #bzPosterWrap { width: 100%; margin-left: 0; }
  .poster { box-shadow: none; border: 0; padding: 0; }
  .p-mid, .p-bottom, .p-luck, .p-top { break-inside: avoid; }
}
.p-elwhy { margin-top: 6px; font-style: italic; color: #6d6252; font-size: .74rem; line-height: 1.5; }
.p-disc { text-align: center; font-size: .68rem; color: #9a8d79; line-height: 1.5; margin: 2px 0 0; }

/* ===== โปสเตอร์ธีมเท่ — กระดานดำ + ทอง (ไม่ใช้ color-mix เพราะ html2canvas ไม่รองรับ) ===== */
[data-style="cool"] .poster {
  --pbg: #0f1319; --pcard: #171d26; --pline: #2c3644; --pink: #e6ebf1; --pmute: #8d98a7;
  --phead: #1f2833; --pgood: #122219; --pgoodl: #24452f; --pbad: #261618; --pbadl: #4d272c;
  --pblue: #121c29; --pbluel: #27405e; --ppink: #1a1812;
  --pf: "Chakra Petch"; --e0: #5fcf73; --e1: #ff6b57; --e2: #d6a26a; --e3: #efbe4f; --e4: #62a4ff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
[data-style="cool"] .p-land-sweet { display: none; }
[data-style="cool"] .p-land-cool { display: block; }
[data-style="cool"] .p-hero { background: #0b0f15; }
[data-style="cool"] .p-title, [data-style="cool"] .p-name { color: #e3a53c; }
[data-style="cool"] .p-title { letter-spacing: .06em; }
[data-style="cool"] .poster .pan, [data-style="cool"] .p-sub, [data-style="cool"] .p-tag, [data-style="cool"] .p-hid,
[data-style="cool"] .lk-el, [data-style="cool"] .p-quote, [data-style="cool"] .p-elwhy, [data-style="cool"] .p-colh small { color: #a9b2bf; }
[data-style="cool"] .lk-txt { color: #b7bfca; }
[data-style="cool"] .p-disc { color: #7d8896; }
[data-style="cool"] .p-col.is-day { background: #1f1c14; }
[data-style="cool"] .p-colh { border-bottom: 2px solid #e3a53c; }
[data-style="cool"] .p-cell { border-bottom-color: #242d39; }
[data-style="cool"] .p-els { border-color: #4a3b1e; }
[data-style="cool"] .p-elbar { background: #262f3b; }
[data-style="cool"] .p-elsum { border-top-color: #4a3b1e; }
[data-style="cool"] .p-elsum b, [data-style="cool"] .p-lk-empty { color: #e3a53c; }
[data-style="cool"] .p-lk { background: #131922; }
[data-style="cool"] .p-lk.now { border-color: #e3a53c; background: #241f14; }
[data-style="cool"] .lk-st { color: #4a5563; }
[data-style="cool"] .lk-st.r5, [data-style="cool"] .lk-st.r4 { color: #efbe4f; }
[data-style="cool"] .lk-st.r1, [data-style="cool"] .lk-st.r2 { color: #ef6a5e; }
[data-style="cool"] .p-list .ok { background: #2f9e62; }
[data-style="cool"] .p-list .no { background: #d4505f; }

/* จอแคบ (มือถือ): กรอบหัวเตี้ย ภาพ SVG ถูกตัดจนไม่เห็นพระจันทร์ → วาดพระจันทร์แยกไว้หลังชื่อ */
@container (max-width: 699px) {
  .p-hero::after {
    content: ""; position: absolute; z-index: 0; top: 10px; left: 50%; width: 176px; height: 176px; margin-left: -88px;
    border-radius: 50%; background: rgba(255, 250, 241, .78); box-shadow: 0 0 0 7px rgba(255, 250, 241, .35), 0 0 0 9px #e7d6b8;
    pointer-events: none;
  }
  [data-style="cool"] .p-hero::after {
    background: #161c25;
    box-shadow: 0 0 0 7px rgba(22, 28, 37, .6), 0 0 0 8.5px rgba(227, 165, 60, .45), 0 0 46px 14px rgba(227, 165, 60, .20);
  }
}