/* ==========================================================================
   슈퍼로컬 프로젝트 — Component CSS
   디자인 토큰만 참조. 직접 hex/숫자 사용 금지.
   ========================================================================== */

/* ----- Container / Layout ----- */
.container { max-width: var(--container-lg); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }
.container--xl { max-width: var(--container-xl); }
.container--md { max-width: var(--container-md); }
.container--sm { max-width: var(--container-sm); }

@media (max-width: 640px) {
  .container, .container--xl, .container--md, .container--sm {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

.section { padding: var(--space-20) 0; }
.section--soft { background: var(--color-bg-soft); }
.section--yellow { background: var(--color-primary-100); }
.section--dark { background: var(--color-secondary-700); color: var(--color-text-inverse); }

@media (max-width: 768px) {
  .section { padding: var(--space-12) 0; }
}

/* ----- Typography Helpers ----- */
.eyebrow {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-secondary-700);
  margin-bottom: var(--space-3);
}
.heading-display { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--leading-tight); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); color: var(--color-text); }
.heading-h1 { font-size: var(--text-h1); line-height: var(--leading-tight); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.heading-h2 { font-size: var(--text-h2); line-height: var(--leading-snug); font-weight: var(--weight-bold); }
.heading-h3 { font-size: var(--text-h3); line-height: var(--leading-snug); font-weight: var(--weight-bold); }
.heading-h4 { font-size: var(--text-h4); line-height: var(--leading-snug); font-weight: var(--weight-semibold); }
.text-muted { color: var(--color-text-muted); }
.text-soft { color: var(--color-text-soft); }
.text-caption { font-size: var(--text-caption); color: var(--color-text-muted); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  transition: background var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default), transform var(--duration-fast) var(--ease-default);
  /* 좁은 공간에서 텍스트가 잘리거나 사라지지 않도록 보호 */
  white-space: nowrap;
  flex-shrink: 0;
  min-width: fit-content;
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* 버튼이 들어가는 컨테이너 — 좁아지면 잘리지 않고 다음 줄로 wrap */
.site-header__cta,
.mgr-page__actions,
.learn-page__actions,
.admin-page__actions,
.form-actions {
  flex-wrap: wrap;
}

/* 텍스트 들어가는 pill / badge / status-pill 등도 동일 보호 */
.pill,
.badge,
.status-pill,
.role-pill,
.task-pill,
.invite-pill {
  white-space: nowrap;
  flex-shrink: 0;
}

/* HTML5 [hidden] 속성을 강제로 적용 — display: flex/grid/block 등 명시 CSS가 hidden을 덮어쓰던 문제 해결.
 * 영향: <form hidden>, <div hidden> 등 모든 hidden 속성을 가진 요소가 의도대로 숨김 처리. */
[hidden] {
  display: none !important;
}

/* ----- 글로벌 이미지 CLS(레이아웃 시프트) 방지 패턴 -----
 * 이미지 로딩 전후 레이아웃 흔들림(메뉴/카드/슬라이드 이동)을 막기 위한 클래스 기반 시스템.
 * 사용처: 카드 썸네일, 아바타, 슬라이드, 첨부 이미지 등.
 *
 * 사용법:
 *   1. 컨테이너에 .img-frame 클래스 + data-ratio 또는 명시적 aspect-ratio 부여
 *   2. img는 .img-frame__el 클래스 — 컨테이너 채움 + object-fit: cover
 *   3. 비율 modifier: .img-frame--16-9, .img-frame--4-3, .img-frame--1-1 등
 */
.img-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-bg-soft, #F9FAFB);
  /* 기본 16:9 — modifier로 덮어쓰기 */
  aspect-ratio: 16 / 9;
}
.img-frame--16-9 { aspect-ratio: 16 / 9; }
.img-frame--4-3  { aspect-ratio: 4 / 3; }
.img-frame--3-2  { aspect-ratio: 3 / 2; }
.img-frame--1-1  { aspect-ratio: 1 / 1; }    /* 정사각형 — 아바타·로고 */
.img-frame--3-4  { aspect-ratio: 3 / 4; }    /* 세로형 — 포스터 */
.img-frame__el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.img-frame__el--contain { object-fit: contain; }
/* 로딩 중 부드러운 placeholder (이미지 fade-in) */
.img-frame__el {
  opacity: 0;
  transition: opacity 200ms ease;
}
.img-frame__el[src]:not([src=""]) {
  /* src가 설정되면 fade-in */
  animation: img-fade-in 300ms ease forwards;
}
@keyframes img-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 스켈레톤 (이미지 로딩 중 회색 그라데이션) — .img-frame.is-loading 또는 기본 */
.img-frame::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #F3F4F6 0%, #E5E7EB 50%, #F3F4F6 100%);
  background-size: 200% 100%;
  animation: img-skeleton 1.4s ease-in-out infinite;
  pointer-events: none;
}
.img-frame--loaded::before { display: none; }   /* 이미지 로드 완료 후 숨김 */
@keyframes img-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* 사용자가 reduce-motion 설정 시 스켈레톤 애니메이션 끔 */
@media (prefers-reduced-motion: reduce) {
  .img-frame::before { animation: none; }
  .img-frame__el { transition: none; animation: none; opacity: 1; }
}

/* ----- 글로벌 pill/배지 외곽선 강화 (식별성 향상) -----
 * 라운드 박스 + 옅은 배경 + 옅은 외곽선 조합에서 텍스트 식별이 어려운 문제 해결.
 * 외곽선을 한 단계 진하게(currentColor 50% alpha) 적용. variant별 색상은 유지. */
.pill,
.status-pill,
.role-pill,
.task-pill,
.invite-pill {
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
}
/* 외곽선이 별도 디자인된 dark pill(예: .btn--dark)이나 monitor 배지는 제외 */
.pill.is-no-border,
.status-pill.is-no-border { border: 0; }
/* (모니터링) 배지: 의도적으로 약한 배지라 강한 외곽선 적용하지 않음 */
.badge--monitor { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }

.btn--sm { height: 36px; padding: 0 var(--space-4); font-size: var(--text-body-sm); }
.btn--lg { height: 56px; padding: 0 var(--space-8); font-size: var(--text-body-lg); }

.btn--primary { background: var(--color-primary-500); color: var(--color-secondary-700); }
.btn--primary:hover { background: var(--color-primary-400); }

.btn--dark { background: var(--color-secondary-700); color: var(--color-primary-400); }
.btn--dark:hover { background: var(--color-secondary-800); }

.btn--secondary { background: var(--color-bg); color: var(--color-secondary-700); border: var(--border-thin) solid var(--color-secondary-700); }
.btn--secondary:hover { background: var(--color-secondary-100); }

.btn--ghost { background: transparent; color: var(--color-text); }
.btn--ghost:hover { background: var(--color-bg-soft); }

.btn--block { display: flex; width: 100%; }

/* ----- Header ----- */
.site-header {
  position: sticky; top: 0;
  height: 72px;
  background: var(--color-bg);
  border-bottom: var(--border-thin) solid var(--color-border);
  z-index: var(--z-header);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
/* ----- Site Logo (브랜드 마크 + 텍스트 fallback) -----
 * 동작:
 *   - <img class="site-logo__image">가 있으면 텍스트 숨김
 *   - 없거나 로드 실패 시 .site-logo__text 또는 .site-logo__mark 노출
 * 세로 max-height는 토큰 (--brand-logo-max-h-public)으로 일괄 관리
 */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-h4);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  line-height: 1;
  /* CLS 방지: 로고 영역 사이즈를 미리 예약 — 이미지 로딩 전후 레이아웃 흔들림 방지
   * 뷰포트별 매트릭스:
   *   ≤768px (모바일):     min-width 100px, min-height 40px
   *   769~1024px (태블릿): min-width 140px, min-height 48px
   *   >1024px (데스크탑):  min-width 160px, min-height 48px
   */
  min-width: 160px;
  min-height: 48px;
}
@media (max-width: 1024px) {
  .site-logo { min-width: 140px; min-height: 48px; }
}
@media (max-width: 768px) {
  .site-logo { min-width: 100px; min-height: 40px; }
}
.site-logo__image {
  display: block;
  height: auto;
  width: auto;
  max-height: var(--brand-logo-max-h-public);
  max-width: 100%;
  /* aspect-ratio 사용 시 이미지가 로드되기 전에도 자리 차지
   * 실제 이미지의 aspect ratio가 다를 수 있으니 fallback으로 max-height만 활용 */
}
.site-logo__text {
  /* 이미지가 없을 때만 노출되는 텍스트 fallback */
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.site-logo--has-image .site-logo__text,
.site-logo--has-image .site-logo__mark { display: none; }

/* 작은 글자 마크 (이미지 미설정 시 기본 표시) */
.site-logo__mark {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--color-secondary-700);
}
.site-nav { display: flex; align-items: stretch; gap: var(--space-8); height: 100%; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  position: relative;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-default);
  letter-spacing: var(--tracking-tight);
}
.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 5px;
  background: transparent;
  border-radius: 3px 3px 0 0;
  transition: background var(--duration-fast) var(--ease-default);
}
.site-nav__link:hover { color: var(--color-secondary-700); }
.site-nav__link:hover::after { background: var(--color-primary-300); }
.site-nav__link--active { color: var(--color-secondary-700); }
.site-nav__link--active::after { background: var(--color-primary-500); }

/* ===== GNB 안의 CTA 스타일 메뉴 (교육문의 등) =====
   GNB 다른 메뉴와 vertical 라인 일치, 살짝 낮은 높이의 pill.
   - 텍스트 스타일(font-size/weight)은 .site-nav__link에서 상속 — 메인 메뉴와 동일.
   - 글자색은 평시/hover 동일하게 진한 보라(secondary-700).
   - 평시: 파스텔 옐로우 배경(primary-200) → hover: 진한 노란 배경(primary-500). */
.site-nav__link.site-nav__link--cta {
  height: 34px;
  align-self: center;          /* GNB 자식들과 vertical 라인 일치 (메인 메뉴 baseline) */
  padding: 0 14px;
  margin-left: var(--space-3);
  background: var(--color-primary-200, #FFF6B8);
  color: var(--color-secondary-700);
  border: 2px solid var(--color-primary-500, #FFD400);  /* 진한 노란 외곽선 */
  border-radius: 999px;
  line-height: 1;
  transition: background var(--duration-fast) var(--ease-default);
}
.site-nav__link.site-nav__link--cta:hover {
  background: var(--color-primary-500, #FFD400);
  color: var(--color-secondary-700);  /* 글자색 그대로 — 배경만 변함 */
}
/* CTA 항목은 active underline 효과 비활성 (pill 버튼이라 불필요) */
.site-nav__link.site-nav__link--cta::after { display: none; }

.site-header__cta { display: flex; align-items: center; gap: var(--space-3); }

@media (max-width: 768px) {
  .site-header { height: 60px; }
  .site-nav { display: none; }
}

/* ----- Footer ----- */
.site-footer {
  background: var(--color-secondary-700);
  color: var(--color-text-inverse);
  padding: var(--space-16) 0 var(--space-8);
}
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-12); margin-bottom: var(--space-12); }
.site-footer__title { font-size: var(--text-body-sm); font-weight: var(--weight-bold); color: var(--color-primary-400); margin-bottom: var(--space-4); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.site-footer__text { font-size: var(--text-body-sm); color: var(--color-text-inverse-a78); line-height: var(--leading-relaxed); }
.site-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__list a { color: var(--color-text-inverse-a78); font-size: var(--text-body-sm); }
.site-footer__list a:hover { color: var(--color-primary-400); }
.site-footer__bottom { padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-text-inverse-a10); font-size: var(--text-caption); color: var(--color-text-inverse-a50); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }

@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ----- Cards ----- */
.card-content {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default);
}
.card-content:hover { border-color: var(--color-secondary-700); transform: translateY(-2px); }
.card-content__thumb { aspect-ratio: 16/10; background: var(--color-bg-muted); position: relative; overflow: hidden; }
.card-content__thumb svg.thumb-art, .card-content__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-content__thumb svg:not(.cat-badge svg):not(.thumb-art) { width: 100%; height: 100%; object-fit: cover; }
.card-content__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.card-content__title { font-size: var(--text-h4); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--color-text); margin: 0; }
.card-content__headline {
  font-size: var(--text-body); font-weight: var(--weight-semibold);
  line-height: var(--leading-snug); color: var(--color-secondary-700);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.card-content__sub {
  font-size: var(--text-body-sm); color: var(--color-text-muted); line-height: var(--leading-normal);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.card-content__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2); }

/* ----- Category Badge (썸네일 위 오버레이) ----- */
.cat-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  font-size: var(--text-tag);
  font-weight: var(--weight-semibold);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  color: var(--color-secondary-700);
  z-index: 2;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1;
}
.cat-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.cat-badge[data-cat="environment"] { color: var(--accent-environment); }
.cat-badge[data-cat="care"] { color: var(--accent-care); }
.cat-badge[data-cat="region"] { color: var(--accent-region); }
.cat-badge[data-cat="education"] { color: var(--accent-education); }
.cat-badge[data-cat="youth"] { color: var(--accent-youth); }
.cat-badge[data-cat="digital"] { color: var(--accent-digital); }

/* ==========================================================================
   Avatar (프로필 / 팀 이미지) — 이미지 / 아이콘 / 이니셜 3가지 모드
   ========================================================================== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-secondary-700);
  color: var(--color-primary-400);
  font-weight: var(--weight-bold);
  line-height: 1;
  aspect-ratio: 1 / 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  user-select: none;
}

/* Sizes (디자인 토큰 기반 — design-tokens.css 참조) */
.avatar--xs  { width: var(--avatar-size-xs);  height: var(--avatar-size-xs);  min-width: var(--avatar-size-xs);  min-height: var(--avatar-size-xs);  font-size: 11px; }
.avatar--sm  { width: var(--avatar-size-sm);  height: var(--avatar-size-sm);  min-width: var(--avatar-size-sm);  min-height: var(--avatar-size-sm);  font-size: var(--text-body-sm); }
.avatar--md  { width: var(--avatar-size-md);  height: var(--avatar-size-md);  min-width: var(--avatar-size-md);  min-height: var(--avatar-size-md);  font-size: var(--text-body); }
.avatar--lg  { width: var(--avatar-size-lg);  height: var(--avatar-size-lg);  min-width: var(--avatar-size-lg);  min-height: var(--avatar-size-lg);  font-size: var(--text-body-lg); }
.avatar--xl  { width: var(--avatar-size-xl);  height: var(--avatar-size-xl);  min-width: var(--avatar-size-xl);  min-height: var(--avatar-size-xl);  font-size: var(--text-h4); }
.avatar--2xl { width: var(--avatar-size-2xl); height: var(--avatar-size-2xl); min-width: var(--avatar-size-2xl); min-height: var(--avatar-size-2xl); font-size: var(--text-h3); }

/* Colors (이니셜 / 아이콘 모드용) */
.avatar[data-color="yellow"] { background: var(--accent-default); background-color: var(--color-primary-500); color: var(--color-secondary-700); }
.avatar[data-color="purple"] { background: var(--color-secondary-700); color: var(--color-primary-400); }
.avatar[data-color="green"] { background: var(--accent-environment); color: var(--color-text-inverse); }
.avatar[data-color="blue"] { background: var(--accent-region); color: var(--color-text-inverse); }
.avatar[data-color="pink"] { background: var(--accent-care); color: var(--color-text-inverse); }
.avatar[data-color="orange"] { background: var(--accent-education); color: var(--color-text-inverse); }
.avatar[data-color="teal"] { background: var(--accent-digital); color: var(--color-text-inverse); }
.avatar[data-color="violet"] { background: var(--accent-youth); color: var(--color-text-inverse); }

/* Image mode */
.avatar--image { background-color: var(--color-bg-muted); }
.avatar--image > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Icon mode */
.avatar--icon svg {
  width: 56%;
  height: 56%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Initial mode (기본) */
.avatar--initial { font-family: var(--font-display); }

/* Border ring (선택적) */
.avatar--ring { border: 2px solid var(--color-bg); box-shadow: 0 0 0 2px var(--color-border); }

/* Avatar group (팀원 겹쳐서 표시) */
.avatar-group { display: inline-flex; }
.avatar-group .avatar + .avatar { margin-left: -8px; border: 2px solid var(--color-bg); }

/* ==========================================================================
   .avatar-mini — 시안 호환 클래스 (공용)
   admin / learn / manager 모든 영역에서 사용. 토큰 기반 사이즈.
   정책: 원형 + 이미지 우선 (자식 <img>), 텍스트 이니셜 fallback
   ========================================================================== */
.avatar-mini {
  width: var(--avatar-size-md);
  height: var(--avatar-size-md);
  min-width: var(--avatar-size-md);
  min-height: var(--avatar-size-md);
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-secondary-200);
  color: var(--color-secondary-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  font-family: var(--font-display);
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
  aspect-ratio: 1 / 1;
}
.avatar-mini > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 사이즈 modifier — 토큰 기반 */
.avatar-mini--xs { width: var(--avatar-size-xs); height: var(--avatar-size-xs); min-width: var(--avatar-size-xs); min-height: var(--avatar-size-xs); font-size: var(--text-caption); }
.avatar-mini--sm { width: var(--avatar-size-sm); height: var(--avatar-size-sm); min-width: var(--avatar-size-sm); min-height: var(--avatar-size-sm); font-size: var(--text-body-sm); }
/* 레거시 픽셀 alias (시안 코드 호환 유지) — 새 토큰으로 한 단계씩 키움 */
.avatar-mini--32 { width: var(--avatar-size-sm);  height: var(--avatar-size-sm);  min-width: var(--avatar-size-sm);  min-height: var(--avatar-size-sm);  font-size: var(--text-body-sm); }
.avatar-mini--40 { width: var(--avatar-size-lg);  height: var(--avatar-size-lg);  min-width: var(--avatar-size-lg);  min-height: var(--avatar-size-lg);  font-size: var(--text-body-lg); }
.avatar-mini--64 { width: var(--avatar-size-xl);  height: var(--avatar-size-xl);  min-width: var(--avatar-size-xl);  min-height: var(--avatar-size-xl);  font-size: var(--text-h4); }
.avatar-mini--80 { width: var(--avatar-size-2xl); height: var(--avatar-size-2xl); min-width: var(--avatar-size-2xl); min-height: var(--avatar-size-2xl); font-size: var(--text-h3); }

/* Team avatar — alias for backward compatibility */
.team-avatar { /* identical to .avatar but expressed semantically */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  font-weight: var(--weight-bold);
  background: var(--color-secondary-700);
  color: var(--color-primary-400);
  background-position: center;
  background-size: cover;
}
.team-avatar[data-color="green"] { background: var(--accent-environment); color: var(--color-text-inverse); }
.team-avatar[data-color="blue"] { background: var(--accent-region); color: var(--color-text-inverse); }
.team-avatar[data-color="pink"] { background: var(--accent-care); color: var(--color-text-inverse); }
.team-avatar[data-color="orange"] { background: var(--accent-education); color: var(--color-text-inverse); }
.team-avatar[data-color="violet"] { background: var(--accent-youth); color: var(--color-text-inverse); }

/* ----- Chips / Tags ----- */
.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--space-3);
  font-size: var(--text-tag);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-pill);
}
.chip--cat { background: var(--color-secondary-700); color: var(--color-primary-400); text-transform: uppercase; }
.chip--cat[data-cat="environment"] { background: var(--accent-environment); color: white; }
.chip--cat[data-cat="care"] { background: var(--accent-care); color: white; }
.chip--cat[data-cat="region"] { background: var(--accent-region); color: white; }
.chip--cat[data-cat="education"] { background: var(--accent-education); color: white; }
.chip--cat[data-cat="youth"] { background: var(--accent-youth); color: white; }
.chip--cat[data-cat="digital"] { background: var(--accent-digital); color: white; }

.tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--space-3);
  font-size: var(--text-tag);
  font-weight: var(--weight-medium);
  border: var(--border-thin) solid var(--color-secondary-700);
  color: var(--color-secondary-700);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
}
.tag--soft { background: var(--color-secondary-200); border-color: transparent; }

.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
}
.status-pill::before { content: ''; width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; }
.status-pill--submitted { background: var(--color-success-bg); color: var(--color-success); }
.status-pill--not_submitted { background: var(--color-danger-bg); color: var(--color-danger); }
.status-pill--public { background: var(--color-info-bg); color: var(--color-info); }
.status-pill--private_completed { background: var(--color-bg-muted); color: var(--color-text-muted); }
.status-pill--draft { background: var(--color-warning-bg); color: var(--color-warning); }

/* ----- Form ----- */
.field { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.field__label {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}
.field__label .req { color: var(--color-danger); margin-left: 4px; }
.field__hint { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1); }
.field__error { font-size: var(--text-caption); color: var(--color-danger); margin-top: var(--space-1); }

.input, .textarea, .select {
  width: 100%;
  height: 52px;
  padding: 0 var(--space-4);
  font-size: var(--text-body);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.textarea { height: auto; min-height: 140px; padding: var(--space-4); resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--color-primary-500); box-shadow: var(--shadow-focus); }
.input::placeholder, .textarea::placeholder { color: var(--color-text-soft); }

/* 모바일에서 터치 타겟 충분히 확보 */
@media (max-width: 640px) {
  .field { margin-bottom: var(--space-7, 28px); }
  .input, .textarea, .select { height: 56px; font-size: 16px; /* iOS 자동 zoom 방지 */ }
}

/* ----- Section Heading ----- */
.section-head { margin-bottom: var(--space-12); }
.section-head__eyebrow { display: inline-block; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); color: var(--color-secondary-700); text-transform: uppercase; margin-bottom: var(--space-3); }
.section-head__title { font-size: var(--text-h2); font-weight: var(--weight-bold); line-height: var(--leading-snug); margin: 0 0 var(--space-3); }
.section-head__sub { font-size: var(--text-body-lg); color: var(--color-text-muted); line-height: var(--leading-relaxed); max-width: 640px; }
.section-head__action { margin-top: var(--space-4); }

/* ----- Grid ----- */
.grid-cards { display: grid; gap: var(--space-6); }
.grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
.grid-cards--2 { grid-template-columns: repeat(2, 1fr); }
.grid-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .grid-cards--3, .grid-cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-cards--3, .grid-cards--2, .grid-cards--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   콘텐츠 상세 — 상단 돌아가기 바 + Floating 닫기 (5.3.D Sticky Back Bar)
   사회문제 DB / 리소스 / 쇼케이스 상세 페이지에서 공통 사용
   ========================================================================== */
.post-page { background: var(--color-bg-soft); }

.post-bar {
  position: sticky;
  top: 72px;
  z-index: 90;
  background: var(--color-bg-soft);
  border-bottom: var(--border-thin) solid var(--color-border);
  padding: var(--space-3) 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.post-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: var(--border-thin) solid var(--color-border-strong);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.back-btn:hover { background: var(--color-secondary-700); color: var(--color-primary-400); border-color: var(--color-secondary-700); }
.back-btn svg { width: 16px; height: 16px; }

.post-bar__crumb {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.post-bar__crumb a { color: inherit; }
.post-bar__crumb-current {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-bar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: var(--border-thin) solid var(--color-border-strong);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--duration-fast);
  flex-shrink: 0;
}
.post-bar__close:hover { background: var(--color-danger); color: var(--color-text-inverse); border-color: var(--color-danger); }

.post-wrapper {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
}

.floating-close {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-secondary-700);
  color: var(--color-primary-400);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  border: none;
  box-shadow: 0 8px 24px rgba(26, 26, 46, 0.18);
  transition: all var(--duration-fast);
}
.floating-close:hover { background: var(--color-secondary-800); transform: translateY(-2px); }
.floating-close svg { width: 18px; height: 18px; }

@media (max-width: 768px) {
  .post-bar { top: 60px; padding: var(--space-2) 0; }
  .post-bar__crumb { display: none; }
  .post-wrapper { padding: var(--space-5) var(--space-4) var(--space-10); }
  .floating-close { right: var(--space-4); bottom: var(--space-4); height: 44px; padding: 0 var(--space-4); }
  .floating-close span { display: none; }
}

/* post-bar 액션 버튼 그룹 (프린트 | 공유 | 닫기) */
.post-bar__actions { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.post-bar__action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: var(--border-thin) solid var(--color-border-strong);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.post-bar__action:hover { background: var(--color-secondary-700); color: var(--color-primary-400); border-color: var(--color-secondary-700); }
.post-bar__action svg { width: 18px; height: 18px; }

/* 인쇄 시 — post-bar/floating-close/site-header/footer 등 출력 제외 */
@media print {
  .site-header, .site-footer, .post-bar, .floating-close { display: none !important; }
  body { background: white !important; }
}

/* ==========================================================================
   콘텐츠 상세 — 본문 끝 CTA 박스 (사회문제 / 리소스 / 쇼케이스 공통)
   .post-page > .post-wrapper 다음에 배치
   ========================================================================== */
.post-cta {
  background: var(--color-secondary-700);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  margin: var(--space-12) auto;
  max-width: var(--container-lg);
  text-align: center;
}
.post-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-tight);
}
.post-cta__sub {
  color: var(--color-text-inverse-a78);
  font-size: var(--text-body);
  margin: 0 0 var(--space-6);
  line-height: var(--leading-relaxed);
}
.post-cta .btn--primary {
  background: var(--color-primary-400);
  color: var(--color-secondary-700);
}
.post-cta .btn--primary:hover {
  background: var(--color-primary-300);
}

@media (max-width: 768px) {
  .post-cta {
    margin: var(--space-8) var(--space-4);
    padding: var(--space-8) var(--space-5);
  }
  .post-cta__title { font-size: var(--text-h3); }
}

@media print {
  .post-cta { display: none !important; }
}

/* ===== 브랜드 요소 — 로딩 중 텍스트 깜박임 방지 =====
   JS가 브랜딩(이미지/텍스트) 결정 전엔 숨기고, .is-ready 부여 시 부드럽게 페이드인.
   600ms 안에 .is-ready 부여 안 되면 (네트워크 실패 등) CSS keyframe으로 강제 표시. */
.site-logo, .auth-art__brand,
.learn-sidebar__brand, .mgr-sidebar__brand, .admin-sidebar__brand {
  opacity: 0;
  animation: brand-fallback 0s linear 0.6s forwards;
  transition: opacity 0.2s ease;
}
.site-logo.is-ready, .auth-art__brand.is-ready,
.learn-sidebar__brand.is-ready, .mgr-sidebar__brand.is-ready, .admin-sidebar__brand.is-ready {
  opacity: 1;
  animation: none;
}
@keyframes brand-fallback { to { opacity: 1; } }

/* ===== 임시 비활성 메뉴 — 쇼케이스 =====
   쇼케이스 콘텐츠 준비 전이라 GNB·드로어·푸터에서 숨김 처리.
   콘텐츠 준비되면 이 블록을 제거하기만 하면 자동 복원됨 (HTML은 그대로 유지). */
.site-nav__link[href^="/showcase"],
.sl-mobile-drawer__nav a[href^="/showcase"],
.site-footer a[href^="/showcase"] {
  display: none !important;
}

/* ===== 로그인 상태일 때 공개 헤더의 로그인/회원가입 자동 숨김 =====
   user-menu.js가 인증 상태에 따라 body.is-logged-in 클래스를 토글한다.
   href는 /login.html, /signup.html, /login.html?next=... 등 다양한 형태가 가능하므로
   시작 매칭(^=)으로 절대/상대 경로 모두 커버. */
body.is-logged-in .site-header__cta a[href^="/login"],
body.is-logged-in .site-header__cta a[href^="/signup"],
body.is-logged-in .site-header__cta a[href^="login"],
body.is-logged-in .site-header__cta a[href^="signup"] {
  display: none !important;
}
/* 모바일 햄버거 드로어 안의 CTA(헤더에서 복사됨)도 동일하게 숨김 */
body.is-logged-in .sl-mobile-drawer__nav a[href^="/login"],
body.is-logged-in .sl-mobile-drawer__nav a[href^="/signup"] {
  display: none !important;
}