/* ============================================================================
 * dark-buttons.css — 다크 4테마 전용 버튼 스타일 (배경 채움 금지 · 밝은 경계 · 형광 글자)
 *
 *  적용 대상 테마: midnight · ocean · forest · darkplus
 *  적용 페이지   : 임상 계산기·평가도구 전 페이지 (허브 포함)
 *
 *  배경: 계산기/척도 페이지의 버튼 상당수가 라이트 기준 그라디언트 채움
 *        (예: .calc-btn = linear-gradient(#4338ca,#6366f1))이라 다크 테마에서
 *        배경만 밝게 떠 보였다. 다크에서는 **채움을 없애고** 밝은 경계선 +
 *        형광 글자(text-shadow glow)로 대비를 만든다. 판독열람 화면과 동일 언어.
 *
 *  선택 상태(.active/.on/.selected)는 채움 대신 **10~14% 틴트 + 강한 글로우**로 표시.
 *  (완전 무배경이면 선택 여부가 보이지 않아 척도 문항에서 오답 입력 위험)
 *
 *  ⚠️ 라이트 4테마(pastel·sakura·mint·butter)는 손대지 않는다.
 *  ⚠️ 페이지 인라인 <style> 뒤(</head> 직전)에 링크해야 우선순위가 잡힌다.
 * ==========================================================================*/

/* ── 테마별 강조색 ─────────────────────────────────────────────── */
[data-theme="midnight"]{
  --dkb-line:#2C4A4E; --dkb-line-lit:#3E6B6F;
  --dkb-accent:#2DD4BF; --dkb-accent-lit:#7FF0E0; --dkb-glow:45,212,191;
}
[data-theme="ocean"]{
  --dkb-line:#284260; --dkb-line-lit:#3A6390;
  --dkb-accent:#38BDF8; --dkb-accent-lit:#8AD8FF; --dkb-glow:56,189,248;
}
[data-theme="forest"]{
  --dkb-line:#264A3C; --dkb-line-lit:#376B57;
  --dkb-accent:#34D399; --dkb-accent-lit:#86EFC4; --dkb-glow:52,211,153;
}
[data-theme="darkplus"]{
  --dkb-line:#3C3C3C; --dkb-line-lit:#5A5A5A;
  --dkb-accent:#4FC1FF; --dkb-accent-lit:#9BDCFF; --dkb-glow:79,193,255;
}

/* 기능별 형광색 — 4테마 공통 (VS Code Dark 계열) */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"]){
  --dkb-amber:#DCDCAA;  --dkb-amber-g:220,220,170;   /* 초기화·저장 */
  --dkb-orange:#CE9178; --dkb-orange-g:206,145,120;  /* 인쇄·다운로드 */
  --dkb-violet:#C586C0; --dkb-violet-g:197,134,192;  /* AI·번역 */
  --dkb-green:#4EC9B0;  --dkb-green-g:78,201,176;    /* 계산·확인 */
  --dkb-red:#F14C4C;    --dkb-red-g:241,76,76;       /* 삭제·경고 */
  --dkb-pink:#F48FB1;   --dkb-pink-g:244,143,177;    /* 여성 */
  --dkb-blue:#6CB0FF;   --dkb-blue-g:108,176,255;    /* 남성·복사 */
}

/* ── 공통 버튼: 채움 제거 + 밝은 경계 + 형광 글자 ──────────────── */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(button:not(.tp-sw):not([style*="background"]), .btn, .abtn, .calc-btn, .reset-btn, .toggle-btn, .sex-btn, .gender-opt,
      .action-btn, .hdr-btn, .fs-btn, .preset-btn, .risk-btn, .region-btn, .status-btn,
      .context-opt, .fmt-btn, .refs-filter-btn, .ref-tab, .scale-tab, .card-link-btn){
  background:transparent !important;
  background-image:none !important;
  border:1px solid var(--dkb-line-lit) !important;
  color:var(--dkb-accent) !important;
  font-weight:600;
  text-shadow:0 0 6px rgba(var(--dkb-glow), .26);
  box-shadow:none !important;
  transition:border-color .12s, color .12s, box-shadow .12s, background .12s;
}

/* 호버 — 옅은 틴트 + 경계 강조 + 글로우 링 */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(button:not(.tp-sw):not([style*="background"]), .btn, .abtn, .calc-btn, .reset-btn, .toggle-btn, .sex-btn, .gender-opt,
      .action-btn, .hdr-btn, .fs-btn, .preset-btn, .risk-btn, .region-btn, .status-btn,
      .context-opt, .fmt-btn, .refs-filter-btn, .ref-tab, .scale-tab, .card-link-btn):hover:not(:disabled){
  background:rgba(var(--dkb-glow), .10) !important;
  border-color:var(--dkb-accent) !important;
  color:var(--dkb-accent-lit) !important;
  box-shadow:0 0 0 1px rgba(var(--dkb-glow), .25), 0 0 10px rgba(var(--dkb-glow), .20) !important;
}

/* 선택 상태 — 틴트 + 강한 글로우 (척도 문항 선택 가시성 확보) */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(button:not(.tp-sw):not([style*="background"]), .btn, .abtn, .toggle-btn, .sex-btn, .gender-opt, .preset-btn, .risk-btn,
      .region-btn, .status-btn, .context-opt, .fmt-btn, .refs-filter-btn, .ref-tab,
      .scale-tab):is(.active, .on, .selected, [aria-pressed="true"], [aria-selected="true"]){
  background:rgba(var(--dkb-glow), .16) !important;
  border-color:var(--dkb-accent) !important;
  color:var(--dkb-accent-lit) !important;
  text-shadow:0 0 8px rgba(var(--dkb-glow), .45);
  box-shadow:inset 0 0 0 1px rgba(var(--dkb-glow), .30), 0 0 12px rgba(var(--dkb-glow), .22) !important;
}

/* 비활성 — 형광 제거 */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(button:not(.tp-sw), .btn, .abtn, .calc-btn, .reset-btn, .toggle-btn):disabled{
  border-color:var(--dkb-line) !important;
  color:var(--color-text-muted, var(--color-text-tertiary, #8a8a8a)) !important;
  text-shadow:none !important;
  box-shadow:none !important;
  opacity:.55;
}

/* ── 기능별 형광 구분 ──────────────────────────────────────────── */
/* 계산·실행 — 청록 */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.calc-btn, .btn.calc, .btn.primary, .primary){
  color:var(--dkb-green) !important; border-color:#3D6E64 !important;
  text-shadow:0 0 6px rgba(var(--dkb-green-g), .28);
}
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.calc-btn, .btn.calc, .btn.primary, .primary):hover:not(:disabled){
  background:rgba(var(--dkb-green-g), .10) !important; border-color:var(--dkb-green) !important;
  color:#7FE7D0 !important;
  box-shadow:0 0 0 1px rgba(var(--dkb-green-g), .25), 0 0 10px rgba(var(--dkb-green-g), .20) !important;
}

/* 초기화·저장 — 앰버 */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.reset-btn, .fs-reset, .btn.rst, .btn.secondary){
  color:var(--dkb-amber) !important; border-color:#6E6A45 !important;
  text-shadow:0 0 6px rgba(var(--dkb-amber-g), .25);
}
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.reset-btn, .fs-reset, .btn.rst, .btn.secondary):hover:not(:disabled){
  background:rgba(var(--dkb-amber-g), .10) !important; border-color:var(--dkb-amber) !important;
  color:#F0F0C8 !important;
  box-shadow:0 0 0 1px rgba(var(--dkb-amber-g), .25), 0 0 10px rgba(var(--dkb-amber-g), .18) !important;
}

/* 인쇄·다운로드 — 주황 */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.btn.print, .btn.dl, [class*="print-"], [class*="download"]){
  color:var(--dkb-orange) !important; border-color:#6E5348 !important;
  text-shadow:0 0 6px rgba(var(--dkb-orange-g), .25);
}

/* 복사·공유 — 하늘 */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.btn.copy, [class*="copy"], [class*="share"]){
  color:var(--dkb-blue) !important; border-color:#3F5B7A !important;
  text-shadow:0 0 6px rgba(var(--dkb-blue-g), .25);
}

/* AI·번역 — 보라 */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is([class*="ai-"], [class*="translate"], [class*="trans-btn"]){
  color:var(--dkb-violet) !important; border-color:#6B4A68 !important;
  text-shadow:0 0 6px rgba(var(--dkb-violet-g), .28);
}

/* 삭제·경고 — 적색 */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is([class*="delete"], [class*="danger"], .btn.del){
  color:var(--dkb-red) !important; border-color:#6E3A3A !important;
  text-shadow:0 0 6px rgba(var(--dkb-red-g), .25);
}

/* 성별 선택 — 남/여 구분 유지 */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.toggle-btn.male, .sex-btn.male, .gender-opt.male):is(.active, .on, .selected){
  background:rgba(var(--dkb-blue-g), .16) !important; border-color:var(--dkb-blue) !important;
  color:#A8D2FF !important; text-shadow:0 0 8px rgba(var(--dkb-blue-g), .45);
}
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.toggle-btn.female, .sex-btn.female, .gender-opt.female):is(.active, .on, .selected){
  background:rgba(var(--dkb-pink-g), .16) !important; border-color:var(--dkb-pink) !important;
  color:#FFC2D6 !important; text-shadow:0 0 8px rgba(var(--dkb-pink-g), .45);
}

/* 예/아니오 — 위험요인 문항 */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  .toggle-btn.yes:is(.active, .on, .selected){
  background:rgba(var(--dkb-red-g), .16) !important; border-color:var(--dkb-red) !important;
  color:#FF9E9E !important; text-shadow:0 0 8px rgba(var(--dkb-red-g), .40);
}
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  .toggle-btn.no:is(.active, .on, .selected){
  background:rgba(var(--dkb-green-g), .16) !important; border-color:var(--dkb-green) !important;
  color:#7FE7D0 !important; text-shadow:0 0 8px rgba(var(--dkb-green-g), .40);
}

/* 테마 팔레트 스와치 — 색 미리보기가 목적이라 채움을 유지한다(위 규칙에서 제외됨).
   선택 표시는 라이트 기준 진한 남색이라 다크에서 안 보여, 다크에서만 밝은 테두리로 바꾼다. */
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  #themePop .tp-sw.sel{
  border-color:#ffffff !important;
  outline:1px solid rgba(0,0,0,.55) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 0 10px rgba(var(--dkb-glow), .35) !important;
}

/* 글자크기 조절(원형 버튼) — 형광 과함 방지, 경계만 */
:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  .fs-btn{ text-shadow:none !important; font-weight:700; }

/* ── 척도 문항 선택지(라디오+라벨) ────────────────────────────────
 *  버튼 태그가 아니라 label 이라 위 규칙에 안 잡힌다. 문항 선택지가 각 척도 화면에서
 *  가장 많은 조작 요소이므로 동일 언어를 적용:
 *    미선택 = 채움 없음 + 밝은 경계 / 선택 = 틴트 + 형광 글자·글로우
 *  ⚠️ html 접두로 특이도를 올려 페이지 인라인 다크 오버라이드(!important)를 확실히 이긴다. */
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.q-opt, .q-opt-v, .edu-opt, .sex-toggle, .eq-toggle) label,
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  .opt .opt-box{
  background:transparent !important;
  background-image:none !important;
  border-color:var(--dkb-line-lit) !important;
  color:var(--color-text, var(--color-text-primary, #cccccc)) !important;
  box-shadow:none !important;
  transition:border-color .12s, color .12s, box-shadow .12s, background .12s;
}
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.q-opt, .q-opt-v, .edu-opt, .sex-toggle, .eq-toggle) label:hover,
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  .opt:hover .opt-box{
  background:rgba(var(--dkb-glow), .08) !important;
  border-color:var(--dkb-accent) !important;
  color:var(--dkb-accent-lit) !important;
}

/* 선택됨 — 틴트 + 형광 글자 + 글로우 (선택 여부가 한눈에 보이도록) */
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.q-opt, .q-opt-v, .edu-opt, .sex-toggle, .eq-toggle) input:checked + label,
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  .opt input:checked + .opt-box{
  background:rgba(var(--dkb-glow), .16) !important;
  border-color:var(--dkb-accent) !important;
  color:var(--dkb-accent-lit) !important;
  text-shadow:0 0 8px rgba(var(--dkb-glow), .45) !important;
  box-shadow:inset 0 0 0 1px rgba(var(--dkb-glow), .35), 0 0 12px rgba(var(--dkb-glow), .20) !important;
}
/* 선택지 내부 보조 텍스트(점수·설명)도 함께 밝게 */
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.q-opt, .q-opt-v, .edu-opt) input:checked + label
  :is(.opt-score, .opt-score-badge, .opt-desc, .edu-sub, span),
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  .opt input:checked + .opt-box :is(.score, .label){
  color:var(--dkb-accent) !important;
}

/* ── div 기반 토글(button 태그가 아님) — ASCVD 등 자체 디자인 페이지 ──────
 *  .rb(예/아니오) · .sx(성별) · .fmt-btn(표시형식)은 라이트 전용 색만 있어
 *  다크에서 선택 상태가 거의 보이지 않았다(경계 #2b2b2b·글자 #263238 등). */
html[data-theme]:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.rb, .sx, .fmt-btn){
  background:transparent !important;
  background-image:none !important;
  border:1px solid var(--dkb-line-lit) !important;
  color:var(--color-text-sec, var(--color-text-secondary, #b0b0b0)) !important;
  box-shadow:none !important;
  transition:border-color .12s, color .12s, box-shadow .12s, background .12s;
}
html[data-theme]:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.rb, .sx, .fmt-btn):hover{
  background:rgba(var(--dkb-glow), .08) !important;
  border-color:var(--dkb-accent) !important; color:var(--dkb-accent-lit) !important;
}
html[data-theme]:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.rb, .sx, .fmt-btn).on{
  background:rgba(var(--dkb-glow), .16) !important;
  border-color:var(--dkb-accent) !important;
  color:var(--dkb-accent-lit) !important;
  text-shadow:0 0 8px rgba(var(--dkb-glow), .45) !important;
  box-shadow:inset 0 0 0 1px rgba(var(--dkb-glow), .35) !important;
}
/* 위험인자 '예' 선택 = 경고 의미라 적색 유지 */
html[data-theme]:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  .rb.yes.on{
  background:rgba(var(--dkb-red-g), .16) !important; border-color:var(--dkb-red) !important;
  color:#FF9E9E !important; text-shadow:0 0 8px rgba(var(--dkb-red-g), .40) !important;
  box-shadow:inset 0 0 0 1px rgba(var(--dkb-red-g), .35) !important;
}

/* ── 다크에서 사라지던 카드 제목 ────────────────────────────────
 *  .card-hdr span 이 라이트 전용 하드코딩 색(#1a3a5c·#1b4d20)이라
 *  다크 카드(#1f1f1f) 위에서 사실상 안 보였다(실측 확인). */
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  :is(.card-hdr span, .dl-hdr){
  color:var(--color-text, var(--color-text-primary, #cccccc)) !important;
}

/* 예/아니오 문항 — 의미색 유지 */
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  .q-opt.yes input:checked + label{
  background:rgba(var(--dkb-red-g), .16) !important; border-color:var(--dkb-red) !important;
  color:#FF9E9E !important; text-shadow:0 0 8px rgba(var(--dkb-red-g), .40) !important;
  box-shadow:inset 0 0 0 1px rgba(var(--dkb-red-g), .35) !important;
}
html:is([data-theme="midnight"],[data-theme="ocean"],[data-theme="forest"],[data-theme="darkplus"])
  .q-opt.no input:checked + label{
  background:rgba(var(--dkb-green-g), .16) !important; border-color:var(--dkb-green) !important;
  color:#7FE7D0 !important; text-shadow:0 0 8px rgba(var(--dkb-green-g), .40) !important;
  box-shadow:inset 0 0 0 1px rgba(var(--dkb-green-g), .35) !important;
}