/* RogueForge 사이트 스킨 — WoW 뉴스 페이지 구성(떠 있는 내비·흙빛 패널·금색 제목·특집 타일·썸네일 목록)을 따른다.
   수치 근거: docs/WOW_NEWS_DESIGN_CACHE.md. 그림은 전부 게임 화면/모델. */
:root{
  --fx-page:#170e09;
  --fx-panel:#211510;
  --fx-panel-2:#2a1b13;
  --fx-line:#504137;
  --fx-rule:rgba(235,222,194,.14);
  --fx-gold:#f8b700;
  --fx-gold-dim:#c99a2e;
  --fx-beige:#ebdec2;
  --fx-beige-dim:#b1997f;
  --fx-grey:#cacaca;
  --fx-red:#b8290c;
  --fx-red-hi:#d23a14;
  --fx-shadow:0 1px 2px rgba(0,0,0,.8);
  --fx-ease:cubic-bezier(.23,1,.32,1);
  --fx-nav-h:72px;
  --fx-gutter:20px;
  --fx-max:1400px;
  --fx-font:'Nanum Gothic','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --fx-font-brand:'Cinzel','Times New Roman',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--fx-page) url(/assets/forge/dirt-tile.webp) repeat;color:var(--fx-beige);font:400 15px/1.7 var(--fx-font);text-rendering:optimizeLegibility;word-break:keep-all;overflow-wrap:break-word;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.fx-wrap{width:min(var(--fx-max),calc(100% - 2*var(--fx-gutter)));margin-inline:auto}
.fx-skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--fx-gold);color:#000;padding:8px 14px;border-radius:4px}
.fx-skip:focus{left:16px}

/* ── 떠 있는 내비 바 ─────────────────────────── */
.fx-nav{position:absolute;top:16px;left:16px;right:16px;z-index:50;height:var(--fx-nav-h);display:flex;align-items:center;gap:6px;padding:0 12px 0 0;border-radius:10px;background:rgba(30,20,16,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.fx-nav-studio{height:100%;display:flex;align-items:center;padding:0 18px;border-radius:10px 0 0 10px;background:rgba(20,13,10,.55);font:700 11px/1 var(--fx-font);letter-spacing:.18em;color:var(--fx-beige-dim)}
.fx-brand{position:relative;display:flex;align-items:center;margin:0 10px 0 8px;height:100%}
.fx-brand img{width:220px;height:auto;margin-top:10px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.7));transition:filter .25s var(--fx-ease)}
.fx-brand:hover img{filter:drop-shadow(0 3px 6px rgba(0,0,0,.7)) brightness(1.08)}
.fx-brand-word{font:700 25px/1 var(--fx-font-brand);letter-spacing:.02em;background:linear-gradient(180deg,#fff3c4 0%,#f8c64a 45%,#b8790f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}
.fx-menu{display:flex;align-items:center;gap:2px;height:100%}
.fx-menu a{display:flex;align-items:center;height:44px;padding:0 13px;border-radius:6px;font-weight:700;font-size:15px;color:#fff;transition:background .25s var(--fx-ease),color .25s var(--fx-ease)}
.fx-menu a:hover,.fx-menu a[aria-current="page"]{background:rgba(255,255,255,.08);color:var(--fx-gold)}
.fx-nav-end{margin-left:auto;display:flex;align-items:center;gap:10px}
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:6px;font:700 15px/1 var(--fx-font);color:#fff;white-space:nowrap;transition:background .25s var(--fx-ease),filter .25s var(--fx-ease),transform .25s var(--fx-ease)}
.fx-btn-dark{background:#180f06;border:1px solid rgba(255,255,255,.06)}
.fx-btn-dark:hover{background:#2a1a0c}
.fx-btn-red{background:linear-gradient(180deg,var(--fx-red-hi),var(--fx-red));box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.fx-btn-red:hover{filter:brightness(1.12)}
.fx-btn-gold{background:linear-gradient(180deg,#ffd257,#d99a0b);color:#1d1205;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.fx-btn-gold:hover{filter:brightness(1.08)}
.fx-icon-link{display:grid;place-items:center;width:44px;height:44px;border-radius:6px;color:#fff}
.fx-icon-link:hover{background:rgba(255,255,255,.08)}
.fx-icon-link svg{width:22px;height:22px;fill:currentColor}
.fx-burger{display:none;width:48px;height:48px;border:0;background:none;color:#fff;cursor:pointer;border-radius:6px}
.fx-burger svg{width:24px;height:24px;fill:currentColor}

/* ── 히어로 패널: 흐린 게임 풍경이 흙빛 바탕에 녹아든다 ─────────── */
.fx-pane{position:relative;padding-top:calc(var(--fx-nav-h) + 32px + 28px)}
.fx-pane-bg{position:absolute;inset:0 0 auto 0;height:min(1100px,100%);background-position:50% 20%;background-size:cover;background-repeat:no-repeat;z-index:-1}
.fx-pane-bg{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.fx-pane-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,14,9,.08) 0%,rgba(23,14,9,.3) 60%,rgba(23,14,9,.6) 100%)}

/* ── 특집 타일 ─────────────────────────── */
.fx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fx-gutter)}
.fx-tile{position:relative;display:block;overflow:hidden;background:#000;aspect-ratio:452/245}
.fx-tile--lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.fx-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 45%,rgba(0,0,0,.82) 92%)}
.fx-tile::after{content:"";position:absolute;inset:0;z-index:3;border:1px solid var(--fx-line);transition:border-color .25s var(--fx-ease)}
.fx-tile-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px}
.fx-tile-sub,.fx-tile-title{display:block}
.fx-tile-sub{font-size:14.4px;line-height:22px;color:var(--fx-grey);text-shadow:var(--fx-shadow)}
.fx-tile-title{font-size:17.3px;line-height:23px;font-weight:800;color:var(--fx-gold);text-shadow:var(--fx-shadow);transition:color .25s var(--fx-ease)}
.fx-tile--lead .fx-tile-title{font-size:21px;line-height:28px}
.fx-tile-tag{position:absolute;top:14px;left:14px;z-index:2;padding:4px 9px;border-radius:3px;background:rgba(0,0,0,.6);border:1px solid rgba(248,183,0,.45);font-size:12px;font-weight:700;color:var(--fx-gold);letter-spacing:.04em}
.fx-tile:hover::after,.fx-tile:focus-visible::after{border-color:var(--fx-gold)}
.fx-tile:hover .fx-tile-title,.fx-tile:focus-visible .fx-tile-title{color:#fff}
.fx-tile:focus-visible{outline:0}

/* ── 섹션 머리 ─────────────────────────── */
.fx-section{padding:64px 0 0}
.fx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--fx-rule);margin-bottom:8px}
.fx-eyebrow{font:700 12px/1 var(--fx-font-brand);letter-spacing:.24em;color:var(--fx-beige-dim);text-transform:uppercase}
.fx-head h2{margin-top:10px;font-size:28px;line-height:1.35;font-weight:800;color:var(--fx-gold);text-shadow:var(--fx-shadow)}
.fx-head p{margin-top:8px;font-size:14.4px;color:var(--fx-beige-dim)}
.fx-more{flex-shrink:0;font-weight:700;font-size:14px;color:var(--fx-beige);padding:10px 14px;border:1px solid var(--fx-line);border-radius:4px;transition:border-color .25s var(--fx-ease),color .25s var(--fx-ease)}
.fx-more:hover{border-color:var(--fx-gold);color:var(--fx-gold)}

/* ── 소식 목록 ─────────────────────────── */
.fx-list{list-style:none;margin:0;padding:0}
.fx-row{position:relative;border-bottom:1px solid var(--fx-rule);transition:background-color .25s var(--fx-ease)}
.fx-row-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4fr);gap:30px;padding:30px}
.fx-row-thumb{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--fx-line);overflow:hidden;transition:border-color .25s var(--fx-ease)}
.fx-row-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-row-title{font-size:20.7px;line-height:1.5;font-weight:800;color:var(--fx-gold);transition:color .25s var(--fx-ease)}
.fx-row-title a::after{content:"";position:absolute;inset:0}
.fx-row-desc{max-width:680px;margin-top:10px;font-size:14.4px;line-height:1.55;color:var(--fx-beige)}
.fx-row-meta{margin-top:14px;font-size:12px;color:var(--fx-beige-dim)}
.fx-row:hover,.fx-row:focus-within{background:var(--fx-panel)}
.fx-row:hover .fx-row-thumb,.fx-row:focus-within .fx-row-thumb{border-color:var(--fx-gold)}
.fx-row:hover .fx-row-title,.fx-row:focus-within .fx-row-title{color:#fff}
.fx-row a:focus-visible{outline:0}

/* ── 캐릭터·생물 진열(게임 모델) ─────────────────────────── */
.fx-cast{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--fx-gutter);margin-top:24px}
.fx-cast .fx-figure{flex:0 0 calc((100% - 4*var(--fx-gutter))/5)}
.fx-figure{position:relative;margin:0;padding:18px 14px 16px;background:radial-gradient(120% 80% at 50% 100%,rgba(248,183,0,.16),rgba(0,0,0,0) 60%),linear-gradient(180deg,var(--fx-panel-2),var(--fx-panel));border:1px solid var(--fx-line);text-align:center;transition:border-color .25s var(--fx-ease),transform .25s var(--fx-ease)}
.fx-figure img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));transition:transform .4s var(--fx-ease)}
.fx-figure figcaption{margin-top:10px;font-weight:800;font-size:15px;color:var(--fx-gold)}
.fx-figure small{display:block;margin-top:2px;font-size:12px;color:var(--fx-beige-dim);font-weight:400}
.fx-figure:hover{border-color:var(--fx-gold)}
.fx-figure:hover img{transform:translateY(-4px) scale(1.03)}

/* ── 특징(좌우 교차 대형 화면) ─────────────────────────── */
.fx-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:center;padding:44px 0;border-bottom:1px solid var(--fx-rule)}
.fx-feature:nth-of-type(even) .fx-feature-media{order:2}
.fx-feature-media{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--fx-line);overflow:hidden}
.fx-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-feature h3{font-size:24px;line-height:1.4;font-weight:800;color:var(--fx-gold);text-shadow:var(--fx-shadow)}
.fx-feature p{margin-top:14px;font-size:15px;line-height:1.85;color:var(--fx-beige)}
.fx-feature ul{margin:16px 0 0;padding:0;list-style:none}
.fx-feature li{position:relative;padding:5px 0 5px 18px;font-size:14.4px;color:var(--fx-beige)}
.fx-feature li::before{content:"";position:absolute;left:2px;top:14px;width:7px;height:7px;background:var(--fx-gold);transform:rotate(45deg)}

/* ── 플레이 띠(Steam) ─────────────────────────── */
.fx-cta{position:relative;margin-top:72px;padding:70px 0;overflow:hidden;border-block:1px solid var(--fx-line)}
.fx-cta-bg{position:absolute;inset:0;background-size:cover;background-position:50% 50%;z-index:-1}
.fx-cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,14,9,.95) 0%,rgba(23,14,9,.75) 45%,rgba(23,14,9,.15) 100%)}
.fx-cta h2{font-size:34px;line-height:1.3;font-weight:800;color:#fff;text-shadow:var(--fx-shadow)}
.fx-cta h2 span{color:var(--fx-gold)}
.fx-cta p{margin-top:12px;max-width:520px;color:var(--fx-beige)}
.fx-cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ── 푸터 ─────────────────────────── */
.fx-foot{margin-top:72px;padding:40px 0 48px;background:#0f0906;border-top:1px solid var(--fx-line);font-size:13px;color:var(--fx-beige-dim)}
.fx-foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.fx-foot nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.fx-foot a:hover{color:var(--fx-gold)}
.fx-foot .fx-brand-word{font-size:20px}

/* ── 반응형 ─────────────────────────── */
@media (max-width:1180px){
  .fx-brand img{width:180px}
  .fx-menu a{padding:0 9px;font-size:14px}
  .fx-nav-studio{display:none}
  .fx-btn{height:44px;padding:0 16px;font-size:14px}
}
@media (max-width:1024px){
  .fx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-tile--lead{grid-column:span 2;grid-row:auto;aspect-ratio:16/8}
  .fx-feature{grid-template-columns:1fr;gap:22px}
  .fx-feature:nth-of-type(even) .fx-feature-media{order:0}
}
@media (max-width:900px){
  :root{--fx-nav-h:56px}
  .fx-nav{top:0;left:0;right:0;border-radius:0;padding:0 4px;background:rgba(18,12,9,.94)}
  .fx-nav-end .fx-btn,.fx-nav-end .fx-icon-link{display:none}
  .fx-burger{display:grid;place-items:center}
  .fx-brand{position:absolute;left:50%;transform:translateX(-50%);margin:0}
  .fx-brand img{width:150px;margin-top:6px}
  .fx-menu{display:none;position:absolute;top:var(--fx-nav-h);left:0;right:0;height:auto;flex-direction:column;align-items:stretch;padding:8px;background:rgba(18,12,9,.98);border-bottom:1px solid var(--fx-line)}
  .fx-nav.is-open .fx-menu{display:flex}
  .fx-menu a{height:48px;font-size:16px}
  .fx-menu .fx-menu-cta{display:flex;margin-top:6px;background:linear-gradient(180deg,var(--fx-red-hi),var(--fx-red));justify-content:center}
  .fx-pane{padding-top:calc(var(--fx-nav-h) + 44px)}
}
@media (min-width:901px){.fx-menu .fx-menu-cta{display:none}}
@media (max-width:640px){
  :root{--fx-gutter:16px}
  .fx-tiles{grid-template-columns:1fr}
  .fx-tile--lead{grid-column:auto;aspect-ratio:350/186}
  .fx-tile{aspect-ratio:350/186}
  .fx-row-in{grid-template-columns:1fr;padding:22px 4px;gap:0}
  .fx-row-thumb{display:none}
  .fx-row-title{font-size:18px}
  .fx-head{flex-direction:column;align-items:flex-start}
  .fx-head h2{font-size:23px}
  .fx-cast{gap:12px}
  .fx-cast .fx-figure{flex-basis:calc((100% - 12px)/2)}
  .fx-cta{padding:48px 0}
  .fx-cta h2{font-size:26px}
  .fx-cta-bg::after{background:linear-gradient(180deg,rgba(23,14,9,.55),rgba(23,14,9,.95))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ── 메인 홈 (WoW 메인 홈 구성) ─────────────────────────── */
.fx-btn-line{border:1px solid var(--fx-gold);color:#fff;background:rgba(0,0,0,.35)}
.fx-btn-line:hover{background:rgba(248,183,0,.12)}
.fx-lang{height:40px;min-width:44px;padding:0 10px;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:none;color:var(--fx-beige);font:700 13px/1 var(--fx-font);cursor:pointer}
.fx-lang:hover{border-color:var(--fx-gold);color:var(--fx-gold)}

.fx-hero{position:relative;min-height:min(880px,100svh);display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:calc(var(--fx-nav-h) + 40px) 0 72px}
.fx-hero-art{position:absolute;inset:0;z-index:-2}
.fx-hero-art img{width:100%;height:100%;object-fit:cover;object-position:18% 100%}
.fx-hero-art{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.fx-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,9,6,0) 35%,rgba(14,9,6,.38) 60%,rgba(14,9,6,.62) 100%),linear-gradient(180deg,rgba(14,9,6,.3) 0%,rgba(14,9,6,0) 20%)}
.fx-hero-copy{margin-left:auto;width:min(520px,39%);text-align:center}
.fx-hero-logo{width:min(420px,100%);margin:0 auto 6px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.fx-hero-tabs{display:flex;justify-content:center;gap:28px;margin:6px 0 22px}
.fx-hero-tabs span{padding-bottom:8px;font-weight:800;font-size:13px;letter-spacing:.06em;color:var(--fx-beige-dim);border-bottom:3px solid transparent}
.fx-hero-tabs span.is-on{color:var(--fx-gold);border-color:var(--fx-gold)}
.fx-hero-kicker{font-weight:800;font-size:16px;color:var(--fx-gold);text-shadow:var(--fx-shadow)}
.fx-hero h1{margin-top:8px;font-size:clamp(30px,3.3vw,46px);line-height:1.25;font-weight:800;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.65)}
.fx-hero-lead{margin-top:14px;font-size:16px;line-height:1.7;color:var(--fx-beige);text-shadow:var(--fx-shadow)}
.fx-hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:26px}
.fx-hero-actions .fx-btn{height:54px;padding:0 30px;font-size:16px}
.fx-hero-meta{margin-top:18px;font-size:13px;color:var(--fx-beige-dim)}

.fx-band{position:relative;padding:72px 0 0}
.fx-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.fx-title{display:flex;align-items:center;gap:14px;font-size:clamp(28px,3vw,40px);line-height:1.2;font-weight:800;color:#fff}
.fx-title img{width:46px;height:46px}
.fx-links{display:flex;gap:26px;flex-wrap:wrap}
.fx-links a{font-weight:800;font-size:14px;color:var(--fx-gold)}
.fx-links a::after{content:" →"}
.fx-links a:hover{color:#fff}
.fx-center{display:flex;justify-content:center;margin-top:32px}

.fx-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px;align-items:start}
.fx-info-lead small{display:block;font-weight:800;font-size:14px;color:var(--fx-gold)}
.fx-info-lead h2{margin-top:10px;font-size:clamp(30px,3.2vw,44px);line-height:1.22;font-weight:800;color:#fff}
.fx-info-lead p{margin-top:18px;font-size:15.5px;line-height:1.75;color:var(--fx-beige)}
.fx-info-lead .fx-btn{margin-top:26px}
.fx-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px}
.fx-info-item h3{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:800;color:#fff}
.fx-info-item h3 img{width:40px;height:40px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.fx-info-item p{margin-top:10px;font-size:14.4px;line-height:1.7;color:var(--fx-beige)}

.fx-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fx-gutter)}
.fx-card{position:relative;display:flex;flex-direction:column;background:var(--fx-panel);border:1px solid var(--fx-line);transition:border-color .25s var(--fx-ease)}
.fx-card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.fx-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--fx-ease)}
.fx-card-body{padding:18px 20px 22px}
.fx-card-body small{display:block;font-size:12px;letter-spacing:.08em;color:var(--fx-beige)}
.fx-card-body h3{margin-top:7px;font-size:18px;line-height:1.4;font-weight:800;color:var(--fx-gold);transition:color .25s var(--fx-ease)}
.fx-card-body p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--fx-beige-dim)}
.fx-card:hover{border-color:var(--fx-gold)}
.fx-card:hover h3{color:#fff}
.fx-card:hover .fx-card-media img{transform:scale(1.04)}

.fx-cast-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.fx-cast-tabs button{height:40px;padding:0 16px;border:1px solid var(--fx-line);border-radius:4px;background:var(--fx-panel);color:var(--fx-beige);font:700 14px/1 var(--fx-font);cursor:pointer;transition:border-color .25s var(--fx-ease),color .25s var(--fx-ease)}
.fx-cast-tabs button:hover,.fx-cast-tabs button[aria-pressed="true"]{border-color:var(--fx-gold);color:var(--fx-gold)}
.fx-figure[hidden]{display:none}

.fx-split{display:grid;grid-template-columns:1fr 1fr;margin-top:80px;border-block:1px solid var(--fx-line)}
.fx-split-panel{position:relative;min-height:300px;padding:48px 48px 44px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center}
.fx-split-panel--warm{background:linear-gradient(90deg,#2a120c 0%,#4a2116 100%);align-items:flex-end;text-align:right}
.fx-split-panel--cool{background:linear-gradient(90deg,#16243a 0%,#0f1828 100%);border-left:1px solid var(--fx-line);align-items:flex-start}
.fx-split-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/forge/dirt-tile.webp);opacity:.25;mix-blend-mode:overlay}
.fx-split-panel small{font-weight:800;font-size:14px;color:var(--fx-gold)}
.fx-split-panel h2{margin-top:6px;font-size:clamp(24px,2.4vw,32px);line-height:1.3;font-weight:800;color:#fff}
.fx-split-panel p{margin-top:12px;max-width:340px;font-size:15px;line-height:1.7;color:var(--fx-beige)}
.fx-split-panel .fx-btn{margin-top:20px}
.fx-split-figure{position:absolute;bottom:-4%;z-index:-1;height:100%;width:auto;max-width:48%;object-fit:contain;object-position:bottom;pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.fx-split-panel--warm .fx-split-figure{left:3%;object-position:left bottom}
.fx-split-panel--cool .fx-split-figure{right:2%;object-position:right bottom}

.fx-follow{padding:64px 0 8px;text-align:center}
.fx-follow h2{font-size:24px;font-weight:800;color:var(--fx-beige)}
.fx-follow nav{display:flex;justify-content:center;gap:16px;margin-top:20px}
.fx-follow a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.06);color:var(--fx-beige);transition:background .25s var(--fx-ease),color .25s var(--fx-ease)}
.fx-follow a:hover{background:var(--fx-gold);color:#1d1205}
.fx-follow svg{width:24px;height:24px;fill:currentColor}

@media (max-width:1024px){
  .fx-cast .fx-figure{flex-basis:calc((100% - 2*var(--fx-gutter))/3)}
  .fx-info{grid-template-columns:1fr;gap:36px}
  .fx-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-hero-copy{width:min(480px,48%)}
}
@media (max-width:900px){
  .fx-hero{min-height:auto;align-items:flex-end;padding-top:calc(var(--fx-nav-h) + 52vw)}
  .fx-hero-art img{object-position:30% 0}
  .fx-hero-art{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 80%);mask-image:linear-gradient(180deg,#000 50%,transparent 80%)}
  .fx-hero::before{background:linear-gradient(180deg,rgba(14,9,6,0) 30%,rgba(14,9,6,.55) 60%)}
  .fx-hero-copy{width:100%;margin:0}
  .fx-split{grid-template-columns:1fr}
  .fx-split-panel--cool{border-left:0;border-top:1px solid var(--fx-line)}
}
@media (max-width:640px){
  .fx-info-grid{grid-template-columns:1fr;gap:26px}
  .fx-cards{grid-template-columns:1fr}
  .fx-split-panel{padding:36px 22px;min-height:260px}
  .fx-split-panel p{max-width:58%}
  .fx-split-figure{height:100%;opacity:.9}
  .fx-hero-actions .fx-btn{width:100%}
  .fx-title img{width:36px;height:36px}
  .fx-cast .fx-figure{flex-basis:calc((100% - 12px)/2)}
}
.fx-list-divider{padding:46px 30px 18px;border-bottom:1px solid var(--fx-rule)}
.fx-list-divider span{font:700 13px/1 var(--fx-font-brand);letter-spacing:.2em;color:var(--fx-beige-dim);text-transform:uppercase}
.fx-list-divider p{margin-top:8px;font-size:13px;color:var(--fx-beige-dim)}
.fx-pane .fx-title{text-shadow:0 2px 8px rgba(0,0,0,.6)}
@media (max-width:640px){.fx-list-divider{padding:36px 4px 14px}}
.fx-figure-tag{position:absolute;top:10px;left:10px;z-index:1;padding:3px 8px;border-radius:3px;background:rgba(0,0,0,.6);border:1px solid rgba(248,183,0,.55);font:800 11px/1.2 var(--fx-font);letter-spacing:.06em;color:var(--fx-gold)}
.fx-figure{overflow:hidden}
.fx-figure--zoom img{transform:scale(1.5)}
.fx-figure--zoom:hover img{transform:translateY(-4px) scale(1.55)}

/* ── 생물 특징 창(카드 클릭) ── */
.fx-cast-hint{margin:4px 0 0;font-size:13px;color:var(--fx-beige-dim)}
.fx-figure[data-id]{cursor:pointer}
.fx-figure[data-id]:focus-visible{outline:2px solid var(--fx-gold);outline-offset:2px}
.fx-lore{width:min(880px,94vw);max-height:92vh;padding:0;border:1px solid var(--fx-line);background:var(--fx-panel);color:var(--fx-beige);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.fx-lore::backdrop{background:rgba(8,5,3,.78)}
.fx-lore-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.fx-lore-art{position:relative;display:grid;place-items:center;min-height:340px;padding:24px;background:radial-gradient(110% 80% at 50% 100%,rgba(248,183,0,.18),rgba(0,0,0,0) 60%),linear-gradient(180deg,#2a1b13,#170e09)}
.fx-lore-art img{width:100%;max-height:420px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(0,0,0,.6))}
.fx-lore-body{padding:30px 30px 26px;overflow:auto;max-height:92vh}
.fx-lore-cat{display:inline-block;padding:3px 9px;border:1px solid rgba(248,183,0,.5);font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--fx-gold)}
.fx-lore-body h3{margin-top:10px;font-size:26px;line-height:1.3;font-weight:800;color:#fff}
.fx-lore-first{margin-top:12px;padding-left:12px;border-left:3px solid rgba(255,255,255,.18);font-size:14px;line-height:1.7;color:var(--fx-beige-dim)}
.fx-lore-text{margin-top:14px;font-size:15.5px;line-height:1.8;color:var(--fx-beige)}
.fx-lore-facts{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--fx-rule);font-size:14px;line-height:1.6}
.fx-lore-facts dt{font-weight:800;color:var(--fx-gold);white-space:nowrap}
.fx-lore-facts dd{margin:0;color:var(--fx-beige)}
.fx-lore-close{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border:1px solid var(--fx-line);background:rgba(0,0,0,.55);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.fx-lore-close:hover{border-color:var(--fx-gold);color:var(--fx-gold)}
@media (max-width:700px){
  .fx-lore-in{grid-template-columns:1fr}
  .fx-lore-art{min-height:220px;padding:16px}
  .fx-lore-art img{max-height:240px}
  .fx-lore-body{padding:20px 18px 22px;max-height:none}
  .fx-lore-body h3{font-size:22px}
}

/* ── 세계 설정 탭(WoW 정보 탭: 금색 밑줄) ── */
.fx-tabs{display:flex;flex-wrap:wrap;gap:6px 30px;margin:4px 0 30px;border-bottom:1px solid var(--fx-rule)}
.fx-tabs [role=tab]{position:relative;padding:12px 2px 14px;border:0;background:none;font:800 17px/1.2 var(--fx-font);color:var(--fx-beige-dim);cursor:pointer;transition:color .25s var(--fx-ease)}
.fx-tabs [role=tab]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--fx-gold);transform:scaleX(0);transition:transform .25s var(--fx-ease)}
.fx-tabs [role=tab]:hover{color:#fff}
.fx-tabs [role=tab][aria-selected=true]{color:#fff}
.fx-tabs [role=tab][aria-selected=true]::after{transform:scaleX(1)}
.fx-tabs [role=tab]:focus-visible{outline:2px solid var(--fx-gold);outline-offset:2px}
.fx-tabpanel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:start}
.fx-tabpanel[hidden]{display:none}
.fx-tabpanel-art{margin:0}
.fx-tabpanel-art img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--fx-line)}
.fx-tabpanel-art figcaption{padding:12px 14px;background:rgba(255,255,255,.07);font-size:13.5px;line-height:1.7;color:rgba(235,222,194,.78)}
.fx-lore-quote{margin:0 0 24px;padding:20px 24px;background:rgba(255,255,255,.06);border-left:.4em solid var(--fx-gold-dim);font-size:17px;line-height:1.95;color:#fff}
.fx-setting-lead{margin-bottom:20px;font-size:16.5px;line-height:1.85;color:#fff}
.fx-setting-list{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:0;font-size:15px;line-height:1.75}
.fx-setting-list dt{font-weight:800;color:var(--fx-heading,#daa520);white-space:nowrap}
.fx-setting-list dd{margin:0;color:var(--fx-beige)}
.fx-setting-note{margin-top:22px;font-size:14px;line-height:1.75;color:var(--fx-beige-dim)}
.fx-table-wrap{overflow-x:auto}
.fx-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6}
.fx-table th,.fx-table td{padding:11px 14px;border-bottom:1px solid var(--fx-rule);text-align:left;white-space:nowrap}
.fx-table th{font-weight:800;color:var(--fx-gold);background:rgba(255,255,255,.04)}
.fx-table td:first-child{font-weight:800;color:#fff}
.fx-table tbody tr:hover{background:rgba(255,255,255,.04)}
@media (max-width:1024px){.fx-tabpanel{grid-template-columns:1fr;gap:26px}}
@media (max-width:640px){
  .fx-tabs{gap:2px 18px;overflow-x:auto;flex-wrap:nowrap}
  .fx-tabs [role=tab]{font-size:15px;white-space:nowrap}
  .fx-setting-list{grid-template-columns:1fr;gap:2px}
  .fx-setting-list dd{margin-bottom:12px}
  .fx-lore-quote{font-size:15.5px;padding:16px 18px}
}

/* ── 최신 소식 특집(2026-10-28): 큰 영상 카드 + 썸네일 타일 · 등장 애니메이션 ─────────── */
.fx-nf{position:relative;display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);margin-bottom:var(--fx-gutter);overflow:hidden;border:1px solid var(--fx-line);background:radial-gradient(60% 90% at 100% 0%,rgba(248,183,0,.10),transparent 70%),linear-gradient(90deg,#2d3126 0%,#2d3126 44%,#261c14 78%,var(--fx-panel) 100%);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.fx-nf::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:2;background:linear-gradient(90deg,transparent,var(--fx-gold) 30%,#fff3c4 50%,var(--fx-gold) 70%,transparent)}
.fx-nf-media{position:relative;aspect-ratio:760/732;background:#2d3126}
.fx-nf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.fx-nf-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(45,49,38,0) 62%,#2d3126 99%)}
.fx-nf-badge{position:absolute;left:16px;top:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.55);font-size:12px;font-weight:800;letter-spacing:.06em;color:#fff}
.fx-nf-badge i{width:8px;height:8px;border-radius:50%;background:var(--fx-red-hi);box-shadow:0 0 0 0 rgba(210,58,20,.7);animation:fx-nf-pulse 1.8s infinite}
@keyframes fx-nf-pulse{70%{box-shadow:0 0 0 8px rgba(210,58,20,0)}100%{box-shadow:0 0 0 0 rgba(210,58,20,0)}}
.fx-nf-body{position:relative;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:48px clamp(24px,4vw,64px) 48px clamp(20px,2.5vw,40px)}
.fx-nf-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:14.4px;font-weight:700;color:var(--fx-grey)}
.fx-nf-new{padding:4px 10px;border-radius:3px;background:linear-gradient(180deg,#ffd257,#d99a0b);color:#1d1205;font-size:12px;font-weight:800;letter-spacing:.06em}
.fx-nf-title{font-size:clamp(26px,3vw,42px);line-height:1.25;font-weight:800;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.fx-nf-lead{max-width:34em;font-size:16px;line-height:1.75;color:var(--fx-beige)}
.fx-nf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.fx-nf-chips li{padding:6px 14px;border:1px solid rgba(248,183,0,.45);border-radius:999px;background:rgba(0,0,0,.25);font-size:13px;font-weight:700;color:var(--fx-gold)}
.fx-nf-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.fx-news-grid .fx-tile{aspect-ratio:16/9}
.fx-news-grid .fx-tile::before{background:linear-gradient(to bottom,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.9) 100%)}
.fx-news-grid .fx-tile img{transition:transform .7s var(--fx-ease),filter .7s var(--fx-ease)}
.fx-news-grid .fx-tile:hover img,.fx-news-grid .fx-tile:focus-visible img{transform:scale(1.06);filter:brightness(1.08)}
.fx-tile-play{position:absolute;left:50%;top:44%;z-index:2;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid var(--fx-gold);transition:transform .35s var(--fx-ease),background .35s var(--fx-ease)}
.fx-tile-play::after{content:"";position:absolute;left:25px;top:19px;border-style:solid;border-width:13px 0 13px 20px;border-color:transparent transparent transparent var(--fx-gold)}
.fx-tile:hover .fx-tile-play{transform:scale(1.1);background:rgba(184,41,12,.85)}
.fx-tile--notice{background:radial-gradient(90% 120% at 80% 0%,rgba(248,183,0,.22),transparent 60%),linear-gradient(160deg,var(--fx-panel-2),#120a06)}
.fx-tile--notice::before{background:none}
.fx-notice-date{position:absolute;right:22px;top:16px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;line-height:1;transition:transform .7s var(--fx-ease)}
.fx-notice-date small{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--fx-beige-dim)}
.fx-notice-date b{margin-top:6px;font:700 clamp(54px,6vw,84px)/1 var(--fx-font-brand);background:linear-gradient(180deg,#fff3c4 0%,#f8c64a 45%,#b8790f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.fx-tile--notice:hover .fx-notice-date{transform:scale(1.05)}
/* 등장: 스크립트가 .fx-news 에 is-armed 를 붙인 뒤에만 숨긴다(스크립트 없으면 그대로 보임) */
.fx-news.is-armed .fx-rise{opacity:0;transform:translateY(26px);transition:opacity .8s var(--fx-ease),transform .8s var(--fx-ease)}
.fx-news.is-armed .fx-rise.is-in{opacity:1;transform:none}
@media (max-width:1024px){
  .fx-nf{grid-template-columns:1fr;background:linear-gradient(180deg,#2d3126 0%,#2d3126 50%,var(--fx-panel) 100%)}
  .fx-nf-media{aspect-ratio:auto;height:min(92vw,540px)}
  .fx-nf-media::after{background:linear-gradient(180deg,rgba(45,49,38,0) 70%,#2d3126 99%)}
  .fx-nf-body{padding:8px 24px 32px}
}
@media (max-width:640px){
  .fx-news-grid .fx-tile{aspect-ratio:4/3}
  .fx-nf-body{padding:4px 18px 26px;gap:14px}
  .fx-nf-lead{font-size:15px}
  .fx-nf-cta .fx-btn{flex:1 1 auto}
  .fx-notice-date b{font-size:56px}
}
@media (prefers-reduced-motion:reduce){
  .fx-news.is-armed .fx-rise{opacity:1;transform:none}
  .fx-news-grid .fx-tile:hover img{transform:none}
  .fx-nf-badge i{animation:none}
}
.fx-tile--video{background:#2d3126}
.fx-tile--video video{position:absolute;top:0;left:50%;width:auto;height:100%;aspect-ratio:760/732;transform:translateX(-50%);object-fit:contain}
.fx-tile--video video{-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}