/* camtalk-agency — 공개 랜딩 스타일시트
   근거 문서: md/DESIGN.md, md/SITE-STRUCTURE.md, md/COPY.md
   디자인 베이스: camtalk.kr (DESIGN.md 1~8항 수치를 그대로 따름)
   주의: 이 파일의 색상값은 BCUT(camtalkplay-web/bcut-web)과 무관한 별도 라이트 테마다. */

/* ---------- 1. 웹폰트 ---------- */
/* 주의: @import는 CSS 스펙상 반드시 다른 규칙보다 먼저 와야 한다(@charset 제외).
   아래 두 줄을 파일 맨 앞에 두지 않으면 브라우저가 조용히 무시해 아이콘/영문 폰트가 깨진다. */

/* Montserrat: 영문/숫자 전용 보조 서체 (DESIGN.md 2.1) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

/* Material Symbols Rounded: GNB/화살표/아코디언 등 UI 크롬 전용 (DESIGN.md 5.5) */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* Paperozi(Paperlogy), jsdelivr projectnoonnu/2408-3, 9단계 전체 굵기 로드 (DESIGN.md 2.1) */
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

/* GmarketSans는 DESIGN.md 2.1항에 따라 임팩트 숫자(예: 누적 캠톡커 수) 전용이다.
   이번 COPY.md에는 검증되지 않은 통계 수치를 임의로 넣지 않았으므로, 현재 화면에는
   GmarketSans를 실제로 쓰는 곳이 없다. 불필요한 폰트 로드를 피하기 위해 지금은
   @font-face를 걸지 않는다. 추후 검증된 통계 수치가 생기면 이 자리에 추가한다. */

/* ---------- 2. 디자인 토큰 ---------- */

:root {
  /* 레드 두 종류 (DESIGN.md 3.1) */
  --red-action: #ff0033;   /* CTA, eyebrow 라벨, 배지: "지금 눌러야 하는 것" */
  --red-brand: #cc0c0c;    /* 로고 강조, selection, hover 전환: "브랜드를 알아보게 하는 것" */

  /* 뉴트럴 (DESIGN.md 3.2) */
  --black: #000000;
  --gray-900: #333333;
  --gray-700: #666666;
  --gray-500: #999999;
  --border: #e5e5e5;
  --bg-f0: #f0f0f0;
  --bg-f2: #f2f2f2;
  --bg-f7: #f7f7f7;
  --bg-fa: #fafafa;
  --bg-f8f9fa: #f8f9fa;

  /* 틴트 배경 6종, 섹션 전체 배경 전용 (DESIGN.md 3.3) */
  --tint-blush: #fff6f8;
  --tint-blush-2: #fff9f9;
  --tint-cream: #fbf8ec;
  --tint-cream-2: #fffcef;
  --tint-butter: #fff8e4;
  --tint-rose: #f7dbd8;

  /* 다크 섹션 (DESIGN.md 3.4) */
  --dark: #2d3138;

  /* 타이포 (DESIGN.md 2.2) */
  --font-kr: 'Paperlogy', 'GmarketSans', 'Montserrat', 'Noto Sans KR', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-en: 'Montserrat', 'Paperlogy', sans-serif;

  /* 레이아웃 (DESIGN.md 4항) */
  --container: 1060px;
  --radius-card: 15px;
  --radius-pill: 50px;
  --radius-badge: 30px;
  --section-pad-y: 150px;

  /* 모션 토큰 (DESIGN.md에는 없는 값. Hallmark 감사 반영으로 신규 추가.
     색상·폰트·간격은 전부 위 DESIGN.md 값을 그대로 쓰고, 여기서는 전환 곡선/길이만 이름 붙여 관리한다.
     브라우저 기본 easing인 "ease"를 쓰지 않기 위한 최소 추가다. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: clip; /* 가로 스크롤 방지, 320px 폭까지 안전망 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}

/* Material Symbols Rounded 기본 클래스 (구글 권장 베이스 규칙, 이게 없으면 아이콘명이 그대로 텍스트로 노출된다) */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
  margin: 0;
  overflow-x: clip; /* 구형 Safari 폴백 (html의 overflow-x:clip과 함께 적용) */
  font-family: var(--font-kr);
  font-weight: 500;         /* 본문 기본 500, 흔한 400이 아님 (DESIGN.md 2.2) */
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-900);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red-brand); color: #fff; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* 포커스 링 공통 규칙 (Hallmark 감사 반영 신규 추가).
   기존 파일에는 outline을 지운 곳이 없어 브라우저 기본 링이 이미 표시되고는 있었지만,
   버튼/필/아코디언마다 링 색이 제각각으로 렌더링되는 문제가 있었다.
   브랜드 레드(--red-brand, DESIGN.md 3.1 "브랜드를 알아보게 하는 것" 용도)를 그대로 재사용해
   토큰을 새로 만들지 않고 통일한다. 키보드 포커스에서만 나타나야 하므로 :focus가 아니라
   :focus-visible을 쓰고, 등장은 항상 즉시(트랜지션 없음)다. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--red-brand);
  outline-offset: 2px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- 3. 타이포 유틸리티 ---------- */

.eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--red-action);
  margin-bottom: 18px;
}

.section-headline {
  font-size: 50px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin: 0 0 20px;
  color: var(--black);
  overflow-wrap: anywhere; /* 320px 폭에서 긴 단어가 뷰포트 밖으로 밀려나지 않도록 */
  min-width: 0;
}
.section-headline b { font-weight: 700; }

.section-subcopy {
  font-size: 18px;
  font-weight: 500;
  color: var(--gray-500);
  line-height: 30px;
  margin: 0;
  max-width: 640px;
}

.section-head { margin-bottom: 70px; }

.card-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 12px;
  color: var(--black);
}

.caption {
  font-size: 13px;
  font-weight: 400;
  color: var(--gray-500);
}

/* ---------- 4. 버튼 ---------- */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 17px 34px;
  font-family: var(--font-kr);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap; /* CTA 텍스트가 좁은 화면에서 두 줄로 꺾이지 않도록 함 */
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn-pill:active { transform: translateY(1px); }

.btn-pill--red { background: var(--red-action); color: #fff; }
.btn-pill--red:hover { background: var(--black); color: #fff; }

.btn-pill--black { background: var(--black); color: #fff; }
.btn-pill--black:hover { background: #fff; color: var(--black); box-shadow: inset 0 0 0 1px var(--black); }

.btn-pill--white { background: #fff; color: var(--black); }
.btn-pill--white:hover { background: var(--black); color: #fff; }

.arrow-link {
  position: relative; /* ::before 히트 영역 확장의 기준점 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  white-space: nowrap;
}
/* 원형 화살표 아이콘 자체 크기(38px)가 터치 최소 권장 크기(44px)에 못 미쳐,
   보이지 않는 히트 영역만 넓힌다. 시각적 크기는 그대로 둔다(DESIGN.md 5.2). */
.arrow-link::before {
  content: '';
  position: absolute;
  inset: -6px;
}
.arrow-link .material-symbols-rounded {
  font-size: 38px;
  color: #c5c5c5;
  transition: color var(--dur-short) var(--ease-out);
}
.arrow-link:hover .material-symbols-rounded { color: var(--black); }
.arrow-link:active .material-symbols-rounded { color: var(--red-brand); }

/* ---------- 5. 카드 공통 ---------- */

.card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 50px 30px;
}

/* placeholder 비주얼 블록: 실제 촬영 인물 사진/영상이 소싱되기 전까지 쓰는 자리표시자.
   DESIGN.md 6항에 따라 AI 생성 인물 이미지·스톡포토를 쓰지 않는다.
   DESIGN.md 3.5 예외(135도 하드 스플릿)만 사용해 "이미지 자리"임을 표시한다. */
.media-placeholder {
  position: relative;
  background: linear-gradient(135deg, #f0f0f0 50%, #e5e5e5 50%);
  border-radius: var(--radius-card);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-placeholder span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gray-700);
  background: rgba(255,255,255,.75);
  padding: 6px 14px;
  border-radius: var(--radius-badge);
}
.media-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}
.hero { background-size: cover; background-position: center; }
.section-magazine-feature { background-size: cover; background-position: center; }

/* ---------- 6. 헤더 + 글로벌 네비게이션 ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background var(--dur-short) var(--ease-out), backdrop-filter var(--dur-short) var(--ease-out);
}
/* 스크롤 내려가면 반투명 흰 배경으로 전환 (JS에서 .is-scrolled 추가) */
.site-header.is-scrolled {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }

.logo {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #fff;
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.logo b { color: var(--red-brand); font-weight: 700; }
.site-header.is-scrolled .logo { color: var(--black); }
.site-header.is-scrolled .logo b { color: var(--red-brand); }

/* 히어로가 fixed 헤더 높이만큼 눌리지 않게 보정 — hero는 padding-top으로 처리 */

/* 데스크탑 네비 링크 묶음 */
.site-nav { display: flex; align-items: center; }
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-nav-link {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.site-nav-link:hover { color: #fff; }
.site-nav-link--pill {
  padding: 8px 20px;
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: var(--radius-pill);
}
.site-nav-link--pill:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
  color: #fff;
}
/* 스크롤 후 헤더가 흰 배경일 때 링크 색도 전환 */
.site-header.is-scrolled .site-nav-link { color: var(--gray-700); }
.site-header.is-scrolled .site-nav-link:hover { color: var(--red-action); }
.site-header.is-scrolled .site-nav-link--pill {
  border-color: var(--border);
  color: var(--gray-900);
}
.site-header.is-scrolled .site-nav-link--pill:hover {
  border-color: var(--red-action);
  color: var(--red-action);
  background: none;
}

/* 햄버거 버튼 — 모바일 전용, 데스크탑에서는 숨김 */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger-btn span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.site-header.is-scrolled .hamburger-btn span { background: var(--gray-900); }
.hamburger-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 메뉴 전체화면 오버레이 */
.mobile-menu {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--dark);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out);
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}
.mobile-menu-links a {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.mobile-menu-links a:hover { color: #fff; }
.mobile-menu-links .mobile-menu-cta {
  margin-top: 8px;
  padding: 16px 44px;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-pill);
  font-size: 19px;
  color: #fff;
}
.mobile-menu-links .mobile-menu-cta:hover { border-color: #fff; }

/* 로그인 후 닉네임/계정명 배지 */
.site-nav-member-badge {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-badge);
  background: rgba(255,255,255,0.15);
  color: #fff;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.site-header.is-scrolled .site-nav-member-badge {
  background: var(--tint-blush);
  color: var(--red-brand);
}

/* 배지 내 등급 텍스트 */
.site-nav-member-badge em {
  font-style: normal;
  font-size: 10px;
  opacity: 0.75;
  margin-left: 4px;
}
/* 관리자 배지 */
.site-nav-member-badge--admin {
  background: rgba(255,0,51,0.15);
  color: #fff;
}
.site-header.is-scrolled .site-nav-member-badge--admin {
  background: #fff0f3;
  color: var(--red-brand);
}
/* 모델회원 배지 */
.site-nav-member-badge--model {
  background: rgba(200,150,255,0.2);
}
.site-header.is-scrolled .site-nav-member-badge--model {
  background: #f0e6ff;
  color: #7c3aed;
}

/* 로그아웃 링크 — 작고 흐릿하게 */
.site-nav-link--logout {
  font-size: 12px;
  opacity: 0.65;
}
.site-nav-link--logout:hover { opacity: 1; }

/* 반응형: 768px 이하에서 햄버거 노출, 데스크탑 링크 숨김 */
@media (max-width: 768px) {
  .site-nav-links { display: none; }
  .hamburger-btn { display: flex; }
}

/* ---------- 7. 섹션 1. 히어로 ---------- */

.hero {
  position: relative;
  min-height: 92vh;   /* 구형 브라우저 폴백 */
  min-height: 92dvh;  /* 모바일 브라우저 주소창 접힘/펼침에 반응하는 실제 뷰포트 높이 */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(135deg, #ececec 50%, #e0e0e0 50%);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.hero-placeholder-label {
  /* 헤더 로고(좌상단), 히어로 카피(좌하단)와 겹치지 않도록 우상단에 고정한다 */
  position: absolute;
  top: 84px; right: 32px;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.25);
  padding: 6px 14px;
  border-radius: var(--radius-badge);
  max-width: 55%;
  text-align: right;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 110px;
  max-width: 720px;
  min-width: 0; /* .hero-content가 .hero(flex 컨테이너)의 유일한 자식이라, 기본 min-width:auto 상태면
                   긴 헤드라인 텍스트가 줄바꿈되지 않고 뷰포트 밖으로 넘치는 문제가 있었다. */
  width: 100%;
}
.hero-content .eyebrow { color: #ffb3c2; }
.hero-headline {
  font-size: 60px;
  font-weight: 200;
  line-height: 1.25;
  letter-spacing: -1px;
  color: #fff;
  margin: 0 0 26px;
  overflow-wrap: anywhere; /* 320px 폭에서 긴 단어가 뷰포트 밖으로 밀려나지 않도록 */
  min-width: 0;
}
.hero-headline b { font-weight: 700; }
.hero-subcopy {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: rgba(255,255,255,.82);
  margin: 0 0 40px;
  max-width: 520px;
}
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero-scroll-link {
  position: relative; /* ::before 히트 영역 확장의 기준점 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
/* 텍스트 한 줄(약 24px 높이)이 터치 최소 권장 크기(44px)보다 낮아, 보이지 않는
   히트 영역만 넓힌다. 시각적 크기·줄 수는 그대로 둔다. */
.hero-scroll-link::before {
  content: '';
  position: absolute;
  inset: -10px;
}
.hero-scroll-link .material-symbols-rounded { font-size: 22px; }

/* ---------- 7-1. 섹션 3-1. 매거진.화보 제작 (히어로형 이미지 섹션)
   .hero와 같은 배경 자리표시자 패턴(135도 하드 스플릿)을 쓰되, 히어로보다 낮은 높이와
   차분한 다크 그레이 톤으로 구분한다. 실제 이미지는 역대 매거진 표지를 모아 만든
   목업(화보/인쇄물 자체를 보여주는 용도)이라 인물 사진과 다른 톤을 쓴다. ---------- */

.section-magazine-feature {
  position: relative;
  min-height: 60vh;
  min-height: 60dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2a2a 50%, #1a1a1a 50%);
}
.section-magazine-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.section-magazine-feature-label {
  position: absolute;
  top: 32px; right: 32px;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.25);
  padding: 6px 14px;
  border-radius: var(--radius-badge);
  max-width: 55%;
  text-align: right;
}
.magazine-feature-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 90px 0;
}
.magazine-feature-content .eyebrow { color: #ffb3c2; }
.magazine-feature-headline {
  font-size: 38px;
  font-weight: 200;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 16px 0 20px;
  overflow-wrap: anywhere;
  min-width: 0;
}
.magazine-feature-headline b { font-weight: 700; color: var(--red-action); }
.magazine-feature-subcopy {
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  color: rgba(255,255,255,.82);
  margin: 0;
  max-width: 500px;
}

/* ---------- 8. 섹션 2. 캠톡커란 무엇인가 (지그재그) ---------- */

.section-about { padding: var(--section-pad-y) 0; background: #ffffff; }

.zigzag-block {
  display: flex;
  align-items: center;
  gap: 70px;
  padding: 60px 0;
  border-top: 1px solid var(--border);
}
.zigzag-block:first-of-type { border-top: none; }
.zigzag-block.is-reverse { flex-direction: row-reverse; }
.zigzag-media, .zigzag-text { flex: 1 1 0; min-width: 0; }
.zigzag-media .media-placeholder { min-height: 280px; }
.zigzag-step {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--red-action);
  margin-bottom: 14px;
  display: block;
}
.zigzag-text h3 { font-size: 26px; font-weight: 500; line-height: 1.35; margin: 0 0 16px; color: var(--black); }
.zigzag-text p { font-size: 15px; font-weight: 500; color: var(--gray-700); line-height: 1.8; margin: 0 0 22px; }

/* ---------- 9. 섹션 3. 여기서만 가능한 기회 ---------- */

.section-opportunity { padding: var(--section-pad-y) 0; background: var(--tint-blush); }

/* 5개 카드를 3+2로 배치 (앞 3장은 3분할, 뒤 2장은 2분할) */
.opportunity-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.opportunity-grid .card { flex: 1 1 calc(33.333% - 16px); }
.opportunity-grid .card:nth-child(4),
.opportunity-grid .card:nth-child(5) { flex: 1 1 calc(50% - 12px); }
.opportunity-card-index {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 1px;
  margin-bottom: 18px;
  display: block;
}
.opportunity-footer {
  margin-top: 50px;
  text-align: center;
}

/* ---------- 10. 섹션 4. 활동을 뒷받침하는 기본 원칙 (다크) ---------- */

.section-principles { padding: var(--section-pad-y) 0; background: var(--dark); color: #fff; }
.section-principles .eyebrow { color: var(--red-action); }
.section-principles .section-headline { color: #fff; }
.section-principles .section-subcopy { color: rgba(255,255,255,.55); }

.principle-list { margin-top: 70px; }
.principle-item {
  display: flex;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.principle-item:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.principle-index {
  font-family: var(--font-en);
  font-size: 40px;
  font-weight: 200;
  color: rgba(255,255,255,.35);
  flex: 0 0 90px;
}
.principle-body h3 { font-size: 24px; font-weight: 500; margin: 0 0 12px; color: #fff; }
.principle-body p { font-size: 15px; font-weight: 500; line-height: 1.85; color: rgba(255,255,255,.72); margin: 0; }

/* ---------- 11. 섹션 5. 활동 조건과 수익 구조 ---------- */

.section-conditions { padding: var(--section-pad-y) 0; background: var(--tint-butter); }
.conditions-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.conditions-grid .card { flex: 1 1 calc(33.333% - 16px); }
.condition-index {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  color: var(--red-action);
  letter-spacing: 1px;
  margin-bottom: 18px;
  display: block;
}
.condition-card p { font-size: 15px; font-weight: 500; color: var(--gray-700); line-height: 1.85; margin: 0; }

/* 예상 활동 수익 계산기. 신규 지원자는 기본 구간(시급 54,000원)에서 시작하며,
   상위 구간은 전월 실적 달성 후 다음 달에 적용되는 구조라는 점을 select 옵션의
   data-note와 하단 disclaimer로 함께 전달한다(단정적 확정 수치로 읽히지 않도록,
   SITE-STRUCTURE.md 3.3항 원칙). */
.calculator-card { margin-top: 24px; }

/* 실시간 정산 화면 미리보기 (2026.07.21 신설). calculator-card 바로 아래, 같은 카드 톤을
   유지하되 이미지+텍스트 2단 구성이라 zigzag-block과 비슷한 flex 레이아웃을 쓴다. */
.settlement-preview-card {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.settlement-preview-media { flex: 1 1 0; min-width: 0; }
.settlement-preview-media .media-placeholder { min-height: 240px; }
.settlement-preview-text { flex: 1 1 0; min-width: 0; }
.settlement-preview-text .card-title { margin-top: 10px; }
.calculator-head { margin-bottom: 28px; }
.calculator-honesty-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: var(--black);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  margin-bottom: 14px;
}
.calculator-head p { font-size: 15px; font-weight: 500; color: var(--gray-700); line-height: 1.85; margin: 8px 0 0; }
.calculator-body { max-width: 480px; }
.calculator-field { margin-bottom: 20px; }
.calculator-input { max-width: 200px; }
/* 네이티브 브라우저 화살표를 지우는 대신, 선택창임을 알 수 있도록 오른쪽에
   같은 material-symbols 쉐브론을 직접 그린다(FAQ 아코디언과 같은 아이콘). */
.calculator-select-wrap { position: relative; }
.calculator-select { appearance: none; cursor: pointer; padding-right: 48px; width: 100%; }
.calculator-select-arrow {
  position: absolute;
  top: 50%; right: 20px;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--gray-700);
  pointer-events: none;
}
.calculator-tier-note {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 10px 2px 0;
}
.calculator-results {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.calculator-result {
  flex: 1 1 200px;
  background: var(--bg-f8f9fa);
  border-radius: var(--radius-card);
  padding: 20px 24px;
}
.calculator-result-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 8px;
}
.calculator-result-value {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: var(--red-action);
  letter-spacing: -0.02em;
}
.calculator-disclaimer {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-500);
  line-height: 1.7;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ---------- 12. 섹션 6. 이런 분들에게 맞는 활동입니다 ---------- */

.section-fit { padding: var(--section-pad-y) 0; background: #ffffff; }
.fit-grid { display: flex; gap: 24px; }
.fit-card { flex: 1 1 50%; border-radius: var(--radius-card); padding: 50px 40px; }
.fit-card--yes { background: var(--tint-cream-2); }
.fit-card--no { background: var(--tint-rose); }
.fit-card h3 { font-size: 24px; font-weight: 500; margin: 0 0 28px; color: var(--black); }
.fit-card ul li {
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-900);
  line-height: 1.8;
  padding: 14px 0 14px 26px;
  position: relative;
  border-top: 1px solid rgba(0,0,0,.08);
}
.fit-card ul li:first-child { border-top: none; }
.fit-card--yes ul li::before { content: '+'; position: absolute; left: 0; font-weight: 700; color: var(--gray-900); }
.fit-card--no ul li::before { content: '\2013'; position: absolute; left: 0; font-weight: 700; color: var(--gray-700); }

/* ---------- 13. 섹션 7. 활동회원 스토리 (콘텐츠 보류) ---------- */

.section-stories { padding: var(--section-pad-y) 0; background: var(--bg-f7); }

.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.story-placeholder {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-card);
}
.story-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.story-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-f2);
}
.story-card-media .media-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-card-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.story-card-category {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--red-action);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.story-card-name {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
}

.story-card-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--black);
}

.story-card-highlight {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-f8f9fa);
  border-left: 3px solid var(--red-action);
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.story-card-highlight strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
}
.story-card-highlight span {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
}

.story-card-description {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--gray-700);
  line-height: 1.8;
}

.stories-disclaimer {
  margin-top: 28px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-500);
}

/* ---------- 14. 섹션 8. 지원 절차 ---------- */

.section-process { padding: var(--section-pad-y) 0; background: var(--tint-cream); }
.process-row { display: flex; align-items: stretch; gap: 0; }
.process-step { flex: 1 1 0; background: #fff; border-radius: var(--radius-card); padding: 40px 26px; }
.process-arrow {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
}
.process-arrow .material-symbols-rounded { font-size: 26px; }
.process-badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 24px;
}
.process-step h3 { font-size: 22px; font-weight: 500; margin: 0 0 12px; color: var(--black); }
.process-step p { font-size: 14px; font-weight: 500; color: var(--gray-700); line-height: 1.75; margin: 0 0 18px; }
.process-not-required {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-500);
  border-top: 1px solid var(--border);
  padding-top: 14px;
  line-height: 1.7;
}
.process-not-required b { font-weight: 700; color: var(--gray-700); }
.process-footer { text-align: center; margin-top: 60px; }

/* ---------- 15. FAQ ---------- */

.section-faq { padding: var(--section-pad-y) 0; background: #ffffff; }
.faq-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 50px; }
.faq-tag {
  border: none;
  background: var(--bg-f0);
  color: var(--gray-700);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.faq-tag:hover { background: var(--border); }
.faq-tag:active { transform: translateY(1px); }
.faq-tag.is-active { background: var(--black); color: #fff; }
.faq-tag.is-active:hover { background: var(--black); }

.faq-group { margin-bottom: 10px; }
.faq-group-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--red-action);
  margin: 40px 0 10px;
}
.faq-group:first-child .faq-group-title { margin-top: 0; }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  padding: 24px 0;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  transition: color var(--dur-short) var(--ease-out);
}
.faq-question:hover { color: var(--red-brand); }
.faq-question .material-symbols-rounded {
  flex: none;
  font-size: 24px;
  color: var(--gray-500);
  transition: transform var(--dur-short) var(--ease-in-out);
}
.faq-item.is-open .faq-question .material-symbols-rounded { transform: rotate(180deg); }
/* 아코디언은 max-height가 아니라 grid-template-rows로 연다(motion.md 권장 방식).
   max-height 트랜지션은 layout 속성을 건드리고, JS로 scrollHeight를 매번 다시 계산해야 하는
   문제가 있었다. grid-rows는 트랜지션 대상이 transform/opacity는 아니지만, 콘텐츠 높이를
   JS 없이 CSS만으로 다루는 표준 아코디언 기법이라 motion.md가 명시적으로 예외로 인정한다. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-long) var(--ease-in-out);
}
/* 실제 grid 아이템은 .faq-answer__inner다. padding-bottom(26px)을 p가 아니라
   이 wrapper 안쪽에 두는 이유: grid 아이템 자신의 padding은 자신의 overflow:hidden으로
   잘리지 않는다(높이를 0으로 눌러도 padding-bottom은 박스 모델상 그대로 남는다).
   대신 wrapper의 높이를 0으로 누르고, 그 안의 p 전체(padding 포함)를 wrapper의
   overflow:hidden으로 자식으로서 잘라내야 진짜 0으로 접힌다. */
.faq-answer__inner {
  overflow: hidden;
  min-height: 0;
}
.faq-answer p {
  margin: 0;
  padding: 0 0 26px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  line-height: 1.85;
  max-width: 720px;
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }

/* ---------- 16. 지원/상담 신청 폼 ---------- */

.section-apply { padding: var(--section-pad-y) 0; background: var(--tint-blush-2); }
.apply-wrap { display: flex; gap: 80px; }
.apply-intro { flex: 0 0 340px; }
.apply-intro p { font-size: 15px; font-weight: 500; color: var(--gray-700); line-height: 1.85; }
.apply-form { flex: 1 1 0; }

.form-row { margin-bottom: 22px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 10px;
}
.form-input {
  width: 100%;
  border: none;
  background: var(--bg-f8f9fa);
  border-radius: var(--radius-pill);
  padding: 16px 24px;
  font-family: var(--font-kr);
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-900);
  transition: background-color var(--dur-short) var(--ease-out);
}
.form-input::placeholder { color: var(--gray-500); }
.form-input:hover { background: var(--bg-f2); }
.form-input:focus-visible {
  outline: 2px solid var(--red-brand);
  outline-offset: 1px;
  background: #ffffff;
}

.pill-options { display: flex; flex-wrap: wrap; gap: 10px; }
/* 라디오는 시각적으로 숨기되(0,0 크기) 문서 흐름에는 남겨 키보드 포커스를 유지한다.
   포커스 링은 실제 input이 아니라 옆의 라벨(필 모양)에 그린다 — input이 0x0이라 그대로
   두면 :focus-visible outline이 아예 안 보인다. */
.pill-options input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-options label {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--bg-f8f9fa);
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-700);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.pill-options input:checked + label { background: var(--black); color: #fff; }
.pill-options input:focus-visible + label {
  outline: 2px solid var(--red-brand);
  outline-offset: 2px;
}

.form-textarea {
  width: 100%;
  border: none;
  background: var(--bg-f8f9fa);
  border-radius: 24px;
  padding: 18px 24px;
  font-family: var(--font-kr);
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-900);
  resize: vertical;
  min-height: 90px;
  transition: background-color var(--dur-short) var(--ease-out);
}
.form-textarea::placeholder { color: var(--gray-500); }
.form-textarea:hover { background: var(--bg-f2); }
.form-textarea:focus-visible {
  outline: 2px solid var(--red-brand);
  outline-offset: 1px;
  background: #ffffff;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 30px 0 26px;
}
.form-consent input {
  margin-top: 4px;
  accent-color: var(--red-action); /* 브라우저 기본 파란 체크박스 대신 기존 액션 레드 토큰 재사용 */
}
.form-consent label { font-size: 13px; font-weight: 500; color: var(--gray-700); line-height: 1.6; }

.section-headline--sm { font-size: 36px; }
.apply-feedback { margin-top: 16px; }

/* ---------- 17. 푸터 ---------- */

.site-footer { background: var(--bg-f2); border-top: 1px solid var(--border); padding: 60px 0 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.footer-info p { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--gray-700); }
.footer-links { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.footer-links a {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.footer-links a:hover { color: var(--red-brand); }
.footer-links .admin-link {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
}
.footer-copyright {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-500);
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

/* ---------- 18. 반응형 (DESIGN.md 8항, 1000px 기준) ---------- */

@media (max-width: 1000px) {
  :root { --section-pad-y: 90px; }
  .container { padding: 0 20px; }

  .hero-headline { font-size: 40px; }
  .magazine-feature-headline { font-size: 28px; }
  .section-headline { font-size: 32px; }
  .section-subcopy { font-size: 16px; line-height: 26px; }

  .zigzag-block, .zigzag-block.is-reverse { flex-direction: column; gap: 30px; }

  .opportunity-grid .card,
  .opportunity-grid .card:nth-child(4),
  .opportunity-grid .card:nth-child(5) { flex: 1 1 100%; }

  .conditions-grid .card { flex: 1 1 100%; }

  .settlement-preview-card { flex-direction: column; gap: 24px; }

  .fit-grid { flex-direction: column; }

  .stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .process-row { flex-direction: column; }
  .process-arrow { transform: rotate(90deg); padding: 6px 0; }

  .apply-wrap { flex-direction: column; gap: 30px; }
  .apply-intro { flex: none; }

  .footer-top { flex-direction: column; }
}

@media (max-width: 640px) {
  .hero-headline { font-size: 32px; }
  .hero-subcopy { font-size: 15px; }
  .magazine-feature-headline { font-size: 24px; }
  .section-headline { font-size: 26px; }
  .stories-grid { grid-template-columns: 1fr; }
}

/* ---------- 19. 이용약관/개인정보처리방침 (2026.07.21 신설)
   auth.css의 .auth-header/.mypage-header는 밝은 배경 위에서 .logo(기본 흰색 텍스트, 히어로의
   어두운 배경 전제로 만들어짐)를 덮어쓰지 않아 로고가 거의 안 보이는 기존 문제가 있다
   (signup.php/login.php/mypage/* 전반에 해당, 이번 작업 범위 밖이라 수정하지 않고 사용자에게
   별도로 확인만 요청한다). 새로 만드는 이 페이지들은 그 패턴을 재사용하지 않고 로고 색을
   명시적으로 지정한다. ---------- */

.legal-shell { min-height: 100vh; background: #fff; }
.legal-header { padding: 24px 0; border-bottom: 1px solid var(--border); }
.legal-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.legal-header .logo { color: var(--black); }
.legal-header .logo b { color: var(--red-brand); }
.legal-back-link { font-size: 14px; font-weight: 700; color: var(--gray-700); white-space: nowrap; }
.legal-main { padding: 60px 0 120px; }
.legal-article { max-width: 760px; margin: 0 auto; }
.legal-article h1 { font-size: 30px; font-weight: 700; margin: 0 0 8px; color: var(--black); overflow-wrap: anywhere; }
.legal-meta { font-size: 13px; color: var(--gray-500); margin: 0 0 48px; }
.legal-article h2 { font-size: 18px; font-weight: 700; margin: 44px 0 14px; color: var(--black); overflow-wrap: anywhere; }
.legal-article p, .legal-article li { font-size: 15px; line-height: 1.9; color: var(--gray-900); margin: 0 0 10px; overflow-wrap: anywhere; }
.legal-article ol, .legal-article ul { padding-left: 20px; margin: 0 0 16px; }
.legal-article ul { list-style: disc; }
.legal-article ol { list-style: decimal; }
.legal-table-wrap { overflow-x: auto; margin: 16px 0 24px; -webkit-overflow-scrolling: touch; }
.legal-article table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; margin: 0; }
.legal-article th, .legal-article td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-article th { background: var(--bg-f7); font-weight: 700; white-space: nowrap; }
.legal-article strong { font-weight: 700; }

@media (max-width: 640px) {
  .legal-article h1 { font-size: 24px; }
  .legal-article h2 { font-size: 17px; margin: 36px 0 12px; }
  .legal-main { padding: 40px 0 80px; }
}

/* ---------- 가독성 줄바꿈 규칙 ---------- */

h1, h2, h3,
.hero-headline,
.section-headline,
.magazine-feature-headline,
.card-title,
.story-card-title {
  text-wrap: balance;
}

p, li,
.hero-subcopy,
.section-subcopy,
.magazine-feature-subcopy,
.story-card-description,
.stories-disclaimer,
.calculator-disclaimer {
  text-wrap: pretty;
}

@media (max-width: 767px) {
  br.br-pc { display: none; }
}