/* ============================================================
   이려하드 상태 팔레트 — 이업 시습니자기

   디자인 방향: "운영 콘솔"
   - 이 화면은 마케팅 페이지가 아니라 총지배인 한 사람이 반복해서
     빠르게 쓰는 내부 도구다. 화려한 히어로 대신 정보 위계, 가독성,
     상태(로딩/빈값/오류) 표현의 명확함을 우선한다.
   - 팔레트는 속초 밤바다(ink navy) + 따뜻한 종이(paper) 배경에
     등대 신호를 딴 teal(주 액션) / amber(강조, 드래그 표시) 조합.
     AI 생성 페이지에 흔한 크림+테라코타, 무채색+네온 조합은
     의도적으로 피함.
   - 서체: Pretendard(한글 가독성이 검증된 실무 표준 서체) — 이 도구는
     매일 반복 사용되므로 개성보다 속도(가독성)를 우선한 선택.
============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@1.3.9/dist/web/static/pretendard.css');

:root {
  /* ---- Color: 팔레트 ---- */
  --color-ink: #1B2430;            /* 헤더/PIN게이트 배경 — 밤바다 */
  --color-paper: #F6F4EF;          /* 페이지 배경 — 따뜻한 종이 */
  --color-surface: #FFFFFF;        /* 카드 표면 */
  --color-surface-sunken: #F1EEE6; /* 중첩 영역(질문 목록, 탭 배경) */
  --color-line: #E3DFD3;           /* 헤어라인 보더 */
  --color-line-strong: #CDC6B4;    /* 입력창 보더 */

  --color-text: #22262B;
  --color-text-muted: #736C5E;
  --color-text-faint: #A39C89;

  --color-accent: #1F6F78;         /* 주 액션 — teal */
  --color-accent-hover: #17575F;
  --color-accent-soft: #E3EEEE;

  --color-beacon: #C98A2C;         /* 강조 — amber (드래그 항목 좌측 표시 등) */
  --color-beacon-soft: #F6E9D2;

  --color-danger: #B3392C;
  --color-danger-hover: #90291E;
  --color-danger-soft: #F5E3DF;

  --color-success: #3F7D58;

  /* ---- Radius / Shadow / Space ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(27, 36, 48, .07);
  --shadow-md: 0 4px 16px rgba(27, 36, 48, .12);
  --shadow-lg: 0 16px 40px rgba(27, 36, 48, .22);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;

  --content-width: 720px;
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* ============================================================
   Base / Reset
============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-paper);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, p { margin: 0; }
a { color: var(--color-accent-hover); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

noscript {
  display: block;
  padding: var(--space-4);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  text-align: center;
  font-weight: 600;
}

/* ============================================================
   버튼 (공통 컴포넌트)
============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }

.btn--ghost { background: transparent; color: var(--color-text-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--color-text); }

.btn--outline { background: var(--color-surface); color: var(--color-accent-hover); border-color: var(--color-line-strong); }
.btn--outline:hover:not(:disabled) { border-color: var(--color-accent); }

.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover:not(:disabled) { background: var(--color-danger-hover); }

.btn--danger-text { background: transparent; color: var(--color-danger); }
.btn--danger-text:hover:not(:disabled) { background: var(--color-danger-soft); }

.btn--icon {
  padding: var(--space-1) var(--space-2);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
}
.btn--icon:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--color-text); }

.btn--small { padding: 6px var(--space-3); font-size: .8125rem; }

/* ============================================================
   PIN 게이트
============================================================ */

.pin-gate {
  position: fixed;
  inset: 0;
  background: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 100;
}
.pin-gate[hidden] { display: none; }

.pin-gate__box {
  width: 100%;
  max-width: 320px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.pin-gate__title { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--space-1); }
.pin-gate__subtitle { font-size: .875rem; color: var(--color-text-muted); margin-bottom: var(--space-5); }

.pin-gate__box input[type="password"] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  font-size: 1.125rem;
  letter-spacing: .3em;
  text-align: center;
  margin-bottom: var(--space-4);
}
.pin-gate__box input[type="password"]:focus { border-color: var(--color-accent); background: var(--color-surface); }

.pin-gate__box .btn { width: 100%; }

.pin-gate__error {
  margin-top: var(--space-3);
  color: var(--color-danger);
  font-size: .8125rem;
  font-weight: 600;
}
.pin-gate__error[hidden] { display: none; }

/* ============================================================
   앱 셸 / 헤더 / 상태바
============================================================ */

.app {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-7);
}
.app[hidden] { display: none; }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) 0 var(--space-4);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-4);
}
.app-header h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.app-header__subtitle { display: block; font-size: .8125rem; color: var(--color-text-muted); margin-top: 2px; }

/* 로딩/오류 등 전역 상태 — app.js가 텍스트를 채우고
   data-variant="loading|error"를 붙여 톤을 바꾼다 (기본값 = 안내) */
.global-status {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  font-size: .8125rem;
  font-weight: 600;
}
.global-status[hidden] { display: none; }
.global-status[data-variant="error"] { background: var(--color-danger-soft); color: var(--color-danger); }

/* ============================================================
   탭 내비게이션
============================================================ */

.tab-nav {
  display: flex;
  gap: 2px;
  background: var(--color-surface-sunken);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.tab-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.tab-btn.is-active { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-sm); }

.tab-panel[hidden] { display: none; }

/* ============================================================
   추가 토글 + 인라인 폼 (공통 — 카테고리/질문/정보 추가에 재사용)
============================================================ */

.add-toggle { margin-bottom: var(--space-3); }
.add-toggle--nested { margin: var(--space-3) 0 var(--space-2); }

.inline-form {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: reveal var(--transition-base);
}
.inline-form[hidden] { display: none; }
.inline-form--nested { background: var(--color-surface-sunken); margin: 0 0 var(--space-3); }

@keyframes reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.inline-form__row { display: flex; flex-direction: column; gap: 4px; }
.inline-form__row--grow { flex: 1; }
.inline-form__row label { font-size: .75rem; font-weight: 600; color: var(--color-text-muted); }

.inline-form__row input,
.inline-form__row textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-size: .9375rem;
  width: 100%;
}
.inline-form__row input:focus,
.inline-form__row textarea:focus { border-color: var(--color-accent); background: var(--color-surface); }
.inline-form__row textarea { resize: vertical; min-height: 64px; }

.inline-form__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* 편집 모드(카드/항목 내부) 폼은 위 .inline-form__row 스타일을 그대로 재사용 */
.menu-card__edit-form,
.question-item__edit-form,
.info-item__edit-form { display: flex; flex-direction: column; gap: var(--space-2); }
.menu-card__edit-form[hidden],
.question-item__edit-form[hidden],
.info-item__edit-form[hidden] { display: none; }

.menu-card__edit-form { flex-direction: row; align-items: center; flex: 1; gap: var(--space-2); }
.menu-card__edit-emoji {
  width: 56px; text-align: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  background: var(--color-paper);
}
.menu-card__edit-name {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  background: var(--color-paper);
}
/* question/info의 edit-form 안쪽 입력은 .inline-form__row를 그대로 상속받는다 (중복 규칙 불필요) */

/* ============================================================
   상태 표시 (빈 목록 / 로딩 / 오류) — 리스트 자리 표시자
============================================================ */

.list-status {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: .875rem;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
}
.list-status[hidden] { display: none; }
.list-status[data-variant="error"] {
  border-color: var(--color-danger);
  border-style: solid;
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

/* ============================================================
   챗봇메뉴 탭 — 카테고리 카드 + 질문 목록
============================================================ */

.menu-list { display: flex; flex-direction: column; gap: var(--space-3); }

.menu-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.menu-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.drag-handle {
  cursor: grab;
  color: var(--color-text-faint);
  font-size: 1rem;
  line-height: 1;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
}
.drag-handle:active { cursor: grabbing; }

.menu-card__display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.menu-card__emoji { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.menu-card__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-card__badge,
.question-item__badge,
.info-item__badge {
  flex-shrink: 0;
  font-size: .6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-text-faint);
  color: #fff;
}
.menu-card__badge[hidden],
.question-item__badge[hidden],
.info-item__badge[hidden] { display: none; }

.menu-card__actions,
.question-item__actions,
.info-item__actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.menu-card__body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-3);
}
.menu-card__body[hidden] { display: none; }

/* ---- 질문/답변 항목 (카테고리 카드 내부, 왼쪽에 amber 표시선) ---- */

.question-list { display: flex; flex-direction: column; gap: var(--space-2); }

.question-item {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-beacon);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.question-item__header { display: flex; align-items: flex-start; gap: var(--space-2); }

.question-item__display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.question-item__question { font-weight: 600; }

.question-item__body { margin-top: var(--space-2); }
.question-item__body[hidden] { display: none; }
.question-item__answer { color: var(--color-text); white-space: pre-wrap; }

/* ============================================================
   주변정보 탭 — 분류별 그룹 + 항목
============================================================ */

.info-list { display: flex; flex-direction: column; gap: var(--space-5); }

.info-group__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.info-item-list { display: flex; flex-direction: column; gap: var(--space-2); }

.info-item {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.info-item__header { display: flex; align-items: center; gap: var(--space-2); }

.info-item__display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.info-item__name { font-weight: 600; }

.info-item__body { margin-top: var(--space-2); }
.info-item__body[hidden] { display: none; }
.info-item__meta { font-size: .8125rem; color: var(--color-text-muted); }
.info-item__desc { margin-top: var(--space-1); color: var(--color-text); white-space: pre-wrap; }

/* ---- 답변/정보에 붙는 외부 링크 칩 (질문/정보 공통) ---- */

.question-item__link,
.info-item__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  color: var(--color-accent-hover);
  font-weight: 600;
  font-size: .8125rem;
  text-decoration: none;
}
.question-item__link:hover,
.info-item__link:hover { text-decoration: underline; }
.question-item__link::after,
.info-item__link::after { content: "↗"; font-size: .75em; }
.question-item__link[hidden],
.info-item__link[hidden] { display: none; }

/* ============================================================
   드래그 정렬 훅 (js/drag-reorder.js가 이 클래스를 토글)
   - is-dragging: 지금 드래그 중인 항목
   - drag-over-top / drag-over-bottom: 드롭 시 끼워질 위치 표시선
============================================================ */

.menu-card.is-dragging,
.question-item.is-dragging,
.info-item.is-dragging { opacity: .45; box-shadow: none; }

.menu-card.drag-over-top,
.question-item.drag-over-top,
.info-item.drag-over-top { box-shadow: inset 0 2px 0 0 var(--color-accent); }

.menu-card.drag-over-bottom,
.question-item.drag-over-bottom,
.info-item.drag-over-bottom { box-shadow: inset 0 -2px 0 0 var(--color-accent); }

/* ============================================================
   삭제 확인 모달 (공용)
============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 36, 48, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 200;
}
.modal-overlay[hidden] { display: none; }

.modal-box {
  width: 100%;
  max-width: 360px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--transition-base);
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

.modal-box__title { font-size: 1.0625rem; font-weight: 700; margin-bottom: var(--space-2); }
.modal-box__message { font-size: .875rem; color: var(--color-text-muted); white-space: pre-wrap; margin-bottom: var(--space-5); }
.modal-box__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* ============================================================
   토스트
   - app.js가 clone한 .toast에 .toast--success / .toast--error를
     필요에 따라 추가. 부드럽게 없애려면 제거 전 .toast--leaving 추가
     (200ms 후 DOM에서 제거) — 안 붙여도 기능상 문제 없음.
============================================================ */

.toast-container {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: calc(100% - var(--space-6));
  max-width: 360px;
  z-index: 300;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  max-width: 100%;
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
  animation: toast-in var(--transition-base);
}
.toast--success { background: var(--color-success); }
.toast--error { background: var(--color-danger); }
.toast--leaving { animation: toast-out var(--transition-base) forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* ============================================================
   모바일 (총지배인이 휴대폰으로 확인할 때 대비)
============================================================ */

@media (max-width: 640px) {
  .app { padding: 0 var(--space-3) var(--space-6); }
  .app-header h1 { font-size: 1.125rem; }
  .app-header { padding-top: var(--space-4); }

  .menu-card__header,
  .question-item__header,
  .info-item__header { flex-wrap: wrap; }

  .menu-card__edit-form { flex-wrap: wrap; }

  .inline-form__actions { justify-content: stretch; }
  .inline-form__actions .btn,
  .modal-box__actions .btn { flex: 1; }
}