/* ─── CSS 변수 ─────────────────────────────────────────── */
:root {
  --color-primary:             #5b6cff;
  --color-primary-hover:       #4a5ae8;
  --color-primary-light:       #eef0ff;
  --color-primary-light-hover: #dde1ff;
  --color-accent:        #ff7a59;
  --color-accent-hover:  #e8603e;
  --color-success:       #22c55e;
  --color-danger:        #ef4444;

  --color-common-bg:     #eff6ff;
  --color-common-border: #bfdbfe;
  --color-part-bg:       #fefce8;
  --color-part-border:   #fde68a;

  --color-text:          #1f2937;
  --color-text-soft:     #6b7280;
  --color-bg:            #f9fafb;
  --color-card-bg:       #ffffff;
  --color-border:        #e5e7eb;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.14);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --color-tag-default: #e5e7eb;
  --color-tag-red:     #ef4444;
  --color-tag-orange:  #f97316;
  --color-tag-amber:   #f59e0b;
  --color-tag-green:   #22c55e;
  --color-tag-teal:    #14b8a6;
  --color-tag-blue:    #3b82f6;
  --color-tag-indigo:  #6366f1;
  --color-tag-purple:  #a855f7;
  --color-tag-pink:    #ec4899;
}

/* ─── 기본 스타일 ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo',
               'Noto Sans KR', 'Malgun Gothic', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, opacity 0.15s,
              transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}

button:active { opacity: 0.88; }

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

/* ─── 헤더 ─────────────────────────────────────────────── */
.header {
  background: var(--color-card-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

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

.app-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.current-set-name {
  font-size: 13px;
  color: var(--color-text-soft);
  background: var(--color-bg);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.header-right {
  display: flex;
  gap: 8px;
}

.btn-sync {
  height: 38px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
}

.btn-sync:hover {
  background: var(--color-border);
}

.btn-admin {
  height: 38px;
  background: var(--color-primary);
  color: white;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
}

.btn-admin:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}

/* ─── 국가 탭 (큰 탭) ──────────────────────────────────── */
.country-tabs-wrapper {
  background: var(--color-card-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 24px;
}

.country-tabs {
  display: flex;
  gap: 8px;
  max-width: 1400px;
  margin: 0 auto;
}

.country-tab {
  min-height: 56px;
  font-size: 17px;
  font-weight: 600;
  padding: 0 24px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-soft);
  border: 2px solid transparent;
  letter-spacing: 0.2px;
}

.country-tab:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.country-tab.active {
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ─── 영역 탭 (관리 화면: 공통앞 / 부위별 / 공통뒤) ────── */
.section-tabs-wrapper {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 24px;
}

.section-tabs {
  display: flex;
  gap: 8px;
  max-width: 800px;
  margin: 0 auto;
}

.section-tab {
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  background: var(--color-card-bg);
  color: var(--color-text-soft);
  border: 1.5px solid var(--color-border);
}

.section-tab:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.section-tab.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ─── 부위 탭 (작은 탭) ─────────────────────────────────── */
.part-tabs-wrapper {
  background: #f1f5f9;
  border-bottom: 1px solid var(--color-border);
  padding: 8px 24px;
}

.part-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}

.part-tab {
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  background: var(--color-card-bg);
  color: var(--color-text-soft);
  border: 1.5px solid var(--color-border);
}

.part-tab:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.part-tab.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ─── 카드 외부 영역 (메인 화면) ────────────────────────── */
.cards-outer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── 3구역 섹션 ────────────────────────────────────────── */
.card-section {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid;
}

.head-section,
.tail-section {
  background: var(--color-common-bg);
  border-color: var(--color-common-border);
  border-left: 4px solid var(--color-primary);
}

.part-section {
  background: var(--color-part-bg);
  border-color: var(--color-part-border);
  border-left: 4px solid var(--color-accent);
}

.section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 12px 16px 6px;
}

.head-section .section-label,
.tail-section .section-label {
  color: var(--color-primary);
}

.part-section .section-label {
  color: var(--color-accent);
}

.section-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 12px 12px;
}

.section-empty {
  font-size: 14px;
  color: var(--color-text-soft);
  padding: 12px 4px;
  font-style: italic;
  text-align: center;
}

/* ─── 카드 ─────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--color-card-bg);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s,
              opacity 0.2s, background 0.15s;
}

.card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card.copying {
  border-color: var(--color-success) !important;
  background: #dcfce7 !important;
  opacity: 1 !important;
  transform: none !important;
}

.card.copied {
  opacity: 0.6;
  filter: grayscale(25%);
}

.card.copied:hover {
  opacity: 0.85;
  filter: grayscale(10%);
  transform: translateY(-1px);
}

.card-number {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-soft);
  min-width: 24px;
  margin-top: 2px;
  text-align: center;
}

.card-content {
  flex: 1;
  min-width: 0;
}


.card-text-preview {
  font-size: 16px;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
  position: relative;
  max-height: 140px;
  overflow: hidden;
}

.card-text-preview.truncated::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 44px;
  background: linear-gradient(transparent, var(--color-card-bg));
}

.card-image-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-thumbnail {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
}

.card-filename {
  font-size: 14px;
  color: var(--color-text-soft);
  word-break: break-all;
}

/* ─── 웰컴 카드 (3컬럼 구조) ───────────────────────────── */
.card.card-flat {
  cursor: default;
  align-items: stretch;
  padding: 14px 16px;
  gap: 16px;
}

.card.card-flat:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: none;
}

/* ─── 카드 좌측 제목 컬럼 ──────────────────────────────── */
.card-title-col {
  flex: 0 0 220px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  word-break: keep-all;
  line-height: 1.5;
  color: var(--color-text);
}

.card-title-head,
.card-title-tail {
  color: var(--color-primary);
}

.card-title-part {
  color: var(--color-accent);
}

.card-title-kr {
  flex: 0 0 330px;
}

/* 좌측 = 한국어 원본(정보용). 평평·차분하게, 클릭 유도 요소 일절 없음 */
.card-ko-panel {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  background: var(--color-bg);
  border: 1px solid #f1f2f4;
  box-shadow: none;
  display: flex;
  align-items: flex-start;
  cursor: default;
  min-width: 0;
}

/* 카드 전체에 마우스가 올라가도 좌측은 어떤 변화도 없어야 함 */
.card.card-flat .card-ko-panel:hover {
  background: var(--color-bg);
  border-color: #f1f2f4;
  box-shadow: none;
  transform: none;
}

.card-ko-text {
  font-size: 16px;
  color: var(--color-text-soft);
  white-space: pre-line;
  word-break: break-word;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-ko-empty {
  font-style: italic;
  color: var(--color-text-soft);
}

.card-right-panel {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  min-width: 0;
  padding: 12px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s,
              background 0.15s, opacity 0.2s, filter 0.2s;
}

.card.card-flat .card-right-panel:hover {
  background: var(--color-primary-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

/* ─── 2단 카드(일본/대만) 우측 = 본문(액션용) ─────────────
   버튼처럼 도드라지게: 인디고 톤 + 좌측 세로 라인 + 그림자 + 호버 반응 */
.card.card-dual .card-right-panel {
  background: var(--color-primary-light);
  border: 1px solid #ccd3ff;
  border-left: 3px solid var(--color-primary);
  padding-left: 10px; /* 좌측 3px 라인만큼 보정해 내용 정렬 유지 */
  box-shadow: var(--shadow-sm);
}

.card.card-dual .card-right-panel .card-text-preview {
  color: var(--color-text);
}

/* 말줄임 그라데이션을 패널 배경색에 맞춤 */
.card.card-dual .card-right-panel .card-text-preview.truncated::after {
  background: linear-gradient(transparent, var(--color-primary-light));
}

.card.card-dual .card-right-panel:hover {
  background: var(--color-primary-light-hover);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card.card-dual .card-right-panel:hover .card-text-preview.truncated::after {
  background: linear-gradient(transparent, var(--color-primary-light-hover));
}

.card-right-panel.copying {
  border-color: var(--color-success) !important;
  background: #dcfce7 !important;
  transform: none !important;
}

.card-right-panel.copying .card-text-preview.truncated::after {
  background: linear-gradient(transparent, #dcfce7);
}

.card-right-panel.copied {
  opacity: 0.6;
  filter: grayscale(25%);
}

.card-right-panel.copied:hover {
  opacity: 0.85;
  filter: grayscale(10%);
}

/* ─── ✓ 체크 표시 ──────────────────────────────────────── */
.copy-check {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-success);
  background: #f0fdf4;
  border: 1.5px solid var(--color-success);
  padding: 3px 12px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  pointer-events: none;
}

.copy-check.visible {
  opacity: 1;
}

/* ─── 하단 상태바 ───────────────────────────────────────── */
.status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-card-bg);
  border-top: 1px solid var(--color-border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}

.progress-text {
  font-size: 16px;
  color: var(--color-text-soft);
}

.progress-text strong {
  color: var(--color-primary);
  font-size: 22px;
  font-weight: 700;
}

.btn-reset {
  min-height: 44px;
  background: var(--color-bg);
  color: var(--color-text-soft);
  border: 1.5px solid var(--color-border);
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
}

.btn-reset:hover {
  background: var(--color-border);
  color: var(--color-text);
}

/* ─── 토스트 알림 ───────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 72px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: #1f2937;
  color: white;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  max-width: 340px;
  animation: toastIn 0.2s ease;
  pointer-events: auto;
}

.toast.success { background: var(--color-success); }
.toast.error   { background: var(--color-danger); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── 빈 상태 ──────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--color-text-soft);
}

.empty-state-icon {
  font-size: 56px;
  margin-bottom: 20px;
}

.empty-state p {
  font-size: 17px;
  line-height: 1.7;
}

/* ─── 관리 화면: 탭 sticky 래퍼 ───────────────────────── */
.admin-tabs-sticky {
  position: sticky;
  top: 60px;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

/* ─── 관리 화면: 편집 영역 ─────────────────────────────── */
.admin-editor {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

#adminFaqMode .admin-editor {
  max-width: 1400px;
}

/* 웰컴 메시지 편집 영역 — FAQ 편집 화면과 동일한 폭 (탭 영역도 1400px) */
#adminWelcomeMode .admin-editor {
  max-width: 1400px;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 14px;
}

.editor-breadcrumb {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.btn-save {
  min-height: 38px;
  background: var(--color-primary);
  color: white;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
}

.btn-save:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}

.btn-save.dirty {
  background: var(--color-accent);
  animation: savePulse 2s ease-in-out infinite;
}

.btn-save.dirty:hover {
  background: var(--color-accent-hover);
}

@keyframes savePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 89, 0.5); }
  50%       { box-shadow: 0 0 0 7px rgba(255, 122, 89, 0); }
}

/* ─── 항목 카드 (관리 화면) ─────────────────────────────── */
.items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.item-card {
  background: var(--color-card-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

.item-content {
  flex: 1;
  min-width: 0;
}

.item-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

/* 텍스트 항목 좌우 분할 */
.item-body-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.item-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.item-col-ko      { flex: 1 1 0; }
.item-col-content { flex: 1 1 0; }

.item-sublabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-soft);
  letter-spacing: 0.3px;
}

/* 이미지 항목 originalKo 행 */
.item-ko-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.item-textarea {
  width: 100%;
  min-height: 100px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 0.15s;
}

.item-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-card-bg);
}

.item-image-preview {
  display: flex;
  align-items: center;
  gap: 14px;
}

.item-image-info {
  flex: 1;
  min-width: 0;
}

.item-image-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  max-width: 640px;
}

.item-thumbnail {
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
}

.item-filename {
  font-size: 11px;
  color: var(--color-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.item-label-input {
  padding: 5px 9px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  flex: 1;
  min-width: 0;
  color: var(--color-text);
  transition: border-color 0.15s;
}

.item-label-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.btn-change-image {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-text-soft);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-change-image:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.item-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ─── 아이콘 버튼 (위/아래/삭제) ────────────────────────── */
.btn-icon {
  min-width: 32px;
  min-height: 32px;
  background: var(--color-bg);
  color: var(--color-text-soft);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.btn-icon:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.btn-icon.danger:hover {
  background: #fee2e2;
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* ─── 항목 없음 안내 ────────────────────────────────────── */
.items-empty {
  font-size: 13px;
  color: var(--color-text-soft);
  text-align: center;
  padding: 10px 0;
  font-style: italic;
}

/* ─── 항목 추가 버튼 ────────────────────────────────────── */
.add-item-row {
  display: flex;
  gap: 12px;
}

.btn-add-item {
  min-height: 44px;
  background: var(--color-card-bg);
  color: var(--color-text-soft);
  border: 2px dashed var(--color-border);
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

.btn-add-item:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* ─── 유틸리티 ─────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── 모드 탭 ──────────────────────────────────────────── */
.mode-tabs-wrapper {
  background: var(--color-card-bg);
  border-bottom: 2px solid var(--color-border);
  padding: 10px 24px;
}

.mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1400px;
  margin: 0 auto;
}

.mode-tab {
  min-height: 44px;
  padding: 0 28px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  color: var(--color-text-soft);
  border: 2px solid transparent;
  letter-spacing: 0.1px;
}

.mode-tab:hover:not(.active) {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.mode-tab.active {
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

/* ─── FAQ 외부 영역 ─────────────────────────────────────── */
.faq-outer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── FAQ / 메모 제목 검색창 ────────────────────────────── */
.faq-search-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px 0;
}

.faq-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-card-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.faq-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.faq-search-icon {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

.faq-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 11px 0;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text);
}

.faq-search-input::placeholder {
  color: var(--color-text-soft);
}

.faq-search-clear {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-soft);
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-search-clear:hover {
  background: var(--color-text-soft);
  color: var(--color-card-bg);
}

/* 검색 필터 — 표시만 숨기고 데이터/순서는 그대로 둡니다. */
.faq-card.faq-card-hidden {
  display: none;
}

/* ─── 메모 컬럼 제목 헤더 (제목 | 한국 | 일본 | 대만) ──────── */
/* 카드와 같은 flex 구성 + 같은 좌우 여백이라 컬럼과 가로 위치가 맞습니다. */
.faq-col-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 8px 18px 6px;           /* 카드 안쪽(테두리 2px + 패딩 16px)과 좌우를 맞춤 */
  position: sticky;
  top: 60px;                       /* 앱 헤더(60px) 바로 아래에 붙습니다 */
  z-index: 20;
  background: var(--color-bg);
}

.faq-col-head-title {
  width: 220px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-soft);   /* 제목 컬럼은 배지 없이 담백하게 */
}

.faq-col-head-row {
  flex: 1;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.faq-col-head-cell {
  flex: 1;
  min-width: 0;
  padding-left: 12px;              /* 배지 테두리(1px) 포함해 언어 박스 글자 시작선과 맞춤 */
}

/* 국가별 색상 배지 — 직원 메모 모드(원장·실장) 헤더에 공통 적용합니다. */
.faq-col-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}

.faq-col-badge.lang-ko { background: #e0edff; color: #1d4ed8; border-color: #c7dcff; }
.faq-col-badge.lang-ja { background: #ffe4e6; color: #be123c; border-color: #fecdd3; }
.faq-col-badge.lang-tw { background: #d1fae5; color: #047857; border-color: #a7f3d0; }

/* 언어가 3개일 때는 제목 컬럼을 좁혀 본문 3칸의 폭을 확보합니다. */
.faq-outer.note-cols-3 .faq-card-title,
.faq-outer.note-cols-3 .faq-col-head-title {
  width: 160px;
}

/* ─── FAQ 카드 ──────────────────────────────────────────── */
.faq-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--color-border);   /* 항목 색상은 제목 왼쪽 dot 으로 표시 */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.12s;
}

.faq-card:hover { box-shadow: var(--shadow-md); }

/* ─── 항목 색상 원(dot) ─────────────────────────────────── */
.faq-card-title-text {
  min-width: 0;
}

.faq-card-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-tag-default);
}

/* default 는 눈에 띄지 않게 흰 원 + 연한 테두리 */
.faq-card-dot.color-default {
  background: #ffffff;
  border: 1.5px solid var(--color-border);
}

.faq-card-dot.color-red     { background: var(--color-tag-red); }
.faq-card-dot.color-orange  { background: var(--color-tag-orange); }
.faq-card-dot.color-amber   { background: var(--color-tag-amber); }
.faq-card-dot.color-green   { background: var(--color-tag-green); }
.faq-card-dot.color-teal    { background: var(--color-tag-teal); }
.faq-card-dot.color-blue    { background: var(--color-tag-blue); }
.faq-card-dot.color-indigo  { background: var(--color-tag-indigo); }
.faq-card-dot.color-purple  { background: var(--color-tag-purple); }
.faq-card-dot.color-pink    { background: var(--color-tag-pink); }

.faq-card-title {
  display: flex;            /* 색상 원 + 제목 텍스트 가로 배치 */
  align-items: center;      /* 원을 세로 가운데 정렬 */
  gap: 8px;
  width: 220px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  word-break: keep-all;
  line-height: 1.5;
}

.faq-lang-row {
  flex: 1;
  display: flex;
  gap: 10px;
  min-width: 0;
}

/* ─── FAQ 언어 박스 ─────────────────────────────────────── */
.faq-lang-box {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px solid var(--color-border);
  cursor: pointer;
  position: relative;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s,
              background 0.15s, opacity 0.2s, filter 0.2s;
  min-width: 0;
}

.faq-lang-box:hover:not(.faq-empty) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.faq-lang-box.faq-empty {
  opacity: 0.5;
  cursor: not-allowed;
}

.faq-lang-box.copying {
  border-color: var(--color-success) !important;
  background: #dcfce7 !important;
  transform: none !important;
}

.faq-lang-box.copied {
  opacity: 0.6;
  filter: grayscale(25%);
}

.faq-lang-box.copied:hover:not(.faq-empty) {
  opacity: 0.85;
  filter: grayscale(10%);
}

.faq-lang-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-soft);
  margin-bottom: 5px;
}

.faq-lang-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre-line;   /* pre-wrap은 -webkit-line-clamp와 충돌 → pre-line으로 교체 */
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.faq-empty-text {
  color: var(--color-text-soft);
  font-style: italic;
}

/* ─── FAQ 좌측 한국어 원본 박스 (일본/대만 탭) ──────────── */
/* 참고용이라 클릭 대상이 아닙니다 — 웰컴 메시지의 .card-ko-panel 과 같은 성격:
   회색 톤, cursor default, 호버 변화 없음, 클릭 이벤트 없음. */
.faq-original-box {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  background: var(--color-bg);
  border: 1px solid #f1f2f4;
  box-shadow: none;
  cursor: default;
  min-width: 0;
}

/* 마우스가 올라가도 어떤 변화도 없어야 함 */
.faq-original-box:hover {
  background: var(--color-bg);
  border-color: #f1f2f4;
  box-shadow: none;
  transform: none;
}

.faq-original-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-soft);
  white-space: pre-line;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.faq-original-empty {
  font-style: italic;
}

/* ─── FAQ ✓ 표시 ────────────────────────────────────────── */
.faq-check {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-success);
  background: #f0fdf4;
  border: 1.5px solid var(--color-success);
  padding: 2px 8px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
}

.faq-lang-box.copied .faq-check {
  opacity: 1;
}

/* ─── FAQ / 메모 이미지 항목 (메인 화면) ────────────────── */
/* ─── 외국인 탭 (한국어 원본 | 일본어 | 대만어) ───────────── */
/* 이미지 항목도 텍스트와 같은 3컬럼을 유지합니다 — 첫 칸은 빈칸. */
.faq-lang-row.faq-image-row-3 {
  display: flex;
  gap: 10px;
}

/* 첫 칸 빈 자리 — 테두리 없이 폭만 차지해 가운데·우측 컬럼을 텍스트 항목과 맞춥니다. */
.faq-original-box.faq-original-blank {
  background: transparent;
  border-color: transparent;
}

/* 일본용·대만용 한국어 원본이 다를 때 둘을 구분해 주는 라벨 */
.faq-original-part + .faq-original-part {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

.faq-original-tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 7px;
  border-radius: 5px;
  background: #eef0f3;
  color: var(--color-text-soft);
  font-size: 11.5px;
  font-weight: 600;
}

/* 이미지 항목은 언어 박스 2개 대신 박스 하나가 넓게 자리합니다.
   썸네일 구성(.card-image-container / .card-thumbnail / .card-filename)은
   웰컴 메시지 카드의 것을 그대로 재활용합니다. */
.faq-lang-row.faq-image-row {
  display: block;
}

.faq-lang-box.faq-image-box {
  display: flex;
  align-items: center;
  padding: 10px 12px;
}

.faq-lang-box.faq-image-box .card-image-container {
  min-width: 0;
}

.faq-lang-box.faq-image-box .card-filename {
  font-size: 13px;
}

/* ─── FAQ 빈 상태 ───────────────────────────────────────── */
.faq-empty-state {
  text-align: center;
  padding: 40px 20px;
  font-size: 15px;
  color: var(--color-text-soft);
  font-style: italic;
}

/* ─── 관리 화면 FAQ 안내 배너 ──────────────────────────── */
.admin-notice {
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  padding: 10px 24px;
  font-size: 13px;
  color: #92400e;
  text-align: center;
}

/* ─── 비밀번호 모달 ─────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 400px;
  box-shadow: var(--shadow-lg);
}

.modal h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--color-text);
}

.modal p {
  font-size: 14px;
  color: var(--color-text-soft);
  margin-bottom: 24px;
  line-height: 1.7;
}

.modal-input {
  width: 100%;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  margin-bottom: 10px;
  color: var(--color-text);
  transition: border-color 0.15s;
}

.modal-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.modal-error {
  color: var(--color-danger);
  font-size: 13px;
  margin-bottom: 14px;
  min-height: 18px;
}

.btn-modal-submit {
  background: var(--color-primary);
  color: white;
  padding: 14px;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.btn-modal-submit:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}

/* ─── FAQ 관리 편집 카드 ─────────────────────────────────── */
.faq-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.faq-item-card {
  background: var(--color-card-bg);
  border: 2px solid var(--color-tag-default);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* ─── 항목 드래그 앤 드롭 (FAQ / 직원 메모) ──────────────── */
.drag-handle {
  flex-shrink: 0;
  cursor: grab;
  color: var(--color-text-soft);
  font-size: 17px;
  line-height: 1;
  padding: 4px 2px;
  border-radius: 4px;
  user-select: none;
  transition: color 0.15s, background 0.15s;
}

.drag-handle:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.drag-handle:active {
  cursor: grabbing;
}

.faq-item-card.dragging {
  opacity: 0.5;
}

/* 드롭 위치 표시 — 카드 위/아래에 파란 가로선 */
.faq-item-card.drop-before::before,
.faq-item-card.drop-after::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
  pointer-events: none;
}

.faq-item-card.drop-before::before { top: -9px; }
.faq-item-card.drop-after::after   { bottom: -9px; }

/* 카드를 끄는 동안에는 입력창이 텍스트 드롭을 받지 않도록 */
body.dragging-item .faq-item-textarea,
body.dragging-item .faq-item-title-input {
  pointer-events: none;
}

.faq-item-card.color-default { border-color: var(--color-tag-default); }
.faq-item-card.color-red     { border-color: var(--color-tag-red);     }
.faq-item-card.color-orange  { border-color: var(--color-tag-orange);  }
.faq-item-card.color-amber   { border-color: var(--color-tag-amber);   }
.faq-item-card.color-green   { border-color: var(--color-tag-green);   }
.faq-item-card.color-teal    { border-color: var(--color-tag-teal);    }
.faq-item-card.color-blue    { border-color: var(--color-tag-blue);    }
.faq-item-card.color-indigo  { border-color: var(--color-tag-indigo);  }
.faq-item-card.color-purple  { border-color: var(--color-tag-purple);  }
.faq-item-card.color-pink    { border-color: var(--color-tag-pink);    }

.faq-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.faq-item-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-soft);
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.faq-item-title-input {
  flex: 1;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 0.15s;
}

.faq-item-title-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-card-bg);
}

.faq-item-body {
  display: flex;
  gap: 12px;
}

/* FAQ 편집 본문 컬럼 (라벨 + textarea) — 국가별 필드 구성에 사용 */
.faq-item-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.faq-item-col .faq-item-textarea {
  flex: 1;
  width: 100%;
}

/* 한국어 원본 컬럼은 참고용 — 본문과 구분되게 살짝 흐린 배경 */
.faq-item-col-ko .faq-item-textarea {
  background: #fafbfc;
  color: var(--color-text-soft);
}

/* 이미지 항목 편집 본문 — 웰컴 편집 UI(.item-image-preview 등)를 재활용 */
.faq-item-body.faq-item-image-body {
  align-items: center;
}

.faq-item-body.faq-item-image-body .item-image-preview {
  flex: 1;
  min-width: 0;
}

.faq-item-body.faq-item-image-body .item-image-input-row {
  max-width: none;
}

.faq-item-textarea {
  flex: 1;
  min-height: 110px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  resize: none;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 0.15s;
}

.faq-item-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-card-bg);
}

/* ─── FAQ 색상 칩 (관리 화면) ───────────────────────────── */
.faq-color-chip-wrapper {
  position: relative;
  flex-shrink: 0;
}

.faq-color-chip {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  cursor: pointer;
  transition: transform 0.12s;
  display: block;
  padding: 0;
}

.faq-color-chip:hover {
  transform: scale(1.1);
}

.faq-color-chip[data-color="default"] {
  background: #ffffff;
  border: 1px dashed #9ca3af;
}

/* ─── FAQ 색상 팝오버 ───────────────────────────────────── */
.faq-color-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(5, 26px);
  gap: 6px;
  box-shadow: var(--shadow-md);
  z-index: 200;
}

.faq-color-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  cursor: pointer;
  transition: transform 0.12s;
  padding: 0;
}

.faq-color-dot:hover {
  transform: scale(1.15);
}

.faq-color-dot.selected {
  outline: 2.5px solid #111827;
  outline-offset: 2px;
}

.faq-color-dot[data-color="default"] {
  background: #ffffff;
  border: 1px dashed #9ca3af;
}

/* ─── 관리 화면: 외국인 탭 이미지 슬롯 2개 (일본용 / 대만용) ── */
.faq-item-body.faq-item-image-body-2 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.faq-item-body.faq-item-image-body-2 .item-image-slot {
  flex: 1 1 260px;
  min-width: 0;
}