/* * 게임 앱(katago.namalzi.io)과 같은 디자인 언어 — 먹색·크림의 흑백 팔레트. * 토큰 값은 match-katago-ai-web/src/app/globals.css 와 동일하게 유지한다. * * 테마 전환 버튼은 두지 않는다. 이 사이트는 글만 있는 입구라, 기기 설정을 그대로 따른다 * ( 는 첫 페인트 전에 스크립트가 확정한다 — build.mjs 의 THEME_SCRIPT). */ :root, :root[data-theme="light"] { --bg: #f6f4ef; --surface: #ffffff; --raised: #eae7df; --primary: #3f3b36; --on-primary: #f5f1e8; --text: #191714; --muted: #6e6a62; --border: rgba(25, 23, 20, 0.14); } :root[data-theme="dark"] { --bg: #0f0e0c; --surface: #1b1a17; --raised: #272521; --primary: #ede7db; --on-primary: #181511; --text: #f4f1ea; --muted: #a6a199; --border: rgba(244, 241, 234, 0.12); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; font-size: 16px; line-height: 1.75; -webkit-text-size-adjust: 100%; } /* 키보드로 탐색할 때만 나타나는 본문 바로가기. */ .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 10; padding: 0.5rem 0.9rem; border-radius: 0.5rem; background: var(--primary); color: var(--on-primary); } a { color: inherit; } /* ── 머리말 ─────────────────────────────────────────────── */ .site-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.25rem; max-width: 46rem; margin: 0 auto; padding: 1.75rem 1.25rem 0; } .brand { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; color: var(--primary); } .site-head nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-left: auto; font-size: 0.9rem; } .site-head nav a { color: var(--muted); text-decoration: none; } .site-head nav a:hover, .site-head nav a:focus-visible { color: var(--text); text-decoration: underline; } .site-head nav .lang { padding-left: 1rem; border-left: 1px solid var(--border); } /* ── 본문 ───────────────────────────────────────────────── */ main { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; } h1 { margin: 0 0 1rem; font-size: 2rem; line-height: 1.3; letter-spacing: -0.02em; color: var(--primary); } h2 { margin: 2.75rem 0 0.75rem; font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.01em; } h3 { margin: 0 0 0.25rem; font-size: 1.1rem; } p { margin: 0 0 1rem; } .lead { font-size: 1.1rem; font-weight: 600; color: var(--text); } ul { margin: 0 0 1rem; padding-left: 1.25rem; } li { margin-bottom: 0.4rem; } section p:last-child, section ul:last-child { margin-bottom: 0; } /* ── 게임 카드 ──────────────────────────────────────────── */ .cards { display: grid; gap: 1rem; margin-top: 1.25rem; } .card { padding: 1.25rem 1.35rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); } .card .genre { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--muted); } .card p:last-child { margin-bottom: 0; } /* ── 버튼·링크 줄 ───────────────────────────────────────── */ .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.25rem; } .actions a { text-decoration: none; color: var(--muted); } .actions a:hover, .actions a:focus-visible { color: var(--text); text-decoration: underline; } .actions .primary { padding: 0.7rem 1.4rem; border-radius: 0.75rem; background: var(--primary); color: var(--on-primary); font-weight: 700; } .actions .primary:hover, .actions .primary:focus-visible { text-decoration: none; opacity: 0.9; } .links a, .contact a { color: var(--text); } .contact { margin-top: 2rem; padding: 0.9rem 1.1rem; border-radius: 0.75rem; background: var(--raised); } .dates { color: var(--muted); font-size: 0.85rem; } /* ── 광고 자리 ──────────────────────────────────────────── */ /* * 글과 광고 사이를 넉넉히 띄운다 — 본문과 붙어 있으면 글의 일부로 오해받기 쉽고, * 그 자체가 AdSense 가 금지하는 배치다. */ .ad-slot { display: block; margin: 2.5rem 0; min-height: 90px; } /* ── 꼬리말 ─────────────────────────────────────────────── */ .site-foot { max-width: 46rem; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.875rem; } .site-foot p { margin: 0 0 0.4rem; } .site-foot .copy { margin-top: 0.75rem; } @media (min-width: 40rem) { h1 { font-size: 2.35rem; } main { padding-top: 3rem; } }