/* ============================================================
   Asset Orbit — 공통 스타일시트 (모든 페이지 공용)
   디자인 토큰: 가이드 v2 1장
   표기 순서: 정책 v1.8 XIII-2 (UI·마케팅 시각화 영역)
   ============================================================ */

/* ============================================================
   0. Pretendard 폰트 (로컬 fonts/ 폴더 woff2)
   ============================================================ */
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   1. CSS 변수 (디자인 토큰)
   ============================================================ */
:root {
  /* 4색 — 절대 변경 금지 */
  --color-blue:   #2E74EA;
  --color-green:  #2E9E58;
  --color-orange: #FA951F;
  --color-red:    #D93025;

  /* CTA 색상 (앱 통일 — Navy Blue) */
  --color-cta:        #1E3A8A;
  --color-cta-hover:  #152765;

  /* 기본 컬러 */
  --text-main:    #1A1A1A;
  --text-sub:     #666666;
  --text-mute:    #999999;
  --bg-main:      #FFFFFF;
  --bg-sub:       #F8F9FA;
  --line:         #E5E7EB;

  /* 타이포그래피 */
  --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* ============================================================
   2. 리셋 + 기본
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-main);
  background-color: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}
img, svg, object {
  max-width: 100%;
  display: block;
}

/* ============================================================
   3. 공통 헤더 (Sticky)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}
.header-inner {
  max-width: 1360px;
  height: 100%;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
/* === 영역 1: 헤더 데스크톱·태블릿 레이아웃 === */
.nav-desktop {
  display: flex;
  align-items: stretch;
  gap: 48px;
  height: 100%;
}
.nav-link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-main);
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: var(--color-cta);
}
.nav-link.active {
  color: var(--color-cta);
  border-bottom: 3px solid var(--color-cta);
}
.nav-lang {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-main);
}

/* 햄버거 (Mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
}
/* === 영역 2: 모바일 햄버거 메뉴 === */
.hamburger span {
  display: block;
  height: 2px;
  background-color: var(--text-main);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile 풀스크린 오버레이 — 두나무 형식 + 첫 항목 시각 통일 (Q5 ①) */
.mobile-menu {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-main);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  display: none;
  z-index: 99;
  overflow: hidden;
}
.mobile-menu.is-open {
  display: flex;
}
.mobile-link {
  text-align: left;
  padding: 20px 24px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
  border-bottom: 1px solid var(--line);
}
/* === 정정 10: 모바일 KOR 하단 고정 + 구분선 === */
.mobile-lang {
  margin-top: auto;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  border-top: 1px solid var(--line);
}

/* ============================================================
   4. 히어로 섹션
   ============================================================ */
/* === 정정 6: Home Hero 동심원 인라인 SVG === */
.hero {
  padding: 160px 80px;
  background-color: var(--bg-main);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 1;
}
.hero-text {
  flex: 0 0 60%;
}
.hero-visual {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 720px;
  height: 720px;
  pointer-events: none;
  z-index: 0;
}
.hero-visual object {
  width: 100%;
  height: 100%;
}
.hero-eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--color-cta);
  margin-bottom: 16px;
}
.hero-title {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-main);
  margin-bottom: 24px;
}
.hero-subtitle {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--text-main);
  margin-bottom: 24px;
}
.hero-body {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-sub);
  margin-bottom: 48px;
}
.hero-cta {
  display: inline-block;
  background-color: var(--color-cta);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 8px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.hero-cta:hover {
  background-color: var(--color-cta-hover);
  transform: translateY(-2px);
}

/* ============================================================
   5. 핵심 가치 3카드
   ============================================================ */
.values {
  background-color: var(--bg-sub);
  padding: 120px 80px;
}
.values-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.value-card {
  background-color: var(--bg-main);
  padding: 48px;
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
/* === 카드 아이콘 원 (변형 A — 제목 위 좌측) === */
.value-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.value-icon-cta {
  background-color: var(--color-cta);
}
.value-icon-cta svg {
  width: 26px;
  height: 26px;
  color: #FFFFFF;
}
.value-icon-signals {
  background-color: var(--bg-main);
  border: 1px solid var(--line);
  gap: 4px;
}
.value-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.value-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 16px;
}
.value-body {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.6;
}

/* ============================================================
   6. 4색 신호 시각화
   표기 순서: 시작 → 유지 → 둔화 → 종료 (정책 v1.8 XIII-2)
   ============================================================ */
.signals {
  padding: 120px 80px;
  background-color: var(--bg-main);
}
.signals-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.section-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 80px;
}
.signals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
/* === 정정 7 + 사각틀 상시 표시(B-2) + 세로형 3:4 + 상단 정렬 === */
.signal-item {
  text-align: center;
  padding: 36px 16px 0;
  border-radius: 16px;
  background: var(--bg-main);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.signal-card-blue   { animation: card-glow-blue   7.2s ease-in-out infinite; animation-delay: 0s; }
.signal-card-green  { animation: card-glow-green  7.2s ease-in-out infinite; animation-delay: 1.8s; }
.signal-card-orange { animation: card-glow-orange 7.2s ease-in-out infinite; animation-delay: 3.6s; }
.signal-card-red    { animation: card-glow-red    7.2s ease-in-out infinite; animation-delay: 5.4s; }

/* === 정정 3-4: 카드 발광 강도 강화 + 평상시 약한 box-shadow (B-2) === */
@keyframes card-glow-blue {
  0%, 33.33%, 100% { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); }
  8.33%, 25% { box-shadow: 0 8px 32px rgba(46, 116, 234, 0.30); }
}
@keyframes card-glow-green {
  0%, 33.33%, 100% { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); }
  8.33%, 25% { box-shadow: 0 8px 32px rgba(46, 158, 88, 0.30); }
}
@keyframes card-glow-orange {
  0%, 33.33%, 100% { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); }
  8.33%, 25% { box-shadow: 0 8px 32px rgba(250, 149, 31, 0.30); }
}
@keyframes card-glow-red {
  0%, 33.33%, 100% { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); }
  8.33%, 25% { box-shadow: 0 8px 32px rgba(217, 48, 37, 0.30); }
}

.signal-desc-blue   { color: var(--color-blue);   font-weight: 500; }
.signal-desc-green  { color: var(--color-green);  font-weight: 500; }
.signal-desc-orange { color: var(--color-orange); font-weight: 500; }
.signal-desc-red    { color: var(--color-red);    font-weight: 500; }

/* === 정정 3-1: signal-circle 사이즈 (140px / 상단 정렬 정합) === */
.signal-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 0 38px;
}
.signal-blue {
  background-color: var(--color-blue);
  animation: glow-blue 7.2s ease-in-out infinite;
  animation-delay: 0s;
}
.signal-green {
  background-color: var(--color-green);
  animation: glow-green 7.2s ease-in-out infinite;
  animation-delay: 1.8s;
}
.signal-orange {
  background-color: var(--color-orange);
  animation: glow-orange 7.2s ease-in-out infinite;
  animation-delay: 3.6s;
}
.signal-red {
  background-color: var(--color-red);
  animation: glow-red 7.2s ease-in-out infinite;
  animation-delay: 5.4s;
}
.signal-label {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}
/* === 정정 3-3: signal-desc 폰트·nowrap === */
.signal-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sub);
  white-space: nowrap;
}

@keyframes glow-blue {
  0%, 33.33%, 100% { box-shadow: 0 0 0    transparent;                 transform: scale(1);    }
  8.33%, 25%       { box-shadow: 0 0 24px rgba(46, 116, 234, 0.8);     transform: scale(1.06); }
}
@keyframes glow-green {
  0%, 33.33%, 100% { box-shadow: 0 0 0    transparent;                 transform: scale(1);    }
  8.33%, 25%       { box-shadow: 0 0 24px rgba(46, 158, 88, 0.8);      transform: scale(1.06); }
}
@keyframes glow-orange {
  0%, 33.33%, 100% { box-shadow: 0 0 0    transparent;                 transform: scale(1);    }
  8.33%, 25%       { box-shadow: 0 0 24px rgba(250, 149, 31, 0.8);     transform: scale(1.06); }
}
@keyframes glow-red {
  0%, 33.33%, 100% { box-shadow: 0 0 0    transparent;                 transform: scale(1);    }
  8.33%, 25%       { box-shadow: 0 0 24px rgba(217, 48, 37, 0.8);      transform: scale(1.06); }
}

/* ============================================================
   7. CTA 진입 (2개 카드)
   ============================================================ */
.cta-entry {
  padding: 120px 80px;
  background-color: var(--bg-main);
}
.cta-entry-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.cta-card {
  background-color: var(--bg-sub);
  padding: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.cta-card:hover {
  background-color: var(--bg-main);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}
.cta-card-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.01em;
}
.cta-arrow {
  font-size: 32px;
  font-weight: 400;
  color: var(--color-cta);
  margin-left: 24px;
  flex-shrink: 0;
}

/* ============================================================
   8. 공통 푸터
   ============================================================ */
.site-footer {
  background-color: var(--bg-main);
  border-top: 1px solid var(--line);
  padding: 80px;
}
/* === 정정 4-2: 푸터 두나무 형식 (3그룹 grid) === */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}
.footer-top .footer-logo {
  justify-self: start;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.footer-top .footer-links {
  display: flex;
  gap: 24px;
  justify-content: center;
}
.footer-spacer {
  /* 우측 빈 공간 (두나무 형식 정확 재현) */
}
.footer-links a {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-main);
  transition: color 0.2s ease;
}
.footer-links a:hover {
  color: var(--color-cta);
}
.footer-link-disabled,
.footer-link-disabled:hover {
  color: var(--text-mute) !important;
  cursor: not-allowed;
}
/* === 정정 8-2: 푸터 회사 정보 한 줄 === */
.footer-info {
  margin-bottom: 16px;
  padding-left: 19px;
}
.footer-info-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.8;
  margin: 0;
}
.info-item {
  white-space: nowrap;
}
.info-divider {
  color: var(--line);
  margin: 0 8px;
}
.footer-copy {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-mute);
  padding-left: 19px;
}

/* ============================================================
   9. 반응형 — Tablet (768~1199px)
   ============================================================ */
@media (max-width: 1199px) {
  .header-inner,
  .hero,
  .values,
  .signals,
  .cta-entry,
  .site-footer {
    padding-left: 40px;
    padding-right: 40px;
  }
  .hero {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .values,
  .signals,
  .cta-entry {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .hero-title {
    font-size: 52px;
  }
  .hero-subtitle {
    font-size: 22px;
  }
  .signals-grid {
    gap: 32px;
  }
}

/* ============================================================
   10. 반응형 — Mobile (~767px)
   ============================================================ */
@media (max-width: 767px) {
  .header-inner,
  .hero,
  .values,
  .signals,
  .cta-entry,
  .site-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* 헤더 */
  .nav-desktop {
    display: none;
  }
  /* === 정정 9: 모바일 KOR 위치 === */
  .nav-lang {
    display: none;
  }
  .hamburger {
    display: flex;
  }

  /* 히어로 — 정정 6: 모바일 동심원 SVG 축소 */
  .hero {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .hero-inner {
    flex-direction: column;
    gap: 48px;
  }
  .hero-text {
    flex: 1 1 100%;
    text-align: left;
  }
  .hero-visual {
    position: static;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 32px auto 0;
    transform: none;
    right: auto;
    top: auto;
    pointer-events: auto;
  }
  .hero-visual object {
    width: 100%;
    height: auto;
  }
  .hero-eyebrow {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .hero-title {
    font-size: 40px;
  }
  .hero-subtitle {
    font-size: 18px;
  }
  .hero-body {
    margin-bottom: 32px;
  }

  /* 핵심 가치 */
  .values {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .values-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .value-card {
    padding: 32px;
  }

  /* 4색 신호 (2x2) */
  .signals {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-title {
    font-size: 28px;
    margin-bottom: 48px;
  }
  .signals-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  /* === 정정 3-5: 모바일 2줄 허용 + padding === */
  .signal-desc {
    white-space: normal;
  }
  .signal-item {
    padding: 24px 12px;
    aspect-ratio: auto;
  }
  .signal-circle {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
  }
  .signal-label {
    font-size: 18px;
  }
  .signal-desc {
    font-size: 14px;
  }

  /* CTA 진입 */
  .cta-entry {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .cta-entry-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cta-card {
    padding: 32px;
  }
  .cta-card-title {
    font-size: 18px;
  }
  .cta-arrow {
    font-size: 24px;
    margin-left: 16px;
  }

  /* 푸터 — 정정 8-3: 모바일 두나무 형식 (좌측 정렬) */
  .site-footer {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .footer-inner {
    text-align: left;
    padding-left: 4px;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 19px;
  }
  .footer-top .footer-logo {
    justify-self: start;
  }
  .footer-top .footer-links {
    justify-content: flex-start;
  }
  .footer-spacer {
    display: none;
  }
  .info-divider.d-mobile-hide {
    display: none;
  }
  .info-item.info-mobile-block {
    display: block;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* About 페이지 전용 스타일                                */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
}

/* 비전 섹션 */
.about-vision {
  padding: 120px 0;
  background-color: #FFFFFF;
}

/* === 영역 4: About Vision 헤드라인 좌측 Navy bar === */
.about-vision-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  margin: 0 0 48px 0;
  line-height: 1.4;
  border-left: 4px solid var(--color-cta);
  padding-left: 20px;
}

.about-vision-body {
  font-size: 16px;
  font-weight: 400;
  color: #1A1A1A;
  margin: 0 0 24px 0;
  line-height: 1.7;
}

.about-vision-body:last-child {
  margin-bottom: 0;
}

/* 사업자 정보 섹션 */
.about-business {
  padding: 120px 0;
  background-color: #F8F9FA;
}

.about-business-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  margin: 0 0 48px 0;
}

.about-business-card {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 48px;
}

.about-business-row {
  display: flex;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #E5E7EB;
}

.about-business-row:last-child {
  border-bottom: none;
}

.about-business-label {
  flex: 0 0 140px;
  font-size: 16px;
  font-weight: 500;
  color: #666666;
}

.about-business-value {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: #1A1A1A;
}

/* 반응형 — Tablet (768~1199px) */
@media (max-width: 1199px) {
  .about-container {
    padding: 0 40px;
  }
}

/* 반응형 — Mobile (~767px) */
@media (max-width: 767px) {
  .about-container {
    padding: 0 20px;
  }
  /* === 영역 6: About 모바일 padding 60px 통일 === */
  .about-vision {
    padding: 60px 0;
  }
  .about-vision-title {
    font-size: 28px;
    margin-bottom: 32px;
    padding-left: 16px;
  }
  .about-business {
    padding: 60px 0;
  }
  .about-business-title {
    font-size: 28px;
    margin-bottom: 32px;
  }
  .about-business-card {
    padding: 24px;
  }
  .about-business-row {
    flex-direction: column;
    gap: 4px;
  }
  .about-business-label {
    flex: none;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 모바일 메뉴 active state                                */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mobile-link.active {
  color: var(--color-cta);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* mailto 링크 일괄 색상 (Navy Blue 통일)              */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

a[href^="mailto:"] {
  color: var(--color-cta);
  transition: color 0.2s ease;
}
a[href^="mailto:"]:hover {
  color: var(--color-cta-hover);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Service 페이지 전용 스타일                              */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* === 정정 5: Service Hero Radial gradient 강도 강화 === */
.service-hero {
  padding: 120px 0;
  background: radial-gradient(
    circle at 65% 50%,
    #FFFFFF 0%,
    rgba(30, 58, 138, 0.05) 50%,
    rgba(30, 58, 138, 0.15) 100%
  );
}

.service-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* === Service 콘텐츠 영역 (좌 텍스트 / 우 4색 카드 그리드) === */
.service-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* 좌 텍스트 영역 */
.service-text {
  display: flex;
  flex-direction: column;
}

.service-headline {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1A1A1A;
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.service-subtitle {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  margin: 0 0 32px 0;
  line-height: 1.4;
}

.service-body {
  font-size: 16px;
  font-weight: 400;
  color: #1A1A1A;
  margin: 0 0 32px 0;
  line-height: 1.7;
}

.service-emphasis {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-emphasis li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.6;
}

/* === Service emphasis 4색 원 (정책 v1.8 XIII-2 정합 BLUE→GREEN→ORANGE→RED) === */
.service-em-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.service-em-blue   { background-color: var(--color-blue);   }
.service-em-green  { background-color: var(--color-green);  }
.service-em-orange { background-color: var(--color-orange); }
.service-em-red    { background-color: var(--color-red);    }

/* AO 로고 (클릭 시 ao 서비스 진입) */
.service-app-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 16px;
  background-color: #1A1A1A;
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin: 0;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-app-logo:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* === Service 하단바 — AO + 슬로건 (좌) / 다운로드 버튼 (우) — 가로 전체 === */
.service-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
}
.service-ao-block {
  display: flex;
  align-items: center;
  gap: 25px;
  min-width: 0;
}
.service-slogan-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.service-slogan-main {
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 6px 0;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.service-slogan-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-sub);
  margin: 0;
  line-height: 1.5;
}

/* === 버튼 행 — 다운로드 버튼 새 디자인 (이미지 2 톤) === */
.service-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 25px;
}

.service-btn {
  flex: 1;
  min-width: 170px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 12px;
  background-color: var(--bg-main);
  border: 1px solid var(--line);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.service-btn-disabled,
.service-btn-disabled:hover {
  cursor: not-allowed;
  opacity: 0.85;
}

.service-btn-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.service-btn-text {
  display: flex;
  flex-direction: column;
}

.service-btn-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
}

.service-btn-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-mute);
  line-height: 1.2;
  margin-top: 2px;
}

.service-btn-active {
  background-color: var(--color-cta);
  color: #FFFFFF;
  transition: background-color 0.2s ease;
}

.service-btn-active:hover {
  background-color: var(--color-cta-hover);
}

/* === 우측 영역 — 4색 신호 카드 2x2 그리드 (궤도 제거 / .signal-item 재사용) === */
.service-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* orbital.svg 사용 시 사양 (현재 service.html 미사용 / 다른 페이지 활용 가능 — 정의 보존) */
.service-orbital {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
}

.service-signals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

/* === service.html 전용 — 4색 카드 정사각형 (aspect-ratio 1/1) === */
.service-signals-grid .signal-item {
  aspect-ratio: 1 / 1;
  padding: 24px 12px 0;
}

/* === 신호 카드 작은 변형 (signal-circle 100px / service.html 전용 / index.html 영향 0) === */
.signal-circle.signal-sm {
  width: 100px;
  height: 100px;
  margin: 0 0 20px;
}

/* 반응형 — Tablet (768~1199px) */
@media (max-width: 1199px) {
  .service-container {
    padding: 0 40px;
    gap: 48px;
  }
  .service-headline {
    font-size: 36px;
  }
  .service-subtitle {
    font-size: 20px;
  }
}

/* === 영역 7: Service 모바일 전면 재구성 (1-col + bottom-bar column / Q4-① + Q4-부속 ②) === */
@media (max-width: 767px) {
  .service-hero {
    padding: 60px 0;
  }
  .service-container {
    padding: 0 20px;
    gap: 32px;
  }
  /* service-content: 모바일 1-column flex */
  .service-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  /* service-text: display contents → service-content 자식으로 평탄화 */
  .service-text {
    display: contents;
  }
  /* order 1~5 (service-content 내부 자식) */
  .service-headline {
    order: 1;
    font-size: 32px;
    margin-bottom: 16px;
  }
  .service-subtitle {
    order: 2;
    font-size: 18px;
    margin-bottom: 24px;
  }
  .service-body {
    order: 3;
    margin-bottom: 32px;
  }
  /* Q7: body br 모바일 숨김 (자연 줄바꿈) */
  .service-body br {
    display: none;
  }
  .service-visual {
    order: 4;
    margin-bottom: 32px;
  }
  .service-emphasis {
    order: 5;
    margin-bottom: 0;
  }
  /* 4색 카드 모바일 사양 (Q4-부속 ② circle 80px 축소 + Q6 aspect-ratio 해제) */
  .service-signals-grid .signal-item {
    padding: 20px 10px 16px;
    aspect-ratio: auto;
  }
  .signal-circle.signal-sm {
    width: 80px;
    height: 80px;
    margin: 0 0 16px;
  }
  /* service-bottom-bar 모바일 column */
  .service-bottom-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding-top: 32px;
  }
  .service-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .service-btn {
    width: 100%;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Legal 페이지 전용 스타일 (terms / privacy) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.legal-page {
  background-color: var(--bg-main);
  padding: 80px 0 120px;
}

.legal-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* === Legal 큰 제목 === */
.legal-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main);
  margin: 0 0 24px 0;
  line-height: 1.3;
}

/* === Legal mock 배너 (UI 검증용 더미 표기 / 큰 제목 바로 아래 V ①) === */
.legal-mock-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  margin: 0 0 40px 0;
  background-color: rgba(30, 58, 138, 0.05);
  border: 1px solid var(--color-cta);
  border-radius: 8px;
}

.legal-mock-banner-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-cta);
}

.legal-mock-banner-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-cta);
  line-height: 1.5;
  margin: 0;
}

/* === Legal 인트로 단락 (R ①) === */
.legal-intro {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.7;
  margin: 0 0 48px 0;
}

/* === Legal 조항 (제1조 (목적) 형식 / L ①) === */
.legal-article {
  margin: 0 0 32px 0;
}

.legal-article-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 12px 0;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.legal-article-body {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-main);
  line-height: 1.7;
  margin: 0 0 12px 0;
}

.legal-article-body:last-child {
  margin-bottom: 0;
}

/* === Legal 번호 리스트 === */
.legal-list {
  list-style: decimal;
  padding-left: 24px;
  margin: 8px 0 0 0;
}

.legal-list li {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-main);
  line-height: 1.7;
  margin-bottom: 4px;
}

.legal-list li:last-child {
  margin-bottom: 0;
}

/* === Legal 표 (privacy.html 전용 / T ①) === */
.legal-table-wrapper {
  margin: 16px 0 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.legal-table th,
.legal-table td {
  padding: 12px 16px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.legal-table th {
  background-color: var(--bg-sub);
  font-weight: 600;
  color: var(--text-main);
}

.legal-table td {
  font-weight: 400;
  color: var(--text-main);
}

/* === Legal cross-link (terms ↔ privacy 상호 참조) === */
.legal-cross-link {
  color: var(--color-cta);
  font-weight: 500;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.legal-cross-link:hover {
  color: var(--color-cta-hover);
}

/* === Legal 부칙 / 시행일자 (S ①) === */
.legal-appendix {
  margin: 64px 0 0 0;
  padding: 32px 0 0 0;
  border-top: 1px solid var(--line);
}

.legal-appendix-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 12px 0;
}

.legal-appendix-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.7;
  margin: 0 0 4px 0;
}

.legal-appendix-text:last-child {
  margin-bottom: 0;
}

/* === Legal 모바일 반응형 (P ① / ~767px) === */
@media (max-width: 767px) {
  .legal-page {
    padding: 60px 0 80px;
  }
  .legal-container {
    padding: 0 16px;
  }
  .legal-title {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .legal-mock-banner {
    padding: 14px 16px;
    margin-bottom: 32px;
  }
  .legal-intro {
    margin-bottom: 40px;
  }
  .legal-article {
    margin-bottom: 28px;
  }
  .legal-article-title {
    font-size: 17px;
  }
  .legal-table {
    min-width: 480px;
  }
  .legal-appendix {
    margin-top: 48px;
    padding-top: 24px;
  }
}