/* =========================================================
   KERD Platform — 공통 스타일 (디자인 시스템)
   Figma 원본에서 추출: Pretendard / 네이비·블루 / 헤더·푸터
   ========================================================= */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  /* Color */
  --navy:        #192746;   /* 헤더 바 */
  --blue:        #155dfc;   /* 포인트(버튼/링크/활성) */
  --blue-weak:   #eaf0ff;   /* 블루 배경(연) */
  --ink:         #161616;   /* 본문 텍스트 */
  --ink-2:       #4a5565;   /* 슬레이트 텍스트 */
  --gray:        #737373;   /* 보조 텍스트 */
  --line:        #e5e5e5;   /* 보더 */
  --bg:          #f5f5f5;   /* 페이지 배경 */
  --bg-2:        #f1f1f1;   /* 섹션 배경 */
  --white:       #ffffff;
  --green:       #008236;   /* 등재 배지 */
  --amber:       #a65f00;   /* 등재후보 배지 */

  /* Typography */
  --font: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px;

  /* Layout — 실제 KERD(kerd.co.kr) Tailwind 컨테이너와 동일 규격 */
  --wrap: 100%;        /* 콘텐츠 최대폭: 아래 미디어쿼리로 단계별 확장 */
  --pad-x: 16px;       /* 좌우 패딩 (실제 사이트 px-4) */
  --radius: 8px;
  --shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* 실제 KERD Tailwind 컨테이너 단계: 640 / 768 / 1024 / 1280 / 1536px */
@media (min-width: 640px)  { :root { --wrap: 640px; } }
@media (min-width: 768px)  { :root { --wrap: 768px; } }
@media (min-width: 1024px) { :root { --wrap: 1024px; } }
@media (min-width: 1280px) { :root { --wrap: 1280px; } }
@media (min-width: 1536px) { :root { --wrap: 1536px; } }

/* ---------- 2. 리셋/기본 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: var(--fs-16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 3. 스토리보드 프레임(상단 정보표) ---------- */
.sb-meta {
  border: 1px solid var(--ink);
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-12);
  background: var(--white);
}
.sb-meta td { border: 1px solid var(--ink); padding: 6px 10px; vertical-align: top; }
.sb-meta .k { background: var(--bg-2); font-weight: 700; white-space: nowrap; width: 90px; }
.sb-meta .desc { width: 300px; }
.sb-meta .desc .t { font-weight: 700; margin-bottom: 4px; }
.sb-stage { border: 1px solid var(--line); background: var(--white); }

/* ---------- 4. 헤더(GNB) ---------- */
.hd { background: var(--navy); color: var(--white); }
.hd__in {
  max-width: var(--wrap); margin: 0 auto; height: 64px;
  display: flex; align-items: center; gap: 40px; padding: 0 var(--pad-x);
  position: relative; /* 중앙 정렬 GNB 기준점 */
}
.hd__logo { display: flex; align-items: center; }
.hd__logo img { height: 32px; filter: brightness(0) invert(1); } /* 실제 사이트와 동일: 남색 로고를 흰색으로 반전 */
.hd__nav {
  display: flex; gap: 28px; font-size: var(--fs-18);
  position: absolute; left: 50%; transform: translateX(-50%); /* 헤더 정중앙 정렬 */
}
.hd__nav a { color: rgba(255,255,255,.6); transition: color .2s; }
.hd__nav a:hover { color: #ffffff; }
.hd__right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: var(--fs-14); }
.hd__join {
  background: var(--blue); color: #fff; border: 0;
  padding: 8px 16px; border-radius: 6px; font-size: var(--fs-14); font-weight: 600;
}

/* ---------- 5. 페이지 공통 래퍼 ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); }
.page { background: var(--white); min-height: 520px; }
.page__head { padding: 48px 0 24px; border-bottom: 1px solid var(--line); }
.page__title { font-size: 28px; font-weight: 800; }
.page__sub { color: var(--gray); font-size: var(--fs-14); margin-top: 8px; }

/* ---------- 6. 버튼 ---------- */
.btn { border: 1px solid var(--line); background: #fff; padding: 10px 18px; border-radius: 6px; font-size: var(--fs-14); }
.btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 600; }
.btn--lg { padding: 14px 28px; font-size: var(--fs-16); }

/* ---------- 7. 배지 ---------- */
.badge { display: inline-block; font-size: var(--fs-12); padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.badge--green { color: var(--green); background: #e7f6ec; }
.badge--amber { color: var(--amber); background: #fbf1e0; }

/* ---------- 8. 푸터 (실제 kerd.co.kr 구현 기준 · 3단 구조) ---------- */
/* ※ 임시: 현재 라이브 사이트 푸터. 신규 푸터 UX/UI 확정 시 이 블록과 layout.js FOOTER 교체 */
.ft { border-top: 1px solid var(--line); background: #fafafa; color: var(--ink-2); }
.ft__in { max-width: var(--wrap); margin: 0 auto; padding: 40px var(--pad-x) 0;
          display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ft__brand .logo-img { height: 56px; width: auto; object-fit: contain; }
.ft__brand .tagline { color: var(--gray); font-size: var(--fs-14); margin-top: 12px; white-space: nowrap; }
.ft__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.ft__col h4 { font-size: var(--fs-14); font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.ft__col ul li { margin-bottom: 10px; }
.ft__col ul li a { color: var(--gray); font-size: var(--fs-14); }
.ft__col ul li a:hover { color: var(--ink); }
.ft__copy { max-width: var(--wrap); margin: 32px auto 0; padding: 24px var(--pad-x) 32px;
            border-top: 1px solid var(--line); text-align: center; color: var(--gray); font-size: var(--fs-13, 13px); }