/*
 * fx 블로그(화면키 blog) — 목록(page-blog.php)과 글 상세(single.php)를 한 파일이 입힌다. 접두사 fx-bl(-) / fx-bls(-).
 * 마크업 일부는 FluxHub_Blog 조각(클래스 fx-bl-*, fx-bl__*)이라 그 이름에 모양을 입힌다.
 * 구획: 1 머리(어둡게, 얇게) / 2 분류 내비 / 3 대표 글·카드 / 4 업종 줄·더 보기·빈 상태 / 5 표지 / 6 글 상세 / 7 본문 타이포 / 8 연결 카드·관련 글·마지막 안내 / 9 반응형
 * 값은 전부 --fx-* 토큰. 그라디언트 없음.
 */

.fx-bl,.fx-bls{overflow-x:clip;background:var(--fx-bg);color:var(--fx-fg)}

/* ===== 1. 머리 ===== */
.fx-bl-head{padding:132px 0 56px;background:var(--fx-s0)}
.fx-bl-h1{font-size:clamp(32px,5.2vw,56px);line-height:1.2;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.fx-bl-lead{margin-top:var(--fx-sp-4);max-width:640px;font-size:18px;line-height:1.7;color:var(--fx-fg-2);word-break:keep-all;text-wrap:balance}

/* ===== 본문 틀: 왼쪽 분류 + 오른쪽 목록 ===== */
.fx-bl-body{padding:var(--fx-sp-8) 0 var(--fx-sp-24)}
.fx-bl-layout{display:grid;gap:var(--fx-sp-6)}
.fx-bl__main{min-width:0}

/* ===== 2. 분류 내비 (모바일: details 드롭다운) ===== */
.fx-bl__side{min-width:0}
.fx-bl__navtitle{display:none}
.fx-bl__drop>summary{
  display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 var(--fx-sp-4);
  border-radius:var(--fx-radius-m);background:var(--fx-card);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);
  font-size:17px;font-weight:600;cursor:pointer;list-style:none;
}
.fx-bl__drop>summary::-webkit-details-marker{display:none}
.fx-bl__drop>summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform var(--fx-time-mid) var(--fx-ease-std)}
.fx-bl__drop[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.fx-bl__list{margin-top:var(--fx-sp-2)}
.fx-bl__list a{display:flex;align-items:center;min-height:44px;padding:0 var(--fx-sp-3);border-radius:var(--fx-radius-s);font-size:16px;color:var(--fx-fg-2);transition:background-color var(--fx-time-fast) var(--fx-ease-std),color var(--fx-time-fast)}
.fx-bl__list a:hover{background:var(--fx-tint);color:var(--fx-fg)}
.fx-bl__list a[aria-current="page"]{background:var(--fx-fg);color:var(--fx-bg);font-weight:700}
.fx-bl__navhead{margin:var(--fx-sp-4) var(--fx-sp-3) 0;font-size:var(--fx-size-small);font-weight:700;color:var(--fx-fg-3)}

/* ===== 3. 대표 글·카드 ===== */
.fx-bl__h2{font-size:26px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
.fx-bl__h2--lead{margin-bottom:var(--fx-sp-4)}
.fx-bl-feat{display:grid;gap:var(--fx-sp-4);margin-bottom:var(--fx-sp-12)}
.fx-bl-feat__thumb,.fx-bl-card__thumb{display:block;overflow:hidden;border-radius:var(--fx-radius-l);background:var(--fx-s1)}
.fx-bl-feat__thumb{aspect-ratio:1200/630}
.fx-bl-feat__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--fx-sp-3);justify-content:center}
.fx-bl-feat__title{font-size:clamp(26px,3vw,36px);line-height:1.3;font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.fx-bl-feat__title a:hover,.fx-bl-card__title a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.fx-bl-feat__desc{font-size:17px;line-height:1.75;color:var(--fx-fg-2)}
.fx-bl-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--fx-radius-pill);background:var(--fx-fg);color:var(--fx-bg);font-size:15px;font-weight:600;letter-spacing:.01em;line-height:1.5;white-space:nowrap}
.fx-bl-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--fx-size-small);line-height:1.6;color:var(--fx-fg-3);font-variant-numeric:tabular-nums}
.fx-bl-card__meta .fx-bl-chip{background:var(--fx-card-2);color:var(--fx-fg);min-height:28px}
.fx-bl-card__meta a.fx-bl-chip,.fx-bl-feat__body a.fx-bl-chip{min-height:44px;border-block:6px solid transparent;background-clip:padding-box}
.fx-bl-card__meta a.fx-bl-chip{margin:-8px 0}

.fx-bl__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--fx-sp-8) var(--fx-sp-6)}
.fx-bl-card{display:flex;flex-direction:column;gap:var(--fx-sp-3);min-width:0}
.fx-bl-card__thumb{aspect-ratio:1200/630;transition:transform var(--fx-time-mid) var(--fx-ease-out),box-shadow var(--fx-time-mid) var(--fx-ease-std)}
.fx-bl-card:hover .fx-bl-card__thumb{transform:translateY(-4px);box-shadow:var(--fx-shadow-paper)}
.fx-bl-card__title{font-size:20px;line-height:1.45;font-weight:700;letter-spacing:-.015em;word-break:keep-all}
.fx-bl-img{width:100%;height:100%;object-fit:cover}

/* ===== 4. 업종 줄·더 보기·빈 상태 ===== */
.fx-bl__row{margin-top:var(--fx-sp-16);padding-top:var(--fx-sp-8);border-top:1px solid var(--fx-edge-strong)}
.fx-bl__rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fx-sp-4);margin-bottom:var(--fx-sp-6)}
.fx-bl__row .fx-bl__h2{font-size:24px}
.fx-bl__all{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:700;color:var(--fx-fg-2)}
.fx-bl__all:hover{color:var(--fx-fg);text-decoration:underline;text-underline-offset:4px}
.fx-bl__more{display:flex;justify-content:center;margin-top:var(--fx-sp-12)}
.fx-bl__empty{display:grid;justify-items:start;gap:var(--fx-sp-3);padding:var(--fx-sp-8);border-radius:var(--fx-radius-l);border:1px dashed var(--fx-edge-strong);background:var(--fx-tint)}
.fx-bl__empty-t{font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.fx-bl__empty-d{max-width:520px;font-size:17px;color:var(--fx-fg-2)}
.fx-bl__empty .fs-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:56px;margin-top:var(--fx-sp-2);padding:0 30px;border-radius:var(--fx-radius-pill);
  background:var(--fx-fg);color:var(--fx-bg);font-size:18px;font-weight:700;transition:transform .25s var(--fx-ease-std)
}
.fx-bl__empty .fs-btn:hover{transform:translateY(-2px)}

/* ===== 5. 표지 — 대표 이미지가 없으면 어두운 면 4가지(면 단계·태그 모양·정렬을 달리) ===== */
.fx-bl-cover{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;container-type:inline-size;padding:16px;background:var(--fx-s1);color:var(--fx-t1)}
.fx-bl-cover__tag{align-self:flex-start;padding:1px 10px;border-radius:var(--fx-radius-pill);box-shadow:inset 0 0 0 1px var(--fx-edge-ink-strong);font-size:13px;line-height:1.5;font-weight:600;color:var(--fx-t2)}
.fx-bl-cover__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-size:clamp(15px,5.6cqw,24px);font-weight:700;line-height:1.35;letter-spacing:-.02em;word-break:keep-all}
.fx-bl-cover--v1{background:var(--fx-s0)}
.fx-bl-cover--v1 .fx-bl-cover__tag{color:var(--fx-brand);box-shadow:inset 0 0 0 1px var(--fx-brand-deep)}
.fx-bl-cover--v2{background:var(--fx-s2)}
.fx-bl-cover--v3{background:var(--fx-s1)}
.fx-bl-cover--v3 .fx-bl-cover__tag{background:var(--fx-t1);color:var(--fx-k1);box-shadow:none;font-weight:700}
.fx-bl-cover--v4{background:var(--fx-s3)}
.fx-bl-cover--v4 .fx-bl-cover__t{text-align:right}
.fx-bl-cover--v4 .fx-bl-cover__tag{align-self:flex-end}

/* ===== 6. 글 상세 머리 ===== */
.fx-bls-head{padding:132px 0 48px;background:var(--fx-s0)}
.fx-bls-col{max-width:680px;margin-inline:auto}
.fx-bls-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--fx-sp-2);margin-bottom:var(--fx-sp-4);font-size:var(--fx-size-small);color:var(--fx-fg-3)}
.fx-bls-crumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 4px;margin:-14px 0 -14px -4px;color:var(--fx-fg-2)}
.fx-bls-crumb a:hover{color:var(--fx-fg);text-decoration:underline;text-underline-offset:3px}
.fx-bls-title{font-size:clamp(32px,4.4vw,56px);line-height:1.25;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.fx-bls-meta{margin-top:var(--fx-sp-6)}
.fx-bls-head .fx-bl-chip{background:var(--fx-s3);color:var(--fx-t1)}
.fx-bls-main{padding:var(--fx-sp-8) 0 var(--fx-sp-24)}
.fx-bls-cover{max-width:960px;margin:0 auto var(--fx-sp-12);overflow:hidden;aspect-ratio:1200/630;border-radius:var(--fx-radius-l)}
.fx-bls-cover .fx-bl-cover{padding:var(--fx-sp-8)}

/* ===== 7. 본문 타이포: 680px 열, 18px/1.8 ===== */
.fx-bls-prose{font-size:18px;line-height:1.8;color:var(--fx-fg-2);word-break:keep-all;overflow-wrap:break-word}
.fx-bls-prose>*+*{margin-top:var(--fx-sp-6)}
.fx-bls-prose h2,.fx-bls-prose h3,.fx-bls-prose h4{color:var(--fx-fg);font-weight:700;letter-spacing:-.02em;line-height:1.4}
.fx-bls-prose h2{margin-top:var(--fx-sp-16);font-size:clamp(26px,2.8vw,32px)}
.fx-bls-prose h3{margin-top:var(--fx-sp-12);font-size:clamp(21px,2.2vw,24px)}
.fx-bls-prose h4{margin-top:var(--fx-sp-8);font-size:19px}
.fx-bls-prose h2+*,.fx-bls-prose h3+*,.fx-bls-prose h4+*{margin-top:var(--fx-sp-4)}
.fx-bls-prose strong,.fx-bls-prose b{color:var(--fx-fg);font-weight:700}
.fx-bls-prose a{color:var(--fx-fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.fx-bls-prose a:hover{text-decoration-thickness:2px}
.fx-bls-prose ul,.fx-bls-prose ol{padding-left:1.4em}
.fx-bls-prose ul{list-style:disc}
.fx-bls-prose ol{list-style:decimal}
.fx-bls-prose li+li{margin-top:var(--fx-sp-2)}
.fx-bls-prose li::marker{color:var(--fx-fg-3)}
.fx-bls-prose blockquote{padding:var(--fx-sp-1) 0 var(--fx-sp-1) var(--fx-sp-6);border-left:3px solid var(--fx-fg);font-size:20px;line-height:1.7;color:var(--fx-fg)}
.fx-bls-prose img,.fx-bls-prose video,.fx-bls-prose iframe{max-width:100%;height:auto;border-radius:var(--fx-radius-m)}
.fx-bls-prose figure{margin-left:0;margin-right:0}
.fx-bls-prose figcaption{margin-top:var(--fx-sp-2);font-size:var(--fx-size-small);color:var(--fx-fg-3)}
.fx-bls-prose hr{border:0;border-top:1px solid var(--fx-edge-strong);margin:var(--fx-sp-12) 0}
.fx-bls-prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:16px;line-height:1.6}
.fx-bls-prose th,.fx-bls-prose td{padding:12px 14px;border-bottom:1px solid var(--fx-edge-strong);text-align:left;vertical-align:top}
.fx-bls-prose th{background:var(--fx-tint);color:var(--fx-fg);font-weight:700;white-space:nowrap}
.fx-bls-prose code{padding:2px 6px;border-radius:4px;background:var(--fx-card-2);font-size:.9em;color:var(--fx-fg)}
.fx-bls-prose pre{max-width:100%;overflow-x:auto;padding:var(--fx-sp-4);border-radius:var(--fx-radius-m);background:var(--fx-s1);color:var(--fx-t1);font-size:15px;line-height:1.7}
.fx-bls-prose pre code{padding:0;background:none;color:inherit}

/* ===== 8. 연결 카드 · 관련 글 · 마지막 안내 ===== */
.fx-bl-link{margin-top:var(--fx-sp-16);padding:var(--fx-sp-8);border-radius:var(--fx-radius-l);background:var(--fx-s1);color:var(--fx-t1);box-shadow:inset 0 0 0 1px var(--fx-edge-ink-strong)}
.fx-bl-link__t{font-size:clamp(22px,2.4vw,28px);line-height:1.35;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.fx-bl-link__d{margin-top:var(--fx-sp-3);font-size:17px;line-height:1.7;color:var(--fx-t2)}
.fx-bl-link__actions{display:flex;flex-wrap:wrap;gap:var(--fx-sp-3);margin-top:var(--fx-sp-6)}
.fx-bl-link__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--fx-sp-2);min-height:52px;padding:0 24px;border-radius:var(--fx-radius-pill);box-shadow:inset 0 0 0 1px var(--fx-edge-ink-strong);font-size:17px;font-weight:700;color:var(--fx-t1);transition:transform .25s var(--fx-ease-std),background-color .25s var(--fx-ease-std)}
.fx-bl-link__btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.06)}
.fx-bl-link__btn--main{background:var(--fx-brand);color:var(--fx-brand-ink);box-shadow:none}
.fx-bl-link__btn--main:hover{background:var(--fx-brand-hover)}
.fx-bl-rel{max-width:960px;margin:var(--fx-sp-24) auto 0;padding-top:var(--fx-sp-8);border-top:1px solid var(--fx-edge-strong)}
.fx-bl-rel .fx-bl__h2{margin-bottom:var(--fx-sp-6)}
@media (min-width:1024px){.fx-bl-rel .fx-bl__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fx-bls-cta{padding:var(--fx-sp-24) 0;background:var(--fx-s0)}
.fx-bls-cta__h{font-size:clamp(30px,4.2vw,52px);line-height:1.25;font-weight:700;letter-spacing:-.03em}
.fx-bls-cta__d{margin-top:var(--fx-sp-4);max-width:560px;font-size:18px;line-height:1.7;color:var(--fx-fg-2)}
.fx-bls-cta__act{margin-top:var(--fx-sp-8)}

/* ===== 9. 반응형 ===== */
@media (min-width:768px){
  .fx-bl-head,.fx-bls-head{padding-top:152px}
  .fx-bl-layout{grid-template-columns:200px minmax(0,1fr);gap:var(--fx-sp-8);align-items:start}
  .fx-bl__side{position:sticky;top:104px}
  .fx-bl__navtitle{display:block;margin-bottom:var(--fx-sp-3);padding:0;font-size:var(--fx-size-small);font-weight:700;color:var(--fx-fg-3)}
  .fx-bl__navtitle a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 var(--fx-sp-3);margin:-14px 0}
  .fx-bl__drop>summary{display:none}
  .fx-bl__list{margin-top:0}
}
@media (min-width:1024px){
  .fx-bl-layout{gap:var(--fx-sp-12)}
  .fx-bl-feat{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--fx-sp-8);align-items:center}
}
@media (max-width:480px){
  .fx-bl-link{padding:var(--fx-sp-6)}
  .fx-bls-prose blockquote{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .fx-bl-card:hover .fx-bl-card__thumb,.fx-bl-link__btn:hover,.fx-bl__empty .fs-btn:hover{transform:none}
  .fx-bl-card__thumb,.fx-bl__drop>summary::after{transition:none}
}

/* 대표 이미지가 없으면 표지(제목을 한 번 더 적은 장식)는 글 상세에서 접는다 */
.fx-bls-cover:has(.fx-bl-cover){display:none}