:root { color-scheme: dark; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0b0f17; color: #eef2f9; font-family: system-ui, -apple-system, 'Noto Sans KR', sans-serif;
       min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; line-height: 1.6;
       padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right));
       /* CJK breaks between any two characters unless told otherwise, which wraps headings mid-word. */
       word-break: keep-all; overflow-wrap: break-word; }
main { max-width: 760px; width: 100%; }
.brand { letter-spacing: .26em; color: #FF3B5C; font-weight: 800; font-size: 14px; display: inline-block;
         text-decoration: none; min-height: 24px; }
a.brand:hover { color: #ff6b83; }
h1 { font-size: clamp(28px, 6vw, 46px); line-height: 1.15; margin: 14px 0 12px; text-wrap: balance; }
p.lede { color: #c3ccdd; font-size: clamp(15px, 2.2vw, 18px); text-wrap: pretty; }
ul { list-style: none; margin: 26px 0; display: grid; gap: 10px; }
li { padding-left: 22px; position: relative; color: #c3ccdd; font-size: 15px; }
li::before { content: '\25AA'; position: absolute; left: 4px; color: #FF3B5C; }
a.cta { display: inline-block; margin-top: 8px; background: #FF3B5C; color: #0b0f17; font-weight: 700;
        padding: 13px 26px; border-radius: 10px; text-decoration: none; min-height: 44px; }
a.cta:focus-visible, nav a:focus-visible, footer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
nav { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }
nav a { color: #8d99ad; text-decoration: none; padding: 4px 2px; }
nav a:hover { color: #eef2f9; text-decoration: underline; }
nav a[aria-current="page"] { color: #eef2f9; font-weight: 700; }
footer { margin-top: 26px; font-size: 12px; color: #6f7a8d; }
footer a { color: #8d99ad; }

/* ---- content pages (genre guides, legal documents) ---- */
h2 { font-size: clamp(18px, 3vw, 22px); margin: 30px 0 10px; }
h3 { font-size: 16px; margin: 22px 0 8px; }
.crumbs { margin: 10px 0 4px; font-size: 13px; color: #6f7a8d; }
.crumbs a { color: #8d99ad; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.dim { color: #8d99ad; font-weight: 400; }
.num { text-align: right; font-variant-numeric: tabular-nums; color: #c3ccdd; }
.facts { display: grid; gap: 1px; margin: 22px 0 4px; background: #1b2231; border: 1px solid #1b2231; border-radius: 12px; overflow: hidden; }
.facts > div { display: grid; grid-template-columns: minmax(7em, auto) 1fr; align-items: baseline;
               gap: 6px 16px; padding: 11px 14px; background: #121826; }
.facts dt { color: #8d99ad; font-size: 13px; }
.facts dd { font-weight: 700; text-align: right; }
/* Below about a phone's width a two-column row makes both halves too narrow to read; stacking is
   the honest answer, and the label stays above its value where it belongs. */
@media (max-width: 420px) {
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { text-align: left; }
}
table.fits { width: 100%; border-collapse: collapse; }
table.fits th { text-align: left; font-weight: 600; color: #c3ccdd; font-size: 14px; padding: 7px 10px 7px 0; white-space: nowrap; }
table.fits td { padding: 7px 0 7px 10px; }
.meter { display: block; height: 8px; border-radius: 4px; background: #1b2231; overflow: hidden; min-width: 90px; }
.meter i { display: block; height: 100%; background: #FF3B5C; }
/* Widths as classes because the policy is style-src 'self': a width written as a style attribute in
   generated markup is refused the same way an inline style block is, and the bar renders at zero. */
.meter i.w0 { width: 0%; }
.meter i.w5 { width: 5%; }
.meter i.w10 { width: 10%; }
.meter i.w15 { width: 15%; }
.meter i.w20 { width: 20%; }
.meter i.w25 { width: 25%; }
.meter i.w30 { width: 30%; }
.meter i.w35 { width: 35%; }
.meter i.w40 { width: 40%; }
.meter i.w45 { width: 45%; }
.meter i.w50 { width: 50%; }
.meter i.w55 { width: 55%; }
.meter i.w60 { width: 60%; }
.meter i.w65 { width: 65%; }
.meter i.w70 { width: 70%; }
.meter i.w75 { width: 75%; }
.meter i.w80 { width: 80%; }
.meter i.w85 { width: 85%; }
.meter i.w90 { width: 90%; }
.meter i.w95 { width: 95%; }
.meter i.w100 { width: 100%; }
ul.rivals { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
ul.rivals li { padding: 5px 11px; border: 1px solid #1b2231; border-radius: 999px; font-size: 14px; }
ul.rivals li::before { content: none; }
ul.cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: 24px 0; }
ul.cards li { padding: 0; }
ul.cards li::before { content: none; }
ul.cards a { display: grid; gap: 3px; padding: 13px 15px; border: 1px solid #1b2231; border-radius: 12px;
             background: #121826; color: #eef2f9; text-decoration: none; min-height: 44px; }
ul.cards a:hover { border-color: #FF3B5C; }
ul.cards .dim { font-size: 12.5px; }
nav.genres { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 7px 12px; font-size: 13px; }
nav.genres a { color: #8d99ad; text-decoration: none; padding: 4px 2px; }
nav.genres a:hover { color: #eef2f9; text-decoration: underline; }
nav.genres a[aria-current="page"] { color: #eef2f9; font-weight: 700; }
article.doc { margin-top: 18px; }
article.doc h1 { font-size: clamp(24px, 5vw, 36px); }
article.doc p { color: #c3ccdd; margin: 10px 0; font-size: 15px; }
article.doc ul { margin: 12px 0; gap: 8px; }
article.doc code { background: #121826; border: 1px solid #1b2231; border-radius: 5px; padding: 1px 5px; font-size: 13px; }
article.doc strong { color: #eef2f9; }
article.doc a { color: #FF8D9E; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }