@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Fira+Code&display=swap');

/* ── 기본 리셋 ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── KaTeX 크기 정규화 — 기본 1.21em을 본문과 맞춤 ── */
.katex { font-size: 1em !important; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }

/* ── 오버플로우 방어 — 어떤 요소도 페이지 너비를 넓혀선 안 됨 ── */
img, svg, video, iframe { max-width: 100%; }
table { display: block; overflow-x: auto; max-width: 100%; }
pre { max-width: 100%; }

html {
  --primary-background-color: #222;
  --primary-text-color: white;
  --primary-highlight-color: #2e2e2e;
  margin: 0;
  padding: 0;
}

body {
  background: var(--primary-background-color);
  color: var(--primary-text-color);
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  overflow-x: clip;
  transition: background 0.1s ease-in, color 0.1s ease-in;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
}

a {
  color: var(--primary-text-color);
  text-decoration: none;
}
a:hover { border-bottom: 2px solid var(--primary-text-color); }

/* ── Navbar ── */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 5%;
  border-bottom: 1px solid var(--primary-highlight-color);
  position: sticky;
  top: 0;
  background: var(--primary-background-color);
  z-index: 50;
}

.nav-brand {
  font-size: 1.1em;
  font-weight: 800;
  border-bottom: none !important;
}
.nav-brand:hover { opacity: 0.7; border-bottom: none !important; }

#themeSelector {
  background: var(--primary-background-color);
  color: var(--primary-text-color);
  border: 1px solid var(--primary-highlight-color);
  border-radius: 4px;
  font-size: 0.72em;
  padding: 4px 8px;
  cursor: pointer;
  font-family: 'Fira Code', monospace;
}

/* ── 홈 히어로 ── */
.home-hero {
  text-align: center;
  padding: 80px 20px 48px;
}
.home-hero h1 {
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.home-sub {
  opacity: 0.45;
  font-size: 0.95em;
  margin: 0;
}

/* ── 홈 프로젝트 그리드 ── */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  width: 90%;
  max-width: 860px;
  margin: 0 auto 100px;
}

.proj-grid .proj-card {
  padding: 32px 28px;
  min-height: 130px;
}
.proj-grid .card-name {
  font-size: clamp(1.1rem, 3.5vw, 1.3rem);
}

/* ── 폴더 내 카드 그리드 (서브폴더) ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0 0 32px;
}

.proj-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 18px;
  background: var(--primary-highlight-color);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: border-color 0.15s, transform 0.15s;
  border-bottom: none !important;
  min-height: 90px;
}
.proj-card:hover {
  border-color: var(--primary-text-color);
  transform: translateY(-2px);
}

.card-name {
  font-weight: 800;
  font-size: 1rem;
  word-break: break-word;
  line-height: 1.3;
}
.card-meta {
  font-size: 0.72em;
  opacity: 0.4;
  font-family: 'Fira Code', monospace;
  margin-top: auto;
}

/* ── 페이지 래퍼 ── */
.page-wrap {
  width: 90%;
  max-width: 860px;
  margin: 40px auto 100px;
  /* min-width: 0 은 flex 자식일 때 필요하지만 여기선 block */
}

/* 폴더 내 카드는 100% */
.page-wrap .card-grid {
  width: 100%;
  margin: 0 0 32px;
}

/* ── Breadcrumb ── */
.breadcrumb {
  font-family: 'Fira Code', monospace;
  font-size: 0.78em;
  opacity: 0.5;
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.breadcrumb a { border-bottom: none; }
.breadcrumb a:hover { border-bottom: 1px solid var(--primary-text-color); }

/* ── 디렉터리 제목 ── */
.dir-title {
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 800;
  margin: 0 0 28px;
  border-bottom: 2px solid var(--primary-text-color);
  padding-bottom: 10px;
  letter-spacing: -0.01em;
}

/* ── 문서 목록 ── */
.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.doc-list li {
  border-bottom: 1px solid var(--primary-highlight-color);
}
.doc-list li a {
  display: block;
  padding: 18px 4px;
  border-bottom: none !important;
  opacity: 0.85;
  font-size: 1.05rem;
  transition: opacity 0.1s, padding-left 0.1s;
}
.doc-list li a:hover {
  opacity: 1;
  padding-left: 12px;
}

/* ── 뒤로가기 ── */
.back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 0.85em;
  opacity: 0.5;
  border-bottom: none !important;
}
.back-link:hover { opacity: 1; }

/* ── 본문 타이포그래피 ── */
h1 { font-size: 2.2em; font-weight: 800; line-height: 1.3; margin: 0 0 12px; letter-spacing: -0.01em; }
h2 { font-size: 1.6em; font-weight: 700; margin: 52px 0 18px; border-bottom: 1px solid var(--primary-highlight-color); padding-bottom: 8px; }
h3 { font-size: 1.3em; font-weight: 700; margin: 36px 0 12px; }
h4 { font-size: 1.1em; font-weight: 700; margin: 24px 0 8px; }
p  { margin: 0 0 20px; letter-spacing: 0.01em; }

ul, ol { padding-left: 1.5em; margin: 0 0 16px; }
li { line-height: 1.7; margin-bottom: 4px; }

blockquote {
  border-left: 3px solid var(--primary-text-color);
  margin: 24px 0;
  padding: 8px 20px;
  opacity: 0.7;
  font-style: italic;
}

table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.9em; }
th { border-bottom: 2px solid var(--primary-text-color); padding: 10px 14px; text-align: left; font-weight: 700; }
td { border-bottom: 1px solid var(--primary-highlight-color); padding: 10px 14px; }

img { max-width: 100%; border-radius: 4px; display: block; margin: 16px 0; }
hr  { border: none; border-top: 1px solid var(--primary-highlight-color); margin: 40px 0; }

/* ── 인라인 코드 ── */
p code, li code, td code {
  background: var(--primary-highlight-color);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Fira Code', monospace;
  font-size: 0.88em;
}

/* ── 코드 블록 (movingju.com 스타일) ── */
div.highlight {
  position: relative;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 6px;
  margin: 16px 0;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}

div.highlight .code-header {
  display: flex;
  align-items: center;
  background: #252526;
  padding: 5px 10px;
  border-bottom: 1px solid #3c3c3c;
  min-height: 30px;
}

div.highlight .copy-btn {
  background: transparent;
  border: 1px solid #555;
  color: #cccccc;
  font-size: 0.6em;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Fira Code', monospace;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
div.highlight .copy-btn:hover { background: #3c3c3c; }
div.highlight .copy-btn.copied { color: #4ec9b0; border-color: #4ec9b0; }

div.highlight pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: transparent !important;
  max-width: 100%;
  box-sizing: border-box;
}

div.highlight pre code {
  font-family: 'Fira Code', monospace;
  font-size: 0.88em;
  color: #d4d8e2;
  background: transparent !important;
  display: inline-block;
  min-width: 100%;
  padding: 0;
  line-height: 1.6;
  white-space: pre;
  overflow-x: visible;
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  body          { font-size: 17px; }
  .home-hero    { padding: 60px 24px 40px; }
  .proj-grid .proj-card { padding: 28px 22px; min-height: 110px; }
  .site-nav     { padding: 16px 5%; }
  .doc-list li a { font-size: 1.1rem; }
  h2 { font-size: 1.6em; }
  h3 { font-size: 1.3em; }
}

@media (max-width: 480px) {
  body          { font-size: 17px; }
  .home-hero    { padding: 48px 20px 32px; }
  .home-hero h1 { font-size: 2.6rem; }
  .proj-grid    { grid-template-columns: 1fr; gap: 14px; margin-bottom: 60px; }
  .card-grid    { grid-template-columns: 1fr 1fr; gap: 12px; }
  .page-wrap    { width: 92%; margin-top: 28px; }
  .dir-title    { font-size: 1.8rem; margin-bottom: 24px; }
  .doc-list li a { padding: 24px 4px; font-size: 1.1rem; }
  .proj-card    { padding: 24px 18px; }
  .card-name    { font-size: 1.1rem; }
  .card-meta    { font-size: 0.8rem; }
  h1 { font-size: 2.2em; }
  h2 { font-size: 1.65em; }
  h3 { font-size: 1.35em; }
  .site-nav     { padding: 14px 4%; }
  .nav-brand    { font-size: 1.2rem; }
}

@media (max-width: 360px) {
  body          { font-size: 24px; }
  .card-grid    { grid-template-columns: 1fr; }
  .page-wrap    { width: 94%; }
}