:root { color-scheme:light; --ink:#2c2119; --muted:#695647; --orange:#be3e08; --line:#ead9c7; --paper:#fff; --wash:#fff5eb }
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:24px }
body { margin:0; background:var(--wash); color:var(--ink); font:16px/1.8 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; overflow-wrap:break-word }
a { color:var(--orange); text-underline-offset:4px }
a:focus-visible,summary:focus-visible { outline:3px solid #155b83; outline-offset:5px; border-radius:4px }
img { display:block; max-width:100%; object-fit:contain }
.shell { width:min(1060px,calc(100% - 40px)); margin:auto }
.skip { position:absolute; left:20px; top:-100px; padding:12px; background:#fff; z-index:2 }
.skip:focus { top:12px }
.topbar { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line) }
.wordmark { filter:brightness(0); object-fit:contain }
.back { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:800 }
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:26px 0; font-size:13px; color:var(--muted) }
.breadcrumb a { min-height:44px; display:inline-flex; align-items:center }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:36px; padding:18px 0 40px; align-items:center }
.eyebrow { margin:0 0 12px; color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.04em }
h1,h2,h3,p { margin-top:0 }
h1 { font-size:clamp(30px,4.1vw,46px); line-height:1.3; letter-spacing:-.04em; word-break:keep-all; margin-bottom:22px }
h2 { font-size:clamp(22px,3vw,28px); line-height:1.45; letter-spacing:-.03em; word-break:keep-all; margin-bottom:12px }
h3 { font-size:20px; line-height:1.4; margin:12px 0 }
p { color:var(--muted); margin-bottom:16px }
strong,b { color:var(--ink) }
.lead { font-size:18px }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 20px; margin:6px 8px 0 0; border-radius:14px; font-weight:800; text-decoration:none; line-height:1.5; text-align:center }
.primary { background:var(--orange); color:#fff }
.secondary { background:#fff; color:var(--ink); border:1px solid var(--line) }
.easyboy { padding:28px 18px; border:1px solid #f6c38d; border-radius:28px; background:#ffe5c6; text-align:center }
.easyboy img { margin:0 auto 18px; image-rendering:pixelated }
.easyboy strong { display:block; font-size:19px; line-height:1.6 }
.easyboy span { display:block; margin-top:12px; color:var(--muted); font-size:13px }
.section { margin:32px 0 48px }
.three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:22px }
.card { border:1px solid var(--line); border-radius:22px; background:var(--paper); padding:24px }
.icon { margin-bottom:18px; image-rendering:pixelated }
.step { color:var(--orange); font-size:12px; font-weight:800 }
.card p { font-size:15px }
.card small { display:block; color:var(--muted); font-size:13px; padding-top:12px; border-top:1px solid var(--line) }
.coins { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px }
.coins a { display:flex; gap:10px; align-items:center; min-height:76px; padding:14px 12px; border:1px solid var(--line); border-radius:16px; background:var(--paper); text-decoration:none }
.coins img { flex:0 0 32px }
.coins small { display:block; color:var(--muted); font-size:12px }
.questions details { border-bottom:1px solid var(--line) }
.questions summary { cursor:pointer; padding:20px 8px; font-size:17px; font-weight:750; word-break:keep-all }
.questions details>div { padding:0 8px 18px; max-width:840px }
.questions details>div a { font-size:15px }
code { background:#f0e4d4; color:#4b2d12; padding:3px 6px; border-radius:5px }
.sources ul { padding-left:22px; margin:20px 0; color:var(--muted) }
.sources li { margin:10px 0 }
.sources li a { display:inline-block; padding:3px 0 }
.source-brand { display:flex; gap:9px; align-items:center; font-size:13px; font-weight:750; padding-top:16px; border-top:1px solid var(--line) }
.next { padding:28px; border-radius:24px; background:#ffe5c6 }
.footer { padding:24px 0 40px; font-size:13px; border-top:1px solid var(--line) }
.footer p { margin:8px 0 }
.footer a { display:inline-flex; align-items:center; min-height:44px }
@media(max-width:760px) {
  .hero { grid-template-columns:1fr; gap:20px }
  .easyboy { display:grid; grid-template-columns:74px 1fr; gap:0 14px; text-align:left; padding:18px }
  .easyboy img { grid-row:1/3; width:74px; height:96px; margin:0; align-self:center }
  .easyboy strong { font-size:17px }
  .easyboy span { margin-top:6px }
  .three { grid-template-columns:1fr }
  .coins { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .card { padding:20px }
}
@media(max-width:380px) {
  .shell { width:calc(100% - 32px) }
  .wordmark { width:120px }
  .back { font-size:12px }
  .coins a { gap:8px; padding:12px 10px }
  .coins small { font-size:11px }
  .lead { font-size:16px }
  .next { padding:20px }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }