/* My items (MGW-DEV-028, 다솜 DSN-003 4장) — 보관함 + 수집 목록 + 구매 이력을 한 리스트로.
   틀은 상점과 같은 한 화면 시트(.sp, shop.css). 머리 48: 닫기 44 · 가운데 "My items" · 오른쪽 빈 44. 몸 폭 min(100vw − 16px, 460px).
   몸(.it-list)만 안쪽 세로 스크롤(넘칠 때), 페이지는 고정. 낮은 가로(높이 ≤ 480)는 두 칸(Materials | Icons). */
.sp.it { grid-template-rows: 48px minmax(0, 1fr); }
.it-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; width: min(100vw - 16px, 460px); }
.it-title { margin: 0; text-align: center; font-size: 17px; font-weight: 800; }
.it-list { min-height: 0; overflow: hidden auto; overscroll-behavior: contain; width: min(100vw - 16px, 460px); margin: 0 auto; padding: 4px 0 16px; }
.sp.it[data-state="wait"] .it-list { opacity: 0.45; }
.sp.it[data-state="empty"] .it-list { display: flex; flex-direction: column; justify-content: center; }
.it-sec { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
.it-score { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.it-score svg { width: 16px; height: 16px; }
.it-rows { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* 재료 줄: 흰 둥근 14, 높이 52 [원소 칸 28 · 이름 · 잔량 + ng] */
.it-mrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; height: 52px; padding: 0 14px; border-radius: 14px; background: #fff; }
.it-mrow img { display: block; width: 28px; height: 28px; }
.it-mrow .nm { font-size: 15px; font-weight: 700; }
.it-mrow .v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.it-mrow .v small, .it-paid small { margin-left: 2px; font-size: 11px; font-weight: 700; color: var(--muted); }
/* 아이콘 줄: 흰 둥근 14 버튼, 최소 높이 64 [그림 48 · 게임 + 등급 / 날짜 · 낸 값 · 번호 패] */
.it-irow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 100%; min-height: 64px; padding: 8px 12px 8px 8px; border: 0; border-radius: 14px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.it-irow > img { display: block; width: 48px; height: 48px; }
.it-irow:focus-visible, .it-btn:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.it-mid { min-width: 0; display: flex; flex-direction: column; }
.it-irow .t1 { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; }
.it-irow .t2 { display: flex; align-items: center; gap: 4px; margin-top: 3px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.it-paid { display: inline-flex; align-items: center; gap: 3px; }
.it-paid img { display: block; width: 14px; height: 14px; }
.it-irow .no { display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 8px; background: #000; color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.it-irow .no small, .it-bigno small { margin-right: 3px; font-size: 10px; font-weight: 700; opacity: 0.7; }
/* 등급 낱말 칩: Common = 연한 바탕 / Rare = 은 테 / Epic = 금 테 (아이콘 그림 테와 같은 짝) */
.tier { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.2px; }
.tier.common { background: #eef1f8; color: var(--muted); }
.tier.rare { background: #eaf0f8; color: #46557a; box-shadow: inset 0 0 0 1px #c9d2e3; }
.tier.epic { background: #fff3d9; color: #87560a; box-shadow: inset 0 0 0 1px #f5b041; }
/* 글자 버튼 */
.it-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.it-btn svg { width: 18px; height: 18px; }
.it-btn.fill { background: var(--cf-accent, #3f6fe0); color: #fff; }
.it-btn.line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
/* 없을 때 */
.it-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 8px; }
.it-empty > svg { width: 40px; height: 40px; color: var(--muted); }
.it-empty h3 { margin: 4px 0 0; font-size: 19px; font-weight: 800; }
.it-empty p { margin: 0; max-width: 280px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.it-empty .it-btn { margin-top: 6px; }
.it-none { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: #fff; }
.it-none p { margin: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
/* 자세히 시트(상점 .sd 틀): 그림 128 · 게임 + 등급 · 큰 번호 패 · 점수 칩 · 산 날짜와 낸 값 */
.it-card .sd-info { gap: 10px; }
.it-d1 { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; }
.it-bigno { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 12px; background: #000; color: #fff; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.it-bigno small { font-size: 12px; }
.it-card .chip.score { font-size: 13px; }
.it-when { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.it-when .it-paid img { width: 16px; height: 16px; }
@media (orientation: landscape) and (max-height: 480px) {
  .it-head, .it-list { width: min(100vw - 24px, 760px); }
  .it-cols { display: grid; grid-template-columns: 1fr 1.35fr; column-gap: 16px; align-items: start; }
  .it-mrow { height: 48px; }
  .it-irow { min-height: 60px; padding-top: 6px; padding-bottom: 6px; }
  .it-card .sd-info { justify-items: start; }
}