/* CONNECXELLENCE 테마 v3 — 로고(무채색 메탈·유리) 위에 '기술=아이스 블루 / 감성=피치'가 섞이는 오로라 듀오톤.
   site.css 뒤에 로드해 토큰만 덮어쓴다. 확정 시 site.css로 병합. */
:root {
  --bg: #0F1013;
  --bg-2: #17181D;
  --fg: #F4F3F0;
  --fg-2: rgba(244, 243, 240, .66);
  --fg-3: rgba(244, 243, 240, .40);
  --line: rgba(244, 243, 240, .11);
  --light-bg: #F3F1EC;
  --light-fg: #16171A;
  --light-fg-2: rgba(22, 23, 26, .66);
  --light-fg-3: rgba(22, 23, 26, .42);
  --light-line: rgba(22, 23, 26, .11);

  --tech: #8FA6FF;      /* 아이스 블루-바이올렛 (기술) */
  --tech-ice: #A9E6FF;
  --warm: #FFA98C;      /* 피치 (감성) */
  --warm-rose: #FF9DB0;
  --accent: #B79CFF;    /* 두 색이 만나는 라일락 — 단색이 필요한 자리 */
  --accent-ink: #14121C;
  --cool: var(--tech);
  --grad: linear-gradient(120deg, var(--tech) 0%, var(--accent) 48%, var(--warm) 100%);
}

/* 바탕: 격자 점을 옅게, 위쪽에 아주 낮은 오로라 */
body {
  background-image:
    radial-gradient(60% 40% at 18% 0%, rgba(143,166,255,.10), transparent 70%),
    radial-gradient(50% 40% at 88% 8%, rgba(255,169,140,.09), transparent 70%),
    radial-gradient(rgba(244,243,240,.06) 1px, transparent 1.2px);
  background-size: 100% 100%, 100% 100%, 26px 26px;
  background-attachment: fixed, fixed, scroll;
}

/* 포인트: 마침표·강조는 그라데이션 글자 */
b, .accent { color: var(--accent); }
.hero__ko b, .h2 b, .chapter__title b, .ways__en b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* 버튼 */
.pill--accent { background: var(--grad); color: var(--accent-ink); box-shadow: 0 10px 30px -12px rgba(183,156,255,.7); }
.pill--accent:hover { background: var(--grad); filter: brightness(1.06); }
.nav__dots i.now { background: var(--accent); }

/* 점 범례 */
.dot--cool { background: var(--tech); box-shadow: 0 0 10px rgba(143,166,255,.6); }
.dot--warm { background: var(--warm); box-shadow: 0 0 10px rgba(255,169,140,.7); }

/* 챕터 배경: 종이 톤 + 챕터별 오로라 + 미세 격자선. 01=기술(블루), 02=감성(피치) */
.chapters.sec--light { background: var(--light-bg); }
.chapter { background-image: linear-gradient(rgba(22,23,26,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(22,23,26,.045) 1px, transparent 1px); background-size: 72px 72px; }
.chapter::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
#technology::before { background: radial-gradient(48% 60% at 78% 45%, rgba(143,166,255,.30), transparent 70%), radial-gradient(30% 40% at 20% 90%, rgba(169,230,255,.22), transparent 70%); }
#brand::before { background: radial-gradient(48% 60% at 78% 45%, rgba(255,169,140,.30), transparent 70%), radial-gradient(30% 40% at 20% 90%, rgba(255,157,176,.20), transparent 70%); }
.chapter__num { color: transparent; -webkit-text-stroke: 1px rgba(22,23,26,.08); }
#technology .chapter__num { -webkit-text-stroke-color: rgba(120,140,230,.14); }
#brand .chapter__num { -webkit-text-stroke-color: rgba(230,130,110,.14); }
#technology .chapter__list--v3 li b, #technology .arrow:hover { color: #5B6FE0; }
#brand .chapter__list--v3 li b, #brand .arrow:hover { color: #D66A58; }
.chapter__list--v3 li a:hover b { color: var(--light-fg); }
.chapter__list li::before { background: currentColor; opacity: .5; }
.chapters__hint span.on { color: var(--light-fg); }

/* 밝은 구간(만드는 기준)도 종이 톤 + 은은한 오로라 */
.sec--light:not(.chapters) { background: var(--light-bg); background-image: radial-gradient(40% 50% at 92% 10%, rgba(143,166,255,.16), transparent 70%), radial-gradient(40% 50% at 6% 100%, rgba(255,169,140,.16), transparent 70%); }

/* 문의 구간 뒤 오로라 */
.sec--contact { background-image: radial-gradient(50% 45% at 50% 60%, rgba(183,156,255,.14), transparent 70%); }
.intent__opt input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
:focus-visible { outline-color: var(--accent); }
.arrow:hover { color: var(--accent); }