/* 공식 웹 쉘. 버튼 상태는 common.css의 btn--web을 쓴다. */

.web {
  background: var(--web-bg);
  color: var(--color-text);
}

.web-inner {
  width: min(1920px, 100%);
  margin-inline: auto;
  padding-inline: max(40px, calc((100% - 1440px) / 2));
}

.web-header {
  height: var(--web-header-height);
  background: var(--web-header-bg);
  border-bottom: 1px solid var(--web-header-line);
  color: #ffffff;
}

body.light .web-header,
#wrapper.light .web-header {
  color: var(--color-text);
}

.web-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  min-width: 0;
}

.web-header .wordmark--web {
  color: #ffffff;
}

body.light .web-header .wordmark--web,
#wrapper.light .web-header .wordmark--web {
  color: var(--web-strong);
}

.web-gnb {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.web-gnb a,
.web-gnb button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-button);
  color: inherit;
  font-size: 16px;
  line-height: 26px;
  text-decoration: none;
  white-space: nowrap;
}

.web-gnb a:hover,
.web-gnb button:hover,
.web-gnb a[aria-current="page"] {
  color: var(--color-primary-text);
}

.web-gnb a:focus-visible,
.web-gnb button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.web-header__side {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.web-login {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  color: inherit;
  font-size: 16px;
  line-height: 26px;
  text-decoration: none;
  white-space: nowrap;
}

.web .btn--web.btn--text {
  color: var(--color-text);
}

.web-login:hover,
.web-text-link:hover,
.web-footer a:hover,
.web-menu a:hover,
.web-product a:hover,
.web-list a:hover {
  color: var(--color-primary-text);
}

.web-login:focus-visible,
.web-text-link:focus-visible,
.web-footer a:focus-visible,
.web-menu a:focus-visible,
.web-product a:focus-visible,
.web-list a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.web-demo-flag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-button);
  background: var(--color-env-bg);
  color: var(--color-env-text);
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--weight-semibold);
}

.web-burger {
  display: none;
}

.web-product {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.web-product__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-height: 64px;
  padding-block: 12px;
}

.web-product__label {
  font-size: 14px;
  line-height: 22px;
  color: var(--color-muted);
}

.web-product__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.web-product a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.web-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--web-bg);
  color: var(--color-text);
  overflow: auto;
}

.web-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}

.web-menu .wordmark--web {
  color: var(--color-text);
}

.web-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
  font-size: 16px;
  line-height: 26px;
  text-decoration: none;
}

.web-menu__group {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  border-top: 1px solid var(--color-line);
}

body.is-menu-open {
  overflow: hidden;
}

.web-main {
  padding-bottom: 64px;
}

.web-section {
  padding-block: 48px;
}

.web-section + .web-section {
  padding-top: 0;
}

.web-hero {
  padding-top: 32px;
}

.web-hero__title {
  font-size: 44px;
  line-height: 58px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
}

.web-title {
  font-size: 26px;
  line-height: 36px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}

.web-lead {
  max-width: 640px;
  margin-top: 12px;
  color: var(--color-copy);
  font-size: 16px;
  line-height: 26px;
}

.web-note {
  margin-top: 8px;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 22px;
}

.web-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 32px;
  align-items: start;
}

.web-split__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.web-split__copy .web-lead,
.web-split__copy .web-note {
  margin-top: 0;
}

.web-split__demo {
  min-width: 0;
}

.web-split__demo .demo-site {
  max-width: none;
}

.web-split__demo .demo-site__canvas img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: top;
}

.web-promise,
.web-card,
.web-receipt {
  width: 100%;
  padding: 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-card);
}

.web-kicker,
.web-card__label {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 22px;
}

.web-key,
.web-card__value {
  color: var(--color-text);
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--weight-semibold);
}

.web-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.web-section__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.web-section h2,
.web-page h2 {
  font-size: 24px;
  line-height: 34px;
  font-weight: var(--weight-semibold);
}

.web-section h3,
.web-card h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--weight-semibold);
}

.web-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.web-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.web-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.web-card p,
.web-card li,
.web-prose {
  color: var(--color-copy);
  font-size: 16px;
  line-height: 26px;
}

.web-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.web-list a,
.web-text-link {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.web-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.web-steps li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  padding: 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-card);
}

.web-steps strong {
  font-size: 16px;
  line-height: 26px;
}

.web-steps span {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 22px;
}

.web-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-tabs button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.web-tabs button:hover,
.web-tabs button[aria-selected="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

.web-tabs button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.web-tabs + .web-grid {
  margin-top: 16px;
}

.web-table-wrap {
  overflow: auto;
}

.web-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 26px;
}

.web-table th,
.web-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.web-table th {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--weight-semibold);
}

.web-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
}

.web-page > .web-inner,
.web-page form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.web-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.web-page__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.web-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 544px;
}

.web-form .field--web {
  max-width: none;
}

.web-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text);
  font-size: 16px;
  line-height: 26px;
}

.web-check input {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  accent-color: var(--color-primary);
}

.web-receipt[hidden] {
  display: none !important;
}

.web-receipt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.web-footer {
  border-top: 1px solid var(--color-line);
  padding-block: 32px 48px;
}

.web-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.web-footer .wordmark--web {
  color: var(--color-text);
}

.web-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.web-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-copy);
  text-decoration: none;
}

.web-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.web-footer__note {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 22px;
}

.web-legal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
}

.web-legal h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--weight-semibold);
}

.web-legal p,
.web-legal li {
  color: var(--color-copy);
  font-size: 16px;
  line-height: 26px;
}

.web-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: calc(100vh - 68px - 220px);
  padding: 48px 20px;
  text-align: center;
}

.web-status .web-lead {
  margin-top: 0;
}

.web-section .faq-row,
.web-section .feature-row {
  max-width: none;
}

@media (max-width: 1100px) {
  .web-grid--4,
  .web-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .web-header__inner {
    gap: 8px;
  }

  .web-gnb a,
  .web-gnb button,
  .web-login {
    padding-inline: 6px;
  }
}

@media (max-width: 767px) {
  .web-inner {
    padding-inline: 20px;
  }

  .web-gnb {
    display: none;
  }

  .web-burger {
    display: inline-flex;
  }

  .web-header__cta:not(.btn--primary) {
    display: none;
  }

  .web--dock {
    padding-bottom: 68px;
  }

  .web--dock .web-header .btn--primary {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 35;
    border-radius: 0;
  }

  .web-hero__title {
    font-size: 32px;
    line-height: 42px;
  }

  .web-split,
  .web-grid,
  .web-grid--2,
  .web-grid--4,
  .web-steps {
    grid-template-columns: 1fr;
  }

  .web-page__head {
    flex-direction: column;
  }

  .web-page__head .btn {
    width: 100%;
  }

  .web-section h2,
  .web-page h2 {
    font-size: 20px;
    line-height: 28px;
  }
}

/* =========================================================
   공식 웹 컴포넌트 · 피그마 04 웹 서비스 화면 267:7797
   반응형은 화면 폭이 아니라 컨테이너 폭(767px 이하 모바일)을 따른다.
   컨테이너는 .w-header, .w-main, .w-footer, .w-stage이고,
   이 안에서는 position: fixed가 컨테이너 기준이 되므로 덮개(전체 메뉴)는 밖에 둔다.
   ========================================================= */
:root {
  --w-bg: #080808;
  --w-surface: #171717;
  --w-band: #272727;
  --w-raised: #333333;
  --w-line: #333333;
  --w-card-line: rgba(255, 255, 255, 0.14);
  --w-card-line-hover: rgba(255, 255, 255, 0.36);
  --w-text: #ffffff;
  --w-muted: #b5b5b5;
  --w-soft: #cccccc;
  --w-accent-text: #a8caff;
  --w-primary: #146ef5;
  --w-on-primary: #ffffff;
  --w-light-btn: #ffffff;
  --w-light-btn-line: #dde1e6;
  --w-on-light: #111317;
  --w-panel: #22252a;
  --w-panel-text: #d6dde8;
  --w-panel-accent: #93bdff;
  --w-info: #559df5;
  --w-on-info: #10243d;
  --w-deep: #0c2c65;
  --w-violet: #211235;
  --w-dot: #ffffff;
  --w-radius-btn: 4px;
  --w-radius-card: 8px;
  --w-radius-pill: 24px;
  --w-inner: 1440px;
  --w-gutter: 40px;
  --w-gutter-mobile: 20px;
  --w-header-h: 68px;
  --w-section-y: 80px;
  --w-section-y-mobile: 48px;
  --w-motion: 160ms;

  /* 임시값 · 피그마에 상태 프레임이 없어 같은 계열로 보완 */
  --w-primary-hover: #0f60dc;
  --w-primary-active: #0b51bd;
  --w-light-btn-hover: #eceef1;
  --w-light-btn-active: #dde1e6;
  --w-row-hover: rgba(255, 255, 255, 0.04);
  --w-focus: #93bdff;
  --w-danger-text: #ff8a80;
  --w-input-hover: #ffffff;
}

body.light,
#wrapper.light {
  --w-bg: #ffffff;
  --w-surface: #f5f6f8;
  --w-band: #eef0f3;
  --w-raised: #e3e6ea;
  --w-line: #dde1e6;
  --w-card-line: rgba(17, 19, 23, 0.12);
  --w-card-line-hover: rgba(17, 19, 23, 0.36);
  --w-text: #111317;
  --w-muted: #555c66;
  --w-soft: #3f4650;
  --w-accent-text: #1d4ed8;
  --w-panel: #eef2f8;
  --w-panel-text: #2b3440;
  --w-panel-accent: #146ef5;
  --w-deep: #dbe7fb;
  --w-violet: #ece4f7;
  --w-dot: #111317;
  --w-row-hover: rgba(17, 19, 23, 0.04);
  --w-focus: #146ef5;
  --w-danger-text: #c62828;
  --w-input-hover: #111317;
}

.w-header,
.w-main,
.w-footer,
.w-stage {
  container-type: inline-size;
}

.w-main,
.w-footer,
.w-stage {
  background: var(--w-bg);
  color: var(--w-text);
}

.w-inner {
  width: 100%;
  max-width: calc(var(--w-inner) + var(--w-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--w-gutter);
}

.w-main :focus-visible,
.w-header :focus-visible,
.w-footer :focus-visible,
.w-stage :focus-visible {
  outline: 2px solid var(--w-focus);
  outline-offset: 2px;
}

/* 글자 */
.w-display,
.w-title,
.w-subtitle,
.w-scene,
.w-h3,
.w-kicker {
  margin: 0;
  font-weight: 600;
  color: var(--w-text);
  word-break: keep-all;
}

.w-display {
  font-size: 80px;
  line-height: 88px;
  letter-spacing: -0.8px;
}

.w-title {
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -0.56px;
}

.w-subtitle {
  font-size: 40px;
  line-height: 48px;
}

.w-scene {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.42px;
}

.w-h3 {
  font-size: 20px;
  line-height: 28px;
}

.w-kicker {
  font-size: 18px;
  line-height: 26px;
  color: var(--w-muted);
}

.w-lead,
.w-body,
.w-label,
.w-note,
.w-caption {
  margin: 0;
  word-break: keep-all;
}

.w-lead {
  font-size: 20px;
  line-height: 30px;
  color: var(--w-muted);
}

.w-body {
  font-size: 18px;
  line-height: 28px;
  color: var(--w-muted);
}

.w-label {
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
}

.w-note {
  font-size: 14px;
  line-height: 22px;
  color: var(--w-text);
  opacity: 0.72;
}

.w-caption {
  font-size: 13px;
  line-height: 20px;
  color: var(--w-muted);
}

.w-text-strong {
  color: var(--w-text);
}

.w-num {
  font-variant-numeric: tabular-nums;
}

/* 워드마크 */
.w-wordmark {
  flex: none;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.48px;
  color: var(--w-text);
  text-decoration: none;
  transition: opacity var(--w-motion) ease;
}

a.w-wordmark:hover {
  opacity: 0.72;
}

/* 버튼 */
.w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--w-radius-btn);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--w-motion) ease, border-color var(--w-motion) ease, color var(--w-motion) ease;
}

.w-btn--primary {
  background: var(--w-primary);
  border-color: var(--w-primary);
  color: var(--w-on-primary);
}

.w-btn--primary:hover,
.w-btn--primary.is-hover {
  background: var(--w-primary-hover);
  border-color: var(--w-primary-hover);
}

.w-btn--primary:active,
.w-btn--primary.is-active {
  background: var(--w-primary-active);
  border-color: var(--w-primary-active);
}

.w-btn--secondary {
  background: var(--w-light-btn);
  border-color: var(--w-light-btn-line);
  color: var(--w-on-light);
}

.w-btn--secondary:hover,
.w-btn--secondary.is-hover {
  background: var(--w-light-btn-hover);
}

.w-btn--secondary:active,
.w-btn--secondary.is-active {
  background: var(--w-light-btn-active);
}

.w-btn.is-focus {
  outline: 2px solid var(--w-focus);
  outline-offset: 2px;
}

.w-btn:disabled,
.w-btn[aria-disabled="true"] {
  background: var(--w-raised);
  border-color: var(--w-raised);
  color: var(--w-muted);
  cursor: default;
}

.w-btn--cta {
  width: 196px;
}

.w-btn--block {
  width: 100%;
}

.w-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--w-text);
  text-decoration: none;
  text-underline-offset: 6px;
  white-space: nowrap;
}

.w-link::after {
  content: "→";
  transition: transform var(--w-motion) ease;
}

.w-link--plain::after {
  content: none;
}

.w-link:hover,
.w-link.is-hover {
  text-decoration: underline;
}

.w-link:hover::after,
.w-link.is-hover::after {
  transform: translateX(4px);
}

.w-link.is-focus {
  outline: 2px solid var(--w-focus);
  outline-offset: 2px;
}

.w-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.w-actions--tight {
  gap: 16px;
}

.w-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--w-light-btn);
  color: var(--w-on-light);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  transition: background-color var(--w-motion) ease;
}

.w-round:hover,
.w-round.is-hover {
  background: var(--w-light-btn-hover);
}

.w-round:disabled {
  opacity: 0.4;
  cursor: default;
}

body.light .w-round {
  background: var(--w-on-light);
  color: #ffffff;
}

.w-plus {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #333333;
  color: #ffffff;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  transition: background-color var(--w-motion) ease;
}

.w-plus:hover,
.w-plus.is-hover {
  background: #4a4a4a;
}

/* 분류 칩 */
.w-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.w-chip {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-btn);
  background: var(--w-surface);
  color: var(--w-muted);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--w-motion) ease, color var(--w-motion) ease, background-color var(--w-motion) ease;
}

.w-chip:hover,
.w-chip.is-hover {
  border-color: var(--w-card-line-hover);
  color: var(--w-text);
}

.w-chip[aria-pressed="true"],
.w-chip[aria-current="page"],
.w-chip[aria-selected="true"] {
  border-color: var(--w-primary);
  background: var(--w-primary);
  color: var(--w-on-primary);
}

/* 배지 */
.w-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
}

.w-badge--info {
  background: var(--w-info);
  color: var(--w-on-info);
}

.w-badge--info::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(currentColor, currentColor) center 4px / 1.5px 5px no-repeat;
}

/* 헤더 */
.w-header {
  position: relative;
  z-index: 20;
  background: var(--w-bg);
  color: var(--w-text);
  box-shadow: inset 0 -1px 0 var(--w-line);
}

/* 페이지 헤더 고정 · 아래로 스크롤하면 위로 숨고, 위로 스크롤하면 다시 내려온다(web.js).
   숨김 여부는 html의 --w-header-offset(보이면 헤더 높이, 숨으면 0)으로 sticky 목차에 넘긴다. */
:root {
  --w-header-offset: var(--w-header-h);
  --w-header-motion: 240ms;
}

#wrapper > .w-header {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: transform var(--w-header-motion) cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

#wrapper > .w-header.is-hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  #wrapper > .w-header {
    transition: none;
  }
}

.w-header__bar {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--w-header-h);
}

.w-gnb > ul {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w-gnb > ul > li {
  position: relative;
}

.w-gnb__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--w-text);
  text-decoration: none;
  text-underline-offset: 6px;
  white-space: nowrap;
}

.w-gnb__link:hover,
.w-gnb__link.is-hover,
.w-gnb__link[aria-current="page"] {
  text-decoration: underline;
}

/* 하위 메뉴가 있는 1뎁스 · 화살표는 글자 밖 absolute라 밑줄이 걸리지 않고, 회전해도 기준선이 튀지 않는다 */
.w-gnb__link:has(.w-gnb__caret) {
  position: relative;
  padding-right: 22px;
}

.w-gnb__caret {
  position: absolute;
  top: 50%;
  right: 0;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: currentColor;
  -webkit-mask: url("../img/common/icon-svg/ico_gnb_depth_arrow.svg") center / 16px 16px no-repeat;
  mask: url("../img/common/icon-svg/ico_gnb_depth_arrow.svg") center / 16px 16px no-repeat;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform var(--w-motion) ease;
}

.w-gnb__link[aria-expanded="true"] .w-gnb__caret {
  transform: rotate(180deg);
}

.w-header__login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--w-text);
  text-decoration: none;
  text-underline-offset: 6px;
}

.w-header__login:hover {
  text-decoration: underline;
}

/* 제품 메뉴 · 피그마 프레임 없음, 같은 토큰으로 구성
   PC는 '제품' hover·포커스로 열린다(web.js가 li에 is-open). 헤더 아래 선에서 8px 띄워 연다. */
.w-dropdown {
  position: absolute;
  top: calc(100% + 20px);
  left: -25px;
  width: 320px;
  padding: 8px;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-card);
  background: var(--w-surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.16);
  text-align: left;
}

body.light .w-dropdown,
#wrapper.light .w-dropdown {
  background: var(--w-bg);
  box-shadow: 0 16px 40px rgba(17, 19, 23, 0.12), 0 2px 8px rgba(17, 19, 23, 0.06);
}

/* 버튼과 패널 사이 20px 간격을 덮어 마우스가 지나가도 닫히지 않게 한다 */
.w-dropdown::before {
  content: "";
  position: absolute;
  inset: -21px 0 auto;
  height: 21px;
}

.w-gnb .w-dropdown {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.w-gnb .is-open > .w-dropdown {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .w-gnb .w-dropdown,
  .w-gnb .is-open > .w-dropdown {
    transform: none;
    transition: none;
  }
}

.w-dropdown--static {
  position: static;
}

.w-dropdown--static::before {
  display: none;
}

.w-dropdown ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w-dropdown li {
  display: block;
}

.w-dropdown a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--w-radius-btn);
  color: var(--w-text);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--w-motion) ease;
}

.w-dropdown a:hover,
.w-dropdown a.is-hover,
.w-dropdown a:focus-visible {
  background: var(--w-band);
}

.w-dropdown a:focus-visible {
  outline-offset: -2px;
}

.w-dropdown strong {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.w-dropdown span {
  font-size: 14px;
  line-height: 22px;
  color: var(--w-muted);
}

/* 목록 레이어 공용 틀 · m05 · m06의 안내 목록과 선택 레이어가 쓴다.
   모바일 전체 메뉴는 파일 끝 '모바일 전체 메뉴 · 참조 원본 sitemap'으로 바뀌었다. */
.w-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 16px var(--w-gutter-mobile) 32px;
}

.w-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--w-line);
}

.w-menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 16px 0;
  border-bottom: 1px solid var(--w-line);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--w-text);
  text-decoration: none;
}

.w-menu__list a::after {
  content: "→";
  color: var(--w-muted);
  transition: transform var(--w-motion) ease;
}

.w-menu__list a:hover::after {
  transform: translateX(4px);
}

.w-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 섹션 */
.w-section {
  padding-block: var(--w-section-y);
  background: var(--w-bg);
}

.w-section--band {
  background: var(--w-band);
}

.w-section--band .w-body {
  color: var(--w-soft);
}

.w-stack {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.w-head {
  display: grid;
  grid-template-columns: minmax(0, 720fr) minmax(0, 648fr);
  gap: 72px;
}

.w-head__title {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.w-head__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 48px;
}

.w-head--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.w-pagehead {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: var(--w-section-y);
}

.w-pagehead .w-lead {
  max-width: 1120px;
}

/* 히어로 */
.w-hero {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: var(--w-section-y);
}

.w-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 458fr) minmax(0, 949fr);
  gap: 32px;
}

.w-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.w-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.w-hero__text {
  max-width: 752px;
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--w-text);
}

.w-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius-pill);
  background: var(--w-bg);
  color: var(--w-text);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color var(--w-motion) ease;
}

.w-pill:hover,
.w-pill.is-hover {
  border-color: var(--w-muted);
}

.w-pill .ico {
  --icon-size: 20px;
}

.w-media-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* 미디어 카드 */
.w-media {
  position: relative;
  aspect-ratio: 458.67 / 611.92;
  overflow: hidden;
  border-radius: var(--w-radius-card);
  background: #080808;
  color: #ffffff;
  isolation: isolate;
}

.w-media--blue {
  background: radial-gradient(55.55% 62.5% at 27.78% 35%, #0b4db8 0%, #093682 25%, #082a67 37.5%, #061f4d 50%, #041129 75%, #020a18 87.5%, #010306 100%);
}

.w-media--violet {
  background: radial-gradient(50% 50% at 85% 80%, #5c2999 0%, #391963 27.5%, #281149 41.25%, #17092e 55%, #0b0417 77.5%, #06020b 88.75%, #000000 100%);
}

.w-media__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w-media__scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 458.67px;
  height: 611.92px;
  transform: scale(var(--w-media-scale, 1));
  transform-origin: top left;
  pointer-events: none;
}

.w-media__layer {
  position: absolute;
}

.w-media__fade {
  position: absolute;
  inset: auto 0 0;
  height: 70%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 4%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.7) 100%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000000 45%);
  mask-image: linear-gradient(180deg, transparent 0%, #000000 45%);
}

.w-media__foot {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 24px;
}

.w-media__title {
  flex: 1;
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}

.w-media-site {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 370px;
  height: 400px;
  padding: 24px;
  background: #ffffff;
  color: #111317;
}

.w-media-site__name {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.w-media-site__title {
  margin: 0;
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: -1.12px;
}

.w-media-site__text {
  margin: 0;
  color: #3b4048;
}

.w-media-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 340px;
  height: 330px;
  padding: 20px;
  border: 1px solid #333333;
  background: #211235;
}

.w-media-preview__page {
  height: 230px;
  padding: 20px;
  background: #080808;
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: -0.32px;
}

.w-media__cursor {
  --icon-size: 40px;
  color: #ffffff;
}

/* 선택 요소 카드 */
.w-pick {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--w-radius-card);
  background: #22252a;
  color: #ffffff;
}

.w-pick__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.w-pick__head .w-h3 {
  flex: 1;
  color: #ffffff;
}

.w-pick__body {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: #d6dde8;
}

.w-pick--request {
  border-left: 3.5px solid #93bdff;
}

/* 카드 */
.w-grid {
  display: grid;
  gap: 24px;
}

.w-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.w-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.w-grid--gap-32 {
  gap: 32px;
}

.w-grid--gap-48 {
  gap: 48px;
}

.w-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-card);
  background: var(--w-surface);
  color: var(--w-text);
}

.w-card__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.w-card__spacer {
  flex: 1;
}

.w-card--work {
  min-height: 348px;
}

.w-card--status {
  min-height: 308px;
}

a.w-card {
  text-decoration: none;
  transition: border-color var(--w-motion) ease, background-color var(--w-motion) ease;
}

a.w-card:hover,
a.w-card.is-hover {
  border-color: var(--w-card-line-hover);
}

.w-example {
  display: flex;
  align-items: center;
  min-height: 104px;
  padding: 20px;
  border-radius: var(--w-radius-btn);
  background: var(--w-bg);
  font-size: 18px;
  line-height: 28px;
  color: var(--w-text);
}

.w-statusbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 16px;
  border-radius: var(--w-radius-btn);
  background: var(--w-bg);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--w-text);
}

.w-statusbar .ico {
  --icon-size: 24px;
}

.w-pairs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.w-pairs > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.w-pairs dt {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--w-text);
}

.w-pairs dd {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--w-muted);
}

.w-card__value {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  color: var(--w-text);
}

/* 원칙 카드 */
.w-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

.w-principle {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.w-principle__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  padding: 32px;
  border-radius: var(--w-radius-card);
  background: var(--w-raised);
}

.w-principle__brand {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--w-accent-text);
}

.w-principle__value {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  color: var(--w-text);
}

/* 안내 상자 */
.w-notice {
  padding: 24px;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-card);
  background: var(--w-surface);
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
}

.w-notice > * + * {
  margin-top: 8px;
}

.w-notice--inner {
  border-radius: var(--w-radius-btn);
  background: var(--w-bg);
}

/* 변경 전후 */
.w-compare {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-btn);
  background: var(--w-bg);
}

.w-compare__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.w-compare__label {
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
}

.w-compare__value {
  font-size: 20px;
  line-height: 28px;
  color: var(--w-text);
}

.w-compare__row--before .w-compare__value {
  color: var(--w-muted);
}

.w-compare hr {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--w-line);
}

/* 아코디언 */
.w-accordion {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 480px;
}

.w-accordion__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--w-line);
}

.w-accordion__item {
  border-bottom: 1px solid var(--w-line);
}

.w-accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--w-text);
  text-align: left;
  transition: color var(--w-motion) ease;
}

.w-accordion__btn:hover,
.w-accordion__btn.is-hover {
  color: var(--w-muted);
}

.w-accordion__panel {
  margin: -12px 0 0;
  padding-bottom: 24px;
  font-size: 18px;
  line-height: 28px;
  color: var(--w-muted);
}

.w-split {
  display: grid;
  grid-template-columns: minmax(0, 480fr) minmax(0, 880fr);
  gap: 80px;
  align-items: start;
}

.w-panel-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 672px;
  padding: 48px;
  overflow: hidden;
  border-radius: var(--w-radius-card);
  background: #0c2c65;
}

.w-panel-media--dark {
  background: #171717;
}

/* 자주 묻는 질문 */
.w-faq {
  display: grid;
  grid-template-columns: minmax(0, 464fr) minmax(0, 904fr);
  gap: 72px;
}

.w-faq__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--w-line);
}

.w-faq__item {
  border-bottom: 1px solid var(--w-line);
}

.w-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--w-text);
  text-align: left;
  transition: color var(--w-motion) ease;
}

.w-faq__q:hover,
.w-faq__q.is-hover {
  color: var(--w-muted);
}

.w-faq__icon {
  flex: none;
  font-size: 24px;
  line-height: 34px;
  font-weight: 400;
  transition: transform 0.35s cubic-bezier(0.5, 1, 0.89, 1);
}

.w-faq__icon::before {
  content: "+";
}

.w-faq__q[aria-expanded="true"] .w-faq__icon::before {
  content: "−";
}

/* 펼침 · 아이콘은 답 높이 모션(GSAP 0.35s power2.out)과 같은 시간에 반 바퀴 돈다 */
.w-faq__q[aria-expanded="true"] .w-faq__icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .w-faq__icon {
    transition: none;
  }
}

.w-faq__a {
  margin: -12px 0 0;
  padding-bottom: 24px;
  font-size: 18px;
  line-height: 28px;
  color: var(--w-muted);
}

.w-faq--inline .w-faq__q {
  justify-content: flex-start;
  gap: 20px;
}

/* 입력 */
.w-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.w-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.w-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.w-field__label {
  font-size: 16px;
  line-height: 24px;
  color: var(--w-text);
}

.w-field__label em {
  font-style: normal;
  color: var(--w-muted);
}

.w-input {
  width: 100%;
  height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--w-muted);
  border-radius: var(--w-radius-btn);
  background: var(--w-bg);
  color: var(--w-text);
  font-size: 18px;
  line-height: 28px;
  transition: border-color var(--w-motion) ease, box-shadow var(--w-motion) ease;
}

.w-input::placeholder {
  color: var(--w-muted);
  opacity: 1;
}

.w-input:hover,
.w-input.is-hover {
  border-color: var(--w-input-hover);
}

.w-input:focus,
.w-input.is-focus {
  outline: none;
  border-color: var(--w-primary);
  box-shadow: 0 0 0 1px var(--w-primary);
}

.w-input[aria-invalid="true"] {
  border-color: var(--w-danger-text);
}

.w-input:disabled {
  border-color: var(--w-line);
  background: var(--w-surface);
  color: var(--w-muted);
  cursor: not-allowed;
}

textarea.w-input {
  height: 120px;
  padding: 16px 16px 12px;
  resize: vertical;
}

.w-select {
  position: relative;
}

.w-select select {
  padding-right: 48px;
  appearance: none;
  cursor: pointer;
}

.w-select::after {
  content: "▾";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--w-text);
  pointer-events: none;
}

.w-field__help {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--w-muted);
}

.w-field__error {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--w-danger-text);
}

.w-field__error::before {
  content: "! ";
  font-weight: 700;
}

.w-password {
  position: relative;
}

.w-password .w-input {
  padding-right: 120px;
}

.w-password__toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--w-radius-btn);
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
  transition: color var(--w-motion) ease, background-color var(--w-motion) ease;
}

.w-password__toggle:hover {
  color: var(--w-text);
  background: var(--w-row-hover);
}

.w-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
  cursor: pointer;
}

.w-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--w-muted);
  border-radius: 4px;
  background: var(--w-bg) center / 14px 14px no-repeat;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--w-motion) ease, background-color var(--w-motion) ease;
}

.w-check:hover input {
  border-color: var(--w-input-hover);
}

.w-check input:checked {
  border-color: var(--w-primary);
  background-color: var(--w-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4'/%3E%3C/svg%3E");
}

.w-check input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 스위치 */
.w-switch {
  position: relative;
  flex: none;
  width: 64px;
  height: 32px;
  margin: 0;
  border-radius: 16px;
  background: #4a4a4a;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--w-motion) ease;
}

.w-switch::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform var(--w-motion) ease;
}

.w-switch:checked {
  background: var(--w-primary);
}

.w-switch:checked::before {
  transform: translateX(32px);
}

.w-switch:disabled {
  cursor: default;
  opacity: 0.6;
}

body.light .w-switch:not(:checked) {
  background: #b8bdc5;
}

.w-setting {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-card);
  background: var(--w-surface);
}

.w-setting__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.w-setting__state {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  width: 200px;
}

.w-setting__state strong {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--w-text);
}

.w-setting__state span {
  grid-column: 1;
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
}

.w-setting__state .w-switch {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* 인증 */
.w-auth {
  display: grid;
  grid-template-columns: minmax(0, 640fr) minmax(0, 640fr);
  gap: 160px;
  align-items: start;
  padding-block: var(--w-section-y);
}

.w-auth__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.w-auth__intro hr {
  width: 100%;
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--w-line);
}

.w-auth-card {
  gap: 24px;
  padding: 48px;
}

.w-auth-card__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--w-line);
}

.w-auth-card__inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* 인증 · 계정 폼형 확장 (M24·M25·M27·M28·M35) */
.w-auth--center {
  align-items: center;
}

.w-auth__more {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.w-auth-card__inline--start {
  justify-content: flex-start;
  gap: 4px 12px;
}

.w-auth-card__links--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.w-auth-card__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--w-line);
}

.w-auth-card__group .w-check a {
  color: var(--w-text);
  text-underline-offset: 4px;
}

.w-auth-card__group .w-check a:hover {
  text-decoration-thickness: 2px;
}

.w-auth-card__sep {
  color: var(--w-muted);
}

.w-password__toggle--line {
  position: static;
  align-self: flex-start;
  height: auto;
  min-height: 24px;
  padding: 0;
  text-underline-offset: 4px;
}

.w-password__toggle--line:hover {
  background: none;
  text-decoration: underline;
}

.w-footer.w-footer--policy {
  box-shadow: none;
}

/* 라벨 · 값 목록 */
.w-kv {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.w-kv__row {
  display: flex;
  flex-direction: column;
}

.w-kv__row dt {
  font-size: 16px;
  line-height: 28px;
  color: var(--w-muted);
}

.w-kv__row dd {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--w-text);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
}

/* 하단 정책 링크 */
.w-policybar {
  padding-block: 32px;
}

.w-policybar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  padding-top: 32px;
  border-top: 1px solid var(--w-line);
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
}

.w-policybar__copy {
  flex: 1;
  margin: 0;
}

.w-policybar a {
  color: var(--w-muted);
  text-decoration: none;
  text-underline-offset: 4px;
}

.w-policybar a:hover {
  color: var(--w-text);
  text-decoration: underline;
}

/* 표 */
.w-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.w-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.w-table th {
  padding: 16px;
  background: var(--w-surface);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--w-text);
  white-space: nowrap;
}

.w-table td {
  padding: 16px;
  border-bottom: 1px solid var(--w-line);
  font-size: 18px;
  line-height: 28px;
  color: var(--w-muted);
  vertical-align: top;
}

.w-table td:first-child {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--w-text);
}

.w-table a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 4px;
}

.w-table tr:hover a,
.w-table a:hover {
  text-decoration: underline;
}

.w-table tbody tr {
  transition: background-color var(--w-motion) ease;
}

.w-table tbody tr:has(a):hover {
  background: var(--w-row-hover);
}

/* 페이지 이동 */
.w-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
}

.w-pager a,
.w-pager span[aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--w-muted);
  text-decoration: none;
  text-underline-offset: 4px;
}

.w-pager a:hover {
  color: var(--w-text);
  text-decoration: underline;
}

.w-pager [aria-current] {
  color: var(--w-text);
  font-weight: 600;
}

.w-pager [aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* 문서 */
.w-doc {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.w-doc__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.w-doc__version {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--w-text);
}

.w-doc__bar .w-btn {
  margin-left: auto;
}

.w-doc__layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 720px);
  gap: 120px;
  align-items: start;
}

.w-doc__toc {
  position: sticky;
  top: calc(var(--w-header-offset) + 24px);
  transition: top var(--w-header-motion) cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.w-doc__toc ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w-doc__toc a {
  display: block;
  padding: 6px 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--w-muted);
  text-decoration: none;
  text-underline-offset: 4px;
}

.w-doc__toc a:hover,
.w-doc__toc a[aria-current="true"] {
  color: var(--w-text);
  text-decoration: underline;
}

.w-doc__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.w-doc__clause {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 40px;
  border-top: 1px solid var(--w-line);
  scroll-margin-top: 24px;
}

.w-doc__clause:first-child {
  padding-top: 0;
  border-top: 0;
}

/* 단계 */
.w-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 12px;
}

.w-steps__num {
  grid-row: 1 / span 2;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--w-muted);
  font-variant-numeric: tabular-nums;
}

/* 결과 화면 */
.w-result {
  display: grid;
  grid-template-columns: minmax(0, 600fr) minmax(0, 720fr);
  gap: 120px;
  align-items: start;
  align-content: center;
  /* 헤더 68 + 하단 정책 링크 121을 뺀 영역(1080 기준 890) 안에서 세로 가운데 */
  min-height: calc(100vh - var(--w-header-h) - 121px);
  min-height: calc(100svh - var(--w-header-h) - 121px);
  padding-block: var(--w-section-y);
}

.w-result__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 결과 · 상태형 (M29·M31·M32·M33·M34) */
.w-result--center {
  align-items: center;
}

.w-result .w-pairs {
  gap: 24px;
}

.w-result .w-pairs > div {
  gap: 12px;
}

.w-result__check:empty {
  display: none;
}

/* 쇼케이스 */
.w-showcase {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.w-showcase__slider {
  overflow: hidden;
}

.w-showcase__slider .swiper-slide {
  width: calc(100% - 240px);
}

.w-showcase__frame {
  overflow: hidden;
  border-radius: var(--w-radius-card);
  background: #ffffff;
}

.w-showcase__frame .clinic-scale {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 796;
}

.w-showcase__frame .clinic {
  transform: scale(var(--w-fit, 0.6667));
}

.w-showcase__caption {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  margin-top: 32px;
}

.w-showcase__caption > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.w-showcase__controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

/* 스와이프 점 */
.w-dots {
  display: none;
  justify-content: center;
}

.w-dots button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.w-dots button::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--w-dot);
  opacity: 0.6;
  transition: width var(--w-motion) ease, background-color var(--w-motion) ease, opacity var(--w-motion) ease;
}

.w-dots button:hover::before {
  opacity: 1;
}

.w-dots button[aria-current="true"]::before {
  width: 18px;
  background: var(--w-primary);
  opacity: 1;
}

/* 마지막 행동 */
.w-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: var(--w-section-y) 0 120px;
}

.w-cta__main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.w-cta .w-lead {
  width: 100%;
  max-width: 496px;
}

/* 푸터 */
.w-footer {
  box-shadow: inset 0 1px 0 var(--w-line);
}

.w-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-block: 80px 40px;
}

.w-footer__top {
  display: flex;
  gap: 64px;
}

.w-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 464px;
  flex: none;
}

.w-footer__brand p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
}

.w-footer__cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 253px));
  gap: 20px;
}

.w-footer__col h2 {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--w-text);
}

.w-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w-footer__col a {
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
  text-decoration: none;
  text-underline-offset: 4px;
}

.w-footer__col a:hover {
  color: var(--w-text);
  text-decoration: underline;
}

.w-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--w-line);
  font-size: 13px;
  line-height: 20px;
  color: var(--w-muted);
}

.w-footer__bottom p {
  margin: 0;
}

/* 중간 폭 · PC 구조 유지 */
@container (max-width: 1199px) {
  .w-display {
    font-size: 64px;
    line-height: 72px;
  }

  .w-title {
    font-size: 48px;
    line-height: 56px;
  }

  .w-footer__top {
    flex-direction: column;
    gap: 40px;
  }

  .w-doc__layout {
    gap: 48px;
  }

  .w-auth,
  .w-result {
    gap: 64px;
  }
}

/* 모바일 */
@container (max-width: 767px) {
  .w-inner {
    padding-inline: var(--w-gutter-mobile);
  }

  .w-display {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.36px;
  }

  .w-title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.32px;
  }

  .w-subtitle,
  .w-scene {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.36px;
  }

  .w-kicker,
  .w-lead,
  .w-body,
  .w-hero__text {
    font-size: 16px;
    line-height: 26px;
  }

  .w-label,
  .w-link,
  .w-gnb__link {
    font-size: 14px;
    line-height: 22px;
  }

  .w-header__bar {
    gap: 12px;
    padding-block: 12px;
  }

  .w-gnb,
  .w-header__cta {
    display: none;
  }

  .w-header__login {
    justify-content: center;
    min-width: 52px;
    font-weight: 400;
  }

  .w-section,
  .w-pagehead,
  .w-hero,
  .w-auth {
    padding-block: var(--w-section-y-mobile);
  }

  .w-stack,
  .w-hero,
  .w-showcase {
    gap: 32px;
  }

  .w-head,
  .w-hero__top,
  .w-split,
  .w-faq,
  .w-auth,
  .w-result,
  .w-doc__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .w-head__intro {
    padding-top: 0;
  }

  .w-pill {
    height: 44px;
    padding: 0 16px;
    border-radius: var(--w-radius-btn);
    font-size: 14px;
    line-height: 22px;
  }

  .w-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .w-actions .w-btn,
  .w-btn--cta {
    width: 100%;
  }

  .w-actions .w-link {
    justify-content: center;
  }

  .w-media-row {
    display: flex;
    gap: 16px;
    margin-inline: calc(var(--w-gutter-mobile) * -1);
    padding-inline: var(--w-gutter-mobile);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .w-media-row .w-media {
    flex: none;
    width: 300px;
    scroll-snap-align: start;
  }

  .w-media__title {
    font-size: 20px;
    line-height: 28px;
  }

  .w-card,
  .w-auth-card {
    padding: 24px;
  }

  .w-card--work,
  .w-card--status {
    min-height: 0;
  }

  .w-grid--2,
  .w-grid--3,
  .w-principles,
  .w-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .w-principles {
    gap: 32px;
  }

  .w-grid--gap-32,
  .w-grid--gap-48 {
    gap: 16px;
  }

  .w-principle__box {
    min-height: 0;
    padding: 24px;
    gap: 8px;
  }

  .w-principle__value {
    font-size: 20px;
    line-height: 28px;
  }

  .w-example,
  .w-statusbar {
    font-size: 16px;
    line-height: 26px;
  }

  .w-example {
    min-height: 0;
  }

  .w-accordion {
    max-width: none;
  }

  .w-accordion__btn,
  .w-faq__q,
  .w-h3,
  .w-pairs dt,
  .w-compare__value,
  .w-doc__version,
  .w-setting__state strong {
    font-size: 18px;
    line-height: 26px;
  }

  .w-accordion__panel,
  .w-faq__a,
  .w-pairs dd,
  .w-doc__toc a {
    font-size: 16px;
    line-height: 26px;
  }

  .w-panel-media {
    min-height: 360px;
    padding: 24px;
  }

  .w-field {
    gap: 8px;
  }

  .w-field__label,
  .w-check {
    font-size: 14px;
    line-height: 22px;
  }

  .w-input {
    font-size: 16px;
    line-height: 26px;
  }

  .w-chips {
    flex-wrap: nowrap;
    margin-inline: calc(var(--w-gutter-mobile) * -1);
    padding-inline: var(--w-gutter-mobile);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .w-chip {
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 22px;
  }

  .w-setting {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .w-setting__state {
    width: 100%;
  }

  .w-table th,
  .w-table td,
  .w-table td:first-child {
    padding: 12px;
    font-size: 16px;
    line-height: 26px;
  }

  .w-doc__toc {
    position: static;
    padding: 20px;
    border: 1px solid var(--w-card-line);
    border-radius: var(--w-radius-card);
    background: var(--w-surface);
  }

  .w-doc__bar .w-btn {
    margin-left: 0;
  }

  .w-swipe .swiper-wrapper {
    display: flex;
    gap: 0;
  }

  .w-swipe .swiper-slide {
    width: 100%;
  }

  .w-swipe .w-card {
    padding: 24px;
  }

  .w-dots {
    display: flex;
  }

  .w-showcase__caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
  }

  .w-showcase__slider .swiper-slide {
    width: 100%;
  }

  .w-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: var(--w-section-y-mobile) 0;
  }

  .w-cta__main {
    gap: 24px;
  }

  .w-footer__inner {
    gap: 32px;
    padding-block: 32px;
  }

  .w-footer__brand {
    width: 100%;
  }

  .w-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }

  .w-footer__col h2 {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 26px;
  }

  .w-footer__col a {
    font-size: 14px;
    line-height: 22px;
  }

  .w-footer__bottom .w-footer__site {
    display: none;
  }

  .w-policybar__inner {
    gap: 8px 20px;
    font-size: 14px;
    line-height: 22px;
  }

  .w-policybar__copy {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-btn,
  .w-link::after,
  .w-chip,
  .w-switch,
  .w-switch::before,
  .w-dots button::before {
    transition: none;
  }
}

/* 인증 · 계정 폼형 모바일 */
@container (max-width: 767px) {
  .w-auth__more {
    display: none;
  }

  .w-kv__row dt {
    font-size: 14px;
    line-height: 22px;
  }

  .w-kv__row dd {
    font-size: 16px;
    line-height: 26px;
  }

  /* 결과 · 상태형 모바일: 위 48, 1열 간격 24, 버튼 전폭 세로 간격 16 */
  .w-result {
    min-height: 0;
    padding-block: var(--w-section-y-mobile);
  }

  .w-result .w-actions {
    gap: 16px;
  }
}

/* =========================================================
   목록형 · M07 M09 M18 M36 (피그마 209:504 · 209:506 · 209:510 · 209:515)
   검색 880 + 선택 528, 칩, 카드 3열(열 간격 24 · 행 간격 32), 안내 상자.
   모바일은 검색·선택 세로, 칩 줄바꿈, 카드 가로 스와이프 + 점.
   ========================================================= */
.w-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: var(--w-section-y);
}

.w-list__filters {
  display: grid;
  grid-template-columns: minmax(0, 880fr) minmax(0, 528fr);
  gap: 32px;
}

.w-list__filters--single {
  grid-template-columns: minmax(0, 1fr);
}

.w-list__count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}

.w-list__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  line-height: 24px;
  color: var(--w-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--w-motion) ease;
}

.w-list__more:hover {
  color: var(--w-accent-text);
}

.w-list__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.w-list__empty .w-btn {
  height: 44px;
}

.w-grid--rows-32 {
  row-gap: 32px;
}

/* 목록 카드 · 작업 카드(w-scene 28/36)에 설명 · 메타 · 링크 줄 추가 */
.w-card--list {
  min-height: 300px;
}

.w-card--compact {
  min-height: 280px;
}

.w-card--list .w-card__meta {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
}

.w-card--list .w-link {
  align-self: flex-start;
  min-height: 24px;
}

a.w-card--list:hover .w-link {
  text-decoration: underline;
}

a.w-card--list:hover .w-link::after {
  transform: translateX(4px);
}

/* 선택 드롭다운 · 여러 줄 · 선택 상자를 버튼 + 옵션 목록으로 펼침 */
.w-combo__btn {
  padding-right: 48px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w-combo__btn[aria-expanded="true"] {
  border-color: var(--w-primary);
  box-shadow: 0 0 0 1px var(--w-primary);
}

.w-combo__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 280px;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-card);
  background: var(--w-surface);
  list-style: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

.w-combo__list:focus {
  outline: none;
}

.w-combo__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--w-radius-btn);
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
  cursor: pointer;
  transition: background-color var(--w-motion) ease, color var(--w-motion) ease;
}

.w-combo__option:hover,
.w-combo__option.is-active {
  background: var(--w-row-hover);
  color: var(--w-text);
}

.w-combo__option.is-active {
  box-shadow: inset 0 0 0 1px var(--w-focus);
}

.w-combo__option[aria-selected="true"] {
  color: var(--w-text);
  font-weight: 600;
}

.w-combo__option[aria-selected="true"]::after {
  content: "선택됨";
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--w-accent-text);
}

/* 컴포넌트 페이지 · 헤더 하위 메뉴 열림 예시가 잘리지 않게 아래 공간을 둔다 */
.w-stage--menu-open {
  padding-bottom: 344px;
}

/* 레이어 팝업 · 화면 검토용 예시 안내 등 */
.w-layer {
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  padding: 32px;
  overflow: auto;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-card);
  background: var(--w-surface);
  color: var(--w-text);
}

.w-layer[open] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.w-layer::backdrop {
  background: rgba(0, 0, 0, 0.64);
}

.w-layer :focus-visible {
  outline: 2px solid var(--w-focus);
  outline-offset: 2px;
}

.w-layer .w-actions {
  justify-content: flex-end;
}

@container (max-width: 767px) {
  .w-list {
    padding-bottom: var(--w-section-y-mobile);
  }

  .w-list__filters {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .w-chips--wrap {
    flex-wrap: wrap;
    gap: 8px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .w-card--list,
  .w-card--compact {
    min-height: 0;
  }

  .w-swipe .swiper-slide.w-card--list {
    height: auto;
  }

  .w-list__empty {
    min-height: 160px;
    justify-content: center;
  }

  .w-list .w-actions .w-btn {
    width: 100%;
  }

  .w-list .w-actions {
    gap: 16px;
  }

  .w-combo__option {
    font-size: 14px;
    line-height: 22px;
  }
}

@media (max-width: 767px) {
  .w-layer {
    padding: 24px;
  }

  .w-layer .w-actions .w-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-combo__option,
  .w-list__more {
    transition: none;
  }
}

.w-list > .w-check {
  align-self: flex-start;
}

.w-list--flush {
  padding-bottom: 0;
}

/* 컴포넌트 페이지 · 펼친 목록이 들어갈 높이 */
.w-stage--tall {
  min-height: 420px;
}

/* =========================================================
   상세형 · M08 M10 M19 M37 (피그마 209:505 · 209:507 · 209:511 · 209:516 · 354:3095)
   화면 제목 아래 본문 묶음(간격 80), 변경 전후 2열, 시나리오 3열, 표, 버튼.
   M19·M37은 문서(목차 240 + 120 + 본문 720), 354:3095는 넓은 문서(240 + 80 + 1120).
   모바일은 전후 카드·시나리오 가로 스와이프, 표 행 카드형, 버튼 전폭 간격 16.
   ========================================================= */
.w-detail {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-bottom: var(--w-section-y);
}

.w-detail__section {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.w-detail__block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.w-detail__block > .w-list__more {
  align-self: flex-start;
  margin-top: -16px;
}

/* 변경 전후 큰 카드 · 704 × 300(문구) / 704 × 530(시연 사이트) */
.w-card--ba {
  min-height: 300px;
}

.w-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.w-card--ba .w-showcase__frame {
  border: 1px solid var(--w-card-line);
}

/* 제목 아래 핵심 값 카드 · 상세형 ② · 안내 상자 + 라벨·값 가로 배치 */
.w-glance {
  width: 100%;
}

.w-glance .w-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px 32px;
}

.w-glance__note {
  margin: 0;
}

/* 시나리오 3열 · 464 · 간격 24 · 테두리 없는 제목 + 설명 */
.w-scenario {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 표 열 너비 · 360 + 1080(1/4), 360 + 360(반반) */
.w-table--key th:first-child {
  width: 25%;
}

.w-table--half th {
  width: 50%;
}

/* 첨부 · 이전/다음 글 (M19) */
.w-postnav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.w-postnav__list {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  border-top: 1px solid var(--w-line);
}

.w-postnav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
  text-decoration: none;
  text-underline-offset: 4px;
}

a.w-postnav__item {
  align-self: flex-start;
  color: var(--w-text);
  transition: color var(--w-motion) ease;
}

a.w-postnav__item:hover {
  color: var(--w-accent-text);
  text-decoration: underline;
}

/* 문서 · 글 상세형(안내 상자·버전 줄 없음) */
.w-doc--article .w-doc__clause {
  gap: 12px;
}

.w-doc__summary {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--w-text);
  word-break: keep-all;
}

/* 단계 제목(28/36, 번호 뒤 공백 2칸) + 본문 */
.w-doc__step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 24px;
}

.w-doc__steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 예시 카드 · 패딩 32 · 간격 16 */
.w-card--example {
  gap: 16px;
}

/* 관련 가이드 카드 · 464 × 152 · 목록 카드 수식자 */
.w-card--related {
  min-height: 152px;
}

/* 넓은 문서 · 목차 240 + 간격 80 + 본문 1120 (354:3095) */
.w-doc--wide .w-doc__layout {
  grid-template-columns: 240px minmax(0, 1120px);
  gap: 80px;
}

.w-doc--wide .w-doc__summary {
  line-height: 32px;
}

.w-doc--wide .w-doc__step .w-scene {
  font-size: 24px;
  line-height: 34px;
}

/* 마이크 연결 축소 그림 · 1120 × 630 · 장식(aria-hidden) + blind 요약 */
.w-micfig {
  overflow: hidden;
  border-radius: var(--w-radius-card);
  background: var(--w-surface);
  aspect-ratio: 1120 / 630;
}

.w-micfig__canvas {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 1120px;
  height: 630px;
  padding: 40px 48px;
  transform: scale(var(--w-fit, 1));
  transform-origin: top left;
  color: var(--w-text);
}

.w-micfig__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.w-micfig__title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.w-micfig__desc {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--w-muted);
}

.w-micfig__stage {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex: 1;
  min-height: 0;
}

.w-micfig__pc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 784px;
  height: 441px;
  overflow: hidden;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-card);
  background: var(--w-bg);
}

.w-micfig__pc::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 32px;
  border-bottom: 1px solid var(--w-line);
  background: var(--w-band);
}

.w-micfig__overlay {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 136px;
  gap: 12px 24px;
  width: 540px;
  margin-top: 32px;
  padding: 24px;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-card);
  background: var(--w-surface);
}

.w-micfig__overlay-title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}

.w-micfig__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 22px;
  color: var(--w-muted);
}

.w-micfig__list b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--w-raised);
  color: var(--w-text);
  font-size: 12px;
  line-height: 20px;
}

.w-micfig__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  grid-row: 2 / span 2;
  grid-column: 2;
  font-size: 12px;
  line-height: 18px;
  color: var(--w-muted);
}

.w-micfig__qr svg {
  display: block;
  width: 120px;
  height: 120px;
  padding: 8px;
  border-radius: var(--w-radius-btn);
  background: #ffffff;
  color: #111317;
}

.w-micfig__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--w-muted);
}

.w-micfig__meta strong,
.w-micfig__phone strong {
  color: var(--w-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.w-micfig__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
}

.w-micfig__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-btn);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--w-text);
}

.w-micfig__btn--fill {
  border-color: var(--w-text);
  background: var(--w-text);
  color: var(--w-bg);
}

.w-micfig__phone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
  width: 212px;
  height: 460px;
  padding: 20px 14px 16px;
  border: 6px solid var(--w-raised);
  border-radius: 28px;
  background: var(--w-bg);
  font-size: 11px;
  line-height: 16px;
  color: var(--w-muted);
}

.w-micfig__phone p {
  margin: 0;
}

.w-micfig__phone-title {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--w-text);
}

.w-micfig__heard {
  padding: 10px;
  border: 1px solid var(--w-card-line);
  border-radius: var(--w-radius-btn);
  background: var(--w-surface);
  color: var(--w-text);
  font-size: 12px;
  line-height: 18px;
}

.w-micfig__heard span {
  display: block;
  color: var(--w-muted);
  font-size: 10px;
  line-height: 14px;
}

.w-micfig__phone .w-micfig__btn {
  width: 100%;
  height: 28px;
  font-size: 11px;
  line-height: 16px;
}

.w-micfig__phone-foot {
  margin-top: auto !important;
  font-size: 10px;
  line-height: 14px;
}

@container (max-width: 1199px) {
  .w-doc--wide .w-doc__layout {
    gap: 48px;
  }
}

@container (max-width: 767px) {
  .w-detail {
    gap: 48px;
    padding-bottom: var(--w-section-y-mobile);
  }

  .w-detail__section {
    gap: 24px;
  }

  .w-detail .w-actions {
    gap: 16px;
  }

  .w-card--ba,
  .w-card--related {
    min-height: 0;
  }

  .w-doc--wide .w-doc__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .w-doc__summary,
  .w-doc--wide .w-doc__summary {
    font-size: 18px;
    line-height: 28px;
  }

  .w-doc--wide .w-doc__step .w-scene {
    font-size: 20px;
    line-height: 28px;
  }

  .w-postnav__item {
    font-size: 14px;
    line-height: 22px;
  }

  /* 표 행 카드형 · 행 제목 20/28 + 열 이름 14/22 + 값 18/26 (td에 data-label) */
  .w-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .w-table--stack,
  .w-table--stack tbody,
  .w-table--stack tr,
  .w-table--stack td {
    display: block;
    width: 100%;
  }

  .w-table--stack tbody {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .w-table--stack tr {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--w-card-line);
    border-radius: var(--w-radius-card);
    background: var(--w-surface);
  }

  .w-table--stack td,
  .w-table--stack td:first-child {
    padding: 0;
    border: 0;
  }

  .w-table--stack td:first-child {
    font-size: 20px;
    line-height: 28px;
  }

  .w-table--stack td + td {
    font-size: 18px;
    line-height: 26px;
    color: var(--w-text);
  }

  .w-table--stack td + td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: var(--w-muted);
  }

  .w-table--stack caption {
    display: block;
  }
}

/* =========================================================
   요금형 · M11 M12 (피그마 204:5500 · 모바일 244:7194, 카드 묶음 204:5807 · 표 204:5834)
   카드 2장 696 · 간격 48 · 패딩 32 · 요소 간격 24.
   제목 28/36(w-scene) · 설명 18/28(w-body) · 값 40/48(w-card__value).
   항목은 항목명–설명 12, 항목 사이 24(공통 w-pairs 4/20과 다름 · 이 수식자 안에서만).
   표 3열 360 / 400 / 680 · 행 60(패딩 16 + 28).
   모바일은 카드 350 · 패딩 24 가로 스와이프(w-swipe) + 점, 버튼 카드 폭.
   ========================================================= */
.w-card--plan .w-pairs {
  gap: 24px;
}

.w-card--plan .w-pairs > div {
  gap: 12px;
}

.w-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: auto;
}

.w-table--plan th:nth-child(1) {
  width: 25%;
}

.w-table--plan th:nth-child(2) {
  width: 27.78%;
}

.w-faq__a > p {
  margin: 0;
}

.w-faq__a > .w-link {
  margin-top: 8px;
}

.w-glance__actions {
  margin-top: 16px !important;
}

@container (max-width: 767px) {
  .w-swipe .swiper-slide.w-card--plan {
    height: auto;
    min-height: 502px;
  }

  .w-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .w-card__foot .w-btn {
    width: 100%;
  }

  .w-card__foot .w-link {
    justify-content: center;
  }

  .w-glance__actions .w-label {
    text-align: left;
  }
}

/* =========================================================
   정책 문서형 · M13 · M20 · M21 · M22 (204:5501, 204:5503~5505 / 244:7196~7204)
   공통 w-doc 값은 그대로 두고 w-doc--policy 수식자로만 피그마 값을 적용한다.
   PC: 묶음 간격 32, 버전 줄 600 + 32 + 520 + 32 + 196, 목차 항목 간격 52, 조항 제목→본문 12.
   모바일: 버전 줄 세로 24, 인쇄 전폭, 목차 맨 목록(항목 간격 50), 조항 간격 24.
   ========================================================= */
.w-doc--policy {
  gap: 32px;
}

.w-doc--policy .w-doc__bar {
  flex-wrap: wrap;
  gap: 16px 32px;
}

.w-doc--policy .w-doc__bar .w-btn {
  margin-left: 0;
}

.w-doc--policy .w-doc__picker {
  flex: 0 1 600px;
  min-width: 0;
}

.w-doc--policy .w-doc__date {
  flex: 0 1 520px;
  min-width: 0;
}

/* 버전 선택 · 글자형 버튼(20/28 SemiBold) + ▾ · 목록은 w-combo 공통 */
.w-doc__picker {
  position: relative;
}

.w-doc__picker .w-combo__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--w-radius-btn);
  background: none;
  font-family: inherit;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--w-text);
  text-underline-offset: 6px;
}

.w-doc__picker .w-combo__btn::after {
  content: "▾";
  font-size: 16px;
}

.w-doc__picker .w-combo__btn:hover {
  text-decoration: underline;
}

.w-doc__picker .w-combo__btn:focus-visible {
  outline: 2px solid var(--w-focus);
  outline-offset: 2px;
}

.w-doc__picker .w-combo__btn[aria-expanded="true"] {
  box-shadow: none;
  text-decoration: underline;
}

.w-doc__picker .w-combo__list {
  right: auto;
  min-width: 240px;
}

.w-doc--policy .w-doc__toc ol {
  gap: 12px;
}

.w-doc--policy .w-doc__clause {
  gap: 12px;
}

.w-doc--policy .w-doc__clause > .w-link,
.w-doc__print > .w-link {
  align-self: flex-start;
}

.w-doc--policy .w-doc__clause > .w-actions {
  margin-top: 12px;
}

/* 표 열 너비 · M13 280/520/640, M22 320/720/400, M21 240/480 */
.w-table--rule th:nth-child(1) {
  width: 19.44%;
}

.w-table--rule th:nth-child(2) {
  width: 36.11%;
}

.w-table--route th:nth-child(1) {
  width: 22.22%;
}

.w-table--route th:nth-child(2) {
  width: 50%;
}

.w-table--item th:nth-child(1) {
  width: 33.33%;
}

/* 정책 안내 카드 · 696 × 180 · 제목 28/36 + 본문 */
.w-card--policy {
  min-height: 180px;
  gap: 12px;
}

.w-card--policy .w-link {
  align-self: flex-start;
  margin-top: auto;
}

/* 인쇄 · 문서 본문만 */
@media print {
  body:has(.w-doc--policy) .w-header,
  body:has(.w-doc--policy) #headerSitemap,
  body:has(.w-doc--policy) .w-footer,
  body:has(.w-doc--policy) .skip_link,
  .w-doc--policy .w-doc__bar .w-btn,
  .w-doc--policy .w-doc__print {
    display: none !important;
  }

  .w-doc--policy .w-doc__toc {
    position: static;
  }
}

@container (max-width: 767px) {
  .w-doc--policy {
    gap: 24px;
  }

  .w-doc--policy .w-doc__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .w-doc--policy .w-doc__picker,
  .w-doc--policy .w-doc__date {
    flex: none;
  }

  .w-doc--policy .w-doc__bar .w-btn {
    width: 100%;
  }

  .w-doc__picker .w-combo__btn {
    font-size: 18px;
    line-height: 26px;
  }

  .w-doc--policy .w-doc__toc {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .w-doc--policy .w-doc__body {
    gap: 24px;
  }

  .w-doc--policy .w-doc__clause {
    padding-top: 24px;
  }

  .w-doc--policy .w-doc__clause:first-child {
    padding-top: 0;
  }

  .w-doc--policy .w-doc__clause .w-body {
    font-size: 16px;
    line-height: 26px;
  }

  .w-card--policy {
    min-height: 0;
    padding: 24px;
  }
}

/* =========================================================
   설정형 · M23 (피그마 209:512 · 모바일 244:7244, 쿠키 선택 211:5911 · 표 211:5939 · 모바일 표 246:13886)
   공통 w-setting · w-switch · w-table 값은 그대로 두고 수식자로만 피그마 값을 적용한다.
   PC: 안내 → 설정 행 3 → 표 → 버튼 → 하단 문구, 간격 32.
   설정 행 세로형(w-setting--column): 설명 칸 12, 상태 칸 200 · strong / span / 스위치 세로 간격 8.
   표 열 320 / 560 / 560(w-table--cookie).
   모바일: 마크업 순서 그대로 설정 행 → 버튼 → 하단 문구 → 표, 간격 24 · 버튼 간격 16.
   스위치 52×32(켜짐 이동 20), 표는 구분선형(w-table--stack-line).
   ========================================================= */
.w-consent,
.w-consent__rows,
.w-consent__more {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.w-consent {
  padding-bottom: var(--w-section-y);
}

.w-consent__table {
  order: -1;
}

.w-setting--column .w-setting__copy {
  gap: 12px;
}

.w-setting--column .w-setting__state {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

label.w-setting__state {
  cursor: pointer;
}

.w-table--cookie th:nth-child(1) {
  width: 22.22%;
}

.w-table--cookie th:nth-child(2) {
  width: 38.89%;
}

@container (max-width: 767px) {
  .w-consent,
  .w-consent__rows,
  .w-consent__more {
    gap: 24px;
  }

  .w-consent {
    padding-bottom: var(--w-section-y-mobile);
  }

  .w-consent__table {
    order: 0;
  }

  .w-consent .w-actions {
    gap: 16px;
  }

  .w-setting--column {
    gap: 24px;
  }

  .w-setting--column .w-setting__state strong {
    font-size: 20px;
    line-height: 28px;
  }

  .w-setting--column .w-setting__state span {
    font-size: 14px;
    line-height: 22px;
  }

  .w-setting--column .w-switch {
    width: 52px;
  }

  .w-setting--column .w-switch:checked::before {
    transform: translateX(20px);
  }

  /* 표 구분선형 · w-table--stack과 함께 쓴다. 카드 배경·테두리 없이 블록 위·사이 1px 선, 블록 상하 20, 칸 간격 16 */
  .w-table--stack.w-table--stack-line tbody {
    gap: 0;
  }

  .w-table--stack.w-table--stack-line tr {
    gap: 16px;
    padding: 20px 0;
    border: 0;
    border-top: 1px solid var(--w-line);
    border-radius: 0;
    background: none;
  }
}

/* =========================================================
   M14 자주 묻는 질문 · 피그마 204:5502 / 모바일 244:7198
   .w-faq 공통 값은 그대로 두고 .w-faq--help 수식자로만 바꾼다.
   항목 위쪽 선만, 선 → 20 → 질문 → 20 → 답(폭 1376) · 답 아래 0, 항목 사이 32.
   모바일은 기호를 왼쪽 44 상자에 두고 질문은 x56, 항목 사이 24.
   ========================================================= */
.w-faq--help {
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-top: 0;
}

.w-faq--help .w-faq__item {
  padding-top: 20px;
  border-top: 1px solid var(--w-line);
  border-bottom: 0;
}

.w-faq--help .w-faq__q {
  padding: 0;
}

.w-faq--help .w-faq__icon {
  line-height: 28px;
}

.w-faq--help .w-faq__a {
  max-width: 1376px;
  margin: 20px 0 0;
  padding-bottom: 0;
}

.w-faq-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 32px;
}

.w-faq-group > .w-faq__list {
  align-self: stretch;
}

.w-faq-group__title {
  margin: 0 0 24px;
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
  color: var(--w-text);
  word-break: keep-all;
}

.w-faq-group > .reveal_item:last-child {
  margin-top: 32px;
}

.w-faq-group__btn {
  min-width: 256px;
}

/* 추가 도움 · 배경 #171717, 패딩 80, 간격 32 */
.w-helpband {
  background: var(--w-surface);
}

.w-helpband__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding-block: var(--w-section-y);
}

.w-helpband__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.w-helpband__actions .w-btn {
  min-width: 196px;
}

@container (max-width: 767px) {
  .w-list--help {
    gap: 24px;
  }

  .w-faq--help {
    gap: 24px;
  }

  .w-faq--help .w-faq__q {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    min-height: 44px;
  }

  .w-faq--help .w-faq__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  .w-faq-group {
    margin-top: 24px;
  }

  .w-faq-group__title {
    font-size: 20px;
    line-height: 28px;
  }

  .w-faq-group > .reveal_item:last-child {
    align-self: stretch;
    margin-top: 24px;
  }

  .w-faq-group__btn {
    width: 100%;
    min-width: 0;
  }

  .w-helpband__inner {
    padding-block: var(--w-section-y-mobile);
  }

  .w-helpband__copy {
    gap: 12px;
  }

  .w-helpband__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .w-helpband__actions .w-btn {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   파트너형 · M15 M16
   M15 피그마 209:508 / 모바일 244:7236, M16 209:509 / 모바일 244:7238.
   공통 값은 그대로 두고 아래 수식자로만 바꾼다.
   - w-stack--partner: 본문 블록 사이 32 · 아래 80(모바일 48)
   - w-table--key-wide: 2열 표 첫 열 400 / 1440
   - w-swipe--copy: 테두리 없는 글자 카드 3장 스와이프(모바일 350 · 사이 16 · 점 영역 56)
   - w-split--form: 신청서 880 + 48 + 안내 카드 512, 위 정렬
   - w-form--apply: 블록 사이 32(모바일 24), 두 칸 사이 32(모바일 1열 24)
   - w-btn--submit: 신청서 제출 260(모바일 전폭)
   - w-notice--flat: 카드 안 안내 · 면 #171717(w-surface) · radius 4
   ========================================================= */
.w-stack--partner {
  gap: 32px;
  padding-bottom: var(--w-section-y);
}

.w-table--key-wide th:first-child {
  width: 27.78%;
}

.w-swipe--copy .swiper-slide {
  height: auto;
}

.w-split--form {
  grid-template-columns: minmax(0, 880fr) minmax(0, 512fr);
  gap: 48px;
}

.w-form--apply {
  gap: 32px;
}

.w-btn--submit {
  align-self: flex-start;
  width: 260px;
}

.w-notice--flat {
  border-radius: var(--w-radius-btn);
  background: var(--w-surface);
}

.w-apply__consent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.w-apply__consent .w-check {
  align-self: flex-start;
}

.w-apply__consent a {
  color: var(--w-text);
  text-underline-offset: 4px;
}

.w-apply__consent a:hover {
  text-decoration-thickness: 2px;
}

.w-card__num {
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}

@container (max-width: 767px) {
  .w-stack--partner {
    padding-bottom: var(--w-section-y-mobile);
  }

  .w-stack--partner .w-actions {
    gap: 16px;
  }

  .w-swipe--copy .w-dots {
    align-items: center;
    height: 56px;
  }

  .w-split--form {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .w-form--apply,
  .w-form--apply .w-form__row {
    gap: 24px;
  }

  .w-form--apply .w-check {
    min-height: 64px;
  }

  .w-btn--submit {
    align-self: stretch;
    width: 100%;
  }

  .w-split--form .w-card {
    gap: 24px;
    padding: 24px;
  }
}

/* =========================================================
   결제 주문 확인 · M30
   피그마 PC 204:5511 / 모바일 244:7216. 제목 204:6645, 안내 204:6650, 폼 204:6653, 동의 204:6669 · 204:6672, 요약 카드 204:6675.
   공통 값은 그대로 두고 아래 수식자로만 바꾼다.
   - w-checkout: 안내 → 2열, 사이 32 · 아래 80(모바일 24 · 48)
   - w-split--checkout: 폼 800 + 64 + 주문 요약 카드 576, 위 정렬(모바일 1열 24, 카드 p24)
   - w-form--checkout: 블록 사이 32(모바일 24)
   - w-checkout__info(--rule): 소제목 20/28 + 설명 18/28, 사이 12 · 구분선 아래 32
   - w-checkout__consent: 체크 행 44 · 사이 4
   - w-pairs--total: 구분선 위 24 · 값 28/36(모바일 24/32)
   ========================================================= */
.w-checkout {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: var(--w-section-y);
}

.w-split--checkout {
  grid-template-columns: minmax(0, 800fr) minmax(0, 576fr);
  gap: 64px;
}

.w-form--checkout {
  gap: 32px;
}

.w-checkout__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.w-checkout__info--rule {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--w-line);
}

.w-checkout__consent {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.w-checkout__consent .w-check {
  align-self: flex-start;
}

.w-checkout__consent .w-label {
  margin-top: 4px;
}

.w-checkout__consent a {
  color: var(--w-text);
  text-underline-offset: 4px;
}

.w-checkout__consent a:hover {
  text-decoration-thickness: 2px;
}

.w-pairs--total {
  padding-top: 24px;
  border-top: 1px solid var(--w-line);
}

.w-pairs--total dd {
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  color: var(--w-text);
  font-variant-numeric: tabular-nums;
}

.w-checkout__pay {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@container (max-width: 767px) {
  .w-checkout {
    gap: 24px;
    padding-bottom: var(--w-section-y-mobile);
  }

  .w-split--checkout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .w-form--checkout {
    gap: 24px;
  }

  .w-checkout__info--rule {
    padding-bottom: 24px;
  }

  .w-split--checkout .w-card {
    gap: 24px;
    padding: 24px;
  }

  .w-pairs--total dd {
    font-size: 24px;
    line-height: 32px;
  }
}

/* =========================================================
   M06 호환성 표 · w-table--compat
   6열(환경 · 연결 방식 A/B/C · 지원 등급 · 가능한 작업 · 필요 권한 · 검증 시점).
   767 이하는 w-table--stack w-table--stack-line과 함께 블록으로 쌓는다.
   ========================================================= */
.w-table--compat td {
  word-break: keep-all;
}

.w-table--compat td:nth-child(3) {
  font-weight: 600;
  color: var(--w-text);
}

/* =========================================================
   M01 홈 · 피그마 158:2(PC) / 244:7188(모바일)
   공통 클래스 값은 바꾸지 않고 M01 전용 수식자·요소만 둔다.
   모션 훅(다음 단계 lp-interaction):
   - 히어로 장면 [data-w-scene] > .w-heroscene__bg / __site / __card / __cursor / __mask
   - 쇼케이스 배경 .w-showcase__bg (블러는 --w-showcase-blur로 제어, 원본 이미지는 선명)
   - 구조와 스타일 [data-w-tabset] 버튼 [data-w-tab-media] → 미디어 [data-w-tab-pane]
   ========================================================= */
.w-only-mo {
  display: none;
}

.w-pill__caret {
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../img/common/icon-svg/ico_gnb_depth_arrow.svg") center / 16px 16px no-repeat;
  mask: url("../img/common/icon-svg/ico_gnb_depth_arrow.svg") center / 16px 16px no-repeat;
}

.w-pill__ico {
  width: 20px;
  height: 20px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../img/web/ico_cursor.svg") center / contain no-repeat;
  mask: url("../img/web/ico_cursor.svg") center / contain no-repeat;
}

.w-statusbar__ico {
  width: 24px;
  height: 24px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../img/web/ico_shield.svg") center / 18px 20px no-repeat;
  mask: url("../img/web/ico_shield.svg") center / 18px 20px no-repeat;
}

/* 히어로 */
.w-home .w-hero__text {
  max-width: 580px;
}

.w-hero__notes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.w-hero__scope {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: opacity var(--w-motion) ease;
}

.w-hero__scope:hover {
  opacity: 0.72;
}

/* 히어로 장면 · 좌표는 피그마 458.67×611.92 기준 비율, 크기는 --u(카드 폭/458.67)로 맞춘다 */
.w-media--scene {
  --u: calc(var(--w-media-scale, 1) * 1px);
  background: #080808;
}

.w-heroscene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.w-heroscene > * {
  position: absolute;
}

.w-heroscene__site,
.w-heroscene__card,
.w-heroscene__cursor {
  left: calc(var(--x) / 458.67 * 100%);
  top: calc(var(--y) / 611.92 * 100%);
  width: calc(var(--w) / 458.67 * 100%);
}

.w-heroscene__site {
  height: calc(var(--h) / 611.92 * 100%);
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
  padding: calc(24 * var(--u));
  background: #ffffff;
  color: #111317;
}

.w-heroscene__site p,
.w-heroscene__card p {
  margin: 0;
  word-break: keep-all;
}

.w-heroscene__site-name {
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  font-weight: 600;
}

.w-heroscene__site-title {
  font-size: calc(56 * var(--u));
  line-height: calc(58 * var(--u));
  font-weight: 700;
  letter-spacing: calc(-1.12 * var(--u));
}

/* 모션 · 커서가 누른 대상의 선택 경계(m01.js가 색을 바꾼다) */
.w-heroscene__site-title {
  outline: calc(2 * var(--u)) solid rgba(37, 99, 235, 0);
  outline-offset: calc(6 * var(--u));
}

/* 모션 · 카드 본문 줄을 m01.js가 줄 단위로 나눈다 */
.w-heroscene__line {
  display: block;
}

.w-heroscene__site-text {
  font-size: calc(18 * var(--u));
  line-height: calc(26 * var(--u));
  color: #3b4048;
}

.w-heroscene__site--preview {
  gap: calc(20 * var(--u));
  padding: calc(21 * var(--u));
  border: 1px solid #333333;
  background: #211235;
  color: #ffffff;
}

.w-heroscene__preview-bar {
  font-size: calc(13 * var(--u));
  line-height: calc(20 * var(--u));
  white-space: nowrap;
}

.w-heroscene__preview-page {
  height: calc(230 * var(--u));
  padding: calc(20 * var(--u));
  background: #080808;
  font-size: calc(32 * var(--u));
  line-height: calc(42 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}

.w-heroscene__card {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(20 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #22252a;
  color: #ffffff;
  box-shadow: 0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(0, 0, 0, 0.32);
}

.w-heroscene__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}

.w-heroscene__card-title {
  font-size: calc(18 * var(--u));
  line-height: calc(28 * var(--u));
  font-weight: 600;
}

.w-heroscene__card-body {
  font-size: calc(14 * var(--u));
  line-height: calc(26 * var(--u));
  color: #d6dde8;
}

.w-heroscene__badge {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(36 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--w-info);
  color: var(--w-on-info);
  font-size: calc(15 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}

.w-heroscene__badge::before {
  content: "";
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  background: url("../img/web/ico_status_info.svg") center / contain no-repeat;
}

.w-heroscene__card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(52 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--w-primary);
  color: #ffffff;
  font-size: calc(15 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}

.w-heroscene__cursor {
  height: auto;
}

.w-heroscene__bg,
.w-heroscene__photo {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w-heroscene__mask {
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0) 0%, rgba(8, 8, 8, 0.28) 50%, rgba(8, 8, 8, 0.62) 100%);
  -webkit-backdrop-filter: blur(calc(10 * var(--u)));
  backdrop-filter: blur(calc(10 * var(--u)));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000000 50%);
  mask-image: linear-gradient(180deg, transparent 0%, #000000 50%);
}

.w-media--scene .w-media__foot {
  gap: calc(16 * var(--u));
  padding: calc(24 * var(--u));
}

.w-media--scene .w-media__title {
  font-size: calc(24 * var(--u));
  line-height: calc(32 * var(--u));
}

.w-media--scene .w-plus {
  width: max(24px, calc(40 * var(--u)));
  height: max(24px, calc(40 * var(--u)));
  font-size: calc(24 * var(--u));
  line-height: 1;
  text-decoration: none;
}

/* 쇼케이스 · 전폭 배경 */
.w-showcase-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--w-section-y);
  background: var(--w-bg);
  isolation: isolate;
}

.w-showcase-band__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.w-showcase__bg {
  position: absolute;
  top: 200px;
  left: 50%;
  width: min(1440px, calc(100% - var(--w-gutter) * 2));
  height: auto;
  transform: translateX(-50%);
  filter: blur(var(--w-showcase-blur, 30px));
}

.w-showcase__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--w-bg) 0%, color-mix(in srgb, var(--w-bg) 82%, transparent) 22%, color-mix(in srgb, var(--w-bg) 82%, transparent) 78%, var(--w-bg) 100%);
}

.w-showcase--home .w-showcase__shot {
  overflow: hidden;
  aspect-ratio: 1200 / 696.5;
  border-radius: var(--w-radius-card);
  background: #ffffff;
}

.w-showcase--home .w-showcase__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.w-showcase--home .w-showcase__slide {
  margin: 0;
}

.w-showcase__hint {
  display: none;
}

/* 구조와 스타일 · 탭형 아코디언 */
.w-tabrow {
  display: grid;
  grid-template-columns: minmax(0, 480fr) minmax(0, 880fr);
  gap: 80px;
  align-items: center;
}

.w-tabrow--reverse {
  grid-template-columns: minmax(0, 880fr) minmax(0, 480fr);
}

.w-tabrow .w-accordion__panel {
  margin-top: 0;
}

.w-tabrow__media {
  position: relative;
}

.w-tabmedia {
  position: relative;
  overflow: hidden;
  aspect-ratio: 880 / 672;
  border-radius: var(--w-radius-card);
  background: #0c2c65;
}

.w-tabmedia[hidden] {
  display: none;
}

.w-tabmedia__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.w-tabmedia__card {
  position: absolute;
  right: 32px;
  bottom: 32px;
  width: min(340px, calc(100% - 64px));
}

.w-tabmedia--dark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 64px;
  background: #171717;
}

/* 시연 카드 · 고객 콘솔 카드 모양(그림 역할, 조작 요소 아님) */
.w-mockcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--w-radius-card);
  background: #22252a;
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

.w-mockcard p {
  margin: 0;
  word-break: keep-all;
}

.w-mockcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.w-mockcard__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.w-mockcard__text {
  font-size: 16px;
  line-height: 26px;
  color: #d6dde8;
}

.w-mockcard__input {
  min-height: 112px;
  padding: 16px;
  border: 1px solid #d6dde8;
  border-radius: 6px;
  background: #000000;
  font-size: 16px;
  line-height: 26px;
  color: #b5b5b5;
}

.w-mockcard__input--filled {
  border-color: #93bdff;
  color: #ffffff;
}

.w-mockcard__hint {
  font-size: 14px;
  line-height: 22px;
  color: #b5b5b5;
}

.w-mockcard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.w-mockcard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 20px;
  border: 1px solid #333333;
  border-radius: var(--w-radius-btn);
  background: #111317;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.w-mockcard__btn--main {
  border-color: var(--w-primary);
  background: var(--w-primary);
}

.w-mockcard__btn--off {
  border-color: #2a2d33;
  background: #2a2d33;
  color: #8a9099;
}

.w-mockcard__btn--block {
  width: 100%;
  height: 44px;
  font-size: 14px;
}

.w-mockcard__chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 4px;
  background: #f2bb4b;
  color: #2b1d00;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.w-mockcard--request {
  width: 100%;
  max-width: 752px;
  padding: 24px;
  border-left: 3.5px solid #93bdff;
}

.w-mockpanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(380px, 100%);
}

.w-mockpanel--titled {
  width: 100%;
  padding: 16px;
  border-radius: var(--w-radius-card);
  background: #111111;
}

.w-mockpanel__title {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #ffffff;
}

.w-mockpanel__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #1a1a1a;
}

/* 승인과 게시 · 파란 전폭 밴드(피그마 158:190 배경) */
.w-section--accent {
  background: var(--w-primary);
}

.w-section--accent .w-kicker,
.w-section--accent .w-title,
.w-section--accent .w-lead,
.w-section--accent .w-h3,
.w-section--accent .w-body,
.w-section--accent .w-link {
  color: #ffffff;
}

.w-link--underline {
  text-decoration: underline;
}

.w-approval .w-approval__shot {
  background: #171717;
  display: block;
  width: 100%;
  height: auto;
}

.w-approval .w-approval__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.w-approval__steps li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.w-approval-mo .w-approval__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.w-dots--show {
  display: flex;
}

.w-approval__dots {
  margin-top: 32px;
}

.w-section--accent .w-dots button::before {
  background: #ffffff;
  opacity: 0.5;
}

.w-section--accent .w-dots button[aria-current="true"]::before {
  background: #ffffff;
  opacity: 1;
}

@container (max-width: 767px) {
  .w-only-pc {
    display: none;
  }

  .w-only-mo {
    display: block;
  }

  .w-media-row--home .w-media {
    width: 280px;
  }

  .w-showcase__bg {
    display: none;
  }

  .w-showcase-band {
    padding-block: var(--w-section-y-mobile);
  }

  .w-showcase--home .w-showcase__slider .swiper-slide {
    width: 318px;
    overflow: hidden;
    border: 1px solid var(--w-card-line);
    border-radius: var(--w-radius-card);
    background: var(--w-surface);
  }

  .w-showcase--home .w-showcase__shot {
    aspect-ratio: 318 / 520;
    border-radius: 0;
  }

  .w-showcase--home .w-showcase__caption {
    margin-top: 0;
    padding: 16px;
  }

  .w-showcase--home .w-showcase__controls {
    display: none;
  }

  .w-showcase--home .w-showcase__dots {
    margin-top: 16px;
  }

  .w-showcase__hint {
    display: block;
    margin-top: 24px;
    font-size: 14px;
    line-height: 22px;
  }

  .w-tabrow,
  .w-tabrow--reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .w-tabrow__media {
    order: -1;
  }

  .w-tabmedia {
    aspect-ratio: 350 / 560;
  }

  .w-tabmedia__img {
    object-position: 0 50%;
  }

  .w-tabmedia__card {
    right: 16px;
    bottom: 16px;
    width: calc(100% - 32px);
  }

  .w-tabmedia--dark {
    aspect-ratio: auto;
    padding: 24px;
  }

  .w-mockcard--request {
    padding: 16px;
  }

  .w-mockcard__title {
    font-size: 16px;
    line-height: 24px;
  }

  .w-mockcard__text,
  .w-mockcard__input {
    font-size: 14px;
    line-height: 22px;
  }

  .w-mockcard__input {
    min-height: 88px;
  }

  .w-mockcard--request .w-mockcard__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .w-mockcard__actions {
    flex-direction: column;
  }

  .w-mockcard__btn {
    height: 44px;
    font-size: 14px;
  }

  .w-approval-mo .w-mockpanel__body {
    padding: 13px;
  }

  .w-approval-mo .w-swipe {
    margin-top: 24px;
  }
}

@container (max-width: 767px) {
  .w-br-pc {
    display: none;
  }

  .w-media-row--home {
    scroll-padding-inline: var(--w-gutter-mobile);
  }

  .w-home .w-hero .w-actions .w-link {
    justify-content: flex-start;
  }

  .w-showcase--home .w-showcase__caption .w-caption {
    display: none;
  }
}

/* =========================================================
   모바일 전체 메뉴 · 참조 원본 sitemap(Index Nav, drill-down)
   원본: 260903_scss및_스크립트관련파일들_빌드에서제외 assets/scss/common/_common.scss
   (sitemap, sitemap · Index Nav, slice effect, .overflow-hidden)
   구조·간격·모션은 원본 그대로 두고 색만 공식 웹 토큰으로 바꿨다.
   - 원본 #000 배경 → var(--w-bg), #fff 글자 → var(--w-text),
     rgba(255,255,255,a) → var(--w-text)를 같은 비율로 섞은 값(라이트에서는 어두운 색으로 뒤집힌다)
   - 원본 햄버거 선(닫힘 #000, 열림 #fff) → 두 상태 모두 var(--w-text). 헤더와 메뉴 배경이 같은 --w-bg라서
   - 메뉴는 767px 이하에서만 쓴다. 원본의 PC·태블릿(1199 이하) 값은 이 폭에서 원본 md-max(767 이하) 값으로
     덮이므로, md-max가 적용된 결과를 기본값으로 옮겼다.
   - 원본은 767 이하에서 html font-size 75%(1rem = 12px)라 rem 간격을 12px 기준 px로 옮겼다(공식 웹은 1rem = 16px).
   - 글자 크기는 원본 값(번호 9.75 · 1뎁스 16.5 · 2뎁스 13.5 · 경로 15)을 공식 웹 글자 단계로 바꿨다
     (번호 13 · 1뎁스 18 · 2뎁스 16 · 경로 16). 줄 높이 비율은 원본 그대로.
   - 헤더(.w-header)는 container-type 때문에 fixed 자식을 가두므로 #headerSitemap은 원본과 달리
     헤더 밖(헤더 바로 다음)에 두고 z-index를 헤더(30)보다 한 단계 아래(29)로 둔다.
     원본처럼 워드마크·로그인·버튼은 메뉴 위에 남는다.
   - 버튼은 원본 30×30 절대 위치 대신 44×44 플렉스 항목(터치 최소 44px).
     선은 margin-right -7px로 원본(오른쪽 20px, 30px 상자)과 같은 자리에 그린다.
   ========================================================= */
.overflow-hidden {
  overflow: hidden !important;
}

/* Lenis가 멈추면 html이 이미 overflow: hidden(lenis-stopped)이다. 이때 body까지 hidden이면
   body가 따로 스크롤 상자가 되어 sticky 헤더가 화면 위로 밀려난다. 잠금은 html에 맡긴다. */
html.lenis-stopped body.overflow-hidden,
html.lenis-stopped body.is-menu-open {
  overflow: visible !important;
}

/* sitemap */
.pc_sitemap_btn {
  position: relative;
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -7px;
  z-index: 11;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: 0.2s background ease-in-out, 0.3s transform ease-in-out;
}

@container (max-width: 767px) {
  .pc_sitemap_btn {
    display: block;
  }
}

.pc_sitemap_btn > span {
  position: absolute;
  width: 22.5px;
  height: 3px;
  transition: 0.3s all ease-in-out;
  left: 50%;
  top: 50%;
  margin-left: -11.25px;
  border-radius: 1.5px;
  transform-origin: center center;
}

.pc_sitemap_btn > span:nth-child(1) {
  margin-top: -1.5px;
}

.pc_sitemap_btn > span:nth-child(2) {
  margin-top: -8.5px;
}

.pc_sitemap_btn > span:nth-child(3) {
  margin-top: 5.5px;
}

.pc_sitemap_btn.on {
  background-color: transparent !important;
}

.pc_sitemap_btn.on > span:nth-child(1) {
  width: 7.5px;
  transform: translateX(12.5px) translateY(5.25px) rotate(45deg);
}

.pc_sitemap_btn.on > span:nth-child(2) {
  width: 22.5px;
  margin-left: -11.25px;
  transform: translateY(7px) rotate(-45deg);
}

.pc_sitemap_btn.on > span:nth-child(3) {
  width: 12px;
  transform: translateX(1.75px) translateY(-10.5px) rotate(45deg);
}

/* pc_sitemap_btn · color */
.pc_sitemap_btn:not(.on) > span,
.pc_sitemap_btn.on > span {
  background: var(--w-text);
}

.pc_sitemap_btn:not(.on):hover > span:nth-child(1),
.pc_sitemap_btn:not(.on).is-hover > span:nth-child(1) {
  width: 22.5px;
}

.pc_sitemap_btn:not(.on):hover > span:nth-child(2),
.pc_sitemap_btn:not(.on).is-hover > span:nth-child(2) {
  width: 16.5px;
}

.pc_sitemap_btn:not(.on):hover > span:nth-child(3),
.pc_sitemap_btn:not(.on).is-hover > span:nth-child(3) {
  width: 16.5px;
}

/* sitemap · Index Nav */
#headerSitemap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  overflow: hidden;
  z-index: 29;
  display: none;
  color: var(--w-text);
}

#headerSitemap.on {
  opacity: 1;
}

#headerSitemap .slice_wrap {
  --slice-bg-color: var(--w-bg);
}

#headerSitemap .slice_wrap.slice_wrap--color div {
  background-color: var(--slice-bg-color);
}

#headerSitemap .slice_wrap:not(.slice_wrap--color) div {
  background-position: center !important;
}

/* 768px 이상에서는 쓰지 않는다(PC는 GNB) */
@media (min-width: 768px) {
  #headerSitemap {
    display: none !important;
  }
}

.sitemap_index_scroll {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 3;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--w-text) 55%, transparent) color-mix(in srgb, var(--w-text) 8%, transparent);
}

.sitemap_index_scroll::-webkit-scrollbar {
  width: 4px;
}

.sitemap_index_scroll::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--w-text) 8%, transparent);
}

.sitemap_index_scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--w-text) 55%, transparent);
  border-radius: 999px;
}

.sitemap_index_scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--w-text) 80%, transparent);
}

.sitemap_index_scroll::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.sitemap_index {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  min-height: 100%;
  margin: 0 auto;
  padding: 88px 20px 60px;
}

.sitemap_index__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
  margin-bottom: 15px;
}

.sitemap_index.is-drilled .sitemap_index__head {
  display: flex;
}

.sitemap_index__back {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--w-text);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.sitemap_index__back:hover,
.sitemap_index__back.is-hover {
  opacity: 0.75;
}

.sitemap_index__back[hidden] {
  display: none !important;
}

.sitemap_index__back-ico {
  display: block;
  width: 14px;
  height: 14px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(2px, -2px);
}

/* 접근성용 텍스트 (시각적으로 숨김) */
.sitemap_index__back-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.sitemap_index__crumb {
  margin: 0;
  color: var(--w-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.sitemap_index__crumb[hidden] {
  display: none !important;
}

.sitemap_index__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.sitemap_index__track {
  position: relative;
  width: 100%;
}

.sitemap_index__panel {
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
  will-change: transform, opacity;
}

.sitemap_index__panel.is-active {
  position: relative;
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.sitemap_index__panel.is-behind,
.sitemap_index__panel.is-prep-enter,
.sitemap_index__panel.is-prep-enter-back,
.sitemap_index__panel.is-leave-left,
.sitemap_index__panel.is-leave-right {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* 스택에 남은 이전 패널 (왼쪽 쪽에 대기) */
.sitemap_index__panel.is-behind {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-20%);
}

/* 다음 뎁스: 오른쪽 40%에서 진입 준비 */
.sitemap_index__panel.is-prep-enter {
  z-index: 3;
  opacity: 0;
  visibility: visible;
  transform: translateX(40%);
}

/* 뒤로가기: 이전 뎁스 왼쪽 -20%에서 진입 준비 */
.sitemap_index__panel.is-prep-enter-back {
  z-index: 3;
  opacity: 0;
  visibility: visible;
  transform: translateX(-20%);
}

/* 현재 뎁스 → 왼쪽으로 빠지며 사라짐 */
.sitemap_index__panel.is-leave-left {
  z-index: 1;
  opacity: 0;
  visibility: visible;
  transform: translateX(-20%);
}

/* 현재 뎁스 → 오른쪽으로 빠지며 사라짐 (뒤로가기) */
.sitemap_index__panel.is-leave-right {
  z-index: 1;
  opacity: 0;
  visibility: visible;
  transform: translateX(40%);
}

.sitemap_index__list {
  display: flex;
  flex-direction: column;
  gap: 3.75px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitemap_index__list-item + .sitemap_index__list-item {
  margin-top: 1.8px;
}

.sitemap_index__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 15px;
  width: 100%;
  padding: 12px 24px 12px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--w-text) 16%, transparent);
  background: none;
  color: var(--w-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 1;
  filter: none;
  outline: none;
  transition: border-color 0.25s ease;
}

.sitemap_index__item:hover,
.sitemap_index__item.is-hover,
.sitemap_index__item:focus-visible,
.sitemap_index__item:active {
  color: color-mix(in srgb, var(--w-text) 75%, transparent);
  filter: none;
  background: none;
  border-bottom-color: color-mix(in srgb, var(--w-text) 35%, transparent);
}

/* 텍스트만 오른쪽으로 살짝 이동 (아이콘은 고정) */
.sitemap_index__item:hover .sitemap_index__label,
.sitemap_index__item.is-hover .sitemap_index__label,
.sitemap_index__item:focus-visible .sitemap_index__label {
  transform: translateX(4.2px);
}

.sitemap_index__item:focus-visible .sitemap_index__label {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

/* 1depth만 등장 애니 전 숨김 */
.sitemap_index__panel[data-level="0"] .sitemap_index__item {
  opacity: 0;
}

a.sitemap_index__item {
  text-decoration: none;
  color: var(--w-text);
}

a.sitemap_index__item:hover,
a.sitemap_index__item.is-hover,
a.sitemap_index__item:focus-visible,
a.sitemap_index__item:active {
  color: color-mix(in srgb, var(--w-text) 75%, transparent);
  filter: none;
  background: none;
  border-bottom-color: color-mix(in srgb, var(--w-text) 35%, transparent);
}

/* 하위 메뉴 있음 → 드릴다운 */
.sitemap_index__item--branch {
  color: var(--w-text);
}

/* 하위 없음 → 페이지 바로 이동 */
.sitemap_index__item--link {
  color: var(--w-text);
}

.sitemap_index__label {
  flex: 1 1 auto;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  transition: transform 0.25s ease;
}

.sitemap_index__item--link .sitemap_index__label {
  font-weight: 600;
}

.sitemap_index__panel[data-level="1"] .sitemap_index__label,
.sitemap_index__panel[data-level="2"] .sitemap_index__label {
  font-size: 16px;
  font-weight: 600;
}

/* 2·3depth hover도 동일하게 살짝 어둡게 */
.sitemap_index__panel[data-level="1"] .sitemap_index__item:hover,
.sitemap_index__panel[data-level="1"] .sitemap_index__item.is-hover,
.sitemap_index__panel[data-level="1"] .sitemap_index__item:focus-visible,
.sitemap_index__panel[data-level="1"] .sitemap_index__item:active,
.sitemap_index__panel[data-level="2"] .sitemap_index__item:hover,
.sitemap_index__panel[data-level="2"] .sitemap_index__item:focus-visible,
.sitemap_index__panel[data-level="2"] .sitemap_index__item:active {
  color: color-mix(in srgb, var(--w-text) 75%, transparent);
  filter: none;
  background: none;
}

/* 하위 있음: chevron › (고정) */
.sitemap_index__arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 1;
  pointer-events: none;
}

/* 공식 웹 · 목록 아래 주요 버튼(원본 .header_sns 자리, 위 40px). 1depth 항목 다음 순서로 함께 등장 */
/* 메뉴는 위, 버튼은 아래로 양끝 정렬. 내용이 화면보다 길면 .sitemap_index_scroll이 스크롤한다 */
.sitemap_index__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 40px;
  opacity: 0;
}

/* slice effect */
.slice_effect img.copy_img {
  display: none;
}

.slice_effect .slice_wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
  perspective: 1600px;
}

.slice_effect .slice_wrap div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform-origin: top center;
  opacity: 0;
}

.slice_effect .slice_wrap div:nth-child(1) {
  transition: 500ms 50ms opacity ease-in-out, 500ms 50ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(2) {
  transition: 500ms 100ms opacity ease-in-out, 500ms 100ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(3) {
  transition: 500ms 150ms opacity ease-in-out, 500ms 150ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(4) {
  transition: 500ms 200ms opacity ease-in-out, 500ms 200ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(5) {
  transition: 500ms 250ms opacity ease-in-out, 500ms 250ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(6) {
  transition: 500ms 300ms opacity ease-in-out, 500ms 300ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(7) {
  transition: 500ms 350ms opacity ease-in-out, 500ms 350ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(8) {
  transition: 500ms 400ms opacity ease-in-out, 500ms 400ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(9) {
  transition: 500ms 450ms opacity ease-in-out, 500ms 450ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(10) {
  transition: 500ms 500ms opacity ease-in-out, 500ms 500ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(11) {
  transition: 500ms 550ms opacity ease-in-out, 500ms 550ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(12) {
  transition: 500ms 600ms opacity ease-in-out, 500ms 600ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(13) {
  transition: 500ms 650ms opacity ease-in-out, 500ms 650ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(14) {
  transition: 500ms 700ms opacity ease-in-out, 500ms 700ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(15) {
  transition: 500ms 750ms opacity ease-in-out, 500ms 750ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(16) {
  transition: 500ms 800ms opacity ease-in-out, 500ms 800ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(17) {
  transition: 500ms 850ms opacity ease-in-out, 500ms 850ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(18) {
  transition: 500ms 900ms opacity ease-in-out, 500ms 900ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(19) {
  transition: 500ms 950ms opacity ease-in-out, 500ms 950ms transform ease-in-out;
}

.slice_effect .slice_wrap div:nth-child(20) {
  transition: 500ms 1000ms opacity ease-in-out, 500ms 1000ms transform ease-in-out;
}

.slice_effect.on .slice_wrap div {
  bottom: 0;
  opacity: 1;
  margin-bottom: 0;
  transform: none;
}

.slice_effect.on .slice_wrap div:nth-child(1) {
  transition: 500ms 0ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(2) {
  transition: 500ms 20ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(3) {
  transition: 500ms 40ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(4) {
  transition: 500ms 60ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(5) {
  transition: 500ms 80ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(6) {
  transition: 500ms 100ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(7) {
  transition: 500ms 120ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(8) {
  transition: 500ms 140ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(9) {
  transition: 500ms 160ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(10) {
  transition: 500ms 180ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(11) {
  transition: 500ms 200ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(12) {
  transition: 500ms 220ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(13) {
  transition: 500ms 240ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(14) {
  transition: 500ms 260ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(15) {
  transition: 500ms 280ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(16) {
  transition: 500ms 300ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(17) {
  transition: 500ms 320ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(18) {
  transition: 500ms 340ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(19) {
  transition: 500ms 360ms all ease-in-out;
}

.slice_effect.on .slice_wrap div:nth-child(20) {
  transition: 500ms 380ms all ease-in-out;
}

/* 컴포넌트 페이지 정적 예시 · 메뉴를 펼친 상태로 보여 준다(.w-stage 안이라 fixed 대신 흐름 배치) */
.w-sitemap-static {
  position: relative;
  background: var(--w-bg);
  color: var(--w-text);
}

.w-sitemap-static .sitemap_index_scroll {
  height: auto;
  overflow: visible;
}

.w-sitemap-static .sitemap_index {
  min-height: 0;
  padding-top: 20px;
}

.w-sitemap-static .sitemap_index__panel[data-level="0"] .sitemap_index__item,
.w-sitemap-static .sitemap_index__actions {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pc_sitemap_btn,
  .pc_sitemap_btn > span,
  .sitemap_index__panel,
  .sitemap_index__label,
  .slice_effect .slice_wrap div,
  .slice_effect.on .slice_wrap div {
    transition: none !important;
  }
}

/* 디자인 시스템 태그 · 긴 노드 설명(질문 도움말형 등)이 390폭에서 넘치지 않게 줄을 바꾼다 */
.ds-tag {
  max-width: 100%;
  height: auto;
  min-height: 26px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 페이지 로더 · 가림·스피너 핵심은 각 HTML <head> 인라인(첫 페인트용), 여기는 해제와 정적 예시.
   해제 순서(custom.js): load + document.fonts.ready → 0.5초 페이드 → 숨김 → html.is-loaded · lp:ready → 등장 모션 */
.w-loader.is-leaving {
  pointer-events: none;
}

/* 로딩 중 Lenis 정지(lenis-stopped)의 overflow:hidden을 풀어 해제 순간 스크롤바 폭만큼 화면이 밀리지 않게 한다.
   로딩 중 휠·터치·키 스크롤은 <head> 인라인 스크립트가 막는다. */
html.is-loading.lenis-stopped {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .w-loader__spinner {
    animation-duration: 1.6s;
  }
}

/* 컴포넌트 페이지 정지 예시 */
.w-loader.w-loader--static {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 1 1 240px;
  height: 160px;
  border-radius: 8px;
}

.w-loader--static .w-loader__spinner {
  animation: none;
}

/* 라이트 · #wrapper.light의 --w-bg #ffffff, --w-text #111317과 같은 값 */
.w-loader.w-loader--light {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(17, 19, 23, 0.12);
}

.w-loader--light .w-loader__spinner {
  border-color: rgba(17, 19, 23, 0.2);
  border-top-color: #111317;
}

/* 나이트 예시는 라이트 테마에서도 검정으로 둔다 */
.w-loader.w-loader--static:not(.w-loader--light) {
  background: #000;
}

.w-loader--static:not(.w-loader--light) .w-loader__spinner {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
}