/* ───────── v3.1 창(장비 · 성장 …) 새 모양 + 창 틀 — '지금 배치 그대로 · 조금 다듬기' 시안 ─────────
   · 광산 · 마을 화면 배치는 지금 그대로 (style.css) · 다듬기는 ui3pol.css
   · 창이 열리면: 맨 위 재화 · 설정/마을 → 그 아래 메뉴 한 줄 → 그 아래 창 (좋다고 하신 새 창 모양) */
html.u3 {
  --u3-ink: #0c0a14;
  --u3-bg0: #15111f;
  --u3-bg1: #1d1829;
  --u3-bg2: #282137;
  --u3-bg3: #352d48;
  --u3-hl: #4a4064;
  --u3-tx: #f4ecd8;
  --u3-sub: #ada3bf;
  --u3-dim: #7a7090;
  --u3-gold: #f7c83a;
  --u3-gold-dk: #a8781a;
  --u3-green: #5ec04a;
  --u3-red: #e05a4a;
  --u3-pix: rgba(30, 24, 44, 0.66);      /* 도트 버튼 바탕 (게임이 비침) */
  --u3-pix-hl: rgba(255, 255, 255, 0.13); /* 안쪽 위·왼쪽 밝은 모서리 */
  --u3-pix-dk: rgba(0, 0, 0, 0.4);        /* 안쪽 아래·오른쪽 어두운 모서리 */
  --u3-m: 6px;
  --u3-topH: calc(66px + var(--safe-t)); /* 위쪽 조각들 아래 끝 — 스크립트가 잼 */
  --u3-curH: calc(36px + var(--safe-t)); /* 재화 줄 아래 끝 */
  --u3-gh: 80px;  /* 강화 묶음 높이 — 스크립트가 잼 */
  --u3-navB: 0px;
  --u3-colW: 0px;
  --u3-navH: 0px;
}

/* ── 창이 열려 있을 때 ── */
html.u3.u3-open #app::before { content: ''; position: absolute; z-index: 9; left: 0; right: 0; top: 0; height: var(--u3-curH); background: var(--u3-bg0); pointer-events: none; }
html.u3.u3-open #app #hudTR { z-index: 11; left: auto; right: calc(6px + var(--safe-r)); }
html.u3.u3-open #app #hudL { z-index: 11; }
html.u3.u3-open #app #hudL > :not(.moneys), html.u3.u3-open #app #hudBR, html.u3.u3-open #app #buffs { visibility: hidden; } /* 강화 줄 · 소모품은 창 뒤 */
html.u3.u3-open #app #hudL .moneys { position: fixed; top: calc(8px + var(--safe-t)); left: calc(8px + var(--safe-l)); right: calc(2 * max(var(--u) * 9, 34px) + 24px + var(--safe-r)); justify-content: flex-start; align-items: center; min-height: max(var(--u) * 9, 34px); }
html.u3.u3-open #app #hudTL { z-index: 11; display: flex !important; flex-direction: row; left: 0; right: 0; top: var(--u3-curH); bottom: auto; width: auto; height: 46px; padding: 0 calc(6px + var(--safe-r)) 0 calc(6px + var(--safe-l)); gap: 0; background: var(--u3-bg0); border-top: 2px solid var(--u3-ink); border-bottom: 2px solid var(--u3-ink); }
html.u3.u3-open #app #hudTL .fold, html.u3.u3-open #app #hudTL .dotany { display: none !important; }
html.u3.u3-open #app #hudTL .sq, html.u3.u3-open #app #hudTL.folded .sq { display: inline-flex; flex: 1 1 0; width: auto; max-width: 96px; height: 100%; min-width: 0; min-height: 0; background: transparent; border: 0; box-shadow: none; }
html.u3.u3-open #app #hudTL .sq img { width: 22px; height: 22px; }
html.u3.u3-open #app #hudTL .sq small { font-size: 11px; color: #ddd5ea; }
html.u3.u3-open #app #hudTL .sq.on { background: var(--u3-bg2); box-shadow: inset 0 -3px 0 var(--u3-gold); }
html.u3.u3-open #app #hudTL .sq.on small { color: var(--u3-gold); }
html.u3.u3-open #app #hudTL .sq .dot { top: 5px; right: auto; left: calc(50% + 13px); width: 8px; height: 8px; } /* 칸이 넓어도 점 · 레벨 표시는 그림 바로 옆 */
html.u3.u3-open #app #hudTL .sq .sklb { top: 4px; left: auto; right: calc(50% + 13px); }
html.u3.u3-open #app #toasts { top: auto; bottom: calc(10px + var(--safe-b)); left: 8%; right: 8%; }
html.u3 #hudTL .sq[data-sheet="smith"] { display: none !important; } /* 대장간은 장비 창 탭 (장비 강화 · 슬롯 강화 · 곡괭이 강화) */

/* ── 창 ── */
html.u3 #sheet { padding: 0 var(--safe-r) 0 var(--safe-l); background: var(--u3-bg0); /* 창이 열리면 게임 화면을 다 덮음 (뒤는 칠하지 않으므로 · 노치 옆 띠까지) */ z-index: 10; top: calc(var(--u3-curH) + 48px); bottom: 0; left: 0; right: 0; }
html.u3 .sbox { width: 100%; max-width: none; height: 100%; background: var(--u3-bg1); border: 0; box-shadow: none; animation: none; }
html.u3 .shead { padding: 0 6px 0 4px; gap: 4px; background: var(--u3-bg0); border-bottom: 2px solid var(--u3-ink); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.04); min-height: 46px; }
html.u3 .stabs { gap: 0; flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html.u3 .stabs::-webkit-scrollbar { display: none; }
html.u3 .stabs button { position: relative; flex: none; padding: 12px 12px 11px; font-size: 15px; background: transparent; border: 0; color: var(--u3-sub); white-space: nowrap; }
html.u3 .stabs button.on { background: transparent; color: var(--u3-gold); }
html.u3 .stabs button.has-dot::after { content: none; } /* 원래 빨간 점(::after)은 끄고 아래 ::before 하나만 (두 개 겹쳐 보이던 것) */
html.u3 .stabs button.on::after { content: ''; position: absolute; left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 3px; border: 0; background: var(--u3-gold); }
html.u3 .stabs button.has-dot::before { content: ''; position: absolute; top: 7px; right: 3px; width: 7px; height: 7px; background: var(--u3-red); border: 1px solid var(--u3-ink); }
html.u3 #sClose { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
html.u3 .qhelp { width: 32px; height: 32px; min-width: 32px; min-height: 32px; border-radius: 0; font-size: 16px; color: var(--u3-gold); background: var(--u3-bg2); border: 2px solid var(--u3-ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06); }
html.u3 .sbody { padding: 10px 10px 16px; line-height: 1.4; }
/* 성장 · 대장간 탭 색: 판 전체를 물들이지 않고 고른 탭 밑줄 · 카드 왼쪽 띠에만 */
html.u3 #sheet[data-th] .sbox { border-color: var(--u3-ink); box-shadow: none; }
html.u3 #sheet[data-th] .shead { background: var(--u3-bg0); border-bottom-color: var(--u3-ink); }
html.u3 #sheet[data-th] .stabs button.on { background: transparent; border-color: transparent; color: var(--th); }
html.u3 #sheet[data-th] .stabs button.on::after { background: var(--th); }
html.u3 #sheet[data-th] .sbody { background: none; }

/* ── 공통 부품 ── */
html.u3 .card { gap: 10px; padding: 8px 10px; margin-bottom: 6px; background: var(--u3-bg2); border: 2px solid var(--u3-ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06); }
html.u3 .card .ic { width: 42px; height: 42px; background: var(--u3-bg0); }
html.u3 .card .ds { font-size: 13px; line-height: 1.35; }
html.u3 .card .nm { font-size: 15px; }
html.u3 .box { background: var(--u3-bg0); border: 2px solid var(--u3-ink); font-size: 14px; }
html.u3 .sec { margin: 12px 2px 6px; font-size: 13px; letter-spacing: 0.5px; color: var(--u3-sub); }
html.u3 .btn { font-size: 14px; min-height: 34px; }
html.u3 .btn.gray { background: var(--u3-bg3); box-shadow: inset 0 -3px 0 #231c33, inset 0 2px 0 #54496e; color: #ddd4ec; }
html.u3 .btn.blue { background: #3f6fb8; box-shadow: inset 0 -3px 0 #24467e, inset 0 2px 0 #7aa6e6; }
html.u3 .chips .btn.sm.blue, html.u3 .chips .btn.blue { background: var(--u3-bg3); color: var(--u3-gold); box-shadow: inset 0 0 0 2px var(--u3-gold); }
html.u3 .chips .btn.sm { min-height: 30px; padding: 3px 9px; font-size: 13px; }
html.u3 details.fold > summary, html.u3 details.gdet > summary { font-size: 14px; }

/* ── 알림 창 ── */
html.u3 .mbox { max-width: 400px; padding: 0 12px 12px; background: var(--u3-bg1); border: 2px solid var(--u3-ink); box-shadow: inset 0 0 0 2px var(--u3-hl), 0 4px 0 rgba(0, 0, 0, 0.5); animation: none; }
html.u3 .mbox h3 { margin: 0 -12px 10px; padding: 10px 12px 8px; font-size: 18px; background: var(--u3-bg0); border-bottom: 2px solid var(--u3-ink); }
html.u3 #mBtns .btn { min-height: 40px; }

/* ── 장비 창: 가운데 히어로 + 양옆 6칸 · 아래 가방 ── */
html.u3 .u3eq { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
html.u3 .u3doll { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 10px 8px; background: radial-gradient(ellipse at 50% 55%, #2c2442 0%, #1a1526 70%); border: 2px solid var(--u3-ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06); }
html.u3 .u3slots { display: flex; flex-direction: column; gap: 8px; }
html.u3 .u3slot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
html.u3 .u3slot .itile { width: 60px; height: 60px; }
html.u3 .u3slot small { font-size: 12px; line-height: 1; white-space: nowrap; }
html.u3 .u3hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
html.u3 .u3stage { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
html.u3 .u3stage::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 8px; height: 10px; background: rgba(0, 0, 0, 0.45); border-radius: 50%; }
html.u3 .u3stage img { position: relative; z-index: 1; width: 120px; height: 120px; image-rendering: pixelated; }
html.u3 .u3pick { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px 4px 4px; background: var(--u3-bg2); border: 2px solid var(--u3-ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06); text-align: left; }
html.u3 .u3pick img { width: 30px; height: 30px; flex: none; }
html.u3 .u3pick span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
html.u3 .u3pick b { font-weight: normal; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.u3 .u3pick small { font-size: 12px; color: var(--u3-sub); }
html.u3 .u3sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
html.u3 .u3sum div { padding: 5px 6px; background: var(--u3-bg0); border: 2px solid var(--u3-ink); font-size: 12px; color: var(--u3-sub); line-height: 1.25; min-width: 0; }
html.u3 .u3sum b { display: block; font-weight: normal; font-size: 15px; color: var(--u3-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.u3 .u3acts { display: flex; flex-wrap: wrap; gap: 6px; }
html.u3 .u3acts .btn { flex: 1 1 0; min-width: 84px; padding: 7px 6px; display: flex; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; }
html.u3 .u3acts .btn b { font-weight: normal; margin-left: 4px; padding: 0 5px; background: rgba(0, 0, 0, 0.35); }
html.u3 .u3bag { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html.u3 .u3bh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
html.u3 .u3bh > b { font-weight: normal; font-size: 16px; }
html.u3 .u3bh > small { color: var(--u3-sub); font-size: 13px; margin-right: auto; }
html.u3 .u3filt { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
html.u3 .u3filt::-webkit-scrollbar { display: none; }
html.u3 .u3filt button { position: relative; flex: none; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; background: var(--u3-bg2); border: 2px solid var(--u3-ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06); }
html.u3 .u3filt button img { width: 26px; height: 26px; }
html.u3 .u3filt button.all { width: auto; padding: 0 9px; font-size: 13px; }
html.u3 .u3filt button.on { box-shadow: inset 0 0 0 2px var(--u3-gold); }
html.u3 .u3filt button i { position: absolute; right: 1px; bottom: 0; font-style: normal; font-size: 10px; color: #fff; text-shadow: 1px 1px 0 #000; }
html.u3 .u3sort { display: flex; gap: 4px; align-items: center; }
html.u3 .u3sort small { color: var(--u3-sub); font-size: 12px; }
html.u3 .u3grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; }
html.u3 .u3grid .itile { width: 100%; height: auto; aspect-ratio: 1; }
html.u3 .u3empty { padding: 18px 10px; text-align: center; color: var(--u3-sub); background: var(--u3-bg0); border: 2px dashed #3a3150; font-size: 14px; }
html.u3 .u3filt button.all { gap: 4px; display: flex; color: var(--u3-tx); }
html.u3 .u3filt button.all i { position: static; font-size: 12px; color: var(--u3-sub); }
html.u3 .u3leg { display: block; margin-top: 2px; font-size: 12px; color: var(--u3-dim); }
html.u3 .u3grid .itile { font-size: 15px; }
/* 장비 관리 창 */
html.u3 .u3mg { display: flex; flex-direction: column; gap: 10px; }
html.u3 .u3mr { display: flex; flex-direction: column; gap: 3px; padding: 8px; background: var(--u3-bg0); border: 2px solid var(--u3-ink); }
html.u3 .u3mr > b { font-weight: normal; font-size: 15px; }
html.u3 .u3mr > small { font-size: 12px; color: var(--u3-sub); line-height: 1.3; }
html.u3 .u3mr .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
html.u3 .u3mr .chips .btn { min-width: 0; }
@media (orientation: landscape) {
  /* 가로: 왼쪽 히어로 · 오른쪽 가방 */
  html.u3 .u3wrap { display: grid; grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.05fr); gap: 10px; align-items: start; }
  html.u3 .u3eq { margin-bottom: 0; position: sticky; top: 0; }
  html.u3 .u3stage { width: 96px; height: 96px; }
  html.u3 .u3stage img { width: 88px; height: 88px; }
  html.u3 .u3slot .itile { width: 50px; height: 50px; }
  html.u3 .u3doll { padding: 6px 8px; }
  html.u3 .u3slots { gap: 4px; }
  html.u3 .u3slot small { display: none; } /* 가로: 창 높이가 낮아 부위 이름은 칸 그림으로 */
  html.u3 .u3hero { gap: 4px; }
}

html.u3 .ulv .lvp { font-style: normal; }

/* ── 히어로 창 (html.u3h): 그림 칸만 · 누르면 그 칸 줄 바로 아래 설명 카드 · 같은 칸을 다시 누르면 접힘 ── */
html.u3h .sk-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); grid-auto-flow: row dense; gap: 6px; }
html.u3h .sk-t { aspect-ratio: 1 / 1; padding: 0; justify-content: center; gap: 0; background: var(--u3-bg2); border: 2px solid var(--u3-ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06); }
html.u3h .sk-t img { width: 72%; height: 72%; }
html.u3h .sk-t .sk-st { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-size: 8px; letter-spacing: -1px; text-shadow: 1px 1px 0 #000; }
html.u3h .sk-t.on { border-color: var(--u3-gold); }
html.u3h .sk-t.sel { border-color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3); }
html.u3h .sk-open { grid-column: 1 / -1; }
html.u3h .sk-open .skin-card { margin: 0; border-color: #fff; }
html.u3h .skin-card .sk-mini { display: none; } /* 접기는 칸을 다시 눌러서 */
html.u3h .skin-card.mini .ds { display: block; }