/* ─────────────────────────────────────────────────────────────
   평강프라자 — 구독 견적 시뮬레이터 (조건표 = 흰 판 + 핀, 사각 hairline 칩, hairline 요약 줄)
   시안: docs/design/sim-hero-draft.html 1번 (2026-09-15 확정) · 마크업 theme/basic/simulator.skin.php · m/…
   케이디엘 css/sop-sim.css 위에 얹는다 (.sopsim.pk-simc 범위). 케이디엘 id·버튼 data-k 그대로, 문성 js/pk-sim.js 재사용
   (#pkSimStrip · .pk-val · 칩 아이콘 .ic · .done 은 그 JS 가 붙임 — 여기서 단색으로 스타일링).
   글자 크기: 삼성 가이드 타입 스케일 (14/12px, 제목 28px, 행간 1.33)
   ───────────────────────────────────────────────────────────── */
.sopsim.pk-simc{line-height:1.33;color:var(--pk-ink);font-family:var(--pk-kr)}
.sopsim.pk-simc button{font-family:inherit}

/* ── 페이지 헤더 (메인 pk-sh 문법) ── */
.pk-simc .pk-sh{border-top:1px solid var(--pk-ink);padding-top:22px;margin:0 0 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.pk-simc .pk-sh .eb{font-family:var(--pk-en);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-blue)}
.pk-simc .pk-sh h2{margin:8px 0 0;font-size:28px;font-weight:700;letter-spacing:-.6px;color:var(--pk-ink);line-height:1.33;display:block;padding:0}
.pk-simc .pk-sh .ds{margin:4px 0 0;font-size:14px;color:var(--pk-mute)}
.pk-simc .sopsim-head{margin:0 0 14px}
.pk-simc .sopsim-head p{font-size:12px;color:var(--pk-mute)}

/* ── 조건표 (케이디엘 .sopsim-filters > section.sopsim-step 재활용) ── */
.pk-simc .sopsim-body{display:block}
.pk-simc .sopsim-filters{position:relative;top:auto;display:block;border:1px solid var(--pk-line);border-radius:var(--pk-r);background:#fff;box-shadow:none;overflow:visible;gap:0}
.pk-simc .sopsim-filters:before{content:'';position:absolute;top:-1px;left:24px;width:28px;height:3px;background:var(--pk-blue)}   /* 핀 */
.pk-simc .sopsim-step{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:20px;padding:18px 24px;border:0;border-radius:0;background:none}
.pk-simc .sopsim-step + .sopsim-step{border-top:1px solid var(--pk-line)}
.pk-simc .sopsim-step.off{display:none}
/* 라벨 셀 */
.pk-simc .sopsim-step-hd{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:0;align-items:center;margin:0}
.pk-simc .sopsim-step-hd i{grid-row:1/3;width:28px;height:28px;border-radius:var(--pk-r);background:#fff;border:1px solid var(--pk-line);color:var(--pk-mute);font-family:var(--pk-en);font-size:12px;font-weight:700;display:grid;place-items:center;flex:none;font-style:normal;transition:all .2s}
.pk-simc .sopsim-step.done .sopsim-step-hd i{background:var(--pk-blue);border-color:var(--pk-blue);color:#fff}
.pk-simc .sopsim-step-hd b{font-size:14px;color:var(--pk-ink);font-weight:700;display:flex;align-items:center;gap:8px}   /* 강조 개편: 단계 아이콘 */
.pk-simc .sopsim-step-hd span{display:block;grid-column:auto;font-size:12px;color:var(--pk-mute);margin:2px 0 0}
.pk-simc .sopsim-step-hd .pk-val{color:var(--pk-blue);font-weight:700;font-style:normal}
.pk-simc .sopsim-step-hd .pk-val.na{color:var(--pk-mute);font-weight:400}
/* 칩 셀 */
.pk-simc .sopsim-btns{display:flex;flex-wrap:wrap;gap:6px}
.pk-simc .sopsim-btns + .sopsim-btns{margin-top:10px;padding-top:10px;border-top:1px solid var(--pk-line)}
.pk-simc .sopsim-btns button{border:1px solid var(--pk-line);background:#fff;border-radius:var(--pk-r);min-height:42px;padding:0 14px 0 6px;font-size:14px;font-weight:700;color:var(--pk-ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1.33;text-align:left;transition:border-color .15s,color .15s,box-shadow .15s;transform:none !important}
.pk-simc .sopsim-btns button small{display:inline;font-size:12px;font-weight:400;color:var(--pk-mute);margin:0}
.pk-simc .sopsim-btns button small em{font-style:normal;color:var(--pk-blue);font-weight:700}
.pk-simc .sopsim-btns button:hover:not(:disabled):not(.on){border-color:var(--pk-ink)}
.pk-simc .sopsim-btns button.on{background:#fff;border-color:var(--pk-blue);color:var(--pk-blue);box-shadow:inset 0 0 0 1px var(--pk-blue)}
.pk-simc .sopsim-btns button.on small{color:var(--pk-blue);opacity:.8}
.pk-simc .sopsim-btns button.on small em{color:var(--pk-blue)}
.pk-simc .sopsim-btns button:disabled{border-style:dashed;background:#fff;color:var(--pk-mute);cursor:not-allowed}
.pk-simc .sopsim-btns button:disabled small,.pk-simc .sopsim-btns button:disabled small em{color:var(--pk-mute)}
/* 칩 아이콘 (js/pk-sim.js decorate) — 단색 */
.pk-simc .sopsim-btns button .ic{width:30px;height:30px;border-radius:var(--pk-r);background:var(--pk-concrete);display:grid;place-items:center;overflow:hidden;flex:none;font-style:normal}
.pk-simc .sopsim-btns button.on .ic{background:var(--pk-blue-tint)}
.pk-simc .sopsim-btns button .ic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:3px;display:block}
.pk-simc .sopsim-btns button .ic .dot{width:6px;height:6px;border-radius:50%;background:var(--pk-mute)}
.pk-simc .sopsim-btns button .ic svg{width:16px;height:16px;stroke:var(--pk-ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pk-simc .sopsim-btns button.on .ic svg{stroke:var(--pk-blue)}
.pk-simc .sopsim-btns button .ic.card .cc{width:20px;height:14px;border-radius:2px;position:relative;display:block}
.pk-simc .sopsim-btns button .ic.card .cc span{position:absolute;left:0;right:0;top:4px;height:3px;background:rgba(255,255,255,.7)}
.pk-simc .sopsim-btns button .ic.band svg rect{fill:var(--pk-line);stroke:none}
.pk-simc .sopsim-btns button .ic.band svg rect.on{fill:var(--pk-ink)}
.pk-simc .sopsim-btns button.on .ic.band svg rect.on{fill:var(--pk-blue)}
.pk-simc .sopsim-btns button .ic.band svg .ln{stroke:var(--pk-ink)}
.pk-simc .sopsim-btns button:disabled .ic.band svg rect.on{fill:var(--pk-line)}
.pk-simc .sopsim-btns button .ic.pre svg circle{fill:none;stroke-width:3}
.pk-simc .sopsim-btns button .ic.pre svg .bg{stroke:var(--pk-line)}
.pk-simc .sopsim-btns button .ic.pre svg .fg{stroke:var(--pk-ink)}
/* 선납 = 사각 세그먼트 */
.pk-simc #simPre{display:inline-flex;gap:0;padding:0;border-radius:var(--pk-r);background:#fff;border:1px solid var(--pk-line);overflow:hidden}
.pk-simc #simPre button{border:0;border-radius:0;background:transparent;min-height:38px;padding:0 14px;box-shadow:none;color:var(--pk-mute)}
.pk-simc #simPre button + button{border-left:1px solid var(--pk-line)}
.pk-simc #simPre button .ic{background:transparent;width:20px;height:20px}
.pk-simc #simPre button .ic svg{width:18px;height:18px}
.pk-simc #simPre button.on{background:#fff;color:var(--pk-blue);box-shadow:inset 0 -2px 0 var(--pk-blue)}
.pk-simc #simPre button.on small{color:var(--pk-blue);opacity:.8}
.pk-simc #simPre button.on .ic.pre svg .fg{stroke:var(--pk-blue)}
.pk-simc .sopsim-note{margin:10px 0 0;font-size:12px;color:var(--pk-mute)}

/* ── 요약 줄 (#pkSimStrip, 값은 js/pk-sim.js) ── */
.pk-simstrip{display:flex;align-items:center;gap:16px;margin-top:20px;padding:14px 0 0;border-top:0;border-radius:var(--pk-r);background:var(--pk-blue-tint);padding:14px 16px;color:var(--pk-ink)}
.pk-simstrip .sum{font-size:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.pk-simstrip .sum b{font-family:var(--pk-en);font-size:22px;color:var(--pk-blue)}
.pk-simstrip .sum span{white-space:nowrap}
.pk-simstrip .cond{font-size:12px;color:var(--pk-mute)}
.pk-simstrip .reset{margin-left:auto;border:0;background:transparent;color:var(--pk-mute);font-size:12px;text-decoration:underline;cursor:pointer;white-space:nowrap}
.pk-simstrip .go{height:40px;padding:0 18px;border-radius:var(--pk-r);border:0;background:var(--pk-blue);color:#fff;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s}
.pk-simstrip .go:hover{background:var(--pk-blue-ink)}

/* ── 결과 — 전체 폭 ── */
.pk-simc .sopsim-results{background:none;border:0;padding:0;margin-top:40px;border-top:1px solid var(--pk-ink);padding-top:22px;border-radius:0}
.pk-simc .sopsim-res-hd{align-items:flex-end;margin-bottom:20px}
.pk-simc .sopsim-res-hd h3{font-size:24px;color:var(--pk-ink);font-weight:700;letter-spacing:-.5px}
.pk-simc .sopsim-res-hd h3:before{content:'Results';display:block;font-family:var(--pk-en);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-blue);margin-bottom:8px}
.pk-simc .sopsim-res-hd h3 em{font-family:var(--pk-en);font-size:18px;color:var(--pk-blue);font-weight:700;margin-left:6px}
.pk-simc .sopsim-sort{height:34px;border:1px solid var(--pk-line);border-radius:var(--pk-r);padding:0 30px 0 12px;font-size:12px;font-weight:400;color:var(--pk-ink);appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111214' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>") right 10px center/12px no-repeat;font-family:inherit}
.pk-simc .sopsim-chips{display:none !important}   /* 케이디엘 조건 칩 줄 — 요약 줄과 중복이라 숨김 */
.pk-simc .sopsim-list ul{grid-template-columns:repeat(4,1fr);gap:24px}
.pk-simc .sopsim-empty{border:1px dashed var(--pk-line);border-radius:var(--pk-r);font-size:14px;color:var(--pk-ink);background:#fff}
.pk-simc .sopsim-empty small{font-size:12px;color:var(--pk-mute)}
.pk-simc .sopsim-empty .sopsim-btns.sug{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:none}
.pk-simc .sopsim-foot{font-size:12px;color:var(--pk-mute)}

/* ── 모바일 ── */
.sopsim-m.pk-simc .sopsim-step{grid-template-columns:1fr;gap:10px;padding:14px}
.sopsim-m.pk-simc .sopsim-step-hd i{width:24px;height:24px}
.sopsim-m.pk-simc .sopsim-btns{flex-wrap:nowrap;overflow:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px 2px}
.sopsim-m.pk-simc .sopsim-btns::-webkit-scrollbar{display:none}
.sopsim-m.pk-simc .sopsim-btns button{flex:none;min-height:38px;font-size:12px;padding:0 12px 0 5px}
.sopsim-m.pk-simc .sopsim-btns button .ic{width:26px;height:26px}
.sopsim-m.pk-simc .sopsim-btns + .sopsim-btns{margin:10px -14px 0;padding:10px 14px 2px}
.sopsim-m.pk-simc #simPre{display:flex;width:100%}
.sopsim-m.pk-simc #simPre button{flex:1;min-height:34px;padding:0 6px;font-size:12px;justify-content:center}
.sopsim-m.pk-simc #simPre button small{display:none}
.sopsim-m.pk-simc .pk-simstrip{flex-wrap:wrap;gap:8px}
.sopsim-m.pk-simc .pk-simstrip .go{width:100%;order:3}
.sopsim-m.pk-simc .pk-simstrip .cond{width:100%}
.sopsim-m.pk-simc .sopsim-results{margin-top:24px;padding-top:16px}
.sopsim-m.pk-simc .sopsim-res-hd h3{font-size:20px}
.sopsim-m.pk-simc .sopsim-list ul{grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:900px){
  .pk-simc .sopsim-step{grid-template-columns:1fr;gap:10px}
  .pk-simc .sopsim-list ul{grid-template-columns:repeat(2,1fr)}
  .pk-simc .pk-simstrip{flex-wrap:wrap}
}

/* 가이드 타입 스케일 점검(2026-09-15) */
.pk-simc select,.pk-simc option{line-height:1.33}