/* MyPet 디자인 토큰 — app/src/constants/theme.ts 1:1 이식 (단일 소스, 새 색 만들지 말 것) */

:root {
  /* ── Color ───────────────────────────────── */
  --green: #2f7d5e;          /* 주 CTA, 흰 텍스트 OK */
  --green-deep: #2e5d4b;     /* 헤딩 */
  --green-fixed: #dcead9;    /* 칩/배경 */

  --primary: #8bc34a;        /* 연두 강조, 흰글씨 금지 = 버튼 배경 불가 */
  --on-primary: #1f3a0d;

  --secondary: #006491;      /* 스카이 */
  --tertiary: #27695e;       /* 민트 */

  --gold: #caa46a;           /* 프리미엄 포인트/아이콘/보더, 텍스트 금지 */
  --gold-soft: #f3e8d4;

  /* ── Cute 액센트 (P1) — 도들·스티커·배지 포인트 전용. 메인 CTA/본문엔 금지(green 유지).
     2026 cute-alism 파스텔 다색(버터옐로·코랄·라벤더). dopamine 포인트만, 절제 사용. */
  --cute-butter: #ffe2a0;    /* 버터옐로 — 별·반짝임 */
  --cute-butter-ink: #8a6a1f;/* 버터 위 텍스트(대비 AA) */
  --cute-coral: #ffc1bd;     /* 코랄핑크 — 하트·볼터치 */
  --cute-coral-ink: #9a4a45;
  --cute-lav: #ddd6ff;       /* 라벤더 — 도들·스티커 */
  --cute-lav-ink: #5a4ea0;

  --surface: #f7fafe;
  --surface-low: #f1f4f8;

  /* 섹션 기분색 틴트 — alternating 배경. 인접 섹션이 "확실히" 다르게 보이도록 채도를 올린다.
     이전 값(거의 흰색)은 surface(#f7fafe)와 명도차 3~5%뿐이라 경계가 안 보였음.
     캔디 파스텔(cute-alism)로 채도↑ + 명도 8~12% 차이 확보. 텍스트 대비는 여전히 충분. */
  --tint-sky: #d6ebff;     /* 하늘 캔디 */
  --tint-mint: #cdf2e4;    /* 민트 캔디 */
  --tint-peach: #ffe2d4;   /* 피치 캔디 */
  --tint-lav: #e9e3ff;     /* 라벤더 캔디 */
  --tint-butter: #fdf8ea;  /* 버터 — 노랑 채도 더 절제(폰 베젤 대비 과함 방지). 은은한 크림 */
  --on-surface: #181c1f;
  --on-surface-variant: #4a4f54;
  --outline-variant: #d4d8de;

  /* ── Gradients ───────────────────────────── */
  --grad-jewel: linear-gradient(160deg, #235641, #1c3d30, #16302a); /* 프리미엄 hero */
  --grad-warm: linear-gradient(160deg, #fff1ea, #fef7f3, #f7fafe);
  --grad-sky: linear-gradient(160deg, #c9e6ff, #e6f3ff);
  --grad-mint: linear-gradient(160deg, #aeefe2, #c9f3ec);
  --grad-peach: linear-gradient(160deg, #ffdbd0, #ffe9e1);

  /* ── Aurora / 메시 blob (방사형, 부드러운 분위기 레이어) ──────
     섹션별 분위기를 만드는 blob 단색 방사 그라디언트. tokens.css 색만 사용.
     중심은 진하게 → 가장자리 투명으로 자연스럽게 사라지도록 한다. */
  --aurora-mint: radial-gradient(closest-side, #aeefe2 0%, rgba(174, 239, 226, 0.55) 45%, rgba(174, 239, 226, 0) 100%);
  --aurora-sky: radial-gradient(closest-side, #c9e6ff 0%, rgba(201, 230, 255, 0.55) 45%, rgba(201, 230, 255, 0) 100%);
  --aurora-peach: radial-gradient(closest-side, #ffdbd0 0%, rgba(255, 219, 208, 0.55) 45%, rgba(255, 219, 208, 0) 100%);
  /* jewel 다크 그라운드용 — 어두운 녹색 톤의 깊이감 blob */
  --aurora-jewel: radial-gradient(closest-side, #27695e 0%, rgba(39, 105, 94, 0.5) 45%, rgba(39, 105, 94, 0) 100%);
  /* 샴페인골드 톤 blob — 프리미엄 분위기 연속성(아주 옅게, 포인트 1곳). */
  --aurora-gold: radial-gradient(closest-side, #f3e8d4 0%, rgba(202, 164, 106, 0.4) 45%, rgba(202, 164, 106, 0) 100%);

  /* ── Glassmorphism (액센트 전용, 전체 적용 금지) ───────────── */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72); /* backdrop-filter 미지원 폴백 */
  /* 보더 alpha 0.65→0.28: 밝은 파스텔 배경 위에서 흰 1px 림이 '선'으로 보이던 문제 해결.
     림 라이트(글래스 가장자리 광택)는 옅게만 남기고, 카드 분리는 soft shadow가 담당. */
  --glass-border: rgba(255, 255, 255, 0.28);
  --glass-blur: 14px;
  /* jewel 다크 위 글래스 */
  --glass-bg-dark: rgba(22, 48, 42, 0.42);
  --glass-bg-dark-strong: rgba(22, 48, 42, 0.82);
  --glass-border-dark: rgba(202, 164, 106, 0.4); /* 골드 보더 톤 */

  /* ── 샴페인골드 메탈릭 (jewel 다크 위에서만 — 보더/구분선/아이콘) ──
     라이트→골드→딥의 각도 그라디언트로 금속 광택 표현. 텍스트엔 금지. */
  --gold-metallic: linear-gradient(135deg, #f3e8d4 0%, #caa46a 42%, #9a7b3f 70%, #caa46a 100%);
  --gold-metallic-line: linear-gradient(90deg, rgba(202, 164, 106, 0) 0%, #caa46a 50%, rgba(202, 164, 106, 0) 100%);
  --gold-deep: #9a7b3f;

  /* ── 미세 노이즈 텍스처 (data-uri SVG, 글래스/jewel 위 입자감) ── */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* ── Radii ───────────────────────────────── */
  --radius-pill: 9999px;
  --radius-card: 22px;
  --radius-hero: 26px;
  --radius-sm: 16px;

  /* ── Shadows (또렷·배경에 안 녹게) ────────── */
  --shadow-rest: 0 1px 3px rgba(24, 28, 31, 0.08), 0 1px 2px rgba(24, 28, 31, 0.06);
  --shadow-raised: 0 6px 18px rgba(24, 28, 31, 0.1), 0 2px 6px rgba(24, 28, 31, 0.08);
  --shadow-overlay: 0 16px 40px rgba(24, 28, 31, 0.16), 0 4px 12px rgba(24, 28, 31, 0.1);

  /* ── Claymorphism (v3 — 점토풍 입체. 포인트 요소만, 화면당 2~4곳 절제) ──────
     바깥 soft drop(떠있음) + 안쪽 위 흰 하이라이트(윗면 빛) + 안쪽 아래 그림자(눌린 아랫면).
     신뢰 브랜드라 alpha 절제(장난감 X, 부드러운 프리미엄 O). */
  --radius-clay: 28px;
  --clay-rest:
    0 10px 22px rgba(24, 28, 31, 0.1),
    inset 0 2px 3px rgba(255, 255, 255, 0.85),
    inset 0 -3px 6px rgba(24, 28, 31, 0.07);
  --clay-raised:
    0 18px 34px rgba(24, 28, 31, 0.14),
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -4px 8px rgba(24, 28, 31, 0.09);
  /* 원형(아이콘 원·스텝 번호)용 — 더 동그란 점토 알사탕 느낌 */
  --clay-orb:
    0 8px 16px rgba(24, 28, 31, 0.12),
    inset 0 3px 4px rgba(255, 255, 255, 0.9),
    inset 0 -4px 7px rgba(24, 28, 31, 0.1);
  /* jewel(다크) 배경 위 점토 — 흰 하이라이트 대신 골드 톤 광택 */
  --clay-dark:
    0 12px 26px rgba(0, 0, 0, 0.35),
    inset 0 2px 3px rgba(243, 232, 212, 0.25),
    inset 0 -4px 8px rgba(0, 0, 0, 0.3);

  /* ════════════════════════════════════════════════════════════════
     v7 재디자인 — Warm Light Luxury + Cute (따뜻한 밝은 럭셔리 + 사랑스러움)
     크림/아이보리 베이스 + 샴페인골드 메탈릭. 차가운 블루빛 흰색·다색 파스텔 폐기.
     호텔 브로셔 같은 따뜻한 미니멀. 다크 톤 폐기(사용자 피드백).
     ════════════════════════════════════════════════════════════════ */
  /* 쿨 아이보리 배경 3단(베이스 → 카드 → 강조). 노란기 빼고 살짝 회청빛 — 차가운 럭셔리.
     완전 흰색(차가움 과함)도, 다크도 아닌 중간. 사용자 피드백: "조금 더 차가운 컬러". */
  --cream: #f3f4f2;          /* 페이지 베이스(쿨 아이보리/오트밀) */
  --cream-2: #eaece9;        /* 섹션 미세 변화(살짝 진한 쿨 그레이지) */
  --cream-card: #fcfdfc;     /* 카드(거의 흰, 미세 쿨) */
  --cream-deep: #dde0dc;     /* 구분/보더 톤 */

  /* 텍스트 — 쿨 차콜(쿨 아이보리 배경과 조화). 골드 액센트와 쿨/웜 대비로 럭셔리. */
  --ink: #232629;            /* 헤딩(쿨 진한 차콜) */
  --ink-soft: #51555a;       /* 본문 */
  --ink-dim: #80858b;        /* 부연/캡션 */

  /* 샴페인골드 럭셔리 — 보더/헤어라인/숫자강조/아이콘. 크림 위 골드텍스트는 큰 글자만(대비 확인). */
  --champagne: #c19a5b;      /* 메인 골드(크림 위 대비 ↑ 위해 기존 #caa46a보다 살짝 진하게) */
  --champagne-bright: #e3cfa3;
  --champagne-deep: #9a7b3f;
  --champagne-line: linear-gradient(90deg, rgba(193, 154, 91, 0) 0%, rgba(193, 154, 91, 0.6) 50%, rgba(193, 154, 91, 0) 100%);
  --champagne-metallic: linear-gradient(135deg, #e3cfa3 0%, #c19a5b 42%, #9a7b3f 70%, #c19a5b 100%);

  /* v8 포인트 컬러 — 코랄/살구핑크(생동감·사랑스러움). 크림+골드(차분)에 과감한 포인트 1색.
     전략 배치만(CTA·핵심 배지·hover·하트·헤딩 핵심어, 화면당 2~3곳). 과용 금지. */
  --accent: #ff6b5c;          /* 코랄 — 포인트 메인 */
  --accent-deep: #e8503f;     /* 진한 코랄(텍스트·hover) */
  --accent-soft: #ffe4df;     /* 옅은 코랄(배경 fill·배지) */
  --accent-ink: #8a2f23;      /* 코랄 위/옅은코랄 위 텍스트(대비 AA) */
  --accent-glow: rgba(255, 107, 92, 0.35);

  /* 크림 위 글래스 + 골드 헤어라인 */
  --lux-glass: rgba(255, 253, 249, 0.7);
  --lux-glass-strong: rgba(255, 253, 249, 0.9);
  --lux-hairline: rgba(193, 154, 91, 0.28);   /* 카드 보더(골드 헤어라인, 절제) */

  /* 따뜻한 soft shadow(크림 위 깊이, 살짝 골드빛 도는 그림자). */
  --lux-shadow-rest: 0 2px 8px rgba(120, 90, 40, 0.07), 0 1px 3px rgba(120, 90, 40, 0.05);
  --lux-shadow-raised: 0 14px 34px rgba(120, 90, 40, 0.1), 0 3px 10px rgba(120, 90, 40, 0.07);
  --lux-shadow-overlay: 0 26px 56px rgba(120, 90, 40, 0.14), 0 6px 16px rgba(120, 90, 40, 0.08);

  /* 따뜻한 Aurora — 크림/골드/실버 글로우. 밋밋한 단색 탈피 위해 농도 ↑(밝은 배경 위 체감). */
  --aurora-cream: radial-gradient(closest-side, rgba(227, 207, 163, 0.6) 0%, rgba(227, 207, 163, 0.2) 45%, rgba(227, 207, 163, 0) 100%);
  --aurora-champagne: radial-gradient(closest-side, rgba(193, 154, 91, 0.34) 0%, rgba(193, 154, 91, 0.1) 45%, rgba(193, 154, 91, 0) 100%);
  --aurora-cool: radial-gradient(closest-side, rgba(150, 170, 200, 0.24) 0%, rgba(150, 170, 200, 0.07) 45%, rgba(150, 170, 200, 0) 100%);

  /* 발자국 반복 패턴(data-uri SVG) — 솔리드 크림 섹션 배경에 은은히 타일링해 '흰 면 심심함' 제거.
     골드 톤 발자국(큰 패드 + 작은 발가락 4개)을 옅게. 펫 브랜드 정체성 + 텍스처. */
  --paw-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='%23c19a5b' fill-opacity='0.06'%3E%3Cellipse cx='24' cy='30' rx='7' ry='9'/%3E%3Cellipse cx='14' cy='17' rx='3' ry='4'/%3E%3Cellipse cx='24' cy='13' rx='3' ry='4'/%3E%3Cellipse cx='34' cy='17' rx='3' ry='4'/%3E%3Cellipse cx='40' cy='27' rx='2.5' ry='3.5'/%3E%3Cellipse cx='66' cy='66' rx='7' ry='9'/%3E%3Cellipse cx='56' cy='53' rx='3' ry='4'/%3E%3Cellipse cx='66' cy='49' rx='3' ry='4'/%3E%3Cellipse cx='76' cy='53' rx='3' ry='4'/%3E%3Cellipse cx='82' cy='63' rx='2.5' ry='3.5'/%3E%3C/g%3E%3C/svg%3E");

  /* v10 craft — easing 토큰 통일(제각각 곡선 정리). 진입=expo(부드러운 감속), 인터랙션=스프링(통통). */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Font ────────────────────────────────── */
  --font-sans: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* 헤딩 — 둥근 한글 디스플레이(Jua). 라틴은 Quicksand로 폴백돼 MyPet 등도 둥글게. 말랑한 인상. */
  --font-display: 'Jua', 'Quicksand', system-ui, sans-serif;
}

/* ── Reset / Base ──────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
body {
  /* 어떤 섹션도 뷰포트 폭을 넘기지 않도록 가로 스크롤 차단 */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  /* v7 Warm Light Luxury — 따뜻한 크림 베이스(차가운 블루빛 흰색 폐기). */
  background-color: var(--cream);
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  /* 말랑한 인상: 기본 자간 살짝 좁혀 둥근 Quicksand 글자가 모이게. */
  letter-spacing: -0.005em;
}

/* sticky 헤더(약 56px) 아래로 앵커 스크롤이 가리지 않도록 여백 */
:target,
section[id] {
  scroll-margin-top: 72px;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

/* ── Typography 유틸 클래스 (반응형 clamp) ─────────────
   고정 px는 모바일(375px)에서 긴 한글 제목이 단어 단위로 어색하게 깨졌다("두\n축").
   clamp(최소, 가변, 최대)로 모바일에선 작아져 자연 줄바꿈 + 데스크톱에선 큰 위계(운영 사이트 임팩트).
   line-height는 em 배수로 둬 폰트 크기에 비례. word-break/balance로 줄바꿈 품질 보강. */
/* 헤딩 = 둥근 한글 디스플레이(Jua). 말랑한 임팩트 + 크기 대비 강화. Jua는 단일 weight(굵직둥글)라
   font-weight는 normal로 두고 크기로 위계를 만든다. */
.t-display-lg {
  font-family: var(--font-display);
  font-size: clamp(36px, 7.6vw, 60px);
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.t-headline-lg {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.t-headline-md {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.8vw, 30px);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;
}

.t-body-lg {
  font-size: 18px;
  line-height: 29px;
  font-weight: 400;
}

.t-body-md {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.t-label-md {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

/* ── Claymorphism 유틸 (v3) — 점토풍 입체 표면. 포인트 요소만(화면당 2~4곳). ──────
   .clay = 일반 표면(카드/버튼), .clay-orb = 원형(아이콘 원/스텝번호), .clay-dark = jewel 위.
   호버 시 더 부풀어 떠오름(.clay 한정, hover 디바이스만). reduced-motion은 모션만 정지(그림자는 유지). */
.clay {
  border-radius: var(--radius-clay);
  box-shadow: var(--clay-rest);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease;
}
.clay-orb {
  box-shadow: var(--clay-orb);
}
.clay-dark {
  box-shadow: var(--clay-dark);
}
@media (hover: hover) and (pointer: fine) {
  .clay:hover {
    transform: translateY(-3px);
    box-shadow: var(--clay-raised);
  }
}
@media (prefers-reduced-motion: reduce) {
  .clay,
  .clay:hover {
    transition: none;
    transform: none;
  }
}

/* ── Cute 유틸 (P1) — 스티커·도들·통통 모션. 이후 Phase에서 재사용. ──────────
   원칙: 고급 골격 위에 절제된 깜찍 레이어. transform/opacity만(성능). */

/* 스티커 질감 — 살짝 회전 + 또렷 그림자(붙인 느낌). 짝/홀로 반대 기울기. */
.sticker {
  --tilt: -2deg;
  transform: rotate(var(--tilt));
  box-shadow: 0 4px 0 rgba(24, 28, 31, 0.06), var(--shadow-raised);
}
.sticker-r {
  --tilt: 2deg;
}

/* 통통 등장 — 스크롤 진입 시 .pop-in.is-in 으로 톡 튀어나옴(scale+rotate). */
.pop-in {
  opacity: 0;
  transform: scale(0.8) rotate(var(--pop-rot, -4deg));
}
.pop-in.is-in {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* 백스윙 = 통통 */
}

/* 상시 통통(둥실) — 마스코트/아이콘 장식. */
@keyframes cuteFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}
.cute-float {
  animation: cuteFloat 3.6s ease-in-out infinite;
}

/* 하트/별 펄스 — 작은 장식의 박동. */
@keyframes cutePulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.18); opacity: 1; }
}
.cute-pulse {
  animation: cutePulse 2.4s ease-in-out infinite;
}

/* squishy 버튼 — 클릭 시 눌리는 앱 모티프(누름 피드백). */
.squishy {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.squishy:active {
  transform: scale(0.94);
}

/* reduced-motion: 모든 cute 모션 정지(접근성·멀미 방지). */
@media (prefers-reduced-motion: reduce) {
  .pop-in,
  .pop-in.is-in,
  .cute-float,
  .cute-pulse,
  .squishy:active,
  .sticker {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}