/* 
  ========================================
  style.css - 메인 스타일시트
  ========================================
  
  목적: 웹사이트의 모든 주요 컴포넌트 스타일 정의
  
  구조:
  1. 기본 스타일 (body, 컨테이너)
  2. 네비게이션
  3. 히어로 섹션
  4. 콘텐츠 섹션 (Section 1-7)
  5. 푸터
  6. 버튼 및 UI 컴포넌트
  ========================================
*/

/* 
  ========================================
  0-1. 부드러운 스크롤 효과
  ========================================
  앵커 링크 클릭 시 부드럽게 스크롤 이동
  scroll-padding-top: 네비게이션 바 높이만큼 여백 확보
*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;  /* navbar 높이 + 여유 공간 */
}

/* 
  ========================================
  0-2. 배경 Canvas (최우선)
  ========================================
*/
#background-canvas {
  position: absolute;   /* hero 섹션 내에서 절대 위치 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;         /* 100vh → 100% (부모 요소 높이만큼) */
  z-index: 0;           /* hero-content 뒤에 */
  pointer-events: none;
}

/* 
  ========================================
  1. 기본 스타일
  ========================================
*/

/* 
  Body: 웹페이지의 기본 설정
  - 시스템 폰트 적용
  - 검정 배경 + 흰색 텍스트 (다크 모드)
*/
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-white);
  background-color: var(--color-black);
}

/* 
  컨테이너: 콘텐츠의 최대 너비를 제한하고 중앙 정렬
*/
.container {
  max-width: var(--container-max-width);  /* 최대 1200px */
  margin: 0 auto;                         /* 좌우 중앙 정렬 */
  padding: 0 var(--container-padding);    /* 좌우 여백 */
}

/* 
  ========================================
  2. 네비게이션
  ========================================
  상단 고정 메뉴바
*/

.navbar {
  position: fixed;                 /* 화면 상단에 고정 */
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);  /* 반투명 검정 배경 */
  backdrop-filter: blur(10px);     /* 배경 흐림 효과 (glassmorphism) */
  z-index: var(--z-index-dropdown); /* 다른 요소 위에 표시 */
  padding: var(--spacing-md) 0;    /* 상하 여백 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 하단 테두리 */
}

/* 네비게이션 내부 레이아웃 */
.navbar-container {
  display: flex;              /* Flexbox 사용 */
  justify-content: space-between; /* 좌우 정렬 (로고-좌측, 메뉴-우측) */
  align-items: center;        /* 세로 중앙 정렬 */
}

/* 로고 */
.navbar-logo img {
  height: 45px;
  width: auto;
  /* 투명 배경이므로 단순한 반전만 */
  filter: invert(1) brightness(1.05);
  display: block;
}

/* 메뉴 리스트 */
.navbar-menu {
  display: flex;
  gap: var(--spacing-lg);     /* 메뉴 항목 간격 */
  align-items: center;
}

/* 메뉴 링크 */
.navbar-menu a {
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-normal); /* 색상 전환 효과 */
}

.navbar-menu a:hover {
  color: var(--color-accent-1); /* 마우스 올리면 보라색으로 */
}

/* 언어 선택 드롭다운 */
.navbar-dropdown {
  position: relative;         /* 드롭다운 메뉴 기준점 */
}

.navbar-dropdown-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.navbar-dropdown-menu {
  position: absolute;         /* 버튼 아래에 표시 */
  top: 100%;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm);
  min-width: 150px;
  opacity: 0;                 /* 기본적으로 숨김 */
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-normal);
}

/* 드롭다운 메뉴 표시 (호버 시) */
.navbar-dropdown:hover .navbar-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar-dropdown-menu a {
  display: block;
  padding: var(--spacing-sm);
  color: var(--color-white);
  transition: background var(--transition-fast);
}

.navbar-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-sm);
}

/* 활성화된 페이지 표시 */
.navbar-dropdown-menu a.active {
  color: var(--color-accent-1);
  font-weight: var(--font-weight-bold);
}

/* 비활성화된 페이지 표시 */
.navbar-dropdown-menu a.disabled {
  color: var(--color-gray);
  cursor: not-allowed;
  opacity: 0.5;
}

/* 
  ========================================
  3. 히어로 섹션 (메인 배너)
  ========================================
*/

.hero {
  min-height: 100vh;
  padding: 120px 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, 
    #0a0a1a 0%,
    #1a1a2e 30%,
    #16213e 60%,
    #0f0f1e 100%
  );
}

/* 별 레이어는 JavaScript Canvas로 처리 */
.hero::before,
.hero::after {
  display: none;
}

/* 히어로 콘텐츠 */
.hero-content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  width: 100%;
  padding: var(--spacing-xl);
  text-align: center;
  isolation: isolate;
}

/* 히어로 로고 이미지 - 투명 배경 */
.hero-logo {
  display: block;
  max-width: 600px;
  width: 90%;
  height: auto;
  margin: 0 auto var(--spacing-xl);
  /* 
    이미지가 이미 투명 배경이므로 단순한 필터만 사용
    invert(1): 검은 글씨를 흰 글씨로 변환
  */
  filter: invert(1) brightness(1.1);
}

/* 히어로 제목 */
.hero-content h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  margin-bottom: var(--spacing-lg);
  line-height: 1.1;
  color: var(--color-white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
}

/* 히어로 부제목 */
.hero-subtitle {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--spacing-3xl);
  font-weight: 400;
  line-height: 1.6;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* 히어로 텍스트 영역 */
.hero-text {
  max-width: 800px;
  margin: 0 auto var(--spacing-3xl);
  text-align: center;  /* ✅ left → center (중앙 정렬) */
  line-height: 1.8;
}

.hero-text p {
  font-size: 1.4rem;  /* ✅ clamp 제거하고 고정 1.4rem */
  margin-bottom: var(--spacing-xl);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 300;
  line-height: 1.8;
}

.hero-text p strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.98);
}

/* 
  ========================================
  강조 텍스트: 1.8rem + Glow 효과
  ========================================
  7개의 핵심 문장에 적용되는 스타일
  - 크기: 1.8rem (일반 1.4rem보다 크게)
  - 굵기: 700 (Bold)
  - Glow: 보라/파랑 계열 text-shadow
  - Animation: 3초 주기 pulse 효과
*/
.hero-emphasis {
  display: block;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  text-align: center !important;
  margin: var(--spacing-3xl) 0 var(--spacing-xl) !important;
  line-height: 1.6 !important;
  /* 3겹의 text-shadow로 glow 효과 구현 */
  text-shadow: 
    0 0 20px rgba(102, 126, 234, 0.8),   /* 내부 glow (보라) */
    0 0 40px rgba(118, 75, 162, 0.6),    /* 중간 glow (핑크-보라) */
    0 0 60px rgba(102, 126, 234, 0.4);   /* 외부 glow (보라) */
  /* pulse 애니메이션 적용 */
  animation: pulseGlow 3s ease-in-out infinite;
}

/* 
  ========================================
  Pulse Glow 애니메이션
  ========================================
  은은하게 깜빡이는 효과
  0% → 50% (최대 밝기) → 100% (원래 밝기)
*/
@keyframes pulseGlow {
  0%, 100% {
    text-shadow: 
      0 0 20px rgba(102, 126, 234, 0.8),
      0 0 40px rgba(118, 75, 162, 0.6),
      0 0 60px rgba(102, 126, 234, 0.4);
  }
  50% {
    text-shadow: 
      0 0 30px rgba(102, 126, 234, 1),    /* 최대 밝기 */
      0 0 60px rgba(118, 75, 162, 0.8),
      0 0 90px rgba(102, 126, 234, 0.6);
  }
}

/* 
  ========================================
  구버전 스타일 (하위 호환성 유지)
  ========================================
*/
/* Refer to~ 흰색 텍스트 (더 이상 사용 안 함) */
.hero-final-white {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-align: center !important;
  font-weight: 400 !important;
  margin: var(--spacing-3xl) 0 var(--spacing-xl) !important;
  line-height: 1.6 !important;
}

/* 하단 로고 이미지 */
.hero-logo-bottom {
  display: block;
  max-width: 400px;
  width: 65%;
  height: auto;
  margin: var(--spacing-2xl) auto 0;
  filter: invert(1) brightness(1.1);
}

/* 강조 문구 */
.hero-final {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem) !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700 !important;
  text-align: center !important;
  margin: var(--spacing-2xl) 0 var(--spacing-xl) !important;
  line-height: 1.5 !important;
}

/* 태그라인 */
.hero-tagline {
  font-size: clamp(1.3rem, 2.8vw, 1.6rem) !important;
  color: var(--color-white) !important;
  text-align: center !important;
  font-weight: 700 !important;
  margin: var(--spacing-xl) 0 var(--spacing-2xl) !important;
  letter-spacing: 0.05em;
}

/* 
  ========================================
  4. 콘텐츠 섹션 (Section 1-7)
  ========================================
*/

.section {
  padding: var(--spacing-3xl) 0;
  position: relative;
}

/* 섹션 제목 - 일관된 크기 */
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);  /* 반응형 크기 */
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-2xl);
  text-align: center;
  color: var(--color-white);
  line-height: 1.2;
}

/* 섹션 내용 */
.section-content {
  max-width: 1000px;
  margin: 0 auto;
}

/* 섹션 내 문단 */
.section p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-md);
}

/* 섹션 내 제목 (h3) */
.section h3 {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}

/* 
  ========================================
  5. 푸터 (Footer)
  ========================================
*/

.footer {
  background: var(--color-black);
  padding: var(--spacing-2xl) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 푸터 링크 목록 */
.footer-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;          /* 모바일에서 줄바꿈 허용 */
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-normal);
}

.footer-links a:hover {
  color: var(--color-accent-1);
}

/* 푸터 회사 정보 */
.footer-info {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--font-size-small);
  line-height: 1.8;
}

/* 저작권 */
.footer-copyright {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--font-size-small);
  margin-top: var(--spacing-lg);
}

/* 
  ========================================
  6. 버튼 및 UI 컴포넌트
  ========================================
*/

/* 기본 버튼 */
.btn {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-bold);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-normal);
}

/* 주요 버튼 (CTA) */
.btn-primary {
  background: var(--gradient-accent);
  color: var(--color-white);
  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px); /* 위로 살짝 올라감 */
  box-shadow: var(--shadow-lg);
}

/* 아웃라인 버튼 */
.btn-outline {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}

.btn-outline:hover {
  background: var(--color-white);
  color: var(--color-black);
}

/* 
  카드 컴포넌트
*/
.card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 
  그리드 레이아웃 (2열, 3열)
*/
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

/* 
  ========================================
  7. 추가 섹션 스타일
  ========================================
*/

/* Warning Section (경고 섹션) */
.warning-section {
  background: rgba(255, 59, 48, 0.05);
}

.warning-intro {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-xl);
  background: rgba(255, 59, 48, 0.1);
  border-radius: var(--border-radius-lg);
  border: 2px solid rgba(255, 59, 48, 0.3);
}

.warning-intro p {
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  color: #ff3b30;
  margin-bottom: var(--spacing-sm);
}

.warning-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.warning-item {
  background: rgba(0, 0, 0, 0.3);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  border-left: 4px solid #ff3b30;
}

.warning-item h3 {
  color: #ff3b30;
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
}

.warning-item .example {
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin-bottom: var(--spacing-sm);
}

.warning-item .action {
  color: #ff3b30;
  font-weight: var(--font-weight-bold);
}

.final-warning {
  text-align: center;
  padding: var(--spacing-xl);
  background: rgba(255, 59, 48, 0.2);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--spacing-xl);
}

.final-warning p {
  font-size: 1.3rem;
  font-weight: var(--font-weight-black);
  color: #ff3b30;
  margin-bottom: var(--spacing-sm);
}

.disclaimer-box {
  background: rgba(0, 0, 0, 0.5);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.disclaimer-box ul {
  list-style: disc;
  padding-left: var(--spacing-xl);
}

.disclaimer-box li {
  margin-bottom: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.8);
}

/* Suitable Section (적합 섹션) */
.suitable-section {
  background: rgba(52, 199, 89, 0.05);
}

.suitable-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.suitable-item {
  background: rgba(0, 0, 0, 0.3);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  border-left: 4px solid #34c759;
}

.suitable-item h3 {
  color: #34c759;
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
}

.suitable-item .example {
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

.welcome-message {
  text-align: center;
  padding: var(--spacing-xl);
  background: rgba(52, 199, 89, 0.2);
  border-radius: var(--border-radius-lg);
}

.welcome-message p {
  font-size: 1.3rem;
  font-weight: var(--font-weight-black);
  color: #34c759;
}

/* Content Section (콘텐츠 섹션) */
.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-2xl);
}

.content-item {
  background: rgba(255, 255, 255, 0.05);
  padding: var(--spacing-2xl);
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.content-item h3 {
  color: var(--color-accent-1);
  margin-bottom: var(--spacing-lg);
  font-size: 1.3rem;
}

.content-item ul {
  list-style: none;
}

.content-item li {
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  position: relative;
  color: rgba(255, 255, 255, 0.85);
}

.content-item li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-accent-1);
}

/* Data Section (데이터 소스 섹션) */
.source-list {
  list-style: none;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-lg);
}

.source-list li {
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  position: relative;
  color: rgba(255, 255, 255, 0.9);
}

.source-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #34c759;
  font-weight: var(--font-weight-bold);
}

.limitations {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: rgba(255, 149, 0, 0.1);
  border-radius: var(--border-radius-lg);
  border-left: 4px solid #ff9500;
}

.limitations h3 {
  color: #ff9500;
  margin-bottom: var(--spacing-md);
}

.limitations ul {
  list-style: disc;
  padding-left: var(--spacing-xl);
}

.limitations li {
  margin-bottom: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.8);
}

/* Disclaimer Section (면책 섹션) */
.intro {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: var(--spacing-xl);
  color: rgba(255, 255, 255, 0.9);
}

.disclaimer-content ul {
  list-style: none;
  margin: var(--spacing-xl) 0;
}

.disclaimer-content li {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-md);
  border-left: 3px solid var(--color-accent-1);
}

.warning {
  text-align: center;
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: #ff9500;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg);
  background: rgba(255, 149, 0, 0.1);
  border-radius: var(--border-radius-lg);
}

.expert-advice {
  text-align: center;
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: #34c759;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg);
  background: rgba(52, 199, 89, 0.1);
  border-radius: var(--border-radius-lg);
}

.links {
  text-align: center;
  margin: var(--spacing-xl) 0;
  font-size: 1.1rem;
}

.links a {
  color: var(--color-accent-1);
  text-decoration: underline;
  margin: 0 var(--spacing-sm);
}

.eu-notice {
  margin-top: var(--spacing-2xl);
  padding: var(--spacing-xl);
  background: rgba(0, 122, 255, 0.1);
  border-radius: var(--border-radius-lg);
  border: 2px solid rgba(0, 122, 255, 0.3);
}

.eu-notice h3 {
  color: #007aff;
  margin-bottom: var(--spacing-md);
}

.eu-notice ul {
  list-style: disc;
  padding-left: var(--spacing-xl);
  margin: var(--spacing-md) 0;
}

.eu-notice li {
  margin-bottom: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.8);
}

/* 
  ========================================
  Subscription Section (구독 섹션)
  ========================================
*/
.subscription-section {
  text-align: center;
  padding: var(--spacing-3xl) 0;
}

/* 가격 안내 텍스트 - 크기 키우기 */
.pricing-text {
  font-size: 1.3rem;  /* 기본 1rem보다 크게 */
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-lg);
  font-weight: 400;
}

/* CTA Section (행동 유도 섹션) */
.cta-section {
  text-align: center;
  padding: var(--spacing-3xl) 0;
}

.btn-large {
  font-size: 1.2rem;
  padding: var(--spacing-lg) var(--spacing-3xl);
}

/* 
  ========================================
  법적 문서 페이지 스타일
  ========================================
  Terms, Disclaimer, Privacy, About 페이지용
*/

/* 법적 문서 메인 컨테이너 */
.legal-page {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 60px 20px;
  padding-top: 120px; /* 네비게이션 바 높이(70px) + 여유 공간(50px) = 120px */
  min-height: 100vh;
}

.legal-page .container {
  max-width: 900px; /* 읽기 편한 너비 */
  margin: 0 auto;
}

.legal-page h1 {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
  color: var(--color-white);
}

.legal-page .last-updated {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--spacing-2xl);
  font-style: italic;
}

/* 법적 문서 섹션 */
.legal-section {
  margin-bottom: var(--spacing-3xl);
  padding-bottom: var(--spacing-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-section:last-of-type {
  border-bottom: none;
}

.legal-section h2 {
  font-size: 1.8rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-1);
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.legal-section h3 {
  font-size: 1.4rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.legal-section h4 {
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.legal-section p {
  line-height: 1.8;
  margin-bottom: var(--spacing-md);
  color: rgba(255, 255, 255, 0.85);
}

.legal-section ul,
.legal-section ol {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
}

.legal-section li {
  margin-bottom: var(--spacing-sm);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.legal-section strong {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

/* 정보 테이블 (About 페이지용) */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
}

.info-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-table td {
  padding: var(--spacing-md);
  vertical-align: top;
}

.info-table td:first-child {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-1);
  width: 200px;
}

.info-table td:last-child {
  color: rgba(255, 255, 255, 0.85);
}

/* 법적 문서 푸터 */
.legal-footer {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-xl);
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}