/* ===================================================================== 2026 J-HOUSE Welcome Day — 디자인 토큰 (v2 final "Watercolor Editorial", 2026-11-04) 원본: _design/v2/final/tokens.css · design-system.md. 값은 원본 그대로, 컴포넌트 클래스는 app.css (UI 키트)에 1:1로. 서체 2종(마루부리 "WD Maru" · Pretendard) + 영문·숫자 전용 1종(Cormorant Garamond). 글꼴 링크는 index.html. 옛 WebView 규칙(ARCH §8-7, tests/lint.sh): flex gap · inset · aspect-ratio · :has · ?. · ?? 금지 → 마진 · top/left 로. 옛 변수 별칭(--c-* · --f-* · --fs-* · 게임 그림 색)은 모든 레인이 옮긴 뒤 Integrate(11/4)가 지웠습니다. 옛 글자 도우미 클래스(.t-maru 등)만 남음. ===================================================================== */ :root { /* ---------- 색: 6개 + 파생. 분홍의 면적은 그림이 맡고 UI는 종이와 잉크 ---------- */ --paper: #F8F3EC; /* 면. 그림의 종이색을 여기에 맞춰 보정함 */ --ink: #33282A; /* 제목·값·본문 (paper 위 12.9:1) */ --stone: #76655F; /* 설명·캡션 (5.0:1) — 더 밝게 만들지 않는다 */ --line: #E5D9CC; /* 머리카락 선, 장식 아닌 구획만 */ --rose: #A9505F; /* 두 색 제목의 둘째 줄, 영문 표제, 링크, 완료 표시 (4.8:1) */ --berry: #7E2F45; /* 화면당 하나뿐인 채운 버튼, D-day, 선택 테두리, 로고 (흰 글자 8.8:1) */ --paper-hi: #FFFDF9; /* 입력칸·편지지·시트 안쪽 */ --field: #958580; /* 입력·선택 테두리 (paper 위 3.2:1, 눌리는 것의 경계) */ --blush: #F4E3E1; /* 선택된 응답 면, 그룹장 '다음 할 일' 행의 아주 옅은 면 */ --rose-dark: #EBA6B1; /* 어두운 카메라 화면 위에서만 쓰는 15초 테두리 */ --scrim: rgba(51, 40, 42, .2); /* 따뜻하고 옅게, 흐림 없음 */ --pill-dark: rgba(40, 26, 28, .72); /* 카메라 화면 알약 (흰 글자 6.6:1) */ --kakao: #FEE500; --chev: #8F807A; /* 행 오른쪽 화살표 (3.4:1) */ --seg-bg: #EFE7DE; /* 세그먼트 바탕 · 꺼진 버튼 면 */ --line-2: #D8CCC0; /* 꺼진 버튼 · 견본 테두리 */ --sub-ink: #6A5A55; /* 옅은 면 위 보조 글자 (blush 위 4.5:1 이상) */ color-scheme: light only; /* ---------- 서체 ---------- */ --serif: "WD Maru", "MaruBuri", "AppleMyungjo", serif; --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; --latin: "Cormorant Garamond", Georgia, serif; /* 영문 행사명·숫자만 */ /* ---------- 간격: 4px 단위. 관련 8–12 · 덩어리 20–24 · 장면 32–48 ---------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px; --m: 24px; /* 좌우 여백 (360 이하 20) */ /* ---------- 모서리: 기본 0. 버튼·입력 6, 선택 행 8, 시트 위 20 ---------- */ --r-0: 0; --r-1: 6px; --r-2: 8px; --r-sheet: 20px; /* ---------- 그림자: 떠 있는 시트와 실물 미리보기 두 가지뿐 ---------- */ --sh-sheet: 0 -12px 40px rgba(51, 40, 42, .16); --sh-object: 0 1px 2px rgba(51, 40, 42, .06), 0 10px 24px -12px rgba(51, 40, 42, .28); /* ---------- 움직임: 화면당 한 번, 짧게. 반복 없음 ---------- */ --ease: cubic-bezier(.2, .7, .2, 1); --t-fast: 160ms; /* 이름이 선명해짐, 선택 */ --t-mid: 220ms; /* 첫 방문 불투명도 전환, 토스트 */ --t-slow: 380ms; /* 시트 오르내림 */ --dock-h: 0px; /* 앱: shared.js 가 보이는 아래 고정 바(.dock · .bottom · .tabbar)의 실제 높이를 잽니다 */ } @media (max-width: 360px) { :root { --m: 20px; } } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-mid: 0ms; --t-slow: 0ms; } } /* ---------- 바탕 ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; background: var(--paper); } /* UI 바탕의 종이결은 타일 위에 종이색 65% 한 겹(결 대비 약 35%). 관리자는 단색(body.adm, app.css) */ body, .dock, .sheet, .scrim-lift { background-color: var(--paper); background-image: linear-gradient(rgba(248, 243, 236, .65), rgba(248, 243, 236, .65)), url("/assets/img/paper-tile.jpg"); background-size: auto, 300px 300px; background-repeat: repeat; } body { width: 100%; max-width: 520px; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); margin: 0 auto; position: relative; overflow-x: hidden; font: 400 1rem/1.75 var(--sans); color: var(--ink); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; word-break: keep-all; overflow-wrap: break-word; } img { display: block; max-width: 100%; } svg { max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } input, textarea, select { font: inherit; color: inherit; } [hidden] { display: none !important; } .wrap { padding-left: var(--m); padding-right: var(--m); } .center { text-align: center; } .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nb { white-space: nowrap; } /* 이름 한 덩어리: 재민 · 다인 님 */ /* ---------- 글자 단계 (모두 rem: html.big 112.5% / html.bigger 125%) ---------- */ .eyebrow { font: 500 .6875rem/1rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--rose); } /* 영문 대문자만. 한글은 자간을 벌리지 않는다 */ .display { font: 400 1.75rem/2.5rem var(--serif); letter-spacing: -.03em; color: var(--ink); } .h1 { font: 400 1.625rem/2.25rem var(--serif); letter-spacing: -.03em; color: var(--ink); } .h2 { font: 400 1.3125rem/1.9375rem var(--serif); letter-spacing: -.025em; color: var(--ink); } .h3 { font: 600 1.0625rem/1.625rem var(--sans); letter-spacing: -.02em; color: var(--ink); } .names { font: 400 1.5rem/2.125rem var(--serif); letter-spacing: -.025em; color: var(--ink); } .tone { color: var(--rose); font-style: normal; } /* 두 색 제목의 둘째 줄 — C1 · C2 · K 이미지에서만 */ .display .tone { display: block; text-wrap: balance; } .body { font: 400 1rem/1.75rem var(--sans); color: var(--ink); } .small { font: 400 .9375rem/1.5rem var(--sans); color: var(--stone); } .cap { font: 400 .875rem/1.375rem var(--sans); color: var(--stone); } .label { display: block; margin-bottom: 8px; font: 600 .875rem/1.25rem var(--sans); color: var(--ink); } .label .opt-t, .label .cap { font-weight: 400; color: var(--stone); margin-left: 4px; } .num { font-family: var(--latin); font-weight: 500; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; letter-spacing: 0; } .tab { font-variant-numeric: lining-nums tabular-nums; } .serif { font-family: var(--serif); } .display, .h1, .h2, .names { text-wrap: balance; } .body, .small, .cap, .read, .text, .note, .hint, .rowl .s, .opt .s, .check .s { text-wrap: pretty; } .dg { letter-spacing: .04em; } /* MaruBuri 제목 안 숫자: '11월'이 'll월'로 읽히지 않게 */ .verse { font: 400 .9375rem/1.625rem var(--serif); letter-spacing: -.02em; color: var(--ink); } /* 옛 글자 도우미 (별칭). t-maru = 마루부리 400(제목은 모두 400), t-hand = 마루부리(손글씨 은퇴), t-en = Cormorant 이탤릭 */ .t-maru { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; } .t-hand { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; } .t-en, .en { font-family: var(--latin); font-style: italic; font-weight: 500; letter-spacing: 0; } .t-cap { font-size: .875rem; color: var(--stone); } /* ---------- 큰 글씨 (가+): 같은 화면이 112.5% / 125%로 자란다. 상자 · 그림 속 글자는 px ---------- */ html.big { font-size: 112.5%; } html.bigger { font-size: 125%; } html.bigger .nb { white-space: normal; } html.bigger .hl-tail { white-space: nowrap; } /* 초대 문구 끝 두 어절(9자 이하, WD.fmt.hlLines)은 125% 에서도 한 덩어리 */ /* ---------- 포커스 ---------- */ :focus-visible { outline: 3px solid rgba(126, 47, 69, .45); outline-offset: 2px; } /* ---------- 움직임: 반복 없음. 옛 키프레임 이름은 남겨 두되 움직이지 않게 ---------- */ @keyframes wd-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes drop { from { opacity: 0; } to { opacity: 1; } } @keyframes breathe { from { opacity: 1; } to { opacity: 1; } } @keyframes flicker { from { opacity: 1; } to { opacity: 1; } } @keyframes bob { from { opacity: 1; } to { opacity: 1; } } .anim-drop { animation: wd-fade var(--t-mid) linear both; } .anim-breathe { animation: none; } .rm .anim-drop { animation: none; } .rm .move { -webkit-transform: none !important; transform: none !important; }