@charset "utf-8";

/* ---------------------------------------------------------------------------
 * 토포AI 소개 페이지 — /service/ai
 *
 * v5 의 `app/(site)/ai/topoai-landing.css` 를 그대로 옮긴 것이다.
 * 모든 규칙이 `.tp-ai-landing` 안에 갇혀 있고 토큰도 그 상자에 걸려 있어
 * 사이트의 다른 CSS 와 섞이지 않는다 — 그래서 손대지 않고 옮길 수 있었다.
 *
 * ⚠️ 고쳐야 할 일이 생기면 v5 쪽과 **함께** 고친다. 한쪽만 고치면 같은 페이지가
 *    두 사이트에서 달라진다.
 *
 * 맨 아래 구슬(AiOrb) 키프레임은 v5 의 `app/globals.css` 에서 가져왔다.
 * 마크업이 인라인 style 로 이 이름들을 부르므로 키프레임만 있으면 된다.
 *
 * 웹·모바일이 같은 파일을 쓴다. 이 시안이 `@media (max-width: 880px)` 하나로
 * 반응형이라 나눌 이유가 없다.
 * ------------------------------------------------------------------------- */

/*
 * biome-ignore-all lint/style/noDescendingSpecificity: 시안에서 그대로 옮긴 순서다.
 * 뒤에 오는 약한 선택자가 앞의 강한 선택자를 덮지 못한다는 경고인데, 이 파일은
 * 손으로 쓴 것이 아니라 **한 벌의 시안을 옮긴 것**이라 순서를 흔들면 어디가
 * 바뀌는지 알 수 없다. 규칙을 지키려고 다시 배열하는 쪽이 더 위험하다.
 */
/*
 * 토포AI 소개 페이지 전용 스타일 — `/ai`.
 *
 * 시안(`topoai-landing-v3_20.html`)의 CSS 를 그대로 옮기되, **모든 규칙을
 * `.tp-ai-landing` 아래로 가둔다.** 이 시안은 `.btn` · `.tab` · `.w` 처럼
 * 아주 짧은 이름을 쓰고 `*` 리셋과 `body` 규칙까지 들고 있어서, 그대로 두면
 * 사이트 전체를 건드린다.
 *
 * 토큰도 `:root` 가 아니라 이 상자에 건다. 이름이 앱 토큰(`--color-*`)과 다른
 * 체계라(`--text-primary`, `--surface-default`) 섞이면 서로를 덮는다.
 * 값은 같은 V3 라이브러리에서 나온 것이라 화면상 차이는 없다.
 *
 * 다크 모드는 `html.dark` → `.dark .tp-ai-landing` 으로 옮겨, 앱의 다크 전환을
 * 그대로 따라간다.
 *
 * 키프레임 이름에는 `tpai-` 를 붙였다 — `up` · `ring` · `bk` 같은 이름은
 * 전역이라 다른 화면과 부딪힌다.
 *
 * 구슬(`.orb-wrap`)·시안 헤더/푸터·검수 메모 패널 규칙은 뺐다. 구슬은 앱의
 * `AiOrb` 를 쓰고, 헤더·푸터는 사이트 것을 쓴다.
 */
.tp-ai-landing {
  --font:
    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    sans-serif;
  --gray-01: #fafbfc;
  --gray-02: #f5f6f9;
  --gray-03: #ebecf0;
  --gray-04: #d9dce5;
  --gray-05: #bec3d0;
  --gray-06: #969eae;
  --gray-07: #6e7686;
  --gray-08: #4b5363;
  --gray-09: #303744;
  --gray-10: #1a1f29;
  --gray-11: #0d1117;
  --white: #ffffff;
  --black: #000000;
  --primary-01: #f5f9ff;
  --primary-02: #f0f6ff;
  --primary-03: #e6f1ff;
  --primary-04: #cce2ff;
  --primary-05: #bdd9ff;
  --primary-06: #99c5ff;
  --primary-07: #80b7ff;
  --primary-08: #4294ff;
  --primary-09: #2f80eb;
  --primary-10: #1c6cd7;
  --red-01: #fcf7f7;
  --red-02: #fff2f2;
  --red-03: #ffebeb;
  --red-04: #ffd6d6;
  --red-05: #f5abab;
  --red-06: #f59393;
  --red-07: #f57b7c;
  --red-08: #f65252;
  --red-09: #eb4b4b;
  --green-01: #f7faf9;
  --green-02: #e4f9f0;
  --green-03: #dcf5ed;
  --green-04: #c0f0e0;
  --green-05: #a1e5cf;
  --green-06: #6cd9b5;
  --green-07: #29cc96;
  --green-08: #24b283;
  --yellow-01: #fffcf5;
  --yellow-02: #fff8eb;
  --yellow-03: #fff3db;
  --yellow-04: #ffe5b2;
  --yellow-05: #ffdd99;
  --yellow-06: #ffcc66;
  --yellow-07: #ffc34d;
  --yellow-08: #ffb21a;
  --yellow-09: #ffaa00;
  --purple-01: #f9f7fc;
  --purple-02: #f5f0ff;
  --purple-03: #eee5ff;
  --purple-04: #e7dbff;
  --purple-05: #d4c4f5;
  --purple-06: #c9b6ff;
  --purple-07: #b8a0fa;
  --purple-08: #9d7bff;
  --purple-09: #8d66ff;
  --logo-default: #007f98;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}
.tp-ai-landing {
  --text-primary: var(--gray-10);
  --text-secondary: var(--gray-07);
  --text-tertiary: var(--gray-06);
  --text-disabled: var(--gray-05);
  --text-inverse: var(--white);
  --text-brand: var(--logo-default);
  --icon-primary: var(--gray-10);
  --icon-secondary: var(--gray-06);
  --surface-default: var(--white);
  --surface-subtle: var(--gray-01);
  --surface-muted: var(--gray-02);
  --surface-inverse: var(--gray-11);
  --page-bg: var(--white);
  --border-default: var(--gray-03);
  --border-strong: var(--gray-04);
  --border-focus: var(--primary-08);
  --interactive-default: var(--primary-08);
  --interactive-hover: var(--primary-09);
  --interactive-pressed: var(--primary-10);
  --interactive-subtle: var(--primary-03);
  --interactive-ghost-hover: var(--primary-01);
  --interactive-selected-bg: var(--primary-02);
  --status-up: var(--red-08);
  --status-up-bg: var(--red-02);
  --status-down: var(--primary-08);
  --status-down-bg: var(--primary-03);
  --status-warning: var(--yellow-08);
  --status-warning-bg: var(--yellow-03);
  --brand-logo: var(--logo-default);
  --placeholder-bg: #dfe3ea;
}
.tp-ai-landing {
  --btn-h-xs: 28px;
  --btn-h-sm: 32px;
  --btn-h-md: 36px;
  --btn-h: 40px;
  --btn-h-xl: 48px;
  --btn-radius: var(--radius-md);
  --btn-padding-y: var(--sp-2);
  --btn-padding-x: var(--sp-3);
  --btn-padding-x-xs: var(--sp-2);
  --btn-padding-x-sm: var(--sp-3);
  --btn-padding-x-md: var(--sp-3);
  --btn-padding-x-lg: var(--sp-5);
  --btn-gap: var(--sp-3);
  --btn-border-w: 1px;
  --btn-focus-ring-w: 2px;
  --btn-focus-ring-offset: 2px;
  --btn-loading-opacity: 0.6;
  --input-h: 40px;
  --input-radius: var(--radius-xs);
  --input-border-w: 1px;
  --input-padding-y: var(--sp-2);
  --input-padding-x: var(--sp-3);
  --input-gap: var(--sp-2);
  --input-label-gap: var(--sp-1);
  --input-bg: var(--surface-default);
  --input-bg-disabled: var(--surface-muted);
  --input-text: var(--gray-11);
  --input-text-placeholder: var(--gray-08);
  --input-text-disabled: var(--gray-05);
  --input-label: var(--gray-07);
  --input-icon: var(--gray-06);
  --input-suffix: var(--gray-06);
  --input-border-default: var(--border-default);
  --input-border-focus: var(--border-focus);
  --input-border-error: var(--red-08);
  --input-border-success: var(--primary-08);
  --input-border-disabled: var(--border-default);
  --input-message-error: var(--red-08);
  --input-message-success: var(--primary-08);
  --select-h: var(--input-h);
  --select-radius: var(--input-radius);
  --select-item-h: 36px;
  --select-item-padding-y: var(--sp-1);
  --select-item-padding-x: var(--sp-3);
  --select-item-bg: var(--input-bg);
  --select-item-bg-hover: var(--surface-subtle);
  --select-item-bg-selected: var(--surface-muted);
  --select-dropdown-bg: var(--input-bg);
  --select-dropdown-radius: var(--radius-xs);
  --select-dropdown-offset: var(--sp-2);
  --tab-h: 40px;
  --tab-padding-x: var(--sp-2);
  --tab-padding-y: var(--sp-2);
  --tab-indicator-w: 2px;
  --tab-divider-w: 1px;
  --tab-segmented-h: 40px;
  --tab-segmented-radius: var(--radius-md);
  --tab-segmented-item-radius: var(--radius-sm);
  --tab-segmented-padding: var(--sp-1);
  --tab-segmented-gap: var(--sp-2);
  --table-row-h: 56px;
  --table-row-h-lg: 88px;
  --table-header-h: 40px;
  --table-cell-padding-y: var(--sp-3);
  --table-cell-padding-x: var(--sp-2);
  --table-cell-gap: var(--sp-1);
  --table-divider-w: 1px;
  --table-sort-icon: 12px;
  --modal-radius: var(--radius-lg);
  --modal-padding: var(--sp-6);
  --modal-header-gap: var(--sp-4);
  --modal-body-gap: var(--sp-5);
  --modal-footer-btn-gap: var(--sp-3);
  --modal-w-sm: 340px;
  --modal-w-md: 600px;
  --modal-w-lg: 900px;
  --modal-max-h-md: 640px;
  --modal-max-h-lg: 912px;
  --modal-btn-w: 140px;
  --modal-close: 20px;
  --modal-overlay-opacity: 0.6;
}
.tp-ai-landing {
  --ai: var(--purple-09);
  --ai-hover: var(--purple-08);
  --ai-bg: var(--purple-02);
  --ai-border: var(--purple-04);
  --ai-text-on-bg: var(--purple-09);
  --ai-gradient: linear-gradient(97deg, #7c50ff 0%, #5d95fb 40%, #69b1ff 63%, #0d47da 100%);
  --ai-text-gradient: linear-gradient(90deg, var(--purple-08), var(--primary-08));
  --ai-send-gradient: linear-gradient(150deg, var(--purple-08), var(--primary-08));
  --ai-glow: linear-gradient(
    173deg,
    var(--primary-06) 16%,
    var(--purple-07) 52%,
    var(--purple-06) 88%
  );
  --aib-fill: linear-gradient(
    100deg,
    var(--purple-02) 0%,
    var(--primary-02) 46%,
    var(--white) 100%
  );
  --hero-bg: linear-gradient(180deg, var(--purple-01) 0%, var(--page-bg) 78%);
  --edge-bg: linear-gradient(
    180deg,
    var(--purple-03) 0%,
    var(--primary-03) 45%,
    var(--page-bg) 100%
  );
  --source-text: var(--green-08);
  --source-bg: var(--green-02);
  --highlight-bg: var(--yellow-04);
  --shadow-sm: 0 2px 8px rgba(13, 17, 23, 0.06);
  --shadow-md: 0 12px 32px rgba(13, 17, 23, 0.1);
  --shadow-lg: 0 20px 48px rgba(13, 17, 23, 0.16);
  --shadow-ai: 0 10px 28px rgba(141, 102, 255, 0.28);
  --header-bg: rgba(255, 255, 255, 0.92);
  --toast-bg: rgba(26, 31, 41, 0.94);
  --phone-frame: #343639;
  --plan-bg: linear-gradient(140deg, #241369 0%, #0b1330 55%, #12244a 100%);
  --plan-glow-1: rgba(141, 102, 255, 0.35);
  --plan-glow-2: rgba(66, 148, 255, 0.28);
  --plan-sub: rgba(255, 255, 255, 0.78);
  --plan-note-bg: rgba(255, 255, 255, 0.1);
  --plan-tab-bg: rgba(255, 255, 255, 0.08);
  --plan-tab-border: rgba(255, 255, 255, 0.18);
  --fab-ghost: rgba(255, 255, 255, 0.18);
  --fab-ghost-hover: rgba(255, 255, 255, 0.28);
  --fab-sub: rgba(255, 255, 255, 0.78);
  --container: 980px;
  --narrow: 760px;
}
.dark .tp-ai-landing {
  --text-primary: #e8ecf3;
  --text-secondary: #a6aebd;
  --text-tertiary: #8b93a3;
  --text-disabled: #69717f;
  --text-inverse: #0f141a;
  --icon-primary: #e8ecf3;
  --icon-secondary: #8b93a3;
  --page-bg: #0f141a;
  --surface-default: #151b23;
  --surface-subtle: #1a212a;
  --surface-muted: #2b333f;
  --surface-strong: #414d60;
  --surface-inverse: #e8ecf3;
  --border-default: #2b333f;
  --border-strong: #3b4553;
  --interactive-subtle: #16263f;
  --interactive-selected-bg: #16233a;
  --interactive-ghost-hover: #1a212a;
  --status-up-bg: #2b1c20;
  --status-down-bg: #101a27;
  --status-warning-bg: #2a2216;
  --placeholder-bg: #232b36;
  --overlay: rgba(0, 0, 0, 0.4);
  --input-bg: var(--surface-subtle);
  --input-text: var(--text-primary);
  --input-text-placeholder: var(--text-tertiary);

  --ai-bg: #1b1730;
  --ai-border: #3b2f6e;
  --ai-text-on-bg: var(--purple-06);
  --aib-fill: linear-gradient(100deg, #1b1730 0%, #151d2e 46%, #14202b 100%);
  --hero-bg: linear-gradient(180deg, #171526 0%, var(--page-bg) 78%);
  --edge-bg: linear-gradient(180deg, #1b1730 0%, #14202b 45%, var(--page-bg) 100%);
  --source-text: var(--green-06);
  --source-bg: #122a20;
  --highlight-bg: #4a3a12;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --header-bg: rgba(21, 27, 35, 0.94);
  --toast-bg: rgba(43, 51, 63, 0.96);
}
.dark .tp-ai-landing {
  background: var(--page-bg);
}
.dark .tp-ai-landing .btn.dark {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.dark .tp-ai-landing .btn.dark:hover {
  background: var(--white);
}
.dark .tp-ai-landing .aib {
  background:
    var(--aib-fill) padding-box,
    var(--ai-gradient) border-box;
}
.tp-ai-landing .t1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.8px;
}
.tp-ai-landing .t2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.6px;
}
.tp-ai-landing .t3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.5px;
}
.tp-ai-landing .t4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.45px;
}
.tp-ai-landing .b2m {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.4px;
}
.tp-ai-landing .b3m {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.375px;
}
.tp-ai-landing .b4 {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.35px;
}
.tp-ai-landing .b4m {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.35px;
}
.tp-ai-landing .b5 {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.325px;
}
.tp-ai-landing .b5m {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.325px;
}
.tp-ai-landing,
.tp-ai-landing * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.dark .tp-ai-landing {
  color-scheme: dark;
}
.tp-ai-landing {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.375px;
  -webkit-font-smoothing: antialiased;
}
.tp-ai-landing button,
.tp-ai-landing input {
  font-family: inherit;
  border: 0;
  background: none;
  color: inherit;
}
.tp-ai-landing button {
  cursor: pointer;
}
.tp-ai-landing a {
  color: inherit;
  text-decoration: none;
}
.tp-ai-landing .w {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.tp-ai-landing .w.nr {
  max-width: var(--narrow);
}
.tp-ai-landing .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  height: var(--btn-h);
  padding: 0 var(--btn-padding-x-md);
  border-radius: var(--btn-radius);
  border: var(--btn-border-w) solid transparent;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.35px;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.tp-ai-landing .btn:focus-visible {
  outline: var(--btn-focus-ring-w) solid var(--border-focus);
  outline-offset: var(--btn-focus-ring-offset);
}
.tp-ai-landing .btn.xl {
  height: var(--btn-h-xl);
  padding: 0 var(--btn-padding-x-lg);
  font-size: 15px;
  letter-spacing: -0.375px;
}
.tp-ai-landing .btn.sm {
  height: var(--btn-h-sm);
  padding: 0 var(--btn-padding-x-sm);
  font-size: 13px;
  letter-spacing: -0.325px;
}
.tp-ai-landing .btn.primary {
  background: var(--interactive-default);
  color: var(--text-inverse);
}
.tp-ai-landing .btn.primary:hover {
  background: var(--interactive-hover);
}
.tp-ai-landing .btn.primary:active {
  background: var(--interactive-pressed);
}
.tp-ai-landing .btn.ai {
  background: var(--ai);
  color: var(--text-inverse);
}
.tp-ai-landing .btn.ai:hover {
  background: var(--ai-hover);
}
.tp-ai-landing .btn.dark {
  background: var(--gray-09);
  color: var(--text-inverse);
}
.tp-ai-landing .btn.dark:hover {
  background: var(--gray-10);
}
.tp-ai-landing .btn.secondary {
  background: var(--surface-default);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.tp-ai-landing .btn.secondary:hover {
  background: var(--surface-subtle);
}
.tp-ai-landing .btn.ghost {
  background: var(--surface-muted);
  color: var(--text-secondary);
}
.tp-ai-landing .btn.ghost:hover {
  background: var(--gray-03);
}
.tp-ai-landing .btn.full {
  width: 100%;
}
.tp-ai-landing .tabs {
  display: inline-flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.tp-ai-landing .tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 39px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.35px;
  color: var(--gray-06);
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.tp-ai-landing .tab:hover {
  color: var(--text-secondary);
  background: var(--surface-subtle);
}
.tp-ai-landing .tab[aria-selected="true"] {
  background: var(--gray-09);
  border-color: var(--gray-09);
  color: var(--white);
}
/* 할인 뱃지는 **빨강**이다 — 고르는 탭 색과 섞이지 않고 값이 깎인다는 신호만 준다 */
.tp-ai-landing .tab .badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.325px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--radius-xs);
  background: var(--red-08);
  color: var(--white);
}
.tp-ai-landing .tab:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.tp-ai-landing .ai-brand {
  background: var(--ai-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tp-ai-landing .aib {
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  background:
    var(--aib-fill) padding-box,
    var(--ai-gradient) border-box;
}
.tp-ai-landing .hero {
  padding: 80px 0;
  background: var(--hero-bg);
}
.tp-ai-landing .hrow {
  display: flex;
  gap: calc(var(--sp-8) + var(--sp-4));
  align-items: center;
}
.tp-ai-landing .hl {
  flex: 1;
  min-width: 0;
}
.tp-ai-landing .hb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ai-bg);
  color: var(--ai-text-on-bg);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-full);
  padding: var(--sp-1) var(--sp-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.325px;
  line-height: 1.5;
}
.tp-ai-landing .hero h1 {
  font-size: 50px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -1.25px;
  margin: var(--sp-4) 0 var(--sp-3);
}
.tp-ai-landing .hero h1 em {
  font-style: normal;
  background: var(--ai-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tp-ai-landing .hero p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}
.tp-ai-landing .hero p b {
  color: var(--text-primary);
  font-weight: 700;
}
.tp-ai-landing .hbtns {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}
.tp-ai-landing .ph {
  width: 290px;
  flex-shrink: 0;
  background: var(--phone-frame);
  border-radius: 36px;
  padding: 6px;
  box-shadow: var(--shadow-lg);
}
.tp-ai-landing .ph .sc {
  background: var(--surface-default);
  border-radius: 30px;
  overflow: hidden;
  height: 560px;
  display: flex;
  flex-direction: column;
}
.tp-ai-landing .ph .tb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border-default);
}
.tp-ai-landing .ph .tb .br {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.35px;
  line-height: 1.5;
}
.tp-ai-landing .ph .tb .qt {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.325px;
  color: var(--text-secondary);
}
.tp-ai-landing .ph .bd {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding: var(--sp-3) var(--sp-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.tp-ai-landing .msg {
  opacity: 0;
  transform: translateY(9px);
  animation: tpai-up 0.45s forwards;
}
@keyframes tpai-up {
  to {
    opacity: 1;
    transform: none;
  }
}
.tp-ai-landing .msg.u {
  display: flex;
  justify-content: flex-end;
}
/*
 * 내가 쓴 말풍선은 **연한 파랑**(primary/03)이다 — 실제 토포AI 패널과 같은 값이다
 * (`components/base/ai-dialog.tsx` 의 `UserBubble`). 시안은 진한 파랑에 흰 글씨
 * 였는데, 그러면 소개 페이지에서 본 모양과 실제 화면이 서로 다르다.
 */
.tp-ai-landing .msg.u span {
  background: var(--interactive-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  padding: var(--sp-2) var(--sp-3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.325px;
  line-height: 1.5;
  max-width: 82%;
}
.tp-ai-landing .msg.a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.tp-ai-landing .msg.a p {
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: -0.325px;
  color: var(--text-primary);
}
.tp-ai-landing .msg.a p b {
  font-weight: 700;
}
.tp-ai-landing .srcbox {
  width: 100%;
  margin-top: 2px;
  border-top: 1px solid var(--border-default);
  padding-top: var(--sp-2);
}
.tp-ai-landing .srcbox .sl {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.325px;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-1);
}
.tp-ai-landing .si {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.325px;
  line-height: 1.45;
  color: var(--text-primary);
}
.tp-ai-landing .si i {
  font-style: normal;
  color: var(--interactive-default);
  font-weight: 700;
  flex-shrink: 0;
}
.tp-ai-landing .ph .ipt {
  position: relative;
  flex: none;
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
}
.tp-ai-landing .ph .ipt .glow {
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  top: var(--sp-3);
  height: 40px;
  border-radius: var(--radius-full);
  opacity: 0.5;
  filter: blur(8px);
  background: var(--ai-glow);
}
.tp-ai-landing .ph .ipt .bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 6px 0 var(--sp-4);
  background: var(--surface-default);
  border-radius: var(--radius-full);
}
.tp-ai-landing .ph .ipt .bar .plc {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  letter-spacing: -0.325px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-ai-landing .ph .ipt .send {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ai-send-gradient);
  color: var(--white);
}
.tp-ai-landing section {
  padding: 80px 0;
}
.tp-ai-landing section.alt {
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.tp-ai-landing section.alt + section.alt {
  border-top: 0;
}
.tp-ai-landing .sh {
  text-align: center;
  margin-bottom: calc(var(--sp-8) + var(--sp-2));
}
.tp-ai-landing .sh .k {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ai);
  text-transform: uppercase;
}
.tp-ai-landing .sh h2 {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.5;
  margin-top: var(--sp-2);
}
.tp-ai-landing .sh p {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.375px;
  line-height: 1.7;
  color: var(--text-primary);
  margin-top: var(--sp-3);
}
.tp-ai-landing .sh p b {
  color: var(--text-primary);
  font-weight: 700;
}
.tp-ai-landing .f3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.tp-ai-landing .fc {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.tp-ai-landing .fc .n {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--ai-bg);
  color: var(--ai-text-on-bg);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
}
.tp-ai-landing .fc h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.45px;
  line-height: 1.5;
  margin: var(--sp-4) 0 var(--sp-2);
}
.tp-ai-landing .fc p {
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: -0.35px;
  color: var(--text-primary);
  flex: 1;
}
.tp-ai-landing .fc p b {
  color: var(--text-primary);
  font-weight: 700;
}
.tp-ai-landing .fdemo {
  margin-top: var(--sp-4);
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  font-size: 13px;
  letter-spacing: -0.325px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.5;
}
.tp-ai-landing .fdemo b {
  display: block;
  font-size: 13px;
  color: var(--ai);
  font-weight: 700;
  margin-bottom: 2px;
}
.tp-ai-landing section.edge {
  background: var(--edge-bg);
  border-top: 0;
}
.tp-ai-landing .edge-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-8);
}
.tp-ai-landing .edge-l {
  flex: 1;
  min-width: 0;
}
.tp-ai-landing .edge .sh {
  text-align: left;
  margin-bottom: 0;
}
.tp-ai-landing .edge .sh h2 {
  white-space: nowrap;
}
.tp-ai-landing .edge .sh p {
  max-width: none;
}
.tp-ai-landing .edge .sh p .hl-b {
  color: var(--ai);
  font-weight: 700;
}
.tp-ai-landing .edge-r {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.tp-ai-landing .edge-r .col {
  display: contents;
}
.tp-ai-landing .edge .fc {
  padding: var(--sp-6) var(--sp-5);
}
.tp-ai-landing .edge .fh {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: var(--sp-2);
}
/*
 * 카드마다 다른 **그림**이 제목 위에 온다. 셋이 같은 체크 표시였을 때는 카드를
 * 구분해 주지 못하고 줄 간격만 먹었다.
 *
 * 88 은 제목 두 줄 높이쯤이다 — 더 키우면 그림이 주인공이 되고, 더 줄이면
 * 3D 그림의 디테일이 뭉갠다. 배경이 비어 있는 PNG 라 카드 바탕 위에 그대로 얹는다.
 */
.tp-ai-landing .edge .ill {
  display: block;
  /*
    ⚠️ 카드가 세로 flex 라 기본값(`stretch`)이면 그림이 카드 폭까지 **늘어난다**
       — 88 높이에 261 폭으로 납작해졌다. 자기 크기를 지키게 왼쪽에 세운다.
  */
  align-self: flex-start;
  width: auto;
  height: 88px;
  margin: -6px 0 10px -6px;
}
.tp-ai-landing .edge .fc h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.4px;
  line-height: 1.6;
  white-space: nowrap;
}
.tp-ai-landing .edge .fc p {
  flex: 1;
}
/*
 * 카드 아래 칸은 **상자를 벗고 윗줄만** 남긴다. 카드(흰색) 안에 회색 상자가
 * 또 있으면 칸이 두 겹으로 겹쳐 보이고, 정작 중요한 본문보다 상자가 눈에 띈다.
 * 선 하나면 "여기부터는 곁들이는 정보"가 충분히 전해진다.
 */
.tp-ai-landing .edge .fdemo {
  background: none;
  border-top: 1px solid var(--border-default);
  border-radius: 0;
  padding: var(--sp-3) 0 0;
  margin-top: var(--sp-4);
}
.tp-ai-landing .edge .fdemo b {
  display: block;
  margin-bottom: 2px;
}
.tp-ai-landing section.plan {
  position: relative;
  overflow: hidden;
  background: var(--plan-bg);
  border-color: transparent;
}
.tp-ai-landing section.plan::before,
.tp-ai-landing section.plan::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.tp-ai-landing section.plan::before {
  left: -120px;
  top: -80px;
  width: 520px;
  height: 420px;
  background: var(--plan-glow-1);
}
.tp-ai-landing section.plan::after {
  right: -140px;
  bottom: -120px;
  width: 560px;
  height: 460px;
  background: var(--plan-glow-2);
}
.tp-ai-landing section.plan .w {
  position: relative;
  z-index: 1;
}
.tp-ai-landing .plan .sh .k {
  color: var(--purple-06);
}
.tp-ai-landing .plan .sh h2 {
  color: var(--white);
}
.tp-ai-landing .plan .sh p {
  color: var(--plan-sub);
}
.tp-ai-landing .plan .tab {
  background: var(--plan-tab-bg);
  border-color: var(--plan-tab-border);
  color: var(--plan-sub);
}
.tp-ai-landing .plan .tab[aria-selected="true"] {
  background: var(--white);
  border-color: var(--white);
  color: var(--gray-10);
}
.tp-ai-landing .plan .tab[aria-selected="true"] .badge {
  background: var(--ai-bg);
  color: var(--ai-text-on-bg);
}
.tp-ai-landing .plan .pc {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.tp-ai-landing .plan .padd {
  background: var(--plan-note-bg);
  color: var(--white);
}
.tp-ai-landing .problem .fc {
  background: var(--surface-muted);
  border-color: var(--border-default);
  box-shadow: none;
}
.tp-ai-landing .problem .fdemo {
  width: 100%;
  background: var(--surface-default);
}
.tp-ai-landing .qq {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.45px;
  margin-bottom: var(--sp-2);
}
/*
 * 질문 앞 이모지. 글자가 아니라 **표시**라 읽어 주지 않는다(`aria-hidden`) —
 * 질문 자체가 이미 무슨 이야기인지 말한다.
 *
 * 네모 칸을 씌워 봤다가 뺐다. 여섯 장이 나란히 놓이는 자리라 칸까지 두면
 * 이모지가 아니라 **칸이 먼저** 보인다.
 *
 * 글자보다 조금 크게(1.05em) 두고 줄바꿈으로 찌그러지지 않게 `flex-shrink: 0` 이다.
 */
.tp-ai-landing .qq .em {
  flex-shrink: 0;
  font-size: 1.05em;
  line-height: 1;
}
.tp-ai-landing .arow {
  display: flex;
  gap: calc(var(--sp-8) + var(--sp-4));
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.tp-ai-landing .amk {
  width: 300px;
  flex-shrink: 0;
  background: var(--phone-frame);
  border-radius: 36px;
  padding: 6px;
  box-shadow: var(--shadow-lg);
}
.tp-ai-landing .amk .sc {
  background: var(--surface-default);
  border-radius: 30px;
  overflow: hidden;
  height: 600px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.tp-ai-landing .amk .nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border-default);
}
.tp-ai-landing .amk .nav .bk {
  font-size: 16px;
  color: var(--icon-secondary);
}
.tp-ai-landing .amk .nav b {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.325px;
  color: var(--text-secondary);
}
.tp-ai-landing .amk .doc {
  flex: 1;
  overflow: hidden;
  padding: var(--sp-4) var(--sp-4) 0;
}
.tp-ai-landing .amk .docin {
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.tp-ai-landing .amk .docin.up {
  transform: translateY(-62px);
}
.tp-ai-landing .amk .doc .cat {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.325px;
  color: var(--interactive-default);
}
.tp-ai-landing .amk .doc h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.4px;
  margin: var(--sp-1) 0 var(--sp-2);
}
.tp-ai-landing .amk .doc .by {
  font-size: 13px;
  letter-spacing: -0.325px;
  color: var(--text-tertiary);
  font-weight: 500;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-default);
}
.tp-ai-landing .amk .doc p {
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: -0.325px;
  color: var(--text-secondary);
  margin-top: var(--sp-2);
}
.tp-ai-landing .amk .fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(180deg, transparent 0%, var(--surface-default) 42%);
}
.tp-ai-landing .amk .fai {
  position: absolute;
  right: 11px;
  bottom: 14px;
  z-index: 3;
  max-width: calc(100% - 22px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/*
 * 추천 질문 버블 — **실제 기사 화면과 같은 차림**이다
 * (`components/base/floating-actions.tsx`). 값도 그쪽에서 가져왔다.
 *
 *   테두리   1px, 보라→파랑 그라디언트(두 겹 배경으로 그린다)
 *   그림자   보라 계열
 *   모서리   16
 *   버튼     답변보기(파란 채움) · 다른 질문(테두리), 높이 28 · radius 8
 *
 * 글자만 한 단계씩 작다. 이 목업의 화면 폭이 288 이라 실제(390)의 17px 질문을
 * 그대로 쓰면 카드가 화면을 꽉 채워, 기사 위에 떠 있는 모양이 안 나온다.
 */
.tp-ai-landing .amk .bubble {
  position: relative;
  width: 100%;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(var(--surface-default), var(--surface-default)) padding-box,
    linear-gradient(to right, var(--purple-08), var(--primary-08)) border-box;
  box-shadow: 0 12px 30px 0 rgba(124, 92, 232, 0.28);
}
.tp-ai-landing .amk .bubble .x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  color: var(--icon-secondary);
}
.tp-ai-landing .amk .bubble .x svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tp-ai-landing .amk .bubble .bl {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.275px;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.tp-ai-landing .amk .bubble .bq {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.375px;
  color: var(--text-primary);
}
.tp-ai-landing .amk .bubble .bb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 10px;
}
.tp-ai-landing .amk .bubble .b1,
.tp-ai-landing .amk .bubble .b2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.3px;
}
.tp-ai-landing .amk .bubble .b1 {
  background: var(--interactive-default);
  color: var(--white);
  font-weight: 700;
}
.tp-ai-landing .amk .bubble .b2 {
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-weight: 500;
}
/* 버블이 떠 있는 동안 플로팅 버튼은 동그라미로 접힌다 */
.tp-ai-landing .amk .orbfab {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e3efff;
  box-shadow: 0 0 5.5px rgba(0, 0, 0, 0.2);
}
/*
 * 목업 안의 플로팅 버튼은 **실제 화면의 그 버튼**과 같아야 한다
 * (`components/base/floating-actions.tsx`) — 소개 페이지에서 본 모양과 실제가
 * 다르면 설명이 아니라 다른 제품이 된다.
 *
 *   바탕   #e3efff 고정(시안 187:23275) · 테두리 없음
 *   그림자 drop-shadow 0 0 5.5 rgba(0,0,0,.2)
 *   구슬   **왼쪽**, 글은 오른쪽 두 줄
 */
.tp-ai-landing .amk .pill {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: #e3efff;
  border: 0;
  border-radius: var(--radius-full);
  padding: 4px 12px 4px 4px;
  filter: drop-shadow(0 0 5.5px rgba(0, 0, 0, 0.2));
  transition: 0.4s;
}
.tp-ai-landing .amk .pill .t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--gray-10);
}
.tp-ai-landing .amk .pill .t .l1 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.5;
  white-space: nowrap;
}
.tp-ai-landing .amk .pill .t .l2 {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.25px;
  line-height: 1.5;
  opacity: 0.8;
  white-space: nowrap;
}
.tp-ai-landing .amk .pill .ic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
}
.tp-ai-landing .amk .pill .ic:before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--ai);
  opacity: 0;
}
.tp-ai-landing .amk .pill.ping .ic:before {
  animation: tpai-ring 1s ease-out 2;
}
@keyframes tpai-ring {
  0% {
    opacity: 0.8;
    transform: scale(0.8);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes tpai-popin {
  0% {
    transform: translateY(14px) scale(0.9);
    opacity: 0;
  }
  62% {
    transform: translateY(-3px) scale(1.03);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.tp-ai-landing .amk .bubble.enter {
  animation: tpai-popin 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.1);
}
.tp-ai-landing .amk .hl {
  display: inline-block;
  padding: 0 3px;
  border-radius: var(--radius-xs);
  font-weight: 500;
  transition:
    background 0.45s,
    transform 0.45s cubic-bezier(0.2, 0.85, 0.25, 1),
    color 0.45s;
}
.tp-ai-landing .amk .hl.on {
  background: var(--highlight-bg);
  color: var(--text-primary);
  transform: scale(1.12);
  font-weight: 700;
}
/*
 * 시트가 올라올 때 **뒤를 어둡게** 덮는다. 실제 화면도 그렇다 — 바텀 시트는
 * 모달이라 뒤 기사를 누를 수 없고, 그 사실을 딤이 알려 준다(`drawer.tsx` 의
 * `bg-black/30`과 같은 농도).
 *
 * 시트(z 5)와 손가락(z 9) 사이(z 4)에 둔다 — 기사와 버블은 가리고, 시트는
 * 그 위에 또렷하게 남는다.
 */
.tp-ai-landing .amk .dim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.tp-ai-landing .amk .dim.on {
  opacity: 1;
}
.tp-ai-landing .amk .sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: var(--surface-default);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(101%);
  transition: transform 0.46s cubic-bezier(0.2, 0.85, 0.25, 1);
  max-height: 80%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tp-ai-landing .amk .sheet.on {
  transform: none;
}
.tp-ai-landing .amk .sheet .sh2 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border-default);
}
.tp-ai-landing .amk .sheet .sh2 b {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.325px;
  background: var(--ai-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tp-ai-landing .amk .sheet .sh2 small {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.325px;
  color: var(--text-tertiary);
}
.tp-ai-landing .amk .sheet .sq {
  padding: var(--sp-2) var(--sp-4);
  background: var(--ai-bg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.325px;
  color: var(--ai-text-on-bg);
  line-height: 1.5;
}
.tp-ai-landing .amk .sheet .sa {
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: -0.325px;
  color: var(--text-secondary);
  min-height: 66px;
}
.tp-ai-landing .amk .sheet .sa b {
  color: var(--text-primary);
  font-weight: 700;
}
.tp-ai-landing .amk .sheet .sa i {
  display: inline-block;
  width: 2px;
  height: 10px;
  background: var(--ai);
  vertical-align: -1px;
  animation: tpai-abl 0.7s steps(1) infinite;
  font-style: normal;
}
@keyframes tpai-abl {
  50% {
    opacity: 0;
  }
}
.tp-ai-landing .amk .sheet .ssrc {
  border-top: 1px solid var(--border-default);
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  opacity: 0;
  transition: opacity 0.4s;
}
.tp-ai-landing .amk .sheet .ssrc.on {
  opacity: 1;
}
.tp-ai-landing .amk .sheet .ssrc .l {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.325px;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-1);
}
.tp-ai-landing .amk .sheet .ssrc .it {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.325px;
}
.tp-ai-landing .amk .sheet .ssrc .it .n {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transform: scale(0.8);
}
.tp-ai-landing .amk .cursor {
  position: absolute;
  z-index: 9;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.25s,
    transform 0.5s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.tp-ai-landing .amk .cursor.on {
  opacity: 1;
}
.tp-ai-landing .amk .cursor:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ai-bg);
  border: 2px solid var(--ai);
  opacity: 0.85;
}
.tp-ai-landing .amk .cursor.press:after {
  transform: scale(0.7);
  transition: transform 0.14s;
}
.tp-ai-landing .expl {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/*
 * 설명 상자는 **연한 회색**이다. 이 섹션 바탕이 흰색이라 흰 카드는 테두리로만
 * 버텨 셋이 한 덩어리로 보였다. 바탕을 깔면 세 걸음이 각자 서 있다.
 */
.tp-ai-landing .expl .ei {
  position: relative;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.tp-ai-landing .expl .ei + .ei::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -38px;
  width: 14px;
  height: 14px;
  border-right: 3px solid var(--ai);
  border-bottom: 3px solid var(--ai);
  border-radius: 1px;
  transform: translateX(-50%) rotate(45deg);
}
/* 숫자 칸은 **진한 보라**다 — 연한 보라 바탕에 보라 글씨는 회색 상자 위에서 묻혔다 */
.tp-ai-landing .expl .ei .n {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--ai);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  /*
    ⚠️ **줄 높이를 1 로 묶는다.** 상속받은 1.6 이면 글자 상자가 20.8px 이 되어
       가운데 정렬의 기준이 글자가 아니라 그 상자가 된다 — 숫자가 1px 남짓
       위로 붙어 보였다(위 5.6 / 아래 7.4).

    그러고도 1px 을 더 내리는 이유 — 숫자에는 아래로 내려가는 획(g·y 같은)이
    없어서 글자 상자 아래쪽이 늘 비어 있다. 상자를 정확히 가운데 두면 눈에는
    높아 보인다.
  */
  line-height: 1;
  padding-top: 1px;
  flex-shrink: 0;
}
.tp-ai-landing .expl .ei b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.5;
  margin-bottom: var(--sp-1);
}
.tp-ai-landing .expl .ei p {
  font-size: 14px;
  letter-spacing: -0.35px;
  color: var(--text-primary);
  line-height: 1.7;
}
.tp-ai-landing .cyc {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-5);
}
.tp-ai-landing .pw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  max-width: var(--narrow);
  margin: 0 auto;
}
.tp-ai-landing .pc {
  background: var(--surface-default);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.tp-ai-landing .pc.on {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-default), var(--surface-default)) padding-box,
    var(--ai-send-gradient) border-box;
  box-shadow: var(--shadow-ai);
}
.tp-ai-landing .btn.grad {
  background: var(--ai-send-gradient);
  color: var(--text-inverse);
}
.tp-ai-landing .btn.grad:hover {
  filter: brightness(1.05);
}
.tp-ai-landing .pc .nm {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.45px;
  line-height: 1.5;
}
.tp-ai-landing .pc .ds {
  font-size: 13px;
  letter-spacing: -0.325px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 2px;
}
.tp-ai-landing .pc .pr {
  margin: var(--sp-4) 0 var(--sp-1);
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
}
.tp-ai-landing .pc .pr b {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.2;
}
.tp-ai-landing .pc .pr small {
  font-size: 14px;
  letter-spacing: -0.35px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.tp-ai-landing .pc .sub {
  font-size: 13px;
  letter-spacing: -0.325px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.tp-ai-landing .pl {
  list-style: none;
  margin: var(--sp-5) 0 0;
  border-top: 1px solid var(--border-default);
  padding-top: var(--sp-4);
}
.tp-ai-landing .pl li {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  font-size: 14px;
  letter-spacing: -0.35px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
}
.tp-ai-landing .pl li i {
  font-style: normal;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  display: block;
}
.tp-ai-landing .pl li i svg {
  width: 16px;
  height: 16px;
  display: block;
}
.tp-ai-landing .pl li.n {
  color: var(--text-disabled);
}
.tp-ai-landing .pl li.n i svg {
  stroke: var(--border-strong);
}
.tp-ai-landing .pl li b {
  color: var(--text-primary);
  font-weight: 700;
}
.tp-ai-landing .pl li .mt {
  color: var(--text-tertiary);
}
.tp-ai-landing .pc .btn {
  margin-top: var(--sp-5);
}
.tp-ai-landing .padd {
  max-width: var(--narrow);
  margin: var(--sp-4) auto 0;
  background: var(--interactive-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: 14px;
  letter-spacing: -0.35px;
  color: var(--interactive-pressed);
  font-weight: 500;
  line-height: 1.6;
}
.tp-ai-landing .padd b {
  font-weight: 700;
}
.tp-ai-landing .ctab {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-default);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tp-ai-landing .ctab th {
  height: var(--table-header-h);
  background: var(--surface-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.325px;
  color: var(--text-secondary);
  padding: 0 var(--sp-4);
  text-align: left;
  /* 사이트 reset 이 baseline 으로 두면 칸 위에 붙는다 */
  vertical-align: middle;
}
.tp-ai-landing .ctab td {
  height: var(--table-row-h);
  padding: var(--table-cell-padding-y) var(--sp-4);
  border-top: var(--table-divider-w) solid var(--border-default);
  font-size: 14px;
  letter-spacing: -0.35px;
  font-weight: 500;
  color: var(--text-secondary);
  vertical-align: middle;
}
.tp-ai-landing .ctab td b {
  color: var(--text-primary);
  font-weight: 700;
}
.tp-ai-landing .ctab td.c {
  text-align: right;
  white-space: nowrap;
}
.tp-ai-landing .ctab .cr {
  font-weight: 700;
  color: var(--ai);
}
.tp-ai-landing .calc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.tp-ai-landing .calc div {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  text-align: center;
}
.tp-ai-landing .calc div b {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.4;
}
.tp-ai-landing .calc div small {
  display: block;
  font-size: 13px;
  letter-spacing: -0.325px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 2px;
}
.tp-ai-landing .note {
  margin-top: var(--sp-4);
  background: var(--surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  font-size: 13px;
  letter-spacing: -0.325px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.7;
}
.tp-ai-landing .note b.h {
  display: block;
  margin-bottom: var(--sp-2);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 14px;
  letter-spacing: -0.35px;
}
.tp-ai-landing .note ul,
.tp-ai-landing .cau ul {
  list-style: none;
  margin: 0;
}
.tp-ai-landing .note li,
.tp-ai-landing .cau li {
  position: relative;
  padding-left: var(--sp-3);
  margin-bottom: 3px;
}
.tp-ai-landing .note li:last-child,
.tp-ai-landing .cau li:last-child {
  margin-bottom: 0;
}
.tp-ai-landing .note li:before,
.tp-ai-landing .cau li:before {
  content: "·";
  position: absolute;
  left: 2px;
  font-weight: 700;
}
.tp-ai-landing .note li b,
.tp-ai-landing .cau li b {
  color: var(--text-primary);
  font-weight: 700;
}
.tp-ai-landing .dm {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface-default);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tp-ai-landing .dm-ask {
  max-width: 640px;
  margin: 0 auto var(--sp-4);
}
.tp-ai-landing .ask-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-2) 0 var(--sp-1);
  background: var(--surface-default);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-default);
}
.tp-ai-landing .ask-bar input {
  flex: 1;
  min-width: 0;
  padding: 0 var(--sp-2);
  font-size: 14px;
  letter-spacing: -0.35px;
  color: var(--text-primary);
  outline: none;
  pointer-events: none;
  user-select: none;
}
.tp-ai-landing .ask-bar .send {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: var(--ai-send-gradient);
  color: var(--white);
}
.tp-ai-landing .ask-bar .send svg {
  width: 12px;
  height: 12px;
}
.tp-ai-landing .chips {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-default);
}
.tp-ai-landing .dmb {
  padding: var(--sp-5);
}
.tp-ai-landing .dmb .hd {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.tp-ai-landing .dmb .hd b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.tp-ai-landing .dmb .hd .cu {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.325px;
  color: var(--text-tertiary);
}
.tp-ai-landing .dmb .tx {
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: -0.375px;
  color: var(--text-primary);
  min-height: 76px;
}
.tp-ai-landing .cur {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--ai);
  vertical-align: -2px;
  animation: tpai-bk 0.7s steps(1) infinite;
}
@keyframes tpai-bk {
  50% {
    opacity: 0;
  }
}
.tp-ai-landing .dsrc {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--border-default);
  padding-top: var(--sp-3);
}
.tp-ai-landing .dsrc .sl {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.325px;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
}
.tp-ai-landing .dsrc .it {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) 0;
  font-size: 14px;
  letter-spacing: -0.35px;
  font-weight: 500;
}
.tp-ai-landing .dsrc .it .n {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transform: scale(0.85);
}
.tp-ai-landing .dsrc .it .g {
  margin-left: auto;
  font-size: 13px;
  letter-spacing: -0.325px;
  color: var(--text-tertiary);
  font-weight: 500;
  flex-shrink: 0;
}
.tp-ai-landing .gtab {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-default);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tp-ai-landing .gtab th {
  width: 33%;
  background: var(--surface-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.35px;
  color: var(--text-secondary);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-top: 1px solid var(--border-default);
  vertical-align: top;
}
.tp-ai-landing .gtab tr:first-child th,
.tp-ai-landing .gtab tr:first-child td {
  border-top: 0;
}
.tp-ai-landing .gtab td {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border-default);
  font-size: 14px;
  letter-spacing: -0.35px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.6;
}
.tp-ai-landing .gtab td b {
  color: var(--text-primary);
  font-weight: 700;
}
.tp-ai-landing .fq {
  max-width: var(--narrow);
  margin: 0 auto;
  background: var(--surface-default);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tp-ai-landing .fi {
  border-top: 1px solid var(--border-default);
}
.tp-ai-landing .fi:first-child {
  border-top: 0;
}
.tp-ai-landing .fi .q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.375px;
  line-height: 1.5;
}
.tp-ai-landing .fi .q:hover {
  background: var(--surface-subtle);
}
.tp-ai-landing .fi .q .ar {
  margin-left: auto;
  color: var(--icon-secondary);
  transition: 0.2s;
  flex-shrink: 0;
}
.tp-ai-landing .fi.on .q .ar {
  transform: rotate(180deg);
}
.tp-ai-landing .fi .a {
  display: none;
  padding: 0 var(--sp-5) var(--sp-5) calc(var(--sp-5) + var(--sp-6));
  font-size: 14px;
  letter-spacing: -0.35px;
  color: var(--text-primary);
  line-height: 1.75;
}
.tp-ai-landing .fi .a b {
  color: var(--text-primary);
  font-weight: 700;
}
.tp-ai-landing .fi.on .a {
  display: block;
}
.tp-ai-landing .fi .q em {
  font-style: normal;
  color: var(--ai);
  font-weight: 700;
  flex-shrink: 0;
  width: var(--sp-3);
}
.tp-ai-landing .cau {
  max-width: var(--narrow);
  margin: 0 auto;
  background: var(--surface-muted);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.tp-ai-landing .cau h4 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.375px;
  margin-bottom: var(--sp-3);
}
.tp-ai-landing .cau li {
  font-size: 13px;
  letter-spacing: -0.325px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: var(--sp-1);
}
.tp-ai-landing .cau .lk {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-strong);
  font-size: 13px;
  letter-spacing: -0.325px;
  font-weight: 500;
  color: var(--text-tertiary);
}
.tp-ai-landing .cau .lk a,
.tp-ai-landing .cau .lk button {
  color: var(--interactive-default);
  text-decoration: underline;
  cursor: pointer;
}
/* 약관 팝업 버튼. 링크와 같게 보이도록 버튼 기본 모양을 걷는다 */
.tp-ai-landing .cau .lk button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
}
.tp-ai-landing #fab {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--ai);
  border-top: 0;
  transform: translateY(110%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: var(--shadow-md);
}
.tp-ai-landing #fab.on {
  transform: none;
}
.tp-ai-landing #fab .in {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.tp-ai-landing #fab .tx b {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.45px;
  color: var(--white);
}
.tp-ai-landing #fab .tx small {
  display: block;
  font-size: 13px;
  letter-spacing: -0.325px;
  color: var(--fab-sub);
  font-weight: 500;
}
.tp-ai-landing #fab .pr {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}
.tp-ai-landing #fab .pr b {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.45px;
  line-height: 1.3;
  color: var(--white);
}
.tp-ai-landing #fab .pr small {
  font-size: 13px;
  letter-spacing: -0.325px;
  color: var(--fab-sub);
  font-weight: 500;
}
.tp-ai-landing #fab .btn.ai {
  background: var(--white);
  color: var(--ai);
}
.tp-ai-landing #fab .btn.ai:hover {
  background: var(--purple-02);
}
.tp-ai-landing #fab .btn.ghost {
  background: var(--fab-ghost);
  color: var(--white);
}
.tp-ai-landing #fab .btn.ghost:hover {
  background: var(--fab-ghost-hover);
}
@media (max-width: 880px) {
  .tp-ai-landing .hrow {
    flex-direction: column;
    gap: var(--sp-8);
  }
  .tp-ai-landing .hero {
    padding: 56px 0;
  }
  .tp-ai-landing .hero h1 {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  .tp-ai-landing .sh h2,
  .tp-ai-landing .edge .sh h2 {
    font-size: 24px;
    letter-spacing: -0.6px;
    white-space: normal;
  }
  .tp-ai-landing .edge .fc h3 {
    white-space: normal;
  }
  .tp-ai-landing .edge-r {
    grid-template-columns: 1fr;
  }
  .tp-ai-landing .f3,
  .tp-ai-landing .pw,
  .tp-ai-landing .calc {
    grid-template-columns: 1fr;
  }
  .tp-ai-landing .amk {
    width: 100%;
    max-width: 320px;
  }
  .tp-ai-landing .expl {
    width: 100%;
    max-width: 320px;
    flex: none;
  }
  .tp-ai-landing .gtab th {
    width: 38%;
    font-size: 13px;
    letter-spacing: -0.325px;
    padding: var(--sp-3);
  }
  .tp-ai-landing .gtab td {
    font-size: 13px;
    letter-spacing: -0.325px;
    padding: var(--sp-3);
  }
  .tp-ai-landing section {
    padding: 56px 0;
  }
  .tp-ai-landing .tab {
    height: 44px;
  }
  .tp-ai-landing #fab .tx {
    display: none;
  }
  .tp-ai-landing #fab .pr {
    margin-left: 0;
  }
  .tp-ai-landing #fab .btn.ai {
    flex: 1;
  }
  .tp-ai-landing #audit,
  .tp-ai-landing #auditTab {
    display: none;
  }
  .tp-ai-landing .brand .tp {
    display: none;
  }
  .tp-ai-landing .brand .div {
    display: none;
  }

  /*
    ── 좁은 화면에서만 달라지는 것들 ──────────────────────────────────

    히어로는 **가운데로 모은다.** 한 단에 놓이면 글이 왼쪽에 쏠려 아래 목업과
    축이 어긋난다. 버튼 둘은 화면 폭을 반씩 나눠 가진다 — 글자 폭에 맞추면
    오른쪽이 휑하게 비고, 손가락으로 누르기에도 좁다.
  */
  .tp-ai-landing .hero .hl {
    text-align: center;
  }
  .tp-ai-landing .hero .hbtns {
    flex-wrap: nowrap;
  }
  .tp-ai-landing .hero .hbtns .btn {
    flex: 1;
    min-width: 0;
    padding: 0 var(--sp-3);
  }

  /*
    Edge 카드의 그림은 **제목 옆(오른쪽 위)**으로 간다. 한 단이 되면 카드가
    가로로 넓어져, 그림이 제목 위에 있으면 오른쪽이 통째로 빈다.

    카드를 격자로 바꿔 그림을 오른쪽 열에 세로로 걸쳐 둔다 — 글이 흐르는
    왼쪽 열은 그대로다.
  */
  .tp-ai-landing .edge .fc {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--sp-4);
    /*
      위 여백을 0 으로 둔다. 그림(88)이 제목 줄에 함께 서면서 그 줄이 이미
      충분히 높아, 여백까지 더하면 카드 위가 텅 빈 채로 벌어진다.
    */
    padding-top: 0;
  }
  /*
    그림은 **제목 줄에만** 놓고, 제목과 그림이 같은 가운데선을 보게 한다.
    본문까지 걸치게 두면(`span 2`) 그림의 가운데가 글 전체의 가운데가 돼,
    제목보다 한참 아래로 내려가 보인다.
  */
  .tp-ai-landing .edge .ill {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }
  .tp-ai-landing .edge .fc .fh {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin-bottom: 0;
  }
  .tp-ai-landing .edge .fc p {
    grid-column: 1 / -1;
    margin-top: var(--sp-2);
  }
  /* 아래 칸은 두 열을 가로질러 카드 폭을 다 쓴다 */
  .tp-ai-landing .edge .fdemo {
    grid-column: 1 / -1;
  }
  /* 라벨과 내용을 **한 줄로** — 세로로 쌓으면 짧은 글 두 줄이 자리만 먹는다 */
  .tp-ai-landing .edge .fdemo {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
  }
  .tp-ai-landing .edge .fdemo b {
    margin-bottom: 0;
    flex-shrink: 0;
  }
}


/* ---------------------------------------------------------------------------
 * 구슬(AiOrb) — v5 app/globals.css 에서 가져온 키프레임.
 * 마크업이 인라인 style 로 animation 이름을 지정하므로 여기에는 키프레임만 둔다.
 * ------------------------------------------------------------------------- */

 *    사용자가 "애니메이션이 좀 더 바뀌는 게 느껴지게" 라고 지적한 것이 이것이다.
 *    이동 폭을 대략 두 배(±30% 안팎)로 키우고 주기를 5~8초로 줄였다.
 *
 *    방울 크기도 88% 로 함께 키웠다(`ai-orb.tsx`) — 크게 움직이면 78% 로는
 *    구슬 가장자리에 바탕이 비친다.
 */
@keyframes tp-orb-1 {
  0% {
    translate: -22% -14%;
    scale: 0.86;
  }
  33% {
    translate: 30% 24%;
    scale: 1.3;
  }
  66% {
    translate: 12% -28%;
    scale: 0.8;
  }
  100% {
    translate: -22% -14%;
    scale: 0.86;
  }
}
@keyframes tp-orb-2 {
  0% {
    translate: 26% 18%;
    scale: 1.12;
  }
  30% {
    translate: -28% 10%;
    scale: 0.78;
  }
  70% {
    translate: 14% -26%;
    scale: 1.34;
  }
  100% {
    translate: 26% 18%;
    scale: 1.12;
  }
}
@keyframes tp-orb-3 {
  0% {
    translate: 14% -26%;
    scale: 0.88;
  }
  40% {
    translate: -12% 28%;
    scale: 1.36;
  }
  75% {
    translate: -30% -10%;
    scale: 1.02;
  }
  100% {
    translate: 14% -26%;
    scale: 0.88;
  }
}

/*
 * 색 도는 것. 세 방울이 서로 다른 지점에서 출발해 같은 세 색을 돈다 —
 * 어느 순간에도 세 색이 다 있으면서 조합은 계속 바뀐다.
 */
@keyframes tp-orb-hue-1 {
  0%,
  100% {
    background-color: #9d7bff;
  }
  33% {
    background-color: #4294ff;
  }
  66% {
    background-color: #73e1ff;
  }
}
@keyframes tp-orb-hue-2 {
  0%,
  100% {
    background-color: #4294ff;
  }
  33% {
    background-color: #73e1ff;
  }
  66% {
    background-color: #9d7bff;
  }
}
@keyframes tp-orb-hue-3 {
  0%,
  100% {
    background-color: #73e1ff;
  }
  33% {
    background-color: #9d7bff;
  }
  66% {
    background-color: #4294ff;
  }
}

/*
  토포AI 입력창 뒤에서 **색만 흐르는** 빛.

  ## 도는 것이 아니라 흐르는 것이다

/* 움직임을 싫어하는 사람에게는 멈춰 준다 */
@media (prefers-reduced-motion: reduce) {
  .tp-ai-landing [style*="tp-orb-"],
  .tp-ai-landing [style*="tp-glow"] {
    animation: none !important;
  }
}

/*
 * 구슬 크기. v5 는 Tailwind 의 size-* 를 쓰는데 v4 에는 그 클래스가 없다.
 * 마크업을 건드리지 않으려고 이름 그대로 상자 안에만 만들어 둔다.
 */
.tp-ai-landing .size-5 { width: 20px; height: 20px; }
.tp-ai-landing .size-8 { width: 32px; height: 32px; }

/* 구독 중일 때의 구독 버튼 자리. 링크가 없으니 눌리는 티를 내지 않는다 */
.tp-ai-landing .btn.is_subscribed,
.tp-ai-landing .btn.is_subscribed:hover {
  cursor: default;
  filter: none;
}
.tp-ai-landing .btn.ai.is_subscribed:hover { background: var(--ai); }
.tp-ai-landing #fab .btn.ai.is_subscribed:hover { background: var(--white); }