/* ============ Fonts ============ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Manrope:wght@400;700&display=swap');

/* ============ Theme Tokens ============ */
:root{
  --text: hsl(0 0% 99%);
  --textDim: hsl(0 0% 62%);
  --bg: hsl(0 0% 7%);

  --pri: hsl(155 100% 65%);
  --priFg: hsl(155 100% 85%);
  --priBg: hsl(155 100% 65% / .12);
  --priHi: hsl(155 100% 75% / .35);

  --sec: hsl(156 51% 14%);
  --secFg: hsl(156 51% 75%);
  --secBg: hsl(156 51% 14% / .14);
  --secHi: hsl(156 51% 30% / .55);

  --acc: hsl(155 100% 94%);
  --accFg: hsl(155 100% 94%);
  --accBg: hsl(155 100% 94% / .12);
  --accHi: hsl(155 100% 100% / .35);

  --glass: rgb(255 255 255 / 6%);
  --glass-bd: rgb(255 255 255 / 14%);
  --shadow: 0 10px 30px rgb(0 0 0 / 35%);

  --chip-h: clamp(44px, 6vw, 54px);
  --chip-w: clamp(116px, 28vw, 176px);
  --r: 14px;
}

/* ============ Reset/Base ============ */
*{ box-sizing:border-box; margin:0; padding:0 }
html, body{ height:100% }
body{
  font-family:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden; /* 화면 밖은 잘림 (스크롤 X) */
}

/* 배경 */
.grid{
  position:fixed; inset:0; display:grid; place-items:center; z-index:-2; pointer-events:none;
}
.grid-svg{ width:min(92vmin, 1200px); height:auto; opacity:.6 }
.blur{
  position:absolute; width:14rem; height:14rem; background:var(--pri);
  filter: blur(110px); border-radius:50%; opacity:.7;
}

.deco{
  position:fixed; z-index:-1; opacity:.45; pointer-events:none; user-select:none;
}
.deco.top-right{ top:0; right:0; max-width:45vmin }
.deco.bottom-left{ bottom:0; left:0; max-width:45vmin }

/* ============ Stage / Group ============ */
.hero{
  position:relative;
  inline-size:min(1200px, 100%);
  block-size:100svh;
  margin-inline:auto;
  display:grid; place-items:center;
  text-align:center;
  padding-block: clamp(24px, 6vh, 64px);
}

.group{
  display:grid; place-items:center;
  gap: clamp(16px, 3.2vh, 28px);
  z-index:5;
}

.title{
  font-family:'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700; letter-spacing:-.04em;
  font-size: clamp(2.8rem, 8.6vw, 6.8rem);
}
.title span{ display:inline-block }

/* ============ Dock (한 줄 고정, 가로 스크롤) ============ */
.dock{
  display:flex;
  flex-wrap: nowrap;           /* 줄바꿈 금지 */
  white-space: nowrap;         /* 텍스트도 줄바꿈 금지 */
  justify-content:center; align-items:center;
  gap:10px; padding:8px 14px; margin:0;
  border-radius:999px; background:var(--glass);
  border:1px solid var(--glass-bd);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: var(--shadow);
  max-width: min(100%, 760px);
  overflow-x: auto;            /* 넘치면 수평 스크롤 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* Firefox */
}
.dock::-webkit-scrollbar{ display:none } /* WebKit */

.dock .menu{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px;
  border-radius:12px; text-decoration:none;
  color:var(--textDim); font-weight:700;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.dock .menu:hover, .dock .menu:focus-visible{
  color:var(--text);
  background:var(--priBg);
  outline: none;
}
.dock .menu:active{ transform: translateY(1px) }

/* ============ Float Layer ============ */
.float-layer{
  position:absolute; inset:0; z-index:3;
  pointer-events:none; /* 컨테이너는 통과, 요소만 클릭 */
}
.floater{
  position:absolute;
  transform: translate3d(0,0,0);
  will-change: transform;
  pointer-events:auto; /* 링크 클릭 가능 */
  text-decoration:none;
}
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--chip-h); width: var(--chip-w);
  border-radius: var(--r);
  padding-inline: 12px;
  border: 1px solid var(--glass-bd);
  background: var(--glass);
  color: var(--text);
  font-weight: 800;
  letter-spacing: .01em;
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    inset 0 -6px 18px rgb(255 255 255 / 8%),
    0 8px 24px rgb(0 0 0 / 36%);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  user-select: none;
}

/* 테마별 */
.youtube .chip{
  background: var(--priBg);
  color: var(--priFg);
  box-shadow: inset 0 -6px 20px var(--priHi), 0 10px 28px rgb(0 255 150 / 35%);
}
.blog .chip{
  background: var(--accBg);
  color: var(--accFg);
  box-shadow: inset 0 -6px 20px var(--accHi), 0 10px 28px rgb(255 255 255 / 28%);
}
.n623 .chip{
  background: var(--secBg);
  color: var(--secFg);
  box-shadow: inset 0 -6px 20px var(--secHi), 0 10px 28px rgb(0 0 0 / 28%);
}

/* 상호작용 */
.floater:hover .chip{
  transform: scale(1.06);
  box-shadow: inset 0 -6px 24px rgb(255 255 255 / 12%), 0 14px 34px rgb(0 0 0 / 44%);
}
.floater:active .chip{ transform: scale(.95) }
.floater:focus-visible .chip{ outline: 2px solid var(--pri); outline-offset: 4px }

/* 접근성 */
@media (prefers-reduced-motion: reduce){
  .floater{ animation: none !important }
  .chip{ transition: none !important }
}

/* 작은 화면에서도 Nav는 항상 한 줄 */
@media (max-width: 560px){
  .title{ font-size: clamp(2.4rem, 10vw, 4.2rem) }
  .dock{ gap: 8px; padding: 8px 10px }
  .chip{ height: clamp(42px, 8vw, 48px); width: clamp(120px, 48vw, 164px) }
}