/*
 * /unse 디자인 토큰 — 다크 전용 (DESIGN.md)
 * 라이트 모드 색상 도입 금지.
 *
 * 본문/헤드는 Noto Serif KR self-host (public/fonts/). CSP font-src 'self' 통과.
 * Latin 글리프는 별도 subset으로 분리해 한글 화면에서도 영문 폰트 비용 절감.
 */

/* Noto Serif KR — Latin subset */
@font-face {
    font-family: 'Noto Serif KR';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/unse/fonts/noto-serif-kr-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Noto Serif KR';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/unse/fonts/noto-serif-kr-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Noto Serif KR';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/unse/fonts/noto-serif-kr-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Noto Serif KR — Korean + CJK subset (본문 한글·한자·구두점) */
@font-face {
    font-family: 'Noto Serif KR';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/unse/fonts/noto-serif-kr-korean-400.woff2') format('woff2');
    unicode-range: U+1100-11FF, U+3000-309F, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF, U+4E00-9FFF, U+3400-4DBF, U+FF00-FFEF;
}

@font-face {
    font-family: 'Noto Serif KR';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/unse/fonts/noto-serif-kr-korean-500.woff2') format('woff2');
    unicode-range: U+1100-11FF, U+3000-309F, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF, U+4E00-9FFF, U+3400-4DBF, U+FF00-FFEF;
}

@font-face {
    font-family: 'Noto Serif KR';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/unse/fonts/noto-serif-kr-korean-600.woff2') format('woff2');
    unicode-range: U+1100-11FF, U+3000-309F, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF, U+4E00-9FFF, U+3400-4DBF, U+FF00-FFEF;
}

/* JetBrains Mono — 어드민 로그·식별자 mono */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/unse/fonts/jetbrains-mono-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
    /* paper — 한지·먹지 3단계 */
    --u-paper: #15110d;
    --u-paper-2: #1f1a14;
    --u-paper-dim: #3a3127;

    /* ink — 따뜻한 회백 텍스트 4단계 */
    --u-ink: #ece3cc;
    --u-ink-2: #c8bea6;
    --u-ink-3: #9a907a;
    --u-mute: #756b5a;

    /* cinnabar — 유일한 강조색 */
    --u-cinnabar: #e85a4f;
    --u-cinnabar-dk: #b03d33;
    --u-cinnabar-tn: #3a1c18;

    /* gold — paywall CTA 전용. cinnabar 경고색 인상을 황금/금전 메타포로 치환. */
    --u-gold: #c89b3c;
    /* brand-gold — 상단 워드마크 "꿀점" 강조 전용. 값은 gold 와 동일하나
       결제 CTA 골드(--u-gold)의 의미 독점을 지키려 토큰만 분리. */
    --u-brand-gold: #c89b3c;
    /* 결제수단 모달 — 브랜드 식별 엣지 전용 (4px 좌측 스트라이프에만 사용, 본체 색 아님) */
    --u-brand-kakao: #fee500;
    --u-brand-naver: #03c75a;

    /* 오행 5색 */
    --u-wuxing-wood: #7fc080;
    --u-wuxing-fire: #e85a4f;
    --u-wuxing-earth: #f0b86e;
    --u-wuxing-metal: #c8bea6;
    --u-wuxing-water: #6aa3c4;

    /* 상태색 — 배지에서만 사용 */
    --u-status-paid: #7fc080;
    --u-status-pending: #9a907a;
    --u-status-failed: #e85a4f;
    --u-status-expired: #756b5a;

    /* spacing — 8 배수 + 4 미세 조정 */
    --u-s-xs: 4px;
    --u-s-sm: 8px;
    --u-s-md: 12px;
    --u-s-lg: 16px;
    --u-s-xl: 20px;
    --u-s-2xl: 24px;
    --u-s-3xl: 32px;
    --u-s-4xl: 40px;
    --u-s-5xl: 64px;

    /* rounded — 거의 직각, full만 배지 예외 */
    --u-r-sm: 2px;
    --u-r-md: 4px;
    --u-r-full: 9999px;

    /* font family — Noto Serif KR 단일 본문 */
    --u-ff-serif: 'Noto Serif KR', 'Nanum Myeongjo', serif;
    --u-ff-mono: 'JetBrains Mono', 'Menlo', monospace;
}

/* 전역 박스 모델·여백 리셋
   width:100% + padding 컴포넌트(site-header 등)가 viewport 폭을 넘기지 않도록
   border-box 통일. body 기본 margin 8px 도 제거해 max-width:100vw 가드와 정합. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 전역 본문 베이스 */
html,
body {
    background-color: var(--u-paper);
    color: var(--u-ink-2);
    font-family: var(--u-ff-serif);
    word-break: keep-all;
    /* 좌우 스크롤 차단 — 어느 view·컴포넌트가 viewport 폭을 초과해도 가로 스크롤이
       생기지 않도록 글로벌 가드. 세로 스크롤은 그대로 둔다. */
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    /* 일부 모바일 브라우저에서 자식의 transform / fixed 가 가로 폭을 늘릴 때 대비. */
    max-width: 100vw;
}

/* atmosphere — 한지 결 grain overlay. 본문 위에 매우 옅게 깔린다.
   pointer-events: none + position: fixed로 어떤 인터랙션도 가리지 않음.
   z-index: 0 + 본문 컨테이너에 position: relative 부여하지 않아 자연 stack. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('/unse/images/grain.svg');
    background-repeat: repeat;
    background-size: 240px 240px;
    opacity: 0.18;
    mix-blend-mode: soft-light;
}

/* atmosphere — 화면 가장자리 vignette. 시선을 본문 중앙에 모은다. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0, 0, 0, 0.45) 100%),
        radial-gradient(120% 80% at 50% 100%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* atmosphere 레이어 위로 본문이 떠 있도록 — body 직계 main/header/footer는 stacking 위. */
body > * {
    position: relative;
    z-index: 1;
}

/* typography utility classes — 9 단계 본문 + 라벨 */
.t-headline-display {
    font-family: var(--u-ff-serif);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.t-headline-lg {
    font-family: var(--u-ff-serif);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.t-headline-md {
    font-family: var(--u-ff-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
}

.t-headline-sm {
    font-family: var(--u-ff-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
}

.t-body-md {
    font-family: var(--u-ff-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.01em;
}

.t-body-sm {
    font-family: var(--u-ff-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
}

.t-label-md {
    font-family: var(--u-ff-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.t-label-sm {
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.t-label-micro {
    font-family: var(--u-ff-serif);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.15em;
}

/* hanja / mono 타이포 — 만세력 한자·어드민 KPI·로그 전용 */
.t-hanja-pillar {
    font-family: var(--u-ff-serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
}

.t-hanja-kpi {
    font-family: var(--u-ff-serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
}

.t-hanja-caption {
    font-family: var(--u-ff-serif);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.2em;
}

.t-mono-sm {
    font-family: var(--u-ff-mono);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
}

.t-mono-log {
    font-family: var(--u-ff-mono);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.85;
}