@media (max-width: 1023px) {
  .section { min-height: auto; justify-content: flex-start; overflow: clip; }
  #community, #class { min-height: 100vh; }
}
@media (max-width: 1023px) {
  #register .section__bg, #count .section__bg, #invite .section__bg { --bg-dim: .4; }
  #community .section__bg, #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; justify-content: center; }
  #main .section__bg { position: absolute; inset: 0; height: auto; margin-bottom: 0; }
  #main .section__inner { padding: 0 calc(16px * var(--smo)); }
  .main-title { gap: calc(18px * var(--smo)); }
  .main-logo { width: calc(280px * var(--smo)); height: calc(141px * var(--smo)); }
  .main-cta { width: calc(242px * var(--smo)); height: calc(58px * var(--smo)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 calc(6px * var(--smo)) 0 0 #1A1F38, 0 calc(8px * var(--smo)) calc(16px * var(--smo)) rgba(0, 0, 0, .45); font-size: calc(20px * var(--smo)); letter-spacing: calc(0.4px * var(--smo)); }
  .main-scroll { bottom: calc(98px * var(--smo)); width: calc(104px * var(--smo)); gap: calc(8px * var(--smo)); }
  .main-scroll__bar { width: calc(4px * var(--smo)); height: calc(70px * var(--smo)); }
  .main-scroll__bar::before { height: calc(48px * var(--smo)); }
  .main-scroll__text { font-size: calc(14px * var(--smo)); letter-spacing: calc(-0.07px * var(--smo)); text-shadow: 0 calc(4px * var(--smo)) calc(4px * var(--smo)) rgba(12, 12, 13, .05), 0 calc(4px * var(--smo)) calc(4px * var(--smo)) rgba(12, 12, 13, .1); }
  .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; }
  /* @community-float 공식 커뮤니티 — PC 절대배치·크기를 되돌리고 헤더 오른쪽(햄버거 왼쪽)에 글자 링크로 둔다.
     visibility 는 visible 이 아니라 inherit — 드로어가 열려 .gnb 가 숨을 때 이 링크만 남지 않게 한다 */
  .gnb__community { position: static; width: auto; height: auto; margin-left: auto; margin-right: calc(12px * var(--smo)); }
  .gnb__community.is-footer-hidden { opacity: 1; visibility: inherit; }
  .gnb__community-char { display: none; }
  .gnb__community-label { position: static; height: auto; padding: 17px 8px; margin: -17px -8px; background: none; border-radius: 0; font-size: max(11px, calc(12px * var(--smo))); color: #F85F39; }
  /* //@community-float */
  .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 calc(8px * var(--smo)); 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__menu-link { gap: calc(10px * var(--smo)); min-height: calc(64px * var(--smo)); padding: calc(12px * var(--smo)) calc(24px * var(--smo)); border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-family: var(--font-body); font-weight: 700; font-size: calc(16px * var(--smo)); color: #fff; text-shadow: none; white-space: normal; }
  .gnb__menu-link[href="#main"] { display: none; }
  .gnb__menu-link[href="#register"] { border-top: 1px solid rgba(255, 255, 255, .12); min-height: calc(68px * var(--smo)); padding-top: calc(14px * var(--smo)); padding-bottom: calc(14px * var(--smo)); }
  .gnb__menu-link:hover, .gnb__menu-link.is-active { background: none; color: #fff; font-weight: 700; text-shadow: none; }
  .gnb__menu-link.is-active .gnb__menu-dot { opacity: 1; }
  .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, .section#count .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__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))); }
}
@media (max-width: 1023px) {
  .popup { }
}
@media (max-width: 1023px) {
  .br-mo { display: inline; }
  .br-pc { display: none; }
  .hero-title, .section#register .hero-title, .section#count .hero-title, .section#invite .hero-title { font-size: calc(32px * var(--smo)); line-height: 1.2; }
  .hero-desc, .section#register .hero-desc, .section#count .hero-desc, .section#invite .hero-desc { font-size: calc(16px * var(--smo)); line-height: 1.5; }
  #register .hero-title, #invite .hero-title, #register .hero-desc, #invite .hero-desc { margin-bottom: calc(12px * var(--smo)); }
  #register .period-pill, #invite .period-pill { margin-bottom: calc(52px * var(--smo)); }
  #register .period-pill, #count .period-pill, #invite .period-pill, #community .period-pill { height: calc(44px * var(--smo)); padding: calc(8px * var(--smo)) calc(28px * var(--smo)); border: 0; border-bottom: 1px solid #F0F2F4; border-radius: 0; background: none; font-size: calc(15px * var(--smo)); }
  .btn { border-radius: calc(12px * var(--smo)); }
  .main-cta { border-radius: calc(10px * var(--smo)); }
  .btn--primary, .btn--secondary { padding: calc(12px * var(--smo)) calc(16px * var(--smo)); font-size: calc(15px * var(--smo)); }
  .btn--secondary { border-radius: calc(12px * var(--smo)); }
  .btn--sub2 { width: 100%; height: max(48px, calc(48px * var(--smo))); border-radius: calc(10px * var(--smo)); font-size: calc(16px * var(--smo)); }
  .btn--sub2::before { height: calc(100% - 3px * var(--smo)); border-radius: calc(10px * var(--smo)); }
  .btn--sub2 .btn__label { padding-bottom: calc(3px * 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__table th, .popup__table td { padding: calc(8px * var(--smo)) calc(12px * var(--smo)); }
  .popup__lead { font-size: calc(20px * var(--smo)); }
  .popup__body .popup__lead + .otp__desc { margin-top: calc(10px * var(--smo)); }
  .popup__actions { gap: calc(12px * var(--smo)); }
  .otp__desc { font-size: calc(15px * var(--smo)); }
  .otp-auth { gap: calc(10px * var(--smo)); }
  .otp-auth__head { font-size: calc(20px * var(--smo)); }
  .otp-auth__msg { font-size: calc(15px * var(--smo)); }
  .otp-boxes { gap: calc(10px * var(--smo)); }
  .otp-box { width: calc(52px * var(--smo)); height: calc(70px * var(--smo)); padding: calc(10px * var(--smo)); border: calc(3px * var(--smo)) solid #1a1f38; border-radius: calc(12px * var(--smo)); font-size: calc(24px * var(--smo)); }
  .otp-auth__timer { font-size: calc(15px * var(--smo)); }
  .otp-auth__actions { gap: calc(10px * var(--smo)); }
  .popup .otp__desc { font-size: calc(14px * var(--smo)); }
  .popup { width: min(358px, 100vw - 32px); max-height: 90vh; }
  .popup__body { padding: 0 calc(20px * var(--smo)); }
  .otp-box { width: max(44px, calc(52px * var(--smo))); }
  .popup-backdrop:has(input) { align-items: flex-start; }
  .invite-phone { width: 100%; height: calc(70px * var(--smo)); padding: calc(10px * var(--smo)) calc(16px * var(--smo)); border: calc(3px * var(--smo)) solid #2b3340; border-radius: calc(10px * var(--smo)); }
  .invite-phone__prefix, .invite-phone__field { font-size: max(16px, calc(18px * var(--smo))); }
  .invite-auth__step--phone { gap: calc(10px * var(--smo)); }
  .invite-auth__lead { font-size: calc(20px * var(--smo)); }
  .invite-auth__error { font-size: max(11px, calc(13px * var(--smo))); }
  .popup .field__label, .popup .field__hint { font-size: calc(12px * var(--smo)); }
}
@media (max-width: 1023px) {
  .popup .field__error { font-size: calc(12px * var(--smo)); }
}
@media (max-width: 1023px) {
  #invite .card--invite { flex-direction: column; align-items: stretch; width: 100%; gap: calc(40px * var(--smo)); padding: calc(36px * var(--smo)) calc(20px * var(--smo)); background: #D0E8FE; border: calc(6px * var(--smo)) solid #FFFFFF; border-radius: calc(12px * var(--smo)); }
  #invite .invite-panel { width: 100%; height: auto; padding: 0; gap: calc(20px * var(--smo)); background: none; border-radius: 0; overflow: visible; }
  #invite .invite-panel__head { gap: calc(20px * var(--smo)); }
  #invite .invite-panel__text { display: flex; flex-direction: column; gap: calc(6px * var(--smo)); }
  #invite .invite-panel__title { font-size: calc(24px * var(--smo)); line-height: 1.2; }
  #invite .invite-panel__desc { font-size: calc(14px * var(--smo)); line-height: 1.4; }
  #invite .invite-cta { display: block; width: 100%; }
  #invite .invite-aside--illust { display: none; }
  #invite .invite-milestones { flex-direction: column; gap: calc(6px * var(--smo)); width: 100%; }
  #invite .invite-milestone { width: 100%; height: calc(129px * var(--smo)); border: 1px solid #A8D5FF; border-radius: calc(12px * var(--smo)); overflow: visible; }
  #invite .invite-milestone__badge { left: calc(10px * var(--smo)); top: calc(-1px * var(--smo)); width: calc(60.99px * var(--smo)); height: calc(56px * var(--smo)); }
  #invite .invite-milestone__badge b { top: calc(5.75px * var(--smo)); font-size: calc(16px * var(--smo)); }
  #invite .invite-milestone__badge span { top: calc(23.31px * var(--smo)); font-size: calc(12px * var(--smo)); }
  #invite .invite-milestone__icons { top: calc(11px * var(--smo)); width: calc(116.92px * var(--smo)); height: calc(80px * var(--smo)); }
  #invite .invite-milestone__icon { width: calc(77.36px * var(--smo)); height: calc(77.36px * var(--smo)); object-fit: contain; }
  #invite .invite-milestone__icon--a { left: 0; top: calc(2.64px * var(--smo)); }
  #invite .invite-milestone__icon--b { left: calc(39.56px * var(--smo)); top: 0; }
  #invite .invite-milestone__reward { left: 50%; top: calc(94px * var(--smo)); transform: translateX(-50%); flex-direction: row; gap: 0; font-size: calc(13px * var(--smo)); line-height: 1.6; color: #000; white-space: nowrap; }
  #invite .invite-milestone__reward span + span::before { content: '/'; margin: 0 calc(3.38px * var(--smo)); }
}
@media (max-width: 1023px) {
  #invite .invite-aside--my { width: 100%; gap: calc(12px * var(--smo)); padding-right: 0; text-align: center; }
  #invite .invite-link { gap: calc(12px * var(--smo)); }
  #invite .invite-link__label { display: block; margin: 0; font-size: calc(24px * var(--smo)); line-height: 1.2; text-align: center; }
  #invite .invite-link__box { height: calc(48px * var(--smo)); padding: calc(10px * var(--smo)) calc(6px * var(--smo)); border: calc(2px * var(--smo)) solid #242B51; border-radius: calc(12px * var(--smo)); justify-content: center; }
  #invite .invite-link__url { width: 100%; font-weight: 700; font-size: max(11px, calc(12px * var(--smo))); line-height: 1.2; text-align: center; }
  #invite .invite-link__actions { gap: calc(4px * var(--smo)); }
  #invite .invite-link__btn { height: max(44px, calc(44px * var(--smo))); padding: calc(12px * var(--smo)) calc(16px * var(--smo)); border-radius: calc(8px * var(--smo)); font-size: calc(14px * var(--smo)); line-height: 1.4; }
  #invite .invite-status { display: flex; align-items: center; gap: calc(21px * var(--smo)); height: calc(124px * var(--smo)); padding: 0 calc(15px * var(--smo)); background: #FFFFFF; border: 1px solid #A8D5FF; border-radius: calc(12px * var(--smo)); overflow: visible; }
  #invite .invite-status__box { position: static; flex: 1 1 auto; width: auto; height: auto; padding: 0; gap: calc(8px * var(--smo)); border: 0; background: none; }
  #invite .invite-status__label { font-size: calc(14px * var(--smo)); }
  #invite .invite-status__count { width: calc(100px * var(--smo)); padding-top: calc(8px * var(--smo)); }
  #invite .invite-status__count b { font-size: calc(24px * var(--smo)); }
  #invite .invite-status__count span { font-size: calc(20px * var(--smo)); letter-spacing: calc(0.4px * var(--smo)); }
  #invite .invite-status__gift { position: relative; left: auto; top: auto; flex: none; width: calc(126px * var(--smo)); height: calc(103px * var(--smo)); }
  #invite .invite-status__reward { position: absolute; top: calc(2px * var(--smo)); width: calc(58px * var(--smo)); height: calc(58px * var(--smo)); padding: 0; background: none; border-radius: 0; object-fit: contain; }
  #invite .invite-status__reward--a { left: calc(4px * var(--smo)); }
  #invite .invite-status__reward--b { left: calc(64px * var(--smo)); }
  #invite .invite-status__gift-text { top: calc(62px * var(--smo)); font-size: calc(11px * var(--smo)); }
  #invite .invite-status.is-empty .invite-status__gift-text { font-size: calc(13px * var(--smo)); }
  #invite .invite-status.is-empty { gap: 0; }
  #invite .invite-status.is-empty .invite-status__box { flex: 0 0 auto; }
  #invite .invite-status.is-empty .invite-status__gift { left: auto; top: auto; flex: 1 1 auto; width: auto; }
  #invite .invite-tooltip { top: calc(100% + 6px * var(--smo)); }
  #invite .invite-tooltip__arrow { width: calc(62px * var(--smo)); height: calc(9px * var(--smo)); margin-bottom: calc(-3px * var(--smo)); }
  #invite .invite-tooltip__box { max-width: calc(306px * var(--smo)); padding: calc(4px * var(--smo)) calc(12px * var(--smo)); border-radius: calc(4px * var(--smo)); font-size: max(11px, calc(12px * var(--smo))); white-space: normal; text-align: center; }
  #invite .invite-notice { margin-top: calc(28px * var(--smo)); text-align: left; }
  #invite .invite-notice__title { font-size: calc(14px * var(--smo)); }
  #invite .invite-notice__list { padding-left: calc(19.5px * var(--smo)); font-size: max(11px, calc(13px * var(--smo))); line-height: 1.6; }
  /* @invite-banner PC 절대배치를 흐름 안으로 되돌린다. padding/margin은 터치 타깃 44 확보용 — 같은 값의 음수 margin으로 시각 위치를 상쇄 */
  #invite .invite-banner { margin-top: calc(8px * var(--smo)); border-radius: calc(12px * var(--smo)); }
  #invite .invite-notice-open { position: static; align-self: center; font-size: calc(14px * var(--smo)); padding: 8px 8px 24px; margin: -8px -8px -24px; }
  /* //@invite-banner */
}
@media (max-width: 1023px) {
  #count .count-head { gap: calc(12px * var(--smo)); }
  #count .count-body { gap: calc(12px * var(--smo)); width: 100%; }
  #count .count-total { border-radius: calc(999px * var(--smo)); display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(270px * var(--smo)); min-height: calc(90px * var(--smo)); padding: 0; }
  #count .count-total__colon { display: none; }
  #count .count-total__label { font-size: calc(18px * var(--smo)); line-height: 1.6; }
  #count .count-total__num { font-size: calc(24px * var(--smo)); line-height: 1.2; }
  #count .count-progress { display: flex; flex-direction: column; align-items: center; gap: calc(26px * var(--smo)); width: 100%; }
  #count .count-gauge { border-radius: calc(999px * var(--smo)); width: calc(358px * var(--smo)); max-width: 100%; height: calc(36px * var(--smo)); padding: calc(4px * var(--smo)); }
  #count .count-gauge__fill { height: calc(28px * var(--smo)); border-radius: calc(999px * var(--smo)); }
  #count .count-gift { align-self: stretch; margin-inline: calc(-16px * var(--smo)); gap: calc(16px * var(--smo)); }
  #count .count-list { justify-content: flex-start; width: 100%; gap: calc(20px * var(--smo)); padding-inline: calc((100% - 210px * var(--smo)) / 2); padding-block: calc(24px * var(--smo)); margin-block: calc(-24px * var(--smo)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
  #count .count-list::-webkit-scrollbar { display: none; }
  #count .count-card { width: calc(210px * var(--smo)); height: calc(358px * var(--smo)); scroll-snap-align: center; }
  #count .count-card__pill { width: auto; height: auto; padding: calc(10px * var(--smo)) calc(24px * var(--smo)); border-radius: calc(999px * var(--smo)); font-size: calc(20px * var(--smo)); }
  #count .count-card__line { top: calc(40px * var(--smo)); width: calc(1px * var(--smo)); height: calc(28px * var(--smo)); }
  #count .count-card__box { top: calc(67.8px * var(--smo)); width: calc(210px * var(--smo)); height: calc(290px * var(--smo)); border-radius: calc(12px * var(--smo)); }
  #count .count-card__thumb { left: calc(10px * var(--smo)); top: calc(10px * var(--smo)); width: calc(190px * var(--smo)); height: calc(190px * var(--smo)); border-radius: calc(10px * var(--smo)); }
  #count .count-card__thumb img { left: calc(29px * var(--smo)); top: calc(29.17px * var(--smo)); width: calc(130px * var(--smo)); height: calc(130px * var(--smo)); object-fit: contain; }
  #count .count-card__done { left: calc(10px * var(--smo)); top: calc(10px * var(--smo)); width: calc(190px * var(--smo)); height: calc(190px * var(--smo)); gap: calc(2px * var(--smo)); padding-top: calc(58px * var(--smo)); border-radius: calc(10px * var(--smo)); }
  #count .count-card__check { width: calc(32px * var(--smo)); height: calc(32px * var(--smo)); }
  #count .count-card__done-txt { font-size: calc(24px * var(--smo)); }
  #count .count-card__text { left: calc(10px * var(--smo)); top: calc(213px * var(--smo)); width: calc(190px * var(--smo)); gap: calc(7px * var(--smo)); }
  #count .count-card__name { font-size: calc(16px * var(--smo)); }
  #count .count-card__qty { font-size: calc(24px * var(--smo)); }
  #count .count-notice:not(.count-notice--top) { display: none; }
  #count .count-notice--top { display: block; width: calc(332px * var(--smo)); max-width: 100%; font-size: max(11px, calc(12px * var(--smo))); font-weight: 400; line-height: 1.6; white-space: normal; }
}
@media (max-width: 1023px) {
  #register .register-panels { flex-direction: column; align-items: stretch; gap: calc(20px * var(--smo)); width: 100%; }
  #register .card--register, #register .card--store { width: 100%; height: auto; background: #262E58; border-radius: calc(12px * var(--smo)); }
  #register .card--register { border: calc(6px * var(--smo)) solid #2D376B; }
  #register .card--store { border: calc(6px * var(--smo)) solid #2D376B; }
  #register .card--register .card__inner { flex-direction: column; gap: calc(30px * var(--smo)); padding: calc(20px * var(--smo)) calc(20px * var(--smo)) calc(40px * var(--smo)); }
  #register .register-gift { width: calc(282px * var(--smo)); height: calc(333px * var(--smo)); margin: 0 auto; background: #262e58; }
  #register .register-gift__caption { top: calc(1.5px * var(--smo)); font-weight: 400; font-size: calc(18px * var(--smo)); line-height: 1; }
  #register .register-gift__stack--ooparts img { top: calc(53.5px * var(--smo)); }
  #register .register-gift__stack--ooparts img:nth-child(1) { left: calc(1px * var(--smo)); top: calc(60.57px * var(--smo)); }
  #register .register-gift__stack--ooparts img:nth-child(2) { left: calc(22.99px * var(--smo)); }
  #register .register-gift__stack--ooparts img:nth-child(3) { left: calc(50.49px * var(--smo)); }
  #register .register-gift__stack--ooparts img:nth-child(4) { left: calc(77.2px * var(--smo)); }
  #register .register-gift__stack--ooparts img:nth-child(5) { left: calc(104.69px * var(--smo)); top: calc(48px * var(--smo)); }
  #register .register-gift__stack--costume img { top: calc(144.88px * var(--smo)); }
  #register .register-gift__stack--costume img:nth-child(1) { left: calc(1px * var(--smo)); }
  #register .register-gift__stack--costume img:nth-child(2) { left: calc(28.66px * var(--smo)); }
  #register .register-gift__stack--costume img:nth-child(3) { left: calc(55.56px * var(--smo)); }
  #register .register-gift__stack--costume img:nth-child(4) { left: calc(81.68px * var(--smo)); }
  #register .register-gift__stack--costume img:nth-child(5) { left: calc(108.58px * var(--smo)); }
  #register .register-gift__stack--ooparts img { width: calc(178.312px * var(--smo)); height: calc(178.312px * var(--smo)); }
  #register .register-gift__stack--costume img { width: calc(174.424px * var(--smo)); height: calc(173.655px * var(--smo)); }
  #register .register-gift__badge { left: calc(7px * var(--smo)); width: calc(85px * var(--smo)); height: calc(85px * var(--smo)); font-size: calc(20px * var(--smo)); letter-spacing: calc(.4px * var(--smo)); }
  #register .register-gift__badge--ooparts { top: calc(52px * var(--smo)); }
  #register .register-gift__badge--costume { top: calc(224.88px * var(--smo)); }
  #register .register-form { width: 100%; }
  #register .register-form__step { gap: calc(24px * var(--smo)); }
  #register .card__title { font-size: calc(20px * var(--smo)); color: #DFE2E7; }
  #register .card--register .card__title::after { display: none; }
  #register .phone-input { width: 100%; padding: calc(16px * var(--smo)); border-radius: calc(10px * var(--smo)); }
  #register .phone-input__prefix, #register .phone-input__dash, #register .phone-input__field { font-size: max(16px, calc(18px * var(--smo))); letter-spacing: calc(0.9px * var(--smo)); }
  #register .terms { gap: calc(16px * var(--smo)); }
  #register .terms__all, #register .terms__list label { min-height: 0; padding-block: calc(5px * var(--smo)); margin-block: calc(-5px * var(--smo)); }
  #register .terms__all { gap: calc(8px * var(--smo)); font-size: calc(14px * var(--smo)); }
  #register .terms__notice-link { font-size: max(11px, calc(12px * var(--smo))); padding: 15px 8px; margin: -15px -8px; }
  #register .terms__list { gap: calc(10px * var(--smo)); padding-inline: 0; padding-top: calc(16px * var(--smo)); border-top: 1px solid #3A4580; }
  #register .terms__list label:not(.terms__text) { gap: calc(8px * var(--smo)); font-size: calc(14px * var(--smo)); }
  #register .terms input[type="checkbox"] { width: calc(16px * var(--smo)); height: calc(16px * var(--smo)); border-radius: calc(2px * var(--smo)); }
  #register .terms__item { padding-left: calc(24px * var(--smo)); font-size: calc(14px * var(--smo)); }
  #register .terms__detail { padding: 5px 4px; margin: -5px -4px; vertical-align: baseline; }
  #register .btn-register { width: 100%; height: calc(58px * var(--smo)); border-radius: calc(10px * var(--smo)); box-shadow: 0 calc(4px * var(--smo)) 0 0 #696F7D; }
  #register .btn-register:not(:disabled) { box-shadow: 0 calc(4px * var(--smo)) 0 0 #A45E18; }
  #register .btn-register::before { display: none; }
  #register .btn-register::after { top: 0; bottom: 0; border-radius: calc(10px * var(--smo)); font-size: calc(20px * var(--smo)); }
  #register .card--store .store__inner { width: 100%; margin-left: 0; padding: calc(40px * var(--smo)) calc(10px * var(--smo)); gap: calc(46px * var(--smo)); align-items: center; }
  #register .card__title--store { color: #FFFFFF; }
  #register .card__title--store::after { width: calc(254px * var(--smo)); height: 1px; margin-top: calc(16px * var(--smo)); background: #5A659B; opacity: 1; }
  #register .store-gift { width: calc(320px * var(--smo)); height: calc(188px * var(--smo)); margin: 0 auto; }
  #register .store-gift__shadow { left: calc(85px * var(--smo)); top: calc(152px * var(--smo)); width: calc(166px * var(--smo)); height: calc(26px * var(--smo)); }
  #register .store-gift__item { left: calc(66px * var(--smo)); top: 0; width: calc(188px * var(--smo)); height: calc(188px * var(--smo)); }
  #register .store-gift__badge { left: calc(192.31px * var(--smo)); top: calc(13px * var(--smo)); width: calc(91.146px * var(--smo)); height: calc(91.146px * var(--smo)); font-size: calc(14px * var(--smo)); }
  #register .store-badges { gap: calc(19px * var(--smo)); }
  #register .store-badges__row { flex-direction: column; align-items: center; gap: calc(19px * var(--smo)); }
  #register .store-btn { width: calc(250px * var(--smo)); height: calc(64px * var(--smo)); border-radius: calc(5px * var(--smo)); }
  #register .store-btn__logo--google { left: calc(43px * var(--smo)); top: calc(12px * var(--smo)); width: calc(159.184px * var(--smo)); height: calc(40px * var(--smo)); background-image: url('../assets/images/common/mo/store_googleplay.svg'); }
  #register .store-btn__logo--appstore { left: calc(63px * var(--smo)); top: calc(12px * var(--smo)); width: calc(130.271px * var(--smo)); height: calc(34.9961px * var(--smo)); background-image: url('../assets/images/common/mo/store_appstore.svg'); }
  #register .card__title--done { font-size: calc(23.3px * var(--smo)); }
  #register .register-result { height: auto; padding: calc(20px * var(--smo)) 0; gap: calc(15px * var(--smo)); }
  #register .register-result__head { font-size: calc(24px * var(--smo)); }
  #register .register-result__desc { font-size: calc(16px * var(--smo)); }
  #register .result-banners { flex-direction: column; gap: calc(6px * var(--smo)); width: 100%; }
  #register .result-banner { width: 100%; height: max(44px, calc(48px * var(--smo))); padding: calc(12px * var(--smo)) calc(20px * var(--smo)); border-radius: calc(10px * var(--smo)); font-size: calc(16px * var(--smo)); }
  #register .result-banner br { display: none; }
  #register .form-status { font-size: calc(14px * var(--smo)); }
  #register .field__hint, #register .field__error { padding: calc(6px * var(--smo)) calc(14px * var(--smo)) 0; }
  #register .field__hint { font-size: max(11px, calc(12px * var(--smo))); white-space: normal; }
  #register .field__error { font-size: max(11px, calc(12px * var(--smo))); }
  #community .section__inner { gap: calc(48px * var(--smo)); padding: calc(112px * var(--smo)) calc(16px * var(--smo)) calc(56px * var(--smo)); }
  #community .hero-title { line-height: 1.2; margin-bottom: 0; }
  #community .community-head { gap: calc(18px * var(--smo)); }
  #community .hero-desc { max-width: none; font-family: var(--font-body); font-weight: 700; font-size: calc(16px * var(--smo)); line-height: 1.5; opacity: .7; }
  #community .community-content { flex: 0 0 auto; gap: calc(48px * var(--smo)); }
  #community .community-gift { width: calc(246px * var(--smo)); height: calc(246px * var(--smo)); }
  #community .community-reward__badge { left: calc(-6px * var(--smo)); top: 0; width: calc(97.031px * var(--smo)); height: calc(97.031px * var(--smo)); background-size: calc(99.968px * var(--smo)) auto; background-position: calc(-1.467px * var(--smo)) 0; font-size: calc(18px * var(--smo)); letter-spacing: calc(0.9px * var(--smo)); }
  #community .community-join { width: calc(334px * var(--smo)); height: calc(62px * var(--smo)); }
  #community .community-reward__badge span:last-child { color: #FFE000; }
  #community .community-notice { width: 100%; gap: calc(7px * var(--smo)); }
  #community .community-notice__list { font-size: calc(13px * var(--smo)); }
  #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 .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)); }
}