/* 시작 화면 — 게임 본편과 같은 UI 톤 (분홍·크림 하늘, 먹색 외곽선, 둥근 버튼, 한지 카드) */
html.notitle #title{display:none}
#title{position:fixed;inset:0;z-index:80;overflow:hidden;background:linear-gradient(#ffc8d8,#ffe6e0 55%,#fff4e2);font-family:'Jua','Gowun Dodum',sans-serif;color:var(--ink);transition:opacity .6s}
#title.out{opacity:0;pointer-events:none}
#title .tcv{position:absolute;inset:0;width:100%;height:100%}
#title .tvig{display:none}
.twrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:clamp(8px,2vh,18px);padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));overflow:auto}
.tlogo{text-align:center;flex:none}
.tbell{font-size:clamp(30px,6vh,52px);line-height:1;animation:tbell 2.4s ease-in-out infinite;transform-origin:50% 0}
@keyframes tbell{0%,100%{transform:rotate(0)}20%{transform:rotate(12deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}}
@font-face{font-family:"JoseonBrush";src:url(../fonts/joseon-brush/joseon.woff) format("woff");font-display:swap}
.tl1{font-family:"JoseonBrush","Jua",sans-serif;font-size:clamp(64px,15vh,128px);line-height:1;color:#fff8e6;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink),0 10px 0 rgba(42,26,18,.2),0 0 22px rgba(255,120,150,.55);letter-spacing:.02em;transform:rotate(-2deg);transform-origin:50% 60%}
.tl2{display:inline-block;margin-top:clamp(8px,1.6vh,12px);padding:3px 14px;background:var(--paper);border:2.5px solid var(--ink);border-radius:999px;box-shadow:0 3px 0 var(--ink);font-size:clamp(13px,2.2vh,17px)}
.tsplash{display:none}
.tpanel{position:relative;width:min(520px,100%);flex:none;padding:16px 18px 16px;background:var(--paper);border:3px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 var(--ink),0 14px 28px rgba(42,26,18,.18)}
.tpanel.p2{width:min(820px,100%)}
.tpanel h2{margin:0 0 6px;text-align:center;font-weight:400;font-size:clamp(20px,3.4vh,26px)}
.tsub{margin:-2px 0 10px;text-align:center;font-size:13px;color:var(--ink2);font-family:'Gowun Dodum',sans-serif}
.tnote{margin:12px 4px 0;text-align:center;font-size:12px;line-height:1.5;color:var(--ink2);font-family:'Gowun Dodum',sans-serif}
.twarn{margin:4px 0 8px;padding:8px 12px;background:#ffe3df;border:2.5px solid var(--red);border-radius:14px;color:#9a2a22;font-size:12.5px;line-height:1.45;font-family:'Gowun Dodum',sans-serif}
.tload2{text-align:center;padding:26px 0;color:var(--ink2)}
.tlbl{display:block;margin:10px 2px 6px;font-size:15px}
.trow{display:flex;gap:8px;align-items:stretch;justify-content:center}
#title input{flex:1;min-width:0;height:46px;padding:0 14px;font:inherit;font-size:18px;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:14px;outline:none;font-family:'Gowun Dodum',sans-serif}
#title input:focus{border-color:var(--red);box-shadow:0 0 0 3px #ffd9d4}
#title input::placeholder{color:#a99888;font-size:14px}
#title .tb{font-family:'Jua';font-size:17px;min-height:44px;padding:0 20px;color:var(--ink);cursor:pointer;background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink);white-space:nowrap;-webkit-tap-highlight-color:transparent}
#title .tb:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
#title .tb.sm{font-size:15px;padding:0 14px;min-height:42px}#title .tb.big{width:100%;margin-top:14px;font-size:20px;min-height:52px}
#title .tb.go{background:var(--red);color:#fff}
#title .tb.on{background:var(--yellow)}
.tbtns{display:flex;gap:8px;justify-content:center;align-items:stretch;margin-top:14px;flex-wrap:wrap}.tbtns .go{flex:1;min-width:150px}
.tlang{display:flex;justify-content:center;margin:2px auto 4px;background:#f1e4cc;border:2.5px solid var(--ink);border-radius:999px;padding:3px;gap:3px;width:max-content}
.tlang button{font-size:15px;min-width:54px;padding:5px 0;background:transparent;border-radius:999px;color:var(--ink)}
.tlang button.on{background:var(--red);color:#fff;box-shadow:0 2px 0 var(--ink)}
/* 서버 목록 — 본편 멀티 패널의 .room 카드와 같은 모양 */
.slist{display:flex;flex-direction:column;gap:7px;max-height:min(46vh,340px);overflow:auto;padding:2px 3px 6px;-webkit-overflow-scrolling:touch}
.srow{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;text-align:left;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 3px 0 var(--ink);cursor:pointer}
.srow:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.srow.on{background:#ffe3df;border-color:var(--red);box-shadow:0 3px 0 var(--red)}
.srow.full{opacity:.5;cursor:not-allowed}
.sico{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;font-style:normal;font-size:17px;background:var(--pink);border:2.5px solid var(--ink);border-radius:50%}
.srow.on .sico{background:var(--red);color:#fff}
.snm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}.snm b{font-weight:400;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.snm small{font-size:12px;color:var(--ink2);font-family:'Gowun Dodum',sans-serif}
.sbar{display:flex;gap:2px;flex:none}.sbar em{width:7px;height:14px;background:#efe3cf;border-radius:3px}
.sbar em.f.s0{background:#7fd0a0}.sbar em.f.s1{background:#f1cc4a}.sbar em.f.s2{background:#f4994a}.sbar em.f.s3{background:#e2574c}
.sst{flex:none;min-width:48px;text-align:center;font-size:13px;padding:2px 8px;border:2px solid var(--ink);border-radius:999px;background:#eee}
.sst.s0{background:#c9f0d8}.sst.s1{background:#fff0b3}.sst.s2{background:#ffd9b5}.sst.s3{background:#ffc9c2}
@media (max-width:520px){.sbar em{width:5px}.sst{min-width:40px}}
/* 캐릭터 선택 */
.cbody{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;align-content:start;padding:2px}
.ccard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1/.92;padding:4px;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 3px 0 var(--ink);cursor:pointer}
.ccard i{font-style:normal;font-size:clamp(20px,3.8vh,28px);line-height:1}.ccard b{font-weight:400;font-size:clamp(11px,1.7vh,13px);text-align:center;line-height:1.15}
.ccard.on{background:#ffe3df;border-color:var(--red);box-shadow:0 3px 0 var(--red)}
.cview{display:flex;flex-direction:column;gap:10px;min-width:0}
.cstage{position:relative;height:clamp(180px,34vh,290px);background:linear-gradient(#ffe0ea,#fff1e0 64%,#cfe8c9 64%,#b5dca9);border:2.5px solid var(--ink);border-radius:20px;overflow:hidden}
.cstage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.chint{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:11px;color:var(--ink2);pointer-events:none;font-family:'Gowun Dodum',sans-serif}
.cinfo{background:#fff4dc;border:2.5px solid var(--ink);border-radius:18px;padding:9px 12px}
.cinfo h3{margin:0;font-weight:400;font-size:19px}.cinfo p{margin:2px 0 6px;font-size:13px;line-height:1.4;color:var(--ink2);min-height:2.8em;font-family:'Gowun Dodum',sans-serif}
.cstat{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:13px}.cstat span{width:34px}.cstat b{width:30px;text-align:right;font-weight:400}
.bar{flex:1;height:12px;background:#fff;border:2px solid var(--ink);border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;border-radius:999px}.bar .hp{background:#ff5b6e}.bar .mp{background:#4c9bff}
.cinfo .trow{margin-top:8px;justify-content:flex-start}
.tfoot{display:none}
@media (max-width:640px){.cbody{grid-template-columns:1fr}.cstage{height:clamp(150px,26vh,220px)}}
#title[data-step="2"] .tl2{display:none}
@media (max-height:520px){#title:not([data-step="0"]) .tlogo{display:none}.ccard{aspect-ratio:auto;height:48px;flex-direction:row;gap:4px;padding:2px}.ccard i{font-size:19px}.ccard b{font-size:11px}.cstage{height:112px}.cinfo{padding:4px 10px}.cinfo h3{font-size:16px}.cinfo p{margin:0 0 2px;font-size:12px;min-height:0}.cstat{margin:1px 0}.cinfo .trow{margin-top:4px}.tbtns{margin-top:8px}#title .tb{min-height:38px}.tnote{display:none}.tpanel{padding:10px 14px}.tpanel h2{font-size:18px;margin:0 0 4px}.slist{max-height:56vh}#title .tpanel.p0 .tb.big{margin-top:8px;min-height:44px}.tlbl{margin-top:4px}.tl1{font-size:36px}.tbell{font-size:26px}}

.ccard{aspect-ratio:auto;gap:0;padding:3px 3px 5px}
.ccard i{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:200/230;font-size:26px}
.ccard i img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
@media (max-height:520px){.ccard{height:auto;flex-direction:column}.ccard i{width:46px;aspect-ratio:auto;height:50px}.ccard b{font-size:10px}.cgrid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:640px) and (min-height:521px){.cgrid{grid-template-columns:repeat(4,1fr)}}

/* 캐릭터 선택: 옷 색 · 표정 고르기 */
.clook{display:flex;align-items:center;gap:8px;margin:6px 0}
.clook .cl-t{min-width:48px;font-size:14px;opacity:.85}
.clook .cl-b{display:flex;gap:5px}
.clook .cl{font:inherit;font-size:13px;width:30px;height:30px;border-radius:50%;border:2.5px solid #3b2a24;background:#fffaf0;color:#3b2a24;cursor:pointer;box-shadow:0 2px 0 #3b2a24;padding:0}
.clook .cl.on{background:#ffd0d6;transform:translateY(1px);box-shadow:0 1px 0 #3b2a24}