@font-face{font-family:ClassIcons;src:url('/assets/icons.woff2') format('woff2');font-display:block}.ico{font-family:ClassIcons;font-style:normal;font-weight:900;display:inline-block;line-height:1;vertical-align:middle}
:root{--ink:#102641;--paper:#f6f1e5;--teal:#086b70;--red:#b9513d;--blue:#237d9d;--green:#397951;color:var(--ink)}body{background:var(--paper)}body>header{display:none}main{width:100%;margin:0;padding:0}button,input,select{font-family:inherit}button:focus-visible,select:focus-visible,.swipe-card:focus-visible,.map-dot:focus-visible{outline:3px solid #168da0;outline-offset:2px}.home{padding:2rem}.game-screen,.teacher-screen,.guide-screen{height:100dvh;min-height:580px;padding:1.3vh 2.2vw 1vh;display:flex;flex-direction:column;gap:1vh;overflow:hidden}.screen-heading{position:relative;min-height:clamp(80px,14vh,145px);display:flex;align-items:center;overflow:hidden;isolation:isolate}.screen-heading>div:first-child{position:relative;z-index:1}.screen-heading h1,.teacher-heading h1,.guide-heading h1{font-size:clamp(32px,4vw,68px);font-weight:900;letter-spacing:-.045em;line-height:1.04;white-space:nowrap}.era-tag,.chip{background:var(--red);color:white;border-radius:5px;padding:.24em .8em;font-size:clamp(13px,1.3vw,21px);font-weight:800;display:inline-block;margin-bottom:5px}.heading-land,.teacher-heading:after,.guide-heading:after{position:absolute;z-index:-1;content:"";inset:0 0 0 42%;background:linear-gradient(90deg,var(--paper),transparent 28%),url('/assets/land1970.webp') center 65%/cover no-repeat}.metric-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.8vw}.stat{background:#fff;border:1px solid #e7ddc9;border-radius:9px;padding:.65vh .8vw;display:flex;gap:.8vw;align-items:center;min-width:0}.stat-icon{font-size:clamp(24px,3.5vw,52px);color:var(--teal)}.stat-1 .stat-icon{color:var(--blue)}.stat-2 .stat-icon{color:var(--red)}.stat-3 .stat-icon{color:var(--green)}.stat-copy{flex:1;min-width:0}.stat-copy small{display:block;font-weight:800;font-size:clamp(12px,1.1vw,18px);white-space:nowrap}.stat-copy em{font-size:.75em;color:#5f7771;font-style:normal}.stat-copy strong{font-size:clamp(20px,2.3vw,36px);font-weight:900;line-height:1}.stat-track{height:clamp(5px,.8vh,9px);border-radius:10px;background:#e4e1da;overflow:hidden;margin-top:4px}.stat-track span{display:block;height:100%;background:var(--teal);border-radius:9px}.stat-1 .stat-track span{background:var(--blue)}.stat-2 .stat-track span{background:var(--red)}.stat-3 .stat-track span{background:var(--green)}.student-stage{height:auto;flex:1;min-height:0;border:0;border-radius:8px;background:#d7e8df}.land{object-fit:cover}.student-stage:after{content:"";position:absolute;inset:0;background:#fcf8e22b;pointer-events:none}.swipe-card{z-index:2;top:8%;width:min(64%,1000px);min-height:0;height:55%;grid-template-columns:49% 51%;box-shadow:0 4px 0 #776d5826,0 9px 15px #32342225}.card-text{padding:clamp(14px,2vw,36px)}.card-text h2{font-size:clamp(24px,3vw,47px);line-height:1.13;word-break:keep-all;letter-spacing:-.04em}.card-text p{font-size:clamp(15px,1.35vw,23px);line-height:1.35}.card-text .word{font-size:clamp(11px,1vw,15px)!important}.arrow{z-index:2;bottom:35%;width:18%;max-width:none;background:none;text-align:center!important;padding:0;color:var(--teal)}.arrow b{display:block;font-size:clamp(32px,5vw,80px);letter-spacing:-.25em;line-height:.9}.arrow span{display:block;font-size:clamp(15px,1.6vw,24px);font-weight:900;word-break:keep-all}.arrow.left{left:.5%}.arrow.right{right:.5%;color:var(--red)}.swipe-hint{z-index:3;bottom:1%;font-size:12px}.city-scene{border-color:#ffffff70}.mini-scene{z-index:2;left:25%;width:50%;height:28%;bottom:5%;box-shadow:0 1px 7px #1c3b3b33}.view-tabs{display:flex;justify-content:center;gap:8px;min-height:clamp(42px,7vh,65px)}.view-tabs button,.view-tabs span{flex:1;max-width:360px;border:1px solid #e0d6c6;border-radius:8px;background:#fff;color:#817c74;font-size:clamp(14px,1.4vw,22px);font-weight:800;display:flex;align-items:center;justify-content:center;gap:.6em}.view-tabs .ico{font-size:1.3em}.view-tabs button.active{background:var(--teal);color:white}.view-tabs span{opacity:.72}.quiet-exit{position:absolute;right:8px;bottom:2px;border:0;background:transparent;color:#607b75;font-size:11px}.quiz-card,.waiting-card{z-index:3;position:absolute;left:50%;top:5%;transform:translateX(-50%);width:min(70%,820px);height:70%;background:#fff;border:1px solid #d9cdb8;border-radius:13px;padding:1.2vh 2vw;text-align:center;box-shadow:0 5px 14px #5e563322;overflow:auto}.quiz-card h2,.waiting-card h2{font-size:clamp(22px,2.6vw,42px);line-height:1.2;margin:.8vh 0;word-break:keep-all}.quiz-illustration{height:28%;overflow:hidden}.quiz-illustration img{height:100%;max-width:100%;object-fit:contain}.quiz-input{display:flex;gap:7px;max-width:620px;margin:1vh auto}.quiz-input .field{margin:0}.quiz-hint{font-size:14px;color:#8c7661}.waiting-card{height:75%;top:5%}.waiting-card p{margin:0}.waiting-card h3{text-align:left;margin:.8vh 0}.waiting-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1vw;height:45%}.waiting-plans div{background:#edf3ee;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}.waiting-plans img{width:100%;height:70%;object-fit:cover}.waiting-plans strong{font-size:clamp(12px,1.1vw,17px);padding:4px}.era-news{background:#fff;border-left:5px solid var(--teal);padding:5px 10px;font-size:12px}.result-content{flex:1;min-height:0;overflow:auto}.life-layout{height:100%;display:grid;grid-template-rows:minmax(75px,24%) 1fr;gap:1vh}.life-layout .city-scene{height:100%;margin:0}.life-layout .city-scene img{width:min(var(--w),17vh);top:calc(var(--ground) - min(var(--w),17vh)*var(--base))}.people-grid{height:100%;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1vw}.resident-card{background:#fff;border:1px solid #e3d8c8;border-radius:10px;overflow:hidden;min-width:0;display:grid;grid-template-rows:auto minmax(70px,34%) 1fr}.resident-card h2{background:var(--red);color:white;padding:.7vh 1vw;font-size:clamp(17px,1.8vw,27px);line-height:1.1}.resident-1 h2{background:#216e8f}.resident-2 h2{background:#3f7954}.resident-art{background-image:url('/assets/residents.webp');background-size:300% 100%;background-repeat:no-repeat;background-color:#efe9dd}.resident-art-0{background-position:0% 50%}.resident-art-1{background-position:50% 50%}.resident-art-2{background-position:100% 50%}.resident-data{padding:0 .8vw;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly}.resident-row{display:grid;grid-template-columns:1.45fr .8fr auto .8fr;align-items:center;gap:.3vw;border-bottom:1px solid #eee7da;font-size:clamp(12px,1.05vw,16px)}.resident-row:last-child{border:0}.resident-row .ico{color:var(--teal);font-size:clamp(20px,2vw,30px)}.old-value,.new-value{background:#f2efe9;text-align:center;padding:.35vh .15vw;border-radius:6px;font-size:clamp(15px,1.35vw,22px);font-weight:900}.old-value small,.new-value small{display:block;font-size:10px;color:#777}.new-value{background:#fbe9e4;color:var(--red)}.resident-1 .new-value{background:#e2f0f4;color:#176887}.resident-2 .new-value{background:#e5f0e5;color:#397951}.change-arrow{color:#75807c;font-weight:900}.neighbor-layout{height:100%;display:grid;grid-template-columns:1fr .9fr 1fr;gap:1vw}.neighbor-city{border:1px solid #e2d9ca;background:#fff;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;gap:.6vh;padding:0 .6vw .6vh}.neighbor-city h2{text-align:center;margin:0 -.6vw;background:var(--red);color:#fff;font-size:clamp(21px,2.3vw,38px)}.neighbor-city.other h2{background:#1d6d88}.neighbor-art{height:38%;background:url('/assets/housing.webp') center/cover;border-radius:5px}.neighbor-city.other .neighbor-art{background-image:url('/assets/industry.webp')}.neighbor-row{background:#f8f6ef;border-radius:7px;padding:.8vh 1vw;font-size:clamp(13px,1.1vw,18px);display:grid;grid-template-columns:auto 1fr auto;gap:.6em;align-items:center}.neighbor-row .ico{font-size:2em;color:var(--teal)}.neighbor-row .stat-track{grid-column:2/4}.neighbor-middle{display:grid;grid-template-rows:1fr auto;min-height:0;gap:1vh}.neighbor-map{position:relative;background:#dfeee9;border-radius:10px;overflow:hidden}.neighbor-map img{height:100%;width:100%;object-fit:cover}.neighbor-move{position:absolute;left:5%;right:5%;top:30%;background:#fffffff2;border:2px solid var(--red);border-radius:8px;padding:1vh;text-align:center;color:var(--red);font-weight:900}.resource-box{background:#fff;border:1px solid #e2d9ca;border-radius:9px;padding:1vh;display:flex;align-items:center;justify-content:center;gap:1vw}.resource-box .ico{color:var(--blue);font-size:2em}.resource-box span{display:block}.empty p{padding:1vw}.record-layout{height:100%;display:grid;grid-template-columns:2.3fr 1fr;gap:1.2vw}.record-flow{min-height:0;display:flex;flex-direction:column;gap:1vh}.record-step{display:grid;grid-template-columns:30% 70%;gap:.5vw;flex:1;min-height:0}.step-title{display:flex;gap:.7vw;align-items:flex-start}.step-title b{background:var(--teal);color:#fff;border-radius:50%;width:clamp(27px,3vw,46px);height:clamp(27px,3vw,46px);display:grid;place-items:center;font-size:clamp(18px,2vw,30px)}.step-title h2{font-size:clamp(18px,2vw,32px);line-height:1.1}.step-card{background:#fff;border:1px solid #e4ddd0;border-radius:10px;padding:.6vh .8vw;overflow:hidden;display:flex;align-items:center;gap:1vw}.step-card img{width:36%;height:100%;object-fit:cover;border-radius:5px}.step-card p{font-size:clamp(12px,1.1vw,17px);line-height:1.25}.change-cards{justify-content:space-around}.change-cards div{display:flex;align-items:center;flex-direction:column;gap:.3vh}.change-cards .ico{font-size:clamp(22px,3vw,44px);color:var(--teal)}.change-cards strong{color:var(--red)}.shared-result>div{flex:1;background:#edf5f1;border-radius:6px;padding:.5vh .7vw;font-size:clamp(11px,1vw,16px)}.shared-result small{display:block;color:var(--red);font-weight:800}.record-residents{border-left:1px solid #d8d0c2;padding-left:1vw}.record-residents h2{font-size:clamp(19px,2vw,30px)}.record-residents p{font-size:clamp(11px,1vw,15px);margin:.5vh 0}.record-person{background:#fff;border:1px solid #e4ddd0;border-radius:9px;padding:1vh 1vw;margin:1vh 0;display:flex;flex-direction:column;gap:.5vh;font-size:clamp(13px,1.1vw,18px)}.record-person strong{color:var(--red)}.previous-records{font-size:12px}.history-open{align-self:flex-end}.history-compare{height:auto}.history-compare .box{background:#fff}
.teacher-heading,.guide-heading{position:relative;isolation:isolate;min-height:clamp(90px,16vh,155px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.teacher-heading:after,.guide-heading:after{inset:0 0 0 42%}.teacher-main{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:1vw}.teacher-map-col,.teacher-right{min-height:0;display:flex;flex-direction:column;gap:.7vh}.map-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:.5vw}.map-controls button{padding:.8vh;border:0;border-radius:7px;background:#eae0cf;color:var(--ink);font-size:clamp(15px,1.35vw,22px);font-weight:900}.map-controls button.active{background:var(--teal);color:white}.map-board{flex:1;min-height:0;overflow:hidden;border-radius:10px;background:#d5e9e2}.map-board svg{height:100%;width:100%;display:block}.teacher-map-col details{font-size:12px}.teacher-progress{display:flex;align-items:center;gap:.7vw;padding:.8vh 1vw;border:1px solid #ded4c3;border-radius:9px;background:#fff}.teacher-progress>.ico{color:var(--teal);font-size:clamp(28px,3vw,46px)}.teacher-progress strong{color:var(--teal);font-size:clamp(30px,3vw,50px);line-height:1}.teacher-progress strong small{color:var(--ink);font-size:.7em}.teacher-progress b{font-size:clamp(12px,1vw,16px);white-space:nowrap}.teacher-progress button{margin-left:auto;padding:.9vh 1.5vw;white-space:nowrap;font-size:clamp(15px,1.3vw,22px)}.teacher-compare{flex:1;min-height:0;overflow:auto;background:#fff;border:1px solid #ded4c3;border-radius:9px;padding:1vh 1vw}.teacher-compare h2{font-size:clamp(20px,2vw,34px);line-height:1.15}.teacher-compare>p{font-size:clamp(12px,1.1vw,17px);margin:.5vh 0}.teacher-cities{height:75%;display:grid;grid-template-columns:1fr 1fr;gap:.7vw}.teacher-cities article{min-height:0;background:#f9eee4;border-radius:8px;padding:.5vh .5vw;display:flex;flex-direction:column;gap:.4vh}.teacher-cities article:nth-child(2){background:#e9f1ed}.teacher-cities select{width:100%;border:0;background:transparent;color:var(--red);font-size:clamp(18px,2vw,30px);font-weight:900}.teacher-city-art{height:35%;min-height:50px;border-radius:5px;background:url('/assets/housing.webp') center/cover}.teacher-cities article:nth-child(2) .teacher-city-art{background-image:url('/assets/industry.webp')}.teacher-city-row{flex:1;background:#fff;border-radius:5px;padding:.3vh .5vw;display:flex;align-items:center;gap:.5vw;font-size:clamp(12px,1vw,16px)}.teacher-city-row .ico{font-size:1.6em;color:#506b73}.teacher-city-row span{margin-left:auto}.teacher-city-row strong{color:var(--red)}.teacher-question{display:flex;align-items:center;gap:1vw;background:#fff;border:1px solid #ded4c3;border-radius:9px;padding:1vh 1vw;font-size:clamp(15px,1.3vw,22px)}.teacher-question>.ico{color:var(--teal);font-size:1.7em}.teacher-question .link{margin-left:auto;font-size:12px}.room-code{font-size:12px;color:#6a7973;text-align:right}.guide-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1vw}.guide-grid section{background:#fff;border:1px solid #e1d8ca;border-radius:9px;padding:1vh 1vw;min-height:0;overflow:auto}.guide-grid h2{font-size:clamp(19px,2vw,30px);margin-bottom:1vh}.guide-grid h2 b{display:inline-grid;place-items:center;background:var(--teal);color:#fff;border-radius:50%;width:1.5em;height:1.5em}.guide-question>div{display:flex;align-items:center;height:75%;gap:1vw}.guide-question strong{font-size:clamp(20px,2.3vw,38px);background:#e9f2f1;padding:1vw;border-radius:8px}.guide-question img{width:45%;height:100%;object-fit:cover;border-radius:7px}.guide-answers{display:flex;gap:1vw;height:70%}.guide-answers article{flex:1;background:#edf3ed;border-radius:7px;padding:.5vw;text-align:center;overflow:hidden}.guide-answers img{width:100%;height:68%;object-fit:cover;border-radius:5px}.guide-answers strong{font-size:clamp(12px,1.15vw,18px)}.guide-follow{font-size:clamp(20px,2vw,34px);font-weight:900;padding:1vw}.guide-follow .ico{color:var(--teal)}.guide-follow p{font-size:.6em}
@media(max-width:850px){.game-screen,.teacher-screen,.guide-screen{height:auto;min-height:100dvh;overflow:visible;padding:12px}.screen-heading h1,.teacher-heading h1,.guide-heading h1{font-size:clamp(26px,5vw,42px)}.screen-heading{min-height:80px}.metric-strip{gap:5px}.stat{padding:5px;gap:4px}.stat-icon{font-size:22px}.stat-copy small{font-size:10px}.stat-copy strong{font-size:18px}.student-stage{min-height:440px}.swipe-card{top:5%;width:78%;height:50%;grid-template-columns:42% 58%}.card-text h2{font-size:clamp(21px,3vw,28px)}.card-text p{font-size:14px}.arrow{width:20%;bottom:36%}.arrow span{font-size:13px}.quiz-card,.waiting-card{width:83%;height:65%}.mini-scene{width:55%;left:22.5%;height:24%}.result-content{min-height:450px}.life-layout{grid-template-rows:120px 1fr}.people-grid{min-height:340px}.resident-row{font-size:11px;grid-template-columns:1fr .75fr auto .75fr}.resident-row .ico{font-size:16px}.old-value,.new-value{font-size:13px}.neighbor-layout{min-height:400px}.teacher-main{grid-template-columns:1fr}.map-board{height:55vh;min-height:330px}.teacher-compare{min-height:380px}.teacher-cities{min-height:300px}.guide-grid{min-height:650px}.quiet-exit{position:static;text-align:right}}
@media(max-width:600px){.metric-strip{grid-template-columns:repeat(2,1fr)}.heading-land{inset:0 0 0 32%}.student-stage{min-height:470px}.swipe-card{width:88%;height:54%;grid-template-columns:1fr;grid-template-rows:38% auto}.card-text{padding:10px}.arrow{bottom:19%;width:36%}.arrow b{font-size:30px}.mini-scene{height:18%;bottom:1%}.swipe-hint{display:none}.people-grid{height:auto;grid-template-columns:1fr}.life-layout{height:auto;display:block}.life-layout .city-scene{height:110px;margin-bottom:8px}.resident-card{height:300px;margin-bottom:8px}.result-content{overflow:visible}.neighbor-layout{height:auto;grid-template-columns:1fr}.neighbor-city{min-height:300px}.neighbor-middle{height:300px}.record-layout{height:auto;grid-template-columns:1fr}.record-flow{min-height:500px}.record-residents{border:0;padding:0}.guide-grid{grid-template-columns:1fr;grid-template-rows:auto}.guide-grid section{min-height:220px}.screen-heading h1{white-space:normal}.view-tabs button,.view-tabs span{font-size:12px}.view-tabs .ico{font-size:1em}}

/* Align the active card's heading and indicators like the reference. */
@media(min-width:1000px){.play-head{display:grid;grid-template-columns:51% 49%;align-items:end;gap:.6vw}.play-head .screen-heading{min-width:0}.play-head .screen-heading h1{font-size:clamp(30px,3.2vw,54px)}.play-head .heading-land{display:none}.play-head .metric-strip{padding-bottom:1vh}.play-head .stat-icon{font-size:clamp(22px,2.6vw,42px)}}
.quiz-input button{min-width:82px;white-space:nowrap;flex-shrink:0}.arrow span{display:inline-block;background:#ffffffd9;border-radius:5px;padding:4px 8px}.resident-art{background-size:300% auto}.resident-art-0{background-position:0 49%}.resident-art-1{background-position:50% 49%}.resident-art-2{background-position:100% 49%}.result-content.neighbors{display:block}.record-person{display:flex;flex-direction:row;align-items:center;gap:1vw}.record-person>div:last-child{display:flex;flex-direction:column;gap:.5vh}.record-portrait{width:clamp(48px,5vw,75px);aspect-ratio:1;flex-shrink:0;border-radius:50%;background-image:url('/assets/residents.webp');background-size:300% auto;background-repeat:no-repeat;background-color:#f3e9d8}

.historic .heading-land,.teacher-heading.historic:after,.guide-heading.historic:after{background-image:linear-gradient(90deg,var(--paper),transparent 28%),url('/assets/panorama.webp');background-position:center 64%;background-size:cover}.resident-art-0{background-position:0 20%}.resident-art-1{background-position:50% 20%}.resident-art-2{background-position:100% 20%}.guide-question strong{word-break:keep-all}.guide-follow{position:relative;min-height:65%}.guide-follow img{position:absolute;right:0;bottom:0;width:38%;height:90%;object-fit:cover;border-radius:8px}.guide-follow p{max-width:55%}.guide-answers article b{display:block}.guide-answers article p{font-size:clamp(11px,1vw,16px)}
.resident-art-0{background-image:url('/assets/small_residentlow.webp')}.resident-art-1{background-image:url('/assets/small_residentmid.webp')}.resident-art-2{background-image:url('/assets/small_residenthigh.webp')}.resident-art,.record-portrait{background-size:cover;background-position:center 40%}

.guide-return{position:absolute;z-index:5;right:2.2vw;top:1.5vh;border:1px solid #c9c7bc;background:#fff;color:#17394c;border-radius:7px;padding:8px 12px;font-weight:700}

/* 교사 발문은 삽화 대신 큼직한 의미별 아이콘으로 표시한다. */
.guide-question .guide-question-body{display:flex;align-items:center;gap:clamp(16px,2vw,32px);height:calc(100% - 54px);padding:0 1.5vw}.guide-question strong{flex:1;background:none;padding:0;font-size:clamp(24px,2.5vw,42px);line-height:1.3}.guide-symbol{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:clamp(68px,7vw,118px);height:clamp(68px,7vw,118px);border-radius:50%;background:#e1f0ed;color:#116e70;font-size:clamp(32px,3.5vw,58px)}.guide-answers{height:calc(100% - 54px);align-items:stretch}.guide-answers article{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.5vh,20px);padding:1vh 1vw;min-width:0}.guide-answers article:nth-child(2){background:#f8eee8}.guide-answers article:nth-child(2) .guide-symbol{background:#f4ddd4;color:#b9513d}.guide-answers strong{font-size:clamp(16px,1.35vw,23px);line-height:1.4;word-break:keep-all}.guide-follow{display:flex;align-items:center;gap:clamp(16px,2vw,32px);height:calc(100% - 54px);min-height:0;padding:0 1.5vw}.guide-follow strong{display:block;font-size:clamp(23px,2vw,34px);line-height:1.25;word-break:keep-all}.guide-follow p{max-width:none;font-size:clamp(15px,1.2vw,21px);font-weight:600;line-height:1.4;margin-top:1vh;word-break:keep-all}.guide-history article b{font-size:clamp(18px,1.6vw,27px)}.guide-history article p{margin:0;font-size:clamp(14px,1.15vw,19px);line-height:1.4;word-break:keep-all}.guide-history .history-symbol{background:#e2edf6;color:#27728e}.guide-history .game-symbol{background:#f4e4d2;color:#b65b3d}@media(max-width:600px){.guide-question .guide-question-body,.guide-follow{min-height:150px;padding:10px}.guide-answers{min-height:150px}.guide-symbol{width:60px;height:60px;font-size:28px}.guide-question strong,.guide-follow strong{font-size:21px}}

/* 교사 도시 비교: 이미지 대신 도시 상징과 수치 변화, 선택을 구조화한다. */
.teacher-cities{height:69%;gap:.7vw}.teacher-cities article{padding:.65vh .6vw}.teacher-city-head{display:flex;align-items:center;gap:.6vw;min-height:clamp(34px,5vh,55px)}.teacher-city-icon{display:grid;place-items:center;flex-shrink:0;width:clamp(34px,3.2vw,52px);height:clamp(34px,3.2vw,52px);border-radius:50%;background:#f5dcd3;color:#b9513d;font-size:clamp(18px,1.8vw,29px)}.teacher-cities article:nth-child(2) .teacher-city-icon{background:#dcecea;color:#116e70}.teacher-cities select{min-width:0}.teacher-metrics{flex:1;display:grid;grid-template-rows:repeat(4,1fr);gap:.45vh;min-height:0}.teacher-city-row{min-height:0;display:grid;grid-template-columns:1fr auto;gap:.2vh .4vw;padding:.4vh .6vw}.metric-label{display:flex;align-items:center;gap:.4vw;white-space:nowrap}.metric-values{display:flex;align-items:center;gap:.35vw;white-space:nowrap;font-size:clamp(12px,1.05vw,17px)}.metric-values strong{color:#17394c;font-size:1.1em}.metric-arrow{color:#87948e}.delta{font-size:.8em;font-weight:800;border-radius:4px;padding:.1em .35em}.delta.up{color:#aa4434;background:#fbe6df}.delta.down{color:#176f8a;background:#e1f1f4}.delta.same{color:#64746e;background:#eff2ef}.compare-track{height:4px;background:#e7e6e0;border-radius:6px;grid-column:1/-1;overflow:hidden}.compare-track>span{display:block;height:100%;background:#c45d45;border-radius:6px}.teacher-cities article:nth-child(2) .compare-track>span{background:#278285}.teacher-compare details{margin-top:.6vh}.teacher-compare summary{cursor:pointer;color:#126c70;font-size:clamp(13px,1vw,17px);font-weight:800}.compare-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7vw;margin-top:.7vh}.compare-detail-city{background:#f8f5ee;border-radius:8px;padding:.6vh .6vw;min-width:0}.compare-detail-city:nth-child(2){background:#eef5f1}.compare-detail-city h3{font-size:clamp(14px,1.2vw,20px);margin:0 0 .5vh}.compare-detail-city h3 .ico{color:#b9513d}.compare-detail-city:nth-child(2) h3 .ico{color:#126c70}.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.3vw}.detail-stats>div{background:#fff;border-radius:5px;padding:.4vh .3vw;display:flex;flex-direction:column;align-items:center;gap:.15vh;font-size:clamp(10px,.8vw,13px);text-align:center}.detail-stats .ico{font-size:1.3em;color:#56817c}.detail-stats strong{font-size:1.25em}.detail-caption{font-size:clamp(10px,.8vw,13px);font-weight:800;color:#6a7b75;margin:.5vh 0 .3vh}.policy-tags{display:flex;flex-wrap:wrap;gap:.3vw}.policy-tags span{background:#fff;border:1px solid #e5e0d5;border-radius:5px;padding:.3vh .35vw;font-size:clamp(10px,.8vw,13px);line-height:1.25;word-break:keep-all}.move-info{margin-top:.5vh;border-radius:5px;background:#e6f0ee;padding:.4vh .5vw;font-size:clamp(11px,.9vw,14px);line-height:1.3;color:#205a60}.teacher-compare:has(#compare-details[open]) .teacher-cities{height:43%}.teacher-compare:has(#compare-details[open]) .teacher-city-head{min-height:30px}.teacher-compare:has(#compare-details[open]) .teacher-city-icon{width:32px;height:32px;font-size:17px}.teacher-compare:has(#compare-details[open]) .teacher-city-row{padding:.2vh .4vw}.teacher-compare:has(#compare-details[open]) .compare-track{height:3px}@media(max-width:850px){.teacher-cities{height:300px}.teacher-compare:has(#compare-details[open]) .teacher-cities{height:240px}.compare-detail-grid{grid-template-columns:1fr}.teacher-compare{overflow:visible}}
.teacher-city-row .metric-label,.teacher-city-row .metric-values span,.teacher-city-row .compare-track,.teacher-city-row .compare-track>span{margin-left:0}.teacher-city-row .compare-track{width:100%}

/* 선택은 아이콘 카드로, 지표와 이동은 방향과 크기를 함께 보여준다. */
.detail-stats{gap:.35vw}.detail-stats .detail-stat{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.4vw;min-width:0;text-align:left;padding:.6vh .5vw}.detail-stat>.ico{font-size:clamp(19px,1.8vw,30px);color:#477d77}.detail-stat>div{min-width:0;flex:1}.detail-stat>div>span{display:block;font-size:clamp(10px,.85vw,14px);white-space:nowrap}.detail-stat strong{display:block;font-size:clamp(14px,1.15vw,19px);line-height:1.15;white-space:nowrap}.detail-stat strong small{color:#8d9b94}.detail-track{height:4px;background:#e4eae4;border-radius:5px;overflow:hidden;margin-top:3px}.detail-track>span{display:block;height:100%;background:#448678;border-radius:5px}.detail-change{display:block;font-size:10px;color:#657c75}.policy-tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35vw}.policy-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:clamp(65px,8vh,86px);padding:.5vh .4vw;border:1px solid #e8e1d7;border-radius:6px;background:white;text-align:center}.policy-tile>.ico{font-size:clamp(19px,1.7vw,28px);color:#b9513d}.compare-detail-city:nth-child(2) .policy-tile>.ico{color:#147c7c}.policy-tile span{border:0;background:none;padding:0;font-size:clamp(10px,.85vw,14px);font-weight:700;line-height:1.25;word-break:keep-all}.move-info{background:#e6f0ee;padding:.4vh .5vw}.move-line,.move-empty{display:flex;align-items:center;justify-content:center;gap:.45vw;flex-wrap:wrap;font-size:clamp(11px,1vw,16px);font-weight:700;line-height:1.4}.move-line>.ico{color:#b9513d;font-size:1.2em}.move-line b{color:#146d70;background:#fff;border-radius:4px;padding:0 .35em}.move-empty{color:#547a76}.compare-detail-city .detail-caption{margin:.5vh 0 .35vh}@media(min-width:601px) and (max-width:850px){.compare-detail-grid{grid-template-columns:1fr 1fr}}
@media(min-width:851px){.teacher-compare:has(#compare-details[open]) .teacher-cities{height:34%}.teacher-compare:has(#compare-details[open]) .detail-stat>.ico{font-size:clamp(14px,1.2vw,20px)}.teacher-compare:has(#compare-details[open]) .detail-stat strong{font-size:clamp(11px,.85vw,14px)}.teacher-compare:has(#compare-details[open]) .detail-change{display:none}.teacher-compare:has(#compare-details[open]) .policy-tile{min-height:48px}.teacher-compare:has(#compare-details[open]) .policy-tile>.ico{font-size:clamp(17px,1.3vw,22px)}}

.map-board{position:relative}.map-status-legend{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:14px;padding:8px 12px;border-radius:8px;background:#ffffffed;color:#17394c;font-size:clamp(12px,1vw,16px);font-weight:800;box-shadow:0 1px 4px #17394c22}.map-status-legend span{display:flex;align-items:center;gap:6px;white-space:nowrap}.map-status-legend i{width:19px;height:19px;display:inline-grid;place-items:center;box-sizing:border-box;border-radius:50%;font-style:normal}.legend-complete{background:#307b70;color:white;border:2px solid white;box-shadow:0 0 0 1px #307b70;font-size:12px}.legend-pending{background:#f6f3e9;border:2px dashed #85938e}@media(max-width:600px){.map-status-legend{left:8px;bottom:8px;font-size:11px;gap:8px;padding:6px 8px}}

/* 두 도시의 지표 숫자는 항상 같은 열에 놓고 다음 지도 선택 칸을 표시한다. */
.teacher-cities article{border:2px solid transparent}.teacher-cities article.compare-target{border-color:#b9513d}.teacher-cities article:nth-child(2).compare-target{border-color:#16817c}.teacher-city-head .target-hint{flex-shrink:0;margin-left:0;background:#fff;border-radius:4px;padding:3px 5px;color:#90604f;font-size:clamp(10px,.8vw,13px);font-weight:800;white-space:nowrap}.teacher-cities article:nth-child(2) .target-hint{color:#14766f}.teacher-city-head select{flex:1;width:auto}.teacher-city-row .metric-label{justify-self:start}.metric-label .ico{width:1.45em;text-align:center;flex-shrink:0}.metric-values{display:grid;grid-template-columns:4ch 1.2em 4ch 4ch;gap:.15em;justify-self:end;font-variant-numeric:tabular-nums;align-items:center}.metric-values>span:first-child,.metric-values>strong{text-align:right}.metric-values .metric-arrow{text-align:center}.metric-values .delta{text-align:center;min-width:0}.teacher-city-row{font-variant-numeric:tabular-nums}.teacher-compare .compare-heading{margin-bottom:1vh}

.demo-badge{margin-left:auto;border-radius:6px;background:#e2f0ed;color:#126a66;font-size:clamp(12px,1vw,17px);font-weight:800;padding:.6em 1em;white-space:nowrap}.demo-entry{color:#126b6c;font-weight:800}.demo-home-link{display:inline-block;justify-self:start;color:#126b6c;font-weight:800;text-decoration:underline}

.teacher-code{position:absolute;z-index:3;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.65vw;padding:.6vh 1vw;border:1px solid #cbbda6;border-radius:9px;background:#fff;color:#17394c;box-shadow:0 2px 7px #17394c18;cursor:pointer;white-space:nowrap}.teacher-code small{font-size:clamp(12px,1vw,16px);font-weight:800;color:#5d7671}.teacher-code strong{font-size:clamp(22px,2.4vw,36px);font-variant-numeric:tabular-nums;letter-spacing:.08em;line-height:1}.teacher-code span{padding:.4em .6em;border-radius:5px;background:#e7f1ed;color:#126b6c;font-size:clamp(11px,.9vw,14px);font-weight:800}@media(max-width:700px){.teacher-code{position:relative;top:auto;right:auto;transform:none;margin-top:5px;align-self:flex-end}.teacher-heading{min-height:0;padding-bottom:5px}.teacher-heading h1{font-size:clamp(26px,5vw,42px)}}

/* 선택 화면에서는 카드와 작은 도시 풍경만 그림으로 보여 준다. */
.play-screen .student-stage{background:#e5ede5;border:1px solid #d4e0d6}
.play-screen .student-stage>.land,.play-screen .student-stage:after{display:none}
.play-screen .mini-scene{border:1px solid #c7d8ce;box-shadow:0 2px 8px #17394c1a}
.play-screen .arrow span{color:inherit;text-shadow:none}
.play-screen .swipe-hint{background:#fff;color:#31534f}

/* 우리 도시는 버튼을 누르는 동안만 잠깐 살펴본다. */
.play-screen .mini-scene{display:none;pointer-events:none}
.play-screen .mini-scene.is-visible{display:block}
.city-peek{position:absolute;right:1.4%;bottom:2%;z-index:4;display:flex;align-items:center;gap:.45em;padding:.65em 1em;border:1px solid #b9cec2;border-radius:8px;background:#fff;color:#155d5b;font-size:clamp(13px,1.1vw,18px);font-weight:800;touch-action:none;user-select:none;cursor:pointer}
.city-peek:active{background:#d8e9df}.city-peek .ico{font-size:1.15em}
@media(max-width:600px){.city-peek{right:2%;bottom:2%;font-size:13px}.play-screen .mini-scene{bottom:13%;height:19%;width:80%;left:10%}}

/* 카드가 선택 화면의 중심이 되도록 정렬한다. */
@media(min-width:851px){
 .play-screen .stage-card .swipe-card{top:13%;height:68%;width:min(64%,1100px)}
 .play-screen .stage-card .arrow{top:50%;bottom:auto;transform:translateY(-50%)}
 .play-screen .stage-card .mini-scene{bottom:7%;z-index:5;box-shadow:0 4px 24px #17394c55}
}
.play-screen .card-text{justify-content:center;gap:clamp(12px,1.6vh,24px)}
.play-screen .card-text h2{margin:0}
.play-screen .card-text p{margin:0;word-break:keep-all}
.play-screen .concept-note{display:flex;align-items:flex-start;gap:.6em;background:#eff5f0;border-radius:7px;padding:.7em .8em;line-height:1.45;color:#365852;font-size:clamp(12px,1vw,16px);word-break:keep-all}
.play-screen .concept-note b{color:#126b70;white-space:nowrap}
.play-screen .swipe-hint{bottom:2%;box-shadow:none}
@media(max-width:850px){.play-screen .stage-card .swipe-card{top:8%;height:62%}.play-screen .stage-card .arrow{bottom:22%}.play-screen .stage-card .mini-scene{z-index:5;bottom:13%}}
@media(max-width:600px){.play-screen .stage-card .swipe-card{height:65%}.play-screen .stage-card .arrow{bottom:16%}.play-screen .concept-note{font-size:12px;padding:.5em}.play-screen .stage-card .mini-scene{bottom:17%}}

/* 퀴즈는 문제와 답에 집중하고, 힌트는 오답 뒤에만 표시한다. */
.play-screen .quiz-card{top:13%;height:68%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2vh,24px);overflow:auto}
.play-screen .quiz-card .chip{margin:0}
.play-screen .quiz-card h2{max-width:22em;margin:0;line-height:1.3}
.play-screen .quiz-input{width:min(100%,620px);margin:0}
.play-screen .quiz-card .notice{min-height:1.5em;line-height:1.4}
@media(max-width:600px){.play-screen .quiz-card{top:8%;height:68%;width:90%;padding:16px}.play-screen .quiz-input{flex-wrap:wrap}.play-screen .quiz-input .field{flex:1;min-width:0}}

/* 지도 범례는 선택 상태와 현재 지도에서 사용하는 기준을 함께 보여준다. */
.map-status-legend{max-width:calc(100% - 24px);flex-wrap:wrap;gap:6px 12px}.map-status-legend .legend-dot{width:14px;height:14px;border:1px solid #fff;box-shadow:0 0 0 1px #8b9a91}.legend-high{background:#bf533e}.legend-jobs-low{background:#1b7892}.legend-env-high{background:#41815c}.map-status-legend .legend-flow{width:auto;height:auto;color:#c4553d;font-size:1.4em;line-height:.8}.legend-note{font-size:.8em;color:#687c76}
/* 교사용 퀴즈 목록은 발문과 분리된 독립 영역에서 확인한다. */
.guide-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,28%);gap:1vw}.guide-layout .guide-grid{min-width:0}.guide-quiz{display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid #e1d8ca;border-radius:9px;padding:1vh .9vw;overflow:hidden}.guide-quiz h2{font-size:clamp(16px,1.4vw,23px);margin:0 0 .8vh;color:#12314b}.guide-quiz h2 .ico{color:#096b70}.guide-rounds{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:.8vh}.guide-rounds button{border:1px solid #d2e0d8;border-radius:5px;background:#f4f7f4;color:#285b58;padding:.5em .2em;font-weight:800;font-size:clamp(11px,.85vw,14px)}.guide-rounds button.active{background:#096b70;color:white;border-color:#096b70}.guide-quiz-list{min-height:0;overflow:auto;padding-right:4px}.guide-quiz-item{background:#f7f5ee;border:1px solid #e9e2d7;border-radius:7px;margin-bottom:7px;padding:.65em}.guide-quiz-name{display:flex;gap:.5em;align-items:center;color:#17394c;font-size:clamp(12px,.95vw,15px)}.guide-quiz-name>span{color:#a24d39;font-weight:800}.guide-quiz-question{border-top:1px solid #e0e5dd;margin-top:.5em;padding-top:.5em}.guide-quiz-question small{display:block;color:#5a7771;margin-bottom:.25em}.guide-quiz-question p{font-size:clamp(12px,.95vw,15px);line-height:1.4;margin:0 0 .4em;word-break:keep-all}.guide-quiz-answer{font-weight:800;color:#116d68;font-size:clamp(12px,1vw,16px)}.guide-quiz-answer b{display:inline-block;background:#dcece4;padding:.15em .4em;border-radius:4px;margin-right:.2em}
@media(max-width:850px){.guide-layout{display:flex;flex-direction:column}.guide-layout .guide-grid{flex:none}.guide-quiz{min-height:380px;max-height:600px;padding:12px}.guide-quiz-list{max-height:480px}.map-status-legend{max-width:calc(100% - 16px)}}

/* 교사와 학생은 각자의 주소에서 독립적으로 입장한다. */
.entry-screen{min-height:100dvh;display:grid;place-items:center;padding:24px;background:#f6f1e5}.entry-wrap{width:min(100%,520px)}.entry-mark{display:block;color:#b9513d;font-size:22px;line-height:1}.entry-kicker{margin:18px 0 6px;color:#086b70;font-size:16px;font-weight:800}.entry-wrap>h1{margin:0 0 28px;font-size:clamp(38px,5vw,60px);letter-spacing:-.04em;line-height:1.1}.entry-box{background:#fff;border:1px solid #ded4c3;border-radius:12px;padding:clamp(24px,3vw,38px)}.entry-box h2{font-size:clamp(24px,2.5vw,34px);margin:0 0 10px}.entry-box>p:not(.error){color:#536f69;margin:0 0 24px;line-height:1.5}.entry-box form{display:flex;flex-direction:column}.entry-box label{font-weight:800;margin-bottom:8px}.entry-code{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:.12em}.entry-action{width:100%;font-size:18px;padding:15px}.entry-box .error:empty{display:none}.entry-box .error{margin:14px 0 0;line-height:1.4}

/* 교사 입장은 게임의 첫 장면처럼 도시 풍경 위에 단일 메뉴를 둔다. */
.title-screen{position:relative;isolation:isolate;min-height:100dvh;overflow:hidden;background:#1b4b50;color:#fff9e9}.title-scenery,.title-shade{position:absolute;inset:0;pointer-events:none}.title-scenery{z-index:-2;background:url('/assets/panorama.webp') 62% center/cover no-repeat}.title-shade{z-index:-1;background:linear-gradient(90deg,rgba(12,40,48,.94) 0%,rgba(17,49,53,.87) 29%,rgba(19,53,52,.48) 56%,rgba(15,43,44,.08) 100%),linear-gradient(0deg,rgba(13,39,42,.45),transparent 28%)}.title-content{width:min(57%,720px);min-height:100dvh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(32px,6vw,96px);gap:clamp(35px,6vh,70px)}.title-role{position:absolute;top:clamp(24px,5vh,54px);left:clamp(32px,6vw,96px);border:1px solid #ffffff80;border-radius:4px;color:#fff4da;padding:.45em .85em;font-size:clamp(13px,1.1vw,17px);font-weight:800;letter-spacing:.04em}.title-brand{margin-top:3vh}.title-brand p{margin:0 0 14px;color:#f2dcb8;font-size:clamp(14px,1.4vw,21px);font-weight:700;letter-spacing:.02em}.title-rule{display:block;width:clamp(38px,4vw,64px);height:4px;background:#e6ad68;margin-bottom:22px}.title-brand h1{margin:0;color:#fff9e9;font-size:clamp(62px,8vw,120px);font-weight:900;line-height:.99;letter-spacing:-.055em;text-shadow:0 3px 10px #102e2d55}.title-brand h1 strong{color:#f6c077;font-weight:900}.title-menu{width:min(100%,385px)}.title-start{width:100%;display:flex;align-items:center;gap:1em;border:2px solid #f4d2a1;border-radius:8px;background:#b95039;color:#fffaf0;padding:clamp(15px,1.4vw,22px) clamp(16px,1.7vw,26px);font:inherit;font-size:clamp(18px,1.55vw,24px);font-weight:900;box-shadow:0 5px 0 #743e2f,0 12px 28px #132b2b50;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}.title-start:hover{background:#ce6047;transform:translateY(-2px);box-shadow:0 7px 0 #743e2f,0 15px 30px #132b2b55}.title-start:active{transform:translateY(3px);box-shadow:0 2px 0 #743e2f}.title-start:focus-visible{outline:3px solid #fff4ce;outline-offset:5px}.title-play{font-size:.7em;color:#f9d5a5}.title-arrow{margin-left:auto;font-size:1.2em}.title-detail{margin:18px 0 0;color:#eee2cb;font-size:clamp(13px,1.05vw,16px);line-height:1.5}.title-error{color:#fff;background:#a83c2d;padding:.7em;border-radius:5px;margin:12px 0 0}.title-error:empty{display:none}.title-bottom{position:absolute;right:clamp(24px,4vw,60px);bottom:clamp(22px,4vh,45px);display:flex;align-items:center;gap:10px;color:#fff9e9;font-size:13px;font-weight:800;letter-spacing:.08em;text-shadow:0 1px 6px #112e2f}.title-timeline{width:clamp(55px,7vw,100px);height:2px;background:#f3debd}
@media(max-width:700px){.title-scenery{background-position:64% center}.title-shade{background:linear-gradient(90deg,rgba(13,43,47,.92),rgba(13,43,47,.63) 75%,rgba(13,43,47,.45)),linear-gradient(0deg,rgba(13,39,42,.35),transparent 30%)}.title-content{width:100%;min-height:100dvh;padding:32px 26px;gap:38px}.title-role{top:24px;left:26px}.title-brand h1{font-size:clamp(62px,16vw,90px)}.title-menu{max-width:360px}.title-bottom{right:25px;bottom:24px}}
@media(prefers-reduced-motion:reduce){.title-start{transition:none}}

/* 게임 제목은 한 줄의 굵은 한글 표제로 유지한다. */
@font-face{font-family:'CityTitle';src:url('/assets/title-dohyeon.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
.title-brand h1{font-family:'CityTitle',sans-serif;font-size:clamp(46px,5.8vw,86px);font-weight:400;letter-spacing:-.025em;line-height:1.1;white-space:nowrap}.title-brand h1 strong{font-weight:400}
@media(max-width:700px){.title-brand h1{font-size:clamp(42px,11vw,70px)}}

/* The title wordmark stays on one line at every screen size. */
.title-brand{width:100%}.title-brand h1{line-height:0}.title-logo{display:block;width:min(100%,660px);height:auto}

.metric-group{min-width:0}.metric-note{text-align:right;color:#416963;font-size:clamp(11px,1vw,15px);font-weight:700;margin-bottom:.35vh}.metric-delta{display:inline-block;margin-left:.4em;font-size:clamp(11px,1vw,15px);font-weight:800;color:#b9513d}.metric-delta.down{color:#237d9d}
.focus-heading{margin:0 0 1vh}.focus-cities{display:grid;grid-template-columns:1fr 1fr;gap:.7vw}.focus-city{min-width:0;border:2px solid transparent;border-radius:9px;background:#faeee5;padding:.8vh .7vw}.focus-city:nth-child(2){background:#e8f2ef}.focus-city.compare-target{border-color:#bd5b44}.focus-city:nth-child(2).compare-target{border-color:#20817d}.focus-city-head{display:flex;align-items:center;gap:.5vw;margin-bottom:.8vh}.focus-city-head select{flex:1;min-width:0;border:0;background:transparent;color:#b9513d;font-size:clamp(18px,1.9vw,30px);font-weight:900}.focus-city:nth-child(2) select{color:#126e70}.focus-city-head .target-hint{background:#fff;border-radius:4px;padding:3px 5px;font-size:11px;font-weight:800;white-space:nowrap;color:#647a72}.focus-choice{background:#fff;border-radius:7px;padding:.8vh .7vw;min-height:8vh}.focus-choice small{display:block;color:#6d827b;font-size:clamp(11px,.9vw,14px);font-weight:800}.focus-choice>div{display:flex;gap:.5vw;align-items:center;margin-top:.4vh}.focus-choice .ico{color:#bf5b43;font-size:clamp(22px,2vw,32px)}.focus-city:nth-child(2) .focus-choice .ico{color:#177b79}.focus-choice strong{font-size:clamp(13px,1.15vw,19px);line-height:1.25;word-break:keep-all}.focus-metrics{display:grid;gap:.5vh;margin-top:.6vh}.focus-metric{background:#fff;border-radius:7px;padding:.7vh .7vw;display:flex;justify-content:space-between;gap:4px;align-items:center;font-size:clamp(12px,1.05vw,17px);font-weight:800}.focus-metric>span{display:flex;align-items:center;gap:.35vw;white-space:nowrap}.focus-metric .ico{color:#557975;font-size:1.3em}.focus-metric>div{display:flex;gap:.3em;align-items:center;white-space:nowrap;font-variant-numeric:tabular-nums}.focus-metric i{font-style:normal;color:#80958f}.focus-metric strong{font-size:1.2em}.focus-delta{font-size:.75em;color:#b9513d;background:#faebe5;border-radius:4px;padding:.15em .35em}.focus-link{margin-top:1vh;background:#e7f2f0;border-radius:9px;padding:1vh 1vw;color:#155e61}.focus-flow{display:flex;justify-content:center;align-items:center;gap:.6vw;flex-wrap:wrap;font-size:clamp(14px,1.2vw,20px);font-weight:800;text-align:center}.focus-flow .ico{font-size:1.4em}.focus-flow-line{display:flex;align-items:center;justify-content:center;gap:.6vw}.focus-flow-line strong,.resource-flow strong,.compare-jobs strong{background:#fff;border-radius:6px;padding:.25em .5em;color:#14676b}.flow-arrow{font-size:1.5em;color:#b9513d}.focus-explain{text-align:center;font-size:clamp(11px,.9vw,15px);line-height:1.35;margin:.5vh 0 0;color:#54736f;word-break:keep-all}.focus-details{display:grid;grid-template-columns:1fr 1fr;gap:.7vw;margin-top:.6vh}.focus-details section{background:#f6f4ee;border-radius:7px;padding:.7vw;min-width:0}.focus-details h3{margin:0 0 .4vh;font-size:clamp(14px,1.2vw,18px)}.focus-details section>div{display:flex;flex-wrap:wrap;gap:4px}.focus-details section>div span{background:#fff;padding:4px 6px;border-radius:4px;font-size:12px}.focus-details p{font-size:12px;margin:.5vh 0;word-break:keep-all}@media(max-width:850px){.focus-details{grid-template-columns:1fr}.focus-city{padding:8px}.focus-choice{min-height:60px}.focus-city-head{gap:6px}.focus-flow{gap:6px}}
.compare-open{margin-top:1vh;border:0;background:transparent;color:#106c70;font-size:clamp(14px,1.1vw,18px);font-weight:800;padding:.5vh .1vw}.compare-open span{margin-left:.3em}.compare-detail-top{display:flex;align-items:center;justify-content:space-between;gap:1vw}.compare-detail-top h2{margin:0}.compare-detail-top button{border:1px solid #c5d7cd;border-radius:7px;background:#fff;color:#276a67;padding:.6em .8em;font-size:clamp(12px,.9vw,15px);font-weight:800;white-space:nowrap}.compare-detail-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#edf3ee;padding:4px;border-radius:8px;margin:1vh 0}.compare-detail-tabs button{border:0;border-radius:6px;padding:.7vh;background:transparent;color:#58746f;font-size:clamp(14px,1.1vw,18px);font-weight:800}.compare-detail-tabs button.active{background:#126e70;color:white}.detail-city-columns{display:grid;grid-template-columns:1fr 1fr;gap:.8vw}.detail-city-card{border-radius:9px;background:#fbefe8;padding:1vh .8vw;min-width:0}.detail-city-1{background:#e9f3ef}.detail-city-card h3{margin:0 0 1vh;font-size:clamp(20px,1.8vw,28px);color:#b9513d}.detail-city-1 h3{color:#146e70}.detail-city-card h3 .ico{margin-right:.3em}.detail-policy-list,.detail-metric-list,.detail-move-list{display:grid;gap:.7vh}.detail-policy{min-height:clamp(55px,8vh,75px);display:flex;align-items:center;gap:.7vw;background:white;border-radius:7px;padding:.7vh .7vw}.detail-policy-icon{display:grid;place-items:center;flex:none;width:clamp(35px,3vw,48px);height:clamp(35px,3vw,48px);border-radius:7px;background:#faebe4;color:#b9513d;font-size:clamp(17px,1.5vw,24px)}.detail-city-1 .detail-policy-icon{background:#e1f0ec;color:#147b76}.detail-policy strong{font-size:clamp(14px,1.2vw,19px);line-height:1.25;word-break:keep-all}.detail-metric-row,.detail-move-row,.detail-move-none{background:white;border-radius:7px;min-height:clamp(45px,6vh,60px);padding:.7vh .7vw;display:flex;align-items:center;justify-content:space-between;gap:.4vw;font-weight:800;font-size:clamp(14px,1.15vw,19px)}.detail-metric-row .ico{color:#4c817a;margin-right:.3em}.detail-metric-row>div,.detail-move-row>div{display:flex;align-items:center;gap:.4em;font-variant-numeric:tabular-nums}.detail-metric-row i,.detail-move-row i{font-style:normal;color:#83968e}.detail-metric-row strong{font-size:1.2em}.detail-move-row strong{white-space:nowrap;color:#13726e}.detail-move-none{justify-content:center;color:#607970}@media(max-width:850px){.detail-city-card{padding:10px}.detail-policy{padding:8px}.detail-metric-row,.detail-move-row{padding:8px}.compare-detail-top{gap:8px}}
.record-policies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5vw}.record-policy{height:100%;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.6vh;padding:.5vw;background:#f6f3ea;border-radius:8px;text-align:center}.record-policy>span{display:grid;place-items:center;width:clamp(28px,3vw,44px);height:clamp(28px,3vw,44px);border-radius:8px;background:#e4efec;color:#116d6e;font-size:clamp(16px,1.5vw,23px)}.record-policy strong{font-size:clamp(11px,1vw,16px);line-height:1.25;word-break:keep-all}.shared-visual{display:grid;grid-template-columns:1fr 1fr;gap:.6vw}.shared-card{min-width:0;height:100%;display:flex;align-items:center;gap:.7vw;background:#e8f3ef;border-radius:8px;padding:.8vw}.shared-card>div{min-width:0;flex:1}.shared-icon{display:grid;place-items:center;flex:none;width:clamp(33px,3vw,46px);height:clamp(33px,3vw,46px);border-radius:50%;background:#fff;color:#176d6e;font-size:clamp(18px,1.7vw,26px)}.shared-icon.water{color:#24839a}.shared-card small{display:block;color:#537b73;font-size:clamp(11px,.9vw,14px);font-weight:800;margin-bottom:.5vh}.shared-move-cities{display:flex;align-items:center;gap:.35em;flex-wrap:wrap;font-size:clamp(12px,1.1vw,18px)}.shared-move-cities span{color:#bd563e;font-weight:900}.shared-move>b,.shared-move.no-move strong{font-size:clamp(12px,1vw,16px)}.shared-move button{display:block;padding:0;border:0;background:transparent;color:#146c70;font-size:clamp(10px,.8vw,13px);font-weight:800}.shared-resource{display:flex;gap:.5em;align-items:center;font-size:clamp(15px,1.5vw,24px);font-weight:800;font-variant-numeric:tabular-nums}.shared-resource strong{color:#17788c}.shared-bar{height:clamp(5px,.7vh,8px);background:#cbded8;border-radius:8px;overflow:hidden;margin-top:.5vh}.shared-bar span{display:block;height:100%;background:#368d91;border-radius:8px}@media(max-width:600px){.record-policies{gap:4px}.record-policy strong{font-size:11px}.shared-visual{gap:5px}.shared-card{padding:6px;gap:5px}.shared-icon{width:30px;height:30px;font-size:16px}.shared-resource{font-size:15px}}

/* Each choice stays inside the existing result row. */
.record-policy{gap:.35vh;padding:.45vh .35vw}.record-policy>.record-policy-icon{width:clamp(26px,2.5vw,38px);height:clamp(26px,2.5vw,38px);font-size:clamp(15px,1.35vw,21px)}.record-policy strong{font-size:clamp(11px,.95vw,15px);line-height:1.22}.record-effects{display:flex;justify-content:center;align-content:center;gap:3px;flex-wrap:wrap}.record-effect{display:inline-block;white-space:nowrap;border-radius:4px;background:#fff;color:#255f5e;padding:2px 5px;font-size:clamp(10px,.72vw,12px);font-weight:800;line-height:1.2}.record-effect.decrease{color:#a84b39;background:#fbe9e3}@media(max-width:600px){.record-policy{padding:4px 2px}.record-policy>.record-policy-icon{width:25px;height:25px}.record-policy strong{font-size:10px}.record-effect{font-size:9px;padding:2px 3px}}

@media(min-width:601px){.record-step{grid-template-columns:24% 76%}.record-policy strong{font-size:clamp(12px,1.05vw,17px)}.record-effect{font-size:clamp(11px,.82vw,13px)}}
@media(max-width:600px){.record-step{grid-template-columns:1fr;gap:5px}.record-step .step-title{align-items:center}.record-step .step-title h2{margin:0}.record-policy strong{font-size:12px}.record-effect{font-size:10px}.record-policies{min-height:125px}.record-flow{min-height:650px}}

/* Keep Korean phrases together and distribute wrapped lines evenly. */
.record-policy strong,.detail-policy strong,.focus-choice strong,.arrow span,.card-text h2,.card-text p,.quiz-card h2,.waiting-plans strong{word-break:keep-all;overflow-wrap:normal;text-wrap:balance}
@media(max-width:600px){.record-policies{grid-template-columns:1fr;min-height:0;gap:4px}.record-policy{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;text-align:left;padding:5px 7px}.record-policy>.record-policy-icon{grid-row:1 / 3}.record-policy strong{font-size:12px;justify-self:start}.record-effects{justify-content:flex-start}.record-flow{min-height:700px}}

.teacher-exit{position:absolute;z-index:4;right:0;bottom:0;border:0;background:#fff;color:#345e5b;border-radius:5px;padding:5px 10px;font-weight:700;cursor:pointer}@media(max-width:700px){.teacher-exit{position:static;align-self:flex-end;margin-top:5px}}

.swipe-card.submitting{pointer-events:none;opacity:.78}.swipe-card.submitting::after{content:'선택 반영 중';position:absolute;inset:auto 1rem 1rem auto;z-index:5;background:#123b42;color:white;padding:.5em .8em;border-radius:.4em;font-weight:800}