@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#0c0e12;--panel:#171a20;--ink:#f4f5f5;--muted:#949ba6;--lime:#d9fa68;--line:#2a2d34}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'Noto Sans KR',sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:none;border:0}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:5px}header{height:88px;display:flex;align-items:center;gap:65px;padding:0 5%;border-bottom:1px solid #ffffff0f;background:#0c0e12;position:relative;z-index:2}.brand{font-size:18px;font-weight:900;letter-spacing:-.8px;display:flex;gap:7px;align-items:center}.world{font-weight:400;color:#abb0b8}.brandmark{display:inline-flex;align-items:center;color:var(--lime);font-size:30px;letter-spacing:-12px;width:39px;font-style:italic}.brandmark span{font-size:23px}nav{display:flex;gap:30px;height:100%;align-items:center}nav a{height:100%;display:flex;align-items:center;color:#b4b8c1;font-size:13px}nav a.active{color:var(--lime);border-bottom:2px solid var(--lime)}.actions{margin-left:auto;display:flex;gap:22px;align-items:center}.actions button{font-size:25px}.actions span{font-size:12px;color:var(--muted)}.hero{min-height:550px;position:relative;overflow:hidden;display:flex;align-items:center;padding:70px 7%;background:#10191e}.hero>img{position:absolute;right:0;top:0;width:62%;height:100%;object-fit:cover;object-position:50% 40%}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#10151b 10%,#10151bf0 32%,#10151b10 78%),linear-gradient(0deg,#0c0e12,transparent 25%)}.hero-copy{position:relative;z-index:1;max-width:560px}.eyebrow{color:var(--lime);font-size:11px;letter-spacing:2.4px;font-weight:700}.hero h1{font-size:62px;letter-spacing:-3px;line-height:1.12;margin:23px 0}.hero .english{font-size:12px;letter-spacing:5px;color:#bec8cc}.hero p{color:#bac0c9;line-height:1.9;margin:24px 0 30px}.btn{padding:13px 23px;border:1px solid #ffffff32;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:13px;background:#ffffff09}.btn.primary{color:#171d0c;background:var(--lime);border-color:var(--lime)}.btn:disabled{opacity:.5;cursor:not-allowed}.hero-buttons{display:flex;gap:12px}.hero-index{position:absolute;right:6%;bottom:47px;z-index:1;color:#d8dde2;letter-spacing:3px}.hero-index span{color:#68727a}.container{max-width:1440px;margin:auto;padding:35px 5% 55px}.section-head{display:flex;justify-content:space-between;align-items:end;margin:12px 0 23px}.section-head h2{font-size:25px;letter-spacing:-1px;margin:0 0 8px}.section-head p{margin:0;color:var(--muted);font-size:12px}.section-head a{font-size:12px;color:#aeb5bc}.tabs{display:flex;gap:9px;margin:23px 0;flex-wrap:wrap}.chip{border:1px solid var(--line);padding:8px 17px;border-radius:30px;color:#b4bac3;font-size:12px}.chip.active{background:var(--lime);border-color:var(--lime);color:#1a210e}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.card{min-width:0}.poster{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:#20272d;display:block;text-align:left;padding:0}.poster img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .5s}.poster:hover img{transform:scale(1.06)}.poster:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0009,transparent 70%)}.badge{position:absolute;top:13px;left:13px;z-index:1;font-size:10px;background:#0c121bbb;padding:5px 8px;border:1px solid #ffffff25;border-radius:3px}.poster-title{position:absolute;left:18px;bottom:17px;z-index:1;font-size:22px;font-weight:800;letter-spacing:-1px}.play{position:absolute;right:15px;bottom:16px;z-index:1;border:1px solid #ffffff70;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:10px}.card h3{font-size:14px;margin:13px 0 6px}.meta{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}.save{font-size:21px;padding:0 6px}.save.on{color:var(--lime)}.concept{height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 60% 70%,#3b5b49,#102123 70%);font-size:72px;color:#7d9c85;font-weight:900;letter-spacing:-8px}.concept.fish{background:radial-gradient(ellipse at 60% 70%,#2c5569,#111c2c 70%);color:#618f9a}.banner{margin:48px 0 40px;padding:30px 36px;border:1px solid #414b2a;border-radius:9px;background:linear-gradient(100deg,#20251a,#131912);display:flex;justify-content:space-between;align-items:center}.banner h2{font-size:25px;margin:8px 0}.banner p{color:#9fa793;font-size:12px}.products .product-art{height:250px;background:#1e2227;display:grid;place-items:center;position:relative;border-radius:8px;width:100%}.product-art img{width:110px;height:170px;object-fit:cover;box-shadow:12px 14px 20px #0006;transform:rotate(-7deg);border:5px solid #deded0}.product-art.phone img{border:4px solid #5b616b;border-radius:15px;width:93px;height:180px;transform:rotate(8deg)}.product-art.file img{width:140px;height:180px;border:0;transform:rotate(-4deg)}.product-art .badge{color:#c7cdc4}.price{font-size:14px;font-weight:600;margin:10px 0}.price small{color:var(--muted);font-size:10px;font-weight:400;margin-left:8px}.page-title{padding:25px 0 18px}.page-title h1{font-size:38px;margin:12px 0}.page-title p{color:var(--muted);line-height:1.8}.characters{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.character{padding:25px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.character img{height:300px;width:100%;object-fit:cover;border-radius:6px}.character p{color:var(--muted);line-height:1.8}.empty{padding:70px 20px;text-align:center;border:1px dashed #3c414a;color:var(--muted);border-radius:8px}.empty h2{color:var(--ink)}footer{border-top:1px solid var(--line);padding:35px 5%;color:var(--muted)}footer .brand{color:#ddd;font-size:16px}footer p{font-size:12px}footer div{display:flex;gap:25px;margin:24px 0;font-size:12px}footer button{padding:0;color:inherit}footer small{font-size:10px}dialog{background:#171b22;color:var(--ink);border:1px solid #424954;border-radius:12px;width:min(900px,93vw);max-height:90vh;padding:36px}dialog::backdrop{background:#000c;backdrop-filter:blur(7px)}.close{position:absolute;right:15px;top:13px;font-size:20px;z-index:4}dialog h2{font-size:27px}dialog p{color:#aeb5c0;line-height:1.8}.detail{display:grid;grid-template-columns:1fr 1fr;gap:30px}.detail .product-art{height:350px;display:grid;place-items:center;background:#242a32;border-radius:8px}.detail .product-art img{width:160px;height:260px}.screen{background:#050608;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:8px}.screen img{height:100%;width:100%;object-fit:cover;opacity:.25}.screen .screen-message{position:absolute;text-align:center;padding:20px}.screen video{width:100%;height:100%;background:#000}.screen-message h3{font-size:23px}.small{font-size:12px;color:var(--muted)}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.listrow{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.listrow img{width:55px;height:70px;object-fit:cover}.listrow .remove{margin-left:auto;color:#e6aaaa}label{display:block;font-size:12px;color:#c3cbd4;margin:18px 0 7px}input,select{width:100%;background:#0d1117;border:1px solid #3b444f;border-radius:5px;padding:12px;color:#fff}input[type=file]{font-size:12px}#searchBox{padding:20px 5%;display:flex;gap:20px}#searchBox[hidden]{display:none}#searchBox input{max-width:700px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--lime);color:#1a2210;padding:14px 25px;border-radius:6px;z-index:10;display:none;max-width:90vw}.notice{padding:13px 17px;background:#d9fa680b;border:1px solid #d9fa682a;color:#b9c5a0;font-size:12px;border-radius:5px;line-height:1.7}.wide{width:100%;margin-top:18px}@media(min-width:1500px){.hero{padding-left:calc((100vw - 1250px)/2)}}@media(max-width:900px){header{gap:25px;padding:0 4%}nav{gap:18px}.world{display:none}.grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:50px}.characters{grid-template-columns:1fr}.character img{height:280px}.hero>img{width:80%}}@media(max-width:600px){header{height:112px;flex-wrap:wrap;gap:0;align-content:center}.brand{font-size:15px}.brandmark{font-size:24px}.actions{gap:16px}.actions button{font-size:22px}nav{order:3;width:100%;height:42px;justify-content:center;gap:30px;margin-top:7px}nav a{font-size:12px}.hero{min-height:535px;padding:50px 6% 35px;align-items:end}.hero>img{width:100%;object-position:60% 35%}.hero:after{background:linear-gradient(0deg,#0c0e12 0%,#10151bd9 25%,#10151b10 95%)}.hero h1{font-size:43px;margin:15px 0}.hero p{font-size:12px;margin:14px 0 22px}.hero-index{display:none}.hero .english{font-size:10px}.container{padding:24px 5% 35px}.grid{gap:22px 13px}.section-head h2{font-size:21px}.section-head p{font-size:11px}.poster{aspect-ratio:3/4}.poster-title{font-size:18px;left:12px;bottom:15px}.play{display:none}.card h3{font-size:12px}.meta{font-size:10px}.banner{padding:24px;display:block;margin:32px 0}.banner h2{font-size:22px}.banner .btn{margin-top:14px}.products .product-art{height:210px}.detail{grid-template-columns:1fr}.detail .product-art{height:260px}.detail .product-art img{height:200px;width:120px}dialog{padding:30px 20px}.screen{aspect-ratio:9/12}.page-title h1{font-size:30px}footer div{gap:17px;flex-wrap:wrap}}

/* Frame the main artwork around the four characters. */
.hero>img{object-position:50% 52%}
@media(max-width:600px){.hero>img{object-position:50% 52%}}


/* Premium cinema: restrained gold, quiet surfaces and centered brand lockup. */
:root{--bg:#080b11;--panel:#141820;--lime:#efb56e;--line:#29303c;--muted:#a4a9b3}
header{background:#080b11;height:96px;padding:0 5%;gap:55px;border-bottom:1px solid #ffffff08}
.brand{flex-shrink:0}.brand-lockup{display:inline-flex;flex-direction:column;align-items:center;gap:4px;width:max-content}
.brand-name{font:900 27px/1 Arial,sans-serif;letter-spacing:-1px;white-space:nowrap;color:#f3f4f6}
.brand-name em{font-style:normal;color:#ff3656}.brand-slogan{display:block;width:100%;text-align:center;font:400 9px/1.3 Arial,sans-serif;letter-spacing:1.6px;color:#c1c6d0}
nav a.active{border-bottom:0;color:#efb56e}nav{gap:28px}.actions{gap:18px}
.hero{min-height:560px;padding:60px 6%;background:#080b11}.hero>img{width:64%;object-position:50% 52%}
.hero:after{background:linear-gradient(90deg,#080b11 5%,#080b11ed 27%,#080b1190 43%,#080b1100 70%),linear-gradient(0deg,#080b11,transparent 23%)}
.hero-copy{max-width:500px}.hero h1{font-size:56px;line-height:1.18;letter-spacing:-2.5px;margin:20px 0}.hero p{font-size:13px;color:#c2c5ce}.hero .english{font-size:10px;letter-spacing:3px}.eyebrow{color:#efb56e;letter-spacing:2px;font-size:11px}.btn.primary{color:#17120b}.btn{border-radius:4px}.hero-buttons .btn:not(.primary){background:#080b1170}
.container{padding-top:32px}.section-head h2{font-size:23px}.tabs{margin:20px 0}.chip{border-radius:4px}.chip.active{background:#efb56e;color:#17120b}
#homeGrid .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.poster{border-radius:5px;aspect-ratio:16/9}.poster-title{font-size:19px}.card h3{font-weight:500}
.banner{background:none;border:0;border-top:1px solid #29303c;border-bottom:1px solid #29303c;border-radius:0;padding:30px 0;margin:38px 0;color:#d6b88e}.banner h2{font-size:23px}.banner p{color:#a9a7a3}.banner .btn{background:none;color:#efb56e;border-color:#72593a}
.products .product-art{background:#151a22;border-radius:5px}.notice{background:#efb56e0b;border-color:#efb56e30;color:#d5c1a8}footer{background:#080b11}footer .brand{width:max-content}
@media(min-width:1500px){.hero{padding-left:calc((100vw - 1250px)/2)}}
@media(max-width:900px){header{gap:25px}.hero h1{font-size:46px}.hero>img{width:72%}.hero-copy{max-width:420px}nav{gap:18px}}
@media(max-width:600px){header{height:115px;padding:12px 5%;gap:0}.brand-name{font-size:25px}.brand-slogan{font-size:8px;letter-spacing:1.5px}nav{margin-top:10px;height:36px;gap:26px}.hero{display:flex;flex-direction:column;padding:0;min-height:0;align-items:stretch;overflow:hidden}.hero>img{position:relative;display:block;width:100%;height:auto;max-height:none;aspect-ratio:4/5;object-fit:cover;object-position:50% 52%}.hero:after{display:none}.hero-copy{max-width:none;padding:8px 6% 32px;margin-top:-1px;background:#080b11}.hero h1{font-size:39px;margin:16px 0}.hero p{font-size:12px}.hero-buttons{flex-wrap:wrap}.eyebrow{font-size:10px}.hero .english{font-size:9px}#homeGrid .grid{grid-template-columns:1fr;gap:25px}#homeGrid .poster{aspect-ratio:16/9}#homeGrid .card h3{font-size:15px}#homeGrid .meta{font-size:12px}.banner{padding:25px 0}.section-head{gap:15px}.section-head h2{font-size:22px}.actions{gap:14px}.container{padding-top:26px}}

/* Keep the universe headline clear of the character artwork. */
.hero h1{font-size:clamp(32px,3.6vw,50px);letter-spacing:-2px}
@media(max-width:900px) and (min-width:601px){.hero-copy{max-width:390px}.hero h1{font-size:36px}}
@media(max-width:600px){.hero h1{font-size:clamp(28px,7.5vw,39px);letter-spacing:-1.6px}.hero .english{font-size:8px;letter-spacing:1.5px}}

/* Poster-style typography scoped to the main slogan. */
.hero h1[lang="en"]{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-weight:900;font-style:italic;font-size:clamp(46px,4.7vw,64px);line-height:.98;letter-spacing:-.5px;color: #fffaf1;
  text-shadow:
    0.0102em 0.0136em 0 #929292,
    0.0204em 0.0272em 0 #575757,
    0.0306em 0.0408em 0 #484848,
    0.0408em 0.0544em 0 #404040,
    0.0510em 0.0680em 0 #393939,
    0.0612em 0.0816em 0 #323232,
    0.0714em 0.0952em 0 #2c2c2c,
    0.0816em 0.1088em 0 #272727,
    0.0918em 0.1224em 0 #232323,
    0.1020em 0.1360em 0 #202020,
    0.1232em 0.1658em 0.0638em #0009;}
@media(max-width:900px) and (min-width:601px){.hero h1[lang="en"]{font-size:48px}}
@media(max-width:600px){.hero h1[lang="en"]{font-size:clamp(40px,10.5vw,58px);line-height:1;letter-spacing:-.4px}}

/* Header wordmark at 88% of its original desktop and mobile sizes. */
header .brand-name {
  font-size: 23.76px;
}
@media (max-width: 600px) {
  header .brand-name {
    font-size: 22px;
  }
}

.hero-copy > .eyebrow {
  font-size: 16px;
  color: #68aeff;
}
@media (max-width: 600px) {
  .hero-copy > .eyebrow {
    font-size: 14px;
  }
}

.hero-copy > .eyebrow + h1 {
  margin-top: 12px;
}
@media (max-width: 600px) {
  .hero-copy > .eyebrow + h1 {
    margin-top: 10px;
  }
}

.hero-buttons > .btn.primary[href="#cinema"] {
  background-color: #c6ff00;
  border-color: #c6ff00;
  color: #171d0c;
}

.actions #bgmToggle {
  padding: 6px 8px;
  border: 1px solid #444b57;
  border-radius: 4px;
  color: #dae0e8;
  font-size: 12px;
  white-space: nowrap;
}
.actions #bgmToggle[aria-pressed="true"] {
  color: #c6ff00;
  border-color: currentColor;
}
@media (max-width: 700px) {
  header .actions { gap: 8px; }
}
@media (min-width: 601px) and (max-width: 780px) {
  header { gap: 14px; }
  header nav { gap: 10px; }
}