/* Art hub layer: loaded after the inherited preview CSS. */
body.art-hub{background:var(--bg);}
body.art-hub .site-header{border-bottom-color:var(--line);}
body.art-hub .brand-mark{width:40px;height:40px;background:transparent;clip-path:none;}
body.art-hub .brand-mark img{display:block;width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 4px #0006);}
body.art-hub #main-nav a.active{color:var(--ink);border-color:var(--gold);}

.art-hero{height:clamp(420px,47vw,476px);position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#151a29;}
.hero-art-scene,.hero-art-shade,.hero-mist,.hero-sparks,.hero-bottom-border{position:absolute;inset:0;pointer-events:none;}
.hero-art-scene{z-index:-4;background:url('assets/generated/hero.png') calc(50% + var(--scene-x,0px)) calc(50% + var(--scene-y,0px))/cover no-repeat;transform:scale(1.015);transition:background-position .35s ease;}
.hero-art-shade{z-index:-3;background:radial-gradient(ellipse at 50% 51%,rgba(14,20,43,.36) 0%,rgba(13,18,37,.18) 35%,transparent 67%),linear-gradient(0deg,rgba(8,11,22,.59),transparent 43%);}
.hero-mist{z-index:-2;background:radial-gradient(ellipse at 48% 100%,#b9c8ff1c 0%,transparent 48%),linear-gradient(90deg,transparent 18%,#b3c3ff0d 50%,transparent 83%);mix-blend-mode:screen;animation:art-mist 15s ease-in-out infinite alternate;}
.hero-sparks{z-index:-1;overflow:hidden;}
.hero-sparks i{position:absolute;left:calc(7% + var(--i) * 6.6%);bottom:12%;width:2px;height:2px;border-radius:50%;background:#f3d49b;box-shadow:0 0 7px #f4d7a5b8;opacity:.2;animation:art-spark calc(8s + var(--i) * .45s) ease-in infinite;animation-delay:calc(var(--i) * -.7s);}
.hero-emblem{height:100%;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:6px;text-align:center;}
.hero-game-name{margin:0 0 9px;color:#ecd193;font-size:12px;font-weight:800;letter-spacing:.22em;text-shadow:0 1px 7px #000;}
body.art-hub .hero-brand{position:relative;margin:0;color:#e8cd92;font-family:"Noto Serif KR","Batang",serif;font-size:clamp(84px,8vw,96px);font-weight:800;line-height:1;letter-spacing:-.08em;text-shadow:0 2px 1px #fff2,0 4px 15px #060818a8;}
body.art-hub .hero-brand::before,body.art-hub .hero-brand::after{content:"";position:absolute;left:50%;width:clamp(94px,13vw,156px);height:1px;background:linear-gradient(90deg,transparent,#e4c47d 35%,#fff0bf 50%,#e4c47d 65%,transparent);transform:translateX(-50%);opacity:.82;}
body.art-hub .hero-brand::before{top:-11px;}body.art-hub .hero-brand::after{bottom:-12px;}
.hero-subtitle{max-width:420px;margin:23px 0 21px;color:#ececf0;font-size:15px;line-height:1.6;text-shadow:0 1px 8px #050711;}
.art-hero .hero-actions .button{border-radius:4px;}
.art-hero .button-primary{background:var(--gold);color:#1b1920;box-shadow:0 5px 17px #0006;}
.art-hero .button-primary:hover{background:#ecd29e;}
.art-hero .button-ghost{color:#fff;background:#12162269;border-color:#ffffff54;backdrop-filter:blur(5px);}
.art-hero .button-ghost:hover{background:#ffffff19;border-color:#e7c67f;}
.hero-credit{position:absolute;right:max(20px,calc((100% - 1200px)/2));bottom:15px;z-index:2;display:flex;align-items:center;gap:11px;color:#e3e4e9b3;font-size:12px;}
#motion-toggle{min-height:44px;padding:0 11px;border:1px solid #ffffff4d;border-radius:3px;background:#10152280;color:#eeeef2;font-size:12px;cursor:pointer;}
#motion-toggle:hover{border-color:#e7c67f;color:#fff6e5;}
.hero-bottom-border{z-index:2;inset:auto 0 0;height:5px;background:linear-gradient(90deg,transparent,#cda85e 22%,#fae2a8 50%,#cda85e 78%,transparent);opacity:.88;}

body.art-hub .launch-bar{border-top-color:#d9ba8252;border-bottom-color:#d9ba8242;background:#1a1d23;}
body.art-hub .launch-inner{min-height:102px;padding-block:13px;}
body.art-hub .launch-bar .pill{border-color:#d9ba826e;background:#d9ba8214;color:#f0d49b;}
body.art-hub .countdown{gap:12px;}
body.art-hub .countdown-unit{min-width:63px;}
body.art-hub .countdown-unit b{font-size:48px;line-height:1;color:#f6d995;letter-spacing:-.08em;}
body.art-hub .countdown-unit small{font-size:12px;color:#babcc5;}
body.art-hub .countdown-separator{color:#786951;font-size:28px;line-height:1.4;}

body.art-hub .home-content{padding-top:35px;}
body.art-hub .section-heading{margin-bottom:15px;}
body.art-hub .section-kicker{color:var(--gold);}
.tools-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:-1px 0 15px;padding:10px 0;border-block:1px solid var(--line);}
.tool-search{display:flex;align-items:center;min-width:min(100%,260px);height:44px;gap:8px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--muted);}
.tool-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 25%,transparent);}
.tool-search svg{width:17px;flex:none;}
.tool-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px;}
.tool-search kbd{padding:1px 5px;border:1px solid var(--line);border-radius:3px;background:var(--paper-2);font:700 12px/1.5 Arial;color:var(--muted);}
.tool-filter{display:flex;gap:5px;}
.tool-filter button,#tool-clear{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink);font-size:12px;font-weight:750;cursor:pointer;}
.tool-filter button.active{border-color:var(--gold);background:var(--gold-soft);}
#tool-clear{margin-left:auto;}
.tool-empty{min-height:130px;display:grid;place-items:center;border:1px dashed var(--line);color:var(--muted);font-size:13px;}
body.art-hub .tool-groups{gap:21px;}
body.art-hub .tool-group h3{margin-bottom:10px;color:var(--muted);font-size:12px;letter-spacing:.05em;}
body.art-hub .tool-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;}
body.art-hub .tool-tile{min-height:112px;align-items:center;gap:9px;padding:12px 10px 27px;border-color:var(--line);border-radius:5px;background:var(--paper);box-shadow:inset 0 1px #fff2;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;}
html[data-theme=light] body.art-hub .tool-tile{box-shadow:inset 0 1px #fff,0 1px 0 #00000008;}
body.art-hub .tool-tile:hover{border-color:color-mix(in srgb,var(--gold) 70%,var(--line));background:color-mix(in srgb,var(--gold) 5%,var(--paper));transform:none;box-shadow:0 9px 21px #0002,inset 0 -2px var(--gold);}
body.art-hub .tool-tile:active{transform:scale(.98);}
body.art-hub .tool-icon{width:62px;height:62px;flex:0 0 62px;background:transparent;overflow:visible;}
body.art-hub .tool-icon .tool-art{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 4px #0005);transition:transform .18s ease,filter .18s ease;}
body.art-hub .tool-tile:hover .tool-art{transform:translateY(-3px) scale(1.035);filter:drop-shadow(0 8px 6px #0007);}
body.art-hub .tool-copy{gap:2px;}
body.art-hub .tool-copy b,body.art-hub .tool-copy strong{font-size:14px;line-height:1.4;}
body.art-hub .tool-copy small{font-size:12px;line-height:1.45;}
body.art-hub .tool-status{font-size:12px;}
body.art-hub .tool-tile:not(:has(.is-ready)) .tool-art{opacity:.72;filter:grayscale(.12) drop-shadow(0 4px 4px #0004);}

body.art-hub .news-list{border-block-color:var(--line);}
body.art-hub .news-row{position:relative;min-height:82px;padding:12px;gap:12px;}
.news-thumb{width:80px;height:56px;flex:0 0 80px;overflow:hidden;border-radius:3px;background:var(--paper-2);object-fit:cover;}
.news-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
body.art-hub .news-row:hover .news-thumb img{transform:scale(1.045);}
body.art-hub .saved-panel{border-top-color:var(--gold);}
body.art-hub .page-title{border-bottom-color:var(--gold);}
body.art-hub .info-grid article{border-top-color:var(--gold);}

@media(max-width:1050px){
  body.art-hub .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px){
  .art-hero{height:340px;}
  .hero-art-scene{background-position:calc(54% + var(--scene-x,0px)) calc(50% + var(--scene-y,0px));}
  .hero-art-shade{background:radial-gradient(ellipse at 50% 52%,rgba(13,19,42,.38),transparent 68%),linear-gradient(0deg,rgba(10,13,24,.62),transparent 63%);}
  .hero-emblem{justify-content:center;padding-bottom:3px;}
  .hero-game-name{font-size:12px;}
  body.art-hub .hero-brand{font-size:52px;}
  body.art-hub .hero-brand::before{top:-9px;}body.art-hub .hero-brand::after{bottom:-10px;}
  .hero-subtitle{max-width:285px;margin:12px 0 17px;font-size:13px;}
  .art-hero .hero-actions{gap:6px;}
  .art-hero .hero-actions .button{font-size:12px;padding-inline:11px;}
  .hero-credit{right:12px;bottom:7px;font-size:12px;}
  .hero-credit>span{display:none;}
  #motion-toggle{min-height:44px;padding-inline:8px;font-size:12px;}
  body.art-hub .launch-inner{min-height:136px;align-items:flex-start;gap:9px;padding-block:13px;}
  body.art-hub .launch-copy{width:100%;}
  body.art-hub .countdown{width:100%;margin:0;justify-content:space-between;gap:3px;}
  body.art-hub .countdown-unit{min-width:0;}
  body.art-hub .countdown-unit b{font-size:34px;}
  body.art-hub .countdown-separator{font-size:20px;}
  .tools-toolbar{gap:7px;}
  .tool-search{width:100%;}
  #tool-clear{margin-left:0;}
  body.art-hub .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
  body.art-hub .tool-tile{min-height:132px;flex-direction:column;justify-content:flex-start;align-items:center;gap:3px;padding:8px 4px 26px;text-align:center;}
  body.art-hub .tool-icon{width:49px;height:49px;flex-basis:49px;}
  body.art-hub .tool-copy b,body.art-hub .tool-copy strong{font-size:12px;line-height:1.42;}
  body.art-hub .tool-copy small{display:none;}
  body.art-hub .tool-status{right:0;left:0;bottom:7px;}
  .news-thumb{display:none;}
}
@media(max-width:370px){
  body.art-hub .hero-brand{font-size:46px;}
  body.art-hub .countdown-unit b{font-size:29px;}
  .hero-game-name{letter-spacing:.14em;}
}
@media(prefers-reduced-motion:reduce){
  .hero-mist,.hero-sparks i{animation:none!important;}
  .hero-art-scene,.tool-art,.news-thumb img{transition:none!important;transform:none!important;}
}
body.art-hub[data-motion=off] .hero-mist,body.art-hub[data-motion=off] .hero-sparks i{animation:none;}
body.art-hub[data-motion=off] .hero-art-scene{transform:none;transition:none;}

@keyframes art-mist{from{transform:translateX(-1.5%);opacity:.65}to{transform:translateX(1.5%);opacity:1}}
@keyframes art-spark{0%,100%{transform:translateY(13px);opacity:0}45%{opacity:.38}75%{opacity:.09}100%{transform:translateY(-88px);opacity:0}}