/* =========================================================================
   site.css — minima 기반 페이지(홈·소개·연구목록)를 연구 문서 톤으로
   -------------------------------------------------------------------------
   minima 테마의 main.css 뒤(custom-head.html)에서 로드되어 본문 영역을
   research 문서와 같은 종이/잉크 분위기로 덮어씁니다. 헤더/푸터는 research-chrome.css.
   ========================================================================= */

:root{
  --paper:#f3f5fb; --paper2:#e7ecf6; --card:#ffffff;
  --ink:#16233f; --ink2:#3a4767; --mut:#7c879e; --line:#d4dce9;
  --accent:#23467e; --accent-soft:#ffe08a; --accent2:#f2b705;
  --serif:"Noto Serif KR",serif; --sans:"Noto Sans KR",sans-serif;
  --maxw:760px;
}

/* ── 베이스 ─────────────────────────────────────────────────────── */
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--serif); line-height:1.85; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-soft)}

.page-content{padding:3.5rem 0 4rem}
.page-content .wrapper{max-width:var(--maxw); margin:0 auto; padding:0 1.5rem}

a{color:var(--accent)}
a:hover{color:var(--accent); text-decoration:underline}

h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); line-height:1.3; letter-spacing:-.01em}

/* ── 페이지(소개·연구목록 등) ───────────────────────────────────── */
.post-header{margin-bottom:1.8rem}
.post-title,.post-list-heading{
  font-size:clamp(1.9rem,5vw,2.6rem); font-weight:700; color:var(--ink);
  margin:0; letter-spacing:-.02em;
}
.post-title::after{
  content:""; display:block; width:48px; height:3px; margin-top:.9rem;
  background:var(--accent2); border-radius:2px;
}
.post-content{color:var(--ink2); font-size:1.06rem}
.post-content p{margin:0 0 1.1rem}
.post-content b,.post-content strong{color:var(--ink)}
.post-content h2{
  font-size:1.6rem; margin:2.6rem 0 1.1rem; padding-bottom:.4rem;
  border-bottom:1px solid var(--line); position:relative;
}
.post-content h2::after{   /* 소제목용 짧은 강조 밑줄 (h1 강조바의 축소판) */
  content:""; position:absolute; left:0; bottom:-1px;
  width:2.2rem; height:2px; background:var(--accent2); border-radius:2px;
}
.post-content h3{
  font-size:1.25rem; margin:2rem 0 .7rem; padding-left:.85rem; position:relative;
}
.post-content h3::before{  /* 왼쪽 세로 강조 막대 */
  content:""; position:absolute; left:0; top:.2em; bottom:.2em;
  width:4px; border-radius:2px; background:var(--accent2,#f2b705);
}
.post-content hr{border:0; height:1px; background:var(--line); margin:2.5rem 0}

/* ── 인용구(홈 화면 중심 문구 등) ───────────────────────────────── */
blockquote{
  font-family:var(--serif); color:var(--ink);
  background:var(--card); border:0; border-left:4px solid var(--accent2);
  border-radius:0 12px 12px 0; padding:1.4rem 1.8rem; margin:1.5rem 0;
  font-size:1.12rem; line-height:1.9; font-style:normal;
}
blockquote p{margin:0 0 .8rem}
blockquote p:last-child{
  margin:.6rem 0 0; text-align:right; font-family:var(--sans);
  font-size:.9rem; color:var(--mut);
}

/* 홈: 중심 인용을 화면 가운데로 여유 있게 */
.home{min-height:46vh; display:flex; flex-direction:column; justify-content:center}
.home blockquote{font-size:clamp(1.1rem,2.6vw,1.35rem)}

/* ── 카드형 목록 (research.md · resources.md · teaching.md 공용) ──── */
.research-index,.resource-index,.teaching-index{list-style:none; padding:0; margin:1.6rem 0; display:grid; gap:1rem}
.research-index li,.resource-index li,.teaching-index li{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:1.2rem 1.4rem; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.research-index li:hover,.resource-index li:hover,.teaching-index li:hover{
  transform:translateY(-2px); box-shadow:0 10px 30px rgba(20,35,63,.12);
  border-color:var(--accent-soft);
}
.research-index li a,.resource-index li a,.teaching-index li a{
  font-family:var(--serif); font-size:1.18rem; font-weight:700;
  color:var(--ink); text-decoration:none;
}
.research-index li:hover a,.resource-index li:hover a,.teaching-index li:hover a{color:var(--accent)}
.research-index li small,.resource-index li small,.teaching-index li small{
  display:block; margin-top:.45rem; font-family:var(--sans);
  font-size:.85rem; color:var(--ink2); line-height:1.7;
}

/* ── 코드 ───────────────────────────────────────────────────────── */
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em}
.post-content code{background:var(--paper2); border:0; border-radius:4px; padding:.1em .35em; color:var(--accent)}
.post-content pre{background:#14213d; color:#eef1f8; border:0; border-radius:10px; padding:1rem 1.2rem; overflow:auto}
.post-content pre code{background:none; color:inherit; padding:0}
/* Rouge 신택스 하이라이트 블록도 같은 어두운 톤으로 통일.
   minima solarized 스킨의 `.highlighter-rouge .highlight`(밝은 배경)가
   specificity로 위 .post-content pre를 이기므로 더 강한 선택자로 덮어쓴다. */
.post-content .highlighter-rouge .highlight,
.post-content pre.highlight{background:#14213d; border:0; border-radius:10px}
.post-content .highlight{color:#eef1f8}            /* 색 지정 없는 일반 토큰을 밝게(색 있는 토큰은 자기 색 유지) */

@media(max-width:600px){
  .page-content{padding:2.4rem 0 3rem}
  blockquote{padding:1.1rem 1.3rem}
}