/* patch.css — 원본 style.css 위에 덧씌우는 레이어 */
.price-was{color:#a0a0a0;text-decoration:line-through;margin-right:4px;}
.car-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:8px 0 22px;}
.car-gallery figure{margin:0;}
.car-gallery img{width:100%;aspect-ratio:4/3;height:auto;object-fit:contain;background:#f2f2f2;border-radius:14px;display:block;}
.car-gallery figcaption{margin-top:8px;font-size:13px;color:#777;text-align:center;}

.trait-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.trait-grid li{background:#fff;border:1px solid #eee;border-radius:14px;padding:18px 20px;}
.trait-grid strong{display:block;font-size:15px;margin-bottom:6px;color:#333;}
.trait-grid span{font-size:13.5px;line-height:1.7;color:#777;}
.owner-vow{margin-top:14px;padding:14px 18px;background:#fff6f6;border-left:3px solid #f0a9a9;border-radius:8px;font-size:15px;line-height:1.8;color:#5a4a4a;}

/* == car-img-fill START == */
.car-gallery img,
.car-gallery figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: none;
  object-fit: cover;
  object-position: center;
  background: transparent;
  display: block;
  border-radius: 12px;
}
@media (max-width: 640px) {
  .car-gallery img,
  .car-gallery figure img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}
/* == car-img-fill END == */

/* == car-img-pos START == */
/* 외관 사진: 왼쪽(차 앞부분) 기준으로 채우기 */
.car-gallery img[src*="car_02"] {
  object-fit: cover;
  object-position: left center;
}
/* 뒷좌석 사진: 가운데 유지 */
.car-gallery img[src*="car_01"] {
  object-fit: cover;
  object-position: center;
}
/* == car-img-pos END == */

/* == hero-rotator START == */
.hero-rotator{display:grid;min-height:210px}
.hero-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s ease}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero-slide h1,.hero-slide p{opacity:0;transform:translateY(28px)}
.hero-slide.is-active h1{animation:heroUp .7s cubic-bezier(.22,.9,.3,1) forwards}
.hero-slide.is-active p{animation:heroUp .7s cubic-bezier(.22,.9,.3,1) .15s forwards}
@keyframes heroUp{to{opacity:1;transform:translateY(0)}}
.hero-dots{display:flex;gap:8px;margin:4px 0 22px}
.hero-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#e2d7d7;cursor:pointer;transition:all .3s}
.hero-dots button.is-active{width:26px;border-radius:5px;background:#e0607e}
.hero-visual{position:relative;aspect-ratio:4/3}
.hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .8s ease}
.hero-visual img.is-active{opacity:1}
@media (max-width:640px){.hero-rotator{min-height:230px}}
@media (prefers-reduced-motion:reduce){.hero-slide h1,.hero-slide p{opacity:1;transform:none;animation:none}}
/* == hero-rotator END == */

/* == hero-visual-fill START == */
.hero-visual,
.hero-grid .image-slot.tall.hero-visual {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
}
.hero-visual::before,
.hero-visual::after { content: none !important; }
.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: none;
  border-radius: 0;
}
@media (max-width: 900px) {
  .hero-visual, .hero-grid .image-slot.tall.hero-visual { aspect-ratio: 4 / 3; }
}
/* == hero-visual-fill END == */

/* == hero-img-scale START == */
.hero-visual,
.hero-grid .image-slot.tall.hero-visual {
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden;
  align-self: start;
}
.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  transform-origin: center top;
}
/* 다정씨 얼굴 크기 기준 배율 (숫자만 조정하세요) */
.hero-visual img[src*="hero_01"] { transform: scale(0.93); }  /* 육아보조 */
.hero-visual img[src*="hero_02"] { transform: scale(1.46); }  /* 등하원   */
.hero-visual img[src*="hero_03"] { transform: scale(1.22); }  /* 집안정리 */
.hero-visual img[src*="hero_04"] { transform: scale(0.9); }  /* 생활동행 */

/* 점 인디케이터가 본문에 붙지 않게 */
.hero-dots { margin: 18px 0 24px; }

@media (max-width: 900px) {
  .hero-visual, .hero-grid .image-slot.tall.hero-visual { aspect-ratio: 4 / 3; }
}
/* == hero-img-scale END == */

/* == hero-img-fit START == */
.hero-visual,
.hero-grid .image-slot.tall.hero-visual {
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;   /* 잘림 방지 */
  align-self: center;
}
.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform-origin: center center;
}
/* 다정씨 얼굴 크기 기준 배율 */
.hero-visual img[src*="hero_01"] { transform: scale(0.93); }  /* 육아보조 */
.hero-visual img[src*="hero_02"] { transform: scale(1.46); }  /* 등하원   */
.hero-visual img[src*="hero_03"] { transform: scale(1.16); }  /* 집안정리 */
.hero-visual img[src*="hero_04"] { transform: scale(0.9); }  /* 생활동행 */
/* == hero-img-fit END == */

/* == hero-img-fit2 START == */
.hero-visual,
.hero-grid .image-slot.tall.hero-visual {
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  align-self: start;          /* 위쪽 정렬 */
  margin-top: -24px;          /* 전체를 위로 */
}
.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  transform-origin: center top;   /* 커져도 아래로 안 밀림 */
}
/* 다정씨 얼굴 크기 기준 배율 */
.hero-visual img[src*="hero_01"] { transform: scale(0.93); }  /* 육아보조 */
.hero-visual img[src*="hero_02"] { transform: scale(1.46); }  /* 등하원   */
.hero-visual img[src*="hero_03"] { transform: scale(1.34); }  /* 집안정리 */
.hero-visual img[src*="hero_04"] { transform: scale(0.9); }  /* 생활동행 */

@media (max-width: 900px) {
  .hero-visual, .hero-grid .image-slot.tall.hero-visual { margin-top: 0; }
}
/* == hero-img-fit2 END == */

/* == hero-bg-clear START == */
.hero::before,
.hero::after { content: none !important; background: none !important; }
.hero { background: #fff !important; }
.hero-grid .image-slot,
.hero-visual { background: none !important; background-color: transparent !important; }
.hero-visual img { background: transparent !important; }
/* == hero-bg-clear END == */

/* == price-align START == */
.price-grid { align-items: stretch; }
.price-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.price-list { flex: 1 1 auto; }
.price-foot {
  margin-top: auto;        /* 버튼을 카드 아래로 밀어 정렬 */
  padding-top: 22px;
}
.price-foot .btn { width: 100%; }
.price-note {
  min-height: 72px;        /* 하단 안내문 높이 통일 */
  margin-top: 12px;
}
@media (max-width: 900px) {
  .price-note { min-height: 0; }
}
/* == price-align END == */

/* == cert-grid4 START == */
.cert-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
}
.cert-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid #eae5e0;
  border-radius: 12px;
  background: #fff;
}
.cert-name { font-weight: 700; font-size: 15px; color: #2A2620; }
.cert-meta { font-size: 13px; color: #7C7468; }
@media (max-width: 900px) { .cert-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cert-list { grid-template-columns: 1fr; } }
/* == cert-grid4 END == */

/* == note-center START == */
.note-center{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  max-width:760px;
  margin:0 auto 24px;
  text-align:center;
  line-height:1.5;
}
/* 폼 내부는 항상 좌측 정렬 */
form, form *, .form-grid, .field, .field label, .field input,
.field select, .field textarea, .form-note, .agree{
  text-align:left;
}
@media (max-width:640px){
  .note-center{ padding:0 16px; }
}
/* == note-center END == */

/* CTA_RESPONSIVE_COPY_START */

.cta-title-mo,
.cta-copy-mo{
  display:none;
}

.cta-title-pc,
.cta-copy-pc{
  display:block;
}

.cta-responsive-title{
  text-wrap:balance;
}

.cta-responsive-copy{
  text-wrap:balance;
}

@media (max-width: 767px){

  .cta-title-pc,
  .cta-copy-pc{
    display:none;
  }

  .cta-title-mo,
  .cta-copy-mo{
    display:block;
  }

  .cta-responsive-title{
    line-height:1.25;
  }

  .cta-responsive-copy{
    line-height:1.65;
  }

}

/* CTA_RESPONSIVE_COPY_END */

/* FAQ_HERO_COPY_START */

.faq-copy-pc{
  display:block;
}

.faq-copy-mo{
  display:none;
}

@media (max-width:767px){

  .faq-copy-pc{
    display:none;
  }

  .faq-copy-mo{
    display:block;
  }

  .faq-hero-copy{
    line-height:1.75;
  }

}

/* FAQ_HERO_COPY_END */

/* CONTACT_HERO_COPY_START */

.contact-copy-pc{
  display:block;
}

.contact-copy-mo{
  display:none;
}

@media (max-width:767px){

  .contact-copy-pc{
    display:none;
  }

  .contact-copy-mo{
    display:block;
  }

  .contact-hero-copy{
    line-height:1.75;
  }

}

/* CONTACT_HERO_COPY_END */

/* CODA_CONTENT_FINAL_START */

/*
   PC / 모바일 공통
   짧은 단어 한두 개만 마지막 줄에
   덩그러니 떨어지는 현상을 줄입니다.
*/

.coda-balanced-title,
h1,
h2,
h3,
h4 {
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
    hyphens: none;
}

.coda-balanced-copy,
.section-copy,
p,
li,
blockquote {
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: pretty;
    hyphens: none;
}

.coda-note-line {
    display: block;
    margin-top: .45em;
}

.coda-note-line:first-child {
    margin-top: 0;
}

/*
   서비스 두 그룹 제목
   기존 카드 컬러는 건드리지 않습니다.
*/
.coda-service-group-title {
    grid-column: 1 / -1;
    width: 100%;
    margin: 34px 0 4px;
    word-break: keep-all;
    text-wrap: balance;
}

@media (max-width: 767px) {

    .coda-balanced-title,
    h1,
    h2,
    h3,
    h4 {
        word-break: keep-all;
        text-wrap: balance;
    }

    .coda-balanced-copy,
    .section-copy,
    p,
    li,
    blockquote {
        word-break: keep-all;
        overflow-wrap: break-word;
        text-wrap: pretty;
    }

    .coda-note-line {
        margin-top: .65em;
    }

    .coda-service-group-title {
        margin-top: 28px;
    }
}

/* CODA_CONTENT_FINAL_END */

/* CODA_FINAL_LAYOUT_FIX_START */


/* ==========================================================
   PC / 모바일 글줄 균형
   ========================================================== */

.coda-balanced-title,
h1,
h2,
h3,
h4 {
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
  hyphens: none;
}


.coda-balanced-copy,
.section-copy,
p,
li,
blockquote {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  hyphens: none;
}


/* ==========================================================
   서비스 5 + 5 그룹
   ========================================================== */

.service-icons .svc-grid {
  align-items: stretch;
}


.coda-service-group-title {
  grid-column: 1 / -1;
  width: 100%;
  margin: 30px 0 8px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  word-break: keep-all;
}


.coda-service-group-title:first-child {
  margin-top: 8px;
}


/* ==========================================================
   가격 카드

   핵심:
   1. 세 카드 높이 동일
   2. 설명 시작 위치 동일
   3. 리스트 영역 높이 균형
   4. 상담 신청 버튼 Y축 동일
   ========================================================== */

.price-grid {
  align-items: stretch !important;
}


.price-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}


.price-card .price-lede {
  min-height: 72px;
}


.price-card .price-sub {
  min-height: 68px;
}


.price-card .price-list {
  flex: 1 1 auto !important;
  margin-bottom: 0;
}


.price-card .price-list li {
  min-height: 30px;
  line-height: 1.55;
}


.price-card .price-foot {
  margin-top: auto !important;
  padding-top: 22px !important;
  display: flex;
  flex-direction: column;
}


.price-card .price-foot .btn {
  width: 100% !important;
  margin-top: 0 !important;
  flex: 0 0 auto;
}


/*
   버튼 아래 안내문 높이를 동일하게 잡아야
   세 카드의 버튼 높이가 정확히 맞습니다.
*/

.price-card .price-note {
  min-height: 150px !important;
  margin-top: 12px !important;
}


.coda-note-line {
  display: block;
  margin-top: .55em;
}


.coda-note-line:first-child {
  margin-top: 0;
}


/* ==========================================================
   ABOUT 자격 3카드
   ========================================================== */

.owner-section .cert-list {
  display: grid !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}


.owner-section .cert-item {
  height: 100%;
}


.owner-section .cert-name {
  min-height: 48px;
  display: flex;
  align-items: flex-start;
}


/* ==========================================================
   QUICK CONTACT

   아이콘 / 제목 시작 높이 통일
   ========================================================== */

.contact-grid .cards {
  align-items: stretch;
}


.contact-grid .cards .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}


.contact-grid .cards .card-icon {
  min-height: 44px;
  display: flex;
  align-items: center;
}


.contact-grid .cards .card h3 {
  min-height: 30px;
}


.contact-grid .cards .card p {
  margin-bottom: 0;
}


/* ==========================================================
   후기 카드
   ========================================================== */

.review-grid {
  align-items: stretch;
}


/* ==========================================================
   모바일
   ========================================================== */

@media (max-width: 900px) {

  .price-card .price-lede,
  .price-card .price-sub,
  .price-card .price-note {
    min-height: 0 !important;
  }


  .price-card .price-list li {
    min-height: 0;
  }


  .owner-section .cert-list {
    grid-template-columns:
      1fr !important;
  }


  .owner-section .cert-name {
    min-height: 0;
  }
}


@media (max-width: 767px) {

  .coda-service-group-title {
    margin-top: 24px;
    font-size: 17px;
  }
}


/* CODA_FINAL_LAYOUT_FIX_END */

/* MOBILE_HERO_IMAGE_BUTTON_ORDER_START */

@media (max-width: 900px) {

  /* 기존 왼쪽 텍스트 래퍼를 풀어서
     이미지와 버튼의 순서를 모바일에서 직접 제어 */
  .hero .hero-grid > div:first-child {
    display: contents !important;
  }

  .hero .hero-rotator {
    order: 1;
  }

  .hero .hero-dots {
    order: 2;
  }

  /* 이미지가 버튼보다 위 */
  .hero .hero-visual {
    order: 3;
    width: 100%;
  }

  /* 버튼은 이미지 아래에서 가로 2개 */
  .hero .button-row {
    order: 4;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100%;
    margin-top: 24px;
  }

  .hero .button-row .btn {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* 기존 오픈 할인 배지 숨김 */
  .hero .hero-badge {
    display: none !important;
  }
}

/* MOBILE_HERO_IMAGE_BUTTON_ORDER_END */

/* == DAJUNG_MOBILE_HERO_FINAL START == */

/* ----------------------------------------------------------
   햄버거 메뉴
---------------------------------------------------------- */
@media (max-width: 900px) {

    .nav-toggle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        outline: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;
        box-shadow: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .nav-toggle span {
        position: relative !important;
        display: block !important;

        width: 26px !important;
        height: 2px !important;

        background: #222 !important;
        border-radius: 2px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-toggle span::before,
    .nav-toggle span::after {
        content: "" !important;

        position: absolute !important;
        left: 0 !important;

        width: 26px !important;
        height: 2px !important;

        background: #222 !important;
        border-radius: 2px !important;

        transition: transform .2s ease, top .2s ease !important;
    }

    .nav-toggle span::before {
        top: -7px !important;
    }

    .nav-toggle span::after {
        top: 7px !important;
    }

    .nav-toggle[aria-expanded="true"] span {
        background: transparent !important;
    }

    .nav-toggle[aria-expanded="true"] span::before {
        top: 0 !important;
        transform: rotate(45deg) !important;
    }

    .nav-toggle[aria-expanded="true"] span::after {
        top: 0 !important;
        transform: rotate(-45deg) !important;
    }
}


/* ----------------------------------------------------------
   모바일 메인 히어로
---------------------------------------------------------- */
@media (max-width: 640px) {

    .hero {
        min-height: 0 !important;
        height: auto !important;

        padding-top: 34px !important;
        padding-bottom: 30px !important;

        overflow: visible !important;
    }

    .hero .hero-grid {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        gap: 0 !important;
    }

    /* 제목 + 설명 영역 높이 고정
       장면이 바뀌어도 dot 위치가 움직이지 않음 */
    .hero .hero-rotator {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .hero .hero-slide {
        height: 190px !important;
    }

    /* dot 위치 고정 */
    .hero .hero-dots {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        height: 18px !important;

        margin: 8px 0 0 !important;
        padding: 0 !important;

        z-index: 5 !important;
    }


    /* ------------------------------------------------------
       이미지 영역
       영역 자체는 그대로 두고 그림만 위로 올림
       → 버튼과 충돌하지 않음
    ------------------------------------------------------ */

    .hero .hero-visual,
    .hero .hero-grid .image-slot.tall.hero-visual {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 4 / 3 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        overflow: visible !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .hero .hero-visual img,
    .hero .hero-visual img[src*="hero_01"],
    .hero .hero-visual img[src*="hero_02"],
    .hero .hero-visual img[src*="hero_03"],
    .hero .hero-visual img[src*="hero_04"] {

        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center center !important;

        /* 비율은 그대로, 그림만 위로 */
        transform: translateY(-55px) !important;

        margin: 0 !important;
    }


    /* ------------------------------------------------------
       하단 버튼
       이미지 영역 뒤에 별도 배치
    ------------------------------------------------------ */

    .hero.mobile-hero-final .button-row {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 3 !important;
    }

    .hero.mobile-hero-final .button-row .btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;

        margin: 0 !important;
        padding: 0 10px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* == DAJUNG_MOBILE_HERO_FINAL END == */