/* ===================================================================
   블로그 (blog/index.php, blog/view.php) — 화이트 테마
   ※ 사이트 다른 페이지는 다크, 블로그만 화이트로 운영합니다.
      페이지에서 $lightPage = true; 지정 → body.page-light + #header.dark
   =================================================================== */

/* ---- 화이트 페이지 공통 (헤더/본문 배경) ---- */
body.page-light {
  background: #fff;
}
body.page-light #header {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #ececec;
}
body.page-light.is-sticky-nav-zone #header,
body.page-light.is-menu-open #header {
  background: #fff;
  border-bottom: 1px solid #ececec;
}
body.page-light #header .logo { color: #0a0a0a; }
body.page-light #header .side a { background: #0a0a0a; color: #fff; }
body.page-light #header .side a:hover { background: var(--color-green); color: #0a0a0a; }
body.page-light #header .side a.btn-sticky-nav { background: var(--color-green); color: #0a0a0a; }
body.page-light #header .side a.btn-sticky-nav:hover { background: #0a0a0a; color: #fff; }
body.page-light #header .btn-menu { color: #0a0a0a; }

/* ---- 블로그 색상 토큰 ---- */
.bl-section {
  --bl-bg: #fff;
  --bl-soft: #f6f7f3;
  --bl-ink: #101210;
  --bl-ink-2: #4b4f49;
  --bl-ink-3: #8a8e85;
  --bl-line: #e8eae3;
  --bl-line-2: #d5d9cd;
  --bl-accent: #a6ff00;          /* 채움(칩·버튼) 전용 */
  --bl-accent-ink: #4c7500;      /* 흰 배경 위 글자·링크 전용 */
  --bl-accent-wash: #f1f8e2;

  background: var(--bl-bg);
  padding: var(--area-sapce);
  color: var(--bl-ink);
  min-height: 70vh;
}
.bl-inner {max-width: 1400px;margin: 0 auto;padding-top: 80px;}
.bl-inner--narrow {max-width: 1000px;}

/* ---- 브레드크럼 ---- */
.bl-crumb {display: flex;flex-wrap: wrap;align-items: center;gap: 8px;font-size: 12px;color: var(--bl-ink-3);margin-bottom: 28px;}
.bl-crumb a {color: var(--bl-ink-3);transition: color .2s ease;}
.bl-crumb a:hover {color: var(--bl-accent-ink);}
.bl-crumb .on {color: var(--bl-ink);font-weight: 600;}

/* ---- 히어로 ---- */
.bl-hero {margin-bottom: 48px;}
.bl-eyebrow {display: flex;align-items: center;gap: 10px;margin-bottom: 22px;}
.bl-dot {width: 8px;height: 8px;background: var(--bl-accent-ink);border-radius: 50%;display: inline-block;}
.bl-eyebrow span:last-child {font-size: 13px;letter-spacing: .14em;color: var(--bl-accent-ink);font-weight: 700;text-transform: uppercase;}
.bl-title {font-size: var(--title-size);line-height: 1.2;font-weight: 800;letter-spacing: -0.03em;margin: 0 0 20px;color: var(--bl-ink);}
.bl-desc {font-size: 16px;line-height: 1.75;color: var(--bl-ink-2);margin: 0;max-width: 640px;}

/* ---- 카테고리 탭 ---- */
.bl-filters {border-bottom: 1px solid var(--bl-line);padding-bottom: 20px;margin-bottom: 28px;}
.bl-filter-row {display: flex;flex-wrap: wrap;gap: 8px;align-items: center;}

.bl-tab-btn {padding: 9px 17px;border: 1px solid var(--bl-line-2);border-radius: 999px;background: transparent;color: var(--bl-ink-2);font-size: 14px;font-weight: 600;cursor: pointer;transition: border-color .2s ease, color .2s ease, background .2s ease;display: inline-flex;align-items: center;gap: 6px;}
.bl-tab-btn:hover {border-color: var(--bl-ink);color: var(--bl-ink);}
.bl-tab-btn.is-active {background: var(--bl-ink);border-color: var(--bl-ink);color: #fff;}
.bl-tab-btn em {font-style: normal;font-size: 11px;opacity: .55;}

.bl-tag {display: inline-block;padding: 6px 12px;border: 1px solid var(--bl-line-2);border-radius: 999px;color: var(--bl-ink-2);font-size: 12.5px;font-weight: 600;transition: border-color .2s ease, color .2s ease, background .2s ease;}
.bl-tag:hover {border-color: var(--bl-accent-ink);color: var(--bl-accent-ink);background: var(--bl-accent-wash);}

.bl-result-bar {font-size: 14px;color: var(--bl-ink-3);margin-bottom: 24px;}
.bl-result-bar strong {color: var(--bl-ink);font-weight: 800;}

/* ---- 카드 ---- */
.bl-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;}
.bl-grid--3 {grid-template-columns: repeat(3, 1fr);}
.bl-featured {margin-bottom: 40px;padding-bottom: 40px;border-bottom: 1px solid var(--bl-line);}

.bl-card {border: 1px solid var(--bl-line);border-radius: 12px;background: #fff;overflow: hidden;transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;}
.bl-card:hover {border-color: var(--bl-line-2);transform: translateY(-3px);box-shadow: 0 12px 32px -20px rgba(16,18,16,.4);}
.bl-card-link {display: flex;flex-direction: column;height: 100%;color: inherit;}
.bl-card-thumb {position: relative;aspect-ratio: 16 / 9;overflow: hidden;background: var(--bl-soft);display: flex;align-items: center;justify-content: center;}
.bl-card-thumb img {width: 100%;height: 100%;object-fit: cover;transition: transform .5s ease;}
.bl-card:hover .bl-card-thumb img {transform: scale(1.04);}
.bl-card-thumb-fallback {font-size: 13px;font-weight: 700;letter-spacing: .06em;color: var(--bl-ink-3);border: 1px solid var(--bl-line-2);border-radius: 999px;padding: 7px 16px;background: #fff;}
.bl-card-body {padding: 22px 24px 26px;display: flex;flex-direction: column;flex: 1;}
.bl-card-meta {display: flex;flex-wrap: wrap;align-items: center;gap: 10px;font-size: 11.5px;color: var(--bl-ink-3);margin-bottom: 12px;}
.bl-card-cat {color: var(--bl-accent-ink);font-weight: 700;}
.bl-card-title {font-size: 19px;line-height: 1.45;font-weight: 800;letter-spacing: -0.025em;margin: 0 0 10px;color: var(--bl-ink);}
.bl-card-desc {font-size: 14px;line-height: 1.7;color: var(--bl-ink-2);margin: 0 0 18px;flex: 1;}
.bl-card-more {font-size: 13px;font-weight: 700;color: var(--bl-ink-3);transition: color .2s ease;}
.bl-card:hover .bl-card-more {color: var(--bl-accent-ink);}

/* 큰 카드 (첫 글) */
.bl-card--big {border-color: var(--bl-line);}
.bl-card--big .bl-card-link {flex-direction: row;}
.bl-card--big .bl-card-thumb {width: 52%;aspect-ratio: auto;min-height: 340px;flex-shrink: 0;}
.bl-card--big .bl-card-body {padding: 44px 46px 48px;justify-content: center;}
.bl-card--big .bl-card-title {font-size: 31px;line-height: 1.32;}
.bl-card--big .bl-card-desc {font-size: 15px;flex: 0;margin-bottom: 22px;}

/* ---- 페이징 ---- */
.bl-paging {display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;margin-top: 52px;}
.bl-page-btn {min-width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;padding: 0 12px;border: 1px solid var(--bl-line-2);border-radius: 8px;color: var(--bl-ink-2);font-size: 13px;font-weight: 700;transition: border-color .2s ease, color .2s ease, background .2s ease;}
.bl-page-btn:hover {border-color: var(--bl-ink);color: var(--bl-ink);}
.bl-page-btn.is-active {background: var(--bl-ink);border-color: var(--bl-ink);color: #fff;}

.bl-empty {text-align: center;padding: 100px 20px;color: var(--bl-ink-3);font-size: 15px;line-height: 1.9;}
.bl-empty a {color: var(--bl-accent-ink);font-weight: 600;}

/* ---- 하단 CTA (목록) ---- */
.bl-bottom-cta {margin-top: 80px;border-radius: 16px;background: #0a0a0a;color: #fff;padding: 48px;display: flex;flex-wrap: wrap;gap: 32px;align-items: center;justify-content: space-between;}
.bl-bottom-cta-eyebrow {font-size: 12px;letter-spacing: .14em;color: var(--color-green);font-weight: 700;margin: 0 0 14px;}
.bl-bottom-cta h2 {font-size: 30px;line-height: 1.35;font-weight: 800;letter-spacing: -0.03em;margin: 0 0 14px;color: #fff;}
.bl-bottom-cta-desc {font-size: 15px;line-height: 1.7;color: #9a9a9a;margin: 0;}
.bl-bottom-cta-btns {display: flex;flex-wrap: wrap;gap: 10px;}
.bl-bottom-cta .bl-btn {border-color: #333;color: #fff;}
.bl-bottom-cta .bl-btn:hover {border-color: #777;background: #161616;}
.bl-bottom-cta .bl-btn--primary {background: var(--color-green);border-color: var(--color-green);color: #0a0a0a;}

.bl-btn {display: inline-flex;align-items: center;justify-content: center;padding: 14px 24px;border: 1px solid var(--bl-line-2);border-radius: 8px;color: var(--bl-ink);font-size: 14px;font-weight: 700;transition: border-color .2s ease, background .2s ease, color .2s ease;}
.bl-btn:hover {border-color: var(--bl-ink);background: var(--bl-soft);}
.bl-btn--primary {background: var(--bl-ink);border-color: var(--bl-ink);color: #fff;}
.bl-btn--primary:hover {background: #000;border-color: #000;color: #fff;}

/* =========================================================
   상세 페이지
   ========================================================= */
.bl-preview-bar {background: var(--bl-accent-wash);border: 1px solid #cfe39a;border-radius: 8px;color: #46690b;font-size: 13px;font-weight: 700;padding: 12px 18px;margin-bottom: 24px;}

.bl-view-head {margin-bottom: 36px;}
.bl-view-cat {display: inline-block;font-size: 12px;font-weight: 700;letter-spacing: .04em;color: var(--bl-accent-ink);border: 1px solid #d5e6ac;background: var(--bl-accent-wash);border-radius: 999px;padding: 6px 14px;margin-bottom: 20px;}
.bl-view-title {font-size: 42px;line-height: 1.3;font-weight: 800;letter-spacing: -0.035em;margin: 0 0 18px;color: var(--bl-ink);}
.bl-view-sub {font-size: 17px;line-height: 1.7;color: var(--bl-ink-2);margin: 0 0 22px;}
.bl-view-meta {display: flex;flex-wrap: wrap;gap: 16px;font-size: 13px;color: var(--bl-ink-3);padding-top: 20px;border-top: 1px solid var(--bl-line);}

.bl-view-hero {margin: 0 0 44px;}
.bl-view-hero img {width: 100%;height: auto;display: block;border-radius: 12px;}

.bl-view-layout {display: grid;grid-template-columns: 220px minmax(0, 1fr);gap: 56px;align-items: start;}
.bl-view-layout--full {grid-template-columns: minmax(0, 1fr);gap: 0;}

/* 목차 */
.bl-toc {position: sticky;top: 120px;border-left: 2px solid var(--bl-line);padding-left: 20px;}
.bl-toc-title {font-size: 11px;font-weight: 700;letter-spacing: .12em;color: var(--bl-accent-ink);text-transform: uppercase;margin: 0 0 14px;}
.bl-toc ol {list-style: none;margin: 0;padding: 0;}
.bl-toc li {margin-bottom: 10px;}
.bl-toc li.lv3 {padding-left: 12px;}
.bl-toc a {font-size: 13px;line-height: 1.5;color: var(--bl-ink-3);transition: color .2s ease;display: block;}
.bl-toc a:hover {color: var(--bl-ink);}
.bl-toc a.is-active {color: var(--bl-ink);font-weight: 700;}

/* ---- 본문 타이포그래피 ---- */
.bl-content {font-size: 17px;line-height: 1.9;color: #33362f;letter-spacing: -0.01em;}
.bl-content > *:first-child {margin-top: 0;}
.bl-content p {margin: 0 0 26px;}
.bl-content strong {color: var(--bl-ink);font-weight: 700;}
.bl-content a {color: var(--bl-accent-ink);text-decoration: underline;text-underline-offset: 3px;font-weight: 600;}
.bl-content a:hover {background: var(--bl-accent-wash);}

.bl-content h2 {font-size: 28px;line-height: 1.4;font-weight: 800;color: var(--bl-ink);letter-spacing: -0.03em;margin: 62px 0 22px;padding-top: 32px;border-top: 1px solid var(--bl-line);scroll-margin-top: 120px;}
.bl-content h3 {font-size: 20px;line-height: 1.5;font-weight: 700;color: var(--bl-ink);letter-spacing: -0.025em;margin: 40px 0 14px;scroll-margin-top: 120px;}
.bl-content h4 {font-size: 17px;font-weight: 700;color: var(--bl-ink);margin: 30px 0 12px;}

.bl-content ul, .bl-content ol {margin: 0 0 26px;padding-left: 4px;}
.bl-content li {margin-bottom: 12px;padding-left: 24px;position: relative;list-style: none;}
.bl-content ul > li::before {content: '';position: absolute;left: 6px;top: 13px;width: 5px;height: 5px;border-radius: 50%;background: var(--bl-accent-ink);}
.bl-content ol {counter-reset: bl-ol;}
.bl-content ol > li {counter-increment: bl-ol;}
.bl-content ol > li::before {content: counter(bl-ol);position: absolute;left: 0;top: 0;font-size: 13px;font-weight: 800;color: var(--bl-accent-ink);line-height: 1.9;}
.bl-content ul.blog-check > li::before {content: '✓';background: none;left: 0;top: 0;width: auto;height: auto;font-size: 14px;font-weight: 800;color: var(--bl-accent-ink);line-height: 1.9;border-radius: 0;}

.bl-content blockquote {margin: 32px 0;padding: 4px 0 4px 24px;border-left: 3px solid var(--bl-ink);color: var(--bl-ink-2);font-size: 16.5px;}
.bl-content blockquote p:last-child {margin-bottom: 0;}

.bl-content table {width: 100%;border-collapse: collapse;margin: 0 0 30px;font-size: 14.5px;display: block;overflow-x: auto;}
.bl-content table thead th {background: var(--bl-soft);color: var(--bl-ink);font-weight: 700;text-align: left;padding: 14px 16px;border: 1px solid var(--bl-line);white-space: nowrap;}
.bl-content table td {padding: 14px 16px;border: 1px solid var(--bl-line);color: var(--bl-ink-2);vertical-align: top;}
.bl-content table tbody tr:hover td {background: #fafbf7;}

.bl-content img {max-width: 100%;height: auto;display: block;margin: 32px 0;border-radius: 10px;}
.bl-content figure {margin: 32px 0;}
.bl-content figure img {margin: 0;}
.bl-content figcaption {font-size: 13px;color: var(--bl-ink-3);text-align: center;margin-top: 12px;}

.bl-content code {background: var(--bl-soft);border: 1px solid var(--bl-line);border-radius: 4px;padding: 2px 6px;font-size: 13.5px;color: #2f5c00;font-family: 'SFMono-Regular', Consolas, monospace;}
.bl-content pre {background: #14170e;border-radius: 10px;padding: 20px 22px;overflow-x: auto;margin: 0 0 28px;}
.bl-content pre code {background: none;border: none;padding: 0;color: #cfe89a;line-height: 1.7;display: block;}

.bl-content hr {border: none;border-top: 1px solid var(--bl-line);margin: 48px 0;}

/* 콜아웃 박스 */
.bl-content .blog-callout {border: 1px solid #d9e8b4;background: var(--bl-accent-wash);border-radius: 10px;padding: 22px 24px;margin: 0 0 30px;}
.bl-content .blog-callout > strong {display: block;font-size: 14px;color: #3f6300;margin-bottom: 10px;}
.bl-content .blog-callout p {margin: 0;font-size: 15.5px;line-height: 1.8;color: #4b5340;}
.bl-content .blog-callout--warn {border-color: #f0dcae;background: #fdf7e8;}
.bl-content .blog-callout--warn > strong {color: #8a6300;}
.bl-content .blog-callout--warn p {color: #5c5140;}

/* ---- 태그 / 공유 ---- */
.bl-view-tags {display: flex;flex-wrap: wrap;gap: 8px;margin: 56px 0 0;padding-top: 32px;border-top: 1px solid var(--bl-line);}
.bl-share {display: flex;flex-wrap: wrap;align-items: center;gap: 10px;margin-top: 28px;}
.bl-share-label {font-size: 12px;color: var(--bl-ink-3);font-weight: 700;letter-spacing: .06em;margin-right: 4px;}
.bl-share-btn {padding: 9px 16px;border: 1px solid var(--bl-line-2);border-radius: 8px;background: #fff;color: var(--bl-ink-2);font: inherit;font-size: 13px;font-weight: 600;cursor: pointer;transition: border-color .2s ease, color .2s ease;}
.bl-share-btn:hover {border-color: var(--bl-ink);color: var(--bl-ink);}

/* ---- 본문 하단 CTA ---- */
.bl-cta {margin-top: 64px;border-radius: 16px;background: #0a0a0a;color: #fff;padding: 46px 40px;text-align: center;}
.bl-cta-eyebrow {font-size: 12px;letter-spacing: .16em;color: var(--color-green);font-weight: 700;margin: 0 0 16px;}
.bl-cta-title {font-size: 26px;line-height: 1.4;font-weight: 800;letter-spacing: -0.03em;margin: 0 0 14px;color: #fff;}
.bl-cta-desc {font-size: 15px;line-height: 1.75;color: #9a9a9a;margin: 0 0 26px;}
.bl-cta-btns {display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;}
.bl-cta .bl-btn {border-color: #333;color: #fff;}
.bl-cta .bl-btn:hover {border-color: #777;background: #161616;}
.bl-cta .bl-btn--primary {background: var(--color-green);border-color: var(--color-green);color: #0a0a0a;}
.bl-cta .bl-btn--primary:hover {background: #b8ff33;border-color: #b8ff33;}

/* ---- 이전 / 다음 ---- */
.bl-adjacent {display: grid;grid-template-columns: repeat(2, 1fr);gap: 16px;margin-top: 48px;}
.bl-adj {border: 1px solid var(--bl-line);border-radius: 12px;padding: 22px 24px;transition: border-color .2s ease, background .2s ease;display: block;}
.bl-adj:hover {border-color: var(--bl-line-2);background: var(--bl-soft);}
.bl-adj span {display: block;font-size: 11px;color: var(--bl-ink-3);font-weight: 700;letter-spacing: .08em;margin-bottom: 8px;}
.bl-adj strong {display: block;font-size: 15px;line-height: 1.5;color: var(--bl-ink);font-weight: 700;}
.bl-adj:hover strong {color: var(--bl-accent-ink);}
.bl-adj--next {text-align: right;grid-column: 2;}

/* ---- 관련 글 ---- */
.bl-related {margin-top: 96px;padding-top: 56px;border-top: 1px solid var(--bl-line);}
.bl-related-title {font-size: 22px;font-weight: 800;letter-spacing: -0.03em;margin: 0 0 28px;color: var(--bl-ink);}
.bl-backlist {margin-top: 56px;text-align: center;}
.bl-backlist a {font-size: 14px;font-weight: 700;color: var(--bl-ink-3);transition: color .2s ease;}
.bl-backlist a:hover {color: var(--bl-accent-ink);}

/* ===== 반응형 ===== */
@media (max-width: 1200px) {
  .bl-view-layout {grid-template-columns: minmax(0, 1fr);gap: 0;}
  .bl-toc {position: static;border-left: none;border: 1px solid var(--bl-line);border-radius: 12px;padding: 20px 22px;margin-bottom: 40px;background: var(--bl-soft);}
  .bl-toc li.lv3 {padding-left: 14px;}
}

@media (max-width: 1024px) {
  .bl-grid, .bl-grid--3 {grid-template-columns: repeat(2, 1fr);gap: 24px;}
  .bl-card--big .bl-card-link {flex-direction: column;}
  .bl-card--big .bl-card-thumb {width: 100%;min-height: 0;aspect-ratio: 16 / 9;}
  .bl-card--big .bl-card-body {padding: 28px 26px 32px;}
  .bl-card--big .bl-card-title {font-size: 24px;}
  .bl-view-title {font-size: 34px;}
  .bl-bottom-cta {padding: 36px 30px;}
}

@media (max-width: 768px) {
  .bl-inner {padding-top: 40px;}
  .bl-grid, .bl-grid--3 {grid-template-columns: 1fr;gap: 20px;}
  .bl-view-title {font-size: 26px;}
  .bl-view-sub {font-size: 15px;}
  .bl-content {font-size: 16px;}
  .bl-content h2 {font-size: 22px;margin: 48px 0 18px;padding-top: 26px;}
  .bl-content h3 {font-size: 18px;margin: 32px 0 12px;}
  .bl-adjacent {grid-template-columns: 1fr;}
  .bl-adj--next {grid-column: 1;text-align: left;}
  .bl-cta {padding: 32px 22px;}
  .bl-cta-title {font-size: 21px;}
  .bl-bottom-cta {padding: 30px 22px;}
  .bl-bottom-cta h2 {font-size: 23px;}
  .bl-btn {padding: 13px 20px;font-size: 13px;flex: 1 1 auto;}
}