/* 다온시 70년 — 삼권 스와이프와 같은 페이퍼컷 톤 */
:root{--paper:#F4EEE2;--paper-dark:#E9E0CF;--ink:#24212B;--soft:#5B5566;--white:#FFFDF8;--role:#2B7A9B;--role-dark:#1E5A73;--gold:#F5C542;--danger:#E5484D;--good:#2E9E6B;--shadow:0 10px 30px rgba(36,33,43,.15);--tile:80px;font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box;word-break:keep-all;overflow-wrap:anywhere}
html,body{margin:0;min-height:100%;background:var(--paper)}
body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.12;background-image:radial-gradient(#77694c .5px,transparent .5px);background-size:5px 5px}
h1,h2,h3,h4,p{margin:0}
h1,h2,.logo{font-family:'Black Han Sans','Pretendard Variable','Malgun Gothic',sans-serif;font-weight:900;letter-spacing:-.04em;line-height:1.1}
svg{display:block;width:100%;height:100%;overflow:visible}
button{font:inherit;border:0;cursor:pointer;color:inherit;touch-action:manipulation;user-select:none;-webkit-user-select:none;font-size:clamp(20px,2vw,24px);font-weight:800;min-height:56px;padding:12px 22px;border-radius:18px;background:var(--white);box-shadow:0 4px 0 #24212B18;transition:transform .12s,box-shadow .12s,background .2s,filter .2s}
button:active:not(:disabled){transform:translateY(2px) scale(.97);box-shadow:0 1px 0 #24212B18}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible{outline:4px solid #DCA424;outline-offset:4px}
.primary{background:var(--role);color:#fff;box-shadow:0 5px 0 var(--role-dark)}
.primary:hover:not(:disabled){filter:brightness(1.08)}
.secondary{background:var(--white);border:2px solid #CDBFA6}
.danger{background:var(--danger);color:#fff;box-shadow:0 5px 0 #A9282C}
.text-btn{background:none;box-shadow:none;color:var(--soft);font-size:20px;text-decoration:underline;text-underline-offset:4px}
.big{font-size:clamp(24px,2.6vw,30px);min-height:68px;padding:14px 34px}
.primary .ico,.big .ico{width:22px;height:22px;display:inline-block;vertical-align:-3px;margin-left:6px}
.icon-btn{width:60px;height:60px;min-height:60px;padding:12px;display:inline-grid;place-items:center;flex:none;border-radius:18px}
a.icon-btn{background:var(--white);box-shadow:0 4px 0 #24212B18}
.ico{width:28px;height:28px;flex:none}
.count{font-size:.8em;color:var(--soft);margin-left:6px}
#app{min-height:100dvh}

/* ───── 타이틀 ───── */
.screen-title{display:flex;flex-direction:column;min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) 22px 22px}
.tbar{display:flex;align-items:center;justify-content:space-between;gap:14px}
.tbar h1{font-size:clamp(36px,4.4vw,52px);flex:1}
.tools{display:flex;gap:10px}
.title-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center}
.skyline{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:clamp(120px,22vh,200px);width:min(960px,96vw);border-bottom:6px solid #8FCB7A}
.sky-b{width:calc(100% / 12);height:100%;transform-origin:bottom;animation:grow .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * .12s)}
.sky-b svg{height:100%}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.logo{font-size:clamp(72px,10vw,128px);color:var(--ink)}
.logo span{color:var(--role)}
.title-buttons{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ───── 신문 ───── */
.screen-paper,.screen-ending{min-height:100dvh}
.paper-stage{min-height:100dvh;display:grid;place-items:center;padding:20px}
.paper,.final-paper{position:relative;width:min(980px,100%);background:#FFFDF8;border-top:10px solid var(--ink);border-radius:6px;box-shadow:var(--shadow);padding:22px 30px 26px;animation:spin-in .7s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes spin-in{from{transform:rotate(-540deg) scale(.1);opacity:0}to{transform:none;opacity:1}}
.masthead{font-family:'Nanum Myeongjo',serif;font-weight:800;font-size:clamp(34px,4vw,48px);text-align:center;letter-spacing:.2em;border-bottom:3px double var(--ink);padding-bottom:8px}
.dateline{display:flex;justify-content:space-between;font-size:18px;color:var(--soft);padding:6px 0 8px;border-bottom:1px solid #CDBFA6;margin-bottom:12px}
.paper h2{font-size:clamp(40px,min(6vw,8vh),72px);text-align:center;margin:4px 0 12px}
.paper-body{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:center;margin-bottom:18px}
.paper-map .map{--tile:clamp(26px,min(4.4vw,6.4vh),54px)}
.paper-news{display:flex;flex-direction:column;align-items:center;gap:10px}
.new-tag{background:var(--danger);color:#fff;font-weight:900;font-size:22px;padding:4px 14px;border-radius:10px;transform:rotate(-4deg)}
.new-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.new-item{width:104px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:20px;animation:pop .5s both}
.new-item:nth-child(2){animation-delay:.1s}.new-item:nth-child(3){animation-delay:.2s}.new-item:nth-child(4){animation-delay:.3s}
.new-item svg{width:clamp(56px,9vh,84px);height:clamp(56px,9vh,84px)}
.paper>.primary{display:flex;margin:0 auto}
@keyframes pop{from{transform:scale(.3);opacity:0}70%{transform:scale(1.12)}to{transform:none;opacity:1}}

/* ───── 지도 ───── */
.map{display:grid;grid-template-columns:repeat(var(--cols),var(--tile));grid-template-rows:repeat(var(--rows),var(--tile));gap:4px;padding:6px;background:#9FC07A;border-radius:18px;box-shadow:inset 0 0 0 4px #8BAE67,var(--shadow);width:max-content;margin:auto}
.map.mini{gap:2px;padding:4px;border-radius:10px}
.tile{position:relative;width:var(--tile);height:var(--tile);min-height:0;padding:0;border-radius:10px;overflow:visible;background:none;box-shadow:none}
.map.mini .tile{border-radius:5px}
.tile>.ter{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.tile>.ter svg,.tile .ter{border-radius:inherit}
.tile .b{position:absolute;inset:4% 4% 2%;transition:transform .2s}
.tile.built:not(.t-S):hover .b{transform:translateY(-3px)}
.tile.can{cursor:copy}
.tile.can>.ter{box-shadow:inset 0 0 0 3px #FFFDF8E6}
.tile.can:not(.built):after{content:'+';position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--tile) * .42);font-weight:900;color:#FFFDF8;text-shadow:0 2px 0 #24212B40;animation:glow 1.2s ease-in-out infinite;pointer-events:none}
@keyframes glow{50%{opacity:.45}}
.tile.cannot>.ter{filter:saturate(.35) brightness(.78)}
.tile.hover>.ter{box-shadow:inset 0 0 0 6px var(--role)}
.tile.now .b:after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--role);box-shadow:0 0 0 3px #FFFDF8}
.tile.pop-in .b{animation:pop .45s both}
.tile.shake{animation:shake .35s}
@keyframes shake{25%,75%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
.badge{position:absolute;top:-6px;right:-6px;z-index:2;min-width:30px;height:30px;padding:0 6px;border-radius:15px;display:grid;place-items:center;font-size:18px;font-weight:900;background:var(--white);box-shadow:0 2px 6px #24212B40;pointer-events:none}
.badge.boost{background:var(--gold);color:var(--ink);white-space:nowrap}
.badge.boost.on{top:auto;bottom:-4px;right:-4px;font-size:18px;height:26px;min-width:30px}
.badge.bad{left:-6px;right:auto;background:#FDE5E5}
.badge.good{left:-6px;right:auto;background:#DDF3E6}
.badge .ico{width:22px;height:22px}
.map.mini .badge{display:none}
.smoke .puff{opacity:0;animation:puff 2.4s ease-out infinite}
.smoke .p1{animation-delay:.8s}.smoke .p2{animation-delay:1.6s}
@keyframes puff{0%{opacity:.85;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(6px,-22px) scale(1.4)}}
.tile .b:not(.smoky) .smoke,.map.mini .smoke{display:none}
.tile .b.clean .smoke{display:none}
.map-wrap{position:relative;display:grid;place-items:center;min-width:0;min-height:0}
.smog{position:absolute;inset:0;pointer-events:none;border-radius:18px;background:radial-gradient(circle at 50% 40%,#9C97A099,#7B768066);opacity:var(--smog);mix-blend-mode:multiply}
/* 시대 색감: 1960년대 빛바랜 사진 → 2020년대 선명 */
.era-0 .map{filter:sepia(.28) saturate(.85)}.era-1 .map{filter:sepia(.2) saturate(.9)}.era-2 .map{filter:sepia(.12)}.era-3 .map{filter:sepia(.06)}

/* ───── 건설 화면 ───── */
.build{height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:10px;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));overflow:hidden}
.topbar{display:flex;align-items:center;gap:14px}
.decade{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.decade strong{font-family:'Black Han Sans',sans-serif;font-size:clamp(30px,3.4vw,42px);white-space:nowrap}
.timeline{display:flex;gap:6px}
.timeline i{width:16px;height:16px;border-radius:50%;background:#D8CDB8}
.timeline i.done{background:var(--role)}
.timeline i.now{background:var(--gold);box-shadow:0 0 0 3px var(--ink)}
.res{display:flex;align-items:center;gap:10px}
.res-item{display:flex;align-items:center;gap:6px;background:var(--white);border-radius:16px;padding:6px 14px;box-shadow:0 3px 0 #24212B12;font-size:clamp(22px,2.4vw,28px);font-weight:900;min-height:52px;white-space:nowrap}
.res-item .ico{width:30px;height:30px}
.slots{gap:2px}
.slot .ico{width:26px;height:26px}
.slot.used{opacity:.2}
.gauges{display:flex;justify-content:center;gap:clamp(14px,3vw,40px)}
.gauge{display:flex;align-items:center;gap:8px;background:var(--white);border-radius:16px;padding:6px 14px 6px 8px;box-shadow:0 3px 0 #24212B12}
.g-icon{width:46px;height:46px}
.g-label{font-size:20px;font-weight:800}
.g-num{font-size:22px;min-width:2ch;text-align:right;color:var(--soft);white-space:nowrap;flex-shrink:0}
.g-fill{transform-origin:50% 100%;transform-box:fill-box;transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.gauge.low{animation:low 1s ease-in-out infinite}
.gauge.low .g-num{color:var(--danger)}
@keyframes low{50%{box-shadow:0 0 0 4px #E5484D66}}
.gauges.big{flex-wrap:wrap;gap:10px}
.gauges.big .gauge{flex:1 1 40%}
.main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:14px;min-height:0}
.tray{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;min-height:0;background:#EADFCB;border-radius:20px;padding:10px;box-shadow:inset 0 2px 0 #24212B10}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));grid-auto-rows:max-content;gap:10px;overflow-y:auto;align-content:start;padding:4px;overscroll-behavior:contain}
.card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 8px;min-height:auto;border-radius:16px;background:var(--white);border:3px solid transparent;touch-action:none;font-size:20px}
.card.future .c-fx,.card.future .c-row{display:none}
.card.sel{border-color:var(--role);background:#E6F2F6;transform:translateY(-3px);box-shadow:0 7px 0 var(--role-dark)}
.card.locked .c-icon,.card.locked .c-name{opacity:.45}
.card.future{opacity:.5;filter:grayscale(.8)}
.c-icon{width:62px;height:62px}
.c-name{font-size:20px;font-weight:900;line-height:1.15;text-align:center}
.c-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.cost{display:flex;align-items:center;gap:3px;font-size:20px;font-weight:900}
.cost .ico{width:22px;height:22px}
.need{display:flex;align-items:center;gap:1px;font-size:18px;font-weight:900;background:#EFE7D8;border-radius:8px;padding:1px 4px}
.need .ico{width:18px;height:18px}
.c-fx{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;min-height:22px}
.fx{display:inline-flex;align-items:center;gap:1px;border-radius:8px;padding:1px 4px;font-size:18px;font-weight:900}
.fx .ico{width:18px;height:18px}
.fx.up{background:#DDF3E6;color:#1F7A4F}
.fx.down{background:#FDE5E5;color:#B42F33}
.c-lock{position:absolute;inset:auto 6px 6px;display:flex;align-items:center;justify-content:center;gap:4px;background:#24212BE0;color:#fff;border-radius:10px;padding:3px 6px;font-size:18px}
.c-lock .ico{width:20px;height:20px}
.c-new{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font-size:18px;font-weight:900;padding:2px 7px;border-radius:8px;transform:rotate(8deg)}
.tray-foot{display:flex;gap:10px}
.tray-foot .go{flex:1;font-size:clamp(22px,2.4vw,28px);min-height:66px}
.tray-foot .icon-btn{width:66px;height:66px}
.pop{position:fixed;z-index:40;display:flex;align-items:center;gap:10px;background:var(--white);border-radius:18px;padding:8px 8px 8px 12px;box-shadow:0 10px 30px #24212B40;animation:pop .25s both}
.pop-head{display:flex;align-items:center;gap:6px;font-size:20px}
.pop-head svg{width:44px;height:44px}
.pop .danger .ico,.pop .secondary .ico{width:22px;height:22px;display:inline-block;vertical-align:-4px}
.pop .icon-btn{width:48px;height:48px;min-height:48px;padding:12px}
.drag-ghost{position:fixed;left:0;top:0;width:80px;height:80px;z-index:60;pointer-events:none;filter:drop-shadow(0 8px 10px #24212B55);opacity:.92}
.toast{position:fixed;left:50%;bottom:28px;z-index:70;transform:translate(-50%,40px);opacity:0;display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:18px;padding:10px 18px;font-size:22px;font-weight:800;transition:.25s;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast svg{width:34px;height:34px}
/* 10년 보내기 연출 */
.timelapse .tray,.timelapse .topbar button{pointer-events:none}
.timelapse .tray{opacity:.6}
.year-roll{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;white-space:nowrap;font-family:'Black Han Sans',sans-serif;font-size:clamp(64px,9vw,110px);color:var(--white);-webkit-text-stroke:3px var(--ink);text-shadow:0 6px 0 var(--ink);display:flex;gap:18px;pointer-events:none}
.year-roll .gain{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:.55em;background:var(--white);-webkit-text-stroke:0;color:var(--ink);text-shadow:none;border-radius:20px;padding:6px 18px;box-shadow:var(--shadow)}
.year-roll .gain .ico{width:46px;height:46px}
.coin-chip{position:absolute;left:50%;top:10%;z-index:4;display:flex;align-items:center;gap:2px;transform:translateX(-50%);background:var(--white);border-radius:12px;padding:2px 8px;font-size:16px;font-weight:900;box-shadow:0 2px 6px #24212B40;animation:rise 1.4s ease-out both;pointer-events:none}
.coin-chip .ico{width:18px;height:18px}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-46px)}}

/* ───── 레이어(사건·안내·메뉴) ───── */
#layer{position:fixed;inset:0;z-index:45}
.backdrop{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:#24212B70;backdrop-filter:blur(5px);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{width:min(720px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--paper);border-radius:28px;padding:24px;box-shadow:0 20px 50px #24212B55;animation:pop .35s both}
.event{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ev-tag{display:flex;align-items:center;gap:6px;background:var(--ink);color:#fff;border-radius:12px;padding:4px 14px;font-size:20px;font-weight:900}
.ev-tag .ico{width:24px;height:24px}
.problem .ev-tag{background:var(--danger)}
.bubble{position:relative;background:var(--white);border-radius:24px;padding:16px 22px;font-size:clamp(26px,3vw,32px);font-weight:900;line-height:1.3;box-shadow:var(--shadow)}
.bubble:after{content:'';position:absolute;left:50%;bottom:-14px;margin-left:-14px;border:14px solid transparent;border-top-color:var(--white);border-bottom:0}
.ev-card{width:min(230px,50vw);background:var(--white);border-radius:20px;padding:8px 8px 6px;box-shadow:var(--shadow)}
.ev-portrait{border-radius:14px;overflow:hidden;aspect-ratio:300/320}
.ev-portrait svg{height:auto}
.ev-name{display:block;font-size:20px;margin-top:4px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.choice{font-size:clamp(22px,2.6vw,28px);min-height:72px}
.choice.picked{background:var(--role);color:#fff}
.fx-out{display:flex;gap:10px;justify-content:center;min-height:44px}
.fx-out .fx{font-size:24px;padding:4px 10px;border-radius:12px;animation:pop .4s both}
.fx-out .fx .ico{width:32px;height:32px}
.hist{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.hist-tag{background:var(--gold);border-radius:12px;padding:4px 14px;font-weight:900;font-size:22px}
.hist h3{font-family:'Black Han Sans',sans-serif;font-size:44px}
.hist-row{display:flex;align-items:center;gap:16px;text-align:left;background:var(--white);border-radius:20px;padding:12px 18px}
.hist-ico{width:96px;height:96px;flex:none}
.hist-row p{font-size:clamp(22px,2.6vw,28px);font-weight:700;line-height:1.35}
.hist-me{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;font-size:26px;border-radius:16px;padding:8px 16px}
.hist-me>b{white-space:nowrap}
.hist-me .ico{width:34px;height:34px}
.hist-me.yes{background:#DDF3E6}.hist-me.no{background:#EFE7D8}
.mine{display:flex;gap:2px}
.mine svg{width:44px;height:44px}
.tut,.menu{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.tut h2{font-size:clamp(34px,4vw,46px)}
.tut-art{display:flex;align-items:center;justify-content:center;gap:12px;height:150px}
.tut-art>svg{width:120px;height:120px}
.tut-tile{position:relative;width:130px;height:130px;border-radius:14px;overflow:visible}
.tut-tile>svg{position:absolute;inset:0;border-radius:14px}
.tut-tile .b{position:absolute;inset:6%}
.tut-tile .b .smoke{display:block}
.tut-arrow{width:40px;height:40px;animation:nudge 1s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
.dots{display:flex;gap:8px}
.dots i{width:12px;height:12px;border-radius:50%;background:#D8CDB8}
.dots i.on{background:var(--role)}
.menu{min-width:min(420px,80vw)}
.menu h2{font-size:42px}
.menu>button{width:100%}
.menu .ico,.menu svg{width:26px;height:26px;display:inline-block;vertical-align:-5px}
.confirm{width:100%;display:flex;flex-direction:column;gap:10px;background:var(--white);border-radius:18px;padding:16px}

/* ───── 엔딩 ───── */
.ending-page{width:min(1080px,100%);margin:0 auto;padding:22px 18px 60px;position:relative}
.final-paper h2{font-size:clamp(56px,8vw,96px);text-align:center;margin:8px 0}
.final-paper.legend{border-top-color:#C99A1E;box-shadow:0 0 0 6px var(--gold),var(--shadow)}
.final-paper.legend h2{color:#B07F0C}
.story{text-align:center;font-size:clamp(24px,2.8vw,30px);font-weight:800;margin-bottom:14px}
.new-stamp{position:absolute;top:18px;right:22px;border:4px solid var(--danger);color:var(--danger);font-weight:900;font-size:26px;padding:2px 10px;border-radius:8px;transform:rotate(10deg)}
.final-body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.final-map .map{--tile:clamp(30px,5vw,56px)}
.final-side{display:flex;flex-direction:column;gap:14px}
.hist-score{display:flex;align-items:center;gap:10px;font-size:24px;background:#FFF3C7;border-radius:16px;padding:10px 16px}
.hist-score .ico{width:40px;height:40px}
.hist-score b{font-size:30px}
.note{display:flex;gap:12px;align-items:flex-start;border:3px solid var(--ink);border-radius:18px;padding:14px 18px;margin:16px 0}
.note>svg{width:40px;height:40px;flex:none}
.note p{font-size:clamp(20px,2.2vw,24px);font-weight:700}
.note .sub{color:var(--soft);font-weight:600}
.earned{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.badge-chip{display:flex;align-items:center;gap:6px;background:var(--gold);border-radius:14px;padding:6px 14px;font-size:22px;font-weight:900}
.badge-chip .ico{width:26px;height:26px}
.end-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.papers-title{font-family:'Black Han Sans',sans-serif;font-size:36px;margin:30px 0 12px;text-align:center}
.papers{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.mini-paper{position:relative;background:#FFFDF8;border-top:5px solid var(--ink);border-radius:4px;padding:10px 12px;box-shadow:0 4px 12px #24212B1A}
.mini-mast{font-family:'Nanum Myeongjo',serif;font-weight:800;font-size:18px;border-bottom:2px double var(--ink);padding-bottom:4px;margin-bottom:6px}
.mini-paper h4{font-family:'Black Han Sans',sans-serif;font-size:24px;margin-bottom:6px}
.mini-built{display:flex;flex-wrap:wrap;gap:2px;min-height:48px}
.mini-built svg{width:46px;height:46px}
.mini-built .empty{font-size:28px;color:var(--soft)}
.mini-g{display:grid;gap:4px;margin-top:6px}
.bar{display:block;height:9px;background:#EDE5D6;border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px}
.bar[data-g=econ] i{background:#D6A332}.bar[data-g=life] i{background:#F2994A}.bar[data-g=env] i{background:#2E9E6B}.bar[data-g=fair] i{background:#7B52D3}
.mini-match{position:absolute;top:8px;right:8px;width:30px;height:30px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.confetti i{position:absolute;top:-20px;left:calc(var(--x) * 1%);width:12px;height:18px;background:var(--c);border-radius:3px;animation:fall 3.6s linear infinite;animation-delay:var(--d)}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* ───── 엔딩 도감 ───── */
.screen-endings{padding:max(18px,env(safe-area-inset-top)) 22px 40px;max-width:1120px;margin:0 auto}
.ending-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.end-card{background:#FFFDF8;border-top:6px solid var(--ink);border-radius:6px;padding:12px 14px 16px;box-shadow:0 4px 14px #24212B1A;text-align:center;min-height:210px;display:flex;flex-direction:column;align-items:center;gap:8px}
.end-card.legend{border-top-color:#C99A1E}
.end-card h3{font-family:'Black Han Sans',sans-serif;font-size:30px}
.end-card p{font-size:19px;line-height:1.35}
.end-ico{width:64px;height:64px}
.end-ico.q{display:grid;place-items:center;font-family:'Black Han Sans',sans-serif;font-size:64px;color:#B9AE99}
.end-card.locked{background:#EFE7D8}
.hint{color:var(--soft)}
.badge-title{font-size:36px;margin:28px 0 12px}
.badge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bdg{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:#FFF3C7;border:4px double #C99A1E;border-radius:22px;padding:14px}
.bdg .ico{width:48px;height:48px}
.bdg h3{font-size:24px}.bdg p{font-size:18px;color:var(--soft)}
.bdg.locked{background:#EFE7D8;border-color:#B9AE99;filter:grayscale(1)}
.debug{position:fixed;left:6px;bottom:6px;z-index:80;display:flex;gap:6px;align-items:center;font-size:14px;background:#FFFDF8EE;border:1px dashed #555;border-radius:8px;padding:3px 6px;opacity:.5}
.debug:hover{opacity:1}.debug button{font-size:14px;min-height:30px;padding:3px 8px;border-radius:6px}

/* ───── 세로 화면(태블릿 세로) ───── */
@media (orientation:portrait){
  .main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .tray{grid-template-rows:auto auto}
  .cards{display:flex;overflow-x:auto;overflow-y:hidden;align-items:flex-start;padding-bottom:8px}
  .card{flex:0 0 150px;height:auto;touch-action:pan-x}
  .paper-body,.final-body{grid-template-columns:1fr}
  .ending-grid,.badge-row{grid-template-columns:repeat(2,1fr)}
}
/* ───── 작은 화면(휴대폰) ───── */
@media (max-width:700px){
  .build{height:auto;min-height:100dvh;overflow:visible}
  .main{grid-template-rows:auto auto}
  .map-wrap{height:min(78vw,420px)}
  .gauges{gap:6px;flex-wrap:wrap}
  .gauge{padding:4px 8px 4px 4px}.g-icon{width:36px;height:36px}.g-label{font-size:18px}.g-num{font-size:18px}
  .topbar{flex-wrap:wrap;row-gap:8px}.decade{flex:1 1 calc(100% - 80px)}.res{width:100%;justify-content:space-between}.decade strong{font-size:28px}.timeline i{width:11px;height:11px}
  .res-item{font-size:20px;padding:4px 10px;min-height:44px}.res-item .ico{width:24px;height:24px}.slot .ico{width:20px;height:20px}
  .tray{min-height:250px}
  .ending-grid,.badge-row{grid-template-columns:1fr}
  .choices{grid-template-columns:1fr}
  .paper{padding:16px}
}
/* 바람개비·물결 */
.spin{animation:spin 3.2s linear infinite;transform-box:view-box}
@keyframes spin{to{transform:rotate(360deg)}}
.waves{animation:waves 3.6s ease-in-out infinite alternate}
@keyframes waves{to{transform:translateX(8px)}}
.map.mini .spin,.map.mini .waves{animation:none}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* 공용 구아슈: SVG는 그림이 도착할 때까지 같은 자리에 남깁니다. */
.paint{position:relative;display:block;width:100%;height:100%;overflow:hidden;isolation:isolate}
.paint-fallback{display:block;width:100%;height:100%;transition-property:none}
.paint>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition-property:none}
.paint-person>img{object-fit:cover;object-position:center top}
.paint.loaded>.paint-fallback{visibility:hidden}
.paint.loaded>img{opacity:1}

.ev-portrait>.paint{aspect-ratio:300/320!important}
.paper-map,.final-map{min-width:0}
.paper-map>.paint,.final-map>.paint{height:auto;aspect-ratio:3/2}
/* 그림이 없어도 원래 6행 SVG 지도 아래가 잘리지 않게 합니다. */
.final-map>.paint{min-height:calc(clamp(30px,5vw,56px) * 6 + 18px)}
.final-body:has(.paint){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.mini-photo{aspect-ratio:3/2;border-radius:6px;overflow:hidden;margin-bottom:6px}
.end-photo{width:min(220px,100%);aspect-ratio:3/2;border-radius:8px;overflow:hidden}
.end-photo .paint-fallback{display:grid;place-items:center}
.end-photo .paint-fallback>.ico{width:64px;height:64px}
@media(orientation:portrait){.final-body:has(.paint){grid-template-columns:1fr}}
@media (max-width:700px){.new-stamp{top:-14px;right:-8px;font-size:18px}}
.title-guide{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;font-size:18px;font-weight:700;line-height:1.4;color:var(--ink);background:#FFFDF8;border:2px solid currentColor;border-radius:14px;text-decoration:none;touch-action:manipulation}.title-guide:hover{filter:brightness(.96)}.title-guide:focus-visible{outline:3px solid currentColor;outline-offset:4px}

/* 숫자 안내는 건설 카드와 같은 자리에, 긴 설명은 패널 안에서 읽는다. */
.tray{grid-template-rows:auto auto minmax(0,1fr) auto}
.forecast{display:flex;align-items:center;justify-content:center;gap:4px;font-size:18px;font-weight:800;flex-wrap:wrap}
.forecast .ico{width:22px;height:22px}
.building-info{max-height:160px;overflow:auto;background:var(--white);border-radius:12px;padding:10px;font-size:18px;line-height:1.45}
.info-lines p{margin:4px 0;font-size:18px;line-height:1.45}
.info-lines .ico,.help p .ico{display:inline-block;width:22px;height:22px;vertical-align:-4px;margin-right:4px}
.info-hint{font-size:18px;text-align:center;color:var(--soft)}
.tech-label{font-size:18px}
.help{display:grid;gap:18px;text-align:left}
.help h2{font-size:34px}.help p{font-size:22px;line-height:1.5}.help .help-note{font-size:18px;color:var(--soft)}
.pop{display:block;width:min(350px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto}
.pop-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.pop-head{margin-bottom:8px}
.export-preview{position:absolute;bottom:3px;left:2px;right:2px;z-index:3;font-size:18px;font-weight:900;background:#FFFDF8EA;border-radius:6px;pointer-events:none;white-space:nowrap}
.hist-me.no{background:#E2EBEF;color:#416778}.mini-match.no{background:#E2EBEF;border-radius:50%}
.map-wrap{background:linear-gradient(#CBE6F4,#EAF6F8);border-radius:18px;isolation:isolate}
.sky-haze{position:absolute;inset:0;background:linear-gradient(#8E929C88,#B0AAA344);border-radius:18px;opacity:var(--haze);z-index:3;pointer-events:none}
.water-haze{position:absolute;inset:0;border-radius:inherit;background:#8C9290;opacity:var(--haze);pointer-events:none}
.sea-boat{position:absolute;inset:0;pointer-events:none;animation:sail 16s ease-in-out infinite alternate}
.traffic{animation:drive 12s ease-in-out infinite alternate;transform-box:view-box}
.park-trees{transform-origin:50% 90%;transform-box:view-box}
.scaffold{display:none;position:absolute;inset:0;pointer-events:none}
.tile .b.smoky .smoke{opacity:var(--smoke-opacity)}
.smoke .puff{animation-duration:7s}.smoke .p1{animation-delay:2.3s}.smoke .p2{animation-delay:4.6s}
.city-running .smoke .puff{animation-duration:1.8s}.city-running .smoke .p1{animation-delay:.6s}.city-running .smoke .p2{animation-delay:1.2s}
.city-running .traffic{animation-duration:1.2s}.city-running .sea-boat{animation-duration:1.5s}
.city-running .now .b{transform-origin:50% 90%;animation:finish-building 1.4s ease-out both}
.city-running .now .scaffold{display:block;animation:remove-scaffold 1.4s linear both}
.city-running .bld-park .park-trees{animation:tree-grow 1.4s ease-out both}
.map.mini .traffic,.map.mini .sea-boat{animation:none}
@keyframes finish-building{from{transform:scaleY(.18);opacity:.55}to{transform:scaleY(1);opacity:1}}
@keyframes remove-scaffold{0%,65%{opacity:1}100%{opacity:0}}
@keyframes tree-grow{from{transform:scale(.65)}to{transform:scale(1)}}
@keyframes drive{to{transform:translateX(12px)}}
@keyframes sail{to{transform:translateX(14px) translateY(-3px)}}
@media(orientation:portrait){.tray{grid-template-rows:auto auto auto auto}.building-info{max-height:110px}.cards{max-height:178px}}
@media(max-width:700px){.building-info{max-height:150px}.forecast{font-size:18px}.res-item{min-height:48px}.gauge{min-height:48px}.tech-label{font-size:18px}}
@media(prefers-reduced-motion:reduce){.city-running .now .b,.city-running .park-trees{animation:none;transform:none}.city-running .scaffold{display:none}.traffic,.sea-boat{animation:none}.smoke{display:none}.sky-haze,.water-haze{transition:none!important}}