/* 서비스 구간 H3 — 가운데 배치, 분야가 하나씩 넘어간다(비교용 안 4개: 올라오기 / 넘기기 / 큰 번호 / 통과하기)
   글자 색·바탕은 svc-h2.css 의 tone 변수를 그대로 쓴다. 작업 화면(장면)도 H2 것을 그대로 쓴다 */
.h3-wrap { position: relative; z-index: 2; }
.h3-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: 76px; }
.h3-pin::before { content: ""; position: absolute; left: 50%; top: 58%; width: 80vw; height: 70vh; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent); }

/* 머리: 가운데 한 줄 */
.h3-head { position: relative; text-align: center; padding-bottom: 2.4vh; }
.h3-head .h2-label { padding-bottom: 10px; }
.h3-head h2 { font-size: clamp(26px, 2.3vw, 38px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.h3-head h2 em { font-style: normal; background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 본문: 분야 4개가 같은 자리에 겹쳐 있고 하나만 보인다 */
.h3-body { position: relative; display: grid; }
.h3-slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; visibility: hidden; }
.h3-slide.on { visibility: visible; }
/* 분야 소개(11/10 대표 「겹쳐 보여 눈에 안 띈다」): 주제목과 간격을 벌리고, 번호는 작은 테두리 표, 설명은 두 줄 폭으로, 서비스 이름은 눌러 보는 단추처럼 */
.h3-head { padding-bottom: 4.2vh; }
/* 위계(11/10 대표 「주제목·주제목·부제목이 합쳐 보인다」): 구간 주제목은 작은 머리말로 낮추고, 크게 보이는 제목은 분야 이름 하나만.
   머리말 아래 짧은 선으로 구간 소개와 분야 소개를 나눈다 */
.h3-head .h2-label { padding-bottom: 8px; font-size: 13px; }
.h3-head h2 { font-size: clamp(16px, 1.15vw, 19px); font-weight: 600; letter-spacing: -.01em; color: var(--sub); }
.h3-head::after { content: ""; display: block; width: 36px; height: 2px; margin: 2.6vh auto 0; border-radius: 2px; background: var(--line); }
.h3-txt h3 { font-size: clamp(34px, 3vw, 50px) !important; }
.h3-txt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 720px; padding: 0 20px 3vh; text-align: center; }
.h3-no { margin-bottom: 12px; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); font-family: var(--e-font); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--a1); }
.h3-txt h3 { font-size: clamp(30px, 2.6vw, 42px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.h3-txt p { max-width: 560px; padding-top: 12px; font-size: 16.5px; line-height: 1.65; color: var(--ink); opacity: .78; }
.h3-txt .h2-tags { justify-content: center; gap: 8px; padding-top: 20px; }
.h3-txt .h2-tags a { padding: 7px 14px 7px 16px; border: 1px solid var(--a1); background: transparent; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.h3-txt .h2-tags a::after { content: "→"; margin-left: 6px; opacity: .7; }
.h3-mask { display: block; overflow: hidden; }
.h3-mask > span { display: block; }

/* 장면: 가운데, 정면에서 살짝 내려다보게 */
.h3-scene .h2-stage { width: min(800px, 92vw); height: min(420px, 45vh); margin: 0 auto; perspective: 1600px; }
.h3-scene .h2-stage::before { display: none; }
.h3-scene .scn { transform: rotateX(7deg); visibility: inherit; }   /* 지금 분야의 장면만 보인다(다른 분야는 감춰진 채 겹쳐 있음) */

/* 안 E 슬라이드: 글은 위에 겹쳐 두고, 장면 카드는 아래 한 줄에 — 가운데 한 장 크게, 양옆에 앞뒤 분야가 작고 흐리게 */
.is-rail .h3-body { grid-template-rows: auto auto; }
.is-rail .h3-slide { grid-row: 1; grid-column: 1; }
.h3-rail { position: relative; grid-row: 2; grid-column: 1; height: min(420px, 45vh); perspective: 1600px; }
.h3-card { position: absolute; left: 50%; top: 0; width: min(760px, 62vw); height: 100%; margin-left: calc(min(760px, 62vw) / -2); cursor: pointer; will-change: transform, opacity; }
.h3-card.cur { cursor: default; }
.h3-card .h2-stage { width: 100%; height: 100%; }
.h3-card .h2-stage::before { display: none; }
/* 그림 가독성(11/10 대표 「허공에 배치돼 겹쳐 보여 복잡」): 정면으로, 창 두 개를 겹치지 않게 나란히, 떠 있는 알림·배지는 뺀다 */
.h3-card .scn { visibility: visible; transform: none; }
.h3-card .ly { transform: none !important; }
.h3-card .ly:nth-child(1) { left: 0 !important; right: auto !important; top: 3% !important; bottom: auto !important; width: 61% !important; }
.h3-card .ly:nth-child(2) { left: auto !important; right: 0 !important; top: 3% !important; bottom: auto !important; width: 36% !important; }
.h3-card .ly:nth-child(3) { display: none; }
.is-rail .h3-rail { height: min(400px, 42vh); }

/* 아래 진행 표시: 분야 이름 4개 + 채워지는 선 */
.h3-nav { position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; padding-top: 3vh; }
.h3-nav button { position: relative; min-width: 150px; padding: 10px 6px 12px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--dim); cursor: pointer; transition: color .35s; }
.h3-nav button span { margin-right: 6px; font-family: var(--e-font); font-size: 11.5px; letter-spacing: .1em; }
.h3-nav button i { position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; background: var(--line); }
.h3-nav button i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--fill, 0)); background: linear-gradient(90deg, var(--a1), var(--a2)); }
.h3-nav button.on, .h3-nav button:hover { color: var(--ink); }

/* 안 C 큰 번호: 뒤에 아주 큰 테두리 숫자 */
.h3-bignum { position: absolute; left: 50%; top: 0; z-index: 0; height: 1em; overflow: hidden; transform: translate(-50%, -30%); font-family: var(--e-font); font-size: min(34vw, 46vh); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--line); pointer-events: none; }
.h3-bignum span { display: block; }

/* ───── 새 레이아웃 3개(H4: 탭 / 보드 / 큐브) — 글은 위, 그림은 아래 한 덩어리 ───── */
.is-sep .h3-body { grid-template-rows: auto auto; }
.is-sep .h3-slide { grid-row: 1; grid-column: 1; }
.h3-vis { position: relative; grid-row: 2; grid-column: 1; display: flex; justify-content: center; }
/* 그림 정돈(겹치지 않게, 정면) — E안과 같은 규칙 */
.vpage .scn { visibility: inherit; transform: none; }   /* 감춰진 탭 화면의 장면이 비쳐 보이지 않게 */
.vpage .h2-stage { width: 100%; height: 100%; }
.vpage .h2-stage::before { display: none; }
.vpage .ly { transform: none !important; }
.vpage .ly:nth-child(1) { left: 0 !important; right: auto !important; top: 3% !important; bottom: auto !important; width: 61% !important; }
.vpage .ly:nth-child(2) { left: auto !important; right: 0 !important; top: 3% !important; bottom: auto !important; width: 36% !important; }
.vpage .ly:nth-child(3) { display: none; }

/* K 브라우저 탭: 큰 프로그램 창 하나 — 위 탭이 분야, 창 안 화면이 바뀐다 */
.tw { width: min(900px, 90vw); border-radius: 14px; overflow: hidden; background: #0c121c; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); }
html.theme-light .tw { background: #fff; border-color: rgba(14,23,38,.1); box-shadow: 0 40px 90px -40px rgba(20,35,60,.35); }
.tw-bar { display: flex; align-items: flex-end; gap: 14px; height: 46px; padding: 0 14px; background: rgba(255,255,255,.04); }
html.theme-light .tw-bar { background: #eef1f5; }
.tw-dots { display: flex; gap: 6px; align-self: center; }
.tw-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .tw-dots i:nth-child(2) { background: #febc2e; } .tw-dots i:nth-child(3) { background: #28c840; }
.tw-tabs { position: relative; display: flex; gap: 2px; }
.tw-tab { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 9px 9px 0 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--dim); cursor: pointer; transition: color .3s, background-color .3s; white-space: nowrap; }
.tw-tab b { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .6; }
.tw-tab.on { background: #0c121c; color: var(--ink); }
html.theme-light .tw-tab.on { background: #fff; }
.tw-tab.on b { background: var(--a1); opacity: 1; }
.tw-ink { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--a1), var(--a2)); }
.tw-addr { display: flex; align-items: center; gap: 0; height: 34px; margin: 8px 14px 0; padding: 0 14px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: 12.5px; color: var(--sub); }
html.theme-light .tw-addr { background: #f2f4f7; }
.tw-addr em { font-style: normal; color: var(--ink); }
.tw-body { position: relative; height: min(390px, 41vh); margin: 12px 18px 18px; }
.tw-page { position: absolute; inset: 0; visibility: hidden; }

/* L 보드 줌: 2×2 판 — 카메라가 한 번 물러나 전체를 보여 준 뒤 다음 칸으로 들어간다 */
.cam { position: relative; width: min(820px, 90vw); height: min(420px, 44vh); overflow: hidden; border-radius: 16px; }
.bd { position: absolute; left: 0; top: 0; width: calc(200% + 60px); height: calc(200% + 60px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 60px; transform-origin: 0 0; }
.bd-tile { position: relative; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); padding: 34px 22px 18px; }
.bd-tile .h2-stage { height: calc(100% - 4px); }
.bd-name { position: absolute; left: 22px; top: 10px; font-size: 13px; font-weight: 700; color: var(--sub); }
.bd-tile.cur { border-color: var(--a1); }

/* M 회전 큐브: 정육면체 네 옆면 = 분야 4개 */
.cube-wrap { position: relative; width: min(760px, 80vw); height: min(400px, 42vh); perspective: 2200px; }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.cube-face { position: absolute; inset: 0; padding: 20px; border-radius: 14px; background: rgba(12,18,28,.92); border: 1px solid var(--line); backface-visibility: hidden; }
html.theme-light .cube-face { background: rgba(255,255,255,.95); }

/* ───── N5 E안 + 위 큰 제목 줄: 분야 이름 4개를 위쪽에 큰 글씨 한 줄로 늘 보이게(지금 분야만 밝게) ───── */
.nav-top .h3-head { order: 0; }
.nav-top .h3-nav { order: 1; gap: 6px; padding: 0 0 3.2vh; }
.nav-top .h3-body { order: 2; }
.nav-top .h3-nav button { min-width: 0; padding: 12px 20px 16px; font-size: clamp(17px, 1.55vw, 25px); font-weight: 800; letter-spacing: -.02em; }
.nav-top .h3-nav button span { display: block; margin: 0 0 4px; font-size: 12px; }
.nav-top .h3-nav button i { height: 3px; }
.nav-top .h3-txt h3, .nav-top .h3-no { display: none; }   /* 분야 이름은 위 줄이 맡으므로 아래에는 설명·서비스 이름만 */
.nav-top .h3-txt p { padding-top: 0; }

/* ───── 구간 주제목 처리 비교(E1~E3) — 세 안 모두 「01 / 04」 표는 뺀다(아래 분야 이름 줄과 같은 정보) ───── */
.h3-br { display: none; }
.head-intro .h3-no, .head-corner .h3-no, .head-none .h3-no { display: none; }
/* E1 첫 화면 제목: 구간에 들어서면 주제목만 크게 → 첫 분야가 시작되면 위로 사라지고 분야 내용이 들어선다 */
.head-intro .h3-head { position: absolute; left: 0; right: 0; top: 76px; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px; transition: opacity .6s, transform .6s; }
.head-intro .h3-head::after { display: none; }
.head-intro .h3-head .h2-label { padding-bottom: 18px; font-size: 15px; }
.head-intro .h3-head h2 { font-size: clamp(36px, 3.6vw, 60px); font-weight: 700; line-height: 1.25; color: var(--ink); }
.head-intro .h3-br { display: inline; }
.head-intro:not(.intro-on) .h3-head { opacity: 0; transform: translateY(-40px) scale(.96); pointer-events: none; }
.head-intro .h3-body, .head-intro .h3-nav { transition: opacity .5s; }
.head-intro.intro-on .h3-body, .head-intro.intro-on .h3-nav { opacity: 0; pointer-events: none; }
/* E2 구석 꼬리표: 주제목을 왼쪽 위에 작게 고정, 가운데는 분야 내용만 */
.head-corner .h3-head { position: absolute; left: 0; right: 0; top: calc(76px + 3.4vh); z-index: 3; padding-bottom: 0; text-align: left; }
.head-corner .h3-head::after { display: none; }
.head-corner .h3-head .h2-label { padding-bottom: 6px; font-size: 12px; }
.head-corner .h3-head h2 { max-width: 230px; font-size: 15px; line-height: 1.45; }
.head-corner .h3-br { display: inline; }

/* 빨려 들어가기 입구를 지구본에서 떼어 놓는다(11/11 대표 「너무 많이 내려와 지구본에 겹친다」):
   선의 끝(서울 점 = 지구본 한가운데)은 그대로 두고, 선을 위로 9vh 더 늘여 시작점(입구)을 지구본 윗면보다 한참 위로 올린다 */
#inc02 .seoul-line { top: 3vh; height: calc(52vh - 3vh); }   /* 18vh는 너무 멀어 4vh로(11/11 「간격이 너무 멀다」) → 「더 내려야 돼」로 입구를 지구본 쪽으로 3vh 내림. 카드 테두리 아랫단을 입구에 맞춤(hopper.js VIS) */
/* 실제 선 시작점·입구 높이는 hopper.js 가 카드 아랫단의 제자리에 맞춰 정한다(아래 값은 계산 전 기본값) */
.hop-mouth { top: 3vh; }

/* 지구본을 카드 쪽으로 끌어올린다(11/11 대표 「지구본을 스크롤 따라 올라오게 해 줘야지 — 멀어진 채로 유지된다」):
   카드는 그대로 두고, 지구본 구간 전체를 위로 당겨 겹쳐 놓는다. 카드(서비스 구간)는 위층이라 가려지지 않고,
   스크롤하면 지구본이 카드 바로 밑까지 올라온 상태에서 카드가 빨려 들어간다. 값은 --globe-pull 하나로 조절 */
#story:has(#svcH2) + #inc02 { margin-top: calc(var(--globe-pull, 22vh) * -1); }
/* 겹친 부분의 경계선 없애기: 지구본 구간 윗부분은 투명 → 바탕색으로 번지게(서비스 구간 바탕이 그대로 비쳐 보임) */
#story:has(#svcH2) + #inc02 { background: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 var(--globe-pull, 22vh)); }
html.theme-light #story:has(#svcH2) + #inc02 { background: var(--t-bg, #f4f6f9); }

/* 빨려 들어가기(hopper.js): 지구본 연결선 윗끝 = 주머니 입구에 잠깐 맺히는 빛 */
.hop-mouth { position: absolute; left: 50%; top: 0; z-index: 3; width: 120px; height: 24px; border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(31,235,209,.95), rgba(31,163,235,.4) 55%, transparent); filter: blur(1.5px); }
html.theme-light .hop-mouth { background: radial-gradient(closest-side, rgba(10,159,147,.85), rgba(22,115,196,.35) 55%, transparent); }

@media (max-width: 900px) {
  .h3-pin { position: relative; height: auto; padding: 90px 0 60px; }
  .h3-slide { grid-area: auto; visibility: visible; padding-bottom: 50px; }
  .h3-scene, .h3-nav, .h3-bignum, .h3-rail, .h3-vis { display: none; }
}