/* ===========================
   Global variables & reset
=========================== */
:root {
  --blue: #007BFF;
  --border: #ddd;
  --text: #222;
  --muted: #666;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
}

/* ===========================
   Header & Navigation (공통)
=========================== */
header,
header.site {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 40px;
  border-bottom: 1px solid var(--border);
  background: white;
}

.title {
  font-size: 1.2em;
  font-weight: bold;
  text-transform: lowercase;
  text-decoration: none;
  color: #000;
  transition: color 0.2s;
}

.title:link,
.title:visited {
  color: #000;
  text-decoration: none;
}

.title:hover {
  color: var(--blue);
  text-decoration: none;
}

nav {
  margin-left: 55px;
}

nav a {
  margin-left: 24px;
  text-decoration: none;
  color: #555;
  font-size: 0.95em;
  transition: color 0.2s;
  font-weight: normal;
}

/* ===========================
   Global Main spacing
=========================== */
main {
  padding: 60px 40px;
  max-width: 1200px;
  margin: 0;
}

/* ===========================
   Global link style (본문 전용)
=========================== */
a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===========================
   Navigation override (밑줄 제거)
=========================== */
header nav a,
header nav a:link,
header nav a:visited {
  text-decoration: none;
}

header nav a:hover,
header nav a.active,
header nav a[aria-current="page"] {
  color: var(--blue);
  text-decoration: none !important;
}

/* ===========================
   Contact page (contact.html)
=========================== */
main {
  padding: 60px 40px;
  max-width: 1200px;
  margin: 0;
}

main.contact-links p a {
  color: #666;               
  text-decoration: none;     
  font-weight: normal;
  margin-left: 10px;           
}

main.contact-links p a:visited {
  color: #666;               
}

main.contact-links p a:hover,
main.contact-links p a:focus {
  color: var(--blue);        
  text-decoration: none;      
}

/* ===========================
   Bio page (bio.html)
=========================== */
main {
  padding: 60px 40px 60px 40px;   /* 안쪽 여백: 위아래 60, 좌우 40 */
  max-width: 740px;     /* 본문 최대 너비 제한 */
  margin: 0;            /* 바깥쪽 여백 없음 (즉, 좌우 중앙정렬은 안 됨) */
}
.section-title {
  margin-top: 40px;     /* 섹션 제목의 위쪽 공간 */
}

/* ===========================
   Language switch (공통)
=========================== */
.lang-switch {
  margin-bottom: 20px;
}

.lang-switch a {
  font-size: 0.95em;
  color: #555;
  text-decoration: none;
  margin-right: 8px;
  cursor: pointer;
  transition: color 0.2s;
}

.lang-switch a:hover,
.lang-switch a.active {
  color: var(--blue);
  text-decoration: none;
}

/* ===========================
   Modifier: compact version
   (index.html에서 사용)
=========================== */
.lang-switch.is-compact a {
  font-size: 0.9em;
  color: #666;                     /* 기본 회색 */
  margin-right: 8px !important;    /* 버튼들 사이 */
  margin-left: 0 !important;
}

/* 첫 번째 버튼만 텍스트와 간격 */
.lang-switch.is-compact a:first-child {
  margin-left: 6px !important;
}

/* hover/active 시 파랑 유지 */
.lang-switch.is-compact a:hover,
.lang-switch.is-compact a.active {
  color: var(--blue) !important;
}


/* ===========================
   Home page (index.html)
=========================== */
main.index {
  max-width: 1200px;
}

.entry {
  margin-bottom: 12px;
}

.entry-label {
  display: inline-block;
  min-width: 40px;
  color: #000;
  font-weight: normal;
}

.lang-links a {
  margin-left: 10px;
  font-size: 0.9em;
  color: #666;
  text-decoration: none;
  font-weight: normal;
}

.lang-links a:hover {
  color: var(--blue);
}

/* ===========================
   Texts page — List (from backup)
=========================== */
:root{
  --page-width: 1200px;
  --page-left: 24px;
  --pager-bottom: 220px;
  --pager-height: 22px;
  --gap-after-list: 5px;
  /* 목록 블록 고정 높이 */
  --list-height: 560px;
}

main.list{
  padding:50px 40px 10px 40px;
  max-width:740px;
  margin:0;
  min-height:400px;             /* 있어도 무방하지만 아래 height가 우선 */
  position: static;
  height: var(--list-height);   /* ← 세로 고정 */
  padding-bottom: 0;
}

.items{display:flex;flex-direction:column;gap:10px}

/* 목록 화면에서만 링크 스타일 */
main.list a{
  color: inherit;
  text-decoration: none;
}
main.list a:hover,
main.list a:active{
  color: var(--blue);
  text-decoration: none;
}
main.list a:visited{
  color: inherit;
  text-decoration: none;
}

.text-link{
  display:block;
  padding:8px 0px;
  border:none;
  text-decoration:none;
  color: inherit;
}
.text-link:hover,
.text-link:active,
.text-link:focus{
  color:var(--blue);
  text-decoration:none;
  border:none;
  outline:none;
}

/* hover 시 자식 span도 파랑 */
.text-link:hover .text-title,
.text-link:hover .author,
.text-link:hover .year,
.text-link:active .text-title,
.text-link:active .author,
.text-link:active .year,
.text-link:focus .text-title,
.text-link:focus .author,
.text-link:focus .year{
  color: var(--blue);
}

.text-title{font-style:italic}
.meta-sep{ margin:0 6px 0 0; color:var(--muted); }
.author,.year{color:#444}

/* 페이지네이션 */
.pagination{
  position: static;
  max-width: 740px;
  margin: 16px 40px 40px 24px;  /* 리스트와 같은 좌우 여백 */
  text-align: center;
}
.pagination a{
  margin: 0 6px;
  text-decoration:none;
  color:#000;
  font-size:.95em;
}
.pagination a:hover,
.pagination a.active{ color:var(--blue); }

/* ===========================
   Texts page — Detail (from backup)
=========================== */
main.detail{
  display:grid;
  grid-template-columns: auto 320px;
  gap:16px;
  max-width:1200px;
  margin:0;
  padding:50px 40px 60px 40px;
}

#detailArticle{ width:min(90ch, 100%); }

@media (max-width:960px){
  main.detail{grid-template-columns:1fr}
  #detailArticle{ width:100%; }
  aside{position:static}
}

article .text-body, article .notes{ max-width:100%; }
aside{ position:static; top:24px; align-self:start }

h1,h2,h3,h4{font-weight:bold;margin:.2em 0 .4em}
.meta{display:flex;align-items:center;gap:8px;margin:.25rem 0 .75rem;color:var(--muted);font-size:.95em;font-weight:bold;}

.lang-tabs{display:flex;gap:8px;margin:.5rem 0 1rem}
.lang-tabs button{
  border:none;background:#fff;padding:0;font:inherit;cursor:pointer;color:#444
}
.lang-tabs button:hover{color:var(--blue)}
.lang-tabs button.active{color:var(--blue)}
.lang-tabs .orig-badge{margin-left:6px;font-size:.8em;color:var(--muted)}

.notes{margin-top:24px}
.notes ol{margin:0;padding-left:0;list-style:none;}
article .notes li{ margin:.6rem 0; }
.note-ref{cursor:pointer;text-decoration:none;color:var(--blue)}
.note-num{color:var(--blue);text-decoration:none;margin-right:6px}
.note-num:hover{text-decoration:underline}
sup.note-ref, a.note-ref, .note-num { font-style: normal; } /* 각주번호 이태릭체 방지  */

/* 툴팁 파랑 테두리 */
.tooltip{
  position:fixed;z-index:1000;max-width:360px;border:1px solid var(--blue);background:#fff;
  padding:8px 10px;box-shadow:0 2px 10px rgba(0,0,0,.08);font-size:.95em;display:none
}

/* 사이드 블럭 & 구분선 */
.aside-block{padding:14px 0}
.divider{height:1px;background:var(--border);margin:16px 0}
main.detail article .divider{ max-width:100%; width:100%; margin:32px 0; }
main.detail aside .divider{ max-width:none; width:100%; }

/* 본문/사이드바 링크: 방문 흔적 제거 + 기존 느낌 유지 */
main.detail article a,
main.detail aside a{
  color: var(--blue);
  text-decoration: none;
}
main.detail article a:hover,
main.detail article a:active,
main.detail aside a:hover,
main.detail aside a:active{
  color: var(--blue);
  text-decoration: underline;
}
main.detail article a:visited,
main.detail aside a:visited{
  color: var(--blue);
  text-decoration: none;
}

/* 사이드 링크 버튼 */
.link-button {
  display: inline-block;
  border: none;
  padding: 0;
  text-decoration: none;
  color: var(--blue);
  font-size: 0.95em;
  line-height: 1.4;
}
.link-button:hover,
.link-button:focus,
.link-button:active {
  color: var(--blue);
  text-decoration: underline;
  outline: none;
}
.link-button:visited {
  color: var(--blue);
  text-decoration: none;
}

/* Related works: 불릿 제거 + 대시 */
.related-works { list-style: none; margin: 8px 0 0; padding: 0; }
.related-works li {
  margin: 0 0 6px 0;
  position: relative;
  padding-left: 14px;
}
.related-works li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--muted);
}

/* 텍스트 본문 figure(이미지+캡션) — work와 동일하게 */
.text-body figure.text-image{ margin:0; }
.text-body figure.text-image img{
  width:75%; height:auto; display:block; margin:0 auto 3px; /* 가운데 정렬 */
}
.text-body figure.text-image .caption{
  max-width:75%;               /* 이미지와 동일 폭 */
  margin:0 auto 40px;          /* 가운데 정렬 + 아래 여백 */
  font-size:0.8em;
  color:var(--muted);
  text-align:left;
}

/* 전시 라벨 박스 */
.label-box{
  border:2px solid #000;
  padding:20px;
  margin:40px auto;
  max-width:75%;
  font-size:0.95em;
  line-height:1.6;
  background:#fff;
}

/* Back to top */
#backToTop{
  position: fixed;
  right: 24px;
  bottom: 20px;
  display: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--blue);
  text-decoration: none;
  font-size: .95em;
}
#backToTop:hover{ text-decoration: underline; }
#backToTop:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }