/* ─────────────────────────────────────────────────────────────
   문성전자 — 상품 카드 (파스텔 타일, ms-card)
   시안: docs/design/card-pastel-draft.html (2026-09-08 확정) · PC·모바일 공용
   ───────────────────────────────────────────────────────────── */
.ms-card{--mc-navy:#0f1c6e;--mc-ink:#1b2440;--mc-mute:#5d6680;--mc-line:#e6e9f2;--mc-blue:#1a6ad0;--mc-gold:#f4b400;
  --mc-en:'Samsung Sharp Sans','Samsung One Korean',sans-serif;
  display:block;position:relative;text-decoration:none !important;color:var(--mc-ink);background:#fff;border-radius:20px;border:1px solid var(--mc-line);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;line-height:1.5;text-align:left}
.ms-card span{display:block}
.ms-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(15,28,110,.10);color:var(--mc-ink)}
.ms-card:focus-visible{outline:3px solid rgba(31,124,240,.45);outline-offset:2px}
/* 사진 타일 */
.ms-card .ms-tile{position:relative;aspect-ratio:1/1;background:#f1f3f7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ms-card .ms-tile.fridge{background:#e3efff}.ms-card .ms-tile.kimchi{background:#e4f7ee}.ms-card .ms-tile.dish{background:#ffe9d6}.ms-card .ms-tile.induct{background:#ece8ff}
/* 기본(연출 사진): 타일 가득 채움. 관리자 설정 '누끼'면 .cut — 파스텔 타일 위에 상품만 + 바닥 그림자 */
.ms-card .ms-tile img{position:relative;width:100% !important;height:100% !important;object-fit:cover;transition:transform .35s cubic-bezier(.2,.8,.2,1);margin:0}
.ms-card:hover .ms-tile img{transform:scale(1.03)}
/* 누끼 모드는 타일 색을 한 단계 진하게 — 옅은 파스텔은 흰 카드와 구분이 안 됨 (2026-09-08) */
.ms-card .ms-tile.cut{background:#e9ecf3}
.ms-card .ms-tile.fridge.cut{background:#d5e5ff}.ms-card .ms-tile.kimchi.cut{background:#cfeee0}.ms-card .ms-tile.dish.cut{background:#ffdfc4}.ms-card .ms-tile.induct.cut{background:#e0d9ff}
.ms-card .ms-tile.cut:before{content:'';position:absolute;left:14%;right:14%;bottom:12%;height:10%;border-radius:50%;background:rgba(15,28,110,.12);filter:blur(10px)}
.ms-card .ms-tile.cut img{width:72% !important;height:72% !important;object-fit:contain;mix-blend-mode:multiply;margin:0 auto}
.ms-card:hover .ms-tile.cut img{transform:translateY(-4px) scale(1.03)}
/* 라벨 */
.ms-card .ms-labels{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:5px;z-index:2}
.ms-card .ms-label{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:-.2px;background:#fff;color:var(--mc-navy);box-shadow:0 2px 8px rgba(15,28,110,.08)}
.ms-card .ms-label.sale{background:var(--mc-blue);color:#fff}
.ms-card .ms-label.partner:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mc-blue)}
/* 정보 */
.ms-card .ms-body{padding:14px 16px 16px}
.ms-card .ms-name{font-size:14.5px;font-weight:700;line-height:1.4;color:var(--mc-ink);letter-spacing:-.3px;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ms-card .ms-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;min-height:20px}
.ms-card .ms-color{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--mc-mute)}
.ms-card .ms-color i{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.ms-card .ms-chip{display:inline-block;font-size:11px;color:var(--mc-mute);background:#f4f6fb;border-radius:6px;padding:2px 7px}
.ms-card .ms-sku{margin-top:6px;font-family:var(--mc-en);font-size:10.5px;letter-spacing:.04em;color:#a0a7ba}
.ms-card .ms-price{margin-top:12px;padding-top:12px;border-top:1px dashed var(--mc-line);display:flex;align-items:baseline;gap:6px}
.ms-card .ms-price .l{font-size:11.5px;color:var(--mc-mute)}
.ms-card .ms-price .v{font-family:var(--mc-en);font-size:22px;line-height:1;color:var(--mc-navy);margin-left:auto}
.ms-card .ms-price .v small{display:inline;font-family:'Samsung One Korean',sans-serif;font-size:13px;font-weight:700;color:var(--mc-ink)}
.ms-card .ms-price .v.soon{font-family:inherit;font-size:14px;color:var(--mc-mute)}
.ms-card .ms-benefit{margin-top:8px;display:inline-flex;align-items:baseline;gap:6px;height:24px;line-height:24px;padding:0 9px;border-radius:9999px;background:#eaf3ff;color:var(--mc-blue);font-size:11.5px;font-weight:700;white-space:nowrap}
.ms-card .ms-benefit b{font-family:var(--mc-en);font-size:12.5px;line-height:inherit}
.ms-card .ms-benefit.alt{background:#fff6e0;color:#a06a00}
.ms-card .ms-cond{margin-top:6px;font-size:11px;color:var(--mc-mute)}
.ms-card .ms-point{margin-top:7px;font-size:11.5px;color:var(--mc-mute)}
.ms-card .ms-point:before{content:'P';display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--mc-gold);color:#fff;font-family:var(--mc-en);font-size:9px;margin-right:5px;vertical-align:1px}

@media (prefers-reduced-motion:reduce){.ms-card,.ms-card .ms-tile img{transition:none}}
@media (max-width:640px){
  .ms-card{border-radius:16px}
  .ms-card .ms-body{padding:10px 11px 12px}
  .ms-card .ms-name{font-size:13px}
  .ms-card .ms-chip{display:none}
  .ms-card .ms-sku{font-size:10px}
  /* 2열(카드 폭 ~160px)에서는 라벨·금액을 세로로 쌓고, 혜택 알약은 줄바꿈 허용 (2026-09-09 점검) */
  .ms-card .ms-price{flex-direction:column;align-items:flex-start;gap:2px}
  .ms-card .ms-price .l{font-size:11px;white-space:nowrap}
  .ms-card .ms-price .v{font-size:19px;margin-left:0}
  .ms-card .ms-benefit{display:inline-flex;flex-wrap:wrap;height:auto;min-height:22px;line-height:1.3;font-size:10.5px;padding:3px 8px;border-radius:12px;white-space:normal;max-width:100%;box-sizing:border-box;gap:3px}
  .ms-card .ms-benefit b{font-size:11.5px}
  .ms-card .ms-labels{left:8px;top:8px}
  .ms-card .ms-label{height:20px;font-size:10.5px;padding:0 7px}
}

/* 월 0원 (2026-09-28 문성 요청 → 같은 날 시안 A '샴페인 골드', docs/design/zero-highlight-draft.html)
   카드 할인이 구독료 이상인 상품. 라벨은 0원딜 페이지에서만. 빨강 대신 네이비 + 골드 한 점 */
/* 사진 위 '월 0원' 라벨 — 2026-09-30 아래 띠와 같은 아이보리 골드로 통일.
   ⚠ 라벨 묶음(.ms-labels)이 세로 flex 라 '공식파트너'와 같이 있으면 그 폭(73px)으로 늘어나 카드마다 크기가 달랐다(혼자면 46px)
     → 이 라벨만 align-self:flex-start. 다른 라벨의 늘어나는 모양은 그대로 둔다.
   ⚠ 반응형 층의 768px 이하 10px !important(span.ms-labels > span.ms-label.zero · span.ms-label > b)를 이기려고 선택자를 한 단계 더 구체적으로 */
.ms-card .ms-labels > .ms-label.zero{align-self:flex-start;gap:4px;height:24px;padding:0 9px 0 8px;border-radius:7px;
  background:linear-gradient(180deg,#fffaf0 0%,#fbf1dc 100%);box-shadow:inset 0 0 0 1px #ead7a6,0 3px 10px rgba(107,90,46,.14);
  color:#6b5a2e;font-size:12px !important;font-weight:700;letter-spacing:-.2px}
.ms-card .ms-labels > .ms-label.zero:before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#e9c77a,#b8872f)}
.ms-card .ms-labels > .ms-label.zero b{font-family:var(--mc-en);color:#0f1c6e;font-size:14px !important;font-weight:800;line-height:1}
@media (max-width:640px){
  .ms-card .ms-labels > .ms-label.zero{height:22px;padding:0 8px 0 7px;font-size:11px !important}
  .ms-card .ms-labels > .ms-label.zero b{font-size:13px !important}
}
/* 카드 아래 '제휴카드 적용 시 월 0원~' 띠 — 2026-09-30 시안 A '아이보리 골드'(docs/design/zero-benefit-v2-draft.html)로 교체.
   예전 남색 띠 + 그라데이션 금색 글씨는 css/ms-responsive.css 의 글자 대비 일괄 보정(.ms-body .ms-benefit · .ms-benefit b
   {color:#1661c8 !important}, 768px 이하 10px/12px !important)에 덮여 남색 위 파란 글씨(대비 2.5:1)가 됐다.
   ⚠ 그 보정 규칙보다 구체적인 선택자(.ms-card .ms-body …) + !important 로 이긴다 — 선택자를 줄이면 다시 덮인다.
   밝은 샴페인 띠 + 금색 점 + 네이비 숫자(13.6:1) · 갈색 문구(6.1:1). 좁은 카드(1024px 이하, 카드 폭 ~170px)는 문구 위 · 금액 아래 두 줄 */
.ms-card .ms-body .ms-benefit.zero{display:flex !important;align-items:center;justify-content:space-between;gap:8px;height:auto;min-height:0;line-height:1.2;white-space:nowrap;
  margin-top:10px;padding:10px 12px 10px 13px;border-radius:12px;max-width:none;box-sizing:border-box;
  background:linear-gradient(180deg,#fffaf0 0%,#fbf1dc 100%) !important;box-shadow:inset 0 0 0 1px #ead7a6;
  color:#6b5a2e !important;font-size:12px !important;font-weight:600}
.ms-card .ms-body .ms-benefit.zero > span{display:inline-flex;align-items:center;gap:6px;color:#6b5a2e !important;font-size:12px !important}
.ms-card .ms-body .ms-benefit.zero > span:before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#e9c77a,#b8872f)}
.ms-card .ms-body .ms-benefit.zero b{font-family:var(--mc-en);font-size:20px !important;font-weight:800;line-height:1;letter-spacing:-.3px;white-space:nowrap;
  background:none !important;-webkit-text-fill-color:currentColor;color:#0f1c6e !important}
.ms-card .ms-body .ms-benefit.zero b small{font-family:'Samsung One Korean',sans-serif;color:#8a6d2b;font-size:12px;font-weight:700;margin-left:1px}
@media (max-width:1024px){
  .ms-card .ms-body .ms-benefit.zero{flex-direction:column;align-items:flex-start;gap:3px;padding:8px 9px 9px;border-radius:10px;font-size:11px !important}
  .ms-card .ms-body .ms-benefit.zero > span{font-size:11px !important;gap:4px}
  .ms-card .ms-body .ms-benefit.zero b{font-size:16px !important}
}

/* ── 2026-10-01 문성(천동원) 요청 6·7 — 가격 묶음 현성 구성 + 카드 높이 통일 (시안 docs/design/card-price-v3-draft.html) ──
   마크업 extend/ms.card.php .ms-pb : r1(약정·케어 | 정상가 취소선) → r2(월 구독료 →) → box(태그 + 카드 적용가 크게) → pt(포인트, 없으면 빈 자리)
   줄 수가 늘 같아 같은 줄 카드의 높이가 같다. 칸(li·.prli)은 세로 flex — 카드가 칸 높이를 채우고 버튼은 맨 아래 */
:is(li,div):has(> a.ms-card){display:flex;flex-direction:column}
.pr_slide .prli:has(> a.ms-card){display:flex !important}   /* slick 이 칸에 inline-block 을 인라인으로 넣는다 */
:is(li,div):has(> a.ms-card) > a.ms-card{flex:1 1 auto;display:flex;flex-direction:column}
.ms-card .ms-body{flex:1 1 auto;display:flex;flex-direction:column}
.ms-card .ms-pb{margin-top:auto;padding-top:12px;border-top:1px dashed var(--mc-line)}
.ms-card .ms-pb .r1{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:12px;color:var(--mc-mute);white-space:nowrap}
.ms-card .ms-pb .r1 .l{display:inline;overflow:hidden;text-overflow:ellipsis}
.ms-card .ms-pb .r1 s{color:#8a91a5;flex:none}
.ms-card .ms-pb .r2{margin-top:5px;min-height:20px;font-size:13px;color:var(--mc-ink)}
.ms-card .ms-pb .r2 b{display:inline;font-family:var(--mc-en);font-size:15px}
.ms-card .ms-pb .r2 i{font-style:normal;color:#8a91a5}
.ms-card .ms-pb .box{margin-top:9px;background:#f2f7ff;border:1px solid #d6e6fb;border-radius:12px;padding:8px 12px 10px}
.ms-card .ms-pb .tag{font-size:12px;font-weight:700;color:var(--mc-blue);line-height:1.3}
.ms-card .ms-pb .fin{margin-top:3px;display:flex;align-items:baseline;gap:3px;color:var(--mc-blue);white-space:nowrap}
.ms-card .ms-pb .fin span{display:inline;font-size:13px;font-weight:700}
.ms-card .ms-pb .fin b{font-family:var(--mc-en);font-size:27px;line-height:1.05;letter-spacing:-.5px}
.ms-card .ms-pb .fin small{font-size:13px;font-weight:700}
/* 0원 — 아이보리 골드 유지 (2026-09-30) */
.ms-card .ms-pb.zero .box{background:linear-gradient(135deg,#fffaf0,#fbf1dc);border-color:#ecd9ae}
.ms-card .ms-pb.zero .tag{color:#6b5a2e}
.ms-card .ms-pb.zero .fin{color:#7a5a18}
/* 카드 할인 없음·준비 중 */
.ms-card .ms-pb.none .r2{font-size:12px;color:var(--mc-mute)}
.ms-card .ms-pb.none .tag{color:var(--mc-mute)}
.ms-card .ms-pb.none .fin{color:var(--mc-navy)}
.ms-card .ms-pb.soon .fin b{font-family:inherit;font-size:18px;color:var(--mc-mute)}
.ms-card .ms-pb .pt{margin-top:8px;min-height:17px;font-size:12px;color:var(--mc-mute)}
.ms-card .ms-pb .pt.on:before{content:'P';display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--mc-gold);color:#fff;font-family:var(--mc-en);font-size:9px;margin-right:5px;vertical-align:1px}
@media (max-width:768px){
  .ms-card .ms-pb{padding-top:10px}
  .ms-card .ms-pb .r1{flex-direction:column;align-items:flex-start;gap:1px}
  .ms-card .ms-pb .r1 .l{max-width:100%}
  .ms-card .ms-pb .r2{font-size:12px}
  .ms-card .ms-pb .r2 b{font-size:14px}
  .ms-card .ms-pb .box{padding:7px 9px 8px;border-radius:10px}
  .ms-card .ms-pb .tag{font-size:10px}
  .ms-card .ms-pb .fin b{font-size:20px}
  .ms-card .ms-pb .fin span,.ms-card .ms-pb .fin small{font-size:12px}
  .ms-card .ms-pb .pt{font-size:10px;min-height:14px}
}

/* ── 카드 사진 위 마크 (2026-10-01 문성 요청 — 평강 방식, 관리자 상품 수정 > 카드 플래그) · 출력 ms_card_marks_html() ──
   공식파트너 = 오른쪽 위 엠블럼(img/ms-partner-emblem.png, 원본 그대로) · 구독 혜택/구독료 지원 = 왼쪽 아래 상자.
   처음 등록한 문성 썸네일(마크가 사진에 박힌 18개)과 같은 자리·모양 */
.ms-card .ms-emblem{position:absolute;top:2.5%;right:2.5%;width:25%;z-index:2;pointer-events:none}   /* 사진에 박힌 18개와 같은 비율 (360 사진 기준 약 90px · 모서리 9px) */
.ms-card .ms-tile .ms-emblem img,.ms-card .ms-tile.cut .ms-emblem img{display:block;position:static;width:100% !important;height:auto !important;margin:0;object-fit:contain;mix-blend-mode:normal;transform:none !important;transition:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
/* 2026-10-23 문성(천동원) 요청 "배너가 제품을 가리지 않게" — 상자를 줄여 카드 사진 기준선(제품 높이 64.6% · 가운데) 밖에 둔다.
   PC 는 사진 폭의 약 27%(왼쪽 3%~30%), 768 이하는 셋째 줄을 빼고 약 30% — 사진 쪽은 마크 자리를 피해 다시 만들었다(docs/design/card-thumb/) */
.ms-card .ms-bdg{position:absolute;left:3%;bottom:3%;display:flex;flex-direction:column;gap:3px;z-index:2;pointer-events:none}
.ms-card .ms-bdg span{min-width:0;padding:4px 6px;display:flex;flex-direction:column;align-items:center;border-radius:5px;background:#fff;border:1.5px solid #1428a0;color:#1428a0;text-align:center;white-space:nowrap;line-height:1.25}
.ms-card .ms-bdg span.on{background:#1428a0;color:#fff}
.ms-card .ms-bdg i,.ms-card .ms-bdg b{display:block;font-style:normal;color:inherit}
.ms-card .ms-bdg i{font-size:10px;font-weight:400}
.ms-card .ms-bdg i.s{font-size:8.5px;opacity:.85}
.ms-card .ms-bdg b{font-size:12.5px;font-weight:700;line-height:1.2}
@media (max-width:768px){
  .ms-card .ms-bdg{left:4px;bottom:4px;gap:2px}
  .ms-card .ms-bdg span{padding:2px 4px;border-radius:4px;border-width:1px}
  .ms-card .ms-bdg i{font-size:8px}
  .ms-card .ms-bdg i.s{display:none}
  .ms-card .ms-bdg b{font-size:10px}
}