:root{--ink:#254d65;--muted:#668396;--sky:#32b8de;--paper:#fbfdff;--line:#d9e9ef;--gold:#d3b676}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fbfdff;color:var(--ink);font-family:'Noto Sans KR','Malgun Gothic',system-ui,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button,input{font:inherit}.wrap{width:min(1190px,calc(100% - 48px));margin-inline:auto}.skip-link{position:absolute;top:-100px;left:12px;padding:10px;background:#fff;z-index:10}.skip-link:focus{top:10px}.site-header{background:#183f59;color:#e7f6ff}.header-row{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:900;letter-spacing:-.6px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;color:#ffe29f;background:#ffffff12;border:1px solid #a9d1e166;border-radius:14px;font-size:24px}.brand small{display:block;color:#bad2df;font-weight:500;font-size:10px;letter-spacing:0;line-height:1.2}.site-header nav{display:flex;gap:30px;font-size:14px;font-weight:700}.site-header nav a:hover{color:#8de1f4}.site-header nav a[aria-current=page]{color:#fff}
.hero{position:relative;overflow:hidden;background:linear-gradient(117deg,#edf9ff,#f6f5ff 59%,#fff7ee)}.hero-inner{min-height:414px;display:flex;align-items:center;justify-content:space-between;gap:42px;position:relative;padding-block:38px}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:11px;letter-spacing:1.8px;color:#7498a9;font-weight:800;margin:0 0 13px}.eyebrow span{color:#d4a967;margin-right:5px}.hero h1{font-size:clamp(37px,4.5vw,58px);line-height:1.25;letter-spacing:-2.7px;margin:0;color:#214a63}.hero h1 em{font-style:normal;color:#2ba6cd}.hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.9;color:#5b788b;margin:18px 0 25px}.hero-button{display:inline-flex;align-items:center;gap:25px;border-radius:99px;padding:12px 21px;background:#e87772;color:#fff;font-size:14px;font-weight:800;box-shadow:0 4px #c55b58}.hero-button:hover{background:#d96662}.hero-orbit{position:absolute;border:1px solid #c6e3ee;border-radius:50%;pointer-events:none}.orbit-one{width:450px;height:450px;right:4%;top:-180px}.orbit-two{width:240px;height:240px;left:-90px;bottom:-165px}.hero-collage{position:relative;width:54%;height:305px;flex:none}.collage-image{position:absolute;display:block;background-size:cover;background-position:center;border:5px solid #ffffffd9;box-shadow:0 15px 35px #44637920;border-radius:25px}.collage-image.one{width:41%;height:64%;top:0;left:1%;transform:rotate(-7deg)}.collage-image.two{width:44%;height:86%;top:11%;left:30%;z-index:1;transform:rotate(3deg)}.collage-image.three{width:38%;height:60%;top:0;right:0;transform:rotate(8deg)}.hero-spark{position:absolute;right:1%;bottom:0;font-size:58px;color:#d5b775}
.game-section{padding-block:50px 34px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:25px}.section-head h2{font-size:28px;letter-spacing:-1px;margin:0}.section-head>div>p:last-child{margin:6px 0 0;color:var(--muted);font-size:14px}.section-head .eyebrow{margin-bottom:5px}.section-star{font-size:48px;line-height:1;color:#d5b775}.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.game-card{overflow:hidden;border:1px solid var(--line);background:#fff;border-radius:20px;box-shadow:0 8px 24px #2756780d;transition:transform .2s,box-shadow .2s}.game-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px #2756781c}.game-card:focus-visible,.hero-button:focus-visible{outline:3px solid #0d92be;outline-offset:4px}.card-image{height:194px;background-position:center;background-size:cover;position:relative}.card-image::after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#173b5438)}.sword .card-image{background-position:center 32%}.azur .card-image{background-position:75% center}.card-label{position:absolute;left:15px;top:15px;z-index:1;background:#ffffffd9;color:#496f80;padding:4px 9px;border-radius:99px;font-size:9px;font-weight:800;letter-spacing:.8px}.card-copy{padding:20px 22px 24px}.game-category{font-size:10px;letter-spacing:1.2px;color:#82a2b0;font-weight:800;margin:0 0 6px}.card-copy h3{font-size:22px;letter-spacing:-.7px;margin:0;display:flex;justify-content:space-between;gap:12px}.card-copy h3 span{font-size:17px;color:#81b4c6}.card-copy>p:not(.game-category){font-size:13px;color:#647f90;margin:8px 0 17px;min-height:42px}.tags{display:flex;gap:6px;flex-wrap:wrap}.tags span{background:#eef8fc;color:#5f8aa0;font-size:11px;padding:4px 10px;border-radius:99px}.cookie .tags span{background:#fff5eb;color:#aa7955}.azur .tags span{background:#f4f0ff;color:#8577a4}.footnote{display:flex;align-items:center;gap:16px;margin-block:10px 54px;padding:20px 24px;background:#edf8fc;border:1px solid #dceef4;border-radius:16px}.footnote span{font-size:29px;color:#d2af69}.footnote p{margin:0;color:#678393;font-size:13px}.site-footer{background:#173d55;color:#bdd0dc;padding:30px 0}.footer-inner strong{font-size:18px;color:#eaf6fc}.footer-inner p{font-size:12px;line-height:1.8;margin-bottom:0}.page-content{min-height:45vh;padding:48px 0}
@media(max-width:1050px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.hero-inner{min-height:360px;gap:12px}.hero-collage{width:45%;height:250px}.hero-copy>p:not(.eyebrow){font-size:14px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card:last-child:nth-child(odd){grid-column:1/-1}.game-card:last-child:nth-child(odd) .card-image{background-position:center 52%}}
@media(max-width:600px){.wrap{width:calc(100% - 32px)}.header-row{height:70px}.brand{font-size:20px}.brand-mark{width:37px;height:37px}.site-header nav{gap:16px;font-size:12px}.hero-inner{min-height:0;padding-block:28px 26px;display:block}.hero h1{font-size:37px;letter-spacing:-1.8px}.hero-copy>p:not(.eyebrow){font-size:13px;margin:12px 0 18px}.hero-collage{width:100%;height:160px;margin-top:22px}.collage-image{border-width:3px;border-radius:15px}.collage-image.one{left:4%}.collage-image.two{left:32%}.collage-image.three{right:3%}.hero-spark{font-size:36px;right:2%}.game-section{padding-block:35px 24px}.section-head h2{font-size:23px}.section-head>div>p:last-child{font-size:12px}.section-star{font-size:37px}.game-grid{grid-template-columns:1fr;gap:14px}.game-card:last-child:nth-child(odd){grid-column:auto}.game-card{display:grid;grid-template-columns:120px minmax(0,1fr);border-radius:16px}.card-image{height:100%;min-height:160px}.card-label{left:9px;top:9px;font-size:8px}.card-copy{padding:14px}.card-copy h3{font-size:18px}.card-copy>p:not(.game-category){min-height:0;margin:6px 0 12px;font-size:12px}.tags span{font-size:10px;padding:3px 7px}.footnote{margin-bottom:34px;padding:16px}.footnote p{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.game-card{transition:none}}
/* Shared MetaHub brand lockup. */
.brand-mark{padding:0;overflow:hidden;background:none;border:0;flex:none}.brand-mark img{display:block;width:100%;height:100%}.brand-wordmark>span{color:#f0c66f}.footer-brand{display:inline-flex;align-items:center;gap:8px}.footer-brand img{display:block;border-radius:6px}
/* Readability and display hierarchy follow the Sword X Staff live design. */
.hero h1,.section-head h2{font-family:'Black Han Sans','Noto Sans KR','Malgun Gothic',sans-serif;font-weight:400;line-height:1.3}
.hero h1{font-size:clamp(34px,4vw,50px);letter-spacing:-.045em}
.card-copy>p:not(.game-category){font-size:14px;color:#526e80}
.eyebrow{font-size:12px;color:#54798b}.game-category{font-size:11px;color:#58788a}.card-label{font-size:10px}
@media(max-width:600px){.hero h1{font-size:34px}.card-copy>p:not(.game-category){font-size:13px}.section-head>div>p:last-child{font-size:13px}}
.game-card-pending:hover{transform:none;box-shadow:0 8px 24px #2756780d}