/* ============================================================
모바일 청첩장 — 디자인 토큰
모던 & 미니멀 · 아이보리 & 웜 베이지
============================================================ */
/* 웹폰트는 각 HTML 의 + 로 로드한다.
(@import 는 직렬 로딩이라 모바일·iOS Safari 에서 폰트 누락/혼재가 잦아 제거) */
:root {
/* 색 — 웜 아이보리 & 베이지 (oklch, 저채도) */
--bg: oklch(0.975 0.008 85); /* 페이지 바깥 배경, 웜 아이보리 */
--paper: oklch(0.991 0.005 90); /* 청첩장 종이 */
--paper-2: oklch(0.965 0.010 84); /* 살짝 더 진한 베이지 면 */
--ink: oklch(0.285 0.012 60); /* 본문 잉크, 웜 차콜 */
--ink-soft: oklch(0.52 0.018 62); /* 보조 텍스트 */
--ink-faint: oklch(0.68 0.018 66); /* 흐린 라벨 */
--beige: oklch(0.78 0.030 78); /* 베이지 액센트 */
--beige-deep:oklch(0.62 0.038 72); /* 진한 베이지 (버튼/포인트) */
--line: oklch(0.905 0.012 80); /* 헤어라인 */
--line-soft: oklch(0.945 0.010 82);
--shadow-soft: 0 1px 2px oklch(0.5 0.02 70 / 0.04), 0 12px 40px oklch(0.5 0.03 70 / 0.07);
--shadow-card: 0 1px 3px oklch(0.5 0.02 70 / 0.06), 0 18px 50px oklch(0.5 0.03 70 / 0.10);
/* 타이포 */
--serif-ko: 'Nanum Myeongjo', serif;
--serif-ko-soft: 'Gowun Batang', serif;
--serif-en: 'Cormorant Garamond', serif;
--sans-ko: 'Noto Sans KR', sans-serif;
--shell-w: 430px;
}
/* ============================================================
디자인 톤 (테마) — [data-theme="…"] 로 색감 전체 전환
============================================================ */
:root[data-theme="sage"] {
--bg: oklch(0.968 0.012 145);
--paper: oklch(0.990 0.006 142);
--paper-2: oklch(0.952 0.018 146);
--ink: oklch(0.300 0.020 152);
--ink-soft: oklch(0.500 0.024 150);
--ink-faint: oklch(0.660 0.022 150);
--beige: oklch(0.730 0.045 150);
--beige-deep:oklch(0.540 0.050 152);
--line: oklch(0.900 0.016 146);
--line-soft: oklch(0.945 0.012 146);
}
:root[data-theme="blush"] {
--bg: oklch(0.974 0.010 20);
--paper: oklch(0.992 0.005 24);
--paper-2: oklch(0.958 0.016 18);
--ink: oklch(0.320 0.022 20);
--ink-soft: oklch(0.520 0.028 20);
--ink-faint: oklch(0.680 0.024 20);
--beige: oklch(0.770 0.050 18);
--beige-deep:oklch(0.560 0.070 18);
--line: oklch(0.905 0.018 20);
--line-soft: oklch(0.945 0.012 20);
}
:root[data-theme="navy"] {
--bg: oklch(0.972 0.008 255);
--paper: oklch(0.992 0.004 255);
--paper-2: oklch(0.950 0.014 255);
--ink: oklch(0.290 0.040 258);
--ink-soft: oklch(0.460 0.050 258);
--ink-faint: oklch(0.620 0.038 258);
--beige: oklch(0.560 0.075 258);
--beige-deep:oklch(0.400 0.095 260);
--line: oklch(0.900 0.012 255);
--line-soft: oklch(0.945 0.010 255);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans-ko);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* 작은 캡스 라벨 (영문) */
.eyebrow {
font-family: var(--serif-en);
font-size: 13px;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--ink-faint);
font-weight: 400;
}
/* 얇은 구분선 */
.hairline {
width: 1px;
height: 56px;
background: var(--line);
margin: 0 auto;
}
::selection { background: oklch(0.82 0.04 78); color: var(--ink); }
button { font-family: inherit; }
/* 스크롤바 (미니멀) */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }