/* ── Itdasy Design System v1 · icons.css ───────────────────────────
   §4 아이콘 규칙: Lucide 라인 SVG, <use href="#ic-xxx"> 형태 사용 */

/* SVG 스프라이트 숨김 */
#icon-sprite {
  display: none;
}

/* 아이콘 래퍼 — 기본 크기 18px (§4: 기본) */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: currentColor;
}

/* 크기 variants — §4: 히어로 14px / 기본 18px(default) / 탭 24px */
.ic--xs {
  width: 14px;
  height: 14px;
}

.ic--md {
  width: 24px;
  height: 24px;
}

.ic--lg {
  width: 32px;
  height: 32px;
}

/* <svg> 자식이 부모 크기를 꽉 채우도록 */
.ic svg {
  width: 100%;
  height: 100%;
}

/* 아이콘 색상 helpers */
.ic--brand  { color: var(--brand); }
.ic--muted  { color: var(--text-muted); }
.ic--subtle { color: var(--text-subtle); }
.ic--ok     { color: var(--ok); }
.ic--warn   { color: var(--warn); }
.ic--danger { color: var(--danger); }

/* ── Phase 1: iOS-style 카테고리 컬러 아이콘 박스 ───────── */
.ic-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 16px;
}
.ic-box--sm { width: 24px; height: 24px; border-radius: 6px; font-size: 14px; }
.ic-box--lg { width: 32px; height: 32px; border-radius: 8px; font-size: 18px; }

/* 카테고리 컬러 */
.ic-box--pink   { background: #F7EFF0; color: #BC6675; }
.ic-box--blue   { background: #E6F1FB; color: #185FA5; }
.ic-box--teal   { background: #E1F5EE; color: #0F6E56; }
.ic-box--amber  { background: #FAEEDA; color: #854F0B; }
.ic-box--purple { background: #EEEDFE; color: #534AB7; }
.ic-box--coral  { background: #FAECE7; color: #993C1D; }
.ic-box--violet { background: #F3E8FF; color: #7C3AED; }
.ic-box--gray   { background: #F1EFE8; color: #5F5E5A; }
.ic-box--red    { background: #FCEBEB; color: #A32D2D; }

/* 다크모드 대응 */
[data-theme="dark"] .ic-box--pink   { background: #3D1C22; color: #D58A95; }
[data-theme="dark"] .ic-box--blue   { background: #172A3F; color: #6DAFED; }
[data-theme="dark"] .ic-box--teal   { background: #12302A; color: #5DD4B0; }
[data-theme="dark"] .ic-box--amber  { background: #342510; color: #E6A832; }
[data-theme="dark"] .ic-box--purple { background: #221F3D; color: #9B93E8; }
[data-theme="dark"] .ic-box--coral  { background: #2E1A14; color: #E8815A; }
[data-theme="dark"] .ic-box--violet { background: #2A1540; color: #B58AFF; }
[data-theme="dark"] .ic-box--gray   { background: #2A2A28; color: #A0A09C; }
[data-theme="dark"] .ic-box--red    { background: #351515; color: #E05A5A; }

/* ── Phase 6: Phosphor <i> 사이징 보완 ───────────────────── */
i[class*="ph-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
}
/* 기존 .ic 클래스를 그대로 입은 <i> 태그의 svg 자리 사이징 호환 */
i.ic         { font-size: 18px; }
i.ic.ic--xs  { font-size: 14px; }
i.ic.ic--md  { font-size: 24px; }
i.ic.ic--lg  { font-size: 32px; }

/* 컨텍스트별 보완 (Phase 6 STEP 1 교체 자리) */
.ob-shop-icon i { font-size: 28px; }
.ipc-icon i    { font-size: 24px; }
.ws-toolbar__btn i      { font-size: 20px; }
.ws-panel__title i      { font-size: 16px; margin-right: 4px; }