/* Saidso 앱 디자인 토큰을 웹으로 옮김 — lib/theme.dart 기준 */ :root { --bg: #F8F6EE; /* cream */ --ink: #000; --muted: rgba(0,0,0,.6); /* 라벨 등 보조 텍스트 (AA) */ --hint: rgba(0,0,0,.4); --divider: rgba(0,0,0,.12); --beige: #F0E4C0; --pink: #F1DAE1; --mint: #DAE8E2; --radius: 4px; --serif-display: "Inria Serif", Georgia, serif; --serif-quote: "Noto Serif KR", Georgia, serif; --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.75 var(--sans); word-break: keep-all; overflow-wrap: break-word; } a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; } main { max-width: 600px; margin: 0 auto; padding: 24px 24px 96px; } /* 상단: 왼쪽 경로, 오른쪽 언어 칩 */ .top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 56px; font-size: 14px; } .top a { color: var(--muted); text-decoration: none; } .top a:hover { color: var(--ink); } .chips { display: flex; gap: 8px; } .chip { font: 500 13px/1 var(--sans); padding: 9px 14px; border: 0; border-radius: 999px; background: rgba(0,0,0,.06); color: var(--ink); cursor: pointer; } .chip[aria-pressed="true"] { background: var(--ink); color: #fff; } /* 워드마크 + 태그라인 */ .wordmark { font: 400 56px/1 var(--serif-display); margin: 0 0 12px; letter-spacing: -.01em; } .tagline { color: var(--muted); margin: 0; } h1.title { font: 600 28px/1.3 var(--sans); margin: 0 0 8px; } .date { color: var(--muted); font-size: 14px; margin: 0; } /* 앱의 1열 카드 그대로 */ .cards { display: grid; gap: 8px; margin: 40px 0; } .card { border-radius: var(--radius); padding: 18px 20px; } .card q { display: block; font: 500 17px/1.6 var(--serif-quote); quotes: "\201C" "\201D"; } .card span { display: block; margin-top: 12px; font-size: 12px; } /* 섹션: 라벨(13, muted) → 내용 — 앱 상세화면의 InfoRow 문법 */ section.block { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--divider); } .label { font-size: 13px; color: var(--muted); margin: 0 0 16px; } p { margin: 0 0 12px; } .lead { font-size: 17px; line-height: 1.8; } .qa + .qa { margin-top: 24px; } .qa h3 { font: 600 16px/1.5 var(--sans); margin: 0 0 4px; } .qa p { color: rgba(0,0,0,.72); } .policy h2 { font: 600 16px/1.5 var(--sans); margin: 32px 0 6px; } .policy p { font-size: 15px; line-height: 1.85; color: rgba(0,0,0,.78); } /* 앱의 PrimaryButton */ .btn { display: inline-block; background: var(--ink); color: #fff; text-decoration: none; font: 600 14px/16px var(--sans); padding: 16px 24px; border-radius: var(--radius); margin-top: 8px; } .btn:hover { opacity: .85; } .email { font-size: 17px; } .apps a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0; text-decoration: none; } .apps b { font: 400 28px/1 var(--serif-display); } .apps small { color: var(--muted); font-size: 14px; text-align: right; } footer { margin-top: 72px; font-size: 13px; color: var(--hint); } /* 언어 전환: 과 다른 lang 블록은 숨김 */ html[data-lang="ko"] [lang="en"], html[data-lang="en"] [lang="ko"] { display: none; } @media (max-width: 420px) { .wordmark { font-size: 48px; } .top { margin-bottom: 40px; } }