/* ─────────────────────────────────────────────────────────────
   메이커(제작) 시뮬레이터 전용.

   이 파일은 base.css + style.css 뒤에 얹힌다. 토큰(--ink, --key, --tap …)과
   패널·버튼·인게임 정보창(.maple-tooltip)은 그 두 파일 것을 그대로 쓴다.
   여기에는 메이커에만 있는 것 — 제작 창, 인벤토리 칸, 변동값 분포 — 만 적는다.

   지켜야 할 규칙(공용 디자인 시스템)
    1. 카드 안에 또 테두리를 치지 않는다. 구획은 여백으로 나눈다.
    2. 12px 이하 글자는 안 쓴다.
    3. 손가락이 닿는 것은 최소 44px.
    4. 그림자는 떠야 할 것 하나 — [만들기] 버튼 — 에만.

   ★ .tt-* (정보창) 규칙은 여기서 고치지 않는다. 주문서 쪽과 같은 창이어야 한다.
     아래 .tt-stat-down 하나만 **새로** 더한다. 주문서는 값이 내려가는 일이
     없어서 없던 색인데, 메이커는 촉진제를 안 쓰면 −5 까지 내려간다.
   ───────────────────────────────────────────────────────────── */

/* ── 격자 ───────────────────────────────────────────────────── */
.maker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  padding: 0 var(--s4) var(--s6);
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}
.maker-right { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }

@media (max-width: 720px) {
  .maker-grid { grid-template-columns: 1fr; padding: 0 var(--s3) var(--s5); gap: var(--s5); }
}

/* ── 작은 제목·글씨 ─────────────────────────────────────────── */
.mk-sub {
  font-family: var(--font-display);
  margin: var(--s4) 0 var(--s2);
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
}
.mk-hint { font-size: 14px; line-height: 1.65; color: var(--faint); margin-bottom: var(--s2); }
.mk-count {
  flex: none;
  font-size: 14px; font-weight: 700; color: var(--sub);
  font-variant-numeric: tabular-nums;
}

/* ── 제작할 아이템 고르기 ───────────────────────────────────── */
.mk-target { display: flex; gap: var(--s2); align-items: flex-start; }
.mk-target__icon {
  flex: none;
  width: 68px; height: 68px;
  background: var(--soft); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.mk-target__icon img {
  max-width: 52px; max-height: 52px;
  object-fit: contain; image-rendering: pixelated;
}
.mk-target__sel { flex: 1; min-width: 0; }

.mk-lbl {
  display: block;
  font-size: 13px; font-weight: 700; color: var(--faint);
  margin-bottom: 4px;
}
.mk-lbl + .mk-select { margin-bottom: var(--s2); }
.mk-select {
  width: 100%;
  min-height: var(--tap);
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 0 var(--s2);
  cursor: pointer;
  outline: none;
}
.mk-select:focus { border-color: var(--key); background: var(--bg); }

/* ── 촉진제 스위치 ──────────────────────────────────────────
   켜고 끄는 것 하나뿐이라 체크박스보다 줄 전체를 누르는 편이 낫다.
   지금 상태는 오른쪽 스위치와 배경색 둘로 말한다 — 색만으로는 못 읽는 사람이 있다. */
.mk-cata {
  width: 100%;
  display: flex; align-items: center; gap: var(--s2);
  min-height: 60px; padding: var(--s1) var(--s2);
  background: var(--soft);
  border: 0; border-radius: var(--r-md);
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: background .15s;
}
.mk-cata:hover { background: var(--line); }
.mk-cata:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }
.mk-cata[aria-pressed="true"] { background: var(--key-soft); }
.mk-cata__img {
  flex: none; width: 34px; height: 34px;
  object-fit: contain; image-rendering: pixelated;
}
.mk-cata[aria-pressed="false"] .mk-cata__img { opacity: .5; }
.mk-cata__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-cata__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.mk-cata__desc { font-size: 13px; color: var(--sub); }
.mk-cata[aria-pressed="true"] .mk-cata__desc { color: var(--key); font-weight: 600; }
.mk-cata__sw {
  flex: none;
  width: 42px; height: 24px; border-radius: var(--r-full);
  background: var(--slot-off, #d0d5dd);
  position: relative;
  transition: background .15s;
}
.mk-cata__sw::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: var(--r-full);
  background: #fff;
  transition: transform .15s;
}
.mk-cata[aria-pressed="true"] .mk-cata__sw { background: var(--key); }
.mk-cata[aria-pressed="true"] .mk-cata__sw::after { transform: translateX(18px); }

/* ── 보석 3칸 ───────────────────────────────────────────────── */
.mk-gemslots {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s1); margin-top: var(--s2);
}
.mk-slot {
  position: relative;
  min-height: 64px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  background: var(--soft); border-radius: var(--r-sm);
  padding: var(--s1) 4px;
}
.mk-slot.is-empty::after {
  content: "비어 있음";
  font-size: 13px; color: var(--faint);
}
.mk-slot img {
  width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated;
}
.mk-slot__opt {
  font-size: 13px; font-weight: 700; color: var(--key);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── 알림 줄 ────────────────────────────────────────────────
   파괴는 크게 알린다. 놓치면 "왜 안 만들어졌지" 가 된다. */
.mk-flash {
  margin-top: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  text-align: center;
  font-family: var(--font-display);
  line-height: 1.4;
}
.mk-flash__t { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.mk-flash__d { font-size: 14px; font-weight: 400; margin-top: 4px; font-family: var(--font-body); }
.mk-flash.boom { background: var(--warn-soft); color: var(--up); }
.mk-flash.boom .mk-flash__d { color: var(--sub); }
.mk-flash.ok   { background: var(--key-soft); color: var(--key); }
.mk-flash.ok .mk-flash__d { color: var(--sub); }
@media (prefers-reduced-motion: no-preference) {
  .mk-flash { animation: mk-pop .28s cubic-bezier(.22,1,.36,1) both; }
  @keyframes mk-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
}

/* ── 인벤토리 ───────────────────────────────────────────────── */
.mk-inv {
  display: grid;
  gap: 6px;
  background: var(--soft);
  border-radius: var(--r-md);
  padding: 6px;
}
.mk-inv--gem  { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.mk-inv--made {
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  max-height: 260px; overflow-y: auto;
}
.mk-inv__empty {
  grid-column: 1 / -1;
  padding: var(--s5) var(--s2);
  text-align: center; color: var(--faint);
  font-size: 14px; line-height: 1.7;
}

.mk-cell {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  min-height: var(--tap);
  padding: var(--s1) 4px;
  background: var(--bg);
  border: 0; border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, box-shadow .12s;
}
.mk-cell:hover { background: var(--key-soft); }
.mk-cell:focus-visible { outline: 2px solid var(--key); outline-offset: 1px; }
.mk-cell.on { background: var(--key-soft); box-shadow: inset 0 0 0 2px var(--key); }
.mk-cell.is-full:not(.on) { opacity: .5; cursor: not-allowed; }

/* 선택 표시는 아이콘 오른쪽 위에 붙는다. 숫자를 넣어 몇 번째로 골랐는지도 같이 말한다. */
.mk-cell__ico { position: relative; line-height: 0; }
.mk-cell__ico img {
  width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated;
}
.mk-cell__badge {
  position: absolute; top: -7px; right: -9px;
  min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--key); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 19px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg);
}
.mk-cell__t {
  font-size: 13px; font-weight: 700; color: var(--sub);
  text-align: center; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.mk-cell.on .mk-cell__t { color: var(--key); }

/* 제작물 칸. 아이콘 아래에 추옵 변동값만 붙인다 — 한 판의 성적이 그것이다. */
.mk-made {
  aspect-ratio: 1 / 1;
  min-height: var(--tap);
  gap: 2px;
}
.mk-made .mk-cell__ico img { width: 34px; height: 34px; }
.mk-made__d { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-made__d.up   { color: var(--good); }
.mk-made__d.zero { color: var(--faint); }
.mk-made__d.down { color: var(--up); }
/* --up 은 화이트 바탕에 맞춘 진한 빨강이라 어두운 칸 위에서 잘 안 읽힌다.
   다크에서만 밝은 쪽으로 바꾼다. 두 블록인 이유는 base.css 토큰 절과 같다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk-made__d.down { color: #ff7a7a; }
}
:root[data-theme="dark"] .mk-made__d.down { color: #ff7a7a; }

/* 성장 단계는 아이콘 왼쪽 위에 붙인다. 오른쪽 위는 보석 순번이 쓰고 있다. */
.mk-cell__badge--lv {
  right: auto; left: -9px;
  background: #a8791b; color: #fff;
}

/* ── 정보창 ──────────────────────────────────────────────────
   창 자체(.tt-*)는 주문서 쪽과 같아야 하므로 여기서 고치지 않는다.
   주문서에 없던 줄 두 개만 새로 더한다.
     · .tt-stat-down — 촉진제를 안 쓰면 추옵이 내려간다. 주문서엔 없던 경우다.
     · ITEM LEV     — 성장 단계. 인게임 정보창에서 REQ 목록 바로 아래 붙는 노란 줄.
   ★ 정보창은 게임 창을 흉내 낸 예외 구역이라 바깥 테마 토큰을 끌어 쓰지 않는다.
     다크·화이트 어느 쪽이든 같은 색으로 보여야 한다.
   ★ 두 줄 다 style.css 가 새로 잡은 글꼴·두께·정렬(REQ 칸 400/왼쪽)을 그대로 쓰고
     색만 다르게 둔다. 여기서 두께를 따로 올리면 한 창 안에서 저 줄만 튄다. */
.maple-tooltip .tt-stat-down { color: #ff8a8a; }

.maple-tooltip { --tt-lev: #ffd24a; }   /* 자료(메이커/레벨업텍스트 넣을위치.jpg)의 금색 */
.maple-tooltip .tt-lev-row .tt-req-lbl,
.maple-tooltip .tt-lev-row .tt-req-sep,
.maple-tooltip .tt-lev-row .tt-lev-val { color: var(--tt-lev); font-weight: 400; }

/* ── 제작물 팝업 ───────────────────────────────────────────
   아래로 스크롤하지 않고 한 화면에서 보게 하려고 띄운다.
   안에 든 정보창은 주문서 쪽 그대로다. */
.mk-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s3);
}
.mk-modal[hidden] { display: none; }
.mk-modal__scrim { position: absolute; inset: 0; background: rgba(8,10,14,.62); }
.mk-modal__box {
  position: relative;
  width: 100%; max-width: 380px;
  max-height: calc(100dvh - var(--s5));
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--r-md);
  padding: var(--s2) var(--s3) var(--s3);
  /* 가림막 위에 뜨는 것이므로 그림자를 하나 받는다 */
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
}
body.mk-modal-open { overflow: hidden; }

.mk-modal__head {
  display: flex; align-items: center; gap: var(--s1);
  margin-bottom: var(--s2);
}
.mk-modal__title {
  flex: 1; min-width: 0;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); line-height: 1.4;
}
.mk-modal__x {
  flex: none;
  width: var(--tap); height: var(--tap);
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--faint); font-size: 16px; cursor: pointer;
  transition: background .15s, color .15s;
}
.mk-modal__x:hover { background: var(--soft); color: var(--ink); }
.mk-modal__x:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }

.mk-lvnote {
  margin: var(--s1) auto 0;
  max-width: 300px;
  padding: var(--s1) var(--s2);
  background: var(--key-soft); border-radius: var(--r-sm);
  color: var(--key); font-size: 14px; font-weight: 600; line-height: 1.6;
}
.mk-lvnote[hidden] { display: none; }
.mk-lvnote.is-err { background: var(--warn-soft); color: var(--up); }

/* 두 버튼은 좁은 화면에서도 한 줄로 나란히 둔다. 세로로 접히면 안 된다.
   왼쪽이 먼저 하는 일(성장), 오른쪽이 다음 일(강화)이다. */
.mk-modal__foot {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  margin-top: var(--s3);
}
.mk-act {
  min-height: var(--tap);
  padding: 0 var(--s1);
  border: 0; border-radius: var(--r-sm);
  font-family: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: -.02em; white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mk-act:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }
.mk-act--grow { background: var(--soft); color: var(--ink); }
.mk-act--grow:hover:not(:disabled) { background: var(--line); }
.mk-act--go   { background: var(--key); color: #fff; }
.mk-act--go:hover:not(:disabled) { background: var(--key-hover); }
.mk-act:disabled { opacity: .45; cursor: not-allowed; }

@media (prefers-reduced-motion: no-preference) {
  .mk-modal__box { animation: mk-modal-in .18s cubic-bezier(.22,1,.36,1) both; }
  @keyframes mk-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ── 수치 ───────────────────────────────────────────────────── */
/* 네 칸이므로 2×2 로 못 박는다. auto-fit 에 맡기면 폭에 따라 3+1 로 갈라져
   마지막 칸 하나가 저 혼자 떨어진다. */
.mk-stats { grid-template-columns: repeat(2, 1fr); margin: 0 0 var(--s3); }
.mk-stats .val { font-size: 24px; }
@media (max-width: 380px) { .mk-stats { grid-template-columns: 1fr; } }

.mk-dist { display: flex; flex-direction: column; gap: 3px; }
.mk-dist__row {
  display: grid; grid-template-columns: 2.6em 1fr 5.4em;
  align-items: center; gap: var(--s1);
  min-height: 26px;
}
.mk-dist__k {
  font-size: 14px; font-weight: 700; color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums;
}
.mk-dist__bar {
  height: 10px; background: var(--soft);
  border-radius: var(--r-full); overflow: hidden;
}
.mk-dist__fill {
  /* span 은 기본이 inline 이라 폭·높이를 무시한다. 막대가 안 그려지던 원인이다. */
  display: block;
  height: 100%; background: var(--key);
  border-radius: var(--r-full);
  transition: width .2s;
}
.mk-dist__row.neg  .mk-dist__fill { background: var(--faint); }
.mk-dist__row.best .mk-dist__fill { background: var(--good); }
.mk-dist__row.best .mk-dist__k    { color: var(--good); }
.mk-dist__v {
  font-size: 13px; color: var(--sub);
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── 좁은 화면 ──────────────────────────────────────────────── */
@media (max-width: 420px) {
  /* 세로로 쌓으면 가로가 교차축이 된다. align-items:flex-start 가 그대로 남으면
     고르는 칸이 글자 길이만큼만 좁아진다 — 여기서 늘려 준다. */
  .mk-target { flex-direction: column; align-items: stretch; }
  .mk-target__icon { width: 100%; height: 60px; }
  .mk-inv--gem { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .mk-flash__t { font-size: 20px; }
}