/* 나노마신 사전예약 — 기획서([CA] 나노마신사전예약용 페이지 기획) 공통 섹션
   각 시안은 :root 에 --nm-* 토큰만 바꿔 자기 톤으로 입힌다. */
:root{
  --nm-bg:#0d0c0b;--nm-bg2:#171513;--nm-line:#2f2b27;--nm-fg:#ece8e1;--nm-dim:#a29b91;
  --nm-acc:#b8322a;--nm-acc-fg:#ffffff;--nm-gold:#c4a466;
  --nm-display:'Noto Serif KR',serif;--nm-body:'Noto Sans KR',sans-serif;--nm-radius:0px;
}
.nm-wrap{position:relative;z-index:3;background:var(--nm-bg);color:var(--nm-fg);font-family:var(--nm-body)}
.nm-sec{padding:96px 16px;border-top:1px solid var(--nm-line);position:relative}
.nm-in{max-width:1180px;margin:0 auto}
.nm-eyebrow{display:block;font:600 12px var(--nm-body);letter-spacing:.32em;color:var(--nm-acc);text-transform:uppercase}
.nm-h2{margin:10px 0 0;font:900 clamp(30px,4vw,48px)/1.2 var(--nm-display);text-wrap:balance}
.nm-lead{margin:12px 0 0;max-width:640px;font:400 15px/1.8 var(--nm-body);color:var(--nm-dim);word-break:keep-all}
.nm-ph{border:1px dashed color-mix(in srgb,var(--nm-fg) 30%,transparent);display:grid;place-items:center;text-align:center;font:400 13px/1.7 var(--nm-body);color:var(--nm-dim)}
.nm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:var(--nm-radius);background:var(--nm-acc);color:var(--nm-acc-fg);font:700 16px var(--nm-body);letter-spacing:.06em;text-decoration:none;cursor:pointer;transition:filter .25s,transform .25s}
.nm-btn:hover{filter:brightness(1.15)}
.nm-btn:active{transform:translateY(1px)}
.nm-btn.ghost{background:transparent;color:var(--nm-fg);border:1px solid color-mix(in srgb,var(--nm-fg) 40%,transparent)}
.nm-btn.sm{min-height:44px;padding:0 16px;font-size:14px}
:focus-visible{outline:2px solid var(--nm-acc);outline-offset:3px}

/* 1. 히어로 안내 띠 */
.nm-herobar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-family:var(--nm-body)}
.nm-open{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--nm-acc);color:var(--nm-fg);font:700 12px var(--nm-body);letter-spacing:.2em;background:color-mix(in srgb,var(--nm-acc) 18%,transparent)}
.nm-open i{width:7px;height:7px;border-radius:50%;background:var(--nm-acc);animation:nm-blink 1.4s steps(2) infinite}
@keyframes nm-blink{50%{opacity:.2}}
.nm-date{font:500 14px var(--nm-body);color:var(--nm-fg);opacity:.9}
.nm-herobar .nm-row{display:flex;flex-wrap:wrap;gap:8px;width:100%}

/* 헤더 스토어 버튼 */
.nm-store{position:relative;display:inline-flex}
.nm-store>a,.nm-store>button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid color-mix(in srgb,var(--nm-fg) 40%,transparent);border-radius:var(--nm-radius);background:color-mix(in srgb,var(--nm-bg) 70%,transparent);color:var(--nm-fg);font:600 13px var(--nm-body);text-decoration:none;cursor:pointer;white-space:nowrap}
.nm-store svg{width:16px;height:16px}
.nm-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:120;width:240px;padding:14px;background:var(--nm-bg2);border:1px solid var(--nm-line);box-shadow:0 20px 40px rgba(0,0,0,.4);display:none}
.nm-pop.open{display:block}
.nm-pop .nm-ph{aspect-ratio:1/1;margin-bottom:10px}
.nm-pop p{margin:0 0 10px;font:400 12px/1.6 var(--nm-body);color:var(--nm-dim)}
.nm-pop a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-top:1px solid var(--nm-line);color:var(--nm-fg);text-decoration:none;font:500 13px var(--nm-body)}

/* 플로팅 배너: PC 우측 중단 / 모바일 우측 하단 */
.nm-float{position:fixed;z-index:110;right:16px;top:50%;transform:translateY(-50%);width:132px;background:var(--nm-bg2);border:1px solid var(--nm-acc);box-shadow:0 14px 36px rgba(0,0,0,.45);font-family:var(--nm-body);color:var(--nm-fg);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,visibility .35s}
/* 첫 화면(히어로 숫자·그림 가림 방지)과 헤더 스토어 드롭다운이 열려 있는 동안은 숨김 */
.nm-float.away,html.nm-popopen .nm-float{opacity:0;visibility:hidden;pointer-events:none}
.nm-float .nm-fx{position:absolute;right:2px;top:2px;width:28px;height:28px;background:none;border:0;color:var(--nm-dim);cursor:pointer;font-size:14px}
.nm-float .nm-fv{aspect-ratio:1/1;margin:30px 10px 8px}
.nm-float b{display:block;padding:0 10px;font:700 13px/1.4 var(--nm-body)}
.nm-float small{display:block;padding:2px 10px 10px;font:400 11px/1.5 var(--nm-body);color:var(--nm-dim)}
.nm-float a{display:flex;align-items:center;justify-content:center;min-height:46px;background:var(--nm-acc);color:var(--nm-acc-fg);font:700 14px var(--nm-body);text-decoration:none;letter-spacing:.06em}
.nm-float.min{transform:translate(calc(100% - 44px),-50%)}
.nm-float.min .nm-fv,.nm-float.min b,.nm-float.min small{visibility:hidden}
/* PC: 배너 아래에 본문이 오면 자동으로 접힘(nm-common.js tk) — 올리면 펼침 */
@media (min-width:1101px){.nm-float.tuck:not(:hover):not(:focus-within){transform:translate(calc(100% - 44px),-50%)}.nm-float.tuck:not(:hover):not(:focus-within) .nm-fv,.nm-float.tuck:not(:hover):not(:focus-within) b,.nm-float.tuck:not(:hover):not(:focus-within) small{visibility:hidden}.nm-float.tuck2:not(:focus-within){opacity:0;visibility:hidden;pointer-events:none}}
.nm-float.pulse{animation:nm-pulse 2.6s ease-in-out infinite}
@keyframes nm-pulse{50%{box-shadow:0 14px 36px rgba(0,0,0,.45),0 0 0 6px color-mix(in srgb,var(--nm-acc) 30%,transparent)}}
@media (max-width:1100px){
  .nm-float{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none;width:auto;display:flex;align-items:center;border-radius:var(--nm-radius)}
  .nm-float .nm-fv,.nm-float small{display:none}
  .nm-float b{padding:0 10px 0 14px;font-size:12px;white-space:nowrap}
  .nm-float a{min-height:48px;padding:0 16px}
  .nm-float .nm-fx{position:static;width:36px;height:48px}
  .nm-float.min{transform:translateX(calc(100% - 40px))}
}

@media (min-width:1101px){:where(body:not([data-nm-float="off"]) .nm-wrap) .nm-in{max-width:min(1180px,calc(100vw - 340px))}}

/* 2. 보상 슬라이드 */
.nm-slider{position:relative;margin-top:36px;overflow:hidden;touch-action:pan-y}
/* 자동 넘김: 0.5초 안에 기존 그림은 투명해지며 사라지고 새 그림이 드러남(겹쳐 놓고 투명도만 교차) */
.nm-track{display:grid}
.nm-slide{grid-area:1/1;min-width:0;padding:2px;display:grid;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.nm-slide.on{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
/* 움직임 줄이기는 ?motion=reduce(html.rm)일 때만 — OS 설정(prefers-reduced-motion)으로는 끄지 않음 */
html.rm .nm-slide,html.rm .nm-slide.on{transition:none}
/* 시안이 전역으로 전환을 끄는 규칙(*{transition:none!important})을 두어도 공통 슬라이드 크로스페이드는 유지(?motion=reduce 때만 끔) */
html:not(.rm) .nm-slide{transition:opacity .5s ease,visibility 0s linear .5s!important}
html:not(.rm) .nm-slide.on{transition:opacity .5s ease,visibility 0s!important}
.nm-fixed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;align-content:center;padding:28px;background:var(--nm-bg2);border:1px solid var(--nm-line)}
.nm-fixed .nm-vis{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px}
.nm-fixed .nm-vis .nm-ph{aspect-ratio:3/4}
.nm-fixed .nm-vis .nm-ph+.nm-ph{aspect-ratio:1/1;align-self:end}
.nm-tag{display:inline-block;padding:6px 12px;background:var(--nm-acc);color:var(--nm-acc-fg);font:700 13px var(--nm-body);letter-spacing:.1em}
.nm-fixed h3{margin:14px 0 0;font:900 clamp(24px,3vw,36px)/1.25 var(--nm-display)}
.nm-fixed p{margin:10px 0 18px;font:400 14px/1.8 var(--nm-body);color:var(--nm-dim);word-break:keep-all}
.nm-ms{padding:28px;background:var(--nm-bg2);border:1px solid var(--nm-line)}
.nm-ms .nm-cnt{font:500 14px var(--nm-body);color:var(--nm-dim)}
.nm-ms .nm-cnt b{font:900 26px var(--nm-display);color:var(--nm-fg);font-variant-numeric:tabular-nums}
.nm-steps{margin:22px 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;position:relative}
.nm-step{position:relative;padding:16px 12px;border:1px solid var(--nm-line);text-align:center;background:var(--nm-bg);transition:border-color .4s}
.nm-step .nm-ic{width:56px;height:56px;margin:0 auto 10px;display:grid;place-items:center;border:1px solid var(--nm-line);color:var(--nm-dim)}
.nm-step .nm-ic svg{width:22px;height:22px}
.nm-step b{display:block;font:800 16px var(--nm-display)}
.nm-step span{display:block;margin-top:4px;font:400 12px/1.5 var(--nm-body);color:var(--nm-dim)}
.nm-step em{display:block;margin-top:8px;font:700 11px var(--nm-body);font-style:normal;letter-spacing:.15em;color:var(--nm-dim)}
.nm-step.on{border-color:var(--nm-acc)}
.nm-step.on .nm-ic{border-color:var(--nm-acc);color:var(--nm-acc);background:color-mix(in srgb,var(--nm-acc) 14%,transparent)}
.nm-step.on em{color:var(--nm-acc)}
/* 마일스톤 표현 변형(시안별) */
[data-nm-ms="lantern"] .nm-step .nm-ic{border-radius:40% 40% 36% 36%;height:70px}
[data-nm-ms="lantern"] .nm-step.on .nm-ic{background:radial-gradient(circle at 50% 55%,#ffd59a,#e0762f 55%,#8c2a17);color:#2a1206;border-color:#e9a25b;box-shadow:0 0 30px rgba(233,140,60,.5)}
[data-nm-ms="seal"] .nm-step .nm-ic{border-radius:50%;border-width:2px}
[data-nm-ms="seal"] .nm-step.on .nm-ic{transform:rotate(-10deg)}
[data-nm-ms="quest"] .nm-steps{grid-template-columns:1fr;gap:6px}
[data-nm-ms="quest"] .nm-step{display:grid;grid-template-columns:44px 1fr auto auto;gap:12px;align-items:center;text-align:left;padding:10px 14px}
[data-nm-ms="quest"] .nm-step .nm-ic{width:40px;height:40px;margin:0}
[data-nm-ms="quest"] .nm-step em{margin:0}
.nm-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.nm-nav button{width:44px;height:44px;border:1px solid var(--nm-line);background:var(--nm-bg2);color:var(--nm-fg);cursor:pointer;border-radius:var(--nm-radius)}
.nm-dots{display:flex;gap:6px}
.nm-dots button{width:28px;height:44px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.nm-dots button::after{content:'';position:absolute;left:4px;right:4px;top:20px;height:3px;background:var(--nm-line)}
.nm-dots button.on::after{background:var(--nm-acc)}
.nm-slabels{display:flex;gap:6px;flex-wrap:wrap;margin-top:24px}
.nm-slabels button{min-height:44px;padding:0 16px;border:1px solid var(--nm-line);background:none;color:var(--nm-dim);font:600 13px var(--nm-body);cursor:pointer;border-radius:var(--nm-radius)}
.nm-slabels button.on{border-color:var(--nm-acc);color:var(--nm-fg)}

/* 3. 인게임 영상 */
.nm-video{--nm-vbase:color-mix(in srgb,var(--nm-acc) 20%,#15181c);position:relative;margin-top:30px;aspect-ratio:16/9;max-height:78vh;width:100%;overflow:hidden;background:var(--nm-vbase);border:1px solid var(--nm-line)}
.nm-vbg{position:absolute;inset:-10%;background:radial-gradient(ellipse at var(--vx,40%) 50%,color-mix(in srgb,var(--nm-acc) 50%,#15181c),var(--nm-vbase) 68%);animation:nm-pan 9s ease-in-out infinite alternate}
@keyframes nm-pan{to{transform:translateX(6%) scale(1.06)}}
.nm-vlabel{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);padding:10px 14px;border:1px dashed rgba(255,255,255,.4);font:400 13px var(--nm-body);color:#e8e2da;text-align:center;white-space:nowrap}
.nm-vtabs{position:absolute;left:24px;bottom:24px;display:flex;gap:8px;z-index:2}
.nm-vtabs button{min-height:46px;padding:0 20px;white-space:nowrap;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.5);color:#fff;font:700 15px var(--nm-body);cursor:pointer;backdrop-filter:blur(4px);border-radius:var(--nm-radius)}
.nm-vtabs button.on{background:var(--nm-acc);border-color:var(--nm-acc);color:var(--nm-acc-fg)}
.nm-mute{position:absolute;right:16px;top:14%;z-index:2;min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.5);color:#fff;font:600 12px var(--nm-body);cursor:pointer}
.nm-vbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15)}
.nm-vbar i{display:block;height:100%;width:0;background:var(--nm-acc)}
@media (max-width:860px){.nm-vtabs{left:10px;right:auto;bottom:10px;gap:6px}.nm-vtabs button{min-height:44px;padding:0 12px;font-size:14px}.nm-mute{right:10px}.nm-video{aspect-ratio:4/5}}
@media (max-width:860px) and (orientation:landscape){.nm-video{aspect-ratio:16/9}}

/* 4. 게임 특징 캐러셀 */
.nm-feat{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:center}
.nm-feat .nm-ph{aspect-ratio:16/10}
.nm-feat small{font:700 12px var(--nm-body);letter-spacing:.25em;color:var(--nm-acc)}
.nm-feat h3{margin:10px 0 0;font:900 clamp(22px,2.6vw,32px)/1.3 var(--nm-display)}
.nm-feat p{margin:10px 0 0;font:400 15px/1.8 var(--nm-body);color:var(--nm-dim);word-break:keep-all}

/* 6. 공식 채널 허브 */
.nm-ch{margin-top:30px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.nm-ch a{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 10px;border:1px solid var(--nm-line);background:var(--nm-bg2);color:var(--nm-fg);text-decoration:none;transition:border-color .3s,transform .3s;border-radius:var(--nm-radius)}
.nm-ch a:hover{border-color:var(--nm-acc);transform:translateY(-4px)}
.nm-ch svg{width:34px;height:34px}
.nm-ch b{font:700 15px var(--nm-body)}
.nm-ch span{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;white-space:nowrap;border:1px solid var(--nm-line);font:500 12px var(--nm-body);color:var(--nm-dim)}

/* 7. SNS 공유 이벤트 — 2026-10-22 일단 제거(nm-common.js C.shareEvent=false). 다시 넣을 때 쓰도록 스타일은 남겨 둠 */
.nm-share{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding:28px;background:var(--nm-bg2);border:1px solid var(--nm-line)}
.nm-share .nm-ph{aspect-ratio:16/9}
.nm-share .nm-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.nm-note{display:inline-block;margin-top:10px;padding:4px 10px;border:1px dashed var(--nm-line);font:500 12px var(--nm-body);color:var(--nm-dim)}


/* ===== 시안별 아래쪽 섹션 표현 (body[data-nm-look]) — 시안끼리 비슷해 보이지 않게 ===== */
/* center: 가운데 정렬 · 제목 위 한자 낙관 느낌 */
[data-nm-look="center"] .nm-sec .nm-in>.nm-eyebrow,[data-nm-look="center"] .nm-sec .nm-in>.nm-h2,[data-nm-look="center"] .nm-sec .nm-in>.nm-lead{text-align:center;margin-left:auto;margin-right:auto}
[data-nm-look="center"] .nm-sec .nm-in>.nm-h2::after{content:'';display:block;width:56px;height:2px;margin:18px auto 0;background:var(--nm-acc)}
[data-nm-look="center"] .nm-slabels,[data-nm-look="center"] .nm-ch{justify-content:center}
[data-nm-look="center"] .nm-fixed,[data-nm-look="center"] .nm-ms,[data-nm-look="center"] .nm-share{border-color:color-mix(in srgb,var(--nm-acc) 45%,var(--nm-line))}
[data-nm-look="center"] .nm-step{border-radius:50% 50% 8px 8px/40px 40px 8px 8px}
/* split: 제목은 왼쪽 고정 열, 내용은 오른쪽 */
@media (min-width:861px){
  [data-nm-look="split"] .nm-sec>.nm-in{display:flow-root}
  [data-nm-look="split"] .nm-sec>.nm-in>.nm-eyebrow,[data-nm-look="split"] .nm-sec>.nm-in>.nm-h2,[data-nm-look="split"] .nm-sec>.nm-in>.nm-lead{float:left;clear:left;width:260px}
  [data-nm-look="split"] .nm-sec>.nm-in>.nm-h2{font-size:clamp(28px,2.6vw,38px)}
  [data-nm-look="split"] .nm-sec>.nm-in>:not(.nm-eyebrow):not(.nm-h2):not(.nm-lead){margin-left:308px}
  [data-nm-look="split"] .nm-sec>.nm-in>.nm-h2+:not(.nm-lead),[data-nm-look="split"] .nm-sec>.nm-in>.nm-lead+*{margin-top:0}
  [data-nm-look="split"] .nm-sec>.nm-in>.nm-slabels+.nm-slider{margin-top:16px}
  [data-nm-look="split"] .nm-sec>.nm-in>.nm-video{width:auto}
}
[data-nm-look="split"] .nm-sec{border-top:0;border-left:4px solid var(--nm-acc);margin:0 0 0 0}
[data-nm-look="split"] .nm-ch{grid-template-columns:1fr;gap:0}
[data-nm-look="split"] .nm-ch a{flex-direction:row;justify-content:flex-start;gap:16px;padding:16px 18px;border-width:0 0 1px;background:transparent}
[data-nm-look="split"] .nm-ch a span{margin-left:auto}
/* hud: 모서리 깎인 패널 · 모노 라벨 · 코너 표시 */
[data-nm-look="hud"] .nm-eyebrow{font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;letter-spacing:.2em}
[data-nm-look="hud"] .nm-eyebrow::before{content:'// '}
[data-nm-look="hud"] .nm-fixed,[data-nm-look="hud"] .nm-ms,[data-nm-look="hud"] .nm-share,[data-nm-look="hud"] .nm-ch a,[data-nm-look="hud"] .nm-step,[data-nm-look="hud"] .nm-btn{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
[data-nm-look="hud"] .nm-video{outline:1px solid var(--nm-acc);outline-offset:6px}
[data-nm-look="hud"] .nm-sec{background-image:linear-gradient(color-mix(in srgb,var(--nm-acc) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--nm-acc) 6%,transparent) 1px,transparent 1px);background-size:40px 40px}
[data-nm-look="hud"] .nm-h2{text-transform:uppercase}
/* line: 상자 없이 가는 선과 큰 글자 · 잡지형 */
[data-nm-look="line"] .nm-fixed,[data-nm-look="line"] .nm-ms,[data-nm-look="line"] .nm-share{background:transparent;border:0;border-top:2px solid var(--nm-fg);padding:28px 0 0}
[data-nm-look="line"] .nm-step{background:transparent;border:0;border-left:1px solid var(--nm-line);text-align:left}
[data-nm-look="line"] .nm-step .nm-ic{margin:0 0 10px;border:0;justify-content:start}
[data-nm-look="line"] .nm-h2{font-size:clamp(40px,6vw,84px);letter-spacing:-.02em;line-height:1.08}
[data-nm-look="line"] .nm-sec{border-top:0}
[data-nm-look="line"] .nm-ch{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:2px solid var(--nm-fg)}
[data-nm-look="line"] .nm-ch a{background:transparent;border:0;border-right:1px solid var(--nm-line);align-items:flex-start;text-align:left}
[data-nm-look="line"] .nm-video{border:0}
@media (max-width:860px){[data-nm-look="line"] .nm-ch{grid-template-columns:1fr 1fr}}
/* card: 둥근 모서리 카드 · 그림자 */
[data-nm-look="card"]{--nm-radius:14px}
[data-nm-look="card"] .nm-fixed,[data-nm-look="card"] .nm-ms,[data-nm-look="card"] .nm-share,[data-nm-look="card"] .nm-step,[data-nm-look="card"] .nm-video,[data-nm-look="card"] .nm-feat .nm-ph,[data-nm-look="card"] .nm-ph{border-radius:14px}
[data-nm-look="card"] .nm-fixed,[data-nm-look="card"] .nm-ms,[data-nm-look="card"] .nm-share{box-shadow:0 18px 40px rgba(0,0,0,.12)}

/* 캐릭터 모달 */
.nm-modal{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.78);display:none;place-items:center;grid-template-columns:minmax(0,1fr);padding:16px}
.nm-modal.open{display:grid}
.nm-mbox{position:relative;width:min(760px,100%);max-height:90vh;overflow:auto;background:var(--nm-bg2);border:1px solid var(--nm-line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);color:var(--nm-fg);font-family:var(--nm-body)}
.nm-mbox .nm-ph{aspect-ratio:3/4;margin:18px}
.nm-mbox .nm-mb{padding:28px 24px}
.nm-mbox h3{margin:6px 0 0;font:900 30px var(--nm-display)}
.nm-mbox dl{display:grid;grid-template-columns:70px 1fr;gap:8px 12px;margin:16px 0;font:400 14px var(--nm-body)}
.nm-mbox dt{color:var(--nm-dim)}.nm-mbox dd{margin:0}
.nm-mbox .nm-x{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:none;color:var(--nm-fg);font-size:20px;cursor:pointer}

/* 푸터 */
.nm-foot{padding:40px 16px calc(100px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--nm-line);font:400 12px/1.9 var(--nm-body);color:var(--nm-dim)}
.nm-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
.nm-foot a{color:var(--nm-fg)}

.nm-toast{position:fixed;left:50%;bottom:90px;z-index:140;transform:translate(-50%,16px);opacity:0;max-width:calc(100vw - 32px);padding:12px 20px;background:var(--nm-fg);color:var(--nm-bg);font:700 14px var(--nm-body);transition:all .3s;pointer-events:none}
.nm-toast.show{opacity:1;transform:translate(-50%,0)}
.nm-rv{opacity:.01;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.nm-rv.in{opacity:1;transform:none}

@media (max-width:860px){
  .nm-sec{padding:72px 16px}
  .nm-fixed,.nm-feat,.nm-share{grid-template-columns:1fr;padding:20px}
  .nm-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nm-steps .nm-step:last-child{grid-column:1/3}
  .nm-ch{grid-template-columns:repeat(3,minmax(0,1fr))}
  body:not([data-nm-look="line"]):not([data-nm-look="split"]) .nm-ch{grid-template-columns:repeat(6,minmax(0,1fr))}
  body:not([data-nm-look="line"]):not([data-nm-look="split"]) .nm-ch a{grid-column:span 2;padding-left:6px;padding-right:6px}
  body:not([data-nm-look="line"]):not([data-nm-look="split"]) .nm-ch a:nth-child(4):nth-last-child(2){grid-column:2/span 2}
  .nm-ch span{padding:0 8px}
  .nm-mbox{grid-template-columns:1fr}
  [data-nm-ms="quest"] .nm-step{grid-template-columns:40px 1fr;}
  [data-nm-ms="quest"] .nm-step em{grid-column:2}
}
@media (max-height:520px) and (orientation:landscape){
  .nm-sec{padding:56px 16px}
  .nm-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
  .nm-steps .nm-step:last-child{grid-column:auto}
  .nm-step .nm-ic{width:40px;height:40px}
  .nm-fixed{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nm-float{top:auto;bottom:12px;transform:none}
  .nm-float b{display:none}
  .nm-float a{min-height:44px}
  .nm-float .nm-fx{height:44px}
}
html.rm .nm-wrap *,html.rm .nm-float,html.rm .nm-toast{animation:none!important;transition:none!important}html.rm .nm-rv{opacity:1;transform:none}
/* 출시 예정 표기 · 원작 IP 지표(퍼블리싱 제안서 2026-10-06) */
.nm-date small{display:block;margin-top:2px;font:400 12px var(--nm-body);color:var(--nm-dim);opacity:1}
.nm-ipstats{margin-top:26px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--nm-line);border-bottom:1px solid var(--nm-line)}
.nm-ipstats div{padding:16px 10px;text-align:center;border-left:1px solid var(--nm-line);min-width:0}
.nm-ipstats div:first-child{border-left:0}
.nm-ipstats b{display:block;font:700 clamp(20px,2.6vw,30px)/1.1 var(--nm-display);color:var(--nm-acc)}
.nm-ipstats span{display:block;margin-top:6px;font:400 12px/1.4 var(--nm-body);color:var(--nm-dim);word-break:keep-all}
@media (max-width:640px){.nm-ipstats{grid-template-columns:repeat(2,minmax(0,1fr))}.nm-ipstats div{border-left:0;border-top:1px solid var(--nm-line)}.nm-ipstats div:nth-child(-n+2){border-top:0}.nm-ipstats div:nth-child(even){border-left:1px solid var(--nm-line)}.nm-ipstats div:last-child{grid-column:1/-1;border-left:0}}

/* 독립 채널 줄([data-nm-channels]) — 공통 섹션을 쓰지 않는 새 형식 시안용 */
.nm-chs{position:relative;z-index:5;font-family:var(--nm-body);color:var(--nm-fg)}
.nm-chs-t{margin:0 0 10px;font:700 12px var(--nm-body);letter-spacing:.3em;color:var(--nm-dim);text-align:center}
.nm-chs-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.nm-chs a{color:inherit;text-decoration:none}
.nm-chs-sns{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.nm-chs-sns a{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--nm-line);background:var(--nm-bg2);transition:border-color .3s}
.nm-chs-sns a:hover{border-color:var(--nm-acc)}
.nm-chs-sns svg{width:18px;height:18px;flex:none}
.nm-chs-sns b{font:500 13px var(--nm-body)}
@media (max-width:480px){.nm-chs-sns a{padding:0 10px}.nm-chs-sns b{font-size:12px}}
.nm-date small.nm-scope{color:var(--nm-acc);font-weight:500}

/* 실제 인게임 영상 */
.nm-vplay{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.nm-vcap{left:auto;right:18px;top:auto;bottom:22px;transform:none;padding:6px 10px;border:0;background:rgba(0,0,0,.55);font:500 12px var(--nm-body);letter-spacing:.04em;z-index:2}
.nm-video .nm-mute{z-index:2}
@media (max-width:860px){.nm-video{aspect-ratio:16/10}.nm-vcap{left:10px;right:auto;top:10px;bottom:auto}}
.nm-vcap{display:none} /* 탭이 이미 영상 종류를 보여 주므로 이름표 숨김(게임 UI 가림 방지) */
/* 가로로 넘기는 탭·목록에 회색 스크롤 막대가 보이면 디자인이 깨짐 → 페이지 안 요소의 스크롤 막대는 숨김(넘기기는 그대로: 터치 밀기·휠·Shift+휠·드래그). 편집기 패널(.nmx-ui)은 제외 */
body *:not(.nmx-ui,.nmx-ui *){scrollbar-width:none!important;-ms-overflow-style:none}
body *:not(.nmx-ui,.nmx-ui *)::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
/* 사전예약 팝업(화면 가운데) — 무협 방(榜) 두루마리. 스토어 사전등록만 */
html.nm-lock{overflow:hidden}
.nm-pre{z-index:2147483645;background:rgba(10,7,5,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.nm-pre .nm-pre-box{--pp:#efe6d3;--pp2:#e4d7bd;--ink:#2b2420;--teal:#7fb5ab;--gold:#d9b25a;position:relative;width:min(440px,100%);max-height:calc(100svh - 24px);overflow:auto;overflow-x:hidden;padding:0 22px 18px;color:var(--ink);font-family:'Noto Serif KR',serif;text-align:center;
  background:radial-gradient(120% 60% at 50% 0,rgba(255,255,255,.35),transparent 60%),linear-gradient(var(--pp),var(--pp2));box-shadow:0 30px 80px rgba(0,0,0,.65),inset 0 0 40px rgba(120,90,50,.18);
  border-left:1px solid rgba(120,90,50,.25);border-right:1px solid rgba(120,90,50,.25);animation:nmUnroll .55s cubic-bezier(.2,.8,.2,1) both;scrollbar-width:none}
@keyframes nmUnroll{from{clip-path:inset(0 0 calc(100% - 64px) 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes nmRollUp{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 calc(100% - 64px) 0)}}
@keyframes nmPreIn{from{opacity:0}}
@keyframes nmPreOut{to{opacity:0}}
.nm-pre.open{animation:nmPreIn .3s ease both}
.nm-pre.closing{animation:nmPreOut .22s ease .16s both;pointer-events:none}
.nm-pre.closing .nm-pre-box{animation:nmRollUp .38s cubic-bezier(.5,0,.75,0) both}
.nm-pre-rod{position:sticky;top:0;z-index:2;margin:0 -30px 16px;height:64px;display:grid;place-items:center;
  background:radial-gradient(circle at 12% 50%,rgba(255,255,255,.55) 0 10px,transparent 11px),radial-gradient(circle at 88% 50%,rgba(255,255,255,.55) 0 10px,transparent 11px),linear-gradient(#f5f3ee,#cfcbc2 48%,#e9e6df 52%,#b9b4aa);border-radius:10px;box-shadow:0 6px 12px rgba(0,0,0,.35)}
.nm-pre-rod::before,.nm-pre-rod::after{content:'';position:absolute;top:8px;bottom:8px;width:14px;border-radius:7px;background:linear-gradient(90deg,#8a6a3c,#d9b25a,#7a5a30)}
.nm-pre-rod::before{left:4px}.nm-pre-rod::after{right:4px}
.nm-pre-plq{display:inline-flex;align-items:center;gap:12px;padding:7px 30px;background:linear-gradient(#fbfaf7,#e6e2da);border:2px solid #b6b0a4;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);box-shadow:inset 0 0 0 3px #f7f5f0}
.nm-pre-plq b{font:700 22px/1.2 'Noto Serif KR',serif;letter-spacing:.18em;color:#3a332d}
.nm-pre-plq i{font-style:normal;font-size:12px;color:#9a9285}
.nm-pre .nm-x{position:absolute;right:18px;top:72px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:rgba(246,242,234,.82);color:#6b5f52;font-size:18px;cursor:pointer}
.nm-pre-sh{display:grid;grid-template-columns:42% 1fr;gap:0;border:1px solid rgba(120,90,50,.3);background:#f6f2ea;box-shadow:0 2px 0 rgba(255,255,255,.6)}
.nm-pre-pt{position:relative;aspect-ratio:3/5;overflow:hidden;border:4px solid var(--teal);background:radial-gradient(80% 60% at 40% 30%,#f4f3f0,#c9c7c2 55%,#9e9b95);}
.nm-pre-pt::before{content:'';position:absolute;inset:0;background:radial-gradient(40% 25% at 30% 20%,rgba(60,60,60,.35),transparent),radial-gradient(50% 30% at 75% 70%,rgba(80,80,80,.3),transparent);filter:blur(6px)}
.nm-pre-pt img{position:absolute;left:50%;bottom:-2%;height:108%;transform:translateX(-50%);filter:brightness(0) contrast(1.2);opacity:.92}
.nm-pre-note{position:relative;padding:16px 14px 12px;text-align:left;background:repeating-linear-gradient(transparent 0 27px,rgba(150,120,90,.12) 27px 28px),#fbf8f2;border-left:1px solid rgba(120,90,50,.25);display:flex;flex-direction:column}
.nm-pre-note p{margin:0;font:500 15px/1.75 'Noto Serif KR',serif;color:#2b2420}
.nm-pre-note .nm-chip{align-self:flex-start;margin-top:6px;font:400 10px 'Noto Sans KR',sans-serif;color:#8b7f70;border:1px solid rgba(120,90,50,.35);padding:1px 6px}
.nm-pre-tip{margin-top:auto;padding-top:12px;text-align:center}
.nm-pre-tip em{display:block;font:500 11px 'Noto Sans KR',sans-serif;font-style:normal;color:#a8322c;letter-spacing:.06em;margin-bottom:8px}
.nm-pre-ic{display:inline-grid;place-items:center;width:40px;height:40px;margin:0 3px;border-radius:4px;background:linear-gradient(#f3efe6,#d8d1c3);border:1px solid #b8ad99;color:#4a4036}
.nm-pre-ic svg{width:20px;height:20px}
.nm-pre-rwd{position:relative;margin-top:22px;padding:24px 14px 14px;border:1px solid rgba(120,90,50,.28);background:rgba(255,255,255,.25)}
.nm-pre-tag{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);padding:5px 26px;background:linear-gradient(#e9ecec,#c9cfcf);border:1px solid #9aa3a3;color:#3d4545;font:700 15px 'Noto Serif KR',serif;letter-spacing:.12em;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);white-space:nowrap}
.nm-pre-items{display:flex;justify-content:center;gap:18px}
.nm-pre-it{position:relative;width:96px;height:96px;display:grid;place-items:center;background:linear-gradient(135deg,#f1d7c8,#e0b7a0);border:3px solid #c98d78;color:#6a4a3c;font:500 11px 'Noto Sans KR',sans-serif;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.nm-pre-it:not(.god){background:linear-gradient(135deg,#f0d3b0,#d9a978);border-color:#c48a55}
.nm-pre-it i{position:absolute;left:4px;top:4px;padding:2px 4px;background:linear-gradient(#f6d77a,#d9a83c);color:#5a3a0c;font:900 13px 'Noto Serif KR',serif;font-style:normal}
.nm-pre-it b{position:absolute;right:6px;bottom:3px;font:700 17px 'Noto Serif KR',serif;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 2px #000}
.nm-pre-pc{display:flex;align-items:center;gap:12px;margin:14px 0 0;text-align:left}
.nm-pre-qr{flex:none;width:84px;height:84px;aspect-ratio:auto;margin:0;font-size:10px;background:#fff;color:#8b7f70;border:1px dashed #b8ad99}
.nm-pre-pc p{margin:0;font:400 12px/1.6 'Noto Sans KR',sans-serif;color:#6b5f52;word-break:keep-all}
.nm-pre-st{display:grid;gap:8px;margin-top:16px}
.nm-pre-s{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:6px 14px;text-decoration:none;color:#3a2a10;font:700 17px 'Noto Serif KR',serif;letter-spacing:.06em;text-align:left;
  background:linear-gradient(#f7e3a6,#e6c46c 45%,#d4a948 55%,#e9cd7e);border:2px solid #a77f2e;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 2px 0 #7d5c1c}
.nm-pre-s+.nm-pre-s{background:linear-gradient(#f3efe6,#ddd5c4);border-color:#a89a80;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 2px 0 #857862}
.nm-pre-s:hover,.nm-pre-s:focus-visible{filter:brightness(1.06);outline:2px solid #a8322c;outline-offset:2px}
.nm-pre-s svg{width:22px;height:22px;flex:none}
.nm-pre-s span{display:flex;flex-direction:column;line-height:1.2}.nm-pre-s small{font:500 10px 'Noto Sans KR',sans-serif;letter-spacing:.04em;opacity:.7}
.nm-pre-n{margin:14px 0 0;font:400 12px 'Noto Sans KR',sans-serif;color:#6b5f52}
.nm-pre-cord{position:absolute;left:-6px;bottom:-14px;width:150px;height:60px;pointer-events:none;background:radial-gradient(circle at 70px 34px,transparent 7px,#4fae98 8px 11px,transparent 12px);}
.nm-pre-cord::before{content:'';position:absolute;left:0;top:10px;width:64px;height:28px;border-bottom:2px solid #b3281e;border-radius:0 0 0 60px}
.nm-pre-cord::after{content:'';position:absolute;left:82px;top:30px;width:60px;height:8px;background:linear-gradient(90deg,#4fae98,rgba(79,174,152,0));clip-path:polygon(0 0,100% 50%,0 100%)}
@media (max-width:420px){.nm-pre .nm-x{right:26px}.nm-pre .nm-pre-box{padding:0 14px 14px}.nm-pre-note p{font-size:13px}.nm-pre-it{width:80px;height:80px}.nm-pre-plq b{font-size:19px}}
html.rm .nm-pre,html.rm .nm-pre .nm-pre-box{animation:none}
/* 화면이 낮아 두루마리가 안에서 스크롤될 때는 아래 끈 장식이 그림 위에 걸리므로 숨김 */
@media (max-height:820px){.nm-pre-cord{display:none}}

/* 사전예약 팝업 간단형 — 3차 시안만(meta nm-pre-style=simple, 2026-10-28). 색 세 가지: 바탕 --pre-bg · 포인트 --pre-acc · 글자 --pre-fg (시안이 안 정하면 --nm-bg2/--nm-acc/--nm-fg) */
.nm-pre.nm-pre-v3{--b:var(--pre-bg,var(--nm-bg2,#15100d));--a:var(--pre-acc,var(--nm-acc,#b3141c));--f:var(--pre-fg,var(--nm-fg,#efe6d8))}
.nm-pre.nm-pre-v3 .nm-pre-simple{width:min(480px,100%);padding:34px 28px 22px;background:var(--b);color:var(--f);border:1px solid color-mix(in srgb,var(--a) 55%,transparent);box-shadow:0 30px 80px rgba(0,0,0,.55);font-family:var(--nm-body,'Noto Sans KR',sans-serif);animation:nmPopIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes nmPopIn{from{opacity:0;transform:translateY(12px) scale(.98)}}
.nm-pre.nm-pre-v3.closing .nm-pre-simple{animation:nmPreOut .22s ease both}
.nm-pre-v3 .nm-pre-simple .nm-pre-ey{display:block;font:700 11px var(--nm-body,'Noto Sans KR',sans-serif);letter-spacing:.32em;color:var(--a)}
.nm-pre-v3 .nm-pre-simple h3{margin:8px 0 0;font:700 32px/1.15 var(--nm-display,'Noto Serif KR',serif);color:var(--f)}
.nm-pre-v3 .nm-pre-simple h3 em{font-style:normal;color:var(--a)}
.nm-pre-v3 .nm-pre-rw{display:flex;justify-content:center;gap:10px;margin:20px 0;padding:0;list-style:none}
.nm-pre-v3 .nm-pre-rw li{flex:1 1 0;display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--f) 22%,transparent);text-align:left;font-size:13px}
.nm-pre-v3 .nm-pre-rw b{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--a);color:var(--a);font:700 15px var(--nm-display,'Noto Serif KR',serif)}
.nm-pre-v3 .nm-pre-rw span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-pre-v3 .nm-pre-st2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nm-pre-v3 .nm-pre-st2 .nm-pre-s{display:flex;align-items:center;justify-content:center;gap:10px;height:62px;padding:0 12px;text-decoration:none;text-align:left;background:transparent;border:1px solid var(--a);color:var(--f);transition:background .2s,color .2s}
.nm-pre-v3 .nm-pre-st2 .nm-pre-s svg{width:22px;height:22px;flex:none}
.nm-pre-v3 .nm-pre-st2 .nm-pre-s span{display:flex;flex-direction:column;line-height:1.2}
.nm-pre-v3 .nm-pre-st2 .nm-pre-s small{font-size:11px;letter-spacing:.12em;opacity:.75}
.nm-pre-v3 .nm-pre-st2 .nm-pre-s b{font:700 18px var(--nm-body,'Noto Sans KR',sans-serif)}
.nm-pre-v3 .nm-pre-st2 .nm-pre-s:hover,.nm-pre-v3 .nm-pre-st2 .nm-pre-s:focus-visible,.nm-pre-v3 .nm-pre-st2 .nm-pre-s.mine{background:var(--a);color:var(--b)}
.nm-pre-v3 .nm-pre-simple .nm-pre-pc{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 0;text-align:left}
.nm-pre-v3 .nm-pre-simple .nm-pre-pc p{margin:0;font-size:12px;line-height:1.5;opacity:.75}
.nm-pre-v3 .nm-pre-simple .nm-pre-qr{flex:none;width:56px;height:56px;display:grid;place-items:center;border:1px dashed color-mix(in srgb,var(--f) 40%,transparent);font-size:10px;opacity:.8}
.nm-pre-v3 .nm-pre-simple .nm-pre-n{margin:14px 0 0;font:400 12px/1.5 var(--nm-body,'Noto Sans KR',sans-serif);color:var(--f);opacity:.7}
.nm-pre-v3 .nm-pre-simple .nm-x{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;border-radius:0;background:none;color:var(--f);font-size:18px;opacity:.8;cursor:pointer}
.nm-pre-v3 .nm-pre-simple .nm-x:hover{opacity:1;color:var(--a)}
@media (max-width:600px){.nm-pre.nm-pre-v3 .nm-pre-simple{padding:32px 18px 18px}.nm-pre-v3 .nm-pre-simple h3{font-size:28px}.nm-pre-v3 .nm-pre-st2{grid-template-columns:1fr}.nm-pre-v3 .nm-pre-rw li{padding:8px}}