/* ─────────────────────────────────────────────────────────
   ธีมห้องฉายของหน้ารวมบทเรียน (study cinema) — คราม-ทอง ชุดเดียวกับห้องเกม /games
   ใช้ร่วม: /journey-study (โปสเตอร์ = ฉากภูมิภาค + ครูประจำบท) · /grammar-study (๗ ห้อง + หลักสูตรเร่งรัด)
   ส่วนเฉพาะของแต่ละหน้าอยู่ในไฟล์ CSS ของหน้านั้น · ขนาดตัวอักษรทุกตัวผูก --reading-scale
   ───────────────────────────────────────────────────────── */
body.sc-page, html[data-ui="light"] body.sc-page .ui-dark {
	--sc-bg: #0a0f1e; --sc-bg2: #0f1730; --sc-panel: #131c38;
	--sc-line: rgba(255, 255, 255, .1); --sc-ink: #f3f6ff; --sc-muted: #aab4d0; --sc-dim: #7f8aa8;
	--sc-gold: #f5bf45; --sc-indigo: #a5b4fc; --sc-green: #34d399;
	background: var(--sc-bg);
	color: var(--sc-ink);
}

.sc-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .sc-wrap { padding: 0 1.5rem; } }

/* ── ป้ายใหญ่ ─────────────────────────────────────── */
.sc-bill { position: relative; isolation: isolate; overflow: hidden; background: var(--sc-bg); }
.sc-bill-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.sc-bill::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(10, 15, 30, .95) 0%, rgba(10, 15, 30, .8) 32%, rgba(10, 15, 30, .2) 64%, rgba(10, 15, 30, 0) 100%),
		linear-gradient(0deg, var(--sc-bg) 0%, rgba(10, 15, 30, .7) 20%, rgba(10, 15, 30, 0) 46%);
}
.sc-bill-inner { min-height: clamp(500px, 72vh, 660px); display: flex; flex-direction: column; justify-content: flex-end; gap: 1.8rem; padding-top: 3rem; padding-bottom: 1.6rem; }
.sc-bill-copy { max-width: 600px; display: flex; flex-direction: column; gap: .65rem; }
.sc-bill-copy > * { margin: 0; }
.sc-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: calc(.88rem * var(--reading-scale, 1)); font-weight: 800; color: var(--sc-muted); }
.sc-eyebrow i { color: var(--sc-gold); }
.sc-title { font-size: calc(clamp(2.1rem, 4.6vw, 3.5rem) * var(--reading-scale, 1)); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.sc-title span { color: var(--sc-gold); }
.sc-desc { font-size: calc(1.02rem * var(--reading-scale, 1)); line-height: 1.75; color: #d7deef; max-width: 540px; }
.sc-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem !important; }
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 52px; padding: .55rem 1.35rem; border-radius: 12px; border: 0; font-size: calc(1rem * var(--reading-scale, 1)); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.sc-btn:active { transform: scale(.97); }
.sc-btn-play { background: #fff; color: #0a0f1e; }
.sc-btn-play:hover { background: var(--sc-gold-fill, var(--sc-gold)); }
.sc-btn-ghost { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px); }
.sc-btn-ghost:hover { background: rgba(255, 255, 255, .26); }
.sc-btn-ghost i { color: var(--sc-gold); }
.sc-btn-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; text-align: left; }
.sc-btn-stack small { font-size: calc(.72rem * var(--reading-scale, 1)); font-weight: 700; color: #4b5576; }
.sc-btn-ghost .sc-btn-stack small { color: #c7d2fe; }
.sc-btn-stack > span { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sc-progress { max-width: 600px; padding: 1rem 1.1rem; border-radius: 16px; background: rgba(15, 23, 48, .82); border: 1px solid var(--sc-line); backdrop-filter: blur(8px); }
.sc-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: calc(.88rem * var(--reading-scale, 1)); font-weight: 800; color: var(--sc-muted); }
.sc-progress-head strong { color: #fff; font-size: calc(1rem * var(--reading-scale, 1)); }
.sc-track { height: 8px; margin-top: .55rem; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sc-track > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sc-gold), var(--sc-green)); transition: width .5s ease; }
.sc-progress-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .5rem; margin-top: .8rem; }
.sc-progress-courses button { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .4rem .7rem; border-radius: 10px; border: 1px solid var(--sc-line); background: rgba(255, 255, 255, .05); color: #fff; font-weight: 800; font-size: calc(.88rem * var(--reading-scale, 1)); text-align: left; cursor: pointer; }
.sc-progress-courses button:hover { background: rgba(255, 255, 255, .1); }
.sc-progress-no { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(245, 191, 69, .18); color: var(--sc-gold); font-size: calc(.85rem * var(--reading-scale, 1)); }
.sc-progress-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-progress-n { color: var(--sc-muted); font-weight: 700; font-size: calc(.82rem * var(--reading-scale, 1)); }

/* ── แถบชิปติดหัว ──────────────────────────────────── */
.sc-chipbar { position: sticky; top: 4rem; z-index: 30; background: rgba(10, 15, 30, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sc-line); }
.sc-chips { display: flex; align-items: center; gap: .5rem; padding-top: .55rem; padding-bottom: .55rem; overflow-x: auto; scrollbar-width: none; }
.sc-chips::-webkit-scrollbar { display: none; }
.sc-chip { display: inline-flex; align-items: center; gap: .45rem; flex: none; min-height: 44px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--sc-line); background: rgba(255, 255, 255, .06); color: #dbe2f5; font-size: calc(.88rem * var(--reading-scale, 1)); font-weight: 800; white-space: nowrap; cursor: pointer; }
.sc-chip:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sc-chip i { color: var(--sc-gold); }
.sc-chip-no { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: rgba(245, 191, 69, .2); color: var(--sc-gold); font-size: calc(.78rem * var(--reading-scale, 1)); }
.sc-chip-n { padding: 0 .45rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--sc-muted); font-size: calc(.75rem * var(--reading-scale, 1)); font-weight: 700; }
.sc-chip[aria-current="true"] { background: #fff; border-color: #fff; color: #0a0f1e; }
.sc-chip[aria-current="true"] .sc-chip-no { background: #0a0f1e; color: #fff; }
.sc-chip[aria-current="true"] .sc-chip-n { background: rgba(10, 15, 30, .1); color: #0a0f1e; }
.sc-chipsep { width: 1px; height: 22px; flex: none; background: var(--sc-line); }

/* ── หลักสูตร ──────────────────────────────────────── */
.sc-body { padding-top: 2.2rem; padding-bottom: 4rem; }
.sc-course, .sc-app { scroll-margin-top: 8rem; }
.sc-course + .sc-course, .sc-app { margin-top: 3.4rem; }
.sc-course-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.15rem; }
.sc-course-head > div { flex: 1 1 260px; min-width: 0; }
.sc-course-head h2 { margin: 0; font-size: calc(clamp(1.3rem, 2vw, 1.6rem) * var(--reading-scale, 1)); font-weight: 800; line-height: 1.3; color: #fff; }
.sc-course-head p { margin: .15rem 0 0; font-size: calc(.92rem * var(--reading-scale, 1)); line-height: 1.55; color: var(--sc-muted); }
.sc-no { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #4338ca, #312e81); color: #fff; font-size: calc(1.45rem * var(--reading-scale, 1)); font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.sc-no-app { font-size: calc(1.15rem * var(--reading-scale, 1)); background: linear-gradient(135deg, #b45309, #78350f); }
.sc-course-count { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid var(--sc-line); color: var(--sc-muted); font-size: calc(.85rem * var(--reading-scale, 1)); font-weight: 800; }
.sc-course-count i { color: var(--sc-indigo); }
.sc-course-count.is-full { color: #bbf7d0; border-color: rgba(52, 211, 153, .4); }
.sc-course-count.is-full i { color: var(--sc-green); }

.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.sc-skel { height: 320px; border-radius: 16px; background: var(--sc-panel); animation: scpulse 1.4s ease-in-out infinite; }
@keyframes scpulse { 50% { opacity: .55; } }
.sc-error { padding: 4rem 0; text-align: center; color: #fda4af; font-weight: 800; }

/* ── โปสเตอร์บท ────────────────────────────────────── */
.sc-poster { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--sc-bg2); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .3s cubic-bezier(.25, 1, .5, 1), box-shadow .25s ease; }
.sc-poster:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 18px 40px -18px rgba(0, 0, 0, .9); }
.sc-poster:focus-visible, .sc-btn:focus-visible, .sc-chip:focus-visible, .sc-progress-courses button:focus-visible { outline: 3px solid var(--sc-gold); outline-offset: 3px; }
.sc-poster.is-next { box-shadow: 0 0 0 2px var(--sc-gold), 0 18px 40px -20px rgba(245, 191, 69, .55); }
.sc-poster-art { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--sc-panel); }
.sc-poster-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 23, 48, 1) 0%, rgba(15, 23, 48, .35) 30%, rgba(15, 23, 48, 0) 55%); pointer-events: none; }
.sc-poster-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.sc-poster:hover .sc-poster-bg { transform: scale(1.05); }
.sc-poster-teacher { position: absolute; z-index: 1; right: 6%; bottom: 0; height: 84%; width: auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55)); transition: transform .35s cubic-bezier(.25, 1, .5, 1); }
.sc-poster:hover .sc-poster-teacher { transform: translateY(-3px) scale(1.03); }
.sc-poster.is-done .sc-poster-bg { filter: saturate(.75); }
.sc-poster-no, .sc-poster-flag { position: absolute; z-index: 2; top: .7rem; display: inline-flex; align-items: center; gap: .3rem; height: 26px; padding: 0 .6rem; border-radius: 999px; font-size: calc(.78rem * var(--reading-scale, 1)); font-weight: 800; }
.sc-poster-no { left: .7rem; background: rgba(255, 255, 255, .95); color: #3730a3; }
.sc-poster-flag { right: .7rem; }
.sc-poster-flag.is-done { background: #10b981; color: #fff; }
.sc-poster-flag.is-next { background: var(--sc-gold-fill, var(--sc-gold)); color: #3b2600; }
.sc-poster-flag i { font-size: calc(.68rem * var(--reading-scale, 1)); }
.sc-poster-place { position: absolute; z-index: 2; left: .8rem; bottom: .55rem; display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 999px; background: rgba(10, 15, 30, .6); backdrop-filter: blur(4px); color: #e8ecff; font-size: calc(.74rem * var(--reading-scale, 1)); font-weight: 700; }
.sc-poster-place i { color: var(--sc-gold); font-size: calc(.66rem * var(--reading-scale, 1)); }
.sc-poster-info { display: flex; flex: 1; flex-direction: column; gap: .3rem; padding: .7rem 1rem 1rem; }
.sc-poster-title { font-size: calc(1.28rem * var(--reading-scale, 1)); font-weight: 800; line-height: 1.35; color: #fff; }
.sc-poster-sub { font-size: calc(.9rem * var(--reading-scale, 1)); line-height: 1.5; color: var(--sc-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-poster-kinds { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .55rem; }
.sc-kind { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 6px; background: rgba(255, 255, 255, .07); color: #c7d0ea; font-size: calc(.74rem * var(--reading-scale, 1)); font-weight: 700; }
.sc-kind i { color: var(--sc-indigo); font-size: calc(.66rem * var(--reading-scale, 1)); }

/* PuriNotes บนพื้นเข้ม */
.sc-app .pn-banner { margin: 0; }

@media (max-width: 640px) {
	/* มือถือ: ภาพเป็นแถบบนสุด (เห็นเณรอ่านใบลาน) แล้วไล่สีลงพื้นเข้มก่อนถึงข้อความ */
	.sc-bill-art { height: 300px; bottom: auto; object-position: 72% 38%; }
	.sc-bill::before {
		background: linear-gradient(0deg, var(--sc-bg) 0%, var(--sc-bg) calc(100% - 300px), rgba(10, 15, 30, .55) calc(100% - 170px), rgba(10, 15, 30, 0) calc(100% - 60px));
	}
	.sc-bill-inner { min-height: 0; padding-top: 13.5rem; gap: 1.2rem; }
	.sc-course-count { margin-left: 64px; }
	.sc-btn { width: 100%; }
	.sc-btn-play { justify-content: flex-start; }
	.sc-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	/* มือถือ: การ์ดนอน ภาพซ้าย ข้อความขวา — เห็นได้หลายบทในจอเดียว */
	.sc-poster { flex-direction: row; }
	.sc-poster-art { flex: none; width: 40%; aspect-ratio: auto; min-height: 150px; }
	.sc-poster-art::after { background: linear-gradient(90deg, rgba(15, 23, 48, 0) 55%, rgba(15, 23, 48, 1) 100%); }
	.sc-poster-teacher { right: 50%; transform: translateX(50%); height: 82%; }
	.sc-poster:hover .sc-poster-teacher { transform: translateX(50%); }
	.sc-poster-flag { top: auto; bottom: .5rem; left: .5rem; right: auto; height: 22px; font-size: calc(.7rem * var(--reading-scale, 1)); }
	.sc-poster-no { top: .5rem; left: .5rem; height: 22px; font-size: calc(.7rem * var(--reading-scale, 1)); }
	.sc-poster-place { display: none; }
	.sc-poster-info { padding: .75rem .85rem; }
	.sc-poster-title { font-size: calc(1.1rem * var(--reading-scale, 1)); }
	.sc-poster-sub { font-size: calc(.84rem * var(--reading-scale, 1)); }
}


/* ═════════════════════════════════════════════════════════
   โหมดสว่าง (ทั้งเว็บ · <html data-ui="light"> จาก includes/theme-boot.php · ค่าตั้งต้น = สว่าง — หลวงพี่สั่ง ๑๐ ต.ค. ๒๕๖๙)
   ส่วนกลางของธีม: สลับค่าโทเคน --sc-* + ส่วนประกอบ sc-* ที่ใส่สีตายตัว
   หน้าที่ใช้ธีมนี้: ส่วนเฉพาะหน้าต้องใช้โทเคน (หรือเขียน html[data-ui="light"] … ของตัวเอง) ไม่ใช่สีขาวตายตัว
   ═════════════════════════════════════════════════════════ */
html[data-ui="light"] body.sc-page {
	color-scheme: light;
	--sc-bg: #f5f7fc; --sc-bg2: #ffffff; --sc-panel: #e9edf7;
	--sc-line: rgba(20, 26, 51, .12); --sc-ink: #141a33; --sc-muted: #525b78; --sc-dim: #5d6683;
	--sc-gold: #9c430a; --sc-indigo: #4f46e5; --sc-green: #059669;
	--sc-gold-fill: #f5bf45;   /* พื้นป้าย/ปุ่มทอง (ตัวหนังสือเข้มบนทองสด) */
}
/* ป้ายใหญ่: ภาพเดิม ไล่สีขาวแทนคราม · ตัวหนังสือเข้ม */
html[data-ui="light"] .sc-bill::before {
	background:
		linear-gradient(90deg, rgba(245, 247, 252, .97) 0%, rgba(245, 247, 252, .92) 38%, rgba(245, 247, 252, .3) 68%, rgba(245, 247, 252, 0) 100%),
		linear-gradient(0deg, var(--sc-bg) 0%, rgba(245, 247, 252, .65) 20%, rgba(245, 247, 252, 0) 46%);
}
html[data-ui="light"] .sc-title { color: var(--sc-ink); text-shadow: none; }
html[data-ui="light"] .sc-desc { color: #333c5c; }
html[data-ui="light"] .sc-eyebrow { color: #333c5c; }
html[data-ui="light"] .sc-btn-play { background: #1e1b4b; color: #fff; }
html[data-ui="light"] .sc-btn-play:hover { background: #312e81; }
html[data-ui="light"] .sc-btn-play .sc-btn-stack small { color: #c7d2fe; }
html[data-ui="light"] .sc-btn-ghost { background: rgba(20, 26, 51, .07); color: var(--sc-ink); box-shadow: inset 0 0 0 1px rgba(20, 26, 51, .14); }
html[data-ui="light"] .sc-btn-ghost:hover { background: rgba(20, 26, 51, .12); }
html[data-ui="light"] .sc-btn-ghost .sc-btn-stack small { color: var(--sc-muted); }
html[data-ui="light"] .sc-progress { background: rgba(255, 255, 255, .92); box-shadow: 0 10px 24px -18px rgba(20, 26, 51, .35); }
html[data-ui="light"] .sc-progress-head strong { color: var(--sc-ink); }
html[data-ui="light"] .sc-track { background: rgba(20, 26, 51, .1); }
html[data-ui="light"] .sc-progress-courses button { background: rgba(20, 26, 51, .04); color: var(--sc-ink); }
html[data-ui="light"] .sc-progress-courses button:hover { background: rgba(20, 26, 51, .08); }
html[data-ui="light"] .sc-progress-no, html[data-ui="light"] .sc-chip-no { background: rgba(180, 83, 9, .12); }
/* แถบชิปติดหัว */
html[data-ui="light"] .sc-chipbar { background: rgba(245, 247, 252, .94); }
html[data-ui="light"] .sc-chip { background: #fff; color: #333c5c; }
html[data-ui="light"] .sc-chip:hover { background: #eef2ff; color: var(--sc-ink); }
html[data-ui="light"] .sc-chip-n { background: rgba(20, 26, 51, .07); }
html[data-ui="light"] .sc-chip[aria-current="true"] { background: #1e1b4b; border-color: #1e1b4b; color: #fff; }
html[data-ui="light"] .sc-chip[aria-current="true"] .sc-chip-no { background: #f5bf45; color: #3b2600; }
html[data-ui="light"] .sc-chip[aria-current="true"] .sc-chip-n { background: rgba(255, 255, 255, .18); color: #fff; }
/* หัวหมวด · ป้ายนับ */
html[data-ui="light"] .sc-course-head h2 { color: var(--sc-ink); }
html[data-ui="light"] .sc-course-count { background: #fff; }
html[data-ui="light"] .sc-course-count.is-full { color: #047857; }
html[data-ui="light"] .sc-error { color: #dc2626; }
/* โปสเตอร์: ตัวการ์ดขาว ภาพคงเดิม (ไล่สีใต้ภาพเป็นขาว) */
html[data-ui="light"] .sc-poster { background: #fff; color: var(--sc-ink); box-shadow: 0 0 0 1px rgba(20, 26, 51, .1), 0 10px 24px -18px rgba(20, 26, 51, .35); }
html[data-ui="light"] .sc-poster:hover { box-shadow: 0 0 0 1px rgba(79, 70, 229, .35), 0 18px 40px -18px rgba(20, 26, 51, .45); }
html[data-ui="light"] .sc-poster.is-next { box-shadow: 0 0 0 2px #d97706, 0 18px 40px -20px rgba(217, 119, 6, .45); }
html[data-ui="light"] .sc-poster-art::after { background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, .3) 22%, rgba(255, 255, 255, 0) 45%); }
html[data-ui="light"] .sc-poster-title { color: var(--sc-ink); }
html[data-ui="light"] .sc-kind { background: rgba(20, 26, 51, .06); color: #333c5c; }
@media (max-width: 640px) {
	html[data-ui="light"] .sc-bill::before {
		background: linear-gradient(0deg, var(--sc-bg) 0%, var(--sc-bg) calc(100% - 300px), rgba(245, 247, 252, .6) calc(100% - 170px), rgba(245, 247, 252, 0) calc(100% - 60px));
	}
	html[data-ui="light"] .sc-poster-art::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 55%, #fff 100%); }
}

/* โหมดสว่าง: ป้ายเลขข้อ/ไอคอนหมวด = พื้นสีอ่อน + เลขสี + กรอบ (ไม่ใช้สีทึบ — หลวงพี่สั่ง ๑๐ ต.ค. ๒๕๖๙)
   หน้าที่มีสีประจำหมวด (--t-solid) ใช้ .sc-no-tone ของหน้านั้นเอง */
html[data-ui="light"] .sc-no { background: #eef2ff; color: #3730a3; box-shadow: inset 0 0 0 1.5px rgba(79, 70, 229, .32); }
html[data-ui="light"] .sc-no-app { background: #fff7e6; color: #92400e; box-shadow: inset 0 0 0 1.5px rgba(217, 119, 6, .4); }