/*
 * PETIQUE final style guard
 * Purpose: keep light/dark skin readable even when old page CSS or inline legacy styles remain.
 * Loaded after app.css, page styles, and skin.css.
 */

:root{
  --focus-ring:0 0 0 4px rgba(91,124,255,.18);
  --surface-readable:var(--card);
  --surface-readable-2:var(--surface);
  --surface-readable-3:var(--surface-soft);
  --text-readable:var(--text);
  --text-readable-muted:var(--muted);
}

html[data-theme="dark"]{
  --focus-ring:0 0 0 4px rgba(138,166,255,.24);
  --surface-readable:#141d29;
  --surface-readable-2:#182231;
  --surface-readable-3:#1e293b;
  --text-readable:#f5f8ff;
  --text-readable-muted:#dbe6fb;
}

body,
.app-main,
.kh-body{
  color:var(--text-readable);
  background:var(--bg);
}

body :where(p, li, dd, td, th, label, span, strong, em, small){
  overflow-wrap:anywhere;
}

body :where(img, video, canvas, svg){
  max-width:100%;
}

body :where(.card, .box, .panel, .surface, .section-card, .content-card, .form-card,
.board-card, .board-panel, .board-toolbar, .board-search, .board-filter,
.bd-card, .bd-panel, .bd-author, .bd-actions, .bd-file-item,
.adopt-card, .adopt-selected, .adopt-review-card, .adopt-timeline__item,
.admin-card, .admin-panel, .admin-kv, .admin-form, .admin-table-wrap,
.member-card, .mypage-card, .profile-card, .animal-card, .policy-card,
.home-card, .home-section, .feature-card, .sidebar-card, .sidebar-login,
.new-board-wrapper, .ranking-wrapper, .mail-card, .error-card){
  color:var(--text-readable);
  border-color:var(--border);
}

body :where(.page-title, .section-title, .card-title, .board-title, .bd-title,
.admin-title, .sidebar-card-title, .ranking-title, .new-board-title,
.home-title, .profile-name, .member-name, .animal-name){
  color:var(--text-readable);
}

body :where(.muted, .gray, .text-muted, .small-text, .help-text, .hint, .caption,
.desc, .description, .sub, .subtitle, .sub-title, .page-subtitle, .meta,
.meta-text, .board-sub, .title-meta, .title-desc, .date, .time, .count,
.empty, .empty-text, .guide-text, .info-text, .form-help, .field-help,
.reply-time, .reply-count, .reply-empty, .reply-login-hint){
  color:var(--text-readable-muted);
  opacity:1;
}

body :where(a:not(.btn):not(.app-brand):not(.app-nav__item), .link, .writer-link, .reply-writer-link){
  color:var(--primary-strong);
}

body :where(a:not(.btn):not(.app-brand):not(.app-nav__item):hover, .link:hover, .writer-link:hover, .reply-writer-link:hover){
  color:var(--primary);
}

body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea, .field, .form-control, .input, .textarea){
  background:var(--surface-readable);
  color:var(--text-readable);
  border-color:var(--border);
  caret-color:var(--text-readable);
}

body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea, .field, .form-control, .input, .textarea)::placeholder{
  color:var(--text-readable-muted);
  opacity:.82;
}

body :where(input, select, textarea, button, a, summary):focus-visible{
  outline:0;
  box-shadow:var(--focus-ring);
}

body :where(table){
  color:var(--text-readable);
  border-color:var(--border);
}

body :where(thead, thead tr, thead th, .table-head){
  background:var(--surface-readable-2);
  color:var(--text-readable-muted);
  border-color:var(--border);
}

body :where(tbody td, tbody th, .table-cell){
  color:var(--text-readable);
  border-color:var(--border);
}

body :where(hr, .divider, .line){
  border-color:var(--border);
}

/* Dark theme hardening: fixes legacy white surfaces and inline color fragments. */
html[data-theme="dark"] body :where(.card, .box, .panel, .surface, .section-card, .content-card, .form-card,
.board-card, .board-panel, .board-toolbar, .board-search, .board-filter,
.bd-card, .bd-panel, .bd-author, .bd-actions, .bd-file-item,
.adopt-card, .adopt-selected, .adopt-review-card, .adopt-timeline__item,
.admin-card, .admin-panel, .admin-kv, .admin-form, .admin-table-wrap,
.member-card, .mypage-card, .profile-card, .animal-card, .policy-card,
.home-card, .home-section, .feature-card, .sidebar-card, .sidebar-login,
.new-board-wrapper, .ranking-wrapper, .mail-card, .error-card){
  background-color:var(--surface-readable) !important;
  color:var(--text-readable) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow-sm);
}

html[data-theme="dark"] body :where(.soft-card, .summary-card, .notice-card, .info-box,
.filter-body, .filter-head, .filter-actions, .filter-summary, .status-tabs,
.reply-item, .comment-item, .adopt-step, .apply-message, .apply-lock,
.admin-stat, .admin-metric, .profile-summary, .mypage-summary){
  background-color:var(--surface-readable-2) !important;
  color:var(--text-readable) !important;
  border-color:var(--border) !important;
}

html[data-theme="dark"] body :where(.page-title, .section-title, .card-title, .board-title, .bd-title,
.admin-title, .sidebar-card-title, .ranking-title, .new-board-title,
.home-title, .profile-name, .member-name, .animal-name,
.title-link, .writer-link, .sidebar-profile-name, .sidebar-mini-name,
.ranking-nickname, .reply-writer, .reply-writer-link, .bd-author__link){
  color:var(--text-readable) !important;
  opacity:1 !important;
}

html[data-theme="dark"] body :where(.muted, .gray, .text-muted, .small-text, .help-text, .hint, .caption,
.desc, .description, .sub, .subtitle, .sub-title, .page-subtitle, .meta,
.meta-text, .board-sub, .title-meta, .title-desc, .date, .time, .count,
.empty, .empty-text, .guide-text, .info-text, .form-help, .field-help,
.reply-time, .reply-count, .reply-empty, .reply-login-hint,
.bd-author__sub, .bd-time, .bd-time--edit, .adopt-card__sub,
.adopt-selected__label, .adopt-selected__count, .adopt-review-card__meta,
.adopt-timeline__time, .adopt-timeline__status, .adopt-timeline__sub,
.adopt-myapply__time, .adopt-myapply__muted, .ranking-description,
.sidebar-mini-sub, .sidebar-profile-points, .new-board-time){
  color:var(--text-readable-muted) !important;
  opacity:1 !important;
}

html[data-theme="dark"] body :where(.form-label, .label, label, .filter-field > span,
.board--adoption .adopt-table thead th, .admin-table th){
  color:var(--text-readable-muted) !important;
  opacity:1 !important;
}

html[data-theme="dark"] body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea, .field, .form-control, .input, .textarea,
.tox .tox-textfield, .tox .tox-textarea, .tox .tox-listboxfield .tox-listbox--select){
  background:var(--surface-readable-3) !important;
  color:var(--text-readable) !important;
  -webkit-text-fill-color:var(--text-readable) !important;
  border-color:rgba(138,166,255,.24) !important;
}

html[data-theme="dark"] body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea, .field, .form-control, .input, .textarea)::placeholder{
  color:#c6d4e8 !important;
  opacity:.88 !important;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:hover,
html[data-theme="dark"] textarea:-webkit-autofill:focus,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill:hover,
html[data-theme="dark"] select:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text-readable) !important;
  box-shadow:0 0 0 1000px var(--surface-readable-3) inset !important;
  caret-color:var(--text-readable) !important;
  transition:background-color 9999s ease-out 0s !important;
}

html[data-theme="dark"] body :where(table, .admin-table, .adopt-table, .board-table){
  color:var(--text-readable) !important;
  border-color:var(--border) !important;
}

html[data-theme="dark"] body :where(thead, thead tr, thead th, .admin-table th,
.adopt-table thead th, .board-table thead th){
  background:var(--surface-readable-2) !important;
  color:var(--text-readable-muted) !important;
  border-color:var(--border) !important;
}

html[data-theme="dark"] body :where(tbody td, tbody th, .admin-table td,
.adopt-table td, .board-table td){
  color:var(--text-readable) !important;
  border-color:rgba(138,166,255,.14) !important;
}

html[data-theme="dark"] body :where(.btn-outline, .btn-ghost, .btn-menu, .filter-toggle,
.filter-chip, .status-tab, .bookmark-btn, .tag, .badge, .pill,
.sidebar-collapse-btn, .sidebar-expand-btn){
  background:var(--surface-readable-2) !important;
  color:var(--text-readable) !important;
  border-color:rgba(138,166,255,.22) !important;
}

html[data-theme="dark"] body :where(.btn-primary, .btn-main, .btn-submit){
  background:var(--primary) !important;
  color:var(--primary-on) !important;
  border-color:var(--primary) !important;
}

html[data-theme="dark"] body :where(.alert, .toast, .message-box, .fail-feedback,
.success-feedback, .notice, .error-message){
  background:var(--surface-readable-2) !important;
  color:var(--text-readable) !important;
  border-color:var(--border) !important;
}

html[data-theme="dark"] body :where(.fail-feedback, .error-message, .alert-danger){
  background:rgba(251,113,133,.12) !important;
  color:#ffd6dd !important;
  border-color:rgba(251,113,133,.32) !important;
}

html[data-theme="dark"] body :where(.success-feedback, .alert-success){
  background:rgba(74,222,128,.12) !important;
  color:#c9f8d9 !important;
  border-color:rgba(74,222,128,.30) !important;
}

html[data-theme="dark"] body :where(.ranking-heart, .new-board-time, .count-pill,
.meta-pill, .point-chip){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:26px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.07) !important;
  color:var(--text-readable) !important;
  border:1px solid rgba(138,166,255,.20) !important;
}

html[data-theme="dark"] body :where(.ranking-member-point, .point, .score, .stat-value,
.col-view, .col-comment, .col-like, .col-price){
  color:var(--text-readable) !important;
  font-variant-numeric:tabular-nums;
}

/* Inline legacy color rescue: catches old JSP inline styles that override theme CSS. */
html[data-theme="dark"] body [style*="background:#fff"],
html[data-theme="dark"] body [style*="background: #fff"],
html[data-theme="dark"] body [style*="background:#ffffff"],
html[data-theme="dark"] body [style*="background: #ffffff"],
html[data-theme="dark"] body [style*="background:white"],
html[data-theme="dark"] body [style*="background: white"],
html[data-theme="dark"] body [style*="background:#fafafa"],
html[data-theme="dark"] body [style*="background: #fafafa"],
html[data-theme="dark"] body [style*="background:#f7fbff"],
html[data-theme="dark"] body [style*="background: #f7fbff"],
html[data-theme="dark"] body [style*="background:#eef2ff"],
html[data-theme="dark"] body [style*="background: #eef2ff"]{
  background:var(--surface-readable) !important;
  color:var(--text-readable) !important;
  border-color:var(--border) !important;
}

html[data-theme="dark"] body [style*="background:#fff5f5"],
html[data-theme="dark"] body [style*="background: #fff5f5"]{
  background:rgba(251,113,133,.12) !important;
  color:#ffd6dd !important;
  border-color:rgba(251,113,133,.32) !important;
}

html[data-theme="dark"] body [style*="color:#333"],
html[data-theme="dark"] body [style*="color: #333"],
html[data-theme="dark"] body [style*="color:#444"],
html[data-theme="dark"] body [style*="color: #444"],
html[data-theme="dark"] body [style*="color:#555"],
html[data-theme="dark"] body [style*="color: #555"],
html[data-theme="dark"] body [style*="color:#666"],
html[data-theme="dark"] body [style*="color: #666"],
html[data-theme="dark"] body [style*="color:black"],
html[data-theme="dark"] body [style*="color: black"]{
  color:var(--text-readable) !important;
}

html[data-theme="dark"] body [style*="rgba(0,0,0"],
html[data-theme="dark"] body [style*="rgba(0, 0, 0"]{
  border-color:var(--border) !important;
}

/* Media/card containment so remote images cannot break layout. */
.article-content img,
.bd-content img,
.board-content img,
.adopt-content img,
.reply-content img,
.home-card img,
.board-card img,
.profile-card img,
.animal-card img{
  display:block;
  max-width:100%;
  height:auto;
  object-fit:cover;
  border-radius:16px;
}

.bd-content,
.article-content,
.board-content,
.adopt-content,
.reply-content{
  overflow:hidden;
}

@media (max-width: 768px){
  body :where(.card, .board-card, .admin-card, .member-card, .profile-card, .animal-card,
  .sidebar-card, .home-card, .bd-card, .adopt-card){
    border-radius:16px;
  }
  body :where(table, .admin-table, .adopt-table, .board-table){
    font-size:.92rem;
  }
}

/* Replaces legacy inline color snippets with reusable theme-safe classes. */
.required-mark{
  color:var(--danger);
  font-weight:900;
}
.form-error-note{
  width:100%;
  margin-top:12px;
  text-align:left;
}
.admin-empty{
  padding:16px;
  color:var(--muted);
}
.admin-attachment-thumb{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
}
.admin-section-divider{
  margin-top:16px;
  border-top:1px solid var(--border);
  padding-top:14px;
}
.admin-progress{
  flex:1;
  height:10px;
  background:var(--primary-2);
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--border);
}
.admin-progress__bar{
  height:100%;
  min-width:2px;
  background:var(--primary);
  border-radius:inherit;
}
.admin-card--ok{
  border-left:4px solid var(--ok) !important;
}
.admin-card--danger{
  border-left:4px solid var(--danger) !important;
}

html[data-theme="dark"] .required-mark{
  color:#ff9aad;
}
html[data-theme="dark"] .admin-empty,
html[data-theme="dark"] .admin-muted{
  color:var(--text-readable-muted) !important;
}
html[data-theme="dark"] .admin-attachment-thumb{
  background:var(--surface-readable-2) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .admin-section-divider{
  border-top-color:var(--border) !important;
}
html[data-theme="dark"] .admin-progress{
  background:var(--surface-readable-3) !important;
  border-color:rgba(138,166,255,.20) !important;
}
html[data-theme="dark"] .admin-progress__bar{
  background:linear-gradient(90deg,var(--primary),var(--info)) !important;
}
.admin-divider{
  border:0;
  border-top:1px solid var(--border);
  margin:14px 0;
}