*{box-sizing:border-box}body.cafe-game{margin:0;background:#e9e5dc;color:#172f58;font-family:Arial,"Noto Sans KR",sans-serif;min-height:100dvh;padding:14px 8px;display:grid;place-items:start center}.cafe-comic{position:relative;container-type:inline-size;width:min(100%,600px);aspect-ratio:9/16;isolation:isolate;box-shadow:0 12px 45px #15284430;background:#fff;overflow:hidden;border-radius:5px}.cafe-art{position:absolute;width:100%;height:100%;max-width:none!important;object-fit:fill;z-index:-1;pointer-events:none}.cafe-game button,.cafe-game a{touch-action:manipulation}.cafe-game button{font:inherit;cursor:pointer}.cafe-game button:focus-visible,.cafe-game a:focus-visible{outline:3px solid #e8a52b;outline-offset:2px}.cafe-game [hidden]{display:none!important}.cafe-bar{position:absolute;top:.4%;left:2%;right:2%;height:3.2%;display:flex;align-items:center;justify-content:space-between;gap:5px;color:#172f58;font-size:clamp(10px,3cqw,18px)}.cafe-bar>a,.cafe-bar>button{background:#ffffffb8;border:0;border-radius:50%;color:#172f58;width:5cqw;height:5cqw;display:grid;place-items:center;text-decoration:none;min-width:25px;min-height:25px;font-size:clamp(15px,4cqw,24px)}.cafe-bar strong{font-weight:900;letter-spacing:-.02em}.work-badge{position:absolute;top:4.8%;left:3%;right:3%;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:clamp(10px,2.7cqw,16px)}.work-badge span{background:#ffffffe8;color:#173453;box-shadow:0 1px 4px #17345324;padding:4px 8px;border:1px solid #23406655;border-radius:5px}.work-badge .warning{color:#9d3e33;background:#fff0e9}
.cafe-speech{position:absolute;top:31.5%;left:5%;right:5%;max-height:16%;overflow:auto;padding:1.3cqw 2.4cqw;border:2px solid #24436b;border-radius:18px;background:#fffffff5;color:#122d53;text-align:center;box-shadow:0 2px 3px #18335420}.cafe-speech .speaker{display:block;font-size:clamp(9px,2.5cqw,15px);color:#58728d;margin-bottom:2px}.cafe-speech p{font-size:clamp(14px,4.2cqw,25px);font-weight:700;line-height:1.4;margin:0;word-break:keep-all;overflow-wrap:normal}.speech-controls{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:5px}.speech-controls button{background:#edf4fc;border:1px solid #a6bdd9;border-radius:5px;color:#203e61;font-size:clamp(10px,2.7cqw,16px);padding:3px 7px;min-height:26px}.speech-controls button[aria-pressed=true]{background:#d9eac7}.cafe-paper{position:absolute;top:67.6%;left:4.8%;right:4.8%;bottom:7%;overflow:auto;overscroll-behavior:contain;color:#173453;padding:.7cqw 1cqw;scrollbar-width:thin;scrollbar-color:#b0c4df transparent}.cafe-paper h1{font-size:clamp(21px,6cqw,36px);line-height:1.13;margin:2px 0 8px;letter-spacing:-.035em}.cafe-paper h2{font-size:clamp(16px,4.7cqw,28px);line-height:1.25;margin:2px 0 5px;word-break:keep-all}.cafe-paper .kicker{font-size:clamp(9px,2.5cqw,15px);letter-spacing:.06em;color:#6381a5;font-weight:700;margin:0 0 3px}.cafe-paper p{font-size:clamp(11px,3.15cqw,19px);line-height:1.45;margin:4px 0 8px}.cafe-paper .question-mn{font-size:clamp(10px,2.6cqw,16px);color:#6a7e91;margin:0 0 7px}.cafe-choices{display:grid;gap:1.2cqw}.cafe-choice{display:flex;align-items:center;gap:2cqw;text-align:left;border:1.5px solid #497cae;border-radius:8px;background:#edf5ff;color:#14335b;padding:1.5cqw 2cqw;min-height:11cqw;font-size:clamp(15px,4.3cqw,26px);font-weight:700;line-height:1.2}.cafe-choice:nth-child(2){background:#e8f3ef}.cafe-choice:nth-child(3){background:#fff2df}.cafe-choice:hover{filter:brightness(.96)}.cafe-choice .choice-icon{width:6cqw;min-width:24px;text-align:center;border-right:1px solid #7b96b055;padding-right:1cqw;font-size:clamp(15px,4.4cqw,26px)}.cafe-choice small{display:block;font-size:clamp(10px,2.8cqw,16px);font-weight:400;line-height:1.3;margin-top:4px;color:#576d85}.cafe-action{display:block;width:100%;border:1.5px solid #3d709e;border-radius:7px;background:#dceaca;color:#1e3d51;padding:1.7cqw 2cqw;margin:7px 0 4px;min-height:11cqw;font-size:clamp(14px,3.8cqw,23px);font-weight:700}.cafe-action small{display:block;font-weight:400;font-size:clamp(10px,2.8cqw,16px);margin-top:3px}.cafe-action.secondary{background:#eef3f9}.cafe-action.bad{background:#f8e3df;border-color:#bb7970;color:#723d36}.cafe-action:hover{filter:brightness(.96)}.cafe-answer-list{background:#edf4fa;border-radius:6px;padding:6px 8px;margin:6px 0;font-size:clamp(10px,2.8cqw,17px)}.cafe-answer-list p{font-size:inherit;margin:3px 0}.cafe-answer-list b{color:#254b7a}.cafe-tools{position:absolute;bottom:4.1%;left:6%;right:6%;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.cafe-tools button{border:1px solid #7b9ab7;background:#fffffff2;color:#305271;border-radius:6px;padding:5px 2px;min-height:28px;font-size:clamp(9px,2.6cqw,15px)}.cafe-tools button:disabled{opacity:.45;cursor:default}.cafe-toast{position:absolute;bottom:.5%;left:4%;right:4%;background:#fffef6e8;color:#305271;text-align:center;font-size:clamp(9px,2.4cqw,14px);line-height:1.3;border-radius:4px}.cafe-toast:empty{display:none}.cafe-help{position:absolute;left:5%;right:5%;top:67%;bottom:8%;background:#fffef8;border:2px solid #557c9f;border-radius:9px;z-index:3;padding:12px;overflow:auto;color:#173453;font-size:clamp(12px,3.4cqw,20px);box-shadow:0 3px 12px #172f5840}.cafe-help h2{font-size:clamp(17px,4.5cqw,27px);margin:0 0 8px}.cafe-help p{margin:6px 0;line-height:1.4}.cafe-help b{font-size:1.1em}.cafe-help button{float:right;background:#eaf1f9;border:1px solid #567995;color:#173453;border-radius:5px;min-width:30px;min-height:30px}.ending-medal{color:#b58b26;font-size:clamp(12px,3.5cqw,21px);font-weight:900}.cafe-note{font-size:clamp(10px,2.8cqw,16px)!important;color:#647b90}.cafe-game .win{color:#2b754e}.cafe-game .loss{color:#a3493b}.cafe-list{margin:4px 0;padding-left:19px;font-size:clamp(10px,2.9cqw,17px)}.cafe-list li{margin:3px 0}.cafe-progress{height:3px;border:0;position:absolute;bottom:0;left:0;right:0;background:#cad8e3}.cafe-progress span{height:100%;background:#397da1;display:block}html[data-theme=dark] body.cafe-game{background:#17212e;color:#173453}.cafe-game .resume{background:#e2eff8;border-radius:5px;padding:6px}.cafe-game .text-toggle{font-size:clamp(10px,2.6cqw,16px);border:0;background:none;color:#476686;text-decoration:underline;padding:3px;margin-top:4px}
.cafe-bar #theme{font-size:0}.cafe-bar #theme::after{content:'☾';font-size:clamp(15px,4cqw,24px)}html[data-theme=dark] .cafe-bar #theme::after{content:'☀'}
.cafe-comic .cafe-paper{bottom:5.5%}.cafe-comic .cafe-tools{bottom:.8%}.cafe-comic .cafe-toast{bottom:auto;top:8.2%}.cafe-paper .question-mn{display:none}.cafe-comic[data-phase=order].translated .cafe-paper h2{display:none}.cafe-comic[data-phase=order].translated .question-mn{display:block;font-size:clamp(16px,4.7cqw,28px);line-height:1.25;margin:2px 0 5px;color:#173453;font-weight:700}.cafe-paper h2{margin-bottom:7px}.cafe-comic .cafe-choice{min-height:10.7cqw;padding:1.1cqw 2cqw}.cafe-comic .cafe-paper .text-toggle{margin-top:3px;padding:1px}.cafe-paper .kicker{line-height:1.2}
@media(max-width:450px){body.cafe-game{padding:0;display:block}.cafe-comic{width:100%;border-radius:0;box-shadow:none}.cafe-speech{border-width:1.5px;border-radius:13px}.cafe-choice{border-radius:6px}.cafe-tools button{padding:4px 1px}.cafe-paper{top:67.2%}}
@media(prefers-reduced-motion:no-preference){.cafe-choice:active{transform:scale(.99)}}

/* Keep TOPIK's comic controls and palette; place them over the English scene's white text cards. */
.cafe-comic .cafe-bar{z-index:4;background:#ffffffed;border-radius:4px;padding:0 1cqw}
.cafe-comic .cafe-paper{top:61.8%;left:2.8%;right:2.8%;bottom:5%;background:#fffdf9;padding:1.4cqw 2.6cqw;z-index:2;border-radius:6px;border:1px solid #ccd7e0}
.cafe-comic .cafe-choice{min-height:max(44px,10.7cqw);font-size:clamp(14px,3.9cqw,23px)}
.cafe-comic .cafe-paper h2{font-size:clamp(16px,4.3cqw,26px)}
.cafe-comic .speech-zone{position:absolute;inset:0;pointer-events:none;z-index:2}
.cafe-comic .cafe-speech{pointer-events:auto;max-height:none;padding:1.1cqw 1.8cqw;border:1px solid #ccd8e1;box-shadow:none;border-radius:14px;overflow:auto;background:#fffffff9}
.cafe-comic .cafe-speech p{font-size:clamp(13px,3.9cqw,23px);line-height:1.35}
.cafe-comic[data-scene=photo] .cafe-speech p{font-size:clamp(11px,3.2cqw,19px)}
.cafe-comic .scene-media{position:absolute;top:55.8%;left:5%;right:5%;z-index:4}
.cafe-comic .scene-media .speech-controls{margin:0}.cafe-comic .scene-media button{min-height:32px;padding:4px 9px;font-size:clamp(11px,3cqw,18px)}
.cafe-comic .cafe-tools{z-index:5}.cafe-comic .work-badge{z-index:4}.cafe-comic .cafe-toast{z-index:6}
.cafe-comic .ending-result{position:absolute;left:5%;top:6.1%;width:90%;height:8.2%;background:#fffdf8;color:#173453;padding:1.3cqw;border:1px solid #ccd7e0;z-index:3;display:flex;flex-direction:column;justify-content:center;text-align:center;border-radius:5px}
.ending-result h1{font-size:clamp(16px,4.4cqw,26px);margin:3px 0;line-height:1.12}.ending-result small{font-size:clamp(9px,2.3cqw,14px)}
.cafe-comic[data-phase=ending] .cafe-paper{top:83.8%;bottom:6.5%;padding:1cqw 2cqw;background:#fffffffa}
.cafe-comic[data-phase=ending] .scene-media{top:76%;left:5%;right:5%}.cafe-comic[data-phase=ending] .cafe-tools{bottom:.8%}
.ending-links{display:grid;grid-template-columns:1fr 1fr;gap:7px}.ending-links a{text-decoration:none;text-align:center;margin:0;font-size:clamp(11px,3cqw,18px);min-height:44px;display:flex;justify-content:center;align-items:center}
.cafe-comic[data-scene=wrong-place] .cafe-paper,.cafe-comic[data-scene=wrong-walk] .cafe-paper{top:82.4%;bottom:6.5%;padding:1.5cqw 2cqw}
.cafe-comic[data-scene=wrong-place] .scene-media,.cafe-comic[data-scene=wrong-walk] .scene-media{top:76.5%}
.cafe-help{z-index:8}.speech-tools{border-top:1px solid #cbd7e2;padding-top:9px;margin-top:12px}.speech-tools .speech-action{float:none;min-height:36px;min-width:44px;padding:6px 8px;font-size:clamp(11px,3cqw,18px)}.speech-feedback{font-size:clamp(10px,2.6cqw,16px)!important;line-height:1.4}.speech-recording audio,.speech-player audio{max-width:100%;width:100%;height:36px;margin-top:8px}
.cafe-help h3{font-size:clamp(14px,4cqw,23px);margin:16px 0 5px}.cafe-help .review-note{border-top:1px solid #b9cbd9;padding-top:10px}.cafe-help .close-help{float:right}.cafe-help .source{font-size:.8em;text-decoration:underline}.cafe-comic .kicker{color:#617b92}
@media(max-width:450px){.cafe-comic .cafe-paper{top:61.8%;border-radius:4px}.cafe-comic .scene-media{top:55.7%}.cafe-comic .scene-media button{min-height:30px;padding:3px 8px}.cafe-comic .cafe-speech{border-radius:10px}}
.cafe-comic[data-phase=order].translated .cafe-paper h2{display:block}