/* ── Deep Navy + Cool Neutral 팔레트 (navy-ref) ──────────────
   브랜드 accent를 :root 변수로 도입해 공유 컴포넌트(.modal, .pagination,
   .toast, .logo, .empty)가 변수를 참조하게 한다. admin 전용 스타일은
   기존 블루를 유지 — 대상: admin-hero, admin-toolbar, admin-stats,
   btn 계열, table th td, upload-box, form-group, stat-card, bslot 계열,
   progress 계열. danger, success, warning 시맨틱 색도 유지.
   주의: 이 주석 안에서는 별표와 슬래시를 붙여 쓰지 않는다(CSS 주석
   조기 종료 방지 — 지난 :root 무효화 버그 재발 방지). */
:root {
  /* 레퍼런스 정규 변수 */
  --bg:          #f7f8fb;   /* 페이지 배경 (밝은 쿨그레이) */
  --surface-2:   #eef1f7;   /* 대체 카드/필 배경 */
  --sand:        #e6eaf2;   /* 은은한 구획 */
  --line:        #dce1eb;   /* 헤어라인 */
  --ink:         #16294d;   /* 메인 딥 네이비 텍스트 */
  --ink-2:       #1f3a63;
  --navy-700:    #2a4877;   /* 보조 네이비 (아이콘·서브) */
  --muted:       #51617d;   /* 보조 텍스트 */
  --muted-soft:  #8892a6;   /* 캡션·플레이스홀더 */
  --accent:      #1f3a63;   /* 주 강조 (버튼/필) */
  --accent-deep: #16294d;   /* 강조 hover / 딥 */
  --accent-ink:  #1f3a63;   /* 소형 강조 텍스트 */
  --gold:        #b0863c;   /* 절제된 골드 서브 포인트 */
  --gold-soft:   #eac789;   /* 다크 배경 위 골드 강조 */
  --on-dark:     #f2f6fc;   /* 다크 배경 위 라이트 텍스트 */
  /* 레거시 변수명 → 네이비 대응값 (기존 컴포넌트 규칙 무손상용 매핑) */
  --cream:        #ffffff;   /* 카드·모달·패널 표면(흰색). 페이지 바탕은 --bg 사용 */
  --cream-2:      #eef1f7;
  --terra:        #1f3a63;   /* 구 골드 fill → 네이비 accent */
  --terra-deep:   #1f3a63;   /* 구 골드 텍스트 → 네이비 강조 텍스트 */
  --olive-deep:   #2a4877;
  --brand:        #1f3a63;
  --brand-fill:   #1f3a63;
  --brand-fill-2: #16294d;
  --brand-tint:       rgba(31,58,99,.10);
  --brand-tint-strong:rgba(31,58,99,.18);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Pretendard', 'Noto Sans KR', sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ── Layout ─────────────────────────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ── Header ─────────────────────────────────────────────── */
header {
  background: #ffffff;
  color: var(--ink);
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(30,33,38,.05);
}
/* 로고/nav를 .wrap과 동일한 max-width+padding으로 감싸 카드 그리드 왼쪽 경계와 세로 정렬시킴 */
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .logo { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: var(--ink); }
header .logo span { color: var(--terra-deep); }
header nav a {
  color: var(--muted);
  font-size: 13px;
  margin-left: 20px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background .2s, color .2s;
}
header nav a:hover, header nav a.active { background: var(--brand-tint); color: var(--terra-deep); }

/* ── Category Nav ───────────────────────────────────────────
   대분류 탭 + 드롭다운 패널. 히어로와 카드 영역 사이의 독립된
   .cat-bar에 위치(헤더 안이 아님 — 헤더는 로고만 남음).
   데스크톱은 hover(마우스 오버 시 즉시 열림, 탭/패널을 벗어나면
   유예시간 뒤 닫힘 — JS의 CAT_HOVER_CLOSE_DELAY 참고)로 열리는
   박스형 드롭다운(뷰포트 전체를 덮는 오버레이 아님 — 박스 밖으로는
   기존 카드 등이 그대로 보이고 클릭도 된다). 폭·위치는 대분류마다
   바뀌지 않고 항상 고정(자세한 값은 .cat-panel-inner 참고).
   모바일은 hover가 없는 터치 환경이라 가로 스크롤 칩 + 클릭(탭)
   토글 인라인(비오버레이) 아코디언을 그대로 유지.
   기존 #fCat1/#fCat2/#fLevel select 필터·doSearch()를 그대로
   재사용하는 병행 컴포넌트이며 검색 로직 자체는 건드리지 않는다. ── */
.cat-bar {
  position: relative;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.cat-bar .wrap { display: flex; }
.cat-nav { display: flex; align-items: center; gap: 24px; }
/* 대분류 탭 강조 — 기존 14px/600/#4b5f75(카드 메타 정보 수준의 무게)는
   "1차 진입점 nav"치고 너무 조용해서, 로고(18px/700)보다는 낮지만 body
   텍스트(15px)보다는 뚜렷한 16px/700으로 올리고, 기본 상태 색도 muted
   slate(#4b5f75) 대신 hover에서만 쓰던 진한 잉크(#1a3a5c)를 기본값으로
   당겨왔다 — 평상시에도 "탐색 가능한 1차 nav"로 읽히게. 상태 3단계로
   구분: 기본=진한 잉크(눈에 띄지만 아직 안 열림) → hover=브랜드 블루(곧
   열릴 것 같은 예열 신호) → 실제 열림(aria-expanded)=블루+밑줄(가장
   강한 확정 신호). 패딩은 그대로 둬서 바 전체 높이 증가는 3px 안팎으로
   억제(로고 56px 헤더·검색창과 위계 어긋나지 않는 선). */
.cat-nav-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.cat-nav-item svg { width: 12px; height: 12px; transition: transform .15s; flex-shrink: 0; color: var(--terra); }
.cat-nav-item:hover { color: var(--terra-deep); }
.cat-nav-item[aria-expanded="true"] { color: var(--terra-deep); border-bottom-color: var(--terra); }
.cat-nav-item[aria-expanded="true"] svg { transform: rotate(180deg); }

/* 뷰포트 전체를 덮는 오버레이가 아니라, .wrap과 같은 폭(1200px)의 투명한
   위치기준 컨테이너 안에 뜨는 박스(.cat-panel-inner). 바깥 컨테이너는
   pointer-events:none으로 뚫어놔서 박스 오른쪽/아래로 보이는 기존 카드
   등은 그대로 클릭 가능해야 한다.
   position은 fixed가 아니라 absolute — .cat-bar가 헤더처럼 sticky가
   아니라 문서 흐름 안에 있으므로, 스크롤해도 .cat-bar와 같이 움직이며
   그 바로 아래(top:100%)에 붙어야 한다(뷰포트에 고정되면 안 됨). 부모
   .cat-bar가 position:relative라 absolute의 기준점이 된다.
   위치는 버튼별 동적 앵커링 없이 항상 왼쪽(.cat-panel의 왼쪽 padding
   안쪽 경계, 즉 .wrap/카드 그리드 왼쪽 경계와 같은 x좌표)에 고정. */
.cat-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  pointer-events: none;
  z-index: 99;
}
.cat-panel.open { display: block; }
/* 폭도 대분류마다 안 바뀌게 고정값으로 — 중분류가 가장 많은 "직무"
   (5컬럼) 기준 실측값이다: 컬럼 5 × 190px + 컬럼 사이 gap 4 × 28px
   = 1062px, 박스 좌우 padding 44px + 테두리 2px = 1108px, 거기에
   여유 12px을 더해 1120px로 고정. 중분류가 더 적은 대분류(예: DX,
   경영)를 열어도 같은 폭으로 뜨고 오른쪽에 여백만 남는다. */
.cat-panel-inner {
  pointer-events: auto;
  width: 1120px;
  max-width: 100%;
  margin-top: 8px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 30px 64px -26px rgba(18,20,24,.36), 0 6px 18px -10px rgba(18,20,24,.18);
  padding: 18px 22px 20px;
}
.cat-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cat-panel-head h3 { font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.cat-panel-head .count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cat-panel-head .viewall { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--terra-deep); padding: 6px 10px; border-radius: 20px; background: var(--brand-tint); white-space: nowrap; transition: background .15s; }
.cat-panel-head .viewall:hover { background: var(--brand-tint-strong); }

/* 중분류(cat2) = 컬럼 헤더, 그 아래 소분류(cat3) = 리스트. 컬럼 수가
   가변적이므로(대분류당 최대 5개) grid 대신 flex-wrap으로 짜서 폭이
   부족하면 다음 줄로 자연스럽게 넘어가게 하고, 세로로 긴 컬럼(예: 직무 >
   IT 10개)이 생겨도 전체 그리드에 max-height + 세로 스크롤을 걸어 패널이
   화면 밖으로 무한정 길어지지 않게 안전장치를 둔다. */
.cat-panel-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 28px; max-height: 440px; overflow-y: auto; }
.cat-col { display: flex; flex-direction: column; width: 190px; flex: 0 0 190px; min-width: 0; }
.cat-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 8px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 1.5px solid var(--line);
  border-radius: 4px 4px 0 0;
  transition: background .12s, border-color .12s, color .12s;
}
.cat-col-head span:first-child { word-break: keep-all; }
.cat-col-head:hover { background: var(--brand-tint); border-color: var(--terra); color: var(--terra-deep); }
.cat-col-head .n { font-size: 11px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.cat3-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px; border-radius: 6px; font-size: 13px; color: var(--muted); transition: background .12s, color .12s, transform .12s; }
.cat3-link span:first-child { word-break: keep-all; }
.cat3-link:hover { background: var(--brand-tint); color: var(--terra-deep); transform: translateX(3px); }
.cat3-link .n { font-size: 11px; color: var(--muted-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cat-col-empty { padding: 6px; font-size: 12px; color: var(--muted-soft); }

/* 모바일 전용 마크업 — 데스크톱에서는 항상 숨김 */
.cat-nav-mobile, .cat-panel-mobile { display: none; }

@media (max-width: 768px) {
  .cat-nav { display: none; }
  .cat-panel { display: none !important; }

  .cat-nav-mobile {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    overflow-x: auto;
    background: #fff;
    border-bottom: 1px solid var(--line);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .cat-nav-mobile::-webkit-scrollbar { display: none; }
  .cat-chip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 13px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
  }
  .cat-chip[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }

  .cat-panel-mobile {
    display: none;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--cream-2);
  }
  .cat-panel-mobile.open { display: block; }
  .cat-panel-mobile .cat-panel-inner {
    width: auto; max-width: none; margin-top: 0; padding: 0;
    background: none; border: none; border-radius: 0; box-shadow: none;
  }
  .cat-panel-mobile .cat-panel-head { border-bottom: none; margin-bottom: 10px; padding-bottom: 0; }
  .cat-panel-mobile .cat-panel-head h3 { font-size: 14px; }

  /* 모바일은 컬럼을 나란히 둘 가로 공간이 없으므로 중분류 섹션을 세로로
     쌓는다 — cat2 헤더 아래 cat3 리스트가 이어지는 그룹 리스트 형태.
     항목이 많은 대분류(직무 등)를 대비해 세로 스크롤 상한을 둔다. */
  .cat-panel-mobile .cat-panel-grid { flex-direction: column; flex-wrap: nowrap; gap: 14px; max-height: 60vh; }
  .cat-panel-mobile .cat-col { width: 100%; flex: 1 1 auto; }
  .cat-panel-mobile .cat-col-head { font-size: 13.5px; padding: 6px 8px; background: #fff; border-radius: 8px; border-bottom: none; margin-bottom: 2px; }
  .cat-panel-mobile .cat3-link { padding: 9px 8px 9px 18px; font-size: 13.5px; background: #fff; border-radius: 6px; margin-bottom: 2px; }
}

/* ── Search Hero (다크 실사 + 차콜 스크림 + grain) ──────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: #0d1a34 url('/static/hero.jpg') center/cover no-repeat;
  padding: 104px 20px 88px;
  color: var(--on-dark);
  border-bottom: 1px solid var(--line);
}
.hero::before { /* 네이비 스크림 — 톤 통일 + 좌측 헤드라인 가독성 */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 80% 16%, rgba(42,72,119,.36), transparent 56%),
    linear-gradient(180deg, rgba(11,22,44,.30) 0%, transparent 24%),
    linear-gradient(98deg, rgba(9,18,38,.90) 0%, rgba(13,25,50,.62) 42%, rgba(16,32,62,.34) 72%),
    linear-gradient(0deg, rgba(8,17,36,.74) 0%, transparent 46%);
}
.hero::after { /* 미세 필름 grain 텍스처 */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 180px;
  opacity: .05;
  mix-blend-mode: overlay;
}

/* 좌측 정렬 단일 컬럼 — 카피 + 검색바 + 스탯 */
.hero-grid {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
}
.hero-content { text-align: left; min-width: 0; max-width: 640px; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--on-dark);
  background: rgba(242,246,252,.13);
  border: 1px solid rgba(242,246,252,.30);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 22px;
  backdrop-filter: blur(2px);
}
.hero-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-soft); display: inline-block; }
.hero-content h1 { font-size: 54px; font-weight: 800; letter-spacing: -1.6px; line-height: 1.08; margin-bottom: 14px; color: var(--on-dark); text-shadow: 0 2px 24px rgba(8,16,34,.42); }
.hero-content p  { font-size: 17px; color: rgba(242,246,252,.86); opacity: 1; margin-bottom: 28px; max-width: 460px; }
.search-bar {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 20px 46px -18px rgba(18,20,24,.5);
  transition: box-shadow .2s;
}
.search-bar:focus-within {
  box-shadow: 0 20px 46px -18px rgba(16,29,53,.5), 0 0 0 3px rgba(31,58,99,.35);
}
.search-bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  color: var(--muted-soft);
}
.search-bar input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 14px 12px 14px 2px;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
}
.search-bar input::placeholder { color: var(--muted-soft); }
.search-bar button {
  background: var(--accent);
  border: none;
  color: #fff;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background .2s;
}
.search-bar button:hover { background: var(--accent-deep); }
.search-bar button:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: -4px;
}

/* Stat row under the search bar (다크 히어로 위) */
.hero-stats { display: flex; align-items: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat strong { font-size: 22px; font-weight: 800; letter-spacing: -.3px; color: var(--on-dark); }
.hero-stat span { font-size: 12px; color: rgba(242,246,252,.72); }
.hero-stat-divider { width: 1px; height: 28px; background: rgba(242,246,252,.28); }

@media (max-width: 960px) {
  .hero { padding: 84px 20px 68px; }
  .hero-content h1 { font-size: 42px; }
}

@media (max-width: 768px) {
  .hero { padding: 72px 16px 56px; }
  .hero-eyebrow { font-size: 11px; padding: 6px 13px; }
  .hero-content h1 { font-size: 30px; letter-spacing: -1px; }
  .hero-content p { font-size: 14px; margin-bottom: 24px; }
  .search-bar { width: 100%; max-width: 460px; }
  .search-bar-icon { width: 38px; }
  .search-bar input { font-size: 14px; padding: 12px 8px 12px 2px; }
  .search-bar button { padding: 12px 20px; font-size: 13px; }
  .hero-stats { gap: 14px; }
  .hero-stat strong { font-size: 18px; }
}

/* ── 큐레이션 '성장하는 팀' 섹션 (히어로와 cat-bar 사이) ───────
   navy-ref의 declare/collage/ph 이식. 순수 정적 마크업 — 검색/필터
   로직과 무관. .wrap와 함께 쓰되 세로 패딩은 .declare가 지정한다. */
.kicker {
  font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink); display: inline-flex; align-items: center; gap: 9px;
}
.kicker::before { content: ""; width: 22px; height: 1.5px; background: var(--accent); display: inline-block; }
.declare { padding: 80px 20px 76px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.declare-l .kicker { margin-bottom: 22px; }
.declare-l h2 { font-size: 44px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.declare-l h2 .u { color: var(--accent); }
.declare-l p { margin-top: 22px; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 42ch; font-weight: 500; }
.declare-l .sign { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--accent-ink); }
.declare-l .sign svg { transition: transform .2s; }
.declare-l .sign:hover svg { transform: translateX(4px); }
.collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.ph { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(155deg, rgba(18,34,64,.34) 0%, rgba(12,24,48,.58) 100%); }
.ph .cap { position: absolute; left: 16px; bottom: 14px; z-index: 3; color: var(--on-dark); font-size: 13px; font-weight: 700; letter-spacing: -.01em; text-shadow: 0 1px 8px rgba(8,16,34,.5); }
.collage .c1 { grid-row: 1 / span 2; min-height: 320px; }
.collage .c2 { aspect-ratio: 1 / .82; }
.collage .c3 { aspect-ratio: 1 / .82; }

/* ── 섹션 헤더 (분야별로 둘러보기 — 바로 아래 cat-bar와 한 세트) ── */
.section-head-wrap { padding: 8px 20px 18px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
/* word-break:keep-all — 한글은 어절(띄어쓰기) 단위로만 줄바꿈. 없으면 좁은
   폰에서 "둘러보기"→"둘러보/기"처럼 단어 중간이 끊긴다(코드 다른 곳도 동일 규칙). */
.section-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin-top: 14px; word-break: keep-all; }
.section-head .more { font-size: 14.5px; font-weight: 700; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; word-break: keep-all; }
.section-head .more svg { transition: transform .2s; }
.section-head .more:hover svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .declare { grid-template-columns: 1fr; gap: 34px; padding: 56px 20px 44px; }
  .declare-l h2 { font-size: 34px; }
  .collage .c1 { min-height: 0; aspect-ratio: 1 / .7; }
}

/* ── Filter Bar ─────────────────────────────────────────── */
/* header/.header-inner, .cat-bar/.cat-bar .wrap와 같은 패턴 — 바(bar)
   자체는 배경·테두리만 지고 전체 폭(edge-to-edge), 실제 내용은 .wrap로
   감싸 1200px 중앙정렬 컬럼 안에 둔다. 예전엔 .filter-bar 자체가 flex
   컨테이너라 margin-left:auto가 뷰포트 오른쪽 끝까지 밀려버리는 버그가
   있었음 — .filter-bar-inner(=.wrap)로 감싸 카드 그리드 오른쪽 경계와
   맞춤. */
.filter-bar {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.filter-bar-inner {
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
/* 대분류/중분류/난이도는 이제 카테고리 nav·활성 필터 배지가 그 역할을
   대신하므로 필터바에서는 시각적으로 숨긴다. DOM에서 완전히 지우지 않는
   이유: goToCategory()/levelChanged() 등이 여전히 이 select들의 .value를
   세팅해 doSearch()에 실어 보내는 상태 저장소로 쓰고 있어서 — 지우면
   검색 로직을 별도로 다시 짜야 한다. */
#fCat1, #fCat2, #fLevel { display: none; }
.filter-bar select {
  border: 1px solid #d0d5e0;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  background: #f8fafc;
  color: #333;
  outline: none;
  cursor: pointer;
  min-width: 120px;
}
.filter-bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.filter-bar .result-count { font-size: 13px; color: var(--muted); }
/* 카테고리 nav로 걸린 cat1/cat2/cat3 필터가 있을 때만 노출되는 배지.
   select가 숨겨진 뒤로는 이게 사용자가 카테고리 필터를 확인·해제할
   유일한 UI라 series-clear와 같은 "칩 + ✕" 패턴을 재사용한다. */
.cat-filter-badge {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--terra-deep);
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-strong);
  border-radius: 20px;
  padding: 4px 12px;
  transition: background .15s;
}
.cat-filter-badge:hover { background: var(--brand-tint-strong); }

/* ── Series Strip ───────────────────────────────────────── */
.series-strip {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
}
.series-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.series-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--terra-deep);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.series-clear {
  background: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  color: var(--muted);
  transition: all .15s;
}
.series-clear:hover { background: var(--cream-2); color: var(--ink); }
.series-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.series-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: var(--sbg, var(--cream-2));
  border: 1.5px solid var(--sborder, var(--line));
  border-radius: 14px;
  padding: 20px 20px 18px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  min-height: 148px;
}
.series-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -18px rgba(18,20,24,.34);
  border-color: var(--sc, var(--terra));
}
.series-card.active {
  border-color: var(--sc, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc, #1f3a63) 18%, transparent);
}
.series-icon { font-size: 28px; line-height: 1; margin-bottom: 12px; }
.series-info { flex: 1; min-width: 0; width: 100%; }
.series-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
  letter-spacing: -0.2px;
}
.series-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
  word-break: keep-all;
}
.series-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--sc, var(--terra-deep));
  margin-top: auto;
  opacity: .85;
}
.series-arrow { display: none; }
.badge.series-badge { font-size: 11px !important; }

/* 이미지 배너 카드 */
.banner-img-card {
  padding: 0;
  overflow: hidden;
  min-height: 148px;
  background: #f4f6fb;
}
.banner-img-card img {
  width: 100%;
  height: 100%;
  min-height: 148px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* 관리자 배너 슬롯 카드 */
.banner-slot-card {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 12px;
  padding: 16px;
  font-size: 13px;
}
.bslot-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a2a3a;
  margin-bottom: 12px;
}
.bslot-field { margin-bottom: 10px; }
.bslot-field label { display: block; font-size: 11px; font-weight: 600; color: #888; margin-bottom: 4px; }
.bslot-field input[type=url],
.bslot-field input[type=text],
.bslot-field select,
.bslot-field textarea {
  width: 100%;
  border: 1px solid #d0d5e0;
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.bslot-field input:focus,
.bslot-field select:focus,
.bslot-field textarea:focus { border-color: #2563a8; }
.bslot-field input[type=color] {
  width: 100%;
  height: 32px;
  padding: 2px 4px;
  border-radius: 7px;
  cursor: pointer;
}
.bslot-field textarea { resize: none; }

@media (max-width: 768px) {
  .series-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .series-cards { grid-template-columns: 1fr; }
}

/* ── Content Grid ───────────────────────────────────────── */
.content-section { padding: 28px 0 60px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
/* 콘텐츠 카드 — 카테고리 생성형 썸네일(사진 없음: cat1별 네이비 그라디언트
   + 대표 아이콘 + cat1·cat2 라벨) + 큰 본문 + 헤어라인 푸터.
   hover: 리프트(-5px)+큰 그림자+네이비 테두리, 썸네일 아이콘 확대,
   제목 네이비 강조, "자세히 보기 →" 슬라이드. 모든 훅(onclick·필드
   렌더·series-badge 인라인색)은 renderGrid()에서 그대로 유지된다. */
/* 콘텐츠 카드 — 배포본(fd96231) 텍스트 카드 복원. 색은 :root 변수가
   네이비를 가리켜 자동 네이비. hover 5중 강조: 리프트+딥그림자 /
   골드→네이비 액센트바(::before) 확장 / 테두리+틴트 배경 / 제목 색전환 /
   "자세히 보기 →"(::after) 슬라이드. 하드코딩 웜/차콜 값만 쿨톤으로 조정. */
.card {
  position: relative;
  background: var(--cream);
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  cursor: pointer;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 52px;
  background: var(--terra);
  border-radius: 0 0 3px 0;
  transition: width .35s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}
.card::after {
  content: '자세히 보기 →';
  position: absolute;
  right: 12px;
  bottom: 11px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--terra-deep);
  background: #f4f7fc;           /* hover 배경과 동일 — 메타행 위에 떠도 가독 */
  padding: 3px 8px;
  border-radius: 7px;
  box-shadow: -6px 0 8px 2px #f4f7fc;  /* 좌측 페이드로 텍스트 하드컷 방지 */
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 54px -30px rgba(16,29,53,.42);
  border-color: var(--terra);
  background: #f4f7fc;
}
.card:hover::before { width: 100%; }
.card:hover::after { opacity: 1; transform: translateX(0); }
.card-badge {
  display: flex;
  gap: 6px;
  padding: 15px 16px 0;
  flex-wrap: wrap;
}
.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--terra-deep);
}
.badge.type  { background: rgba(31,58,99,.08); color: var(--ink-2); }
.badge.level { background: var(--sand); color: var(--olive-deep); }
.card-body { padding: 12px 16px 16px; }
.card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s ease;
}
.card:hover .card-title { color: var(--terra-deep); }
.card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.card-price {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--terra-deep);
}

/* ── Pagination ─────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.pagination button {
  border: 1px solid var(--line);
  background: #fff;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  transition: all .15s;
}
.pagination button:hover, .pagination button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pagination button:disabled { opacity: .4; cursor: default; }

/* ── Empty State (index+admin 공유) ─────────────────────── */
.empty { text-align: center; padding: 80px 0; color: var(--muted); }
.empty .icon { font-size: 52px; margin-bottom: 16px; }
.empty p { font-size: 15px; }

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--cream);
  border-radius: 16px;
  width: 100%;
  max-width: 780px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 16px 60px rgba(18,20,24,.32);
  animation: slideUp .2s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header {
  position: sticky;
  top: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  z-index: 10;
}
.modal-header-info { flex: 1; }
.modal-header-info h2 { font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.modal-header-info .cats { font-size: 12px; color: var(--muted); margin-top: 4px; }
.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted-soft);
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 24px; }
.info-section { margin-bottom: 24px; }
.info-section h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--terra-deep);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--brand-tint-strong);
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.info-item label { font-size: 11px; color: #999; display: block; margin-bottom: 2px; }
.info-item span  { font-size: 13px; color: #222; font-weight: 500; }
.info-text { font-size: 13px; color: #444; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.sample-btn {
  display: inline-block;
  margin-top: 12px;
  background: var(--accent);
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  transition: background .2s;
}
.sample-btn:hover { background: var(--accent-deep); }

/* ── Admin ──────────────────────────────────────────────── */
.admin-hero {
  background: linear-gradient(135deg, #1a3a5c, #2563a8);
  color: #fff;
  padding: 32px 20px;
}
.admin-hero h1 { font-size: 22px; font-weight: 700; }
.admin-hero p  { font-size: 13px; opacity: .8; margin-top: 4px; }

/* 배경·구분선은 바깥 밴드가 전체 폭으로 깔고, 내용만 .wrap과 동일한
   max-width+padding으로 정렬한다(헤더/히어로/배너관리와 좌측 경계 통일). */
.admin-toolbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.admin-toolbar input[type=text] {
  border: 1px solid #d0d5e0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  outline: none;
  width: 240px;
}
.btn {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  transition: filter .15s;
}
.btn:hover { filter: brightness(.9); }
.btn-primary   { background: #2563a8; color: #fff; }
.btn-success   { background: #16a34a; color: #fff; }
.btn-danger    { background: #dc2626; color: #fff; }
.btn-warning   { background: #d97706; color: #fff; }
.btn-secondary { background: #e5e7eb; color: #333; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.admin-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.stat-card {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 10px;
  padding: 14px 20px;
  min-width: 140px;
}
.stat-card .num { font-size: 26px; font-weight: 700; color: #2563a8; }
.stat-card .lbl { font-size: 12px; color: #888; margin-top: 2px; }

/* ── Upload Box ─────────────────────────────────────────── */
.upload-box {
  border: 2px dashed #b0c4de;
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  background: #f0f6ff;
  margin: 16px 0;
  cursor: pointer;
  transition: border-color .2s;
}
.upload-box:hover { border-color: #2563a8; }
.upload-box p { font-size: 14px; color: #555; margin-top: 8px; }
.upload-box .icon { font-size: 36px; }

/* ── Table ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
th {
  background: #f0f4fa;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: #444;
  border-bottom: 2px solid #dde;
  position: sticky;
  top: 0;
}
td {
  padding: 9px 12px;
  border-bottom: 1px solid #eef;
  color: #333;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}
tr:hover td { background: #f5f8ff; }
.cb-col { width: 36px; text-align: center; }
input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; }

/* ── Form Modal ─────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12px; font-weight: 600; color: #555; }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1px solid #d0d5e0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: #2563a8; }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--cream);
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  z-index: 9999;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: #16a34a; }
.toast.error   { background: #dc2626; }

/* ── Progress ───────────────────────────────────────────── */
.progress-bar { height: 4px; background: #e0e7ff; border-radius: 2px; overflow: hidden; margin: 8px 0; }
.progress-fill { height: 100%; background: #2563a8; width: 0; transition: width .3s; border-radius: 2px; }

/* ── Recommend Cards ────────────────────────────────────── */
.recommend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.rec-card {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.rec-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(16,29,53,.34);
  background: #fff;
  border-color: var(--navy-700);
}
.rec-badges { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.rec-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s ease;
}
.rec-card:hover .rec-title { color: var(--terra-deep); }
.rec-meta  { font-size: 11px; color: var(--muted); }
.rec-price { font-size: 13px; font-weight: 700; color: var(--terra-deep); margin-top: 6px; }

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .admin-toolbar input[type=text] { width: 100%; }

  /* 모바일(폰) 강좌 카드 — B안: 흰 카드 1열 세로 리스트. 각 카드는 가로
     한 줄 [대분류 배지 1개 + 제목 1줄 말줄임 + 우측 화살표]. 마크업/JS
     무손상 — 나머지 배지·하단 메타는 display:none으로만 숨김(DOM 유지,
     데스크톱은 무변경). auto-fill 그리드·hover 5중강조는 데스크톱 전용. */
  .grid { display: flex; flex-direction: column; gap: 10px; }
  .card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .card::before { display: none; }             /* 상단 액센트바 무효화 */
  .card::after {                                /* 데스크톱 칩 → 우측 chevron */
    content: "\203A";
    position: static;
    margin-left: auto;
    right: auto;
    bottom: auto;
    flex: none;
    opacity: 1;
    transform: none;
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    color: var(--muted);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }
  .card-badge { flex: none; padding: 0; gap: 0; }
  .card-badge .badge { border-radius: 8px; padding: 5px 10px; }   /* cat1 배지만 노출 */
  .card-badge .badge.type,
  .card-badge .badge.level,
  .card-badge .badge.series-badge { display: none; }             /* 나머지 배지 숨김 */
  .card-body { flex: 1; min-width: 0; padding: 0; }
  .card-title {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: unset;
    margin: 0;
  }
  .card-meta { display: none; }                /* 폴더경로·시간/차시/기간 숨김 */

  /* 모바일(폰): 콜라주 3장 가로 한 줄 (데스크톱 c1 크게 레이아웃은 무변경) */
  .collage { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 8px; }
  .collage .c1, .collage .c2, .collage .c3 { grid-row: auto; aspect-ratio: 1 / 1; min-height: 0; }
  .ph .cap { font-size: 10px; left: 8px; right: 8px; bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ═══════════════════════════════════════════════════════════
   검색 모드 (body.search-mode) — index 전용, admin 무관
   ───────────────────────────────────────────────────────────
   "검색해도 화면이 안 변한다"는 불만 대응.
   ⚠ 설계 변경 이력 (중요) — 처음에는 검색 시 둘러보기 섹션(히어로·큐레이션·
   섹션헤더·카테고리바·필터바·시리즈배너·헤더)을 전부 접었다. 그 결과 결과
   패널 위에 아무것도 남지 않아 "위로 스크롤해도 원래 화면이 안 나온다"는
   버그 리포트가 나왔다(스크롤 자체는 정상, 위에 볼 것이 없던 것). 접기는
   사용자를 결과 화면에 가두는 설계 결함이었으므로 전면 제거했다.
   현재 방식: 아무것도 접지 않고 결과 영역으로 스크롤 이동만 한다.
   검색 피드백은 (1) 결과 패널 톤 분리 (2) 결과 헤더+건수 롤링 (3) 조건 칩
   (4) 스켈레톤→페이드인 (5) 검색어 하이라이트 로 충분히 전달한다.
   ⚠ 접힘 규칙을 다시 넣지 말 것.
   전부 신규 셀렉터로만 구성 — 기존 규칙을 덮어쓰지 않는다.
   색은 :root 딥네이비 팔레트 변수만 사용(새 색 도입 없음).
   ═══════════════════════════════════════════════════════════ */
:root {
  --sk-h: 60px;   /* .sk-bar-inner의 "지정" 높이 (데스크톱 1줄 기준) */
}

/* ── A. 슬림 스티키 검색바 ───────────────────────────────
   노출 조건은 "검색 여부"가 아니라 "히어로 검색창이 화면 밖으로 나갔는가"다
   (.is-visible을 index.html의 IntersectionObserver가 토글).
   검색 모드에 묶어두면 접기를 없앤 지금 위로 스크롤했을 때 히어로 검색창과
   스티키바가 동시에 보여 검색창이 두 개가 된다.
   본문에 padding-top을 주지 않는 이유: 바는 이미 스크롤로 지나간 영역 위에
   겹쳐 뜨는 오버레이라 자리를 비워둘 필요가 없고, 표시/숨김에 맞춰 padding을
   토글하면 본문이 튀면서 앵커가 움직여 표시 상태가 진동할 수 있다.
   바가 결과 상단을 가리는 문제는 .results-panel의 scroll-margin-top이 맡는다. */
.sk-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 130;                 /* header(100)·cat-panel(99)보다 위 */
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(16, 29, 53, .07);
  transform: translateY(-105%);
  opacity: 0;
  pointer-events: none;
  /* visibility까지 숨겨야 화면 밖 입력창이 탭 순서에 남지 않는다
     (max-height/opacity/transform만으로는 포커스 이동이 그대로 가능하고,
     focusable 자식을 가진 aria-hidden은 ARIA 위반이기도 하다).
     슬라이드 아웃이 끝난 뒤에 숨기려고 0s 지연을 건다. */
  visibility: hidden;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease,
              visibility 0s linear .4s;
}
.sk-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, visibility 0s;
}

.sk-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--sk-h);
  flex-wrap: nowrap;
}
.sk-logo {
  flex: none;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--ink);
  white-space: nowrap;
  transition: opacity .15s;
}
.sk-logo span { color: var(--terra-deep); }
.sk-logo:hover { opacity: .7; }

.sk-field {
  flex: 1 1 auto;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.sk-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.sk-field-icon { display: flex; flex: none; color: var(--muted-soft); }
.sk-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
}
.sk-field input::placeholder { color: var(--muted-soft); }

/* 데스크톱 1줄 배치에서 뷰포트가 좁아질수록(769~900px 구간) 고정폭 합계가
   가로 폭을 넘겨 바가 터진다 — select를 축소 가능하게 두고 하한만 정한다. */
.sk-filters { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.sk-filters select {
  height: 38px;
  flex: 0 1 auto;
  min-width: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  padding: 0 26px 0 10px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2351617d' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.sk-filters select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--brand-tint); }

.sk-go {
  flex: none;
  height: 38px;
  padding: 0 20px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s;
}
.sk-go:hover { background: var(--accent-deep); }
.sk-reset {
  flex: none;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.sk-reset:hover { border-color: var(--muted-soft); color: var(--ink); background: var(--surface-2); }

/* ── D. 전환 피드백 — 결과 패널 톤 분리 ───────────────────
   Linear식 "surface lift": 장식이 아니라 표면 단차와 헤어라인으로
   상태 변화를 알린다. 배경을 한 단 내리고 상단 inset 그림자로
   "여기부터 결과 영역"이라는 경계를 만든다. */
.results-panel {
  background: transparent;
  border-top: 1px solid transparent;
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
  scroll-margin-top: var(--sk-offset, var(--sk-h));
}
body.search-mode .results-panel {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  box-shadow: inset 0 12px 22px -14px rgba(16, 29, 53, .16);
  min-height: calc(100vh - var(--sk-offset, var(--sk-h)));
}

/* ── B/C. 결과 헤더 + 조건 칩 ─────────────────────────────── */
.result-head {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease .08s, margin .45s ease;
}
body.search-mode .result-head { max-height: 260px; opacity: 1; margin-bottom: 22px; }
.result-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.9px;
  color: var(--ink);
  margin-bottom: 14px;
}
.result-title .rt-q { color: var(--accent); margin-right: 5px; }
.result-title .rt-n { color: var(--accent); font-variant-numeric: tabular-nums; margin-left: 6px; }

.result-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 29, 53, .05);
  animation: chipIn .28s cubic-bezier(.34, 1.4, .64, 1) backwards;
}
.chip .chip-k { color: var(--muted); font-weight: 600; font-size: 11.5px; margin-right: -3px; }
.chip button {
  border: none;
  background: var(--surface-2);
  color: var(--muted);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background .13s, color .13s;
}
.chip button:hover { background: var(--accent); color: #fff; }
.chip-clear {
  border: 1px dashed var(--muted-soft);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color .15s, color .15s, background .15s;
}
.chip-clear:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
@keyframes chipIn { from { opacity: 0; transform: translateY(-5px) scale(.94); } to { opacity: 1; transform: none; } }

/* ── 검색어 하이라이트 ────────────────────────────────────
   골드는 절제된 서브 포인트로만 — 틴트 배경 + 본문 잉크 색 유지. */
.card-title mark {
  background: rgba(176, 134, 60, .22);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  font-weight: 800;
}

/* ── 스켈레톤 (응답 대기) ─────────────────────────────────
   .grid의 그리드 트랙을 그대로 쓰므로 실제 카드와 자리가 어긋나지 않는다. */
.sk-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 16px 16px;
  position: relative;
  overflow: hidden;
}
.sk-line { background: var(--surface-2); border-radius: 4px; height: 11px; margin-bottom: 9px; }
.sk-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: translateX(-100%);
  animation: skShimmer 1.1s infinite;
}
@keyframes skShimmer { to { transform: translateX(100%); } }

/* ── 결과 페이드인 ────────────────────────────────────────── */
.grid.fadein > * { animation: fadeUp .38s ease backwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* ── E. 빈 상태 ───────────────────────────────────────────
   기존 .empty(index+admin 공유)는 그대로 두고, 검색 결과 없음일 때만
   추가로 렌더되는 자식 요소들에만 스타일을 준다. */
.empty .empty-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  color: var(--muted-soft);
}
.empty h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--ink);
  margin-bottom: 8px;
}
.empty .empty-blk { margin-top: 24px; }
.empty .empty-lbl { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.empty .empty-sugg { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.empty .empty-sugg button {
  border: 1px solid var(--brand-tint-strong);
  background: #fff;
  color: var(--accent);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  transition: background .15s, color .15s, border-color .15s;
}
.empty .empty-sugg button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.empty .empty-sugg.pop button { border-color: var(--line); color: var(--muted); font-weight: 600; }
.empty .empty-sugg.pop button:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-2); }

/* ── 반응형 ───────────────────────────────────────────────
   데스크톱 1줄 배치를 모바일에 그대로 두면 넘치므로 2줄로 나눈다.
   1줄: 로고 + 검색어 + [검색] / 2줄: 분류 select 3개(가로 스크롤) + 초기화.
   DOM 순서는 그대로 두고 order + 100% 폭 더미(::after)로 줄을 끊는다. */
@media (max-width: 768px) {
  :root { --sk-h: 100px; }
  .sk-bar-inner { flex-wrap: wrap; height: auto; padding: 8px 14px; row-gap: 8px; column-gap: 8px; }
  .sk-logo { order: 1; font-size: 14px; }
  .sk-field { order: 2; min-width: 0; }
  .sk-go { order: 3; padding: 0 16px; }
  .sk-bar-inner::after { content: ''; flex: 0 0 100%; height: 0; order: 4; }
  .sk-filters {
    order: 5;
    /* basis를 auto로 두면 줄바꿈 판정이 select 3개의 콘텐츠 폭(약 330px)
       기준이라 [검색 초기화]가 혼자 다음 줄로 밀려 바가 3줄(390px에서 151px,
       화면의 18%)이 된다. basis 0이면 같은 줄에 남고 남는 폭만 차지하며,
       넘치는 select는 아래 overflow-x로 가로 스크롤된다. */
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .sk-filters::-webkit-scrollbar { display: none; }
  /* flex:1 0 auto — select 3개가 .sk-filters의 남는 폭을 나눠 늘어나 줄을 꽉
     채운다(가운데 빈 공간 제거 → [검색 초기화]가 마지막 select 바로 뒤에 붙음).
     shrink:0 + 위 overflow-x로, 폭이 모자란 좁은 폰(≈360px)에선 글자를 자르지
     않고 가로 스크롤로 넘긴다. min-width:92px는 base 규칙에서 상속. */
  .sk-filters select { flex: 1 0 auto; font-size: 12.5px; height: 36px; padding: 0 24px 0 9px; }
  .sk-reset { order: 6; height: 36px; padding: 0 12px; font-size: 12.5px; }
  .result-title { font-size: 21px; letter-spacing: -.6px; }
  body.search-mode .result-head { max-height: 320px; margin-bottom: 16px; }

  /* .content-section의 `padding: 28px 0 60px` 숏핸드가 .wrap의 좌우 20px를
     지워, 좁은 화면에서 자식이 뷰포트 가장자리에 붙는다. 카드는 자체
     padding 14px 덕에 글자가 안쪽에서 시작하지만 결과 헤더는 글자가 그대로
     화면 끝에 닿아 따옴표가 잘려 보인다. 카드 글자 시작선(14px)에 맞춘다.
     .wrap이나 .content-section의 padding을 건드리면 카드 그리드 폭까지
     같이 줄어 기존 모바일 레이아웃이 바뀌므로 헤더에만 준다. */
  .result-head { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 600px) {
  /* 모바일 .grid는 세로 flex 리스트라 스켈레톤 8장이면 화면 몇 배로
     길어진다 — 첫 화면에 들어오는 4장만 남긴다(JS 개수 변경 불필요). */
  .sk-card { padding: 14px; }
  .sk-card:nth-child(n+5) { display: none; }
}

@media (max-width: 430px) {
  /* 로고는 축약하지 않는다. "클래스"를 숨기면 "맑은"이라는 끊긴 단어가 남아
     브랜드가 오히려 손상된다. .sk-filters의 basis를 0으로 바꿔 바가 한 줄
     줄어든 뒤로는 전체 로고(59px)를 써도 360px에서 입력창 209px가 남고
     가로 넘침도 없다 — 360/390/412px 실측 확인. */
  .sk-field { flex-basis: 0; }
  .sk-go { padding: 0 13px; font-size: 13px; }
  .sk-field input { font-size: 13px; }
  .chip { font-size: 12.5px; padding: 5px 7px 5px 12px; }
}

/* 모션 최소화 선호 시 전환·셔머·페이드는 끄고 상태 변화만 즉시 반영.
   scrollToResults()의 smooth 스크롤도 index.html에서 auto로 낮춘다. */
@media (prefers-reduced-motion: reduce) {
  .sk-bar, .results-panel, .result-head { transition: none; }
  .chip, .grid.fadein > *, .sk-card::after { animation: none; }
}

/* ── 로그인 화면 ─────────────────────────────────────────
   기존 :root 변수를 참조만 한다(수정 금지 — 사용자 페이지와 공유). */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px 32px 28px;
  box-shadow: 0 2px 12px rgba(22, 41, 77, .06);
}
.login-logo { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 24px; text-align: center; }
.login-logo span { color: var(--terra-deep); }
.login-form { display: flex; flex-direction: column; }
.login-label { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.login-input {
  border: 1px solid #d0d5e0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 16px;
  outline: none;
}
.login-input:focus { border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(31, 58, 99, .12); }
.login-error {
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .3);
  color: #b91c1c;
  font-size: 13px;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.login-submit {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
}
.login-submit:hover { background: var(--ink-2); }
.login-back { display: block; text-align: center; margin-top: 18px; font-size: 12px; color: var(--muted); }

/* 관리자 헤더 로그아웃 버튼 */
.logout-btn {
  margin-left: 20px;
  padding: 6px 12px;
  border: none;
  border-left: 1px solid var(--line);
  border-radius: 0 6px 6px 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-family: inherit;
}
.logout-btn:hover { color: var(--terra-deep); }