/* ===== TOKENS ===== */
:root {
  --bg:        #f1f5f9;
  --card:      #ffffff;
  --card2:     #f8fafc;
  --border:    #e2e8f0;
  --text:      #1e293b;
  --text2:     #64748b;
  --text3:     #94a3b8;

  --gold:      #92400e;
  --gold-bg:   #fef3c7;
  --gold-bdr:  #fcd34d;
  --red:       #b91c1c;
  --red-bg:    #fee2e2;
  --green:     #15803d;
  --green-bg:  #dcfce7;
  --blue:      #1d4ed8;
  --blue-bg:   #dbeafe;
  --purple:    #6d28d9;
  --purple-bg: #ede9fe;
  --orange:    #c2410c;
  --orange-bg: #ffedd5;

  --grade-ss:  #6d28d9;
  --grade-s:   #b91c1c;
  --grade-a:   #1d4ed8;

  --sb:        160px;
  --sb-bg:     #1e293b;
  --sb-bg2:    #0f172a;
  --sb-txt:    #94a3b8;
  --sb-gold:   #f59e0b;
  --sb-hover:  #334155;
  --sb-bdr:    #334155;
}

/* ===== BASE ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Noto Sans KR',sans-serif;
  font-size:14px;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}

/* ===== LAYOUT ===== */
.app { display:flex; min-height:100vh; }

/* ===== SIDEBAR ===== */
.sidebar {
  width:var(--sb); min-width:var(--sb);
  background:var(--sb-bg);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0;
  overflow:hidden; z-index:100;
  transition:width .18s ease;
}
.sb-head {
  padding:10px 10px 8px;
  border-bottom:1px solid var(--sb-bdr);
  flex-shrink:0;
}
.sb-head-row {
  display:flex; align-items:center; justify-content:space-between;
}
.sb-head .logo {
  font-size:13px; font-weight:900;
  color:var(--sb-gold); white-space:nowrap; overflow:hidden;
}
.sb-toggle {
  background:none; border:none; cursor:pointer;
  color:var(--sb-txt); font-size:11px; padding:2px 4px;
  border-radius:3px; flex-shrink:0; transition:background .1s, transform .18s;
}
.sb-toggle:hover { background:var(--sb-hover); color:#e2e8f0; }

/* 접힌 상태 */
.sidebar.sb-col { overflow:hidden; }
.sidebar.sb-col .sb-show { display:none !important; }
.sidebar.sb-col .logo-txt { display:none; }
.sidebar.sb-col .sb-toggle { transform:rotate(180deg); }
.sidebar.sb-col .ni { padding:8px; justify-content:center; }
.sidebar.sb-col .ni .lbl,
.sidebar.sb-col .ni .chv { display:none; }
.sidebar.sb-col .nc-wrap { display:none !important; }
.sidebar.sb-col .sb-foot { display:none !important; }

.sb-nav { flex:1; padding:4px 0; overflow-y:auto; overflow-x:hidden; }

/* nav item */
.ni {
  display:flex; align-items:center; gap:6px;
  padding:7px 12px;
  color:var(--sb-txt); font-size:12px; font-weight:500;
  cursor:pointer; user-select:none;
  border-left:3px solid transparent;
  transition:background .12s, color .12s;
  white-space:nowrap;
}
.ni:hover { background:var(--sb-hover); color:#e2e8f0; }
.ni.active {
  background:rgba(245,158,11,.12);
  color:var(--sb-gold);
  border-left-color:var(--sb-gold);
}
.ni .ico { font-size:15px; width:20px; text-align:center; }
.ni .lbl { flex:1; }
.ni .chv {
  font-size:10px; color:var(--sb-txt);
  transition:transform .2s;
}
.ni.open .chv { transform:rotate(90deg); }

/* nav child */
.nc {
  display:flex; align-items:center; gap:6px;
  padding:7px 14px 7px 42px;
  color:var(--sb-txt); font-size:12px;
  cursor:pointer;
  border-left:3px solid transparent;
  transition:background .12s, color .12s;
}
.nc:hover { background:var(--sb-hover); color:#e2e8f0; }
.nc.active {
  color:var(--sb-gold);
  background:rgba(245,158,11,.08);
  border-left-color:var(--sb-gold);
}
.nc .dot {
  width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.6; flex-shrink:0;
}
.nc-wrap { overflow:hidden; }

.sb-foot {
  padding:14px 16px;
  border-top:1px solid var(--sb-bdr);
  background:#0f172a;
  font-size:11px; color:var(--sb-txt);
  line-height:1.6;
}
.sb-conv-inp {
  width:100%; box-sizing:border-box;
  background:#0f172a; border:1px solid var(--sb-bdr);
  border-radius:6px; padding:6px 10px;
  color:#e2e8f0; font-size:12px; font-weight:500;
  font-family:'Noto Sans KR',sans-serif;
  outline:none; text-align:right;
  transition:border-color .15s;
}
.sb-conv-inp:focus { border-color:var(--sb-gold); }

/* ===== CHAR CARD ===== */
.char-card {
  padding:12px 14px;
  border-bottom:1px solid var(--sb-bdr);
  background:#0f172a;
}
.char-name {
  font-size:15px; font-weight:900;
  color:#e2e8f0; margin-bottom:1px;
}
.char-job {
  font-size:11px; color:var(--sb-gold);
  margin-bottom:10px;
}
.cg {
  display:grid; grid-template-columns:auto 1fr;
  gap:5px 10px; align-items:center;
}
.cg-lbl { font-size:11px; color:var(--sb-txt); white-space:nowrap; }
.cg-val { font-size:12px; font-weight:600; color:#e2e8f0; display:flex; align-items:center; gap:4px; }
.cg-computed { color:#94a3b8; font-weight:400; }
.char-inp {
  background:#1e293b; border:1px solid #334155;
  border-radius:4px; padding:3px 7px;
  color:#e2e8f0; font-size:12px; width:80px;
  font-family:'Noto Sans KR',sans-serif;
  outline:none; transition:border-color .15s;
}
.char-inp:focus { border-color:var(--sb-gold); }
.ic-btn {
  background:none; border:none; cursor:pointer;
  font-size:11px; padding:1px 5px; border-radius:3px;
  color:var(--sb-txt); transition:background .1s, color .1s;
  font-family:'Noto Sans KR',sans-serif;
}
.ic-btn:hover { background:#334155; color:#e2e8f0; }
.surplus-box {
  margin-top:8px; padding-top:8px;
  border-top:1px solid #334155;
}
.surplus-row {
  display:flex; justify-content:space-between;
  align-items:center; margin-bottom:3px;
  font-size:11px;
}
.surplus-lbl { color:#94a3b8; }
.surplus-val { font-weight:700; font-size:12px; }
.exch-box {
  background:#162032; border-radius:6px;
  padding:7px 9px; margin-top:6px;
}
.exch-title { font-size:10px; color:#64748b; margin-bottom:5px; letter-spacing:.3px; }
.exch-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:#cbd5e1; margin-bottom:3px;
}
.exch-row:last-child { margin-bottom:0; }
.exch-n { font-weight:700; color:var(--sb-gold); }
.item-icon { width:20px; height:20px; object-fit:contain; vertical-align:middle; image-rendering:pixelated; }

/* ===== MAIN ===== */
.main {
  margin-left:var(--sb);
  flex:1; display:flex; flex-direction:column;
}
.topbar {
  background:var(--card);
  border-bottom:1px solid var(--border);
  padding:8px 20px;
  display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.topbar-title { font-size:14px; font-weight:700; color:var(--text); }
.topbar-chips { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.chip {
  background:var(--gold-bg); border:1px solid var(--gold-bdr);
  color:var(--gold); border-radius:20px;
  padding:3px 10px; font-size:11px; font-weight:600;
}

.page { padding:12px 16px; }

/* ===== PANELS ===== */
.panel { display:none; }
.panel.active { display:block; }

/* ===== TOOLBAR ===== */
.toolbar {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin-bottom:14px;
  background:var(--card); padding:10px 14px;
  border-radius:8px; border:1px solid var(--border);
}
.search-input {
  flex:1; min-width:200px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:6px; padding:7px 12px;
  color:var(--text); font-size:13px;
  font-family:'Noto Sans KR',sans-serif;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.search-input:focus {
  border-color:var(--sb-gold);
  box-shadow:0 0 0 2px rgba(245,158,11,.12);
}
.fbtn {
  background:transparent; border:1px solid var(--border);
  border-radius:5px; padding:4px 10px;
  color:var(--text2); font-size:11px; cursor:pointer;
  font-family:'Noto Sans KR',sans-serif;
  transition:all .1s; white-space:nowrap;
}
.fbtn:hover { border-color:var(--text2); color:var(--text); }
.fbtn.active {
  background:var(--card); border-color:var(--text2);
  color:var(--text); font-weight:600;
}
.cbadge { font-size:12px; color:var(--text2); margin-left:auto; }

/* ===== TABLE ===== */
.tw { overflow-x:auto; border-radius:6px; border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:12px; }
thead th {
  background:var(--card2); padding:5px 8px;
  text-align:left; font-weight:600; color:var(--text2);
  border-bottom:1px solid var(--border);
  white-space:nowrap; font-size:10px;
  text-transform:uppercase; letter-spacing:.4px;
}
tbody tr {
  background:var(--card);
  border-bottom:1px solid var(--border);
  transition:background .1s;
}
tbody tr:hover { background:#fffbef; }
tbody tr:last-child { border-bottom:none; }
tbody td { padding:4px 8px; vertical-align:middle; }

/* ===== GRADES ===== */
.gss { color:var(--grade-ss); font-weight:700; }
.gs  { color:var(--grade-s);  font-weight:700; }
.ga  { color:var(--grade-a);  font-weight:700; }
.gc  { color:var(--text3); }

/* ===== CATEGORY BADGES ===== */
.cb {
  display:inline-block; padding:2px 8px;
  border-radius:4px; font-size:11px; font-weight:700; white-space:nowrap;
}
.c-equip    { background:var(--blue-bg);   color:var(--blue);   border:1px solid #93c5fd; }
.c-mb       { background:var(--purple-bg); color:var(--purple); border:1px solid #c4b5fd; }
.c-book     { background:var(--red-bg);    color:var(--red);    border:1px solid #fca5a5; }
.c-dmb      { background:#fef2f2;          color:#9f1239;       border:1px solid #fecaca; }
.c-pass     { background:var(--orange-bg); color:var(--orange); border:1px solid #fed7aa; }
.c-scroll   { background:var(--green-bg);  color:var(--green);  border:1px solid #86efac; }
.c-currency { background:var(--gold-bg);   color:var(--gold);   border:1px solid var(--gold-bdr); }
.c-etc      { background:#f1f5f9;          color:var(--text2);  border:1px solid var(--border); }

/* ===== DROP AREA CARDS ===== */
.drop-area-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; overflow:hidden; margin-bottom:8px;
}
.drop-area-hdr {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer; user-select:none;
}
.drop-area-nm { font-size:13px; font-weight:700; }

/* 지역별 타이틀 색상 */
.dah-orbis  { background:#dbeafe; } .dah-orbis:hover  { background:#bfdbfe; }
.dah-orbis  .drop-area-nm { color:#1d4ed8; }
.dah-aqua   { background:#ccfbf1; } .dah-aqua:hover   { background:#99f6e4; }
.dah-aqua   .drop-area-nm { color:#0f766e; }
.dah-lifre  { background:#fce7f3; } .dah-lifre:hover  { background:#fbcfe8; }
.dah-lifre  .drop-area-nm { color:#be185d; }
.dah-rudi   { background:#fef9c3; } .dah-rudi:hover   { background:#fef08a; }
.dah-rudi   .drop-area-nm { color:#a16207; }
.dah-elnas  { background:#ede9fe; } .dah-elnas:hover  { background:#ddd6fe; }
.dah-elnas  .drop-area-nm { color:#6d28d9; }
.dah-hene   { background:#dcfce7; } .dah-hene:hover   { background:#bbf7d0; }
.dah-hene   .drop-area-nm { color:#15803d; }
.drop-area-body {
  padding:12px 14px;
  display:flex; flex-wrap:wrap; gap:0;
}
.drop-dg-card {
  border:1px solid var(--border); border-radius:8px;
  overflow:hidden; width:calc(20% - 12px); min-width:120px;
  margin:0 6px 12px;
}
.drop-dg-card-hdr {
  padding:5px 10px; font-size:11px; font-weight:700;
  border-bottom:1px solid var(--border);
}
.drop-dg-card .drop-item-list { padding:6px 8px; display:flex; flex-direction:column; gap:0; }
.drop-item-list { display:flex; flex-direction:column; gap:0; }
.drop-cat-group { margin-bottom:6px; }
.drop-cat-group:last-child { margin-bottom:0; }
.drop-cat-label {
  font-size:10px; font-weight:700; padding:1px 6px; border-radius:3px;
  display:inline-block; margin-bottom:3px;
}
.drop-item-row {
  font-size:12px; font-weight:500; color:var(--text);
  padding:1px 4px;
}

/* ===== DUNGEON AREA CARDS ===== */
.dg-cards-wrap { margin-bottom:10px; }
.dg-cards { display:flex; flex-wrap:wrap; gap:6px; }
.dg-area-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:7px 10px;
}
.dg-area-name {
  font-size:10px; font-weight:700; color:var(--text2);
  letter-spacing:.3px; margin-bottom:5px;
}
.dg-area-btns { display:flex; gap:3px; flex-wrap:wrap; }
.dg-diff-btn {
  font-size:11px; font-weight:600; padding:2px 9px;
  border-radius:4px; border:1.5px solid;
  cursor:pointer; transition:all .12s;
  font-family:'Noto Sans KR',sans-serif;
}
.ddc-hard { color:#b91c1c; border-color:#fca5a5; background:#fff5f5; }
.ddc-hard:hover, .ddc-hard.active { background:#b91c1c; color:#fff; border-color:#b91c1c; }
.ddc-adv  { color:#b45309; border-color:#fed7aa; background:#fff7ed; }
.ddc-adv:hover,  .ddc-adv.active  { background:#b45309; color:#fff; border-color:#b45309; }
.ddc-mid  { color:#1d4ed8; border-color:#bfdbfe; background:#eff6ff; }
.ddc-mid:hover,  .ddc-mid.active  { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }
.ddc-nor  { color:#475569; border-color:#cbd5e1; background:#f8fafc; }
.ddc-nor:hover,  .ddc-nor.active  { background:#475569; color:#fff; border-color:#475569; }
.ddc-low  { color:#94a3b8; border-color:#e2e8f0; background:#f8fafc; }
.ddc-low:hover,  .ddc-low.active  { background:#64748b; color:#fff; border-color:#64748b; }

/* ===== DROP v2 — 지역/난이도 탭 + 칩 뷰 ===== */
.drop-area-tabs {
  display:flex; flex-wrap:wrap; gap:5px;
}
.drop-area-tab {
  font-size:11px; font-weight:700; padding:4px 13px;
  border-radius:20px; border:1.5px solid transparent;
  cursor:pointer; font-family:'Noto Sans KR',sans-serif;
  transition:all .12s;
}
.drop-area-tab                  { background:transparent; color:var(--text2); border-color:var(--border); }
.drop-area-tab:hover            { background:var(--card2); color:var(--text); border-color:var(--text2); }
.drop-area-tab.dah-orbis.active { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }
.drop-area-tab.dah-aqua.active  { background:#0f766e; color:#fff; border-color:#0f766e; }
.drop-area-tab.dah-lifre.active { background:#be185d; color:#fff; border-color:#be185d; }
.drop-area-tab.dah-rudi.active  { background:#a16207; color:#fff; border-color:#a16207; }
.drop-area-tab.dah-elnas.active { background:#6d28d9; color:#fff; border-color:#6d28d9; }
.drop-area-tab.dah-hene.active  { background:#15803d; color:#fff; border-color:#15803d; }

.drop-diff-tabs {
  display:flex; flex-wrap:wrap; gap:4px;
}
.drop-diff-tab {
  font-size:11px; font-weight:700; padding:3px 11px;
  border-radius:4px; border:1.5px solid var(--border);
  background:transparent; color:var(--text2);
  cursor:pointer; font-family:'Noto Sans KR',sans-serif;
  transition:all .12s;
}
.drop-diff-tab:hover { background:var(--card2); color:var(--text); }

/* ── 상단 카드 (검색 + 탭) ── */
.drop-top-card {
  display:inline-block; min-width:320px; padding:12px 14px;
}
.drop-top-search {
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.drop-area-row {
  display:flex; flex-wrap:wrap; gap:5px;
}
.drop-diff-row {
  display:flex; flex-wrap:wrap; gap:4px;
  padding-top:8px; border-top:1px solid var(--border);
}

/* 카테고리 카드 */
.drop-diff-row-cards {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; align-items:start;
}
.drop-cards-hdr {
  grid-column:1 / -1;
  display:flex; align-items:center; gap:8px;
  padding:9px 16px; border-bottom:1px solid var(--border);
}
.drop-cards-row {
  display:inline-grid; grid-template-columns:1fr 1fr; align-items:start;
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  overflow:hidden;
}
.drop-cards-hdr.ddc-hard { background:#fff5f5; }
.drop-cards-hdr.ddc-adv  { background:#fff7ed; }
.drop-cards-hdr.ddc-mid  { background:#eff6ff; }
.drop-cards-hdr.ddc-nor  { background:#f8fafc; }
.drop-cards-hdr.ddc-low  { background:#f8fafc; }
.drop-cards-hdr-diff {
  font-size:12px; font-weight:700;
}
.drop-cards-hdr.ddc-hard .drop-cards-hdr-diff { color:#b91c1c; }
.drop-cards-hdr.ddc-adv  .drop-cards-hdr-diff { color:#b45309; }
.drop-cards-hdr.ddc-mid  .drop-cards-hdr-diff { color:#1d4ed8; }
.drop-cards-hdr.ddc-nor  .drop-cards-hdr-diff { color:#475569; }
.drop-cards-hdr.ddc-low  .drop-cards-hdr-diff { color:#94a3b8; }
.drop-cards-row > *:nth-child(2) {
  padding:12px 16px; border-right:1px solid var(--border);
}
.drop-cards-row > *:last-child {
  padding:12px 16px;
}
.drop-cat-card { display:inline-flex; flex-direction:column; }
.drop-stack { display:flex; flex-direction:column; }
.drop-stack .drop-cat-card + .drop-cat-card {
  border-top:1px solid var(--border); padding-top:12px; margin-top:12px;
}
.drop-cat-card-hdr {
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; margin-bottom:6px;
  background:var(--card2); border-radius:5px;
}
.drop-cat-card-body { display:flex; flex-direction:column; gap:2px; padding:0 2px; }
.drop-cat-sec-icon { font-size:13px; line-height:1; }
.drop-cat-sec-name { font-size:11px; font-weight:700; color:var(--text); }
.drop-cat-sec-cnt  { font-size:10px; color:var(--text3); font-weight:600; }

.drop-chip-wrap { display:flex; flex-wrap:wrap; gap:4px; }
.drop-chip {
  font-size:11px; font-weight:500; color:var(--text);
  padding:2px 4px; white-space:nowrap;
}
.drop-chip mark.hl { background:#fef08a; color:#78350f; border-radius:2px; }

/* 역조회 */
.drop-search-results { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.drop-search-row {
  background:var(--card); border:1px solid var(--border);
  border-left:3px solid var(--border);
  border-radius:8px; padding:9px 13px;
  display:inline-flex; flex-direction:column; gap:7px;
}
.drop-search-row.dah-orbis { border-left-color:#1d4ed8; }
.drop-search-row.dah-aqua  { border-left-color:#0f766e; }
.drop-search-row.dah-lifre { border-left-color:#be185d; }
.drop-search-row.dah-rudi  { border-left-color:#a16207; }
.drop-search-row.dah-elnas { border-left-color:#6d28d9; }
.drop-search-row.dah-hene  { border-left-color:#15803d; }
.drop-search-loc { display:flex; align-items:center; gap:5px; }
.drop-srch-area {
  font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:10px; border:1px solid transparent;
}
.drop-srch-area.dah-orbis { background:#dbeafe; color:#1d4ed8; border-color:#93c5fd; }
.drop-srch-area.dah-aqua  { background:#ccfbf1; color:#0f766e; border-color:#5eead4; }
.drop-srch-area.dah-lifre { background:#fce7f3; color:#be185d; border-color:#f9a8d4; }
.drop-srch-area.dah-rudi  { background:#fef9c3; color:#a16207; border-color:#fcd34d; }
.drop-srch-area.dah-elnas { background:#ede9fe; color:#6d28d9; border-color:#c4b5fd; }
.drop-srch-area.dah-hene  { background:#dcfce7; color:#15803d; border-color:#86efac; }
.drop-srch-diff {
  font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:4px; border:1px solid;
}

/* ===== DUNGEON TAGS ===== */
.dlist { display:flex; flex-wrap:wrap; gap:3px; }
.dtag {
  display:inline-flex; align-items:center; gap:3px;
  padding:1px 6px; border-radius:3px; font-size:10px;
  background:var(--bg); border:1px solid var(--border);
  white-space:nowrap; color:var(--text2);
}

/* ===== DUNGEON LIST ===== */
.dlist-drop { font-size:11px; color:var(--text2); line-height:1.8; }
.dn-sep     { color:var(--text3); }

/* ===== 획득경로 (드롭+제작 통합) ===== */
.src-cell   { padding:4px 8px !important; vertical-align:middle; }
.src-drop   { font-size:11px; color:var(--text2); line-height:1.8; }
.src-craft  {
  font-size:11px; color:var(--text2); line-height:1.8;
}
.src-drop + .src-craft {
  margin-top:2px; padding-top:2px;
  border-top:1px dashed var(--border);
}
.src-shop-badges { display:flex; gap:3px; flex-wrap:wrap; margin-top:2px; }
.src-badge {
  display:inline-block; padding:1px 5px; border-radius:3px;
  font-size:10px; font-weight:700; white-space:nowrap;
}
.badge-jumo    { background:#22c55e22; color:#4ade80; border:1px solid #22c55e55; }
.badge-nuko    { background:#f59e0b22; color:#f59e0b; border:1px solid #f59e0b55; }
.badge-rira    { background:#8b5cf622; color:#a78bfa; border:1px solid #8b5cf655; }
.badge-dungeon { background:transparent; border:1px solid #94a3b8; }
.dmg-cost   { color:var(--gold); font-weight:700; }
.price-rira { color:var(--blue); font-weight:700; }

/* 난이도 텍스트 색상 */
.dd-txt { font-weight:700; }
.dd-txt.dd-hard { color:#dc2626; }
.dd-txt.dd-adv  { color:#b45309; }
.dd-txt.dd-mid  { color:#2563eb; }
.dd-txt.dd-nor  { color:#475569; }
.dd-txt.dd-low  { color:#94a3b8; }

/* 확률 */
.dg-rate { font-size:9px; color:var(--text2); font-weight:600; white-space:nowrap; }

/* ===== PRICE ===== */
.price { color:var(--gold); font-weight:700; }
.pna   { color:var(--text3); font-style:italic; }

/* ===== STATS ROW ===== */
.srow { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.sc {
  background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:12px 16px;
  flex:1; min-width:120px;
  transition:box-shadow .15s;
}
.sc:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); }
.sc .lbl { font-size:11px; color:var(--text2); margin-bottom:4px; font-weight:500; }
.sc .val { font-size:22px; font-weight:900; color:var(--gold); }

/* ===== SECTION TITLE ===== */
.stitle {
  font-size:13px; font-weight:700; color:var(--text);
  padding-bottom:8px; margin-bottom:12px;
  border-bottom:2px solid var(--gold-bdr);
  display:flex; align-items:center; gap:8px;
}

/* ===== INFO CARD ===== */
.ic {
  background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:16px;
}

/* ===== CRIT / PRICE GRIDS ===== */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:900px) { .g2 { grid-template-columns:1fr; } }

/* ===== MY DATA ===== */
.myin {
  background:var(--bg); border:1px solid var(--border);
  border-radius:3px; padding:2px 6px;
  color:#111; font-size:11px; width:62px;
  font-family:'Noto Sans KR',sans-serif;
  outline:none; transition:border-color .15s;
}
.mb-price-inp { text-align:right; }
.pr-inp-wolko { color:#8b5cf6 !important; font-weight:700; }
.pr-inp-meso  { color:#3b82f6 !important; font-weight:700; }
.pr-inp-nuco  { color:#f59e0b !important; font-weight:700; }
.pr-inp-date  { font-size:9px; color:var(--text3); margin-top:1px; text-align:right; }
.pr-row-date  { font-size:9px; color:var(--text3); white-space:nowrap; margin-bottom:2px; }
.myin:focus { border-color:var(--sb-gold); }
.mb-price-date { font-size:10px; color:var(--text3); white-space:nowrap; }
.owned { background:#f7fef9 !important; }
.ckbtn {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:4px;
  border:1.5px solid var(--border); background:var(--card2);
  cursor:pointer; font-size:11px; font-weight:900; color:transparent;
  padding:0; transition:all .15s; flex-shrink:0;
}
.ckbtn:hover { transform:scale(1.15); }
.ckbtn.ck-c.on { background:#22c55e; border-color:#22c55e; color:#fff; }
.ckbtn.ck-y.on { background:#a855f7; border-color:#a855f7; color:#fff; }
.ck-pair { display:inline-flex; gap:3px; align-items:center; }

/* ===== MASTERYBOOK ALL-TIER LAYOUT ===== */
.mb-all-grid {
  flex:1; min-height:0; display:flex; gap:6px; overflow:hidden;
}
.mb-col-hwan {
  display:flex; flex-direction:column; width:420px; min-width:260px;
  border:1px solid var(--border); border-radius:6px; overflow:hidden;
}
.mb-col-right {
  flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden;
}
.mb-four-grid {
  flex:1; min-height:0;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:6px; overflow:hidden;
}
.mb-mini {
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:6px; overflow:hidden; min-height:0;
}
.mb-col-title {
  font-size:10px; font-weight:700; color:var(--text2);
  padding:4px 8px; background:var(--card2);
  border-bottom:1px solid var(--border);
  text-transform:uppercase; letter-spacing:.4px; flex-shrink:0;
}
.mb-col-hwan > .tw,
.mb-mini > .tw {
  flex:1; min-height:0; overflow-y:auto; overflow-x:auto;
  padding-bottom:0; border-radius:0; border:none;
}
.mb-col-hwan .tw thead th,
.mb-mini .tw thead th { position:sticky; top:0; z-index:10; }
.mb-tier-block table { table-layout:fixed; width:100%; }
.mb-tier-block .mb-skill-cell,
.mb-tier-block thead th:first-child { width:176px; }

/* ===== MASTERYBOOK BAR ===== */
.mb-bar {
  display:flex; align-items:center; gap:3px;
  margin-bottom:8px; flex-wrap:wrap;
}
.mb-tab {
  background:transparent; border:1px solid transparent;
  border-radius:5px; padding:4px 12px;
  color:var(--text2); font-size:12px; font-weight:500;
  cursor:pointer; font-family:'Noto Sans KR',sans-serif;
  transition:all .1s;
}
.mb-tab:hover { background:var(--card2); border-color:var(--border); color:var(--text); }
.mb-tab.active {
  background:var(--card); border-color:var(--border);
  color:var(--text); font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.mb-skill-row > td:not(.mb-skill-cell) { border-top:1px solid #e2e8f0 !important; }
.mb-skill-cell {
  vertical-align:top; padding-top:5px !important;
  background:#fafafa !important;
  border-top:1px solid #e2e8f0 !important;
}
.mb-skill-name { font-weight:600; font-size:12px; color:var(--text); }
.book-badge {
  display:inline-block; padding:1px 6px;
  background:#f1f5f9; color:#475569;
  border:1px solid #cbd5e1; border-radius:3px;
  font-size:10px; font-weight:600;
}
.book-badge.hwan {
  background:#fef9ec; color:#92400e;
  border-color:#fde68a;
}
.book-badge.base {
  background:#f8fafc; color:var(--text3);
  border-color:var(--border);
}
.book-badge.dmg {
  background:#fff7ed; color:#b45309;
  border-color:#fed7aa;
}
.prob-badge {
  display:inline-block; padding:1px 5px; border-radius:3px;
  background:#fff7ed; color:#b45309; border:1px solid #fed7aa;
  font-size:10px; font-weight:700; white-space:nowrap;
}
.base-row td { background:#fafafa !important; color:var(--text3); }

/* ===== HIGHLIGHT ===== */
mark.hl {
  background:#fef08a; color:inherit;
  border-radius:2px; padding:0 1px;
}

/* ===== SAVE BANNER ===== */
.save-banner {
  position:fixed; bottom:20px; right:20px; z-index:999;
  background:var(--green); color:#fff;
  padding:10px 20px; border-radius:8px;
  font-weight:700; font-size:13px;
  opacity:0; transition:opacity .25s;
  pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.save-banner.show { opacity:1; }

.no-res { padding:32px; text-align:center; color:var(--text2); font-style:italic; }

/* ===== COLORED CATEGORY TABS (dcc-*) ===== */
.drop-cat-cards { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.dcc-all  { color:#475569; background:#f8fafc; border-color:#cbd5e1; }
.dcc-all:hover  { background:#e2e8f0; border-color:#94a3b8; color:#1e293b; }
.dcc-all.active { background:#1e293b; border-color:#1e293b; color:#f8fafc; }

.dcc-equip { color:#1d4ed8; background:#eff6ff; border-color:#bfdbfe; }
.dcc-equip:hover  { background:#dbeafe; border-color:#3b82f6; }
.dcc-equip.active { background:#1d4ed8; border-color:#1d4ed8; color:#fff; }

.dcc-book { color:#b91c1c; background:#fff5f5; border-color:#fca5a5; }
.dcc-book:hover  { background:#fee2e2; border-color:#ef4444; }
.dcc-book.active { background:#b91c1c; border-color:#b91c1c; color:#fff; }

.dcc-mb { color:#6d28d9; background:#faf5ff; border-color:#c4b5fd; }
.dcc-mb:hover  { background:#ede9fe; border-color:#7c3aed; }
.dcc-mb.active { background:#6d28d9; border-color:#6d28d9; color:#fff; }

.dcc-pass { color:#c2410c; background:#fff7ed; border-color:#fed7aa; }
.dcc-pass:hover  { background:#ffedd5; border-color:#f97316; }
.dcc-pass.active { background:#c2410c; border-color:#c2410c; color:#fff; }

.dcc-curr { color:#92400e; background:#fffbeb; border-color:#fcd34d; }
.dcc-curr:hover  { background:#fef3c7; border-color:#f59e0b; }
.dcc-curr.active { background:#92400e; border-color:#92400e; color:#fff; }

.dcc-etc  { color:#475569; background:#f8fafc; border-color:#e2e8f0; }
.dcc-etc:hover  { background:#f1f5f9; border-color:#94a3b8; }
.dcc-etc.active { background:#475569; border-color:#475569; color:#fff; }

/* ===== DUNGEON FILTER BAR ===== */
.dg-filter {
  display:flex; flex-wrap:wrap; gap:4px; align-items:center;
  padding:8px 12px; margin-bottom:10px;
  background:var(--card); border:1px solid var(--border); border-radius:8px;
}
.dg-filter-label {
  font-size:10px; font-weight:700; color:var(--text2);
  text-transform:uppercase; letter-spacing:.5px;
  margin-right:6px; white-space:nowrap;
}
.dgbtn {
  font-size:11px; padding:3px 9px; border-radius:4px;
  border:1px solid var(--border); cursor:pointer;
  background:var(--bg); color:var(--text2);
  transition:all .12s; font-family:'Noto Sans KR',sans-serif; white-space:nowrap;
}
.dgbtn:hover { border-color:var(--text2); color:var(--text); background:var(--card); }
.dgbtn.active { background:#1e293b; color:#e2e8f0; border-color:#1e293b; }
.dg-cnt {
  display:inline-block; margin-left:4px;
  font-size:9px; font-weight:700; color:var(--text3);
  vertical-align:middle; line-height:1;
}
.dgbtn.active .dg-cnt { color:#94a3b8; }

/* ===== PRICE PAGE ===== */
/* price cards */
.pr-card {
  flex:1; min-width:0; border:1px solid var(--border);
  border-radius:10px; overflow:hidden; background:var(--card);
}
.pr-card-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px;
}
.pr-card-title { font-size:13px; font-weight:700; }
.pr-card-cnt   { font-size:11px; opacity:.75; }
.pr-card-body  { display:flex; flex-direction:column; }

.pr-row {
  display:flex; flex-direction:column; gap:2px;
  padding:6px 12px; border-top:1px solid var(--border);
  font-size:12px;
}
.pr-row.owned { background:#f0fdf4; }
.pr-name { font-weight:500; color:var(--text); line-height:1.3; }
.pr-price-wrap { display:flex; align-items:center; gap:6px; }
.pr-disp { cursor:pointer; color:var(--text2); font-size:12px; }
.pr-empty {
  display:inline-block; width:18px; height:18px; line-height:16px;
  text-align:center; border:1.5px dashed var(--border); border-radius:4px;
  color:var(--text3); font-size:11px;
}
.pr-date { font-size:10px; color:var(--text3); margin-left:auto; }

.pr-edit-mode-btn {
  padding:4px 12px; border-radius:6px; font-size:12px; font-weight:700;
  background:#f1f5f9; border:1px solid var(--border); cursor:pointer; color:var(--text);
}
.pr-edit-mode-btn:hover { background:#e2e8f0; }
.pr-drag-handle { cursor:grab; color:var(--text3); padding:4px 8px; font-size:14px; }
.pr-dragging { opacity:.4; }
.pr-drag-over { background:#eff6ff; outline:2px solid #93c5fd; }
.pr-edit-inp { width:100%; }
.pr-add-btn {
  font-size:12px; color:var(--blue); background:none; border:1px dashed var(--border);
  border-radius:4px; padding:2px 10px; cursor:pointer; width:100%;
}
.pr-add-btn:hover { background:#eff6ff; }

/* 아이템 추가 모달 */
.pr-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.pr-modal {
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  width:320px; max-width:calc(100vw - 32px); box-shadow:0 8px 32px rgba(0,0,0,.4);
  display:flex; flex-direction:column; overflow:hidden;
}
.pr-modal-hdr {
  padding:14px 16px 10px; font-weight:700; font-size:14px; border-bottom:1px solid var(--border);
}
.pr-modal-body { padding:14px 16px; }
.pr-modal-label { font-size:11px; color:var(--sub); display:block; margin-bottom:4px; }
.pr-modal-sel {
  width:100%; padding:6px 8px; border-radius:6px;
  border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:13px;
}
.pr-modal-inp {
  width:100%; box-sizing:border-box; padding:6px 8px; border-radius:6px;
  border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:13px;
}
.pr-modal-inp:focus, .pr-modal-sel:focus { outline:none; border-color:var(--blue); }
.pr-modal-foot {
  padding:10px 16px 14px; display:flex; justify-content:flex-end; gap:8px;
  border-top:1px solid var(--border);
}
.pr-modal-btn-cancel {
  padding:6px 14px; border-radius:6px; border:1px solid var(--border);
  background:none; color:var(--sub); font-size:13px; cursor:pointer;
}
.pr-modal-btn-ok {
  padding:6px 16px; border-radius:6px; border:none;
  background:var(--blue); color:#fff; font-size:13px; font-weight:600; cursor:pointer;
}
.pr-modal-btn-ok:hover { opacity:.85; }

.pr-section {
  width:100%; box-sizing:border-box;
  border:1px solid var(--border); border-radius:10px;
  overflow:hidden; margin-bottom:10px; cursor:default;
  break-inside:avoid;
}
.pr-section.pr-cat-drag-over { outline:2px dashed var(--sb-gold); }
.pr-section-hdr {
  display:flex; align-items:center; gap:6px;
  padding:8px 10px; cursor:grab;
}
.pr-section-title { font-size:13px; font-weight:700; }
.pr-section-cnt   { font-size:11px; opacity:.75; }
.pr-section .tw   { border-radius:0; border:none; overflow-x:auto; }
.pr-conv-wrap  { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.pr-conv-field { display:flex; align-items:center; }
.pr-conv-tag   {
  padding:1px 5px; font-size:10px; font-weight:700; white-space:nowrap;
  border-radius:3px 0 0 3px; border:1px solid; border-right:none;
  line-height:1.6; cursor:default;
}
.pr-conv-cash  { background:#fee2e2; border-color:#fca5a5; color:#dc2626; }
.pr-conv-wolko { background:#ede9fe; border-color:#c4b5fd; color:#7c3aed; }
.pr-conv-nuko  { background:#fef3c7; border-color:#fcd34d; color:#b45309; }
.pr-conv-meso  { background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; }
.pr-conv-inp   {
  width:72px; padding:2px 5px; font-size:12px; font-weight:600;
  border:1px solid var(--border); border-radius:0 3px 3px 0;
  background:var(--bg); color:var(--text); font-family:'Noto Sans KR',sans-serif;
  outline:none; text-align:right;
}
.pr-conv-inp:focus { border-color:var(--sb-gold); }
.pr-add-cat-wrap  { width:100%; display:flex; justify-content:flex-start; padding:4px 0; }
.pr-add-cat-btn   {
  padding:6px 14px; border-radius:8px; font-size:12px; font-weight:700;
  background:#f0fdf4; color:#16a34a; border:1.5px dashed #86efac; cursor:pointer;
}
.pr-add-cat-btn:hover { background:#dcfce7; }

.pr-catbadge {
  display:inline-block; padding:1px 7px; border-radius:10px;
  font-size:10px; font-weight:700; border:1.5px solid; white-space:nowrap;
}
.pr-inp {
  width:70px; text-align:right;
  background:var(--bg); border:1px solid var(--border);
  border-radius:3px; padding:2px 6px;
  color:var(--gold); font-size:12px; font-weight:700;
  font-family:'Noto Sans KR',sans-serif; outline:none;
}
.pr-inp:focus { border-color:var(--sb-gold); }
.pr-unit-tog {
  padding:1px 4px; font-size:10px; font-weight:700; white-space:nowrap;
  border-radius:3px; border:1px solid #93c5fd; background:#dbeafe; color:#1d4ed8;
  cursor:pointer; line-height:1.4; flex-shrink:0;
}
.pr-unit-tog.man { border-color:#fcd34d; background:#fef3c7; color:#b45309; }
.pr-inp-meso-man  { color:#7c6b3f !important; }
.pr-unit-btn {
  padding:1px 6px; border-radius:4px; font-size:11px; font-weight:700;
  background:#e0e7ff; color:#4338ca; border:1px solid #a5b4fc; cursor:pointer;
}
.pr-unit-btn:hover { background:#c7d2fe; }
.pr-disp { min-width:40px; display:inline-block; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text3); }