@charset "utf-8";
/*------------------------------------------------------
· Project      : MU:A INTERIOR (mua)
· File         : layout.css — 전역 레이아웃 · 공통 컴포넌트
· SUMMARY:
  1) Shared Base (abs / fill / overlay / bar / state)
  2) Loader        3) Header       4) Menu (drawer)
  5) Quick         6) Footer       7) Sub Content Wrap
  8) Form          9) Button / Link      10) Responsive
· NOTE : 배치(flex·gap·정렬)는 basic.css 유틸을 마크업에서 조합한다.
         이 파일에는 각 컴포넌트 고유의 값(크기·색·위치)만 둔다.
---------------------------------------------------------*/

/* #################################### 01.Shared Base #################################### */
.mua-abs {
    position: absolute;
}

.mua-ink-bg {
    background: var(--color-ink);
}

.mua-line-top {
    border-top: var(--line-w) solid var(--color-line);
}

.mua-line-bottom {
    border-bottom: var(--line-w) solid var(--color-line);
}

/* 위로 걷히는 상태 (헤더 숨김 · 드로어 초기 · 로더 종료) */
.is-up {
    transform: translateY(-100%);
}

.mua-tr {
    transition: transform var(--transition-base);
}

/* 라인·필 — 좌 -> 우로 자라고, 나갈 때 우 -> 좌로 빠진다. 크기·색은 부모가 변수로 지정 */
.mua-link::after,
.mua-btn::before,
.mua-topnav-menu > li > a::after {
    content: '';
    position: absolute;
    inset: var(--fill-inset);
    height: var(--fill-h);
    background: var(--fill-bg);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--fill-transition, var(--transition-base));
}

/* 화면 전체를 덮는 레이어 — 배경·z-index 는 변수로 */
.mua-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: var(--overlay-z);
}

/* 화면 상·하단 고정 바 */
.mua-bar {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: var(--z-header);
}

/* #################################### 02.Loader #################################### */
.mua-loader {
    --overlay-bg: var(--color-bg);
    --overlay-z: var(--z-loader);
    transition: transform var(--dur-loader-lift) var(--ease-inout);
}

/* 걷히기 직전 — 안쪽 것(로고 · 글 · 게이지)이 먼저 옅어진다. 곧장 커튼만 올리면 툭 사라져 보인다 */
.mua-loader > * {
    transition: opacity var(--dur-loader-out) var(--ease-out);
}

.mua-loader.is-out > * {
    opacity: 0;
}

.mua-loader-logo {
    width: var(--logo-w);
}

.mua-loader-bar {
    width: var(--loader-bar-w);
    height: var(--line-w);
    background: var(--color-line);
}

/* 진행 바 — 왼쪽 끝을 축으로 실제 진행률만큼 가로로 채워진다.
   --loader-progress 는 로더 스크립트가 0~1 로 갱신한다. */
.mua-loader-bar > span {
    display: block;
    height: 100%;
    transform: scaleX(var(--loader-progress, 0));
    transform-origin: left center;
    /* 값이 껑충 뛰어도 선은 이어져 보이게 — 숫자와 같은 결로 따라간다 */
    transition: transform var(--dur-loader-step) linear;
}

/* #################################### 03.Header #################################### */
.mua-header {
    top: 0;
    height: var(--header-box-h);
    /* 굴리는 동안에는 뒤가 흐리게 비치고, 맨 위(스크롤 0)에서는 원래 바탕으로 돌아온다(지시).
       두 상태가 색·흐림 모두 같은 시간으로 이어져 툭 바뀌지 않는다 */
    background: var(--color-bg);
    /* backdrop-filter 는 값이 blur(0) 이어도 브라우저가 뒤 화면을 따로 떠서 합성한다.
       눈에는 아무 변화가 없는데 그리기 값은 다 치른다
       (2560 실측: 머리 흐림을 끄면 늦은 프레임 29 → 10).
       흐림을 실제로 쓰는 자리(맨 위가 아닌 서브)에서만 얹는다 */
    /* 걷히고 내려오는 움직임(.mua-tr 의 transform)도 여기서 함께 잇는다 —
       이 줄에 적지 않으면 뒤에 오는 이 선언이 .mua-tr 을 덮어 툭 사라졌다 툭 나타난다 */
    transition: transform var(--transition-header), background var(--transition-base), backdrop-filter var(--transition-base);
}

/* 맨 위가 아닐 때 — 뒤가 살짝 비치고 흐려진다.
   세로로 굴러가는 서브에서만 쓴다 — 메인은 칸이 옆으로 넘어가며 톤이 뒤집히므로
   두 번째 칸으로 넘어가는 순간 흰 배경이 툭 나타나 보인다(지시) */
body:not(.is-top):not([data-page="main"]) .mua-header {
    background: var(--header-bg-scroll);
    backdrop-filter: var(--header-blur);
}

/* 데스크탑에서 로고·배경음악·햄버거가 앉는 자리 — 메인과 서브가 같아야 한다.
   메인에만 두면 서브 로고가 90px 위에 서서 페이지를 넘길 때 로고가 튄다.
   (좁은 화면은 아래 반응형에서 바 높이 그대로 되돌린다) */
.mua-header-inner {
    align-items: flex-start;
    padding-block: var(--header-pad-y) var(--space-lg);
}

.mua-header-logo {
    width: var(--logo-w);
}

/* 로고와 배경음악 막대가 앉는 줄 — 막대는 로고 옆에 선다 */
.mua-header-line {
    gap: var(--space-md);
}

/* 로고 아래 줄 — 바깥 채널 아이콘이 선다.
   로고와는 넉넉히 띄워 한 덩이로 붙어 보이지 않게 한다 */
.mua-header-under {
    gap: var(--space-md);
    margin-top: var(--space-xs);
}



/* 누르는 자리(손 크기)가 그림보다 넓어 그냥 두면 아이콘이 옆 글줄보다 안쪽으로 들어간다.
   남는 폭의 절반만큼 당겨 아이콘 왼쪽 끝을 글줄 왼쪽선에 맞춘다 (머리·바닥·상담 모두) */
/* 누르는 자리가 이미 손 크기(44)라 사이를 더 벌리면 아이콘끼리 멀어 보인다 — 사이는 0 으로 두고
   눈에 보이는 간격은 누르는 자리의 남는 폭이 만든다 (지시: 간격 좁힘) */
.mua-sns {
    gap: 0;
    margin-left: calc((var(--tap-min) - var(--sns-icon-size)) / -2);
}

/* 그림만 당겨 두면 누르는 자리 한가운데와 그림 한가운데가 어긋난다
   (실측: 둘째 아이콘이 자리 중심에서 왼쪽으로 8). 손이 닿는 자리와 눈에 보이는 자리가
   따로 놀면 「가운데를 눌렀는데 안 눌린다」가 된다(지시).
   눈에 보이는 사이를 좁히는 것보다 둘이 겹쳐 있는 편이 낫다 — 당기지 않는다 */

/* 바닥에서는 저작권 줄 바로 위에, 전체메뉴에서는 메뉴 아래에 왼쪽부터 선다 */
.mua-sns-foot,
.mua-sns-menu {
    justify-content: flex-start;
    margin-top: var(--space-xl);
}

/* 바닥 로고 — 머리와 같은 얼굴을 조금 크게 세운다 */
.mua-ft-logo {
    position: relative;
    width: var(--ft-logo-w);
    height: calc(var(--ft-logo-w) * 0.5197);
}

.mua-ft-logo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

/* 아이콘이 작아도 누르는 자리는 손 크기를 지킨다 */
.mua-sns-link {
    width: var(--tap-min);
    height: var(--tap-min);
    color: var(--header-ink, var(--color-ink));
    transition: opacity var(--transition-fast);
}

.mua-sns-icon {
    width: var(--sns-icon-size);
    height: var(--sns-icon-size);
}

@media (hover: hover) {
    .mua-sns-link:hover {
        opacity: var(--sns-hover-dim);
    }
}

/* 누르는 자리가 그림보다 작아지지 않게 — 손 크기와 그림 높이 중 큰 쪽을 쓴다 */
.mua-header-logo > a {
    display: flex;
    height: max(var(--tap-min), var(--logo-h));
    align-items: center;
}

/* 선은 가늘어도 누르는 자리는 손 크기만큼 넓힌다 — 겉보기는 그대로다 */
.mua-header-menu {
    /* 줄 길이가 손 자리를 넘는 구간이 있다 — 둘 중 넓은 쪽을 눌리는 자리로 삼는다 */
    width: max(var(--tap-min), var(--menu-bar-w));
    height: var(--tap-min);
    padding: 0;
    justify-content: center;
}

/* 색이 늦게 따라오면 바탕이 먼저 바뀐 사이 아이콘이 묻힌다(실측: 흰 바탕에 흰 선 0.36초).
   바탕은 옆으로 넘어가며 0.18초면 바뀌므로 색도 짧은 전환을 쓴다 */
/* 읽어 주기용 글(.sr-only)은 줄이 아니다 — 함께 잡으면 그 글이 화면 폭만큼 늘어 가로 넘침이 생긴다 */
.mua-header-menu > span:not(.sr-only) {
    width: var(--menu-bar-w);
    height: var(--line-w);
    background: var(--header-ink);
    /* 짚으면 줄어드는 쪽이 위·아래가 서로 반대다 — 위 줄은 오른쪽 끝을 잡는다 */
    transform-origin: 100% 50%;
    transition: transform var(--dur-fast) var(--ease-out), background var(--transition-fast);
}

/* 아래 줄만 왼쪽 끝을 잡아, 둘이 어긋난 계단으로 물러난다 */
.mua-header-menu > span:nth-child(2) {
    transform-origin: 0% 50%;
}

@media (hover: hover) and (pointer: fine) {
    /* 폭만 바뀌므로 자리를 안 먹는다 — 옆의 로고와 중앙 메뉴가 밀리지 않는다 */
    .mua-header-menu:hover > span:not(.sr-only) {
        transform: scaleX(var(--menu-bar-shrink));
    }
}

/* 로고·햄버거 색은 지금 칸의 바탕을 따른다 (--header-ink 는 아래 톤 규칙이 정한다) */
.mua-header-logo img {
    filter: var(--header-logo-filter, none);
    transition: filter var(--transition-fast);
}

/* 메인은 첫 화면이든 넘어간 뒤든 바탕을 깔지 않는다 — 글자색이 칸 톤을 따라 뒤집혀 그대로 읽힌다.
   서브는 상단에 콘텐츠가 바로 오므로 원래 헤더를 그대로 쓴다. */
[data-page="main"] .mua-header {
    background: transparent;
}

/* #################################### 03-1.Topnav (최상단 전용) #################################### */
/* 첫 화면에서만 서는 좌측 세로 묶음. 로고는 배경 없이 얹히고, 메뉴는 면 위에 놓인다. */
/* 스크립트가 멈춘 화면에서만 서는 줄 — 그때는 햄버거를 열 수 없어 이것이 유일한 이동 수단이다.
   스크립트가 살아 있으면 <noscript> 안이라 아예 그려지지 않는다 */
.mua-nojs {
    padding: var(--space-sm) var(--wrap-side);
    background: var(--color-surface);
    border-bottom: var(--line-w) solid var(--color-line);
}

.mua-nojs-list {
    list-style: none;
}

.mua-nojs-link {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
}

.mua-topnav {
    position: fixed;
    top: var(--header-height);
    /* 좌우 끝까지 깔아 둔다 — 로고 앞 여백과 메뉴 앞 여백이 같은 기준(화면 폭)으로 계산된다 */
    inset-inline: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: var(--space-md);
    /* 빈 자리가 영상 위 조작을 가로막지 않게 */
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition-base);
}

/* 로고 앞 여백을 wrap 과 같은 토큰으로 먹인다.
   (padding 으로 주면 % 기준이 content box 로 줄어 값이 어긋난다) */
.mua-topnav > * {
    margin-left: var(--wrap-side);
    pointer-events: auto;
}

/* 메뉴 박스는 로고와 떨어져 히어로 오른쪽 끝에 선다 — 좌우 여백은 같은 폭.
   박스 자체는 손을 통과시킨다 — 글자 없는 빈 자리가 그 위 햄버거를 덮어 눌리지 않았다 */
.mua-topnav-nav {
    margin-inline: auto var(--wrap-side);
    pointer-events: none;
}


[data-page="main"].is-top .mua-topnav {
    visibility: visible;
    opacity: 1;
}

/* 첫 화면 등장 결 — 아래에서 살짝 올라오며 흐림이 걷힌다.
   끝 상태를 적지 않아 채움을 backwards 로 두면, 다 오른 뒤에는 원래 값으로 돌아간다.
   (forwards 로 끝 상태를 물면 배경음악 켬·손 얹기 같은 뒤따르는 변화가 먹지 않는다) */
@keyframes mua-enter-up {
    from {
        opacity: 0;
        transform: translateY(var(--enter-shift));
        filter: var(--enter-soft);
    }
}

/* 인트로가 걷히기 전에는 첫 화면 요소가 미리 보이면 안 된다 */
[data-page="main"]:not(.is-revealed) .mua-header-logo,
/* 인트로가 걷히기를 기다리는 자리다 — 스크립트가 서지 못하면 걷어 줄 손이 없으므로,
   준비가 끝났다는 표시 아래에서만 숨긴다 */
.is-ready [data-page="main"]:not(.is-revealed) .mua-header-eq,
.is-ready [data-page="main"]:not(.is-revealed) .mua-sns-head > li,
.is-ready [data-page="main"]:not(.is-revealed) .mua-flow-nav {
    opacity: 0;
}

/* 로고가 먼저 서고, 배경음악 막대가 뒤따른다 (그다음이 채널 아이콘·메뉴·문장·진행 표시) */
.is-revealed[data-page="main"] .mua-header-logo {
    animation: mua-enter-up var(--dur-enter) var(--ease-out) var(--enter-lead) backwards;
}

.is-revealed[data-page="main"] .mua-header-eq {
    animation: mua-enter-up var(--dur-enter) var(--ease-out) calc(var(--enter-lead) + var(--enter-step)) backwards;
}

/* 채널 아이콘 — 막대 다음에 왼쪽부터 하나씩 떠오른다 */
.is-revealed[data-page="main"] .mua-sns-head > li {
    animation: mua-enter-up var(--dur-enter) var(--ease-out) calc(var(--enter-lead) + var(--enter-step) * (2 + var(--sns-i, 0))) backwards;
}

.mua-sns-head > li:nth-child(2) {
    --sns-i: 1;
}

.mua-sns-head > li:nth-child(3) {
    --sns-i: 2;
}

/* 전체메뉴 단추 — 채널 아이콘 다음 차례다.
   넓은 화면은 첫 칸에서 이 단추를 감추고 상단 메뉴가 대신 서므로(.is-top) 차례에 들지 않는다.
   좁은 화면은 상단 메뉴가 서지 않아 이 단추가 유일한 입구라, 혼자 먼저 떠 있으면 결이 어긋난다 */
@media (max-width: 1024px) {
    .is-ready [data-page="main"]:not(.is-revealed) .mua-header-menu {
        opacity: 0;
    }

    .is-revealed[data-page="main"] .mua-header-menu {
        animation: mua-enter-up var(--dur-enter) var(--ease-out) calc(var(--enter-lead) + var(--enter-step) * 4) backwards;
    }
}

/* 인트로가 걷히면 메뉴 항목이 하나씩 떠오른다 (스크립트가 서지 못한 화면에서는 처음부터 보인다) */
.is-ready .mua-topnav-menu > li {
    opacity: 0;
    transform: translateY(var(--enter-shift));
    filter: var(--enter-soft);
    transition: opacity var(--dur-enter) var(--ease-out) var(--enter-delay, 0s),
                transform var(--dur-enter) var(--ease-out) var(--enter-delay, 0s),
                filter var(--dur-enter) var(--ease-out) var(--enter-delay, 0s);
}

.is-revealed .mua-topnav-menu,
.is-revealed .mua-topnav-menu > li {
    opacity: 1;
    transform: translateY(0);
    filter: none;
}

/* 영상이 또렷해질 때까지(--enter-lead) 기다렸다가 차례로 올라온다 */
.mua-topnav-menu > li:nth-child(1) { --enter-delay: calc(var(--enter-lead) + var(--enter-step) * 2); }
.mua-topnav-menu > li:nth-child(2) { --enter-delay: calc(var(--enter-lead) + var(--enter-step) * 3); }
.mua-topnav-menu > li:nth-child(3) { --enter-delay: calc(var(--enter-lead) + var(--enter-step) * 4); }
.mua-topnav-menu > li:nth-child(4) { --enter-delay: calc(var(--enter-lead) + var(--enter-step) * 5); }
.mua-topnav-menu > li:nth-child(5) { --enter-delay: calc(var(--enter-lead) + var(--enter-step) * 6); }
.mua-topnav-menu > li:nth-child(6) { --enter-delay: calc(var(--enter-lead) + var(--enter-step) * 7); }
.mua-topnav-menu > li:nth-child(7) { --enter-delay: calc(var(--enter-lead) + var(--enter-step) * 8); }
.mua-topnav-menu > li:nth-child(8) { --enter-delay: calc(var(--enter-lead) + var(--enter-step) * 9); }

/* 배경음악 이퀄라이저 — 멈추면 가는 선으로 돌아가고, 켜면 중앙에서 위아래로 퍼진다.
   막대는 가늘지만 누를 자리는 충분히 주고, 재생 중에만 또렷해진다. */
/* 막대는 가늘지만 누르는 자리는 손 크기를 채운다 —
   막대 다섯과 사이 넷을 뺀 나머지를 좌우로 나눠 폭도 손 크기가 되게 한다 */
.mua-header-eq {
    gap: var(--eq-gap);
    width: var(--tap-min);
    height: var(--tap-min);
    justify-content: center;
    opacity: var(--eq-idle);
    transition: opacity var(--transition-base);
}

.mua-header-eq.is-playing {
    opacity: var(--eq-play);
}

@media (hover: hover) {
    .mua-header-eq:hover {
        opacity: 1;
    }
}

/* 멈춰 있을 때도 다섯 줄이 보여야 한다 — 낮게 눕히되 사라지지는 않는다 */
.mua-header-eq > span {
    width: var(--eq-bar-w);
    height: var(--eq-bar-h);
    background: var(--header-ink);
    transform: scaleY(var(--eq-idle-scale));
    transform-origin: center;
    transition: transform var(--transition-base), background var(--transition-inout);
}

/* 켤 때는 멈춰 있던 낮은 선(0.16)에서 그대로 출발한다.
   시작점을 어긋내면(음수 delay) 그 순간 막대가 튀므로, 주기 차이만으로 흩어지게 둔다. */
.mua-header-eq.is-armed > span {
    animation: mua-eq var(--dur-eq) var(--ease-inout) infinite;
}

.mua-header-eq.is-armed > span:nth-child(1) { animation-duration: calc(var(--dur-eq) * 0.82); }
.mua-header-eq.is-armed > span:nth-child(2) { animation-duration: calc(var(--dur-eq) * 1.24); }
.mua-header-eq.is-armed > span:nth-child(3) { animation-duration: calc(var(--dur-eq) * 0.95); }
.mua-header-eq.is-armed > span:nth-child(4) { animation-duration: calc(var(--dur-eq) * 1.36); }
.mua-header-eq.is-armed > span:nth-child(5) { animation-duration: calc(var(--dur-eq) * 1.08); }

@keyframes mua-eq {
    0%,
100% { transform: scaleY(var(--eq-idle-scale)); }
    50% { transform: scaleY(1); }
}

/* 메뉴는 유리면 위에 놓인다 — 뒤 영상이 비치되 흐려져 글자가 읽힌다 */
/* 묶음도 함께 떠오른다. 빼 두면 항목만 먼저 떠 있는 꼴이 된다.
   흐림은 자식 항목이 각자 가지므로 여기서는 위치·투명도만 다룬다. */
.mua-topnav-menu {
    align-items: flex-start;
    --enter-delay: calc(var(--enter-lead) + var(--enter-step));
    opacity: 0;
    transform: translateY(var(--enter-shift));
    transition: opacity var(--dur-enter) var(--ease-out) var(--enter-delay),
                transform var(--dur-enter) var(--ease-out) var(--enter-delay);
}

/* 호버하면 글자 폭만큼 밑줄이 좌에서 우로 그려진다 (--fill-* 공통 패턴).
   글자는 한 겹이라 감출 것이 없다 — overflow 불필요. */
.mua-topnav-menu > li > a {
    position: relative;
    display: block;
    /* 손이 닿아야 하는 것은 글자뿐이다 — 둘러싼 빈 자리는 통과시킨다(.mua-topnav-nav) */
    pointer-events: auto;
    --fill-inset: auto 0 var(--topnav-line-lift) 0;
    --fill-bg: var(--color-white);
    --fill-transition: var(--transition-inout);
    color: var(--color-white);
    font-size: var(--topnav-fs);
    font-weight: var(--topnav-fw);
    line-height: var(--lh-display);
}

/* 서브 머리 줄 메뉴 — 첫 화면의 .mua-topnav 자리를 서브에서 대신한다.
   헤더 안(로고와 햄버거 사이)에 서므로 본문·히어로와 겹칠 자리가 없다 */
.mua-subnav {
    margin-inline: auto;
}

/* 아래로 굴리면 머리 띠가 통째로 걷힌다(.is-up). 첫 화면은 큰 그림을 가리지 않으려는 것이라 그대로 두지만,
   서브에서는 이 띠 안의 한 줄이 유일한 길이라 함께 사라지면 길을 잃는다
   (실측: 굴림 900 에서 머리 top -212 · 메뉴 안 보임 → 「가끔 안 나온다」의 정체).
   서브는 띠를 걷지 않는다 */
body:not([data-page="main"]) .mua-header.is-up {
    transform: none;
}

.mua-subnav-list {
    gap: var(--subnav-gap);
    list-style: none;
}

.mua-subnav-link {
    display: block;
    color: var(--color-ink);
    font-size: var(--subnav-fs);
    font-weight: var(--subnav-fw);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-label);
    --fill-inset: auto 0 var(--subnav-lift) 0;
    --fill-h: var(--subnav-line);
    --fill-bg: var(--color-ink);
    --fill-transition: var(--transition-inout);
    transition: color var(--transition-base);
}

/* 밑줄은 왼쪽에서 자라고 나갈 때 오른쪽으로 빠진다 — 사이트 공통 결(.mua-link) 을 그대로 쓴다 */
.mua-subnav-link::after {
    content: '';
    position: absolute;
    inset: var(--fill-inset);
    height: var(--fill-h);
    background: var(--fill-bg);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--fill-transition);
}

/* 지금 보고 있는 쪽은 밑줄을 세워 둔다 */
.mua-subnav-link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left center;
}

@media (hover: hover) and (pointer: fine) {
    .mua-subnav-link:hover::after {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

.mua-subnav-link:active {
    color: var(--color-ink-70);
}

/* #################################### 04.Menu (전체메뉴 — 확인판 시안 C) #################################### */
/* 화면을 덮되 판은 아래쪽 가운데에만 뜬다. 보던 공간이 뒤에 그대로 남아 흐려진다.
   닫힘 상태는 마크업의 inert 속성이 포커스까지 차단한다 */
.mua-menu {
    --overlay-bg: rgba(var(--color-ink-rgb), 0.55);
    --overlay-z: var(--z-drawer);
    justify-content: flex-end;
    padding-bottom: var(--menu-bottom);
    /* 뒤 화면은 열리는 동안 천천히 초점을 놓는다 (시안 I) */
    backdrop-filter: blur(0);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition-base), visibility var(--dur-base), backdrop-filter var(--transition-inout);
}

.mua-menu.is-open {
    visibility: visible;
    opacity: 1;
    backdrop-filter: var(--menu-blur);
}

/* 배경 — 격자가 느리게 호흡하고(시안 D) 그 위를 빛띠가 지난다(시안 C).
   메뉴가 열려 있는 동안만 돌게 두어 닫힌 상태에서는 그리지 않는다 */
.mua-menu-bg {
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.mua-menu.is-open .mua-menu-bg {
    opacity: 1;
}

.mua-menu-bg-grid {
    background-image:
        repeating-linear-gradient(to right, var(--menu-grid-ink) 0 var(--menu-grid-w), transparent var(--menu-grid-w) var(--menu-grid-gap)),
        repeating-linear-gradient(to bottom, var(--menu-grid-ink) 0 var(--menu-grid-w), transparent var(--menu-grid-w) var(--menu-grid-gap));
}

.mua-menu.is-open .mua-menu-bg-grid {
    animation: mua-menu-breath var(--dur-menu-breath) var(--ease-inout) infinite;
}

.mua-menu-bg-beam {
    background-image: linear-gradient(105deg, transparent 35%, var(--menu-beam-ink) 50%, transparent 65%);
}

.mua-menu.is-open .mua-menu-bg-beam {
    animation: mua-sweep var(--dur-menu-sweep) linear infinite;
}

@keyframes mua-menu-breath {
    0%   { opacity: 0.08; }
    50%  { opacity: 0.6; }
    100% { opacity: 0.08; }
}

/* 빛줄기가 면을 가로질러 지나간다 — 메뉴 바탕과 팝업 바탕이 함께 쓴다 */
@keyframes mua-sweep {
    from { transform: translateX(-60%); }
    to   { transform: translateX(60%); }
}

/* 판 — 아래에서 짧게 솟는다 */
.mua-menu-card {
    width: var(--menu-card-w);
    padding: 0 var(--space-lg) var(--space-sm);
    background: var(--color-bg);
    transform: translateY(var(--space-lg));
    transition: transform var(--transition-inout);
}

.mua-menu.is-open .mua-menu-card {
    transform: translateY(0);
}

/* 영상 — 판 폭을 꽉 채우고 맨 위에 붙는다 */
.mua-menu-film {
    height: var(--menu-film-h);
    margin-inline: calc(var(--space-lg) * -1);
    background: var(--img-frame-bg);
}

.mua-menu-film-media {
    object-fit: cover;
}

/* 영상 바로 아래 첫 줄이 붙어 보이지 않게, 줄 사이와 같은 만큼 띄우고 시작한다 */
.mua-menu-card > nav {
    padding-top: var(--menu-item-pad);
}

/* 주 메뉴 — 줄선으로 나눈 세 줄. 줄 간격은 위아래 여백이 잡는다 */
.mua-menu-lead {
    padding-block: var(--menu-item-pad);
    font-family: var(--font-en);
    font-size: var(--menu-lead-fs);
    font-weight: var(--fw-display);
    line-height: var(--lh-lead);
    border-bottom: var(--line-w) solid var(--color-line);
    transition: transform var(--transition-base);
}

/* 그 자리에 몇 개가 있는지 — 왼쪽 이름과 같은 크기로 적는다 */
.mua-menu-cnt {
    font-size: var(--menu-lead-fs);
    font-weight: var(--fw-body);
    letter-spacing: var(--ls-label);
    color: var(--color-ink-45);
}

/* 보조 묶음 — 오른쪽 끝에 붙인다. 항목이 늘어도 한 줄에 들어가게 사이를 좁힌다 */
.mua-menu-sub {
    justify-content: flex-end;
    padding-block: var(--space-sm);
    gap: var(--space-sm);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-label);
    color: var(--color-ink-70);
}

/* 바깥 채널 줄은 페이지 줄 바로 아래에 붙인다 */
.mua-menu-sns {
    padding-top: 0;
}

.mua-menu-sub-link {
    position: relative;
    display: block;
    padding-block: var(--space-xs);
}

/* 주소가 아직 없는 채널 — 자리는 지키되 누를 수 없다 */
.mua-menu-sub-off {
    opacity: var(--sns-hover-dim);
}

/* 바 — 닫기와 상담이 판 밑에 붙는다 */
.mua-menu-bar {
    margin-top: var(--space-sm);
    width: var(--menu-card-w);
    transform: translateY(var(--space-xl));
    transition: transform var(--transition-inout);
}

.mua-menu.is-open .mua-menu-bar {
    transform: translateY(0);
}

.mua-menu-close {
    flex: 1 1 0;
    height: var(--menu-bar-h);
    border: 0;
    background: var(--color-white);
    color: var(--color-ink);
}

/* 닫기 — 테두리 없이 빗금 두 개. 굵기는 눈금에 떨어지는 1px */
.mua-menu-x {
    position: relative;
    width: var(--menu-x-len);
    height: var(--menu-x-len);
}

.mua-menu-x::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--line-w);
    margin: auto;
    background: currentColor;
    transform: rotate(45deg);
}

.mua-menu-x::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--line-w);
    margin: auto;
    background: currentColor;
    transform: rotate(-45deg);
}

.mua-menu-cta {
    flex: 1 1 0;
    height: var(--menu-bar-h);
    background: var(--color-ink);
    color: var(--color-white);
}

.mua-menu-icon {
    width: var(--menu-icon);
    height: var(--menu-icon);
}

/* #################################### 05.Quick #################################### */
/* 모바일 하단 고정 바 — 전화 · 카톡 · 상담 · TOP */
.mua-quick {
    bottom: 0;
    height: var(--quick-height);
    background: var(--color-bg);
}

/* 목록이 바 폭을 통째로 받아야 네 칸이 화면을 고르게 나눈다.
   채우지 않으면 글자 폭만큼만 차지해 네 칸이 왼쪽으로 몰려 붙는다 */
.mua-quick-list {
    /* basis 0 + overflow - basis 만으로는 안 줄어든다. 나란히 선 칸은 제 내용만큼을
       최소 폭으로 잡아 버리는데, overflow 를 두면 그 최소가 0 으로 계산된다
       (글꼴 2배 320 에서 목록이 330 으로 부풀어 마지막 칸이 화면 밖으로 나갔다) */
    flex: 1 1 0;
    overflow: hidden;
}

/* overflow 를 두면 칸이 글자 길이에 붙들리지 않고 제 몫(1/4)까지 줄어든다 */
.mua-quick-list > li {
    flex: 1 1 0;
    overflow: hidden;
}

/* 네 칸을 고르게 나누되, 글꼴을 키운 좁은 화면에서 글자가 칸을 밀어내지 않게
   제 몫보다 커지려 할 때는 줄여 받는다(브라우저 글꼴 2배 320px 에서 22px 넘치던 자리) */
.mua-quick-list > li > a {
    overflow: hidden;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mua-quick-icon {
    width: var(--space-md);
    height: var(--space-md);
}

.mua-quick-icon[data-icon='phone'] {
    -webkit-mask: url('../asset/icon/phone.svg') center / contain no-repeat;
    mask: url('../asset/icon/phone.svg') center / contain no-repeat;
}

.mua-quick-icon[data-icon='kakao'] {
    -webkit-mask: url('../asset/icon/kakao.svg') center / contain no-repeat;
    mask: url('../asset/icon/kakao.svg') center / contain no-repeat;
}

.mua-quick-icon[data-icon='write'] {
    -webkit-mask: url('../asset/icon/write.svg') center / contain no-repeat;
    mask: url('../asset/icon/write.svg') center / contain no-repeat;
}

.mua-quick-icon[data-icon='top'] {
    -webkit-mask: url('../asset/icon/top.svg') center / contain no-repeat;
    mask: url('../asset/icon/top.svg') center / contain no-repeat;
}

/* #################################### 06.Footer #################################### */
.mua-footer {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--space-xl);
}

/* 바닥은 이름 하나로 마감한다 — 이름을 크게 세우고 그 아래로 슬로건·메뉴·연락을 흘린다 */

/* #################################### 07.Sub Content Wrap #################################### */
/* 전 서브페이지·게시판이 공유하는 단일 wrap. 여백은 여기 한 곳에서만 관리한다 */
/* 첫머리 제목과 본문 첫 줄 사이가 벌어져 보인다는 지적 — 위쪽만 줄인다.
   아래(푸터 앞)는 섹션 사이 간격과 같은 값을 그대로 쓴다 */
.mua-sub-content {
    padding-block: var(--sub-content-top) var(--section-padding-y);
    /* 본문 안 간격이 섹션 사이(132px)보다 넓어 계층이 뒤집혀 있었다(실측 154px) -
       서브 안에서만 큰 간격 값을 낮춰 잡는다. 메인은 원래 값을 그대로 쓴다 */
    --space-2xl: var(--sub-gap-lg);
    --space-xl: var(--sub-gap-md);
}

/* 섹션 자체 상하 패딩 strip — 간격은 margin 단일 노브로만 */
.mua-sub-content > section {
    padding-block: 0;
}

.mua-sub-content > section + section,
.mua-sub-content > nav + section {
    margin-top: var(--section-gap);
}

/* 전체폭 컬러 밴드만 내부 여백 복원 (margin 은 이음새가 생긴다) */
.mua-sub-content > .mua-band {
    padding-block: var(--section-padding-y);
    background: var(--color-surface);
}

/* 회색 면 위에서는 옅은 글자를 한 단계 진하게 — 흰 바탕 기준 색이면 면 위에서 대비가 모자란다.
   푸터도 같은 회색 면이라 .mua-ft-small 이 제 파일(main.css)에서 같은 색을 쓴다 */
.mua-band .mua-ink-45,
.mua-band .mua-caption,
.mua-ft .mua-ink-45,
.mua-ft .mua-caption {
    color: var(--color-ink-45-on-surface);
}

/* 서브 히어로 — 페이지 타이틀 + 설명.
   제목이 한 줄이든 두 줄이든, 설명이 있든 없든 본문은 늘 같은 자리에서 시작해야 한다.
   그래서 머리 부분을 한 틀로 고정하고 그 안에서 위부터 채운다 */
/* 머리 묶음(로고 · 채널 아이콘) 아래에서 시작한다 — 제목이 로고에 붙지 않게 한 칸 더 띄운다 */
.mua-sub-hero {
    position: relative;
    /* 높이는 내용이 정한다 — 최소 높이를 못 박으면 좁은 화면에서 제목 아래가 크게 빈다
       (768/1024 실측 잔여 57·72px). 라벨·제목·설명은 여백만으로도 제자리에 선다 */
    /* 제목을 머리 묶음 바로 아래로 올린다 — 제목과 본문 사이가 비어 보인다는 지적(2026-08-14) */
    padding-top: calc(var(--header-box-h) + var(--space-lg));
    padding-bottom: var(--space-sm);
}

/* 첫머리 안에서 오른쪽에 세우는 것(담아온 곳 수 등)의 기준 자리 */
.mua-sub-hero > .mua-wrap {
    position: relative;
}

/* 제목은 로고 왼쪽선에 그대로 맞춘다 — 어느 쪽으로 가도 첫 글자가 같은 자리에서 시작한다 */
.mua-sub-hero-title {
    width: 100%;
}


/* 첫머리 라벨(VOL. 01 · 여는 글 등)은 흐름에서 빼 제목 위 여백에 올린다 —
   제목이 시작하는 자리는 전 서브페이지가 같아야 한다(about 기준·지시 2026-08-14) */
.mua-sub-hero .mua-label {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(calc(-100% - var(--space-xs)));
}

/* 라벨이 빠진 만큼 제목이 위로 붙는다 — 제목 자체의 위 여백은 없앤다 */
.mua-sub-hero .mua-sub-hero-title {
    margin-top: 0;
}

/* 설명은 제목과 같은 선에서 시작한다 — 들여쓰면(실측 128px) 첫 글자가 어긋나 보인다(지시) */
.mua-sub-hero-lead {
    /* 첫머리 설명도 읽는 글이다 — 상한이 없으면 넓은 화면에서 한 줄이 길어진다
       (실측 2560 에서 2304px 한 줄 62자). 본문과 같은 읽기 폭에서 끊는다 */
    width: min(100%, var(--read-ko-cap));
    margin-top: var(--space-md);
}

.mua-sub-hero-media {
    height: var(--sub-hero-media-h);
    margin-top: var(--space-xl);
}

/* #################################### 07-1.다섯 걸음 상담 #################################### */
/* 걸음을 고르면 바로 아래 한 줄이 그 걸음의 질문으로 바뀐다.
   다섯 줄을 미리 깔아 두고 고른 하나만 보이므로, 오가며 적어도 값이 지워지지 않는다.
   메인 칸07 과 상담 페이지가 같은 마크업을 쓴다 */
/* 폼을 여는 제목 — 두 화면이 같은 크기로 선다 */
.mua-ct-title {
    font-size: var(--fs-display-2);
    font-weight: var(--fw-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--color-ink);
    overflow: hidden;
}

.mua-ct-step-row {
    gap: var(--gap-grid);
    margin-block: var(--seq-ct-gap);
    align-items: flex-start;
}

/* 걸음 이름은 옅게 두고(자식이 물려받는다), 지금 적는 걸음만 또렷해진다 */
.mua-ct-step-item {
    flex: 1;
    overflow-x: clip;
    padding: var(--space-md) 0 0;
    border: 0;
    border-top: var(--line-w) solid var(--color-line);
    background: transparent;
    color: var(--color-ink-45);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.mua-ct-step-item.is-on {
    border-top-color: var(--color-ink);
}

.mua-ct-step-no {
    font-size: var(--fs-caption);
}

.mua-ct-step-label {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--fs-title);
    font-weight: var(--fw-title);
    line-height: var(--lh-title);
    transition: color var(--transition-fast);
}

.mua-ct-step-item.is-on .mua-ct-step-label {
    color: var(--color-ink);
}

/* 걸음에 딸린 한 줄 안내 — 지금 적는 걸음에서만 드러난다 */
.mua-ct-step-hint {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--fs-caption);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.mua-ct-step-item.is-on .mua-ct-step-hint {
    opacity: 1;
}

@media (hover: hover) {
    .mua-ct-step-item:hover .mua-ct-step-label {
        color: var(--color-ink);
    }
}

/* 적는 자리 — 고른 걸음 바로 아래에 한 줄만 선다(지시).
   걸음 줄이 이미 아래 여백을 갖고 있어 여기서 또 띄우면 두 여백이 겹친다 */
.mua-ct-step-fields {
    margin-top: 0;
}

.mua-ct-step-field {
    display: none;
}

/* 한 걸음이 한 줄이다. 마지막 걸음처럼 칸이 둘이면 그 줄을 반씩 나눠 쓰고,
   좁은 폭에서는 아래로 접어 내린다 */
.mua-ct-step-field.is-on {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-grid);
}

.mua-ct-step-cell {
    flex: 1 1 var(--form-cell-w);
}

.mua-ct-step-input {
    width: 100%;
    padding-block: var(--form-pad-y);
    border-bottom: var(--form-line-w) solid var(--color-line-strong);
    font-size: var(--fs-lead);
    transition: border-color var(--transition-fast);
}

.mua-ct-step-input::placeholder {
    color: var(--color-ink-45);
    opacity: 1;
}

/* 적는 칸을 짚어도 네모 테두리를 그리지 않는다 — 지금 어디에 있는지는 밑선 색으로만 알린다 */
.mua-ct-step-input:focus,
.mua-ct-step-input:focus-visible {
    border-bottom-color: var(--color-point);
    outline: none;
}

/* 동의와 보내기가 한 줄에 선다 — 좁아지면 동의가 위, 단추가 아래로 접힌다 */
.mua-ct-step-send {
    flex-wrap: wrap;
    gap: var(--form-gap);
    margin-top: var(--seq-ct-gap);
}


/* #################################### 07-0.Popup #################################### */
/* 레이어 팝업 — 관리자에서 켜 둔 안내창. 뒤를 흰 막으로 가리고 그 위에 세운다.
   막을 누르거나 Esc 를 눌러도 닫힌다(js/common.js). 열려 있는 동안 뒤 화면은 굴러가지 않는다 */
.mua-pops {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    /* 가운데로 모으되, 창이 화면보다 길면 위가 잘려 굴려도 못 본다(844x390 실측 위 -152).
       세로 정렬은 풀고 무대 쪽에 남는 자리를 나눠 주어 짧을 때만 가운데로 온다 */
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-md);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mua-pops[hidden] {
    display: none;
}

/* 쿠키 띠가 떠 있으면 그 높이만큼 자리를 비운다 - 띠에 가리면 쪽 넘김 화살표를 누를 수 없다
   (실측: 띠가 화살표를 덮어 클릭이 통째로 막혔다). 띠 높이는 js/common.js 가 재서 넘긴다 */
.has-cookie .mua-pops {
    padding-bottom: calc(var(--space-md) + var(--cookie-h, 0px));
}

.mua-pops-veil {
    position: absolute;
    inset: 0;
    background: var(--pop-veil);
    backdrop-filter: blur(var(--pop-blur));
    opacity: 0;
    transition: opacity var(--dur-pop) var(--ease-out);
}

.mua-pops.is-on .mua-pops-veil {
    opacity: 1;
}

.mua-pops-stage {
    position: relative;
    width: 100%;
    margin-block: auto;
    gap: var(--pop-gap);
}

/* 창이 여러 장이면 하나씩 닫기 번거롭다 — 한 번에 접는 자리를 창 아래에 둔다.
   쪽 넘김 줄과 함께 창에서 한 칸 떨어뜨리고 가로 가운데에 세운다(지시) */
.mua-pops-nav,
.mua-pops-top {
    margin-top: var(--pop-foot-gap);
    justify-content: center;
    opacity: 0;
    transition: opacity var(--dur-pop) var(--ease-out);
}

/* 쪽이 하나뿐이면 넘김 줄을 접는다 — .mua-flex 의 display 가 hidden 을 덮어써서
   0 짜리 빈 줄이 남고, 그 줄에도 위 여백이 붙어 아래 줄이 두 배로 밀렸다(1440 실측 118) */
.mua-pops-nav[hidden] {
    display: none;
}

.mua-pops.is-on .mua-pops-nav,
.mua-pops.is-on .mua-pops-top {
    opacity: 1;
}

/* 위 묶음 단추 - 창을 보라고 있는 자리가 아니라 접는 자리다. 조용하게 둔다
   (판을 누르는 것이 먼저이고, 이 둘은 그 다음이다) */
.mua-pops-btn {
    /* 아래 여백을 둘 다 같은 값으로 둔다 — 한쪽만 밑줄을 띄우면 그만큼 글자가 위로 올라가 줄이 어긋난다 */
    padding: 0 var(--space-xs) var(--pop-line-gap);
    border: 0;
    background: transparent;
    color: var(--color-ink-45);
    transition: color var(--transition-fast);
}

/* 밑줄이 글에 붙으면 답답하다 — 아래 여백은 위에서 함께 두었다(지시).
   테두리로 그으면 그 두께만큼 이 단추만 높아져 옆 단추와 0.5px 어긋난다(실측) — 높이에 얹히지 않게 깐다 */
.mua-pops-btn-close {
    position: relative;
    color: var(--color-ink);
}

.mua-pops-btn-close::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: var(--line-w);
    background: var(--color-ink);
}

/* 쪽을 나눠 세우므로 줄바꿈은 필요 없다 - 넘기면 창이 아래로 흘러 화면을 벗어난다
   (1440 실측: 480px 짜리 셋이 1296 안에 못 들어가 셋째가 아래로 내려갔다).
   한 줄에 세우고 남는 만큼 창이 줄어들게 둔다 */
.mua-pops-list {
    width: 100%;
    flex-wrap: nowrap;
    /* 창마다 담긴 것이 달라 높이가 제각각이었다 — 그림 칸이 있고 없고로 갈렸다
       (1440 실측: 249 · 371 · 479 로 230 차이). 한 줄에 선 창은 같은 높이로 세운다.
       쪽을 넘겨도 판이 늘었다 줄었다 하지 않게 가장 큰 창의 높이를 JS 가 --pop-h 로 넘긴다 */
    align-items: stretch;
    min-height: var(--pop-h, auto);
}

/* 창 한 장 — 아래에서 살짝 올라오며 자리를 잡는다.
   같은 높이로 서므로 안쪽을 세로 흐름으로 두어 남는 자리를 나눠 갖게 한다 */
.mua-pop {
    display: flex;
    flex-direction: column;
    flex: 0 1 var(--pop-w);
    min-width: 0;
    background: var(--color-white);
    opacity: 0;
    transform: translateY(var(--pop-rise));
    transition: opacity var(--dur-pop) var(--ease-out), transform var(--dur-pop) var(--ease-out);
}

.mua-pop[hidden] {
    display: none;
}

/* 한 장씩 차례로 떠오른다 - 몇 번째인지는 JS 가 --pop-turn 으로 알려 준다(지시) */
.mua-pop.is-on {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--pop-step) * var(--pop-turn, 0));
}

/* 누를 자리는 판 전체다 — 따로 「자세히 보기」 단추를 두지 않는다.
   어느 방식이든 자리는 하나다 : 제목 · 볼 것 · 글 · 화살표 (지시).
   방식은 무엇을 채우느냐만 가르고 자리는 바꾸지 않는다 */
.mua-pop-b {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pop-gap-in);
    flex: 1 1 auto;
    padding: var(--pop-pad);
    color: var(--color-ink);
}

/* 제목과 글은 제 높이만 갖는다 — 자리를 지키되 남는 폭은 다 쓴다.
   낱말 가운데는 끊지 않는다 - 390 에서 「상담 신청해주세 / 요.」로 잘렸다(실측).
   바탕이 word-break: normal 이라 여기서 어절 단위로 돌려 놓는다.
   칸보다 긴 낱말은 overflow-wrap: anywhere 가 그대로 받아 준다(basic.css) */
.mua-pop-t,
.mua-pop-d {
    display: block;
    flex: none;
    width: 100%;
    word-break: keep-all;
}

/* 가운데는 볼 것이 서는 자리다 — 남는 자리를 이 칸이 다 먹는다.
   그림은 object-fit: cover 라 늘어나도 찌그러지지 않는다 */
.mua-pop-shot {
    display: block;
    position: relative;
    width: 100%;
    /* 화살표가 이 칸 안으로 들어가 흐름에서 빠졌다 — 그만큼 이 칸이 넓어진다(지시).
       남는 자리를 여기서 다 먹으므로 창 아래는 늘 아래줄이 바닥에 붙는다 */
    flex: 1 1 var(--pop-shot-h);
    overflow: hidden;
    background: var(--img-frame-bg);
}

/* 볼 것이 없어도 그 자리는 빈 칸으로 두지 않는다 — 사이트와 같은 결로 조용히 움직인다(지시).
   그림·영상이 있으면 그 뒤에 깔려 보이지 않는다. 어느 창이든 같은 것이 깔린다 */
.mua-pop-air {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* 위에서 빛이 내려앉는 결 — 사이트 사진이 벽을 스치는 그 결을 그대로 가져온다 */
    background: linear-gradient(180deg, var(--pop-air-fall) 0%, transparent 60%), var(--pop-air-bg);
}

/* 어두운 줄기 하나, 밝은 줄기 하나가 서로 다른 속도로 벽을 스친다 —
   사이트 사진에서 빛이 벽을 지나가는 그 결이다. 두 겹이라야 면이 살아 있다.
   겹을 통째로 옮기면(translateX) 줄기가 면 밖에 머무는 시간이 길어 한참 밋밋해진다
   (1440 실측: 7초 가운데 줄기가 보이는 때가 잠깐뿐이었다).
   겹은 제자리에 두고 무늬만 흘려 보낸다 — 줄기가 늘 면 안 어딘가를 지난다 */
/* 빈 칸 가운데에 서는 심볼 — 바탕에 잠기듯 옅게 둔다. 빛줄기가 그 위를 지난다 */
.mua-pop-air-mark {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--pop-air-mark);
    opacity: var(--pop-air-mark-fade);
    transform: translate(-50%, -50%);
}

.mua-pop-air-mark > img {
    display: block;
    width: 100%;
    height: auto;
}

/* 빛줄기 두 가닥 — 생김새는 같고 폭·속도·방향만 다르다.
   차이를 변수로 빼서 한 벌만 적어 둔다(기본값은 첫 가닥 몫) */
.mua-pop-air::after,
.mua-pop-air::before {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: var(--pop-air-run) 100%;
    background-image: linear-gradient(105deg,
        transparent var(--pop-air-edge, 40%),
        var(--pop-air-tint, var(--pop-air-beam)) 50%,
        transparent calc(100% - var(--pop-air-edge, 40%)));
    animation: mua-pop-air-run var(--pop-air-dur, var(--dur-pop-air)) linear infinite var(--pop-air-dir, normal);
}

/* 둘째 가닥 — 조금 좁게, 느리게, 거꾸로 흐른다 */
.mua-pop-air::after {
    --pop-air-edge: 44%;
    --pop-air-tint: var(--pop-air-beam-2);
    --pop-air-dur: var(--dur-pop-air-2);
    --pop-air-dir: reverse;
}

/* 무늬 폭이 면의 두 배라 위치 0%~100% 가 곧 「무늬가 면을 한 번 가로지르는」 거리다.
   범위를 이보다 넓히면 줄기가 면 밖에 머무는 시간이 생긴다(실측) */
@keyframes mua-pop-air-run {
    from { background-position: 0 0; }
    to   { background-position: 100% 0; }
}

.mua-pop-shot > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 영상 칸 - 틀이 크기를 잡고 영상이 그 안을 채운다 */
.mua-pop-shot.is-video > iframe,
.mua-pop-shot.is-video > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* 누르면 갈 곳이 있다는 표시 — 정원 하나에 화살표 하나뿐이다(지시).
   볼 것 위에 얹지 않는다. 가운데는 볼 것의 자리다 */
/* 볼 것 칸 오른쪽 아래에 앉는다 — 흐름에서 빠져 그 자리를 볼 것이 대신 쓴다(지시).
   원 안이 잘려야 화살표가 밖으로 빠져나가는 것처럼 보인다 */
.mua-pop-go {
    display: flex;
    position: absolute;
    right: var(--pop-go-inset);
    bottom: var(--pop-go-inset);
    align-items: center;
    justify-content: center;
    width: var(--pop-go);
    height: var(--pop-go);
    overflow: hidden;
    border-radius: 50%;
    background: var(--pop-veil);
    backdrop-filter: blur(var(--pop-blur));
    color: var(--color-ink);
    /* 넘김 단추와 같은 결로 뒤집힌다 */
    transition: background var(--transition-fast), color var(--transition-fast);
}

/* 화살표는 오른쪽으로 미끄러져 나가며 옅어지고, 왼쪽에서 다시 옅게 들어온다(지시) */
.mua-pop-go-i {
    width: var(--pop-go-ico);
    height: var(--pop-go-ico);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--line-w);
    stroke-linecap: butt;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
    animation: mua-pop-go-run var(--dur-pop-go) var(--ease-inout) infinite;
}

@keyframes mua-pop-go-run {
    0%   { transform: translateX(calc(var(--pop-go-run) * -1)); opacity: 0; }
    28%  { transform: translateX(0); opacity: 1; }
    62%  { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(var(--pop-go-run)); opacity: 0; }
}

/* 아래 단추 줄 — 「보지 않기」는 왼쪽, 닫기는 오른쪽. 늘 바닥에 붙는다 */
.mua-pop-f {
    flex: none;
    /* 위아래를 같은 값으로 둔다 — 아래만 크면 그 여백이 도드라진다(지시) */
    padding: var(--pop-f-pad) var(--pop-pad);
}

.mua-pop-btn {
    /* 좌우 여백을 두면 아래줄 여백에 겹쳐 글이 안쪽으로 밀린다 — 아래줄 여백만 쓴다 */
    padding: 0;
    color: var(--color-ink-45);
    transition: color var(--transition-fast);
}

/* 창 안의 「닫기」에는 밑줄을 두지 않는다(지시) */
.mua-pop-btn-close {
    color: var(--color-ink);
}

/* 쪽 넘김 - 창이 여러 장일 때만 JS 가 세운다.
   좌우 화살표가 점에 바짝 붙으면 누를 자리가 좁다 — 사이를 넓힌다(지시).
   뜨고 지는 것은 아래 묶음 단추와 똑같다 — 그 규칙에서 함께 잡는다 */
.mua-pops-nav {
    gap: var(--pop-nav-gap);
}

.mua-pops-arw {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pop-arw);
    height: var(--pop-arw);
    background: var(--color-white);
    color: var(--color-ink);
    /* 손을 올리면 테와 바탕과 그림이 함께 바뀐다 — 셋을 다 이어 두어야 뚝 끊기지 않는다(지시) */
    transition: background var(--transition-fast), color var(--transition-fast);
}

/* 화살표 그림 — 선 하나 굵기로 그린다(지시) */
.mua-pops-arw-i {
    width: var(--pop-arw-ico);
    height: var(--pop-arw-ico);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--line-w);
    stroke-linecap: butt;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
}

.mua-pops-arw[disabled] {
    color: var(--color-ink-45);
    cursor: default;
}

.mua-pops-dot {
    width: var(--pop-dot);
    height: var(--pop-dot);
    border: 0;
    background: var(--color-line-strong);
    transition: background var(--transition-fast);
}

.mua-pops-dot[aria-current='true'] {
    background: var(--color-ink);
}

@media (hover: hover) and (pointer: fine) {
    /* 손을 올리면 테는 사라지고 바탕이 검게, 화살표가 희게 뒤집힌다(지시).
       테 두께는 남기고 색만 감춘다 — 없애면 그만큼 크기가 줄어 자리가 흔들린다 */
    .mua-pops-arw:not([disabled]):hover {
        background: var(--color-ink);
        color: var(--color-white);
    }

    .mua-pops-dot:hover {
        background: var(--color-ink);
    }

    .mua-pops-btn:hover {
        color: var(--color-ink);
    }

    .mua-pop-btn:hover {
        color: var(--color-ink);
    }

    /* 판 어디에 손을 올려도 정원이 함께 뒤집힌다 — 눌러도 된다는 것을 그것으로 알린다 */
    .mua-pop-b:hover .mua-pop-go {
        background: var(--color-ink);
        backdrop-filter: none;
        color: var(--color-white);
    }
}

/* #################################### 07-1.Cookie #################################### */
/* 쿠키 수집 동의 띠 — 화면 아래에 눕고, 한 번 고르면 다시 뜨지 않는다.
   갈아 끼우는 자리 밖에 있어 쪽을 넘겨도 고른 것이 그대로 남는다.
   좁은 화면에는 아래 고정 바가 있으므로 그 위에 얹는다 */
.mua-cookie {
    bottom: var(--cookie-bottom, 0);
    z-index: var(--z-modal);
    padding-block: var(--cookie-bar-pad);
    background: var(--cookie-bar-bg);
    backdrop-filter: blur(var(--cookie-blur, 0));
    /* 아래에서 올라와 자리를 잡는다 */
    opacity: 0;
    transform: translateY(100%);
    transition: opacity var(--dur-cookie) var(--ease-out), transform var(--dur-cookie) var(--ease-out);
}

.mua-cookie.is-on {
    opacity: 1;
    transform: translateY(0);
}

/* 고르고 나면 그 자리에서 옅어지며 사라진다 */
.mua-cookie.is-off {
    opacity: 0;
    transform: translateY(0);
}

/* 서랍이 열린 동안에는 물러난다 — 이 띠가 위층(modal)이라 그대로 두면
   서랍 아래쪽 줄을 덮어 누를 수 없다(실측: 세 줄이 1px 로 잘림). 닫으면 다시 선다 */
.is-locked .mua-cookie {
    opacity: 0;
    visibility: hidden;
}

.mua-cookie[hidden] {
    display: none;
}

.mua-cookie-sub {
    display: block;
}

/* 글 앞의 쿠키 하나 — 두 줄(본문 + 보조) 높이에 맞춘다. 글자색을 따르고 줄어들지 않는다 */
.mua-cookie-ico {
    flex: none;
    width: var(--cookie-ico);
    height: var(--cookie-ico);
    color: var(--color-ink-45);
}

/* 글 묶음과 위쪽을 맞춘다 — 가운데로 두면 두 줄일 때 아이콘만 내려앉는다 */
.mua-cookie-text {
    align-items: flex-start;
}

.mua-cookie-btn {
    /* 눌리는 자리를 손 크기로 넓히는 .mua-hit-y 가 기댈 자리 */
    position: relative;
    padding: var(--cookie-btn-pad) var(--cookie-btn-padx);
    color: var(--color-ink);
    background: var(--color-bg);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.mua-cookie-btn-main {
    color: var(--color-white);
    background: var(--color-ink);
}

@media (prefers-reduced-motion: reduce) {
    .mua-cookie {
        transition-duration: var(--dur-none);
    }
}

@media (hover: hover) {
    .mua-cookie-btn:hover {
        color: var(--color-white);
        background: var(--color-ink);
    }
}

/* #################################### 08.Form #################################### */
/* checkbox — 정사각형 · border 없음 · 활성 시 내부 70% 포인트 박스 (input 은 .mua-abs 병기) */
/* 네모와 글씨는 그대로 두고, 누를 자리만 위아래 여백으로 넓힌다.
   네모와 글씨가 맞붙으면 무엇을 눌러야 할지 흐려진다 — 사이를 벌려 둔다 */
.mua-form-check {
    gap: var(--space-sm);
    padding-block: var(--form-check-tap-pad);
}

/* 진짜 입력칸은 눈에서만 뺀다 — 자리까지 차지하면 네모가 문장 왼쪽선에서 밀린다 */
.mua-form-check > input {
    position: absolute;
    opacity: 0;
}

.mua-form-check-box {
    position: relative;
    flex: none;
    width: var(--form-check-size);
    height: var(--form-check-size);
    background: var(--color-surface);
}

/* 눌렸다는 표시는 이 네모 하나뿐이다 — 따로 요소를 두지 않고 여기서 그린다 */
.mua-form-check-box::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--form-check-mark);
    height: var(--form-check-mark);
    margin: auto;
    background: var(--color-point);
    transform: scale(0);
    transition: transform var(--transition-fast);
}

.mua-form-check > input:checked + .mua-form-check-box::after {
    transform: scale(1);
}

/* 진짜 네모는 화면에서 지워 두었다(0x0) — 자판으로 짚으면 테두리가 그 자리에 그려져 보이지 않는다.
   대신 보이는 네모에 같은 테두리를 그려, 지금 어디에 있는지 알 수 있게 한다 */
.mua-form-check > input:focus-visible + .mua-form-check-box {
    outline: var(--focus-ring-w) solid var(--color-point);
    outline-offset: var(--focus-ring-offset);
}

/* #################################### 09.Button / Link #################################### */
/* 채워지는 면은 단추 안에서만 자란다 —
   기준 자리를 잡아 두지 않으면 조상 칸을 기준으로 삼아 화면 위쪽까지 검게 덮는다(실측 74px 단추에 1249px 면) */
.mua-btn {
    --fill-inset: 0;
    --fill-h: auto;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    font-size: var(--btn-fs);
    font-weight: var(--fw-label);
    text-align: center;
    border: var(--line-w) solid var(--color-ink);
    transition: color var(--transition-base);
}

.mua-btn > * {
    position: relative;
    z-index: var(--z-sticky);
}

/* 밑줄 링크 — 홀로 선 링크는 위아래 여백으로 누를 자리를 손 크기까지 채운다.
   아래쪽은 밑줄이 앉을 자리(--space-xs)를 더해 준다.
   밑줄은 요소 맨 아래가 아니라 글자 바로 밑에 긋는다 —
   누를 자리를 넓히려고 둔 여백까지 내려가면 선이 글자에서 떨어져 보인다(실측 30px) */
.mua-link {
    --fill-inset: auto 0 calc(var(--tab-tap-pad) + var(--space-xs) - var(--link-line-gap)) 0;

    display: inline-block;
    padding-top: var(--tab-tap-pad);
    padding-bottom: calc(var(--tab-tap-pad) + var(--space-xs));
}

/* 글줄 한가운데 낀 링크만 줄 높이를 따른다 — 억지로 키우면 문장이 벌어진다.
   링크만 홀로 담은 줄(.mua-mag-act 처럼 손으로 누르는 자리)은 위 규칙대로 손 크기를 지킨다 */
.mua-art-para > .mua-link,
.mua-bd-para > .mua-link,
.mua-about-para > .mua-link {
    display: inline;
    padding-block: 0 var(--space-xs);
}

@media (hover: hover) {
    .mua-btn:hover {
        color: var(--color-white);
    }

    .mua-btn:hover::before,
    .mua-link:hover::after,
    .mua-topnav-menu > li > a:hover::after {
        transform: scaleX(1);
        transform-origin: left center;
    }

    /* 전체메뉴 주 메뉴 — 짚으면 한 칸 안으로 들어온다.
       자간을 건드리면 글자 폭이 매 프레임 바뀌어 줄이 떨린다 — 자리만 옮긴다 */
    .mua-menu-lead:hover {
        transform: translateX(var(--menu-lead-shift));
    }

    .mua-menu-sub-link:hover {
        color: var(--color-ink);
    }

    .mua-menu-cta:hover {
        opacity: var(--eq-play);
    }
}

/* #################################### 10.Responsive #################################### */
/* 노출 분기 — .mua-only-pc / .mua-only-mo 두 클래스로만 제어한다 */
.mua-only-mo {
    display: none;
}

@media (max-width: 1024px) {
    /* 좁은 화면에서는 글이 한 줄을 다 써 단추가 아랫줄로 내려간다 —
       그때 왼쪽에 붙지 않고 오른쪽 끝에 서게 한다(지시) */
    .mua-cookie-act {
        margin-left: auto;
    }

    /* 좁은 화면에서는 메뉴 판을 화면 한가운데에 세운다(지시) */
    .mua-menu {
        justify-content: center;
        padding-bottom: 0;
    }

    /* 다섯 걸음을 한 줄에 세우면 좁은 폭에서 넘친다 — 접어 내리고 안내를 늘 보여 준다 */
    .mua-ct-step-row {
        flex-wrap: wrap;
    }

    /* 걸음은 하나씩 가로로 눕혀 한 줄에 하나만 세운다(지시) */
    .mua-ct-step-item {
        flex: 0 0 100%;
    }

    .mua-ct-step-hint {
        opacity: 1;
    }

    .mua-only-pc {
        display: none;
    }

    .mua-only-mo {
        display: flex;
    }

    .mua-footer {
        padding-bottom: var(--space-xl);
    }
}

/* #################################### 12.낮은 화면(눕힌 기기) #################################### */
/* 세로가 짧은 화면은 폭만 보고 잡은 여백이 그대로 남아 첫 화면의 절반 가까이를 먹는다
   (실측 844x390: 머리 자리가 화면의 40%, 글꼴 200% 에서는 66%).
   머리 묶음이 실제로 차지하는 높이는 그대로 두고, 그 아래 띄우던 틈만 좁힌다 */
@media (max-height: 500px) {
    .mua-sub-hero {
        padding-top: calc(var(--header-box-h) + var(--space-sm));
    }
}

/* #################################### 푸터 줄 세우기 ####################################
   푸터 차림은 main.css 가 들고 있었는데, 서브 화면은 그 파일을 부르지 않아
   좁은 화면에서 연락처와 저작권이 한 줄 양 끝에 서고 상호가 「무아인테리 / 어」 로 갈렸다.
   푸터는 모든 화면이 함께 쓰므로 이 자리에서 잡는다 */
@media (max-width: 1024px) {
    .mua-ft-big-row,
    .mua-ft-biz {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .mua-ft-big-row .mua-ft-small,
    .mua-ft-biz .mua-ft-small {
        width: 100%;
    }

    /* 상호처럼 한 낱말로 읽히는 것은 글자 사이에서 끊지 않는다 */
    .mua-ft-small {
        overflow-wrap: normal;
    }
}