:root {
  --c-bg: #e2e9fa;
  --c-card: #ffffff;
  --c-primary: #6c93f0;
  --c-hover: #b9cdef;
  --c-active: #5270b5;
  --c-text-main: #0c1829;
  --c-text-neutral: #545d70;
  --c-sidebar: #0f172a;
  --c-border: #e2e8f0;
  --c-muted-bg: #f8fafc;
  --c-success: #10b981;
  --c-warning: #f59e0b;
  --c-error: #ef4444;
}

/* Attendance lookup */
.attendance-page { display: grid; gap: 14px; }
.attendance-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 18px; padding: 18px; }
.attendance-toolbar h3, .attendance-toolbar p { margin: 0; }
.attendance-toolbar p { margin-top: 4px; color: var(--c-text-neutral); font-size: 13px; }
.attendance-filters { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.attendance-filters label { display: grid; gap: 5px; color: var(--c-text-neutral); font-size: 12px; font-weight: 700; }
.attendance-filters select, .attendance-filters input { min-width: 145px; height: 38px; border: 1px solid var(--c-border); border-radius: 8px; background: #fff; padding: 0 10px; }
.attendance-status { padding: 11px 14px; border: 1px solid var(--c-border); border-radius: 9px; background: var(--c-muted-bg); font-size: 13px; }
.attendance-status.loading { color: #1d4f91; background: #eff6ff; border-color: #bfdbfe; }
.attendance-status.success { color: #166534; background: #f0fdf4; border-color: #bbdfc5; }
.attendance-status.error, .attendance-alert { color: #b91c1c; background: #fff7f7; border: 1px solid #fecaca; }
.attendance-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.attendance-metrics article { padding: 18px; border: 1px solid var(--c-border); border-radius: 11px; background: #fff; box-shadow: 0 5px 16px rgba(41, 56, 91, .05); }
.attendance-metrics article.metric-warning { border-color: #fecaca; background: #fffafa; }
.attendance-metrics article.metric-warning strong, .attendance-metrics article.metric-warning b { color: #b91c1c; }
.attendance-metrics span { color: var(--c-text-neutral); font-size: 12px; font-weight: 800; }
.attendance-metrics strong { display: block; margin: 10px 0 6px; font-size: 30px; color: var(--c-text-main); }
.attendance-metrics small { margin-left: 3px; font-size: 14px; }
.attendance-metrics p { margin: 0; color: var(--c-text-neutral); font-size: 12px; }
.attendance-alert { margin-top: 12px; padding: 10px 13px; border-radius: 8px; font-size: 13px; }
.attendance-history { margin-top: 14px; overflow: hidden; }
.attendance-table-wrap { overflow-x: auto; }
.attendance-history table { width: 100%; border-collapse: collapse; font-size: 13px; }
.attendance-history th, .attendance-history td { padding: 10px 12px; border-top: 1px solid var(--c-border); text-align: left; white-space: nowrap; }
.attendance-history th { color: var(--c-text-neutral); background: var(--c-muted-bg); font-size: 12px; }
@media (max-width: 800px) { .attendance-toolbar { align-items: stretch; flex-direction: column; } .attendance-metrics { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .attendance-filters { flex-direction: column; align-items: stretch; } .attendance-filters label, .attendance-filters select, .attendance-filters input, .attendance-filters .btn { width: 100%; } }

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text-main);
  font-family: Pretendard, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
}

details>summary {
  list-style: none;
}

details>summary::-webkit-details-marker {
  display: none;
}

details>summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 6px;
  color: var(--c-active);
  font-size: 11px;
  font-weight: 900;
}

details[open]>summary::before {
  content: "▼";
}

.mobile-menu {
  display: none;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 170px;
  min-height: 100vh;
  padding: 16px 14px;
  background: var(--c-sidebar);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--c-primary);
  display: grid;
  place-items: center;
  font-weight: 800;
}

.brand h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

.brand p,
.user-box span,
.sidebar-footer {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
}

.user-box {
  padding: 10px 12px 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-box strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.user-box span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.2;
  opacity: 0.85;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #e2e8f0;
  cursor: pointer;
  text-align: left;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.nav-item.active {
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
}

.sidebar-footer {
  margin-top: auto;
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 38px 48px;
  overflow-y: auto;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--c-active);
  font-size: 13px;
  font-weight: 800;
}

.page-header h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
}

.page-header p {
  margin: 8px 0 0;
  color: var(--c-text-neutral);
}

.header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn.primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.btn.secondary {
  background: #fff;
  color: var(--c-text-neutral);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.summary-card,
.panel {
  background: var(--c-card);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(90, 116, 165, 0.12);
}

.summary-card {
  padding: 18px;
}

.summary-card span {
  display: block;
  color: var(--c-text-neutral);
  font-size: 13px;
  font-weight: 700;
}

.summary-card strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.1;
}

.summary-card[data-tone="success"] strong {
  color: var(--c-success);
}

.summary-card[data-tone="primary"] strong {
  color: var(--c-active);
}

.launchpad-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr) minmax(260px, 0.8fr);
  gap: 18px;
  margin-bottom: 18px;
  align-items: stretch;
}

.launch-panel {
  min-width: 0;
}

.ready-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ready-tool {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-muted-bg);
  color: var(--c-text-main);
  cursor: pointer;
  text-align: left;
}

.ready-tool:hover {
  border-color: var(--c-primary);
  background: #eef5ff;
}

.ready-tool span {
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ready-tool strong {
  color: var(--c-text-neutral);
  font-size: 12px;
}

.next-list,
.release-strip {
  display: grid;
  gap: 10px;
}

.next-item,
.release-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-muted-bg);
}

.next-item div,
.release-item {
  min-width: 0;
}

.next-item strong,
.next-item span,
.release-item strong,
.release-item span {
  display: block;
}

.next-item strong,
.release-item strong {
  overflow: hidden;
  color: var(--c-text-main);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.next-item div>span,
.release-item span {
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 800;
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.panel {
  padding: 20px;
}

/* 사용자 가이드 아코디언 스타일 */
.guide-accordion {
  background: #f1f5f9;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.guide-accordion summary {
  cursor: pointer;
  user-select: none;
  font-weight: 800;
  color: var(--c-text-main);
  font-size: 14.5px;
  display: flex;
  align-items: center;
}

.guide-accordion[open] {
  border-color: #cbd5e1;
}

.guide-accordion-content {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--c-text-neutral);
  line-height: 1.6;
}

.guide-accordion-content p {
  margin: 0 0 8px 0;
}

.guide-accordion-content p:last-child {
  margin-bottom: 0;
}


.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-header.compact {
  align-items: flex-start;
}

.panel h3 {
  margin: 0;
  font-size: 18px;
}

.panel p {
  margin: 4px 0 0;
  color: var(--c-text-neutral);
  font-size: 14px;
}

.search-input {
  width: 240px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  outline: none;
}

.search-input:focus {
  border-color: var(--c-primary);
}

.tool-groups {
  display: grid;
  gap: 14px;
}

.tool-group {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
}

.tool-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--c-muted-bg);
  font-weight: 800;
}

.tool-list {
  display: grid;
}

.tool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px 78px;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 10px 14px;
  border-top: 1px solid var(--c-border);
}

.tool-row.runnable {
  cursor: pointer;
}

.tool-row.runnable:hover {
  background: #f8fbff;
}

.tool-name {
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #edf2ff;
  color: var(--c-active);
}

.badge.priority-high {
  background: #fee2e2;
  color: #b91c1c;
}

.badge.priority-medium {
  background: #fef3c7;
  color: #92400e;
}

.badge.priority-low {
  background: #dcfce7;
  color: #166534;
}

.tool-action {
  min-height: 32px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
  color: var(--c-active);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.tool-action:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.updates {
  display: grid;
  gap: 12px;
}

.update-item {
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-muted-bg);
}

.update-date {
  color: var(--c-active);
  font-size: 12px;
  font-weight: 800;
}

.update-item strong {
  display: block;
  margin-top: 4px;
}

.update-item p {
  margin-top: 6px;
}

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: grid;
  gap: 10px;
}

.toast {
  min-width: 280px;
  max-width: 420px;
  padding: 14px 16px;
  border-left: 5px solid var(--c-primary);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.mobile-menu {
  display: none;
}

.tool-workspace {
  display: block;
}

.tool-page {
  display: grid;
  gap: 16px;
}

.tool-page-header {
  display: flex;
  justify-content: flex-start;
}

.tool-layout {
  display: grid;
  grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.form-panel,
.result-panel {
  display: grid;
  gap: 16px;
}

.field-row,
.field-grid {
  display: grid;
  gap: 14px;
}

.field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

label {
  display: grid;
  gap: 7px;
  color: var(--c-text-neutral);
  font-size: 13px;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: #fff;
  color: var(--c-text-main);
  outline: none;
}

input,
select {
  height: 44px;
  padding: 0 12px;
}

textarea {
  min-height: 160px;
  padding: 12px;
  resize: vertical;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-primary);
}

.check-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
}

.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.file-input {
  display: none;
}

.tiff-dropzone {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 24px;
  border: 1px dashed #b8c7df;
  border-radius: 10px;
  background: var(--c-muted-bg);
  color: var(--c-text-neutral);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tiff-dropzone strong,
.tiff-dropzone span {
  display: block;
}

.tiff-dropzone strong {
  color: var(--c-text-main);
  font-size: 16px;
}

.tiff-dropzone span {
  margin-top: 6px;
  max-width: 360px;
  font-size: 13px;
}

.tiff-dropzone:hover,
.tiff-dropzone.dragover {
  border-color: var(--c-primary);
  background: #eef5ff;
}

.qr-preview {
  display: grid;
  place-items: center;
  min-height: 360px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: var(--c-muted-bg);
}

.qr-preview canvas,
.qr-preview img {
  max-width: 100%;
  height: auto !important;
}

.qr-placeholder,
.tool-status {
  color: var(--c-text-neutral);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.tool-status {
  margin: 12px 0;
}

.satisfaction-action-list,
.satisfaction-steps {
  display: grid;
  gap: 12px;
}

.satisfaction-action {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
  color: var(--c-text-main);
  text-decoration: none;
}

.satisfaction-action:hover {
  border-color: var(--c-primary);
  background: var(--c-muted-bg);
}

.satisfaction-action.primary-action {
  border-color: #9bb8e8;
  background: #eef5ff;
}

.satisfaction-action span,
.satisfaction-steps p {
  color: var(--c-text-neutral);
  font-size: 13px;
  font-weight: 800;
}

.satisfaction-action strong {
  font-size: 15px;
}

.satisfaction-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.satisfaction-steps article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
}

.satisfaction-steps article>span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #edf2ff;
  color: var(--c-active);
  font-weight: 900;
}

.satisfaction-steps strong,
.satisfaction-steps p {
  display: block;
}

.satisfaction-steps p {
  margin: 5px 0 0;
  line-height: 1.55;
}

.file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  cursor: pointer;
}

.satisfaction-layout {
  grid-template-columns: minmax(420px, 560px) minmax(0, 1fr);
}

.satisfaction-workbench {
  display: grid;
  grid-template-columns: minmax(520px, 1.1fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: stretch;
}

.satisfaction-workbench>.panel {
  height: 100%;
}

.satisfaction-basis-panel,
.satisfaction-raw-panel {
  align-content: start;
}

.satisfaction-raw-panel {
  order: 1;
}

.satisfaction-basis-panel {
  order: 2;
}

.satisfaction-raw-panel textarea {
  min-height: 300px;
}

.satisfaction-guide-panel {
  background: #cdcecf;
}

.satisfaction-guide-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.satisfaction-guide-steps article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
}

.satisfaction-guide-steps strong {
  color: var(--c-text-main);
  font-size: 13px;
}

.satisfaction-guide-steps span,
.field-help {
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.satisfaction-guide-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #c7d7f4;
  border-radius: 8px;
  background: #eef5ff;
  color: var(--c-text-main);
  font-size: 13px;
  font-weight: 800;
}

.satisfaction-guide-note span {
  color: var(--c-text-neutral);
  font-weight: 700;
}

.satisfaction-basis-panel.is-loading-db {
  background: #f5f7fb;
}

.satisfaction-combobox.is-disabled input,
.satisfaction-basis-panel button:disabled,
.satisfaction-basis-panel input:disabled {
  border-color: #d7deea;
  background: #eef2f7;
  color: #7b8798;
  cursor: not-allowed;
}

.satisfaction-combobox.is-disabled::after {
  content: "DB 확인 중";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #7b8798;
  font-size: 11px;
  font-weight: 900;
  pointer-events: none;
}

.satisfaction-register-point {
  background: var(--c-active);
  border-color: var(--c-active);
  color: #fff;
}

.satisfaction-workbench .field-row:has(#satisfaction-business) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.satisfaction-workbench .field-row:has(#satisfaction-business)>label,
.satisfaction-workbench .field-row:has(#satisfaction-business)>.satisfaction-register-box {
  grid-column: 1 / -1;
}

.satisfaction-workbench .field-row:has(#satisfaction-business)>label:has(#satisfaction-business),
.satisfaction-workbench .field-row:has(#satisfaction-business)>label:has(#satisfaction-teacher) {
  grid-column: 1;
}

.satisfaction-workbench .field-row:has(#satisfaction-business)>.satisfaction-toggle-wrapper {
  grid-column: 2;
  align-self: end;
  display: flex;
  flex-direction: column;
}

.satisfaction-workbench .field-row:has(#satisfaction-business)>.field-grid {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
}

.required-mark {
  margin-left: 4px;
  color: var(--c-error);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--c-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.satisfaction-summary,
.satisfaction-results,
.satisfaction-question-result-list,
.satisfaction-question-list {
  display: grid;
  gap: 12px;
}

.satisfaction-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.satisfaction-links a {
  color: var(--c-active);
  font-size: 13px;
  font-weight: 900;
}

.satisfaction-register-box {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-muted-bg);
}

.satisfaction-combobox {
  position: relative;
}

.satisfaction-combo-list {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 20;
  max-height: 260px;
  margin-top: 6px;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.satisfaction-combo-list button,
.satisfaction-combo-empty {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-text-main);
  text-align: left;
  font-size: 13px;
  font-weight: 800;
}

.satisfaction-combo-list button {
  cursor: pointer;
}

.satisfaction-combo-list button:hover {
  background: var(--c-muted-bg);
  color: var(--c-active);
}

.satisfaction-combo-list button:last-child {
  border-bottom: 0;
}

.satisfaction-combo-empty {
  color: var(--c-text-neutral);
}

.satisfaction-class-key-box {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #bfd2ef;
  border-radius: 10px;
  background: #f8fbff;
}

.satisfaction-class-key-box span {
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 900;
}

.satisfaction-class-key-box strong {
  min-width: 0;
  color: var(--c-active);
  font-size: 17px;
  overflow-wrap: anywhere;
}

.satisfaction-basis-panel .satisfaction-class-key-box {
  margin-top: 4px;
}

.satisfaction-progress {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.22);
}

.satisfaction-progress-box {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(360px, 100%);
  padding: 24px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  text-align: center;
}

.satisfaction-progress-box strong {
  color: var(--c-text-main);
  font-size: 16px;
}

.satisfaction-progress-box span {
  color: var(--c-text-neutral);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.satisfaction-progress-spinner {
  width: 34px;
  height: 34px;
  border: 4px solid #dbeafe;
  border-top-color: var(--c-active);
  border-radius: 50%;
}

.satisfaction-progress.is-active .satisfaction-progress-spinner {
  animation: satisfaction-spin 0.8s linear infinite;
}

@keyframes satisfaction-spin {
  to {
    transform: rotate(360deg);
  }
}

.satisfaction-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.satisfaction-summary-row .satisfaction-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.satisfaction-summary-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.satisfaction-bottom-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}

.satisfaction-bottom-actions .satisfaction-register-actions {
  justify-content: flex-end;
}

.satisfaction-detail-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 238px;
  padding: 3px;
  border: 1px solid var(--c-border);
  border-radius: 9px;
  background: var(--c-muted-bg);
}

.satisfaction-detail-toggle button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--c-text-neutral);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.satisfaction-detail-toggle button.active {
  background: #fff;
  color: var(--c-active);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.satisfaction-mini-metric {
  display: grid;
  align-content: center;
  min-width: 150px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
}

.satisfaction-mini-metric span {
  color: var(--c-text-neutral);
  font-size: 11px;
  font-weight: 800;
}

.satisfaction-mini-metric strong {
  color: var(--c-active);
  font-size: 18px;
  line-height: 1.1;
}

.satisfaction-metric {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-muted-bg);
}

.satisfaction-metric span {
  display: block;
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 800;
}

.satisfaction-metric strong {
  display: block;
  margin-top: 6px;
  color: var(--c-active);
  font-size: 26px;
  line-height: 1.1;
}

.satisfaction-mapping {
  display: grid;
  gap: 16px;
}

.satisfaction-question-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(90, 116, 165, 0.04);
  width: 100%;
  max-width: 70%;
  transition: all 0.2s ease;
}

.satisfaction-question-card.is-instructor {
  margin-right: auto;
  margin-left: 0;
}

.satisfaction-question-card.is-myown {
  margin-left: auto;
  margin-right: 0;
  background: #f0fdfa;
  border-color: #b2f5ea;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.05);
}

.satisfaction-question-card.is-myown .q-metric-box {
  background: #e6fffa;
}

.satisfaction-question-card.is-myown .satisfaction-reply-block {
  background: #e6fffa;
}

.satisfaction-question-card.is-excluded {
  background: #334155;
  border-color: #1e293b;
  color: #e2e8f0;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.85;
}

.satisfaction-question-card.is-excluded .q-title-text {
  color: #f8fafc;
}

.satisfaction-question-card.is-excluded .q-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.satisfaction-question-card.is-excluded .q-kind-badge {
  background: #475569;
  color: #cbd5e1;
}

/* 아코디언 토글 스타일 */
.satisfaction-question-card.is-collapsed .q-card-body {
  display: none;
}

.satisfaction-question-card.is-collapsed .q-card-header {
  border-bottom: 0;
  padding-bottom: 0;
}

/* 카드 헤더 */
.q-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  padding-bottom: 14px;
  transition: all 0.2s ease;
}

.q-card-header:hover .q-title-text {
  color: var(--c-primary);
}

.satisfaction-question-card.is-excluded .q-card-header:hover .q-title-text {
  color: #93c5fd;
}

.q-card-title-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.q-kind-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.q-kind-badge.score-kind {
  background: #eff6ff;
  color: #1d4ed8;
}

.q-kind-badge.text-kind {
  background: #f5f3ff;
  color: #6d28d9;
}

.q-title-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--c-text-main);
  font-weight: 700;
}

.q-category-action {
  flex-shrink: 0;
}

/* 분류 토글 세그먼트 */
.satisfaction-category-toggle {
  display: flex;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-muted-bg);
  padding: 2px;
}

.satisfaction-category-toggle button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.satisfaction-category-toggle button:hover {
  color: var(--c-text-main);
}

.satisfaction-category-toggle button.active {
  background: #fff;
  color: var(--c-active);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

.satisfaction-category-toggle button[data-category="강사(강의 관련)"].active {
  color: #fff;
  background: var(--c-primary);
}

.satisfaction-category-toggle button[data-category="마이온(운영 등)"].active {
  color: #fff;
  background: #0f766e;
}

.satisfaction-category-toggle button[data-category="제외"].active {
  color: #fff;
  background: #64748b;
}

/* 카드 바디 */
.q-card-body {
  min-width: 0;
}

.q-card-content-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}

.q-card-content-text-only {
  display: grid;
  gap: 12px;
}

/* 지표 영역 */
.q-metrics-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.q-text-meta-row {
  display: flex;
}

.q-metric-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 8px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-muted-bg);
  text-align: center;
  min-height: 96px;
  gap: 8px;
}

.q-metric-box-inline {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-muted-bg);
  text-align: center;
  gap: 8px;
}

.q-metric-box.highlight-purple {
  background: #faf5ff;
  border-color: #e9d5ff;
}

.q-metric-box.highlight-blue {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.q-metric-label {
  color: var(--c-text-neutral);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.q-metric-value {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  font-weight: 800;
  color: var(--c-text-main);
  line-height: 1;
}

.q-metric-value-inline {
  font-size: 14px;
  font-weight: 800;
  color: var(--c-text-main);
}

.q-metric-box.highlight-purple .q-metric-value {
  color: #7c3aed;
}

.q-metric-box.highlight-blue .q-metric-value {
  color: #16a34a;
}

.q-metric-value .max-val {
  font-size: 12px;
  color: var(--c-text-neutral);
  font-weight: 500;
}

/* 차트 영역 */
.q-chart-section {
  display: grid;
  gap: 10px;
}

.q-chart-title,
.section-subtitle {
  font-size: 12px;
  font-weight: 800;
  color: var(--c-text-neutral);
}

.satisfaction-distribution-chart {
  display: grid;
  gap: 6px;
}

.distribution-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.dist-label {
  width: 30px;
  font-weight: 800;
  color: var(--c-text-neutral);
  text-align: right;
  flex-shrink: 0;
}

.dist-bar-bg {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: #f1f5f9;
  overflow: hidden;
  position: relative;
}

.dist-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: #3b82f6;
  transition: width 0.3s ease;
}

.distribution-row:nth-child(1) .dist-bar-fill {
  background: #10b981;
}

.distribution-row:nth-child(2) .dist-bar-fill {
  background: #3b82f6;
}

.distribution-row:nth-child(3) .dist-bar-fill {
  background: #f59e0b;
}

.distribution-row:nth-child(4) .dist-bar-fill {
  background: #f97316;
}

.distribution-row:nth-child(5) .dist-bar-fill {
  background: #ef4444;
}

.dist-count {
  width: 76px;
  font-size: 11px;
  color: var(--c-text-neutral);
  flex-shrink: 0;
}

.dist-count strong {
  color: var(--c-text-main);
  font-weight: 800;
}

/* 주관식 피드백 블록 */
.satisfaction-reply-block {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-muted-bg);
}

.satisfaction-reply-block strong {
  font-size: 12px;
  color: var(--c-text-neutral);
}

.satisfaction-reply-block ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 16px;
  max-height: 240px;
  overflow-y: auto;
}

.satisfaction-reply-block li {
  color: var(--c-text-main);
  font-size: 13px;
  line-height: 1.4;
}

.satisfaction-lookup-page {
  display: grid;
  gap: 16px;
}

.satisfaction-lookup-filter-panel {
  display: grid;
  gap: 14px;
}

.lookup-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}

.lookup-filter-grid label {
  display: grid;
  gap: 6px;
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 800;
}

.lookup-filter-grid input,
.lookup-filter-grid select {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
  color: var(--c-text);
}

.lookup-check {
  grid-template-columns: 18px 1fr !important;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-muted-bg);
}

.lookup-check input {
  width: 16px;
  min-height: 16px;
  padding: 0;
}

.lookup-status-panel {
  padding: 12px 14px;
  color: var(--c-text-neutral);
  font-size: 13px;
}

.lookup-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.lookup-main-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
  gap: 16px;
  align-items: start;
}

.lookup-column-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.4fr);
  gap: 16px;
  align-items: start;
}

.lookup-trend-list,
.lookup-class-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}

.lookup-trend-row {
  display: grid;
  grid-template-columns: 84px repeat(3, minmax(70px, 1fr));
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 13px;
}

.lookup-trend-row span {
  color: var(--c-text-neutral);
}

.lookup-class-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 170px 112px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
}

.lookup-class-row:hover {
  border-color: var(--c-primary);
  background: #f8fbff;
}

.lookup-class-row strong,
.lookup-class-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lookup-class-row em {
  color: var(--c-text-neutral);
  font-style: normal;
}

.lookup-class-row b {
  text-align: right;
  font-size: 13px;
}

.lookup-class-row small {
  grid-column: 2 / -1;
  color: #b91c1c;
  font-weight: 800;
}

.lookup-detail-panel {
  display: grid;
  gap: 12px;
}

.lookup-class-panel .satisfaction-question-result-list {
  grid-template-columns: 1fr;
}

.lookup-class-card {
  width: 100%;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.lookup-class-card:hover {
  border-color: var(--c-primary);
  background: #f8fbff;
}

.lookup-rank-table {
  overflow-x: auto;
}

.lookup-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13px;
}

.lookup-table th,
.lookup-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}

.lookup-table th {
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 900;
}

.lookup-table th button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-active);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lookup-table td:first-child {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

@media (max-width: 600px) {
  .satisfaction-lookup-page,
  .satisfaction-lookup-page .panel,
  .lookup-rank-table {
    min-width: 0;
    max-width: 100%;
  }

  .lookup-rank-table {
    overflow-x: visible;
  }

  .lookup-table {
    display: block;
    width: 100% !important;
    min-width: 0;
  }

  .lookup-table thead {
    display: none;
  }

  .lookup-table tbody {
    display: grid;
    gap: 10px;
  }

  .lookup-table tr {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 10px;
    padding: 10px;
    border: 1px solid var(--c-border) !important;
    border-radius: 10px;
    background: #fff;
  }

  .lookup-table td {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 4px 0 !important;
    border: 0;
    text-align: right !important;
  }

  .lookup-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--c-text-neutral);
    font-size: 11px;
    font-weight: 800;
  }

  .lookup-table td.lookup-rank-position {
    grid-column: 1;
    grid-row: 1 / span 8;
    display: grid;
    place-items: start center;
    padding-top: 4px !important;
    font-size: 17px !important;
  }

  .lookup-table td.lookup-rank-position::before {
    display: none;
  }

  .lookup-table td > *,
  .lookup-table .rank-click-target {
    min-width: 0;
    max-width: 100% !important;
  }

  .lookup-table td:first-child {
    max-width: none;
    overflow: visible;
    white-space: normal;
  }

  .lookup-filter-grid-compact,
  .lookup-filter-grid-compact > div,
  .satisfaction-lookup-page .panel-header,
  .satisfaction-lookup-page .panel-header > div {
    min-width: 0;
    max-width: 100%;
  }

  #lookup-class-search {
    width: 100% !important;
    max-width: 100%;
  }
}

.lookup-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.lookup-cache-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-muted-bg);
  color: var(--c-text-neutral);
  font-size: 13px;
}

.lookup-cache-info span {
  font-weight: 800;
}

.lookup-cache-info strong {
  color: var(--c-active);
}

.lookup-cache-info em {
  margin-left: auto;
  font-style: normal;
}

.naver-cafe-page {
  display: grid;
  gap: 16px;
}

.naver-cafe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.naver-cafe-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
}

.naver-cafe-grid {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(340px, 1fr) minmax(360px, 1fr);
  gap: 16px;
  align-items: start;
}

.naver-cafe-builder-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  height: 950px;
}

.naver-cafe-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
  align-items: start;
}

.naver-cafe-sidebar-actions {
  display: grid;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1024px) {

  .naver-cafe-builder-preview-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .naver-cafe-action-grid {
    grid-template-columns: 1fr;
  }
  .naver-cafe-builder,
  .naver-cafe-preview {
    height: auto;
  }
}

.naver-cafe-targets {
  display: grid;
  gap: 12px;
}

.naver-cafe-builder,
.naver-cafe-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
  overflow: hidden;
}

.naver-cafe-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.naver-cafe-preview .naver-preview-output {
  flex: 1 1 0%;
  max-height: none;
  min-height: 320px;
  overflow-y: auto;
}

.naver-auth-panel,
.naver-db-panel {
  display: grid;
  gap: 12px;
  height: 100%;
}

.naver-auth-help-ok,
.naver-auth-help-danger {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.naver-auth-help-ok {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
  font-weight: 800;
}

.naver-auth-help-danger {
  border: 1px solid #fecaca;
  background: #fff7f7;
  color: #991b1b;
}

.naver-auth-help-danger code {
  width: fit-content;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 6px;
  background: #fff;
  color: #7f1d1d;
  overflow-wrap: anywhere;
}

.naver-auth-grid {
  display: grid;
  grid-template-columns: 150px minmax(260px, 1fr) 120px;
  gap: 10px;
  align-items: center;
}

.naver-auth-grid input {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
}

.naver-auth-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-muted-bg);
}

.naver-auth-status.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.naver-auth-status.warn {
  border-color: #fed7aa;
  background: #fff7ed;
}

.naver-auth-status.danger {
  border-color: #fecaca;
  background: #fff7f7;
}

.naver-auth-status span {
  color: var(--c-text-neutral);
  font-size: 13px;
}

.naver-field {
  display: grid;
  gap: 6px;
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 800;
}

.naver-field input,
.naver-field textarea,
.naver-field select,
.naver-body-row input,
.naver-body-row textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
  color: var(--c-text);
}

.naver-body-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.naver-table-header {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(240px, 2.2fr) 132px;
  gap: 0;
  padding: 10px;
  background: var(--c-muted-bg);
  border: 1px solid var(--c-border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  font-weight: 800;
  font-size: 12px;
  color: var(--c-text-neutral);
}

.naver-table-header span {
  padding: 0 4px;
}

.naver-table-header span:not(:last-child) {
  border-right: 1px solid transparent;
  /* Align visually with cells */
}

.naver-table-container {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 150px;
}

.naver-body-rows {
  flex: 1 1 0%;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: 0 0 8px 8px;
  background: #fff;
}

.naver-body-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(240px, 2.2fr) 132px;
  gap: 0;
  align-items: stretch;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  background: #fff;
}

.naver-body-row.image-placeholder-row {
  background: #f0fdf4;
}

.naver-body-row.image-placeholder-row input[data-naver-section],
.naver-body-row.image-placeholder-row textarea[data-naver-content] {
  background: #f0fdf4;
}

.naver-body-row.image-placeholder-row textarea[data-naver-content] {
  color: #15803d;
  font-weight: 800;
}

.naver-body-row:last-child {
  border-bottom: 0;
}

.naver-body-row input[data-naver-section],
.naver-body-row textarea[data-naver-content] {
  border: 0;
  border-radius: 0;
  height: 100%;
  padding: 10px 12px;
  background: transparent;
  outline: none;
  box-shadow: none;
  font-family: inherit;
}

.naver-body-row input[data-naver-section] {
  border-right: 1px solid var(--c-border);
  color: #1d4ed8;
  /* Previews bold blue link styling */
  font-weight: 800;
  font-size: 14px;
}

.naver-body-row textarea[data-naver-content] {
  line-height: 1.6;
  font-size: 13px;
  color: var(--c-text-main);
  resize: vertical;
  min-height: 72px;
}

.naver-row-actions {
  display: grid;
  grid-template-columns: 34px 34px minmax(48px, 1fr);
  min-height: 44px;
  border-left: 1px solid var(--c-border);
}

.naver-row-actions button {
  border: 0;
  border-radius: 0;
  background: transparent;
  height: 100%;
  min-height: 44px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.naver-row-actions button:not(:last-child) {
  border-right: 1px solid var(--c-border);
}

.naver-row-actions button[data-naver-move-row] {
  color: var(--c-active);
}

.naver-row-actions button[data-naver-remove-row] {
  color: var(--c-error);
}

.naver-row-actions button[data-naver-move-row]:hover {
  background: #eff6ff;
}

.naver-row-actions button[data-naver-remove-row]:hover {
  background: #fff1f2;
}

.naver-image-list {
  display: grid;
  gap: 6px;
}

.naver-image-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
}

.naver-image-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #edf2ff;
  color: var(--c-active);
  font-size: 12px;
  font-weight: 900;
}

.naver-preview-output {
  min-height: 150px;
  max-height: 680px;
  overflow: auto;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
}

.naver-preview-card {
  padding: 16px;
}

.naver-preview-card h3 {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
}

.naver-preview-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.naver-preview-images span {
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--c-muted-bg);
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 800;
}

.naver-preview-html {
  color: var(--c-text-main);
  line-height: 1.55;
}

.naver-target-list,
.naver-dry-list {
  display: grid;
  gap: 8px;
  max-height: 620px;
  overflow: auto;
}

.naver-target-row {
  display: grid;
  grid-template-columns: 20px minmax(120px, 1fr) minmax(90px, 0.8fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.naver-target-row em {
  grid-column: 2 / -1;
  color: var(--c-text-neutral);
  font-size: 12px;
  font-style: normal;
}

.naver-dry-summary,
.naver-dry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
}

.naver-dry-summary.ok,
.naver-dry-row.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.naver-dry-summary.warn,
.naver-dry-row.warn {
  border-color: #fecaca;
  background: #fff7f7;
}

.lookup-warning,
.lookup-empty {
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-muted-bg);
  color: var(--c-text-neutral);
}

.lottery-meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 10px;
  background: var(--c-muted-bg);
}

.lottery-meter span,
.pool-info {
  color: var(--c-text-neutral);
  font-size: 13px;
  font-weight: 800;
}

.lottery-meter strong {
  color: var(--c-active);
  font-size: 32px;
  line-height: 1;
}

.number-result,
.name-result {
  display: flex;
  min-height: 220px;
  align-content: center;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: #fff;
  color: var(--c-text-neutral);
  text-align: center;
}

.number-result span,
.name-result span {
  display: inline-grid;
  place-items: center;
  min-width: 76px;
  min-height: 54px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #edf2ff;
  color: var(--c-active);
  font-size: 24px;
  font-weight: 900;
}

.name-result span {
  min-width: 120px;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.history-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.history-card p {
  margin: 0;
}

.download-list {
  display: grid;
  gap: 10px;
  color: var(--c-text-neutral);
}

.download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-muted-bg);
}

.download-item strong,
.download-item span {
  display: block;
}

.download-item strong {
  color: var(--c-text-main);
}

.download-item span {
  margin-top: 2px;
  font-size: 13px;
}

.download-item.error {
  border-color: #fecaca;
  background: #fff1f2;
}

.empty-state-inline {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: var(--c-muted-bg);
  color: var(--c-text-neutral);
  font-weight: 700;
  text-align: center;
}

.tiff-queue {
  display: grid;
  gap: 12px;
}

.tiff-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: #fff;
}

.tiff-card.processing {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.tiff-card.success {
  border-color: #bbf7d0;
}

.tiff-card.error {
  border-color: #fecaca;
  background: #fff1f2;
}

.tiff-thumb {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-muted-bg);
}

.tiff-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tiff-file-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 36px;
  border-radius: 8px;
  background: #edf2ff;
  color: var(--c-active);
  font-size: 13px;
  font-weight: 900;
}

.tiff-meta {
  min-width: 0;
}

.tiff-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tiff-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--c-text-main);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tiff-meta>span,
.tiff-meta p {
  margin: 4px 0 0;
  color: var(--c-text-neutral);
  font-size: 13px;
}

.tiff-progress {
  height: 7px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.tiff-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-primary);
  transition: width 0.2s ease;
}

.tiff-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge.status-pending {
  background: #f1f5f9;
  color: #475569;
}

.badge.status-processing {
  background: #dbeafe;
  color: #1d4ed8;
}

.badge.status-success {
  background: #dcfce7;
  color: #166534;
}

.badge.status-error {
  background: #fee2e2;
  color: #b91c1c;
}

.wide-tool-layout {
  grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.05fr);
}

.blacklist-source-panel {
  margin-bottom: 16px;
}

.blacklist-source-panel .button-row {
  justify-content: flex-end;
}

.blacklist-db-status {
  display: grid;
  gap: 10px;
}

.blacklist-db-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.blacklist-db-card {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-muted-bg);
}

.blacklist-db-card span,
.blacklist-source-note {
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 800;
}

.blacklist-db-card strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--c-text-main);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blacklist-source-note {
  margin: 0;
}

.blacklist-mapping {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-muted-bg);
}

.mapping-group {
  display: grid;
  gap: 10px;
}

.mapping-group>strong {
  color: var(--c-text-main);
  font-size: 14px;
}

.blacklist-summary,
.blacklist-results {
  display: grid;
  gap: 14px;
}

.blacklist-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.blacklist-metric {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-muted-bg);
}

.blacklist-metric span,
.blacklist-result-header span {
  display: block;
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 800;
}

.blacklist-metric strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--c-active);
  font-size: 26px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blacklist-metric.danger strong {
  color: var(--c-error);
}

.blacklist-metric.success strong {
  color: var(--c-success);
}

.blacklist-result-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.blacklist-result-header strong {
  font-size: 16px;
}

.blacklist-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: 10px;
}

.mini-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #fff;
}

.mini-table th,
.mini-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: middle;
}

.naver-cafe-builder-preview-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
  margin-bottom: 18px;
}

.naver-cafe-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
}

.mini-table th {
  background: var(--c-muted-bg);
  color: var(--c-text-neutral);
  font-size: 12px;
  font-weight: 900;
}

.mini-table td {
  color: var(--c-text-main);
  font-size: 13px;
}

.mini-table tbody tr:last-child td {
  border-bottom: 0;
}

.mini-table tbody tr:hover {
  background-color: #f8fafc;
}

.mini-table tbody tr.selected-row {
  background-color: #eff6ff;
}

.mini-table tbody tr.selected-row:hover {
  background-color: #dbeafe;
}

@media (max-width: 980px) {

  .workspace-grid,
  .launchpad-grid,
  .summary-grid,
  .tool-layout,
  .history-grid,
  .satisfaction-workbench,
  .naver-cafe-builder-preview-grid,
  .naver-cafe-action-grid,
  .naver-auth-db-row {
    grid-template-columns: 1fr !important;
  }

  .satisfaction-guide-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-header {
    flex-direction: column;
  }

  .header-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .mobile-menu {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1001;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: var(--c-primary);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    z-index: 1000;
    transition: left 0.25s ease;
  }

  .sidebar.active {
    left: 0;
  }

  .main-content {
    padding: 76px 16px 24px;
  }

  .panel,
  .summary-card {
    border-radius: 10px;
  }

  .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .search-input {
    width: 100%;
  }

  .tool-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tiff-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .tiff-thumb {
    width: 72px;
    height: 72px;
  }

  .tiff-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .ready-tool-grid {
    grid-template-columns: 1fr;
  }

  .blacklist-metrics,
  .blacklist-db-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .satisfaction-metrics {
    grid-template-columns: 1fr;
  }

  .satisfaction-summary-row .satisfaction-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .satisfaction-summary-actions {
    justify-content: flex-start;
  }

  .satisfaction-mini-metric {
    flex: 1 1 180px;
  }

  .satisfaction-guide-steps,
  .satisfaction-detail-toggle {
    grid-template-columns: 1fr;
  }

  .lookup-filter-grid,
  .lookup-summary-grid,
  .lookup-main-grid,
  .lookup-column-grid {
    grid-template-columns: 1fr;
  }

  .naver-cafe-metrics,
  .naver-cafe-grid,
  .naver-body-row,
  .naver-auth-grid {
    grid-template-columns: 1fr;
  }

  .naver-cafe-actions,
  .naver-body-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .lookup-class-row {
    grid-template-columns: 1fr;
  }

  .lookup-class-row b {
    text-align: left;
  }

  .lookup-trend-row {
    grid-template-columns: 1fr 1fr;
  }

  .satisfaction-bottom-actions .satisfaction-register-actions {
    justify-content: flex-start;
  }

  .satisfaction-question-card {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .q-card-content-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .q-metrics-section {
    grid-template-columns: repeat(3, 1fr);
  }

  .q-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .number-result span,
  .name-result span {
    min-width: 64px;
    font-size: 20px;
  }
}

/* 라이트박스 줌 모달 */
.image-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.image-zoom-overlay.active {
  opacity: 1;
}

.image-zoom-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-zoom-img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-zoom-overlay.active .image-zoom-img {
  transform: scale(1);
}

.image-zoom-title {
  color: #fff;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.image-zoom-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.image-zoom-close:hover {
  opacity: 1;
}

.preview-card div[id$="-wrap"] img {
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.preview-card div[id$="-wrap"] img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 2단계 계층형 사이드바 스타일 (메뉴 컴팩트화 적용) */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 3px;
}

.nav-group-header {
  font-weight: 700;
  font-size: 12.5px !important;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px !important;
  padding: 4px 10px !important;
  pointer-events: auto;
}

.nav-group-header:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05) !important;
}

.nav-group-header.active {
  background: transparent !important;
  color: var(--c-primary) !important;
  font-weight: 800;
}

.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  margin-left: 10px;
  margin-bottom: 3px;
}

.nav-sub-item {
  min-height: 26px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  color: #cbd5e1;
}

.nav-sub-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08) !important;
}

.nav-item.active:not(.nav-group-header) {
  background: var(--c-primary) !important;
  color: #fff !important;
  font-weight: 700;
}

/* 추첨기 롤링 및 애니메이션 */
.lottery-result {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  min-height: 80px;
  align-items: center;
}

.lottery-result span {
  display: inline-block;
  min-width: 80px;
  padding: 10px 18px;
  background: var(--c-muted-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-size: 24px;
  font-weight: 800;
  color: var(--c-active);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transform: scale(1);
}

/* 팝인 애니메이션 */
.pop-in {
  animation: popInEffect 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes popInEffect {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 롤링 시 블러 효과 */
.spinning-effect {
  filter: blur(1.5px);
  opacity: 0.6;
}

/* 색종이 파티클 */
.confetti-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  pointer-events: none;
  z-index: 9999;
  border-radius: 2px;
  animation: confettiFall 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(400px) rotate(540deg);
    opacity: 0;
  }
}

/* 추첨 모드 토글용 UI */
.lottery-mode-selector {
  display: flex;
  background: var(--c-muted-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  max-width: 280px;
  margin: 0 auto 16px auto;
  width: 100%;
}

.lottery-mode-selector button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-neutral);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
  opacity: 0.5;
}

.lottery-mode-selector button:hover {
  opacity: 0.8;
}

.lottery-mode-selector button.active {
  background: #fff;
  color: var(--c-active);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  opacity: 1;
}

/* 럭키드로우 워크스페이스 컨테이너 */
.lottery-workspace-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.lottery-active-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  width: 100%;
}

/* 모바일 화면에서는 1열로 전환 */
@media (max-width: 768px) {
  .lottery-active-workspace {
    grid-template-columns: 1fr;
  }
}

/* 대기 상태 스핀 효과 */
.idle-spinning-effect {
  filter: blur(1px);
  opacity: 0.85;
  animation: idlePulse 0.4s infinite alternate;
}

@keyframes idlePulse {
  0% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1.02);
  }
}

/* Blacklist Management Panel Styles */
.blacklist-management-panel {
  margin-top: 18px;
}

.blacklist-tab-buttons {
  display: flex;
  gap: 6px;
  background: var(--c-muted-bg);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  margin-bottom: 16px;
  width: fit-content;
}

.blacklist-tab-btn {
  border: 0;
  background: transparent;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-neutral);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.blacklist-tab-btn.active {
  background: #fff;
  color: var(--c-active);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.blacklist-search-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.blacklist-search-row input {
  flex: 1;
  min-width: 200px;
  height: 38px;
  font-size: 13px;
}

.blacklist-search-row select {
  width: 120px;
  height: 38px;
  font-size: 13px;
}

.blacklist-table-container {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
}

.blacklist-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
  table-layout: auto;
}

.blacklist-table th,
.blacklist-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}

.blacklist-table th {
  background: var(--c-muted-bg);
  color: var(--c-text-neutral);
  font-weight: 800;
  position: sticky;
  top: 0;
  z-index: 10;
}

.blacklist-table tr:hover td {
  background: #f8fafc;
}

.badge-personal {
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.badge-company {
  background: #fdf2f8;
  color: #be185d;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.blacklist-table-note {
  font-size: 12px;
  color: var(--c-text-neutral);
  margin-top: 8px;
}

.blacklist-add-form {
  display: grid;
  gap: 14px;
  max-width: 640px;
}

.blacklist-add-form .field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 640px) {
  .blacklist-add-form .field-row {
    grid-template-columns: 1fr;
  }
}

.blacklist-add-form label {
  font-size: 12.5px;
}

.blacklist-add-form input,
.blacklist-add-form textarea {
  height: 38px;
  font-size: 13px;
  padding: 0 10px;
}

.blacklist-add-form textarea {
  height: 80px;
  padding: 8px 10px;
  min-height: 80px;
}


/* Modal Base Styles */
.blacklist-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.blacklist-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.blacklist-modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 520px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-20px);
  transition: transform 0.25s ease;
  display: grid;
  gap: 16px;
}

.blacklist-modal.active .blacklist-modal-content {
  transform: translateY(0);
}

.blacklist-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 12px;
}

.blacklist-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--c-text-main);
}

.blacklist-modal-close {
  border: 0;
  background: transparent;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  color: var(--c-text-neutral);
  line-height: 1;
}

.blacklist-modal-close:hover {
  color: var(--c-error);
}


/* Modal Form layout fixes */
.blacklist-modal-content .blacklist-modal-form {
  max-width: 100% !important;
  width: 100%;
}

.blacklist-modal-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.blacklist-modal-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.blacklist-modal-form .form-group.col-span-2 {
  grid-column: span 2;
}

.blacklist-modal-form .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-main, #334155);
}

.blacklist-modal-form input,
.blacklist-modal-form select,
.blacklist-modal-form textarea {
  width: 100% !important;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--c-border, #cbd5e1);
  border-radius: 6px;
  background-color: #fff;
  font-size: 13.5px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.blacklist-modal-form input:focus,
.blacklist-modal-form select:focus,
.blacklist-modal-form textarea:focus {
  border-color: var(--c-primary, #3b82f6);
  outline: none;
}

.blacklist-modal-form textarea {
  height: 90px;
  min-height: 90px;
  resize: vertical;
}

.blacklist-modal-form .button-row {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.blacklist-modal-form .btn {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
}

/* 홍보리스트 등록 탭 스타일 */
.promotion-tabs button.btn.secondary.active {
  background-color: var(--c-primary, #3b82f6);
  color: #fff;
  border-color: var(--c-primary, #3b82f6);
  font-weight: 800;
}
.promotion-tabs button.btn.secondary {
  transition: all 0.2s ease;
}
.promo-input-area {
  margin-top: 10px;
}
#promo-panel-mapping select {
  font-size: 12px;
}
#promo-panel-mapping label span {
  font-weight: 700;
  color: var(--c-text-main);
}

/* 컬럼 매핑 행 스타일 개편 */
.promo-mapping-row, .blacklist-mapping-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-muted-bg);
  transition: all 0.2s ease;
  margin-bottom: 6px;
}

.promo-mapping-row.is-mapped, .blacklist-mapping-row.is-mapped {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.promo-mapping-row.is-mapped .promo-col-name, .blacklist-mapping-row.is-mapped .promo-col-name {
  color: var(--c-text-neutral) !important;
  text-decoration: line-through;
  opacity: 0.65;
}

.promo-mapping-row.is-mapped select, .blacklist-mapping-row.is-mapped select {
  border-color: #cbd5e1 !important;
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  font-weight: normal;
}

/* DB 컬럼 매핑 인디케이터 배지 스타일 */
.db-col-indicator {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background-color: #f0fdf4 !important; /* 미지정 시 초록색 강조 */
  border: 1px solid #86efac !important;
  color: #16a34a !important;
  transition: all 0.2s ease;
  font-weight: bold;
  font-size: 12px;
  margin: 1px 2px;
}

.db-col-indicator.is-mapped {
  background-color: #f1f5f9 !important; /* 매핑 완료 시 회색으로 가라앉힘 */
  color: #64748b !important;
  border-color: #cbd5e1 !important;
  text-decoration: line-through;
  font-weight: normal;
}

/* ==========================================================================
   Corporate Login Guard and Logout Styles
   ========================================================================== */

/* 로그인 오버레이 */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at top right, #1e293b, #0f172a);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  color: #f8fafc;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.login-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--c-primary, #2563eb), #3b82f6);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

.login-brand h2 {
  font-size: 20px;
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.5px;
}

.login-brand p {
  font-size: 11px;
  margin: 2px 0 0;
  opacity: 0.6;
}

.login-card-header {
  margin-bottom: 24px;
}

.login-card-header h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: #fff;
}

.login-card-header p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.45;
}

.login-form input {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.login-form input:focus {
  border-color: var(--c-primary, #3b82f6) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
  outline: none !important;
}

.login-form label {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.login-error-msg {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f87171;
  margin-bottom: 16px;
  line-height: 1.4;
}

.btn-full {
  width: 100%;
  padding: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
}

/* 사이드바 로그아웃 레이아웃 */

.user-actions {
  display: flex;
  gap: 6px;
  margin-top: 0;
  width: 100%;
}

.btn-change-pw {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 1;
  text-align: center;
  box-sizing: border-box;
}

.btn-change-pw:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn-logout {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 1;
  text-align: center;
  box-sizing: border-box;
}

.btn-logout:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

/* 만족도 조회 화면 스티치 테마 개선 스타일 */
.lookup-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .lookup-summary-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.satisfaction-metric-bento-card {
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.satisfaction-metric-bento-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-primary) !important;
  box-shadow: 0 10px 20px -3px rgba(15, 23, 42, 0.08) !important;
}

/* 랭킹 테이블 호버 효과 */
.lookup-row-hover:hover td {
  background: var(--c-muted-bg) !important;
}

.sort-btn:hover {
  color: var(--c-active) !important;
}

/* 2:1 아코디언 가로 분할 그리드 */
.grid-layout-2col {
  grid-template-columns: 1fr;
}

/* 만족도 조회: 좁은 화면에서는 2단을 강제로 위아래 흐름으로 전환 */
.satisfaction-detail-grid {
  min-width: 0;
}

@media (max-width: 1199px) {
  .lookup-main-grid,
  .lookup-column-grid,
  .satisfaction-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .lookup-main-grid > *,
  .lookup-column-grid > *,
  .satisfaction-detail-grid > * {
    min-width: 0;
    width: 100%;
  }

  .satisfaction-detail-grid .comments-feed-viewport {
    min-height: 0;
    height: auto;
  }

  .satisfaction-detail-grid .comments-feed-scroll {
    overflow-y: visible;
    max-height: none;
  }

  .satisfaction-detail-grid .comments-feed-progress,
  .satisfaction-detail-grid .comments-feed-viewport::after {
    display: none !important;
  }
}

/* 주관식 피드 뷰포트: 스크롤 가능 영역의 경계를 시각적으로 명확히 구분 */
.comments-feed-viewport {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: #fbfcfe;
}

.comments-feed-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

/* 상단 진행률 바: 전체 중 어디까지 읽었는지 한눈에 */
.comments-feed-progress {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: #e9edf3;
  overflow: hidden;
  z-index: 2;
}

.comments-feed-viewport.has-overflow .comments-feed-progress {
  display: block;
}

.comments-feed-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
  transition: width 0.12s linear;
}

@media (min-width: 1200px) {
  .grid-layout-2col {
    display: grid;
    grid-template-columns: 45% 50%;
    column-gap: 5%;
    row-gap: 20px;
    position: relative;
    width: 100%;
    min-height: 420px; /* 객관식 문항이 적더라도 최소 4개 수준의 높이 보장 */
  }
  .grid-layout-2col > div:first-child {
    grid-column: 1;
    width: 100%;
  }
  .grid-layout-2col > div:last-child {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    display: flex;
    flex-direction: column;
  }
  .comments-feed-viewport {
    flex: 1;
  }
  .comments-feed-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain; /* 피드 끝에서 페이지가 따라 스크롤되지 않도록 */
  }
  /* 하단 페이드: 아래에 더 읽을 내용이 있음을 시각적으로 암시 */
  .comments-feed-viewport.has-overflow::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 36px;
    border-radius: 0 0 11px 11px;
    background: linear-gradient(to bottom, rgba(251, 252, 254, 0), rgba(251, 252, 254, 0.95));
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  /* 최하단까지 스크롤하면 페이드를 숨겨 끝에 도달했음을 알림 */
  .comments-feed-viewport.is-at-bottom::after {
    opacity: 0;
  }
}

/* 말풍선 피드백 카드 호버 효과 */
.comment-bubble-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.comment-bubble-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
  border-color: #cbd5e1 !important;
}

/* 점수 문항 카드 호버 효과 */
.score-breakdown-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.score-breakdown-card:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 4px 6px rgba(99, 102, 241, 0.03) !important;
}

/* 주관식 코멘트 피드 스크롤 바 - 조작 범위가 눈에 띄도록 트랙까지 표시 */
/* 표준 속성(scrollbar-width/color)을 지정하면 Chromium이 ::-webkit-scrollbar 스타일을
   무시하므로, webkit 의사요소를 지원하지 않는 브라우저(Firefox)에만 적용한다. */
@supports not selector(::-webkit-scrollbar) {
  .comments-feed-scroll {
    scrollbar-width: thin;
    scrollbar-color: #7c3aed #e9edf3;
  }
}
.comments-feed-scroll::-webkit-scrollbar {
  width: 12px;
}
.comments-feed-scroll::-webkit-scrollbar-track {
  background: #e9edf3;
  border-radius: 99px;
  margin: 4px 0;
}
.comments-feed-scroll::-webkit-scrollbar-thumb {
  background: #7c3aed; /* 피드 강조색과 맞춰 위치를 즉시 인지 */
  border: 3px solid #e9edf3; /* 트랙과 구분되도록 여백을 준 두툼한 썸 */
  border-radius: 99px;
  min-height: 44px; /* 의견이 많아도 썸이 작아져 잡기 어려워지지 않도록 */
}
.comments-feed-scroll::-webkit-scrollbar-thumb:hover {
  background: #6d28d9;
}

/* NPS hover animation */
.satisfaction-metric-bento-card .bento-nps-desc {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: all 0.2s ease;
}
.satisfaction-metric-bento-card:hover .bento-nps-desc {
  opacity: 1;
  visibility: visible;
  height: auto;
  margin-top: 4px;
}

/* 럭키 드로우 애니메이션 및 폭죽 이펙트 */
@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.pop-in {
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

.confetti-particle {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  animation: confettiFall 1.2s ease-out forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(300px) rotate(360deg);
    opacity: 0;
  }
}

/* 룰렛 스핀 롤링 효과 */
.spinning-effect {
  animation: rouletteSpin 0.15s linear infinite;
  filter: blur(1.5px);
  transform: scale(0.98);
}

@keyframes rouletteSpin {
  0% { opacity: 0.9; }
  50% { opacity: 0.65; }
  100% { opacity: 0.9; }
}

/* 대기 상태의 은은한 스핀 애니메이션 */
.idle-spinning-effect {
  animation: idleRouletteSpin 1.4s linear infinite;
  opacity: 0.95;
}

@keyframes idleRouletteSpin {
  0%, 100% { filter: blur(0px); }
  50% { filter: blur(0.3px); opacity: 0.85; }
}

/* ==========================================================================
   공통 디자인 통일 (설명 가이드, DB 연결 링크, 새로고침 버튼)
   ========================================================================== */

/* 1. 설명 가이드 공통 조정 */
.guide-accordion {
  width: 100%;
  margin-bottom: 20px;
}

/* 2. 상단 타이틀 하단 DB 영역 스타일 */
#header-tool-db-info {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: normal;
  margin-top: 2px;
}

/* 3. DB 연결 링크 */
.header-db-link {
  color: var(--c-primary);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease-in-out;
}

.header-db-link:hover {
  color: var(--c-active);
  text-decoration: underline;
}

.header-db-link::after {
  content: " ↗";
  font-size: 11px;
  opacity: 0.7;
}

/* 4. 구분선 */
.header-db-divider {
  color: var(--c-border);
  margin: 0 6px;
  font-size: 12px;
  user-select: none;
}

/* 5. 조회 시간/타임스탬프 */
.header-db-timestamp-group {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--c-text-neutral);
}

.header-db-timestamp-label {
  font-size: 12px;
}

.header-db-timestamp-value {
  color: var(--c-text-main);
  font-weight: bold;
}

.header-db-timestamp-desc {
  font-size: 11px;
  color: var(--c-text-neutral);
  margin-left: 2px;
  opacity: 0.7;
}

/* 6. 새로고침/동기화 미니 버튼 */
.header-db-btn {
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  color: var(--c-text-neutral);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.header-db-btn:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.header-db-btn:active {
  background: var(--c-active);
  border-color: var(--c-active);
}

/* ==========================================================================
   만족도 등록 개편 레이아웃 및 탭/모달 스타일
   ========================================================================== */
.satisfaction-workbench-new {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1024px) {
  .satisfaction-workbench-new {
    grid-template-columns: 1fr;
  }
}

.toolbox-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.toolbox-tabs button.btn.secondary {
  min-height: 34px;
  padding: 0 14px;
  font-size: 12px;
  border-radius: 8px;
  background: var(--c-muted-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text-neutral);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.toolbox-tabs button.btn.secondary.active {
  background-color: var(--c-primary) !important;
  color: #fff !important;
  border-color: var(--c-primary) !important;
  font-weight: 800;
}

.toolbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.toolbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.toolbox-modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 520px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-20px);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.toolbox-modal.active .toolbox-modal-content {
  transform: translateY(0);
}

.toolbox-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 12px;
}

.toolbox-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--c-text-main);
  font-weight: bold;
}

.toolbox-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-text-neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: color 0.15s ease;
}

.toolbox-modal-close:hover {
  color: var(--c-error);
}

.sat-input-area {
  margin-top: 10px;
}

/* Satisfaction Bento Grid & Modal Redesign */
.satisfaction-workbench-new {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.satisfaction-workbench-new > .satisfaction-left-panel {
  grid-column: span 8;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.satisfaction-workbench-new > .satisfaction-right-panel {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 1024px) {
  .satisfaction-workbench-new {
    display: flex;
    flex-direction: column;
  }
  .satisfaction-workbench-new > .satisfaction-left-panel,
  .satisfaction-workbench-new > .satisfaction-right-panel {
    width: 100%;
  }
}

/* Flowchart Step Banner */
.flowchart-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(90, 116, 165, 0.05);
}

.flowchart-step {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.flowchart-step.active {
  opacity: 1;
  font-weight: 700;
}

.flowchart-step-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-muted-bg);
  border: 2px solid var(--c-border);
  color: var(--c-text-neutral);
  font-size: 13px;
  font-weight: 900;
  transition: all 0.3s ease;
}

.flowchart-step.active .flowchart-step-num {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.flowchart-step.completed .flowchart-step-num {
  background: var(--c-success);
  border-color: var(--c-success);
  color: #fff;
}

.flowchart-step-label {
  font-size: 14.5px;
  color: var(--c-text-main);
}

.flowchart-arrow {
  color: var(--c-text-neutral);
  font-weight: 900;
  opacity: 0.5;
}

/* Clipboard Copy Box */
.gsa-copy-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #bfd2ef;
  border-radius: 10px;
  background: #f8fbff;
  margin-bottom: 16px;
}

.gsa-copy-box span.gsa-label {
  font-size: 12px;
  color: var(--c-text-neutral);
  font-weight: 800;
  white-space: nowrap;
}

.gsa-copy-box code {
  flex: 1;
  font-family: Consolas, Monaco, monospace;
  font-size: 13px;
  color: var(--c-active);
  background: rgba(108, 147, 240, 0.08);
  padding: 4px 8px;
  border-radius: 6px;
  word-break: break-all;
}

.gsa-copy-btn {
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

.sat-tab-content {
  display: none;
}

.sat-tab-content.active {
  display: block;
}

/* ==========================================================================
   만족도 등록 질문 분류 카드 및 3색 토글 스위처 (Stitch 테마 기반)
   ========================================================================== */

/* 질문 카드 스타일 */
.satisfaction-question-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.03), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  border-left: 5px solid transparent;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.satisfaction-question-card:hover {
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.07);
}

/* 강사 분류 시 그린 포인트 */
.satisfaction-question-card.is-instructor {
  border-left-color: #10b981;
}

/* 마이온 분류 시 블루 포인트 */
.satisfaction-question-card.is-myown {
  border-left-color: #3b82f6;
}

/* 제외 분류 시 소프트레드 및 흐릿한 불투명도 */
.satisfaction-question-card.is-excluded {
  border-left-color: #ef4444;
  opacity: 0.65;
}

.satisfaction-question-card.is-excluded:hover {
  opacity: 0.95;
}

.satisfaction-question-card.is-excluded .q-title-text {
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.4);
  color: var(--c-text-neutral) !important;
}

/* 카드 제목 영역 */
.q-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
}

.q-card-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.q-title-text {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 3색 분류 세그먼트 스위처 */
.satisfaction-category-toggle {
  display: inline-flex;
  background: var(--c-muted-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  align-items: center;
}

.satisfaction-category-toggle button {
  min-height: 28px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--c-text-neutral);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.satisfaction-category-toggle button:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--c-text-main);
}

/* 강사 활성 상태 */
.satisfaction-question-card.is-instructor .satisfaction-category-toggle button.active[data-category="강사(강의 관련)"] {
  background-color: #10b981 !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

/* 마이온 활성 상태 */
.satisfaction-question-card.is-myown .satisfaction-category-toggle button.active[data-category="마이온(운영 등)"] {
  background-color: #3b82f6 !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

/* 제외 활성 상태 */
.satisfaction-question-card.is-excluded .satisfaction-category-toggle button.active[data-category="제외"] {
  background-color: #ef4444 !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

/* 문항 상세 바디 영역 */
.q-card-body {
  padding-top: 14px;
  transition: all 0.25s ease;
}

.satisfaction-question-card.is-collapsed .q-card-body {
  display: none;
}

/* 상세 내용 토글 바 */
.satisfaction-detail-toggle {
  display: inline-flex;
  background: var(--c-muted-bg);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: 3px;
}

.satisfaction-detail-toggle button {
  min-height: 32px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 18px;
  border: none;
  background: transparent;
  color: var(--c-text-neutral);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.satisfaction-detail-toggle button.active {
  background-color: var(--c-primary) !important;
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 2px 4px rgba(47, 90, 180, 0.15);
}

/* 문항 유형 뱃지 */
.q-kind-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 4px;
  white-space: nowrap;
}

.q-kind-badge.score-kind {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.q-kind-badge.text-kind {
  background: rgba(20, 184, 166, 0.1);
  color: #0d9488;
  border: 1px solid rgba(20, 184, 166, 0.2);
}

/* 카드 컨텐츠 스플릿 레이아웃 */
.q-card-content-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
  align-items: center;
}

@media (max-width: 768px) {
  .q-card-content-split {
    grid-template-columns: 1fr;
    gap: 14px;
  }

.q-metrics-section {
  display: flex;
  flex-direction: row; /* 세로에서 가로 정렬로 변경 */
  gap: 8px;
  width: 100%;
}

.q-metric-box {
  flex: 1;
  background: var(--c-muted-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 4px 6px; /* 패딩 축소 */
  display: flex;
  flex-direction: column; /* 내부 글자를 상하 2행 배치 */
  align-items: center; /* 가운데 정렬 */
  justify-content: center;
  gap: 2px; /* 라벨과 값 사이 좁은 간격 */
  min-height: 42px; /* 높이를 축소 */
}

.q-metric-box.highlight-purple {
  border-left: 3px solid #8b5cf6;
}

.q-metric-box.highlight-blue {
  border-left: 3px solid #3b82f6;
}

.q-metric-label {
  font-size: 11px;
  color: var(--c-text-neutral);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.q-metric-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--c-text-main);
  line-height: 1;
  white-space: nowrap;
}

.q-metric-value .max-val {
  font-size: 11px;
  color: var(--c-text-neutral);
  font-weight: normal;
}

.q-chart-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.q-chart-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--c-text-neutral);
}

.distribution-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.dist-label {
  width: 28px;
  font-weight: bold;
  color: var(--c-text-neutral);
  text-align: right;
}

.dist-count {
  width: 90px;
  color: var(--c-text-neutral);
  font-size: 11px;
  text-align: left;
}

/* 주관식 본문 영역 */
.q-card-content-text-only {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.q-text-meta-row {
  display: flex;
  gap: 12px;
}

.q-metric-box-inline {
  background: var(--c-muted-bg);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.q-metric-value-inline {
  font-size: 13px;
  font-weight: 800;
}
}

.satisfaction-reply-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.satisfaction-reply-block strong {
  font-size: 12px;
  color: var(--c-text-neutral);
}

.satisfaction-reply-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 8px;
}

.satisfaction-reply-block li {
  background: var(--c-muted-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--c-text-main);
  line-height: 1.4;
}

/* 하단 통합 요약 & DB 등록 바 (Stitch) */
.satisfaction-unified-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 16px 24px;
  margin-top: 24px;
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.02);
  flex-wrap: wrap;
  gap: 16px;
}

.satisfaction-action-metrics-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.action-metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--c-text-neutral);
}

.action-metric-pill strong {
  color: var(--c-text-main);
  font-size: 15px;
  font-weight: 800;
}

.action-metric-pill.divider {
  width: 1px;
  height: 16px;
  background: var(--c-border);
  margin: 0 4px;
}

/* 필수값 누락/검증 에러 발생 시 눈에 띄는 스타일 강조 */
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
  border-color: var(--c-error) !important;
  background-color: #fff8f8 !important;
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.12) !important;
}

.satisfaction-combobox input[aria-invalid] {
  border-color: var(--c-error) !important;
  background-color: #fff8f8 !important;
}

/* ==========================================================================
   대분류별 질문 그룹 아코디언 및 고밀도 카드 디자인
   ========================================================================== */

/* 1. 그룹별 아코디언 (.sat-group-details) */
.sat-group-details {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.sat-group-details summary {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 800;
  color: var(--c-text-main);
  background: var(--c-muted-bg);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
  outline: none;
}

.sat-group-details[open] summary {
  border-bottom-color: var(--c-border);
}

.sat-group-details summary:hover {
  background: rgba(15, 23, 42, 0.04);
}

.sat-group-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 카드 간격 축소 */
}

/* 2. 문항 카드 70% 축소 및 정렬 최적화 */
.satisfaction-question-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 10px 14px; /* 높이 70% 축소 패딩 */
  margin-bottom: 0; /* gap으로 간격 제어 */
  box-shadow: 0 2px 4px -1px rgba(15, 23, 42, 0.02);
  border-left: 5px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.satisfaction-question-card:hover {
  box-shadow: 0 6px 12px -3px rgba(15, 23, 42, 0.05);
}

/* 질문 유형별 배경색 & 글자색 구분 */
.satisfaction-question-card.type-score {
  background: #faf5ff; /* 연보라 배경 */
  border-color: #e9d5ff; /* 보라 보더 */
}

.satisfaction-question-card.type-score .q-title-text {
  color: #581c87; /* 짙은 보라 글씨 */
}

.satisfaction-question-card.type-text {
  background: #f0fdfa; /* 연한 틸/그린 배경 */
  border-color: #ccfbf1; /* 틸 보더 */
}

.satisfaction-question-card.type-text .q-title-text {
  color: #115e59; /* 짙은 틸 글씨 */
}

/* 제외 오버라이드 */
.satisfaction-question-card.is-excluded {
  background: #f8fafc !important; /* 슬레이트 그레이 배경 */
  border-color: #e2e8f0 !important;
  border-left-color: #ef4444 !important;
  opacity: 0.65;
}

.satisfaction-question-card.is-excluded .q-title-text {
  color: #64748b !important;
}

.satisfaction-question-card.is-unclassified {
  background: #fffbeb !important; /* 연한 황토/경고색 배경 */
  border-color: #fde68a !important;
  border-left-color: #d97706 !important;
}

.satisfaction-question-card.is-unclassified .q-title-text {
  color: #b45309 !important;
}

/* 3. 헤더 요소 강제 중앙 정렬 */
.q-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 세로 중앙 정렬 */
  gap: 16px;
  padding-bottom: 0;
  border-bottom: none;
}

.satisfaction-question-card:not(.is-collapsed) .q-card-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
}

.q-card-title-group {
  display: flex;
  align-items: center; /* 세로 중앙 정렬 */
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.q-title-text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 만족도 조회 랭킹 테이블 내 클릭 필터링 타겟 스타일 */
.rank-click-target {
  cursor: pointer;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.rank-click-target:hover {
  color: #2f5ab4 !important; /* var(--c-primary)인 #6c93f0 보다 짙은 #2f5ab4를 적용해 가독성을 높입니다. */
  text-decoration: underline;
}

/* ==========================================================================
   만족도 등록 폼 (DB 등록 기준 정보) 디자인 다듬기 (강사용공유보드 로그인 스타일 적용)
   ========================================================================== */

/* 1. 패널 내부 라벨 폰트 및 구조 다듬기 */
.satisfaction-right-panel .field-row label > span {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text-neutral);
  margin-bottom: 4px;
  display: block;
}

/* 2. 입력 필드들 스타일링 (강사용공유보드 로그인 스타일) */
.satisfaction-right-panel input[type="text"],
.satisfaction-right-panel input[type="search"],
.satisfaction-right-panel input[type="date"] {
  width: 100%;
  height: 44px;
  padding: 10px 16px;
  border-radius: 12px !important;
  border: 1px solid var(--c-border) !important;
  background-color: #ffffff !important;
  color: var(--c-text-main) !important;
  font-size: 14px !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* 포커스 효과 */
.satisfaction-right-panel input[type="text"]:focus,
.satisfaction-right-panel input[type="search"]:focus,
.satisfaction-right-panel input[type="date"]:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18) !important;
}

.satisfaction-right-panel input::placeholder {
  color: #a1a1aa !important;
}

/* 3. 플러스 버튼 (+) 스타일 개선 - 인풋 박스 높이와 둥글기 일치 */
.satisfaction-right-panel .satisfaction-combobox button.btn.secondary {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 16px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  border: 1px solid var(--c-border) !important;
  background-color: #ffffff !important;
  color: var(--c-text-neutral) !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.satisfaction-right-panel .satisfaction-combobox button.btn.secondary:hover {
  background-color: #f4f4f5 !important;
  color: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

/* 4. 강의명일자 (KEY) 박스 리디자인 */
.satisfaction-right-panel .satisfaction-class-key-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 14px 18px !important;
  border: 1px solid #e0e7ff !important;
  border-radius: 12px !important;
  background: #f5f3ff !important; /* 연보라/연인디고 톤 */
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.05) !important;
}

.satisfaction-right-panel .satisfaction-class-key-box span {
  color: #4f46e5 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.satisfaction-right-panel .satisfaction-class-key-box strong {
  color: #312e81 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  word-break: break-all !important;
}

/* 4-1. 강의명일자 중복 여부 배지 */
#satisfaction-dup-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#satisfaction-dup-badge.is-warning {
  color: #b91c1c !important;
  background: #fee2e2 !important;
}

#satisfaction-dup-badge.is-ok {
  color: #166534 !important;
  background: #dcfce7 !important;
}

/* 4-2. 최근 등록 이력 패널 */
.satisfaction-recent-box {
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid var(--c-muted-bg, #f8fafc);
  border-radius: 12px;
  background: var(--c-muted-bg, #f8fafc);
}

.satisfaction-recent-header {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text-neutral);
  margin-bottom: 6px;
}

.satisfaction-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 150px;
  overflow-y: auto;
}

.satisfaction-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 4px 2px;
  border-bottom: 1px dashed #e2e8f0;
}

.satisfaction-recent-item:last-child {
  border-bottom: 0;
}

.satisfaction-recent-date {
  color: var(--c-text-neutral);
  flex-shrink: 0;
}

.satisfaction-recent-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #312e81;
  font-weight: 600;
}

.satisfaction-recent-count {
  flex-shrink: 0;
  color: var(--c-active);
  font-weight: 700;
}

/* 필수 마크 개선 */
.required-mark {
  color: #ef4444 !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}

/* 하단 시트 직접 보기 링크 가독성 개선 */
.satisfaction-right-panel .field-help {
  display: block !important;
  margin-top: 4px !important;
}

.satisfaction-right-panel .field-help a {
  color: #4f46e5 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.satisfaction-right-panel .field-help a:hover {
  color: #3730a3 !important;
  text-decoration: underline !important;
}

/* 5. 패널 자체 카드 스타일 (Lumina/Stitch 스타일) */
.satisfaction-workbench-new > .satisfaction-right-panel {
  border: 1px solid rgba(90, 116, 165, 0.18) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(90, 116, 165, 0.08) !important;
  background-color: #ffffff !important;
  padding: 24px !important;
  transition: all 0.3s ease !important;
}

.satisfaction-workbench-new > .satisfaction-right-panel:hover {
  box-shadow: 0 16px 36px rgba(90, 116, 165, 0.12) !important;
  border-color: rgba(90, 116, 165, 0.25) !important;
}

/* 6. 입력 필드간 여백(margin) 최적화 */
.satisfaction-right-panel .field-row {
  gap: 16px !important;
}

.satisfaction-right-panel .field-grid {
  gap: 16px !important;
}

/* ==========================================================================
   설문 응답 데이터 로드 (satisfaction-left-panel) 디자인 개선 및 탭 높이 통일
   ========================================================================== */

/* 1. 패널 자체 카드 스타일 (우측 패널) */
.satisfaction-workbench-new > .satisfaction-left-panel {
  border: 1px solid rgba(90, 116, 165, 0.18) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(90, 116, 165, 0.08) !important;
  background-color: #ffffff !important;
  padding: 24px !important;
  transition: all 0.3s ease !important;
}

.satisfaction-workbench-new > .satisfaction-left-panel:hover {
  box-shadow: 0 16px 36px rgba(90, 116, 165, 0.12) !important;
  border-color: rgba(90, 116, 165, 0.25) !important;
}

/* 2. 입력 필드 및 텍스트에리어 스타일 (강사용공유보드 로그인 스타일 적용) */
.satisfaction-left-panel input[type="url"],
.satisfaction-left-panel textarea {
  width: 100%;
  border-radius: 12px !important;
  border: 1px solid var(--c-border) !important;
  background-color: #ffffff !important;
  color: var(--c-text-main) !important;
  font-size: 14px !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.satisfaction-left-panel input[type="url"] {
  height: 44px;
  padding: 10px 16px;
}

.satisfaction-left-panel textarea {
  padding: 14px 16px;
  resize: none !important; /* 높이 고정 유지 */
}

/* 포커스 효과 */
.satisfaction-left-panel input[type="url"]:focus,
.satisfaction-left-panel textarea:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18) !important;
}

.satisfaction-left-panel input::placeholder,
.satisfaction-left-panel textarea::placeholder {
  color: #a1a1aa !important;
}

/* 3. 세가지 탭의 콘텐츠 높이를 220px로 통일 */
.sat-tab-content {
  height: 220px !important;
  box-sizing: border-box;
}

/* 3-1. 구글 시트 연동 탭 수직 레이아웃 조율 */
#sat-panel-sheet {
  display: none;
  flex-direction: column;
  justify-content: space-between;
}
#sat-panel-sheet.active {
  display: flex !important;
}

/* 3-2. 텍스트 붙여넣기 탭 label & textarea 고정 */
#sat-panel-text label {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#sat-panel-text textarea {
  flex: 1;
  min-height: 175px !important;
  height: 175px !important;
  margin-top: 4px;
}

/* 3-3. 파일 업로드 탭 드롭존 높이 고정 */
#sat-panel-file .tiff-dropzone {
  height: 220px !important;
  min-height: 220px !important;
  box-sizing: border-box;
  padding: 30px 20px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   네이버카페 비동기 업로드 프로그레스 바 및 로그 페이드인 스타일
   ========================================================================== */
.progress-bar-track {
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

#naver-progress-bar-fill {
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(47, 90, 180, 0.2);
}

#naver-progress-bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: progress-shimmer 1.8s infinite linear;
}

@keyframes progress-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

#naver-progress-log {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}

#naver-progress-log > div {
  animation: fadeInLog 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  border-bottom: 1px solid rgba(226, 232, 240, 0.4);
  padding-bottom: 4px;
}

#naver-progress-log > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@keyframes fadeInLog {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* PPT automation */
.ppt-workbench { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(380px, 1.1fr); gap: 16px; }
.ppt-step-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.ppt-step-head > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--c-primary); color: #fff; font-weight: 800; }
.ppt-step-head div, .ppt-result-head div { display: flex; flex-direction: column; gap: 2px; }
.ppt-step-head small, .ppt-result-head span, .ppt-file-drop span, .muted { color: var(--c-text-neutral); font-size: 12px; }
.ppt-file-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 112px; margin-bottom: 20px; border: 1px dashed #9aaed3; border-radius: 10px; background: #f7f9fd; cursor: pointer; text-align: center; }
.ppt-file-drop:hover { border-color: var(--c-primary); background: #f0f5ff; }
.ppt-file-drop input { max-width: 90%; }
.ppt-result-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.ppt-status { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--c-border); background: var(--c-muted-bg); font-size: 13px; }
.ppt-status.success { color: #166534; border-color: #bbdfc5; background: #f0fdf4; }
.ppt-status.error { color: #b91c1c; border-color: #fecaca; background: #fff7f7; }
.ppt-status.loading { color: #1d4f91; border-color: #bfdbfe; background: #eff6ff; }
.ppt-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.ppt-metrics > div { padding: 12px; border: 1px solid var(--c-border); border-radius: 8px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.ppt-metrics span { font-size: 11px; color: var(--c-text-neutral); }
.ppt-metrics strong { font-size: 18px; }
.ppt-match-block { margin-top: 14px; }
.ppt-match-block > strong { display: block; margin-bottom: 8px; font-size: 13px; }
.ppt-chip-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.ppt-match-chip { display: inline-flex; padding: 5px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.ppt-match-chip.success { color: #166534; background: #dcfce7; }
.ppt-match-chip.warning { color: #92400e; background: #fef3c7; }
@media (max-width: 900px) { .ppt-workbench { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .ppt-metrics { grid-template-columns: 1fr; }
  .ppt-automation-page .button-row { flex-direction: column; }
  .ppt-automation-page .button-row .btn { width: 100%; }
}