@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;
}

/* JS 로 el.hidden = true 를 걸어도, 작성자 CSS 의 display 선언이 브라우저
   기본값인 [hidden]{display:none} 을 이겨 버린다(작성자 > UA). 그래서
   .post{display:grid} 같은 선언이 있는 요소는 숨겨지지 않는다.
   실제로 소식 필터와 라이트박스 화살표가 이 때문에 동작하지 않았다.
   여기서 한 번 눌러 두면 hidden 이 어디서나 제 역할을 한다. */
[hidden] { display: none !important; }

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); }
.define em { font-style: normal; color: var(--mint-deep); }
/* 섹션을 여는 정의문이 아니라 닫는 문장으로 쓸 때는 여백을 위로 돌린다 */
.define--closing { margin: clamp(40px, 5vw, 64px) 0 0; }

.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. 우리가 하는 일 — 카드
   -------------------------------------------------------------------------- */
/* 카드가 4장이다. auto-fit 에 맡기면 넓은 화면에서 3+1 로 떨어져 마지막 한 장이
   덩그러니 남는다. 3열이 나오지 않도록 열 수를 직접 정한다.
   넓으면 4장이 한 줄에 놓여 바로 아래 사진 4장과 열이 맞는다. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (min-width: 1400px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .cards { grid-template-columns: minmax(0, 1fr); } }
.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);
}
/* 사진 카드가 정사각 틀이므로 일러스트 자리도 같은 정사각으로 맞춘다.
   (4/3 이면 마지막 카드만 그림 칸이 짧아 보인다) */
.brand__art {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  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);
}


/* -------------------------------------------------------------------------
   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; flex-wrap: wrap; gap: 10px 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;
  /* 트랙 지정은 21절에 모아 두었다. 여기에 또 두면 미디어쿼리끼리
     순서로 다투게 되고, 실제로 그러다 썸네일 칸이 무너진 적이 있다. */
  gap: clamp(16px, 3vw, 36px);
  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="class"] { color: var(--mint-deep); }
.post__cat[data-cat="story"] { color: var(--ink-600); }
.post__cat[data-cat="visit"] { color: var(--sun-text); }

.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;
}
/* 그리드 칸을 꽉 채우면 자리표시자 배경이 띠처럼 늘어난다 */
.post__date { justify-self: start; }
/* 아직 날짜를 못 채운 자리는 글자라서 줄바꿈을 허용한다 */
.post__date.todo { white-space: normal; }

.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); }
}

/* 메뉴가 9줄이라 세로가 짧은 노트북에서는 레일 하단 연락처가 접힌 채로 시작한다.
   레일이 스크롤되긴 하지만 전화번호가 처음부터 보이는 편이 낫다.
   폭이 아니라 '높이'가 모자란 경우이므로 max-height 로만 건다. */
@media (min-width: 1024px) and (max-height: 860px) {
  .rail { padding-top: 26px; padding-bottom: 22px; }
  .rail__nav { margin-top: 26px; }
  .menu a { padding-top: 6px; padding-bottom: 6px; }
  .menu__divider { margin: 9px 0; }
  .rail__foot { margin-top: 20px; }
}

@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; }
  /* 사진 칸과 일러스트 칸의 크기를 같게 맞춘다. 비율은 건드리지 않는다
     (여기서 aspect-ratio 를 다시 주면 뒤 절과 특정도가 같아 사진이 잘린다) */
  .brand__art { max-width: 320px; }

  /* 상단 바 로고도 눌러서 홈으로 가는 링크다 (가로 여백은 건드리지 않는다) */
  .topbar .logo { padding: 8px 0; }
}

/* 푸터 메뉴는 어느 화면에서나 23px 밖에 안 됐다. '소식' 은 22x23px 이라
   특히 빗나가기 쉬웠다. 폭과 무관한 문제라 조건 없이 넓힌다.
   글자 크기와 줄 간격은 그대로이고 눌리는 영역만 커진다. */
.foot__links { gap: 0 14px; }
.foot__links a { padding: 11px 8px; }

/* 레일 하단 연락처는 마우스로는 충분하지만 손가락에는 작다.
   폭으로 거르면 아이패드 가로(1024px, 레일이 보이는 폭)가 빠지므로
   'pointer: coarse' 로 입력 방식을 본다.
   음수 여백으로 높이 증가분을 되돌린다 — 세로가 짧은 화면에서 레일이
   넘쳐 연락처가 도로 잘리는 일이 없게. */
@media (pointer: coarse) {
  .rail__foot a { display: inline-block; padding: 7px 0; margin: -7px 0; }
  .sns a { width: 44px; height: 44px; border-radius: 11px; margin: -5px 0; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .hero__stats { gap: 24px 40px; }
  .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; } }

/* -------------------------------------------------------------------------
   20. 사진
   ------------------------------------------------------------------------- */
figure { margin: 0; }

.photo {
  display: block;
  width: 100%;
  /* height:auto 가 없으면 <img> 의 height 속성이 presentational hint 로 남아
     높이가 원본 픽셀에 고정되고 aspect-ratio 가 통째로 무시된다.
     (width/height 속성 자체는 레이아웃 시프트를 막아 주므로 그대로 둔다) */
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--hover);
  object-fit: cover;
}

figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

/* 히어로 — 글 + 사진 2단 */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

/* 히어로와 소개 단락 옆 사진은 비율을 강제하지 않는다.
   틀에 맞추면 세로 사진이 최대 30% 잘려 나갔다. 높이만 제한한다.
   다만 세로 사진은 칸보다 좁아서 왼쪽에 붙으면 오른쪽만 허전해진다.
   가운데로 보내 양쪽 여백을 같게 한다. */
.hero__media .photo,
.split__media .photo {
  aspect-ratio: auto;
  max-height: clamp(360px, 60vh, 640px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.hero__media figcaption,
.split__media figcaption { text-align: center; }

/* 사진 그리드
   원본 비율을 그대로 두면 세로 사진 한 장 때문에 그 줄 전체가 어긋나고
   캡션이 제각각인 높이에 매달린다. 자르는 것(cover)과 비율을 놔두는 것
   사이에서 세 번째 길을 쓴다 — 틀은 4:3 으로 통일하고 사진은 contain 으로
   넣는다. 잘리는 데 없이 위아래 줄이 맞고, 남는 자리는 연한 바탕이 채워
   액자처럼 보인다. 원본 전체는 사진을 눌러 여는 확대 보기에서 볼 수 있다.
   4:3 인 이유는 자료 사진 대부분이 4:3 이라 그 사진들은 여백 없이
   딱 맞기 때문이다. (메이슨리로 채우면 시간 순서가 열 단위로 섞인다.) */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 14px 14px;
  align-items: start;
}
.gallery .photo {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--hover);
}
/* 520px 이하는 격자가 한 줄에 한 장이라 서로 맞출 상대가 없다.
   틀을 풀어 사진을 화면 폭 그대로 크게 보여 준다. */
@media (max-width: 520px) {
  .gallery .photo { aspect-ratio: auto; }   /* object-fit:contain 은 위에서 그대로 */
}
.gallery figcaption { margin-top: 8px; font-size: 12.5px; }

/* 넓은 사진 한 장
   21:9 로 고정하면 가로 사진은 괜찮지만 세로 사진은 27% 만 남는 띠가 된다.
   높이만 제한하고 비율은 원본대로 두면 가로는 넓게, 세로는 적당한 크기로
   가운데 놓인다. */
.band { margin-top: clamp(36px, 5vw, 56px); }
.band .photo {
  aspect-ratio: auto;
  width: auto;
  max-width: 100%;
  max-height: clamp(280px, 42vw, 520px);
  margin-inline: auto;
}

/* 교구 카드 안 사진 — SVG 자리를 대신한다.
   비율을 놔두면 카드마다 사진 높이가 165~390px 로 벌어져 네 장이 따로 논다.
   가로·세로가 섞여 있으므로 정사각 틀에 contain 으로 넣는다.
   어느 쪽으로 찍힌 사진이든 여백이 한쪽으로 쏠리지 않는다. */
.brand__art--photo {
  padding: 0;
  border: 0;
  background: none;
  aspect-ratio: auto;
}
.brand__art--photo .photo {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--hover);
  border-radius: 10px;
}

/* -------------------------------------------------------------------------
   21. 소식 목록 썸네일
   ------------------------------------------------------------------------- */
.post {
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: start;
}
.post__thumb { aspect-ratio: 4 / 3; border-radius: 10px; }
.post__body .post__cat { margin-bottom: 7px; }

/* 태블릿: 날짜를 본문 아래로 내린다 */
@media (max-width: 860px) {
  .post { grid-template-columns: 110px minmax(0, 1fr); }
  .post .post__date { grid-column: 2; }
}

/* 휴대폰: 한 칸으로 쌓는다.
   860px 블록의 grid-column:2 를 여기서 풀어 주지 않으면 암시적 2번째 열이
   생기면서 썸네일 칸이 1px 로 무너진다. */
@media (max-width: 560px) {
  .post { grid-template-columns: 1fr; gap: 10px; }
  .post .post__date { grid-column: auto; order: 3; }
  /* 목록 썸네일은 줄 간격이 흐트러지지 않게 비율을 고정한다.
     다만 커버 사진 다수가 세로라 16:9 로는 3분의 1만 남는다. 4:3 이 절충점. */
  .post__thumb { aspect-ratio: 4 / 3; }

  .hero__grid { grid-template-columns: 1fr; }

}

/* 교구 이름 옆 영문 표기 */
.brand__en {
  margin-left: 6px;
  font-size: .6em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   22. 소식 상세 페이지
   ------------------------------------------------------------------------- */
.inner--narrow { max-width: 780px; }

.article__back {
  margin-bottom: clamp(24px, 3vw, 36px);
  font-size: 14px;
  font-weight: 600;
}
.article__back a { color: var(--muted); }
.article__back a:hover { color: var(--ink); }

.article__head { margin-bottom: clamp(28px, 4vw, 40px); }
.article__head .post__cat { margin-bottom: 12px; }

.article__title {
  font-size: clamp(27px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.04em;
  color: var(--ink);
}
.article__meta { margin-top: 14px; }
.article__meta .post__date { font-size: 14px; }

.article__cover { margin-bottom: clamp(32px, 4vw, 44px); }
/* 밴드와 같은 방식. 비율을 고정하지 않고 높이만 제한해 원본을 다 보여 준다. */
.article__cover .photo {
  aspect-ratio: auto;
  width: auto;
  max-width: 100%;
  max-height: clamp(320px, 56vw, 560px);
  margin-inline: auto;
}

.article__body p {
  font-size: clamp(16px, 1.4vw, 17.5px);
  line-height: 2;
  color: var(--text);
}
.article__body p + p { margin-top: 1.3em; }

.article__h2 {
  margin: clamp(44px, 6vw, 64px) 0 20px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}

.article__tags { margin-top: clamp(28px, 4vw, 40px); }
.article__tags .tag { color: var(--muted); }

/* 이전 / 다음 글 */
.pagenav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}
.pagenav__item {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s, background .18s;
}
.pagenav__item:hover { border-color: var(--ink-400); background: var(--hover); }
.pagenav__item span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mint-deep);
}
.pagenav__item b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.55;
  color: var(--ink);
}
.pagenav__item i {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--muted);
}
.pagenav__item--next { text-align: right; }

@media (max-width: 560px) {
  .pagenav { grid-template-columns: 1fr; }
  .pagenav__item--next { text-align: left; }
}

/* 목록의 썸네일을 링크로 감싼다 */
.post__thumb-link { display: block; }

/* -------------------------------------------------------------------------
   23. 사진 확대 보기
   페이지 배경을 흰색으로 맞춘 사이트라 오버레이도 밝게 간다.
   어둡게 하고 싶으면 .lightbox 의 background 한 줄만 바꾸면 된다.
   ------------------------------------------------------------------------- */
.zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius);
}
.zoom:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(6px);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 14px clamp(16px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
}
.lightbox__count {
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.lightbox__close {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-right: -8px;
  border-radius: 50%;
  color: var(--ink);
}
.lightbox__close:hover { background: var(--hover); }

.lightbox__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
}

.lightbox__fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  min-height: 0;
}
.lightbox__fig img {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - 200px);
  object-fit: contain;
  border-radius: 10px;
  background: var(--hover);
  box-shadow: 0 26px 60px -34px rgba(6, 38, 63, .55);
}
.lightbox__fig figcaption {
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  color: var(--muted);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .18s, background .18s;
}
.lightbox__nav:hover { border-color: var(--ink-400); background: #fff; }
.lightbox__nav--prev { left: clamp(8px, 2vw, 24px); }
.lightbox__nav--next { right: clamp(8px, 2vw, 24px); }

body.is-zoom-open { overflow: hidden; }

@media (max-width: 560px) {
  .lightbox__fig img { max-height: calc(100svh - 230px); }
  .lightbox__nav { width: 40px; height: 40px; font-size: 22px; }
}

@media print { .lightbox { display: none !important; } }

/* -------------------------------------------------------------------------
   비율 정리 메모

   이 사이트에서 사진을 잘라 보여 주는 곳은 소식 목록의 썸네일(.post__thumb)
   하나뿐이다. 줄 간격이 들쭉날쭉하면 목록을 훑기 어려워 비율을 고정한다.
   나머지는 모두 원본 비율 그대로 두고 필요한 곳만 높이를 제한한다.

   비율을 되돌리는 규칙을 미디어쿼리로 쓸 때는 대상 선언보다 뒤에 두어야 한다.
   미디어쿼리는 특정도를 올려 주지 않아, 앞에 있으면 뒤엣것에 밀린다.
   실제로 커버 사진이 그렇게 모바일에서도 잘리고 있었다.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   25. 로고 (붓글씨 워드마크)
   로고 자체가 "포디융합연구소" 글자라서 옆에 같은 이름을 또 적지 않는다.
   비율 2508:1156 (약 2.17:1).
   ------------------------------------------------------------------------- */
.logo__img {
  display: block;
  width: auto;
  height: auto;
}

/* 상단바 — 한 줄로 짧게 */
.topbar .logo__img { height: 34px; }

/* 레일 — 로고 아래 영문 부제 */
.logo--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.logo--stacked .logo__img { width: min(186px, 100%); }
.logo--stacked .logo__en { font-size: 9.5px; letter-spacing: .1em; }

/* 푸터 */
.foot__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.foot__logo { display: block; width: 148px; height: auto; }

@media (max-width: 1023px) {
  .logo--stacked .logo__img { width: min(200px, 100%); }
}
@media (max-width: 560px) {
  .topbar .logo__img { height: 30px; }
  .foot__logo { width: 128px; }
}

/* -------------------------------------------------------------------------
   26. 오시는 길
   키가 없으면 지도 대신 주소와 링크 안내가 이 상자를 채운다.
   ------------------------------------------------------------------------- */
.map {
  display: grid;
  place-items: center;
  /* width 를 먼저 확정해야 한다. 없으면 min-height 가 aspect-ratio 를 타고
     역산돼 폭이 고정되고, 좁은 화면에서 가로 스크롤이 생긴다. */
  width: 100%;
  margin-top: clamp(36px, 5vw, 56px);
  aspect-ratio: 21 / 9;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--hover);
  text-align: center;
}

.map__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(20px, 4vw, 32px);
}
.map__addr {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.map__note {
  max-width: 52ch;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* 지도가 그려지면 안내를 걷어내고 상자를 지도에 내준다 */
.map.is-live { display: block; place-items: unset; background: none; }
.map.is-live .map__fallback { display: none; }

@media (max-width: 560px) {
  .map { aspect-ratio: 4 / 3; min-height: 320px; }
}


/* -------------------------------------------------------------------------
   27. 소개 본문 · 배움의 순환 · 체험 프로그램
   ------------------------------------------------------------------------- */

/* 정의문 아래에 붙는 설명 단락 */
.prose { max-width: 74ch; }
.prose p { font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.95; color: var(--muted); }
.prose p + p { margin-top: 15px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose--wide { max-width: 62ch; margin-top: clamp(24px, 3vw, 34px); }
.prose--wide p { font-size: clamp(15.5px, 1.4vw, 17px); }

/* 체험 프로그램 카드 — 다섯 장이라 마지막 줄에 빈 칸이 남는다.
   카드마다 테두리를 주므로 빈 칸은 그냥 여백으로 보인다. */
.progs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(266px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}
.prog {
  padding: clamp(24px, 2.8vw, 30px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.prog:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 18px 40px -22px rgba(6, 38, 63, .38);
}
.prog__icon {
  width: 40px; height: 40px;
  margin-bottom: 18px;
  color: var(--mint-deep);
}
.prog__no {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--mint-deep);
}
.prog__name {
  margin-top: 9px;
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.035em;
  color: var(--ink);
}
.prog__sub {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
  /* ink-400 은 흰 배경 대비 4.36:1 이라 13px 글자에 쓰면 AA 에 못 미친다 */
  color: var(--ink-600);
}
.prog__desc {
  margin-top: 13px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
}
.prog__meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
}
.prog__meta dt {
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--mint-deep);
  white-space: nowrap;
}
.prog__meta dd { line-height: 1.65; color: var(--muted); }

/* 배움의 순환 */
.cycle {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cycle h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.cycle > p {
  max-width: 64ch;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--muted);
}
.cycle strong { color: var(--ink); font-weight: 700; }

.cycle__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 11px;
  margin-top: 24px;
}
.cycle__steps li { display: flex; align-items: center; gap: 11px; }
.cycle__steps li span {
  padding: 8px 16px;
  background: var(--hover);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}
/* 마지막 칸 뒤에는 화살표를 두지 않는다 */
.cycle__steps li:not(:last-child)::after {
  content: "\2192";
  font-size: 13px;
  font-weight: 800;
  color: var(--mint-deep);
}

@media (max-width: 560px) {
  .prog { padding: 22px 20px; }
  /* 좁은 화면에서는 라벨을 위로 올려 값이 눌리지 않게 한다 */
  .prog__meta { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .prog__meta dd + dt { margin-top: 10px; }
  .cycle__steps { gap: 7px 9px; }
  .cycle__steps li { gap: 9px; }
  .cycle__steps li span { padding: 7px 13px; font-size: 13px; }
}


/* -------------------------------------------------------------------------
   28. 언어 버튼 (KO / EN)
   ------------------------------------------------------------------------- */
.lang {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.lang__btn {
  min-width: 40px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--muted);
  transition: background .18s, color .18s;
}
.lang__btn:hover { color: var(--ink); }
.lang__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* 데스크톱: 레일 맨 아래, 페이스북 아이콘과 한 줄.
   로고 아래에 두면 줄이 하나 늘어 세로가 짧은 노트북(1100x720 등)에서 레일이 넘친다.
   로고는 레일 폭을 거의 다 써서 옆에 둘 자리도 없다. 레일은 화면에 고정이라
   맨 아래여도 늘 보인다. 모바일에서는 상단 바에 따로 있으므로 서랍에서는 감춘다. */
.rail__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.rail__row .sns { margin-top: 0; }
/* 모바일 상단 바: 메뉴 버튼 바로 왼쪽 */
.topbar .lang { margin-left: auto; margin-right: 8px; }

@media (max-width: 1023px) {
  .lang--rail { display: none; }
}
/* 손가락으로 누르기 넉넉하게 */
@media (pointer: coarse) {
  .lang__btn { min-width: 44px; height: 36px; }
}

/* 영어로 열 때 한국어가 번쩍 보이지 않도록 잠깐 가린다.
   i18n.js 가 바꾼 뒤 클래스를 걷는다. 스크립트가 실패해도 1.5초 뒤에는 보인다. */
html.i18n-wait body {
  visibility: hidden;
  animation: i18n-show 0s linear 1.5s forwards;
}
@keyframes i18n-show { to { visibility: visible; } }

/* 영어 히어로 제목. 영어 단어는 한글보다 가로로 길어서 한국어 크기 그대로면
   'Making / sense of / math and / science' 처럼 단어가 한 줄씩 떨어진다.
   크기를 줄이고 줄 길이를 고르게 나눈다. */
html[lang="en"] .hero__title {
  font-size: clamp(34px, 3.9vw, 60px);
  text-wrap: balance;
}