/* ==========================================================================
   maeil-common.css
   공통 디자인 토큰 · 전역 리셋 · 공유 컴포넌트
   모든 maeil-*.html 페이지에서 <link rel="stylesheet" href="maeil-common.css"> 로 로드

   구성:
     1. 디자인 토큰 (CSS 변수)
     2. 전역 리셋 & 기본 타이포그래피
     3. 버튼 시스템
     4. 폼 요소 기본 스타일
     5. 내비게이션 공통 스타일
     6. 사이트 푸터
     7. 배경 장식 요소 (그리드·글로우)
     8. 공통 애니메이션 키프레임
   ========================================================================== */


/* ── 1. 디자인 토큰 (CSS 변수) ─────────────────────────────────────────────
   모든 페이지가 참조하는 색상·폰트 팔레트.
   페이지별로 일부 값이 달라야 할 경우 해당 파일의 <style>에서 :root 재선언으로 덮어씀.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* 배경 계층 */
  --bg:       #060910;   /* 최상위 배경 */
  --bg2:      #0a0e1a;   /* 패널 배경 */
  --surface:  #111827;   /* 카드·컨테이너 */
  --surface2: #1a2235;   /* 인풋·보조 컨테이너 */

  /* 테두리 */
  --border:   #1e2d45;

  /* 강조색 */
  --accent:   #00d4aa;   /* 주 강조 (민트 그린) */
  --accent2:  #3b82f6;   /* 보조 강조 (파랑) */

  /* 상태색 */
  --red:      #f43f5e;
  --green:    #10b981;
  --yellow:   #f59e0b;

  /* 텍스트 계층 */
  --text:     #e2e8f0;   /* 기본 텍스트 */
  --text2:    #94a3b8;   /* 보조 텍스트 */
  --text3:    #4a5568;   /* 비활성·힌트 텍스트 */

  /* 폰트 패밀리 */
  --sans: 'Noto Sans KR', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}


/* ── 1-b. 라이트 모드 토큰 ──────────────────────────────────────────────────
   body.light 클래스가 붙으면 아래 변수로 덮어씀.
   ────────────────────────────────────────────────────────────────────────── */
body.light {
  --bg:       #f0f4f8;
  --bg2:      #e8edf3;
  --surface:  #ffffff;
  --surface2: #f1f5f9;
  --border:   #d1dce8;
  --text:     #1e293b;
  --text2:    #475569;
  --text3:    #94a3b8;
}


/* ── 2. 전역 리셋 & 기본 타이포그래피 ──────────────────────────────────────
   box-sizing 통일, 기본 margin·padding 초기화.
   html scroll-behavior 및 body 기본 색상·폰트 설정.
   ────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--sans);
  min-height:  100vh;
}


/* ── 3. 버튼 시스템 ──────────────────────────────────────────────────────────
   .btn         기본 버튼 (inline-flex, 모든 변형의 베이스)
   .btn-primary 주 행동 버튼 (민트 배경)
   .btn-secondary 보조 버튼 (surface2 배경)
   .btn-outline 외곽선 버튼 (투명 배경)
   .btn-danger  위험 행동 버튼 (빨간 계열)
   .btn-sm      소형 버튼
   .btn-lg      대형 버튼 (랜딩페이지 CTA 등)
   .btn-full    전체 너비 버튼
   .btn-icon    아이콘 전용 정사각 버튼
   ────────────────────────────────────────────────────────────────────────── */
.btn {
  padding:         8px 16px;
  border-radius:   8px;
  border:          none;
  cursor:          pointer;
  font-size:       13px;
  font-family:     var(--sans);
  font-weight:     600;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  transition:      all .15s;
}

.btn-primary              { background: var(--accent); color: #000; }
.btn-primary:hover        { background: #00bfa0; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,212,170,.3); }
.btn-primary:disabled     { opacity: .5; transform: none; box-shadow: none; cursor: not-allowed; }

.btn-secondary            { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover      { background: var(--border); }

.btn-outline              { background: transparent; color: var(--text2); border: 1px solid var(--border); }
.btn-outline:hover        { border-color: var(--accent); color: var(--accent); }

.btn-danger               { background: rgba(244,63,94,.12); color: var(--red); border: 1px solid rgba(244,63,94,.2); }
.btn-danger:hover         { background: rgba(244,63,94,.22); }

.btn-sm                   { padding: 5px 10px; font-size: 12px; }
.btn-lg                   { padding: 13px 28px; font-size: 15px; border-radius: 10px; }
.btn-full                 { width: 100%; justify-content: center; }
.btn-icon                 { padding: 7px; width: 32px; height: 32px; justify-content: center; }


/* ── 4. 폼 요소 기본 스타일 ──────────────────────────────────────────────────
   input·select·textarea 의 배경·테두리·포커스 등 공통 처리.
   label 및 .input-hint 보조 텍스트 스타일 포함.
   ────────────────────────────────────────────────────────────────────────── */
label {
  font-size:   12px;
  color:       var(--text2);
  font-weight: 500;
}

input,
select,
textarea {
  background:   var(--surface2);
  border:       1px solid var(--border);
  border-radius: 8px;
  padding:      9px 12px;
  color:        var(--text);
  font-family:  var(--sans);
  font-size:    13.5px;
  transition:   border .15s;
  width:        100%;
}

input:focus,
select:focus,
textarea:focus {
  outline:       none;
  border-color:  var(--accent);
}

input::placeholder,
textarea::placeholder {
  color: var(--text3);
}

input:disabled {
  opacity: .5;
  cursor:  not-allowed;
}

.input-hint {
  font-size: 11px;
  color:     var(--text3);
  margin-top: 3px;
}

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}


/* ── 5. 내비게이션 공통 스타일 ──────────────────────────────────────────────
   상단 고정·sticky nav 에서 공유되는 로고·링크 스타일.
   nav{} 자체의 position(fixed vs sticky)은 각 페이지에서 덮어씀.

   기본값: sticky 60px (공개 페이지 공통)
   랜딩페이지는 자체 <style>에서 position:fixed; height:64px 로 재정의.
   ────────────────────────────────────────────────────────────────────────── */
nav {
  position:         sticky;
  top:              0;
  z-index:          100;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 48px;
  height:           60px;
  background:       rgba(6,9,16,.9);
  backdrop-filter:  blur(12px);
  border-bottom:    1px solid var(--border);
}

/* 로고: "📈 maeil" 형태 */
.nav-logo {
  display:         flex;
  align-items:     center;
  gap:             8px;
  text-decoration: none;
  font-size:       17px;
  font-weight:     700;
  color:           var(--accent);
}

/* 우측 링크 목록 */
.nav-links {
  display:     flex;
  align-items: center;
  gap:         24px;
}

.nav-links a {
  color:           var(--text2);
  text-decoration: none;
  font-size:       13px;
  transition:      color .15s;
}

.nav-links a:hover {
  color: var(--text);
}


/* ── 6. 사이트 푸터 ──────────────────────────────────────────────────────────
   .site-footer       일반 페이지 푸터 (흐름에 포함, 하단 고정 아님)
   .site-footer-fixed 로그인·리셋 같은 전체화면 카드 페이지용 fixed 푸터
   .footer-logo       "📈 maeil" 로고 영역
   .footer-links      링크 목록 (홈, 이용약관 등)
   .footer-copy       저작권 문구
   ────────────────────────────────────────────────────────────────────────── */

/* 일반 푸터 */
.site-footer {
  border-top:      1px solid var(--border);
  padding:         28px 48px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
}

/* Fixed 푸터 — 카드형 페이지(로그인·비밀번호 재설정) 전용 */
.site-footer-fixed {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  border-top:      1px solid var(--border);
  padding:         14px 48px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             8px;
  background:      rgba(6,9,16,.92);
  backdrop-filter: blur(8px);
  z-index:         10;
}

.footer-logo {
  font-size:   14px;
  font-weight: 700;
  color:       var(--accent);
  white-space: nowrap;
}

.footer-links {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
}

.footer-links a {
  color:           var(--text3);
  text-decoration: none;
  font-size:       12px;
  transition:      color .15s;
  white-space:     nowrap;
}

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

.footer-copy {
  font-size:   11px;
  color:       var(--text3);
  white-space: nowrap;
}


/* ── 7. 배경 장식 요소 ───────────────────────────────────────────────────────
   .grid-bg  격자 패턴 전체화면 배경 (로그인·리셋·히어로 등)
   .glow     상단 방사형 글로우 오브 (로그인·리셋)
   ────────────────────────────────────────────────────────────────────────── */
.grid-bg {
  position:         fixed;
  inset:            0;
  background-image: linear-gradient(rgba(0,212,170,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,212,170,.025) 1px, transparent 1px);
  background-size:  44px 44px;
  pointer-events:   none;
}

.glow {
  position:         fixed;
  top:              -20%;
  left:             50%;
  transform:        translateX(-50%);
  width:            500px;
  height:           500px;
  border-radius:    50%;
  background:       radial-gradient(circle, rgba(0,212,170,.08) 0%, transparent 70%);
  pointer-events:   none;
}


/* ── 8. 공통 애니메이션 키프레임 ────────────────────────────────────────────
   @keyframes pulse    깜빡임 (라이브 뱃지, 강조점 등)
   @keyframes fade-up  요소 등장 애니메이션 (로그인 좌측 패널 등)
   @keyframes spin     로딩 스피너
   ────────────────────────────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}