/* ===================================================================
   청년누수케어 · 공통 스타일
   색상 변경은 아래 :root 블록만 수정하면 전체 페이지에 반영됩니다.
   =================================================================== */
:root {
  --bg:          #ffffff;
  --surface:     #f4f6f9;
  --text:        #201e1d;
  --text-soft:   #605d5d;
  --text-mute:   #7d7979;
  --line:        #d7d3d3;
  --accent:      #2e7fe0;
  --accent-deep: #1a63bd;
  --accent-tint: #eef5fe;
  --accent-2:    #2e7fe0;

  --font-head: "Noto Serif KR", "Source Serif 4", serif;
  --font-body: "Source Serif 4", "Noto Serif KR", serif;

  --s1: 5px; --s2: 10px; --s3: 15px;
  --s4: 20px; --s6: 30px; --s8: 40px; --s10: 64px;

  --wrap: 820px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.015em; margin: 0; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: #d8e8fc; }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s4) 80px; }

/* ── 상단 ───────────────────────────────────── */
.topbar {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: baseline; justify-content: space-between;
  padding: var(--s3) 0 var(--s2); font-size: 15px;
}
.topbar .brand { font-weight: 600; color: var(--text); }
.topbar .tel { color: var(--text-soft); }
.rule-thick { height: 4px; background: var(--text); }
.rule-thin  { height: 1px; background: var(--text); margin-top: 3px; }

nav.lnb {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
  padding: var(--s3) 0 0; font-size: 15px;
}
nav.lnb a { color: var(--text-soft); }
nav.lnb a[aria-current="page"] { color: var(--accent-deep); font-weight: 600; }

/* ── 머리글 ─────────────────────────────────── */
header.page { padding-top: var(--s10); }
.kicker { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); font-weight: 600; }
h1 { font-size: clamp(34px, 6.5vw, 50px); line-height: 1.25; margin-top: var(--s3); }
.lead { margin: var(--s4) 0 0; font-size: 21px; color: #444141; }

/* ── 섹션 ───────────────────────────────────── */
.sec { padding-top: var(--s10); }
.sec-label { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--s4); }
h2.sec-title { font-size: 25px; margin-bottom: var(--s3); }
h3.sub-title { font-size: 20px; margin-bottom: var(--s2); }
.lead-sm { color: var(--text-soft); margin: 0 0 var(--s4); }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

/* ── 정의 목록 ──────────────────────────────── */
.dl { margin: 0; }
.dl-row {
  display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.dl-row dt { font-size: 16px; color: var(--text-soft); }
.dl-row dd { margin: 0; font-size: 18px; }

/* ── 수치 ───────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4); }
.stat { border-top: 3px solid var(--text); padding-top: var(--s3); }
.stat-n { font-size: 34px; font-weight: 600; color: var(--accent); line-height: 1.2; }
.stat-l { font-size: 17px; font-weight: 600; margin-top: 4px; }
.stat-note { font-size: 14px; color: var(--text-soft); }

/* ── 목록 ───────────────────────────────────── */
.list { margin: 0; padding-left: 1.2em; color: #444141; }
.list li { margin-bottom: 6px; }

/* ── 줄 항목 ────────────────────────────────── */
.row { display: grid; gap: 2px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.row-name { font-size: 19px; font-weight: 600; }
.row-sub  { font-size: 16px; color: var(--text-soft); }

.row-2col {
  display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: var(--s4); align-items: baseline;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.row-2col > :first-child { font-size: 19px; font-weight: 600; }
.row-2col > :last-child { font-size: 17px; color: #444141; }

/* ── 색인 링크 ──────────────────────────────── */
.idx {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4); align-items: baseline;
  padding: var(--s3); margin: 0 calc(var(--s3) * -1);
  border-bottom: 1px solid var(--line); color: inherit;
}
.idx:hover { background: var(--accent-tint); color: inherit; }
.idx-t { font-size: 19px; font-weight: 600; display: block; }
.idx-d { font-size: 16px; color: var(--text-soft); }
.idx-a { color: var(--accent); font-size: 20px; }

/* ── 연혁 ───────────────────────────────────── */
.year-block { display: grid; gap: var(--s2); margin-bottom: var(--s8); }
.year-n { font-family: "Source Serif 4", serif; font-size: 30px; font-weight: 700; color: var(--accent-2); line-height: 1; }

/* ── 다단 ───────────────────────────────────── */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s8); }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s8); }

/* 3열 — 인증서 카드 한 줄 배치 */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
@media (max-width: 760px) { .cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

/* ── 카드(인물·장비) ────────────────────────── */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s8); }
.card-t { font-size: 20px; font-weight: 700; font-family: var(--font-head); margin-top: var(--s3); }
.card-m { font-size: 15px; color: var(--text-soft); }
.card-b { font-size: 17px; color: #444141; margin-top: var(--s2); }

/* ── 이미지 자리 ────────────────────────────── */
/* 실제 이미지로 교체할 때: <div class="ph" ...> 를 <img src="..." alt="..."> 로 바꾸면 됩니다. */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--s4);
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 8px, #fff 8px, #fff 16px);
  border: 1px solid var(--line);
  color: var(--text-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.5;
}
.ph-sq   { aspect-ratio: 1 / 1; }
.ph-4x3  { aspect-ratio: 4 / 3; }
.ph-16x9 { aspect-ratio: 16 / 9; }
.ph-a4   { aspect-ratio: 210 / 297; }

/* 인증서 카드 — 문서가 잘리지 않도록 contain */
.cert img { aspect-ratio: 210 / 297; object-fit: contain; background: var(--surface); }

/* ── 표 ─────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 17px; }
thead th { text-align: left; border-bottom: 2px solid var(--text); padding: var(--s2) var(--s2) var(--s2) 0; font-family: var(--font-head); }
tbody td { border-bottom: 1px solid var(--line); padding: var(--s3) var(--s2) var(--s3) 0; vertical-align: top; color: #444141; }
tbody td:first-child { white-space: nowrap; color: var(--text); font-weight: 600; }

/* ── 안내 상자 ──────────────────────────────── */
.note {
  padding: var(--s4); background: var(--surface);
  border-top: 2px solid var(--text-soft); font-size: 17px; color: #444141;
}

/* ── 언론보도 ───────────────────────────────── */
.press-year { padding-top: var(--s8); }
.year-n { display: flex; align-items: baseline; gap: var(--s3);
  padding-bottom: var(--s2); border-bottom: 2px solid var(--text); }
.year-c { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--text-soft); }
.press-list { display: grid; }
.press {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 110px;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s3) var(--s2);
  margin: 0 calc(var(--s2) * -1);
  border-bottom: 1px solid var(--line);
  color: inherit;
}
.press:hover { background: var(--accent-tint); color: inherit; }
.press-d { font-size: 16px; color: var(--text-soft); white-space: nowrap; }
.press-t { font-size: 19px; line-height: 1.55; text-wrap: pretty; }
.press-m { font-size: 15px; color: var(--text-soft); text-align: right; }

.tag {
  display: inline-block; vertical-align: 2px;
  font-size: 13px; line-height: 1.4; padding: 1px 8px;
  border-radius: 2px; white-space: nowrap;
  background: var(--surface); color: var(--text-soft);
}
.tag-award  { background: var(--accent-tint); color: var(--accent-deep); }
.tag-patent { background: var(--accent-tint); color: var(--accent-deep); }
.tag-tv     { background: var(--surface); color: var(--text); }
.tag-mou,
.tag-csr    { background: var(--surface); color: var(--text-soft); }

@media (max-width: 640px) {
  .press { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .press-m { text-align: left; }
}

/* ── 푸터 ───────────────────────────────────── */
footer {
  margin-top: 96px; padding-top: var(--s4);
  border-top: 4px solid var(--text);
  font-size: 15px; color: var(--text-soft);
}
footer .legal-name { font-weight: 600; color: var(--text); font-size: 17px; }
footer p { margin: 6px 0 0; }
footer nav { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
footer nav a { color: var(--text-soft); font-size: 14px; }