:root { color-scheme: light dark; } * { box-sizing: border-box; } body { margin:0; font-family:'Pretendard',system-ui,-apple-system,'Segoe UI',Roboto,'Apple SD Gothic Neo','Noto Sans KR',sans-serif; color:#1f2430; background:#f4f5f7; line-height:1.75; -webkit-font-smoothing:antialiased; } .wrap { max-width:760px; margin:0 auto; padding:28px 22px 64px; } header.site { display:flex; align-items:center; justify-content:space-between; padding:6px 0 22px; border-bottom:1px solid #e3e6ec; margin-bottom:26px; } .logo { font-size:22px; font-weight:800; letter-spacing:-0.5px; color:#1f2430; text-decoration:none; } .logo b { color:#FF4D4D; } .site-nav a { color:#6b7280; text-decoration:none; margin-left:14px; font-size:14px; } .site-nav a:hover { color:#d83a3a; } h1 { font-size:29px; font-weight:800; letter-spacing:-0.5px; margin:0 0 10px; line-height:1.3; } h2 { font-size:20px; font-weight:700; margin:34px 0 10px; letter-spacing:-0.3px; } h3 { font-size:16px; font-weight:700; margin:22px 0 6px; } p, li { font-size:15.5px; color:#333a48; } li { margin:4px 0; } a { color:#d83a3a; } .lead { font-size:17px; color:#3a4150; margin:0 0 8px; } .en { color:#6b7280; font-size:14px; font-weight:400; } .crumb { margin:0 0 14px; font-size:14px; } .crumb a { color:#6b7280; text-decoration:none; } .crumb a:hover { color:#d83a3a; } blockquote { margin:16px 0; padding:10px 16px; border-left:3px solid #FF4D4D; background:#fff; color:#4a5160; border-radius:0 8px 8px 0; } .card { background:#fff; border:1px solid #e3e6ec; border-radius:12px; padding:16px 18px; margin:18px 0; } .cta { margin-top:34px; } .btn { display:inline-block; margin-top:6px; background:#FF4D4D; color:#fff; text-decoration:none; font-weight:700; padding:9px 16px; border-radius:10px; } .grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; } .gcard { display:block; background:#fff; border:1px solid #e3e6ec; border-radius:12px; padding:16px; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; } .gcard:hover { border-color:#FF4D4D; transform:translateY(-2px); } .gcard h3 { margin:0 0 6px; color:#1f2430; } .gcard p { margin:0; font-size:14px; color:#6b7280; } footer.site { margin-top:44px; padding-top:18px; border-top:1px solid #e3e6ec; font-size:14px; color:#6b7280; } footer.site nav a { color:#6b7280; text-decoration:none; margin-right:14px; } footer.site nav a:hover { color:#d83a3a; text-decoration:underline; } .copy { margin:10px 0 0; } /* Language toggle — Korean by default; English when . display:revert keeps block/inline defaults (works for
and ). */ .lang-en { display:none; } html.show-en .lang-ko { display:none; } html.show-en .lang-en { display:revert; } .langswitch { font-size:13px; margin-left:14px; white-space:nowrap; } .langswitch a { color:#9aa3b2; text-decoration:none; cursor:pointer; } .langswitch a:hover { color:#d83a3a; } .langswitch .sep { color:#c9ced8; margin:0 5px; } @media (max-width:560px){ .grid { grid-template-columns:1fr; } } @media (prefers-color-scheme: dark) { body { background:#15171c; color:#e5e7eb; } .logo, h1, h2, h3 { color:#f3f4f6; } p, li { color:#c5cad3; } /* .lead is a class → beats the `p` rule above; needs its own dark override (else the light-mode #3a4150 stays dark-on-dark and is unreadable). */ .lead { color:#d7dce4; } header.site, footer.site { border-color:#2a2e37; } .card, .gcard, blockquote { background:#1c1f26; border-color:#2a2e37; } .gcard h3 { color:#f3f4f6; } .en, .crumb a, footer.site, footer.site nav a, .site-nav a, .gcard p, blockquote { color:#9aa3b2; } }