:root {
  --hub-ink: #17211c;
  --hub-copy: #4b5e58;
  --hub-muted: #5f6f69;
  --hub-green: #087f5b;
  --hub-green-deep: #055f45;
  --hub-mint: #e8f6f0;
  --hub-mint-soft: #f6faf8;
  --hub-line: #d8e5df;
  --hub-neutral: #f6f6f2;
  --hub-navy: #14235c;
  --hub-navy-deep: #081337;
  --hub-white: #fff;
  --hub-face-row-line: #dbe3ee;
  --hub-face-row-shadow: 0 7px 17px rgba(41, 57, 109, .055);
  --hub-face-row-copy: #394257;
  --hub-face-cta-shadow: 0 9px 16px rgba(8, 127, 91, .2);
  --hub-kt: #1d5fd1;
  --hub-lg: #b63134;
  --hub-common: #006f4c;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body.activation-hub-page {
  margin: 0;
  overflow-x: hidden;
  background: var(--hub-white);
  color: var(--hub-ink);
  font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  word-break: keep-all;
}
.activation-hub-page img { display: block; max-width: 100%; height: auto; }
.hub-shell { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.hub-skip {
  position: fixed; top: -80px; left: 16px; z-index: 9999;
  padding: 12px 18px; border-radius: 10px; background: var(--hub-ink); color: #fff;
  text-decoration: none; font-weight: 800;
}
.hub-skip:focus { top: 16px; }
.hub-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hub-icon {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.hub-hero {
  padding: 35px 0 28px;
  border-bottom: 1px solid #edf2ef;
  background: var(--hub-white);
  text-align: center;
}
.hub-eyebrow {
  display: inline-flex; margin: 0 0 7px; padding: 5px 10px;
  border: 1px solid #b8dccc; border-radius: 999px;
  background: var(--hub-mint-soft); color: var(--hub-green-deep);
  font-size: 13px; font-weight: 850;
}
.hub-hero h1 {
  margin: 0;
  font-size: clamp(37px, 4vw, 45px); line-height: 1.08;
  letter-spacing: -.052em; font-weight: 900;
}
.hub-hero-lead {
  max-width: 980px; margin: 10px auto 0;
  color: var(--hub-copy); font-size: clamp(14px, 1.4vw, 16px); line-height: 1.6;
}
.hub-hero-lead > span { display: block; }

.hub-section { padding: 62px 0; }
#face-auth {
  padding: 34px 0 28px;
  background: var(--hub-white);
}
#face-auth .hub-shell { width: min(1060px, calc(100% - 40px)); }
#activation-methods { padding: 20px 0 42px; }
.hub-section-head { max-width: 720px; margin-bottom: 14px; }
.hub-section-head--center { margin-inline: auto; text-align: center; }
.hub-kicker {
  display: inline-flex; margin: 0 0 7px; padding: 5px 9px;
  border-radius: 999px; background: var(--hub-mint);
  color: var(--hub-green-deep); font-size: 12px; font-weight: 850;
}
.hub-section h2 {
  margin: 0; font-size: clamp(27px, 3vw, 36px);
  line-height: 1.2; letter-spacing: -.045em; font-weight: 900;
}
.hub-section-head > p:last-child {
  margin: 9px 0 0; color: var(--hub-copy); font-size: 14px; line-height: 1.6;
}

.hub-face-feature {
  padding: 0;
}
.hub-face-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  grid-template-areas:
    "heading switcher"
    "demo media"
    "browser media"
    "networks media"
    "actions actions";
  column-gap: 72px;
  row-gap: 18px;
  align-items: start;
}
.hub-face-heading { grid-area: heading; min-width: 0; text-align: left; }
.hub-face-heading h2 {
  margin: 0; color: var(--hub-navy); font-size: clamp(39px, 3.35vw, 51px);
  line-height: 1.16; letter-spacing: -.06em; font-weight: 900; text-wrap: balance;
}
.hub-face-heading h2 > span { display: block; }
.hub-face-title-copy > span, .hub-face-instruction-copy, .hub-face-instruction-copy > span { display: block; }
.hub-face-title-copy[hidden], .hub-face-instruction-copy[hidden], .hub-auth-recommendation[hidden] { display: none; }
.hub-face-keyword {
  padding-inline: .03em; background: linear-gradient(transparent 68%, rgba(58, 194, 143, .22) 68%);
  color: var(--hub-green); font-weight: inherit;
}
.hub-face-instruction {
  margin: 17px 0 0; color: var(--hub-navy); font-size: clamp(22px, 2vw, 28px);
  line-height: 1.35; font-weight: 900; letter-spacing: -.045em;
}
.hub-face-instruction strong, .hub-face-date { color: var(--hub-green); font-weight: inherit; }

.hub-auth-switcher { grid-area: switcher; min-width: 0; }
.hub-auth-tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--hub-green); border-radius: 11px; background: var(--hub-white); overflow: visible;
}
.hub-auth-tabs button {
  position: relative; min-height: 52px; padding: 10px 15px; border: 0; border-radius: 10px;
  background: transparent; color: var(--hub-green-deep); cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 900; letter-spacing: -.035em;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.hub-auth-tabs button.is-active { background: var(--hub-green); color: var(--hub-white); box-shadow: 0 7px 16px rgba(8, 127, 91, .17); }
.hub-auth-tabs button small {
  position: absolute; top: -14px; left: 50%; z-index: 2; width: max-content;
  padding: 6px 10px; border: 2px solid #fff; border-radius: 999px; background: #ffd84d; color: #251f00;
  box-shadow: 0 5px 14px rgba(181, 139, 0, .24); font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: -.02em; transform: translateX(-50%);
}
.hub-auth-recommendation {
  margin: 34px 0 0; color: #48534e; font-size: 13px; line-height: 1.5; font-weight: 700; text-align: center;
}
.hub-auth-recommendation strong { color: var(--hub-green); font-weight: 900; }

.hub-face-demo { grid-area: demo; min-width: 0; }
.hub-demo-panel[hidden] { display: none; }
.hub-identity-example {
  display: inline-flex; width: 182px; min-height: 50px; align-items: center; justify-content: center;
  margin-bottom: 17px; border: 1px solid #087756; border-radius: 8px;
  background: linear-gradient(135deg, #0b9168, var(--hub-green)); color: var(--hub-white);
  box-shadow: 0 7px 13px rgba(8, 127, 91, .16); font-size: 19px; font-weight: 900;
}
.hub-face-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hub-face-steps li {
  display: flex; min-height: 102px; align-items: center; gap: 15px; padding: 16px 18px;
  border: 1px solid var(--hub-face-row-line); border-radius: 12px; background: var(--hub-white);
  box-shadow: var(--hub-face-row-shadow);
}
.hub-face-steps li > span {
  display: grid; width: 45px; height: 45px; flex: 0 0 auto; place-items: center;
  border-radius: 50%; background: var(--hub-mint); color: #057553; font-size: 19px; font-weight: 900;
}
.hub-face-steps p { margin: 0; color: var(--hub-face-row-copy); font-size: 14px; line-height: 1.55; }
.hub-face-steps strong { color: var(--hub-ink); font-weight: 900; }

.hub-auth-media { grid-area: media; min-width: 0; }
.hub-auth-panel { display: grid; justify-items: center; margin: 0; }
.hub-auth-panel[hidden] { display: none; }
.hub-guide-video {
  display: block; width: min(100%, 300px); height: auto; aspect-ratio: 1080 / 2338;
  border: 2px solid #b8dfcf; border-radius: 17px; background: #111; object-fit: contain;
  box-shadow: 0 15px 31px rgba(20, 55, 45, .13);
}
.hub-guide-video--mois { border-color: #9ed5bd; }
.hub-guide-video:focus-visible { outline: 3px solid #ffda45; outline-offset: 3px; }
.hub-guide-caption { margin: 12px 0 0; text-align: center; }
.hub-guide-caption strong { display: block; color: var(--hub-ink); font-size: 14px; }
.hub-guide-caption span { display: block; margin-top: 4px; color: var(--hub-muted); font-size: 11px; }

.hub-browser-card {
  grid-area: browser; min-width: 0; padding: 16px;
  border: 1px solid #cde5da; border-radius: 13px; background: linear-gradient(135deg, #f3faf6, #fbfdfc);
}
.hub-browser-heading { display: flex; align-items: center; gap: 12px; }
.hub-browser-heading p { margin: 0; color: #36443e; font-size: 14px; line-height: 1.55; }
.hub-browser-heading strong { color: var(--hub-green); }
.hub-chrome-logo {
  display: block; width: 45px; height: 45px; flex: 0 0 auto;
}
.hub-mois-app-icon {
  display: block; width: 45px; height: 45px; flex: 0 0 auto;
  border-radius: 11px; object-fit: cover;
}
.hub-browser-downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.hub-browser-downloads a {
  display: flex; min-width: 0; min-height: 57px; align-items: center; gap: 9px; padding: 8px 11px;
  border: 1px solid var(--hub-green); border-radius: 10px; background: var(--hub-white);
  color: var(--hub-green-deep); text-decoration: none; transition: background .18s ease, color .18s ease;
}
.hub-browser-downloads a:hover { background: var(--hub-green); color: var(--hub-white); }
.hub-browser-downloads .hub-store-logo { display: block; width: 24px; height: 27px; flex: 0 0 auto; }
.hub-browser-downloads .hub-store-logo--apple { width: 26px; height: 26px; }
.hub-browser-downloads a > span { min-width: 0; }
.hub-browser-downloads b { display: block; font-size: 12px; line-height: 1.25; white-space: nowrap; }
.hub-browser-downloads small { display: block; margin-top: 3px; color: var(--hub-muted); font-size: 10px; }
.hub-browser-downloads a:hover small { color: rgba(255, 255, 255, .82); }
.hub-browser-return {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #d9e9e1;
}
.hub-browser-return > span { color: #4b5b54; font-size: 11px; line-height: 1.4; }
.hub-browser-return code { color: var(--hub-navy); font-family: inherit; font-size: 11px; line-height: 1.3; font-weight: 800; white-space: nowrap; }
.hub-browser-return button {
  display: inline-flex; min-height: 34px; align-items: center; gap: 5px; padding: 0 10px;
  border: 1px solid var(--hub-green); border-radius: 8px; background: var(--hub-white);
  color: var(--hub-green-deep); cursor: pointer; font-family: inherit; font-size: 11px; line-height: 1; font-weight: 800;
}
.hub-browser-return .hub-icon { width: 15px; height: 15px; }
.hub-copy-status { min-height: 0; margin: 8px 0 0; color: var(--hub-green-deep); font-size: 11px; line-height: 1.4; font-weight: 750; }
.hub-copy-status:empty { display: none; }
.hub-mois-app-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #d9e9e1; color: #4b5b54; font-size: 11px; line-height: 1.4; }

@media (min-width: 701px) {
  .hub-auth-media { align-self: center; }
}

.hub-network-rows { grid-area: networks; display: grid; gap: 8px; margin: 0; }
.hub-network-rows[hidden] { display: none; }
.hub-network-rows > div {
  display: grid; grid-template-columns: 59px minmax(0, 1fr); gap: 12px; align-items: center;
  min-height: 54px; padding: 9px 14px; border: 1px solid var(--hub-face-row-line); border-radius: 11px;
  background: var(--hub-white); box-shadow: var(--hub-face-row-shadow);
}
.hub-network-rows dt {
  display: inline-flex; width: fit-content; min-width: 51px; min-height: 27px; align-items: center; justify-content: center;
  margin: 0; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 900;
}
.hub-network-rows dd { margin: 0; color: var(--hub-face-row-copy); font-size: 13px; line-height: 1.45; font-weight: 650; text-wrap: pretty; }
.hub-network-rows dd strong { font-weight: 900; }
.hub-network-rows .is-kt { border-color: rgba(29, 95, 209, .25); }
.hub-network-rows .is-kt dt { background: #e8f0ff; color: var(--hub-kt); }
.hub-network-rows .is-kt strong { color: var(--hub-kt); }
.hub-network-rows .is-lg { border-color: rgba(201, 64, 64, .24); }
.hub-network-rows .is-lg dt { background: #fdecec; color: var(--hub-lg); }
.hub-network-rows .is-lg strong { color: var(--hub-lg); }
.hub-network-rows .is-common { border-color: rgba(8, 127, 91, .25); }
.hub-network-rows .is-common dt { background: #e3f5ed; color: var(--hub-common); }
.hub-network-rows .is-common strong { color: var(--hub-common); }

.hub-face-actions { grid-area: actions; display: grid; grid-template-columns: repeat(2, minmax(0, 270px)); justify-content: center; gap: 12px; margin-top: 2px; }
.hub-face-actions [hidden] { display: none; }
.hub-face-primary, .hub-face-secondary {
  display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 8px;
  padding: 0 17px; border: 1px solid var(--hub-green); border-radius: 10px;
  text-decoration: none; font-size: 15px; font-weight: 900; letter-spacing: -.035em;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.hub-face-primary { background: var(--hub-green); border-color: var(--hub-green); box-shadow: var(--hub-face-cta-shadow); color: var(--hub-white); }
.hub-face-secondary { background: var(--hub-white); color: var(--hub-green-deep); }
.hub-face-primary:hover, .hub-face-secondary:hover { border-color: var(--hub-green-deep); background: var(--hub-green-deep); color: var(--hub-white); }

.hub-methods {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.hub-method-card {
  display: flex; min-width: 0; min-height: 222px; flex-direction: column;
  padding: 21px 22px 19px;
  border: 1px solid var(--hub-line); border-radius: 18px;
  background: var(--hub-white);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hub-method-card:hover {
  transform: translateY(-3px); border-color: #98c8b5;
  box-shadow: 0 14px 34px rgba(7, 92, 69, .075);
}
.hub-method-eyebrow {
  align-self: flex-start; margin: 0 0 12px; padding: 5px 9px;
  border-radius: 999px; background: var(--hub-mint);
  color: var(--hub-green-deep); font-size: 12px; font-weight: 850;
}
.hub-method-card h3 {
  margin: 0 0 7px; color: #101c18;
  font-size: 24px; line-height: 1.18; letter-spacing: -.04em;
}
.hub-method-card > p:not(.hub-method-eyebrow) {
  max-width: 450px; margin: 0 0 15px;
  color: var(--hub-copy); font-size: 14px; line-height: 1.58;
}
.hub-method-cta {
  display: flex; width: 100%; min-height: 43px; align-items: center; justify-content: center; gap: 8px;
  margin-top: auto; padding: 0 16px;
  border: 1px solid var(--hub-green); border-radius: 12px;
  background: var(--hub-green); color: #fff;
  text-decoration: none; font-size: 14px; font-weight: 900;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.hub-method-cta:hover { background: var(--hub-green-deep); border-color: var(--hub-green-deep); }
.hub-method-cta .hub-icon, .hub-face-actions .hub-icon, .hub-help-actions .hub-icon { width: 18px; height: 18px; }

.hub-help {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px; align-items: center;
  margin-top: 16px; padding: 22px 24px;
  border: 1px solid #e2e3dd; border-radius: 18px;
  background: var(--hub-neutral);
}
.hub-help-label { margin: 0 0 7px; color: var(--hub-green-deep); font-size: 12px; font-weight: 900; }
.hub-help h2 { margin: 0; font-size: 23px; letter-spacing: -.035em; }
.hub-help div > p:last-child { margin: 8px 0 0; color: var(--hub-copy); font-size: 14px; line-height: 1.6; }
.hub-help-actions { display: flex; gap: 9px; }
.hub-help-actions a {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px;
  padding: 0 14px; border: 1px solid #cbd3cf; border-radius: 11px;
  background: #fff; color: var(--hub-green-deep); text-decoration: none; font-size: 13px; font-weight: 850;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.hub-help-actions a:first-child { border-color: var(--hub-green); background: var(--hub-green); color: #fff; }
.hub-help-actions a:hover { border-color: var(--hub-green-deep); background: var(--hub-green-deep); color: #fff; }

.hub-face-primary:focus-visible,
.hub-face-secondary:focus-visible,
.hub-auth-tabs button:focus-visible,
.hub-browser-downloads a:focus-visible,
.hub-browser-return button:focus-visible,
.hub-method-cta:focus-visible,
.hub-help-actions a:focus-visible {
  outline: 3px solid rgba(8, 127, 91, .28); outline-offset: 3px;
}

@media (max-width: 820px) {
  #face-auth .hub-shell { width: min(100% - 32px, 1060px); }
  .hub-face-grid { grid-template-columns: minmax(0, 1fr) 290px; column-gap: 34px; }
  .hub-face-heading h2 { font-size: clamp(34px, 4.8vw, 42px); }
  .hub-face-instruction { font-size: 23px; }
  .hub-auth-tabs button { padding-inline: 9px; font-size: 14px; }
  .hub-guide-video { width: 250px; }
  .hub-face-steps li { gap: 10px; padding-inline: 12px; }
  .hub-face-steps p { font-size: 13px; }
  .hub-browser-return { grid-template-columns: 1fr auto; }
  .hub-browser-return > span { grid-column: 1 / -1; }
  .hub-help { grid-template-columns: 1fr; gap: 20px; }
  .hub-help-actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 72px; }
  .hub-shell { width: min(100% - 24px, 1080px); }
  .hub-hero { padding: 34px 0 22px; }
  .hub-eyebrow { margin-bottom: 8px; }
  .hub-hero h1 { font-size: 34px; }
  .hub-hero-lead { max-width: 460px; margin-top: 9px; font-size: clamp(12px, 3.6vw, 13px); line-height: 1.55; }
  .hub-hero-lead > span { white-space: nowrap; }
  .hub-section { padding: 42px 0; }
  #face-auth { padding: 36px 0 38px; }
  #face-auth .hub-shell { width: min(100% - 24px, 560px); }
  #activation-methods { padding: 38px 0 34px; border-top: 1px solid #eef0f4; }
  .hub-face-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "switcher" "media" "demo" "browser" "networks" "actions";
    gap: 0;
  }
  .hub-face-heading { width: 100%; text-align: center; }
  #face-auth .hub-face-heading h2 { font-size: clamp(27px, 7.4vw, 31px); line-height: 1.19; }
  #face-auth .hub-face-heading h2 > span { white-space: nowrap; }
  .hub-face-instruction { margin-top: 15px; font-size: clamp(21px, 5.8vw, 24px); }
  .hub-auth-switcher { margin-top: 38px; }
  .hub-auth-tabs button { min-height: 50px; padding: 7px; font-size: 14px; }
  .hub-auth-tabs button small { top: -15px; padding: 6px 10px; font-size: 11px; }
  .hub-auth-recommendation { max-width: 320px; margin: 17px auto 0; font-size: 13px; }
  .hub-auth-media { margin-top: 22px; }
  .hub-guide-video { width: min(58vw, 220px); border-radius: 15px; }
  .hub-guide-caption { margin-top: 10px; }
  .hub-guide-caption strong { font-size: 13px; }
  .hub-guide-caption span { max-width: 270px; font-size: 10px; line-height: 1.4; }
  .hub-face-demo { margin-top: 22px; }
  .hub-identity-example { display: none; }
  .hub-face-steps { gap: 8px; }
  .hub-face-steps li { min-height: 76px; gap: 9px; padding: 9px 10px; }
  .hub-face-steps li > span { width: 38px; height: 38px; font-size: 16px; }
  .hub-face-steps p { font-size: 12px; line-height: 1.5; }
  .hub-browser-card { margin-top: 22px; padding: 14px; }
  .hub-browser-heading { gap: 10px; }
  .hub-browser-heading p { font-size: 13px; }
  .hub-chrome-logo { width: 41px; height: 41px; }
  .hub-browser-downloads { gap: 7px; margin-top: 12px; }
  .hub-browser-downloads a { min-height: 46px; gap: 7px; padding: 5px 8px; }
  .hub-browser-downloads .hub-store-logo { width: 21px; height: 24px; }
  .hub-browser-downloads .hub-store-logo--apple { width: 23px; height: 23px; }
  .hub-browser-downloads b { font-size: 11px; }
  .hub-browser-downloads small { font-size: 9px; }
  .hub-browser-return { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .hub-browser-return > span { grid-column: 1 / -1; font-size: 11px; }
  .hub-browser-return code { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .hub-network-rows { gap: 8px; margin-top: 16px; }
  .hub-network-rows > div { grid-template-columns: 54px minmax(0, 1fr); gap: 9px; min-height: 52px; padding: 7px 10px; }
  .hub-network-rows dt { font-size: 12px; }
  .hub-network-rows dd { font-size: 12px; line-height: 1.45; }
  .hub-face-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
  .hub-face-primary, .hub-face-secondary { min-height: 44px; padding-inline: 8px; font-size: 13px; }
  .hub-section-head { margin-bottom: 14px; }
  .hub-section h2 { font-size: 27px; }
  .hub-section-head > p:last-child { margin-top: 7px; font-size: 13px; }
  .hub-methods { grid-template-columns: 1fr; gap: 12px; }
  .hub-method-card { min-height: 218px; padding: 20px 18px 17px; }
  .hub-method-eyebrow { margin-bottom: 11px; }
  .hub-method-card h3 { font-size: 23px; }
  .hub-method-card > p:not(.hub-method-eyebrow) { font-size: 14px; }
  .hub-help { margin-top: 14px; padding: 21px; }
  .hub-help h2 { font-size: 21px; }
  .hub-help-actions { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .hub-hero { padding: 32px 0 22px; }
  .hub-hero h1 { font-size: 31px; }
  #face-auth .hub-face-heading h2 { font-size: clamp(25px, 7.5vw, 27px); }
  .hub-face-instruction { font-size: 20px; }
  .hub-auth-tabs button { font-size: 14px; }
  .hub-auth-recommendation { font-size: 12px; }
  .hub-guide-video { width: 195px; }
  .hub-face-steps p { font-size: 11px; }
  .hub-browser-downloads { grid-template-columns: 1fr; }
  .hub-network-rows dd { font-size: 11px; }
  .hub-face-primary, .hub-face-secondary { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .activation-hub-page * { transition-duration: .01ms !important; }
}