/* ============================================================================
   브랜드캅(BrandCop) 디자인 시스템 — css/styles.css
   ----------------------------------------------------------------------------
   이 파일 하나로 사이트의 모든 페이지(index/services/references/request/
   privacy/terms/404/design/admin)가 스타일을 공유합니다.
   ⚠️ 매우 중요: 이 파일의 클래스명이나 변수명을 지우거나 바꾸면 그 클래스를
   쓰는 "모든" 페이지가 한꺼번에 깨집니다. 새 스타일이 필요하면 기존 규칙을
   지우지 말고 "새 클래스를 추가"하는 방식을 권장합니다.

   [목차 — Ctrl+F(⌘F)로 아래 제목을 검색하면 해당 구역으로 바로 이동합니다]
   1. 디자인 토큰 (색상/여백/둥근모서리/그림자 변수) + 다크모드
   2. 리셋/기본 스타일 (body, 제목, 링크 등 브라우저 기본값 정리)
   3. 유틸리티 클래스 (flex, grid, 여백 등 자잘하게 재사용하는 것들)
   4. 글래스(반투명) 효과
   5. 헤더 / 내비게이션
   6. 버튼
   7. 히어로(첫 화면 큰 문구) 영역
   8. 카드 / 그리드 레이아웃
   9. KPI(숫자 강조) 영역
   10. FAQ 아코디언
   11. 필터 탭 (레퍼런스 페이지의 "전체/패션/뷰티..." 버튼)
   12. 트러스트 로고 스트립
   13. 폼(입력 양식) 스타일
   14. 푸터
   15. 스크롤 등장 애니메이션
   16. 페이지 상단 인트로 (서비스/레퍼런스/의뢰 페이지 공통 상단 타이틀)
   17. 관리자 대시보드 전용 스타일
   18. 법적 고지 페이지 전용 스타일 (개인정보처리방침/이용약관)
   19. 반응형 (모바일/태블릿 화면 대응)
   ============================================================================ */

/* 한글이 예쁘게 보이는 웹폰트(Pretendard)를 외부에서 불러옵니다.
   인터넷이 안 되는 환경(사내망 등)에 배포할 경우 이 줄을 지우고
   font-src로 로컬 폰트 파일을 넣어야 합니다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');


/* ============================================================================
   1. 디자인 토큰 (Design Tokens)
   ----------------------------------------------------------------------------
   여기 있는 --변수명 들이 사이트 전체의 "색상표"이자 "간격 규칙"입니다.
   예) 파란색 계열을 전체적으로 바꾸고 싶으면 --color-primary 한 줄만
   수정하면 버튼/링크/강조 텍스트가 전부 한번에 바뀝니다.
   ============================================================================ */
:root{
  /* --- 브랜드 색상 ---
     --color-primary       : 메인 브랜드 컬러(버튼, 링크, 강조 텍스트)
     --color-primary-light : primary보다 밝은 톤 (보조 강조용)
     --color-primary-dark  : primary보다 어두운 톤 (그라디언트, hover 등)
     --color-accent        : 포인트로 쓰는 보조색(초록빛 틸) — 카드 테두리 등
     --color-danger        : 에러/경고/필수(*) 표시용 빨강
     --color-success        : 성공 메시지용 초록                         */
  --color-primary: #1d4ed8;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1e3a8a;
  --color-accent: #0d9488;
  --color-danger: #dc2626;
  --color-success: #16a34a;

  /* rgba()로 반투명 색을 만들 때 이 RGB 숫자를 재사용합니다.
     예: rgba(var(--color-primary-rgb), 0.1) → 연한 파란 배경 */
  --color-primary-rgb: 29, 78, 216;

  /* --- 배경/표면/텍스트 색 (라이트 모드 기본값) ---
     --bg             : 페이지 전체 배경
     --bg-surface     : 카드/헤더처럼 "떠 있는" 요소의 배경(흰색)
     --bg-surface-alt : bg-surface보다 살짝 어두운 대체 배경(구분용)
     --text           : 기본 글자색
     --text-muted     : 보조 설명글, 캡션 등 옅은 글자색
     --border-color   : 테두리선 색
     --glass-bg       : 반투명 유리효과(.glass)에 쓰는 배경               */
  --bg: #f6f8fc;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f1f5f9;
  --text: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --glass-bg: rgba(255, 255, 255, 0.72);

  /* --- 여백 스케일 ---
     디자인에서 쓰는 "간격"을 5단계로 미리 정해둔 것입니다.
     margin/padding 줄 때 직접 px을 쓰지 말고 이 변수를 쓰면
     사이트 전체의 여백 리듬이 일정하게 유지됩니다.
     xs(8px) < sm(16px) < md(28px) < lg(52px) < xl(88px)             */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3.25rem;
  --space-xl: 5.5rem;

  /* --- 모서리 둥글기 / 그림자 --- */
  --border-radius-sm: 8px;   /* 입력창, 뱃지 등 작은 요소 */
  --border-radius: 14px;     /* 카드 기본값 */
  --border-radius-lg: 22px;  /* 큰 강조 박스(CTA 배너 등) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.06); /* 은은한 그림자(카드 기본) */
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);  /* hover 시 더 뜨는 느낌 */
  --shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.12); /* 토스트, 팝업처럼 위에 뜨는 요소 */

  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* 버튼/카드 hover 등 대부분의 애니메이션 속도 */
}

/* --- 다크모드 ---
   html 태그에 data-theme="dark" 속성이 붙으면(js/main.js가 토글 버튼 클릭 시
   자동으로 붙여줌) 위에서 정의한 변수들이 아래 값으로 "덮어써집니다".
   즉, 실제 스타일 규칙(.card, .btn 등)은 변수를 그대로 쓰고 있으므로
   다크모드 전용 CSS를 따로 안 써도 자동으로 다크 버전이 적용됩니다. */
html[data-theme="dark"]{
  --bg: #0a0f1c;
  --bg-surface: #111827;
  --bg-surface-alt: #17223a;
  --text: #eef2f9;
  --text-muted: #93a2ba;
  --border-color: #24304a;
  --glass-bg: rgba(17, 24, 39, 0.72);

  --color-primary: #5b8def;
  --color-primary-light: #7fa8f5;
  --color-accent: #2dd4bf;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   2. 리셋 / 기본 스타일
   ----------------------------------------------------------------------------
   브라우저마다 다른 기본 여백/폰트 등을 통일시키는 구역입니다.
   ============================================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; } /* #faq 같은 앵커 이동 시 부드럽게 스크롤 */
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--transition), color var(--transition); /* 다크모드 전환시 부드럽게 */
  line-height: 1.6;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; } /* 링크 기본 파란색/보라색을 없애고 부모 글자색을 따르게 함 */
h1, h2, h3, h4, h5{ line-height: 1.28; margin: 0 0 0.6em; font-weight: 700; letter-spacing: -0.01em; }
h2{ font-size: clamp(1.75rem, 3vw, 2.5rem); } /* 화면 크기에 따라 자동으로 커지는 반응형 폰트 크기 */
h3{ font-size: 1.375rem; }
h4{ font-size: 1.125rem; }
p{ margin: 0 0 1em; color: var(--text); }
ul{ padding-left: 0; list-style: none; margin: 0; } /* 기본 불릿 제거, 필요하면 개별 클래스에서 다시 추가 */
button{ font-family: inherit; }

::selection{ background: rgba(var(--color-primary-rgb), 0.22); } /* 텍스트 드래그(블록 지정) 시 색상 */

/* .container = 모든 섹션의 "가운데 정렬 + 최대 너비 제한" 담당.
   ⚠️ 다른 클래스와 함께 쓸 때, 그 클래스가 margin을 다시 지정하면
   가운데 정렬이 깨질 수 있으니 주의(예: 과거 .kpi 버그 사례).       */
.container{ max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* ============================================================================
   3. 유틸리티 클래스
   ----------------------------------------------------------------------------
   레고 블록처럼 HTML에 여러 개 조합해서 쓰는 작은 클래스들입니다.
   예) class="flex items-center gap-sm" → flex로 배치 + 세로가운데 + 작은간격
   ============================================================================ */
.section{ padding: var(--space-lg) 0; }         /* 큰 섹션 상하 여백 */
.text-center{ text-align: center; }
.flex{ display: flex; }
.flex-col{ flex-direction: column; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.items-center{ align-items: center; }
.gap-sm{ gap: var(--space-sm); }
.gap-md{ gap: var(--space-md); }
.mt-md{ margin-top: var(--space-md); }

.grid{ display: grid; gap: var(--space-md); }
.grid-2{ grid-template-columns: repeat(2, 1fr); } /* 2칸 */
.grid-3{ grid-template-columns: repeat(3, 1fr); } /* 3칸 */
.grid-4{ grid-template-columns: repeat(4, 1fr); } /* 4칸 (모바일에서는 아래 반응형 구역에서 1칸으로 전환) */

.badge{ /* "Our Services" 같은 작은 알약 모양 라벨 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* ============================================================================
   4. 글래스(반투명 유리) 효과
   ----------------------------------------------------------------------------
   헤더나 강조 카드에 붙이면 배경이 비치면서 블러 처리됩니다.
   ============================================================================ */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%); /* 사파리 대응 */
}

/* ============================================================================
   5. 헤더 / 내비게이션
   ============================================================================ */
.site-header{
  position: sticky; /* 스크롤해도 화면 상단에 고정 */
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* js/main.js가 50px 이상 스크롤되면 body에 이 클래스를 붙여서
   헤더 아래에 옅은 경계선/그림자를 넣어줍니다(스크롤 중이라는 시각적 신호). */
.site-header.scrolled{
  border-bottom-color: var(--border-color);
  box-shadow: var(--shadow-sm);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
}
.logo{ margin: 0; font-size: 1.25rem; }
.logo a{ display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-weight: 800; letter-spacing: -0.02em; }
.logo a::before{ /* 로고 앞의 작은 사각 아이콘(브랜드 마크) — 별도 이미지 없이 CSS로만 그림 */
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.nav{ display: flex; align-items: center; gap: 4px; }
.nav a{
  margin-left: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: color var(--transition), background var(--transition);
}
.nav a:hover{ color: var(--text); background: var(--bg-surface-alt); }
.nav a.btn{ margin-left: 12px; } /* 내비 안의 "단속 의뢰" 버튼만 살짝 더 여백 */

.theme-toggle{ /* 다크모드 전환 버튼(🌙/☀️) */
  margin-left: 8px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), background var(--transition);
}
.theme-toggle:hover{ transform: translateY(-1px); background: var(--bg-surface-alt); }

/* ============================================================================
   6. 버튼
   ----------------------------------------------------------------------------
   사용법: <a class="btn btn-primary">텍스트</a> 처럼 .btn + 색상 클래스를
   함께 씁니다. .btn만 쓰면 테두리만 있는 회색 버튼이 됩니다.
   ============================================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.75rem 1.5rem;
  border-radius: 999px; /* 완전히 둥근 알약 버튼 */
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), opacity var(--transition);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); } /* 클릭 시 살짝 눌리는 느낌 */
.btn:disabled{ opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-primary{ /* 진한 파란색 배경의 메인 버튼 (가장 중요한 행동 유도용) */
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, var(--color-primary-light)));
  color: #fff;
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.28);
}
.btn-primary:hover{ box-shadow: 0 10px 26px rgba(var(--color-primary-rgb), 0.36); transform: translateY(-1px); }

.btn-outline{ /* 테두리만 있는 보조 버튼 */
  background: transparent;
  color: var(--text);
  border-color: var(--border-color);
}
.btn-outline:hover{ border-color: var(--color-primary); color: var(--color-primary); }

.btn-block{ width: 100%; } /* 폼 제출 버튼처럼 가로 꽉 채울 때 */

/* ============================================================================
   7. 히어로(첫 화면) 영역 — index.html 최상단 큰 문구
   ============================================================================ */
.hero{ padding: var(--space-xl) 0 var(--space-lg); position: relative; overflow: hidden; }
.hero::before{ /* 히어로 뒤에 은은하게 퍼지는 파란색 원형 그라디언트 배경 장식 */
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 480px;
  background: radial-gradient(60% 60% at 50% 0%, rgba(var(--color-primary-rgb), 0.16), transparent 70%);
  z-index: -1;
}
.hero-content{ max-width: 760px; margin: 0 auto; text-align: center; }
.hero h2{ font-size: clamp(2.1rem, 4.4vw, 3.25rem); }
.hero-subtitle{ font-size: 1.15rem; color: var(--text-muted); max-width: 560px; margin: 0 auto; }
.hero-ctas{ margin-top: var(--space-sm); }

/* ============================================================================
   8. 카드 / 그리드
   ----------------------------------------------------------------------------
   .card는 사이트 전체에서 재사용되는 "흰색 박스" 기본 단위입니다.
   (서비스 소개, 성공사례, 관리자 통계 등 거의 모든 곳에서 사용)
   ============================================================================ */
.card{
  background: var(--bg-surface);
  padding: 1.75rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); } /* 마우스 올리면 살짝 떠오름 */
.card h3, .card h4{ color: var(--text); }
.card p:last-child{ margin-bottom: 0; }

/* ============================================================================
   9. KPI(핵심 지표) 영역 — index.html의 "1,240+ / 18시간 / 95%" 3칸 박스
   ----------------------------------------------------------------------------
   ⚠️ 주의: 이 요소는 HTML에서 class="kpi container"처럼 .container와
   함께 쓰입니다. 그래서 여기서는 margin-top "만" 지정하고 margin-left/right는
   절대 건드리지 않습니다 — margin 전체를 재지정하면 .container의
   "margin: 0 auto"(가운데 정렬)를 덮어써서 넓은 화면에서 왼쪽으로 쏠려
   보이는 버그가 재발합니다(과거 실제로 발생했던 문제).
   ============================================================================ */
.kpi{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md); /* margin: ... 0 0 처럼 축약형을 쓰지 말 것! */
  padding: 0 0 var(--space-md);
}
.kpi-item{
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1.85rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.kpi-item strong{ display: block; font-size: clamp(2.5rem, 4.2vw, 3.25rem); color: var(--color-primary); letter-spacing: -0.02em; margin-bottom: 0.35rem; } /* 고객이 한눈에 알아보도록 크게: 화면 크기에 맞춰 40~52px 사이로 자동 조절 */
.kpi-item span{ color: var(--text-muted); font-size: 0.9375rem; font-weight: 600; }
/* ⚠️ 버그 수정: 바로 아래 ".kpi-item span"이 라벨 텍스트("누적 삭제 성공 건수")용
   회색/작은 글씨 규칙인데, span 태그 자체를 대상으로 하다 보니 숫자 카운터
   (<span class="counter-value">)에도 함께 적용되어 숫자가 작고 흐리게 보이는
   문제가 있었음. ".kpi-item .counter-value"처럼 클래스를 2개 겹쳐 써서
   우선순위를 높이고, 색상/크기를 다시 명시적으로 지정해 덮어씀. */
.kpi-item .counter-value{ font-size: 1em; color: var(--color-primary); font-weight: inherit; }

/* ============================================================================
   10. 프로세스 스텝 (index.html "01.접수 → 02.분석 → 03.조치 → 04.보고")
   ============================================================================ */
.process .card strong{ display: inline-block; }

/* ============================================================================
   11. FAQ 아코디언 (index.html 하단 "자주 묻는 질문")
   ----------------------------------------------------------------------------
   동작 원리: 평소엔 .faq-answer의 높이(max-height)가 0이라 안 보이다가,
   js/main.js가 질문 클릭 시 부모 .faq-item에 "open" 클래스를 붙이면
   아래 .faq-item.open .faq-answer 규칙이 적용되어 펼쳐집니다.
   ============================================================================ */
.faq-item{
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: transparent;
  border: none;
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
}
.faq-question .icon{ /* 오른쪽의 + 아이콘. 열리면 45도 회전해서 ×모양이 됨 */
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: transform var(--transition);
  color: var(--color-primary);
}
.faq-item.open .faq-question .icon{ transform: rotate(45deg); }
.faq-answer{
  max-height: 0; /* 기본값: 접힌 상태 */
  overflow: hidden;
  transition: max-height var(--transition), padding var(--transition);
  color: var(--text-muted);
  padding: 0 1.4rem;
}
.faq-item.open .faq-answer{ max-height: 320px; padding: 0 1.4rem 1.25rem; } /* 펼침 상태 */

/* ============================================================================
   12. 필터 탭 — references.html의 "전체/패션·의류/뷰티·코스메틱/전자기기·IT"
   버튼과 admin 대시보드의 상태 필터(접수/처리중/완료)에서 재사용됩니다.
   ============================================================================ */
.filter-tabs{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-tab{
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-tab:hover{ color: var(--text); }
.filter-tab.active{ background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* 현재 선택된 탭 */
.ref-card{ transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition); }
.ref-card.hidden{ display: none; } /* js가 필터링할 때 안 맞는 카드에 이 클래스를 붙여 숨김 */

/* ============================================================================
   13. 트러스트 로고 스트립 — index.html 히어로 아래 "패션 브랜드 A · 뷰티..." 줄
   ============================================================================ */
.trust-strip{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

/* ============================================================================
   14. 폼(입력 양식) 스타일 — request.html 단속 의뢰 폼에서 주로 사용
   ============================================================================ */
.form-group{ margin-bottom: 1.15rem; }
.form-label{ display: block; margin-bottom: 0.4rem; font-weight: 700; font-size: 0.9rem; }
.form-hint{ display: block; margin-top: 0.35rem; font-size: 0.8125rem; color: var(--text-muted); } /* 입력창 아래 회색 도움말 */
.form-control{ /* input, select, textarea 공통 스타일 */
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus{ /* 입력창 클릭(포커스)했을 때 파란 테두리 링 */
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}
.form-control.invalid{ border-color: var(--color-danger); } /* js가 검증 실패 시 붙이는 클래스 */
textarea.form-control{ resize: vertical; min-height: 100px; }

.checkbox-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } /* "의심 플랫폼" 체크박스 2열 배치 */
.checkbox-item{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  transition: border-color var(--transition), background var(--transition);
}
.checkbox-item:hover{ border-color: var(--color-primary); }
.checkbox-item input{ accent-color: var(--color-primary); width: 16px; height: 16px; }

.consent-row{ /* 개인정보 동의 체크박스 줄 */
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.consent-row input{ accent-color: var(--color-primary); width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; }
.consent-row a{ color: var(--color-primary); font-weight: 600; text-decoration: underline; }

.field-error{ color: var(--color-danger); font-size: 0.8125rem; margin-top: 0.35rem; display: none; } /* 기본은 숨김 */
.field-error.visible{ display: block; } /* js가 검증 실패 시 이 클래스를 붙여서 보여줌 */

#formMessage{ /* 제출 성공/실패 안내 박스 */
  border-radius: var(--border-radius-sm);
  padding: 0.9rem 1rem;
}
#formMessage.success{ background: rgba(22, 163, 74, 0.1); color: var(--color-success); }
#formMessage.error{ background: rgba(220, 38, 38, 0.1); color: var(--color-danger); }

/* ============================================================================
   15. 푸터 — 모든 공개 페이지 하단 공통 (회사정보 3단 + 하단 저작권 줄)
   ============================================================================ */
.site-footer{
  margin-top: var(--space-lg);
  padding: var(--space-lg) 28px var(--space-md);
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
}
.site-footer .footer-grid{ /* 회사소개 / 바로가기 / 고객지원 3단 배치 */
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-md);
  text-align: left;
  max-width: 1104px;
  margin: 0 auto;
}
.site-footer h5{
  color: var(--text);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.9rem;
}
.site-footer ul li{ margin-bottom: 0.55rem; font-size: 0.9rem; }
.site-footer ul li a{ text-decoration: none; color: var(--text-muted); transition: color var(--transition); }
.site-footer ul li a:hover{ color: var(--color-primary); }
.footer-bottom{ /* 맨 아래 "© 2026 브랜드캅..." 줄 */
  max-width: 1104px;
  margin: var(--space-md) auto 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem;
}
.footer-bottom a{ text-decoration: none; color: var(--text-muted); }
.footer-bottom a:hover{ color: var(--text); }

/* ============================================================================
   16. 스크롤 등장 애니메이션
   ----------------------------------------------------------------------------
   HTML에 class="animate-fade-in"만 붙이면 처음엔 살짝 아래+투명 상태였다가,
   스크롤해서 화면에 보이는 순간 js/main.js(IntersectionObserver)가
   "is-visible" 클래스를 붙여서 위로 스르륵 올라오며 나타납니다.
   animate-stagger-1/2/3 을 함께 붙이면 여러 카드가 순서대로 살짝
   시간차를 두고 나타나는 효과를 줍니다.
   ============================================================================ */
.animate-fade-in{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1), transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-fade-in.is-visible{ opacity: 1; transform: translateY(0); }
.animate-stagger-1.is-visible{ transition-delay: 90ms; }
.animate-stagger-2.is-visible{ transition-delay: 180ms; }
.animate-stagger-3.is-visible{ transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce){ /* 사용자가 OS에서 "동작 줄이기"를 켰다면 애니메이션 생략 */
  .animate-fade-in{ opacity: 1; transform: none; transition: none; }
  html{ scroll-behavior: auto; }
}

/* ============================================================================
   17. 페이지 상단 인트로 — services/references/request/privacy/terms
   페이지 맨 위 "배지 + 큰 제목 + 설명" 공통 블록
   ============================================================================ */
.page-intro{ padding-top: var(--space-lg); padding-bottom: var(--space-md); }
.page-intro h2{ font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: var(--space-sm); }
.page-intro p{ font-size: 1.125rem; color: var(--text-muted); max-width: 620px; margin: 0 auto; }

/* ============================================================================
   18. 관리자 대시보드 전용 스타일 (admin/login.html, admin/index.html)
   ============================================================================ */
.admin-shell{ min-height: 100vh; display: flex; flex-direction: column; }
.admin-topbar{ /* 관리자 페이지 상단바(로고 + 로그아웃 버튼) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}
.admin-topbar .logo{ font-size: 1.125rem; }
.admin-login-wrap{ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.admin-login-card{ width: 100%; max-width: 380px; text-align: center; }
.admin-login-card .mark{
  width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}
.stat-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); margin-bottom: var(--space-md); } /* 총접수/접수/처리중/완료 카드 4개 */
.stat-card{ background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); }
.stat-card .num{ font-size: 1.75rem; font-weight: 800; color: var(--color-primary); }
.stat-card .label{ color: var(--text-muted); font-size: 0.8125rem; font-weight: 600; }

.status-pill{ /* 접수/처리중/완료 상태를 색깔로 구분하는 작은 알약 라벨 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}
.status-pill.received{ background: rgba(220, 38, 38, 0.1); color: var(--color-danger); }     /* 접수(신규) = 빨강 계열: 확인 필요 */
.status-pill.in_progress{ background: rgba(217, 119, 6, 0.14); color: #d97706; }              /* 처리중 = 주황 */
.status-pill.completed{ background: rgba(22, 163, 74, 0.12); color: var(--color-success); }   /* 완료 = 초록 */

.admin-table-wrap{ background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: auto; box-shadow: var(--shadow-sm); }
.admin-table{ width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 920px; }
.admin-table th{
  text-align: left; padding: 0.85rem 1rem; background: var(--bg-surface-alt); color: var(--text-muted);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.admin-table td{ padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.admin-table tbody tr:last-child td{ border-bottom: none; }
.admin-table tbody tr:hover{ background: var(--bg-surface-alt); }
.admin-table .id-cell{ font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.8125rem; color: var(--text-muted); }
.admin-table select.form-control{ padding: 0.4rem 0.6rem; font-size: 0.8125rem; width: auto; }
.detail-row td{ background: var(--bg-surface-alt); } /* "보기" 버튼 눌렀을 때 펼쳐지는 상세 행 */
.detail-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1.5rem; font-size: 0.8125rem; }
.detail-grid dt{ color: var(--text-muted); font-weight: 700; margin-bottom: 0.2rem; }
.detail-grid dd{ margin: 0; color: var(--text); word-break: break-word; }
.detail-toggle{ background: none; border: 1px solid var(--border-color); border-radius: 999px; padding: 4px 12px; font-size: 0.8125rem; cursor: pointer; color: var(--text-muted); }
.detail-toggle:hover{ color: var(--text); border-color: var(--color-primary); }
.admin-empty{ text-align: center; padding: var(--space-lg) 0; color: var(--text-muted); }
.admin-toast{ /* 상태 변경 시 오른쪽 아래에 잠깐 떴다 사라지는 알림 */
  position: fixed; bottom: 24px; right: 24px;
  background: var(--text); color: var(--bg);
  padding: 0.75rem 1.25rem; border-radius: var(--border-radius-sm);
  font-size: 0.875rem; font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
  z-index: 200;
}
.admin-toast.visible{ opacity: 1; transform: translateY(0); }

/* ============================================================================
   19. 법적 고지 페이지 전용 스타일 (privacy.html / terms.html)
   ============================================================================ */
.legal-content{ /* 조항들이 들어가는 흰 박스 */
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-md);
  box-shadow: var(--shadow-sm);
}
.legal-content h2{ font-size: 1.375rem; margin-top: 2.25rem; } /* "제1조 (...)" 제목 */
.legal-content h2:first-child{ margin-top: 0; }
.legal-content p, .legal-content li{ color: var(--text-muted); font-size: 0.9375rem; }
.legal-content ul{ list-style: disc; padding-left: 1.25rem; margin-bottom: 1em; }
.legal-content ol{ list-style: decimal; padding-left: 1.25rem; margin-bottom: 1em; }
.legal-content li{ margin-bottom: 0.4em; }
.legal-content table{ width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.875rem; }
.legal-content th, .legal-content td{ border: 1px solid var(--border-color); padding: 0.6rem 0.75rem; text-align: left; color: var(--text-muted); }
.legal-content th{ background: var(--bg-surface-alt); color: var(--text); font-weight: 700; }
.legal-meta{ color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--space-md); } /* "시행일: ..." 줄 */
.legal-notice{ /* 상단의 "법무 검토 필요" 노란/파란 안내 배너 */
  background: rgba(var(--color-primary-rgb), 0.08);
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
  border-radius: var(--border-radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.875rem;
  color: var(--text);
  margin-bottom: var(--space-md);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================================
   20. 반응형 (화면이 좁아질 때)
   ----------------------------------------------------------------------------
   위에서 만든 3~4칸 그리드들을 화면이 좁아지면 1칸으로 쌓이게 바꿉니다.
   새 그리드 클래스를 추가했는데 모바일에서 안 깨지길 원한다면
   여기 목록에 클래스명을 추가하세요.
   ============================================================================ */
@media (max-width: 980px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .kpi{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: repeat(2, 1fr); }
  .site-footer .footer-grid{ grid-template-columns: 1fr; text-align: center; }
  .footer-bottom{ justify-content: center; text-align: center; }
}

@media (max-width: 720px){
  .site-header .container{ padding: 14px 20px; flex-wrap: wrap; gap: 10px; }
  .nav{ width: 100%; justify-content: center; flex-wrap: wrap; }
  .container{ padding: 0 18px; }
  .checkbox-grid{ grid-template-columns: 1fr; }
}