/* css/knowledge-category.css — 지식 카테고리 화면(보장분석 6축 뷰 #v-axis-*) 전용 스코프 CSS
   근거: docs/specs/knowledge_category_layout_v2.md 부록 B(폰트 확정값 — 원문 §8보다 우선) + §9-2 스타일규칙

   ★ 스코프 원칙 — 이 파일은 #v-axis-* 6개 뷰 밖으로 새지 않는다.
     · 공용 `.tabs/.tab/.chips/.chip`(css/app-views.css:906~)을 재사용하되, 기본값이
       `.tab`=13px(0.8125rem) · `.chip`=var(--ts-meta)라 카테고리 화면 확정값(탭 16px·칩 14px)과
       다르다. 그래서 6개 뷰 id를 앞에 붙여 특이성 1,1,0으로 오버라이드한다.
       ⚠️ id 6개를 나열하는 이유 = 이 <link>가 app-views.css보다 앞에 실려도 이겨야 하기 때문.
          클래스 특이성(0,1,0)으로 쓰면 로드 순서에 따라 13px로 되돌아간다.
     · 그 외 `kc-` 접두 클래스는 이 화면에만 존재(전 리포지토리 충돌 0건 확인)하므로 스코프 불필요.
   ★ 색은 토큰 변수만(--ac/--tp/--ts/--tf/--bd/--s1/--s2). 하드코딩 색 금지 → 다크모드 자동 정합.
   ★ 14.5px 금지(스펙 §13 폐기값). 읽는 문장은 16px 기본.
   ★ 카드 박스 금지(§9-2) — 행 + 얇은 구분선, hover 시에만 배경. */

/* ── 루트 ─────────────────────────────────────────────
   전체 화면 스크롤(대표 지시 2026-07-27): 검색기·탭을 상단 고정하고 목록만 내부 스크롤하던 방식을
   폐지 → 뷰 전체가 한 덩어리로 스크롤(검색기·탭도 함께 위로 밀림). 그래서 뷰 자체에 overflow-y:auto.
   flex 컬럼은 유지한다 — 검색 모드(.kc-searchslot:has(.searching){flex:1})가 남은 세로를 채우려면
   부모가 flex 컬럼이어야 하기 때문. `.view.on{display:block}`(0,2,0)을 이기려면 id 특이성이 필요하다. */
#v-axis-medical.on,#v-axis-cancer.on,#v-axis-brainheart.on,
#v-axis-surgery.on,#v-axis-caregiver.on,#v-axis-etc.on{
  display:flex;flex-direction:column;min-height:0;overflow-y:auto;
}

/* ── A안 중앙 정렬(대표 확정, 2026-07-24) ── 근거: docs/specs/knowledge_category_alignment_fix_v1.md §1-1 + 부록.
   콘텐츠 블록(.kc-top/.kc-tabs/.kc-chips/.kc-scroll = #v-axis-* 직계 자식 4개) 각각을
   max-width:1010px로 캡핑하고 좌우 margin:auto로 화면 중앙에 놓는다(710 본문 + 40 간격 + 260 우측 레일 자리).
   읽는 본문 .kc-body(710px, 아래)는 이 규칙과 무관 — 그대로 1010px 블록 안에서 좌측 정렬 유지.
   우측 260px은 지금 비워둔다(레일 추가 시 본문이 안 흔들리게 하기 위함, §1-1 참고 원문). */
#v-axis-medical .kc-top,#v-axis-cancer .kc-top,#v-axis-brainheart .kc-top,
#v-axis-surgery .kc-top,#v-axis-caregiver .kc-top,#v-axis-etc .kc-top,
#v-axis-medical .kc-tabs,#v-axis-cancer .kc-tabs,#v-axis-brainheart .kc-tabs,
#v-axis-surgery .kc-tabs,#v-axis-caregiver .kc-tabs,#v-axis-etc .kc-tabs,
#v-axis-medical .kc-chips,#v-axis-cancer .kc-chips,#v-axis-brainheart .kc-chips,
#v-axis-surgery .kc-chips,#v-axis-caregiver .kc-chips,#v-axis-etc .kc-chips,
#v-axis-medical .kc-scroll,#v-axis-cancer .kc-scroll,#v-axis-brainheart .kc-scroll,
#v-axis-surgery .kc-scroll,#v-axis-caregiver .kc-scroll,#v-axis-etc .kc-scroll,
#v-axis-medical .kc-searchslot,#v-axis-cancer .kc-searchslot,#v-axis-brainheart .kc-searchslot,
#v-axis-surgery .kc-searchslot,#v-axis-caregiver .kc-searchslot,#v-axis-etc .kc-searchslot{
  width:100%;max-width:1010px;margin-left:auto;margin-right:auto;align-self:center;
}

/* ── 상단 검색 슬롯(대표 지시, 2026-07-24) — 홈 #homeSearch를 그대로 이동해 재사용한다(새 검색기 아님).
   앱바 아래·'‹ 홈으로'/탭 위(.kc-top보다 앞서 렌더). 이동/복귀는 js/knowledge-category.js
   _kcHomeSearchMove/_kcHomeSearchRestore가 담당(app.html showView 연동) — 이 CSS는 표시만 다룬다.
   ⚠️ 셀렉터는 전부 "#v-axis-* .kc-searchslot ..." 스코프로만 작성한다. #homeSearch/.hs-* /
   body.is-uat-homesearch2 같은 홈 전역·홈 컨텍스트 규칙은 절대 건드리지 않는다(건드리면 홈 회귀).
   id 특이성이 필요한 이유는 위 §"루트" 주석과 동일 — 이 파일이 app-views.css/인라인 <style>보다
   앞서 실려도, 클래스만으로는(0,2,0) 인라인 <style>의 body.is-uat-homesearch2 규칙(0,2,0 동률→소스
   순서상 인라인이 나중이라 그쪽이 이김)을 못 이긴다. */
#v-axis-medical .kc-searchslot{margin-bottom:14px;flex-shrink:0;position:relative;}
#v-axis-cancer .kc-searchslot{margin-bottom:14px;flex-shrink:0;position:relative;}
#v-axis-brainheart .kc-searchslot{margin-bottom:14px;flex-shrink:0;position:relative;}
#v-axis-surgery .kc-searchslot{margin-bottom:14px;flex-shrink:0;position:relative;}
#v-axis-caregiver .kc-searchslot{margin-bottom:14px;flex-shrink:0;position:relative;}
#v-axis-etc .kc-searchslot{margin-bottom:14px;flex-shrink:0;position:relative;}
/* 홈 버튼('홈') = 검색 박스(hs-box 640 중앙) 바로 왼쪽에 붙인다(대표 재지시 2026-07-24: 슬롯 왼쪽 끝이 아니라 검색박스에 가깝게).
   검색 박스 왼쪽 가장자리 = 슬롯중앙 - 320px. 홈 버튼(폭 ~38)을 그 왼쪽 12px 간격에 두려면 left = 50% - (320+12+38) = 50% - 370px.
   검색 중(.searching)엔 검색 박스가 세로로 커지므로 top 고정(상단 정렬)로 검색 입력줄 높이에 맞춘다. */
#v-axis-medical .kc-searchslot > .kc-back,#v-axis-cancer .kc-searchslot > .kc-back,#v-axis-brainheart .kc-searchslot > .kc-back,
#v-axis-surgery .kc-searchslot > .kc-back,#v-axis-caregiver .kc-searchslot > .kc-back,#v-axis-etc .kc-searchslot > .kc-back{
  position:absolute;left:calc(50% - 370px);top:9px;z-index:2;
}
@media(max-width:640px){
  /* 모바일 = 검색 박스가 전체 폭이라 좌측 absolute면 겹친다 → 검색 박스 위 정적 배치(좌측) */
  #v-axis-medical .kc-searchslot > .kc-back,#v-axis-cancer .kc-searchslot > .kc-back,#v-axis-brainheart .kc-searchslot > .kc-back,
  #v-axis-surgery .kc-searchslot > .kc-back,#v-axis-caregiver .kc-searchslot > .kc-back,#v-axis-etc .kc-searchslot > .kc-back{
    position:static;margin:0 0 10px 16px;
  }
}
/* 검색 중(.searching)엔 슬롯이 남은 세로 공간을 차지해 결과가 제대로 보이게 한다(탭·목록은 가려도 무방 — 홈과 동일 UX) */
#v-axis-medical .kc-searchslot:has(#homeSearch.searching),
#v-axis-cancer .kc-searchslot:has(#homeSearch.searching),
#v-axis-brainheart .kc-searchslot:has(#homeSearch.searching),
#v-axis-surgery .kc-searchslot:has(#homeSearch.searching),
#v-axis-caregiver .kc-searchslot:has(#homeSearch.searching),
#v-axis-etc .kc-searchslot:has(#homeSearch.searching){
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
/* 홈 전용 잉여(태그라인·헤드·철학문구·보조문구·hub 타일) 숨김 — 검색 박스·자동완성·결과·최근검색만 노출 */
#v-axis-medical .kc-searchslot .hs2-tagline,#v-axis-cancer .kc-searchslot .hs2-tagline,#v-axis-brainheart .kc-searchslot .hs2-tagline,
#v-axis-surgery .kc-searchslot .hs2-tagline,#v-axis-caregiver .kc-searchslot .hs2-tagline,#v-axis-etc .kc-searchslot .hs2-tagline,
#v-axis-medical .kc-searchslot .hs-head,#v-axis-cancer .kc-searchslot .hs-head,#v-axis-brainheart .kc-searchslot .hs-head,
#v-axis-surgery .kc-searchslot .hs-head,#v-axis-caregiver .kc-searchslot .hs-head,#v-axis-etc .kc-searchslot .hs-head,
#v-axis-medical .kc-searchslot .hs-philo,#v-axis-cancer .kc-searchslot .hs-philo,#v-axis-brainheart .kc-searchslot .hs-philo,
#v-axis-surgery .kc-searchslot .hs-philo,#v-axis-caregiver .kc-searchslot .hs-philo,#v-axis-etc .kc-searchslot .hs-philo,
#v-axis-medical .kc-searchslot .hs-sub,#v-axis-cancer .kc-searchslot .hs-sub,#v-axis-brainheart .kc-searchslot .hs-sub,
#v-axis-surgery .kc-searchslot .hs-sub,#v-axis-caregiver .kc-searchslot .hs-sub,#v-axis-etc .kc-searchslot .hs-sub,
#v-axis-medical .kc-searchslot .hs2-hub,#v-axis-cancer .kc-searchslot .hs2-hub,#v-axis-brainheart .kc-searchslot .hs2-hub,
#v-axis-surgery .kc-searchslot .hs2-hub,#v-axis-caregiver .kc-searchslot .hs2-hub,#v-axis-etc .kc-searchslot .hs2-hub{
  display:none;
}
/* 검색창 폭 — 데스크톱 560~680 범위 내 640 중앙(대표 확정 수치) */
#v-axis-medical .kc-searchslot .hs-wrap,#v-axis-cancer .kc-searchslot .hs-wrap,#v-axis-brainheart .kc-searchslot .hs-wrap,
#v-axis-surgery .kc-searchslot .hs-wrap,#v-axis-caregiver .kc-searchslot .hs-wrap,#v-axis-etc .kc-searchslot .hs-wrap{
  max-width:none;margin:0;padding:0;
}
#v-axis-medical .kc-searchslot .hs-box,#v-axis-cancer .kc-searchslot .hs-box,#v-axis-brainheart .kc-searchslot .hs-box,
#v-axis-surgery .kc-searchslot .hs-box,#v-axis-caregiver .kc-searchslot .hs-box,#v-axis-etc .kc-searchslot .hs-box{
  max-width:640px;margin:0 auto;
}
/* 모바일 — 좌우 여백만 둔 전체 폭 */
@media(max-width:640px){
  #v-axis-medical .kc-searchslot .hs-box,#v-axis-cancer .kc-searchslot .hs-box,#v-axis-brainheart .kc-searchslot .hs-box,
  #v-axis-surgery .kc-searchslot .hs-box,#v-axis-caregiver .kc-searchslot .hs-box,#v-axis-etc .kc-searchslot .hs-box{
    max-width:none;margin:0 16px;
  }
}

/* ── 홈 복귀(§4-3 — 탭이 있어도 '‹ 홈으로'는 유지) ── */
.kc-top{flex-shrink:0;margin-bottom:10px;}
.kc-back{
  background:none;border:0.5px solid var(--bd);border-radius:var(--radius-sm);
  color:var(--ts);font-family:inherit;font-size:14px;font-weight:700;  /* 13→14px 교정(2026-07-24 대표 승인): 확정 표에 없던 값이라 칩(14px)보다 작아 위계가 어긋났음. 이동 버튼이므로 읽는 문장 16px이 아니라 칩과 같은 UI 컨트롤 단(14px)에 맞춘다. */
  padding:6px 12px;cursor:pointer;
}
.kc-back:hover{background:var(--s2);color:var(--tp);}

/* ── 탭(카테고리 전환) — 확정 16px / 600, 활성 800 ── */
#v-axis-medical .kc-tabs,#v-axis-cancer .kc-tabs,#v-axis-brainheart .kc-tabs,
#v-axis-surgery .kc-tabs,#v-axis-caregiver .kc-tabs,#v-axis-etc .kc-tabs{
  flex-shrink:0;scrollbar-width:none;   /* 좁은 화면 가로 스크롤(§9-2), 스크롤바 숨김 */
}
#v-axis-medical .kc-tabs::-webkit-scrollbar,#v-axis-cancer .kc-tabs::-webkit-scrollbar,
#v-axis-brainheart .kc-tabs::-webkit-scrollbar,#v-axis-surgery .kc-tabs::-webkit-scrollbar,
#v-axis-caregiver .kc-tabs::-webkit-scrollbar,#v-axis-etc .kc-tabs::-webkit-scrollbar{display:none;}

#v-axis-medical .kc-tabs .tab,#v-axis-cancer .kc-tabs .tab,#v-axis-brainheart .kc-tabs .tab,
#v-axis-surgery .kc-tabs .tab,#v-axis-caregiver .kc-tabs .tab,#v-axis-etc .kc-tabs .tab{
  font-size:16px;font-weight:600;gap:5px;
}
#v-axis-medical .kc-tabs .tab.on,#v-axis-cancer .kc-tabs .tab.on,#v-axis-brainheart .kc-tabs .tab.on,
#v-axis-surgery .kc-tabs .tab.on,#v-axis-caregiver .kc-tabs .tab.on,#v-axis-etc .kc-tabs .tab.on{
  font-weight:800;
}

/* ── 칩(그룹) — 확정 14px / 700. 그룹 없으면 줄 자체를 감춘다(§4-2) ── */
#v-axis-medical .kc-chips:empty,#v-axis-cancer .kc-chips:empty,#v-axis-brainheart .kc-chips:empty,
#v-axis-surgery .kc-chips:empty,#v-axis-caregiver .kc-chips:empty,#v-axis-etc .kc-chips:empty{
  display:none;
}
#v-axis-medical .kc-chips .chip,#v-axis-cancer .kc-chips .chip,#v-axis-brainheart .kc-chips .chip,
#v-axis-surgery .kc-chips .chip,#v-axis-caregiver .kc-chips .chip,#v-axis-etc .kc-chips .chip{
  font-size:14px;font-weight:700;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;gap:5px;
}

/* 탭·칩 뒤 건수 = 캡션 11.5px (읽는 문장 아님) */
.kc-n{font-size:11.5px;font-weight:700;color:var(--tf);font-variant-numeric:tabular-nums;}
#v-axis-medical .kc-tabs .tab.on .kc-n,#v-axis-cancer .kc-tabs .tab.on .kc-n,
#v-axis-brainheart .kc-tabs .tab.on .kc-n,#v-axis-surgery .kc-tabs .tab.on .kc-n,
#v-axis-caregiver .kc-tabs .tab.on .kc-n,#v-axis-etc .kc-tabs .tab.on .kc-n{color:var(--ac);}
#v-axis-medical .kc-chips .chip.on .kc-n,#v-axis-cancer .kc-chips .chip.on .kc-n,
#v-axis-brainheart .kc-chips .chip.on .kc-n,#v-axis-surgery .kc-chips .chip.on .kc-n,
#v-axis-caregiver .kc-chips .chip.on .kc-n,#v-axis-etc .kc-chips .chip.on .kc-n{color:#fff;}

/* ── 본문 영역 + 읽는 본문 폭 710px / 행간 1.85 ──
   전체 화면 스크롤(대표 지시 2026-07-27): 내부 스크롤(flex:1;overflow-y:auto)을 해제해 뷰 전체와 함께 흐르게 한다.
   ⚠️ 검색 모드에선 .kc-searchslot:has(.searching)가 flex:1로 채우므로 이 블록은 자연 높이여도 무방. */
.kc-scroll{padding-bottom:24px;}
.kc-body{max-width:710px;line-height:1.85;}

/* ── 카테고리 헤더 ── */
.kc-kicker{font-size:11.5px;font-weight:800;letter-spacing:0.06em;color:var(--ac);line-height:1.4;}
.kc-h1{font-size:27px;font-weight:800;color:var(--tp);margin:4px 0 6px;line-height:1.35;}
.kc-hook{font-size:16px;font-weight:400;color:var(--ts);}
.kc-count{font-size:13px;color:var(--tf);margin-top:8px;font-variant-numeric:tabular-nums;}
.kc-rule{height:2px;background:var(--tp);opacity:0.85;margin:12px 0 0;border-radius:1px;}

/* ── 문서 목록 — 카드 박스 금지. 행 + 얇은 구분선, hover에만 배경(§9-2) ── */
.kc-list{display:block;}
.kc-doc{
  display:block;text-decoration:none;color:inherit;
  padding:16px 12px;margin:0 -12px;border-bottom:0.5px solid var(--bd);
  border-radius:var(--radius-sm);transition:background .12s;
}
.kc-doc:hover{background:var(--s2);}
.kc-doc-t{font-size:19px;font-weight:800;color:var(--tp);line-height:1.45;}
.kc-doc-d{font-size:16px;font-weight:400;color:var(--ts);margin-top:2px;}  /* 읽는 문장 — 목록이라고 줄이지 않는다 */
.kc-doc-m{font-size:12.5px;color:var(--tf);margin-top:4px;line-height:1.5;}
.kc-badge{
  display:inline-block;vertical-align:middle;margin-left:7px;
  font-size:10.5px;font-weight:800;line-height:1.6;
  padding:1px 7px;border-radius:var(--radius-sm);
  background:var(--s2);border:0.5px solid var(--bd);color:var(--tf);
}

/* ── 변천사 문서 = D영역 인라인 펼침 — 정적 공개본과 동일 레이아웃(본문 + 우측 레일) ──
   대표 확정 2026-07-26: 로그인 SPA에서 문서 제목 클릭 → 같은 D영역에 본문+우측 레일 인라인 펼침.
   레이아웃 = 공개본 kc-shell(kc-body 1010 + doc-grid 710 본문 + 244 레일)과 동일.
   대상 축 = 의료실비(실손)·암·간병. 공개본은 무접촉 — 여기 스타일은 SPA 카테고리 뷰 전용. */
.kc-doc-inline{cursor:pointer;}
.kc-doc-inline:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:var(--radius-sm);}
.kc-toggle{font-size:12.5px;font-weight:700;color:var(--ac);margin-left:8px;white-space:nowrap;}
.kc-doc-open{background:var(--s2);}
.doc-inline{padding:6px 0 4px;}
/* 5세대 심층 안 4열 표(.tbl-wrap)는 좁은 본문에서 자체 가로 스크롤(공개본 .doc-body .tbl-wrap과 동일 처리) */
.doc-inline .tbl-wrap{overflow-x:auto;}

/* 펼침 시 본문+레일 수용 = 인라인 대상 축(의료실비·암·간병)의 kc-body만 1010으로 확장(헤더·문서행은 710 유지·좌측 정렬).
   예약된 우측 레일 공간(1010=710+40+260 자리)을 펼침 때 활용. 그 외 축(뇌심장·수술비·기타)은 기존 710 그대로(무영향).
   공개본 kc-shell과 동일 전략(정적본 인라인 CSS line 234-244 대응). */
#v-axis-medical .kc-body,#v-axis-cancer .kc-body,#v-axis-caregiver .kc-body{max-width:1010px;}
#v-axis-medical .kc-kicker,#v-axis-medical .kc-h1,#v-axis-medical .kc-hook,
#v-axis-medical .kc-count,#v-axis-medical .kc-rule,#v-axis-medical .kc-doc,#v-axis-medical .kc-doc-inline,
#v-axis-cancer .kc-kicker,#v-axis-cancer .kc-h1,#v-axis-cancer .kc-hook,
#v-axis-cancer .kc-count,#v-axis-cancer .kc-rule,#v-axis-cancer .kc-doc,#v-axis-cancer .kc-doc-inline,
#v-axis-caregiver .kc-kicker,#v-axis-caregiver .kc-h1,#v-axis-caregiver .kc-hook,
#v-axis-caregiver .kc-count,#v-axis-caregiver .kc-rule,#v-axis-caregiver .kc-doc,#v-axis-caregiver .kc-doc-inline{max-width:710px;}

/* 본문(710) + 우측 레일(244) — 넓은 화면(≥1120)에서만 2단. 좁으면 레일 감춤(공개본과 동일: 정보는 본문에 다 있음). */
.doc-inline-grid{display:block;}
@media(min-width:1120px){
  .doc-inline-grid{display:grid;grid-template-columns:710px 244px;gap:32px;align-items:start;}
  .doc-inline-grid .doc-body{min-width:0;}
  .doc-inline-side{display:block;position:sticky;top:24px;align-self:start;}
}
@media(max-width:1119px){.doc-inline-side{display:none;}}

/* 우측 레일 톤(#v3side 이식, SPA 토큰). 목차 · 이 자료 활용(PDF·링크 복사) · 함께 보면 좋은 자료
   + advisor-doc.js가 '목차' 블록 바로 아래 삽입하는 '설계사 전용' 섹션까지 공용(.act button 톤 동일). */
.doc-inline-side .blk{margin-bottom:26px;}
.doc-inline-side .blk:empty{display:none;}
.doc-inline-side .lb{display:block;position:static;inset:auto;background:none;z-index:auto;font-size:12px;font-weight:700;letter-spacing:1.2px;color:var(--tf);margin-bottom:10px;text-transform:uppercase;}
.doc-inline-side .toc a{display:block;padding:7px 0 7px 13px;border-left:2px solid var(--bd);font-size:14px;color:var(--tf);text-decoration:none;line-height:1.45;transition:color .15s,border-color .15s;}
.doc-inline-side .toc a:hover{color:var(--tp);}
.doc-inline-side .toc a.on{color:var(--ac);border-left-color:var(--ac);font-weight:700;}
.doc-inline-side .act{display:flex;flex-direction:column;gap:7px;}
.doc-inline-side .act button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:0.5px solid var(--bd);background:var(--s1);border-radius:9px;font-family:inherit;font-size:14px;font-weight:700;color:var(--tp);cursor:pointer;text-align:left;transition:border-color .15s,background .15s;}
.doc-inline-side .act button:hover{border-color:var(--ac);background:var(--s2);}
.doc-inline-side .act button .i{font-size:14px;flex:0 0 auto;}
.doc-inline-side .rel a{display:block;padding:10px 12px;border:0.5px solid var(--bd);border-radius:9px;margin-bottom:7px;text-decoration:none;transition:border-color .15s;}
.doc-inline-side .rel a:hover{border-color:var(--ac);}
.doc-inline-side .rel b{display:block;font-size:14px;font-weight:700;color:var(--tp);line-height:1.4;}
.doc-inline-side .rel span{display:block;font-size:13px;color:var(--tf);margin-top:3px;}

/* ── 빈 카테고리(§9-3) — "준비 중" 한 줄로 끝내지 않는다 ── */
.kc-empty{padding:34px 0 10px;}
.kc-empty-t{font-size:19px;font-weight:800;color:var(--tp);line-height:1.45;}
.kc-empty-d{font-size:16px;font-weight:400;color:var(--ts);margin-top:4px;}

@media (max-width:640px){
  .kc-h1{font-size:23px;}   /* V3 모바일 스케일(부록 B). 읽는 문장 16px는 그대로 유지 */
}