/* ===========================================================================
   간행물 정보 — 사이드바 맨 아래

   HTML 은 commons/publication.R 이 _publication.yml 에서 만들어
   _quarto.yml 의 `website.sidebar.footer` 블록에 넣는다.
   Quarto 가 `<div class="quarto-sidebar-footer">` 로 감싸 </nav> 직전에 붙인다.
   여기는 모양만 정한다 — 문구를 이 파일에 적지 말 것.

   폭 전제: 사이드바 340px - 좌우 여백(0.75rem x 2) = 약 316px.
   =========================================================================== */

/* ── 화면 하단 고정 ────────────────────────────────────────────────────────
   본문 길이와 무관하게 **뷰포트 하단**에 붙어 있게 한다. 메뉴는 위쪽에 남고
   간행물 정보만 화면 아래에 계속 보인다.

   우리 테마(`layout/_sidebar.scss`)가 이미 사이드바를 sticky 로 만들어 두었다.

       position: sticky; top: 0;
       align-self: start;      // 늘어나지 않게 막는다
       max-height: 100vh;      // 상한일 뿐 — 실제 높이는 내용만큼
       overflow-y: auto;

   `align-self: start` 라 사이드바 높이가 내용만큼이고, `max-height` 는 상한일
   뿐이다. 그래서 안쪽 `sticky bottom` 이 붙을 여유가 없다 — 그냥 내용 끝에
   놓인다(2026-09-08 실측). Bootstrap 의 `.overflow-auto { …!important }` 를
   덮어도 소용없었던 이유가 이것이다: 원인이 둘이었고 그중 하나만 봤다.

   높이를 뷰포트로 **고정**하고 안쪽을 세로 flex 로 나눈다.
   메뉴가 남는 높이를 먹고 스크롤을 맡으며, 간행물 정보는 바닥에 남는다.   */

/* ── 아래 배치 규칙은 **데스크톱 폭에서만** 적용한다 ────────────────────────
   992px 미만에서 Quarto/Bootstrap 은 사이드바를 그리드 밖으로 빼고
   접히는 서랍으로 돌린다(`@media (max-width: 991.96px) { position: static }`).
   그 폭에서 아래 규칙이 함께 걸리면 **본문이 사라진다** — 특히
   `grid-row: content-top / page-bottom` 이 모바일의 다른 그리드 구조에서
   사이드바를 페이지 전체 높이(실측 9,801px)로 늘려 본문을 밀어낸다.
   2026-09-09 실측: 이 한 속성만 제거해도 본문이 돌아오고 높이가 830px 이 된다.

   Bootstrap 경계가 991.98px 이므로 992px 로 맞춘다.                        */
@media (min-width: 992px) {
  body.floating #quarto-sidebar.sidebar-navigation {
    /* 본문을 스크롤해도 사이드바는 제자리에 둔다.
       테마(`layout/_sidebar.scss`)가 이미 `position: sticky; top: 0` 을 선언했지만
       실제로는 걸리지 않아 본문과 함께 움직였다(제 변경 이전부터). 조상에는
       overflow·transform 이 없으니 원인은 둘 중 하나다 —
         ⑴ 선언이 다른 규칙에 밀렸다 (Bootstrap `.sidebar.sidebar-navigation
            { position: static }` 이 조건에 따라 이길 수 있다)
         ⑵ grid 영역이 사이드바 높이와 같아 움직일 여유가 없다
       진단 없이 둘 다 막는다. 서로 부딪히지 않는다. */
    position: sticky !important;
    /* 테마가 `margin-top: 3rem` 으로 사이드바를 본문 첫 요소에 맞춘다.
       sticky 기준을 0 으로 두면 스크롤 초반 그 3rem(=42px, 루트 글꼴 14px 기준)
       만큼 본문을 따라 올라간 뒤에야 고정된다 — 그 구간이 눈에 거슬린다.
       기준을 초기 위치와 같게 두어 **처음부터 그 자리에 붙어 있게** 한다. */
    /* `!important` — 특이도상 우리 선택자가 이겨야 하는데도 테마의
       `#quarto-sidebar { top: 0 }` 가 계산값을 잡았다(2026-09-08 실측).
       `position` 도 같은 이유로 못 박았다. */
    top: 3rem !important;
    align-self: start;
    /* ⑵ — 영역을 페이지 끝까지 늘려 sticky 가 움직일 여유를 만든다.
       Quarto 기본값과 같지만, 어딘가에서 좁혀졌을 경우를 대비해 못 박는다. */
    grid-row: content-top / page-bottom;

    /* margin-top: 3rem 을 테마가 주므로 그만큼 빼야 화면을 넘지 않는다.
       아래로 1rem 더 띄운다. */
    height: calc(100vh - 4rem);
    max-height: calc(100vh - 4rem);
    /* 스크롤은 안쪽 메뉴가 맡는다. 여기서 스크롤하면 푸터도 함께 밀린다. */
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }

  #quarto-sidebar .sidebar-menu-container {
    /* 남는 높이를 흡수하고 넘치면 여기서만 스크롤한다.
       min-height: 0 이 없으면 flex 자식이 줄어들지 않아 스크롤이 안 생긴다. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Quarto 기본 padding-bottom 5em 은 푸터가 바닥에 붙은 지금 불필요하다. */
    padding-bottom: 1em;
  }

  #quarto-sidebar .quarto-sidebar-footer {
    flex: 0 0 auto;   /* 줄어들지 않게 — 메뉴가 길어도 잘리면 안 된다 */
    /* 화면 바닥에 딱 붙지 않게 띄운다. 사이드바 높이에서 이미 3rem 을 뺐지만
       그것은 위쪽 margin 몫이라 아래는 여백이 없었다. */
    padding-bottom: 1rem;
    /* **배경을 반드시 준다.** 투명하면 스크롤되는 메뉴가 글자 뒤로 비쳐 지나간다. */
    background: var(--bs-body-bg, #fff);
  }
}


/* ── 태블릿 세로에서 서랍이 21px 로 찌그러지는 문제 ────────────────────────
   **우리가 만든 문제가 아니다.** `publication.css` 를 통째로 꺼도 재현되므로
   Quarto 테마(그리드 레이아웃)에서 오는 것이고, 간행물 정보를 넣기 전부터
   있었다. 배포본이 우리 책임이라 여기서 덮는다.

   무슨 일이 일어나나 — Quarto 는 사이드바 서랍에
       grid-column: page-start / body-start
   을 주고, 화면 전체 폭으로 펴는 것은 `@media (max-width: 576px)` 의
   `width: 100%` 뿐이다. 그런데 768px 이상에서 그리드가
       [screen-start] 21px [screen-start-inset] 0px [page-start ...
   로 잡히면서 `page-start / body-start` 구간이 **21px** 이 된다.
   서랍은 열리는데 메뉴 글자가 세로로 잘려 읽을 수 없다.

   실측한 경계 (2026-09-09, Playwright) —
       767px 이하  정상 (725px)      992px 이상  데스크톱 배치
       768~991px   깨짐 (21px)   ← 아이패드 세로(744 는 정상, 768·820 는 깨짐)

   `width: 100%` 로는 안 고쳐진다(그리드 영역 자체가 좁아서 21px 그대로).
   **영역을 넓게 주는 `grid-column` 이라야** 한다 — 후보 셋을 네 폭에서
   시험해 확인했다.

   `screen-start / screen-end` 가 아니라 **`-inset`** 을 쓴다. 화면 끝까지
   주면 좌우 여백 21px 이 사라져 메뉴·간행물 정보가 화면에 딱 붙는다.
   `-inset` 라인이 그 21px 안쪽이라 여백이 살아난다.

   서랍이 제 폭을 찾자 **그동안 가려져 있던 것 둘이 드러났다** — 아래 둘은
   이 블록이 만든 문제가 아니라, 21px 로 찌그러져 안 보이던 것이다.       */
/* 767px 이하에도 같은 처리가 필요하다 — 거기서도 서랍이 x=21 부터 시작해
   왼쪽에 회색 틈이 남는다(2026-09-09 실측). 서랍이 나오는 폭 전체에 건다. */
@media (max-width: 991.98px) {
  #quarto-sidebar.sidebar-navigation {
    /* 화면 **끝까지** 준다. `-inset` 라인(21px 안쪽)을 쓰면 서랍 왼쪽에 틈이
       생기고 그리로 오버레이 회색이 비쳐, 오른쪽 바깥과 색이 달라 보인다
       (2026-09-09 실측: x=0~21 이 rgba(102,102,102,.4)).
       안쪽 여백은 아래 `padding` 으로 준다 — 그래야 서랍이 가장자리에 붙는다. */
    grid-column: screen-start / screen-end !important;
  }
}

/* ── 서랍을 열었을 때 위아래 여백 ──────────────────────────────────────────
   서랍은 헤더 바로 아래(y=49)에서 시작해 화면 끝까지 간다. 배너와 간행물
   정보가 가장자리에 닿아 답답해 보인다.

   `margin` 이 아니라 `padding` 으로 준다 — margin 을 주면 그 틈으로 서랍
   오버레이(`rgba(102,102,102,.4)`)가 비쳐 회색 띠가 생긴다(2026-09-09 실측,
   테마의 `margin-top: 3rem` 이 그렇게 보였다).                             */
/* ── 태블릿에서는 서랍답게 폭을 제한한다 ──────────────────────────────────
   `grid-column` 으로 영역을 넓히면 서랍이 화면 전체(726px)를 덮는데, 안의
   내용은 데스크톱 사이드바(340px)용이라 오른쪽이 텅 비고 배너 패턴이
   가로로 늘어진다. 간행물 정보도 한 줄로 빽빽해진다(연구진 줄높이 16px).

   폭을 제한하면 나머지는 오버레이로 본문이 비쳐 서랍처럼 보이고, 간행물
   정보도 두 줄로 접힌다(33px). 420px 은 데스크톱(340px)보다 조금 넓게 잡아
   가장 긴 메뉴 항목이 한 줄에 들어가는 값이다.

   스마트폰(575.98px 이하)은 화면이 좁아 전체 폭이 맞으므로 제외한다.       */
@media (min-width: 576px) and (max-width: 991.98px) {
  #quarto-sidebar.sidebar-navigation {
    max-width: 420px;
    /* 본문 위에 떠 있다는 것이 보이게 — 오버레이만으로는 경계가 밋밋하다 */
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
  }

  /* 펼침 애니메이션이 끝에서 튀지 않게 폭을 못 박는다.
     Bootstrap 의 `collapse-horizontal` 은 `width` 를 0 → `scrollWidth` 로
     전환하는데, `max-width` 만 걸면 그 목표값과 실제 렌더 폭이 어긋나
     마지막 한 프레임에 218px 를 건너뛴다(실측). `width` 를 함께 고정하면
     전환이 끝까지 이어진다 — 최대 도약 218px → 75px. */
  #quarto-sidebar.sidebar-navigation.show {
    width: 420px !important;
  }
}

@media (max-width: 991.98px) {
  #quarto-sidebar.sidebar-navigation {
    /* 배너 위 회색 띠 제거 — 서랍 오버레이는 헤더 바로 아래(y=49)부터 깔리는데
       테마의 `margin-top: 3rem` 이 사이드바를 42px 밀어내 그 틈이
       오버레이 색(rgba(102,102,102,.4))으로 비친다. 서랍에는 이 여백이 필요 없다.
       **서랍이 나오는 폭 전체**에 걸어야 한다 — 768~991 에만 걸었더니
       390·744 에 회색 띠가 남았다(2026-09-09 실측). */
    margin-top: 0 !important;
    /* 상하 여백 + 좌우 여백. `grid-column` 으로 띄우지 않고 여기서 준다(위 주석). */
    padding: 1rem 0.75rem !important;
  }
}

/* ── 스마트폰에서는 제목을 두 줄로 ────────────────────────────────────────
   테마가 992px 미만에서 제목의 `<br>` 을 지운다. 태블릿(576~991)은 배너가
   넓어 한 줄이 자연스럽지만, 스마트폰은 폭이 좁아 두 줄이 읽기 낫다.

   `text-align` 을 왼쪽으로 바꾼다 — 테마 기본값 `center` 로 두면 두 줄이
   각각 가운데 정렬돼 **시작 지점이 어긋난다**(실측 x=52 대 x=39).        */
@media (max-width: 575.98px) {
  #quarto-sidebar .sidebar-header .sidebar-title a br {
    display: block !important;
  }
  #quarto-sidebar .sidebar-header .sidebar-title a {
    text-align: left !important;
  }
}

/* ── 서랍 안쪽 다듬기 ─────────────────────────────────────────────────────
   데스크톱 사이드바(340px)용으로 짜인 간격이 서랍에서는 빽빽해 보인다.
   배너도 가장자리에 딱 붙어 답답하다. 서랍에서만 조금씩 풀어 준다.

   데스크톱(992px 이상)은 높이가 빠듯해 여백을 줄여 둔 상태라(아래
   "사이드바가 넘치지 않게" 블록) 여기서 되돌리지 않는다.               */
@media (max-width: 991.98px) {
  /* 배너를 안쪽으로 들이고 모서리를 둥글려 카드처럼 띄운다 */
  #quarto-sidebar .sidebar-header {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  #quarto-sidebar .sidebar-title a,
  #quarto-sidebar div.sidebar-title a {
    border-radius: 0.5rem;
  }

  /* 항목 간격 — 데스크톱의 0.25/0.1 은 서랍에서 답답하다 */
  #quarto-sidebar .sidebar-item {
    margin-top: 0.35rem;
    margin-bottom: 0.25rem;
  }
  #quarto-sidebar .sidebar-menu-container > ul > li.sidebar-item-section {
    padding: 0.75rem 0.5rem;
  }
}

/* ── 서랍 모드의 간행물 정보 여백 ────────────────────────────────────────
   데스크톱 배치 블록을 `@media (min-width: 992px)` 로 가두면서 footer 의
   `padding-bottom` 도 함께 갇혔다. 서랍에서는 Quarto 기본 padding 도 0 이라
   간행물 정보가 사방에 딱 붙는다(실측: 데스크톱 `14px 7px` 대 서랍 `0px`).

   데스크톱과 같은 좌우 여백(0.5rem)에 아래를 조금 더 준다 — 서랍 맨 끝이라
   바닥에 붙으면 잘린 것처럼 보인다.

   `!important` 가 필요하다. 테마가 서랍 폭에서 사이드바 직계 자식의 여백을
   통째로 지운다 —
       @media (max-width: 991.98px) { #quarto-sidebar > * { padding: unset !important } }
   특이도는 우리 선택자(`#id .class`)가 그쪽(`#id > *`)보다 높지만
   `!important` 앞에서는 진다(2026-09-09 실측: 없이 쓰니 계산값 0px).      */
@media (max-width: 991.98px) {
  #quarto-sidebar .quarto-sidebar-footer {
    padding: 0.75rem 0.5rem 1.25rem !important;
  }
}

/* 폭과 무관한 서식 — 모바일 서랍 안에서도 같아야 한다.
   Quarto 기본값 .875em 이 본문 글꼴을 한 번 더 줄인다. 되돌린다. */
#quarto-sidebar .quarto-sidebar-footer {
  font-size: 1em;
}

/* ── 사이드바가 넘치지 않게 ────────────────────────────────────────────────
   메뉴 22항목만으로도 가용 높이(100vh - 3rem, 1080p 기준 약 850px)에 빠듯했고,
   간행물 정보 약 200px 가 얹히며 확실히 넘쳤다. 여백을 조밀하게 줄인다.

   실측 내역 — 항목 22 x 25.6px = 563 · 섹션 패딩 2 x 16 = 64 ·
   섹션 간격 24 · 헤더+검색 약 150 · 간행물 정보 약 200 = 약 1,000px

   테마 SCSS(`layout/_sidebar.scss`)를 고치지 않는 이유 — 그쪽을 건드리면
   컴파일된 CSS 파일명 해시가 바뀌어 **배포 19편을 전부 다시 렌더해야 한다.**
   이 파일은 해시 없이 참조되므로 여기서 덮으면 재렌더가 필요 없다.        */

#quarto-sidebar .sidebar-menu-container > ul > li.sidebar-item-section {
  padding: 0.5rem;                      /* 1rem */
}

#quarto-sidebar .sidebar-menu-container > ul > li ul.depth1
  > li.sidebar-item-section + li.sidebar-item-section {
  padding-top: 0.75rem;                 /* 1.5rem */
}

#quarto-sidebar .sidebar-item {
  margin-top: 0.25rem;                  /* 0.4rem */
  margin-bottom: 0.1em;                 /* 0.2em */
}

/* 로고 배너가 사방 2.5rem(40px) 패딩이라 그 블록만 100px 을 넘게 쓴다.
   메뉴 항목 하나(약 22px)의 다섯 배다. 가로는 그대로 두고 세로만 줄인다 —
   배경 이미지가 cover 라 가로 여백을 줄이면 글자가 가장자리에 붙는다. */
@media (min-width: 992px) {
  #quarto-sidebar .sidebar-title a,
  #quarto-sidebar div.sidebar-title a {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

/* 섹션 제목이 1.1rem 이라 22항목 위에 얹히면 무겁다. 한 단계 낮춘다. */
#quarto-sidebar ul.sidebar-section.depth1 .sidebar-section-item {
  font-size: 1rem;
}

/* ── 본체 ─────────────────────────────────────────────────────────────────── */

.pub-info {
  margin: 0;
  padding: 0.75rem 0 0.5rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  font-size: 0.8125rem;      /* 13px — 본문 14px 보다 한 단계만 작게 */
  line-height: 1.45;
  color: var(--bs-secondary-color, #6c757d);
}

/* 사이드바 밖(본문 하단)에 놓였을 때를 대비한 폭 제한.
   지금 배치에서는 사이드바가 이미 좁아 걸리지 않는다. */
.pub-info-inner {
  max-width: 1056px;
}

/* 항목명 | 값 두 열. 316px 에서 항목명 열(가장 긴 "연구수행부서")이 약 74px 이라
   값에 230px 가 남는다. 값이 길면 여러 줄로 흐른다 — 그래도 항목명과 값의
   대응이 눈에 보이는 편이 낫다.
   minmax(0, 1fr) 이라야 긴 값이 격자를 밀어내지 않는다. */
.pub-info-list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.6rem;
  margin: 0 0 0.5rem;
}

.pub-info-list dt {
  font-weight: 400;
  white-space: nowrap;
  color: var(--bs-tertiary-color, #adb5bd);
}

.pub-info-list dd {
  margin: 0;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
  /* 한글이 단어 중간에서 잘리지 않게 한다. 없으면 "서울 도시기본계/획"으로 갈린다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 말줄임(text-overflow)을 쓰지 않는다 — 과제명·연구진은 행정 표기라
   잘리면 뜻이 없다. 폭이 모자라면 여러 줄로 흐르게 둔다. */

/* ── 공공누리 배지 ────────────────────────────────────────────────────────
   공식 마크 이미지를 받으면 .pub-kogl-mark 자리에 넣는다.               */

.pub-kogl {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.5rem 0.3rem 0.3rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  background: var(--bs-body-bg, #fff);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bs-body-color, #212529);
  text-decoration: none;
}

.pub-kogl:hover {
  background: var(--bs-tertiary-bg, #f8f9fa);
}

.pub-kogl-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  background: #1d4ed8;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.pub-kogl-text {
  word-break: keep-all;
}

/* 조건 문구가 길어(출처표시·상업적이용금지·변경금지) 좁은 폭에서 줄바꿈된다.
   가운뎃점 뒤가 NBSP 로 묶여 있어 "·" 만 앞 줄 끝에 남지는 않는다. */
.pub-kogl-cond {
  font-weight: 400;
  color: var(--bs-secondary-color, #6c757d);
}

/* Quarto 는 sidebar.footer 값을 마크다운으로 처리한다. 그 과정에서 배지 <a> 가
   <p> 로 감싸지므로 기본 문단 여백을 지운다. */
.pub-info p {
  margin: 0;
}

/* 사이드바가 접히는 폭(992px 미만) 처리는 위 `@media (min-width: 992px)` 로
   끝난다. **저절로 풀리지 않는다** — 2026-09-08 에 여기 "별도 처리가 필요
   없다"고 적었던 것은 틀렸고, 그 탓에 모바일에서 본문이 통째로 사라졌다.
   배치·높이·flex 규칙을 좁은 폭에 흘리지 말 것. */