/* 색상·간격은 아래 토큰에서 수정하세요. */
:root{--bg:#17191e;--panel:#22252d;--line:#333741;--text:#f5f6f7;--muted:#b0b4bf;--accent:#c2ff70;--max:1120px;--radius:12px;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-size:15px;line-height:1.6}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button{border:0}h1,h2,h3,p{margin:0}svg{display:block}button[hidden]{display:none!important}.wrap{width:min(var(--max),calc(100% - 64px));margin:auto}.skip{position:fixed;top:-100px;left:12px;padding:12px;background:var(--accent);color:#141b12;z-index:10}.skip:focus{top:12px}.header{background:#202228}.topbar{height:76px;display:flex;align-items:center;gap:22px}.brand{font-size:26px;font-weight:900;letter-spacing:-1.3px;display:inline-flex;align-items:center;line-height:1}.brand>span:not(.brand-icon):not(.brand-dot){font-weight:400}.brand-icon{color:var(--accent);font-size:38px;margin-right:9px;transform:rotate(-15deg)}.brand-dot,.lime{color:var(--accent)}.portal-label{font-size:10px;letter-spacing:2px;color:#9ea4b1;border-left:1px solid #454951;padding-left:22px}.edition{margin-left:auto;font-size:10px;letter-spacing:1px;color:var(--muted);display:flex;gap:16px;align-items:center}.edition i{height:12px;border-left:1px solid #4d515b}.nav{border-top:1px solid #2b2e36;background:#25282f}.nav-inner{display:flex;align-items:center;gap:30px;min-height:50px}.nav a{font-size:13px;color:#bfc3cd;display:flex;align-items:center;min-height:50px;position:relative}.nav a.active{color:var(--text);font-weight:bold}.nav a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}.nav-note{margin-left:auto;font-size:9px;letter-spacing:1.4px;color:#a1a7b4}.menu-toggle{display:none}.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 77% 60%,#27332b 0,transparent 49%),#12151a;border-bottom:1px solid var(--line)}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(#9bb49b08 1px,transparent 1px),linear-gradient(90deg,#9bb49b08 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,transparent,#000)}.hero-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:420px;align-items:center}.hero-copy{padding:42px 0}.eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent)}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--accent)}h1{font-size:44px;line-height:1.35;letter-spacing:-2px;margin-top:17px;font-weight:800}.hero-description{color:#b9c0c6;font-size:14px;line-height:1.8;margin-top:17px}.primary{background:var(--accent);color:#152113;font-size:13px;font-weight:700;padding:12px 19px;min-height:46px;display:inline-flex;gap:35px;align-items:center;border-radius:5px;margin-top:25px}.primary:hover{background:#d5ff9d}.primary span{font-size:19px;line-height:1}.hero-footnote{font-size:8px;letter-spacing:3px;color:#8f999b;margin-top:24px}.hero-art{height:390px;position:relative;isolation:isolate}.orbit{position:absolute;border:1px solid #8cb49325;width:370px;height:370px;border-radius:50%;left:55px;top:5px}.orbit-two{width:450px;height:450px;left:15px;top:-35px;border-style:dashed}.art-label{position:absolute;right:0;top:35px;font-size:9px;letter-spacing:2px;color:#96a79a}.rank-card{position:absolute;top:28px;left:115px;width:245px;height:303px;transform:rotate(-9deg);background:linear-gradient(135deg,#3e5043,#18271f 60%,#2d3d31);border:1px solid #9ebc7a;border-radius:14px;padding:19px 20px;box-shadow:20px 25px 65px #0008,inset 0 0 40px #b1de7410}.rank-top{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.8px;color:#d0ddc3}.emblem{width:170px;margin:5px auto 0}.rank-name{font-weight:900;letter-spacing:2px;font-size:17px;text-align:center;line-height:1.2}.rank-line{border-top:1px solid #76916b66;display:flex;justify-content:space-between;margin-top:16px;padding-top:10px;font-size:7px;letter-spacing:1px;color:#c9d8bd}.rank-bars{display:flex;gap:3px;position:absolute;bottom:15px;left:20px;opacity:.4}.rank-bars i{height:8px;width:2px;background:#d9f2c0}.rank-bars i:nth-child(3n){width:5px}.floating-tag{position:absolute;right:25px;top:105px;transform:rotate(8deg);background:var(--accent);color:#1a2a16;padding:8px 13px;border-radius:4px;font-size:10px;font-weight:bold;z-index:2;box-shadow:0 5px 25px #0005}.mini-card{position:absolute;bottom:30px;left:45px;background:#272f2aeb;border:1px solid #687a5d;border-radius:9px;display:flex;align-items:center;gap:13px;padding:14px 20px;box-shadow:0 12px 25px #0005;transform:rotate(5deg)}.mini-icon{font-size:28px;color:var(--accent)}.mini-card small{display:block;font-size:7px;letter-spacing:2px;color:#b7c2b1}.mini-card strong{display:block;font-size:12px;letter-spacing:1px}.mini-star{color:var(--accent);font-size:28px;margin-left:18px}.art-coordinate{position:absolute;right:15px;bottom:8px;font-size:7px;letter-spacing:1.4px;color:#9da89b}.hero-strip{position:relative;display:flex;border-top:1px solid #454c3d;min-height:51px;align-items:center;font-size:11px;gap:25px}.hero-strip>span{color:#c4cdc0}.hero-strip b{color:var(--accent);font-family:monospace;margin-right:12px}.hero-strip a{margin-left:auto;display:flex;gap:10px;align-items:center;color:#b5bdb5}.strip-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;padding-top:42px}.section-title{display:flex;align-items:end;justify-content:space-between;gap:8px}.muted{color:#a3a9b5;font-size:9px}.section-title h2{font-size:23px;letter-spacing:-.8px;margin-top:8px;line-height:1.4}.count{font-size:9px;color:#aaaeb9;letter-spacing:1px;white-space:nowrap}.filter-row{display:flex;gap:7px;margin:21px 0 18px}.filter{font-size:11px;min-height:36px;padding:6px 16px;border:1px solid #353944;background:#22252c;border-radius:5px;color:#b6bdc9}.filter.selected{background:var(--accent);color:#203018;border-color:var(--accent);font-weight:bold}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}.game-card{padding:0;background:transparent;min-width:0;text-align:left;border-radius:9px}.game-visual{height:148px;position:relative;display:block;overflow:hidden;border-radius:9px;border:1px solid #ffffff18;isolation:isolate;transition:transform .2s,border-color .2s}.game-card:hover .game-visual{transform:translateY(-4px);border-color:#ffffff70}.blue{background:linear-gradient(145deg,#12405e,#192637 75%)}.gold{background:linear-gradient(145deg,#66502b,#30241c 80%)}.red{background:linear-gradient(145deg,#742b40,#2f2335 80%)}.purple{background:linear-gradient(145deg,#5c3f83,#2b253d 80%)}.olive{background:linear-gradient(145deg,#5e6640,#272d26 80%)}.teal{background:linear-gradient(145deg,#287b74,#183d47 80%)}.game-visual svg{position:absolute;height:145px;width:210px;top:-15px;right:-28px;opacity:.65;z-index:-1}.visual-grid{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 26px,#ffffff06 26px 27px);z-index:-1}.game-kicker{position:absolute;left:13px;top:12px;font-size:6px;letter-spacing:1.5px;opacity:.8}.game-visual strong{position:absolute;left:13px;bottom:31px;right:6px;font-weight:900;line-height:1.05;letter-spacing:-.6px;font-size:20px;text-shadow:0 3px 12px #0008}.game-visual.olive strong{font-size:17px;letter-spacing:-.7px}.genre{position:absolute;bottom:11px;left:13px;font-size:7px;letter-spacing:1.8px;color:#e7ebed}.game-info{display:flex;align-items:center;justify-content:space-between;padding:11px 2px 0;gap:6px;font-size:13px;font-weight:700}.game-info small{display:block;font-size:9px;color:#a7aebb;font-weight:400;margin-top:4px}.card-arrow{width:25px;height:25px;display:grid;place-items:center;color:#c8ced6;border:1px solid #3a3e48;border-radius:50%;font-size:12px;flex-shrink:0}.game-status{font-size:10px;color:#a7adba;margin-top:23px;min-height:20px}.coming{margin-top:20px;border:1px dashed #3f4450;border-radius:8px;padding:19px;display:flex;gap:14px;align-items:center}.coming-icon{font-size:30px;color:#8a929f;line-height:1}.coming strong{font-size:12px}.coming p{font-size:10px;color:#a1a8b4;margin-top:2px}.coming-label{font-size:7px;letter-spacing:1.2px;margin-left:auto;color:#a1a8b4;white-space:nowrap}.sidebar{padding-top:3px}.feature-card{display:block;position:relative;overflow:hidden;border-radius:10px;background:var(--accent);color:#1c2b19;padding:23px 23px 21px}.feature-card .eyebrow{color:#364b27;font-size:8px;letter-spacing:1.6px}.feature-card h2{margin-top:10px;line-height:1.25;letter-spacing:-1px;font-size:28px}.feature-card p{font-size:11px;margin-top:15px}.feature-symbol{position:absolute;right:12px;bottom:-37px;font-size:152px;line-height:1;opacity:.16;font-weight:900}.news-panel{padding:23px;background:var(--panel);border:1px solid #ffffff06;border-radius:10px;margin-top:18px}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-heading h2{font-size:18px;letter-spacing:-.5px}.news-item{display:block;padding:19px 0 17px;border-bottom:1px solid #3b3e47}.news-category{color:var(--accent);font-size:8px;letter-spacing:1.5px}.news-item h3{font-size:13px;line-height:1.8;letter-spacing:-.2px;font-weight:600;margin-top:7px}.news-date{font-size:9px;color:#aab1bc;display:flex;justify-content:space-between;margin-top:12px}.news-item:hover h3{color:var(--accent)}.news-bottom{font-size:9px;color:#a9b0bc;margin-top:18px}.small-note{margin-top:18px;padding:20px 7px;display:flex;gap:12px;align-items:center;overflow:hidden;position:relative}.small-note>span:first-child{font-size:26px;color:var(--accent)}.small-note p{font-size:11px;color:#b4bac5;line-height:1.7}.small-note strong{color:#ebedf1;font-size:13px}.outline-brand{position:absolute;right:3px;top:5px;font-size:70px;line-height:1;font-weight:900;color:#ffffff06;letter-spacing:-7px}.about{padding:45px 0 40px;margin-top:45px;border-top:1px solid var(--line);position:relative}.about h2{font-size:24px;letter-spacing:-1px;margin-top:9px}.about>p:not(.eyebrow){font-size:11px;color:#b0b6c1;margin-top:10px}.about>a{position:absolute;right:0;top:65px;font-size:11px;color:#c7d0c0}footer{border-top:1px solid var(--line);padding:30px 0 36px;background:#14161b}.footer-inner{display:flex;align-items:center;gap:25px}.footer-inner .brand{font-size:20px}.footer-inner>p{font-size:8px;letter-spacing:1.5px;color:#a0a7b2}.footer-inner small{font-size:9px;color:#9ba2ae;margin-left:auto;text-align:right;line-height:1.8}dialog{max-width:min(440px,calc(100% - 32px));border:1px solid #535e48;background:#242a26;color:var(--text);padding:32px;border-radius:12px;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#000b}dialog h2{margin-top:12px;font-size:24px}dialog>p:not(.eyebrow){font-size:13px;color:#c0c9bf;margin-top:15px;line-height:1.9}.dialog-close{position:absolute;right:8px;top:5px;min-width:44px;min-height:44px;background:transparent;color:#c5cec2;font-size:27px}
@media(min-width:1450px){.hero-inner{min-height:440px}.hero-art{transform:scale(1.06)}}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.content-layout{grid-template-columns:minmax(0,1fr) 255px;gap:24px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art{transform:scale(.85);transform-origin:center right}.hero-inner{grid-template-columns:1.1fr 1fr}h1{font-size:38px}.portal-label{display:none}.feature-card h2{font-size:25px}.nav-note{display:none}}
@media(max-width:700px){.wrap{width:calc(100% - 36px)}.topbar{height:65px}.brand{font-size:23px}.brand-icon{font-size:32px}.edition{display:none}.menu-toggle{display:flex;align-items:center;gap:12px;margin-left:auto;background:transparent;font-size:12px;min-height:44px;padding:0 8px}.nav{display:none}.nav.open{display:block}.nav-inner{gap:24px;min-height:50px;flex-wrap:wrap}.nav a{font-size:12px}.hero-inner{display:flex;flex-direction:column;align-items:stretch;min-height:0}.hero-copy{padding:33px 0 0;position:relative;z-index:1}h1{font-size:35px;letter-spacing:-1.8px;margin-top:14px}.hero-description{font-size:12px;margin-top:13px}.hero-copy .primary{margin-top:20px}.hero-footnote{display:none}.hero-art{height:285px;transform:scale(.78);transform-origin:center center;width:390px;align-self:center;margin:-8px 0 -10px}.art-label{right:0;top:0}.rank-card{left:90px;top:0}.orbit{left:30px;top:-40px}.orbit-two{left:-10px;top:-80px}.floating-tag{right:-8px;top:75px}.mini-card{bottom:-20px;left:16px}.art-coordinate{display:none}.hero-strip{min-height:60px;gap:5px;flex-direction:column;align-items:flex-start;justify-content:center;padding:9px 0;font-size:10px}.hero-strip a{margin-left:0;font-size:9px}.content-layout{display:block;padding-top:30px}.section-title h2{font-size:21px}.count{font-size:8px}.game-grid{gap:24px 13px}.game-visual{height:151px}.game-visual strong{font-size:19px}.game-visual.olive strong{font-size:15px}.game-visual svg{right:-40px}.game-info{font-size:12px}.game-info small{font-size:9px}.card-arrow{width:22px;height:22px}.game-status{font-size:10px}.filter{min-height:40px}.coming{padding:15px 12px;gap:10px}.coming-label{display:none}.sidebar{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px}.feature-card{min-height:175px}.news-panel{margin:0}.news-item h3 br{display:none}.small-note{display:none}.about{margin-top:30px;padding-top:30px;padding-bottom:30px}.about>a{position:static;display:inline-block;margin-top:18px}.about>p:not(.eyebrow){font-size:10px}.footer-inner{align-items:flex-start;flex-wrap:wrap;gap:15px}.footer-inner small{margin-left:0;text-align:left;width:100%}.footer-inner>p{margin-left:auto;padding-top:3px}dialog{padding:27px}}
@media(max-width:350px){.wrap{width:calc(100% - 28px)}h1{font-size:31px}.section-title h2{font-size:18px}.game-visual strong{font-size:16px}.game-visual.olive strong{font-size:13px}.game-info{font-size:11px}.game-info small{font-size:8px}.count{display:none}.filter{padding:6px 13px}.game-visual{height:137px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}


/* 매치브: 제공된 원본 로고, 흰색·라임 다크 테마 */
:root,.sports-directory{--accent:#baff00}.brand{display:inline-flex;align-items:center;flex-shrink:0;letter-spacing:0;line-height:1}.brand .matchive-logo{display:block;width:170px;height:auto;max-width:none}.footer-inner .brand .matchive-logo{width:145px}.portal-label{letter-spacing:1.5px}.sports-directory .directory-stats b,.sports-directory .directory-toolbar strong,.sports-directory .compact-more,.sports-directory .compact-card-foot>b>span{color:var(--accent)}.sports-directory .sport-quick-tabs button.selected{background:var(--accent);border-color:var(--accent)}@media(max-width:700px){.brand .matchive-logo{width:140px}.footer-inner .brand .matchive-logo{width:130px}.topbar{min-height:68px}}

/* 첫 배너 스포츠 가이드 팝업 */
#game-dialog:has(#sports-guide-content:not([hidden])){width:min(760px,calc(100% - 32px));max-width:760px;max-height:85dvh;overflow-y:auto;padding:32px;background:#20252d;border-color:#485448}#sports-guide-content[hidden]{display:none}#game-dialog[open]{animation:guide-appear .18s ease-out}.guide-block{border-top:1px solid #3a4451;margin-top:23px;padding-top:21px}.guide-block h3{font-size:16px;letter-spacing:-.4px;margin:0 0 14px}.guide-sport-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.guide-sport-grid>a{padding:16px;background:#161d25;border:1px solid #3f4b59;border-radius:7px;display:flex;flex-direction:column;gap:9px}.guide-sport-grid>a:hover{border-color:#baff00}.guide-sport-grid strong{font-size:16px;color:#edffd0}.guide-sport-grid span{font-size:12px;color:#c0cad7;line-height:1.9}.guide-sport-grid small{font-size:10px;color:#baff00;margin-top:auto}.guide-terms{margin:0}.guide-terms>div{margin-top:13px}.guide-terms dt{font-size:12px;color:#e2ebd9;font-weight:bold}.guide-terms dd{font-size:12px;line-height:1.9;color:#b9c5d5;margin:5px 0 0}.guide-steps p{font-size:12px;line-height:1.9;color:#c0cad7;margin:9px 0}.guide-steps b{font:11px monospace;color:#baff00;margin-right:9px}.guide-notice{font-size:10px!important;line-height:1.9!important;color:#a4b1c2!important;margin-top:20px!important}.guide-banner .game-info>span:first-child{font-size:12px}.guide-banner .game-visual strong{font-size:27px}@keyframes guide-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){#game-dialog:has(#sports-guide-content:not([hidden])){padding:26px 19px;width:calc(100% - 24px);max-height:88dvh}.guide-sport-grid{grid-template-columns:1fr}.guide-sport-grid>a{padding:15px}.guide-block h3{font-size:15px}}@media(prefers-reduced-motion:reduce){#game-dialog[open]{animation:none}}
/* Shared banner image ratio: PC + mobile, 1008 x 592 source */
.game-card .game-visual{height:auto;aspect-ratio:63 / 37;width:100%}
.game-card .game-visual>img{display:block;width:100%;height:100%;object-fit:cover}
.game-card .game-visual{container-type:inline-size}.game-card .game-visual strong{left:5%;bottom:21%;font-size:clamp(12px,7.94cqw,20px)}.game-card.guide-banner .game-visual strong{font-size:clamp(14px,10.7cqw,27px)}.game-card .game-visual.olive strong{font-size:clamp(10px,6.75cqw,17px)}.game-card .game-kicker{left:5%;top:8%;font-size:clamp(4px,2.38cqw,6px);letter-spacing:.16em}.game-card .genre{left:5%;bottom:7%;font-size:clamp(4.5px,2.78cqw,7px);letter-spacing:.16em}.game-card .game-visual svg{width:84%;height:98%;top:-10%;right:-12%}
#sports-guide-content .guide-sport-grid>article{padding:16px;background:#161d25;border:1px solid #3f4b59;border-radius:7px}#sports-guide-content .guide-sport-grid>article strong{color:#edffd0;font-size:15px}#sports-guide-content .guide-sport-grid>article p{font-size:12px;color:#c0cad7;line-height:1.9;margin-top:9px}
/* Keep the original popup cards within the viewport. */
#game-dialog{overflow-x:hidden;overscroll-behavior:contain}
#sports-guide-content{overflow-wrap:anywhere}
#sports-guide-content .guide-sport-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#sports-guide-content .guide-sport-grid>article{min-width:0}
#game-dialog #dialog-link{max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:600px){#sports-guide-content .guide-sport-grid{grid-template-columns:minmax(0,1fr)}}

/* CMS popup image: preserve its aspect ratio inside the existing dialog. */
#sports-guide-content .popup-media{margin:22px 0 0;max-width:100%;min-width:0}
#sports-guide-content .popup-media>a{display:block;max-width:100%;border-radius:8px}
#sports-guide-content .popup-media img{display:block;width:100%;max-width:100%;height:auto;max-height:none;margin:0 auto;border-radius:8px;object-fit:contain}
#sports-guide-content .popup-media>a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
/* Uploaded banners meet the edge directly; no inherited tinted frame. */
.game-card .game-visual.cms-image-visual,
.game-card:hover .game-visual.cms-image-visual{border:0;background:transparent;transform:none}
.game-card .cms-image-visual>img{opacity:1;filter:none;transform:none}
/* Popup-off banners remain visible and full color, but do not act as links. */
.game-card[data-popup-enabled="false"]{opacity:1;cursor:default}
.game-card[data-popup-enabled="false"] .card-arrow{visibility:hidden}
.game-card[data-popup-enabled="false"]:hover .game-visual{transform:none;border-color:#ffffff18}
.game-card[data-popup-enabled="false"]:hover .cms-image-visual{border:0}

/* Banner frame: hero-card green, first banner warm gold. */
.game-card .cms-image-visual::before{content:"";position:absolute;inset:0;border:1px solid #9ebc7a;border-radius:inherit;pointer-events:none;z-index:1}
.game-card.guide-banner .cms-image-visual::before{border-color:#d9ae70}
.game-card:hover .cms-image-visual::before{border-color:#c4dfa0}
.game-card.guide-banner:hover .cms-image-visual::before{border-color:#f0ca92}