@charset "UTF-8";

/* Mshop 기기 비교 공용 모듈 (스킨 독립) — device-compare.js 와 한 쌍.
   색상은 --mshop-* → --mublo-* → 폴백 순으로 프레임 토큰을 따른다. */

/* 목록 스킨은 --mshop-color-primary 를 정의하지 않으므로,
   프레임 스킨이 소유한 --primary 에 바인딩해 색상을 통일한다.
   (도메인 --mublo-color-primary 가 있으면 그 값이 우선) */
:root {
    --mshop-color-primary: var(--mublo-color-primary, var(--primary, #2563eb));
}

/* ── 카드 토글 ── */
.mv-cmp-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 11px; border: 1px solid var(--mshop-border-default, var(--mublo-border-default, #ddd));
    border-radius: 99px; background: var(--mshop-bg-surface, var(--mublo-bg-surface, #fff));
    color: var(--mshop-text-tertiary, var(--mublo-text-tertiary, #555));
    font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .12s;
}
.mv-cmp-toggle:hover { border-color: var(--mshop-color-primary, var(--mublo-color-primary, #2563eb)); color: var(--mshop-color-primary, var(--mublo-color-primary, #2563eb)); }
.mv-cmp-toggle.is-active {
    border-color: var(--mshop-color-primary, var(--mublo-color-primary, #2563eb));
    background: var(--mshop-color-primary, var(--mublo-color-primary, #2563eb));
    color: var(--mshop-text-inverse, var(--mublo-text-inverse, #fff));
}

/* 기본 스킨 카드 내 배치 (이미지 우상단) — 다른 스킨은 자유롭게 재배치 */
.p-media .mv-cmp-toggle,
.md-promo-image-wrap .mv-cmp-toggle { position: absolute; top: 10px; right: 10px; z-index: 3; }

/* ── 비교 독 (하단 고정) ── */
.mv-cmp-dock {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 990;
    display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
    padding: 10px 12px 10px 14px; border-radius: 16px;
    background: var(--mshop-text-primary, var(--mublo-text-primary, #16181d)); color: #fff;
    box-shadow: 0 14px 40px rgba(10, 12, 18, .32);
}
/* display:flex 가 UA 의 [hidden]{display:none} 을 이기므로 명시적으로 되살린다 */
.mv-cmp-dock[hidden] { display: none; }
.mv-cmp-items { display: flex; gap: 8px; overflow-x: auto; }
.mv-cmp-item {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    padding: 5px 8px; border-radius: 10px; background: rgba(255, 255, 255, .1); font-size: 12px;
}
.mv-cmp-item img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; background: #fff; }
.mv-cmp-item em { font-style: normal; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-cmp-item button { border: 0; background: none; color: rgba(255, 255, 255, .6); font-size: 14px; cursor: pointer; padding: 0 2px; }
.mv-cmp-item button:hover { color: #fff; }
.mv-cmp-thumb-ph { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, .15); font-size: 13px; }
.mv-cmp-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.mv-cmp-open {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 0; border-radius: 10px;
    background: var(--mshop-color-primary, var(--mublo-color-primary, #2563eb)); color: #fff;
    font-size: 13px; font-weight: 800; cursor: pointer;
}
.mv-cmp-open b { font-weight: 800; opacity: .8; }
.mv-cmp-open:disabled { opacity: .45; cursor: not-allowed; }
.mv-cmp-clear { padding: 9px 12px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); font-size: 12.5px; cursor: pointer; }

/* ── 비교표 (MubloModal content 로 렌더 — 모달 크롬은 mublo-modal.css 가 담당) ── */
.mv-cmp-scroll { overflow: auto; }
.mv-cmp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mv-cmp-table thead th { padding: 16px 10px 12px; border-bottom: 2px solid var(--mshop-text-primary, var(--mublo-text-primary, #111827)); vertical-align: bottom; }
.mv-cmp-head { display: grid; justify-items: center; gap: 8px; text-align: center; }
.mv-cmp-head img { width: 72px; height: 72px; object-fit: contain; }
.mv-cmp-head .mv-cmp-thumb-ph { width: 72px; height: 72px; font-size: 26px; background: var(--mshop-bg-subtle, var(--mublo-bg-subtle, #f8f9fa)); }
.mv-cmp-head strong { font-size: 13.5px; }
.mv-cmp-head a { color: inherit; text-decoration: underline; }
.mv-cmp-table tbody th { width: 130px; padding: 11px 10px; text-align: left; font-size: 12px; color: var(--mshop-text-muted, var(--mublo-text-muted, #888)); border-bottom: 1px solid var(--mshop-border-subtle, var(--mublo-border-subtle, #f0f0f0)); }
.mv-cmp-table tbody td { padding: 11px 10px; text-align: center; border-bottom: 1px solid var(--mshop-border-subtle, var(--mublo-border-subtle, #f0f0f0)); }
.mv-cmp-strong { color: var(--mshop-color-primary, var(--mublo-color-primary, #2563eb)); font-weight: 800; }
.mv-cmp-note { margin: 0; padding: 12px 0 0; color: var(--mshop-text-muted, var(--mublo-text-muted, #888)); font-size: 11.5px; }

@media (max-width: 640px) {
    .mv-cmp-dock { bottom: 12px; gap: 8px; }
    .mv-cmp-item em { max-width: 64px; }
    .mv-cmp-table tbody th { width: 92px; }
}