@charset "utf-8";
/*------------------------------------------------------
· Project      : MU:A INTERIOR (mua)
· File         : custom.css — :root 토큰 정의 전용 (일반 selector 금지)
· SUMMARY:
  1) Font Family      2) Font Size        3) Font Weight
  4) Line Height      5) Letter Spacing   6) Color
  7) Layout / Wrap    8) Space            9) Form
 10) Shape / Line    11) Motion          12) Z-index
 13) Component       14) Responsive (토큰 재정의)
---------------------------------------------------------*/

:root {

    /* #################################### 01.Font Family #################################### */
    --font-kr: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    --font-en: 'Archivo', 'Pretendard Variable', 'Pretendard', sans-serif;
    --font-base: var(--font-kr);

    /* #################################### 02.Font Size #################################### */
    /* 레퍼런스 실측(2560 기준) 이식 — 거대 타이포 금지, 절제된 스케일 + 큰 이미지로 여백을 만든다
       molohouse 실측: 최대 40.8px / 본문 22px / 라벨 18px / 자간 normal */
    /* 주석 값은 320 / 1440 / 2560 / 3840 실측(px) — 상한은 4K 에서 도달한다 */
    /* 히어로만 예외 — 레퍼런스는 첫 화면 문장이 폭을 꽉 채운다 */
    --fs-hero: clamp(1.125rem, calc(0.93rem + 0.98vw), 3.28rem);  /* 18 / 29 / 40 / 52.5 */
    --fs-display-1: clamp(1.625rem, calc(1.42rem + 1.03vw), 3.89rem);  /* 26 / 37.6 / 49.1 / 62.2 */
    --fs-display-2: clamp(1.375rem, calc(1.21rem + 0.85vw), 3.25rem);  /* 22.1 / 31.6 / 41.1 / 52 */
    --fs-headline: clamp(1.25rem, calc(1.14rem + 0.54vw), 2.435rem);  /* 20 / 26 / 32.1 / 39 */
    --fs-title: clamp(1.0625rem, calc(1rem + 0.31vw), 1.744rem);  /* 17 / 20.5 / 23.9 / 27.9 */
    --fs-lead: clamp(1.0625rem, calc(0.96rem + 0.49vw), 2.136rem);  /* 17 / 22.4 / 27.9 / 34.2 */
    --fs-body: clamp(0.9688rem, calc(0.91rem + 0.29vw), 1.606rem);  /* 15.5 / 18.7 / 22 / 25.7 */
    --fs-body-sm: clamp(0.9062rem, calc(0.84rem + 0.18vw), 1.272rem);  /* 14.5 / 16 / 18 / 20.4 - 손에 든 화면에서도 읽히는 하한 */
    --fs-caption: clamp(0.8438rem, calc(0.79rem + 0.13vw), 1.102rem);  /* 13.5 / 14.5 / 16 / 17.6 */
    --fs-label: clamp(0.8438rem, calc(0.77rem + 0.22vw), 1.298rem);  /* 13.5 / 15.5 / 18 / 20.8 */

    /* #################################### 03.Font Weight #################################### */
    --fw-display: 500;
    --fw-headline: 500;
    --fw-title: 500;
    --fw-lead: 400;
    --fw-body: 400;
    --fw-label: 500;
    --fw-hero: 300;                                          /* 히어로 문장 — 크게 쓰는 만큼 획을 가늘게 */

    /* #################################### 04.Line Height #################################### */
    --lh-display: 1.2;
    --lh-headline: 1.22;
    --lh-title: 1.32;
    --lh-lead: 1.58;
    --lh-body: 1.7;
    --lh-caption: 1.5;

    /* #################################### 05.Letter Spacing #################################### */
    /* 레퍼런스는 자간을 건드리지 않는다(normal) — 과한 음수 자간이 AI 티를 낸다 */
    /* 480 이하에서 더 조이던 값(-0.288px)과 이어지도록 기울기를 맞춘다 —
       그냥 두면 글자는 커지는데 조임이 풀려 480 -0.29 → 768 -0.23 으로 뒤집혔다.
       2560 값(-0.59px)은 그대로다 */
    /* 자간은 글자에 딸린 값이라 글자를 키우면 함께 좁아져야 한다 — px 로 두면 글꼴을 두 배로
       키웠을 때 자간만 제자리라 글자가 헐거워진다(1440 글꼴 200% 실측, 글자대비 -0.0113 → -0.007).
       -0.2165px 와 -0.01353rem 은 기본 글꼴에서 같은 값이라 100% 에서는 달라지지 않는다 */
    --ls-display: clamp(-0.025em, calc(-0.01353rem - 0.01447vw), -0.004em);
    --ls-headline: clamp(-0.01em, -0.02vw, -0.003em);
    --ls-title: clamp(-0.006em, -0.01vw, 0em);
    --ls-body: clamp(-0.003em, -0.005vw, 0em);
    --ls-label: clamp(0em, 0.005vw, 0.01em);

    /* #################################### 06.Color #################################### */
    color-scheme: only light;
    --color-bg: #FFFFFF;
    --color-surface: #F5F4F2;
    --color-ink: #111111;
    --color-ink-70: #4A4A4A;
    --color-ink-45: #767676;
    /* 회색 면 위에서 쓰는 옅은 글자색 — 흰 바탕 기준 색을 그대로 쓰면 면 위에서 대비가 4.5 에 못 미친다 */
    --color-ink-45-on-surface: #6E6E6E;
    /* 밝은 장면 위 흰 글자가 앉는 자리에 까는 어두운 겹 — 아래로 갈수록 짙어진다 */
    --color-line: #E4E4E4;
    --color-line-strong: #C9C9C9;
    --color-white: #FFFFFF;
    --color-point: var(--color-ink);
    /* rgba 조합용 */
    --color-ink-rgb: 17, 17, 17;
    --color-white-rgb: 255, 255, 255;
    /* 검은 단색 로고를 흰색으로 뒤집는다 */
    --filter-to-white: brightness(0) invert(1);
    --filter-atmos-side: grayscale(0.85);                    /* 가운데 장면 옆에 선 멈춘 사진 — 색을 거의 뺀다(지시) */
    /* 헤더 색 — 지금 칸의 바탕이 어두우면 흰 글씨로 뒤집는다 (JS 가 칸마다 톤을 알려 준다) */
    --header-ink: var(--color-ink);

    /* #################################### 07.Layout / Wrap #################################### */
    --wrap-ratio: 90;                                         /* 본문이 차지하는 비율(%) — 아래 셋의 기준 */
    --wrap-width: calc(var(--wrap-ratio) * 1%);               /* 데스크탑·모바일 동일 */
    --wrap-side: calc((100% - var(--wrap-width)) / 2);        /* wrap 좌우 여백 폭 (부모 기준) */

    /* 24컬럼 배치 시스템 — 블록마다 시작점·폭을 달리해 정형 단 구조를 깬다
       (레퍼런스 실측: 24col / gap 16px @2560) */
    --grid-count: 24;
    --grid-gap: clamp(0.3187rem, calc(0.2214rem + 0.487vw), 1rem);  /* 5.1 / 10.6 / 16 / 16 */
    --grid-col: calc((100% - (var(--grid-count) - 1) * var(--grid-gap)) / var(--grid-count));
    --grid-span: 24;                                          /* 블록이 차지할 칸 수 */
    --grid-start: 0;                                          /* 왼쪽에서 비울 칸 수 */
    --vh-full: clamp(20rem, 100svh, 200rem);                  /* 뷰포트 높이(320~3200 클램프) */
    --section-padding-y: clamp(2.75rem, calc(2.11rem + 3.21vw), 9.814rem);  /* 44 / 80 / 115.9 / 157 — 폭을 따라 이어진다 */
    --sub-content-top: clamp(1.75rem, calc(1.39rem + 1.79vw), 5.686rem);  /* 28 / 48 / 68.1 / 91 — 첫머리 제목과 본문 첫 줄 사이 */
    --sub-gap-lg: clamp(2rem, calc(1.46rem + 2.68vw), 7.892rem);  /* 32 / 62 / 92 / 126.3 - 서브 본문 안 큰 간격(제목-내용, 줄 사이) */
    --sub-gap-md: clamp(1.25rem, calc(0.93rem + 1.61vw), 4.794rem);  /* 20 / 38.1 / 56.1 / 76.7 - 서브 본문 안 중간 간격 */
    --section-gap: var(--section-padding-y);
    /* 글꼴을 키우면 rem 이 그대로 따라와 머리 띠가 화면을 먹는다
       (실측 844x390 · 글꼴 200% 에서 머리 자리가 화면의 57%).
       화면 높이의 다섯 몫을 넘지 않게 잡아 둔다 — 글꼴 100% 에서는 어느 화면에서도 걸리지 않는다 */
    --header-height: min(clamp(4.5rem, 4.17vw, 6.667rem), 20vh);         /*  72 /  80 / 107 */
    /* 헤더가 실제로 차지하는 높이 — 로고를 첫 화면과 같은 자리에 두면 바가 그만큼 두꺼워진다.
       값은 렌더 후 실측해 common.js 가 채운다(기본값은 바 높이 그대로). */
    --header-block: var(--header-height);
    /* 머리 띠 위 여백 — 로고와 햄버거가 같은 선에서 출발하는 기준이다.
       예전에는 넓은 화면만 --header-height 로 못 박고 좁은 화면은 0 으로 덮어 가운데로 세웠다.
       그래서 로고와 햄버거 중심이 390·768 에서 20px, 1440 에서 -9px 씩 어긋났다(실측).
       한 줄로 이어 어느 폭에서도 같은 방식으로 선다 */
    --header-pad-y: clamp(2.5rem, 5vw, 6.6875rem);            /*  40 /  72 / 107 / 107 */

    /* #################################### 08.Space #################################### */
    /* 주석 값은 320 / 1440 / 2560 / 3840 실측(px) — 상한은 4K 에서 도달한다 */
    --gap-hair: clamp(0.25rem, 0.5vw, 0.5rem);                 /*   4 /   8 /   8 /   8 — 한 줄과 한 줄이 한 덩이로 읽힐 만큼만 */
    --space-xs: clamp(0.5rem, calc(0.46rem + 0.18vw), 0.892rem);  /* 8 / 10 / 12 / 14.3 */
    --space-sm: clamp(0.75rem, calc(0.68rem + 0.36vw), 1.544rem);  /* 12 / 16.1 / 20.1 / 24.7 */
    --space-md: clamp(1.125rem, calc(0.93rem + 0.98vw), 3.282rem);  /* 18 / 29 / 40 / 52.5 */
    --space-lg: clamp(1.75rem, calc(1.38rem + 1.88vw), 5.892rem);  /* 28.1 / 49.2 / 70.2 / 94.3 */
    --space-xl: clamp(2.5rem, calc(1.88rem + 3.13vw), 9.392rem);  /* 40.1 / 75.2 / 110.2 / 150.3 */
    --space-2xl: clamp(3.5rem, calc(2.63rem + 4.33vw), 13.022rem);  /* 56 / 104.4 / 152.9 / 208.4 */
    --gap-grid: clamp(0.7188rem, calc(0.5357rem + 0.915vw), 2rem);  /* 11.5 / 21.7 / 32 / 32 */

    /* #################################### 09.Form #################################### */
    --form-line-w: 1px;
    --form-pad-y: var(--space-sm);
    --form-gap: var(--space-lg);
    --form-check-size: clamp(1.125rem, 1.15vw, 1.75rem);
    --form-check-mark: calc(var(--form-check-size) * 0.7);   /* 눌렀을 때 안쪽에 차는 네모 */
    --form-check-tap-pad: calc((var(--tap-min) - var(--fs-body) * var(--lh-body)) / 2);  /* 글씨는 그대로 두고 누를 자리만 넓힌다 */
    --form-cell-w: clamp(9rem, 20vw, 32rem);   /* 144 / 512 / 512 — 한 줄을 나눠 쓰는 칸이 접히는 기준 */

    /* #################################### 10.Shape / Line #################################### */
    --radius: 0;                                              /* 직선만 — 전 요소 모서리 0 */
    --line-w: 1px;
    /* 손가락 굵기는 화면 폭도 글꼴 배율도 안 탄다 - 물리 치수라 px 로 못 박는다
       (rem 으로 두면 브라우저 글꼴 1.5배에서 66px 로 부풀어 24px 짜리 + 단추가 21px 삐져나갔다) */
    --hit-min: 44px;
    --sr-size: 1px;
    --sr-offset: -1px;

    /* #################################### 11.Motion #################################### */
    --dur-none: 0.01ms;                                       /* reduced-motion 무효화용 */
    --dur-fast: 0.25s;
    --dur-base: 0.5s;
    --dur-slow: 0.9s;
    --dur-reveal: 1.2s;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
    --stagger: 0.08s;
    --reveal-rise: clamp(0.6375rem, calc(0.5143rem + 0.616vw), 1.5rem);  /* 10.2 / 17.1 / 24 / 24 — 아래에서 들어 올리는 거리 */
    /* 인트로가 걷힌 뒤 첫 화면 요소가 차례로 올라오는 간격·거리 */
    --enter-step: 0.14s;
    /* Magic UI 의 BlurFade 결 — 짧게 올라오며 흐림이 걷힌다 */
    --enter-shift: clamp(0.3187rem, calc(0.2571rem + 0.308vw), 0.75rem);  /* 5.1 / 8.5 / 12 / 12 */
    --enter-soft: blur(clamp(0.25rem, 0.31vw, 0.5rem));       /*   4 /   6 /   8 */
    --dur-enter: 0.62s;
    --enter-blur: blur(clamp(1.5rem, 1.88vw, 3rem));          /*  24 /  36 /  48 */
    --enter-zoom: 1.06;
    --dur-enter-media: 0.9s;                                  /* 영상이 초점을 찾는 시간 */
    --enter-lead: 0.85s;                                      /* 영상이 거의 또렷해진 뒤 나머지가 뒤따른다 */
    /* 히어로 → 다음 칸 — 앞 칸이 옅어지는 동안 다음 칸이 드러난다.
       예전에는 두 영상의 커튼 장면을 맞대어 이었다(--bridge-cue 36.5 · --bridge-rate 16 · --dur-lead 2.3).
       영상을 유튜브에 얹으면서 그 방식을 걷어냈다 — 빨리 감기가 두 배까지뿐이라 커튼 자리까지 몰아갈 수 없다.
       지금은 두 칸을 겹쳐 두고 밝기만 바꾸므로 이음매에 단색 면이 생기지 않는다 */
    --dur-cover: 1.1s;                                        /* 첫 화면이 그 자리에서 넘어가는 시간 */
    --dur-tube-out: 0.6s;                                     /* 앞 칸이 옅어지는 시간 */
    --dur-tube-in: 0.7s;                                      /* 다음 칸이 드러나는 시간 — 조금 길게 두어 뒤가 먼저 서 있게 한다 */

    /* 진행 표시 — 오른쪽 아래에서 가는 선이 차오른다 */
    --flow-nav-gap: clamp(0.6375rem, calc(0.5143rem + 0.616vw), 1.5rem);  /* 10.2 / 17.1 / 24 / 24 */
    --flow-nav-dim: 0.45;                                      /* 아직 지나지 않은 자리의 흐림 */
    /* 칸 번호 — 라벨(18)에서 두 단 올린 크기(28) */
    --flow-nav-fs: var(--fs-lead);
    /* 첫 화면 문장 · 다음 칸 글줄 · 진행 표시가 함께 서는 아래 선 —
       로고 위 여백과 같은 값으로 두어 위아래가 같은 자리에서 시작하고 끝난다(지시) */
    --flow-nav-bottom: var(--header-pad-y);
    /* 채널 아이콘과 진행 표시 사이 — 넓게 띄우되, 칸 안 사진 윗선과 겹치지 않는 선까지만 */
    /* 숫자 앞의 가는 선 — 인트로 게이지와 같은 결로, 지나온 만큼 차오른다 */
    --flow-nav-gauge-w: clamp(2.5rem, 4vw, 6.5rem);            /*  40 /  77 / 104 */
    --flow-nav-gauge-h: var(--line-w);
    --flow-nav-gauge-track: rgba(var(--color-white-rgb), 0.28); /* 아직 지나지 않은 자리 */
    --transition-fast: var(--dur-fast) var(--ease-out);
    --transition-base: var(--dur-base) var(--ease-out);
    --transition-slow: var(--dur-slow) var(--ease-out);
    /* 머리 띠가 걷히고 내려오는 결 — 0.5초로는 오르내림이 촐싹여 보인다(지시).
       한 박자 늦춰 한 번 움직일 때 차분히 지나가게 한다 */
    --dur-header: 1.05s;
    --transition-header: var(--dur-header) var(--ease-out);
    --transition-inout: var(--dur-slow) var(--ease-inout);   /* 천천히 밀고 천천히 멈춘다 */

    /* #################################### 12.Z-index #################################### */
    --z-base: 1;
    --z-sticky: 100;
    --z-header: 300;
    --z-drawer: 400;
    /* 첫 화면 덮개 — 가로 트랙 안에서만 쓰는 값이라 헤더·드로어와 겨루지 않는다 */
    --z-cover: 450;
    --z-modal: 500;
    --z-loader: 900;

    /* #################################### 13.Component #################################### */
    --btn-pad-y: var(--space-sm);
    --btn-pad-x: var(--space-lg);
    --btn-fs: var(--fs-body-sm);
    --focus-ring-w: clamp(0.125rem, 0.1vw, 0.1875rem);
    --focus-ring-offset: clamp(0.125rem, 0.1vw, 0.1875rem);
    --img-frame-bg: var(--color-surface);
    /* 그림이라 글꼴 배율을 따를 이유가 없다 - rem 으로 두면 브라우저 글꼴 2배에서 144px 가 되어
       320 화면의 머리 바를 밀어냈다 */
    --logo-w: clamp(72px, 4.6vw, 118px);                      /*  72 /  88 / 118 */
    /* 바닥 로고 — 원본이 456×237 이라 그보다 크게 세우면 획이 뭉갠다.
       고해상도 화면(2배)에서도 원본 안에서 그려지도록 상한을 원본 절반 밑으로 둔다 */
    --ft-logo-w: clamp(6rem, 7vw, 11rem);                     /*  96 / 134 / 176 */
    --ft-name-optic: clamp(-0.75rem, -0.55vw, -0.25rem);      /* 큰 이름의 왼쪽 여백 보정 (시각 정렬) */
    --logo-h: calc(var(--logo-w) * 0.5197);                   /* 원본 456 × 237 비율 */
    /* 전체메뉴 한 줄을 손 크기(44)까지 채우는 위아래 여백 — 글자 크기는 그대로다 */
    --menu-item-pad: clamp(0.425rem, calc(0.3786rem + 0.232vw), 0.75rem);  /* 6.8 / 9.4 / 12 / 12 */
    /* 전체메뉴(시안 C) — 아래쪽 가운데에 뜨는 판과 그 밑의 바 */
    /* 하한이 rem 이라 브라우저 글꼴을 키우면 판이 화면보다 넓어진다(글꼴 24px·320 에서 408px, 47px 넘침).
       화면을 넘지 않게 못 박는다 - 기본 글꼴에서는 아래 값이 그대로 쓰인다 */
    --menu-card-w: min(100%, clamp(17rem, 34vw, 40rem));      /* 272 / 490 / 640 */
    --menu-lead-fs: clamp(1.375rem, 1.87vw, 4.5rem);          /*  22 / 26.9 / 47.9 / 71.8 */
    --menu-bottom: clamp(1.4375rem, calc(0.8571rem + 2.902vw), 5.5rem);  /* 23 / 55.5 / 88 / 88 */
    --menu-film-h: clamp(10.5rem, 19.5vw, 24rem);             /* 168 / 374 / 384 — 판 위 영상 */
    --blur-bar: clamp(0.375rem, 0.55vw, 0.875rem);           /*   6 /  10 /  14 — 띠 뒤로 비치는 흐림의 세기 */
    --header-blur: blur(var(--blur-bar));                    /* 굴릴 때 머리 뒤로 비치는 흐림 */
    --header-bg-scroll: rgba(var(--color-white-rgb), 0.82);  /* 굴린 뒤 머리 바탕(뒤가 살짝 비친다) */
    --menu-blur: blur(clamp(0.75rem, 0.94vw, 1.5rem));        /*  12 /  18 /  24 — 뒤 화면을 깊게 흐린다 */
    /* 햄버거 줄 길이 — 누르는 자리(44)는 그대로 두고 보이는 줄만 잡는다.
       --space-md 를 그대로 쓰면 좁은 화면에서 18.7px 로 짧아진다(390 실측) */
    --menu-bar-w: clamp(2.25rem, 2.6vw, 3rem);                /*  36 / 37.4 /  48 /  48 */
    --menu-bar-shrink: 0.55;                                  /* 짚었을 때 줄이 남는 비율 — 48 → 26.4 */
    --menu-x-len: clamp(0.875rem, 1vw, 1.375rem);             /*  14 /  19 /  22 */
    --menu-icon: clamp(1.125rem, 1.25vw, 2rem);               /*  18 /  24 /  32 */
    --menu-bar-h: clamp(2.75rem, 3.1vw, 5rem);                /*  44 /  60 /  80 */
    --menu-lead-shift: clamp(0.3187rem, calc(0.2571rem + 0.308vw), 0.75rem);  /* 5.1 / 8.5 / 12 / 12 — 짚은 줄이 안으로 들어오는 거리 */
    /* 전체메뉴 배경 — 격자가 호흡하고 그 위를 빛띠가 지난다 (시안 C+D+I 조합) */
    --menu-grid-gap: clamp(2.1625rem, calc(1.3286rem + 4.17vw), 8rem);  /* 34.6 / 81.3 / 128 / 128 — 격자 한 칸 */
    --menu-grid-w: clamp(0.0625rem, 0.08vw, 0.125rem);        /*   1 /   2 /   2 — 격자 선 굵기 */
    --menu-grid-ink: rgba(var(--color-white-rgb), 0.22);
    --menu-beam-ink: rgba(var(--color-white-rgb), 0.2);
    --dur-menu-breath: 6s;                                    /* 격자가 한 번 떠올랐다 가라앉는 데 걸리는 시간 */
    --dur-menu-sweep: 7s;                                     /* 빛띠가 화면을 한 번 지나는 시간 */
    --tab-tap-pad: clamp(0.75rem, 1.7vw, 0.9375rem);          /*  12 /  15 /  15 — 분류 탭·링크를 손 크기로 채운다 */
    --ft-card-pad-x: clamp(2.125rem, calc(1.2356rem + 4.446vw), 4.1rem);  /*  34 /  65.6 /  65.6 /  65.6 — 푸터 상자 안쪽 좌우 */
                                                              /* 1024 에서 65.3 이 되게 잡아 그 위(--wrap-side 65.3)와 이음매가 없다 */
    --tab-tap-padx: clamp(0.625rem, 1.4vw, 1rem);             /*  10 /  13 /  16 — 짧은 이름도 손 크기가 되게 */
    /* 헤더 바가 실제로 차지하는 높이. 좁은 화면은 바 높이 그대로이고,
       데스크탑은 로고를 첫 화면 안쪽(--header-height 지점)에 세우므로 그만큼 두꺼워진다.
       메인·서브가 같은 값을 써야 페이지를 넘길 때 로고가 튀지 않는다 */
    --header-box-h: calc(var(--header-pad-y) + var(--logo-h) + var(--space-xs) + var(--tap-min) + var(--space-lg));
    /* 라인·필 애니메이션 기본값 (요소별로 오버라이드) */
    --fill-inset: auto 0 0 0;
    --fill-h: var(--line-w);
    --link-line-gap: clamp(0.25rem, calc(0.2149rem + 0.176vw), 0.5rem);  /* 4 / 6 / 7.9 / 8 — 글자 밑선과 밑줄 사이 */
    --fill-bg: var(--color-ink);
    /* 히어로 = 영상이 첫 화면을 통째로 채우고 타이포가 그 위 아래쪽에 모인다 */
    --quick-height: clamp(3.5rem, 3.65vw, 5.833rem);          /*  56 /  70 /  93 */
    --sub-hero-media-h: clamp(14rem, 34vw, 40rem);
    /* 서브 페이지 머리틀 — 제목·설명 길이가 페이지마다 달라도 본문은 늘 같은 자리에서 시작한다 */
    --loader-bar-w: var(--space-2xl);
    /* 최상단 Topnav 메뉴 — 첫 화면 전용이라 헤더 GNB 보다 크게 세운다 */
    /* 아래 한계(54)는 작은 PC 에서 과하게 커지지 않게 눌러 둔 값이라 그대로 둔다.
       위 한계만 늘려 2560 에서 멈추지 않고 4K 까지 화면과 함께 커지게 한다 */
    --topnav-fs: clamp(3.375rem, 3.52vw, 8.25rem);            /*  54 /  54 /  90 / 132 */
    --topnav-fw: 700;
    /* 대문자만 쓰므로 행상자 아래 빈 공간만큼 밑줄을 끌어올려 글자에 붙인다 (폰트의 0.19배) */
    --topnav-line-lift: clamp(0.5437rem, calc(0.4687rem + 0.375vw), 1.0688rem);  /* 8.7 / 12.9 / 17.1 / 17.1 */
    /* 배경음악 이퀄라이저 — 가늘고 촘촘한 막대가 중앙을 기준으로 퍼진다.
       1~2px 짜리 선을 소수점으로 두면 막대마다 걸치는 픽셀 수가 달라져 굵기가 제각각으로 번진다.
       화면 폭에 따라 자라는 것은 그대로 두고, 값만 픽셀 눈금에 떨어뜨린다 */
    --eq-snap: 1px;                                           /* 픽셀 눈금 */
    /* 1px 선은 화면이 커져도 그대로라 눈에 걸리지 않는다(390 실측 막대 1x3) —
       두께와 키를 화면과 함께 올리고 4K 까지 잇는다 */
    --eq-bar-w: round(clamp(0.125rem, 0.14vw, 0.25rem), var(--eq-snap));    /*   2 /   2 /   4 /   4 */
    --eq-bar-h: round(clamp(0.75rem, 0.74vw, 1.4375rem), var(--eq-snap));   /*  12 /  12 /  19 /  23 */
    --eq-gap: round(clamp(0.1875rem, 0.19vw, 0.3125rem), var(--eq-snap));   /*   3 /   3 /   5 */
    --dur-eq: 1.1s;
    /* 멈춰 있을 때 눕히는 정도 — 0.26 으로 두면 12px 막대가 3px 로 눌려 눈에 걸리지 않는다(390 실측).
       낮게 눕히되 다섯 줄이 보이는 선으로 올린다 */
    --eq-idle-scale: 0.42;
    --eq-idle: 0.7;                                           /* 멈춰 있을 때의 옅기 */
    --eq-play: 0.9;                                           /* 재생 중일 때의 옅기 */

    /* ------------------------------------------------------------------
       시안(확인판)에서 그대로 가져온 값 — 고른 시안을 1:1 로 옮기기 위한 것.
       임의로 바꾸지 않는다. 바꾸면 고른 화면과 달라진다.
    ------------------------------------------------------------------ */
    --seq-lock-dur: 1.15s;                               /* 심볼이 다 그려질 때까지 */
    --seq-mid-grow: 1.8;                                 /* 가운데 칸이 양옆보다 넓다 */
    --seq-ruler-h: clamp(0.5rem, 0.6vw, 0.875rem);       /* 자 눈금 줄 높이 */
    --seq-ruler-gap: clamp(0.7188rem, calc(0.5714rem + 0.737vw), 1.75rem);  /* 11.5 / 19.8 / 28 / 28 */
    --seq-fold-grow: 4;                                  /* 고른 띠가 넓어지는 배수 */
    --seq-vol-w: clamp(3rem, 4vw, 6rem);                 /* 권 번호 자리 */
    --seq-huge-fs: clamp(2.5rem, calc(0.256rem + 6.714vw), 12.875rem);  /*  40 / 100.8 / 176 / 206 — 화면만큼 크게 세우는 글자 */
    /* 본문 한 단 — 화면이 아무리 넓어도 한글 최장 줄이 45자를 넘지 않게 상한을 둔다 */
    --seq-read-max: min(calc(var(--grid-col) * 12 + var(--grid-gap) * 11), 54rem);
    --seq-alt-shot-w: calc(var(--grid-col) * 11 + var(--grid-gap) * 10); /* 사진 사이 글에서 사진 폭 */
    /* 표지 한 권을 크게 세우는 자리(칸06) — 판형 1100 × 1557 을 그대로 지킨다 */
    /* 세로로 긴 표지 — 폭만 화면 너비에 맞추면 넓고 낮은 화면에서 위아래가 칸 밖으로 나간다.
       화면 높이 상한을 같은 비율(1 : 1.409)로 함께 걸어 둔다 */
    --seq-book-big-w: min(clamp(11rem, 22vw, 36rem), 36.9vh);   /* 176 / 563 / 576 */
    --seq-book-big-h: min(clamp(15.5rem, 31vw, 48rem), 52vh);   /* 248 / 794 / 768 */
    /* 칸05 는 글 두 단과 장면이 한 화면을 나눠 쓴다. 2K 에서 본문 상한(22)까지 커지면
       글만으로 화면이 차 장면이 사라지므로, 이 칸의 글에만 낮은 상한을 둔다 */
    --seq-ask-para-fs: clamp(1rem, calc(0.75rem + 0.2344vw), 1.3125rem);  /*  16 /  16 /  18 /  21 */
    --seq-ask-para-gap: clamp(0.6375rem, calc(0.5143rem + 0.616vw), 1.5rem);  /* 10.2 / 17.1 / 24 / 24 — 글 사이 */
    /* 칸05 은 한 화면 안에 제목·두 단·장면을 모두 담는다. 공통 여백(2xl)을 위아래로 쓰면
       2K 에서만 307px 을 먹어 남은 자리가 모자랐다(칸 밖 265px). 이 칸만 상한을 낮춘다 */
    --seq-ask-pad-y: clamp(1.8rem, calc(1.3071rem + 2.464vw), 5.25rem);  /* 28.8 / 56.4 / 84 / 84 */
    --seq-ask-quote-pad: clamp(0.9rem, calc(0.6536rem + 1.232vw), 2.625rem);  /* 14.4 / 28.2 / 42 / 42 — 인용 상자 안쪽 */
    --seq-ct-pad-y: clamp(1.4375rem, calc(1.0714rem + 1.83vw), 4rem);  /* 23 / 43.5 / 64 / 64 — 상담 칸 위아래 */
    --seq-ct-gap: clamp(1.0813rem, calc(0.7357rem + 1.728vw), 3.5rem);  /* 17.3 / 36.7 / 56 / 56 — 걸음·보내기 사이 */
    --seq-mg-pad-y: clamp(1.0813rem, calc(0.7rem + 1.906vw), 3.75rem);  /* 17.3 / 38.6 / 60 / 60 — 매거진 칸 위아래 */

    /* 서브 페이지 */
    --cursor-preview-w: clamp(9rem, 13vw, 17rem);
    --cursor-preview-h: clamp(6rem, 9vw, 12rem);
    --view-hero-media-h: clamp(16rem, 42vw, 50rem);
    --view-copy-lg-w: clamp(18rem, 58vw, 66rem);             /* 288 / 835 / 1056 — 보기 화면에서 크게 세우는 문장의 폭 */
    --view-pair-media-w: clamp(12rem, 26vw, 34rem);          /* 192 / 374 / 544 — 글 옆에 세우는 장면 */
    --view-pair-media-h: clamp(12rem, 20vw, 26rem);
    --view-pair-tall-h: clamp(16rem, 30vw, 40rem);           /* 세로로 긴 쪽 */
    --view-rail-item-w: clamp(14rem, 24vw, 32rem);           /* 갤러리 띠 — 한 장 */
    --view-rail-item-wide-w: clamp(20rem, 38vw, 50rem);      /* 세 장마다 넓게 서는 장 */
    --view-rail-item-h: clamp(12rem, 26vw, 34rem);

    /* 레퍼런스 구조 이식 — 라벨은 좌측 3칸 고정, 미디어는 크기를 전부 다르게 */
    /* 시공사례 가로 아코디언 — 좁은 띠가 나란히 서 있다가 고른 띠만 넓어진다 */
    --fold-plus-size: clamp(1rem, 1.05vw, 1.75rem);          /*  16 /  20 /  28 — + 크기 */
    /* 매거진 표지 한 권 — 판형 1100x1557 을 그대로 세운다 */
    /* 손가락 굵기는 글꼴 배율을 안 탄다 - rem 으로 두면 브라우저 글꼴 2배에서 88px 가 되어
       머리 바와 단추가 함께 부푼다(--hit-min 과 같은 이유로 px 로 못 박는다) */
    --tap-min: clamp(44px, 2.9vw, 56px);                     /*  44 /  56 /  56 — 손으로 누르는 최소 자리 */
    --rail-fade: clamp(1.8rem, calc(1.3429rem + 2.286vw), 5rem);  /* 28.8 / 54.4 / 80 / 80 — 굴러가는 줄의 위아래가 흐려지는 폭 */
    /* 16px 은 손으로 겨냥하기에 작다 — 누를 자리(44)는 그대로 두고 보이는 아이콘을 키운다 */
    --sns-icon-size: clamp(1.5rem, 1.25vw, 2rem);            /*  24 /  24 /  32 /  32 — 바깥 채널 아이콘 */
    --dur-loader-lift: 1.1s;                                 /* 인트로 커튼이 위로 걷히는 시간 */
    --dur-loader-out: 0.32s;                                 /* 커튼보다 먼저 안쪽 것이 옅어지는 시간 */
    --dur-loader-step: 0.14s;                                /* 진행 게이지가 다음 값까지 따라가는 시간 */
    --dur-cookie: 0.55s;                                     /* 쿠키 띠가 올라오고 사라지는 시간 */
    --cookie-ico: calc((var(--fs-body-sm) * var(--lh-body)) + (var(--fs-caption) * var(--lh-caption)));   /* 글 두 줄 높이에 맞춘 쿠키 아이콘 */
    --cookie-bar-pad: clamp(1.25rem, calc(0.93rem + 1.6vw), 2.75rem);  /* 20 / 38 / 44 / 44 — 쿠키 띠 위아래 여백 */
    --cookie-btn-pad: clamp(0.5312rem, calc(0.4643rem + 0.335vw), 1rem);  /* 8.5 / 12.3 / 16 / 16 */
    --cookie-btn-padx: clamp(0.7188rem, calc(0.5357rem + 0.915vw), 2rem);  /* 11.5 / 21.7 / 32 / 32 */
    /* 띠 뒤가 비쳐야 흐림이 보인다 — 거의 불투명(0.96)이면 흐림을 걸어도 티가 나지 않는다 */
    /* 레이어 팝업 — 첫 화면에 띄우는 안내창. 여러 장이면 나란히 서고 좁아지면 접어 내린다 */
    /* 서브 머리 줄 메뉴 — 로고와 햄버거 사이에 한 줄로 선다 */
    --subnav-gap: clamp(1.25rem, calc(0.9rem + 1.1vw), 3rem);       /* 20 / 36 / 48 / 62 - 항목 사이 */
    --subnav-fs: clamp(0.75rem, calc(0.68rem + 0.32vw), 1.25rem);   /* 12 / 17 / 20 / 24 - 글자 */
    --subnav-fw: 500;
    --subnav-line: clamp(0.0625rem, 0.08vw, 0.125rem);              /* 1 / 1 / 2 / 2 - 밑줄 두께 */
    --subnav-lift: clamp(-0.5rem, -0.35vw, -0.25rem);               /* 밑줄이 글자에서 떨어지는 자리 */

    --pop-w: clamp(16rem, 84vw, 30rem);                      /* 256 / 384 / 480 / 480 - 창 한 장 폭 */
    --pop-veil: rgba(var(--color-white-rgb), 0.72);           /* 뒤를 가리는 흰 막 */
    --pop-blur: var(--blur-bar);
    --pop-pad: clamp(1rem, calc(0.83rem + 0.86vw), 2.75rem);  /* 16 / 28 / 38 / 44 - 창 안 여백 */
    --pop-shot-h: clamp(9rem, calc(6.5rem + 12.5vw), 26rem);  /* 144 / 220 / 296 / 416 - 그림 자리 */
    --pop-gap: var(--space-md);
    --dur-pop: 0.45s;                                         /* 창이 뜨고 스러지는 시간 */
    --pop-rise: clamp(0.75rem, 1.2vw, 1.5rem);                /* 뜰 때 아래에서 올라오는 거리 */
    --pop-step: 0.12s;                                        /* 창이 한 장씩 차례로 떠오르는 사이 */
    --pop-turn: 0;                                            /* 몇 번째로 뜨는가 (JS 가 넣는다) */
    --pop-foot-gap: clamp(1.25rem, calc(0.9rem + 1.1vw), 3rem);  /* 20 / 34 / 45 / 56 - 창과 아래 줄 사이 */
    --pop-f-pad: clamp(0.875rem, calc(0.72rem + 0.78vw), 2.25rem);  /* 14 / 24 / 33 / 42 - 창 아래줄 위아래 여백(같은 값) */
    --pop-line-gap: clamp(0.375rem, calc(0.29rem + 0.42vw), 1.125rem);  /* 6 / 12 / 17 / 21 - 글과 밑줄 사이 */
    --pop-nav-gap: clamp(1rem, calc(0.72rem + 1.4vw), 3.25rem);  /* 16 / 33 / 46 / 60 - 넘김 화살표 사이 */
    --pop-arw-ico: clamp(0.75rem, calc(0.66rem + 0.42vw), 1.375rem);  /* 12 / 18 / 23 / 28 - 화살표 그림 크기 */
    --pop-go: clamp(2.25rem, calc(1.93rem + 1.6vw), 4.5rem);   /* 36 / 55 / 72 / 90 - 누르면 갈 곳을 알리는 정원 */
    --pop-go-ico: clamp(0.875rem, calc(0.75rem + 0.63vw), 1.75rem);  /* 14 / 21 / 28 / 35 - 그 안 화살표 */
    --pop-go-inset: clamp(0.625rem, calc(0.52rem + 0.52vw), 1.5rem);  /* 10 / 17 / 23 / 29 - 볼 것 칸 모서리에서 띄우는 거리 */
    --pop-go-run: 1.6em;                                        /* 화살표가 원 밖으로 나가는 거리 */
    --dur-pop-go: 2.4s;                                         /* 화살표가 한 번 지나가는 시간 */
    --pop-gap-in: clamp(0.75rem, calc(0.62rem + 0.65vw), 1.875rem);  /* 12 / 20 / 27 / 34 - 창 안 조각 사이 */
    --pop-air-bg: var(--color-surface);                         /* 볼 것이 없을 때 그 자리를 지키는 면 */
    --pop-air-beam: rgba(var(--color-ink-rgb), 0.16);           /* 그 면을 천천히 지나는 빛줄기 */
    --pop-air-beam-2: rgba(var(--color-white-rgb), 0.8);        /* 뒤따르는 밝은 줄기 */
    --dur-pop-air-2: 11s;                                       /* 뒤따르는 줄기는 더 느리게 */
    --pop-air-fall: rgba(var(--color-white-rgb), 0.55);         /* 위에서 내려앉는 빛 — 사진의 결과 같게 */
    --pop-air-run: 200%;                                        /* 빛줄기 무늬 한 벌의 폭 — 넓을수록 줄기가 굵고 느긋하다 */
    --pop-air-mark: clamp(4.5rem, calc(3.6rem + 4.5vw), 11rem);  /* 72 / 126 / 166 / 202 - 빈 칸 가운데에 서는 심볼 */
    --pop-air-mark-fade: 0.32;                                  /* 심볼은 바탕에 잠기듯 옅게 둔다 */
    --dur-pop-air: 7s;                                          /* 빛줄기가 한 번 지나가는 시간 */
    --pop-arw: clamp(2rem, 2.4vw, 2.75rem);                   /* 쪽 넘김 화살표 */
    --pop-dot: clamp(0.375rem, 0.5vw, 0.5rem);                /* 쪽 표시 점 */

    --cookie-bar-bg: rgba(var(--color-white-rgb), 0.72);
    --cookie-blur: var(--blur-bar);
    --flow-nav-side-gap: clamp(0.6375rem, calc(0.4786rem + 0.795vw), 1.75rem);  /* 10.2 / 19.1 / 28 / 28 — 배경음악 막대와 칸 숫자 사이 */
    --sns-hover-dim: 0.5;                                     /* 손을 얹었을 때 옅어지는 정도 */
    --media-mid-h: clamp(14rem, 26vw, 42rem);
    --media-tall-h: clamp(20rem, 34vw, 54rem);               /* 세로로 긴 장면 — 글 옆에 세울 때 */
    --works-tab-w: clamp(7rem, 10.4vw, 16rem);               /* 112 / 200 / 256 — 왼쪽에 세워 둔 분류 폭 */
    --works-tab-gap: clamp(1.4375rem, calc(0.2143rem + 6.116vw), 10rem);  /* 23 / 91.5 / 160 / 160 — 분류와 목록 사이 */
    --works-total-size: clamp(4.5rem, 5.6vw, 8.5rem);        /*  72 / 108 / 136 — 담아온 곳 수를 담은 정원. 첫머리 틀을 줄인 만큼 원도 줄여 목록과 겹치지 않게 */
    /* 좁은 화면에서는 첫머리 아래 흐름 안으로 내려오므로 겹칠 일이 없다 — 그만큼 키운다(지시) */
    --works-total-size-mo: clamp(7rem, 28vw, 10rem);         /* 112 / 112 / 160 */
    --bd-badge-size: clamp(3rem, 3.9vw, 6rem);               /*  48 /  75 /  96 — 소식 줄 오른쪽 정원 */
    --ct-map-h: clamp(18rem, 26vw, 40rem);                   /* 288 / 500 / 640 — 지도 높이 */
    --ct-map-mini-h: clamp(11rem, 15vw, 22rem);              /* 176 / 288 / 352 — 메인 칸 안 지도 */
    --ct-place-mini-w: clamp(30rem, 55vw, 88rem);            /* 480 / 792 / 1408 / 1408 — 메인 지도 묶음 폭. 폭을 놓아 두면 2560 에서 1952x352(5.5:1) 짜리 띠가 된다 */
    --ct-aside-w: clamp(20rem, 30vw, 40rem);                /* 320 / 432 / 640 / 640 — 메인 상담 칸 오른쪽 단(지도) 폭 */
    --ct-map-side-h: clamp(13rem, 19vw, 26rem);             /* 208 / 274 / 416 / 416 — 오른쪽 단에 세울 때 지도 높이 */
    --ct-info-mini-w: clamp(9rem, 14vw, 22rem);              /* 144 / 269 / 352 — 그 옆 정보 폭 */
    --ct-info-w: clamp(14rem, 24vw, 36rem);                  /* 224 / 461 / 576 — 지도 옆 정보 폭 */
    --mag-sets-w: clamp(14rem, 17.5vw, 26rem);               /* 224 / 336 / 416 — 왼쪽 묶음 자리 폭(표지 판형 그대로 세우고 조작 줄까지 화면에 담기는 폭) */
    --mag-rest-w: clamp(15rem, 21vw, 30rem);                /* 240 / 403 / 480 — 지난 합본 책장 칸(글이 접히지 않을 폭) */
    --mag-rest-pad: clamp(0.9rem, calc(0.6714rem + 1.143vw), 2.5rem);  /* 14.4 / 27.2 / 40 / 40 */
    --mag-rest-h: calc(100vh - var(--header-box-h) - var(--space-lg) - var(--space-2xl) - var(--mag-rest-pad) * 2 - var(--space-2xl));
    --mag-rest-thumb: clamp(3.75rem, 5vw, 5.5rem);           /*  60 /  96 /  88 — 한 줄에 서는 합본 그림(옆으로 눕혀 여러 권이 한눈에) */
    --mag-rest-h-narrow: clamp(19rem, 44vw, 26rem);          /* 304 / 422 / 416 — 쌓인 화면에서 합본 목록이 쓰는 자리 */
    --mag-bar-w: clamp(0.1875rem, 0.23vw, 0.25rem);          /*   3 /   4 /   4 — 합본 목록 오른쪽 제 막대 굵기 */
    --mag-bar-thumb-min: clamp(1.5rem, 2vw, 2.5rem);         /*  24 /  38 /  40 — 손잡이가 이보다 짧아지면 잡히지 않는다 */
    --mag-bar-hint-h: clamp(1.25rem, 1.6vw, 2rem);           /*  20 /  31 /  32 — 굴리라고 알리는 동안의 짧은 손잡이 */
    --mag-bar-fade: 14%;                                     /* 막대 양 끝이 사라지기 시작하는 자리 */
    --dur-mag-hint: 2.6s;                                    /* 안내 손잡이가 한 번 흘러내리는 시간 */
    --dur-mag-bar: 0.6s;                                     /* 막대가 스러지고 다시 떠오르는 시간 — 짧으면 깜빡이는 것처럼 보인다 */
    --mag-slide-shift: clamp(1.0813rem, calc(0.7357rem + 1.728vw), 3.5rem);  /* 17.3 / 36.7 / 56 / 56 — 장이 아래에서 올라오는 거리 */
    --mag-dot: clamp(0.375rem, 0.35vw, 0.5rem);              /*   6 /   7 /   8 */
    /* 점 사이가 곧 눌리는 자리다(점 + 사이 여백까지가 손 자리라 옆 점을 침범하지 않는다).
       6.8~14 로 두면 손 자리가 16~22px 밖에 안 나와, 좁은 화면(24~28px)보다 넓은 화면이
       오히려 좁아지는 뒤집힘이 생긴다(1440 실측 16px) — 넓은 화면 쪽을 올려 맞춘다 */
    --mag-dot-gap: clamp(1.125rem, calc(1.0536rem + 0.1116vw), 1.375rem);  /* 18 / 18.5 / 19.7 / 22 — 점 사이(눌리는 자리도 이만큼) */
    --mag-arrow: clamp(0.5rem, 0.55vw, 0.875rem);            /*   8 /  11 /  14 */
    /* 하한이 rem 이라 글꼴 2배에서 384px 가 되어 화면(320)을 넘었다 - 화면을 못 넘게 못 박는다 */
    --btn-wide-w: min(100%, clamp(12rem, 18vw, 22rem));      /* 홀로 서는 단추의 폭 */
    --symbol-size: clamp(5rem, 7.5vw, 12rem);

    /* 스타일 — 무드마다 미디어 높이가 다르다 */
    /* 스타일 가로 띠 — 한 칸 폭과, 어디쯤인지 알려 주는 캡슐 */
    --style-rail-w: clamp(15rem, 24vw, 38rem);               /* 240 / 461 / 608 */
    /* 아티클 — 왼쪽 목차와 읽는 자리. 사이를 넓게 벌려 가운데를 비운다 */
    /* 미디어 — 왼쪽 영상 목록과 오른쪽 자료 칸, 그리고 영상 보기 창 */
    /* 소식 — 크게 세운 첫 글과 공지 줄 */
    --about-card-basis: clamp(12rem, 20vw, 32rem);           /* 192 / 384 / 512 — 지키는 것 카드 한 장 */
    --view-figure-basis: clamp(8rem, 14vw, 22rem);           /* 128 / 269 / 352 — 크게 세우는 수치 한 칸 */
    --works-lead-grow: 2;                                    /* 묶음에서 큰 사진이 차지하는 배수 */
    /* 좁은 화면에서 두 칸씩 접어 내릴 때의 한 칸 */
    --bd-date-w: clamp(4.5rem, 6vw, 9.5rem);                 /*  72 / 115 / 152 — 게시판 날짜 칸 */
    /* 목록 줄은 훑는 자리다 — 여백을 본문 여백(space-lg 70px)에 맡기면 2K 에서 한 줄이 237px 이 된다 */
    --bd-row-pad-y: clamp(1rem, calc(0.86rem + 0.7vw), 2.54rem);  /* 16 / 23.8 / 31.7 / 40.6 — 목록 줄 위아래 */
    --bd-row-gap: clamp(2rem, calc(1.5rem + 2.5vw), 4.5rem);  /* 32 / 60 / 72 / 72 — 날짜·제목·표시 사이 */
    --bd-key-w: clamp(2.75rem, 3.5vw, 5.5rem);               /*  44 /  67 /  88 — 정보 항목 이름 */
    --media-col-gap: clamp(1.8rem, calc(0.9143rem + 4.429vw), 8rem);  /* 28.8 / 78.4 / 128 / 128 */
    --media-shot-w: clamp(8rem, 15vw, 24rem);                /* 128 / 288 / 384 */
    /* 글이 이만큼도 못 받으면 표지 아래로 접힌다 - 손가락 자리처럼 읽기 최소치라 폭을 안 탄다
       (320 에서 글칸이 150px 로 눌려 한 줄에 한글 8자만 들어갔다) */
    --media-text-min: 13rem;
    --media-shot-h: clamp(5rem, 9.4vw, 15rem);               /*  80 / 180 / 240 */
    --media-play-size: clamp(0.75rem, 0.8vw, 1.25rem);       /*  12 /  15 /  20 */
    --media-files-w: clamp(13rem, 21vw, 34rem);              /* 208 / 403 / 544 */
    /* 상자에서 영상 말고 자리를 차지하는 것 — 위아래 여백 두 번, 영상과 제목 사이 틈,
       제목 한 줄, 그리고 화면에 닿지 않게 두는 숨돌릴 자리 */
    --vplay-room: calc(var(--space-lg) * 2 + var(--space-md) + var(--fs-body-sm) * var(--lh-body) + var(--space-sm));
    /* 위 한계 90rem 은 2560 에서 이미 닿아 4K 에서는 화면의 37% 로 쪼그라들었다(실측).
       1440 에서 64% 인 비율을 4K 까지 그대로 이어 가도록 한계를 늘린다.
       폭만 보고 정하면 화면이 낮을 때 상자가 위아래로 잘린다(1280x400 실측 78px 잘림) —
       영상(16:9)에 위 자리를 더한 높이가 화면 안에 들어오는 폭까지만 쓴다 */
    --vplay-w: min(clamp(18rem, 64vw, 154rem),
                   calc((100svh - var(--vplay-room)) * 16 / 9 + var(--space-lg) * 2));  /* 288 / 921.6 / 1638 / 2457.6 */
    --vplay-blur: clamp(0.5rem, 0.8vw, 1.25rem);             /*   8 /  15 /  20 */
    --vplay-veil: rgba(var(--color-ink-rgb), 0.72);
    --vplay-pop-from: 0.94;                                  /* 떠오르기 전 상자 크기 — 1 에 가까울수록 조용히 나타난다 */
    /* 첫 화면 영상을 눌러 흰 글씨를 읽히게 하는 막.
       가운데가 얇으면 밝은 장면(커튼·창)에서 메뉴 글자가 묻힌다 — 실측 2.22 */
    --hero-scrim-top: rgba(var(--color-ink-rgb), 0.42);
    --hero-scrim-mid: rgba(var(--color-ink-rgb), 0.4);
    --hero-scrim-bottom: rgba(var(--color-ink-rgb), 0.46);
    /* 사진·영상 위에 얹는 흰 글씨의 그림자 — 막만으로는 밝은 장면에서 획이 묻힌다.
       칸02 문장과 첫 화면 문장이 같은 것을 쓴다 */
    --on-media-shadow: 0 var(--line-w) var(--space-sm) rgba(var(--color-ink-rgb), 0.4);
    --vplay-close-size: clamp(3rem, 3.6vw, 5.5rem);          /*  48 /  69 /  88 */
    --vplay-mark-size: clamp(1.25rem, 1.5vw, 2.25rem);       /*  20 /  29 /  36 */
    --art-toc-w: clamp(9rem, 13vw, 21rem);                   /* 144 / 250 / 336 */
    --art-toc-gap: clamp(1.8rem, calc(0.4857rem + 6.571vw), 11rem);  /* 28.8 / 102.4 / 176 / 176 */
    --art-toc-top: clamp(4.3187rem, calc(3.2214rem + 5.487vw), 12rem);  /* 69.1 / 130.6 / 192 / 192 */
    /* 읽는 단 — 화면이 넓어도 한글 한 줄이 45자를 넘지 않게 글자 폭으로 상한을 건다.
       ch(숫자 0 의 폭)는 글꼴에서 한글 한 자보다 좁아 작은 글씨에서 줄이 길어졌다(16px 에서 56자).
       한글 한 자 ≒ 1em 이므로 em 으로 잰다 — 좁은 화면은 더 짧게, 넓어도 45자에서 멈춘다 */
    /* 읽는 글줄 상한 — em 은 글자 수가 아니다. 한글 한 자가 0.74em 쯤이라
       45em 은 한글 62자가 된다(3840 실측). 45자에서 끊으려면 45 x 0.74 = 33em */
    --read-ko-cap: clamp(20em, 42vw, 33em);                  /* 한글 27 ~ 45자 */
    --art-read-cap: 63ch;                                    /* 매거진 본문 폭 계산에 쓰는 값 */
    --art-body-w: min(clamp(18rem, 44vw, 60rem), var(--art-read-cap));
    --art-side-w: clamp(11rem, 17vw, 28rem);                 /* 176 / 435 / 448 — 오른쪽에 세우는 장면 */
    --art-side-h: clamp(15rem, 23vw, 38rem);                 /* 240 / 589 / 608 — 판형 3:4 */
    --mag-cover-h: clamp(18.4rem, 28.3vw, 45.3rem);          /* 294 / 543 / 725 — 판형 1100x1557 */
    --mag-cover-ratio: 141.5;                                /* 1557 ÷ 1100 — 표지 높이를 제 칸 폭에서 뽑는 비율(%) */
    --mag-cover-min: clamp(11rem, 16vw, 26rem);              /* 176 / 307 / 416 — 표지가 양보해도 이보다 작아지지 않는다 */
    /* 위아래로 쌓인 화면에서 넘겨 보는 표지가 쓰는 자리 - 상한이 낮으면 넓은 쌓기 구간에서
       표지만 작아진다(1440 실측 칸 1296 에 표지 317 = 24%). 41% 안팎을 지키게 올려 잡는다 */
    --mag-cover-stack: clamp(13rem, 52vw, 36rem);            /* 208 / 399 / 576 */
    --mag-cover-solo: clamp(18.75rem, calc(11.6rem + 35.7vw), 35rem);  /* 300 / 560 / 560 / 560 — 한 장으로 세울 때 표지 높이 */
    --mag-cover-solo-w: calc(var(--mag-cover-solo) * 0.706);  /* 표지 원판 1100x1557 비율 — 높이에 맞춰 폭을 낸다 */
    --mag-cover-side: clamp(10rem, 24vw, 17rem);             /* 160 / 197 / 272 — 글 옆에 세울 때 표지 폭 */
    --rail-gauge-w: clamp(9rem, 14vw, 22rem);                /* 144 / 269 / 352 */
    --rail-gauge-h: clamp(0.1875rem, 0.2vw, 0.375rem);       /*   3 / 5.12 /   6 — 지시로 한 단 얇게 */
    --dur-rail-hint: 2.8s;                                   /* 손잡이가 선 위를 한 번 오가는 시간 */
    --rail-hint-bg: rgba(var(--color-white-rgb), 0.72);       /* 띠 위에 얹히는 안내 바탕(뒤가 비친다) */
    --rail-hint-fade: 22%;                                   /* 판 양 끝이 사진으로 스며드는 폭 */
    --rail-hint-blur: blur(clamp(0.375rem, 0.55vw, 0.875rem)); /*   6 /  10 /  14 - 안내 뒤 흐림 */
    --rail-hint-pad: clamp(0.7188rem, calc(0.5357rem + 0.915vw), 2rem);  /* 11.5 / 21.7 / 32 / 32 - 판 사방 여백(한 값) */
    --rail-hint-pad-b: clamp(0.6375rem, calc(0.5143rem + 0.616vw), 1.5rem);  /* 10.2 / 17.1 / 24 / 24 - 판 아래 여백(눈에 맞춘 값) */
    --rail-hint-w: clamp(5rem, 6.5vw, 9rem);                 /*  80 / 125 / 144 - 손잡이가 오가는 선의 길이 */
    --rail-hint-knob: clamp(1.25rem, 1.6vw, 2rem);           /*  20 /  31 /  32 - 선 위를 오가는 손잡이 */
    --rail-hint-knob-h: calc(var(--line-w) * 3);              /* 3px - 선 두께의 배수라야 위아래가 정수로 갈린다 */
    /* 안내 글자 — 0.5vw 로만 두면 2000px 아래가 전부 최소값 10px 에 눌려 붙는다(실측).
       작은 라벨이라도 10px 는 눈에 걸리므로 12px 에서 시작해 4K 까지 이어 올린다 */
    --rail-hint-fs: clamp(0.75rem, calc(0.723rem + 0.1235vw), 1rem);  /* 12 / 13.3 / 14.7 / 16 - 안내 글자 */
    --rail-hint-lh: 0.72;                                    /* 라벨 줄 상자 - 대문자 키에 맞춘다 */
    --rail-hint-ls: clamp(0.16em, 0.2vw, 0.2em);             /* 안내 글자 자간 */
    --rail-hint-line: rgba(var(--color-ink-rgb), 0.35);      /* 활성 막대가 지나가는 배경선 */
    /* 가운데가 짙고 양 끝으로 갈수록 비치는 밝은 회색 */
    --rail-gauge-bg: linear-gradient(
        to right,
        rgba(var(--color-ink-rgb), 0) 0%,
        rgba(var(--color-ink-rgb), 0.12) 22%,
        rgba(var(--color-ink-rgb), 0.12) 78%,
        rgba(var(--color-ink-rgb), 0) 100%
    );
    --style-media-lg: clamp(19rem, 38vw, 61rem);
    --style-media-md: clamp(15rem, 29vw, 46rem);
    --style-media-sm: clamp(12rem, 21vw, 34rem);

    /* 쌓인 화면에서 시공사례 사진 자리 - 폭은 화면의 90% 인데 높이가 21vw 에 묶여
       768 에서 691x192(3.6:1) 파노라마로 잘렸다. 폭을 따라 높이도 늘려 판형을 지킨다 */
    --works-stack-sm: clamp(12rem, 54vw, 35rem);             /* 192 / 415 / 553 */

    /* 같은 이유로 쌓인 화면에서 판형이 무너지던 사진 칸들 - 폭은 화면의 90% 인데
       높이가 20~34vw 에 묶여 768 에서 2.7~3.1:1 로 잘렸다. 320 판형을 그대로 이어 간다 */
    --about-stack-alt: clamp(14rem, 70vw, 45rem);            /* 224 / 538 / 717 - 1.29:1 */
    --about-stack-letter: clamp(20rem, 100vw, 48rem);        /* 320 / 768 / 768 - 0.9:1 */
    --view-stack-pair: clamp(16rem, 80vw, 45rem);            /* 256 / 614 / 720 - 1.13:1 */
    --art-stack-side: clamp(15rem, 75vw, 45rem);             /* 240 / 576 / 720 - 1.2:1 */
    --style-mat-pad: clamp(0.425rem, calc(0.3607rem + 0.321vw), 0.875rem);  /* 6.8 / 10.4 / 14 / 14 */

    /* 매거진 */
    --mag-item-gap: clamp(1.8rem, calc(1.2357rem + 2.821vw), 5.75rem);  /* 28.8 / 60.4 / 92 / 92 */

    /* 상담 */
    --contact-row-pad: clamp(0.6312rem, calc(0.4714rem + 0.799vw), 1.75rem);  /* 10.1 / 19 / 28 / 28 */
}

/* #################################### 14.Responsive — 토큰 재정의 #################################### */
/* selector 재선언 없이 :root 변수만 갱신한다 */

@media (min-width: 1025px) {
    :root {
    }
}

/* 글자가 커지면 같은 비율이라도 줄 사이가 그만큼 벌어져 문단이 흩어져 보인다 —
   큰 화면에서는 비율을 내려 줄 사이를 눈에 맞춘다.
   실측(글자 / 줄 사이): 본문 1024 20.4px/12.2 · 2560 27.9/16.7 · 3840 34.2/20.5,
   설명 1024 15.3/11.9 · 2560 18/14.1 · 3840 20.4/15.9 — 비율이 1.6 / 1.78 로 묶여 있었다.
   행간은 단위 없는 수라 clamp 로 잇지 못한다. 화면 구간으로 두 번 나눠 내린다 */
@media (min-width: 1441px) {
    :root {
        --lh-lead: 1.52;
        --lh-body: 1.66;
    }
}

@media (min-width: 2561px) {
    :root {
        --lh-lead: 1.46;
        --lh-body: 1.62;
    }
}

@media (max-width: 1024px) {
    :root {
        /* 영상 상자가 하한 18rem(288px) 에 걸려 화면의 59% 밖에 안 됐다(390 실측) —
           좁은 화면에서는 폭을 거의 다 쓰게 넓힌다(지시) */
        --vplay-w: min(92vw, calc((100svh - var(--vplay-room)) * 16 / 9 + var(--space-lg) * 2));

        /* 좁은 화면은 본문을 조금 더 좁혀 좌우 숨 쉴 자리를 넓힌다(지시) */
        --wrap-ratio: 85;

    /* 손으로 굴리는 화면에서는 1.2초가 길다 — 다 뜨기 전에 글이 화면을 지나가
       자리가 비어 보인다. 짧게 잡아 도착과 함께 읽히게 한다 */
    --dur-reveal: 0.7s;

        /* 좁은 화면은 글이 더 여러 줄로 갈린다 — 바닥만 조금 낮춰 두고 모자라면 스스로 늘어난다.
           여백 토큰은 기본값이 폭을 따라 이어지므로 여기서 다시 잡지 않는다
           (다시 잡으면 768 이 1024 보다 넓어지는 역전이 생긴다 — 실측 65 vs 57) */

        /* 읽는 단 폭은 24칸 격자의 절반이다 — 격자가 풀린 좁은 화면에서도 절반을 강요해
           288px 칸에 141px 만 쓰고 한 줄에 한글 9자, 열 줄로 갈렸다(320 실측).
           여기서는 칸을 다 쓰되 눈이 되돌아올 자리를 잃지 않게 한글 40자에서 끊는다
           (그냥 풀면 1024 에서 한 줄 52자가 된다).
           em 은 글자 수가 아니다 — 한글 한 자가 0.74em 쯤이라 40em 은 54자가 된다(1024 실측).
           40자로 끊으려면 40 x 0.74 = 30em 이어야 한다 */
        --seq-read-max: 30em;

        /* 좁은 화면도 로고 아래 채널 아이콘 줄이 그대로 선다 — 바가 그만큼 두꺼워야 로고가 잘리지 않는다 */
    }
}

@media (max-width: 768px) {
    :root {
        --fw-body: 450;
        --fw-lead: 450;
        /* 한 줄이 짧아지는 만큼 행간을 좁힌다 - 넓은 화면 값(1.78) 그대로 두면 줄이 떠 보인다 */
        --lh-body: 1.74;
        --lh-lead: 1.62;
        --lh-title: 1.34;
        --header-height: clamp(3.5rem, 14vw, 4.5rem);
    }
}

@media (max-width: 480px) {
    :root {
        /* 푸터 상자에 세우는 「MU:A INTERIOR」는 한 줄이어야 한다.
           한 줄에 드는 폭이 280 인데 상자 안폭은 320 에서 204, 390 에서 257 이라 두 줄로 접혔다.
           이 구간만 상자 안폭에 맞춰 낮춘다 — 430 에서 40 이 되어 그 위 구간과 이음매가 없다
           (320 28.5 / 390 35.8 / 414 38.3 / 430 40) */
        --seq-huge-fs: clamp(1.78rem, calc(-0.3094rem + 10.45vw), 2.5rem);
        --ls-display: clamp(-0.025em, -0.06vw, -0.01em);
        /* 좁은 화면은 줄이 짧아 큰 제목의 행간을 조금 키운다. 다만 이 값을 높게 잡으면
           구간이 갈리는 자리에서 화면이 넓어졌는데 행간이 되레 줄어든다
           (실측 1.25 일 때 480→490 에서 33.75→33.32, 1.6px 역전). 1.21 로 두어 0.15px 로 줄인다 */
        --lh-display: 1.21;
        /* 한 손에 드는 화면 - 줄이 더 짧아지므로 한 단 더 좁힌다 */
        --lh-body: 1.78;
        /* 큰 제목과 같은 이유로 조금 키운다 — 다만 구간이 갈리는 자리에서 행간이 되레
           줄지 않도록 낮춰 잡는다(실측 1.28 일 때 480→490 에서 1.19px 역전, 1.23 이면 0.14px) */
        --lh-headline: 1.23;
        --lh-caption: 1.45;
    }
}

/* 움직임을 줄여 달라고 한 사람에게는 시간 토큰 자체를 0 으로 내린다.
   전환·애니메이션이 모두 이 토큰을 거쳐 가므로, 선택자 싸움 없이 한 자리에서 멎는다
   (* 로 거는 초기화는 뒤에 오는 .클래스 의 transition 묶음 선언에 덮여 듣지 않는다) */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: var(--dur-none);
        --dur-base: var(--dur-none);
        --dur-slow: var(--dur-none);
        --dur-reveal: var(--dur-none);
        --dur-enter: var(--dur-none);
        --dur-enter-media: var(--dur-none);
        --dur-cover: var(--dur-none);
        --dur-tube-out: var(--dur-none);
        --dur-tube-in: var(--dur-none);
        --dur-eq: var(--dur-none);
        --dur-cookie: var(--dur-none);
        --dur-pop: var(--dur-none);
        --pop-step: var(--dur-none);
        --dur-pop-air: var(--dur-none);
        --dur-pop-air-2: var(--dur-none);
        --dur-pop-go: var(--dur-none);
        --dur-menu-breath: var(--dur-none);
        --dur-menu-sweep: var(--dur-none);
        --dur-loader-lift: var(--dur-none);
        --dur-loader-out: var(--dur-none);
        --dur-loader-step: var(--dur-none);
        --dur-mag-hint: var(--dur-none);
        --dur-mag-bar: var(--dur-none);
        --dur-rail-hint: var(--dur-none);
        --seq-lock-dur: var(--dur-none);

        /* 뒤따라 나오는 차례를 두는 값 — 기다림도 함께 없앤다 */
        --enter-lead: var(--dur-none);
        --enter-step: var(--dur-none);
        --stagger: var(--dur-none);
    }
}