/* 웹 무료분석 — 이 페이지의 모양 전부 (#87 · 2026-09-26 · ★#177 종이 + 네이비 + 워드마크 2026-10-06★). * * ★정본★ 앱 #176 nomi-app src/design/paper.ts — 종이 타일 · 네이비 글자 · 워드마크 (앱과 웹이 같은 제품으로 보여야 한다) * 자리 · 크기는 그대로 앱 ink-parts · ink-step · 각 화면 (#113) · 카드는 앱 result-card · #166 창업자 시안 * ★바탕은 종이 타일★ — art/paper-tile (1254 원본 · CSS 한 변 418px · @2x 836 · @3x 1254 · tools/bake_paper.py) 위에 평균색 --paper. * * ★규칙 (tools/test_free.mjs 3절이 본다)★ * 간격 웹이 정하는 간격은 --s*(4 의 배수) · 앱에서 옮긴 자리는 앱 px 값 그대로 (#113) * 기둥 본문은 한 기둥 · 좌우 32 · 넓은 화면은 가운데 --col(440) 까지 * 색 아래 :root 의 값뿐 (Apple 버튼의 검정 · 흰색은 Apple 지침 값 · Google 은 Google 지침 값) * 글자 주인공 --navy · 설명 --mid · 라벨 · 흐린 글자 --muted · 링크 --bronze(한 화면에 한 군데) — 앱 #176 과 같은 값 * 움직임 로딩의 차오르는 선 · READING · 카드 물결 · transform 만 · 동작 줄이기면 멈춘다. 그림자는 카드 종이 · 공유 미리보기 · 전환 0 * 그림 종이 타일(WebP) · 워드마크(PNG) · 타고난 날 22조각 · 공유 카드뿐 — ★먹 그림은 #177 에 지웠다★ · 페이지에 SVG 필터가 없다 */ /* ★#190 글꼴 — Crimson Pro (앱 assets/fonts 의 같은 ttf → woff2 · tools/bake_fonts.py · OFL free/fonts/CrimsonPro-OFL.txt)★ 첫 화면(표지)만 쓴다 — Know when. · 부제 300 · Log in 400 (앱 WELCOME). 온보딩 2~8 · 카드 · about · 저장됨은 Cormorant 그대로 */ @font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/CrimsonPro-Light.woff2') format('woff2'); } @font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/CrimsonPro-Regular.woff2') format('woff2'); } /* ★#192 — Google Fonts 를 걷고 이 사이트 파일로 (tools/bake_fonts.py · OFL 은 free/fonts/*-OFL.txt)★ — 공유 카드 canvas 가 같은 파일을 쓴다 Crimson Pro 이탤릭 = 공유 카드 희소성 · 1인칭 한 줄 (앱 SHARE_FONT) · Cormorant = 라틴 범위로 자른 판 · Plex Mono = 통째 */ @font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/CrimsonPro-LightItalic.woff2') format('woff2'); } @font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/CrimsonPro-Italic.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/CormorantGaramond-Light.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/CormorantGaramond-LightItalic.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/CormorantGaramond-Regular.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/CormorantGaramond-Italic.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/CormorantGaramond-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Cormorant SC'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/CormorantSC-Regular.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2'); } :root { /* ★#177 — 앱 #176 design/paper.ts 와 같은 값 · ★#179 navy 는 Jona 로고 네이비 #132335 (로고 가이드 · 앱 #173 이 따라온다)★ */ --paper: #F0EBE2; /* paper-tile.png 평균색 (tools/bake_paper.py 실측) — 타일이 실리기 전 · 타일 밖의 바탕 */ --navy: #132335; /* 주인공 글자 · 채움 버튼 · 테두리 버튼 선 · 진행선 · 카드 표시 */ --mid: #4A5468; /* 설명 · 부제 · 안내 */ --muted: #8C93A3; /* 라벨 · 날짜 · 흐린 글자 · 자리글 */ --line: #D8D3C8; /* 구분선 · 진행선 바탕 · 입력 밑줄 */ --bronze: #8A6329; /* 링크 · 한 화면에 한 군데 */ --quiet-line: #6B7280; /* ★#218 조용한 테두리 버튼 선 = 앱 paper.ts quietLine (#204 홈 OPEN →)★ */ --quiet-text: #3E4757; /* ★#218 조용한 테두리 버튼 글자 = 앱 paper.ts quietText★ */ /* 한 단 어두운 종이 — 폰 판 바깥 벽 · 카드 벽 (같은 타일 위에 네이비 6%) */ --veil: linear-gradient(rgba(19, 35, 53, .06), rgba(19, 35, 53, .06)); --serif: 'Cormorant Garamond', 'Apple SD Gothic Neo', Georgia, serif; --display: 'Crimson Pro', 'Cormorant Garamond', Georgia, serif; /* #190 첫 화면(표지) */ --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* 간격 — 4 의 배수 하나로 (tokens.json space-* + 12 · 20 · 32 · 48) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s24: 96px; --gutter: 32px; /* 시안 left:32 · right:32 */ --col: 440px; /* 넓은 화면의 기둥 — 17px 본문 한 줄 약 60자 */ /* ★앱에서 온 간격 (#113)★ — 웹의 4 배수 격자 밖이지만 ★앱이 정본★ 이라 앱 값 그대로 */ --app-google-gap: 10px; /* G 로고 ↔ 글자 (signup s.google gap) */ /* ★#190 버튼 줄 (앱 design/paper BUTTON_LINE · SIGN_IN)★ — 주 버튼 200×44 · 위 끝이 바닥에서 156 · 로그인은 220×40 · 애플 위 끝이 바닥에서 212 */ --app-btn-w: 200px; --app-btn-h: 44px; --app-line: 156px; --sign-w: 220px; --sign-h: 40px; --sign-line: 212px; --tap: 44px; /* 누르는 것의 최소 높이 */ /* ★#194 보이는 높이 (한 번 재서 고정)★ — app.js lockHeight 가 처음 열 때의 innerHeight(px)로 덮어쓴다 (사파리 떠 있는 주소창 · 도구막대 위까지 = 눈에 보이는 바닥). 주소창이 접히거나 펴져도 · 자판이 떠도 바뀌지 않는다 — 폭이 바뀔 때(화면 돌림)만 다시 잰다 */ --vh: 100dvh; /* ★#194 이 기기의 버튼 줄★ — 보통 156 그대로. 짧은 화면(SE 사파리 등)에서 위쪽 간격을 줄여도 넘치는 장이 있으면 app.js fitLine 이 기기 하나에 한 값으로 낮춘다 (최소 104) · 로그인은 늘 그보다 56 위 (156 : 212) ★#198 이름 주의 — --line 은 선 색 토큰이다. #194 에 이 줄을 --line 으로 적어 색을 덮어써 밑줄 · 테두리가 전부 사라졌다★ */ --btn-line: var(--app-line); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } /* 화면 끝까지 닿는 것(로딩 선)이 가로 스크롤을 만들지 않게 — clip 은 스크롤 칸을 만들지 않는다 */ html, body { overflow-x: clip; } body { margin: 0; /* 종이 — 이어 붙는 타일 한 변 418 (앱 PAPER_TILE) · 배율 3 은 @3x (image-set · 못 읽는 브라우저는 위 줄) */ background: url('art/paper-tile@2x.webp') 0 0 / 418px 418px repeat, var(--paper); background-image: image-set(url('art/paper-tile@2x.webp') 2x, url('art/paper-tile@3x.webp') 3x); color: var(--navy); font-family: var(--serif); font-size: 17px; line-height: 28px; overflow-wrap: break-word; /* ★#190 반듯한 숫자 (앱 design/lining-nums · 한 곳)★ — Cormorant · Crimson 의 숫자가 내려가지 않는다 (모노 라벨 · 날짜는 원래 반듯하다) */ font-variant-numeric: lining-nums; } h1, h2, h3, p, ul { margin: 0; } p { text-wrap: pretty; } h1, h2, h3 { font-weight: 400; } img { display: block; max-width: 100%; } strong { font-weight: 600; } button, input, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; } a { color: var(--bronze); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; text-decoration-thickness: 1px; } /* 포커스 — 키보드일 때만 선이 보인다 */ :focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; } /* ★화면 제목의 포커스 테두리를 그리지 않는다 (2026-09-15 · 창업자 iPhone Safari "첫 문구에 파란 박스")★ app.js show() 가 화면을 바꿀 때 제목(h1 tabindex=-1)에 focus() 를 준다 — 낭독기가 새 화면을 읽게. 제목은 누르는 곳이 아니다 */ h1[tabindex="-1"]:focus { outline: none; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── 기둥 ───────────────────────────────────────────────────────── */ .wrap { position: relative; max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } /* ★워드마크 (#177)★ — 그림(PNG) 그대로 · 비율 유지 · 첫 화면 폭 200 / about · 저장됨 폭 100 (미리 줄인 wordmark-sm) */ .mark img { width: 200px; height: auto; margin: 0 auto; } .mark.sm img { width: 100px; } /* ── 한 장 ───────────────────────────────────────────────────────── ★앱 ink-parts InkHeader · ink-step 과 같은 틀 (#113)★ .top(‹ 줄 38 + 진행선 1) → .head(위 46/844 H) → .mid(남는 세로 · 가운데) → .foot(안내 → 22 → 버튼 → 링크) 바닥 여백 = max(96/844 H − 홈 막대, 20) + 홈 막대 (앱 InkFoot · 출생 시각 · 시작 안내는 80) */ .screen { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; min-height: var(--vh); /* ★#194 처음 열 때 잰 보이는 높이 (고정)★ — 사파리 주소창 · 도구막대를 뺀 높이 (#99 dvh → px 고정) */ --foot-bottom: 96; padding-bottom: calc(max(calc(var(--vh) * var(--foot-bottom) / 844 - env(safe-area-inset-bottom)), 20px) + env(safe-area-inset-bottom)); } /* ★#190 버튼 줄이 있는 장★ — 바닥 여백은 버튼 줄 칸(.bline)이 갖는다 */ .screen:has(.bline) { padding-bottom: 0; } /* ★#194 온보딩 여덟 장 (첫 화면 · 입력 다섯 · 시작 안내 · 로그인 · .onb)★ — 장 높이 = 보이는 높이 · 꼬리말 없음 → 스크롤 0. 버튼 줄(.bline)은 장 바닥에 붙은 고정 높이(156 · 212)라 ★같은 기기면 모든 장에서 같은 자리★. 보이는 높이가 짧으면 위쪽 간격(제목 위 · 빈 칸)만 준다 */ .screen.onb { height: var(--vh); } body:has(section.onb:not([hidden])) footer { display: none; } /* 첫 화면만 — 꼬리말 링크 한 줄을 Log in 아래 맨 바닥에 (버튼 줄 칸 156 안 · Log in 칸 아래 16 · 누르는 칸 44) · 메일 줄은 about 에 있다 */ .wrap:has(section[data-screen="welcome"]:not([hidden])) footer { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 0; border: 0; text-align: center; } .wrap:has(section[data-screen="welcome"]:not([hidden])) footer nav { justify-content: center; gap: var(--s4); margin: 0; } .wrap:has(section[data-screen="welcome"]:not([hidden])) footer a { font-size: 13px; color: var(--muted); text-decoration-color: var(--line); } .wrap:has(section[data-screen="welcome"]:not([hidden])) footer > p { display: none; } /* 버튼 줄이 148 보다 낮아 Log in 아래 자리가 없는 기기 (html.foot-top · app.js fitLine) — 첫 화면 맨 위 한 줄 · 워드마크 위 빈 칸은 그만큼 남긴다 */ html.foot-top .wrap:has(section[data-screen="welcome"]:not([hidden])) footer { top: 0; bottom: auto; } html.foot-top .hero .g1 { min-height: 60px; } /* 꼬리말 44 + 워드마크 위 16 */ /* ★짧은 화면 (html.short · app.js fitLine)★ — 버튼 줄 156 에 다 안 들어가는 장이 있을 때 위쪽 간격만 줄인다 (글 · 버튼 크기 그대로) */ html.short .onb:not(.hero):not(.cover) .head { margin-top: 8px; } html.short .mid.place { padding-top: 16px; } html.short [data-screen="preview"] .head { margin-top: 4px; } html.short [data-screen="preview"] .head .label { margin-bottom: 8px; } html.short [data-screen="preview"] .rule { margin-top: 8px; } html.short .list { margin-top: 12px; } html.short .cover .gap.low { min-height: var(--s3); } html.short .signin .gap.top { height: 24px; } html.short .signin .head { margin-top: 16px; } html.short .hero .g3 { min-height: var(--s4); } .top { display: grid; grid-template-rows: 38px 1px; /* 앱 headRow 38 · track 1 (바로 붙는다) */ } .back { display: flex; align-items: center; justify-content: flex-start; width: var(--tap); height: var(--tap); margin-top: -6px; /* 누르는 칸 44 는 위로만 넓힌다 · 보이는 줄 38 */ font-size: 0; color: var(--muted); } .back::before { content: "\2039"; font-family: var(--serif); font-size: 22px; line-height: 26px; } /* 앱 s.back 22/26 ink.muted */ .top .progress { grid-row: 2; align-self: center; } /* 진행선 — 시안 값 그대로 78 × 단계 / 326 (넷째에도 꽉 차지 않는다: 입력은 끝났고 읽기가 남았다) · 채움 navy (앱 #176) */ .progress { position: relative; height: 1px; background: var(--line); } .progress::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: var(--fill, 0); background: var(--navy); } [data-step="1"] .progress { --fill: calc(100% * 78 / 326); } [data-step="2"] .progress { --fill: calc(100% * 156 / 326); } [data-step="3"] .progress { --fill: calc(100% * 234 / 326); } [data-step="4"] .progress { --fill: calc(100% * 312 / 326); } .head { margin-top: calc(var(--vh) * 46 / 844); } /* 앱 inkStep.head designY(46) */ .screen h1 { font-size: 30px; line-height: 38px; font-weight: 300; color: var(--navy); } .sub { margin-top: var(--s3); font-size: 15px; line-height: 24px; color: var(--mid); } .mid { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; /* 앱: 위아래 spacer flex 1 — 가운데 */ } .foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; text-align: center; } .foot > p { max-width: 100%; } .note { font-size: 13px; line-height: 21px; color: var(--mid); text-align: center; } /* 앱 ink.note = paper.mid */ .foot .note { margin-bottom: 22px; } /* 앱 inkStep.note marginBottom 22 */ /* ★#198 글 폭 = 앱★ — 안내 글은 기둥 폭 전체(앱 note 는 InkFoot 위 칸 폭 전체). 가운데 정렬 칸 안의 글을 사파리가 좁게 접어 세 줄이 됐다 (#190 .bline > .note 와 같은 일) 온보딩 글은 브라우저의 "보기 좋은 줄바꿈"(text-wrap: pretty)을 끈다 — 앱(React Native)은 그냥 채워 꺾는다. 사파리 pretty 가 설명 글을 앱보다 한 낱말 일찍 꺾었다 */ .foot > .note { align-self: stretch; width: 100%; } .onb p, .onb h1 { text-wrap: wrap; } /* ★#190 버튼 줄 칸 (앱 InkFoot)★ — 높이 156 = 바닥에서 버튼 위 끝까지 · 버튼은 칸 맨 위 가운데 · 보조 글 · 링크는 버튼 아래 18 (웹 링크 칸 44 는 글자 위 10 을 품으므로 위 8) · 세로 배율을 곱하지 않는다 (앱과 같다 — 기기가 달라도 바닥에서 같은 거리) */ .bline { flex: none; height: var(--btn-line); display: flex; flex-direction: column; align-items: center; } .bline > p { max-width: 100%; } .bline > p:has(> .link) { margin-top: 8px; } .bline > .note { margin: 18px 0 0; width: 100%; } /* 사파리는 가운데 줄 칸 안 글을 좁게 접었다 (SE 시작 안내 두 줄 → 세 줄) — 칸 폭 전체를 준다 */ .bline > .credit { margin-top: 18px; } .hint { margin-top: var(--s3); font-size: 13px; line-height: 20px; color: var(--mid); } /* 라벨 — ★모노 10 · 자간 .2em · 대문자 · --muted (앱 #176 paperLabel)★ */ .label, .mono { font-family: var(--mono); font-size: 10px; line-height: 16px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } /* ── 누르는 것 ─────────────────────────────────────────────────── */ /* ★버튼 (#177 · 앱 paperButton)★ — 채움: navy 바탕 + 종이색 모노 11 · .26em (그림 면 없음) · 잠김은 같은 면을 흐리게(.32 · 앱 s.off) */ .btn { display: inline-flex; align-items: center; justify-content: center; width: var(--app-btn-w); max-width: 100%; height: var(--app-btn-h); /* ★#190 앱 BUTTON_LINE 200×44★ · 모서리 1 */ padding: 0; border-radius: 1px; background: var(--navy); color: var(--paper); font-family: var(--mono); font-size: 11px; line-height: 16px; font-weight: 400; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; } .btn:disabled { opacity: .32; cursor: default; } .btn:not(:disabled):active { opacity: .85; } /* 글자 링크 (Log in · I don't know my birth time · Skip) — 모든 장에서 같은 모양 · 가운데 */ .link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s4); font-size: 14px; line-height: 24px; color: var(--bronze); /* 앱 InkLink 기본 14 · 밑줄 bronze */ text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 1px; } /* ── 01 첫 화면 (표지) ───────────────────────────────────────────── */ /* ★#190 앱 #186 (app/index.tsx · design/paper.ts WELCOME · BUTTON_LINE · 393×852 기준)★ 워드마크 160 가운데 · 위 250 → Know when. Crimson Pro 300 52/54 · 위 420 · 좌우 40 → 부제 Crimson 300 19/25 mid (+18) → 모노 세 줄 10/15.5 · 2 · mid (+22) → GET STARTED 200×44 가운데 · 위 끝이 바닥에서 156 (852 에서 696) → Log in 가운데 (버튼 아래 18) ★빈 칸 셋(.g1 · .g2 · .g3)이 남는 세로를 852 의 앱 자리 비율 250 : 118 : 85.5 로 나눠 받는다★ (최소 20 · 20 · 24 — 로고 가이드 "O" 높이 여백 · 앱 글 덩어리 ↔ 버튼 24) ★#201 다시 온 사람은 이 장 대신 Welcome back 장(.wb)으로 간다★ (버튼 줄 아래는 Log in 만 · 앱 규칙) */ .hero { padding-top: 0; padding-bottom: 0; } .hero > * { margin-left: 8px; margin-right: 8px; } /* 앱 side 40 = 기둥 32 + 8 */ .hero .gap { flex: 1 1 0; } .hero .g1 { flex-grow: 250; min-height: var(--s5); } .hero .g2 { flex-grow: 118; min-height: var(--s5); } .hero .g3 { flex-grow: 85.5; min-height: var(--s6); } .hero .mark img { width: 160px; } .hero .head { margin-top: 0; } .hero h1 { font-family: var(--display); font-size: 52px; line-height: 54px; font-weight: 300; color: var(--navy); } .hero .lead { margin-top: 18px; font-family: var(--display); font-size: 19px; line-height: 25px; font-weight: 300; color: var(--mid); } /* 모노 세 줄 (앱 ENGINE_LINES · WELCOME.mono 10/15.5 · 자간 2 · mid) — ★가장 긴 줄이 넘치면 자간만 줄인다★ (앱 engineSpacing: 글자 폭 0.6em 고정 → 자간 = min(2, (폭 − 80) / 28 − 6) · 0 아래로는 안 간다) */ .hero .engine3 { margin-top: 22px; white-space: nowrap; font-family: var(--mono); font-size: 10px; line-height: 15.5px; font-weight: 400; text-transform: uppercase; letter-spacing: max(0px, min(2px, calc((100vw - 80px) / 28 - 6px))); color: var(--mid); } /* Log in — 앱 WELCOME.login Crimson Pro 400 16 · bronze · 밑줄 · 버튼 아래 가운데 */ .hero .login .link { font-family: var(--display); font-size: 16px; } .app-link:empty { display: none; } /* ★#201 앱 자리 (시안 nomi-web-to-app.html)★ — app.js appLinks 가 채운다 출시 뒤(APP_STORE_URL 있음) Apple 공식 배지(art/badge/app-store-black.svg · 모양 · 글자 · 색 그대로 · 높이 40 = Apple 최소) + 모노 FREE ON IPHONE 컴퓨터(마우스)는 배지 왼쪽에 QR 112 (data/appstore-qr.svg · 미리 만든 그림) + 모노 SCAN WITH YOUR IPHONE 출시 전(null) 테두리 칸 "COMING SOON TO THE APP STORE" (누를 곳 없음) + 모노 WE'LL BE ON IPHONE SHORTLY 카드 8 블록(data-app-link="badge")은 아래 작은 모노 줄 없이 배지 · 칸만 */ .app-link { display: flex; flex-direction: column; align-items: center; } .app-link .badge { display: inline-flex; min-height: var(--tap); align-items: center; } .app-link .badge img { display: block; height: 40px; width: auto; } .app-link .app-soon { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--line); font-family: var(--mono); font-size: 10px; line-height: 15px; font-weight: 400; letter-spacing: .22em; text-indent: .22em; text-transform: uppercase; color: var(--mid); white-space: nowrap; } .app-link .app-note { margin-top: 10px; font-size: 9px; line-height: 14px; } .about-app { margin-top: 40px; } /* #273 출시 뒤 about 아래 배지 (stamp 가 APP_LIVE 로 끼운다) */ .app-link .qr-row { display: flex; align-items: center; gap: 18px; } .app-link .qr-row img.qr { display: block; width: 112px; height: 112px; } .app-link .qr-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; } .app-link .qr-side .mono { font-size: 9px; line-height: 14px; color: var(--navy); } /* ★#283 안드로이드 자리 (APP_LIVE true · app.js androidSlot)★ — 문장 Crimson 300 18/24 navy · 작은 글 14/19 mid · 이메일 칸(밑줄 · 16 = 확대 안 되는 크기) + NOTIFY ME(채움 · 모노) 한 줄 · 동의 한 줄 Crimson 12/16 muted · 기둥 폭 329 까지 */ .app-link .droid { width: 100%; max-width: 329px; text-align: center; } .droid-title { font-family: var(--display); font-size: 18px; line-height: 24px; font-weight: 300; color: var(--navy); } .droid-sub { margin-top: 6px; font-family: var(--display); font-size: 14px; line-height: 19px; font-weight: 300; color: var(--mid); } .droid-form { display: flex; justify-content: center; gap: 10px; margin-top: 14px; } .droid-form input { flex: 1; min-width: 0; height: var(--tap); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0 2px; font-family: var(--display); font-size: 16px; line-height: 22px; color: var(--navy); } .droid-form input::placeholder { color: var(--muted); opacity: 1; } .droid-form input:focus { outline: none; border-bottom-color: var(--navy); } .droid-btn { flex: none; height: var(--tap); padding: 0 16px; border: 0; border-radius: 1px; background: var(--navy); color: var(--paper); cursor: pointer; font-family: var(--mono); font-size: 10.5px; line-height: 16px; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; } .droid-form:not(:has(input)) .droid-btn { width: var(--app-btn-w); max-width: 100%; } /* 로그인한 사람 — 버튼 하나 · 앱 버튼 폭 */ .droid-btn:disabled { opacity: .32; cursor: default; } .droid-error { margin-top: 8px; } .droid-legal { margin-top: 10px; font-family: var(--display); font-size: 12px; line-height: 16px; font-weight: 300; color: var(--muted); } /* ── ★#201 Welcome back★ — 시안 nomi-web-to-app.html 1 · 2 · 3 (393×852) ────────────── 첫 화면 표지 결 — 워드마크 150 → WELCOME BACK(모노) → 제목 Crimson 300 36/42 → 짧은 선 36 → 설명 Crimson 300 18/26 mid → 앱 자리(배지 · 칸) → 같은 계정 안내 Crimson 300 14/19 mid → 맨 아래 "Not you? Start a new reading" (Crimson 14 · 링크 bronze 밑줄) ★높이 = 보이는 높이(--vh) · 스크롤 0 · 꼬리말 없음★ — 빈 칸 셋이 남는 세로를 시안 비율(170 : 81 : 26)로 받는다. 맨 아래 줄이 보이는 바닥(--vh)에 붙고 앱 자리는 그 위에 쌓인다 — 852 에서 배지 위 끝이 바닥에서 약 160 (버튼 줄 156 근처) · 사파리 떠 있는 주소창 · SE 처럼 보이는 높이가 짧으면 빈 칸이 먼저 줄어 스크롤 0 을 지킨다 (#194 · #198) */ .screen.wb { height: var(--vh); padding: 0; text-align: center; } body:has(section.wb:not([hidden])) footer, body:has(section.toapp:not([hidden])) footer { display: none; } .wb .gap { flex: 1 1 0; } .wb .g1 { flex-grow: 170; min-height: var(--s5); } .wb .g2 { flex-grow: 81; min-height: var(--s5); } .wb .g3 { flex-grow: 26; min-height: var(--s6); } .wb .mark img { width: 150px; height: auto; } .wb .head { margin-top: 0; } .wb h1 { margin-top: 16px; font-family: var(--display); font-size: 36px; line-height: 42px; font-weight: 300; color: var(--navy); } .wb .rule { width: 36px; height: 1px; margin: 20px auto 0; background: var(--navy); } .wb .lead { margin-top: 20px; font-family: var(--display); font-size: 18px; line-height: 26px; font-weight: 300; color: var(--mid); } .wb .foot { margin-top: 0; } .wb .same { align-self: stretch; width: 100%; margin-top: 14px; font-family: var(--display); font-size: 14px; line-height: 19px; font-weight: 300; color: var(--mid); } .wb .not-you { flex: none; margin: 12px 0 max(4px, env(safe-area-inset-bottom)); font-family: var(--display); font-size: 14px; line-height: 20px; color: var(--muted); } .wb .not-you .link { min-height: 36px; padding: 0 2px; font-family: var(--display); font-size: 14px; } /* ── ★#201 마지막 장 "The rest is in the app."★ (시안 C 는 이 맥에 없다 · 창업자 글 값 · 393×852 기준) ─────────────── ‹ 뒤로 → 해시계 마크 폭 110 (Jona 06_sundial navy · art/share/mark-navy.svg = 앱 #199 사본) 위 210 → 글 덩어리 위 330: 제목 Cormorant 300 36/44 가운데 → 짧은 선 36 (위 20) → 설명 세 줄 19/28 가운데 mid (위 20) → 앱 칸은 버튼 줄(.bline · 위 끝이 바닥에서 --btn-line) ★높이 = 보이는 높이 · 스크롤 0★ — 짧은 화면은 마크 위 · 글 위 간격만 준다 (최소 16 · 12) */ .screen.toapp { height: var(--vh); } .toapp .sundial { margin-top: max(16px, calc(var(--vh) * 210 / 852 - 39px)); text-align: center; } .toapp .sundial img { display: inline-block; width: 110px; height: auto; } .toapp .head { margin-top: max(12px, calc(var(--vh) * 120 / 852 - 66px)); text-align: center; } .toapp h1 { font-size: 36px; line-height: 44px; font-weight: 300; } .toapp .rule { width: 36px; height: 1px; margin: 20px auto 0; background: var(--navy); } .toapp .sub { margin-top: 20px; font-size: 19px; line-height: 28px; color: var(--mid); } .toapp .gap { flex: 1 1 0; min-height: var(--s4); } .toapp .bline { justify-content: flex-start; } /* ★#250 B' 카드 8 아래로 이어짐 (서버 paid_hook · 시안 screens-1010/nomi-card8-hook.html 후킹 B · 393×852)★ — section[data-screen="card-8"].hooked 일 때만 공유 카드 그림 화면 폭 가득 (첫 화면 한 장 높이 풀림) · SAVE IMAGE · SHARE 작은 테두리 글자 둘 (모노 9 · muted 테두리 · 8/14 · 누르는 칸 44) → 여백 54 → 후킹 문구 (kicker 모노 9.5 bronze · head Cormorant 30/35 · sub Crimson 이탤릭 300 16/23 mid · ↓ bronze) → 큰 칸 (#241 그대로 · navy 1px · 흰 22% · 위 18) → OR GO FURTHER (모노 9) · Full Map 금색 테두리 줄 · 다른 줄 (가는 선 사이 · ★가격 없음★) → Two Paths 줄 (Crimson 이탤릭 15 mid · 가운데) → 앱 마무리(.c-rest · THE REST OF YOUR MAP · Deeper readings live in the app.) */ [data-screen="card-8"].hooked .cfirst { height: auto; min-height: 0; } [data-screen="card-8"].hooked .cbox { flex: none; } [data-screen="card-8"].hooked .cbody { overflow: visible; } [data-screen="card-8"].hooked .cfoot.share { padding-top: 10px; } [data-screen="card-8"].hooked .cfoot.share .pair { justify-content: center; gap: 8px; } /* ★#255 (시안 nomi-card8-v2.html)★ SHARE · SAVE IMAGE 순서 · SHARE = 금색 채움 · 종이색 글 / SAVE IMAGE = 금색 테두리 · 금색 글 · 모노 9.5 · 높이 36 · 누르는 칸 44 */ [data-screen="card-8"].hooked .cfoot.share .cbtn { flex: none; height: 36px; line-height: 14px; padding: 11px 18px; font-size: 9.5px; } [data-screen="card-8"].hooked .cfoot.share .cbtn.line { border: 0; background: var(--bronze); color: var(--paper); } [data-screen="card-8"].hooked .cfoot.share .cbtn.fill { padding: 10px 16px; border: 1px solid var(--bronze); background: transparent; color: var(--bronze); } [data-screen="card-8"].hooked .cfoot.share .cbtn::after { inset: -4px -2px; } /* 누르는 칸 44 */ .c-hook { padding: 0 8px; } .hk-copy { margin: 30px -8px 0; text-align: center; text-wrap: balance; } /* #255 시안 v2 — 54 → 30 (첫 화면 아래에 kicker · head) */ @media (max-height: 640px) { .hk-copy { margin-top: 16px; } [data-screen="card-8"].hooked .cfoot.share { padding-top: 6px; } } /* #255 SE 549 — 첫 화면에 head 까지 */ .hk-kicker { font-family: var(--mono); font-size: 9.5px; line-height: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); } .hk-head { margin-top: 12px; font-family: var(--serif); font-size: 29px; line-height: 34px; font-weight: 400; color: var(--navy); } .hk-sub { margin-top: 10px; font-family: var(--display); font-size: 16px; line-height: 23px; font-style: italic; font-weight: 300; color: var(--mid); } .hk-arrow { margin-top: 14px; color: var(--bronze); font-size: 16px; line-height: 20px; animation-name: hk-down; animation-duration: 2.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } /* 천천히 내려앉는 ↓ (동작 줄이기면 멈춤) */ @keyframes hk-down { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, 4px); } } .c-hook .hook { margin-top: 18px; } .c-hook .hk-box { margin-top: 0; } .c-hook .hk-tocs { display: none; } /* 시안 후킹 B 의 큰 칸에는 목차가 없다 (값은 readHook 이 읽어 둔다) */ .hk-fullmap { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid var(--bronze); background: rgba(138, 99, 41, .05); text-align: left; color: var(--navy); cursor: pointer; } .hk-fullmap[hidden] { display: none; } .hk-fmtop { display: flex; justify-content: space-between; align-items: center; } .hk-fmname { font-family: 'Cormorant SC', var(--serif); font-size: 14px; line-height: 18px; letter-spacing: .12em; text-transform: uppercase; } .hk-fmsave { font-family: var(--mono); font-size: 9px; line-height: 12px; letter-spacing: .2em; text-transform: uppercase; border: 1px solid var(--bronze); color: var(--bronze); padding: 3px 7px; } .hk-fmsub { display: block; margin-top: 2px; font-family: var(--display); font-size: 14px; line-height: 20px; font-style: italic; font-weight: 300; color: var(--mid); } .hk-fullmap + .hk-others { margin-top: 0; } .hk-pairline { margin-top: 16px; text-align: center; } .hk-pairline .link { min-height: var(--tap); font-family: var(--display); font-size: 15px; font-style: italic; font-weight: 300; color: var(--mid); text-decoration: none; } .hk-why, .hk-firstlabel, .hk-morelabel, .hk-n { font-family: var(--mono); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; } .hk-box { margin-top: 32px; padding: 18px 18px 16px; border: 1px solid var(--navy); background: rgba(255, 255, 255, .22); } .hk-why { font-size: 9px; line-height: 14px; color: var(--bronze); } .hk-name { margin-top: 8px; font-family: var(--serif); font-size: 26px; line-height: 30px; color: var(--navy); } .hk-why[hidden] + .hk-name { margin-top: 0; } .hk-period { margin-top: 4px; font-family: var(--display); font-size: 15px; line-height: 21px; font-style: italic; font-weight: 300; color: var(--mid); } .hk-tocs { margin: 12px 0 0; padding: 0; list-style: none; } .hk-toc { display: flex; gap: 10px; align-items: baseline; font-family: var(--display); font-size: 14px; line-height: 21px; font-weight: 300; color: var(--mid); } .hk-n { flex: none; min-width: 18px; font-size: 9px; color: var(--bronze); } .hk-note { margin-left: auto; color: var(--muted); } .hk-first { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); } .hk-firstlabel { font-size: 8.5px; line-height: 13px; color: var(--muted); } .hk-lead, .hk-rest { font-family: var(--display); font-size: 16px; line-height: 23px; font-weight: 300; color: var(--navy); } .hk-lead { margin-top: 6px; } .hk-rest { filter: blur(3.2px); opacity: .75; user-select: none; } .hk-cta { margin-top: 16px; display: flex; justify-content: flex-end; } .hk-cta .app-link { align-items: flex-end; } /* ★#255 출시 전 Coming soon 칸은 상품 칸 안쪽 폭 가득 (넘침 0 · 시안 v2) — 출시 뒤 READ IT 버튼은 오른쪽 그대로★ */ .hk-cta .app-link:has(> .app-soon) { flex: 1; align-items: stretch; min-width: 0; } .hk-cta .app-soon { width: 100%; min-width: 0; padding: 12px 8px; font-size: 9.5px; letter-spacing: .16em; text-indent: .16em; white-space: normal; text-align: center; } .hk-more { margin-top: var(--s6); } .hk-morelabel { font-size: 9px; line-height: 14px; color: var(--muted); } .hk-others { margin: 6px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); } .hk-other { display: block; width: 100%; min-height: var(--tap); background: none; border: 0; border-radius: 0; text-align: left; cursor: pointer; padding: 10px 0; border-top: 1px solid var(--line); font-family: 'Cormorant SC', var(--serif); font-size: 13px; line-height: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); } /* ★#241-b★ 흐린 뒷부분 두 줄까지 (line-clamp) · 목차 한 줄씩 (두 줄까지 · app.js readHook) */ .hk-rest { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .hk-toc .hk-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* ★#241 카드 2 끝 다리 한 줄★ — 가는 선 위 이탤릭 한 줄 · 가격 · 버튼 없음 (paid_hook 이 있을 때만) */ .c-bridge { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--display); font-size: 16px; line-height: 23px; font-style: italic; font-weight: 300; color: var(--mid); } /* ── ★#201 카드 8 맨 아래 앱 블록 (시안 4)★ ─────────────────────────────────────────── 첫 화면 몫(.cfirst)은 #192 그대로 종이 한 장 높이 · 그 아래 같은 종이에 가는 선 하나 → THE REST OF YOUR MAP → 제목 Crimson 300 27/33 → 설명 Crimson 300 16/23 mid → 배지(출시 전 Coming soon 칸) → 같은 계정 안내 14/20 · 장 전체(문서)를 내려서 본다 */ [data-screen="card-8"] .csheet { display: block; height: auto; min-height: 0; } .cfirst { display: flex; flex-direction: column; height: calc(100svh - 21px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 54px); height: calc(100dvh - 21px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 54px); min-height: 426px; } .c-rest { margin-top: 24px; padding: 28px 16px 8px; border-top: 1px solid var(--line); text-align: center; } .c-rest .mono { font-size: 9.5px; line-height: 14px; } .c-rest .r-title { margin-top: 14px; font-family: var(--display); font-size: 27px; line-height: 33px; font-weight: 300; color: var(--navy); } .c-rest .r-lines { margin-top: 12px; font-family: var(--display); font-size: 16px; line-height: 23px; font-weight: 300; color: var(--mid); } .c-rest .app-link { margin-top: 22px; } .c-rest .r-same { margin-top: 16px; font-family: var(--display); font-size: 14px; line-height: 20px; font-weight: 300; color: var(--mid); } /* ── 03 · 04 날짜 · 시각 휠 ─────────────────────────────────────── ★앱은 iOS 기본 휠(UIDatePicker spinner · locale en_US)이다 — 그 모양 · 그 동작 그대로 (#113 모양 · #164 굴리기 · #165 원통)★ 앱 캡처 실측 (iPhone 15 · 휠 폭 = 기둥 326~329 · 최대 328 · 왼쪽 맞춤 · 높이 216): 원통 — 한 줄 32 · 반지름 84 · 22.5° (wheel.js) · 원근 1000 · 각 칸은 제 가운데로 모인다(--cx) 띠 — 좌우 8 안쪽 · 높이 33 · 둥근 16 · 띠 안 글자는 1.12 배 · 띠 밖은 같은 글자 흐리게 글자 — 시스템 글꼴 21 (앱 캡처 글자 폭과 같게) · ★#177 글자 navy · 띠 navy 6%★ (색만 · 자리 · 동작 그대로) ★누르는 칸(.wcol)은 휠 폭을 빈틈 없이 나눈다★ — 투명한 스크롤 상자(.wscroll)가 맨 위 · 그림 · 띠는 pointer-events:none ★select 는 값의 주인 · 키보드 · 낭독기 몫★ — 화면에서는 숨긴다(.wsel) */ .wheel { position: relative; width: min(100%, 328px); height: 216px; isolation: isolate; } /* 앱 휠 216 · 최대 폭 328 왼쪽 맞춤 */ .wheel::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 8px; right: 8px; top: calc(50% - 16.5px); height: 33px; border-radius: 16px; background: rgba(19, 35, 53, .06); } .wout, .wlens, .wdrum { position: absolute; pointer-events: none; } .wout, .wdrum { inset: 0; } /* 띠 밖 층 — 띠 자리를 비운다 (띠 안은 확대 층이 그린다) */ .wout { -webkit-mask-image: linear-gradient(#000 calc(50% - 16.5px), transparent calc(50% - 16.5px), transparent calc(50% + 16.5px), #000 calc(50% + 16.5px)); mask-image: linear-gradient(#000 calc(50% - 16.5px), transparent calc(50% - 16.5px), transparent calc(50% + 16.5px), #000 calc(50% + 16.5px)); } /* 띠 안 층 — 띠에 잘리고 1.12 배 (아이폰 휠의 돋보기) */ .wlens { left: 8px; right: 8px; top: calc(50% - 16.5px); height: 33px; overflow: hidden; } .wlens .wdrum { inset: auto; left: -8px; right: -8px; top: calc(16.5px - 108px); height: 216px; transform: scale(1.12); transform-origin: var(--cx) 50%; } .wdrum { perspective: 1000px; perspective-origin: var(--cx) 50%; } .wface { position: absolute; top: calc(50% - 16px); height: 32px; line-height: 32px; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 21px; letter-spacing: 0; color: var(--navy); white-space: nowrap; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .wcol { position: absolute; top: 0; height: 100%; } .wscroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .wscroll::-webkit-scrollbar { display: none; } .wpad { height: calc(50% - 16px); } /* 첫 줄 · 끝 줄도 가운데까지 굴러온다 (칸 216 − 줄 32) / 2 */ .wsnap { height: 32px; scroll-snap-align: center; cursor: pointer; } /* select — 값 · 키보드 · 낭독기 (화면에서는 숨긴다 · 포커스는 칸 테두리로 보인다) */ .wsel { position: absolute; top: 50%; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; pointer-events: none; font-size: 16px; } .wcol.focus .wscroll { outline: 2px solid var(--navy); outline-offset: calc(-1 * var(--s1)); border-radius: 4px; } /* 누르는 칸 (휠 폭 %) — 날짜: 월 0~46 · 일 46~66 · 연 66~100 / 시각: 시 0~40 · 분 40~58 · AM/PM 58~100 */ .wcol.month { left: 0; width: 46%; } .wcol.day { left: 46%; width: 20%; } .wcol.year { left: 66%; width: 34%; } .wcol.hour { left: 0; width: 40%; } .wcol.minute { left: 40%; width: 18%; } .wcol.meridiem { left: 58%; width: 42%; } /* 글자 자리 · 모이는 자리(--cx) — 앱 캡처 실측 (휠 폭 %) */ .wdrum.month { --cx: 30.2%; } .wdrum.month .wface { left: 12.2%; } .wdrum.day { --cx: 50.2%; } .wdrum.day .wface { right: 40.5%; text-align: right; } .wdrum.year { --cx: 79.3%; } .wdrum.year .wface { left: 72.8%; } .wdrum.hour { --cx: 22.2%; } .wdrum.hour .wface { right: 69.6%; text-align: right; } .wdrum.minute { --cx: 49%; } .wdrum.minute .wface { left: 39%; width: 20%; text-align: center; } .wdrum.meridiem { --cx: 66.2%; } .wdrum.meridiem .wface { left: 63.4%; } /* ★#298 언어별 휠 (자리만 · ko · ja 는 꺼져 있다 — i18n.js LANGS)★ — 생년월일 해 · 월 · 일 · 시각 24시간 (AM/PM 칸 숨김). 영어(:lang(en))는 위 값 그대로 · 아래는 일 때만 · 폭 · 가운데는 그 언어 회차에서 디자인으로 다시 잰다 */ :lang(ko) .wcol.year, :lang(ja) .wcol.year { left: 0; width: 38%; } :lang(ko) .wcol.month, :lang(ja) .wcol.month { left: 38%; width: 32%; } :lang(ko) .wcol.day, :lang(ja) .wcol.day { left: 70%; width: 30%; } :lang(ko) .wdrum.year, :lang(ja) .wdrum.year { --cx: 19%; } :lang(ko) .wdrum.year .wface, :lang(ja) .wdrum.year .wface { left: 8%; } :lang(ko) .wdrum.month, :lang(ja) .wdrum.month { --cx: 54%; } :lang(ko) .wdrum.month .wface, :lang(ja) .wdrum.month .wface { left: 46%; } :lang(ko) .wdrum.day, :lang(ja) .wdrum.day { --cx: 85%; } :lang(ko) .wdrum.day .wface, :lang(ja) .wdrum.day .wface { right: 8%; } :lang(ko) .wcol.meridiem, :lang(ja) .wcol.meridiem, :lang(ko) .wdrum.meridiem, :lang(ja) .wdrum.meridiem { display: none; } :lang(ko) .wcol.hour, :lang(ja) .wcol.hour { left: 0; width: 50%; } :lang(ko) .wcol.minute, :lang(ja) .wcol.minute { left: 50%; width: 50%; } :lang(ko) .wdrum.hour, :lang(ja) .wdrum.hour { --cx: 36%; } :lang(ko) .wdrum.hour .wface, :lang(ja) .wdrum.hour .wface { right: 58%; } :lang(ko) .wdrum.minute, :lang(ja) .wdrum.minute { --cx: 62%; } :lang(ko) .wdrum.minute .wface, :lang(ja) .wdrum.minute .wface { left: 54%; } /* ── 05 출생지 ─────────────────────────────────────────────────── */ /* ★#177 먹 기둥은 지웠다 (앱 #176 birth-place)★ — 목록 칸은 비면 여백 */ .mid.place { justify-content: flex-start; padding-top: calc(var(--vh) * 64 / 844); } /* 입력칸 위 — 앱 input marginTop designY(64) */ .field input { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0 0 12px; /* 앱 s.input paddingBottom 12 · 24/34 */ font-size: 24px; line-height: 34px; color: var(--navy); } .field input::placeholder { color: var(--muted); opacity: 1; } .results { list-style: none; padding: 0; margin-top: var(--s1); max-height: 240px; overflow-y: auto; min-height: 0; flex: 0 1 auto; } /* #194 출생지 — 목록이 길어도 장이 늘지 않는다 (목록 칸만 줄고 그 안에서 스크롤) */ .screen.onb .mid.place { flex: 1 1 0; min-height: calc(var(--vh) * 64 / 844 + 48px); } /* 입력칸(34 + 밑 12 + 선 1)까지는 늘 보인다 */ html.short .screen.onb .mid.place { min-height: 64px; } .results li { margin: 0; } .results .link { display: flex; width: 100%; padding: var(--s3) 0; /* 앱 s.row paddingVertical 12 · 선 없음 */ font-size: 17px; line-height: 24px; color: var(--navy); text-align: left; text-decoration: none; } #place-empty { margin-top: 20px; line-height: 21px; color: var(--muted); text-align: left; } /* 앱 s.empty */ [data-screen="birth-place"] .foot { padding-top: var(--s3); } /* 앱 s.foot marginTop 12 */ .credit { margin-top: var(--s3); } /* 웹에만 있는 줄 (GeoNames CC BY 표기) — 버튼 아래 12 · 라벨 모양 */ /* ── 06 성별 ───────────────────────────────────────────────────── */ .choices { display: flex; flex-direction: column; gap: var(--s3); } .choice { width: 100%; height: var(--s16); border: 1px solid var(--line); border-radius: 2px; font-size: 20px; line-height: 26px; color: var(--muted); /* 앱 optLabelOff ink.muted */ } .choice[aria-checked="true"] { border-color: var(--navy); background: rgba(19, 35, 53, .04); color: var(--bronze); } /* 앱 optLabelOn (ink.bronze = navy 테두리 · bronzeText 글자) */ /* ── 07 닉네임 ─────────────────────────────────────────────────── */ /* 앱 nickname.tsx — 라벨 inkType.label(#176 paperLabel 10 · .2em · muted) · 입력 위 14 · 30/40 · 아래 10 · 도움말 14/22 muted 위 12 · Skip 흐린 글자 */ .field .label { display: block; margin-bottom: 14px; line-height: normal; } #nickname { font-size: 30px; line-height: 40px; padding: 0 0 10px; } [data-screen="nickname"] .hint { margin-top: var(--s3); font-size: 14px; line-height: 22px; color: var(--muted); } /* ★#250 C 온보딩 배치 A (휠 화면 다섯 · section.onb.step · 창업자 결정)★ — CONTINUE 는 장 바닥에 붙는다 · 좌우 기둥 폭 가득 · 안내 글은 버튼 바로 위 (14) · 보조 줄(I don't know my birth time · Skip · CITY DATA)은 버튼 바로 아래 · 그 칸(44)은 없어도 비워 둬서 ★다섯 장 버튼 자리가 같다★ · 바닥 여백 = max(12, 안전 영역) (--vh 가 사파리 아래 막대 위까지라 막대에 안 가린다) · 제목은 진행선 아래 넉넉히 (64/844 · 최소 28) · 휠 · 장소 칸은 남는 칸 가운데 · 자판이 뜨면(장소 · 닉네임) app.js liftFoot 이 아래 칸을 자판 위로 올린다 (--kb) */ .screen.onb.step { padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* --vh(innerHeight)는 이미 사파리 아래 막대 위까지 — #198 의 R(물리 바닥에서 잰 거리)은 더하지 않는다 */ .onb.step .head { margin-top: max(28px, calc(var(--vh) * 64 / 844)); } .onb.step .mid:not(.place) { flex: 1 1 auto; min-height: 0; } /* 칸이 모자라도 아래 칸(버튼)은 바닥 그 자리 — 휠 칸이 1px 줄어든다 */ .onb.step .foot { padding-top: 12px; transform: translateY(calc(-1 * var(--kb, 0px))); } .onb.step .foot .note { margin-bottom: 14px; } .onb.step .bline { height: auto; align-self: stretch; } .onb.step .bline > p:first-child { width: 100%; } .onb.step .bline .btn { width: 100%; } .onb.step .bline > p:nth-child(2), .onb.step .bline > .credit { margin-top: 0; } .onb.step .bline::after { content: ""; display: block; } .onb.step .bline > p + p { min-height: var(--tap); display: flex; align-items: center; justify-content: center; } .onb.step .bline > p + .credit { min-height: var(--tap); display: block; line-height: var(--tap); } /* 글 · 링크 섞인 줄 — flex 면 띄어쓰기가 사라진다 */ .onb.step .bline:not(:has(> p + p)):not(:has(> p + .credit))::after { height: var(--tap); } html.step-tight .onb.step .head { margin-top: 14px; } html.step-tight .onb.step .foot { padding-top: 4px; } html.step-tight .onb.step .foot .note { margin-bottom: 10px; } html.step-tight .onb.step .mid.place { padding-top: 16px; } /* ★SE 출생 시각 (보이는 높이 600 이하 · #179 → #190 버튼 줄로 다시 잼)★ — 휠 216 · 부제 두 줄 · 안내 세 줄 위에 버튼 줄(156)이 오면 SE 사파리(549)에서 "I don't know my birth time" 누르는 칸이 520~564 로 15 넘쳤다. 휠 · 글 · 버튼 크기는 그대로 두고 사이 셋만 줄인다: 제목 위 30 → 24 · 안내 아래 22 → 12 · 링크 위 8 → 2 (합 −22) → 칸 498~542. 이 장 하나 · 600 이하에서만 */ @media (max-height: 600px) { [data-screen="birth-time"] .head { margin-top: 24px; } [data-screen="birth-time"] .foot .note { margin-bottom: 12px; } [data-screen="birth-time"] .bline > p:has(> .link) { margin-top: 2px; } } [data-action="skip-nickname"] { color: var(--muted); text-decoration-color: var(--muted); } /* ── 08 시작 안내 · 02 로그인 (가운데 정렬 장) ──────────────────── */ /* ★#177 붓 획 · 먹 가로획은 지웠다★ — 그 칸(.gap)은 빈 칸으로 남는다 (앱 preview s.art · signup bandH 와 같이 · 글 위치 그대로). 시작 안내 .gap 은 남는 세로를 받고 0 까지 줄어든다 (옛 SE 최소 30 은 붓 획을 보이려던 것 · 빈 칸이라 없앴다) */ .cover .gap { flex: 1 1 0; min-height: 0; } /* ★#190 시작 안내 — 남는 세로를 위 1 : 아래 1.3 (앱 preview s.top · s.bottom 최소 24) · 글 덩어리가 위로★ */ .cover .gap.low { flex-grow: 1.3; min-height: var(--s6); } .cover .head { text-align: center; margin-top: var(--s6); } /* 시작 안내 — 앱 preview.tsx: 빈 칸(남는 세로) → 머리글 위 12 · 모노 10 · .2em → 제목 위 21/844 H · 30/40 → 목록 위 30/844 H · 사이 18 · 17/26 → 엔진 줄 위 6(+18) · 14/22 muted → 발 위 24 · 안내 아래 20 */ [data-screen="preview"] .head { margin-top: var(--s3); } [data-screen="preview"] .head .label { padding-left: .2em; line-height: normal; margin-bottom: calc(var(--vh) * 21 / 844); } [data-screen="preview"] h1 { line-height: 40px; } /* 제목 아래 짧은 선 (#190 · 앱 preview s.rule · 위 20/844 H) */ [data-screen="preview"] .rule { margin: calc(var(--vh) * 20 / 844) auto 0; } .rule { width: 36px; height: 1px; background: var(--navy); margin: var(--s6) auto; } /* 앱 s.rule 36 × 1 navy (#186) */ .cover .sub { margin-top: 0; } .list { margin-top: calc(var(--vh) * 30 / 844); display: flex; flex-direction: column; gap: 18px; text-align: center; } .list p { line-height: 26px; } .list strong { font-weight: 400; color: var(--bronze); } /* 시안 08 의 브론즈 한 줄 */ .engine { margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--muted); text-align: center; } .provider { width: var(--sign-w); max-width: 100%; } /* ★#190 앱 220 · 두 버튼 같은 폭★ */ /* ── 로그인 (★#190 앱 #186 · #188 signup.tsx · 글꼴은 시작 안내와 같은 Cormorant — 앱 #191★) ───────────── 워드마크 110 (위 150/852 H) → 제목 (위 270/852 H · Cormorant 300 30/40) → 짧은 선 36 (위아래 24) → 설명 Cormorant 17/26 mid → 남는 세로 → 버튼 묶음 칸 (높이 212 = 바닥에서 애플 위 끝까지 · 852 에서 640): 애플 220×40 → 구글 아래 10 → 개인정보 문장 아래 20 */ .signin .gap.top { flex: none; height: max(8px, calc(var(--vh) * 150 / 852)); } .signin .mark img { width: 110px; } .signin .head { margin-top: max(16px, calc(var(--vh) * (270 - 150 - 35.77) / 852)); } .signin h1 { line-height: 40px; } .signin .sub { font-size: 17px; line-height: 26px; } .bline.sign { height: calc(var(--btn-line) + var(--sign-line) - var(--app-line)); justify-content: flex-start; } .bline.sign > .provider + .provider, .bline.sign > #google-button { margin-top: 10px; } .bline.sign > .error { margin-top: 10px; } .bline.sign > .note { margin: 20px 0 0; } .bline.sign > .sign-legal { margin-top: 6px; font-size: 11.5px; line-height: 17px; color: var(--muted); } /* #258 동의 한 줄 */ .sign-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ★두 버튼 = 앱 signup.tsx 와 같은 틀 (#190 · 220 × 40)★ — 모서리 1 · 사이 10 · 로고와 글자를 한 덩어리로 가운데 Apple — 검정 · 흰 로고 · "Sign in with Apple" (Apple 웹 지침 · 앱은 공식 버튼 BLACK · cornerRadius 1) Google — Google 브랜드 지침 다크: 바탕 #131314 · 테두리 1 #8E918F · 글자 #E3E3E3 · 공식 G 로고 18 · 사이 10 (앱 s.google) ★config GOOGLE_REDIRECT_URI 가 없으면★ Google 이 그리는 버튼(filled_black · auth.js)이 대신 선다 */ .apple, .google { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--sign-h); border-radius: 1px; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; line-height: 20px; font-weight: 500; letter-spacing: 0; } .apple { gap: var(--s2); background: #000; color: #fff; } .google { gap: var(--app-google-gap); background: #131314; border: 1px solid #8E918F; color: #E3E3E3; font-size: 16px; } /* 앱 googleLabel 16 */ .apple:disabled, .google:disabled { opacity: .4; cursor: default; } .apple:not(:disabled):active, .google:not(:disabled):active { opacity: .72; } .apple svg, .google svg { flex: none; } #google-button { display: flex; justify-content: center; min-height: var(--tap); align-items: center; } #google-button:empty { display: none; } .error { margin-top: var(--s1); font-size: 13px; line-height: 19px; color: var(--bronze); text-align: center; } /* 앱 s.error 13/19 · 위 16(= 사이 12 + 4) */ /* 아직 없는 자리 — 진짜처럼 보이면 안 된다 · ★노랑을 쓰지 않는다★ (#91) — 선 색 바탕 + 점선 */ .todo { background: var(--line); border: 1px dashed var(--mid); padding: 0 var(--s1); font-family: var(--mono); font-size: 13px; } /* ── 로딩 — ★#201 시안 B "먹 한 방울이 번짐" (screens-1010/nomi-loading-ink.html · 393×852)★ ───────────── 먹 그림 한 장(art/ink-drop@3x.webp · 1764² · 588 칸 안에 지름 420 번짐 + 옆 작은 번짐 둘 · 종이 결이 비친다 · tools/bake_ink.mjs)이 화면 아래쪽 가운데(852 기준 중심 560)에서 크기 0.04 → 1 로 30초 (처음 빠르게 · 점점 느리게 · 시안 cubic-bezier(.2,.6,.25,1)) 커지고 그 크기에서 멈춘다. ★#205 (시안 nomi-loading-soft.html B)★ 바깥 번짐(.halo)이 30초 뒤에도 천천히 퍼지고 숨 쉰다 · 60초가 지나면 아래 안내가 409 의 문장으로 (app.js setNote) 분석이 끝나면 app.js inkSettle — 글 0.8초에 사라짐 · 큰 번짐 1.6초에 .18 · 바깥 번짐 0 · 0.9초부터 카드 1 이 1.4초에 나타남 (아래 14 → 0) · 실패 화면에는 먹이 없다. ★먹은 화면(판)에 붙는다(fixed)★ — 기둥 여백에 잘리지 않고 퍼질 때 스크롤을 만들지 않는다 · 글은 먹 위(z 1). 글 자리(852 기준 위에서) READING 132 · 큰 한 줄 170 (Crimson 300 26/32) · 태어난 날 246 (모노 10 bronze) · 이탤릭 300 (Crimson 300 17 · 5초마다 셋) · 안내 340 (Crimson 14 muted) 동작 줄이기 — 먹은 다 퍼진(1) 모습 · 바깥 번짐 고정 · 숨쉬기 없음 · 완료는 0.4초 겹쳐 바뀜 · 이탤릭은 첫 줄만 · READING 제자리 */ body:has(section[data-screen="loading"]:not([hidden])) footer { display: none; } .loading { position: relative; text-align: center; } #loading-run, #loading-failure { position: absolute; top: 0; left: 0; right: 0; z-index: 1; } .loading.failed .ink { display: none; } /* ★#205 완료 자국 층★ — 카드를 연 뒤 1.4초 동안 로딩 장이 카드 위에 겹쳐 함께 옅어진다 (app.js inkSettle) · 누르기는 카드로 간다 */ .loading.trace { position: fixed; inset: 0; z-index: 5; pointer-events: none; } /* ★#241-b 사파리 짧은 로딩 "스크롤 12" 의 원인★ — 카드가 아래 14px 에서 떠오르는 동안(translateY) 장 바닥을 넘는다 · 그동안만 몸통에서 자른다 (clip 은 스크롤 칸을 만들지 않는다) */ html.settling body { overflow-y: clip; } .ink { position: fixed; z-index: 0; pointer-events: none; left: 50%; top: max(calc(var(--vh) * 560 / 852), calc(var(--vh) * 132 / 852 + 418px)); /* 852 에서 560 · 낮은 화면은 글 덩어리(안내 줄 아래) 밑으로 — 먹이 글을 덮지 않게 */ width: 588px; height: 588px; /* 시안 그대로 588 (지름 420 + 번지는 자리) · 화면 폭과 무관 — 그림 588 × 3 = 1764 (그림 규칙) */ margin: -294px 0 0 -294px; } /* ★#205 바깥 번짐 (시안 nomi-loading-soft.html B .halo · art/ink-halo@4x.webp)★ — 큰 번짐 바깥의 옅은 고리 한 장 · 큰 번짐과 같은 588 칸 · 큰 번짐 아래 0~30초 투명 0 → 1 · 크기 .6 → 1 (ease-out · 큰 번짐과 함께 자란다) · ★#232 그 뒤 그 자리에 머문다★ (1 → 1.28 · 숨쉬기를 뺐다 — 물결이 대신 움직인다) */ .halo { position: absolute; inset: 0; background: url('art/ink-halo@4x.webp') center / 100% 100% no-repeat; transform: scale(.6); transform-origin: 50% 50%; opacity: 0; animation-name: halo-in; animation-duration: 30s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: forwards; will-change: transform, opacity; } @keyframes halo-in { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* ★#232 물결이 퍼짐 (시안 nomi-loading-moving.html C · art/ink-ring@5x.webp · tools/bake_ink.mjs)★ — 큰 번짐 둘레 옅은 고리 (가장 진한 곳 .22 · bleedSoft 결) 30초부터 고리 둘이 3초 차이로 번갈아 · 하나는 6초 — 크기 .7 → 1.5 · 투명 0 → 1 (15%) → 0 · cubic-bezier(.2,.5,.3,1) (점점 느리게) · 완료까지 되풀이 큰 번짐 아래 · 글은 늘 먹 위 (#loading-run z 1) · 큰 번짐(.ink-drop)은 30초부터 9초마다 1 ↔ 1.04 (beat · ease-in-out) */ .ring { position: absolute; inset: 0; background: url('art/ink-ring@5x.webp') center / 100% 100% no-repeat; transform: scale(.7); transform-origin: 50% 50%; opacity: 0; animation-name: ripple; animation-duration: 6s; animation-delay: 30s; animation-timing-function: cubic-bezier(.2, .5, .3, 1); animation-iteration-count: infinite; animation-fill-mode: none; will-change: transform, opacity; } .ring.r2 { animation-delay: 33s; } @keyframes ripple { 0% { transform: scale(.7); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } .ink-drop { width: 100%; height: 100%; background: url('art/ink-drop@3x.webp') center / 100% 100% no-repeat; transform: scale(.04); transform-origin: 50% 50%; animation-name: bloom, beat; animation-duration: 30s, 9s; animation-delay: 0s, 30s; animation-timing-function: cubic-bezier(.2, .6, .25, 1), ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: forwards, none; will-change: transform; } @keyframes bloom { 0% { transform: scale(.04); opacity: .9; } 10% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes beat { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } } /* #232 9초 한 숨 */ /* READING — 모노 9.5 · .24em · muted · 9.5초에 7px 옆으로 갔다가 돌아온다 (앱 withRepeat 0 → 7) */ .reading { position: absolute; top: calc(var(--vh) * 132 / 852); left: 0; right: 0; font-family: var(--mono); font-size: 9.5px; line-height: normal; font-weight: 400; letter-spacing: .24em; padding-left: .24em; color: var(--muted); animation-name: drift; animation-duration: 9.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes drift { from { transform: translate(0, 0); } to { transform: translate(7px, 0); } } .screen .l-title { position: absolute; top: calc(var(--vh) * 132 / 852 + 38px); left: -8px; right: -8px; font-family: var(--display); font-size: 26px; line-height: 32px; font-weight: 300; color: var(--navy); text-wrap: balance; } /* ★글은 READING 자리(132/852)에서 시안 간격 그대로 아래로 쌓는다★ — 393×852 에서 시안 자리(170 · 246 · 300 · 340) · 낮은 화면에서도 겹치지 않는다 */ #loading-birth { position: absolute; top: calc(var(--vh) * 132 / 852 + 114px); left: -8px; right: -8px; margin: 0; letter-spacing: .12em; } #loading-birth:empty { display: none; } /* 금색 모노 — 유저 값을 인쇄하는 자리 (Plex 400 10/16 · 대문자로 바꾸지 않는다 · bronze) */ .loading .gold { margin-top: 6px; font-family: var(--mono); font-size: 10px; line-height: 16px; font-weight: 400; letter-spacing: .5px; color: var(--bronze); } /* 이탤릭 한 줄 — 셋이 같은 자리에서 5초씩 (15초 한 바퀴 · 시안 swap) */ .l-lines { position: absolute; top: calc(var(--vh) * 132 / 852 + 168px); left: -8px; right: -8px; height: 24px; } .l-line { position: absolute; left: 0; right: 0; margin: 0; font-family: var(--display); font-size: 17px; line-height: 24px; font-style: italic; font-weight: 300; color: var(--mid); opacity: 0; animation-name: swap; animation-duration: 15s; animation-timing-function: linear; animation-iteration-count: infinite; } .l-line:nth-child(2) { animation-delay: 5s; } .l-line:nth-child(3) { animation-delay: 10s; } @keyframes swap { 0% { opacity: 0; } 6% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } } /* 아래 안내 — 시안 340 · Crimson 300 14 · muted · 409 이거나 60초가 지나면 "Still working on it. Give it a moment." (#205 · app.js setNote 가 천천히 바꾼다) */ #loading-note { position: absolute; top: calc(var(--vh) * 132 / 852 + 208px); left: -8px; right: -8px; font-family: var(--display); font-size: 14px; line-height: 20px; font-weight: 300; color: var(--muted); } /* 동작 줄이기 — 먹은 다 퍼진 모습 · 바깥 번짐 고정(숨쉬기 없음) · 이탤릭 첫 줄만 · READING 제자리 */ @media (prefers-reduced-motion: reduce) { .ink-drop { animation-name: none; transform: scale(1); } .halo { animation-name: none; transform: scale(1); opacity: 1; } .ring { animation-name: none; opacity: 0; } /* #232 물결 없음 · 숨쉼 없음(.ink-drop 위) */ .l-line { animation-name: none; } .l-line:first-child { opacity: 1; } .reading { animation: none; } } /* 실패 — 같은 종이 · 선 없음 (앱 #176 loading.tsx 실패 화면 = PaperGrain 만) */ /* 글자 — 앱 s.body · top designY(150) · 가운데 · 줄 사이 틈 없음 · 17/26 mid */ #failure-lines { margin-top: calc(150 / 844 * 100vh); } #loading-failure { left: -8px; right: -8px; } #failure-lines p { font-size: 17px; line-height: 26px; color: var(--mid); } /* 버튼 — 앱 s.actions · ★한 줄에 가로로★ · 사이 10 · 위 26 */ #loading-failure .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; } /* 앱 s.action — 좌우 18 · ★#177 테두리형 navy 1px · navy 글자★ · Plex 500 9.5 · .22em (앱 칸 높이 ≈ 34). ★보이는 테두리는 앱 크기(34)이고 누르는 칸은 44★ — 테두리를 ::before 로 그려 위아래 5 씩 안쪽에 둔다 */ .act { position: relative; min-height: var(--tap); padding: 0 18px; font-family: var(--mono); font-size: 9.5px; line-height: 12px; font-weight: 500; letter-spacing: .22em; color: var(--navy); } .act::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; bottom: 5px; border: 1px solid var(--navy); pointer-events: none; } /* GO BACK — 테두리를 지운다 · muted (앱 s.actionQuiet · actionLabelQuiet) */ .act.quiet { color: var(--muted); } .act.quiet::before { border-color: transparent; } .act:active { opacity: .6; } /* ── ★#218 줄 서기 (시안 screens-1010/nomi-waitlist.html · 393×852)★ ───────────────────────────── 해시계 마크 96 · 투명 .85 (위 150/852) → 글 덩어리 위 250/852 (양옆 34 = 기둥 + 10) → GOT IT 위 600/852 · 낮은 화면은 간격만 줄고 넘치면 내려 본다 글: 라벨 모노 10/15 .2em muted · You're in line. Cormorant 38/44 (위 16) · YOUR PLACE 모노 9.5 bronze (위 26) · No. Cormorant 64/64 .02em (위 10 · 시안 4 — 64 글꼴 칸이 YOUR PLACE 칸에 걸리지 않게 · 선 위를 6 줄여 높이 같음) · 선 36 navy (위 16 · 시안 22) · 설명 Crimson 300 18/27 mid (위 22) · 받을 메일 모노 9 muted (위 20 · 주소는 대문자로 바꾸지 않는다) · 아래 줄 모노 8.5 muted (버튼 아래 14) ★GOT IT 테두리 위 = 606/852 (시안 600 보다 6 아래)★ — 글 덩어리(345)가 시안에서 595 에 끝나 누르는 칸 44 를 둔다 자리 잡기: 글 덩어리 최소 높이가 버튼 자리까지 · 버튼은 그 바로 아래 · 아래 여백 24 — 낮은 화면(사파리 714 · 667)은 글이 끝난 곳 바로 아래라 스크롤 0 · 549 는 내려 본다 */ body:has(section[data-screen="waitlist"]:not([hidden])) footer { display: none; } .waitlist { min-height: var(--vh); display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 0; padding-bottom: 0; } .wl-mark { margin: calc(var(--vh) * 150 / 852) 0 0; line-height: 0; } .wl-mark img { display: block; width: 96px; height: 58px; opacity: .85; } /* 마크 432×259 비율 · 그림이 오기 전에도 자리를 잡는다 */ .wl-body { margin-top: max(20px, calc(var(--vh) * 250 / 852 - var(--vh) * 150 / 852 - 58px)); padding: 0 10px; width: 100%; min-height: calc(var(--vh) * 356 / 852 - 6px); } /* 글 덩어리가 GOT IT 자리(606/852)까지 · 넘치면 길어진다 */ .wl-label, .wl-place, .wl-mail, .wl-note { font-family: var(--mono); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; } .wl-label { font-size: 10px; line-height: 15px; color: var(--muted); } .waitlist h1 { margin-top: 16px; font-family: var(--serif); font-size: 38px; line-height: 44px; font-weight: 400; color: var(--navy); } .wl-place { margin-top: 26px; font-size: 9.5px; line-height: 15px; color: var(--bronze); } .wl-no { margin-top: 10px; font-family: var(--serif); font-size: 64px; line-height: 64px; letter-spacing: .02em; color: var(--navy); } /* 반듯한 숫자는 body 한 곳 */ .wl-rule { width: 36px; margin: 16px auto 0; border-top: 1px solid var(--navy); } .wl-text { margin-top: 22px; font-family: var(--display); font-size: 18px; line-height: 27px; font-weight: 300; color: var(--mid); } .wl-mail { margin-top: 20px; font-size: 9px; line-height: 15px; color: var(--muted); } .wl-mail [data-wl-mail] { text-transform: none; letter-spacing: .08em; } .wl-foot { margin: 0 calc(-1 * var(--gutter)); padding: 0 0 24px; display: flex; flex-direction: column; align-items: center; } /* 아래 줄은 화면 폭 전체 (시안 393 에서 한 줄 · SE 도 한 줄) */ .wl-note { margin-top: 8px; font-size: 8.5px; line-height: 13px; color: var(--muted); } /* 가는 테두리 버튼 = 앱 #204 home open (104×32 · 선 quietLine · 글자 quietText · 모노 10 · .24em) · ★누르는 칸은 128×44★ (테두리는 ::before) · 누르는 동안 브론즈 */ .quiet-btn { position: relative; width: 128px; min-height: var(--tap); padding: 0; font-family: var(--mono); font-size: 10px; line-height: 14px; font-weight: 400; letter-spacing: .24em; padding-left: .24em; text-transform: uppercase; color: var(--quiet-text); background: none; border: 0; } .quiet-btn::before { content: ""; position: absolute; left: 12px; right: 12px; top: 6px; bottom: 6px; border: 1px solid var(--quiet-line); pointer-events: none; } .quiet-btn:active { color: var(--bronze); } .quiet-btn:active::before { border-color: var(--bronze); } /* ── 결과 카드 여덟 — ★앱이 정본★ (nomi-app src/components/result-card.tsx · cards/*-card.tsx · design/cards.ts · 7ff39e5) ────────── 벽 위에 종이 한 장(안쪽 1px 선 · 옅은 그림자) · 맨 위 세 겹 물결 · 세로 눈금. ★#177 — 벽 = 한 단 어두운 종이 타일(--veil) · 종이 = 종이 타일 · 글자 · 표시 · 물결은 네이비 계열★ (카드 구조 · 한 화면 규칙 · 읽기 장치 그대로) ★띠 · 라벨 · 머리(.chead)는 위 · 바닥 줄은 아래에 고정 · 본문(.cbody)만 스크롤★ — 넘치면 아래 끝 32 를 종이색으로 흐린다. ★px 값은 앱 값 그대로다★ — 웹의 4 배수 격자 밖이어도(30 · 22 · 18 · 7 …) 앱이 정본이라 반올림하지 않는다. 높이 700 이하(앱 SMALL_H)만 카드 1 · 5 가 앱처럼 줄인다 — 글자 크기는 그대로 · 간격만. */ body:has(section.card:not([hidden])) { background: var(--veil), url('art/paper-tile@2x.webp') 0 0 / 418px 418px repeat, var(--paper); background-image: var(--veil), image-set(url('art/paper-tile@2x.webp') 2x, url('art/paper-tile@3x.webp') 3x); } /* ★종이가 화면 높이를 채운다★ — 벽 여백은 좌우 16 · 위 9 · 아래 12 + 안전 영역 (앱 result.tsx s.page). dvh = 사파리 주소창을 뺀 지금 보이는 높이 */ .screen.card { min-height: 100svh; min-height: 100dvh; padding: calc(9px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom)); } /* 카드 화면에서는 꼬리말(Privacy · Terms · Support)을 숨긴다 — 첫 화면 · 입력 화면에는 그대로 */ body:has(section.card:not([hidden])) footer { display: none; } .csheet { position: relative; display: flex; flex-direction: column; margin: 0 calc(var(--s4) - var(--gutter)); height: calc(100svh - 21px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - 21px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 480px; padding: 30px 30px 24px; background: url('art/paper-tile@2x.webp') 0 0 / 418px 418px repeat, var(--paper); background-image: image-set(url('art/paper-tile@2x.webp') 2x, url('art/paper-tile@3x.webp') 3x); box-shadow: 0 10px 28px rgba(19, 35, 53, .18); } .csheet::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); pointer-events: none; } .csheet > * { position: relative; } /* 머리 줄 16 — 왼쪽 세로 눈금(사이 7) · 오른쪽 ✕ 14 (앱 s.top) · ✕ 는 누르는 칸 44 를 음수 여백으로 줄 밖에 둔다 */ .ctop { display: flex; align-items: center; justify-content: space-between; height: 16px; flex: none; } .ticks { display: flex; align-items: flex-end; gap: 7px; height: 16px; } .tk { width: 1px; height: 10px; background: var(--line); } .tk.on { width: 2px; height: 16px; background: var(--navy); } .cclose { flex: none; display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin: -14px -15px -14px 0; color: var(--mid); } .cclose svg { display: block; } /* ★쪽빛 물결 띠 (#190 · 앱 #185 card-waves.tsx · design/cards.ts WAVE · result-card s.waves)★ — 카드 1~7 · 카드 n 에 n 겹 · 눈금 줄 바로 아래 18 칸 높이 = 맨 위 겹 판 높이 × (띠 높이 --bh ÷ 90) · 겹 i 판 높이 = WAVE.h[i] × 같은 배율 (h = 18 · 29 · 39 · 51 · 60 · 77 · 88) 띠 높이 --bh = 앱 bandHeight — 90 · 카드 4 는 78 · 카드 7 은 낮은 띠 30 · 높이 700 이하(앱 SMALL_H)는 카드 1 · 3 · 4 · 5 · 6 이 50 (아래 @media) 판은 칸 폭의 3 배(894 ÷ 298) · 왼쪽 −200% 에서 한 바퀴(판의 2/3)만큼 오른쪽으로 끝없이 (cards-view.js 가 겹마다 시간을 준다) · 바닥선 #C7BEAC (앱 s.base) 동작 줄이기 — 시작 자리(= 원래 띠 모양 · card-wave-svg.mjs 머리말)에 멈춘다 */ .cwave { --bh: 90; --hn: 18; position: relative; flex: none; overflow: hidden; margin-top: 18px; height: calc(var(--bh) * var(--hn) / 90 * 1px); } .wbase { position: absolute; left: 0; right: 0; bottom: 0; height: max(0.5px, calc(var(--bh) * 0.5 / 104 * 1px)); background: #C7BEAC; } .wl { position: absolute; bottom: 0; left: -200%; width: 300%; height: calc(var(--bh) * var(--h) / 90 * 1px); background: 0 0 / 100% 100% no-repeat; animation-name: wflow; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; } @keyframes wflow { from { transform: translate(0, 0); } to { transform: translate(66.6667%, 0); } } @media (prefers-reduced-motion: reduce) { .wl { animation-name: none; } } @media (prefers-reduced-motion: reduce) { .hk-arrow { animation-name: none; } } /* #250 ↓ 멈춤 */ .wt1 { --h: 18; background-image: url('art/app/wave/top1@2x.webp'); background-image: image-set(url('art/app/wave/top1@2x.webp') 2x, url('art/app/wave/top1@3x.webp') 3x); } .wt2 { --h: 29; background-image: url('art/app/wave/top2@2x.webp'); background-image: image-set(url('art/app/wave/top2@2x.webp') 2x, url('art/app/wave/top2@3x.webp') 3x); } .wt3 { --h: 39; background-image: url('art/app/wave/top3@2x.webp'); background-image: image-set(url('art/app/wave/top3@2x.webp') 2x, url('art/app/wave/top3@3x.webp') 3x); } .wt4 { --h: 51; background-image: url('art/app/wave/top4@2x.webp'); background-image: image-set(url('art/app/wave/top4@2x.webp') 2x, url('art/app/wave/top4@3x.webp') 3x); } .wt5 { --h: 60; background-image: url('art/app/wave/top5@2x.webp'); background-image: image-set(url('art/app/wave/top5@2x.webp') 2x, url('art/app/wave/top5@3x.webp') 3x); } .wt6 { --h: 77; background-image: url('art/app/wave/top6@2x.webp'); background-image: image-set(url('art/app/wave/top6@2x.webp') 2x, url('art/app/wave/top6@3x.webp') 3x); } .wt7 { --h: 88; background-image: url('art/app/wave/top7@2x.webp'); background-image: image-set(url('art/app/wave/top7@2x.webp') 2x, url('art/app/wave/top7@3x.webp') 3x); } .wm1 { --h: 18; background-image: url('art/app/wave/mid1@2x.webp'); background-image: image-set(url('art/app/wave/mid1@2x.webp') 2x, url('art/app/wave/mid1@3x.webp') 3x); } .wm2 { --h: 29; background-image: url('art/app/wave/mid2@2x.webp'); background-image: image-set(url('art/app/wave/mid2@2x.webp') 2x, url('art/app/wave/mid2@3x.webp') 3x); } .wm3 { --h: 39; background-image: url('art/app/wave/mid3@2x.webp'); background-image: image-set(url('art/app/wave/mid3@2x.webp') 2x, url('art/app/wave/mid3@3x.webp') 3x); } .wm4 { --h: 51; background-image: url('art/app/wave/mid4@2x.webp'); background-image: image-set(url('art/app/wave/mid4@2x.webp') 2x, url('art/app/wave/mid4@3x.webp') 3x); } .wm5 { --h: 60; background-image: url('art/app/wave/mid5@2x.webp'); background-image: image-set(url('art/app/wave/mid5@2x.webp') 2x, url('art/app/wave/mid5@3x.webp') 3x); } .wm6 { --h: 77; background-image: url('art/app/wave/mid6@2x.webp'); background-image: image-set(url('art/app/wave/mid6@2x.webp') 2x, url('art/app/wave/mid6@3x.webp') 3x); } [data-screen="card-1"] .cwave { --hn: 18; } [data-screen="card-2"] .cwave { --hn: 29; } [data-screen="card-3"] .cwave { --hn: 39; } [data-screen="card-4"] .cwave { --hn: 51; --bh: 78; } [data-screen="card-5"] .cwave { --hn: 60; } [data-screen="card-6"] .cwave { --hn: 77; } [data-screen="card-7"] .cwave { --hn: 88; --bh: 30; } @media (max-height: 700px) { [data-screen="card-1"] .cwave, [data-screen="card-3"] .cwave, [data-screen="card-4"] .cwave, [data-screen="card-5"] .cwave, [data-screen="card-6"] .cwave { --bh: 50; } } /* 라벨 — 모노 9.5/12 · .3em · navy · 띠 아래 24 (앱 s.eyebrow · 카드 7 낮은 띠는 16 · 공유 장은 아래 따로) */ .screen h1.c-eyebrow { flex: none; margin-top: 24px; font-family: var(--mono); font-size: 9.5px; line-height: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--navy); } /* ★#192 카드 1~7 균형 (앱 #195)★ — app.js balanceCard 가 --shift 를 단다 (물결 아래 빈 곳 = 꼬리줄 위 빈 곳) · 라벨 위에 더해 글 덩어리를 통째로 내린다 */ .screen.card h1.c-eyebrow { padding-top: var(--shift, 0px); } /* 머리(고정) · 본문(스크롤) 칸 — 라벨 아래 18 · 머리 아래 18 이 기본 (앱 headOffset · bodyOffset) · 카드마다 아래에서 바꾼다 */ .chead { flex: none; margin-top: 18px; } .cbox { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 18px 0 6px; } /* 아래 6 (#166 · 시안 바닥 줄에 맞춰 12 → 6) */ .cbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; /* 긴 본문만 이 칸 안에서 스크롤 · 스크롤바는 안 보인다 (앱 showsVerticalScrollIndicator false) */ padding-bottom: 4px; } .cbody::-webkit-scrollbar { display: none; } /* ★넘치고 끝까지 안 내렸을 때만★ (app.js 가 .cbox.over 를 단다) 아래 끝 32 — 종이색 0 → .85(72%) → 1 (앱 s.fade) */ .cfade { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; pointer-events: none; background: linear-gradient(rgba(240, 235, 226, 0), rgba(240, 235, 226, .85) 72%, var(--paper)); } .cbox.over .cfade { display: block; } /* 바닥 줄 — 윗줄 --line · 위 12 (#166) · 설명 모노 8.5/13 · .22em · ○→ 34 (누르는 칸 44 는 음수 여백으로) */ .cfoot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; /* #166 시안 — 16 → 12 */ border-top: 1px solid var(--line); } .c-meta { flex: 1; font-family: var(--mono); font-size: 8.5px; line-height: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--mid); } .cnext { flex: none; display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin: -5px -5px -5px auto; color: var(--navy); } .cnext svg { display: block; } /* 마지막 장 — 바닥 줄을 버튼 줄이 대신한다 (앱 path-card footer · 윗줄 없음 · 위 12 · 사이 10) · 아래 저장 안내 · 앱 자리는 웹에만 */ .cfoot.share { flex-direction: column; align-items: stretch; padding-top: 12px; border-top: 0; } .cfoot .pair { display: flex; gap: 10px; } .cbtn { flex: 1; height: var(--tap); font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .28em; text-indent: .28em; text-transform: uppercase; } .cbtn.line { border: 1px solid var(--navy); color: var(--navy); } .cbtn.fill { flex: 1.6; background: var(--navy); color: var(--paper); } .cbtn:disabled { opacity: .6; cursor: default; } /* ★읽기 장치 (#166)★ — 문단 첫 세 단어 작은 대문자 (Cormorant SC) · 문단 사이 navy 짧은 선 */ .sc { font-family: 'Cormorant SC', var(--serif); letter-spacing: .05em; color: var(--navy); } .rd-sep { display: block; width: 14px; height: 1px; margin: 8px 0 7px; background: var(--navy); } /* ★한 줄 제목★ — 넘치면 app.js(fitCard)가 글자를 줄인다 (앱 adjustsFontSizeToFit) */ [data-fit] { white-space: nowrap; } /* 1 · 열 해 (앱 decade-card) — 머리: 세 줄 · 이름 · 연도 / 본문(위 22): 열 칸 · 카운터 · 마무리 */ [data-screen="card-1"] .cbox { margin-top: 22px; } .c-lead { font-size: 16px; line-height: 25px; color: var(--mid); } .c-mode { margin-top: 36px; font-size: 62px; line-height: 62px; font-weight: 300; color: var(--navy); } .c-span { margin-top: 12px; font-family: var(--mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .24em; color: var(--navy); } .c-years { display: flex; align-items: flex-end; gap: 5px; } .c-years .yr { flex: 1; height: 2px; background: var(--line); } .c-years .yr.past { height: 5px; background: var(--navy); opacity: .85; } .c-years .yr.now { height: 9px; background: var(--navy); } .c-counter { margin-top: 10px; font-family: var(--mono); font-size: 9.5px; line-height: 12px; font-weight: 500; letter-spacing: .3em; color: var(--mid); } .c-closing { margin-top: 34px; font-size: 21px; line-height: 31px; color: var(--navy); } .c-closing em { color: var(--mid); } /* 2 · 지나온 두 해 (앱 carried-card · #166 시안) — 축 22(점 10 · 선 --line) · 본문(위 14) 전부 · 두 해가 한 화면 해마다: 연도 · 이름 22/24 → 구간(위 3) → 첫 문장 이탤릭 리드 16/21(위 7) → 나머지 14.5/20(위 5 · 첫 세 단어 작은 대문자) → "It landed in …" navy 선 12 + navy 이탤릭 13.5(위 6) */ [data-screen="card-2"] .cbox { margin-top: 14px; } .c-timeline { padding-left: 22px; } .tl { position: relative; } .tl + .tl { margin-top: 14px; } .tl::before { content: ""; position: absolute; left: -22px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--navy); } .tl.older::before { opacity: .55; } .tl.now::before { left: -22px; top: 1px; width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid var(--navy); background: var(--paper); } .tl:not(.now)::after { content: ""; position: absolute; left: -17.5px; top: 20px; bottom: -12px; width: 1px; background: var(--line); } .tl-head { display: flex; align-items: baseline; } .tl-year { font-family: var(--mono); font-size: 9.5px; line-height: 12px; font-weight: 500; letter-spacing: .2em; color: var(--navy); } .tl-mode { margin-left: 10px; font-size: 22px; line-height: 24px; color: var(--navy); } .tl-span { margin-top: 3px; font-family: var(--mono); font-size: 8px; line-height: 11px; font-weight: 500; letter-spacing: .2em; color: var(--muted); } .tl-lead { margin-top: 7px; font-size: 16px; line-height: 21px; font-style: italic; color: var(--navy); } .tl-body { margin-top: 5px; font-size: 14.5px; line-height: 20px; color: var(--mid); } .tl .rd-sep + .tl-body { margin-top: 0; } .tl-landed { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 13.5px; line-height: 18px; font-style: italic; color: var(--navy); } .tl-landed::before { content: ""; flex: none; width: 12px; height: 1px; background: var(--navy); transform: translateY(-4px); } .tl-aside { margin-top: 4px; font-size: 15px; line-height: 20px; font-style: italic; color: var(--mid); } .tl-now { font-family: var(--mono); font-size: 9.5px; line-height: 12px; font-weight: 500; letter-spacing: .3em; color: var(--navy); } /* 3 · 올해 (앱 arriving-card · ★#166 시안의 기준 장★) — 머리(라벨 아래 14): 연도 · 이름 54/58 · 레일(위 8 · 표시 = 올해 지난 비율 --at · #119) · 레일 글(위 6) / 본문(위 14): 줄 16.5/23 · 사이 10 · navy 선 14×2 */ [data-screen="card-3"] .chead { margin-top: 14px; } [data-screen="card-3"] .cbox { margin-top: 14px; } .c-yr3 { font-family: var(--mono); font-size: 9.5px; line-height: 12px; font-weight: 500; letter-spacing: .24em; color: var(--navy); } .c-mode3 { margin-top: 6px; font-size: 54px; line-height: 58px; font-weight: 300; color: var(--navy); } .c-track { position: relative; height: 12px; margin-top: 8px; } .c-track span { position: absolute; } .c-track .rail { left: 0; right: 7px; top: 5px; height: 1px; background: var(--line); } .c-track .fill { left: 0; width: var(--at, 50%); top: 4px; height: 3px; background: var(--navy); } .c-track .here { left: var(--at, 50%); margin-left: -6px; top: 0; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--navy); background: var(--paper); } .c-track .end { right: 0; top: 2px; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--mid); background: var(--paper); opacity: .65; } .c-track-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-family: var(--mono); font-size: 8.5px; line-height: 11px; font-weight: 500; } .c-track-labels .now { flex: none; letter-spacing: .24em; color: var(--navy); } .c-track-labels .next { min-width: 0; letter-spacing: .16em; color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-dashes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .c-dashes li { display: flex; align-items: flex-start; font-size: 16.5px; line-height: 23px; color: var(--navy); } .c-dashes li::before { content: ""; flex: none; width: 14px; height: 2px; margin: 11px 12px 0 0; background: var(--navy); } /* 4 · 열두 달 (앱 months-card · #166 시안) — 머리(라벨 아래 10): 연도 / 본문(위 4): 줄 29 · 날짜 칸 62 ★지금 텀 줄★ — 옅은 navy 띠(좌우 8 밖으로) · 이름 21 · 오른쪽 NOW + navy 점 6 */ [data-screen="card-4"] .chead { margin-top: 10px; } [data-screen="card-4"] .cbox { margin-top: 4px; } .c-yr4 { font-family: var(--mono); font-size: 9.5px; line-height: 12px; font-weight: 500; letter-spacing: .24em; color: var(--navy); } .c-months { list-style: none; margin: 0; padding: 0; } .c-months li { display: flex; align-items: center; height: 29px; } .c-months .d { flex: none; width: 62px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .18em; color: var(--mid); } .c-months .n { min-width: 0; font-size: 18px; color: var(--navy); } .c-months li.now { margin: 0 -8px; padding: 0 8px; background: rgba(19, 35, 53, .05); } .c-months li.now .d { color: var(--navy); } .c-months li.now .n { flex: 1; font-size: 21px; color: var(--navy); } .c-months .nowtag { flex: none; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .24em; color: var(--navy); } .c-months .dot { flex: none; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--navy); } .c-months.later .d, .c-months.later .n { color: var(--muted); } .c-turn { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-family: var(--mono); font-size: 8.5px; line-height: 11px; font-weight: 500; letter-spacing: .22em; color: var(--mid); } .c-turn::before, .c-turn::after { content: ""; flex: 1; height: 1px; background: var(--line); } .c-closing4 { margin-top: 10px; font-size: 16px; line-height: 22px; font-style: italic; color: var(--navy); } /* 5 · 세 영역 (앱 areas-card) — 머리(라벨 아래 6): IN 2026 / 본문(위 24): 영역 사이 18 · 띠 holds 18(위 8) · 벌어짐 28(위 6) · 앞장서는 곳 두 줄 */ [data-screen="card-5"] .chead { margin-top: 6px; } [data-screen="card-5"] .cbox { margin-top: 24px; } .c-in { font-family: var(--mono); font-size: 9.5px; line-height: 12px; font-weight: 500; letter-spacing: .3em; color: var(--navy); } .c-area + .c-area { margin-top: 18px; } .area-head { display: flex; align-items: baseline; justify-content: space-between; } .aname { font-size: 26px; line-height: 28px; color: var(--navy); } .astate { font-family: var(--mono); font-size: 9px; line-height: normal; font-weight: 500; letter-spacing: .26em; color: var(--mid); } .astate.on { color: var(--navy); } .area-band { margin-top: 6px; } .area-band.holds { margin-top: 8px; } .area-band svg { display: block; } .atxt { margin-top: 8px; font-size: 15.5px; line-height: 22px; color: var(--navy); } .c-carries { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 19px; line-height: 27px; font-style: italic; color: var(--navy); } /* 6 · 한 가지 (앱 one-thing-card · #166 시안) — 머리(라벨 아래 10): 두 줄 제목 40/42 · navy 줄 40×2(위 12) / 본문(위 14): ★맨 위 칸★(옅은 navy · 왼쪽 navy 2 · MOVES FASTEST 18 · HOLDS ITS GROUND 15) → 두 문단 15/21(첫 세 단어 작은 대문자) · 사이 구분(navy 18 · 점 · 가는 선) */ [data-screen="card-6"] .chead { margin-top: 10px; } [data-screen="card-6"] .cbox { margin-top: 14px; } .c-head6 { font-size: 40px; line-height: 42px; font-weight: 300; color: var(--navy); } .c-rule { display: block; width: 32px; height: 1px; margin-top: 20px; background: var(--navy); } [data-screen="card-6"] .c-rule { width: 40px; height: 2px; margin-top: 12px; } .c-focus { margin-bottom: 12px; padding: 10px 12px; background: rgba(19, 35, 53, .05); border-left: 2px solid var(--navy); } .f-label { font-family: var(--mono); font-size: 8px; line-height: 11px; font-weight: 500; letter-spacing: .24em; color: var(--navy); } .f-label.hold { margin-top: 7px; color: var(--muted); } .f-moves { margin-top: 3px; font-size: 18px; line-height: 22px; color: var(--navy); } .f-holds { margin-top: 3px; font-size: 15px; line-height: 19px; color: var(--mid); } .c-p { font-size: 15px; line-height: 21px; color: var(--mid); } .c-sep6 { display: flex; align-items: center; gap: 8px; margin: 12px 0; } .c-sep6 i { flex: 1; height: 1px; background: var(--line); } .c-sep6 i:first-child { flex: none; width: 18px; background: var(--navy); } .c-sep6 b { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); } /* ★넘칠 때만 한 단 줄인다 (#166)★ — 실제 글(393~566자) 가운데 영역 칸 + 긴 글은 아이폰 15 사파리에서 40~63 넘친다 → app.js 가 .tight 를 단다 (시안 값으로 넘칠 때만 · 14/19 · 제목 36/40 · 간격 조금) · 그래도 넘치면 본문 칸이 스크롤한다(자르지 않는다) */ .card.tight .c-head6 { font-size: 36px; line-height: 40px; } .card.tight .c-rule { margin-top: 10px; } .card.tight .cbox { margin-top: 10px; } .card.tight .c-focus { margin-bottom: 10px; padding: 8px 12px; } .card.tight .f-moves { font-size: 17px; line-height: 21px; } .card.tight .f-label.hold { margin-top: 5px; } .card.tight .c-p { font-size: 14px; line-height: 19px; } .card.tight .c-sep6 { margin: 8px 0; } /* 7 · 타고난 날 (앱 day-pillar-card · #166 시안) — 머리(라벨 아래 10): 그림 298:130(높이 60 · 시안 그림 띠 높이 66 근처 · 가운데) · 이름 한 줄 34/38 이탤릭(넘치면 줄인다) · 장면 줄 / 본문(위 12): ★소제목 셋을 I · II · III 칸★ (위 가는 선 · 위아래 12 · 번호 칸 22 · navy 라벨 · 16/22) · 마지막 칸 아래도 선 */ [data-screen="card-7"] h1.c-eyebrow { margin-top: 16px; } /* 앱 eyebrowCompact */ [data-screen="card-7"] .chead { margin-top: 8px; } [data-screen="card-7"] .cbox { margin-top: 10px; } .day-art { position: relative; width: min(100%, calc(60px * 298 / 130)); aspect-ratio: 298 / 130; margin: 0 auto; } .day-art img { position: absolute; inset: 0; width: 100%; height: 100%; } /* 위(일간) · 아래(일지) 두 조각을 겹친다 · 같은 판 크기 */ .day-name { margin-top: 8px; font-size: 34px; line-height: 38px; font-style: italic; font-weight: 300; color: var(--navy); } .day-scene { margin-top: 6px; font-family: var(--mono); font-size: 8.5px; line-height: 12px; font-weight: 500; letter-spacing: .24em; color: var(--navy); } .c-rule.day-rule { display: none; } .day-secs { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); } .day-sec { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .day-no { flex: none; width: 22px; font-family: var(--mono); font-size: 9px; line-height: 11px; font-weight: 500; letter-spacing: .1em; color: var(--navy); } .day-label { font-family: var(--mono); font-size: 8px; line-height: 11px; font-weight: 500; letter-spacing: .26em; color: var(--navy); } .day-p { margin-top: 4px; font-size: 16px; line-height: 22px; color: var(--navy); } /* 8 · 공유 카드 미리보기 (★#192 = 앱 #195 path-card★) — 물결 없음 · YOUR PATH 는 눈금 줄 아래 18 (왼쪽 · 앱 eyebrowNoBand) 미리보기 폭 = 393 에서 300 (폭 비례 · 종이 안쪽 − 60 까지) · ★종이에 남는 높이가 모자라면 미리보기만 줄인다★ (app.js fitPreview · 앱 previewWidth) 미리보기 아래 12 에 YEAR n OF 10 한 줄 (미리보기와 버튼 사이) → 버튼 위 12 → 버튼 둘 (높이 34 · 사이 10 · SHARE 테두리 1 : SAVE IMAGE 채움 2 · 모노 10 · .2em · 한 줄) ★누르는 영역은 위아래 5 씩 넓혀 44★ (앱 hitSlop 6 · 46) · 그 아래 웹에만 있는 작은 글 두 줄 (저장 안내 · App Store 줄) */ [data-screen="card-8"] h1.c-eyebrow { margin-top: 18px; } [data-screen="card-8"] .cbox { margin: 18px 0 0; } [data-screen="card-8"] .cbody { padding-bottom: 0; } .share-preview { flex: none; width: min(300px, 100%); aspect-ratio: 9 / 16; margin: 0 auto; box-shadow: 0 8px 20px rgba(19, 35, 53, .24); } .share-preview canvas { display: block; width: 100%; height: 100%; } /* 저장 · 공유 PNG 와 같은 canvas 한 장 */ .c-decade { margin-top: 12px; text-align: center; font-family: var(--mono); font-size: 8.5px; line-height: 12px; font-weight: 500; letter-spacing: .22em; color: var(--mid); } .cfoot.share .pair { gap: 10px; margin-top: 0; } .cfoot.share .cbtn { position: relative; height: 34px; padding: 0 6px; font-size: 10px; letter-spacing: .2em; text-indent: .2em; white-space: nowrap; } .cfoot.share .cbtn::after { content: ""; position: absolute; inset: -5px 0; } /* 누르는 영역 44 */ .cfoot.share .cbtn.line { flex: 1; } .cfoot.share .cbtn.fill { flex: 2; } .cfoot.share .cbtn[hidden] { display: none; } /* ★작은 화면 (높이 700 이하 · 앱 SMALL_H)★ — 글자 크기는 그대로 · 간격만. ★아이폰 15 사파리(보이는 높이 695)도 여기 든다★ #166 시안 장(2 · 3 · 4 · 6 · 7 · 8)은 시안 값 그대로 두고, 시안 밖 장(1 · 5)만 줄인다 (#119 · 앱 3875b5c #108 답 2) */ @media (max-height: 700px) { .c-mode { margin-top: 24px; } .c-closing { margin-top: 22px; } [data-screen="card-5"] .cbox { margin-top: 14px; } /* 본문 위 24 → 14 */ [data-screen="card-5"] .c-area + .c-area { margin-top: 10px; } /* 영역 사이 18 → 10 */ [data-screen="card-5"] .atxt { margin-top: 6px; } /* 문장 위 8 → 6 */ [data-screen="card-5"] .c-carries { margin-top: 12px; padding-top: 10px; } /* 마무리 위 20+14 → 12+10 */ } /* ★SE 크기 (높이 600 이하)★ — 카드 7 그림만 52 높이 · 넘치는 장은 본문 칸 안에서 스크롤한다(자르지 않는다 · 아래 끝 흐림) */ @media (max-height: 600px) { .day-art { width: calc(52px * 298 / 130); } } /* ── About · FAQ (/about · #158) ───────────────────────────────── 무료분석과 같은 결 — 기둥 · 종이 · 글꼴 그대로. 머리 ★워드마크 폭 100 (#177 · 홈으로)★ → ABOUT 라벨 → 제목 30/38 → 본문 17/28 → Know when. → FAQ 라벨 → 질문(모노 작은 대문자 · navy) · 답(본문 글꼴) */ .about-page header { display: block; padding-top: var(--s6); text-align: center; } .about-page .mark { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; } /* #223 404 — about 과 같은 결 · 제목 아래 첫 화면 링크 하나 */ .notfound h1 { margin-top: var(--s4); } .notfound p { margin-top: var(--s6); } .about { padding: var(--s10) 0 var(--s16); } .about section + section { margin-top: var(--s16); } .about-label { font-family: var(--mono); font-size: 10px; line-height: 16px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .about h1 { margin-top: var(--s4); font-size: 30px; line-height: 38px; font-weight: 300; color: var(--navy); } .about p { margin-top: var(--s5); font-size: 17px; line-height: 28px; color: var(--navy); } .about h1 + p { margin-top: var(--s6); } .about .about-close { margin-top: var(--s8); font-size: 30px; line-height: 38px; font-weight: 300; color: var(--navy); } .faq { margin: var(--s6) 0 0; } /* ★#214 FAQ 묶음 소제목 (질문 17 더함)★ — ABOUT NOMI · ACCOUNT AND PRIVACY · PURCHASES AND READINGS · 라벨과 같은 작은 모노 · 질문(navy · 위 선)과 갈리게 bronze · 묶음 사이 s16 */ .faq-group { margin-top: var(--s16); font-family: var(--mono); font-size: 10px; line-height: 16px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); } .about-label + .faq-group { margin-top: var(--s6); } #faq { scroll-margin-top: var(--s6); } /* #214 /about#faq 로 열면 FAQ 라벨이 화면 맨 위에 붙지 않게 */ .faq-group + .faq { margin-top: var(--s5); } .faq dt { margin-top: var(--s10); padding-top: var(--s5); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; line-height: 18px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); } .faq dt:first-child { margin-top: 0; } .faq dd { margin: var(--s3) 0 0; font-size: 17px; line-height: 28px; color: var(--mid); } /* ── 꼬리말 ─────────────────────────────────────────────────────── */ footer { padding: var(--s6) 0 var(--s12); border-top: .5px solid var(--line); font-size: 13px; line-height: 20px; color: var(--mid); } footer nav { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s2); } footer a { display: inline-flex; align-items: center; min-height: var(--tap); } /* ── ★폰 판 (#175 · A안)★ ───────────────────────────────────────── 창이 폰 판(430×932)보다 크면(태블릿 · 컴퓨터 · 폰 가로) 모든 화면을 ★폰 판 하나★ 안에 그린다 — 폭 min(창, 430) · 높이 min(창, 932) · 창 가운데. ★폰(창 ≤ 430×932)에는 이 절이 아예 안 걸린다★ — 위의 규칙이 그대로다. 판 = body (container-type: size). 판 안의 화면 단위는 판 기준으로 바꾼다: vw → cqw · vh · svh · dvh → cqh. body 에 contain: layout paint — 판 밖은 그리지 않는다. 판이 스크롤 칸이다 (폰처럼 판 안에서 내린다 · 스크롤바는 안 보인다). ★#177 판 바깥 = 같은 종이 타일에 한 단 어두운 색(--veil)★ · 가장자리 머리카락 선 하나 */ @media (min-width: 431px), (min-height: 933px) { html { height: 100%; overflow: hidden; display: grid; place-items: center; background: var(--veil), url('art/paper-tile@2x.webp') 0 0 / 418px 418px repeat, var(--paper); background-image: var(--veil), image-set(url('art/paper-tile@2x.webp') 2x, url('art/paper-tile@3x.webp') 3x); } body { position: relative; width: min(100vw, 430px); height: min(var(--vh), 932px); /* #194 보이는 높이 고정 */ overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; container-type: size; contain: layout paint; /* ★판이 position: fixed 의 기준 상자 · 판 밖은 그리지 않는다★ */ outline: 1px solid var(--line); } body::-webkit-scrollbar { display: none; } /* 한 장 — 높이는 판 높이 (폰의 dvh 자리) */ .screen { min-height: 100cqh; padding-bottom: calc(max(calc(100cqh * var(--foot-bottom) / 844 - env(safe-area-inset-bottom)), 20px) + env(safe-area-inset-bottom)); } .head { margin-top: calc(100cqh * 46 / 844); } .screen:has(.bline) { padding-bottom: 0; } .screen.onb { height: 100cqh; } .hero .engine3 { letter-spacing: max(0px, min(2px, calc((100cqw - 80px) / 28 - 6px))); } .mid.place { padding-top: calc(100cqh * 64 / 844); } [data-screen="preview"] .head .label { margin-bottom: calc(100cqh * 21 / 844); } [data-screen="preview"] .rule { margin-top: calc(100cqh * 20 / 844); } .list { margin-top: calc(100cqh * 30 / 844); } /* 로그인 — 워드마크 · 제목 자리 판 기준 */ .signin .gap.top { height: max(8px, calc(100cqh * 150 / 852)); } .signin .head { margin-top: max(16px, calc(100cqh * (270 - 150 - 35.77) / 852)); } /* 로딩 — 글자 자리 · 먹 모두 판 기준 (판이 fixed 의 기준 상자다) */ .reading { top: calc(132 / 852 * 100cqh); } .screen .l-title { top: calc(132 / 852 * 100cqh + 38px); } #loading-birth { top: calc(132 / 852 * 100cqh + 114px); } .l-lines { top: calc(132 / 852 * 100cqh + 168px); } #loading-note { top: calc(132 / 852 * 100cqh + 208px); } .ink { top: max(calc(560 / 852 * 100cqh), calc(132 / 852 * 100cqh + 418px)); } #failure-lines { margin-top: calc(150 / 844 * 100cqh); } /* #201 Welcome back · 마지막 장 · 카드 8 첫 화면 몫 — 판 높이 */ .screen.wb, .screen.toapp { height: 100cqh; } .toapp .sundial { margin-top: max(16px, calc(100cqh * 210 / 852 - 39px)); } .toapp .head { margin-top: max(12px, calc(100cqh * 120 / 852 - 66px)); } .cfirst { height: calc(100cqh - 21px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 54px); } /* #218 줄 서기 — 판 높이 */ .waitlist { min-height: 100cqh; } .wl-mark { margin-top: calc(100cqh * 150 / 852); } .wl-body { margin-top: max(20px, calc(100cqh * 100 / 852 - 58px)); } .wl-body { min-height: calc(100cqh * 356 / 852 - 6px); } /* 카드 — 종이 높이는 판 높이 (폰의 dvh 자리) → 판 안에서 폰과 같은 비율 */ .screen.card { min-height: 100cqh; } .csheet { height: calc(100cqh - 21px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } }