/* static/css/pages/public_dark_visibility.css
   Ver.1327 - 공개 블랙테마 글자/버튼 가시성 안전망
   - Purpose: page-specific CSS loaded after public_dark/public_modern/site_density can reintroduce light-theme text colors.
   - Policy: visual-only additive overrides; do not change template ids, form names, routes, or JS hooks.
   - References: MDN color contrast, MDN color-scheme, GitHub Primer color usage.
*/

body.public-dark{
  color-scheme: dark;
  --dark-readable-bg:#070b14;
  --dark-readable-surface:#111827;
  --dark-readable-surface-2:#172033;
  --dark-readable-input:#0f172a;
  --dark-readable-text:#e5edf8;
  --dark-readable-text-strong:#f8fafc;
  --dark-readable-muted:#a7b4c8;
  --dark-readable-line:#2b3b55;
  --dark-readable-line-strong:#40536f;
  --dark-readable-primary:#3b82f6;
  --dark-readable-primary-hover:#2563eb;
  --dark-readable-danger:#dc2626;
  --dark-readable-success:#059669;
  --dark-readable-focus:rgba(96,165,250,.34);
}

/* Base pages that extend base.html now also receive public-dark. Reinforce the core
   design tokens so ed2/wd/common controls do not fall back to light-theme values. */
body.public-dark{
  --ed2-bg:var(--dark-readable-bg);
  --ed2-card:var(--dark-readable-surface);
  --ed2-text:var(--dark-readable-text);
  --ed2-muted:var(--dark-readable-muted);
  --ed2-line:var(--dark-readable-line);
  --bg:var(--dark-readable-bg);
  --surface:var(--dark-readable-surface);
  --surface-2:var(--dark-readable-surface-2);
  --text:var(--dark-readable-text);
  --muted:var(--dark-readable-muted);
  --line:var(--dark-readable-line);
  --bar-bg:#101827;
  --bar-border:var(--dark-readable-line);
}

/* Text and helper labels most often affected by older light-theme CSS. */
body.public-dark :where(
  label,
  legend,
  .form-label,
  .field-label,
  .write-label,
  .radio,
  .checkbox,
  .rv-score-row label,
  .rv-avg .k,
  .wd-eval .wd-dist-avg,
  .actor-write-grid label,
  .actor-write-upload .t,
  .actor-write-section-head .t,
  .auth-label,
  .msg-label,
  .sr-filename
){
  color:var(--dark-readable-text) !important;
  -webkit-text-fill-color:currentColor;
}

body.public-dark :where(
  .muted,
  .text-muted,
  .field-hint,
  .write-help,
  .help-text,
  .form-help,
  .rv-help,
  .actor-card-meta,
  .actor-card-sub,
  .work-meta-row,
  .sr-inline-subtitle,
  .sr-home-board-row__secondary
){
  color:var(--dark-readable-muted) !important;
  -webkit-text-fill-color:currentColor;
}

/* Native controls: keep text visible after browser autofill/theme overrides. */
body.public-dark :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]){
  background-color:var(--dark-readable-input) !important;
  color:var(--dark-readable-text) !important;
  border-color:var(--dark-readable-line) !important;
  caret-color:var(--dark-readable-text-strong);
  -webkit-text-fill-color:currentColor;
}
body.public-dark :where(input, textarea)::placeholder{
  color:#718198 !important;
  opacity:1;
}
body.public-dark :where(input, select, textarea):focus{
  border-color:rgba(96,165,250,.72) !important;
  box-shadow:0 0 0 4px rgba(96,165,250,.14) !important;
}

/* Ver.1339: actor/work review score selects use native option popups.
   Keep the popup readable by opting the score selects into a light color scheme,
   while the surrounding modal remains dark. */
body.public-dark .rv-modal .rv-score-row select{
  min-height:38px !important;
  padding-inline:12px 30px !important;
  background-color:#f8fafc !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#94a3b8 !important;
  color-scheme:light;
  font-size:14px !important;
  font-weight:1000 !important;
}
body.public-dark .rv-modal .rv-score-row select option{
  background-color:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}
body.public-dark .rv-modal .rv-score-row label{
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}
body.public-dark .rv-modal .rv-score-row{
  background:#111827 !important;
  border-color:#334155 !important;
}
body.public-dark input::file-selector-button{
  border:1px solid var(--dark-readable-line) !important;
  background:var(--dark-readable-surface-2) !important;
  color:var(--dark-readable-text) !important;
  -webkit-text-fill-color:currentColor;
}

/* Generic dark-theme buttons. This is intentionally loaded last so older page CSS
   cannot leave black text on a dark button or white text on a transparent button. */
body.public-dark :where(
  .btn,
  .ed2-btn,
  .wd-btn,
  .wd-icon-btn,
  .wd-more-btn,
  .rv-write-btn,
  .wd-eval-btn,
  .wd-mini-btn,
  .wd-fav-btn,
  .wd-vote-btn,
  .wd-overflow-item,
  .page-link,
  .pagination a,
  .pagination button,
  .board-pagination .page-link,
  .sr-btn,
  .sr-subnav__item,
  .sr-home-board__more,
  .btn-search,
  .btn-write,
  .mob-action-btn,
  .site-search-btn,
  .mob-search-btn,
  .auth-preverify-btn,
  .auth-modal-close,
  .msg-btn,
  .msg-pager button
){
  color:var(--dark-readable-text) !important;
  border-color:var(--dark-readable-line) !important;
  -webkit-text-fill-color:currentColor;
}

body.public-dark :where(
  .btn,
  .ed2-btn,
  .wd-btn,
  .wd-icon-btn,
  .wd-more-btn,
  .wd-eval-btn,
  .wd-mini-btn,
  .wd-fav-btn,
  .wd-vote-btn,
  .wd-overflow-item,
  .page-link,
  .pagination a,
  .pagination button,
  .board-pagination .page-link,
  .sr-btn,
  .sr-subnav__item,
  .sr-home-board__more,
  .btn-search,
  .mob-action-btn,
  .auth-preverify-btn,
  .auth-modal-close,
  .msg-btn,
  .msg-pager button
):not(:where(
  .btn-primary,
  .ed2-btn--primary,
  .rv-submit,
  .rv-write-btn,
  .btn-write,
  .btn-danger,
  .btn-success,
  .btn-secondary,
  .is-active,
  .active,
  [aria-current="page"]
)){
  background:var(--dark-readable-surface) !important;
  background-image:none !important;
}

body.public-dark :where(
  .btn-primary,
  .ed2-btn--primary,
  .rv-submit,
  .rv-write-btn,
  .btn-write,
  .sr-btn-primary,
  button[type="submit"]:not(.btn-ghost):not(.btn-link):not(.auth-modal-close)
){
  background:linear-gradient(135deg, var(--dark-readable-primary), var(--dark-readable-primary-hover)) !important;
  border-color:rgba(147,197,253,.58) !important;
  color:#fff !important;
  -webkit-text-fill-color:currentColor;
}
body.public-dark :where(.btn-danger, .wd-icon-btn.danger, .wd-btn.danger, .wd-overflow-item.danger, .sr-btn-danger){
  background:var(--dark-readable-danger) !important;
  border-color:rgba(248,113,113,.50) !important;
  color:#fff !important;
}
body.public-dark :where(.btn-success, .sr-btn-success){
  background:var(--dark-readable-success) !important;
  border-color:rgba(52,211,153,.50) !important;
  color:#fff !important;
}
body.public-dark :where(.btn-secondary){
  background:#334155 !important;
  border-color:#475569 !important;
  color:#f8fafc !important;
}
body.public-dark :where(.btn-outline, .btn-ghost, .ed2-btn--ghost, .wd-btn-outline, .sr-btn-ghost){
  background:rgba(96,165,250,.07) !important;
  color:#bfdbfe !important;
  border-color:rgba(96,165,250,.46) !important;
}
body.public-dark :where(.btn-link){
  background:transparent !important;
  color:#bfdbfe !important;
  border-color:transparent !important;
}

@media (hover:hover){
  body.public-dark :where(
    .btn,
    .ed2-btn,
    .wd-btn,
    .wd-icon-btn,
    .wd-more-btn,
    .page-link,
    .sr-btn,
    .sr-subnav__item,
    .sr-home-board__more,
    .msg-btn,
    .msg-pager button
  ):hover{
    color:#fff !important;
    border-color:rgba(147,197,253,.58) !important;
  }
}

/* SmartEditor2 context toolbars may be injected outside page-specific wrappers.
   Keep labels and SVG icons readable on the glass-dark toolbar. */
body.public-dark :where(.fr-popup.se2-linktool, .fr-popup.se2-imgtool){
  color:#f8fafc !important;
  background:linear-gradient(180deg, rgba(31,41,55,.98), rgba(15,23,42,.98)) !important;
  border-color:rgba(148,163,184,.38) !important;
  color-scheme:dark;
}
body.public-dark :where(.fr-popup.se2-linktool, .fr-popup.se2-imgtool) :where(button, .fr-command, .fr-btn, .se2-fr-chip, .se2-linktool__btn){
  color:#f8fafc !important;
  fill:currentColor !important;
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(148,163,184,.30) !important;
  -webkit-text-fill-color:currentColor;
}
body.public-dark :where(.fr-popup.se2-linktool, .fr-popup.se2-imgtool) :where(.se2-tool-label, .fr-svg, svg, span){
  color:inherit !important;
  fill:currentColor !important;
}
body.public-dark :where(.fr-popup.se2-linktool, .fr-popup.se2-imgtool) :where(.se2-linktool__btn--primary){
  background:linear-gradient(180deg, rgba(37,99,235,.96), rgba(29,78,216,.96)) !important;
  color:#eff6ff !important;
}
body.public-dark :where(.fr-popup.se2-linktool, .fr-popup.se2-imgtool) :where(.se2-linktool__btn--danger, .se2-fr-btn--emph){
  background:linear-gradient(180deg, rgba(239,68,68,.95), rgba(185,28,28,.95)) !important;
  color:#fff7ed !important;
}

/* Detail/review text blocks that had legacy #111 colors in older CSS. */
body.public-dark :where(.ad-review-content, .wd-eval .wd-dist-toggle, .wd-eval .wd-dist-avg){
  color:var(--dark-readable-text) !important;
  -webkit-text-fill-color:currentColor;
}
body.public-dark .wd-eval .wd-dist-toggle{
  background:var(--dark-readable-surface) !important;
  border-color:var(--dark-readable-line) !important;
}

/* Footer bar buttons on base.html/public_layout.html must be readable across all public pages. */
body.public-dark .g-footerbar{
  background:rgba(5,8,20,.90) !important;
  border-top-color:rgba(148,163,184,.18) !important;
  color:var(--dark-readable-text) !important;
}
body.public-dark .g-footerbar :where(.btn, a, button){
  color:var(--dark-readable-text) !important;
  -webkit-text-fill-color:currentColor;
}

@media (forced-colors: active){
  body.public-dark :where(button, .btn, .ed2-btn, .wd-btn, input, select, textarea){
    forced-color-adjust:auto;
    background:ButtonFace !important;
    color:ButtonText !important;
    border-color:ButtonText !important;
  }
}

/* =====================================================================
 * Ver.1328 - 쪽지함 status / 커뮤니티 글쓰기 액션 버튼 가시성 보정
 * - message status is informational text, not a pill badge.
 * - community write actions use compact, readable button group instead of oversized blocks.
 * - Visual-only; keeps template ids, names, routes, submit/draft/preview hooks unchanged.
 * ===================================================================== */
body.public-dark .msg-modal .msg-topbar__status{
  min-height:auto !important;
  max-width:min(42vw, 420px) !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#cbd5e1 !important;
  -webkit-text-fill-color:currentColor;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.public-dark .write-modern-page .write-actions,
body.public-dark .write-modern-page #writeActionBar{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  padding:14px 16px !important;
  margin:0 !important;
  border-top:1px solid rgba(148,163,184,.18) !important;
  border-radius:0 0 16px 16px !important;
  background:linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.94)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
}

body.public-dark .write-modern-page .write-actions--grid{
  grid-template-columns:none !important;
}

body.public-dark .write-modern-page .write-actions--grid .btn{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:118px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  box-shadow:none !important;
}

body.public-dark .write-modern-page .write-actions--grid .btn-primary,
body.public-dark .write-modern-page .write-actions--grid button[type="submit"]:not(.btn-ghost):not(.btn-link){
  min-width:140px !important;
  color:#fff !important;
  background:linear-gradient(135deg, #3b82f6, #2563eb) !important;
  border-color:rgba(147,197,253,.58) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.26) !important;
  -webkit-text-fill-color:currentColor;
}

body.public-dark .write-modern-page .write-actions--grid .btn-ghost,
body.public-dark .write-modern-page .write-actions--grid a.btn-ghost{
  color:#dbeafe !important;
  background:rgba(15,23,42,.62) !important;
  border-color:rgba(96,165,250,.38) !important;
  -webkit-text-fill-color:currentColor;
}

@media (hover:hover){
  body.public-dark .write-modern-page .write-actions--grid .btn-ghost:hover,
  body.public-dark .write-modern-page .write-actions--grid a.btn-ghost:hover{
    color:#fff !important;
    background:rgba(37,99,235,.26) !important;
    border-color:rgba(147,197,253,.62) !important;
  }
}

@media (max-width:640px){
  body.public-dark .msg-modal .msg-topbar__status{
    max-width:48vw !important;
    font-size:12px !important;
  }
  body.public-dark .write-modern-page .write-actions,
  body.public-dark .write-modern-page #writeActionBar{
    justify-content:stretch !important;
    gap:8px !important;
    padding:12px !important;
  }
  body.public-dark .write-modern-page .write-actions--grid .btn{
    flex:1 1 calc(33.333% - 8px) !important;
    min-width:0 !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 10px !important;
    font-size:13px !important;
  }
}