/* =============================================================================
 * 달쉼장터 (2026-10-08 고객 시안 「달쉼장터 개편안」 확정)
 *
 * 싣는 화면(functions.php): 달쉼장터 /market/ (전체 보기 ?view=deal|used 포함), 매물 상세, 물건 올리기.
 * 마크업은 page-market.php · parts/deal-card.php · parts/market-row.php · parts/market-card.php.
 *
 * ★ 색은 tokens.css 의 변수만 쓴다. 다크모드는 tokens.css 의 prefers-color-scheme 블록이 값을 바꿔 주므로
 *   여기에는 다크 전용 규칙이 없다. 시안 다크 메모를 옮긴 것:
 *     - 판매 상태 색: 판매중 --ok, 예약중 --violet (판매완료는 회색으로 눌러 둔다)
 *     - 카드 테두리는 --card-line(얇게), 강한 테두리는 핵심 목록(게시글)에만 — 그래서 이 화면의 카드는 1px 이다
 *     - 버튼 배경: 사이트 공용 .btn.solid 를 그대로 쓴다(다크 버튼 색 토큰은 다른 작업이 만든다)
 *   사진 위에 얹는 글자·그라데이션(전체 보기 격자)은 테마와 무관하게 늘 밝은 글자·어두운 바탕이어야 해서
 *   상수 토큰(--cream, --plate-deep)을 color-mix 로 투명도만 낮춰 쓴다.
 *
 * ★ 왜 dalshim.css 가 아니라 이 파일인가 — 이 화면들에서만 쓰는 규칙이고, dalshim.css 는 같은 시기에 다른 작업이
 *   크게 고치고 있다. colosseum.css·ops-*.css 와 같은 분리다.
 *   dalshim.css 의 「중고장터」 구간에 있는 #screen-log .mk-* 규칙(게시글 화면 아래 섹션용)은 이제 그리는 곳이
 *   없다(index.php 의 섹션이 배너로 바뀌었다). 이 파일이 그 격자 칸을 #screen-market 스코프로 다시 받는다.
 *   저쪽 정리는 dalshim.css 작업이 끝난 뒤 따로 한다.
 *
 * 새 이름 충돌 점검: .mh-* 와 #screen-market 은 이 레포(css·php·js)에 없던 이름이다(grep 0건).
 * 주의: 클래스명을 나열할 땐 쉼표로 구분한다 — 별표 뒤에 슬래시를 붙여 쓰면 주석이 조기 종료된다
 *   (2026-07-19 홈 히어로 붕괴 사고).
 * ============================================================================= */

/* ── 판매 상태 칩(.mk-state) — 목록 격자·매물 상세가 함께 쓴다 ────────────────
 * dalshim.css 의 바탕 규칙(.mk-state.on = --action, .done = --oil)을 시안 색으로 덮는다.
 * 글자는 --bg 다: 라이트에서는 밝은 글자, 다크에서는 어두운 글자로 뒤집혀 두 테마 모두 읽힌다
 * (다크의 --ok·--violet 은 밝은 색이라 거기에 밝은 글자를 얹으면 안 읽힌다). */
.mk-state.on{background:var(--ok); color:var(--bg)}
.mk-state.reserved{background:var(--violet); color:var(--bg)}
.mk-state.done{background:var(--warmgrey); color:var(--oil)}

/* ── 머리 ─────────────────────────────────────────────────────────────── */

/* MARKET 스텐실. 시안(2026-10-08 달쉼장터 개편안)은 진한 보라 바탕에 흰 글자다 — 흰 글씨 보라 바탕
 * 전용 토큰 --action-bg(라이트 #3A2A63, 다크 #6E4FC4)를 쓴다. dalshim.css 의 .st-market(--amber, 옅은 보라)은
 * 게시글 화면 등 다른 자리의 MARKET 라벨이 그대로 쓴다. */
#screen-market .phead .stencil.st-market{background:var(--action-bg); color:var(--cream)}

/* 전체 보기의 「← 달쉼장터」. 다른 상세 화면의 .pback 과 같은 값(여백은 화면마다 각자 갖는 규약). */
#screen-market .pback{display:inline-block; margin-bottom:12px}

/* ── 세그먼트 탭(달쉼픽 딜 / 중고장터) ─────────────────────────────────────
 * 스크롤하면 헤더 아래에 붙는다. top 은 market-hub-island.js 가 실제 헤더 높이로 맞춘다 —
 * 헤더 높이는 화면 폭·검색창 펼침에 따라 달라서 고정값으로는 틈이 생기거나 가려진다.
 * 아래 60px 는 JS 가 오기 전의 대략값이다. 바탕을 칠하는 이유: 붙어 있는 동안 아래 내용이 비쳐 보이지 않게. */
#screen-market .mh-seg-wrap{
  position:sticky; top:60px; z-index:40;
  margin:0 0 18px; padding:8px 0;
  background:var(--bg);
}
#screen-market .mh-seg{
  display:flex; gap:4px; max-width:480px;
  padding:4px; border-radius:10px; background:var(--bg-2);
}
#screen-market .mh-seg a{
  flex:1; padding:9px 0; border-radius:7px; text-align:center;
  font-size:14px; font-weight:700; color:var(--muted); text-decoration:none;
  transition:background .15s, color .15s;
}
#screen-market .mh-seg a:hover{color:var(--ink)}
#screen-market .mh-seg a.is-on{background:var(--card); color:var(--ink); font-weight:800; box-shadow:0 1px 3px var(--shadow)}

/* ── 본문 칸 ──────────────────────────────────────────────────────────────
 * .cols(1fr | 340px 사이드바)는 홈과 같은 전역 규칙 그대로다. 왼쪽 칸이 긴 제목에 밀려 넘치지 않게만 푼다
 * (#screen-log .cols > div 와 같은 이유 — grid item 의 최소 폭이 콘텐츠 폭이라서). */
#screen-market .mh-main{min-width:0}

/* 섹션. scroll-margin-top 은 탭을 눌러 이동했을 때 섹션 머리가 헤더·탭 밑에 숨지 않게 하는 여백이다.
 * 이것도 JS 가 실제 높이로 맞추고, 여기 값은 그 전의 대략값이다. */
#screen-market .mh-sec{scroll-margin-top:130px}
#screen-market .mh-sec + .mh-sec{margin-top:36px}

#screen-market .mh-sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
#screen-market .mh-sec-head h2{margin:2px 0 0; font-size:22px; font-weight:900; letter-spacing:-.03em; color:var(--ink)}
#screen-market .mh-sec-head .btn{flex:none}
#screen-market .mh-eyebrow{display:block; font-size:12px; font-weight:800; color:var(--action)}
#screen-market .mh-more{flex:none; font-size:13.5px; font-weight:700; color:var(--muted); text-decoration:none}
#screen-market .mh-more:hover{color:var(--action)}
#screen-market .mh-desc{margin:6px 0 14px; font-size:14px; line-height:1.55; color:var(--muted)}
#screen-market .mh-empty{margin:0; padding:20px 0; text-align:center}

/* 자리표시 아이콘(사진이 없을 때만). 색은 --muted. */
#screen-market .mh-ico{display:block}

/* ── 1. 달쉼픽 딜 카드 ─────────────────────────────────────────────────── */
#screen-market .mh-deals{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
#screen-market .mh-deal{
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:var(--card); border:1px solid var(--card-line); border-radius:8px;
  color:inherit; text-decoration:none; transition:border-color .15s;
}
#screen-market .mh-deal:hover{border-color:var(--action)}
/* 사진 칸. 인라인 background-image 를 받으므로 longhand 로 선언한다(축약형이면 사진이 얹힐 때
 * size·position·repeat 이 리셋돼 바둑판처럼 반복된다 — .pssol-thumb·.shop-thumb 와 같은 이유). */
#screen-market .mh-deal-thumb{
  position:relative; aspect-ratio:3/2;
  display:flex; align-items:center; justify-content:center;
  background-color:var(--bg-2); background-size:cover; background-position:center; background-repeat:no-repeat;
  color:var(--muted);
}
#screen-market .mh-deal-out{
  position:absolute; left:8px; top:8px;
  font-size:11px; font-weight:800; padding:2px 7px; border-radius:3px;
  background:var(--warmgrey); color:var(--oil);
}
#screen-market .mh-deal-body{display:flex; flex-direction:column; gap:3px; padding:10px 12px 12px}
#screen-market .mh-deal-partner{font-size:12px; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
#screen-market .mh-deal-name{
  font-size:14px; font-weight:800; line-height:1.4; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#screen-market .mh-deal-price{margin-top:2px; font-size:16px; font-weight:900; letter-spacing:-.01em; color:var(--ink)}

/* ── 2. 중고장터 ───────────────────────────────────────────────────────── */

/* 분류 필터(전체 · 차량장터 · 부품장터). 사이트 공용 .tabs 를 그대로 받고(선택 표시·링크 계약) 모양만 둥근 알약으로. */
#screen-market .mh-pills{margin-bottom:12px; gap:6px}
#screen-market .mh-pills a{
  border-radius:999px; padding:6px 13px;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:0;
  border:1.5px solid var(--card-line); background:var(--card); color:var(--ink);
}
#screen-market .mh-pills a[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}

/* 중개자 고지. 문구·자리는 그대로(매물보다 위), 모양만 시안의 옅은 보라 상자. */
#screen-market .mh-notice{
  display:flex; align-items:flex-start; gap:8px;
  margin:0 0 12px; padding:11px 13px;
  border-left:none; border-radius:8px; background:var(--notice-row);
  font-size:12.5px; line-height:1.6; color:var(--muted);
}
#screen-market .mh-notice svg{flex:none; margin-top:2px}

/* 매물 목록 상자와 한 줄. */
#screen-market .mh-list{padding:0 14px; background:var(--card); border:1px solid var(--card-line); border-radius:8px}
#screen-market .mh-row{
  display:flex; align-items:flex-start; gap:12px; padding:14px 0;
  border-bottom:1px dashed var(--line); color:inherit; text-decoration:none;
}
#screen-market .mh-row:last-child{border-bottom:none}
#screen-market .mh-row:hover .mh-row-title{color:var(--action)}
#screen-market .mh-row-thumb{
  flex:none; width:76px; height:76px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background-color:var(--bg-2); background-size:cover; background-position:center; background-repeat:no-repeat;
  color:var(--muted);
}
#screen-market .mh-row-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
#screen-market .mh-row-badges{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:2px}
#screen-market .mh-kind{font-size:11px; font-weight:800; line-height:1.5; padding:0 6px; border-radius:3px; background:var(--ink); color:var(--bg)}
#screen-market .mh-state{font-size:12px; font-weight:800}
#screen-market .mh-state.is-on{color:var(--ok)}
#screen-market .mh-state.is-reserved{color:var(--violet)}
#screen-market .mh-state.is-sold{color:var(--muted)}
#screen-market .mh-row-title{font-size:14.5px; font-weight:600; color:var(--ink); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
#screen-market .mh-row-price{font-size:16px; font-weight:900; letter-spacing:-.01em; color:var(--ink)}
#screen-market .mh-row-meta{font-size:12px; color:var(--muted)}
/* 팔린 줄은 눌러 둔다 — 지우지 않는 이유(고객 확정 2026-10-01): "이런 게 이 값에 팔렸다" 는 정보. */
#screen-market .mh-row.is-sold .mh-row-thumb{filter:grayscale(1); opacity:.6}
#screen-market .mh-row.is-sold .mh-row-title,
#screen-market .mh-row.is-sold .mh-row-price{color:var(--muted)}

#screen-market .mh-all{
  display:block; margin-top:12px; padding:12px; text-align:center;
  background:var(--card); border:1px solid var(--card-line); border-radius:8px;
  font-size:14px; font-weight:800; color:var(--ink); text-decoration:none;
}
#screen-market .mh-all:hover{border-color:var(--action); color:var(--action)}

/* ── 중고장터 전체 보기(?view=used) — 게시글 화면 아래 섹션의 격자 칸을 그대로 ───────────
 * 칸 뼈대(.pssol-grid·.pssol-card·.pssol-link·.pssol-thumb·.pssol-count)는 dalshim.css 의 전역 규칙 그대로다
 * (열 수 4·3·2 반응형 포함 — ★ 여기서 grid-template-columns 를 적지 말 것. id 스코프라 @media 안의 전역 열
 * 규칙까지 이겨 모바일에서 4열로 얼어붙는다. dalshim.css 의 #screen-log 사진 탭 주석과 같은 함정).
 * 아래는 dalshim.css 에서 #screen-log 로 묶여 있던 얹는 글자 규칙을 이 화면 스코프로 옮긴 것이다 — 값은 같다. */
#screen-market .pssol-thumb{position:relative; display:block; overflow:hidden}
#screen-market .pssol-thumb::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:58%;
  background:linear-gradient(to top, color-mix(in srgb, var(--plate-deep) 78%, transparent), transparent);
  pointer-events:none;
}
#screen-market .mk-card .mk-state{position:absolute; left:8px; top:8px; z-index:1}
#screen-market .mk-price{
  position:absolute; left:10px; right:10px; bottom:48px; z-index:1;
  color:var(--cream); font-family:var(--mono); font-size:15px; font-weight:900; letter-spacing:-.01em;
}
#screen-market .log-card-title{
  position:absolute; left:10px; right:10px; bottom:28px; z-index:1;
  color:var(--cream); font-size:13.5px; font-weight:900; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
#screen-market .log-card-meta{
  position:absolute; left:10px; right:10px; bottom:9px; z-index:1;
  display:flex; align-items:baseline; gap:5px;
  font-family:var(--mono); font-size:10.5px; font-weight:700;
}
#screen-market .log-card-au{flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--cream)}
#screen-market .mk-loc{flex:none; color:color-mix(in srgb, var(--cream) 72%, transparent)}
#screen-market .mk-cmt{flex:none; color:var(--cream)}
#screen-market .mk-card .mk-owner{color:var(--cream); border-color:color-mix(in srgb, var(--cream) 55%, transparent)}
#screen-market .mk-card.done .pssol-thumb{filter:grayscale(1); opacity:.62}
#screen-market .mk-card.done .pssol-link:hover .pssol-thumb{opacity:.8}
#screen-market .mk-tabs{margin-bottom:14px}

@media(max-width:900px){
  /* .cols 가 1열로 접히면(전역 규칙) 사이드바가 본문 아래로 내려간다. 세그먼트 탭은 폭을 다 쓴다. */
  #screen-market .mh-seg{max-width:none}
}
@media(max-width:560px){
  #screen-market .mh-sec-head h2{font-size:20px}
  #screen-market .mh-deals{gap:10px}
  #screen-market .mh-row-thumb{width:68px; height:68px}
  #screen-market .mk-price{font-size:13.5px; bottom:44px}
}