/* ========================================================= Sulwhasoo · Header (Arc Navigation) — 독립 컴포넌트 header.html에서 분리된 스타일입니다. ========================================================= */
:root {
  --orange: #E86E25;
  --line: rgba(255, 255, 255, .85);
  --label: #FFFFFF;
  --blur: 11px;
  --font-display: "Playfair Display", "Cormorant Garamond", serif;
  --font-ui: "Pretendard", -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #FBFAF8;
  font-family: var(--font-ui);
  color: #2A2622;
}

/* ── 고정 헤더 ─────────────────────────────── */
.arc_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  pointer-events: none;
  /* 오렌지 영역 밖은 아래 콘텐츠가 받도록 */
  line-height: 0;
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* 아래로 스크롤하면 헤더 자체를 위로 밀어 완전히 감춘다 */
.arc_nav.is_hidden {
  transform: translateY(-100%);
}

.arc_nav svg {
  display: block;
  width: 75%;
  margin: 0 auto;
  height: auto;
  overflow: visible;
}

/* 히트 영역: 오렌지 타원만 호버 감지 */
.hit {
  fill: transparent;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  /* 드래그 제스처를 페이지 스크롤이 가로채지 않도록 */
}

.arc_nav.is_dragging .hit {
  cursor: grabbing;
}

/* 워드마크 — 고정. 원이 커져도 움직이지 않는다 */
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  fill: #FFFFFF;
  letter-spacing: .01em;
  pointer-events: none;
  user-select: none;
}

/* 워드마크 링크 — 글자 모양 위에서만 클릭을 받는다. pointer-events:none인 위 .wordmark 규칙을 덮어써야 한다 — 그렇지 않으면 클릭이 아래 #hit(오렌지 영역 드래그 감지)로 그대로 통과해 버려서, 드래그 없이 클릭만 해도 다이얼이 "제자리(0)"로 스냅되며 가운데 항목(ABOUT) 페이지로 이동해버리는 문제가 있었다. */
#link_wordmark {
  cursor: pointer;
}

#link_wordmark .wordmark {
  pointer-events: auto;
}

/* 글자 주변 여백까지 포함한 넉넉한 클릭 영역 — header.js가 워드마크
   bbox 기준으로 크기를 계산해 넣는다. 이게 있어야 로고를 클릭했을 때
   클릭이 아래 #hit로 새어나가 가운데(ABOUT)로 이동하는 문제가 없다. */
.wordmark_hit {
  fill: transparent;
  pointer-events: auto;
  cursor: pointer;
}

.arc_line {
  fill: none;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  transition: opacity .35s ease;
}

.label {
  font-family: var(--font-ui);
  font-weight: 300;
  fill: var(--label);
  letter-spacing: .14em;
  pointer-events: auto;
  cursor: pointer;
  opacity: var(--rest-op, 1);
  transition: opacity .35s cubic-bezier(.22, 1, .36, 1);
}

/* 작은(서브메뉴) 상태 — 기본은 반투명, 호버하면 밝아진다 */
.label_side {
  --rest-op: .5;
}

/* 큰(활성) 상태 — 평소엔 완전히 숨어 있다가, 해당 항목이 활성화될 때만 나타난다 */
.label.lbl_big {
  opacity: 0;
  pointer-events: none;
  letter-spacing: .06em;
  transition: opacity .38s cubic-bezier(.22, 1, .36, 1);
}

a.is_active .label.lbl_big {
  opacity: 1;
  pointer-events: auto;
}

a.is_active .label.lbl_small {
  opacity: 0 !important;
  pointer-events: none;
}

/* 하나에 호버하면 그 라벨만 완전 불투명, 나머지는 더 옅어진다 */
.arc_nav:has(.label:hover) .label.lbl_small {
  opacity: .35;
}

.arc_nav .label:hover {
  opacity: 1;
  fill: #FFFFFF;
  font-weight: 500;
  filter: drop-shadow(0 0 1px #FFFFFF) drop-shadow(0 0 10px rgba(255, 255, 255, .65));
}

/* SVG <a> 자체의 기본 포커스 사각형(클릭 시 검은 테두리) 제거 — 키보드 포커스 표시는 .label:focus-visible이 대신한다 */
.arc_nav a {
  outline: none;
}

.label:focus-visible {
  outline: 1.5px solid #FFFFFF;
  outline-offset: 5px;
  border-radius: 2px;
}

/* ── 데모 콘텐츠 ───────────────────────────── */
.demo {
  max-width: 640px;
  margin: 0 auto;
  padding: 58vh 32px 40vh;
}

.demo h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 1.2rem;
}

.demo p {
  font-size: 1rem;
  line-height: 1.95;
  color: #6B635B;
  margin: 0 0 1.6rem;
  max-width: 46ch;
}

@media (prefers-reduced-motion: reduce) {
  .label {
    transition: none;
  }

  .arc_nav {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}