/*
 * modern.css — "Tech · Minimal · Green" 브랜드 오버라이드 레이어
 *
 * poole.css / lanyon.css / syntax.css 다음에 마지막으로 로드되어
 * 색·타이포·여백·컴포넌트를 브랜드 팔레트로 덮는다. 마크업은 변경하지 않는다.
 *
 * 디자인 방향: flat (그림자·그라디언트 제거), 미니멀, 넉넉한 여백.
 * 라이트가 기준 팔레트이고, 다크는 Circuit Green을 기반으로 변형해 시스템 외관에 연동한다.
 * 헤더(사이드바)·푸터·코드블록은 라이트/다크 공통으로 Obsidian Black 다크 크롬을 유지한다.
 */

/* ----------------------------------------------------------------------------
 * 팔레트 (라이트) — 브랜드 기준색
 * ------------------------------------------------------------------------- */
:root {
  --color-bg:           #FFFFFF;            /* Pure White — 본문 배경 */
  --color-section:      #EFEFEF;            /* Cloud — 섹션/뱃지 배경 */
  --color-row:          #F7F7F7;            /* 표 zebra (section보다 옅게) */
  --color-text:         #0D0D0D;            /* Obsidian Black — 본문 텍스트 */
  --color-subtext:      #6B6B6B;            /* Steel Gray — 날짜·태그 등 보조 텍스트 */
  --color-border:       #C2C2C2;            /* Mist — 구분선/테두리 */
  --color-accent:       #1DB954;            /* Circuit Green — 링크/CTA/액센트 */
  --color-accent-hover: #0A7A3B;            /* Deep Forest — hover/active */
  --color-accent-soft:  rgba(29, 185, 84, .10); /* 액센트 옅은 틴트 */
  --color-dark:         #0D0D0D;            /* 다크 크롬 — 헤더/푸터 배경 */
  --color-on-dark:      #FFFFFF;            /* 다크 크롬 위 텍스트/아이콘 */

  --color-code-bg:      #0D0D0D;            /* 코드블록 배경 (터미널 느낌) */
  --color-code-text:    #1DB954;            /* 인라인 코드 텍스트 (터미널 그린) */
  --color-code-base:    #D6DCD4;            /* 코드블록 비토큰 텍스트 (다크 위 가독) */

  --selection:          rgba(29, 185, 84, .18);

  /* 폰트: 시스템 폰트 스택 유지 (Pretendard는 한글 본문 우선, 이후 시스템 폴백) */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Monaco,
               "Cascadia Code", "Courier New", monospace;
}

/* ----------------------------------------------------------------------------
 * 팔레트 (다크) — Circuit Green 기반 변형, 시스템 외관 연동
 * 다크 크롬(헤더/푸터/코드)은 라이트와 동일하게 Obsidian Black 유지한다.
 * ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #0D0D0D;
    --color-section:      #161616;
    --color-row:          #141414;
    --color-text:         #EFEFEF;
    --color-subtext:      #9A9A9A;
    --color-border:       #2A2A2A;
    --color-accent:       #1DB954;
    --color-accent-hover: #3FD673;          /* 다크에선 hover를 더 밝게 */
    --color-accent-soft:  rgba(29, 185, 84, .16);
    --color-dark:         #0D0D0D;
    --color-on-dark:      #FFFFFF;

    --color-code-bg:      #000000;           /* 페이지 배경과 구분되도록 더 어둡게 */
    --color-code-text:    #1DB954;
    --color-code-base:    #D6DCD4;

    --selection:          rgba(29, 185, 84, .26);
  }
}

/* ----------------------------------------------------------------------------
 * 기반 타이포그래피
 * ------------------------------------------------------------------------- */
html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 38rem) {
  html { font-size: 18px; }
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.7;                          /* 넉넉한 본문 행간 */
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s ease, color .3s ease;
}

::selection { background: var(--selection); }

p { margin-bottom: 1.2rem; }
p, li, td, th { color: var(--color-text); overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1, h2 { font-weight: 800; }
h3, h4, h5, h6 { font-weight: 700; }
h2 { margin-top: 2.4rem; }
h3 { margin-top: 1.9rem; }

strong { color: var(--color-text); font-weight: 700; }

/* ----------------------------------------------------------------------------
 * 링크 — Circuit Green, 밑줄 없음 (색으로만 구분)
 * ------------------------------------------------------------------------- */
a,
.container a,
.content a,
.post-title a,
.related-posts li a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover,
a:focus,
.content a:hover,
.content a:focus {
  color: var(--color-accent-hover);
  text-decoration: none;
}

/* ----------------------------------------------------------------------------
 * 구분선
 * ------------------------------------------------------------------------- */
hr {
  margin: 2.6rem 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* 인용 — flat, 섹션 배경 + 액센트 좌측 바 */
blockquote {
  margin: 1.6rem 0;
  padding: .7rem 1.3rem;
  color: var(--color-subtext);
  background: var(--color-section);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
}
@media (min-width: 30rem) {
  blockquote { padding-right: 1.3rem; }
}

/* 이미지 — flat, 가는 테두리만 */
img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.4rem 0;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

/* ----------------------------------------------------------------------------
 * 표
 * ------------------------------------------------------------------------- */
table {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
td, th { border: 0; border-bottom: 1px solid var(--color-border); }
th {
  background: var(--color-section);
  color: var(--color-text);
  font-weight: 700;
  text-align: left;
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th { background-color: var(--color-row); }
tbody tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------------------------
 * 코드 — 항상 다크 배경(터미널 느낌). syntax.css 토큰을 다크용으로 항상 덮는다.
 * ------------------------------------------------------------------------- */
code, pre, .highlight { font-family: var(--font-mono); }

/* 인라인 코드 — 터미널 그린 */
code {
  padding: .14em .42em;
  font-size: .86em;
  color: var(--color-code-text);
  background-color: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
/* 코드블록 — 다크 배경 + 밝은 기본 텍스트(토큰은 아래에서 색 지정) */
pre {
  margin: 1.4rem 0;
  padding: 1.1rem 1.25rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--color-code-base);
  background-color: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow-x: auto;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
}
pre code {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 100%;
}
.highlight {
  margin: 1.4rem 0;
  border-radius: 12px;
  color: var(--color-code-base);
  background-color: var(--color-code-bg);
}
.highlight pre { margin: 0; border: 0; }

/*
 * 신택스 토큰 — 코드블록이 라이트/다크 모두에서 다크 배경이므로
 * 밝은 글자 기준 팔레트를 항상 적용한다(과거 dark-only 블록을 승격).
 */
.highlight .c,  .highlight .c1, .highlight .cm,
.highlight .cs, .highlight .cp { color: #76857A; font-style: italic; }   /* 주석 */
.highlight .k,  .highlight .kc, .highlight .kd,
.highlight .kn, .highlight .kp, .highlight .kr { color: #7FB0E0; }        /* 키워드 */
.highlight .kt { color: #5FC8C0; }                                       /* 타입 */
.highlight .o,  .highlight .ow { color: #B7C2B6; }                       /* 연산자 */
.highlight .nt { color: #79B8E8; }                                       /* 태그 */
.highlight .na { color: #9CCBE8; }                                       /* 속성 */
.highlight .nb, .highlight .bp, .highlight .nc,
.highlight .nn, .highlight .no { color: #5FD0A8; }                        /* 빌트인/클래스/네임스페이스 */
.highlight .nf { color: #C99BE8; }                                       /* 함수 */
.highlight .nv, .highlight .vc, .highlight .vg,
.highlight .vi { color: #8FD9C4; }                                       /* 변수 */
.highlight .s,  .highlight .s1, .highlight .s2, .highlight .sb,
.highlight .sc, .highlight .sd, .highlight .sh, .highlight .sx,
.highlight .se, .highlight .si, .highlight .sr { color: #E69977; }        /* 문자열 */
.highlight .m,  .highlight .mf, .highlight .mh,
.highlight .mi, .highlight .mo, .highlight .il { color: #E8B06B; }        /* 숫자 */
.highlight .ss { color: #E8C85F; }                                       /* 심볼 */
.highlight .gh, .highlight .gu { color: #A6DAAA; }                        /* 헤딩 */
.highlight .gp { color: var(--color-accent); }                           /* 프롬프트 → 터미널 그린 */
.highlight .go { color: #9A9A9A; }                                       /* 출력 */
.highlight .err { color: #E66; background: transparent; }                /* 에러 */

/* ----------------------------------------------------------------------------
 * 레이아웃 — 컨테이너 / 마스트헤드
 * ------------------------------------------------------------------------- */
@media (min-width: 56rem) {
  .container { max-width: 40rem; }
}

.masthead {
  padding-top: 2rem;
  padding-bottom: 1.4rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--color-border);
}
.masthead-title {
  color: var(--color-text);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.masthead-title a { color: var(--color-text); }
.masthead-title a:hover { color: var(--color-accent); text-decoration: none; }
.masthead-title small {
  display: inline-block;
  margin-left: .1rem;
  color: var(--color-subtext);
  font-size: 64%;
  font-weight: 500;
  letter-spacing: 0;
}
/* 좌측 액센트 바 (데스크톱) */
@media (min-width: 48rem) {
  .masthead-title {
    padding-left: .95rem;
    border-left: 4px solid var(--color-accent);
  }
}

/* ----------------------------------------------------------------------------
 * 사이드바 = 헤더/네비 — Obsidian Black 다크 크롬 (flat, 라이트/다크 공통)
 * ------------------------------------------------------------------------- */
.sidebar {
  font-family: var(--font-sans);
  color: rgba(255, 255, 255, .66);
  background-color: var(--color-dark);
}
.sidebar a { color: var(--color-on-dark); }
.sidebar-nav-item.active,
a.sidebar-nav-item:hover,
a.sidebar-nav-item:focus {
  background-color: rgba(255, 255, 255, .08);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

/* 푸터(저작권) — 다크 크롬 위 보조 텍스트 */
.sidebar-item p { color: rgba(255, 255, 255, .55); }

/* 토글 버튼 — flat, 그림자 제거 + masthead 제목 라인과 세로 중앙 정렬 */
.sidebar-toggle {
  /* 제목(h3) 세로 중앙(≈padding-top 2rem + 제목높이 절반)에서 버튼높이 절반을 뺀 위치.
     모든 값이 rem 기반이라 모바일·데스크톱 모두 같은 비율로 맞는다. */
  top: 1.9rem;
  color: var(--color-accent);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: none;
}
.sidebar-toggle:active,
#sidebar-checkbox:checked ~ .wrap .sidebar-toggle {
  color: var(--color-on-dark);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ----------------------------------------------------------------------------
 * 홈 상단 소개(헤더) — 첫 방문자에게 블로그 정체성 전달
 * ------------------------------------------------------------------------- */
.home-intro {
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-border);
}
.home-intro-tagline {
  margin: 0 0 .6rem;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--color-text);
  word-break: keep-all;   /* 한글 단어 단위 줄바꿈 — 모바일에서 어색하게 끊기지 않게 */
}
.home-intro-desc {
  margin: 0 0 .9rem;
  color: var(--color-subtext);
  line-height: 1.6;
  word-break: keep-all;
}
.home-intro-links {
  margin: 0;
}
.home-intro-links a {
  font-weight: 600;
  color: var(--color-accent);
}
.home-intro-links a:hover { color: var(--color-accent-hover); text-decoration: none; }
@media (min-width: 48rem) {
  .home-intro-tagline { font-size: 2rem; }
}

/* ----------------------------------------------------------------------------
 * 추천 글 섹션 (홈) — 수동 큐레이션(featured: true)
 * ------------------------------------------------------------------------- */
.featured {
  margin-bottom: 2.5rem;
}
.featured-title {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.featured-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.featured-item { margin: 0; }
.featured-link {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem;
  background: var(--color-section);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: border-color .15s ease, background-color .15s ease;
}
.featured-link:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}
.featured-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--color-dark);
}
.featured-body { min-width: 0; }   /* flex 자식 텍스트 줄바꿈 허용 */
.featured-post-title {
  display: block;
  font-weight: 700;
  color: var(--color-text);
}
.featured-desc {
  display: block;
  margin-top: .25rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--color-subtext);
  word-break: keep-all;
}

/* ----------------------------------------------------------------------------
 * 언어 필터 토글 (홈) — data-lang 기반 클라이언트 필터
 * ------------------------------------------------------------------------- */
.lang-filter {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.5rem;
}
.lang-filter-btn {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .3rem .85rem;
  color: var(--color-subtext);
  background: var(--color-section);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.lang-filter-btn:hover { color: var(--color-text); }
.lang-filter-btn.is-active {
  color: var(--color-on-dark);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.lang-filter-empty {
  padding: 1.5rem 0;
  color: var(--color-subtext);
}

/* ----------------------------------------------------------------------------
 * About 페이지 — 히어로 배너
 * ------------------------------------------------------------------------- */
.about-hero {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin: .5rem 0 2rem;
}

/* ----------------------------------------------------------------------------
 * 포스트 목록 / 본문
 * ------------------------------------------------------------------------- */
.page-title,
.post-title,
.post-title a { color: var(--color-text); }

.post-title {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
}
.posts .post-title { font-size: 1.62rem; }
.post-title a { transition: color .2s ease; }
.posts .post-title a:hover { color: var(--color-accent); text-decoration: none; }

/* 날짜 — 보조 텍스트 + 액센트 마커 */
.post-date {
  margin-top: 0;
  margin-bottom: 1.1rem;
  color: var(--color-subtext);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.post-date::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .55rem;
  vertical-align: baseline;
  background: var(--color-accent);
  border-radius: 2px;
  transform: rotate(45deg) translateY(-1px);
}

.posts .post {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--color-border);
}
.posts .post:last-child { border-bottom: 0; }

/* 연관 글 */
.related { border-top: 1px solid var(--color-border); }
.related-posts li { margin-bottom: .35rem; }
.related-posts li a { color: var(--color-text); }
.related-posts li a:hover { color: var(--color-accent); }
.related-posts li small { color: var(--color-subtext); }

/* ----------------------------------------------------------------------------
 * 페이지네이션 — 번호식 (활성/hover = CTA 그린)
 * ------------------------------------------------------------------------- */
.pagination {
  font-family: var(--font-sans);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin: 3.5rem 0 1rem;
}
.pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;       /* poole/lanyon의 width:50% · float:left 무력화 */
  float: none;
  width: auto;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .55rem;
  color: var(--color-subtext);
  font-weight: 600;
  font-size: .9rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
a.pagination-item {
  color: var(--color-accent);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
a.pagination-item:hover {
  color: var(--color-on-dark);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  text-decoration: none;
}
a.pagination-item:active { transform: translateY(1px); }
.pagination-item.is-current {
  color: var(--color-on-dark);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.pagination-item.is-disabled {
  opacity: .4;
  border-style: dashed;
}
.pagination-item.nav-prev,
.pagination-item.nav-next { font-size: 1.15rem; line-height: 1; }
.pagination-ellipsis {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 1.6rem;
  height: 2.4rem;
  padding-bottom: .35rem;
  color: var(--color-subtext);
}

/* ----------------------------------------------------------------------------
 * 버튼 / CTA — 마크업에 .btn/button이 추가될 때를 위한 브랜드 기본형
 * ------------------------------------------------------------------------- */
.btn,
button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1.1rem;
  color: var(--color-on-dark);
  font-family: var(--font-sans);
  font-weight: 600;
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.btn:hover,
button:hover,
input[type="submit"]:hover {
  color: var(--color-on-dark);
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  text-decoration: none;
}

/* ----------------------------------------------------------------------------
 * 태그 / 뱃지 — 배경 Cloud, 텍스트 Steel Gray, 액센트형은 Circuit Green
 * ------------------------------------------------------------------------- */
.tag,
.badge {
  display: inline-block;
  padding: .15rem .6rem;
  color: var(--color-subtext);
  font-size: .78rem;
  font-weight: 600;
  background-color: var(--color-section);
  border-radius: 999px;
}
.tag--accent,
.badge--accent {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

/* ----------------------------------------------------------------------------
 * 메시지 / 광고 영역
 * ------------------------------------------------------------------------- */
.message {
  color: var(--color-subtext);
  background-color: var(--color-section);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
ins.adsbygoogle { background: transparent; }

/* ----------------------------------------------------------------------------
 * 모션 — 홈 진입 시 포스트 순차 등장 (접근성 고려)
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .posts .post {
    animation: post-rise .6s cubic-bezier(.22, .61, .36, 1) both;
  }
  .posts .post:nth-child(2) { animation-delay: .07s; }
  .posts .post:nth-child(3) { animation-delay: .14s; }
  .posts .post:nth-child(4) { animation-delay: .21s; }
  .posts .post:nth-child(5) { animation-delay: .28s; }

  @keyframes post-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}