/* ฉากร้านพัสดุ: ภาพพื้นหลังแยกจากฉลากจริงและส่วนแก้ไขโค้ด */
body[data-week="8"] { background:#e7dece; }
.p8-tools-card { min-height:0;overflow:hidden;padding:10px 14px;border:3px solid #ac7950;border-radius:14px;background:#fff5df;color:#34364f;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center; }
.p8-tools-card h3 { margin:0;font-size:14px;white-space:nowrap; }
.p8-tools-card .p8-tool-chips { flex-wrap:nowrap;overflow-x:auto; }
.p8-editor-panel .p8-code-scroll { flex:1 1 0;min-height:0;overflow:auto;background:#191d29; }
.p8-code-scroll .p8-editor-wrap { flex:none;min-height:0!important;border-radius:0; }
.p8-code-scroll textarea { overflow-y:hidden; }
.p8-locked-main { position:absolute;z-index:1;inset:18px 10px 18px 95px;overflow:auto;box-sizing:border-box;border:3px solid #686574;border-radius:12px;padding:12px 12px 12px 185px;background:#252936eF;box-shadow:0 4px 0 #35344277; }
.p8-locked-main > small { display:block;margin:0 0 8px;color:#b6bac7;font-size:12px; }
.p8-locked-main .p8-program { margin:0;border-radius:0;background:transparent;color:#c9cedc;font:14px/24px monospace; }
.parcel-game { width:100%; max-width:none; padding:8px 6px 20px; color:#34364f; }
.p8-workshop { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(380px,1fr); gap:18px; padding:14px 12px 16px; border:2px solid #a39b99; border-radius:22px; background:#b7b6ad url('/assets/week8/workshop.png') center/cover; box-shadow:0 8px 24px #41392833; align-items:stretch; }
.p8-station { display:flex;flex-direction:column;min-width:0; border:0; background:none; box-shadow:none; border-radius:0; overflow:visible; }
.p8-sign { position:relative; width:100%;box-sizing:border-box;margin:28px 0 14px; padding:10px 14px 12px; border:3px solid #ac7950; border-radius:20px; background:linear-gradient(125deg,#fff9e8,#ffe7c7); box-shadow:inset 0 0 0 3px #fffbeb,0 6px 0 #684a3455,0 12px 24px #403c4440;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,1fr);grid-template-rows:auto auto;column-gap:18px;align-items:center; }
.p8-sign::before,.p8-sign::after { content:"";position:absolute;top:-25px;width:12px;height:35px;border:3px solid #66524c;border-radius:5px;background:linear-gradient(90deg,#ac8b6b,#5f4841);box-shadow:inset 0 -5px #c79b73; }
.p8-sign::before { left:28px; } .p8-sign::after { right:28px; }
.p8-mission { padding:8px 20px 0; }
.p8-mission small { color:#87624d; }
.p8-mission h2 { font-size:clamp(19px,1.7vw,26px);color:#242c53;line-height:1.4; }
.p8-mission > span { background:#657a52;font-size:15px;white-space:nowrap;padding:8px 12px; }
.p8-required { margin:7px 20px 0;display:flex;gap:10px;align-items:center;min-width:0;font-size:12px;color:#644d42; }
.p8-required strong { flex:0 0 auto;font-size:11px; }
.p8-required ul { display:flex;flex:1;gap:7px;flex-wrap:nowrap;overflow-x:auto;margin:0;padding:2px 0;list-style:none;font:13px 'Parcel Print',monospace;color:#293458; }
.p8-required li { display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:3px 8px 3px 4px;border:1px solid #d3bfa1;border-radius:7px;background:#fff8e8; }
.p8-required li > :first-child { display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:#e0d1b8;color:#675d50;font:700 13px system-ui,sans-serif; }
.p8-required li[data-state="pass"] > :first-child { background:#61934f;color:#fff; }
.p8-required li[data-state="fail"] > :first-child { background:#bd5a46;color:#fff; }
.p8-directions { grid-column:2;grid-row:1 / span 2;align-self:stretch;display:flex;align-items:center;margin:0;padding:9px 12px;border:1px solid #a17c55;border-radius:9px;background:#fff5df;color:#463f38;box-shadow:0 2px 5px #41271f33;white-space:pre-line;line-height:1.5;font-size:12px;overflow:auto; }
.p8-parcels { gap:12px;padding:0 6px;align-items:start; }
.p8-parcel-card > header { justify-content:center;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;margin:0 auto 10px;padding:5px 9px;background:#fff7e8eb;border:1px solid #bfa484;border-radius:7px;box-shadow:0 2px 5px #39292333; }
.p8-parcel-card > header span { color:#68513d; }
.p8-parcel-card > header strong { padding:0 3px;background:none; }
.p8-box { height:280px;max-width:none;margin:0;overflow:hidden; }
.p8-box > img { inset:auto 0 0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 4px #39241666); }
.p8-handwritten { inset:110px 0 auto;height:64px;min-height:0;padding:6px;font:clamp(23px,1.9vw,27px)/1 'Parcel Hand',cursive;letter-spacing:-.025em;color:#272c50;background:linear-gradient(120deg,#fff8e6,#f7e5c7);border:1px solid #ddc5a3;box-shadow:0 2px 3px #78563c55;white-space:nowrap;overflow:hidden;overflow-wrap:normal;display:flex;align-items:center; }
.p8-parcel-card:nth-child(2) .p8-handwritten { inset:110px 0 auto;min-height:0;transform:rotate(1deg); }
.p8-parcel-card:nth-child(3) .p8-handwritten { transform:rotate(2deg); }
.p8-printed { inset:100px 6% auto;min-height:130px;padding:10px; }
.p8-parcel-card:nth-child(2) .p8-printed { inset:100px 6% auto; }
.p8-output-lines { font-size:12px;max-height:168px; }
.p8-floor { height:170px;background:none;border:0;margin:8px -18px 0; }
.p8-conveyor-track { display:none; }
.p8-printer { z-index:3;left:8px;right:auto;width:155px;height:150px;bottom:24px;filter:drop-shadow(0 5px 4px #372a3d55); }
.p8-robot { z-index:4;left:150px;width:120px;height:135px;bottom:62px;transition:none; }
.p8-code-layout { display:flex;flex-direction:column;gap:12px;margin:0;min-width:0;height:100%; }
.p8-code-layout > * { width:100%;box-sizing:border-box; }
.p8-program-card { margin-top:auto;border:7px solid #686574;border-radius:15px;padding:15px 20px;background:linear-gradient(130deg,#fff9e8,#ffe5c9);box-shadow:inset 0 0 0 2px #d6baa6,0 4px 0 #37344277; }
.p8-program-card h3 { margin:0;font-size:18px;color:#2c2c51; }
.p8-program-card > p { margin:5px 0 10px;font-size:11px;line-height:1.55;color:#6b5661; }
.p8-task-functions { display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle; }
.p8-task-functions code { padding:2px 5px;border:1px solid #d6ae50;border-radius:4px;background:#ffe98f;color:#443616;font-weight:700; }
.p8-program-card .p8-program { max-height:150px;background:#fff8e9;border:1px solid #d6c2a6;color:#30395d; }
.p8-program-card .p8-activity { margin:10px 0 0;padding:9px 12px;border:1px solid #a17c55;border-radius:9px;background:#fff5df;color:#463f38;box-shadow:0 2px 5px #41271f33;white-space:pre-line;line-height:1.5;text-align:center; }
.p8-editor-panel { display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:12px;border:4px solid #686574;border-radius:12px;background:#202330;box-shadow:0 4px 0 #35344277; }
.p8-editor-panel > header { padding:0 2px 5px; }
.p8-editor-panel h3 { font:13px 'Parcel Print',monospace;color:#e6e5ef; }
.p8-window-dots { color:#e3ab6d;letter-spacing:2px;margin-right:8px; }
.p8-editor-panel header small { color:#b6bac7; }
.p8-editor-wrap { flex:1;height:auto;min-height:560px;background:#191d29;border-radius:5px; }
.p8-editor-wrap > pre { background:#252936;color:#8e95a8; }
.p8-source textarea { color:#f1e5cf; }
.p8-toolbox { margin-top:10px;padding:8px 9px;border:1px solid #555b6a;border-radius:8px;background:#171b26;color:#d9dbe3; }
.p8-toolbox > strong { display:block;margin-bottom:6px;font-size:11px;color:#f0d99a; }
.p8-tool-chips { display:flex;gap:6px;overflow-x:auto;padding-bottom:2px; }
.p8-tool-chips code { flex:0 0 auto;padding:4px 7px;border:1px solid #697286;border-radius:6px;background:#2a3040;color:#f3e4b7;font:12px 'Parcel Print',monospace; }
.p8-controls { gap:6px; }
.p8-controls .button { font-size:11px;padding:8px; }
.p8-controls .button-primary { flex:1;background:#526f53;border-color:#779476; }
.p8-page-hints { margin:18px 0 0;padding:14px 18px;border:1px solid #c8b89e;border-radius:12px;background:#fff8e9;color:#493f39; }
.p8-page-hints h3 { margin:0 0 5px;font-size:14px;color:#2e4f49; }
.p8-page-hints p { margin:0;font-size:12px;line-height:1.65; }
.p8-footer { margin-top:16px; }
/* กำหนดพื้นที่ฉากและเลื่อนเฉพาะเนื้อหา เพื่อไม่ให้เปลี่ยนตำแหน่งเมื่อผลลัพธ์ยาวขึ้น */
.p8-workshop { height:820px;box-sizing:border-box;grid-template-rows:minmax(0,1fr); }
.p8-station { display:grid;grid-template-rows:minmax(0,1fr) 365px 92px;min-height:0; }
.p8-parcels { height:365px; }
.p8-parcel-card { height:365px; }
.p8-parcel-error { max-height:42px;overflow:auto;box-sizing:border-box; }
.p8-floor { height:auto;margin:0; }
.p8-floor .p8-printer { height:110px;bottom:28px; }
.p8-floor .p8-robot { height:110px;bottom:48px; }
.p8-program-card { min-height:0;margin:0;display:flex;flex-direction:column;overflow:auto;padding:10px 14px; }
.p8-program-card > h3 { flex:0 0 auto; }
.p8-program-card > p:not(.p8-activity) { flex:0 0 auto;max-height:46px;overflow:auto; }
.p8-program-card .p8-program { flex:1 1 90px;min-height:60px;max-height:none;overflow:auto; }
.p8-program-card .p8-activity { flex:0 0 64px;box-sizing:border-box;overflow:auto; }
.p8-code-layout,.p8-editor-panel { min-height:0;overflow:hidden; }
.p8-editor-wrap { min-height:0;flex:1 1 0; }
.p8-editor-panel > header,.p8-controls,.p8-toolbox { flex:0 0 auto; }
@media(max-width:600px) {
 .p8-workshop .p8-station { height:1527px;grid-template-rows:300px 1135px 92px; }
 .p8-workshop .p8-parcels { height:1135px;grid-template-rows:repeat(3,365px); }
 .p8-workshop .p8-editor-wrap { min-height:0; }
 .p8-workshop .p8-code-layout { height:600px; }
}
@media(max-width:800px) { .p8-sign { grid-template-columns:1fr;grid-template-rows:auto auto auto; } .p8-directions { grid-column:1;grid-row:3;margin-top:10px; } }
@media(max-width:1100px) { .p8-workshop { height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;background-size:auto 760px;background-position:top center;background-repeat:no-repeat;background-color:#c6b39a; } .p8-station { height:785px; } .p8-code-layout { display:flex;height:600px; } .p8-editor-panel { height:100%; } .p8-sign { margin:28px 0 14px; } .p8-box { max-width:300px;margin:auto; } .p8-editor-wrap { min-height:0; } }
@media(max-width:600px) { .parcel-game { padding:6px 4px; } .p8-workshop { padding:20px 8px 12px;gap:10px; } .p8-sign { margin:28px 0 14px; } .p8-required { gap:6px; } .p8-required strong { font-size:10px; } .p8-parcels { grid-template-columns:1fr;gap:20px; } .p8-parcel-card { max-width:320px; } .p8-box { height:280px;width:270px; } .p8-box > img { width:100%;height:100%;object-fit:contain; } .p8-handwritten { font-size:24px; } .p8-code-layout { display:flex; } .p8-floor { margin:0;height:300px; } .p8-floor .p8-locked-main { inset:12px 6px;padding:12px 8px 12px 112px; } .p8-floor .p8-locked-main > small { font-size:10px; } .p8-floor .p8-locked-main .p8-program { font-size:11px;line-height:20px; } .p8-floor .p8-robot { left:62px!important;width:85px;height:95px;bottom:30px; } .p8-printer { width:90px;height:90px;left:0;bottom:20px; } .p8-editor-wrap { min-height:380px; } }