/* ─────────────────────────────────────────
   index.css (메인 페이지 전용) - FINAL CLEAN
   - 히어로(영상+오버레이+텍스트) 안정화
   - 모바일 텍스트 정렬/줄바꿈(keep-all) 정리
   - 중복/충돌 가능성 있는 rem(80rem,147rem 등) 블록 제거
   - history/cta/features 섹션 간격/정렬 통일
───────────────────────────────────────── */

/* =========================
   0) Base / Utilities
========================= */
:root{
  --brand1:#00c6ff;
  --brand2:#00d1b2;
  --text:#111827;
  --muted:#6b7280;
  --line:rgba(17,24,39,.10);
}

*{ box-sizing:border-box; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* 1. 공통 컨테이너 너비 제한 */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 버튼 공통 */
.btn1.btn-primary.btn-lg{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.9rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn1.btn-primary.btn-lg:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

/* =========================
   2) HERO
========================= */
.main-hero{
  position: relative;
  height: 70vh;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: #fff;
  padding: 0 1rem;
}

/* 비디오: 90% 프레임 + 중앙정렬 */
.hero-video{
  position: absolute;
  inset: 0;
  margin: 0 auto;
  width: 94.76%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px;
  z-index: 0;
}

/* 오버레이: 모바일만 쓰던 것을 전체 해상도로 확장 */
.main-hero::before{
  content:"";
  position:absolute;
  inset:0;
  margin: 0 auto;
  width: 95%;
  height: 100%;
  background: rgba(0,0,0,.35);
  border-radius: 25px;
  z-index: 1;
}

/* 위에 얹히는 콘텐츠 (HTML에 .hero-content 없더라도 container에 적용되도록) */
.main-hero .container,
.hero-content{
  position: relative;
  z-index: 2;
  padding: 2rem 1rem;
  max-width: 920px;
}

/* 타이포: 자동 스케일 + 줄바꿈 안정화 */
.hero-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0 0 .75rem;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.hero-subtitle{
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.5;
  margin: 0 0 1.75rem;
  opacity: .92;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 버튼 그룹 */
.flex_wrap{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-note{
  margin-top: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
}

/* =========================
   2-1) 처음 이용 안내
========================= */
.home-guide-section{
  background:#f4f7fb;
  padding:4.5rem 1rem;
}
.home-guide-section__inner{
  max-width:1200px;
  margin:0 auto;
}
.home-guide-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:1.75rem;
}
.home-guide-section__head h2{
  margin:.25rem 0 0;
  color:#16365f;
  font-size:clamp(1.75rem, 3vw, 2.35rem);
  line-height:1.2;
  font-weight:850;
  letter-spacing:0;
  word-break:keep-all;
}
.home-guide-section__head img{
  width:min(38vw, 420px);
  max-height:210px;
  object-fit:contain;
}
.home-guide-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}
.home-guide-card{
  display:flex;
  align-items:center;
  gap:1.35rem;
  min-height:138px;
  padding:1.75rem;
  background:#fff;
  border:1px solid rgba(22,54,95,.08);
  border-radius:1rem;
  box-shadow:0 14px 28px rgba(15,23,42,.10);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-guide-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,198,255,.35);
  box-shadow:0 18px 34px rgba(15,23,42,.14);
}
.home-guide-card__icon{
  position:relative;
  flex:0 0 72px;
  width:72px;
  height:72px;
  border:0;
  border-radius:18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(232,242,255,.92)),
    #f7fbff;
  background-position:center;
  background-repeat:no-repeat;
  background-size:82px 82px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 22px rgba(37,99,235,.14);
}
.home-guide-card__icon::before,
.home-guide-card__icon::after{
  content:"";
  position:absolute;
}
.home-guide-card__icon--join{
  background-image:
    url("../../img/app-illustrations/guide-icon-join.png"),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(232,242,255,.92));
}
.home-guide-card__icon--join::before{
  display:none;
}
.home-guide-card__icon--join::after{
  display:none;
}
.home-guide-card__icon--request{
  background-image:
    url("../../img/app-illustrations/guide-icon-request.png"),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(232,242,255,.92));
}
.home-guide-card__icon--request::before{
  display:none;
}
.home-guide-card__icon--request::after{
  display:none;
}
.home-guide-card__icon--carelog{
  background-image:
    url("../../img/app-illustrations/guide-icon-carelog.png"),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(232,242,255,.92));
}
.home-guide-card__icon--carelog::before{
  display:none;
}
.home-guide-card__icon--carelog::after{
  display:none;
}
.home-guide-card__text{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.home-guide-card__text strong{
  color:#102a4c;
  font-size:1.25rem;
  line-height:1.25;
  font-weight:850;
  word-break:keep-all;
}
.home-guide-card__text small{
  color:#5b6472;
  font-size:.95rem;
  line-height:1.55;
  word-break:keep-all;
}

/* =========================
   3) FEATURES
========================= */
.features{
  background: #fff;
  padding: 4rem 0;
}
.features .container{
  display: flex;
  gap: 2rem;
}
.feature{
  flex: 1;
  text-align: center;
  padding: 1rem;
}
.feature h3{
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--text);
}
.feature p{
  color: #555;
  line-height: 1.5;
}

/* ================================
   4) 신청내역 확인 섹션 (history)
================================ */
.history-why-section{
  background: linear-gradient(129deg, #e0f4f3 3.42%, #e9f4d8 98.91%);
  border-radius: 2rem;
  padding: 7rem 1.5rem;
  margin: 4rem auto;
  max-width: 1800px;
}
.history-why-section .sec__inner{
  max-width: 1024px;
  margin: 0 auto;
}

/* tit-box */
.history-why-section .main-tit__sub-tit{
  color: var(--brand2);
  font-size: 1.125rem;
  text-align: center;
  margin-bottom: 1rem;
  word-break: keep-all;
}
.history-why-section .main-tit__tit{
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: #111;
  margin-bottom: 3rem;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.history-why-section .history-highlight{
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* CTA 버튼 */
.history-why-section .anchor-box1-wrap{
  display: flex;
  justify-content: center;
  margin-bottom: 4rem;
}
.history-why-section .xi-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.8rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.history-why-section .xi-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.history-why-section .btn-icon{
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* 카드 리스트 */
.history-why-section .cards-wrap,
.history-why-section .cards-container{
  overflow: visible !important;
}
.history-why-section .cards-list{
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: nowrap;
}

/* 카드 공통 */
.history-why-section .card-item{
  flex: 0 0 320px;
  width: 320px;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform .2s ease;
}
.history-why-section .card-item:hover{
  transform: translateY(-5px);
}

/* 카드 상단 이미지 */
.history-why-section .card-item .icon-wrap img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* 카드 색상 */
.history-why-section .card-item:nth-child(1){
  background: linear-gradient(152deg, #00b59b 3.69%, #00afb5 99.12%), #00b59b;
  color: #fff;
}
.history-why-section .card-item:nth-child(2){
  background: #ffffff;
  color: #111;
}
.history-why-section .card-item:nth-child(3){
  background: linear-gradient(150deg, #25abff 1.18%, #258bff 100%), #25abff;
  color: #fff;
}

/* box1 */
.history-why-section .card-item .box1{
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.history-why-section .card-item:nth-child(1) .box1{ background: rgba(255,255,255,0.15); }
.history-why-section .card-item:nth-child(2) .box1{ background: #f0f4f3; }
.history-why-section .card-item:nth-child(3) .box1{ background: rgba(255,255,255,0.2); }

/* box2 */
.history-why-section .card-item .box2{
  padding: 1rem 1.5rem 2rem;
  flex: 1;
}
.history-why-section .card-item .visual-item__tit{
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  word-break: keep-all;
}
.history-why-section .card-item .visual-item__des{
  font-size: 1rem;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* =========================
   5) CTA 배너
========================= */
.cta-banner{
  background: url('../img/advice_bg.jpg') no-repeat center/cover;
  border-radius: 2rem;
  padding: 7rem 1.5rem;
  margin: 4rem auto;
  max-width: 1800px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* 가독성 오버레이 */
.cta-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.28);
  z-index:0;
}
.cta-banner .cta-inner{
  position: relative;
  z-index: 1;
}

.cta-banner .cta-subtext{
  font-size: 1rem;
  margin-bottom: 1rem;
  opacity: 0.92;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.cta-banner .cta-title{
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 2rem;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.cta-banner .cta-buttons{
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cta-banner .cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.cta-banner .cta-btn.filled{
  background: var(--brand1);
  color: #fff;
}
.cta-banner .cta-btn.filled:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.cta-banner .cta-btn.outline{
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
}
.cta-banner .cta-btn.outline:hover{
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
}

/* =========================
   6) (옵션) sec-advice
   - 기존 rem 기반(147rem 등) 제거/정리
   - 실제 섹션이 사용 중일 때만 최소 형태로 유지
========================= */
.sec-advice .bg-area{
  border-radius: 2rem;
  padding: 4rem 1.5rem;
  width: 100%;
  background: center / cover url(../img/advice_bg.jpg) no-repeat;
  overflow: hidden;
}

/* ─────────────────────────────────────────
   Responsive (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px){

  /* 히어로 */
  .main-hero{
    height: 56vh;
    min-height: 440px;
    padding: 2rem 0;
  }
  .hero-video{
    width: 92%;
    border-radius: 20px;
  }
  .main-hero::before{
    width: 92%;
    border-radius: 20px;
    background: rgba(0,0,0,.40);
  }
  .main-hero .container,
  .hero-content{
    padding: 1.75rem 1rem;
  }

  /* 본문 콘텐츠가 하단 네비 아래로 가려지지 않도록 */
  body{ padding-bottom: 3.5rem; }

  /* features */
  .features{ padding: 3rem 0; }
  .features .container{ flex-direction: column; gap: 1.25rem; }
  .feature{ padding: 1.25rem 0; }

  .home-guide-section{
    padding:3.25rem 1rem;
  }
  .home-guide-section__head{
    display:block;
    text-align:center;
  }
  .home-guide-section__head img{
    width:100%;
    max-width:320px;
    margin:1.25rem auto 0;
  }
  .home-guide-cards{
    grid-template-columns:1fr;
  }
  .home-guide-card{
    min-height:118px;
    padding:1.25rem;
    border-radius:.9rem;
  }
  .home-guide-card__icon{
    flex-basis:62px;
    width:62px;
    height:62px;
    background-size:70px 70px;
  }
  .home-guide-card__text strong{
    font-size:1.08rem;
  }

  /* history 타이틀 */
  .history-why-section{ padding: 4.5rem 1rem; }
  .history-why-section .main-tit__tit{ font-size: 1.6rem; margin-bottom: 2.25rem; }
  .history-why-section .main-tit__sub-tit{ font-size: 1rem; }

  /* 카드: 세로 스택 */
  .history-why-section .cards-list{
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: nowrap;
  }
  .history-why-section .card-item{
    width: 100%;
    max-width: 520px;
    flex: 1 1 100%;
    margin: 0 auto;
    border-radius: 0.9rem;
  }
  .history-why-section .card-item .box1{ padding: 1.5rem; }
  .history-why-section .card-item .box2{ padding: 1rem 1.25rem 1.5rem; }
  .history-why-section .card-item .visual-item__tit{ font-size: 1.125rem; }
  .history-why-section .card-item .visual-item__des{ font-size: 0.95rem; }

  /* history CTA 간격 */
  .history-why-section .anchor-box1-wrap{ margin-bottom: 2.5rem; }

  /* cta-banner */
  .cta-banner{
    padding: 5.25rem 1.25rem;
    border-radius: 1.5rem;
  }
  .cta-banner .cta-title{ font-size: 1.55rem; }
  .cta-banner .cta-buttons{
    flex-direction: column;
    gap: 0.75rem;
  }

  /* 버튼그룹 */
  .flex_wrap{ gap: 10px; }

}