/* 밝은 테마 (비교용 시안: index_H2_밝은바탕.html 에서만 씀)
   첫 화면(고래 하늘)만 그대로 두고, 그 아래(선언 → 서비스 → 숫자·지구본 → 푸터)는 전부 밝은 바탕.
   하늘 아래쪽이 밝은 바탕으로 번지며 이어진다. html 에 class="theme-light" 가 있을 때만 적용 */
html.theme-light { --t-bg: #f4f6f9; --t-ink: #0e1726; --t-sub: #4a5568; --t-a1: #0a9f93; --t-a2: #1673c4; }

/* 첫 화면 → 선언: 하늘 아래가 검정이 아니라 밝은 바탕으로 번진다 */
html.theme-light #mainVisual::before { height: 420px; background: linear-gradient(to bottom, rgba(244,246,249,0) 0%, rgba(244,246,249,.55) 45%, var(--t-bg) 92%); }
html.theme-light #story { background: var(--t-bg); }

/* 선언 구간: 흐린 회색 글자가 스크롤하면 진한 글자로 켜진다 */
html.theme-light #decl { background: var(--t-bg); color: var(--t-ink); }
html.theme-light #decl::before { display: none; }
html.theme-light .decl-label { color: var(--t-a2); }
html.theme-light .decl-text .w { color: rgba(14,23,38,.1); }
html.theme-light .decl-text .w.on { color: var(--t-ink); text-shadow: none; }
html.theme-light .decl-text .w.em.on { background: linear-gradient(90deg, var(--t-a1), var(--t-a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.theme-light .decl-sub { color: var(--t-sub); }
/* 글자가 켜질 때 터지는 별빛: 흰 점은 밝은 바탕에서 안 보이므로 청록·파랑으로 */
html.theme-light #decl .spark, html.theme-light .stat-zone .spark { background: var(--t-a1); box-shadow: 0 0 6px rgba(10,159,147,.45); }
html.theme-light #decl .spark-star, html.theme-light .stat-zone .spark-star { background: linear-gradient(135deg, var(--t-a1), var(--t-a2)); }

/* 서비스 구간: 앞뒤가 모두 밝으므로 어둠→밝음 띠 없이 같은 바탕 */
html.theme-light #svcH2.tone-light { padding: 0 0 4vh; background: var(--t-bg); }   /* 선언이 끝나고 곧바로 이어지게(밝은 바탕에서는 빈 공간이 더 커 보임) */
html.theme-light #decl { height: 215vh; }   /* 선언 뒤 남는 빈 공간을 줄임(단어 켜지는 속도는 거의 같음) */

/* 푸터: 바탕보다 한 단계 짙은 밝은 회색으로 끝을 알린다 */
html.theme-light #ft { background: #e8ecf1; color: var(--t-ink); border-top-color: rgba(14,23,38,.08); }
html.theme-light .ft2-logo { color: var(--t-ink); }
html.theme-light .ft2-sns a { border-color: rgba(14,23,38,.2); color: rgba(14,23,38,.7); }
html.theme-light .ft2-sns a:hover { color: #fff; }
html.theme-light .cta-half { background: #fff; color: var(--t-ink); box-shadow: 0 8px 22px -12px rgba(20,35,60,.28), 0 0 0 1px rgba(14,23,38,.05); }
html.theme-light .cta-eyebrow { color: var(--t-a2); }
html.theme-light .cta-go .ar { background: rgba(14,23,38,.07); }
html.theme-light .ft3-word { background: linear-gradient(180deg, rgba(22,115,196,.2), rgba(22,115,196,0) 88%); -webkit-background-clip: text; background-clip: text; }
html.theme-light .ft3-bot { color: rgba(14,23,38,.55); }

/* 숫자·지구본 구간 */
html.theme-light #inc02 { background: var(--t-bg); }
html.theme-light #inc02 .bg { background: radial-gradient(60vw 60vw at 50% 55%, #ffffff 0%, #eef2f7 60%, var(--t-bg) 100%); }
html.theme-light #inc02 .bg::before { background: none; }
html.theme-light .stat-zone { color: var(--t-ink); }
html.theme-light .stat-pin::before { background: radial-gradient(ellipse 46% 50% at 50% 50%, rgba(244,246,249,.92) 0%, rgba(244,246,249,.82) 52%, rgba(244,246,249,.45) 76%, rgba(244,246,249,0) 100%); }
html.theme-light .stat-head h2, html.theme-light .stat-no, html.theme-light .stat-tit { text-shadow: none; }
html.theme-light .stat-label { color: var(--t-a2); }
html.theme-light .stat-desc { color: var(--t-sub); text-shadow: none; }
html.theme-light .stat-row li { border-bottom-color: rgba(14,23,38,.22); }
html.theme-light .stat-row li::after { background: var(--t-a1); box-shadow: none; }
html.theme-light .grad-text { background: linear-gradient(90deg, var(--t-a1), var(--t-a2)); -webkit-background-clip: text; background-clip: text; }

/* 상단 메뉴 막대: 밝은 구간 위에 있을 때는 밝게 바뀐다(theme-light.js 가 on-light 를 붙임) */
#header.on-light, #header.scrolled.on-light { background: rgba(255,255,255,.94); box-shadow: 0 1px 0 rgba(14,23,38,.08); }
#header.on-light .logo, #header.on-light #gnb > ul > li > a, #header.on-light #gnb > ul > li.open > a { color: var(--t-ink); }
#header.on-light .lang { color: rgba(14,23,38,.45); }
#header.on-light .lang a:hover, #header.on-light .lang .cur { color: var(--t-ink); }
#header.on-light .btn-link { background: var(--t-ink); color: #fff; }
#header.on-light .sitemap-btn { border-color: rgba(14,23,38,.35); }
#header.on-light .sitemap-btn span { background: var(--t-ink); }
#header .logo, #header #gnb > ul > li > a, #header .btn-link, #header .sitemap-btn, #header .sitemap-btn span { transition: color .35s, background-color .35s, border-color .35s; }

/* 바탕 바꾸기 버튼(theme.js 가 상단 오른쪽에 넣음): 자동 → 밝게 → 어둡게 */
.theme-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; cursor: pointer; transition: border-color .35s, color .35s, background-color .35s; }
.theme-btn:hover { background: rgba(255,255,255,.1); }
.theme-btn svg { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn[data-mode="auto"] .i-auto, .theme-btn[data-mode="light"] .i-light, .theme-btn[data-mode="dark"] .i-dark, .theme-btn:not([data-mode]) .i-auto { display: block; }
#header.on-light .theme-btn { border-color: rgba(14,23,38,.35); color: var(--t-ink, #0e1726); }