/* ============================================================
 * my_side · Keen(Metronic demo1) 보강 스타일
 * Keen 의 purge 된 styles.css 에 없는 유틸리티/색상 + 앱 전용 컴포넌트.
 * styles.css 다음에 로드되어 누락분만 채운다(컴포넌트 .card/.btn/.input 등은 재정의 안 함).
 * ============================================================ */

/* ---- raw Tailwind 색상 (status badge/alert/링크용) ---- */
.text-blue-600{color:#2563eb}.text-blue-700{color:#1d4ed8}
.text-red-500{color:#ef4444}.text-red-600{color:#dc2626}.text-red-700{color:#b91c1c}
.text-amber-600{color:#d97706}.text-amber-700{color:#b45309}.text-amber-800{color:#92400e}.text-amber-900{color:#78350f}
.text-green-600{color:#16a34a}.text-green-700{color:#15803d}
.bg-blue-50{background-color:#eff6ff}
.bg-green-50{background-color:#f0fdf4}.bg-green-100{background-color:#dcfce7}
.bg-amber-50{background-color:#fffbeb}.bg-amber-100{background-color:#fef3c7}
.bg-red-50{background-color:#fef2f2}.bg-red-100{background-color:#fee2e2}
.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}
.border-amber-300{border-color:#fcd34d}.border-gray-300{border-color:#d1d5db}

/* ---- 간격/레이아웃 유틸 (purge 누락분) ---- */
.space-y-1>*+*{margin-top:.25rem}.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}.space-y-5>*+*{margin-top:1.25rem}.space-y-6>*+*{margin-top:1.5rem}
.space-x-1>*+*{margin-left:.25rem}.space-x-2>*+*{margin-left:.5rem}.space-x-3>*+*{margin-left:.75rem}
.gap-x-3{column-gap:.75rem}.gap-x-4{column-gap:1rem}.gap-x-6{column-gap:1.5rem}
.gap-7\.5{gap:1.875rem}
.overflow-x-auto{overflow-x:auto}
.whitespace-nowrap{white-space:nowrap}
.hover\:underline:hover{text-decoration-line:underline}
.leading-relaxed{line-height:1.625}
.list-disc{list-style-type:disc}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.border-t-2{border-top-width:2px}
.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}
.max-w-\[370px\]{max-width:370px}.max-w-\[400px\]{max-width:400px}
.h-\[38px\]{height:38px}
.align-top{vertical-align:top}
.cursor-not-allowed{cursor:not-allowed}
.opacity-50{opacity:.5}

/* hover ring (대시보드 카드) */
.hover\:ring-2:hover{box-shadow:0 0 0 2px var(--tw-ring-color,#e5e7eb)}
.hover\:ring-gray-200:hover{--tw-ring-color:#e5e7eb}

/* 반응형 grid (purge 누락분) */
@media(min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:flex-row{flex-direction:row}
}
@media(min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:gap-7\.5{gap:1.875rem}
}

/* ---- 뱃지/버튼 텍스트 줄바꿈 방지(좁은 칼럼에서 '노/출','삭/제' 깨짐 방지) ---- */
.badge{white-space:nowrap}
.btn{white-space:nowrap}

/* ---- flash alert ---- */
.app-alert{border-radius:.5rem;padding:.75rem 1rem;font-size:.875rem;margin-bottom:1rem;border:1px solid transparent}
.app-alert-notice{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.app-alert-alert{background:#fef2f2;color:#b91c1c;border-color:#fecaca}

/* ---- 표: 기존 hand-rolled 테이블(.w-full.text-sm) 도 단정히 보이게 ---- */
main .container-fixed table.w-full th{font-weight:600}

/* ---- select 최소폭(좁은 칼럼에서 화살표↔글자 겹침 방지) + date 입력 폭 ---- */
.select{min-width:5rem}
input[type="date"].input{min-width:9.5rem}
/* ---- date input 깨짐 보정: Keen .input(텍스트용)이 native date 위젯과 충돌 ---- */
/*      ① 텍스트 세로 top쏠림 → inline-flex 중앙정렬  ② 달력 아이콘 정렬  ③ 다크모드 글자/아이콘 invisibility(color-scheme) */
input[type="date"].input{display:inline-flex;align-items:center;line-height:normal}
input[type="date"].input::-webkit-datetime-edit{padding:0}
input[type="date"].input::-webkit-calendar-picker-indicator{margin-left:auto;cursor:pointer;opacity:.55}
input[type="date"].input::-webkit-calendar-picker-indicator:hover{opacity:1}
.dark input[type="date"].input{color-scheme:dark}

/* ===== 다크모드 보정 — custom.css 고정색의 다크 대응 (Keen .card/.table/.input/gray 는 자동 적응) ===== */
.dark .text-blue-600,.dark .text-blue-700{color:#93c5fd}
.dark .text-red-500,.dark .text-red-600,.dark .text-red-700{color:#fca5a5}
.dark .text-amber-600,.dark .text-amber-700,.dark .text-amber-800,.dark .text-amber-900{color:#fcd34d}
.dark .text-green-600,.dark .text-green-700{color:#86efac}
.dark .bg-blue-50{background-color:#0e1f33}
.dark .bg-green-50,.dark .bg-green-100{background-color:#0f2417}
.dark .bg-amber-50,.dark .bg-amber-100{background-color:#2a2210}
.dark .bg-red-50,.dark .bg-red-100{background-color:#2a1414}
.dark .bg-gray-50{background-color:#1b1c23}
.dark .bg-gray-100{background-color:#22232c}
.dark .border-amber-300{border-color:#78611f}
.dark .border-gray-300{border-color:#3a3b46}
.dark .app-alert-notice{background:#0f2e22;color:#86efac;border-color:#14532d}
.dark .app-alert-alert{background:#3b1212;color:#fca5a5;border-color:#7f1d1d}
/* 페이지 제목/본문 회색 텍스트가 다크 배경에서 묻히지 않게 라이트 계조로 */
.dark .text-gray-900{color:#e8eaf0}
.dark .text-gray-800{color:#d4d7e0}
.dark .text-gray-700{color:#b7bcc8}
.dark .text-gray-600{color:#9aa0ae}
.dark .text-gray-500{color:#7e8493}
.dark .text-gray-400{color:#6b7280}
/* 다크모드 토글 아이콘 스왑(달↔해) — Keen purge 에 빠진 dark:inline-flex 보강 */
.dark .dark\:inline-flex{display:inline-flex}

/* ============================================================
 * 2026-06-22 보강 — Keen purge 에서 빠져 "무음 no-op" 으로 깨지던 유틸 일괄 추가
 * (px-6 → 사이드바 로고 좌측 쏠림 / gap-y-* → 상세 dl 답답 / mb-6 → 패널 간격 / max-w-[260px] → 드롭다운 100% 등)
 * ============================================================ */
/* margin / padding */
.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}
.mt-3{margin-top:.75rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-0\.5{margin-top:.125rem}
.ml-4{margin-left:1rem}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.pl-\[30px\]{padding-left:1.875rem}
.pt-2\.25{padding-top:.5625rem}
/* gap (row/col/혼합) */
.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.gap-y-5{row-gap:1.25rem}.gap-y-6{row-gap:1.5rem}
.gap-x-2{column-gap:.5rem}.gap-x-8{column-gap:2rem}
.gap-0\.5{gap:.125rem}.gap-1\.5{gap:.375rem}
/* size / layout */
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.min-w-0{min-width:0}
.h-3{height:.75rem}.w-3{width:.75rem}
.max-w-\[260px\]{max-width:260px}.max-w-\[280px\]{max-width:280px}.max-w-\[360px\]{max-width:360px}.w-\[260px\]{width:260px}.min-w-\[220px\]{min-width:220px}
.w-full{width:100%}
/* type */
.font-bold{font-weight:700}
.break-all{word-break:break-all}
.whitespace-normal{white-space:normal}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* color */
.bg-primary\/10{background-color:rgba(27,132,255,.1)}
.hover\:border-primary:hover{border-color:var(--tw-primary)}
@media(min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.lg\:col-span-2{grid-column:span 2 / span 2}}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* dark 변형(클래스 기반) */
.dark .dark\:text-white{color:#fff}
.dark .dark\:text-gray-100{color:#e8eaf0}
.dark .dark\:text-gray-200{color:#d4d7e0}
.dark .dark\:border-coal-100{border-color:#15171C}
.dark .dark\:hover\:ring-coal-100:hover{--tw-ring-color:#15171C}

/* ===== 플로팅 토스트 (flash) — 페이지 흐름에서 빼서 우상단 고정 ===== */
.app-toast-wrap{position:fixed;top:84px;right:1.5rem;z-index:90;display:flex;flex-direction:column;gap:.5rem;max-width:360px;pointer-events:none}
.app-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.625rem;border-radius:.625rem;padding:.75rem 1rem;font-size:.875rem;line-height:1.4;border:1px solid transparent;box-shadow:0 10px 25px -5px rgba(0,0,0,.18),0 8px 10px -6px rgba(0,0,0,.1);animation:app-toast-in .25s ease}
.app-toast-notice{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.app-toast-alert{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.app-toast-msg{flex:1 1 auto;word-break:break-word}
.app-toast-close{cursor:pointer;background:none;border:0;color:inherit;opacity:.55;font-size:1.05rem;line-height:1;padding:0}
.app-toast-close:hover{opacity:1}
.app-toast.hide{opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease}
@keyframes app-toast-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.dark .app-toast-notice{background:#0f2e22;color:#86efac;border-color:#14532d}
.dark .app-toast-alert{background:#3b1212;color:#fca5a5;border-color:#7f1d1d}

/* ===== 상세 정보 정의리스트(key-value) — 연동정보/리워드정보 등 공통(다크 자동대응: --tw-gray-*) ===== */
.kv{display:grid;grid-template-columns:1fr;column-gap:1.5rem;row-gap:1rem}
@media(min-width:640px){.kv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kv-full{grid-column:1 / -1}
.kv dt{font-size:.75rem;font-weight:500;color:var(--tw-gray-500)}
.kv dd{margin-top:.25rem;color:var(--tw-gray-800);word-break:break-word}
.dark .kv dd{color:#d4d7e0}

.admin-menu-badge{margin-left:auto;display:inline-flex;min-width:1.25rem;height:1.25rem;align-items:center;justify-content:center;border-radius:999px;background:#e35387;color:#fff;font-size:.6875rem;font-weight:700;line-height:1;padding:0 .35rem}
.admin-alert-button{position:relative}
.admin-alert-dot{position:absolute;right:-.3rem;top:-.3rem;display:inline-flex;min-width:1.15rem;height:1.15rem;align-items:center;justify-content:center;border-radius:999px;background:#dc2626;color:#fff;border:2px solid #fff;font-size:.625rem;font-weight:700;line-height:1;padding:0 .25rem}
.admin-alert-dropdown{width:360px;max-width:calc(100vw - 2rem)}
.admin-alert-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem}
.admin-alert-title{font-size:.9375rem;font-weight:700;color:var(--tw-gray-900)}
.admin-alert-subtitle{margin-top:.125rem;font-size:.75rem;color:var(--tw-gray-500)}
.admin-alert-list{max-height:360px;overflow:auto;padding:.35rem}
.admin-alert-item{display:grid;gap:.25rem;border-radius:.5rem;padding:.75rem;color:var(--tw-gray-700)}
.admin-alert-item:hover{background:var(--tw-gray-100);color:var(--tw-gray-900)}
.admin-alert-item strong{font-size:.8125rem;font-weight:700;color:var(--tw-gray-900);line-height:1.35}
.admin-alert-item span{font-size:.75rem;line-height:1.35;color:var(--tw-gray-600)}
.admin-alert-item small{font-size:.6875rem;color:var(--tw-gray-500)}
.admin-alert-item-badge{justify-self:start;border-radius:999px;padding:.15rem .45rem;font-size:.6875rem;font-weight:700;line-height:1.2}
.admin-alert-item-badge-danger{background:#fef2f2;color:#b91c1c}
.admin-alert-item-badge-warning{background:#fffbeb;color:#b45309}
.admin-alert-empty{padding:1.5rem 1rem;text-align:center;font-size:.8125rem;color:var(--tw-gray-500)}
.dark .admin-alert-dot{border-color:#14161d}
.dark .admin-alert-title,.dark .admin-alert-item strong{color:#f5f5f5}
.dark .admin-alert-subtitle,.dark .admin-alert-item small,.dark .admin-alert-empty{color:#9ca3af}
.dark .admin-alert-item{color:#d1d5db}
.dark .admin-alert-item:hover{background:#1f2430;color:#fff}
.dark .admin-alert-item span{color:#cbd5e1}
.dark .admin-alert-item-badge-danger{background:#3b1212;color:#fca5a5}
.dark .admin-alert-item-badge-warning{background:#3b2a10;color:#fcd34d}
.admin-captcha-card{max-width:680px}
.admin-captcha-widget-shell{border:1px solid var(--tw-gray-300);border-radius:.5rem;background:#fff;padding:.875rem}
.admin-captcha-widget-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.8125rem;font-weight:500;color:var(--tw-gray-700)}
.admin-captcha-widget-frame{display:block;width:100%;height:560px;min-height:520px;border:1px solid var(--tw-gray-200);border-radius:.5rem;background:#fff;overflow:auto}
.admin-captcha-status{margin-top:.625rem;font-size:.75rem;line-height:1.35;color:var(--tw-gray-500)}
.admin-captcha-status.text-red-600{color:#dc2626}
.dark .admin-captcha-widget-shell{border-color:#303441;background:#14161d}
.dark .admin-captcha-widget-head{color:#d4d7e0}
.dark .admin-captcha-widget-frame{border-color:#d1d5db;background:#fff;color:#222}
.dark .admin-captcha-status{color:#9ca3af}
.dark .admin-captcha-status.text-red-600{color:#fca5a5}
.admin-upstream-card{display:grid;gap:.25rem;border:1px solid var(--tw-gray-200);border-radius:.5rem;padding:.75rem;background:var(--tw-gray-50)}
.admin-upstream-card strong{color:var(--tw-gray-900);font-size:.875rem;font-weight:600}
.admin-upstream-card span{color:var(--tw-gray-500);font-size:.75rem}
.dark .admin-upstream-card{border-color:#15171c;background:#1b1c23}
.dark .admin-upstream-card strong{color:#fff}
.kv dt{font-size:.75rem;color:var(--tw-gray-500);margin-bottom:.25rem}
.kv dd{font-size:.875rem;color:var(--tw-gray-900)}
.mono-box{display:block;background:var(--tw-gray-100);border:1px solid var(--tw-gray-200);border-radius:.375rem;padding:.375rem .625rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;color:var(--tw-gray-800);word-break:break-all}

/* ===== 시크릿 마스킹 + 눈 토글 (data-secret-toggle) ===== */
.secret-row{display:flex;align-items:center;gap:.5rem}
.secret-row .mono-box{flex:1 1 auto}

/* ============================================================
 * 2026-06-22(2) 다크모드 흰배경 잔존 + bg-blue-100 + 모바일 횡스크롤 보강
 * ============================================================ */
/* 다크모드에서 body 가 #fefefe 로 남던 문제(원본의 dark:bg-coal-500 누락) — 안전망으로 한 번 더 못박음 */
.dark body{background-color:#0D0E12}
/* bg-blue-100 (reward_uploads/show 등) 라이트+다크 */
.bg-blue-100{background-color:#dbeafe}
.dark .bg-blue-100{background-color:#0e1f33}

/* ===== 모바일 반응형 — 목록 횡스크롤 + 검색/폼 필드 풀폭 스택 ===== */
/* flex 자식이 콘텐츠(넓은 표) 때문에 뷰포트보다 커지는 것 방지 → 표의 overflow-x-auto 가 스크롤 경계가 되게.
   body > div.flex(중간 래퍼) → .wrapper → main.content 까지 전 flex 체인에 min-width:0 을 줘야 연쇄로 줄어든다. */
body > .flex,.wrapper,main.content,.container-fixed{min-width:0}
.overflow-x-auto{max-width:100%}
@media(max-width:767px){
  /* 표는 좁은 화면에서 칼럼을 우그러뜨리지 말고 가로 스크롤 */
  .overflow-x-auto{-webkit-overflow-scrolling:touch}
  .overflow-x-auto > table{min-width:44rem}
}
@media(max-width:639px){
  /* 검색/입력 폼: 각 필드 그룹을 한 줄 풀폭으로 쌓고 입력은 폭 100% */
  .container-fixed form .flex.flex-col{flex:1 1 100%}
  .container-fixed form .input,
  .container-fixed form .select,
  .container-fixed form input[type="date"].input{width:100%;min-width:0}
  /* 페이지 헤더(제목+버튼)도 좁으면 버튼이 다음 줄로 자연스럽게 */
  .container-fixed > .mb-6 .btn,
  .container-fixed > .mb-5 .btn{flex:0 0 auto}
}

/* ===== 파일 업로드 드롭존 (drag & drop) ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.upload-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;
  border:2px dashed var(--tw-gray-300);border-radius:.75rem;padding:2.25rem 1rem;cursor:pointer;text-align:center;
  background:var(--tw-gray-50);transition:border-color .15s ease,background-color .15s ease}
.upload-dropzone:hover{border-color:var(--tw-primary);background:var(--tw-gray-100)}
.upload-dropzone.dragover{border-color:var(--tw-primary);background:rgba(27,132,255,.08)}
.upload-dz-icon{color:var(--tw-gray-400)}
.upload-dropzone:hover .upload-dz-icon,.upload-dropzone.dragover .upload-dz-icon{color:var(--tw-primary)}
.upload-dz-text{display:flex;flex-direction:column;gap:.125rem}
.upload-dz-title{font-size:.9rem;font-weight:500;color:var(--tw-gray-800)}
.upload-dz-hint{font-size:.75rem;color:var(--tw-gray-500)}
.upload-dz-file{font-size:.85rem;font-weight:600;color:var(--tw-primary);word-break:break-all}

/* 인라인 모노 칩(코드 조각) */
.mono-chip{display:inline-block;background:var(--tw-gray-100);border-radius:.25rem;padding:.0625rem .375rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;color:var(--tw-gray-800)}

/* ===== 리워드 등록: 상품찾기A 정답 태그 컴포저 ===== */
.answer-tag-panel{border:1px solid var(--tw-gray-200);border-radius:.75rem;background:var(--tw-gray-50);padding:.875rem;display:flex;flex-direction:column;gap:.75rem}
.answer-tag-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.answer-tag-kicker{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.04em;color:var(--tw-primary);line-height:1;text-transform:uppercase;margin-bottom:.25rem}
.answer-tag-primary{display:block;font-size:.95rem;line-height:1.25;color:var(--tw-gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.answer-tag-count{flex:0 0 auto;border:1px solid var(--tw-gray-200);background:#fff;border-radius:999px;padding:.1875rem .5rem;font-size:.75rem;font-weight:600;color:var(--tw-gray-600)}
.answer-tag-chipbox{min-height:3.25rem;border:1px dashed var(--tw-gray-300);border-radius:.625rem;background:#fff;padding:.5rem;display:flex;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:.375rem}
.answer-tag-empty{width:100%;padding:.625rem;text-align:center;font-size:.8125rem;color:var(--tw-gray-500)}
.answer-tag-chip{display:inline-flex;align-items:center;min-width:0;max-width:100%;gap:.375rem;border:1px solid var(--tw-gray-300);background:var(--tw-gray-100);color:var(--tw-gray-800);border-radius:999px;padding:.25rem .3125rem .25rem .625rem;font-size:.8125rem;line-height:1.2;box-shadow:0 1px 1px rgba(15,23,42,.04)}
.answer-tag-chip.is-answer{border-color:rgba(27,132,255,.45);background:rgba(27,132,255,.12);color:var(--tw-primary)}
.answer-tag-chip-index{flex:0 0 auto;font-size:.6875rem;font-weight:700;color:inherit;opacity:.8}
.answer-tag-chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.answer-tag-remove{flex:0 0 auto;width:1.25rem;height:1.25rem;border:0;border-radius:999px;background:rgba(15,23,42,.08);color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1}
.answer-tag-remove:hover{background:rgba(15,23,42,.16)}
.answer-tag-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
.answer-tag-add-input{height:2.5rem}
.answer-tag-source{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem;min-height:3.75rem;background:#fff}
.dark .answer-tag-panel{background:#15171c;border-color:#2b2f3a}
.dark .answer-tag-count,.dark .answer-tag-chipbox,.dark .answer-tag-source{background:#111318;border-color:#2b2f3a}
.dark .answer-tag-chip{background:#20232c;border-color:#3a3f4d;color:#d4d7e0}
.dark .answer-tag-chip.is-answer{background:rgba(27,132,255,.18);border-color:rgba(147,197,253,.4);color:#93c5fd}
.dark .answer-tag-remove{background:rgba(255,255,255,.08)}
.dark .answer-tag-remove:hover{background:rgba(255,255,255,.16)}

/* ===== 어드민 표 가독성 — 헤더 세로 글자줄바꿈 금지 + 긴 상품명 2줄 클램프 ===== */
main .container-fixed table.table th{white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.leading-tight{line-height:1.25}

/* ===== 정산 요약 KPI: purge된 반응형 유틸리티와 후순위 충돌 없이 고정 ===== */
.settlement-summary-grid{display:grid;grid-template-columns:1fr}
@media(min-width:640px){.settlement-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.settlement-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===== 경량 모달(세부 키워드/작업량 분배 등) ===== */
.kw-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:1rem}
.kw-modal.open{display:flex}
.kw-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.kw-modal-card{position:relative;z-index:1;width:100%;max-width:560px;max-height:85vh;overflow:auto;margin:0}
.kw-modal-card.admin-captcha-card{max-width:720px;max-height:94vh}
@media(max-width:767px){
  .kw-modal-card.admin-captcha-card{max-height:96vh}
  .admin-captcha-widget-frame{height:calc(100vh - 220px);min-height:480px}
}

/* ===== 페이지 도움말(헤더 "?" 버튼 → .kw-modal) ===== */
.page-help-list{display:flex;flex-direction:column;gap:.85rem;margin:0}
.page-help-item{display:grid;grid-template-columns:minmax(6.5rem,9rem) 1fr;gap:.4rem 1rem;align-items:start}
.page-help-term{font-weight:600;color:#1f2937}
.page-help-desc{margin:0;color:#4b5563;font-size:.8125rem;line-height:1.5}
.dark .page-help-term{color:#e5e7eb}
.dark .page-help-desc{color:#9ca3af}
@media (max-width:480px){.page-help-item{grid-template-columns:1fr;gap:.15rem}}