body {
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  background-color: #fff;
  color: #111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }
* { box-sizing: border-box; }


/* ---------- 모바일(기본) ---------- */
.main-banner {
  background-color: #72c9d9;
  color: #ffffff;
  text-align: center;
  padding: 100px 20px 80px;
}

.main-banner .desc {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.main-banner .main-title {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 6px;
  font-weight: 700;
}

.main-banner .logo-img {
  display: block;
  margin: 0 auto 20px;
  max-width: 260px;
  width: 80%;
  height: auto;
}

.main-banner .subtext {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 auto 24px;
}

/* 아이콘: 모바일 기본 */
.main-banner .icon-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 10px;
}

.main-banner .icon-list .icon-box {
  flex: 0 0 auto;
  width: 110px;
  aspect-ratio: 1 / 1.25;
  background: #fff;
  border-radius: 18px;
  padding: 18px 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.main-banner .icon-list .icon-box img {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}

.main-banner .icon-list .icon-box p {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  color: #333;              /* 흰 배경 위 가독성 보장 */
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.4em * 3);
}

/* PC/모바일 전용 문단 토글: 기본(모바일)은 mobile-only 보이게 */
.pc-only, .mobile-only { display: none; }
.mobile-only { display: block; }

/* ---------- PC(1024px 이상) ---------- */
@media (min-width: 1024px) {
  .pc-only { display: block; }
  .mobile-only { display: none; }

  .main-banner {
    padding: 100px 20px 80px;
  }
  .main-banner .desc {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .main-banner .main-title {
    font-size: 32px;
    line-height: 1.3;
    margin: 0 0 10px;
  }
  .main-banner .logo-img {
    max-width: 450px;
    width: 60%;
    margin-bottom: 30px;
  }
  .main-banner .subtext {
    font-size: 20px;
    line-height: 1.6;
    margin: 0 auto 24px;
  }

  .main-banner .icon-list {
    gap: 32px;
    overflow-x: visible;
    margin-top: 80px
  }
  /* PC는 정사각 */
  .main-banner .icon-list .icon-box {
    width: 180px;
    aspect-ratio: 1 / 1;
    padding: 24px 16px;
  }
  .main-banner .icon-list .icon-box img {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
  }
  .main-banner .icon-list .icon-box p {
    font-size: 15px;
    line-height: 1.5;
    min-height: auto;
    color: #333;
  }
}




/* 이 아래부터는 흰 배경 */
.white-section {
  background-color: #fff;
  padding: 100px 20px;
}

/* 영상 정렬 및 스타일 */
.video-section {
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
}

.video-section video {
  width: 100%;
  max-width: 900px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}




/* ================== 커스텀아이즈 데이터 플로우 ================== */
.dataflow-section{
  background:#f9feff;
  padding:60px 16px;        /* 기본(MO) 패딩 */
  text-align:center;
}

/* 그림 요소 공통 */
.dataflow-section picture{
  display:block;
  max-width: 980px;         /* PC 대비 최대폭 제어(모바일에선 100%) */
  width:100%;
  margin:0 auto;
}
.dataflow-section img{
  display:block;
  width:100%;
  height:auto;
}

/* 제목 공통 */
.dataflow-section h3{
  margin:0;                 /* 기본 여백 초기화 */
  line-height:1.35;
  font-weight:800;
}
.dataflow-section h3 span{
  color:#72C9D9;            /* 파란 포인트 */
}

/* ---------- 모바일 (≤768px) :  ---------- */
@media (max-width:768px){
  .dataflow-section{
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
    gap:30px; /* 이미지와 텍스트 간격 줄임 (기존 28px → 20px) */
    padding:88px 16px 72px;
  }

  .dataflow-section h3{
    font-size:22px;
    line-height:1.28;
    letter-spacing:-0.2px;
    margin:0;
  }

  /* "커스텀아이즈 라섹" 색상 */
  .dataflow-section h3 span{
    display:block;
    margin-bottom:4px;
    color:#1cb3d6;
  }
}

/* ---------- PC (≥769px) ---------- */
@media (min-width:769px){
  .dataflow-section{
    display:block;                   /* 일반 흐름 */
    padding:120px 20px;              /* PC 여백 */
  }
  .dataflow-section img{
    max-width: 1100px;               /* PC에서 너무 커지지 않게 */
    margin:0 auto 36px;              /* 이미지 아래 간격 */
  }
  .dataflow-section h3{
    font-size:40px;                  /* XD 사이즈 */
  }
}



/* ===== Point 1 (HOA) ===== */
.hoa-section{
  background:#f6f7f8;
  padding:72px 0 80px;
  font-family:'Pretendard',sans-serif;
}

.hoa-title-wrap{
  max-width:960px;
  margin:0 auto 32px;
  text-align:center;
  padding:0 20px;
}

.hoa-badge{
  display:inline-block;
  padding:8px 18px;
  border:2px solid #72C9D9;
  color:#00AFC2;
  background:#fff;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  margin-bottom:14px;
}

.hoa-title{
  margin:10px 0 12px;
  font-size:28px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:-0.3px;
  color:#111;
}

.hoa-subtitle{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:#666;
}

/* 이미지 꽉차게 */
.hoa-visual{
  width:100%;
  margin:0 auto;
  overflow:hidden;
}

.hoa-visual img{
  width:100%;
  height:auto;
  display:block;
}

/* --------- PC --------- */
@media (min-width:1024px){
  .hoa-section{ padding:90px 0 96px; }

  .hoa-title{ font-size:40px; margin:14px 0 14px; }
  .hoa-subtitle{ font-size:16px; }

  .hoa-visual{ max-width:100%; border-radius:0; }
}




.hoa-meaning-section,
.hoa-importance-section {
  background-color: #f9f9f9;
  padding: 80px 20px;
}
/* 모바일에서 <br> 제거 */
@media (max-width: 768px) {
  .hoa-meaning-section .description br {
    display: none;
  }
}


.inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.section-title {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 30px;
}

.description {
  font-size: 20px;
  color: #333;
  line-height: 1.8;
}

.importance-cards {
  display: flex;
  flex-wrap: wrap;           /* ✅ 기본은 줄바꿈 허용 (PC용) */
  gap: 16px;
  justify-content: space-between; /* ✅ 카드 정렬 간격 균등 */
  padding-bottom: 8px;
}

.card {
  flex: 1 1 calc(33.333% - 16px); /* ✅ PC에서 3등분 */
  max-width: calc(33.333% - 16px);
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}


.card img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 10px;
}

.card p {
  font-size: 18px;
  line-height: 1.6;
}

.emphasis {
 margin-top: 120px; /* ✅ 위 이미지와의 간격 확보 */
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  color: #333;
}


@media (max-width: 768px) {
  .importance-cards {
    flex-wrap: nowrap;               /* ✅ 모바일에서만 한 줄 정렬 */
    overflow-x: auto;                /* ✅ 모바일에서만 가로 스크롤 */
    -webkit-overflow-scrolling: touch;
  }

  .card {
    flex: 0 0 80%;                   /* ✅ 모바일에서 카드 크기 */
    max-width: 80%;
  }
}

/* explantion-section */
.explanation-section {
  background: #fff;
  padding: 40px 20px;
  text-align: center; /* 기본 PC는 중앙 정렬 */
}

.explanation-section .inner {
  max-width: 960px;
  margin: 0 auto;
}

.explanation-section p {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  margin: 0;
}

.explanation-section strong {
  font-weight: 700;
}

.explanation-section .highlight {
  color: #1ea7c6;
  font-weight: 700;
}

/* 📱 모바일 스타일 */
@media (max-width: 768px) {
  .explanation-section {
    text-align: left; /* 좌측 정렬 */
  }
  .explanation-section p {
    font-size: 20px; /* 글자 키움 */
    line-height: 1.6;
    white-space: normal; /* <br> 무시 */
  }
}

.highlight {
  font-weight: 700;
  color: #1ea7c6;
}

/* 모바일에서 섹션 간격 띄우기 */
@media (max-width: 768px) {
  .inner {
    margin-bottom: 80px; /* inner와 다음 섹션 사이 여백 */
  }
  .custom-process-section {
    margin-top: 80px; /* 수술과정 섹션 위쪽 여백 */
  }
}



/* 수술 과정 : 공통 */
.custom-process-section.v2{
  background:#f4fafc;
  padding:60px 20px;
  font-family:'Pretendard',sans-serif;
}
.custom-process-section.v2 .section-title{
  text-align:center; font-size:28px; font-weight:800; color:#111;
  letter-spacing:-.3px; margin-bottom:36px;
}
.process-steps{list-style:none; padding:0; margin:0 auto; max-width:980px;}
.step{
  background:#fff; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:24px 18px 28px; margin-bottom:24px;
}
/* step-head 공통 */
.step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* 뱃지 PNG */
.step-head .badge {
  width: 56px;
  height: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: block;
}

/* PC 레이아웃에서 뱃지+제목 나란히 */
@media (min-width: 1024px) {
  .step-head {
    justify-content: flex-start;
    margin-bottom: 20px;
  }
  .step-head .badge {
    width: 64px;
  }
  .step-head .step-title {
    font-size: 24px;
    font-weight: 800;
    color: #111;
    margin: 0;
  }
}

/* 뱃지+제목 (PNG는 완전 투명 처리) */
.step-head{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px;}
.badge{
  width:56px; height:auto; display:block;
  background:transparent !important; box-shadow:none !important; border:none !important;
}
.step-title{font-size:20px; font-weight:800; color:#111; line-height:1.35; margin:0; text-align:center;}

.step-media img{width:100%; height:auto; border-radius:10px; display:block;}
.step-desc{
  max-width:820px; margin:16px auto 0; padding-left:18px; text-align:left;
}
.step-desc li{list-style:disc; font-size:16px; line-height:1.8; color:#333;}

/* ---------------- Mobile (기본) : 세로 스택 ---------------- */
@media (max-width: 1023.98px){
  .custom-process-section.v2{padding:56px 16px;}
  .section-title{font-size:26px;}
  .badge{width:52px;}
  .step-title{font-size:19px;}
}

/* ---------------- Desktop : PC 레이아웃 ---------------- */
@media (min-width: 1024px){
  .custom-process-section.v2{padding:90px 24px;}
  .custom-process-section.v2 .section-title{font-size:32px; margin-bottom:44px;}

  .step{
    display:grid;
    grid-template-columns: 480px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "media head"
      "media desc";
    column-gap:40px; row-gap:14px;
    padding:32px;
  }
  .step-media{grid-area: media;}
  .step-media img{height:auto; width:100%;}

  .step-head{
    grid-area: head;
    justify-content:flex-start;            /* PC에선 좌정렬 */
    margin:0;
  }
  .badge{width:64px;}
  .step-title{font-size:24px; text-align:left;}

  .step-desc{
    grid-area: desc;
    margin:0; padding-left:18px;
  }
  .step-desc li{font-size:17px;}
}

/* 초소형 */
@media (max-width:360px){
  .badge{width:48px;}
  .step-title{font-size:18px;}
}



/* 비교사례 레이아웃 */
.vision-compare-section {
  background: #fff;
  padding: 80px 20px;
}
.vision-compare-section .inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

/* 제목 */
.vc-title {
  font-size: 28px;
  font-weight: 800;
  color: #222;
  letter-spacing: -0.3px;
  margin-bottom: 28px;
}

/* 이미지 박스 + 라벨 */
.vc-imagebox {
  position: relative;
  max-width: 720px;
  margin: 0 auto 36px;
}
.vc-imagebox img {
  width: 100%;
  display: block;
  border-radius: 6px;
}
.vc-label {
  position: absolute;
  bottom: 0;
  width: 50%;
  padding: 14px 0;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.vc-left  { left: 0; background: #9aa3a8; border-bottom-left-radius: 6px; }
.vc-right { right: 0; background: #1cb3d6; border-bottom-right-radius: 6px; }

/* 본문 문장 */
.vc-desc {
  font-size: 20px;
  line-height: 1.85;
  color: #333;
  letter-spacing: -0.2px;
}
.vc-desc .strong   { font-weight: 800; color: #222; }
.vc-desc .highlight{ color: #08a9ca; font-weight: 800; }

/* 줄바꿈 제어: 기본은 PC 기준 */
.br-mo { display: none; }

/* ===== 모바일 ===== */
@media (max-width: 768px) {
  .vision-compare-section .vc-desc br.br-pc { display: none !important; }
  .vision-compare-section .vc-desc br.br-mo { display: inline !important; }
}

  .vc-title {
    font-size: 26px;
    line-height: 1.25;
    word-break: keep-all;
    margin-bottom: 22px;
  }

  .vc-imagebox { margin-bottom: 26px; }

  .vc-label {
    font-size: 14px;
    padding: 12px 0;
  }

  .vc-desc {
    font-size: 20px;
    line-height: 1.75;
    text-align: center; /* XD 기준 */
    word-break: keep-all;
  }

  /* 모바일 줄바꿈만 보이게 */
  .br-pc { display: none; }
  .br-mo { display: inline; }





 /* 스마트 배너 */
.smart-section {
  width: 100%;
}

.smart-section .smart-image {
  width: 100%;
  height: auto;
  display: block;
}

/* fade-up 효과 */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}






/*point 2*/

.ms39-banner-section .banner-text {
  max-width: 720px;        /* ✅ 폭 제한 */
  width: 100%;
  text-align: left;        /* ✅ 텍스트 좌측 정렬 */
  margin: 0 auto;          /* ✅ 중앙 배치! */
}

.ms39-analysis-section {
  padding: 120px 20px;
  background-color: #fff;
  text-align: center;
}

.ms39-analysis-section .container {
  max-width: 960px; /* 기존보다 좁게 */
  margin: 0 auto;
  padding: 0 20px;
}


.ms39-analysis-section .point {
  color: #00B4C1;
  font-weight: 600;
  margin-bottom: 10px;
}

.ms39-analysis-section .title {
  font-size: 28px;
  line-height: 1.4;
  font-weight: 700;
}

.ms39-analysis-section .desc {
  font-size: 16px;
  margin: 10px 0 60px;
  opacity: 0.8;
}

.section-divider {
  height: 4px;
  width: 60%;
  background-color: #72C9D9;
  margin: 20px auto; /* 위아래 간격 조정 */
}


.analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2열 고정 */
  gap: 60px 40px;  /* 세로 60px, 가로 40px 간격 */
  justify-content: center;
}


.analysis-card {
  background-color: #fff;
  text-align: left;
  position: relative;
}

.analysis-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.analysis-card .label {
  position: absolute;
  top: -15px;
  left: 0;
  background-color: #00B4C1;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  border-radius: 20px;
  padding: 6px 16px;
}

.analysis-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.analysis-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.analysis-card p strong {
  color: #00B4C1;
  font-weight: 600;
}

@media (max-width: 768px) {
  .analysis-grid {
    grid-template-columns: 1fr !important; /* ✅ 모바일에서 1열로 변경 */
    gap: 40px !important;                  /* ✅ 카드 간 간격 조정 */
  }

  .analysis-card {
    max-width: 100% !important;
    margin: 0 auto;
  }
}


.feature-table {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2열 구조 */
  gap: 40px 60px;
  max-width: 960px;
  margin: 0 auto;
}

.feature-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
}

.feature-table .feature-row:nth-last-child(-n+2) {
  border-bottom: none;
}


.analysis-bottom-line {
  margin-top: 60px;
  height: 4px;
  width: 60%;
  background-color: #00B4C1; /* 포인트 컬러 */
  margin: 20px auto; /* 위아래 간격 조정 */
}



.feature-row .text h4 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.feature-row .text p {
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

.feature-row .icon img {
  width: 70px;
  height: auto;
}
@media (max-width: 768px) {
  .feature-table {
    display: block;
    padding: 0 20px !important; /* ✅ 좌우 여백 추가 */
  }

  .feature-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #ccc; /* ✅ 기본 밑줄 유지 */
  }

  .feature-table .feature-row:last-child {
    border-bottom: none; /* ✅ 마지막 항목만 밑줄 제거 */
  }

  .feature-row .text {
    flex: 1;
    padding-right: 10px;
  }

  .feature-row .icon {
    flex-shrink: 0;
    width: 60px;
  }

  .feature-row .icon img {
    width: 100%;
    height: auto;
  }

  /* ✅ 상단/하단 파란줄 전체 폭 맞추기 */
  .section-divider,
  .analysis-bottom-line {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}





/*point 3*/

.custom-section {
  padding: 120px 20px;
  background-color: #f2f2f2;  /* 🔹 배경색 지정 */
  text-align: center;
  margin-top: 120px;
}


.custom-section .point {
  color: #00B4C1;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
}

.custom-section .title {
  font-size: 30px;
  line-height: 1.4;
  font-weight: 800;
  margin-bottom: 16px;
}

.custom-section .desc {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 60px;
}

.custom-section .desc .highlight {
  color: #00B4C1;
  font-weight: 600;
}

.custom-section .desc .highlight.blue {
  color: #00B4C1;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ✅ 무조건 3열로 고정 */
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}


.feature-card {
  background: #fff;
  padding: 30px 20px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* ✅ 부드러운 전환 */
}

.feature-card:hover {
  transform: translateY(-10px); /* ✅ 마우스 올리면 살짝 위로 이동 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* ✅ 그림자 강조 */
}


.feature-card img {
  max-width: 90px;
  height: 90px;
  object-fit: contain;
  margin-bottom: 16px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.feature-card .case {
  font-size: 18px;
  color: #00B4C1;
  font-weight: 600;
  margin-bottom: 6px;
}

.feature-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 18px;
  line-height: 1.5;
  color: #444;
}

@media (max-width: 768px) {
  .feature-grid {
    display: flex !important;
    flex-direction: column !important;  /* ✅ 세로 정렬 */
    gap: 24px !important;               /* ✅ 카드 간격 */
    padding: 0 16px !important;         /* ✅ 좌우 여백 */
  }

  .feature-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 24px 16px !important;      /* ✅ 내부 여백 */
    border-radius: 16px !important;     /* ✅ 둥근 모서리 강조 */
    box-shadow: 0 0 0 1px #eee;         /* ✅ 부드러운 외곽선 */
    background-color: #fff !important;
  }

  .feature-card img {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 12px;
  }

  .feature-card .case {
    font-size: 14px;
    color: #00B4C1;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .feature-card h3 {
    font-size: 18px !important;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .feature-card p {
    font-size: 15px !important;
    line-height: 1.6;
    color: #444;
    word-break: keep-all;
  }
}



/* point 4 */
.recommend-section {
  background: #fff;
  padding: 120px 20px;
  text-align: center;
}

.recommend-section .sub-point {
  color: #00B4C1;
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 14px;
}

.recommend-section .section-title {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 50px;
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.recommend-card {
  background-color: #f2f4f7;
  padding: 30px 10px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px #00B4C1;
  transition: transform 0.3s ease;
}

.recommend-card:hover {
  transform: translateY(-5px);
}

.recommend-card img {
  width: 80px;
  height: auto;
  margin-bottom: 5px;
}

.recommend-card p {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
  font-weight: 500;
}

.recommend-desc {
  font-size: 20px;
  line-height: 1.8;
  color: #333;
}

.recommend-desc .highlight {
  color: #00B4C1;
  font-weight: 700;
}


@media (max-width: 768px) {
  .recommend-grid {
    grid-template-columns: repeat(2, 1fr); /* 모바일: 2열 구성 */
    gap: 16px;
  }

  .recommend-card {
    padding: 20px 10px;
  }

  .recommend-card img {
    width: 60px;
    margin-bottom: 8px;
  }

  .recommend-card p {
    font-size: 14px;
  }

  .recommend-desc {
    font-size: 20px;
    line-height: 1.6;
  }
}



/* 반응형 */

/* ✅ PC 해상도용 */
@media (min-width: 1024px) {
  .main-banner .logo-img {
    max-width: 800px;
  }
}

/* ✅ 태블릿 이하 - process-step */
@media (max-width: 768px) {
  .process-step {
    flex-direction: column;
    text-align: center;
  }

  .process-step img {
    width: 100%;
    max-width: 100%;
  }

  .process-step .text {
    text-align: left;
  }
}



@media (max-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr); /* 태블릿: 2개씩 */
  }
}

@media (max-width: 600px) {
  .feature-grid {
    grid-template-columns: 1fr; /* 모바일: 1개씩 */
  }
}




@media (max-width: 768px) {
  .main-banner .main-title {
    font-size: 28px;   /* 제목 줄이기 */
  }

  .main-banner .subtext {
    font-size: 13px;   /* 본문 줄이기 */
    line-height: 1.4;
  }
  .main-banner .desc {
    font-size: 13px;  
    line-height: 1.4;
  }

}