/* 팔각 철판·황동 프레임. 원화가 늦어도 같은 윤곽을 가진 SVG 표면을 먼저 그린다. */
:root {
  --oa-neutral-fallback:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='96' viewBox='0 0 320 96' preserveAspectRatio='none'%3E%3Cpath fill='%2305080b' d='m10 0h300l10 10v76l-10 10H10L0 86V10Z'/%3E%3Cpath fill='%23142029' stroke='%23c79a52' stroke-width='2' d='m11 2h298l9 9v73l-9 9H11l-9-9V11Z'/%3E%3Cpath fill='%232b3946' d='m13 5h294l8 8v23H5V13Z'/%3E%3Cpath fill='none' stroke='%23fff1cc' stroke-opacity='.20' d='M13 7h294M5 37h310'/%3E%3C/svg%3E");
  --oa-primary-fallback:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='96' viewBox='0 0 320 96' preserveAspectRatio='none'%3E%3Cpath fill='%232a0c08' d='m10 0h300l10 10v76l-10 10H10L0 86V10Z'/%3E%3Cpath fill='%236e161a' stroke='%23e6bb68' stroke-width='2' d='m11 2h298l9 9v73l-9 9H11l-9-9V11Z'/%3E%3Cpath fill='%23a52a26' d='M5 35h310v40l-8 8H13l-8-8Z'/%3E%3Cpath fill='%23c63b2f' d='m13 5h294l8 8v22H5V13Z'/%3E%3Cpath fill='none' stroke='%23fff1cc' stroke-opacity='.35' d='M13 7h294M5 35h310'/%3E%3C/svg%3E");
  --oa-secondary-fallback:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='96' viewBox='0 0 320 96' preserveAspectRatio='none'%3E%3Cpath fill='%23061c1f' d='m10 0h300l10 10v76l-10 10H10L0 86V10Z'/%3E%3Cpath fill='%230f3a40' stroke='%23c79a52' stroke-width='2' d='m11 2h298l9 9v73l-9 9H11l-9-9V11Z'/%3E%3Cpath fill='%2321686d' d='M5 35h310v40l-8 8H13l-8-8Z'/%3E%3Cpath fill='%232a7c80' d='m13 5h294l8 8v22H5V13Z'/%3E%3Cpath fill='none' stroke='%23fff1cc' stroke-opacity='.30' d='M13 7h294M5 35h310'/%3E%3C/svg%3E");
}
html,body { font-family:var(--oa-font-ui); color:var(--oa-ink); background:var(--oa-bg); }
body { font-size:var(--oa-fs-body); line-height:1.35; }
button,input,select,a { -webkit-tap-highlight-color:transparent; }
button,input,select { font-family:var(--oa-font-ui); }
button,a { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:var(--oa-focus-width) solid var(--oa-focus); outline-offset:2px; }
button:disabled,button[aria-disabled="true"] { color:var(--oa-ink-mute); opacity:.65; cursor:default; }
.game-viewport :where(button:not(.profile)),.detail-dialog :where(button),.game-viewport .mode-card,.start-test-link {
  border:2px solid transparent; border-image:none!important; border-radius:0;
  background-color:transparent;
  background-image:var(--oa-neutral-art,var(--oa-neutral-fallback));
  background-size:100% 100%; background-repeat:no-repeat;
  color:var(--oa-ink); box-shadow:var(--oa-e1); text-shadow:var(--oa-text-on-art);
  min-width:var(--oa-touch-min); min-height:var(--oa-touch-min);
  font-size:max(13px,var(--oa-fs-body)); padding:6px var(--oa-btn-pad-x);
  transition:transform var(--oa-dur-press) var(--oa-ease-out),filter var(--oa-dur-micro) linear;
}
/* 이전 v5의 button:not(...) 여섯 조건이 갖는 높은 특이성을 표면만 해제한다. */
.game-viewport button:not(.profile):not(.dialog-close):not(.support-slot):not(.starter-option):not(.character-choice):not(.mode-card),
.detail-dialog button:not(.profile):not(.dialog-close):not(.support-slot):not(.starter-option):not(.character-choice):not(.mode-card) {
  background-image:var(--oa-neutral-art,var(--oa-neutral-fallback)); background-size:100% 100%; background-repeat:no-repeat;
}
.game-viewport button:hover:not(:disabled),.detail-dialog button:hover:not(:disabled),.game-viewport a:hover { filter:brightness(1.10); }
.game-viewport button:active:not(:disabled),.detail-dialog button:active:not(:disabled),.start-test-link:active { transform:translateY(2px); filter:brightness(.9); }
.game-viewport button.primary-button,.game-viewport .solo-button,.detail-dialog .dialog-button:not(.secondary):not(.danger) {
  border-image:none!important; background-image:var(--oa-primary-art,var(--oa-primary-fallback))!important;
  color:var(--oa-ink-on-action)!important; box-shadow:var(--oa-e2-primary); text-shadow:var(--oa-text-on-primary); font-weight:900;
}
.game-viewport .coop-button,.game-viewport .start-login,.game-viewport .title-sign-in,.game-viewport .secondary-button {
  background-image:var(--oa-secondary-art,var(--oa-secondary-fallback))!important;
  color:var(--oa-ink-on-action)!important; box-shadow:var(--oa-e2-secondary); text-shadow:var(--oa-text-on-secondary); font-weight:800;
}
.game-viewport .mode-card.selected,.detail-dialog .character-choice.selected,.detail-dialog .starter-option.selected,
.detail-dialog button[aria-pressed="true"],.game-viewport .quick-difficulties button[aria-pressed="true"] {
  border-image:none!important; background-color:var(--oa-action-selected-base); border-color:var(--oa-action-selected-edge);
  box-shadow:inset 0 -3px var(--oa-action-selected-edge),var(--oa-e1); color:var(--oa-ink-strong); font-weight:900;
}
.game-viewport .mode-card.selected strong { color:var(--oa-ink-strong); }
.game-viewport .icon-button { width:var(--oa-top-h); height:var(--oa-top-h); padding:10px; }
.game-viewport .icon-button .icon { width:var(--oa-icon-m); height:var(--oa-icon-m); }
.game-viewport .icon,.detail-dialog .icon { color:inherit; }
.game-viewport small,.game-viewport .server-status,.detail-dialog small { font-size:max(13px,var(--oa-fs-caption)); color:var(--oa-ink-2); }
.game-viewport .start-test-link { display:flex; align-items:center; justify-content:center; gap:8px; background-image:none; background-color:var(--oa-surface-chip); border:1px dashed var(--oa-line-brass-soft); color:var(--oa-ink); font-size:var(--oa-fs-caption); min-height:var(--oa-touch-min); }
.game-viewport .profile { min-height:var(--oa-top-h); color:var(--oa-ink-strong); padding:0; border:0; box-shadow:none; }
.game-viewport .profile-mark { width:var(--oa-top-h); height:var(--oa-top-h); border:1px solid var(--oa-line-brass); background:var(--oa-surface-chip); border-radius:var(--oa-r-2); }
.game-viewport .profile strong { font-size:var(--oa-fs-body); font-weight:800; }
.game-viewport .profile small { color:var(--oa-ink-2); }
.game-viewport .profile small.is-connected { color:var(--oa-ink-success); }
.game-viewport .profile small.is-disconnected { color:var(--oa-ink-error); }
.game-viewport .resource-chip,.game-viewport .supply-button { height:var(--oa-top-h); }
.game-viewport .resource-chip strong { font-size:var(--oa-fs-body); font-variant-numeric:tabular-nums; }
.game-viewport .resource-hud .item-icon { width:var(--oa-icon-m); height:var(--oa-icon-m); }
.game-viewport .supply-button .item-icon { width:var(--oa-icon-l); height:var(--oa-icon-l); }
.game-viewport .friend-request-badge,.game-viewport #supply-badge {
  top:var(--oa-badge-inset); right:var(--oa-badge-inset); left:auto; margin:0;
  color:var(--oa-ink-on-action); background:var(--oa-badge-required); border:2px solid var(--oa-p-iron-1000);
  min-width:var(--oa-badge-num-h); height:var(--oa-badge-num-h); line-height:calc(var(--oa-badge-num-h) - 4px); font-size:13px;
}
.game-viewport .role-markers { display:flex; justify-content:center; gap:8px; }
.role-markers span { display:grid; place-items:center; height:24px; min-width:24px; border:1px solid var(--oa-line-brass-soft); background:var(--oa-surface-chip); color:var(--oa-ink); font-size:13px; }
.role-markers .icon { width:18px; height:18px; }
.role-markers [data-active="true"] { border-color:var(--oa-action-selected-edge); background:var(--oa-action-selected-base); }
.detail-dialog { font-size:var(--oa-fs-body); color:var(--oa-ink); background:var(--oa-surface-1); border:2px solid var(--oa-line-brass); border-image:none!important; box-shadow:var(--oa-e4); }
.detail-dialog::backdrop { background:var(--oa-scrim); }
.dialog-header,.dialog-footer,.dialog-fixed-actions { background:var(--oa-surface-0); border-color:var(--oa-divider); }
.dialog-header h2 { color:var(--oa-ink-strong); font:900 var(--oa-fs-title)/1.2 var(--oa-font-display); }
.dialog-body { color:var(--oa-ink); }
.detail-dialog .dialog-close { width:var(--oa-close-h); height:var(--oa-close-h); padding:10px; }
.detail-dialog input,.detail-dialog select { min-height:var(--oa-touch-min); font-size:16px; background:var(--oa-surface-0); border:2px solid var(--oa-line-control); color:var(--oa-ink); }
.detail-dialog input::placeholder { color:var(--oa-ink-2); }
.detail-dialog :is(.dialog-lead,.dialog-muted,.dialog-notice,.spaced-note,.room-caption,.party-meta,.party-level,.party-state,.detail-list dd,.setting-row>p,.motion-setting p,.character-choice small,.starter-option span,.equipment-row p,.equipment-row label,.character-facts,.growth-confirm small,.paged-field>label,.segmented-control button small,.dialog-pagination span,.dialog-fixed-actions button) { font-size:max(13px,var(--oa-fs-caption)); line-height:1.35; color:var(--oa-ink-2); }
.detail-dialog .dialog-notice { background:var(--oa-status-info-bg); border:1px solid var(--oa-status-info-line); }
.detail-dialog :is(.character-choice,.starter-option,.friend-card,.equipment-row,.mini-character,.supply-card,.growth-confirm,.room-code-card,.prepared-mode,.supply-rewards) { background-color:var(--oa-surface-2); border-image:none!important; border:1px solid var(--oa-line-control); border-radius:var(--oa-r-2); }
.detail-dialog :is(.character-choice strong,.starter-option strong,.growth-confirm strong,.equipment-row h3,.supply-rewards strong,.departure-party strong) { font-size:max(13px,var(--oa-fs-body)); }
.detail-dialog .dialog-pagination button { min-height:var(--oa-close-h); }
.detail-dialog .segmented-control button,.detail-dialog .codex-filter button,.detail-dialog .codex-entry-navigation button,
.detail-dialog .dialog-content-navigation button,.detail-dialog .dialog-content-navigation[data-compact-row="true"] .codex-toolbar .segmented-control button {
  min-height:var(--oa-touch-min); min-width:48px; font-size:var(--oa-fs-caption); line-height:1.25; padding:6px;
}
.detail-dialog :is(.codex-collection-status,.codex-entry-navigation span,.codex-card small,.codex-card em,.codex-detail-heading p,.departure-party small,.departure-party em) { font-size:var(--oa-fs-caption); line-height:1.35; }
.detail-dialog .dialog-content-navigation[data-compact-row="true"] .codex-collection-status { font-size:var(--oa-fs-caption); }
.detail-dialog .dialog-fixed-actions button,.detail-dialog .dialog-action-row button,.detail-dialog .toggle-button { min-width:48px; min-height:var(--oa-touch-min); font-size:var(--oa-fs-caption); }
.detail-dialog .setting-row.presentation-settings select { width:100%; }
.detail-dialog .presentation-volume input[type="range"] { padding:0; accent-color:var(--oa-ink-accent); }
.detail-dialog :is(.menu-grid,.language-options) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.detail-dialog .menu-grid button { min-height:var(--oa-tile-h); white-space:normal; font-size:var(--oa-fs-body); line-height:1.25; }
.detail-dialog .language-options button { min-height:64px; font-size:var(--oa-fs-emph); font-weight:900; }
.detail-dialog .presentation-settings { display:grid; gap:8px; margin:0 0 16px; }
.detail-dialog .presentation-settings h3,.detail-dialog .presentation-settings label { font-size:var(--oa-fs-body); line-height:1.35; }
.detail-dialog .presentation-volume>div { display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:center; gap:8px; }
.detail-dialog .presentation-volume output { font-size:var(--oa-fs-body); text-align:right; font-variant-numeric:tabular-nums; }
.detail-dialog .shop-toolbar { display:grid; gap:8px; margin-bottom:12px; }
.detail-dialog .shop-wallet { display:flex; align-items:center; gap:8px; padding:8px 12px; color:var(--oa-ink-2); background:var(--oa-surface-0); border:1px solid var(--oa-line-control); }
.detail-dialog .shop-wallet img { width:30px; height:30px; object-fit:contain; }
.detail-dialog .shop-wallet span { display:flex; align-items:center; justify-content:space-between; flex:1; gap:12px; font-size:var(--oa-fs-caption); }
.detail-dialog .shop-wallet strong { font-size:var(--oa-fs-emph); color:var(--oa-ink-strong); font-variant-numeric:tabular-nums; }
.detail-dialog .shop-product { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; padding:8px 12px; margin:0 0 8px; min-height:84px; text-align:start; }
.detail-dialog .shop-product>img { width:48px; height:54px; object-fit:contain; }
.detail-dialog .shop-product>span { min-width:0; }
.detail-dialog .shop-product strong,.detail-dialog .shop-product small,.detail-dialog .shop-product em { display:block; font-size:var(--oa-fs-caption); line-height:1.35; font-style:normal; }
.detail-dialog .shop-product strong { color:var(--oa-ink-strong); font-size:var(--oa-fs-body); }
.detail-dialog .shop-product b { max-width:90px; font-size:var(--oa-fs-body); color:var(--oa-ink-accent); }
.detail-dialog .shop-detail { padding:12px; background:var(--oa-surface-0); border:1px solid var(--oa-line-control); }
.detail-dialog .shop-item-heading { display:flex; gap:12px; margin-bottom:12px; align-items:center; }
.detail-dialog .shop-item-heading>img { width:64px; height:76px; object-fit:contain; flex:none; }
.detail-dialog .shop-item-heading h3 { font-size:var(--oa-fs-emph); line-height:1.25; color:var(--oa-ink-strong); }
.detail-dialog .shop-item-heading p { font-size:var(--oa-fs-caption); line-height:1.4; margin-top:6px; color:var(--oa-ink-2); }
.detail-dialog .shop-quantity { display:grid; grid-template-columns:minmax(0,1fr) 48px 48px 48px; align-items:center; gap:8px; padding-block:8px; }
.detail-dialog .shop-quantity>span { font-size:var(--oa-fs-body); }
.detail-dialog .shop-quantity>strong { text-align:center; font-size:var(--oa-fs-emph); font-variant-numeric:tabular-nums; }
.detail-dialog .shop-quantity>button { width:48px; height:48px; min-width:48px; font-size:24px; padding:4px; }
.detail-dialog .shop-total { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:10px; border-top:1px solid var(--oa-divider); font-size:var(--oa-fs-body); }
.detail-dialog .shop-total strong { color:var(--oa-ink-accent); font-size:var(--oa-fs-emph); }
.detail-dialog .shop-receipt { margin:8px 0; padding:8px 12px; border:1px solid var(--oa-status-info-line); background:var(--oa-status-info-bg); font-size:var(--oa-fs-caption); overflow-wrap:anywhere; }
.detail-dialog .shop-fixed-actions,.detail-dialog .news-fixed-actions { display:flex; gap:8px; margin-top:12px; }
.detail-dialog .shop-fixed-actions>button,.detail-dialog .news-fixed-actions>button { flex:1; min-height:56px; font-size:var(--oa-fs-body); }
.detail-dialog .news-list,.detail-dialog .room-directory-list { display:grid; gap:8px; }
.detail-dialog .news-entry { width:100%; min-height:76px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; text-align:start; }
.detail-dialog .news-entry-copy { min-width:0; flex:1; }
.detail-dialog .news-entry-copy strong,.detail-dialog .news-entry-copy small { display:block; font-size:var(--oa-fs-caption); line-height:1.35; }
.detail-dialog .news-entry-copy strong { margin-top:5px; font-size:var(--oa-fs-body); }
.detail-dialog .news-read-status { font-size:var(--oa-fs-caption); color:var(--oa-ink-2); }
.detail-dialog .news-detail-heading { margin-bottom:16px; }
.detail-dialog .news-detail h3 { margin-top:6px; font-size:var(--oa-fs-title); line-height:1.3; color:var(--oa-ink-strong); }
.detail-dialog .news-date { font-size:var(--oa-fs-caption); color:var(--oa-ink-2); }
.detail-dialog .news-paragraph { margin:12px 0; font-size:var(--oa-fs-body); line-height:1.55; }
.detail-dialog .room-directory-card { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px; border:1px solid var(--oa-line-control); background:var(--oa-surface-0); }
.detail-dialog .room-directory-card h3 { color:var(--oa-ink-strong); font-size:var(--oa-fs-emph); }
.detail-dialog .room-directory-card :is(p,small,span) { font-size:var(--oa-fs-caption); line-height:1.35; color:var(--oa-ink-2); }
.detail-dialog .room-directory-card>button { margin-inline-start:auto; min-height:48px; }
.detail-dialog .form-error { font-size:var(--oa-fs-body); color:var(--oa-ink-error); background:var(--oa-status-error-bg); padding:8px 12px; border:1px solid var(--oa-status-error-line); }
/* Keep the labelled friend input and its 48px submit on one keyboard-sized page. */
html[data-visual-viewport-compact="true"] .detail-dialog .friend-request-form .input-action-row { flex-wrap:nowrap; gap:6px; }
html[data-visual-viewport-compact="true"] .detail-dialog .friend-request-form input { min-width:0; flex:1; }
html[data-visual-viewport-compact="true"] .detail-dialog .friend-request-form .input-action-row>button { flex:none; min-height:48px; margin-left:0; }
html[data-visual-viewport-compact="true"] .detail-dialog .paged-field>label { font-size:13px; line-height:1.35; }
.detail-dialog button.danger,.detail-dialog [data-action="logout"],.detail-dialog [data-action="room-leave"] { background-image:var(--oa-neutral-art,var(--oa-neutral-fallback))!important; color:var(--oa-action-destructive-ink); }
.status-message { color:var(--oa-ink); background:var(--oa-status-info-bg); border:1px solid var(--oa-status-info-line); border-image:none; font-size:var(--oa-fs-caption); box-shadow:var(--oa-e2); }
body[data-motion="reduced"] button:active:not(:disabled) { transform:none; }
@media (prefers-reduced-motion:reduce) { button,a { transition-duration:0ms!important; } }