/* MD 추천상품관 — 공개몰 /md · /md/{번호} + 관리자 «테마 묶음» 미리보기 + (메인 S3 판도 같은 .mdb 를 쓸 수 있다).
   정본: docs/디자인_참고_1005/메인구성_정본_v2.md 4-3·4-4. 고르는 규칙 services/md_hall.
   ★디자인 기준 v2 예외는 두 자리뿐: 테마 대표 칸·띠(바탕 단색 = 배너 밝은 6색 · 안의 사진 칸 모서리 12px — 배너 자리 예외로 묶음,
     대표님 확인 2) · «다른 테마» 타일(카드뉴스 모양, 모서리 8px). 바깥 틀 모서리 0 · 그림자 0 · 그라데이션 0 그대로.
   ★바탕색은 site.css .bn-th-<키>(배너 색, --bn-ac = 강조 글자색)를 그대로 쓴다 — 여기서 색을 새로 만들지 않는다.
     6색 모두 밝은 바탕이라 늘 .dark(남색 글자)와 같이 쓴다. 상품 카드는 _parts/pcard.html 그대로.
   ★가로로 넘치는 것은 그 칸 안에서만 밀어 본다(테마 칩 줄) — 쪽 전체가 옆으로 밀리지 않게. */

/* ── 테마 제목 두 줄(배너 큰 제목과 같은 틀: 앞줄 가는 글 · 끝줄 굵은 강조색) ── */
.md-t { display: block; font-weight: 800; letter-spacing: -.045em; line-height: 1.28; word-break: keep-all; }
.md-t .t1 { display: block; font-weight: 500; }
.md-t .t2 { display: block; font-style: normal; color: var(--bn-ac, inherit); }
.md-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; font-weight: 700; }
.md-meta span + span::before { content: ""; display: inline-block; width: 1px; height: 10px; margin-right: 12px; background: currentColor; opacity: .35; vertical-align: -1px; }
/* 사진 칸 — 흰 칸 모서리 12px(배너 안 사진 칸 규칙). ★10/5 검사: 흰 바탕 테마에서 사진 칸에도 1px 선을 둘러 «테두리 상자 안
   테두리 상자»(AI 티 7번)였다 → 사진 칸 선은 없앰(바깥 띠의 1px 선 하나만). 흰 바탕 테마 색 자체·띠 돌림색은 대표님 확인 뒤. */
.md-ph { display: flex; gap: 10px; }
.md-ph img { display: block; box-sizing: border-box; padding: 8px; background: #fff; border-radius: 12px; object-fit: contain; }

/* ── 메인 판(대표 칸 1 + 상품 4열 × 1~2줄) — 관리자 미리보기도 같은 모양 ── */
.mdb { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.mdb-cover { display: flex; flex-direction: column; min-width: 0; padding: 26px 22px 22px; }
.mdb-cover .md-t { font-size: 23px; }
.mdb-cover .md-t .t1 { font-size: 17px; margin-bottom: 2px; }
.mdb-sum { margin: 10px 0 0; font-size: 13px; line-height: 1.55; word-break: keep-all; opacity: .92; }
.mdb-cover .md-meta { margin-top: 12px; }
.mdb-cover .md-ph { flex-direction: column; margin-top: auto; padding-top: 18px; }   /* 메인 판과 같게 대표 칸 사진 1~2장을 세로로 */
.mdb-cover .md-ph img { width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 12px; }
.mdb-cover:hover .md-t .t2 { text-decoration: underline; text-underline-offset: 4px; }
body .mdb .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }

/* ── /md — 왼쪽 테마 목록 + 오른쪽 테마 띠·상품 줄 ── */
.mdp-picks { margin-top: 8px; }
.mdp-wrap { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 24px; }
.mdp-nav { position: sticky; top: 66px; display: flex; flex-direction: column; border-top: 2px solid var(--g1); }
.mdp-nav > b { padding: 12px 2px 10px; font-size: 13px; color: var(--g2); border-bottom: 1px solid var(--g5); }
.mdp-nav a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 11px 2px; border-bottom: 1px solid var(--g5); font-size: 14px; font-weight: 600; color: var(--g1); word-break: keep-all; }
.mdp-nav a span { flex: none; font-size: 12px; font-weight: 500; color: var(--g3); font-variant-numeric: tabular-nums; }
.mdp-nav a:hover { color: var(--blue); }
.mdp-main { min-width: 0; }
.mdp-main > .pb-tools { margin-top: 0; }
.mdp-theme { scroll-margin-top: 70px; }
.mdp-theme + .mdp-theme { margin-top: 44px; }
.mdp-band { display: flex; align-items: center; gap: 24px; min-height: 150px; padding: 22px 26px; margin-bottom: 18px; }
.mdp-band .md-copy { flex: 1; min-width: 0; }
.mdp-band .md-t { font-size: 24px; }
.mdp-band .md-t .t1 { font-size: 17px; }
.mdp-band p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; word-break: keep-all; opacity: .92; }
.mdp-band .md-meta { margin-top: 10px; }
.mdp-band .md-ph img { width: 104px; height: 104px; }
.mdp-band:hover .md-t .t2 { text-decoration: underline; text-underline-offset: 4px; }
.mdp-more { margin-top: 14px; text-align: right; }
.mdp-more a { font-size: 13px; font-weight: 700; color: var(--g2); }
.mdp-more a:hover { color: var(--blue); }

/* ── /md/{번호} — 큰 띠 + 상품 전부 + 다른 테마 타일 ── */
.mdp-hero { display: flex; align-items: center; gap: 32px; min-height: 220px; padding: 30px 40px; margin-top: 4px; }
.mdp-hero .md-copy { flex: 1; min-width: 0; }
.mdp-hero .md-t { font-size: 32px; }
.mdp-hero .md-t .t1 { font-size: 22px; margin-bottom: 2px; }
.mdp-hero p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; word-break: keep-all; opacity: .92; }
.mdp-hero .md-meta { margin-top: 14px; font-size: 13px; }
.mdp-hero .md-ph { gap: 12px; }
.mdp-hero .md-ph img { width: 140px; height: 140px; padding: 10px; }
/* 상품 격자 열 수 — services/md_hall.grid_cols(4열 기본, 5열이 빈칸이 더 적을 때만). 좁은 화면은 site.css 그대로(4열 · 폰 2열) */
@media (min-width: 1181px) { body.site .pgrid.mdp-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mdp-others .s-sec { margin-top: 56px; }
.mdp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mdp-tile { display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 16px; border-radius: 8px; }
.mdp-tile b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.03em; line-height: 1.3; word-break: keep-all; }
.mdp-tile small { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--bn-ac, inherit); }
.mdp-tile .md-ph { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 14px; }
.mdp-tile .md-ph img { width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 6px; border-radius: 8px; }
.mdp-tile:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ── 관리자 «테마 묶음»(admin/md_collection.html) — 관리자 화면 규칙 그대로(표·1px 선·모서리 0). 견본 칸·72px 사진만 ── */
.mda-tones { display: flex; flex-wrap: wrap; gap: 8px; }
.mda-tones label { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 8px; border: 1px solid var(--g4); background: #fff; font-size: 13px; font-weight: 600; color: var(--g2); cursor: pointer; }
.mda-tones label:has(input:checked) { border-color: var(--navy); color: var(--g1); outline: 1px solid var(--navy); outline-offset: -2px; }
.mda-tones input { width: 16px; height: 16px; accent-color: var(--navy); margin: 0; }
.mda-sw { display: inline-block; width: 22px; height: 22px; border: 1px solid rgba(15, 31, 69, .18); }
.mda-swcell { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--g2); }
.mda-new > summary { cursor: pointer; list-style: none; }
.mda-new > summary::-webkit-details-marker { display: none; }
.mda-new > summary .mda-open { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--blue); }
.mda-new[open] > summary .mda-open { display: none; }
.mda-new:not([open]) { padding-bottom: 0; }
.card.mda-new:not([open]) > summary.card-h { margin-bottom: 0; border-bottom: 0; }       /* 닫혀 있을 때 머리 줄만(아래 빈 띠 없음) */
.mda-th72 { display: block; width: 72px; height: 72px; flex: none; border: 1px solid var(--g4); background: #fff; object-fit: contain; }
.mda-th72.ph { display: grid; place-items: center; font-size: 11px; color: var(--g3); }
.mda-tline { display: block; font-weight: 700; color: var(--g1); line-height: 1.4; word-break: keep-all; }
.mda-tline .t1 { font-weight: 500; color: var(--g2); }
.mda-covers { display: flex; flex-wrap: wrap; gap: 10px; }
.mda-covers label { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; font-size: 11px; color: var(--g3); cursor: pointer; }
.mda-covers label:has(input:checked) .mda-th72 { border: 2px solid var(--navy); }
.mda-covers input { margin: 0; accent-color: var(--navy); }
.mda-nos { width: 100%; min-height: 96px; font-size: 13px; line-height: 1.5; }
.mda-preview { padding: 18px; background: #fff; }
.mda-preview .pcard-act { display: none; }
.mda-preview .pcard { pointer-events: none; }

/* ── 좁은 화면 ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .mdb { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }        /* 4열은 그대로 — 대표 칸만 좁힘 */
  .mdp-wrap { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; }
  .mdp-band .md-ph img:nth-child(3) { display: none; }
  .mdp-theme .pgrid > :nth-child(n+5) { display: none; }                 /* 4열(site.css)이면 테마마다 한 줄 4개(다섯째가 혼자 남지 않게) */
  .mdp-picks .pgrid > :nth-child(n+9), .mdp-picks .pgrid > :nth-child(5):last-child { display: none; }   /* MD 추천 상품 5·10개 → 4·8개 */
  .mdp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* 메인 판: 대표 칸이 위 가로 띠(사진 오른쪽 72px) + 상품 2열 × 2줄 */
  .mdb { grid-template-columns: 1fr; gap: 14px; }
  .mdb-cover { display: grid; grid-template-columns: minmax(0, 1fr) 72px; column-gap: 14px; padding: 16px; }
  .mdb-cover > * { grid-column: 1; }
  .mdb-cover .md-t { font-size: 18px; } .mdb-cover .md-t .t1 { font-size: 14px; }
  .mdb-sum { margin-top: 6px; font-size: 12.5px; }
  .mdb-cover .md-meta { margin-top: 6px; font-size: 12px; }
  .mdb-cover .md-ph { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; padding: 0; }
  .mdb-cover .md-ph img { width: 72px; height: 72px; padding: 6px; }
  body .mdb .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  body .mdb .pgrid > :nth-child(n+5) { display: none; }
  /* /md: 왼쪽 목록 → 위 가로 칩 */
  .mdp-wrap { grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
  .mdp-nav { position: static; flex-direction: row; gap: 6px; border-top: 0; overflow-x: auto; scrollbar-width: none; }
  .mdp-nav::-webkit-scrollbar { display: none; }
  .mdp-nav > b { display: none; }
  .mdp-nav a { flex: none; height: 34px; align-items: center; padding: 0 12px; border: 1px solid var(--g4); border-radius: var(--r-sm); font-size: 13px; background: #fff; }
  .mdp-band { gap: 12px; min-height: 0; padding: 16px; }
  .mdp-band .md-t { font-size: 19px; } .mdp-band .md-t .t1 { font-size: 14px; }
  .mdp-band p { font-size: 12.5px; }
  .mdp-band .md-ph img { width: 72px; height: 72px; padding: 6px; }
  .mdp-band .md-ph img:nth-child(n+2) { display: none; }
  .mdp-theme .pgrid > :nth-child(n+5) { display: none; }                 /* 폰: 테마마다 2열 × 2줄(다섯째가 혼자 한 줄에 남지 않게) */
  .mdp-hero { gap: 14px; min-height: 0; padding: 20px 16px; }
  .mdp-hero .md-t { font-size: 22px; } .mdp-hero .md-t .t1 { font-size: 16px; }
  .mdp-hero p { font-size: 13px; }
  .mdp-hero .md-ph img { width: 84px; height: 84px; padding: 6px; }
  .mdp-hero .md-ph img:nth-child(n+2) { display: none; }
  .mdp-tiles { gap: 10px; }
  .mdp-tile { padding: 14px 14px 12px; } .mdp-tile b { font-size: 15px; } .mdp-tile small { font-size: 12px; }
  .mdp-tile .md-ph { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 10px; }
  .mdp-tile .md-ph img:nth-child(3) { display: none; }
}