:root {
  --pri: #2fa39a; --pri2: #6fcfc2; --pri-ink: #1d7a73; --pri-ink2: #237f6a; /* 흰 글자를 얹는 짙은 옥색 (대비 4.5:1 이상) */ --pink: #ff8fb1; --ink: #3a2f2a; --sub: #7a6e62; --bg: #fbf5e6;
  --good: #3fbf6f; --bad: #ff5d6c; --gold: #ffb62e; --glass: rgba(255, 255, 255, 0.82);
  --r: 18px; --fs: 1; --shadow: 0 8px 24px rgba(80, 55, 20, 0.18);
}
/* 글자 크기 설정 (설정 > 글자 크기) */
html.fs-big { --fs: 1.15; }
html.fs-huge { --fs: 1.3; }
html.fs-big #profileCard, html.fs-big #objective, html.fs-huge #profileCard, html.fs-huge #objective, html.fs-huge #menuBtns { --fs: 1.1; } /* 화면 위 고정 HUD는 좁아서 조금만 키움 */
body { font-size: calc(16px * var(--fs)); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #bfe6ff; color: var(--ink); font-family: 'Gowun Dodum', system-ui, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
h1, h2, h3, button, .logo, .jua { font-family: 'Jua', system-ui, sans-serif; font-weight: 400; }
input { font: inherit; user-select: text; -webkit-user-select: text; }
.hidden { display: none !important; }
#view { position: fixed; inset: 0; }
#view canvas { display: block; }

.btn { border: 0; border-radius: 14px; padding: 12px 18px; font-size: calc(17px * var(--fs)); cursor: pointer; background: #e4f4ef; color: var(--pri-ink); transition: transform .1s, filter .15s; }
@media (hover: hover) { .btn:hover { filter: brightness(1.05); } } .btn:active { transform: scale(.96); }
.btn.primary { background: linear-gradient(135deg, var(--pri-ink), var(--pri-ink2)); color: #fff; box-shadow: 0 6px 16px rgba(47, 163, 154, .35), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn.good { background: var(--good); color: #fff; } .btn.bad { background: var(--bad); color: #fff; }
.btn.small { padding: 7px 12px; font-size: calc(14px * var(--fs)); border-radius: 10px; }
.btn.big { width: 100%; font-size: calc(22px * var(--fs)); padding: 16px; margin-top: 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > .btn { flex: 1; }

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20;
  background: linear-gradient(180deg, rgba(251, 245, 230, .15), rgba(251, 245, 230, .55)), url('/assets/ui/login-bg.webp') center / cover no-repeat, #f6efe0; overflow-y: auto; }
.card { background: #fff; border-radius: 28px; padding: 28px; box-shadow: var(--shadow); width: 100%; max-width: 420px; }
.card.wide { max-width: 860px; max-height: calc(100vh - 32px); overflow-y: auto; }
.login-card input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px solid #e9dfc9; margin-bottom: 10px; font-size: calc(16px * var(--fs)); outline: none; }
.login-card input:focus { border-color: var(--pri2); }
.logo { font-size: 50px; text-align: center; color: var(--ink); letter-spacing: -1px; text-shadow: 0 3px 0 #efe3c8; }
/* 한지 카드: 결 무늬 + 오방색 띠 */
.login-card { position: relative; overflow: hidden; padding-top: 34px; border: 2px solid #eadfc6;
  background: radial-gradient(circle at 20% 30%, rgba(210, 190, 150, .10) 0 1px, transparent 2px) 0 0 / 9px 11px, radial-gradient(circle at 70% 60%, rgba(210, 190, 150, .08) 0 1px, transparent 2px) 0 0 / 13px 7px, #fbf5e6;
  box-shadow: 0 14px 40px rgba(80, 55, 20, .25); backdrop-filter: blur(2px); }
.obang { position: absolute; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(90deg, #3f6db5 0 20%, #e0625c 20% 40%, #f3c24b 40% 60%, #fbf5e6 60% 80%, #3a2f2a 80% 100%); }
.obang::after { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: repeating-linear-gradient(90deg, #2fa39a 0 14px, #45b88a 14px 28px); opacity: .85; }
.login-card .sub b { color: var(--pri); font-weight: 400; font-family: 'Jua'; }
.login-card .btn:not(.primary) { background: #fff; color: var(--pri-ink); border: 2px solid #cfe9e3; }
.logo b { color: var(--pri); font-weight: 400; }
.sub { text-align: center; color: var(--sub); margin: 4px 0 12px; }
.msg { color: var(--bad); min-height: 20px; text-align: center; margin: 10px 0 0; }
.tiny { font-size: calc(12px * var(--fs)); color: #b0a594; text-align: center; }
.preview-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 12px; min-height: 72px; }
.preview-row img { width: 72px; height: 72px; animation: bob 2s ease-in-out infinite; }
.preview-row img:nth-child(2) { animation-delay: .3s; } .preview-row img:nth-child(3) { animation-delay: .6s; } .preview-row img:nth-child(4) { animation-delay: .9s; }
@keyframes bob { 50% { transform: translateY(-6px); } }
h2 { margin: 6px 0 12px; font-size: calc(22px * var(--fs)); }
.grid6 { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick { border: 3px solid #f0ebff; border-radius: 18px; padding: 12px; text-align: center; cursor: pointer; background: #fff; transition: .15s; }
@media (hover: hover) { .pick:hover { border-color: var(--pri2); } }
.pick { position: relative; }
.pick.on { border-color: var(--pri); border-width: 4px; background: #e8f8f5; transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 18px rgba(47, 163, 154, .35); }
.pick.on::after { content: '✓'; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%; background: var(--pri); color: #fff; font: 700 18px/30px system-ui; box-shadow: 0 3px 8px rgba(0,0,0,.2); } /* 고른 카드가 한눈에 보이게 */
.pick:active { transform: scale(.97); }
.pick .t { font-family: 'Jua'; font-size: calc(19px * var(--fs)); } .pick .d { font-size: calc(12.5px * var(--fs)); color: var(--sub); margin-top: 4px; }
.pick img { width: 110px; height: 110px; }
.chip { display: inline-block; border-radius: 99px; padding: 2px 9px; font-size: calc(12px * var(--fs)); font-family: 'Jua'; color: #fff; margin: 1px; }

/* HUD */
.glass { background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--r); box-shadow: var(--shadow); }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }
#profileCard { position: absolute; left: 12px; top: 12px; padding: 10px 14px; min-width: 220px; }
#profileCard .nm { font-family: 'Jua'; font-size: calc(20px * var(--fs)); }
#profileCard .res { display: flex; gap: 12px; font-family: 'Jua'; margin-top: 4px; font-size: calc(15px * var(--fs)); }
#profileCard .badges { margin-top: 4px; font-size: calc(13px * var(--fs)); letter-spacing: 1px; }
#mapBox { position: absolute; right: 12px; top: 12px; padding: 8px; text-align: center; }
#minimap { width: 170px; height: 170px; border-radius: 12px; display: block; }
#zoneName { font-family: 'Jua'; font-size: calc(14px * var(--fs)); margin-top: 4px; }
#menuBtns { position: absolute; right: 12px; top: 232px; display: flex; flex-direction: column; gap: 6px; }
#menuBtns button { position: relative; width: 62px; height: 56px; border: 0; border-radius: 16px; background: var(--glass); box-shadow: var(--shadow); font-size: calc(22px * var(--fs)); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
#menuBtns button span { font-size: calc(11px * var(--fs)); margin-top: 3px; color: var(--sub); }
.dot { position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
#partyBar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 6px; }
.pslot { width: 68px; background: var(--glass); border-radius: 14px; padding: 4px; box-shadow: var(--shadow); text-align: center; cursor: pointer; position: relative; }
.pslot img { width: 56px; height: 56px; display: block; margin: 0 auto; }
.pslot.lead { outline: 3px solid var(--pri); }
.pslot .lv { position: absolute; top: 2px; left: 6px; font-family: 'Jua'; font-size: calc(12px * var(--fs)); }
.hpbar { height: 6px; border-radius: 3px; background: #e6e0f0; overflow: hidden; }
.hpbar > i { display: block; height: 100%; background: var(--good); transition: width .5s; }
.hpbar.mid > i { background: var(--gold); } .hpbar.low > i { background: var(--bad); }
.expbar > i { background: #58b7ff !important; }
#prompt { position: absolute; left: 50%; bottom: 110px; transform: translateX(-50%); background: rgba(58, 47, 42, .85); color: #fff; padding: 10px 18px; border-radius: 99px; font-family: 'Jua'; font-size: calc(17px * var(--fs)); cursor: pointer; white-space: nowrap; }
#prompt kbd { background: #fff; color: var(--ink); border-radius: 6px; padding: 1px 7px; margin-right: 6px; }
#chat { position: absolute; left: 12px; bottom: 12px; width: 320px; padding: 8px; }
#chatLog { height: 130px; overflow-y: auto; font-size: calc(13.5px * var(--fs)); line-height: 1.45; padding: 2px 4px; user-select: text; }
#chatLog b { color: var(--pri); }
#chatInput { width: 100%; border: 0; border-radius: 10px; padding: 8px 10px; margin-top: 6px; background: #fff; outline: none; }
#joy { position: absolute; left: 24px; bottom: 110px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, .35); border: 3px solid rgba(255, 255, 255, .7); }
#joyKnob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: rgba(47, 163, 154, .8); }
#actBtn { position: absolute; right: 24px; bottom: 120px; width: 78px; height: 78px; border-radius: 50%; border: 0; background: var(--pri-ink); color: #fff; font-size: 26px; font-family: 'Jua'; box-shadow: var(--shadow); }
#chatToggle { position: absolute; left: 12px; top: 120px; width: 46px; height: 46px; border: 0; border-radius: 14px; background: var(--glass); font-size: calc(20px * var(--fs)); }

/* 패널 */
#panel { position: fixed; inset: 0; background: rgba(40, 30, 20, .35); z-index: 30; display: flex; align-items: center; justify-content: center; padding: 12px; }
.panel-inner { background: var(--bg); border-radius: 26px; width: 100%; max-width: 760px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; }
.panel-inner header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: linear-gradient(135deg, var(--pri-ink), var(--pri-ink2)); color: #fff; box-shadow: inset 0 -5px 0 0 transparent; border-bottom: 5px solid; border-image: linear-gradient(90deg, #3f6db5 0 20%, #e0625c 20% 40%, #f3c24b 40% 60%, #fbf5e6 60% 80%, #3a2f2a 80% 100%) 1; }
.panel-inner h3 { margin: 0; font-size: calc(22px * var(--fs)); }
#panelClose { border: 0; background: rgba(255, 255, 255, .25); color: #fff; width: 36px; height: 36px; border-radius: 12px; font-size: calc(18px * var(--fs)); cursor: pointer; }
#panelBody { padding: 16px; overflow-y: auto; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs button { border: 0; border-radius: 99px; padding: 7px 14px; background: #e4f4ef; color: var(--pri); cursor: pointer; font-size: calc(15px * var(--fs)); }
.tabs button.on { background: var(--pri-ink); color: #fff; }
.list { display: grid; gap: 8px; }
.item { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 2px 8px rgba(80, 55, 20, .06); }
.item .ic { font-size: 28px; width: 44px; text-align: center; }
.item img { width: 56px; height: 56px; }
.item .grow { flex: 1; min-width: 0; }
.item .t { font-family: 'Jua'; font-size: calc(17px * var(--fs)); } .item .d { font-size: calc(13px * var(--fs)); color: var(--sub); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mcard { background: #fff; border-radius: 18px; padding: 10px; text-align: center; cursor: pointer; box-shadow: 0 2px 8px rgba(80, 55, 20, .06); position: relative; border: 3px solid transparent; }
.mcard.sel { border-color: var(--pri); }
.mcard img { width: 96px; height: 96px; }
.mcard .t { font-family: 'Jua'; font-size: calc(16px * var(--fs)); }
.mcard .grade { position: absolute; top: 8px; right: 10px; font-family: 'Jua'; font-size: calc(15px * var(--fs)); }
.grade.S { color: #ff5fd0; } .grade.A { color: #ff9f1c; } .grade.B { color: #3fa7ff; } .grade.C { color: #9a93ad; }
.shinytag { position: absolute; top: 8px; left: 10px; }
.dexgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.dexcell { background: #fff; border-radius: 14px; padding: 4px; text-align: center; font-size: calc(11.5px * var(--fs)); cursor: pointer; }
.dexcell img { width: 70px; height: 70px; }
.dexcell.seen img { filter: brightness(0) opacity(.35); }
.dexcell.none img { filter: brightness(0) opacity(.08); }
.dexcell .no { color: #b0a594; font-size: calc(10px * var(--fs)); }
.detail { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
.detail img.big { width: 200px; height: 200px; background: radial-gradient(circle, #fff 0, #f1ebff 70%); border-radius: 24px; }
.stats { display: grid; grid-template-columns: 52px 1fr 40px; gap: 4px 8px; align-items: center; font-size: calc(14px * var(--fs)); }
.statbar { height: 8px; border-radius: 4px; background: #eee8f7; overflow: hidden; } .statbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pri2), var(--pink)); }
.moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.move { background: #fff; border-radius: 12px; padding: 6px 10px; font-size: calc(13.5px * var(--fs)); border-left: 5px solid #ccc; }
.qbar { height: 10px; border-radius: 5px; background: #eee8f7; overflow: hidden; margin-top: 4px; } .qbar i { display: block; height: 100%; background: var(--good); }
.login7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 14px; }
.login7 div { background: #fff; border-radius: 12px; text-align: center; padding: 8px 2px; font-size: calc(12px * var(--fs)); }
.login7 div.on { background: #e6ffe9; outline: 2px solid var(--good); }
.price { font-family: 'Jua'; color: var(--pri); white-space: nowrap; }
.note { background: #fff7e0; border-radius: 12px; padding: 10px 12px; font-size: calc(13px * var(--fs)); color: #7a5a00; margin: 8px 0; }
.sect { font-family: 'Jua'; font-size: calc(18px * var(--fs)); margin: 14px 0 8px; }
input.num { width: 90px; padding: 6px 8px; border-radius: 10px; border: 2px solid #e9dfc9; }

/* 배틀 */
#battle { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#battle > * { pointer-events: auto; }
.bbox { position: absolute; background: var(--glass); border-radius: 18px; padding: 10px 14px; min-width: 260px; box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.bbox.foe { left: 16px; top: 16px; } .bbox.mine { right: 16px; bottom: 210px; }
.bbox .nm { font-family: 'Jua'; font-size: calc(19px * var(--fs)); display: flex; justify-content: space-between; gap: 10px; }
.bbox .hpbar { height: 10px; border-radius: 5px; margin-top: 6px; }
.bbox .hptxt { font-size: calc(12.5px * var(--fs)); text-align: right; color: var(--sub); }
.bbox .balls { font-size: calc(11px * var(--fs)); margin-top: 4px; letter-spacing: 2px; }
#bLog { position: absolute; left: 16px; right: 16px; bottom: 150px; max-width: 640px; margin: 0 auto; background: rgba(58, 47, 42, .88); color: #fff; font-family: 'Jua'; font-size: calc(19px * var(--fs)); padding: 12px 18px; border-radius: 16px; min-height: 50px; }
#bMenu { position: absolute; left: 16px; right: 16px; bottom: 14px; max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#bMenu button { border: 0; border-radius: 16px; padding: 10px 8px; font-size: calc(16px * var(--fs)); cursor: pointer; background: #fff; box-shadow: var(--shadow); border-bottom: 5px solid #ccc; min-height: 56px; line-height: 1.2; }
#bMenu button small { display: block; font-family: 'Gowun Dodum'; font-size: calc(11.5px * var(--fs)); color: var(--sub); }
#bMenu button.sys { background: #f3efff; color: var(--pri); border-bottom-color: var(--pri2); }
#bMenu button:disabled { opacity: .45; }
.dmgnum { position: fixed; font-family: 'Jua'; font-size: 34px; color: #fff; -webkit-text-stroke: 2px #ff3b5c; pointer-events: none; animation: rise 0.9s ease-out forwards; z-index: 12; }
@keyframes rise { from { transform: translateY(0) scale(1.3); opacity: 1; } to { transform: translateY(-60px) scale(1); opacity: 0; } }

#invite { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 40; padding: 14px 18px; min-width: 300px; text-align: center; }
#evolve { position: fixed; inset: 0; z-index: 50; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(200, 180, 255, .95)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#evolve img { width: 220px; height: 220px; }
#evolve { background: radial-gradient(circle, #3a2f5c, #120d24); color: #fff; overflow: hidden; }
#evolve .vfx { position: absolute; left: 50%; top: 50%; width: min(calc(var(--gw, 100vw) * 120 / 100), 120vh); height: min(calc(var(--gw, 100vw) * 120 / 100), 120vh); transform: translate(-50%, -50%); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
#evolve .stage { position: relative; display: flex; justify-content: center; }
#evolve h2, #evolve .btn { position: relative; opacity: 0; animation: evoIn .6s 4.4s ease-out forwards; }
#evolve h2 { text-shadow: 0 2px 12px rgba(0,0,0,.6); }
#evolve .from { animation: evoFlash 2.2s ease-in forwards; } #evolve .to { position: absolute; opacity: 0; animation: evoIn .8s 3.85s ease-out forwards; }
#evolve h2 { font-size: 28px; margin-top: 16px; }
@keyframes evoFlash { 0% { filter: brightness(1); } 40%, 60%, 80% { filter: brightness(8); transform: scale(1.1); } 50%, 70% { filter: brightness(1); transform: scale(.9); } 100% { filter: brightness(10); opacity: 0; } }
@keyframes evoIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
#toasts { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: rgba(58, 47, 42, .9); color: #fff; padding: 10px 18px; border-radius: 22px; font-family: 'Jua'; font-size: calc(16px * var(--fs)); animation: tin .25s ease-out; max-width: calc(var(--gw, 100vw) * 90 / 100); text-align: center; }
.toast.good { background: rgba(40, 160, 90, .95); } .toast.bad { background: rgba(230, 70, 90, .95); }
@keyframes tin { from { transform: translateY(-10px); opacity: 0; } }
#loading { position: fixed; inset: 0; z-index: 100; background: #fbf5e6; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Jua'; color: var(--pri); }
.spinner { width: 54px; height: 54px; border-radius: 50%; border: 6px solid #d9efe9; border-top-color: var(--pri); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  #profileCard { min-width: 0; padding: 8px 10px; } #profileCard .nm { font-size: calc(16px * var(--fs)); } #profileCard .res { font-size: calc(13px * var(--fs)); gap: 8px; }
  #mapBox { padding: 5px; } #minimap { width: 110px; height: 110px; } #zoneName { font-size: calc(12px * var(--fs)); }
  #menuBtns { top: 160px; right: 8px; } #menuBtns button { width: 50px; height: 46px; font-size: calc(18px * var(--fs)); } #menuBtns button span { font-size: calc(9.5px * var(--fs)); }
  #chat { width: calc(var(--gw, 100vw) - 24px); top: 170px; bottom: auto; } #chatLog { height: 90px; }
  #partyBar { bottom: 8px; gap: 3px; } .pslot { width: 50px; padding: 2px; } .pslot img { width: 42px; height: 42px; }
  .detail { grid-template-columns: 1fr; } .detail img.big { margin: 0 auto; display: block; width: 160px; height: 160px; }
  .grid3 .pick img { width: 80px; height: 80px; } .pick { padding: 8px; }
  #bMenu { grid-template-columns: repeat(2, 1fr); bottom: 8px; } #bMenu button { min-height: 48px; font-size: calc(15px * var(--fs)); }
  #bLog { bottom: 196px; font-size: calc(16px * var(--fs)); } .bbox { min-width: 200px; padding: 8px 10px; } .bbox.mine { bottom: 270px; }
  .moves { grid-template-columns: 1fr; }
}

/* 월드 지도 */
.wmap { position: relative; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 8px 30px rgba(40, 60, 120, .35); }
.wmap img { width: 100%; height: 100%; display: block; }
.wm-mark { position: absolute; transform: translate(-50%, -50%); font-size: calc(22px * var(--fs)); text-align: center; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.wm-mark span { display: block; font-family: 'Jua'; font-size: calc(11px * var(--fs)); color: #fff; background: rgba(58, 47, 42,.7); border-radius: 8px; padding: 1px 6px; white-space: nowrap; margin-top: -2px; }
.wm-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #2fa39a; border: 2px solid #fff; transform: translate(-50%, -50%); }
.wm-me { position: absolute; color: #ff3b5c; font-size: calc(22px * var(--fs)); text-shadow: 0 0 3px #fff, 0 0 3px #fff; z-index: 3; pointer-events: none; animation: wmMe 1.2s ease-in-out infinite; } /* 내 위치는 마을 아이콘 위에, 깜빡여서 찾기 쉽게 */
@keyframes wmMe { 50% { opacity: .45; } }
#mapBox { border-radius: 50%; padding: 6px; } #minimap { border-radius: 50%; }

/* 아이템 아이콘 */
.iicon { width: 1.5em; height: 1.5em; vertical-align: middle; object-fit: contain; }
.item .ic .iicon { width: 44px; height: 44px; }
#bMenu button .iicon { width: 26px; height: 26px; margin-right: 2px; }

/* 관장 컷인 */
.cutin { position: fixed; inset: 0; z-index: 45; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; }
.cutin-band { position: absolute; left: -10%; right: -10%; top: 50%; height: 34%; transform: translateY(-50%) skewY(-6deg); background: linear-gradient(90deg, transparent, var(--c) 30%, #fff 50%, var(--c) 70%, transparent); opacity: .85; animation: band .35s ease-out; }
.cutin img { position: relative; height: 78vh; max-height: 640px; margin-right: calc(var(--gw, 100vw) * 6 / 100); filter: drop-shadow(0 10px 18px rgba(0,0,0,.3)); animation: slideIn .4s cubic-bezier(.2,.9,.3,1.2); }
.cutin-name { position: absolute; left: calc(var(--gw, 100vw) * 8 / 100); top: 50%; transform: translateY(-50%); font-family: 'Jua'; font-size: clamp(26px, calc(var(--gw, 100vw) * 5 / 100), 52px); color: #fff; text-shadow: 0 3px 0 #3a2f2a, 0 0 12px rgba(0,0,0,.4); animation: slideIn .45s .1s both; }
.cutin-name small { display: block; font-size: .6em; color: #fff6c0; }
.cutin.out { animation: fadeOut .45s forwards; }
@keyframes slideIn { from { transform: translateX(calc(var(--gw, 100vw) * 60 / 100)); opacity: 0; } }
@keyframes band { from { transform: translateY(-50%) skewY(-6deg) scaleY(0); } }
@keyframes fadeOut { to { opacity: 0; } }
@media (max-width: 760px) { .cutin { justify-content: center; } .cutin img { height: 60vh; margin: 0; } .cutin-name { left: 50%; top: auto; bottom: 8vh; transform: translateX(-50%); text-align: center; } }
/* NPC 대화 · 관장 말풍선 · 지역 진입 배너 */
.bubble { position: relative; background: #fff; border: 2px solid #eadfc6; border-radius: 16px; padding: 10px 14px; margin: 8px auto 12px; max-width: 460px; font-size: calc(15px * var(--fs)); line-height: 1.55; color: #3a2f55; text-align: left; box-shadow: 0 3px 0 #eadfc6; }
.bubble.big { font-size: calc(17px * var(--fs)); min-height: 64px; display: flex; align-items: center; }
.talk { padding: 4px 0 6px; }
.region-banner { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); z-index: 40; pointer-events: none; text-align: center; font-family: 'Jua'; color: #fff; text-shadow: 0 2px 0 #3a2f2a, 0 0 12px rgba(0,0,0,.35); animation: tin .5s ease-out; }
.region-banner b { display: block; font-size: clamp(28px, calc(var(--gw, 100vw) * 5 / 100), 44px); font-weight: normal; }
.region-banner span { display: block; font-size: clamp(15px, calc(var(--gw, 100vw) * 2.4 / 100), 20px); margin-top: 4px; color: #fff6d8; }
.region-banner.out { animation: fadeOut .6s forwards; }
.region-banner { padding: 10px 26px 12px; border-radius: 22px; background: radial-gradient(ellipse at center, rgba(40, 28, 50, .62), rgba(40, 28, 50, .38) 70%, rgba(40, 28, 50, 0)); width: max-content; max-width: calc(var(--gw, 100vw) * 88 / 100); } /* 이름표·뭉실이 위에 떠도 글씨가 뭉개지지 않게 어두운 받침 */
.tchip { display: inline-block; background: #f3ecdc; border-radius: 99px; padding: 1px 8px; margin: 2px 2px 0 0; font-size: calc(12.5px * var(--fs)); }

input[type=range] { accent-color: var(--pri); height: 28px; }
/* 튜토리얼 말풍선 */
#tut { position: fixed; left: 16px; bottom: 230px; z-index: 40; display: flex; align-items: flex-end; gap: 8px; max-width: min(440px, calc(var(--gw, 100vw) - 32px)); animation: tin .3s ease-out; pointer-events: auto; }
#tut.battle { bottom: auto; top: 90px; }
#tut.hidden { display: none; }
#tut .face { font-size: 40px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
#tut .bubble { background: #fffaf0; color: var(--ink); border: 3px solid #6cc3a0; border-radius: 18px 18px 18px 4px; padding: 10px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); font-size: calc(15px * var(--fs)); line-height: 1.5; }
#tut .who { font-family: 'Jua'; color: #3a9a78; font-size: calc(14px * var(--fs)); }
#tut .btn { margin-top: 6px; padding: 4px 14px; font-size: calc(14px * var(--fs)); }
.linkbtn { width: 100%; margin-top: 8px; font-size: calc(14px * var(--fs)); background: transparent; border: 2px dashed #b9d9cb; color: #3a9a78; box-shadow: none; }
.linkcode { font-size: calc(22px * var(--fs)); letter-spacing: 4px; color: #3a9a78; font-family: ui-monospace, Menlo, monospace; user-select: all; }
/* 노치·홈 인디케이터 안전 영역 (아이폰 사파리/앱, 안드로이드 앱) */
#hud, #battle { inset: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)) max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px)) max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px)) max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px)); }
#panel { padding: calc(12px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))) calc(12px + max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px))) calc(12px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))) calc(12px + max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px))); }
#tut { left: calc(16px + max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px))); }
.panel-inner { max-height: 100%; } /* #panel 안전 영역 패딩 안에 들어가게 (노치에 제목이 가리지 않게) */
#tut.battle { top: calc(90px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))); }
@media (max-width: 700px) {
  #tut { bottom: calc(260px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))); max-width: calc(var(--gw, 100vw) - 110px - max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px))); }
  #tut .face { font-size: 30px; }
  #tut .bubble { font-size: calc(14px * var(--fs)); padding: 8px 12px; }
}
@media (max-width: 700px) {
  #actBtn { right: 86px; bottom: 60px; }
  #prompt { bottom: 256px; } /* 조이스틱·E 버튼에 가리지 않게 위로 */
  #toasts { top: calc(248px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))); } /* 상단 정보·목표 카드(아래 끝 약 235px) 아래로 */
  .toast { font-size: calc(14px * var(--fs)); padding: 8px 14px; max-width: calc(var(--gw, 100vw) - 130px); } /* 오른쪽 메뉴 버튼을 덮지 않게 */
  #menuBtns { gap: 5px; }
  #menuBtns button { width: 56px; height: 50px; font-size: calc(20px * var(--fs)); }
}
/* 교감 게이지 (야생 배틀) */
.bond { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: calc(13px * var(--fs)); }
.bond i { flex: 1; height: 8px; border-radius: 99px; background: rgba(0,0,0,.12); overflow: hidden; }
.bond b { display: block; height: 100%; background: linear-gradient(90deg, #ffb3cf, #ff5f9e); border-radius: 99px; transition: width .4s; }
/* 타이틀: 혼자 모험(주 버튼) + 온라인 광장(접이식) */
.solobtn { width: 100%; font-size: calc(20px * var(--fs)); padding: 14px; line-height: 1.3; }
.solobtn small { display: block; font-size: calc(13px * var(--fs)); font-family: 'Gowun Dodum'; opacity: .9; }
#onlineBox { margin-top: 14px; border-top: 2px dashed #e6dccd; padding-top: 10px; }
#onlineBox summary { cursor: pointer; font-family: 'Jua'; font-size: calc(16px * var(--fs)); color: #3a9a78; list-style: none; text-align: center; }
#onlineBox summary::-webkit-details-marker { display: none; }
#onlineBox summary small { font-family: 'Gowun Dodum'; color: var(--sub); font-size: calc(12px * var(--fs)); margin-left: 4px; }
#onlineBox[open] summary { margin-bottom: 8px; }
/* 혼자 모드에서는 온라인 전용 UI 숨김 */
body.solo #chat, body.solo #chatToggle, body.solo #menuBtns [data-open="nearby"], body.solo #menuBtns [data-open="rank"] { display: none !important; }
.askbox { position: fixed; inset: 0; z-index: 60; background: rgba(40, 30, 20, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.askbox .card { max-width: 400px; width: 100%; text-align: center; line-height: 1.5; }
.askcmp { display: flex; gap: 10px; margin: 12px 0; } .askcmp > div { flex: 1; background: #f4eee3; border-radius: 12px; padding: 8px; font-size: calc(14px * var(--fs)); }
/* ── 메인 스토리 ── */
#objective { position: absolute; left: 12px; top: calc(12px + 96px); max-width: min(360px, calc(var(--gw, 100vw) - 210px)); padding: 7px 12px; font-size: calc(13px * var(--fs)); line-height: 1.4; cursor: pointer; }
#objective b { color: var(--pri); font-family: 'Jua'; margin-right: 4px; }
#chatToggle { top: 170px; }
#cut { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 16px; padding-bottom: calc(16px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))); display: flex; justify-content: center; cursor: pointer; background: linear-gradient(transparent, rgba(0,0,0,.35)); }
#cut.hidden { display: none; }
.cut-box { display: flex; gap: 14px; align-items: flex-end; max-width: 760px; width: 100%; background: #fffaf0; border: 4px solid #6cc3a0; border-radius: 22px; padding: 14px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: tin .25s ease-out; }
.cut-box.villain { border-color: #5a4a7a; background: #f6f1ff; }
.cut-face { width: 96px; height: 96px; flex: none; font-size: 64px; line-height: 96px; text-align: center; margin-top: -40px; }
.cut-face img { width: 110px; height: 110px; object-fit: contain; margin-top: -20px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.cut-body { flex: 1; min-width: 0; }
.cut-name { font-family: 'Jua'; font-size: calc(18px * var(--fs)); color: #3a9a78; } .villain .cut-name { color: #5a4a7a; }
.cut-name small { font-family: 'Gowun Dodum'; font-size: calc(12px * var(--fs)); color: var(--sub); margin-left: 6px; }
.cut-text { font-size: calc(17px * var(--fs)); line-height: 1.6; margin-top: 4px; }
.cut-next { text-align: right; color: var(--sub); font-size: calc(13px * var(--fs)); animation: bob 1s infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
.cutin-face { position: absolute; right: calc(var(--gw, 100vw) * 8 / 100); top: 50%; transform: translateY(-50%); font-size: 140px; }
.cutin-face img { height: 70vh; max-height: 520px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
.wm-mark.story { font-size: calc(22px * var(--fs)); animation: bob 1s infinite; z-index: 2; }
#ending { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: linear-gradient(#2a2344, #ffcf9f 60%, #fff6e6); color: #3a2f2a; text-align: center; }
#ending.hidden { display: none; }
.end-scroll { max-width: 640px; margin: 0 auto; padding: 18vh 20px 60px; animation: tin 1.2s ease-out; }
.end-scroll h1 { font-family: 'Jua'; font-size: 44px; color: #fff; text-shadow: 0 3px 12px rgba(0,0,0,.4); }
.end-scroll h2 { font-family: 'Jua'; margin-top: 36px; color: #5a4a7a; }
.end-scroll p { font-size: calc(17px * var(--fs)); line-height: 1.8; }
.end-scroll > p:nth-of-type(-n+3) { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.end-party { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.end-party div { width: 96px; } .end-party img { width: 88px; height: 88px; object-fit: contain; } .end-party span { font-size: calc(12px * var(--fs)); display: block; }
.end-credits { color: #6b5d55; } .end-last { font-family: 'Jua'; font-size: calc(20px * var(--fs)); margin-top: 30px; }
@media (max-width: 700px) { .cut-face { width: 64px; height: 64px; font-size: 44px; line-height: 64px; } .cut-face img { width: 76px; height: 76px; } .cut-text { font-size: calc(15px * var(--fs)); } #objective { top: calc(12px + 88px); } }
.cut-face { width: 120px; height: 120px; margin-top: -54px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff, #f1e8d8); border: 3px solid #6cc3a0; }
.villain .cut-face { background: radial-gradient(circle at 50% 40%, #efe8ff, #cbbde6); border-color: #5a4a7a; }
.cut-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; margin: 0; filter: none; transform: scale(1.9); transform-origin: 50% 0; }
@media (max-width: 700px) { .cut-face { width: 84px; height: 84px; margin-top: -40px; } }
/* 심부름 퀘스트 상자 (NPC 대화창) */
.sqbox { background: #f4fbf6; border: 2px solid #9fd8b8; border-radius: 14px; padding: 10px 12px; margin: 10px 0; text-align: left; }
.sqbox.new { background: #fff8e8; border-color: #f3c24b; } .sqbox.ready { background: #eafff0; border-color: #3a9a78; }
.sqbox .t { font-family: 'Jua'; font-size: calc(15px * var(--fs)); } .sqbox .d { font-size: calc(14px * var(--fs)); color: var(--sub); margin: 4px 0 8px; line-height: 1.5; }
.dextext { background: #fff8ec; border-radius: 12px; padding: 8px 12px; line-height: 1.6; font-size: calc(15px * var(--fs)); }
/* 폰 테스트에서 찾은 레이아웃 수정 */
#start .card { margin-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)); }
#start { padding-top: calc(16px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))); padding-bottom: calc(16px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))); }
#tut .face { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 3px solid #6cc3a0; background: #fffaf0; flex: none; font-size: 32px; line-height: 48px; text-align: center; }
#tut .face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; transform: scale(1.8); transform-origin: 50% 0; }
@media (max-width: 700px) {
  #objText { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .region-banner { top: 38%; }
}
/* 길 안내 (목표 카드 아래줄): 화살표는 화면 기준 방향 */
#navLine { margin-top: 4px; font-family: 'Jua'; font-size: calc(13px * var(--fs)); color: #b5651d; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#navLine.hidden { display: none; }
#navLine .arr { width: 18px; height: 18px; flex: none; display: block; }
/* 트레이너 지휘 버튼 (배틀 로그 위 왼쪽) + 외침 연출 */
#bCmd { position: absolute; left: 16px; bottom: 214px; border: 0; border-radius: 16px; padding: 7px 14px; background: linear-gradient(135deg, #ff9f43, #ff6b6b); color: #fff; font-family: 'Jua'; font-size: calc(16px * var(--fs)); box-shadow: var(--shadow); cursor: pointer; line-height: 1.15; text-align: left; }
#bCmd small { display: block; font-family: 'Gowun Dodum'; font-size: calc(11.5px * var(--fs)); opacity: .95; }
#bCmd.hidden { display: none; }
#bCmd.on { background: linear-gradient(135deg, #ffd23f, #ff9f43); color: #5a2d00; animation: cmdPulse .8s ease-in-out infinite alternate; }
@keyframes cmdPulse { from { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 210, 63, .7); } to { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(255, 210, 63, 0); } }
.cmd-shout { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 55; font-family: 'Jua'; font-size: 38px; color: #fff; -webkit-text-stroke: 2px #ff6b6b; text-shadow: 0 4px 0 #b83b3b, 0 8px 18px rgba(0,0,0,.35); white-space: nowrap; pointer-events: none; animation: shout 1.3s ease-out forwards; }
@keyframes shout { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -62%) scale(1); opacity: 0; } }
@media (max-width: 700px) { #bCmd { bottom: 262px; font-size: calc(15px * var(--fs)); } .cmd-shout { font-size: 30px; } }
@media (max-width: 700px) {
  #bMenu { grid-template-columns: repeat(4, 1fr); }
  #bMenu button { grid-column: span 2; }
  #bMenu[data-mode=main] button.sys { grid-column: span 1; min-height: 44px; font-size: calc(13.5px * var(--fs)); padding: 6px 2px; }
}
/* 트레이너 등급 */
#profileCard .rank { font-size: calc(13px * var(--fs)); color: #b5651d; white-space: nowrap; }
.rankup { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(255, 226, 122, .55), rgba(40, 30, 20, .6)); animation: tin .3s ease-out; cursor: pointer; padding: 16px; }
.rankup.out { opacity: 0; transition: opacity .25s; }
.rk-box { background: #fffaf0; border: 4px solid #ffb627; border-radius: 28px; padding: 26px 30px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.35); max-width: 340px; animation: rkPop .5s cubic-bezier(.2,.9,.3,1.4); }
.rk-icon { font-size: 76px; line-height: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.2)); animation: rkSpin 1s ease-out; }
.rk-sub { font-family: 'Jua'; color: #ff8a3d; font-size: calc(17px * var(--fs)); margin-top: 10px; }
.rk-name { font-family: 'Jua'; font-size: 30px; color: var(--ink); margin: 2px 0 10px; }
.rk-perk { font-size: calc(15px * var(--fs)); color: #3a9a78; font-family: 'Jua'; line-height: 1.5; }
.rk-tap { font-size: calc(12px * var(--fs)); color: var(--sub); margin-top: 14px; }
@keyframes rkPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rkSpin { from { transform: rotate(-200deg) scale(.3); } to { transform: rotate(0) scale(1); } }
/* 성별 선택 · 꾸미기 상점 */
.gender-pick { justify-content: center; gap: 10px; margin: 4px 0 10px; }
.gender-pick .btn { min-width: 110px; }
.gender-pick .btn.on { background: var(--pri-ink); color: #fff; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.store-card { background: #fff; border-radius: 16px; padding: 10px; text-align: center; box-shadow: var(--shadow); border: 3px solid transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.store-card.on { border-color: var(--pri); }
.store-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 10%; border-radius: 12px; background: #f6f1e6; }
.store-card .big-ic { font-size: 54px; line-height: 1.4; }
.store-card .t { font-family: 'Jua'; font-size: calc(16px * var(--fs)); }
.store-card .d { font-size: calc(12px * var(--fs)); color: var(--sub); min-height: 32px; }
/* 시작 단계 */
#start .steps { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
#start .steps span { font-family: 'Jua'; font-size: calc(14px * var(--fs)); padding: 5px 12px; border-radius: 99px; background: #eee8dc; color: var(--sub); }
#start .steps span.on { background: var(--pri-ink); color: #fff; }
.gender-big { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.gender-big .pick img { width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.gender-big .pick .t { font-size: calc(22px * var(--fs)); }
/* 자동 저장 표시 */
#saveChip { position: fixed; right: calc(12px + max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px))); bottom: calc(10px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))); z-index: 25; font-family: 'Jua'; font-size: calc(13px * var(--fs)); color: #fff; background: rgba(58, 47, 42, .7); padding: 4px 10px; border-radius: 99px; opacity: 0; transition: opacity .4s; pointer-events: none; }
#saveChip.show { opacity: 1; }
/* 📸 사진 모드 */
#photo { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#photo.hidden { display: none; }
#photo .ph-top { position: absolute; left: 12px; right: 12px; top: calc(12px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))); display: flex; align-items: center; gap: 10px; }
#photo .ph-tip { font-family: 'Jua'; font-size: calc(13px * var(--fs)); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
#photo .ph-bottom { position: absolute; left: 0; right: 0; bottom: calc(26px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))); display: flex; justify-content: center; align-items: center; gap: 26px; }
#photo button { pointer-events: auto; }
.ph-shot { width: 74px; height: 74px; border-radius: 50%; border: 6px solid #fff; background: #ff6b6b; box-shadow: 0 4px 16px rgba(0,0,0,.35); cursor: pointer; }
.ph-shot:active { transform: scale(.92); }
.ph-flash { position: fixed; inset: 0; background: #fff; z-index: 80; pointer-events: none; animation: phf .4s ease-out forwards; }
@keyframes phf { from { opacity: .9; } to { opacity: 0; } }
#photoView { position: fixed; inset: 0; z-index: 75; background: rgba(20, 15, 10, .75); display: flex; align-items: center; justify-content: center; padding: 16px; }
#photoView.hidden { display: none; }
#photoView .pv-box { background: #fffaf0; border-radius: 22px; padding: 14px; max-width: 520px; width: 100%; text-align: center; }
#photoView img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 14px; background: #000; -webkit-touch-callout: default; }
#photoView .row { justify-content: center; gap: 8px; }
/* 모험 일지 · 장 타이틀 카드 */
.journal { display: flex; flex-direction: column; gap: 6px; }
.jr { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 8px 10px; box-shadow: var(--shadow); }
.jr img, .jr .q { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 8%; background: #f3ecdf; }
.jr .q { display: grid; place-items: center; font-family: 'Jua'; font-size: calc(22px * var(--fs)); color: #bbb; }
.jr b { display: block; font-family: 'Jua'; font-size: calc(15px * var(--fs)); font-weight: normal; }
.jr small { display: block; font-size: calc(12.5px * var(--fs)); color: var(--sub); line-height: 1.4; }
.jr.cur { border: 3px solid var(--pri); } .jr.cur b { color: var(--pri); }
.jr.done { opacity: .85; } .jr.lock { opacity: .6; }
.chapter-card { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 58; text-align: center; pointer-events: none; animation: ccIn .6s cubic-bezier(.2,.9,.3,1.2); padding: 18px 34px; background: radial-gradient(ellipse, rgba(20,15,30,.72), rgba(20,15,30,0) 70%); }
.chapter-card small { display: block; font-family: 'Jua'; font-size: calc(16px * var(--fs)); color: #ffd98a; letter-spacing: 3px; }
.chapter-card b { display: block; font-family: 'Jua'; font-weight: normal; font-size: 30px; color: #fff; text-shadow: 0 3px 10px rgba(0,0,0,.6); white-space: nowrap; }
.chapter-card i { display: block; height: 3px; margin: 8px auto 0; width: 70%; background: linear-gradient(90deg, transparent, #ffd98a, transparent); }
.chapter-card.out { opacity: 0; transition: opacity .6s; }
@keyframes ccIn { from { opacity: 0; transform: translate(-50%, -40%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (max-width: 700px) { .chapter-card b { font-size: 24px; } }
/* 보상형 광고 */
.ad-offer { position: fixed; left: 50%; bottom: calc(150px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))); transform: translateX(-50%); z-index: 45; border: 0; border-radius: 99px; padding: 12px 20px; font-family: 'Jua'; font-size: calc(16px * var(--fs)); color: #5a2d00; background: linear-gradient(135deg, #ffe27a, #ffb627); box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; white-space: nowrap; animation: tin .3s ease-out; }
.fake-ad { position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 20, .85); display: grid; place-items: center; }
.fake-ad > div { background: #fff; border-radius: 20px; padding: 24px 28px; text-align: center; width: min(320px, calc(var(--gw, 100vw) * 86 / 100)); }
.fake-ad b { font-family: 'Jua'; font-size: calc(22px * var(--fs)); } .fake-ad p { color: var(--sub); font-size: calc(14px * var(--fs)); }
.fake-ad i { display: block; height: 6px; border-radius: 99px; background: #eee; overflow: hidden; margin: 12px 0; position: relative; }
.fake-ad i::after { content: ''; position: absolute; inset: 0; background: var(--pri); animation: fa 3s linear forwards; transform-origin: left; }
@keyframes fa { from { transform: scaleX(0); } to { transform: scaleX(1); } }
body.cutting #menuBtns, body.cutting #partyBar { opacity: .35; pointer-events: none; } /* 대화 중 메뉴 잠금 */

/* ── 타이틀(로그인) 화면: 큰 일러스트 위에 투명하게 — 위엔 로고, 아래엔 버튼 ── */
#login.screen { background: url('/assets/ui/title-key.webp') center 30% / cover no-repeat, #bfe6ff; align-items: stretch; padding: 0; }
#login .login-card { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; overflow: visible; max-width: 440px; margin: 0 auto; min-height: 100%;
  display: flex; flex-direction: column; justify-content: space-between; padding: calc(34px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))) 18px calc(18px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))); }
#login .obang, #login #loginPreview { display: none; }
#login .logo { font-family: 'Jua'; font-size: clamp(52px, calc(var(--gw, 100vw) * 15 / 100), 76px); color: #fff; letter-spacing: -1px; line-height: 1.05;
  -webkit-text-stroke: 7px #3a2f2a; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(58, 47, 42, .35), 0 10px 24px rgba(0, 0, 0, .18); animation: logoIn .7s cubic-bezier(.2,.9,.3,1.3) both; }
#login .logo b { color: #ffd84a; }
#login .sub { display: table; margin: 10px auto 0; padding: 6px 14px; border-radius: 99px; background: rgba(255, 250, 240, .86); color: var(--ink); font-size: calc(14px * var(--fs)); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
#login .login-bottom { padding: 14px; border-radius: 26px; background: rgba(255, 250, 240, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(60, 40, 10, .18); animation: tin .5s .2s ease-out both; }
#login .solobtn { font-size: calc(22px * var(--fs)); padding: 18px; box-shadow: 0 8px 0 #1f7c74, 0 12px 24px rgba(31, 124, 116, .35); animation: pulse 2.2s ease-in-out 1s infinite; }
#login .tiny { color: #5a4c40; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
@keyframes logoIn { from { transform: translateY(-20px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
#login .login-bottom { padding: 12px 12px 8px; }
#login .msg:empty { display: none; } /* 조작 안내는 튜토리얼에서, 빈 메시지 칸 숨김 */
#login .login-bottom .tiny { margin: 8px 0 2px !important; font-size: calc(12px * var(--fs)); }
#login #onlineBox.hidden { display: none; }
/* 가로 화면(태블릿·PC): 마을 배경 + 왼쪽에 일러스트(가장자리를 흐리게), 오른쪽에 로고·버튼 */
@media (min-aspect-ratio: 4/5) {
  #login.screen { background: url('/assets/ui/login-bg.webp') center / cover no-repeat, #bfe6ff; }
  #login.screen::before { content: ''; position: fixed; left: calc(var(--gw, 100vw) * 4 / 100); top: 0; bottom: 0; aspect-ratio: 752 / 1344; background: url('/assets/ui/title-key.webp') center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); pointer-events: none; }
  #login .login-card { margin: 0 calc(var(--gw, 100vw) * 6 / 100) 0 auto; position: relative; z-index: 1; justify-content: center; gap: 28px; }
}

/* 키 안내: PC(키보드)에서만 보임 */
kbd { display: inline-block; min-width: 1.6em; padding: 1px 5px; margin: 0 1px; border-radius: 6px; background: #fff; border: 1px solid #d9cdb5; border-bottom-width: 3px; font: 600 calc(11px * var(--fs))/1.4 system-ui, sans-serif; color: #5a4c40; text-align: center; }
kbd.hk { position: absolute; top: 4px; left: 6px; opacity: .8; pointer-events: none; }
#bMenu button, #bCmd { position: relative; }
html.touch kbd.hk { display: none; }
html.kb #menuBtns [data-key]::after { content: attr(data-key); position: absolute; top: 3px; right: 5px; font: 600 10px/1 system-ui, sans-serif; color: #8a7a6a; }
#menuBtns button { position: relative; }
.cut-next kbd.hk { position: static; }

/* 배틀 첫 화면: 큰 버튼 4개 */
#bMenu[data-mode=main] { grid-template-columns: repeat(4, 1fr); }
#bMenu button.big4 { grid-column: span 1 !important; min-height: 72px; font-family: 'Jua'; font-size: calc(20px * var(--fs)); color: #fff; border-bottom-width: 6px; }
#bMenu button.big4 small { color: rgba(255,255,255,.88); }
#bMenu .big4.fight { background: #ff7a45; border-bottom-color: #c9541f; }
#bMenu .big4.tool { background: #f3b72c; border-bottom-color: #bf8a10; }
#bMenu .big4.swap { background: #3fa7d6; border-bottom-color: #23759b; }
#bMenu .big4.run { background: #8f9aa3; border-bottom-color: #646d74; }
#bMenu button.play, #bMenu button.orb { background: #fff0f5; border-bottom-color: #ff8fb1; }
@media (max-width: 700px) { #bMenu[data-mode=main] { grid-template-columns: repeat(2, 1fr); } #bMenu button.big4 { min-height: 64px; } }

/* 미니맵 아래 지역 이름표: 동그란 지도 밖으로 삐져나가지 않게 아래에 작은 이름표로 */
#mapBox { position: absolute; }
#zoneName { position: absolute; left: 50%; top: calc(100% - 10px); transform: translateX(-50%); margin: 0; width: max-content; max-width: 150px;
  padding: 3px 10px; border-radius: 12px; background: var(--glass); box-shadow: 0 3px 10px rgba(80, 55, 20, .18); line-height: 1.15; white-space: nowrap; }
#zoneName b { display: block; font-weight: 400; font-size: calc(13px * var(--fs)); overflow: hidden; text-overflow: ellipsis; }
#zoneName small { display: block; font-family: 'Gowun Dodum', sans-serif; font-size: calc(10.5px * var(--fs)); color: var(--sub); }
@media (max-width: 700px) { #zoneName { max-width: 124px; } #zoneName b { font-size: calc(12px * var(--fs)); } }
/* 지도: 누르면 길 안내 */
.wmap { cursor: crosshair; }
.wm-mark.go { cursor: pointer; z-index: 1; transition: transform .12s; }
.wm-mark.go:active { transform: translate(-50%, -50%) scale(1.15); }
@media (hover: hover) { .wm-mark.go:hover { transform: translate(-50%, -50%) scale(1.12); } }
.pickbar { margin: 10px auto 0; text-align: center; font-family: 'Jua'; color: var(--pri); }

/* 떠다니는 조이스틱: 왼쪽 아래 넓은 영역 */
#joyZone { position: absolute; left: 0; bottom: 0; width: calc(var(--gw, 100vw) * 46 / 100); height: 46vh; z-index: 1; touch-action: none; }
html.kb #joyZone { display: none; }
#joy { pointer-events: none; z-index: 2; transition: opacity .15s; opacity: .75; }
#joy.on { opacity: 1; }
#partyBar, #prompt, #actBtn, #chatToggle { z-index: 3; }

/* 첫 파트너 8마리 */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.grid4 .pick { padding: 8px 4px; }
.grid4 .pick img { width: 72px; height: 72px; }
.grid4 .pick .t { font-size: calc(16px * var(--fs)); }
.grid4 .pick .chip { font-size: calc(10.5px * var(--fs)); padding: 1px 6px; }
.pick .rec { position: absolute; top: 4px; left: 4px; font-style: normal; font-family: 'Jua'; font-size: 10px; color: #fff; background: #ff8fb1; border-radius: 99px; padding: 1px 6px; }
.starter-info { min-height: 2.8em; margin: 10px 2px 4px; font-size: calc(13px * var(--fs)); color: var(--sub); text-align: center; }
.starter-info b { color: var(--ink); font-family: 'Jua'; font-weight: 400; }
@media (max-width: 700px) { .grid4 { gap: 6px; } .grid4 .pick img { width: 56px; height: 56px; } .grid4 .pick .t { font-size: calc(14px * var(--fs)); } }

/* 배틀 빠르기·자동 버튼: 오른쪽 위 */
#bTools { position: absolute; right: 12px; top: calc(12px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))); display: flex; gap: 6px; z-index: 6; }
#bTools button { border: 0; border-radius: 99px; padding: 7px 12px; font-family: 'Jua'; font-size: calc(14px * var(--fs)); background: rgba(255,255,255,.88); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
#bTools button.on { background: var(--pri-ink); color: #fff; }
#bTools button.hidden { display: none; }
@media (max-width: 700px) { #bTools { flex-direction: column; align-items: flex-end; top: calc(14px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))); right: 8px; } #bTools button { padding: 6px 10px; font-size: calc(13px * var(--fs)); } }
.cut-face img.npcface { width: 100%; height: 100%; object-fit: cover; transform: none; }
.cut-face img.npcface { margin: 0; object-position: 50% 50%; filter: none; }

/* 체육관 번호: 지도 */
.wm-mark .gnum { display: inline-block; margin-right: 4px; font-weight: 400; font-size: 10px; min-width: 15px; height: 15px; line-height: 15px; border-radius: 50%; background: #ffd84a; color: #3a2f2a; }
.wm-mark.gym-next .gnum { background: #fff; }
.wm-mark.gym-next span { background: #ff8fb1; }
.wm-mark.gym-done { opacity: .85; }
.wm-mark.gym-lock { filter: grayscale(.6) drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.gym-order { font-family: 'Jua'; color: var(--pri); }

#camBtn { position: absolute; right: 30px; bottom: 214px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); font-size: 24px; box-shadow: var(--shadow); z-index: 3; }
@media (max-width: 700px) { #camBtn { right: 100px; bottom: 150px; width: 46px; height: 46px; font-size: 21px; } }
#soloNew .namehd { font-family: 'Jua'; font-size: 18px; margin: 2px 0 8px; text-align: center; }
#soloNew .row { gap: 8px; } #soloNew input { font-size: 18px; padding: 12px 14px; } #soloNew .btn { font-size: 18px; padding: 12px 18px; }
body.cutting #joy, body.cutting #joyZone, body.cutting #camBtn, body.cutting #actBtn, body.cutting #navHud { visibility: hidden; } /* 대화 중에는 조이스틱·버튼 숨김 */
#actBtn { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; gap: 2px; } #actBtn small { font-size: 12px; }
body { word-break: keep-all; overflow-wrap: anywhere; } /* 한국어 낱말 중간에서 줄이 끊기지 않게 */
@media (max-width: 700px) { #objective { max-width: calc(var(--gw, 100vw) - 150px); } }

/* 필살기 컷인 (위력 70 이상 기술) */
.mvcut { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.mvcut-band { position: absolute; left: -10%; right: -10%; top: 36%; height: 22%; transform: skewY(-5deg); background: linear-gradient(90deg, transparent, var(--c) 25%, #fff 50%, var(--c) 75%, transparent); opacity: .9; animation: mvband .3s ease-out; }
.mvcut img { position: absolute; top: 30%; height: 33%; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); animation: mvslideL .35s cubic-bezier(.2,.9,.3,1.25); }
.mvcut.mine img { left: 6%; } .mvcut.foe img { right: 6%; animation-name: mvslideR; }
.mvcut-name { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); font-family: 'Jua'; font-size: clamp(26px, calc(var(--gw, 100vw) * 7 / 100), 54px); color: #fff; -webkit-text-stroke: 6px #3a2f2a; paint-order: stroke fill; white-space: nowrap; animation: mvname .4s ease-out; }

.mvcut.out { opacity: 0; transition: opacity .2s; }
@keyframes mvband { from { transform: skewY(-5deg) scaleY(0); } to { transform: skewY(-5deg) scaleY(1); } }
@keyframes mvslideL { from { transform: translateX(-120%); } to { transform: none; } }
@keyframes mvslideR { from { transform: translateX(120%); } to { transform: none; } }
@keyframes mvname { from { opacity: 0; transform: translateX(-50%) scale(1.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* 오프닝 그림책 */
.opening { position: fixed; inset: 0; z-index: 70; background: #2a2235; display: flex; flex-direction: column; animation: opIn .5s ease-out; transition: opacity .4s; }
.opening.out { opacity: 0; }
.op-img { flex: 1; background: center/cover no-repeat; animation: opZoom 6s ease-out forwards; }
.op-txt { background: #fffaf0; color: #3a2f2a; font-size: calc(19px * var(--fs)); line-height: 1.6; padding: 22px 24px calc(22px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))); border-top: 4px solid #7fd3c4; text-align: center; word-break: keep-all; }
.op-txt b { color: #2a8f83; font-family: 'Jua'; font-weight: 400; }
.op-txt small { display: block; margin-top: 8px; font-size: 12px; opacity: .55; }
.op-skip { position: absolute; top: calc(14px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))); right: 14px; border: 0; border-radius: 20px; padding: 8px 14px; background: rgba(255,255,255,.85); font-family: 'Jua'; font-size: 14px; }
@keyframes opIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes opZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* 축제 난이도 고르기 */
.fest-tiers { display: grid; gap: 8px; margin: 10px 0 4px; }
.fest-tier { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 10px 14px; }
.fest-tier small { font-size: 12px; opacity: .85; font-weight: 400; }

/* 우정 게이지 */
.bondbar i { background: linear-gradient(90deg, #ff9bb3, #ff5c8a); }

/* 친구 맺기 놀이 */
.mg-game { position: fixed; inset: 0; z-index: 80; background: rgba(40, 30, 55, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mg-card { background: #fffaf0; border-radius: 22px; width: min(420px, 100%); padding: 18px 16px 14px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); border-top: 6px solid #7fd3c4; }
.mg-title { font-family: 'Jua'; font-size: 26px; color: #2a8f83; }
.mg-how { font-size: 14px; color: #6b5a4a; margin: 4px 0 12px; }
.mg-stage { min-height: 170px; display: flex; flex-direction: column; justify-content: center; gap: 12px; touch-action: manipulation; user-select: none; cursor: pointer; }
.mg-bar { position: relative; height: 56px; background: #f1e6d4; border-radius: 28px; margin: 0 6px; }
.mg-zone, .mg-pzone { position: absolute; background: #9be3a6; border-radius: 28px; }
.mg-zone { top: 0; bottom: 0; }
.mg-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 38px; transition: transform .1s; }
.mg-dot.mg-ok { transform: translate(-50%, -80%) scale(1.3); }
.mg-dot.mg-miss { filter: grayscale(1) opacity(.6); }
.mg-count { font-family: 'Jua'; font-size: 20px; color: #3a2f2a; }
.mg-bushes { display: flex; justify-content: center; gap: 12px; }
.mg-bush { font-size: 54px; width: 92px; height: 92px; border: 0; border-radius: 20px; background: #e4f3dc; }
.mg-power { position: relative; width: 64px; height: 170px; margin: 0 auto; background: #f1e6d4; border-radius: 18px; overflow: hidden; }
.mg-pzone { left: 0; right: 0; border-radius: 0; }
.mg-pbar { position: absolute; left: 14px; right: 14px; bottom: 0; background: linear-gradient(0deg, #4aa8ff, #7fd3c4); border-radius: 10px; }
.mg-score { min-height: 28px; margin-top: 10px; font-size: 18px; color: #e0625c; }
.mg-skip { margin-top: 6px; border: 0; background: none; color: #9a8a7a; font-size: 13px; text-decoration: underline; }

.mg-bush { transition: transform .45s ease; }

/* ── 화면 배율: 큰 화면(PC 모니터 등)에서는 버튼·글자·창을 화면 크기에 맞춰 키움. 3D 화면은 그대로 ── */
:root { --ui: 1; }
#hud > *:not(#joy), #battle > *, #panel > *, #cut, #toasts, #tut, .mg-card, .askbox, .chapter-card, .screen > *, #invite, #saveChip, #evolve > *, #ending > *, .op-txt, .op-skip { zoom: var(--ui); }
/* 폰을 가로로 눕혔을 때(높이가 낮음): 오른쪽 메뉴를 두 줄로, 미니맵을 작게 */
@media (max-height: 520px) and (orientation: landscape) {
  #hud > #mapBox { zoom: .62; }
  #genderPick img, .pick img { max-height: 34vh; width: auto; }
  .screen .card, #start .card { padding-top: 10px; padding-bottom: 10px; }
  #menuBtns { top: 150px; display: grid; grid-template-columns: repeat(2, 48px); gap: 5px; }
  #menuBtns button { width: 48px; height: 42px; font-size: calc(17px * var(--fs)); border-radius: 12px; }
  #menuBtns button span { font-size: calc(9px * var(--fs)); margin-top: 1px; }
  #menuBtns button kbd { display: none; }
}
/* 폰 가로: 쉬는 조이스틱은 왼쪽 아래 구석, 말 걸기·시점 버튼은 오른쪽 메뉴 왼편 (목표판·메뉴와 겹치지 않게) */
@media (max-height: 520px) and (orientation: landscape) {
  #joy { bottom: 14px; }
  #actBtn { right: 124px; bottom: 16px; width: 68px; height: 68px; }
  #camBtn { right: 134px; bottom: 96px; width: 44px; height: 44px; font-size: 20px; }
}
@media (max-height: 400px) and (orientation: landscape) { #menuBtns { top: 124px; gap: 2px 5px; } #menuBtns button { height: 52px; } }

/* ── 그린 아이콘 (이모지 대신) ── */
.ico { width: 1.25em; height: 1.25em; vertical-align: -0.28em; object-fit: contain; }
.chip .ico { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: 1px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
#menuBtns .mi { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(60,40,20,.25)); }
.bi { width: 1.5em; height: 1.5em; vertical-align: -0.4em; margin-right: 2px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
@media (max-width: 760px) { #menuBtns .mi { width: 28px; height: 28px; } }
@media (max-height: 520px) and (orientation: landscape) { #menuBtns .mi { width: 24px; height: 24px; } }

/* ════════ 프리미엄 스킨: 한지 + 금빛 단청 테두리 (컨셉 시안 기준) ════════ */
:root {
  --paper: #fbf3e3;
  --gold-ring: 0 0 0 2px #f0cf7c, 0 0 0 3.5px #9a6b1f;
  --frame-shadow: 0 10px 24px rgba(70, 45, 15, .28);
  --corners: url(/assets/ui/corner_tl.webp) top 3px left 3px / 24px no-repeat, url(/assets/ui/corner_tr.webp) top 3px right 3px / 24px no-repeat,
             url(/assets/ui/corner_bl.webp) bottom 3px left 3px / 24px no-repeat, url(/assets/ui/corner_br.webp) bottom 3px right 3px / 24px no-repeat;
}
/* 한지 판: HUD 카드·배틀 상태판·창·대화창·확인창 */
.glass, .bbox, .cut-box, .askbox .card, #start .card, .mg-card {
  background: var(--corners), url(/assets/ui/hanji.webp) center / 256px repeat, var(--paper) !important;
  box-shadow: var(--gold-ring), var(--frame-shadow), inset 0 0 0 1px rgba(255, 255, 255, .75) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important;
}
#zoneName, #mapBox { background: url(/assets/ui/hanji.webp) center / 256px repeat, var(--paper) !important; box-shadow: var(--gold-ring), 0 4px 12px rgba(70, 45, 15, .25) !important; }
#mapBox { background: radial-gradient(circle, #fff7e6 60%, #e9d4a6) !important; }
.panel-inner { background: url(/assets/ui/hanji.webp) center / 256px repeat, var(--paper) !important; box-shadow: var(--gold-ring), var(--frame-shadow) !important; }
.panel-inner header { background: linear-gradient(180deg, #2f9b84 0%, #1d6f5e 100%) !important; border-bottom: 3px solid #e2b85a; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); }
.panel-inner header h3 { color: #fff8e6; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); letter-spacing: .5px; }
#panelClose { border-radius: 50% !important; background: radial-gradient(circle at 40% 35%, #fff4d6, #e8c46e) !important; color: #6b4410 !important; box-shadow: 0 0 0 2px #9a6b1f, 0 3px 6px rgba(0, 0, 0, .25) !important; }
/* 오른쪽 메뉴: 옥색 동그란 버튼 + 그린 아이콘 + 한지 이름표 */
#menuBtns button { background: url(/assets/ui/btn_jade.webp) center top / 56px auto no-repeat !important; box-shadow: none !important; width: 62px; height: 78px; padding-top: 10px; justify-content: flex-start; }
#menuBtns button .mi { width: 32px; height: 32px; margin-top: 2px; }
#menuBtns button span { margin-top: 10px !important; padding: 1px 8px; border-radius: 9px; background: var(--paper); color: #5a3b14 !important; font-family: 'Jua'; box-shadow: 0 0 0 1.5px #d9b25c, 0 2px 4px rgba(0, 0, 0, .2); white-space: nowrap; }
html.kb #menuBtns [data-key]::after { top: 0; right: 0; background: #fff4d6; border-radius: 6px; padding: 2px 3px; box-shadow: 0 0 0 1px #c9a24b; }
@media (max-width: 760px) { #menuBtns button { width: 52px; height: 66px; background-size: 46px auto !important; padding-top: 8px; } #menuBtns button .mi { width: 26px; height: 26px; } #menuBtns button span { margin-top: 8px !important; padding: 0 6px; } }
@media (max-height: 520px) and (orientation: landscape) { #menuBtns button { width: 48px; height: 56px; background-size: 40px auto !important; padding-top: 7px; } #menuBtns button span { margin-top: 6px !important; } }
/* 화면 높이가 모자라면 오른쪽 메뉴를 두 줄로 (노트북 1366×768에서 사진·설정이 화면 밖으로 밀리던 문제) */
html.menu2 #menuBtns { display: grid; grid-template-columns: repeat(2, 62px); gap: 2px 6px; } /* 배율(--ui)을 뺀 높이로 판단 → main.js uiScale */
@media (max-width: 760px) and (max-height: 780px) and (orientation: portrait) { #menuBtns { display: grid; grid-template-columns: repeat(2, 52px); gap: 0 4px; } }
/* 배틀 명령 버튼: 색마다 금테 + 입체감 */
#bMenu button.big4 { border: 0 !important; border-radius: 18px; text-shadow: 0 2px 0 rgba(0, 0, 0, .28);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -5px 0 rgba(0, 0, 0, .2), 0 0 0 2px #f2cf7a, 0 0 0 3.5px #8a5c18, 0 6px 14px rgba(0, 0, 0, .3) !important; }
#bMenu .big4.fight { background: linear-gradient(180deg, #ff8d55, #cf4f27) !important; }
#bMenu .big4.tool { background: linear-gradient(180deg, #ffd45e, #d9971a) !important; color: #5a3500 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
#bMenu .big4.tool small { color: rgba(90, 53, 0, .8) !important; }
#bMenu .big4.swap { background: linear-gradient(180deg, #44c4a0, #1d8366) !important; }
#bMenu .big4.run { background: linear-gradient(180deg, #6a7aa0, #39456a) !important; }
#bMenu button:not(.big4) { border: 0 !important; background: url(/assets/ui/hanji.webp) center / 256px repeat, var(--paper) !important; box-shadow: 0 0 0 1.5px #d9b25c, 0 4px 10px rgba(70, 45, 15, .22) !important; }
#bCmd { background: radial-gradient(circle at 40% 30%, #4a8ee6, #1f4d99) !important; box-shadow: 0 0 0 2px #f2cf7a, 0 0 0 3.5px #8a5c18, 0 6px 14px rgba(0, 0, 0, .3) !important; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
/* 배틀 메시지: 먹빛 띠 + 금테 */
#bLog { background: linear-gradient(180deg, #3b3040, #221a27) !important; color: #fff3d6 !important; box-shadow: 0 0 0 2px #e2b85a, 0 0 0 3.5px #6b4a14, 0 6px 16px rgba(0, 0, 0, .35) !important; border-radius: 14px !important; }
/* HP 바: 윤기 있는 그라데이션 */
.hpbar { background: #3c2f2a !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .5); }
.hpbar i { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); } /* 윤기 (경험치·우정 바 색은 그대로) */
.bbox .hpbar:not(.expbar):not(.bondbar) i { background: linear-gradient(180deg, #7ee98c, #2fae4c) !important; }
.bbox .hpbar.mid i { background: linear-gradient(180deg, #ffd66b, #e19a12) !important; }
.bbox .hpbar.low i { background: linear-gradient(180deg, #ff8a7a, #d63d33) !important; }
/* 대화창: 이름표를 리본처럼 */
.cut-box .cut-name, .cut-who { font-family: 'Jua'; }
/* 버튼 공통: 누르면 통통 */
.btn, #menuBtns button, #bMenu button, .fest-tier { transition: transform .12s cubic-bezier(.3, 1.6, .6, 1), filter .12s; }
.btn:active, #menuBtns button:active, #bMenu button:active { transform: scale(.93) !important; }
/* 그린 아이콘은 다른 그림 크기 규칙(.pick img 등)에 휩쓸리지 않게 글자 크기 기준 고정 */
img.ico { width: 1.25em !important; height: 1.25em !important; }
.chip img.ico { width: 1.15em !important; height: 1.15em !important; }
img.bi { width: 1.5em !important; height: 1.5em !important; }

/* ── HUD 2단계: 초상화 카드 + 두루마리 목표 ── */
#profileCard { display: flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px !important; min-width: 0; max-width: min(340px, calc(var(--gw, 100vw) - 200px)); }
.pc-face { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff6df, #e9cf96);
  box-shadow: 0 0 0 2.5px #f0cf7c, 0 0 0 4px #9a6b1f, 0 3px 8px rgba(0, 0, 0, .25); }
.pc-face img { width: 100%; height: 200%; object-fit: cover; object-position: 50% 4%; }
.pc-body { min-width: 0; flex: 1; }
#profileCard .nm { font-size: calc(18px * var(--fs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-title { color: #b5651d; font-size: .7em; display: block; line-height: 1.1; }
.pc-bar { display: flex; align-items: center; gap: 6px; margin: 3px 0 4px; font-family: 'Jua'; font-size: calc(11.5px * var(--fs)); color: #6b4a1a; }
.pc-lv { flex: none; background: #6b4a1a; color: #fff3d6; border-radius: 8px; padding: 0 6px; }
.pc-track { flex: 1; height: 8px; border-radius: 5px; background: #3c2f2a; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); overflow: hidden; min-width: 40px; }
.pc-track i { display: block; height: 100%; background: linear-gradient(180deg, #ffe08a, #e0a21c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4); }
.pc-cap { flex: none; opacity: .8; }
#profileCard .res { gap: 6px !important; margin-top: 0 !important; }
#profileCard .pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 4px; border-radius: 12px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1.5px #d9b25c; font-size: calc(14px * var(--fs)); }
#profileCard .pill b { margin-left: 4px; width: 16px; height: 16px; line-height: 15px; text-align: center; border-radius: 50%; background: #6b4a1a; color: #fff3d6; font-size: 13px; cursor: pointer; }
#profileCard .badges { display: flex; align-items: center; gap: 1px; letter-spacing: 0 !important; margin-top: 3px !important; }
#profileCard .badges img.ico { width: 1.05em !important; height: 1.05em !important; }
.pc-dex { margin-left: 6px; font-family: 'Jua'; color: #6b4a1a; font-size: calc(11.5px * var(--fs)); }
#objective { padding: 6px 10px 6px 6px !important; cursor: pointer; }
#objText { display: flex; align-items: center; gap: 8px; }
.obj-tag { flex: none; font-family: 'Jua'; font-size: calc(12px * var(--fs)); color: #fff; background: linear-gradient(180deg, #ff8d55, #cf4f27); border-radius: 8px; padding: 2px 8px; box-shadow: 0 0 0 1.5px #f2cf7a; }
.obj-t { flex: 1; min-width: 0; font-family: 'Jua'; color: #4a3214; line-height: 1.3; }
.obj-go { flex: none; font-family: 'Jua'; font-size: 20px; color: #9a6b1f; }
@media (max-width: 700px) { .pc-face { width: 54px; height: 54px; } #profileCard { max-width: calc(var(--gw, 100vw) - 150px); } }
#profileCard .pill, .pc-dex { white-space: nowrap; } /* 돈·보석·도감 숫자가 두 줄로 쪼개지지 않게 */
#profileCard .badges, #profileCard .res { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 380px) { .pc-face { width: 42px; height: 42px; } #profileCard { gap: 6px; } .pc-cap { display: none; } #profileCard .pill { font-size: 12.5px; padding: 1px 6px 1px 3px; } }

#profileCard .badges span[style*='opacity'] img.ico { filter: drop-shadow(0 1px 0 rgba(255,255,255,.8)); }

/* ── 3단계: 움직임과 화면 마감 ── */
@keyframes mgPop { from { transform: scale(.88) translateY(12px); opacity: 0; } 60% { transform: scale(1.02); opacity: 1; } to { transform: scale(1) translateY(0); } }
@keyframes mgDrop { from { transform: translateY(-14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mgShine { 0% { box-shadow: 0 0 0 1.5px #d9b25c, 0 0 0 0 rgba(255, 210, 90, .9); background: #fff6d6; } 100% { box-shadow: 0 0 0 1.5px #d9b25c, 0 0 0 10px rgba(255, 210, 90, 0); } }
#panel:not(.hidden) .panel-inner, .askbox .card, .mg-card { animation: mgPop .28s cubic-bezier(.3, 1.4, .5, 1) both; }
.toast { animation: mgDrop .25s ease-out both !important; box-shadow: 0 0 0 1.5px #e2b85a, 0 6px 16px rgba(0, 0, 0, .3); }
#profileCard .pill.bump { animation: mgShine .9s ease-out; }
@media (hover: hover) { #menuBtns button:hover { transform: translateY(-2px) scale(1.04); } #bMenu button:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); } }
/* 3D 화면 색감: 조금 더 선명하고 따뜻하게 + 가장자리 살짝 어둡게 (그래픽 '보통' 이상) */
html.fx-rich #view canvas { filter: saturate(1.12) contrast(1.05) brightness(1.02); }
html.fx-rich #view::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(40, 25, 10, .28) 100%); }
@media (prefers-reduced-motion: reduce) { #panel:not(.hidden) .panel-inner, .askbox .card, .mg-card, .toast, #profileCard .pill.bump { animation: none !important; } }
/* 축제 난이도 버튼: 배틀 버튼처럼 금테 입체 · 창 안 목록 칸: 은은한 금빛 테두리 */
.fest-tier { border: 0 !important; color: #fff !important; text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 2px #f2cf7a, 0 0 0 3.5px #8a5c18, 0 5px 12px rgba(0, 0, 0, .22) !important; }
.fest-tier small { color: rgba(255, 255, 255, .92) !important; }
.fest-tier[data-go="easy"] { background: linear-gradient(180deg, #44c4a0, #1d8366) !important; }
.fest-tier[data-go="normal"] { background: linear-gradient(180deg, #ffcf55, #d9931a) !important; color: #5a3500 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.fest-tier[data-go="normal"] small { color: rgba(90, 53, 0, .85) !important; }
.fest-tier[data-go="hard"] { background: linear-gradient(180deg, #ff7a5c, #c23a2a) !important; }
.panel-inner .list .item, .panel-inner .note, .panel-inner .bubble { box-shadow: 0 0 0 1px #e8d29c, 0 2px 6px rgba(120, 85, 30, .08); }

/* ── 4단계: 배틀 연출 · 대화 이름표 · 조이스틱 · 로딩 · 타이틀 ── */
/* 데미지 숫자: 금테 두른 큰 숫자, 찰떡(효과 굉장)은 금빛, 콕(급소)은 더 크게, 물렁은 작고 회색 */
.dmgnum { font-size: 40px !important; color: #fff !important; -webkit-text-stroke: 0 !important; text-shadow: 0 0 0 #000, 2px 2px 0 #8a2b1f, -2px -2px 0 #8a2b1f, 2px -2px 0 #8a2b1f, -2px 2px 0 #8a2b1f, 0 4px 8px rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; line-height: .95; transform-origin: 50% 80%; animation: dmgPop 1s cubic-bezier(.2, 1.6, .4, 1) forwards !important; }
.dmgnum small { font-size: 18px; color: #fff3c4; text-shadow: 1px 1px 0 #6b4a14, -1px -1px 0 #6b4a14, 1px -1px 0 #6b4a14, -1px 1px 0 #6b4a14; }
.dmgnum.eff { color: #ffe066 !important; font-size: 48px !important; }
.dmgnum.crit { font-size: 52px !important; color: #ffb3a8 !important; }
.dmgnum.weak { font-size: 28px !important; color: #e8e2da !important; }
@keyframes dmgPop { 0% { transform: translate(-50%, 0) scale(.3); opacity: 0; } 18% { transform: translate(-50%, -18px) scale(1.25); opacity: 1; } 35% { transform: translate(-50%, -22px) scale(1); } 100% { transform: translate(-50%, -70px) scale(.95); opacity: 0; } }
.hitring { position: fixed; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none; z-index: 11;
  border: 5px solid var(--c, #fff); box-shadow: 0 0 18px var(--c, #fff), inset 0 0 12px var(--c, #fff); animation: hitRing .55s ease-out forwards; }
@keyframes hitRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(7); opacity: 0; border-width: 1px; } }
/* 대화창 이름표: 옥빛 리본 (먹구름단은 보랏빛) */
.cut-name { display: inline-block; align-self: flex-start; color: #fff8e6 !important; background: linear-gradient(180deg, #33a589, #1d6f5e); padding: 3px 14px 3px 12px; border-radius: 10px 18px 18px 10px;
  box-shadow: 0 0 0 1.5px #f0cf7c, 0 0 0 3px #9a6b1f, 0 3px 6px rgba(0, 0, 0, .2); text-shadow: 0 1px 0 rgba(0, 0, 0, .25); margin-bottom: 4px; }
.cut-name small { color: rgba(255, 248, 230, .85) !important; }
.villain .cut-name { background: linear-gradient(180deg, #7a5fa8, #4a3570) !important; }
.cut-text { color: #3d2a12; }
/* 조이스틱: 한지 고리 + 금테, 손잡이는 옥빛 */
#joy { background: radial-gradient(circle, rgba(251, 243, 227, .55) 55%, rgba(251, 243, 227, .25) 70%) !important; border: 0 !important; box-shadow: 0 0 0 3px rgba(240, 207, 124, .9), 0 0 0 5px rgba(154, 107, 31, .7), 0 6px 14px rgba(0, 0, 0, .2); }
#joyKnob { background: radial-gradient(circle at 40% 35%, #5fd3b3, #1d8366) !important; box-shadow: 0 0 0 2.5px #f0cf7c, 0 0 0 4px #9a6b1f, 0 4px 8px rgba(0, 0, 0, .3); }
/* 로딩: 한지 바탕 + 금빛 꽃 아이콘이 빙글 */
#loading { background: url(/assets/ui/hanji.webp) center / 256px repeat, #fbf3e3 !important; color: #6b4a1a !important; }
#loading .spinner { width: 72px; height: 72px; border: 0 !important; border-radius: 0; background: url(/assets/ui/icons/settings.webp) center / contain no-repeat; animation: spin 1.6s linear infinite; filter: drop-shadow(0 4px 6px rgba(120, 80, 20, .3)); }
#loading p { font-family: 'Jua'; letter-spacing: .5px; }
/* 타이틀 로고: 금빛 빛줄기가 스쳐 지나감 */
#login .logo { position: relative; }
#login .logo b { display: inline-block; color: #ffd84a !important; animation: logoGlow 3.2s ease-in-out infinite; } /* 굵은 외곽선 때문에 글자 채우기 그라데이션 대신 밝기로 반짝 */
@keyframes logoGlow { 0%, 60%, 100% { filter: brightness(1); transform: translateY(0); } 75% { filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 230, 140, .9)); transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { #login .logo b, #loading .spinner { animation: none; } }
/* 아주 센 기술: 화면이 속성 색으로 살짝 번쩍 */
.scrtint { position: fixed; inset: 0; pointer-events: none; z-index: 9; background: radial-gradient(circle, transparent 30%, var(--c, #fff) 130%); opacity: 0; animation: scrTint .45s ease-out; mix-blend-mode: screen; }
@keyframes scrTint { 20% { opacity: .55; } to { opacity: 0; } }

/* 키보드 초점 표시: 마우스·터치에는 안 보이고 Tab으로 옮겼을 때만 금빛 테두리 */
:focus-visible { outline: 3px solid #f2a516; outline-offset: 2px; }
.login-card input:focus-visible, #chatInput:focus-visible { outline: 3px solid #f2a516; outline-offset: 1px; }
.pick:focus-visible { outline: 3px solid #f2a516; outline-offset: 3px; border-color: var(--pri); }
body:has(#panel:not(.hidden)) .ad-offer, body:has(.askbox) .ad-offer { visibility: hidden; } /* 창·물어보기가 열려 있으면 광고 버튼이 그 위를 덮지 않게 */
/* 작은 폰·가로 화면: 첫 파트너를 고른 뒤 '모험 시작' 버튼이 카드 아래로 숨지 않게 항상 바닥에 붙임 */
#step3 > .row:last-child { position: sticky; bottom: -14px; z-index: 2; margin-bottom: -14px; padding: 12px 0 14px; background: linear-gradient(rgba(251, 243, 227, 0), var(--paper) 35%); flex-wrap: nowrap; align-items: center; gap: 8px; }
#step3 > .row:last-child > .btn { width: auto; min-width: 0; margin: 0; } #step3 > .row:last-child > .btn.ghost { padding-left: 14px; padding-right: 14px; }

/* 보석 충전: 첫 구매 특가 강조 */
.list .item.hot { background: linear-gradient(90deg, #fff3d6, #ffe4ef); box-shadow: inset 0 0 0 2px #f2c14e; }
/* 세시 행사 안내 */
.note.sesi { background: linear-gradient(90deg, #fff6e0, #ffeef3); border: 1px solid #f2c14e; }
/* 도감 옛이야기 */
.detail .lore { background: #fff6e0; border-left: 4px solid #e2b85a; padding: 6px 10px; border-radius: 8px; font-size: calc(14px * var(--fs)); line-height: 1.5; }
/* 꾸미기 상점 위: 첫 구매 특가 띠 + 같은 크기 버튼 두 개 */
.store-deal { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 4px 0 6px; padding: 8px 10px; border: 0; border-radius: 14px; background: linear-gradient(90deg, #ffe08a, #ffb3c7); color: #5a3a2a; font-family: 'Jua'; cursor: pointer; box-shadow: inset 0 0 0 2px #f2c14e; }
.store-deal b { font-size: calc(16px * var(--fs)); } .store-deal span { font-size: calc(12.5px * var(--fs)); opacity: .85; }
.store-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px; } .store-links .btn { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; padding-right: 6px; }
/* 친구 초대 버튼 */
.invite-btns { display: grid; gap: 8px; margin-top: 8px; } .invite-btns .btn { width: 100%; text-align: center; text-decoration: none; }
/* 언어 고르기 */
#langPick { display: flex; justify-content: center; margin: 8px auto 0; width: max-content; gap: 4px; background: rgba(255,255,255,.75); border-radius: 18px; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
#langPick button { border: 0; background: transparent; padding: 5px 9px; border-radius: 14px; font: 13px 'Jua', sans-serif; color: #4a3a30; cursor: pointer; }
#langPick button.on { background: #2fa39a; color: #fff; }
.lang-row { flex-wrap: wrap; gap: 6px; }
/* 일본어: 주아 글꼴에 없는 가나·한자는 둥근 일본어 글꼴로 */
html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input { font-family: 'Jua', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', sans-serif; }

/* 넓은 컴퓨터 화면: 게임 화면 양옆에 광고 자리 (js/rails.js). body를 가운데 칸으로 줄이고 transform으로 화면에 고정된 창들도 그 칸 안에 들어가게 함 */
html.rails { --gw: calc(100vw - 360px); background: #2a1f47; }
html.rails body { position: fixed; top: 0; bottom: 0; left: 180px; right: 180px; height: auto; transform: translateZ(0); box-shadow: 0 0 40px rgba(0,0,0,0.45); }
.rail { display: none; position: fixed; top: 0; bottom: 0; width: 180px; align-items: center; justify-content: center; color: #fff; font-family: 'Gowun Dodum', system-ui, sans-serif; text-align: center; }
html.rails .rail { display: flex; }
.rail.l { left: 0; } .rail.r { right: 0; }
.rail-card { width: 156px; padding: 14px 10px; border-radius: 18px; background: rgba(255,255,255,0.08); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rail-card img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35)); }
.rail-card b { font-family: Jua, sans-serif; font-size: 20px; color: #ffe38a; }
.rail-card p { margin: 0; font-size: 14px; line-height: 1.5; word-break: keep-all; }
.rail-big { font-size: 56px; }
.rail-small { opacity: 0.75; font-size: 12px !important; }
/* 출석 도장판 */
.stampbox .card { max-width: 560px; text-align: center; }
.stamp-title { font-family: Jua, sans-serif; font-size: calc(24px * var(--fs)); color: var(--ink); }
.stamps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 12px 0 8px; }
.stamps .st { background: #fff8e8; border: 2px dashed #e6cfa0; border-radius: 14px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 92px; }
.stamps .st b { font-size: calc(12px * var(--fs)); }
.stamps .st i { font-style: normal; font-size: 28px; height: 34px; line-height: 34px; }
.stamps .st small { font-size: calc(10px * var(--fs)); line-height: 1.25; word-break: keep-all; }
.stamps .st.done { background: #e9f8ec; border-style: solid; border-color: #9ad7a6; }
.stamps .st.today { background: #fff0f5; border: 2px solid #ff8fb1; }
.stamps .st.today i { animation: stampIn .55s cubic-bezier(.3, 1.6, .5, 1) .25s both; }
.stamps .st.big { background: #fff3c4; border-color: #f2c14e; }
.stamp-gift { font-family: Jua, sans-serif; font-size: calc(17px * var(--fs)); margin: 6px 0 2px; }
@keyframes stampIn { 0% { transform: scale(3) rotate(-25deg); opacity: 0; } 60% { transform: scale(.85) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); } }
@media (max-width: 520px) { .stamps { grid-template-columns: repeat(4, 1fr); } }