@charset "utf-8";
/* ==========================================================
   배네타 더 하이브 — 움직임 연출 (2026-10-26)
   hive.css 다음에 불러온다. 움직임을 줄이도록 설정한 기기(prefers-reduced-motion)에서는
   hive.css 의 전역 규칙과 아래 미디어쿼리로 모든 애니메이션이 꺼진다.
   대부분 .js(스크립트 켜짐) 아래에서만 동작 — 스크립트가 없어도 내용은 그대로 보인다.
   ========================================================== */

/* ---------- 스크롤 진행 막대 ---------- */
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--bronze-l), var(--gold), var(--gold-l)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* 아래로 내리면 머리말 숨김, 올리면 다시 보임 */
.hd { transition: transform .45s var(--ease), background-color .25s, box-shadow .25s; }
.hd.is-hidden { transform: translateY(-100%); }
body.hd-hidden .tool-nav { top: 0; }
.tool-nav { transition: top .45s var(--ease); }

/* ---------- 히어로 ---------- */
.hero::before { content: ""; position: absolute; inset: -20%; pointer-events: none; background:
  radial-gradient(40% 35% at 30% 30%, rgba(198,166,122,.22), transparent 70%),
  radial-gradient(35% 30% at 75% 65%, rgba(138,58,30,.20), transparent 70%),
  radial-gradient(30% 30% at 60% 20%, rgba(227,207,175,.12), transparent 70%);
  filter: blur(20px); animation: aurora 22s ease-in-out infinite alternate; }
@keyframes aurora {
  0% { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(5%, 4%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-2%, 6%, 0) rotate(-6deg) scale(1.02); }
}
.hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .9; }

/* 제목: 구절이 차례로 떠오름 */
.js .hero .h-display .nw { opacity: 0; transform: translateY(.6em) rotate(1.5deg); filter: blur(6px); animation: rise 1.1s var(--ease) forwards; animation-delay: calc(.25s + var(--i, 0) * .14s); }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
.js .hero .kicker, .js .hero__copy .lead, .js .hero__copy .btn-row, .js .hero__art, .js .hero__tools li { opacity: 0; animation: fadeUp 1s var(--ease) forwards; }
.js .hero .kicker { animation-delay: .1s; }
.js .hero__copy .lead { animation-delay: .9s; }
.js .hero__copy .btn-row { animation-delay: 1.1s; }
.js .hero__art { animation: artIn 1.6s var(--ease) .4s forwards; }
.js .hero__tools li { animation-delay: calc(1.2s + var(--i, 0) * .08s); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes artIn { from { opacity: 0; transform: scale(.86) rotate(-8deg); } to { opacity: 1; transform: none; } }

/* 금빛이 흐르는 강조 글자 */
.hero .h-display .em .nw, .cta h2 .shine, .motto__en {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-l) 22%, #FFF6E6 32%, var(--gold-l) 42%, var(--gold) 60%, var(--gold) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite; }
.js .hero .h-display .em .nw { animation: rise 1.1s var(--ease) forwards, shimmer 7s linear 1.6s infinite; animation-delay: calc(.25s + var(--i, 0) * .14s), 1.6s; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.motto__en { background-image: linear-gradient(100deg, var(--espresso) 0%, var(--espresso) 35%, var(--bronze-l) 45%, var(--gold) 50%, var(--bronze-l) 55%, var(--espresso) 65%, var(--espresso) 100%); animation-duration: 9s; }
.motto__en i { -webkit-text-fill-color: var(--bronze-l); }

/* 벌집: 천천히 숨쉬듯 떠다니고, 가운데는 빛을 냄 */
.hero__art .hive-comb { transform: translate3d(var(--ax, 0), var(--ay, 0), 0); transition: transform .8s var(--ease); }
.hero .hive-comb__cell { transform-box: fill-box; transform-origin: center; animation: bob 6s ease-in-out infinite; }
.hero .hive-comb__cell:nth-of-type(2) { animation-delay: -1s; }
.hero .hive-comb__cell:nth-of-type(3) { animation-delay: -2s; }
.hero .hive-comb__cell:nth-of-type(4) { animation-delay: -3s; }
.hero .hive-comb__cell:nth-of-type(5) { animation-delay: -4s; }
.hero .hive-comb__cell:nth-of-type(6) { animation-delay: -5s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero .hive-comb__cell polygon { animation: cellGlow 6s ease-in-out infinite; animation-delay: inherit; }
@keyframes cellGlow { 0%, 100% { stroke: rgba(198,166,122,.42); } 50% { stroke: rgba(227,207,175,.95); } }
.hero .hive-comb__core { animation: corePulse 3.6s ease-in-out infinite; }
@keyframes corePulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(198,166,122,0)); } 50% { filter: drop-shadow(0 0 22px rgba(227,207,175,.75)); } }
.hero__ring { animation: spin 90s linear infinite; }
.hero__ring polygon + polygon { animation: spin 60s linear infinite reverse; transform-origin: 200px 200px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 식스 툴 색인: 마우스를 올리면 금빛 밑줄 */
.hero__tools li { position: relative; transition: background-color .4s var(--ease); }
.hero__tools li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.hero__tools li:hover { background: rgba(198,166,122,.06); }
.hero__tools li:hover::after { transform: scaleX(1); }
.hero__tools li + li:hover::after { left: 0; }

/* ---------- 흐르는 띠 ---------- */
.marquee { position: relative; display: flex; overflow: hidden; padding: 22px 0; background: var(--dark); border-top: 1px solid var(--dark-line); user-select: none; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--dark), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--dark), transparent); }
.marquee__track { flex: none; display: flex; align-items: center; gap: 22px; padding-right: 22px; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__ko { font-size: 22px; font-weight: 300; letter-spacing: -.03em; color: var(--ivory); white-space: nowrap; }
.marquee__en { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--gold); white-space: nowrap; }
.marquee__hex { width: 14px; height: 14px; margin: 0 10px; flex: none; }
.marquee__hex polygon { fill: none; stroke: var(--bronze-l); stroke-width: 1.4; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (max-width: 640px) { .marquee { padding: 16px 0; } .marquee__ko { font-size: 17px; } .marquee__en { font-size: 20px; } .marquee::before, .marquee::after { width: 48px; } }

/* ---------- 마우스를 따라오는 빛 (짙은 구역) ---------- */
.spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(227,207,175,.14), transparent 60%); }
.is-spot .spot { opacity: 1; }
.sec--dark > .wrap, .cta > .wrap, .hero > .wrap { position: relative; z-index: 1; }

/* 배경에 크게 흐르는 영문 글자 */
.ghost-word { position: absolute; left: 0; top: 50%; z-index: 0; margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(120px, 22vw, 340px); line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(198,166,122,.16); pointer-events: none; transform: translate3d(var(--gx, 0), -50%, 0); will-change: transform; }
.ghost-word--cta { -webkit-text-stroke-color: rgba(198,166,122,.1); }
.sec--dark, .cta { overflow: hidden; }

/* CTA 육각형 회전 */
.cta__hex { animation: spin 80s linear infinite; }

/* ---------- 순차 등장 ---------- */
.js .stagger.reveal { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease), background-color .3s, box-shadow .4s; transition-delay: calc(var(--i, 0) * .09s); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
/* 머리표 선이 그어짐 */
.js .reveal .kicker::before { transition: width .9s var(--ease) .2s, background-size .9s var(--ease) .2s; }
.js .reveal:not(.is-in) .kicker:not(.kicker--plain)::before { background-size: 0 1px; }
/* 흐름 선이 그어짐 (넓은 화면) */
@media (min-width: 861px) {
  .js .flow.stagger li { border-top-color: transparent; background: linear-gradient(rgba(29,24,19,.7), rgba(29,24,19,.7)) 0 -1px / 0 1px no-repeat; transition: opacity .8s var(--ease), transform .8s var(--ease), background-size 1s var(--ease); transition-delay: calc(var(--i, 0) * .15s); }
  .js .flow.stagger.is-in li { background-size: 100% 1px; }
}
/* 큰 숫자 번쩍 */
.js .checks3.is-in li::before { animation: numGlow 2.4s var(--ease) both; animation-delay: calc(var(--i, 0) * .2s + .3s); }
@keyframes numGlow { 0% { opacity: 0; transform: translateY(20px); text-shadow: none; } 60% { opacity: 1; text-shadow: 0 0 28px rgba(227,207,175,.55); } 100% { opacity: 1; transform: none; text-shadow: none; } }

/* ---------- 반응하는 카드 ---------- */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .5s var(--ease), background-color .3s, box-shadow .4s; will-change: transform; }
.js .stagger.is-in > .tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: opacity .8s var(--ease), transform .5s var(--ease), background-color .3s, box-shadow .4s; }
.tilt.is-tilting { transition-duration: .12s, .12s; z-index: 2; box-shadow: 0 30px 60px -30px rgba(29,24,19,.45); background-color: var(--white); }
.tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(198,166,122,.18), transparent 55%); }
.tilt.is-tilting::after { opacity: 1; }
.cards--4 > .card.tilt::after { top: 0; height: auto; width: auto; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(198,166,122,.18), transparent 55%); }
.cards--4 > .card::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--bronze-l); transition: width .6s var(--ease); }
.cards--4 > .card:hover::before { width: 100%; }
.paths li, .card, .app-card, .trio li, .who li { position: relative; }
.paths .hex { transition: transform .8s var(--ease); }
.paths li:hover .hex { transform: rotate(180deg) scale(1.15); }
.paths li:hover .hex polygon { fill: rgba(198,166,122,.25); }

/* ---------- 버튼 ---------- */
.btn { overflow: hidden; isolation: isolate; }
.btn--gold::after, .btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: sweep 4.5s ease-in-out infinite; }
.btn--primary::after { background: linear-gradient(100deg, transparent, rgba(227,207,175,.25), transparent); animation-delay: 1.5s; }
@keyframes sweep { 0%, 60% { left: -60%; } 100% { left: 140%; } }
.magnetic { transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s; transform: translate3d(var(--bx, 0), var(--by, 0), 0); }
.btn--line::before, .btn--ghost::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--espresso); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .4s var(--ease); }
.btn--ghost::before { background: rgba(198,166,122,.16); }
.btn--line:hover, .btn--ghost:hover { background: transparent; }
.btn--line:hover::before, .btn--ghost:hover::before { transform: scaleY(1); }

/* 머리말 메뉴 밑줄 */
.gnb__list a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--bronze-l); transform: scaleX(0); transition: transform .35s var(--ease); }
.gnb__list a:hover::before { transform: scaleX(1); }
@media (max-width: 960px) { .gnb__list a::before { display: none; } }

/* 결과 목록: 마우스를 올리면 금빛 바 */
.result-list li { position: relative; }
.result-list li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--bronze); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.result-list li:hover::after { transform: scaleX(1); }

/* 벌집 패널: 글자 바뀔 때 살짝 떠오름 */
.comb-panel__name.is-swap, .comb-panel__short.is-swap, .comb-panel__no.is-swap { animation: swapIn .6s var(--ease); }
@keyframes swapIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.comb-panel .hive-comb__cell polygon { transition: fill .5s var(--ease), stroke .5s var(--ease); }

/* 서브 페이지 머리: 은은한 빛 이동 */
.ph { overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: -30%; pointer-events: none; background: radial-gradient(30% 30% at 70% 30%, rgba(198,166,122,.18), transparent 70%); animation: aurora 26s ease-in-out infinite alternate; }
.ph > .wrap { position: relative; }

/* ---------- 움직임 줄이기 설정 기기: 부드러운 모드 ----------
   (2026-10-26 3차) 사이트 성격상 연출은 대부분 유지하고, 어지러움을 줄 수 있는
   큰 시차 이동(배경 글자·첫 화면 스크롤 이동)과 머리말 숨김만 끈다. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ghost-word { display: none; }
  .hd.is-hidden { transform: none; }
  .hero__in { transform: none !important; opacity: 1 !important; }
}