/* =========================================================
   TermPick Article Design System v1.8.7
   Loaded after main.css and style.css to guarantee priority.
========================================================= */

:root {
  --tp-article-text: #27364a;
  --tp-article-heading: #0d2b54;
  --tp-article-blue: #2563eb;
  --tp-article-green: #16a34a;
  --tp-article-muted: #6b7280;
  --tp-article-line: #dce5f0;
  --tp-article-soft-line: #e5ecf5;
  --tp-article-blue-soft: #f0f6ff;
  --tp-article-green-soft: #e6f7ef;
  --tp-article-row: #f7fafe;
}

/* Main article body — deliberately specific so older theme rules cannot win. */
body.single-post .tp-article .tp-entry-content,
body.page .tp-article .tp-entry-content,
.editor-styles-wrapper {
  font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--tp-article-text) !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: -0.008em;
}

body.single-post .tp-entry-content p,
body.page .tp-entry-content p,
.editor-styles-wrapper p {
  margin-top: 0 !important;
  margin-bottom: 1.35em !important;
  color: var(--tp-article-text) !important;
  line-height: 1.85 !important;
}

/* H2 */
body.single-post .tp-entry-content h2,
body.page .tp-entry-content h2,
.editor-styles-wrapper h2,
body.single-post .tp-entry-content h2.wp-block-heading,
body.page .tp-entry-content h2.wp-block-heading {
  margin-top: 2.6em !important;
  margin-bottom: 0.9em !important;
  padding-bottom: 0.45em !important;
  color: var(--tp-article-heading) !important;
  font-size: 1.65em !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.025em !important;
  border-bottom: 2px solid var(--tp-article-soft-line) !important;
}

/* H3 */
body.single-post .tp-entry-content h3,
body.page .tp-entry-content h3,
.editor-styles-wrapper h3,
body.single-post .tp-entry-content h3.wp-block-heading,
body.page .tp-entry-content h3.wp-block-heading {
  position: relative;
  margin-top: 2em !important;
  margin-bottom: 0.75em !important;
  padding-left: 13px !important;
  color: var(--tp-article-heading) !important;
  font-size: 1.3em !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.02em !important;
}

body.single-post .tp-entry-content h3::before,
body.page .tp-entry-content h3::before,
.editor-styles-wrapper h3::before {
  content: "" !important;
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 4px;
  height: 1em;
  margin: 0 !important;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--tp-article-blue) 0%, var(--tp-article-green) 100%) !important;
}

/* H4 */
body.single-post .tp-entry-content h4,
body.page .tp-entry-content h4,
.editor-styles-wrapper h4 {
  margin-top: 1.7em !important;
  margin-bottom: 0.65em !important;
  color: var(--tp-article-blue) !important;
  font-size: 1.08em !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}

/* Paragraphs made only of bold text are often used as subheadings in older posts. */
@supports selector(p:has(> strong:only-child)) {
  body.single-post .tp-entry-content > p:has(> strong:only-child),
  body.page .tp-entry-content > p:has(> strong:only-child) {
    position: relative;
    margin-top: 1.9em !important;
    margin-bottom: 0.75em !important;
    padding-left: 13px;
    color: var(--tp-article-heading) !important;
    font-size: 1.22em !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
  }
  body.single-post .tp-entry-content > p:has(> strong:only-child)::before,
  body.page .tp-entry-content > p:has(> strong:only-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.22em;
    width: 4px;
    height: 1em;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--tp-article-blue), var(--tp-article-green));
  }
}

body.single-post .tp-entry-content strong,
body.page .tp-entry-content strong,
.editor-styles-wrapper strong {
  color: var(--tp-article-heading) !important;
  font-weight: 800 !important;
}

body.single-post .tp-entry-content a,
body.page .tp-entry-content a,
.editor-styles-wrapper a {
  color: var(--tp-article-blue) !important;
  font-weight: 650;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
body.single-post .tp-entry-content a:hover,
body.page .tp-entry-content a:hover,
.editor-styles-wrapper a:hover {
  color: var(--tp-article-green) !important;
}

body.single-post .tp-entry-content ul,
body.single-post .tp-entry-content ol,
body.page .tp-entry-content ul,
body.page .tp-entry-content ol,
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
  margin-top: 0.8em !important;
  margin-bottom: 1.5em !important;
  padding-left: 1.55em !important;
}

body.single-post .tp-entry-content li,
body.page .tp-entry-content li,
.editor-styles-wrapper li {
  margin-bottom: 0.5em !important;
  color: var(--tp-article-text) !important;
  line-height: 1.75 !important;
}
body.single-post .tp-entry-content ul li::marker,
body.page .tp-entry-content ul li::marker,
.editor-styles-wrapper ul li::marker {
  color: var(--tp-article-blue) !important;
}
body.single-post .tp-entry-content ol li::marker,
body.page .tp-entry-content ol li::marker,
.editor-styles-wrapper ol li::marker {
  color: var(--tp-article-heading) !important;
  font-weight: 800;
}

body.single-post .tp-entry-content blockquote,
body.page .tp-entry-content blockquote,
.editor-styles-wrapper blockquote {
  margin: 1.8em 0 !important;
  padding: 1.3em 1.5em !important;
  color: var(--tp-article-heading) !important;
  line-height: 1.75 !important;
  background: var(--tp-article-blue-soft) !important;
  border: 0 !important;
  border-left: 5px solid var(--tp-article-blue) !important;
  border-radius: 0 10px 10px 0 !important;
}
body.single-post .tp-entry-content blockquote p,
body.page .tp-entry-content blockquote p,
.editor-styles-wrapper blockquote p {
  color: inherit !important;
}
body.single-post .tp-entry-content blockquote p:last-child,
body.page .tp-entry-content blockquote p:last-child,
.editor-styles-wrapper blockquote p:last-child {
  margin-bottom: 0 !important;
}

/* Tables */
body.single-post .tp-entry-content .wp-block-table,
body.page .tp-entry-content .wp-block-table,
.editor-styles-wrapper .wp-block-table {
  margin: 1.5em 0 2em !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.single-post .tp-entry-content table,
body.page .tp-entry-content table,
.editor-styles-wrapper table {
  width: 100% !important;
  margin: 1.5em 0 2em !important;
  border-collapse: collapse !important;
  color: var(--tp-article-text) !important;
  font-size: 0.95em !important;
  display: table !important;
  white-space: normal !important;
}
body.single-post .tp-entry-content .wp-block-table table,
body.page .tp-entry-content .wp-block-table table,
.editor-styles-wrapper .wp-block-table table {
  margin: 0 !important;
  min-width: 660px;
}
body.single-post .tp-entry-content table thead,
body.page .tp-entry-content table thead,
.editor-styles-wrapper table thead,
body.single-post .tp-entry-content table thead th,
body.page .tp-entry-content table thead th,
.editor-styles-wrapper table thead th {
  color: #fff !important;
  background: var(--tp-article-heading) !important;
}
body.single-post .tp-entry-content table th,
body.single-post .tp-entry-content table td,
body.page .tp-entry-content table th,
body.page .tp-entry-content table td,
.editor-styles-wrapper table th,
.editor-styles-wrapper table td {
  padding: 0.9em 1em !important;
  line-height: 1.6 !important;
  border: 1px solid var(--tp-article-line) !important;
  vertical-align: middle !important;
  text-align: left;
}
body.single-post .tp-entry-content table tbody tr:nth-child(even),
body.page .tp-entry-content table tbody tr:nth-child(even),
.editor-styles-wrapper table tbody tr:nth-child(even) {
  background: var(--tp-article-row) !important;
}

body.single-post .tp-entry-content figure,
body.page .tp-entry-content figure,
.editor-styles-wrapper figure {
  margin-top: 2.1em !important;
  margin-bottom: 2.1em !important;
}
body.single-post .tp-entry-content figure img,
body.single-post .tp-entry-content img,
body.page .tp-entry-content figure img,
body.page .tp-entry-content img,
.editor-styles-wrapper figure img {
  border-radius: 10px !important;
}
body.single-post .tp-entry-content figcaption,
body.page .tp-entry-content figcaption,
.editor-styles-wrapper figcaption {
  margin-top: 0.7em !important;
  color: var(--tp-article-muted) !important;
  font-size: 0.88em !important;
  line-height: 1.6 !important;
  text-align: center !important;
}
body.single-post .tp-entry-content hr,
body.page .tp-entry-content hr,
.editor-styles-wrapper hr {
  margin: 2.6em 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--tp-article-line) !important;
}

body.single-post .tp-entry-content .wp-block-button__link,
body.page .tp-entry-content .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
  padding: 0.85em 1.45em !important;
  color: #fff !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  background: var(--tp-article-blue) !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
body.single-post .tp-entry-content .wp-block-button__link:hover,
body.page .tp-entry-content .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button__link:hover {
  color: #fff !important;
  background: var(--tp-article-heading) !important;
  transform: translateY(-1px);
}

.termpick-success-box,
body.single-post .tp-entry-content .termpick-success-box,
body.page .tp-entry-content .termpick-success-box {
  margin: 1.7em 0 !important;
  padding: 1.25em 1.4em !important;
  color: var(--tp-article-heading) !important;
  line-height: 1.75 !important;
  background: var(--tp-article-green-soft) !important;
  border-left: 5px solid var(--tp-article-green) !important;
  border-radius: 0 10px 10px 0 !important;
}
.termpick-info-box,
body.single-post .tp-entry-content .termpick-info-box,
body.page .tp-entry-content .termpick-info-box {
  margin: 1.7em 0 !important;
  padding: 1.25em 1.4em !important;
  color: var(--tp-article-heading) !important;
  line-height: 1.75 !important;
  background: var(--tp-article-blue-soft) !important;
  border-left: 5px solid var(--tp-article-blue) !important;
  border-radius: 0 10px 10px 0 !important;
}
.termpick-muted { color: var(--tp-article-muted) !important; font-size: 0.92em; }

body.single-post .tp-entry-content pre,
body.page .tp-entry-content pre,
.editor-styles-wrapper pre {
  overflow-x: auto;
  padding: 18px !important;
  color: #e7eef9 !important;
  background: #0c1727 !important;
  border-radius: 12px !important;
}
body.single-post .tp-entry-content :not(pre) > code,
body.page .tp-entry-content :not(pre) > code,
.editor-styles-wrapper :not(pre) > code {
  padding: 0.12em 0.4em;
  color: var(--tp-article-heading) !important;
  background: #eef4fc !important;
  border-radius: 5px;
  font-size: 0.92em;
}

/* Dark mode */
html.tp-dark body.single-post .tp-entry-content,
html.tp-dark body.page .tp-entry-content,
body.tp-dark.single-post .tp-entry-content,
body.tp-dark.page .tp-entry-content {
  color: #d7e0ec !important;
}
html.tp-dark body.single-post .tp-entry-content p,
html.tp-dark body.single-post .tp-entry-content li,
html.tp-dark body.page .tp-entry-content p,
html.tp-dark body.page .tp-entry-content li,
body.tp-dark.single-post .tp-entry-content p,
body.tp-dark.single-post .tp-entry-content li,
body.tp-dark.page .tp-entry-content p,
body.tp-dark.page .tp-entry-content li {
  color: #d7e0ec !important;
}
html.tp-dark body.single-post .tp-entry-content h2,
html.tp-dark body.single-post .tp-entry-content h3,
html.tp-dark body.single-post .tp-entry-content strong,
html.tp-dark body.page .tp-entry-content h2,
html.tp-dark body.page .tp-entry-content h3,
html.tp-dark body.page .tp-entry-content strong,
body.tp-dark.single-post .tp-entry-content h2,
body.tp-dark.single-post .tp-entry-content h3,
body.tp-dark.single-post .tp-entry-content strong,
body.tp-dark.page .tp-entry-content h2,
body.tp-dark.page .tp-entry-content h3,
body.tp-dark.page .tp-entry-content strong {
  color: #f3f7fc !important;
}
html.tp-dark body.single-post .tp-entry-content h2,
html.tp-dark body.page .tp-entry-content h2,
body.tp-dark.single-post .tp-entry-content h2,
body.tp-dark.page .tp-entry-content h2 { border-bottom-color: #263a56 !important; }
html.tp-dark body.single-post .tp-entry-content h4,
html.tp-dark body.single-post .tp-entry-content a,
html.tp-dark body.page .tp-entry-content h4,
html.tp-dark body.page .tp-entry-content a,
body.tp-dark.single-post .tp-entry-content h4,
body.tp-dark.single-post .tp-entry-content a,
body.tp-dark.page .tp-entry-content h4,
body.tp-dark.page .tp-entry-content a { color: #78a7ff !important; }
html.tp-dark body.single-post .tp-entry-content a:hover,
html.tp-dark body.page .tp-entry-content a:hover,
body.tp-dark.single-post .tp-entry-content a:hover,
body.tp-dark.page .tp-entry-content a:hover { color: #5de0a5 !important; }
html.tp-dark body.single-post .tp-entry-content blockquote,
html.tp-dark body.page .tp-entry-content blockquote,
body.tp-dark.single-post .tp-entry-content blockquote,
body.tp-dark.page .tp-entry-content blockquote {
  color: #dce8f8 !important;
  background: #142d52 !important;
  border-left-color: #6ca4ff !important;
}
html.tp-dark body.single-post .tp-entry-content table,
html.tp-dark body.page .tp-entry-content table,
body.tp-dark.single-post .tp-entry-content table,
body.tp-dark.page .tp-entry-content table { color: #d7e0ec !important; }
html.tp-dark body.single-post .tp-entry-content table thead,
html.tp-dark body.single-post .tp-entry-content table thead th,
html.tp-dark body.page .tp-entry-content table thead,
html.tp-dark body.page .tp-entry-content table thead th,
body.tp-dark.single-post .tp-entry-content table thead,
body.tp-dark.single-post .tp-entry-content table thead th,
body.tp-dark.page .tp-entry-content table thead,
body.tp-dark.page .tp-entry-content table thead th { background: #18345c !important; color: #fff !important; }
html.tp-dark body.single-post .tp-entry-content table th,
html.tp-dark body.single-post .tp-entry-content table td,
html.tp-dark body.page .tp-entry-content table th,
html.tp-dark body.page .tp-entry-content table td,
body.tp-dark.single-post .tp-entry-content table th,
body.tp-dark.single-post .tp-entry-content table td,
body.tp-dark.page .tp-entry-content table th,
body.tp-dark.page .tp-entry-content table td { border-color: #2a3b52 !important; }
html.tp-dark body.single-post .tp-entry-content table tbody tr:nth-child(even),
html.tp-dark body.page .tp-entry-content table tbody tr:nth-child(even),
body.tp-dark.single-post .tp-entry-content table tbody tr:nth-child(even),
body.tp-dark.page .tp-entry-content table tbody tr:nth-child(even) { background: #152238 !important; }
html.tp-dark .termpick-success-box,
body.tp-dark .termpick-success-box { color: #ddf8eb !important; background: #12382c !important; border-left-color: #54d69a !important; }
html.tp-dark .termpick-info-box,
body.tp-dark .termpick-info-box { color: #dce8f8 !important; background: #142d52 !important; border-left-color: #6ca4ff !important; }
html.tp-dark body.single-post .tp-entry-content :not(pre) > code,
html.tp-dark body.page .tp-entry-content :not(pre) > code,
body.tp-dark.single-post .tp-entry-content :not(pre) > code,
body.tp-dark.page .tp-entry-content :not(pre) > code { color: #dce8f8 !important; background: #182a43 !important; }

@media (max-width: 768px) {
  body.single-post .tp-article .tp-entry-content,
  body.page .tp-article .tp-entry-content,
  .editor-styles-wrapper {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }
  body.single-post .tp-entry-content p,
  body.page .tp-entry-content p,
  .editor-styles-wrapper p {
    margin-bottom: 1.25em !important;
    line-height: 1.8 !important;
  }
  body.single-post .tp-entry-content h2,
  body.page .tp-entry-content h2,
  .editor-styles-wrapper h2 {
    margin-top: 2.2em !important;
    font-size: 1.45em !important;
  }
  body.single-post .tp-entry-content h3,
  body.page .tp-entry-content h3,
  .editor-styles-wrapper h3 {
    margin-top: 1.8em !important;
    font-size: 1.2em !important;
  }
  body.single-post .tp-entry-content table,
  body.page .tp-entry-content table,
  .editor-styles-wrapper table {
    font-size: 0.88em !important;
  }
  body.single-post .tp-entry-content table th,
  body.single-post .tp-entry-content table td,
  body.page .tp-entry-content table th,
  body.page .tp-entry-content table td,
  .editor-styles-wrapper table th,
  .editor-styles-wrapper table td {
    padding: 0.75em 0.7em !important;
  }
  body.single-post .tp-entry-content blockquote,
  body.page .tp-entry-content blockquote,
  .editor-styles-wrapper blockquote,
  .termpick-success-box,
  .termpick-info-box {
    padding: 1.05em 1.1em !important;
  }
}