/* ============================================================
생태체험 — 반응형 (vw + clamp, 390px 모바일 목업 기준)
Breakpoints: 1400 · 1280 · 1080 · 900 · 768 · 550 · 450 · 390
============================================================ */

:root {
  --fluid-base: 390;
  --site-gutter: clamp(16px, 5.13vw, 32px);
  --section-title: clamp(22px, 6.15vw, 40px);
  --header-mobile-h: clamp(64px, 20.51vw, 80px);
  --hero-min-h: clamp(400px, 112.82vw, 760px);
  --btn-h: clamp(36px, 10.26vw, 40px);
  --radius-card: clamp(14px, 5.13vw, 20px);
  --radius-btn: clamp(20px, 10.26vw, 40px);
}

/* ── 1700px 이하: GNB 간격 vw ── */
@media (max-width: 1700px) {
  .header_in_wrap nav,
  .header_in_wrap .gnb {
    gap: clamp(12px, 1.76vw, 28px);
    --gnb-menu-gap: clamp(12px, 1.76vw, 28px);
  }
  
  .header_in_wrap .gnb {
    font-size: clamp(14px, 1.2vw, 20px);
  }
  
  .header_in_wrap .gnb li {
    padding: 0;
  }
  
  .gnb-dropdown--accordion .drop_btn,
  .gnb-dropdown--accordion .subnav2 > ul > li > a {
    font-size: clamp(13px, 1vw, 14px);
  }
}

/* 1280 ~ 1700: GNB 가로 메뉴 구간 간격 보강 */
@media (min-width: 1280px) and (max-width: 1700px) {
  .header_in_wrap nav,
  .header_in_wrap .gnb {
    gap: clamp(28px, 3.2vw, 52px);
    --gnb-menu-gap: clamp(28px, 3.2vw, 52px);
  }
}

/* ── 1400px ── */
@media (max-width: 1400px) {
  .wrapper-slider .parent-text.pt24 {
    padding-top: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .container14 {
    width: calc(100% - var(--site-gutter) * 2);
    max-width: 1400px;
  }
  
  .section2 h3,
  .section3-top-wrap h3,
  .section4-content-wrap h3 {
    font-size: clamp(28px, 3.57vw, 40px);
  }
  
  .section1-tab-wrap ul li {
    width: clamp(160px, 15.7vw, 220px);
    padding: clamp(20px, 2.14vw, 30px) 0;
  }
  
  .section1-content-wrap .left {
    width: min(711px, 50.8vw);
    height: auto;
  }
  
  .section4-card {
    --section4-media-w: clamp(240px, 22.86vw, 320px);
    --section4-media-h: clamp(135px, 12.86vw, 180px);
    --section4-card-bg-w: clamp(280px, 25.71vw, 360px);
    --section4-card-bg-h: clamp(172px, 15.71vw, 220px);
  }
  .main_slider_controls{
    padding-inline: 3rem;
    left: 0;
    transform: initial;
  }
}

/* ── 1280px ── */
@media (max-width: 1280px) {
  :root {
    --site-gutter: clamp(16px, 4.69vw, 28px);
  }
  
  .section2-content-wrap {
    --section2-gap: clamp(20px, 3.13vw, 40px);
    --section2-bottom-inset: clamp(20px, 3.9vw, 50px);
    padding-left: max(var(--site-gutter), calc((100vw - 1720px) / 2));
  }
  
  .section2-pair-col {
    max-width: min(660px, 51.56vw);
  }
  
  .section3-content-wrap {
    gap: clamp(32px, 4.69vw, 60px);
  }
  
  .section3-card-slider {
    width: clamp(280px, 26.56vw, 340px);
    height: clamp(280px, 26.56vw, 340px);
  }
  .section1-tab__label{
    font-size: max(13px, 1.5vw);
  }
  .section1-tab-wrap ul{
    gap: 2vw;
  }
  .section4-card__title h4{
    bottom: 13%;
  }
  .section4-card{
    min-height: auto;
    margin-bottom: 3rem;
  }
  .section4-content-wrap h3{
    margin-bottom: 0;
  }
  .section4-content-wrap .left{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 6vw;
  }
  .section4-content-wrap{
    flex-direction: column;
  }
}

/* ── 1080px ── */
@media (max-width: 1080px) {
  .section1-content-panel.is-active {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 4.63vw, 48px);
  }
  
  .section1-content-wrap .left {
    width: min(100%, 66vw);
  }
  
  .section1-content-wrap .right.txt-wrap {
    max-width: min(500px, 90vw);
  }
  
  .section3-content-wrap {
    flex-wrap: wrap;
  }
  
  .section3-notice-wrap .notice {
    max-width: min(300px, 42vw);
  }
  
  .section4-content-wrap {
    flex-wrap: wrap;
    gap: clamp(24px, 3.7vw, 40px);
  }
  
  .section4-content-wrap .right {
    justify-content: center;
  }
  .section2-card{
    flex-direction: column;
  }

  .section2-card .right {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ── 900px ── */
@media (max-width: 900px) {
  :root {
    --hero-min-h: clamp(380px, 112.82vw, 520px);
    --site-gutter: clamp(16px, 5.13vw, 24px);
  }
  
  
  .wrapper-slider .item {
    padding-inline: var(--site-gutter);
  }

  .info-text-sub {
    height: clamp(26px, 7.69vw, 30px);
    padding: 0 clamp(12px, 5.13vw, 20px);
  }
  
  /* 메인 비주얼 슬라이더만 — section3-card-controls와 분리 */
  .main_station .main_slider_controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .main_station .main_slider_fraction {
    font-size: clamp(16px, 5.64vw, 22px);
  }

  .main_station .main_slider_prev,
  .main_station .main_slider_next,
  .main_station .main_slider_prev svg,
  .main_station .main_slider_next svg {
    width: clamp(32px, 10.26vw, 40px);
    height: clamp(32px, 10.26vw, 40px);
  }

  .main_station .main_slider_detail {
    font-size: clamp(13px, 3.59vw, 15px);
    height: var(--btn-h);
    padding: 0 clamp(14px, 5.13vw, 20px);
  }

  .section3-card-controls.main_slider_controls {
    flex-wrap: nowrap;
    justify-content: center;
  }
  
  /* section1 */
  .section1::after {
    width: min(240px, 61.5vw);
    right: 8%;
    bottom: 0;
  }
  
  .section1-tab-wrap ul {
    flex-wrap: nowrap;
    gap: clamp(8px, 2.56vw, 16px);
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .section1-tab-wrap ul::-webkit-scrollbar {
    display: none;
  }
  
  .section1-tab-wrap ul li {
    flex: 0 0 auto;
    width: clamp(96px, 28.21vw, 140px);
    min-width: 96px;
    padding: clamp(14px, 4.1vw, 22px) 0;
    border-radius: clamp(12px, 5.13vw, 20px);
  }
  
  .section1-tab__icon {
    width: clamp(52px, 15.38vw, 72px);
    height: clamp(52px, 15.38vw, 72px);
  }
  
  .section1-tab__icon svg {
    width: clamp(28px, 10.26vw, 48px);
    height: auto;
  }
  
  /* .section1-tab__label {
  font-size: clamp(13px, 3.59vw, 16px) !important;
  } */
  
  .section1-content-panel.is-active {
    flex-direction: column;
    align-items: stretch;
    gap: 7vw;
  }
  
  .section1-content-wrap .left {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    height: auto;
  }
  
  .section1-content-wrap .right.txt-wrap {
    max-width: none;
    width: 100%;
  }
  
  .section1-content-wrap .button-wrap {
    flex-wrap: wrap;
    gap: clamp(8px, 2.56vw, 12px);
  }
  
  .section1-content-wrap .button-wrap > a,
  .section1-content-panel .button-wrap > a {
    flex: 1 1 auto;
    min-width: calc(50% - 6px);
    justify-content: center;
    height: var(--btn-h);
    padding: 0 clamp(12px, 4.1vw, 24px);
    border-radius: var(--radius-btn);
  }
  
  /* section2 — 900px 이하 카드·슬라이드 영역 */
  .section2 h3 {
    font-size: var(--section-title);
    left: 0;
    transform: none;
    width: 100%;
    text-align: left;
  }
  
  .section2-top-wrap {
    align-items: center;
    gap: clamp(8px, 2.56vw, 12px);
  }
  
  .section2-top-wrap .button-wrap {
    margin-left: auto;
  }
  
  .section2-content-wrap {
    --section2-gap: clamp(12px, 3.33vw, 20px);
    --section2-bottom-inset: clamp(16px, 4.44vw, 28px);
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    overflow-x: clip;
    overflow-y: visible;
  }
  
  .section2-swiper {
    overflow: visible;
  }
  
  .section2-swiper .swiper-wrapper {
    align-items: flex-end;
  }
  
  .section2-swiper .swiper-slide.section2-pair {
    width: auto;
    height: auto;
  }
  
  .section2-pair-col {
    max-width: min(310px, 82vw);
        width: min(310px, 82vw);
    gap: var(--section2-gap);
  }

  .section2-swiper .swiper-slide:nth-child(even) .section2-pair-col {
    transform: translateY(clamp(-12px, -3.33vw, -24px));
  }
  
  .section2-pair-col .section2-card--bottom {
    transform: translateX(var(--section2-bottom-inset));
  }
  
  .section2-card {
    gap: clamp(10px, 2.56vw, 16px);
    padding: clamp(14px, 3.59vw, 20px);
    border-radius: clamp(14px, 3.59vw, 18px);
    box-shadow: 0 0 20px 0 rgba(18, 70, 115, 0.35);
  }
  
  
  .section2-card .txt h4 {
    font-size: clamp(15px, 4.1vw, 18px) !important;
    line-height: 1.4;
  }
  
  .section2-card .txt p {
    font-size: clamp(14px, 3.33vw, 14px) !important;
  }
  
  .section2-card .right {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  
  .section2-card .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: clamp(8px, 2.05vw, 10px);
  }
  
  /* section3 */
  .section3-top-wrap h3 {
    font-size: var(--section-title);
  }
  
  .section3-content-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(28px, 8.21vw, 48px);
  }
  
  .section3-notice-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  
  .section3-notice-wrap .notice {
    max-width: none;
    width: 100%;
    margin-bottom: 3rem;
  }
  .section3-top-wrap{
    margin-bottom: 3rem;
  }
  .section3-notice-wrap .notice h5 {
    font-size: clamp(16px, 4.62vw, 22px) !important;
    line-height: 1.45;
  }
  
  .section3-content-wrap .right {
    width: 100%;
    justify-content: center;
  }
  
  .section3-card-slider {
    width: min(100%, 87.18vw);
    max-width: 340px;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
  }
  
  /* section4 — 900~450px: mo 배경 + ::after 이음 (동일 좌표) */
  .section4,
  .section4::after {
    background-image: url(../img/section04-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    /* background-size: 100% auto; */
    /* background-attachment: fixed; */
    background-position: center top;
  }

  .section4 {
    --footer-wave-overlap: clamp(80px, 25.64vw, 140px);
  }

  .section4::after {
    bottom: calc(-1 * var(--footer-wave-overlap));
    height: var(--footer-wave-overlap);
  }

  .section4 .pb14 {
    padding-bottom: 0;
  }
  .section4-content-wrap {
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 5.13vw, 28px);
  }
  
  .section4-content-wrap h3 {
    font-size: var(--section-title);
  }
  
  .section4-content-wrap .left ul {
    flex-wrap: wrap;
    gap: clamp(6px, 1.54vw, 8px);
  }
  
  /* footer — 상단 mo 배경 + 하단 블루(스크롤 없음) */
  #footer {
    position: relative;
    overflow-x: clip;
    margin-top: 0;
    padding-top: 0;
    --footer-wave-overlap: clamp(80px, 25.64vw, 140px);
    background-image: url(../img/footer-bg-mo.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
  }

  #footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    bottom: 0;
    z-index: 0;
    background: #005bab;
    pointer-events: none;
  }
  
  #footer .footer_waves{
    display: none;
  }
  #footer .holder {
    display: flex;
    flex-direction: column;
    padding-top: max(4rem, 12vw);
    gap: 30px;
    padding-top: 20vw;
  }

  /* logo_wrap을 맨 위로 — footer_bottom 레이아웃만 해제 */
  #footer .footer_bottom {
    display: contents;
  }

  #footer .footer_logo_wrap {
    order: -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  #footer .footer_nav {
    order: 0;
    gap: 30px;
  }

  #footer .siteinfo {
    order: 1;
  }

  #footer .footer_logo {
    position: static;
    margin-bottom: 0;
  }

  #footer .familysite {
    margin-left: 0;
    width: auto;
    max-width: min(188px, 48.21vw);
    flex-shrink: 0;
  }
  
  #footer .f_mnu.l,
  #footer .f_mnu.r.sub_mnu {
    width: 100%;
  }
  
  #footer .f_mnu.r.sub_mnu {
    flex-wrap: wrap;
  }
  
  #footer .siteinfo .ci {
    position: static;
    margin-bottom: 12px;
  }
  
  #footer .siteinfo address,
  #footer .siteinfo p {
    padding-left: 0;
    gap: 10px;
  }
  
  /* typography utilities */
  .font-24b {
    font-size: clamp(18px, 5.64vw, 24px) !important;
  }
  
  .font-22b {
    font-size: clamp(17px, 5.13vw, 22px) !important;
  }
  
  
  /* .font-18b,
  .font-18m,
  .font-18r {
  font-size: clamp(15px, 4.1vw, 18px) !important;
  } */
  
  .font-16b,
  .font-16r {
    font-size: clamp(14px, 3.59vw, 16px) !important;
  }
  
  .font-14b,
  .font-14r {
    font-size: clamp(14px, 3.33vw, 14px) !important;
  }
  
  .popup_wrap {
    top: var(--header-mobile-h) !important;
    left: 0 !important;
    max-width: min(450px, 100vw);
  }
  .pc-block{
    display: flex;
    /* bottom: 25%; */
    transform: translateY(-50%);
  }
  #footer .footer_content {
    padding-top: 0;
  }
}
@media (max-width: 800px) {
  /* section1 — 모바일 아코디언 탭 */
  .section1--accordion-mode .section1-tab-wrap.m80 {
    margin-bottom: clamp(16px, 4vw, 24px);
  }
  
  .section1--accordion-mode .section1-tab-wrap ul {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(8px, 2vw, 12px);
    overflow: visible;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li,
  .section1--accordion-mode .section1-tab-wrap ul li.is-active,
  .section1--accordion-mode .section1-tab-wrap ul li:hover,
  .section1--accordion-mode .section1-tab-wrap ul:hover li.is-active:not(:hover) {
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  
  .section1--accordion-mode .section1-tab-trigger {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    padding: clamp(14px, 3.5vw, 16px) clamp(40px, 10vw, 48px) clamp(14px, 3.5vw, 16px) clamp(16px, 4vw, 18px);
    border: none;
    border-radius: clamp(14px, 3.5vw, 16px);
    background: #d5d5d5;
    color: #242424;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li.is-open .section1-tab-trigger {
    background: #1bace4;
    color: #fff;
    box-shadow: 0 4px 16px rgba(27, 172, 228, 0.25);
  }
  
  .section1--accordion-mode .section1-tab-trigger .section1-tab {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: clamp(10px, 2.5vw, 12px);
    min-width: 0;
    width: auto;
  }
  
  .section1--accordion-mode .section1-tab-trigger .section1-tab__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #fff;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li.is-open .section1-tab-trigger .section1-tab__icon {
    background: #fff;
  }
  
  .section1--accordion-mode .section1-tab-trigger .section1-tab__icon svg {
    width: 25px;
    height: 25px;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li.is-open .section1-tab-trigger .section1-tab__icon svg path {
    fill: #1bace4;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li:not(.is-open) .section1-tab-trigger .section1-tab__icon svg path {
    fill: #b0b0b0;
  }
  
  .section1--accordion-mode .section1-tab-trigger .section1-tab__label {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li.is-ongoing .section1-tab__label {
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 1vw, 6px);
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    overflow: visible;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li.is-ongoing .section1-tab__label::after {
    content: "";
    position: relative;
    top: -3px;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3d3d;
  }
  
  .section1--accordion-mode .section1-tab-trigger .section1-tab__chevron {
    position: absolute;
    top: 50%;
    right: clamp(16px, 4vw, 18px);
    display: block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-left: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    box-sizing: border-box;
    transform: translateY(-30%) rotate(45deg);
    transform-origin: 50% 50%;
    transition: transform 0.25s ease;
    z-index: 1;
    pointer-events: none;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li.is-open .section1-tab-trigger .section1-tab__chevron {
    transform: translateY(-50%) rotate(-135deg);
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li.is-ongoing .section1-tab__icon {
    position: static;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li.is-ongoing .section1-active-dot--tab {
    display: none;
  }
  
  .section1--accordion-mode .section1-content-wrap {
    display: none;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li .section1-content-panel {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: clamp(16px, 4vw, 20px) 0 clamp(8px, 2vw, 12px);
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li.is-open .section1-content-panel {
    display: flex;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li .section1-content-panel[hidden] {
    display: none !important;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li .section1-content-panel .left {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li .section1-content-panel .right.txt-wrap {
    max-width: none;
    width: 100%;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li .section1-content-panel .button-wrap {
    flex-wrap: wrap;
    gap: clamp(8px, 2vw, 12px);
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li .section1-content-panel .button-wrap > a > span:has(svg) svg path {
    fill: #fff;
  }
  
  .section1--accordion-mode .section1-tab-wrap ul li .section1-content-panel .button-wrap > a {
    flex: 1 1 auto;
    min-width: calc(50% - 6px);
    justify-content: center;
  }
}
/* ── 768px ── */
@media (max-width: 768px) {
  :root {
    --section-title: clamp(20px, 5.73vw, 28px);
  }
  
  .container14,
  .container17 {
    /* width: calc(100% - var(--site-gutter) * 2); */
  }
  
  .section2-top-wrap h3,
  .section3-top-wrap h3,
  .section4-content-wrap h3 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 24px;
  }
  
  .section2-top-wrap .button-wrap .section2-prev,
  .section2-top-wrap .button-wrap .section2-next,
  .section2-top-wrap .button-wrap .section2-more,
  .section3-top-wrap .section2-more {
    width: clamp(32px, 10.26vw, 40px);
    height: clamp(32px, 10.26vw, 40px);
  }
  
  .section2-top-wrap .button-wrap .section2-prev svg,
  .section2-top-wrap .button-wrap .section2-next svg {
    width: 100%;
    height: 100%;
  }
  
  .section1-content-wrap .button-wrap > a,
  .section1-content-panel .button-wrap > a {
    min-width: 100%;
  }
  
  .gnb-all-panel .gnb > li > a {
    font-size: clamp(16px, 4.62vw, 18px);
  }
  #footer .holder{
    padding-top: 13rem;
  }
  #footer .f_mnu li a,
  #footer .siteinfo address{
    font-size: 14px !important;
  }
}

/* ── 550px ── */
@media (max-width: 550px) {
  :root {
    --header-mobile-h: clamp(60px, 18.18vw, 72px);
    --hero-min-h: clamp(360px, 109.09vw, 440px);
  }
  
  .info-text > div:nth-of-type(1) span {
    font-size: 40px;
  }
  
  .section1-tab-wrap ul li {
    width: clamp(88px, 30.91vw, 120px);
  }
  
  .section2-card .right {
    width: 100%;
  }
  
  .section3-notice-wrap .notice + .notice {
    /* margin-top: clamp(4px, 1.82vw, 8px); */
  }
  .section1-content-panel .font-18m{
    font-size: 16px;
    font-weight: 400;
  }
  .section1-content-panel .right p br{
    display: none;
  }
  #footer .footer_logo img,
  #footer .familysite dt a{
    width: 160px;
  }
  #footer .familysite dt a{
    padding: 8px 20px;
    line-height: normal;
    text-indent: initial;
    font-size: 16px;
  }
  #footer .sub_mnu li{
    padding: 10px 15px;
  }
}



/* ── 640px — section4 카드(1열) ── */
@media (max-width: 640px) {
  .section4-card {
    width: 100%;
    max-width: 350px;
    margin-inline: auto;
    --section4-card-bg-w: 100%;
    --section4-media-w: 320px;
    --section4-media-h: 180px;
    min-height: 0;
  }

  .section4-card > a {
    width: 100%;
    max-width: 350px;
    height: 190px;
    aspect-ratio: 360 / 220;
  }

  .section4-card__media {
    width: 320px;
    height: 180px;
  }

  .section4-card__media img {
    width: 320px;
    height: 180px;
  }
}

/* ── 450px ── */
@media (max-width: 450px) {
  :root {
    --site-gutter: clamp(14px, 4.44vw, 20px);
    --section-title: clamp(18px, 5.33vw, 24px);
    --font-12: 13px;
  }

  #footer {
    background-image: url(../img/footer-bg-mo-v1.png);
  }

  /* 상단 메뉴(개인정보·저작권·찾아오시는 길) 뷰포트 양끝까지 */
  #footer .f_mnu.l {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    justify-content: space-between;
    gap: 0;
  }

  #footer .f_mnu.l li {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }

  #footer .f_mnu.l li a {
    justify-content: center;
    width: 100%;
    gap: 0;
  }

  #footer .f_mnu.l li + li::before {
    left: 0;
  }
  
  .section1::before {
    background-image: url(../img/section01-bg-v1-mo.png);
  }
  
  .section1::after {
    width: min(250px, 65vw);
  }
  
  .section3-notice-wrap .notice h5 {
    font-size: clamp(18px, 4.44vw, 18px) !important;
    margin-bottom: 1rem;
  }
  .section3-notice-wrap .section3-line{
    margin-bottom: 1rem;
  }
  .section3-notice-wrap .notice-label--notice{
    margin-bottom: 1.5rem;
  }
  .section4-card__title {
    padding: clamp(12px, 4.44vw, 16px);
  }
  
  /* 450px 이하 — prev/next 화살표 없음(디자인), 더보기만 */
  .section2-top-wrap .button-wrap .section2-prev,
  .section2-top-wrap .button-wrap .section2-next {
    display: none;
  }
  
  .section2-pair-col {
    --section2-bottom-inset: 0;
  }
  
  .section2-pair-col .section2-card--bottom {
    transform: none;
    align-self: stretch;
    width: 100%;
  }
  .section2-top-wrap .button-wrap .section2-more{
    width: 36px;
    height: 36px;
  }
  .section4-content-wrap .left{
    margin-bottom: 5rem;
  }
  .section4-card__title h4 {
    bottom: 9%;
}
.section4-card{
  margin-bottom: 4rem;
}
#footer .siteinfo_addr_item + .siteinfo_addr_item::before{
  display: none;
}
#footer .siteinfo_addr_item + .siteinfo_addr_item{
  margin-left: 0;
  padding-left: 0;
}
.info-text > div:nth-of-type(1){
  font-size: 20px;
}
}


/* ── 390px — 목업 최종값 ── */
@media (max-width: 390px) {
  :root {
    --site-gutter: 20px;
    --header-mobile-h: 64px;
    --hero-min-h: 440px;
    --section-title: 22px;
    --btn-h: 36px;
    --radius-card: 16px;
    --radius-btn: 36px;
    --font-12: 13px;
  }
  .pc-block{
    bottom: 30%
  }
  .wrapper-slider .parent-text.pt24{
    top: 40%;
  }
  .main_station .main_slider_fraction {
    font-size: 18px;
  }

  .main_station .main_slider_detail {
    font-size: 16px !important;
    max-width: 260px;
    /* bottom: 35%; */
  }
  
  .header_link__icon {
    width: 32px;
    height: 32px;
  }
  
  .header_in_wrap nav .header_link {
    width: 32px;
    height: 32px;
  }
  
  .section1-tab-wrap ul li {
    width: 100px;
    padding: 14px 0;
  }
  
  .section1-tab__icon {
    width: 52px;
    height: 52px;
  }
  
  .section1-tab__label {
    font-size: 13px !important;
  }
  
  .section1-content-wrap .button-wrap > a,
  .section1-content-panel .button-wrap > a {
    min-width: 100%;
    font-size: 14px;
  }
  
  .section2 h3,
  .section3-top-wrap h3,
  .section4-content-wrap h3 {
    font-size: 24px;
  }
  
  .section2-pair-col {
    max-width: min(310px, 88vw);
    width: min(310px, 88vw);
    --section2-gap: 12px;
    --section2-bottom-inset: 0;
  }
  
  .section2-pair-col .section2-card--bottom {
    transform: none;
    align-self: stretch;
    width: 100%;
  }
  
  .section2-card {
    padding: 15px;
    gap: 10px;
  }
  
  .section2-card .txt h4 {
    font-size: 18px !important;
  }
  
  .section2-card .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .section1-content-panel .font-24b {
    font-size: 20px !important;
  }
  
  .font-16b {
    font-size: 16px !important;
  }
  .info-text > div:nth-of-type(1){
    font-size: 20px;
  }
  .info-text > div:nth-of-type(1) span{
    font-size: 40px;
  }
  .main_station .main_slider_prev svg,
  .main_station .main_slider_next svg,
  .section3-card-controls .main_slider_prev svg,
  .section3-card-controls .main_slider_next svg {
    width: 36px;
    height: 36px;
  }
  .section1-content-panel.is-active{
    gap: 9vw;
  }

  /* section4 — 390px 이하 이미지 반응형 축소 (640px 구간은 320×180 고정) */
  .section4-card {
    max-width: min(350px, calc(100vw - var(--site-gutter) * 2));
    --section4-media-w: clamp(200px, 82.05vw, 320px);
    --section4-media-h: calc(var(--section4-media-w) * 180 / 320);
  }

  .section4-card > a {
    height: auto;
    aspect-ratio: 360 / 220;
  }

  .section4-card__media {
    width: var(--section4-media-w);
    height: var(--section4-media-h);
  }

  .section4-card__media img {
    width: 100%;
    height: 100%;
  }
  #footer .holder {
    padding-top: 8rem;
}
#footer .familysite dt a{
  width: 40vw;
}
.section1-content-panel .button-wrap > a span{
  font-size: 16px;
}
#footer .siteinfo p{
  font-size: 12px !important;
  font-weight: 400;
}
}