/* ==========================================================================
   common — shared
   --------------------------------------------------------------------------
   인트로 잠금 · 헤더 연동 · 공통 유틸 · visual_scroll
========================================================================== */

/* --------------------------------------------------------------------------
   common — layout
-------------------------------------------------------------------------- */

body {
    overflow: hidden;
}

/* 인트로 진행 중 — 풀페이지/문서 스크롤 차단 */
html.is-intro-playing,
html.is-intro-playing body {
    overflow: hidden !important;
    overscroll-behavior: none;
    height: 100%;
    touch-action: none;
}

html.is-intro-playing #fullpage {
    pointer-events: none;
}

.pc-only {
    display: block;
}

.m-only {
    display: none;
}

/* --------------------------------------------------------------------------
   common — responsive
-------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .pc-only {
        display: none;
    }

    .m-only {
        display: block;
    }
}

.temp_header_skin1.header_bk .header_con {
    box-shadow: unset;
}

@media screen and (min-width: 1025px) {
    .temp_header_skin1.header_bk .header_con {
        /* background: #fff; */
    }

    /* PC: 기본 다크 헤더 → 화이트 전환 */
    .temp_header_skin1.header_wh .logo path {
        fill: #fff;
    }

    .temp_header_skin1.header_wh .header_con .gnb_depth_1>li>a {
        color: #fff;
    }

    .temp_header_skin1.header_wh .phone_num path {
        stroke: #fff;
        transition: all .3s;
    }

    .temp_header_skin1.header_wh .phone_num a {
        color: #fff;
    }

    .temp_header_skin1.header_wh .hamburger_icon i {
        background: #fff;
    }

    .temp_header_skin1.header_wh .header_bgm span {
        color: #fff;
    }

    .temp_header_skin1.header_wh .header_bgm .bgm_line ul li {
        background-color: #fff;
    }

    .temp_header_skin1.header_wh.hover .logo path {
        fill: var(--main-color);
    }

    .temp_header_skin1.header_wh.hover .header_con .gnb_depth_1>li>a {
        color: #222;
    }

    .temp_header_skin1.header_wh.hover .phone_num path {
        stroke: #222;
    }

    .temp_header_skin1.header_wh.hover .phone_num a {
        color: #222;
    }

    .temp_header_skin1.header_wh.hover .header_bgm span {
        color: #010101;
    }

    .temp_header_skin1.header_wh.hover .header_bgm .bgm_line ul li {
        background-color: #010101;
    }
}

.temp_header_skin1.hover .header_con {
    background: #fff;
}

.temp_header_skin1.header_bk .logo path {
    fill: var(--main-color);
}

.temp_header_skin1.header_bk .header_con .gnb_depth_1>li>a {
    color: #222;
}

.temp_header_skin1.header_bk .phone_num path {
    stroke: #222;
    transition: all .3s;
}

.temp_header_skin1.header_bk .phone_num a {
    color: #222;
}

.temp_header_skin1.header_bk .hamburger_icon i {
    background: #222;
}

.temp_header_skin1.header_bk.active .logo path {
    fill: #fff;
}

.temp_header_skin1.header_bk.active .header_con .gnb_depth_1>li>a {
    color: #fff;
}

.temp_header_skin1.header_bk.active .phone_num path {
    stroke: #fff;
}

.temp_header_skin1.header_bk.active .phone_num a {
    color: #fff;
}

.temp_header_skin1.header_bk.active .hamburger_icon i {
    background: #fff;
}

@media screen and (max-width: 1024px) {

    .temp_header_skin1.on .hamburger_icon i,
    .temp_header_skin1.header_active .hamburger_icon i {
        background: #fff !important;
    }

    .temp_header_skin1.header_bk .header_util .hamburger_icon i {
        background: #000 !important;
    }

    .temp_header_skin1.header_bk.active .hamburger_icon i {
        background: #fff !important;
    }

    .temp_header_skin1 .header_util .top_tel svg path {
        stroke: #fff;
    }

    .temp_header_skin1 .logo svg path {
        fill: #fff;
    }

    .temp_header_skin1.header_bk .header_util .top_tel svg path {
        stroke: #000;
    }

    .temp_header_skin1 .header_bgm span {
        color: #fff;
    }

    .temp_header_skin1 .header_bgm .bgm_line ul li {
        background-color: #fff;
    }

    .temp_header_skin1.header_bk .header_bgm .bgm_line ul li {
        background: #000;
    }

    .temp_header_skin1.header_bk .header_bgm span {
        color: #000;
    }
}

/*
  용도 : 이미지컷 라벨
  기본: 오른쪽 하단 / .center 추가 시 중앙
*/
.img_cut {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: auto;
    top: auto;
    margin: 0;
    z-index: 2;
    color: #fff;
    font-family: SUIT, Pretendard, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    pointer-events: none;
    white-space: nowrap;
}

.img_cut.left {
    left: 10px;
    right: auto;
}

.img_cut.center {
    left: 50%;
    right: unset;
    transform: translateX(-50%);
}

@media screen and (max-width: 1024px) {
    .img_cut {
        right: 5px;
        bottom: 5px;
        font-size: 10px;
    }

    .img_cut.left {
        left: 5px;
        right: auto;
    }

    .img_cut.center {
        bottom: unset;
        top: 13px;
    }
}


.caution_indent {
    position: absolute;
    bottom: 40px;
    right: 8vw;
    color: #424242;
    font-size: 13px;
    font-weight: 400;
}

.caution_indent.wh {
    color: #fff;
}

@media screen and (max-width: 768px) {
    .caution_indent {
        font-size: 9px;
        right: 20px;
    }
}

.section {
    position: relative;
}

#fullpage {
    position: relative;
    z-index: 1;
}

.section .bg,
.section .bg img,
.section .bg video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.section_inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 60px;
}

@media screen and (max-width: 1024px) {
    .section_inner {
        padding: 0 20px;
    }
}

.visual_scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 45px;
    height: auto;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.5s;
}

.visual_scroll.hidden {
    opacity: 0;
}

.visual_scroll_txt {
    font-family: Blinker, SUIT, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.52px;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    /* display: none; */
    display: block;
}

.visual_scroll_line {
    position: relative;
    display: block;
    width: 3px;
    height: 40px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.visual_scroll_line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40%;
    background: #fff;
}

.visual_scroll_line::after {
    animation: visual-scroll-pulse 1.6s ease-in-out infinite;
}

.fp-viewing-1-1 .visual_scroll {
    opacity: 0;
}

.fp-viewing-0-1 .visual_scroll_line,
.fp-viewing-1-0 .visual_scroll_line,
.fp-viewing-2 .visual_scroll_line,

.fp-viewing-4-2 .visual_scroll_line,
.fp-viewing-4-3 .visual_scroll_line,
.fp-viewing-5 .visual_scroll_line,
.fp-viewing-6 .visual_scroll_line,
.fp-viewing-7 .visual_scroll_line {
    background: rgba(0, 0, 0, 0.3);
}

.fp-viewing-0-1 .visual_scroll_txt,
.fp-viewing-1-0 .visual_scroll_txt,
.fp-viewing-2 .visual_scroll_txt,

.fp-viewing-4-2 .visual_scroll_txt,
.fp-viewing-4-3 .visual_scroll_txt,
.fp-viewing-5 .visual_scroll_txt,
.fp-viewing-6 .visual_scroll_txt,
.fp-viewing-7 .visual_scroll_txt {
    color: #000;
}


.fp-viewing-0-1 .visual_scroll_line::after,
.fp-viewing-1-0 .visual_scroll_line::after,
.fp-viewing-2 .visual_scroll_line::after,

.fp-viewing-4-2 .visual_scroll_line::after,
.fp-viewing-4-3 .visual_scroll_line::after,
.fp-viewing-5 .visual_scroll_line::after,
.fp-viewing-6 .visual_scroll_line::after,
.fp-viewing-7 .visual_scroll_line::after {
    background: #000;
}

@media screen and (max-width: 1024px) {

    .fp-viewing-3-1 .visual_scroll,
    .fp-viewing-4-2 .visual_scroll,
    .fp-viewing-4-3 .visual_scroll {
        opacity: 0;
        transition: opacity 0.5s;
    }
}







/* ==========================================================================
   section_visual — MAIN VISUAL
   --------------------------------------------------------------------------
   구조: layout → responsive → animation (하위 블록)
   step0 풀블리드 / on1 deco+mask / on2 calendar
========================================================================== */

/* --------------------------------------------------------------------------
   section_visual — layout (hero)
-------------------------------------------------------------------------- */
.section_visual {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    height: 100%;
    min-height: 100%;
    background: url(/resources/img/main/main_brand_bg_img2.jpg) no-repeat center center / cover;
}

.main_visual_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

/* 비디오를 감싸는 박스 — on1에서 이 박스 크기만 줄임 */
.visual_media_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
    z-index: 2;
}

/* Figma 721:1125 — 좌측 다크 그라데이션 */
/* .visual_media_box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
    transition: opacity 0.6s, background 0.6s;
    pointer-events: none;
} */

.main_visual_bg video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: opacity 0.8s;
}

.main_visual_bg .bg_calendar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s;
}

.section_visual .bg img {
    width: 120%;
    height: 100%;
    margin-left: -10%;
    object-position: center center;
    will-change: transform;
    transform-origin: center center;
    transform: translate3d(-7%, 0, 0);
}

.section_visual .visual_container {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    transition: opacity 0.55s var(--mask-clip-ease, ease), visibility 0.55s;
}

.section_visual .section_inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0 clamp(20px, calc(160 / 1920 * 100vw), 160px);
    box-sizing: border-box;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section_visual .visual_copy {
    position: relative;
    width: fit-content;
    max-width: min(90vw, 720px);
    margin-top: clamp(-40px, calc(-20 / 1080 * 100vh), 0);
    margin-bottom: 90px;
}

.section_visual .copy_box {
    display: block;
    width: fit-content;
    margin: 0 0 clamp(8px, calc(16 / 1080 * 100vh), 20px);
    padding-left: 12vw;
    pointer-events: none;
}

.section_visual .copy_box img {
    display: block;
    width: clamp(220px, calc(424 / 1920 * 100vw), 424px);
    height: auto;
}

.section_visual .sub_txt {
    font-family: SUIT, sans-serif;
    font-size: clamp(16px, calc(24 / 1920 * 100vw), 30px);
    font-weight: 300;
    line-height: 1.25;
    margin-bottom: 20px;
    color: #fff;
}

.section_visual .main_txt {
    font-family: 'Nanum Myeongjo', serif;
    font-size: clamp(28px, calc(48 / 1920 * 100vw), 56px);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 28px;
    color: #fff;
}

.section_visual .brand_txt {
    font-family: SUIT, sans-serif;
    font-size: clamp(16px, calc(24 / 1920 * 100vw), 28px);
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    color: #fff;
}

/* GRAND OPEN (PC) / 관심고객등록 (MO) — 분리 */
.section_visual .open_box {
    position: absolute;
    left: clamp(20px, calc(160 / 1920 * 100vw), 160px);
    bottom: clamp(28px, calc(74 / 1080 * 100vh), 74px);
    width: clamp(72px, calc(95 / 1920 * 100vw), 95px);
    height: clamp(72px, calc(95 / 1920 * 100vw), 95px);
    z-index: 3;
    text-decoration: none;
    color: inherit;
}

.section_visual .open_box_mo {
    display: none;
}

.section_visual .open_spin {
    position: absolute;
    inset: 0;
}

.section_visual .open_spin_layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 50%;
    will-change: transform;
}

.section_visual .open_label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: center;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

.section_visual .open_box_pc .open_label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.section_visual .open_box_pc .open_label span {
    font-family: SUIT, sans-serif;
    font-weight: 800;
    font-size: clamp(9px, calc(12 / 1920 * 100vw), 12px);
}

.section_visual .open_box_pc .open_label strong {
    font-family: SUIT, sans-serif;
    font-weight: 800;
    font-size: clamp(12px, calc(16 / 1920 * 100vw), 16px);
}

.section_visual .caution {
    position: absolute;
    right: clamp(20px, calc(150 / 1920 * 100vw), 150px);
    bottom: clamp(20px, calc(58 / 1080 * 100vh), 58px);
    margin: 0;
    font-family: SUIT, sans-serif;
    font-size: clamp(11px, calc(14 / 1920 * 100vw), 14px);
    font-weight: 400;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
    max-width: min(62vw, 460px);
}

.section_visual .caution .mo_br {
    display: none;
}


/* --------------------------------------------------------------------------
   section_visual — responsive (hero ≤1024, Figma 852:691)
-------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .main_visual_bg video {
        object-position: 60%;
    }

    .section_visual .bg img {
        margin-left: -10%;
        transform: translate3d(-10%, 0, 0);
    }

    .visual_media_box::after {
        /* Figma 852:694 — 전체 딤 */
        background: rgba(0, 0, 0, 0.3);
    }

    .section_visual .section_inner {
        padding: 0 20px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .section_visual .visual_copy {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .section_visual .copy_box {
        margin: 0 0 20px;
    }

    .section_visual .copy_box img {
        width: min(55vw, 220px);
    }

    .section_visual .sub_txt {
        font-size: 17px;
        font-weight: 400;
        margin: 0 0 20px;
    }

    .section_visual .main_txt {
        font-size: 35px;
        margin: 0 0 20px;
    }

    .section_visual .brand_txt {
        font-size: 25px;
        font-weight: 600;
    }

    .section_visual .open_box_pc {
        display: none;
    }

    .section_visual .open_box_mo {
        display: block;
        left: auto;
        right: 14px;
        bottom: 20px;
        width: 99px;
        height: 99px;
    }

    .section_visual .open_box_mo .open_label {
        font-family: Pretendard, SUIT, sans-serif;
        font-weight: 900;
        font-size: 12px;
        letter-spacing: -0.3px;
        white-space: nowrap;
    }

    .section_visual .caution {
        left: 20px;
        right: 120px;
        bottom: 58px;
        max-width: none;
        font-size: 13px;
        font-weight: 300;
        line-height: 1.35;
        color: rgba(255, 255, 255, 0.6);
        text-align: left;
        text-indent: -0.9rem;
        padding-left: 0.9rem;
        word-break: keep-all;
    }

    .section_visual .caution .mo_br {
        display: block;
    }


}

@media screen and (max-width: 768px) {
    .section_visual .copy_box {
        margin-left: auto;
    }

    .section_visual .visual_copy {
        padding-left: 0;
        margin-bottom: 14%;
    }
}

@media screen and (max-width: 480px) {
    .section_visual .main_txt {
        font-size: 30px;
    }

    .section_visual .brand_txt {
        font-size: 20px;
    }
}


/* --------------------------------------------------------------------------
   section_visual — animation (hero)
-------------------------------------------------------------------------- */
@keyframes moveLeft {
    from {
        transform: translate3d(-7%, 0, 0);
    }

    to {
        transform: translate3d(5%, 0, 0);
    }
}

@keyframes open-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes visual-copy-in {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes visual-scroll-pulse {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(250%);
    }
}

.section_visual .bg img {
    animation: moveLeft 6s ease-in-out infinite alternate;
}

.section_visual .open_spin_layer {
    animation: open-spin 20s linear infinite;
}

.section_visual .copy_box img {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.96);
}

.main_active .section_visual .copy_box img {
    animation: visual-copy-in 2.5s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
}


@media screen and (max-width: 1024px) {
    .section_visual .bg img {
        animation-duration: 3s;
    }
}

@media (prefers-reduced-motion: reduce) {

    .section_visual .bg img,
    .section_visual .open_spin_layer,
    .section_visual .visual_scroll_line::after {
        animation: none;
    }

    .section_visual .copy_box img,
    .main_active .section_visual .copy_box img {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ANIMATION ::: MAIN */

.temp_header_skin1 .header_con {
    transform: translateY(-100%);
    transition: transform 0.7s;
}

.temp_header_skin1.header_active .header_con {
    transform: translateY(0);
    background: transparent;
}

/* header_con 숨김 시에도 #header(90px) 투명 hit 영역 호버로 서브메뉴가 열리지 않게 */
.temp_header_skin1:not(.header_active) {
    pointer-events: none;
}

.temp_header_skin1:not(.header_active) .header_con .gnb_depth_2 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* --------------------------------------------------------------------------
   section_visual — layout (on1 mask + deco + on2 calendar)
-------------------------------------------------------------------------- */
.section_visual {
    /* Figma frame 1920×950 · center box 472×472 · radius 15 */
    /* 헤더에 가리지 않도록 안전영역 확보 후 비율 유지 축소 */
    --visual-header-safe: 90px;
    --on1-scale: 0.94;
    --stage-w: calc(min(100vw, calc((100vh - var(--visual-header-safe)) * 1920 / 950)) * var(--on1-scale));
    --stage-h: calc(var(--stage-w) * 950 / 1920);
    --mask-size: calc(var(--stage-w) * 472 / 1920);
    --mask-radius: max(10px, calc(var(--stage-w) * 15 / 1920));
    --on1-center-y: calc(50% + (var(--visual-header-safe) / 2));
    /* width/height 애니: 끝구간 급감속 완화 + 약간 늘려 프레임당 변화량 감소 */
    --mask-clip-duration: 1.85s;
    --mask-clip-ease: cubic-bezier(0.4, 0.05, 0.2, 1);
    /* box 축소 완료 후 여유를 두고 deco 등장 */
    --deco-delay: 0.55s;
    --deco-duration: 1.95s;
    --deco-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 기본(step 0): 풀블리드, radius 없음 — on1에서 크기/radius만 트랜지션 */
.visual_media_box {
    transition:
        width var(--mask-clip-duration) var(--mask-clip-ease),
        height var(--mask-clip-duration) var(--mask-clip-ease),
        border-radius var(--mask-clip-duration) var(--mask-clip-ease),
        top var(--mask-clip-duration) var(--mask-clip-ease);
}

.section_visual.on1 .visual_media_box {
    width: var(--mask-size);
    height: var(--mask-size);
    border-radius: var(--mask-radius);
    top: var(--on1-center-y);
}

.section_visual.on1 .visual_media_box::after {
    opacity: 0.15;
    transition: opacity 0.6s var(--mask-clip-ease);
}

.section_visual.on1 .visual_container,
.section_visual.on2 .visual_container {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* deco — Figma absolute 좌표(겹침 없이 ~10px 갭) */
.section_visual .deco_img_container {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    pointer-events: none;
    box-sizing: border-box;
    transition: padding-top var(--mask-clip-duration) var(--mask-clip-ease);
}

/* on1: 헤더 아래 안전영역에서 스테이지 수직 중앙 정렬 */
.section_visual.on1 .deco_img_container {
    padding-top: var(--visual-header-safe);
}

/* deco title — 스테이지 좌상단 카피 (Figma MapoGoldenPier 40 / lh 110%) */
.section_visual .deco_title {
    position: absolute;
    z-index: 3;
    margin: 0;
    left: calc(50% - (var(--stage-w) / 2) + var(--stage-w) * 151 / 1920);
    top: calc(50% + (var(--visual-header-safe) / 2) - (var(--stage-h) / 2) + var(--stage-h) * 95 / 950);
    width: calc(var(--stage-w) * 720 / 1920);
    color: #000;
    font-family: "MapoGoldenPier", "MapoGeumbitnaru", serif;
    font-size: calc(var(--stage-w) * 40 / 1920);
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        visibility 0.45s;
    transition-delay: 0s;
}

.section_visual.on1 .deco_title {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.08s;
}

.section_visual .deco_img_stage {
    position: relative;
    width: var(--stage-w);
    height: var(--stage-h);
    flex-shrink: 0;
}

.section_visual .deco_item {
    --direction: 1;
    --image-progress: 0;
    position: absolute;
    overflow: hidden;
    border-radius: var(--mask-radius);
    background: #e3e3e3;
    opacity: 0;
    transform: translate3d(calc((1 - var(--image-progress)) * var(--direction) * 48%),
            calc((1 - var(--image-progress)) * 18%),
            0);
    transition:
        transform var(--deco-duration) var(--deco-ease),
        opacity var(--deco-duration) var(--deco-ease);
    transition-delay: 0s;
}

/* mid-left 280×280 @ (434, 302) */
.section_visual .deco_item--ml {
    --direction: -1;
    left: calc(100% * 434 / 1920);
    top: calc(100% * 302 / 950);
    width: calc(100% * 280 / 1920);
    aspect-ratio: 1 / 1;
}

/* bottom-left 550×330 @ (164, 592) */
.section_visual .deco_item--bl {
    --direction: -1;
    left: calc(100% * 164 / 1920);
    top: calc(100% * 592 / 950);
    width: calc(100% * 550 / 1920);
    aspect-ratio: 550 / 330;
}

/* top-right 550×330 @ (1206, 28) */
.section_visual .deco_item--tr {
    --direction: 1;
    left: calc(100% * 1206 / 1920);
    top: calc(100% * 28 / 950);
    width: calc(100% * 550 / 1920);
    aspect-ratio: 550 / 330;
}

/* mid-right 280×280 @ (1206, 368) */
.section_visual .deco_item--br {
    --direction: 1;
    left: calc(100% * 1206 / 1920);
    top: calc(100% * 368 / 950);
    width: calc(100% * 280 / 1920);
    aspect-ratio: 1 / 1;
}

.section_visual .deco_item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* --------------------------------------------------------------------------
   section_visual — layout (deco glow + script)
-------------------------------------------------------------------------- */
.section_visual .deco_glow {
    position: absolute;
    left: calc(100% * 1260 / 1920);
    top: calc(100% * 489 / 950);
    z-index: 0;
    width: calc(100% * 400 / 1920);
    aspect-ratio: 400 / 405;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.85);
    transform-origin: center center;
    transition:
        opacity 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0s;
    will-change: opacity, transform;
}

.section_visual .deco_glow img {
    display: block;
    width: 200%;
    height: 200%;
    max-width: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.section_visual .deco_script {
    position: absolute;
    left: calc(100% * 1203 / 1920);
    bottom: 10%;
    z-index: 2;
    width: calc(100% * 642 / 1920);
    height: auto;
    pointer-events: none;
    opacity: 0;
    /* transform: rotate(-12.28deg); */
    transform-origin: left center;
    transition: opacity 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0s;
    will-change: opacity;
}

.section_visual.on1 .deco_glow {
    opacity: 1;
    transform: scale(1);
    transition-delay: var(--deco-delay, 0.9s);
}

.section_visual.on1 .deco_script {
    opacity: 0.9;
    transition-delay: calc(var(--deco-delay, 0.9s) + 0.35s);
}

/* --------------------------------------------------------------------------
   section_visual — responsive (deco / calendar)
-------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
    .section_visual .deco_title {
        /* PC와 동일 absolute 좌표, 스테이지 스케일만 축소 */
        font-size: max(16px, calc(var(--stage-w) * 40 / 1920));
        width: calc(var(--stage-w) * 780 / 1920);
    }

    .section_visual .deco_glow {
        left: auto;
        right: -8%;
        top: auto;
        bottom: 8%;
        width: 55vw;
        z-index: -1;
    }

    .section_visual .deco_script {
        left: auto;
        right: 11%;
        top: auto;
        bottom: 4%;
        width: min(48vw, 280px);
        /* transform: rotate(-10deg); */
        transform-origin: right bottom;
    }

    .section_visual.on1 .deco_script {
        opacity: 1;
    }
}

@media screen and (max-width: 480px) {
    .section_visual .deco_glow {
        right: -12%;
        bottom: 2%;
        width: 70%;
    }

    .section_visual .deco_script {
        right: 0;
        bottom: -5%;
        top: unset;
        width: min(62%, 220px);
    }
}

/* on1: mask 축소 완료 후 deco 등장 */
.section_visual.on1 .deco_item {
    --image-progress: 1;
    opacity: 1;
    transition-delay: var(--deco-delay);
}

/* on2: deco 숨기고 캘린더 */
.section_visual.on2 .deco_img_container {
    padding-top: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s, visibility 0.6s, padding-top var(--mask-clip-duration) var(--mask-clip-ease);
}

.calendar_container {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(80px, calc(100 / 1920 * 100vw), 100px) clamp(20px, calc(40 / 1920 * 100vw), 40px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s, visibility 0.8s;
}

.section_visual.on2 .calendar_container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.section_visual.on2 .main_visual_bg video {
    opacity: 0;
}

.section_visual.on2 .main_visual_bg .bg_calendar {
    opacity: 1;
}

/* on2: 캘린더 — media box 풀블리드 복원 */
.section_visual.on2 .visual_media_box {
    top: 50%;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

@media screen and (max-width: 1024px) {
    .section_visual {
        --visual-header-safe: 60px;
        --on1-scale: 1.1;
        --mask-clip-duration: 1.7s;
        --deco-delay: 0.55s;
    }
}

/* ≤480: 좌우 칼럼 → 상하 배치, 메인에 붙임, 하단 우측 정렬 */
@media screen and (max-width: 480px) {
    .section_visual {
        --visual-header-safe: 60px;
        --on1-scale: 1;
        --deco-gap: 10px;
        --stage-w: min(calc(100vw - 24px), 380px);
        --deco-wide: calc((var(--stage-w) - 3 * var(--deco-gap)) * 0.58);
        --deco-sq: calc((var(--stage-w) - 3 * var(--deco-gap)) * 0.27);
        --deco-wide-h: calc(var(--deco-wide) * 330 / 550);
        --deco-band-h: max(var(--deco-wide-h), var(--deco-sq));
        --mask-size: min(calc(var(--stage-w) * 0.7),
                calc(min(calc(100vh - var(--visual-header-safe) - 24px), 640px) - 4 * var(--deco-gap) - 2 * var(--deco-band-h)));
        --stage-h: calc(4 * var(--deco-gap) + 2 * var(--deco-band-h) + var(--mask-size));
        --mask-radius: max(10px, calc(var(--mask-size) * 15 / 472));
        /* 상단 이미지 하단 = 메인 바로 위 / 하단 이미지 상단 = 메인 바로 아래 */
        --deco-top-attach: calc(var(--deco-gap) + var(--deco-band-h));
        --deco-bottom-attach: calc(var(--deco-gap) + var(--deco-band-h) + var(--deco-gap) + var(--mask-size) + var(--deco-gap));
        --mask-clip-duration: 1.7s;
        --deco-delay: 0.55s;
    }

    /* 상단: 기존 우측 칼럼 — 모두 메인 상단에 붙임(하단 정렬) */
    .section_visual .deco_item--tr {
        left: var(--deco-gap);
        right: auto;
        top: calc(var(--deco-top-attach) - var(--deco-wide-h));
        bottom: auto;
        width: var(--deco-wide);
        aspect-ratio: 550 / 330;
    }

    .section_visual .deco_item--br {
        left: calc(var(--deco-gap) + var(--deco-wide) + var(--deco-gap));
        right: auto;
        top: calc(var(--deco-top-attach) - var(--deco-sq));
        bottom: auto;
        width: var(--deco-sq);
        aspect-ratio: 1 / 1;
    }

    /* 하단: 기존 좌측 칼럼 — 메인 하단에 붙이고 우측 정렬 */
    .section_visual .deco_item--bl {
        left: auto;
        right: var(--deco-gap);
        top: var(--deco-bottom-attach);
        bottom: auto;
        width: var(--deco-wide);
        aspect-ratio: 550 / 330;
    }

    .section_visual .deco_item--ml {
        left: auto;
        right: calc(var(--deco-gap) + var(--deco-wide) + var(--deco-gap));
        top: var(--deco-bottom-attach);
        bottom: auto;
        width: var(--deco-sq);
        aspect-ratio: 1 / 1;
    }

    /* 상단은 위에서, 하단은 아래에서 진입 */
    .section_visual .deco_item--tr,
    .section_visual .deco_item--br {
        --direction: 1;
        transform: translate3d(calc((1 - var(--image-progress)) * 18%),
                calc((1 - var(--image-progress)) * -42%),
                0);
    }

    .section_visual .deco_item--ml,
    .section_visual .deco_item--bl {
        --direction: -1;
        transform: translate3d(calc((1 - var(--image-progress)) * -18%),
                calc((1 - var(--image-progress)) * 42%),
                0);
    }

    .section_visual.on1 .deco_item--tr,
    .section_visual.on1 .deco_item--br,
    .section_visual.on1 .deco_item--ml,
    .section_visual.on1 .deco_item--bl {
        transform: translate3d(0, 0, 0);
    }

    .section_visual .deco_title {
        top: 9%;
        width: 100%;
        left: 20px;
        font-size: 20px;
    }
}

.calendar_inner {
    width: 100%;
    max-width: clamp(320px, calc(1300 / 1920 * 100vw), 1020px);
}

.calendar_title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, calc(20 / 1920 * 100vw), 20px);
    margin-bottom: clamp(28px, calc(70 / 1920 * 100vw), 70px);
    color: #fff;
}

.calendar_title h3 {
    position: relative;
    font-family: 'Lato', sans-serif;
    font-size: clamp(28px, calc(50 / 1920 * 100vw), 50px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.calendar_title_mask {
    display: block;
    overflow: hidden;
}

.calendar_title_mask>span {
    display: block;
    transform: translateY(110%);
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0s;
}

.section_visual.on2 .calendar_title_mask>span {
    transform: translateY(0);
    transition-delay: 0.2s;
}

.calendar_title h3::after {
    content: '';
    position: absolute;
    left: calc(100% + clamp(12px, calc(24 / 1920 * 100vw), 24px));
    top: 50%;
    width: clamp(60px, calc(172 / 1920 * 100vw), 172px);
    height: 1px;
    background: #fff;
    transform: scaleX(0) translateY(-50%);
    transform-origin: left center;
    transition: transform 0.4s ease-in-out;
    transition-delay: 0s;
}

.section_visual.on2 .calendar_title h3::after {
    transform: scaleX(1) translateY(-50%);
    transition-delay: 1.2s;
}

.calendar_title p {
    font-family: var(--font-suit, 'SUIT', sans-serif);
    font-size: clamp(14px, calc(18 / 1920 * 100vw), 18px);
    font-weight: 400;
    line-height: 1;
}

.calendar_list {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, calc(20 / 1920 * 100vw), 20px);
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0s;
}

.section_visual.on2 .calendar_list {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.3s;
}

.calendar_row {
    display: flex;
    gap: clamp(10px, calc(20 / 1920 * 100vw), 20px);
    width: 100%;
}

.calendar_row_2 {
    gap: clamp(10px, calc(21 / 1920 * 100vw), 21px);
}

.calendar_item {
    position: relative;
    flex: 1 1 0;
    min-height: clamp(120px, calc(180 / 1920 * 100vw), 180px);
    padding: clamp(18px, calc(30 / 1920 * 100vw), 30px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: clamp(12px, calc(16 / 1920 * 100vw), 16px);
    background: rgba(90, 103, 112, 0.2);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    text-align: left;
    transition: background 0.3s, border-color 0.3s;
}

.calendar_item_wide {
    flex: 1.54 1 0;
}

.calendar_item_title {
    margin-bottom: clamp(10px, calc(16 / 1920 * 100vw), 16px);
    font-family: var(--font-suit, 'SUIT', sans-serif);
    font-size: clamp(15px, calc(22 / 1920 * 100vw), 22px);
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.calendar_item_date {
    font-family: var(--font-suit, 'SUIT', sans-serif);
    font-size: clamp(12px, calc(16 / 1920 * 100vw), 16px);
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    opacity: 0.5;
}

.calendar_item_icon {
    position: absolute;
    right: clamp(14px, calc(21 / 1920 * 100vw), 21px);
    bottom: clamp(14px, calc(21 / 1920 * 100vw), 21px);
    width: clamp(16px, calc(19 / 1920 * 100vw), 19px);
    height: clamp(16px, calc(19 / 1920 * 100vw), 19px);
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2019%2019%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M17.1%2019H1.9C0.823333%2019%200%2018.1767%200%2017.1V3.16667C0%202.09%200.696667%201.26667%201.58333%201.26667H2.53333V2.53333H1.58333C1.45667%202.53333%201.26667%202.78667%201.26667%203.16667V17.1C1.26667%2017.48%201.52%2017.7333%201.9%2017.7333H17.1C17.48%2017.7333%2017.7333%2017.48%2017.7333%2017.1V3.16667C17.7333%202.78667%2017.5433%202.53333%2017.4167%202.53333H16.4667V1.26667H17.4167C18.3033%201.26667%2019%202.09%2019%203.16667V17.1C19%2018.1767%2018.1767%2019%2017.1%2019Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M4.43333%203.8C4.05333%203.8%203.8%203.54667%203.8%203.16667V0.633333C3.8%200.253333%204.05333%200%204.43333%200C4.81333%200%205.06667%200.253333%205.06667%200.633333V3.16667C5.06667%203.54667%204.81333%203.8%204.43333%203.8ZM14.5667%203.8C14.1867%203.8%2013.9333%203.54667%2013.9333%203.16667V0.633333C13.9333%200.253333%2014.1867%200%2014.5667%200C14.9467%200%2015.2%200.253333%2015.2%200.633333V3.16667C15.2%203.54667%2014.9467%203.8%2014.5667%203.8ZM6.33333%201.26667H12.6667V2.53333H6.33333V1.26667ZM1.26667%205.06667H17.7333V6.33333H1.26667V5.06667ZM15.2%207.6H16.4667V8.86667H15.2V7.6ZM12.6667%207.6H13.9333V8.86667H12.6667V7.6ZM10.1333%207.6H11.4V8.86667H10.1333V7.6ZM7.6%207.6H8.86667V8.86667H7.6V7.6ZM5.06667%207.6H6.33333V8.86667H5.06667V7.6ZM15.2%2010.1333H16.4667V11.4H15.2V10.1333ZM12.6667%2010.1333H13.9333V11.4H12.6667V10.1333ZM10.1333%2010.1333H11.4V11.4H10.1333V10.1333ZM7.6%2010.1333H8.86667V11.4H7.6V10.1333ZM5.06667%2010.1333H6.33333V11.4H5.06667V10.1333ZM2.53333%2010.1333H3.8V11.4H2.53333V10.1333ZM15.2%2012.6667H16.4667V13.9333H15.2V12.6667ZM12.6667%2012.6667H13.9333V13.9333H12.6667V12.6667ZM10.1333%2012.6667H11.4V13.9333H10.1333V12.6667ZM7.6%2012.6667H8.86667V13.9333H7.6V12.6667ZM5.06667%2012.6667H6.33333V13.9333H5.06667V12.6667ZM2.53333%2012.6667H3.8V13.9333H2.53333V12.6667ZM12.6667%2015.2H13.9333V16.4667H12.6667V15.2ZM10.1333%2015.2H11.4V16.4667H10.1333V15.2ZM7.6%2015.2H8.86667V16.4667H7.6V15.2ZM5.06667%2015.2H6.33333V16.4667H5.06667V15.2ZM2.53333%2015.2H3.8V16.4667H2.53333V15.2Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.7%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

.calendar_btns {
    display: flex;
    gap: clamp(12px, calc(30 / 1920 * 100vw), 30px);
    margin-top: clamp(28px, calc(70 / 1920 * 100vw), 70px);
    opacity: 0;
    transform: translateY(50px);
    pointer-events: none;
    transition:
        opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0s;
}

.section_visual.on2 .calendar_btns {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 1.5s;
}

.calendar_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 0;
    min-height: clamp(48px, calc(64 / 1920 * 100vw), 64px);
    padding: 0 clamp(24px, calc(61 / 1920 * 100vw), 61px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    background: rgba(90, 103, 112, 0.4);
    backdrop-filter: blur(12.5px);
    -webkit-backdrop-filter: blur(12.5px);
    font-family: var(--font-suit, 'SUIT', sans-serif);
    font-size: clamp(14px, calc(18 / 1920 * 100vw), 18px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.45px;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.calendar_btn_icon {
    display: block;
    flex-shrink: 0;
    width: clamp(18px, calc(24 / 1920 * 100vw), 24px);
    height: clamp(18px, calc(24 / 1920 * 100vw), 24px);
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.5997%209.6002C13.6519%209.6002%2013.7042%209.605%2013.7565%209.61459C13.8375%209.63273%2013.9133%209.66153%2013.9837%209.701C14.0487%209.73726%2014.1095%209.78153%2014.1661%209.8338C14.2194%209.88926%2014.2631%209.94953%2014.2973%2010.0146C14.3634%2010.1324%2014.3986%2010.2651%2014.3997%2010.4002V15.2002C14.3997%2015.4124%2014.3154%2015.6159%2014.1654%2015.7659C14.0153%2015.9159%2013.8118%2016.0002%2013.5997%2016.0002C13.3875%2016.0002%2013.184%2015.9159%2013.034%2015.7659C12.884%2015.6159%2012.7997%2015.4124%2012.7997%2015.2002V12.3314L4.56606%2020.5666C4.49179%2020.641%204.40359%2020.7%204.3065%2020.7403C4.20942%2020.7806%204.10535%2020.8014%204.00023%2020.8014C3.89511%2020.8015%203.79101%2020.7809%203.69387%2020.7407C3.59673%2020.7006%203.50844%2020.6417%203.43406%2020.5674C3.35968%2020.4931%203.30066%2020.4049%203.26037%2020.3078C3.22007%2020.2107%203.19929%2020.1067%203.19922%2020.0016C3.19914%2019.8964%203.21978%2019.7923%203.25993%2019.6952C3.30009%2019.5981%203.35899%2019.5098%203.43326%2019.4354L11.6685%2011.2002H8.79966C8.58749%2011.2002%208.38401%2011.1159%208.23398%2010.9659C8.08395%2010.8159%207.99966%2010.6124%207.99966%2010.4002C7.99966%2010.188%208.08395%209.98454%208.23398%209.83451C8.38401%209.68448%208.58749%209.6002%208.79966%209.6002H13.5997ZM19.1997%203.2002C19.624%203.2002%2020.031%203.36877%2020.331%203.66882C20.6311%203.96888%2020.7997%204.37585%2020.7997%204.8002V19.2002C20.7997%2019.6245%2020.6311%2020.0315%2020.331%2020.3316C20.031%2020.6316%2019.624%2020.8002%2019.1997%2020.8002H13.5997C13.3875%2020.8002%2013.184%2020.7159%2013.034%2020.5659C12.884%2020.4159%2012.7997%2020.2124%2012.7997%2020.0002C12.7997%2019.788%2012.884%2019.5845%2013.034%2019.4345C13.184%2019.2845%2013.3875%2019.2002%2013.5997%2019.2002H19.1997V4.8002H4.79966V10.4002C4.79966%2010.6124%204.71538%2010.8159%204.56535%2010.9659C4.41532%2011.1159%204.21184%2011.2002%203.99966%2011.2002C3.78749%2011.2002%203.58401%2011.1159%203.43398%2010.9659C3.28395%2010.8159%203.19966%2010.6124%203.19966%2010.4002V4.8002C3.19966%204.37585%203.36823%203.96888%203.66829%203.66882C3.96835%203.36877%204.37532%203.2002%204.79966%203.2002H19.1997Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    transition: background 0.3s;
}

@media screen and (min-width: 1025px) {
    .calendar_item:hover {
        background: rgba(90, 103, 112, 0.45);
        border-color: #fff;
    }

    .calendar_btn:hover {
        background: #fff;
        border-color: #fff;
        color: #000;
    }

    .calendar_btn:hover .calendar_btn_icon {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.5997%209.6002C13.6519%209.6002%2013.7042%209.605%2013.7565%209.61459C13.8375%209.63273%2013.9133%209.66153%2013.9837%209.701C14.0487%209.73726%2014.1095%209.78153%2014.1661%209.8338C14.2194%209.88926%2014.2631%209.94953%2014.2973%2010.0146C14.3634%2010.1324%2014.3986%2010.2651%2014.3997%2010.4002V15.2002C14.3997%2015.4124%2014.3154%2015.6159%2014.1654%2015.7659C14.0153%2015.9159%2013.8118%2016.0002%2013.5997%2016.0002C13.3875%2016.0002%2013.184%2015.9159%2013.034%2015.7659C12.884%2015.6159%2012.7997%2015.4124%2012.7997%2015.2002V12.3314L4.56606%2020.5666C4.49179%2020.641%204.40359%2020.7%204.3065%2020.7403C4.20942%2020.7806%204.10535%2020.8014%204.00023%2020.8014C3.89511%2020.8015%203.79101%2020.7809%203.69387%2020.7407C3.59673%2020.7006%203.50844%2020.6417%203.43406%2020.5674C3.35968%2020.4931%203.30066%2020.4049%203.26037%2020.3078C3.22007%2020.2107%203.19929%2020.1067%203.19922%2020.0016C3.19914%2019.8964%203.21978%2019.7923%203.25993%2019.6952C3.30009%2019.5981%203.35899%2019.5098%203.43326%2019.4354L11.6685%2011.2002H8.79966C8.58749%2011.2002%208.38401%2011.1159%208.23398%2010.9659C8.08395%2010.8159%207.99966%2010.6124%207.99966%2010.4002C7.99966%2010.188%208.08395%209.98454%208.23398%209.83451C8.38401%209.68448%208.58749%209.6002%208.79966%209.6002H13.5997ZM19.1997%203.2002C19.624%203.2002%2020.031%203.36877%2020.331%203.66882C20.6311%203.96888%2020.7997%204.37585%2020.7997%204.8002V19.2002C20.7997%2019.6245%2020.6311%2020.0315%2020.331%2020.3316C20.031%2020.6316%2019.624%2020.8002%2019.1997%2020.8002H13.5997C13.3875%2020.8002%2013.184%2020.7159%2013.034%2020.5659C12.884%2020.4159%2012.7997%2020.2124%2012.7997%2020.0002C12.7997%2019.788%2012.884%2019.5845%2013.034%2019.4345C13.184%2019.2845%2013.3875%2019.2002%2013.5997%2019.2002H19.1997V4.8002H4.79966V10.4002C4.79966%2010.6124%204.71538%2010.8159%204.56535%2010.9659C4.41532%2011.1159%204.21184%2011.2002%203.99966%2011.2002C3.78749%2011.2002%203.58401%2011.1159%203.43398%2010.9659C3.28395%2010.8159%203.19966%2010.6124%203.19966%2010.4002V4.8002C3.19966%204.37585%203.36823%203.96888%203.66829%203.66882C3.96835%203.36877%204.37532%203.2002%204.79966%203.2002H19.1997Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
    }
}

@media screen and (max-width: 1024px) {
    .calendar_container {
        position: absolute;
        inset: 0;
        height: 100%;
        padding: clamp(56px, 8vh, 72px) 20px clamp(16px, 2.5vh, 24px);
        overflow: hidden;
    }

    .calendar_inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        max-height: 100%;
    }

    .calendar_title {
        align-items: center;
        margin-bottom: 17px;
        gap: 12px;
        margin-bottom: 35px;
    }


    .calendar_title h3 {
        font-size: 28px;
        text-align: center;
    }

    .calendar_title h3::after {
        width: clamp(40px, 8vw, 60px);
        left: calc(100% + 10px);
        display: none;
    }

    .calendar_title p {
        text-align: center;
        font-size: 16px;
    }

    .calendar_list {
        gap: clamp(6px, 1.2vh, 10px);
    }

    .calendar_row {
        flex-wrap: wrap;
        gap: clamp(6px, 1.2vh, 10px);
    }

    .calendar_item {
        flex: 1 1 calc(50% - 5px);
        min-width: calc(50% - 5px);
        max-width: calc(50% - 5px);
        min-height: 0;
        height: auto;
        padding: clamp(12px, 1.8vh, 16px);
        border-radius: 10px;
    }

    .calendar_item_wide {
        flex: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .calendar_row_2 .calendar_item:first-child {
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .calendar_item_title {
        margin-bottom: 10px;
        font-size: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendar_item_date {
        color: #DAFDFF;
        leading-trim: both;
        text-edge: cap;
        font-family: SUIT;
        font-size: 17px;
        font-style: normal;
        opacity: 1;
        font-weight: 400;
        line-height: normal;
    }

    .calendar_item_icon {
        right: 10px;
        bottom: 10px;
        width: 14px;
        height: 14px;
    }

    .calendar_btns {
        flex-direction: column;
        gap: clamp(6px, 1vh, 8px);
        margin-top: clamp(12px, 2.5vh, 20px);
    }

    .calendar_btn {
        padding: 14px 56px;
        font-size: 16px;
        background: #fff;
        color: #000 !important;
        height: auto;
        font-weight: 500;
        min-height: unset;
        border-radius: 120px;
    }

    .calendar_btn_icon {
        width: 24px;
        height: 24px;
        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.5997%209.6002C13.6519%209.6002%2013.7042%209.605%2013.7565%209.61459C13.8375%209.63273%2013.9133%209.66153%2013.9837%209.701C14.0487%209.73726%2014.1095%209.78153%2014.1661%209.8338C14.2194%209.88926%2014.2631%209.94953%2014.2973%2010.0146C14.3634%2010.1324%2014.3986%2010.2651%2014.3997%2010.4002V15.2002C14.3997%2015.4124%2014.3154%2015.6159%2014.1654%2015.7659C14.0153%2015.9159%2013.8118%2016.0002%2013.5997%2016.0002C13.3875%2016.0002%2013.184%2015.9159%2013.034%2015.7659C12.884%2015.6159%2012.7997%2015.4124%2012.7997%2015.2002V12.3314L4.56606%2020.5666C4.49179%2020.641%204.40359%2020.7%204.3065%2020.7403C4.20942%2020.7806%204.10535%2020.8014%204.00023%2020.8014C3.89511%2020.8015%203.79101%2020.7809%203.69387%2020.7407C3.59673%2020.7006%203.50844%2020.6417%203.43406%2020.5674C3.35968%2020.4931%203.30066%2020.4049%203.26037%2020.3078C3.22007%2020.2107%203.19929%2020.1067%203.19922%2020.0016C3.19914%2019.8964%203.21978%2019.7923%203.25993%2019.6952C3.30009%2019.5981%203.35899%2019.5098%203.43326%2019.4354L11.6685%2011.2002H8.79966C8.58749%2011.2002%208.38401%2011.1159%208.23398%2010.9659C8.08395%2010.8159%207.99966%2010.6124%207.99966%2010.4002C7.99966%2010.188%208.08395%209.98454%208.23398%209.83451C8.38401%209.68448%208.58749%209.6002%208.79966%209.6002H13.5997ZM19.1997%203.2002C19.624%203.2002%2020.031%203.36877%2020.331%203.66882C20.6311%203.96888%2020.7997%204.37585%2020.7997%204.8002V19.2002C20.7997%2019.6245%2020.6311%2020.0315%2020.331%2020.3316C20.031%2020.6316%2019.624%2020.8002%2019.1997%2020.8002H13.5997C13.3875%2020.8002%2013.184%2020.7159%2013.034%2020.5659C12.884%2020.4159%2012.7997%2020.2124%2012.7997%2020.0002C12.7997%2019.788%2012.884%2019.5845%2013.034%2019.4345C13.184%2019.2845%2013.3875%2019.2002%2013.5997%2019.2002H19.1997V4.8002H4.79966V10.4002C4.79966%2010.6124%204.71538%2010.8159%204.56535%2010.9659C4.41532%2011.1159%204.21184%2011.2002%203.99966%2011.2002C3.78749%2011.2002%203.58401%2011.1159%203.43398%2010.9659C3.28395%2010.8159%203.19966%2010.6124%203.19966%2010.4002V4.8002C3.19966%204.37585%203.36823%203.96888%203.66829%203.66882C3.96835%203.36877%204.37532%203.2002%204.79966%203.2002H19.1997Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    }

    .calendar_btns a:nth-child(1),
    .calendar_btns a:nth-child(3) {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .calendar_container {
        padding: clamp(40px, 6vh, 64px) 16px clamp(12px, 1.8vh, 16px);
    }

    .calendar_list {
        gap: clamp(5px, 0.9vh, 7px);
    }

    .calendar_row {
        gap: 5px;
    }
}


/* ==========================================================================
   section_value — 썸네일 조각 조립 → 비디오
   --------------------------------------------------------------------------
   layout → responsive → animation
   step0 타일 / on1 조립→비디오
========================================================================== */

/* --------------------------------------------------------------------------
   section_value — layout
-------------------------------------------------------------------------- */
.section_value {
    background: #fff;
    overflow: hidden;
}

.section_value .section_inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    container-type: size;
    container-name: value;
}

/* 타이틀 — 상단 밴드 */
.section_value .tit_wrap {
    position: absolute;
    inset: 0;
    z-index: 3;
    margin: 0;
    pointer-events: none;
}

.section_value .tit_wrap h2 {
    position: absolute;
    left: 15.1667%;
    top: 11.3333%;
    width: 55%;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.25cqw, 60px);
    line-height: 1.2;
    color: #111;
    text-align: left;
}

.section_value .tit_wrap h2 .text-ani-unit,
.section_value .tit_wrap h2>span {
    display: block;
}

.section_value .tit_wrap h2>span:nth-child(3),
.section_value .tit_wrap h2>span:nth-child(4) {
    display: none;
}

@media screen and (max-width: 1350px) {
    .section_value .tit_wrap h2 {
        left: 11%;
    }
}
@media screen and (max-width: 1024px) {
    .section_value .tit_wrap h2>span:nth-child(2) {
        display: none;
    }

    .section_value .tit_wrap h2>span:nth-child(3),
    .section_value .tit_wrap h2>span:nth-child(4) {
        display: block;
    }
}

.section_value .tit_wrap p {
    position: absolute;
    right: 6.1667%;
    top: 12.2593%;
    /* 타이틀과 비슷한 높이 */
    width: 26%;
    margin: 0;
    font-family: var(--font-suit, 'SUIT', sans-serif);
    font-weight: 300;
    font-size: clamp(13px, 1.0417cqw, 20px);
    line-height: 1.75;
    letter-spacing: -0.02em;
    color: #111;
    text-align: left;
}

.section_value .tit_wrap p>span {
    display: block;
    opacity: 0;
    filter: blur(12px);
    transform: translateY(10px);
    transition:
        opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, filter, transform;
}

/* 스테이지 — 가로 우선(넓게), 세로는 남은 영역 / 밑단 잘림 OK */
/* 섹션 진입/이탈: p와 동시(1.2s), 천천히 opacity + blur */
.section_value .value_stage {
    position: absolute;
    left: 50%;
    top: 36%;
    bottom: 0;
    translate: -50% 0;
    width: 70cqw;
    height: auto;
    /* top + bottom 으로 높이 결정 */
    aspect-ratio: auto;
    margin: 0;
    overflow: hidden;
    perspective: 1200px;
    z-index: 1;
    opacity: 0;
    filter: blur(18px);
    transition:
        opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0.4s;
    will-change: opacity, filter;
}

.section_value .value_stage .caution {
    position: absolute;
    bottom: 14px;
    right: 14px;
    font-size: 12px;
    color: #fff;
    text-align: right;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        visibility 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, visibility;
    transition-delay: 1.2s;
}

.section_value .value_video,
.section_value .value_grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.section_value .value_video {
    object-fit: cover;
    object-position: center 62%;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

.section_value .value_grid {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(4, 1fr);
    transform-style: preserve-3d;
    z-index: 2;
}

.section_value .value_tile {
    visibility: hidden;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    /* background-size/position: JS updateTileCover — video cover(center 62%)와 동일 */
    backface-visibility: hidden;
    will-change: transform, filter, opacity;
}

/* --------------------------------------------------------------------------
   section_value — responsive
-------------------------------------------------------------------------- */
@media screen and (max-width: 1600px) {
    .section_value .value_grid {
        grid-template-columns: repeat(9, 1fr);
    }

    .section_value .value_stage {
        width: 84cqw;
        top: 34%;
    }
}

@media screen and (max-width: 1280px) {
    .section_value .value_grid {
        grid-template-columns: repeat(7, 1fr);
    }

    .section_value .value_stage {
        width: 86cqw;
        top: 34%;
    }

    .section_value .tit_wrap h2 {
        font-size: clamp(26px, 3.4cqw, 56px);
        left: 7.1667%;
    }
}

@media screen and (max-width: 1024px) {
    .section_value .tit_wrap h2 {
        left: 5.1282%;
        top: 8%;
        width: 90%;
        font-size: clamp(26px, 6.5cqw, 40px);
    }

    .section_value .tit_wrap p {
        left: 5.1282%;
        right: auto;
        top: 22%;
        width: 90%;
        text-align: left;
        font-size: clamp(13px, 3.4cqw, 16px);
        line-height: 1.7;
    }

    .section_value .value_stage {
        top: 48%;
        width: 94cqw;
    }

    .section_value .value_stage .caution {
        text-align: left;
        font-size: 10px;
    }
}

@media screen and (max-width: 900px) {
    .section_value .value_grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 480 이하: 넓은 스테이지 + 3x4 그리드 */
@media screen and (max-width: 480px) {
    .section_value .tit_wrap h2 {
        top: 7.5%;
        font-size: clamp(22px, 7.5cqw, 32px);
    }

    .section_value .tit_wrap p {
        top: 23%;
        font-size: clamp(12px, 3.5cqw, 14px);
    }

    .section_value .value_stage {
        top: 48%;
        width: 100%;
    }

    .section_value .value_grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .section_value .value_tile {
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width: 480px) and (max-height: 670px) {
    .section_value .tit_wrap p {
        top: 25%;
    }
}

/* --------------------------------------------------------------------------
   section_value — animation
-------------------------------------------------------------------------- */
/* tit_wrap enter: h2 data-text-ani line → p 줄별 opacity+blur → stage */
.section_value:not(.fp-completely) [data-text-ani="line"] .text-ani-inner {
    transform: translateY(100%);
}

.section_value.fp-completely [data-text-ani="line"] .text-ani-inner {
    transform: translateY(0);
}

.section_value.fp-completely .tit_wrap p>span {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

/* h2(delay 200 + duration 1000 + stagger) 이후 줄별 등장 */
.section_value.fp-completely .tit_wrap p>span:nth-child(1) {
    transition-delay: 1.2s;
}

.section_value.fp-completely .tit_wrap p>span:nth-child(2) {
    transition-delay: 1.38s;
}

.section_value.fp-completely .tit_wrap p>span:nth-child(3) {
    transition-delay: 1.56s;
}

.section_value.fp-completely .tit_wrap p>span:nth-child(4) {
    transition-delay: 1.74s;
}

.section_value.fp-completely .tit_wrap p>span:nth-child(5) {
    transition-delay: 1.92s;
}

.section_value.fp-completely .value_stage {
    opacity: 1;
    filter: blur(0);
    transition-delay: 1.2s;
    /* p 첫 줄과 동일 */
}

/* on1 유지 재진입: 등장 애니 재재생 없이 최종 상태 고정 */
.section_value.on1 [data-text-ani="line"] .text-ani-inner {
    transform: translateY(0);
    transition: none;
}

.section_value.on1 .tit_wrap p>span {
    opacity: 1;
    filter: blur(0);
    transform: none;
    transition: none;
}

.section_value.on1 .value_stage {
    opacity: 1;
    filter: blur(0);
    transition: none;
}

.section_value.on1 .value_stage .caution {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   section_detail — DETAIL MAKES DIFFERENCE
   --------------------------------------------------------------------------
   layout → responsive → animation
   active intro (694:394) / on1 UNIT (694:580) / on2 INTERIOR (1521:2511)
========================================================================== */

/* --------------------------------------------------------------------------
   section_detail — layout
-------------------------------------------------------------------------- */
.section_detail {
    --dt-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dt-dur: 1.25s;
    --dt-unit: 73.958%; /* 1420 / 1920 */
    --dt-peek: 26.042%; /* 500 / 1920 */
    position: relative;
    overflow: hidden;
    background: #fff;
    color: #111;
}

.section_detail .detail_stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ---------- intro (active) ---------- */
.section_detail .detail_layer {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.section_detail .detail_layer_active {
    z-index: 5;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.7s var(--dt-ease),
        visibility 0.7s var(--dt-ease),
        filter 0.7s var(--dt-ease);
}

.section_detail.on1 .detail_layer_active {
    opacity: 0;
    visibility: hidden;
    filter: blur(8px);
    pointer-events: none;
}

.section_detail .detail_intro_bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.section_detail .detail_intro_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section_detail .detail_copy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 720px);
    text-align: center;
    z-index: 2;
}

.section_detail .detail_copy_main {
    margin: 0 0 28px;
    font-family: "MapoGoldenPier", "MapoGeumbitnaru", serif;
    font-size: clamp(18px, 2vw, 36px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.04em;
    color: #222;
}

.section_detail .detail_copy_lead {
    margin: 0 0 18px;
    font-family: "MapoGoldenPier", "MapoGeumbitnaru", serif;
    font-size: clamp(15px, 1.25vw, 22px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #333;
}

.section_detail .detail_copy_body {
    margin: 0 0 36px;
    font-family: SUIT, sans-serif;
    font-size: clamp(14px, 0.94vw, 18px);
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: -0.02em;
    color: #555;
}

.section_detail .detail_copy_body .text-ani-unit {
    display: block;
}

.section_detail .detail_logo_copy {
    margin: 0;
    font-family: "Antro Vectra", "AntroVectra", cursive;
    font-size: clamp(24px, 3.2vw, 56px);
    font-weight: 400;
    line-height: 1.1;
    color: #222;
}

/* ---------- panels (on1/on2만 노출, 기본 UNIT 확장 비율 유지) ---------- */
.section_detail .detail_panels {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.55s var(--dt-ease),
        visibility 0.55s var(--dt-ease);
}

/* fp-completely(인트로)에서는 숨김 — on1/on2만 노출 */
.section_detail.on1 .detail_panels,
.section_detail.on2 .detail_panels {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.section_detail .detail_panel {
    position: relative;
    height: 100%;
    overflow: hidden;
    min-width: 0;
    transition: flex-basis var(--dt-dur) var(--dt-ease);
}

/* 기본 = UNIT 확장 / INTERIOR 피크 (on1과 동일, 페이드 시 50/50 방지) */
.section_detail .detail_panel_unit {
    flex: 0 0 var(--dt-unit);
}

.section_detail .detail_panel_interior {
    flex: 0 0 var(--dt-peek);
}

/* on2: INTERIOR 확장 / UNIT 피크 */
.section_detail.on2 .detail_panel_unit {
    flex: 0 0 var(--dt-peek);
}

.section_detail.on2 .detail_panel_interior {
    flex: 0 0 var(--dt-unit);
}

.section_detail .detail_panel_bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* 배경: scale 없이 미세 패닝만 (왕복 시 두근거림 방지) */
.section_detail .detail_panel_bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 112%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: translate3d(-3%, 0, 0);
    transition: transform 2.4s cubic-bezier(0.33, 0, 0.2, 1);
    will-change: transform;
    margin-left: -5%;
}

/* on1: UNIT 활성 / INTERIOR 비활성 좌→우 */
.section_detail.on1:not(.on2) .detail_panel_unit .detail_panel_bg img {
    transform: translate3d(0, 0, 0);
}

.section_detail.on1:not(.on2) .detail_panel_interior .detail_panel_bg img {
    transform: translate3d(4%, 0, 0);
}

/* on2: INTERIOR 활성 / UNIT 비활성 좌→우 */
.section_detail.on2 .detail_panel_interior .detail_panel_bg img {
    transform: translate3d(0, 0, 0);
}

.section_detail.on2 .detail_panel_unit .detail_panel_bg img {
    transform: translate3d(4%, 0, 0);
}

.section_detail .detail_panel_dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.section_detail .detail_panel_interior .detail_panel_dim {
    background: rgba(0, 0, 0, 0.3);
}

/* 카피+CTA 한 박스 — absolute 겹침으로 높이 안 생김 */
.section_detail .detail_panel_body {
    position: absolute;
    left: clamp(24px, 8.33vw, 160px);
    bottom: clamp(72px, 13.5vh, 175px);
    z-index: 2;
    width: 100%;
    color: #fff;
}

.section_detail .detail_panel_copy_stack {
    position: relative;
    height: clamp(88px, 11vh, 120px);
    margin: 0 0 22px;
    overflow: hidden;
}

.section_detail .detail_panel_copy {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-18px, 0, 0);
    pointer-events: none;
    transition:
        opacity 0.7s cubic-bezier(0.33, 0, 0.2, 1),
        transform 0.7s cubic-bezier(0.33, 0, 0.2, 1),
        visibility 0.7s;
}

.section_detail .detail_panel_copy--wide,
.section_detail .detail_panel_copy--narrow {
    position: absolute;
}

/* wide: 컨테이너는 페이드만, 글자 애니는 char에 위임 */
.section_detail .detail_panel_copy--wide {
    transform: none;
    overflow: hidden;
}

.section_detail .detail_panel_copy--wide p {
    margin: 0;
    font-family: "MapoGoldenPier", "MapoGeumbitnaru", serif;
    font-size: clamp(22px, 1.875vw, 36px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.04em;
}

/* wide 글자: 좌→우 + 블러→선명 */
.section_detail .detail_panel_copy--wide [data-text-ani="char"] .text-ani-char {
    display: inline-block;
    transform: translateX(-0.55em);
    opacity: 0;
    filter: blur(8px);
    transition-property: transform, opacity, filter;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity, filter;
}

.section_detail .detail_panel_copy--wide [data-text-ani="char"].is-active .text-ani-char {
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
}

.section_detail .detail_panel_en {
    font-family: "MapoGoldenPier", "MapoGeumbitnaru", serif;
    font-size: clamp(22px, 1.875vw, 36px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.section_detail .detail_panel_sub {
    margin-top: 14px !important;
    font-family: SUIT, sans-serif;
    font-size: clamp(15px, 1.04vw, 20px);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* UNIT 확장 상태(on1): UNIT wide + INTERIOR narrow */
.section_detail.on1:not(.on2) .detail_panel_unit .detail_panel_copy--wide,
.section_detail.on1:not(.on2) .detail_panel_interior .detail_panel_copy--narrow {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0.15s;
}

/* on2: UNIT wide 아웃, UNIT narrow·INTERIOR wide 페이드인 */
.section_detail.on2 .detail_panel_unit .detail_panel_copy--wide,
.section_detail.on2 .detail_panel_interior .detail_panel_copy--narrow {
    opacity: 0;
    visibility: hidden;
    transform: none;
    pointer-events: none;
    transition-delay: 0s;
}

.section_detail.on2 .detail_panel_unit .detail_panel_copy--narrow,
.section_detail.on2 .detail_panel_interior .detail_panel_copy--wide {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0.12s;
}

.section_detail .detail_panel_cta {
    --cta-h: 50px;
    --cta-text-h: 1.15em;
    --cta-gap: 8px;
    --cta-icon: 50px;
    --cta-pad-x: 22px;
    --cta-surface: rgba(90, 103, 112, 0.4);
    --cta-surface-hover: rgba(90, 103, 112, 0.55);
    --cta-border: rgba(255, 255, 255, 0.1);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--cta-gap);
    text-decoration: none;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-18px, 0, 0);
    pointer-events: none;
    transition:
        opacity 0.7s cubic-bezier(0.33, 0, 0.2, 1),
        transform 0.7s cubic-bezier(0.33, 0, 0.2, 1),
        visibility 0.7s;
}

/* on1 진입: 버튼 좌→우 페이드인 (on2에서도 유지) */
.section_detail.on1 .detail_panel_cta,
.section_detail.on2 .detail_panel_cta {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    transition-delay: 0.45s;
}

.section_detail .detail_panel_cta_bg {
    position: absolute;
    left: 0;
    top: 0;
    height: var(--cta-h);
    width: 0;
    border-radius: 100px;
    border: 1px solid var(--cta-border);
    background: var(--cta-surface);
    -webkit-backdrop-filter: blur(12.5px);
    backdrop-filter: blur(12.5px);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 0;
}

.section_detail .detail_panel_cta_label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 165px;
    height: var(--cta-h);
    padding: 0 var(--cta-pad-x);
    border-radius: 100px;
    border: 1px solid var(--cta-border);
    background: var(--cta-surface);
    -webkit-backdrop-filter: blur(12.5px);
    backdrop-filter: blur(12.5px);
    font-family: Lato, SUIT, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.025em;
    white-space: nowrap;
    box-sizing: border-box;
}

.section_detail .detail_panel_cta.is-cta-ready .detail_panel_cta_label {
    background: transparent;
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.section_detail .detail_panel_cta:not(.is-cta-ready) .detail_panel_cta_bg {
    display: none;
}

.section_detail .detail_panel_interior .detail_panel_cta_label {
    min-width: 192px;
}

.section_detail .detail_panel_cta_text_mask {
    position: relative;
    display: block;
    overflow: hidden;
    height: var(--cta-text-h);
    line-height: var(--cta-text-h);
}

.section_detail .detail_panel_cta_text {
    display: block;
    white-space: nowrap;
}

.section_detail .detail_panel_cta_text.is-secondary {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.section_detail .detail_panel_cta_text b,
.section_detail .detail_panel_cta_ch b {
    font-family: Lato, sans-serif;
    font-weight: 500;
}

.section_detail .detail_panel_cta_ch {
    display: inline-block;
    position: relative;
    will-change: transform;
}

.section_detail .detail_panel_cta_label b {
    margin-right: 4px;
}

.section_detail .detail_panel_cta_icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cta-icon);
    height: var(--cta-icon);
    flex-shrink: 0;
    color: #fff;
}

.section_detail .detail_panel_cta_icon_bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--cta-border);
    background: var(--cta-surface);
    -webkit-backdrop-filter: blur(12.5px);
    backdrop-filter: blur(12.5px);
    box-sizing: border-box;
}

.section_detail .detail_panel_cta_icon_svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
}

/* --------------------------------------------------------------------------
   section_detail — responsive
-------------------------------------------------------------------------- */
@media screen and (max-width: 1440px) {
    .section_detail {
        --dt-unit: 68%;
        --dt-peek: 32%;
    }

    .section_detail .detail_panel_body {
        left: clamp(20px, 5vw, 80px);
        bottom: clamp(56px, 10vh, 120px);
    }
}

@media screen and (max-width: 1024px) {
    .section_detail .detail_copy {
        width: min(90vw, 520px);
    }

    .section_detail .detail_panels {
        display: block;
    }

    .section_detail .detail_panel {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        flex: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.7s var(--dt-ease),
            visibility 0.7s;
    }

    /* 한 장씩 풀스크린 — on1/on2만 (fp-completely 숨김) */
    .section_detail.on1:not(.on2) .detail_panel_unit,
    .section_detail.on2 .detail_panel_interior {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .section_detail.on1:not(.on2) .detail_panel_interior,
    .section_detail.on2 .detail_panel_unit {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        flex: none;
    }

    .section_detail .detail_panel_body {
        left: 20px;
        right: 20px;
        bottom: clamp(40px, 8vh, 72px);
        width: auto;
    }

    .section_detail .detail_panel_copy_stack {
        display: block;
        height: 7.2em;
        margin-bottom: 18px;
    }

    /* MO: EN + 본문 세로로 겹치지 않게 배치 (둘 다 absolute) */
    .section_detail .detail_panel_copy,
    .section_detail .detail_panel_copy--wide,
    .section_detail .detail_panel_copy--narrow {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        opacity: 0;
        visibility: hidden;
        transform: translate3d(-16px, 0, 0);
        pointer-events: none;
        transition:
            opacity 0.65s cubic-bezier(0.33, 0, 0.2, 1),
            transform 0.65s cubic-bezier(0.33, 0, 0.2, 1),
            visibility 0.65s;
    }

    .section_detail .detail_panel_copy--narrow {
        top: 0 !important;
    }

    .section_detail .detail_panel_copy--wide {
        top: 2.35em !important;
    }

    /* PC peek용 서브카피 숨김 — MO는 EN + 본문만 */
    .section_detail .detail_panel_sub {
        display: none !important;
    }

    .section_detail .detail_panel_copy--wide p,
    .section_detail .detail_panel_en {
        font-size: clamp(20px, 5.2vw, 28px);
    }

    .section_detail .detail_panel_cta {
        --cta-h: 48px;
        --cta-icon: 18px;
        --cta-pad-x: 20px;
        gap: 20px;
        width: auto;
        max-width: none;
        height: var(--cta-h);
        padding: 0 16px 0 var(--cta-pad-x);
        border-radius: 100px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(90, 103, 112, 0.45);
        -webkit-backdrop-filter: blur(12.5px);
        backdrop-filter: blur(12.5px);
        box-sizing: border-box;
        justify-content: flex-start;
        opacity: 0;
        transition: opacity 0.65s cubic-bezier(0.33, 0, 0.2, 1);
        pointer-events: none;
    }

    /* MO: 분리 pill/원형 해제 → 단일 알약 (텍스트 + →) */
    .section_detail .detail_panel_cta_bg,
    .section_detail .detail_panel_cta_icon_bg {
        display: none !important;
    }

    .section_detail .detail_panel_cta_label,
    .section_detail .detail_panel_interior .detail_panel_cta_label,
    .section_detail .detail_panel_cta.is-cta-ready .detail_panel_cta_label {
        min-width: 0;
        width: auto;
        flex: 0 0 auto;
        height: auto;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        font-size: 14px;
        justify-content: flex-start;
    }

    .section_detail .detail_panel_cta_text_mask {
        width: auto;
        overflow: visible;
    }

    .section_detail .detail_panel_cta_text.is-secondary {
        display: none;
    }

    .section_detail .detail_panel_cta_icon {
        width: 40px;
        height: 55px;
        flex-shrink: 0;
    }

    /* 대각 화살표 → 수평 우측 */
    .section_detail .detail_panel_cta_icon_svg {
        transform: rotate(45deg);
    }

    /* on1 UNIT: UNIT → 본문 → 버튼 */
    .section_detail.on1:not(.on2) .detail_panel_unit .detail_panel_copy--narrow {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
        transition-delay: 0.25s;
    }

    .section_detail.on1:not(.on2) .detail_panel_unit .detail_panel_copy--wide {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0.5s;
    }

    .section_detail.on1:not(.on2) .detail_panel_unit .detail_panel_cta {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition-delay: 0.75s;
    }

    /* on2 INTERIOR: INTERIOR → 일상의 품격~ → 버튼 */
    .section_detail.on2 .detail_panel_interior .detail_panel_copy--narrow {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
        transition-delay: 0.25s;
    }

    .section_detail.on2 .detail_panel_interior .detail_panel_copy--wide {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0.5s;
    }

    .section_detail.on2 .detail_panel_interior .detail_panel_cta {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition-delay: 0.75s;
    }
}

@media screen and (max-width: 768px) {
    .section_detail .detail_panel_body {
        bottom: 16vh;
        left: 16px;
        right: 16px;
    }
}

/* --------------------------------------------------------------------------
   section_detail — animation
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .section_detail .detail_layer_active,
    .section_detail .detail_panels,
    .section_detail .detail_panel,
    .section_detail .detail_panel_bg img,
    .section_detail .detail_panel_copy {
        transition: none !important;
        animation: none !important;
        filter: none !important;
        transform: none !important;
    }
}


/* ==========================================================================
   section_landscape
   --------------------------------------------------------------------------
   layout → responsive → animation
   active intro / on1 detail clip (Figma 1199:2023 / 1199:2055)
========================================================================== */

/* --------------------------------------------------------------------------
   section_landscape — layout
-------------------------------------------------------------------------- */
.section_landscape {
    position: relative;
    overflow: hidden !important;
    background: #d5e4f0;
    --ls-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ls-clip-ease: cubic-bezier(0.65, 0.05, 0.36, 1);
    --ls-clip-dur: 1.25s;
}

.section_landscape.fp-section,
.section_landscape .fp-tableCell {
    overflow: hidden !important;
}

.section_landscape .ls_stage {
    position: absolute;
    inset: 0;
}

.section_landscape .ls_stage_intro {
    z-index: 1;
}

/* ---------- intro bg ---------- */
.section_landscape .ls_intro_bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.section_landscape .ls_intro_bg img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(1.06);
    filter: blur(2px);
    transition: transform 2.6s var(--ls-ease);
}

.section_landscape.fp-completely .ls_intro_bg img {
    transform: translate(-50%, -50%) scale(1);
}

.section_landscape .ls_intro_bg_blur {
    position: absolute;
    inset: 0;
    background: rgba(234, 234, 234, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* ---------- intro copy (Figma x:100 / top:210) ---------- */
.section_landscape .ls_intro_copy {
    position: absolute;
    left: clamp(40px, calc(100 / 1920 * 100vw), 100px);
    top: clamp(120px, calc(140 / 1080 * 100vh), 210px);
    z-index: 2;
    color: #fff;
    max-width: min(90vw, 720px);
}

.section_landscape .ls_intro_en {
    margin: 0;
    font-family: Lato, sans-serif;
    font-size: clamp(40px, calc(80 / 1920 * 100vw), 80px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: capitalize;
    color: #fff;
}

.section_landscape .ls_intro_ko {
    margin: clamp(8px, calc(12 / 1080 * 100vh), 12px) 0 0;
    font-family: Pretendard, sans-serif;
    font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px);
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
}

.section_landscape .ls_intro_desc {
    margin: clamp(40px, calc(80 / 1080 * 100vh), 80px) 0 0;
    font-family: Pretendard, sans-serif;
    font-size: clamp(15px, calc(26 / 1920 * 100vw), 26px);
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    word-break: keep-all;
}

.section_landscape .ls_intro_desc .text-ani-unit+.text-ani-unit {
    margin-top: 0;
}

/* ---------- intro feature image (1820×390 @ right 0 / center Y 50%+260) ---------- */
.section_landscape .ls_intro_feature {
    position: absolute;
    right: 0;
    top: calc(50% + clamp(120px, calc(260 / 1080 * 100vh), 260px));
    z-index: 2;
    width: calc(100% * 1820 / 1920);
    height: clamp(200px, calc(390 / 1080 * 100vh), 390px);
    overflow: hidden;
    opacity: 0;
    transform: translateY(calc(-50% + 28px));
    transition:
        opacity 1s var(--ls-ease) 0.35s,
        transform 1.1s var(--ls-ease) 0.35s;
}

.section_landscape.fp-completely .ls_intro_feature {
    opacity: 1;
    transform: translateY(-50%);
}

.section_landscape .ls_intro_feature img {
    display: block;
    width: 110%;
    height: 110%;
    /* position: absolute; */
    /* left: 0; */
    object-fit: cover;
    object-position: left center;
    transform: translateX(7%);
    transition: transform 8s var(--ls-ease);
    transition-delay: 0.8s;
    margin-left: -10%;
}

/* ---------- detail stage — clip-path R→L ---------- */
.section_landscape .ls_stage_detail {
    z-index: 4;
    background: linear-gradient(270deg, #eff8ff 0%, #d5e4f0 99.3%);
    clip-path: inset(0 0 0 100%);
    transition: clip-path var(--ls-clip-dur) var(--ls-clip-ease);
    pointer-events: none;
}

.section_landscape.fp-completely .ls_intro_feature img {
    transform: translateX(0%);
}

.section_landscape.on1 .ls_stage_detail {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
}

.section_landscape .ls_detail_bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.5;
    pointer-events: none;
}

.section_landscape .ls_detail_bg img {
    position: absolute;
    left: clamp(40%, calc(685 / 1920 * 100%), 40%);
    top: 50%;
    width: calc(100% * 2000 / 1920);
    height: calc(100% * 1370 / 1080);
    max-width: none;
    object-fit: cover;
    transform: translateY(-50%);
}

/* 우측 세로 LANDSCAPE rail — 무한 롤링 (community copyright 패턴) */
.section_landscape .ls_detail_rail {
    position: absolute;
    right: clamp(20px, calc(47 / 1920 * 100vw), 47px);
    top: 50%;
    z-index: 2;
    margin: 0;
    width: 100vh;
    max-width: none;
    overflow: hidden;
    font-family: Lato, sans-serif;
    font-size: clamp(36px, calc(70 / 1920 * 100vw), 70px);
    font-weight: 500;
    line-height: 1.4;
    color: #000;
    white-space: nowrap;
    transform: translate(50%, -50%) rotate(-90deg);
    transform-origin: center center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.9s var(--ls-ease) 1.15s;
}

.section_landscape .ls_detail_rail .inner {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(24px, calc(48 / 1920 * 100vw), 48px);
    width: max-content;
    animation: lsRailMarqueePc 42s linear infinite;
    will-change: transform;
}

.section_landscape .ls_detail_rail .inner>span {
    flex: 0 0 auto;
}

.section_landscape.on1 .ls_detail_rail {
    opacity: 1;
}

/* PC: 세로 rail — 텍스트 진행 방향(우→좌 = 화면상 하→상) */
@keyframes lsRailMarqueePc {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* MO: 하단 가로 — PC와 반대 방향 */
@keyframes lsRailMarqueeMo {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* detail copy */
.section_landscape .ls_detail_copy {
    position: absolute;
    left: clamp(40px, calc(100 / 1920 * 100vw), 100px);
    top: clamp(100px, calc(197 / 1080 * 100vh), 197px);
    z-index: 3;
    width: min(90vw, calc(100% * 659 / 1920));
}

.section_landscape .ls_detail_tit {
    margin: 0;
    font-family: MapoGeumbitnaru, MapoGoldenPier, serif;
    font-size: clamp(24px, calc(40 / 1920 * 100vw), 40px);
    font-weight: 400;
    line-height: 1.1;
    color: #000;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

.section_landscape .ls_detail_sub {
    margin: clamp(12px, calc(20 / 1080 * 100vh), 20px) 0 0;
    font-family: SUIT, Pretendard, sans-serif;
    font-size: clamp(14px, calc(20 / 1920 * 100vw), 20px);
    font-weight: 300;
    line-height: 1.4;
    color: #111;
    word-break: keep-all;
}

/* diagonal cards — 1920 기준 absolute */
.section_landscape .ls_detail_cards {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.section_landscape .ls_card {
    position: absolute;
    width: calc(100% * 507 / 1920);
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity 0.9s var(--ls-ease),
        transform 0.95s var(--ls-ease);
}

.section_landscape .ls_card--01 {
    left: calc(100% * 164 / 1920);
    top: calc(100% * 550 / 1080);
    transition-delay: 1.35s;
}

.section_landscape .ls_card--02 {
    left: calc(100% * 711 / 1920);
    top: calc(100% * 431 / 1080);
    transition-delay: 1.5s;
}

.section_landscape .ls_card--03 {
    left: calc(100% * 1258 / 1920);
    top: calc(100% * 323 / 1080);
    transition-delay: 1.65s;
}

.section_landscape.on1 .ls_card {
    opacity: 1;
    transform: none;
}

.section_landscape .ls_card_media {
    width: 100%;
    aspect-ratio: 507 / 285;
    overflow: hidden;
    background: #e8eef3;
    position: relative;
}

.section_landscape .ls_card_media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section_landscape .ls_card_meta {
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, calc(18 / 1920 * 100vw), 18px);
    margin-top: clamp(16px, calc(28 / 1080 * 100vh), 28px);
}

.section_landscape .ls_card_line {
    flex: 0 0 1px;
    width: 1px;
    height: clamp(32px, calc(47 / 1080 * 100vh), 47px);
    background: #111;
    margin-top: 2px;
}

.section_landscape .ls_card_txt {
    min-width: 0;
    flex: 1 1 auto;
}

.section_landscape .ls_card_txt h4 {
    margin: 0;
    font-family: SUIT, Pretendard, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
}

.section_landscape .ls_card_txt p {
    margin: clamp(6px, calc(9 / 1080 * 100vh), 9px) 0 0;
    font-family: SUIT, Pretendard, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: #424242;
    word-break: keep-all;
    max-width: calc(100% * 450 / 507);
}

/* --------------------------------------------------------------------------
   section_landscape — responsive
-------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .section_landscape .ls_intro_bg_blur {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .section_landscape .ls_intro_feature img {
        object-position: right bottom;
    }

    .section_landscape .ls_intro_copy {
        left: clamp(24px, 5vw, 40px);
        top: clamp(88px, 14vh, 140px);
        max-width: calc(100% - 48px);
    }

    .section_landscape .ls_intro_en {
        font-size: clamp(32px, 7.2vw, 48px);
    }

    .section_landscape .ls_intro_ko {
        font-size: clamp(15px, 3.4vw, 20px);
    }

    .section_landscape .ls_intro_desc {
        margin-top: clamp(28px, 6vh, 48px);
        font-size: clamp(14px, 3.2vw, 18px);
    }

    .section_landscape .ls_intro_feature {
        width: calc(100% - 24px);
        height: clamp(160px, 28vh, 260px);
        top: auto;
        bottom: clamp(24px, 4vh, 48px);
        right: 0;
        transform: translateY(24px);
    }

    .section_landscape.fp-completely .ls_intro_feature {
        transform: none;
    }

    /* detail — 393 기준 세로 스택 + 대각 카드 */
    .section_landscape .ls_stage_detail {
        background: linear-gradient(180deg, #d5e4f0 0%, #d5e4f0 54%, #eff8ff 100%);
        overflow: hidden;
    }

    .section_landscape .ls_detail_bg {
        opacity: 0.5;
    }

    .section_landscape .ls_detail_bg img {
        left: 50%;
        top: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center top;
        transform: translateX(-50%);
    }

    .section_landscape .ls_detail_copy {
        left: clamp(24px, calc(32 / 393 * 100vw), 40px);
        top: clamp(72px, calc(100 / 852 * 100vh), 110px);
        width: min(calc(100% - 48px), calc(335 / 393 * 100vw));
        max-width: 480px;
    }

    /* MO 카피: 서브 → 타이틀 순서 */
    .section_landscape .ls_detail_copy.m-only .ls_detail_sub {
        margin: 0;
        font-family: Pretendard, sans-serif;
        font-size: clamp(13px, calc(14 / 393 * 100vw), 16px);
        font-weight: 400;
        line-height: 2;
        color: #111;
    }

    .section_landscape .ls_detail_copy.m-only .ls_detail_tit {
        margin: 0;
        font-size: clamp(18px, calc(22 / 393 * 100vw), 28px);
        line-height: 1.4;
        letter-spacing: -0.04em;
        color: #111;
    }

    .section_landscape .ls_detail_cards {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        display: block;
        padding: 0;
        overflow: visible;
    }

    /* Figma 1207:1292 — 계단형 가로 이미지 (336→296→216) */
    .section_landscape .ls_card {
        position: absolute;
        min-width: 0;
        bottom: auto;
    }

    .section_landscape .ls_card--01 {
        left: calc(100% * 31 / 393);
        top: calc(100% * 207 / 852);
        width: calc(100% * 336 / 393);
        transition-delay: 1.25s;
    }

    .section_landscape .ls_card--02 {
        left: calc(100% * 71 / 393);
        top: calc(100% * 355 / 852);
        width: calc(100% * 296 / 393);
        transition-delay: 1.4s;
    }

    .section_landscape .ls_card--03 {
        left: calc(100% * 151 / 393);
        top: calc(100% * 503 / 852);
        width: calc(100% * 216 / 393);
        transition-delay: 1.55s;
    }

    .section_landscape .ls_card_media {
        width: 100%;
        aspect-ratio: 336 / 101;
        height: auto;
    }

    .section_landscape .ls_card--02 .ls_card_media {
        aspect-ratio: 296 / 101;
    }

    .section_landscape .ls_card--03 .ls_card_media {
        aspect-ratio: 216 / 101;
    }

    .section_landscape .ls_card_meta {
        gap: 10px;
        margin-top: clamp(10px, calc(14 / 852 * 100vh), 16px);
        align-items: center;
    }

    .section_landscape .ls_card_line {
        height: 20px;
        margin-top: 0;
    }

    .section_landscape .ls_card_txt h4 {
        font-size: clamp(14px, calc(15 / 393 * 100vw), 17px);
        font-weight: 700;
        line-height: 1.4;
    }

    .section_landscape .ls_card_txt p {
        display: none;
    }

    /* 세로 rail → 하단 가로 LANDSCAPE (방향 PC와 반대) */
    .section_landscape .ls_detail_rail {
        display: block;
        right: 0;
        left: 0;
        top: auto;
        bottom: clamp(20px, calc(24 / 852 * 100vh), 36px);
        width: 100%;
        transform: none;
        font-size: clamp(18px, calc(26 / 393 * 100vw), 32px);
        font-weight: 500;
        letter-spacing: 0.02em;
        white-space: nowrap;
        transition-delay: 1.7s;
        overflow: hidden;
    }

    .section_landscape .ls_detail_rail .inner {
        gap: clamp(16px, 4.5vw, 28px);
        animation-name: lsRailMarqueeMo;
        animation-duration: 48s;
    }
}

@media screen and (max-width: 480px) {
    .section_landscape .ls_detail_copy {
        top: clamp(53px, 9vh, 100px);
    }

    .section_landscape .ls_card--01 {
        top: calc(100% * 245 / 852);
    }

    .section_landscape .ls_card--02 {
        top: calc(100% * 427 / 852);
    }

    .section_landscape .ls_card--03 {
        top: calc(100% * 606 / 852);
    }

    .section_landscape .ls_detail_rail {
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        font-size: 20px;
    }

    .section_landscape .ls_detail_rail .inner {
        gap: 16px;
    }


}


/* ==========================================================================
   section_brand — THE NATURAL NOBILITY
   --------------------------------------------------------------------------
   layout → responsive → animation
========================================================================== */

/* --------------------------------------------------------------------------
   section_brand — layout
-------------------------------------------------------------------------- */
.section_brand {
    --brand-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --brand-delay: 0.1s;
    position: relative;
    overflow: hidden;
    color: #1f1f1f;
    background: #f7f8f8;
}

.section_brand .bg {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section_brand .bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.section_brand .bg img {
    object-fit: cover;
    object-position: center center;
}

.section_brand .brand_inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: clamp(80px, 10vh, 120px) clamp(20px, 4vw, 40px);
    text-align: center;
}

.section_brand .brand_label {
    margin: 0 0 clamp(12px, calc(20 / 1920 * 100vw), 24px);
    font-family: Lato, sans-serif;
    font-weight: 400;
    font-size: clamp(14px, calc(18 / 1920 * 100vw), 18px);
    letter-spacing: 0.08em;
    line-height: 1.2;
    color: #1f1f1f;
}

.section_brand .brand_tit {
    margin: 0;
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: clamp(28px, calc(48 / 1920 * 100vw), 48px);
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: #1f1f1f;
    text-transform: uppercase;
}

.section_brand .brand_tit .text-ani-unit {
    display: inline-block;
}

.section_brand .brand_tit .text-ani-unit+.text-ani-unit {
    margin-left: 0.35em;
}

/* --------------------------------------------------------------------------
   section_brand — layout (img_box clip-path)
-------------------------------------------------------------------------- */
.section_brand .brand_visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: clamp(28px, calc(48 / 1920 * 100vw), 56px);
}

.section_brand .img_box {
    position: relative;
    width: clamp(160px, calc(259.153 / 1920 * 100vw), 259.153px);
    height: clamp(204px, calc(330 / 1920 * 100vw), 330px);
    border-radius: clamp(204px, calc(330 / 1920 * 100vw), 330px);
    background: #D9D9D9;
    flex-shrink: 0;
    overflow: hidden;
    /* 처음부터 최종 크기 유지, ellipse clip-path만 오픈 */
    clip-path: ellipse(0% 0% at 50% 50%);
    -webkit-clip-path: ellipse(0% 0% at 50% 50%);
    transition: clip-path 1.1s var(--brand-ease), -webkit-clip-path 1.1s var(--brand-ease);
    transition-delay: calc(var(--brand-delay) + 0.85s);
    will-change: clip-path;
}

.section_brand .img_box_bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.section_brand .img_box_bg img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vw;
    height: 100vh;
    max-width: none;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center center;
    display: block;
}

.section_brand .brand_logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(48px, calc(68 / 1920 * 100vw), 72px);
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    filter: blur(12px);
    transition-property: opacity, filter, visibility;
    transition-duration: 0.85s, 0.85s, 0s;
    transition-timing-function: var(--brand-ease), var(--brand-ease), linear;
    transition-delay: 0s, 0s, 0.85s;
    /* 보일 때: 페이드인 / 숨길 때 */
    pointer-events: none;
    will-change: opacity, filter;
}

.section_brand .brand_line {
    width: 1px;
    height: clamp(48px, calc(88 / 1080 * 100vh), 100px);
    margin-top: 0;
    background: #1f1f1f;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.85s var(--brand-ease);
    transition-delay: calc(var(--brand-delay) + 1.7s);
    will-change: transform;
    margin-top: -40px;
}

.section_brand .brand_txt_01 {
    margin: clamp(20px, calc(28 / 1920 * 100vw), 36px) 0 0;
    font-family: MapoGeumbitnaru, serif;
    font-weight: 400;
    font-size: clamp(22px, calc(36 / 1920 * 100vw), 36px);
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: #1f1f1f;
}

.section_brand .brand_txt_02 {
    margin: clamp(12px, calc(16 / 1920 * 100vw), 20px) 0 0;
    max-width: min(560px, 90vw);
    font-family: Pretendard, 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, calc(18 / 1920 * 100vw), 18px);
    letter-spacing: -0.02em;
    line-height: 1.6;
    color: #1f1f1f;
}

.section_brand .brand_txt_02--last {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   section_brand — responsive
-------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
    .section_brand .brand_inner {
        padding: clamp(90px, 12vh, 120px) 20px clamp(48px, 8vh, 80px);
    }

    .section_brand .brand_tit {
        font-size: clamp(26px, 7.6vw, 30px);
        letter-spacing: 3px;
        line-height: 1.2;
    }

    .section_brand .brand_tit .text-ani-unit {
        display: block;
    }

    .section_brand .brand_tit .text-ani-unit+.text-ani-unit {
        margin-left: 0;
    }

    /* 모바일: 동일 비율 스케일 (259.153:330 → 217:276) */
    .section_brand .img_box {
        width: clamp(180px, calc(217 / 390 * 100vw), 217px);
        height: clamp(229px, calc(276 / 390 * 100vw), 276px);
        border-radius: clamp(229px, calc(276 / 390 * 100vw), 276px);
        margin-top: 4px;
    }

    .section_brand.fp-completely .img_box {
        clip-path: ellipse(50% 50% at 50% 50%);
        -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    }

    .section_brand .brand_visual {
        margin-top: clamp(24px, 5vh, 40px);
    }

    .section_brand .brand_line {
        height: clamp(40px, 8vh, 72px);
    }

    .section_brand .brand_txt_01 {
        font-size: clamp(22px, 6.6vw, 26px);
        letter-spacing: -0.02em;
        max-width: 90vw;
    }

    .section_brand .brand_txt_02 {
        font-size: clamp(14px, 4.1vw, 16px);
        max-width: 310px;
    }

    .section_brand .brand_logo {
        width: clamp(44px, 12vw, 56px);
    }
}

@media screen and (max-width: 480px) {
    .section_brand .brand_label {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .section_brand .img_box {
        width: 217px;
        height: 276px;
        border-radius: 276px;
    }
}

/* --------------------------------------------------------------------------
   section_brand — animation
-------------------------------------------------------------------------- */
.section_brand:not(.fp-completely) [data-text-ani="line"] .text-ani-inner {
    transform: translateY(100%);
}

.section_brand.fp-completely [data-text-ani="line"] .text-ani-inner {
    transform: translateY(0);
}

/* 글자: opacity + blur (char는 translateX 오버라이드) */
.section_brand:not(.fp-completely) [data-text-ani="char"] .text-ani-char {
    transform: none;
    opacity: 0;
    filter: blur(10px);
}

.section_brand.fp-completely [data-text-ani="char"] .text-ani-char {
    transform: none;
    opacity: 1;
    filter: blur(0);
}

.section_brand [data-text-ani="char"] .text-ani-char {
    transition-property: opacity, filter;
    transition-timing-function: var(--brand-ease);
    will-change: opacity, filter;
}

.section_brand.fp-completely .img_box {
    clip-path: ellipse(50% 50% at 50% 50%);
    -webkit-clip-path: ellipse(50% 50% at 50% 50%);
}

.section_brand.fp-completely .brand_logo {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    /* img_box 오픈(0.85s delay + 1.1s) 끝난 후 */
    transition-delay: calc(var(--brand-delay) + 1.8s), calc(var(--brand-delay) + 1.8s), calc(var(--brand-delay) + 1.8s);
    pointer-events: auto;
}

.section_brand.fp-completely .brand_line {
    transform: scaleY(1);
    transition-delay: calc(var(--brand-delay) + 2s);
}

/* ==========================================================================
   section_community
   --------------------------------------------------------------------------
   layout → responsive → animation
   active intro / on1 gallery / on2·on3 map
========================================================================== */

/* --------------------------------------------------------------------------
   section_community — layout
-------------------------------------------------------------------------- */
.section_community {
    --cm-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    background: #111;
    color: #fff;
}

.section_community .caution_indent {}

.section_community .second_caution {
    opacity: 0;
    visibility: hidden;
    z-index: 13;
    transition: opacity 0.45s var(--cm-ease), visibility 0.45s;
}

/* 섹션 직계 오리발: 인트로(첫단계) 숨김 → on1(갤러리)만 노출 */
.section_community .first_caution {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--cm-ease), visibility 0.45s;
}

.section_community.on1 .first_caution {
    opacity: 1;
    visibility: visible;
}

.section_community.on2 .second_caution,
.section_community.on3 .second_caution {
    opacity: 1;
    visibility: visible;
}


.section_community .cm_stage {
    position: absolute;
    inset: 0;
}

.section_community .cm_stage .caution_indent {
    z-index: 1;
}

.section_community .cm_stage_intro {
    z-index: 1;
}

/* on2+ : 갤러리 이탈 시에만 인트로 숨김 (on1은 겹침 유지) */
.section_community.on2 .cm_stage_intro,
.section_community.on3 .cm_stage_intro {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.section_community .cm_intro_bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.section_community .cm_intro_bg_img,
.section_community .cm_intro_bg_person {
    position: absolute;
    inset: -6%;
    width: 112%;
    height: 112%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 2.8s var(--cm-ease);
}

.section_community .cm_intro_bg_person {
    opacity: 0.55;
    mix-blend-mode: lighten;
}

.section_community.fp-completely .cm_intro_bg_img,
.section_community.fp-completely .cm_intro_bg_person {
    transform: scale(1);
}

.section_community .cm_intro_dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.section_community .cm_intro_grad--top,
.section_community .cm_intro_grad--bot {
    position: absolute;
    left: 0;
    right: 0;
    height: 37%;
    pointer-events: none;
    opacity: 0.5;
}

.section_community .cm_intro_grad--top {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 11%, transparent 89%);
}

.section_community .cm_intro_grad--bot {
    bottom: 0;
    background: linear-gradient(to top, #000 11%, transparent 89%);
}

.section_community .cm_intro_content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%);
    width: min(92vw, 720px);
    text-align: center;
    z-index: 2;
}

.section_community .cm_intro_dot {
    display: block;
    width: 6px;
    height: 6px;
    margin: 0 auto 28px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.8s var(--cm-ease) 0.2s;
}

.section_community.fp-completely .cm_intro_dot {
    opacity: 1;
}

.section_community .cm_intro_rise {
    margin: 0;
    overflow: hidden;
}

.section_community .cm_intro_rise>span {
    display: block;
    transform: translateY(100%);
    transition: transform 1s var(--cm-ease);
}

.section_community.fp-completely .cm_intro_rise>span {
    transform: translateY(0);
}

.section_community .cm_intro_sub {
    font-family: SUIT, Pretendard, sans-serif;
    font-size: clamp(16px, 1.67vw, 32px);
    font-weight: 400;
    line-height: 1;
    color: #fff;
}

.section_community .cm_intro_sub strong {
    font-weight: 700;
}

.section_community .cm_intro_tit {
    margin: clamp(20px, 2.4vh, 36px) 0;
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: clamp(42px, 6.25vw, 120px);
    line-height: 1.2;
    color: #efe9e5;
    text-transform: capitalize;
}

.section_community .cm_intro_word {
    display: block;
}

.section_community .cm_char {
    display: inline-block;
    opacity: 0;
    filter: blur(14px);
    transform: translateY(8px);
    transition: opacity 0.85s var(--cm-ease), filter 0.85s var(--cm-ease), transform 0.85s var(--cm-ease);
}

.section_community .cm_char.is-in {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

.section_community .cm_intro_foot {
    font-family: SUIT, Pretendard, sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 1.25vw, 24px);
    line-height: 1.5;
    color: #fff;
}

.section_community .cm_intro_br {
    display: none;
}

.section_community.fp-completely .cm_intro_sub.cm_intro_rise>span {
    transition-delay: 0.15s;
}

.section_community.fp-completely .cm_intro_foot.cm_intro_rise>span {
    transition-delay: 0.45s;
}

.section_community .cm_stage_gallery {
    z-index: 4;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.25s cubic-bezier(0.65, 0.05, 0.36, 1);
    pointer-events: none;
}

.section_community.on1 .cm_stage_gallery,
.section_community.on2 .cm_stage_gallery,
.section_community.on3 .cm_stage_gallery {
    clip-path: inset(0 0 0 0);
}

.section_community.on1 .cm_stage_gallery {
    pointer-events: auto;
}

.section_community.on2 .cm_stage_gallery,
.section_community.on3 .cm_stage_gallery {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: clip-path 1.25s cubic-bezier(0.65, 0.05, 0.36, 1), opacity 0.45s ease, visibility 0.45s ease;
}

.section_community .cm_gallery_bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.section_community .cm_gallery_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    filter: blur(12px);
}

.section_community .cm_gallery_bg_dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.section_community .cm_gallery_ui {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.section_community .cm_gallery_fade {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.85s var(--cm-ease), transform 0.85s var(--cm-ease);
}

.section_community.on1 .cm_gallery_fade {
    opacity: 1;
    transform: none;
    transition-delay: 0.85s;
}

.section_community.on1 .cm_gallery_frame.cm_gallery_fade {
    transition-delay: 0.7s;
}

.section_community.on1 .cm_gallery_meta.cm_gallery_fade {
    transition-delay: 1s;
}

.section_community .cm_gallery_zone {
    position: absolute;
    left: clamp(20px, 7.3vw, 140px);
    top: clamp(100px, 14.3vh, 155px);
    margin: 0;
    font-family: Lato, sans-serif;
    font-size: clamp(18px, 1.67vw, 32px);
    letter-spacing: -0.02em;
    line-height: 1.4;
    color: #fff;
}

.section_community .cm_gallery_page {
    position: absolute;
    right: clamp(20px, 8.3vw, 160px);
    top: clamp(110px, 14.5vh, 160px);
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    font-family: "Libre Baskerville", "Nanum Myeongjo", serif;
    font-size: clamp(20px, 2.08vw, 40px);
    line-height: 1;
    color: #fff;
    text-align: right;
}

.section_community .cm_gallery_page_sep {
    flex: 0 0 auto;
}

.section_community .cm_txt_mask {
    display: block;
    overflow: hidden;
    vertical-align: top;
}

.section_community .cm_txt_mask--num {
    display: inline-block;
    min-width: 0.7em;
    text-align: right;
}

.section_community .cm_txt_val {
    display: block;
    transform: translateY(0);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.section_community .cm_txt_val.is-out {
    transform: translateY(-110%);
}

.section_community .cm_txt_val.is-from {
    transform: translateY(110%);
    transition: none;
}

.section_community .cm_gallery_frame {
    position: absolute;
    left: 50%;
    top: calc(50% + 22px);
    width: 60vw;
    height: min(59.2vh, 640px);
    overflow: hidden;
    transform: translate(-50%, -50%) translateY(36px);
}

.section_community.on1 .cm_gallery_frame.cm_gallery_fade {
    transform: translate(-50%, -50%);
}

.section_community .cm_gallery_swiper,
.section_community .cm_gallery_swiper .swiper-wrapper,
.section_community .cm_gallery_swiper .swiper-slide {
    width: 100%;
    height: 100%;
}

.section_community .cm_gallery_swiper .swiper-slide {
    overflow: hidden;
    backface-visibility: hidden;
}

.section_community .cm_gallery_swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Figma 721:289 — right≈161px, top 858 → bottom≈186px, 104×36 단일 세트 */
.section_community .cm_gallery_nav {
    position: absolute;
    right: clamp(24px, 8.35vw, 161px);
    bottom: clamp(120px, 17.2vh, 186px);
    width: 104px;
    height: 36px;
    z-index: 5;
}

.section_community .cm_gallery_nav_img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}

.section_community .cm_gallery_hit {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.section_community .cm_gallery_hit.js_cm_prev {
    left: 0;
}

.section_community .cm_gallery_hit.js_cm_next {
    right: 0;
}

.section_community .cm_gallery_meta {
    position: absolute;
    left: clamp(20px, 7.3vw, 140px);
    bottom: clamp(48px, 7.2vh, 78px);
}

.section_community .cm_gallery_name {
    margin: 0;
    font-family: Lato, sans-serif;
    font-size: clamp(22px, 2.5vw, 48px);
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.section_community .cm_gallery_floor {
    margin: 12px 0 0;
    font-family: SUIT, sans-serif;
    font-size: clamp(15px, 0.94vw, 18px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.section_community .community_panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    color: #1f1f1f;
    z-index: 8;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.85s var(--cm-ease), visibility 0.85s var(--cm-ease);
}

.section_community.on2 .community_panel_01 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.section_community .community_panel_02 {
    z-index: 9;
    left: 0;
}

/* on2→on3: 슬라이드 없이 페이드로 내부 교체 느낌 */
.section_community.on3 .community_panel_02 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* on2/on3 내부 요소 페이드업 */
.section_community .community_panel .map_inner,
.section_community .community_panel .summary_inner {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.85s var(--cm-ease),
        transform 0.85s var(--cm-ease);
}

.section_community.on2 .community_panel_01 .map_inner,
.section_community.on2 .community_panel_01 .summary_inner,
.section_community.on3 .community_panel_02 .map_inner,
.section_community.on3 .community_panel_02 .summary_inner {
    opacity: 1;
    transform: none;
}

.section_community.on2 .community_panel_01 .map_inner {
    transition-delay: 0.12s;
}

.section_community.on2 .community_panel_01 .summary_inner {
    transition-delay: 0.28s;
}

.section_community.on3 .community_panel_02 .map_inner {
    transition-delay: 0.08s;
}

.section_community.on3 .community_panel_02 .summary_inner {
    transition-delay: 0.22s;
}

.section_community .location_inner {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.section_community.on2 .location_inner,
.section_community.on3 .location_inner {
    opacity: 1;
    pointer-events: auto;
}

.section_community.on2 .location_inner span:nth-child(1) {
    background: #555;
}

.section_community.on2 .location_inner span:nth-child(2) {
    background: rgba(1, 81, 82, 0.1);
}

.section_community.on3 .location_inner span:nth-child(1) {
    background: rgba(1, 81, 82, 0.1);
}

.section_community.on3 .location_inner span:nth-child(2) {
    background: #555;
}

/* --------------------------------------------------------------------------
   section_community — responsive
-------------------------------------------------------------------------- */
@media screen and (max-width: 1350px) {
    .section_community .second_caution {
        right: 50px;
    }
}

@media screen and (min-width: 1025px) {
    .section_community .mOnly {
        display: none !important;
    }

    .section_community .community_panel_02 {
        left: 0;
    }
}

@media screen and (max-width: 1024px) {

    .section_community .pcOnly {
        display: none !important;
    }

    .section_community .cm_intro_br {
        display: block;
    }

    .section_community .cm_intro_content {
        transform: translate(-50%, -50%);
        width: min(86vw, 360px);
    }

    .section_community .cm_intro_dot {
        display: none;
    }

    .section_community .cm_intro_sub {
        font-size: clamp(13px, 3.6vw, 16px);
    }

    .section_community .cm_intro_tit {
        margin: 18px 0 22px;
        font-size: clamp(36px, 11vw, 52px);
    }

    .section_community .cm_intro_foot {
        font-size: clamp(14px, 3.8vw, 16px);
        font-weight: 500;
        line-height: 1.45;
    }

    .section_community .cm_gallery_zone {
        left: 30px;
        top: 149px;
        font-size: 20px;
    }

    .section_community .cm_gallery_page {
        right: 30px;
        top: 149px;
        font-size: 20px;
    }

    .section_community .cm_gallery_frame {
        top: 50%;
        width: min(86vw, 333px);
        height: min(42vh, 320px);
    }

    .section_community .cm_gallery_nav {
        right: 30px;
        bottom: auto;
        top: calc(50% + min(21vh, 160px) + 18px);
        width: 104px;
        height: 36px;
    }

    .section_community .cm_gallery_meta {
        left: 30px;
        bottom: 70px;
    }

    .section_community .cm_gallery_name {
        font-size: 24px;
    }
}


@media screen and (max-width: 480px) {
    .section_community .cm_gallery_zone {
        top: 101px;
    }

    .section_community .cm_gallery_page {
        top: 107px;
    }

    .section_community .cm_gallery_frame {
        top: 45%;
    }

    .section_community .cm_gallery_nav {
        top: calc(45% + min(21vh, 160px) + 18px);
    }

    .section_community .cm_gallery_meta {
        bottom: 102px;
    }

    .caution_indent {
        bottom: 48px;
    }

    .section_community .caution_indent {
        bottom: 36px;
        z-index: 13;
        right: 20px;
    }
}

.section_community .map_inner {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 55.2%;
}

.section_community .map_inner .header_wrap {
    position: absolute;
    right: 0;
    top: 10.46%;
    width: 90.84%;
    font-size: 2.08vw;
    font-weight: 500;
    color: #021B32;
}

.section_community .map_inner .header_content {
    display: none;
}

.section_community .map_inner .map_wrap {
    position: absolute;
    left: 9%;
    top: 15.18%;
    width: 81.84%;
}

.section_community .map_inner .map_wrap img.map_img {
    width: 100%;
}

.section_community .map_inner .map_wrap .numList li {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.6s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25vw;
    height: 1.25vw;
    border-radius: 3px;
    color: #fff;
    background: #1c4e50;
    font-size: 0.83vw;
    font-weight: 700;
    border: 2px solid #fff;
    transform-origin: center center;
}

.section_community .map_inner .map_wrap .numList li.active {
    cursor: pointer;
}

.section_community .map_inner .map_wrap .numList li.on {
    border-color: #85FF27;
    transform: scale(1.2);
}

.section_community .map_inner .detail_wrap {
    position: absolute;
    right: 0;
    width: 90.84%;
    bottom: 6.29%;
}

.section_community .map_inner .detail_wrap ul {
    width: 38.95vw;
    position: relative;
}

.section_community .map_inner .detail_wrap li {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 1.04vw 1.04vw 1.04vw 3.64vw;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s;
    background: rgba(90, 103, 112, 0.08);
    border-radius: 15px;
    border: 2px solid #eaeaea;
    display: flex;
    flex-direction: column;
    gap: 8px;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

.section_community .map_inner .detail_wrap li .num {
    position: absolute;
    left: 1.3vw;
    top: 0.83vw;
    width: 1.56vw;
    height: 1.56vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c4e50;
    border: 2px solid #fff;
    border-radius: 4px;
    color: #fff;
    font-size: 0.93vw;
    font-weight: 700;
}

.section_community .map_inner .detail_wrap li .tit {
    font-size: 1.04vw;
    font-weight: 500;
    color: #000;
}

.section_community .map_inner .detail_wrap li .txt {
    font-size: 0.93vw;
    color: #5A6770;
}

.section_community .map_inner .detail_wrap li.on {
    opacity: 1;
    visibility: visible;
}

.section_community .summary_inner {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44.8%;
    background: url('/resources/img/main/community_layer/common_bg.jpg') center center / cover no-repeat;
    overflow: hidden;
}

.section_community .summary_inner .copyright_content {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: rotate(-90deg) translateY(calc(100% + 1.04vw));
    transform-origin: left bottom;
    font-size: 3.64vw;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
    font-family: 'Lato', sans-serif;
    pointer-events: none;
}

.section_community .summary_inner .copyright_content .inner {
    display: flex;
    align-items: center;
    gap: 2.6vw;
    flex-wrap: nowrap;
    animation: copyrightMarqueeX 24s linear infinite;
    will-change: transform;
}

@keyframes copyrightMarqueeX {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.section_community .summary_inner .header_content {
    position: absolute;
    right: 11.62%;
    top: 11.38%;
    text-align: right;
}

.section_community .summary_inner .header_content .sub {
    font-size: 0.93vw;
    display: block;
    margin-bottom: 1.25vw;
    font-weight: 500;
    color: #383838;
}

.section_community .summary_inner .header_content .title {
    font-weight: 700;
    font-size: 3.12vw;
    color: #000;
}

.section_community .summary_inner .main_content {
    position: absolute;
    right: 10.46%;
    bottom: 17%;
    width: 65%;
    z-index: 2;
}

.section_community .summary_inner .main_content .txt_wrap {
    font-size: 2.08vw;
    font-weight: 300;
    color: #021B32;
    margin-bottom: 7vw;
}

.section_community .summary_inner .main_content .list_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 5vw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section_community .summary_inner .main_content .list_wrap li {
    position: relative;
    width: calc(50% - 2.5vw);
    font-weight: 500;
    color: #000;
    border-bottom: 1px solid #9A9A9A;
    padding-bottom: 4px;
    cursor: pointer;
    transition: all 0.6s;
}

.section_community .summary_inner .main_content .list_wrap li span {
    cursor: pointer;
    display: block;
}

.section_community .summary_inner .main_content .list_wrap li.on {
    color: #015152;
    font-weight: 700;
    position: relative;
}

.section_community .summary_inner .main_content .list_wrap li::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 41%;
    margin-right: 0.78vw;
    transform: scale(0) translateY(-50%);
    width: 6px;
    height: 6px;
    background: #015152;
    transition: all 0.3s;
}

.section_community .summary_inner .main_content .list_wrap li.on::before {
    transform: scale(1) translateY(-50%);
}

/* PC — 맵 포인트 좌표 */
@media screen and (min-width: 1025px) {
    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n1 {
        left: 11.21%;
        top: 7.78%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n2 {
        left: 25.93%;
        top: 25.81%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n3 {
        left: 32.19%;
        top: 22.26%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n4 {
        left: 44.23%;
        top: 37.84%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n5 {
        left: 53.58%;
        top: 49.18%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n6 {
        left: 59%;
        top: 33%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n6_1 {
        left: 73.5%;
        top: 45%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n7 {
        left: 64.79%;
        top: 61.88%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n8 {
        left: 70.92%;
        top: 55.32%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n9 {
        left: 78.71%;
        top: 74.72%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n10 {
        left: 90.44%;
        top: 72.54%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n11 {
        left: 59.29%;
        top: 23.49%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n11_1 {
        left: 83.29%;
        top: 38%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n12 {
        left: 68.5%;
        top: 47%;
    }

    .section_community .community_panel_01 .map_inner .map_wrap .numList li.n12_1 {
        left: 59%;
        top: 38%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap {
        width: 88.45%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n1 {
        left: 24.93%;
        top: 21.95%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n1_1 {
        left: 12.93%;
        top: 68.95%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n2 {
        left: 25.65%;
        top: 36.44%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n3 {
        left: 32.81%;
        top: 31.67%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n4 {
        left: 33.69%;
        top: 44.59%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n5 {
        left: 38.95%;
        top: 55.47%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n6 {
        left: 45.36%;
        top: 22.91%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n7 {
        left: 50.59%;
        top: 45.59%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n8 {
        left: 75.1%;
        top: 31.47%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n9 {
        left: 89.42%;
        top: 49.3%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n10 {
        left: 84.3%;
        top: 55.56%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n11 {
        left: 66.42%;
        top: 50.34%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n12 {
        left: 75.59%;
        top: 64.83%;
    }

    .section_community .community_panel_02 .map_inner .map_wrap .numList li.n13 {
        left: 12.59%;
        top: 81.83%;
    }

    .section_community .community_panel_02 .map_inner .detail_wrap {
        width: 92.45%;
    }

    .section_community .location_inner {
        display: none;
    }
}

/* Mobile */
@media screen and (max-width: 1024px) {
    .section_community .map_inner {
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        width: 100%;
        height: 65.72%;
    }

    .section_community .map_inner .header_wrap {
        position: absolute;
        right: 8.14%;
        left: 8.14%;
        top: 19.28%;
        width: auto;
        font-size: 3.05dvh;
    }

    .section_community .map_inner .header_content {
        position: absolute;
        right: 8.14%;
        top: 30.17%;
        text-align: right;
        display: block;
        z-index: 1000;
    }

    .section_community .map_inner .header_content .sub {
        font-size: 1.64dvh;
        font-weight: 500;
        color: #383838;
        display: block;
        margin-bottom: 0.82dvh;
    }

    .section_community .map_inner .header_content .title {
        font-size: 4.69dvh;
        font-weight: 700;
        color: #000;
    }

    .section_community .map_inner .map_wrap {
        position: absolute;
        right: 6.36%;
        left: 6.36%;
        top: 35.17%;
        width: auto;
        height: 27.58dvh;
    }

    .section_community .map_inner .map_wrap img.map_img {
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
    }

    .section_community .map_inner .map_wrap .numList {
        display: none;
    }

    .section_community .map_inner .detail_wrap {
        position: absolute;
        left: 7.63%;
        right: 7.63%;
        width: auto;
        bottom: 3.57%;
    }

    .section_community .map_inner .detail_wrap ul {
        width: 100%;
    }

    .section_community .map_inner .detail_wrap li {
        padding: 2.34dvh 0;
        display: block;
        text-align: center;
    }

    .section_community .map_inner .detail_wrap li .num {
        position: static;
        width: 2.93dvh;
        height: 2.93dvh;
        font-size: 2.11dvh;
        display: inline-flex;
        vertical-align: middle;
    }

    .section_community .map_inner .detail_wrap li .tit {
        font-size: 2.11dvh;
        vertical-align: middle;
    }

    .section_community .map_inner .detail_wrap li .txt {
        font-size: 1.76dvh;
        display: block;
        margin-top: 0.46dvh;
    }

    .section_community .summary_inner {
        position: absolute;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        height: 34.28%;
        background-image: url('/resources/img/main/community_layer/common_bg_m.jpg');
    }

    .section_community .summary_inner .copyright_content {
        bottom: 1.17dvh;
        transform: none;
        font-size: 3.05dvh;
    }

    .section_community .summary_inner .copyright_content .inner {
        gap: 1.76dvh;
        animation-duration: 28s;
    }

    .section_community .summary_inner .header_content {
        display: none;
    }

    .section_community .summary_inner .main_content {
        position: absolute;
        right: 8.14%;
        left: 8.14%;
        bottom: auto;
        top: 5.9%;
        width: auto;
    }

    .section_community .summary_inner .main_content .txt_wrap {
        font-size: 2.11dvh;
        margin-bottom: 2.5dvh;
    }

    .section_community .summary_inner .main_content .list_wrap {
        gap: 10px 16px;
    }

    .section_community .summary_inner .main_content .list_wrap li {
        font-size: 14px;
        width: calc(33.333% - 11px);
    }

    .section_community .summary_inner .main_content .list_wrap li.on::before {
        content: none;
    }

    .section_community .location_inner {
        position: absolute;
        left: 2.54%;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;
        z-index: 2000;
    }

    .section_community .location_inner span {
        display: block;
        width: 10px;
        padding-top: 10px;
        height: 0;
        overflow: hidden;
        background: rgba(1, 81, 82, 0.1);
        border-radius: 50%;
        transition: all 0.6s;
    }

    .section_community .location_inner span:nth-child(1) {
        background: #555;
    }
}

@media screen and (max-width: 768px) {
    .section_community .map_inner .header_wrap {
        top: 14.28%;
    }

    .section_community .map_inner .header_content {
        top: 23.17%;
    }

    .section_community .map_inner .header_content .title {
        font-size: 3.2dvh;
    }

    .section_community .map_inner .map_wrap {
        top: 28.17%;
    }

    .section_community .summary_inner {
        height: 37.28%;
    }

    .section_community .summary_inner .main_content .list_wrap li {
        font-size: 13px;
    }

    .section_community .map_inner .detail_wrap {
        bottom: 8vh;
    }

    .section_community .map_inner .detail_wrap li {
        padding: 2dvh 0;
    }
}

@media screen and (max-width: 380px) {
    .section_community .summary_inner .main_content .list_wrap li {
        font-size: 12px;
    }

    .section_community .summary_inner {
        height: 38.28%;
    }
}

/* ==========================================================================
   section_brand_detail — 100vh fullpage
   --------------------------------------------------------------------------
   layout → responsive → animation
   active collage / on1 expand
========================================================================== */

/* --------------------------------------------------------------------------
   section_brand_detail — layout
-------------------------------------------------------------------------- */
.section_brand_detail {
    --bd-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --bd-dur: 1.2s;
    --bd-gap: clamp(10px, 1.15vw, 22px);
    position: relative;
    overflow: hidden;
    background: #f7f8f8;
    color: #1f1f1f;
}

.section_brand_detail .bd_stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.section_brand_detail .bd_stage_collage {
    z-index: 2;
}

.section_brand_detail .bd_collage_bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)),
        url("/resources/img/main/brand_detail/bd_wave.webp") center / cover no-repeat;
    background-color: #5a6770;
}

/* 캔버스 = 섹션 전체 absolute 좌표계 */
.section_brand_detail .bd_canvas_collage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.section_brand_detail .bd_logo {
    position: absolute;
    left: 50%;
    top: 14%;
    width: min(62vw, 1178px);
    height: 9%;
    transform: translate(-50%, 16px);
    background: url("/resources/img/main/brand_detail/bd_wave.webp") center / 180% auto no-repeat;
    -webkit-mask: url("/resources/img/main/brand_detail/bd_prugio_mask.svg") center / contain no-repeat;
    mask: url("/resources/img/main/brand_detail/bd_prugio_mask.svg") center / contain no-repeat;
    opacity: 0;
    filter: blur(8px);
    transition:
        opacity 1s var(--bd-ease),
        filter 1s var(--bd-ease),
        transform 1s var(--bd-ease);
    z-index: 4;
}

.section_brand_detail.fp-completely .bd_logo {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, 0);
    transition-delay: 0.12s;
}

/* 카피 — 센터 우측 상단 (수직 중앙대에 맞춤) */
.section_brand_detail .bd_copy {
    position: absolute;
    left: 64%;
    top: 32%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.4vh, 18px);
    text-align: center;
    color: #1f1f1f;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.85s var(--bd-ease), transform 0.85s var(--bd-ease);
    z-index: 4;
}

.section_brand_detail.fp-completely .bd_copy {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.section_brand_detail .bd_copy_en {
    margin: 0;
    font-family: Lato, sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1.3vw, 26px);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.section_brand_detail .bd_copy_ko {
    margin: 0;
    font-family: SUIT, sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 1.5vw, 30px);
    line-height: 1.25;
    white-space: nowrap;
}

/* --- absolute 콜라주(디자인 간격, 전체적으로 top 내려 수직 균형) --- */
.section_brand_detail .bd_item {
    position: absolute;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition:
        left var(--bd-dur) var(--bd-ease),
        top var(--bd-dur) var(--bd-ease),
        width var(--bd-dur) var(--bd-ease),
        height var(--bd-dur) var(--bd-ease),
        opacity 0.75s var(--bd-ease),
        transform 0.75s var(--bd-ease);
}

.section_brand_detail .bd_item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section_brand_detail.fp-completely .bd_item {
    opacity: 1;
    transform: none;
}

.section_brand_detail.fp-completely .bd_item_l {
    transition-delay: 0.28s;
}

.section_brand_detail.fp-completely .bd_item_center {
    transition-delay: 0.36s;
}

.section_brand_detail.fp-completely .bd_item_mid_l {
    transition-delay: 0.44s;
}

.section_brand_detail.fp-completely .bd_item_r {
    transition-delay: 0.5s;
}

.section_brand_detail.fp-completely .bd_item_bottom {
    transition-delay: 0.56s;
}

.section_brand_detail .bd_item_l {
    left: 15.8%;
    top: 36%;
    width: 21.5%;
    height: 18%;
    z-index: 2;
}

.section_brand_detail .bd_item_mid_l {
    left: 27.3%;
    top: 56%;
    width: 10%;
    height: 26%;
    z-index: 3;
}


.section_brand_detail .bd_item_center {
    left: 38.4%;
    top: 32%;
    width: 23.6%;
    height: 52%;
    z-index: 5;
}


.section_brand_detail .bd_item_center img {
    object-position: center center;
}

.section_brand_detail .bd_center_txt {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-family: "Nanum Myeongjo Bold", "Nanum Myeongjo", serif;
    font-weight: 700;
    font-size: clamp(14px, 1.55vw, 30px);
    line-height: 1.1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

/* 우측 상 */
.section_brand_detail .bd_item_r {
    left: 63.1%;
    top: 48%;
    width: 22%;
    height: 15%;
    z-index: 2;
}

/* 우측 하단 */
.section_brand_detail .bd_item_bottom {
    left: 63.1%;
    top: 64.5%;
    width: 15.5%;
    height: 24%;
    z-index: 2;
}

.section_brand_detail .bd_item_bottom img {
    object-position: center center;
}

/*
 * on1 — 센터 이미지만 확대되어 화면을 덮음
 * (다른 요소 fadeout 없음 — 커지면서 자연스럽게 가림)
 */
.section_brand_detail.on1 .bd_item_center {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.section_brand_detail.on1 .bd_center_txt {
    opacity: 0;
    transition: none;
}

/* --- #18 story: 확대된 센터 → 스크롤 페이드 --- */
.section_brand_detail .bd_stage_story {
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: transparent;
    transition: opacity 0.55s var(--bd-ease) 0.55s, visibility 0.55s var(--bd-ease) 0.55s;
}

.section_brand_detail.on1 .bd_stage_story {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 스토리 딤 — 하단 가독용 그라데이션 */
.section_brand_detail .bd_story_dim {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.18) 32%,
            rgba(0, 0, 0, 0) 62%);
}

.section_brand_detail .bd_story_scroll {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.section_brand_detail .bd_story_scroll::-webkit-scrollbar {
    width: 4px;
}

.section_brand_detail .bd_story_scroll::-webkit-scrollbar-track {
    background: transparent;
}

.section_brand_detail .bd_story_scroll::-webkit-scrollbar-thumb {
    background: rgba(20, 24, 22, 0.72);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.section_brand_detail .bd_story_scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 12, 11, 0.88);
}

.section_brand_detail .bd_canvas_story {
    position: relative;
    width: 100%;
    min-height: 100%;
    color: #fff;
    box-sizing: border-box;
    padding: clamp(40px, 5.2vh, 64px) clamp(24px, 5vw, 96px) clamp(80px, 14vh, 160px);
    display: flex;
    flex-direction: column;
}

/* 스크롤 위치 감지 → 숨김 / .is-in → 페이드인 */
.section_brand_detail .bd_fade {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.9s var(--bd-ease),
        transform 0.9s var(--bd-ease);
    will-change: opacity, transform;
}

.section_brand_detail .bd_fade.is-in {
    opacity: 1;
    transform: none;
}

.section_brand_detail .bd_story_top {
    position: relative;
    margin: 0 auto;
    text-align: center;
    font-family: Lato, sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 4.75vw, 150px);
    letter-spacing: 0.06em;
    line-height: 1.1;
    white-space: nowrap;
}

/* --- 카드 3열: 가운데만 아래로 --- */
.section_brand_detail .bd_cards {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(28px, 3.2vw, 64px);
    width: min(1280px, 84%);
    margin: clamp(28px, 4.5vh, 52px) auto 0;
}

.section_brand_detail .bd_card {
    position: relative;
    width: min(340px, 26%);
    flex: 0 1 340px;
    max-width: 340px;
}

.section_brand_detail .bd_card_01 {
    margin-top: 0;
}

.section_brand_detail .bd_card_02 {
    margin-top: clamp(48px, 7.5vh, 96px);
}

.section_brand_detail .bd_card_03 {
    margin-top: clamp(8px, 1.2vh, 20px);
}

.section_brand_detail .bd_card_photo {
    width: 88%;
    max-width: 300px;
    aspect-ratio: 1 / 1.08;
    max-height: none;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    background: #1a1f1c;
}

.section_brand_detail .bd_card_photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 글래스 패널 — 사진과 간격 유지 */
.section_brand_detail .bd_card_panel {
    width: 92%;
    margin: clamp(14px, 1.8vh, 22px) auto 0;
    padding: clamp(20px, 2.4vh, 32px) clamp(16px, 1.6vw, 28px);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.13) 68.53%);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    max-height: none;
    overflow: visible;
    transition:
        transform 0.55s var(--bd-ease),
        background 0.55s var(--bd-ease),
        box-shadow 0.55s var(--bd-ease);
}

.section_brand_detail .bd_card.is-in .bd_card_panel {
    animation: bd-panel-float 5.5s ease-in-out infinite;
    animation-delay: 0.9s;
}

.section_brand_detail .bd_card_02.is-in .bd_card_panel {
    animation-delay: 1.15s;
}

.section_brand_detail .bd_card_03.is-in .bd_card_panel {
    animation-delay: 1.35s;
}

.section_brand_detail .bd_card.is-in .bd_card_panel:hover {
    animation-play-state: paused;
    transform: translateY(-8px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.13) 68.53%);
    backdrop-filter: blur(16px);
}

.section_brand_detail .bd_card_panel h3 {
    margin: 0 0 clamp(10px, 1.2vh, 16px);
    font-family: SUIT, sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.35vw, 24px);
    line-height: 1.3;
    color: #fff;
}

.section_brand_detail .bd_card_panel p {
    margin: 0;
    font-family: SUIT, sans-serif;
    font-weight: 300;
    font-size: clamp(12px, 0.85vw, 15px);
    line-height: 1.7;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.92);
}

/* --- 하단 HANGANG / PRUGIO / RIVERFRONT --- */
.section_brand_detail .bd_story_brand {
    position: relative;
    width: 100%;
    margin-top: clamp(56px, 10vh, 120px);
    min-height: clamp(140px, 26vh, 280px);
    padding: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
}

/* PRUGIO 뒤 가로 블러 밴드 */
.section_brand_detail .bd_story_brand::before {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    top: 34%;
    height: 35%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.14) 22%,
            rgba(255, 255, 255, 0.18) 50%,
            rgba(255, 255, 255, 0.14) 78%,
            rgba(255, 255, 255, 0) 100%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}

.section_brand_detail .bd_story_hangang,
.section_brand_detail .bd_story_prugio,
.section_brand_detail .bd_story_riverfront {
    position: relative;
    margin: 0;
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 7.2vw, 120px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: #fff;
    white-space: nowrap;
    z-index: 1;
    opacity: 0;
    transform: translateY(24px);
}

.section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_hangang,
.section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_prugio,
.section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_riverfront {
    animation: bd-brand-word-in 0.95s var(--bd-ease) forwards;
}

.section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_hangang {
    animation-delay: 0.05s;
}

.section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_prugio {
    animation-delay: 0.22s;
}

.section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_riverfront {
    animation-delay: 0.38s;
}

.section_brand_detail .bd_story_hangang {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
}

.section_brand_detail .bd_story_prugio {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    align-self: center;
    margin-top: 0.12em;
}

.section_brand_detail .bd_story_riverfront {
    grid-column: 2 / -1;
    grid-row: 3;
    justify-self: end;
    align-self: end;
    margin-top: 0.08em;
}

.section_brand_detail .bd_story_logo {
    position: absolute;
    top: 36%;
    right: 10%;
    width: clamp(52px, 14.2vw, 152px);
    height: auto;
    margin-left: clamp(92px, 11vw, 210px);
    z-index: 2;
    opacity: 0;
    transform: translateY(-50%) scale(0.9);
    transform-origin: center;
    transition:
        opacity 0.85s var(--bd-ease) 0.4s,
        transform 0.85s var(--bd-ease) 0.4s;
}

.section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_logo {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    /* animation: bd-logo-spin 36s linear 1.3s infinite; */
}

/* --------------------------------------------------------------------------
   section_brand_detail — responsive
-------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
    .section_brand_detail .bd_logo {
        top: 7%;
        width: min(78vw, 370px);
        height: 7%;
    }

    .section_brand_detail .bd_copy {
        left: auto;
        right: 4%;
        top: 28%;
        gap: 6px;
        align-items: flex-end;
    }

    .section_brand_detail .bd_copy_en {
        font-size: clamp(10px, 2.8vw, 14px);
        white-space: normal;
        text-align: right;
    }

    .section_brand_detail .bd_copy_ko {
        font-size: clamp(12px, 3.4vw, 16px);
        white-space: normal;
        text-align: right;
    }

    .section_brand_detail .bd_item_l {
        left: -4.2%;
        top: 40%;
        width: 32%;
        height: 13%;
    }

    .section_brand_detail .bd_item_mid_l {
        left: 12.4%;
        top: 54.3%;
        width: 15%;
        height: 20%;
    }

    .section_brand_detail .bd_item_center {
        left: 30%;
        top: 38%;
        width: 38%;
        height: 34%;
    }

    .section_brand_detail .bd_item_r {
        left: 70%;
        top: 48%;
        width: 28%;
        height: 11%;
    }

    .section_brand_detail .bd_item_bottom {
        left: 70%;
        top: 60%;
        width: 24%;
        height: 18%;
    }

    .section_brand_detail.on1 .bd_item_center {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .section_brand_detail .bd_center_txt {
        font-size: clamp(12px, 3.2vw, 18px);
    }

    .section_brand_detail .bd_canvas_story {
        padding: 56px 20px 40px;
    }

    .section_brand_detail .bd_story_top {
        font-size: clamp(22px, 7vw, 32px);
        white-space: normal;
    }

    .section_brand_detail .bd_story_brand {
        margin-top: clamp(40px, 8vh, 72px);
        min-height: clamp(120px, 22vh, 200px);
        padding: 16px 0 28px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 4px;
    }

    /* 모바일: 부모 transform + 자식 animation 중첩 시 애니 스킵됨 → transition으로 교체 */
    .section_brand_detail .bd_fade.bd_story_brand {
        transform: none;
        will-change: opacity;
    }

    .section_brand_detail .bd_story_brand::before {
        top: 30%;
        height: 36%;
    }

    .section_brand_detail .bd_story_hangang,
    .section_brand_detail .bd_story_prugio,
    .section_brand_detail .bd_story_riverfront {
        font-size: clamp(28px, 10vw, 48px);
        justify-self: center;
        grid-column: 1;
        transition:
            opacity 0.95s var(--bd-ease),
            transform 0.95s var(--bd-ease);
    }

    .section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_hangang,
    .section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_prugio,
    .section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_riverfront {
        animation: none;
        opacity: 1;
        transform: translateY(0);
    }

    .section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_hangang {
        transition-delay: 0.05s;
    }

    .section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_prugio {
        transition-delay: 0.22s;
    }

    .section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_riverfront {
        transition-delay: 0.38s;
    }

    .section_brand_detail .bd_story_hangang {
        grid-row: 1;
    }

    .section_brand_detail .bd_story_prugio {
        grid-row: 2;
        margin-top: 0;
    }

    .section_brand_detail .bd_story_riverfront {
        grid-row: 3;
        justify-self: center;
    }

    .section_brand_detail .bd_story_logo {
        left: auto;
        right: 8%;
        top: 42%;
        margin-left: 0;
        width: clamp(36px, 10vw, 56px);
    }
}

/* brand_detail — 768 이하: 카드 지그재그(원형 사진 + 패널 오버랩) */
@media screen and (max-width: 768px) {

    .section_brand_detail .bd_logo {
        top: 13%;
    }

    .section_brand_detail .bd_copy_en {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .section_brand_detail .bd_copy_ko {
        font-size: 22px;
        font-weight: 500;
        line-height: 120%;
    }

    .section_brand_detail .bd_story_dim {
        opacity: 0.5;
        background: linear-gradient(0deg,
                rgba(0, 0, 0, 0.8) 11.39%,
                rgba(0, 0, 0, 0) 88.88%);
    }

    .section_brand_detail .bd_cards {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: clamp(40px, 10vw, 64px);
        margin-top: 28px;
        padding: 0;
        box-sizing: border-box;
    }

    .section_brand_detail .bd_card {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        flex: none;
        margin-top: 0 !important;
    }

    .section_brand_detail .bd_card_photo {
        position: relative;
        z-index: 1;
        width: min(62vw, 240px);
        aspect-ratio: 1 / 1.15;
        max-height: none;
        margin: 0;
        align-self: flex-start;
        border-radius: 50%;
    }

    .section_brand_detail .bd_card_02 .bd_card_photo {
        align-self: flex-end;
    }

    .section_brand_detail .bd_card_panel {
        position: relative;
        z-index: 2;
        width: 88%;
        margin: -52px auto 0;
        padding: 28px 18px 22px;
        border-radius: 16px;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        animation: none;
    }

    .section_brand_detail .bd_card.is-in .bd_card_panel {
        animation: bd-panel-float 5.5s ease-in-out infinite;
        animation-delay: 0.6s;
    }

    .section_brand_detail .bd_card_01 .bd_card_panel,
    .section_brand_detail .bd_card_03 .bd_card_panel {
        margin-left: auto;
        margin-right: 0;
    }

    .section_brand_detail .bd_card_02 .bd_card_panel {
        margin-left: 0;
        margin-right: auto;
    }

    .section_brand_detail .bd_card_panel h3 {
        font-size: clamp(16px, 4.5vw, 20px);
    }

    .section_brand_detail .bd_card_panel p {
        font-size: clamp(12px, 3.4vw, 14px);
        line-height: 1.7;
    }

    .section_brand_detail .bd_story_brand {
        margin-left: -12px;
        margin-right: -12px;
    }
}

@media screen and (max-width: 480px) {
    .section_brand_detail .bd_item_l {
        top: 50%;
    }

    .section_brand_detail .bd_item_mid_l {
        top: 64.3%;
    }

    .section_brand_detail .bd_item_center {
        top: 48%;
    }

    .section_brand_detail .bd_item_r {
        top: 58%;
    }

    .section_brand_detail .bd_item_bottom {
        top: 70%;
    }
}

/* --------------------------------------------------------------------------
   section_brand_detail — animation
-------------------------------------------------------------------------- */
@keyframes bd-panel-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes bd-brand-word-in {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bd-logo-spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .section_brand_detail .bd_card.is-in .bd_card_panel,
    .section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_logo {
        animation: none !important;
    }

    .section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_hangang,
    .section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_prugio,
    .section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_riverfront {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    .section_brand_detail .bd_fade.bd_story_brand.is-in .bd_story_logo {
        opacity: 1;
        transform: translateY(-50%);
    }
}


/* ==========================================================================
   section_contact — 2단 스텝 스크롤
   --------------------------------------------------------------------------
   layout → responsive → animation
   step0 오시는길 / on1 관심고객등록
========================================================================== */

/* --------------------------------------------------------------------------
   section_contact — layout
-------------------------------------------------------------------------- */
.section_contact {
    overflow: hidden;
    word-break: keep-all;
    --section-ani-delay: 0.2s;
    --section-ani-duration: 1.7s;
    --section-ani-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --regist-ani-duration: 1.4s;
    --regist-ani-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --------------------------------------------------------------------------
   section_contact — layout (배경 contact/regist 페이드)
-------------------------------------------------------------------------- */
.section_contact .bg {
    transition: transform 0.8s var(--section-ani-ease), opacity 1s var(--section-ani-ease);
    pointer-events: none;
}

/* contact 배경: 진입 시 축소·반투명 → fp-completely에서 풀 노출 */
.section_contact .bg_contact {
    opacity: 0.5;
    transform: scale(1.3);
    z-index: 0;
}

.section_contact.fp-completely .bg_contact {
    opacity: 1;
    transform: scale(1);
}

/* on1: contact 배경 서서히 확대 */
.section_contact.on1 .bg_contact {
    transform: scale(1.15);
    transition-delay: 0.4s;
    transition: 10s;
}

/* --------------------------------------------------------------------------
   [레이아웃] contact / regist 컨테이너
-------------------------------------------------------------------------- */
.section_contact .contact_container,
.section_contact .regist_container {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.9s var(--regist-ani-ease), visibility 0.9s var(--regist-ani-ease);
}

.section_contact .section_inner {
    position: relative;
    z-index: 1;
}

/* on1: 오시는길 페이드아웃 */
.section_contact.on1 .contact_container {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* regist 기본: 숨김 → on1에서 표시 */
.section_contact .regist_container {
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

}

.section_contact.on1 .regist_container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   section_contact — layout (step0 오시는길)
-------------------------------------------------------------------------- */
.section_contact .logo_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, calc(20 / 1920 * 100vw), 20px);
    margin-bottom: clamp(28px, calc(60 / 1920 * 100vw), 60px);
}

.section_contact .logo_wrap img {
    display: block;
    width: auto;
    height: auto;
}

.section_contact .logo_wrap .item_01 img {
    width: clamp(150px, calc(316 / 1920 * 100vw), 316px);
}

.section_contact .logo_wrap .item_02 img {
    width: clamp(90px, calc(195 / 1920 * 100vw), 195px);
}

.section_contact .logo_wrap .hidden_item {
    overflow: hidden;
}

/* 진입 전: 로고 아래에서 대기 */
.section_contact .logo_wrap .hidden_item>span {
    display: block;
    transform: translateY(100%);
    transition: transform var(--section-ani-duration) var(--section-ani-ease);
}

/* 섹션 진입: 로고 슬라이드 업 */
.section_contact.fp-completely .logo_wrap .hidden_item>span {
    transform: translateY(0);
}

.section_contact .logo_wrap .item_01>span {
    transition-delay: 0.3s;
}

.section_contact .logo_wrap .item_02>span {
    transition-delay: 0.5s;
}

.section_contact .content_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, calc(100 / 1920 * 100vw), 100px);
    width: 100%;
}

.section_contact .img_box {
    flex-shrink: 0;
    width: 100%;
    max-width: clamp(280px, calc(600 / 1920 * 130vw), 600px);
    border: 1px solid #eaeaea;
    background: #fff;
    overflow: hidden;
}

.section_contact .img_box img {
    display: block;
    width: 100%;
    height: auto;
}

.section_contact .txt_box {
    flex-shrink: 0;
    width: 100%;
    max-width: clamp(300px, calc(583 / 1920 * 130vw), 583px);
}

.section_contact .txt_box_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.section_contact .map_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.section_contact .map_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, calc(50 / 1920 * 100vw), 50px);
    width: 100%;
}

.section_contact .map_info {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.section_contact .map_label {
    position: relative;
    flex-shrink: 0;
    width: clamp(88px, calc(105 / 1920 * 100vw), 105px);
    padding: 12px 0 12px 14px;
    font-family: var(--font-suit, 'SUIT', sans-serif);
    font-size: clamp(14px, calc(17 / 1920 * 100vw), 17px);
    font-weight: 700;
    line-height: 1;
    color: #3a3a3a;
}

.section_contact .map_label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #3a3a3a;
    transform: translateY(-50%);
}

.section_contact .map_addr {
    padding: 12px clamp(8px, calc(14 / 1920 * 100vw), 14px);
    font-family: var(--font-suit, 'SUIT', sans-serif);
    font-size: clamp(14px, calc(18 / 1920 * 100vw), 18px);
    font-weight: 400;
    line-height: 1.4;
    color: #3a3a3a;
}

.section_contact .map_links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.section_contact .map_links a {
    display: block;
    width: clamp(26px, calc(31 / 1920 * 100vw), 31px);
    height: clamp(26px, calc(31 / 1920 * 100vw), 31px);
    flex-shrink: 0;
}

.section_contact .map_links img {
    display: block;
    width: 100%;
    height: 100%;
}

.section_contact .household_info {
    width: 100%;
    margin-top: clamp(24px, calc(50 / 1920 * 100vw), 50px);
    padding: 8px clamp(16px, calc(30 / 1920 * 100vw), 30px);
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    text-align: center;
}

.section_contact .household_info p {
    font-family: var(--font-suit, 'SUIT', sans-serif);
    font-size: clamp(14px, calc(20 / 1920 * 100vw), 20px);
    font-weight: 300;
    line-height: 1.4;
    color: #111;
}

.section_contact .household_info strong {
    font-weight: 700;
}

.section_contact .contact_tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: clamp(22px, calc(24 / 1920 * 100vw), 24px);
    color: #5a6770;
}

.section_contact .contact_label {
    font-size: clamp(15px, calc(20 / 1920 * 100vw), 20px);
    font-weight: 500;
    line-height: 1;
}

.section_contact .contact_num {
    font-family: 'Paperozi', sans-serif;
    font-size: clamp(20px, calc(30 / 1920 * 100vw), 30px);
    font-weight: 700;
    line-height: 1;
    color: #5a6770;
    text-decoration: none;
}

/* 진입 전: 콘텐츠 아래에서 대기 */
.section_contact .img_box,
.section_contact .map_list,
.section_contact .household_info,
.section_contact .contact_tel {
    opacity: 0;
    transform: translateY(40px);
    transition-property: opacity, transform;
    transition-duration: var(--section-ani-duration);
    transition-timing-function: var(--section-ani-ease);
}

.section_contact .img_box {
    transition-delay: calc(var(--section-ani-delay) + 0.4s);
}

.section_contact .map_list {
    transition-delay: calc(var(--section-ani-delay) + 0.6s);
}

.section_contact .household_info {
    transition-delay: calc(var(--section-ani-delay) + 0.8s);
}

.section_contact .contact_tel {
    transition-delay: calc(var(--section-ani-delay) + 1s);
}

/* 섹션 진입: 오시는길 콘텐츠 페이드·슬라이드 업 */
.section_contact.fp-completely .img_box,
.section_contact.fp-completely .map_list,
.section_contact.fp-completely .household_info,
.section_contact.fp-completely .contact_tel {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   section_contact — layout (on1 관심고객등록)
-------------------------------------------------------------------------- */
.section_contact .regist_layout {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(40px, calc(80 / 1920 * 100vw), 80px);
    width: 100%;
    height: 100%;
}

/* 왼쪽: 폼 패널 — on1에서 왼쪽→오른쪽 슬라이드 + 페이드 */
.section_contact .regist_form_panel {
    position: relative;
    display: flex;
    flex-direction: column;
    /* flex: 1; */
    width: 50%;
    min-height: 0;
    /* opacity: 0; */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(5px);
    transform: translateX(-100%);
    transition:
        opacity var(--regist-ani-duration) var(--regist-ani-ease),
        transform var(--regist-ani-duration) var(--regist-ani-ease);
    transition-delay: 0.15s;
    padding: 120px 60px 0 160px;
}

.section_contact .regist_form_panel:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20vh;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}

.section_contact .regist_form_panel.off:before {
    opacity: 0;
}


.section_contact.on1 .regist_form_panel {
    /* opacity: 1; */
    transform: translateX(0);
}


.section_contact .regist_main_tit {
    flex-shrink: 0;
    margin: 0 0 clamp(16px, calc(24 / 1920 * 100vw), 24px);
    font-family: 'Nanum Myeongjo', serif;
    font-size: clamp(26px, calc(36 / 1920 * 100vw), 36px);
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

/* 타이틀 아래 내부 스크롤 영역 (휠이 다음 페이지로 전파되지 않음 — main.js) */
.section_contact .regist_form_panel {
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.section_contact .regist_form_body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 8px;
    pointer-events: auto;
}

.section_contact.on1 .regist_form_panel input,
.section_contact.on1 .regist_form_panel select,
.section_contact.on1 .regist_form_panel textarea,
.section_contact.on1 .regist_form_panel label,
.section_contact.on1 .regist_form_panel button,
.section_contact.on1 .regist_form_panel a.btn_regist {
    pointer-events: auto;
}

.section_contact.on1 .regist_form_panel input[type="text"],
.section_contact.on1 .regist_form_panel select,
.section_contact.on1 .regist_form_panel textarea {
    user-select: text;
    -webkit-user-select: text;
}

.section_contact .regist_form_body::-webkit-scrollbar {
    width: 4px;
}

.section_contact .regist_form_body::-webkit-scrollbar-thumb {
    background: rgba(1, 81, 82, 0.35);
    border-radius: 2px;
}

/* 오른쪽: 카피 — 등장 시 data-text-ani(line)로 등장 (JS에서 is-active) */
.section_contact .regist_copy_panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 clamp(40px, calc(80 / 1920 * 100vw), 80px) 0 clamp(24px, calc(56 / 1920 * 100vw), 56px);
    color: #1a1a1a;
    text-align: left;
}

.section_contact .regist_copy_line {
    margin: 0 0 clamp(14px, calc(22 / 1920 * 100vw), 22px);
    color: #555;
    font-family: SUIT, sans-serif;
    font-size: clamp(18px, calc(24 / 1920 * 100vw), 24px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.45;
}

.section_contact .regist_copy_emphasis {
    margin: 0;
    color: #111;
    font-size: clamp(30px, calc(46 / 1920 * 100vw), 46px);
    font-weight: 700;
    font-family: "Nanum Myeongjo", "NanumMyeongjoOTF", serif;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.section_contact .regist_copy_emphasis+.regist_copy_emphasis {
    margin-top: 0.08em;
}

/* Riverfront 스크립트 이미지 — line 애니 금지(img가 비워짐). on1에서 페이드·슬라이드 */
.section_contact .regist_copy_script {
    margin: clamp(36px, calc(52 / 1920 * 100vw), 56px) 0 0;
    width: min(100%, clamp(300px, calc(480 / 1920 * 100vw), 520px));
    overflow: hidden;
    line-height: 0;
}

.section_contact .regist_copy_script img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0s;
    will-change: transform, opacity;
}

.section_contact.on1 .regist_copy_script img {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 1.35s;
}

/* --------------------------------------------------------------------------
   section_contact — layout (on1 temp_regist 오버라이드)
-------------------------------------------------------------------------- */
.section_contact .temp_regist {
    --table-top-border: #015152;
    --table-th-bg: #e8f1f1;
    --regist-btn-bg: #015152;
    text-align: left;
}

.section_contact .temp_regist .page_container {
    max-width: none;
    padding: 0;
}

.section_contact .temp_regist .regist_tit {
    margin: 0 0 8px;
    font-size: clamp(15px, calc(18 / 1920 * 100vw), 18px);
    font-weight: 700;
    color: #222;
}

.section_contact .temp_regist .regist_stitle {
    margin: 0 0 12px;
    font-size: clamp(12px, calc(14 / 1920 * 100vw), 14px);
    line-height: 1.5;
    color: #555;
}

.section_contact .temp_regist .terms_agree {
    padding: 12px 0 20px;
    text-align: left;
}

.section_contact .temp_regist .terms_agree p {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.45;
}

.section_contact .temp_regist .privacy_tb {
    margin-bottom: 8px;
}

.section_contact .temp_regist .privacy_tb th,
.section_contact .temp_regist .privacy_tb td {
    padding: 10px 12px;
    font-size: 13px;
}

.section_contact .temp_regist .foot_summary {
    margin: 8px 0 16px;
    padding: 12px 14px;
    background: #f3f3f3;
}

.section_contact .temp_regist .foot_summary li {
    font-size: 12px;
    line-height: 1.55;
    color: #666;
}

.section_contact .temp_regist .regist_submit_wrap {
    margin: 0 0 8px;
}

.section_contact .temp_regist .btn_regist {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--regist-btn-bg) !important;
}

.section_contact .temp_regist .btn_cancel {
    display: none;
}


@media screen and (max-width: 1400px) {
    .section_contact .regist_form_panel {
        width: 60%;
        padding: 10% 60px 0 5vw;
    }
}

/* --------------------------------------------------------------------------
   [반응형] contact / regist ≤1024
   — brand_detail bd_story_scroll 과 동일: 뷰포트 높이 내부스크롤 → 끝에서 다음 섹션
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   section_contact — responsive
-------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
    .section_contact .content_inner {
        flex-direction: column;
        gap: 32px;
    }

    .section_contact .img_box,
    .section_contact .txt_box {
        max-width: 480px;
    }

    .section_contact .map_item {
        gap: 20px;
    }

    /* regist: 풀뷰포트 스크롤 스테이지 */
    .section_contact .regist_container {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .section_contact .regist_layout {
        flex-direction: column;
        gap: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: 100%;
        margin: 0;
        min-height: 0;
    }

    .section_contact .regist_form_panel {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-height: none;
        min-height: 0;
        padding: 72px 20px 0;
        transform: translateY(24px);
        background: rgba(255, 255, 255, 0.42);
        backdrop-filter: blur(8px);
        box-sizing: border-box;
    }

    .section_contact.on1 .regist_form_panel {
        transform: translateY(0);
    }

    .section_contact .regist_main_tit {
        flex-shrink: 0;
        margin: 0 0 20px;
        padding: 0 4px;
        font-size: clamp(24px, 7vw, 32px);
    }

    /* 타이틀 아래 = 내부 스크롤 (bd_story_scroll) */
    .section_contact .regist_form_body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 4px 32px;
    }

    /* 모바일 약관 더보기 — regist_main.php 스타일 기준, 섹션 오버라이드 정리 */
    .section_contact .temp_regist .terms_box {
        height: 140px;
        max-height: 140px;
        overflow: hidden;
    }

    .section_contact .temp_regist .terms_box_wrap.is-expanded .terms_box {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .section_contact .temp_regist .page_container>div {
        margin-bottom: 32px;
    }

    .section_contact .regist_copy_panel {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .section_contact .map_item {
        gap: 12px 18px;
    }

    .section_contact .map_info {
        flex: 1 1 1;
    }

    .section_contact .map_links {
        margin-left: auto;
    }

    .household_info strong {
        display: block;
    }

    .section_contact .contact_tel {
        flex-wrap: wrap;
        justify-content: center;
    }

    .section_contact .temp_regist .privacy_tb th,
    .section_contact .temp_regist .privacy_tb td {
        padding: 8px;
        font-size: 12px;
    }

    .section_contact .temp_regist .privacy_tb .pcs1,
    .section_contact .temp_regist .privacy_tb .pcs2,
    .section_contact .temp_regist .privacy_tb .pcs3,
    .section_contact .temp_regist .privacy_tb .address1,
    .section_contact .temp_regist .privacy_tb .address2,
    .section_contact .temp_regist .privacy_tb .address3 {
        width: 100%;
        max-width: none;
        /* margin-bottom: 6px; */
    }
}

@media screen and (max-width: 480px) {
    .section_contact .content_inner {
        gap: 30px;
    }

    .section_contact .img_box {
        max-width: 260px;
    }

    .section_contact .map_item {
        gap: 12px 7px;
    }

    .section_contact .map_label,
    .section_contact .map_addr {
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0;
    }

    .section_contact .map_addr {
        padding-left: 0;
    }
}


/* ==========================================================================
   section_footer
   --------------------------------------------------------------------------
   layout
========================================================================== */

/* --------------------------------------------------------------------------
   section_footer — layout
-------------------------------------------------------------------------- */

.section_footer {
    position: relative;
    z-index: 2;
}


.footer_container .footer_inner {
    gap: 0;
}