/* 포인트 마켓 — 링크차트 테마와 같은 네오 브루탈리즘 (굵은 검정 테두리, 어긋난 그림자, 코랄·민트·노랑)
 * 모든 클래스는 mk- 로 시작해 테마와 충돌하지 않게 한다 */
.mk-page {
    --mk-ink: #1A1A1A; --mk-sub: #4A4A4A; --mk-muted: #7A7A7A; --mk-card: #fff; --mk-soft: #FFF6C7;
    --mk-coral: #FF6B6B; --mk-mint: #4ECDC4; --mk-yellow: #FDE047;
    --mk-bd: 3px solid #000; --mk-bd2: 2px solid #000; --mk-sh: 5px 5px 0 0 #000; --mk-sh-sm: 3px 3px 0 0 #000;
    color: var(--mk-ink); font-family: "Public Sans", "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
    font-size: 15px; line-height: 1.5; word-break: keep-all; box-sizing: border-box;
}
.mk-page *, .mk-page *::before, .mk-page *::after { box-sizing: border-box; }
.mk { max-width: 1180px; margin: 0 auto; padding: 8px 0 48px; }
.mk h1, .mk h2, .mk h3, .mk p, .mk ul, .mk dl, .mk dd, .mk-md h2, .mk-md p, .mk-md ul, .mk-md dl, .mk-md dd { margin: 0; padding: 0; }
.mk ul, .mk-md ul { list-style: none; }
.mk-page button { font: inherit; color: inherit; cursor: pointer; }
.mk-page [hidden] { display: none !important; }

/* 머리 */
.mk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.mk-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--mk-coral); }
.mk-head h1 { font-family: "Space Grotesk", "Pretendard Variable", Pretendard, sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.mk-sub { color: var(--mk-sub); margin-top: 4px !important; }
.mk-wallet { background: var(--mk-yellow); border: var(--mk-bd); box-shadow: var(--mk-sh); padding: 10px 20px; text-align: right; min-width: 200px; }
.mk-wallet span { display: block; font-size: 12px; font-weight: 800; }
.mk-wallet b { font-family: "Space Grotesk", sans-serif; font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mk-wallet i, .mk-price i, .mk-win i { font-style: normal; font-size: .6em; margin-left: 2px; }
.mk-warn { background: var(--mk-coral); color: #fff; border: var(--mk-bd2); padding: 10px 14px; font-weight: 800; margin-bottom: 16px !important; }

/* 탭 · 분류 */
.mk-tabs { display: flex; gap: 0; border-bottom: var(--mk-bd); margin-bottom: 18px; }
.mk-tabs button { background: #fff; border: var(--mk-bd); border-bottom: 0; margin-right: -3px; padding: 12px 22px; font-weight: 800; font-size: 15px; }
.mk-tabs button.on { background: #000; color: #fff; }
.mk-tabs em { font-style: normal; background: var(--mk-coral); color: #fff; border-radius: 99px; padding: 1px 8px; font-size: 12px; margin-left: 4px; }
.mk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.mk-chip { background: #fff; border: var(--mk-bd2); padding: 8px 16px; font-weight: 700; min-height: 40px; }
.mk-chip.on { background: var(--mk-mint); box-shadow: var(--mk-sh-sm); }

/* 상품 카드 */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.mk-card { position: relative; background: var(--mk-card); border: var(--mk-bd); box-shadow: var(--mk-sh); padding: 18px 16px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mk-card.sold { opacity: .6; }
.mk-badge { position: absolute; top: -3px; left: -3px; border: var(--mk-bd); padding: 2px 10px; font-size: 12px; font-weight: 800; background: var(--mk-mint); }
.mk-badge.b-hot { background: var(--mk-coral); color: #fff; }
.mk-badge.b-limit { background: #000; color: var(--mk-yellow); }
.mk-count { position: absolute; top: -3px; right: -3px; border: var(--mk-bd); background: #000; color: #fff; padding: 2px 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mk-ico { width: 88px; height: 88px; border: var(--mk-bd); display: grid; place-items: center; font-size: 46px; line-height: 1; margin: 8px 0 14px; transform: rotate(-4deg); box-shadow: var(--mk-sh-sm); background: var(--mk-yellow); }
.mk-ico.c-mint { background: var(--mk-mint); } .mk-ico.c-coral { background: var(--mk-coral); } .mk-ico.c-white { background: #fff; }
.mk-ico.sm { width: 56px; height: 56px; font-size: 28px; margin: 0; flex: none; }
.mk-ico.lg { width: 112px; height: 112px; font-size: 60px; margin: 4px auto 16px; }
.mk-card h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.mk-desc { color: var(--mk-sub); font-size: 13px; min-height: 40px; margin-top: 4px !important; }
.mk-meta { display: flex; gap: 6px 10px; justify-content: center; flex-wrap: wrap; min-height: 22px; margin: 6px 0 !important; font-size: 12px; color: var(--mk-muted); font-weight: 700; }
.mk-link { background: none; border: 0; padding: 0; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.mk-price { margin-top: auto; padding-top: 6px; font-family: "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; }
.mk-price b { font-size: 26px; font-weight: 800; }
.mk-price s { color: var(--mk-muted); font-size: 14px; margin-right: 6px; }
.mk-buy { display: flex; gap: 8px; width: 100%; margin-top: 10px; align-items: stretch; }
.mk-qty { display: flex; align-items: center; border: var(--mk-bd2); background: #fff; flex: none; }
.mk-qty button { width: 34px; height: 40px; background: none; border: 0; font-size: 18px; font-weight: 800; }
.mk-qty b { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.mk-soldout { width: 100%; margin-top: 10px; padding: 9px; border: var(--mk-bd2); background: #eee; font-weight: 800; }

/* 버튼 */
.mk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; background: #fff; border: var(--mk-bd2); box-shadow: var(--mk-sh-sm); font-weight: 800; font-size: 14px; text-decoration: none; color: var(--mk-ink); white-space: nowrap; transition: transform .08s, box-shadow .08s; }
.mk-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.mk-btn.pri { background: var(--mk-coral); color: #fff; flex: 1; }
.mk-btn.full { width: 100%; margin-top: 12px; }
.mk-btn[disabled] { background: #ddd; color: #777; box-shadow: none; cursor: not-allowed; }
.mk-page :focus-visible { outline: 3px solid var(--mk-mint); outline-offset: 2px; }

/* 보관함 · 내역 */
.mk-prof { display: flex; gap: 14px; align-items: center; background: var(--mk-soft); border: var(--mk-bd); padding: 14px 16px; margin-bottom: 20px; }
.mk-prof img, .mk-prof-no { width: 60px; height: 60px; border: var(--mk-bd2); object-fit: cover; background: #fff; flex: none; }
.mk-prof-no { display: grid; place-items: center; font-size: 26px; font-weight: 800; background: var(--mk-mint); }
.mk-prof b { font-size: 18px; } .mk-prof p { color: var(--mk-sub); font-size: 14px; overflow-wrap: anywhere; }
.mk-empty { background: #fff; border: var(--mk-bd); padding: 48px 20px; text-align: center; color: var(--mk-sub); font-weight: 700; line-height: 2.4; }
.mk-logs { background: #fff; border: var(--mk-bd); }
.mk-logs li { display: grid; grid-template-columns: 76px 1fr auto 96px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #ddd; }
.mk-logs li:last-child { border-bottom: 0; }
.mk-logs p { font-size: 13px; color: var(--mk-muted); overflow-wrap: anywhere; }
.mk-logs time { font-size: 12px; color: var(--mk-muted); text-align: right; font-variant-numeric: tabular-nums; }
.mk-tag { border: var(--mk-bd2); font-size: 12px; font-weight: 800; text-align: center; padding: 2px 0; background: #fff; }
.mk-tag.t-buy { background: var(--mk-yellow); } .mk-tag.t-use { background: var(--mk-mint); } .mk-tag.t-gift, .mk-tag.t-got { background: var(--mk-coral); color: #fff; }
.mk-pt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-pt.plus, .mk-dl .plus { color: #0a8f6a; } .mk-pt.minus, .mk-dl .minus { color: #d92d3a; }
.mk-note { font-size: 13px; color: var(--mk-muted); margin-top: 12px !important; }

/* 창 */
.mk-ov { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; }
.mk-md { background: #fff; border: var(--mk-bd); box-shadow: 8px 8px 0 0 #000; width: min(440px, 100%); max-height: 90vh; overflow: auto; padding: 24px; animation: mk-pop .18s ease-out; }
@keyframes mk-pop { from { transform: translateY(10px); opacity: 0; } }
.mk-md h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.mk-p { color: var(--mk-sub); margin-bottom: 12px !important; } .mk-p.sm { font-size: 13px; }
.mk-sum { display: flex; gap: 14px; align-items: center; background: var(--mk-soft); border: var(--mk-bd2); padding: 12px; margin-bottom: 14px; }
.mk-sum p { color: var(--mk-sub); font-size: 14px; }
.mk-dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-bottom: 14px !important; }
.mk-dl dd { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.mk-dl dt:last-of-type, .mk-dl dd:last-of-type { border-top: var(--mk-bd2); padding-top: 8px; font-size: 17px; }
.mk-fld { display: block; font-size: 13px; font-weight: 800; margin-bottom: 14px; }
.mk-fld input, .mk-fld textarea { display: block; width: 100%; margin-top: 6px; border: var(--mk-bd2); border-radius: 0; padding: 11px 12px; font: inherit; font-size: 16px; background: #fff; color: var(--mk-ink); resize: none; height: auto; }
.mk-err { background: #ffe3e3; border: var(--mk-bd2); padding: 8px 12px; font-size: 14px; font-weight: 700; color: #b3202b; margin-bottom: 12px !important; }
.mk-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.mk-list { border: var(--mk-bd2); margin-bottom: 14px !important; }
.mk-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #ddd; font-variant-numeric: tabular-nums; }
.mk-list li:last-child { border-bottom: 0; }
.mk-done { text-align: center; }
.mk-done .mk-row { justify-content: center; }
.mk-pick { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.mk-prev { width: 96px; height: 96px; border: var(--mk-bd2); display: grid; place-items: center; font-size: 12px; color: var(--mk-muted); overflow: hidden; background: #f3f3f3; flex: none; }
.mk-prev img { width: 100%; height: 100%; object-fit: cover; }
.mk-ico.shake { animation: mk-shake .22s linear infinite; }
@keyframes mk-shake { 0%, 100% { transform: rotate(-9deg) scale(1.04); } 50% { transform: rotate(9deg) scale(1.1); } }
.mk-win { font-family: "Space Grotesk", sans-serif; font-size: 56px; font-weight: 800; line-height: 1.1; margin: 8px 0 12px; display: inline-block; background: var(--mk-yellow); border: var(--mk-bd); box-shadow: var(--mk-sh); padding: 8px 22px; transform: rotate(-2deg); animation: mk-pop .25s ease-out; font-variant-numeric: tabular-nums; }
.mk-win.zero { background: #eee; }
.mk-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 10000; background: #000; color: #fff; padding: 12px 20px; font-weight: 800; border: 2px solid #fff; max-width: calc(100vw - 32px); }

@media (max-width: 640px) {
    .mk-head h1 { font-size: 30px; }
    .mk-wallet { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; }
    .mk-tabs button { flex: 1; padding: 11px 6px; font-size: 14px; }
    .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mk-card h3 { font-size: 16px; }
    .mk-card { padding: 16px 10px 12px; }
    .mk-ico { width: 68px; height: 68px; font-size: 36px; }
    .mk-buy { flex-wrap: wrap; } .mk-qty { width: 100%; justify-content: space-between; }
    .mk-buy .mk-btn { flex: 1; padding: 0 6px; }
    .mk-logs li { grid-template-columns: 64px 1fr auto; } .mk-logs time { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mk-page * { animation: none !important; transition: none !important; } }

/* 1.1.0 상품 그림 (아이콘 글자 대신 올린 이미지) */
.mk-ico.has-img { overflow: hidden; padding: 0; }
.mk-ico.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-mini { width: 22px; height: 22px; object-fit: cover; vertical-align: -5px; border-radius: 4px; }