:root {
  color-scheme: light;
  --bg: #fcfcfc;
  --panel: #ffffff;
  --panel-2: #f2f2f2;
  --border: #e6e6e6;
  --text: #1a1a1a;
  --muted: #515151;
  --faint: #999999;
  --placeholder: #bcbcbc;
  --accent: #ee2035;
  --accent-soft: rgba(238, 32, 53, 0.07);
  --blue: #0a33fe;
  --blue-soft: #e7ebff;
  --focus: #0a33fe;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

/* ---------- 상단 바 (항상 고정) ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  z-index: 30;
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
/* 인라인 SVG라 래스터 손상/뭉개짐 걱정이 없다 — width/height는 SVG 자체의 viewBox(120x24)와
   맞춰뒀고, flex:0 0 auto로 flex 컨테이너가 크기에 손대지 않게 고정만 해둔다. */
.brand-logo { width: 120px; height: 24px; flex: 0 0 auto; display: block; }
.brand-label { font-size: 16px; font-weight: 800; color: var(--text); }

.topbar-search {
  flex: 1;
  min-width: 0;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--placeholder);
}
.topbar-search svg { flex: none; }
.site-search {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
}
.site-search::placeholder { color: var(--placeholder); }

.hamburger {
  display: none;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  width: 34px; height: 34px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
}

.update-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 13px;
  text-decoration: none;
  flex: none;
  margin-left: auto;
}
.update-pill .bell { color: var(--accent); }
.update-pill b { color: var(--text); font-weight: 700; }

/* ---------- 셸: 사이드바 + 본문 ---------- */
.shell { position: relative; min-height: 100vh; }

.sidebar {
  position: fixed;
  top: 60px; bottom: 0; left: 0;
  width: 240px;
  border-right: 1px solid var(--border);
  background: var(--panel);
  padding: 18px 15px;
  overflow-y: auto;
  transition: left 200ms ease;
  z-index: 25;
}

/* 데스크톱에서는 탑바 검색창으로 충분해 기본적으로 숨겨두고, 모바일 미디어쿼리에서만
   보이게 한다(사이드바가 열려 있을 때만 검색이 의미 있도록). */
.sidebar-search-wrap {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  margin-bottom: 14px;
  color: var(--placeholder);
}
.sidebar-search-wrap svg { flex: none; }
.sidebar-search-wrap .site-search { flex: 1; min-width: 0; }

.side-group h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
  margin: 18px 0 6px;
}
.side-group:first-of-type h3 { margin-top: 0; }
.side-group ul { list-style: none; margin: 0; padding: 0; }
.side-link {
  display: block;
  padding: 6px 9px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
}
.side-link:hover { background: var(--panel-2); }
.side-link.active { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.side-link-sub { padding-left: 20px; font-size: 12.5px; }

.sidebar-backdrop { display: none; }

.main {
  margin-left: 240px;
  margin-top: 60px;
  padding: 30px 40px 60px;
}

/* ---------- 모바일: 사이드바 → 슬라이드 드로어 ---------- */
@media (max-width: 760px) {
  .hamburger { display: flex; }
  /* 모바일에서는 사이드바가 평소 화면 밖에 숨어있다가(off-canvas) 햄버거로 열어야만 보이는
     서랍 형태다 — 탑바에 검색창을 두면 사이드바가 닫힌 상태에서도 입력이 가능해서, 쳐도
     아무 반응이 없는 것처럼 보이는 문제가 있었다. 검색은 "사이드바 링크를 걸러내는" 기능이니
     사이드바가 열려 있을 때만 의미가 있게, 검색창 자체를 사이드바 안으로 옮긴다(탑바 쪽은
     숨김). 두 군데 다 클래스가 site-search라 필터링 JS는 그대로 재사용된다. */
  .topbar-search { display: none; }
  /* 로고+"최근 업데이트" 배지가 좁은 화면에서 서로 자리를 다투다 배지가 잘려 나가던 문제 —
     로고와 배지를 함께 살짝 줄여서 배지 텍스트(날짜)가 잘리지 않고 다 보이게 한다. */
  .topbar { gap: 10px; padding: 0 14px; }
  .brand { gap: 6px; }
  .brand-logo { width: 90px; height: 18px; }
  .brand-label { font-size: 13px; }
  .update-pill { font-size: 11px; padding: 5px 9px; gap: 4px; }
  .sidebar-search-wrap { display: flex; }
  .sidebar { left: -260px; box-shadow: 10px 0 30px rgba(0,0,0,.25); top: 60px; }
  body.nav-open .sidebar { left: 0; }
  body.nav-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 60px 0 0 0;
    background: rgba(0,0,0,.4);
    z-index: 20;
  }
  .main { margin-left: 0; padding: 20px 18px 48px; }
  .card-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .card-thumb img { height: 140px !important; }
  .update-pill .txt { display: none; }
  .page-with-toc { grid-template-columns: 1fr !important; }
  /* 모바일에서는 화면 내 서브 섹션 목차(우측 TOC)를 아예 보여주지 않는다 — 예전엔 맨 아래로
     밀려 내려가 표시됐는데, 좁은 화면에서는 잘 안 쓰이고 자리만 차지해서 숨긴다. */
  .page-toc { display: none !important; }
}

/* ---------- 콘텐츠 ---------- */
.crumb { font-size: 12px; color: var(--faint); margin-bottom: 8px; }
.crumb .crumb-sep { margin: 0 4px; color: var(--placeholder); }

.page-title { margin: 0 0 18px; font-size: 26px; font-weight: 700; scroll-margin-top: 80px; }

.section-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
}

.update-banner {
  margin-bottom: 26px;
  scroll-margin-top: 80px;
}
.update-banner-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.update-banner-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.update-banner-meta { font-size: 13px; color: var(--muted); }

.update-month-group { margin-top: 14px; }
.update-month-group:first-of-type { margin-top: 0; }
.update-month-label { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }

.update-date-group { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px; }
.update-date-group:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.update-date-group summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.update-date-group summary::-webkit-details-marker { display: none; }
.update-date-group summary::before { content: "▸"; display: inline-block; transition: transform 120ms ease; color: var(--faint); }
.update-date-group[open] summary::before { transform: rotate(90deg); }
.update-date-count {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

.update-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 0 4px 18px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.update-row::before { content: "•"; color: var(--blue); }
.update-row:hover { color: var(--text); text-decoration: underline; }

.card-grid {
  display: grid;
  /* 썸네일이 가로로 긴 화면 캡처라, 카드 폭도 그만큼 넓게 잡아야 가로 비율로 보인다 —
     폭은 좁게 두고 높이만 키우면(전 버전의 실수) 세로로 긴 카드가 돼버린다. */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}

.card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  background: var(--panel);
}
/* 썸네일은 카드 안쪽에 회색 여백(패딩)을 두고, 그 안에서 이미지는 위쪽부터 꽉 채워 보여준다
   (아래쪽이 잘리더라도 항상 화면 상단이 드러나게). PC에서는 예전(130px)의 약 2배 높이로. */
.card-thumb { padding: 12px; background: var(--panel-2); }
.card-thumb img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top;
  border-radius: 6px;
  display: block;
}
.card-body { padding: 12px 14px; }
.card-body strong { display: block; margin-bottom: 4px; font-size: 13.5px; }
.card-body p {
  margin: 0; font-size: 12px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 화면 페이지 본문: 이미지 카드 → 요약 → 번호 스텝, 1단 세로 배치 ---------- */
.screen-body { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }

.shot-frame {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-2);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.manual-image {
  display: block;
  width: 100%;
  max-width: 900px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  cursor: zoom-in;
}

/* 요약/설명 본문은 리치 텍스트 에디터가 만든 <p> 태그를 그대로 담고 있어, 중첩된 문단의
   기본 여백을 이 컨테이너 안에서 다시 정리한다. */
.summary-text { color: var(--muted); font-size: 14px; margin: 0; }
.summary-text p { margin: 0 0 6px; }
.summary-text p:last-child { margin-bottom: 0; }

.step-list { display: flex; flex-direction: column; gap: 16px; }
.step-item { display: flex; gap: 12px; }
.step-num {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-item h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.step-desc { color: var(--muted); font-size: 14px; }
.step-desc p { margin: 0 0 4px; }
.step-desc p:last-child { margin-bottom: 0; }

/* ---------- 서브 화면이 있는 페이지의 우측 목차(TOC) ---------- */
.page-with-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 40px;
  align-items: start;
}
.page-toc {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--border);
  padding-left: 16px;
}
.toc-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0 4px 16px;
  margin-left: -17px;
  border-left: 2px solid transparent;
}
.toc-link:hover { color: var(--text); }
.toc-link.active { color: var(--blue); border-left-color: var(--blue); font-weight: 600; }

/* 리치 텍스트 에디터의 배경색(하이라이트) 서식 */
.page-title mark, .summary-text mark, .step-item mark, .sub-title mark, .callout-notice mark { padding: 0 2px; border-radius: 3px; }

/* 리치 텍스트 에디터에서 건 링크 — 관리자 화면(.rte-content a)과 같은 색으로 맞춘다. */
.page-title a, .summary-text a, .step-item a, .sub-title a, .callout-notice a {
  color: var(--focus);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 서브 화면 — 메인 페이지 안에 이어지는 앵커 섹션 */
.sub-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 80px;
}
.sub-title { margin: 0 0 18px; font-size: 19px; }

/* 관리자가 직접 입력하는 강조 안내 박스 — 색상 계열은 편집 화면에서 고른다. */
.callout-notice {
  border-radius: 10px;
  padding: 12px 16px;
}
.callout-notice p { margin: 0 0 6px; }
.callout-notice p:last-child { margin-bottom: 0; }

.callout-notice-pink { background: #fce7f3; }
.callout-notice-yellow { background: #fef9c3; }
.callout-notice-blue { background: #dbeafe; }
.callout-notice-purple { background: #ede9fe; }
.callout-notice-green { background: #dcfce7; }

/* ---------- 이미지 확대/축소 라이트박스 ---------- */
.img-lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  overflow: hidden;
}
.img-lightbox-backdrop.open { display: flex; }
.img-lightbox-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.img-lightbox-image {
  max-width: 92vw;
  max-height: 92vh;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}
.img-lightbox-close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 101;
}
.img-lightbox-zoom {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 101;
}
.img-lightbox-zoom button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
body.lightbox-open { overflow: hidden; }