/* ============================================================
   LOONSHOTSTUDIO — Motion Layer (Phase 0)
   ------------------------------------------------------------
   common.css / nav.css 를 수정하지 않고 그 위에 얹는 레이어.
   되돌리려면 각 페이지에서 motion.css / js/motion.js 링크만
   제거하면 원래 상태로 완전히 복구됩니다.
   ============================================================ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 0.4s;
  --dur-base: 0.8s;
  --dur-slow: 1.2s;

  /* 연결/온기 계열 보조 강조색 (기존 --accent-color 는 그대로 둠) */
  --accent-warm: #f0c08a;
}

/* ------------------------------------------------------------
   1. 페이지 전환 — View Transitions API (Chrome 126+, Safari 18.2+)
   미지원 브라우저는 아무 일도 일어나지 않고 기존처럼 동작합니다.
   ------------------------------------------------------------ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-fade-out var(--dur-fast) var(--ease-in-out-quart) both;
}

::view-transition-new(root) {
  animation: vt-rise-in var(--dur-base) var(--ease-out-expo) both;
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
    transform: translateY(-1.5rem);
  }
}

@keyframes vt-rise-in {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
}

/* 헤더와 로고는 전환 중에도 제자리에 고정 (페이지가 헤더 아래로 흐름) */
.header {
  view-transition-name: site-header;
}

.footer {
  view-transition-name: site-footer;
}

/* ------------------------------------------------------------
   2. 프리로더
   ------------------------------------------------------------ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-color, rgb(24, 24, 24));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease-in-out-quart),
    visibility 0.6s var(--ease-in-out-quart);
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.preloader__mark {
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

/* 로딩 진행 라인 */
.preloader__bar {
  position: relative;
  width: min(38vw, 320px);
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.preloader__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--text-color, #fff);
  transition: width 0.35s var(--ease-out-expo);
}

.preloader__count {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  font-variant-numeric: tabular-nums;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 프리로더가 떠 있는 동안 스크롤 잠금 */
html.is-loading,
html.is-loading body {
  overflow: hidden;
}

/* ------------------------------------------------------------
   3. 커스텀 커서 (포인터 기기 전용)
   ------------------------------------------------------------ */
.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}

.cursor {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
}

.cursor-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: opacity 0.3s ease, width 0.35s var(--ease-out-expo),
    height 0.35s var(--ease-out-expo), margin 0.35s var(--ease-out-expo),
    border-color 0.35s var(--ease-out-expo),
    background-color 0.35s var(--ease-out-expo);
}

html.has-custom-cursor .cursor,
html.has-custom-cursor .cursor-ring {
  opacity: 1;
}

/* 링크/버튼 위에서 확장 */
html.has-custom-cursor.cursor-hover .cursor-ring {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.85);
}

html.has-custom-cursor.cursor-hover .cursor {
  opacity: 0;
}

/* 커스텀 커서가 켜지면 기본 커서 숨김 */
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor .card,
html.has-custom-cursor .cycle-card,
html.has-custom-cursor .project-item {
  cursor: none;
}

/* 텍스트 입력은 기본 커서 유지 */
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select {
  cursor: auto;
}

/* ------------------------------------------------------------
   4. 스크롤 진행 라인
   ------------------------------------------------------------ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent-color, #0072ff);
  z-index: 1001;
  pointer-events: none;
}

/* ------------------------------------------------------------
   5. 스크롤 리빌
   ------------------------------------------------------------ */
html.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-base) var(--ease-out-expo),
    transform var(--dur-base) var(--ease-out-expo);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}

html.motion-ready [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* 제목 — 줄 단위 마스크 리빌 */
.split-line {
  display: block;
  overflow: hidden;
}

.split-line__inner {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 110ms);
}

[data-split].is-inview .split-line__inner {
  transform: none;
}

/* i18n 언어 전환 등으로 즉시 표시가 필요할 때 */
[data-split].is-instant .split-line__inner {
  transition: none;
  transform: none;
}

/* ------------------------------------------------------------
   6. 마이크로 인터랙션
   ------------------------------------------------------------ */

/* 자석 버튼 */
[data-magnetic] {
  will-change: transform;
}

/* 네비 링크 언더라인 스윕 */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease-out-expo);
}

.nav-item:hover > .nav-link::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* 히어로 배경 iframe이 마우스를 가로채지 않도록
   (Phase 3에서 postMessage 기반 상호작용으로 대체 예정) */
.hero-bg iframe {
  pointer-events: none;
}

/* 카드 hover를 조금 더 부드럽게 */
.cycle-card,
.card,
.project-item {
  transition: transform 0.6s var(--ease-out-expo),
    border-color 0.4s ease, background-color 0.4s ease;
}

/* ------------------------------------------------------------
   7. 접근성 / 폴백
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  [data-reveal],
  .split-line__inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .cursor,
  .cursor-ring {
    display: none;
  }

  html.has-custom-cursor,
  html.has-custom-cursor a,
  html.has-custom-cursor button {
    cursor: auto;
  }
}

/* 터치 기기에서는 커스텀 커서 비활성 */
@media (hover: none), (pointer: coarse) {
  .cursor,
  .cursor-ring {
    display: none;
  }
}

/* ------------------------------------------------------------
   8. 헤더 톤 다운
   파란 알약 토글이 화면에서 가장 시끄러운 요소가 되지 않도록.
   ------------------------------------------------------------ */
.lang-toggle {
  background: transparent;
  padding: 0.35rem 0;
  gap: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.lang-toggle:hover {
  background: transparent;
}

.lang-btn {
  padding: 0.2rem 0.35rem;
  border-radius: 0;
  color: var(--text-muted);
}

.lang-btn.active {
  background: transparent;
  color: var(--text-color);
}

/* KO / EN 사이 구분자 */
.lang-btn + .lang-btn {
  border-left: 1px solid var(--border-color);
  padding-left: 0.6rem;
  margin-left: 0.25rem;
}

.header {
  background: rgba(24, 24, 24, 0.35);
  border-bottom-color: transparent;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

html.is-scrolled .header {
  background: rgba(24, 24, 24, 0.72);
  border-bottom-color: var(--border-color);
}

/* ============================================================
   9. 사이트 전체 톤 — "제안서"에서 "스튜디오"로
   ------------------------------------------------------------
   서브페이지 14장이 전부 var(--accent-color) 를 경유하고 있어서,
   토큰 하나만 바꾸면 파란 알약/보더/아이콘이 한 번에 따라옵니다.
   ============================================================ */

:root {
  /* 형광 파랑(#0072ff) → 따뜻한 황토. 연결·온기 컨셉과 맞물림 */
  --accent-color: #e0a96d;
  --accent-hover: #f0c08a;
  --border-color: rgba(255, 255, 255, 0.07);
}

/* 강조색을 '바탕'으로 쓰는 요소들은 글자를 어둡게 (흰 글씨는 안 읽힘) */
.btn-primary,
.step-number,
.process-number,
.approach-number,
.book-link,
.book-link.outline:hover,
.filter-tab.active,
.filter-tab:hover,
.pagination-btn.active,
.pagination-btn:hover,
.social-link:hover,
.highlight-box,
.featured-box {
  color: var(--bg-color);
}

.highlight-box,
.featured-box {
  /* 큰 면적을 강조색으로 채우면 여전히 시끄러움 → 은은한 바탕으로 */
  background: rgba(224, 169, 109, 0.08);
  border: 1px solid rgba(224, 169, 109, 0.22);
  color: var(--text-color);
}

.btn-primary:hover {
  color: var(--bg-color);
}

/* ---------- 타이포 스케일 ---------- */
/* 3.5rem / 600 은 한글에서 특히 무겁게 읽힘 */
.page-hero .hero-title {
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

.page-hero .hero-subtitle {
  font-size: clamp(0.92rem, 1.5vw, 1.05rem);
  line-height: 2;
  margin-top: 0.5rem;
}

.section-title {
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: 1rem;
  line-height: 2;
}

.card-title,
.capability-card h3 {
  font-weight: 500;
}

/* ---------- 페이지 히어로 ---------- */
.page-hero {
  position: relative;
  padding: 11rem 0 7rem !important;
  /* 사선 그라디언트는 오래된 인상을 줌 → 아래로 자연스럽게 풀리도록 */
  background: none !important;
  overflow: hidden;
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

/* 서브페이지에도 같은 연결의 장을 얇게 (메인과 한 몸으로 읽히도록) */
.page-hero-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.55;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(24, 24, 24, 0.35) 0%,
    rgba(24, 24, 24, 0.7) 55%,
    var(--bg-color) 100%
  );
}

/* ---------- 카드: 박스에서 면으로 ---------- */
.card,
.capability-card,
.book-card,
.project-card,
.team-card,
.report-card {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid transparent;
  transition: transform 0.6s var(--ease-out-expo),
    background-color 0.4s ease, border-color 0.4s ease;
}

.card:hover,
.capability-card:hover,
.book-card:hover,
.project-card:hover,
.team-card:hover,
.report-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(224, 169, 109, 0.28);
}

/* ---------- 알약 버튼들 ---------- */
.filter-tab,
.pagination-btn {
  border-radius: 999px;
  transition: all 0.35s var(--ease-out-expo);
}

.btn-primary {
  border-radius: 999px;
  font-weight: 500;
}

/* 페이지 히어로: 제목은 왼쪽, 부제는 가운데였던 어긋남을 정리 */
.page-hero .hero-subtitle {
  margin-left: 0;
  margin-right: 0;
  max-width: 38em;
  text-align: left;
}

/* 섹션이 번갈아 칠해지며 생기던 딱딱한 가로 띠를 완화 */
.section + .section,
.page-content .section {
  border-top: 1px solid var(--border-color);
}

/* ------------------------------------------------------------
   10. 아이콘 — 이모지에서 라인 아이콘으로
   24 그리드 / stroke 1.25 / currentColor 로 통일.
   색은 컨테이너의 color 로 제어합니다.
   ------------------------------------------------------------ */
.ico {
  display: block;
  overflow: visible;
}

.service-icon,
.value-icon,
.expertise-icon,
.about-icon,
.project-thumbnail,
.info-icon {
  /* 이모지용으로 잡혀 있던 font-size 의 잔여 행간 제거 */
  line-height: 0;
  color: var(--accent-color);
}

.service-icon,
.value-icon,
.expertise-icon {
  margin-bottom: 1.5rem;
}

.info-icon {
  background: rgba(224, 169, 109, 0.09) !important;
  border: 1px solid rgba(224, 169, 109, 0.2);
}

.about-icon {
  display: flex;
  justify-content: center;
  color: rgba(224, 169, 109, 0.5);
  opacity: 1 !important;
}

.project-thumbnail {
  color: rgba(255, 255, 255, 0.25);
  transition: color 0.5s var(--ease-out-expo);
}

.project-card:hover .project-thumbnail,
.card:hover .project-thumbnail {
  color: var(--accent-color);
}

/* ------------------------------------------------------------
   11. 푸터 — 사업자 정보를 조용히 담는 층
   ------------------------------------------------------------ */
.footer {
  background: transparent;
  border-top: 1px solid var(--border-color);
  padding: 5rem 0 3rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  flex-wrap: wrap;
  padding-bottom: 3.5rem;
}

.footer-logo {
  /* 로고 PNG 안에 투명 여백이 들어 있음 (좌 8.2% / 하 23%).
     그대로 두면 아래 텍스트보다 안쪽으로 들어가 보이므로
     그만큼 끌어내 왼쪽 라인을 맞춤. */
  --logo-w: 9rem;
  width: var(--logo-w);
  display: block;
  margin-left: calc(var(--logo-w) * -0.082);
  margin-bottom: 1rem;
}

.footer-tagline {
  font-size: 0.85rem;
  line-height: 2;
  color: var(--text-secondary);
}

.footer .footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.9rem;
}

.footer .footer-links a {
  font-size: 0.85rem;
  color: var(--text-secondary);
  position: relative;
}

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

/* 사업자 정보 */
.footer-biz {
  /* 고정 그리드는 칸 폭이 모자라 주소가 단어 중간에서 잘림.
     항목이 자연스럽게 흐르도록 wrap 배치로. */
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.25rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--border-color);
  margin: 0;
}

.footer-biz > div {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.72rem;
  line-height: 1.9;
  /* 한글은 어절 단위로 줄바꿈 */
  word-break: keep-all;
}

.footer-biz dt {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 400;
  white-space: nowrap;
}

.footer-biz dd {
  margin: 0;
  color: var(--text-secondary);
}

.footer-biz dd a {
  color: var(--text-secondary);
}

.footer-biz dd a:hover {
  color: var(--accent-color);
}

.footer-biz-check {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.66rem;
  white-space: nowrap;
}

.footer-biz-check:hover {
  border-color: rgba(224, 169, 109, 0.4);
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
}

.footer-copyright {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

@media screen and (max-width: 768px) {
  .footer {
    padding: 3.5rem 0 2.5rem;
  }

  .footer-top {
    flex-direction: column;
    gap: 2.5rem;
    text-align: left;
  }

  .footer .footer-links {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .footer-biz > div {
    flex-direction: column;
    gap: 0.1rem;
  }

  .footer-biz dt {
    min-width: 0;
  }

  .footer-content {
    text-align: left;
  }
}

/* ------------------------------------------------------------
   12. 모바일 내비게이션 / 타이포
   ------------------------------------------------------------ */

/* 한글은 어절 단위로 줄바꿈 — "사람들이" 가 "사람 / 들이" 로 끊기지 않도록 */
.hero-title,
.section-title,
.hero-subtitle,
.section-subtitle,
.connect-body,
.cycle-title,
.cycle-description,
.card-title,
.card-text,
.book-info h3,
.book-info p,
.footer-tagline {
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media screen and (max-width: 1024px) {
  /* .nav 의 top/height 가 60px 로 하드코딩되어 있어
     헤더가 70px 인 769~1024px 구간에서 10px 어긋났음 */
  .nav {
    top: var(--header-height) !important;
    height: calc(100vh - var(--header-height)) !important;
    height: calc(100dvh - var(--header-height)) !important;

    /* 반투명이라 뒤 히어로 문구가 그대로 읽혔음 (블러는 기기에 따라 미적용) */
    background-color: var(--bg-color) !important;
    padding: 1.5rem 1.25rem 3rem !important;
  }

  /* 메뉴가 열린 동안 뒤 페이지 스크롤 잠금 */
  html.menu-open,
  html.menu-open body {
    overflow: hidden;
  }

  /* 터치 타겟 확보 */
  .mobile-menu-btn {
    width: 44px;
    height: 44px;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .mobile-menu-btn span {
    transition: transform 0.35s var(--ease-out-expo), opacity 0.2s ease;
  }

  .nav-item {
    border-bottom: 1px solid var(--border-color);
  }

  .nav-link {
    padding: 1.15rem 0.25rem;
    font-size: 1.05rem;
    font-weight: 500;
  }

  /* 데스크톱용 언더라인 스윕은 모바일에서 불필요 */
  .nav-link::after {
    display: none;
  }

  .dropdown {
    padding: 0 0 0.75rem 0.25rem;
  }

  .dropdown-link {
    padding: 0.7rem 0.25rem;
  }

  .dropdown-link span:last-child {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
  }

  /* KO | EN 이 가운데 붕 떠 보이던 것 정리 */
  .lang-toggle {
    margin: 2rem 0 0 0 !important;
    justify-content: flex-start !important;
    padding: 0 0.25rem !important;
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 768px) {
  /* 390px 폭에서 30px 제목은 두 글자가 다음 줄로 넘어감 */
  .hero-title {
    font-size: clamp(1.45rem, 6.4vw, 2rem) !important;
    line-height: 1.55;
  }

  .hero-eyebrow {
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    font-size: 0.6rem;
    margin-bottom: 1.5rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
    line-height: 1.95;
  }

  .connect-title,
  .connect-body {
    text-align: left;
  }

  .connect-body br {
    display: none;
  }
}

/* 드롭다운: .dropdown-link span 이 한글 라벨과 영문 설명을 모두 잡아
   둘 다 작고 흐리게 나왔음 → 한글을 주, 영문을 부로 */
.dropdown-link span:first-child {
  font-size: 0.88rem;
  color: var(--text-color);
  margin-top: 0;
  font-weight: 500;
}

.dropdown-link span:last-child {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.dropdown-link:hover span:first-child {
  color: var(--accent-color);
}

/* ------------------------------------------------------------
   13. 컴포지터에서 도는 스크롤 이징
   ------------------------------------------------------------
   JS 스무스 스크롤(Lenis)은 휠 입력을 JS 로 받아 rAF 에서 적용하므로
   원리상 최소 한 프레임 뒤처집니다. 그래서 스크롤 자체는 네이티브로
   두되(즉각 반응), "부드럽게 흐르는 느낌"은 스크롤 연동 애니메이션으로
   만듭니다. 이쪽은 컴포지터 스레드에서 돌아 입력 지연이 없습니다.
   ------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  /* 히어로가 스크롤에 따라 천천히 가라앉으며 사라짐 */
  .hero-content {
    animation: hero-settle linear both;
    animation-timeline: view();
    animation-range: exit -20% exit 90%;
  }

  @keyframes hero-settle {
    to {
      opacity: 0;
      transform: translateY(-3rem);
    }
  }

  .hero-bg {
    animation: hero-drift linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }

  @keyframes hero-drift {
    to {
      transform: translateY(14%);
    }
  }

  /* 섹션이 들어올 때 살짝 떠오르며 자리잡음 */
  .connect-section .container,
  .cycle-grid,
  .project-grid,
  .cta-section .container {
    animation: section-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 65%;
  }

  @keyframes section-rise {
    from {
      opacity: 0.25;
      transform: translateY(2.5rem);
    }
  }

  /* 스크롤 연동으로 처리되는 요소는 JS 리빌과 겹치지 않도록 */
  html.motion-ready .connect-section .container[data-reveal],
  html.motion-ready .cycle-grid[data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    .hero-content,
    .hero-bg,
    .connect-section .container,
    .cycle-grid,
    .project-grid,
    .cta-section .container {
      animation: none;
    }
  }
}