@charset "utf-8";
/*------------------------------------------------------
· Project : MU:A INTERIOR (mua)
· File    : main.css — 메인 페이지 전용 (.mua-main-*)
· 구조    : 레퍼런스(molohouse) 실측 이식
           - 섹션 라벨은 좌측 3칸 고정, 18px
           - 본문·미디어는 24컬럼에서 매번 다른 span/start
           - 미디어 크기를 전부 다르게 (정사각 / 대형 가로 / 세로 / 가로 나열)
           - 섹션 경계를 드러내지 않고 이어지게
· SUMMARY:
  0) Main wrap   1) Hero        2) Works rail   3) Atmosphere
  4) Name        5) Style       6) Process      7) Magazine
  8) Contact     9) Responsive
---------------------------------------------------------*/

/* #################################### 00.Main wrap #################################### */
.mua-main {
    padding-top: var(--header-height);
}

/* 섹션 간 간격은 단일 노브. 경계선·배경 전환은 두지 않는다 */
.mua-main > section + section {
    margin-top: var(--section-gap);
}

/* 미디어 위에 얹히는 텍스트 (히어로·아트모스피어 공용) */
/* 밝은 장면(카펫·커튼) 위에서는 흰 글씨만으로 획이 묻힌다 — 옅은 그림자로 테두리를 만든다 */
.mua-on-media {
    color: var(--color-white);
    text-shadow: var(--on-media-shadow);
}

/* #################################### 01.Hero #################################### */
/* 영상이 헤더 뒤까지 올라와 첫 화면을 통째로 채우고, 타이포가 그 위에 얹힌다.
   등장할 때 영상을 살짝 키우므로 삐져나오는 부분은 잘라 낸다 (문서 가로 넘침 방지) */
.mua-main-hero {
    position: relative;
    height: var(--vh-full);
    margin-top: calc(var(--header-height) * -1);
    overflow: hidden;
}

/* 영상은 흐린 채로 시작해 천천히 초점이 잡히며 드러난다.
   인트로가 걷히는 동안에도 계속 풀리도록 넉넉한 시간을 준다. */
.is-ready .mua-main-hero-stage {
    position: absolute;
    inset: 0;
    opacity: 0;
    filter: var(--enter-blur);
    transform: scale(var(--enter-zoom));
    transition: opacity var(--dur-enter-media) var(--ease-out),
                filter var(--dur-enter-media) var(--ease-out),
                transform var(--dur-enter-media) var(--ease-out);
}

.is-revealed .mua-main-hero-stage {
    opacity: 1;
    filter: none;
    transform: scale(1);
}

/* ── 유튜브 자리 — 첫 두 칸이 함께 쓴다 ─────────────────────────────
   영상은 유튜브에 얹혀 있고 여기는 자리만 빌려 준다.
   깔아 둔 첫 그림(.mua-tube-poster)은 유튜브가 첫 프레임을 그릴 때까지 덮고 있다가 걷힌다 —
   유튜브는 처음 몇 프레임에서 시작 자리가 튀는데, 그것을 이 그림이 가린다. */
.mua-tube {
    overflow: hidden;
    /* 유튜브 화면은 눌러도 그쪽이 먹지 않는다 — 칸 넘김·스크롤은 우리 것이 받는다 */
    pointer-events: none;
}

/* 유튜브는 자리로 둔 `.mua-tube-hole` 을 **iframe 으로 갈아 끼운다** — 그 안에 넣는 것이 아니다.
   그래서 자손(.mua-tube-hole iframe)으로 잡으면 아무것도 안 걸리고 기본 640x360 이 그대로 남는다(실측).
   16:9 로 고정된 화면이라 그대로 두면 위아래(또는 좌우)에 검은 띠가 남는다.
   화면보다 큰 쪽을 골라 덮고 가운데를 잡아 잘라 낸다 — object-fit 은 iframe 에 듣지 않는다 */
.mua-tube iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100vw, calc(100vh * 16 / 9));
    height: max(100vh, calc(100vw * 9 / 16));
    border: 0;
    transform: translate(-50%, -50%);
}

.mua-tube-poster {
    z-index: var(--z-base);
    transition: opacity var(--dur-enter-media) var(--ease-out);
}

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

/* 넘어갈 때 — 앞 칸이 옅어지고 다음 칸이 드러난다.
   두 칸이 겹쳐 있으므로 밝기만 바꾸면 이음매에 단색 면이 생기지 않는다 */
.mua-main-hero-tube {
    transition: opacity var(--dur-tube-out) var(--ease-inout);
}

/* 다음 칸은 제 차례가 올 때까지 물러나 있다 */
.mua-main-space-tube {
    opacity: 0;
    transition: opacity var(--dur-tube-in) var(--ease-inout);
}

/* 물러나는 두 자리를 한자리에 모은다 — 깔아 둔 그림이 걷힐 때 · 앞 칸이 물러날 때 */
.mua-tube.is-tube-on .mua-tube-poster,
.mua-main-hero-tube.is-tube-out {
    opacity: 0;
}

.mua-main-space-tube.is-tube-in {
    opacity: 1;
}

/* 밝은 영상 위에서도 흰 글씨가 읽히도록 위아래를 눌러 준다 */
.mua-main-hero-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        var(--hero-scrim-top) 0%,
        var(--hero-scrim-mid) 38%,
        var(--hero-scrim-mid) 62%,
        var(--hero-scrim-bottom) 100%
    );
}

/* 타이포는 한 문장 묶음으로 화면 아래쪽에 놓인다 */
.mua-main-hero-inner {
    position: relative;
    z-index: var(--z-base);
    height: 100%;
    padding-block: var(--header-height) var(--space-xl);
    justify-content: flex-end;
}

/* 영상이 또렷해지고 메뉴가 다 오른 뒤, 마지막으로 문장이 올라온다.
   메뉴와 같은 BlurFade 결로 맞춰 한 흐름으로 읽히게 한다. */
.is-ready .mua-main-hero-title > [data-reveal] {
    --reveal-delay: calc(var(--enter-lead) + var(--enter-step) * 8);

    display: block;
    opacity: 0;
    transform: translateY(var(--enter-shift));
    filter: var(--enter-soft);
    transition: opacity var(--dur-enter) var(--ease-out) var(--reveal-delay),
                transform var(--dur-enter) var(--ease-out) var(--reveal-delay),
                filter var(--dur-enter) var(--ease-out) var(--reveal-delay);
}

.mua-main-hero-title > [data-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
    filter: none;
}

/* 줄 마스크는 쓰지 않으므로 안쪽 span 은 제자리에 둔다 */
.mua-main-hero-title > [data-reveal] > span {
    transform: none;
}

.mua-main-hero-title {
    font-size: var(--fs-hero);
    font-weight: var(--fw-hero);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-display);
}

/* #################################### 03.Space (잠금해제 → 영상 열림) #################################### */
.mua-main-space-stage {
    position: relative;
    height: var(--vh-full);
    overflow: hidden;
    background: var(--color-bg);
}

/* 잠금 화면 — 흰 배경 위 심볼 */
.mua-main-space-lock {
    z-index: var(--z-base);
}

.mua-symbol {
    width: var(--symbol-size);
    height: var(--symbol-size);
    color: var(--color-ink);
    overflow: visible;
}

/* 영상은 중앙 기준으로 높이가 0에서 100%로 열린다 */
.mua-main-space-media {
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    transform: translateY(-50%);
    z-index: var(--z-sticky);
}

/* 영상(z-sticky) 위에 올라와야 문장이 보인다.
   자리는 첫 화면 글줄과 똑같이 잡는다 — 같은 여백, 같은 아래 정렬이라 넘어가도 글줄이 제자리에 머문다 */
.mua-main-space-text {
    padding-block: var(--header-height) var(--space-xl);
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    z-index: var(--z-drawer);
    pointer-events: none;
}

/* 세 줄이 함께 뜬다. 줄마다 아주 짧은 시차만 둔다.
   글꼴·크기는 첫 화면 문장과 같은 값을 쓴다 */
.mua-main-space-line {
    font-size: var(--fs-hero);
    font-weight: var(--fw-hero);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-display);
    transition: opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0s), transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0s), filter var(--dur-slow) var(--ease-out) var(--reveal-delay, 0s);
}

/* 뜨기 전 모습은 준비가 끝났다는 표시 아래에만 둔다 —
   스크립트가 서지 못한 화면에서는 흐린 채로 굳어 읽히지 않는다 */
.is-ready .mua-main-space-line {
    transform: translateY(var(--space-md));
    filter: blur(0.375rem);
}

.mua-main-space-line.is-on {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* #################################### 06.Magazine — 표지 한 권 #################################### */
/* 왼쪽에 권 번호, 가운데에 표지 한 권, 오른쪽에 그 권의 이야기와 목차가 선다 */
.mua-main-magazine > .mua-wrap {
    gap: var(--space-2xl);
    align-items: stretch;
}

/* #################################### 08.Contact #################################### */
/* 걸음·입력 줄 자체는 상담 페이지와 함께 쓰므로 layout.css 가 들고 있다.
   여기서는 메인 칸에서만 필요한 세로 배치만 잡는다.
   줄바꿈을 켜 두면 기준 크기 100% 끼리 다음 열로 밀려 옆으로 빠진다 */
/* 제목 아래로 내용이 이어지는 칸들 — 줄바꿈을 켜 두면 기준 크기 100% 끼리 다음 열로 밀려 옆으로 빠진다 */
.mua-main-works > .mua-wrap,
.mua-main-name > .mua-wrap,
.mua-main-contact > .mua-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
}

/* 어두운 칸(영상) 위에서는 흰 글씨로 뒤집는다. 색만 바뀌므로 전환이 이어져 보인다.
   좁은 화면에도 어두운 첫 화면이 그대로 있으므로 폭을 가리지 않는다 */
.is-tone-dark {
    --header-ink: var(--color-white);
    --header-logo-filter: var(--filter-to-white);
}

/* #################################### 09.Flow (가로 스크롤) #################################### */
/* 화면은 한 장으로 고정되고, 한 번 넘길 때마다 칸이 옆으로 간다.
   문서를 세로로 늘리지 않으므로 아래쪽 스크롤바가 생기지 않는다. 이동량은 JS 소유.
   켜고 끄는 것은 .is-flow 한 장으로 한다 — 스크립트가 서지 못하면 붙지 않아 세로로 흐른다 */

/* 화면 한 장에 맞춰 세로로 흐를 것을 없앤다.
   문서 끝에서 손을 더 밀 때 화면이 통째로 늘어났다 되돌아오는 것(고무줄)도 함께 막는다.
   예전에 고무줄 막기를 걸었을 때 칸 안 굴림까지 죽었던 까닭은 굴림이 브라우저 몫이었기 때문이다.
   지금은 js/main.js 가 scrollTop 을 직접 옮기므로 굴림은 이 설정과 무관하다 */
.is-flow,
.is-flow body {
    overflow: hidden;
    overscroll-behavior: none;
}

.is-flow,
.is-flow body,
.is-flow .mua-main-flow-track,
.is-flow .mua-main-panel,
.is-flow .mua-main-panel > .mua-wrap,
.is-flow .mua-main-space-stage,
.is-flow .mua-main-hero-inner {
    height: 100%;
}

/* 칸 이동은 이 상자의 스크롤 위치로 한다 (막대는 감춘다).
   넘겨받지 않을 손짓(touch-action)도 여기에 함께 적는다 — 한 selector 한 자리 */
.is-flow .mua-main-flow {
    position: relative;
    height: var(--vh-full);
    overflow: hidden;
    touch-action: none;
    scrollbar-width: none;
}

.is-flow .mua-main-flow::-webkit-scrollbar {
    display: none;
}

/* 칸 안에서 쓰는 z-index 가 밖으로 새어 첫 화면 덮개를 뚫지 않도록 한 층으로 묶는다.
   손짓도 브라우저가 아니라 우리가 맡는다 — 칸이 overflow-y:auto 라 브라우저는
   손이 닿는 순간 세로 굴림을 제 일로 잡는다. 그러면 손짓 도중의 preventDefault 가
   무시되어(안드로이드 크롬) 화면이 한 번 튕긴 뒤 옆 칸이 반쯤 보인 채 선다.
   여기서 아예 넘겨받지 않게 못 박는다. 굴림·넘김은 js/main.js 가 전부 한다 */
.is-flow .mua-main-flow-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    isolation: isolate;
    touch-action: none;
}

/* main 은 칸을 담기만 한다. 껍데기를 지워 섹션이 곧바로 트랙의 칸이 되게 한다 */
.is-flow .mua-main {
    display: contents;
}

/* 한 칸 = 한 화면(부모 폭). 헤더가 덮는 만큼은 위에 비워 둔다.
   칸 안 굴림·손짓도 여기에서 함께 정한다 — 아래 「쓸 높이가 모자란 칸」 규칙과 한 자리로 모았다 */
.is-flow .mua-main-panel {
    flex: 0 0 100%;
    padding-top: var(--header-block);
    touch-action: none;
    /* 쓸 높이가 모자라 글 분량이 한 장에 담기지 않는 칸이 있다.
       좁은 화면만의 일이 아니다 — 세로가 짧은 데스크탑에서도 같다
       (1280x800 실측: 상담 칸 상자 800 에 담긴 것 896, 지도를 키운 뒤 96 이 잘려 나갔다).
       넘치는 칸만 안에서 위아래로 굴려 본다. 넘치지 않는 칸에는 굴림이 생기지 않는다.
       휠은 칸 안이 끝에 닿은 뒤에야 칸 넘김으로 넘어간다(js/main.js wheel) */
    overflow-y: auto;
    /* 굴림이 문서로 번져 화면 전체가 딸려 가는 것만 막는다.
       none 까지 걸면 실기기에서 칸 안 굴림이 함께 죽었다 —
       늘어남은 CSS 가 아니라 넘기는 시점으로 잡는다(js/main.js touchmove) */
    overscroll-behavior: contain;
    scrollbar-width: none;
}

/* 가로로 누우면 섹션 간 세로 간격은 의미가 없다 */
.is-flow .mua-main > section + section {
    margin-top: 0;
}

/* 칸 안에서는 내용이 세로 가운데에 선다.
   첫 칸만 예외 — 문장은 원래대로 화면 아래쪽에 붙어 있어야 한다 */
.is-flow .mua-main-panel:not(.mua-main-hero) > .mua-wrap {
    display: flex;
    flex-direction: column;
    /* 내용이 칸보다 크면 가운데 정렬이 위쪽을 칸 밖으로 밀어내 머리 띠에 가려지고
       굴려도 그 부분이 나오지 않는다(390 실측: 걸음 01 이 위 74, 머리는 0~159).
       safe 를 붙이면 넘칠 때만 위에서부터 세운다 */
    justify-content: safe center;
}

/* 칸 안 내용을 세로로 세우는 위 규칙에서 이 칸만 뺀다 — 권 번호·표지·이야기를 좌·중·우로 놓는다 */
.is-flow .mua-main-panel.mua-main-magazine > .mua-wrap {
    flex-direction: row;
    flex-wrap: nowrap;
}

/* 첫 칸과 Space 는 칸 전체를 무대로 쓴다 (영상이 화면을 채운다) */
.is-flow .mua-main-hero,
.is-flow .mua-main-space {
    padding-top: 0;
}

/* 첫 화면 문장 · 다음 칸 글줄 · 진행 표시는 모두 같은 아래 선에 선다 (지시 M1) */
.is-flow .mua-main-hero-inner,
.is-flow .mua-main-space-text {
    padding-bottom: var(--flow-nav-bottom);
}

/* 첫 화면은 옆으로 밀리지 않는다. 화면을 덮고 있다가 그 자리에서 투명해지며
   뒤에 대기하던 다음 칸으로 넘어간다 (크로스페이드). 덮개라 트랙의 칸 수에서도 빠진다. */
.is-flow .mua-main-hero {
    position: fixed;
    inset: 0;
    z-index: var(--z-cover);
    margin-top: 0;
    transition: opacity var(--dur-cover) var(--ease-inout);
}

/* is-flow 는 html 에, is-past-hero 는 body 에 붙는다 — 자손 차례로 적어야 맞물린다 */
.is-flow .is-past-hero .mua-main-hero {
    opacity: 0;
    pointer-events: none;
}

.is-flow .mua-main-works {
    justify-content: center;
}

/* 가로 흐름이 서지 못하면 칸이 높이를 내려주지 않는다 — 남는 높이를 나눠 받던 줄이
   0 으로 눌려 사진이 사라진다. 그 자리에서는 줄이 직접 높이를 잡는다 */
html:not(.is-flow) .mua-enter-e-row,
html:not(.is-flow) .mua-pf-fold-row {
    flex: none;
    height: var(--media-mid-h);
}

/* 쓸 높이가 모자라 글 분량이 한 장에 담기지 않는 칸이 있다.
   좁은 화면만의 일이 아니다 — 세로가 짧은 데스크탑에서도 같다.
   그 규칙은 위 「한 칸 = 한 화면」 자리로 옮겨 한 selector 를 한 자리에서만 정의한다 */

.is-flow .mua-main-panel::-webkit-scrollbar {
    display: none;
}

/* 굴리는 동안에는 글이 머리 아래를 지나며 로고·햄버거에 비친다 —
   그때만 머리에 칸과 같은 바탕을 깔아 준다(지시). 굴리지 않는 칸은 그대로 비쳐 보인다.
   칸 굴림이 좁은 화면만의 일이 아니게 되었으므로(세로가 짧은 데스크탑도 굴린다)
   이 바탕도 함께 넓힌다 — 넓은 화면에서 굴리면 글자끼리 겹쳐 읽히지 않았다 */
/* 제목은 글자가 아래에서 올라오도록 overflow:hidden 짜리 창이다.
   그런데 flex 자식이라 칸 높이가 모자라면 최소 높이가 0 으로 잡혀 눌린다 —
   상자만 16 으로 줄고 글자는 49 그대로라 위아래가 잘려 보였다(2560 실측 2304x16.1 / 담긴 것 49).
   줄어들지 않게 못 박고, 넘치는 만큼은 칸을 굴려 읽는다 */
.is-flow .mua-ct-title {
    flex: none;
}

/* 상담 칸 두 단 — 좁은 화면에서는 위아래로 쌓이고(기본), 넓은 화면에서만 좌우로 나뉜다.
   왼쪽에 다섯 걸음과 신청, 오른쪽에 찾아오는 길을 둔다(지시).
   앞서는 지도가 폼 아래에 붙어 칸 밑선에 닿았고, 폭을 잡으면 오른쪽이 크게 비었다 */
.mua-ct-body {
    flex-direction: column;
}

.mua-ct-form,
.mua-ct-aside {
    min-width: 0;
}

@media (min-width: 1025px) {
    .is-flow .mua-ct-body {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-xl);
    }

    /* 왼쪽은 남는 폭을 다 쓰고, 오른쪽은 제 몫만 갖는다 */
    .is-flow .mua-ct-form {
        flex: 1 1 0;
    }

    .is-flow .mua-ct-aside {
        flex: 0 0 var(--ct-aside-w);
    }

    /* 오른쪽 단 안에서는 지도가 위, 찾아오는 길이 아래다 */
    .is-flow .mua-ct-aside .mua-ct-place-mini {
        flex-direction: column;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
        gap: var(--space-md);
    }

    .is-flow .mua-ct-aside .mua-ct-map {
        flex: none;
        width: 100%;
        height: var(--ct-map-side-h);
    }

    .is-flow .mua-ct-aside .mua-ct-place-info {
        flex: none;
        justify-content: flex-start;
    }
}

/* 지도는 상담 칸의 마지막 줄이다 — 아래 여백이 없어 칸 밑선에 딱 붙었다
   (2560 실측 남은 자리 31 · 1440 실측 -96 으로 넘쳤다).
   앞의 상담 단추와 같은 몫을 아래에도 둔다 */
.is-flow .mua-ct-place-mini {
    margin-bottom: var(--space-lg);
}

body.is-panel-scrolled .mua-header {
    background: var(--color-bg);
}

body.is-panel-scrolled.is-tone-dark .mua-header {
    background: var(--color-ink);
}

@media (max-width: 1024px) {
    /* 좁은 화면에서는 여섯 칸이 두 줄로 접힌다. 그때 칸 사이가 12 라
       칸끼리 붙어 한 덩이처럼 보인다(390 실측 가로 12 · 세로 12)(지시).
       넓은 화면의 가로 띠는 한 줄로 흐르는 차림이라 그대로 둔다 */
    .mua-pf-fold-row {
        gap: var(--space-md);
    }



    /* 메인은 contents.css 를 부르지 않는다 — 지도 차림을 여기서 스스로 갖춘다
       (부르지 않는 줄 모르고 두었더니 iframe 기본 크기 300x150 으로 앉았다) */
    /* 위아래로 놓을 때는 늘리지 않는다 — flex:1 을 그대로 두면 세로로 눌려 높이가 0 이 된다 */
    .mua-ct-place-mini .mua-ct-map {
        position: relative;
        flex: none;
        height: var(--ct-map-mini-h);
        overflow: hidden;
        background: var(--color-surface);
    }

    .mua-ct-place-mini .mua-ct-map-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* 메인 상담 칸의 찾아오는 길 — 칸 하나에 담기도록 지도를 낮춘다.
       좁은 화면에서 옆에 붙이면 글 칸이 13px 까지 눌려 글자가 세로로 쌓였다(390 실측).
       위아래로 놓고, 자리가 넉넉해지면 그때 옆으로 세운다 */
    .mua-ct-place-mini {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .mua-ct-place-mini .mua-ct-map {
        height: var(--ct-map-mini-h);
    }

    .mua-ct-place-mini .mua-ct-place-info {
        flex: none;
        min-width: 0;
    }

    @media (min-width: 601px) {
        .mua-ct-place-mini {
            flex-direction: row;
            gap: var(--space-md);
        }

        .mua-ct-place-mini .mua-ct-map {
            flex: 1;
        }

        .mua-ct-place-mini .mua-ct-place-info {
            flex: 0 1 var(--ct-info-mini-w);
            justify-content: center;
        }
    }

    /* 끝까지 굴리면 상담 단추가 화면 밑선에 딱 붙었다(390 실측 틈 0) —
       상자가 칸 높이에 맞춰 눌리면서 아래 안쪽 여백이 잘려 나간 것이다.
       상자를 줄이지 않고 넘치는 만큼 칸을 굴리게 두면 여백까지 굴려 읽는다 */
    .is-flow .mua-main-contact {
        justify-content: safe center;
    }

    .is-flow .mua-main-contact > .mua-ct {
        height: auto;
        flex: none;
    }


    .is-flow .mua-ct-step-send {
        margin-bottom: var(--space-lg);
    }
}

/* 쿠키 띠가 떠 있는 동안에는 첫 화면 문장이 그 뒤에 깔린다
   (390 실측: 문장 737~785, 띠 699~844). 띠 높이만큼 문장을 올려 둔다 */
/* 머리 자리는 큰 화면에서만 바뀐다 — 좁은 화면에는 상단 메뉴가 서지 않으므로
   여기서 햄버거까지 감추면 메뉴로 갈 길이 사라진다 */
@media (min-width: 1025px) {
    /* 넓은 화면에서는 묶음이 화면 폭을 다 써서 지도가 띠처럼 납작해진다
       (1990 실측 1512x299 · 2560 실측 1952x352 — 5:1 을 넘는다).
       높이는 그대로 두고 폭만 잡아 비율을 되돌린다. 자리는 가운데다 */
    /* 폭을 놓아 두면 2560 에서 1952x352(5.5:1) 짜리 띠가 된다 — 폭만 잡아 비율을 되돌린다.
       자리는 가운데로 두지 않는다 : 제목·걸음·단추가 모두 왼쪽 128 에 서는데
       지도만 576 에서 시작해 축이 어긋나 보였다(2560 실측) */
    .mua-ct-place-mini {
        width: min(100%, var(--ct-place-mini-w));
        /* 지도와 찾아오는 길 사이 틈 — 좁은 구간(601~1024)에만 있었다.
           넓은 화면에서는 둘이 맞붙어 지도 글자와 이메일이 겹쳐 읽혔다 */
        gap: var(--space-lg);
    }

    /* 메인은 칸 바탕이 그대로 비쳐야 한다 — 색을 깔지 않는다.
       (로고가 앉는 자리는 layout.css 가 메인·서브 공통으로 정한다) */
    .mua-header {
        background: transparent;
        /* 바탕이 없는 만큼 넓어진 헤더가 아래 메뉴의 마우스를 가로채면 안 된다 */
        pointer-events: none;
    }

    /* 첫 화면에는 메뉴가 통째로 서 있다 — 햄버거는 그 메뉴가 걷힌 다음 자리를 넘겨받는다 */
    .mua-header-menu {
        transition: opacity var(--transition-inout), visibility var(--transition-inout);
    }

    .is-top .mua-header-menu {
        visibility: hidden;
        opacity: 0;
    }

    .mua-header-brand,
    .mua-header-menu {
        pointer-events: auto;
    }
}

/* 메인 상담 칸의 찾아오는 길 — 넓은 화면 몫.
   메인은 contents.css 를 부르지 않으므로 이 파일이 스스로 갖춘다.
   폭을 가려 두지 않으면 이 규칙이 좁은 화면의 세로 배치까지 덮어 지도 높이가 0 이 된다 */
@media (min-width: 1025px) {
    .mua-ct-place-mini .mua-ct-map {
        position: relative;
        flex: 1;
        height: var(--ct-map-mini-h);
        overflow: hidden;
        background: var(--color-surface);
    }

    .mua-ct-place-mini .mua-ct-map-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .mua-ct-place-mini .mua-ct-place-info {
        flex: 0 1 var(--ct-info-mini-w);
        justify-content: center;
        min-width: 0;
    }
}

/* #################################### 09-1.Flow nav (진행 표시) #################################### */
/* 가로 스크롤형은 스크롤 막대가 없어 지금 어디쯤인지 알 길이 없다.
   배경음악 막대 옆에 숫자만 두고, 넘어갈 때 뒷자리가 굴러간다(지시 2026-08-14).
   첫 화면 세로 메뉴와 자리가 겹치지 않는 자리다 */
.mua-flow-nav {
    margin-left: var(--flow-nav-side-gap);
    align-items: center;
    gap: var(--flow-nav-gap);
    color: var(--header-ink);
    pointer-events: none;
    transition: color var(--transition-inout);
}

/* 칸 번호 — 막대 없이 숫자만 둔다 */
.mua-flow-nav-count {
    gap: var(--space-xs);
    font-size: var(--flow-nav-fs);
    font-weight: var(--fw-label);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-label);
}

/* 숫자 앞 게이지 — 인트로 로더의 가는 선과 같은 결. 지나온 칸만큼 왼쪽에서 차오른다 */
.mua-flow-nav-gauge {
    width: var(--flow-nav-gauge-w);
    height: var(--flow-nav-gauge-h);
    background: var(--flow-nav-gauge-track);
}

.mua-flow-nav-gauge-fill {
    inset: 0;
    background: var(--color-white);
    transform: scaleX(var(--flow-progress, 0));
    transform-origin: left center;
    transition: transform var(--transition-slow);
}

/* 지금 칸 — 넘어갈 때 숫자가 위로 넘어가듯 갈린다 */
.mua-flow-nav-now {
    justify-content: flex-end;
    white-space: nowrap;
}

/* 자리 하나가 곧 창이다 — 글자가 오르내리는 동안 넘치는 부분을 여기서 잘라 낸다.
   높이를 글자 한 줄로 묶어 두어야 위아래로 새지 않는다 */
.mua-flow-nav-slot {
    display: inline-block;
    height: calc(var(--flow-nav-fs) * var(--lh-title));
    overflow: hidden;
    line-height: var(--lh-title);
}

.mua-flow-nav-digit {
    display: block;
}

/* 바뀐 자리만 굴린다 — 옛 글자가 위로 빠지고 새 글자가 아래에서 올라온다 */
.mua-flow-nav-digit.is-flip {
    animation: mua-flow-flip var(--dur-base) var(--ease-out);
}

@keyframes mua-flow-flip {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.mua-flow-nav-total {
    opacity: var(--flow-nav-dim);
}

.mua-flow-nav-total::before {
    content: '/ ';
}

/* 문장까지 다 오른 뒤 마지막으로 진행 표시가 선다 — 로고·막대·메뉴·문장과 같은 결 */
.is-revealed[data-page="main"] .mua-flow-nav {
    animation: mua-enter-up var(--dur-enter) var(--ease-out) calc(var(--enter-lead) + var(--enter-step) * 9) backwards;
}

/* ==================================================================
   고른 시안(확인판) 원본 — 칸03 E · 칸04 E · 칸05 C · 칸06 B · 칸07 B · 칸08 A
   확인판에서 고른 화면을 그대로 옮긴 것이라 임의로 바꾸지 않는다.
   ================================================================== */
/* 칸03 삼분할이 함께 쓰는 공통 — 확인판 06.시안 A 섹션에서 가져왔다 */
.mua-enter {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 글줄은 첫 화면 문장과 같은 글꼴·급수·굵기를 쓴다 (지시 M1).
   폭·글자색·그림자는 이 칸의 .mua-enter-e-copy 가 정하므로 여기서 잡지 않는다 */
.mua-enter-copy {
    font-size: var(--fs-hero);
    font-weight: var(--fw-hero);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
}

/* 글은 줄 단위로 아래에서 올라온다 — 줄을 담은 칸이 넘치는 만큼을 가린다 */
.mua-enter-line {
    display: block;
    overflow: hidden;
}

/* 등장을 맡은 칸 안에서만 숨긴다 — 그 밖(서브 페이지 바닥)에서는 처음부터 보인다 */
.is-ready [data-seq] [data-seq-copy] {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
}

[data-seq].is-on [data-seq-copy] {
    animation: mua-seq-line var(--dur-slow) var(--ease-out) var(--seq-delay, var(--seq-lock-dur)) both;
}

@keyframes mua-seq-line {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.mua-enter-mark {
    font-style: normal;
    text-decoration: underline;
    text-underline-offset: var(--space-xs);
    text-decoration-thickness: var(--line-w);
}

/* #################################### 10.시안 E — 삼분할 시차 #################################### */
/* 같은 길의 다른 지점을 나란히 둔다. 가운데 칸이 가장 크다 */
/* 아래 선은 첫 화면 문장·진행 표시와 같은 값을 쓴다 — 칸이 바뀌어도 글줄이 같은 선에서 끝난다 (지시 M1) */
.mua-enter-e {
    padding: var(--space-xl) var(--wrap-side) var(--flow-nav-bottom);
    background: var(--color-bg);
}

.mua-enter-e-row {
    flex: 1;
    min-height: 0;
    gap: var(--gap-grid);
    align-items: stretch;
}

/* 프레임은 img 를 캔버스로 바꿔 덮어 그린다 — 부모를 그대로 채운다 */
[data-seq-img] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

@keyframes mua-seq-rise {
    from { opacity: 0; filter: var(--enter-blur); }
    to { opacity: 1; filter: none; }
}

.mua-enter-e-cell {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.mua-enter-e-cell-mid {
    flex: var(--seq-mid-grow);
}

/* 칸마다 한 박자씩 늦게 떠오른다 */
[data-seq].is-on .mua-enter-e-cell {
    animation: mua-seq-rise var(--dur-reveal) var(--ease-out) var(--seq-lock-dur) both;
}

[data-seq].is-on .mua-enter-e-cell-mid {
    animation-delay: calc(var(--seq-lock-dur) + var(--enter-step));
}

[data-seq].is-on .mua-enter-e-cell:last-child {
    animation-delay: calc(var(--seq-lock-dur) + var(--enter-step) * 2);
}

/* 움직이는 가운데 장면만 색을 지키고, 양옆에 멈춰 선 사진은 색을 살짝 뺀다(지시) —
   가운데로 눈이 먼저 가고 세 칸이 한 장면으로 묶여 보인다 */
.mua-enter-e-cell:not(.mua-enter-e-cell-mid) > img {
    filter: var(--filter-atmos-side);
}

/* 가운데 장면은 한 바퀴 다 돌면 부드럽게 사라졌다가 처음 장면으로 되돌아와 다시 나타난다 */
.mua-enter-e-cell-mid canvas {
    transition: opacity var(--transition-slow);
}

.mua-enter-e-cell-mid.is-dim canvas {
    opacity: 0;
}

.mua-enter-e-copy {
    width: 100%;
    margin-top: var(--space-lg);
    color: var(--color-ink);
    text-align: center;
    text-shadow: none;
}

/* #################################### 11.칸04 공통 #################################### */
.mua-pf {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
}

.mua-pf-copy {
    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;
}

/* 등장을 맡은 칸의 직계 자식은 처음에 숨었다가 차례로 나타난다 —
   숨김을 두지 않으면 옆 칸에 서 있는 동안 이미 다 보인 채로 기다린다(실측 opacity 1).
   칸마다 클래스를 따로 적지 않는다 — 칸이 늘어도 이 한 벌이 그대로 받는다 */
.is-ready [data-seq] > * {
    opacity: 0;
}

/* 안쪽 띠·걸음처럼 한 겹 더 들어간 것도 같은 계단을 탄다 */
.is-ready [data-seq] .mua-pf-fold-item,
.is-ready [data-seq] .mua-ct-step-item {
    opacity: 0;
}

[data-seq].is-on > *,
[data-seq].is-on .mua-pf-fold-item,
[data-seq].is-on .mua-ct-step-item {
    animation: mua-pf-in var(--dur-reveal) var(--ease-out) calc(var(--seq-lock-dur) + var(--stagger) * var(--seq-i)) both;
}

@keyframes mua-pf-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* #################################### 16.칸04 E — 가로 아코디언 #################################### */
/* 세로 띠가 나란히 서 있다가 고른 띠만 넓어진다 */
.mua-pf-fold {
    padding: var(--space-xl) var(--wrap-side) var(--space-2xl);
}

/* 제목과 더보기가 같은 줄에 서고, 더보기는 오른쪽 끝에 붙는다 */
.mua-pf-fold-head {
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.mua-pf-fold-copy {
    margin-bottom: 0;
}

.mua-pf-fold-row {
    flex: 1;
    min-height: 0;
    gap: var(--gap-grid);
}

.mua-pf-fold-item {
    position: relative;
    flex: 1;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: flex-grow var(--transition-inout);
}

/* 더보기 — 글자 옆에 가는 선으로 그린 + 하나를 두고 전체 목록으로 간다 */
.mua-pf-fold-more {
    position: relative;
    flex: none;
    gap: var(--space-xs);
    color: var(--color-ink-45);
    white-space: nowrap;
    transition: color var(--transition-fast);
}

/* 보이는 것은 + 하나뿐이라 눌리는 자리가 16px 다 - 손 크기까지 넓힌다(모양은 그대로) */
.mua-pf-fold-more::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--hit-min);
    height: var(--hit-min);
    transform: translate(-50%, -50%);
}

/* 1px 선 두 개를 엇갈려 + 를 그린다 */
.mua-pf-fold-plus {
    position: relative;
    display: block;
    width: var(--fold-plus-size);
    height: var(--fold-plus-size);
}

/* 가로 선 */
.mua-pf-fold-plus::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--line-w);
    margin: auto;
    background: currentColor;
}

/* 세로 선 */
.mua-pf-fold-plus::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--line-w);
    height: 100%;
    margin: auto;
    background: currentColor;
}

.mua-pf-fold-more-text {
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-label);
}

@media (hover: hover) {
    .mua-pf-fold-more:hover {
        color: var(--color-ink);
    }
}

.mua-pf-fold-item.is-on {
    flex-grow: var(--seq-fold-grow);
}

.mua-pf-fold-media {
    display: block;
    height: calc(100% - var(--space-2xl));
    background: var(--img-frame-bg);
}

/* 띠가 좁아지면 글자는 띠 안에서 잘린다 — 옆 띠를 침범하지 않는다 */
/* 이름과 한 줄 설명은 저마다 한 줄짜리다 — 본문용 줄 높이를 쓰면 글자 위아래
   빈 살이 쌓여 여백 8 이 눈에는 16.7 로 보인다(430 실측). 짧은 줄에 맞춰 낮춘다 */
.mua-pf-fold-name {
    display: block;
    width: 100%;
    margin-top: var(--space-sm);
    overflow: hidden;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-title);
    color: var(--color-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 넓어진 띠에서만 한 줄 설명이 드러난다 */
/* 이름과 그 아래 한 줄은 한 덩이로 읽혀야 한다 — 사이를 더 좁힌다(지시).
   390 실측 눈에 보이는 틈 16.7 → 10.6 → 6.6 */
.mua-pf-fold-quote {
    display: block;
    width: 100%;
    margin-top: var(--gap-hair);
    overflow: hidden;
    font-size: var(--fs-caption);
    line-height: var(--lh-title);
    color: var(--color-ink-45);
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.mua-pf-fold-item.is-on .mua-pf-fold-quote {
    opacity: 1;
}

/* #################################### 17.칸05 공통 #################################### */
.mua-ab {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--seq-ask-pad-y) var(--wrap-side);
    background: var(--color-bg);
}

/* 읽는 단 폭(--seq-read-max)은 24칸을 화면 기준으로 잡은 값이라, 두 단 안에서 다시 쓰면
   부모의 절반을 또 절반으로 나눈다(2560 에서 469px 단에 226px = 한 줄 12자).
   여기서는 단을 다 쓰되 한글 읽기 상한만 지킨다 */
.mua-ab-para {
    width: min(100%, var(--read-ko-cap));
    margin-top: var(--seq-ask-para-gap);
    font-size: var(--seq-ask-para-fs);
    line-height: var(--lh-body);
    color: var(--color-ink-70);
}

/* #################################### 20.칸05 C — 인용 상자 #################################### */
/* 아래 두 단이 길어져도 제목이 눌리지 않는다 — overflow 를 여민 flex 칸은 0 까지 줄어든다 */
.mua-ab-ask-head {
    flex: none;
    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-grow).
   여백은 이 칸 전용 값으로 — 공통 2xl 을 쓰면 2K 에서 제목 아래만 154px 을 먹어
   두 단이 설 자리가 남지 않는다 */
.mua-ab-ask-row {
    gap: var(--seq-ask-pad-y);
    margin-top: var(--seq-ask-pad-y);
}

.mua-ab-ask-col {
    display: flex;
    flex-direction: column;
    /* 가로만 여민다 — 위아래까지 여미면 아래쪽 줄이 잘려 사라진다 */
    overflow-x: clip;
}

/* 글 아래에 눕히는 장면 — 글이 쓰고 남은 높이를 그대로 받는다(왼쪽 인용 상자와 함께 끝난다) */
.mua-ab-ask-media {
    margin-top: var(--space-lg);
}

/* 가운데 끼우는 인용 — 바탕만 한 겹 깔고 따옴표는 두지 않는다 */
.mua-ab-quote {
    margin-top: var(--seq-ask-para-gap);
    padding: var(--seq-ask-quote-pad);
    background: var(--color-surface);
}

.mua-ab-quote-text {
    font-size: var(--fs-lead);
    font-weight: var(--fw-lead);
    line-height: var(--lh-lead);
    color: var(--color-ink);
}

/* #################################### 23.칸06 공통 #################################### */
/* 세로로 긴 표지가 주인공이라 위아래 여백을 공통값보다 얇게 잡는다 —
   2K 에서 xl(112) 을 위아래로 쓰면 표지가 설 자리가 100px 모자란다 */
.mua-mg {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--seq-mg-pad-y) var(--wrap-side);
    background: var(--color-bg);
}

.mua-mg-copy {
    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-mg-kind {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--ls-label);
    color: var(--color-ink-45);
}

.mua-mg-lead {
    margin-top: var(--space-sm);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    color: var(--color-ink-70);
}

/* #################################### 25.칸06 B — 표지 한 장 #################################### */
.mua-mg-one {
    gap: var(--space-xl);
}

/* 권 번호 줄 — 권이 늘어도 화면을 넘지 않게 그 자리에서 굴린다.
   위아래 끝은 서서히 지워, 잘려 나간 자리가 선처럼 보이지 않게 한다 */
.mua-mg-one-nav-wrap {
    flex: none;
    align-self: stretch;
}

.mua-mg-one-nav {
    height: 100%;
    gap: var(--space-sm);
    justify-content: flex-start;
    overflow-y: auto;
    scrollbar-width: none;
    padding-block: var(--rail-fade);
    cursor: grab;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-ink) var(--rail-fade), var(--color-ink) calc(100% - var(--rail-fade)), transparent);
    mask-image: linear-gradient(to bottom, transparent, var(--color-ink) var(--rail-fade), var(--color-ink) calc(100% - var(--rail-fade)), transparent);
}

.mua-mg-one-nav::-webkit-scrollbar {
    display: none;
}

.mua-mg-one-nav.is-grab {
    cursor: grabbing;
}

.mua-mg-one-no {
    width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--fs-body-sm);
    color: var(--color-ink-45);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.mua-mg-one-no.is-on {
    color: var(--color-ink);
}

/* 표지는 세로로 긴 판형이라 높이를 잡아 주지 않으면 위아래가 잘린다 */
.mua-mg-one-book {
    flex: 0 0 var(--seq-book-big-w);
    align-self: center;
    height: var(--seq-book-big-h);
}

.mua-mg-one-shot {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.mua-mg-one-shot.is-on {
    opacity: 1;
}

.mua-mg-one-text {
    flex: 1;
    overflow: hidden;
}

.mua-mg-one-text .mua-mg-copy {
    margin-top: var(--space-sm);
}

/* 그 권에 실린 글 — 표지 오른쪽 빈자리를 세 단으로 나란히 채운다 */
.mua-mg-one-index {
    display: flex;
    gap: var(--gap-grid);
    margin-top: var(--space-2xl);
}

.mua-mg-one-index-item {
    flex: 1;
    padding-top: var(--space-md);
    border-top: var(--line-w) solid var(--color-ink);
    color: var(--color-ink-70);
}

/* 읽으러 가는 자리 — 권 번호와 두 갈래 길을 한 줄에 둔다 */
.mua-mg-one-go {
    align-self: flex-start;
    gap: var(--space-lg);
    min-height: var(--tap-min);
    margin-top: var(--space-lg);
    font-size: var(--fs-body-sm);
    color: var(--color-ink-45);
}

.mua-mg-one-vol {
    color: var(--color-ink-45);
}

/* 두 길은 글자 바로 밑에 선을 깔아 눌러 갈 곳임을 보인다 */
.mua-mg-one-read-text,
.mua-mg-one-pdf {
    position: relative;
    padding-bottom: var(--space-xs);
    border-bottom: var(--line-w) solid var(--color-ink);
    color: var(--color-ink);
}

/* PDF 가 아직 없는 권에서는 그 자리를 비운다 */
.mua-mg-one-pdf.is-none {
    display: none;
}

/* #################################### 29.칸07 공통 #################################### */
/* 한 화면을 채우는 껍데기만 여기 둔다 — 제목 크기는 상담 페이지와 함께 쓰므로 layout.css 소유다 */
/* 위아래 여백은 이 칸 전용 값이다 — 공통 2xl 은 2K 에서 위아래로만 307px 을 먹어
   다섯 걸음과 입력 줄, 보내기가 한 화면에 서지 못한다 */
.mua-ct {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--seq-ct-pad-y) var(--wrap-side);
    background: var(--color-bg);
}

/* 작은 글씨는 같은 폭에 글자가 더 들어간다 — 한 단을 더 좁게 잡는다 */
/* 안내문 폭도 24칸 기준이라 칸 배치가 풀린 화면에서 여섯 줄로 쪼개졌다 — 읽기 상한으로 잡는다 */
.mua-ct-note {
    width: min(100%, var(--read-ko-cap));
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
    color: var(--color-ink-45);
}

/* #################################### 31.칸07 B — 다섯 걸음 #################################### */
/* 걸음의 생김새는 layout.css 소유다(상담 페이지와 같은 것을 쓴다).
   여기서는 한 화면을 채우는 세로 배분만 더한다 */
/* 걸음 줄의 여백은 layout.css 가 두 화면에 똑같이 준다.
   메인은 한 화면을 채우므로 남는 높이가 생기는데, 그것을 안내문 앞에서 몰아 받으면
   입력 줄과 안내문 사이만 400px 넘게 벌어진다 — 남는 높이를 위아래로 똑같이 나눈다 */
.mua-main-contact .mua-ct-step {
    /* 내용이 칸보다 크면 가운데 정렬이 위쪽을 칸 밖으로 밀어내 머리 띠에 가려지고
       굴려도 그 부분이 나오지 않는다(390 실측: 걸음 01 이 위 74, 머리는 0~159).
       safe 를 붙이면 넘칠 때만 위에서부터 세운다 */
    justify-content: safe center;
}

/* 적는 줄과 안내문이 맞닿지 않게 한 칸 띄운다.
   한 화면을 다 쓰는 칸이므로 읽기 폭 상한을 풀어 한 줄로 흐르게 둔다 */
.mua-main-contact .mua-ct-note {
    width: 100%;
    margin-top: var(--seq-ct-gap);
}

/* #################################### 35.칸08 공통 #################################### */
.mua-ft {
    position: relative;
    width: 100%;
    height: 100%;
    /* 안쪽 여백은 네 쪽이 같아야 한 상자로 읽힌다 — 좌우를 기준으로 맞춘다(지시).
       앞서는 위아래가 --space-2xl 이라 좌우보다 훨씬 넓었다(430 실측 61 대 38.9) */
    padding: var(--wrap-side);
    background: var(--color-surface);
}

/* 푸터는 늘 회색 면이다 — 흰 바탕 기준 옅은 색이면 여기서 대비가 모자란다(측정 4.13).
   상호는 낱말 단위로 끊는다 — 없으면 좁은 폭에서 「무아인테/리어」처럼 글자 사이가 갈린다 */
.mua-ft-small {
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
    color: var(--color-ink-45-on-surface);
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 메일 주소처럼 공백 없는 긴 값은 어디서든 끊는다 — break-word 는 칸 폭을 정할 때
   이 값을 통째로 넣을 자리부터 잡아, 글꼴을 키우면 칸이 화면 밖으로 밀려난다(320px·2배에서 65px) */
.mua-ft-small .mua-val {
    overflow-wrap: anywhere;
}

/* #################################### 36.칸08 A — 큰 로고 #################################### */
/* 칸 높이가 모자라도 이름 상자는 줄지 않는다 — 줄면 overflow 에 글자 윗부분이 잘린다.
   큰 글자는 왼쪽 사이드베어링만큼 안으로 들어가 보이므로 그만큼 당겨 아래 글줄과 왼쪽선을 맞춘다 */
.mua-ft-big-name {
    flex: none;
    margin-left: var(--ft-name-optic);
    font-size: var(--seq-huge-fs);
    font-weight: var(--fw-title);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--color-ink);
    overflow: hidden;
}

.mua-ft-big-slogan {
    margin-top: var(--space-xs);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--color-ink-70);
}

/* 연락처와 저작권을 양 끝에 두되, 글꼴을 키운 좁은 화면에서는 아래로 접어 내린다
   (브라우저 글꼴 2배 320px 에서 오른쪽 글이 16px 넘치던 자리) */
.mua-ft-big-row {
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-2xl);
    padding-top: var(--space-md);
    border-top: var(--line-w) solid var(--color-line-strong);
}

/* #################################### 34.차례 번호 #################################### */
/* 시차 등장에 쓰는 순번을 마크업이 아니라 자리 순서에서 뽑는다 (인라인 style 을 두지 않는다) */
[data-seq] :nth-child(1) { --seq-i: 0; }
[data-seq] :nth-child(2) { --seq-i: 1; }
[data-seq] :nth-child(3) { --seq-i: 2; }
[data-seq] :nth-child(4) { --seq-i: 3; }
[data-seq] :nth-child(5) { --seq-i: 4; }
[data-seq] :nth-child(6) { --seq-i: 5; }
[data-seq] :nth-child(n + 7) { --seq-i: 6; }

/* #################################### 10.Responsive #################################### */
@media (max-width: 1024px) {
    /* 상자 안쪽 좌우가 위아래에 견주어 눌린다 — 좁을수록 심하다
       (실측 좌우:위아래 = 320 에서 20:56, 430 에서 27:61. 데스크탑은 115:153 으로 넉넉하다).
       바깥 여백을 셈하는 --wrap-side 는 그리드 몫이라 상자 안쪽에는 맞지 않는다.
       위아래(--space-2xl)는 그대로 두고 좌우만 제 토큰으로 받는다 */
    .mua-ft {
        padding: var(--ft-card-pad-x);
    }

    /* 상자 높이를 칸에 못 박아 두면 담을 것이 더 많을 때 위아래가 잘려 나간다
       (320 실측: 상자 369 에 내용 568 — 위아래 99 씩 잘렸다. 세로가 짧은 기기에서도 같다).
       상자를 감싼 .mua-wrap 이 칸 높이를 물고 있으므로 그것부터 풀어야 한다.
       모자라면 늘어나게 두고, 넘치는 만큼은 칸을 굴려 본다 */
    .is-flow .mua-footer > .mua-wrap,
    .mua-ft {
        height: auto;
        min-height: 100%;
    }

    /* 좁은 화면에서는 24칸 배치를 풀고 흐름대로 쌓는다 */
    .mua-g > * {
        flex: 1 1 100%;
        margin-left: 0;
    }

    /* 글줄이 화면 바닥에 붙지 않게 아래를 비워 둔다 */
    .mua-main-space-text {
        padding-bottom: var(--space-xl);
    }

    /* 삼분할 — 데스크탑은 칸이 화면 한 장이라 남은 높이를 나눠 가지면 됐지만,
       세로로 흐르는 화면에서는 그 높이가 없어 세 장면이 모두 0 으로 접혔다. 높이를 직접 준다 */
    .mua-enter-e-row {
        flex: none;
        height: var(--media-mid-h);
    }

    /* 두 단으로 읽던 글 — 좁은 화면에서 그대로 두면 한 줄에 네 글자가 들어간다(실측 21줄).
       위아래로 쌓아 한 단으로 읽는다 */
    .mua-ab-ask-row {
        flex-direction: column;
    }

    /* 세로로 든 화면은 폭이 좁다 — 셋을 나란히 세우면 한 장이 66px 짜리 띠가 된다(320 실측).
       하나씩 위아래로 놓아 사진을 제 크기로 본다. 칸을 넘는 만큼은 그 안에서 굴려 본다 */
    @media (orientation: portrait) {
        /* 셋을 하나씩 위아래로 놓으면 묶음(.mua-enter)의 height:100% + overflow:hidden 에 걸려
           셋째 장이 잘리고 굴림에도 잡히지 않는다(390 실측: 줄 아래 898 인데 칸은 844).
           묶음이 제 높이를 쓰게 풀어 칸이 굴려지게 한다 */
        .is-flow .mua-enter {
            height: auto;
            overflow: visible;
        }

        /* 셋을 나란히 세우면 한 장이 66px 짜리 띠가 된다(320 실측) — 하나씩 위아래로 놓는다.
           사진은 제 높이를 그대로 쓰고, 칸을 넘는 만큼은 그 안에서 굴려 본다 */
        .is-flow .mua-enter-e-row {
            flex: none;
            flex-direction: column;
            height: auto;
        }

        .is-flow .mua-enter-e-row > * {
            flex: none;
            height: var(--media-mid-h);
        }
    }

    /* 눕힌 화면은 쓸 높이가 270~310 뿐이다(844x390 실측: 칸 390 에서 머리 118 을 뺀 자리).
       세로로 쌓아 둔 것이 그 높이를 넘어 아래가 잘린다 — 삼분할은 남은 높이를 나눠 갖고,
       두 단으로 읽던 글은 폭이 넉넉하므로 다시 옆으로 세운다 */
    @media (orientation: landscape) {
        .is-flow .mua-enter-e-row {
            flex: 1;
            height: auto;
            min-height: 0;
        }

        .is-flow .mua-ab-ask-row {
            flex-direction: row;
        }
    }

    .mua-ab-ask-col,
    .mua-ab-ask-media {
        flex: none;
        width: 100%;
    }

    .mua-ab-ask-media {
        height: var(--media-mid-h);
    }

    /* 인용 글도 같은 기준으로 — 좁은 화면에서 단 폭을 다 쓴다 */
    .mua-ab-quote-text {
        width: min(100%, var(--read-ko-cap));
    }

    /* 아코디언 — 여섯 띠를 옆으로 세우면 한 띠가 26px 까지 눌린다. 세로로 눕혀 위아래로 편다 */
    .mua-pf-fold-row {
        flex-direction: column;
    }

    .mua-pf-fold-item {
        flex: none;
    }

    /* 가로로 넘기는 칸은 화면 한 장이라 세로로 편 여섯이 아래로 흘러 잘린다
       (390 실측 내용 1354 / 칸 844). 칸이 주는 높이 안에서 나눠 갖도록 접어 세운다.
       묶음이 칸 높이를 받아야 그 아래 줄과 항목이 남은 높이를 나눌 수 있다 */
    .is-flow .mua-pf-fold {
        height: 100%;
    }

    /* 칸 사이 틈 — 폭 계산(50% 에서 빼는 값)과 높이 계산(줄 사이 두 몫)이
       모두 이 값을 쓴다. 한 자리에서 내려 주어야 셋이 어긋나지 않는다.
       12 로는 칸끼리 붙어 한 덩이로 보였다(390 실측 가로 12 · 세로 12)(지시) */
    .is-flow .mua-pf-fold-row {
        --fold-gap: var(--space-md);
        flex-direction: row;
        flex-wrap: wrap;
        align-content: stretch;
        gap: var(--fold-gap);
    }

    /* 접어 세운 줄은 스스로 낮아지지 않는다(늘리기만 하고 줄이지는 않는다) —
       줄 수로 나눈 높이를 직접 준다. 사진은 이 높이를 따라간다.
       다만 칸이 짧다고 사진을 뭉갤 수는 없다(360x640 에서 34px 까지 눌렸다) —
       아래 끝을 두어 그보다 짧아지지 않게 하고, 넘치는 만큼은 칸을 굴려 읽는다 */
    .is-flow .mua-pf-fold-item {
        display: flex;
        flex: 1 1 calc(50% - var(--fold-gap));
        flex-direction: column;
        height: clamp(13.5rem, calc((100% - var(--fold-gap) * 2) / 3), 20rem);
        min-height: 0;
    }

    /* 눕힌 화면은 세로가 짧다 — 접어 내리면 한 칸이 25px 까지 눌린다(844x390 실측).
       접지 않고 옆으로 세워 넓은 화면과 같은 결로 두고, 칸의 절반을 먹던 위아래 여백도 줄인다
       (같은 실측에서 여백 149 / 묶음 272) */
    @media (orientation: landscape) {
        .is-flow .mua-pf-fold {
            padding-block: var(--space-md);
        }

        .is-flow .mua-pf-fold-head {
            margin-bottom: var(--space-sm);
        }

        /* 옆으로 세운 줄은 넓은 화면의 가로 띠와 같은 결이다 —
           접힐 때만 벌린 틈을 여기서는 되돌린다(1024 24.9 / 1025 17.9 로 뒤집히던 것) */
        .is-flow .mua-pf-fold-row {
            --fold-gap: var(--gap-grid);
            flex-wrap: nowrap;
        }

        .is-flow .mua-pf-fold-item {
            flex: 1;
            height: 100%;
        }
    }

    .mua-pf-fold-media {
        height: var(--cursor-preview-h);
    }

    .mua-pf-fold-item.is-on .mua-pf-fold-media {
        height: var(--style-media-sm);
    }

    /* 한 줄 소개는 손을 얹은 칸에서만 드러난다 — 손이 없는 화면에서는 영영 안 보인다.
       좁은 화면에서는 모두 드러내고, 이름과 붙여 한 덩어리로 읽히게 한다 */
    .mua-pf-fold-quote {
        margin-top: var(--gap-hair);
        opacity: 1;
    }

    .mua-pf-fold-name {
        margin-top: var(--space-xs);
    }

    /* 가로로 넘기는 칸에서는 여섯 장이 모두 같은 크기여야 한다 —
       고른 한 장만 키우던 예외를 없애고, 이름·설명을 뺀 나머지를 그대로 채운다
       (390 실측 첫 장 192 · 나머지 96 이던 것을 하나로) */
    .is-flow .mua-pf-fold-media,
    .is-flow .mua-pf-fold-item.is-on .mua-pf-fold-media {
        flex: 1;
        height: auto;
        min-height: 0;
    }

    /* 표지 한 권 — 권 번호·표지·글을 옆으로 두면 글 단이 0 까지 눌린다. 위아래로 쌓는다 */
    .mua-mg-one {
        flex-direction: column;
        gap: var(--space-lg);
    }

    /* 권 번호는 세로줄 대신 가로로 늘어놓는다 */
    .mua-mg-one-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* 표지는 세로로 긴 판형(1100x1557)이다. 폭을 화면에 맞춰 늘이면 위아래가 잘려
       띠처럼 보인다(390 실측 335x107). 높이를 잡고 폭은 그 비율로 낸다 */
    .mua-mg-one-book {
        flex: none;
        width: var(--mag-cover-solo-w);
        max-width: 100%;
        height: var(--mag-cover-solo);
        margin-inline: auto;
    }

    /* 가로로 넘기는 칸은 화면 한 장이라 쌓아 올린 것이 아래로 흘러 잘린다
       (844x390 실측 내용 559 / 칸 390). 묶음이 칸 높이를 받고, 표지가 남은 높이를 쓴다 */
    .is-flow .mua-mg-one {
        /* 칸 높이에 못 박으면 담기지 않는 만큼이 밖으로 흘러 굴림에도 잡히지 않는다
           (320 실측: 묶음 720 인데 읽기 단추가 731~764). 모자라면 늘어나게 두어 칸이 굴려지게 한다 */
        height: auto;
        min-height: 100%;
    }

    /* 권 번호는 한 줄로 세우고 손으로 옆으로 끌어 본다(지시).
       세로줄일 때 쓰던 위아래 여백(--rail-fade)이 그대로 남아 아래 틈이 60px 까지 벌어진다(390 실측) */
    .is-flow .mua-mg-one-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-block: 0;
        scrollbar-width: none;
    }

    .is-flow .mua-mg-one-nav::-webkit-scrollbar {
        display: none;
    }

    /* 번호가 서로 밀려 44px 짜리 손 자리가 9px 까지 눌리지 않게 못 박는다(320 실측) */
    .is-flow .mua-mg-one-no {
        flex: none;
    }

    /* 묶음이 auto 높이라 flex:1 이 받을 남는 높이가 없다. 표지 몫을 그대로 쓴다 */
    .is-flow .mua-mg-one-book {
        flex: none;
        height: var(--mag-cover-solo);
    }

    /* 그 권에 실린 글 — 세 단을 한 줄에 두면 좁은 폭에서 넘친다. 접어 내린다 */
    .mua-mg-one-index {
        flex-wrap: wrap;
    }

    .mua-mg-one-index-item {
        flex: 1 1 var(--form-cell-w);
    }

    /* 첫 문장 끝줄이 화면 바닥에 붙지 않게 아래를 비워 둔다 */
    .mua-main-hero-inner {
        padding-bottom: var(--space-xl);
    }

    /* 시공사례 띠 — 좁은 화면에서 여섯을 옆으로 세우면 넘친다. 두 칸씩 접어 내린다 */
    /* 좁은 화면에서는 손이 닿는 개념이 없으므로 설명을 늘 보여 준다 */
    /* 매거진 — 권 번호·표지·이야기를 위아래로 쌓는다 */
    .mua-main-magazine > .mua-wrap {
        flex-direction: column;
    }

    /* 두 단 사이 영상은 단 아래로 내려 세운다 */
}