@media (max-width: 1023px) {
  .section { min-height: auto; justify-content: flex-start; overflow: clip; }
  #class { min-height: 100vh; }
}
@media (max-width: 1023px) {
  #class .section__bg, #feature .section__bg, #world .section__bg, #media .section__bg { --bg-dim: .7; }
  .section__bg { position: sticky; inset: auto; top: 0; height: 100vh; margin-bottom: -100vh; }
}
@media (max-width: 1023px) {
  #main { min-height: 100vh; min-height: 100svh; justify-content: flex-start; }
  #main .section__bg { position: absolute; inset: 0; height: auto; margin-bottom: 0; }
  #main .section__inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: calc(56px * var(--smo)) calc(16px * var(--smo)) calc(100px * var(--smo)); }
  .main-title { gap: calc(27px * var(--smo)); }
  .main-logo { width: calc(280px * var(--smo)); height: calc(141px * var(--smo)); }
  .main-start { display: none; }
  .main-actions { gap: calc(12px * var(--smo)); }
  .main-btns { flex-direction: column; align-items: center; gap: calc(12px * var(--smo)); }
  .main-store { width: calc(242px * var(--smo)); height: calc(64px * var(--smo)); border-width: calc(2px * var(--smo)); font-size: calc(20px * var(--smo)); letter-spacing: calc(0.4px * var(--smo)); }
  .main-store__img--google { width: calc(180.78px * var(--smo)); height: calc(41.13px * var(--smo)); }
  .main-store__img--apple { width: calc(175.70px * var(--smo)); height: calc(38px * var(--smo)); }
  .main-store--pc { display: none; }
  .main-spec, .main-note { font-size: calc(14px * var(--smo)); line-height: normal; text-shadow: none; }
  .main-sns { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(24px * var(--smo)); display: flex; gap: calc(2px * var(--smo)); }
  .main-sns-link { width: calc(60px * var(--smo)); height: calc(60px * var(--smo)); background-repeat: no-repeat; background-position: center; background-size: contain; }
  .main-sns-link--facebook { background-image: url('../assets/images/common/sns_facebook_default.svg'); }
  .main-sns-link--x { background-image: url('../assets/images/common/sns_x_default.svg'); }
  .main-sns-link--discord { background-image: url('../assets/images/common/sns_discord_default.svg'); }
  .main-sns-link--forum { background-image: url('../assets/images/common/sns_forum_default.svg'); }
  .main-sns-link--youtube { background-image: url('../assets/images/common/sns_youtube_default.svg'); }
}
@media (max-width: 1023px) {
  .gnb { inset: auto; top: 0; left: 0; right: 0; height: calc(56px * var(--smo)); display: flex; align-items: center; justify-content: space-between; padding: calc(11px * var(--smo)) calc(16px * var(--smo)); background: #fff; pointer-events: auto; }
  .gnb__logo { position: static; width: calc(70px * var(--smo)); height: calc(32px * var(--smo)); }
  .gnb__sns { display: none; }
  .gnb__hamburger { display: flex; align-items: center; justify-content: center; width: calc(32px * var(--smo)); height: calc(32px * var(--smo)); padding: 0; border: 0; background: none; color: #000; cursor: pointer; }
  .gnb__hamburger svg { width: calc(18.5px * var(--smo)); height: calc(15.5px * var(--smo)); }
  .gnb__drawer-dim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
  .gnb.is-drawer-open { visibility: hidden; }
  .gnb.is-drawer-open .gnb__drawer-dim { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
  .gnb__menu { position: fixed; top: 0; right: 0; left: auto; transform: translateX(100%); width: calc(311px * var(--smo)); max-width: 86vw; height: 100%; padding: 0; gap: 0; align-items: stretch; background: #161616; overflow-y: auto; visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .gnb.is-drawer-open .gnb__menu { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .gnb__drawer-head { display: flex; align-items: center; padding: calc(32px * var(--smo)) 0; }
  .gnb__drawer-logo { width: calc(153px * var(--smo)); height: calc(56px * var(--smo)); background: url('../assets/images/common/logo_gnb.webp') center / contain no-repeat; }
  .gnb__drawer-close { position: absolute; left: calc(251px * var(--smo)); top: calc(1px * var(--smo)); display: flex; align-items: center; justify-content: center; width: calc(44px * var(--smo)); height: calc(44px * var(--smo)); padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
  .gnb__drawer-close svg { width: calc(40px * var(--smo)); height: calc(40px * var(--smo)); }
  .gnb__group { align-items: stretch; gap: 0; padding: calc(8px * var(--smo)) 0; }
  .gnb__group + .gnb__group { border-top: 1px solid rgba(255, 255, 255, .12); }
  .gnb__menu-link { height: auto; gap: calc(10px * var(--smo)); padding: 0 calc(24px * var(--smo)); border-radius: 0; font-family: var(--font-body); color: #fff; opacity: 1; text-shadow: none; white-space: normal; }
  .gnb__menu-link--d1 { min-height: calc(48px * var(--smo)); font-weight: 700; font-size: calc(16px * var(--smo)); }
  .gnb__menu-link--d1:only-child { min-height: calc(60px * var(--smo)); }
  .gnb__group > .gnb__menu-link--d1:not(:last-child) { margin-bottom: 0; }
  .gnb__menu-link--d2 { min-height: calc(40px * var(--smo)); gap: calc(8px * var(--smo)); font-weight: 400; font-size: calc(16px * var(--smo)); }
  .gnb__menu-link--d2 .gnb__menu-dot { display: none; }
  .gnb__menu-ext { width: calc(16px * var(--smo)); height: calc(16px * var(--smo)); }
  .gnb__menu-dot { order: -1; flex: none; width: calc(10px * var(--smo)); height: calc(10px * var(--smo)); font-size: 0; opacity: 1; background: currentColor; -webkit-mask: url('../assets/images/common/mo/ic_menu_bullet.svg') center / contain no-repeat; mask: url('../assets/images/common/mo/ic_menu_bullet.svg') center / contain no-repeat; }
  .section__inner, .section--wip .section__inner { padding: calc(112px * var(--smo)) calc(16px * var(--smo)) calc(56px * var(--smo)); gap: calc(52px * var(--smo)); }
}
@media (max-width: 1023px) {
  .footer { flex-direction: column; align-items: center; justify-content: center; gap: calc(24px * var(--smo)); height: auto; padding: calc(40px * var(--smo)) calc(16px * var(--smo)) calc(56px * var(--smo)); text-align: center; }
  .footer__company { display: contents; }
  .footer__ci { order: 1; }
  .footer__links { order: 2; }
  .footer__info { order: 3; }
  .footer__ci { width: calc(130px * var(--smo)); height: calc(37px * var(--smo)); }
  .footer__copyright { font-size: max(10px, calc(11px * var(--smo))); }
  .footer__nav { gap: calc(14px * var(--smo)); }
  .footer__nav-link { font-size: calc(15px * var(--smo)); }
  .footer__rate-btn:hover { color: #696F7D; }
  .footer__rate-btn[aria-expanded="true"] { color: #fff; }
  .footer__links { align-items: center; gap: calc(8px * var(--smo)); }
  .footer__info { align-items: center; gap: calc(6px * var(--smo)); }
  .footer__biz { font-size: max(10px, calc(12px * var(--smo))); }
  .footer__rating { font-size: max(10px, calc(12px * var(--smo))); }
  .footer__rate-panel { align-self: stretch; contain: inline-size; display: grid; grid-template-rows: 0fr; margin-top: calc(-8px * var(--smo)); visibility: hidden; transition: grid-template-rows .2s ease, margin-top .2s ease, visibility 0s linear .2s; }
  .footer__rate-panel.is-open { grid-template-rows: 1fr; margin-top: 0; visibility: visible; transition: grid-template-rows .2s ease, margin-top .2s ease, visibility 0s; }
  .footer__rate-fold { min-height: 0; overflow-x: visible; overflow-y: clip; }
  .rate-card { display: flex; flex-direction: column; align-items: center; gap: calc(12px * var(--smo)); padding-top: calc(8px * var(--smo)); background: none; }
  .rate-table { grid-template-columns: calc(152px * var(--smo)) calc(205px * var(--smo)); font-size: max(10px, calc(12px * var(--smo))); }
  .rate-table dt, .rate-table dd { height: calc(32px * var(--smo)); }
  .rate-table dt { padding-left: calc(20px * var(--smo)); }
  .rate-table dd { gap: calc(20px * var(--smo)); }
  .rate-table dd::before { height: calc(20px * var(--smo)); }
  .rate-table > :nth-child(-n+10) { border-bottom: 1px solid #151B28; }
  .rate-table > :nth-child(1) { border-top-left-radius: calc(4px * var(--smo)); }
  .rate-table > :nth-child(2) { border-top-right-radius: calc(4px * var(--smo)); }
  .rate-table > :nth-child(11) { border-bottom-left-radius: calc(4px * var(--smo)); }
  .rate-table > :nth-child(12) { border-bottom-right-radius: calc(4px * var(--smo)); }
  .rate-icons { gap: calc(12px * var(--smo)); }
  .rate-icon { height: calc(76px * var(--smo)); }
  .rate-icon--gambling { width: calc(64px * var(--smo)); }
  .rate-icon--19 { width: calc(65px * var(--smo)); }
}
@media (max-width: 1023px) {
  .popup { }
}
@media (max-width: 1023px) {
  .br-mo { display: inline; }
  .br-pc { display: none; }
  .hero-title { font-size: calc(32px * var(--smo)); line-height: 1.2; }
  .btn { border-radius: calc(12px * var(--smo)); }
  .main-store { border-radius: calc(8px * var(--smo)); }
}
@media (max-width: 1023px) {
  .popup-backdrop { padding: calc(16px * var(--smo)); }
  .popup { width: calc(800px * var(--smo)); max-height: calc(100vh - 80px * var(--smo)); gap: calc(32px * var(--smo)); padding-bottom: calc(44px * var(--smo)); border-radius: calc(20px * var(--smo)); }
  .popup__header { height: calc(64px * var(--smo)); padding-left: calc(40px * var(--smo)); padding-right: calc(20px * var(--smo)); }
  .popup__title { font-size: calc(18px * var(--smo)); }
  .popup__close { width: calc(24px * var(--smo)); height: calc(24px * var(--smo)); font-size: calc(20px * var(--smo)); }
  .popup__body { padding: 0 calc(40px * var(--smo)); font-size: calc(15px * var(--smo)); }
  .popup__body ul { padding-left: calc(22.5px * var(--smo)); }
  .popup__body li { font-size: calc(15px * var(--smo)); }
  .popup__body > * + * { margin-top: calc(24px * var(--smo)); }
  .popup { width: min(358px, 100vw - 32px); max-height: 90vh; }
  .popup__body { padding: 0 calc(20px * var(--smo)); }
  .spec-pc { display: none; }
  .spec-mo { display: block; }
  .popup__body > .spec-mo { margin-top: 0; }
  .spec-table th, .spec-table td { height: calc(48px * var(--smo)); padding: 0 calc(10px * var(--smo)); }
  .spec-table th { font-size: calc(16px * var(--smo)); }
  .spec-table td { font-size: calc(15px * var(--smo)); }
  .spec-table__os { gap: calc(8px * var(--smo)); }
  .spec-table__os img { width: calc(16px * var(--smo)); height: calc(16px * var(--smo)); }
  .spec-table--mo thead tr:nth-child(2) th { background: #242B51; }
  .spec-table--mo col:first-child { width: 31.761%; }
  .spec-table--mo col:last-child { width: 68.239%; }
  .spec-table--mo tbody tr:last-child > * { border-bottom: 1px solid #fff; }
  .spec-table--mo:last-child tbody tr:last-child > * { border-bottom: 0; }
  .spec-table--mo:last-child tbody tr:last-child th:first-child { border-bottom-left-radius: calc(12px * var(--smo)); }
  .spec-table--mo:last-child tbody tr:last-child td:last-child { border-bottom-right-radius: calc(12px * var(--smo)); }
  .spec-table--mo thead tr:first-child th { border-radius: 0; }
  .spec-table--mo:first-child thead tr:first-child th { border-radius: calc(12px * var(--smo)) calc(12px * var(--smo)) 0 0; }
  .popup-backdrop:has(input) { align-items: flex-start; }
  .popup .field__label { font-size: calc(12px * var(--smo)); }
}
@media (max-width: 1023px) { }
@media (max-width: 1023px) { }
@media (max-width: 1023px) { }
@media (max-width: 1023px) { }
@media (max-width: 1023px) {
  #class .section__inner { gap: calc(48px * var(--smo)); padding: calc(112px * var(--smo)) calc(16px * var(--smo)) calc(56px * var(--smo)); }
  #class .hero-title { line-height: 1.2; }
  #class .class-tabs { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; gap: 0; overflow-x: auto; scrollbar-width: none; }
  #class .class-tabs::-webkit-scrollbar { display: none; }
  #class .class-tab { padding: calc(10px * var(--smo)) calc(20px * var(--smo)); font-size: calc(15px * var(--smo)); line-height: 1.45; }
  #class .class-tab.is-active { border-color: transparent; background: #DFE2E7; }
  #class .class-arrow { display: none; }
  #class .class-stage { width: calc(358px * var(--smo)); gap: 0; }
  #class .class-deck { width: 100%; height: auto; }
  #class .class-panel { display: flex; flex-direction: column; align-items: center; gap: calc(24px * var(--smo)); }
  #class .class-frame { width: calc(338px * var(--smo)); height: calc(240px * var(--smo)); border-radius: calc(20px * var(--smo)); }
  #class .class-glasscard { inset: auto; top: 0; left: calc(10px * var(--smo)); width: calc(338px * var(--smo)); height: calc(240px * var(--smo)); border-radius: calc(20px * var(--smo)); background: linear-gradient(-51.675deg, rgba(255, 255, 255, .8) 20.369%, rgba(153, 153, 153, 0) 89.713%); }
  #class .class-glass { border-radius: calc(12px * var(--smo)); }
  #class .section__bg[data-bg-loaded] ~ .section__inner .class-glass--bg { background-image: url('../assets/images/class/mo/bg_class.webp'); }
  #class .class-char--knight { width: calc(427.52px * var(--smo)); height: calc(468.00px * var(--smo)); left: calc(-63.65px * var(--smo)); top: calc(-73.32px * var(--smo)); }
  #class .class-char--hunter { width: calc(358.00px * var(--smo)); height: calc(519.81px * var(--smo)); left: calc(-45.39px * var(--smo)); top: calc(-45.48px * var(--smo)); }
  #class .class-char--mage { width: calc(336.88px * var(--smo)); height: calc(551.58px * var(--smo)); left: calc(-5.30px * var(--smo)); top: calc(-101.40px * var(--smo)); }
  #class .class-char--priest { width: calc(326.46px * var(--smo)); height: calc(562.35px * var(--smo)); left: calc(5.77px * var(--smo)); top: calc(-96.49px * var(--smo)); }
  #class .class-char--clown { width: calc(301.26px * var(--smo)); height: calc(495.75px * var(--smo)); left: calc(11.32px * var(--smo)); top: calc(-83.53px * var(--smo)); }
  #class .class-text { position: static; width: 100%; padding: 0; align-items: center; gap: calc(10px * var(--smo)); overflow: visible; }
  #class .class-text__head { width: calc(342px * var(--smo)); gap: 0; }
  #class .class-text__sub { font-family: var(--font-body); font-size: calc(20px * var(--smo)); line-height: 1.4; }
  #class .class-text__name { font-size: calc(32px * var(--smo)); line-height: normal; color: #DFE2E7; }
  #class .class-text__name { gap: calc(4px * var(--smo)); }
  #class .class-text__badge { width: calc(52px * var(--smo)); height: calc(52px * var(--smo)); }
  #class .class-text__divider { width: calc(239px * var(--smo)); height: calc(13px * var(--smo)); background-image: url('../assets/images/common/mo/divider_diamond.svg'); }
  #class .class-text__desc, #class .class-text--clown .class-text__desc { width: calc(326px * var(--smo)); margin-left: 0; transform: none; white-space: normal; font-weight: 400; font-size: calc(16px * var(--smo)); line-height: 1.5; letter-spacing: normal; }
  #class .class-text__lead { width: auto; margin-left: 0; transform: none; white-space: normal; }
  #feature .section__inner, #world .section__inner, #media .section__inner { gap: calc(48px * var(--smo)); padding: calc(112px * var(--smo)) calc(16px * var(--smo)) calc(56px * var(--smo)); }
  #feature .hero-title, #world .hero-title, #media .hero-title { line-height: 1.2; }
  .tab-nav { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-pill { padding: calc(10px * var(--smo)) calc(20px * var(--smo)); font-size: calc(16px * var(--smo)); }
  .tab-pill.is-active { background: #DFE2E7; }
  .tab-arrow { display: none; }
  .tab-stage { width: calc(358px * var(--smo)); gap: 0; }
  .tab-deck { width: 100%; height: auto; }
  #feature .tab-panel:not(.is-active), #world .tab-panel:not(.is-active) { display: none; }
  .tab-head { gap: calc(6px * var(--smo)); width: 100%; height: calc(78px * var(--smo)); letter-spacing: calc(-0.36px * var(--smo)); }
  .tab-head--sm { height: calc(60px * var(--smo)); letter-spacing: calc(-0.36px * var(--smo)); }
  .tab-head__line { height: calc(5px * var(--smo)); }
  .tab-head__sub { font-size: calc(14px * var(--smo)); letter-spacing: normal; color: #929AAA; }
  #feature .tab-head__ko, #world .tab-head__ko { font-family: var(--font-title); font-weight: 400; font-size: calc(20px * var(--smo)); line-height: normal; letter-spacing: calc(0.4px * var(--smo)); }
  #feature .tab-head__en { font-size: calc(18px * var(--smo)); line-height: 1.6; }
  .tab-head--sm .tab-head__ko { font-size: calc(18px * var(--smo)); letter-spacing: calc(-0.36px * var(--smo)); }
  .tab-head--sm .tab-head__en { font-size: calc(18px * var(--smo)); }
  #class .class-tab { font-size: calc(16px * var(--smo)); line-height: 1.5; }
  #class .class-tab.is-active { border-color: #FFFFFF; }
  #feature .section__bg::after { background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, .8) 100%), linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .7) 100%); }
  #feature .tab-panel { gap: calc(20px * var(--smo)); }
  #feature .feature-cards { flex-direction: column; align-items: center; gap: calc(20px * var(--smo)); min-height: 0; }
  #feature .feature-card { flex: none; width: 100%; gap: calc(10px * var(--smo)); padding: 0 calc(10px * var(--smo)); border-radius: calc(12px * var(--smo)); }
  #feature .feature-card__shot { height: calc(244px * var(--smo)); border-radius: calc(8px * var(--smo)); }
  #feature .feature-card__text { padding: 0; gap: calc(8px * var(--smo)); text-align: left; }
  #feature .feature-card__title { font-size: calc(20px * var(--smo)); line-height: 1.8; letter-spacing: normal; }
  #feature .feature-card__desc { font-size: calc(16px * var(--smo)); line-height: 1.5; color: #FFFFFF; }
  #world .section__bg::after { background: rgba(0, 0, 0, .8); mix-blend-mode: luminosity; }
  #world .tab-panel { gap: calc(20px * var(--smo)); }
  #world .tab-panel#world-panel-newworld { gap: calc(20px * var(--smo)); }
  #world .tab-deck { height: auto; }
  #world .world-body { padding: 0 calc(10px * var(--smo)); min-height: 0; }
  #world .tab-head { width: calc(352px * var(--smo)); gap: calc(14px * var(--smo)); }
  #world .tab-head__en { font-size: calc(18px * var(--smo)); line-height: 1.6; }
  #world .world-para { font-size: calc(16px * var(--smo)); line-height: 1.5; text-shadow: 0 0 4px rgba(0, 0, 0, .9); }
  #world .world-shot { width: calc(338px * var(--smo)); height: calc(200px * var(--smo)); aspect-ratio: auto; margin-top: calc(30px * var(--smo)); border-radius: calc(8px * var(--smo)); }
  #world .world-years { gap: calc(40px * var(--smo)); padding-top: calc(10px * var(--smo)); }
  #world .world-year { gap: calc(8px * var(--smo)); }
  #world .world-year__head { gap: calc(10px * var(--smo)); }
  #world .world-year__deco { height: calc(10.111px * var(--smo)); }
  #world .world-year__deco--l { width: calc(37.497px * var(--smo)); }
  #world .world-year__deco--r { width: calc(37.345px * var(--smo)); height: calc(10.110px * var(--smo)); }
  #world .world-year__label { font-size: calc(18px * var(--smo)); letter-spacing: calc(0.9px * var(--smo)); }
  #world .world-year__desc { font-size: calc(14px * var(--smo)); line-height: 1.4; text-shadow: 0 0 4px rgba(0, 0, 0, .9); }
  #media .section__inner { padding-bottom: calc(112px * var(--smo)); }
  #media .media-youtube { width: calc(334px * var(--smo)); height: calc(62px * var(--smo)); border-bottom-width: calc(4px * var(--smo)); border-radius: calc(10px * var(--smo)); font-size: calc(20px * var(--smo)); letter-spacing: calc(0.4px * var(--smo)); }
  #media .tab-nav { display: none; }
  #media .tab-stage { width: calc(352px * var(--smo)); gap: 0; }
  #media .tab-deck { display: flex; flex-direction: column; gap: calc(48px * var(--smo)); width: 100%; height: auto; }
  #media .tab-panel { grid-area: auto; gap: calc(10px * var(--smo)); opacity: 1; visibility: visible; transition: none; }
  #media .tab-head { width: 100%; height: calc(50px * var(--smo)); gap: calc(10px * var(--smo)); letter-spacing: normal; }
  #media .tab-head__title { line-height: 1.25; }
  #media .tab-head__ko { display: block; font-family: var(--font-body); font-weight: 700; font-size: calc(16px * var(--smo)); line-height: 1.25; letter-spacing: normal; }
  #media .media-thumb { width: calc(338px * var(--smo)); height: calc(200px * var(--smo)); border-radius: calc(8px * var(--smo)); }
  #media .media-thumb__play { width: calc(36.826px * var(--smo)); height: calc(39.092px * var(--smo)); }
}