/*
 * Make-cal : ปฏิทินไทยวงกลม
 *
 * ธีมเริ่มต้น = สว่าง (ให้กลมกลืนกับหน้าเว็บที่พื้นสว่าง)
 * ธีมมืด "ท้องฟ้ากลางคืน + ทองโบราณ" ยังใช้ได้ผ่านคลาส .is-dark
 *
 * ทุกสีอยู่ในตัวแปรทั้งหมด — ทั้ง CSS และ JS (SVG) อ่านจากที่เดียวกัน
 * ดู theme() ใน make-cal.js · เพิ่มธีมใหม่ = เขียนทับตัวแปร ไม่ต้องแตะโค้ด
 */

.makecal {
	/* ---- พื้นผิว ---- */
	--mc-bg: #faf7f0;
	--mc-bg-2: #ffffff;
	--mc-surface: #f0ebdf;

	/* ---- ทอง (สีหลักของแบรนด์) ---- */
	--mc-gold: #96702a;
	--mc-gold-bright: #7a5a1f;
	--mc-gold-dim: #c9b184;
	--mc-on-gold: #ffffff;      /* ตัวอักษรบนพื้นทอง */

	/* ---- ตัวอักษร ---- */
	--mc-text: #2b2418;
	--mc-text-dim: #6b6252;
	--mc-danger-text: #8f2d20;

	/* ---- สีสื่อความหมาย ---- */
	--mc-accent: #b3311f;
	--mc-moon: #6b6252;
	--mc-phra: #bf9614;
	--mc-holiday: #be3c2d;
	--mc-buddhist: #c8781e;
	--mc-phansa: #785aaa;
	--mc-songkran: #2882b4;

	/* ---- เส้นขอบ (อ่อน → เข้ม) ---- */
	--mc-border: rgba(150,112,42,0.20);
	--mc-border-2: rgba(150,112,42,0.30);
	--mc-border-3: rgba(150,112,42,0.45);
	--mc-focus: rgba(150,112,42,0.25);
	--mc-ghost-hover: rgba(150,112,42,0.10);

	/* ---- พื้นหลังจาง ๆ ของป้าย/ช่องวัน ---- */
	--mc-tint-gold: rgba(150,112,42,0.12);
	--mc-tint-phra: rgba(191,150,20,0.18);
	--mc-tint-holiday: rgba(190,60,45,0.14);
	--mc-tint-buddhist: rgba(200,120,30,0.16);
	--mc-tint-phansa: rgba(120,90,170,0.16);
	--mc-tint-songkran: rgba(40,130,180,0.14);
	--mc-tint-error: rgba(179,49,31,0.10);

	/* ---- วงแหวน SVG (JS อ่านค่าจากตรงนี้) ---- */
	--mc-ring-fill-a: rgba(150,112,42,0.12);
	--mc-ring-fill-b: rgba(150,112,42,0.05);
	--mc-ring-stroke: rgba(150,112,42,0.30);
	--mc-center-stroke: rgba(150,112,42,0.45);
	/* ===== ความจางของภาพกลางวง (เหรียญนักษัตร / ราศี) — ปุ่มปรับอยู่ตรงนี้ =====
	   ไฟล์ภาพ: assets/icons/th_zodiac/*.png (โหมด พ.ศ.) · assets/icons/zodiac/*.png (โหมด ค.ศ.)
	   JS อ่านค่าไปใส่ attribute opacity ของ <image> (drawCenter ใน make-cal.js)
	   1 = ทึบเต็มที่ · ยิ่งน้อยยิ่งจาง (ภาพจะกลืนไปกับ --mc-bg-2 ที่รองอยู่ข้างหลัง)
	   แนะนำ 0.35–0.6 · ต่ำกว่า 0.3 ภาพแทบหายไปเหลือแต่ม่าน scrim เป็นวงเทา
	   ธีมมืดใช้ค่าเดียวกัน (ภาพจางลงหาพื้นเข้ม ไม่ใช่พื้นขาว) ถ้าอยากแยกให้ override ใน .is-dark */
	--mc-zodiac-filter: none;
	--mc-zodiac-opacity: 0.45;

	/* ม่านมืดไล่จางกลางเหรียญ (0 = ปิด) — ให้ตัวเลขจันทรคติสีทองไม่กลืนกับลายเหรียญ */
	--mc-center-scrim: 0.4;
	/* ขอบมืดรอบตัวอักษรกลางวง (ดู .mc-center-info) */
	--mc-center-halo: rgba(8,7,18,0.7);

	/* ตัวอักษร/สัญลักษณ์ที่วางทับเหรียญ — เหรียญพื้นเข้มเสมอทั้งสองธีม
	   ชุดสีนี้จึงไม่ผูกกับ --mc-text / --mc-gold ของหน้า (ซึ่งธีมสว่างเป็นสีเข้ม) */
	--mc-center-text: #f4efe2;
	--mc-center-gold: #d9b65a;
	--mc-center-gold-bright: #f2d588;

	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px 64px;
	background: var(--mc-bg);
	color: var(--mc-text);
	font-family: "Sarabun", "Prompt", system-ui, -apple-system, sans-serif;
	border-radius: 20px;
	box-sizing: border-box;
	min-height: 600px;
}

/*
 * ธีมมืด (opt-in) — ดีไซน์ดั้งเดิมของปลั๊กอิน
 *
 * เปิดใช้โดยเติมคลาส is-dark ให้ #make-cal-app เช่น
 *   add_filter( 'the_content', function ( $c ) {
 *       return str_replace( 'class="makecal"', 'class="makecal is-dark"', $c );
 *   } );
 *
 * ถ้าอยากให้สลับตามการตั้งค่าเครื่องผู้ใช้แทน ให้ห่อบล็อกนี้ด้วย
 *   @media (prefers-color-scheme: dark) { .makecal { ... } }
 */
.makecal.is-dark {
	--mc-bg: #16122b;
	--mc-bg-2: #1f1a38;
	--mc-surface: #272142;

	--mc-gold: #d9b65a;
	--mc-gold-bright: #f2d588;
	--mc-gold-dim: #8a7434;
	--mc-on-gold: #2a2008;

	--mc-text: #f4efe2;
	--mc-text-dim: #b7ad93;
	--mc-danger-text: #f0b8b0;

	--mc-accent: #c0392b;
	--mc-moon: #e8e8e8;
	--mc-phra: #e7c84a;
	--mc-holiday: #d4584a;
	--mc-buddhist: #e0913c;
	--mc-phansa: #9b7bc4;
	--mc-songkran: #5aa9d4;

	--mc-border: rgba(217,182,90,0.15);
	--mc-border-2: rgba(217,182,90,0.25);
	--mc-border-3: rgba(217,182,90,0.40);
	--mc-focus: rgba(217,182,90,0.20);
	--mc-ghost-hover: rgba(217,182,90,0.12);

	--mc-tint-gold: rgba(217,182,90,0.18);
	--mc-tint-phra: rgba(231,200,74,0.14);
	--mc-tint-holiday: rgba(212,88,74,0.16);
	--mc-tint-buddhist: rgba(224,145,60,0.16);
	--mc-tint-phansa: rgba(155,123,196,0.22);
	--mc-tint-songkran: rgba(90,169,212,0.18);
	--mc-tint-error: rgba(192,57,43,0.15);

	--mc-ring-fill-a: rgba(217,182,90,0.10);
	--mc-ring-fill-b: rgba(217,182,90,0.05);
	--mc-ring-stroke: rgba(217,182,90,0.22);
	--mc-center-stroke: rgba(217,182,90,0.40);
	/* --mc-zodiac-* และ --mc-center-* ไม่ต้อง override — เหรียญพื้นเข้มเข้ากับธีมมืดอยู่แล้ว */
}

.makecal *,
.makecal *::before,
.makecal *::after { box-sizing: border-box; }

/* ---------- Header / input bar ---------- */
.mc-topbar {
	margin-bottom: 20px;
	padding: 12px 18px;
	background: var(--mc-bg-2);
	border: 1px solid var(--mc-border);
	border-radius: 14px;
}

.mc-topbar-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.mc-input-group {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mc-input-group label {
	font-size: 13px;
	color: var(--mc-text-dim);
}

.mc-input {
	width: 64px;
	padding: 8px 10px;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border-2);
	border-radius: 8px;
	color: var(--mc-text);
	font-size: 15px;
	font-family: inherit;
	text-align: center;
	-moz-appearance: textfield;
}
.mc-input.mc-year { width: 92px; }
/*
 * ค่าจาง = วัน/เดือนที่เคยดูล่าสุด (JS ใส่เป็น placeholder ตอน state ถูกล้าง)
 * ต้องอ่านออกว่าเป็นเลขอะไร แต่ต้องต่างจากค่าจริงชัดเจน ไม่งั้นผู้ใช้เข้าใจผิดว่ากรอกไว้แล้ว
 * opacity 1 จำเป็น — เบราว์เซอร์บางตัวใส่ opacity ของตัวเองทับสีที่เราตั้ง
 */
.mc-input::placeholder {
	color: var(--mc-text-dim);
	opacity: 0.55;
}
.mc-input::-webkit-outer-spin-button,
.mc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mc-input:focus {
	outline: none;
	border-color: var(--mc-gold);
	box-shadow: 0 0 0 2px var(--mc-focus);
}

.mc-btn {
	padding: 8px 18px;
	background: var(--mc-gold);
	color: var(--mc-on-gold);
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s;
}
.mc-btn:hover { background: var(--mc-gold-bright); }
.mc-btn:active { transform: scale(0.97); }

.mc-btn-ghost {
	background: transparent;
	color: var(--mc-gold);
	border: 1px solid var(--mc-border-3);
}
.mc-btn-ghost:hover { background: var(--mc-ghost-hover); }

/* Era toggle */
.mc-era-toggle {
	display: inline-flex;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border-2);
	border-radius: 8px;
	overflow: hidden;
}
.mc-era-toggle button {
	padding: 8px 16px;
	background: transparent;
	border: none;
	color: var(--mc-text-dim);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.mc-era-toggle button.active {
	background: var(--mc-gold);
	color: var(--mc-on-gold);
	font-weight: 600;
}

/* ---------- Circle view ---------- */
#mc-stage { position: relative; }
.mc-circle-wrap {
	display: flex;
	justify-content: center;
	user-select: none;
	-webkit-user-select: none;
	/* pan-y: ให้เบราว์เซอร์เลื่อนหน้าแนวตั้งได้เอง (เดิม none ดักไว้หมด บนมือถือ
	   ที่วงเต็มจอเลยเลื่อนดูส่วนล่างไม่ได้) การหมุนวงใช้ลากแนวนอนแทน — ดู make-cal.js down()/move() */
	touch-action: pan-y;
}
.mc-ring-svg { max-width: 640px; width: 100%; height: auto; cursor: grab; }
.mc-ring-svg.dragging { cursor: grabbing; }

.mc-ring-seg { transition: opacity 0.15s; }
.mc-ring-seg-label {
	font-family: "Sarabun", sans-serif;
	fill: var(--mc-text);
	pointer-events: none;
}
/* ---- วงวัน: ข้อมูลจริงของเดือนที่แสดง (JS ติดคลาส ที่นี่เป็นคนกำหนดสี) ----
   ลำดับกฎสำคัญ: บล็อกนี้ต้องอยู่ "ก่อน" กฎ .selected ด้านล่าง
   เพราะ specificity เท่ากัน (0,3,0) ตัวที่มาทีหลังชนะ — ช่องที่เลือกอยู่
   ต้องเป็นสีทองเสมอ ไม่ใช่สีของวันพระ/วันหยุด */
.mc-ring-seg.is-phra     .mc-ring-seg-bg { fill: var(--mc-tint-phra); }
.mc-ring-seg.is-buddhist .mc-ring-seg-bg { fill: var(--mc-tint-buddhist); }
.mc-ring-seg.is-holiday  .mc-ring-seg-bg { fill: var(--mc-tint-holiday); }

.mc-ring-dot { pointer-events: none; }
.mc-dot-phra     { fill: var(--mc-phra); }
.mc-dot-buddhist { fill: var(--mc-buddhist); }
.mc-dot-holiday  { fill: var(--mc-holiday); }

/* "วันนี้" = กรอบ ไม่ใช่พื้น — ซ้อนกับสีวันพระ/วันหยุด/ช่องที่เลือกได้โดยไม่แย่งกัน */
.mc-ring-seg.is-today .mc-ring-seg-bg {
	stroke: var(--mc-accent);
	stroke-width: 1.8;
}

.mc-ring-seg.selected .mc-ring-seg-bg { fill: var(--mc-gold); }
.mc-ring-seg.selected .mc-ring-seg-label { fill: var(--mc-on-gold); font-weight: 700; }
.mc-ring-seg.invalid { opacity: 0.28; }

/* จุด "วันนี้" ในคำอธิบายใต้วง — เป็นกรอบเปล่าให้ตรงกับที่เห็นบนวง */
.mc-legend .mc-dot-today {
	background: transparent;
	border: 2px solid var(--mc-accent);
}
.mc-ring-legend { justify-content: center; }

/* ---- อนิเมชัน "วงชุดใหม่มาแล้ว" ----
   JS ใส่คลาส mc-rings-in เฉพาะตอนเปลี่ยนปีหรือเดือน (ไม่ใช่ทุกครั้งที่กดวัน)
   ไล่ทีละวงจากนอกเข้าใน เพื่อให้เห็นว่าวงเดือน/วันถูกโหลดมาใหม่จริง
   transform-box: view-box — ไม่งั้นจุดหมุนของ <g> จะอิงกรอบเนื้อหาของตัวเอง
   ทำให้แต่ละวงหมุนคนละจุด (วงบิดออกนอกศูนย์) */
.mc-rings-in g[data-ring] {
	transform-origin: 260px 260px;
	transform-box: view-box;
	animation: mcRingIn 460ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.mc-rings-in g[data-ring="year"]  { animation-delay: 0ms; }
.mc-rings-in g[data-ring="month"] { animation-delay: 70ms; }
.mc-rings-in g[data-ring="day"]   { animation-delay: 140ms; }
@keyframes mcRingIn {
	from { opacity: 0; transform: rotate(-7deg) scale(0.97); }
	to   { opacity: 1; transform: none; }
}

/* ⚠️ ห้ามใส่ fill ในกฎนี้ — กฎ CSS ชนะ presentation attribute เสมอ
   ถ้าใส่ fill ที่นี่ สีที่ drawCenterText() ส่งมาทาง attribute จะไม่มีผลเลย
   (ที่ผ่านมาตัวอักษรกลางวงจึงเป็นสีเดียวหมด ทั้งที่ JS ตั้งใจแยกทอง/ครีม)
   สีของตัวอักษรกลางวงมาจาก --mc-center-* ผ่าน theme() ใน make-cal.js

   stroke = ขอบมืดบาง ๆ รอบตัวอักษร (paint-order ให้วาด stroke ก่อน fill
   ไม่งั้นเส้นจะกินเข้าไปในตัวอักษร) — จำเป็นเพราะตัวอักษรวางทับลายเหรียญ
   ซึ่งมีทั้งส่วนมืดและส่วนทองสว่าง ใช้สีเดียวให้ชัดทั้งสองพื้นไม่ได้ */
.mc-center-info,
.mc-center-arc {
	font-family: "Sarabun", sans-serif;
	paint-order: stroke fill;
	stroke: var(--mc-center-halo);
	stroke-width: 3px;
	stroke-linejoin: round;
}

/* ---------- ป้ายวันสำคัญใต้วงกลม ---------- */
.mc-day-events {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
}
.mc-event {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--mc-bg-2);
	border: 1px solid var(--mc-border-2);
	font-size: 15px;
	line-height: 1.3;
}
.mc-event img { width: 20px; height: 20px; flex: none; }
.mc-event-name { font-weight: 600; }
.mc-event-tag {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--mc-tint-holiday);
	color: var(--mc-danger-text);
	font-size: 12px;
	font-weight: 600;
}
.mc-event.mc-event-buddhist { border-color: var(--mc-buddhist); background: var(--mc-tint-buddhist); }
.mc-event.mc-event-phra     { border-color: var(--mc-phra);     background: var(--mc-tint-phra); }
.mc-event.is-holiday        { border-color: var(--mc-holiday);  background: var(--mc-tint-holiday); }

@media (max-width: 480px) {
	.mc-event { font-size: 14px; padding: 6px 12px; }
	.mc-event img { width: 17px; height: 17px; }
}

/* ---------- Layout toggle (วงกลม/ตาราง) มุมขวา ---------- */
.mc-layout-toggle {
	display: inline-flex;
	margin-left: auto;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border-2);
	border-radius: 8px;
	overflow: hidden;
}
.mc-layout-toggle button {
	padding: 7px 12px;
	background: transparent;
	border: none;
	color: var(--mc-text-dim);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
/* ปุ่มเดียว = ปุ่ม "ไป layout อีกแบบ" ไม่ใช่ตัวบอกสถานะ จึงไม่มีสถานะ active อีกแล้ว
   (กฎ .mc-layout-toggle button.active ถูกถอดออกพร้อมกับปุ่มที่สองใน v1.9.2) */
.mc-layout-toggle button:hover,
.mc-layout-toggle button:focus-visible {
	background: var(--mc-ghost-hover);
	color: var(--mc-gold);
}

/* ---------- View navigation ---------- */
.mc-view-nav {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}
.mc-btn-sm {
	padding: 5px 12px;
	font-size: 13px;
}

/* ---------- แถบสมัครรับปฏิทิน (.ics) ----------
 * อยู่ใต้สุดของกล่อง นอก #mc-stage — เป็นของถาวรของหน้า ไม่ใช่ของมุมมองใดมุมมองหนึ่ง
 * เส้นคั่นบนบอกว่า "จบเนื้อหาปฏิทินแล้ว" ตัวอักษรจางกว่าเพราะเป็นทางเลือก ไม่ใช่ทางหลัก
 */
.mc-subscribe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--mc-border);
}
.mc-subscribe-label {
	font-size: 14px;
	color: var(--mc-text-dim);
	margin-right: auto; /* ดันปุ่มไปชิดขวา — ป้ายคือคำอธิบาย ปุ่มคือสิ่งที่ต้องกด */
}

/*
 * ⚠️ ต้องเจาะจงถึง 3 คลาส (0,3,0) เพราะธีมของเว็บมีกฎ `html[data-theme] button`
 * ซึ่งจำเพาะ (0,1,1) — สูงกว่า `.mc-btn-ghost` เปล่า ๆ (0,1,0) จึงทาสีทับ
 * ผลคือ <button> ได้สีธีม ส่วน <a> ไม่โดน → 2 ปุ่มในแถบเดียวกันหน้าตาคนละแบบ
 *
 * **ตั้งใจแก้เฉพาะแถบนี้ (มติผู้ใช้ 27 ก.ค. 2569)** ปุ่มอื่นของปลั๊กอิน
 * (แสดง · วันนี้ · ← ทั้งปี · ‹ ›) ยังถูกธีมทาทับอยู่เหมือนเดิม ซึ่งกลมกลืนกับเว็บดีอยู่แล้ว
 * ถ้าวันหนึ่งอยากคืนสีของปลั๊กอินทั้งหมด ให้เติม `.makecal` นำหน้ากฎ `.mc-btn`/`.mc-btn-ghost`
 * (4 กฎ) — จะได้ (0,2,0) ซึ่งพอชนะธีม **อย่าใช้ !important**
 */
.makecal .mc-subscribe .mc-btn-ghost {
	background: transparent;
	color: var(--mc-gold);
	border: 1px solid var(--mc-border-3);
	text-decoration: none; /* <a> ไม่ควรมีเส้นใต้เมื่อทำหน้าที่เป็นปุ่ม */
}
.makecal .mc-subscribe .mc-btn-ghost:hover { background: var(--mc-ghost-hover); }
@media (max-width: 480px) {
	.mc-subscribe-label { margin-right: 0; width: 100%; }
}

/* ---------- Year grid (12 months) ---------- */
.mc-year-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 8px;
}
.mc-month-card {
	padding: 16px;
	background: var(--mc-bg-2);
	border: 1px solid var(--mc-border);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.mc-month-card:hover {
	border-color: var(--mc-gold);
	background: var(--mc-surface);
	transform: translateY(-2px);
}
.mc-month-card h3 {
	margin: 0 0 6px;
	font-size: 18px;
	color: var(--mc-gold-bright);
	font-weight: 600;
}
.mc-month-card .mc-month-days {
	font-size: 13px;
	color: var(--mc-text-dim);
}

/* เดือนปัจจุบันในหน้าตารางปี — ใช้สัญลักษณ์เดียวกับ "วันนี้" ในตารางเดือน/วงกลม */
.mc-month-card.is-today { border-color: var(--mc-accent); border-width: 2px; }

/* วันสำคัญของเดือน (ทำให้การ์ดมีเนื้อหาจริง ไม่ใช่แค่ตัวเลือกเดือน) */
.mc-month-event {
	display: flex;
	gap: 6px;
	align-items: baseline;
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--mc-text-dim);
}
.mc-month-event b {
	flex: 0 0 auto;
	min-width: 18px;
	text-align: right;
	color: var(--mc-buddhist);
	font-weight: 700;
}
.mc-month-event.is-holiday b { color: var(--mc-holiday); }

/* ปุ่มเลื่อนเดือน/ปี ‹ › */
.mc-step-group { display: inline-flex; gap: 4px; }
.mc-step-group button { min-width: 32px; font-size: 16px; line-height: 1; }
.mc-step-group button[disabled] { opacity: 0.35; cursor: not-allowed; }
.mc-year-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.mc-year-title { font-size: 26px; font-weight: 700; color: var(--mc-gold-bright); margin: 0; }
.mc-year-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-badge {
	padding: 5px 12px;
	border-radius: 16px;
	font-size: 13px;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border-2);
}
.mc-badge.mc-adhikamas { background: var(--mc-tint-phansa); border-color: var(--mc-phansa); }
.mc-badge.mc-adhikawara { background: var(--mc-tint-songkran); border-color: var(--mc-songkran); }
.mc-badge.mc-leap { background: var(--mc-tint-gold); }
/* ปีนอกช่วงที่ยืนยันกับ myhora — โทนเตือน (ส้ม/แดงอมน้ำตาล) ให้ต่างจาก badge ข้อมูลปกติ */
.mc-badge.mc-unverified {
	background: var(--mc-holiday, #b3402e);
	border-color: var(--mc-holiday, #b3402e);
	color: #fff;
	cursor: help;
}

/* ---------- Month grid (days) ---------- */
.mc-month-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.mc-month-title { font-size: 24px; font-weight: 700; color: var(--mc-gold-bright); margin: 0; }

/* ตารางเป็น "แผ่นปฏิทิน" วางบนหน้า ไม่ใช่ช่องขาวลอยบนพื้นครีม
   ช่องสีขาวจึงมีอะไรให้ตัดกัน และเดือนอ่านเป็นก้อนเดียว */
.mc-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	padding: 10px;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: 14px;
}
.mc-cal-dow {
	text-align: center;
	font-size: 13px;
	color: var(--mc-text-dim);
	padding: 4px 0 8px;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-bottom: 1px solid var(--mc-border-2);
	margin-bottom: 2px;
}
.mc-cal-dow.mc-sun { color: var(--mc-accent); }
.mc-cal-cell {
	min-height: 92px;
	padding: 7px 8px;
	background: var(--mc-bg-2);
	border: 1px solid var(--mc-border);
	border-radius: 8px;
	cursor: pointer;
	position: relative;
	transition: border-color 0.15s, background 0.15s;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow: hidden;
}
/* เสาร์-อาทิตย์จางกว่าเล็กน้อย ให้เห็นโครงสัปดาห์โดยไม่ต้องนับ
   ต้องอยู่ "ก่อน" กฎวันพระ/วันหยุดด้านล่าง (specificity เท่ากัน ตัวหลังชนะ) */
.mc-cal-cell.is-weekend { background: var(--mc-surface); }
.mc-cal-cell:hover { border-color: var(--mc-gold); }
.mc-cal-cell.mc-empty { background: transparent; border: none; cursor: default; }

/* "วันนี้" = กรอบสี accent · "วันที่เลือกอยู่" = กรอบทองหนา
   สองอย่างนี้ซ้อนกันได้ (วันนี้และเลือกอยู่พร้อมกัน) จึงใช้ box-shadow กับ border คนละชั้น
   ตรงกันกับที่วงกลมใช้ (.mc-ring-seg.is-today) เพื่อให้จำสัญลักษณ์ได้ข้ามมุมมอง */
.mc-cal-cell.is-today { border-color: var(--mc-accent); border-width: 2px; padding: 5px; }
.mc-cal-cell.is-selected { box-shadow: 0 0 0 2px var(--mc-gold); }
.mc-cal-cell.mc-phra { background: var(--mc-tint-phra); }
.mc-cal-cell.mc-holiday { background: var(--mc-tint-holiday); }
.mc-cal-cell.mc-buddhist { background: var(--mc-tint-buddhist); }
.mc-cal-cell.mc-sun-cell .mc-cell-num { color: var(--mc-accent); }

.mc-cell-num { font-size: 17px; font-weight: 700; line-height: 1; }
.mc-cell-lunar { font-size: 11px; color: var(--mc-text-dim); margin-top: auto; line-height: 1.25; }

/* ---- วันสำคัญในช่อง: ไอคอน 20px + ชื่อ ---- */
.mc-cell-events { display: flex; flex-direction: column; gap: 3px; }
.mc-cell-event {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	font-size: 11px;
	line-height: 1.25;
	color: var(--mc-text);
}
.mc-cell-event img {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	/* ไฟล์ SVG ฮาร์ดโค้ด stroke="#d9b65a" (ทองสว่าง ออกแบบไว้ตอนธีมมืด)
	   บนช่องพื้นขาวได้คอนทราสต์ราว 2:1 = ขยายอย่างเดียวก็ยังไม่ชัด
	   <img> ทาสีข้างในด้วย CSS ไม่ได้ จึงกดความสว่างลงมาให้อ่านออก (~3.3:1)
	   ธีมมืดไม่ต้องกด — พื้นเข้มอยู่แล้ว (ดู .is-dark ด้านล่าง) */
	filter: brightness(0.72) saturate(1.1);
}
.mc-cell-event span {
	/* ชื่อพระราชพิธียาวมาก ตัดที่ 2 บรรทัด ชื่อเต็มอ่านได้จาก title + แผงรายละเอียดวัน */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mc-cell-event.is-holiday { color: var(--mc-holiday); font-weight: 600; }
.mc-cell-event-buddhist { color: var(--mc-buddhist); }
.makecal.is-dark .mc-cell-event img { filter: none; }
.mc-cell-fullmoon::after {
	content: "";
	position: absolute; top: 6px; right: 6px;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--mc-moon);
}

/* ---------- Legend ---------- */
.mc-legend {
	display: flex; flex-wrap: wrap; gap: 14px;
	margin-top: 18px; padding-top: 16px;
	border-top: 1px solid var(--mc-border);
	font-size: 13px; color: var(--mc-text-dim);
}
.mc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mc-legend .mc-dot { width: 12px; height: 12px; border-radius: 3px; }

/* ---------- แผงรายละเอียดวัน (โหมดตาราง) ---------- */
.mc-day-panel-host { margin-top: 16px; }
.mc-day-panel {
	padding: 14px 16px;
	background: var(--mc-bg-2);
	border: 1px solid var(--mc-border-2);
	border-radius: 12px;
}
.mc-day-panel.is-loading { color: var(--mc-text-dim); text-align: center; }
.mc-day-panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
}
.mc-day-panel-head h3 {
	flex: 1 1 auto;
	margin: 0;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	color: var(--mc-gold-bright);
}
.mc-day-panel-head button { min-width: 32px; font-size: 16px; line-height: 1; }
.mc-day-panel-meta {
	margin-top: 6px;
	text-align: center;
	font-size: 14px;
	color: var(--mc-text-dim);
}
/* วันสำคัญกับป้ายศักราชในแผง ใช้คอมโพเนนต์เดียวกับใต้วงกลม แค่ลดระยะห่างลง */
.mc-day-panel .mc-day-events { margin-top: 12px; justify-content: center; }
.mc-day-panel .mc-era-note { margin-top: 12px; }

/* ---------- ป้าย พ.ศ. ตามการนับของยุคนั้น (ก่อน พ.ศ. 2484) ---------- */
.mc-era-note {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: center;
	margin-top: 16px;
	padding: 10px 16px;
	border: 1px dashed var(--mc-border-2);
	border-radius: 10px;
	background: var(--mc-tint-gold);
	text-align: center;
}
.mc-era-note strong { color: var(--mc-gold); font-size: 15px; }
.mc-era-note span { color: var(--mc-text-dim); font-size: 13px; }
/* โหมดเตือน (ปีนอกช่วงเทียบ myhora) — โทนแดงอมน้ำตาล ต่างจากป้าย พ.ศ.ยุคนั้นที่เป็นสีทอง */
.mc-era-note-warn { border-color: var(--mc-holiday, #b3402e); background: var(--mc-tint-holiday, rgba(179,64,46,0.10)); }
.mc-era-note-warn strong { color: var(--mc-holiday, #b3402e); }

/* ---------- Warning (ปีนอกช่วงที่รองรับ) ---------- */
.mc-warning {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--mc-tint-buddhist);
	border: 1px solid var(--mc-buddhist);
	color: var(--mc-text);
	font-size: 14px;
	line-height: 1.5;
}
.mc-warning span { color: var(--mc-text-dim); font-size: 13px; }

/* ---------- Loading / error ---------- */
.mc-loading { text-align: center; padding: 60px 20px; color: var(--mc-text-dim); }
.mc-error {
	padding: 16px; border-radius: 10px;
	background: var(--mc-tint-error);
	border: 1px solid var(--mc-accent);
	color: var(--mc-danger-text); margin-top: 16px;
}

/* ---------- Fade transitions ---------- */
.mc-fade-enter { animation: mcFadeIn 0.3s ease; }
@keyframes mcFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.makecal * { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
	.mc-year-grid { grid-template-columns: repeat(2, 1fr); }
	.mc-cal-grid { padding: 6px; gap: 4px; }
	.mc-cal-cell { min-height: 66px; padding: 5px; gap: 2px; }
	.mc-cell-num { font-size: 15px; }
	.mc-cell-lunar { font-size: 10px; }
	/* จอแคบใส่ชื่อวันสำคัญไม่ไหว (7 คอลัมน์ = ช่องละ ~45px) เหลือไอคอนอย่างเดียว
	   ชื่อเต็มยังอ่านได้จากแผงรายละเอียดวันเมื่อแตะช่อง */
	.mc-cell-event span { display: none; }
	.mc-cell-events { flex-direction: row; flex-wrap: wrap; gap: 2px; }
	.mc-cell-event img { width: 17px; height: 17px; }
}
@media (max-width: 480px) {
	.mc-cal-grid { gap: 3px; }
	.mc-cal-cell { min-height: 52px; padding: 3px; }
	.mc-cell-num { font-size: 14px; }
}

/* ---------- พิมพ์ปฏิทินรายเดือน ----------
 *
 * แผ่นพิมพ์ถูกโคลนไปเป็นลูกตรงของ <body> โดย printMonth() (ดูเหตุผลใน make-cal.js)
 * บนจอต้องไม่โผล่เด็ดขาด ตอนพิมพ์ค่อยเป็นสิ่งเดียวที่เหลืออยู่บนกระดาษ
 */
.mc-print-sheet { display: none; }

@media print {
	/* ซ่อนทุกอย่างที่เป็นของธีม — ไม่ต้องรู้จัก markup ของธีมเลยสักตัว */
	html.mc-printing body > * { display: none !important; }
	html.mc-printing body > .mc-print-sheet { display: block !important; }

	@page { margin: 12mm; }

	.mc-print-sheet {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}
	.mc-print-title {
		margin: 0 0 10mm;
		text-align: center;
		font-size: 18pt;
	}
	.mc-print-foot {
		margin-top: 8mm;
		text-align: center;
		font-size: 8pt;
		color: #666;
	}

	/*
	 * พื้นสีของวันพระ/วันหยุด/เสาร์-อาทิตย์ ปกติถูกเบราว์เซอร์ตัดทิ้งตอนพิมพ์เพื่อประหยัดหมึก
	 * แต่ที่นี่สีคือ "ข้อมูล" ไม่ใช่การตกแต่ง (บอกว่าวันไหนเป็นวันพระ) จึงสั่งให้พิมพ์จริง
	 * เครื่องขาว-ดำจะได้เป็นเฉดเทา ซึ่งยังแยกออก และมีชื่อวันกำกับอยู่แล้วเป็นชั้นสำรอง
	 */
	.mc-print-sheet * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.mc-print-sheet .mc-cal-grid {
		background: none;
		border: none;
		padding: 0;
		gap: 2px;
	}
	.mc-print-sheet .mc-cal-cell {
		min-height: 20mm;
		border: 1px solid #bbb;
		/* มุมมนให้เข้าชุดกับ UI หน้าเว็บ (เดิม 0 = เหลี่ยมดิบ ผู้ใช้ทัก 27 ก.ค. 2569) */
		border-radius: 6px;
		box-shadow: none;
		break-inside: avoid; /* ห้ามผ่าช่องวันคาบ 2 หน้า */
	}
	.mc-print-sheet .mc-cal-cell.is-selected { box-shadow: none; }
	.mc-print-sheet .mc-cell-num { font-size: 12pt; }
	.mc-print-sheet .mc-cal-dow { font-size: 10pt; }
	.mc-print-sheet .mc-cell-event img { filter: none; }
}

/* ---------- วงประกบ นักษัตร 12 × ศก 10 (หน้าตารางปี) ----------
 * ดูเหตุผลเชิงแนวคิดใน make-cal.js `buildSokWheels`
 * เป็น "จอแสดงผล" ไม่ใช่ตัวเลือก จึงไม่มี cursor/hover — กันคนเข้าใจผิดว่ากดได้
 */
.mc-sok {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--mc-border);
	text-align: center;
}
.mc-sok-head {
	font-size: 15px;
	font-weight: 600;
	color: var(--mc-text);
	margin-bottom: 4px;
}
.mc-sok-svg {
	width: 100%;
	max-width: 611px;   /* +30% จาก 470 (มติผู้ใช้ v1.17.1) — viewBox สเกลตาม ทั้งเฟืองและป้ายโตพร้อมกัน */
	height: auto;
	margin: 4px auto 6px;
	display: block;
}
.mc-sok-foot {
	font-size: 13px;
	color: var(--mc-text-dim);
	line-height: 1.6;
}
.mc-sok-again { font-size: 12px; opacity: 0.85; }

@media (max-width: 480px) {
	/* วงเล็กลงจนชื่อซี่อ่านไม่ออก — เหลือบรรทัดสรุปซึ่งบอกข้อมูลครบอยู่แล้ว */
	.mc-sok-svg { display: none; }
	.mc-sok { margin-top: 20px; }
}