/* ── 탭 패널 ── */
.wiki-tab-panel { display:none; }
.wiki-tab-panel.active { display:block; }

/* ── 공통 카드 ── */
.cc-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:10px; overflow:hidden; margin-bottom:16px;
}
.cc-card:last-child { margin-bottom:0; }
.cc-card-header {
  background:var(--primary); color:#fff;
  padding:10px 16px; font-weight:700; font-size:.95em;
  display:flex; align-items:center; gap:8px;
}
.cc-card-body { padding:16px; }

/* ── 입력 레이아웃 ── */
.cc-row {
  display:flex; gap:10px; align-items:center;
  flex-wrap:wrap; margin-bottom:10px;
}
.cc-row:last-child { margin-bottom:0; }
.cc-label {
  font-size:.85em; font-weight:600; color:var(--text-sub);
  min-width:72px;
}
/* .cc-input base style → style.css .filter-input 그룹 셀렉터로 통합 (2026-04-12) */
.cc-input { width:80px; text-align:center; }
.cc-arrow { color:var(--text-muted); }

/* ── 버튼 ── */
/* .cc-btn base style → style.css .action-btn 그룹 셀렉터로 통합 (2026-04-12) */
.cc-btn-reset {
  padding:5px 14px; border:1px solid var(--border); border-radius:6px;
  background:var(--bg); color:var(--text-muted); font-weight:600;
  font-size:.85em; cursor:pointer; font-family:inherit;
}
.cc-btn-reset:hover { border-color:var(--primary); color:var(--primary); }

/* ── 칩 ── */
.cc-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.cc-chip {
  padding:4px 12px; border-radius:20px; font-size:.8em; font-weight:600;
  cursor:pointer; border:1px solid var(--border);
  background:var(--bg); color:var(--text-muted); transition:all .12s;
  white-space:nowrap;
}
.cc-chip:hover { border-color:var(--primary); color:var(--primary); }
.cc-chip.active { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ── 등급 칩 색상 ── */
.cc-chip[data-grade="E"]   { --gc:#9e9e9e; }
.cc-chip[data-grade="D"]   { --gc:#66bb6a; }
.cc-chip[data-grade="C"]   { --gc:#29b6f6; }
.cc-chip[data-grade="B"]   { --gc:#ab47bc; }
.cc-chip[data-grade="A"]   { --gc:#ef5350; }
.cc-chip[data-grade="S"]   { --gc:#ffa726; }
.cc-chip[data-grade="SS"]  { --gc:#ff7043; }
.cc-chip[data-grade="SSS"] { --gc:#ec407a; }
.cc-chip[data-grade] { border-color:var(--gc); color:var(--gc); }
.cc-chip[data-grade].active { background:var(--gc); border-color:var(--gc); color:#fff; }

/* ── 공통 결과 박스 ── */
.cc-result {
  margin-top:12px; padding:12px 14px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:8px; font-size:.88em; display:none;
}
.cc-result.show { display:block; }
.cc-result-row {
  display:flex; justify-content:space-between;
  padding:4px 0; border-bottom:1px solid var(--border);
}
.cc-result-row:last-child { border-bottom:none; }
.cc-result-label { color:var(--text-sub); font-weight:600; }
.cc-result-value { color:var(--primary); font-weight:700; }

/* ── 비교 박스 (캐릭터 레벨) ── */
.cc-compare { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.cc-cmp-box {
  flex:1; min-width:160px;
  padding:12px 14px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg);
}
.cc-cmp-box.hl { border-color:var(--primary); background:var(--primary-light,#f0f4ff); }
.cc-cmp-title { font-size:.78em; font-weight:700; color:var(--text-muted); margin-bottom:8px; letter-spacing:.04em; }
.cc-cmp-title.hl { color:var(--primary); }
.cc-cmp-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:3px 0; border-bottom:1px solid var(--border);
}
.cc-cmp-row:last-child { border-bottom:none; }
.cc-cmp-key { font-size:.82em; color:var(--text-sub); }
.cc-cmp-val { font-size:.88em; font-weight:700; color:var(--text); }
.cc-cmp-val.p { color:var(--primary); }
.cc-cmp-total {
  margin-top:8px; padding-top:8px; border-top:2px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.cc-cmp-total .cc-cmp-key { font-weight:700; font-size:.85em; color:var(--text); }
.cc-cmp-total .cc-cmp-val { font-size:1em; }

/* ── 돌파 테이블 ── */
.cc-break-table { width:100%; border-collapse:collapse; font-size:.82em; margin-top:8px; }
.cc-break-table th, .cc-break-table td { padding:4px 8px; text-align:center; border-bottom:1px solid var(--border); }
.cc-break-table th { background:var(--bg); font-weight:700; color:var(--text-muted); font-size:.9em; }
.cc-break-table td:first-child { text-align:left; }

/* ── 스킬북 결과 아이템 ── */
.cc-skill-items { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.cc-skill-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg);
  min-width:160px;
}
.cc-skill-item img { width:28px; height:28px; object-fit:contain; }
.cc-skill-item-name { font-size:.82em; color:var(--text-sub); }
.cc-skill-item-count { font-size:.92em; font-weight:700; color:var(--primary); }

/* ── 스킬 FROM/TO 섹션 ── */
.cc-skill-section { margin-bottom:14px; }
.cc-skill-section-label {
  font-size:.78em; font-weight:700; color:var(--text-muted);
  margin-bottom:6px; letter-spacing:.04em;
}

/* ── 특성 강화 ── */
.cc-attr-controls {
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding-bottom:10px; margin-bottom:10px;
  border-bottom:1px solid var(--border);
}
.cc-attr-set-label { font-size:.82em; color:var(--text-muted); font-weight:600; }
.cc-attr-list { display:flex; flex-direction:column; gap:6px; }
.cc-attr-item {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:7px 10px; border-radius:8px;
  background:var(--bg); border:1px solid var(--border);
}
.cc-attr-name { flex:1; min-width:140px; font-size:.83em; font-weight:600; color:var(--text); }
.cc-attr-num { color:var(--text-muted); font-weight:400; font-size:.85em; margin-left:3px; }
.cc-attr-inputs { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.cc-attr-result { font-size:.83em; font-weight:700; color:var(--primary); min-width:72px; text-align:right; }
.cc-attr-total {
  margin-top:12px; padding:10px 14px;
  background:var(--primary-light,#f0f4ff); border:1px solid var(--primary);
  border-radius:8px; display:none;
}
.cc-attr-total.show { display:block; }
.cc-attr-summary-row {
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:6px 0; border-bottom:1px solid var(--border);
}
.cc-attr-summary-row:last-child { border-bottom:none; }
.cc-attr-summary-label { font-size:.85em; font-weight:600; color:var(--text-sub); flex-shrink:0; padding-top:2px; }
.cc-attr-summary-val {
  font-size:.9em; font-weight:800; color:var(--primary);
  text-align:right; min-width:0; flex:1;
  display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:flex-end; align-items:center;
}
.cc-attr-summary-val.grand { font-size:1.05em; }

/* ── 표식 각성 테이블 ── */
.cc-awake-table { width:100%; border-collapse:collapse; font-size:.82em; margin-top:8px; }
.cc-awake-table th, .cc-awake-table td { padding:4px 8px; text-align:center; border-bottom:1px solid var(--border); }
.cc-awake-table th { background:var(--bg); font-weight:700; color:var(--text-muted); }
.cc-awake-table td:first-child { text-align:left; }

/* ── 전용무기 캐릭터 그리드 ── */
.cc-char-grid {
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:14px;
}
.cc-char-chip {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 8px; border-radius:8px; cursor:pointer;
  border:2px solid var(--border); background:var(--bg);
  transition:all .12s; width:64px;
}
.cc-char-chip img { width:40px; height:40px; object-fit:cover; border-radius:4px; }
.cc-char-chip span { font-size:.68em; color:var(--text-muted); text-align:center; line-height:1.2; word-break:keep-all; }
.cc-char-chip:hover { border-color:var(--primary); }
.cc-char-chip.active { border-color:var(--primary); background:var(--primary-light,#f0f4ff); }
.cc-char-chip.active span { color:var(--primary); font-weight:700; }

/* ── 전용무기 선택 정보 ── */
.cc-weapon-info {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg);
  margin-bottom:12px; display:none;
}
.cc-weapon-info.show { display:flex; }
.cc-weapon-info img { width:40px; height:40px; object-fit:contain; }
.cc-weapon-info-name { font-size:.9em; font-weight:700; color:var(--text); }

/* ── 성장 탭 2단 배치 ── */
.cc-growth-grid { display:flex; flex-direction:column; gap:16px; }
@media (min-width:768px) {
  .cc-growth-grid { flex-direction:row; }
  .cc-growth-grid .cc-card { flex:1; margin-bottom:0; }
}

/* ── 성장 탭 lazy ── */
.cc-loading {
  text-align:center; padding:24px; color:var(--text-muted);
  font-size:.9em;
}

/* ── 성장 스텝 버튼 ── */
.cc-growth-step-btn {
  padding:3px 7px; border-radius:5px; font-size:.75em; font-weight:700;
  cursor:pointer; border:1px solid var(--border);
  background:var(--bg); color:var(--text-muted);
  transition:all .1s; white-space:nowrap;
}
.cc-growth-step-btn:hover { border-color:var(--primary); color:var(--primary); }
.cc-growth-max-btn { color:var(--primary); border-color:var(--primary); }

/* ── 장비 탭 ── */
.cc-equip-section-label {
  font-size:.78em; font-weight:700; color:var(--text-muted);
  margin-bottom:6px; letter-spacing:.04em;
}

/* ── 천공의 제단 ── */
.cc-voidorb-grid { display:flex; flex-direction:column; gap:16px; }
@media (min-width:768px) {
  .cc-voidorb-grid { flex-direction:row; }
  .cc-voidorb-grid .cc-card { flex:1; margin-bottom:0; }
}

/* ── 반응형 ── */
@media(max-width:768px) {
  .cc-char-chip { width:56px; }
  .cc-char-chip img { width:34px; height:34px; }
  .cc-compare { flex-direction:column; }
  .cc-attr-controls { gap:6px; }
}

/* 삼라만상 미리보기 카드 그리드 */
.cosmos-preview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(60px, 1fr));
  gap: 8px;
  margin-top: 10px;
  max-width: 480px;
}
.cosmos-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .78em;
}
.cosmos-preview-card.is-min {
  border-color: var(--primary);
  background: #eff6ff;
}
.cosmos-preview-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
}
.cosmos-preview-name {
  font-weight: 600;
  color: var(--text);
  font-size: 11px;
}
.cosmos-preview-lv {
  font-family: monospace;
  color: var(--primary);
  font-weight: 700;
  font-size: 12px;
}
.cosmos-preview-meta {
  grid-column: 1 / -1;
  font-size: .82em;
  color: var(--text-muted);
  text-align: center;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.cosmos-preview-meta b { color: var(--primary); }

/* 행별 결과: 평문 (아이콘 없이, 다른 탭 글씨 크기 상속) */
.cc-mat-text { white-space: nowrap; }
.cc-mat-text .cc-mat-name { color: var(--text-muted); font-weight: 500; }
.cc-mat-text .cc-mat-amt  { color: var(--primary);    font-weight: 700; }

/* 합산 요약: 아이콘 칩 */
.cc-mat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.cc-mat-chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.cc-mat-chip .cc-mat-name {
  color: var(--text-muted);
  font-weight: 500;
}
.cc-mat-chip .cc-mat-amt {
  color: var(--primary);
  font-weight: 700;
  font-family: monospace;
}

/* ── 결속 인장 카드 그리드 (이미지 크게) ─────────────────────── */
.cc-link-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:10px; margin-top:10px;
}
.cc-link-card {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--bg-card);
}
.cc-link-img {
  width:56px; height:56px; object-fit:contain; flex-shrink:0;
  border-radius:8px; background:var(--bg-muted);
}
.cc-link-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.cc-link-name { font-size:.92em !important; font-weight:700 !important; color:var(--text) !important; min-width:0 !important; flex:unset !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-link-card .cc-attr-inputs { gap:5px; }
.cc-link-card .cc-input { width:70px !important; font-size:.82em; padding:4px 6px; }
.cc-link-result { font-size:.88em !important; font-weight:700 !important; color:var(--primary) !important; min-width:0 !important; text-align:left !important; margin-top:2px; }
@media(max-width:600px){
  .cc-link-grid { grid-template-columns:1fr; }
  .cc-link-img { width:48px; height:48px; }
}

/* 삼라만상 파츠 행: 결과를 2컬럼 그리드로 (보주 / 강화석)
   각 셀 내부 = [img 18px][name][amt 우측정렬]
   → 숫자/단위 길이 변화에도 셀 폭 유지, row 전체 정렬 고정 */
#cosmosList .cc-attr-item { align-items: center; }
#cosmosList .cc-attr-result {
  width: 300px;
  min-width: 300px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}
/* 셀 사이 구분선 */
#cosmosList .cc-attr-result > .cc-mat-cell + .cc-mat-cell {
  border-left: 1px dashed var(--border);
  padding-left: 12px;
}
#cosmosList .cc-attr-result > .cc-mat-cell:first-child {
  padding-right: 12px;
}
.cc-mat-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.cc-mat-cell img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.cc-mat-cell .cc-mat-name {
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.cc-mat-cell .cc-mat-amt {
  color: var(--primary);
  font-weight: 700;
  font-family: monospace;
  font-variant-numeric: tabular-nums;
  margin-left: auto;      /* 수량을 셀 우측으로 밀어 정렬 */
  padding-left: 6px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  #cosmosList .cc-attr-result {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
}
/* 합산/능력치 값은 inline 칩들을 우측 정렬 */
#cosmosTotalVal,
#cosmosStatVal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: flex-end;
  align-items: center;
}
@media (max-width: 768px) {
  #cosmosTotalVal, #cosmosStatVal { justify-content: flex-start; }
}

/* 삼라만상 강화 능력치 — 인라인 평문 */
.cc-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .82em;
  white-space: nowrap;
}
.cc-stat-name {
  color: var(--text-muted);
}
.cc-stat-val {
  font-family: monospace;
  font-weight: 700;
  color: var(--primary);
}