@import url("./fonts/fonts.css");

/* 확정: 피그마 변수·레이어에서 읽은 값 */
:root {
  color-scheme: dark;

  --color-bg: #080808;
  --color-surface: #171717;
  --color-line: #333333;
  --color-card: #22252a;
  --color-theme-switch: #17191d;
  --color-nav: #181a1e;
  --color-text: #ffffff;
  --color-body: #ffffff;
  --color-muted: #b5b5b5;
  --color-copy: #d6dde8;
  --color-input-line: #b5b5b5;
  --color-input-bg: #080808;
  --color-primary: #146ef5;
  --color-on-primary: #ffffff;

  --font-family: Pretendard, "Malgun Gothic", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --text-page: 36px;
  --line-page: 48px;
  --text-section: 24px;
  --line-section: 34px;
  --tracking-section: -0.24px;
  --text-card: 20px;
  --line-card: 28px;
  --text-body: 16px;
  --line-body: 26px;
  --text-item: 16px;
  --line-item: 26px;
  --weight-item: 400;
  --text-sm: 14px;
  --line-sm: 22px;
  --text-button: 16px;
  --line-button: 26px;
  --line-button-card: 24px;
  --text-badge: 16px;
  --line-badge: 24px;
  --text-menu: 16px;
  --line-menu: 19.2px;
  --text-value: 36px;
  --line-value: 48px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-card: 20px;
  --radius-card: 8px;
  --radius-input: 8px;
  --radius-button: 4px;
  --button-height: 52px;
  --input-height: 52px;
  --icon-size: 20px;
  --touch-min: 44px;
  --disabled-opacity: 0.45;
}

/* 치수: 피그마 메타데이터 크기와 화면 규칙 */
:root {
  --bp-mobile: 767px;
  --header-height: 68px;
  --sidenav-width: 176px;
  --panel-width: 416px;
  --m-header-height: 65px;
  --m-nav-height: 76px;
  --m-frame-width: 390px;
  --card-width: 384px;
  --menu-item-width: 208px;
  --menu-item-height: 48px;
  --theme-switch-width: 152px;
  --theme-switch-height: 44px;
  --panel-toggle-width: 114px;
  --panel-toggle-height: 44px;
  --panel-handle-width: 24px;
  --panel-handle-height: 48px;
  --badge-min-width: 70px;
  --badge-height: 36px;
  --process-width: 358px;
  --process-collapsed-height: 76px;
  --mic-size: 120px;
  --wordmark-width: 125px;
  --wordmark-height: 28px;
  --marker-size: 24px;
  --web-header-height: 68px;
  --web-inner: 1440px;
  --web-gutter: 240px;
  --web-gutter-mobile: 20px;
  --web-input-width: 544px;
  --web-input-height: 56px;
  --web-textarea-height: 120px;
  --web-row-width: 936px;
  --web-feature-height: 110px;
  --web-faq-height: 74px;
  --web-icon-size: 24px;
  --dock-width: 592px;
  --dock-height: 88px;
  --dot-hit: 44px;
}

/* 피그마 확인 전: 라이트 페이지 배경·카드, hover·눌림·포커스·처리 중, 모션, 시연 사이트 색, 워드마크·슬라이드 */
:root {
  --color-surface-hover: #222222;
  --color-surface-active: #2b2b2b;
  --color-line-strong: #4d4d4d;
  --color-card-line: transparent;
  --color-card-hover: #2a2d33;
  --color-card-active: #31353c;
  --color-nav-hover: #22252a;
  --color-primary-hover: #0f5fd6;
  --color-primary-active: #0b4fb8;
  --color-primary-text: #6aa5ff;
  --color-primary-ring: rgba(106, 165, 255, 0.35);
  --color-focus: #6aa5ff;
  --color-placeholder: #8c8c8c;
  --color-marker-bg: #333333;
  --color-env-bg: #ffffff;
  --color-env-text: #080808;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);

  --status-success: #10241b;
  --status-success-bg: #38c78f;
  --status-warning: #302006;
  --status-warning-bg: #f3be56;
  --status-info: #10243d;
  --status-info-bg: #559df5;
  --status-danger: #35151b;
  --status-danger-bg: #ef8592;
  --status-neutral: #182231;
  --status-neutral-bg: #aab8cc;
  --badge-icon-size: 16px;
  --icon-status-success: url("../img/common/icon-svg/ico_status_success.svg");
  --icon-status-warning: url("../img/common/icon-svg/ico_status_warning.svg");
  --icon-status-info: url("../img/common/icon-svg/ico_status_info.svg");
  --icon-status-danger: url("../img/common/icon-svg/ico_status_danger.svg");
  --icon-status-neutral: url("../img/common/icon-svg/ico_status_neutral.svg");
  --web-primary: #2563eb;
  --web-primary-hover: #1d4ed8;
  --web-primary-active: #1e40af;
  --web-btn-radius: 6px;
  --web-line: #dde1e6;
  --web-strong: #111317;
  --web-muted: #555c66;
  --web-input-bg: #080808;
  --web-input-line: #b5b5b5;
  --web-input-radius: 4px;
  --radius-media: 12px;
  --text-caption: 13px;
  --line-caption: 20px;
  --text-web-input: 18px;
  --line-web-input: 28px;
  --radius-badge: var(--radius-button);
  --radius-pill: 999px;
  --weight-bold: 700;
  --weight-heavy: 800;

  --web-header-bg: #000000;
  --web-header-line: #222222;
  --web-bg: #080808;
  --web-outline-line: #4d4d4d;

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --demo-bg: #ffffff;
  --demo-text: #10233f;
  --demo-muted: #4a5b74;
  --demo-accent: #1f6fb2;
  --demo-on-accent: #ffffff;
  --demo-soft: #e8f1fa;
}

body.light,
#wrapper.light {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-surface: #f7f8fa;
  --color-line: #dde1e6;
  --color-card: #ffffff;
  --color-theme-switch: #e9ebee;
  --color-nav: #ffffff;
  --color-text: #111317;
  --color-body: #111317;
  --color-muted: #555c66;
  --color-copy: #465263;
  --color-input-line: #8a9099;
  --color-input-bg: #ffffff;
  --color-primary: #2563eb;
  --color-on-primary: #ffffff;

  --color-surface-hover: #eef0f3;
  --color-surface-active: #e3e6ea;
  --color-line-strong: #b8bdc5;
  --color-card-line: #e3e5e9;
  --color-card-hover: #f4f5f7;
  --color-card-active: #eceef1;
  --color-nav-hover: #eef0f3;
  --color-primary-hover: #1d4ed8;
  --color-primary-active: #1e40af;
  --color-primary-text: #1d4ed8;
  --color-primary-ring: rgba(37, 99, 235, 0.25);
  --color-focus: #2563eb;
  --color-placeholder: #6b7280;
  --color-marker-bg: #e3e6ea;
  --color-env-bg: #111317;
  --color-env-text: #ffffff;
  --shadow-pop: 0 8px 24px rgba(17, 19, 23, 0.12);

  --web-header-bg: #ffffff;
  --web-header-line: #d9dce1;
  --web-bg: #f4f5f7;
  --web-outline-line: #b8bdc5;
}

@media (max-width: 767px) {
  :root {
    --text-page: 30px;
    --line-page: 38px;
    --text-section: 20px;
    --line-section: 28px;
    --text-card: 18px;
    --line-card: 28px;
    --text-item: 14px;
    --line-item: 22px;
    --weight-item: 500;
  }
}

/* reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-body);
  background: var(--color-bg);
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

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

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

.skip_link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.skip_link:focus {
  top: var(--space-4);
}

/* Lenis */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* 아이콘 */
.ico {
  display: inline-block;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ico--link {
  -webkit-mask-image: url("../img/common/icon-svg/ico_link.svg");
  mask-image: url("../img/common/icon-svg/ico_link.svg");
}

.ico--jobs {
  -webkit-mask-image: url("../img/common/icon-svg/ico_jobs.svg");
  mask-image: url("../img/common/icon-svg/ico_jobs.svg");
}

.ico--history {
  -webkit-mask-image: url("../img/common/icon-svg/ico_history.svg");
  mask-image: url("../img/common/icon-svg/ico_history.svg");
}

.ico--credit {
  -webkit-mask-image: url("../img/common/icon-svg/ico_credit.svg");
  mask-image: url("../img/common/icon-svg/ico_credit.svg");
}

.ico--support {
  -webkit-mask-image: url("../img/common/icon-svg/ico_support.svg");
  mask-image: url("../img/common/icon-svg/ico_support.svg");
}

.ico--sun {
  -webkit-mask-image: url("../img/common/icon-svg/ico_sun.svg");
  mask-image: url("../img/common/icon-svg/ico_sun.svg");
}

.ico--moon {
  -webkit-mask-image: url("../img/common/icon-svg/ico_moon.svg");
  mask-image: url("../img/common/icon-svg/ico_moon.svg");
}

.ico--profile {
  -webkit-mask-image: url("../img/common/icon-svg/ico_profile.svg");
  mask-image: url("../img/common/icon-svg/ico_profile.svg");
}

.ico--billing {
  -webkit-mask-image: url("../img/common/icon-svg/ico_billing.svg");
  mask-image: url("../img/common/icon-svg/ico_billing.svg");
}

.ico--web {
  width: var(--web-icon-size);
  height: var(--web-icon-size);
  color: var(--color-text);
}

.ico--cursor {
  -webkit-mask-image: url("../img/common/icon-svg/ico_cursor.svg");
  mask-image: url("../img/common/icon-svg/ico_cursor.svg");
}

.ico--arrow {
  -webkit-mask-image: url("../img/common/icon-svg/ico_arrow.svg");
  mask-image: url("../img/common/icon-svg/ico_arrow.svg");
}

.ico--web-chevron {
  -webkit-mask-image: url("../img/common/icon-svg/ico_chevron.svg");
  mask-image: url("../img/common/icon-svg/ico_chevron.svg");
}

.ico--check {
  -webkit-mask-image: url("../img/common/icon-svg/ico_check.svg");
  mask-image: url("../img/common/icon-svg/ico_check.svg");
}

.ico--web-mic {
  -webkit-mask-image: url("../img/common/icon-svg/ico_mic.svg");
  mask-image: url("../img/common/icon-svg/ico_mic.svg");
}

.ico--monitor {
  -webkit-mask-image: url("../img/common/icon-svg/ico_monitor.svg");
  mask-image: url("../img/common/icon-svg/ico_monitor.svg");
}

.ico--web-history {
  -webkit-mask-image: url("../img/common/icon-svg/ico_web_history.svg");
  mask-image: url("../img/common/icon-svg/ico_web_history.svg");
}

.ico--shield {
  -webkit-mask-image: url("../img/common/icon-svg/ico_shield.svg");
  mask-image: url("../img/common/icon-svg/ico_shield.svg");
}

.ico--external {
  -webkit-mask-image: url("../img/common/icon-svg/ico_external.svg");
  mask-image: url("../img/common/icon-svg/ico_external.svg");
}

/* 피그마 파일이 없는 임시 도형 */
.ico--chevron-down {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
}

.ico--chevron-right {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 5l5 5-5 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 5l5 5-5 5'/%3E%3C/svg%3E");
}

.ico--menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3.3 5h13.4M3.3 10h13.4M3.3 15h13.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3.3 5h13.4M3.3 10h13.4M3.3 15h13.4'/%3E%3C/svg%3E");
}

.ico--close {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E");
}

.ico--mic {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.5' y='2.5' width='5' height='9' rx='2.5'/%3E%3Cpath d='M4.5 9.5a5.5 5.5 0 0 0 11 0M10 15v2.5M7 17.5h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.5' y='2.5' width='5' height='9' rx='2.5'/%3E%3Cpath d='M4.5 9.5a5.5 5.5 0 0 0 11 0M10 15v2.5M7 17.5h6'/%3E%3C/svg%3E");
}

.ico--stop {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='5' y='5' width='10' height='10' rx='2' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='5' y='5' width='10' height='10' rx='2' fill='%23000'/%3E%3C/svg%3E");
}

/* 버튼 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--button-height);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-size: var(--text-button);
  line-height: var(--line-button);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

.btn--block {
  display: flex;
  width: 100%;
}

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

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-line);
  color: var(--color-text);
}

.btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
}

.btn--web {
  padding: 0 var(--space-5);
  border-radius: var(--web-btn-radius);
}

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

.btn--web.btn--primary:not(:disabled):not([aria-disabled="true"]):hover,
.btn--web.btn--primary.is-hover {
  background: var(--web-primary-hover);
  border-color: var(--web-primary-hover);
}

.btn--web.btn--primary:not(:disabled):not([aria-disabled="true"]):active,
.btn--web.btn--primary.is-active {
  background: var(--web-primary-active);
  border-color: var(--web-primary-active);
}

.btn--web.btn--outline {
  background: #ffffff;
  border-color: var(--web-line);
  color: var(--web-strong);
}

.btn--web.btn--outline:not(:disabled):not([aria-disabled="true"]):hover,
.btn--web.btn--outline.is-hover {
  background: #f7f8fa;
  border-color: var(--web-strong);
  color: var(--web-strong);
}

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

.btn--outline {
  background: transparent;
  border-color: var(--web-outline-line);
  color: var(--color-text);
}

.btn--text {
  padding: 0 var(--space-2);
  background: transparent;
  color: var(--color-text);
  text-underline-offset: 4px;
}

.btn--legacy {
  width: 240px;
  height: 46px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-text);
  transition:
    background-color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

.icon-btn--line {
  border-color: var(--color-line);
}

.btn--primary:not(:disabled):not([aria-disabled="true"]):hover,
.btn--primary.is-hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn--primary:not(:disabled):not([aria-disabled="true"]):active,
.btn--primary.is-active {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.btn--secondary:not(:disabled):not([aria-disabled="true"]):hover,
.btn--secondary.is-hover,
.btn--outline:not(:disabled):not([aria-disabled="true"]):hover,
.btn--outline.is-hover,
.icon-btn--line:not(:disabled):not([aria-disabled="true"]):hover,
.icon-btn--line.is-hover {
  background: var(--color-surface-hover);
  border-color: var(--color-line-strong);
}

.btn--secondary:not(:disabled):not([aria-disabled="true"]):active,
.btn--secondary.is-active,
.btn--outline:not(.btn--web):not(:disabled):not([aria-disabled="true"]):active,
.btn--outline:not(.btn--web).is-active,
.icon-btn--line:not(:disabled):not([aria-disabled="true"]):active,
.icon-btn--line.is-active {
  background: var(--color-surface-active);
  border-color: var(--color-line-strong);
}

.btn--web.btn--outline:not(:disabled):not([aria-disabled="true"]):active,
.btn--web.btn--outline.is-active {
  background: #eceef1;
  border-color: var(--web-strong);
  color: var(--web-strong);
}

.btn--web.btn--text:not(:disabled):not([aria-disabled="true"]):active,
.btn--web.btn--text.is-active {
  color: #3b4048;
  text-decoration: none;
}

.btn--web.btn--outline:disabled,
.btn--web.btn--outline[aria-disabled="true"] {
  background: #ffffff;
  border-color: var(--web-line);
  color: #555c66;
  opacity: 1;
}

.btn--web.btn--text:disabled,
.btn--web.btn--text[aria-disabled="true"] {
  background: transparent;
  border-color: transparent;
  color: #555c66;
  opacity: 1;
}

.btn--ghost:not(:disabled):not([aria-disabled="true"]):hover,
.btn--ghost.is-hover,
.icon-btn:not(.icon-btn--line):not(:disabled):not([aria-disabled="true"]):hover,
.icon-btn:not(.icon-btn--line).is-hover {
  background: var(--color-surface-hover);
}

.btn--ghost:not(:disabled):not([aria-disabled="true"]):active,
.btn--ghost.is-active,
.icon-btn:not(.icon-btn--line):not(:disabled):not([aria-disabled="true"]):active,
.icon-btn:not(.icon-btn--line).is-active {
  background: var(--color-surface-active);
}

.btn--text:not(:disabled):not([aria-disabled="true"]):hover,
.btn--text.is-hover {
  text-decoration: underline;
}

.btn--text:not(.btn--web):not(:disabled):not([aria-disabled="true"]):active,
.btn--text:not(.btn--web).is-active {
  text-decoration: underline;
  color: var(--color-muted);
}

.btn:focus-visible,
.btn.is-focus,
.icon-btn:focus-visible,
.icon-btn.is-focus {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 4px var(--color-focus);
}

.btn:disabled,
.btn[aria-disabled="true"],
.icon-btn:disabled,
.icon-btn[aria-disabled="true"] {
  background: var(--color-surface);
  border-color: var(--color-line);
  color: var(--color-text);
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

.btn--text:disabled,
.btn--text[aria-disabled="true"] {
  background: transparent;
  border-color: transparent;
}

.btn[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

.btn[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: lp-spin 0.8s linear infinite;
}

.card .btn {
  line-height: var(--line-button-card);
}

@keyframes lp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 입력창 */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--card-width);
}

.field--web {
  max-width: var(--web-input-width);
}

.field__label {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.field__help {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--status-danger-bg);
}

.field__error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--status-danger-bg);
  color: var(--status-danger);
  font-size: 12px;
  line-height: 1;
  font-weight: var(--weight-semibold);
}

.input {
  display: block;
  width: 100%;
  height: var(--input-height);
  padding: var(--space-3);
  border: 1px solid var(--color-input-line);
  border-radius: var(--radius-input);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: var(--line-body);
  transition:
    border-color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

.input::placeholder {
  color: var(--color-placeholder);
}

.input:not(:disabled):hover,
.input.is-hover {
  border-color: var(--color-text);
}

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

.input[aria-invalid="true"],
.input.is-error {
  border-color: var(--status-danger-bg);
}

.input[aria-invalid="true"]:focus,
.input.is-error.is-focus {
  box-shadow: 0 0 0 1px var(--status-danger-bg);
}

.input:disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

.input--web {
  height: var(--web-input-height);
  padding: var(--space-3) var(--space-4);
  border-color: var(--web-input-line);
  border-radius: var(--web-input-radius);
  background: var(--web-input-bg);
  color: #ffffff;
  font-size: var(--text-web-input);
  line-height: var(--line-web-input);
}

.input--web::placeholder {
  color: #ffffff;
}

.input--textarea {
  height: var(--web-textarea-height);
  padding: 16px var(--space-4) var(--space-3);
  resize: vertical;
}

/* 카드 */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--card-width);
  padding: var(--space-card);
  border: 1px solid var(--color-card-line);
  border-radius: var(--radius-card);
  background: var(--color-card);
  color: var(--color-body);
}

.card__label {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

.card__title {
  font-size: var(--text-section);
  line-height: var(--line-section);
  letter-spacing: var(--tracking-section);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.card__title--sm {
  font-size: var(--text-card);
  line-height: var(--line-card);
  letter-spacing: 0;
}

.card__text {
  font-size: var(--text-body);
  line-height: var(--line-body);
}

.card__meta {
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-muted);
}

.card__note {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

.card__value {
  font-size: var(--text-value);
  line-height: var(--line-value);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.info-list__row {
  display: flex;
  gap: var(--space-4);
}

.info-list__row dt {
  flex: 0 0 160px;
  color: var(--color-muted);
}

.info-list__row dd {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.step-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.step-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.step-list__title {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.step-list__desc {
  color: var(--color-muted);
}

/* 상태 배지 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-badge);
  background: var(--badge-bg, var(--status-neutral-bg));
  color: var(--badge-color, var(--status-neutral));
  font-size: var(--text-badge);
  line-height: var(--line-badge);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.badge::before {
  content: "";
  flex: none;
  width: var(--badge-icon-size);
  height: var(--badge-icon-size);
  background: currentColor;
  -webkit-mask: var(--badge-icon) center / contain no-repeat;
  mask: var(--badge-icon) center / contain no-repeat;
}

.badge--success {
  --badge-color: var(--status-success);
  --badge-bg: var(--status-success-bg);
  --badge-icon: var(--icon-status-success);
}

.badge--warning {
  --badge-color: var(--status-warning);
  --badge-bg: var(--status-warning-bg);
  --badge-icon: var(--icon-status-warning);
}

.badge--info {
  --badge-color: var(--status-info);
  --badge-bg: var(--status-info-bg);
  --badge-icon: var(--icon-status-info);
}

.badge--danger {
  --badge-color: var(--status-danger);
  --badge-bg: var(--status-danger-bg);
  --badge-icon: var(--icon-status-danger);
}

.badge--neutral {
  --badge-color: var(--status-neutral);
  --badge-bg: var(--status-neutral-bg);
  --badge-icon: var(--icon-status-neutral);
}

.env-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-badge);
  background: var(--color-env-bg);
  color: var(--color-env-text);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* 메뉴 */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: var(--menu-item-width);
  max-width: 100%;
  height: var(--menu-item-height);
  padding: var(--space-3);
  border-radius: var(--radius-button);
  color: var(--color-muted);
  font-size: var(--text-menu);
  line-height: var(--line-menu);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

.menu-item:hover,
.menu-item.is-hover {
  background: var(--color-nav-hover);
  color: var(--color-text);
}

.menu-item:active,
.menu-item.is-active {
  background: var(--color-surface-active);
  color: var(--color-text);
}

.menu-item[aria-current="page"],
.menu-item.is-current {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.menu-item[aria-current="page"]:active,
.menu-item.is-current.is-active {
  background: var(--color-primary-active);
}

.menu-item:focus-visible,
.menu-item.is-focus {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 4px var(--color-focus);
}

.menu-item--fill {
  width: 100%;
}

/* 테마 전환 */
.theme-switch {
  display: inline-flex;
  flex: none;
  width: var(--theme-switch-width);
  height: var(--theme-switch-height);
  border-radius: var(--radius-button);
  background: var(--color-theme-switch);
}

.theme-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  padding: var(--space-2);
  border-radius: var(--radius-button);
  color: var(--color-muted);
  transition:
    background-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

.theme-switch__btn:hover,
.theme-switch__btn.is-hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.theme-switch__btn:active,
.theme-switch__btn.is-active {
  background: var(--color-surface-active);
  color: var(--color-text);
}

.theme-switch__btn[aria-pressed="true"],
.theme-switch__btn.is-current {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.theme-switch__btn[aria-pressed="true"]:active,
.theme-switch__btn.is-current.is-active {
  background: var(--color-primary-active);
}

.theme-switch__btn:focus-visible,
.theme-switch__btn.is-focus {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 4px var(--color-focus);
}

/* 기존 화면 껍데기에서 쓰는 글자 전환 버튼 */
.theme-toggle {
  height: var(--touch-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}

.theme-toggle:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-line-strong);
}

/* 우측 패널 제어 */
.panel-toggle {
  width: auto;
  height: var(--panel-toggle-height);
  padding: 0 var(--space-3);
  gap: var(--space-2);
  font-size: var(--text-body);
  line-height: 24px;
}

.panel-toggle__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 3px;
  border: 1px solid var(--color-muted);
  border-radius: 3px;
}

.panel-toggle__pane {
  width: 6px;
  height: 12px;
}

.panel-toggle__rail {
  width: 4px;
  height: 12px;
  background: var(--color-primary);
}

.panel-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--panel-handle-width);
  height: var(--panel-handle-height);
  border: 0;
  border-radius: 0;
  background: url("../img/common/icon-svg/ico_panel_handle.svg") center / 16px 40px no-repeat;
  cursor: col-resize;
  touch-action: none;
}

.panel-handle:hover,
.panel-handle.is-hover {
  background: url("../img/common/icon-svg/ico_panel_handle_hover.svg") center / 16px 40px no-repeat;
}

.panel-handle:active,
.panel-handle.is-active,
.panel-handle.is-dragging {
  background: url("../img/common/icon-svg/ico_panel_handle_drag.svg") center / 16px 40px no-repeat;
}

.panel-handle:focus-visible,
.panel-handle.is-focus {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 4px var(--color-focus);
}

/* 모바일 헤더 */
.m-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--m-frame-width);
  height: var(--m-header-height);
  padding: 10px var(--space-4);
  background: #22252a;
  color: var(--color-text);
}

.m-header .wordmark {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
}

.m-header__side {
  display: flex;
  align-items: center;
  gap: 0;
}

.m-header__menu {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  color: #ffffff;
}

.m-header__menu span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
}

.m-header__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  color: #ffffff;
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.14px;
  text-decoration: none;
}

.m-header__info:hover {
  color: var(--color-primary-text);
}

/* 모바일 하단 탐색 */
.m-tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  width: 100%;
  max-width: var(--m-frame-width);
  height: var(--m-nav-height);
  padding: 8px var(--space-4);
  background: #22252a;
}

.m-tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-1) 0;
  border-radius: var(--radius-button);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.14px;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

.m-tabbar__item .ico {
  width: 18px;
  height: 18px;
}

.m-tabbar__more {
  font-size: var(--text-body);
  line-height: var(--line-body);
  letter-spacing: -0.16px;
}

.m-tabbar__item:hover,
.m-tabbar__item.is-hover {
  color: var(--color-text);
}

.m-tabbar__item:active,
.m-tabbar__item.is-active {
  color: var(--color-text);
}

.m-tabbar__item[aria-current="page"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.m-tabbar__item[aria-current="page"]::before {
  content: none;
}

.m-tabbar__item:focus-visible,
.m-tabbar__item.is-focus {
  outline: 2px solid var(--color-focus);
  outline-offset: -4px;
}

/* 모바일 전체 메뉴 */
.m-menu {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--m-frame-width);
  height: 100dvh;
  background: var(--color-nav);
}

.m-menu__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: none;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.m-menu__account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.m-menu__name {
  font-size: var(--text-card);
  line-height: var(--line-card);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.m-menu__org {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

.m-menu__credit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-card);
  border: 1px solid var(--color-card-line);
}

.m-menu__credit-label {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

.m-menu__credit-value {
  font-size: var(--text-section);
  line-height: var(--line-section);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.m-menu__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

.m-menu__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: none;
  padding: var(--space-4);
  border-top: 1px solid var(--color-line);
}

/* 수정 과정 */
.process {
  width: 100%;
  max-width: var(--process-width);
  border: 1px solid var(--color-card-line);
  border-radius: var(--radius-card);
  background: var(--color-card);
}

.process__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--process-collapsed-height);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-card);
  text-align: left;
  transition:
    background-color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

.process__toggle:hover,
.process__toggle.is-hover {
  background: var(--color-card-hover);
}

.process__toggle:active,
.process__toggle.is-active {
  background: var(--color-card-active);
}

.process__toggle:focus-visible,
.process__toggle.is-focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-focus);
}

.process__title {
  display: block;
  font-size: var(--text-card);
  line-height: var(--line-card);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.process__sub {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

.process__toggle .ico {
  color: var(--color-muted);
  transition: transform var(--motion-base) var(--ease);
}

.process__toggle[aria-expanded="true"] .ico {
  transform: rotate(180deg);
}

.process__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-5) var(--space-5);
}

.process__item {
  display: flex;
  gap: var(--space-3);
}

.process__item-title {
  display: block;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.process__item-desc {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

/* 번호 마커 */
.num-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  background: var(--color-marker-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.num-marker--web {
  background: var(--web-primary);
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
}

.process__item .num-marker {
  margin-top: 1px;
}

/* 마이크 */
.mic {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.mic__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mic-size);
  height: var(--mic-size);
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  transition:
    background-color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    box-shadow var(--motion-base) var(--ease);
}

.mic__btn .ico {
  width: 40px;
  height: 40px;
}

.mic__btn:not(:disabled):hover,
.mic__btn.is-hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.mic__btn:not(:disabled):active,
.mic__btn.is-active {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.mic__btn:focus-visible,
.mic__btn.is-focus {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 4px var(--color-focus);
}

.mic__btn .ico--mic {
  -webkit-mask-image: url("../img/common/icon-svg/ico_mic_c41.svg");
  mask-image: url("../img/common/icon-svg/ico_mic_c41.svg");
}

.mic__btn .ico--stop {
  -webkit-mask-image: url("../img/common/icon-svg/ico_stop_c41.svg");
  mask-image: url("../img/common/icon-svg/ico_stop_c41.svg");
}

.mic__btn[aria-pressed="true"] {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-bg);
}

.mic__btn:disabled {
  background: var(--color-surface);
  border-color: transparent;
  color: #ffffff;
  opacity: 0.4;
  cursor: not-allowed;
}

.mic__label {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.mic__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

.mic__status--live {
  color: var(--color-text);
}

.mic__status--live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-info);
  animation: lp-blink 1.2s steps(2, start) infinite;
}

@keyframes lp-mic-ring {
  0% {
    box-shadow: 0 0 0 0 var(--color-primary-ring);
  }
  100% {
    box-shadow: 0 0 0 16px transparent;
  }
}

@keyframes lp-blink {
  to {
    visibility: hidden;
  }
}

/* 워드마크 */
.wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  width: var(--wordmark-width);
  height: var(--wordmark-height);
  color: var(--color-text);
  font-size: 21px;
  line-height: var(--wordmark-height);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--motion-fast) var(--ease);
}

a.wordmark:hover {
  opacity: 0.8;
}

.wordmark--web {
  width: auto;
  height: 28px;
  color: var(--web-strong);
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.48px;
}

/* 시연 사이트 */
.demo-site {
  width: 100%;
  max-width: 720px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.demo-site__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-nav);
}

.demo-site__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.demo-site__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--demo-soft);
}

.demo-site__logo {
  font-weight: var(--weight-bold);
  color: var(--demo-accent);
}

.demo-site__nav {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--demo-muted);
}

.demo-site__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 40px var(--space-5);
  background: var(--demo-soft);
}

.demo-site__title {
  font-size: var(--text-section);
  line-height: var(--line-section);
  font-weight: var(--weight-bold);
}

.demo-site__desc {
  color: var(--demo-muted);
}

.demo-site__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--demo-accent);
  color: var(--demo-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.demo-site__note {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--demo-muted);
}

/* 공식 웹: 기능 행 */
.feature-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--web-row-width);
  height: var(--web-feature-height);
  padding: var(--space-6) var(--space-3);
  background: #f7f8fa;
  color: var(--web-strong);
  text-decoration: none;
}

.feature-row__num {
  flex: none;
  width: 48px;
  color: var(--web-muted);
  font-size: var(--text-sm);
  line-height: 20px;
  font-weight: var(--weight-semibold);
}

.feature-row__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.feature-row__title {
  font-size: var(--text-section);
  line-height: 28px;
  font-weight: var(--weight-semibold);
  color: var(--web-strong);
}

.feature-row__desc {
  color: var(--web-muted);
  font-size: var(--text-body);
  line-height: var(--line-body);
}

.feature-row__next {
  flex: none;
  color: var(--web-strong);
}

/* 공식 웹: 질문 행 */
.faq-row {
  width: 100%;
  max-width: var(--web-row-width);
  padding: 0 var(--space-3);
  background: #f7f8fa;
}

.faq-row__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  width: 100%;
  height: var(--web-faq-height);
  padding: var(--space-6) 0;
  color: var(--web-strong);
  font-size: var(--text-body);
  line-height: var(--line-body);
  font-weight: var(--weight-regular);
  text-align: left;
}

.faq-row__more {
  flex: none;
  width: 140px;
  color: var(--web-muted);
  font-size: var(--text-sm);
  line-height: 20px;
  font-weight: var(--weight-semibold);
  text-align: left;
}

.faq-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-button);
  color: var(--color-muted);
  transition:
    background-color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

.faq-row__icon .ico {
  transition: transform var(--motion-base) var(--ease);
}

.faq-row__q:hover .faq-row__icon,
.faq-row__q.is-hover .faq-row__icon {
  background: var(--color-surface-hover);
  border-color: var(--color-line-strong);
  color: var(--color-text);
}

.faq-row__q:active .faq-row__icon,
.faq-row__q.is-active .faq-row__icon {
  background: var(--color-surface-active);
  border-color: var(--color-line-strong);
  color: var(--color-text);
}

.faq-row__q[aria-expanded="true"] .faq-row__icon .ico {
  transform: rotate(180deg);
}

.faq-row__q:focus-visible,
.faq-row__q.is-focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.faq-row__a {
  max-width: 760px;
  padding: 0 0 var(--space-5);
  color: var(--color-muted);
}

/* 공식 웹: 아이콘 자리 */
.icon-slot {
  display: inline-block;
  flex: none;
  width: var(--web-icon-size);
  height: var(--web-icon-size);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-button);
}

/* 공식 웹: 음성 요청 도크 */
.voice-dock {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--dock-width);
  height: var(--dock-height);
  padding: var(--space-4);
  border: 1px solid var(--web-line);
  border-radius: var(--radius-media);
  background: #ffffff;
}

.voice-dock__mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--web-primary);
  color: #ffffff;
  transition:
    background-color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

.voice-dock__mic .ico {
  width: 22px;
  height: 22px;
}

.voice-dock__mic:not(:disabled):hover,
.voice-dock__mic.is-hover {
  background: var(--color-primary-hover);
}

.voice-dock__mic:not(:disabled):active,
.voice-dock__mic.is-active {
  background: var(--color-primary-active);
}

.voice-dock__mic:focus-visible,
.voice-dock__mic.is-focus {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 4px var(--color-focus);
}

.voice-dock__mic:disabled {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

.voice-dock__text {
  flex: 1;
  min-width: 0;
}

.voice-dock__kicker {
  font-size: var(--text-caption);
  line-height: var(--line-caption);
  color: var(--web-muted);
}

.voice-dock__hint {
  overflow: hidden;
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--web-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-dock__mic:not(:disabled):hover,
.voice-dock__mic.is-hover {
  background: var(--web-primary-hover);
}

.voice-dock__mic:not(:disabled):active,
.voice-dock__mic.is-active {
  background: var(--web-primary-active);
}

/* 공식 웹: 슬라이드 틀 */
.slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 720px;
}

.slide__frame {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-5);
  width: 100%;
  aspect-ratio: 1440 / 999;
  padding: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--web-bg);
}

.slide__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  min-width: 0;
}

.slide__eyebrow {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

.slide__title {
  font-size: var(--text-card);
  line-height: var(--line-card);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.slide__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

.slide__steps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.slide__visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-card);
  border: 1px solid var(--color-card-line);
}

.slide__visual--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.slide__line {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: var(--color-line);
}

.slide__line--short {
  width: 50%;
}

.slide__line--mid {
  width: 70%;
}

.slide__line--long {
  width: 90%;
}

.slide__qr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-button);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-muted);
  text-align: center;
}

.slide__phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 96px;
  height: 168px;
  border: 2px solid var(--color-line-strong);
  border-radius: 16px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-muted);
}

.slide__phone-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-marker-bg);
  color: var(--color-text);
}

.slide-dots {
  display: flex;
  justify-content: center;
}

.slide-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dot-hit);
  height: var(--dot-hit);
  border-radius: var(--radius-button);
}

.slide-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  transition:
    width var(--motion-base) var(--ease),
    background-color var(--motion-fast) var(--ease),
    transform var(--motion-fast) var(--ease);
}

.slide-dot:hover::before,
.slide-dot.is-hover::before {
  background: var(--color-text);
}

.slide-dot:active::before,
.slide-dot.is-active::before {
  background: var(--color-text);
  transform: scale(0.75);
}

.slide-dot:focus-visible,
.slide-dot.is-focus {
  outline: 2px solid var(--color-focus);
  outline-offset: -4px;
}

.slide-dot[aria-current="true"]::before {
  width: 24px;
  background: var(--color-primary);
}

.slide-dot--web::before,
.slide-dot--web[aria-current="true"]::before {
  width: 8px;
  background: transparent;
  border: 1.5px solid #ffffff;
  transform: none;
}

.slide-dot--web[aria-current="true"]::before {
  background: #ffffff;
}

.faq-open {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid #333333;
}

.faq-open h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--weight-semibold);
  color: #ffffff;
}

.faq-open p {
  max-width: 1376px;
  font-size: 18px;
  line-height: 28px;
  color: #b5b5b5;
}

.clinic-scale {
  width: min(100%, 960px);
  height: 530px;
  overflow: hidden;
}

.clinic {
  display: flex;
  flex-direction: column;
  width: 1440px;
  height: 796px;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  color: #111317;
  transform: scale(0.6667);
  transform-origin: top left;
}

.clinic__head,
.clinic__foot {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 80px;
  padding: 0 48px;
}

.clinic__foot {
  height: 48px;
  gap: 24px;
  padding: 0 72px;
  color: #555c66;
  font-size: 14px;
  line-height: 22px;
}

.clinic__foot span:last-child {
  margin-left: auto;
}

.clinic h4,
.clinic h5 {
  margin: 0;
}

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

.clinic__nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
  color: #3b4048;
  font-size: 14px;
  line-height: 22px;
}

.clinic__reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 40px;
  border-radius: 6px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--weight-semibold);
}

.clinic__rule {
  height: 1px;
  background: #eceef1;
}

.clinic__main {
  display: flex;
  gap: 64px;
  height: 420px;
  padding: 30px 72px;
}

.clinic__copy {
  width: 792px;
}

.clinic__kicker {
  color: #2563eb;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--weight-semibold);
}

.clinic__pick {
  position: relative;
  margin-top: 16px;
  padding: 8px;
}

.clinic__pick h4 {
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: -1.12px;
}

.clinic__pick::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #2563eb;
  border-radius: 6px;
}

.clinic__badge {
  position: absolute;
  top: -29px;
  right: 0;
  height: 26px;
  padding: 3px 8px;
  background: #2563eb;
  color: #ffffff;
  font-size: 13px;
  line-height: 20px;
}

.clinic__lead {
  margin-top: 16px;
  color: #3b4048;
  font-size: 20px;
  line-height: 32px;
}

.clinic__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 48px;
  margin-top: 32px;
  border-radius: 6px;
  background: #2563eb;
  color: #ffffff;
  font-size: 16px;
  line-height: 26px;
  font-weight: var(--weight-semibold);
}

.clinic__photo {
  width: 440px;
  height: 360px;
  object-fit: cover;
  border-radius: 8px;
}

.clinic__fees {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 72px;
  background: #f7f8fa;
}

.clinic__fees h5 {
  font-size: 18px;
  line-height: 26px;
  font-weight: var(--weight-semibold);
}

.clinic__fee,
.clinic__fees-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  border-bottom: 1px solid #dde1e6;
  font-size: 16px;
  line-height: 26px;
}

.clinic__fees-head {
  height: 28px;
  border-bottom: 0;
  color: #555c66;
  font-size: 13px;
  line-height: 20px;
}

.clinic__fee b {
  font-weight: var(--weight-semibold);
}

.web-slide {
  width: 100%;
  max-width: 960px;
  overflow: hidden;
  border-radius: 8px;
  background: #080808;
  color: #ffffff;
}

.web-slide__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 32px 0;
}

.web-slide__head h4 {
  font-size: 24px;
  line-height: 34px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.24px;
}

.web-slide__head p {
  color: #b5b5b5;
  font-size: 18px;
  line-height: 28px;
}

.web-slide__stage {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 24px;
  align-items: center;
  padding: 24px 32px;
}

.web-slide__phone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background: #171717;
}

.web-slide__phone p {
  color: #b5b5b5;
  font-size: 14px;
  line-height: 22px;
}

.web-slide__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0 32px 24px;
}

.web-slide__steps div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

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

.web-slide__steps p {
  font-size: 16px;
  line-height: 26px;
}

@media (max-width: 767px) {
  .btn--web.btn--primary {
    display: flex;
    width: 100%;
  }

  .slide__frame {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .info-list__row dt {
    flex-basis: 120px;
  }
}

/* 기존 화면 껍데기 */
.screen-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-height);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-nav);
}

.screen-bar__id {
  margin: 0;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.screen-bar a {
  color: var(--color-primary-text);
  text-decoration: none;
}

.screen-bar a:hover {
  text-decoration: underline;
}

.screen-bar .theme-toggle,
.screen-bar .theme-switch {
  margin-left: auto;
}

.screen {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px var(--space-4);
}

.screen h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-page);
  line-height: var(--line-page);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.screen p {
  margin: 0;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .screen-bar {
    height: var(--m-header-height);
  }

  .screen {
    padding: 32px var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .mic__btn[aria-pressed="true"] {
    box-shadow: 0 0 0 6px var(--color-primary-ring);
  }
}

/* 콘솔 화면 레이아웃. 색·간격·크기는 기존 변수만 사용 */
.console {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-body);
}

/* PC 구조(768px 이상)는 1280px보다 좁아지면 줄이지 않고 가로 스크롤로 넘긴다 */
@media (min-width: 768px) {
  .console {
    min-width: 1280px;
  }
}

.console .m-header,
.console .m-tabbar,
.console .m-menu,
.console .card,
.console .process,
.console .field {
  max-width: none;
}

.console-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-height);
  padding: 0 var(--space-4);
  background: var(--color-card);
}

.console-org {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  height: var(--button-height);
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-line);
}

.console-org__name {
  font-size: var(--text-body);
  line-height: var(--line-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
}

.console-org__sub,
.console-credit,
.console-chip {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
  white-space: nowrap;
}

.console-top__gap {
  flex: 1;
  min-width: 0;
}

.console-chip,
.console-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--touch-min);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-button);
}

.console-chip {
  padding: 0 var(--space-3);
}

.console-credit {
  width: calc(var(--sidenav-width) + var(--space-5) + var(--space-1));
  font-variant-numeric: tabular-nums;
}

.console-avatar {
  width: var(--touch-min);
  color: var(--color-muted);
}

.console-body {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--header-height));
}

.console-body > main {
  flex: 1 1 auto;
  min-width: 0;
}

.console-nav {
  position: sticky;
  top: var(--header-height);
  display: flex;
  flex-direction: column;
  flex: none;
  width: var(--sidenav-width);
  height: calc(100vh - var(--header-height));
  background: var(--color-nav);
}

.console-nav__list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-5) var(--space-3) var(--space-5);
}

.console-nav__extra {
  padding: 0 var(--space-3) var(--space-4);
}

.console-nav__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3) var(--space-5);
  background: var(--color-card);
}

.console-nav__note,
.console-safe {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

.console-back {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
  text-decoration: none;
}

.console-back:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.console-stage {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: flex-start;
}

.console-work,
.console-work > [data-screen],
.console-work > [data-screen] > section,
.console-panel__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.console-work {
  flex: 1 1 auto;
  padding: calc(var(--space-5) + var(--space-2));
}

.console-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-body);
}

.console-title {
  font-size: var(--text-page);
  line-height: var(--line-page);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.console-lead {
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-body);
}

.console-section {
  font-size: var(--text-section);
  line-height: var(--line-section);
  letter-spacing: var(--tracking-section);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.site-card__head,
.badge-row,
.page-head,
.page-head__actions,
.step-actions,
.prompt,
.job-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site-card__head {
  gap: var(--space-4);
}

.site-card__name {
  flex: 1 1 auto;
  min-width: auto;
  font-size: var(--text-card);
  line-height: var(--line-card);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.site-card__meta .env-badge {
  margin-right: var(--space-2);
}

.site-card__text {
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-body);
}

.site-card__meta {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-body);
  opacity: 0.7;
}

.prompt {
  gap: var(--space-5);
  padding: var(--space-3);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-card);
  background: var(--color-bg);
}

.prompt__copy {
  display: flex;
  flex: 1;
  gap: var(--space-3);
  min-width: 0;
  align-items: baseline;
}

.prompt__title {
  font-size: var(--text-body);
  line-height: var(--line-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.prompt__example {
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-muted);
}

.prompt .ico {
  width: var(--web-icon-size);
  height: var(--web-icon-size);
  color: var(--color-text);
}

.job-filters {
  gap: var(--space-2);
  flex-wrap: wrap;
}

.job-table {
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: auto;
}

.job-table__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
}

.job-table__head {
  background: var(--color-card);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

.job-table__name,
.job-table__time {
  font-size: var(--text-body);
  line-height: var(--line-body);
}

.job-table__name {
  color: var(--color-text);
}

.job-table__time {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.process-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-card);
}

.process-grid__title {
  font-size: var(--text-card);
  line-height: var(--line-card);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.process-grid__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-4);
}

.process-grid__item {
  display: flex;
  gap: var(--space-3);
  min-width: 0;
}

.process-grid__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--marker-size) + var(--space-3) - var(--space-1));
  height: calc(var(--marker-size) + var(--space-3) - var(--space-1));
  border-radius: var(--radius-button);
  background: var(--color-marker-bg);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

.process-grid__name {
  display: block;
  font-size: var(--text-body);
  line-height: var(--line-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.process-grid__desc {
  display: block;
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-muted);
}

.console-panel {
  position: relative;
  flex: 0 1 var(--panel-width);
  width: var(--panel-width);
  min-width: calc(var(--sidenav-width) + var(--header-height) + var(--m-nav-height));
  padding: calc(var(--space-5) + var(--space-2)) var(--space-4) var(--space-5);
  background: var(--color-nav);
}

.console-panel .panel-handle {
  position: absolute;
  left: 0;
  top: calc(50vh - var(--header-height));
  transform: translate(-50%, -50%);
}

.console-panel .swiper:not(.swiper-initialized) {
  overflow: visible;
}

.console-panel .swiper:not(.swiper-initialized) .swiper-wrapper {
  flex-direction: column;
  gap: var(--space-3);
  height: auto;
  transform: none;
}

.console-panel .swiper:not(.swiper-initialized) .swiper-slide {
  width: 100%;
  height: auto;
  margin-right: 0;
}

.console-panel .slide-dots {
  display: none;
}

@media (max-width: 767px) {
  .console-menu:not([hidden]) {
    display: block;
  }
}

.console-safe {
  padding: var(--space-1);
}

.site-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: calc(var(--sidenav-width) + var(--header-height) + var(--m-nav-height));
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-card);
  color: var(--color-muted);
  text-align: center;
}

.page-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.page-head__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.page-head__actions {
  flex: none;
  padding-top: var(--space-4);
}

.connect-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-radius: var(--radius-card);
  background: var(--color-card);
}

.connect-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: calc(var(--header-height) - var(--space-1));
  padding: var(--space-3) var(--space-4);
  color: var(--color-muted);
}

.connect-step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--marker-size) + var(--space-3) - var(--space-1));
  height: calc(var(--marker-size) + var(--space-3) - var(--space-1));
  border-radius: var(--radius-button);
  background: var(--color-marker-bg);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

.connect-step.is-current {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.connect-step.is-current .connect-step__no {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.onboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-card);
}

.onboard__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.onboard__step {
  font-size: var(--text-section);
  line-height: var(--line-section);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text);
  cursor: pointer;
}

.choice input {
  flex: none;
  width: var(--web-icon-size);
  height: var(--web-icon-size);
  margin-top: var(--space-1);
  accent-color: var(--color-primary);
}

.support-note {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  color: var(--color-body);
}

.console-footnote {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  color: var(--color-muted);
}

.job-swipe,
.process--mobile,
.card--m-only,
.console .m-header,
.console .m-tabbar,
.console-menu {
  display: none;
}

body.is-case-process .process--mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.job-swipe > .slide-dots,
.console-panel__group > .slide-dots {
  position: static;
  inset: auto;
  width: auto;
  transform: none;
}

.slide-dots .slide-dot.swiper-pagination-bullet {
  width: var(--dot-hit);
  height: var(--dot-hit);
  margin: 0;
  background: transparent;
  opacity: 1;
  border-radius: var(--radius-button);
}

.swiper-slide.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: none;
  height: auto;
  box-sizing: border-box;
}

.job-swipe {
  width: 100%;
  align-self: stretch;
}

.console .swiper {
  width: 100%;
  min-width: 0;
  margin-right: 0;
  margin-left: 0;
}

.console-panel .swiper-initialized .swiper-wrapper {
  align-items: stretch;
}

.console-panel .swiper-initialized .swiper-slide {
  width: 100%;
  height: auto;
}

.console-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  color: var(--color-text);
}

.console-icon:hover {
  color: var(--color-primary-text);
}

.console-icon [data-icon-close] {
  display: none;
}

.console-icon[aria-expanded="true"] [data-icon-open] {
  display: none;
}

.console-icon[aria-expanded="true"] [data-icon-close] {
  display: inline-block;
}

.console-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  height: var(--touch-min);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.console-info:hover {
  color: var(--color-primary-text);
}

.console-menu {
  position: fixed;
  z-index: 30;
  inset: var(--m-header-height) 0 var(--m-nav-height);
}

.console-menu .m-menu {
  width: 100%;
  height: 100%;
}

.is-case-target {
  box-shadow: 0 0 0 2px var(--color-focus);
}

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

@media (max-width: 991px) {
  .console-org__sub {
    display: none;
  }

  .console-credit {
    width: auto;
  }

  .prompt__copy {
    flex-wrap: wrap;
  }

  .prompt__title,
  .prompt__example {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .console-top,
  .console-nav,
  .job-filters,
  .job-table,
  .console-work > [data-screen] > .process-grid,
  .console-safe--pc,
  .panel-handle,
  .console-footnote {
    display: none;
  }

  .console .m-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    max-width: none;
    background: var(--color-card);
    border-bottom: 0;
  }

  .console .m-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: grid;
    max-width: none;
  }

  .console-body {
    display: block;
    min-height: 0;
    padding-top: var(--m-header-height);
    padding-bottom: var(--m-nav-height);
  }

  .console-stage {
    display: block;
  }

  .console-work {
    padding: var(--space-4);
  }

  .console-panel {
    position: static;
    width: auto;
    min-width: 0;
    padding: 24px var(--space-4);
  }

  .console-panel__group {
    gap: var(--space-3);
  }

  .console-panel .swiper-initialized {
    overflow: hidden;
  }

  .console-panel .swiper-slide.card {
    min-height: 0;
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-card);
    background: var(--color-card);
    box-shadow: inset 0 0 0 1px var(--color-card-line);
  }

  .console-panel .swiper-slide .card__title {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.2px;
  }

  .console-panel .swiper-slide .card__text {
    color: var(--color-copy);
  }

  .console-panel .swiper-slide .console-safe {
    font-size: var(--text-sm);
    line-height: var(--line-sm);
  }

  .console-panel .slide-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 32px;
  }

  .console-panel .slide-dot {
    width: 28px;
    height: 32px;
  }

  .card--m-only {
    display: block;
  }

  .card--desk {
    display: none;
  }

  .prompt,
  .page-head,
  .page-head__actions,
  .step-actions,
  .prompt__copy {
    flex-direction: column;
    align-items: stretch;
  }

  .prompt__title,
  .prompt__example {
    white-space: normal;
  }

  .prompt .btn,
  .page-head__actions .btn,
  .step-actions .btn,
  .swiper-slide .btn {
    width: 100%;
  }

  .page-head__actions {
    padding-top: 0;
  }

  .job-swipe,
  .process--mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .process--mobile .process {
    max-width: none;
  }

  .connect-steps,
  .form-grid,
  .process-grid__cols {
    grid-template-columns: 1fr;
  }

  .connect-steps {
    padding: var(--space-3) var(--space-2);
    gap: var(--space-1);
  }

  .job-swipe .swiper-slide.card {
    min-height: 0;
    padding: var(--space-4);
    background: var(--color-surface);
  }

  .job-swipe .card__title {
    font-size: 18px;
    line-height: 28px;
  }

  .job-swipe .card__text {
    color: var(--color-copy);
  }

  .job-swipe .slide-dot {
    width: 32px;
    height: 32px;
  }

  .flow,
  .action-row {
    flex-direction: column;
  }

  .info-list--wide .info-list__row {
    flex-direction: column;
    gap: var(--space-1);
  }

  .info-list--wide .info-list__row dt {
    flex-basis: auto;
  }
}

.console-work > .btn,
.accent > .btn:not(.btn--block) {
  align-self: flex-start;
}

.accent {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--color-card);
  border-left: 3px solid transparent;
}

.accent--ok {
  border-left-color: #79dab2;
}

.accent--warn {
  border-left-color: #f2c879;
}

.accent--info {
  border-left-color: #93bdff;
}

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

.accent__head .card__title {
  flex: 1;
  min-width: 0;
}

.accent__title--info {
  color: #93bdff;
}

.accent__title--warn {
  color: #f2c879;
}

.accent__hint {
  color: #f2c879;
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

.info-list--wide .info-list__row dt {
  flex-basis: 210px;
  font-weight: var(--weight-regular);
  color: #d6dde8;
}

.info-list--wide .info-list__row dd {
  font-weight: var(--weight-regular);
}

.info-list--wide .info-list__row dd.is-strong {
  font-weight: var(--weight-semibold);
}

.flow {
  display: flex;
  gap: 16px;
}

.flow__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.ledger {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.ledger__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.ledger__row--head {
  background: var(--color-card);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

.ledger__cell {
  flex: 1;
  min-width: 0;
}

.ledger__name {
  font-weight: var(--weight-semibold);
}

.action-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

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

.copy-list dt {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

.copy-list dd {
  color: var(--color-body);
}

.screen-fields .field,
.screen-fields .card {
  max-width: none;
}

.accent .field {
  max-width: none;
}

.accent .field__label {
  font-size: var(--text-body);
  line-height: var(--line-body);
  font-weight: var(--weight-regular);
}

body.light .info-list--wide .info-list__row dt {
  color: var(--color-muted);
}

body.light .accent--ok {
  border-left-color: #059669;
}

body.light .accent--warn {
  border-left-color: #b45309;
}

body.light .accent--info {
  border-left-color: var(--color-primary);
}

body.light .accent__title--warn,
body.light .accent__hint {
  color: #b45309;
}

body.light .accent__title--info {
  color: var(--color-primary);
}