@charset "utf-8";
/* ============================================================
   메인 화면 — templates/home/index.php · templates/_hero.php
   토큰(client.css :root)만 쓴다. 짜임은 docs/main-site.md.

   1. 머리 판(.feature)   색 판(글) + 사진 칸, 판 아래 번호 탭. 넘기기는 site.js 의 heroSlider()
   2. 바로가기 받침(.tray) 머리 판 아래 연한 띠에 겹쳐 뜨는 흰 받침 — 가입 칸 + 바로가기 칸
   3. 세 칸(.latest)      Media & News | 학술행사·일정 연표 | Publication and Resources
   4. 소개(.society)      소개 글·세 활동 + 네 회원 그룹 2×2
   ============================================================ */

/* ── 1. 머리 판 ── */
.feature {
  padding: 24px 0 64px;
  /* 받침(.tray)이 겹쳐 뜨는 아래 띠만 세 칸의 바탕색으로 잇는다 */
  background: linear-gradient(180deg, var(--color-bg) calc(100% - 64px), var(--color-bg-soft) calc(100% - 64px));
}
.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  min-height: 380px;
}

.feature__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--feature-texture), var(--feature-glow), var(--color-brand);
  color: var(--color-on-dark);
}
/* 글은 한 칸에 겹쳐 두고 켜진 것만 보인다 — 배너마다 길이가 달라도 판 높이가 흔들리지 않는다 */
.feature__slides { display: grid; flex: 1; }
.feature__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 56px 28px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.feature__slide.is-on { opacity: 1; visibility: visible; }

.feature__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}
.feature__label::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.feature__title {
  max-width: 620px;
  margin-top: 14px;
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.feature__subtitle { max-width: 560px; margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--color-on-dark-sub); }

.feature__info { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; font-size: var(--fs-small); }
.feature__info div { display: flex; gap: 8px; }
.feature__info dt { font-weight: 700; color: var(--color-accent-light); }

.feature__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.feature__actions .btn { min-height: 46px; border-radius: 999px; padding: 0 26px; }
.feature__actions .btn--ghost { border-color: var(--color-on-dark-sub); }
/* 관리자가 색을 고른 버튼은 호버 때 그 색을 지키고 살짝 옅게만 한다 */
.feature__actions .btn[data-custom-color]:hover { opacity: 0.88; }

/* 번호 탭 — 켜진 탭 위 막대가 넘기는 시간(7초, site.js 와 같게)을 채운다 */
.feature__tabs {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  border-top: 1px solid var(--color-on-dark-line);
}
.feature__tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 16px 20px 18px;
  text-align: left;
  color: var(--color-on-dark-sub);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.feature__tab:first-child { padding-left: 56px; }
.feature__tab + .feature__tab { border-left: 1px solid var(--color-on-dark-line); }
.feature__tab::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 3px;
  background: var(--color-accent-light);
  transform: scaleX(0);
  transform-origin: left;
}
.feature__tab:hover { color: var(--color-on-dark); }
.feature__tab.is-on { color: var(--color-on-dark); }
.feature__tab.is-on::before { transform: scaleX(1); }
.is-playing .feature__tab.is-on::before { animation: feature-progress 7s linear; }
.feature__tab-no { flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent-light); }
.feature__tab-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-small); font-weight: 600; }

@keyframes feature-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 사진 칸 — 오른쪽 위 모서리를 크게 굴린 잎 모양. 사진도 한 칸에 겹쳐 켜진 것만 보인다.
   프리셋 사진은 이 칸 모양(1440 폭에서 500×404 의 2배)으로 잘라 둔 것이라 넓은 화면에서는 통째로 보인다.
   칸이 더 세로로 길어지는 폭(1023px 이하)에서는 왼쪽을 자르고 오른쪽 끝을 지킨다 — 그림의 주제가 오른쪽에 있다(2026-10-14). */
.feature__media {
  display: grid;
  overflow: hidden;
  border-radius: 0 120px var(--radius-lg) 0;
  background: var(--color-brand-deep);
}
.feature__photo {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s var(--ease), transform 1.2s var(--ease);
}
.feature__photo.is-on { opacity: 1; transform: none; }
/* 사진 칸에 마우스를 올리면 사진이 천천히 다가온다 */
.feature__media:hover .feature__photo.is-on { transform: scale(1.04); }

/* ── 2. 바로가기 받침 ── */
.tray { position: relative; z-index: 2; margin-top: -40px; background: linear-gradient(180deg, transparent 40px, var(--color-bg-soft) 40px); }
.tray__list {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-tray);
}
.tray__list > li + li { border-left: 1px solid var(--color-line); }
.tray__list > li.tray__join + li { border-left: 0; }

.tray__join { padding: 20px 24px; background: var(--color-accent); color: var(--color-on-dark); }
.tray__join-kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-light); }
.tray__join-title { margin-top: 4px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.tray__join-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: var(--fs-small); font-weight: 600; }
.tray__join-links a { text-decoration: underline; text-decoration-color: var(--color-accent-light); text-underline-offset: 4px; transition: text-decoration-color 0.2s var(--ease); }
.tray__join-links a:hover { text-decoration-color: var(--color-on-dark); }
/* admin 이 바탕색을 고른 가입 칸(templates/home/index.php 의 --join-bg). 글자는 바탕 밝기에 맞춘 색(--join-ink, App\HomeContent::inkFor())이고
   머리글·밑줄은 그 색을 옅게 쓴다 — 밝은 바탕에서도 연보라 글이 묻히지 않게 */
.tray__join--custom { background: var(--join-bg); color: var(--join-ink); }
.tray__join--custom .tray__join-kicker { color: inherit; opacity: 0.75; }
.tray__join--custom .tray__join-links a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.tray__join--custom .tray__join-links a:hover { text-decoration-color: currentColor; }

.tray__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  /* 옆 여백은 칸 이름(Event Registration)이 1440 폭에서 한 줄에 들어가는 만큼 */
  padding: 22px 16px;
  transition: background-color 0.2s var(--ease);
}
.tray__link:hover { background: var(--color-bg-soft); }
.tray__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform var(--hover-dur) var(--ease);
}
/* 호버 — 아이콘이 제 색으로 차오르며 살짝 떠올라 기울고, 칸 이름이 청록으로 */
.tray__link:hover .tray__icon { background: var(--color-brand); color: var(--color-on-dark); transform: translateY(-2px) rotate(-6deg); }
.tray__link:hover .tray__title { color: var(--color-brand); }
/* 바로가기 넷은 청록·보라·장밋빛·호박색을 차례로 입힌다. 호버 때 그 색으로 채운다 */
.tray__list > li:nth-child(4n + 3) .tray__icon { background: var(--color-accent-soft); color: var(--color-accent); }
.tray__list > li:nth-child(4n + 4) .tray__icon { background: var(--color-rose-soft); color: var(--color-rose); }
.tray__list > li:nth-child(4n + 5) .tray__icon { background: var(--color-amber-soft); color: var(--color-amber); }
.tray__list > li:nth-child(4n + 3) .tray__link:hover .tray__icon { background: var(--color-accent); color: var(--color-on-dark); }
.tray__list > li:nth-child(4n + 4) .tray__link:hover .tray__icon { background: var(--color-rose); color: var(--color-on-dark); }
.tray__list > li:nth-child(4n + 5) .tray__link:hover .tray__icon { background: var(--color-amber); color: var(--color-on-dark); }
.tray__svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tray__body { display: flex; flex-direction: column; min-width: 0; }
.tray__title { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--color-text); overflow-wrap: anywhere; transition: color 0.2s var(--ease); }
/* 설명은 두 줄까지 — 띄어쓰기 없는 긴 글(한글 100자 등)이 칸을 세로로 크게 늘리던 것을 막는다. 넘치면 말줄임.
   admin 미리보기(home-admin.css 의 .hp-tray__text)도 같은 규칙이다 */
.tray__text {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ── 3. 세 칸 ── */
.latest { padding: 24px 0 40px; background: var(--color-bg-soft); }
.latest__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3.4fr);
  gap: 24px;
  /* 세 칸은 내용이 달라도 높이를 맞춘다 — 가장 긴 칸에 나머지가 늘어난다 */
  align-items: stretch;
}

.panel {
  padding: 18px 22px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
/* 세 칸은 바탕색을 달리한다 — Media & News 는 흰 바탕에 청록 윗줄, 학술행사는 옅은 보라, 자료는 옅은 청록 */
.panel--board { box-shadow: inset 0 4px 0 var(--color-brand); }
.panel--meetings { border-color: var(--color-accent-line); background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-bg) 85%); }
.panel--resources { border-color: var(--color-brand-line); background: linear-gradient(180deg, var(--color-brand-soft) 0%, var(--color-bg) 85%); }
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  margin-bottom: 12px;
}
.panel__title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.panel__empty { padding: 32px 0; font-size: var(--fs-small); color: var(--color-text-muted); text-align: center; }

.feed li + li { border-top: 1px solid var(--color-line); }
/* 호버한 글은 한 걸음 들어오며 제목이 청록으로(아래 .feed__title) */
.feed a { display: block; padding: 11px 0; transition: transform 0.25s var(--ease); }
.feed a:hover { transform: translateX(4px); }
.feed__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--color-text-muted); }
.feed__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.feed__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.feed__new { padding: 0 6px; border-radius: 4px; background: var(--color-accent); color: var(--color-on-dark); font-size: 11px; font-weight: 700; line-height: 18px; }
.feed__title {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text);
  transition: color 0.2s var(--ease);
}
.feed a:hover .feed__title { color: var(--color-brand); }

/* 다가오는 학술행사 — 연한 보라 상자 */
.meet-next {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-accent-line), inset 4px 0 0 var(--color-accent);
  transition: box-shadow var(--hover-dur) var(--ease), transform var(--hover-dur) var(--ease);
}
/* 그림자 목록은 앞 두 개(inset)를 그대로 두고 바깥 그림자를 뒤에 더한다 — 짝이 맞아야 부드럽게 바뀐다 */
.meet-next:hover { box-shadow: inset 0 0 0 2px var(--color-accent), inset 4px 0 0 var(--color-accent), var(--shadow-hover); transform: translateY(-2px); }
.meet-next__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meet-next__state { padding: 0 10px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent-dark); font-size: 12px; font-weight: 700; line-height: 24px; }
.meet-next__state--open { background: var(--color-accent); color: var(--color-on-dark); }
.meet-next__days { font-size: var(--fs-small); font-weight: 800; letter-spacing: 0.04em; color: var(--color-accent-dark); }
.meet-next__title { margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--color-text); }
.meet-next__line { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--color-text-sub); }
.meet-next__icon { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--color-accent-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.meet-none { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; background: var(--color-bg-soft); font-size: var(--fs-small); color: var(--color-text-sub); }

/* 연표 — 왼쪽 세로선 위 점. 다가오는 일정은 보라 점, 지난 행사는 빈 점 */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--color-line); }
.timeline__item { position: relative; }
.timeline__item + .timeline__item { margin-top: 10px; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 5px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-brand);
  border-radius: 50%;
  background: var(--color-bg);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.timeline__item--soon::before { border-color: var(--color-accent); background: var(--color-accent); }
/* 호버한 일정은 점이 보라로 차며 커진다 */
.timeline__item:hover::before { border-color: var(--color-accent); background: var(--color-accent); transform: scale(1.3); }
.timeline__item > a { display: block; }
.timeline__when { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--color-brand); }
.timeline__what { display: block; font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: var(--color-text); transition: color 0.2s var(--ease); }
.timeline__where { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--color-text-muted); }
.timeline__item:not(.timeline__item--soon) .timeline__where { display: none; }
.timeline__item > a:hover .timeline__what { color: var(--color-accent-dark); }

/* Publication and Resources 칸(admin 메인 화면 관리가 고친다). 다섯 칸이 옆 두 칸과 높이가 맞도록 줄 간격을 줄이고 설명은 한 줄로 */
.res li + li { border-top: 1px solid var(--color-brand-line); }
.res a { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.res__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform var(--hover-dur) var(--ease);
}
.res li:nth-child(3n + 2) .res__icon { background: var(--color-accent-soft); color: var(--color-accent); }
.res li:nth-child(3n + 3) .res__icon { background: var(--color-rose-soft); color: var(--color-rose); }
/* 호버 — 바로가기 받침과 같은 몸짓: 아이콘이 제 색으로 차오르며 떠올라 기운다 */
.res a:hover .res__icon { background: var(--color-brand); color: var(--color-on-dark); transform: translateY(-2px) rotate(-6deg); }
.res li:nth-child(3n + 2) a:hover .res__icon { background: var(--color-accent); color: var(--color-on-dark); }
.res li:nth-child(3n + 3) a:hover .res__icon { background: var(--color-rose); color: var(--color-on-dark); }
.res__svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.res__body { display: flex; flex-direction: column; min-width: 0; }
.res__title { font-size: var(--fs-small); font-weight: 700; line-height: 1.4; color: var(--color-text); transition: color 0.2s var(--ease); }
.res__out { display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; fill: none; stroke: var(--color-text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.res__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.res a:hover .res__title { color: var(--color-brand); }

/* ── 4. 소개 + 회원 그룹 ── */
.society { padding: 36px 0 40px; background: radial-gradient(circle at 100% 0%, var(--color-accent-soft) 0%, transparent 45%), var(--color-bg); }
.society__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
}
.society__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.society__kicker .more { margin-left: auto; }
.society__kicker .society__chip {
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 26px;
  text-transform: uppercase;
}
.society__kicker .society__chip + .society__chip { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.society__title { margin-top: 14px; font-size: var(--fs-h2); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.society__lead { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--color-text-sub); }

.aims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.aims__item { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-content: start; }
.aims__svg { grid-row: span 2; box-sizing: content-box; width: 22px; height: 22px; padding: 8px; border-radius: 10px; background: var(--color-accent-soft); fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aims__item:nth-child(3n + 2) .aims__svg { background: var(--color-brand-soft); stroke: var(--color-brand); }
.aims__item:nth-child(3n + 3) .aims__svg { background: var(--color-rose-soft); stroke: var(--color-rose); }
/* 활동 칸은 링크가 아니라 아이콘만 살짝 떠올라 기운다 */
.aims__svg { transition: transform var(--hover-dur) var(--ease); }
.aims__item:hover .aims__svg { transform: translateY(-2px) rotate(-6deg); }
.aims__title { font-size: var(--fs-small); font-weight: 700; line-height: 1.35; }
.aims__text { font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }

.society__groups-head { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.groups__item {
  display: flex;
  flex-direction: column;
  padding: 14px 18px 14px;
  border: 1px solid var(--color-brand-line);
  border-radius: 14px;
  background: var(--color-brand-soft);
  box-shadow: inset 4px 0 0 var(--color-brand);
  transition: transform var(--hover-dur) var(--ease);
}
/* 네 그룹은 칸마다 옅은 바탕색과 왼쪽 색 띠를 달리한다(청록·보라·장밋빛·호박색) */
.groups__item:nth-child(4n + 2) { border-color: var(--color-accent-line); background: var(--color-accent-soft); box-shadow: inset 4px 0 0 var(--color-accent); }
.groups__item:nth-child(4n + 2) .groups__code { color: var(--color-accent-dark); }
.groups__item:nth-child(4n + 3) { border-color: var(--color-rose-line); background: var(--color-rose-soft); box-shadow: inset 4px 0 0 var(--color-rose); }
.groups__item:nth-child(4n + 3) .groups__code { color: var(--color-rose); }
.groups__item:nth-child(4n + 4) { border-color: var(--color-amber-line); background: var(--color-amber-soft); box-shadow: inset 4px 0 0 var(--color-amber); }
.groups__item:nth-child(4n + 4) .groups__code { color: var(--color-amber); }
.groups__item:hover { transform: translateY(var(--hover-lift)); }
/* 칸 안의 글 묶음. 홈페이지가 있으면 칸 전체가 링크(새 창)이고 오른쪽 위에 바깥 링크 표시를 단다 — admin 단체 소개 › 회원 그룹 */
/* 칸의 안쪽 여백까지 덮어 칸 어디를 눌러도 열리게 한다(여백은 칸 .groups__item 의 것과 같다) */
.groups__card { position: relative; display: flex; flex: 1; flex-direction: column; margin: -14px -18px; padding: 14px 18px; border-radius: inherit; color: inherit; }
.groups__card--link::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.groups__card--link:hover::after { opacity: 0.8; }
.groups__card--link:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.groups__country { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.groups__code { margin-top: 2px; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: 0.04em; color: var(--color-brand); }
.groups__name { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--color-text-sub); }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1279px) {
  .feature__slide { padding: 40px 44px 28px; }
  .feature__tab:first-child { padding-left: 44px; }
  .tray__link { padding: 20px 16px; gap: 12px; }
  .tray__icon { width: 38px; height: 38px; }
  .latest__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .panel--resources { grid-column: 1 / -1; }
  .panel--resources .res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .panel--resources .res li + li { border-top: 0; }
}

/* 받침이 한 줄에 다섯 칸 들어가지 않는 폭 — 가입 칸을 위 한 줄로, 바로가기 넷을 아래 줄로 */
@media (max-width: 1199px) {
  .tray__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tray__join { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 14px 24px; }
  .tray__join-links { margin-top: 0; margin-left: auto; }
  .tray__list > li:nth-child(n + 2) { border-top: 1px solid var(--color-line); }
}

@media (max-width: 1023px) {
  .feature__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); min-height: 380px; }
  .feature__slide { padding: 36px 32px 24px; }
  .feature__tab { padding: 14px 14px 16px; }
  .feature__tab:first-child { padding-left: 32px; }
  .society__grid { grid-template-columns: 1fr; gap: 32px; }
  .groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .feature { padding: 16px 0 60px; }
  .feature__grid { grid-template-columns: 1fr; min-height: 0; }
  /* 좁은 화면은 사진을 위에 얇게, 글 판을 아래에 둔다 */
  .panel__head { flex-wrap: wrap; }
  .feature__media { order: -1; height: 150px; border-radius: var(--radius-lg) 64px 0 0; }
  .feature__panel { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .feature__slide { padding: 24px 20px 20px; }
  .feature__title { font-size: 26px; }
  .feature__subtitle { margin-top: 10px; font-size: var(--fs-small); }
  .feature__actions { margin-top: 18px; }
  .feature__actions .btn { min-height: 42px; padding: 0 20px; }
  .feature__tab, .feature__tab:first-child { padding: 12px 12px 14px; }
  .feature__tab-name { display: none; }
  .feature__tab { justify-content: center; }

  .tray { margin-top: -40px; }
  .tray__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tray__list > li:nth-child(even) { border-left: 0; }
  .tray__join { display: block; padding: 16px 18px; }
  .tray__join-links { margin-left: 0; margin-top: 6px; }
  .tray__link { flex-direction: column; gap: 8px; padding: 14px 14px 16px; }
  .tray__text { display: none; }

  .latest { padding: 28px 0 36px; }
  .latest__grid { grid-template-columns: 1fr; gap: 16px; }
  .panel { padding: 18px 16px 18px; }
  .panel--resources .res { display: block; }
  .panel--resources .res li + li { border-top: 1px solid var(--color-line); }
  .feed a { padding: 10px 0; }
  .feed__title { font-size: var(--fs-small); }

  .society { padding: 36px 0 40px; }
  .society__title { font-size: 22px; }
  .aims { grid-template-columns: 1fr; gap: 10px; }
  .aims__text { display: none; }
  .aims__svg { grid-row: auto; }
  .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .groups__item { padding: 12px 14px; }
  .groups__card { margin: -12px -14px; padding: 12px 14px; }
  .groups__card--link::after { top: 12px; right: 10px; }
  .groups__code { font-size: 22px; }
}

/* ── 협력사 띠 (_partners.php, docs/main-site.md "협력사 띠") ──────────
   푸터 바로 위에서 로고가 왼쪽으로 끝없이 흘러간다. 참고 구현 kaslald 의 협력사 띠와 같은 짜임이다.
   트랙에 한 회차를 두 번 그려 두고 절반(-50%)만큼 옮긴 뒤 처음으로 돌아가 이음매가 보이지 않는다.
   지금 사이트 로고는 흰 바탕 그림이라 칸을 흰 바탕으로 두고, 띠는 옅은 면으로 깔아 칸이 떠 보이게 한다. */
.partner-band {
  padding: 28px 0;
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-line);
}
.partner-band__viewport {
  overflow: hidden;
  /* 양 끝을 흐리게 지운다. 마스크는 투명도만 보므로 색은 어느 불투명한 토큰이어도 같다 */
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-bg) 6%, var(--color-bg) 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--color-bg) 6%, var(--color-bg) 94%, transparent);
}
.partner-band__track {
  display: flex;
  width: max-content;
  animation: partner-roll var(--partner-roll, 40s) linear infinite;
}
/* 마우스를 올리거나 키보드 초점이 들어오면 멈춘다 */
.partner-band__viewport:hover .partner-band__track,
.partner-band__track:focus-within { animation-play-state: paused; }

@keyframes partner-roll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.partner-band__track > li { flex: none; padding: 0 10px; }
/* 한 칸 180 × 76. 링크가 있으면 <a>, 비웠으면 <span> 이라 태그가 아니라 클래스로 고른다 */
.partner-band__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 76px;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color var(--hover-dur) var(--ease), box-shadow var(--hover-dur) var(--ease);
}
a.partner-band__item:hover { border-color: var(--color-brand-line); box-shadow: var(--shadow-hover); }
.partner-band__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 84%;
  max-height: 70%;
  object-fit: contain;
}

@media (max-width: 767px) {
  .partner-band { padding: 20px 0; }
  .partner-band__track > li { padding: 0 6px; }
  .partner-band__item { width: 140px; height: 60px; }
}

/* 움직임을 줄이는 설정이면 흐르지 않고 한 벌만 두어 손으로 옆으로 넘겨 본다.
   client.css 의 공통 규칙(애니메이션 0.01ms)에만 맡기면 무한 반복이 깜박임이 되므로 여기서 끈다. */
@media (prefers-reduced-motion: reduce) {
  .partner-band__viewport { overflow-x: auto; }
  .partner-band__track { animation: none; }
  .partner-band__track > li[aria-hidden="true"] { display: none; }
}