/* ═══════════════════════════════════════════════
   보험사·상품 선택 모달 — 공유 컴포넌트 (시안 B)
   index.html / register.html / edit-profile.html 공통
   클래스 전부 sm- 프리픽스 → 기존 CSS와 분리
   ═══════════════════════════════════════════════ */
.sm-overlay{
  position:fixed; inset:0; z-index:1200;
  background:rgba(17,17,40,.5);
  display:flex; justify-content:center; align-items:flex-end;
  --sm-indigo:#3730A3; --sm-indigo-tint:#eef0fb;
  --sm-amber:#c9892a; --sm-amber-dk:#a87322; --sm-amber-tint:#fbf2e1; --sm-amber-line:#ecd9b6;
  --sm-ink:#1f2937; --sm-g700:#374151; --sm-g500:#6b7280; --sm-g400:#9ca3af;
  --sm-line:#e5e7eb; --sm-line-soft:#f0f1f3; --sm-soft:#f9fafb; --sm-soft2:#f3f4f6;
}
.sm-overlay *{box-sizing:border-box}
.sm-overlay button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;margin:0}

.sm-modal{
  width:100%; max-width:380px; background:#fff;
  display:flex; flex-direction:column; overflow:hidden;
  font-family:'Noto Sans KR',sans-serif; color:var(--sm-ink); line-height:1.5;
  border-radius:20px 20px 0 0;
  animation:smUp .24s ease;
}
@keyframes smUp{from{transform:translateY(26px);opacity:.5}to{transform:translateY(0);opacity:1}}
@keyframes smPop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}

.sm-handle{width:36px;height:4px;border-radius:3px;background:#d8dade;margin:8px auto 0}

/* 헤더 */
.sm-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--sm-line);position:relative}
.sm-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.sm-ico svg{width:18px;height:18px}
.sm-head-blue .sm-ico{background:var(--sm-indigo);box-shadow:0 3px 8px rgba(55,48,163,.28)}
.sm-head-amber .sm-ico{background:var(--sm-amber);box-shadow:0 3px 8px rgba(201,137,42,.28)}
.sm-title{margin:0;font-size:15px;font-weight:700;letter-spacing:-.3px}
.sm-sub{font-size:11px;color:var(--sm-g400);margin-left:6px;font-weight:500}
.sm-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--sm-soft2);color:var(--sm-g400);display:flex;align-items:center;justify-content:center}
.sm-close svg{width:12px;height:12px}
.sm-close:hover{background:var(--sm-line)}

/* 검색 */
.sm-search{position:relative;margin:13px 16px 0}
.sm-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--sm-g400)}
.sm-search input{width:100%;padding:10px 12px 10px 34px;border:1.5px solid var(--sm-line);border-radius:10px;font-size:13px;font-family:inherit;background:var(--sm-soft);transition:.15s;color:var(--sm-ink)}
.sm-search input:focus{outline:none;border-color:var(--sm-indigo);background:#fff}
.sm-search input::placeholder{color:var(--sm-g400)}

/* 적용 바 */
.sm-bar{border-top:1px solid var(--sm-line);padding:11px 16px;background:#fff}
.sm-barchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:28px;margin-bottom:9px}
.sm-barph{font-size:12px;color:var(--sm-g400)}
.sm-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:5px 8px 5px 10px;border-radius:8px;background:var(--sm-indigo-tint);color:var(--sm-indigo)}
.sm-chip.sm-amber{background:var(--sm-amber-tint);color:var(--sm-amber-dk)}
.sm-chip i{font-style:normal;display:flex}
.sm-chip i svg{width:11px;height:11px;opacity:.65}
.sm-barrow{display:flex;align-items:center;gap:10px}
.sm-hint{flex:1;font-size:11px;font-weight:600;color:#d9534f;opacity:0;transition:.2s}
.sm-bar.sm-limit .sm-hint{opacity:1}
.sm-bar.sm-limit .sm-barchips{animation:smNudge .3s}
@keyframes smNudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.sm-apply{padding:11px 22px;border-radius:10px;font-size:13px;font-weight:700;background:var(--sm-indigo);color:#fff;transition:.15s;white-space:nowrap}
.sm-apply.sm-amber{background:var(--sm-amber)}
.sm-apply:disabled{background:var(--sm-soft2);color:var(--sm-g400);cursor:default}

/* ── 2-pane: 보험사 ── */
.sm-body{display:flex}
.sm-nav{width:114px;flex-shrink:0;border-right:1px solid var(--sm-line);padding:7px 0;background:#fff}
.sm-navbtn{width:calc(100% - 14px);margin:2px 7px;padding:13px 6px;border-radius:11px;font-size:12.5px;font-weight:500;color:var(--sm-g500);display:flex;flex-direction:column;align-items:center;gap:6px;transition:.13s}
.sm-navbtn svg{width:20px;height:20px}
.sm-navbtn:hover{background:var(--sm-soft)}
.sm-navbtn.sm-on{background:var(--sm-indigo-tint);color:var(--sm-indigo);font-weight:700}
.sm-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sm-scroll{padding:12px 16px 6px;overflow-y:auto;max-height:292px}
.sm-grid{display:grid;grid-template-columns:1fr;gap:7px}
.sm-item{display:flex;align-items:center;gap:8px;padding:10px 11px;border-radius:9px;border:1.5px solid transparent;background:var(--sm-soft);transition:.13s;text-align:left}
.sm-item:hover{background:var(--sm-soft2)}
.sm-item.sm-on{border-color:var(--sm-indigo);background:var(--sm-indigo-tint)}
.sm-item.sm-dim{opacity:.36;filter:grayscale(.4)}
.sm-logo{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sm-logo img{width:100%;height:100%;object-fit:contain}
.sm-logo.sm-noimg::after{content:attr(data-fb);font-size:9px;font-weight:700;color:var(--sm-g400)}
.sm-name{flex:1;min-width:0;font-size:12.5px;font-weight:500;color:var(--sm-g700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-item.sm-on .sm-name{color:var(--sm-indigo);font-weight:700}
.sm-check{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--sm-line);flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff}
.sm-check svg{width:9px;height:9px;color:#fff;opacity:0}
.sm-item.sm-on .sm-check{background:var(--sm-indigo);border-color:var(--sm-indigo)}
.sm-item.sm-on .sm-check svg{opacity:1}
.sm-empty{text-align:center;padding:34px 0;font-size:12.5px;color:var(--sm-g400)}

/* ── 2-pane: 상품 ── */
.sm-pbnav{flex-shrink:0;border-right:1px solid var(--sm-line);padding:7px 0;background:#fff;overflow-y:auto;width:154px;max-height:330px}
.sm-pbnav button{width:calc(100% - 14px);margin:2px 7px;border-radius:10px;display:flex;align-items:center;gap:7px;padding:8px 8px;font-size:11.5px;font-weight:500;color:var(--sm-g500);transition:.13s;text-align:left}
.sm-pbnav button:hover{background:var(--sm-soft)}
.sm-pbnav button.sm-on{background:var(--sm-amber-tint);color:var(--sm-amber-dk);font-weight:700}
.sm-catic{width:26px;height:26px;border-radius:7px;background:var(--sm-soft2);color:var(--sm-g400);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.13s}
.sm-catic svg{width:15px;height:15px}
.sm-pbnav button.sm-on .sm-catic{background:rgba(201,137,42,.18);color:var(--sm-amber)}
.sm-nblabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-cnt{min-width:17px;height:17px;border-radius:9px;background:var(--sm-amber);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sm-pbmain{flex:1;min-width:0;padding:15px 16px;overflow-y:auto;max-height:330px}
.sm-pbhead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sm-pbhead .sm-catic{width:30px;height:30px;background:rgba(201,137,42,.16);color:var(--sm-amber)}
.sm-pbhead .sm-catic svg{width:17px;height:17px}
.sm-pbtitle{font-size:14px;font-weight:700;color:var(--sm-g700)}
.sm-pbdesc{font-size:11.5px;color:var(--sm-g400);line-height:1.55;margin-bottom:13px}
.sm-pblbl{font-size:11px;font-weight:700;color:var(--sm-g500);margin-bottom:9px}
.sm-pbsubs{display:flex;flex-wrap:wrap;gap:7px}
.sm-subchip{padding:8px 15px;border-radius:20px;font-size:12.5px;font-weight:500;color:var(--sm-g500);background:#fff;border:1.5px solid var(--sm-line);transition:.13s}
.sm-subchip:hover{border-color:var(--sm-amber)}
.sm-subchip.sm-on{background:var(--sm-amber);border-color:var(--sm-amber);color:#fff;font-weight:700}
.sm-subchip.sm-dim{opacity:.4}

/* ── PC (640px+): 중앙 카드 ── */
@media(min-width:640px){
  .sm-overlay{align-items:center}
  .sm-modal{max-width:700px;border-radius:16px;animation:smPop .2s ease;box-shadow:0 18px 50px rgba(20,20,50,.18)}
  .sm-handle{display:none}
  .sm-scroll{max-height:330px}
  .sm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm-pbnav{width:160px;max-height:344px}
  .sm-pbmain{max-height:344px}
}