/* ==========================================================
   components.css - 디자인 시스템 부품
   모든 페이지에서 같은 모양으로 씁니다. 목록은 design-system.html에서 볼 수 있어요.

   1. 로고: LINKER / PARTNERS 2줄 워드마크
   2. 헤더
   3. 언어
   4. 메뉴 서랍
   5. 버튼
   6. 텍스트 링크 · 글자 롤
   7. 유리 재료
   8. 입력창
   9. 등장 효과
   10. 국가 경로
   11. 마무리 · 푸터
   12. 첫 접속 인트로 (intro.js)
   13. 페이지 전환 막 (main.js)
   14. 커서 (motion.js)
   15. 활기 더하기
   ========================================================== */

/* ---------- 1. 로고: LINKER / PARTNERS 2줄 워드마크 ----------
   로고는 SVG 파일 그대로만 씁니다. 크기·색·비율을 CSS로 바꾸지 마세요. (DESIGN.md 로고 규정) */
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.logo img {
  display: block;
  width: auto;
  height: auto;
}

/* ---------- 2. 헤더 ----------
   로고 · 언어 · 상담 문의 · 메뉴 버튼만. 메뉴 항목은 메뉴 서랍(4)에 있습니다.
   내려가면 위로 숨고, 올라가면 불투명한 흰색 띠로 다시 내려옵니다(사진 위에서도 비치지 않음). */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  transition:
    transform var(--dur-5) var(--ease-expo),
    background-color var(--dur-4) var(--ease-standard),
    box-shadow var(--dur-4) var(--ease-standard),
    height var(--dur-4) var(--ease-emphasized),
    opacity var(--dur-5) var(--ease-standard);
}

.site-header.is-scrolled {
  height: 60px;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* 메뉴가 열리면 헤더는 투명하게, 메뉴 버튼만 남김 (나머지는 서랍 안에 있음) */
.site-header.is-open {
  transform: none;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header.is-open .header-actions > :not(.menu-toggle) {
  opacity: 0;
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 100%;
}

/* 헤더 가운데 환율 띠 (ticker.js): 남는 폭을 채우고 양끝이 옅어지며 옆으로 흐름. 글자색은 헤더 색을 그대로 이어받음 */
.header-ticker {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 700ms var(--ease-standard);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.header-ticker.is-ready {
  opacity: 0.85;
}

.site-header.is-open .header-ticker {
  opacity: 0;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-run 60s linear infinite;
}

.header-ticker:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes ticker-run {
  to {
    transform: translateX(-50%);
  }
}

.ticker-run {
  display: flex;
  align-items: center;
  flex: none;
}

.ticker-item,
.ticker-note {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-right: var(--space-7);
  font-size: var(--text-label-m);
  white-space: nowrap;
}

.ticker-id {
  font-family: var(--font-brand);
  font-size: var(--text-label-s);
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.ticker-chg {
  font-size: var(--text-label-s);
  color: var(--ink-2);
}

.ticker-chg.is-up {
  color: var(--gold-140);
}

.ticker-note {
  font-size: var(--text-label-s);
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

@media (max-width: 1100px), (prefers-reduced-motion: reduce) {
  .header-ticker {
    display: none;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px; /* 눈에 보이는 간격: 지구본 ↔ 글자 20px, 글자 ↔ 메뉴 선 25px (버튼 칸 안쪽 여백 포함) */
  margin-left: auto;
}

.header-actions > * {
  transition: opacity var(--dur-3) var(--ease-standard);
}

.header-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: 40px;
  padding-top: 2px; /* 글자의 눈높이를 지구본 · 메뉴 선의 가운데에 맞춤(언어마다 아래에서 보정) */
  font-size: var(--text-label-l);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

/* 메뉴 버튼: 도형 없이 두 줄만(누르는 자리는 48px). 올리면 아래 줄이 길어지고, 열리면 두 줄이 X로 모임 */
.menu-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  transition: transform var(--dur-1) var(--ease-out);
}

.menu-toggle:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .menu-toggle:hover .menu-toggle-lines::after {
    transform: scaleX(1);
  }
}

.menu-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.menu-toggle-lines {
  position: relative;
  width: 18px;
  height: 7px;
}

.menu-toggle-lines::before,
.menu-toggle-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.25px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-4) var(--ease-drawer);
}

.menu-toggle-lines::before {
  top: 0;
}

.menu-toggle-lines::after {
  bottom: 0;
  transform-origin: left;
  transform: scaleX(0.6);
}

/* X: 두 줄이 가운데로 모이며 엇갈림 */
.menu-toggle[aria-expanded="true"] .menu-toggle-lines::before,
.cv-close .menu-toggle-lines::before {
  transform: translateY(2.9px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-lines::after,
.cv-close .menu-toggle-lines::after {
  transform-origin: center;
  transform: translateY(-2.9px) rotate(-45deg);
}

@media (max-width: 640px) {
  .header-actions {
    gap: var(--space-4);
  }

  .header-actions .header-link {
    display: none;
  }
}

/* ---------- 3. 언어 ----------
   헤더: 지구본 하나만 보임(도형 · 테두리 · 배경 없음). 마우스를 올리거나 누르면 **지구본 자리에** 영어 글자만
   Korean  Japanese  English 로 나타남(지구본은 사라짐). 글자색은 헤더 글자색 그대로라 바탕과 늘 대비됨
   (사진 위에서는 흰색, 흰 바탕에서는 잉크). 지금 언어는 또렷하고 나머지는 옅게. 오른쪽 글자부터 60ms 간격으로 나타남.
   열리면 칸이 넓어지며 옆의 "상담 문의"를 왼쪽으로 밀어냄(가리거나 사라지지 않음). 메뉴 안에서는 KO · JA · EN 글자 전환 */
.lang-menu {
  position: relative;
  width: 40px;
  height: 40px;
  transition: width 420ms var(--ease-expo);
}

/* 열리면 글자가 놓일 만큼 넓어져 옆의 "상담 문의"를 가리지 않고 왼쪽으로 밀어냄 */
.lang-menu.is-open {
  width: calc(var(--n) * 2.1rem + (var(--n) - 1) * var(--space-4));
}

.lang-trigger {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: inherit;
  transition:
    opacity 160ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.lang-trigger svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
}

.lang-menu.is-open .lang-trigger {
  opacity: 0;
  transform: scale(0.8);
}

.lang-list {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 40px;
  gap: var(--space-4);
  color: inherit;
  visibility: hidden;
  transition: visibility 0s linear 160ms;
}

.lang-menu.is-open .lang-list {
  visibility: visible;
  transition: visibility 0s;
}

.lang-list button {
  white-space: nowrap;
  font-family: var(--font-brand);
  font-size: var(--text-label-l);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  color: inherit;
  opacity: 0;
  transform: translateX(12px);
  transition:
    opacity 120ms var(--ease-out),
    transform 120ms var(--ease-out);
}

.lang-menu.is-open .lang-list button {
  opacity: 0.55;
  transform: none;
  transition:
    opacity 300ms var(--ease-out) calc(60ms + (var(--n) - 1 - var(--i)) * 60ms),
    transform 360ms var(--ease-out) calc(60ms + (var(--n) - 1 - var(--i)) * 60ms);
}

.lang-menu.is-open .lang-list button[aria-pressed="true"] {
  opacity: 1;
  font-weight: var(--fw-medium);
}

@media (hover: hover) and (pointer: fine) {
  .lang-menu.is-open .lang-list button:hover {
    opacity: 1;
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-list button,
  .lang-menu.is-open .lang-list button {
    transform: none;
    transition-delay: 0s;
  }
}

/* 메뉴 안: KO · JA · EN 글자만. 고른 언어 아래에 선 하나 */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-brand);
  font-size: var(--text-label-m);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
}

.lang-switch button {
  position: relative;
  min-width: 32px;
  min-height: 36px;
  color: var(--ink-3);
  transition: color var(--dur-2) var(--ease-standard);
}

.lang-switch button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 14px;
  height: 1px;
  margin-left: -7px;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform var(--dur-4) var(--ease-expo);
}

.lang-switch button:hover,
.lang-switch button[aria-pressed="true"] {
  color: var(--ink);
}

.lang-switch button[aria-pressed="true"]::after {
  transform: none;
}

/* ---------- 4. 메뉴 서랍 ----------
   오른쪽에서 흰 서랍이 미끄러져 들어옴(0.9초). 뒤의 페이지는 아주 옅게 가라앉고 살짝만 흐려짐(흐림 2px, 어둡기 10%라 눈이 아프지 않음).
   서랍 안: 라벨 → 페이지 목록(줄마다 선이 그려지고 이름이 솟아오름) → 알림 줄(서울 · 도쿄 시각, 오늘의 환율, 최신 글) → 연락처 · 언어 · 상담 버튼.
   올린 줄만 또렷하고 나머지는 살짝 옅어짐. 빈 곳을 누르거나 Esc로 닫힘 */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  visibility: hidden;
  transition: visibility 0s linear 900ms;
}

.menu.is-open {
  visibility: visible;
  transition: none;
}

/* 흐림 값(2px)은 고정해 두고 막의 투명도만 바꿈: 흐림 값을 움직이면 뒤 페이지 전체가 매 프레임 다시 그려져 끊김 */
.menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(27 26 23 / 0.1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  will-change: opacity;
  transition: opacity 600ms var(--ease-standard);
}

.menu.is-open .menu-backdrop {
  opacity: 1;
}

.menu-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(32rem, 100vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  box-shadow:
    -1px 0 0 var(--line),
    -40px 0 90px rgb(27 26 23 / 0.07);
  transform: translate3d(100%, 0, 0);
  will-change: transform;
  contain: layout paint;
  transition: transform 700ms var(--ease-drawer);
}

.menu.is-open .menu-panel {
  transform: translate3d(0, 0, 0);
  transition: transform 900ms var(--ease-expo);
}

.menu-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: calc(var(--header-h) + var(--space-5)) clamp(1.5rem, 1rem + 2.4vw, 2.75rem) clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}

.menu-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-label-m);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity 200ms var(--ease-standard);
}

.menu-eyebrow i {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}

.menu.is-open .menu-eyebrow {
  opacity: 1;
  transition: opacity 700ms var(--ease-standard) 350ms;
}

.menu.is-open .menu-eyebrow i {
  transform: none;
  transition: transform 1200ms var(--ease-expo) 400ms;
}

/* 페이지 목록: 번호 · 이름 · 한 줄 설명 · 화살표. 줄마다 위 가는 선이 왼쪽에서 그려지고 이름은 가림막 안에서 솟아오름 */
.menu-list {
  display: grid;
  counter-reset: mn;
}

.menu-list li {
  position: relative;
  overflow: hidden;
  counter-increment: mn;
}

.menu-list li::before,
.menu-list li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  transform-origin: left;
}

.menu-list li::before {
  top: 0;
  background: var(--line-strong);
  transform: scaleX(0);
  transition: transform 300ms var(--ease-standard);
}

.menu.is-open .menu-list li::before {
  transform: none;
  transition: transform 1100ms var(--ease-expo) calc(250ms + var(--i, 0) * 70ms);
}

.menu-list li:last-child {
  box-shadow: inset 0 -1px 0 var(--line);
}

.menu-list li::after {
  bottom: 0;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 700ms var(--ease-expo);
}

.menu-list a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 22px;
  grid-template-areas:
    "no name arrow"
    ". desc arrow";
  align-items: center;
  column-gap: var(--space-4);
  padding-block: clamp(0.6rem, 1.3vh, 0.95rem);
}

.menu-list a::before {
  grid-area: no;
  content: counter(mn, decimal-leading-zero);
  align-self: start;
  padding-top: 0.55em;
  font-family: var(--font-brand);
  font-size: var(--text-label-m);
  letter-spacing: 0.14em;
  color: var(--ink-3);
  opacity: 0;
  transition:
    opacity 200ms var(--ease-standard),
    color var(--dur-3) var(--ease-standard);
}

.menu.is-open .menu-list a::before {
  opacity: 1;
  transition:
    opacity 700ms var(--ease-standard) calc(450ms + var(--i, 0) * 70ms),
    color var(--dur-3) var(--ease-standard);
}

.menu-name,
.menu-desc {
  overflow: hidden;
  opacity: 0;
  transform: translateY(60%);
  transition:
    transform 220ms var(--ease-standard),
    opacity 160ms var(--ease-standard);
}

.menu.is-open .menu-name,
.menu.is-open .menu-desc {
  opacity: 1;
  transform: none;
}

.menu-name {
  grid-area: name;
  padding-block: 0.1em;
  font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
  color: var(--ink);
}

.menu.is-open .menu-name {
  transition:
    transform 1100ms var(--ease-expo) calc(300ms + var(--i, 0) * 70ms),
    opacity 700ms var(--ease-standard) calc(300ms + var(--i, 0) * 70ms);
}

.menu-desc {
  grid-area: desc;
  font-size: var(--text-body-s);
  color: var(--ink-3);
}

.menu.is-open .menu-desc {
  transition:
    transform 1100ms var(--ease-expo) calc(400ms + var(--i, 0) * 70ms),
    opacity 800ms var(--ease-standard) calc(400ms + var(--i, 0) * 70ms);
}

.menu-list .btn-icon {
  grid-area: arrow;
  justify-self: end;
  width: 20px;
  height: 20px;
  color: var(--accent-strong);
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity var(--dur-3) var(--ease-standard),
    transform var(--dur-4) var(--ease-expo);
}

/* 지금 보고 있는 페이지: 번호와 이름 옆 금빛 점 */
.menu-list a[aria-current="page"]::before {
  color: var(--accent-strong);
}

.menu-list a[aria-current="page"] .menu-name::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--space-3);
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

@media (hover: hover) and (pointer: fine) {
  .menu.is-open .menu-list:hover li:not(:hover) a {
    opacity: 0.42;
    transition: opacity var(--dur-4) var(--ease-standard);
  }

  .menu-list a {
    transition: opacity var(--dur-4) var(--ease-standard);
  }

  .menu-list li:hover::after {
    transform: none;
  }

  .menu.is-open .menu-list a:hover .menu-name {
    transform: translateX(8px);
    transition: transform 600ms var(--ease-expo);
  }

  .menu-list a:hover::before {
    color: var(--accent-strong);
  }

  .menu-list a:hover .btn-icon {
    opacity: 1;
    transform: none;
  }
}

.menu-list a:focus-visible .btn-icon {
  opacity: 1;
  transform: none;
}

/* 알림 줄: 서울 · 도쿄 시각과 상담 가능 여부, 오늘의 환율, 최신 글 (여백에 더해 주는 정보) */
.menu-info {
  display: grid;
  margin-top: var(--space-7);
  font-size: var(--text-label-l);
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 200ms var(--ease-standard),
    transform 200ms var(--ease-standard);
}

.menu.is-open .menu-info {
  opacity: 1;
  transform: none;
  transition:
    opacity 800ms var(--ease-standard) 800ms,
    transform 1100ms var(--ease-expo) 800ms;
}

.menu-info > * {
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}

.menu-info .menu-clock .closing-time {
  font-size: var(--text-body-l);
}

.menu-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-5);
}

.menu-row[hidden] {
  display: none;
}

.menu-news-title {
  flex: 1 1 12rem;
  min-width: 0;
  text-align: right;
  color: var(--ink);
  transition: color var(--dur-3) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .menu-news:hover .menu-news-title {
    color: var(--accent-strong);
  }
}

.menu-foot {
  display: grid;
  gap: var(--space-5);
  margin-top: auto;
  padding-top: var(--space-7);
  opacity: 0;
  transition: opacity 200ms var(--ease-standard);
}

.menu.is-open .menu-foot {
  opacity: 1;
  transition: opacity 900ms var(--ease-standard) 950ms;
}

.menu-reach {
  display: grid;
  gap: var(--space-1);
}

.menu-label {
  font-size: var(--text-label-m);
  color: var(--ink-3);
}

.menu-mail,
.menu-tel {
  font-family: var(--font-brand);
  font-size: var(--text-title-m);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.menu-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

@media (max-width: 640px) {
  .menu-side .btn {
    width: 100%;
  }
}

/* ---------- 5. 버튼 ----------
   알약형 하나. 마우스를 올리면 유리 위로 빛줄기가 비스듬히 스쳐 가고(0.9초), 글자가 위로 굴러 바뀜 */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-label-l);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    color var(--dur-2) var(--ease-standard),
    background-color var(--dur-4) var(--ease-standard),
    transform var(--dur-1) var(--ease-out);
}

/* 빛줄기: 비스듬한 흰 띠가 왼쪽 밖에서 오른쪽 밖으로 */
.btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 60%;
  background: linear-gradient(105deg, transparent 20%, rgb(255 255 255 / 0.42) 50%, transparent 80%);
  transform: translateX(-120%) skewX(-12deg);
  pointer-events: none;
}

.btn:active {
  transform: scale(0.97);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* 기본: 골드 (화면마다 가장 중요한 행동 하나). 위쪽에 얇은 빛 반사 */
.btn--primary {
  background: var(--accent-strong);
  color: var(--base-white);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 -1px 0 rgb(0 0 0 / 0.08),
    var(--shadow-1);
}

/* 유리: 빛 위에서 쓰는 보조 버튼 */
.btn--glass {
  color: var(--ink);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    inset 0 1px 0 var(--glass-stroke),
    0 0 0 1px var(--glass-edge);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--accent-strong-hover);
  }

  .btn--glass:hover {
    background: var(--glass-fill-strong);
  }

  .btn:hover::before {
    transform: translateX(260%) skewX(-12deg);
    transition: transform 900ms var(--ease-expo);
  }
}

.btn-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-4) var(--ease-expo);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn-icon,
  .text-link:hover .btn-icon {
    transform: translateX(4px);
  }
}

/* ---------- 6. 텍스트 링크 · 글자 롤 ---------- */
/* 텍스트 링크: 1px 밑줄. 마우스를 올리면 밑줄이 오른쪽으로 걷혔다가 왼쪽에서 다시 그려짐 */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--text-label-l);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover::after {
    animation: link-redraw 900ms var(--ease-expo);
  }
}

@keyframes link-redraw {
  0% {
    transform: scaleX(1);
    transform-origin: right;
  }
  40% {
    transform: scaleX(0);
    transform-origin: right;
  }
  41% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.inline-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-30);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition:
    color var(--dur-3) var(--ease-standard),
    text-decoration-color var(--dur-2) var(--ease-standard);
}

.inline-link:hover {
  text-decoration-color: var(--ink);
}

/* 글자 롤: <span class="roll"><span>글자</span></span>
   글자 바로 아래에 같은 글자의 그림자 복사본이 있고, 마우스를 올린 부모 안에서 한 줄 위로 굴러감 */
.roll {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.3;
}

.roll > span {
  display: inline-block;
  text-shadow: 0 1.3em currentColor;
  transition: transform var(--dur-4) var(--ease-expo);
}

@media (hover: hover) and (pointer: fine) {
  :is(a, button):hover > .roll > span,
  :is(a, button):hover > * > .roll > span {
    transform: translateY(-1.3em);
  }
}

/* ---------- 7. 유리 재료 ---------- */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 1px 0 var(--glass-stroke),
    0 0 0 1px var(--glass-edge),
    var(--shadow-2);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass-sheen);
  pointer-events: none;
}

.glass--lit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--glass-caustic);
  pointer-events: none;
}

}

/* ---------- 8. 입력창 ---------- */
.field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.field-label {
  font-size: var(--text-label-m);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
}

.input {
  width: 100%;
  min-height: 52px;
  height: 52px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--glass-fill-strong);
  box-shadow:
    inset 0 0 0 1px var(--line-strong),
    inset 0 1px 2px var(--ink-5);
  font: inherit;
  color: var(--ink);
  transition: box-shadow var(--dur-2) var(--ease-standard);
}

textarea.input {
  height: auto;
  min-height: 140px;
  resize: vertical;
}

select.input {
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%232a2722' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}

.input::placeholder {
  color: var(--ink-60);
}

.input:hover {
  box-shadow:
    inset 0 0 0 1px var(--ink-40),
    inset 0 1px 2px var(--ink-5);
}

.input:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1.5px var(--ink),
    0 0 0 4px var(--wash);
}

.field-hint {
  font-size: var(--text-label-s);
  color: var(--ink-3);
}

.field.is-error .input {
  box-shadow:
    inset 0 0 0 1.5px var(--danger),
    0 0 0 4px var(--danger-ring);
}

.field.is-error .field-hint {
  color: var(--danger);
}

/* ---------- 9. 등장 효과 ----------
   유리의 결: 모든 등장은 '김 서린 유리가 걷히듯' 흐림에서 또렷해짐.
   기본은 보이는 상태. JS가 html에 .js를 붙이고, 화면에 들어오면 .is-inview를 붙임.
   - focus : 줄마다 흐림(18px)이 걷히며 또렷해짐 (첫 화면 제목). 줄은 i18n.js가 감쌈
   - lines : 줄마다 자기 자리 아래에서 떠오름 (제목)
   - rise  : 20px 아래에서 흐림(12px)이 걷히며 떠오름 (문단 · 목록)
   - fade  : 제자리에서 나타남
   - draw  : 선이 그려짐
   순서: --i(차례 번호) × --stagger + --d(추가 지연) */
.js [data-reveal] {
  --delay: calc(var(--i, 0) * var(--stagger) + var(--d, 0ms));
}

.js [data-reveal="rise"],
.js [data-reveal="fade"] {
  transition:
    opacity var(--dur-6) var(--ease-expo) var(--delay),
    transform var(--dur-6) var(--ease-expo) var(--delay),
    filter var(--dur-6) var(--ease-expo) var(--delay);
}

.js [data-reveal="rise"]:not(.is-inview),
.js [data-reveal="fade"]:not(.is-inview) {
  opacity: 0;
}

.js [data-reveal="rise"]:not(.is-inview) {
  transform: translateY(20px);
  filter: blur(12px);
}

.js [data-reveal="lines"] .line,
.js [data-reveal="focus"] .line {
  display: block;
  padding-block: 0.2em 0.16em;
  margin-block: -0.2em -0.16em;
}

.js [data-reveal="lines"] .line {
  overflow: hidden;
}

.js [data-reveal="lines"] .line > span,
.js [data-reveal="focus"] .line > span {
  display: inline-block;
}

.js [data-reveal="lines"] .line > span {
  transition: transform var(--dur-6) var(--ease-expo) calc(var(--delay) + var(--l, 0) * 110ms);
}

.js [data-reveal="lines"]:not(.is-inview) .line > span {
  transform: translateY(110%);
}

.js [data-reveal="focus"] .line > span {
  transition:
    opacity 1200ms var(--ease-standard) calc(var(--delay) + var(--l, 0) * 180ms),
    filter var(--dur-7) var(--ease-expo) calc(var(--delay) + var(--l, 0) * 180ms),
    transform var(--dur-7) var(--ease-expo) calc(var(--delay) + var(--l, 0) * 180ms);
}

.js [data-reveal="focus"]:not(.is-inview) .line > span {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(12px) scale(1.02);
}

.js [data-reveal="draw"] {
  transform-origin: left;
  transition: transform var(--dur-7) var(--ease-expo) var(--delay);
}

.js [data-reveal="draw"]:not(.is-inview) {
  transform: scaleX(0);
}

/* 세로로 그려지는 선(위에서 아래로) */
.js [data-reveal="drawy"] {
  transform-origin: top;
  transition: transform var(--dur-7) var(--ease-expo) var(--delay);
}

.js [data-reveal="drawy"]:not(.is-inview) {
  transform: scaleY(0);
}

/* 다섯 가지 더(2026-10-25): 한 가지로만 나오면 단조로워서 자리에 맞게 골라 씀. 모두 같은 곡선 · 시간 · 차례(--delay)
   - left / right : 옆에서 48px 밀려 들어옴 (목록 줄 · 양옆에 놓인 덩이)
   - zoom         : 0.94배에서 또렷하게 커짐 (카드 · 계산기 · 폼)
   - drop         : 위에서 24px 내려앉음 (바 · 링크)
   - wipe         : 왼쪽에서 오른쪽으로 가림막이 걷히듯 (한 줄 선언 · 인용)
   main.js가 data-reveal="rise"인 곳 중 data-keep이 없는 곳을 구역마다 돌려 가며 바꿈 */
.js [data-reveal="left"],
.js [data-reveal="right"],
.js [data-reveal="zoom"],
.js [data-reveal="drop"],
.js [data-reveal="wipe"] {
  transition:
    opacity var(--dur-6) var(--ease-expo) var(--delay),
    transform var(--dur-6) var(--ease-expo) var(--delay),
    filter var(--dur-6) var(--ease-expo) var(--delay),
    clip-path 1500ms var(--ease-curtain) var(--delay);
}

.js [data-reveal="wipe"] {
  clip-path: inset(-1em);
}

.js [data-reveal="left"]:not(.is-inview),
.js [data-reveal="right"]:not(.is-inview),
.js [data-reveal="zoom"]:not(.is-inview),
.js [data-reveal="drop"]:not(.is-inview) {
  opacity: 0;
  filter: blur(10px);
}

.js [data-reveal="left"]:not(.is-inview) {
  transform: translateX(-48px);
}

.js [data-reveal="right"]:not(.is-inview) {
  transform: translateX(48px);
}

.js [data-reveal="zoom"]:not(.is-inview) {
  transform: scale(0.94);
}

.js [data-reveal="drop"]:not(.is-inview) {
  transform: translateY(-24px);
}

.js [data-reveal="wipe"]:not(.is-inview) {
  opacity: 0;
  clip-path: inset(-1em 100% -1em -1em);
  transform: translateX(-16px);
}

/* ---------- 10. 국가 경로 ----------
   KR ——— JP: 두 나라를 금빛 선이 잇는 작은 표시. 선은 가운데에서 양쪽으로 그려짐 (모양은 pages.css의 .route) */
/* 두 겹: 자리(.poster-link) → 그려지는 선(.poster-track > data-reveal="draw") */
.poster-link {
  position: relative;
  flex: 1;
  min-width: 2rem;
  height: 1px;
}

.poster-track {
  position: absolute;
  inset: 0;
}

.poster-track > span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.js .poster-track > [data-reveal="draw"] {
  transform-origin: center;
}

/* ---------- 11. 마무리 · 푸터 ---------- */
/* 마무리: 금빛 선이 그려지고, 왼쪽 큰 제목 · 오른쪽 문장과 상담 버튼. 상자 없이 */
.closing {
  padding-block: calc(var(--section-y) * 1.25) calc(var(--section-y) * 1.1);
}

/* 실시간 상태 점: 금빛 점이 천천히 숨 쉼. 시간 밖이면 회색으로 멈춤 */
.live-dot {
  position: relative;
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: live-pulse 2.4s var(--ease-out) infinite;
}

.live-dot.is-off {
  background: var(--ink-30);
}

.live-dot.is-off::after {
  display: none;
}

@keyframes live-pulse {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot::after {
    animation: none;
  }
}

.closing-rule {
  display: block;
  height: 1px;
  background: var(--accent);
}

.closing-body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap-x);
  row-gap: var(--space-8);
  margin-top: clamp(var(--space-7), 4vw, var(--space-9));
}

/* 왼쪽 5칸: 제목 · 한 줄 · 실시간 상태 */
.closing-lead {
  grid-column: 1 / span 5;
  display: grid;
  align-content: space-between;
  gap: var(--space-7);
}

.closing-desc {
  max-width: 12em;
  font-size: var(--text-display-m);
  font-weight: var(--fw-light);
  line-height: 1.28;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

/* 문의 왼쪽 여백: 자주 묻는 질문 하나 */
.closing-faq {
  display: grid;
  gap: var(--space-3);
  max-width: 28em;
  padding-block: var(--space-5);
  box-shadow: inset 0 1px 0 var(--line);
}

.closing-faq-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-label-m);
  letter-spacing: 0.04em;
  color: var(--accent-strong);
}

.closing-faq-label i {
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
}

.closing-faq-q {
  font-size: var(--text-title-l);
  font-weight: var(--fw-light);
  line-height: 1.4;
}

.closing-faq-a {
  color: var(--ink-2);
}

.closing-faq .text-link {
  justify-self: start;
  margin-top: var(--space-2);
}

.closing-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-label-l);
  color: var(--ink-2);
}

.closing-time {
  font-size: var(--text-title-m);
  color: var(--ink);
}

/* 오른쪽 6칸: 빠른 문의 폼 (이름 · 이메일 · 관심 서비스 · 내용 · 동의). 상자 없이 입력창 선만 */
.quick-form {
  grid-column: 7 / -1;
  display: grid;
  gap: var(--space-6);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.quick-grid .span-2 {
  grid-column: 1 / -1;
}

.quick-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.quick-submit .form-note {
  flex: 1 1 14rem;
  max-width: 24rem;
  font-size: var(--text-label-m);
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .closing-lead,
  .quick-form {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .quick-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 푸터: 따뜻한 종이색 바탕(--paper-warm, 위에서 천천히 이어짐) + 금빛 가는 선으로 본문과 경계를 줌(로고 규정: 무늬 위에 직접 두지 않음). 낮고 촘촘한 한 띠 + 저작권 줄 —
   ① 로고 · 한 줄 소개 · SNS   ② 바로가기(2열, 줄마다 가는 선)   ③ 연락처(메일 · 전화 · 상담 시간).
   메일도 다른 영어 글자와 같은 Newsreader Display ExtraLight(200) */
.site-footer {
  position: relative;
  padding-block: var(--space-8) var(--space-4);
  background: linear-gradient(to bottom, rgb(245 239 228 / 0), var(--paper-warm) 7rem); /* 위에서 본문 바탕과 천천히 이어짐 */
  box-shadow: inset 0 1px 0 rgb(184 146 84 / 0.28); /* 위 경계는 금빛 가는 선 */
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
  column-gap: var(--grid-gap-x);
  row-gap: var(--space-7);
  padding-bottom: var(--space-6);
}

.footer-brand {
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: var(--space-4);
}

.footer-brand p {
  max-width: 20rem;
  font-size: var(--text-body-s);
  color: var(--ink-2);
}

.footer-label {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-brand);
  font-size: var(--text-label-s);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
}

.footer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
  font-size: var(--text-body-s);
  color: var(--ink-2);
  box-shadow: inset 0 -1px 0 var(--line);
  transition: color var(--dur-3) var(--ease-standard);
}

.footer-links a:nth-child(-n + 2) {
  box-shadow:
    inset 0 1px 0 var(--line),
    inset 0 -1px 0 var(--line);
}

.footer-links a[aria-current="page"] {
  color: var(--ink);
}

.footer-links .btn-icon {
  flex: none;
  width: 12px;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
}

.footer-mail {
  position: relative;
  display: inline-block;
  font-family: var(--font-brand);
  font-size: clamp(1.125rem, 0.8rem + 0.85vw, 1.5rem);
  font-weight: var(--fw-light);
  line-height: 1.25;
  letter-spacing: 0.005em;
  overflow-wrap: anywhere;
  transition: color var(--dur-3) var(--ease-standard);
}

.footer-mail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-6) var(--ease-expo);
}

.footer-facts {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.footer-tel {
  justify-self: start;
  font-family: var(--font-brand);
  font-size: var(--text-title-m);
  letter-spacing: 0.02em;
  transition: color var(--dur-3) var(--ease-standard);
}

.footer-hours {
  font-size: var(--text-label-m);
  color: var(--ink-3);
}

@media (hover: hover) and (pointer: fine) {
  .footer-mail:hover,
  .footer-tel:hover {
    color: var(--ink-2);
  }

  .footer-mail:hover::after {
    transform: none;
    transform-origin: left;
  }

  .footer-links a:hover {
    color: var(--ink);
  }

  .footer-links a:hover .btn-icon {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* SNS: 가는 원 안의 단색 로고. 올리면 원이 잉크로 차오르고(아래에서 위로) 로고가 흰색으로 */
.footer-social {
  display: flex;
  gap: var(--space-3);
}

.social-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition:
    color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.social-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 320ms var(--ease-out);
}

.social-link svg {
  position: relative;
  width: 18px;
  height: 18px;
}

.social-link:active {
  transform: scale(0.96);
}

/* 로고 속 글자 · 말풍선: 평소엔 흰색, 올리면 잉크 (원이 잉크로 차오르므로 반대로) */
.social-cut,
.social-cut-fill {
  fill: var(--paper);
  transition: fill 220ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .social-link:hover {
    color: var(--base-white);
    box-shadow: inset 0 0 0 1px var(--ink);
  }

  .social-link:hover::before {
    transform: none;
  }

  .social-link:hover .social-cut,
  .social-link:hover .social-cut-fill {
    fill: var(--ink);
  }
}

.footer-bottom small {
  font-size: inherit;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  box-shadow: inset 0 1px 0 var(--line);
  font-size: var(--text-label-m);
  color: var(--ink-3);
}

/* 맨 위로: 가는 원(40px). 올리면 잉크로 차오름 */
.footer-top-link {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition:
    color 220ms var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.footer-top-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 320ms var(--ease-out);
}

.footer-top-link .btn-icon {
  position: relative;
  width: 14px;
  transform: rotate(-90deg);
}

.footer-top-link:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .footer-top-link:hover {
    color: var(--base-white);
  }

  .footer-top-link:hover::before {
    transform: none;
  }
}

/* ---------- 12. 첫 접속 인트로 (intro.js) ----------
   로고 → 문구가 단어 하나씩 빛을 받아 진해짐 → 화면이 위로 걷힘. 로딩 숫자는 쓰지 않음 */
.is-intro body {
  overflow: hidden;
}

/* intro.js가 실행되기 전, 또는 페이지 전환 막이 걷히기 전 첫 화면이 비치지 않도록 가림 */
.is-intro body::after,
.is-arriving body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--paper);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--ease-curtain);
}

.intro.is-leaving {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

.intro-inner {
  display: grid;
  justify-items: center;
  gap: var(--space-7);
  text-align: center;
  transition:
    opacity var(--dur-4) var(--ease-standard),
    transform 1s var(--ease-emphasized);
}

.intro.is-leaving .intro-inner {
  opacity: 0;
  transform: translateY(-24px);
}

.intro-logo {
  width: clamp(160px, 18vw, 240px);
  height: auto;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 900ms var(--ease-standard),
    transform 900ms var(--ease-emphasized);
}

.intro.is-playing .intro-logo {
  opacity: 1;
  transform: none;
}

.intro-line {
  max-width: 22em;
  font-size: var(--text-headline-m);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
}

.intro-word {
  color: var(--ink-20);
  transition: color 700ms var(--ease-standard);
}

.intro-word.is-lit {
  color: var(--ink);
}

/* ---------- 13. 페이지 전환 막 (main.js) ----------
   사이트 안의 다른 페이지로 갈 때 흰 막이 아래에서 올라와 덮고(0.6초),
   새 페이지에서는 같은 막이 위로 걷히며(0.9초) 첫 화면 연출이 시작됨 */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: var(--paper);
  transform: translateY(100%);
  transition: transform 600ms var(--ease-curtain);
  pointer-events: none;
}

.curtain.is-covering {
  transform: none;
}

.is-arriving.is-arrived body::after {
  transform: translateY(-100%);
  transition: transform 900ms var(--ease-curtain);
}

/* ---------- 14. 커서 (motion.js) ----------
   작은 점은 바로, 링은 천천히 따라옴. 마우스를 쓰는 기기에서만 */
/* 커스텀 커서를 쓰는 동안에는 손 모양 · 확대 같은 기본 커서가 어디서도 나오지 않게 (!important: 부품의 cursor 규칙보다 우선) */
.has-cursor,
.has-cursor * {
  cursor: none !important;
}

.has-cursor :is(input, textarea, select, [contenteditable]) {
  cursor: auto !important;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-standard);
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--ink);
}

.cursor-ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  box-shadow: inset 0 0 0 1px var(--ink-30);
  transition:
    opacity var(--dur-3) var(--ease-standard),
    width var(--dur-3) var(--ease-emphasized),
    height var(--dur-3) var(--ease-emphasized),
    margin var(--dur-3) var(--ease-emphasized),
    background-color var(--dur-3) var(--ease-standard),
    box-shadow var(--dur-3) var(--ease-standard);
}

.cursor-visible .cursor-dot,
.cursor-visible .cursor-ring {
  opacity: 1;
}

.cursor-on-link .cursor-ring {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.cursor-on-link .cursor-dot {
  background: var(--ink);
}

.cursor-down .cursor-ring {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
}

/* [data-cursor] 위(사례 라이브러리 카드)에서는 원 · 점이 사라지고 글자(보기 · ← →)만 남음.
   흰 카드 · 옅은 카드 위에서 보이도록 로고 금빛(--accent-strong) 글자 + 종이색 테두리 빛. 살짝 아래에서 떠오름 */
.cursor-label {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--font-brand);
  font-size: var(--text-label-m);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--accent-strong);
  text-shadow:
    0 0 6px var(--paper),
    0 0 2px var(--paper);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-3) var(--ease-standard),
    transform var(--dur-4) var(--ease-expo);
}

.cursor-lens .cursor-ring {
  background: transparent;
  box-shadow: none;
}

.cursor-lens .cursor-label {
  opacity: 1;
  transform: none;
}

.cursor-lens .cursor-dot {
  opacity: 0;
}

.cursor-on-field .cursor-dot,
.cursor-on-field .cursor-ring {
  opacity: 0;
}

/* ---------- 동작 줄이기: 움직임은 빼고 내용은 그대로 ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.is-inview),
  .js [data-reveal] .line > span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: inset(-1em) !important;
  }

  .js .case-card .case-face {
    clip-path: none !important;
  }

  .js .case-card .case-brand-in,
  .js .case-card .case-top {
    opacity: 1 !important;
    transform: none !important;
  }

  .menu-name,
  .menu-desc,
  .menu-foot {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .menu-list li::before {
    transform: none !important;
  }
}

/* ---------- 15. 활기 더하기 ----------
   기존 연출(등장 · 롤 · 가림막 · 메뉴)은 그대로 두고 빈 곳에만 더한 작은 움직임들. 모두 빠르게 시작해 천천히 멈추는 곡선, 동작 줄이기에서는 꺼짐.
   1) 헤더: 로고 · 환율 띠 · 버튼이 위에서 차례로 내려옴 (첫 화면이 열린 뒤)
   2) 첫 화면 아래 가운데: 금빛 점이 가는 선을 따라 내려가는 스크롤 안내 (스크롤하면 사라짐)
   3) 입력창: 고르면 글자 이름이 금빛이 되고 아래 금빛 선이 왼쪽에서 그려짐
   4) 간단 견적 결과: 금액 · 설명이 아래에서 차례로 떠오름 */
.js .site-header .logo,
.js .site-header .header-actions > * {
  opacity: 0;
  transform: translateY(-10px);
}

.js.is-ready .site-header .logo,
.js.is-ready .site-header .header-actions > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 900ms var(--ease-standard) calc(var(--hi, 0) * 90ms + 200ms),
    transform 1100ms var(--ease-expo) calc(var(--hi, 0) * 90ms + 200ms),
    width 420ms var(--ease-expo);
}

.site-header .header-actions > :nth-child(1) {
  --hi: 2;
}

.site-header .header-actions > :nth-child(2) {
  --hi: 3;
}

.site-header .header-actions > :nth-child(3) {
  --hi: 4;
}


.field {
  position: relative;
}

.field-label {
  transition: color var(--dur-3) var(--ease-standard);
}

.field:focus-within .field-label {
  color: var(--accent-strong);
}

.field:has(.input)::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-expo);
  pointer-events: none;
}

.field:has(.input):focus-within::after {
  transform: none;
}

.js.is-ready .site-header.is-open .header-actions > :not(.menu-toggle) {
  opacity: 0;
  pointer-events: none;
}

.js.is-ready .site-header .menu-toggle:active {
  transform: scale(0.94);
  transition-delay: 0s;
}

@keyframes qe-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.qe-result > * {
  animation: qe-rise 700ms var(--ease-expo) both;
}

.qe-result > :nth-child(2) {
  animation-delay: 60ms;
}

.qe-result > :nth-child(3) {
  animation-delay: 120ms;
}

.qe-result > :nth-child(4) {
  animation-delay: 180ms;
}

.qe-result > :nth-child(5) {
  animation-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  .js .site-header .logo,
  .js .site-header .header-actions > *,
  .qe-result > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* 옆에서 들어오는 등장(left · right)이 가로 스크롤을 만들지 않게 본문 가로만 잘라 둠 (세로 · sticky는 그대로) */
#main {
  overflow-x: clip;
}

/* 상담 문의 글자의 눈높이: 한글 · 일본어 명조 · 영어 대문자는 글자 칸 가운데보다 잉크 가운데가 위에 있어 언어마다 조금씩 내림 */
:root:lang(ko) .header-link {
  padding-top: 2px;
}

:root:lang(ja) .header-link {
  padding-top: 3px;
}

:root:lang(en) .header-link {
  padding-top: 4px;
}

/* 메뉴를 여는 동안에는 뒤에서 계속 도는 움직임(시세 띠 · 상담 가능 점)을 멈춰 열리는 프레임을 아낌 */
.is-menu .ticker-track,
.is-menu .live-dot::after {
  animation-play-state: paused;
}