/*
Theme Name: 테크소리 (TechSori)
Theme URI: https://techsori.com/
Author: 테크소리 편집부
Author URI: https://techsori.com/author/
Description: 최신 IT 기기(스마트폰·노트북·데스크탑·웨어러블)를 처음 고르는 사람을 위한 정보·리뷰 사이트용 테마입니다. 5개 대표 카테고리 구조, 목차·핵심 요약·체크리스트·FAQ 블록, 신뢰 페이지(운영자·문의·개인정보처리방침·이용약관·면책고지·HTML 사이트맵), Article/Breadcrumb/FAQ 구조화 데이터를 포함합니다.
Version: 1.4.0
 * 빌드 표식: 2026-09-16 H2-단색-바 / 목차-여백-대칭 / 본문-강조색
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: techsori
Tags: blog, news, right-sidebar, one-column, two-columns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, block-styles, wide-blocks, threaded-comments, translation-ready, theme-options

테크소리 테마는 GPLv2 이상 라이선스를 따릅니다.
*/

/* =========================================================
   1. 디자인 토큰
   메인 컬러 / 서브 컬러는 관리자 > 외모 > 사용자 정의하기 > 테크소리 브랜드 에서
   변경할 수 있으며, 아래 변수 값이 자동으로 덮어써집니다.
   ========================================================= */
:root {
  --ts-main: #1d4ed8;
  --ts-main-dark: #1e3a8a;
  --ts-main-soft: #eef2ff;
  --ts-sub: #0e9f8f;
  --ts-sub-soft: #e6f7f4;
  --ts-ink: #111827;
  --ts-body: #374151;
  --ts-muted: #6b7280;
  --ts-line: #e5e7eb;
  --ts-line-strong: #d1d5db;
  --ts-bg: #ffffff;
  --ts-surface: #f8fafc;
  --ts-surface-2: #f1f5f9;
  --ts-warn-bg: #fff7ed;
  --ts-warn-line: #fdba74;
  --ts-warn-ink: #9a3412;
  --ts-radius: 14px;
  --ts-radius-sm: 8px;
  --ts-radius-lg: 20px;
  --ts-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .06);
  --ts-shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
  --ts-container: 1120px;
  --ts-reading: 720px;
  --ts-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ts-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* =========================================================
   2. 베이스
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ts-bg);
  color: var(--ts-body);
  font-family: var(--ts-font);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--ts-main); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ts-main) 45%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 { color: var(--ts-ink); line-height: 1.35; letter-spacing: -0.02em; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.35em; }
li { margin-bottom: .45em; }
strong { color: var(--ts-ink); }
hr { border: 0; border-top: 1px solid var(--ts-line); margin: 2.5rem 0; }
code { font-family: var(--ts-font-mono); font-size: .9em; background: var(--ts-surface-2); padding: .15em .4em; border-radius: 5px; }
blockquote {
  margin: 1.6rem 0; padding: 1rem 1.25rem;
  background: var(--ts-surface); border-left: 4px solid var(--ts-sub);
  border-radius: 0 var(--ts-radius-sm) var(--ts-radius-sm) 0; color: var(--ts-body);
}
blockquote p:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
th, td { border: 1px solid var(--ts-line); padding: .7rem .85rem; text-align: left; vertical-align: top; }
th { background: var(--ts-surface); color: var(--ts-ink); font-weight: 600; }

.ts-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ts-ink); color: #fff; padding: .7rem 1rem; border-radius: 0 0 var(--ts-radius-sm) 0;
}
.ts-skip:focus { left: 0; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================
   3. 레이아웃
   ========================================================= */
.ts-container { width: 100%; max-width: var(--ts-container); margin: 0 auto; padding: 0 20px; }
.ts-container--narrow { max-width: calc(var(--ts-reading) + 40px); }

.ts-main { display: block; padding: 2.5rem 0 4rem; }
.ts-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; align-items: start; }
.ts-layout--full { grid-template-columns: minmax(0, 1fr); }

.ts-section { margin-bottom: 3.5rem; }
.ts-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.ts-section__title { font-size: 1.35rem; margin: 0; display: flex; align-items: center; gap: .6rem; }
.ts-section__title::before { content: ""; width: 4px; height: 1.1em; background: var(--ts-main); border-radius: 2px; }
.ts-section__desc { color: var(--ts-muted); font-size: .95rem; margin: .5rem 0 0; }
.ts-section__more { font-size: .9rem; white-space: nowrap; color: var(--ts-muted); }
.ts-section__more:hover { color: var(--ts-main); }

.ts-grid { display: grid; gap: 1.5rem; }
.ts-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ts-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* =========================================================
   4. 헤더 / 네비게이션
   ========================================================= */
.ts-brand-wrap { display: flex; align-items: center; }

/* 커스텀 로고: 어떤 해상도(1x·2x·3x)를 올려도 48px 높이로 표시됩니다. */
.custom-logo { max-height: 48px; width: auto; height: auto; }
.ts-brand__logo { flex: 0 0 auto; }

.ts-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--ts-line);
}
.ts-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.ts-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.ts-brand:hover { text-decoration: none; }
.ts-brand__mark {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
  background: linear-gradient(135deg, var(--ts-main), var(--ts-sub));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
.ts-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.ts-brand__name { color: var(--ts-ink); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.03em; }
.ts-brand__tagline { color: var(--ts-muted); font-size: .72rem; letter-spacing: -0.01em; }

.ts-nav { margin-left: auto; }
.ts-nav ul { list-style: none; display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; }
.ts-nav li { margin: 0; position: relative; }
.ts-nav a {
  display: block; padding: .5rem .8rem; border-radius: var(--ts-radius-sm);
  color: var(--ts-body); font-size: .95rem; font-weight: 600; text-decoration: none;
}
.ts-nav a:hover { background: var(--ts-surface-2); color: var(--ts-main); }
.ts-nav .current-menu-item > a, .ts-nav .current_page_item > a { color: var(--ts-main); background: var(--ts-main-soft); }
.ts-nav .sub-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px; flex-direction: column;
  background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm);
  box-shadow: var(--ts-shadow); padding: .4rem; display: none; z-index: 60;
}
.ts-nav li:hover > .sub-menu, .ts-nav li:focus-within > .sub-menu { display: flex; }

.ts-header__tools { display: flex; align-items: center; gap: .4rem; }
.ts-icon-btn {
  border: 1px solid var(--ts-line); background: #fff; color: var(--ts-body);
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.ts-icon-btn:hover { border-color: var(--ts-line-strong); color: var(--ts-main); }

.ts-nav-toggle { display: none; }
.ts-search-form { display: none; padding: 0 0 1rem; }
.ts-search-form.is-open { display: block; }
.ts-search-form input[type="search"] {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--ts-line-strong);
  border-radius: var(--ts-radius-sm); font: inherit; font-size: 1rem;
}

/* =========================================================
   5. 히어로
   ========================================================= */
.ts-hero {
  background:
    radial-gradient(900px 320px at 12% -10%, var(--ts-main-soft), transparent 65%),
    radial-gradient(700px 300px at 95% 0%, var(--ts-sub-soft), transparent 60%),
    var(--ts-bg);
  border-bottom: 1px solid var(--ts-line);
  padding: 3.25rem 0 3rem;
}
.ts-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--ts-line); border-radius: 999px;
  padding: .3rem .8rem; font-size: .8rem; font-weight: 600; color: var(--ts-muted);
  margin-bottom: 1rem;
}
.ts-hero__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ts-sub); }
.ts-hero__title { font-size: 2.4rem; line-height: 1.28; margin: 0 0 1rem; max-width: 22em; }
.ts-hero__lead { font-size: 1.08rem; color: var(--ts-body); max-width: 46em; margin: 0 0 1.6rem; }
.ts-hero__topics { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.ts-chip {
  display: inline-block; padding: .35rem .8rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--ts-line); color: var(--ts-body);
  font-size: .85rem; font-weight: 600; text-decoration: none;
}
.ts-chip:hover { border-color: var(--ts-main); color: var(--ts-main); text-decoration: none; }
.ts-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* =========================================================
   6. 버튼
   ========================================================= */
.ts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem; border-radius: var(--ts-radius-sm); font-weight: 700; font-size: .95rem;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; font-family: inherit;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.ts-btn:hover { text-decoration: none; transform: translateY(-1px); }
.ts-btn--primary { background: var(--ts-main); color: #fff; box-shadow: 0 6px 18px rgba(29, 78, 216, .22); }
.ts-btn--primary:hover { background: var(--ts-main-dark); color: #fff; }
.ts-btn--ghost { background: #fff; border-color: var(--ts-line-strong); color: var(--ts-ink); }
.ts-btn--ghost:hover { border-color: var(--ts-main); color: var(--ts-main); }
.ts-btn--sm { padding: .55rem .9rem; font-size: .86rem; }

/* =========================================================
   7. 배지 / 메타
   ========================================================= */
.ts-badge {
  display: inline-block; background: var(--ts-main-soft); color: var(--ts-main-dark);
  font-size: .78rem; font-weight: 700; padding: .25rem .6rem; border-radius: 6px;
  letter-spacing: -0.01em; text-decoration: none;
}
.ts-badge:hover { text-decoration: none; color: var(--ts-main-dark); }
.ts-badge--column { background: var(--ts-sub-soft); color: #0b6b60; }

.ts-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--ts-muted); font-size: .85rem; }
.ts-meta__sep { color: var(--ts-line-strong); }
.ts-meta a { color: var(--ts-muted); }

.ts-updated {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--ts-sub-soft); color: #0b6b60; border-radius: 6px;
  padding: .2rem .55rem; font-size: .8rem; font-weight: 600;
}

/* =========================================================
   8. 글 카드
   ========================================================= */
.ts-card {
  background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ts-card:hover { border-color: var(--ts-line-strong); box-shadow: var(--ts-shadow); transform: translateY(-2px); }
.ts-card__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--ts-surface-2); overflow: hidden; }
.ts-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ts-thumb--placeholder {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ts-main-soft), var(--ts-sub-soft));
}
.ts-thumb--placeholder span { font-size: 2.4rem; font-weight: 800; color: var(--ts-main); opacity: .55; }
.ts-card__body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.ts-card__title { font-size: 1.06rem; margin: 0; line-height: 1.45; }
.ts-card__title a { color: var(--ts-ink); text-decoration: none; }
.ts-card__title a:hover { color: var(--ts-main); }
.ts-card__excerpt { margin: 0; font-size: .9rem; color: var(--ts-muted); line-height: 1.65; }
.ts-card__foot { margin-top: auto; padding-top: .35rem; }
.ts-card--row { flex-direction: row; }
.ts-card--row .ts-card__thumb { flex: 0 0 220px; aspect-ratio: auto; }
.ts-card--featured { border-color: color-mix(in srgb, var(--ts-main) 35%, var(--ts-line)); }
.ts-card__flag {
  position: absolute; top: .7rem; left: .7rem; background: var(--ts-main); color: #fff;
  font-size: .72rem; font-weight: 700; padding: .2rem .5rem; border-radius: 5px; letter-spacing: -0.01em;
}

/* =========================================================
   9. 홈 전용 블록
   ========================================================= */
.ts-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ts-cat-card {
  display: block; background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
  padding: 1.4rem 1.4rem 1.2rem; text-decoration: none; position: relative; overflow: hidden;
}
.ts-cat-card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--ts-main), var(--ts-sub)); opacity: 0; transition: opacity .15s ease;
}
.ts-cat-card:hover { border-color: var(--ts-line-strong); box-shadow: var(--ts-shadow); text-decoration: none; }
.ts-cat-card:hover::after { opacity: 1; }
.ts-cat-card__name { color: var(--ts-ink); font-weight: 700; font-size: 1.1rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.ts-cat-card__name span { font-size: .78rem; color: var(--ts-main); background: var(--ts-main-soft); padding: .15rem .5rem; border-radius: 999px; font-weight: 700; }
.ts-cat-card__desc { color: var(--ts-muted); font-size: .9rem; margin: 0 0 .9rem; line-height: 1.65; }
.ts-cat-card__latest { font-size: .85rem; color: var(--ts-body); margin: 0; padding-top: .8rem; border-top: 1px dashed var(--ts-line); }
.ts-cat-card__latest b { color: var(--ts-main); font-weight: 600; display: block; font-size: .78rem; margin-bottom: .2rem; letter-spacing: -0.01em; }

.ts-panel {
  background: var(--ts-surface); border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius); padding: 1.6rem 1.7rem;
}
.ts-panel--accent { background: var(--ts-main-soft); border-color: color-mix(in srgb, var(--ts-main) 22%, var(--ts-line)); }
.ts-panel__title { font-size: 1.1rem; margin: 0 0 .7rem; }
.ts-panel ul { margin: 0; padding-left: 1.2rem; }
.ts-panel li { font-size: .93rem; color: var(--ts-body); }
.ts-panel__note { font-size: .85rem; color: var(--ts-muted); margin: .9rem 0 0; }

.ts-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.ts-principle { display: flex; gap: .75rem; }
.ts-principle__no {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 1px solid var(--ts-line-strong); color: var(--ts-main);
  display: grid; place-items: center; font-size: .78rem; font-weight: 800; margin-top: .25rem;
}
.ts-principle__body strong { display: block; color: var(--ts-ink); font-size: .96rem; margin-bottom: .15rem; }
.ts-principle__body p { margin: 0; font-size: .88rem; color: var(--ts-muted); line-height: 1.65; }

.ts-author-mini { display: flex; gap: 1.1rem; align-items: center; }
.ts-author-mini__avatar {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ts-main), var(--ts-sub)); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.3rem;
}
.ts-author-mini__name { font-weight: 700; color: var(--ts-ink); }
.ts-author-mini__bio { font-size: .9rem; color: var(--ts-muted); margin: .2rem 0 0; }

.ts-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  background: linear-gradient(120deg, var(--ts-main-dark), var(--ts-main) 55%, var(--ts-sub));
  color: #fff; border-radius: var(--ts-radius-lg); padding: 2rem 2.1rem;
}
.ts-cta__title { color: #fff; font-size: 1.3rem; margin: 0 0 .4rem; }
.ts-cta__desc { color: rgba(255, 255, 255, .88); margin: 0; font-size: .95rem; max-width: 44em; }
.ts-cta .ts-btn--ghost { background: #fff; border-color: transparent; color: var(--ts-main-dark); }

/* =========================================================
   10. 브레드크럼
   ========================================================= */
.ts-crumbs { margin-bottom: 1.5rem; }
.ts-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; padding: 0; font-size: .84rem; color: var(--ts-muted); }
.ts-crumbs li { margin: 0; display: flex; align-items: center; gap: .35rem; }
.ts-crumbs li + li::before { content: "/"; color: var(--ts-line-strong); }
.ts-crumbs a { color: var(--ts-muted); }
.ts-crumbs [aria-current="page"] { color: var(--ts-ink); font-weight: 600; }

/* =========================================================
   11. 글 상세
   ========================================================= */
.ts-entry__header { margin-bottom: 2rem; }
.ts-entry__title { font-size: 2.05rem; margin: .7rem 0 .7rem; line-height: 1.3; }
.ts-entry__subtitle { font-size: 1.05rem; color: var(--ts-body); margin: 0 0 1.1rem; padding-left: .9rem; border-left: 3px solid var(--ts-sub); }
.ts-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--ts-line); }
.ts-entry__thumb { margin: 0 0 2rem; border-radius: var(--ts-radius); overflow: hidden; border: 1px solid var(--ts-line); }
.ts-entry__thumb img { width: 100%; }

.ts-toc {
  background: var(--ts-surface); border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius); padding: 1.15rem 1.3rem; margin: 0 0 2rem;
}
.ts-toc__title { font-size: .95rem; margin: 0 0 .75rem; padding: 0; color: var(--ts-ink); display: flex; align-items: center; gap: .45rem; }
.ts-toc__title::before { content: "☰"; font-size: .8rem; color: var(--ts-main); position: static; width: auto; height: auto; background: none; border-radius: 0; }
/* 목차: 소제목(H2)은 숫자, 하위 소제목(H3)은 점으로 표시합니다. */
.ts-toc ul { list-style: none; margin: 0; padding-left: 0; counter-reset: ts-toc; }
.ts-toc li {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .92rem;
  margin-bottom: .35rem;
  counter-increment: ts-toc;
}
.ts-toc li::before {
  content: counter(ts-toc) ".";
  flex: 0 0 auto;
  min-width: 1.15em;
  font-size: .85em;
  font-weight: 700;
  color: var(--ts-toc-mark, var(--ts-main));
}
.ts-toc li.ts-toc__sub { counter-increment: none; margin-left: 1.1rem; font-size: .88rem; }
.ts-toc li.ts-toc__sub::before { content: "•"; font-weight: 400; }
.ts-toc a { color: var(--ts-body); display: inline-block; }
.ts-toc a:hover { color: var(--ts-main); }
.ts-toc__more { font-size: .85rem; color: var(--ts-muted); margin: .55rem 0 0; }

.ts-entry__body { font-size: 1.02rem; line-height: 1.85; }
.ts-entry__body > * { max-width: var(--ts-reading); }
.ts-entry__body h2:not(.ts-toc__title) { margin: 2.9rem 0 1.15rem; font-size: 1.45rem; scroll-margin-top: 90px; position: relative; padding-left: 1.05rem; }

/* H2: 왼쪽 세로 라인 — 색상은 사용자 정의하기(본문 H2 색)에서 바꿀 수 있고, 기본값은 아래 색입니다. */
.ts-entry__body h2:not(.ts-toc__title)::before {
  content: "";
  position: absolute;
  left: 0;
  top: .14em;
  bottom: .14em;
  width: 5px;
  border-radius: 3px;
  background: var(--ts-h2-bar-1, #9321ff);
}

/* 기존 밑줄은 쓰지 않습니다. */
.ts-entry__body h2::after { content: none; }

/* H3: 글자 폭에 꽉 차는 밑줄 */
.ts-entry__body h3 {
  margin: 2.1rem 0 .95rem;
  font-size: 1.16rem;
  scroll-margin-top: 90px;
  color: var(--ts-h3-color, #0f766e);
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--ts-h3-line, #b7ded7);
}
/* 대표 이미지가 없는 글도 카드 썸네일 영역이 무너지지 않게 배경만 채웁니다. */
.ts-card__thumb, .ts-mini__thumb, .ts-list__thumb,
.ts-hero-card__thumb, .ts-feat-wide__thumb { background: var(--ts-surface-2); }

/* 핵심 강조: 굵게 표시한 부분은 브랜드 색으로 바뀌어 눈에 띕니다. */
.ts-entry__body strong, .ts-entry__body b { color: var(--ts-strong, var(--ts-main)); font-weight: 700; }

/* 형광펜 강조(선택): 배경 밴드를 깔아 문장을 통째로 표시할 때 사용합니다. */
.ts-entry__body mark {
  background: linear-gradient(transparent 55%, var(--ts-mark-bg, #dbeafe) 55%);
  color: var(--ts-ink); padding: 0 .12em; border-radius: 2px; font-weight: 600;
}

/* 표 안의 핵심 수치도 같은 색으로 통일합니다. */
.ts-entry__body .wp-block-table strong, .ts-entry__body table strong { color: var(--ts-strong, var(--ts-main)); }

.ts-entry__body ul, .ts-entry__body ol { padding-left: 1.4em; }
.ts-entry__body li { margin-bottom: .5em; }
.ts-entry__body figure { margin: 1.8rem 0; }
.ts-entry__body figcaption { font-size: .84rem; color: var(--ts-muted); text-align: center; margin-top: .5rem; }
.ts-entry__body .wp-block-quote { max-width: var(--ts-reading); }

.ts-summary {
  background: var(--ts-main-soft);
  border: 1px solid color-mix(in srgb, var(--ts-main) 20%, var(--ts-line));
  border-radius: var(--ts-radius); padding: 1.4rem 1.5rem; margin: 2.2rem 0;
}
.ts-summary__title { font-size: 1rem; margin: 0 0 .7rem; color: var(--ts-main-dark); display: flex; align-items: center; gap: .5rem; }
.ts-summary__title::before { content: "요약"; font-size: .7rem; background: var(--ts-main); color: #fff; padding: .15rem .45rem; border-radius: 5px; letter-spacing: -0.01em; }
.ts-summary ul { margin: 0; padding-left: 1.25rem; }
.ts-summary li { font-size: .95rem; color: var(--ts-body); }

.ts-mistakes { background: var(--ts-warn-bg); border: 1px solid var(--ts-warn-line); border-radius: var(--ts-radius); padding: 1.4rem 1.5rem; margin: 2.2rem 0; }
.ts-mistakes__title { color: var(--ts-warn-ink); font-size: 1rem; margin: 0 0 .9rem; }
.ts-mistake { display: flex; gap: .7rem; margin-bottom: .95rem; }
.ts-mistake:last-child { margin-bottom: 0; }
.ts-mistake__mark { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--ts-warn-line); color: var(--ts-warn-ink); display: grid; place-items: center; font-size: .72rem; font-weight: 800; margin-top: .3rem; }
.ts-mistake__body strong { display: block; color: var(--ts-ink); font-size: .95rem; margin-bottom: .15rem; }
.ts-mistake__body p { margin: 0; font-size: .9rem; color: var(--ts-body); }

.ts-checklist { border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 1.4rem 1.5rem; margin: 2.2rem 0; background: #fff; }
.ts-checklist__title { font-size: 1rem; margin: 0 0 .9rem; }
.ts-checklist ul { list-style: none; margin: 0; padding: 0; }
.ts-checklist li { display: flex; gap: .6rem; font-size: .94rem; margin-bottom: .6rem; }
.ts-checklist li:last-child { margin-bottom: 0; }
.ts-checklist li::before {
  content: "✓"; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
  background: var(--ts-sub-soft); color: #0b6b60; display: grid; place-items: center; font-size: .75rem; font-weight: 800; margin-top: .28rem;
}

.ts-faq { margin: 2.6rem 0; }
.ts-faq__title { font-size: 1.2rem; margin: 0 0 1rem; }
.ts-faq__item { border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm); margin-bottom: .6rem; background: #fff; }
.ts-faq__item[open] { border-color: var(--ts-line-strong); }
.ts-faq__q {
  cursor: pointer; padding: .95rem 1.1rem; font-weight: 600; color: var(--ts-ink);
  font-size: .97rem; list-style: none; display: flex; gap: .6rem; align-items: flex-start;
}
.ts-faq__q::-webkit-details-marker { display: none; }
.ts-faq__q::before { content: "Q"; color: var(--ts-main); font-weight: 800; font-size: .85rem; margin-top: .15rem; }
.ts-faq__q::after { content: "+"; margin-left: auto; color: var(--ts-muted); font-weight: 700; }
.ts-faq__item[open] .ts-faq__q::after { content: "−"; }
.ts-faq__a { padding: 0 1.1rem 1rem 2.1rem; font-size: .93rem; color: var(--ts-body); }
.ts-faq__a p:last-child { margin-bottom: 0; }

.ts-notice {
  background: var(--ts-surface); border: 1px dashed var(--ts-line-strong);
  border-radius: var(--ts-radius-sm); padding: .9rem 1.1rem; margin: 2rem 0;
  font-size: .87rem; color: var(--ts-muted);
}

.ts-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 2.4rem 0; padding: 1.2rem 0; border-top: 1px solid var(--ts-line); border-bottom: 1px solid var(--ts-line); }
.ts-share__label { font-size: .88rem; color: var(--ts-muted); font-weight: 600; margin-right: .3rem; }
.ts-share__btn {
  border: 1px solid var(--ts-line-strong); background: #fff; color: var(--ts-body);
  border-radius: 999px; padding: .4rem .85rem; font-size: .85rem; cursor: pointer;
  font-family: inherit; text-decoration: none;
}
.ts-share__btn:hover { border-color: var(--ts-main); color: var(--ts-main); text-decoration: none; }

.ts-author-box {
  display: flex; gap: 1.1rem; background: var(--ts-surface); border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius); padding: 1.35rem 1.45rem; margin: 2.4rem 0;
}
.ts-author-box__avatar img { border-radius: 50%; }
.ts-author-box__name { font-weight: 700; color: var(--ts-ink); margin: 0 0 .2rem; }
.ts-author-box__name a { color: inherit; }
.ts-author-box__desc { font-size: .9rem; color: var(--ts-body); margin: 0 0 .55rem; }
.ts-author-box__link { font-size: .86rem; font-weight: 600; }

.ts-related { margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--ts-line); }

/* =========================================================
   12. 아카이브 / 페이지
   ========================================================= */
.ts-archive__header { background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 2rem 2.1rem; margin-bottom: 2.5rem; }
.ts-archive__title { font-size: 1.8rem; margin: 0 0 .6rem; }
.ts-archive__desc { color: var(--ts-body); font-size: .98rem; max-width: 48em; margin: 0 0 .9rem; }
.ts-archive__count { font-size: .85rem; color: var(--ts-muted); }

.ts-entry-list { display: flex; flex-direction: column; gap: 1.25rem; }

.ts-pagination { margin-top: 2.5rem; }
.ts-pagination .page-numbers {
  display: inline-block; min-width: 40px; text-align: center; padding: .5rem .7rem; margin: 0 .2rem .4rem 0;
  border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm); color: var(--ts-body); font-size: .9rem; text-decoration: none; background: #fff;
}
.ts-pagination .page-numbers.current { background: var(--ts-main); border-color: var(--ts-main); color: #fff; font-weight: 700; }
.ts-pagination .page-numbers:hover { border-color: var(--ts-main); color: var(--ts-main); text-decoration: none; }

.ts-page__header { margin-bottom: 2rem; }
.ts-page__title { font-size: 2rem; margin: 0 0 .6rem; }
.ts-page__lead { font-size: 1.03rem; color: var(--ts-body); max-width: 46em; margin: 0; }

.ts-form { display: grid; gap: 1rem; max-width: 640px; }
.ts-form label { display: block; font-weight: 600; color: var(--ts-ink); font-size: .92rem; margin-bottom: .35rem; }
.ts-form input, .ts-form select, .ts-form textarea {
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--ts-line-strong);
  border-radius: var(--ts-radius-sm); font: inherit; font-size: .95rem; background: #fff;
}
.ts-form textarea { min-height: 150px; resize: vertical; }
.ts-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ts-form__hint { font-size: .84rem; color: var(--ts-muted); margin: .4rem 0 0; }

.ts-info-table { width: 100%; border: 0; margin: 0; }
.ts-info-table th { width: 170px; background: transparent; border: 0; border-bottom: 1px solid var(--ts-line); color: var(--ts-muted); font-weight: 600; font-size: .9rem; }
.ts-info-table td { border: 0; border-bottom: 1px solid var(--ts-line); font-size: .93rem; color: var(--ts-body); }

.ts-sitemap-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.ts-sitemap-cols h2 { font-size: 1.05rem; }
.ts-sitemap-cols ul { list-style: none; padding: 0; margin: 0; }
.ts-sitemap-cols li { padding: .4rem 0; border-bottom: 1px solid var(--ts-line); font-size: .92rem; }

.ts-404 { text-align: center; padding: 3rem 0 4rem; }
.ts-404__code { font-size: 3.4rem; font-weight: 800; color: var(--ts-main); letter-spacing: -0.03em; line-height: 1; margin: 0 0 .6rem; }
.ts-404__title { margin-bottom: .7rem; }
.ts-404__desc { color: var(--ts-muted); max-width: 40em; margin: 0 auto 1.6rem; }
.ts-404__links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* =========================================================
   13. 운영자 허브
   ========================================================= */
.ts-owner {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: start;
}
.ts-owner__card { background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 1.8rem; }
.ts-owner__avatar {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ts-main), var(--ts-sub)); color: #fff; font-weight: 800; font-size: 1.6rem;
  margin-bottom: 1rem;
}
.ts-owner__name { font-size: 1.4rem; margin: 0 0 .4rem; }
.ts-owner__bio { color: var(--ts-body); font-size: .96rem; }

.ts-admin-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--ts-sub-soft); border: 1px solid color-mix(in srgb, var(--ts-sub) 30%, var(--ts-line));
  border-radius: var(--ts-radius); padding: 1.1rem 1.3rem; margin-bottom: 2rem;
}
.ts-admin-bar__label { font-size: .8rem; font-weight: 700; color: #0b6b60; display: block; margin-bottom: .2rem; }
.ts-admin-bar__text { font-size: .95rem; color: var(--ts-body); margin: 0; }
.ts-admin-bar--hidden { display: none; }

/* =========================================================
   14. 사이드바 / 위젯
   ========================================================= */
.ts-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.ts-widget { background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 1.3rem 1.35rem; }
.ts-widget__title { font-size: .98rem; margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--ts-line); }
.ts-widget ul { list-style: none; margin: 0; padding: 0; }
.ts-widget li { font-size: .91rem; margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--ts-line); }
.ts-widget li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.ts-widget a { color: var(--ts-body); }
.ts-widget a:hover { color: var(--ts-main); }
.ts-widget__sub { display: block; color: var(--ts-muted); font-size: .8rem; margin-top: .2rem; }
.ts-widget--sticky { position: sticky; top: 88px; }

/* =========================================================
   15. 댓글
   ========================================================= */
.ts-comments { margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--ts-line); }
.ts-comments__title { font-size: 1.2rem; }
.ts-comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.ts-comment-list .children { list-style: none; padding-left: 1.5rem; }
.ts-comment { border-bottom: 1px solid var(--ts-line); padding: 1.1rem 0; }
.ts-comment__meta { font-size: .85rem; color: var(--ts-muted); margin-bottom: .4rem; }
.ts-comment__body { font-size: .95rem; }
/* 댓글 폼: 워드프레스 기본 출력 구조(#respond)에 맞춘 스타일 */
.ts-comments #respond { max-width: 100%; }

.ts-comments #respond textarea,
.ts-comments #respond input[type="text"],
.ts-comments #respond input[type="email"],
.ts-comments #respond input[type="url"] {
  display: block;
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--ts-line-strong);
  border-radius: var(--ts-radius-sm);
  font: inherit;
  font-size: 1rem;
  background: #fff;
}

.ts-comments #respond textarea { min-height: 170px; resize: vertical; }

.ts-comments #respond .comment-form p { margin: 0 0 1rem; }
.ts-comments #respond .form-submit { margin: 1.1rem 0 0; }

.ts-comments #respond .submit {
  background: var(--ts-main);
  color: #fff;
  border: 0;
  padding: .85rem 1.6rem;
  border-radius: var(--ts-radius-sm);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  font-family: inherit;
}

.ts-comments #respond .submit:hover { background: var(--ts-main-dark); }

/* 다른 플러그인이 넣은 구독·쿠키 관련 요소가 남아 있어도 보이지 않게 처리 */
.ts-comments #respond .comment-form-cookies-consent,
.ts-comments #respond .comment-subscription-form,
.ts-comments #respond .comment-form-subscriptions,
.ts-comments #respond .subscribe-to-comments,
.ts-comments #respond .post-comment-notify { display: none; }

/* =========================================================
   16. 푸터
   ========================================================= */
.ts-footer { background: var(--ts-surface); border-top: 1px solid var(--ts-line); padding: 3rem 0 2rem; margin-top: 2rem; }
.ts-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.2rem; }
.ts-footer__title { font-size: .92rem; color: var(--ts-ink); margin: 0 0 .85rem; font-weight: 700; }
.ts-footer__about { font-size: .9rem; color: var(--ts-muted); margin: .8rem 0 0; max-width: 32em; }
.ts-footer ul { list-style: none; margin: 0; padding: 0; }
.ts-footer li { margin-bottom: .5rem; font-size: .9rem; }
.ts-footer a { color: var(--ts-body); }
.ts-footer a:hover { color: var(--ts-main); }
.ts-footer__bottom {
  border-top: 1px solid var(--ts-line); padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between;
  font-size: .85rem; color: var(--ts-muted);
}
.ts-footer__bottom a { color: var(--ts-muted); }
.ts-footer__operator { font-weight: 600; color: var(--ts-body); }

/* =========================================================
   17. 관리자 공지(AI 편집 보조 등)
   ========================================================= */
.ts-admin-note {
  background: #fffbeb; border: 1px solid #fcd34d; color: #78350f;
  border-radius: var(--ts-radius-sm); padding: .8rem 1rem; font-size: .86rem; margin: 0 0 1.5rem;
}

/* =========================================================
   18. 반응형
   ========================================================= */
@media (max-width: 1024px) {
  .ts-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .ts-widget--sticky { position: static; }
  .ts-owner { grid-template-columns: minmax(0, 1fr); }
  .ts-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-footer__grid { grid-template-columns: 1fr 1fr; }
  .ts-sitemap-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .ts-hero { padding: 2.5rem 0 2.25rem; }
  .ts-hero__title { font-size: 1.85rem; }
  .ts-nav-toggle { display: grid; }
  .ts-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--ts-line);
    box-shadow: var(--ts-shadow); padding: .6rem 20px 1rem;
  }
  .ts-nav.is-open { display: block; }
  .ts-nav ul { flex-direction: column; align-items: stretch; gap: .1rem; }
  .ts-nav .sub-menu { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 0 1rem; min-width: 0; }
  .ts-cats, .ts-grid--3, .ts-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .ts-principles { grid-template-columns: minmax(0, 1fr); }
  .ts-entry__title { font-size: 1.6rem; }
  .ts-archive__header { padding: 1.5rem 1.4rem; }
  .ts-cta { padding: 1.6rem 1.5rem; }
  .ts-card--row { flex-direction: column; }
  .ts-card--row .ts-card__thumb { flex: none; aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  .ts-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .ts-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .ts-sitemap-cols { grid-template-columns: minmax(0, 1fr); }
  .ts-form__grid { grid-template-columns: minmax(0, 1fr); }
  .ts-hero__title { font-size: 1.55rem; }
  .ts-author-box, .ts-author-mini { flex-direction: column; }
}

@media print {
  .ts-header, .ts-footer, .ts-sidebar, .ts-share, .ts-cta, .ts-toc { display: none; }
  .ts-entry__body { font-size: 12pt; }
}