/* ============================================================ SETFLIX ORIGINAL — 리뉴얼 시안 Premium cinema design system (warm dark) Anti-AI-slop guide applied: solid color planes, hairline borders, differentiated radius scale, serif+Pretendard pairing, considered single-accent (curtain red) + sparing champagne gold, keep-all Korean wrapping, intentional motion. ============================================================ */ /* Pretendard (body) */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css"); :root { /* warm-dark cinema surfaces (espresso, not pure black) */ --bg: #14110f; --bg-2: #1b1714; /* raised: rows / nav */ --bg-3: #221d19; /* cards / modals */ --bg-4: #2a2420; /* hover / inputs */ /* warm off-white ink (reduces halation on Hangul) */ --ink: #ece6dd; --ink-soft: #c9c1b5; --muted: #978d80; --faint: #6f665b; /* hairlines (warm) */ --line: #322b25; --line-2: #423a32; /* single considered accent — deepened curtain red */ --accent: #b8332b; --accent-hi: #cf4338; --accent-deep: #7e231e; --accent-ink: #f6efe9; /* text on accent */ /* premium tier — champagne / brass (used VERY sparingly) */ --gold: #c8a86a; --gold-soft: #d8bd86; /* differentiated radius scale (no rounded-xl-everywhere) */ --r-xs: 3px; --r-sm: 5px; --r-md: 9px; --r-lg: 14px; /* 8pt spacing */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; /* fonts */ --font-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --font-head: "Noto Serif KR", "Pretendard Variable", serif; --font-mono: "SFMono-Regular", ui-monospace, "Roboto Mono", "Courier New", monospace; /* spring easing (linear() baseline, cubic fallback) */ --spring: cubic-bezier(0.34, 1.4, 0.5, 1); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --maxw: 1680px; } @supports (animation-timing-function: linear(0, 1)) { :root { --spring: linear(0, 0.12, 0.32, 0.5, 0.69, 0.83, 0.92, 0.97, 1); } } /* ---- theme overrides set on by Tweaks ---- */ body[data-accent="garnet"] { --accent:#9a2b2e; --accent-hi:#b5393b; --accent-deep:#681d20; } body[data-accent="red"] { --accent:#ed3626; --accent-hi:#ff5546; --accent-deep:#b01f12; } body[data-accent="wine"] { --accent:#7d2e3f; --accent-hi:#9c3b50; --accent-deep:#551f2b; } body[data-head="serif"] { --font-head:"Noto Serif KR","Pretendard Variable",serif; } body[data-head="display"] { --font-head:"Fraunces","Noto Serif KR",serif; } body[data-head="grotesk"] { --font-head:"Pretendard Variable",sans-serif; } body[data-theme="light"] { --bg:#f0eee9; --bg-2:#e9e6df; --bg-3:#fbfaf7; --bg-4:#efece5; --ink:#1a1714; --ink-soft:#3c352e; --muted:#6b6259; --faint:#9a9087; --line:#ddd6c9; --line-2:#c9c0b1; --accent-ink:#fbf6f1; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background .5s var(--ease), color .5s var(--ease); } h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.24; letter-spacing: -0.01em; text-wrap: balance; margin: 0; } p { text-wrap: pretty; margin: 0; } a { color: inherit; text-decoration: none; } /* small fixed-width badges/labels must not break between glyphs (body sets overflow-wrap:anywhere) */ .tile-badge, .tile-rank, .chip, .tag, .badge-vip, .gnb-link .sub, .pflag, .hero-meta .pill, .ad-tag, .banner-adtag, .cat-spot-tag, .macc-row .sub, .gnb-dd .tag, .gate-cats .gc, .vid-stat .v, .plan-price .amt { overflow-wrap: normal; word-break: keep-all; } button { font-family: inherit; cursor: pointer; } img { display: block; border: 0; } ::selection { background: var(--accent); color: var(--accent-ink); } /* film-grain — base seasoning, not a feature (soft-light, very low) */ body::after { content:""; position: fixed; inset: -120%; pointer-events: none; z-index: 9998; opacity: .04; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body[data-grain="off"]::after { display: none; } /* scrollbars */ *::-webkit-scrollbar { height: 10px; width: 10px; } *::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid var(--bg); } *::-webkit-scrollbar-track { background: transparent; } /* ---------- layout shell ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 60px); } /* ---------- top nav ---------- */ .nav { position: sticky; top: 0; z-index: 200; background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(10px) saturate(1.2); border-bottom: 1px solid var(--line); transition: background .4s var(--ease), border-color .4s var(--ease); } @supports not (backdrop-filter: blur(1px)) { .nav { background: var(--bg); } } .nav.scrolled { background: color-mix(in oklab, var(--bg) 95%, transparent); } .nav-inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); height: 68px; } .nav-left { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); min-width: 0; flex: 1; } .nav-cats { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); min-width: 0; overflow: hidden; } .nav-cat { font-size: 14px; color: var(--ink-soft); white-space: nowrap; position: relative; padding: 6px 0; transition: color .2s var(--ease); } .nav-cat:hover { color: var(--ink); } .nav-cat.active { color: var(--ink); } .nav-cat.active::after { content:""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); } .nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* logo */ .logo { display: inline-flex; align-items: center; gap: 11px; } .logo-mark { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 20px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-hi) 60%, transparent); } .logo-word { font-family: var(--font-head); font-weight: 700; font-size: 19px; letter-spacing: .02em; } .logo-word b { color: var(--accent-hi); font-weight: 700; } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: transform .18s var(--spring), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .btn:active { transform: scale(.97); } .btn-solid { background: var(--accent); color: var(--accent-ink); } .btn-solid:hover { background: var(--accent-hi); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--ink-soft); background: var(--bg-3); } .btn-quiet { background: transparent; color: var(--ink-soft); } .btn-quiet:hover { color: var(--ink); } .btn-gold { background: transparent; color: var(--gold); border-color: color-mix(in oklab, var(--gold) 45%, transparent); } .btn-gold:hover { background: color-mix(in oklab, var(--gold) 12%, transparent); border-color: var(--gold); } .btn-block { width: 100%; } .btn-lg { height: 48px; padding: 0 26px; font-size: 15px; } .btn:disabled { opacity: .45; pointer-events: none; } /* eyebrow / numbered label */ .eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); } /* hairline divider */ .rule { height: 1px; background: var(--line); border: 0; } /* ---------- focus ring ---------- */ :focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 2px; } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }