:root { --spc: 1; --smo: 1; --color-bg: #000; --color-text: #fff; --color-text-dim: rgba(255, 255, 255, .6); --color-line: rgba(255, 255, 255, .15); --font-base: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; --font-title: 'ONE Mobile Title', var(--font-base); --font-body: 'ONE Mobile', var(--font-base); --ds-white: #FFFFFF; --ds-navy-primary: #1A1F38; --ds-navy-secondary: #242B51; --ds-blue-primary: #158BF8; --ds-blue-secondary: #1BABFF; --ds-purple1-primary2: #4E66DF; --ds-purple2-primary: #3D4691; --ds-purple2-secondary: #4C56AC; --ds-purple2-text2: #92A6E8; --ds-purple2-title3: #A8B6FF; --ds-brown-secondary: #F9B066; --ds-point: #FF3A44; --ds-gray-60: #696F7D; --ds-gray-50: #929AAA; --ds-gray-40: #C6CBD2; --ds-gray-30: #DFE2E7; --ds-shadow-300: 0 4px 4px -1px rgba(12, 12, 13, .05), 0 4px 4px -1px rgba(12, 12, 13, .10); --ds-shadow-600: 0 16px 32px -8px rgba(12, 12, 13, .40); --z-gnb: 900; --z-popup-backdrop: 1000; --z-popup: 1001; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-base); line-height: 1.5; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
body { word-break: keep-all; }
a { color: inherit; text-decoration: none; display: block; }
img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; }
button, input { font-family: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.is-popup-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
html { scroll-behavior: auto; scroll-padding-top: 0; }
.section { position: relative; min-height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.section__bg { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.section__bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--bg-dim, 0)); pointer-events: none; }
#main .section__bg { --bg-dim: .2; }
#register .section__bg { --bg-dim: .4; }
#count .section__bg { --bg-dim: .6; }
#invite .section__bg { --bg-dim: .6; }
#community .section__bg { --bg-dim: .6; }
#class .section__bg { --bg-dim: .6; }
#feature .section__bg { --bg-dim: .6; }
#world .section__bg { --bg-dim: .5; }
#media .section__bg { --bg-dim: .6; }
.section__inner { position: relative; z-index: 2; width: 100%; padding: 0; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.section--wip { background: #0d1018; }
.section--wip .section__inner { border: 1px dashed rgba(255, 255, 255, .25); border-radius: calc(16px * var(--spc)); width: calc(720px * var(--spc)); margin: 0 auto; padding: calc(56px * var(--spc)) calc(32px * var(--spc)); }
.section--wip .hero-title { opacity: .85; }
.section--wip .hero-desc { color: rgba(255, 255, 255, .55); margin-bottom: 0; }
.section--wip::after { content: 'WIP · 디자인 확정 후 작업 예정'; position: absolute; left: 50%; bottom: calc(40px * var(--spc)); transform: translateX(-50%); font-size: calc(12px * var(--spc)); letter-spacing: .08em; color: rgba(255, 255, 255, .3); }
.gnb { position: fixed; inset: 0; z-index: var(--z-gnb); pointer-events: none; opacity: 1; transition: opacity .5s ease; }
.gnb > * { pointer-events: auto; }
.gnb[data-reveal="scroll"] { opacity: 0; }
.gnb[data-reveal="scroll"].is-visible { opacity: 1; }
.gnb__logo { position: absolute; top: calc(25px * var(--spc)); left: calc(40px * var(--spc)); width: calc(140px * var(--spc)); height: calc(63px * var(--spc)); background: url('../assets/images/common/logo_gnb.webp') center / contain no-repeat; }
.gnb__sns { position: absolute; top: calc(38px * var(--spc)); right: calc(40px * var(--spc)); display: flex; gap: calc(2px * var(--spc)); }
.gnb__sns-link { width: calc(60px * var(--spc)); height: calc(60px * var(--spc)); background-repeat: no-repeat; background-position: center; background-size: contain; }
.gnb__sns-link--facebook { background-image: url('../assets/images/common/sns_facebook_default.svg'); }
.gnb__sns-link--facebook:hover { background-image: url('../assets/images/common/sns_facebook_hover.svg'); }
.gnb__sns-link--x { background-image: url('../assets/images/common/sns_x_default.svg'); }
.gnb__sns-link--x:hover { background-image: url('../assets/images/common/sns_x_hover.svg'); }
.gnb__sns-link--discord { background-image: url('../assets/images/common/sns_discord_default.svg'); }
.gnb__sns-link--discord:hover { background-image: url('../assets/images/common/sns_discord_hover.svg'); }
.gnb__sns-link--forum { background-image: url('../assets/images/common/sns_forum_default.svg'); }
.gnb__sns-link--forum:hover { background-image: url('../assets/images/common/sns_forum_hover.svg'); }
.gnb__sns-link--youtube { background-image: url('../assets/images/common/sns_youtube_default.svg'); }
.gnb__sns-link--youtube:hover { background-image: url('../assets/images/common/sns_youtube_hover.svg'); }
.gnb__menu { position: absolute; top: 50%; right: calc(40px * var(--spc)); transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: calc(10px * var(--spc)); }
.gnb__menu-link { display: flex; align-items: center; gap: calc(8px * var(--spc)); padding: calc(8px * var(--spc)) calc(18px * var(--spc)); border-radius: calc(999px * var(--spc)); font-size: calc(15px * var(--spc)); font-weight: 500; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.gnb__menu-dot { font-size: calc(9px * var(--spc)); opacity: .8; }
.gnb__hamburger, .gnb__drawer-head, .gnb__drawer-dim { display: none; }
.br-mo { display: none; }
.br-pc { display: inline; }
.gnb__menu-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.gnb__menu-link.is-active { background: linear-gradient(180deg, #8fd8ff, #4fa9ef); color: #16213e; font-weight: 700; text-shadow: none; }
.gnb__menu-link.is-active .gnb__menu-dot { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .gnb__menu, .gnb__drawer-dim { transition: none; }
}
.footer { position: relative; display: flex; align-items: center; justify-content: space-between; height: calc(173px * var(--spc)); padding: 0 calc(40px * var(--spc)); background: #151B28; border-top: 1px solid rgba(0, 0, 0, .1); }
.footer__company { display: flex; align-items: center; gap: calc(24px * var(--spc)); }
.footer__ci { width: calc(158px * var(--spc)); height: calc(45px * var(--spc)); background: url('../assets/images/common/logo_playwith.webp') center / contain no-repeat; }
.footer__copyright { font-family: var(--font-body); font-size: calc(11px * var(--spc)); line-height: 1.45; letter-spacing: calc(.5px * var(--spc)); color: #696F7D; }
.footer__copy-mark { font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
.footer__info { display: flex; flex-direction: column; gap: calc(4px * var(--spc)); }
.footer__biz { font-family: var(--font-body); font-size: calc(13px * var(--spc)); line-height: 1.6; color: #696F7D; }
.footer__links { display: flex; flex-direction: column; align-items: flex-end; gap: calc(8px * var(--spc)); }
.footer__rating { font-family: var(--font-body); font-size: calc(13px * var(--spc)); line-height: 1.5; color: #DDDDDD; }
.footer__nav { display: flex; align-items: center; gap: calc(24px * var(--spc)); }
.footer__nav-link { font-family: var(--font-body); font-size: calc(16px * var(--spc)); line-height: 1.5; color: #696F7D; }
.footer__nav-link:hover { color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; border-radius: calc(12px * var(--spc)); transition: background-color .2s ease; }
.btn--primary { padding: calc(12px * var(--spc)) calc(16px * var(--spc)); background: var(--ds-blue-primary); font-family: var(--font-body); font-size: calc(15px * var(--spc)); font-weight: 700; line-height: 1.45; color: #fff; }
.btn--primary:hover { background: #3ba0ff; }
.btn--secondary { padding: calc(12px * var(--spc)) calc(16px * var(--spc)); border: 1px solid #2b3340; border-radius: calc(12px * var(--spc)); background: #fff; font-family: var(--font-body); font-size: calc(15px * var(--spc)); font-weight: 700; line-height: 1.45; color: #2b3340; }
.btn--secondary:hover { color: #158bf8; }
.btn--sub2 { position: relative; z-index: 0; width: calc(380px * var(--spc)); height: calc(62px * var(--spc)); border-radius: calc(10px * var(--spc)); background: #2A3C88; font-family: var(--font-title); font-weight: 400; font-size: calc(20px * var(--spc)); line-height: normal; letter-spacing: 0.02em; color: #fff; }
.btn--sub2::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: calc(58px * var(--spc)); border-radius: calc(10px * var(--spc)); background: #344BA9; transition: background-color .2s ease; }
.btn--sub2:hover::before { background: #465FC5; }
.btn--sub2 .btn__label { display: block; padding-bottom: calc(4px * var(--spc)); }
.btn:disabled, .btn.is-disabled { filter: grayscale(1) brightness(.75); opacity: .5; pointer-events: none; cursor: not-allowed; }
.btn.is-error { outline: 2px solid #ff4d4f; outline-offset: 2px; }
.popup-backdrop { position: fixed; inset: 0; z-index: var(--z-popup-backdrop); display: flex; align-items: center; justify-content: center; padding: calc(40px * var(--spc)); background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.popup-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; }
.popup { position: relative; z-index: var(--z-popup); width: calc(600px * var(--spc)); max-width: 100%; max-height: calc(100vh - 80px * var(--spc)); display: flex; flex-direction: column; gap: calc(32px * var(--spc)); padding-bottom: calc(44px * var(--spc)); background: #fff; border-radius: calc(20px * var(--spc)); overflow: hidden; transform: scale(.96) translateY(8px); transition: transform .3s ease; }
.popup-backdrop.is-open .popup { transform: scale(1) translateY(0); }
.popup--wide { width: calc(800px * var(--spc)); }
.popup__header { flex: none; height: calc(64px * var(--spc)); padding-left: calc(40px * var(--spc)); padding-right: calc(20px * var(--spc)); border-bottom: 1px solid #c6cbd2; display: flex; align-items: center; justify-content: flex-end; }
.popup__title { margin-right: auto; font-family: var(--font-title); font-size: calc(18px * var(--spc)); font-weight: 400; letter-spacing: 0.05em; color: #1a1f38; }
.popup__title--a11y { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.popup__close { flex: none; width: calc(24px * var(--spc)); height: calc(24px * var(--spc)); display: flex; align-items: center; justify-content: center; font-size: calc(20px * var(--spc)); line-height: 1; color: #1a1f38; }
.popup__close::before { content: '\2715'; }
.popup__close:hover { opacity: .6; }
.popup__body { padding: 0 calc(40px * var(--spc)); overflow-y: auto; font-family: var(--font-body); font-size: calc(15px * var(--spc)); line-height: 1.8; color: #1a1f38; }
.popup__body ul { list-style: disc; padding-left: calc(22.5px * var(--spc)); }
.notice-link { display: inline; color: var(--ds-blue-secondary); text-decoration: none; }
.notice-link:hover { text-decoration: underline; }
.popup__body li { font-family: var(--font-body); font-size: calc(15px * var(--spc)); line-height: 1.8; color: #1a1f38; }
.popup__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.popup__table th, .popup__table td { width: 50%; border: 1px solid #c6cbd2; padding: calc(8px * var(--spc)) calc(12px * var(--spc)); text-align: left; }
.popup__table th { font-weight: 700; }
.popup__body > * + * { margin-top: calc(24px * var(--spc)); }
.popup__lead { font-family: var(--font-body); font-weight: 700; font-size: calc(20px * var(--spc)); line-height: 1.8; color: #1a1f38; text-align: center; }
.popup__body .popup__lead + .otp__desc { margin-top: calc(10px * var(--spc)); }
.popup .field { margin-bottom: 0; }
.popup__actions { display: flex; justify-content: center; gap: calc(12px * var(--spc)); }
.otp__desc { font-size: calc(15px * var(--spc)); color: var(--ds-gray-60); text-align: center; }
.otp-auth { display: flex; flex-direction: column; align-items: center; gap: calc(10px * var(--spc)); text-align: center; }
.otp-auth__head { font-family: var(--font-body); font-weight: 700; font-size: calc(20px * var(--spc)); line-height: 1.8; color: #1a1f38; }
.otp-auth__msg { font-family: var(--font-body); font-size: calc(15px * var(--spc)); line-height: 1.8; color: #2b3340; }
.otp-auth[data-otp-state="fail"] .otp-auth__msg, .otp-auth[data-otp-state="expired"] .otp-auth__msg { color: #ff3a44; }
.otp-boxes { display: flex; gap: calc(10px * var(--spc)); }
.otp-box { width: calc(52px * var(--spc)); height: calc(70px * var(--spc)); padding: calc(10px * var(--spc)); border: calc(3px * var(--spc)) solid #1a1f38; border-radius: calc(12px * var(--spc)); background: #fff; font-family: var(--font-title); font-size: calc(24px * var(--spc)); color: #1a1f38; text-align: center; }
.otp-box:focus { outline: none; border-color: var(--ds-blue-primary); }
.otp-box:disabled { border-color: #c6cbd2; color: #929aaa; background: #fff; }
.otp-auth__timer { font-family: var(--font-body); font-size: calc(15px * var(--spc)); line-height: 1.8; color: #929aaa; font-variant-numeric: tabular-nums; }
.otp-auth__actions { display: flex; gap: calc(10px * var(--spc)); justify-content: center; }
.otp-auth__actions .btn:disabled { border: 1px solid #c6cbd2; background: #fff; color: #c6cbd2; cursor: not-allowed; filter: none; opacity: 1; pointer-events: auto; }
.otp-auth__actions .btn:disabled:hover { color: #c6cbd2; background: #fff; }
.invite-auth__step--phone { display: flex; flex-direction: column; align-items: center; gap: calc(10px * var(--spc)); text-align: center; }
.invite-auth__lead { font-family: var(--font-body); font-weight: 700; font-size: calc(20px * var(--spc)); line-height: 1.8; color: var(--ds-navy-primary); }
.invite-phone { box-sizing: border-box; display: flex; align-items: center; width: calc(380px * var(--spc)); height: calc(70px * var(--spc)); padding: calc(10px * var(--spc)) calc(16px * var(--spc)); border: calc(3px * var(--spc)) solid #2b3340; border-radius: calc(10px * var(--spc)); background: #fff; text-align: left; }
.invite-phone__prefix, .invite-phone__field { font-family: var(--font-title); font-weight: 400; font-size: calc(24px * var(--spc)); line-height: 1.2; color: #2b3340; }
.invite-phone__field { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none; }
.invite-phone.is-error { border-color: var(--ds-point); }
.invite-auth__error { font-family: var(--font-body); font-size: calc(15px * var(--spc)); line-height: 1.8; color: var(--ds-point); text-align: center; }
.field { margin-bottom: calc(28px * var(--spc)); }
.field__label { display: block; font-size: calc(15px * var(--spc)); color: var(--color-text-dim); margin-bottom: calc(10px * var(--spc)); }
.phone-input { display: flex; align-items: center; gap: calc(10px * var(--spc)); }
.phone-input__prefix { flex: none; display: flex; align-items: center; justify-content: center; height: calc(52px * var(--spc)); padding: 0 calc(16px * var(--spc)); border: 1px solid var(--color-line); border-radius: calc(8px * var(--spc)); font-size: calc(17px * var(--spc)); color: var(--color-text-dim); background: rgba(255, 255, 255, .04); }
.phone-input__dash { color: var(--color-text-dim); }
.phone-input__field { flex: 1; height: calc(52px * var(--spc)); padding: 0 calc(16px * var(--spc)); border: 1px solid var(--color-line); border-radius: calc(8px * var(--spc)); background: rgba(255, 255, 255, .04); color: #fff; font-size: calc(17px * var(--spc)); letter-spacing: .05em; }
.phone-input__field::placeholder { color: rgba(255, 255, 255, .35); }
.phone-input__field:focus { outline: none; border-color: #6ea8ff; box-shadow: 0 0 0 3px rgba(110, 168, 255, .25); }
.phone-input__field.is-error { border-color: #ff6b6b; }
.phone-input__field:disabled { opacity: .5; }
.field__error { min-height: calc(20px * var(--spc)); margin-top: calc(8px * var(--spc)); font-size: calc(13px * var(--spc)); color: #ff6b6b; }
.hero-title { font-size: calc(48px * var(--spc)); font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .55), 0 0 4px rgba(0, 0, 0, .4); margin-bottom: calc(14px * var(--spc)); }
.hero-desc { font-size: calc(18px * var(--spc)); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); margin-bottom: calc(24px * var(--spc)); }
.period-pill { display: inline-flex; align-items: center; padding: calc(10px * var(--spc)) calc(24px * var(--spc)); border: 1px solid rgba(255, 255, 255, .4); border-radius: calc(999px * var(--spc)); background: rgba(10, 14, 20, .35); font-size: calc(14px * var(--spc)); color: #fff; margin-bottom: calc(40px * var(--spc)); }
.tab-nav { display: flex; flex-direction: row; align-items: center; gap: calc(10px * var(--spc)); }
.tab-pill { flex: none; padding: calc(10px * var(--spc)) calc(20px * var(--spc)); border: 1px solid #8F9BB1; border-radius: 999px; background: rgba(0, 0, 0, .1); color: #AEB7C9; font-family: var(--font-body); font-weight: 700; font-size: calc(16px * var(--spc)); line-height: 1.5; white-space: nowrap; cursor: pointer; }
.tab-pill.is-active { border-color: #FFFFFF; background: #FFFFFF; color: #1A1F38; }
.tab-stage { display: flex; flex-direction: row; align-items: center; gap: calc(40px * var(--spc)); width: calc(1310px * var(--spc)); }
.tab-arrow { flex: none; width: calc(48px * var(--spc)); height: calc(54px * var(--spc)); border: 0; padding: 0; background-color: #696F7D; -webkit-mask: url('../assets/images/common/arrow_slide.svg') center / contain no-repeat; mask: url('../assets/images/common/arrow_slide.svg') center / contain no-repeat; cursor: pointer; }
.tab-arrow:hover { background-color: #FFFFFF; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .25)); }
.tab-arrow--next { transform: scaleX(-1); }
.tab-deck { flex: none; display: grid; width: calc(1130px * var(--spc)); }
.tab-panel { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.tab-panel.is-active { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
.tab-head { display: flex; flex-direction: column; gap: calc(8px * var(--spc)); width: calc(600px * var(--spc)); height: calc(78px * var(--spc)); margin-inline: auto; letter-spacing: calc(-0.36px * var(--spc)); }
.tab-head--sm { height: calc(60px * var(--spc)); letter-spacing: calc(0.9px * var(--spc)); }
.tab-head__line { display: block; flex: none; width: 100%; height: calc(5px * var(--spc)); background: url('../assets/images/common/divider_tab.svg') center / 100% 100% no-repeat; }
.tab-head__line--flip { transform: scaleY(-1); }
.tab-head__body { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.tab-head__ko { font-family: var(--font-title); font-weight: 400; color: #F0F2F4; }
.tab-head__en { font-family: var(--font-body); font-weight: 400; color: #F0F2F4; }
.tab-head__sub { font-family: var(--font-body); font-weight: 400; font-size: calc(14px * var(--spc)); line-height: 1.4; color: #DFE2E7; }
#feature .tab-head__ko { font-size: calc(20px * var(--spc)); line-height: normal; letter-spacing: calc(0.4px * var(--spc)); }
#feature .tab-head__en { font-size: calc(20px * var(--spc)); line-height: 1.4; }
.tab-head--sm .tab-head__ko { font-size: calc(18px * var(--spc)); line-height: normal; letter-spacing: calc(0.9px * var(--spc)); }
.tab-head--sm .tab-head__en { font-size: calc(18px * var(--spc)); line-height: 1.6; }
#world .tab-head__ko { font-size: calc(20px * var(--spc)); letter-spacing: calc(0.4px * var(--spc)); }
@media (prefers-reduced-motion: reduce) {
  .tab-panel, .tab-panel.is-active { transition: none; }
}
#register, #count, #invite { font-family: var(--font-body); }
#register .btn, #count .btn, #invite .btn, .popup .btn { font-family: var(--font-body); font-weight: 700; }
.popup { font-family: var(--font-body); box-shadow: var(--ds-shadow-600); }
#register .field__label, #register .field__hint, .popup .field__label, .popup .field__hint { font-family: var(--font-body); font-size: calc(12px * var(--spc)); line-height: 1.6; }
#register .field__error, .popup .field__error { font-family: var(--font-body); font-size: calc(12px * var(--spc)); line-height: 1.6; color: var(--ds-point); }
.popup .otp__desc { font-family: var(--font-body); font-size: calc(14px * var(--spc)); line-height: 1.4; }
#register .phone-input__field.is-error { border-color: var(--ds-point); }
#register .phone-input__field:focus { border-color: var(--ds-blue-primary); box-shadow: 0 0 0 3px rgba(21, 139, 248, .25); }
#register .terms input[type="checkbox"]:checked { background: var(--ds-blue-primary); border-color: var(--ds-blue-primary); }
#register .hero-title, #count .hero-title, #invite .hero-title, #community .hero-title, #class .hero-title, #feature .hero-title, #world .hero-title, #media .hero-title { font-family: var(--font-title); font-weight: 400; letter-spacing: 0; }
#register .hero-desc, #count .hero-desc, #invite .hero-desc, #community .hero-desc, #class .hero-desc { font-family: var(--font-body); font-weight: 400; font-size: calc(20px * var(--spc)); line-height: 1.4; }
#register .period-pill, #count .period-pill, #invite .period-pill, #community .period-pill { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: calc(44px * var(--spc)); padding: calc(8px * var(--spc)) calc(28px * var(--spc)); border: calc(1.5px * var(--spc)) solid #929AAA; border-radius: 999px; background: rgba(22, 27, 56, .4); font-family: var(--font-body); font-weight: 700; font-size: calc(18px * var(--spc)); line-height: normal; letter-spacing: -0.02em; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .15); margin-bottom: 0; }

/*community-float*/
.gnb__community { position: absolute; right: calc(40px * var(--spc)); bottom: calc(38px * var(--spc)); width: calc(144px * var(--spc)); height: calc(143.1px * var(--spc)); transition: opacity .3s ease, visibility 0s linear 0s; }
.gnb__community.is-footer-hidden { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.gnb__community-char { position: absolute; top: 0; left: calc(16.2px * var(--spc)); width: calc(111.6px * var(--spc)); height: calc(134.1px * var(--spc)); }
.gnb__community-label { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; height: calc(43.2px * var(--spc)); background: #F85F39; border-radius: calc(7.2px * var(--spc)); font-family: var(--font-title); font-weight: 400; font-size: calc(14.4px * var(--spc)); line-height: normal; letter-spacing: -0.02em; color: #fff; }