@charset "utf-8";
/* ==========================================================================
   더포커 — 포인트 마켓 겉모습
   /market/ 화면에서만 불러온다. 플러그인의 market/css/market.css 는 그대로 두고
   (다른 사이트와 같이 쓰는 파일), 그 위에 더포커의 어두운 테이블 디자인을 덮어쓴다.
   ========================================================================== */

body.tp .mk-page {
    --mk-ink: var(--text); --mk-sub: #c5cac8; --mk-muted: var(--muted); --mk-card: var(--surface); --mk-soft: var(--bg2);
    --mk-coral: var(--felt); --mk-mint: var(--felt2); --mk-yellow: var(--gold);
    --mk-bd: 1px solid var(--line); --mk-bd2: 1px solid var(--line2); --mk-sh: none; --mk-sh-sm: none;
    background: none; padding: 0; margin: 0 0 24px; border: 0 !important; border-radius: 0 !important; box-shadow: none; overflow: visible;
    color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.6;
}
body.tp .mk { max-width: none; padding: 0; }
body.tp .mk-page button { font-family: var(--font); }
body.tp .mk-page :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 머리: 제목과 보유 포인트 */
body.tp .mk-head { align-items: stretch; margin-bottom: 20px; }
body.tp .mk-eyebrow { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
body.tp .mk-head h1 { font-family: var(--font); font-size: 30px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.25; color: var(--text); }
body.tp .mk-sub { color: var(--muted); font-size: 15px; }
body.tp .mk-wallet { background: var(--gold-bg); border: 1px solid rgba(201, 165, 93, .5); border-radius: var(--radius); padding: 12px 20px; min-width: 190px; display: flex; flex-direction: column; justify-content: center; }
body.tp .mk-wallet span { color: var(--muted); font-size: 12px; font-weight: 600; }
body.tp .mk-wallet b { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--gold-ink); letter-spacing: -0.03em; }
body.tp .mk-wallet i { color: var(--muted); font-family: var(--font); }
body.tp .mk-warn { background: var(--red-bg); color: #f0a0a3; border: 1px solid rgba(220, 80, 85, .5); border-radius: 10px; font-weight: 600; }

/* 탭 · 분류 */
body.tp .mk-tabs { gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); margin-bottom: 16px; }
body.tp .mk-tabs button { flex: 1 1 0; background: transparent; border: 0; margin: 0; padding: 10px 14px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 600; }
body.tp .mk-tabs button:hover { color: var(--text); }
body.tp .mk-tabs button.on { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
body.tp .mk-tabs em { background: var(--felt); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; }
body.tp .mk-chips { gap: 6px; margin-bottom: 16px; }
body.tp .mk-chip { background: transparent; border: 1px solid var(--line2); border-radius: 999px; color: var(--muted); padding: 6px 14px; min-height: 36px; font-size: 13px; font-weight: 600; }
body.tp .mk-chip:hover { border-color: var(--felt2); color: var(--felt-ink); }
body.tp .mk-chip.on { background: var(--felt-bg); border-color: var(--felt2); color: var(--felt-ink); box-shadow: none; }

/* 상품 카드 */
body.tp .mk-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
body.tp .mk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px 16px; transition: border-color .15s; overflow: hidden; }
body.tp .mk-card:hover { border-color: var(--line2); }
body.tp .mk-card.sold { opacity: .55; }
body.tp .mk-card h3 { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
body.tp .mk-desc { color: var(--muted); font-size: 13px; line-height: 1.6; }
body.tp .mk-meta { color: var(--dim); font-weight: 500; }
body.tp .mk-link { color: var(--felt-ink); font-weight: 600; }
body.tp .mk-badge { top: 10px; left: 10px; border: 1px solid rgba(42, 157, 111, .5); border-radius: 999px; background: var(--felt-bg); color: var(--felt-ink); padding: 1px 9px; font-size: 11px; font-weight: 700; }
body.tp .mk-badge.b-hot { background: var(--red-bg); border-color: rgba(220, 80, 85, .5); color: #f0a0a3; }
body.tp .mk-badge.b-limit { background: var(--gold-bg); border-color: rgba(201, 165, 93, .55); color: var(--gold-ink); }
body.tp .mk-count { top: 10px; right: 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--bg2); color: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 1px 10px; }

/* 아이콘: 기울어진 색 타일 대신, 테이블 위에 놓인 조용한 판 */
body.tp .mk-ico { width: 76px; height: 76px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; transform: none; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .18), inset 0 0 24px rgba(0, 0, 0, .25); margin: 10px 0 14px; font-size: 36px; color: #fff;
    background: radial-gradient(120% 140% at 50% 0%, #1d6b4c 0%, #134a35 55%, #0e3526 100%); }
body.tp .mk-ico.c-mint { background: radial-gradient(120% 140% at 50% 0%, #1d6b4c 0%, #134a35 55%, #0e3526 100%); }
body.tp .mk-ico.c-coral { background: radial-gradient(120% 140% at 50% 0%, #5a2a2d 0%, #3a1c1f 60%, #2b181a 100%); }
body.tp .mk-ico.c-yellow, body.tp .mk-ico:not(.c-mint):not(.c-coral):not(.c-white) { background: radial-gradient(120% 140% at 50% 0%, #4d4026 0%, #352c1b 60%, #29231a 100%); }
body.tp .mk-ico.c-white { background: var(--surface2); }
body.tp .mk-ico.sm { width: 52px; height: 52px; border-radius: 12px; font-size: 25px; margin: 0; }
body.tp .mk-ico.lg { width: 104px; height: 104px; border-radius: 20px; font-size: 52px; margin: 4px auto 16px; }
body.tp .mk-ico.has-img { background: var(--bg2); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .4); }
body.tp .mk-ico.has-img img { border-radius: inherit; }
body.tp .mk-mini { border-radius: 5px; box-shadow: 0 0 0 1px var(--line2); }
body.tp .mk-ico.shake { animation: tp-mk-shake .26s linear infinite; }
@keyframes tp-mk-shake { 0%, 100% { transform: rotate(-5deg) scale(1.03); } 50% { transform: rotate(5deg) scale(1.07); } }

/* 가격 · 수량 · 버튼 */
body.tp .mk-price { font-family: var(--mono); color: var(--text); letter-spacing: -0.03em; }
body.tp .mk-price b { font-size: 22px; font-weight: 700; }
body.tp .mk-price i { color: var(--muted); font-family: var(--font); }
body.tp .mk-price s { color: var(--dim); font-size: 13px; }
body.tp .mk-qty { border: 1px solid var(--line2); border-radius: 10px; background: var(--bg2); color: var(--text); }
body.tp .mk-qty button { color: var(--muted); height: 42px; }
body.tp .mk-qty button:hover { color: var(--text); }
body.tp .mk-qty b { font-family: var(--mono); color: var(--text); }
body.tp .mk-soldout { border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--dim); font-weight: 600; }
body.tp .mk-btn { min-height: 42px; padding: 0 14px; background: transparent; border: 1px solid var(--line2); border-radius: 10px; box-shadow: none; color: var(--text) !important; font-size: 14px; font-weight: 700; transition: background .15s, border-color .15s, color .15s; }
body.tp .mk-btn:hover { border-color: var(--muted); }
body.tp .mk-btn:active { transform: none; }
body.tp .mk-btn.pri { background: var(--felt); border-color: var(--felt); color: #fff !important; }
body.tp .mk-btn.pri:hover { background: var(--felt2); border-color: var(--felt2); }
body.tp .mk-btn[disabled], body.tp .mk-btn.pri[disabled] { background: var(--surface2); border-color: var(--line); color: var(--dim) !important; cursor: not-allowed; }

/* 보관함 · 이용 내역 */
body.tp .mk-prof { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
body.tp .mk-prof img, body.tp .mk-prof-no { border: 1px solid var(--line2); border-radius: 50%; background: var(--bg2); }
body.tp .mk-prof-no { background: var(--felt-bg); color: var(--felt-ink); font-weight: 700; }
body.tp .mk-prof b { color: var(--text); font-size: 17px; }
body.tp .mk-prof p { color: var(--muted); }
body.tp .mk-empty { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-weight: 500; }
body.tp .mk-logs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
body.tp .mk-logs li { border-bottom: 1px solid var(--line); color: var(--text); }
body.tp .mk-logs li:last-child { border-bottom: 0; }
body.tp .mk-logs p { color: var(--muted); }
body.tp .mk-logs time { color: var(--dim); font-family: var(--mono); }
body.tp .mk-tag { border: 1px solid var(--line2); border-radius: 999px; background: var(--surface2); color: var(--muted); font-size: 11px; font-weight: 700; padding: 2px 0; }
body.tp .mk-tag.t-buy { background: var(--gold-bg); border-color: rgba(201, 165, 93, .5); color: var(--gold-ink); }
body.tp .mk-tag.t-use { background: var(--felt-bg); border-color: rgba(42, 157, 111, .5); color: var(--felt-ink); }
body.tp .mk-tag.t-gift, body.tp .mk-tag.t-got { background: var(--surface2); border-color: var(--line2); color: var(--text); }
body.tp .mk-pt { font-family: var(--mono); font-weight: 700; }
body.tp .mk-pt.plus, body.tp .mk-dl .plus { color: var(--felt-ink); }
body.tp .mk-pt.minus, body.tp .mk-dl .minus { color: #f0a0a3; }
body.tp .mk-note { color: var(--dim); }

/* 창 */
body.tp .mk-ov { background: rgba(0, 0, 0, .72); }
body.tp .mk-md { background: var(--surface); border: 1px solid var(--line2); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); color: var(--text); padding: 24px; }
body.tp .mk-md h2 { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
body.tp .mk-p { color: var(--muted); }
body.tp .mk-sum { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; }
body.tp .mk-sum b { color: var(--text); }
body.tp .mk-sum p { color: var(--muted); }
body.tp .mk-dl { color: var(--muted); }
body.tp .mk-dl dd { color: var(--text); font-family: var(--mono); font-weight: 700; }
body.tp .mk-dl dt:last-of-type, body.tp .mk-dl dd:last-of-type { border-top: 1px solid var(--line2); color: var(--text); }
body.tp .mk-dl dd:last-of-type { color: var(--gold-ink); }
body.tp .mk-fld { color: var(--muted); font-weight: 600; }
body.tp .mk-page .mk-fld input, body.tp .mk-page .mk-fld textarea { background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); height: auto; min-height: 46px; padding: 11px 13px; font-size: 16px; font-family: var(--font); }
body.tp .mk-page .mk-fld input[type="file"] { padding: 9px 10px; font-size: 14px; color: var(--muted); }
body.tp .mk-err { background: var(--red-bg); border: 1px solid rgba(220, 80, 85, .5); border-radius: 9px; color: #f3b0b3; font-weight: 600; }
body.tp .mk-list { border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); overflow: hidden; }
body.tp .mk-list li { border-bottom: 1px solid var(--line); color: var(--text); align-items: center; }
body.tp .mk-list li:last-child { border-bottom: 0; }
body.tp .mk-list li > :last-child { font-family: var(--mono); color: var(--gold-ink); }
body.tp .mk-prev { border: 1px dashed var(--line2); border-radius: 12px; background: var(--bg2); color: var(--dim); }
body.tp .mk-win { font-family: var(--mono); font-size: 46px; font-weight: 700; letter-spacing: -0.04em; background: var(--gold-bg); border: 1px solid rgba(201, 165, 93, .55); border-radius: 14px; box-shadow: none; transform: none; color: var(--gold-ink); padding: 10px 26px; }
body.tp .mk-win i { color: var(--muted); font-family: var(--font); }
body.tp .mk-win.zero { background: var(--bg2); border-color: var(--line2); color: var(--muted); }
body.tp .mk-toast { background: var(--surface2); color: var(--text); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); font-weight: 600; }

@media (max-width: 640px) {
    body.tp .mk-page { margin-left: 0; margin-right: 0; }
    body.tp .mk-head h1 { font-size: 25px; }
    body.tp .mk-wallet { flex-direction: row; justify-content: space-between; align-items: center; padding: 10px 16px; }
    body.tp .mk-wallet b { font-size: 22px; }
    body.tp .mk-tabs button { padding: 9px 4px; font-size: 13px; }
    body.tp .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body.tp .mk-card { padding: 18px 10px 12px; border-radius: 12px; }
    body.tp .mk-card h3 { font-size: 14px; }
    body.tp .mk-desc { font-size: 12px; }
    body.tp .mk-ico { width: 60px; height: 60px; font-size: 28px; border-radius: 13px; }
    body.tp .mk-ico.lg { width: 92px; height: 92px; font-size: 46px; }
    body.tp .mk-price b { font-size: 18px; }
    body.tp .mk-badge { top: 8px; left: 8px; }
    body.tp .mk-count { top: 8px; right: 8px; }
    body.tp .mk-md { padding: 20px 16px; }
    body.tp .mk-win { font-size: 38px; }
}

/* 글자 아이콘: 카드 무늬 같은 기호를 금색으로 */
body.tp .mk-ico:not(.has-img) { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", var(--font); color: var(--gold-ink); font-weight: 400; line-height: 1; }

/* 카드 아래 줄: 수량은 한 줄을 다 쓰고, 선물·구매는 그 아랫줄에 (카드가 좁아도 넘치지 않게) */
body.tp .mk-buy { flex-wrap: wrap; gap: 6px; }
body.tp .mk-buy .mk-qty { flex: 1 1 100%; width: 100%; justify-content: space-between; }
body.tp .mk-buy .mk-btn { flex: 1 1 0; min-width: 0; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; }
body.tp .mk-buy .mk-btn.pri { flex: 2 1 0; }