:root { --bg:#090b11; --panel:#151923; --line:#292f3c; --text:#f5f7fb; --muted:#97a0b3; --accent:#58e1bc; --pink:#f269c6; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 90% 0%,#1d2142 0,transparent 30%),var(--bg); font-family:"Noto Sans KR",sans-serif; }
a { color:inherit; text-decoration:none; }
.container { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.site-header { min-height:72px; display:flex; gap:28px; align-items:center; border-bottom:1px solid var(--line); }
.site-header nav { display:flex; gap:22px; margin-left:auto; }.site-header nav a { color:var(--muted); font-size:14px; }.site-header nav a:hover,.site-header nav a[aria-current="page"] { color:var(--text); }.nav-toggle { display:none; }
.brand { font-size:19px; font-weight:800; letter-spacing:-.8px; }.brand span { color:var(--accent); }.site-header p,.field-hint { margin:0; color:var(--muted); font-size:13px; }
.hero { padding:76px 0 34px; }.eyebrow { margin:0 0 10px; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:1.5px; }
h1,h2 { margin:0; letter-spacing:-1.7px; } h1 { font-size:clamp(31px,5vw,53px); line-height:1.23; } h2 { font-size:27px; }
.search-panel { padding:22px; background:rgba(21,25,35,.9); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 35px #0003; }
form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:18px; align-items:start; } fieldset { min-width:0; margin:0; padding:0; border:0; } legend { margin-bottom:11px; font-size:14px; font-weight:600; }.filter-selector { grid-column:1/-1; }.filter-selector legend span { margin-left:6px; color:var(--muted); font-size:12px; font-weight:400; }.filter-toggles { display:flex; flex-wrap:wrap; gap:9px; }.filter-toggles label { cursor:pointer; }.filter-toggles input { position:absolute; opacity:0; }.filter-toggles span { display:block; padding:9px 13px; color:var(--muted); border:1px solid var(--line); border-radius:999px; font-size:14px; }.filter-toggles input:checked + span { border-color:var(--accent); color:var(--text); background:#173832; }.filter-field { padding:13px; border:1px solid var(--line); border-radius:10px; background:#10141d; }.filter-field > label { display:block; }
.platform-options { display:flex; gap:9px; }.platform-options label { cursor:pointer; }.platform-options input { position:absolute; opacity:0; }.platform-options span { display:block; padding:9px 13px; color:var(--muted); border:1px solid var(--line); border-radius:8px; font-size:14px; }.platform-options input:checked + span { border-color:var(--accent); color:var(--text); background:#173832; }
.viewer-inputs { display:grid; grid-template-columns:1fr 18px 1fr; align-items:end; gap:7px; }.viewer-inputs label span { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; }.viewer-inputs input { width:100%; padding:10px 11px; color:var(--text); background:#0e1119; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; }.range-divider { text-align:center; color:var(--muted); padding-bottom:9px; }.field-hint { margin-top:8px; font-size:11px; }
.filter-field input { width:100%; padding:10px 11px; color:var(--text); background:#0e1119; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px; }.suggestion-box { margin-top:12px; }.suggestion-box p { margin:0 0 7px; color:var(--muted); font-size:11px; }.suggestion-list { display:flex; flex-wrap:wrap; gap:5px; max-height:84px; overflow-y:auto; }.suggestion-list button { max-width:100%; overflow:hidden; padding:4px 7px; border:1px solid #374055; border-radius:999px; color:#c7cedb; background:#1c2230; font:inherit; font-size:11px; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }.suggestion-list button:hover { border-color:var(--accent); color:var(--accent); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.search-button { align-self:center; padding:12px 18px; border:0; border-radius:8px; color:#06120e; background:var(--accent); font:inherit; font-weight:800; cursor:pointer; white-space:nowrap; }.search-button:hover { background:#85f1d4; }.form-error { margin:16px 0 0; color:#ff9e9e; font-size:13px; }
[hidden] { display:none !important; }.results-section { padding:64px 0; }.results-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; }.results-heading > p { margin:0; color:var(--muted); font-size:14px; }.status-message,.empty-state { display:grid; min-height:220px; place-content:center; color:var(--muted); text-align:center; border:1px dashed var(--line); border-radius:14px; }.empty-state span { font-size:38px; line-height:1; }.empty-state p { margin:12px 0 0; font-size:14px; }
.site-footer { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; padding:34px 0 42px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }.site-footer p { margin:7px 0 0; }.site-footer nav { display:flex; justify-content:flex-end; flex-wrap:wrap; align-content:start; gap:8px 18px; }.site-footer nav a:hover { color:var(--text); }.copyright { grid-column:1/-1; padding-top:16px; border-top:1px solid var(--line); }.content-page { max-width:830px; padding-top:76px; padding-bottom:90px; }.content-page h1 { margin-bottom:20px; }.content-page .lead { max-width:680px; margin:0 0 48px; color:#c7cedc; font-size:18px; line-height:1.8; }.content-page section { padding:27px 0; border-top:1px solid var(--line); }.content-page h2 { font-size:21px; }.content-page section p { color:#b8c0d0; line-height:1.9; }.updated { margin:-8px 0 40px; color:var(--muted); font-size:13px; }
.stream-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }.stream-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--panel); transition:transform .18s,border-color .18s; }.stream-card:hover { transform:translateY(-3px); border-color:#586176; }.thumbnail-link { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#202534; }.thumbnail { width:100%; height:100%; object-fit:cover; }.live-badge,.viewer-count { position:absolute; top:10px; padding:3px 7px; border-radius:4px; font-size:11px; font-weight:700; }.live-badge { left:10px; background:#f13e67; }.viewer-count { right:10px; background:#080a0dbb; }.stream-info { padding:13px; }.stream-title { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; min-height:43px; font-size:14px; font-weight:600; line-height:1.55; }.stream-title:hover { text-decoration:underline; }.channel-row { display:flex; gap:7px; align-items:center; margin-top:12px; color:var(--muted); font-size:12px; }.profile-image { width:23px; height:23px; border-radius:50%; object-fit:cover; background:#272d3a; }.streamer-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.platform-badge { margin-left:auto; padding:2px 5px; border:1px solid #394152; border-radius:3px; font-size:10px; white-space:nowrap; }
.stream-category { margin:10px 0 0; overflow:hidden; color:#c9d1df; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.stream-tags { display:flex; gap:5px; overflow:hidden; margin:8px 0 0; padding:0; list-style:none; }.stream-tags li { overflow:hidden; max-width:100%; padding:2px 5px; border-radius:3px; color:#9bedd9; background:#1c3a35; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1000px) { form { grid-template-columns:1fr 1fr; }.search-button { grid-column:span 2; }.stream-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px) { .container { width:min(100% - 28px,1180px); }.site-header { min-height:64px; position:relative; }.nav-toggle { display:block; margin-left:auto; padding:6px; border:0; color:var(--text); background:transparent; font:inherit; font-size:13px; }.site-header nav { display:none; position:absolute; z-index:5; top:56px; right:0; width:160px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 10px 25px #0007; }.site-header nav.is-open { display:grid; gap:0; }.site-header nav a { padding:9px; }.hero { padding:50px 0 28px; } .search-panel { padding:17px; } form { grid-template-columns:1fr; gap:21px; }.search-button { grid-column:auto; width:100%; }.stream-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.results-section { padding:48px 0; }.results-heading { align-items:start; gap:12px; flex-direction:column; }.stream-info { padding:10px; }.stream-title { font-size:13px; }.channel-row { gap:5px; }.site-footer { grid-template-columns:1fr; }.site-footer nav { justify-content:flex-start; }.content-page { padding-top:50px; padding-bottom:60px; }.content-page .lead { font-size:16px; } }