@media (min-width: 1420px) {
  html {
  scroll-padding-top: 90px;
  scroll-behavior: smooth;
  }
}

@media (max-width: 1419px) {
  html {
  scroll-padding-top: 70px;
  scroll-behavior: smooth;
  }
}



/* ===============================
   Accordion
================================ */
.accordion-content {
  display: none;
}

.accordion-item.active+.accordion-content {
  display: block;
}


/* ===============================
   Grid Containers (Base)
   - container1 / container2 동일 베이스
   - container3 별도
================================ */
.container1,
.container2 {
  grid-template-areas:
    'a b'
    'c b';
}

.container3 {
  grid-template-areas:
    'a b'
    'c b';
}


/* ===============================
   Items: container1
================================ */
.title1 {
  grid-area: a;
  align-self: end;
}

.subtext1 {
  grid-area: c;
  align-self: start;
}

.thumb1 {
  grid-area: b;
}


/* ===============================
   Items: container2 (Base)
   - 데스크톱(801px+)에서 레이아웃 재정의됨
================================ */
.title2 {
  grid-area: a;
  align-self: end;
}

.subtext2 {
  grid-area: c;
  align-self: start;
}

.thumb2 {
  grid-area: b;
}


/* ===============================
   Items: container3
================================ */
.title3 {
  grid-area: b;
  align-self: end;
}

.subtext3 {
  grid-area: d;
  align-self: start;
}

.thumb3 {
  grid-area: c;
  justify-content: start;
}

.frontline {
  grid-area: a;
}

.backline {
  grid-area: f;
  align-self: end;
}


/* ===============================
   Mobile (≤800px)
================================ */
@media (max-width: 1023px) {

  .container1,
  .container2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      'a'
      'b'
      'c';
  }

  .container3 {
    grid-template-columns: 1fr;
    grid-template-areas:
      'a'
      'b'
      'c'
      'd'
      'f';
  }
}


/* ===============================
   Desktop (≥801px)
   - container2: 레이아웃/영역 재지정
   - container3: 세로 스택 + 좌측 고정 썸네일
================================ */
@media (min-width: 1024px) {

  /* container2: 
     a | b
     a | c
  */
  .container2 {
    grid-template-areas:
      'a b'
      'a c';
  }

  .title2 {
    grid-area: b;
    align-self: end;
  }

  .subtext2 {
    grid-area: c;
    align-self: start;
  }

  .thumb2 {
    grid-area: a;
    justify-content: start;
  }

  /* container3:
     c | a
     c | b
     c | d
     c | f
  */
  .container3 {
    grid-template-areas:
      'c a'
      'c b'
      'c d'
      'c f';
  }
}




.tab-scope input[name="tab_item"] {
  display: none;
}

.tab_content {
  display: none;
}

#skinclinic:checked~#skinclinic_content,
#liftingclinic:checked~#liftingclinic_content,
#obesityclinic:checked~#obesityclinic_content,
#painclinic:checked~#painclinic_content,
#dripclinic:checked~#dripclinic_content {
  display: block;

}

#skinclinic:checked~.tabs label[for="skinclinic"],
#liftingclinic:checked~.tabs label[for="liftingclinic"],
#obesityclinic:checked~.tabs label[for="obesityclinic"],
#painclinic:checked~.tabs label[for="painclinic"],
#dripclinic:checked~.tabs label[for="dripclinic"] {
  height: 60px;
  background-color: #B1977C;
  color: white;
}

@media (max-width: 1023px) {
  #skinclinic:checked~.tabs label[for="skinclinic"],
  #liftingclinic:checked~.tabs label[for="liftingclinic"],
  #obesityclinic:checked~.tabs label[for="obesityclinic"],
  #painclinic:checked~.tabs label[for="painclinic"],
  #dripclinic:checked~.tabs label[for="dripclinic"] {
    height: 50px;
    background-color: #B1977C;
    color: white;
  }

}



/* ✔ 전역 방식(권장): 향후 ID 바뀌어도 유지됨 */
.root_daum_roughmap,
.root_daum_roughmap>div,
.root_daum_roughmap iframe {
  width: 100% !important;
}

#daumRoughmapContainer1756356346185 .wrap_map,
#daumRoughmapContainer1756356346185 .wrap_map .map_root,
#daumRoughmapContainer1756356346185 .wrap_map .map_border {
  height: 100% !important;
}



main {
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  position: relative;
}



@media (max-width: 1419px) {
    .main{
        padding-top: 70px;
    }
}

@media (min-width: 1420px) {
    .main{
        padding-top: 90px;
    }
}