@charset "utf-8";

/*
 * File    : rwd-layout.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



/* **************************************** *
 * 1481px 이상: 축소하지 않는다
 *
 * layout.css 의 html{font-size:6.25%}(=1rem 1px)를 그대로 둔다.
 * 콘텐츠(.wrap 1440rem)는 설계 크기를 유지하고 남는 공간은 좌우 여백이 흡수한다.
 *   1920px → 여백 240px / 1512px → 36px / 1481px → 20px
 * **************************************** */



/* **************************************** *
 * 1480px: 콘텐츠 폭(1440)에 여백이 닿는 지점부터 축소 시작
 * **************************************** */
@media (max-width: 1480px){

    html,
    html.safari.desktop { font-size: 0.06756756756756757vw; }

    /* WRAP: max-width 해제 + 패딩 40 = 전 페이지 공통 거터 (홈·서브·헤더·푸터 동일 폭) */
    .wrap,
    .header__inner,
    .footer__inner { max-width: none; padding-left: var(--layout-gutter); padding-right: var(--layout-gutter); }

    /* LOCALE BANNER */
    .locale-banner__inner { max-width: none; padding-left: var(--layout-gutter); padding-right: calc(var(--layout-gutter) + 40rem); } /* 우측 = 여백 40 + 닫기 24 + 간격 16 */
    .locale-banner__close { right: var(--layout-gutter); }

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    html,
    html.safari.desktop { font-size: 0.0833333333333333vw; }

    /* HEADER */
    #header { height: 72rem; }
    #header:before { height: 130rem; }

    #logo { width: 190rem; }
    html[lang="ko-KR"] #logo { width: 110.2rem; }

    #menu > li > a { padding: 25rem 10rem 24rem; }

    .minimize#header #logo { width: 165rem; }
    html[lang="ko-KR"] .minimize#header #logo { width: 95.8rem; }

    /* FOOTER */
    #footer { padding: 64rem 0 72rem; }

    .footer__grid { gap: 48rem 0; }

    /* CONTAINER */
    .main-container { padding-top: 220rem; padding-bottom: 160rem; }

    /* PAGE */
    .article__header { padding-bottom: 56rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    html,
    html.safari.desktop { font-size: 0.13020833333333335vw; }

    /* WRAP */
    :root {
        --layout-gutter: 24rem;
    }

    /* LOCALE BANNER: 2행 구성(문구+닫기 / 셀렉트+Continue) */
    .locale-banner__inner { flex-direction: column; align-items: stretch; gap: 20rem; min-height: 0; padding: 20rem var(--layout-gutter); }
    .locale-banner__text { padding-right: 40rem; } /* 닫기 24 + 간격 16 */
    .locale-banner__close { top: 20rem; right: var(--layout-gutter); transform: none; }
    .locale-banner__controls { width: 100%; }
    .locale-banner__select { width: auto; flex: 1 1 auto; min-width: 0; }

    /* HEADER */
    #header { height: 64rem; }
    #header:before { height: 110rem; }

    .header__inner { height: 100%; z-index: 500; } /* small-menu-container(z499, header 자식)보다 위 - 열림 상태에서 로고 노출 */

    #logo { width: 170rem; }
    html[lang="ko-KR"] #logo { width: 98.8rem; }

    .menu-container { display: none; }

    .minimize#header #logo { width: 150rem; }
    html[lang="ko-KR"] .minimize#header #logo { width: 87.4rem; }

    /* MOBILE MENU CONTROLLER */
    .small-menu-controller { display: block; width: 44rem; height: 44rem; margin: 0; padding: 0; position: absolute; top: 50%; right: calc(var(--layout-gutter) - 9rem); background: none; border: 0; transform: translateY(-50%); cursor: pointer; z-index: 501; }
    .small-menu-controller:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    body:not(.open-menu) #header.header--invert:not(.minimize) .small-menu-controller:focus-visible { outline-color: var(--color-white); }
    /* 배너(z 510)는 헤더(z 500) 스태킹 컨텍스트 밖이라 z-index 로는 이길 수 없다: 로고와 함께 배너 아래로 내린다 */
    body.has-locale-banner #header:not(.sticky) .small-menu-controller { transform: translateY(calc(-50% + var(--locale-banner-h, 0px))); }
    /* 햄버거 3줄: 선 간격 4(중심 간 6), 라운드 없음. 모핑 오프셋은 main.js positionY(width/7.333)와 짝 */
    .small-menu-controller__line { display: block; width: 24rem; height: 2rem; margin-left: -12rem; position: absolute; left: 50%; background: var(--color-black); }
    .small-menu-controller__line--01 { top: calc(50% - 7rem); }
    .small-menu-controller__line--02 { top: calc(50% - 1rem); }
    .small-menu-controller__line--03 { top: calc(50% + 5rem); }

    #header.header--invert:not(.minimize) .small-menu-controller__line { background: var(--color-white); }

    /* MOBILE MENU CONTAINER */
    /* 크림 배경, 링크 블록 세로 중앙, 하단 SNS·약관·지역 */
    .small-menu-container { display: none; width: 100%; height: var(--menu-vh, 100vh); position: fixed; top: 0; left: 0; background: var(--color-bg-200); z-index: 499; } /* --menu-vh = JS 실측 innerHeight: 주소창 노출 시 100vh 초과분으로 하단 유틸이 잘리는 것 방지 */
    .small-menu-container__inner { display: flex; flex-direction: column; height: 100%; padding: 64rem var(--layout-gutter) 36rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    .small-menu-nav { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; }

    #small-menu { display: flex; flex-direction: column; gap: 12rem; }
    #small-menu > li > a { display: block; position: relative; font-size: var(--font-size-primary-02); line-height: var(--font-lineheight-primary-02); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-02); color: var(--color-black); }
    #small-menu > li.current-menu-item > a,
    #small-menu > li.current-menu-ancestor > a { color: var(--color-primary); }

    /* 하단 유틸 */
    .small-menu-utils { display: flex; flex-direction: column; align-items: flex-start; gap: 16rem; flex-shrink: 0; padding-top: 24rem; }
    .small-menu-utils__sns { display: none; gap: 24rem; } /* 노출 보류: 푸터 SNS 와 한 세트, 노출할 때는 display: flex */
    .small-menu-utils__sns a { display: block; }
    .small-menu-utils__sns .jt-icon { display: block; width: 24rem; height: 24rem; }
    .small-menu-utils__sns .jt-icon svg { width: 100%; height: 100%; display: block; }
    .small-menu-utils__links { display: flex; gap: 16rem; }
    .small-menu-utils__links a { color: var(--color-black); }
    .small-menu-utils__region { appearance: none; -webkit-appearance: none; width: auto; padding: 2rem 18rem 2rem 0; border: 0; font-family: inherit; color: var(--color-black); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4 6 8 10 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center / 12rem 12rem; cursor: pointer; }

    /* GNB 국가 선택 커스텀 셀렉트(jt-choices) 스킨: 푸터 스킨(layout.css)과 동일 톤. 데스크톱 뷰포트 축소 시 적용 */
    .small-menu-utils__region-wrap .choices { font-size: inherit; }
    .small-menu-utils__region-wrap .choices__inner { padding: 2rem 18rem 2rem 0; font-size: inherit; line-height: inherit; font-weight: inherit; color: var(--color-black); background: transparent; border: none; }
    .small-menu-utils__region-wrap .choices.jt-keyboard-focus:focus-visible { outline: revert; } /* 푸터 스킨(layout.css)과 같은 이유로 옆 메뉴 링크처럼 브라우저 기본 윤곽선 */
    .small-menu-utils__region-wrap .choices[data-type*=select-one] .choices__inner { padding-bottom: 2rem; }
    .small-menu-utils__region-wrap .choices[data-type*=select-one]::after { width: 12rem; opacity: 1; }
    .small-menu-utils__region-wrap .choices__list--dropdown,
    .small-menu-utils__region-wrap .choices__list[aria-expanded] { width: max-content; min-width: 100%; }
    .small-menu-utils__region-wrap .choices__list--dropdown .choices__item,
    .small-menu-utils__region-wrap .choices__list[aria-expanded] .choices__item { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); }

    /* 실기기(html.mobile)는 selectInit 스킵 → 네이티브 셀렉트: jt-strap 폼용 박스 스킨을 무력화해 위 텍스트형 유지 */
    html.mobile .jt-choices__wrap.small-menu-utils__region-wrap { background: transparent; overflow: visible; }
    html.mobile .jt-choices__wrap.small-menu-utils__region-wrap:before { display: none; }
    html.mobile .jt-choices__wrap > select.small-menu-utils__region { width: auto; height: auto; padding: 2rem 18rem 2rem 0; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4 6 8 10 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center / 12rem 12rem; }

    /* MOBILE MENU OPEN STATE */
    body.open-menu-fixed { overflow: hidden; }

    /* 헤더는 absolute 라 스크롤된 채 열면 로고·닫기 버튼이 뷰포트 밖에 남아 메뉴를 닫을 수 없다: 열림 중에는 오버레이처럼 뷰포트 상단에 고정 */
    body.open-menu #header:not(.sticky) { position: fixed; top: 0; }

    /* 열림 중에는 배너를 숨기고 로고·닫기 버튼을 헤더 원위치로 되돌린다: 배너(z 510)가 메뉴 오버레이 위에 남기 때문이다 */
    body.open-menu .locale-banner { visibility: hidden; }
    body.open-menu.has-locale-banner #header:not(.sticky) .header__inner,
    body.open-menu.has-locale-banner #header:not(.sticky):before { transform: none; }
    body.open-menu.has-locale-banner #header:not(.sticky) .small-menu-controller { transform: translateY(-50%); }

    body.open-menu #header:before { opacity: 0; visibility: hidden; }
    body.open-menu #header.header--invert:not(.minimize) #logo svg path { fill: var(--color-black); }
    body.open-menu #header.header--invert:not(.minimize) .small-menu-controller__line { background: var(--color-black); }

    /* FOOTER */
    #footer { padding: 56rem 0 64rem; }

    /* 순서 : 로고 / 메뉴 / 약관 / 구독 / SNS / 저작권 / 면책 / 국가(최하단) */
    .footer__grid { display: flex; flex-direction: column; gap: 30rem; }
    .footer__grid-item:nth-child(1) { order: 1; }
    .footer__grid-item:nth-child(2) { order: 2; }
    .footer__grid-item:nth-child(6) { order: 3; }
    .footer__grid-item:nth-child(3) { order: 4; }
    .footer__grid-item:nth-child(4) { display: none; order: 5; } /* SNS 노출 보류: 이 밴드는 flex 라 빈 아이템이 gap 을 남겨 아이템째 뺀다(order 는 DOM 순서 기준이라 나머지 배치는 그대로) */
    html[lang="ko-KR"] .footer__grid-item:nth-child(4) { display: block; } /* 국문은 같은 칸에 카카오 채널 버튼이 있다 */
    .footer__grid-item:nth-child(5) { order: 6; }
    .footer__grid-item:nth-child(8) { order: 7; } /* 면책: region 아이템 삽입으로 8번째 */
    .footer__grid-item--region { display: block; order: 8; }
    .footer__extra .footer__region-wrap { display: none; } /* 약관 줄의 버튼은 PC 전용: wrap째 숨겨 Choices UI 이중 노출 방지 */

    .footer__logo { width: 190rem; }
    html[lang="ko-KR"] .footer__logo { width: 145rem; }

    #footer-menu > li > a { padding: 8rem 0; }

    .footer__subscribe { max-width: 480rem; }
    .footer__subscribe form button { width: 110rem; }

    .footer__sns-container { margin: -6rem 0 -6rem -10rem; }
    .footer__sns li { width: 44rem; height: 44rem; }

    .footer__extra { justify-content: flex-start; flex-wrap: wrap; gap: 12rem 40rem; }
    #footer-extra-menu > li > :is(a, button) { padding: 8rem 12rem; }

    .footer__notice br { display: none; }

    /* CONTAINER */
    .main-container { padding-top: 170rem; padding-bottom: 120rem; }

    /* PAGE */
    .article__header { padding-bottom: 48rem; }
    .article__body { min-height: 280rem; }

    /* 404 */
    .error-404 { --font-size-secondary-01: 46rem; padding: 170rem 24rem 120rem; }
    .error-404__inner { gap: 40rem; }
    .error-404__art { width: 300rem; }
    .error-404__desc br { display: none; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    html,
    html.safari.desktop { font-size: 0.2564102564102564vw; }

    /* WRAP: 모바일 거터 16 (390 뷰포트에서 콘텐츠 358) */
    :root {
        --layout-gutter: 16rem;
    }

    /* HEADER */
    #header { height: 60rem; }
    #header:before { height: 90rem; }

    #logo { width: 150rem; }
    html[lang="ko-KR"] #logo { width: 115rem; }

    .minimize#header #logo { width: 136rem; }

    /* FOOTER */
    #footer { padding: 40rem 0 60rem; }
    #footer-menu > li > a { padding: 2rem 0; }

    .footer__grid { gap: 30rem; }

    .footer__logo { width: 151rem; }
    html[lang="ko-KR"] .footer__logo { width: 115rem; }

    .footer__subscribe form button { width: 120rem; }

    .footer__extra { gap: 10rem 32rem; }

    /* CONTAINER */
    .main-container { padding-top: 130rem; padding-bottom: 100rem; }

    /* PAGE */
    .article__header { padding-bottom: 40rem; }
    .article__body { min-height: 240rem; }

    /* 404: 헤더(60)와의 간격 확보를 위해 상단 여백 확대 */
    .error-404 { --font-size-secondary-01: 35rem; padding: 150rem 16rem 100rem; }
    .error-404__inner { gap: 32rem; }
    .error-404__art { width: 240rem; }

    /* SUBSCRIBE POPUP */
    .subscribe-popup__layer { width: calc(100vw - 32rem); max-height: calc(100vh - 48rem); padding: 40rem 24rem; }
    html:is(.ios, .android) .subscribe-popup__layer { max-height: calc(100svh - 48rem); } /* 100vh 는 주소창이 접힌 기준이라 펼쳐진 상태에선 팝업 하단이 잘린다 */
    .subscribe-popup__close { top: 16rem; right: 16rem; }
    .subscribe-popup__form { margin-top: 24rem; }
    .subscribe-popup__input { height: 52rem; padding: 0 16rem; }
    .subscribe-popup__field { margin-top: 16rem; }
    .subscribe-popup__actions { margin-top: 24rem; }

}