: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-10: #F8FAFC; --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; transition-delay: 0s !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; }
#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; }*/
.section__inner { position: relative; 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::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; z-index: var(--z-gnb); opacity: 1; transition: opacity .5s ease; }
.gnb[data-reveal="scroll"] { opacity: 0; }
.gnb[data-reveal="scroll"].is-visible { opacity: 1; }
.gnb__logo { position: absolute; left: calc(40px * var(--spc)); background: url('../assets/images/common/logo_gnb.webp') center / contain no-repeat; }
.gnb__sns { position: absolute; display: flex; }
.gnb__menu { position: absolute; display: flex; flex-direction: column; }
.gnb__group { display: flex; flex-direction: column; }
.gnb__menu-link { display: flex; align-items: center; gap: calc(8px * var(--spc)); font-family: var(--font-body); line-height: 1.5; white-space: nowrap; transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.gnb__menu-ext { flex: none; }
.gnb__start, .gnb__hamburger, .gnb__drawer-head, .gnb__drawer-dim { display: none; }
.br-mo { display: none; }
.br-pc { display: inline; }
@media (min-width: 1024px) {
  :root { --gnb-h: calc(80px * var(--spc)); }
  .section { padding-top: var(--gnb-h); }
  .gnb { --gnb-pill-fade: .3s; --gnb-in: .2s; --gnb-hold: .15s; --gnb-out: .25s; --gnb-fg: var(--ds-gray-10); --gnb-sns: var(--ds-gray-40); inset: 0 0 auto 0; height: var(--gnb-h); background: rgba(255, 255, 255, .15); transition: opacity .5s ease, background-color var(--gnb-out) ease var(--gnb-hold), box-shadow var(--gnb-out) ease var(--gnb-hold); }
  .gnb:is(:has(.gnb__menu:hover), :has(.gnb__menu :focus-visible)) { --gnb-fg: var(--ds-navy-primary); --gnb-sns: var(--ds-gray-50); background: #fff; box-shadow: inset 0 -1px 0 var(--ds-gray-40); transition: opacity .5s ease, background-color var(--gnb-in) ease, box-shadow var(--gnb-in) ease; }
  .gnb__logo { top: calc(10px * var(--spc)); width: calc(133px * var(--spc)); height: calc(60px * var(--spc)); }
  .gnb__sns { top: 0; right: calc(256px * var(--spc)); }
  .gnb__sns .gnb__sns-link { width: calc(60px * var(--spc)); height: calc(80px * var(--spc)); background-color: var(--gnb-sns); transition: background-color var(--gnb-out) ease var(--gnb-hold); }
  .gnb:is(:has(.gnb__menu:hover), :has(.gnb__menu :focus-visible)) .gnb__sns .gnb__sns-link { transition: background-color var(--gnb-in) ease; }
  .gnb__sns .gnb__sns-link:hover { background-color: var(--ds-blue-primary); transition: background-color var(--gnb-pill-fade) ease; }
  .gnb:not(:is(:has(.gnb__menu:hover), :has(.gnb__menu :focus-visible))) .gnb__sns .gnb__sns-link:hover { background-color: var(--ds-gray-10); }
  .gnb__sns .gnb__sns-link--facebook { width: calc(48px * var(--spc)); -webkit-mask: url('../assets/images/common/gnb_sns_facebook.svg') center / calc(43px * var(--spc)) calc(43px * var(--spc)) no-repeat; mask: url('../assets/images/common/gnb_sns_facebook.svg') center / calc(43px * var(--spc)) calc(43px * var(--spc)) no-repeat; }
  .gnb__sns .gnb__sns-link--youtube { -webkit-mask: url('../assets/images/common/gnb_sns_youtube.svg') center / calc(30px * var(--spc)) calc(22px * var(--spc)) no-repeat; mask: url('../assets/images/common/gnb_sns_youtube.svg') center / calc(30px * var(--spc)) calc(22px * var(--spc)) no-repeat; }
  .gnb__sns .gnb__sns-link--forum { -webkit-mask: url('../assets/images/common/gnb_sns_forum.svg') center / calc(33px * var(--spc)) calc(30px * var(--spc)) no-repeat; mask: url('../assets/images/common/gnb_sns_forum.svg') center / calc(33px * var(--spc)) calc(30px * var(--spc)) no-repeat; }
  .gnb__sns .gnb__sns-link:focus-visible { outline-color: var(--ds-blue-primary); outline-offset: calc(-4px * var(--spc)); }
  .gnb__start { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: calc(240px * var(--spc)); height: calc(80px * var(--spc)); background: linear-gradient(180deg, #FFFFFF 36.574%, #8F8F8F 117.13%); font-family: var(--font-title); font-weight: 400; font-size: calc(24px * var(--spc)); line-height: 1.2; color: #1A1F38; isolation: isolate; overflow: hidden; transition: filter .2s ease, box-shadow .2s ease; }
  .gnb__start { --gnb-start-sheen: 7s; }
  .gnb__start::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: 60%; background: linear-gradient(105deg, transparent 32%, rgba(26, 31, 56, .05) 42%, rgba(255, 255, 255, .6) 50%, rgba(26, 31, 56, .05) 58%, transparent 68%); transform: translateX(-100%); pointer-events: none; }
  .gnb:where(:has(.gnb__group:not(.gnb__group--main) .is-active)) .gnb__start::after { animation: seal-gnb-start-sheen var(--gnb-start-sheen) cubic-bezier(.45, 0, .25, 1) infinite; }
  .gnb__start:hover, .gnb__start:focus-visible { box-shadow: inset 0 0 calc(16px * var(--spc)) rgba(255, 255, 255, .35); }
  .gnb .gnb__start:is(:hover, :focus-visible)::after { animation: seal-gnb-start-sheen-once .8s cubic-bezier(.45, 0, .25, 1) 1; }
  .gnb__start:active { filter: brightness(.96); }
  @keyframes seal-gnb-start-sheen {
    0% { transform: translateX(-100%); }
    15% { transform: translateX(167%); }
    100% { transform: translateX(167%); }
  }
  @keyframes seal-gnb-start-sheen-once {
    from { transform: translateX(-100%); }
    to { transform: translateX(167%); }
  }
  .gnb__menu { isolation: isolate; top: 0; left: 0; right: 0; height: calc(80px * var(--spc)); padding-left: calc(263px * var(--spc)); flex-direction: row; align-items: flex-start; pointer-events: none; }
  .gnb__group { flex: none; width: calc(160px * var(--spc)); align-items: flex-start; pointer-events: none; }
  .gnb__group--main { display: none; }
  .gnb__menu::before { content: ""; opacity: 0; visibility: hidden; transition: opacity var(--gnb-out) ease var(--gnb-hold), visibility 0s linear calc(var(--gnb-hold) + var(--gnb-out)); position: absolute; z-index: -1; top: calc(80px * var(--spc)); left: 0; right: 0; height: calc(168px * var(--spc)); background: #fff; pointer-events: auto; }
  .gnb__menu:is(:hover, :has(:focus-visible))::before { opacity: 1; visibility: visible; transition: opacity var(--gnb-in) ease, visibility 0s; }
  .gnb__menu-link { pointer-events: auto; color: var(--ds-navy-primary); }
  .gnb__menu-link:focus-visible { outline-color: var(--ds-blue-primary); outline-offset: calc(-4px * var(--spc)); }
  .gnb__menu-dot, .gnb__menu-ext { display: none; }
  .gnb__menu-link--d1 { position: relative; color: var(--gnb-fg); justify-content: center; width: 100%; height: calc(80px * var(--spc)); font-family: var(--font-title); font-weight: 400; font-size: calc(18px * var(--spc)); line-height: 1.4; letter-spacing: .05em; transition: color var(--gnb-out) ease var(--gnb-hold); }
  .gnb:is(:has(.gnb__menu:hover), :has(.gnb__menu :focus-visible)) .gnb__menu-link--d1 { transition: color var(--gnb-in) ease; }
  .gnb__menu-link--d1::before { content: ""; position: absolute; left: 50%; bottom: 0; width: calc(96px * var(--spc)); height: calc(4px * var(--spc)); transform: translateX(-50%); background: var(--ds-blue-primary); opacity: 0; pointer-events: none; transition: opacity var(--gnb-pill-fade) ease; }
  .gnb__menu-link--d1:hover::before, .gnb__menu-link--d1:focus-visible::before, .gnb__menu-link--d1.is-active::before, .gnb__group:has(.gnb__menu-link--d2.is-active) > .gnb__menu-link--d1::before { opacity: 1; }
  .gnb__menu-link--d2 { opacity: 0; visibility: hidden; transition: color var(--gnb-pill-fade) ease, opacity var(--gnb-out) ease var(--gnb-hold), visibility 0s linear calc(var(--gnb-hold) + var(--gnb-out)); gap: calc(8px * var(--spc)); height: calc(40px * var(--spc)); padding-left: var(--gnb-d2-x); font-weight: 400; font-size: calc(14px * var(--spc)); line-height: 1.4; }
  .gnb__menu-link--d1 + .gnb__menu-link--d2 { margin-top: calc(24px * var(--spc)); }
  .gnb__menu:is(:hover, :has(:focus-visible)) .gnb__menu-link--d2 { opacity: 1; visibility: visible; transition: color var(--gnb-pill-fade) ease, opacity var(--gnb-in) ease, visibility 0s; }
  .gnb__menu-link--d2:hover, .gnb__menu-link--d2:focus-visible { color: var(--ds-blue-primary); }
  .gnb__group:nth-child(3) { --gnb-d2-x: calc(53px * var(--spc)); }
  .gnb__group:nth-child(4), .gnb__group:nth-child(5) { --gnb-d2-x: calc(44px * var(--spc)); }
  .gnb__menu-link--d2:has(.gnb__menu-ext)::after { content: ""; flex: none; width: calc(12px * var(--spc)); height: calc(12px * var(--spc)); background: currentColor; -webkit-mask: url('../assets/images/common/ic_external_sm.svg') center / contain no-repeat; mask: url('../assets/images/common/ic_external_sm.svg') center / contain no-repeat; }
}
@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; }
.footer__rate-btn { display: block; text-align: inherit; }
.rate-card { background: #151B28; }
.rate-table { display: grid; font-family: var(--font-body); font-weight: 400; line-height: 1.6; text-align: left; }
.rate-table dt, .rate-table dd { box-sizing: content-box; display: flex; align-items: center; background: #78283B; }
.rate-table dt { color: #C6CBD2; }
.rate-table dd { color: #DFE2E7; }
.rate-table dd::before { content: ""; flex: none; width: 1px; border-radius: 100px; background: #151B28; }
.rate-icons { display: flex; }
.rate-icon { flex: none; display: block; }
@media (min-width: 1024px) {
  .footer__links { position: relative; }
  .footer__rate-panel { position: absolute; right: 0; bottom: 100%; z-index: 800; padding-bottom: calc(8px * var(--spc)); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
  .footer__links:has(.footer__rate-btn:hover, .footer__rate-panel:hover) .footer__rate-panel, .footer__links:has(.footer__rate-btn:focus-visible) .footer__rate-panel { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
  .rate-card { display: flex; align-items: center; gap: calc(4px * var(--spc)); width: calc(664px * var(--spc)); padding: calc(8px * var(--spc)); }
  .rate-table { grid-template-columns: calc(93px * var(--spc)) calc(159px * var(--spc)) calc(93px * var(--spc)) calc(159px * var(--spc)); font-size: calc(12px * var(--spc)); }
  .rate-table dt, .rate-table dd { height: calc(26px * var(--spc)); }
  .rate-table dt { padding-left: calc(8px * var(--spc)); }
  .rate-table dd { gap: calc(8px * var(--spc)); }
  .rate-table dd::before { height: calc(16px * var(--spc)); }
  .rate-table > :nth-child(-n+8) { border-bottom: 1px solid #151B28; }
  .rate-table > :nth-child(4n+2) { border-right: 1px solid #151B28; }
  .rate-table > :nth-child(1) { border-top-left-radius: calc(4px * var(--spc)); }
  .rate-table > :nth-child(4) { border-top-right-radius: calc(4px * var(--spc)); }
  .rate-table > :nth-child(9) { border-bottom-left-radius: calc(4px * var(--spc)); }
  .rate-table > :nth-child(12) { border-bottom-right-radius: calc(4px * var(--spc)); }
  .rate-icons { gap: calc(4px * var(--spc)); }
  .rate-icon { width: calc(68px * var(--spc)); height: calc(80px * var(--spc)); }
}
.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: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; line-height: 1.4; 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; }
.spec-mo { display: none; }
.spec-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.spec-table th, .spec-table td { height: calc(48px * var(--spc)); padding: 0 calc(10px * var(--spc)); border-right: 1px solid #fff; border-bottom: 1px solid #fff; text-align: center; vertical-align: middle; }
.spec-table th { font-family: var(--font-title); font-weight: 400; font-size: calc(16px * var(--spc)); line-height: 1.4; color: #F8FAFC; background: #242B51; }
.spec-table td { font-family: var(--font-body); font-weight: 400; font-size: calc(15px * var(--spc)); line-height: 1.5; color: #1a1f38; background: #DFE2E7; }
.spec-table thead th { background: #33408B; }
.spec-table__os { display: inline-flex; align-items: center; gap: calc(8px * var(--spc)); }
.spec-table__os img { width: calc(16px * var(--spc)); height: calc(16px * var(--spc)); }
.spec-table--pc thead th:nth-child(1) { width: 16.667%; }
.spec-table--pc thead th:nth-child(n+2) { width: 27.778%; }
.spec-table--mo th:last-child, .spec-table--mo td:last-child { border-right: 0; }
.spec-table tbody tr:last-child > * { border-bottom: 0; }
.spec-table thead tr:first-child th:first-child { border-top-left-radius: calc(12px * var(--spc)); }
.spec-table thead tr:first-child th:last-child { border-top-right-radius: calc(12px * var(--spc)); }
.spec-table--pc tbody tr:last-child th:first-child { border-bottom-left-radius: calc(12px * var(--spc)); }
.spec-table--pc tbody tr:last-child td:last-child { border-bottom-right-radius: calc(12px * var(--spc)); }
.popup__body > * + * { margin-top: calc(24px * var(--spc)); }
.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)); }
.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; }
}
.popup { font-family: var(--font-body); box-shadow: var(--ds-shadow-600); }
#class .hero-title, #feature .hero-title, #world .hero-title, #media .hero-title { font-family: var(--font-title); font-weight: 400; letter-spacing: 0; }