/* =================================================================
   built.css — magazine-home/tag/post.html 의 <style> 통합 (단일 파일).
   :root 토큰·클래스명은 시안 그대로. 새로 짓지 않음.
   ================================================================= */
:root {
  --bg-page: #ffffff;
  --surface: #ffffff;        /* 카드·패널·본문 표면 */
  --bg-block: #eaf1f8;
  --bg-soft: #f5f7fa;
  --border: #c8d2de;
  --divider: #eaf1f8;
  --navy: #002855;
  --navy-2: #0a3d75;
  --gold: #a07d2e;
  --gold-soft: #c9a635;
  --muted: #5a6478;
  --text: #1a1a1a;
  --fill: #002855;           /* 채움 버튼 배경 */
  --fill-hover: #0a3d75;
  --accent: #1f6feb;         /* 활성·강조용 블루 */
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  /* brand 영역 폭 — topbar-lead 가 항상 이 폭 (사이드바 접힘과 독립) */
  --brand-area-w: clamp(218px, 11.5vw, 276px);
  --sidebar-width: var(--brand-area-w);
  --topbar-h: 84px;  /* 두 줄 브랜드(serif 21px)에 맞춰 키움 */
}

/* ===== 다크 모드 — 변수 오버라이드 (html[data-theme="dark"]) ===== */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #121922;
  --surface: #1a2230;
  --bg-block: #243348;
  --bg-soft: #1f2936;
  --border: #34425a;
  --divider: #2a3648;
  --navy: #e8edf4;
  --navy-2: #aeb9c9;
  --gold: #cdac6c;
  --gold-soft: #dabf82;
  --muted: #8e9aad;
  --text: #d5dce7;
  --fill: #305fa6;
  --fill-hover: #3c71be;
  --accent: #5f99ff;
}

/* ===== 다크 모드 — 활성/대비 텍스트 보정 =====
   라이트에선 navy 배경 위 #fff 텍스트 패턴인데 다크에선 navy 가 거의 흰색으로 뒤집혀
   #fff 텍스트가 묻힘. fill(블루) 배경으로 전환해 대비 회복. */
html[data-theme="dark"] .sb-section h4,
html[data-theme="dark"] .lang-toggle button.active,
html[data-theme="dark"] .tag-chip.active {
  background: var(--fill);
  color: #fff;
  border-color: var(--fill);
}

/* 상단바 아이콘 버튼 — 다크에서 muted 회색이 묻힘 */
html[data-theme="dark"] .tb-iconbtn { color: var(--text); }
html[data-theme="dark"] .tb-iconbtn:hover {
  color: var(--accent);
  background: var(--bg-block);
  border-color: var(--accent);
}

/* 메인 영역과 사이드바 톤 분리 — 같은 --surface 라 다크에서 구분 안 됨 */
html[data-theme="dark"] .sidebar { background: var(--bg-soft); }
html[data-theme="dark"] .topbar { background: var(--bg-soft); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  height: 100%;
  box-sizing: border-box;
  padding-top: var(--topbar-h);   /* topbar 는 fixed — body 가 그만큼 padding 으로 자리 비움 */
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* body 자체 스크롤 차단 — 카드가 viewport 안에서 떠 있게 */
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }

/* =================  APP LAYOUT — 사이드바 + 본문 (2-pane, 독립 스크롤)  ================= */
.app {
  flex: 1 1 auto;       /* topbar 아래 남은 높이 전부 */
  min-height: 0;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  width: 100%;
  max-width: 2400px;
  margin: 0 auto;
  background: var(--bg-soft);  /* 둥근 카드 뒤 거터 */
}

/* =================  SIDEBAR — 모든 페이지 공통  ================= */
.sidebar {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;  /* 스크롤바 자리 항상 확보 — 페이지별 폭 흔들림 방지 */
  /* 좌우 동일 패딩 — 큰 화면에서 비율로 함께 커지되 26px 상한 */
  padding: 16px clamp(20px, 1.1vw, 26px) 18px;
  background: var(--bg-soft);  /* 거터와 같은 색 — 본문 카드만 도드라짐 */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 사이드바 상단 — 브랜드 + 접기/펴기 토글 */
.sb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.sb-head .sb-brand { flex: 1 1 auto; min-width: 0; }

.sb-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  transition: background 130ms, color 130ms, border-color 130ms;
}
.sb-toggle:hover { background: var(--bg-block); color: var(--navy); border-color: var(--border); }
.sb-toggle .ti { font-size: 18px; }
.sb-toggle .ic-closed { display: none; }
html.sidebar-collapsed .sb-toggle .ic-open { display: none; }
html.sidebar-collapsed .sb-toggle .ic-closed { display: flex; }

/* 사이드바 섹션 헤더 — h4(알약) + sb-toggle 같은 행 */
.sb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.sb-section-head h4 { margin-bottom: 0; }

/* 사이드바 접힘 — 얇은 레일 (데스크톱). sb-toggle 만 살아남음 */
@media (min-width: 769px) {
  html.sidebar-collapsed { --sidebar-width: 48px; }
  html.sidebar-collapsed .sidebar { padding: 4px 10px 18px; }
  /* h4(MENU 알약) 는 display:none — 공간 자체를 비워 sb-toggle 가운데 정렬되게 */
  html.sidebar-collapsed .sb-section-head > h4 { display: none; }
  /* 다른 항목은 opacity:0 — fade out (공간은 차지) */
  html.sidebar-collapsed .sb-section > a,
  html.sidebar-collapsed .sb-section + .sb-section,
  html.sidebar-collapsed .sb-footer {
    opacity: 0;
    pointer-events: none;
  }
  html.sidebar-collapsed .sb-section-head { justify-content: center; margin-bottom: 0; }
}

.sb-brand {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.14;
}

.sb-brand .dot { color: var(--navy); }

.sb-section h4 {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}

.sb-section a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  font-size: 15.5px;
  color: var(--muted);
  transition: color 180ms, background 180ms;
  border-radius: 5px;
}

.sb-section a:hover { color: var(--navy); }

.sb-section a.active {
  color: var(--navy);
  font-weight: 500;
  background: rgba(0, 40, 85, 0.05);
}

/* Notes 섹션 계층: parent(전체) 는 그대로, sub-items 는 dot 을 들여쓰기로 시각화 */
.sb-section a.sb-parent {
  color: var(--navy);
  font-weight: 500;
}

.sb-section a.sb-sub .cat-dot {
  margin-left: 18px;
}

.sb-section a.sb-sub {
  font-size: 14.5px;
}

.sb-section a .ti {
  font-size: 15px;
  width: 17px;
  text-align: center;
  color: inherit;
}

.sb-section a .count {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
}

.sb-section a.active .count { color: var(--navy); }

.cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cat-dot.all       { background: var(--muted); }
.cat-dot.invest    { background: var(--navy); }
.cat-dot.essays    { background: var(--gold); }
.cat-dot.notes     { background: var(--navy-2); }
.cat-dot.career    { background: #2d6a2d; }

/* 사이드바 푸터 — Subscribe(메인 CTA) + RSS 아이콘 버튼 */
.sb-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sb-subscribe {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--navy);
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 180ms;
}
.sb-subscribe:hover { background: var(--navy-2); color: #fff; }
.sb-subscribe .ti { font-size: 14px; }

.sb-rss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  transition: border-color 180ms, color 180ms;
}
.sb-rss:hover { border-color: var(--navy); color: var(--navy); }
.sb-rss .ti { font-size: 16px; }

/* =================  MAIN — 본문 카드 (거터 위에 떠 있음, 자체 스크롤)  ================= */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;  /* 본문 자체 스크롤 — 카드 모서리는 viewport 에 고정 */
  scrollbar-gutter: stable;  /* 스크롤바 자리 항상 확보 — 페이지별 가로 폭 흔들림 방지 */
  background: var(--surface);
  margin: 10px 12px 12px;  /* topbar 와 카드 사이 거터 확보 */
  padding-top: 28px;       /* 카드 안 위쪽 거터 — 모든 페이지에서 통일된 첫 콘텐츠 위치 */
  border: 1px solid var(--border);
  border-radius: 14px;
}

/* =================  TOP BAR — 전체 폭 (GitHub Docs 식)  ================= */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--topbar-h);
  padding-right: 22px;  /* 좌측 패딩은 .topbar-lead 가 자체 보유 */
  background: var(--bg-soft);
  /* 페이지 종류/콘텐츠 길이와 무관하게 viewport top 에 절대 고정 — y 좌표 항상 0 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

.topbar-lead {
  box-sizing: border-box;
  /* brand 영역은 사이드바 접힘과 독립 — 항상 펴진 폭 유지 */
  flex: 0 0 var(--brand-area-w);
  width: var(--brand-area-w);
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 clamp(14px, 0.9vw, 18px);
}

.topbar-brand {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.14;
  color: var(--navy);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.topbar-brand .dot { color: var(--navy); }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--navy);
  font-size: 20px;
  padding: 4px;
}

.search-wrap {
  flex: 0 1 320px;
  position: relative;
  max-width: 320px;
  margin-left: auto;  /* 우측 액션 묶음과 함께 우측 정렬 */
}

.search-wrap .ti-search {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  transition: border-color 180ms, background 180ms;
}

.search-input::placeholder { color: var(--muted); }

.search-input:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--surface);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.lang-toggle button {
  background: transparent;
  border: none;
  padding: 5px 10px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.lang-toggle button.active {
  background: var(--navy);
  color: #fff;
  font-weight: 500;
}

/* === 상단바 아이콘 버튼 (다크모드 토글 / Share 등) === */
.tb-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  transition: background 130ms, color 130ms, border-color 130ms;
}
.tb-iconbtn:hover { background: var(--bg-block); color: var(--navy); border-color: var(--border); }
.tb-iconbtn .ti { font-size: 16px; }
.tb-iconbtn .ic-dark { display: none; }
html[data-theme="dark"] .tb-iconbtn .ic-light { display: none; }
html[data-theme="dark"] .tb-iconbtn .ic-dark { display: inline-flex; }

/* === Share 드롭다운 (single.php 한정으로 노출) === */
.tb-share { position: relative; }
.tb-share-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 196px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.13);
  z-index: 50;
}
.tb-share-menu button,
.tb-share-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.tb-share-menu button:hover,
.tb-share-menu a:hover { background: var(--bg-soft); color: var(--navy); }
.tb-share-menu .ti { font-size: 15px; color: var(--muted); }

/* =================  TAG CHIP BAR  ================= */
/* tagbar — overflow 없음(클리핑 컨테이너 아님). 가로 스크롤 대신 wrap 으로
   화면 좁아져도 칩이 잘리지 않고 줄바꿈. 5개 카테고리라 wrap 거의 안 일어남.
   padding-top:0 — 카드 위쪽 거터는 .main 이 통일 처리 */
.tagbar {
  padding: 0 22px 6px;
  background: var(--surface);
}
.tagbar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tagbar::-webkit-scrollbar { display: none; }

.tag-chip {
  padding: 7px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--navy);
  transition: all 180ms;
}

.tag-chip:hover {
  border-color: var(--navy);
  background: var(--bg-block);
  color: var(--navy);
}

.tag-chip.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* =================  PAGE HEADER (home)  ================= */
.page-header { padding: 6px 22px 12px; }

.page-header .eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}

/* h1·설명문은 max-width 없이 전체 폭으로 한 줄 노출 */
.page-header h1 {
  font-family: var(--font-serif);
  font-size: 27px;
  line-height: 1.3;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

.page-header h1 .accent { color: var(--gold); }

.page-header p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

/* =================  CATEGORY HEADER (tag)  ================= */
.cat-header { padding: 6px 22px 12px; }

.cat-header .eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}

.cat-header h1 {
  font-family: var(--font-serif);
  font-size: 27px;
  line-height: 1.3;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.cat-header .post-count {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}

/* 도트 — 33 posts 바로 앞에 (카테고리 색) */
.cat-header .post-count::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.cat-header.cat-essays     .post-count::before { background: var(--gold); }
.cat-header.cat-notes      .post-count::before { background: var(--navy-2); }
.cat-header.cat-career     .post-count::before { background: #2d6a2d; }
.cat-header.cat-investment .post-count::before { background: var(--navy); }

.cat-header .cat-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

/* =================  CARDS GRID  ================= */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 16px 22px 56px;
}

.card {
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
  transition: box-shadow 220ms, transform 220ms;
}

.card:hover {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 14px 32px rgba(15, 23, 42, 0.10);
  transform: translateY(-3px);
}

.card > a { display: flex; flex-direction: column; height: 100%; }

.card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-block);
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-block);
}

.card-image-fallback .ti {
  font-size: 36px;
  color: var(--border);
}

/* time-ago badge — 흰 배경 / 연회색 테두리 / muted 글자.
   발행 1주일 초과 시 main.js 가 숨김 (기본 display:none, JS가 노출). */
.read-time {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.time-ago { display: none; }

.card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}

.card-title {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-excerpt {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: auto;
}

/* =================  PAGINATION  ================= */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 22px 56px;
}

.pagination a, .pagination span {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--muted);
}

.pagination .active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.pagination .of {
  border: none;
  color: var(--muted);
}

.pagination a:hover:not(.active) {
  border-color: var(--navy);
  color: var(--navy);
}

/* =================  POST CONTAINER  =================
   글 페이지 (post.hbs) — max-width 784 = 본문폭 720 + 좌우 padding 32×2.
   → breadcrumb·제목·커버 이미지·본문이 모두 같은 720 폭으로 가운데 정렬. */
.post-wrap {
  max-width: 784px;
  margin: 0 auto;
  /* padding-top:0 — 카드 안 위쪽 거터는 .main 이 통일 처리 */
  padding: 0 32px 60px;
  width: 100%;
}

/* About 등 정적 페이지 (page.hbs) — 좌정렬, 너무 넓지 않게 780 까지. */
.post-wrap.is-page {
  max-width: 780px;
  margin: 0;
  /* padding-top:0 — 카드 안 위쪽 거터는 .main 이 통일 처리 */
  padding: 0 22px 48px 44px;
}
.post-wrap.is-page .post-body,
.post-wrap.is-page .post-header h1 {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* =================  ABOUT 페이지 (page-about.hbs) ================= */
.post-wrap.is-page.about-page { max-width: 900px; }

/* Hero — 인사말(왼쪽) + 작가 카드(오른쪽) */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 36px;
  align-items: start;
  margin-bottom: 32px;
}
.about-hero .eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 14px;
}
.about-hero h1 {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.22;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.about-hero .lede {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
}

/* 작가 카드 — 흰 배경, 테두리 없음 */
.about-author-card {
  background: var(--surface);
  border: none;
  padding: 16px 4px 8px;
  text-align: center;
}
.about-author-card .avatar.avatar--xl {
  width: 125px;
  height: 125px;
  margin: 0 auto 14px;
  font-size: 36px;
  background: var(--surface);
  border: none;
}
.about-author-card .author-info .name {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
.about-author-card .author-info .role {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
.about-author-card .author-info .bio {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* 유지경성 박스 — 회색 배경 navy 좌측 보더 (다루는 주제 박스와 동일 톤) */
.box.about-idiom {
  padding: 22px 24px;
  margin: 28px 0;
  background: var(--bg-soft);
  border-left: 3px solid var(--navy);
}
.box.about-idiom .box-title {
  color: var(--navy);
  font-size: 16px;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  font-weight: 600;
}
.box.about-idiom .box-body p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.7;
}
.box.about-idiom .box-body p:last-child { margin-bottom: 0; }

/* 다루는 주제 — HDElec callout-card 스타일 (회색 배경 navy 좌측 보더). 컴팩트하게. */
.callout-card {
  padding: 16px 20px;
  background: var(--bg-soft);
  border-left: 3px solid var(--navy);
  margin: 22px 0;
  border-radius: 0 2px 2px 0;
}
.callout-card h2 {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.callout-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.callout-card li {
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 4px;
  padding-left: 13px;
  color: var(--text);
}
.callout-card li:last-child { margin-bottom: 0; }
.callout-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}
.callout-card li strong { color: var(--navy); font-weight: 600; }

@media (max-width: 820px) {
  .about-hero {
    grid-template-columns: 1fr;
    gap: 14px;            /* 작가카드 ↔ 본문 간격 축소 */
    margin-bottom: 18px;  /* 본문 ↔ 박스 간격 축소 */
  }
  .about-hero h1 { font-size: 24px; }
  .about-author-card {
    order: -1;
    max-width: 280px;
    margin-left: auto;      /* 화면 가로 중앙 정렬 */
    margin-right: auto;
  }
  /* 모바일에서 ABOUT 헤더 시작점을 아래 박스 안 텍스트 시작점과 정렬
     (.box border-left 4px + padding-left 18px = 22px) */
  .about-intro {
    padding-left: 22px;
  }
  /* lede 의 <br> 은 데스크탑에서만 적용. 모바일은 한 줄로 자연 wrap */
  .about-hero .lede br { display: none; }
}

.breadcrumb { margin-bottom: 24px; }

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

.breadcrumb a:hover { color: var(--navy); }
.breadcrumb .ti { font-size: 13px; }

.post-header { margin-bottom: 32px; }

.post-header h1 {
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1.18;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  max-width: 760px;
}

.post-header .post-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}

.post-header .meta-tags {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.meta-tags .tag-chip {
  padding: 3px 10px;
  font-size: 11px;
}

/* Feature image — 큰 hero */
.feature-image-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 36px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-block);
}

/* 글 내부 feature image 는 원본 비율로 표시 (aspect-ratio 강제 cropping 없음). */
.feature-image { width: 100%; height: auto; display: block; }

.feature-image-wrap .read-time {
  top: 16px;
  right: 16px;
  font-size: 12px;
  padding: 4px 12px;
}

/* =================  POST BODY  ================= */
.post-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}

.post-body p { margin: 0 0 20px; }

.post-body img { border-radius: 4px; display: block; margin: 24px auto; }

.post-body h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 44px 0 16px;
}

.post-body h3 {
  font-size: 17px;
  color: var(--navy);
  font-weight: 600;
  margin: 32px 0 12px;
}

.post-body a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.post-body strong { color: var(--navy); font-weight: 600; }

.post-body ul, .post-body ol { margin: 0 0 20px; padding-left: 26px; }
.post-body li { margin-bottom: 8px; line-height: 1.7; }

.post-body blockquote {
  background: var(--bg-block);
  border-left: 4px solid var(--navy);
  padding: 16px 22px;
  margin: 28px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--navy);
  line-height: 1.6;
  border-radius: 2px;
}
.post-body blockquote p { margin: 0; }
.post-body blockquote p + p { margin-top: 10px; }

.post-body code {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 14px;
  background: var(--bg-block);
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--navy-2);
}

.post-body figure { margin: 24px 0; }
.post-body figcaption {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
}

/* =================  본문 박스 (HTML 카드로 삽입) =================
   .body-quote   — navy left border + 옅은 하늘 배경 + italic. 짧은 인용/한 문장 강조.
   .body-callout — navy left border + 옅은 하늘 배경. 상단 label + 본문 + 작은 note(요약).
   둘 다 사이트 navy 톤으로 통일. callout 안 note 는 구분선 없이 자연스럽게 이어짐. */
.post-body .body-quote {
  background: var(--bg-block);
  border-left: 4px solid var(--navy);
  padding: 16px 22px;
  margin: 28px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--navy);
  line-height: 1.6;
  border-radius: 2px;
}
.post-body .body-quote p { margin: 0; }
.post-body .body-quote p + p { margin-top: 10px; }

.post-body .body-callout {
  background: var(--bg-block);
  border-left: 4px solid var(--navy);
  padding: 16px 22px;
  margin: 28px 0;
  border-radius: 2px;
}
.post-body .body-callout-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 10px;
}
.post-body .body-callout p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
}
.post-body .body-callout p:last-child { margin-bottom: 0; }
.post-body .body-callout-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 8px;
}

/* Koenig 카드 너비 — wide/full (Ghost 에디터 이미지가 본문보다 넓게) */
.post-body .kg-width-wide {
  position: relative;
  width: calc(100% + 96px);
  margin-left: -48px;
  max-width: none;
}
.post-body .kg-width-full {
  position: relative;
  width: calc(100% + 128px);
  margin-left: -64px;
  max-width: none;
}
.post-body .kg-width-wide img,
.post-body .kg-width-full img { width: 100%; }

@media (max-width: 900px) {
  .post-body .kg-width-wide,
  .post-body .kg-width-full {
    width: 100%;
    margin-left: 0;
  }
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 13.5px;
}

.post-body th {
  background: var(--navy);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  padding: 9px 11px;
  text-align: right;
  font-weight: 600;
}

.post-body th:first-child { text-align: left; }

.post-body td {
  padding: 8px 11px;
  text-align: right;
  border: 1px solid var(--border);
}

.post-body td:first-child { text-align: left; font-weight: 500; }
.post-body tr:nth-child(even) td { background: var(--bg-soft); }

/* =================  IB CALLOUT BOXES  ================= */
.box {
  padding: 16px 18px;
  margin: 28px 0;
  border-radius: 2px;
  font-size: 14.5px;
  line-height: 1.65;
}

.box-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 8px;
}

.box-body { color: var(--text); }

.box-concept { background: var(--bg-block); border-left: 3px solid var(--navy-2); }
.box-concept .box-title { color: var(--navy-2); }

.box-example { background: #eef5ee; border-left: 3px solid #2d6a2d; }
.box-example .box-title { color: #2d6a2d; }

.box-tip { background: #fdf4e6; border-left: 3px solid var(--gold); }
.box-tip .box-title { color: var(--gold); }

.box-pitfall { background: #faecec; border-left: 3px solid #b03030; }
.box-pitfall .box-title { color: #b03030; }

.box-rule { background: var(--surface); border: 1px solid var(--navy); padding: 18px; }
.box-rule .box-title { color: var(--navy); }

/* =================  POST FOOTER (Author + Share)  ================= */
.post-footer {
  max-width: 720px;
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.author-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-block);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.author-info .name { font-size: 14px; font-weight: 500; color: var(--navy); }
.author-info .bio { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; }

.share-row {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: all 180ms;
}

.share-btn:hover { border-color: var(--navy); color: var(--navy); }

/* =================  COMMENTS  =================
   Ghost native 댓글 영역. iframe 으로 렌더링되므로 wrapper 의 max-width 가
   본문(720px)과 정렬되도록 한다. */
.post-comments {
  max-width: 720px;
  margin: 56px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--divider);
}

.comments-heading {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 20px;
}

/* 댓글 영역 — 깔끔한 박스 form */
.comments-area { font-family: var(--font-sans); }
.comments-list { list-style: none; padding: 0; margin: 0 0 28px; }
.comments-list .comment { padding: 14px 0; border-bottom: 1px solid var(--divider); }
.comments-list .comment:last-child { border-bottom: none; }
.comments-list .comment-author { font-weight: 500; color: var(--navy); font-size: 14px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.comments-list .comment-author img { border-radius: 50%; }
.comments-list .comment-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.comments-list .comment-meta a { color: inherit; }
.comments-list .comment-content { font-size: 14.5px; line-height: 1.65; color: var(--text); }
.comments-list .reply { margin-top: 6px; }
.comments-list .reply a { font-size: 12px; color: var(--muted); }
.comments-list .reply a:hover { color: var(--navy); }

.comments-empty {
  font-size: 13.5px;
  color: var(--muted);
  padding: 18px 0;
  text-align: center;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 22px;
}

.comment-respond { margin-top: 8px; }

.cf-field { margin: 0 0 10px; }

.cf-field input,
.cf-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  line-height: 1.5;
  transition: border-color 180ms, background 180ms;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--muted); }
.cf-field input:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--navy);
}
.cf-field textarea { resize: vertical; min-height: 96px; }

.cf-author, .cf-email { display: inline-block; width: calc(50% - 4px); }
.cf-author { margin-right: 4px; }
.cf-email  { margin-left: 4px; }

.comment-submit {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 180ms;
}
.comment-submit:hover { background: var(--navy-2); }

/* WP 가 자동 출력하는 일부 안내문/체크박스 숨김 (form 단순화) */
.comment-form-cookies-consent { display: none; }
.comment-respond .comment-reply-title { display: none; }

@media (max-width: 540px) {
  .cf-author, .cf-email { width: 100%; margin: 0 0 10px; }
}

/* =================  RELATED POSTS  ================= */
.related {
  padding: 48px 22px 56px;
  border-top: 1px solid var(--divider);
  margin-top: 60px;
}

.related h3 {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 24px;
  text-align: center;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}

/* 빈 상태 (글이 없을 때) */
.empty-state {
  padding: 60px 22px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* =================  RESPONSIVE  ================= */
@media (max-width: 1280px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;            /* 모바일 사이드바 폭 축소 — 글자 안 깨지는 한도 */
    height: 100dvh;          /* viewport 전체 높이 */
    overflow-y: auto;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 240ms;
    box-shadow: 0 0 24px rgba(0,0,0,0.12);
  }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle { display: flex; }
  .topbar-lead {
    flex: 0 0 auto;
    width: auto;
    padding: 0 16px;
  }
  .sb-toggle { display: none; }
  .main {
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  :root { --topbar-h: 64px; }
  .topbar-brand { font-size: 16px; }
  .topbar { padding-right: 16px; }
  .tagbar { padding: 10px 16px; }
  .page-header { padding: 32px 16px 24px; }
  .page-header h1 { font-size: 23px; line-height: 1.25; }
  .cat-header { padding: 28px 16px 20px; }
  .cat-header h1 { font-size: 28px; }
  .grid { grid-template-columns: 1fr; padding: 16px 16px 40px; gap: 16px; }
  .post-wrap { padding: 0 12px 40px; }
  .post-wrap.about-page { padding-left: 10px; padding-right: 10px; }
  .post-header h1 { font-size: 26px; }
  .post-body { font-size: 15px; }
  .post-body h2 { font-size: 20px; }
  .related { padding: 40px 16px 40px; }
  .related-grid { grid-template-columns: 1fr; }
}

/* 모바일 사이드바 스크림 */
.scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}
.scrim.show { display: block; }
@media (min-width: 769px) { .scrim { display: none !important; } }

/* =================  KO / EN 언어 전환  =================
   data-lang 에 따라 해당 언어 span 만 노출. */
html[data-lang="ko"] .i18n-en { display: none; }
html[data-lang="en"] .i18n-ko { display: none; }

/* 본문/제목·요약문 토글 — 사용자가 글에 작성한 <div lang="ko">/<div lang="en"> 블록과
   카드·post 의 lang span 양쪽에 동작. body 셀렉터로 한정해 <html lang> 은 영향 없음. */
html[data-lang="ko"] body [lang="en"] { display: none; }
html[data-lang="en"] body [lang="ko"] { display: none; }

/* =================  AUTH MODAL  ================= */
.st-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.st-modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.st-modal-content {
  position: relative;
  background: var(--surface);
  padding: 28px 28px 24px;
  border-radius: 12px;
  max-width: 380px;
  width: 92%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.st-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.st-modal-close:hover { color: var(--navy); }

.st-modal-title {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--navy);
  font-weight: 500;
  margin: 0 0 6px;
}
.st-modal-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 18px;
}
#st-auth-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 14px;
  font-family: inherit;
}
#st-auth-form input:focus {
  outline: none;
  border-color: var(--navy);
}
.st-modal-submit {
  width: 100%;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 4px;
  transition: background 180ms;
}
.st-modal-submit:hover { background: var(--navy-2); }
.st-modal-submit:disabled { opacity: 0.6; cursor: wait; }
.st-modal-back {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
  margin-top: 12px;
}
.st-modal-back:hover { color: var(--navy); border-color: var(--navy); }

#st-dev-link {
  margin-top: 12px;
  padding: 10px;
  background: var(--bg-block);
  border-radius: 6px;
  font-size: 12px;
}
#st-dev-link a { color: var(--navy); text-decoration: underline; }

.st-modal-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 2px 12px;
  line-height: 1.5;
}

/* =================  MODERN COMMENTS  ================= */
.st-comment-count { font-size: 11px; color: var(--muted); margin-left: 6px; font-weight: 400; }

.st-comments { font-family: var(--font-sans); }

/* Composer (로그인 상태) */
.st-composer {
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 12px 14px 14px;
  margin-bottom: 24px;
}
.st-composer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 10px;
}
.st-composer-head strong { color: var(--navy); font-weight: 500; }
.st-avatar img { width: 28px; height: 28px; border-radius: 50%; display: block; object-fit: cover; }
.st-composer-as { flex: 1; }
.st-logout-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.st-logout-btn:hover { color: var(--navy); border-color: var(--navy); }

.st-composer-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  min-height: 70px;
  background: var(--surface);
}
.st-composer-form textarea:focus { outline: none; border-color: var(--navy); }
.st-composer-submit {
  margin-top: 8px;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.st-composer-submit:hover { background: var(--navy-2); }
.st-composer-submit:disabled { opacity: 0.6; cursor: wait; }

/* Locked (비로그인) */
.st-comment-locked {
  background: var(--bg-block);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 24px;
  text-align: center;
}
.st-comment-locked p { font-size: 13.5px; color: var(--navy); margin: 0 0 10px; }
.st-locked-cta {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.st-locked-cta:hover { background: var(--navy-2); }

/* List */
.st-list, .st-replies {
  list-style: none;
  padding: 0;
  margin: 0;
}
.st-list-loading, .st-list-empty {
  padding: 18px 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Comment item */
.st-item {
  padding: 12px 0;
  border-top: 1px solid var(--divider);
}
.st-item:first-child { border-top: none; }

.st-it-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.st-it-avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
}
.st-it-name { color: var(--navy); font-weight: 500; font-size: 13.5px; }
.st-it-name .st-author-badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.st-it-time { font-size: 11.5px; }

.st-it-body {
  display: inline-block;
  background: rgba(10, 61, 117, 0.06); /* navy 의 6% — 옅은 하늘색 hint */
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 2px 0 6px;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

.st-it-actions {
  display: flex;
  gap: 4px;
}
.st-act {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 11.5px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.st-act:hover { color: var(--navy); background: rgba(0, 40, 85, 0.05); }
.st-act.st-delete:hover { color: #b00020; }

/* Replies — depth indent */
.st-replies {
  margin-left: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--divider);
  margin-top: 8px;
}

/* Reply form inline */
.st-reply-form, .st-edit-form {
  margin-top: 8px;
  background: var(--bg-soft);
  padding: 10px;
  border-radius: 6px;
}
.st-reply-form textarea, .st-edit-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  background: var(--surface);
}
.st-reply-form textarea:focus, .st-edit-form textarea:focus {
  outline: none; border-color: var(--navy);
}
.st-reply-actions, .st-edit-actions {
  display: flex; gap: 6px; margin-top: 6px;
}
.st-reply-actions button, .st-edit-actions button {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.st-reply-actions button[type="submit"], .st-edit-actions .st-edit-save {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.st-reply-actions button[type="submit"]:hover, .st-edit-actions .st-edit-save:hover { background: var(--navy-2); }

/* 모달 탭 — 로그인 / 가입 */
.st-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 14px;
  background: var(--bg-soft);
  border-radius: 7px;
  padding: 3px;
}
.st-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-radius: 5px;
  transition: background 180ms, color 180ms;
  font-family: inherit;
}
.st-tab.active {
  background: var(--surface);
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.st-tab:not(.active):hover { color: var(--navy); }

.st-modal-error {
  font-size: 12.5px;
  color: #b00020;
  background: #fef0f3;
  padding: 8px 10px;
  border-radius: 5px;
  margin-top: 10px;
  line-height: 1.5;
}

/* 모바일에서 답글 들여쓰기·composer padding 축소 */
@media (max-width: 540px) {
  .st-replies { margin-left: 8px; padding-left: 10px; }
  .st-composer { padding: 10px 12px 12px; }
  .st-it-body { font-size: 13.5px; }
  .st-tabs { font-size: 12px; }
}

/* 답글·편집 폼 안 인라인 버튼도 KO/EN 한꺼번에 표시되지 않도록
   inline element 안에서 자연스럽게 줄바꿈 처리. */
.st-act .i18n-ko, .st-act .i18n-en { display: inline; }
.st-author-badge .i18n-ko, .st-author-badge .i18n-en { display: inline; }

/* 글 하단 작가 카드 — avatar 키움 + 이름 폰트 조정 */
.post-footer .author-row .avatar {
  width: 64px;
  height: 64px;
}
.post-footer .author-info .name {
  font-size: 16px;
  font-weight: 500;
}

/* 답글 들여쓰기 라인 — 마지막 답글 끝선까지만, 그 위로는 안 따라가게 */
.st-replies {
  padding-bottom: 0;
}
.st-item > .st-replies {
  /* nesting 라인이 마지막 자식의 bottom 까지만. ol 의 자체 padding-bottom 0. */
  margin-bottom: 0;
}
.st-replies > .st-item:last-child {
  /* 마지막 답글 아래 padding 0 으로 nesting border-left 가 늘어지는 현상 제거 */
  padding-bottom: 0;
}

/* 좋아요 버튼 — 비추천 없음, like only toggle */
.st-act.st-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.st-act.st-like .ti {
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  transition: color 180ms;
}
.st-act.st-like .st-like-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.st-act.st-like:hover .ti { color: #d4574a; }
.st-act.st-like.liked .ti { color: #d4574a; }
.st-act.st-like.liked .st-like-count { color: var(--navy); font-weight: 500; }
.st-act.st-like:disabled { opacity: 0.6; }

/* About — Contact 섹션 */
.about-contact {
  background: rgba(10, 61, 117, 0.04);
  border-left: 3px solid var(--navy);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 28px 0;
}
.about-contact h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--navy);
  font-weight: 500;
  margin: 0 0 8px;
}
.about-contact p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 14px;
}
.about-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: #fff;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 180ms;
}
.about-contact-btn:hover { background: var(--navy-2); color: #fff; }
.about-contact-btn .ti { font-size: 16px; }

/* topbar 로그인 상태 표시 — KO/EN 토글 왼쪽 */
.user-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--navy);
  background: rgba(0, 40, 85, 0.05);
  padding: 5px 10px;
  border-radius: 6px;
  margin-left: auto;
  flex-shrink: 1;
  min-width: 0;     /* flex item 의 child 가 ellipsis 작동하도록 */
}
.user-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2d9b3e;
  flex-shrink: 0;
}
.user-name {
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;   /* 데스크탑: 긴 이름도 한 줄, 넘으면 ... */
  min-width: 0;
}
.user-email {
  color: var(--muted);
  font-size: 11.5px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-logout {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: color 180ms, border-color 180ms;
  margin-left: 4px;
  flex-shrink: 0;     /* 로그아웃 버튼 텍스트 잘리지 않게 */
  white-space: nowrap;
}
.user-logout:hover { color: var(--navy); border-color: var(--navy); }

.user-info + .lang-toggle {
  margin-left: 8px;
  flex-shrink: 0;     /* KO/EN 토글이 잘리지 않게 */
}
.lang-toggle { flex-shrink: 0; }

/* 화면 크기별 user-name 동적 truncate */
@media (max-width: 1024px) {
  .user-name { max-width: 140px; }
}
@media (max-width: 768px) {
  .user-name { max-width: 100px; }
  .user-email { display: none; }
  .user-info { padding: 4px 8px; gap: 6px; }
}
@media (max-width: 480px) {
  .user-name { max-width: 70px; font-size: 11.5px; }
  .user-logout { padding: 3px 6px; font-size: 10.5px; }
}
@media (max-width: 380px) {
  .user-name { max-width: 56px; }
}

/* 가입 modal — Preferred language: pill toggle (English / 한국어) */
.st-field-lang {
  margin: 2px 0 4px;
}
.st-field-lang .st-lang-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.st-lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
/* radio input 은 시각적으로 숨기고 label 로만 조작 */
.st-lang-toggle input[type="radio"] {
  position: absolute;
  width: 1px !important;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.st-lang-toggle label {
  padding: 7px 18px;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  border-right: 1px solid var(--border);
  transition: background 180ms, color 180ms;
  font-weight: 500;
  line-height: 1.3;
}
.st-lang-toggle label:last-of-type { border-right: 0; }
.st-lang-toggle input[type="radio"]:checked + label {
  background: var(--navy);
  color: #fff;
}
.st-lang-toggle input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--navy-2);
  outline-offset: 1px;
}