/* ============================================================================
   전역 검색 결과 페이지 — C안(포털형) 프로덕션 CSS
   ----------------------------------------------------------------------------
   · 출처: design_handoff_search/search-redesign.css (HANDOFF.md §5)
   · 모든 규칙은 .os-search 스코프 + 토큰 프리픽스 --os-* 로 격리 → 테마 전역
     토큰(라이브 Warm Canvas v1.0)과 충돌하지 않음.
   · 목업 대비 배포 조정: CDN @import 제거(폰트는 테마 셀프호스팅 Pretendard 상속),
     전역(*·html·body) 리셋 → .os-search 스코프 리셋, 목업 전용 GNB 블록 제거,
     sticky 오프셋은 사이트 헤더(.oppadu-nav, 60px 고정)에 맞춤.
   ============================================================================ */

/* ── 스코프 토큰 (출처: 00_IA_master §9.2~9.4 · DS v2.1 Deep Jade) ── */
.os-search {
  --os-primary-50:  #EEF9F6;
  --os-primary-100: #D2F1E7;
  --os-primary-500: #059669;
  --os-primary-600: #047E57;
  --os-primary-700: #036546;
  --os-amber-50:  #FAF2E1;
  --os-amber-500: #C5870F;
  --os-amber-700: #95650A;
  --os-gray-50:  #F7F7F5;
  --os-gray-100: #F0F0ED;
  --os-gray-200: #E6E6E2;
  --os-gray-300: #D4D4CF;
  --os-gray-400: #B6B6B0;
  --os-gray-500: #8A8A85;
  --os-gray-700: #45453F;
  --os-gray-900: #1B1B18;
  --os-error: #D14343;
  --os-hairline: 1px solid var(--os-gray-200);
  --os-radius-sm: 2px;
  --os-radius-md: 6px;
  --os-radius-lg: 8px;
  --os-radius-xl: 12px;
  --os-radius-pill: 9999px;
  --os-shadow-md: 0 1px 3px rgba(17,17,16,.05), 0 6px 20px rgba(17,17,16,.06);
  --os-shadow-lg: 0 2px 8px rgba(17,17,16,.06), 0 18px 44px rgba(17,17,16,.09);
  --os-ring: 0 0 0 3px rgba(5,150,105,.18);
  --os-font-kr: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --os-font-en: "Pretendard Variable", Pretendard, "Inter", system-ui, sans-serif;
  --os-font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --os-tr: .15s ease;
  --os-sticky-top: 60px; /* 사이트 헤더 .oppadu-nav 높이 */
}

/* ── 스코프 리셋 (목업의 전역 리셋을 래퍼 하위로 격리) ── */
body.search { background: #fff; }
.os-search, .os-search * { margin: 0; padding: 0; box-sizing: border-box; }
.os-search {
  background: #fff; color: var(--os-gray-700);
  font-family: var(--os-font-kr); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.os-search a { text-decoration: none; color: inherit; }
.os-search a:hover { text-decoration: none; }
.os-search button { font-family: inherit; cursor: pointer; }
.os-search img { display: block; }
.os-search h2, .os-search h3 { margin: 0; }

/* ── 히어로 검색바 — 메인 홈(.mv3-search) 필드 디자인 채용: 흰 알약형 + 그림자 + 잉크 '검색' 버튼 ── */
.os-hero { max-width: 720px; margin: 0 auto; padding: 40px 24px 0; }
.os-hero-form { position: relative; }
.os-hero-box {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 24px;
  background: #fff;
  border: none; border-radius: var(--os-radius-pill);
  box-shadow: var(--os-shadow-md);
  transition: box-shadow var(--os-tr);
}
.os-hero-form.is-open .os-hero-box,
.os-hero-box:focus-within { box-shadow: var(--os-shadow-lg); }
.os-hero-box svg { flex: none; color: var(--os-gray-500); }
.os-hero-input { flex: 1; min-width: 0; border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; font: inherit; font-size: 16px; font-weight: 500; color: var(--os-gray-900); height: auto; padding: 0; margin: 0; }
.os-hero-input::placeholder { color: var(--os-gray-500); font-weight: 400; }
.os-hero-input::-webkit-search-cancel-button { display: none; }
.os-hero-clear { display: none; border: none; background: transparent; color: var(--os-gray-400); width: 28px; height: 28px; border-radius: var(--os-radius-pill); align-items: center; justify-content: center; flex: none; }
.os-hero-clear:hover { color: var(--os-gray-700); background: var(--os-gray-100); }
.os-hero-form.has-value .os-hero-clear { display: inline-flex; }
.os-hero-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; border-radius: var(--os-radius-pill); height: 46px; padding: 0 26px;
  background: var(--os-gray-900); color: #fff; font-family: inherit;
  font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color var(--os-tr);
}
.os-hero-btn:hover { background: #000; color: #fff; }
.os-hero-btn:focus { outline: none; }
.os-hero-btn:focus-visible { outline: 2px solid var(--os-gray-300); outline-offset: 2px; }
.os-hero-info { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--os-gray-500); }
.os-hero-info strong { color: var(--os-gray-900); }

/* ── 자동완성 ── */
.os-ac {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: #fff; border-radius: var(--os-radius-xl);
  box-shadow: var(--os-shadow-lg); border: var(--os-hairline);
  padding: 8px 0 6px; display: none; overflow: hidden;
}
.os-hero-form.is-open .os-ac { display: block; }
.os-ac:empty { display: none !important; }
.os-ac-group { padding: 4px 0 8px; }
.os-ac-group + .os-ac-group { border-top: var(--os-hairline); padding-top: 10px; }
.os-ac-label { display: flex; align-items: center; justify-content: space-between; padding: 2px 18px 6px; font-family: var(--os-font-en); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--os-gray-500); }
.os-ac-label button { border: none; background: none; font-family: var(--os-font-kr); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--os-gray-500); }
.os-ac-label button:hover { color: var(--os-gray-700); }
.os-ac-row { display: flex; align-items: center; gap: 11px; padding: 8px 18px; font-size: 14px; color: var(--os-gray-700); cursor: pointer; transition: background var(--os-tr); }
.os-ac-row:hover, .os-ac-row.is-sel { background: var(--os-gray-50); }
.os-ac-row svg { flex: none; color: var(--os-gray-400); }
.os-ac-row b { font-weight: 700; color: var(--os-gray-900); }
.os-ac-row .os-ac-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-ac-kind { flex: none; font-size: 10.5px; font-weight: 600; color: var(--os-gray-500); background: var(--os-gray-100); padding: 3px 7px; border-radius: var(--os-radius-sm); font-family: var(--os-font-en); letter-spacing: .04em; }
.os-ac-kind--fn { font-family: var(--os-font-mono); background: var(--os-primary-50); color: var(--os-primary-700); text-transform: none; letter-spacing: 0; }
.os-ac-del { border: none; background: none; color: var(--os-gray-400); width: 24px; height: 24px; border-radius: var(--os-radius-pill); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.os-ac-del:hover { color: var(--os-gray-700); background: var(--os-gray-100); }
.os-ac-rank { flex: none; width: 16px; font-family: var(--os-font-en); font-size: 12.5px; font-weight: 700; color: var(--os-gray-900); text-align: center; }
.os-ac-rank.is-top { color: var(--os-primary-600); }
.os-ac-delta { flex: none; font-size: 10.5px; font-weight: 600; }
.os-ac-delta.up { color: var(--os-primary-600); }
.os-ac-delta.dn { color: var(--os-gray-400); }
.os-ac-delta.nw { color: var(--os-amber-700); }
.os-ac[data-mode="idle"] .os-ac-when-typed { display: none; }
.os-ac[data-mode="typed"] .os-ac-when-idle { display: none; }

/* ── 탭 (풀폭 언더라인 바) ── */
.os-tabsbar { border-bottom: var(--os-hairline); margin-top: 28px; position: sticky; top: var(--os-sticky-top); z-index: 40; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.os-tabs { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.os-tabs::-webkit-scrollbar { display: none; }
.os-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none;
  padding: 12px 14px; position: relative;
  font-size: 14.5px; font-weight: 600; color: var(--os-gray-500);
  transition: color var(--os-tr);
}
.os-tab:hover { color: var(--os-gray-900); }
.os-tab.is-active { color: var(--os-gray-900); }
.os-tab.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px; border-radius: 2px 2px 0 0; background: var(--os-primary-500); }
.os-tab .os-tab-n { font-family: var(--os-font-en); font-size: 12px; font-weight: 600; color: var(--os-gray-400); }
.os-tab.is-active .os-tab-n { color: var(--os-primary-600); }

/* ── 레이아웃 ── */
.os-wrap { max-width: 1160px; margin: 0 auto; padding: 28px 24px 96px; display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 40px; align-items: start; }
.os-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ── 위젯 (포털형 시그니처 — 헤어라인 모듈 박스) ── */
.os-widget { border: var(--os-hairline); border-radius: var(--os-radius-xl); padding: 22px; transition: border-color var(--os-tr); }
.os-widget-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 16px; }
.os-eyebrow { font-family: var(--os-font-en); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--os-primary-600); }
.os-eyebrow--muted { color: var(--os-gray-500); }
.os-widget-title { font-size: 16.5px; font-weight: 700; letter-spacing: -0.012em; color: var(--os-gray-900); }
.os-widget-count { font-family: var(--os-font-en); font-size: 12.5px; font-weight: 600; color: var(--os-gray-400); }
.os-widget-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: none; background: none; font-size: 12.5px; font-weight: 600; color: var(--os-gray-500); padding: 4px 6px; border-radius: var(--os-radius-md); transition: color var(--os-tr), background var(--os-tr); }
.os-widget-more:hover { color: var(--os-primary-700); background: var(--os-primary-50); }

/* ── 정답 카드 (함수 사전 인스턴트 앤서) ── */
.os-answer { border: var(--os-hairline); border-radius: var(--os-radius-xl); overflow: hidden; }
.os-answer-head { display: flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--os-gray-50); border-bottom: var(--os-hairline); }
.os-answer-fx { width: 26px; height: 26px; border-radius: var(--os-radius-md); background: var(--os-gray-900); color: #6EE7B7; font-family: var(--os-font-mono); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.os-answer-kicker { font-size: 12.5px; font-weight: 600; color: var(--os-gray-500); }
.os-answer-body { padding: 20px 22px 22px; }
.os-answer-code { font-family: var(--os-font-mono); font-size: 17px; font-weight: 600; color: var(--os-gray-900); letter-spacing: -0.01em; }
.os-answer-code .os-fn-name { color: var(--os-primary-600); }
.os-answer-desc { margin-top: 8px; font-size: 13.5px; color: var(--os-gray-700); line-height: 1.65; }
.os-answer-desc b, .os-answer-desc strong { font-weight: 700; color: var(--os-gray-900); }
.os-answer-args { margin-top: 14px; border-top: var(--os-hairline); }
.os-answer-arg { display: flex; gap: 14px; padding: 9px 0; border-bottom: var(--os-hairline); font-size: 13px; }
.os-answer-arg code { font-family: var(--os-font-mono); font-size: 12px; background: var(--os-gray-100); padding: 2px 7px; border-radius: var(--os-radius-sm); color: var(--os-gray-900); align-self: flex-start; white-space: nowrap; }
.os-answer-arg span { color: var(--os-gray-500); }
.os-answer-foot { margin-top: 14px; display: flex; align-items: center; gap: 14px; }
.os-answer-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--os-primary-600); }
.os-answer-link:hover { color: var(--os-primary-700); }
.os-answer-link--muted { color: var(--os-gray-500); }

/* ── 강의 카드 그리드 ── */
.os-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.os-card { border: var(--os-hairline); border-radius: var(--os-radius-lg); overflow: hidden; transition: border-color var(--os-tr), box-shadow var(--os-tr), transform var(--os-tr); }
.os-card:hover { border-color: var(--os-gray-300); box-shadow: var(--os-shadow-md); transform: translateY(-2px); }
.os-card-thumb { position: relative; aspect-ratio: 16/9; background: var(--os-gray-100); color: var(--os-gray-300); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.os-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.os-card-type { position: absolute; right: 7px; bottom: 7px; background: rgba(27,27,24,.82); color: #fff; font-family: var(--os-font-en); font-size: 10px; font-weight: 600; letter-spacing: .06em; padding: 2.5px 6px; border-radius: var(--os-radius-sm); }
.os-card-body { padding: 13px 14px 15px; }
.os-card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.008em; line-height: 1.5; color: var(--os-gray-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.os-card-meta { margin-top: 7px; font-size: 12px; color: var(--os-gray-500); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.os-card-meta .os-dotsep { width: 3px; height: 3px; border-radius: var(--os-radius-pill); background: var(--os-gray-300); }
.os-card-badges { margin-top: 9px; display: flex; gap: 5px; }

/* 배지 (샤프 S4) */
.os-badge { display: inline-flex; align-items: center; padding: 2.5px 7px; border-radius: var(--os-radius-sm); font-family: var(--os-font-en); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.os-badge--free { background: var(--os-primary-50); color: var(--os-primary-700); }
.os-badge--live { background: var(--os-amber-50); color: var(--os-amber-700); }
.os-badge--neutral { background: var(--os-gray-100); color: var(--os-gray-700); }
.os-badge--done { background: var(--os-primary-50); color: var(--os-primary-700); }

/* ── 커뮤니티 리스트 (위젯 내부 행) — 제목줄 + 본문 1줄 ── */
.os-post { display: flex; align-items: flex-start; gap: 14px; padding: 13px 2px; border-bottom: var(--os-hairline); transition: background var(--os-tr); }
.os-post:last-child { border-bottom: none; padding-bottom: 2px; }
.os-post:hover { background: var(--os-gray-50); }
.os-post-main { flex: 1; min-width: 0; }
.os-post-line { display: flex; align-items: center; gap: 9px; min-width: 0; }
.os-post-head { flex: none; font-size: 12px; font-weight: 700; color: var(--os-primary-600); }
.os-post-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--os-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-post-title b { font-weight: 700; }
.os-post-body { margin-top: 4px; font-size: 12.5px; color: var(--os-gray-500); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-post-body b { font-weight: 800; color: var(--os-primary-600); }
.os-post-side { flex: none; display: flex; align-items: center; gap: 12px; padding-top: 1px; }
.os-post-time { flex: none; min-width: 54px; text-align: right; padding-right: 6px; font-size: 12px; color: var(--os-gray-500); }
.os-post-cmt { flex: none; display: inline-flex; align-items: center; gap: 4px; font-family: var(--os-font-en); font-size: 12px; font-weight: 600; color: var(--os-gray-500); min-width: 34px; justify-content: flex-end; }
.os-post-cmt svg { color: var(--os-gray-400); }
.os-post-cmt.is-hot { color: var(--os-primary-600); }
.os-post-cmt.is-hot svg { color: var(--os-primary-500); }

/* ── 무한 스크롤 로딩 인디케이터 ── */
.os-infinite { display: flex; justify-content: center; padding: 22px 0 4px; }
.os-infinite[hidden] { display: none; }
.os-infinite-spin {
  width: 22px; height: 22px; border-radius: var(--os-radius-pill);
  border: 2.5px solid var(--os-gray-200); border-top-color: var(--os-primary-500);
  animation: osSpin .7s linear infinite;
}
@keyframes osSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .os-infinite-spin { animation: none; } }

/* ── 블로그·위키 행 (타입 아이콘) ── */
.os-doc { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; border-bottom: var(--os-hairline); transition: background var(--os-tr); }
.os-doc:last-child { border-bottom: none; padding-bottom: 2px; }
.os-doc:hover { background: var(--os-gray-50); }
.os-doc-ic { flex: none; width: 34px; height: 34px; border-radius: var(--os-radius-md); background: var(--os-gray-100); color: var(--os-gray-500); display: flex; align-items: center; justify-content: center; }
.os-doc-ic--fn { background: var(--os-gray-900); color: #6EE7B7; font-family: var(--os-font-mono); font-size: 11.5px; font-weight: 600; }
.os-doc-thumb { flex: none; width: 64px; height: 44px; border-radius: var(--os-radius-md); overflow: hidden; background: var(--os-gray-100); }
.os-doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.os-doc-main { flex: 1; min-width: 0; }
.os-doc-title { font-size: 14px; font-weight: 600; color: var(--os-gray-900); line-height: 1.5; }
.os-doc-title code { font-family: var(--os-font-mono); font-size: 12px; background: var(--os-gray-100); color: var(--os-gray-900); padding: 2px 6px; border-radius: var(--os-radius-sm); }
.os-doc-desc { margin-top: 2px; font-size: 12.5px; color: var(--os-gray-500); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.os-doc-desc b { color: var(--os-gray-700); font-weight: 700; }
.os-doc-kind { flex: none; align-self: center; }

/* ── CSE (실제 임베드 — 외부 스크립트, 높이 가변) ──
   Google 위젯 기본 스타일(큰 폰트·파란 링크)을 os-doc/os-card 결과와 동일 톤으로 재정의.
   위젯이 인라인/고특이성 스타일을 넣어 색·크기는 !important 로 강제. */
.os-cse { min-height: 240px; }
.os-cse .gsc-wrapper { max-width: 100% !important; }
.os-cse .gsc-above-wrapper-area,
.os-cse .gcsc-more-maybe-branding-root,
.os-cse .gcsc-branding { display: none !important; }
.os-cse .gsc-control-cse {
  padding: 0; border: none;
  font-family: var(--os-font-kr) !important; font-size: 13px !important;
  color: var(--os-gray-700) !important;
}
/* 결과 블록 간격 */
.os-cse .gsc-webResult.gsc-result { padding: 12px 2px !important; border: none !important; border-bottom: var(--os-hairline) !important; margin: 0 !important; }
.os-cse .gsc-webResult.gsc-result:hover { background: var(--os-gray-50) !important; }
.os-cse .gsc-table-result { font-family: var(--os-font-kr) !important; }
/* 제목 링크 — os-doc-title 톤(15px). 검은색 본문 + 검색어(b)만 제이드 강조 */
.os-cse a.gs-title,
.os-cse .gs-title,
.os-cse .gsc-thumbnail-inside .gs-title,
.os-cse .gsc-table-cell-thumbnail + .gsc-table-cell-snippet-closed .gs-title {
  font-size: 15px !important; line-height: 1.5 !important; height: auto !important;
  color: var(--os-gray-900) !important; font-weight: 600 !important; text-decoration: none !important;
}
.os-cse a.gs-title:hover, .os-cse a.gs-title { color: var(--os-gray-900) !important; }
.os-cse a.gs-title *, .os-cse .gs-title { color: inherit !important; font-size: inherit !important; }
.os-cse a.gs-title:visited { color: var(--os-gray-900) !important; }
/* 검색 매칭 단어만 제이드 강조 */
.os-cse a.gs-title b, .os-cse .gs-title b { color: var(--os-primary-600) !important; }
/* 표시 URL — 회색 메타 */
.os-cse .gsc-url-top,
.os-cse .gs-visibleUrl,
.os-cse .gs-visibleUrl-long,
.os-cse .gs-visibleUrl-short,
.os-cse .gsc-url-bottom {
  font-size: 12.5px !important; color: var(--os-gray-500) !important; line-height: 1.5 !important;
}
/* 스니펫 — os-doc-desc 톤 */
.os-cse .gs-snippet,
.os-cse .gsc-table-cell-snippet-closed .gs-snippet {
  font-size: 13px !important; line-height: 1.6 !important; color: var(--os-gray-700) !important;
}
.os-cse .gs-snippet b { color: var(--os-primary-600) !important; font-weight: 700 !important; }
/* 본문 내 일반 링크·더보기 */
.os-cse .gs-fileFormat, .os-cse .gsc-result-info { font-size: 12px !important; color: var(--os-gray-500) !important; }
.os-cse a { color: var(--os-primary-600) !important; }
.os-cse a:hover { color: var(--os-primary-700) !important; }
/* 페이지 커서(번호) */
.os-cse .gsc-cursor-box { margin: 16px 0 4px !important; }
.os-cse .gsc-cursor-page {
  font-size: 13px !important; color: var(--os-gray-700) !important;
  font-family: var(--os-font-en) !important; padding: 4px 9px !important;
}
.os-cse .gsc-cursor-current-page { color: var(--os-primary-600) !important; font-weight: 700 !important; }
/* 썸네일 크기 축소 */
.os-cse .gs-image, .os-cse .gsc-table-cell-thumbnail img { max-width: 96px !important; max-height: 72px !important; border-radius: var(--os-radius-sm); }

/* ── 사이드바 ── */
.os-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--os-sticky-top) + 62px); }
.os-side-card { border: var(--os-hairline); border-radius: var(--os-radius-xl); padding: 20px; }
.os-side-title { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--os-gray-900); letter-spacing: -0.012em; margin-bottom: 14px; }
.os-side-title svg { color: var(--os-gray-500); }
.os-side-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
/* 공용 pill(제로결과 연관어 등) */
.os-reltag {
  font-size: 12.5px; font-weight: 500; color: var(--os-gray-700);
  background: var(--os-gray-100); border: none; border-radius: var(--os-radius-pill);
  padding: 6px 12px; transition: background var(--os-tr), color var(--os-tr);
  display: inline-flex; align-items: center;
}
.os-reltag:hover { background: var(--os-primary-50); color: var(--os-primary-700); }

/* 사이드바 연관 검색어 — 가로 wrap 유지 + 배경 제거한 모던 아웃라인 칩 */
.os-side-tags .os-reltag {
  background: none;
  border: 1px solid var(--os-gray-200);
  color: var(--os-gray-700);
  padding: 5px 12px;
  transition: border-color var(--os-tr), color var(--os-tr), background var(--os-tr);
}
.os-side-tags .os-reltag:hover { background: none; border-color: var(--os-primary-500); color: var(--os-primary-700); }
.os-ad { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ── 제로 결과 ── */
.os-zero-head { padding: 16px 0 4px; text-align: center; }
.os-zero-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--os-gray-900); line-height: 1.5; }
.os-zero-title strong { color: var(--os-primary-600); }
.os-zero-sub { margin-top: 6px; font-size: 13.5px; color: var(--os-gray-500); }
.os-zero-rel { margin-top: 16px; display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.os-zero-cta { border: var(--os-hairline); border-radius: var(--os-radius-xl); padding: 24px; display: flex; align-items: center; gap: 18px; justify-content: space-between; flex-wrap: wrap; }
.os-zero-cta-title { font-size: 15px; font-weight: 700; color: var(--os-gray-900); letter-spacing: -0.012em; }
.os-zero-cta-sub { margin-top: 3px; font-size: 13px; color: var(--os-gray-500); }
.os-btn-primary {
  display: inline-flex; align-items: center; gap: 8px; border: none;
  height: 42px; padding: 0 20px; border-radius: var(--os-radius-md);
  background: var(--os-primary-500); color: #fff !important; font-size: 14px; font-weight: 600;
  transition: background var(--os-tr), transform var(--os-tr);
}
.os-btn-primary:hover { background: var(--os-primary-700); color: #fff; }
.os-btn-primary:active { transform: translateY(1px); }

/* ── 스켈레톤 ── */
.os-skel-bar { display: block; height: 12px; border-radius: 4px; background: var(--os-gray-100); position: relative; overflow: hidden; }
.os-skel-bar::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: osShimmer 1.4s infinite; }
@keyframes osShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .os-skel-bar::after { animation: none; } }
.os-skel-thumb { aspect-ratio: 16/9; border-radius: var(--os-radius-lg) var(--os-radius-lg) 0 0; background: var(--os-gray-100); position: relative; overflow: hidden; }
.os-skel-thumb::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: osShimmer 1.4s infinite; }
@media (prefers-reduced-motion: reduce) { .os-skel-thumb::after { animation: none; } }
.os-skel-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: var(--os-hairline); }
.os-skel-row:last-child { border-bottom: none; }
.os-skel-card { border: var(--os-hairline); border-radius: var(--os-radius-lg); overflow: hidden; }
.os-skel-card-body { padding: 13px 14px 16px; }

/* ── 패널 표시 제어 ── */
.os-panel { display: none; }
.os-panel.is-on { display: flex; flex-direction: column; gap: 24px; }

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .os-wrap { grid-template-columns: 1fr; gap: 24px; }
  .os-side { position: static; }
  .os-cardgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .os-hero { padding-top: 22px; }
  .os-hero-box { padding: 6px 6px 6px 18px; }
  .os-hero-btn { height: 44px; padding: 0 20px; }
  .os-cardgrid { grid-template-columns: 1fr; }
  .os-card-title { min-height: 0; }
  .os-post-time { display: none; }
  .os-zero-cta { flex-direction: column; align-items: flex-start; }
}

/* ── 메인 홈 ↔ 검색 결과 크로스 도큐먼트 View Transition ──
   양쪽 페이지가 opt-in(@view-transition)하고 검색란에 같은 view-transition-name 을 부여
   → 홈에서 검색하면 검색란이 결과 페이지 히어로 위치로 morph (짝 규칙: page-main-v3.css).
   미지원 브라우저(구형/Firefox)는 일반 내비게이션으로 폴백. */
@view-transition { navigation: auto; }
.os-hero-box { view-transition-name: oppadu-searchbar; }
.oppadu-nav { view-transition-name: oppadu-gnb; } /* 헤더는 정지 상태 유지(페어링) */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}