@charset "utf-8";

/* ==========================================================================
   포디융합연구소 — 공통 스타일
   구조: 좌측 고정 레일(내비) + 우측 본문. 1024px 미만에서는 상단 바 + 드로어.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 토큰
   -------------------------------------------------------------------------- */
:root {
  /* 색 */
  --ink:        #06263f;   /* 기본 네이비 — 다크 패널 배경 */
  --ink-800:    #0a3556;
  --ink-600:    #14507c;
  --ink-400:    #4a7ea5;
  /* 배경이 전부 흰색이 되면서, 예전 다크 패널용 밝은 민트는 쓰이지 않는다.
     강조색은 흰 배경에서 작은 글씨도 WCAG AA(4.5:1)를 넘도록 조금 더 진하게. */
  --mint:       #7fc8bc;   /* 로고 등 어두운 면 위에서만 */
  --mint-deep:  #2a7e70;   /* 본문 강조 — 흰 배경 대비 4.86:1 */
  --sun:        #e08a2b;   /* 보조 강조 — 장식용(포커스 링, 일러스트, todo 표시) */
  --sun-text:   #a86413;   /* 같은 계열의 글자용 — 흰 배경 대비 4.67:1 */

  --paper:      #ffffff;
  --paper-tint: #ffffff;   /* 배경은 전부 흰색 */
  --line:       #e2e8ed;
  /* 예전에 다크 패널 위에서 쓰던 흰 반투명 값들.
     배경이 흰색이 되면서 일반 헤어라인/보조 텍스트와 같아졌다. */
  --line-dark:  #e2e8ed;

  --text:       #17242f;
  --muted:      #5d6d7b;
  --muted-dark: #5d6d7b;

  --hover:      #f7f9fa;   /* 마우스 올렸을 때만 쓰는 아주 옅은 회색 */

  /* 치수 */
  --rail-w:     288px;
  --topbar-h:   64px;
  --gap:        clamp(24px, 4vw, 48px);
  --sec-y:      clamp(72px, 9vw, 132px);
  --radius:     14px;

  /* 타이포 */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

/* --------------------------------------------------------------------------
   2. 리셋 / 기본
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 앵커 이동 시 모바일 상단 바에 제목이 가리지 않도록 */
  scroll-padding-top: var(--topbar-h);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;      /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 8px 8px;
  transition: top .18s;
}
.skip:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. 좌측 레일 (데스크톱 내비)
   -------------------------------------------------------------------------- */
.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--rail-w);
  padding: 40px 32px 32px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 로고 */
.logo { display: flex; align-items: center; gap: 12px; }
.logo__mark { flex: none; width: 46px; height: 46px; }
.logo__text { line-height: 1.25; }
.logo__ko {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.logo__en {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 메뉴 */
.rail__nav { margin-top: 44px; flex: 1 1 auto; }
.menu { display: flex; flex-direction: column; gap: 2px; }

.menu a {
  position: relative;
  display: block;
  padding: 9px 0 9px 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--muted);
  transition: color .18s;
}
.menu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--line);
  transition: background .18s, transform .18s;
}
.menu a:hover { color: var(--ink); }
.menu a[aria-current] {
  color: var(--ink);
  font-weight: 800;
}
.menu a[aria-current]::before {
  background: var(--mint-deep);
  transform: scale(1.35);
}

/* 외부 페이지(소식)는 앵커와 구분 */
.menu__divider {
  height: 1px;
  margin: 14px 0;
  background: var(--line);
}
.menu a[data-external]::after {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-left: 7px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .5;
}

/* 레일 하단 연락처 */
.rail__foot {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 2;
  color: var(--muted);
}
.rail__foot b { color: var(--ink); font-weight: 700; }
.rail__foot a:hover { color: var(--ink); text-decoration: underline; }

.sns { display: flex; gap: 8px; margin-top: 16px; }
.sns a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  transition: border-color .18s, color .18s, background .18s;
}
.sns a:hover { border-color: var(--ink); color: var(--ink); background: var(--hover); }

/* --------------------------------------------------------------------------
   4. 모바일 상단 바 / 드로어
   -------------------------------------------------------------------------- */
.topbar {
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--topbar-h);
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .logo__mark { width: 36px; height: 36px; }
.topbar .logo__ko { font-size: 16px; }

.burger {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-right: -8px;
}
.burger span {
  position: relative;
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: background .18s;
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: transform .22s;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

body.is-menu-open .burger span { background: transparent; }
body.is-menu-open .burger span::before { transform: translateY(6px) rotate(45deg); }
body.is-menu-open .burger span::after  { transform: translateY(-6px) rotate(-45deg); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(6, 38, 63, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s, visibility .24s;
}
body.is-menu-open .scrim { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   5. 본문 셸
   -------------------------------------------------------------------------- */
.shell { margin-left: var(--rail-w); }

.sec { padding: var(--sec-y) var(--gap); }
.sec--tint { background: var(--paper-tint); }
.inner { max-width: 1080px; margin: 0 auto; }

/* 예전 다크 패널. 지금은 배경이 흰색이라 본문 섹션과 같아졌고,
   클래스는 히어로/미션/연락처를 가리키는 이름으로만 남는다. */
.panel {
  background: var(--paper);
  color: var(--text);
}
.panel .sec__label { color: var(--mint-deep); }
.panel .sec__title { color: var(--ink); }
.panel .sec__lead  { color: var(--muted); }

/* 배경이 모두 흰색이라 섹션 경계가 사라진다. 얇은 선으로만 구분한다. */
main > section + section,
.foot { border-top: 1px solid var(--line); }

/* 섹션 머리 */
.sec__head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }

.sec__label {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mint-deep);
}
.sec__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.035em;
  color: var(--ink);
}
.sec__lead {
  margin-top: 18px;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.9;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   6. 히어로
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  align-items: center;
  min-height: min(100svh, 860px);
  padding: calc(var(--sec-y) + 20px) var(--gap);
}
.hero__inner { max-width: 1080px; margin: 0 auto; width: 100%; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  margin-bottom: 30px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--mint-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint-deep);
}

.hero__title {
  font-size: clamp(34px, 6.4vw, 76px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.045em;
  color: var(--ink);
}
.hero__title em {
  font-style: normal;
  color: var(--mint-deep);
}

.hero__lead {
  max-width: 620px;
  margin-top: 30px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.95;
  color: var(--muted);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 42px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  border-radius: 999px;
  transition: transform .16s, background .18s, border-color .18s, color .18s;
}
.btn:active { transform: translateY(1px); }
/* 흰 배경에서 주 버튼이 묻히지 않도록 채움색을 잉크로 */
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--ink-800); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--hover); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-800); }
.btn--line { border: 1px solid var(--line); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); background: var(--hover); }

/* 히어로 하단 지표 */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  margin-top: clamp(48px, 7vw, 84px);
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.stat__num {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--mint-deep);
  line-height: 1.2;
}
.stat__label {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   7. 연구소 소개
   -------------------------------------------------------------------------- */
.define {
  padding: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(40px, 5vw, 64px);
  background: var(--paper-tint);
  border-left: 4px solid var(--mint-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -.03em;
  color: var(--ink);
}
.sec--tint .define { background: var(--paper); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.split h3 {
  margin-bottom: 14px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.split p + p { margin-top: 14px; }
.split p { color: var(--muted); line-height: 1.9; }
.split strong { color: var(--ink); font-weight: 700; }

/* 소장 인사 */
.person {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.person__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--mint-deep);
  font-size: 17px;
  font-weight: 800;
}
.person__name { font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.person__role { font-size: 13.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   8. 미션 · 비전
   -------------------------------------------------------------------------- */
.mission {
  font-size: clamp(24px, 3.8vw, 44px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.04em;
  color: var(--ink);
}
.mission em { font-style: normal; color: var(--mint-deep); }

/* 헤어라인을 gap:1px + 컨테이너 배경으로 만들면, 카드가 3개인데 2열로 접힐 때
   남는 빈 칸이 배경색 그대로 드러나 4번째 카드처럼 보인다.
   카드마다 테두리를 주고 진짜 gap 을 쓰면 빈 칸은 그냥 여백이 된다. */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 14px;
  margin-top: clamp(48px, 6vw, 76px);
}
.value {
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.value__no {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--mint-deep);
}
.value h3 {
  margin: 14px 0 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.value p { font-size: 14.5px; line-height: 1.85; color: var(--muted); }

/* --------------------------------------------------------------------------
   9. 우리가 하는 일 — 카드
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 20px;
}
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 34px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 18px 40px -22px rgba(6, 38, 63, .38);
}
.card__icon {
  width: 44px; height: 44px;
  margin-bottom: 20px;
  color: var(--mint-deep);
}
.card h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.card__en {
  margin: 5px 0 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.card p { font-size: 14.5px; line-height: 1.85; color: var(--muted); }

.card__list {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.card__list li { position: relative; padding-left: 13px; }
.card__list li + li { margin-top: 5px; }
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--mint-deep);
}

/* -------------------------------------------------------------------------
   10. 교구와 콘텐츠
   ------------------------------------------------------------------------- */
.brands { display: grid; gap: 20px; }

.brand {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.brand__art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.brand__art svg { width: 68%; height: auto; }

.brand__name {
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--ink);
}
.brand__tag {
  margin: 6px 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mint-deep);
}
.brand p { color: var(--muted); line-height: 1.9; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.tag {
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.sec--tint .tag { background: var(--paper); }

/* -------------------------------------------------------------------------
   11. 연혁
   ------------------------------------------------------------------------- */
.timeline {
  position: relative;
  padding-left: 28px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--mint-deep), var(--line));
}

.era + .era { margin-top: 44px; }
.era__year {
  position: relative;
  margin-bottom: 18px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.era__year::before {
  content: "";
  position: absolute;
  left: -28px; top: 12px;
  width: 12px; height: 12px;
  border: 3px solid var(--mint-deep);
  border-radius: 50%;
  background: var(--paper);
}
.sec--tint .era__year::before { background: var(--paper-tint); }
.era__year small {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sun-text);
  letter-spacing: 0;
}

.era ul li {
  position: relative;
  padding-left: 15px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
}
.era ul li + li { margin-top: 7px; }
.era ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line);
}
.era ul li b { color: var(--ink); font-weight: 700; }

/* -------------------------------------------------------------------------
   12. 함께한 사람들
   ------------------------------------------------------------------------- */
.partner-group + .partner-group { margin-top: 44px; }
.partner-group > h3 {
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.partner-group > h3 span {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr));
  gap: 12px;
}
.logos li {
  display: grid;
  place-items: center;
  min-height: 82px;
  padding: 12px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-600);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .18s, color .18s;
}
.logos li:hover { border-color: var(--ink-400); color: var(--ink); }

.countries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.countries li {
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* -------------------------------------------------------------------------
   13. 연락처
   ------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.contact-block h3 {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint-deep);
}
.contact-block p, .contact-block a {
  display: block;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}
.contact-block a:hover { color: var(--mint-deep); text-decoration: underline; }
.contact-block small {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--muted);
}

.map {
  display: grid;
  place-items: center;
  margin-top: clamp(36px, 5vw, 56px);
  /* width 를 먼저 확정해야 한다. 없으면 min-height 200px 이 aspect-ratio 를 타고
     역산돼 폭이 600px 로 고정되고, 좁은 화면에서 가로 스크롤이 생긴다. */
  width: 100%;
  aspect-ratio: 21 / 7;
  min-height: 200px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* -------------------------------------------------------------------------
   14. 푸터
   ------------------------------------------------------------------------- */
.foot {
  padding: 40px var(--gap);
  background: var(--paper);
  color: var(--muted);
  font-size: 13px;
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
}
.foot b { color: var(--ink); font-weight: 700; }
.foot__links { display: flex; gap: 18px; }
.foot__links a:hover { color: var(--ink); }

/* -------------------------------------------------------------------------
   15. 소식 페이지
   ------------------------------------------------------------------------- */
.page-head {
  padding: calc(var(--sec-y) * .8) var(--gap) calc(var(--sec-y) * .6);
}
.page-head .hero__title { font-size: clamp(30px, 4.6vw, 52px); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.filters button {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all .18s;
}
.filters button:hover { color: var(--ink); border-color: var(--ink-400); }
.filters button[aria-pressed="true"] {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.posts { display: grid; gap: 0; }
.post {
  display: grid;
  /* minmax(0,1fr): 1fr 의 최소값은 min-content 라 제목이 안 줄어든다 */
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 36px);
  align-items: baseline;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  transition: background .18s, padding .18s;
}
.post:hover { background: var(--hover); padding-left: 14px; padding-right: 14px; }

.post__cat {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--mint-deep);
}
.post__cat[data-cat="notice"]  { color: var(--ink-600); }
.post__cat[data-cat="press"]   { color: var(--sun-text); }
.post__cat[data-cat="paper"]   { color: var(--mint-deep); }
.post__cat[data-cat="event"]   { color: #b8556d; }

.post__title {
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1.6;
}
.post__excerpt {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.post__date {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.empty {
  padding: 64px 0;
  text-align: center;
  color: var(--muted);
}

.pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 44px;
}
.pager a, .pager span {
  display: grid;
  place-items: center;
  min-width: 38px; height: 38px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
}
.pager a:hover { border-color: var(--ink-400); color: var(--ink); }
.pager [aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* -------------------------------------------------------------------------
   16. 스크롤 진입 애니메이션
   .js 로 감싼 이유: JS가 없거나 막힌 환경에서 opacity:0 이 그대로 남아
   본문이 통째로 안 보이는 사고를 막기 위해. .js 는 <head> 인라인 스크립트가 붙인다.
   ------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* -------------------------------------------------------------------------
   17. 반응형
   ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --rail-w: 244px; }
  .rail { padding: 32px 24px 28px; }
  .brand { grid-template-columns: 180px minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .shell { margin-left: 0; padding-top: var(--topbar-h); }
  .topbar { display: flex; }

  .rail {
    width: min(320px, 86vw);
    padding-top: 92px;
    transform: translateX(-102%);
    transition: transform .3s cubic-bezier(.3, .8, .3, 1);
    box-shadow: 24px 0 60px -30px rgba(6, 38, 63, .5);
  }
  body.is-menu-open .rail { transform: none; }
  body.is-menu-open { overflow: hidden; }

  .rail__nav { margin-top: 8px; }
  .menu a { padding: 12px 0 12px 16px; font-size: 16px; }

  .hero { min-height: auto; padding-top: calc(var(--sec-y) * .9); }
  .brand { grid-template-columns: 1fr; }
  .brand__art { max-width: 260px; aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .post { grid-template-columns: 1fr; gap: 6px; }
  .post__date { order: 3; }
  .hero__stats { gap: 24px 40px; }
  .map { aspect-ratio: 4 / 3; }
  .stat { min-width: 116px; }
  .foot__inner { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   18. 인쇄
   ------------------------------------------------------------------------- */
@media print {
  .rail, .topbar, .scrim, .hero__cta, .filters, .pager { display: none !important; }
  .shell { margin-left: 0; }
  .panel, .foot { background: #fff !important; color: #000 !important; }
  .panel .sec__title, .hero__title, .mission, .value h3, .contact-block a { color: #000 !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   19. 플레이스홀더 표시
   실제 값이 아직 안 들어간 자리. 배포 전에 .todo 를 모두 없애면 된다.
   `grep -rn "todo" *.html` 로 남은 자리를 찾을 수 있다.
   ------------------------------------------------------------------------- */
.todo {
  background: rgba(224, 138, 43, .14);
  box-shadow: inset 0 -2px 0 rgba(224, 138, 43, .55);
  border-radius: 3px;
  padding: 0 3px;
}

.logos li.todo,
.countries li.todo {
  color: var(--sun-text);
  border-style: dashed;
  border-color: rgba(224, 138, 43, .5);
  background: rgba(224, 138, 43, .06);
  box-shadow: none;
}
@media print { .todo { background: none; box-shadow: none; } }