/* KOBRA 포털의 임시 스타일.
 *
 * **base.html 의 <style> 안에 있던 것을 옮겨 왔다.** 인라인으로 두면 두 가지
 * 문제가 있다.
 *
 * 1. 주석이 모든 방문자에게 그대로 전송된다. 여기 적힌 설명은 우리끼리 보는
 *    것이지 브라우저가 읽을 것이 아니다.
 * 2. **주석의 낱말이 페이지 글자로 샌다.** "이 말이 화면에 없어야 한다"는
 *    검사가 CSS 주석 때문에 실패하는 일을 세 번 겪었다(마이페이지·조회·
 *    h-index). 그때마다 주석 문구를 바꾸는 것은 원인을 고치는 것이 아니다.
 *
 * 파일로 두면 따로 캐시되어 페이지마다 다시 내려받지도 않는다.
 *
 * 디자인이 정해지면 이 파일을 갈아 끼운다. → design/README.md
 */

/* 화면 너비. 현행 kobra.kr 과 같은 폭(1200px 안팎)으로 맞춘다.
 *
 * 처음에는 52rem(832px)이었다. 글 읽기에는 그 폭이 낫지만, 이 포털은 글보다
 * 목록·표·지도가 많다 — 연구자 표는 칸이 다섯이라 832px 안에서 소속이 두
 * 줄로 접혔고, 지도는 세계를 담기에 좁았다.
 *
 * **대신 긴 글은 따로 잡는다.** 폭을 넓히면 이관해 온 소개 글의 줄이 1200px
 * 로 늘어나 눈이 다음 줄 첫머리를 못 찾는다. 그것은 `.body` 에서 좁힌다. */
body { font-family: system-ui, sans-serif; max-width: 75rem; margin: 0 auto;
       padding: 1.5rem; line-height: 1.7; color: #1a1a1a; }

/* 링크 색. **한 번 눌렀다고 색이 바뀌지 않는다.**
 *
 * 여기에 규칙이 없으면 브라우저 기본값이 그대로 나온다 — 방문 전 파랑,
 * 방문 후 보라. 목록을 훑는 화면이 많아서, 읽은 것과 안 읽은 것이 색으로
 * 갈리면 같은 목록이 사람마다 다른 그림이 되고 인쇄물과도 어긋난다.
 *
 * `:visited` 를 따로 적지 않아도 된다. 브라우저의 `:visited` 규칙은 UA
 * 스타일시트에 있고, 여기 적은 것은 작성자 스타일이라 우선한다 — 명시도가
 * 아니라 출처가 이긴다.
 *
 * 명시도를 `a` 하나로 낮게 둔다. `.btn`·`.footer-links a` 처럼 제 색을
 * 가진 곳이 그대로 이기게 하기 위해서다. */
a { color: #1d4ed8; }
header { display: flex; gap: 1rem; align-items: center;
         border-bottom: 1px solid #ddd; padding-bottom: .75rem; }
header h1 { font-size: 1.1rem; margin: 0; }
/* 원본 로고는 300x150 이다. 높이로 맞추고 너비는 비율에 맡긴다.
   2.6rem → 3.12rem → 6.24rem 으로 키워 왔다 — 머리글에서 기관 표시가
   작다는 의견이 이어져 두 배로(2026-08-27). */
header h1 img { display: block; height: 6.24rem; width: auto; }
footer img.logo { display: block; height: 2.2rem; width: auto; margin-bottom: .6rem; }
/* 도식은 원본이 1800px 이라 그대로 두면 화면을 넘는다. */
figure { margin: 1.2rem 0; }
figure img { display: block; width: 100%; height: auto;
             border: 1px solid #eee; border-radius: .3rem; }
figure figcaption { font-size: .85rem; color: #666; margin-top: .4rem; }
nav { margin-left: auto; display: flex; gap: .75rem; font-size: .9rem;
      align-items: center; flex-wrap: wrap; }
nav a { text-decoration: none; color: #333; }
/* 머리글 오른쪽. **두 줄**로 세운다 — 위가 GNB, 아래가 도구(검색·로그인·
   언어 전환). 한 줄에 두면 좁은 창이나 로그인 상태에서 줄바꿈이 일어나
   두 줄이 되는데, 그 줄바꿈은 우리가 정한 자리가 아니라 폭이 정하는
   자리라 화면마다 달라진다. 처음부터 둘로 나눠 자리를 고정한다.
   도구가 GNB 아래에 서는 것은 하위 메뉴를 클릭으로 열게 바꾼 덕이다 —
   hover 로 열던 때는 마우스가 지나가기만 해도 하위 메뉴가 이 줄을 덮었다.
   → templates/base.html 의 머리글 주석
   `header >` 로 한정한다 — 바깥의 바닥글 `nav.footer-links` 는 한 줄로
   남아야 한다. */
header > nav { flex-direction: column; align-items: flex-end; gap: .5rem;
               flex-wrap: nowrap; }
header > nav .nav-utility { display: flex; gap: .75rem; align-items: center;
                            flex-wrap: wrap; justify-content: flex-end; }
nav a:hover { text-decoration: underline; }
/* GNB. 하위 메뉴는 **CSS 로만** 연다 — 자바스크립트로 열면 스크립트가
   늦게 오거나 막힌 환경에서 메뉴 없는 사이트가 된다. */
.gnb { display: flex; gap: .75rem; list-style: none; margin: 0; padding: 0;
       align-items: center; flex-wrap: wrap; }
.gnb > li { position: relative; }
.gnb a.on { font-weight: 700; color: #1d4ed8; }
.gnb .sub { display: none; position: absolute; left: 0; top: 100%;
            min-width: 10rem; margin: 0; padding: .35rem 0; list-style: none;
            background: #fff; border: 1px solid #ddd; border-radius: .3rem;
            box-shadow: 0 4px 12px rgba(0,0,0,.08); z-index: 20; }
.gnb .sub a { display: block; padding: .35rem .8rem; white-space: nowrap; }
.gnb .sub a:hover { background: #f2f6ff; text-decoration: none; }
/* **hover 로 열지 않는다.** 마우스가 지나가는 것만으로 열리면, 아래 도구
   줄로 내려가는 길에 열린 하위 메뉴가 검색·언어 전환을 덮어 누를 수 없게
   된다(2026-09-05). 단추를 눌러야 열린다.

   스크립트 없이도 열려야 하므로 `:focus-within` 이 바탕이다 — 단추를
   누르면 포커스가 잡히고, 그것만으로 열린다. 키보드도 같은 길을 쓴다.
   스크립트가 있으면(.gnb.js) `.open` 으로 넘겨받는다: 포커스가 남아 있어도
   한 번 더 누르면 닫혀야 하는데, `:focus-within` 만으로는 닫히지 않는다.

   마우스만 되면 키보드 사용자는 하위 항목에 영영 닿지 못한다(SYS-10) —
   단추가 그 길이다. */
.gnb .has-sub:focus-within .sub { display: block; }
.gnb.js .has-sub:not(.open) .sub { display: none; }
/* 헤더 통합검색(SYS-1). **제 줄을 가지므로 크게 둔다** — 메뉴 옆에 끼어
   있던 때는 8.5rem 에 .85rem 글씨로 낮고 좁게 눌러 두었는데, GNB 가 윗줄로
   가면서 이 줄의 자리를 다 쓸 수 있게 됐다. 검색어가 열 글자만 넘어도
   앞이 잘려 무엇을 찾는 중인지 안 보이던 칸이다.
   전역 form input 규칙은 type=text 만 잡으므로 type=search 는 직접 그린다. */
.header-search { display: inline-flex; gap: .4rem; align-items: center; }
.header-search input[type=search] { width: 20rem; padding: .45rem .7rem;
  font: inherit; font-size: 1rem; border: 1px solid #ccc; border-radius: .25rem; }
.header-search button { padding: .45rem 1rem; font-size: 1rem; }
/* 좁은 화면에서는 줄 전체를 쓴다 — 고정 폭을 두면 옆의 로그인·언어 전환이
   밀려 다음 줄로 떨어진다. */
@media (max-width: 46rem) {
  header { flex-wrap: wrap; }
  header > nav { flex: 1 1 100%; min-width: 0; width: 100%; margin-left: 0;
                 align-items: stretch; }
  header > nav .nav-utility { min-width: 0; }
  .header-search { flex: 1 1 100%; }
  .header-search input[type=search] { flex: 1; width: auto; min-width: 0; }
}
/* 검색 결과 화면. 입력칸이 결과 바로 위에 서고, 갈래 제목이 결과 사이를
   가른다. */
.search-form { display: flex; gap: .5rem; max-width: 30rem; margin: 0 0 1.2rem; }
.search-form input[type=search] { flex: 1; padding: .45rem .6rem; font: inherit;
  border: 1px solid #ccc; border-radius: .25rem; }
.search-section h3 { margin: 1.6rem 0 .2rem; }
.search-section h3 .muted { font-weight: normal; }
/* 하위 메뉴 여닫는 단추. **모든 폭에서 보인다** — 이것이 하위 메뉴를 여는
   유일한 길이기 때문이다(예전에는 넓은 화면이 hover 로 열려서 숨겼다).
   → static/js/nav.js */
.gnb .sub-toggle {
  display: inline-block; background: none; border: 0; padding: 0 .2rem;
  color: #555; cursor: pointer; font: inherit; line-height: 1;
}
.gnb .sub-toggle::before { content: "▾"; }
.gnb .has-sub.open > .sub-toggle::before { content: "▴"; }
/* 좁은 화면에서는 겹칠 자리가 없다. 펼쳐서 흐름에 맡기되, 자바스크립트가
   있으면(.gnb.js) 접어 두고 단추로 여닫는다 — 항목이 늘면서 다 펼치면
   메뉴가 화면을 덮는다. */
@media (max-width: 46rem) {
  .gnb { gap: .5rem; }
  .gnb .sub { position: static; display: block; border: 0; box-shadow: none;
              padding: 0 0 0 .6rem; min-width: 0; }
  .gnb .sub a { padding: .1rem 0; font-size: .85em; color: #555; }
  /* 접고 펴는 규칙과 단추 모양은 위에서 모든 폭에 걸었다. 여기서는 **JS 가
     없을 때만** 단추를 숨긴다 — 그때 하위 메뉴는 이미 펼쳐진 채라 단추가
     할 일이 없고, 눌러도 아무 일도 안 나는 단추가 서 있으면 고장으로 보인다. */
  .gnb:not(.js) .sub-toggle { display: none; }
}
h2 { margin-top: 2rem; }
.card { border: 1px solid #e5e5e5; border-radius: .4rem; padding: .9rem 1.1rem;
        margin: .6rem 0; }
.card h3 { margin: 0 0 .3rem; font-size: 1rem; }
.badge { font-size: .75rem; padding: .1rem .4rem; border: 1px solid #999;
         border-radius: .2rem; color: #555; }
.notice { background: #fffbe6; border: 1px solid #e6d68a; padding: .6rem .8rem;
          border-radius: .3rem; font-size: .9rem; margin: 1rem 0; }
/* 무엇이 걸렸는지 놓치면 "가입이 안 된다"가 된다. 안내와 다른 색을 준다. */
.notice.error { background: #fdeeee; border-color: #e0b4b4; }
.notice ul { margin: .4rem 0 0; padding-left: 1.2rem; }
ul.items { list-style: none; padding: 0; }
ul.items li { padding: .7rem 0; border-bottom: 1px solid #eee; }

/* 게시판 목록 모양 — 카드형·앨범형. 목록형은 위의 ul.items 그대로다.
   → boards/models.py 의 BoardLayout */
ul.cards li.card { border: 1px solid #e2e2e2; border-radius: .4rem;
                   padding: .9rem 1rem; margin-bottom: .7rem; }
.card-title { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 600; }
.card-excerpt { margin: 0 0 .4rem; color: #444; }

/* 표형 목록. 좁은 화면에서 표가 가로로 넘치므로 그 안에서만 스크롤한다 —
   본문 전체가 밀리면 읽는 자리가 흔들린다. */
.table-scroll { overflow-x: auto; }
table.board-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.board-table th, table.board-table td { padding: .55rem .5rem;
    border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
table.board-table thead th { border-bottom: 2px solid #ddd; color: #555;
    font-size: .85rem; font-weight: 600; white-space: nowrap; }
/* 좁은 칸은 폭을 고정하고, 제목이 남는 자리를 다 쓴다. */
table.board-table .num { width: 4rem; }
table.board-table .who { width: 8rem; }
table.board-table .when, table.board-table .count { width: 6rem; white-space: nowrap; }
table.board-table .count { text-align: right; }
table.board-table tr.pinned { background: #f8fafc; }
table.board-table a { text-decoration: none; }
table.board-table a:hover { text-decoration: underline; }

/* 게시판 링크 — 평소에는 본문 색 그대로·민무늬로 두고, 마우스를 얹었을 때만
   밑줄로 링크임을 표시한다. 파란 링크색을 쓰지 않는다 — 목록·본문 전체가
   파래지면 제목과 글이 광고처럼 보인다. 모든 게시판 모양(목록·카드·앨범·표)과
   글 본문에 함께 적용된다.

   **카드 제목도 같이 묶는다.** 위 선택자는 `ul.items`·`ul.cards` 를 잡는데,
   홈의 공고·소식 카드는 `ul.home-news > li > .news-title` 이고 프로그램 카드는
   `div.card > h3` 라 둘 다 여기에 걸리지 않아 혼자 파랬다 — 같은 공고가
   목록(`ul.items`, 지난 공고)에서는 검정, 홈 카드에서는 파랑이었으니 제목의
   무게 차이가 아니라 마크업 차이가 새어 나온 것이다. */
ul.items a, ul.cards a, .gallery a, .body a, .card h3 a, .news-title a {
  color: inherit; text-decoration: none;
}
ul.items a:hover, ul.cards a:hover, .gallery a:hover, .body a:hover,
.card h3 a:hover, .news-title a:hover {
  text-decoration: underline;
}
/* 글 상단의 게시판 이름(빵부스러기)과 흐린 안내 줄의 링크도 같은 규칙 —
   주변 글자 색을 따르고, 마우스를 얹었을 때만 밑줄. */
.muted a { color: inherit; text-decoration: none; }
.muted a:hover { text-decoration: underline; }

/* 이 기본값은 이제 **연구자 목록 전용**이다 — 게시판 앨범형은 아래
   `.gallery.board-gallery` 가 덮는다. 13rem/9rem 에서 1.5배 키웠다
   (2026-09-05). 폭과 높이를 함께 키운다: 높이만 키우면 `object-fit: cover`
   가 좌우를 더 잘라내 얼굴이 오히려 답답해진다. */
ul.gallery { display: grid; gap: 1rem;
             grid-template-columns: repeat(auto-fill, minmax(19.5rem, 1fr)); }
ul.gallery li.tile { border: 1px solid #e2e2e2; border-radius: .4rem;
                     padding: .6rem; overflow: hidden; }
.gallery a { text-decoration: none; color: inherit; display: block; }
/* 그림의 비율이 저마다 달라서 높이를 고정하고 잘라 낸다. 고정하지 않으면
   줄마다 높이가 달라져 격자가 어긋나 보인다. */
.gallery img { width: 100%; height: 13.5rem; object-fit: cover;
               border-radius: .25rem; display: block; }
.gallery .tile-empty { display: flex; align-items: center; justify-content: center;
                       height: 13.5rem; background: #f4f4f4; color: #bbb;
                       border-radius: .25rem; }
.gallery .tile-title { display: block; margin-top: .5rem; font-weight: 600; }

/* 게시판 앨범형만 그림을 두 배로 — 칸 26rem, 높이 18rem. 행사 사진·포스터·
   후기가 올라오는 곳인데 9rem 에서는 무엇을 찍은 것인지 알아볼 수 없었다.
   **칸 폭과 높이를 함께 키운다** — 높이만 키우면 `object-fit: cover` 가
   좌우를 더 잘라내서, 크게 만들었는데 보이는 범위는 오히려 좁아진다.
   75rem 본문에서 다섯 칸이 두세 칸이 된다.

   연구자 목록(scholars/_rows_gallery.html)은 그대로 9rem 이다. 같은
   `.gallery` 를 쓰지만 거기는 인물 사진을 훑는 목록이라 한 화면에 여러 명이
   보여야 한다 — 그래서 게시판 쪽에만 `.board-gallery` 를 달았다.
   → templates/boards/_rows_gallery.html

   `.tile-empty`(그림 없는 글의 자리)도 같이 키운다. 두지 않으면 그림 있는
   칸과 높이가 달라져 격자가 어긋난다. */
.gallery.board-gallery { grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); }
.gallery.board-gallery img { height: 18rem; }
.gallery.board-gallery .tile-empty { height: 18rem; }

.muted { color: #666; font-size: .85rem; }
.messages { list-style: none; padding: 0; margin: 1rem 0; }
.messages li { padding: .6rem .8rem; border-radius: .3rem; font-size: .9rem;
               background: #eef6ee; border: 1px solid #bcd7bc; }
.messages li.error { background: #fdeeee; border-color: #e0b4b4; }
form p { margin: .8rem 0; }
form label { display: block; font-size: .9rem; font-weight: 600; }
form input[type=text], form input[type=email], form input[type=password],
form textarea, form select { width: 100%; padding: .45rem; font: inherit;
  border: 1px solid #ccc; border-radius: .25rem; box-sizing: border-box; }
form .helptext { font-size: .8rem; color: #666; }
form ul.errorlist { color: #b00; font-size: .85rem; padding-left: 1.1rem; }
button, .btn { font: inherit; padding: .45rem .9rem; border-radius: .25rem;
               border: 1px solid #2563eb; background: #2563eb; color: #fff;
               cursor: pointer; text-decoration: none; display: inline-block; }
.btn.secondary { background: #fff; color: #2563eb; }
.btn.danger { background: #fff; color: #b00; border-color: #b00; }
nav .who { color: #666; }
/* 접속한 사람. 메뉴 이름보다 흐리게 두어 메뉴가 먼저 읽히게 한다. */
nav .who .whoami { color: #999; font-size: .85em; }
/* 운영진 전용 입구. 일반 메뉴와 다르게 보여야 공용 화면에서 헷갈리지 않는다. */
nav .admin-link { border: 1px solid #ccd; border-radius: 3px;
                  padding: .1rem .4rem; font-size: .85rem; }
/* 언어 전환 — 지구본 + 넘어갈 언어 이름. 누름단추이지만 메뉴 줄에 서므로
   테두리·바탕을 벗겨 옆의 메뉴 링크와 같은 무게로 둔다. 단추처럼 보이면
   메뉴 줄에서 저 혼자 튀어 시선이 먼저 거기로 간다. */
.lang-switch { display: inline-flex; gap: .5rem; margin: 0; }
.lang-switch button { display: inline-flex; align-items: center; gap: .3rem;
                      border: 0; background: none; padding: 0; cursor: pointer;
                      font: inherit; font-size: .9rem; color: #333; }
.lang-switch button:hover { text-decoration: underline; }
/* 지구본은 글자 높이에 맞춘다. 크면 아이콘이 언어 이름을 눌러 버린다. */
.lang-switch .icon { flex: none; width: 1.05rem; height: 1.05rem; color: #4b5563; }
.lang-switch .icon svg { width: 100%; height: 100%; display: block; }
/* 공개 화면에 얹히는 '수정'. 본문을 밀어내지 않게 제목 옆에 작게 둔다. */
.edit-link { font-size: .8rem; font-weight: normal; margin-left: .5rem;
             padding: .05rem .35rem; border: 1px solid #ccd; border-radius: 3px;
             white-space: nowrap; }
/* 아이디·이름·이메일. 이름표와 값을 두 칸으로 세운다. */
.who-am-i { display: grid; grid-template-columns: max-content 1fr;
            gap: .3rem 1rem; margin: 0 0 1.2rem; }
.who-am-i dt { color: #666; font-size: .9rem; }
.who-am-i dd { margin: 0; }
/* 로그인 화면의 "또는" 구분선. 비밀번호와 KOBRA 계정 두 경로가 나란히 있다는
   것을 눈으로 알 수 있게 한다. */
.or { display: flex; align-items: center; gap: .8rem; color: #888;
      font-size: .85rem; margin: 1.2rem 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid #e5e5e5; }
/* 홈 상단 대표 구역. 이미지 배너가 아니라 문구와 링크로 만든다 — 현행
   사이트에 쓸 만한 배너 이미지가 없고, 글자를 이미지로 넣으면 번역도
   스크린리더도 막힌다(SYS-10). */
.hero { background: #f7f9fc; border: 1px solid #e3e9f2; border-radius: .5rem;
        padding: 1.6rem 1.4rem; margin: 1.2rem 0 2rem; }
.hero img { display: block; height: 3.4rem; width: auto; margin-bottom: .9rem; }
.hero h2 { margin: 0 0 .5rem; font-size: 1.45rem; line-height: 1.35; }
.hero p { margin: 0 0 1rem; color: #384252; }
.hero .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
/* 협력기관 로고 격자. 로고는 크기·비율이 제각각이라 칸을 고정하고 그 안에
   맞춘다(contain). 늘리면 기관 로고가 왜곡되는데, 그건 실례가 된다. */
.logos { display: grid; gap: .8rem; padding: 0; list-style: none;
         grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.logos li { border: 1px solid #eee; border-radius: .3rem; padding: .7rem;
            display: flex; flex-direction: column; align-items: center;
            gap: .5rem; text-align: center; }
.logos img { width: 100%; height: 3.2rem; object-fit: contain; }
.logos .name { font-size: .82rem; color: #444; }
/* 숫자 하나가 주인공인 줄. 근거 설명이 그 숫자에 붙어 다녀야 하므로
   한 덩어리로 묶는다. */
.metric { background: #f7f9fc; border: 1px solid #e3e9f2; border-radius: .35rem;
          padding: .6rem .8rem; margin: .8rem 0; }
.metric strong { font-size: 1.05rem; margin-right: .5rem; }

/* 옆단이 붙는 화면은 한 겹 더 넓다. → templates/scholars/detail.html */
body.wide { max-width: 86rem; }

/* 본문 + 옆단. 옆단을 오른쪽에 붙인다. */
.with-aside { --sidebar-width: 16.5rem; position: relative;
              display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
              gap: 2rem; align-items: start; }
.with-aside-main { min-width: 0; }
.side { min-width: 0; overflow-wrap: anywhere;
        border-left: 1px solid #eee; padding-left: 1.2rem; font-size: .9rem; }
.sidebar-resizer { position: absolute; top: 0; bottom: 0;
                   right: calc(var(--sidebar-width) + 1rem - 8px); width: 16px;
                   cursor: col-resize; touch-action: none; border-radius: 4px; }
.sidebar-resizer::after { content: ""; position: absolute; top: 0; bottom: 0;
                          left: 7px; width: 2px; background: #e5e7eb; }
.sidebar-resizer:hover::after, .sidebar-resizer:focus-visible::after,
.with-aside.is-resizing .sidebar-resizer::after { background: #2563eb; }
.sidebar-resizer:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.with-aside.is-resizing { user-select: none; cursor: col-resize; }
.side h3 { margin-top: 0; font-size: .95rem; }
.side-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.side-list li { padding: .5rem 0; border-bottom: 1px solid #f2f2f2; }
.side-list a { display: block; }
.side-list .muted { display: block; font-size: .8rem; line-height: 1.4; }
/* 좁은 화면에서는 나란히 둘 자리가 없다. 아래로 내리고 선을 위로 옮긴다. */
@media (max-width: 52rem) {
  .sidebar-resizer { display: none; }
  .with-aside { grid-template-columns: 1fr; gap: 1rem; }
  .side { border-left: 0; border-top: 1px solid #eee;
          padding-left: 0; padding-top: 1rem; }
}

/* 연구자 사진과 요약. 사진 비율이 제각각이라 정사각으로 잘라 낸다 —
   세로로 긴 사진 하나가 목록 전체의 줄 높이를 밀어 버린다. */
.scholar-head { display: flex; gap: 1rem; align-items: flex-start; margin: 1rem 0; }
.scholar-head .portrait { width: 8rem; height: 8rem; object-fit: cover;
                          border-radius: .4rem; flex: none; }
.summary { margin: 0; color: #333; }
.scholar-card { display: flex; gap: .9rem; align-items: flex-start; }
.scholar-card-text { min-width: 0; }

/* 목록의 얼굴. **이름 왼쪽에 선다.**
 *
 * 사진이 없는 사람이 대부분이라(58명 중 전원) 자리를 비워 두면 줄이
 * 들쭉날쭉해져 이름이 눈에 따라오지 않는다. 그렇다고 아무 얼굴 사진을
 * 쓰면 그 사람의 모습으로 오해되므로, 윤곽만 그린 회색 그림으로 대신한다.
 * → templates/scholars/_avatar.html */
.scholar-face { flex: none; display: block; text-decoration: none; }
/* 3.6rem → 5.4rem, 아래 목록형·표형·앨범형도 함께 1.5배(2026-09-05). 얼굴이
   작아 누구인지 알아볼 수 없다는 의견이 있었다 — 연구자를 고르는 목록에서
   얼굴은 장식이 아니라 단서다. 비율은 모양별로 그대로 두었다: 표형이 가장
   작고 앨범형이 가장 크다는 관계는 각 주석의 이유가 그대로 살아 있다. */
.avatar { display: block; width: 5.4rem; height: 5.4rem; border-radius: 50%;
          object-fit: cover; background: #e5e7eb; }
.avatar-blank { display: flex; align-items: flex-end; justify-content: center;
                overflow: hidden; }
.avatar-blank svg { width: 100%; height: 100%; fill: #9aa3af; }

/* 목록형은 한 줄이 낮아야 하므로 얼굴도 작다. */
.scholar-row { display: flex; gap: .7rem; align-items: flex-start; }
.scholar-row .avatar { width: 3.6rem; height: 3.6rem; }
.scholar-rows li { margin-bottom: .5rem; }

/* 표형의 이름 칸. 얼굴은 **여기서 가장 작다** — 한 줄에 다섯 칸이 나란히
   서므로 얼굴이 줄 높이를 밀면 옆 칸의 글이 위아래로 벌어져 표가 훑어지지
   않는다. 이름과 가운데를 맞춰 두 칸으로 읽히지 않게 한다.
   → templates/scholars/_rows_table.html */
.scholar-cell { display: flex; gap: .5rem; align-items: center; }
.scholar-cell .avatar { width: 3rem; height: 3rem; }

/* 프로필 화면의 제목 줄. 목록과 같은 배치 — 사진 왼쪽, 소속 아래.
 *
 * **얼굴을 9rem 으로 키웠다.** 5.5rem 은 목록의 얼굴(3.6rem)과 크기가 비슷해,
 * 한 사람만 나오는 화면에 왔다는 느낌이 없었다. 이 화면의 주인공은 사람이다.
 * 크기와 배치는 joonanlab.github.io 의 연구자 소개 화면을 참조했다(144px 원형).
 *
 * 좁은 화면에서는 세로로 쌓고 가운데로 모은다 — 옆으로 둘 자리가 없을 때
 * 이름이 얼굴 옆에서 두세 글자씩 꺾여 내려가는 것보다 낫다. */
.scholar-title { display: flex; gap: 1.3rem; align-items: center; margin: 1rem 0 .3rem; }
.scholar-title h2 { margin: 0; font-size: 1.8rem; line-height: 1.25; }
.scholar-title .avatar { width: 9rem; height: 9rem; }
.scholar-title .beside { margin: .35rem 0 0; }
@media (max-width: 34rem) {
  .scholar-title { flex-direction: column; align-items: center; text-align: center; }
}

/* 프로필 화면의 절 제목. **절과 절 사이를 눈에 보이게 가른다.**
 *
 * 연락처·논문·공동연구가 같은 굵기의 h3 로 이어져 있어서, 긴 소개 글을 지나
 * 내려오면 어디서 절이 바뀌었는지 알기 어려웠다. 위쪽에 가는 줄을 하나 긋고
 * 여백을 벌린다 — 참조한 화면(joonanlab)이 절 제목에 색을 주어 가른 것과
 * 같은 뜻이고, 우리는 이미 파랑을 링크에 쓰고 있어 줄로 대신한다.
 *
 * 옆단의 제목은 해당하지 않는다. 거기는 좁은 상자라 줄이 답답하다. */
.with-aside-main > h3 { margin: 2.2rem 0 .6rem; padding-top: 1.1rem;
                        border-top: 1px solid #ececec; font-size: 1.15rem; }
.scholar-card .summary { font-size: .9rem; margin-top: .3rem; }
/* 이관된 본문.
 *
 * **줄 길이를 여기서 잡는다.** 화면 폭을 kobra.kr 에 맞춰 1200px 로 넓혔는데,
 * 그 폭으로 문단을 흘리면 한 줄이 너무 길어 눈이 다음 줄 첫머리를 놓친다.
 * 글자는 좁게, 그림과 표는 넓게 — 그림은 원래 폭이 필요하다.
 *
 * 원본 이미지가 1000px 을 넘는 것이 많아 그대로 두면 화면을 넘어간다.
 * 표도 좁은 화면에서 가로로 삐져나가므로 그 안에서만 스크롤한다. */
.body > p, .body > ul, .body > ol, .body > blockquote { max-width: 60rem; }
.body table { max-width: 100%; display: block; overflow-x: auto; }

/* 본문 그림은 **줄을 따로 잡고 가운데 선다.**
 *
 * 이관해 온 글에는 Froala 편집기가 붙인 표시가 남아 있다 — 한 줄을 차지하는
 * 그림(fr-dib) 179장, 글 안에 끼워 넣은 그림(fr-dii fr-fir) 55장, 표시가
 * 없는 그림 29장. **그런데 그 뜻을 알려 줄 Froala 스타일시트는 우리가 싣지
 * 않는다.** 그래서 234장이 전부 그냥 인라인 그림으로 떨어져, 앞 글자의
 * 글줄 끝에 매달리거나 문단 사이를 파고들었다. 무엇을 뜻하던 표시인지와
 * 상관없이 화면에서는 한 가지로 어긋나 있었다.
 *
 * 그 표시를 되살리는 대신 **세 갈래를 한 모양으로 모은다.** 220px 짜리
 * 그림이 문단 한가운데 인라인으로 끼면 그 줄만 키가 커져 위아래 줄 사이가
 * 벌어지고, 눈이 다음 줄 첫머리를 놓친다. 줄을 따로 잡아 가운데로 내리면
 * 글은 온전한 폭을 되찾고 그림은 제 크기로 보인다.
 *
 * 폭은 여전히 막지 않는다 — 글자는 좁게, 그림은 넓게. 위아래 여백은 그림이
 * 앞뒤 문단과 붙어 어느 쪽에 딸린 것인지 헷갈리지 않을 만큼만 둔다. */
.body img { display: block; float: none; max-width: 100%; height: auto;
            margin: 1.4rem auto; }

/* 게시글의 작은 그림은 옆으로 글을 흘린다. 실제 크기와 본문 폭은
 * post-image-wrap.js에서 판정한다. float가 첨부·댓글까지 내려가지 않게 한다. */
.post-body { display: flow-root; overflow-wrap: anywhere; }
.post-body .post-image-wrap {
  float: left; clear: left; max-width: 40%; margin: .3rem 1.5rem 1rem 0;
}
.post-body .post-image-wrap img { margin: 0; }
/* 같은 문단은 그림 옆에서 시작한 폭을 끝까지 유지한다. */
.post-body .post-wrap-text { display: flow-root; }
.post-body img:not(.post-image-wrap),
.post-body table, .post-body figure,
.post-body h1, .post-body h2, .post-body h3,
.post-body h4, .post-body h5, .post-body h6, .post-body hr { clear: both; }

/* 게시글 첨부. 본문과 댓글 사이에서 눈에 띄되 본문을 밀어내지 않게. */
.attachments { border: 1px solid #e5e5e5; border-radius: .4rem;
               padding: .3rem 1rem 0.8rem; margin: 1.5rem 0; background: #fafbfc; }
.attachments h3 { margin: .7rem 0 .2rem; font-size: .95rem; }
.attachments ul.items li { padding: .4rem 0; border-bottom: 0; }

/* 이름 옆에 괄호로 병기하는 소속.
 *
 * h2/h3 안에 들어가므로 굵기와 크기를 되돌린다 — 그대로 두면 소속이 이름만큼
 * 커지고 굵어져서, 둘 중 무엇이 이름인지 한눈에 갈리지 않는다.
 *
 * 크기는 이름보다 **10% 만** 작게 둔다(0.9em). 더 줄이면 소속이 곁다리처럼
 * 보이는데, 목록에서 사람을 고를 때 소속은 이름만큼 자주 보는 값이다. */
/* 이름 **아래** 줄로 내려왔다. 옆에 괄호로 붙여 두었더니 긴 기관명이
 * ("Rutgers New Jersey Medical School-Center for Emerging Pathogens")
 * 이름을 밀어내, 정작 이름이 잘려 보였다. 크기와 색은 그대로 둔다 —
 * 이름보다 10% 작고 회색이라 훑을 때 이름이 먼저 잡힌다. */
.beside { display: block; font-size: .9em; font-weight: 400; color: #6b7280;
          margin: .1rem 0 0; white-space: normal; }

/* 보기 전환. 분야 거르개 바로 아래에 같은 모양으로 둔다 — 둘 다 목록을
   좁히거나 바꾸는 것이라 나란히 있는 편이 알아보기 쉽다. */
.views a.on { font-weight: 700; color: #1d4ed8; }

/* 화면 위쪽 배너. 원본이 가로로 매우 긴 그림이라 높이를 정하고 잘라 낸다 —
   그대로 두면 배너 하나가 첫 화면을 다 차지해 제목이 밀려난다. */
.page-banner { position: relative; margin: 0 0 1.4rem; border-radius: .4rem;
               overflow: hidden; }

/* 그림 위에 얹는 글.
 *
 * **어두운 겹을 깐다.** 배너 사진은 밝은 곳과 어두운 곳이 섞여 있어서, 흰
 * 글자를 그냥 얹으면 사진에 따라 읽히기도 하고 안 읽히기도 한다. 어느 사진이
 * 올라올지 모르는 채로 두면 언젠가 안 보이는 화면이 나온다.
 *
 * 아래로 갈수록 짙어지는 겹을 쓴다 — 글이 아래에 있어서 그쪽만 눌러 주면
 * 그림은 위쪽이 살아 있다. */
.page-banner.has-text::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.62) 100%);
}
.banner-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
               padding: 1rem 1.2rem; color: #fff; }
.banner-title { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.25;
                /* 겹만으로 부족한 밝은 사진을 위해 한 겹 더. */
                text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.banner-subtitle { margin: .3rem 0 0; font-size: .92rem; line-height: 1.5;
                   color: #eef1f5; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.page-banner.tall .banner-title { font-size: 1.9rem; }
.page-banner.tall .banner-text { padding: 1.4rem 1.6rem; }
@media (max-width: 46rem) {
  .banner-title { font-size: 1.05rem; }
  .page-banner.tall .banner-title { font-size: 1.3rem; }
  /* 좁은 화면에서는 설명까지 넣으면 그림이 글로 덮인다. */
  .banner-subtitle { display: none; }
}
.page-banner img { display: block; width: 100%; height: 11rem; object-fit: cover;
                   /* 확대된 채 시작해 제자리로 물러나며 멈춘다. 처음에는
                      현행 kobra.kr 대문처럼 다가가는 쪽(1→1.5)이었으나
                      물러나는 쪽으로 뒤집었다(2026-08-31). 속도·배율은
                      그대로 3초·1.5배 — 15초·1.1배는 느리고 밋밋하다는
                      의견이 있었다(2026-08-28). 시작 배율에서 넘치는 부분은
                      .page-banner 의 overflow: hidden 이 잘라 낸다. */
                   animation: banner-zoom 3s ease-out forwards; }
@keyframes banner-zoom { from { transform: scale(1.5); } to { transform: scale(1); } }
/* 움직임을 줄여 달라고 설정한 사람에게는 멈춘 그림을 보인다(SYS-10). */
@media (prefers-reduced-motion: reduce) {
  .page-banner img { animation: none; }
}
/* 대문은 두 배로. 첫 화면은 "여기가 어디인가" 를 한눈에 알리는 자리라
   그림이 클수록 낫다. 안쪽 화면은 반대다 — 거기서는 배너가 커질수록 찾아온
   목록이 아래로 밀린다. */
.page-banner.tall img { height: 22rem; }
/* 좁은 화면에서는 더 낮춘다. 세로 공간이 귀하다. */
@media (max-width: 46rem) {
  .page-banner img { height: 7rem; }
  .page-banner.tall img { height: 14rem; }
}

/* 기관별 보기. 기관마다 한 덩어리로 묶어 어디에 사람이 모여 있는지 보이게. */
.org-group { margin: 0 0 1.4rem; }
.org-group h3 { margin: 0 0 .2rem; font-size: 1rem; }
.org-group ul.items li { padding: .35rem 0; border-bottom: 0; }

/* 지도. 높이를 정하지 않으면 Leaflet 이 0px 로 그려서 화면이 비어 보인다. */
.scholar-map { height: 26rem; border: 1px solid #ddd; border-radius: .4rem;
               margin-bottom: .5rem; }
@media (max-width: 46rem) { .scholar-map { height: 18rem; } }
.map-credit { margin: 0 0 1.4rem; }
.map-people { list-style: none; padding: 0; margin: .3rem 0 0; }
.map-people li { padding: .1rem 0; }

/* 대문의 바로 가기. 패널 없이 링크만 한 줄로 둔다 — 배너가 제목과 설명을
   이미 얹고 있어서, 그 아래에 상자를 하나 더 두면 같은 말이 두 번 나온다. */
.quick-links { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 2rem; }

/* 지도 위의 기관 이름표. 늘 떠 있으므로 배경을 눌러 두지 않으면 지도 글씨와
   섞여 둘 다 읽히지 않는다. 글씨는 작게, 배경은 살짝 비치게 — 이름표
   마흔아홉 개가 늘 떠 있는 화면이라, 크면 점과 이웃 점까지 덮는다. */
.leaflet-tooltip.map-place-label {
  background: rgba(255, 255, 255, .85); border: 1px solid #c7ced8;
  border-radius: .25rem; padding: .05rem .3rem; font-size: .66rem;
  font-weight: 600; color: #1f2937; box-shadow: none; white-space: nowrap;
}
.leaflet-tooltip.map-place-label::before { display: none; }  /* 꼬리 없이 */

/* 가까이서 보이는 사람 표식. 얼굴은 원형, 이름은 그 아래. */
.map-face { display: block; width: 44px; text-align: center; cursor: pointer; }
.map-face img, .map-face .initial {
  display: block; width: 40px; height: 40px; margin: 0 auto;
  border-radius: 50%; border: 2px solid #fff; object-fit: cover;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35); background: #3b82f6;
}
/* 사진이 없는 사람. **기본 얼굴 그림을 쓰지 않는다** — 그 사람의 모습으로
   오해된다. 이름 첫 글자면 누구 자리인지는 알면서 얼굴을 지어내지 않는다. */
.map-face .initial { color: #fff; font-weight: 700; line-height: 36px; font-size: 1.05rem; }
.map-face-name {
  display: block; margin-top: .15rem; font-size: .7rem; font-weight: 600;
  color: #111827; white-space: nowrap;
  /* 지도 위라 뒤가 무슨 색일지 모른다. 흰 테두리로 글자를 띄운다. */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

/* 연구자 찾기의 조건 칸. */
.scholar-search { margin: 0 0 1rem; padding: .8rem 1rem; background: #f6f8fa;
                  border: 1px solid #e1e6ec; border-radius: .4rem; }
.scholar-search .row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end;
                       margin: 0 0 .6rem; }
.scholar-search .row:last-child { margin-bottom: 0; }
.scholar-search label { display: flex; flex-direction: column; gap: .15rem; }
/* 검색 칸. 남는 자리를 다 먹지 않게 폭을 막는다 — 한 줄을 통째로 차지하면
   검색창이라기보다 빈 띠로 보인다. */
.scholar-search label.grow { flex: 1 1 16rem; max-width: 24rem; }
.scholar-search .label { font-size: .78rem; color: #5b6572; }
.scholar-search input[type="search"], .scholar-search select { padding: .3rem .4rem; }
/* 순차로 좁아지는 칸들과, 그 아래 보기 순서·인원수.
 *
 * **같은 격자에 올린다.** 폭을 내용에 맡겼더니 칸마다 너비가 달라 두 줄이
 * 어긋나 보였다 — "보기 순서" 가 "국내·국외" 아래가 아니라 그 사이에 걸쳐
 * 섰다. 칸 수를 고정하면 라벨과 상자가 세로로 맞아떨어진다.
 *
 * `minmax(0, 1fr)` 의 0 이 중요하다. 기관 이름이 길어서, 이것이 없으면
 * 그 칸이 제 내용만큼 벌어져 격자가 다시 어긋난다. */
.narrow-down { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
               gap: .5rem .6rem; align-items: end; }
.narrow-down label { flex: none; min-width: 0; }
.narrow-down select, .narrow-down input { width: 100%; }

@media (max-width: 60rem) {
  .narrow-down { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 38rem) {
  .narrow-down { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 보기 형태 단추. 고른 것이 눌린 상태로 보여야 한다. */
.views { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.view-btn { padding: .25rem .6rem; font-size: .82rem; }
.view-btn.on { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.count { margin: 0; }

/* 목록 바로 위 줄. 왼쪽에 몇 명·몇 쪽, 오른쪽에 한 쪽 인원수.
   양끝으로 벌려 두면 인원수 칸이 목록 오른쪽 위에 서서, 목록을 보는
   방식을 고르는 자리라는 것이 눈에 들어온다. */
.count-row { display: flex; align-items: baseline; justify-content: space-between;
             flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 .8rem; }
/* "명" 은 입력칸 옆에 붙는 꼬리다. 칸을 따로 차지하지 않는다. */
.per-page-cell { display: flex; align-items: baseline; gap: .3rem; }
.per-page-cell .label { flex: none; font-size: .8rem; color: #5b6572; }
.per-page-cell .per-page { width: 4.5rem; padding: .2rem .35rem; }
.pager { display: flex; gap: .6rem; align-items: center; margin: 1.2rem 0; }

/* 게시판 목록의 썸네일. 그림이 있는 줄에만 붙는다 — 없는 줄에 빈 네모를
   두면 "그림이 안 나온다" 로 보인다. */
/* 썸네일 칸. 처음에는 4.5rem 이었는데 그림이 무엇인지 알아볼 수 없었다 —
   행사 사진인지 표인지 구분이 안 되면 붙여 둔 뜻이 없다. 두 배로 키운다. */
.items li.has-thumb { display: grid; grid-template-columns: 9rem 1fr;
                      gap: .9rem; align-items: start; }
.items li.has-thumb .thumb { grid-row: span 3; display: block; }
.items li.has-thumb .thumb img {
  width: 9rem; height: 6.8rem; object-fit: cover;
  border: 1px solid #dde3ea; border-radius: .25rem; background: #f2f4f7;
}
/* 그림이 없는 글의 자리. **비워 두지 않는다** — 비우면 제목이 줄마다 다른
   자리에서 시작해 눈이 세로로 따라가지 못한다. 회색 빈칸이 "이 글에는 그림이
   없다" 를 말한다. */
.thumb-blank { display: block; width: 9rem; height: 6.8rem;
               border: 1px solid #dde3ea; border-radius: .25rem; background: #eef1f4; }

@media (max-width: 30rem) {
  /* 좁은 화면에서는 제목이 두 글자씩 접힌다. 그림을 뺀다. */
  .items li.has-thumb { display: block; }
  .items li.has-thumb .thumb { display: none; }
}

/* 국문 이름 옆의 영문 병기. 이름 글자의 절반 크기로 — 다만 목록의 작은
   글씨에서는 절반이 읽을 수 없는 크기가 되므로 바닥을 둔다.
   → scholars/models.py 의 secondary_name */
.name-sub { font-size: max(.5em, .72rem); font-weight: 400; color: #6b7280;
            margin-left: .3em; white-space: nowrap; }

/* 연구자 ID 상자와 논문 항목 — 배치는 BRIC 한빛사 연구자 화면 참조 */
.id-links { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.id-links li { padding: .3rem 0; }
.id-links a { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.id-links a:hover { text-decoration: underline; }
.id-links .icon { flex: none; width: 1.1rem; height: 1.1rem; color: #4b5563; }
.id-links .icon svg { width: 100%; height: 100%; display: block; }

.pubs .pub-title { margin: 0; font-weight: 600; }
.pubs .pub-meta { margin: .15rem 0 0; font-size: .88rem; }
.pubs .pub-meta em { color: #1d4ed8; font-style: italic; }
.pubs .pub-authors { margin: .15rem 0 0; }

.side-person { display: flex; gap: .6rem; align-items: flex-start; }
.side-person .scholar-face .avatar { width: 2.64rem; height: 2.64rem; border-radius: 50%;
                                     object-fit: cover; display: block; }
.side-person .avatar-blank svg { width: 100%; height: 100%; fill: #d1d5db; }

/* ── 로그인 화면 — contextbio.ai 로그인과 같은 모양 ─────────────────────
   짙은 남색 그라데이션 띠 + 그 위로 34px 올라앉는 흰 카드, 세로선으로 가른
   2단(왼쪽 아이디·비밀번호, 오른쪽 간편 로그인), 그라데이션 주 버튼.
   값은 contextbio 의 styles.css 에서 그대로 가져왔다. */
.auth-panel { max-width: 900px; margin: 1.5rem auto 0; }
.auth-head {
  text-align: center; color: #fff;
  background: linear-gradient(rgba(11, 26, 58, .72), rgba(11, 26, 58, .55)),
              linear-gradient(135deg, #092cc8, #0e2a6e);
  border-radius: 16px 16px 0 0;
  margin: 0; padding: 54px 20px 66px;
  border-bottom: 0; display: block;
}
.auth-head .eyebrow {
  display: block; color: #bfe0ff; font-size: .78rem; font-weight: 400;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 10px;
}
.auth-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff; margin: 0 0 .3em; }
.auth-head p { color: rgba(255, 255, 255, .82); margin: 0; }

/* 패널이 띠 위로 올라앉는다 — 카드를 띠보다 좁게 두어야 걸친 모양이 보인다 */
.auth-panel > div:not(.auth-head) { margin-top: -34px; }
.auth-panel .auth-card { max-width: 840px; }
.auth-card {
  background: #fff; border: 1px solid #e5eaef; border-radius: 16px;
  padding: 34px; margin: 0 auto;
  box-shadow: 0 14px 40px rgba(11, 26, 58, .14);
}
.auth-card h2 { font-size: 1.25rem; margin: 0 0 20px; }

/* 세로선으로 가른 2단. 오른쪽이 간편 로그인 칸이다 — 폼이 먼저 읽히도록. */
.auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.auth-col-side {
  padding-left: 28px; border-left: 1px solid #e5eaef;
  display: flex; flex-direction: column; gap: 14px; align-items: stretch;
}
.auth-side-title { font-size: 1.05rem; margin: 0; color: #0e2a6e; }
.auth-side-note { color: #62738a; font-size: .86rem; line-height: 1.7; margin: 0; }
@media (max-width: 46rem) {
  .auth-split { grid-template-columns: 1fr; gap: 24px; }
  .auth-col-side { padding-left: 0; border-left: 0;
                   padding-top: 24px; border-top: 1px solid #e5eaef; }
}

/* 폼 — 라벨은 흐리게 작게, 입력칸은 옅은 채움 + 얇은 테두리 */
.auth-card form p { margin: 0 0 10px; }
.auth-card form label { color: #62738a; font-size: .84rem; font-weight: 600;
                        margin-bottom: 4px; }
.auth-card form input[type=text], .auth-card form input[type=email],
.auth-card form input[type=password] {
  background: rgba(16, 24, 40, .03); border: 1px solid #e2e5ea; border-radius: 4px;
  padding: 11px 14px; font-size: .95rem;
}
.auth-card form input:focus { outline: none; border-color: #092cc8; }
.auth-card .auth-submit {
  width: 100%; margin-top: 14px; padding: 12px 16px;
  background: linear-gradient(135deg, #092cc8, #0e2a6e); border-color: transparent;
  border-radius: 10px; font-weight: 600; font-size: .95rem;
  box-shadow: 0 6px 18px rgba(9, 44, 200, .25); transition: .18s ease;
}
.auth-card .auth-submit:hover {
  background: linear-gradient(135deg, #1a3fd6, #123285);
  box-shadow: 0 10px 26px rgba(9, 44, 200, .35);
}

.auth-reset { margin: 16px 0 0; }
.auth-link { color: #62738a; font-size: .86rem; font-weight: 600; text-decoration: none; }
.auth-link:hover { color: #092cc8; }
.auth-alt { margin: 16px 0 0; font-size: .86rem; color: #62738a; }
.auth-alt a { color: #092cc8; font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

/* 간편 로그인 버튼 — 파란 채움이 아니라 흰 바탕 + 얇은 테두리 */
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; box-sizing: border-box;
  background: #fff; border: 1px solid #e5eaef; border-radius: 10px;
  font: inherit; font-size: .95rem; font-weight: 600; color: #0f1a2e;
  cursor: pointer; text-decoration: none; transition: .18s ease;
}
.btn-google:hover { border-color: #092cc8; box-shadow: 0 6px 18px rgba(11, 26, 58, .1); }
.btn-google .g-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; color: #fff;
  font-size: 11px; font-weight: 700;
  background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
}

/* 목록에서 제목 옆에 붙는 날짜. 소식은 "무엇을" 만큼이나 "언제" 로 고르는
   목록이라 제목과 같은 줄에 있어야 눈이 한 번에 읽는다.

   제목보다 작고 회색이다 — 같은 크기로 두면 어느 쪽이 제목인지 흐려진다.
   `white-space: nowrap` 은 날짜가 "2026-08-" / "22" 로 갈라지지 않게 한다. */
.when { margin-left: .5rem; font-size: .85em; color: #6b7280; white-space: nowrap; }

/* 검색창 아래에서 제자리로 펼쳐지는 지도. */
.map-panel { margin: 0 0 1rem; border: 1px solid #e1e6ec; border-radius: .4rem;
             background: #f6f8fa; }
.map-panel > summary {
  cursor: pointer; padding: .55rem 1rem; font-weight: 600; font-size: .92rem;
  /* 기본 삼각형을 살려 둔다 — 접힌 상태인지 펼친 상태인지 알리는 유일한
     표시다. 직접 그린 화살표는 브라우저마다 자리가 어긋난다. */
  list-style-position: inside;
}
.map-panel > summary:hover { color: #1d4ed8; }
.map-panel[open] > summary { border-bottom: 1px solid #e1e6ec; }
/* 펼친 내용은 상자 안쪽 여백을 갖는다. summary 는 위 규칙이 따로 잡는다. */
.map-panel > *:not(summary) { margin-left: 1rem; margin-right: 1rem; }
.map-panel > .scholar-map { margin-top: 1rem; }
.map-panel > .map-credit { padding-bottom: .6rem; }

/* 홈 최근 소식 — 2열×3행 카드 격자. 좁은 화면에서는 1열로 내려간다. */
.home-news { list-style: none; padding: 0; margin: 0 0 1rem;
             display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 46rem) { .home-news { grid-template-columns: 1fr; } }
.news-card { display: flex; gap: .8rem; align-items: flex-start;
             border: 1px solid #e5e5e5; border-radius: .4rem; padding: .8rem .9rem; }
.news-thumb { flex: none; }
/* 그림 비율이 제각각이라 칸을 고정하고 잘라 낸다 — 줄이 어긋나지 않게. */
.news-thumb img { width: 5.2rem; height: 5.2rem; object-fit: cover;
                  border-radius: .3rem; display: block; }
.news-body { min-width: 0; }
.news-title { margin: 0; font-weight: 600; line-height: 1.4; }
.news-summary { margin: .25rem 0 .2rem; font-size: .88rem; color: #444;
                overflow: hidden; display: -webkit-box;
                -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-card .muted { margin: 0; font-size: .82rem; }

/* 푸터 — 색·배열은 현행 kobra.kr 계산 스타일에서 그대로 옮겼다
   (배경 #343434, 글자 #efefef 12px, 자간 .65px). 본문은 가운데 폭에 맞추되
   바탕은 화면 끝까지 칠한다 — body 의 max-width 안에 있으므로 음수 여백으로
   빠져나온다. */
.site-footer { position: relative; left: 50%; margin: 3rem 0 0 -50vw;
               width: 100vw; background: #343434;
               color: #efefef; font-size: 12px; letter-spacing: .65px;
               line-height: 1.9; }
.footer-inner { max-width: 52rem; margin: 0 auto; padding: 2rem 1.5rem 2.4rem; }
.footer-top { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap;
              margin-bottom: 1.8rem; }
.footer-logo { height: 3.4rem; width: auto; display: block; }
.footer-links { display: flex; gap: 2.5rem; }
.footer-links a { color: #efefef; text-decoration: none; font-size: 13px;
                  letter-spacing: .1em; }
.footer-links a:hover { text-decoration: underline; }
.footer-sns { margin-left: auto; display: flex; gap: .55rem; align-items: center; }
.footer-sns img { width: 1.7rem; height: 1.7rem; display: block; }
.footer-inner p { margin: 0; }
.footer-org { text-transform: uppercase; }
.footer-tel .gap { margin-left: 2.5rem; }
.footer-inner a { color: #efefef; }
@media (max-width: 46rem) {
  .footer-top { gap: 1rem; }
  .footer-sns { margin-left: 0; }
}

/* KOBRA HUB — 거점 리더 사진. 현행 사이트 원본(정사각)을 원형으로. */
.hub-leader { display: flex; gap: .8rem; align-items: center; margin-top: .4rem; }
.hub-leader .leader-photo { width: 3.6rem; height: 3.6rem; border-radius: 50%;
                            object-fit: cover; flex: none; }
.hub-leader p { margin: 0; }

/* 목록 줄에 딸리는 잔글. 행사 날짜와 게시일이 한 줄에 섞이면 어느 것이
   행사 날인지 읽히지 않아 줄을 나누고, 나눈 쪽을 한 단계 작게 둔다. */
.muted.small { font-size: .85em; margin-top: .1rem; }

/* 행사 하위 페이지 차림표 — 원 conference.kobra.kr 의 상단 탭 자리. */
.event-pages ul { list-style: none; padding: 0; margin: 1rem 0;
                  display: flex; flex-wrap: wrap; gap: .4rem; }
.event-pages li a { display: block; padding: .3rem .7rem; border: 1px solid #d6d6d6;
                    border-radius: 999px; font-size: .88em; text-decoration: none; }
.event-pages li.on a { background: #343434; border-color: #343434; color: #fff; }
/* 공지 목록에 섞인 공고. 마감이 걸린 글이라 그냥 알리는 글과 무게가 다르다. */
.badge.call { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }

/* 표의 열 제목으로 차례 바꾸기. 지금 걸린 열은 진하게 — 표시가 없으면
   무엇으로 세워져 있는지 알 수 없다. */
.scholar-table th a.sort { color: inherit; text-decoration: none; white-space: nowrap; }
.scholar-table th a.sort:hover { text-decoration: underline; }
.scholar-table th a.sort.on { color: #1d4ed8; font-weight: 700; }

/* 스크린리더에만 읽히는 글. 화살표(▲▼)는 그림이라 소리로 읽히지 않으므로
   같은 뜻을 글로 함께 둔다(SYS-10). 화면에서는 자리를 차지하지 않아야
   하는데, `display: none` 은 스크린리더에서도 사라진다. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 세로로 긴 그림(표지 등). 본문 폭으로 늘리면 화면 하나를 다 차지해서
   가로 400px 로 줄이고 가운데 둔다. 캡션도 그림 폭을 따라간다. */
figure.narrow { max-width: 400px; margin-left: auto; margin-right: auto; }
figure.narrow figcaption { text-align: center; }

/* 연구자 본인이 쓰는 프로필 폼. **묶음마다 상자로 가른다.**
 *
 * 칸이 스물다섯 개라 한 줄로 이어 놓으면 어디까지 채워야 하는지 가늠이 안
 * 되어 위쪽 몇 칸만 채우고 떠난다. 상자로 나누면 남은 묶음이 눈에 보인다.
 * → templates/scholars/edit.html */
.profile-form fieldset { border: 1px solid #e5e5e5; border-radius: .4rem;
                         padding: .4rem 1.2rem 1rem; margin: 1.4rem 0; }
.profile-form legend { padding: 0 .4rem; font-weight: 700; color: #1f2937; }

/* 칸 하나. 라벨은 줄을 따로 잡는다 — 입력칸과 한 줄에 두면 라벨 길이가
   제각각이라 입력칸의 왼쪽 끝이 칸마다 어긋난다. → templates/_field.html */
.field { margin: 0 0 1rem; }
.field > label { display: block; font-weight: 600; margin-bottom: .25rem; }
.field input[type="text"], .field input[type="email"], .field input[type="url"],
.field textarea, .field select {
  width: 100%; max-width: 42rem; padding: .45rem .6rem;
  border: 1px solid #d6d6d6; border-radius: .3rem; font: inherit;
}
.field textarea { line-height: 1.5; }
/* 안내는 칸 아래, 오류는 칸 위. 무엇이 잘못됐는지 읽고 나서 고칠 칸을 보는
   것이 순서다. 색만으로 알리지 않고 글로도 말한다(SYS-10). */
.field-help { display: block; margin-top: .25rem; font-size: .85rem; color: #666; }
.field-error { display: block; margin-bottom: .25rem; font-size: .88rem;
               font-weight: 600; color: #b91c1c; }
.field.has-error input, .field.has-error textarea { border-color: #b91c1c; }
/* 여러 개 고르는 칸(중점 분야)은 상자를 씌우지 않는다 — 네모 안에 네모가
   겹쳐 보인다. 대신 가로로 흘려 자리를 줄인다. */
.field ul { list-style: none; padding: 0; margin: 0;
            display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.field ul label { font-weight: 400; }

/* 사진 칸. 지금 걸린 사진을 왼쪽에 두고 올리는 칸을 오른쪽에 둔다 —
   무엇이 올라가 있는지 보이지 않으면 멀쩡한 사진을 지우고 다시 올린다. */
.photo-field { display: flex; gap: 1.2rem; align-items: flex-start; }
.photo-field .avatar { width: 6rem; height: 6rem; }
.photo-field > div { flex: 1; min-width: 0; }

/* 학력·경력. 연도가 앞에 서는 줄이 이어지므로 줄 간격을 조금 벌린다. */
.history li { padding: .3rem 0; }