/* 인사이트 블로그 목록(/blog)·상세(/blog/{slug}) — 2026-10-22 list.css·detail.css 를 합친 것(디자이너 편집 묶음).
   v2 공통(css/v2/common.css)과 헤더(css/v2/header.css) 위에 얹는다. 본문 서식(.article-body)은 여기 말고
   /static/blog/article-body.css 한 곳에 둔다 — 앱의 제품 생성 대기 화면도 같은 파일을 읽는다.
   --mint·--bg-mint 는 본문 서식·FAQ·태그가 쓴다 — 지우면 그 배경이 사라진다. */
/***************** blog list *****************/

/* ---------- 히어로 + 추천 글 ---------- */
.bhero{background:#363636;color:#fff;padding:136px 0 160px;overflow:hidden}
.bhero-head{display:flex;flex-direction:column;gap:32px;text-align:center}

.feat-outer{margin-top:80px}
.feat-scroll{
  --feat-gap:40px;
  display:flex;gap:var(--feat-gap);align-items:flex-start;
  overflow-x:auto;scroll-snap-type:x mandatory;
  /* 왼쪽 여백은 마진 — 스크롤 영역을 .wrap 왼쪽선까지 밀어 지나간 카드가 그 선에서 깔끔히 잘린다. 오른쪽은 화면 끝까지. */
  margin-left:max(48px,calc((100% - 1440px)/2));
  scrollbar-width:none;
}
.feat-scroll::-webkit-scrollbar{display:none}
.feat-tail{flex:none;width:var(--feat-tail,0px);margin-left:calc(-1 * var(--feat-gap))}
.feat-card{flex:none;width:min(700px,84vw);scroll-snap-align:start}

/* 카드(추천·목록 공통) — 썸네일 700×422 · 분류(초록)·날짜(회색) · 제목 22 · 요약 18 ExtraLight */
.post-card{display:flex;flex-direction:column;gap:16px;height:100%}
.post-card .thumb{aspect-ratio:700/422;overflow:hidden;background:#e9e9e9}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.post-card:hover .thumb img{transform:scale(1.03)}
.thumb-fallback{display:block;width:100%;height:100%;background:linear-gradient(135deg,#e6f4ec,#cfe7da)}
.post-card .info{display:flex;flex-direction:column;gap:8px;padding:0 8px}
.post-card .meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16px;line-height:1.5}
.post-card .cat{font-weight:500;color:#00974b}
.post-card .date{font-weight:300;color:#999;letter-spacing:0;flex:none}
.post-card .txt{display:flex;flex-direction:column;gap:4px}
.post-card .title{font-weight:300;font-size:clamp(18px,1.15vw,22px);line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:color .2s}
.post-card .excerpt{font-weight:100;font-size: clamp(16px,.94vw,18px);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.post-card:hover .title{font-weight: 400;}
.bhero .post-card .title,.bhero .post-card .excerpt{color:#fff}
.bhero .thumb{background:#4a4a4a}

/* 컨트롤 — 둥근 화살표 2개 + 진행바(칸 하나 = 글 하나, 켜진 칸 초록) */
.feat-ctrl{display:flex;align-items:center;gap:16px;margin-top:64px}
.feat-arrows{display:flex;gap:8px;flex:none}
.round-btn{width:40px;height:40px;border-radius:100px;display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color .2s,color .2s}
.round-btn:hover:not(:disabled){background:rgba(255,255,255,.1)}
.round-btn:disabled{color:rgba(255,255,255,.3);cursor:default}
.round-btn svg,.pager-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.feat-progress{flex:1;display:flex;gap:4px;align-items:center}
/* 3px 막대지만 위아래 여백으로 누를 수 있는 높이를 만든다 */
.feat-progress button{flex:1;height:19px;padding:8px 0;background:none;cursor:pointer}
.feat-progress button::before{content:"";display:block;height:3px;background:rgba(255,255,255,.5);transition:background-color .25s}
.feat-progress button.on::before{background:#00974b}
.feat-progress button:hover:not(.on)::before{background:rgba(255,255,255,.8)}

/* ---------- 아티클 ---------- */
.articles{padding:160px 0;background:#fff;transition:opacity .2s}
.articles.loading{opacity:.5;pointer-events:none}
.articles-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.articles-head h2{font-weight:500;font-size:clamp(28px,1.9vw,36px);line-height:1.5}
.articles-head .count{font-weight:300;font-size:18px;line-height:1.5;letter-spacing:0}
.articles-head .count b{font-weight:600;color:#00974b}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.tab{padding:6px;font-size:18px;font-weight: 300;line-height:1.5;color:#999;border-bottom:2px solid transparent;transition:color .2s}
.tab:hover{color:#333}
.tab.on{color:#00974b;font-weight:500;border-bottom-color:#00974b}
.filter-note{margin-top:16px;font-size:16px;color:#666}
.filter-note a{color:#00974b;text-decoration:underline}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:24px}
.empty-note{margin-top:48px;padding:48px 0;text-align:center;color:#999;font-size:18px}

/* 페이저 — 화살표 · 번호(40×40, 현재 = 초록 Medium) */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:64px}
.pager-pages{display:flex;align-items:center;gap:4px}
.pager-pages a,.pager-pages .gap{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-weight:300;font-size:18px;color:#999;transition:color .2s,background-color .2s}
.pager-pages a:hover{color:#333;background:#f5f5f5}
.pager-pages a.on{color:#00974b;font-weight:500}
.pager-arrow{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#333;border-radius:4px}
.pager-arrow:hover{background:#f5f5f5}
.pager-arrow.off{color:#d5d5d5}
.pager-arrow.off:hover{background:none}

/* ---------- 태블릿 ≤1024 ---------- */
@media (max-width:1024px){
  .bhero{padding:120px 0 96px}
  .bhero-head{gap:20px}
  .feat-outer{margin-top:56px}
  .feat-scroll{--feat-gap:24px;margin-left:24px}
  .feat-ctrl{margin-top:40px}
  .grid{gap:32px 24px}
}
/* ---------- 좁은 태블릿·모바일 ≤767 — 목록 1열 ---------- */
@media (max-width:767px){
  .grid{grid-template-columns:1fr}
}
/* ---------- 모바일 ≤520 ---------- */
@media (max-width:520px){
  .bhero{padding:104px 0 80px}
  .bhero-head h1{font-size:clamp(26px,8.2vw,32px)}
  .bhero-head p{font-size:16px}
  .feat-card .post-card .title {font-size: 22px;}
  .feat-card .post-card .excerpt {font-size: 18px;}
  .feat-outer{margin-top:40px}
  .feat-scroll{margin: 0 24px;}
  .feat-card{width:100%}
  .feat-ctrl{margin-top:32px;gap:8px}
  .articles{padding:80px 0}
  .articles-head .count{font-size:16px}
  .tab{font-size:16px}
  .pager{gap:8px;margin-top:40px}
  .pager-pages a,.pager-pages .gap{width:32px;height:32px;font-size:16px}
}


/***************** blog detail *****************/
:root{
  --mint:#1ed760;--green:#00974b;--ink:#333;--muted:#767676;--muted-2:#999;
  --bg-mint:#f7fcfa;--dark:#3d3f3e;--line:#eee;--line-soft:#eee;
  --ease:cubic-bezier(.22,.61,.36,1);
}
.ahero .wrap,.article .wrap,.related .wrap{width:min(1440px,calc(100% - 48px))}

/* ---------- 뱃지(연관 카드) ---------- */
.chip{color: #00974B;}
.chip.sm{font-size:16px}

/* ---------- 아티클 히어로 ----------
   목록 히어로와 같은 #363636. 헤더(72px 고정) 아래로 140 — 윗줄(분류 ↔ 날짜) · 16 · 제목 · 120. */
.ahero{background:#363636;color:#fff;padding:140px 0 120px}
.ahero-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;line-height:1.5}
.ahero-cats{display:flex;align-items:center;gap:16px;color:var(--green);font-weight:400}
.ahero-cats .new{display:inline-flex;align-items:center;gap:8px}
.ahero-cats .new::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
.ahero-cats .cat:hover{text-decoration:underline;text-underline-offset:3px}
.ahero-meta .date{flex:none;font-size:16px;font-weight:300;color:var(--muted-2);letter-spacing:0}
.ahero h1{margin-top:16px;font-size:clamp(24px,2.1vw,32px);font-weight:400;line-height:1.5;letter-spacing:-.025em;color:#fff}

/* ---------- 본문 ---------- */
/* 본문 서식(.article-body 와 그 안의 요약·목차·마크다운 요소)은 article-body.css — 제품 생성 대기 화면이
   같은 파일을 읽어 블로그와 똑같이 그린다(2026-10-14). 여기 다시 적지 말 것. */
.article{background:#fff;padding:80px 0 160px}
.article-layout{display:grid;grid-template-columns:350px minmax(0,1fr);column-gap:40px;align-items:start}

/* ---------- 카테고리 내비(왼쪽, 시안 Frame 1092) ---------- */
/* 헤더(72px 고정) 아래 붙어서 따라온다. 카테고리 행 40px: 8px 상하 패딩 + 12px 간격의 셰브런.
   펼친 카테고리는 셰브런이 아래를 보며 초록, 안의 글은 32px 들여쓰기·현재 글만 민트 배경. */
.cat-nav{position:sticky;top:104px;display:flex;flex-direction:column}
.cat-nav details{border-bottom:1px solid var(--line)}
.cat-nav summary{
  display:flex;align-items:center;gap:12px;padding:16px 0;
  font-size:18px;font-weight:400;line-height:1.5;letter-spacing:-.025em;color:var(--ink);
  cursor:pointer;list-style:none;transition:color .2s;
}
.cat-nav summary::-webkit-details-marker{display:none}
.cat-nav summary:hover{color:var(--green)}
.cat-nav summary svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.cat-nav details[open]>summary svg{transform:rotate(90deg);color:var(--green)}
.cat-nav ul{list-style:none;padding:8px 0;display:flex;flex-direction:column}
.cat-nav li a{
  display:block;padding:8px 8px 8px 32px;border-radius:8px;
  font-size:16px;font-weight:300;line-height:1.6;letter-spacing:-.025em;color:var(--ink);
  transition:color .15s,background .15s;
}
.cat-nav li a:hover{color:var(--green)}
.cat-nav li a.on{color:var(--green);font-weight:400}

/* ---------- 화살표 버튼(연관 캐러셀) ----------
   블로그 메인 히어로와 같은 셰브런: 테두리·배경 없이 **색이 곧 상태**다 —
   누를 수 있으면 초록, 없으면 회색(#D5D5D5). 40px 히트 영역은 유지한다.
   이 페이지에서 .arrow-btn 은 연관 캐러셀 화살표 둘뿐이라 스코프를 좁히지 않는다. */
.arrow-btn{
  width:40px;height:40px;flex:none;padding:0;
  background:none;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--green);transition:color .2s,opacity .2s;
}
.arrow-btn:hover{opacity:.72}
.arrow-btn[disabled]{color:#D5D5D5;opacity:1;pointer-events:none}
.arrow-btn svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.article-cta{display:flex;justify-content:center;margin-top:80px}

/* ---------- 연관 콘텐츠 ---------- */
.related{position:relative;background:#f2f2f2;padding:160px 0;overflow:hidden}
.related-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.related-head h2{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.5;color:var(--ink)}
.related-arrows{display:flex;gap:4px}
.rel-scroll{
  display:flex;gap:40px;align-items:flex-start;margin-top:21px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  margin-left:max(24px,calc((100vw - 1440px)/2));
  padding-inline:0;
  scrollbar-width:none;
}
.rel-scroll::-webkit-scrollbar{display:none}
.rel-card{flex:none;width:min(700px,84vw);scroll-snap-align:start}
.rel-card .thumb{border-radius:4px;overflow:hidden;background:#e9e9e9;aspect-ratio:428/258}
.rel-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.rel-card:hover .thumb img{transform:scale(1.03)}
.rel-card .info{margin-top:16px;padding:0 8px}
.rel-card .meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rel-card .chips{display:flex;align-items:center;gap:8px}
.rel-card .date{font-size:16px;font-weight: 300; color:var(--muted-2);flex:none}
.rel-card h3{margin-top:12px;font-size:22px;font-weight:400;letter-spacing:-.025em;line-height:1.5;color:var(--ink);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.rel-card:hover h3{color:var(--green)}
.rel-card .excerpt{margin-top:8px;font-size:18px;line-height:1.5;letter-spacing:-.025em;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight: 200;}

/* ---------- FAQ ---------- */
.article-faq{display:flex;flex-direction:column;gap:16px;margin-top:8px;padding:40px 0 80px 0}
.article-faq h2{font-size:clamp(22px,3vw,28px);font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.article-faq details{border:1px solid var(--line);border-radius:8px;padding:16px 20px}
.article-faq summary{font-size:18px;font-weight:600;letter-spacing:-.025em;color:var(--ink);cursor:pointer;list-style:none}
.article-faq summary::-webkit-details-marker{display:none}
.article-faq summary::after{content:"+";float:right;color:var(--muted-2);font-weight:400}
.article-faq details[open] summary{color:var(--green)}
.article-faq details[open] summary::after{content:"\2212"}
.article-faq details p{font-size:16px;font-weight:300;line-height:1.6;color:var(--ink);margin-top:12px;padding:16px;background-color:var(--bg-mint);border-radius:8px}

/* ---------- 저자 (E-E-A-T) ---------- */
.article-author{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:14px;letter-spacing:-.025em}
.article-author .name{font-weight:600;color:var(--ink)}
.article-author .role,.article-author .reading{color:var(--muted);font-weight:300}

/* ---------- 태그 ---------- */
.article-tags{display:flex;flex-wrap:wrap;gap:8px}
.article-tags a{font-size:13px;font-weight:300;letter-spacing:-.025em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.article-tags a:hover{color:var(--green);border-color:rgba(0,151,75,.35);background:var(--bg-mint)}

/* ---------- 미리보기 배너 ---------- */
/* 초안을 토큰 링크로 열었을 때만 뜬다. 공개 글로 착각하고 공유하는 사고를 막는 표식. */
.preview-banner{position:sticky;top:72px;z-index:60;background:var(--dark);color:#fff;text-align:center;font-size:14px;font-weight:300;letter-spacing:-.025em;padding:10px 24px}
.preview-banner b{font-weight:600;color:var(--mint)}

/* ---------- 반응형 ---------- */
@media(max-width:1024px){
  .ahero{padding:120px 0 72px}
  .article-layout{display:block}
  .cat-nav{display:none}
}

@media(max-width:520px){
   .ahero{padding:104px 0 48px}
   .ahero-meta .date{font-size:14px}
   .ahero h1{margin-top:8px;font-size:22px}
   .article{padding:40px 0 80px}
   .article-faq {padding: 24px 0;}
   .article-faq summary {font-size: 16px;}
   .article-faq details {padding: 12px 16px;}
   .article-faq details p {font-size: 15px; padding:12px;}
   .article-cta {margin-top: 40px;}
   .related{padding:80px 0}
   .rel-scroll{margin-right: 24px; margin-left: 24px; margin-top: 16px;}
   .rel-card h3{font-size: 18px;}
   .rel-card .excerpt{font-size: 16px;}
}