/* =========================================================================
   JJ ASSET — TOSS DESIGN SYSTEM (TDS) CORE STYLESHEET (style.css)
   Clean, modern, friendly Korean FinTech aesthetic
   ========================================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  --font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  
  /* Toss Color Tokens */
  --toss-blue: #3182F6;
  --toss-blue-hover: #1B64DA;
  --toss-blue-light: #E8F3FF;
  --toss-blue-subtle: #F2F7FF;
  
  --toss-black: #191F28;
  --toss-grey-900: #191F28;
  --toss-grey-800: #333D4B;
  --toss-grey-700: #4E5968;
  --toss-grey-600: #6B7684;
  --toss-grey-500: #8B95A1;
  --toss-grey-400: #B0B8C1;
  --toss-grey-300: #D1D6DB;
  --toss-grey-200: #E5E8EB;
  --toss-grey-100: #F2F4F6;
  --toss-grey-50: #F9FAFB;
  
  --toss-red: #F04452;
  --toss-red-light: #FEECEE;
  
  --toss-green: #00D084;
  --toss-green-dark: #059669;
  --toss-green-light: #E6F9F2;
  
  --toss-amber: #FF8A00;
  --toss-amber-light: #FFF4E6;
  
  --bg-primary: #F9FAFB;
  --bg-card: #FFFFFF;
  --text-primary: #191F28;
  --text-secondary: #8B95A1;
  --text-muted: #B0B8C1;
  --border-color: rgba(0, 0, 0, 0.04);
}

/* =========================================================================
   다크모드 — :root[data-theme="dark"]에서 토큰을 재정의한다.
   --toss-black(토스트 배경 등 항상 어두운 칩 전용)만 고정값으로 남기고,
   나머지 grey 스케일·의미색 파스텔 배경·기본 서피스 토큰은 모두 반전한다.
   개별 카드/텍스트에 쓰인 Tailwind 임의값(hex) 클래스 오버라이드는
   css/dark-mode.css(자동 생성)를 참고.
   ========================================================================= */
:root[data-theme="dark"] {
  /* 네이티브 폼 컨트롤(날짜 선택 아이콘, 스피너, 스크롤바 등)을 다크 크롬으로 렌더링 */
  color-scheme: dark;

  --toss-grey-900: #ECEEF1;
  --toss-grey-800: #D7DBE1;
  --toss-grey-700: #B9C0CB;
  --toss-grey-600: #A7AFBC;
  --toss-grey-500: #9AA2B0;
  --toss-grey-400: #717A87;
  --toss-grey-300: #4A505A;
  --toss-grey-200: #2A2E36;
  --toss-grey-100: #20242B;
  --toss-grey-50: #1B1E24;

  --toss-blue-light: #16233B;
  --toss-blue-subtle: #131B29;
  --toss-red-light: #33191D;
  --toss-green-light: #10261E;
  --toss-amber-light: #2E2211;

  --bg-primary: #0B0D10;
  --bg-card: #15171C;
  --text-primary: #ECEEF1;
  --text-secondary: #9AA2B0;
  --text-muted: #717A87;
  --border-color: rgba(255, 255, 255, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-family-base);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.5;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--toss-grey-100);
}

::-webkit-scrollbar-thumb {
  background: var(--toss-grey-300);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--toss-grey-400);
}

/* Base Card Style */
.card, .toss-card {
  background-color: var(--bg-card);
  border-radius: 24px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover, .toss-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.08);
}

/* Scroll Section Margin */
.page-section, section {
  scroll-margin-top: 6rem;
}

/* Animations */
@keyframes tossScaleUp {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-toss-in {
  animation: tossScaleUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Utilities */
.text-toss-blue { color: var(--toss-blue); }
.bg-toss-blue { background-color: var(--toss-blue); }
.text-toss-green { color: var(--toss-green); }
.text-toss-red { color: var(--toss-red); }

/* Toss Typography (Pretendard & Tabular Numbers) */
body, table, th, td, input, button, select, textarea {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important;
  letter-spacing: -0.02em;
}

.tabular-nums, .font-toss-num {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums lining-nums;
  -moz-font-feature-settings: "tnum" 1, "lnum" 1;
  -webkit-font-feature-settings: "tnum" 1, "lnum" 1;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.03em;
}

/* =========================================================================
   HERO — 풀블리드 시네마틱 영상 배경 + 대형 세리프 디스플레이 타이포
   (lassie.ai 스타일: 화면을 꽉 채운 영상 위 가운데 정렬 라이트 세리프,
    두 번째 줄은 이탤릭)
   ========================================================================= */
.hero-cinema {
  min-height: 100svh;      /* 모바일 주소창 변화에 흔들리지 않도록 svh 사용 */
  min-height: 100vh;       /* svh 미지원 브라우저 폴백 */
}
@supports (height: 100svh) {
  .hero-cinema { min-height: 100svh; }
}

/* 사진이 로드되기 전/실패했을 때 드러나는 하늘색 바탕 */
.hero-photo-bed {
  background: linear-gradient(180deg, #1E6FBE 0%, #3C93D6 55%, #79BEE8 100%);
  overflow: hidden;                 /* 축소 시 둥근 모서리로 사진을 깔끔히 잘라준다 */
  transform-origin: 50% 50%;        /* 가운데를 기준으로 줄었다 늘었다 한다 */
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-radius 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* 배경 사진 — 움직이지 않는 정지 이미지. 캔버스/WebGL 을 쓰지 않으므로
   file:// 로 열어도 캔버스 오염(taint) 문제가 아예 없다.
   object-position 은 왼쪽 나무를 살리고 새로 확장한 오른쪽 하늘부터 잘라내려는 것. */
.hero-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
  opacity: 0;
  transition: opacity 0.6s ease;
}
/* 세로가 긴 화면(모바일)에서는 잘리는 폭이 커서 밑동만 보인다 — 살짝 오른쪽으로 민다 */
@media (max-aspect-ratio: 1 / 1) {
  .hero-photo { object-position: 14% 50%; }
}
.hero-photo.is-ready { opacity: 1; }

/* 따뜻한 색감 보정 — 아주 은은하게만 */
.hero-warm {
  background: radial-gradient(120% 90% at 62% 12%, rgba(255, 205, 140, 0.10), transparent 62%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* 가독성 스크림 — 하늘색을 죽이지 않도록 타이포 뒤에만 좁게, 그리고 아주 옅게.
   (문구 크기를 3/5로 줄이면서 덮어야 할 면적도 함께 줄었다) */
.hero-scrim {
  /* 원형 스크림은 매끈한 하늘 위에 '얼룩'처럼 보인다.
     대신 사진에서 흔히 쓰는 그라데이션 ND 필터처럼 위아래만 눌러준다.
     검정이 아니라 짙은 남색을 써야 파란 하늘이 회색으로 죽지 않는다. */
  background: linear-gradient(180deg,
    rgba(4, 30, 66, 0.36) 0%,
    rgba(4, 30, 66, 0.17) 30%,
    rgba(4, 30, 66, 0.05) 52%,
    rgba(4, 26, 58, 0.14) 74%,
    rgba(4, 26, 58, 0.40) 100%);
  pointer-events: none;
}

/* 다크모드에서는 눈부시지 않게 사진을 조금 눌러준다 */
:root[data-theme="dark"] .hero-photo { filter: brightness(0.74) saturate(0.92); }
:root[data-theme="dark"] .hero-photo-bed { background: linear-gradient(180deg, #143F6B 0%, #24567A 55%, #3E6F8A 100%); }

/* =========================================================================
   첫 화면 스크롤 축소 — 맨 위에서 살짝만 스크롤을 내려도 배경 사진 틀이
   화면의 90%(가운데 기준)로 부드럽게 좁혀지고, 다시 맨 위로 올리면 100%로
   돌아온다. 상태 전환(#hero.hero-shrunk)은 js/utils/heroShrink.js 가 맡고,
   줄어드는 데 걸리는 시간(0.65s)과 곡선은 위 .hero-photo-bed transition 이 정한다.
   ========================================================================= */
#hero.hero-shrunk .hero-photo-bed {
  transform: scale(0.9);
  border-radius: 24px;
}

/* 모션 최소화 설정이면 축소는 하되 애니메이션 없이 즉시 전환한다 */
@media (prefers-reduced-motion: reduce) {
  .hero-photo-bed { transition: none; }
}

/* 디스플레이 타이포 */
.hero-display {
  font-family: 'Instrument Serif', 'Apple SD Gothic Neo', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.86rem, 7.2vw, 5.4rem);   /* 기존 clamp(3.1rem, 12vw, 9rem)의 3/5 */
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-shadow: 0 4px 34px rgba(4, 18, 30, 0.55), 0 2px 10px rgba(4, 18, 30, 0.40), 0 1px 3px rgba(4, 18, 30, 0.30);
}

.hero-display em {
  font-style: italic;
  letter-spacing: -0.02em;
}

/* =========================================================================
   첫 진입 인트로 — 배경 사진 → 가운데 문구 → 상단 메뉴바 순서로 등장
   ------------------------------------------------------------------------
   .intro-armed  : index.html <head> 인라인 스크립트가 첫 페인트 전에 붙인다.
                   (여기서 숨겨두지 않으면 문구/메뉴가 한 프레임 번쩍인다)
   .intro-copy-in / .intro-nav-in : App.runIntro() 가 순서대로 붙인다.
   모션 최소화(prefers-reduced-motion) 환경에서는 .intro-armed 자체가 안 붙어서
   아무것도 숨겨지지 않는다 — 즉 인트로 없이 전부 즉시 보인다.
   transition 이 아니라 animation 을 쓰는 이유: 헤더에 이미 Tailwind 의
   transition-all 이 걸려 있어서 서로 간섭하기 때문이다.
   ========================================================================= */
html.intro-armed #toss-header,
html.intro-armed .hero-intro,
html.intro-armed .hero-scrollcue {
  opacity: 0;
}

/* 0.55s / blur 4px — 문구가 '떠오르는' 시간 자체를 짧게 잡아야 '사진 뜨고 1초 뒤
   딱 나타난다'로 체감된다. 이보다 길면 뿌옇게 부유하는 느낌이 든다. */
html.intro-copy-in .hero-intro {
  animation: intro-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
html.intro-nav-in #toss-header {
  animation: intro-drop 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
html.intro-nav-in .hero-scrollcue {
  animation: intro-fade 0.9s ease 0.3s forwards;
}

@keyframes intro-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.988); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes intro-drop {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 섹션 간 여백 — 기존 mb-[40dvh]/[80dvh]는 스크롤 시 빈 화면이 과도해 축소 */
/* 섹션 간 여백 — '100L' = 사용자 화면에 꽉 차는 높이 한 개분.
   섹션이 끝나면 화면 하나만큼 비우고 다음 섹션이 올라온다.
   dvh 는 모바일 주소창이 접히고 펴질 때마다 여백이 출렁이므로,
   가장 작은 뷰포트 기준인 svh 를 쓴다(hero-cinema 와 같은 기준). */
.section-gap {
  margin-bottom: 100vh;    /* svh 미지원 브라우저 폴백 */
  margin-bottom: 100svh;
}

/* 마지막 섹션과 푸터 사이는 '섹션 간'이 아니므로 100L 을 두지 않는다 */
section.section-gap:last-of-type {
  margin-bottom: 6rem;
}

/* Thin Elegant Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #E5E8EB;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #B0B8C1;
}