@charset "UTF-8";
:root { color-scheme: dark; --iron:#202c3b; --deep:#121b27; --silver:#edf3f8; --gold:#85e0ce; --steel:#acbdcf; --warning:#ef9e92; --line:#43546b; --sans:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif; --display:var(--sans); }
* { box-sizing:border-box; }
html,body { margin:0; min-width:280px; background:var(--deep); color:var(--silver); font:14px/1.5 var(--sans); }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; color:inherit; border:1px solid var(--line); background:var(--iron); }
button:disabled { opacity:.5; cursor:default; }
button:hover:not(:disabled),a:hover { filter:brightness(1.12); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #a7efe0; outline-offset:3px; }
button:focus:not(:focus-visible),[tabindex="-1"]:focus { outline:none; }
button,input,select { border-radius:5px; }
input { min-height:46px; width:100%; padding:11px 13px; border:1px solid #667585; color:var(--silver); background:#0e1823; }
input,select { font-size:16px; }
input::placeholder { color:#8393a5; }
input:focus { border-color:var(--gold); }
select { min-height:44px; background:var(--iron); color:var(--silver); padding:8px 11px; border:1px solid var(--line); }
h1,h2,h3,p,dl,dd { margin:0; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon,.brand-crest { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.game-viewport { max-width:1800px; margin:auto; isolation:isolate; }
.screen { position:relative; height:100svh; min-height:580px; overflow:hidden; }
.scene-backdrop { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.start-backdrop { background-image:linear-gradient(0deg,#101820 0%,#1018201a 72%),url("../../resource/ui/start-and-lobby/start-backdrop-v1-q88.webp"); }
.lobby-backdrop { background-image:linear-gradient(0deg,#101820 8%,#14202a70 70%),url("../../resource/ui/start-and-lobby/lobby-backdrop-v1-q88.webp"); }
.title-screen { display:grid; grid-template-rows:68px minmax(0,1fr) auto 54px; align-items:center; padding:0 28px; }
.start-header,.lobby-header { display:flex; justify-content:space-between; align-items:center; gap:12px; position:relative; z-index:2; }
.server-status { display:flex; align-items:center; gap:8px; font-size:11px; color:#e1e7ef; text-shadow:0 1px 4px #000; }
.server-status i { width:6px; height:6px; border-radius:50%; background:var(--gold); }
.header-actions { display:flex; gap:7px; }
.icon-button { display:inline-grid; place-items:center; width:44px; height:44px; border:1px solid #607181; background:#172431d9; }
.start-brand { position:relative; z-index:1; align-self:start; margin-top:clamp(35px,8vh,90px); text-align:center; color:#f0dfb5; text-shadow:0 3px 12px #122331; }
.brand-crest { height:58px; width:58px; stroke-width:1; margin-bottom:12px; }
.start-brand h1 { font:700 clamp(32px,4vw,48px)/1.2 var(--display); letter-spacing:.05em; }
.start-brand p { margin-top:12px; font-size:13px; letter-spacing:.04em; color:#e4e1d9; }
.start-character { position:absolute; height:56%; width:70%; max-width:490px; bottom:148px; left:50%; transform:translateX(-50%); z-index:-1; }
.start-character img { height:100%; width:100%; object-fit:contain; filter:drop-shadow(0 8px 20px #070e18); }
.start-actions { position:relative; z-index:2; width:min(360px,100%); margin:auto; display:grid; gap:12px; padding-top:40px; }
.primary-button { color:#192632; background:linear-gradient(#c9f4e9,#d5aa58); border-color:#e8c98a; box-shadow:none; font-weight:700; }
.start-cta { min-height:56px; display:flex; justify-content:space-between; align-items:center; padding:12px 21px; font-size:18px; }
.start-test-link { min-height:44px; display:flex; align-items:center; justify-content:center; gap:9px; font-size:13px; background:#182733e6; border:1px solid #63717a; border-radius:5px; }
.start-test-link .icon { width:19px; height:19px; color:var(--gold); }
.start-footer { display:flex; align-items:center; justify-content:center; gap:12px; padding-bottom:env(safe-area-inset-bottom); color:#a8b7c7; font-size:10px; }
.connection-retry { padding:6px 9px; font-size:11px; }
.invite-banner { text-align:center; font-size:12px; padding:9px; color:#c9f4e9; background:#142330ed; border-radius:4px; }
.lobby-screen { display:grid; grid-template-rows:76px 40px minmax(0,1fr) 78px; padding:0 30px; }
.lobby-header { padding-top:env(safe-area-inset-top); }
.profile { display:flex; align-items:center; gap:10px; padding:0; min-height:48px; background:none; border:0; text-align:left; min-width:0; }
.profile-mark { display:grid; place-items:center; width:43px; height:47px; color:var(--gold); border:1px solid #bda269; background:#1a2935e8; border-radius:4px 4px 14px 14px; }
.profile strong { display:block; font-size:14px; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 3px #000; }
.profile small { display:block; color:#a9bbce; font-size:10px; }
.profile small.is-connected { color:#abcfb3; }
.profile small.is-disconnected { color:#edb08d; }
.resource-hud { display:flex; align-items:center; gap:10px; }
.resource-chip { display:flex; align-items:center; gap:8px; min-height:44px; padding:6px 12px; background:#15232cd9; border-color:#6f7b86; }
.resource-chip .icon { width:19px; height:19px; color:#d9c58a; }
.resource-chip strong { font-size:13px; font-variant-numeric:tabular-nums; }
.item-icon { width:28px; height:28px; object-fit:contain; flex-shrink:0; }
.resource-hud .item-icon { width:22px; height:22px; }
.equipment-row h3 { display:flex; align-items:center; gap:8px; }
.equipment-row h3 .item-icon { width:34px; height:34px; }
.codex-map-art { display:block;width:100%;height:96px;object-fit:cover; }
.codex-monster-art { width:64px;height:64px;position:relative;display:block;overflow:hidden;flex:none; }
.codex-monster-art img { position:absolute;max-width:none; }
.equipment-comparison { display:block;font-size:12px;margin-top:4px; }
.setting-row select[data-game-locale] { min-height:44px;width:100%;font-size:16px; }
.support-slot>img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:3px; }
.supply-button { display:flex; align-items:center; gap:7px; min-height:44px; padding:7px 12px; position:relative; }
.supply-button .icon { width:19px; height:19px; }
.supply-button i { position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.room-shelf { position:relative; z-index:2; }
.current-room-banner { width:100%; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 12px; color:#e9d4a5; font-size:12px; background:#1b2c38ed; border-color:#b79862; }
.current-room-banner>.icon { width:17px; height:17px; }
.lobby-idle-status { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#c6d0d8; }
.lobby-idle-status button { min-height:38px; background:none; border:0; display:flex; align-items:center; gap:6px; padding:4px 3px; }
.lobby-idle-status button .icon { width:18px; height:18px; }
.lobby-idle-status strong { color:#a7efe0; margin-left:6px; }
.lobby-content { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:25px; align-items:center; min-height:0; width:min(1250px,100%); justify-self:center; }
.character-stage { height:100%; position:relative; min-height:0; }
.lobby-character { position:absolute; width:65%; height:88%; max-height:620px; left:50%; bottom:20px; transform:translateX(-50%); object-fit:contain; object-position:bottom; filter:drop-shadow(0 12px 14px #07101c); }
.hero-dais { position:absolute; width:62%; height:13%; bottom:3%; left:19%; border-radius:50%; border:1px solid #ccd5bf55; background:radial-gradient(ellipse,#abb2a82b,transparent 66%); }
.character-caption { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); width:max-content; max-width:78%; text-align:center; text-shadow:0 2px 6px #030a13; }
.hero-profession { color:#a7efe0; font-size:12px; }
.character-caption h2 { font:700 29px/1.3 var(--display); margin-top:3px; color:#f2f6fa; }
.character-meta { font-size:11px; color:#c1ccda; margin-top:5px; }
.hero-detail { margin-top:8px; min-height:36px; border:0; background:#11202ccc; font-size:11px; padding:5px 13px; display:inline-flex; align-items:center; gap:6px; }
.hero-detail .icon { width:14px; height:14px; }
.support-dock { position:absolute; left:1%; top:32%; display:grid; gap:9px; justify-items:center; }
.support-dock>span { font-size:11px; color:#c5d1df; text-shadow:0 1px 4px #000; }
.support-slot { display:grid; place-items:center; width:55px; height:62px; background:#152534d9; border-color:#7a8d9c; position:relative; }
.support-slot>.icon { width:23px; height:23px; color:#b5c8da; }
.support-slot>small { position:absolute; right:5px; bottom:3px; font-size:9px; color:#a1b3c6; }
.support-slot.filled { border-color:var(--gold); }
.companion-selector { position:absolute; right:2%; top:51%; min-height:90px; width:80px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:#162633dc; font-size:10px; border-color:#8f8165; }
.companion-selector>.icon { width:27px; height:27px; color:#b9d8d2; }
.companion-selector small { font-size:9px; color:#a4b6c7; }
.command-panel { align-self:center; padding:17px; background:#172432e8; border:1px solid #667282; border-radius:8px; box-shadow:0 8px 20px #070e1855; }
.mode-options { display:grid; grid-template-columns:1fr; gap:9px; }
.mode-card { position:relative; display:grid; grid-template-columns:40px 1fr; align-items:center; gap:0 11px; min-height:86px; padding:12px 15px; text-align:left; border:1px solid #617080; background:linear-gradient(120deg,#253443,#182634); border-radius:5px; }
.mode-card>.icon { grid-row:1/3; color:#bfd1e4; width:31px; height:31px; }
.mode-card strong { font-size:18px; font-weight:700; align-self:end; }
.mode-card small { color:#a3b7ca; font-size:11px; align-self:start; }
.mode-card.selected { border-color:#e2bb6d; box-shadow:inset 3px 0 #e2bb6d; background:linear-gradient(115deg,#3c4140,#293741); }
.mode-card.selected>.icon,.mode-card.selected strong { color:#f3dbac; }
.mode-selection { display:none; position:absolute; top:9px; right:9px; color:#e8cc94; }
.mode-selection .icon { width:16px; height:16px; }
.mode-card.selected .mode-selection { display:block; }
.training-mode { color:#c0cedc; }
.training-mode[aria-disabled="true"] { opacity:.48; }
.mode-detail { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:15px 1px; font-size:11px; }
.mode-detail strong { color:#a7efe0; }
.mode-detail #mode-description { flex:1; min-width:100px; color:#a6b8cb; }
.mode-capacity { color:#a9bacc; font-size:10px; }
.departure-actions { display:grid; grid-template-columns:1fr 1.3fr; gap:9px; }
.departure-actions button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; font-size:13px; }
.departure-actions .icon { width:20px; height:20px; }
.lobby-nav { display:grid; grid-template-columns:repeat(6,1fr); width:min(650px,100%); justify-self:center; align-self:end; padding:5px 5px calc(7px + env(safe-area-inset-bottom)); border:1px solid #556373; border-bottom:0; border-radius:12px 12px 0 0; background:#14202eed; }
.lobby-nav button { min-height:61px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; background:none; font-size:11px; color:#d1dbe6; position:relative; }
.lobby-nav .icon { width:23px; height:23px; color:#d7be87; }
.friend-request-badge { position:absolute; top:2px; left:calc(50% + 6px); min-width:18px; height:18px; border-radius:9px; background:#d8ae60; color:#182432; text-align:center; font-size:10px; line-height:18px; padding:0 4px; font-weight:700; }
.lobby-retry { position:absolute; z-index:4; top:75px; left:50%; transform:translateX(-50%); min-height:44px; background:#6d312c; border-color:#d27968; padding:8px 17px; }
.status-message { position:fixed; z-index:20; left:50%; bottom:max(86px,calc(env(safe-area-inset-bottom) + 76px)); transform:translateX(-50%); padding:10px 17px; border:1px solid #ad9162; border-radius:5px; color:#f0d7a8; background:#182836f5; font-size:12px; max-width:calc(100% - 30px); width:max-content; pointer-events:none; opacity:0; transition:opacity .12s; box-shadow:0 5px 20px #08121d88; }
.status-message.visible { opacity:1; }
.detail-dialog { width:min(580px,calc(100% - 24px)); max-height:calc(100svh - 30px); margin:auto; padding:0; overflow:auto; color:var(--silver); border:1px solid #8f9aad; border-radius:12px; background:#172431; box-shadow:0 20px 80px #0009; }
.detail-dialog::backdrop { background:#020914ad; }
.dialog-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 19px; border-bottom:1px solid #536172; position:sticky; top:0; z-index:3; background:#1d2c3b; }
.dialog-header h2 { font-size:20px; font-weight:700; }
.dialog-close { border:0; background:none; }
.dialog-body { padding:20px; }
.dialog-footer { padding:12px 20px; border-top:1px solid #435466; font-size:10px; color:#95a9bd; }
.dialog-lead { color:#b4c4d6; font-size:13px; margin-bottom:18px; }
.dialog-section-title { font-size:14px; margin:21px 0 10px; color:#c9f4e9; }
.dialog-muted,.spaced-note { color:#99adbf; font-size:11px; }
.spaced-note { margin:12px 0; }
.dialog-notice { border-left:2px solid #af9461; background:#213040; color:#bccada; font-size:11px; padding:12px; margin:16px 0; }
.dialog-action-row { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:9px; margin-top:20px; }
.dialog-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 15px; color:#1b2836; background:#85e0ce; border-color:#85e0ce; font-size:12px; font-weight:700; }
.dialog-button.secondary { color:#c7d6e5; background:#233446; border-color:#67798c; }
.dialog-button>.icon { width:16px; height:16px; }
.segmented-control { display:flex; gap:5px; padding:4px; border:1px solid #506274; border-radius:6px; background:#111c29; }
.segmented-control button { min-height:44px; flex:1; border:0; background:none; color:#a8bbcd; font-size:12px; padding:7px 8px; }
.segmented-control button[aria-pressed="true"] { color:#c9f4e9; background:#344355; }
.account-form,.profile-form { display:grid; gap:8px; }
.account-form label,.profile-form label { color:#c7d6e5; font-size:12px; margin-top:9px; }
.auth-tabs { margin-bottom:16px; }
.password-field,.input-action-row { display:flex; align-items:stretch; gap:7px; }
.password-field input,.input-action-row input { flex:1; min-width:0; }
.password-field button { min-width:54px; background:#2d3f52; padding:7px; font-size:12px; }
.account-form .dialog-action-row { margin-top:12px; }
.form-error { color:#f0b0a2; font-size:12px; margin:8px 0; }
.account-id-note { color:#9bb0c6; font-size:12px; margin-bottom:14px; }
.account-id-note strong { color:#d8c495; margin-left:9px; }
.account-logout { margin-top:23px; padding-top:16px; border-top:1px solid #47586a; }
.prepared-mode { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:10px 13px; border:1px solid #6e7a88; background:#223446; margin-bottom:17px; }
.prepared-mode>div { display:flex; gap:10px; align-items:center; color:#c9f4e9; }
.prepared-mode>span { color:#9fb4ca; font-size:11px; }
.room-create { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:15px; border:1px solid #526578; background:#213246; }
.room-create h3 { font-size:14px; }
.room-create p { font-size:11px; color:#91a8c0; margin-top:4px; }
.room-join { margin-top:20px; }
.room-join>label { display:block; font-size:12px; margin-bottom:7px; }
.room-join>p { color:#91a8bf; font-size:11px; margin-top:8px; }
.room-code-card { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:13px; background:#111f2c; border:1px solid #7e8b97; }
.room-code-card small { display:block; color:#9cb1c4; font-size:10px; }
.room-code-card strong { font-size:26px; letter-spacing:.12em; color:#edf3f8; }
.room-share-actions { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.room-share-actions .dialog-button { font-size:10px; padding:8px 10px; }
.room-caption { display:flex; justify-content:space-between; gap:12px; color:#a5b8cd; font-size:11px; margin:14px 0; }
.room-online { color:#a7c9b2; }.room-offline { color:#e4a78c; }
.party-row { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:10px; padding:13px 9px; border:1px solid #485d71; background:#1c2d3f; margin-top:7px; }
.party-number { color:#839fb9; font-size:12px; }.party-name { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:13px; }.party-badge { font-size:9px; color:#a7efe0; padding:1px 4px; background:#3e493f; border-radius:3px; }
.party-meta { display:block; margin-top:5px; color:#94a9bf; font-size:10px; }.party-right { text-align:right; font-size:10px; }.party-level,.party-state { display:block; color:#adc2d8; }.party-state.ready { color:#adcfb8; }.party-empty { display:flex; align-items:center; gap:10px; min-height:44px; color:#8198af; font-size:11px; border:1px dashed #495d70; margin-top:7px; padding:9px 12px; }.party-empty>.icon { width:16px; height:16px; }
.sort-label { display:flex; justify-content:space-between; color:#9bb0c6; font-size:10px; margin:17px 0 7px; }.scale-summary,.formation-summary { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #50677c; background:#1c3044; padding:12px; gap:10px; text-align:center; }.scale-summary small,.formation-summary small { display:block; color:#9bb3cb; font-size:10px; }.scale-summary strong,.formation-summary strong { color:#c9f4e9; font-size:22px; font-variant-numeric:tabular-nums; }.scale-summary strong>span { font-size:10px; margin-left:4px; }.boss-scale { grid-template-columns:repeat(2,1fr); }.formation-summary strong { display:block; font-size:16px; }
.selected-base-note { display:flex; align-items:center; gap:10px; padding:12px; font-size:12px; }.selected-base-note small { display:block; color:#9fb2c4; font-size:10px; }
.friend-card { border:1px solid #506779; border-radius:6px; padding:13px; background:#1b2c3d; margin:9px 0; }.friend-row { display:flex; align-items:center; gap:10px; }.friend-avatar { display:grid; place-items:center; width:35px; height:38px; border:1px solid #738497; color:#d3bd85; }.friend-ident { flex:1; min-width:0; }.friend-ident strong { display:block; font-size:12px; overflow-wrap:anywhere; }.friend-ident small { display:block; color:#8fa6bd; font-size:10px; overflow-wrap:anywhere; }.friend-state { font-size:9px; color:#8e9fb2; }.friend-state.online { color:#abcdb5; }.friend-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; margin-top:12px; }.friend-actions .dialog-button { font-size:11px; }.friend-empty { padding:12px; font-size:11px; color:#899fb5; border:1px dashed #4b6277; }.friend-room-summary { font-size:11px; color:#dcc38d; margin-top:12px; }.friend-room-note { color:#c5d3de; font-size:11px; padding:8px; }.friend-request-form .input-action-row { flex-wrap:wrap; }.friend-request-form input { min-width:170px; }.friend-request-form button { margin-left:auto; }.friends-section .dialog-section-title { display:flex; justify-content:space-between; }
.setting-row { margin-bottom:23px; }.setting-row h3 { font-size:14px; margin-bottom:10px; }.setting-row>p,.motion-setting p { font-size:11px; color:#99adc3; margin-top:9px; }.motion-setting { display:flex; align-items:center; justify-content:space-between; gap:15px; }.toggle-button { min-height:44px; min-width:92px; font-size:11px; }.toggle-button[aria-pressed="true"] { border-color:#d9b26d; color:#c9f4e9; }
.mini-character { display:flex; align-items:center; gap:20px; padding:16px; background:#10202e; border-radius:6px; }.mini-character img { width:105px; height:170px; object-fit:contain; }.mini-character h3 { font:700 21px var(--display); margin-bottom:14px; }.mini-label { color:#9aafc3; font-size:10px; margin-bottom:6px; }.character-facts { display:grid; grid-template-columns:54px 1fr; gap:5px 9px; font-size:12px; }.character-facts dt { color:#94aac0; }
.empty-supports { display:grid; gap:7px; }.empty-supports>div { min-height:44px; display:flex; align-items:center; gap:10px; padding:9px 13px; border:1px dashed #536c84; font-size:12px; color:#a8bacb; }.empty-supports .icon { width:20px; height:20px; }.empty-companion { display:flex; align-items:center; gap:13px; padding:18px 12px; border:1px solid #53677b; margin-top:12px; }.empty-companion small { display:block; font-size:11px; color:#98aec4; margin-top:5px; }
.base-level { display:flex; gap:20px; align-items:center; background:#14273a; padding:20px; }.base-level>.icon { height:52px; width:52px; color:#85e0ce; }.base-level p { color:#a1b5cb; font-size:12px; }.base-level strong { font-size:38px; color:#c9f4e9; }.base-level strong>span { font-size:10px; margin-left:7px; }.detail-list>div { display:grid; grid-template-columns:110px 1fr; padding:13px 0; border-bottom:1px solid #475d71; font-size:12px; }.detail-list dt { color:#b9d8d2; }.detail-list dd { color:#afc1d5; }.guide-steps { margin:0; padding-left:20px; }.guide-steps li { margin:15px 0; }.guide-steps strong { color:#c9f4e9; font-size:13px; }.guide-steps p { color:#a3b7cb; font-size:12px; margin-top:5px; }
.roster-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.roster-card { min-height:190px; border:1px solid #6b7e91; background:#102235; display:flex; align-items:center; flex-direction:column; justify-content:center; padding:14px; gap:6px; }.roster-card img { width:85px; height:125px; object-fit:contain; }.roster-card strong { font-size:13px; }.roster-card small { color:#98aec6; font-size:11px; }.character-action-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; }.growth-stat { display:flex; justify-content:space-between; align-items:center; min-height:47px; border-bottom:1px solid #465d72; font-size:13px; }.growth-stat strong { color:#c9f4e9; font-variant-numeric:tabular-nums; }.supply-card { padding:18px; border:1px solid #6c7f90; background:#20374b; }.supply-card h3 { color:#c9f4e9; font-size:17px; }.supply-card p { color:#adbed1; font-size:12px; margin-top:8px; }.roster-empty { color:#a0b3c8; font-size:12px; padding:15px; border:1px dashed #50697f; }
.noscript-note { position:fixed; inset:20px; z-index:100; background:#132331; padding:25px; }
@media (max-width:800px) {
  .title-screen { padding:0 20px; grid-template-rows:64px minmax(0,1fr) auto 50px; }
  .start-brand { margin-top:35px; }.start-brand h1 { font-size:38px; }.start-brand p { font-size:11px; }.brand-crest { width:45px; height:45px; margin-bottom:9px; }
  .start-character { height:53%; bottom:125px; }.start-actions { padding-top:10px; }.start-footer { font-size:9px; }
  .lobby-screen { padding:0 14px; grid-template-rows:67px 38px minmax(0,1fr) 74px; }
  .lobby-content { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:0; align-items:stretch; }
  .character-stage { min-height:200px; }.lobby-character { height:100%; width:68%; bottom:25px; max-height:470px; }.hero-dais { bottom:7%; }.character-caption { bottom:7px; }.character-caption h2 { font-size:23px; }.character-meta { font-size:10px; }.hero-detail { min-height:30px; margin-top:3px; font-size:10px; }
  .support-dock { top:21%; left:0; gap:7px; }.support-dock>span { font-size:9px; }.support-slot { width:45px; height:47px; }.support-slot>.icon { width:20px; height:20px; }.companion-selector { top:47%; right:0; width:65px; min-height:78px; font-size:9px; }.companion-selector small { font-size:8px; }
  .command-panel { padding:0 0 12px; border:0; box-shadow:none; background:none; border-radius:0; }.mode-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.mode-card { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; min-height:88px; padding:9px 4px; text-align:center; background:linear-gradient(#26394beb,#172636f7); }.mode-card>.icon { width:25px; height:25px; }.mode-card strong { font-size:14px; align-self:auto; }.mode-card small { font-size:9px; align-self:auto; }.mode-card.selected { box-shadow:inset 0 2px #e2bb6d; }.mode-selection { top:4px; right:4px; }.mode-selection .icon { width:11px; height:11px; }
  .mode-detail { padding:9px 2px; font-size:10px; }.mode-detail #mode-description { font-size:10px; }.mode-capacity { font-size:9px; }.departure-actions { gap:8px; }.departure-actions button { min-height:47px; font-size:13px; }
  .lobby-nav { width:calc(100% + 28px); border-left:0; border-right:0; border-radius:0; }.lobby-nav button { min-height:60px; }.lobby-nav .icon { width:22px; height:22px; }
  .resource-hud { gap:5px; }.resource-chip { padding:6px 8px; gap:5px; }.resource-chip .icon { width:17px; height:17px; }.supply-button { padding:6px 9px; font-size:11px; gap:4px; }.profile { gap:7px; }.profile-mark { width:35px; height:42px; }.profile strong { max-width:140px; font-size:12px; }.profile small { font-size:9px; }.current-room-banner { font-size:10px; padding:7px 9px; min-height:36px; }.lobby-idle-status { font-size:10px; }
}
@media (max-width:350px) {
  .lobby-screen { padding:0 10px; }.profile strong { max-width:108px; }.resource-chip { padding:6px; }.resource-hud { gap:3px; }.supply-button { padding:6px; }.mode-options { gap:5px; }.mode-card strong { font-size:13px; }.mode-card small { font-size:8px; }.mode-detail #mode-description { display:none; }.mode-detail { justify-content:space-between; }.lobby-nav { width:calc(100% + 20px); }.character-caption h2 { font-size:21px; }.support-slot { width:44px; height:45px; }.companion-selector { width:57px; }
  .dialog-body { padding:16px; }.dialog-header { padding:12px 14px; }.dialog-header h2 { font-size:18px; }.dialog-action-row { gap:7px; }.dialog-button { padding:9px 11px; }.room-code-card { flex-wrap:wrap; }.room-share-actions { width:100%; justify-content:flex-start; }.mini-character { padding:12px; gap:12px; }.mini-character img { width:75px; height:135px; }
}
@media (max-height:600px) and (min-width:650px) {
  .screen { min-height:340px; }.lobby-screen { padding:0 18px; grid-template-rows:57px 31px minmax(0,1fr) 57px; }.lobby-content { grid-template-columns:minmax(0,1fr) 320px; grid-template-rows:1fr; gap:16px; }.character-stage { min-height:0; }.lobby-character { height:105%; bottom:5px; width:50%; }.character-caption { left:27%; bottom:7px; text-align:left; }.character-caption h2 { font-size:18px; }.hero-profession,.hero-detail { display:none; }.support-dock { display:flex; top:auto; bottom:4px; left:51%; gap:5px; }.support-dock>span { display:none; }.support-slot { width:44px; height:44px; }.companion-selector { top:5px; right:0; min-height:64px; width:56px; }.companion-selector small { display:none; }.hero-dais { bottom:0; }.command-panel { padding-bottom:5px; }.mode-card { min-height:73px; }.mode-card>.icon { width:21px; height:21px; }.mode-card small { font-size:8px; }.mode-detail { padding:7px 2px; }.mode-detail #mode-description { display:none; }.departure-actions button { min-height:44px; font-size:12px; }.lobby-nav { width:400px; min-height:55px; border-radius:8px 8px 0 0; padding:0; }.lobby-nav button { min-height:55px; flex-direction:row; gap:8px; }.lobby-nav .icon { width:19px; height:19px; }.profile-mark { height:38px; }.lobby-idle-status button { min-height:31px; }.current-room-banner { min-height:30px; }
  .title-screen { grid-template-rows:50px 1fr auto 30px; padding:0 24px; }.start-brand { text-align:left; margin-top:5px; padding-left:8%; }.brand-crest { display:none; }.start-brand h1 { font-size:36px; }.start-brand p { font-size:10px; margin-top:7px; }.start-character { height:75%; bottom:20px; width:42%; left:72%; }.start-actions { margin:0 0 0 8%; width:290px; gap:7px; padding-top:5px; }.start-cta { min-height:46px; font-size:15px; }.start-test-link { min-height:44px; font-size:11px; }.start-footer { justify-content:flex-start; padding-left:8%; }
}
@media (min-width:801px) { .game-viewport[data-layout="portrait"] .lobby-content { max-width:650px; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }.game-viewport[data-layout="portrait"] .character-stage { min-height:220px; }.game-viewport[data-layout="portrait"] .command-panel { padding:12px; }.game-viewport[data-layout="portrait"] .mode-options { grid-template-columns:repeat(3,1fr); }.game-viewport[data-layout="portrait"] .mode-card { grid-template-columns:30px 1fr; min-height:75px; }.game-viewport[data-layout="portrait"] .mode-card strong { font-size:15px; }.game-viewport[data-layout="portrait"] .mode-card>.icon { width:25px; height:25px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
.motion-reduced * { transition:none!important; }

/* layout viewport를 줄이지 않는 모바일 키보드에서도 현재 입력 페이지와 닫기를 표시합니다. */
html[data-visual-viewport-reduced="true"] .detail-dialog {
  inset:auto; top:calc(var(--visible-top) + 6px); left:calc(var(--visible-left) + var(--visible-width) / 2);
  width:min(760px,calc(var(--visible-width) - 20px)); height:calc(var(--visible-height) - 12px); max-height:680px;
  margin:0; transform:translateX(-50%);
}
html[data-visual-viewport-compact="true"] .dialog-header { min-height:44px; padding:0 8px; }
html[data-visual-viewport-compact="true"] .dialog-header h2 { font-size:16px; }
html[data-visual-viewport-compact="true"] .dialog-body { padding:6px 8px; }
html[data-visual-viewport-compact="true"] .dialog-footer { padding:0 8px; }
html[data-visual-viewport-compact="true"] .paged-field { margin:3px 0; gap:3px; }
html[data-visual-viewport-compact="true"] .paged-field>label { margin:0; font-size:11px; }
html[data-visual-viewport-compact="true"] .account-form { gap:3px; }
html[data-visual-viewport-compact="true"] .room-join { margin-top:0; }
html[data-visual-viewport-compact="true"] .dialog-action-row { margin-top:4px; }
html[data-visual-viewport-compact="true"] .dialog-lead { margin-bottom:4px; font-size:11px; }

/* 뷰포트에 맞춰 배치하며 긴 내용은 실제 페이지 전환으로 제공한다. */
html,body { height:100%; overflow:hidden; }
.screen { height:100vh; height:var(--visible-height,100svh); min-height:0; }
.game-viewport { height:100vh; height:var(--visible-height,100svh); }
.lobby-screen { grid-template-rows:76px 44px minmax(0,1fr) 78px; }
.lobby-idle-status button,.current-room-banner,.hero-detail,.connection-retry { min-height:44px; }
.lobby-idle-status>button:last-child { min-width:44px; justify-content:center; }
.support-slot>span { position:absolute; top:100%; max-width:72px; line-height:1.2; font-size:9px; color:#f0d29b; background:#152534; z-index:2; }
.support-slot.filled { margin-bottom:12px; }
.detail-dialog { height:calc(100svh - 20px); max-height:680px; overflow:hidden; }
.detail-dialog[open] { display:flex; flex-direction:column; }
.dialog-header { flex-shrink:0; padding:10px 16px; min-height:64px; }
.dialog-body { flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:14px 18px; }
.dialog-footer { flex-shrink:0; padding:7px 12px; }
.dialog-body>* { overflow-wrap:break-word; word-wrap:break-word; }
.dialog-body:focus { outline:2px solid #85e0ce; outline-offset:-3px; }
.scroll-continuation { margin:12px 0; text-align:center; }
.battle-settings>label,.battle-settings>select { display:block; width:100%; margin:6px 0; }
.dialog-lead { margin-bottom:12px; }
.dialog-section-title { margin:12px 0 8px; }
.dialog-action-row { margin-top:12px; }
.paged-field { display:grid; gap:6px; margin:8px 0; }
.paged-field>label { font-size:12px; color:#c7d6e5; }
.paged-field .input-action-row select { min-width:0; flex:1; }
.character-choice { display:flex; align-items:center; width:100%; gap:12px; min-height:64px; padding:8px 12px; text-align:left; margin:7px 0; background:#1e3041; border-color:#5e7488; }
.character-choice.selected { border-color:var(--gold); background:#33404a; }
.character-choice img { width:30px; height:46px; object-fit:contain; }
.character-choice>span { flex:1; min-width:0; }
.character-choice strong,.character-choice small { display:block; }
.character-choice strong { font-size:12px; }.character-choice small { color:#a7bacb; font-size:10px; margin-top:3px; }
.character-choice>.icon { width:18px; height:18px; color:#b9d8d2; }
.growth-confirm { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px; margin:10px 0; border:1px solid #5a6c7d; background:#1d3043; }
.growth-confirm span { min-width:0; }.growth-confirm strong,.growth-confirm small { display:block; }.growth-confirm strong { font-size:13px; }.growth-confirm small { margin-top:4px; color:#9cb2c7; font-size:11px; }
.companion-content { margin:10px 0; }
.representative-option>p { margin:8px 0 0; font-size:11px; color:#b9d8d2; }
.segmented-control button small { display:block; font-size:9px; line-height:1.3; margin-top:4px; }
.battle-settings { display:block; margin:12px 0; }
.battle-settings .paged-field { grid-template-columns:70px minmax(0,1fr); align-items:center; }
.battle-settings label { font-size:12px; color:#c7d6e5; }
.supply-rewards { display:grid; gap:10px; padding:14px; border:1px solid #5c7185; background:#1d3043; margin:12px 0; }
.supply-rewards span { display:flex; align-items:center; gap:10px; }.supply-rewards strong { font-size:12px; }.supply-rewards .icon { width:20px; height:20px; color:var(--gold); }
.equipment-row { margin:12px 0; padding:12px; border:1px solid #536b80; background:#1c2f41; }
.equipment-row h3 { font-size:14px; }.equipment-row h3 span { color:#b9d8d2; margin-left:8px; font-size:11px; }.equipment-row p { color:#a2b8cd; font-size:11px; margin:7px 0; }.equipment-row label { display:block; color:#bacee1; font-size:11px; margin:6px 0; }
.equipment-row select { width:100%; }
.equipment-salvage { margin-top:10px; }
.friend-representative { margin-top:9px; color:#c7b991; font-size:11px; }
.mini-character { padding:12px; gap:14px; }.mini-character img { width:70px; height:125px; }.mini-character h3 { font-size:19px; margin-bottom:8px; }.character-facts { font-size:11px; gap:3px 7px; }
.mini-character > picture { display:flex; }
.character-actions .dialog-button { flex:1; }
.setting-row { margin-bottom:10px; }.motion-setting { display:block; }.motion-setting button { margin-top:10px; }
@media (max-height:400px) {
  .mini-character { padding:8px 12px; }
  .mini-character img { height:105px; }
  .mini-character h3 { font-size:17px; line-height:1.2; margin-bottom:6px; }
  .character-facts { grid-template-columns:max-content minmax(0,1fr); }
}
@media (max-width:800px) {
  .lobby-screen { grid-template-rows:64px 44px minmax(0,1fr) 70px; }
  .character-stage { min-height:0; }
  .hero-detail { min-height:44px; margin-top:2px; }
  .lobby-character { bottom:52px; height:calc(100% - 35px); }
  .character-caption { bottom:3px; }.character-caption h2 { font-size:21px; }
  .support-dock { top:13%; }
}
@media (max-width:350px) {
  .dialog-body { padding:12px; }.dialog-header { padding:8px 12px; }
  .equipment-row .input-action-row { flex-wrap:wrap; }.equipment-row select { flex-basis:100%; }
  .detail-list>div { grid-template-columns:90px minmax(0,1fr); }
  .mini-character { gap:9px; padding:9px; }.mini-character img { width:56px; height:110px; }.mini-character h3 { font-size:17px; }
}
@media (max-height:620px) and (max-width:649px) {
  .start-brand { margin-top:10px; }.brand-crest { height:30px; width:30px; margin-bottom:4px; }.start-brand h1 { font-size:36px; }.start-brand p { margin-top:6px; }
  .support-dock { top:6%; gap:4px; }.support-slot { width:44px; height:44px; }
  .support-slot.filled { margin-bottom:0; }.support-slot>span { display:none; }
  .companion-selector { top:15%; min-height:68px; }
  .character-caption h2 { font-size:19px; }.character-meta { margin-top:1px; }
  .mode-card { min-height:76px; }.mode-detail { padding:6px 1px; }.command-panel { padding-bottom:7px; }
}
@media (max-height:600px) and (min-width:650px) {
  .lobby-screen { grid-template-rows:52px 44px minmax(0,1fr) 54px; padding:0 14px; }
  .lobby-content,.game-viewport[data-layout="portrait"] .lobby-content { grid-template-columns:minmax(0,1fr) minmax(275px,42%); grid-template-rows:1fr; gap:12px; max-width:none; }
  .character-stage,.game-viewport[data-layout="portrait"] .character-stage { min-height:0; }
  .lobby-character { height:100%; bottom:0; width:45%; left:28%; }.character-caption { left:26%; bottom:0; max-width:47%; }
  .character-caption h2 { font-size:17px; }.character-meta { font-size:9px; }.hero-profession,.hero-detail { display:none; }
  .support-dock { top:auto; left:51%; bottom:5px; display:flex; gap:4px; }.support-dock>span { display:none; }.support-slot { width:44px; height:44px; }.support-slot.filled { margin:0; }.support-slot>span { display:none; }
  .companion-selector { right:2%; top:4px; min-height:65px; width:57px; font-size:9px; }.companion-selector small { display:none; }
  .command-panel,.game-viewport[data-layout="portrait"] .command-panel { padding:0; background:none; border:0; box-shadow:none; }
  .mode-options,.game-viewport[data-layout="portrait"] .mode-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .mode-card,.game-viewport[data-layout="portrait"] .mode-card { min-height:76px; padding:7px 3px; display:flex; flex-direction:column; justify-content:center; gap:4px; text-align:center; }
  .mode-card strong,.game-viewport[data-layout="portrait"] .mode-card strong { font-size:13px; align-self:auto; }.mode-card small { font-size:8px; align-self:auto; }.mode-card>.icon { width:23px; height:23px; }
  .mode-detail { padding:7px 0; }.mode-detail #mode-description { display:none; }.mode-capacity { margin-left:auto; }
  .departure-actions button { min-height:44px; }.lobby-nav { min-height:54px; width:400px; padding:0; }.lobby-nav button { min-height:54px; flex-direction:row; }
  .profile-mark { height:40px; }.current-room-banner,.lobby-idle-status button { min-height:44px; }
  .detail-dialog { width:min(760px,calc(100% - 20px)); height:calc(100svh - 12px); }
  .dialog-header { min-height:54px; padding:5px 12px; }.dialog-header h2 { font-size:18px; }.dialog-body { padding:9px 15px; }.dialog-footer { padding:5px 12px; }
  .mini-character { padding:8px 12px; }.mini-character img { height:112px; }.character-facts { font-size:10px; }
  .room-code-card { flex-wrap:nowrap; }.room-share-actions { width:auto; }
  .game-viewport[data-layout="portrait"] .lobby-content { width:min(650px,100%); grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 155px; gap:3px; }
  .game-viewport[data-layout="portrait"] .lobby-character { left:35%; width:20%; }
  .game-viewport[data-layout="portrait"] .character-caption { left:10%; bottom:8px; max-width:28%; }
  .game-viewport[data-layout="portrait"] .support-dock { left:57%; }
  .game-viewport[data-layout="portrait"] .companion-selector { right:0; top:0; min-height:60px; }
  .game-viewport[data-layout="portrait"] .mode-detail { padding:6px 0; }
}
@media (max-width:649px) {
  .game-viewport[data-layout="landscape"] .lobby-content { grid-template-columns:minmax(0,1fr) minmax(170px,54%); grid-template-rows:1fr; gap:8px; }
  .game-viewport[data-layout="landscape"] .mode-options { grid-template-columns:1fr; gap:6px; }
  .game-viewport[data-layout="landscape"] .mode-card { display:grid; grid-template-columns:28px minmax(0,1fr); gap:2px 8px; min-height:66px; text-align:left; padding:8px; }
  .game-viewport[data-layout="landscape"] .mode-card>.icon { grid-row:1/3; }.game-viewport[data-layout="landscape"] .mode-card strong,.game-viewport[data-layout="landscape"] .mode-card small { align-self:auto; }
  .game-viewport[data-layout="landscape"] .mode-detail #mode-description { display:none; }
  .game-viewport[data-layout="landscape"] .departure-actions { grid-template-columns:1fr; gap:6px; }
  .game-viewport[data-layout="landscape"] .departure-actions button { min-height:44px; font-size:12px; }
  .game-viewport[data-layout="landscape"] .character-caption { max-width:100%; width:100%; }.game-viewport[data-layout="landscape"] .character-caption h2 { font-size:14px; }
  .game-viewport[data-layout="landscape"] .lobby-character { width:85%; bottom:75px; height:calc(100% - 120px); }
  .game-viewport[data-layout="landscape"] .support-dock { top:4px; left:0; gap:4px; }.game-viewport[data-layout="landscape"] .support-dock>span { display:none; }
  .game-viewport[data-layout="landscape"] .companion-selector { top:4px; right:0; min-height:66px; width:55px; }
  .game-viewport[data-layout="landscape"] .hero-detail { padding:5px; font-size:9px; }
}

/* 카카오톡 우선: 장식 이미지 없이 같은 여백·색·타이포를 공유합니다. */
.start-backdrop { background-image:linear-gradient(0deg,rgba(18,27,39,.96),rgba(18,27,39,.18) 75%),url('/resource/ui/runtime-v5/start-backdrop.webp'); }
.lobby-backdrop { background-image:linear-gradient(0deg,rgba(18,27,39,.94),rgba(18,27,39,.42) 60%,rgba(18,27,39,.72)),url('/resource/ui/runtime-v5/lobby-backdrop.webp'); }
button,input,select,.start-test-link { border-radius:10px; }
button { border-color:#43546b; background:#202c3b; box-shadow:none; }
button:hover:not(:disabled),a:hover { filter:none; }
button:hover:not(:disabled) { background:#2b3a4d; }
button:active:not(:disabled) { background:#314358; }
.primary-button,.dialog-button:not(.secondary) { background:#85e0ce; border-color:#85e0ce; color:#102b30; box-shadow:none; text-shadow:none; }
.primary-button:hover:not(:disabled),.dialog-button:not(.secondary):hover:not(:disabled) { background:#a1eadc; border-color:#a1eadc; color:#102b30; }
.primary-button:active:not(:disabled),.dialog-button:not(.secondary):active:not(:disabled) { background:#65cab7; border-color:#65cab7; }
.start-brand { color:#f2f6fa; text-shadow:0 2px 16px rgba(9,17,29,.3); }
.start-brand h1 { font-family:var(--sans); letter-spacing:-.035em; word-break:keep-all; overflow-wrap:break-word; text-wrap:balance; }
.start-brand p { color:#c6d3df; letter-spacing:.04em; }
.brand-crest { color:#85e0ce; width:48px; height:48px; }
.start-character img,.lobby-character { filter:none; }
.profile-mark { border:1px solid #43546b; background:#202c3b; border-radius:12px; color:#85e0ce; }
.profile-mark .icon { width:25px; height:25px; }
.lobby-header { text-shadow:none; }
.resource-chip,.supply-button { background:#202c3b; border-color:#43546b; color:#edf3f8; }
.command-panel,.lobby-nav,.detail-dialog { border:1px solid #43546b; border-radius:14px; background:#182432; box-shadow:0 8px 28px rgba(7,15,26,.18); }
.mode-card,.character-choice,.friend-card,.room-code-card,.prepared-mode,.supply-card,.equipment-row,.growth-confirm,.room-create,.support-slot,.companion-selector,.mini-character,.supply-rewards,.party-row { border-color:#43546b; border-radius:10px; background:#202d3d; box-shadow:none; }
.mode-card { color:#edf3f8; }
.mode-card.selected,.character-choice.selected { border-color:#85e0ce; background:#213b40; box-shadow:none; }
.mode-card.selected strong,.mode-card.selected>.icon { color:#a7efe0; }
.mode-card>.icon { width:30px; height:30px; color:#b7c7d7; }
.mode-card small { color:#bccbd8; }
.mode-selection { color:#85e0ce; }
.lobby-nav { border-bottom:0; border-radius:14px 14px 0 0; }
.lobby-nav button { background:none; color:#c7d5e2; }
.lobby-nav button:hover { background:#243449; }
.lobby-nav .icon { width:23px; height:23px; color:#b6cbdc; }
.dialog-header { background:#182432; border-bottom:1px solid #34465c; }
.dialog-header h2 { color:#f2f6fa; font-family:var(--sans); letter-spacing:-.02em; }
.dialog-footer,.dialog-fixed-actions,.dialog-content-navigation { background:#182432; border-color:#34465c; }
.dialog-close { background:none; color:#c9d7e4; }
.dialog-body { color:#edf3f8; }
.dialog-lead,.dialog-muted,.spaced-note,.room-caption,.party-meta,.party-level,.party-state { color:#b9c9d9; }
.segmented-control { border-color:#34465c; border-radius:10px; background:#121d2b; }
.segmented-control button { color:#b8cadb; background:none; }
.segmented-control button[aria-pressed="true"] { color:#a7efe0; background:#24434a; }
.dialog-notice { background:#243344; color:#c4d2df; border-color:#85e0ce; border-radius:0 8px 8px 0; }
.detail-list dd,.setting-row>p,.motion-setting p { color:#b9c9d9; }
input,select { background:#121d2b; border-color:#526781; color:#edf3f8; }
input:focus,select:focus { border-color:#85e0ce; }
.support-slot>img { border-radius:8px; padding:0; }
.support-slot.filled { border-color:#85e0ce; }
.support-slot>span { color:#d3e7e3; background:#202d3d; }
.formation-summary { background:#202d3d; border-color:#43546b; border-radius:10px; padding:7px; gap:5px; }
.formation-summary button { min-width:44px; min-height:52px; padding:4px; border:0; background:none; color:#edf3f8; }
.formation-summary small { color:#b9c9d9; }
.formation-summary button:hover { background:#2b3a4d; }
.departure-party{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:5px}
.departure-party button{display:flex;align-items:center;gap:6px;text-align:left;min-width:0;min-height:52px}
.departure-party button>span{min-width:0}
.departure-party strong,.departure-party em,.departure-party small{display:block;overflow-wrap:anywhere}
.departure-party strong{font-size:12px;line-height:1.25;color:#edf3f8}
.departure-party small{font-size:10px;line-height:1.2}
.departure-party em{font-size:11px;font-style:normal;line-height:1.25;color:#b9c9d9}
.departure-party .departure-main{grid-column:1/-1;border-bottom:1px solid #43546b!important;min-height:64px}
.departure-main[data-element="화"]{box-shadow:inset 3px 0 #df7244}
.departure-main[data-element="수"]{box-shadow:inset 3px 0 #88cfd0}
.departure-main[data-element="뇌"]{box-shadow:inset 3px 0 #b49bd9}
.departure-main[data-element="풍"]{box-shadow:inset 3px 0 #a2caa7}
.departure-main[data-element="토"]{box-shadow:inset 3px 0 #caa66d}
.departure-party button>img{width:46px;height:52px;object-fit:contain;flex-shrink:0}
.departure-party .departure-main>img{width:52px;height:58px}
.departure-party button>.icon{width:28px;height:28px;flex-shrink:0}
.departure-support-art{display:flex;align-items:center;max-width:64px;flex-shrink:0}
.departure-support-art img{width:24px;height:34px;object-fit:contain}
.departure-support-art img+img{margin-left:-5px}
.departure-support-art>.icon{width:28px;height:28px}
.dialog-fixed-actions { flex-shrink:0; padding:6px 12px; border-top:1px solid #34465c; }
.dialog-fixed-actions .dialog-action-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; gap:7px; }
.dialog-fixed-actions .room-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dialog-fixed-actions button { min-width:44px; padding:7px 5px; font-size:11px; }
.status-message { border:1px solid #526781; border-radius:10px; background:#202d3d; color:#edf3f8; box-shadow:0 5px 20px rgba(7,15,26,.2); }
.hero-dais { background:none; border:0; }
@media (max-width:800px) {
  .mode-card>.icon { width:32px; height:32px; }
  .command-panel { background:none; border:0; box-shadow:none; }
  .profile-mark .icon { width:36px; height:36px; }
  .brand-crest { width:62px; height:62px; }
}
@media (max-width:649px) {
  .start-backdrop { background-image:linear-gradient(0deg,rgba(18,27,39,.96),rgba(18,27,39,.16) 85%),url('/resource/ui/runtime-v5/start-backdrop-mobile.webp'); }
  .lobby-backdrop { background-image:linear-gradient(0deg,rgba(18,27,39,.94),rgba(18,27,39,.42) 60%,rgba(18,27,39,.72)),url('/resource/ui/runtime-v5/lobby-backdrop-mobile.webp'); }
  .game-viewport[data-layout="landscape"] .mode-card>.icon { width:28px; height:28px; }
  .dialog-fixed-actions { padding-inline:8px; }
}
@media (max-height:620px) and (max-width:649px) { .brand-crest { width:30px; height:30px; }.mode-card>.icon { width:27px; height:27px; } }
@media (max-height:600px) and (min-width:650px) { .mode-card>.icon,.game-viewport[data-layout="portrait"] .mode-card>.icon { width:27px; height:27px; }.lobby-nav .icon { width:24px; height:24px; }.command-panel { background:none; border:0; box-shadow:none; }.lobby-nav button { gap:5px; } }

.dialog-content-navigation { flex-shrink:0; padding:4px 12px; background:#182432; }
.dialog-content-navigation .segmented-control { margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.dialog-content-navigation button { min-width:0; min-height:44px; padding:6px 3px; font-size:12px; overflow-wrap:anywhere; }
.dialog-content-navigation .segmented-control button { border-image:none!important; background:none!important; border:0; border-bottom:2px solid transparent; color:#b9c9d9; }
.dialog-content-navigation .segmented-control button[aria-pressed="true"] { border-bottom-color:#85e0ce; color:#c9f4e9; background:#24434a!important; }
.codex-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.codex-card { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:7px; width:100%; min-height:100px; padding:8px; color:#edf3f8; background:#202d3d; border:1px solid #43546b; text-align:left; }
.codex-card:hover,.codex-card:focus-visible { background:#2b3a4d; border-color:#dfbe79; }
.codex-card { border-radius:10px; background:#202d3d; }
.codex-card>span { min-width:0; }
.codex-card strong,.codex-card small,.codex-card em { display:block; line-height:1.35; }
.codex-collection-status { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:5px 4px; font-size:12px; color:#c9f4e9; }
.codex-progress-track { flex:1; max-width:160px; }
.codex-progress-track progress { width:100%; height:6px; accent-color:#85e0ce; }
.codex-filter button { min-height:44px; font-size:12px; }
.codex-entry-navigation { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:center; margin-top:6px; }
.codex-entry-navigation button { min-height:44px; border:1px solid #43546b; background:#202d3d; color:#edf3f8; font-size:12px; padding:5px; }
.codex-entry-navigation button:disabled { opacity:.45; }
.codex-entry-navigation span { min-width:40px; text-align:center; font-size:12px; color:#b9d8d2; }
.codex-empty { padding:12px 4px; }
.dialog-content-navigation[data-compact-row="true"] .codex-toolbar { display:grid; grid-template-columns:minmax(0,1.35fr) auto minmax(0,1fr); align-items:center; gap:6px; }
.dialog-content-navigation[data-compact-row="true"] .codex-toolbar>.segmented-control:only-child { grid-column:1/-1; }
.dialog-content-navigation[data-compact-row="true"] .codex-toolbar .segmented-control button { padding:5px 2px; font-size:11px; min-height:44px; }
.dialog-content-navigation[data-compact-row="true"] .codex-collection-status { max-width:86px; padding:0; font-size:11px; }
.dialog-content-navigation[data-compact-row="true"] .codex-progress-track { display:none; }
.dialog-content-navigation[data-compact-row="true"] .codex-entry-navigation { grid-column:2/-1; margin:0; }
.growth-goal { padding:12px; margin:8px 0; border:1px solid #43546b; border-radius:10px; background:#202d3d; }
.growth-goal-heading { display:flex; gap:10px; align-items:center; color:#edf3f8; }
.growth-goal-heading>span { color:#b9c9d9; font-variant-numeric:tabular-nums; font-size:15px; }
.growth-goal h3 { font-size:16px; line-height:1.4; }
.growth-goal p { font-size:13px; line-height:1.45; margin:8px 0; color:#bac9d8; }
.growth-goal button { min-height:44px; width:100%; }
.room-directory-card,.notebook-goal { padding:10px; margin:8px 0; border:1px solid #43546b; background:#202d3d; }
.room-directory-card h3,.notebook-goal h3 { font-size:16px; line-height:1.4; color:#edf3f8; }
.room-directory-card p,.notebook-goal p { font-size:13px; line-height:1.45; margin:6px 0; color:#bac9d8; }
.room-directory-card button,.notebook-goal button { width:100%; min-height:44px; }
.notebook-progress progress { width:100%; height:8px; accent-color:#85e0ce; }
.notebook-options .dialog-button { width:100%; margin:4px 0; white-space:normal; overflow-wrap:anywhere; }
.room-search h3 { font-size:16px; margin:8px 0; }
.room-search .dialog-button { width:100%; }
#progression-goals-entry { min-height:44px; max-width:45%; color:#a7efe0; }
#progression-goals-entry span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.codex-card strong { font-size:13px; font-weight:700; }
.codex-card small { margin-top:4px; font-size:12px; color:#b9c9d9; }
.codex-card em { margin-top:5px; font-size:11px; color:#b9d8d2; font-style:normal; }
.codex-card-portrait { width:54px; height:64px; object-fit:contain; }
.codex-card .item-icon { width:48px; height:54px; object-fit:contain; }
.codex-card-map { width:54px; height:64px; object-fit:cover; border:1px solid #43546b; }
.codex-detail-heading { display:flex; gap:12px; align-items:center; padding-bottom:8px; }
.codex-detail-heading>img,.codex-detail-heading>picture>img { width:64px; height:74px; object-fit:contain; }
.codex-detail-heading>picture { display:block; flex:none; width:64px; height:74px; }
.codex-detail-heading .item-icon { width:56px; height:64px; }
.codex-detail-heading h3 { font-size:18px; line-height:1.3; color:#edf3f8; }
.codex-detail-heading p { margin:4px 0 0; font-size:12px; color:#b9c9d9; }
.codex-detail>.dialog-lead,.codex-detail>.dialog-muted { font-size:13px; line-height:1.5; margin:8px 0; }
.codex-detail>.codex-map-art { width:100%; height:90px; object-fit:cover; }
.codex-fixed-actions>.dialog-action-row { display:contents; }
.codex-fixed-actions>.spaced-note { grid-column:1/-1; margin:0; }
@media(max-width:350px) {
  .codex-card { grid-template-columns:42px minmax(0,1fr); gap:5px; padding:6px; min-height:105px; }
  .codex-card-portrait { width:42px; height:60px; }
  .codex-card .codex-monster-art { transform:scale(.7); transform-origin:left center; width:44px; }
  .codex-card .item-icon,.codex-card-map { width:40px; }
}

/* 노치가 있는 모바일 가로 화면에서도 가장자리 버튼을 표시 영역 안에 둡니다. */
@media (hover:none) and (pointer:coarse) {
  .title-screen,.lobby-screen { padding-left:max(12px,env(safe-area-inset-left,0px)); padding-right:max(12px,env(safe-area-inset-right,0px)); }
}

/* 짧은 카카오톡 가로 화면에서도 캐릭터와 출전 행동이 서로 덮이지 않습니다. */
@media (max-height:420px) and (min-width:480px) {
  .lobby-screen { padding:0 12px; grid-template-rows:52px 44px minmax(0,1fr) 52px; }
  .lobby-content { grid-template-columns:minmax(0,1fr) minmax(250px,49%); grid-template-rows:1fr; gap:10px; }
  .character-stage { min-height:0; }
  .lobby-character { height:calc(100% - 35px); bottom:35px; width:58%; left:49%; }
  .character-caption { left:49%; bottom:0; max-width:66%; }
  .character-caption h2 { font-size:17px; }
  .character-meta { font-size:9px; margin-top:1px; }
  .hero-profession,.hero-detail { display:none; }
  .support-dock { top:3px; left:0; bottom:auto; display:grid; gap:4px; }
  .support-dock>span,.support-slot>span { display:none; }
  .support-slot { width:44px; height:44px; }
  .support-slot.filled { margin:0; }
  .companion-selector { top:6px; right:0; width:54px; min-height:64px; font-size:9px; }
  .companion-selector small { display:none; }
  .command-panel { padding:0; border:0; background:none; box-shadow:none; }
  .mode-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .mode-card { min-height:74px; padding:6px 3px; gap:3px; }
  .mode-card>.icon { width:23px; height:23px; }
  .mode-card strong { font-size:12px; }
  .mode-card small { font-size:8px; }
  .mode-detail { padding:7px 0; }
  .mode-detail #mode-description { display:none; }
  .mode-capacity { margin-left:auto; }
  .departure-actions button { min-height:44px; font-size:12px; }
  .lobby-nav { width:100%; min-height:52px; padding:0; }
  .lobby-nav button { min-height:52px; gap:2px; }
  .lobby-nav .icon { width:21px; height:21px; }
  .profile-mark { width:35px; height:40px; }
  .profile-mark .icon { width:25px; height:25px; }
  .detail-dialog { width:calc(100% - 20px); height:calc(100svh - 12px); }
  .dialog-header { min-height:52px; padding:4px 12px; }
  .dialog-body { padding:8px 12px; }
  .dialog-footer { padding:4px 12px; }
  .title-screen { grid-template-rows:48px minmax(0,1fr) auto 28px; padding:0 24px; }
  .start-brand { text-align:left; margin-top:4px; padding-left:5%; }
  .brand-crest { display:none; }
  .start-brand h1 { font-size:34px; max-width:260px; }
  .start-brand p { font-size:10px; margin-top:6px; }
  .start-character { height:75%; bottom:20px; width:42%; left:74%; }
  .start-actions { margin:0 0 0 5%; width:260px; gap:7px; padding-top:5px; }
  .start-cta { min-height:46px; font-size:15px; }
  .start-test-link { min-height:44px; font-size:11px; }
  .start-footer { justify-content:flex-start; padding-left:5%; }
}

@media (max-width:800px) {
  .lobby-nav button { padding:3px 2px; }
  .lobby-nav button>span { font-size:10px; line-height:1.3; word-break:keep-all; text-wrap:balance; }
}

/* 긴 번역도 grid의 최소 폭을 키우지 않고 화면 안에서 줄바꿈합니다. */
.start-brand { min-width:0; width:100%; max-width:100%; }
.start-brand h1,.start-brand p { max-width:100%; overflow-wrap:break-word; }
html[data-game-locale="ja"] .start-brand h1 { word-break:normal; line-break:strict; }
@media (max-width:649px) and (orientation:portrait) { .start-character { height:45%; } }
html[data-game-locale="ja"] .start-brand h1 { text-wrap:wrap; }

/* 한손(왼손 또는 오른손) 모두 같은 하단 행에서 종료와 주 행동에 닿습니다. */
.dialog-fixed-actions [data-thumb-action-count="1"] { grid-template-columns:1fr; }
.dialog-fixed-actions [data-thumb-action-count="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
#dialog-thumb-close { min-width:44px; min-height:44px; }

.start-actions .header-actions { justify-content:flex-end; }
@media (max-width:1000px) {
  body[data-control-hand] .start-actions { width:min(270px,100%); padding-top:6px; gap:7px; }
  body[data-control-hand="right"] .start-actions { margin-left:auto; margin-right:0; }
  body[data-control-hand="left"] .start-actions { margin-left:0; margin-right:auto; }
  body[data-control-hand="left"] .start-actions .header-actions { justify-content:flex-start; }
  body[data-control-hand] .lobby-screen { grid-template-rows:60px 26px minmax(0,1fr) 104px; }
  body[data-control-hand] .lobby-nav { width:min(270px,100%); grid-template-columns:repeat(3,minmax(0,1fr)); padding:2px 2px calc(4px + env(safe-area-inset-bottom)); align-self:end; }
  body[data-control-hand] .lobby-nav button { min-height:44px; flex-direction:row; gap:4px; padding:4px 2px; }
  body[data-control-hand] .lobby-nav .icon { width:18px; height:18px; }
  body[data-control-hand="right"] .lobby-nav { justify-self:end; }
  body[data-control-hand="left"] .lobby-nav { justify-self:start; }
  body[data-control-hand] .departure-actions { width:min(270px,100%); }
  body[data-control-hand="right"] .departure-actions { margin-left:auto; }
  body[data-control-hand="left"] .departure-actions { margin-right:auto; }
  body[data-control-hand] .detail-dialog { transform:none; width:min(320px,calc(var(--visible-width,100vw) - 16px)); height:min(420px,calc(var(--visible-height,100svh) - 16px)); max-height:calc(var(--visible-height,100svh) - 16px); margin:0; top:auto; bottom:calc(100vh - var(--visible-top,0px) - var(--visible-height,100vh) + 8px); }
  body[data-control-hand="right"] .detail-dialog { left:auto; right:calc(100vw - var(--visible-left,0px) - var(--visible-width,100vw) + 8px); }
  body[data-control-hand="left"] .detail-dialog { left:calc(var(--visible-left,0px) + 8px); right:auto; }
  body[data-control-hand] .dialog-header { padding:5px 12px; min-height:54px; }
  body[data-control-hand] .dialog-body { padding:8px 12px; }
}
@media (max-width:1000px) and (max-height:600px) {
  body[data-control-hand] .game-viewport[data-layout] .mode-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  body[data-control-hand] .game-viewport[data-layout] .mode-card { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-height:64px; padding:5px 3px; text-align:center; }
  body[data-control-hand] .game-viewport[data-layout] .mode-card>.icon { width:20px; height:20px; }
  body[data-control-hand] .game-viewport[data-layout] .mode-card strong { font-size:12px; align-self:auto; }
  body[data-control-hand] .game-viewport[data-layout] .mode-card small { font-size:8px; align-self:auto; }
  body[data-control-hand] .game-viewport[data-layout] .departure-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  body[data-control-hand] .game-viewport[data-layout] .departure-actions button { font-size:10px; }
  body[data-control-hand] .command-panel { padding:6px; }
  body[data-control-hand] .mode-detail { padding:3px 0; }
}

/* R96: one lobby message element, including the native dialog top layer. */
.status-message { display:flex; align-items:center; gap:10px; z-index:220; max-width:420px; width:calc(100% - 24px); box-sizing:border-box; pointer-events:auto; padding:8px 10px; }
.status-message[hidden] { display:none; }
#status-message-text { flex:1; min-width:0; max-height:96px; overflow-y:auto; overflow-wrap:break-word; word-wrap:break-word; }
#status-message-dismiss { flex:none; width:44px; height:44px; min-height:44px; border:0; border-radius:8px; background:#33465c; color:#edf3f8; font-size:22px; }
.status-message[data-priority="error"],.status-message[data-priority="critical"] { border-color:#d99885; }
.start-actions>.status-message { position:static; width:100%; max-width:none; transform:none; margin:0; box-shadow:none; }
.detail-dialog>.status-message { position:static; flex:none; width:auto; max-width:none; margin:0 8px 6px; transform:none; box-shadow:none; }
@media (max-width:760px), (max-height:540px) {
  body>.status-message { bottom:114px; width:270px; max-width:calc(100% - 20px); transform:none; left:10px; right:auto; }
  body[data-control-hand="right"]>.status-message { left:auto; right:10px; }
  body[data-control-hand]>.status-message { bottom:114px; }
  .detail-dialog>.status-message #status-message-text { max-height:64px; }
}
html[data-visual-viewport-compact="true"] body[data-control-hand] .detail-dialog>.status-message { min-height:44px; height:44px; padding:0 4px; margin:0 8px; }
html[data-visual-viewport-compact="true"] body[data-control-hand] .detail-dialog #status-message-text { max-height:40px; }
html[data-visual-viewport-compact="true"] body[data-control-hand] .dialog-header { min-height:44px; padding:0 12px; }
html[data-visual-viewport-compact="true"] body[data-control-hand] .dialog-fixed-actions { padding:0 8px; }
html[data-visual-viewport-compact="true"] body[data-control-hand] .dialog-body { padding:0 8px; }

/* R99: 첫 목표와 다음 행동은 해당 화면의 설명으로 표시합니다. */
.novice-start-hint{font-size:12px;line-height:1.5;color:#b9c9d9;text-align:center;margin:0}
.novice-departure-help{font-size:13px;line-height:1.6;color:#c5d5df;margin:10px 0}
.mode-card strong,.mode-card small{white-space:normal;overflow-wrap:break-word;line-height:1.35}
@media(max-height:400px){.novice-start-hint{font-size:11px}.start-actions{gap:6px}}

/* Reserve the figure and caption separately while preserving horizontal anchors. */
.game-viewport[data-layout] .character-stage {
  display:flex;
  flex-direction:column;
}
/* A stable wrapper reserves space in WebP picture and direct PNG paths. */
.game-viewport[data-layout] .character-stage > .character-figure {
  position:relative;
  flex:1 1 0%;
  min-height:0;
}
.game-viewport[data-layout] .character-stage .lobby-character {
  bottom:0;
  height:100%;
}
.game-viewport[data-layout] .character-stage .character-caption {
  position:relative;
  flex:0 0 auto;
  bottom:auto;
  margin-top:8px;
}

/* Short portrait: text and the unchanged 44px detail target share one row. */
@media (max-height:800px) {
  .game-viewport[data-layout="portrait"] .character-stage .character-caption {
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .game-viewport[data-layout="portrait"] .character-caption-text {
    min-width:0;
  }
  .game-viewport[data-layout="portrait"] .character-caption-text .hero-profession {
    display:inline-block;
    margin-right:8px;
  }
  .game-viewport[data-layout="portrait"] .character-caption-text h2 {
    display:inline-block;
    margin-top:0;
  }
  .game-viewport[data-layout="portrait"] .character-caption-text .character-meta {
    margin-top:2px;
  }
  .game-viewport[data-layout="portrait"] .character-caption .hero-detail {
    flex:0 0 auto;
    margin-top:0;
    margin-left:12px;
  }
  body[data-control-hand="left"] .game-viewport[data-layout="portrait"] .character-caption {
    flex-direction:row-reverse;
  }
  body[data-control-hand="left"] .game-viewport[data-layout="portrait"] .character-caption .hero-detail {
    margin-left:0;
    margin-right:12px;
  }
}

.codex-monster-preview{display:flex;align-items:center;justify-content:center;width:64px;height:64px;flex:none}
.codex-monster-preview picture,.codex-monster-preview img{width:100%;height:100%;object-fit:contain}
.codex-detail-heading .codex-monster-preview{width:100px;height:116px}
.codex-preview-note{clear:both}