@charset "UTF-8";
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Variable"), url("../font/PretendardVariable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Thin.woff") format("woff");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Light.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Black.woff") format("woff");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Bold.woff") format("woff");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Thin.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-weight: 700;
  src: local("Spoqa Han Sans Neo Bold"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Bold.woff2") format("font-woff2"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Bold.woff") format("font-woff"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-weight: 500;
  src: local("Spoqa Han Sans Neo Medium"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Medium.woff2") format("font-woff2"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Medium.woff") format("font-woff"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-weight: 400;
  src: local("Spoqa Han Sans Neo Regular"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Regular.woff2") format("font-woff2"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Regular.woff") format("font-woff"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-weight: 300;
  src: local("Spoqa Han Sans Neo Light"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Light.woff2") format("font-woff2"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Light.woff") format("font-woff"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-weight: 100;
  src: local("Spoqa Han Sans Neo Thin"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Thin.woff2") format("font-woff2"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Thin.woff") format("font-woff"), url("~@/assets/font/spoqa/SpoqaHanSansNeo-Thin.ttf") format("truetype");
}
/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* HTML5 `hidden` 속성 강제 — .field { display: flex } 등이 덮어쓰는 것 차단 */
[hidden] {
  display: none !important;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section, summary, time, mark,
audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-text-size-adjust: none;
}

article, aside, canvas, details, figcaption, figure, footer,
header, hgroup, menu, nav, section, summary {
  display: block;
}

html, body {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
  min-width: 960px;
}

body {
  background: var(--Color-BG-Page);
  color: var(--Color-Text-OnBG-Primary);
  font-family: "Pretendard", sans-serif, verdana;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

ul, ol, li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

img, input, textarea, select, button {
  vertical-align: middle;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  border: 0;
  cursor: pointer;
  background: transparent;
}
button:focus {
  outline: none;
}

img {
  max-width: 100%;
  display: block;
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--Color-Stroke-Subtle);
  border-radius: 9px;
  border: 6px solid var(--Color-BG-Page);
  border-right-width: 4px;
  border-bottom-width: 4px;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
  -webkit-border-radius: 15px;
  border-radius: 15px;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
}

/* ==========================================================================
   Custom cursor — Smart Tracker (랜딩 페이지 전역)
   ----------------------------------------------------------------------------
   PNG 115×70. 컴포넌트들이 `cursor: pointer` 를 명시적으로 세팅한 경우가 많아
   specificity 경쟁을 피하기 위해 `!important` 를 사용합니다. 이미지 커서가
   브랜드 정체성이라 의도적으로 전역 강제 적용합니다.
   ========================================================================== */
.landing-page,
.landing-page *,
.landing-page *::before,
.landing-page *::after,
.signup-select,
.signup-select *,
.signup-select *::before,
.signup-select *::after {
  /* 두 번째/세 번째 숫자 = hotspot(x, y). 시각적 화살촉 끝과 일치해야 작은 버튼도 정확히 클릭됨 */
  cursor: url("../images/icon-Smart-Tracker.png") 0 0, auto !important;
}
.landing-page,
.signup-select {
  /* <a href> 명시적 보강 — UA 스타일이 cursor:pointer 를 강하게 거는 footer-links 등에서
     specificity(0,1,0) 만으로는 일부 브라우저에서 fallback 으로 떨어지는 케이스 차단.
     fallback 도 pointer 로 통일해 이미지 미로드 시에도 다른 요소(default 화살표)와 시각적으로 구분되지 않게 함 */
}
.landing-page a,
.landing-page a:hover,
.landing-page a:focus,
.landing-page a:active,
.landing-page a:visited,
.signup-select a,
.signup-select a:hover,
.signup-select a:focus,
.signup-select a:active,
.signup-select a:visited {
  cursor: url("../images/icon-Smart-Tracker.png") 0 0, pointer !important;
}
.landing-page,
.signup-select {
  /* 텍스트 입력만 caret 유지 */
}
.landing-page input[type=text],
.landing-page input[type=search],
.landing-page input[type=email],
.landing-page input[type=password],
.landing-page input[type=url],
.landing-page input[type=tel],
.landing-page input[type=number],
.landing-page textarea,
.signup-select input[type=text],
.signup-select input[type=search],
.signup-select input[type=email],
.signup-select input[type=password],
.signup-select input[type=url],
.signup-select input[type=tel],
.signup-select input[type=number],
.signup-select textarea {
  cursor: text !important;
}
.landing-page,
.signup-select {
  /* 비활성 요소는 not-allowed */
}
.landing-page :disabled,
.landing-page [aria-disabled=true],
.signup-select :disabled,
.signup-select [aria-disabled=true] {
  cursor: not-allowed !important;
}

/* Options row (checkbox + forgot password) */
.options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.checkbox-row .checkbox {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: var(--Color-BG-Field);
  border: 1.5px solid var(--Color-Stroke-Field);
  border-radius: var(--r-sm);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.checkbox-row .checkbox:checked {
  background: var(--Color-Surface-Brand);
  border-color: var(--Color-Surface-Brand);
}
.checkbox-row .checkbox:checked::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: url(../images/icon-check.svg) no-repeat center 50%;
}
.checkbox-row label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--Color-Text-OnBG-Secondary);
}

.forgot-link {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--Color-Text-OnBG-Secondary);
  transition: color 0.15s ease;
}
.forgot-link:hover {
  color: var(--Color-Text-OnBG-Primary);
}

/* Form */
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  width: 100%;
}

.input-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.field .field-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Primary);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 4px;
}
.field .field-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 45px;
  padding: 11px 12px;
  background: var(--Color-BG-Field);
  border: 1px solid var(--Color-Stroke-Field);
  border-radius: var(--r-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.field .field-input .field-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--Color-Text-OnBG-Tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.field .field-input .field-icon i {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.field .field-input .field-icon i.icon-id {
  background: url(../images/icon-id.svg) no-repeat center;
}
.field .field-input .field-icon i.icon-pw {
  background: url(../images/icon-pw.svg) no-repeat center;
}
.field .field-input .icon-check {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: url(../images/icon-readOnly.svg) no-repeat center;
}
.field .field-input input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  height: 22px;
  line-height: 22px;
  color: var(--Color-Text-OnBG-Primary);
}
.field .field-input input::placeholder {
  color: var(--Color-Text-OnBG-Tertiary);
  font-weight: 400;
}
.field .field-input input {
  /* Chrome/Edge/Safari 자동완성(autofill) 시스템 배경/텍스트 컬러 무력화
     - box-shadow inset 으로 input 배경을 강제 덮어쓰기
     - text-fill-color 로 글자 색 유지
     - transition 트릭으로 색상 적용 지연 → 깜빡임 방지 */
}
.field .field-input input:-webkit-autofill, .field .field-input input:-webkit-autofill:hover, .field .field-input input:-webkit-autofill:focus, .field .field-input input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--Color-BG-Field) inset !important;
  box-shadow: 0 0 0 1000px var(--Color-BG-Field) inset !important;
  -webkit-text-fill-color: var(--Color-Text-OnBG-Primary) !important;
  caret-color: var(--Color-Text-OnBG-Primary);
  transition: background-color 9999s ease-out, color 9999s ease-out;
}
.field .field-input {
  /* 비밀번호 표시/숨김 토글 버튼
     기본은 숨김. 인풋에 값이 있을 때만 노출 (input:not(:placeholder-shown) ~ .toggle-password) */
}
.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #222222;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #ffffff;
}
.toggle-password svg {
  width: 18px;
  height: 18px;
}
.toggle-password:hover {
  color: var(--Color-Text-OnBG-Secondary);
}
.toggle-password .icon-eye-off {
  display: none;
}
.toggle-password.is-visible .icon-eye {
  display: none;
}
.toggle-password.is-visible .icon-eye-off {
  display: inline-flex;
}

.field .field-input input:not(:placeholder-shown) ~ .toggle-password {
  display: inline-flex;
}
.field .field-input:focus-within {
  border: 1.5px solid var(--Color-Surface-Brand);
  box-shadow: 0 0 0 var(--Spacing-1, 2px) var(--Color-Surface-BrandMuted, #BBB6E4);
}
.field {
  /* ─────────────────────────────────────────────────────────────────────────
     Dropdown — .field-input 과 평행한 셀렉트 UI · Figma 543:4162
     마크업:
       <div class="field-dropdown" data-placeholder="의사">
         <button type="button" class="field-dropdown__toggle">
           <span class="field-dropdown__value"></span>
           <span class="field-dropdown__chevron"><svg .../></span>
         </button>
         <div class="dropdown-list">
           <ul>
             <li><button type="button">의사</button></li>
             <li><button type="button">병원장</button></li>
           </ul>
         </div>
       </div>
     ───────────────────────────────────────────────────────────────────────── */
}
.field .field-dropdown {
  position: relative;
  width: 100%;
}
.field .field-dropdown .field-dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 11px 12px;
  background: var(--Color-BG-Field);
  border: 1px solid var(--Color-Stroke-Field);
  border-radius: var(--r-lg);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: var(--Color-Text-OnBG-Primary);
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field .field-dropdown .field-dropdown__toggle .field-dropdown__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 값 미선택(placeholder) — JS 가 .is-placeholder 클래스 부여 */
}
.field .field-dropdown .field-dropdown__toggle .field-dropdown__value.is-placeholder {
  color: var(--Color-Text-OnBG-Tertiary);
  font-weight: 400;
}
.field .field-dropdown .field-dropdown__toggle .field-dropdown__chevron {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--Color-Text-OnBG-Tertiary);
  transition: transform 0.15s ease, color 0.15s ease;
}
.field .field-dropdown .field-dropdown__toggle .field-dropdown__chevron .icon-chevron-down {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: url(../images/icon-dropdown.svg) no-repeat center;
}
.field .field-dropdown .field-dropdown__toggle:hover {
  border-color: var(--Color-Stroke-Field-Hover, var(--Color-Stroke-Field));
}
.field .field-dropdown .field-dropdown__toggle:focus {
  outline: none;
  border: 1.5px solid var(--Color-Surface-Brand);
  box-shadow: 0 0 0 var(--Spacing-1, 2px) var(--Color-Surface-BrandMuted, #BBB6E4);
}
.field .field-dropdown .dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--Color-BG-Field, #fff);
  border: 1px solid var(--Color-Stroke-Field);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.field .field-dropdown .dropdown-list ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.field .field-dropdown .dropdown-list li > button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: var(--Color-Text-OnBG-Primary);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm, 6px);
  transition: background-color 0.12s ease, color 0.12s ease;
}
.field .field-dropdown .dropdown-list li > button.is-selected {
  color: var(--Color-Text-OnBG-Brand, var(--Color-Surface-Brand));
  font-weight: 600;
}
.field .field-dropdown {
  /* 열린 상태 — 토글 강조 + chevron 180° */
}
.field .field-dropdown.is-open .field-dropdown__toggle {
  border: 1.5px solid var(--Color-Surface-Brand);
  box-shadow: 0 0 0 var(--Spacing-1, 2px) var(--Color-Surface-BrandMuted, #BBB6E4);
}
.field .field-dropdown.is-open .field-dropdown__toggle .field-dropdown__chevron {
  transform: rotateX(180deg);
  color: var(--Color-Text-OnBG-Primary);
}
.field .field-dropdown {
  /* 비활성 */
}
.field .field-dropdown.is-disabled .field-dropdown__toggle, .field .field-dropdown[aria-disabled=true] .field-dropdown__toggle {
  background: var(--Color-BG-Field-Disabled);
  color: var(--Color-Text-OnBG-Tertiary);
  cursor: not-allowed;
  pointer-events: none;
}
.field {
  /* 에러 헬퍼 텍스트 */
}
.field .field-error {
  display: none;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--Color-Text-Error);
}
.field {
  /* 에러 상태 */
}
.field.is-error .field-input {
  border: 1.5px solid var(--Color-Stroke-Field-Error);
}
.field.is-error .field-input:focus-within {
  border: 1.5px solid var(--Color-Stroke-Field-Error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.field.is-error .field-error {
  display: block;
}
.field.is-error .field-help {
  display: none;
}
.field.is-error { /* 에러 시 안내 텍스트 숨김 (만료 등) */ }
.field {
  /* 성공 헬퍼 텍스트 — .field-error 와 평행 */
}
.field .field-success {
  display: none;
  font-family: "Pretendard", sans-serif;
  font-size: 13px; /* Caption/caption */
  font-weight: 400;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Success, #107A3C);
}
.field {
  /* 성공 상태 — .is-error 와 평행 */
}
.field.is-success .field-success {
  display: block;
}
.field {
  /* ─────────────────────────────────────────────────────────────────────────
     Disabled — input 에 [disabled] 가 있을 때 자동 적용 (또는 .field--disabled)
     ───────────────────────────────────────────────────────────────────────── */
}
.field.field--disabled .field-input,
.field .field-input:has(input:disabled) {
  background: var(--Color-BG-Field-Disabled);
  border-color: var(--Color-Stroke-Field);
  cursor: not-allowed;
}
.field.field--disabled .field-input .field-icon,
.field.field--disabled .field-input .field-icon i,
.field .field-input:has(input:disabled) .field-icon,
.field .field-input:has(input:disabled) .field-icon i {
  opacity: 0.55;
}
.field.field--disabled .field-input input,
.field.field--disabled .field-input input::placeholder,
.field .field-input:has(input:disabled) input,
.field .field-input:has(input:disabled) input::placeholder {
  color: var(--Color-Text-OnBG-Tertiary);
  cursor: not-allowed;
  pointer-events: none;
}
.field.field--disabled .field-input .toggle-password,
.field .field-input:has(input:disabled) .toggle-password {
  color: var(--Color-Text-OnBG-Tertiary);
  pointer-events: none;
  opacity: 0.55;
}
.field.field--disabled .field-input:focus-within,
.field .field-input:has(input:disabled):focus-within {
  border: 1px solid var(--Color-Stroke-Field);
  padding: 11px 12px;
  box-shadow: none;
}
.field {
  /* ─────────────────────────────────────────────────────────────────────────
     Readonly — input 에 [readonly] 가 있을 때 자동 적용 (또는 .field--readonly)
     값이 읽기 가능해야 하므로 본문 텍스트 색은 유지, 배경만 살짝 변경.
     ───────────────────────────────────────────────────────────────────────── */
}
.field.field--readonly .field-input,
.field .field-input:has(input[readonly]) {
  border: 1px solid var(--Color-Stroke-Field-Default, #D6DAE8);
  background: var(--Color-BG-Field-Disabled, #F7F7FB);
}
.field.field--readonly .field-input input,
.field .field-input:has(input[readonly]) input {
  cursor: default;
  color: var(--Color-Text-OnBG-Primary, #222);
}
.field.field--readonly .field-input:focus-within,
.field .field-input:has(input[readonly]):focus-within {
  /* 포커스는 들어오되 강조 halo 는 약화 */
  border: 1px solid var(--Color-Stroke-Field);
  padding: 11px 12px;
  box-shadow: 0 0 0 2px rgba(75, 48, 243, 0.08);
}

/* Submit area */
.submit-area {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  align-items: center;
  width: 100%;
  margin-top: 20px;
}

.btn-submit {
  width: 100%;
  height: 48px;
  padding: 14px 24px;
  background: var(--Color-Surface-AvatarMain);
  color: var(--Color-Text-OnFill-Primary);
  border-radius: var(--r-lg);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-submit:hover {
  background: #2a1873;
}
.btn-submit:active {
  transform: translateY(1px);
}

.signup-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: 13px;
  line-height: 1.4;
}
.signup-hint .hint-text {
  font-weight: 500;
  color: var(--Color-Text-OnBG-Tertiary);
}
.signup-hint .signup-link {
  font-weight: 700;
  color: var(--Color-Text-OnBG-Brand);
  transition: opacity 0.15s ease;
}
.signup-hint .signup-link:hover {
  opacity: 0.8;
}

i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
i.icon-eye {
  width: 18px;
  height: 18px;
  background: url(../images/icon-eye.svg) no-repeat center;
}
i.icon-eye-off {
  width: 18px;
  height: 18px;
  background: url(../images/icon-EyeOff.svg) no-repeat center;
}

/* ==========================================================================
   Design tokens — Figma 변수 매핑
   ========================================================================== */
:root {
  /* Color · Surface / Text / Stroke */
  --Color-BG-Page: #ffffff;
  --Color-BG-Panel: #f7f7fb;
  --Color-BG-Elevated: #ffffff;
  --Color-Stroke-Subtle: #e6e9ec;
  --Color-Text-OnBG-Primary: #222222;
  --Color-Text-OnBG-Secondary: #666666;
  --Color-Text-OnBG-Tertiary: #999999;
  --Color-Text-OnBG-Brand: #4b30f3;
  --Color-Text-OnFill-Primary: #ffffff;
  --Color-Text-OnFill-Brand: #4b30f3;
  --Color-Surface-Brand: #4b30f3;
  --Color-Surface-BrandMuted: #bbb6e4;
  --Color-Surface-BrandLight: #e9e9fe;
  --Color-Surface-NeutralStrong:#222222;
  --Color-Surface-InfoSubtle: #eef0f8;
  --Color-Surface-WarningSubtle:#fffaf2;
  --Color-Text-OnBG-Warning: #a06a08;
  --Landing-BG-Ink-Deep: #0b0b14;
  --Landing-BG-Glass-NAV: rgba(255, 255, 255, .78);
  --Landing-Text-OnDark: #ffffff;
  /* Spacing scale (px) */
  --sp-0: 0;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-8: 16px;
  --sp-10: 20px;
  --sp-12: 24px;
  /* Landing spacing */
  --L-sp-14: 28px;
  --L-sp-16: 32px;
  --L-sp-18: 36px;
  --L-sp-24: 48px;
  --L-sp-28: 56px;
  --L-sp-32: 64px;
  --L-sp-36: 72px;
  --L-sp-40: 80px;
  --L-sp-50: 100px;
  --L-sp-60: 120px;
  --L-sp-outer: 120px;
  /* Radius */
  --r-base: 8px;
  --r-xl: 12px;
  --r-full: 9999px;
  --L-r-xl-card:16px;
  --L-r-2xl: 24px;
  --L-r-3xl: 32px;
  /* Effects */
  --shadow-glass-nav: 0 1px 4px rgba(11, 11, 20, .04), 0 4px 20px rgba(75, 48, 243, .06);
  --shadow-light-ondark: 0 2px 6px rgba(0, 0, 0, .15), 0 8px 22px rgba(255, 255, 255, .18);
  --shadow-brand-strong: 0 8px 22px rgba(75, 48, 243, .45);
  /* Landing layout */
  --L-container: 1200px;
  --L-content: 1136px;
  --L-narrow: 960px;
}

/* ==========================================================================
   Layout container
   ========================================================================== */
.landing-page {
  width: 100%;
  background: var(--Color-BG-Page);
}

/* Typography presets used across sections */
.display-xl { /* 64 / 1.3 / -3 */
  font-size: 64px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -1.92px;
  color: var(--Color-Text-OnBG-Primary);
}

.display-lg { /* 46 / 1.15 / -3 */
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.38px;
  color: var(--Color-Text-OnBG-Primary);
}

.body-lg { /* 17 / 1.55 / -.5 */
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.085px;
  color: var(--Color-Text-OnBG-Secondary);
}

.heading-bd { /* 16 / 1.5 */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Secondary);
}

/* Brand logo lockup ---------------------------------------------------------- */
.nav-brand,
.footer-logo {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) 0;
}
.nav-brand .brand-logo,
.footer-logo .brand-logo {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}
.nav-brand .brand-logo img,
.footer-logo .brand-logo img {
  width: 16px;
  height: 16px;
}
.nav-brand .brand-logo,
.footer-logo .brand-logo {
  margin-right: var(--sp-4);
}
.nav-brand .brand-name,
.footer-logo .brand-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Primary);
}

/* ==========================================================================
   NAV
   ========================================================================== */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: var(--sp-8) var(--sp-12);
  min-width: 960px;
}
.landing-nav .nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 960px;
  height: 60px;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-12);
  background: var(--Landing-BG-Glass-NAV);
  border: 1px solid var(--Color-Stroke-Subtle);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-glass-nav);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.landing-nav .nav-pill::after { /* inner highlight */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}
.landing-nav .nav-links {
  display: flex;
  align-items: center;
}
.landing-nav .nav-links a {
  display: inline-block;
  padding: var(--sp-6) var(--sp-8);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Secondary);
  transition: color 0.15s ease;
}
.landing-nav .nav-links a:hover {
  color: var(--Color-Text-OnBG-Primary);
}
.landing-nav .nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  min-width: 172px;
}
.landing-nav .nav-actions .btn-text {
  padding: var(--sp-6) var(--sp-8);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Primary);
  border-radius: var(--r-full);
  transition: background-color 0.15s ease;
}
.landing-nav .nav-actions .btn-text:hover {
  background: rgba(0, 0, 0, 0.04);
}
.landing-nav {
  /* Sign-up CTA that fades in once the page is scrolled */
}
.landing-nav .nav-signup {
  padding: var(--sp-5) var(--sp-10);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transform-origin: right center;
  max-width: 0;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease, max-width 0.35s ease, padding-left 0.35s ease, padding-right 0.35s ease, margin-left 0.25s ease, visibility 0s linear 0.35s;
}
.landing-nav.is-scrolled .nav-signup {
  opacity: 1;
  transform: translateY(0) scale(1);
  max-width: 160px;
  padding-left: var(--sp-10);
  padding-right: var(--sp-10);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s, max-width 0.35s ease, padding-left 0.35s ease, padding-right 0.35s ease, margin-left 0.25s ease, visibility 0s linear 0s;
}

/* ==========================================================================
   Common buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  border-radius: var(--r-xl);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}
.btn .i {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.btn:active {
  transform: translateY(1px);
}

/* Brand pill — used on Hero */
.btn-brand-pill {
  padding: var(--sp-6) var(--sp-10);
  background: var(--Color-Surface-Brand);
  color: var(--Color-Text-OnFill-Primary);
  border-radius: var(--r-full);
  font-size: 16px;
  font-weight: 700;
}
.btn-brand-pill:hover {
  background: #3f25e0;
}

/* Dark fill — PATHS cta */
.btn-dark {
  width: 100%;
  height: 50px;
  padding: var(--sp-6) var(--sp-10);
  background: var(--Color-Surface-NeutralStrong);
  color: var(--Color-Text-OnFill-Primary);
}
.btn-dark:hover {
  background: #0f0f18;
}

/* Light on dark — used in Spotlight & BottomCTA */
.btn-light-ondark {
  position: relative;
  padding: var(--sp-8) var(--L-sp-14);
  background: var(--Color-BG-Page);
  color: var(--Color-Text-OnFill-Brand);
  box-shadow: var(--shadow-light-ondark);
  line-height: 16px;
  height: 56px;
}
.btn-light-ondark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}

/* Brand strong gradient — BottomCTA primary */
.btn-brand-strong {
  position: relative;
  padding: var(--sp-8) var(--L-sp-14);
  background: linear-gradient(180deg, #6b53f5 0%, #4b30f3 100%);
  color: var(--Color-Text-OnFill-Primary);
  box-shadow: var(--shadow-brand-strong);
}
.btn-brand-strong::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
}

/* Ghost on dark — Hero secondary CTA */
.btn-ghost-ondark {
  padding: var(--sp-6) var(--sp-10);
  background: rgba(36, 36, 54, 0.9);
  color: var(--Color-Text-OnFill-Primary);
  border: 1px solid var(--Color-Stroke-Subtle);
  border-radius: var(--r-full);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.btn-ghost-ondark:hover {
  background: rgb(36, 36, 54);
}

/* ==========================================================================
   HERO  (dark glass card)
   ========================================================================== */
.hero {
  display: flex;
  justify-content: center;
  padding: var(--sp-8) var(--L-sp-outer);
  background: var(--Color-BG-Page);
}
.hero .hero-card {
  position: relative;
  width: 100%;
  max-width: 960px;
  height: 946px;
  overflow: hidden;
  border-radius: var(--L-r-2xl);
  background: #1f2030;
  color: var(--Landing-Text-OnDark);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 93px;
}
.hero .hero-eyebrow {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #d6dae8;
  white-space: nowrap;
}
.hero .hero-title {
  margin-top: 12px;
  width: 586px;
  text-align: center;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -1.92px;
  color: var(--Landing-Text-OnDark);
}
.hero .hero-desc {
  margin-top: 28px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #d6dae8;
}
.hero .hero-actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.hero .hero-actions .btn {
  padding: var(--sp-6) var(--sp-10);
  border-radius: var(--r-full);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.hero .hero-visual {
  position: absolute;
  left: 50%;
  top: 514px;
  transform: translateX(-50%);
  width: 673px;
  max-width: 100%;
  pointer-events: none;
}
.hero .hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   PATHS
   ========================================================================== */
.paths {
  display: flex;
  justify-content: center;
  padding: var(--L-sp-36) var(--L-sp-60);
}
.paths .paths-inner {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: var(--L-sp-18);
}
.paths .section-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  align-items: flex-start;
}
.paths .section-header .body-lg {
  max-width: 511px;
}
.paths .paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.paths .path-card {
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  border-radius: var(--Spacing-8, 16px);
  border: var(--BorderWidth-thin, 1px) solid var(--Color-BG-Brand, #EEF0F8);
  background: var(--Color-BG-Page, #FFF);
}
.paths .path-card:hover {
  border: var(--BorderWidth-thin, 1px) solid var(--Color-Stroke-Default, #DCDCDD);
  background: var(--Color-BG-Page, #FFF);
  box-shadow: 0 5px 18px 5px rgba(16, 24, 40, 0.09);
}
.paths .path-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Primary);
}
.paths .path-sub {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Secondary);
}
.paths .path-cta {
  margin-top: 32px;
}
.paths .path-features {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.paths .path-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Primary);
}
.paths .path-features li .check {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}
.paths .path-features li.muted {
  color: var(--Color-Text-OnBG-Tertiary);
}

/* ==========================================================================
   SPOTLIGHT
   ========================================================================== */
.spotlight {
  display: flex;
  justify-content: center;
  padding: var(--L-sp-24) 0;
}
.spotlight .spotlight-card {
  width: 100%;
  padding: var(--L-sp-28);
  background: var(--Landing-BG-Ink-Deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--Landing-Text-OnDark);
}
.spotlight .spotlight-title {
  max-width: 1200px;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.38px;
  color: var(--Landing-Text-OnDark);
  text-align: center;
}
.spotlight .spotlight-desc {
  margin-top: 20px;
  max-width: 480px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.19px;
  color: var(--Landing-Text-OnDark);
}
.spotlight .btn-light-ondark {
  margin-top: 28px;
}
.spotlight .btn-light-ondark i {
  width: 16px;
  height: 16px;
}
.spotlight .btn-light-ondark i.icon-download-purple {
  background: url("../images/icon-download-purple.svg") no-repeat center;
}

/* ==========================================================================
   FEATURES
   ========================================================================== */
.features {
  padding: var(--L-sp-50) 0 var(--L-sp-50) var(--L-sp-60);
}
.features .features-inner {
  display: flex;
  flex-direction: column;
  gap: var(--L-sp-24);
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
.features .section-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.features .section-header .display-xl {
  max-width: 836px;
}
.features .section-header .heading-bd {
  max-width: 640px;
}
.features .features-grid {
  display: flex;
  gap: var(--sp-8);
  padding-right: var(--L-sp-60); /* 끝까지 스크롤 시 우측 120px 여백 */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scroll-padding-right: var(--L-sp-60);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
  overscroll-behavior-x: contain;
}
.features .features-grid::-webkit-scrollbar {
  display: none;
}
.features .feature-card {
  flex: 0 0 300px;
  width: 300px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--L-sp-14);
  background: var(--Color-BG-Elevated);
  border: 1px solid var(--Color-Stroke-Subtle);
  border-radius: var(--L-r-xl-card);
  cursor: pointer;
  scroll-snap-align: start;
}
.features .feature-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
.features .feature-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--Color-BG-Panel);
  border: 1px solid var(--Color-Stroke-Subtle);
  border-radius: var(--r-xl);
}
.features .feature-icon img {
  width: 24px;
  height: 24px;
}
.features .feature-text {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.features .feature-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.44px;
  color: var(--Color-Text-OnBG-Primary);
}
.features .feature-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Secondary, #666);
  float: left;
}
.features .feature-desc .float-l {
  float: left;
}
.features .feature-desc .hl-brand {
  font-weight: 700;
  color: var(--Color-Text-OnBG-Brand);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.features .feature-note {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--Color-Text-OnBG-Primary);
  margin-top: 24px;
}
.features .feature-note .chip-check {
  flex: 0 0 16px;
}
.features {
  /* Platform chip — top-right pill on each feature card */
}
.features .platform-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 4px 10px;
  border-radius: 16px;
  background: var(--Color-BG-Panel);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: var(--Color-Text-OnBG-Secondary);
  white-space: nowrap;
}
.features .platform-chip .chip-check-gray {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../images/icon-check-gray.svg) no-repeat center;
}
.features .platform-chip--brand {
  background: var(--Color-Surface-BrandLight);
  color: var(--Color-Text-OnBG-Brand);
  gap: var(--sp-2);
}
.features .features-pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-4);
  padding-right: var(--L-sp-60);
}
.features .features-pager .pager-btn {
  width: 32px;
  height: 32px;
  padding: 6px;
  background: var(--Color-Surface-InfoSubtle);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, opacity 0.2s ease;
}
.features .features-pager .pager-btn img {
  width: 20px;
  height: 20px;
}
.features .features-pager .pager-btn:hover:not(:disabled) {
  background: #e2e6f1;
}
.features .features-pager .pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.features .features-footnote {
  max-width: 1200px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Secondary);
}

/* Brand check icon (CSS-drawn so we don't need a new asset) */
.chip-check {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  position: relative;
}
.chip-check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--Color-Text-OnBG-Brand);
  border-bottom: 1.5px solid var(--Color-Text-OnBG-Brand);
  transform: translate(-50%, -65%) rotate(-45deg);
}
.chip-check--white::after {
  border-left-color: #fff;
  border-bottom-color: #fff;
}

.chip-recommend {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  position: relative;
  background: url(../images/icon-recomm.svg) no-repeat center;
}
.chip-recommend--white {
  background: url(../images/icon-recomm-white.svg) no-repeat center;
}

/* ==========================================================================
   COMPARE
   ========================================================================== */
.compare {
  position: relative;
  padding: var(--L-sp-40) var(--L-sp-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  color: var(--Landing-Text-OnDark);
  background: radial-gradient(circle at 15% 30%, rgba(139, 111, 255, 0.2), rgba(139, 111, 255, 0) 40%), radial-gradient(circle at 90% 80%, rgba(75, 48, 243, 0.4), rgba(75, 48, 243, 0) 40%), linear-gradient(180deg, #1f2030 0%, #0b0b14 100%);
}
.compare .section-header--center {
  align-items: center;
  text-align: center;
  max-width: 960px;
}
.compare .section-header--center h2, .compare .section-header--center p {
  color: var(--Landing-Text-OnDark);
}
.compare .section-header--center p {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.compare .compare-cards {
  margin-top: var(--L-sp-24);
  width: 960px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--sp-10);
}
.compare .compare-card-wrap {
  position: relative;
  padding-top: var(--sp-12);
  width: 472px;
  display: flex;
  flex-direction: column;
}
.compare .compare-card-wrap--brand .compare-card {
  padding-top: 32px;
}
.compare .compare-card {
  width: 472px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--L-sp-14);
  padding: var(--L-sp-16);
  background: var(--Color-BG-Page);
  border: 1px solid var(--Color-Stroke-Subtle);
  border-radius: var(--sp-12);
  color: var(--Color-Text-OnBG-Primary);
}
.compare .compare-card--brand {
  border-color: transparent;
}
.compare {
  /* "추천" floating badge */
}
.compare .cc-recommend {
  position: absolute;
  top: 0;
  right: 23px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  height: 40px;
  padding: var(--sp-4) var(--sp-10);
  background: #7c5cfa;
  color: var(--Landing-Text-OnDark);
  border-radius: var(--sp-10);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 6px 16px rgba(124, 92, 250, 0.35);
}
.compare .cc-recommend .chip-check {
  width: 16px;
  height: 16px;
}
.compare .cc-recommend .chip-check::after {
  border-left-color: #fff;
  border-bottom-color: #fff;
}
.compare .cc-head-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.compare .cc-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.compare .cc-titlebar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.compare .cc-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Primary, #222);
  white-space: nowrap;
}
.compare .cc-title--brand {
  color: var(--Color-Text-OnBG-Brand);
}
.compare .cc-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--Color-Text-OnBG-Primary, #222);
}
.compare .cc-dot--brand {
  background: var(--Color-Text-OnBG-Brand);
}
.compare .cc-sub {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.085px;
  color: var(--Color-Text-OnBG-Secondary);
}
.compare .cc-bignum {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-5);
}
.compare .cc-bignum .num {
  font-size: 84px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -2.94px;
  color: var(--Color-Text-OnBG-Primary);
}
.compare .cc-bignum .unit-stack {
  height: 87px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  padding-top: 47px;
}
.compare .cc-bignum .unit {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Tertiary);
  white-space: nowrap;
}
.compare .cc-bignum .unit-stack-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.compare .cc-bignum .unit-circle {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #D9D9D9;
  border-radius: 50%;
}
.compare .cc-bignum--brand .num {
  color: var(--Color-Text-OnBG-Brand);
}
.compare .cc-divider {
  height: 1px;
  width: 100%;
  background: var(--Color-Stroke-Subtle);
  /* Trailing strong divider pushes upsell/legend to bottom when card stretches */
}
.compare .cc-divider--strong {
  background: #dcdcdd;
  margin-top: auto;
}
.compare .cc-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.compare .cc-groups--brand {
  gap: var(--sp-10);
}
.compare .cc-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.compare .cc-group-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Primary);
}
.compare .cc-group ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.compare .cc-group ul li {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.085px;
  color: var(--Color-Text-OnBG-Secondary);
}
.compare .cc-extras {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.compare .cc-extras li {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-6);
  background: var(--Color-BG-Panel);
  border-radius: var(--r-xl);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.085px;
  color: var(--Color-Text-OnBG-Primary);
}
.compare .cc-extras li + li {
  margin-top: 2px;
}
.compare .cc-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--Color-BG-Panel);
  border-radius: var(--sp-6);
}
.compare .cc-panel .cc-panel-title {
  padding: 0 var(--sp-4);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Brand);
}
.compare .cc-panel .cc-extras li {
  background: transparent;
}
.compare .cc-upsell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--sp-10);
  padding: var(--sp-4) var(--sp-6);
}
.compare .cc-upsell-text {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Secondary);
}
.compare .cc-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-xl);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Secondary);
}

/* ==========================================================================
   BOTTOM CTA
   ========================================================================== */
.bottom-cta {
  display: flex;
  justify-content: center;
  padding: var(--L-sp-40) var(--L-sp-16);
}
.bottom-cta .bottom-cta-card {
  width: 100%;
  max-width: 1136px;
  padding: var(--L-sp-36) var(--L-sp-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  text-align: center;
  border-radius: var(--L-r-3xl);
  color: var(--Landing-Text-OnDark);
  background: radial-gradient(circle at 15% 30%, rgba(139, 111, 255, 0.2), rgba(139, 111, 255, 0) 40%), radial-gradient(circle at 90% 80%, rgba(75, 48, 243, 0.4), rgba(75, 48, 243, 0) 40%), linear-gradient(180deg, #1f2030 0%, #0b0b14 100%);
}
.bottom-cta .bottom-cta-title {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.38px;
  color: var(--Landing-Text-OnDark);
}
.bottom-cta .bottom-cta-desc {
  max-width: 540px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.085px;
  color: var(--Landing-Text-OnDark);
}
.bottom-cta .bottom-cta-buttons {
  margin-top: var(--sp-10);
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
}
.bottom-cta .bottom-cta-buttons .btn {
  width: 200px;
  font-size: 16px;
}
.bottom-cta .cta-with-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}
.bottom-cta .cta-hint {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #d6dae8;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.landing-footer {
  display: flex;
  justify-content: center;
  padding: 0 var(--L-sp-60);
  background: var(--Color-BG-Page);
}
.landing-footer .footer-inner {
  width: 100%;
  max-width: 1200px;
  padding: var(--L-sp-24) var(--L-sp-18) var(--L-sp-40);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.landing-footer .footer-top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-10);
}
.landing-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.landing-footer .footer-brand .brand-logo {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.landing-footer .footer-brand .brand-logo img {
  width: 16px;
  height: 16px;
}
.landing-footer .footer-brand .brand-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Primary);
}
.landing-footer .footer-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.landing-footer .footer-meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Primary);
}
.landing-footer .meta-divider {
  display: inline-block;
  width: 1px;
  height: 8px;
  background: var(--Color-Stroke-Subtle);
}
.landing-footer .footer-bottom {
  padding-top: var(--sp-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--Color-Stroke-Subtle);
  color: var(--Color-Text-OnBG-Primary);
}
.landing-footer .copyright {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: transparent;
  background: url(../images/img-copyright-Info.png) no-repeat left;
  background-size: 260px;
  width: 260px;
  height: 15px;
  display: inline-block;
}
.landing-footer .footer-links {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  color: var(--Color-Text-OnBG-Secondary);
}
.landing-footer .footer-links li a {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

/* ==========================================================================
   Utility helpers (legacy)
   ========================================================================== */
.hidden {
  display: none !important;
}

.show {
  display: block !important;
}

/* ==========================================================================
   Landing 2 — 가입 방식 선택 (signup-select)
   ========================================================================== */
.signup-select {
  width: 100%;
  background: var(--Color-BG-Page);
  /* NAV — 로그인 버튼이 brand 필 형태인 점 외에는 .landing-nav 와 동일 */
}
.signup-select .landing-nav {
  position: sticky;
}
.signup-select .landing-nav .nav-pill {
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-12);
}
.signup-select .landing-nav .nav-aside {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.signup-select .landing-nav .nav-hint {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Secondary);
}
.signup-select .landing-nav .btn-login {
  padding: var(--sp-6) var(--sp-10);
  background: var(--Color-Surface-Brand);
  color: var(--Color-Text-OnFill-Primary);
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  transition: background-color 0.15s ease;
}
.signup-select .landing-nav .btn-login:hover {
  background: #3f25e0;
}
.signup-select {
  /* Main container */
}
.signup-select .select-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--L-sp-28) 0;
}
.signup-select .select-inner {
  width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--L-sp-28);
}
.signup-select {
  /* Hero heading */
}
.signup-select .select-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
}
.signup-select .select-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  text-align: center;
}
.signup-select .select-title-group .eyebrow {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Secondary);
}
.signup-select .select-title-group .title {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.38px;
  color: var(--Color-Text-OnBG-Primary);
}
.signup-select .select-sub {
  max-width: 511px;
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.085px;
  color: var(--Color-Text-OnBG-Secondary);
}
.signup-select {
  /* Path grid */
}
.signup-select .select-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: end;
  width: 900px;
}
.signup-select .pathx {
  display: flex;
  flex-direction: column;
  background: var(--Color-BG-Page);
  border: 1px solid var(--Color-Stroke-Subtle);
  border-radius: var(--L-r-xl-card);
  overflow: hidden;
}
.signup-select .pathx-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: 36px 32px 32px;
}
.signup-select .pathx--web .pathx-body {
  height: 607px;
}
.signup-select .pathx-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.signup-select .pathx-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.signup-select .pathx-headline .pathx-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Primary);
}
.signup-select .pathx-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-6);
  background: var(--Color-BG-Panel);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Secondary);
  white-space: nowrap;
}
.signup-select .pathx-chip--warning {
  background: var(--Color-Surface-WarningSubtle);
  color: var(--Color-Text-OnBG-Warning);
}
.signup-select .pathx-desc {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Secondary);
}
.signup-select {
  /* CTAs */
}
.signup-select .pathx-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  height: 50px;
  padding: var(--sp-6) var(--sp-10);
  border-radius: var(--L-r-2xl);
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  transition: background-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.signup-select .pathx-cta .i {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.signup-select .pathx-cta--dark {
  background: var(--Color-Surface-NeutralStrong);
  color: var(--Color-Text-OnFill-Primary);
}
.signup-select .pathx-cta--dark:hover {
  background: #0f0f18;
}
.signup-select .pathx-cta--brand {
  background: var(--Color-Surface-Brand);
  color: var(--Color-Text-OnFill-Primary);
}
.signup-select .pathx-cta--brand:hover {
  background: #3f25e0;
}
.signup-select {
  /* Top banner (Desktop variant 상단 추천 라벨) */
}
.signup-select .pathx-top-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: var(--sp-6) var(--sp-10);
  background: var(--Color-Surface-BrandLight);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnFill-Brand);
}
.signup-select .pathx-footer {
  padding: 0 var(--L-sp-16) var(--L-sp-16);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Tertiary);
}
.signup-select {
  /* Feature list */
}
.signup-select .pathx-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-4) 0;
}
.signup-select .pathx-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--Color-Text-OnBG-Primary);
}
.signup-select .pathx-features li .check {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: inherit;
}
.signup-select .pathx-features li .label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.signup-select .pathx-features li.muted {
  color: var(--Color-Text-OnBG-Tertiary);
}
.signup-select .pathx-features li.muted .dash {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 1px;
  top: 8px;
  background: currentColor;
}
.signup-select .pathx-features li.muted .label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
.signup-select {
  /* Numbered steps */
}
.signup-select .pathx-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.signup-select .step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--sp-6) var(--sp-8);
  background: var(--Color-BG-Panel);
  border-radius: var(--L-r-xl-card);
}
.signup-select .step .step-num {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--Color-Surface-Brand);
  color: var(--Color-Text-OnFill-Primary);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.signup-select .step .step-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.signup-select .step .step-text .step-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Primary);
}
.signup-select .step .step-text .step-sub {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--Color-Text-OnBG-Secondary);
}
.signup-select {
  /* Bottom banner */
}
.signup-select .select-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 960px;
  padding: 28px 32px;
  border-radius: 20px;
  color: var(--Color-Text-OnBG-Primary);
}
.signup-select .select-banner .banner-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.signup-select .select-banner .banner-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--Color-Text-OnBG-Primary);
  cursor: pointer;
  transition: color 0.15s ease;
}
.signup-select .select-banner .banner-link:hover {
  color: var(--Color-Text-OnBG-Brand);
}

/* feature-card 를 클릭 가능한 카드로 표시 (LandingPage 의 features 섹션) */
.features .feature-card {
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

i {
  display: inline-block;
  width: 16px;
  height: 16px;
}
i.icon-arrow-cta {
  background: url("../images/icon-arrow-cta.svg") no-repeat center;
}
i.icon-download {
  background: url("../images/icon-download.svg") no-repeat center;
}
i.icon-download-purple {
  background: url("../images/icon-download-purple.svg") no-repeat center;
}

/*# sourceMappingURL=aiMedicalStyle.css.map */