@font-face{font-family:Fraunces;font-weight:900;src:url(fonts/fraunces-latin-900-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+2000-206F}
@font-face{font-family:Fraunces;font-weight:900;src:url(fonts/fraunces-latin-ext-900-normal.woff2) format('woff2');unicode-range:U+0100-024F}
@font-face{font-family:Oswald;font-weight:600;src:url(fonts/oswald-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'DM Serif Display';src:url(fonts/dm-serif-display-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Abril Fatface';src:url(fonts/abril-fatface-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Serif KR';font-weight:900;src:url(fonts/noto-serif-kr-korean-900-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Sans KR';font-weight:700;src:url(fonts/noto-sans-kr-korean-700-normal.woff2) format('woff2')}
@font-face{font-family:'Song Myung';src:url(fonts/song-myung-korean-400-normal.woff2) format('woff2')}

:root{--cream:#FFF4DC;--paper:#FBF5E8;--green:#1F4D3A;--ink:#173D2E;--orange:#F28B1E;--soft:#8a7d66;--line:#E6D9BE;--fruit:#F28B1E}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--cream);color:var(--ink);font-family:'Noto Sans KR',system-ui,-apple-system,sans-serif;overscroll-behavior:none}
body{position:fixed;inset:0;overflow:hidden;user-select:none;-webkit-user-select:none}
#app{position:absolute;inset:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.screen.on{display:flex}
button{font:inherit;font-weight:700;font-size:17px;border:3px solid var(--ink);background:#fff;color:var(--ink);border-radius:14px;padding:12px 18px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
button.primary{background:var(--orange);color:#fff}
button.ghost{border:none;box-shadow:none;background:none;padding:8px 6px}
button small{font-size:12px;color:var(--soft);font-weight:700;margin-left:4px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.bar h2{margin:0;font:900 22px Fraunces,'Noto Serif KR',serif}
.tot{font-weight:700;color:var(--soft);font-size:14px;min-width:60px;text-align:right}

/* 첫 화면 */
#title .logo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:0}
#title .mark svg{width:min(62vw,300px);height:auto;display:block}
#title .wordwrap svg{width:min(78vw,380px);height:auto;display:block}
#title .kr{font:900 26px 'Noto Serif KR',serif;letter-spacing:.35em;padding-left:.35em;color:var(--green)}
#title .kr b{color:var(--orange)}
.menu{display:flex;flex-direction:column;gap:10px;width:min(100%,360px);margin:0 auto 10px}
.foot{text-align:center;font-size:12px;color:var(--soft)}
.foot a{color:var(--soft)}

/* 지도 */
.list{overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px;padding:6px 0 20px}
.isle{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px 12px}
.isle.locked{opacity:.45}
.isle .nm b{display:block;font:900 22px Fraunces,serif}
.isle .nm span{font-size:12px;color:var(--soft)}
.isle .st{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.isle .st button{padding:8px 4px;font-size:13px;border-width:2px;box-shadow:0 2px 0 var(--ink);border-radius:10px}
.isle .st button i{display:block;font-style:normal;font-size:11px;color:var(--soft)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);vertical-align:-1px;margin-right:4px}
.grid20{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px 0;overflow:auto}
.grid20 button{aspect-ratio:1;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:900 22px Fraunces,serif}
.grid20 button.locked{opacity:.35}
.grid20 button .stars{font-size:12px}

/* 별 */
.stars{color:#E8A600;letter-spacing:1px;white-space:nowrap}
.stars .e{color:#e2d6bb}
.stars.large{font-size:40px;letter-spacing:4px}

/* 판 */
.bar.play .goal{text-align:center;line-height:1.1}
.bar.play .goal small{display:block;font-size:12px;color:var(--soft)}
.bar.play .goal b{font:900 26px Fraunces,'Noto Serif KR',serif}
.bar.play .pct{text-align:right;min-width:70px;line-height:1.1}
.bar.play .pct b{font:900 20px Fraunces,serif;display:block}
.bar.play .back{font-size:28px;min-width:40px}
.timer{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:6px 0 10px}
.timer i{display:block;height:100%;width:100%;background:var(--green);transform-origin:left}
.timer.low i{background:#E8453C}
.boardwrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;touch-action:none;min-height:0}
#board{display:grid;gap:var(--gap);touch-action:none;padding-top:calc(var(--ts)*.1)}
body{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.t{position:relative;width:var(--ts);height:var(--ts);border-radius:50%;background:radial-gradient(circle at 50% 56%,#FFFBF0 0 58%,var(--fruit) 60%);border:2px solid var(--ink);box-shadow:inset 0 calc(var(--ts)*-.06) 0 rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;padding-top:calc(var(--ts)*.08);box-sizing:border-box;font-size:calc(var(--ts)*.5);line-height:1;color:var(--ink);transition:transform .08s;user-select:none;-webkit-user-select:none}
.t::before{content:'';position:absolute;top:max(-6px,calc(var(--ts)*-.1));left:50%;width:max(13px,calc(var(--ts)*.3));height:max(10px,calc(var(--ts)*.17));background:#4E9A3A;border:1.5px solid var(--ink);border-radius:0 100% 0 100%;transform:rotate(-18deg);box-sizing:border-box}
.digits .t::before{display:none}
.t.sel{transform:scale(1.1);filter:brightness(1.08)}
.t.ok{transform:scale(1.12);background:radial-gradient(circle at 50% 56%,#E4F6C8 0 58%,var(--fruit) 60%)}
.t.gone{visibility:hidden}
.t.pop{animation:pop .28s ease-out forwards}
@keyframes pop{to{transform:scale(1.5);opacity:0}}
.t svg{width:62%;height:62%}
.f-Fraunces{font-family:Fraunces,serif;font-weight:900}
.f-Oswald{font-family:Oswald,sans-serif;font-weight:600}
.f-DMSerif{font-family:'DM Serif Display',serif}
.f-Abril{font-family:'Abril Fatface',serif}
.f-NotoSerifKR{font-family:'Noto Serif KR',serif;font-weight:900;font-size:calc(var(--ts)*.42)}
.f-NotoSansKR{font-family:'Noto Sans KR',sans-serif;font-weight:700;font-size:calc(var(--ts)*.42)}
.f-SongMyung{font-family:'Song Myung',serif;font-size:calc(var(--ts)*.46)}
.f-serif{font-family:'Noto Serif CJK KR','Noto Serif CJK JP','Songti SC','Hiragino Mincho ProN',serif;font-weight:700;font-size:calc(var(--ts)*.44)}
.f-sans-serif{font-family:'Noto Sans CJK KR','PingFang SC','Hiragino Sans',sans-serif;font-weight:700;font-size:calc(var(--ts)*.44)}
.f-cursive{font-family:'Kaiti SC','STKaiti','KaiTi',cursive,serif;font-size:calc(var(--ts)*.46)}
.n-roman{font-size:calc(var(--ts)*.42)}
#box{position:absolute;border:3px solid var(--orange);background:rgba(242,139,30,.14);border-radius:999px;pointer-events:none;display:none;box-sizing:border-box}
#box.ok{border-color:#3E8E4A;background:rgba(62,142,74,.15)}
#sumTag{position:absolute;pointer-events:none;display:none;background:var(--ink);color:#fff;font:900 18px Fraunces,serif;padding:4px 10px;border-radius:10px;transform:translate(-50%,-120%)}

/* 결과·모달 */
#result{align-items:center;justify-content:center}
.card{background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);padding:22px;width:min(100%,360px);text-align:center;display:flex;flex-direction:column;gap:10px}
.card .big{font:900 64px Fraunces,serif;line-height:1}
.card .row{display:flex;gap:10px}.card .row button{flex:1}
.card p{margin:4px 0;color:var(--soft)}
.modal{position:absolute;inset:0;background:rgba(23,61,46,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal[hidden]{display:none}
.modal h3{margin:0;font:900 26px 'Noto Serif KR',serif}
.digits{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;--ts:30px}
.digits .t{width:100%;height:auto;aspect-ratio:1;font-size:20px}
#toast{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;z-index:20;max-width:90%}

/* 가이드 */
.guide{overflow:auto;flex:1;padding-bottom:20px}
.how{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:14px 14px 14px 34px;line-height:1.6;margin:8px 0 16px}
.note{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:12px;margin-bottom:12px}
.note h4{margin:0 0 8px;font-size:16px;display:flex;justify-content:space-between}
.note h4 span{font-size:12px;color:var(--soft)}
.note .digits .t{font-size:18px}
.hint{color:var(--soft);text-align:center}

@media (orientation:landscape) and (min-width:700px){
  #title{flex-direction:row;align-items:center;gap:40px;padding:20px 40px}
  #title .bar{position:absolute;top:12px;right:20px;left:20px}
  #title .foot{position:absolute;bottom:12px;left:0;right:0}
}
.stars .h{background:linear-gradient(90deg,#E8A600 50%,#e2d6bb 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
#title .tag{margin:10px 0 0;font-size:14px;word-break:keep-all;font-weight:700;color:var(--soft);text-align:center}

/* 설정창 4탭 */
.gear{font-size:24px;line-height:1}
.tabs{display:flex;gap:6px;margin:4px 0 12px}
.tabs button{flex:1;padding:9px 4px;font-size:15px;border-width:2px;box-shadow:0 2px 0 var(--ink);border-radius:12px}
.tabs button.on{background:var(--green);color:#fff}
.pane{display:none;overflow:auto;flex:1;padding-bottom:20px}
.pane.on{display:block}
.row-set{display:flex;align-items:center;justify-content:space-between;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:12px 14px;margin-bottom:10px;font-weight:700}
.row-set small{color:var(--soft);font-weight:700;margin-left:6px}
.row-set button{padding:8px 14px;font-size:15px;border-width:2px;box-shadow:0 2px 0 var(--ink)}
.sw{width:58px;height:32px;padding:0!important;border-radius:20px!important;position:relative;background:var(--line)!important}
.sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--ink);transition:left .15s}
.sw[aria-pressed="true"]{background:var(--orange)!important}
.sw[aria-pressed="true"] i{left:27px}
.sub{margin:0 0 10px;font-weight:700;color:var(--soft)}
.more{display:flex;flex-direction:column;gap:10px}
.mi{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px 12px;color:var(--ink);text-decoration:none}
.mi img,.mi .ini{width:48px;height:48px;border-radius:12px;flex:none;object-fit:cover}
.mi .ini{display:flex;align-items:center;justify-content:center;background:var(--green);color:#fff;font:900 22px Fraunces,serif}
.mt{flex:1;min-width:0;display:flex;flex-direction:column}
.mt b{font-size:16px}.mt b small{color:var(--soft);font-size:12px}
.mt em{font-style:normal;font-size:13px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi .go{font-weight:700;font-size:14px;background:var(--orange);color:#fff;border-radius:10px;padding:6px 12px}
.about{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding-top:6px}
.about .amark svg{width:160px;height:auto}
.about b{font:900 22px 'Noto Serif KR',serif}
.about span{color:var(--soft);font-weight:700}
.about p{line-height:1.6;margin:10px 0 0}
.about a{color:var(--green)}
.about small{color:var(--soft);margin-top:12px}
.hint,.how,.about p{word-break:keep-all}
.hint a{color:var(--green);font-weight:700}