:root{--burgundy:#a50044;--gold:#edbb00;--ink:#17171a;--muted:#8b8b93}*{box-sizing:border-box;border-width:0;border-style:solid}body,p,h1,h2,h3{margin:0}body{background:#f4f4f6;color:var(--ink);font-family:'Noto Sans KR',sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button,a,[role=button]{-webkit-tap-highlight-color:transparent}button,[role=button],a{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}img{display:block}button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}.sidebar{width:272px;background:white;border-right:1px solid #e3e3e8;position:fixed;inset:0 auto 0 0;padding:28px 20px;overflow:auto;z-index:10}.brand{display:flex;gap:11px;align-items:center;font:800 19px Inter,sans-serif}.brand-mark{background:linear-gradient(135deg,#a50044,#004d98);width:38px;height:42px;border-radius:13px;color:white;display:grid;place-items:center;font-size:26px}.brand small{display:block;font-size:8px;letter-spacing:.7px;color:#777;margin-top:6px}.side-intro{font-size:19px;font-weight:700;line-height:1.6;margin:30px 10px;color:#37343e}.nav-group{font-size:10px;letter-spacing:1px;color:#999;margin:24px 12px 8px}.nav-item{display:flex;align-items:center;gap:10px;border-radius:10px;padding:10px 12px;font-size:13px;margin:2px 0}.nav-item span{color:#a9a2ae;font:10px Inter}.nav-item:hover{background:#f4f1f5}.nav-item.active{background:#a50044;color:white}.nav-item.active span{color:#eebbd0}footer{font-size:10px;line-height:2;color:#999;border-top:1px solid #eee;margin-top:24px;padding:18px 10px}.workspace{margin-left:272px;padding:28px 44px 24px}.workspace-head{display:flex;justify-content:space-between;max-width:860px;margin:auto}.eyebrow{font:10px Inter;letter-spacing:1.7px;color:#8b8492}h1{font-size:22px;margin-top:6px}.workspace-head button{border:1px solid #dedbe3;background:white;padding:10px 14px;border-radius:12px;font-size:12px;align-self:center}.phone-wrap{width:390px;height:844px;margin:24px auto}.phone{position:relative;width:390px;height:844px;border-radius:36px;overflow:hidden;background:#2a2145;box-shadow:0 28px 70px #25133325,0 0 0 8px #fff,0 0 0 9px #e3dfe5;isolation:isolate}#app{position:absolute;inset:0;color:white}.screen-scroll{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}.screen-scroll::-webkit-scrollbar{display:none}.design-root{width:390px!important;padding-bottom:24px}.bottom-tabs{position:absolute!important;top:auto!important;bottom:24px!important;left:50%!important;transform:translateX(-50%)!important;z-index:5;backdrop-filter:blur(18px);border:1px solid #ffffff20;box-shadow:inset 0 1px #ffffff20}.bottom-tabs a,.bottom-tabs [role=button]{overflow:visible!important;min-height:40px}.bottom-tabs [aria-current=page]{filter:brightness(1.7)}.preview-note{text-align:center;color:#8a8490;font-size:11px;margin:20px 0}.horizontal-scroll{overflow-x:auto!important;scrollbar-width:none;touch-action:pan-x}.is-selected{outline:2px solid var(--gold)!important;outline-offset:-2px}.chat-input{background:transparent;width:100%;min-width:0;color:#202029;outline:none;font-size:12px}.chat-message{padding:10px 16px;font-size:12px;border-top:1px solid #ffffff14;white-space:normal}.empty-state{padding:30px;text-align:center;font-size:13px;color:#bbb}.action-input{width:100%;background:transparent;color:inherit;outline:none;font-size:inherit}.search-label{width:100%!important}.game-frame{position:absolute;inset:0;border:0;width:100%;height:100%;background:#111}.game-exit{position:absolute;right:12px;top:10px;z-index:8;border-radius:20px;background:#000b;color:white;padding:8px 12px;font-size:12px}#toast{position:absolute;bottom:102px;left:20px;right:20px;z-index:30;border-radius:16px;padding:14px;background:#18141ef0;color:white;font-size:12px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}dialog{position:absolute;margin:auto 12px 16px;width:366px;max-width:calc(100% - 24px);max-height:78%;overflow:auto;border-radius:24px;padding:28px 22px;background:#fff;color:#221b2b;box-shadow:0 20px 60px #0006}dialog::backdrop{background:#0007}.sheet-close{position:absolute;right:14px;top:10px;background:none;font-size:26px;color:#888}dialog h2{font-size:21px;margin:5px 20px 18px 0}dialog p{font-size:13px;line-height:1.8;color:#726c79;margin:10px 0}dialog input,dialog textarea,dialog select{width:100%;border:1px solid #ddd5e2;border-radius:12px;padding:12px;margin:6px 0 12px}dialog textarea{height:100px;resize:vertical}dialog label{font-size:12px}dialog .primary{display:block;background:#a50044;color:white;border-radius:14px;padding:14px;width:100%;font-weight:700;margin:10px 0}dialog .secondary{padding:12px;background:#f1edf5;border-radius:12px;margin:5px}.my-page{padding:56px 24px;background:linear-gradient(160deg,#6e1038,#2a2145 65%);min-height:844px}.my-page h2{font-size:25px}.my-page p{font-size:13px;margin:16px 0;color:#ddd}.my-page a{display:block;background:#ffffff13;padding:18px;border-radius:16px;margin:12px 0}.ball-preview{transition:transform .5s}.animate-avatar{animation:sway 1.5s ease-in-out infinite alternate}@keyframes sway{to{transform:translateY(-8px) rotate(3deg)}}
@media(max-width:760px){body{background:#2a2145}.sidebar{display:none;width:272px;box-shadow:0 0 0 100vmax #0008}.sidebar.open{display:block}.workspace{margin:0;padding:0}.workspace-head{position:fixed;right:9px;top:5px;z-index:9}.workspace-head>div{display:none}.workspace-head button{font-size:0;padding:7px;border:0;background:#0004;color:#fff;border-radius:50%;width:30px;height:30px}.workspace-head button:after{content:'☰';font-size:15px}.phone-wrap{margin:0 auto;width:100%;height:100dvh;display:flex;justify-content:center}.phone{border-radius:0;box-shadow:none;height:100dvh;min-height:650px;flex-shrink:0}.preview-note{display:none}.bottom-tabs{bottom:max(18px,env(safe-area-inset-bottom))!important}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.extra-game{padding:18px 10px;background:#ffffff22;border-radius:14px;font-size:12px;flex:1}.user-post{background:#ffffff0d;border:1px solid #ffffff25;border-radius:24px;padding:18px;width:358px;flex-shrink:0}.user-post small{color:#bbb;font-size:11px}.user-post h3{font-size:14px;margin:12px 0}.user-post p{font-size:12px;line-height:1.7;white-space:pre-wrap}.private-actions{position:absolute;top:665px;left:16px;width:358px;display:flex;gap:10px}.private-actions button{background:#ffffff24;color:white;padding:14px;flex:1;border-radius:18px;font-size:12px}
.design-root:not([data-screen=login]){display:flow-root}[data-node-id="76:116"],[data-node-id="76:145"],[data-node-id="57:17"],[data-node-id="57:31"],[data-node-id="59:27"],[data-node-id="59:44"],[data-node-id="59:61"],[data-node-id="152:473"],[data-node-id="152:494"]{box-shadow:inset 0 0 0 1px #ffffff25}.design-root input{line-height:inherit}.screen-scroll:has([data-screen=product]){background:white}.screen-scroll:has([data-screen=login]){background:#080808}
.bottom-tabs{right:auto!important;width:330px}#app:has([data-screen=match]) .bottom-tabs{width:358px}

/* Constrain the news row so its cards overflow inside a real scroll viewport. */
[data-node-id="76:134"].home-carousel{width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:hidden;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;user-select:none}
.home-carousel.dragging,.home-carousel.dragging *{cursor:grabbing!important}
.carousel-dot{padding:0;width:6px;height:6px;flex-shrink:0;border-radius:999px;background:#3a3a42;position:relative}
.carousel-dot:before{content:"";position:absolute;inset:-9px -4px}
.carousel-dot.active{width:16px;background:white}

/* Inert Figma title links, drawer, home style picker */
a.inert{cursor:default}
.drawer{position:absolute;inset:0;z-index:40;background:#0000;transition:background .2s}
.drawer.open{background:#0009}
.drawer-panel{position:absolute;top:0;bottom:0;left:0;width:318px;background:#17131f;color:#fff;padding:52px 18px 28px;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;scrollbar-width:none}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;font:800 18px Inter,sans-serif;margin-bottom:10px}
.drawer-close{font-size:26px;background:none;color:#aaa;width:36px;height:36px}
.drawer-label,.my-label{font-size:11px;letter-spacing:.8px;color:#a39bb0;margin:22px 2px 10px}
.drawer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.drawer-grid a{background:#ffffff10;border-radius:14px;padding:12px 8px;font-size:12px;line-height:1.35;min-height:62px}
.drawer-grid a small{display:block;font:700 9px Inter,sans-serif;letter-spacing:.8px;color:#edbb00;margin-bottom:4px}
.drawer-grid a:hover{background:#ffffff1c}
.drawer-note{font-size:11px;color:#8d869a;margin-top:12px}
.home-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.home-option{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;background:#ffffff0d;border:1.5px solid #ffffff1a;border-radius:16px;padding:10px;color:#fff}
.home-option.on{border-color:#edbb00;background:#edbb0014}
.home-option b{font-size:13px}.home-option small{font-size:10px;line-height:1.45;color:#b5aec0}
.home-thumb{width:100%;height:58px;border-radius:10px;background:#0b0b0e;display:flex;flex-direction:column;gap:4px;padding:6px;margin-bottom:4px}
.home-thumb i{display:block;border-radius:4px;background:#ffffff22;flex:1}
.home-thumb i:first-child{flex:2.2;background:linear-gradient(135deg,#1d3f8f,#a50044)}
.thumb-home{background:#2a2145}.thumb-home i:first-child{background:linear-gradient(90deg,#a50044,#d6782b)}
.thumb-editorial i:first-child{flex:1.6}.thumb-editorial i:not(:first-child){height:4px;flex:.35}
.thumb-playful i:first-child{outline:1.5px solid #edbb00}.thumb-playful i:nth-child(2){background:#edbb00;flex:.6}
.nav-current{margin-left:auto;font-style:normal;font-size:10px;color:#a50044;background:#a5004414;border-radius:8px;padding:2px 7px}.nav-item.active .nav-current{color:#fff;background:#ffffff30}
/* My page */
.my-page{padding:60px 20px 40px}.my-page .my-back{background:#ffffff1a;color:#fff;width:38px;height:38px;border-radius:50%;margin-bottom:18px;font-size:16px}
.my-page a.my-row,.my-page .my-row{display:flex;justify-content:space-between;align-items:center;width:100%;background:#ffffff13;padding:16px 18px;border-radius:16px;margin:8px 0;font-size:14px;color:#fff;text-align:left}
.my-row span{color:#c9bfd3;font-size:12px}
.my-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.my-stats span{background:#ffffff13;border-radius:16px;padding:14px;text-align:center;font-size:11px;color:#cfc6d8}.my-stats b{display:block;font:800 22px Inter,sans-serif;color:#fff;margin-bottom:2px}
.my-best{display:grid;grid-template-columns:1fr 1fr;gap:8px}.my-page .my-best a{display:flex;justify-content:space-between;margin:0;padding:14px;font-size:12px;border-radius:14px}.my-best b{color:#edbb00;font-family:Inter,sans-serif}
.my-foot{font-size:11px!important;color:#9990a6!important;text-align:center}
/* Match MVP vote */
.vote-row{cursor:pointer;padding-top:10px!important;padding-bottom:10px!important}.vote-row.first{padding-top:2px!important}.vote-row:hover{background:#ffffff06}
.vote-done{opacity:.55}
/* Modals */
dialog .post-meta{font-size:11px;margin-top:-10px}dialog .post-body{color:#302838}dialog .comment-title{font-size:14px;margin:18px 0 4px}dialog .comment{border-top:1px solid #eee;margin:0;padding:8px 0;color:#403848}
dialog .rank-row{display:flex;gap:12px;align-items:center;margin:0;padding:8px 0;border-bottom:1px solid #f0edf3}dialog .rank-row b{width:24px;color:#a50044}dialog .rank-row span{flex:1;color:#302838}dialog .rank-row em{font-style:normal;font-weight:700;color:#302838}
.series-cover{width:100%;height:180px;object-fit:cover;border-radius:16px}.episodes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.episode{background:#f1edf5;border-radius:10px;padding:10px 4px;font-size:12px}.episode small{display:block;font-size:9px;color:#a50044}.episode.read{background:#e4dcea;color:#8a8093}
.series-row{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:8px 0;border-bottom:1px solid #f0edf3}.series-row img{width:48px;height:64px;object-fit:cover;border-radius:8px}.series-row span{font-size:14px;font-weight:700}.series-row small{display:block;font-weight:400;font-size:11px;color:#8a8093}
.reader{display:flex;flex-direction:column;gap:10px;margin:0 -6px}.reader figure{margin:0;position:relative}.reader img{width:100%;height:190px;object-fit:cover;border-radius:6px}.reader figcaption{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;color:#1b1522;font-size:12px;font-weight:700;border-radius:14px;padding:8px 12px;box-shadow:0 4px 12px #0003}
/* Avatar studio */
.grid-bg{background-image:linear-gradient(#0000000f 1px,transparent 1px),linear-gradient(90deg,#0000000f 1px,transparent 1px)!important;background-size:20px 20px!important}
.spin-360{animation:spin360 1.2s ease-in-out}@keyframes spin360{50%{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}
.generating{animation:pulse .6s ease-in-out infinite alternate}@keyframes pulse{to{opacity:.55}}
/* In-phone sheets (bottom) and full-screen detail pages */
#toast{z-index:60}
.sheet-backdrop{position:absolute;inset:0;z-index:49;background:#0008}
dialog#sheet{position:absolute;z-index:50;inset:auto 12px 16px 12px;margin:0;width:auto;max-width:none;max-height:78%}
dialog#sheet.full{inset:0;width:100%;height:100%;max-height:100%;border-radius:0;padding:64px 20px 40px;background:#14111b;color:#fff;box-shadow:none;animation:pageIn .22s ease}
@keyframes pageIn{from{transform:translateX(24px);opacity:0}}
dialog.full .sheet-close{left:12px;right:auto;top:14px;width:40px;height:40px;border-radius:50%;background:#ffffff14;color:#fff;font-size:18px}
dialog.full h2{font-size:20px;margin:0 0 16px;color:#fff;line-height:1.4}
dialog.full p{color:#c9c1d3}dialog.full .post-body{color:#f1edf5;font-size:14px}dialog.full .comment{border-color:#ffffff14;color:#d9d2e2}dialog.full .comment-title{color:#fff}
dialog.full input,dialog.full textarea,dialog.full select{background:#ffffff0d;border-color:#ffffff24;color:#fff}dialog.full label{color:#c9c1d3}
dialog.full .secondary{background:#ffffff14;color:#fff}dialog.full .episode{background:#ffffff10;color:#fff}dialog.full .episode.read{background:#ffffff06;color:#8a8093}dialog.full .episode small{color:#edbb00}
dialog.full .series-row{border-color:#ffffff14;color:#fff}dialog.full .series-row small{color:#a39bb0}dialog.full .rank-row{border-color:#ffffff14}dialog.full .rank-row span,dialog.full .rank-row em{color:#fff}dialog.full .rank-row b{color:#edbb00}
dialog.full .reader{margin:0 -20px}dialog.full .reader img{border-radius:0}