/* ============ 카카오맵 마커/오버레이 ============ */
.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 ============ */
*, *::before, *::after { box-sizing: unset; margin: 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 { 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%;
}

.main .mv_base_media {
    z-index: 0;
    margin-top: 0vw;
    margin-left: 0%;
    align-self: center;
    width: calc(var(--px) * 1920);
    aspect-ratio: 1920 / 899;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/images/header&footer&quick/intro_bg.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.main .mv_base_media img {
    width: 100.787402vw !important;
    max-width: unset;
    min-width: 0;
    height: auto !important;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
}

.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;
}

.main .mv_marquee_layer {
    z-index: 1;
    top: 0vw;
    left: 0%;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.main .mv_marquee {
    left: 0%;
    width: 100%;
    overflow: hidden;
}

.main .mv_marquee_top {
    top: 0vw;
}

.main .mv_marquee_bottom {
    top: 44.881890vw;
}

.main .mv_marquee_track {
    display: flex;
    flex-direction: row;
    width: 235.380578vw;
    animation: marquee 24s linear infinite;
}

.main .mv_marquee_track_reverse {
    animation-name: marquee2;
}

.main .mv_marquee_strip {
    flex-shrink: 0;
    width: calc(var(--px) * 2242);
    aspect-ratio: 2242 / 44;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main .mv_left_burger {
    z-index: 2;
    bottom: 0;
    left: 0%;
    width: calc(var(--px) * 311);
    aspect-ratio: 311 / 533;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main .mv_brand_content {
    z-index: 3;
    top: 17.952756vw;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main .mv_brand_title {
    width: calc(var(--px) * 321);
    aspect-ratio: 321 / 63;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.49vw;
}

.main .mv_brand_desc {
    font-family: 'Noto Sans CJK KR', sans-serif;
    font-size: var(--fs-18);
    font-weight: 500;
    line-height: 1.556;
    letter-spacing: -0.05em;
    color: #090909;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 0.92vw;
}

.main .mv_brand_button_wrap {
    position: relative;
    width: 9.396vw;
    height: 2.782152vw;
}

.main .mv_brand_button_shape {
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.312336vw;
    background: #090909;
    transition: background-color 0.3s ease, filter 0.3s ease;
}

.main .mv_brand_button_text {
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: var(--fs-16);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

.main .mv_right_media {
    z-index: 1;
    top: 0vw;
    left: 0%;
    width: 100%;
    /* aspect-ratio: 962 / 899; */
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/images/header&footer&quick/intro_bg2.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.main .mv_right_media img {
    width: 50.498688vw !important;
    max-width: unset;
    min-width: 0;
    height: auto !important;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
}

.main .mv_franchise_content {
    z-index: 3;
    top: 17.690289vw;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main .mv_franchise_title {
    width: calc(var(--px) * 503);
    aspect-ratio: 503 / 65;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.44vw;
}

.main .mv_franchise_desc {
    font-family: 'Noto Sans CJK KR', sans-serif;
    font-size: var(--fs-18);
    font-weight: 500;
    line-height: 1.556;
    letter-spacing: -0.05em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 1.07vw;
}

.main .mv_franchise_button_wrap {
    position: relative;
    width: 9.396vw;
    height: 2.782152vw;
}

.main .mv_franchise_button_shape {
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.312336vw;
    background: #090909;
    transition: background-color 0.3s ease, filter 0.3s ease;
}

/* More View 버튼 자체 호버 시 primary 전환 + drop-shadow */
.main .mv_brand_button_wrap:hover .mv_brand_button_shape,
.main .mv_franchise_button_wrap:hover .mv_franchise_button_shape {
    background: var(--mc);
    filter: drop-shadow(0 0.3vw 0.8vw rgba(229, 27, 27, 0.35));
}

.main .mv_franchise_button_text {
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: var(--fs-16);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

.main .mv_store_media {
    z-index: 2;
    /* top: 28.556430vw; */
    left: 50%;
    margin-left: calc(var(--px) * -416);
    width: calc(var(--px) * 832);
    aspect-ratio: 832 / 356;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
}

.main .mv_right_burger {
    z-index: 5;
    top: 0vw;
    right: 0%;
    width: calc(var(--px) * 223);
    aspect-ratio: 223 / 366;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

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