/* 
 * 빠다제작소 공식 홈페이지 스타일시트 (style.css)
 * 
 * [디자인 컨셉 - 고품격 엘레강스 크리에이티브 스튜디오]
 * - 배경: 따뜻하고 아늑하며 고급스러운 크림색 (#FAF6EE)
 * - 글자색: 신뢰감 있고 가독성 높은 진한 남색 (#121A2E)
 * - 포인트 컬러: 고급스러운 디자이너 골드 (#D9A036) 및 생동감 있는 오렌지 (#EA580C)
 * - 접근성: 50대 이상 시니어 사용자도 보기 편하도록 글씨 크기를 기본 18px로 크게 설정하고 줄간격을 넉넉히 주었습니다.
 * - 버튼 크기: 모바일 터치 오류가 없도록 넉넉한 높이(최소 52px 이상)와 반응성이 뛰어난 디자인으로 제작되었습니다.
 */

/* 구글 폰트: 한국어 대표 서체인 Noto Sans KR과 세련된 영문 디스플레이 서체 Space Grotesk 탑재 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Playfair+Display:ital,wght@0,600;0,800;1,400&family=Space+Grotesk:wght@500;700&display=swap');

/* 로컬 브라우저 더블 클릭 시 테마 칼라가 지원되도록 표준 CSS 변수 설정 */
:root {
  --color-cream-bg: #FAF6EE;       /* 전체 배경 - 따뜻한 크림색 */
  --color-cream-card: #FFFFFF;     /* 카드 및 컨테이너 배경 - 깔끔한 백색 */
  --color-cream-accent: #F3ECE0;   /* 서브 배경 및 테두리 - 차분한 베이지 */
  --color-navy-dark: #121A2E;      /* 주 텍스트 - 가독성이 극대화된 딥 네이비 */
  --color-navy-light: #243256;     /* 부가 텍스트 및 서브 타이틀 */
  --color-gold-point: #D9A036;     /* 포인트 골드 - 강조 요소 */
  --color-orange-point: #EA580C;   /* 포인트 오렌지 - 액션 버튼 등 */
  --color-orange-hover: #C2410C;   /* 오렌지 마우스 오버 색상 */
  
  --font-sans: 'Noto Sans KR', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Playfair Display', 'Georgia', serif;
  --font-display: 'Space Grotesk', 'Noto Sans KR', sans-serif;
}

/* -----------------------------------------
   기본 브라우저 스타일 재정의 (초보자용 가이드 포함)
   ----------------------------------------- */
html {
  scroll-behavior: smooth; /* 상단 메뉴 클릭 시 부드럽게 화면 이동 */
  font-size: 18px;         /* 50대 이상 시니어를 배려한 큼직한 기본 글자 크기 */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-cream-bg);
  color: var(--color-navy-dark);
  line-height: 1.8;        /* 줄간격을 넓혀 가독성을 높임 */
  overflow-x: hidden;      /* 가로 스크롤 방지 */
}

/* -----------------------------------------
   레이아웃 및 보조 클래스 (애니메이션 & 시각 효과)
   ----------------------------------------- */

/* 포커스 링 스타일 (키보드 및 스크린 리더 접근성 강화) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--color-gold-point);
  outline-offset: 2px;
}

/* 카드 컴포넌트에 적용되는 고급스럽고 부드러운 입체 그림자 */
.soft-shadow {
  box-shadow: 0 12px 36px -4px rgba(18, 26, 46, 0.05), 
              0 8px 24px -6px rgba(18, 26, 46, 0.03),
              0 0 0 1px rgba(18, 26, 46, 0.01);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 카드에 마우스 올렸을 때 정교하고 고급스럽게 반응하는 인터랙션 */
.soft-shadow-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 30px 60px -15px rgba(18, 26, 46, 0.1), 
              0 16px 32px -10px rgba(18, 26, 46, 0.06),
              0 0 0 2px var(--color-gold-point);
}

/* 모바일 햄버거 메뉴 열림 시 바디 스크롤 방지 */
.no-scroll {
  overflow: hidden;
}

/* -----------------------------------------
   은은한 고급 크레이티브 오로라/블롭 배경 애니메이션
   ----------------------------------------- */
@keyframes floatBlob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.15);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: floatBlob 16s infinite alternate ease-in-out;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* -----------------------------------------
   스크롤 요소 나타나기 애니메이션 효과
   ----------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* -----------------------------------------
   헤더 내비게이션 전용 스타일
   ----------------------------------------- */
header {
  backdrop-filter: blur(12px); /* 헤더 투명화 처리 시 뒷배경이 부드럽게 비치도록 처리 */
  border-bottom: 1px solid rgba(18, 26, 46, 0.06);
  transition: all 0.3s ease;
}

/* 모바일 사이드 메뉴 전환 트랜지션 */
#mobile-menu {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* -----------------------------------------
   글자 및 제목 장식용 하이라이트 효과
   ----------------------------------------- */
.highlight-underline {
  position: relative;
  display: inline-block;
}

.highlight-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 12px;
  background-color: rgba(217, 160, 54, 0.3); /* 연한 골드빛 밑줄 강조 */
  z-index: -1;
  border-radius: 4px;
}

/* -----------------------------------------
   구글 플레이스토어 심사용 공식 페이지 전용 스타일
   ----------------------------------------- */
.legal-page-container {
  background-color: var(--color-cream-card);
  border: 1px solid var(--color-cream-accent);
}

/* -----------------------------------------
   문의사항 입력 폼(Form) 요소 스타일
   ----------------------------------------- */
.form-input {
  width: 100%;
  background-color: var(--color-cream-bg);
  border: 2px solid var(--color-cream-accent);
  border-radius: 16px;
  padding: 18px;
  font-size: 16px;
  color: var(--color-navy-dark);
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.form-input:focus {
  border-color: var(--color-gold-point);
  background-color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(217, 160, 54, 0.15);
  outline: none;
}

/* 세련된 격자 배경 패턴 */
.grid-pattern {
  background-image: radial-gradient(rgba(18, 26, 46, 0.04) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}