@charset "utf-8";
/*------------------------------------------------------
· Project      : MU:A INTERIOR (mua)
· File         : basic.css — 리셋 · 베이스 · 타이포 · 미디어 · 접근성
· SUMMARY:
  1) Reset      2) Base (html/body)   3) Typography
  4) Media      5) Utility            6) Accessibility
· NOTE : 폼·버튼 등 전역 컴포넌트는 layout.css 가 담당한다.
         .mua-flex 는 배치 유틸의 기본. wrap/between 은 .mua-flex 와 함께 쓴다.
---------------------------------------------------------*/

/* #################################### 01.Reset #################################### */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    box-sizing: border-box;
}

ul,
ol,
li,
dl,
dt,
dd {
    list-style: none;
}

/* 의사클래스로 잡으면 명시도가 높아져 버튼·링크의 색 지정을 덮는다. 태그 선택자로 낮춘다 */
a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

/* 한글은 전용 이탤릭 글꼴이 없어 가짜 기울임으로 깨진다 — 기울임 전면 해제 */
em,
i,
address {
    font-style: normal;
}

/* iOS 가 폼 요소에 둥근 모서리·그라디언트를 강제로 씌우는 것을 차단 */
input,
button,
textarea,
select {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    color: inherit;
    background: transparent;
    outline: none;
    resize: none;
    word-break: keep-all;
    /* 단추 안 글도 칸을 넘기지 않는다 - 목록 줄이 통째로 단추인 자리가 있다(media 영상 줄) */
    overflow-wrap: anywhere;
}

table {
    border-collapse: collapse;
}

/* #################################### 02.Base #################################### */
/* 굴리는 것은 브라우저에 맡긴다 — 문서 전체에 scroll-behavior: smooth 를 걸면
   휠을 굴릴 때마다 새 이동이 시작돼 손끝과 화면이 어긋나 떨리는 것처럼 보인다.
   차례를 눌러 옮기는 자리에서는 그때만 부드럽게 간다(js/contents.js) */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

/* 스크롤 막대는 보이지 않게, 굴리는 것은 그대로 —
   막대가 나타났다 사라지면 그만큼 화면 폭이 오르내려 가운데 정렬한 것이 옆으로 밀린다
   (실측: 전체메뉴를 열면 막대 15px 이 사라져 머리 줄 메뉴가 8px 옮겨 갔다).
   overflow: hidden 으로 막지 않는다 — 그건 굴리는 것 자체를 없애 잘린 내용에 닿을 수 없게 한다.
   쓰는 자리마다 따로 적지 않게 여기 한 벌만 두고, 굴러가는 칸은 .mua-noscrollbar 를 붙인다 */
html,
body,
.mua-noscrollbar {
    scrollbar-width: none;          /* 파이어폭스 */
    -ms-overflow-style: none;       /* 옛 엣지 */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.mua-noscrollbar::-webkit-scrollbar {
    display: none;                  /* 크롬 · 사파리 */
}

body {
    font-family: var(--font-base);
    font-size: var(--fs-body);
    font-weight: var(--fw-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* 칸보다 긴 낱말은 끊어서라도 안에 넣는다 - 아래 태그 목록만으로는 span 이 빠져
       공백 없는 긴 이름이 들어오면 화면을 밀어냈다(320 에서 about 47px · media 109px).
       낱말 단위 줄바꿈(keep-all)은 짧은 영문 라벨을 못 끊어 머리·퀵바가 넘치므로 여기 두지 않는다.
       break-word 가 아니라 anywhere 인 이유 - 나란히 선 칸(flex)은 제일 긴 낱말만큼을 최소 폭으로
       잡아 버려서, 끊을 수 있다고만 알려서는 칸이 줄지 않는다 */
    overflow-wrap: anywhere;
}

/* 드로어·모달 열림 시 배경 스크롤 잠금 (clip 은 스크롤 컨테이너를 만들지 않는다) */
body.is-locked {
    overflow: clip;
    touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: var(--dur-none);
        animation-iteration-count: 1;
        transition-duration: var(--dur-none);
    }
}

/* #################################### 03.Typography #################################### */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--fw-headline);
    line-height: var(--lh-headline);
    letter-spacing: var(--ls-headline);
}

h1,
h2,
h3,
h4,
h5,
h6,
/* 전화번호·메일 주소·파일 이름은 중간에서 끊기면 뜻이 흐려진다.
   칸이 좁으면 글자 사이가 아니라 낱말 사이에서 넘기고,
   낱말 하나가 칸보다 큰 마지막 경우에만 끊는다 — 그때는 끊지 않으면 잘려 사라진다 */
p,
li,
dt,
dd,
th,
td,
blockquote,
.mua-val {
    word-break: keep-all;
    overflow-wrap: anywhere;
    /* 줄 길이를 고르게 나눈다 - 마지막 줄에 낱말 하나만 덩그러니 남던 것을 막는다(실측 182px) */
    text-wrap: balance;
}

/* 제목은 줄 길이를 고르게 나눈다 - 첫 줄만 길고 둘째 줄이 토막 나는 것을 막는다 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
    text-wrap: balance;
}

/* 타이포 스케일 — 크기·굵기·행간·자간을 한 단위로 묶는다 */
.mua-display-1 {
    font-size: var(--fs-display-1);
    font-weight: var(--fw-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
}

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

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

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

.mua-lead {
    font-size: var(--fs-lead);
    font-weight: var(--fw-lead);
    line-height: var(--lh-lead);
}

.mua-body {
    font-size: var(--fs-body);
}

.mua-body-sm {
    font-size: var(--fs-body-sm);
}

.mua-caption {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--color-ink-45);
}

.mua-label {
    font-family: var(--font-en);
    font-size: var(--fs-label);
    font-weight: var(--fw-label);
    line-height: var(--lh-caption);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.mua-en {
    font-family: var(--font-en);
}

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

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

/* 특정 지점만 새 줄로 내릴 때 (br 대신) */
.mua-br {
    display: block;
}

/* 말줄임 — 부모 폭에 맞춰 자동. 줄 수는 --clamp-line 으로 지정 (기본 1줄) */

/* #################################### 04.Media #################################### */
/* 그림은 부모가 정한 폭을 넘지 않고, 높이는 원본 비율을 따른다 */
img,
picture,
video {
    display: block;
    width: 100%;
    height: auto;
}

/* 그림 부호는 쓰는 자리에서 크기를 받는다 — 여기서는 줄에 끼지 않게만 세운다 */
svg {
    display: block;
}

/* 이미지 프레임 — 부모가 크기(프레임), 자식은 채움. overflow 는 .mua-hidden 과 함께 */
.mua-figure {
    position: relative;
    background: var(--img-frame-bg);
}

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

/* 호버 시 프레임은 고정, 내부 이미지만 확대 */
.mua-figure-zoom > img {
    transition: transform var(--transition-slow);
}

@media (hover: hover) {
    .mua-figure-zoom:hover > img {
        transform: scale(1.04);
    }
}

/* #################################### 05.Utility #################################### */
/* 배치 유틸 — 반복 빈도가 높은 선언은 여기서 1회만 정의하고 마크업에서 조합한다.
   컴포넌트 CSS 에는 그 요소만의 값(크기·색·위치)만 남긴다. */
.mua-wrap {
    width: var(--wrap-width);
    margin: 0 auto;
}

.mua-flex {
    display: flex;
}

.mua-inline-flex {
    display: inline-flex;
}

.mua-col {
    flex-direction: column;
}

/* 남은 자리를 채운다. 안에 든 것이 커도 자기 상자를 밀어내지 못하게 기준을 0 으로 둔다 */
.mua-grow {
    flex: 1 1 0;
}

.mua-wrap-flex {
    flex-wrap: wrap;
}

.mua-center {
    align-items: center;
}

.mua-jc-center {
    justify-content: center;
}

.mua-between {
    justify-content: space-between;
}

.mua-gap-xs {
    gap: var(--space-xs);
}

.mua-gap-sm {
    gap: var(--space-sm);
}

.mua-gap-md {
    gap: var(--space-md);
}

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

.mua-rel {
    position: relative;
}

/* 24컬럼 배치 — 자식에 style="--grid-span:N; --grid-start:S" 로 칸을 지정한다.
   블록마다 다른 span/start 를 주어 섹션마다 배치가 바뀐다. */
.mua-g {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
}

.mua-g > * {
    /* 칸 수를 실제 폭으로 옮긴 값 — 읽기 폭 상한과 견줄 때 같은 식을 두 번 적지 않으려고 이름을 준다.
       :root 에 두면 기본값 24칸으로 굳어 자식마다 다른 --grid-span 이 반영되지 않는다(1440 실측 넘침 37px) */
    --grid-span-w: calc(var(--grid-col) * var(--grid-span) + var(--grid-gap) * (var(--grid-span) - 1));
    flex: 0 0 var(--grid-span-w);
    margin-left: calc((var(--grid-col) + var(--grid-gap)) * var(--grid-start));
}

.mua-w-full {
    width: 100%;
}

.mua-h-full {
    height: 100%;
}

.mua-hidden {
    overflow: hidden;
}

.mua-inset {
    inset: 0;
}

.mua-mt-2xl {
    margin-top: var(--space-2xl);
}

.mua-mt-xs {
    margin-top: var(--space-xs);
}

.mua-mt-sm {
    margin-top: var(--space-sm);
}

.mua-mt-md {
    margin-top: var(--space-md);
}

.mua-mt-lg {
    margin-top: var(--space-lg);
}

.mua-pt-md {
    padding-top: var(--space-md);
}

.mua-pointer {
    cursor: pointer;
}

/* 등장 전 숨김 — JS·상태 클래스가 켜준다 */
/* 굴린 자리에 맞춰 스크립트가 띄워 준다 — 스크립트가 서지 못한 화면에서는
   숨긴 채로 남으면 안 되므로, 준비가 끝났다는 표시 아래에서만 숨긴다 */
.is-ready .mua-fade {
    opacity: 0;
}

/* 구분선 — 폭은 .mua-w-full 과 함께 지정한다 */
.mua-line {
    height: var(--line-w);
    background: var(--color-line);
}

/* #################################### 06.Accessibility #################################### */
:focus {
    outline: none;
}

:focus-visible {
    outline: var(--focus-ring-w) solid var(--color-point);
    outline-offset: var(--focus-ring-offset);
}

/* clip 만으로는 글자가 제자리 폭을 그대로 차지한다 — 320px 에서 문서가 9px 넘쳤다.
   overflow 로 실제로 잘라야 넘침이 사라진다 */
.sr-only {
    position: absolute;
    width: var(--sr-size);
    height: var(--sr-size);
    margin: var(--sr-offset);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-white);
    background: var(--color-ink);
    z-index: var(--z-loader);
    transform: translateY(-100%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

/* 눌리는 자리를 위아래로만 손 크기까지 넓힌다 — 보이는 모양은 그대로 두고,
   옆에 선 것의 자리를 뺏지 않는다. 쓰는 쪽은 position: relative 를 함께 둔다 */
.mua-hit-y::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: var(--hit-min);
    transform: translateY(-50%);
}

/* 눌리는 자리를 좌우로만 손 크기까지 넓힌다 — 글자가 두세 자뿐이어도 손이 닿는다.
   위아래용이 ::after 를 쓰므로 여기는 ::before 를 써 둘을 함께 걸 수 있다.
   쓰는 쪽은 position: relative 를 함께 둔다 */
.mua-hit-x::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    width: var(--hit-min);
    transform: translateX(-50%);
}

/* #################################### 06.Responsive #################################### */
/* 좁은 화면에서는 24칸 배치를 풀고 한 칸씩 쌓는다. span/start 는 데스크탑 값 그대로 둔다 */
@media (max-width: 1024px) {
    .mua-g > * {
        flex: 0 0 100%;
        margin-left: 0;
    }
}