/* KKOOK (꼬옥) — 2026-10-15 밤 회장님 결정: 앱 = KKOOK 빨강 「OO」, 블로그 koreastarterkit.com 은 파랑 체크(별개 브랜드). * 「같은 집안, 다른 색」: 구조(카드 둥글기 20 · 버튼 56/48 둥글기 14 · 입력 56 · 글자 t1–t7 · 여백 20)는 지원금모야 preset_toss 그대로 * (앱형\site\config\preset_toss.json · 규격_토스뱅크.md). 바탕 흰색, 글자 먹색, 카드는 얇은 회색 선. * 색의 역할: 빨강 #CD2E3A = 로고·머리말 글자·주 버튼·선택(활성) 상태에만 · 초록 #16A34A = 체크 완료·진행 · 주황 = 곧 할 일·경고. * 흰 글자/빨강 5.2:1 · 빨간 글자 #A8232E 7.1:1 · 초록 글자 #15803D 5.0:1 · 주황 글자 #C2410C 5.2:1. 무늬·띠 없음. * 옛 버전: ..\_old_blue\ (지원금모야 파랑) · ..\_old_hanji\ (전통색). Mobile first (390px). */ :root { color-scheme: light; --grey50: #f9fafb; --grey100: #f2f4f6; --grey200: #e5e8eb; --grey300: #d1d6db; --grey400: #b0b8c1; --grey500: #8b95a1; --grey600: #6b7684; --grey700: #4e5968; --grey800: #333d4b; --red: #cd2e3a; --red-dark: #a8232e; --red-weak: #fdecee; --green: #16a34a; --green-ink: #15803d; --orange: #f97316; --orange-ink: #c2410c; --orange-weak: #fff4e5; --orange-line: #fed7aa; --bg: #fff; --card: #fff; --text: #1a1a1a; --text2: var(--grey700); --caption: var(--grey600); --line: var(--grey200); --primary: var(--red); --primary-hover: var(--red-dark); --r-card: 20px; --r-btn: 14px; --r-input: 14px; --r-chip: 999px; --gutter: 20px; --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", "Malgun Gothic", sans-serif; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.5; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } /* Japanese: Pretendard carries Korean-style hanja, so kana/kanji (and the Latin around them) use a Japanese face first */ :lang(ja) { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, system-ui, sans-serif; letter-spacing: 0; line-break: strict; } body:lang(ja) { line-height: 1.6; } h1:lang(ja), h2:lang(ja), h3:lang(ja), .btn:lang(ja) { word-break: auto-phrase; } /* Korean: keep words whole at line ends */ :lang(ko) { letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; } body:lang(ko) { line-height: 1.55; } h1, h2, h3, p { margin: 0; } a { color: var(--text); } button { font: inherit; color: inherit; } svg { width: 20px; height: 20px; flex: none; } :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 6px; } main:focus, h1:focus { outline: none; } h1:focus-visible { outline: 3px solid var(--red); } .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- frame: white header (wordmark) · white page · white footer ---------- */ .shell { min-height: 100vh; display: flex; flex-direction: column; } .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px var(--gutter); padding-top: max(8px, env(safe-area-inset-top)); background: var(--card); box-shadow: 0 1px 0 var(--line); } .brand { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; text-decoration: none; } .brand img { display: block; width: auto; height: 22px; } /* language picker = 지원금모야 「큰 글씨」 pill: white, grey line, round */ .lang-toggle { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--card); color: var(--text2); font-weight: 600; font-size: 15px; cursor: pointer; } .lang-toggle:hover { border-color: var(--grey300); color: var(--text); } /* the header language picker is a native