/* ============================================================
   구독 견적 시뮬레이터 (shop/simulator.php · m/shop/simulator.php)
   - PC·모바일 공용(반응형). 접두어 sopsim- 고정 (솔루션 basic.css 의 짧은 전역 클래스와 충돌 방지)
   - 결과 카드는 sop-main.css / sop-mobile.css 의 a.sop-card 스타일 재사용 + 약정·조건 줄만 추가
   - 색·폰트 변수는 sop-main.css(:root --sop-*) / sop-mobile.css 에서 옴
   ============================================================ */
.sopsim{ --sim-navy:#0f1c6e; --sim-blue:#2189ff; --sim-g50:#f8fafc; --sim-g100:#f3f4f6; --sim-g200:#e5e7eb; --sim-g400:#9ca3af; --sim-g500:#6b7280; --sim-g700:#374151; --sim-g900:#111827;
  font-family:var(--sop-font-kr, 'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif); color:var(--sim-g900); line-height:1.5; margin:8px 0 40px; }
.sopsim *{ box-sizing:border-box; }

/* ── 머리 ── */
.sopsim-head{ margin:0 0 24px; }
.sopsim-head h2{ font-size:28px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; color:var(--sim-g900); }
.sopsim-head p{ margin:0; font-size:14px; color:var(--sim-g500); }

/* ── 2열 (좌 필터 / 우 결과) ── */
.sopsim-body{ display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:28px; align-items:start; }
.sopsim-filters{ position:sticky; top:16px; display:flex; flex-direction:column; gap:14px; }

/* ── 단계 카드 ── */
.sopsim-step{ background:#fff; border:1px solid var(--sim-g200); border-radius:16px; padding:18px; transition:.15s; }
.sopsim-step.off{ display:none; }
.sopsim-step-hd{ display:grid; grid-template-columns:24px 1fr; column-gap:10px; align-items:center; margin-bottom:12px; }
.sopsim-step-hd i{ width:24px; height:24px; border-radius:50%; background:var(--sim-navy); color:#fff; font-style:normal; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.sopsim-step-hd b{ font-size:15px; font-weight:800; color:var(--sim-g900); }
.sopsim-step-hd span{ grid-column:2; font-size:12px; color:var(--sim-g500); margin-top:2px; }

/* ── 버튼 그룹 (상세 옵션 패널과 같은 룩) ── */
.sopsim-btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sopsim-btns.c2{ grid-template-columns:repeat(2,1fr); }
.sopsim-btns + .sopsim-btns{ margin-top:8px; }
.sopsim-btns button{ appearance:none; -webkit-appearance:none; border:1.5px solid var(--sim-g200); background:#fff; border-radius:12px; padding:11px 6px; font-size:14px; font-weight:700; color:var(--sim-g700); cursor:pointer; transition:.12s; line-height:1.3; text-align:center; min-height:44px; }
.sopsim-btns button small{ display:block; font-size:11px; font-weight:500; color:var(--sim-g400); margin-top:2px; }
.sopsim-btns button.on{ border-color:var(--sim-navy); background:var(--sim-navy); color:#fff; }
.sopsim-btns button.on small{ color:#aebcf5; }
.sopsim-btns button:disabled{ background:var(--sim-g50); color:var(--sim-g400); cursor:not-allowed; border-style:dashed; }
.sopsim-btns button:not(.on):not(:disabled):hover{ border-color:var(--sim-navy); }
.sopsim-note{ margin:10px 0 0; font-size:12px; color:var(--sim-g500); line-height:1.5; }
.sopsim-note a{ color:var(--sim-blue); font-weight:700; text-decoration:none; margin-left:4px; }
.sopsim-note a:hover{ text-decoration:underline; }

/* ── 결과 패널 ── */
.sopsim-results{ min-width:0; background:var(--sim-g50); border:1px solid var(--sim-g200); border-radius:16px; padding:20px; }
.sopsim-res-hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.sopsim-res-hd h3{ margin:0; font-size:18px; font-weight:800; color:var(--sim-g900); }
.sopsim-res-hd h3 em{ font-style:normal; font-size:13px; font-weight:700; color:var(--sim-blue); margin-left:4px; }
.sopsim-sort{ height:36px; border:1.5px solid var(--sim-g200); border-radius:10px; padding:0 10px; font-size:13px; font-weight:600; color:var(--sim-g700); background:#fff; }
.sopsim-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; min-height:0; }
.sopsim-chips span{ display:inline-block; padding:5px 10px; border-radius:999px; background:#fff; border:1px solid var(--sim-g200); font-size:12px; font-weight:600; color:var(--sim-g700); }
.sopsim-chips span.main{ background:var(--sim-navy); border-color:var(--sim-navy); color:#fff; }

.sopsim-list{ position:relative; min-height:200px; }
.sopsim-list.loading{ opacity:.45; pointer-events:none; }
.sopsim-list ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; list-style:none; margin:0; padding:0; }
.sopsim-list li{ border:0; width:auto; height:auto; margin:0; padding:0; float:none; min-width:0; }
.sopsim-empty{ padding:56px 16px; text-align:center; font-size:15px; font-weight:700; color:var(--sim-g700); }
.sopsim-empty small{ display:block; margin-top:6px; font-size:13px; font-weight:400; color:var(--sim-g500); }
.sopsim-empty .sopsim-btns.sug{ margin:16px auto 0; max-width:420px; }
.sopsim-retry{ margin-top:14px; border:1.5px solid var(--sim-navy); background:#fff; color:var(--sim-navy); border-radius:10px; padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; }
.sopsim-foot{ margin:16px 0 0; font-size:11.5px; color:var(--sim-g400); }

/* ── 결과 카드에 추가된 줄 (a.sop-card 의 dd order 체계에 맞춤: 스펙(2)·모델(3) 뒤, 가격(4) 앞) ── */
a.sop-card .sopsim-plan{ order:4; display:flex; flex-wrap:wrap; gap:4px; margin:10px 16px 0 !important; }
a.sop-card .sopsim-plan span{ display:inline-block; padding:2px 8px; border-radius:6px; background:#eff6ff; color:#1d4ed8; font-size:11px; font-weight:700; line-height:1.5; }
a.sop-card .sopsim-cond{ order:5; margin:4px 16px 0 !important; font-size:11.5px; color:var(--sim-g500); }
a.sopsim-card .price1 .tit{ display:block !important; font-size:11px; font-weight:600; color:var(--sim-g500); margin-bottom:2px; }
a.sopsim-card .price2{ color:var(--sim-g500) !important; font-weight:500 !important; }
a.sopsim-card .price2 .tit{ font-weight:600; }
a.sopsim-card .price2 .spr{ font-weight:600 !important; color:var(--sim-blue) !important; }

/* ── 반응형: 900px 이하 1열 (모바일 스킨은 항상 이 레이아웃) ── */
@media (max-width:900px){
  .sopsim-body{ grid-template-columns:1fr; gap:16px; }
  .sopsim-filters{ position:static; }
  .sopsim-head h2{ font-size:22px; }
  .sopsim-list ul{ grid-template-columns:repeat(2,1fr); gap:12px; }
}
.sopsim-m{ margin:0 0 24px; padding:0 12px; }
.sopsim-m .sopsim-body{ grid-template-columns:1fr; gap:14px; }
.sopsim-m .sopsim-filters{ position:static; gap:12px; }
.sopsim-m .sopsim-step{ padding:14px; border-radius:14px; }
.sopsim-m .sopsim-btns button{ font-size:13px; padding:10px 4px; }
.sopsim-m .sopsim-results{ padding:14px; border-radius:14px; }
.sopsim-m .sopsim-list ul{ grid-template-columns:repeat(2,1fr); gap:10px; }
.sopsim-m a.sop-card .sopsim-plan{ margin:8px 12px 0 !important; }
.sopsim-m a.sop-card .sopsim-cond{ margin:3px 12px 0 !important; font-size:11px; }
@media (max-width:360px){
  .sopsim-btns{ grid-template-columns:repeat(2,1fr); }
}