/* =========================================================
   보험한판 — coverage.css
   coverage.html 전용 스타일
   색상 토큰 / 리셋 / 공통 app / top / sheet는 common.css 사용
   (흰 톤 라이트 테마에 맞춰 하드코딩된 어두운 색만 수정)
========================================================= */


/* ── 페이지 상단 ── */
.coverage-top{
  min-height:64px;
  height:auto;
  gap:12px;
  padding-top:10px;
  padding-bottom:10px;
}

.coverage-top-copy{
  flex:1;
  min-width:0;
  text-align:center;
}

.coverage-top-desc{
  margin-top:3px;
  color:var(--gray-600);
  font-size:10.5px;
  font-weight:700;
  line-height:1.35;
}

.coverage-top-spacer{
  width:34px;
  flex:0 0 34px;
}


/* ── 공통 섹션 ── */
.coverage-section{
  margin-top:18px;
}

.coverage-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px;
}

.coverage-section-title{
  color:var(--gray-900);
  font-size:17px;
  font-weight:1000;
  line-height:1.25;
  letter-spacing:-.045em;
}

.coverage-section-desc{
  margin-top:4px;
  color:var(--gray-600);
  font-size:11.5px;
  font-weight:700;
  line-height:1.45;
}

.coverage-filter-head{
  align-items:center;
}


/* ── 실손보험 카드 ── */
.silson-card{
  width:100%;
  padding:16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(47,111,214,.05),transparent 42%),
    var(--surface);
  box-shadow:0 10px 22px rgba(23,32,51,.07);
  text-align:left;
  cursor:pointer;
}

.silson-card:active{
  transform:scale(.988);
}

.silson-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.silson-card-title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.silson-card-icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--bg-tint);
  font-size:18px;
}

.silson-card-heading{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.silson-card-title{
  color:var(--gray-900);
  font-size:14px;
  font-weight:950;
  line-height:1.3;
  letter-spacing:-.035em;
}

.silson-card-caption{
  color:var(--gray-600);
  font-size:10px;
  font-weight:700;
  line-height:1.35;
}

.silson-card-more{
  color:var(--brand-blue-text);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.silson-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.silson-card-box{
  min-width:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--bg-tint);
}

.silson-card-label{
  margin-bottom:5px;
  color:var(--gray-400);
  font-size:10px;
  font-weight:850;
  line-height:1.25;
}

.silson-card-value{
  color:var(--gray-900);
  font-size:14px;
  font-weight:950;
  line-height:1.3;
  letter-spacing:-.03em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* ── 보기 전환 ── */
.view-mode-btn{
  height:32px;
  padding:0 13px;
  flex:0 0 auto;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--brand-blue-text);
  font-size:11px;
  font-weight:900;
}

.view-mode-btn:active{
  background:var(--bg-tint);
}


/* ── 카테고리 탭 ── */
.cat-tabs{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:1px 0 10px;
  scrollbar-width:none;
  user-select:none;
}

.cat-tabs::-webkit-scrollbar{
  display:none;
}

.cat-tab{
  height:34px;
  padding:0 13px;
  flex:0 0 auto;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--gray-700);
  font-size:11.5px;
  font-weight:900;
  white-space:nowrap;
  transition:.16s ease;
}

.cat-tab.active{
  border-color:rgba(47,111,214,.35);
  background:var(--accent-blue-soft);
  color:var(--brand-blue-text);
}


/* ── 상태 요약 탭 ── */
.status-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:2px;
}

.stab{
  min-width:0;
  min-height:68px;
  padding:10px 4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  opacity:1 !important;
  text-align:center;
  transition:.16s ease;
}

.stab.active{
  border-color:rgba(47,111,214,.4);
  background:
    linear-gradient(180deg,rgba(47,111,214,.06),transparent),
    var(--surface);
  box-shadow:0 8px 18px rgba(23,32,51,.07);
  transform:translateY(-1px);
}

.stn{
  display:block;
  color:var(--gray-900);
  font-size:18px;
  font-weight:950;
  line-height:1.05;
}

.stl{
  display:block;
  color:var(--gray-600);
  font-size:10px;
  font-weight:800;
  line-height:1.2;
}

.status-ok{
  color:var(--success) !important;
}

.status-lack{
  color:var(--warning) !important;
}

.status-empty{
  color:var(--gray-400) !important;
}


/* ── 보장 목록 ── */
.coverage-list-section{
  margin-top:14px;
  padding-bottom:20px;
}

#covList{
  border-top:1px solid var(--border);
}

.cov-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 2px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
}

.cov-item-l{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.cov-cat{
  color:var(--gray-400);
  font-size:10px;
  font-weight:800;
}

.cov-name{
  color:var(--gray-900);
  font-size:14px;
  font-weight:850;
  line-height:1.35;
}

.cov-item-r{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.cov-amt{
  color:var(--gray-700);
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
}


/* ── 상태 배지 ── */
.spill{
  padding:4px 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:950;
  line-height:1.2;
  white-space:nowrap;
}

.p-ok{
  background:var(--success-bg);
  color:var(--success);
}

.p-lack{
  background:var(--warning-bg);
  color:var(--warning);
}

.p-empty{
  background:var(--bg-tint);
  color:var(--gray-400);
}


/* ── 상세 펼침 ── */
.cov-detail{
  display:none;
  padding:0 2px 14px;
  border-bottom:1px solid var(--border);
}

.cov-dg{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.cov-db{
  min-width:0;
  padding:11px 5px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  text-align:center;
}

.cov-dl{
  margin-bottom:4px;
  color:var(--gray-400);
  font-size:9.5px;
  line-height:1.35;
}

.cov-dv{
  color:var(--gray-900);
  font-size:12.5px;
  font-weight:900;
  line-height:1.4;
}

.cov-range{
  margin-top:8px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--bg-tint);
}

.cov-range-label{
  margin-bottom:4px;
  color:var(--gray-400);
  font-size:10px;
  font-weight:900;
}

.cov-range-text{
  margin:0;
  color:var(--gray-700);
  font-size:11.5px;
  font-weight:800;
  line-height:1.55;
}


/* ── 표 보기 ── */
.cov-table{
  width:100%;
  border:1px solid var(--border);
  border-collapse:separate;
  border-spacing:0;
  border-radius:14px;
  overflow:hidden;
  background:var(--surface);
}

.cov-table th{
  padding:11px 9px;
  border-bottom:1px solid var(--border);
  background:var(--bg-tint);
  color:var(--gray-400);
  font-size:10.5px;
  font-weight:900;
  text-align:left;
}

.cov-table td{
  padding:12px 9px;
  border-bottom:1px solid var(--border);
  color:var(--gray-700);
  font-size:12px;
  font-weight:800;
}

.cov-table tr:last-child td{
  border-bottom:0;
}

.cov-table .amt-col{
  text-align:right;
  white-space:nowrap;
}

.cov-table .status-ok{
  color:var(--success);
}

.cov-table .status-lack{
  color:var(--warning);
}

.cov-table .status-empty{
  color:var(--gray-400);
}


/* ── 작은 화면 ── */
@media(max-width:370px){
  .coverage-top-desc{
    font-size:10px;
  }

  .coverage-section-title{
    font-size:16px;
  }

  .status-tabs{
    gap:5px;
  }

  .stab{
    min-height:64px;
    padding:9px 2px;
  }

  .stn{
    font-size:17px;
  }

  .silson-card{
    padding:14px;
  }
}


/* ── 스크롤 고정 영역 ── */

body[data-page="coverage"] .app,
body[data-page="coverage"] .screen,
body[data-page="coverage"] #coverage{
  overflow:visible !important;
}

.coverage-top{
  position:sticky;
  top:0;
  z-index:100;
  min-height:64px;
  margin-left:-12px;
  margin-right:-12px;
  padding-left:14px;
  padding-right:14px;
  background:rgba(244,247,251,.96);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 14px rgba(23,32,51,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.coverage-filter-sticky{
  position:sticky;
  top:64px;
  z-index:90;
  margin-left:-12px;
  margin-right:-12px;
  padding:14px 12px 14px;
  background:rgba(244,247,251,.96);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 16px rgba(23,32,51,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.coverage-filter-sticky::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-18px;
  height:18px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(244,247,251,.55) 0%,
    rgba(244,247,251,.2) 48%,
    rgba(244,247,251,0) 100%
  );
}

.coverage-filter-sticky .coverage-section-head{
  margin-bottom:10px;
}

.coverage-list-section{
  margin-top:14px;
}

@media(min-width:431px){
  .coverage-top,
  .coverage-filter-sticky{
    width:430px;
    margin-left:auto;
    margin-right:auto;
    left:0;
    right:0;
  }
}

@media(max-width:370px){
  .coverage-top{
    margin-left:-12px;
    margin-right:-12px;
    padding-left:12px;
    padding-right:12px;
  }

  .coverage-filter-sticky{
    margin-left:-12px;
    margin-right:-12px;
    padding-left:12px;
    padding-right:12px;
  }
}


/* ── 실손보험 카드 좌우 간격 보정 ── */
.coverage-section:not(.coverage-filter-sticky){
  width:100%;
  margin-left:0;
  margin-right:0;
}

.silson-card{
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
  box-sizing:border-box;
}

.silson-card-head{
  width:100%;
}

.silson-card-title-wrap{
  flex:1;
  min-width:0;
}

.silson-card-more{
  margin-left:auto;
  flex:0 0 auto;
}


/* =========================================================
   COVERAGE PAGE HORIZONTAL SPACING FIX
========================================================= */

body[data-page="coverage"] #coverage{
  padding:0 14px 28px !important;
}

body[data-page="coverage"] .coverage-top{
  margin-left:-14px !important;
  margin-right:-14px !important;
  padding-left:14px !important;
  padding-right:14px !important;
}

body[data-page="coverage"] .coverage-filter-sticky{
  margin-left:-14px !important;
  margin-right:-14px !important;
  padding-left:14px !important;
  padding-right:14px !important;
}

body[data-page="coverage"] .coverage-section:not(.coverage-filter-sticky),
body[data-page="coverage"] .coverage-list-section{
  width:100%;
  margin-left:0;
  margin-right:0;
}

body[data-page="coverage"] .silson-card{
  width:100%;
  margin-left:0;
  margin-right:0;
}

@media(max-width:370px){
  body[data-page="coverage"] #coverage{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  body[data-page="coverage"] .coverage-top,
  body[data-page="coverage"] .coverage-filter-sticky{
    margin-left:-12px !important;
    margin-right:-12px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
}


/* =========================================================
   실손 바텀시트 전용
========================================================= */

#silsonSheet .silson-sheet{
  height:min(82dvh,720px);
}

#silsonSidebar{
  width:96px;
  flex:0 0 96px;
}

#silsonSidebar > *{
  width:100%;
}

@media(max-width:370px){
  #silsonSheet .silson-sheet{
    height:min(84dvh,680px);
  }

  #silsonSidebar{
    width:88px;
    flex-basis:88px;
  }
}


/* =========================================================
   실손 바텀시트 콘텐츠 전용
========================================================= */

.silson-side-item{
  position:relative;
  width:100%;
  padding:13px 10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  border:0;
  border-bottom:1px solid var(--border);
  background:transparent;
  color:var(--gray-600);
  text-align:left;
}

.silson-side-item.active{
  background:var(--surface);
}

.silson-side-item.active::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:2px;
  background:var(--brand-blue-text);
}

.silson-side-name{
  color:inherit;
  font-size:11.5px;
  font-weight:950;
  line-height:1.35;
}

.silson-side-item.active .silson-side-name{
  color:var(--gray-900);
}

.silson-side-badge,
.silson-side-note{
  font-size:9px;
  font-weight:900;
  line-height:1.2;
}

.silson-side-badge{
  color:var(--brand-blue-text);
}

.silson-side-note{
  color:var(--gray-400);
}

.silson-panel-head{
  position:relative;
  margin-bottom:12px;
  padding-right:72px;
}

.silson-panel-title{
  color:var(--gray-900);
  font-size:16px;
  font-weight:950;
  line-height:1.3;
}

.silson-panel-period{
  margin-top:3px;
  color:var(--gray-400);
  font-size:10.5px;
  font-weight:750;
}

.silson-panel-badge{
  position:absolute;
  top:0;
  right:0;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg-tint);
  color:var(--brand-blue-text);
  font-size:9.5px;
  font-weight:900;
}

.silson-summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-bottom:10px;
}

.silson-summary-item{
  min-width:0;
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--bg-tint);
}

.silson-summary-label{
  margin-bottom:4px;
  color:var(--gray-400);
  font-size:9.5px;
  font-weight:850;
  line-height:1.3;
}

.silson-summary-value{
  color:var(--gray-900);
  font-size:10.5px;
  font-weight:900;
  line-height:1.45;
  word-break:keep-all;
}

.silson-summary-value.is-warning{
  color:var(--warning);
}