/* 마켓.css — 레이아웃만(grid·flex·gap·width). 색·radius·shadow 리터럴 0, 토큰은 대문.css·브라우저홈.css 가 준다. */
html, body { margin: 0; }
.mk-app { display: flex; flex-direction: column; min-height: 100vh; max-width: var(--dm-max); margin: 0 auto; width: 100%; }
.mk-head { display: flex; align-items: center; justify-content: space-between; gap: var(--dm-sp-5); padding: var(--dm-sp-5) var(--dm-sp-7); }
.mk-brand { display: flex; align-items: center; gap: var(--dm-sp-5); text-decoration: none; }
.mk-logo { width: 44px; height: 44px; }
.mk-main { flex: 1; padding: var(--dm-sp-3) var(--dm-sp-7) var(--dm-sp-10); display: flex; flex-direction: column; gap: var(--dm-sp-7); }
.mk-tabs { position: sticky; bottom: 0; }
.mk-col { display: flex; flex-direction: column; gap: var(--dm-sp-5); min-width: 0; }
.mk-split { display: flex; flex-direction: column; gap: var(--dm-sp-7); }
.mk-list { display: flex; flex-direction: column; gap: var(--dm-sp-5); }
.mk-row { display: flex; align-items: center; gap: var(--dm-sp-5); min-width: 0; }
.mk-grow { flex: 1; min-width: 0; }
.mk-wrap { display: flex; flex-wrap: wrap; gap: var(--dm-sp-3); }
.mk-end { display: flex; justify-content: flex-end; gap: var(--dm-sp-5); flex-wrap: wrap; }
.mk-thumb { border-radius: var(--dm-r-md); width: 100%; height: 160px; object-fit: cover; display: block; }
.mk-thumb-lg { height: 220px; }
.mk-hero-icon { width: 64px; height: 64px; font-size: 28px; }
.mk-qty { display: flex; align-items: center; gap: var(--dm-sp-5); }
.mk-qty .dm-btn-ghost { width: 44px; height: 44px; padding: 0; }
.mk-btnwide { width: 100%; min-height: 54px; }
.mk-table { display: grid; grid-template-columns: 1.2fr 0.6fr 2fr 0.5fr; gap: var(--dm-sp-3) var(--dm-sp-5); align-items: center; }
.mk-pre { white-space: pre-wrap; }
.mk-form { display: flex; flex-direction: column; gap: var(--dm-sp-5); }
.mk-form textarea { width: 100%; min-height: 72px; box-sizing: border-box; font-family: var(--dm-font); font-size: 14.5px; padding: var(--dm-sp-5) var(--dm-sp-7); border: 1px solid var(--dm-line); border-radius: var(--dm-r-md); background: var(--dm-surface); color: var(--dm-ink); }
.dm-card-link { text-decoration: none; }
.mk-fold { opacity: .7; }
.mk-hidden { display: none; }
.dm-tile, .dm-chip, .dm-btn, .dm-btn-ghost, .dm-card-link, .mk-brand { transition: opacity .15s ease; }
.dm-tile:hover, .dm-chip:hover, .dm-btn:hover, .dm-btn-ghost:hover, .dm-card-link:hover, .mk-brand:hover { opacity: .85; }
.dm-tile:focus-visible, .dm-chip:focus-visible, .dm-btn:focus-visible, .dm-btn-ghost:focus-visible, .dm-card-link:focus-visible, .mk-brand:focus-visible, .mk-form textarea:focus-visible { outline: 2px solid var(--dm-accent); outline-offset: 2px; }
.dm-btn:focus, .dm-btn-ghost:focus, .mk-form textarea:focus { outline-offset: 2px; }
.mk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 600px) {
  /* 폭 600 이상 = 펼침, 좌우 50:50. 접힘선 ±12px 회피 = 간격 32px(중심 ±16) */
  .mk-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dm-sp-10) 32px; align-items: start; }
  .mk-main { padding-left: var(--dm-sp-9); padding-right: var(--dm-sp-9); }
  .mk-head { padding-left: var(--dm-sp-9); padding-right: var(--dm-sp-9); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  /* 하단 탭 5칸: 가운데 접힘선에 칸이 걸리지 않게 왼 2칸·오른 3칸 사이에 32px 틈(좌우 폭 같음) */
  .mk-tabs { display: grid; grid-template-columns: 3fr 3fr 32px 2fr 2fr 2fr; }
  .mk-tabs .dm-tile:nth-child(3) { grid-column: 4; }
}

/* C4 수리: 브라우저홈.css 가 --dm-on-accent 를 어두운 --chip 으로 매핑해 주버튼(배경 --dm-ink-strong 도 어두움) 글자가 안 보였다. 배경 토큰(--dm-bg) 으로 대비 확보 — 라이트·다크 모두 토큰 반전 */
.dm-btn { color: var(--dm-bg); }