@charset "utf-8";
/* ETHER 홍보사이트 (index.html) · 티커 · 상단 내비 · 주 버튼(오로라) — index.html 에 적힌 순서대로 불러온다 */
/* ============ TICKER ============ */
/* 스카이 그라데이션 띠(시안 2) + 세리프 에디토리얼 서체(시안 9) — 흰 글자 */
.ticker{
  background:linear-gradient(100deg,#459EFA 0%,#4DA3FC 52%,#68B2FF 100%); color:#fff; overflow:hidden;
  border-bottom:1px solid var(--line);
}
/* 첫 판(OVERVIEW 히어로)에서는 띠를 숨긴다 — page-deck.js 가 html.at-first 를 토글한다.
   #chrome 높이는 ResizeObserver 가 다시 재므로 덱도 함께 위로 붙는다. */
.at-first .ticker{display:none}
/* 이음매 없는 순환의 조건은 두 가지다.
   ① 트랙 폭 = 콘텐츠 폭. width 를 주지 않으면 flex 컨테이너는 부모(=뷰포트) 폭을 쓰고,
      그러면 -50% 가 '복제본 한 벌'이 아니라 '화면 절반'이 되어 한 바퀴마다 어긋난다.
   ② 이동 거리(= 복제본 절반) ≥ 뷰포트 폭. 아니면 되돌아가는 순간 오른쪽에 빈 구간이 보인다.
      한 벌이 약 900px 이므로 8벌을 깔고 4벌(≈3600px)씩 민다 — 울트라와이드까지 덮는다.
   속도는 원래 의도(한 벌당 32s)를 유지 : 4벌 × 32s = 128s. */
.ticker-track{
  display:flex; width:max-content; white-space:nowrap;
  will-change:transform; animation:marquee 204.8s linear infinite;   /* 128s → 256s(50% 느리게) → 204.8s(25% 빠르게, 초당 약 17.5px) */
}
.ticker-track span{
  flex:none;
  font-family:var(--serif); font-style:italic; font-weight:350; font-size:14px; letter-spacing:.04em; line-height:1.4;
  /* Fraunces 는 작은 크기에서 자동으로 굵고 뭉툭한 '본문용' 광학 크기를 쓴다 → 디스플레이 쪽으로 고정해 획을 가늘게 */
  font-optical-sizing:none; font-variation-settings:"opsz" 72;
  padding:10px 26px; display:inline-flex; align-items:center; gap:24px;
}
.ticker-track .el{font-weight:var(--fw-d5);font-family:var(--serif);font-size:16px;letter-spacing:0;font-style:normal}
/* 한자만 오행 색 (시안 3·4 와 같은 값). 한 벌 안의 순서 = 木 火 土 金 水 */
/* 하늘색 띠 위라 진한 오행 색은 묻힌다 → 같은 색상의 아주 밝은 파스텔로 */
.ticker-track .el:nth-of-type(1){color:#E2F5C4}   /* 木 */
.ticker-track .el:nth-of-type(2){color:#FFD1E6}   /* 火 */
.ticker-track .el:nth-of-type(3){color:#FFE7B0}   /* 土 */
/* 金 · 水 도 같은 파스텔 톤(그림자 없음 · 바탕보다 밝게). 다만 바탕이 하늘색(H≈210°)이라
   金 은 흰 영문과 섞이지 않게 명도를 한 단계 낮춘 파스텔 회색,
   水 는 바탕과 같은 파랑이면 묻히므로 색상을 시안 쪽(H≈193°)으로 틀고 채도를 올린 하늘색 파스텔 */
.ticker-track .el:nth-of-type(4){color:#D5DAE3}   /* 金 */
.ticker-track .el:nth-of-type(5){color:#B6F0FF}   /* 水 */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(160%) blur(14px);
  background:color-mix(in srgb, var(--bg-3) 78%, transparent);
  border-bottom:1px solid var(--line-2);
  transition:background .5s ease, border-color .5s ease;
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-5)}
.logo{font-family:var(--serif);font-weight:var(--fw-d4);font-size:var(--fs-6);letter-spacing:.14em}
.logo .dot{color:var(--cobalt-t)}
/* H-wave 로고 (로고/ETHER_logo_H-wave.svg). 높이 14px ≈ 폭 102px — 이전 텍스트 'ETHER.'(21px 세리프) 와 같은 크기.
   fill=currentColor 라 헤더는 잉크색, 푸터는 on-dark 색을 그대로 따른다 */
.logo-svg{display:block;height:17.8px;width:auto}   /* 14 → 15.4 → 17 → 18.7 → 17.8px (마지막 5% 축소, 폭 약 130px) */
a.logo .logo-svg{align-self:center}
a.logo{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;transition:opacity .2s ease}
a.logo:hover{opacity:.7}
a.logo:focus-visible{outline:2px solid var(--cobalt);outline-offset:6px;border-radius:var(--r-1)}
.nav-menu{display:flex;gap:var(--sp-6)}
.nav-menu a{font-size:var(--fs-4);color:var(--ink-2);transition:color .2s}
.nav-menu a:hover{color:var(--ink)}
/* Energy 메뉴 : 넓은 화면은 'Energy', 좁은 화면(아래 880px)은 '내 기운 읽기' */
.nav-key .nk-m{display:none}
/* 지금 보고 있는 판의 메뉴만 브랜드 블루. page-deck.js 가 판이 바뀔 때마다 .is-cur 를 옮긴다 */
.nav-menu a.is-cur,.nav-menu a.is-cur:hover{color:var(--cobalt-t)}
.nav-right{display:flex;align-items:center;gap:var(--sp-4)}
/* 헤더 CTA · White Hairline (내비버튼샘플/01) : 흰 알약 + 1px 가는 테두리 + 잉크 글자, 높이 38px.
   호버하면 테두리가 연한 하늘 브랜드 컬러(#80BFFF)로 바뀌고 1px 떠오른다 */
.nav-cta{display:inline-flex;align-items:center;height:38px;padding:0 20px;border-radius:var(--r-full);
  font-size:14px;font-weight:600;line-height:1;letter-spacing:-.005em;white-space:nowrap;text-decoration:none;
  background:#fff;color:var(--ink);border:1px solid rgba(11,31,58,.16);
  transition:border-color .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.nav-cta:hover{border-color:#80BFFF;transform:translateY(-1px)}
.nav-cta:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.top-btn{
  position:fixed;right:24px;bottom:24px;z-index:70;
  /* 투명 테두리를 두면 그라데이션이 테두리 자리로 반복 타일되어
     오른쪽 끝에 시작색(진한 쪽)이 1px 선으로 비친다 → 테두리 없음 */
  width:44px;height:44px;border-radius:50%;border:0;
  background:var(--brand-grad);color:#fff;cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--sh-glow);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,box-shadow .25s ease;
}
.top-btn.show{opacity:1;transform:none;pointer-events:auto}
.top-btn:hover{box-shadow:var(--sh-glow-lg);transform:translateY(-2px)}
.top-btn.show:hover{transform:translateY(-2px)}
.top-btn svg{width:18px;height:18px}
/* 테두리(투명)가 있는 요소에 --brand-grad 를 깔 때도 같은 1px 선이 생긴다.
   크기는 그대로 두고 그라데이션을 테두리 바깥선 기준으로 펼쳐 이음매를 없앤다 */
.rd-topt[aria-selected="true"]:hover,.rd-cday[aria-selected="true"]:hover,
.rd-chk input:checked+.box,.seg-b[aria-checked="true"],.prod-btn.buy{background-origin:border-box}
@media (max-width:640px){.top-btn{right:16px;bottom:16px;width:40px;height:40px}}
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-full);font-size:var(--fs-4);font-weight:500;
  cursor:pointer;border:1px solid transparent;transition:.22s;
}
.btn svg{width:16px;height:16px}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--card)}
.btn-lg{padding:var(--sp-4) var(--sp-6);font-size:var(--fs-4)}

/* ============ .btn-primary — 오로라 표면 =======================================
   설계 의도 : 이 버튼은 히어로의 파티클 필드(#etherCanvas) 옆에 선다.
   평평한 알약이면 '기운'을 말하는 화면에서 혼자 정지해 있다 → 아주 느리게 살아 있되,
   가만히 볼 때는 움직임을 눈치채지 못할 정도로만 둔다.

   그라데이션은 서로 보간되지 않는다(색이 아니라 이미지라서). 그래서 두 가지를 쓴다.
     · 기본 표면  : background-position 을 미세하게 흘린다 (position 은 보간된다)
     · 호버 표면  : ::before 에 더 밝은 그라데이션을 깔고 opacity 로 크로스페이드
   ::after 는 한 번 훑고 지나가는 하이라이트다 — 클릭하고 싶게 만드는 지점.

   체크박스·세그먼트·느낌표 아이콘 같은 작은 면은 계속 --brand-grad(단순 2스톱)를 쓴다.
   20px 짜리 칩에 3스톱과 스윕을 넣어봐야 읽히지 않는다. */
.btn-primary{
  position:relative; overflow:hidden; isolation:isolate;
  /* 테두리를 '투명하게만' 남기면 안 된다. 요소의 배경은 border-box 까지 칠해지는데
     호버 레이어(::before)는 padding-box 안에만 그려지고 overflow:hidden 의 클립도
     padding-box 에서 끝난다 → 호버 시 1px 테두리 자리에 기본 그라데이션이 그대로 남아
     왼쪽 끝(#5A2570 vs #63287D, 색차가 가장 큰 지점)에 세로줄로 보인다.
     아예 지운다. .hero-cta 는 flex 기본값 align-items:stretch 라 옆 고스트 버튼과
     높이는 자동으로 맞고, 폭 2px 차이는 서로 떨어진 알약이라 드러나지 않는다. */
  border:0; color:#fff;
  background:linear-gradient(100deg,#459EFA 0%,#4DA3FC 30.7%,#68B2FF 59%,#80BFFF 100%);   /* 정지 상태(170% 중 앞 59%)에서 #459EFA · #4DA3FC · #68B2FF (0·52·100%) 가 보이게 */
  background-size:170% 100%;
  background-position:0% 50%;
  box-shadow:0 6px 18px -10px var(--brand-glow);
  transition:transform .3s cubic-bezier(.22,1,.36,1),
             box-shadow .35s ease,
             background-position 1.2s ease;
}
/* 기본 상태의 미세한 유영. 14초는 '보려고 하면 보이는' 경계값이다 */
@keyframes auroraDrift{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}
/* 상시 유영은 큰 CTA(히어로·폼 제출)에만 건다.
   내비의 작은 CTA 는 스티키라 항상 화면에 있다 — 거기에 무한 애니메이션을 걸면
   페이지를 열어둔 내내 매 프레임 리페인트가 돈다. 정지 상태로도 3스톱은 충분히 읽힌다. */
.btn-primary.btn-lg{animation:auroraDrift 14s ease-in-out infinite}

/* 호버 표면 — '밝아진다'가 아니라 '깊어진다'.
   채도를 올려 핑크로 가면(#C466C0 계열) 캔디처럼 읽혀 값이 싸 보인다.
   가운데만 한 단계 발광시키고, 끝은 채도를 빼서 탁한 모브로 눕힌다. */
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(100deg,#52A6FB 0%,#5AAAFD 52%,#76BAFF 100%);
  opacity:0; transition:opacity .5s ease;
}
/* 훑고 지나가는 하이라이트.
   흰빛(rgba(255,255,255,.42))은 플라스틱 광택으로 읽힌다 → 土(--earth-t #F0C173)의
   샴페인 톤으로 낮춰 깐다. 자수정에 금을 물리는 조합이고, 임의의 색이 아니라
   오행 팔레트 안에 있는 색이라 브랜드에서 벗어나지 않는다.
   폭 26% 의 좁은 띠라 면이 밝아지지 않고 '빛이 지나갔다'로만 남는다. */
.btn-primary::after{
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:26%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(240,193,115,.26),transparent);
  transform:skewX(-18deg); opacity:0;
}
@keyframes auroraSheen{
  0%  {left:-45%; opacity:0}
  26% {opacity:1}
  100%{left:125%; opacity:0}
}

/* 리프트는 2px. 3px 은 통통 튀어 장난스럽다.
   대신 그림자를 더 멀리·부드럽게 던져 '가벼이 뜬' 게 아니라 '들어올려진' 것으로 만든다. */
.btn-primary:hover,.btn-primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 20px 44px -16px var(--brand-glow);
}
.btn-primary:hover::before,.btn-primary:focus-visible::before{opacity:1}
/* 0.9s 는 민첩해서 값싸게 느껴진다. 1.4s + 느린 진입 곡선이라야 여유로 읽힌다 */
.btn-primary:hover::after{animation:auroraSheen 1.4s cubic-bezier(.33,0,.15,1)}

/* 눌림 — 들렸던 만큼 도로 내려앉고 글로우가 수축한다. 90ms 로 짧게 끊어야 '딸깍' 이 된다 */
.btn-primary:active{
  transform:translateY(-1px) scale(.985);
  box-shadow:0 6px 14px -10px var(--brand-glow);
  transition:transform .09s ease,box-shadow .09s ease;
}
.btn-primary:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* 글자·아이콘은 두 배경 레이어 위에.
   텍스트 노드 자체는 인라인 레벨이라 이미 음수 z-index 레이어보다 위에 그려진다.
   이 규칙은 아이콘처럼 요소로 들어온 자식을 위한 안전장치다. */
.btn-primary>*{position:relative;z-index:1}

/* 유영과 하이라이트는 장식이다. 색·리프트만 남기고 반복 모션은 끈다 */
@media(prefers-reduced-motion:reduce){
  .btn-primary.btn-lg{animation:none}
  .btn-primary:hover::after{animation:none}
}