/* K-water 연구자료 검색 스타일(물·대화형). 색은 아래 :root 값만 바꾸면 전체가 바뀐다. */
@font-face {
  font-family: "Pretendard";
  src: url("fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #0f2a36;
  --ink-2: #3d5866;
  --ink-3: #7b919c;
  --sea: #0a7ea4;
  --sea-deep: #075a78;
  --aqua: #22b5d3;
  --foam: #e9f7fb;
  --mist: #f4f9fb;
  --line: #dcebf1;
  --mark: #fff1c7;
  --warn: #a35a00;
  --warn-bg: #fff6e6;
  --water: linear-gradient(135deg, #2cc0dc 0%, #0a7ea4 100%);
  --ai: linear-gradient(135deg, #6f5cf2 0%, #3b6fe0 55%, #0a86a8 100%);   /* AI 답변 켜짐(찾기 단추·스위치) */
  --ai-ink: #4f43d6;
  --report: #0a7ea4;
  --paper: #e0784a;
  --patent: #20a387;
  --shadow: 0 8px 28px rgba(7, 90, 120, .09);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  color: var(--ink);
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; text-align: inherit; }
.icon { flex: none; vertical-align: middle; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
[hidden] { display: none !important; }
body.modal-open { overflow: hidden; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; border-radius: 6px; }

/* ── 머리글 ── */
.top { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.brand img { display: block; width: auto; height: 38px; }   /* K-water 공식 마크: 비율·색을 바꾸지 않는다(CI 규정) */
.brand span { padding-left: 14px; border-left: 1px solid var(--line); font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.5px; }
/* '개발 중' 꼬리표(머리글·로그인): 아직 시험판임을 알린다 */
.dev-tag { margin-left: -6px; padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); border: 1px solid #f3d9a8; color: var(--warn); font-size: 11.5px; font-weight: 800; letter-spacing: 0; }
.login-brand .dev-tag { margin-left: -4px; }
/* 머리글 메뉴: '연구자료'(자료원마다 화면·앱)와 'R&D 도구'. 누르면 펼친다. 좁은 화면은 '메뉴' 하나(.top-all) */
.top-menus { display: flex; align-items: center; gap: 6px; }
.top-all { display: none; }
.top-nav { position: relative; font-size: 14px; }
.top-nav summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--foam); color: var(--sea-deep); font-weight: 700; cursor: pointer; white-space: nowrap; }
.top-nav summary::-webkit-details-marker { display: none; }
.top-nav summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.top-nav[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.top-nav-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: grid; gap: 2px; min-width: 200px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.top-nav-menu a, .top-nav-menu span { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.top-nav-menu a:hover { background: var(--mist); color: var(--sea-deep); }
.top-nav-menu .off { color: var(--ink-3); font-weight: 500; font-size: 13.5px; }
.top-nav-menu .icon { color: var(--ink-3); }
.top-nav-menu a:hover .icon { color: var(--sea); }
.top-nav-menu .ext { margin-left: auto; padding: 0 0 0 10px; display: grid; }   /* 새 창으로 여는 앱 */
.menu-data { min-width: 260px; }
.menu-group + .menu-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.menu-head { display: flex; align-items: center; gap: 7px; margin: 6px 12px 2px; font-size: 13px; font-weight: 800; color: var(--ink); }
.menu-head small { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .top-menus { display: none; }
  .top-all { display: block; }
}

/* ── 검색창(물어보기) ── */
.ask { max-width: 820px; margin: 0 auto; }
.ask-bar { display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 6px 0 18px; border-radius: 999px; background: #fff; border: 1.5px solid #bfe2ee; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.ask-bar:focus-within { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(34, 181, 211, .15), var(--shadow); }
.ask-drop { color: var(--aqua); display: grid; place-items: center; }
.ask-bar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--ink); padding: 0 8px; }
.ask-bar input::placeholder { color: #98aeb8; }
.ask-bar input::-webkit-search-cancel-button { display: none; }
.ask-clear { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.ask-clear:hover { background: var(--mist); color: var(--ink); }
.ask-go { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 22px; border-radius: 999px; background: var(--ai); color: #fff; font-weight: 700; font-size: 16px; white-space: nowrap; transition: filter .15s, transform .15s; }
.ask-go:hover { filter: brightness(1.06); }
.ask-go:active { transform: scale(.98); }
.ai-off .ask-go { background: var(--water); }   /* AI 답변 꺼짐: 물색 '검색' */
.ask:not(.ai-off) .ask-bar { border-color: #cdc6fa; }
.ask:not(.ai-off) .ask-bar:focus-within { border-color: #7a6cf0; box-shadow: 0 0 0 4px rgba(111, 92, 242, .14), var(--shadow); }
.ask.big .ask-bar { height: 66px; padding-left: 22px; }
.ask.big .ask-bar input { font-size: 19px; }
.ask.big .ask-go { height: 52px; padding: 0 28px; font-size: 17px; }
.ai-chip { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0 18px; padding: 5px 13px 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); cursor: pointer; user-select: none; transition: border-color .15s; }
.ai-chip:hover { border-color: var(--aqua); }
.ai-chip input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ai-chip b { color: var(--ai-ink); }
.ai-dot { width: 26px; height: 15px; border-radius: 8px; background: var(--ai); position: relative; transition: background .2s; }
.ai-dot::after { content: ""; position: absolute; top: 2px; left: 13px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: left .2s; }
.ai-off .ai-dot { background: #c7d5dc; }
.ai-off .ai-dot::after { left: 2px; }
.ai-off .ai-chip b { color: var(--ink-3); }
/* AI 답변 스위치는 찾기 단추 바로 위(오른쪽 끝). 첫 화면은 왼쪽에 설명 한 줄 */
.ask-top { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 8px 8px 0; }
.ask-top .ai-chip { margin: 0; }
.ai-hint { font-size: 13px; color: var(--ink-3); }
/* 첫 화면 제목 위 가운데: 검색 횟수 캡슐 [● 오늘 n | 전체 n](AI 답변 스위치 캡슐과 같은 모양). 글자·돋보기 대신 초록 실시간 점
   (2026-10-25 사용자: '검색'과 돋보기가 별로). portal.js가 1분마다 새로, 전체가 0이면 감춘다 */
.usage { display: inline-flex; align-items: center; margin: 0 0 14px; padding: 5px 4px 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.usage-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22b573; animation: feed-pulse 2s ease-out infinite; }
.usage-seg { padding: 0 11px; border-left: 1px solid var(--line); }
.usage-live + .sr-only + .usage-seg { padding-left: 9px; border-left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* 화면에는 안 보이고 화면 읽기 프로그램만 읽는 글자 */
.usage b { margin-left: 6px; font-size: 14.5px; font-weight: 800; color: var(--sea-deep); font-variant-numeric: tabular-nums; }

/* ── 첫 화면 ── */
.lake { position: relative; background: linear-gradient(180deg, #e2f4fa 0%, #f2fafd 60%, #fff 100%); padding: 40px 0 92px; overflow: hidden; }
.lake::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(44, 192, 220, .22), transparent 65%); }
.lake-in { position: relative; text-align: center; }
.lake h1 { margin: 0; font-size: 38px; line-height: 1.25; font-weight: 800; letter-spacing: -1.2px; color: var(--ink); }
.lake h1 em { font-style: normal; color: var(--sea); white-space: nowrap; }   /* 좁은 화면에서는 '정보검색 시스템'째 다음 줄로 */
.lake-sub { margin: 10px 0 22px; color: var(--ink-2); font-size: 17px; }
.lake-sub b { color: var(--sea-deep); font-weight: 800; }   /* 찾을 수 있는 자료 수(보고서+논문+특허, 어림수) */
.lake .ask { text-align: left; }
.lake-waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 88px; }
/* 첫 화면은 한 화면에(노트북 1536×730까지 스크롤 없음): 남는 높이는 물결 칸이 채우고 바닥글은 맨 아래에 붙는다 */
body.page-home { display: flex; flex-direction: column; min-height: 100vh; }
.page-home .lake { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.page-home .lake-in, .page-home .deck { width: 100%; }   /* 세로 줄 세우기 안에서도 폭을 다 쓴다(안 쓰면 내용만큼 좁아진다) */
.hints { max-width: 820px; margin: 16px auto 0; text-align: left; }
.hints p { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hints span { font-size: 13.5px; font-weight: 700; color: var(--ink-3); margin-right: 4px; min-width: 112px; }
.hint { font-size: 14.5px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); transition: all .15s; }
.hint:hover { border-color: var(--aqua); color: var(--sea-deep); transform: translateY(-1px); }
.hint.topic { background: rgba(255, 255, 255, .6); }
.empty { color: var(--ink-3); }

/* ── 첫 화면 아래: 왼쪽 실시간 자료 현황, 오른쪽 오늘의 브리프(물결 위에 살짝 걸친다. 두 칸 높이를 맞춘다) ── */
.deck { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: -60px auto 26px; }
.deck > div { display: flex; min-width: 0; }
.deck > div > * { flex: 1; min-width: 0; }
.brief-loading { display: grid; place-items: center; min-height: 190px; margin: 0; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink-3); }

/* 오늘의 브리프(데일리 브리프 공개 페이지에서 읽어 온다): 날짜·음성 브리핑, 제목 한 줄씩 3건, 단계별 건수·전체 보기 */
.brief-box { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 12px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brief-name { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.brief-name b { font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.brief-name span { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.brief-play { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--foam); color: var(--sea-deep); font-size: 13px; font-weight: 700; transition: background .15s; }
.brief-play:hover { background: #d4eff7; }
.brief-play:disabled { opacity: .6; cursor: default; }
.brief-play-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sea); color: #fff; }
.brief-play-ic > span { display: grid; }
.brief-play .ic-pause, .brief-play.playing .ic-play { display: none; }
.brief-play.playing .ic-pause { display: grid; }
.brief-play-text { display: flex; flex-direction: column; gap: 3px; min-width: 70px; }
.brief-play-bar { height: 3px; border-radius: 2px; background: rgba(10, 126, 164, .18); overflow: hidden; }
.brief-play-bar i { display: block; width: 0; height: 100%; background: var(--sea); transition: width .25s linear; }
.brief-list { list-style: none; margin: 0; padding: 0; }
.brief-list li + li { border-top: 1px solid var(--line); }
.brief-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; font-size: 14.5px; transition: background .15s; }
.brief-row:hover { background: var(--mist); }
.brief-row:hover b { color: var(--sea-deep); }
.brief-row .lv-tag { flex: none; display: inline-flex; align-items: center; gap: 6px; width: 68px; margin: 0; font-size: 12.5px; }
.brief-row .lv-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--lv); }
.brief-row b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief-row small { flex: none; max-width: 28%; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding-top: 7px; border-top: 1px dashed var(--line); }
.brief-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--ink-2); }
.brief-legend li { display: flex; align-items: center; gap: 6px; }
.brief-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--lv); }
.brief-legend b { font-weight: 800; color: var(--ink); }
.brief-all { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--sea); }
.brief-all:hover { text-decoration: underline; text-underline-offset: 3px; }

.lv-card-1 { --lv: #e05252; --lv-text: #c0392b; }
.lv-card-2 { --lv: #e0a325; --lv-text: #a86b00; }
.lv-card-3 { --lv: #3fb373; --lv-text: #23874f; }
.lv-tag { margin-right: 6px; color: var(--lv-text); font-weight: 800; }
.brief-off { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink-2); }
.brief-off span, .brief-off a { display: inline-flex; align-items: center; gap: 6px; }
.brief-off a { color: var(--sea); font-weight: 600; }
.pv-why { background: var(--foam); }
.pv-why h3 { display: flex; align-items: center; gap: 6px; }
.pv-why h3 .icon { color: var(--aqua); }
.pv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pv-note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* 실시간 자료 현황(_status.html, 1분마다 새로): 브리프와 같은 흰 카드. 위는 찾을 수 있는 자료를 합한 수(0부터 세어 올린다),
   아래는 자료가 들어온 기록(시각 · 자료원 색 점 · 무엇이 들어왔는지, 새것부터). 실제로 확인한 값만 */
.feed { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 12px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feed-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.feed-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed-live i { width: 7px; height: 7px; border-radius: 50%; background: #22b573; animation: feed-pulse 2s ease-out infinite; }
.feed-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin: 0 0 4px; }
.feed-total b { font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -1px; font-variant-numeric: tabular-nums; background: var(--water); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feed-total span { font-size: 17px; font-weight: 700; color: var(--sea-deep); }
.feed-total small { margin-left: 10px; font-size: 13.5px; color: var(--ink-3); }
.feed-list { list-style: none; margin: 0; padding: 0; }
/* 자료원 한 줄: 색 점 · 이름과 건수(굵게) · 오른쪽 끝 꼬리표(마지막 업데이트 날짜 · 준비 중 · 응답 없음) */
.feed-row { --c: var(--ink-3); display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 14.5px; color: var(--ink-2); }
.feed-row + .feed-row { border-top: 1px solid var(--line); }
.feed-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.feed-name b { margin-left: 2px; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.feed-name em { font-style: normal; color: var(--ink-3); }
.feed-tag { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, #fff); }
.feed-row.idle .feed-dot { background: #fff; border: 1.5px solid #b9cbd3; box-shadow: none; }
.feed-row.down .feed-dot { --c: #d64545; }
.feed-row.down .feed-name em { color: var(--warn); }
.feed-row.down .feed-tag { background: var(--warn-bg); border-color: #f3d9a8; color: var(--warn); }
@keyframes feed-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 181, 115, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(34, 181, 115, 0); } }
@media (prefers-reduced-motion: reduce) {
  .feed-live i, .usage-live { animation: none; }
}

/* 키 작은 넓은 화면(노트북 1536×730·1536×864 등): 간격만 줄여 첫 화면이 한 화면에 들어가게. 큰 모니터 모습은 그대로 */
@media (max-height: 900px) and (min-width: 961px) {
  .top-in { height: 58px; }
  .lake { padding: 14px 0 56px; }
  .lake-waves { height: 56px; }
  .lake h1 { font-size: 34px; }
  .usage { margin-bottom: 8px; }
  .lake-sub { margin: 4px 0 12px; font-size: 15.5px; }
  .ask-top { margin-bottom: 6px; }
  .ask.big .ask-bar { height: 54px; }
  .ask.big .ask-go { height: 42px; }
  .hints { margin-top: 8px; }
  .hints p { margin-bottom: 6px; }
  .hint { padding: 4px 12px; font-size: 14px; }
  .deck { margin: -46px auto 10px; }
  .brief-box, .feed { padding: 11px 16px 9px; }
  .brief-row { padding: 5px 6px; }
  .feed-row { padding: 6px 2px; }
  .page-home .foot { padding: 8px 0 10px; }
}
/* 더 낮은 화면(1366×650 등): AI 스위치 옆 설명은 감추고 줄 간격을 더 줄인다 */
@media (max-height: 680px) and (min-width: 961px) {
  .lake { padding: 10px 0 50px; }
  .lake-waves { height: 50px; }
  .lake h1 { font-size: 31px; }
  .usage { margin-bottom: 6px; padding-top: 3px; padding-bottom: 3px; }
  .lake-sub { margin: 2px 0 8px; font-size: 15px; }
  .ai-hint { display: none; }
  .hints p { margin-bottom: 4px; }
  .deck { margin-top: -40px; }
  .brief-box, .feed { gap: 2px; padding: 9px 16px 8px; }
  .feed-total b { font-size: 30px; }
  .brief-row { padding: 3px 6px; }
  .feed-row { padding: 4px 2px; }
  .brief-foot { padding-top: 5px; }
}
@media (max-width: 960px) {
  .deck { grid-template-columns: minmax(0, 1fr); margin-top: -56px; }
}
@media (max-width: 640px) {
  .ask-top { margin-left: 8px; }
  .ai-hint { display: none; }
  .brief-row small { display: none; }
  .feed-total small { width: 100%; margin-left: 0; }
  .feed-tag { padding: 1px 8px; font-size: 11.5px; }
}

/* ── 검색 결과: 틀 ── */
.ask-strip { padding: 12px 0 18px; background: linear-gradient(180deg, #ecf8fc, #fff); border-bottom: 1px solid var(--line); }
.ask-strip .ask { max-width: none; }
.layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 36px; padding-top: 28px; padding-bottom: 80px; }
.side { position: sticky; top: 88px; align-self: start; display: flex; flex-direction: column; gap: 18px; }
.side-title { margin: 0 0 6px 12px; font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: .3px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-item { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; color: var(--ink-2); font-weight: 600; transition: background .15s; }
.side-item:hover { background: var(--mist); }
.side-item.on { background: var(--foam); color: var(--sea-deep); }
.side-item small { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.side-item.on small { color: var(--sea); }
.side-tip { padding: 14px 16px; border-radius: 14px; background: var(--mist); font-size: 13.5px; color: var(--ink-2); }
.side-tip p { margin: 0 0 6px; }
.side-tip-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.side-tip a { color: var(--sea); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* 단 나누기(results.html). 볼 자료원은 위 한 줄. 넓으면 맨 왼쪽 AI 답변 · 가운데 검색 결과 · (카드를 누르면) 맨 오른쪽 자료 보기.
   AI 답변·자료 보기 단은 결과를 내려 봐도 화면에 붙어 있고 길면 그 안에서 내린다. 좁으면 한 단(AI 답변 → 검색 결과).
   doc-open: 자료 보기 단이 열렸을 때(AI 답변을 껐으면 검색 결과 · 자료 보기 2단) */
:is(.with-ai, .doc-open).layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
:is(.with-ai, .doc-open) .side { position: static; }
:is(.with-ai, .doc-open) .side-title, :is(.with-ai, .doc-open) .side-tip { display: none; }
:is(.with-ai, .doc-open) .side-nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
:is(.with-ai, .doc-open) .side-filter .side-title { display: block; margin: 0 6px 0 2px; }
:is(.with-ai, .doc-open) .side-item { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--mist); }
:is(.with-ai, .doc-open) .side-item.on { background: var(--foam); }
:is(.with-ai, .doc-open) .side-item small { margin-left: 4px; }
/* 볼 자료원 고르기(전체 보기): 체크를 끄면 그 묶음을 감춘다(portal.js) */
.side-filter .side-item { cursor: pointer; user-select: none; }
.side-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.side-check { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid #b9d3dd; background: #fff; color: transparent; transition: all .15s; }
.side-item.on .side-check { background: var(--sea); border-color: var(--sea); color: #fff; }
.side-filter .side-item:not(.on) { background: transparent; color: var(--ink-3); }
.side-filter .side-item:not(.on) .dot { opacity: .35; }
.side-filter .side-item:has(input:focus-visible) { outline: 2px solid var(--sea); outline-offset: 2px; }
/* 자료 보기 단: 누른 카드의 자세한 내용(미리보기와 같은 내용). 누른 카드는 테두리로 표시 */
.doc-col { border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.doc-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--line); border-radius: 20px 20px 0 0; background: rgba(255, 255, 255, .96); }
.doc-name { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--sea-deep); }
.doc-x { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.doc-x:hover { border-color: var(--aqua); color: var(--sea-deep); }
.doc-body { padding: 16px 20px 18px; }
.doc-body .pv-title { font-size: 20px; }
.doc-body .pv-sec { margin-top: 14px; padding: 12px 14px; }
.doc-body .pv-sec p { font-size: 15px; line-height: 1.75; }
.doc-body .pv-actions { margin-top: 12px; }
.doc-body .btn { padding: 10px 18px; font-size: 15px; }
.card.on { border-color: var(--sea); box-shadow: 0 0 0 3px rgba(10, 126, 164, .14), var(--shadow); }
@media (min-width: 1024px) {
  :is(.with-ai, .doc-open).layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 22px; }   /* AI 답변 | 결과, 또는 결과 | 자료 보기 */
  .with-ai.doc-open.layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* AI 답변 | 결과 | 자료 보기 */
  :is(.with-ai, .doc-open) .side { grid-column: 1 / -1; }
  .with-ai .ai-col { grid-column: 1; grid-row: 2; }
  .with-ai .main { grid-column: 2; grid-row: 2; }
  .doc-open:not(.with-ai) .main { grid-column: 1; grid-row: 2; }
  .doc-col { grid-column: -2 / -1; grid-row: 2; }
  .ai-col, .doc-col { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; }
  .ai-col { padding: 2px 6px 2px 2px; }
  .ai-col .avatar { display: none; }   /* 단 폭을 말풍선이 다 쓰게 */
  .ai-col .bot-body { padding: 14px 18px 12px; border-radius: 20px; }
  .ai-col .chat { margin-bottom: 24px; }
  /* 이어서 묻기는 단 아래에 붙어 있다(대화를 올려 읽다가도 바로 묻게) */
  .ai-col .ask-follow { position: sticky; bottom: 0; z-index: 2; margin: 0 0 2px; background: #fff; box-shadow: 0 -12px 18px rgba(255, 255, 255, .92); }
  .ai-col .ask-follow-title small { display: none; }
  .page-results.ai-on .wrap { max-width: 1680px; }   /* AI 답변을 켠 결과 화면은 화면 폭을 넓게 쓴다(머리글·검색창·단이 같은 폭) */
}
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--report); flex: none; }
.dot-paper { background: var(--paper); }
.dot-patent { background: var(--patent); }

/* ── 검색 결과: AI 답변(대화) ── */
.chat { margin-bottom: 38px; display: flex; flex-direction: column; gap: 14px; }
.bubble.me { align-self: flex-end; max-width: 78%; padding: 11px 18px; border-radius: 20px 20px 6px 20px; background: var(--sea); color: #fff; font-weight: 600; box-shadow: 0 6px 18px rgba(10, 126, 164, .25); }
.bubble.me p { margin: 0; }
.bubble.bot { display: flex; gap: 12px; align-items: flex-start; }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--water); box-shadow: 0 4px 14px rgba(10, 126, 164, .3); }
.bot-body { flex: 1; min-width: 0; padding: 16px 22px 14px; border-radius: 6px 20px 20px 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.bot-name { margin: 0 0 8px; font-weight: 800; color: var(--sea-deep); }
.bot-name small { font-weight: 500; color: var(--ink-3); margin-left: 6px; font-size: 13px; }
.ai-text { font-size: 16px; line-height: 1.8; }
.ai-text ul { margin: 0; padding-left: 20px; }
.ai-text li { margin: 2px 0 8px; }
.ai-text li::marker { color: var(--aqua); }
.ai-text p { margin: 0 0 8px; }
.ai-text .warn { color: var(--warn); }
.cite { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin: 0 1px; border-radius: 6px; background: var(--foam); color: var(--sea-deep); font-size: 12px; font-weight: 800; vertical-align: 1px; line-height: 1; border: 1px solid #c8e8f2; transition: all .15s; }
.cite:hover { background: var(--sea); color: #fff; border-color: var(--sea); }
.cites { white-space: nowrap; margin-left: 3px; }
/* 근거 번호 네모는 자료원 색(보고서 청록 = 기본, 논문 주황, 특허 초록) — 근거 자료 줄·아래 결과의 점과 같은 색 */
.cite.src-paper { background: #fdeee6; color: #b4511f; border-color: #f6cdb7; }
.cite.src-paper:hover { background: #d0632c; color: #fff; border-color: #d0632c; }
.cite.src-patent { background: #e2f4ee; color: #12755d; border-color: #b9e3d6; }
.cite.src-patent:hover { background: #168a6f; color: #fff; border-color: #168a6f; }
.caret { display: inline-block; width: 7px; height: 17px; margin-left: 2px; vertical-align: -3px; border-radius: 2px; background: var(--aqua); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typing { display: flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 14.5px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); animation: bob 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes bob { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
.evidence { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
/* 이어서 묻기(AI 답변 아래, macros.follow_box). 답을 받는 동안(.waiting)은 누를 수 없다 */
.ask-follow { margin: -18px 0 36px; padding: 14px 18px 12px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, #f2fafd, #fff); }
.ask-follow-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.ask-follow-title .icon { align-self: center; color: var(--aqua); }
.ask-follow-title small { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.ask-follow-bar { display: flex; gap: 8px; }
.ask-follow-bar input { flex: 1; min-width: 0; height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #bfe2ee; font: inherit; font-size: 15px; outline: 0; }
.ask-follow-bar input:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(34, 181, 211, .15); }
.ask-follow-bar .btn { padding: 0 18px; border: 0; cursor: pointer; }
.ask-follow-hints { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.ask-follow-hints .hint { padding: 4px 12px; font-size: 13.5px; cursor: pointer; }
.ask-follow.waiting .ask-follow-bar .btn, .ask-follow.waiting .hint { opacity: .45; pointer-events: none; }
.rs-ask .ask-follow { margin: 0 0 6px; background: #fff; }
.evidence-cap { margin: -4px 0 8px; font-size: 12.5px; color: var(--ink-3); }
.evidence-title { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.evidence-row { list-style: none; margin: 0; padding: 2px 2px 8px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; }
.evidence-row li { flex: 0 0 220px; scroll-snap-align: start; }
.evidence-row button { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border-radius: 12px; background: var(--mist); border: 1px solid transparent; transition: all .15s; }
.evidence-row button:hover, .evidence-row li.active button { background: #fff; border-color: var(--aqua); box-shadow: 0 4px 14px rgba(34, 181, 211, .18); }
.evidence-row .num { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--report); color: #fff; font-size: 11.5px; font-weight: 800; }
.evidence-row .src-paper .num { background: #d0632c; }   /* 자료원 색을 조금 짙게(흰 숫자가 잘 읽히게) */
.evidence-row .src-patent .num { background: #168a6f; }
.evidence-row b { font-size: 13.5px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evidence-row small { font-size: 12px; color: var(--ink-3); }
/* 읽었지만 답에 쓰지 않은 자료: 답을 다 받은 뒤 portal.js가 접어 둔다(번호 없음, 흐리게) */
.evidence-more { margin: 0 0 6px; }
.evidence-more summary { display: inline-flex; align-items: center; gap: 7px; padding: 3px 2px; font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; list-style: none; }
.evidence-more summary::-webkit-details-marker { display: none; }
.evidence-more summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.evidence-more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.evidence-more summary:hover { color: var(--sea-deep); }
.evidence-row.unused { margin-top: 6px; }
.evidence-row.unused button { opacity: .7; }
.evidence-row.unused button:hover { opacity: 1; }
.ai-note { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* ── 검색 결과: 자료원별 묶음과 카드 ── */
.group { margin-bottom: 36px; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.group-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.group-head h2 small { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.more { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--sea); padding: 5px 12px; border-radius: 999px; background: var(--foam); }
.more:hover { background: #d4eff7; }
.range { font-size: 13.5px; color: var(--ink-3); }
.group-note { margin: -4px 0 10px; font-size: 13.5px; color: var(--ink-3); }
.card { position: relative; cursor: pointer; padding: 18px 22px 16px; margin-bottom: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: box-shadow .15s, border-color .15s, transform .15s; }
.card:hover { border-color: #bfe2ee; box-shadow: var(--shadow); transform: translateY(-1px); }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.kicker .dot { margin-right: 2px; }
.kicker i, .card-people i { font-style: normal; color: #b9cbd3; margin: 0 2px; }
.sample-tag { margin-left: 4px; padding: 1px 7px; border-radius: 6px; background: #fdecc8; color: #7a4b00; font-size: 12px; }
.card-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: -.2px; }
.card-title a:hover { color: var(--sea); text-decoration: underline; text-underline-offset: 3px; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* 카드 어디를 눌러도: 보고서는 연구 상세, 논문·특허는 미리보기 */
.card:hover .card-title a { color: var(--sea); }
.card-link:focus-visible { outline: 0; }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--sea); outline-offset: 2px; }
.card-go { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.card:hover .card-go { color: var(--sea); }
.card-people { margin: 0; font-size: 14px; color: var(--ink-2); }
.card-text { margin: 8px 0 0; font-size: 15px; color: #4a6270; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
mark { background: var(--mark); color: inherit; padding: 0 2px; border-radius: 4px; }
.card-title mark { background: none; color: var(--sea); padding: 0; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.card-extra { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.card-extra span { padding: 2px 9px; border-radius: 999px; background: var(--mist); }
.card-acts { display: flex; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: #fff; transition: all .15s; }
.pill:hover { border-color: var(--aqua); color: var(--sea-deep); }
.notice { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-radius: 16px; background: var(--mist); color: var(--ink-2); font-size: 15px; }
.notice a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--sea); white-space: nowrap; }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
/* 늦은 자료원: '마저 찾는 중'(저절로 다시 받는다), 그래도 안 되면 '다시 찾기' 단추(_group.html, portal.js) */
.notice.wait { background: var(--foam); color: var(--sea-deep); }
.notice .typing { margin: 0; color: inherit; }
.notice .retry { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid #f0cf96; color: var(--warn); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.notice .retry:hover { background: #fffaf0; }
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.pager a { min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center; border-radius: 999px; font-weight: 600; color: var(--ink-2); background: var(--mist); }
.pager a:hover { color: var(--sea); background: var(--foam); }
.pager a.on { background: var(--sea); color: #fff; }

/* ── 미리보기 창 ── */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(6, 36, 48, .45); backdrop-filter: blur(4px); animation: fade .15s; }
.modal-panel { position: relative; width: min(820px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: #fff; border-radius: 22px; box-shadow: 0 30px 70px rgba(0, 0, 0, .22); padding: 30px 34px 28px; border-top: 5px solid var(--aqua); animation: rise .2s ease-out; }
.modal-x { position: sticky; top: 0; float: right; margin: -12px -14px 0 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); background: #fff; }
.modal-x:hover { background: var(--mist); color: var(--ink); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.pv-title { margin: 2px 0 6px; font-size: 23px; font-weight: 800; line-height: 1.4; letter-spacing: -.4px; }
.pv .card-extra { margin: 10px 0 0; }
.pv-sec { margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: var(--mist); }
.pv-sec h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 800; color: var(--sea-deep); }
.pv-sec p { margin: 0; font-size: 15.5px; line-height: 1.8; color: #3a5361; white-space: pre-wrap; }
.pv-sec a { color: var(--sea); overflow-wrap: anywhere; }
.pv-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pv-keywords span { font-size: 13.5px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.pv-actions { margin-top: 22px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--water); color: #fff; font-weight: 700; }
.btn:hover { filter: brightness(1.06); }
.loading { padding: 40px 0; text-align: center; color: var(--ink-3); }

/* ── 연구 상세(보고서 한 건, research.html): 보고서 앱의 연구 상세를 옮겨 온 것 ── */
.rs-head { padding: 20px 0 18px; background: linear-gradient(180deg, #ecf8fc, #fff); border-bottom: 1px solid var(--line); }
.rs-back { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.rs-back:hover { color: var(--sea); }
.rs-head h1 { margin: 2px 0 12px; font-size: 26px; line-height: 1.4; font-weight: 800; letter-spacing: -.5px; }
/* 머리: 왼쪽 분류·제목·배지, 오른쪽 원문 PDF(열기·내려받기)·조회 수·보고서 앱 */
.rs-headtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 32px; }
.rs-headtext { flex: 1; min-width: 0; }
.rs-headside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 4px; }
.rs-pdf { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rs-pdf-one { display: inline-flex; border-radius: 999px; box-shadow: 0 6px 16px rgba(10, 126, 164, .18); }
.rs-pdf-open, .rs-pdf-dl { display: inline-flex; align-items: center; gap: 7px; height: 44px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.rs-pdf-open { padding: 0 16px 0 18px; border-radius: 999px 0 0 999px; background: var(--water); color: #fff; }
.rs-pdf-dl { padding: 0 16px 0 12px; border-radius: 0 999px 999px 0; background: var(--sea-deep); color: #fff; font-size: 14px; }
.rs-pdf-open:hover, .rs-pdf-dl:hover { filter: brightness(1.08); }
.rs-pdf-off { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; color: var(--ink-3); }
.rs-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.rs-badge { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--foam); color: var(--sea-deep); }
.rs-badge.rs-review { background: var(--warn-bg); color: var(--warn); }
.rs-badge.rs-done { background: #e7f6ee; color: #23874f; }
.rs-badge.rs-card { background: var(--mist); color: var(--ink-2); }
.rs-badge.rs-list { background: var(--mist); color: var(--ink-3); }
.rs-stats { display: flex; gap: 20px; margin: 0; font-size: 12.5px; color: var(--ink-3); }
.rs-stats span { text-align: right; }
.rs-stats b { display: block; font-size: 18px; font-weight: 800; color: var(--ink); }
.rs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; padding-top: 18px; padding-bottom: 60px; }
.rs-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.rs-tabs button { padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-3); background: none; border: 0; border-bottom: 2.5px solid transparent; margin-bottom: -1px; cursor: pointer; }
.rs-tabs button[aria-selected="true"] { color: var(--sea-deep); border-bottom-color: var(--sea); }
.rs-applink { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-3); }
.rs-applink:hover { color: var(--sea); }
.rs-field { margin-bottom: 22px; }
.rs-field h2, .rs-sub { margin: 0 0 6px; font-size: 16.5px; font-weight: 800; color: var(--ink); }
.rs-sub { margin-top: 6px; }
.rs-edited { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--warn); }
.rs-text { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); white-space: pre-line; }
.rs-original summary { margin-top: 6px; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.rs-cap { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.rs-note { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--mist); font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.rs-note.warn { display: flex; gap: 6px; background: var(--warn-bg); color: var(--warn); }
/* 이 보고서에 묻기: 개요 위에, 탭 없이 */
.rs-ask { margin: 0 0 26px; padding: 18px 20px 14px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, #f2fafd, #fff); }
.rs-ask h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 16.5px; font-weight: 800; }
.rs-ask h2 .icon { color: var(--aqua); }
.rs-ask-hints { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 4px; }
.rs-ask-hints .hint { cursor: pointer; font-size: 13.5px; padding: 4px 12px; }
.rs-ask .chat { margin-top: 14px; }
.ask-report { display: flex; gap: 8px; margin: 10px 0 14px; }
.ask-report input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #bfe2ee; font: inherit; font-size: 15px; outline: 0; }
.ask-report input:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(34, 181, 211, .15); }
.ask-report .btn { border: 0; cursor: pointer; }
.rs-side { display: flex; flex-direction: column; gap: 14px; }
/* 원문이 있으면 세 단(research.html with-ask): 1단 개요(연구목적~결론) · 2단 기본 정보·연구자·비슷한 연구 등 ·
   3단 '이 보고서에 묻기'(.ai-col: 화면에 붙어 있고 길면 그 안에서 내린다. 검색 결과 AI 단과 같은 방식).
   1024~1199px은 개요 아래에 기본 정보 등 · 오른쪽 묻기, 더 좁으면 한 단(묻기 → 개요 → 기본 정보 등) */
.rs-layout.with-ask { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.rs-askcol .rs-ask { margin: 0; }
@media (min-width: 1024px) {
  .rs-layout.with-ask { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 28px; }
  .rs-askcol { grid-column: 2; grid-row: 1 / span 2; }
  .with-ask .rs-main { grid-column: 1; grid-row: 1; }
  .with-ask .rs-side { grid-column: 1; grid-row: 2; }
  .page-research.has-ask .wrap { max-width: 1680px; }   /* 검색 결과처럼 화면 폭을 넓게(머리글·제목 줄·단이 같은 폭) */
}
@media (min-width: 1200px) {
  .rs-layout.with-ask { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, 1fr); gap: 24px; }
  .rs-askcol { grid-column: 3; grid-row: 1; }
  .with-ask .rs-side { grid-column: 2; grid-row: 1; }
}
.rs-panel { padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.rs-panel h3 { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--ink); }
.rs-props { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 13.5px; }
.rs-props dt { color: var(--ink-3); font-weight: 600; }
.rs-props dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.rs-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; }
.rs-list a { color: var(--sea-deep); font-weight: 600; }
.rs-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rs-list small { display: block; font-size: 12px; color: var(--ink-3); }
.rs-missing { padding-top: 60px; padding-bottom: 60px; }
/* 참여 연구자: 책임자 한 줄, 참여 연구원은 이름 칩을 붙여서 */
.rs-lead { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.rs-lead a { color: var(--sea-deep); }
.rs-lead a:hover, .rs-chips a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rs-role { padding: 2px 9px; border-radius: 999px; background: var(--sea); color: #fff; font-size: 11.5px; font-weight: 700; }
.rs-role-cap { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.rs-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.rs-chips a { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--mist); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.rs-chips a:hover { background: var(--foam); color: var(--sea-deep); }
@media (max-width: 960px) {
  .rs-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rs-head h1 { font-size: 21px; }
  .rs-tabs { flex-wrap: wrap; }
  .rs-headtop { flex-direction: column; }   /* 좁으면 원문 PDF 단추는 제목 아래로 */
  .rs-headside { align-items: flex-start; padding-top: 0; }
  .rs-pdf { justify-content: flex-start; }
  .rs-headside .rs-stats span { text-align: left; }
}

/* ── 분석 화면(연구 현황·연구자·협업·표·수치 찾기, overview·people·person·tables.html): 보고서 앱에서 옮겨 온 것 ──
   그림 색: --c-a 막대·책임, --c-b 참여(색약 검사 통과 2026-10-23), --c-off 다른 막대를 골랐을 때 나머지 */
.page-analysis { --c-a: #0a7ea4; --c-b: #e0784a; --c-off: #cbd9df; --axis: #c3d3db; }
.an-head { padding: 22px 0 20px; background: linear-gradient(180deg, #ecf8fc, #fff); border-bottom: 1px solid var(--line); }
.an-nav { display: flex; gap: 6px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }   /* 보고서 분석 화면 사이 이동 */
.an-nav::-webkit-scrollbar { display: none; }
.an-nav a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .8); font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.an-nav a:hover { border-color: #bfe2ee; color: var(--sea-deep); }
.an-nav a[aria-current="page"] { border-color: var(--sea); background: var(--sea); color: #fff; }
.an-head h1 { margin: 2px 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.6px; }
.an-sub { margin: 0; max-width: 780px; font-size: 14.5px; color: var(--ink-2); }
.an-body { padding-top: 20px; padding-bottom: 64px; }
.an-section { margin-top: 28px; }
.an-section h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.an-section h2 small, .rs-sub small, .rs-tabs small { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.an-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.an-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--foam); color: var(--sea-deep); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.an-btn:hover { background: #d4eff7; }
.an-foot { margin-top: 26px; }
.an-foot a { color: var(--sea); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* 조건 고르기 */
.an-filter details { border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.an-filter summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 700; color: var(--ink-2); cursor: pointer; list-style: none; }
.an-filter summary::-webkit-details-marker { display: none; }
.an-filter summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); }
.an-filter details[open] summary::after { transform: rotate(-135deg); }
.an-filter summary b { padding: 1px 9px; border-radius: 999px; background: var(--foam); color: var(--sea-deep); font-size: 12.5px; }
.an-filter-body { display: grid; gap: 14px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.an-filter fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.an-filter legend { margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.an-filter legend small { margin-left: 6px; font-weight: 500; }
.an-filter select, .an-inline select { height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid #bfe2ee; background: #fff; font: inherit; font-size: 14px; color: var(--ink); }
.an-years span { margin: 0 6px; color: var(--ink-3); }
.an-chips label { position: relative; display: inline-block; margin: 0 6px 6px 0; }
.an-chips input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.an-chips span { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.an-chips label:hover span { border-color: #bfe2ee; background: var(--mist); }
.an-chips input:checked + span { border-color: var(--sea); background: var(--sea); color: #fff; }
.an-chips input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 2px; }
.an-filter-go { display: flex; align-items: center; gap: 16px; margin: 0; }
.an-filter-go .btn, .an-ask .btn { border: 0; cursor: pointer; }
.an-filter-go .btn { padding: 9px 24px; }
.an-filter-go a, .an-inline a { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.an-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.an-inline label { display: inline-flex; align-items: center; gap: 6px; }
.an-inline .an-btn { border: 0; cursor: pointer; }
.an-ask { display: flex; gap: 8px; margin-top: 12px; }
.an-ask input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #bfe2ee; font: inherit; font-size: 15px; outline: 0; }
.an-ask input:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(34, 181, 211, .15); }
.an-ask .btn { padding: 0 20px; }
/* 지표 */
.an-tiles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 14px; padding: 0; }
.an-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-tiles li { padding: 14px 16px; border-radius: 16px; background: var(--mist); }
.an-tiles span { display: block; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.an-tiles b { display: block; margin-top: 2px; font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.an-tiles small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.an-scope { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0; font-size: 14px; color: var(--ink-2); }
.an-scope a { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--sea); }
/* 막대 그림(_charts.html): 막대 굵기 16px(가로)·24px 이하(세로), 끝만 둥글게, 막대 사이·쌓은 조각 사이 2px 흰 틈 */
.an-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 26px; }   /* 그림 여섯 개: 3칸 × 2줄 */
@media (max-width: 1100px) { .an-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-chart { min-width: 0; margin: 0; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.an-chart figcaption { margin-bottom: 10px; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.an-chart figcaption small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.an-wide-k .hbar { grid-template-columns: 118px minmax(0, 1fr); }   /* 조직 이름처럼 긴 이름 */
.hbars { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.hbar { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; padding: 4px 6px; border-radius: 8px; }
.hbar-k { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink-2); text-align: right; overflow-wrap: anywhere; }
.hbar-t { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.hbar-t i { flex: none; width: calc((100% - 100px) * var(--p)); height: 16px; border-radius: 0 4px 4px 0; background: var(--c-a); }
.hbar-t b { font-weight: 700; color: var(--ink); white-space: nowrap; }
.hbar-t small { color: var(--ink-3); white-space: nowrap; }
.hbar.fixed { cursor: default; }
.hbar.fixed i { background: #8cc0d4; }   /* '그 외'(여러 곳을 묶은 막대, 누를 수 없음) */
/* 한눈에(연구과제 현황 맨 위 요약 세 줄) */
.an-glance { margin: 0 0 14px; padding: 14px 18px 12px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, #f2fafd, #fff); }
.an-glance h2 { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--sea-deep); }
.an-glance ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; font-size: 15px; color: var(--ink-2); }
.an-glance li::marker { color: var(--aqua); }
.an-glance b { color: var(--ink); }
.an-glance small { color: var(--ink-3); font-size: 12.5px; }
.an-glance .rs-cap { margin-top: 6px; }
.vbars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 236px; }
.vbar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; height: 100%; border-radius: 6px 6px 0 0; }
.vbar-v { font-size: 11.5px; font-weight: 700; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vbar-s { display: flex; flex-direction: column; gap: 2px; width: min(24px, 72%); }
.vbar-s i { display: block; height: calc(180px * var(--p)); background: var(--c-a); }
.vbar-s i:first-child { border-radius: 4px 4px 0 0; }
.vbar-k { width: 100%; padding-top: 5px; border-top: 1px solid var(--axis); font-size: 11.5px; line-height: 1.3; color: var(--ink-3); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vbar-k.skip { color: transparent; }
.seg-b, .vbar-s .seg-b { background: var(--c-b); }
.hbar:hover, .hbar:focus-visible, .vbar:hover, .vbar:focus-visible { background: var(--mist); }
.hbar.on { background: var(--foam); }
.hbar.on .hbar-k, .vbar.on .vbar-k, .vbar.on .vbar-v { color: var(--sea-deep); font-weight: 800; }
.hbar.dim i, .vbar.dim i { background: var(--c-off); }
.hbar.dim .hbar-k, .hbar.dim b, .vbar.dim .vbar-v { color: var(--ink-3); }
.an-legend { display: flex; gap: 14px; margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--c-a); }
.an-legend i.seg-b { background: var(--c-b); }
/* 막대 설명(마우스·Tab): 값이 먼저, 그림 가장자리에서는 안쪽으로 */
.page-analysis [data-tip] { position: relative; }
.page-analysis [data-tip]:hover::after, .page-analysis [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 6; width: max-content; max-width: 240px; padding: 7px 11px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.55; text-align: left; white-space: pre-line; pointer-events: none; box-shadow: 0 6px 18px rgba(15, 42, 54, .18); }
.page-analysis .vbar:nth-child(-n+3)::after { left: 0; transform: none; }
.page-analysis .vbar:nth-last-child(-n+3)::after { left: auto; right: 0; transform: none; }
/* 목록 표 */
.an-table-wrap { margin-top: 10px; max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.an-table th { position: sticky; top: 0; z-index: 1; padding: 9px 10px; background: var(--mist); border-bottom: 1px solid var(--line); text-align: left; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.an-table th button { font-weight: 700; }
.an-table th button:hover { color: var(--sea-deep); }
.an-table th[aria-sort="ascending"] button::after { content: " ▲"; font-size: 10px; color: var(--sea); }
.an-table th[aria-sort="descending"] button::after { content: " ▼"; font-size: 10px; color: var(--sea); }
.an-table td { padding: 8px 10px; border-bottom: 1px solid #eef5f8; vertical-align: top; color: var(--ink-2); white-space: nowrap; }
.an-table tr:last-child td { border-bottom: 0; }
.an-table tbody tr:hover { background: #f8fcfd; }
.an-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-table a, .tb-hit .rs-cap a { color: var(--sea-deep); font-weight: 600; }
.an-table a:hover, .tb-hit .rs-cap a:hover, .an-study-head a:hover, a.an-who-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.an-table .an-title { min-width: 280px; white-space: normal; }
.an-cell-list { list-style: none; display: grid; gap: 3px; margin: 0; padding: 0; }
.an-more summary { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--sea); cursor: pointer; }
.an-more .an-cell-list { margin-top: 3px; }
/* 이름 목록 */
.an-people summary { list-style: none; cursor: pointer; }
.an-people summary::-webkit-details-marker { display: none; }
.an-people summary h2::after { content: " 펼치기"; font-size: 13px; font-weight: 600; color: var(--sea); }
.an-people[open] summary h2::after { content: " 접기"; }
.an-names { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.an-names a { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 12px; border-radius: 999px; background: var(--mist); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.an-names a:hover { background: var(--foam); color: var(--sea-deep); }
.an-names small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
/* 연구자 찾기 */
.an-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.an-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.an-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16.5px; font-weight: 800; }
.an-card h2 .icon { color: var(--sea); }
.an-jump { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }   /* 첫소리 단추: 누른 묶음만 아래에 */
.an-jump button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--mist); font-weight: 700; color: var(--ink-2); cursor: pointer; }
.an-jump button:hover { background: var(--foam); color: var(--sea-deep); }
.an-jump button[aria-expanded="true"] { background: var(--sea); color: #fff; }
.an-cho-box { padding: 16px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.an-cho h2 { margin: 0; font-size: 16px; color: var(--sea-deep); }
.an-topic { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; margin-top: 12px; }
.an-topic h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--ink-3); }
.an-who { margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.an-who > p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; }
.an-who-name { font-size: 15.5px; font-weight: 800; color: var(--sea-deep); }
.an-who > p small { font-size: 12.5px; color: var(--ink-3); }
/* 연구자 한 사람 */
.an-person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px 20px; align-items: start; margin: 16px 0 22px; }
.an-person .an-tiles { margin: 0 0 12px; }
.an-person .vbars { height: 190px; }
.an-person .vbar-s i { height: calc(134px * var(--p)); }
.an-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.an-fields b { margin-right: 2px; color: var(--ink-3); }
.an-fields span { padding: 2px 10px; border-radius: 999px; background: var(--mist); }
.an-year { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 8px; font-size: 17px; font-weight: 800; }
.an-year:first-child { margin-top: 4px; }
.an-year small { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.an-study { margin-bottom: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.an-study-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0; }
.an-study-head a { font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.an-study-head .rs-badge { flex: none; }
.an-study .rs-cap { margin-top: 2px; }
.an-study-text { margin: 6px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.an-study-text b { margin-right: 4px; color: var(--ink); }
/* 협업 관계 그림: 가운데 이 사람(진한 큰 점), 둘레 공동참여자(누르면 그 사람). 선 굵기 = 같이 한 과제 수 */
.an-net { display: block; width: 100%; max-width: 720px; height: auto; margin: 6px auto 4px; }
.an-edge line { stroke: #8aa9b8; stroke-linecap: round; }
.an-edge.side line { stroke: #cddbe1; }
.an-edge line.hit { stroke: transparent; stroke-width: 14; }
.an-edge:hover line:not(.hit) { stroke: var(--sea); }
.an-node circle { fill: #3a97b9; stroke: #fff; stroke-width: 2; }
.an-node.me circle { fill: var(--sea-deep); }
.an-node circle.hit { fill: transparent; stroke: none; }
.an-node text { font-size: 14px; font-weight: 700; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
a.an-node:hover circle:not(.hit), a.an-node:focus-visible circle:not(.hit) { fill: var(--sea-deep); }
a.an-node:hover text { fill: var(--sea-deep); }
/* 표·수치 찾기 */
.an-tables-form .an-ask { margin: 0 0 10px; }
.an-tables-form .an-ask input { height: 52px; font-size: 16px; }
.an-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.an-examples a { padding: 6px 14px; border-radius: 999px; background: var(--foam); color: var(--sea-deep); font-size: 14px; font-weight: 600; }
.an-examples a:hover { background: #d4eff7; }
.tb-hit { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; }
.tb-hit h3 { margin: 0; font-size: 15.5px; font-weight: 800; }
.tb-wrap { max-height: 380px; margin-top: 10px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.tb-wrap table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.tb-wrap td, .tb-wrap th { max-width: 360px; padding: 4px 8px; border: 1px solid #e3edf1; vertical-align: top; }
.tb-wrap tr:first-child td, .tb-wrap th { background: var(--mist); font-weight: 700; }
.tb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
@media (max-width: 960px) {
  .an-charts, .an-two, .an-topic, .an-person { grid-template-columns: minmax(0, 1fr); }
  .an-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-head h1 { font-size: 23px; }
}
@media (max-width: 640px) {
  .an-tiles b { font-size: 21px; }
  .an-tiles-3 b { font-size: 19px; }
  .an-tiles li { padding: 12px 13px; }
  .hbar { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
  .an-chart { padding: 14px 12px 12px; }
  .an-ask .btn { padding: 0 14px; }
  .an-net text { font-size: 24px; stroke-width: 6px; }   /* 그림이 화면 폭에 맞춰 줄어드니 글자는 크게 */
}

/* ── 바닥글, 맨 위로 ── */
.foot { background: var(--mist); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; padding: 13px 0 15px; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.foot-name { color: var(--ink-2); font-weight: 700; }
.foot-name small { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--foam); color: var(--sea); font-size: 12px; }
.foot p { margin: 0; }
/* 자료원 색(자료 현황의 점 등) */
.src-report { --c: var(--report); }
.src-paper { --c: var(--paper); }
.src-patent { --c: var(--patent); }
.to-top { position: fixed; right: 20px; bottom: 72px; z-index: 15; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--water); box-shadow: 0 8px 20px rgba(10, 126, 164, .3); opacity: 0; pointer-events: none; transform: translateY(8px); transition: all .2s; }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.page-research.has-ask .to-top { right: auto; left: 22px; }   /* 오른쪽 '이 보고서에 묻기' 단을 가리지 않게 */
/* 찾는 중 알림(base.html #busy): 화면을 살짝 흐리게 하고 가운데 카드, 머리글 아래에 흐르는 줄 */
.busy { position: fixed; inset: 0; z-index: 40; display: grid; place-items: start center; padding: 22vh 16px 0; background: rgba(255, 255, 255, .55); backdrop-filter: blur(1.5px); animation: fade .2s; }
.busy-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; background: rgba(34, 181, 211, .18); }
.busy-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--water); animation: busy-slide 1.1s ease-in-out infinite; }
.busy-card { display: flex; align-items: center; gap: 14px; max-width: min(520px, 100%); padding: 18px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); animation: rise .25s; }
.busy-card p { margin: 0; }
.busy-card b { display: block; font-size: 16.5px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.busy-card small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.busy-drop { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--foam); color: var(--sea); animation: busy-bob 1.2s ease-in-out infinite; }
@keyframes busy-slide { from { left: -40%; } to { left: 100%; } }
@keyframes busy-bob { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .busy-bar::after, .busy-drop { animation: none; }
}

/* ── 의견(portal/feedback.py): 모든 화면 오른쪽 아래 '의견' 단추 · 의견 창 · AI 답변 👍/👎 · 의견 게시판 ── */
.fb-fab { position: fixed; right: 20px; bottom: 20px; z-index: 16; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 17px 0 14px; border-radius: 999px; background: var(--sea-deep); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 8px 22px rgba(7, 60, 80, .28); transition: background .15s, transform .15s; }
.fb-fab:hover { background: var(--sea); transform: translateY(-1px); }
.fb-panel { width: min(560px, 100%); }
.fb-panel h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.fb-cap { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.fb-cap a { color: var(--sea); font-weight: 700; }
.fb-form { display: grid; gap: 12px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-kinds label { position: relative; }
.fb-kinds input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-kinds span { display: inline-block; padding: 6px 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all .15s; }
.fb-kinds input:checked + span { background: var(--sea); border-color: var(--sea); color: #fff; }
.fb-kinds input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 2px; }
.fb-form textarea, .fb-name, .fb-comment-form textarea, .fb-comment-form input[name="name"] { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1.5px solid #bfe2ee; background: #fff; font: inherit; font-size: 15px; line-height: 1.6; outline: 0; resize: vertical; }
.fb-form textarea:focus, .fb-name:focus, .fb-comment-form textarea:focus, .fb-comment-form input:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(34, 181, 211, .15); }
.fb-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.fb-check small { color: var(--ink-3); }
.fb-error { margin: 0; font-size: 13.5px; font-weight: 600; color: #b4232a; }
.fb-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fb-actions a:not(.btn) { font-size: 13.5px; font-weight: 600; color: var(--sea); }
.fb-actions .btn, .fb-headbar .btn, .fb-adminform .btn { border: 0; cursor: pointer; }
.fb-actions .pill { cursor: pointer; }
.fb-done p { margin: 6px 0 18px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
/* AI 답변 아래 👍/👎(답을 다 받은 뒤 보인다) */
.ai-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-3); }
.ai-rate-q { font-weight: 600; color: var(--ink-2); }
.rate-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-3); transition: all .15s; }
.rate-btn:hover { border-color: var(--aqua); color: var(--sea-deep); }
.rate-btn[aria-pressed="true"] { background: var(--sea); border-color: var(--sea); color: #fff; }
.ai-rate-cap { font-size: 12px; color: var(--ink-3); }
.rate-note { display: flex; gap: 6px; width: 100%; scroll-margin-bottom: 150px; }   /* AI 단 아래에 붙은 '이어서 묻기' 높이만큼 */
.rate-note input { flex: 1; min-width: 0; height: 34px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #bfe2ee; font: inherit; font-size: 13.5px; outline: 0; }
.rate-note input:focus { border-color: var(--aqua); }
.rate-note .pill { cursor: pointer; }
.rate-done { font-weight: 700; color: var(--sea-deep); }
/* 의견 게시판(/feedback) */
.fb-head { padding: 26px 0 20px; background: linear-gradient(180deg, #ecf8fc, #fff); border-bottom: 1px solid var(--line); }
.fb-head h1 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.fb-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.fb-headbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.fb-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.fb-rated { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.fb-rated .icon { margin-left: 5px; }
.fb-body, .fb-head .wrap { max-width: 900px; }   /* 머리말과 목록의 왼쪽 끝을 맞춘다 */
.fb-body { padding-top: 20px; padding-bottom: 90px; }
/* 고르기: 종류는 글자 탭(밑줄·건수), 상태는 이름표 + 상태 색 점 칩, 정렬은 이름표 + 글자(묶음마다 모양이 다르다) */
.fb-filters { margin-bottom: 16px; }
.fb-kindtabs { display: flex; flex-wrap: wrap; gap: 0 24px; border-bottom: 1px solid var(--line); }
.fb-kindtabs a { margin-bottom: -1px; padding: 10px 2px 11px; border-bottom: 2.5px solid transparent; font-size: 15.5px; font-weight: 700; color: var(--ink-3); transition: color .15s, border-color .15s; }
.fb-kindtabs a:hover { color: var(--ink); }
.fb-kindtabs a.on { border-bottom-color: var(--sea); color: var(--ink); }
.fb-kindtabs small { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fb-kindtabs a.on small { color: var(--sea); }
.fb-subbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 14px; }
.fb-statusbar, .fb-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fb-label { margin-right: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.fb-chip { --dot: #9db0ba; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: border-color .15s, background .15s; }
.fb-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.fb-chip:hover { border-color: #bfe2ee; }
.fb-chip.on { border-color: var(--sea); background: var(--foam); color: var(--sea-deep); }
.fb-chip.c-0 { --dot: #6f8a98; }
.fb-chip.c-1 { --dot: #d9931c; }
.fb-chip.c-2 { --dot: #2ea866; }
.fb-chip.c-3 { --dot: #b3c1c8; }
.fb-sortbar a { padding: 2px 2px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.fb-sortbar a:hover { color: var(--ink); }
.fb-sortbar a.on { font-weight: 800; color: var(--ink); }
.fb-sortbar i { font-style: normal; color: #c4d2d9; }
.fb-post { padding: 16px 20px 14px; margin-bottom: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.fb-post:target { border-color: var(--sea); box-shadow: 0 0 0 3px rgba(10, 126, 164, .12); }
.fb-post-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.fb-kind { padding: 2px 10px; border-radius: 999px; background: var(--mist); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.fb-kind.k-bug { background: #fdecec; color: #b4232a; }
.fb-kind.k-idea { background: var(--foam); color: var(--sea-deep); }
/* 상태: 접수(회청) · 검토 중(주황) · 반영(초록) · 미반영(회색). 색만이 아니라 글자로도 적는다 */
.fb-status { padding: 1px 10px; border-radius: 999px; border: 1px solid; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.fb-status.s-0 { background: #f3f7f9; border-color: #c9d8df; color: #4b6472; }
.fb-status.s-1 { background: var(--warn-bg); border-color: #f0d9a8; color: var(--warn); }
.fb-status.s-2 { background: #e7f6ee; border-color: #bfe6cf; color: #23874f; }
.fb-status.s-3 { background: #f1f4f6; border-color: #d6e0e5; color: #6b818c; }
.fb-meta { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.fb-meta i, .fb-c-meta i { font-style: normal; margin: 0 4px; color: #b9cbd3; }
.fb-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-page { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
.fb-page a { margin-left: 4px; color: var(--sea); overflow-wrap: anywhere; }
.fb-post-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.fb-vote, .fb-reply { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: all .15s; }
.fb-vote b, .fb-reply b { margin-left: 2px; font-weight: 800; color: var(--ink); }
.fb-vote:hover, .fb-reply:hover { border-color: var(--aqua); color: var(--sea-deep); }
.fb-vote.on { background: var(--foam); border-color: var(--sea); color: var(--sea-deep); }
.fb-admin { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 999px; background: var(--warn-bg); }
.fb-admin button { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--warn); }
.fb-admin button.on { background: var(--warn); color: #fff; }
.fb-comments:not(:empty) { margin-top: 12px; border-top: 1px solid var(--line); }
.fb-c { margin-top: 8px; padding: 6px 0 4px 12px; border-left: 2px solid var(--line); }
.fb-c.official { padding-right: 12px; border-left-color: var(--sea); border-radius: 0 10px 10px 0; background: var(--mist); }
.fb-c-meta { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.fb-dev { padding: 1px 8px; border-radius: 999px; background: var(--sea); font-size: 11.5px; font-weight: 700; color: #fff; }
.fb-c-text { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-comment-form { display: grid; gap: 6px; margin-top: 10px; }
.fb-comment-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fb-comment-bar input[name="name"] { width: 180px; padding: 7px 12px; font-size: 14px; }
.fb-comment-bar .pill { margin-left: auto; cursor: pointer; }
.fb-adminlink { margin-top: 28px; text-align: right; font-size: 12.5px; color: var(--ink-3); }
.fb-adminlink a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.fb-adminbox { max-width: 480px; padding-top: 40px; padding-bottom: 80px; }
.fb-adminbox h1 { font-size: 22px; font-weight: 800; }
.fb-adminform { display: grid; gap: 12px; margin-top: 16px; }
.foot-link { color: var(--sea); font-weight: 600; }
@media (max-width: 640px) {
  .fb-fab { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .fb-fab span { display: none; }
  .fb-admin { margin-left: 0; }
  .fb-kindtabs { gap: 0 16px; }
  .fb-meta { width: 100%; margin-left: 0; }
}

/* ── 좁은 화면 ── */
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 16px; }   /* 옆으로 넘기는 근거 자료 줄이 칸을 넓히지 않게 */
  .side { position: static; }
  .side-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-title, .side-tip { display: none; }
  .side-item { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--mist); }
  .side-item small { margin-left: 4px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .top-in { height: 56px; }
  .brand { gap: 11px; }
  .brand img { height: 32px; }
  .brand span { padding-left: 11px; font-size: 17px; }
  .lake { padding: 32px 0 84px; }
  .lake h1 { font-size: 30px; }
  .lake-sub { font-size: 15px; margin-bottom: 22px; }
  .ask-bar, .ask.big .ask-bar { height: 54px; padding-left: 14px; }
  .ask.big .ask-bar input, .ask-bar input { font-size: 16px; }
  .ask-go, .ask.big .ask-go { height: 42px; padding: 0 14px; }
  .ask-go span { display: none; }
  .hints span { min-width: 0; width: 100%; }
  .bubble.me { max-width: 92%; }
  .avatar { display: none; }
  .bot-body { padding: 14px 16px 12px; border-radius: 18px; }
  .card { padding: 16px; }
  .notice { flex-wrap: wrap; }
  .notice a { margin-left: 0; }
  .modal { padding: 10px; }
  .modal-panel { padding: 24px 18px; }
}

/* ── 비밀번호 화면(주소로 열 때) ── */
.page-login { background: linear-gradient(180deg, #e2f4fa 0%, #f2fafd 60%, #fff 100%); min-height: 100vh; }
.login { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.login-card { width: min(380px, 100%); padding: 30px 28px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.login-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.login-brand img { height: 34px; width: auto; }
.login-brand span { padding-left: 12px; border-left: 1px solid var(--line); font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.login-card h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.4px; }
.login-sub { margin: 4px 0 18px; color: var(--ink-3); font-size: 14.5px; }
.login-field { display: grid; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.login-field input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #bfe2ee; font: inherit; font-size: 16px; outline: 0; }
.login-field input:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(34, 181, 211, .15); }
.login-error { margin: 10px 0 0; color: #b4232a; font-size: 14px; font-weight: 600; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 18px; border: 0; cursor: pointer; font-size: 16px; }