/* Showgle AI - Core Stylesheet (CSS 변수, 리셋, 레이아웃) */

/* ============================================================================
   섹션 1: CSS 변수
   ============================================================================ */

   :root {
    /* ========================================
       테마 설정 (Theme Configuration)
       이 섹션의 색상만 변경하면 전체 테마가 바뀝니다
       ======================================== */
  
    /* ========================================
       브랜드 색상 (Brand Colors)
       ======================================== */
  
    /** 메인 브랜드 색상 - 쇼글 오렌지 */
    --primary: #ff5000;
    --primary-rgb: 255, 80, 0;
  
    /** 밝은 브랜드 색상 - hover 상태 등에 사용 */
    --primary-light: #ff7733;
    --primary-light-rgb: 255, 119, 51;
  
    /** 어두운 브랜드 색상 - active 상태 등에 사용 */
    --primary-dark: #e64800;
    --primary-dark-rgb: 230, 72, 0;
  
    /** 그라디언트 종점 색상 */
    --primary-gradient-end: #e64500;
  
    /** 연한 오렌지 강조 배경 (AI 영역, 추천 카드 등) */
    --accent-bg: #fff0eb;
  
    /** 선택 요소 내부 배경색 */
    --accent-bg-light: #fafafa;
  
    /* ========================================
       배경 및 텍스트 색상 (Background & Text)
       ======================================== */
  
    /** 페이지 전체 배경색 */
    --bg: #f8fafc;
  
    /** 비활성/서브 배경색 (disabled, hover 배경 등) */
    --bg-alt: #f1f5f9;
  
    /** 기본 텍스트 색상 (진한 남색) */
    --text: #1e293b;
  
    /** 보조 텍스트 색상 (회색) */
    --text-secondary: #64748b;
  
    /** 테두리 색상 */
    --border: #e2e8f0;
  
    /** 카드/컴포넌트 배경색 */
    --card-bg: #fff;
  
    /* ========================================
       채팅 버블 색상 (Chat Bubble Colors)
       ======================================== */
  
    /** 사용자 메시지 배경색 */
    --user-bubble: var(--primary);
  
    /** AI 메시지 배경색 */
    --ai-bubble: #fff;
  
    /* ========================================
       사이드바 색상 (Sidebar Colors)
       ======================================== */
  
    /** 사이드바 배경색 (다크 테마) */
    --sidebar-bg: #1e293b;
  
    /** 사이드바 텍스트 색상 */
    --sidebar-text: #e2e8f0;
  
    /* ========================================
       상태 색상 (Status Colors)
       ======================================== */
  
    /** 성공 상태 - 초록색 */
    --success: #10b981;
  
    /** 경고 상태 - 주황색 */
    --warning: #f59e0b;
  
    /** 에러 상태 - 빨간색 */
    --error: #ef4444;
  
    /* ========================================
       Border Radius (테두리 반경)
       ======================================== */
  
    /** 작은 반경 - 칩, 태그 등 */
    --radius-sm: 4px;
  
    /** 기본 반경 - 입력 필드, 버튼 */
    --radius-md: 8px;
  
    /** 큰 반경 - 카드, 모달 */
    --radius-lg: 12px;
  
    /** 매우 큰 반경 - 큰 카드 */
    --radius-xl: 16px;
  
    /** 완전한 원형 */
    --radius-full: 9999px;
  
    /* ========================================
       Spacing (간격)
       ======================================== */
  
    /** 매우 작은 간격 */
    --space-xs: 4px;
  
    /** 작은 간격 */
    --space-sm: 8px;
  
    /** 기본 간격 */
    --space-md: 12px;
  
    /** 큰 간격 */
    --space-lg: 16px;
  
    /** 매우 큰 간격 */
    --space-xl: 20px;
  
    /** 초대형 간격 */
    --space-2xl: 24px;
  
    /* ========================================
       Transitions (전환 효과)
       ======================================== */
  
    /** 빠른 전환 */
    --transition-fast: 0.15s ease;
  
    /** 기본 전환 */
    --transition-normal: 0.2s ease;
  
    /** 느린 전환 */
    --transition-slow: 0.3s ease;
  
    /* ========================================
       동적 뷰포트 (Dynamic Viewport)
       ======================================== */
  
    /**
     * 동적 뷰포트 높이 단위
     * JavaScript에서 실제 뷰포트 높이로 업데이트됨
     * 모바일 브라우저의 주소창 높이 변화에 대응
     */
    --vh: 1vh;
  
    /* ========================================
       Font Scaling (폰트 크기 조정)
       ======================================== */
  
    /**
     * 폰트 스케일 비율 (기본값: 1)
     * JavaScript에서 0.5 ~ 1.5 범위로 조정
     */
    --font-scale: 1;
  
    /** 기본 폰트 크기들 (스케일 적용, 기준값은 원본의 80%) */
    --font-size-xs: calc(11.2px * var(--font-scale));
    --font-size-sm: calc(12.8px * var(--font-scale));
    --font-size-base: calc(14.4px * var(--font-scale));
    --font-size-md: calc(16.8px * var(--font-scale));
    --font-size-lg: calc(18.4px * var(--font-scale));
    --font-size-xl: calc(20.8px * var(--font-scale));
    --font-size-2xl: calc(24.8px * var(--font-scale));
  }
  
  /* ============================================================================
     섹션 2: 기본 리셋 및 타이포그래피
     ============================================================================ */
  
  html {
    height: 100%;
    height: -webkit-fill-available;
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    display: flex;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  
  :focus:not(:focus-visible) {
    outline: none;
  }
  
  a {
    color: var(--primary);
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  button {
    font-family: inherit;
    cursor: pointer;
  }
  
  button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  /* 히스토리 메시지: 원래 스타일 유지, 클릭만 차단 */
  .message.is-history .message-content {
    pointer-events: none;
  }
  
  input,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }
  
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
  }
  
  /* ============================================================================
     섹션 3: 레이아웃
     ============================================================================ */
  
  /* ============================================================================
     사이드바
     ============================================================================ */
  
  .sidebar {
    width: 280px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  
  /* ----------------------------------------------------------------------------
     사이드바 헤더
     ---------------------------------------------------------------------------- */
  
  .sidebar-header {
    padding: 20px;
    padding-top: calc(20px + env(safe-area-inset-top));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .sidebar-header h1 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .version-badge {
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    background: var(--primary);
    border-radius: 4px;
    color: white;
  }
  
  .new-chat-btn {
    width: 100%;
    padding: 12px 16px;
    margin-top: 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .new-chat-btn:hover {
    background: var(--primary-dark);
  }
  
  /* ----------------------------------------------------------------------------
     세션 목록 (채팅 히스토리)
     ---------------------------------------------------------------------------- */
  
  .session-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
  }
  
  /* 비로그인 상태 로그인 프롬프트 */
  .session-login-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 16px;
  }
  
  .session-login-text {
    color: var(--sidebar-text);
    font-size: var(--font-size-base);
    text-align: center;
    margin: 0;
    line-height: 1.5;
  }
  
  .session-login-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 10px 32px;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  
  .session-login-btn:hover {
    opacity: 0.9;
  }
  
  .session-item {
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .session-item:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .session-item.active {
    background: rgba(var(--primary-rgb), 0.3);
  }
  
  .session-title {
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }
  
  .session-delete {
    opacity: 0;
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
  }
  
  .session-item:hover .session-delete {
    opacity: 1;
  }
  
  /* 세션 목록 아이템 구조 */
  .session-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .session-item-main {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  
  .session-badge {
    flex-shrink: 0;
    font-size: calc(9.6px * var(--font-scale));
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    font-weight: 500;
    white-space: nowrap;
  }
  
  .session-item.active .session-badge {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
  }
  
  .session-subtitle {
    font-size: calc(9.6px * var(--font-scale));
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .session-item.active .session-subtitle {
    color: rgba(255, 255, 255, 0.65);
  }
  
  /* ----------------------------------------------------------------------------
     사이드바 푸터 (사용자 ID 변경)
     ---------------------------------------------------------------------------- */
  
  .sidebar-footer {
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
  }
  
  .user-id-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .user-id-label {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .user-id-input-wrapper {
    display: flex;
    gap: 6px;
  }
  
  .user-id-input {
    flex: 1;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: var(--sidebar-text);
    font-size: var(--font-size-sm);
    font-family: monospace;
    min-width: 0;
  }
  
  .user-id-input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.15);
  }
  
  .user-id-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
  
  .user-id-btn {
    padding: 8px 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
  }
  
  .user-id-btn:hover {
    background: var(--primary-dark);
  }
  
  .user-id-btn:disabled {
    background: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
  }
  
  .user-id-current {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.5);
    word-break: break-all;
  }
  
  /* ----------------------------------------------------------------------------
     폰트 크기 조정 컨트롤
     ---------------------------------------------------------------------------- */
  
  .font-scale-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .font-scale-label {
    font-size: calc(8.8px * var(--font-scale));
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .font-scale-controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .font-scale-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: var(--sidebar-text);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
  }
  
  .font-scale-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .font-scale-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  .font-scale-value {
    flex: 1;
    text-align: center;
    font-size: calc(10.4px * var(--font-scale));
    font-weight: 500;
    color: var(--sidebar-text);
  }
  
  .font-scale-reset {
    padding: 6px 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-size: calc(8.8px * var(--font-scale));
    cursor: pointer;
    transition: all 0.15s ease;
  }
  
  .font-scale-reset:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sidebar-text);
  }
  
  /* ============================================================================
     사이드바 오버레이
     ============================================================================ */
  
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  
  .sidebar-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  
  /* ============================================================================
     메인 콘텐츠 영역
     ============================================================================ */
  
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    min-width: 0;
    min-height: 0;
    height: 100%;
  }
  
  /* ----------------------------------------------------------------------------
     채팅 헤더
     ---------------------------------------------------------------------------- */
  
  .chat-header {
    padding: 16px 24px;
    background: white;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .chat-header h2 {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text);
  }
  
  .phase-badge {
    font-size: var(--font-size-sm);
    padding: 4px 12px;
    background: #f1f5f9;
    border-radius: 16px;
    color: var(--text-secondary);
  }
  
  .header-logo {
    height: 28px;
    width: auto;
  }
  
  .mobile-header .header-logo {
    height: 24px;
    width: auto;
  }
  
  .sidebar-header .header-logo {
    height: 22px;
    width: auto;
    filter: brightness(0) invert(1);
  }
  
  /* ----------------------------------------------------------------------------
     모바일 헤더 (768px 이하에서 표시)
     ---------------------------------------------------------------------------- */
  
  .mobile-header {
    display: none;
    padding: 12px 16px;
    background: #ffffff;
    color: var(--text);
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }
  
  .mobile-header h1 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
  }
  
  .mobile-logo-btn {
    cursor: pointer;
  }
  
  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text, #1f2937);
    border-radius: 1px;
  }
  
  .mobile-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  
  .mobile-new-chat-btn {
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-size: calc(10.4px * var(--font-scale));
    font-weight: 500;
    cursor: pointer;
  }
  
  .mobile-close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font-size: 16px;
    color: var(--text, #1f2937);
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-close-btn:active {
    background: var(--hover-bg, #f3f4f6);
  }
  
  /* ============================================================================
     메시지 영역
     ============================================================================ */
  
  .messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 히어로 섹션 — 대화 영역 최상단 안내 배너 */
  .chat-hero {
    width: 70%;
    align-self: center;
  }
  
  .chat-hero-body {
    padding: 28px 0 22px;
  }
  
  .chat-hero-title {
    margin: 0 0 10px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--text, #1f2937);
  }
  
  .chat-hero-title-main {
    font-size: calc(42.8px * var(--font-scale));
  }
  
  .chat-hero-title-sub {
    font-size: calc(30.8px * var(--font-scale));
  }
  
  .chat-hero-desc {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--text-secondary, #6b7280);
  }
  
  .chat-hero-desc strong {
    color: var(--primary, #f97316);
    font-weight: 700;
  }
  
  .chat-hero-desc--mobile {
    display: none;
  }
  
  @media (max-width: 768px) {
    .chat-hero {
      width: 95%;
    }
    .chat-hero-body {
      padding: 20px 0 14px;
    }
    .chat-hero-title-main {
      font-size: calc(28px * var(--font-scale));
    }
    .chat-hero-title-sub {
      font-size: calc(21px * var(--font-scale));
    }
    .chat-hero-desc {
      font-size: var(--font-size-base);
      line-height: 1.5;
    }
    .chat-hero-desc--desktop {
      display: none;
    }
    .chat-hero-desc--mobile {
      display: block;
    }
  }
  
  .messages-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  /* ----------------------------------------------------------------------------
     개별 메시지 스타일
     ---------------------------------------------------------------------------- */
  
  .message {
    display: flex;
    max-width: 85%;
  }
  
  .message.user {
    align-self: flex-end;
  }
  
  .message.ai {
    align-self: center;
    width: 70%;
    max-width: none;
  }
  
  .message-content {
    padding: 12px 8px;
    border-radius: 16px;
    font-size: var(--font-size-md);
    line-height: 1.5;
  }
  
  .message.ai .message-content {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px 16px 16px 4px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .message.user .message-content {
    background: var(--user-bubble);
    color: white;
    border-radius: 16px 16px 4px 16px;
  }
  
  /* ============================================================================
     로딩 인디케이터
     ============================================================================ */
  
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: var(--text-secondary);
  }
  
  .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* ============================================================================
     입력 영역
     ============================================================================ */
  
  .input-area {
    padding: 16px;
    background: white;
    border-top: 1px solid var(--border);
  }
  
  .input-wrapper {
    display: flex;
    gap: 8px;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .input-wrapper textarea {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: var(--font-size-xs);
    font-family: inherit;
    resize: none;
  }
  
  .input-wrapper textarea:focus {
    outline: none;
    border-color: var(--primary);
  }
  
  .send-btn {
    padding: 12px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  
  .send-btn:hover {
    background: var(--primary-dark);
  }
  
  /* ============================================================================
     다중 서비스 Floating Stepper
     ============================================================================ */
  
  .service-stepper {
    background: var(--bg-primary, #ffffff);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .stepper-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .stepper-track::-webkit-scrollbar {
    display: none;
  }
  
  .stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 64px;
  }
  
  .stepper-indicator {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(9.6px * var(--font-scale));
    font-weight: 600;
    transition: all 0.3s ease;
  }
  
  .stepper-step.pending .stepper-indicator {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary, #9ca3af);
    border: 2px solid var(--border-color, #e5e7eb);
  }
  
  .stepper-step.active .stepper-indicator {
    background: var(--primary-color, #ff5000);
    color: #ffffff;
    border: 2px solid var(--primary-color, #ff5000);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
  }
  
  .stepper-step.completed .stepper-indicator {
    background: var(--success-color, #10b981);
    color: #ffffff;
    border: 2px solid var(--success-color, #10b981);
  }
  
  .stepper-check {
    font-size: calc(11.2px * var(--font-scale));
    line-height: 1;
  }
  
  .stepper-number {
    font-size: calc(9.6px * var(--font-scale));
    line-height: 1;
  }
  
  .stepper-label {
    margin-top: 4px;
    font-size: calc(8.8px * var(--font-scale));
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
    text-align: center;
  }
  
  .stepper-step.active .stepper-label {
    color: var(--primary-color, #ff5000);
    font-weight: 700;
  }
  
  .stepper-step.completed .stepper-label {
    color: var(--success-color, #10b981);
  }
  
  .stepper-connector {
    width: 24px;
    height: 2px;
    background: var(--border-color, #e5e7eb);
    flex-shrink: 0;
    margin-bottom: 18px;
    transition: background 0.3s ease;
  }
  
  .stepper-connector.completed {
    background: var(--success-color, #10b981);
  }
  
  .stepper-summary {
    text-align: center;
    font-size: calc(8.8px * var(--font-scale));
    color: var(--text-tertiary, #9ca3af);
    margin-top: 6px;
  }
  
  @media (max-width: 768px) {
    .service-stepper {
      padding: 8px 12px;
    }
  
    .stepper-step {
      min-width: 52px;
    }
  
    .stepper-indicator {
      width: 24px;
      height: 24px;
      font-size: calc(8px * var(--font-scale));
    }
  
    .stepper-label {
      font-size: calc(8px * var(--font-scale));
    }
  
    .stepper-connector {
      width: 16px;
      margin-bottom: 16px;
    }
  
    .stepper-summary {
      font-size: calc(8px * var(--font-scale));
    }
  }