/* =============================================================================
 * style1.css — clean, technical reference styling
 * =========================================================================== */
:root {
  /* 1. 배경 및 사이드바 색상 */
  --paper:      #ffffff; 
  --surface:    #f5f2f0; 
  --surface-2:  #ebe5df; 

  /* 2. 텍스트 색상 (브라운을 뺀 무채색 계열로 가독성 극대화) */
  --ink:        #3a2824;  /* 완전 진한 검정-차콜 */
  --body:       #54403a;  /* 눈이 편안한 짙은 회색 (가장 표준적인 본문 색상) */
  --muted:      #8a736c;  /* 부가 설명 텍스트 */
  --faint:      #bfaea9;  /* 비활성화 텍스트 */

  /* 3. 테두리 및 구분선 */
  --line:       #dfd6d1;  /* 무채색 톤에 맞춘 구분선 */
  --line-soft:  #eee9e5; 

  /* 4. 포인트 색상 (기존 유지) */
  --accent:     #d8621d; 
  --accent-ink: #b5490b; 
  --accent-soft:#fbeae1; 

  /* 사이드바 너비 유지 */
  --sidebar-w:  400px; 
  --sidebar-collapsed-w: 80px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 405;
  color: var(--body);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:target { scroll-margin-top: 1.25rem; }

code, .mono, .tabnum {
  font-family: Consolas, ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -------------------------------------------------------------------------
 * Layout & Sidebar
 * ------------------------------------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
  transition: grid-template-columns .36s cubic-bezier(.22, 1, .36, 1);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column; 
  width: 100%;
  min-width: 0;
  transition: padding .36s cubic-bezier(.22, 1, .36, 1);
}

.sidebar .brand {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  font-size: .95rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  min-height: 75px;
}

.desktop-toggle {
  flex: none;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-top: 0.1rem;
}

.desktop-toggle:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.desktop-toggle svg { width: 20px; height: 20px; }

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  transition: opacity .16s ease, max-width .36s cubic-bezier(.22, 1, .36, 1);
}

.sidebar .brand .tag {
  display: block;
  font-family: sans-serif, monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .3rem;
}

/* -------------------------------------------------------------------------
 * Table of Contents (TOC)
 * ------------------------------------------------------------------------- */
.toc-label {
  font-family: Consolas, monospace;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}

.toc { list-style: none; margin: 0; padding: 0; flex-grow: 1; }
.toc li { margin: 0; }
.toc a {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: .55rem;
  padding: .34rem .6rem;
  border-radius: 6px;
  color: var(--body);
  text-decoration: none;
  font-size: .875rem;
  border-left: 2px solid transparent;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toc a > span:not(.idx) {
  min-width: 0;
}

.toc a .idx {
  font-family: Consolas, monospace;
  font-size: .7rem;
  color: var(--faint);
  min-width: 1.4rem;
}

.toc a:hover { background: #eef1f6; color: var(--ink); }
.toc a.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-left-color: var(--accent);
  font-weight: 500;
}

.toc a.active .idx { color: var(--accent); }
.toc a.is-pending { color: var(--faint); }
#toggleSidebarBtn:hover { color: var(--ink) !important; }

.toc a.toc-sub-link { padding-left: 2rem; font-size: 0.82rem; color: var(--muted); }
.toc a.toc-sub-link:hover { color: var(--ink); }
.toc a.toc-sub-link .idx { font-size: 0.65rem; }

/* -------------------------------------------------------------------------
 * Visitor Stats & Sidebar Footer
 * ------------------------------------------------------------------------- */
.visitor-stats {
  margin: 1.5rem 0 1.5rem;
  padding: 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.stat-item { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.stat-label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.stat-num { font-family: Consolas, monospace; font-weight: 600; color: var(--ink); font-size: 0.95rem; }

.sidebar-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  overflow-wrap: anywhere;
}

.footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.kaist-logo {
  max-width: 100px;
  height: auto;
  flex-shrink: 0;
  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.CoCoA-logo {
  max-width: 180px;
  height: auto;
  transition: opacity 0.2s ease, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.copyright-text { 
  margin: 0 auto; 
  font-size: 0.75rem; 
  color: var(--muted); 
  line-height: 1.5; 
  text-align: center;
  width: 100%;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * Main Content Layout & Headers
 * ------------------------------------------------------------------------- */
.content { 
  padding: 2.75rem clamp(1.25rem, 4vw, 3.5rem) 5rem; 
  width: 100%; 
  max-width: 1180px; 
  min-width: 0; 
  margin: 0 auto;
}

.page-head { margin-bottom: 2.75rem; }
.page-head h1 {
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 3rem;
  line-height: 1.15;
}
.page-head .lede { color: var(--muted); margin: 0; }

.main-level-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 4.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--line);
}

.content > .main-level-header:first-of-type { margin-top: 0; }

.main-level-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 3px 6px rgba(20, 33, 61, 0.1);
}

.main-level-title {
  font-weight: 600;
  font-size: 1.65rem;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}

.section { padding-top: 2.5rem; margin-top: 2.5rem; }
.sub-level-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; }
.sub-level-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Consolas, monospace;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--accent-ink);
  background: var(--accent-soft);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #d6deff;
  flex-shrink: 0;
}
.sub-level-title { font-weight: 600; font-size: 1.25rem; color: var(--body); letter-spacing: -0.01em; margin: 0; line-height: 1.2; }

/* -------------------------------------------------------------------------
 * Custom Square Bullet List
 * ------------------------------------------------------------------------- */
.notation-list {
  list-style: none; 
  padding-left: 0.8rem;
  margin-bottom: 1rem;
  color: var(--muted);
}

/* 아래 코드는 기존과 동일하게 유지합니다 */
.notation-list li {
  position: relative;
  padding-left: 1.1rem; /* 네모와 글씨 사이의 간격 */
  margin-bottom: 0.35rem; /* 각 줄(항목) 사이의 간격 */
  line-height: 1.6;
}

/* 조그맣고 깔끔한 맞춤형 네모 만들기 */
.notation-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em; /* 네모의 세로 높낮이 (글씨 중앙에 오도록 조절) */
  width: 5px; /* 네모의 가로 크기 */
  height: 5px; /* 네모의 세로 크기 */
  background-color: var(--muted); /* 네모의 색상 */
  border-radius: 0px; /* 네모 모서리를 아주 살짝만 둥글게 해서 부드러운 느낌 주기 */
}

/* -------------------------------------------------------------------------
 * Masthead Cards & Members
 * ------------------------------------------------------------------------- */
.masthead { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.75rem; }
.masthead-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(20, 33, 61, 0.03);
}

.mh-block { display: flex; flex-direction: column; padding: 1.5rem 1.75rem; gap: 1.5rem; }
.mh-lab-block { background: linear-gradient(145deg, #f8f9fa, #f1f3f5); }
.mh-header-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; width: 100%; gap: 1.5rem; }
.mh-info { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.mh-title { font-weight: 600; color: var(--ink); font-size: 1.05rem; margin: 0; line-height: 1.4; }
.mh-text { font-size: 0.85rem; color: var(--muted); margin: 0; line-height: 1.5; }

.mh-btn {
  flex: none; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem;
  font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid #d6deff;
  border-radius: 6px; padding: 0.55rem 1.1rem; text-decoration: none; white-space: nowrap; transition: all 0.2s ease;
}

.mh-btn:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); box-shadow: 0 4px 12px rgba(47, 84, 235, 0.15); }
.mh-btn svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.mh-btn:hover svg { transform: translateX(2px); }

.mh-members { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
.mh-member-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.4rem 1.15rem; display: flex; flex-direction: column; gap: 0.05rem; 
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mh-member-card:hover { border-color: #cbd5e1; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); }
.mh-member-top { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.mh-member-name { font-weight: 600; color: var(--ink); font-size: 0.95rem; line-height: 1.2; }
.mh-member-email { font-size: 0.9rem; color: var(--accent); text-decoration: none; }
.mh-member-email:hover { text-decoration: underline; }
.mh-member-affil { font-size: 0.8rem; color: var(--muted); line-height: 1.2; }

/* -------------------------------------------------------------------------
 * Tables & Meta Components
 * ------------------------------------------------------------------------- */
.meta-block { margin: 0 0 1.4rem; }
.meta-head { font-family: sans-serif, monospace; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--body); margin-bottom: .45rem; border-bottom: 1px solid var(--muted); padding-bottom: 3px; display: inline-block; }
.desc-list { margin: 0; padding: 0; list-style: none; }
.desc-list li { padding: .12rem 0; color: var(--muted); }
.desc-list .term { font-weight: 600; color: var(--muted); }
.reference { font-size: .86rem; color: var(--body); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; }
.reference a { display: block; color: var(--accent); word-break: break-all; }

.table-card { margin-top: 1.6rem; }
.table-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.table-title { font-weight: 600; color: var(--ink); font-size: .98rem; margin: 0; }
.table-tools { display: flex; align-items: center; gap: .6rem; }
.row-count { font-family: Consolas, monospace; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.filter-input { font-size: .82rem; padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 6px; width: 200px; max-width: 50vw; color: var(--body); background: var(--paper); }
.filter-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.table-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: 70vh; }
table.db { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; margin: 0; }
table.db thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); color: var(--ink); font-weight: 600; font-size: .76rem; letter-spacing: .01em; text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--line); white-space: normal; vertical-align: bottom; min-width: 4.5rem; }
table.db td { white-space: nowrap; }
table.db th.num, table.db td.num { text-align: right; }
table.db th.center, table.db td.center { text-align: center; }
table.db tbody td { padding: .46rem .85rem; border-bottom: 1px solid var(--line-soft); color: var(--body); vertical-align: middle; }
table.db tbody tr:last-child td { border-bottom: 0; }
table.db tbody tr:hover td { background: var(--surface-2); }
table.db td.mono { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
table.db .std-cell { color: var(--muted); white-space: nowrap; }

.na { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .03em; color: var(--faint); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .04rem .5rem; }
tr.row-na td { color: var(--faint); }
.cw-btn { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid #d6deff; border-radius: 6px; padding: .22rem .6rem; text-decoration: none; white-space: nowrap; transition: background-color .12s ease, border-color .12s ease; }
.cw-btn:hover { background: #dde4ff; border-color: #b9c6ff; color: var(--accent-ink); }
.cw-btn svg { width: 13px; height: 13px; flex: none; }
.cw-file { font-family: "IBM Plex Mono", monospace; font-size: .7rem; color: var(--faint); margin-left: .55rem; }
.pending-note { font-size: .88rem; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 8px; padding: .9rem 1.1rem; }
.empty-row td { text-align: center; color: var(--faint); font-size: .84rem; padding: 1.1rem; }

/* -------------------------------------------------------------------------
 * Utilities (To-top, Tooltip, Tool UI)
 * ------------------------------------------------------------------------- */
.to-top { position: fixed; right: 1.4rem; bottom: 1.4rem; width: 38px; height: 38px; border-radius: 9px; background: var(--ink); color: #fff; border: 0; display: none; align-items: center; justify-content: center; cursor: pointer; opacity: .85; z-index: 50; }
.to-top:hover { opacity: 1; }
.to-top.show { display: flex; }

.topbar { display: none; }

.custom-tooltip { position: fixed; background-color: var(--ink); color: #ffffff; padding: 0.45rem 0.8rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; white-space: nowrap; pointer-events: none; z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(-8px); transition: opacity 0.15s ease, transform 0.15s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.custom-tooltip.show { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

.tool-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem 2rem; margin-top: 1rem; }
.finder-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-label { font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.form-control { padding: 0.6rem 0.8rem; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--paper); color: var(--body); font-family: inherit; font-size: 0.95rem; transition: all 0.2s ease; }
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-run { background: var(--accent); color: #fff; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background 0.2s ease; margin-top: 0.5rem; width: max-content; }
.btn-run:hover { background: var(--accent-ink); }
.btn-run:disabled { background: var(--faint); cursor: not-allowed; }
.run-status { margin-top: 1rem; padding: 1rem; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; font-size: 0.9rem; animation: fadeIn 0.3s ease; }
.run-status.success { background: #e6f4ea; color: #1e8e3e; }
.d-none { display: none !important; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------
 * Responsive & Toggled Animations (Ultra Smooth & Gentle)
 * ------------------------------------------------------------------------- */
@media (min-width: 861px) {
  .topbar { display: none; }

  /* 전체 레이아웃의 움직임을 0.7초로 늘리고 아주 완만한 감속 곡선 적용 */
  .layout {
    transition: grid-template-columns 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: grid-template-columns;
  }

  .sidebar .brand { min-width: 0; }
  
  /* ==========================================
     열릴 때 (Open) - 아주 천천히 스며들듯 등장
     ========================================== */
  .brand-text,
  .toc a > span:not(.idx) {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transform: translateX(0);
    /* 대기 시간을 0.2초 유지하되, 나타나는 시간을 0.5초로 늘려 훨씬 여유롭게 */
    transition: opacity 0.5s ease 0.2s, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.2s; 
    will-change: opacity, transform;
  }

  .toc-label, .visitor-stats, .sidebar-footer .copyright-text {
    opacity: 1;
    max-height: 90px;
    transition: opacity 0.5s ease 0.2s, max-height 0.7s cubic-bezier(0.25, 1, 0.5, 1), margin 0.7s ease, padding 0.7s ease;
    overflow: hidden;
    will-change: opacity, max-height;
    flex-shrink: 0; /* 스크롤될 때 통계창이 찌그러지지 않도록 보호 */
  }

  .footer-logos {
    max-height: 48px;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease 0.2s, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.2s, max-height 0.7s cubic-bezier(0.25, 1, 0.5, 1), margin-bottom 0.7s ease;
    will-change: opacity, transform, max-height;
  }

  /* ==========================================
     닫힐 때 (Close) - 물리적인 이동을 최소화하고 서서히 투명해짐
     ========================================== */
  .layout.is-toggled { 
    grid-template-columns: var(--sidebar-collapsed-w) minmax(0, 1fr); 
  }

  .layout.is-toggled .brand-text,
  .layout.is-toggled .toc a > span:not(.idx) {
    opacity: 0;
    /* 거슬림을 없애기 위해 이동 거리를 -3px로 극히 제한 */
    transform: translateX(-3px);
    /* 지워지는 시간을 0.3초로 늘려 눈이 편안하게 페이드아웃 */
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
  }
  
  .layout.is-toggled .brand { 
    padding-bottom: 1.5rem; 
    transition: padding 0.7s cubic-bezier(0.25, 1, 0.5, 1); 
  }
  .layout.is-toggled .toc a.toc-sub-link { 
    padding-left: 0.6rem; 
    transition: padding 0.7s cubic-bezier(0.25, 1, 0.5, 1); 
  }
  .layout.is-toggled .toc a.toc-sub-link .idx { 
    font-size: 0.7rem; 
    transition: font-size 0.7s cubic-bezier(0.25, 1, 0.5, 1); 
  }

  .layout.is-toggled .footer-logos {
    gap: 0;
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(-2px);
    /* 완전히 투명해지는 데 0.3초, 공간이 줄어드는 데 0.6초로 타이밍을 늘림 */
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), margin-bottom 0.6s ease;
    pointer-events: none;
  }

  .layout.is-toggled .toc-label,
  .layout.is-toggled .visitor-stats,
  .layout.is-toggled .sidebar-footer .copyright-text {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: opacity 0.3s ease, max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), margin 0.6s ease, padding 0.6s ease;
    pointer-events: none;
  }

  .layout.is-toggled .sidebar-footer { 
    padding-top: 1rem; 
    border-top-color: transparent; 
    transition: padding 0.7s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease;
  }
  
  .layout.is-toggled .kaist-logo { 
    max-width: 38px; 
    margin-bottom: 0; 
    transition: max-width 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  }
}


@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .topbar { 
    display: flex; align-items: center; justify-content: space-between; 
    gap: .75rem; background: var(--ink); color: #fff; padding: 0 1.25rem; 
    height: 56px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
  }
  .t-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.95rem; }
  
  #navToggle { 
    flex: none; background: var(--accent); border: 0; color: #fff; 
    padding: 0.35rem 0.75rem; border-radius: 4px; font-size: 0.8rem; 
    font-weight: 600; cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  .mh-btn .labhomepage {
    max-width: 50px;
  }

  /* 사이드바 내부 요소들이 위로 밀착되도록 설정 */
  .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: min(280px, calc(100vw - 1rem));
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 4px 0 15px rgba(0,0,0,0.05);
    
    display: flex;
    flex-direction: column;

    /* [수정됨] 세로 스크롤 허용, 가로 스크롤 방지 */
    overflow-y: auto; 
    overflow-x: hidden; 
  }
  
  .layout.is-toggled .sidebar { transform: translateX(0); }
  .desktop-toggle { display: none; }
  
  /* 기존 메뉴 영역(.toc) 구조 유지 및 하단 여백 제거 */
  .toc {
    margin-bottom: 0; 
  }
  .toc a { align-items: flex-start; }
  .toc a > span:not(.idx) { min-width: 0; overflow-wrap: anywhere; }

  /* 방문자 통계 여백을 최소화하여 메뉴 바로 밑으로 밀착 */
  .visitor-stats {
    margin: 4px 1rem;
    padding: 4px;
    flex-shrink: 0; /* 스크롤될 때 통계창이 찌그러지지 않도록 보호 */
  }

  /* 푸터를 아래로 밀어내던 하단 패딩(1rem)을 완전히 없애고 위로 당김 */
  .sidebar-footer {
    padding: 0; 
    margin-top: 10px; /* 통계 영역 바로 밑에 밀착 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 내부 요소 전체 중앙 정렬 */
    flex-shrink: 0; /* 스크롤될 때 푸터가 찌그러지지 않도록 보호 */
  }

  .content { padding-top: 5.5rem; }
  .main-level-header { margin-top: 3rem; }
  .filter-input { width: 140px; }

  /* 로고 영역: 너비 95%, 중앙 정렬, 상하 간격 축소 */
  .footer-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%; 
    gap: 10px;
    margin: 10px auto 10px auto; 
  }
  
  

  /* 로고 크기 및 데스크탑 비율(3:5) 유지 */
  /*.footer-logos img.kaist-logo {*/
  /*  flex: 5; */
  /*  min-width: 0; */
  /*  max-width: none; */
  /*  height: 50px; */
  /*  object-fit: contain; */
  /*}*/

  /*.footer-logos img.CoCoA-logo {*/
  /*  flex: 9; */
  /*  min-width: 0; */
  /*  max-width: none; */
  /*  height: 50px; */
  /*  object-fit: contain; */
  /*}*/
  
  /* 로고를 감싸는 a 태그에 공간 분할 비율(5:9) 적용 */
  .footer-logos a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  .footer-logos a:nth-child(1) {
    flex: 5; /* KAIST 로고 비율 */
  }

  .footer-logos a:nth-child(2) {
    flex: 9; /* CoCoA 로고 비율 */
  }

  /* 이미지는 a 태그가 나눠가진 너비에 맞춰 유동적으로 줄어들도록 설정 */
  .footer-logos img.kaist-logo,
  .footer-logos img.CoCoA-logo {
    width: 100%;
    height: auto;
    max-height: 50px;
    max-width: none;
    object-fit: contain;
  }

  .copyright-text {
    width: max-content;       /* 글자가 차지하는 길이만큼만 딱 맞게 너비를 가짐 */
    margin: 0 auto 50px auto; /* 글자 크기에 맞춰진 상태로 사이드바 중앙에 정렬 */
    text-align: center; 
    white-space: nowrap; 
    line-height: 1.4;
    font-size: 10px; 
    letter-spacing: 0px; 
  }
}


@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .layout, .sidebar, .brand-text, .toc a > span:not(.idx), .toc-label, .visitor-stats, .sidebar-footer .copyright-text { transition-duration: .01ms; }
}