/* 화면 공통 다듬기(UX 계획 2026-10-16): 창 포커스 · SPHERE LIVE 칩 · 서예 실시간 필력 등 */
/* 창을 열 때 포커스를 받는 바깥 틀(#modal)에는 브라우저 기본 테두리를 그리지 않는다. 안쪽 버튼의 focus-visible은 그대로. */
#rpg-app #modal:focus{outline:none}

/* SPHERE LIVE: 공연장에서 먼 곳에선 한 줄 칩 */
#rpg-app .rpg-game .live-hud.compact{padding:0!important;min-width:0!important;width:auto!important;background:none!important;box-shadow:none!important;border:0!important}
#rpg-app .rpg-game .live-hud.compact::before{display:none!important}
#rpg-app .rpg-game .lv-chip{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(28,30,44,.72);color:#fff;font:600 12px/1 "Noto Sans KR",sans-serif;cursor:pointer;pointer-events:auto}
#rpg-app .rpg-game .lv-chip b{font:800 10.5px/1 "Outfit",sans-serif;letter-spacing:.12em;color:#ffd6ec}
#rpg-app .rpg-game .lv-chip em{font-style:normal;color:rgba(255,255,255,.7)}

/* 서예: 쓰는 동안 실시간 필력 */
#rpg-app .duel2 .d2-live{color:#f2d48a;white-space:nowrap}
#rpg-app .duel2 .d2-live b{color:#fff3cf}
#rpg-app .duel2 .d2-practice{margin-left:8px;padding:4px 11px;border-radius:999px;border:1px solid rgba(237,200,120,.55);background:rgba(237,200,120,.12);color:#f6e2b0;font:700 12px/1.3 "Noto Sans KR",sans-serif;cursor:pointer;vertical-align:middle}
#rpg-app .duel2 .d2-practice:hover{background:rgba(237,200,120,.24)}
#rpg-app .duel2 .d2-practice:focus-visible{outline:2px solid #edc878;outline-offset:2px}

/* 캐릭터 모습 ↔ 옷장 탭 */
#rpg-app .rpg-game .dress-tabs{display:flex;gap:6px;margin:0 0 14px;padding:4px;border-radius:12px;background:rgba(0,0,0,.18)}
#rpg-app .rpg-game .dress-tabs button{flex:1;display:grid;gap:2px;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:inherit;opacity:.72;cursor:pointer;text-align:left}
#rpg-app .rpg-game .dress-tabs button b{font-size:13.5px}
#rpg-app .rpg-game .dress-tabs button small{font-size:11px;opacity:.8}
#rpg-app .rpg-game .dress-tabs button[aria-selected=true]{background:rgba(255,255,255,.14);opacity:1;box-shadow:inset 0 0 0 1px rgba(237,200,120,.6)}
#rpg-app .rpg-game .dress-tabs button:focus-visible{outline:2px solid #edc878;outline-offset:2px}

/* 획득 배너의 바로 쓰기 버튼(배너 자체는 클릭을 통과시키고 버튼만 받는다) */
#rpg-app .rpg-game .rpg-banner .banner-act{justify-self:center;margin-top:10px;padding:7px 16px;border-radius:999px;border:1px solid rgba(237,200,120,.7);background:rgba(237,200,120,.16);color:#fbe7b5;font:700 13px/1.2 "Noto Sans KR",sans-serif;letter-spacing:.02em;-webkit-text-stroke:0;cursor:pointer;pointer-events:none}
#rpg-app .rpg-game .rpg-banner.show .banner-act{pointer-events:auto}
#rpg-app .rpg-game .rpg-banner .banner-act:hover{background:rgba(237,200,120,.3)}
#rpg-app .rpg-game .rpg-banner .banner-act:focus-visible{outline:2px solid #edc878;outline-offset:2px}

/* Readable HUD surfaces: always pair the surface with its text and controls. */
#rpg-app .rpg-game.rpg-game .rpg-chat .chat-lines{background:#202b38;border:1px solid #526271;padding:8px 10px}
#rpg-app .rpg-game.rpg-game .rpg-chat .chat-lines p{color:#f5f1e7!important;font-size:12.5px;line-height:1.65}
#rpg-app .rpg-game.rpg-game .rpg-chat .chat-lines b{color:#a8dfed!important}
#rpg-app .rpg-game.rpg-game .rpg-chat .chat-lines .party b{color:#b5e5bd!important}
#rpg-app .rpg-game.rpg-game .rpg-chat .chat-lines .guild b{color:#e0c5ff!important}
#rpg-app .rpg-game.rpg-game .rpg-chat .chat-lines .sys{color:#d1dbe1!important}
#rpg-app .rpg-game.rpg-game .rpg-chat .chat-lines p.dev b{opacity:1}
#rpg-app .rpg-game.rpg-game .chat-report{color:#dfebef;background:#344655;border-color:#8ca4b2}
#rpg-app .rpg-game.rpg-game .live-reserve{background:#252b3bf5;color:#f7f2e7;border:1px solid #a78b50;border-radius:14px;text-shadow:none}
#rpg-app .rpg-game.rpg-game .live-reserve> b{color:#ffdb85}
#rpg-app .rpg-game.rpg-game .live-reserve p{color:#f7f2e7;line-height:1.6}
#rpg-app .rpg-game.rpg-game :is(.live-reserve,.rpg-invite,.rpg-who,.rpg-party) .rpg-btn:not(.gold){background:#eee7d8;color:#263746!important;border:1px solid #d4c8af;text-shadow:none;box-shadow:none}
#rpg-app .rpg-game.rpg-game :is(.live-reserve,.rpg-invite,.rpg-who,.rpg-party) .rpg-btn:not(.gold):is(:hover,:focus-visible){background:#fff8ea;color:#182736!important;outline:2px solid #edc878;outline-offset:2px}
/* Small guidance and progress text on light panels. */
#rpg-app .rpg-game.rpg-game .mem-sheet :is(.mem-fine,.bj-where,.bj-body small,.bj-side small,.bj-stamps small){color:#4d6069!important}
#rpg-app .rpg-game.rpg-game .beach-job-sheet :is(h2 em,.bj-side em){color:#315d77}
#rpg-app .rpg-game.rpg-game .bj-tabs button:not(.on){color:#344e59!important;background:#eef0ed}
#rpg-app .rpg-game.rpg-game .bj-tabs button small{color:#475b65;opacity:1}
#rpg-app .rpg-game.rpg-game .bj-tabs button.on small{color:inherit;opacity:1}
#rpg-app .rpg-game.rpg-game .rpg-modal :is(.gr-info small,.gr-points small,.qb-r small){color:#d9d0bf!important;opacity:1}
#rpg-app .rpg-game.rpg-game .rpg-modal .le-steps small{color:#c9d6dd!important;opacity:1}
#rpg-app .rpg-game.rpg-game .bus-ticket .t-stub small{color:#182d34;background:#fff8e5;padding:2px 4px;border-radius:4px}
#rpg-app .rpg-game.rpg-game .rpg-chat input::placeholder{color:#bdcbd4!important;opacity:1}
#rpg-app .rpg-game.rpg-game .rpg-modal .gr-info>b i{color:#c6bfaf}
#rpg-app .rpg-game.rpg-game .rpg-modal.live-event .le-steps p{color:#cbd5df!important}
#rpg-app .rpg-game.rpg-game .bj-tabs button :is(span,small){color:inherit!important;opacity:1}
#rpg-app .rpg-game.rpg-game .iris>b{background:#202b38;color:#fff;padding:10px 18px;border-radius:12px;text-shadow:0 1px 2px #0008}
#rpg-app .rpg-game.rpg-game .summon-modal strong{color:#6440b1!important}

#rpg-app .rpg-game.rpg-game .briefing .bf-choice button small{color:#d9d0bf!important;opacity:1}
#rpg-app .rpg-game.rpg-game .rpg-modal.midnight-cafe .mc-lobby-party>small{color:#becac1!important}
/* 산길 추격 안내: 장면을 흐리거나 가리지 않고 작은 HUD 안에 둔다. */
#rpg-app .stage-hud .hike-chase {flex:1 1 100%;display:grid;gap:5px;padding:10px 12px;background:#302b34;border:1px solid #a37770;border-radius:12px;text-align:left;pointer-events:auto}
#rpg-app .stage-hud .hike-chase b {color:#ffdbac!important;font-size:13px}
#rpg-app .stage-hud .hike-chase small {color:#f2e5d3!important;white-space:normal;line-height:1.5}
#rpg-app .stage-hud .hike-chase button {justify-self:start;color:#e1e8e3;background:#404b48;border:1px solid #81978a;padding:5px 9px;border-radius:6px;font:inherit;font-size:10px;cursor:pointer}
#rpg-app .stage-hud .hike-chase button:focus-visible {outline:2px solid #ffe0a0;outline-offset:3px}
#rpg-app .stage-hud .hike-escaped {color:#b3f4d3!important}
/* 삽화 위의 이벤트 제목과 밝은 보상 카드에도 각각 맞는 대비를 준다. */
#rpg-app .rpg-game.rpg-game #modal .rf-prize small {color:#ffe1cd!important;opacity:1}
#rpg-app .rpg-game.rpg-game #modal :is(.ev-tab,.sh-cat) :is(b,small) {color:#fff3df!important;background:#182433;padding:2px 5px;border-radius:4px;justify-self:start;text-shadow:none}
#rpg-app .rpg-game.rpg-game #modal .ev-head {background:#1c2835eb;border-radius:12px;padding:12px 16px}
#rpg-app .rpg-game.rpg-game #modal .ev-head :is(h2,p) {color:#fff5e4!important;text-shadow:none}
#rpg-app .rpg-game.rpg-game #modal :is(.ev-tab em,.ev-card.spot .ev-state) {background:#a62a50;color:#fff!important}
#rpg-app .rpg-game.rpg-game #modal .ev-card .ev-no {color:#817360!important}
#rpg-app .rpg-game.rpg-game #modal .ev-card small {color:#60594e!important}
#rpg-app .rpg-game.rpg-game .stats.stat-cards dt {color:#c9bea8!important}
#rpg-app .rpg-game.rpg-game #modal .qb-track h4 small {color:#e3c77d!important}
#rpg-app .rpg-game.rpg-game .live-reserve .rpg-btn::before,
#rpg-app .rpg-game.rpg-game .live-reserve .rpg-btn::after {display:none}
/* 가로로 긴 낮은 창에서는 이벤트 설명과 보상 카드 사이의 공간을 확보한다. */
@media (min-width:801px) and (max-height:560px) {
 #rpg-app .rpg-game.rpg-game #modal .ev-head {top:12px;left:34%;right:62px;padding:8px 10px;gap:4px}
 #rpg-app .rpg-game.rpg-game #modal .ev-head h2 {font-size:22px}
 #rpg-app .rpg-game.rpg-game #modal .ev-head p {font-size:11px;line-height:1.45}
 #rpg-app .rpg-game.rpg-game #modal .ev-cards.missions {grid-template-rows:220px;bottom:16px}
 #rpg-app .rpg-game.rpg-game #modal .ev-card.mission {padding-top:34px;padding-bottom:28px;gap:6px}
 #rpg-app .rpg-game.rpg-game #modal .ev-cards.attend {grid-template-rows:108px 108px;bottom:16px}
}