/* =========================================================
   꿈틀 메인 페이지 디자인 · 스크롤 연출 (index.html 전용)
   흐름: 고급스러운 오렌지 첫 화면 → 크림 바탕 본문 → 어두운 '약속' 구간 → 푸터
   글꼴: 한글 Pretendard, 영문·숫자 강조 Instrument Serif
   - <html>에 .gm-motion 이 붙으면 연출 모드, 없으면 효과 없는 정상 레이아웃
   - 이 파일과 home-motion.js 를 빼면 원래 메인으로 돌아갑니다.
   ========================================================= */

:root {
  /* 꿈틀 로고 색 */
  --gm-orange: #ef7040;
  --gm-red: #d8322a;
  --gm-brand: #e04a2b;
  --gm-grad: linear-gradient(90deg, var(--gm-orange), var(--gm-red));
  /* 첫 화면 오렌지 (로고 색을 깊게 누른 톤) */
  --gm-hero-light: #ec7443;
  --gm-hero-mid: #d4532b;
  --gm-hero-deep: #a8361b;
  --gm-hero-shadow: #7c2512;
  --gm-hero-ink: #fff6ee;
  --gm-hero-accent: #ffd9b8;
  /* 바탕 */
  --gm-cream: #f6efe6;
  --gm-ember: #1d1411;
  --gm-footer: #101214;
  /* 글자 */
  --gm-ink: #221b18;
  --gm-ink-soft: #6f625b;
  --gm-apricot: #f2b394;
  --gm-hair: rgba(34, 27, 24, .14);
  --gm-hair-light: rgba(246, 239, 230, .18);
  /* 글꼴 */
  --gm-sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", sans-serif;
  --gm-serif: "Instrument Serif", "Times New Roman", serif;
  --gm-pad: clamp(24px, 6vw, 110px);
}

/* ---------- 공통 조각 ---------- */
.gm-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--gm-brand);
  font-family: var(--gm-serif);
  font-size: 19px;
  font-style: italic;
  letter-spacing: .01em;
}
.gm-eyebrow-rule { display: block; width: 40px; height: 1px; background: var(--gm-grad); transform-origin: 0 50%; }

.gm-grad-text {
  background: var(--gm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 글자가 가려진 틈에서 올라오는 효과용 */
.gm-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.gm-line > span { display: block; }

.gm-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  color: var(--gm-ink);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: background-size .45s cubic-bezier(.22, .61, .36, 1);
}
.gm-text-link span { color: var(--gm-brand); transition: transform .3s ease; }
.gm-text-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.gm-text-link:hover span { transform: translateX(4px); }
.gm-text-link:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

/* ---------- 상단 스크롤 진행 바 ---------- */
.gm-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gm-grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* =========================================================
   첫 화면 (고급 오렌지)
   ========================================================= */
.gm-hero {
  position: relative;
  display: flex;
  width: 100vw;
  min-height: max(640px, calc(100vh - 88px));
  min-height: max(640px, calc(100svh - 88px));
  margin-left: calc(50% - 50vw);
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(110% 90% at 82% 12%, var(--gm-hero-light) 0%, var(--gm-hero-mid) 40%, var(--gm-hero-deep) 74%, var(--gm-hero-shadow) 100%);
  color: var(--gm-hero-ink);
}
/* 매장 사진을 오렌지 위에 겹쳐 듀오톤 질감 */
/* 사진은 오른쪽 영역에만 두고, 왼쪽 끝은 글자 쪽으로 자연스럽게 사라지게 */
.gm-hero-bg {
  position: absolute;
  top: -6%;
  right: 0;
  bottom: 0;
  width: min(64%, 1120px);
  pointer-events: none;
}
.gm-hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: .4;
  filter: grayscale(1) contrast(1.15) brightness(1.08);
  mix-blend-mode: multiply;
  /* 페이드는 사진 자체에 걸어야 오렌지와 섞이는 효과(multiply)가 유지됨 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 26%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 26%, #000 55%);
}
/* 글자 쪽을 살짝 눌러 가독성 확보 + 미세한 종이 질감 */
.gm-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(110, 30, 12, .5) 0%, rgba(110, 30, 12, .18) 48%, transparent 75%),
    linear-gradient(0deg, rgba(90, 24, 10, .55) 0%, transparent 38%);
  pointer-events: none;
}
.gm-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .09;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.gm-hero-copy { position: relative; z-index: 1; margin: auto 0; padding: 48px var(--gm-pad) clamp(72px, 12vh, 132px); }
.gm-hero-title {
  margin: 0;
  color: var(--gm-hero-ink);
  font-family: var(--gm-sans);
  font-size: clamp(48px, 6.6vw, 116px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.06em;
}
.gm-hero-title em { color: var(--gm-hero-accent); font-style: normal; font-weight: 800; }
/* "사장님," 강조: 금빛 그라데이션 (꿈틀의 살구색과 구분) */
.gm-hero-title .gm-hero-boss {
  background: linear-gradient(95deg, #ffe0a3 0%, #ffbf66 55%, #ffa94d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 연출 시작 전 깜빡임 방지 (스크립트가 못 돌면 2.5초 뒤 자동 해제) */
.gm-js .gm-hero-title .gm-line > span { transform: translateY(110%); }

/* =========================================================
   실시간 공고 숫자 (원 두 개)
   ========================================================= */
.home-stats { padding-top: 132px; overflow: hidden; overflow: clip; text-align: center; }
.stats-head h2 {
  margin: 14px 0 0;
  color: var(--gm-ink);
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.06em;
}
.stats-head h2 em { font-style: normal; }
.stats-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  padding: clamp(40px, 6vw, 90px) 0;
}
.stats-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(760px, 96vw);
  height: auto;
  color: rgba(34, 27, 24, .12);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .26em;
  pointer-events: none;
  translate: -50% -50%;
  animation: gm-spin 80s linear infinite;
}
.stats-ring text { fill: currentColor; }
.stat-circle {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(380px, 36vw);
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  border-radius: 50%;
}
.stat-outline { margin-right: -1px; border: 1px solid rgba(224, 74, 43, .7); background: rgba(251, 248, 243, .94); color: var(--gm-ink); }
.stat-filled {
  background: linear-gradient(140deg, var(--gm-hero-light) 0%, var(--gm-hero-mid) 55%, var(--gm-hero-deep) 100%);
  box-shadow: 0 30px 60px -30px rgba(124, 37, 18, .55);
  color: #fff6ee;
}
.stat-orbit { position: absolute; inset: -1px; border-radius: 50%; animation: gm-spin 18s linear infinite; }
.stat-orbit::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--gm-grad);
}
.stat-label { margin: 0; font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; letter-spacing: -.04em; }
.stat-num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 12px 0 14px;
  font-size: clamp(46px, 5.4vw, 86px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.stat-outline .stat-num { color: var(--gm-brand); }
.stat-num small { font-size: .3em; font-weight: 700; letter-spacing: 0; }
.stat-desc { margin: 0; font-size: 14px; line-height: 1.65; letter-spacing: -.03em; opacity: .8; }
.stats-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 28px;
  color: #948a84;
  font-size: 12px;
}
@keyframes gm-spin { to { rotate: 360deg; } }

/* =========================================================
   센터의 약속 (기본: 정적인 블록)
   ========================================================= */
.promise-stage {
  position: relative;
  width: 100vw;
  margin: 150px 0 0 calc(50% - 50vw);
  overflow: hidden;
  background: linear-gradient(180deg, var(--gm-ember) 0%, var(--gm-ember) 70%, var(--gm-footer) 100%);
  color: var(--gm-cream);
}
.promise-inner { position: relative; display: flex; flex-direction: column; gap: 60px; padding: 120px var(--gm-pad); }
.promise-bg, .promise-count, .promise-progress { display: none; }
.promise-top { order: -2; }
.promise-top .gm-eyebrow { color: var(--gm-apricot); }
.promise-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; padding: 0; list-style: none; }
.promise-word { padding-top: 22px; border-top: 1px solid var(--gm-hair-light); }
.promise-num { color: var(--gm-apricot); font-family: var(--gm-serif); font-size: 18px; font-style: italic; }
.promise-word strong { margin-top: 10px; font-family: var(--gm-serif); font-size: clamp(40px, 4.2vw, 64px); font-style: italic; font-weight: 400; line-height: 1.05; }
.promise-word p { margin: 16px 0 0; color: rgba(246, 239, 230, .68); font-size: 15px; line-height: 1.75; letter-spacing: -.03em; }
.promise-final { order: -1; }
.gm-sprout { display: block; width: 46px; height: auto; margin-bottom: 28px; overflow: visible; }
.promise-final h2 {
  margin: 0;
  color: var(--gm-cream);
  font-family: var(--gm-sans);
  font-size: clamp(34px, 4.6vw, 76px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.055em;
}
.promise-final h2 em { font-style: normal; }
.promise-cta { margin-top: 40px; color: var(--gm-cream); }
.promise-cta span { color: var(--gm-apricot); }
.institutional-redesign[data-page="home"] .site-footer { margin-top: 0; border-top-color: var(--gm-hair-light); }

/* ---------- 센터의 약속 (연출 모드: 화면 고정 + 한 장씩) ---------- */
/* 100lvh: 휴대폰 주소창이 사라져도 화면 아래에 빈틈이 생기지 않게 가장 큰 화면 높이 기준 */
.gm-motion .promise-stage { background: var(--gm-ember); }
.gm-motion .promise-inner { display: block; height: 100vh; height: 100lvh; padding: 0; }
.gm-motion .promise-bg { position: absolute; inset: 0; display: block; overflow: hidden; }
.gm-motion .promise-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: .18;
  filter: grayscale(1) sepia(.35) contrast(1.05);
  mix-blend-mode: luminosity;
}
.gm-motion .promise-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 0%, rgba(29, 20, 17, .55) 70%),
    linear-gradient(180deg, rgba(29, 20, 17, .6) 0%, rgba(29, 20, 17, .15) 45%, rgba(29, 20, 17, .92) 100%);
}
.gm-motion .promise-top {
  position: absolute;
  z-index: 2;
  top: clamp(30px, 6vh, 64px);
  right: var(--gm-pad);
  left: var(--gm-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gm-motion .promise-count { display: flex; align-items: baseline; gap: 10px; margin: 0; color: rgba(246, 239, 230, .45); font-family: var(--gm-serif); font-size: 19px; }
.promise-count-roll { display: block; height: 1.2em; overflow: hidden; color: var(--gm-cream); line-height: 1.2; }
.promise-count-roll span { display: block; }
.gm-motion .promise-words { display: block; }
.gm-motion .promise-word,
.gm-motion .promise-final {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gm-pad);
  border: 0;
  visibility: hidden;
}
.gm-motion .promise-num { font-size: 22px; }
.gm-motion .promise-word strong { margin-top: 4px; font-size: clamp(68px, 15.5vw, 250px); line-height: 1; letter-spacing: -.025em; }
.gm-motion .promise-word p {
  align-self: flex-end;
  width: min(440px, 100%);
  margin-top: clamp(24px, 4vh, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--gm-hair-light);
  font-size: clamp(16px, 1.35vw, 19px);
}
.gm-motion .promise-final { align-items: center; text-align: center; }
.gm-motion .gm-sprout { width: clamp(52px, 5vw, 72px); margin-bottom: clamp(28px, 5vh, 44px); }
.gm-motion .promise-final h2 { font-size: clamp(40px, 5.6vw, 96px); }
.gm-motion .promise-progress {
  position: absolute;
  z-index: 2;
  right: var(--gm-pad);
  bottom: clamp(28px, 5vh, 52px);
  left: var(--gm-pad);
  display: block;
  height: 1px;
  background: var(--gm-hair-light);
}
.promise-progress span { display: block; height: 100%; background: var(--gm-grad); transform: scaleX(0); transform-origin: 0 50%; }
.gm-sprout path { transform-box: fill-box; }
.gm-sprout-left { transform-origin: 100% 100%; }
.gm-sprout-right { transform-origin: 0 100%; }

/* =========================================================
   반응형
   ========================================================= */
@media (max-width: 700px) {
  .gm-hero { min-height: 0; }
  .gm-hero-copy { padding-top: 64px; padding-bottom: 72px; }
  .gm-hero-title { font-size: clamp(40px, 11.6vw, 60px); line-height: 1.14; }
  .gm-hero-bg { width: 100%; }
  .gm-hero-bg img {
    object-position: 64% 40%;
    -webkit-mask-image: linear-gradient(180deg, transparent 10%, rgba(0, 0, 0, .5) 45%, #000 80%);
    mask-image: linear-gradient(180deg, transparent 10%, rgba(0, 0, 0, .5) 45%, #000 80%);
  }
  .gm-hero::before { background: linear-gradient(180deg, rgba(110, 30, 12, .35) 0%, rgba(110, 30, 12, .2) 50%, rgba(90, 24, 10, .6) 100%); }

  .home-stats { padding-top: 88px; }
  .stats-stage { flex-direction: column; margin-top: 24px; }
  .stat-circle { width: min(300px, 76vw); padding: 22px; }
  .stat-outline { margin: 0 0 -1px; }
  .stat-desc { font-size: 13px; }
  .stats-ring { width: 150vw; }

  .promise-stage { margin-top: 96px; }
  .promise-inner { gap: 44px; padding: 88px 22px; }
  .promise-words { grid-template-columns: 1fr; }
  .gm-motion .promise-word p { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-ring, .stat-orbit { animation: none; }
  .gm-text-link, .gm-text-link span { transition: none; }
}