/*
  styles.css — 반응형 CSS. 모바일 화면(좁은 화면)을 기본으로 짜고,
  화면이 넓어지면(태블릿·PC) @media (min-width: ...)로 여백/글자를 키운다.
  이렇게 "작은 화면부터" 짜는 방식을 "모바일 퍼스트"라고 부른다 — 처음부터
  좁은 화면에서 안 깨지게 만들면, 넓은 화면 대응은 나중에 여유롭게 살만 붙이면
  되기 때문에 순서가 그렇다.
*/

:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --ink: #1f2937;
  --ink-2: #4b5563;
  --ink-3: #9ca3af;
  --line: #e5e7eb;
  --accent: #2f5f8a;
  --accent-soft: #eaf1f7;
  /* 2026-08-25: 다크 사이드바 테마 — 예전에 만들어둔 화면 디자인 시안(다크
     네이비 사이드바 + 밝은 카드형 본문)을 실제 화면에도 적용해달라는 요청
     반영. .topbar가 원래 쓰던 색(#1f3a5f)을 그대로 사이드바 색으로 삼아서,
     상단바+사이드바가 하나로 이어진 패널처럼 보이게 했다. */
  --sidebar-bg: #1f3a5f;
  --sidebar-bg-hover: #274a75;
  --sidebar-text: #c3d0e0;
  --sidebar-text-active: #ffffff;
  --sidebar-line: rgba(255, 255, 255, 0.1);
}

* { box-sizing: border-box; }

html {
  /* 답변 본문의 "참고자료 N" 링크를 눌렀을 때 아래 참고자료 카드로 부드럽게
     스크롤 이동하도록(2026-08-25, 클릭 시 위치를 못 찾는 문제 방지). */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.topbar {
  background: #1f3a5f;
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.admin-link, .topbar-current {
  font-size: 12px;
  color: #cdd8e6;
  text-decoration: none;
}
.admin-link:hover { color: #fff; }

/* 2026-08-25: 메뉴(법령검색/내부지침검색 등) 사이를 오가는 네비게이션 —
   base.html에서 모든 페이지가 공유한다. 메뉴 항목을 세로로 쌓는 이유는
   base.html 주석 참고 — 메뉴 개수가 계속 늘어날 예정이라 세로 목록이
   가로 탭보다 잘 맞는다.

   .layout이 메뉴(.menu-nav) + 본문(.content)을 감싸는 flex 컨테이너다.
   모바일/태블릿(기본값): flex-direction이 안 바뀌므로 세로로 쌓임(메뉴 목록이
   위, 본문이 아래) — .layout 자체엔 방향을 안 정해줬는데, 기본 flex 방향이
   row라서 메뉴 폭이 좁아 보일 수 있어 모바일에서는 아래처럼 명시적으로
   column을 준다.
   데스크톱(min-width: 1024px): row로 바꿔서 왼쪽 사이드바 + 오른쪽 본문 배치. */
.layout {
  display: flex;
  flex-direction: column;
}
.menu-nav {
  display: flex;
  flex-direction: column;   /* 메뉴 항목을 세로로 나열 */
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-line);
}
.menu-nav a {
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sidebar-text);
  text-decoration: none;
  border-bottom: 1px solid var(--sidebar-line);
  border-left: 3px solid transparent;
}
.menu-nav a:last-child { border-bottom: none; }
/* ⚠️ 2026-08-25 실측: 처음엔 --accent-soft(연한 하늘색)를 선택 배경으로
   썼는데, 본문 배경(--bg)이랑 밝기가 너무 비슷해서 "선택된 메뉴가 뭔지
   구분이 잘 안 된다"는 피드백을 받음. accent 색을 그대로 채우고 글자를
   흰색으로 바꿔서 눈에 확실히 띄게 했다 — 다크 사이드바로 바꾼 뒤에도 이
   조합(진한 accent 배경 + 흰 글자)은 여전히 또렷하게 구분된다. */
.menu-nav a.active {
  color: var(--sidebar-text-active);
  background: var(--accent);
  border-left-color: var(--sidebar-text-active);
}
.menu-nav a:hover:not(.active) { color: var(--sidebar-text-active); background: var(--sidebar-bg-hover); }
/* external(다른 클라우드 앱 등, 새 탭으로 열림) 메뉴 표시 — ↗ 아이콘을 살짝
   연하게 둬서 "이건 딴 데로 간다"는 걸 은은하게 알려준다. */
.menu-nav a .ext-icon { opacity: 0.7; font-weight: 400; }

.content {
  /* 모바일: 화면 폭을 그대로 쓰되 좌우 여백만 살짝 */
  padding: 20px 16px 60px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  min-width: 0; /* flex 자식은 기본 min-width:auto라서, 안의 긴 텍스트(URL 등)가
                   .content를 넘겨 사이드바를 밀어내는 걸 이 한 줄이 막아준다. */
}

h1 { font-size: 19px; margin: 8px 0 4px; }
.lead { font-size: 13px; color: var(--ink-2); margin: 0 0 18px; }

/* 2026-08-27: 소셜로그인 선택 화면(auth_choose.html) 버튼 — 각 브랜드의
   공식 색을 그대로 써서 "이건 구글/카카오 로그인이다"가 한눈에 보이게 함. */
.oauth-buttons { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.oauth-btn {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.oauth-google { background: #fff; color: #1f1f1f; border: 1px solid var(--line); }
.oauth-kakao { background: #fee500; color: #1f1f1f; }

.ask-form {
  display: flex;
  flex-direction: column;   /* 모바일: 입력창과 버튼을 세로로 쌓음 */
  gap: 8px;
}
.ask-form input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;          /* 15~16px 이상: iOS 사파리에서 입력 시 자동 확대 방지 */
  font-family: inherit;
}
.ask-form button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.ask-form button:disabled { opacity: 0.6; cursor: default; }

/* 2026-08-25: 예시 질문 칩 — 메뉴를 처음 열었을 때 "어떤 질문을 할 수
   있는지" 감이 안 잡힌다는 피드백 반영. 클릭하면 검색창에 채워서 바로
   검색까지 실행한다(app.js 참고). */
.example-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}
.example-prompts-label { font-size: 12px; color: var(--ink-3); margin-right: 2px; }
.example-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.example-chip:hover { border-color: var(--accent); color: var(--accent); }

/* 2026-08-31 — 분야별 내부지침검색 메뉴가 질문창 위에 "이 메뉴엔 이 문서들이
   등록돼 있다"를 미리 보여주는 목록(_search_page.html의 registered_documents). */
.registered-docs {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.registered-docs-label { font-size: 12px; color: var(--ink-3); }
.registered-docs ul { margin: 6px 0 0; padding-left: 18px; }
.registered-docs li { font-size: 13px; color: var(--ink-2); line-height: 1.6; }

.status { margin-top: 16px; font-size: 13px; color: var(--ink-2); }

h2 { font-size: 14.5px; margin: 24px 0 8px; color: var(--accent); }

/* 답변/참고자료 제목 옆에 "HWPX로 저장" 버튼을 나란히 두는 레이아웃. */
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-header h2 { margin: 24px 0 8px; }
.export-btn {
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.export-btn:hover { background: var(--accent-soft); }

.note {
  background: #f6ede1;
  color: #8a5a20;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin: 0 0 10px;
}

/* 6단계: 모델별 답변 카드를 담는 그리드. 좁은 화면(모바일)에선 세로로 쌓이고,
   화면이 넓어지면 auto-fit이 알아서 열을 늘려서 "N개 활성 = N등분"이 된다 —
   활성 모델 수를 CSS에서 미리 알 필요가 없다는 게 이 방식의 장점. */
.answer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.answer-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  line-height: 1.7;
}
.answer-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}
/* 2026-08-25: answer-card-body는 이제 plain text가 아니라 app.js의
   renderMarkdown()이 만든 실제 h1~h6/p/ul/ol 태그를 담는다(마크다운 기호
   #·**가 그대로 화면에 보이는 문제를 실측 후 고침) — 그래서 white-space:
   pre-line 대신 각 태그의 여백을 직접 정리해준다. */
.answer-card-body h1, .answer-card-body h2, .answer-card-body h3,
.answer-card-body h4, .answer-card-body h5, .answer-card-body h6 {
  color: var(--ink);
  margin: 14px 0 6px;
  line-height: 1.4;
}
.answer-card-body h1 { font-size: 17px; }
.answer-card-body h2 { font-size: 15.5px; color: var(--ink); }
.answer-card-body h3 { font-size: 14.5px; }
.answer-card-body h4, .answer-card-body h5, .answer-card-body h6 { font-size: 14px; }
.answer-card-body > :first-child { margin-top: 0; }
.answer-card-body p { margin: 0 0 10px; }
.answer-card-body ul, .answer-card-body ol { margin: 0 0 10px; padding-left: 22px; }
.answer-card-body li { margin-bottom: 4px; }
.answer-card-body strong { color: var(--ink); }
/* 2026-08-25: 답변 안 마크다운 표(| A | B |) 렌더링 추가 — 넓은 표가 좁은
   화면에서 카드를 밀어내지 않도록 표만 별도로 가로 스크롤되게 감싼다. */
.answer-table-wrap { overflow-x: auto; margin: 0 0 10px; }
.answer-card-body table { border-collapse: collapse; width: 100%; font-size: 13px; }
.answer-card-body th, .answer-card-body td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
  /* 2026-08-25: nowrap이었던 걸 되돌림 — 셀 내용이 길면 줄바꿈 없이
     옆으로만 계속 늘어나서 표 전체가 가로 스크롤을 유발했다(사용자 피드백).
     대신 셀 안에서 줄바꿈되게 하고, 긴 단어/URL은 word-break로 끊는다. */
  white-space: normal;
  word-break: break-word;
  max-width: 320px;
}
.answer-card-body th { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
/* "참고자료 N" 인용을 아래 참고자료 카드로 바로 이동하는 링크로 바꿔준다. */
.answer-card-body .ref-jump-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.answer-card-body .ref-jump-link:hover { text-decoration: underline; }
.answer-card-error { border-color: #d97742; }
.answer-card-error .answer-card-title { color: #b3521e; }
.answer-card-error .answer-card-body { color: #b3521e; }

.ref-list { display: flex; flex-direction: column; gap: 10px; }
.ref-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.ref-item .ref-title { font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.ref-item .ref-kind {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-right: 6px;
}
.ref-item .ref-content { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; white-space: pre-line; }
.ref-links { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.ref-links a { font-size: 11.5px; color: var(--accent); text-decoration: none; font-weight: 700; }
.ref-links a:hover { text-decoration: underline; }

/* 2026-08-28 추가, 2026-08-29 표 형식으로 변경 — 홈 화면(메인 진입 화면)
   메뉴 소개를 연번·메뉴·설명이 한 줄에 나오는 표로 보여준다(사용자 요청,
   테두리는 연한 가는 선). 표가 좁은 화면에서 잘리지 않게 자체
   가로 스크롤 컨테이너(.tbl-wrap)로 감싼다. */
.tbl-wrap { overflow-x: auto; margin-top: 20px; }
.home-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}
.home-table th, .home-table td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}
.home-table thead th {
  background: var(--accent-soft);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
}
.home-table tbody tr:hover { background: var(--accent-soft); }
.home-table .col-num { width: 1%; white-space: nowrap; text-align: center; color: var(--ink-3); }
.home-table .col-menu { white-space: nowrap; font-weight: 700; }
.home-table .col-menu a { color: var(--accent); text-decoration: none; }
.home-table .col-menu a:hover { text-decoration: underline; }
.home-table .col-desc { color: var(--ink-2); width: 100%; }
.home-table .ext-icon { color: var(--ink-3); font-size: 12px; margin-left: 2px; }

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 6px;
  white-space: nowrap;
}
.badge-login { background: #fdf0e8; color: #b3521e; }
.badge-local { background: #e6f2ea; color: #1f6b45; }

/* --- 태블릿 이상: 검색창+버튼을 가로로, 여백을 넉넉하게 --- */
@media (min-width: 640px) {
  .content { padding: 32px 24px 80px; }
  h1 { font-size: 22px; }
  .ask-form { flex-direction: row; }
  .ask-form input { flex: 1; }
  .ask-form button { flex: none; padding: 0 24px; }
  /* 활성 모델이 여러 개면 카드가 자연히 여러 열로 나뉜다(모델 수를 몰라도 됨) */
  .answer-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* --- 데스크톱: 본문 폭을 조금 더 넉넉하게(N분할 화면은 폭 제한 없이) +
   메뉴 네비게이션을 위에서 아래로 흐르는 목록 대신 왼쪽 고정 사이드바로 --- */
@media (min-width: 1024px) {
  .layout { flex-direction: row; align-items: flex-start; }
  .menu-nav {
    flex-direction: column;
    flex-shrink: 0;
    width: 200px;
    border-bottom: none;
    border-right: 1px solid var(--line);
    min-height: calc(100vh - 47px); /* 47px ≈ .topbar 높이 — 사이드바가 화면 아래까지 이어지게 */
  }
  .menu-nav a { border-left-width: 3px; }
  /* ⚠️ 2026-08-25 실측 피드백: "화면 공간은 넓은데 검색창 폭이 너무 좁게
     나온다" — 820px는 사이드바(200px)를 뺀 나머지 공간에 비해 너무 좁았다.
     990px로 넉넉하게 키움. */
  .content { max-width: 990px; }
  #answer-section { max-width: none; }
}

/* --- 아주 넓은 화면(대형 모니터): 본문을 한 번 더 넉넉하게 --- */
@media (min-width: 1400px) {
  .content { max-width: 1180px; }
}

/* --- 관리자 화면 --- */
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.model-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
}
.model-row.disabled { opacity: 0.55; }
.model-name { font-weight: 700; flex: 1; }
.model-provider { color: var(--ink-3); font-size: 11.5px; }
.model-status { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.admin-form button {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

/* 2026-08-25: 관리자 메뉴 관리(외부 링크/embed) 섹션 — model-row를 재사용하되
   URL이 길어질 수 있어서 model-status의 nowrap을 여기서는 풀어준다. */
.model-row .model-status { white-space: normal; word-break: break-all; }
.menu-delete-btn {
  background: none;
  border: 1px solid var(--line);
  color: #b3521e;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.menu-delete-btn:hover { background: #fdf0e8; }
.menu-add-form { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.menu-add-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.menu-add-form input, .menu-add-form select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  color: var(--ink);
}

/* embed.html — 관리자가 등록한 외부 HTML을 본문 안에 iframe으로 보여줄 때.
   높이를 고정 vh로 잡은 이유: iframe은 안쪽 콘텐츠 높이를 몰라서 auto로 두면
   찌그러지므로, "화면 대부분"을 차지하는 고정 높이를 주는 게 가장 무난하다. */
.embed-frame {
  width: 100%;
  height: calc(100vh - 220px);
  min-height: 480px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 12px;
}