/* =========================================================
 * UI 이미지 스킨 — docs/ui-resource-spec.md, docs/decisions.md D-009
 * js/art/resources.js가 불러온 assets/ui/*.png마다 --ui-<이름> 변수와
 * html.ui-<이름> 클래스를 건다. 규칙은 그 클래스가 있을 때만 적용되므로
 * 빠지거나 크기가 틀린 이미지는 style.css의 기존 모습으로 남는다.
 * 이미지는 화면 크기의 3배로 그려져 있어 9-slice 테두리 두께 = 자르기 ÷ 3.
 * ========================================================= */

/* ---------- 공통 패널 ---------- */
.ui-panel .panel {
  background: none;
  border-color: transparent;
  border-image: var(--ui-panel) 36 fill / 12px stretch;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
.ui-panel .panel::before, .ui-panel .panel::after { display: none; }

/* ---------- 버튼 ---------- */
.ui-btn_primary_normal .btn {
  background: none; border-color: transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  border-image: var(--ui-btn_primary_normal) 30 fill / 10px stretch;
}
.ui-btn_primary_pressed .btn:not(.ghost):active { filter: none; border-image-source: var(--ui-btn_primary_pressed); }
.ui-btn_primary_disabled .btn:not(.ghost):disabled { filter: none; color: #b8a890; border-image-source: var(--ui-btn_primary_disabled); }
.ui-btn_ghost_normal .btn.ghost {
  background: none; border-color: transparent;
  border-image: var(--ui-btn_ghost_normal) 30 fill / 10px stretch;
}
.ui-btn_ghost_pressed .btn.ghost:active { filter: none; border-image-source: var(--ui-btn_ghost_pressed); }
.ui-btn_ghost_disabled .btn.ghost:disabled { filter: none; border-image-source: var(--ui-btn_ghost_disabled); }

/* 알약 버튼: 높이 32 고정 기준이라 세로는 자르지 않고 좌우 반원만 고정 (3-slice) */
.ui-btn_mini .mini {
  background: none; border-color: transparent;
  border-image: var(--ui-btn_mini) 0 48 fill / 0 16px stretch;
}

/* 위쪽 바 버튼 */
.ui-btn_top_normal .ib {
  background: none; border-color: transparent;
  border-image: var(--ui-btn_top_normal) 24 fill / 8px stretch;
}
.ui-btn_top_pressed .ib:active { filter: none; border-image-source: var(--ui-btn_top_pressed); }

/* ---------- 행동 메뉴 ---------- */
.ui-am_tab_normal .am-btn {
  background: none; border-color: transparent; border-radius: 0;
  border-image: var(--ui-am_tab_normal) 30 18 30 69 fill / 10px 6px 10px 23px stretch;
  /* 지도 위에서도 경계가 보이도록 어두운 그림자 */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}
.ui-am_tab_pressed .am-btn:not(.off):active { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); border-image-source: var(--ui-am_tab_pressed); }
.ui-am_tab_disabled .am-btn.off { border-image-source: var(--ui-am_tab_disabled); }
.ui-am_icon_attack .am-ic-atk,
.ui-am_icon_tactic .am-ic-tac,
.ui-am_icon_item .am-ic-item,
.ui-am_icon_wait .am-ic-wait,
.ui-am_icon_cancel .am-ic-cancel {
  border: 0; border-radius: 0; color: transparent; text-shadow: none;
  background: center / contain no-repeat;
}
.ui-am_icon_attack .am-ic-atk { background-image: var(--ui-am_icon_attack); }
.ui-am_icon_tactic .am-ic-tac { background-image: var(--ui-am_icon_tactic); }
.ui-am_icon_item .am-ic-item { background-image: var(--ui-am_icon_item); }
.ui-am_icon_wait .am-ic-wait { background-image: var(--ui-am_icon_wait); }
.ui-am_icon_cancel .am-ic-cancel { background-image: var(--ui-am_icon_cancel); }

/* ---------- 대화창 ---------- */
.ui-dlg_box .dlg-box {
  background: none; border-color: transparent; border-radius: 0;
  border-image: var(--ui-dlg_box) 48 fill / 16px stretch;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.ui-dlg_name_neutral .dlg-name,
.ui-dlg_name_enemy .sd-enemy .dlg-name,
.ui-dlg_name_player .sd-player .dlg-name,
.ui-dlg_name_ally .sd-ally .dlg-name {
  background: none; border-color: transparent; border-radius: 0;
  border-image-slice: 24 30 fill; border-image-width: 8px 10px; border-image-repeat: stretch;
  text-shadow: 0 1px 2px #000;
}
.ui-dlg_name_neutral .dlg-name { border-image-source: var(--ui-dlg_name_neutral); }
.ui-dlg_name_enemy .sd-enemy .dlg-name { border-image-source: var(--ui-dlg_name_enemy); }
.ui-dlg_name_player .sd-player .dlg-name { border-image-source: var(--ui-dlg_name_player); }
.ui-dlg_name_ally .sd-ally .dlg-name { border-image-source: var(--ui-dlg_name_ally); }
.ui-dlg_next .dlg-next {
  width: 16px; height: 16px; color: transparent; font-size: 0;
  background: var(--ui-dlg_next) center / contain no-repeat;
}

/* ---------- 초상화 액자 · 배경 ---------- */
/* 액자 두께는 표시 크기에 비례(128px → 약 12px, 36px → 약 3px) */
.ui-pt_frame canvas.pt {
  border-color: transparent; border-radius: 0;
  border-image: var(--ui-pt_frame) 30 / 9.5% stretch;
}
.ui-pt_frame .dlg-pt { background: none; border-color: transparent; padding: 0; }
.ui-pt_bg_neutral canvas.pt { background: var(--ui-pt_bg_neutral) center / cover no-repeat !important; }
.ui-pt_bg_player :is(.side-player, .sd-player) canvas.pt,
.ui-pt_bg_player .lu-who canvas { background: var(--ui-pt_bg_player) center / cover no-repeat !important; }
.ui-pt_bg_enemy :is(.side-enemy, .sd-enemy) canvas.pt { background: var(--ui-pt_bg_enemy) center / cover no-repeat !important; }
.ui-pt_bg_ally :is(.side-ally, .sd-ally) canvas.pt { background: var(--ui-pt_bg_ally) center / cover no-repeat !important; }

/* ---------- 턴 배너 · 도장 ---------- */
.ui-banner_player .pb-player .pb-band,
.ui-banner_enemy .pb-enemy .pb-band,
.ui-banner_ally .pb-ally .pb-band,
.ui-banner_event .pb-event .pb-band {
  background: none; border-color: transparent;
  border-image-slice: 0 150 fill; border-image-width: 0 50px; border-image-repeat: stretch;
}
.ui-banner_player .pb-player .pb-band { border-image-source: var(--ui-banner_player); }
.ui-banner_enemy .pb-enemy .pb-band { border-image-source: var(--ui-banner_enemy); }
.ui-banner_ally .pb-ally .pb-band { border-image-source: var(--ui-banner_ally); }
.ui-banner_event .pb-event .pb-band { border-image-source: var(--ui-banner_event); }

.ui-stamp_win .bb-win .bb-han,
.ui-stamp_lose .bb-lose .bb-han {
  width: min(36vh, 180px); height: min(36vh, 180px);
  color: transparent; text-shadow: none; font-size: 0;
  background: center / contain no-repeat;
}
.ui-stamp_win .bb-win .bb-han { background-image: var(--ui-stamp_win); filter: drop-shadow(0 0 24px rgba(255, 190, 60, 0.45)); }
.ui-stamp_lose .bb-lose .bb-han { background-image: var(--ui-stamp_lose); }

.ui-rank_S .stamp.rk-S, .ui-rank_A .stamp.rk-A, .ui-rank_B .stamp.rk-B, .ui-rank_F .stamp.rk-F {
  border: 0; color: transparent; text-shadow: none; transform: none;
  background: center / contain no-repeat;
}
.ui-rank_S .stamp.rk-S { background-image: var(--ui-rank_S); }
.ui-rank_A .stamp.rk-A { background-image: var(--ui-rank_A); }
.ui-rank_B .stamp.rk-B { background-image: var(--ui-rank_B); }
.ui-rank_F .stamp.rk-F { background-image: var(--ui-rank_F); }

/* ---------- 타이틀 ---------- */
.ui-title_logo .t-han {
  width: min(520px, 86vw, 160vh); aspect-ratio: 1560 / 480; height: auto;
  color: transparent; text-shadow: none; font-size: 0;
  background: var(--ui-title_logo) center / contain no-repeat;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
}
/* 로고 이미지에 한글 제목이 들어 있다 */
.ui-title_logo .t-ko { display: none; }
.ui-title_seal .t-seal {
  border: 0; border-radius: 0; color: transparent; font-size: 0; box-shadow: none;
  background: var(--ui-title_seal) center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}