@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{--ink:#18304a;--purple:#2567c4;--light:#e7f2ff;--muted:#5d7186;--paper:#f7fbff;--line:#d8e5f1;--orange:#ed7145;--yellow:#fff0a7}
html,body{background:var(--paper)}body{color:var(--ink);font-family:'IBM Plex Sans','Noto Sans KR',sans-serif}button{font-family:inherit}button:focus-visible,a:focus-visible{outline:3px solid #2471d8;outline-offset:4px}
header{height:86px;max-width:1260px;padding:0 28px;background:var(--paper);border-bottom:1px solid var(--line)}.brand{font-family:Archivo,'Noto Sans KR';font-size:27px;font-weight:900;letter-spacing:-1.2px;gap:10px}.mark{background:var(--orange);border-radius:7px;transform:none;color:white;width:34px;height:34px;line-height:31px;font-size:25px}.brand-ko{font-size:12px;letter-spacing:0;color:var(--muted)}nav{gap:30px}nav button{font-weight:600;color:var(--ink);font-size:14px}nav .nav-active{color:var(--purple);box-shadow:inset 0 -2px var(--purple)}.language{border:1px solid var(--line);background:white;border-radius:8px;color:var(--purple);padding:7px 11px}.language select{font-size:13px;font-weight:600;color:var(--ink);max-width:145px}
main{max-width:1204px;padding:35px 0 56px}.intro{margin-bottom:26px}.eyebrow{font-family:Archivo,'Noto Sans KR';font-size:12px;color:var(--purple);font-weight:700;letter-spacing:1.3px}.eyebrow:before{width:18px;height:3px;border-radius:0;background:var(--orange)}.intro h1{font-family:Archivo,'Noto Sans KR';font-size:clamp(39px,4.5vw,59px);font-weight:800;letter-spacing:-.045em;line-height:1.08;margin:13px 0 12px}.intro h1 em{color:var(--purple);font-style:normal;text-decoration:none}.intro p{font-size:16px;line-height:1.6;color:var(--muted)}.stamp{font-family:Archivo,'Noto Sans KR';font-size:12px;color:var(--muted);font-weight:600}.stamp span+span{border-color:var(--line)}
.game-layout{grid-template-columns:minmax(0,1fr) 340px;gap:24px;background:none;border:0}.street{height:auto;min-height:370px;border:1px solid #bbd7ed;border-radius:13px;background:#e2f4fd;display:flex;flex-direction:column;justify-content:center;padding:66px 17px 58px;overflow:hidden}.street:after{display:none}.street-top{top:18px;left:20px;right:20px}.location{background:white;border:0;border-radius:6px;box-shadow:none;backdrop-filter:none;font-family:Archivo,'Noto Sans KR';font-size:12px;font-weight:600;color:var(--ink);padding:8px 11px}.sound{border:0;background:white;color:var(--purple);border-radius:6px}.street-shops{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-items:center}.scene-tile{background-image:url('scene-atlas.webp');background-size:400% 600%;background-position:var(--scene-x) var(--scene-y);background-repeat:no-repeat;position:relative;aspect-ratio:1;background-color:white}.storefront{border:0;border-radius:8px;box-shadow:0 4px 0 #b5d8ea;overflow:hidden;cursor:pointer;padding:0;transition:transform .18s,box-shadow .18s}.storefront:hover{transform:translateY(-4px);box-shadow:0 8px 0 #b5d8ea}.attached-sign{position:absolute;left:50%;top:16.5%;transform:translate(-50%,-50%);width:60%;font-family:'Noto Sans KR';font-size:clamp(15px,1.8vw,25px);font-weight:800;color:var(--ink);line-height:1.2;white-space:nowrap;text-align:center;padding:3px 0;pointer-events:none}.street-bottom{bottom:16px;border:0;border-radius:5px;background:white;box-shadow:none;font-size:12px;color:var(--ink);padding:10px 15px;max-width:92%;white-space:normal;text-align:center}.street-bottom b{color:var(--purple)}
.side{padding:24px 25px;background:white;border:1px solid var(--line);border-radius:13px}.pill{font-family:Archivo,'Noto Sans KR';background:var(--yellow);color:#685313;border-radius:4px;font-size:12px;font-weight:700;padding:6px 10px;letter-spacing:1px}.side h2{font-family:Archivo,'Noto Sans KR';font-size:30px;line-height:1.15;letter-spacing:-.03em;font-weight:800;margin:15px 0 10px}.side>p{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 20px}.mode-label{font-size:13px;color:var(--ink);font-weight:600;margin-bottom:9px}.modes{border:1px solid var(--line);border-radius:7px;background:#f2f7fd;padding:3px;gap:4px}.modes button{font-size:13px;border-radius:5px;font-weight:500;padding:9px 5px;line-height:1.4;color:var(--muted)}.modes .selected{background:white;color:var(--purple);box-shadow:0 1px 3px #b0c9dd55;font-weight:700}.mode-desc{font-size:12px;color:var(--muted);line-height:1.5;margin:10px 0 18px}.primary{border:0;border-radius:7px;background:var(--purple);color:white;box-shadow:0 3px 0 #174985;font-family:Archivo,'Noto Sans KR';font-size:14px;letter-spacing:0;padding:14px 18px}.primary:hover{background:#1959b1}.subnote{font-size:12px;color:var(--muted);margin-top:14px}
.below-title{margin-top:34px;margin-bottom:14px;border:0;padding:0}.below-title h3{font:700 24px/1.2 Archivo,'Noto Sans KR';letter-spacing:-.025em}.below-title span{font-size:12px;color:var(--muted)}.sets{gap:0;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:9px;overflow:hidden;background:white}.set{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:white;box-shadow:none;gap:13px;min-height:88px;padding:18px;transition:background .2s;display:flex;align-items:center;flex-direction:row}.set:hover{background:#f0f7ff;transform:none}.set.active{background:#e8f2ff;border-color:var(--line)}.set-icon{background:#fff1c2;border-radius:7px;width:33px;height:37px;flex-shrink:0;color:#b96624;font-size:20px}.set:nth-child(2n) .set-icon{background:#dcf6ee;color:#2d796b}.set:nth-child(3n) .set-icon{background:#ffe8de;color:#aa542e}.set b{font:600 14px/1.35 Archivo,'Noto Sans KR';display:block;margin:0}.set small{font-size:12px;color:var(--muted);margin-top:4px}.how{background:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;margin-top:28px;padding:18px 0}.how strong{color:var(--ink);font-size:13px}.how span{color:var(--muted);font-size:12px}.how i{font-size:14px;color:var(--orange)}footer{max-width:1204px;border-color:var(--line);color:var(--muted);font-size:12px}.brand.small{font-size:17px}
.quiz{max-width:880px}.quiz-top{align-items:center}.text-button{color:var(--purple);font-weight:600;text-decoration:none}.progress{gap:5px;margin-bottom:24px}.progress span{height:6px;border-radius:3px;background:#dce9f6}.progress .done{background:#f2ae54}.quiz-card{background:white;border:1px solid var(--line);border-radius:14px;padding:26px}.quiz-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:27px;margin-top:18px}.context-scene{width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--line)}.context-scene .attached-sign{font-size:clamp(28px,3.3vw,42px)}.scene-clue{position:absolute;bottom:15%;right:10%;font-size:25px;background:white;border:1px solid var(--line);border-radius:5px;padding:5px 8px}.visual-hint{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.6;text-align:left}.quiz h2{font:700 28px/1.25 Archivo,'Noto Sans KR';letter-spacing:-.02em;margin:0 0 21px;text-align:left}.answers{grid-template-columns:1fr;gap:9px}.answer{border:1px solid #c8daea;border-radius:7px;background:#f8fbff;font-size:15px;padding:14px 15px;line-height:1.45}.answer:hover:not(:disabled){border-color:var(--purple);background:#edf5ff}.answer span{color:var(--purple);font-weight:700;margin-right:13px}.answer.correct{background:#e7f8ee;border-color:#379666}.answer.wrong{background:#fff0e8;border-color:#d98663}.feedback{background:#eef7ff;border:0;border-radius:8px;padding:18px;margin-top:24px}.feedback b{color:#20754f}.feedback .primary{margin-top:14px}.review-item{background:#f3f8fe;border:0;border-radius:8px;padding:14px 17px}.review-item small{line-height:1.6}.secondary{background:white;border:1px solid #c8daea;border-radius:7px;color:var(--purple);font-weight:600}.guide-lead{color:var(--muted);font-size:16px}.guide-grid{gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:white}.guide-item{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:white;padding:20px}.guide-item p{color:var(--muted)}
@media(max-width:1260px){main,footer{margin-left:32px;margin-right:32px}.game-layout{grid-template-columns:minmax(0,1fr) 320px;gap:20px}.side{padding:24px 22px}}
@media(max-width:850px){header{padding:0 24px}.game-layout{grid-template-columns:1fr}.street{min-height:0;padding:62px 20px 54px}.side{padding:23px}.side h2{font-size:28px}.sets{grid-template-columns:repeat(2,1fr)}.quiz-body{gap:20px}.quiz h2{font-size:24px}.guide-grid{grid-template-columns:repeat(2,1fr)}.attached-sign{font-size:24px}}
@media(max-width:540px){header{height:auto;min-height:78px;padding:14px 20px;flex-wrap:wrap;gap:9px}.brand{font-size:24px}.brand-ko{display:none}nav{width:100%;justify-content:space-between;gap:16px}nav button{font-size:13px}.language{margin-left:auto}.language select{max-width:130px}main{margin:0;padding:26px 20px 42px}.intro h1{font-size:38px;line-height:1.08}.intro p{font-size:15px}.intro{margin-bottom:23px}.street{padding:54px 9px 50px;border-radius:10px}.street-top{top:12px;left:12px;right:12px}.location{font-size:11px}.street-shops{gap:4px}.storefront{border-radius:5px}.attached-sign{font-size:14px;width:65%}.street-bottom{bottom:12px;font-size:11px;padding:8px 10px}.side{padding:21px;border-radius:10px}.below-title h3{font-size:22px}.below-title span{font-size:11px}.set{gap:10px;padding:13px;min-height:92px}.set b{font-size:13px}.set small{font-size:11px}.set-icon{width:27px;height:32px;font-size:18px}.quiz-card{padding:20px 16px}.quiz-body{grid-template-columns:1fr;gap:19px;margin-top:14px}.context-scene{max-width:245px;margin:auto}.context-scene .attached-sign{font-size:29px}.visual-hint{text-align:center;margin-bottom:8px;font-size:12px}.quiz h2{text-align:center;font-size:23px;margin-bottom:15px}.answers{grid-template-columns:1fr 1fr;gap:8px}.answer{font-size:14px;padding:12px 10px;min-height:55px}.answer span{margin-right:8px}.scene-clue{font-size:18px;padding:3px 6px}.how{gap:15px}.how strong{width:100%}.quiz-top{font-size:13px;gap:10px}.quiz-top .text-button{font-size:13px}.feedback{font-size:14px;padding:15px}footer{margin:0 20px}.guide-item{padding:16px}}
html:lang(th) .intro h1,html:lang(hi) .intro h1{letter-spacing:0;line-height:1.35}html:lang(th) .quiz h2,html:lang(hi) .quiz h2{line-height:1.55}html:lang(th) .pill,html:lang(hi) .pill{letter-spacing:0}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}