/* main-home.css — 홈 전용 추출본(자동생성물, 직접 편집 금지). 원본=main.css, 생성=.claude/scripts/build-main-home.js
   사유: 홈 미사용 규칙의 셀렉터 대조 비용이 LCP Render Delay 출렁임의 원인(2026-07-31 실측).
   source-md5=0198438c85098955e266a132b933aded — 원본 main.css 내용 해시(드리프트 가드용, 지우면 홈이 원본으로 폴백됨) */
/* ============================================================
   widocs Style Sheet
   Design: Deep Medical Blue (#0056b3 base) + Teal Accent
   Font: IBM Plex Sans + Noto Sans KR
   ============================================================ */

/* CSS Variables */
:root {
  --primary:      #0a52cf;
  --primary-dark: #0a459d;
  --primary-light:#e3efff;
  --accent:       #07a99a;
  --accent-dark:  #097a70;
  --accent-light: #d6f4f1;
  --bg:           #f4f8fc;
  --surface:      #ffffff;
  --border:       #d8e2ee;
  --muted:        #edf3f9;
  --text:         #132238;
  --text-sub:     #4f6278;
  --text-muted:   #5a6a80;
  --yellow:       #fbbf24;
  --radius:       14px;
  --shadow-sm:    0 1px 2px rgba(15,30,52,.06), 0 2px 10px rgba(15,30,52,.05);
  --shadow-md:    0 6px 20px rgba(15,30,52,.10), 0 2px 8px rgba(15,30,52,.05);
  --shadow-lg:    0 14px 38px rgba(15,30,52,.14), 0 4px 16px rgba(15,30,52,.08);
  --transition:   .22s cubic-bezier(.4,0,.2,1);
  --float-right: 20px;
  --float-bottom: 24px;
  --scroll-top-size: 44px;
  --float-gap: 14px;

  /* Hero sizing tokens — 모든 페이지 hero 공통 높이/패딩 */
  --hero-min-h-desktop: 320px;
  --hero-min-h-tablet:  260px;
  --hero-min-h-mobile:  200px;
  --hero-pad-y-desktop: 64px;
  --hero-pad-y-tablet:  48px;
  --hero-pad-y-mobile:  36px;
  --hero-home-min-h:    480px; /* 홈 메인 hero — 강조 변형 */
}

/* ── 홈(/) 한정 컬러: accent(초록/teal) → 파랑. 메인 텍스트·아이콘·틴트에서 green 제거.
   타 페이지(웰니스 teal 브랜드 등)는 그대로 유지하려고 body.home 으로만 한정.
   (above-fold 즉시 적용분은 home-critical.css 에도 동일 블록) ── */
body.home {
  --accent:       #1f6fe0;
  --accent-dark:  #1657bd;
  --accent-light: #dbeafe;
}
body.home .quick-menu--symptom .quick-menu__label::before { box-shadow: 0 0 0 3px rgba(31,111,224,.16); }
body.home .section--accent-bg { background: linear-gradient(135deg, rgba(31,111,224,.06) 0%, rgba(26,95,180,.04) 100%); }
body.home .gnb__item:hover, body.home .gnb__item.active { background: linear-gradient(135deg, rgba(15,99,216,.12), rgba(31,111,224,.10)); }

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scrollbar-gutter: stable; } /* 세로 스크롤바 자리 항상 예약 → 로딩 중 스크롤바 생성/소멸로 인한 가로 밀림(운영에서만 보이던 리더 목록 등) 방지 */
/* webp <picture> 래퍼는 레이아웃에서 투명 처리 — 안쪽 <img> 가 다시 직접 flex/grid 아이템이 되어
   webp 도입 이전과 동일하게 동작(width/height/object-fit/align-self/flex-shrink 가 img 클래스 셀렉터에 그대로 적용).
   picture 가 flex 아이템이 되면서 .featured-doctor·.doctor-card-hero·아바타 스택 등 원이 타원으로 찌그러지던 회귀 방지.
   본문/위키처럼 picture 에 명시적 display 를 준 곳(.column-article__body picture·.wiki-list-card__thumb-wrap picture)은 특이도가 높아 그대로 유지. */
picture { display: contents; }
/* scroll-behavior:smooth 은 새로고침 시 스크롤 복원 후 async CSS/JS 가 레이아웃을
   채우며 스크롤을 재보정할 때 그 보정까지 애니메이션해 "출렁임"을 만든다.
   사용자 상호작용(앵커 클릭 등) 후에만 smooth 가 적용되도록 :focus-within 로 한정 →
   로드 시 스크롤 복원은 즉시(auto). 앵커·TOC 점프 등 사용자 스크롤은 그대로 smooth. */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}
/* 홈 첫 화면 컨테이너 — preload 된 'Noto KR Critical' 임계 서브셋 우선(첫 페인트부터 진짜 Noto).
   home-critical.css 와 동기화. 헤드라인은 자체 'Widocs Hero KR' 규칙 우선. (선택자는 홈에만 존재) */
.hero-search-section,
.quick-menu {
  font-family: 'IBM Plex Sans','Noto KR Critical','Noto Sans KR','Noto KR Fallback',-apple-system,BlinkMacSystemFont,sans-serif;
}
/* 동적 텍스트(인기 검색어 칩·추천 전문가 카드 이름/전공) — 매 로드 글자가 바뀌어 임계 서브셋으로
   못 덮는다. 웹 Noto(분할)를 쓰면 swap 깜빡임 발생 → 이 요소만 'Noto KR Fallback'(Noto 치수로
   보정한 로컬 시스템 한글)으로 고정해 첫 페인트부터 불변(교체 없음=깜빡임 0). 미세한 글꼴 차이는 감수. */
.kw-tag,
.doctor-card-hero__name,
.doctor-card-hero__spec {
  font-family: 'IBM Plex Sans','Noto KR Fallback',-apple-system,BlinkMacSystemFont,sans-serif;
}
body {
  font-family: 'IBM Plex Sans','Noto Sans KR','Noto KR Fallback',-apple-system,BlinkMacSystemFont,sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* 모바일 가로 오버플로우 최후 가드 — 임의 콘텐츠(TinyMCE 인라인 style, 긴 URL,
     외부 임베드)가 viewport 폭을 뚫고 나가도 가로 스크롤이 노출되지 않도록.
     `clip` 은 `hidden` 과 달리 sticky/fixed 의 viewport 기준 위치를 깨지 않음. */
  overflow-x: clip;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 모바일 가로 스크롤 안전망 — 2026-05-28.
   카드가 잘리는 게 아니라 디바이스 폭에 맞춰 같이 줄어들도록 처리.

   핵심 원리: flex/grid 자식의 기본 `min-width: auto` 가 자식 콘텐츠보다 못 줄어들게
   막아 트랙/컨테이너를 viewport 밖으로 밀어냄.
   → `main *` (헤더 밖) 전부에 `min-width: 0` 강제 + 단일컬럼 grid 는 `minmax(0, 1fr)` 로 풀어줌.

   - body: viewport 전체 가로 스크롤 최후의 안전망 (clip 으로 sticky 보존).
   - main 안 모든 자식: min-width: 0 (헤더는 main 밖이라 영향 X).
   - 잘 알려진 단일컬럼 grid: minmax(0, 1fr) 로 트랙 자유 축소.
   - header 는 절대 건드리지 않음. */
@media (max-width: 768px) {
  body { overflow-x: clip; }
  @supports not (overflow-x: clip) {
    body { overflow-x: hidden; }
  }
  /* main 안 모든 element — flex/grid 자식이 트랙을 밀어내지 않도록.
     min-width 만 0 으로 설정 (width/display/flex 등 다른 속성에는 영향 X).
     header 는 main 외부이므로 영향 받지 않음. */
  main *,
  .page * {
    min-width: 0;
  }
  /* 잘 알려진 단일컬럼 grid — 1fr 의 기본 min-width: auto 가 카드의 intrinsic min-content 만큼
     트랙을 키움. minmax(0, 1fr) 로 풀어줌. */
  .card-grid,
  .wiki-grid,
  .doctor-grid5,
  .doctor-grid4,
  .stats-grid,
  .guide-principles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 헤더 — 좁은 폰에서 아이콘 4개(검색·저장·알림·아바타)+햄버거+로고 가 안 들어가는 케이스.
   기본 .header__inner gap 24 + .header__actions gap 8 + icon-btn 36px 가 누적되면
   ≤380px 단말에선 헤더 콘텐츠가 viewport 초과. 아이콘/간격 점진적 축소.
   .header__inner 자식들은 min-width: 0 으로 강제 — 헤더 안에서만 적용 (외부 영향 X). */
@media (max-width: 480px) {
  .header__inner { gap: 12px; }
  .header__inner > * { min-width: 0; }
  .header__actions { gap: 4px; }
  .icon-btn { width: 32px; height: 32px; }
  .header-avatar__btn img { width: 30px; height: 30px; }
  .hamburger { padding: 6px; }
}
@media (max-width: 380px) {
  /* 매우 좁은 폰 — 보조 아이콘(저장·검색) 숨겨 공간 확보.
     (저장: 아바타 메뉴 > 저장한 콘텐츠 / 검색: 홈 히어로 검색·각 페이지 검색으로 접근)
     로고는 이미지 워드마크(45px, max-width 240)라 별도 축소 불필요 — 320px 에서도 넘침 없음. */
  .saves-bell { display: none; }
  #headerSearchBtn { display: none; }
  /* 헤더 요소만 추가 축소(본문 .container 패딩 등은 미변경) → 아이콘·햄버거 넘침 한계선 하향 */
  .header__inner { gap: 8px; }
  .header__actions { gap: 3px; }
  .icon-btn { width: 30px; height: 30px; }
  .header-avatar__btn img { width: 28px; height: 28px; }
  .hamburger { padding: 5px; }
}
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
/* 375px 같은 좁은 모바일에서 좌우 24px 패딩(=48px 차감) 은 본문 가용폭을 너무 깎음 → 16px 로 완화. */
@media (max-width: 767px) {
  .container { padding: 0 16px; }
}

/* Page Router */
.page { display: block; }
.page.active { display: block; }

/* Animate In */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(26,95,180,.4); }
  50%     { box-shadow: 0 0 0 12px rgba(26,95,180,0); }
}
/* 2026-05-27: 메인 페이지 정적 렌더링 — 등장 애니메이션 제거 */
.animate-in { animation: none; }
.animate-in--delay { animation: none; animation-delay: 0s; }

/* HEADER */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(143,167,194,.28);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.header.scrolled {
  box-shadow: 0 10px 28px rgba(15,30,52,.08);
  border-bottom-color: rgba(143,167,194,.4);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  /* 64→76px(2026-08-24): 로고 이미지 안에서 아이콘이 위쪽을 많이 차지해
     'width:auto 로 폭만 맞추는 64px 바' 에서는 "위닥스" 텍스트 자체의 위/아래 여백이
     30.9px : 11.6px 로 어긋나 보였다. 바를 키워야 텍스트 여백을 대칭으로 맞추면서도
     아이콘 위 여백이 바짝 붙지 않는다(실측·근거는 .header .logo__img 쪽 주석 참조). */
  height: 76px;
}

/* Logo */
.logo { display: flex; align-items: center; gap: 7px; cursor: pointer; flex-shrink: 0; }
.logo__mark {
  width: 34px; height: 34px;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
  flex-shrink: 0;
}
/* 로고 = 이미지 워드마크(widocs_logo.png, 엠블럼+'위닥스'). 2026-08-14 텍스트 span(.logo__text) 폐지. */
.logo__img {
  display: block;
  width: auto;
  height: 45px;
  max-width: 240px;
  flex-shrink: 0;
  /* 헤더바 64px 상하 정중앙 배치 — 단, 아래 광학 보정을 함께 볼 것. */
}
/* 로고 PNG(캔버스 126) 안에서 엠블럼이 위쪽(y10~106), "위닥스" 텍스트가 아래쪽(y60~120)에
   있어 이미지 전체를 단순히 정중앙 배치하면 텍스트 자체의 위/아래 여백이 크게 어긋난다
   (76px 바에 무보정 시 텍스트 위 18.6 / 아래 35.9px). 텍스트가 세로 중앙에 오도록
   -9.64px 로 끌어올림 — 실측: 텍스트 위/아래 각 27.29px 대칭, 엠블럼 위 여백 9.43px
   (바짝 붙지 않는 선, 2026-08-24). 푸터는 .footer__brand-logo 가 별도 보정. */
/* .header .logo__img { transform: translateY(-9.64px); } */
.logo__img--footer {
  height: 36px;
  max-width: 240px;
}

/* GNB */
.gnb { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.gnb__item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.gnb__item:hover, .gnb__item.active {
  background: linear-gradient(135deg, rgba(15,99,216,.12), rgba(15,159,147,.1));
  color: var(--primary);
}

/* Header Actions */
.header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.icon-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub);
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.icon-btn:hover { background: var(--muted); color: var(--primary); }

/* Header Search Bar */
.header-search { display: none; border-top: 1px solid var(--border); background: #fff; }
.header-search.open { display: block; animation: fadeUp .2s both; }

/* Mobile Nav */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; border-radius: 8px;
  transition: background var(--transition);
}
.hamburger:hover { background: var(--muted); }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--transition); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; flex-direction: column; gap: 4px;
  padding: 12px 24px 16px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.mobile-nav.open { display: flex; animation: fadeUp .2s both; }
.mobile-nav__item {
  padding: 10px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--text-sub);
  cursor: pointer; transition: background var(--transition);
}
.mobile-nav__item:hover, .mobile-nav__item.active {
  background: var(--primary-light); color: var(--primary);
}

/* Search Inline (header & page hero) */
.search-inline {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-inline:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,95,180,.12);
}
.search-inline svg { color: var(--text-muted); flex-shrink: 0; }
.search-inline input {
  flex: 1; border: none; outline: none;
  font-size: 14px; font-family: inherit;
  background: transparent; color: var(--text);
  min-width: 0;
}


/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  line-height: 1; cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: linear-gradient(135deg, var(--primary), #1a7cf0);
  color: #fff;
  box-shadow: 0 8px 18px rgba(15,99,216,.25);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(10,69,157,.28);
}
.btn--white   { background: #fff; color: var(--primary); }
.btn--white:hover { background: #f0f6ff; transform: translateY(-1px); }
.btn--ghost   { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.3); }
.btn--ghost:hover { background: rgba(255,255,255,.22); }
.btn--outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn--outline:hover { background: var(--primary-light); }
.btn--sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }

/* Badge */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 600;
}
.badge--primary { background: var(--primary-light); color: var(--primary); }
.badge--white   { background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.badge--yellow  { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.badge--accent  { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }

/* HERO */
.hero {
  position: relative; overflow: hidden;
  background: var(--primary);
  min-height: var(--hero-home-min-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--hero-pad-y-desktop) 0;
}
.hero__radial { display: none; } /* 단색 배경 — 우상단 흰색 글로우 제거(가장자리 진해 보이던 원인) */
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 48px;
  align-items: center;        /* PC: 우측 흰 카드는 자연 높이로 세로 중앙 */
}
.hero__left {
  color: #fff;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__right { display: flex; justify-content: center; }
.hero__right > .doctor-card-hero { width: 100%; max-width: 380px; }
.hero__badge {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 100px;
  padding: 4px 12px; font-size: 13px; font-weight: 500;
  margin-bottom: 20px;
}
.hero__title { font-size: 42px; line-height: 1.2; color: #fff; margin-bottom: 16px; }
.hero__title--yellow { color: var(--yellow); }
.hero__desc { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.7; margin-bottom: 28px; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* 901–960px 등 좁은 2단에서 우측 "이달의 닥터" 카드가 눌려 통계/버튼이 깨진다.
   → 960px 이하는 hero 를 단일 컬럼으로 전환: 카드가 풀폭이 되어 PC 가로 레이아웃이 그대로 여유 있게 적용.
   (≤768px 의 모바일 세로 카드는 기존 규칙이 그대로 덮어씀) */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 28px; }
  /* 단일 컬럼: 카드를 좌측 버튼 줄과 같은 풀폭으로(중앙 축소 해제) → 카드 너비 = 버튼 너비 */
  .hero__right > .doctor-card-hero { max-width: none; }
  .hero__btns { flex-wrap: nowrap; }
  .hero__btns .btn { flex: 1 1 0; min-width: 0; white-space: normal; word-break: keep-all; text-align: center; }
}

/* Doctor Hero Card */
/* 이달의 닥터 배지 — 카드 위에 정상 flow chip
   PC: 좌측 정렬(닥터 카드와 같은 시작 라인) / 모바일: 중앙 정렬
   디자인: 노란 그라데이션 + 별 아이콘 + 미세 인셋·드롭 그림자 */
.hero-doctor-label {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 14px;
}
/* 2026-06-19 — "위닥스 추천 전문가" 플랫 글래스 배지.
   그라데이션·그림자·글로우(입체감) 없음. hero 좌측 .hero__badge 와 동일한
   반투명 글래스 chip 언어로 통일 — 글래스 카드와 자연스럽게 묶인다.
   색 강조는 앰버 별(--yellow) 하나만. */
.hero-doctor-label__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  line-height: 1;
  white-space: nowrap;
}
.hero-doctor-label__icon {
  flex-shrink: 0;
  color: #fbbf24;
}

@media (max-width: 768px) {
  /* 모바일도 좌측 정렬 유지 — 카드 좌측 정렬 시작점과 일치 */
  .hero-doctor-label { margin-bottom: 12px; }
  .hero-doctor-label__badge {
    font-size: 11.5px;
    padding: 5px 11px;
  }
}

@media (max-width: 480px) {
  .hero-doctor-label { margin-bottom: 10px; }
  .hero-doctor-label__badge {
    font-size: 11px;
    padding: 4px 10px;
    gap: 4px;
  }
  .hero-doctor-label__icon { width: 14px; height: 14px; }
}
/* 흰 카드 · 세로 중앙 정렬(전 폭 동일). box-shadow 금지 — border 색 + translateY 만. */
.doctor-card-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--text);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px;
  transition: transform var(--transition), border-color var(--transition);
}
.doctor-card-hero:hover,
.doctor-card-hero:focus-visible {
  border-color: var(--primary);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--text);
}
.doctor-card-hero:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 3px;
}
/* 배지 — 흰 카드 위 블루 필(상단 중앙). 공통 글래스 배지 위에 덮어씀(소스 순서상 뒤). */
.doctor-card-hero__badge {
  align-self: center;
  margin: 0 0 16px;
  color: var(--primary);
  background: #eef4fc;
  border-color: transparent;
}
.doctor-card-hero__badge .hero-doctor-label__icon { color: var(--primary); }
.doctor-card-hero__img {
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 18px;
  object-fit: cover;
  background: var(--muted);
  border: 1px solid var(--border);
  margin: 0 0 16px;
  flex-shrink: 0;
}
.doctor-card-hero__body {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 0;
}
/* CLS — 이름 1줄·전공 2줄 고정 예약/클램프: 리더(랜덤 추첨)마다 이름·전공(`·` 다중 결합) 길이가
   달라도 카드 높이 불변 → 히어로 섹션 높이가 새로고침마다 흔들리던 문제 제거. */
.doctor-card-hero__name { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 4px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doctor-card-hero__spec { font-size: 13.5px; color: #64748b; line-height: 1.5; margin-bottom: 0; width: 100%; min-height: 3em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


.doctor-card-hero__stats {
  display: flex; justify-content: center; gap: 28px;
  width: 100%;
  margin: 18px 0; padding: 16px 0;
  border-top: 1px solid #e6eaf0; border-bottom: 1px solid #e6eaf0;
}
.stat-box {
  flex: 0 0 auto; min-width: 0;
  background: transparent;
  border-radius: 0; padding: 0;
  text-align: center;
}
.stat-box strong { display: block; font-size: 20px; font-weight: 800; color: var(--primary); }
.stat-box span   { font-size: 12px; color: #64748b; margin-top: 2px; display: block; white-space: nowrap; }
.doctor-card-hero__link {
  margin-top: 4px;
  width: 100%; padding: 12px;
  background: var(--primary);
  border: none;
  border-radius: 10px;
  font-size: 14px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.doctor-card-hero:hover .doctor-card-hero__link,
.doctor-card-hero:focus-visible .doctor-card-hero__link {
  background: var(--primary-dark);
}

/* HERO SEARCH SECTION — 홈 서브 섹션 (hero 계열 아닌 검색 밴드) */
.hero-search-section {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: var(--hero-pad-y-desktop) 0 var(--hero-pad-y-tablet);
}
.hero-search__inner { text-align: center; }
.hero-search__eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--primary); text-transform: uppercase;
  margin-bottom: 12px;
}
.hero-search__headline {
  /* LCP 헤드라인: 웹폰트(Noto Sans KR) 도착 대기 제거 위해 시스템 한글 글꼴 직접 지정 → 즉시 페인트(LCP↓). home-critical.css 와 동일 스택. */
  /* LCP 헤드라인: 글자 전용 초소형 Noto 800 서브셋(Widocs Hero KR) 우선 → 굵게+깔끔+즉시(미로드 시 시스템 한글 폴백). */
  font-family: "Widocs Hero KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif;
  font-size: 38px; font-weight: 800;
  color: var(--text); line-height: 1.2;
  margin-top: 0; margin-bottom: 36px;
}
.hero-search__headline em { font-style: normal; color: var(--primary); }

/* Search Hero Box */
.search-hero-box {
  position: relative;
  max-width: 680px; margin: 0 auto;
  /* 2026-05-27: 메인 페이지 정적 렌더링 — pulse 박동 애니메이션 제거 */
  animation: none;
  border-radius: 16px;
}
.search-hero-box__wrap {
  display: flex; align-items: center;
  background: var(--surface);
  border: 2.5px solid var(--primary);
  border-radius: 16px;
  padding: 6px 6px 6px 18px;
  box-shadow: 0 4px 24px rgba(26,95,180,.18);
  transition: box-shadow var(--transition);
}
.search-hero-box__wrap:focus-within {
  box-shadow: 0 6px 32px rgba(26,95,180,.28);
}
.search-hero-box__icon { color: var(--primary); flex-shrink: 0; }
.search-hero-box__input {
  flex: 1; border: none; outline: none;
  font-size: 17px; font-family: inherit;
  background: transparent; color: var(--text);
  padding: 10px 14px; min-width: 0;
}
.search-hero-box__input::placeholder {
  color: var(--text-muted);
  /* 긴 안내문구가 좁은 화면에서 잘리지 않게 폭에 맞춰 축소.
     입력 글자(16/17px)는 그대로라 iOS 포커스 줌은 발생하지 않음. */
  font-size: clamp(12px, 3.6vw, 17px);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.search-hero-box__btn {
  flex-shrink: 0;
  background: var(--primary); color: #fff;
  border: none; border-radius: 12px;
  padding: 12px 28px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: var(--transition);
}
.search-hero-box__btn:hover { background: var(--primary-dark); transform: scale(1.02); }

.search-hero-box__keywords {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; justify-content: center;
}
.kw-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.kw-tag {
  padding: 6px 14px; border-radius: 100px;
  background: var(--muted); border: 1.5px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text-sub);
  cursor: pointer; transition: var(--transition);
}
.kw-tag:hover {
  background: var(--primary-light); border-color: var(--primary);
  color: var(--primary); transform: translateY(-2px);
}

/* Search Dropdown */
.search-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 50; overflow: hidden;
  animation: fadeUp .18s both;
}
.search-dropdown__label {
  font-size: 11px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em;
  padding: 12px 16px 6px;
}
.search-dropdown li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: 14px; color: var(--text);
  cursor: pointer; transition: background var(--transition);
}
.search-dropdown li:hover { background: var(--primary-light); }
.search-dropdown li svg { color: var(--text-muted); flex-shrink: 0; }

/* QUICK MENU — 진료과목 + 생활 건강 두 섹션이 하나의 카드처럼 이어지는 디자인 */
.quick-menu {
  padding: 28px 0 0;
  background: var(--muted);
  border-bottom: 0;
}
.quick-menu + .quick-menu--symptom {
  padding-top: 0;
}
.quick-menu > .container {
  background: #fff;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 22px 26px 18px;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
.quick-menu__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.quick-menu__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.01em;
}
.quick-menu__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(15,99,216,.12);
}
.quick-menu__sorts {
  display: inline-flex; gap: 4px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.qm-sort {
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  color: var(--text-mute, #64748b);
  background: transparent; border: 0; border-radius: 999px;
  cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.qm-sort:hover { color: var(--text); }
.qm-sort.active {
  background: var(--primary); color: #fff;
}

.quick-menu__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 2px;
}
/* collapsed 상태에서 보일 갯수: 데스크탑 12개(6열 x 2행), 모바일 8개(4열 x 2행) */
.quick-menu__grid--collapsed .quick-item:nth-child(n+13) {
  display: none;
}
@media (max-width: 1024px) {
  .quick-menu__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .quick-menu__grid--collapsed .quick-item:nth-child(n+11) {
    display: none;
  }
}
@media (max-width: 768px) {
  .quick-menu__grid {
    /* 4→3열 — 한 칸 폭 늘려 긴 진료과목 명("정신건강의학과" 등) 한 줄에 들어가도록 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  /* 모바일 collapse 기준도 비례 조정 (3열 × 2행 = 6 → 7번째부터 숨김) */
  .quick-menu__grid--collapsed .quick-item:nth-child(n+7) {
    display: none;
  }
  /* 그래도 안 들어가는 초장문 라벨은 2줄 wrap 허용 (잘림보다 wrap) */
  .quick-item {
    white-space: normal;
    line-height: 1.25;
    min-height: 36px;
    padding: 8px 10px;
  }
  .quick-item__label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
    text-align: center;
  }
}

.quick-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
  /* 2026-05-27: 진료과목·생활건강 quick-item 아래→위 등장 애니메이션 제거 (정적 표시) */
  opacity: 1;
  animation: none;
}
.quick-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.quick-item:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.quick-item:active { transform: translateY(0); }
.quick-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
  flex: 0 0 auto;
}
.quick-item__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.quick-item__label { display: inline-block; }
.quick-item__count {
  font-size: 11px; font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 6px; border-radius: 999px; min-width: 18px; text-align: center;
}
.quick-item:hover .quick-item__count { background: #e0e7ff; color: var(--primary); }

.quick-menu__footer {
  display: flex; justify-content: center;
  margin-top: 14px;
}
.quick-menu__toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 18px; font-size: 13px; font-weight: 600;
  color: var(--primary);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.quick-menu__toggle:hover { background: #f8fafc; border-color: var(--primary); }

/* Quick Menu — 생활 건강 (헬스칼럼 진입) */
.quick-menu--symptom {
  padding: 0 0 28px;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}
.quick-menu--symptom > .container {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 1px dashed var(--border);
  border-radius: 0 0 18px 18px;
  padding: 18px 26px 22px;
}
.quick-menu--symptom .quick-menu__toolbar { margin-bottom: 14px; }
.quick-menu--symptom .quick-menu__label::before {
  background: var(--accent, #1a9e8f);
  box-shadow: 0 0 0 3px rgba(26,158,143,.14);
}
.quick-item--symptom:hover {
  border-color: var(--accent, #1a9e8f);
  color: var(--accent, #1a9e8f);
}

/* QUICK MENU — 반응형 */
@media (max-width: 768px) {
  .quick-menu { padding-top: 18px; }
  .quick-menu--symptom { padding-bottom: 18px; }
  .quick-menu > .container {
    border-radius: 14px 14px 0 0;
    padding: 16px 14px 12px;
  }
  .quick-menu--symptom > .container {
    border-radius: 0 0 14px 14px;
    padding: 12px 14px 16px;
  }
  .quick-menu__toolbar {
    margin-bottom: 10px;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .quick-menu__label {
    font-size: 13px;
    gap: 7px;
  }
  .quick-menu__label::before {
    width: 7px;
    height: 7px;
  }
  .quick-menu__sorts {
    width: 100%;
    justify-content: space-between;
    padding: 2px;
  }
  .qm-sort {
    flex: 1;
    text-align: center;
    padding: 6px 4px;
    font-size: 11.5px;
  }
  /* 모바일: 라벨 어절 단위 줄바꿈(... 생략 금지). 슬림하게 — 짧은 라벨 1줄(낮은 높이),
     긴 라벨만 2줄. 과한 min-height 로 전부 뚱뚱해지지 않게. home-critical.css 와 동기화. */
  .quick-item {
    position: relative;
    white-space: normal;
    padding: 6px 9px;
    font-size: 12px;
    line-height: 1.2;
    min-height: 34px;
  }
  .quick-item__label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
    text-align: center;
  }
  /* 카운트는 우상단 모서리 배지(가로폭 미점유·깔끔). */
  .quick-item__count {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 10px;
    padding: 1px 5px;
    min-width: 15px;
  }
  .quick-menu__grid { gap: 6px; }
  .quick-menu__footer { margin-top: 10px; }
  .quick-menu__toggle {
    padding: 7px 14px;
    font-size: 12px;
  }
}
/* 작은 모바일(폰): 진료과목·생활건강 버튼 2개/행 — 칸이 넓어져 라벨이 1줄에 다 들어감
   (줄바꿈/잘림 없는 슬림한 1줄 칩). 위 ≤768 quick-item 블록 뒤라 폰트까지 덮어씀.
   home-critical.css ≤480 과 동기화. */
@media (max-width: 480px) {
  .quick-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-item { font-size: 13px; }
}

.qm-chevron { font-size: 10px; line-height: 1; transition: transform .2s ease; display: inline-block; }
.qm-chevron--up { transform: rotate(180deg); }

@keyframes quickItemIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* SECTIONS */
.section { padding: 64px 0; }
.section--muted   { background: var(--muted); }
.section--accent-bg { background: linear-gradient(135deg, rgba(26,158,143,.06) 0%, rgba(26,95,180,.04) 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 8px 16px;
}
/* 좌측 타이틀 블록 (h2 + sub) — 좁은 폭에서 우측 link-more 와 겹치지 않도록
   flex item 으로서 자유 축소 허용. nowrap 잔여 케이스의 마지막 안전망. */
.section__head > div:first-child {
  min-width: 0;
  /* basis 0 — 줄바꿈 판정이 타이틀/sub 길이(max-content)에 좌우돼 sub 짧은 섹션(메디컬 리더)만
     "전체보기"가 인라인으로 남던 불일치 차단. 전 섹션 동일하게 우측 인라인 배치. */
  flex: 1 1 0;
}
/* 우측 "전체보기 ›" — flex item 으로서 자기 콘텐츠 폭만 차지하고 right-align.
   2026-05-28: 좁은 폰(320px 등) 에서 좌측 sub 가 길어 link-more 가 viewport 끝에
   너무 붙거나 살짝 튀는 시각 회귀 차단. */
.section__head > .link-more {
  flex: 0 0 auto;
  margin-left: auto;
}
.section__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 22px; color: var(--text);
}
.section__title svg { color: var(--primary); }
.section__title--accent svg { color: var(--accent); }
.section__sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-weight: 400; }
.link-more {
  font-size: 13px; font-weight: 600; color: var(--primary);
  display: flex; align-items: center; gap: 2px;
  cursor: pointer; white-space: nowrap;
  padding: 6px 0;
}
.link-more:hover { text-decoration: underline; }
.link-more--accent { color: var(--accent-dark); }

/* Journey Guide — 처음 방문자 3단계 안내 */
.journey-guide {
  background: #fff;
  border: 1px solid #e3e9f2;
  border-radius: 18px;
  padding: 32px 32px 30px;
}
.journey-guide__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  cursor: pointer;
  list-style: none;
}
.journey-guide__head::-webkit-details-marker { display: none; }
.journey-guide__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #1d4fd8;
  background: #eaf1fd;
  border-radius: 999px;
  padding: 7px 16px;
  transition: background 0.15s ease;
}
.journey-guide__head:hover .journey-guide__toggle {
  background: #dbe8fb;
}
.journey-guide__toggle-text::after { content: '여정 보기'; }
.journey-guide[open] .journey-guide__toggle-text::after { content: '접기'; }
.journey-guide__toggle-icon { transition: transform 0.2s ease; }
.journey-guide[open] .journey-guide__toggle-icon { transform: rotate(180deg); }
.journey-guide__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1d4fd8;
  background: #eaf1fd;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.journey-guide__title {
  font-size: 21px;
  font-weight: 700;
  color: #0b2544;
  line-height: 1.35;
  margin: 0 0 8px;
}
.journey-guide__desc {
  font-size: 14px;
  color: var(--text-sub, #475569);
  line-height: 1.55;
  margin: 0;
}
.journey-guide__steps {
  list-style: none;
  margin: 26px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.journey-step {
  position: relative;
  background: #f6f8fc;
  border: 1px solid #e7ecf4;
  border-radius: 14px;
  padding: 22px 20px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.journey-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1d4fd8;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}
.journey-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: #eaf1fd;
  color: #1d4fd8;
}
.journey-step__label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #15243a;
  margin-bottom: 4px;
}
.journey-step__sub {
  display: block;
  font-size: 13px;
  color: var(--text-sub, #64748b);
  line-height: 1.5;
}
.journey-guide__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: max-content;
  margin: 0 auto;
}

.journey-guide__cta:hover .journey-guide__arrow,
.journey-guide__cta:focus-visible .journey-guide__arrow {
  transform: translateX(3px);
}

/* 태블릿 (≤1023px) — 여정 4종 2×2 배치 */
@media (max-width: 1023px) {
  .journey-guide__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 모바일 (≤768px) — 세로 스택, 연결 화살표 아래 방향 */
@media (max-width: 768px) {
  .journey-guide {
    padding: 24px 20px 22px;
    border-radius: 16px;
  }
  .journey-guide__title {
    font-size: 18px;
  }
  .journey-guide__desc {
    font-size: 13px;
  }
  .journey-guide__steps {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 22px 0;
  }
  .journey-step {
    padding: 18px;
  }
  .journey-guide__cta {
    width: 100%;
  }
}

/* Card Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.col-card {
  position: relative;
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid #dbe6f4;
  overflow: hidden; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.col-card:hover { border-color: rgba(15,99,216,.38); }
.col-card__img-wrap { position: relative; flex-shrink: 0; }
.col-card__img { width: 100%; height: 176px; object-fit: cover; }
.col-card__img--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--muted);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.col-card__img-icon { display: block; opacity: 0.55; }
.col-card__img-text { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.col-card__badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(26,95,180,.9); color: #fff;
  border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 600;
}
/* 이미지(.col-card__img-wrap) 없는 카드 — 배지가 absolute 로 제목 위에 겹치던 문제.
   img-wrap 이 없으면 배지를 본문 흐름(static)으로 내려 제목 위에 칩으로 정렬. */
.col-card:not(:has(.col-card__img-wrap)) .col-card__badge {
  position: static;
  align-self: flex-start;
  margin-bottom: 8px;
}
.col-card__video-badge {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,.72); color: #fff;
  border-radius: 999px; padding: 3px 9px 3px 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .2px;
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.col-card__video-badge svg { flex-shrink: 0; }
.col-card__video-badge--manual {
  background: rgba(30,41,59,.55);
  font-weight: 500;
}
.col-card__video-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: block; pointer-events: none;
  opacity: .92;
  transition: transform .18s ease, opacity .18s ease;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.col-card:hover .col-card__video-play,
.wiki-list-card:hover .col-card__video-play { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }

/* 위키톡 썸네일은 컴팩트(112x84) — 재생 아이콘을 같은 비율로 축소 */


.wiki-list-card__thumb-wrap .col-card__video-badge {
  left: 6px; bottom: 6px; padding: 2px 6px 2px 5px; font-size: 10px;
}
.wiki-list-card__thumb-wrap .col-card__video-badge svg { width: 10px; height: 10px; }
.col-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.col-card__title { font-size: 15px; font-weight: 600; line-height: 1.5; margin-bottom: 6px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.5em * 2); max-height: calc(1.5em * 2); }
.col-card__excerpt { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.6em * 2); max-height: calc(1.6em * 2); }
.col-card__tags { display: flex; flex-wrap: nowrap; gap: 5px; margin-bottom: 12px; min-height: 26px; max-height: 26px; overflow: hidden; }
.col-card__tags > .col-card__tag { flex-shrink: 0; }
.col-card__tag { padding: 3px 8px; background: #f1f6fc; border-radius: 999px; font-size: 12px; color: #56708e; border: 1px solid #d9e7f6; }
/* +N more 칩 — 위닥스톡 .wiki-card__tag--more 패턴과 동일 톤 (배경 비움, 회색 글자). 초과 태그 카운트 표시용. */
.col-card__tag--more { background: transparent; border-color: transparent; color: var(--text-muted, #64748b); font-weight: 600; padding-left: 4px; padding-right: 4px; }
.col-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: auto;
}
.col-card__author { display: flex; align-items: center; gap: 8px; min-width: 0; }
.col-card__author-media {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.col-card__author-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border); }
.col-card__author-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
}
.col-card__author-name { font-size: 12.5px; font-weight: 500; }
.col-card__author-date { font-size: 12px; color: var(--text-muted); }
.col-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.col-card__meta span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.col-card__meta img { width: 12px; height: 12px; }

/* Wiki Grid */
/* minmax(0, 1fr) — 자식 wiki-card 안의 메타/태그/제목이 길어도 트랙이 컨테이너를 넘지 않도록 강제. */
.wiki-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-width: 0; }
.wiki-card {
  /* a 태그 wrapper 호환 — 카드 전체가 링크가 되어 어디 클릭해도 상세 페이지로 이동 */
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 18px; cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  /* grid item 콘텐츠가 카드/그리드 너비를 넘쳐 가로 스크롤 만드는 회귀 차단. */
  min-width: 0;
  overflow: hidden;
}
/* wiki-card__inner 의 본문 wrapper(.wiki-card__type 이외) 도 min-width:0 보장.
   그래야 안의 line-clamp 제목/미리보기/메타가 부모 너비 기준으로 잘리고 부풀지 않음. */
.wiki-card__inner > *:not(.wiki-card__type) { min-width: 0; }
.wiki-card:hover {
  border-color: var(--accent);
  color: inherit;
  text-decoration: none;
}
.wiki-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.wiki-card__inner { display: flex; align-items: flex-start; gap: 12px; }













/* Doctor Grid */
.doctor-grid5 {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.doctor-grid4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.doctor-card {
  position: relative;
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 18px 12px; text-align: center; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
}
.doctor-card__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 1;
}
.doctor-card__img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 10px; border: 2px solid var(--border);
}
.doctor-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
}
.doctor-card__name { font-size: 14px; font-weight: 700; color: var(--text); }

.doctor-card__spec { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }




/* 빈 슬롯 채움 — "전문가 모십니다" 모집 안내 카드(클릭 불가, 점선 박스) */

.doctor-card--recruit:hover { transform: none; box-shadow: none; }




/* 칼럼 그리드 빈 슬롯 채움 — 칼럼 안내(promo) 카드(클릭 불가, 점선 박스) */
.col-card--promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  min-height: 280px;
  padding: 28px 22px;
  background: var(--muted, #f6f8fa);
  border: 1.5px dashed var(--border);
  cursor: default;
}
.col-card--promo:hover { transform: none; box-shadow: none; border-color: var(--border); }
.col-card__promo-plus {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--surface, #fff);
  border: 1.5px dashed var(--border);
  color: var(--text-muted);
  font-size: 28px; font-weight: 300; line-height: 1;
}
.col-card__promo-title { font-size: 15px; font-weight: 600; color: var(--text-sub, #475569); }
.col-card__promo-sub { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin-top: 2px; }

/* ───── 메디컬 리더 허브: 프로필형 카드 (가로 레이아웃) ───── */

.doctor-card--profile {
  display: flex;
  gap: 16px;
  padding: 18px;
  text-align: left;
  align-items: stretch;
}
.doctor-card--profile .doctor-card__badge {
  top: 10px;
  left: 18px;
  transform: none;
}
.doctor-card--profile .doctor-card__media {
  flex: 0 0 auto;
  width: 96px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.doctor-card--profile .doctor-card__img {
  width: 96px;
  height: 96px;
  margin: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.doctor-card--profile .doctor-card__img--placeholder {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  font-size: 11px;
}
.doctor-card--profile .doctor-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.doctor-card--profile .doctor-card__name {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.doctor-card--profile .doctor-card__suffix {
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: var(--text-muted);
}
.doctor-card--profile .doctor-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-sub);
  flex-wrap: wrap;
}
.doctor-card--profile .doctor-card__hospital { font-weight: 600; color: var(--text); }
.doctor-card--profile .doctor-card__spec     { color: var(--primary); font-weight: 600; }
.doctor-card--profile .doctor-card__meta-dot { color: var(--text-muted); }
.doctor-card--profile .doctor-card__tagline {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.doctor-card--profile .doctor-card__keywords {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  border-top: 1px dashed #e5ecf3;
}
.doctor-card--profile .doctor-card__keywords-icon { color: var(--primary); flex-shrink: 0; }
.doctor-card--profile .doctor-card__keywords-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
@media (max-width: 1024px) {
  /* minmax(0, 1fr) — 트랙의 기본 min-width: auto 가 카드 min-content(이미지+nowrap 텍스트)
     만큼 트랙을 키워 좁은 폰에서 viewport 초과하던 회귀 차단 (2026-05-28). */
  
}
@media (max-width: 480px) {
  .doctor-card--profile { padding: 14px; gap: 12px; }
  .doctor-card--profile .doctor-card__media { width: 76px; }
  .doctor-card--profile .doctor-card__img,
  .doctor-card--profile .doctor-card__img--placeholder { width: 76px; height: 76px; }
  .doctor-card--profile .doctor-card__name { font-size: 15px; }
  .doctor-card--profile .doctor-card__meta { font-size: 12px; }
  .doctor-card--profile .doctor-card__tagline { font-size: 12.5px; }
}

/* ───── 닥터 목록 헤더 (제목 + 카운트 + 정렬) ───── */







.doctor-list-sort__select:focus {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 1px;
}
@media (max-width: 480px) {
  
  
}

/* Home doctor section hierarchy tuning */






/* Featured Doctor */




.featured-doctor__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 700;
}
/* 2026-06-12 — 탑리더 허브 "이달의" 배지(.hub-leader-card__badge)와 동일 톤으로 통일.
   진한 파란 .featured-doctor 배경 위에서 읽히도록 흰 pill + 파란 글씨 + 앰버 별. */
.featured-doctor__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #0a52cf;
  background: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(8, 28, 58, .35);
  line-height: 1;
  white-space: nowrap;
  margin-bottom: 10px;
  align-self: flex-start; /* flex column 안에서 stretch 방지 */
  width: auto;
}
.featured-doctor__badge-icon {
  flex-shrink: 0;
  color: #f5a623;
}
@media (max-width: 768px) {
  .featured-doctor__badge {
    font-size: 11.5px;
    padding: 5px 11px;
  }
}
@media (max-width: 480px) {
  .featured-doctor__badge {
    font-size: 11px;
    padding: 4px 10px;
    gap: 4px;
  }
  .featured-doctor__badge-icon { width: 10px; height: 10px; }
}











/* deprecated — featured-doctor__bio: 옛 마크업 잔존 페이지(예: 홈) 호환용 */


/* 2026-08-11 — "이달의 닥터/웰니스" 로테이션. SSR 이 슬라이드(최대 5명)를 전부 렌더하고
   JS(startFeaturedRotation)가 is-active 를 옮기며 crossfade 순환. --rotate 컨테이너는 grid 스택이 되고
   기존 flex 카드 레이아웃은 슬라이드가 이어받는다(홈 등 옛 단일 마크업은 --rotate 미사용 → 영향 0). */


.featured-doctor--rotate > .featured-doctor__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .7s ease;
}
@media (prefers-reduced-motion: reduce) {
  
}

/* Stats Banner */
.stats-banner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; padding: 56px 0;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 24px; text-align: center;
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stat-item__val   { font-size: 32px; font-weight: 800; }
.stat-item__label { font-size: 14px; color: rgba(255,255,255,.7); }

/* PAGE HERO — 모든 서브페이지 hero 공통 베이스
   변형(.page-hero--primary/--accent/--health/--wikitalk, .about-hero, .finder-hero,
   .doctor-profile-hero 등)은 padding/min-height를 덮어쓰지 말고 배경/색상만 교체한다.
   내부 여백이 더 필요하면 이 블록 내부 요소에 margin을 주는 방식으로 해결.

   flex-direction: column + justify-content: center 패턴:
   - 수직 중앙정렬은 main-axis(세로)에서 처리
   - 자식 컨테이너는 cross-axis(가로)에서 stretch 되어 자동 full-width
   - .container, .wiki-archive__container 등 width:100% 없는 컨테이너도 정상 작동 */

/* flex 자식이 margin:auto 를 가질 때 stretch 가 무효화되어 폭이 줄어드는
   문제 방지. 모든 hero 컨테이너 자식은 cross-axis 전체 폭을 보장한다.
   (자식 스스로 max-width + margin:0 auto 로 중앙정렬하는 패턴은 그대로 유지됨) */
.hero > * {
  width: 100%;
}




.page-hero--primary .page-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 700;
}
/* ══════════════════════════════════════════════════════════════════════════
   breadcrumb 정본 — 사이트 전체 공통 (2026-08-29 통합 · 사용자 결정)
   ──────────────────────────────────────────────────────────────────────────
   규칙: ① 위치는 **전 페이지 왼쪽 고정**  ② **알약 없이 기본 텍스트**
         ③ 배경 밝기에 따라 **색만** 바꾼다.

   왜 통합했나 — 종전에는 정의가 **4벌**로 흩어져 있었다.
     pages-extension.css 2벌 + support.css 1벌 + main.css(히어로 전용) 1벌
   그래서 페이지마다 정렬(왼쪽/가운데)·형태(알약/평문)·색이 제각각이었고,
   고칠 때마다 4곳을 다 맞혀야 해서 실제로 두 번 빠뜨렸다(--health-people · --health).

   ⚠️ **main.css 는 페이지 CSS 보다 먼저 로드된다.** 다른 파일에 `.breadcrumb` 를
      다시 선언하면 같은 특이도라도 **그쪽이 이긴다.** 여기 말고 어디에도 쓰지 말 것.
   ⚠️ 마크업이 진실이다 — 현재 항목 표시가 파일마다 `aria-current="page"` / `.current`
      두 가지라 **둘 다** 잡는다(`.breadcrumb-current` 는 마크업 0건이라 폐기).
   ══════════════════════════════════════════════════════════════════════════ */
.breadcrumb {
  /* display:flex 는 블록 레벨이라 **부모가 text-align:center 여도 항목이 왼쪽에서 시작**한다.
     종전 히어로는 inline-flex 로 부모 정렬을 따라가게 해 페이지마다 위치가 달랐다. */
  display: flex;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--crumb-fg, #64748b);
}
.breadcrumb a {
  color: var(--crumb-link, #475569);
  text-decoration: none;
  transition: color .18s ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--crumb-hover, var(--primary));
  text-decoration: underline;
}
/* 현재 위치 — 링크가 아니므로 한 단계 강하게 */
.breadcrumb [aria-current="page"],
.breadcrumb .current {
  color: var(--crumb-current, #0f172a);
  font-weight: 600;
}
/* 구분자 '›' 는 장식이라 가장 낮게 (가독성 우선순위: 현재 > 링크 > 구분자) */
.breadcrumb [aria-hidden="true"] {
  color: var(--crumb-sep, #94a3b8);
}
/* 4단계 트레일 마지막 노드(글 제목) — 긴 제목 줄바꿈 대신 말줄임 */
.breadcrumb .current {
  max-width: min(480px, 70vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .breadcrumb { font-size: 12px; row-gap: 4px; }
}

/* ══ 어두운 배경 컨테이너 — **목록은 이 한 곳뿐** ══════════════════════════
   어두운 배경 위에서는 기본 회색이 묻힌다. 여기서 **토큰만 켜면** 위 정본이 소비한다.
   ⇒ 어두운 배경 페이지가 새로 생기면 **아래 목록에 한 줄만 추가**하면 끝난다.
   값은 같은 히어로의 제목(#fff)·부제(rgba(255,255,255,.88)) 체계를 그대로 따른다.
   ※ .support-hero 는 `.page-hero` 가 아니라서 히어로 스코프 규칙이 안 걸렸고,
     그 때문에 support.css 가 같은 값을 하드코딩으로 3벌째 복제하고 있었다 — 여기로 합쳤다.
   ※ --lounge(리더 라운지)는 어둡지만 breadcrumb 출력처가 아니라 뺐다. 넣게 되면 한 줄 추가.
   ※ 밝은 변형(--accent · --wikitalk · --wiki-write)은 토큰을 켜지 않는다 = 기본 회색. */
.page-hero--primary,
.page-hero--health,
.page-hero--health-people,
.support-hero {
  --crumb-fg:      rgba(255,255,255,.75);
  --crumb-link:    rgba(255,255,255,.75);
  --crumb-hover:   #fff;
  --crumb-current: #fff;
  --crumb-sep:     rgba(255,255,255,.45);
}


.page-hero--primary .search-inline:focus-within {
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.24);
}



/* FILTER & PILLS */
.filter-group { margin-bottom: 20px; }


.pill {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #f5f9fe;
  color: var(--text-sub);
  border: 1px solid #d7e4f3;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.pill:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.pill.active { background: linear-gradient(135deg, var(--primary), #1a7cf0); color: #fff; border-color: var(--primary); box-shadow: 0 8px 16px rgba(15,99,216,.24); }
.pill.active--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.pill:focus-visible,
.wiki-cat-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,95,180,.2);
}

/* 진료과 아이콘 내비 — 메디컬 리더 허브 */

.spec-icon-nav.is-collapsed {
  max-height: 252px;
  overflow: hidden;
}
.spec-icon-nav.is-collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff 80%);
  pointer-events: none;
}

.spec-icon-nav__more:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
.spec-icon-nav__more:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,95,180,.2);
}





.spec-icon-cell:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}
.spec-icon-cell.is-active {
  background: linear-gradient(135deg, var(--primary), #1a7cf0);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 8px 16px rgba(15,99,216,.24);
}
.spec-icon-cell:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,95,180,.2);
}

.spec-icon-cell.is-active .spec-icon-cell__icon {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.32);
  color: #fff;
}


@media (max-width: 768px) {
  
  .spec-icon-nav.is-collapsed { max-height: 210px; }
  
  
  
  
}

.chip-group--enhanced {
  position: relative;
}
.filter-group__more {
  display: none;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
}
.filter-group__more:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}




/* WIKI PAGE (LIST) */








.write-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(26,95,180,.28);
  filter: brightness(1.03);
}
.write-cta-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,95,180,.22), 0 12px 24px rgba(26,95,180,.24);
}


/* 글쓰기 floating 버튼 — scroll-top 과 동일 스펙(크기·모양·위치) 의 아이콘 정사각형 버튼
   라벨은 항상 숨기고 펜 아이콘만 노출, 스크롤 시 scroll-top 바로 위에 stack */
.write-cta-fab {
  position: fixed;
  right: var(--float-right);
  bottom: calc(var(--float-bottom) + var(--scroll-top-size) + var(--float-gap) + env(safe-area-inset-bottom));
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--scroll-top-size);
  height: var(--scroll-top-size);
  padding: 0;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}
.write-cta-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(26,95,180,.32);
}
.write-cta-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,95,180,.22), var(--shadow-md);
}

/* 라벨은 항상 숨김 — top 버튼과 동일한 정사각 아이콘 버튼 형태
   기존 `.is-compact` 토글 클래스는 무효화되지만 JS 호환 위해 제거하지 않음 */


/* 카테고리 펼침 바 — 토글 클릭 시 그 자리에서 인라인으로 펼쳐지는 느낌.
   별도 박스(muted bg + radius + 12px padding) 대신 토글 버튼과 시각 연속성 유지:
   배경/라운드 제거, 상단 1px dashed 보더만으로 구분. 부모 `.wikitalk-list-panel` 안 자연 위치. */

.wiki-category-bar.is-open { display: flex; }
@keyframes wiki-cat-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* .wiki-cat-pill — SSOT (단일 소스).
   사용처: 위닥스톡 페이지(#wikiQuickCats, #wikiCategoryBar) + /wiki-talk/ archive.
   하나의 base 룰로 두 컨텍스트 모두 일관성 확보 (pages-extension.css 는 본 룰만 참조). */
.wiki-cat-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-sub);
  border-radius: 999px;
  min-height: 36px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
/* hover — 옅은 outline 강조 (탐색 단서) */
.wiki-cat-pill:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: #93c5fd;
}
/* active — primary fill (soft panel 위에서도 한눈에 식별) */
.wiki-cat-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(26,95,180,.25);
}
.wiki-cat-pill.active:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: none;
}
@media (max-width: 768px) {
  /* 모바일 — 가독성 위해 font-size 만 미세 보강 (PC 36px 그대로 유지) */
  .wiki-cat-pill {
    font-size: 13px;
  }
  
}
.tab {
  padding: 7px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text-sub);
  transition: var(--transition);
  white-space: nowrap;
}
.tab.active { background: #fff; color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm); }


.wiki-list-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
/* 좌측 컬러 띠(::before) — 사용자 디자인 피드백으로 제거.
   글 유형 식별은 헤딩 첫 칩(.wiki-list-card__type-badge) 이 담당 (2026-09-01 썸네일 폐지로 overlay → 헤딩).
   답변 상태는 헤딩 알약(.wiki-list-card__status, SSR) / 메타 우측(.wiki-list-card__status-meta, SPA) 에서 표시. */
.wiki-list-card::before { display: none; }
.wiki-list-card:hover { border-color: #c2d3e7; }
.wiki-list-card__inner { display: flex; align-items: stretch; gap: 14px; }


/* 글 유형 표시 — 헤딩 첫 텍스트 라벨만 (2026-09-01 확정).
   썸네일 폐지 후 ①헤딩 알약 ②좌상단 모서리 탭 ③좌측 테두리 리본 ④카드 좌측 컬러 띠 를
   차례로 시도했으나 모두 사용자 지시로 폐기 — 유형은 **면(배지)도 띠도 아닌 텍스트 컬러**로만 표현한다.
   질문 = 사이트 primary / 정보 = neutral slate. 카테고리 칩(면·주제)과 역할이 겹치지 않는다.
   ⛔ 카드 좌측 컬러 띠(border-left / ::before 스트립) 다시 넣지 말 것. */
.wiki-list-card__type-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  background: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}
/* 카테고리 칩과의 구분선 — 텍스트 라벨과 칩이 붙어 보이지 않게. */
.wiki-list-card__type-badge::after {
  content: '';
  width: 1px;
  height: 11px;
  margin-left: 8px;
  background: #e2e8f0;
}
.wiki-list-card__type-badge--qa   { color: var(--primary, #1a5fb4); }
.wiki-list-card__type-badge--exp,
.wiki-list-card__type-badge--free { color: #64748b; }
/* 헤딩 줄 = [유형 라벨 | 카테고리 칩 | 영상 칩]. 우측 padding 은 절대 위치 북마크 버튼 자리.
   --type-* 는 위닥스톡 목록 카드(SPA/SSR)만 붙는 modifier — 마이페이지 카드는 영향 없음. */
.wiki-list-card--type-qa .wiki-list-card__heading,
.wiki-list-card--type-free .wiki-list-card__heading {
  margin: 0 0 8px;
  padding: 0 44px 0 0;
  min-height: 22px;
  align-items: center;
  gap: 8px;
}

/* 영상 포함 칩 — 썸네일 overlay(.col-card__video-badge 는 absolute) 를 헤딩 인라인으로 재사용.
   목록 썸네일 폐지(2026-09-01) 후 "영상 있음" 신호를 유지하기 위한 최소 확장. */
.wiki-list-card__heading .col-card__video-badge {
  position: static;
  padding: 2px 8px 2px 7px;
  font-size: 11px;
  font-weight: 700;
}
.wiki-list-card__heading .col-card__video-badge svg { width: 11px; height: 11px; }

/* (제거 2026-09-01) .wiki-list-card__status-overlay* — 썸네일 우상단 overlay 전용이었고,
   답변 상태는 SPA 카드=.wiki-list-card__status-meta(메타 우측), SSR 카드=.wiki-list-card__status(헤딩 알약) 로 일원화. */

/* ── 답변 상태 메타 배지 — 카드 하단 우측 (qa 만, 답변 수 대체).
   썸네일 overlay 와 겹쳐 보이던 문제 해소를 위해 메타 영역으로 이동한 버전.
   기존 status-overlay 와 톤은 동일하되 position absolute 제거 + 컴팩트화. */


/* 답변대기 — 무채색(slate) "색상 없음" 톤. 답변완료 — 블루. */








.wiki-list-card__thumb--placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 8px;
  color: var(--text-sub);
}


.wiki-list-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.1px;
  line-height: 1.45;
  border: 1px solid;
}
.wiki-list-card__badge--qa   { background: #eff6ff; color: var(--primary); border-color: #bfdbfe; }
.wiki-list-card__badge--exp  { background: #ecfdf5; color: var(--accent);  border-color: #a7f3d0; }
.wiki-list-card__badge--free { background: #f8fafc; color: var(--text-sub); border-color: #e2e8f0; }



/* ── 카테고리 배지 — "분류" 신호 (사각형 + solid colored, bold).
   카테고리별 컬러는 inline style 로 주입 (PHP widocs_wiki_category_badge_style /
   JS categoryBadgeStyle). 여기서는 구조와 폴백(미매핑) 톤만 정의. */

a.wiki-list-card__category:hover {
  filter: brightness(.96);
}

/* ── 상태 배지 — "액션" 신호 (알약 + outline 톤 + 도트 indicator) */


/* 답변대기 — 무채색(slate). 답변완료 — 블루. legacy status pill 도 overlay/meta 와 톤 통일.
   wikiPendingPulse keyframe 는 status-overlay/status-meta 와 함께 더 이상 사용 안 함 — 가벼움 위해 정의도 제거. */








/* 예약(future) — 발행 예정. 스케줄 톤(teal)으로 공개/검토중과 구분. */




/* 임시저장 카드의 "이어 작성" 보조 액션 — primary 톤으로 강조 */

.wiki-list-card__resume:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}


/* 카드 제목 — 모든 디바이스에서 무조건 한 줄 강제 + 넘치면 ellipsis.
   line-clamp 패턴은 자식 <a> 등에서 가끔 누락이 생겨 nowrap+ellipsis 로 단일화.
   디바이스 너비별 폰트 축소는 아래 미디어쿼리들에서 처리. */
.wiki-list-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.wiki-list-card__title-link {
  color: inherit;
  text-decoration: none;
  display: inline;
  white-space: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.wiki-list-card__title-link:hover { color: var(--primary); }

/* 발췌 — 정확히 1줄. 본문이 짧거나 비어도 카드 높이가 줄지 않도록 min-height 로 한 줄을 예약한다
   (2026-09-01: 글 내용에 따라 카드 높이가 달라지지 않게 해달라는 요구). */






/* 메타 줄 — 우측 요소가 상태 알약(답변 대기/완료, 20px)이냐 "댓글 N" 버튼(17px)이냐에 따라
   카드 높이가 3px 씩 달라지던 것 차단. 높은 쪽(20px)으로 고정. */







/* 작성일 — 기본(PC): full(YYYY.MM.DD) 노출 / short(M.D) 숨김. 모바일에서 토글. */






.wiki-list-card__answers:hover { background: #dbeafe; }

.wiki-answers-toggle:hover { opacity: 0.8; }
.wiki-answers-toggle.active { color: var(--primary-dark, var(--primary)); }
/* ── Bookmark button (위닥스 공용) ─────────────────────────────────
   bookmarks.js 가 .wiki-list-card / .col-card / .wiki-card 에 주입.
   기본: 작은 원형 아이콘 버튼 (회색).
   .is-bookmarked: 파란색 강조.
   위치:
     - 위닥스톡 카드: .wiki-list-card 컨텍스트 우상단 절대 위치
     - 칼럼 카드: .col-card__img-wrap 컨텍스트 우상단 절대 위치 (badge2 자리) */
.widocs-bookmark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-sub, #64748b);
  cursor: pointer;
  transition: color var(--transition, 160ms), background var(--transition, 160ms), border-color var(--transition, 160ms), transform var(--transition, 160ms);
}
.widocs-bookmark-btn:hover {
  color: var(--primary, #1a6dff);
  border-color: var(--primary, #1a6dff);
  background: #fff;
  transform: translateY(-1px);
}
.widocs-bookmark-btn:disabled { opacity: 0.55; cursor: wait; }
.widocs-bookmark-btn.is-bookmarked {
  color: var(--primary, #1a6dff);
  border-color: var(--primary, #1a6dff);
  background: #eff6ff;
}
.widocs-bookmark-btn.is-bookmarked:hover { background: #dbeafe; }
.widocs-bookmark-btn svg { display: block; }

/* 위닥스톡 카드 — 카드 자체 우상단 절대 위치 */
.wiki-list-card .widocs-bookmark-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0 !important;
  z-index: 2;
}

/* 의료칼럼 텍스트(리스트) 뷰 — a.col-row 의 flex 마지막 자식으로 inline 배치.
   메타(작성자/날짜/조회수) 옆 우측에 자연스럽게 들어감. */
.col-row .widocs-bookmark-btn {
  width: 30px;
  height: 30px;
  margin: 0 0 0 4px !important; /* JS 인라인 marginTop 흡수 */
  flex-shrink: 0;
}
.col-row .widocs-bookmark-btn svg { width: 13px; height: 13px; }
@media (max-width: 480px) {
  .col-row .widocs-bookmark-btn { width: 28px; height: 28px; margin-left: 2px !important; }
  .col-row .widocs-bookmark-btn svg { width: 12px; height: 12px; }
}

/* 칼럼 카드 — 이미지 wrap 우상단 절대 위치 (기존 badge2 자리).
   bookmarks.js 가 .col-card__img-wrap 을 host 로 선택하므로 wrap 기준 absolute. */
.col-card__img-wrap .widocs-bookmark-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0 !important;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 3; /* badges 위 */
}
.col-card__img-wrap .widocs-bookmark-btn svg { width: 14px; height: 14px; }

@media (max-width: 768px) {
  .wiki-list-card .widocs-bookmark-btn {
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
  }
  .wiki-list-card .widocs-bookmark-btn svg { width: 12px; height: 12px; }

  .col-card__img-wrap .widocs-bookmark-btn {
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
  }
  .col-card__img-wrap .widocs-bookmark-btn svg { width: 13px; height: 13px; }
}


.wiki-inline-comments__empty { padding: 8px 0; color: var(--text-sub, #888); font-size: 12.5px; }


.wiki-inline-comments__more-link:hover { text-decoration: underline; }

/* ── 인라인 댓글 (목록 카드 안 펼침 영역) — 컴팩트 패턴 ──────────────────
   상세 페이지의 .wiki-comment-item 큰 카드 패턴(pages-extension.css padding 16px 18px,
   avatar 36px 등)을 컴팩트 inline 미니 카드로 override. 목록 카드 안 좁은 영역이라
   작은 폰트·작은 avatar·얇은 padding 으로 정돈. */


.wiki-list-card__comments-area .wiki-comment-item:hover { box-shadow: none; transform: none; }
/* 좌측 accent 보더(꺽새) 제거 + 티얼 → 위닥스 메인 블루 (2026-08-11 사용자 피드백).
   상세의 답변 카드와 톤을 맞춘다. border 는 shorthand 로 — 폭까지 리셋해야 꺽새가 사라짐. */

.wiki-list-card__comments-area .wiki-comment-item__doctor-badge {
  font-size: 10px;
  padding: 1px 6px;
  margin-bottom: 4px;
  gap: 3px;
}







/* 답글 목록 — 인라인에서는 들여쓰기 더 축소 + 답글 카드 더 컴팩트 */










/* 모바일 ≤768 — 더 컴팩트하게 */
@media (max-width: 768px) {
  
  
  
  
  
  
  
}

/* ── 댓글/답글 액션 버튼 (수정·삭제·신고) ─────────────────────────── */


.wiki-action-btn:hover { background: var(--bg-sub, #f3f4f6); }
.wiki-action-btn--edit:hover   { color: var(--primary, #1a5fb4); }
.wiki-action-btn--delete:hover { color: #dc3232; }
.wiki-action-btn--report:hover { color: #e07d00; }

/* ── 인라인 수정 폼 ────────────────────────────────────────────────── */


.wiki-comment-edit-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(26,95,180,.12);
}

/* ─── 위닥스톡 답변 첨부(참고 콘텐츠) — 2026-08-10 신설 ──────────────────────
   본문 밖(comment_meta)에 저장된 칼럼·뉴스를 답변 아래 카드로 렌더.
   앵커텍스트 = 글 제목. 상세 설계는 inc/content/wiki-attachment.php 주석 참조. */
/* 답변 본문 아래 블록들의 세로 리듬 — 본문과 12px, 서로 8px, 다음 영역(답글)과 12px.
   flex column 이라 margin 이 collapse 되지 않는다(합산된다) — 값 조정 시 유의. */





.wiki-attach__link:hover { border-color: var(--accent, #2f6df6); background: #f7fafd; }

.wiki-attach__thumb--empty { display: block; }




.wiki-attach__remove:hover { background: rgba(0,0,0,.12); }

/* 작성 폼 — 첨부 에디터 */



.wiki-attach-editor__add:hover:not(:disabled) { border-color: var(--accent, #2f6df6); color: var(--accent, #2f6df6); }








/* 붙여넣기 감지 제안 */








/* 검색 모달 */
.wiki-attach-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.wiki-attach-modal[hidden] { display: none; }
.wiki-attach-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.wiki-attach-modal__panel {
  position: relative;
  width: 100%; max-width: 460px; max-height: 74vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.wiki-attach-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.wiki-attach-modal__close { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-muted, #7a8699); }
.wiki-attach-modal__search {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border, #e3e8ef); border-radius: 9px;
  font-size: 13px;
}
.wiki-attach-modal__results { list-style: none; margin: 10px 0 0; padding: 0; overflow-y: auto; flex: 1; }
.wiki-attach-modal__empty { padding: 16px 4px; font-size: 12.5px; color: var(--text-muted, #7a8699); text-align: center; }

.wiki-attach-result:hover { background: var(--bg-soft, #f2f5f9); }



@media (max-width: 768px) {
  
  
  
  
}

/* 상세 답변 — 전문가 프로필 카드 (2026-08-10 신설)
   답변 본문 아래에 붙어 "누가 답했는가" 의 신뢰 신호를 제공한다. 인증 전문가에게만 렌더. */
/* 사진·이름·배지는 담지 않는다 — 바로 위 헤더가 이미 출력한다(중복 제거, 2026-08-10).
   카드는 헤더에 없는 것만: 소속 · 소개 · 누적 실적 · 프로필 동선. */







.wiki-expert-card__link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  
  
  
}

/* 목록 카드 — 답변 전문가 블록 (2026-08-10 신설)
   종전 카드는 질문자만 노출해 전문가 참여가 목록에서 안 보였다. 답변자를 카드 안에서
   시각적으로 분리(좌측 accent bar + 옅은 배경)해 "전문가가 답했다" 를 한눈에 전달한다.
   마크업/클래스는 wiki.js 렌더러와 wiki-list-card.php(PHP 미러) 양쪽이 공유한다. */






.wiki-list-card__answerer-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent, #2f6df6);
  color: #fff;
  flex-shrink: 0;
}
.wiki-list-card__answerer-badge--admin {
  background: transparent;
  color: var(--text-muted, #7a8699);
  border: 1px solid var(--border, #e3e8ef);
}






/* Integrated toolbar */






.wiki-sort:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,99,216,.12); }



.wiki-filter-toggle:hover { border-color: var(--primary); color: var(--primary); }
/* 펼친 상태 — 인라인 카테고리 바를 토글하는 버튼(드롭다운 아님). 배경/테두리 강조로 상태 표시 */


/* 우측 액션 묶음 (action-text "펼치기/접기" + chevron) — 의료칼럼 col-find-details 패턴 */





@media (max-width: 768px) {
  /* 모바일 — chevron 회전만으로 상태 표시 충분, 텍스트 숨겨 버튼 컴팩트화 */
  
}


/* Result meta */
/* `#wikiResultMeta` 내부: 카운트 텍스트 옆에 "필터 초기화" 버튼 바로 붙임 (space-between → flex-start).
   상위 `.wiki-result-meta-row` 가 글쓰기/정렬을 우측 그룹으로 별도 배치하므로,
   meta 박스 안에서는 reset 가 count 와 같이 좌측에서 그루핑되어야 사용자 시선 동선이 짧다. */




.wiki-result-meta__active { color: var(--primary); font-weight: 600; }

.wiki-result-meta__reset:hover { border-color: var(--primary); color: var(--primary); }

/* Empty state */





.load-more-wrap { margin-top: 16px; text-align: center; }




.wiki-cta-card:hover {
  border-color: #c2d3e7;
}








.wiki-guide[open] { padding-bottom: 18px; }



.wiki-guide[open] .wiki-guide__summary::after { transform: rotate(-135deg); }





.widocs-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
}
.widocs-loading__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #cbd5e1;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: widocs-spin 0.8s linear infinite;
}
@keyframes widocs-spin {
  to { transform: rotate(360deg); }
}

/* COLUMNS PAGE */




/* ICON GUIDE */




.guide-principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.principle-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; text-align: center;
}
.principle-card__icon { font-size: 28px; margin-bottom: 12px; }
.principle-card__name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.principle-card__desc { font-size: 12px; color: var(--text-sub); line-height: 1.6; }

.icon-set-group { margin-bottom: 36px; }
.icon-set-group__title {
  font-size: 14px; font-weight: 700; color: var(--text-sub);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 14px;
}
.icon-set-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.icon-set-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 12px; min-width: 80px;
  cursor: pointer; transition: var(--transition);
}
.icon-set-item:hover { border-color: var(--primary); background: var(--primary-light); }
.icon-set-item svg,
.icon-set-item img { width: 24px; height: 24px; }
.icon-set-item span { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.3; }


.size-row {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 20px;
}
.size-row__icon { background: var(--muted); border-radius: 8px; padding: 8px; display: flex; }
.size-row__size  { font-size: 14px; font-weight: 700; color: var(--text); }
.size-row__usage { font-size: 11px; color: var(--text-muted); text-align: center; }

.icon-inline {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.icon-asset {
  flex-shrink: 0;
  display: inline-block;
}

.icon-asset--24 {
  width: 24px;
  height: 24px;
}


.color-swatch {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.color-swatch__fill { height: 80px; }
.color-swatch__info { padding: 10px 12px; }
.color-swatch__name { font-size: 13px; font-weight: 700; }
.color-swatch__hex  { font-size: 12px; font-family: monospace; color: var(--text-muted); }
.color-swatch__usage{ font-size: 11px; color: var(--text-muted); margin-top: 2px; }














/* USER JOURNEY */




.journey-btn:hover { background: var(--muted); }
.journey-btn.active { background: var(--primary-light); }

.journey-btn.active .journey-btn__dot { background: var(--primary); color: #fff; }


.journey-btn.active .journey-btn__label { color: var(--primary); }







/* 2026-05-27: 메인 페이지 정적 렌더링 — journey 등장 애니메이션 제거 */





.step-card__header:hover { background: var(--muted); }














.journey-cta-item:hover { border-color: var(--primary); }





/* FOOTER — see assets/css/layout/footer.css */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* SCROLL TOP */
.scroll-top {
  position: fixed; bottom: calc(var(--float-bottom) + env(safe-area-inset-bottom)); right: var(--float-right); z-index: 90;
  width: var(--scroll-top-size); height: var(--scroll-top-size); border-radius: 12px;
  background: var(--primary); color: #fff;
  font-size: 18px; font-weight: 700;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { transform: translateY(-3px); }

/* EMPTY STATE */



/* RESPONSIVE */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .doctor-grid5 { grid-template-columns: repeat(3, 1fr); }
  .doctor-grid4 { grid-template-columns: repeat(3, 1fr); }
  .stats-grid   { grid-template-columns: repeat(3, 1fr); }
  .guide-principles { grid-template-columns: repeat(2, 1fr); }
  
  
  
  
}

@media (max-width: 768px) {
  :root {
    --float-right: 14px;
    --float-bottom: 14px;
    --scroll-top-size: 40px;
    --float-gap: 10px;
  }

  .gnb { display: none; }
  .hamburger { display: flex; }
  .header__actions .btn--primary { display: none; }
  .header__inner {justify-content: space-between;}

  /* 모바일: hero 단일 컬럼 + gap 축소 (data hero gap 48 → 20px) */
  .hero__inner { grid-template-columns: 1fr; gap: 20px; }
  /* 모바일에서도 hero 우측 추천 전문가 카드 노출 — 단일 컬럼에서 중앙 정렬 */
  .hero__right { display: flex; }
  /* 추천전문가 카드 — 모바일 컴팩트(흰 세로 카드 유지) */
  .doctor-card-hero { padding: 22px 18px; border-radius: 16px; }
  .doctor-card-hero__img { width: 100px; height: 100px; margin: 0 0 14px; }
  .doctor-card-hero__badge { margin-bottom: 12px; }
  .doctor-card-hero__name { font-size: 18px; margin-bottom: 3px; }
  .doctor-card-hero__spec { font-size: 13px; }
  .doctor-card-hero__stats { gap: 24px; margin: 14px 0; padding: 14px 0; }
  .stat-box strong { font-size: 18px; }
  .stat-box span { font-size: 11px; }
  .doctor-card-hero__link { margin-top: 4px; padding: 11px; font-size: 13.5px; }
  .hero__title { font-size: 30px; }
  .hero-search__headline { font-size: 26px; }
  .search-hero-box__input { font-size: 16px; } /* iOS 포커스 줌 방지(16px 미만이면 자동 확대) */

  /* 추천 검색어 칩 — 모바일은 6개까지만 보여 히어로 높이를 유지한다(아래 콘텐츠 밀림·LCP 손해 방지).
     서버는 8개를 SSR 하고 7·8번째는 여기서 숨긴다(칩은 button, .kw-label 은 span 이라 nth-of-type 에 안 걸림).
     ⚠️ inc/search/popular-keywords.php 의 WIDOCS_POP_KW_LIMIT(=8) 과 짝. 개수를 바꾸면 이 숫자도 함께 고칠 것.
     ⚠️ 같은 규칙이 home-critical.css 에도 있다(홈 인라인 크리티컬) — 한쪽만 고치면 첫 페인트에 8개가 잠깐 보인다. */
  .search-hero-box__keywords .kw-tag:nth-of-type(n+7) { display: none; }

  /* 모바일 — hero 버튼 2개를 항상 한 줄·균등 너비로(줄바꿈 방지).
     긴 라벨은 버튼 내부에서 한글 단어 단위로 접혀(정사각형에 가까운 블록) 좁은 폰에서도 안 무너짐. */
  .hero__btns { flex-wrap: nowrap; gap: 10px; }
  .hero__btns .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    word-break: keep-all;
    text-align: center;
    line-height: 1.3;
    padding: 14px 12px;
  }

  /* Hero 공통 — 태블릿 이하 높이/패딩 축소 */
  .hero,
  .hero-search-section {
    padding-top: var(--hero-pad-y-tablet);
    padding-bottom: var(--hero-pad-y-tablet);
  }
  .hero {
    min-height: var(--hero-min-h-tablet);
  }
  .hero { min-height: var(--hero-min-h-tablet); } /* 홈도 같은 태블릿 높이로 */

  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .wiki-grid { grid-template-columns: minmax(0, 1fr); }
  .doctor-grid5, .doctor-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  
  
  
  
  
  /* .wiki-filter-toggle 모바일 사이즈 — single source: pages/wikitalk.css 의 .page-wikitalk-v2 컨텍스트 룰
     (specificity 0,3,0 로 어차피 여기 단일 클래스 룰을 덮으므로 중복 제거) */
  
  
  
  
  
  
  .write-cta-fab {
    border-radius: 10px; /* scroll-top 모바일과 동일 */
  }
  .scroll-top {
    border-radius: 10px;
    font-size: 16px;
  }
  
  
  /* column + align-items:flex-start 면 body 가 내용 너비로 줄어 keywords(nowrap)가 카드를 벗어난다.
     body 를 카드 폭으로 stretch 해야 keywords/tagline 의 max-width:100%·말줄임이 동작한다. */
  
  
  
  
  
  
  
  /* 로테이션 슬라이드도 모바일에선 .featured-doctor 와 동일하게 세로 스택 */
  
  
  
  
  
  
  
  
  
  .guide-principles { grid-template-columns: repeat(2, 1fr); }
  
  
  
  
  .chip-group--enhanced.is-collapsed {
    max-height: 86px;
    overflow: hidden;
    padding-right: 4px;
  }
  .chip-group--enhanced.is-collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
    background: linear-gradient(to top, rgba(245,247,251,1), rgba(245,247,251,0));
    pointer-events: none;
  }
  .filter-group__more { display: inline-flex; align-items: center; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }

  /* Hero 공통 — 모바일 최종 크기 */
  .hero,
  .hero-search-section {
    padding-top: var(--hero-pad-y-mobile);
    padding-bottom: var(--hero-pad-y-mobile);
  }
  .hero {
    min-height: var(--hero-min-h-mobile);
  }

  .hero__title { font-size: 26px; }
  .hero-search__headline { font-size: 22px; }
  .search-hero-box__btn { padding: 12px 16px; font-size: 14px; }
  /* 좁은 폰 — placeholder 한 줄 확보용 여백 축소 */
  .search-hero-box__wrap { padding-left: 12px; }
  .search-hero-box__input { padding: 10px 8px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  
  
  
  
  .wiki-list-card { padding: 12px; }
  .wiki-list-card__inner { gap: 10px; }
  
  .wiki-list-card__badge { padding: 2px 6px; font-size: 10px; }
  
  /* 모바일 — 카테고리는 사각형 + bold 유지, 상태는 알약 + dot 유지 (분리 톤 동일) */
  
  
  
  /* 모바일 — 유형 라벨/칩 폰트만 축소, 구조(색 띠 + 텍스트 라벨)는 PC 와 동일. */
  .wiki-list-card__type-badge { font-size: 11.5px; }
  .wiki-list-card__type-badge::after { margin-left: 6px; height: 10px; }
  .wiki-list-card--type-qa .wiki-list-card__heading,
  .wiki-list-card--type-free .wiki-list-card__heading {
    margin: 0 0 6px;
    padding: 0 36px 0 0;
    min-height: 20px;
    gap: 6px;
  }
  .wiki-list-card__heading .col-card__video-badge { padding: 1px 7px 1px 6px; font-size: 10.5px; }
  .wiki-list-card__title { font-size: 15px; }
  
  
  /* 답변 전문가 블록 — 모바일은 카드 높이 압박이 크므로 발췌 1줄 + 여백 축소. */
  
  
  
  
  
  
  
  
  /* 모바일 카드 메타 — 작성자 이름 길이에 따라 줄바꿈되어 카드 높이 불균일 → nowrap 강제 + 작성자 ellipsis.
     작성일은 짧은 형식(M.D) 으로 toggle 해 공간 절약. stats 는 우측에 flex-shrink:0 으로 항상 고정. */
  
  
  
  
  /* 작성일 — 모바일 컴팩트: full(YYYY.MM.DD) 숨김 / short(M.D) 표시 */
  
  
  
  
  
  
  
  .doctor-grid5, .doctor-grid4 { grid-template-columns: repeat(2, 1fr); }
  
  
  
  
}

/* Header Avatar Dropdown */
.header-avatar { position: relative; }
.header-avatar__btn {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; padding: 2px;
  border-radius: 50%;
  transition: box-shadow var(--transition);
}
.header-avatar__btn:hover { box-shadow: 0 0 0 3px var(--primary-light); }

.header-avatar__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 8px 0;
  z-index: 9999;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.header-avatar__dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.header-avatar__info {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.header-avatar__info strong {
  display: block; font-size: 14px; font-weight: 700; color: var(--text);
}
.header-avatar__info span {
  font-size: 12px; color: var(--text-sub); margin-top: 2px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-avatar__item {
  display: block;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.header-avatar__item:hover { background: var(--muted); color: var(--primary); }
.header-avatar__item--danger { color: #ef4444; }
.header-avatar__item--danger:hover { background: #fef2f2; color: #dc2626; }
.header-avatar__divider {
  height: 1px; background: var(--border); margin: 4px 0;
}

/* Mobile Auth Area */
.mobile-nav__auth {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-nav__item--logout { color: #ef4444 !important; }
.mobile-nav__item--logout:hover { background: #fef2f2 !important; }

/* Mypage Application */


.mypage-application__status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.mypage-application__status-badge--none {
  color: var(--text-sub);
  background: #eef3f9;
}
.mypage-application__status-badge--submitted {
  color: #0b4aa2;
  background: #e5efff;
}
.mypage-application__status-badge--needs_revision {
  color: #92400e;
  background: #fff4db;
}
.mypage-application__status-badge--approved {
  color: #166534;
  background: #dcfce7;
}
.mypage-application__status-badge--rejected {
  color: #b91c1c;
  background: #fee2e2;
}


/* 신청 결과 배너 — 성공/실패를 한눈에 식별, 실패 시 해당 필드 anchor 제공 */

.mypage-application-result:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);
}





.mypage-application-result__link:hover,
.mypage-application-result__link:focus {
  text-decoration: underline;
}
.mypage-application-result--success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.mypage-application-result--success .mypage-application-result__icon {
  background: #10b981;
  color: #fff;
}
.mypage-application-result--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.mypage-application-result--error .mypage-application-result__icon {
  background: #dc2626;
  color: #fff;
}

/* 필수 입력 표시 — 라벨 옆 별표(*) 자동 부여 */



/* 숨겨진(조건부 비활성) 행에서는 별표 표시도 함께 숨김 */
.mypage-settings-row[hidden] .mypage-application-form__field-wrap[data-required="1"] > .mypage-settings-row__label::after {
  display: none;
}

/* 미입력/잘못 입력 시각 강조 — 빨간 테두리
   1) 서버 검증 실패로 돌아온 필드는 JS 가 .is-invalid 부여
   2) 한 번이라도 제출 시도한 폼([data-submitted="1"])은 :user-invalid 활성화 — 첫 진입 시 깨끗한 화면 유지
   3) 사용자가 다시 입력하면 .is-invalid 는 JS 가, :user-invalid 는 브라우저가 자동 해제 */
.mypage-application-form__control.is-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
  background-color: #fff5f5;
}
.mypage-application-form__control.is-invalid:focus,
.mypage-application-form[data-submitted="1"] .mypage-application-form__control:user-invalid:focus {
  outline: none;
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .25) !important;
}
/* 파일 input 은 control 클래스를 가져도 테두리가 약하게 보이므로 래퍼 단위로도 강조 */
.mypage-application-form__field-wrap.is-invalid {
  border-radius: 10px;
  outline: 2px solid #dc2626;
  outline-offset: 4px;
}



.mypage-application-form__legal[hidden] {
  display: none !important;
}




.mypage-application-form__ad-warn {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 8px;
  color: #9a3412;
  font-size: 11.5px;
  line-height: 1.55;
}
.mypage-application-form__ad-warn strong {
  color: #9a3412;
  font-weight: 700;
  margin-right: 4px;
}



.mypage-application-form__address-input[readonly]:focus {
  outline: 2px solid #1a5fb4;
  outline-offset: 1px;
}



.mypage-application-form__address-search:hover {
  background: #154a8c;
  border-color: #154a8c;
}
.mypage-application-form__address-search:focus-visible {
  outline: 2px solid #1a5fb4;
  outline-offset: 2px;
}






.mypage-application-form__visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mypage-application-form__visibility-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.mypage-application-form__visibility-badge--public {
  background: #475569;
  color: #ffffff;
}
.mypage-application-form__visibility-badge--private {
  background: #57534e;
  color: #ffffff;
}
@media (max-width: 768px) {
  
}
@media (max-width: 768px) {
  
  
}





.mypage-application-form__control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 99, 216, .14);
}

/* autosize 활성 textarea — JS 가 height 를 직접 제어. 빈 상태에서 작게 시작. */
.mypage-application-form__textarea.is-autosize {
  min-height: 44px;
  resize: none;
  overflow: hidden;
  line-height: 1.55;
}







/* 업로드 파일 미리보기 (기존 .mypage-application-form__file-current 대체) */



.mypage-application-form__file-preview__thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  border-color: #94a3b8;
}





.mypage-application-form__file-preview__name:hover {
  text-decoration: underline;
}


/* 기타 제출서류 — 다중 첨부 목록(기존 업로드 + 선택 미리보기) */



.mypage-application-form__file-list--selected {
  margin-top: 6px;
}
.mypage-application-form__file-list--selected .mypage-application-form__file-list-item {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
}


.mypage-application-form__file-del:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}




@media (max-width: 1024px) {
  
  
}

@media (max-width: 640px) {
  
  
  
  
  
  
  
  .mypage-application-form__ad-warn {
    padding: 7px 9px;
    font-size: 11px;
  }
  
  
}

/* ============================================================
   알림 Bell 드롭다운
   ============================================================ */

/* Dot 배지 */
.notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  transition: background 0.2s;
}
.notif-dot--active {
  background: var(--danger, #e53e3e);
  box-shadow: 0 0 0 2px var(--bg, #fff);
  width: auto;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
  top: 2px;
  right: 2px;
}

/* Bell 래퍼 */
.notif-bell {
  position: relative;
}

/* 드롭다운 패널 */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  width: 340px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.notif-dropdown.open {
  display: flex;
}

/* 헤더 */
.notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.notif-dropdown__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1a202c);
}
.notif-dropdown__read-all {
  font-size: 12px;
  color: var(--primary, #1a5fb4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-weight: 600;
}
.notif-dropdown__read-all:hover {
  text-decoration: underline;
}

/* 목록 */
.notif-dropdown__list {
  max-height: 380px;
  overflow-y: auto;
  flex: 1;
}

/* 빈 상태 / 로딩 */
.notif-dropdown__empty,
.notif-dropdown__loading {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #718096);
}

/* 개별 알림 아이템 */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text, #1a202c);
  border-bottom: 1px solid var(--border, #f0f4f8);
  transition: background 0.15s;
  position: relative;
}
.notif-item:last-child {
  border-bottom: none;
}
.notif-item:hover {
  background: var(--bg-hover, #f7fafc);
}
.notif-item--unread {
  background: rgba(26, 95, 180, 0.04);
}
.notif-item--unread:hover {
  background: rgba(26, 95, 180, 0.08);
}

/* 아바타 */
.notif-item__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.notif-item__avatar--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft, #e8f0fb);
  color: var(--primary, #1a5fb4);
}

/* 본문 */
.notif-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.notif-item__msg {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #1a202c);
  word-break: keep-all;
}
.notif-item__time {
  font-size: 12px;
  color: var(--text-muted, #718096);
}

/* 미읽음 점 */
.notif-item__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary, #1a5fb4);
  flex-shrink: 0;
  margin-top: 6px;
}

/* 푸터 링크 */
.notif-dropdown__footer {
  display: block;
  text-align: center;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary, #1a5fb4);
  text-decoration: none;
  border-top: 1px solid var(--border, #e2e8f0);
  transition: background 0.15s;
}
.notif-dropdown__footer:hover {
  background: var(--bg-hover, #f7fafc);
}

/* 모바일: position:fixed 로 헤더 stacking context 탈출 */
@media (max-width: 768px) {
  .notif-dropdown {
    position: fixed;
    top: 76px;
    left: 8px;
    right: 8px;
    width: auto;
    border-radius: 12px;
  }

  .notif-dropdown__list {
    max-height: calc(100vh - 76px - 80px);
  }

  .notif-item {
    padding: 14px 16px;
    min-height: 48px;
  }
}

/* ============================================================
   작성자 프로필 링크 공통
   ============================================================ */

/* 인라인 작성자 이름 링크 (위닥스톡 댓글, 대댓글 등) */

.author-profile-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* single.php 헤더 작성자 블록 링크 */

.single-col__author-link:hover {
  background: var(--muted);
}
.single-col__author-link:hover .single-col__author-name {
  color: var(--primary);
}


/* ============================================================
   마이페이지 알림 내역 탭
   ============================================================ */

/* 툴바 */



.mypage-notif-filter:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.mypage-notif-filter.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* 리스트 */


/* 빈/로딩 */
.mypage-notif-history__loading {
  padding: 48px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

/* 더보기 */


/* ── 개별 알림 아이템 ── */


.mp-notif-item:hover {
  background: var(--muted);
}



/* 아바타 */



/* 본문 */




/* 바로가기 링크 */

.mp-notif-item__link:hover {
  background: var(--primary-light);
  color: var(--primary);
}

/* 타입 뱃지 */
.mp-notif-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  align-self: flex-start;
  white-space: nowrap;
}
.mp-notif-type-badge--chat {
  background: #e0f2fe;
  color: #0369a1;
}
.mp-notif-type-badge--heart {
  background: #fee2e2;
  color: #dc2626;
}
.mp-notif-type-badge--file {
  background: #d1fae5;
  color: #065f46;
}
.mp-notif-type-badge--check {
  background: #ede9fe;
  color: #7c3aed;
}
.mp-notif-type-badge--default {
  background: var(--muted);
  color: var(--text-sub);
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  
  
  
  
  
  
  
}

@media (max-width: 480px) {
  
  
  
  
}

/* ───────────────────── 본문 영상/임베드 반응형 (YouTube/Vimeo/iframe) ───────────────────── */
/* 모든 포스트 페이지(.wp-content) 본문에서 oEmbed·직접 iframe이 컨테이너 폭에 맞춰 표시되도록 한다. */
.wp-content .wp-block-embed,
.wp-content .wp-block-embed-youtube,
.wp-content .wp-block-embed-vimeo {
  margin: 18px 0;
  max-width: 100%;
}

.wp-content .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.wp-content .wp-block-embed__wrapper > object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* WordPress 가로세로비 클래스(있으면 우선 적용) */
.wp-content .wp-embed-aspect-21-9 .wp-block-embed__wrapper { aspect-ratio: 21 / 9; }
.wp-content .wp-embed-aspect-18-9 .wp-block-embed__wrapper { aspect-ratio: 18 / 9; }
.wp-content .wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.wp-content .wp-embed-aspect-4-3  .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }
.wp-content .wp-embed-aspect-1-1  .wp-block-embed__wrapper { aspect-ratio: 1 / 1; }
.wp-content .wp-embed-aspect-9-16 .wp-block-embed__wrapper { aspect-ratio: 9 / 16; }
.wp-content .wp-embed-aspect-1-2  .wp-block-embed__wrapper { aspect-ratio: 1 / 2; }

/* 클래식 에디터/직접 iframe 삽입 — YouTube·Vimeo·기타 영상 호스트 */


/* 셀프 호스팅 video 태그 */


/* ─── HOME · 고객지원 섹션 ─── */
.section--support {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.home-support {
  display: grid;
  /* minmax(0, 1fr) — 자식 콘텐츠가 nowrap 텍스트 등으로 자연 너비가 큰 경우에도
     트랙이 컨테이너를 넘지 않도록 강제. 모바일 가로 스크롤 회귀 차단. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  min-width: 0;
}
.home-support__card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  min-height: 260px;
  /* grid item 콘텐츠 너비로 트랙이 부풀지 않도록 보강. */
  min-width: 0;
  overflow: hidden;
}
.home-support__card:hover {
  border-color: var(--primary);
}
/* 고객지원 — 상담 안내 헤더(사진 + 제목/안내문). 박스 없이 헤더로 노출해
   아래 공지·FAQ·1:1 문의 카드와 하나의 섹션으로 읽히도록 한다. */
.support-intro {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 26px;
}
.support-intro__photo {
  flex: none;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.support-intro__body {
  flex: 1;
  min-width: 0;
}
.support-intro__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.support-intro__desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  word-break: keep-all;
}
.support-intro__more {
  flex: none;
  align-self: flex-start;
}
@media (max-width: 768px) {
  /* 모바일: 사진 + 제목 + 전체보기를 한 줄에 균형 배치(헤더 바) */
  .support-intro {
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
  }
  .support-intro__photo {
    width: 56px;
    height: 56px;
  }
  .support-intro__title {
    font-size: 19px;
  }
  /* 모바일은 사진+제목만 — 긴 안내문 숨김(아래 3카드가 설명 대체) */
  .support-intro__desc {
    display: none;
  }
  .support-intro__more {
    align-self: center;
    margin-left: auto;   /* 오른쪽 끝 정렬 */
    white-space: nowrap;
  }
}


/* 아이콘 — 플랫 라인 아이콘 + 옅은 단색 칩(그라데이션 없음) */








.home-support__empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
  flex: 1;
}

 /* WCAG AA: ~5.2:1 on #fff */

.home-support__card--static:hover { transform: none; box-shadow: none; border-color: var(--border); }

.home-support__list-link:hover,
.home-support__list-link:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 공지사항: 제목 + 날짜를 같은 줄에 분배 (li flex 자식 1개로 변경) */


.home-support__more--link:hover,
.home-support__more--link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 1024px) {
  .home-support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
}
@media (max-width: 768px) {
  .home-support { grid-template-columns: minmax(0, 1fr); }
  
  .home-support__card { min-height: auto; padding: 18px; }
}

/* ── 홈 FAQ (위닥스 정체성·검증·이용 안내) — JSON-LD FAQPage 가시 노출 ───────── */
.home-faq { margin-top: 28px; }
.home-faq__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}
.home-faq__list { display: flex; flex-direction: column; gap: 12px; }
.home-faq__item {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.home-faq__item[open] { border-color: rgba(26,95,180,.25); }
.home-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.55;
  cursor: pointer;
  list-style: none;
}
.home-faq__q::-webkit-details-marker { display: none; }
.home-faq__q::after {
  content: "+";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.home-faq__item[open] .home-faq__q::after {
  transform: rotate(45deg);
  background: var(--primary);
  color: #fff;
}
.home-faq__a {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-sub);
}
@media (max-width: 768px) {
  .home-faq__q { padding: 16px 18px; font-size: 14px; }
  .home-faq__a { padding: 0 18px 18px; font-size: 13.5px; }
}

/* ── 홈 바로가기 디렉터리 (주요 섹션 8 — 사이트링크 P2) ───────────────────── */
.home-directory__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-directory__item {
  display: flex; flex-direction: column; gap: 5px;
  background: #fff; border: 1px solid #e6eaf0; border-radius: 14px;
  padding: 18px 20px; text-decoration: none;
  transition: transform var(--transition), border-color var(--transition);
}
.home-directory__item:hover { border-color: #1a5fb4; transform: translateY(-2px); }
.home-directory__name { font-size: 16px; font-weight: 800; color: #0b1f3a; }
.home-directory__desc { font-size: 13px; color: #64748b; line-height: 1.45; word-break: keep-all; }
@media (max-width: 1023.98px) {
  .home-directory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 419.98px) {
  .home-directory__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .home-directory__item { padding: 15px 16px; }
}

/* ── HTML 사이트맵 (/sitemap/) — home-directory 카드 재사용 + 링크 리스트 ───── */





.sitemap-links a:hover { border-color: #1a5fb4; color: #1a5fb4; }


/* ── 마이페이지 > 신청폼 > 개인 SNS · 외부 채널 (행 반복 입력) ───────────────── */







.mypage-social-links__select:focus,
.mypage-social-links__url:focus {
  outline: none;
  border-color: var(--primary, #1e88e5);
  box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.15);
}

.mypage-social-links__remove:hover { color: #d9534f; border-color: #e35d6a; background: #fff5f6; }

.mypage-social-links__add:hover { color: var(--primary, #1e88e5); border-color: var(--primary, #1e88e5); background: #f5fafe; }



@media (max-width: 640px) {
  
  
  
  
}

/* ── 공개 프로필 > 외부 채널 (SNS/홈페이지) 렌더 ─────────────────────────── */





.profile-social-links__link:hover {
  border-color: var(--primary, #1e88e5);
  background: #f5fafe;
}




@media (max-width: 640px) {
  
  
  
}

/* ── 라우트 랜딩 SEO/AEO 블록 (2026-05-11) ────────────────────────────────
   AI 검색·일반 검색 봇 대응으로 SPA 라우트 하단에 SSR 정적 인트로 + FAQ 출력.
   사용자에게도 자연스럽게 보이도록 디테일/접기 형태로 구성.
   ───────────────────────────────────────────────────────────────────── */
.route-seo-block {
  margin-top: 48px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft, #fafafa);
}

.route-seo-block__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text);
}


.route-seo-block__item[open] { border-color: var(--primary); }



.route-seo-block__item[open] .route-seo-block__q::after { content: '–'; }

@media (max-width: 768px) {
  .route-seo-block { padding: 18px; margin-top: 36px; }
  
  .route-seo-block__title { font-size: 16px; }
  /* 위닥스톡 카드 제목 — 태블릿/큰 모바일 단계 폰트 축소. 1줄 강제는 기본 정의(nowrap) 가 처리. */
  .wiki-list-card__title { font-size: 15.5px; }
}

/* ── SEO 정의 블록 (route-seo-block--definition) ──────────────────────────
   2026-08-07: pages-extension.css 에서 이동 + 고도화. 정의 블록이 홈·허브·목록
   6곳(AI 인용 P1)까지 확장됐는데 pages-extension 은 상세 페이지에서만 로드돼
   그 외 페이지에서 기본 회색 카드로만 보였다. 전 페이지 로드되는 main.css 가
   단일 소스 — pages-extension 쪽 사본은 제거함(중복 정의 금지).
   margin-bottom: 페이지 마지막 요소로 올 때 푸터와 간격 확보(홈·허브). */
.route-seo-block--definition {
  margin-top: 36px;
  margin-bottom: 48px;
  background: #f4f9ff;
  border-color: #d8e6f7;
}
.route-seo-block--definition .route-seo-block__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 12px;
}
/* 제목 앞 브랜드 액센트 바 — 홈 섹션 타이틀의 아이콘 강세와 톤 통일 */
.route-seo-block--definition .route-seo-block__title::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--primary);
}
.route-seo-block__lead {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text, #0b2544);
}
/* 정의문 속 카테고리 앵커(내부링크 P5) — 본문 링크 관례대로 primary + 밑줄 */
.route-seo-block__lead a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.route-seo-block__disclaimer {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.65;
  color: #6b4416;
  background: #fff7ed;
  border: 1px solid #fcd34d;
  border-radius: 8px;
}
/* 홈 — .section 밴드(상하 64px) 안에 놓일 때는 자체 상하 마진 불필요(이중 여백 방지) */
.section > .container > .route-seo-block--definition { margin-top: 0; margin-bottom: 0; }
@media (max-width: 768px) {
  .route-seo-block--definition { margin: 28px 0 32px; padding: 18px 16px; }
  .route-seo-block--definition .route-seo-block__title { font-size: 18px; }
  .route-seo-block__lead { font-size: 14px; }
  .route-seo-block__disclaimer { font-size: 12.5px; padding: 10px 12px; }
}

/* ── 홈 메인 카드 그림자 제거 (플랫 디자인) ──
   2026-06-22 — 홈(#page-home) 카드들의 드롭 섀도우(resting + hover) 제거.
   테두리/호버 이동 효과는 유지. 다른 페이지의 동일 카드 컴포넌트(목록 등)에는 영향 없음. */
#page-home .col-card,
#page-home .col-card:hover,
#page-home .doctor-card,
#page-home .doctor-card:hover,
#page-home .wiki-card,
#page-home .wiki-card:hover,
#page-home .home-support__card,
#page-home .home-support__card:hover,
#page-home .doctor-card-hero,
#page-home .doctor-card-hero:hover,
#page-home .doctor-card-hero:focus-visible {
  box-shadow: none;
}

/* 홈 SSR fallback 칼럼 카드는 실제 .col-card 와 동일 마크업으로 출력하므로
   별도 SSR 카드 스타일 불필요(위 .col-card 규칙 재사용). */

/* ─── HOME · 고객지원 섹션 리디자인 (sup-/contact- 네임스페이스) ───
   래퍼는 기존 .section--support 유지. 그라데이션 없음(솔리드만), 카드/버튼 box-shadow 없음
   (구분은 border 색 + translateY). .contact-dot 글로우만 예외(응답상태 점). */
.sup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 24px; }
.sup-head__titles { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 0; }
.sup-head__photo { flex: none; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; object-position: center top; border: 1px solid #e6eaf0; }
.sup-head__text { min-width: 0; }
.sup-heading { font-size: 26px; font-weight: 800; color: #0b1f3a; line-height: 1.2; margin: 0; }
.sup-subtitle { font-size: 14px; color: #64748b; margin: 6px 0 0; word-break: keep-all; }
/* 고객지원 전체보기 — 다른 섹션과 동일하게 .link-more 사용. 우측 정렬 + 좁으면 아래-우측 줄바꿈(섹션 헤더와 동일 배치). */
.sup-head > .link-more { flex: 0 0 auto; margin-left: auto; align-self: center; }

.sup-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,0.9fr); gap: 20px; }

.sup-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6eaf0; border-radius: 16px; padding: 28px; transition: transform var(--transition), border-color var(--transition); }
.sup-card:hover { border-color: #1a5fb4; transform: translateY(-2px); }
.sup-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sup-icon { width: 46px; height: 46px; border-radius: 12px; background: #eef4fc; color: #1a5fb4; display: grid; place-items: center; flex-shrink: 0; }
.sup-title { font-size: 17px; font-weight: 800; color: #0b1f3a; line-height: 1.3; }
.sup-title small { display: block; font-size: 12px; font-weight: 500; color: #94a3b8; margin-top: 2px; }

.sup-list { list-style: none; margin: 0; padding: 0; }
.sup-list li { padding: 12px 0; border-bottom: 1px solid #eef1f5; }
.sup-list li:last-child { border-bottom: none; }
.sup-list a { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; text-decoration: none; }
.sup-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: #eef4fc; color: #1a5fb4; white-space: nowrap; }
.sup-badge--new { background: #fee2e2; color: #dc2626; }
.sup-q { flex: 1; min-width: 0; font-size: 14px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--transition); }
.sup-list a:hover .sup-q { color: #1a5fb4; }
.sup-date { flex-shrink: 0; font-size: 12px; color: #94a3b8; }
.sup-empty { font-size: 14px; color: #64748b; padding: 16px 0; }
.sup-foot { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 700; color: #1a5fb4; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* 1:1 문의 — 사이트 톤 브랜드 블루 단색(히어로와 동일 var(--primary)). 그라데이션·box-shadow 없음 */
.sup-card--contact { background: var(--primary); border: none; color: #fff; }
.sup-card--contact .sup-icon { background: rgba(255,255,255,.18); color: #fff; }
.sup-card--contact .sup-title { color: #fff; }
.sup-desc { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.9); margin: 0 0 auto; }
.contact-cta { margin-top: 22px; height: 48px; border-radius: 11px; background: #fff; color: var(--primary); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: background var(--transition); }
.contact-cta:hover { background: #eef4fc; }
.contact-stat { margin-top: 16px; display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.88); }
.contact-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); flex-shrink: 0; }

@media (max-width: 1024px) {
  .sup-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .sup-card--contact { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
  .sup-card--contact .sup-top { flex: 1; margin-bottom: 0; }
  .sup-desc { width: 100%; margin: 0 0 6px; }
  .contact-cta { width: 240px; margin-top: 0; }
  .contact-stat { width: 100%; margin-top: 0; }
}
@media (max-width: 600px) {
  .sup-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .sup-card { padding: 22px 18px; }
  .sup-card--contact { flex-direction: column; align-items: stretch; }
  .sup-card--contact .contact-cta { width: 100%; margin-top: 18px; }
}
@media (max-width: 480px) {
  /* 작은 폰: 헤더에 [사진+전체보기]가 가로폭을 다 먹어 sub 텍스트가 좁은 칸에 무너지던 것 →
     타이틀 블록을 전체폭으로(전체보기는 아래 줄 우측으로 내림) 사진+제목/sub 가 넉넉히 표시. */
  .sup-head__titles { flex: 1 1 100%; }
  .sup-head > .link-more { margin-top: 2px; }
}

/* ─── HOME · 메디컬/웰니스 리더 카드 리디자인 (leader-/recruit- 네임스페이스) ───
   기존 .doctor-grid5(5→1100:3→768:2열) 안에 들어가는 홈 전용 카드. 평점 미표시(의료법 56조).
   그라데이션 없음, 카드 box-shadow 없음(구분=border 색+translateY). 웰니스=그린 pill. */
.leader-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid #e6eaf0; border-radius: 16px;
  padding: 22px 16px; min-width: 0; text-decoration: none; color: inherit;
  transition: transform var(--transition), border-color var(--transition);
}
.leader-card:hover { border-color: #1a5fb4; transform: translateY(-2px); }
.leader-card--well:hover { border-color: #1a5fb4; }
.leader-badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  background: #fef3c7; color: #b45309; line-height: 1.2;
}
.leader-badge--well { background: #fef3c7; color: #b45309; }
.leader-card__media { margin: 4px 0 14px; }
.leader-card__img {
  width: 84px; height: 84px; border-radius: 16px; object-fit: cover;
  background: var(--muted); border: 1px solid #e6eaf0;
}
.leader-card__img--placeholder { display: grid; place-items: center; color: #94a3b8; font-size: 12px; font-weight: 700; }
.leader-card__name { font-size: 15px; font-weight: 800; color: #0b1f3a; line-height: 1.3; margin-bottom: 8px; max-width: 100%; overflow-wrap: anywhere; }
.leader-card__role { font-size: 12px; font-weight: 600; color: #64748b; }
.leader-spec {
  display: inline-block; max-width: 100%;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: #eef4fc; color: #1a5fb4; margin-bottom: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leader-spec.well { background: #eef4fc; color: #1a5fb4; }
.leader-card__org { max-width: 100%; font-size: 12px; color: #64748b; line-height: 1.4; margin-bottom: 12px; word-break: keep-all; overflow-wrap: anywhere; }
.leader-card__counts {
  margin-top: auto; width: 100%; padding-top: 12px;
  display: flex; justify-content: center; gap: 14px;
  border-top: 1px solid #eef1f5; font-size: 12px; color: #475569;
}
.leader-card__counts span { white-space: nowrap; }

/* 모집(빈 칸 채움) 카드 — 점선 placeholder(비클릭). box-shadow 없음 */
.recruit-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: #f7f9fc; border: 1px dashed #d8e2ee; border-radius: 16px;
  padding: 22px 16px; min-width: 0;
}
.recruit-card__plus {
  width: 40px; height: 40px; border-radius: 12px;
  background: #eef4fc; color: #1a5fb4;
  display: grid; place-items: center; font-size: 24px; line-height: 1; margin-bottom: 12px;
}
.recruit-card--well .recruit-card__plus { background: #eef4fc; color: #1a5fb4; }
.recruit-card__title { font-size: 13.5px; font-weight: 800; color: #0b1f3a; margin-bottom: 6px; }
.recruit-card__sub { font-size: 12px; color: #94a3b8; line-height: 1.5; }

@media (max-width: 600px) {
  .leader-card { padding: 18px 12px; }
  .leader-card__media { margin: 2px 0 12px; }
  .leader-card__img { width: 72px; height: 72px; }
  .recruit-card { padding: 18px 12px; }
}

/* ─── HOME · 위닥스톡 섹션 리디자인 (ask-bar / qa- 네임스페이스) ───
   래퍼는 기존 .section--muted 유지(섹션 패딩·헤더·link-more 그대로 = 다른 섹션과 통일).
   그라데이션 없음(솔리드만) · 카드/버튼 box-shadow 없음(구분은 border 색 + translateY).
   컬러는 테마 토큰 재사용(홈은 body.home 에서 파랑 계열). 카테고리·상태 뱃지는 위닥스톡 페이지와 동일 톤(slate/blue). */

/* 컴팩트 입력바 — a 로 전체가 질문 작성 페이지 링크(내부 버튼은 span, 중첩 인터랙티브 회피) */
.ask-bar {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 14px 16px 14px 22px; margin-bottom: 30px;
  text-decoration: none; color: inherit;
  transition: border-color var(--transition);
}
.ask-bar:hover { border-color: var(--primary); }
.ask-bar-text { flex: 1 1 auto; min-width: 0; }
.ask-bar-text .t { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.ask-bar-text .s { display: block; font-size: 13px; color: #94a3b8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-bar-tags { display: flex; gap: 7px; flex-shrink: 0; }
.ask-bar-tag { font-size: 12px; font-weight: 600; color: var(--primary); background: var(--primary-light); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.ask-bar-btn { flex-shrink: 0; height: 46px; padding: 0 24px; border-radius: 11px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: background-color var(--transition); }
.ask-bar:hover .ask-bar-btn { background: var(--primary-dark); }

/* 최근 질문 리스트 — 라벨 + 전체보기 링크를 한 줄(라벨 좌 / 링크 우) */
.talk-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.talk-list-label { font-size: 14px; font-weight: 700; color: var(--text-sub); }

.qa-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; min-width: 0; }
.qa-row { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; min-width: 0; transition: border-color var(--transition), transform var(--transition); }
.qa-row:hover { border-color: var(--primary); transform: translateY(-2px); }
/* stretched-link — .more 앵커가 카드 전체를 덮어 어디를 눌러도 상세로 이동 */
.qa-row-foot .more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.qa-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
/* 카테고리·상태 뱃지 = 위닥스톡(wiki-list-card) 페이지와 동일 톤: 무채색(slate) + 답변완료만 블루. 알록달록 지양. */
.qa-cat { font-size: 11px; font-weight: 800; color: #475569; background: #f1f5f9; border: 1px solid #cbd5e1; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.qa-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.qa-status.answered { color: #1d4ed8; background: #eff6ff; }
.qa-status.answered .dot { background: #3b82f6; }
.qa-status.waiting  { color: #64748b; background: #f1f5f9; }
.qa-status.waiting  .dot { background: #94a3b8; }
.qa-status .dot { width: 5px; height: 5px; border-radius: 50%; }
.qa-time { margin-left: auto; font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.qa-row-q { display: flex; gap: 11px; align-items: flex-start; }
.qa-mark { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.qa-text { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.5; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qa-row-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--muted); font-size: 12px; color: #94a3b8; }
.qa-row-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.qa-row-foot .more { position: relative; z-index: 2; margin-left: auto; font-weight: 700; color: var(--primary); text-decoration: none; white-space: nowrap; }

/* 질문 0개(JS 가 비우거나 SSR 결과 없음)일 때 빈 그리드·라벨 숨김(:has 미지원 브라우저는 라벨만 노출 — 무해) */
.qa-list:empty { display: none; }
.talk-list-head:has(+ .qa-list:empty) { display: none; }

/* 태블릿 — 입력바 줄바꿈(태그는 아래 한 줄), 리스트는 2열 유지 */
@media (max-width: 820px) {
  .ask-bar { flex-wrap: wrap; gap: 12px; }
  .ask-bar-tags { order: 3; width: 100%; }
  .ask-bar-btn { order: 2; }
}
/* 모바일 — 입력바 세로 스택, 버튼 풀폭, 리스트 1열, 시각 숨김 */
@media (max-width: 600px) {
  .ask-bar { padding: 16px; align-items: stretch; flex-direction: column; }
  .ask-bar-text .s { white-space: normal; }
  .ask-bar-tags { order: 2; flex-wrap: wrap; }
  .ask-bar-btn { order: 3; width: 100%; justify-content: center; height: 48px; }
  .qa-list { grid-template-columns: minmax(0, 1fr); }
  .qa-time { display: none; }
}