.fm-scene .layout{max-width:1400px;width:100%;padding:clamp(14px,2vw,30px)}
.fm-shell{width:min(100%,1000px);color:#203d38}
.fm-top,.fm-column,.fm-question,.fm-poster,.fm-reward,.fm-feedback{border:2px solid #26403a;box-shadow:4px 4px 0 rgba(28,54,48,.82);border-radius:14px}
.fm-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(15px,2vw,24px);background:rgba(255,250,238,.96)}
.fm-top h1{font-size:clamp(25px,3vw,36px);line-height:1.2;margin:8px 0 5px;letter-spacing:-.035em}.fm-top p{font-size:clamp(16px,1.3vw,18px);line-height:1.5;margin:0}
.fm-kicker,.fm-poster-label{display:inline-block;border:1px solid #694928;border-radius:7px;background:#ffd889;color:#584025;font-size:13px;font-weight:800;padding:5px 9px}
.fm-guide{max-width:260px;padding:11px 14px;background:#e5f1e8;border-left:4px solid #258779;border-radius:8px;font-size:14px;font-weight:800;line-height:1.5}
.fm-count{width:max-content;max-width:100%;margin:12px 0;padding:5px 12px;border:1.5px solid #29433b;border-radius:8px;background:#ffe3a0;font-size:13px;font-weight:800}
.fm-match,.fm-poster-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.fm-column,.fm-question,.fm-poster{min-width:0;background:rgba(255,250,239,.96);padding:clamp(14px,1.5vw,20px)}.fm-column h2,.fm-question h2,.fm-poster h2{font-size:19px;line-height:1.3;margin:0 0 12px}.fm-items,.fm-targets,.fm-options{display:grid;gap:9px}
.fm-item,.fm-target,.fm-option{font:inherit;color:#203d38;text-align:left;min-width:0;min-height:48px;border:1.5px solid #57756a;border-radius:10px;background:#fffef9;padding:10px 12px;line-height:1.45;cursor:pointer}.fm-item,.fm-option{display:flex;align-items:center;gap:10px}.fm-item:hover:not(:disabled),.fm-target:hover,.fm-option:hover{background:#fff1cd}.fm-item:focus-visible,.fm-target:focus-visible,.fm-option:focus-visible{outline:3px solid #e76e3d;outline-offset:2px}.fm-item.is-selected{background:#fff0bd;border:2px solid #b87419}.fm-item.is-placed{background:#e1f0e6;border-color:#66917c;color:#315b4d;opacity:1}.fm-item small{margin-left:auto;flex:none;font-size:12px;font-weight:800;color:#286f5c}.fm-item-number{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:#e5f0e6;border:1px solid #96b8a5;color:#235a4d;font-weight:800;font-size:13px}.fm-item>span:not(.fm-item-number),.fm-option>span:not(.fm-item-number){min-width:0;overflow-wrap:anywhere}
.fm-target{display:flex;flex-direction:column;gap:4px;min-height:64px;background:#e5f1e8}.fm-target strong{font-size:16px}.fm-target>span{font-size:13px;color:#3f6257}.fm-target small{background:#fffdf5;border:1px solid #b5cbbb;border-radius:6px;padding:4px 7px;color:#355a4d;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.fm-question{max-width:820px}.fm-question>p{font-size:16px;line-height:1.6}.fm-poster{background:rgba(255,238,191,.96);min-height:190px}.fm-poster h2{margin:12px 0;color:#674428}.fm-poster p{padding:9px 11px;margin:8px 0;border-radius:8px;background:#fffdf3;line-height:1.5;font-weight:700}.fm-poster .fm-poster-empty{color:#6a6653;font-size:14px;font-weight:500}
.fm-feedback{max-width:100%;margin:12px 0;padding:12px 16px;background:rgba(255,242,207,.97);font-size:15px;line-height:1.5;font-weight:700}.fm-feedback.is-done{background:#e5f3e8;color:#235e4a}.fm-reward{margin-top:12px;padding:15px 18px;background:rgba(255,247,220,.97);border-color:#bd8b37}.fm-reward>span{display:block;font-size:12px;color:#8d5c20;font-weight:800}.fm-reward strong{display:block;margin:4px 0;font-size:19px}.fm-reward p{margin:4px 0;line-height:1.5}.fm-reward small{display:block;margin-top:7px;font-size:12px;line-height:1.5;color:#536b5e}
@media(max-width:720px){.fm-scene .layout{padding:14px}.fm-top{align-items:flex-start;flex-direction:column;gap:10px}.fm-guide{max-width:none;width:100%}.fm-match,.fm-poster-layout{grid-template-columns:1fr}.fm-targets{grid-template-columns:repeat(2,minmax(0,1fr))}.fm-target{min-height:64px}.fm-top h1{font-size:26px}.fm-item small{font-size:11px}.fm-feedback{font-size:14px}}
@media(max-width:420px){.fm-targets{grid-template-columns:1fr}.fm-item,.fm-option,.fm-target{font-size:15px}.fm-column{padding:14px}}
/* 이야기 속 단서와 실제 의견은 별도로 표시합니다. */
.clue-shelf{padding:14px 18px;margin:0 0 14px;color:#203a36}.clue-shelf summary{cursor:pointer;font-weight:800;min-height:44px;padding-block:9px}.clue-shelf summary b{color:#146b60}.clue-shelf>p{font-size:13px;line-height:1.5;margin:6px 0}.clue-shelf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:8px;margin-top:10px}.clue-shelf-grid article{background:#e7f3e6;border:1px solid #97baa8;border-radius:9px;padding:10px;min-width:0}.clue-shelf-grid p{font-size:13px;line-height:1.5;margin:6px 0}.clue-shelf-grid small{font-weight:700;color:#467d6d}
.fm-illustration{display:none}
@media(max-width:600px){.fm-scene{background-image:none!important;background-color:#315b55}.fm-illustration{display:block;overflow:hidden;border:2px solid #24433c;border-radius:12px;margin:10px 0;box-shadow:3px 3px 0 #24433c}.fm-illustration img{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;object-position:center}}
.fm-drag-instruction{width:max-content;max-width:100%;margin:0 0 10px;padding:6px 10px;border-radius:8px;background:rgba(255,250,238,.95);color:#36584e;font-size:13px;line-height:1.4;font-weight:700}
.fm-item .fm-grip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;min-width:44px;height:44px;margin:-6px -8px -6px auto;border:1px solid #a7c1b0;border-radius:8px;background:#edf5ec;color:#416b5d;font-size:12px;font-weight:800;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.fm-item .fm-grip:active{cursor:grabbing}.fm-item.is-dragging{opacity:.65}.fm-target.is-drag-over{outline:3px solid #cf8a20;outline-offset:2px;background:#ffecb0}
.fm-drag-ghost{position:fixed;z-index:9999;max-width:min(270px,75vw);padding:10px 12px;border:2px solid #b6751c;border-radius:10px;background:#fff2c1;color:#24443a;box-shadow:3px 3px 0 #644b2f;pointer-events:none;font:700 14px/1.4 Paperlogy,'Malgun Gothic',sans-serif;overflow-wrap:anywhere}
/* 손끝을 따라 원래 쪽지가 떠오르고, 자리 위에서 놓으면 자연스럽게 내려앉아요. */
.fm-drag-ghost{display:flex;align-items:center;gap:10px;box-sizing:border-box;max-width:calc(100vw - 16px);padding:10px 12px;border:2px solid #ba7a1f;border-radius:10px;background:#fff1c8;color:#203d38;box-shadow:0 14px 26px rgba(23,50,43,.28),4px 5px 0 #315149;font:inherit;font-weight:700;line-height:1.45;transform:rotate(-1deg) scale(1.025);will-change:left,top,transform;user-select:none}
.fm-drag-ghost .fm-item-number{background:#e5f0e6}.fm-drag-ghost .fm-grip{display:none}
.fm-item.is-dragging{opacity:.48;transform:scale(.99);box-shadow:inset 0 0 0 2px #acbcae}
.fm-target.is-drag-over{outline:3px solid #cf8a20;outline-offset:3px;background:#ffecb0;box-shadow:0 0 0 6px rgba(255,213,106,.28);transform:translateY(-2px)}
@keyframes fm-land{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(39,129,95,.35)}45%{transform:scale(1.015);box-shadow:0 0 0 7px rgba(39,129,95,.2)}100%{transform:scale(1);box-shadow:none}}
@keyframes fm-retry{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}55%{transform:translateX(5px)}80%{transform:translateX(-2px)}}
.fm-drop-success{animation:fm-land .42s ease-out}.fm-drop-retry{animation:fm-retry .32s ease-out}
@media(prefers-reduced-motion:reduce){.fm-drag-ghost{transform:none}.fm-item.is-dragging,.fm-target.is-drag-over{transform:none}.fm-drop-success,.fm-drop-retry{animation:none}}
@media(max-width:420px){.fm-drag-instruction{font-size:12px}}

/* 큰 화면에서는 미션과 장면을 나란히 배치해 수업 공간을 넓게 씁니다. */
@media (min-width: 1000px) {
 .fm-scene .layout{max-width:none;margin:0;padding:clamp(16px,1.7vw,28px);align-items:flex-start}
 .fm-shell{width:100%}
 .fm-top{padding:clamp(14px,1.25vw,24px)}
 .fm-workspace{display:grid;grid-template-columns:minmax(0,3fr) minmax(220px,1fr);gap:clamp(14px,1.4vw,24px);margin-top:clamp(12px,1.3vw,20px);align-items:stretch}
 .fm-work{grid-column:1;grid-row:1;min-width:0}
 .fm-illustration{grid-column:2;grid-row:1;display:block;overflow:hidden;min-width:0;min-height:260px;border:2px solid #26403a;border-radius:14px;box-shadow:4px 4px 0 rgba(28,54,48,.82);position:relative}
 .fm-illustration img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
 .fm-count{margin-top:0}
 .fm-match,.fm-poster-layout{align-items:stretch}
 .fm-column,.fm-poster{height:100%}
 .fm-question{max-width:none}
 .fm-feedback{margin-bottom:0}
}
@media (min-width: 1000px) and (max-height: 850px) {
 .fm-scene .layout{padding-block:14px}
 .fm-top{padding:12px 18px}
 .fm-top h1{font-size:clamp(25px,2vw,32px);margin:5px 0}
 .fm-workspace{margin-top:10px}
 .fm-count{margin-bottom:8px}
 .fm-drag-instruction{margin-bottom:8px}
 .fm-column,.fm-question,.fm-poster{padding:12px}
 .fm-column h2,.fm-question h2,.fm-poster h2{margin-bottom:8px}
 .fm-items,.fm-targets,.fm-options{gap:6px}
 .fm-feedback{margin-top:8px;padding:9px 12px}
 .fm-reward{margin-top:8px;padding:10px 14px}
}
@media (min-width:1000px) and (min-height:700px){
 .fm-scene .layout{min-height:calc(100dvh - 134px)}
 .fm-shell{display:flex;flex-direction:column}
 .fm-workspace{flex:1}
 .fm-work{display:flex;flex-direction:column}
 .fm-match,.fm-poster-layout,.fm-question{flex:1}
 .fm-column{display:flex;flex-direction:column}
 .fm-items,.fm-targets,.fm-options{flex:1;grid-auto-rows:minmax(48px,1fr)}
 .fm-poster-layout .fm-poster{min-height:100%}
}
@media (min-width:1000px) and (min-height:700px){
 .fm-scene .layout{min-height:calc(100dvh - 138px);align-items:stretch}
}
.fm-art-guide{display:none}
@media (min-width:1000px){
 .fm-illustration{display:flex;flex-direction:column;background:rgba(255,249,234,.97)}
 .fm-illustration img{position:static;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;flex:none;background:#29463c}
 .fm-art-guide{display:flex;flex:1;flex-direction:column;justify-content:center;gap:10px;padding:clamp(16px,1.5vw,26px);color:#24443d}
 .fm-art-guide span{align-self:flex-start;padding:5px 9px;border:1px solid #bd8b37;border-radius:7px;background:#ffdf94;font-size:13px;font-weight:800}
 .fm-art-guide p{margin:0;font-size:clamp(16px,1.25vw,21px);font-weight:800;line-height:1.55;word-break:keep-all}
}
@media (min-width:1000px) and (min-height:700px){
 .fm-top h1{font-size:clamp(28px,2.2vw,42px)}
 .fm-top p,.fm-item,.fm-option{font-size:clamp(16px,1.05vw,20px)}
 .fm-column h2,.fm-question h2,.fm-poster h2{font-size:clamp(19px,1.2vw,23px)}
 .fm-target{justify-content:center}
 .fm-target strong{font-size:clamp(17px,1.1vw,21px)}
 .fm-target>span{font-size:clamp(14px,.9vw,17px)}
 .fm-feedback{font-size:clamp(15px,1vw,19px)}
}
@media (min-width:1000px){
 .fm-illustration{display:block;min-height:260px;position:relative}
 .fm-illustration img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:70% center}
 .fm-art-guide{display:block;position:absolute;inset:auto 12px 12px;z-index:1;padding:12px 14px;border:1px solid rgba(255,250,238,.8);border-radius:10px;background:rgba(255,250,238,.86);box-shadow:2px 2px 0 rgba(28,54,48,.65);backdrop-filter:blur(3px)}
 .fm-art-guide p{margin:6px 0 0;font-size:clamp(15px,1.05vw,19px);line-height:1.45}
}
/* 완료 후에는 같은 내용을 두 번 보여 주지 않고, 분류 결과와 단서에 집중합니다. */
@media (min-width:1000px) and (min-height:700px){
 .fm-work.is-complete .fm-drag-instruction{display:none}
 .fm-work.is-complete .fm-match{grid-template-columns:1fr;flex:0 0 auto}
 .fm-work.is-complete .fm-match>.fm-column:first-child{display:none}
 .fm-work.is-complete .fm-targets{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));grid-auto-rows:auto}
 .fm-work.is-complete .fm-target{min-height:84px}
 .fm-work.is-complete .fm-question{flex:0 0 auto}
}
.fm-target .fm-friend-reply{display:block;background:#fff0cf;border-color:#d5b87e;font-size:13px;line-height:1.45}.fm-friend-reply b{display:block;color:#7a5628;font-size:12px}