/* =========================================================================
   대구·경북 청년 아카데미 5기 — 라이트·플랫·절제 테마 (Pinterest 규율)
   디자인 토큰(여기 한 곳에서 색/톤 조정) + 공통 컴포넌트 클래스.
   Tailwind 유틸리티는 CDN에서, 아래 컴포넌트 클래스는 순수 CSS로 제공.
   원칙: 그라데이션/카드그림자/blur/glow/mesh 없음. 깊이는 사진으로만.
         라디우스 3값(16 / 32 / pill). 레드는 희소하게.
   ========================================================================= */
:root {
  /* ---- 면(라이트·웜·플랫) ---- */
  --canvas: #ffffff;        /* 순수 흰 면 */
  --surface-soft: #fbfbf9;  /* 페이지 바탕 */
  --surface-card: #f6f6f3;  /* 카드·칩 크림 */
  --secondary-bg: #e5e5e0;  /* 보조 버튼·off 도트 */
  --hairline: #dadad3;      /* 1px 보더 */

  /* ---- 텍스트 ---- */
  --ink: #1a1a17;   /* 헤드라인·버튼 */
  --body: #33332e;  /* 본문 */
  --mute: #62625b;  /* 메타·푸터 */
  --ash: #91918c;   /* placeholder·disabled */

  /* ---- 단일 액센트(브랜드 레드) ---- */
  --brand: #e61e2b;
  --brand-pressed: #c4101c;

  /* ---- 희귀 다크 스트립 ---- */
  --dark: #262622;
  --on-dark: #ffffff;

  /* ---- 라디우스(딱 3값) ---- */
  --radius: 16px;       /* 기본: 버튼·인풋·카드·미디어 */
  --radius-lg: 32px;    /* 큰 카드·모달·대형 피처 */
  --radius-pill: 9999px;/* 칩·검색·아바타 */

  /* 모달에만 허용되는 부드러운 그림자 1개 */
  --modal-shadow: 0 24px 60px rgba(26, 26, 23, 0.18);
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background-color: var(--surface-soft);
  color: var(--body);
  font-family: "Inter", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;        /* 한글 단어 중간 줄바꿈 방지 */
  overflow-wrap: break-word;
  overflow-x: clip;
}

::selection { background: var(--brand); color: #fff; }
img { max-width: 100%; }

/* ---- 레이아웃 ----------------------------------------------------------- */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.section { position: relative; padding-block: clamp(48px, 7vw, 64px); }  /* 섹션 64px 리듬 */
.divider-top { border-top: 1px solid var(--hairline); }
.hairline { height: 1px; border: 0; background: var(--hairline); }

/* ---- 타이포 ------------------------------------------------------------- */
.display {
  color: var(--ink); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.1; font-size: clamp(2.2rem, 5vw, 3.8rem);
}
.h2 {
  color: var(--ink); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; font-size: clamp(1.6rem, 3vw, 2rem);
}
.h3 { color: var(--ink); font-weight: 700; line-height: 1.3; font-size: 1.25rem; }
.lead { color: var(--body); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; }
.kicker { display: inline-block; color: var(--mute); font-weight: 700; font-size: 0.875rem; }
.kicker-brand { color: var(--brand); }
.muted { color: var(--mute); }

/* ---- 버튼 --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  text-decoration: none; user-select: none;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 12px 20px; font-size: 0.9375rem;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-lg { padding: 16px 26px; font-size: 1rem; }
.btn-md { padding: 12px 20px; font-size: 0.9375rem; }
.btn-sm { padding: 9px 16px; font-size: 0.875rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:active { background: var(--brand-pressed); }
.btn-secondary { background: var(--secondary-bg); color: var(--ink); }
.btn-secondary:hover { background: #d9d9d3; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { background: var(--surface-card); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--secondary-bg); color: var(--ash); border-color: transparent; cursor: not-allowed;
}

/* ---- 칩 ----------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--surface-card); border: 1px solid var(--hairline);
  font-size: 0.875rem; font-weight: 600; color: var(--body);
}
.chip-sm { padding: 5px 11px; font-size: 0.8125rem; }
.chip-active { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }

/* ---- 카드 (그림자 없음 · 옵션 1px hairline) ---------------------------- */
.card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius); }
.card-cream { background: var(--surface-card); border-color: transparent; }
.card-lg { border-radius: var(--radius-lg); }
.card-pad { padding: clamp(20px, 3vw, 32px); }

/* 큰 피처 행(이미지/텍스트 좌우 교차)의 텍스트/크림 블록 */
.feature-card {
  background: var(--surface-card); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
}

/* ---- 미디어(이미지 카드) ----------------------------------------------- */
.media { position: relative; border-radius: var(--radius); overflow: hidden; }
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-lg { border-radius: var(--radius-lg); }
.overlay-pill {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--canvas); border: 1px solid var(--hairline);
  color: var(--ink); font-size: 0.8125rem; font-weight: 600;
}

/* ---- 폼 ----------------------------------------------------------------- */
.field {
  display: block; width: 100%;
  background: var(--canvas); border: 1px solid var(--ash); color: var(--ink);
  border-radius: var(--radius); padding: 13px 15px; font-size: 1rem; line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field::placeholder { color: var(--mute); }
.field:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px rgba(26, 26, 23, 0.10); /* 2px ink 보더 + 포커스링 */
}
.label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }

/* ---- stat --------------------------------------------------------------- */
.stat .num { color: var(--ink); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; line-height: 1; }
.stat .lbl { color: var(--mute); font-size: 0.8125rem; margin-top: 6px; }

/* ---- 좌석 도트 그리드 (플랫 · 글로우 없음) ----------------------------- */
.seatgrid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; }
.seat { aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--secondary-bg); }
.seat.on { background: var(--brand); }
.seat.off { background: var(--secondary-bg); }
.seat.ghost { background: transparent; border: 1px solid var(--hairline); }

/* ---- FAQ 아코디언 (플랫 · 레드 plus) ----------------------------------- */
.faq { border-top: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 2px; display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.faq summary::-webkit-details-marker { display: none; }
.faq .q { color: var(--ink); font-weight: 700; font-size: 1.0625rem; }
.faq .ico {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline); color: var(--brand);
  display: grid; place-items: center; transition: transform .2s ease, border-color .2s ease;
}
.faq[open] .ico { transform: rotate(45deg); border-color: var(--brand); }
.faq .a { color: var(--body); line-height: 1.65; padding: 0 2px 22px; max-width: 760px; }

/* ---- 타임라인(플랫 hairline) ------------------------------------------- */
.tl-line { background: var(--hairline); }

/* ---- 아바타 ------------------------------------------------------------- */
.avatar { border-radius: var(--radius-pill); object-fit: cover; border: 1px solid var(--hairline); background: var(--surface-card); }

/* ---- 링크 --------------------------------------------------------------- */
.link-soft { color: var(--mute); text-decoration: none; transition: color .18s ease; }
.link-soft:hover { color: var(--ink); }

/* ---- 헤더 / 모바일 바 (흰 배경 · blur 없음) ---------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid transparent; transition: border-color .25s ease;
}
.site-header.scrolled { border-bottom-color: var(--hairline); }

.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--canvas); border-top: 1px solid var(--hairline);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: none; gap: 10px;
}
@media (max-width: 720px) { .mobilebar { display: flex; } body { padding-bottom: 76px; } }

/* ---- 희귀 다크 스트립 (최종 CTA "한 번"만 의도적 허용) ----------------- */
.strip-dark { background: var(--dark); color: var(--on-dark); }
.strip-dark .display, .strip-dark .h2, .strip-dark .h3 { color: var(--on-dark); }
.strip-dark .lead, .strip-dark .muted { color: rgba(255, 255, 255, 0.85); }
.strip-dark .hairline { background: rgba(255, 255, 255, 0.14); }

/* ---- 스크롤 리빌 (매우 은은하게) --------------------------------------- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .05s; }
.reveal[data-d="2"] { transition-delay: .10s; }
.reveal[data-d="3"] { transition-delay: .15s; }
.reveal[data-d="4"] { transition-delay: .20s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }