@charset "utf-8";
/*------------------------------------------------------
· Project : MU:A INTERIOR (mua)
· File    : contents.css — 서브 페이지 전용
· SUMMARY:
  0) Sub 공통 컬럼   1) About       2) Works list
  3) Works view      4) Cursor preview   5) Responsive
· NOTE : 공통 wrap(.mua-sub-content)·서브 히어로는 layout.css 가 소유한다.
         배치(flex·gap·여백)는 basic.css 유틸을 마크업에서 조합한다.
---------------------------------------------------------*/

/* #################################### 01.About #################################### */
/* 서브 본문 문단 — 읽는 호흡을 위해 본문보다 행간을 넉넉히 준다 */
/* 칸이 넓어져도 한 줄이 길어지면 눈이 되돌아올 자리를 잃는다 — 한글 45자에서 끊는다.
   좁은 화면에서는 칸 배치가 풀려 flex-basis 가 폭을 정하므로, width 가 아니라 그 기준을 바꾼다 */
.mua-about-para {
    flex: 0 1 var(--read-ko-cap);
    font-size: var(--fs-body);
    /* 본문 크기에는 본문 행간을 준다 - 리드 행간(1.55)은 이보다 좁아 긴 문단이 답답했다(2560 에서 44.6 → 49.7px) */
    line-height: var(--lh-body);
}

/* 사진과 글을 번갈아 놓는다 — 줄마다 좌우를 뒤집어 시선이 지그재그로 내려간다 */
.mua-about-alt-head {
    margin-bottom: var(--space-2xl);
}

.mua-about-alt-row {
    /* 글에 읽기 폭 상한이 걸려 남는 자리가 생긴다 — 사진과 글을 칸 좌우 끝에 붙인다 */
    justify-content: space-between;
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
    align-items: center;
}

.mua-about-alt-row-flip {
    flex-direction: row-reverse;
}

.mua-about-alt-media {
    flex: 0 0 var(--seq-alt-shot-w);
    height: var(--media-mid-h);
}

/* 글줄이 길어지면 눈이 다음 줄 첫머리를 놓친다 — 읽기 폭 상한(--seq-read-max)에서 멈춘다.
   폭은 flex 기준으로 적어야 한다. flex: 1 로 두면 기준이 0 이 되어 남는 자리를 다 먹고,
   나란히 적어 둔 width 상한이 통째로 무시된다(3840 실측 1754px, 한 줄 55자) */
.mua-about-alt-text {
    flex: 0 1 var(--seq-read-max);
    overflow: hidden;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--color-ink-70);
}

/* 지키는 것 넷 — 카드로 나란히 세운다. 좁아지면 두 장씩 접어 내린다 */
.mua-about-cards {
    gap: var(--gap-grid);
}

/* 연혁 — 자 눈금 위에 시간을 놓는다 */
.mua-about-time-ruler {
    display: block;
    height: var(--seq-ruler-h);
    margin-top: var(--space-2xl);
    background-image: repeating-linear-gradient(
        to right,
        var(--color-line-strong) 0,
        var(--color-line-strong) var(--line-w),
        transparent var(--line-w),
        transparent var(--seq-ruler-gap)
    );
}

.mua-about-time-row {
    gap: var(--space-lg);
    padding-block: var(--space-md);
    border-bottom: var(--line-w) solid var(--color-line);
}

.mua-about-time-year {
    flex: 0 0 var(--seq-vol-w);
    font-size: var(--fs-body-sm);
    color: var(--color-ink-45);
}

.mua-about-time-text {
    flex: 1;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-ink);
}

/* 연혁을 받기 전 자리 — 한 줄만 옅게 세워 둔다 */
.mua-about-time-empty .mua-about-time-text {
    color: var(--color-ink-45);
}

.mua-about-card {
    flex: 1 1 var(--about-card-basis);
}

/* 설명 문단은 칸이 넓어지는 만큼 한 줄이 길어진다 — 매거진에서 1296px 59자,
   지키는 것 카드에서 1131px 49자가 한 줄로 흘렀다(1440 / 3840 실측).
   칸은 그대로 두고 글줄만 읽기 폭에서 끊는다.
   붙임 셋을 모두 요구해 설명 문단만 고른다 — 로딩 문구와 쿠키 띠는 같은 mua-body-sm 이지만
   가운데로 세워 두는 자리라 위 여백(mua-mt-md)이 없어 여기에 들지 않는다 */
p.mua-body-sm.mua-ink-70.mua-mt-md {
    width: min(100%, var(--read-ko-cap));
}

/* 칸으로 폭을 받는 자리에서는 flex 기준이 width 를 덮는다(3840 실측 1141px, 49자 한 줄) —
   칸 폭과 읽기 폭 중 좁은 쪽을 기준으로 삼는다 */
.mua-g > p.mua-body-sm.mua-ink-70.mua-mt-md {
    flex-basis: min(var(--grid-span-w), var(--read-ko-cap));
}

/* 대표의 글 — 왼쪽에 장면, 오른쪽에 글. 글은 오른쪽 끝에 맞춰 흘린다 */
.mua-about-letter-row {
    gap: var(--space-2xl);
    align-items: center;
}

.mua-about-letter-media {
    flex: 0 0 var(--seq-alt-shot-w);
    height: var(--media-tall-h);
}

.mua-about-letter-text {
    flex: 1;
    align-items: flex-end;
    text-align: right;
}

/* 오른쪽 끝에 맞춰 흘리므로, 읽기 폭 상한은 그대로 두되 왼쪽으로만 줄어들게 한다 */
.mua-about-letter-text .mua-about-para {
    flex: none;
    width: min(100%, var(--read-ko-cap));
}

/* 마지막 물음 — 문장과 단추를 화면 가운데로 모은다 */
.mua-page-close {
    text-align: center;
}

/* 묻는 문장과 그 아래 한 줄 설명은 붙여 읽힌다 - 40px 이면 두 문장이 남남으로 보인다(지시) */
.mua-page-close > p + p {
    margin-top: var(--space-sm);
}

.mua-page-close-btn {
    justify-content: center;
    width: var(--btn-wide-w);
    /* 묻는 문장과 그 답인 단추는 한 덩어리다 - 큰 간격(92px)을 두면 서로 남남처럼 보인다 */
    margin-top: var(--sub-gap-md);
}

/* #################################### 02.Works list #################################### */
/* 분류가 왼쪽에 세로로 서고 목록이 그 오른쪽을 넓게 쓴다.
   둘 사이를 넉넉히 벌려, 붙어 있는 한 덩이가 아니라 서로 다른 갈래로 읽히게 한다 */
.mua-works-body {
    gap: var(--works-tab-gap);
    align-items: flex-start;
}

/* 분류는 목록을 따라 내려온다 — 아래쪽 묶음을 보다가도 갈래를 바꿀 수 있다 */
.mua-works-tab {
    position: sticky;
    top: calc(var(--header-box-h) + var(--space-lg));
    flex: 0 0 var(--works-tab-w);
}

.mua-works-tab-list {
    row-gap: var(--space-sm);
}

/* flex:1 은 줄어드는 것까지 허락한다. overflow:hidden 이면 최소 높이가 0 으로 잡혀
   담긴 것보다 짧아지고 마지막 줄 밑이 잘린다(2560 실측 상자 3751 / 담긴 것 3775).
   가로로 새는 것만 막고 높이는 담긴 만큼 지킨다 */
.mua-works-list {
    flex: 1 0 auto;
    overflow: hidden;
}

/* 분류 하나하나 — 글자는 그대로 두고 위아래 여백으로 누를 자리를 손 크기까지 채운다 */
.mua-works-tab-link {
    position: relative;
    display: inline-block;
    padding-block: var(--tab-tap-pad);
    padding-bottom: var(--space-xs);
    text-align: left;
    color: var(--color-ink-45);
    transition: color var(--transition-fast);
}

.mua-works-tab-link.is-on {
    color: var(--color-ink);
    border-bottom: var(--line-w) solid var(--color-ink);
}

/* 세 채가 한 묶음 — 큰 사진 하나와 작은 둘. 묶음마다 좌우가 뒤집힌다 */
.mua-works-row {
    gap: var(--gap-grid);
    align-items: flex-start;
}

.mua-works-row-flip {
    flex-direction: row-reverse;
}

.mua-works-cell {
    flex: 1;
}

.mua-works-cell-lead {
    flex: var(--works-lead-grow);
}

.mua-works-media {
    height: var(--style-media-sm);
}

.mua-works-cell-lead .mua-works-media {
    height: var(--style-media-lg);
}

.mua-works-shot {
    display: block;
}

/* 사진 아래 이름 — 이 줄만으로도 손이 닿게 위아래를 채운다 */
/* 제목은 그 자체가 링크다 — 위아래를 채워 손 크기(47)를 만든다.
   다만 그 채움이 글 사이 틈으로 보이면 안 된다(390 실측: 제목 아래 12 + 다음 글 위 8 = 20).
   채운 만큼 되돌려 보이는 틈은 8 로 두고, 누르는 자리는 그대로 47 을 지킨다 */
/* 카드 안 넉 줄(분류 · 이름 · 한 줄 · 자리)은 저마다 짧은 한 줄이다.
   본문용 줄 높이(1.7)를 그대로 쓰면 글자 위아래로 빈 살이 쌓여
   여백을 8 로 두어도 눈에는 14 로 보인다(430 실측 제목→한 줄 14.2).
   짧은 줄에 맞는 높이로 낮춰 보이는 틈을 줄인다 */
.mua-works-text .mua-label,
.mua-works-text .mua-body-sm,
.mua-works-text .mua-caption {
    line-height: var(--lh-title);
}

.mua-works-title {
    display: inline-block;
    padding-block: var(--tab-tap-pad);
    margin-block: calc(var(--tab-tap-pad) * -1);
    transition: opacity var(--transition-fast);
}

/* 담아온 곳의 수 — 첫머리 오른쪽에 정원 하나로 세운다.
   글자 크기 차이만으로 눈이 숫자에 먼저 닿게 한다 */
.mua-works-total {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--works-total-size);
    height: var(--works-total-size);
    border: var(--line-w) solid var(--color-ink);
    border-radius: 50%;
    color: var(--color-ink);
}

.mua-works-total-label {
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-label);
    color: var(--color-ink-45);
}

.mua-works-total-num {
    font-size: var(--fs-display-2);
    font-weight: var(--fw-hero);
    line-height: var(--lh-title);
}

.mua-works-row + .mua-works-row,
.mua-works-next {
    margin-top: var(--section-gap);
}

.mua-view-hero-media {
    height: var(--view-hero-media-h);
}

/* 보기 화면 조판 — 크게 세우는 문장은 첫머리 제목과 같은 왼쪽선에서 시작하고,
   읽는 글은 첫머리 설명과 같은 단차만큼 안으로 들어간다.
   칸 수를 화면마다 따로 적던 것을 이 두 규칙으로 대신한다 */
.mua-view-copy-lg {
    width: min(100%, var(--view-copy-lg-w));
}

/* 본문은 위 제목과 같은 선에서 시작한다 — 들여쓰면(실측 128px) 두 줄의 첫 글자가 어긋나 보인다(지시) */
.mua-view-copy {
    width: min(100%, var(--read-ko-cap));
}

/* 인용 한 줄과 그 아래 본문은 한 덩어리다 — 섹션 간격(132px)을 그대로 두면 남남처럼 떨어져 보인다(지시) */
.mua-sub-content > .mua-view-quote + .mua-view-story {
    margin-top: var(--sub-gap-md);
}

/* 글과 장면을 나란히 — 글은 제 읽기 폭을 지키고, 남은 자리를 장면이 갖는다 */
.mua-view-pair {
    gap: var(--gap-grid);
    align-items: flex-start;
}

.mua-view-pair-media {
    flex: 1 1 var(--view-pair-media-w);
    height: var(--view-pair-media-h);
}

/* 사진은 글 첫 줄과 같은 선에서 시작한다(지시) — 내려 걸치면 옆이 비어 보인다 */
.mua-view-pair-tall {
    height: var(--view-pair-tall-h);
}

/* 갤러리 띠 — 끌거나 굴려 넘긴다. 세 장마다 한 장이 넓게 선다 */
/* 손잡이는 띠 위에 얹힌다 — 제목까지 감싸는 섹션이 아니라 이 자리를 기준으로 잡아야
   사진 세로 한가운데에 앉는다. 기준 높이도 이 띠의 사진 높이로 넘긴다 */
.mua-view-rail-wrap {
    --rail-hint-anchor: var(--view-rail-item-h);
}

.mua-view-rail-item {
    flex: none;
    width: var(--view-rail-item-w);
    height: var(--view-rail-item-h);
}

.mua-view-rail-item-wide {
    width: var(--view-rail-item-wide-w);
}

.mua-view-keyword {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.mua-view-tag {
    padding-right: var(--space-md);
    border-right: var(--line-w) solid var(--color-line);
}

/* 제원 — 값을 크게 세우고 항목 이름은 그 아래 작게 붙인다 */
.mua-view-figures {
    gap: var(--gap-grid);
}

.mua-view-figure {
    flex: 1 1 var(--view-figure-basis);
}

.mua-view-figure-val {
    font-size: var(--fs-headline);
    font-weight: var(--fw-headline);
    line-height: var(--lh-title);
    color: var(--color-ink);
}

/* #################################### 04.가로로 끌어 넘기는 줄 #################################### */
/* 스타일 띠와 매거진 서가가 같은 몸을 쓴다. 끌거나 굴려서 넘기고,
   막대는 숨긴 채 아래 캡슐(.mua-rail-gauge)이 지나온 만큼을 알린다 */
/* 안내가 얹힐 기준 자리 */
.mua-style-rail-sec {
    position: relative;
}

.mua-rail {
    gap: var(--gap-grid);
    padding-inline: var(--wrap-side);
    overflow-x: auto;
    scrollbar-width: none;
    /* pan-x 로 두면 띠 위에서 손가락을 위아래로 끌 때 페이지가 굴러가지 않는다(실측) —
       띠는 overflow-x 로 브라우저가 옆으로 굴려 주므로 세로는 페이지에 넘긴다 */
    touch-action: auto;
    cursor: grab;
    scroll-snap-type: x proximity;
    /* 스냅 기준선을 여백 안쪽에 둔다 — 없으면 첫 칸이 왼쪽 여백을 밀어내고 화면 끝에 붙는다 */
    scroll-padding-inline: var(--wrap-side);
}

.mua-rail::-webkit-scrollbar {
    display: none;
}

/* 끄는 동안에는 스냅을 끈다 — 켜 두면 손을 떼기도 전에 가까운 칸으로 되돌아간다 */
.mua-rail.is-drag {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
}

.mua-style-rail-item {
    flex: none;
    width: var(--style-rail-w);
    scroll-snap-align: start;
}

.mua-style-rail-media {
    height: var(--style-media-md);
}

.mua-style-rail-name {
    font-size: var(--fs-title);
    font-weight: var(--fw-title);
    line-height: var(--lh-title);
}

/* 자재 이름 — 칸끼리 벌어지면 한 벌이 아니라 흩어진 낱개로 읽힌다. 붙여 세운다 */
.mua-style-mat > li {
    padding: var(--style-mat-pad) var(--space-sm);
    border: var(--line-w) solid var(--color-line);
}

/* 진행 캡슐 — 밝은 회색이 가운데로 갈수록 짙고 양 끝은 비친다 */
.mua-rail-gauge {
    width: min(100%, var(--rail-gauge-w));
    height: var(--rail-gauge-h);
    margin: var(--space-xl) auto 0;
    overflow: hidden;
    border-radius: var(--rail-gauge-h);
    background: var(--rail-gauge-bg);
}

/* 끌 수 있다는 안내 — 캡슐 아래 한 줄. 화살촉이 오른쪽으로 살짝 밀렸다 돌아온다.
   한 번 넘기면 할 일을 다 했으므로 조용히 사라진다(지시) */
/* 띠 아래에 두면 눈에 들지 않는다 — 목록 위에 얹어 뒤가 비치는 판으로 세운다(지시) */
.mua-rail-hint {
    position: absolute;
    left: 50%;
    /* 사진 칸 세로 한가운데에 앉힌다 - 아래에 두면 이름·자재 글자를 덮는다.
       가로는 띠가 아니라 화면 한가운데에 고정한다(지시) - 띠를 끌어도 자리가 흔들리지 않는다.
       자리를 정수 픽셀로 끊는다 - 소수 자리에 놓이면 안쪽 1px 선이 두 줄에 반씩 나뉘어 지저분해진다(실측) */
    top: round(calc(var(--rail-hint-anchor, var(--style-media-md)) / 2), 1px);
    z-index: var(--z-base);
    /* 보기만 하는 판이다 - 손길은 아래 띠가 받아야 한다(안 그러면 끌어도 안내가 안 꺼진다) */
    pointer-events: none;
    /* 위는 선이 좌우로 길게 뻗어 경계가 또렷하고 아래는 짧은 글자뿐이라,
       같은 값으로 두면 아래가 더 넓어 보인다 — 아래만 한 뼘 줄여 눈에 맞춘다(지시) */
    padding: var(--rail-hint-pad) var(--rail-hint-pad) var(--rail-hint-pad-b);
    /* 흰 반투명 한 겹 + 뒤 흐림. 양쪽 끝은 사진에 스며들게 비운다(지시) —
       배경만 비우면 흐림 경계가 네모로 남으므로 마스크도 같은 결로 건다 */
    background: var(--rail-hint-bg);
    mask-image: linear-gradient(
        to right,
        transparent 0,
        var(--color-ink) var(--rail-hint-fade),
        var(--color-ink) calc(100% - var(--rail-hint-fade)),
        transparent 100%
    );
    backdrop-filter: var(--rail-hint-blur);
    /* 세로 이동을 -50% 로 두면 판 높이의 절반(89 -> 44.5px)이 반 픽셀을 만들어
       안쪽 1px 선이 두 줄에 갈려 흐려진다 — JS 가 정수 px 로 계산해 넣는다 */
    transform: translate(-50%, var(--rail-hint-y, -50%));
    transition: opacity var(--transition-base);
}

.mua-rail-hint.is-off {
    opacity: 0;
}

/* 얇은 선 위를 손잡이가 오간다 — 좌우로 끌라는 뜻을 글자 없이 보여 준다(지시) */
/* 선 한 줄 — 높이 1px, 배경색. 그 위를 활성 막대가 왼쪽에서 오른쪽으로 지나간다(지시) */
.mua-rail-hint-track {
    width: var(--rail-hint-w);
    height: var(--line-w);
    background: var(--rail-hint-line);
}

/* 활성 막대 — 선 한가운데에 얹혀 left 값만 오간다 */
.mua-rail-hint-track::after {
    content: "";
    position: absolute;
    /* 선 높이가 1px 이라 50% 는 반 픽셀 자리를 만든다 —
       선 위아래로 같은 정수만큼 나오게 직접 셈한다((1 - 3) / 2 = -1px) */
    top: calc((var(--line-w) - var(--rail-hint-knob-h)) / 2);
    left: 0;
    width: var(--rail-hint-knob);
    height: var(--rail-hint-knob-h);
    background: var(--color-ink);
    animation: mua-rail-hint-run var(--dur-rail-hint) var(--ease-inout) infinite;
}

/* 안내 글자 — 라벨 결로 작게. 줄 높이가 아래에 빈 자리를 만들지 않게 글자 높이에 맞춘다 */
.mua-rail-hint-cap {
    font-size: var(--rail-hint-fs);
    /* 대문자만 쓰는 라벨 — 줄 상자를 글자 키에 붙인다.
       1 로 두면 글자 아래에 빈 자리가 남아 판 아래 여백이 더 넓어 보인다(실측) */
    line-height: var(--rail-hint-lh);
    letter-spacing: var(--rail-hint-ls);
    color: var(--color-ink-45);
}

@keyframes mua-rail-hint-run {
    0%,
    100% {
        left: 0;
    }

    50% {
        left: calc(var(--rail-hint-w) - var(--rail-hint-knob));
    }
}

/* 움직임을 줄여 달라고 한 사람에게는 손잡이를 왼쪽에 세워 둔다 */
@media (prefers-reduced-motion: reduce) {
    .mua-rail-hint-knob {
        animation: none;
    }
}

.mua-rail-gauge-fill {
    inset: 0;
    border-radius: var(--rail-gauge-h);
    background: var(--color-ink-45);
    transform: scaleX(var(--rail-progress, 0));
    transform-origin: left center;
    transition: transform var(--transition-base);
}

.mua-style-next,
.mua-mag-next {
    margin-top: var(--section-gap);
}

/* #################################### 06.Magazine — 서가 #################################### */
/* 여섯 권이 서가에 꽂혀 있다. 옆으로 끌어 훑고, 아래 캡슐이 어디쯤인지 알려 준다 */
/* 서가는 한 줄에 세 권 — 화면이 넓어지면 책이 커지고, 줄바꿈은 좁은 화면에서만 일어난다 */
/* 지난 합본이 오른쪽 한 칸을 쓰는 동안 낱권은 두 칸으로 줄어든다 —
   칸 수는 마크업이 아니라 이 한 곳에서 정한다 */
.mua-mag-book {
    flex: 0 0 calc((100% - var(--space-xl) * 2) / 3);
    scroll-snap-align: start;
    /* 표지 높이를 제 칸 폭에서 뽑아 쓰기 위한 기준 — 몇 칸으로 서든 판형이 지켜진다 */
    container-type: inline-size;
}

.mua-mag-issues.is-narrow .mua-mag-book {
    flex: 0 0 calc((100% - var(--space-xl)) / 2);
}

/* 권마다 분류 줄이 한 줄이기도 두 줄이기도 해서 그냥 두면 단추 줄이 제각각 높이에 선다 —
   단추는 카드 바닥에 붙여 한 줄로 맞춘다 */
.mua-mag-book .mua-mag-act {
    margin-top: auto;
    padding-top: var(--space-lg);
}

/* 표지는 세로로 긴 판형이라 높이를 잡아 주지 않으면 위아래가 잘린다 */
.mua-mag-cover {
    height: var(--mag-cover-h);
}

/* 서가에 꽂힌 표지만은 제 칸 폭에서 높이를 뽑는다 — 화면 폭으로 잡으면
   두 칸으로 줄었을 때(칸 440px) 높이가 724px 로 남아 좌우가 잘리고 답답해 보인다.
   판형 1100x1557 을 그대로 지킨다 */
.mua-mag-book .mua-mag-cover {
    height: calc(var(--mag-cover-ratio) * 1cqw);
}

.mua-mag-item + .mua-mag-item {
    margin-top: var(--mag-item-gap);
}

.mua-mag-list {
    margin-top: var(--section-gap);
}

/* 글 속의 소제목 — 문단보다 한 단 크게, 앞 문단과 넉넉히 떨어뜨린다 */
.mua-art-head {
    width: min(100%, var(--art-body-w));
    margin-block: var(--space-2xl) var(--space-md);
}

/* 글 속의 표 — 선 하나로만 나누고 색을 쓰지 않는다(사이트 결).
   좁은 화면에서는 표만 옆으로 밀어 본다. 글자를 줄이면 숫자가 읽히지 않기 때문 */
.mua-art-table {
    overflow-x: auto;
    margin-block: var(--space-2xl);
}

/* 좁은 화면에서 폭을 100% 로 묶으면 칸 안 글이 잘게 접혀 표가 읽히지 않는다
   (390 실측 「24평(전용 59m²)」이 네 줄, 금액이 「5,500만~7 / ,800만원」으로 갈렸다).
   접지 않고 제 폭을 지키게 두고, 넘치는 만큼 옆으로 굴려 본다(지시).
   틀(.mua-art-table)에는 이미 overflow-x: auto 가 걸려 있다 */
.mua-tbl {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.mua-tbl-th {
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink-45);
    white-space: nowrap;
}

.mua-tbl-td {
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink-70);
    vertical-align: top;
    white-space: nowrap;
}

/* 왼쪽 묶음과 오른쪽 낱권 — 성격이 다른 두 갈래를 좌우로 나눠 세운다 */
.mua-mag-body {
    gap: var(--works-tab-gap);
    align-items: flex-start;
}

/* 묶음은 왼쪽에서 위아래로 넘겨 본다 — 한 번에 한 권씩 자리를 차지한다 */
/* 붙어 서 있는 동안에도 앞뒤 단추와 점이 늘 화면 안에 있어야 한다 —
   붙는 자리와 아래 여백을 뺀 높이만 쓰고, 그 안에서 표지가 자리를 양보한다 */
.mua-mag-sets {
    flex: 0 0 var(--mag-sets-w);
    position: sticky;
    /* 화면 세로 가운데쯤에 선다(지시) — 위아래 남는 자리를 반씩 나눠 갖는다.
       머리 바가 다시 내려와도 가리지 않게 최소 자리는 남긴다 */
    top: max(
        calc((var(--header-box-h) + var(--space-lg) + var(--space-2xl)) / 2),
        calc(var(--header-height) + var(--space-sm))
    );
    height: calc(100vh - var(--header-box-h) - var(--space-lg) - var(--space-2xl));
    display: flex;
    flex-direction: column;
}

/* 표지 칸 — 글·조작이 쓰고 남은 높이를 갖는다. 화면이 낮으면 표지가 먼저 줄어든다 */
/* 표지 칸 — 글·조작이 쓰고 남은 높이를 갖는다. 화면이 낮으면 표지가 먼저 줄어든다.
   높이를 기준 삼아 폭을 뽑기 위해 크기 기준으로 삼는다 */
/* 표지 칸은 판형 그대로 — 칸만 넓으면 그 안에서 표지가 작아 보이고 붕 떠 보인다
   (실측: 칸 512 폭에 표지 344, 좌우 84px 씩 빔) */
.mua-mag-stage {
    flex: none;
    height: calc(var(--mag-sets-w) * var(--mag-cover-ratio) / 100);
    min-height: var(--mag-cover-min);
}

/* 넘겨 보는 표지는 칸 높이에 맞춰 판형 그대로 선다 —
   화면 폭으로 높이를 잡던 값(2560 에서 724px)이 칸(425px)을 넘겨 위아래가 잘려 있었다(390 에서 69%).
   남는 좌우는 비워 둔다 */
/* 표지 자리는 표지 크기와 같다 — 칸만 넓으면 그 안에서 표지가 작아 보이고 붕 떠 보인다
   (2560 실측: 칸 512 폭에 표지 344, 좌우 84px 씩 빔). 칸 높이에서 폭을 뽑아 딱 맞춘다 */
.mua-mag-stage .mua-mag-cover {
    height: 100%;
    background: none;
}

.mua-mag-stage .mua-mag-cover > img {
    width: auto;
    margin-inline: auto;
    object-fit: contain;
}

/* 글 칸 — 표지와 따로 갈린다. 권마다 글 길이가 달라도 자리는 고정한다.
   묶음이 화면 높이에 갇혀 있어 그냥 두면 이 칸이 눌려(2560 에서 0px) 아래 단추 줄이 잘린다 —
   줄어들지 않게 못 박는다 */
.mua-mag-read {
    flex: none;
    /* 높이를 못 박으면 묶음이 화면보다 길어져 앞뒤 단추가 화면 밖으로 밀린다(2560 실측 bottom 1776 > 1440).
       지금 읽는 장이 차지하는 만큼만 쓴다 */
    margin-top: var(--space-md);
}

/* 지금 읽는 장만 자리를 차지한다 — 나머지는 겹쳐 서서 넘어갈 준비를 한다 */
.mua-mag-read > .mua-mag-slide.is-on {
    position: relative;
}

/* 한 장 — 기다리는 장은 아래에 서 있고, 지나간 장은 위로 빠진다 */
.mua-mag-slide {
    opacity: 0;
    transform: translateY(var(--mag-slide-shift));
    transition: opacity var(--transition-base), transform var(--transition-inout);
    pointer-events: none;
}

.mua-mag-slide.is-on {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mua-mag-slide.is-out {
    transform: translateY(calc(var(--mag-slide-shift) * -1));
}

/* 넘기는 자리 */
.mua-mag-ctrl {
    margin-top: var(--space-lg);
}

.mua-mag-dots {
    gap: var(--mag-dot-gap);
}

.mua-mag-dot {
    position: relative;
    width: var(--mag-dot);
    height: var(--mag-dot);
    padding: 0;
    border: 0;
    background: var(--color-line-strong);
    cursor: pointer;
    transition: background var(--transition-fast);
}

/* 6px 점은 손으로 못 누른다 - 옆 점의 자리를 뺏지 않는 선에서(점 + 사이 여백) 넓힌다 */
.mua-mag-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--mag-dot) + var(--mag-dot-gap));
    height: var(--hit-min);
    transform: translate(-50%, -50%);
}

.mua-mag-dot.is-on {
    background: var(--color-ink);
}

.mua-mag-arrow {
    width: var(--tap-min);
    height: var(--tap-min);
    border: var(--line-w) solid var(--color-line-strong);
    background: transparent;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

/* 아래 방향 갈매기 — 두 변만 남겨 그린다 */
.mua-mag-arrow-mark {
    width: var(--mag-arrow);
    height: var(--mag-arrow);
    border-right: var(--line-w) solid var(--color-ink);
    border-bottom: var(--line-w) solid var(--color-ink);
    transform: translateY(calc(var(--mag-arrow) / -4)) rotate(45deg);
}

.mua-mag-arrow-up {
    transform: translateY(calc(var(--mag-arrow) / 4)) rotate(-135deg);
}


/* 지난 합본 — 낱권을 두 칸으로 줄이면 오른쪽 끝에 한 칸이 남는다.
   그 칸 전체를 옅은 면으로 깔고, 합본은 낱권과 같은 결의 카드로 세운다.
   칸 안에서만 위아래로 굴러가므로 몇 권이 쌓여도 쪽 길이가 늘지 않는다(지시) */
.mua-mag-rest {
    flex: 0 0 var(--mag-rest-w);
    position: sticky;
    top: max(
        calc((var(--header-box-h) + var(--space-lg) + var(--space-2xl)) / 2),
        calc(var(--header-height) + var(--space-sm))
    );
    padding: var(--mag-rest-pad);
    background: var(--color-surface);

    /* 회색 면 위에서는 옅은 글자를 한 단계 진하게 쓴다 —
       흰 바탕 기준 색(#767676)은 이 면에서 4.16:1 로 떨어져 읽기 기준(4.5)에 못 미친다 */
    --color-ink-45: var(--color-ink-45-on-surface);
}

/* 이 안에서만 굴린다 — 바깥 쪽은 그대로 두고 목록만 흐른다.
   창이 주는 막대는 감추고 오른쪽 끝에 제 막대를 세운다(지시) */
.mua-mag-rest-scroll {
    height: var(--mag-rest-h);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.mua-mag-rest-scroll::-webkit-scrollbar {
    display: none;
}

/* 막대가 앉을 자리 — 목록만 감싼다(위 이름표까지 감싸면 막대가 이름표 옆까지 올라온다) */
.mua-mag-rest-view {
    position: relative;
}

/* 굴리는 동안에만 보인다 — 멈추면 조용히 사라진다.
   양 끝은 그라데이션으로 지워 막대가 어디서 시작하고 끝나는지 눈에 걸리지 않게 한다(지시) */
.mua-mag-rest-bar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--mag-bar-w);
    background: var(--color-line);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-mag-bar) var(--ease-inout);
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        var(--color-ink) var(--mag-bar-fade),
        var(--color-ink) calc(100% - var(--mag-bar-fade)),
        transparent 100%
    );
}

/* 첫머리에 있을 때, 그리고 손잡이를 끄는 동안에만 떠 있다 */
.mua-mag-rest-bar.is-hint,
.mua-mag-rest-bar.is-drag {
    opacity: 1;
    pointer-events: auto;
}

/* 굴릴 자리가 없으면 막대도 없다 */
.mua-mag-rest-bar.is-none {
    display: none;
}

/* 손잡이 — 자리는 굴린 만큼을 JS 가 넘겨 준다.
   너무 짧아져 잡히지 않는 것만 여기서 막는다(JS 는 clamp 를 읽지 못한다) */
.mua-mag-rest-bar-thumb {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: max(var(--mag-bar-thumb-min), var(--bar-thumb-h, 0px));
    background: var(--color-ink-45);
    transform: translateY(var(--bar-thumb-y, 0px));
    transition: opacity var(--dur-mag-bar) var(--ease-inout);
    cursor: grab;
    touch-action: none;
}

/* 끌고 있는 동안에는 손잡이가 손을 따라와야 한다 — 전환이 끼면 늦게 따라온다 */
.mua-mag-rest-bar.is-drag .mua-mag-rest-bar-thumb {
    transition: none;
    cursor: grabbing;
}

/* 안내 손잡이 — 굴리라고 알리는 짧은 것. 제자리 손잡이와 겸하지 않는다(겸하면 사라지는 동안 길이가 부풀어 보인다).
   바깥 겹은 여닫히기만 하고, 흐르는 일은 안쪽 겹이 맡는다 — 그래야 사라질 때 흐름이 끊기지 않는다 */
.mua-mag-rest-bar-hint {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-mag-bar) var(--ease-inout);
}

.mua-mag-rest-bar-hint-run {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: var(--mag-bar-hint-h);
    background: var(--color-ink-45);
    animation: mua-mag-bar-hint var(--dur-mag-hint) var(--ease-inout) infinite;
}

/* 첫머리에 서 있는 동안 — 짧은 손잡이가 위에서 아래로 끝없이 흐르고, 제자리 손잡이는 물러나 있는다(지시) */
.mua-mag-rest-bar.is-hint .mua-mag-rest-bar-thumb {
    opacity: 0;
}

.mua-mag-rest-bar.is-hint .mua-mag-rest-bar-hint {
    opacity: 1;
}

@keyframes mua-mag-bar-hint {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    20%,
    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(calc(var(--bar-track-h, 0px) - var(--mag-bar-hint-h)));
    }
}

/* 움직임을 줄여 달라고 한 사람에게는 흐르지 않는다 — 안내 대신 제자리 손잡이를 그대로 보여 준다 */
@media (prefers-reduced-motion: reduce) {
    .mua-mag-rest-bar-hint-run {
        animation: none;
    }

    .mua-mag-rest-bar.is-hint .mua-mag-rest-bar-thumb {
        opacity: 1;
    }
}


.mua-mag-rest-book + .mua-mag-rest-book {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: var(--line-w) solid var(--color-line);
}

/* 표지를 세워 두면 칸에 한 권 반밖에 안 들어간다(실측 2K 536px) —
   그림을 옆으로 눕히고 글을 오른쪽에 붙여 한 줄로 세운다 */
/* 사진 높이를 못 박아 두면 옆 글보다 낮게 남는다
   (390 사진 60 · 글 97 / 2560 사진 88 · 글 124 실측).
   가로만 정해 두고 세로는 옆 글 묶음에 맞춰 채운다(지시) */
.mua-mag-rest-thumb {
    flex: 0 0 var(--mag-rest-thumb);
    align-self: stretch;
    height: auto;
}

.mua-mag-rest-info {
    flex: 1;
    overflow: hidden;
}

/* 낱권은 오른쪽에서 줄을 지어 내려간다 */
.mua-mag-issues {
    flex: 1;
    overflow: hidden;
}

/* 서가 — 줄 사이는 넉넉히(윗줄 단추와 아랫줄 표지가 붙어 보이지 않게), 칸 사이는 좁게 */
.mua-mag-shelf {
    gap: var(--space-2xl) var(--space-xl);
}

/* 아티클 — 왼쪽에 목차가 따라 서고, 오른쪽에서 글을 읽는다 */
.mua-art-layout {
    gap: var(--art-toc-gap);
    align-items: flex-start;
}

.mua-art-toc {
    position: sticky;
    top: var(--art-toc-top);
    flex: none;
    width: var(--art-toc-w);
}

.mua-art-toc-link {
    display: flex;
    gap: var(--space-md);
    padding-block: var(--space-sm);
    border-left: var(--line-w) solid var(--color-line);
    padding-left: var(--space-md);
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
    color: var(--color-ink-45);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.mua-art-toc-no {
    flex: none;
}

.mua-art-toc-name {
    flex: 1;
}

/* 지금 보고 있는 편 */
.mua-art-toc-link.is-here {
    border-left-color: var(--color-ink);
}

/* 그 편 안의 소제목 — 차례보다 한 칸 들여 쓴다 */
.mua-art-toc-sub {
    margin-left: var(--space-md);
    border-left: var(--line-w) solid var(--color-line);
}

.mua-art-toc-mark {
    display: block;
    padding: var(--tab-tap-pad) 0 var(--tab-tap-pad) var(--space-md);
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
    color: var(--color-ink-45);
    transition: color var(--transition-fast);
}

/* 지금 자리·손이 닿은 자리는 또렷하게 */
.mua-art-toc-link.is-here,
.mua-art-toc-mark.is-on {
    color: var(--color-ink);
}

@media (hover: hover) {
    .mua-art-toc-mark:hover {
        color: var(--color-ink);
    }
}

/* 오른쪽에 세우는 장면 — 글과 함께 따라 내려간다 */
.mua-art-side {
    position: sticky;
    top: var(--art-toc-top);
    flex: none;
    width: var(--art-side-w);
}

.mua-art-side-media {
    height: var(--art-side-h);
}

@media (hover: hover) {
    .mua-art-toc-link:hover {
        color: var(--color-ink);
    }
}

/* 읽는 단 — 묶음은 가로 wrap 오른끝까지 쓰고, 글줄만 읽기 폭을 지킨다.
   묶음까지 좁히면 그림과 표가 wrap 안쪽에서 어중간하게 끊긴다.
   글줄에 폭을 걸어 두므로 한글 한 줄이 45자를 넘지 않는다 */
.mua-art-body {
    flex: 1;
    overflow-x: clip;
}

.mua-art-para {
    width: min(100%, var(--art-body-w));
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.mua-art-para + .mua-art-para {
    margin-top: var(--space-lg);
}

.mua-art-quote {
    width: min(100%, var(--art-body-w));
    margin-block: var(--space-2xl);
}

.mua-art-note {
    width: min(100%, var(--read-ko-cap));
    margin-top: var(--space-xl);
}

/* 항목 묶음 — 글 사이에 끼는 자리라 위아래를 넉넉히 띄운다 */
.mua-art-grid {
    margin-block: var(--space-2xl);
}

.mua-art-cell + .mua-art-cell {
    margin-top: var(--space-xl);
}

/* 글 아래 이동줄 — 이전(왼쪽) · 목록(가운데) · 다음(오른쪽).
   앞뒤 글이 없어도 양옆 자리를 비워 두어야 목록이 늘 화면 가운데에 선다.
   글 끝(서명)과 윗선이 맞닿지 않게 선 위로도 넉넉히 띄운다 */
.mua-art-nav {
    margin-top: var(--space-2xl);
}

.mua-art-nav-row {
    gap: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: var(--line-w) solid var(--color-line);
}

.mua-art-nav-side {
    flex: 1;
    overflow: hidden;
}

.mua-art-nav-next {
    text-align: right;
}

/* 목록으로 — 글자 대신 줄 세 개로 그린 표시 하나만 둔다 */
.mua-art-nav-home {
    flex: none;
    width: var(--tap-min);
    height: var(--tap-min);
    color: var(--color-ink-45);
    transition: color var(--transition-fast);
}

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

@media (hover: hover) {
    .mua-art-nav-home:hover {
        color: var(--color-ink);
    }
}

.mua-art-navlink {
    display: block;
    transition: opacity var(--transition-fast);
}

/* #################################### 07.News · Media #################################### */
/* 소식 — 가장 최근 것만 크게 두고, 나머지는 공지처럼 줄로 잇는다 */

/* 지난 소식 소제목 — 줄 목록이 시작되는 자리를 알린다 */

/* 공지 게시판 줄 번호 — 자릿수가 늘어도 제목 시작점이 흔들리지 않게 자리를 고정한다 */

/* 번호만 알려 주셔도 되는 줄 — 번호를 크게 두고, 같은 줄 오른쪽 끝에 보내기를 둔다 */
.mua-ct-call {
    justify-content: space-between;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

/* 번호 앞에 무엇을 위한 번호인지 한 줄 — 번호만 덜렁 두지 않는다 */
.mua-ct-call-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    color: var(--color-ink-45);
}

.mua-ct-call-no {
    position: relative;
    display: block;
    font-size: var(--fs-display-2);
    font-weight: var(--fw-hero);
    letter-spacing: var(--ls-display);
    color: var(--color-ink);
}

/* 왼쪽에 지도, 오른쪽에 정보 */
.mua-ct-place {
    gap: var(--space-2xl);
    align-items: stretch;
}

.mua-ct-map {
    position: relative;
    flex: 1;
    height: var(--ct-map-h);
    overflow: hidden;
    background: var(--color-surface);
}

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

.mua-ct-place-info {
    flex: 0 0 var(--ct-info-w);
}

.mua-sns-place {
    justify-content: flex-start;
}

.mua-media-ch {
    display: block;
    margin-bottom: var(--mag-item-gap);
    transition: opacity var(--transition-fast);
}

.mua-media-next {
    margin-top: var(--section-gap);
}

/* 미디어 — 왼쪽에 영상 목록, 오른쪽에 내려받을 자료.
   폭·자리·블록 여부는 마크업의 유틸(mua-w-full · mua-abs · mua-flex)이 맡는다 */
.mua-media-layout {
    gap: var(--media-col-gap);
    align-items: flex-start;
}

.mua-media-videos {
    flex: 1;
    overflow-x: clip;
}

/* 표지와 글이 한 줄에 서지만, 글꼴을 키운 좁은 화면에서는 글이 더 줄지 못해 칸을 밀어낸다.
   그때는 아래로 접어 내린다(브라우저 글꼴 2배 320px 에서 163px 넘치던 자리) */
.mua-media-video {
    flex-wrap: wrap;
    padding: var(--space-lg) 0;
    border: 0;
    border-top: var(--line-w) solid var(--color-line);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

@media (hover: hover) {
    .mua-media-video:hover {
        border-top-color: var(--color-ink);
    }
}

/* 바로 보기·내려받기는 밑줄 자리를 가져 상자가 두껍고, 옆의 잔글(PDF · 1.5MB)은 얇다 —
   상자 가운데로 맞추면 글자 아랫선이 어긋나 보인다(실측 상자 중심은 같은데 글이 따로 논다).
   글자 기준선으로 맞춰 한 줄로 읽히게 한다 */
.mua-media-act {
    align-items: baseline;
}

/* 좁은 화면 탭 — 영상과 자료를 갈라 하나씩 본다(지시). 넓은 화면에서는 탭이 서지 않는다 */
.mua-media-tabs {
    width: 100%;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    border-bottom: var(--line-w) solid var(--color-line);
}

.mua-media-tab {
    position: relative;
    padding: 0 0 var(--space-sm);
    border: 0;
    background: transparent;
    font-size: var(--fs-body-sm);
    color: var(--color-ink-45);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.mua-media-tab.is-on {
    color: var(--color-ink);
    border-bottom: var(--line-w) solid var(--color-ink);
}

.mua-media-video-shot {
    flex: none;
    width: var(--media-shot-w);
    height: var(--media-shot-h);
    background: var(--img-frame-bg);
}

/* 표지 위 재생 표시 — 흰 삼각형 하나만 가운데에 둔다 */
.mua-media-video-play {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-top: var(--media-play-size) solid transparent;
    border-bottom: var(--media-play-size) solid transparent;
    border-left: calc(var(--media-play-size) * 1.7) solid var(--color-white);
    transform: translate(-50%, -50%);
}

.mua-media-video-text {
    /* basis 를 0 으로 두면 아무리 좁아도 접히지 않는다 - 읽기 최소치를 기준 삼아 그 아래서 접는다 */
    flex: 1 1 var(--media-text-min);
    overflow-x: clip;
    gap: var(--space-sm);
}

.mua-media-files {
    flex: none;
    width: var(--media-files-w);
}

.mua-media-files-head {
    margin-bottom: var(--space-lg);
}

.mua-media-file + .mua-media-file {
    margin-top: var(--space-lg);
}

/* 영상 보기 — 뒤 화면을 흐리고 가운데에서 재생한다 */
.mua-vplay {
    position: fixed;
    z-index: var(--z-modal);
}

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

/* 열 때는 흐림이 짙어지며 상자가 가운데에서 떠오르고, 닫을 때는 그 반대로 걷힌다.
   세 겹이 같은 결로 함께 움직여야 한 동작으로 읽힌다 */
.mua-vplay-veil {
    background: var(--vplay-veil);
    backdrop-filter: blur(var(--vplay-blur));
    opacity: 0;
    transition: opacity var(--transition-base);
}

.mua-vplay.is-on .mua-vplay-veil,
.mua-vplay.is-on .mua-vplay-box,
.mua-vplay.is-on .mua-vplay-close {
    opacity: 1;
}

/* 상자만 살짝 작은 채로 시작해 제 크기로 커진다 */
.mua-vplay-box {
    width: min(100%, var(--vplay-w));
    padding: var(--space-lg);
    gap: var(--space-md);
    opacity: 0;
    transform: scale(var(--vplay-pop-from));
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.mua-vplay.is-on .mua-vplay-box {
    transform: scale(1);
}

.mua-vplay-video {
    height: auto;
    background: var(--color-ink);
}

.mua-vplay-title {
    color: var(--color-white);
    /* 영상 아래 제목은 가운데에 둔다(지시) */
    text-align: center;
}

/* 닫기 — 1px 빗금 두 개를 엇갈려 크게 둔다 */
.mua-vplay-close {
    opacity: 0;
    transition: opacity var(--transition-base);
    top: var(--space-xl);
    right: var(--space-xl);
    width: var(--vplay-close-size);
    height: var(--vplay-close-size);
    border: var(--line-w) solid var(--color-white);
    background: transparent;
    cursor: pointer;
}

.mua-vplay-close-mark {
    width: var(--vplay-mark-size);
    height: var(--vplay-mark-size);
}

.mua-vplay-close-mark::before {
    content: '';
    position: absolute;
    inset: 0;
    height: var(--line-w);
    margin: auto;
    background: var(--color-white);
    transform: rotate(45deg);
}

.mua-vplay-close-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    height: var(--line-w);
    margin: auto;
    background: var(--color-white);
    transform: rotate(-45deg);
}

/* #################################### 08.Contact #################################### */
.mua-contact-row {
    padding-block: var(--contact-row-pad);
}

.mua-contact-info > p + p {
    margin-top: var(--space-xs);
}

/* 접수 완료 표시 — 문장 위에 가는 선 한 줄만 긋는다 (긋는 동작은 trigger.css 의 draw 가 맡는다) */
.mua-done-line {
    height: var(--line-w);
    background: var(--color-ink);
}

/* #################################### 08.Cursor preview #################################### */
/* 커서를 따라다니는 미리보기 — 일반 호버 대신 새 요소가 생성된다 */
.mua-cursor-preview {
    position: fixed;
    top: var(--cursor-y, 0);
    left: var(--cursor-x, 0);
    width: var(--cursor-preview-w);
    height: var(--cursor-preview-h);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
    transition: opacity var(--transition-fast), transform var(--transition-base);
    pointer-events: none;
    z-index: var(--z-modal);
}

.mua-cursor-preview.is-on {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* #################################### 09.Board #################################### */
/* 목록 — 제목 대신 글의 첫 문장을 크게 읽히고, 분류·제목·날짜는 그 아래 작게 붙인다 */
.mua-bd-tabs {
    padding-bottom: var(--space-md);
    border-bottom: var(--line-w) solid var(--color-line-strong);
}

.mua-bd-tab {
    display: inline-block;
    padding-block: var(--tab-tap-pad);
    padding-inline: var(--tab-tap-padx);
    font-size: var(--fs-body-sm);
    text-align: center;
    color: var(--color-ink-45);
    transition: color var(--transition-fast);
}

/* 고른 분류·첫 문장·분류 이름은 또렷하게 */
.mua-bd-tab.is-on,
.mua-bd-row-lead,
.mua-bd-row-cate {
    color: var(--color-ink);
}


@media (hover: hover) {
    .mua-bd-tab:hover {
        color: var(--color-ink);
    }
}

.mua-bd-row-link {
    gap: var(--bd-row-gap);
    padding-block: var(--bd-row-pad-y);
    border-bottom: var(--line-w) solid var(--color-line);
    align-items: baseline;
    transition: border-color var(--transition-fast);
}

@media (hover: hover) {
    .mua-bd-row-link:hover {
        border-bottom-color: var(--color-ink);
    }
}

/* 날짜와 항목 이름은 자리를 고정해 둔다 — 글이 길어져도 시작점이 흔들리지 않는다 */
.mua-bd-row-date {
    flex: 0 0 var(--bd-date-w);
    /* 날짜는 한 덩어리다 - 칸이 좁으면 「2026.08.10」이 세 줄로 접혀 줄 높이가 72px 까지 늘어난다(320 실측) */
    white-space: nowrap;
}

.mua-bd-spec-key {
    flex: 0 0 var(--bd-key-w);
}

.mua-bd-row-body {
    flex: 1;
    overflow-x: clip;
    gap: var(--space-sm);
}

/* 첫 문장이 이 목록의 주인공이다 —
   span 이라 태그 목록의 낱말 단위 줄바꿈을 못 받으므로 여기서 함께 맞춘다 */
.mua-bd-row-lead {
    width: min(100%, var(--art-read-cap));
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 줄 오른쪽 끝 — 분류를 정원 하나로 세우고, 공지는 그 앞에 표시를 하나 더 둔다 */
.mua-bd-row-marks {
    flex: none;
    gap: var(--space-sm);
    align-self: center;
}

@media (max-width: 1024px) {
    /* 좁은 화면에서는 한 줄 안의 칸들이 세로로 쌓인다. 그때 칸 사이 틈(390 실측 12)이
       줄과 줄 사이(46)보다 훨씬 좁아 목록이 들쭉날쭉하게 붙어 보인다(지시).
       세로로 쌓일 때는 줄 사이와 같은 간격으로 벌린다 */
    .mua-works-row {
        row-gap: var(--section-gap);
    }

    /* 사례 — 종류 · 이름 · 한 줄 · 자리가 각각 떨어져 흩어져 보인다.
       한 덩어리로 읽히게 사이를 좁힌다 (목록과 보기 화면 모두) */
    .mua-works-text > * + *,
    .mua-sub-hero-lead {
        margin-top: var(--space-xs);
    }

    .mua-sub-hero-title {
        margin-top: var(--space-xs);
    }

    /* 앞뒤 글 — 라벨과 제목은 붙여 한 덩어리로 읽히게 하고,
       가운데 목록 아이콘과는 오히려 사이를 벌린다(390 실측 라벨-제목 12 / 아이콘-글 21) */
    .mua-art-nav-side .mua-title {
        margin-top: var(--space-xs);
    }

    .mua-art-nav-row {
        gap: var(--space-lg);
    }

    /* 긴 본문은 줄 길이를 고르게 맞추기보다(balance) 뜻이 갈리지 않게 나눈다.
       balance 는 제목처럼 짧은 글에 맞는 방식이라 여섯 줄짜리 문단에서
       「자재를 / 고르고」 처럼 한 덩어리가 갈렸다 */
    .mua-about-para,
    .mua-lead,
    .mua-bd-para,
    .mua-view-copy {
        text-wrap: pretty;
    }

    /* 카드 안 짧은 설명은 세 줄 남짓이다 — 긴 글에 맞춘 1.78 배는 넓어 보인다.
       이끄는 글 행간(1.62~1.66)으로 좁힌다 (긴 본문 행간은 그대로 둔다) */
    .mua-style-rail-item .mua-body-sm {
        line-height: var(--lh-lead);
    }

    /* 편지투 본문을 오른쪽에 맞춰 흘리면 줄 끝이 들쭉날쭉해 읽기 어렵다.
       좁은 화면에서는 왼쪽에 맞춘다 (넓은 화면은 원래 결을 그대로 둔다) */
    .mua-about-letter-text {
        align-items: flex-start;
        text-align: left;
    }

    /* 줄이 위아래로 쌓이면 표시가 가운데에 남는다(390 실측 좌우 틈 112px) —
       넓은 화면과 같이 오른쪽 끝에 세운다(지시) */
    .mua-bd-row-marks {
        align-self: flex-end;
    }
}

.mua-bd-row-badge {
    width: var(--bd-badge-size);
    height: var(--bd-badge-size);
    border: var(--line-w) solid var(--color-line-strong);
    border-radius: 50%;
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-label);
    text-align: center;
}

.mua-bd-row-notice {
    color: var(--color-ink-45);
}

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

.mua-bd-empty {
    padding-block: var(--space-2xl);
}

/* 보기 — 왼쪽 정보가 붙박이로 서고 오른쪽으로 본문이 지나간다 */
.mua-bd-view-layout {
    gap: var(--art-toc-gap);
    align-items: flex-start;
}

.mua-bd-view-info {
    position: sticky;
    top: var(--art-toc-top);
    flex: 0 0 var(--art-toc-w);
}

.mua-bd-spec-row {
    gap: var(--space-md);
    padding-block: var(--space-sm);
    border-bottom: var(--line-w) solid var(--color-line);
}

.mua-bd-spec-val {
    flex: 1;
}

.mua-bd-file {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: var(--line-w) solid var(--color-ink);
}

.mua-bd-view-body {
    flex: 0 1 var(--art-body-w);
    overflow-x: clip;
}

.mua-bd-para {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.mua-bd-para + .mua-bd-para {
    margin-top: var(--space-lg);
}

.mua-bd-nav {
    margin-top: var(--section-gap);
}

.mua-bd-navlink {
    display: block;
}

/* 앞뒤 글 제목은 좁은 칸에서 두세 줄로 흘러 아래 내용을 밀어낸다(390 실측 폭 123px 에 3줄) —
   한 줄로 두고 넘치는 만큼은 말줄임으로 접는다 */
.mua-bd-navlink .mua-title,
.mua-art-nav-side .mua-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #################################### 10.Responsive #################################### */
/* 매거진 — 묶음·낱권·지난 합본 세 갈래가 좁은 화면에서 나란히 서면 화면 밖으로 158px 밀려난다(390 실측).
   화면이 낮을 때도 같다: 묶음을 화면 높이에 가두면 표지·글·앞뒤 단추가 그 안에 안 들어가
   조작 줄이 화면 밖으로 밀려 눌리지 않았다(1280x720 실측 그릇 407 / 내용 769, 단추 top 914 > 900).
   좁거나 낮으면 붙박이를 풀고 위아래로 쌓는다 */
@media (max-width: 1024px), (max-height: 1100px) {
    .mua-mag-body {
        flex-direction: column;
    }

    .mua-mag-sets,
    .mua-mag-rest {
        position: static;
        flex: none;
        width: 100%;
        height: auto;
    }

    /* 쌓이면 낱권 칸이 화면 폭을 다 쓴다 — 합본 칸에 자리를 내주려 두 권으로 줄였던 것도 푼다 */
    .mua-mag-issues {
        width: 100%;
    }

    /* 합본 목록은 화면 높이가 아니라 제 줄 수에 맞춘 자리만 쓴다 — 그 안에서 굴린다 */
    .mua-mag-rest-scroll {
        height: var(--mag-rest-h-narrow);
    }

    /* 쌓이면 묶음 칸이 화면 높이를 못 쓴다 — 표지 자리를 따로 준다(그냥 두면 124px 까지 쪼그라든다) */
    .mua-mag-stage {
        flex: none;
        height: var(--mag-cover-stack);
    }

    /* 쌓인 칸이 넓으면 표지만 가운데 떠서 아래 글줄과 축이 어긋난다(1180x820 실측 좌우 375px).
       글과 같은 자리에서 시작하게 왼쪽으로 붙인다 */
    .mua-mag-stage .mua-mag-cover > img {
        margin-inline: 0;
    }

    /* ── 손에 드는 화면의 합본 넘김
       세로로만 쌓으면 표지가 147x208 로 작아지고(390 실측) 오른쪽 185px 이 빈 채 남는다.
       자리가 나는 폭에서는 표지와 글을 나란히 세우고, 더 좁으면 표지를 키워 한가운데 둔다.
       넓은 화면(1025~)은 원래 결 그대로다 */
    @media (min-width: 481px) {
        .mua-mag-sets {
            flex-direction: row;
            flex-wrap: wrap;
            gap: var(--space-lg);
            align-items: flex-start;
        }

        .mua-mag-stage {
            flex: 0 0 var(--mag-cover-side);
            height: calc(var(--mag-cover-side) * var(--mag-cover-ratio) / 100);
        }

        .mua-mag-read {
            flex: 1;
            min-width: 0;
            margin-top: 0;
        }

        /* 넘김 줄은 아래에 한 줄로 깔린다 */
        .mua-mag-ctrl {
            flex: 0 0 100%;
        }
    }

    @media (max-width: 480px) {
        /* 한 장으로 세울 때는 표지를 키우고 한가운데 둔다 — 옆에 설 글이 없어 축이 어긋나지 않는다 */
        .mua-mag-stage {
            height: var(--mag-cover-solo);
        }

        .mua-mag-stage .mua-mag-cover > img {
            margin-inline: auto;
        }
    }
}

@media (max-width: 1024px) {
    /* 고른 갈래만 보인다 */
    .mua-media-videos:not(.is-on),
    .mua-media-files:not(.is-on) {
        display: none;
    }

    /* 영상 미리보기는 오른쪽 끝에 세운다(지시) */
    .mua-media-video-shot {
        margin-left: auto;
    }

    /* 목록 줄과 보기 정보는 좁아지면 위아래로 쌓는다 */
    .mua-bd-row-link,
    .mua-bd-view-layout {
        flex-direction: column;
        gap: var(--space-sm);
    }

    /* 쌓이면 가로용 기준 폭이 높이로 읽힌다 — 날짜 칸이 72px 짜리 빈 자리가 됐다(320 실측) */
    .mua-bd-row-date {
        flex: none;
    }

    .mua-mag-issues.is-narrow .mua-mag-book {
        flex: 0 0 calc((100% - var(--space-xl) * 2) / 3);
    }

    /* 점 사이가 8px 이면 손으로 겨냥할 자리가 14px 밖에 안 나온다 - 눌러 넘기는 자리를 벌린다 */
    .mua-mag-ctrl {
        --mag-dot-gap: var(--space-md);
    }

    /* 세 권을 그대로 세우면 표지가 손톱만 해진다(320 실측 83x117, 제목 3줄) —
       화면이 좁아질수록 한 줄에 세우는 권 수를 줄인다 */
    @media (max-width: 767px) {
        .mua-mag-book,
        .mua-mag-issues.is-narrow .mua-mag-book {
            flex: 0 0 calc((100% - var(--space-xl)) / 2);
        }
    }

    @media (max-width: 479px) {
        .mua-mag-book,
        .mua-mag-issues.is-narrow .mua-mag-book {
            flex: 0 0 100%;
        }
    }

    .mua-bd-view-info {
        position: static;
        width: 100%;
    }

    .mua-bd-view-body {
        width: min(100%, var(--art-read-cap));
    }

    .mua-cursor-preview {
        display: none;
    }

    /* 좁은 화면에서는 나란히 두던 것을 위아래로 쌓는다 */
    .mua-media-layout,
    .mua-works-row,
    .mua-works-row-flip,
    .mua-about-alt-row,
    .mua-about-alt-row-flip,
    .mua-about-letter-row,
    .mua-art-layout,
    .mua-view-pair,
    .mua-ct-place,
    .mua-works-body {
        flex-direction: column;
    }

    /* 쌓이면 가로용 기준이 높이로 읽힌다 — 지도가 32x288 짜리 막대였다가(320 실측)
       쌓고 나니 flex:1 이 높이 0 을 받았다. 둘 다 풀어 제 높이를 쓰게 한다 */
    .mua-ct-place-info,
    .mua-ct-map,
    .mua-about-alt-text {
        flex: none;
    }

    /* 쌓이면 flex 기준이 풀려 글이 칸을 다 먹는다 — 여기서는 폭으로 다시 끊는다 */
    .mua-about-alt-text {
        width: min(100%, var(--seq-read-max));
    }

    /* 담아온 곳의 수 — 좁은 화면에서는 제목이 두 줄이 되면서 정원이 글자 위로 올라탄다.
       띄워 두지 말고 흐름 안으로 내려 첫머리 아래에 세운다 */
    .mua-works-total {
        position: static;
        margin-top: var(--space-lg);
        /* 흐름 안으로 내려온 뒤에도 오른쪽 끝에 선다(지시) */
        margin-left: auto;
        /* 이 자리에서는 정원만 키워 눈에 걸리게 한다(지시) */
        width: var(--works-total-size-mo);
        height: var(--works-total-size-mo);
    }

    /* 분류가 왼쪽에 계속 서 있으면 좁은 화면에서 목록이 131px 까지 눌린다 —
       위로 올려 한 줄로 눕히고, 목록이 폭을 다 쓰게 한다 */
    .mua-works-tab {
        position: static;
        flex: none;
        width: 100%;
    }

    /* 분류는 한 줄로 세우고, 폭을 넘치면 옆으로 끌어 본다(지시).
       접어 내리면 320 에서 두 줄이 되어 목록이 그만큼 밀린다 */
    .mua-works-tab-list {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        column-gap: var(--space-lg);
        scrollbar-width: none;
    }

    .mua-works-tab-list::-webkit-scrollbar {
        display: none;
    }

    .mua-works-tab-list > li {
        flex: none;
    }

    .mua-media-files,
    .mua-art-toc {
        width: 100%;
    }

    /* 위아래로 쌓이면 flex-basis 가 폭이 아니라 높이로 읽힌다 —
       가로용으로 준 칸 값이 높이 0 이 되어 사진이 통째로 사라졌다. 기준을 풀고 폭을 채운다 */
    .mua-about-alt-media,
    .mua-about-letter-media,
    .mua-view-pair-media,
    .mua-works-list {
        flex: none;
        width: 100%;
    }

    /* 폭이 화면을 따라 넓어지므로 높이도 같이 늘린다 - 가로용 높이를 그대로 두면 사진이 잘린다 */
    .mua-about-alt-media {
        height: var(--about-stack-alt);
    }

    .mua-about-letter-media {
        height: var(--about-stack-letter);
    }

    .mua-view-pair-media {
        height: var(--view-stack-pair);
    }

    .mua-art-side-media {
        height: var(--art-stack-side);
    }

    /* 가운데로 모으던 정렬도 함께 푼다 — 그대로 두면 사진과 글의 시작선이 어긋난다 */
    .mua-about-alt-row,
    .mua-about-alt-row-flip {
        align-items: stretch;
    }

    /* 목차가 화면의 절반을 먹어 본문이 뒤로 밀린다(390 실측 423px / 화면 844) —
       좁은 화면에서는 감춘다(지시). 넓은 화면에서는 옆에 따라다니며 그대로 쓴다 */
    .mua-art-toc {
        display: none;
    }

    /* 오른쪽에 세우던 장면도 위아래로 쌓인다 — 가로용 폭(176px)을 그대로 두면 화면 한쪽에 몰린다 */
    .mua-art-side {
        position: static;
        width: 100%;
    }

    /* 위아래로 쌓이면 읽는 단이 화면 폭만큼 늘어난다 — 칸은 다 쓰되 글자 폭 상한만 지킨다 */
    .mua-art-body {
        width: min(100%, var(--art-read-cap));
    }

    /* 묶음 안 큰 사진도 같은 폭으로 선다 */
    .mua-works-cell-lead {
        flex: 1;
    }

    /* 위아래로 쌓이면 flex 는 높이를 나누고 폭은 사진 크기로 쪼그라든다(1024 에서 171px) —
       칸을 화면 폭으로 펴서 사진이 제 자리를 갖게 한다 */
    .mua-works-cell {
        width: 100%;
    }

    .mua-works-row,
    .mua-works-row-flip {
        align-items: stretch;
    }

    /* 위아래로 쌓이면 첫 칸만 크게 둘 이유가 없다 — 사진 크기를 하나로 맞춘다(지시).
       (넓은 화면에서는 큰 한 장 + 작은 둘의 삼분할을 그대로 쓴다) */
    .mua-works-cell-lead .mua-works-media,
    .mua-works-media {
        height: var(--works-stack-sm);
    }
}