/* ============ 카카오맵 마커/오버레이 ============ */
.map_marker { position: relative; display: inline-block; }
.my-place-label {
    background: #fff; border: 2px solid var(--mc); padding: 8px 15px;
    border-radius: 30px; font-size: 13px; font-weight: bold; color: #333;
    text-align: center; white-space: nowrap; position: relative; bottom: 50px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15); cursor: pointer; z-index: 10;
    transform: translateY(-50%);
}
@media screen and (max-width:599px) { .my-place-label { bottom: 50px; } }
.my-place-label:after {
    content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
    border-top: 8px solid var(--mc); border-left: 8px solid transparent; border-right: 8px solid transparent;
}
.my-place-label:before {
    content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    border-top: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; z-index: 1;
}

/* ============ 선택 ============ */
::selection { background: var(--mc); color: #fff; }

/* ============ Base / Reset ============ */
:where(*:not(section:not(.rltv), section:not(.rltv) *)), :where(*:not(section:not(.rltv), section:not(.rltv) *))::before, :where(*:not(section:not(.rltv), section:not(.rltv) *))::after { box-sizing: unset; margin: 0; } /* 리뉴얼 섹션(.rltv 없는 section) 서브트리 제외 — 특이도 0 유지 */
button { outline: none; border: none; }
html, body { padding: 0; margin: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; color: inherit; }
html { scroll-behavior: smooth; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ============ Layout Helpers ============ */
section:where(.rltv, .sub-page-section) { overflow: hidden; display: flex; justify-content: center; align-items: center; width: 100%; flex-direction: column; letter-spacing: -0.05em; }

.pc-mobile { display: flex; }
.mobile-pc { display: none; }
.pc        { display: flex; }
.pc-inline { display: inline; }
.tablet    { display: none; }
.mobile    { display: none; }

.clearfix::before, .clearfix::after { content: ""; display: block; clear: both; }
.flowhid { overflow: hidden; }
.hide    { display: none !important; }
.hideopa { opacity: 0 !important; }
.show    { opacity: 1 !important; }
.absol   { position: absolute; }
.rltv    { position: relative; }
.fwrap   { flex-wrap: wrap; }
.pointer { cursor: pointer; }

.leftflex  { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 50%; }
.rightflex { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 50%; }
.flexrow   { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row; }
.flexcol   { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }

/* 무한 스크롤 (마키) */
.scrX { width: 100%; display: flex; justify-content: center; align-items: center; }
.scrX .scrX_item { animation: marqueeX 20s linear infinite; width: 100%; }
.scrX .scrX_item_absol { right: -100%; width: 100%; }
.scrY { height: 100%; display: flex; justify-content: center; align-items: center; }
.scrY .scrY_item { animation: marqueeY 20s linear infinite; height: 100%; }
.scrY .scrY_item_absol { bottom: -100%; width: 100%; }

body {
    font-family: 'Noto Sans CJK KR','Noto Sans KR',system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,sans-serif;
}

/* ============ Keyframes (공통 재사용) ============ */
@keyframes marquee    { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee2   { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes marqueeX   { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes marqueeY   { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes rotate360  { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes zoom       { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes zoom2      { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes opa        { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes opazoom    { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.02); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ball       { 0% { bottom: 0; } 100% { bottom: 20px; } }
@keyframes blk        { 0%,30% { opacity: 0; } 31%,99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes blk2       { 0%,49% { opacity: 0; } 50%,99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes scaleOpa   { 100% { transform: scale(1.1); opacity: 0; } }
@keyframes scaleOpa2  { 100% { transform: scale(1.4); opacity: 0; } }

.rotate    { animation: rotate360 20s linear infinite; }
.blk       { animation: blk 1s infinite; }
.opazoom   { animation: opazoom 1.5s infinite; }
.scaleopa1 { animation: scaleOpa 2s infinite; }
.scaleopa2 { animation: scaleOpa2 2s infinite; }

/* ============ 클라이언트별 섹션 스타일은 아래에 추가 ============ */
.main {
    margin-top: 0; margin-left: 0; width: 100%;
    display: flex; justify-content: flex-start; align-items: center; flex-direction: column;
}

/* ============ MAIN VISUAL ============ */
.main .mv {
    position: fixed !important;
    z-index: 2147483647;
    top: 0vw;
    left: 0%;
    height: 100vh;
    width: 100%;
    padding: 0;
    background: #ffffff;
    justify-content: flex-start;
    align-items: center;
}

/* 메인페이지: 헤더 / 푸터 / 퀵문의 숨김 (인트로 비주얼만 노출) */
body.wak-intro-active header,
body.wak-intro-active footer,
body.wak-intro-active .contact_service {
    display: none !important;
}

/* 메인페이지: 그누보드 default.css 의 html{overflow-y:scroll} 무력화 — 빈 스크롤바 제거 */
/* (콘텐츠가 실제로 넘칠 때만 스크롤바 노출) */
html:has(body.wak-intro-active) {
    overflow-y: auto;
}

.main .mv,
.main .mv * {
    box-sizing: border-box;
}
.main .mv img {
    display: block;
    width: 100%;
}

/* ── 좌/우 half 전용 배경 ──
   구조 변경: 기존은 전체폭 베이스 1장을 좌 scene 이 잘라 쓰는 방식이었으나,
   신규 에셋이 960x1000 half 전용 2장이라 각 scene 이 자기 배경을 갖는다.
   img 를 실제로 렌더(구 코드는 opacity:0 더미였음) → GSAP scale 이 실제로 먹는다. */
.main .mv_left_media,
.main .mv_right_media {
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.main .mv_left_media img,
.main .mv_right_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.main .mv_overlay_layer {
    z-index: 1;
    top: 0vw;
    left: 0%;
    width: 100%;
    height: 100vh;
}

.main .mv_left_scene {
    z-index: 2;
    top: 0vw;
    left: 0%;
    width: 50%;
    height: 100vh;
    overflow: hidden;
    will-change: width;
}

.main .mv_right_scene {
    z-index: 2;
    top: 0vw;
    left: 50%;
    width: 50%;
    height: 100vh;
    overflow: hidden;
    will-change: width, left;
}

/* ── 좌면 이미지 (그림자 → 버거 순서로 겹침) ──
   시안 실측: 그림자 좌·하단 밀착 804x155 / 버거 우·하단 밀착 612x529.
   가로값은 scene 폭(=시안 960) 대비 %. */
.main .mv_burger_shadow {
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 83.750000%;
    aspect-ratio: 804 / 155;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.main .mv_left_burger {
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 63.750000%;
    aspect-ratio: 612 / 529;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

/* ── 좌면 콘텐츠 컬럼 ──
   시안 실측(4요소 x): BRAND 161 / 한글 164 / Wak 145 / 버튼 162.
   컬럼 기준점은 최좌단인 Wak(145)로 잡고 나머지는 margin-left 델타로 민다.
   세로 시작 top 은 시안 y=189 → 뷰포트 높이 대비 18.9vh. */
.main .mv_brand_content {
    z-index: 3;
    top: 18.900000vh;
    left: 15.104167%;
    /* width 없으면 flex-start 로 shrink-to-fit 되어 자식 % 가 scene(960)이 아닌
       축소된 폭 기준으로 풀린다. scene 폭과 동일하게 고정해야 실측 좌표가 맞는다. */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.main .mv_brand_title {
    margin-left: 1.666667%;
    width: 18.541667%;
    aspect-ratio: 178 / 35;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main .mv_brand_desc {
    margin-top: 1.354167vw;
    margin-left: 1.979167%;
    font-family: 'Pretendard', 'Noto Sans CJK KR', sans-serif;
    font-size: var(--fs-30);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
    white-space: nowrap;
}

.main .mv_brand_wordmark {
    margin-top: 2.812500vw;
    width: 58.333333%;
    aspect-ratio: 560 / 213;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 흰 워드마크가 배경 그라데이션에 뜨지 않도록 아주 연한 입체감만 */
    filter: drop-shadow(0 0.208333vw 0.520833vw rgba(0, 0, 0, 0.18));
}

.main .mv_brand_button_wrap {
    position: relative;
    margin-top: 2.656250vw;
    margin-left: 1.770833%;
    width: 21.562500%;
}

/* 화살표형 버튼은 배경이미지가 아니라 흐름 img — 이 img 가 wrap 높이를 결정한다.
   (CSS border-radius pill 로는 우측 꼭지점을 만들 수 없어 이미지로 교체)
   ★ 이 요소에는 transition 을 걸지 말 것 — GSAP 이 transform/opacity 를 직접 쓰는
     대상이라 CSS 트랜지션이 매 프레임에 개입해 등장 모션이 뭉개진다. hover 는 wrap 담당. */
.main .mv_brand_button_shape {
    display: block;
    width: 100%;
}

.main .mv_brand_button_text {
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 15.458937%;
    font-family: 'Pretendard', 'Noto Sans CJK KR', sans-serif;
    font-size: var(--fs-20);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
    white-space: nowrap;
    pointer-events: none;
}

/* ── 우면 이미지 (3D 파사드 — 우·하단 밀착) ── */
.main .mv_store_media {
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 75.208333%;
    aspect-ratio: 722 / 387;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

/* ── 우면 콘텐츠 컬럼 ──
   시안 실측(4요소 x, half 기준): FRANCHISE 149 / 한글 153 / Wak 134 / 버튼 148.
   좌면과 동일하게 최좌단 Wak(134)을 기준점으로 잡고 델타로 민다.
   우측 블록은 좌면보다 자기 half 기준 11~12px 안쪽 — 시안 그대로. */
.main .mv_franchise_content {
    z-index: 3;
    top: 18.800000vh;
    left: 13.958333%;
    /* 좌면과 동일 — shrink-to-fit 방지용 폭 고정 */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.main .mv_franchise_title {
    margin-left: 1.562500%;
    width: 29.166667%;
    aspect-ratio: 280 / 37;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main .mv_franchise_desc {
    margin-top: 1.302083vw;
    margin-left: 1.979167%;
    font-family: 'Pretendard', 'Noto Sans CJK KR', sans-serif;
    font-size: var(--fs-30);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
    white-space: nowrap;
}

.main .mv_franchise_wordmark {
    margin-top: 2.812500vw;
    width: 58.333333%;
    aspect-ratio: 560 / 213;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 좌면과 동일 */
    filter: drop-shadow(0 0.208333vw 0.520833vw rgba(0, 0, 0, 0.18));
}

.main .mv_franchise_button_wrap {
    position: relative;
    margin-top: 2.656250vw;
    margin-left: 1.458333%;
    width: 25.104167%;
}

.main .mv_franchise_button_shape {
    display: block;
    width: 100%;
}

.main .mv_franchise_button_text {
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 12.863071%;
    font-family: 'Pretendard', 'Noto Sans CJK KR', sans-serif;
    font-size: var(--fs-20);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
    white-space: nowrap;
    pointer-events: none;
}

/* ── 버튼 호버 ──
   구 규칙은 좌우 공통으로 background 를 --mc(레드)로 바꿨으나, 신규는 버튼이
   검정 화살표 이미지고 좌면 배경이 레드라 색 전환이 성립하지 않는다.
   → 미세 전진 + 밝기로 대체(양면 동일, 배경색 의존 없음).

   ★ hover 대상은 반드시 _wrap — 두 가지 이유
     1) GSAP 은 _shape(img)·_text 에만 관여하므로 _wrap 에 걸면 간섭이 없다
     2) _shape 에 걸면 화살표만 움직이고 라벨 텍스트가 제자리에 남는다 */
.main .mv_brand_button_wrap,
.main .mv_franchise_button_wrap {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.main .mv_brand_button_wrap:hover,
.main .mv_franchise_button_wrap:hover {
    transform: translateX(1.5%);
    filter: brightness(1.35);
}

/* scene 박스 자체가 링크(a) — 링크 기본 스타일 리셋 */
.main .mv_left_scene,
.main .mv_right_scene {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}