/* Thai Sakura Kids — ปฏิทินวันว่าง */

:root {
  --bg: #fdf4f1;
  --paper: #ffffff;
  --ink: #4a3b40;
  --ink-soft: #9b8388;
  --line: #f0dcd6;
  --sakura: #e8899e;
  --sakura-deep: #c9556f;
  --open: #3d9163;
  --open-bg: #edf7f0;
  --full: #d64545;
  --full-bg: #fdefec;
  --today-ring: #e8899e;
  --radius: 14px;
  /* ความกว้างของ "แถบทรงมือถือ" ที่ใช้จัด Dashboard ให้เข้ากับภาพพื้นหลังแนวตั้ง */
  --phone-w: 460px;
  /* ดันภาพพื้นหลัง (ซึ่งมีโลโก้อยู่ในตัว) ขึ้น เพื่อตัดพื้นที่ว่างเหนือโลโก้ออก
     โลโก้อยู่แถว 105–178 ของภาพ 828×1792 = เว้นว่างเหนือโลโก้ราว 12.7%
     ของความกว้างแถบ ดันขึ้น 6.5% จึงเหลือช่องไฟเหนือโลโก้ราวครึ่งเดียว
     ใช้หน่วยอิงความกว้าง เพราะภาพย่อ-ขยายตามความกว้างแถบ ไม่ใช่ความสูงจอ */
  --logo-shift: min(6.5vw, 30px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ล็อกไม่ให้หน้าจอเลื่อนขึ้น-ลง เพื่อให้โลโก้ THAI SAKURA KIDS ในภาพพื้นหลัง
   อยู่นิ่งเสมอ — เนื้อหาถูกจัดให้พอดีความสูงจอด้วย flex ด้านล่าง */
html {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Kosugi Maru', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  background:
    radial-gradient(circle at 12% 8%, #fbe4e9 0%, transparent 28%),
    radial-gradient(circle at 88% 92%, #fbe9e0 0%, transparent 30%),
    var(--bg);
  color: var(--ink);
  padding: 0 10px;
  height: 100vh;
  height: 100dvh; /* กันแถบเบราว์เซอร์มือถือบัง */
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
}

/* ---------- ภาพพื้นหลัง Background.svg (แสดงทุกขนาดจอ) ----------
   ภาพเป็นแนวตั้ง 414×896 และมีโลโก้ THAI SAKURA KIDS อยู่ด้านบนในตัว
   จึงวางเป็น "แถบทรงมือถือ" กลางจอ: บนมือถือเต็มจอพอดี บนเดสก์ท็อป
   เป็นคอลัมน์กลางจอ ไม่ยืดจนภาพเพี้ยน
   ใช้ ::before ตรึงจอแทน background-attachment: fixed (iOS Safari ไม่เสถียร) */
body::before {
  content: '';
  position: fixed;
  /* ยื่นเลยขอบบนขึ้นไป = โลโก้ขยับขึ้น ส่วน bottom:0 คงไว้ทำให้กรอบสูงกว่าจอ
     ภาพแบบ cover จึงยังเต็มถึงขอบล่างเสมอ ไม่เกิดแถบว่าง */
  top: calc(-1 * var(--logo-shift));
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--phone-w));
  /* WebP 828×1792 (ย่อจาก Background.svg 2.2 MB → 23 KB) เพื่อให้ผู้ปกครอง
     ที่เปิดผ่านเน็ตมือถือโหลดไว — ต้นฉบับ SVG เก็บไว้ในเครื่อง ไม่ต้องอัปโหลด */
  background: url('Background.webp') center top / cover no-repeat;
  z-index: -1;
}

.wrap {
  width: 100%;
  max-width: var(--phone-w);
  margin: 0 auto;
  /* เว้นที่ด้านบนให้ข้อความอยู่ชิดใต้โลโก้พอดี ไม่ทับกัน
     (โลโก้ในภาพจบที่ราว 24% ของความกว้างแถบ — เหลือช่องไฟราว 12px)
     ทั้งสองค่าต้องคิดเป็นสัดส่วนเดียวกันของความกว้างแถบ (~25%) เพราะโลโก้
     ในภาพย่อ-ขยายตามความกว้าง ไม่ใช่ตามความสูงจอ */
  padding-top: calc(min(25vw, 118px) - var(--logo-shift));
  /* เว้นล่างมากกว่าเดิม เพื่อดันทั้งบล็อกขึ้น ไม่ให้ดูหนักด้านบน
     อิง vh เพื่อให้จอเตี้ยไม่ถูกเบียดพื้นที่ตาราง (จอเตี้ย = เว้นน้อยลงเอง) */
  padding-bottom: clamp(14px, 3.4vh, 34px);
  /* กินความสูงที่เหลือทั้งหมด แล้วแบ่งให้ตารางยืดเต็มพื้นที่ว่าง */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- ส่วนหัว ----------
   โลโก้ THAI SAKURA KIDS อยู่ในภาพพื้นหลังแล้ว จึงซ่อนหัวเรื่องใน HTML
   ไม่ให้ชื่อร้านซ้ำสองที่ */
.site-title { display: none; }

.booking-hint {
  /* Zen Maru Gothic มีน้ำหนัก 700 จริง (Kosugi Maru มีแค่ 400 จะได้ตัวหนาปลอม) */
  font-family: 'Zen Maru Gothic', 'Kosugi Maru', sans-serif;
  font-weight: 700;
  text-align: center;
  font-size: 0.84rem;
  color: var(--sakura-deep);
  margin-bottom: 0;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95);
}

/* ระยะบน-ล่างเท่ากัน = แถบเดือนอยู่กึ่งกลางระหว่างบรรทัดข้อความกับตารางพอดี
   (ผลรวมเท่าเดิม ตารางจึงอยู่ตำแหน่งเดิม) */
.month-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* อิงความสูงจอด้วย เพื่อให้จอเตี้ยยังใส่ทุกอย่างได้โดยไม่ต้องเลื่อน */
  margin: clamp(10px, 3.2vh, 39px) 0;
  flex: 0 0 auto;
}

.month-name {
  font-family: 'Zen Maru Gothic', 'Kosugi Maru', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  min-width: 220px;
  text-align: center;
}

.nav-btn {
  font-family: inherit;
  font-size: 1.15rem;
  line-height: 1;
  width: 42px;
  height: 42px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--sakura-deep);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.nav-btn:hover { border-color: var(--sakura); transform: scale(1.08); }
.nav-btn:active { transform: scale(0.95); }

/* ---------- ตารางปฏิทิน ---------- */
.calendar {
  /* โปร่งแสงเล็กน้อยให้เห็นลายน้ำของภาพพื้นหลังจาง ๆ */
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: 0 10px 30px rgba(201, 85, 111, 0.1);
  /* ยืดเต็มพื้นที่ที่เหลือ เพื่อให้ทุกอย่างพอดีจอโดยไม่ต้องเลื่อน */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.weekdays,
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.weekdays {
  margin-bottom: 6px;
  flex: 0 0 auto;
}

.grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-auto-rows: 1fr; /* แถวสูงเท่ากัน แบ่งพื้นที่ที่เหลือ */
}

.weekdays div {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 4px 0;
}

.weekdays .sun, .cell.sun .day-num { color: var(--full); }
.weekdays .sat, .cell.sat .day-num { color: #3f74b8; }

.cell {
  position: relative;
  /* ไม่ล็อกสัดส่วนแล้ว — ความสูงมาจากแถวของ grid ที่แบ่งพื้นที่จอให้เท่ากัน */
  min-height: 0;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fffdfc;
  /* visible เพื่อให้ป้าย 🔫 ยื่นเลยมุมขวาบนได้แบบสติกเกอร์
     (พื้นหลังสีตามยังโค้งมนตาม border-radius อยู่แล้ว ไม่ต้องพึ่ง overflow) */
  overflow: visible;
}

.cell.empty {
  border-color: transparent;
  background: transparent;
}

.cell.today {
  border-color: var(--today-ring);
  box-shadow: 0 0 0 2px rgba(232, 137, 158, 0.25);
}

.cell.past {
  opacity: 0.42;
  background: #faf7f6;
}

.cell.is-open { background: var(--open-bg); }
.cell.is-full { background: var(--full-bg); }

/* ยังดึงข้อมูลไม่สำเร็จ = ยังไม่รู้ว่าว่างหรือเต็ม → เทา กดจองไม่ได้
   (ห้ามเดาว่าว่าง ไม่งั้นผู้ปกครองจะจองวันที่เต็มไปแล้ว) */
.cell.unknown {
  background: #f4f0f1;
  border-style: dashed;
}

.cell.unknown .mark.none { color: #b9adb0; }

/* ไกลเกินกรอบที่เปิดรับจอง (เช่น เกินสิ้นเดือนถัดไป) → เทาแบบเดียวกับตอนยังไม่รู้ผล
   ผู้ปกครองกดไม่ได้ แต่แอดมินยังกดเข้าไปเปิดวันนั้นเป็นกรณีพิเศษได้ */
.cell.locked {
  background: #f4f0f1;
  border-style: dashed;
}

.cell.locked .mark.none { color: #b9adb0; }
.slot-text.locked { color: #9b8d90; font-weight: 500; }

/* ป้ายวันเล่นน้ำ — ใช้รูป SVG ที่เราวาดเอง (ปืนฉีดน้ำด้ามแดง) แทนอิโมจิ 🔫
   เพราะอิโมจิถูกวาดโดยระบบของแต่ละเครื่อง (iPhone เขียว / Windows ด้ามแดง)
   การใช้รูปเดียวกันทำให้ทุกเครื่องเห็น "เหมือนกันเป๊ะ" ทั้งรูปทรงและตำแหน่ง
   ขนาดอิงความกว้างของช่อง (%) จึงเท่ากันทั้งคอมและมือถือ (ปฏิทินกว้างเท่ากันเพราะ --phone-w) */
.water-badge {
  position: absolute;
  top: -9px;
  right: -8px;
  width: 58%;
  aspect-ratio: 1 / 1;
  background: url('watergun.svg?v=1') center / contain no-repeat;
  pointer-events: none;
  z-index: 3;
  /* เงาบาง ๆ ให้ดูลอยเป็นสติกเกอร์ ไม่จมไปกับวงกลม */
  filter: drop-shadow(0 1px 1.5px rgba(74, 59, 64, 0.35));
}

/* ไอคอนเดียวกันในแถบคำอธิบายด้านล่าง (水遊び ...) */
.water-ico {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.28em;
  margin-left: 3px;
  background: url('watergun.svg?v=1') center / contain no-repeat;
}

.day-num {
  position: absolute;
  top: 3px;
  left: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 1;
}

/* สัญลักษณ์ 〇 / ✕ ใหญ่เกือบเต็มช่อง อยู่กลางช่อง
   ใช้ clamp() ให้ขนาดไหลตามความกว้างจอ ไม่กระโดดตาม breakpoint */
.mark {
  /* จำกัดด้วยความสูงจอด้วย (6vh) กันสัญลักษณ์ล้นช่องบนจอเตี้ย */
  font-size: clamp(1.3rem, min(8.6vw, 6vh), 2.6rem);
  line-height: 1;
  font-weight: 700;
  transform: translateY(-4px); /* ขยับขึ้นเล็กน้อยเผื่อที่ให้ตัวหนังสือด้านล่าง */
}

.mark.open { color: var(--open); }
.mark.full { color: var(--full); }
.mark.none { color: #cfc2c5; font-size: 1.2rem; transform: none; }

/* ตัวหนังสือ (空きN / 満) อยู่กึ่งกลางด้านล่างของช่อง */
.slot-text {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(0.55rem, 1.9vw, 0.74rem);
  font-weight: 600;
}

.slot-text.open { color: var(--open); }
.slot-text.full { color: var(--full); }

/* ---------- คำอธิบาย + สถานะการเชื่อมต่อ ---------- */
.legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
  /* Zen Maru Gothic มีน้ำหนัก 700 จริง (Kosugi Maru มีแค่ 400) */
  font-family: 'Zen Maru Gothic', 'Kosugi Maru', sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--ink);
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95);
}

.legend .sym-open { color: var(--open); font-weight: 700; }
.legend .sym-full { color: var(--full); font-weight: 700; }

.status-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: 'Zen Maru Gothic', 'Kosugi Maru', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: #7b666b;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95);
  flex-wrap: wrap;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b9b0b2;
}

.dot.live {
  background: var(--open);
  animation: pulse 1.6s ease-in-out infinite;
}

.dot.error { background: var(--full); }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 145, 99, 0.45); }
  55% { box-shadow: 0 0 0 5px rgba(61, 145, 99, 0); }
}

/* ---------- แถบแจ้งเตือนยังไม่ได้ตั้งค่า ---------- */
.setup-notice {
  background: #fff8e6;
  border: 2px dashed #e0b64c;
  border-radius: var(--radius);
  color: #7a5d10;
  font-size: 0.9rem;
  padding: 14px 18px;
  margin-bottom: 16px;
  line-height: 1.7;
}

.setup-notice code {
  background: #f6ecd0;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.85em;
}

/* ---------- โหมดแอดมิน ---------- */
body.admin-mode .cell.clickable { cursor: pointer; transition: transform 0.1s ease; }
body.admin-mode .cell.clickable:hover {
  transform: scale(1.05);
  border-color: var(--sakura);
  z-index: 1;
}

/* ---------- โหมดจอง (หน้าปฏิทินผู้ปกครอง) ---------- */
.cell.bookable {
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}

.cell.bookable:hover {
  transform: translateY(-2px);
  border-color: var(--sakura);
  box-shadow: 0 6px 14px rgba(201, 85, 111, 0.18);
  z-index: 1;
}

.cell.bookable::after {
  content: '予約';
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 0.55rem;
  color: var(--sakura-deep);
  opacity: 0;
  transition: opacity 0.1s ease;
}

.cell.bookable:hover::after { opacity: 1; }

.admin-banner {
  text-align: center;
  background: var(--sakura-deep);
  color: #fff;
  border-radius: 999px;
  font-size: 0.85rem;
  padding: 7px 18px;
  margin-bottom: 10px;
}

/* ---------- ปุ่มเปิดหน้าสรุปการจอง (予約まとめ) ---------- */
.summary-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.summary-btn {
  font-family: 'Zen Maru Gothic', 'Kosugi Maru', sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--sakura-deep);
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid var(--sakura);
  border-radius: 999px;
  padding: 6px 20px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(201, 85, 111, 0.14);
}

.summary-btn:hover { background: #fdf1f4; }
.summary-btn:active { transform: translateY(1px); }

/* ---------- รายการในหน้า 予約まとめ ---------- */
.sum-item {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 8px;
}

.sum-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.sum-name {
  font-size: 0.9rem;
  font-weight: 700;
  word-break: break-all;
}

.sum-count {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

.sum-dates {
  margin-top: 3px;
  font-size: 0.76rem;
  color: var(--ink-soft);
  word-break: break-all;
}

/* ครบโควตาของเดือนแล้ว = ไฮไลต์แดง ให้แอดมินเห็นทันทีว่าต้องแจ้งผู้ปกครอง */
.sum-item.over {
  background: var(--full-bg);
  border-color: var(--full);
}

.sum-item.over .sum-count { color: var(--full); }

.sum-warn {
  margin-top: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--full);
}

.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74, 59, 64, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.login-card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 30px 34px;
  width: min(92vw, 360px);
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.login-card h2 {
  font-size: 1.2rem;
  color: var(--sakura-deep);
  margin-bottom: 14px;
}

.login-card input {
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  outline: none;
  text-align: center;
}

.login-card input:focus { border-color: var(--sakura); }

.login-card button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 14px;
  width: 100%;
  padding: 10px 0;
  border: none;
  border-radius: 10px;
  background: var(--sakura-deep);
  color: #fff;
  cursor: pointer;
}

.login-card button:hover { background: #b1445d; }

.login-error {
  color: var(--full);
  font-size: 0.82rem;
  margin-top: 10px;
  min-height: 1.2em;
}

/* ---------- popup จัดการรายวัน (หน้าแอดมิน) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74, 59, 64, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.day-card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 22px 24px;
  width: min(92vw, 400px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  /* หน้าจอล็อกไม่ให้เลื่อนแล้ว popup จึงต้องเลื่อนในตัวเองได้ */
  max-height: 88vh;
  overflow-y: auto;
}

.day-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.day-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sakura-deep);
}

.day-close {
  font-family: inherit;
  border: none;
  background: none;
  font-size: 1rem;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 8px;
}

.day-close:hover { color: var(--full); }

.day-status {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
  min-height: 1.4em;
}

.day-view { display: block; }

.day-opt {
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  margin-bottom: 10px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fffdfc;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.08s ease;
}

.day-opt:hover { border-color: var(--sakura); transform: translateY(-1px); }
.day-opt.danger { color: var(--sakura-deep); }
.day-opt.water { color: #2b86b5; } /* วันเล่นน้ำ — โทนน้ำเงิน ไม่ใช่ปุ่มปิดวัน */
.day-opt.subtle { font-weight: 400; font-size: 0.88rem; color: var(--ink-soft); }

.cap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  margin: 4px 0 12px;
  flex-wrap: wrap;
}

.cap-row input {
  font-family: inherit;
  font-size: 1rem;
  width: 64px;
  padding: 6px 8px;
  text-align: center;
  border: 2px solid var(--line);
  border-radius: 8px;
  outline: none;
}

.cap-row input:focus { border-color: var(--sakura); }

.cap-unit { font-size: 0.85rem; color: var(--ink-soft); margin-left: -2px; }

/* บอกผลลัพธ์ทันทีว่าตั้งความจุแล้วปฏิทินจะขึ้นว่างกี่คน */
.cap-preview {
  font-size: 0.8rem;
  color: var(--sakura-deep);
  background: #fdf1f4;
  border-radius: 8px;
  padding: 7px 10px;
  margin: -4px 0 12px;
  line-height: 1.5;
}

.mini-btn {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: var(--sakura-deep);
  color: #fff;
  cursor: pointer;
}

.mini-btn:hover { background: #b1445d; }

.day-back {
  font-family: inherit;
  font-size: 0.85rem;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 6px 0;
}

.day-back:hover { color: var(--sakura-deep); }

.pdf-list { margin-bottom: 8px; }

.pdf-item {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.pdf-name {
  font-size: 0.82rem;
  font-weight: 600;
  word-break: break-all;
  margin-bottom: 6px;
}

.pdf-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* รายการที่ถูกยกเลิกแล้ว */
.pdf-item.cancelled { opacity: 0.6; background: #faf6f7; }
.pdf-item.cancelled .pdf-name { text-decoration: line-through; }

.mini-btn.ghost {
  background: #fff;
  color: var(--sakura-deep);
  border: 1.5px solid var(--line);
}

.mini-btn.ghost:hover { background: #fdf1f4; }

/* ปุ่มแชร์ตัวหลัก — เด่นกว่าปุ่มอื่น */
.mini-btn.primary {
  background: var(--open);
  padding: 6px 16px;
}
.mini-btn.primary:hover { background: #327a53; }

/* คำเตือนเมื่อเปิดในแอป LINE (แชร์ไฟล์ไม่ได้) */
.pdf-warn {
  background: #fff8e6;
  border: 1.5px solid #e0b64c;
  border-radius: 10px;
  color: #7a5d10;
  font-size: 0.82rem;
  line-height: 1.65;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.pdf-warn b { color: #6a4d05; }

.pdf-item.disabled {
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding: 8px 12px;
}

.pdf-empty {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 18px 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  font-size: 0.88rem;
  padding: 10px 22px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 20;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
  .month-name { font-size: 1.25rem; min-width: 130px; }
  .mark { transform: translateY(-3px); }
  .mark.none { font-size: 1rem; transform: none; }
  .slot-text { bottom: 3px; }
  .day-num { font-size: 0.68rem; top: 2px; left: 4px; }
  .calendar { padding: 7px; }
  .weekdays, .grid { gap: 3px; }
  .weekdays div { font-size: 0.75rem; }
}