/* ===== 나무와 양피지 스킨 (kit1/kit2 에서 잘라낸 요소 사용) ===== */
:root{--ink:#f6e9cf;--dim:#d8bf96;--gold:#ffd27a;--grn:#c2ea7c;--red:#ffa184;--cy:#ffe0a0;--bg:#1d1512;--pn:#6b3f28;--ln:#3a2418}
html,body{background:#0f0a08}
#app{background:#1d1512}
.pn,.b,.tile,.hud,.ebox,.pbox{image-rendering:pixelated}
/* 패널: 쇠 모서리 나무판 */
.pn{background:none;box-shadow:none;border:30px solid transparent;border-image:url(art/ui/k_panel.png) 24 fill/30px stretch;padding:0;margin:0 6px}
.pn:before,.pn:after{display:none}
.card.pn{border-width:26px;border-image-width:26px;margin:0}
/* 이야기 글 상자: 양피지 */
.pn.txt{border-width:30px 18px;border-image:url(art/ui/k_scroll.png) 16 9 fill/30px 18px stretch;color:#3b2616;padding:2px 4px}
.txt h3{color:#8a2f1c}.txt .gn{color:#2f6f2a}.txt .gn.gold,.txt .gold{color:#96650c}.txt .ls,.txt .bad{color:#a8321e}.txt .good{color:#2f6f2a}.txt .dim{color:#7a5a3a}.txt .gn small{color:#7a5a3a}
/* 제목과 정보 줄: 명판 */
.pn.head,.pn.skinfo{border-width:14px 16px;border-image:url(art/ui/k_plaque.png) 8 fill/14px 16px stretch;padding:0}
.skinfo{min-height:0!important;border-left-width:16px!important}.skinfo.k-atk b{color:#ffb39a}.skinfo.k-def b{color:#bfeeb0}.skinfo.k-buf b{color:#e6c4ff}
.hud{background:none;border:10px solid transparent;border-image:url(art/ui/k_plaque.png) 8 fill/12px stretch;padding:0 2px!important}
.hud .face{background:#241812;border-color:#3a2418}
.ebox,.pbox{background:none;border:9px solid transparent;border-image:url(art/ui/k_plaque.png) 8 fill/10px stretch;padding:0 1px}
/* 버튼 */
.b{background:none;box-shadow:none;border:14px solid transparent;border-image:url(art/ui/k_btn.png) 7 fill/14px stretch;padding:0 4px;text-shadow:1px 1px 0 #2a1408}
.b.big{padding:2px 6px}.b.ch{padding-left:18px}.b.ch:before{left:0}
.b small{color:#ecd9b4;text-shadow:none}
.b:active,.b.ghost{border-image-source:url(art/ui/k_btn_dk.png)}
.b:disabled{border-image-source:url(art/ui/k_btn_dk.png);color:#9a8068;background:none;box-shadow:none}
.b.ghost{color:var(--dim);box-shadow:none;background:none}
.b.gold,.b.atk,.b.use{background:none;box-shadow:none;border-image-source:url(art/ui/k_btn_hi.png);color:#3b2616;text-shadow:none}
.b.gold small,.b.atk small{color:#6b4a2a}.b.atk.ch:before,.b.gold.ch:before{border-left-color:#a8321e}
.b.use{width:66px;padding:2px 0}.b.use:disabled{border-image-source:url(art/ui/k_btn_dk.png);color:#9a8068}
.b.rw{background:none;box-shadow:none}
.b .bad{color:#ffb39a}.b .good{color:#d3f29a}
/* 기술 칸 */
.tile{background:none!important;box-shadow:none;border:13px solid transparent;border-image:url(art/ui/k_frame.png) 11 fill/13px stretch;padding:0 0 1px;gap:1px}
.tile.sel{box-shadow:none;outline:3px solid var(--gold);outline-offset:-4px}
.tile.empty{border-style:solid;border-image-source:url(art/ui/k_frame2.png);opacity:.3}
.tile em{right:-9px;top:-11px;background:#241812;padding:0 3px;border:1px solid #6b3f28}
.tile .fr{left:-12px;top:-12px}
.tile.k-atk span{color:#ffc2ad}.tile.k-def span{color:#c6f0b8}.tile.k-buf span{color:#e9ccff}
.tile .cdn{top:0!important}
#app.fit .tile{padding:0 0 1px}
/* 기타 */
.nav{background:#2a1a12;border-top:3px solid #6b3f28}.nav button{color:#e6c78a}
.stage{border-color:#3a2418;border-top-color:#0f0a08}
.xbtn{background:url(art/ui/k_close.png) center/44px 44px no-repeat;box-shadow:none;color:transparent;width:46px;height:46px;image-rendering:pixelated}
#ov{background:rgba(15,10,8,.88)}
.rwi,.frame,.chip{background:#241812}.frame{border-color:#3a2418}
.stg{background:#2a1a12;border-color:#3a2418}.tr{border-bottom-color:#8a5a3a;color:#f0dfc0}.tr b{color:#fff3da}
h4{color:var(--gold);border-bottom-color:#8a5a3a}.lv i{background:#3a2418}
.log{color:#f0dfc0;border-bottom-color:#8a5a3a}.l-hit{color:#ffe08a}.l-dmg{color:#ffb39a}.l-good{color:#d3f29a}.l-bad{color:#f0c8ff}.l-turn{color:#c9a57a}.l-pmove{color:#bfe9ff}
.msg{background:none;padding:0 2px}.ask{color:#d8bf96}
.bar{background:#1a0f0a;border-color:#1a0f0a;outline-color:#8a5a36}
.pip{background:#3a2418}.pip.done{background:#c98a4a}
.foot{color:#8a6a4a}.row2{color:var(--dim)}
.tag{background:var(--gold)}
.mbox{font-size:13px}
/* 조정: 양피지 여백, 전투 화면 높이 */
.pn.txt{border-width:38px 26px 36px;border-image:url(art/ui/k_scroll.png) 17 10 fill/38px 26px 36px stretch;padding:0 2px}
#app.fit .msg{border-width:18px 20px;border-image-width:20px}
#app.fit .log{min-height:44px;padding-bottom:3px;margin-bottom:4px}
#app.fit .intent{min-height:34px}
#app.fit .skinfo{border-width:8px 14px;border-image-width:12px 16px;padding:0!important;min-height:0}
#app.fit .b.use{border-width:10px;border-image-width:12px;padding:0;width:58px}
#app.fit .hud{border-width:7px 10px;border-image-width:10px 12px}
#app.fit .tile{border-width:11px;border-image-width:12px;min-height:58px}
#app.fit{gap:4px}
#app.fit .ebox,#app.fit .pbox{border-width:7px 9px}
/* 체력바: UI 전용 도구로 만든 쇠 틀 (x_bar_c.png, 134x22) 안에 채움을 그린다 */
.bar{box-sizing:border-box;height:24px;background:none;outline:0;border:solid transparent;border-width:6px 13px 5px;border-image:url(art/ui/x_bar_c.png) 6 13 5 13 fill/6px 13px 5px 13px stretch;image-rendering:pixelated}
.bar i{box-shadow:inset 0 -3px 0 rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.35)}
.bar span{line-height:13px;font-size:10px}
.bar.ehp{width:auto;margin:0}
/* 세로로 긴 패널은 옆 테두리를 늘리지 않고 반복 */
.pn{border-image-repeat:stretch round}
.pn.txt,.pn.head,.pn.skinfo{border-image-repeat:stretch}
/* 나무 위 색 글자에 어두운 외곽선 */
.rwt b,.tr b,.card h3,.mbox h3,.fcard h3{text-shadow:1px 1px 0 #1a0f0a,-1px 0 0 #1a0f0a,0 -1px 0 #1a0f0a}
.txt b{text-shadow:none}
.txt .gn b{text-shadow:1px 1px 0 #3b2616,-1px 0 0 #3b2616,0 -1px 0 #3b2616}
/* 등급 표지: 제목의 외곽선이 물려 들어와 글자가 뭉개지던 것 수정 */
.tag,.tagb{text-shadow:none!important;font-size:11px;line-height:1.2;padding:2px 5px;color:#1a0f0a;vertical-align:3px}
/* 넓은 화면에서 창이 왼쪽으로 붙던 것 수정 */
.mbox.pn{margin:0 auto}
/* 세로 타이틀: 그림을 화면 전체에 깔고 로고와 버튼을 얹는다 */
#app:has(.tt){padding:0;gap:0}
.tt{position:relative;flex:1;min-height:100vh;min-height:100dvh;background-color:#0f0a08;background-size:cover;background-position:center 30%;image-rendering:pixelated;display:flex;flex-direction:column;overflow:hidden}
.tt:before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(15,10,8,.55) 0,rgba(15,10,8,0) 22%,rgba(15,10,8,0) 52%,rgba(15,10,8,.82) 78%,rgba(15,10,8,.95) 100%)}
.tt>*{position:relative}
.tt .logo{position:relative;top:auto;margin-top:7vh;font-size:44px;text-shadow:-2px 0 0 #1a0f0a,2px 0 0 #1a0f0a,0 -2px 0 #1a0f0a,0 2px 0 #1a0f0a,3px 5px 0 #a8321e,5px 8px 0 #1a0f0a}
.tt .sub{position:relative;top:auto;margin-top:8px;color:#f6e9cf}
.tbtn{margin-top:auto;padding:0 14px calc(10px + env(safe-area-inset-bottom))}
.tbtn .col{padding:0;gap:8px}.tbtn .b{text-align:center}.tbtn .b.big{padding:3px 6px}
.tbtn .foot{margin-top:8px;padding-bottom:4px;color:#c9a57a}
.tt .em{position:absolute;bottom:38%;width:3px;height:3px;background:#ffb04a;box-shadow:0 0 0 1px rgba(255,120,40,.5);opacity:0;animation:em 7s linear infinite}
@keyframes em{0%{transform:translate(0,0);opacity:0}10%{opacity:1}80%{opacity:.8}100%{transform:translate(18px,-52vh);opacity:0}}
.tt{background-image:none!important}
.tt .art{position:absolute;left:0;right:0;top:0;height:87%;background-size:cover;background-position:center bottom;image-rendering:pixelated}
.tt:before{z-index:1;background:linear-gradient(rgba(15,10,8,.6) 0,rgba(15,10,8,0) 20%,rgba(15,10,8,0) 76%,rgba(15,10,8,1) 87%)}
.tt>.logo,.tt>.sub,.tt>.tbtn{z-index:2}.tt .em{z-index:1}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.tbtn .grid2{gap:8px}.tbtn .b small{font-size:10px}
.tbtn .grid3 .b{font-size:12px;padding:0}
/* 로그인 화면 */
.loginbox{background:rgba(15,10,8,.78);padding:14px!important;text-align:center;color:#f6e9cf}
.loginbox p{margin:0 0 10px}.loginbox a.b{text-decoration:none;text-align:center}.loginbox .b{margin-top:8px}