/* laniaura.com — 디자인 시스템.
 *
 * 은유: **계측기의 전면판.** 단, 소리를 만드는 발생기가 아니라 이미 있는 소리를 재서
 * 표시하는 측정기의 전면판이다. AURA 가 하는 일이 바로 그것이다 — 재생 중인 음악의
 * 음역과 밝기를 재서 얹을 톤의 높이를 정한다.
 *
 * 그래서 노브·슬라이더·건반·VU미터를 그리지 않는다(발생기의 기호다).
 * 눈금·표시창·라벨·표만 쓴다(측정기의 기호다).
 *
 * 지배 규칙 하나: **이 눈금·숫자·라벨이 가리키는 실제 값이 무엇인가.
 * 답이 없으면 그리지 않는다.**
 *
 * 밝은 패널인 이유는 취향이 아니다. 우리가 가진 유일한 실물 자산인 AURA 스크린샷이
 * 다크 UI 라, 어두운 배경 위에서는 배경에 녹아 물체로 읽히지 않는다. 패널을 밝게 하면
 * 같은 스크린샷이 페이지에서 유일하게 어두운 사각형이 되어 배경에서 물체로 승격된다.
 */

/* ── 토큰 ─────────────────────────────────────────────────────────────────── */
:root {
    /* 다크모드 미제공. 이 안의 논리는 "밝은 패널 + 그 안에 함몰된 검은 표시창"이고,
       색을 뒤집으면 표시창이 패널보다 밝아져 은유 자체가 무너진다. 선언해서 브라우저가
       폼 컨트롤을 밝게 그리도록 한다. */
    color-scheme: light;

    /* 재질 — 전면판 */
    --panel:   #D7D5D0;
    --recess:  #BFBDB7;
    --edge:    #F0EEEA;

    /* 잉크 — 각인 */
    --ink:     #16181A;   /* panel 위 12.14:1 */
    --ink-dim: #45484C;   /* panel 위 6.27:1 · recess 위 4.89:1 */
    --hair:    rgba(22, 24, 26, .14);

    /* 표시자 — 페이지당 3회 이하. 텍스트 색으로도, 텍스트를 얹는 배경으로도 쓰지 않는다. */
    --signal:  #C62D0B;   /* panel 위 3.79:1 — 비텍스트 UI 3:1 통과 */

    /* 표시창 — 이 세 색은 .display 내부에만 존재한다 */
    --display:    #0C0F11;
    --trace:      #D7D5D0;   /* display 위 12.1:1 */
    --signal-lit: #FF5A2B;   /* display 위 6.18:1 */

    /* 서체 — 기기의 세 층위: 각인 / 설명서 / 계기 */
    --f-title: 'Wanted Sans', Pretendard, -apple-system, system-ui, 'Malgun Gothic', sans-serif;
    --f-body:  Pretendard, -apple-system, system-ui, 'Malgun Gothic', sans-serif;
    --f-data:  'Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    /* 간격 — 4px 베이스. 이 값 외 사용 금지 */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    --s-9: 96px; --s-10: 128px;

    /* Radius — 예산제. 이 셋만 존재한다 */
    --r-0: 0;
    --r-2: 2px;
    --r-4: 4px;   /* 표시창 전용 */

    /* 폭 */
    --w-panel: 1320px;
    --w-main:  1064px;
    --w-text:   720px;
    --rail:      88px;
    --gutter:    40px;   /* 레일과 본문 사이. 0 이면 눈금 라벨이 본문을 침범한다 */

    --sec-pad: var(--s-10);
    --head-h:  56px;
}

@media (max-width: 1199px) { :root { --rail: 64px; --gutter: 28px; --sec-pad: var(--s-9); } }
/* 2단이 1단으로 접히는 지점(899)에서 레일도 같이 내린다. 그 아래에서는 레일이 가로폭의
   12%를 먹어 표가 컨테이너를 넘친다(실측: 768px 에서 문서폭 813). 레일은 2단 배치의
   여백에 사는 장치이지, 좁은 화면에서 본문을 밀어내며 버틸 것이 아니다. */
@media (max-width: 899px)  { :root { --rail: 0px;  --gutter: 0px; } }
@media (max-width: 767px)  { :root { --sec-pad: var(--s-7); --head-h: 84px; } }

/* ── 리셋 ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    /* 한국어 조판: 어절 단위로 줄바꿈한다. keep-all 없이는 단어 중간에서 잘린다. */
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
}

body {
    font: 400 17px/1.71 var(--f-body);
    color: var(--ink);
    background-color: var(--panel);
    /* 아노다이즈 알루미늄 미세 결. filter:url() 이 아니라 background-image 로 타일링한다 —
       filter 는 매 페인트마다 난수를 다시 돌려 저사양 기기에서 스크롤이 죽는다.
       background-image 는 브라우저가 한 번 래스터화한 뒤 캐시한다.
       이 한 겹이 없으면 밝은 단색 패널이 "빠르게 만든 티"로 무너진다. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
    background-repeat: repeat;
    -webkit-font-smoothing: antialiased;
    text-align: left;   /* justify 금지 — 한글에서 어간이 벌어져 흰 강이 생긴다 */
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

/* 앵커 점프 시 제목이 고정 헤더에 가리는 것은 대표적인 아마추어 티다. */
[id] { scroll-margin-top: calc(var(--head-h) + var(--s-5)); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
::selection { background: var(--signal); color: #fff; }

/* 숫자가 열을 이루는 곳은 전부 자릿수 정렬 */
td, th, .data, .hz, .date, .num { font-variant-numeric: tabular-nums; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.skip {
    position: absolute; left: var(--s-4); top: -100px; z-index: 100;
    background: var(--ink); color: var(--panel); padding: var(--s-3) var(--s-5);
    font: 600 15px var(--f-body); text-decoration: none;
}
.skip:focus { top: var(--s-3); }

/* ── 타이포 ───────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--f-title); font-weight: 700; }

h1 { font-size: 56px; line-height: 1.11; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: 36px; line-height: 1.16; letter-spacing: -.012em; text-wrap: balance; }
h3 { font-size: 24px; line-height: 1.28; letter-spacing: -.008em; }

.lead   { font-size: 19px; line-height: 1.68; }
.small  { font-size: 14px; line-height: 1.7; color: var(--ink-dim); }
strong, b { font-weight: 600; }

/* 각인 라벨 — 전면판의 실크스크린 */
.label {
    font-family: var(--f-title); font-weight: 700;
    font-size: 11px; line-height: 1.1; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-dim);
}

/* 계기 수치 */
.data    { font-family: var(--f-data); font-weight: 400; font-size: 11px; letter-spacing: .06em; }
.data-lg { font-family: var(--f-data); font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: -.02em; }

@media (max-width: 1199px) {
    h1 { font-size: 44px; } h2 { font-size: 32px; } h3 { font-size: 22px; }
    .lead { font-size: 18px; } .data-lg { font-size: 34px; }
}
@media (max-width: 767px) {
    body { font-size: 16px; }
    h1 { font-size: 34px; } h2 { font-size: 26px; } h3 { font-size: 21px; }
    .lead { font-size: 17px; } .data-lg { font-size: 30px; }
    .label { font-size: 10px; letter-spacing: .12em; }
}

/* ── 레이아웃 ─────────────────────────────────────────────────────────────── */
.page { display: flex; flex-direction: column; min-height: 100vh; }
main   { flex: 1 0 auto; }

.wrap { width: 100%; max-width: var(--w-panel); margin: 0 auto; padding: 0 var(--s-6); }
.wrap > * { max-width: var(--w-main); margin-left: calc(var(--rail) + var(--gutter)); }
.text { max-width: var(--w-text); }
.text p + p { margin-top: var(--s-5); }

@media (max-width: 767px) { .wrap { padding: 0 var(--s-4); } .wrap > * { margin-left: 0; } }

.section { padding: var(--sec-pad) 0; }
.section + .section { border-top: 1px solid var(--hair); }
.section > .wrap > * + * { margin-top: var(--s-6); }

/* 함몰 밴드 — 패널에 파인 면 */
.band { background: var(--recess); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.section.band + .section { border-top: 0; }

.sec-head { display: flex; flex-direction: column; gap: var(--s-3); }
.sec-head h2 { max-width: 22ch; }

/* ── 표시창 ───────────────────────────────────────────────────────────────── */
/* 어둠은 배경이 아니라 이 안에만 존재한다. */
.display {
    position: relative;              /* ::after 의 기준 — 없으면 함몰이 렌더되지 않는다 */
    background: var(--display);
    border: 2px solid var(--recess);
    border-radius: var(--r-4);
    overflow: hidden;
    box-shadow: 0 1px 0 0 var(--edge);   /* 하단 1px 양각 = 패널의 두께 */
}
.display > img, .display > svg { width: 100%; border-radius: 0; border: 0; }

/* 함몰 그림자는 반드시 이미지 **위** 레이어에 얹는다. .display 에 직접 inset box-shadow 를
   걸면 width:100% 이미지가 패딩 박스를 꽉 채워 그림자가 이미지 뒤로 완전히 가려진다 —
   렌더는 되지만 보이지 않는, 찾기 어려운 종류의 버그다. */
.display::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 2px 3px -1px rgba(0,0,0,.60), inset 0 0 0 1px rgba(0,0,0,.35);
}

/* 도판 캡션 — 이미지를 장식에서 자료로 승격시키는 한 줄 */
figure { margin: 0; }
figcaption {
    margin-top: var(--s-3);
    font: 400 14px/1.6 var(--f-body); color: var(--ink-dim);
}
figcaption .n { font-family: var(--f-data); font-weight: 500; font-size: 11px; color: var(--ink); letter-spacing: .06em; }

/* ── 버튼 ─────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: var(--s-3);
    position: relative;
    background: var(--ink); color: var(--panel);
    font: 600 16px/1 var(--f-body); text-decoration: none;
    padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 3px);
    border: 0; border-radius: var(--r-0);
    min-height: 44px;
}
/* signal 면 위에 텍스트를 얹지 않는다 — 4.2:1 로 AA 미달이다. 대신 좌측 3px 바로만 쓴다. */
.btn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--signal); }
.btn:hover { background: #000; }

.btn-2 {
    display: inline-flex; align-items: center; gap: var(--s-3);
    background: none; color: var(--ink);
    font: 600 16px/1 var(--f-body); text-decoration: none;
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--ink); border-radius: var(--r-0);
    min-height: 44px;
}
.btn-2:hover { background: var(--ink); color: var(--panel); }

.btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ── 표 ───────────────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tbl td, .tbl th { overflow-wrap: break-word; }
.tbl th, .tbl td { text-align: left; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tbl thead th { border-bottom: 1px solid var(--ink); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.num, .tbl th.num { text-align: right; padding-right: 0; font-family: var(--f-data); }

.chip {
    display: inline-block; background: var(--recess); border-radius: var(--r-2);
    padding: 3px var(--s-2);
    font-family: var(--f-title); font-weight: 700; font-size: 11px; letter-spacing: .1em;
    color: var(--ink-dim); white-space: nowrap;
}
.band .chip { background: var(--panel); }

/* 상태등 — 실제로 가동 중인 것에만 켠다. 존재하지 않는 제품에 소등 램프를 그리면
   "만들어는 놨는데 안 켰다"로 읽혀 그래픽이 라벨을 반박하게 된다. */
.lamp { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }

/* ── 고지 ─────────────────────────────────────────────────────────────────── */
/* 작은 회색 각주로 숨기지 않는다. */
.notice { border-left: 2px solid var(--signal); padding-left: var(--s-4); }
.notice p { font-weight: 600; }
.foot-note { border-top: 1px solid var(--hair); padding-top: var(--s-4); }

pre.code {
    background: var(--display); color: var(--trace);
    font: 400 13px/1.7 var(--f-data);
    padding: var(--s-4) var(--s-5); border-radius: var(--r-4);
    overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}