:root { --ink:#17221d; --paper:#f8f5ed; --lime:#d9ee70; --pink:#ff806a; --blue:#b9e1e8; --card:#fffdf7; --muted:#617169; --line:rgba(23,34,29,.16); color-scheme:light; }
:root[data-theme="dark"] { --ink:#edf4ea; --paper:#14231d; --lime:#c8dc61; --pink:#ff947d; --blue:#2f6970; --card:#1e342b; --muted:#bac9bf; --line:rgba(237,244,234,.18); color-scheme:dark; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans KR",sans-serif; } button,input,select,textarea { font:inherit; } a { color:inherit;text-decoration:none; }
.site-header { height:78px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line); }.brand { display:flex;align-items:center;gap:9px;font:500 14px "DM Mono",monospace;letter-spacing:-.04em; }.brand-mark { display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:17px; } nav { display:flex;gap:30px;font-size:13px;font-weight:700; } nav a { opacity:.66; } nav a:hover { opacity:1; }.theme-toggle { display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);border-radius:30px;background:transparent;color:var(--ink);font:500 10px "DM Mono",monospace;cursor:pointer; }.theme-toggle:hover { background:var(--ink);color:var(--paper); }.theme-toggle:focus-visible,button:focus-visible,a:focus-visible { outline:2px solid var(--pink);outline-offset:3px; }
.hero { min-height:570px;padding:88px 11vw;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:7vw;overflow:hidden; }.eyebrow { margin:0;color:var(--muted);font:500 11px "DM Mono",monospace;letter-spacing:.1em; }.eyebrow span { display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--pink); }.hero h1,.section h2 { margin:19px 0;letter-spacing:-.075em;line-height:1.06;font-size:clamp(52px,7vw,100px); }.hero h1 em,.section h2 em { color:var(--pink);font-style:normal; }.hero-copy > p:not(.eyebrow) { max-width:430px;color:var(--muted);line-height:1.8;word-break:keep-all; }.hero-link { display:inline-block;margin-top:20px;border-bottom:1px solid var(--ink);padding-bottom:5px;font-size:13px;font-weight:800; }.hero-link span { margin-left:11px;font-size:17px; }.hero-graphic { position:relative;height:370px;background:var(--blue);border-radius:48% 52% 43% 57% / 45% 43% 57% 55%; }.plate { position:absolute;inset:68px auto auto 50%;width:220px;height:220px;display:grid;place-items:center;transform:translateX(-50%) rotate(-11deg);border:12px solid #f8f3e5;border-radius:50%;background:#ffb883;box-shadow:17px 20px 0 rgba(23,34,29,.13); }.plate span { font-size:99px;filter:saturate(.9); }.hero-graphic p { position:absolute;right:-12px;bottom:24px;color:var(--ink);font:500 11px/1.6 "DM Mono",monospace; }.dot { position:absolute;width:23px;height:23px;border-radius:50%;background:var(--lime); }.dot-one { top:31px;left:36px; }.dot-two { bottom:38px;left:-12px;background:var(--pink); }.squiggle { position:absolute;right:25px;top:21px;color:var(--paper);font-size:33px;font-style:normal; }
.stats { display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);color:var(--paper); }.stats div { min-height:126px;padding:29px 11vw;border-right:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;justify-content:center; }.stats div:nth-child(2) { padding-left:5vw;padding-right:5vw; }.stats div:nth-child(3) { padding-left:5vw; }.stats b { font-size:23px;letter-spacing:-.04em; }.stats span { margin-top:6px;color:#bdc8bd;font:10px "DM Mono",monospace;letter-spacing:.06em; }
.section { padding:120px 11vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw; }.section h2 { font-size:clamp(38px,4.7vw,68px); }.section-note { color:var(--muted);font-size:13px; }.picker-section { background:var(--lime); }.picker-card { align-self:center;padding:45px;background:var(--card);box-shadow:12px 13px 0 var(--ink); }.picker-label { margin:0;color:var(--muted);font:11px "DM Mono",monospace;letter-spacing:.08em; }.picker-card output { display:block;margin:18px 0 8px;font-size:clamp(27px,3.2vw,45px);font-weight:800;letter-spacing:-.06em; }.picker-card > p:not(.picker-label) { min-height:28px;margin:0 0 26px;color:var(--muted);font-size:14px; }.primary-button { border:0;background:var(--ink);color:var(--paper);padding:15px 18px;font-size:13px;font-weight:800;cursor:pointer; }.primary-button span { margin-left:20px;font-size:17px; }.text-button { display:block;margin-top:17px;padding:0;border:0;border-bottom:1px solid var(--ink);background:none;color:var(--ink);font-size:12px;font-weight:800;cursor:pointer; }.text-button:disabled { opacity:.35;cursor:not-allowed; }
.ranking-section { background:var(--card); }.ranking-card { align-self:center;border-top:1px solid var(--line); }.rank-item { display:grid;grid-template-columns:32px 37px 1fr 48px 46px;gap:9px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line); }.rank-item > b { color:var(--muted);font:11px "DM Mono",monospace; }.rank-emoji { font-size:24px; }.rank-copy { min-width:0; }.rank-copy strong { display:block;font-size:14px; }.meter { height:5px;margin-top:8px;overflow:hidden;background:var(--line);border-radius:4px; }.meter i { display:block;height:100%;background:var(--pink);transition:width .3s; }.rank-item em { color:var(--pink);font:700 14px "DM Mono",monospace;font-style:normal; }.rank-item button,.quick-vote button { border:1px solid var(--line);background:transparent;color:var(--ink);padding:6px 7px;font-size:10px;font-weight:700;cursor:pointer; }.rank-item button:hover,.quick-vote button:hover { background:var(--ink);color:var(--paper); }.quick-vote { grid-column:2;margin-top:8px;padding:20px;background:var(--blue); }.quick-vote p { margin:0 0 10px;font-size:12px;font-weight:800; }.quick-vote div { display:flex;flex-wrap:wrap;gap:6px; }
.talk-section { background:var(--paper); }.talk-intro > p:not(.eyebrow) { color:var(--muted);font-size:14px;line-height:1.8;word-break:keep-all; }.disqus-wrap { min-width:0;padding:30px;background:var(--card);border:1px solid var(--line); }.disqus-wrap #disqus_thread { min-height:120px; } footer { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:32px 6vw;background:var(--ink);color:var(--paper);font-size:12px; } footer p { margin:0;color:#bdc8bd; } footer > span { font:10px "DM Mono",monospace; }
.rank-item button:disabled,.quick-vote button:disabled { opacity:.45;cursor:not-allowed; }.rank-item button:disabled:hover,.quick-vote button:disabled:hover { background:transparent;color:var(--ink); }.quick-vote p span { color:var(--muted);font:10px "DM Mono",monospace; }.vote-status { display:block;margin-top:12px;color:var(--muted);font-size:11px; }
@media (max-width:760px) { .site-header { height:66px;padding:0 6vw; } nav { display:none; }.theme-toggle b { display:none; }.theme-toggle { padding:7px; }.hero { min-height:650px;padding:65px 7vw 0;display:block; }.hero h1 { font-size:60px; }.hero-graphic { height:260px;margin:44px -7vw 0;border-radius:45% 55% 0 0; }.plate { top:33px;width:180px;height:180px; }.plate span { font-size:76px; }.stats div { min-height:100px;padding:20px 5vw!important; }.stats b { font-size:17px; }.stats span { font-size:8px; }.section { padding:75px 7vw;display:block; }.section h2 { font-size:43px; }.picker-card { margin-top:35px;padding:28px;box-shadow:8px 8px 0 var(--ink); }.ranking-card { margin-top:34px; }.quick-vote { margin-top:20px; }.talk-intro { margin-bottom:35px; }.disqus-wrap { padding:17px; } footer { padding:27px 7vw;display:block; } footer p { margin:18px 0; } }