/*
Theme Name: Paperline
Theme URI: https://github.com/
Author: Paperline
Description: Minimal, fast, SEO/AdSense-friendly blog theme. Content-first editorial layout, no page-builder bloat. Shared by the KR and Global sites (language/site title set per-install in WordPress settings, not in the theme).
Version: 0.3.5
Requires at least: 6.0
Requires PHP: 7.4
License: Unlicense
Text Domain: paperline
*/

@font-face {
  font-family: "Pretendard";
  src: url("assets/fonts/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("assets/fonts/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("assets/fonts/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("assets/fonts/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Display";
  src: url("assets/fonts/Fraunces-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Display";
  src: url("assets/fonts/Fraunces-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Display";
  src: url("assets/fonts/Fraunces-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #faf8f4;
  --bg-deep: #f3f0e9;
  --fg: #191a1c;
  --muted: #6b6a64;
  --border: #e6e2d8;
  --accent: #1c3a58;
  --accent-bright: #2c5a86;
  --accent-soft: #e8edf2;
  --panel: #f2efe8;
  --card: #fffefb;
  --serif: "Fraunces Display", ui-serif, Georgia, "Noto Serif KR", serif;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --max-width: 1100px;
  --content-width: 720px;
  --shadow-1: 0 1px 2px rgba(28, 58, 88, .04);
  --shadow-2: 0 2px 8px rgba(28, 58, 88, .07);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --bg-deep: #101114;
    --fg: #eceae4;
    --muted: #9b998f;
    --border: #2c2d31;
    --accent: #8fb6dc;
    --accent-bright: #a9c9e8;
    --accent-soft: #1f2a35;
    --panel: #1d1e22;
    --card: #1b1c20;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .4);
  }
}

/* ---------- 2026-08-08 현대화 ----------

   한국어 화면에서 이 테마가 낡아 보인 이유는 배색이 아니라 글꼴이었다.
   제목에 쓰는 Fraunces에는 한글 글리프가 없어서 Noto Serif KR(명조)로
   떨어지고, 한글 명조 제목은 신문 지면처럼 읽힌다. 한국어 사이트에서는
   제목도 Pretendard로 통일하고 자간을 조인다. 영문(seemeplz)은 Fraunces가
   제대로 나오므로 그대로 둔다 - html[lang]으로 갈라 쓴다.

   나머지는 평평하게: 배경 그라디언트를 걷어내고, 모서리를 14px에서 10px로
   줄이고, 그림자를 얇게 한다. 두꺼운 카드와 큰 라운드가 2010년대 블로그의
   인상을 만든다. */

html[lang^="ko"] {
  --serif: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --radius: 10px;
}
html[lang^="ko"] h1,
html[lang^="ko"] h2,
html[lang^="ko"] h3,
html[lang^="ko"] .site-title,
html[lang^="ko"] .post-list-item h2,
html[lang^="ko"] article.single h1.entry-title {
  letter-spacing: -.025em;
  font-weight: 700;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.75;
  font-size: 17px;
}

a { color: var(--accent-bright); text-decoration: none; transition: color .15s ease; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:active { opacity: .75; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 { text-wrap: balance; }

/* 한글은 기본값(break-word)으로 두면 단어 한가운데서 줄이 바뀐다 - 목록에서
   "와이파이 비밀번호 확인 방법, 아 / 이폰·안드로이드"처럼 읽힌다(2026-08-08
   라이브 확인). keep-all은 띄어쓰기에서만 끊고, 띄어쓰기 없는 긴 토큰(주소
   등)은 overflow-wrap이 받아 준다. 영문 사이트(seemeplz)에는 영향이 없다 -
   영어는 어차피 공백에서 끊긴다. */
body, h1, h2, h3, h4, p, li, .site-tagline, .post-excerpt {
  word-break: keep-all;
  overflow-wrap: break-word;
}

::selection { background: var(--accent); color: var(--bg); }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem;
}
.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
.site-title {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.site-title a { color: var(--fg); }
.site-title a:hover { text-decoration: none; color: var(--accent-bright); }
.site-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .02em;
  position: relative;
  padding-bottom: .2rem;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-bright);
  transition: right .18s ease;
}
.site-nav a:hover {
  color: var(--fg);
  text-decoration: none;
}
.site-nav a:hover::after { right: 0; }

/* ---------- layout ---------- */

.layout {
  max-width: var(--max-width);
  margin: 2.75rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, var(--content-width)) 1fr;
  gap: 3.25rem;
  align-items: start;
}
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; gap: 2rem; margin-top: 1.75rem; }
}

main { min-width: 0; }

.page-heading {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 1.75rem;
}

/* ---------- post list ---------- */

.post-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--border);
}
.post-list-item:first-child { padding-top: .4rem; }
.post-list-item:last-child { border-bottom: none; }
.post-list-item h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: .4rem 0 .5rem;
  line-height: 1.34;
}
.post-list-item h2 a { color: var(--fg); transition: color .15s ease; }
.post-list-item h2 a:hover { text-decoration: none; }
.post-list-item:hover h2 a { color: var(--accent-bright); }
.post-list-thumb {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-list-item:hover .post-list-thumb {
  transform: translateY(-2px) scale(1.015);
  box-shadow: var(--shadow-2);
}
@media (max-width: 560px) {
  .post-list-item { grid-template-columns: 1fr; }
  .post-list-thumb { width: 100%; height: 168px; order: -1; }
}
.post-cat {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--accent-bright);
  background: var(--accent-soft);
  padding: .18rem .6rem;
  border-radius: 999px;
}
.post-cat a { color: inherit; }
.post-cat a:hover { text-decoration: none; }
.post-meta {
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.post-excerpt {
  color: var(--muted);
  font-size: .95rem;
  margin-top: .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-excerpt p { margin: 0; }

/* ---------- single post ---------- */

article.single h1.entry-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.3rem;
  letter-spacing: -.015em;
  line-height: 1.24;
  margin: 0 0 .7rem;
}
article.single .post-meta { margin-bottom: 1.6rem; }
.entry-thumbnail img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.entry-content { font-size: 1.06rem; max-width: 68ch; overflow-wrap: break-word; word-break: keep-all; }
.entry-content a { overflow-wrap: break-word; word-break: break-word; }
.entry-content > p:first-of-type {
  font-size: 1.12rem;
  line-height: 1.8;
}
.entry-content h2 {
  font-size: 1.4rem;
  margin-top: 2.6rem;
  font-weight: 700;
  letter-spacing: -.005em;
  padding-left: .8rem;
  border-left: 3px solid var(--accent-bright);
}
.entry-content h3 { font-size: 1.15rem; margin-top: 1.8rem; font-weight: 600; }
.entry-content p { margin: 1rem 0; }
.entry-content ul, .entry-content ol { padding-left: 1.4rem; }
.entry-content li { margin: .3rem 0; }
.entry-content img { border-radius: var(--radius); box-shadow: var(--shadow-1); }
.entry-content table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 1.4rem 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-size: .95rem;
}
.entry-content th, .entry-content td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--border); }
.entry-content tr:last-child td { border-bottom: none; }
.entry-content th { font-weight: 700; background: var(--panel); }
.entry-content tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel) 45%, transparent); }
.entry-content blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.3rem;
  border-left: 3px solid var(--accent-bright);
  border-radius: 0 10px 10px 0;
  background: var(--panel);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 1.05rem;
}
.entry-content blockquote p { margin: .2rem 0; }
.entry-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.2rem 0;
}

/* ---------- ad slot ---------- */

.ad-slot {
  margin: 1.8rem 0;
  padding: .5rem;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .07em;
}

/* ---------- sidebar ---------- */

aside.sidebar { font-size: .92rem; position: sticky; top: 5.2rem; }
aside.sidebar .widget {
  margin-bottom: 1.3rem;
  padding: 1.35rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
aside.sidebar .widget-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  margin-bottom: .9rem;
}
aside.sidebar ul { list-style: none; margin: 0; padding: 0; }
aside.sidebar li { padding: .3rem 0; }
aside.sidebar a { color: var(--muted); }
aside.sidebar a:hover { color: var(--accent-bright); text-decoration: none; }
aside.sidebar input[type="search"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .7rem;
  background: var(--bg);
  color: var(--fg);
  transition: border-color .15s ease;
}
aside.sidebar input[type="search"]:focus { border-color: var(--accent-bright); outline: none; }
aside.sidebar input[type="submit"],
aside.sidebar button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .5rem .9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .12s ease, opacity .15s ease;
}
aside.sidebar input[type="submit"]:hover,
aside.sidebar button:hover { opacity: .88; }
aside.sidebar input[type="submit"]:active,
aside.sidebar button:active { transform: scale(.97); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
  padding: 2.4rem 1.5rem;
  margin-top: 4rem;
}
.site-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--muted);
  font-size: .85rem;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent-bright); }

/* ---------- tags / pagination / related ---------- */

.tags { margin-top: 1.8rem; }
.tags a {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-bright);
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  margin: 0 .4rem .4rem 0;
  transition: background .15s ease, color .15s ease;
}
.tags a:hover { background: var(--accent); color: #fff; text-decoration: none; }

.pagination { margin-top: 2.4rem; display: flex; gap: .8rem; }
.pagination a {
  padding: .55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  font-size: .88rem;
  font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.pagination a:hover {
  border-color: var(--accent-bright);
  color: var(--accent-bright);
  text-decoration: none;
  transform: translateY(-1px);
}

.related-posts { margin-top: 3rem; padding: 1.4rem 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.related-posts h2 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin: 0 0 .6rem; }
/* 제목만 나열한 목록은 각주처럼 읽혀서 그냥 지나친다. 썸네일을 붙인
   카드로 바꿔 클릭할 것이 있다는 게 보이게 한다. */
.related-posts ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem;
}
.related-posts a {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--bg);
  color: var(--fg); font-weight: 500;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.related-posts a:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: var(--shadow-1); text-decoration: none;
}
/* 비율은 img에 직접 준다. 바깥 span에 aspect-ratio를 주고 img에 height:100%를
   주면 둘이 서로 크기를 물어보다 원본 비율로 늘어난다 - 세로형 인포그래픽
   (242×300)이 379px 높이 카드가 됐다(2026-08-08 확인).
   자를 때는 위를 남긴다. 인포그래픽은 제목이 맨 위에 있다. */
.related-thumb { display: block; width: 100%; background: var(--bg-deep); }
.related-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.related-title {
  display: block; padding: .7rem .85rem .8rem;
  font-size: .95rem; line-height: 1.45; word-break: keep-all;
}
/* 썸네일이 없는 글(seemeplz)은 빈 회색 상자 대신 제목만 큰 카드로. */
.related-card.is-textonly .related-title { padding: 1rem .9rem; font-size: 1rem; }
@media (max-width: 560px) {
  .related-posts ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- reading progress (pure CSS, single posts) ---------- */

@supports (animation-timeline: scroll()) {
  body.single::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: var(--accent-bright);
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 100;
    animation: af-progress linear;
    animation-timeline: scroll(root);
  }
  @keyframes af-progress {
    to { transform: scaleX(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   2026-08-08 전면 개편

   레퍼런스는 토스 피드(한국어 타이포·여백)와 Linear·Stripe(색 절제·계층).
   세 곳의 공통점이 그대로 원칙이 됐다 - 산세리프 하나, 채도 낮은 중립색에
   강조색 하나, 박스 대신 여백으로 위계, 읽는 화면은 단일 칼럼.

   앞선 규칙들을 캐스케이드로 덮는 자리라 파일 맨 끝에 둔다. 위쪽을 수술하는
   것보다 여기서 최종값을 선언하는 쪽이 되돌리기도 쉽다.
   ========================================================================== */

:root {
  --bg: #fff;
  --bg-deep: #f7f8fa;
  --fg: #14161a;
  --muted: #6b7280;          /* 웜그레이에서 쿨그레이로. 크림 배경을 걷어낸 짝 */
  --border: #e8eaed;
  --accent: #2b6ef6;
  --accent-bright: #1d4ed8;
  --accent-soft: #eef4ff;
  --panel: #f7f8fa;
  --card: #fff;
  --radius: 12px;
  --shadow-1: none;
  --shadow-2: 0 4px 16px rgba(20, 22, 26, .07);
  --max-width: 1080px;
  --content-width: 760px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0e11; --bg-deep: #08090b; --fg: #e9eaec; --muted: #8b8f98;
    --border: #22242a; --accent: #5b8dff; --accent-bright: #7aa5ff;
    --accent-soft: #16202f; --panel: #14161a; --card: #101216;
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
  }
}

/* Fraunces에는 한글 글리프가 없다. 한국어 사이트에서 제목이 명조로 떨어지는
   것이 이 테마가 낡아 보인 가장 큰 이유였다. 영문(seemeplz)은 Fraunces가
   제대로 나오므로 그대로 둔다 - 두 브랜드를 가르는 요소로 쓴다. */
html[lang^="ko"] {
  --serif: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
html[lang^="ko"] h1,
html[lang^="ko"] h2,
html[lang^="ko"] h3,
html[lang^="ko"] .site-title,
html[lang^="ko"] .post-list-item h2,
html[lang^="ko"] article.single h1.entry-title { font-weight: 700; }

body { background: var(--bg); font-size: 17px; line-height: 1.7; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner { padding-top: 1rem; padding-bottom: 1rem; }
.site-title { font-size: 1.28rem; font-weight: 700; letter-spacing: -.025em; }
.site-nav a { font-size: .92rem; color: var(--muted); font-weight: 500; }
.site-nav a:hover { color: var(--fg); text-decoration: none; }

/* 태그라인은 히어로가 아니라 보조 문구다. 크게 두면 첫 글까지 스크롤이 든다. */
.page-heading { font-size: .84rem; font-weight: 500; color: var(--muted); margin-bottom: 2.4rem; line-height: 1.6; }

/* 썸네일 칸은 auto다. 고정 폭으로 두면 이미지가 없는 사이트(seemeplz)에서
   빈 칸이 자리를 먹어 제목이 눌린다(2026-08-08 확인). */
.post-list-item { grid-template-columns: minmax(0, 1fr) auto; gap: 1.8rem; padding: 2.3rem 0; align-items: start; }
.post-list-item h2 { font-size: 1.62rem; letter-spacing: -.03em; line-height: 1.31; margin: .5rem 0 .55rem; }
.post-list-thumb { width: 168px; height: 126px; border-radius: 12px; border: 1px solid var(--border); box-shadow: none; }
.post-list-item:hover .post-list-thumb { transform: none; box-shadow: var(--shadow-2); }
.post-excerpt { color: var(--muted); font-size: .97rem; line-height: 1.68; }
.post-meta { font-size: .82rem; color: var(--muted); }

/* 읽는 화면 사이드바에는 검색창도 Recent Posts도 두지 않는다(그게 낡은
   신호였다). 대신 넓은 화면에서만 목차를 오른쪽에 고정한다. 본문 폭은
   720px 그대로 — 폭을 넓히려는 게 아니라 목차를 따라오게 하는 것이다. */
.layout:has(article.single) { grid-template-columns: minmax(0, 1fr) 260px; max-width: 1040px; align-items: start; }
.layout:has(article.single) main { max-width: 720px; }
.layout:has(article.single) .sidebar { position: sticky; top: 5rem; }
/* 목차가 옮겨오기 전이거나 광고 슬롯도 위젯도 없으면 빈 컬럼이 남는다. */
.layout:has(article.single) .sidebar:not(:has(*)) { display: none; }
@media (max-width: 1100px) {
  .layout:has(article.single) { grid-template-columns: minmax(0, 1fr); max-width: 768px; }
  .layout:has(article.single) main { max-width: none; }
  .layout:has(article.single) .sidebar { display: none; }
}

/* 사이드바로 옮겨간 목차는 본문 안에 있을 때보다 작고 조용하게. */
.sidebar div#ez-toc-container { margin: 0; padding: .9rem 1rem; max-height: calc(100vh - 8rem); overflow-y: auto; }
.sidebar div#ez-toc-container nav ul li a { font-size: .88rem !important; line-height: 1.75; }

/* 설정 경로와 명령어(services.msc 같은 것)가 줄글에 섞이면 안 보인다. */
.entry-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--accent-soft);
  color: var(--fg);
  padding: .12em .42em;
  border-radius: 5px;
}
.entry-content pre code { background: none; padding: 0; }

article.single h1.entry-title { font-size: 2.6rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.21; margin: 0 0 .9rem; }
article.single .entry-content { font-size: 1.09rem; line-height: 1.85; max-width: none; }
.entry-content h2 { font-size: 1.5rem; letter-spacing: -.026em; margin-top: 3rem; }
.entry-content h3 { letter-spacing: -.02em; }
.entry-content a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.entry-content table { border-radius: 12px; overflow: hidden; font-size: .96rem; }
.related-posts { border-top: 1px solid var(--border); padding-top: 2rem; margin-top: 3.5rem; }
.sidebar .widget { border-radius: 12px; }

/* 목차(Easy Table of Contents)는 플러그인 기본 회색 상자로 나온다. 본문
   한가운데 남의 디자인이 끼어 있는 꼴이라 테마 토큰으로 다시 칠한다. */
/* 선택자에 div를 붙여 두는 건 멋이 아니다. 플러그인 Appearance 탭에서 색을
   지정하면 div#ez-toc-container로 규칙이 나가서(우선순위가 한 칸 높다) 테마
   색을 덮는다. seemeplz 목차가 연분홍 배경에 흰 글씨로 나와 안 읽혔다
   (2026-08-08 확인). 사이트마다 플러그인 설정을 맞추는 대신 테마가 이긴다. */
div#ez-toc-container {
  /* --bg-deep은 --bg와 거의 같은 값이라(라이트 #f7f8fa vs #fff, 다크 #08090b vs
     #0d0e11) 패널에 쓰면 배경과 구분이 안 된다. 실제로 목차가 흰 상자로 읽혔다
     (2026-08-08 사용자 확인). 강조색 계열로 칠하고 왼쪽에 띠를 둬서 본문 흐름
     안의 '참고 상자'로 분명히 보이게 한다. */
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  box-shadow: none;
  padding: 1.05rem 1.3rem;
  width: 100%;
}
div#ez-toc-container .ez-toc-title {
  font-family: var(--sans);
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: uppercase;
}
div#ez-toc-container nav ul { margin: .5rem 0 0; }
div#ez-toc-container nav ul li a { color: var(--fg); font-size: .95rem !important; line-height: 1.9; }
div#ez-toc-container nav ul li a:hover { color: var(--accent-bright); }
div#ez-toc-container .ez-toc-icon-toggle-span svg { fill: var(--muted) !important; color: var(--muted) !important; }

@media (max-width: 880px) {
  .post-list-thumb { width: 116px; height: 88px; }
  .post-list-item { gap: 1.1rem; }
  .post-list-item h2 { font-size: 1.3rem; }
  article.single h1.entry-title { font-size: 1.95rem; letter-spacing: -.03em; }
}