:root{
  --accent:#ff5f1b;
  --text:#111;
  --muted:#7a7a7a;
  --bg:#fff;
  --panel:#f2f4f7;
  --navy:#032a5d;
  --border:#eae8e8;
  --shadow: 1px 1px 2px rgba(0,0,0,.25);
  --radius:12px;
  --header-h: 71px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:var(--bg);
}
/* 배너 */
.mainVisualBanner {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
    margin-top: var(--header-h);
  }
  
  .mainVisualBanner .inner {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .mainVisualBanner .image {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  
  .mainVisualBanner .image picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .mainVisualBanner .image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }
  
  @media (max-width: 748px) {
    .mainVisualBanner {
      height: 520px;
    }
  }
  
  

/* utilities */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.container-safety{
  max-width:1200px;
  margin:0 auto;
  padding: 0 16px;
}

.section{ padding:40px 0; }

.section-title{ margin-bottom:32px; }
.title{
  margin:0 0 8px 0;
  font-family: Pretendard, "Noto Sans KR", sans-serif;
  font-weight:600;
  font-size:32px;
  line-height:1.2;
}
.subtitle{
  margin:0;
  font-size:20px;
  line-height:1.6;
}
.accent{ color:var(--accent); }

.category{ margin-bottom:16px; }
.category-title{
  margin:0 0 16px 0;
  font-weight:700;
  font-size:18px;
}

/* grids */
.icon-grid{
  list-style:none;
  margin:0;
  padding:0;
  background:var(--panel);
  border-radius:var(--radius);
  display:grid;
  overflow:hidden;
}
.icon-grid--4{ grid-template-columns: 1fr 1fr; }
.icon-grid--2{ grid-template-columns: 1fr; }

.icon-item{
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
}
.icon-img {
    width: 120px;
    height: 120px;
    display: block;
  }
  .card-icon {
    width: 44px;
    height: 44px;
    display: block;
  }
  
  .card {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

/* dashed separators (모바일/데스크탑 조건 클래스) */
.icon-item--br{ border-right:2px dashed #fff; }
.icon-item--bb-md0{ border-bottom:2px dashed #fff; }
.icon-item--br-md{ /* 데스크탑에서만 적용 */ }

.icon-label{
  margin:0;
  font-weight:700;
  font-size:14px;
}

.two-col{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}

/* icon placeholders */
.icon{
  width:44px;
  height:44px;
  display:inline-block;
  border-radius:10px;
  /* 실제 아이콘 넣기 전 임시 표시 */
  outline:2px solid rgba(255,95,27,.25);
  position:relative;
}
.icon::after{
  content: attr(data-icon);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  color:var(--accent);
}
.icon--card{ outline-color: rgba(255,95,27,.35); }
.icon--combo{ outline-style:dashed; }

/* cards */
.card-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
.card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.card-title{
  margin:0;
  font-size:18px;
  font-weight:700;
}
.card-desc{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.5;
}

/* compare table */
.table-wrap{ display:none; }
.compare-table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:10px;
}
.compare-table th,
.compare-table td{
  border:1px solid var(--border);
  padding:16px;
  text-align:left;
  vertical-align:top;
  font-size:14px;
}
.compare-table thead th{
  background:var(--panel);
  border-color:#fff;
  font-weight:700;
}
.compare-table thead th:first-child{
  background:#fff;
}
.compare-table tbody th{
  background:var(--navy);
  color:#fff;
  border-color:#fff;
  font-weight:700;
  width:25%;
}

/* mobile cards */
.mobile-cards{ display:block; }
.mcard{
  border:1px solid #ddd;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  margin-bottom:16px;
}
.mcard-head{
  margin:0;
  padding:16px;
  background:var(--panel);
  border-bottom:1px solid #ddd;
  font-size:16px;
  font-weight:700;
}
.mcard-body{ margin:0; }
.mrow{
  display:flex;
  gap:12px;
  padding:16px;
  border-top:1px solid #eee;
}
.mrow:first-child{ border-top:0; }
.mrow dt{
  margin:0;
  min-width:120px;
  color:var(--navy);
  font-weight:700;
  font-size:14px;
}
.mrow dd{
  margin:0;
  font-size:14px;
}

/* >= 768px (md) */
@media (min-width:768px){
  .container{ padding: 0 16px; }
  .section-title{ margin-bottom:48px; }
  .category-title{ font-size:20px; }
  .icon-label{ font-size:16px; }

  .icon-grid--4{ grid-template-columns: repeat(4, 1fr); }
  .icon-grid--2{ grid-template-columns: repeat(2, 1fr); }

  .two-col{ grid-template-columns: 1fr 1fr; }

  /* 모바일에서 쓰던 아래 보더(2x2 그리드용) 제거/조정 */
  .icon-item--bb-md0{ border-bottom:0; }

  /* 데스크탑에서 2열 그리드의 오른쪽 경계 */
  .icon-item--br-md{ border-right:2px dashed #fff; }

  .card-grid{ grid-template-columns: 1fr 1fr; }

  .table-wrap{ display:block; }
  .mobile-cards{ display:none; }
}

/* >= 1024px (lg) */
@media (min-width:1024px){
  .container{ padding: 0 16px; }
  .card-grid{ grid-template-columns: repeat(4, 1fr); }
  .compare-table th,
  .compare-table td{ font-size:16px; }
}