@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  color-scheme:dark;
  --bg:#0c0d12;
  --panel:#15161d;
  --ink:#f6f3ea;
  --muted:#aaa9b2;
  --gold:#eac677;
  --line:rgba(234,198,119,.2);
  --font:'Space Grotesk','Noto Sans KR',sans-serif
}
/* 일본어·중국어는 띄어쓰기 없이 쓰므로 해당 언어의 자연스러운 행 분리를 허용한다. */
:lang(ja), :lang(zh-Hans), :lang(zh-Hant) {
  word-break: normal;
  line-break: strict;
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:88px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.7 var(--font);
  word-break:keep-all
}
body.modal-open {
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button,select {
  font:inherit
}
button,a,select {
  -webkit-tap-highlight-color:transparent
}
button {
  color:inherit;
  cursor:pointer
}
button:active,.button:active {
  transform:translateY(1px)
}
button:focus-visible,a:focus-visible,select:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:5px
}
img {
  display:block;
  max-width:100%
}
button {
  border:0
}
p {
  margin:0;
  color:var(--muted)
}
h1,h2,h3 {
  margin:0;
  line-height:1.25;
  letter-spacing:-.045em
}
h2 {
  font-size:clamp(30px,3.6vw,48px)
}
.wrap {
  width:min(1184px,calc(100% - 80px));
  margin:auto
}
.eyebrow {
  display:block;
  font-size:12px;
  letter-spacing:.24em;
  color:var(--gold);
  font-weight:600;
  margin-bottom:20px
}
.header {
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  background:rgba(12,13,18,.9);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px)
}
.header-inner {
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:19px;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap
}
.brand img {
  width:40px;
  height:40px;
  border-radius:10px
}
.nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px
}
.nav a {
  color:#c3c1c8;
  white-space:nowrap
}
.nav a:hover,.nav a.is-active {
  color:var(--gold)
}
.nav .nav-download {
  border:1px solid var(--line);
  padding:8px 18px;
  color:var(--gold)
}
.lang-select {
  max-width:120px;
  background:transparent;
  color:var(--ink);
  border:0;
  padding:8px 0;
  font-size:12px
}
.lang-select option {
  background:var(--panel)
}
.hamburger {
  display:none;
  background:none;
  width:44px;
  height:44px;
  font-size:24px
}
.hero {
  position:relative;
  min-height:790px;
  min-height: min(950px,100svh);
  padding:180px 0 100px;
  display:flex;
  align-items:center;
  overflow:hidden
}
.hero-art {
  position:absolute;
  inset:80px 0 0 39%;
  display:flex;
  gap:6px;
  transform:skewX(-9deg);
  transform-origin:bottom;
  opacity:.82
}
.hero-art img {
  width:34%;
  height:100%;
  object-fit:cover;
  transform:skewX(9deg) scale(1.2);
  object-position:50% center
}
.hero-art::after {
  content:'';
  position:absolute;
  inset:-20px;
  background:linear-gradient(90deg,var(--bg),transparent 38%),linear-gradient(0deg,var(--bg),transparent 36%)
}
.hero::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--bg) 3%,rgba(12,13,18,.95) 22%,rgba(12,13,18,.2) 63%,transparent);
  pointer-events:none
}
.hero-content {
  position:relative;
  z-index:1
}
.hero .eyebrow {
  font-size:13px;
  margin-bottom:28px
}
.hero h1 {
  max-width:640px;
  font-size:clamp(44px,5.5vw,76px);
  font-weight:800;
  line-height:1.23;
  text-wrap:balance
}
.hero h1::after {
  content:'';
  display:block;
  width:64px;
  height:3px;
  background:var(--gold);
  margin:30px 0
}
.hero-copy {
  max-width:440px;
  font-size:16px;
  line-height:1.9;
  color:#c1bec5
}
.hero-actions {
  display:flex;
  gap:12px;
  margin-top:32px;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:15px 28px;
  min-height:54px;
  border:1px solid var(--gold);
  font-size:14px;
  font-weight:700;
  background:var(--gold);
  color:#15130f
}
.button.ghost {
  background:rgba(12,13,18,.4);
  color:var(--ink);
  border-color:#727078
}
.hero-bottom {
  position:absolute;
  z-index:1;
  bottom:32px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  letter-spacing:.18em;
  color:var(--muted)
}
.scroll-cue {
  display:flex;
  align-items:center;
  gap:12px
}
.scroll-cue span {
  height:28px;
  width:1px;
  background:var(--gold)
}
.section {
  padding:112px 0
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:32px;
  margin-bottom:40px
}
.section-head p {
  max-width:420px;
  font-size:14px
}
.section-number {
  font-size:12px;
  color:var(--gold);
  letter-spacing:.1em;
  margin-bottom:12px
}
.trailer-section {
  border-top:1px solid var(--line);
  background:#101117
}
.trailer-card {
  display:block;
  position:relative;
  width:100%;
  padding:0;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#16151d;
  text-align:left;
  border:1px solid var(--line)
}
.trailer-card>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s
}
.trailer-card:hover>img {
  transform:scale(1.025)
}
.trailer-card::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 45%)
}
.play-circle {
  position:absolute;
  inset:0;
  margin:auto;
  width:78px;
  height:78px;
  border:1px solid #eed6a5;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(12,13,18,.65);
  font-size:22px;
  z-index:1
}
.trailer-caption {
  position:absolute;
  z-index:1;
  bottom:28px;
  left:32px;
  right:32px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}
.trailer-caption strong {
  font-size:18px
}
.trailer-status {
  font-size:12px;
  color:var(--gold);
  border:1px solid var(--line);
  padding:6px 12px
}
.story {
  position:relative;
  min-height:580px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line)
}
.story>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
  opacity:.3
}
.story::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#0c0d12 10%,rgba(12,13,18,.35) 100%)
}
.story-content {
  position:relative;
  z-index:1;
  max-width:630px
}
.story h2 {
  margin-bottom:24px
}
.story p {
  max-width:500px;
  line-height:1.95;
  color:#c2bec3
}
.feature-tabs {
  display:flex;
  border-bottom:1px solid var(--line);
  margin-bottom:40px;
  overflow-x:auto;
  gap:32px
}
.feature-tab {
  background:transparent;
  color:var(--muted);
  padding:16px 0;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  min-height:54px;
  font-size:14px
}
.feature-tab[aria-selected=true] {
  color:var(--gold);
  border-color:var(--gold)
}
.feature-panel {
  display:flex;
  align-items:center;
  gap:80px;
  min-height:460px
}
.feature-visual {
  width:53%;
  height:460px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:radial-gradient(ellipse,#453522 0%,#1a181a 40%,var(--bg) 70%)
}
.feature-visual .feature-art {
  width:94%;
  height:94%;
  object-fit:cover;
  mask-image:linear-gradient(0deg,transparent,#000 18%,#000 85%,transparent);
  -webkit-mask-image:linear-gradient(0deg,transparent,#000 18%,#000 85%,transparent)
}
.feature-copy {
  flex:1;
  min-width:0
}
.feature-copy h3 {
  font-size:clamp(28px,3vw,40px);
  margin-bottom:24px
}
.feature-copy p {
  line-height:1.9;
  margin-bottom:28px
}
.text-link {
  font-size:13px;
  color:var(--gold);
  display:inline-flex;
  gap:24px;
  align-items:center;
  padding:8px 0
}
.minigames {
  background:#14151c
}
.mini-layout {
  display:flex;
  align-items:center;
  gap:80px
}
.mini-copy {
  flex:1
}
.mini-copy h2 {
  margin-bottom:24px
}
.mini-copy p {
  max-width:450px;
  margin-bottom:24px
}
.mini-art {
  width:48%;
  display:flex;
  align-items:center;
  gap:16px;
  height:420px;
  overflow:hidden
}
.mini-art img {
  width:46%;
  height:380px;
  object-fit:cover;
  object-position:top;
  border:1px solid var(--line);
  border-radius:10px
}
.mini-art img+img {
  transform:translateY(32px)
}
.gallery-controls {
  display:flex;
  gap:8px
}
.arrow {
  width:48px;
  height:48px;
  border:1px solid var(--line);
  background:transparent;
  font-size:20px
}
.arrow:hover {
  background:var(--panel)
}
.gallery-track {
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--gold) var(--panel);
  padding:0 0 24px;
  overscroll-behavior-x:contain
}
.shot {
  flex:0 0 calc((100% - 60px)/4);
  scroll-snap-align:start;
  padding:0;
  background:#14151c;
  text-align:left;
  border:1px solid var(--line)
}
.shot img {
  width:100%;
  height:auto;
  aspect-ratio:1284/2778;
  object-fit:cover
}
.shot-label {
  display:flex;
  justify-content:space-between;
  padding:16px;
  font-size:12px;
  color:var(--muted)
}
.shot-label b {
  color:var(--gold);
  font-weight:400
}
.download {
  padding:88px 0;
  text-align:center;
  background:radial-gradient(ellipse at 50% 120%,#4b3820,transparent 75%),#15151a;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.download h2 {
  margin-bottom:20px
}
.download p {
  margin-bottom:32px;
  font-size:14px
}
.store-buttons {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap
}
.store-badge {
  height:50px;
  display:flex;
  align-items:center;
  background:#000;
  border:1px solid #555;
  border-radius:7px;
  overflow:hidden;
  padding:4px 12px
}
.store-badge img {
  height:40px;
  width:auto;
  max-width:160px;
  object-fit:contain
}
.footer {
  padding:40px 0
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center
}
.footer p,.footer-links {
  font-size:12px
}
.footer-links {
  display:flex;
  gap:20px;
  color:var(--muted)
}
.footer-brand {
  font-size:16px;
  color:var(--ink);
  display:block;
  margin-bottom:6px
}
.modal {
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.85);
  padding:24px;
  display:flex;
  justify-content:center;
  align-items:center
}
.modal[hidden] {
  display:none
}
.modal-panel {
  background:#15161d;
  border:1px solid var(--line);
  width:min(900px,100%);
  max-height:70vh;
  max-height:70dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column
}
.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 16px;
  border-bottom:1px solid var(--line);
  flex-shrink:0
}
.modal-header span {
  font-size:13px;
  color:var(--gold)
}
.modal-close {
  background:transparent;
  font-size:26px;
  width:44px;
  height:44px
}
.modal-body {
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  min-height:0;
  padding:20px;
  text-align:center
}
.modal-body img {
  width:auto;
  max-height:none;
  max-width:100%;
  margin:auto
}
.modal-body iframe {
  width:100%;
  aspect-ratio:16/9;
  border:0
}
.modal-body .modal-shot {
  max-width:520px;
  width:100%
}
.toast {
  position:fixed;
  left:50%;
  bottom:32px;
  transform:translateX(-50%);
  padding:14px 24px;
  border:1px solid var(--line);
  background:#25232b;
  z-index:5000;
  max-width:calc(100% - 32px);
  font-size:14px;
  text-align:center;
  box-shadow:0 8px 40px #0008
}
.toast[hidden] {
  display:none
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.hero-art img {
  object-position:70% center
}
.feature-visual .feature-phone {
  width:auto;
  max-width:100%;
  height:100%;
  object-fit:contain;
  mask-image:none;
  -webkit-mask-image:none;
  border:1px solid var(--line);
  border-radius:8px
}
.section-head h2+p {
  margin-top:20px
}
[hidden] {
  display:none!important
}
@media(min-width:1600px) {
  .hero-art {
    left:43%
  }
}
@media(max-width:1100px) {
  .nav {
    gap:18px
  }
  .brand {
    font-size:16px
  }
  .feature-panel,.mini-layout {
    gap:40px
  }
  .hero h1 {
    max-width:570px
  }
  .hero-art {
    left:35%
  }
  .hero {
    min-height:800px
  }
}
@media(max-width:850px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .header-inner {
    height:68px
  }
  .hamburger {
    display:block
  }
  .nav {
    display:none;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    padding:24px;
    background:#15161d;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    max-height:70dvh;
    overflow-y:auto
  }
  .nav.is-open {
    display:flex
  }
  .nav a {
    padding:8px 12px
  }
  .lang-select {
    max-width:none;
    padding:12px
  }
  .hero {
    padding:130px 0 90px;
    min-height:850px;
    align-items:flex-end
  }
  .hero-art {
    inset:68px -30px 30% 0;
    opacity:.65
  }
  .hero::after {
    background:linear-gradient(0deg,var(--bg) 5%,rgba(12,13,18,.9) 30%,transparent 85%)
  }
  .hero h1 {
    font-size:46px;
    max-width:620px
  }
  .hero-copy {
    max-width:520px
  }
  .hero .eyebrow {
    margin-bottom:16px
  }
  .hero h1::after {
    margin:20px 0
  }
  .section {
    padding:72px 0
  }
  .section-head {
    display:block;
    margin-bottom:28px
  }
  .section-head p {
    margin-top:20px
  }
  .section-head .gallery-controls {
    margin-top:24px
  }
  .story {
    min-height:480px
  }
  .story>img {
    object-position:66% center
  }
  .feature-panel,.mini-layout {
    flex-direction:column;
    gap:32px;
    align-items:stretch
  }
  .feature-visual {
    width:100%;
    height:360px
  }
  .feature-copy {
    padding-bottom:16px
  }
  .feature-tabs {
    gap:24px
  }
  .mini-art {
    width:100%;
    height:430px;
    justify-content:center
  }
  .mini-art img {
    width:40%;
    height:auto;
    max-height:420px
  }
  .mini-copy p {
    max-width:none
  }
  .shot {
    flex-basis:calc((100% - 40px)/3)
  }
  .trailer-caption {
    bottom:16px;
    left:20px;
    right:20px
  }
  .trailer-caption strong {
    font-size:14px
  }
  .trailer-status {
    font-size:10px
  }
  .footer-inner {
    align-items:flex-start;
    flex-direction:column
  }
  .hero-bottom {
    font-size:9px
  }
}
@media(max-width:520px) {
  .hero {
    min-height:820px
  }
  .hero h1 {
    font-size:39px;
    max-width:360px
  }
  .hero-copy {
    font-size:14px
  }
  .hero-actions .button {
    padding:13px 22px
  }
  .hero-art {
    bottom:36%;
    left:-70px;
    right:-40px
  }
  .hero-bottom {
    bottom:20px
  }
  .hero-bottom>span {
    letter-spacing:.06em
  }
  .section {
    padding:56px 0
  }
  .eyebrow {
    margin-bottom:16px
  }
  .trailer-caption {
    position:static;
    padding:16px;
    display:block;
    background:#16151d
  }
  .trailer-caption strong {
    display:block
  }
  .trailer-status {
    display:inline-block;
    margin-top:8px
  }
  .trailer-card {
    aspect-ratio:auto
  }
  .trailer-card>img {
    aspect-ratio:16/9;
    height:auto
  }
  .play-circle {
    width:56px;
    height:56px;
    bottom:90px;
    font-size:18px
  }
  .feature-tabs {
    gap:20px
  }
  .feature-tab {
    font-size:12px
  }
  .feature-visual {
    height:300px
  }
  .shot {
    flex-basis:70%
  }
  .mini-art {
    height:330px;
    gap:12px
  }
  .mini-art img {
    width:46%;
    max-height:320px
  }
  .modal {
    padding:12px
  }
  .modal-body {
    padding:12px
  }
  .download {
    padding:64px 0
  }
  .store-badge {
    height:46px
  }
  .store-badge img {
    height:34px
  }
  .footer-links {
    gap:16px;
    flex-wrap:wrap
  }
  .hero-actions {
    gap:10px
  }
  .hero-actions .button {
    font-size:13px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}

/* 시즌 안내는 게임 내 한정 장식 원본을 사용한다. */
.event-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  margin-top: 24px;
  padding: 9px 14px;
  border: 1px solid #f3a45d66;
  border-radius: 4px;
  background: #21180fd9;
  color: #ffc98c;
  font-size: 12px;
}
.event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffb165;
  box-shadow: 0 0 12px #ff9a3d99;
}
.event-pill-status { color: #e0d0bd; }
.halloween {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #b1743c55;
  border-bottom: 1px solid #b1743c55;
  background: radial-gradient(ellipse at 82% 60%, #53301a77, transparent 50%), #151115;
}
.event-layout { display: flex; align-items: center; gap: 48px; }
.event-copy { flex: 1; min-width: 0; position: relative; z-index: 1; }
.event-copy .eyebrow { color: #f9b16e; }
.event-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.event-status {
  padding: 5px 12px;
  border: 1px solid #e99b5255;
  background: #ffad6612;
  color: #ffc98c;
  font-size: 12px;
}
.event-dates { margin-top: 16px; color: #d1ad89; font-size: 13px; }
.event-description { max-width: 560px; margin-top: 20px; color: #c4bdba; font-size: 15px; }
.event-perks { display: flex; flex-direction: column; gap: 8px; margin: 24px 0; padding: 0; list-style: none; font-size: 14px; }
.event-perks li { display: flex; gap: 12px; align-items: baseline; }
.event-perks li > span:first-child { color: #eeb57e; }
.event-button { background: #f4b372; border-color: #f4b372; }
.event-deadline { margin-top: 20px; max-width: 560px; color: #a59a93; font-size: 12px; }
.event-art { position: relative; width: 43%; height: 400px; flex-shrink: 0; }
.event-art img { position: absolute; height: auto; filter: drop-shadow(0 20px 30px #0007); }
.event-moon {
  position: absolute;
  width: 220px;
  height: 220px;
  top: 10px;
  right: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f0c39444, #bc77231c 65%, transparent 70%);
  box-shadow: 0 0 100px #dc842b22;
}
.event-carriage { width: 74%; left: -3%; top: 36px; }
.event-ghost { width: 43%; right: -3%; bottom: 0; }
.event-pumpkin { width: 28%; left: 15%; bottom: -8px; }
@media(max-width:850px) {
  .event-layout { flex-direction: column; align-items: stretch; gap: 32px; }
  .event-art { width: min(480px, 100%); height: 340px; align-self: center; }
  .event-description, .event-deadline { max-width: none; }
}
@media(max-width:520px) {
  .event-art { height: 280px; }
  .event-moon { width: 180px; height: 180px; }
  .event-heading { gap: 12px; }
  .event-pill { gap: 8px; font-size: 11px; margin-top: 20px; }
}