/* =========================================================
   ADMIRACLE — 페이지 공용 장치의 모양 (짝: site.js)
   홈 · About · Our Business(허브 · B2B) 정적 페이지와 Next 페이지(/b2c · /btl, AdmShell)가 같이 쓴다.
   상단 바 자동 숨김 · 왼쪽 눈금 내비 · 장면(멈춰 서서 스크롤마다 하나씩) · 끝 빛 · 푸터(로고 조명) · 커스텀 커서.
   색·간격 토큰(--navy-900, --on-rgb, --accent-rgb, --gutter, --gnb-h …)은 각 페이지의 스타일이 정한다.
   ========================================================= */

/* ---------- 상단 바 자동 숨김 (짝: gnb.js) — 아래로 내리면 위로 빠지고 올리면 내려온다 ---------- */
.gnb { transition: transform 0.4s var(--ease); }
.gnb.is-hidden { transform: translateY(-100%); }

/* ---------- 왼쪽 눈금 인디케이터 ---------- */
/* 눈금 하나가 누르는 버튼이다(34×22 영역). 내비게이션에 올리면 섹션 이름이 모두 나오고 이름도 눌린다.
   이름은 평소엔 클릭을 막아 두어, 보이지 않을 때 본문 왼쪽 끝을 가로채지 않는다.
   (:focus-within 이 아니라 :focus-visible — 마우스로 누른 뒤 이름표가 계속 떠 있지 않게) */
.ticks {
  position: fixed; left: 6px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column;
  mix-blend-mode: difference;
}
.ticks button { position: relative; width: 34px; height: 22px; padding-left: 8px; display: flex; align-items: center; color: #fff; }
.ticks button::before {
  content: ""; width: 14px; height: 1.5px; background: rgba(255, 255, 255, 0.45);
  transition: width 0.35s var(--ease), background 0.35s;
}
.ticks button.is-active::before { width: 22px; background: #fff; }
.ticks button:hover::before, .ticks button:focus-visible::before { width: 22px; background: rgba(255, 255, 255, 0.9); }
.ticks button:focus-visible { outline: none; }
.ticks button span {
  position: absolute; left: 38px; top: 0; height: 100%; display: flex; align-items: center;
  padding-right: 12px; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  opacity: 0; transform: translateX(-4px); transition: opacity 0.25s, transform 0.25s var(--ease); pointer-events: none;
}
.ticks:hover button span, .ticks:has(:focus-visible) button span { opacity: 0.5; transform: none; pointer-events: auto; }
.ticks:hover button.is-active span, .ticks:has(:focus-visible) button.is-active span { opacity: 0.85; }
.ticks:hover button:hover span, .ticks button:focus-visible span { opacity: 1; }
/* 휴대폰: 이름표 없이 짧은 눈금만, 본문 여백(20px) 안쪽에 들어가게 */
@media (max-width: 768px) {
  .ticks { left: 2px; }
  .ticks button { width: 22px; height: 18px; padding-left: 4px; }
  .ticks button::before { width: 8px; }
  .ticks button.is-active::before { width: 14px; }
  .ticks button span { display: none; }
}

/* 장면 안에서 스크롤 단계에 맞춰 생기는 요소(main.js 가 .on 을 붙였다 뗀다) */
.pop { opacity: 0; transform: translateY(32px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.pop.on { opacity: 1; transform: none; }
/* 카드·상자(큰 틀)는 처음부터 있고, 그 안의 글만 단계마다 차오른다 — 상자 안이라 덜 움직인다 */
.pop--in { transform: translateY(14px); }
.pop--in.on { transform: none; }

/* ---------- 장면 ---------- */
/* 장면(scene): 섹션에 도착하면 화면에 멈춰 서고(pin), 스크롤할 때마다 다음 요소가 생긴다.
   섹션 높이 = 화면 + 단계 수 × 한 단계 길이 + 머무는 길이 — main.js(setupScenes)가 정한다.
   pin 은 한 화면(100vh)에 다 들어온다 — 글자·사진 크기를 화면 너비와 높이 중 작은 쪽에 맞춘다.
   위 패딩에 헤더 높이를 넣어, 헤더 아래 남은 공간의 가운데에 내용이 온다.
   내용이 화면보다 길면(작은 휴대폰) main.js 가 pin 의 top 을 음수로 줘서 아래 끝이 맞을 때 멈춘다. */
.scene { position: relative; min-height: 100vh; }
.scene__pin {
  position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center;
  padding: calc(var(--gnb-h) + 2vh) 0 3vh;
}
/* 내용이 짧은 장면 — pin 이 내용만큼이고 site.js 가 헤더 아래 남은 공간의 가운데 쪽에 멈춰 세운다 */
.scene--fit { min-height: 0; }
.scene--fit > .scene__pin { min-height: 0; padding: clamp(40px, 7vh, 88px) 0; }

/* ---------- 끝 빛 ---------- */
/* 내려가는 동안 나타나기(scene--early, 짝: site.js 2-1 — 참고 ntech-dsp): 멈추지 않는 섹션 하나가 한 화면,
   내용은 화면 높이 안 가운데(위아래 여백 같게). 요소는 아래 56px 에서 1.2초 동안 떠오르고, 같이 닿은 것끼리 0.1초씩(--d) */
.scene--early > .scene__pin { min-height: 100vh; min-height: 100svh; padding: clamp(28px, 5vh, 56px) 0; }
.scene--early :is(.pop, [data-reveal]) {
  opacity: 0; transform: translateY(56px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0ms);
}
.scene--early :is(.pop, [data-reveal]).on { opacity: 1; transform: none; }
.scene--early .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.scene--early .wi {
  display: inline-block; transform: translateY(115%) rotate(5deg); transform-origin: 0 100%;
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--d, 0ms) + var(--wi) * 45ms);
}
.scene--early [data-words].on .wi { transform: none; }

/* 페이지 마지막 장면의 빛(.end-glow)은 pin 안에서 자른다 — 섹션의 overflow:hidden 은 sticky 를 막는다 */
.scene__pin:has(> .end-glow) { overflow: hidden; }
/* 빛의 중심을 멈춘 화면(pin)의 아래 끝에 둔다 — 장면이 끝나 풀릴 때 그 끝이 곧 푸터 위 끝이다.
   위 절반은 여기서, 아래 절반은 .footer--glow 가 같은 크기로 그려
   경계에서 밝기가 그대로 이어진다(예전엔 빛이 섹션 끝에서 꺼졌다가 푸터에서 다시 밝아져 어두운 띠가 보였다). */
.end-glow {
  position: absolute; left: 50%; bottom: -55vh; width: 150vw; height: 110vh; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.26), transparent);
  pointer-events: none;
}
.scene__pin:has(> .end-glow) > .wrap { position: relative; }

/* ---------- FOOTER ---------- */
.footer { position: relative; overflow: hidden; background: var(--footer-base); isolation: isolate; }
/* 위 섹션(남색)에서 푸터 색으로 스며들게 */
.footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 280px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--navy-900), transparent); }
/* 마지막 장면 빛(.end-glow)의 아래 절반 — 같은 타원(75vw × 55vh)을 위 끝 가운데에 놓는다 */
.footer--glow::before {
  height: 55vh;
  background:
    radial-gradient(75vw 55vh at 50% 0, rgba(var(--accent-rgb), 0.26), transparent),
    linear-gradient(180deg, var(--navy-900), transparent 280px);
}
/* 예전엔 부모에 blur(80px)를 걸고 자식을 움직여 프레임마다 흐림을 다시 계산했다(스크롤 버벅임).
   지금은 각 원이 radial-gradient 로 스스로 부드럽고, transform 만 움직인다. */
.footer__bg { position: absolute; inset: -20%; z-index: -2; }
.footer__bg i { position: absolute; border-radius: 50%; animation: drift 22s ease-in-out infinite alternate; will-change: transform; }
.footer__bg i:nth-child(1) { width: 60%; height: 70%; left: -5%; top: 0; background: radial-gradient(closest-side, var(--footer-blob1), transparent); }
.footer__bg i:nth-child(2) { width: 55%; height: 60%; left: 25%; top: 20%; background: radial-gradient(closest-side, var(--footer-blob2), transparent); animation-duration: 26s; }
.footer__bg i:nth-child(3) { width: 60%; height: 70%; right: -10%; top: -10%; background: radial-gradient(closest-side, var(--footer-blob3), transparent); animation-duration: 30s; }
.footer__bg i:nth-child(4) { width: 80%; height: 60%; right: -10%; bottom: -10%; background: radial-gradient(closest-side, var(--footer-blob4), transparent); animation-duration: 24s; }
@keyframes drift { to { transform: translate(6%, -8%) scale(1.12); } }

/* 커서 주변 공간이 은은하게 밝아지는 빛 */
.footer__light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle calc(var(--r, 260px) * 2.4) at var(--x, 50%) var(--y, 80%), rgba(255, 255, 255, calc(var(--a, 0) * 0.16)), transparent 70%);
}

/* 위·중간 여백은 화면이 낮으면 줄어 푸터가 한 화면에 들어온다 — 30vh - 150px 는 높이 900px 에서 120px(예전 값), 768px 에서 80px */
.footer__inner { max-width: 1440px; margin: 0 auto; padding: clamp(56px, calc(30vh - 150px), 120px) var(--gutter) 0; }
.footer__top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; }
.footer__slogan { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.4; font-weight: 700; letter-spacing: -0.035em; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fcol { display: flex; flex-direction: column; gap: 16px; }
.fcol h4 { font-size: 15px; font-weight: 600; color: rgba(var(--on-rgb), 0.55); margin-bottom: 14px; }
.fcol a { font-size: 17px; font-weight: 600; color: rgba(var(--on-rgb), 0.92); transition: opacity 0.2s; }
.fcol a:hover { opacity: 0.6; }
.footer__info { margin: clamp(48px, calc(30vh - 150px), 120px) 0 0 calc((100% - 40px) * 1 / 2.4 + 40px); font-size: 15px; line-height: 1.9; color: rgba(var(--on-rgb), 0.6); }
.footer__legal { margin: 40px 0 0 calc((100% - 40px) * 1 / 2.4 + 40px); display: flex; flex-wrap: wrap; gap: 14px 34px; font-size: 15px; color: rgba(var(--on-rgb), 0.7); }
.footer__legal b { color: var(--on); }

.wordmark {
  position: relative; margin-top: 40px; padding: 0 2vw;
  font-size: 15.6vw; font-weight: 800; line-height: 1; letter-spacing: -0.045em; text-align: center;
  user-select: none; white-space: nowrap;
}
.wordmark span { display: block; }
.wordmark__base { color: rgba(var(--on-rgb), 0.13); }
/* 같은 글자를 겹쳐 놓고, 커서 위치의 방사형 그라데이션으로만 글자를 채운다 */
.wordmark__lit {
  position: absolute; inset: 0; padding: inherit;
  background:
    radial-gradient(circle var(--r, 220px) at var(--x, 50%) var(--y, 50%), rgba(var(--on-rgb), var(--a, 0)) 0%, rgba(var(--on-rgb), calc(var(--a, 0) * 0.85)) 28%, rgba(var(--on-rgb), calc(var(--a, 0) * 0.3)) 62%, transparent 100%),
    radial-gradient(circle calc(var(--r, 220px) * 0.55) at var(--x2, 50%) var(--y2, 50%), rgba(var(--on-rgb), calc(var(--a, 0) * 0.8)), transparent 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 calc(var(--a, 0) * 18px) rgba(var(--on-rgb), 0.45));
}
/* 홈: 글자 대신 로고. 로고 모양(SVG)을 마스크로 써서 흐린 바탕 로고와 빛을 그린다.
   빛은 바깥 .wordmark__lit 에 걸린 drop-shadow 로 로고 둘레까지 번지고, 안쪽 <i> 가 로고 모양으로 잘린다
   (마스크는 filter 뒤에 적용돼, 같은 요소에 걸면 번짐까지 잘려 나간다). */
.wordmark--logo { width: min(84vw, 1400px); aspect-ratio: 671 / 120; margin: 40px auto 0; padding: 0; font-size: 0; }
.wordmark--logo span, .wordmark--logo i { position: absolute; inset: 0; }
.wordmark--logo .wordmark__lit { background: none; }
.wordmark--logo .wordmark__base, .wordmark--logo i {
  -webkit-mask: url("images/logo-white.svg") center / contain no-repeat;
  mask: url("images/logo-white.svg") center / contain no-repeat;
}
.wordmark--logo .wordmark__base { background: rgba(var(--on-rgb), 0.13); }
.wordmark--logo i {
  background:
    radial-gradient(circle var(--r, 220px) at var(--x, 50%) var(--y, 50%), rgba(var(--on-rgb), var(--a, 0)) 0%, rgba(var(--on-rgb), calc(var(--a, 0) * 0.85)) 28%, rgba(var(--on-rgb), calc(var(--a, 0) * 0.3)) 62%, transparent 100%),
    radial-gradient(circle calc(var(--r, 220px) * 0.55) at var(--x2, 50%) var(--y2, 50%), rgba(var(--on-rgb), calc(var(--a, 0) * 0.8)), transparent 100%);
}
.copyright { padding: 20px var(--gutter) 40px; font-size: 15px; color: rgba(var(--on-rgb), 0.8); }

@media (max-width: 900px) {
  .footer__inner { padding-top: 80px; }
  .footer__top { grid-template-columns: 1fr; gap: 56px; }
  .footer__cols { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .footer__info, .footer__legal { margin-left: 0; }
  .footer__info { margin-top: 64px; font-size: 13px; }
  .footer__legal { font-size: 13px; }
}

/* ---------- 커스텀 커서 ---------- */
/* difference 블렌드라 어두운 섹션에선 흰색, 밝은 섹션에선 검정으로 보인다 */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference; transition: opacity 0.3s; }
.cursor.is-hidden { opacity: 0; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; will-change: transform; }
.cursor__dot::before, .cursor__ring::before { content: ""; position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor__dot::before { width: 6px; height: 6px; background: #fff; transition: width 0.3s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), height 0.3s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 0.2s; }
.cursor__ring::before {
  width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.75);
  transition: width 0.45s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), height 0.45s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), background 0.35s, border-color 0.35s, opacity 0.3s;
}
/* 링크·버튼: 링이 채워진 원으로 커지며 대상을 반전시킨다 */
.cursor.is-link .cursor__ring::before { width: 56px; height: 56px; background: #fff; border-color: transparent; }
.cursor.is-link .cursor__dot::before { opacity: 0; }
/* ADMIRACLE 워드마크: 조명 효과가 커서 역할을 하므로 작은 점만 */
.cursor.is-light .cursor__ring::before { width: 10px; height: 10px; opacity: 0; }
.cursor.is-light .cursor__dot::before { width: 4px; height: 4px; }
.cursor.is-down .cursor__ring::before { width: 26px; height: 26px; }
.cursor.is-down.is-link .cursor__ring::before { width: 46px; height: 46px; }

@media (prefers-reduced-motion: reduce) {
  .gnb, .pop, .pop--in, [data-reveal], .wi, .footer__bg i, .cursor, .ticks button::before { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}