/* maker.css — 아이템메이커 전용 (style.css 는 건드리지 않음) */

.mk-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.mk-tab {
  padding: 7px 16px; border: 1px solid #3a3f52; border-radius: 6px 6px 0 0;
  background: #1c2030; color: #9aa3bd; font-size: 0.9rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.mk-tab:hover { background: #242a3d; color: #cdd5ea; }
.mk-tab.active { background: #2d3450; color: #fff; border-bottom-color: #2d3450; }

.mk-body { min-height: 320px; }

.mk-layout { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.mk-grid-wrap { flex: 0 0 auto; }
.mk-editor {
  flex: 1 1 340px; min-width: 300px; max-width: 520px;
  background: #171b28; border: 1px solid #2c3245; border-radius: 8px; padding: 14px;
}

/* 슬롯 — 기존 .equip-slot 위에 메이커 상태만 덧입힌다 */
.mk-slot { cursor: pointer; }
.mk-slot:hover { outline: 1px solid #5b6cff; }
.mk-slot.mk-selected { outline: 2px solid #5b6cff; }
.mk-slot.mk-dirty::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 7px; height: 7px; border-radius: 50%; background: #ffb020;
}

.mk-hint { color: #7d869f; font-size: 0.85rem; margin: 8px 0; }
.mk-warn { color: #ff8b6b; }

.mk-ed-head { border-bottom: 1px solid #2c3245; padding-bottom: 8px; margin-bottom: 10px; }
.mk-ed-title { font-size: 1.05rem; color: #fff; font-weight: 600; }
.mk-ed-sub { font-size: 0.8rem; color: #8b93ad; margin-top: 2px; }

.mk-field { display: block; margin: 12px 0; font-size: 0.85rem; color: #aab2c9; }
.mk-field > span:first-child { display: block; margin-bottom: 5px; }
.mk-field b { color: #ffd479; }
.mk-inline { display: flex; gap: 5px; }
.mk-field input[type="text"], .mk-field input[type="number"] {
  background: #10131d; border: 1px solid #333a50; border-radius: 5px;
  color: #e6ebf7; padding: 6px 9px; font-size: 0.85rem; width: 100%;
}
.mk-inline input[type="number"] { width: 100%; min-width: 0; text-align: right; }
.mk-field input[type="range"] { width: 100%; accent-color: #5b6cff; }

.mk-results { max-height: 190px; overflow-y: auto; margin: -4px 0 8px; }
.mk-res {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; text-align: left; padding: 6px 9px; margin-bottom: 3px;
  background: #10131d; border: 1px solid #2c3245; border-radius: 5px;
  color: #dfe5f3; font-size: 0.82rem; cursor: pointer;
}
.mk-res:hover { background: #1e2436; border-color: #5b6cff; }
.mk-res-meta { color: #8b93ad; font-size: 0.76rem; white-space: nowrap; }

.mk-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.82rem; }
.mk-table th, .mk-table td { padding: 5px 7px; text-align: right; border-bottom: 1px solid #232838; }
.mk-table th { color: #8b93ad; font-weight: 500; }
.mk-table th:first-child, .mk-table td:first-child { text-align: left; color: #aab2c9; }
.mk-table td { color: #e6ebf7; font-variant-numeric: tabular-nums; }
.mk-up { color: #6fdc8c; }
.mk-down { color: #ff7a7a; }

.mk-ed-foot { margin-top: 12px; }
.mk-btn {
  padding: 6px 12px; border: 1px solid #3a4260; border-radius: 5px;
  background: #232a3d; color: #cdd5ea; font-size: 0.82rem; cursor: pointer;
}
.mk-btn:hover:not(:disabled) { background: #2d3450; }
.mk-btn:disabled { opacity: .45; cursor: default; }

.mk-detail { margin-top: 10px; font-size: 0.78rem; color: #7d869f; }
.mk-detail summary { cursor: pointer; }
.mk-layers { padding: 6px 0 0 10px; font-variant-numeric: tabular-nums; }

/* 제작 탭 */
.mk-craft-bar { display: flex; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.mk-slotsel {
  background: #10131d; border: 1px solid #333a50; border-radius: 5px;
  color: #e6ebf7; padding: 6px 9px; font-size: 0.85rem;
}
.mk-craft-bar .mk-search { flex: 1 1 200px; }
.mk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-height: 460px; overflow-y: auto; }
.mk-card { background: #171b28; border: 1px solid #2c3245; border-radius: 6px; padding: 9px 11px; }
.mk-card-name { color: #e6ebf7; font-size: 0.86rem; font-weight: 600; }
.mk-card-meta { color: #8b93ad; font-size: 0.75rem; margin-top: 2px; }
.mk-card-stat { color: #9aa3bd; font-size: 0.75rem; margin-top: 5px; }

/* 하단 Δ 바 */
.mk-delta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 14px;
  background: #141824; border: 1px solid #2c3245; border-radius: 8px; font-size: 0.82rem;
}
.mk-delta-label { color: #ffd479; font-weight: 600; }
.mk-delta-slots { color: #aab2c9; flex: 1 1 160px; }
.mk-delta-note { color: #8e97b4; font-size: 0.75rem; }



.mk-note {
  display: block; margin-top: 6px; padding: 6px 8px;
  background: #2a2318; border-left: 3px solid #ffb020; border-radius: 0 4px 4px 0;
  color: #d9c9a8; font-size: 0.75rem; line-height: 1.45;
}

/* ── 슬롯 ★ 배지: 아이콘과 겹치지 않게 하단 띠로 ───────────────────────── */
.mk-slot { position: relative; overflow: hidden; }
.mk-slot .slot-icon { max-width: 76%; max-height: 76%; margin-bottom: 6px; }
.mk-slot .slot-star {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  padding: 1px 0; text-align: center;
  background: rgba(8, 10, 18, 0.82);
  color: #ffd479; font-size: 0.62rem; line-height: 1.25; letter-spacing: -0.02em;
  text-shadow: none; border-radius: 0;
}
.mk-slot.mk-dirty::after { top: 2px; right: 2px; }

/* ── 스타포스 버튼식 컨트롤 ─────────────────────────────────────────────── */
.mk-star-ctl { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mk-star-ctl.mk-star-fixed { color: #ffd479; font-size: 0.95rem; gap: 8px; }
.mk-sbtn {
  min-width: 34px; padding: 5px 8px; border: 1px solid #3a4260; border-radius: 5px;
  background: #232a3d; color: #cdd5ea; font-size: 0.82rem; cursor: pointer;
}
.mk-sbtn:hover:not(:disabled) { background: #2d3450; border-color: #5b6cff; }
.mk-sbtn:disabled { opacity: .35; cursor: default; }
.mk-star-num {
  width: 62px; text-align: center;
  background: #10131d; border: 1px solid #333a50; border-radius: 5px;
  color: #ffd479; font-size: 0.95rem; font-weight: 600; padding: 5px 4px;
}
.mk-star-max { color: #7d869f; font-size: 0.8rem; }
.mk-est {
  padding: 1px 6px; border-radius: 3px; background: #3a2f18;
  color: #e0b96a; font-size: 0.68rem; border: 1px solid #5a4720;
}
.mk-star-quick { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.mk-qbtn {
  min-width: 30px; padding: 3px 7px; border: 1px solid #2c3245; border-radius: 4px;
  background: #171b28; color: #9aa3bd; font-size: 0.75rem; cursor: pointer;
}
.mk-qbtn:hover { border-color: #5b6cff; color: #cdd5ea; }
.mk-qbtn.on { background: #2d3450; color: #ffd479; border-color: #5b6cff; }

/* ── 검색줄 + 직업 필터 ─────────────────────────────────────────────────── */
.mk-searchrow { display: flex; gap: 8px; align-items: center; }
.mk-searchrow .mk-search { flex: 1 1 auto; }
.mk-chk { display: flex; align-items: center; gap: 4px; color: #9aa3bd; font-size: 0.78rem; white-space: nowrap; cursor: pointer; }
.mk-chk input { accent-color: #5b6cff; }

/* ── 주문서 입력 그리드 ─────────────────────────────────────────────────── */
.mk-etcgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.mk-etccell { display: flex; flex-direction: column; gap: 3px; }
.mk-etccell > span { color: #7d869f; font-size: 0.7rem; text-align: center; }
.mk-etccell input { width: 100%; text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════
   장비창 겹침 수정 — 아이템 방용 CSS 가 메이커 flex 레이아웃과 충돌한다.
     .equip-window       margin-left: calc(50% - 264px + 50px)  → 그리드를 우측으로 밀어 패널을 덮음
     .equip-char-preview overflow: visible + img scale(3)       → 캐릭터가 칸 밖으로 크게 삐져나옴
   메이커 안에서만 되돌린다 (아이템 방은 그대로 유지).
   ══════════════════════════════════════════════════════════════════════════ */
.mk-grid-wrap .equip-window {
  margin: 0 !important;
  position: relative;
  z-index: 1;
}
.mk-grid-wrap .equip-char-preview {
  overflow: hidden;          /* 캐릭터가 그리드 밖으로 나가지 않게 */
  position: relative;
  z-index: 0;
}
.mk-grid-wrap .equip-char-preview img {
  transform: translateY(-6px) scale(1.7);   /* 3배는 과해서 칸을 넘는다 */
  max-width: 88%;
  max-height: 88%;
}
/* 편집 패널이 항상 그리드 위에 오도록 */
.mk-editor { position: relative; z-index: 3; }

/* 레이아웃: 그리드는 고정폭, 편집 패널이 남는 공간을 차지 */
.mk-layout { align-items: flex-start; }
.mk-grid-wrap { flex: 0 0 auto; max-width: 100%; overflow-x: auto; }
.mk-editor { flex: 1 1 360px; }



/* ── 스타포스: 슬라이더 메인 + 버튼 보조 ────────────────────────────────── */
.mk-star-row { display: flex; align-items: center; gap: 8px; }
.mk-star-range {
  flex: 1 1 auto; min-width: 120px; height: 22px;
  accent-color: #ffb020; cursor: pointer;
}
.mk-star-row .mk-sbtn { min-width: 30px; padding: 4px 8px; }
.mk-star-row .mk-star-num { width: 56px; }

/* ══════════════════════════════════════════════════════════════════════════
   편집 패널을 장비창 "우측"에 붙인다.
   원인: .room-content 가 max-width:900px 인데
         장비창 524 + gap 18 + 편집패널 최소 360 = 902px → 2px 초과로 줄바꿈되어 아래로 떨어졌다.
   → 아이템메이커 방에서만 컨테이너 폭을 넓히고 줄바꿈을 막는다.
   ══════════════════════════════════════════════════════════════════════════ */
.section-equipMaker .room-layout { max-width: 1340px; }
.section-equipMaker .room-content { max-width: 1340px; }

.mk-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;          /* 우측 고정 — 아래로 떨어지지 않게 */
  align-items: flex-start;
  gap: 18px;
}
.mk-grid-wrap { flex: 0 0 auto; }
.mk-editor {
  flex: 1 1 auto;
  min-width: 320px;
  max-width: 620px;
}

/* 정말 좁을 때만 세로로 (장비창 524 + 패널 320 + gap 18 = 862 미만) */
@media (max-width: 860px) {
  .mk-layout { flex-wrap: wrap; flex-direction: column; }
  .mk-grid-wrap { align-self: center; }
  .mk-editor { width: 100%; max-width: none; min-width: 0; }
}

/* ── Δ 바 ───────────────────────────────────────────────────────────────── */
.mk-delta { flex-direction: column; align-items: stretch; }
.mk-delta-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-btn.mk-primary { background: #2f3a63; border-color: #5b6cff; color: #dbe3ff; font-weight: 600; }
.mk-btn.mk-primary:hover:not(:disabled) { background: #3a4780; }
.mk-dtable { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.82rem; }
.mk-dtable th, .mk-dtable td { padding: 5px 8px; text-align: right; border-bottom: 1px solid #232838; }
.mk-dtable th { color: #8b93ad; font-weight: 500; }
.mk-dtable th:first-child, .mk-dtable td:first-child { text-align: left; color: #aab2c9; }
.mk-dtable td { color: #e6ebf7; font-variant-numeric: tabular-nums; }
/* 종합 데미지 — 개별 스탯 위의 결론 행. 시뮬 DPM 은 크리를 반영하지 않아 여기서 직접 환산한다. */
.mk-dtable tr.mk-total td { background: #1b2138; border-bottom: 2px solid #3a4780; padding: 8px; font-weight: 700; }
.mk-dtable tr.mk-total td:first-child { color: #dbe3ff; }
.mk-dtable tr.mk-total td:last-child { font-size: 1.05rem; }
.mk-total-note { text-align: left !important; color: #8b93ad !important; font-weight: 400 !important; font-size: 0.75rem; }

/* ── 작(주문서) 프리셋 ──────────────────────────────────────────────────── */
.mk-scrolls { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.mk-scroll { padding: 5px 10px; }
.mk-scroll-n { color: #9aa3bd; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 4px; }
.mk-scroll-count {
  width: 52px; text-align: center;
  background: #10131d; border: 1px solid #333a50; border-radius: 5px;
  color: #e6ebf7; padding: 4px 6px; font-size: 0.82rem;
}

/* ── 잠재 / 에디셔널 ────────────────────────────────────────────────────── */
.mk-potgrades { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 7px; }
.mk-potline { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.mk-potn {
  flex: 0 0 auto; width: 18px; height: 18px; line-height: 18px; text-align: center;
  background: #232a3d; border-radius: 3px; color: #7d869f; font-size: 0.68rem;
}
.mk-potinput {
  flex: 1 1 auto; min-width: 0;
  background: #10131d; border: 1px solid #333a50; border-radius: 5px;
  color: #e6ebf7; padding: 5px 8px; font-size: 0.8rem;
}
.mk-potinput:focus { border-color: #5b6cff; outline: none; }
.mk-potpresets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 7px; }
.mk-potpresets .mk-qbtn { padding: 4px 9px; }

/* ── 빌드 일괄 적용 ─────────────────────────────────────────────────────── */
.mk-builds {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 9px 12px;
  background: #141824; border: 1px solid #2c3245; border-radius: 8px;
}
.mk-builds-label { color: #ffd479; font-size: 0.8rem; font-weight: 600; margin-right: 4px; }
.mk-builds .mk-qbtn { padding: 5px 10px; }
.mk-builds-msg { color: #6fdc8c; font-size: 0.78rem; margin-left: 6px; }

/* ── 스탯 환산표 ────────────────────────────────────────────────────────── */
.mk-convbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mk-conv { border-top: 1px solid #2c3245; margin-top: 8px; padding-top: 4px; }
.mk-unit { padding: 0 4px; border-radius: 3px; background: #232a3d; color: #7d869f; font-size: 0.66rem; }