/* 거래소·경매소 — 스톤 어라이브 GHOST (2026-09-23)
 *
 *   인게임 거래소 창의 결을 그대로 옮겼다.
 *   색은 게임 부품(600951 거래소 바탕)에서 그대로 뜬 값이다.
 *     바탕 #252526 · 칸 #1d1d1d · 테두리 #38383a · 금색 #a8843e
 *   글자 금색 강조는 게임의 FONT_PAL_YELLOW 자리와 같다.
 *
 *   배치도 인게임과 같다.
 *     왼쪽 분류(164px) · 가운데 블록 4열 · 오른쪽 상세
 *   좁은 화면에서는 세로로 쌓는다. 게임에는 없는 상황이라 여기서만 정한다.
 */

:root{
  --mk-base:#252526;
  --mk-panel:#1d1d1d;
  --mk-edge:#38383a;
  --mk-inner:#303031;
  --mk-gold:#a8843e;
  --mk-gold-lit:#ffc85a;
  --mk-ink:#ecebe4;
  --mk-dim:#8e887c;
}

.mk-hero .lead{max-width:none}

/* ── 위 탭 (거래소 / 경매소) ───────────────────────────── */
.mk-tabs{
  display:flex; align-items:center; gap:8px;
  margin:0 0 18px; padding:0 0 12px;
  border-bottom:1px solid var(--mk-edge);
}
.mk-tab{
  display:inline-block; padding:9px 22px; border-radius:9px;
  background:var(--mk-panel); border:1px solid var(--mk-edge);
  color:var(--mk-dim); font-size:15px; text-decoration:none;
}
.mk-tab:hover{color:var(--mk-ink)}
.mk-tab.on{
  background:linear-gradient(180deg,#3a2f18,#2a2213);
  border-color:var(--mk-gold); color:var(--mk-gold-lit); font-weight:600;
}
.mk-upd{margin-left:auto; font-size:12.5px; color:var(--mk-dim)}

/* ── 판 전체 : 3단 ─────────────────────────────────────── */
.mk-board{
  display:grid; grid-template-columns:184px 1fr 300px; gap:16px;
  align-items:start;
}

/* ── 왼쪽 : 분류 ───────────────────────────────────────── */
.mk-side{
  background:var(--mk-base); border:1px solid var(--mk-edge);
  border-radius:12px; padding:10px;
}
.mk-cat{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; margin:0 0 4px; border-radius:9px;
  color:var(--mk-ink); font-size:14px; text-decoration:none;
  border:1px solid transparent;
}
.mk-cat:hover{background:var(--mk-inner)}
.mk-cat.on{
  background:linear-gradient(180deg,#3a2f18,#2a2213);
  border-color:var(--mk-gold); color:var(--mk-gold-lit); font-weight:600;
}
/*  아이콘 자리. 게임 아이콘(600997~)을 아직 웹으로 안 뽑아서
    색 점으로 갈음한다. 나중에 그림이 들어오면 background 만 바꾼다. */
.mk-ico{
  width:16px; height:16px; border-radius:4px; flex:0 0 16px;
  background:var(--mk-inner); border:1px solid var(--mk-edge);
}
.mk-cat.on .mk-ico{background:var(--mk-gold); border-color:var(--mk-gold-lit)}
.mk-side-note{
  margin:12px 4px 4px; font-size:11.5px; line-height:1.6; color:var(--mk-dim);
}

/* ── 가운데 ────────────────────────────────────────────── */
.mk-main{min-width:0}

.mk-search{display:flex; gap:8px; margin:0 0 12px}
.mk-search input[type=text]{
  flex:1 1 auto; min-width:0; padding:10px 13px;
  background:var(--mk-panel); border:1px solid var(--mk-edge);
  border-radius:9px; color:var(--mk-ink); font-size:14px;
}
.mk-search input[type=text]::placeholder{color:#6b665c}
.mk-search button{
  padding:10px 20px; border-radius:9px; cursor:pointer;
  background:linear-gradient(180deg,#e0b455,#c08f2e);
  border:1px solid #7a5c1e; color:#2b1f08; font-weight:700; font-size:14px;
}
.mk-clear{
  align-self:center; font-size:12.5px; color:var(--mk-dim); text-decoration:none;
}
.mk-clear:hover{color:var(--mk-ink)}

.mk-sort{display:flex; align-items:center; gap:7px; margin:0 0 14px}
.mk-sort>span{font-size:12.5px; color:var(--mk-dim); margin-right:3px}
.mk-pill{
  padding:5px 14px; border-radius:999px; font-size:12.5px; text-decoration:none;
  background:var(--mk-panel); border:1px solid var(--mk-edge); color:var(--mk-dim);
}
.mk-pill:hover{color:var(--mk-ink)}
.mk-pill.on{border-color:var(--mk-gold); color:var(--mk-gold-lit); background:#2a2213}

/*  블록 : 인게임은 4열 고정(100x116). 여기서도 4열을 기본으로 한다. */
.mk-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.mk-block{
  position:relative; display:block; text-decoration:none;
  background:var(--mk-panel); border:1px solid var(--mk-edge);
  border-radius:10px; padding:12px 10px 10px; text-align:center;
}
.mk-block:hover{border-color:#5a5a5e; background:#222}
.mk-block.on{
  border-color:var(--mk-gold);
  box-shadow:0 0 0 1px rgba(168,132,62,.45) inset;
  background:#2a2213;
}
.mk-badge{
  position:absolute; top:7px; right:7px;
  padding:2px 7px; border-radius:999px; font-size:10.5px;
  background:#3a3a3c; color:#c8c2b6;
}
.mk-badge.gold{background:var(--mk-gold); color:#241a07; font-weight:700}
/*  물건 그림 자리. 게임 그림 팩에서 웹으로 뽑는 것은 다음 일이다. */
.mk-thumb{
  display:block; width:48px; height:48px; margin:2px auto 10px;
  border-radius:9px; background:var(--mk-base); border:1px solid var(--mk-edge);
}
.mk-thumb.pet{border-radius:50%}
.mk-thumb.big{width:52px; height:52px; margin:0}
.mk-name{
  display:block; font-size:12.5px; color:var(--mk-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mk-price{display:block; margin-top:5px; font-size:13px; font-weight:700}
.cur-stone{color:var(--mk-gold-lit)}
.cur-vip{color:#7fc7ff}

.mk-empty{
  padding:60px 0; text-align:center; color:var(--mk-dim); font-size:13.5px;
}

.mk-page{display:flex; align-items:center; justify-content:center; gap:14px; margin:18px 0 0}
.mk-page a,.mk-page span.off{
  width:32px; height:32px; line-height:30px; text-align:center;
  border-radius:8px; background:var(--mk-panel); border:1px solid var(--mk-edge);
  color:var(--mk-ink); text-decoration:none; font-size:15px;
}
.mk-page span.off{color:#4d4a44}
.mk-page b{font-size:13px; color:var(--mk-dim); font-weight:400}

/* ── 오른쪽 : 상세 ─────────────────────────────────────── */
.mk-detail{
  background:var(--mk-base); border:1px solid var(--mk-edge);
  border-radius:12px; padding:16px; min-height:240px;
}
.mk-det-head{display:flex; gap:12px; align-items:center; margin:0 0 14px}
.mk-det-head b{display:block; font-size:15px; color:var(--mk-gold-lit)}
.mk-det-head span{display:block; margin-top:3px; font-size:12px; color:var(--mk-dim)}
.mk-sum{
  margin:0 0 14px; padding:10px 12px; border-radius:9px;
  background:var(--mk-panel); border:1px solid var(--mk-edge);
  font-size:12.5px; line-height:1.65; color:#c9c3b7;
}
.mk-det-rows{margin:0 0 14px; border-top:1px solid var(--mk-edge)}
.mk-det-rows div{
  display:flex; justify-content:space-between; padding:8px 2px;
  border-bottom:1px solid var(--mk-edge); font-size:12.5px;
}
.mk-det-rows span{color:var(--mk-dim)}
.mk-det-rows b{font-weight:600; color:var(--mk-ink)}

.mk-list{width:100%; border-collapse:collapse; font-size:12.5px}
.mk-list th{
  padding:7px 4px; text-align:left; color:var(--mk-dim); font-weight:400;
  border-bottom:1px solid var(--mk-edge);
}
.mk-list td{padding:8px 4px; border-bottom:1px solid #2e2e30; color:var(--mk-ink)}
.mk-list td:first-child{font-weight:700}
.mk-list td:nth-child(2),.mk-list th:nth-child(2){text-align:center}

.mk-pick{
  padding:70px 10px; text-align:center; color:var(--mk-dim);
  font-size:13px; line-height:1.8;
}

/* ── 좁은 화면 ─────────────────────────────────────────── */
@media (max-width:1100px){
  .mk-board{grid-template-columns:160px 1fr}
  .mk-detail{grid-column:1 / -1}
}
@media (max-width:760px){
  .mk-board{grid-template-columns:1fr}
  .mk-side{display:flex; flex-wrap:wrap; gap:6px}
  .mk-cat{margin:0; padding:8px 12px; font-size:13px}
  .mk-side-note{display:none}
  .mk-grid{grid-template-columns:repeat(2,1fr)}
  .mk-upd{width:100%; margin:6px 0 0}
}

/*  경매 블록에만 있는 남은 시간 */
.mk-time{display:block; margin-top:4px; font-size:11.5px; color:var(--mk-dim)}
.mk-time .hot{color:#ff8d7a; font-weight:700}

/* ── 툴팁 (2026-09-23) ──────────────────────────────────
   인게임처럼 마우스를 올리면 능력치가 뜬다. 본문에서 설명을 빼고
   이리로 옮겼다. 쪽지는 JS 가 하나만 만들어 돌려 쓴다.        */
.mk-tip{
  position:fixed; z-index:9999; display:none;
  max-width:320px; padding:10px 13px;
  background:rgba(18,15,12,.97);
  border:1px solid var(--mk-gold);
  border-radius:9px;
  box-shadow:0 6px 22px rgba(0,0,0,.6);
  color:#e8e2d4; font-size:12.5px; line-height:1.7;
  white-space:pre-wrap;      /* 게임이 만든 줄바꿈을 살린다 */
  pointer-events:none;       /* 쪽지가 마우스를 가로채면 깜빡인다 */
}
.has-tip{cursor:help}

/*  물건 그림. 배경으로 넣어서 크기가 제각각이어도 칸 안에 들어온다.
    도트 그림이라 늘릴 때 뭉개지지 않게 pixelated 를 준다.        */
.mk-thumb{
  background-repeat:no-repeat; background-position:center;
  background-size:contain;
  image-rendering:pixelated;
}

/*  툴팁 안 : 첫 줄은 이름(제목), 나머지는 능력치.
    서버가 그렇게 만들어 보낸다 (mkt_impl.inc). 인게임 툴팁도 같은 결이다. */
.mk-tip-name{
  display:block; margin:0 0 6px; padding:0 0 6px;
  border-bottom:1px solid rgba(168,132,62,.45);
  color:var(--mk-gold-lit); font-size:13.5px; font-weight:700;
}
.mk-tip-body{display:block; color:#cfc8ba}