/* 인사이트 — 게시판 목록(.board: 매거진 구조 — 첫 글은 크게, 나머지는 썸네일 + 제목 카드)과 글 상세(.article-paper > .article: 검은 판 — 왼쪽 목차 칸 + 오른쪽 본문). */
.board{--collection-bottom:120px;--grid-gap:48px 32px;--more-top:48px;--card-title:22px;--card-title-line:32px}

/* 제목 영역은 common.css의 .page-heading을 쓰고, 가운데 정렬과 아래 여백만 바꾼다(포트폴리오와 같게). */
.board .page-heading{align-items:center;text-align:center;padding-bottom:48px}

/* 목록 */
.board-collection{padding-bottom:var(--collection-bottom)}
.board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);margin:0;padding:0;list-style:none}
.board-card{display:flex;flex-direction:column;gap:20px}
.board-thumb{position:relative;display:block;overflow:hidden;border-radius:2px;aspect-ratio:16/9;background:var(--surface)}
.board-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale .9s var(--ease-out),filter .6s}
.board-card:hover .board-thumb img{scale:1.06}
.board-grid:has(.board-card:hover) .board-card:not(:hover) .board-thumb img{filter:brightness(.6) saturate(.7)}
.board-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--card-title);line-height:var(--card-title-line);font-weight:600;word-break:keep-all;transition:color .25s}
.board-card:hover .board-title,.board-card:focus-visible .board-title{color:var(--mint)}
/* 매거진 구조 — 카드마다 제목 아래 날짜, 첫 글은 가로로 크게(사진 + 제목·서브 타이틀·날짜)·아래 구분선 */
.board-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.board-sub{display:none;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:18px;line-height:30px;color:var(--muted);word-break:keep-all}
.board-date{font:500 14px/22px var(--font-latin);color:var(--muted)}
.board-grid>li:first-child{grid-column:1/-1;padding-bottom:48px;border-bottom:1px solid var(--line)}
.board-grid>li:first-child .board-card{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:56px}
.board-grid>li:first-child .board-text{gap:16px}
.board-grid>li:first-child .board-title{-webkit-line-clamp:3;font-size:40px;line-height:54px;letter-spacing:-.02em}
.board-grid>li:first-child .board-sub{display:-webkit-box}
.board-empty{padding:80px 0;color:var(--muted);font-size:18px;text-align:center}
.load-more-area{display:flex;justify-content:center;padding-top:var(--more-top)}
.load-more-area:has(> [hidden]){display:none}

/* 카드 등장: 아래에서 떠오른다(더보기로 들어온 카드도 같다). */
@media(prefers-reduced-motion:no-preference){
  .board-grid li{animation:board-rise .9s var(--ease-out) calc(var(--d,0) * 80ms) backwards}
}
@keyframes board-rise{from{opacity:0;translate:0 40px}}

/* 글 상세 — 사이트의 어두운 바탕 위에 검은 판(.article-paper)을 놓고, 선으로 나눈 두 칸에 글을 올린다.
   판과 그 안의 칸은 그라데이션·무늬·반투명 없이 단색만 쓴다. 이 안에서는 글자·선·강조 색을 판에 맞는 값으로 바꾼다(--mint는 사이트의 민트 그대로).
   구성: 맨 위 머리띠(.article-strip)
         왼쪽 옆 칸(.article-side, 화면을 따라 내려온다): 목차 — 내용에 제목이 없는 글은 옆 칸 없이 본문만 한 칸으로 나온다
         오른쪽 본문 칸(.article-main): 경로 줄(INSIGHTS | 제목) → 머리말(날짜·큰 제목) → 내용 → 이전·다음 글 카드 → 목록으로 */
.article-paper{--paper:rgb(0,0,0,0.9);--text:#ececec;--muted:#96989c;--line:#2a2b2e;--mint:#2a2b2e;--surface:#1b1c1e;--card:#18191b;--card-hover:#202124;--quote:#16201f;
  width:calc(100% - var(--gutter)*2);max-width:1080px;margin:24px auto 120px;border:1px solid var(--line);border-radius:16px;color:var(--text);background:var(--paper)}
.article-paper ::selection{background:#1f4d46}
.article-paper :focus-visible{outline-color:var(--mint)}
@media(prefers-reduced-motion:no-preference){
  .js .article-paper{animation:paper-in 1s var(--ease-out) backwards}
}
@keyframes paper-in{from{opacity:0;translate:0 32px}}

.article{--body:18px;--body-line:32px;--pad:40px;display:grid;grid-template-columns:280px minmax(0,1fr)}
/* 목차가 없는 글(제목 없는 내용): 옆 칸을 없애고 본문만 */
.article:has(.article-toc[hidden]){grid-template-columns:minmax(0,1fr)}
.article:has(.article-toc[hidden]) .article-side{display:none}
.article:has(.article-toc[hidden]) .article-main{border-left:0}
/* 머리띠: 잡지의 쪽 머리처럼 사이트 이름과 글 번호 */
.article-strip{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;padding:22px var(--pad) 4px;
  font:600 12px/20px var(--font-latin);letter-spacing:.16em;color:var(--muted);white-space:nowrap}

/* 옆 칸 — 화면을 따라 내려온다. 화면보다 길면 칸 안에서 스크롤된다. */
.article-side{align-self:start;position:sticky;top:0;max-height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.article-side>*{padding:28px 32px}
.article-side>*+*{border-top:1px solid var(--line)}
.article-side-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font:700 13px/22px var(--font-latin);letter-spacing:.12em;color:var(--text)}
.article-side-title span{font-weight:500;color:var(--muted)}
/* 목차 — insights.js가 내용의 제목(h2·h3)으로 만든다. 제목이 없으면 숨긴다. */
.article-toc ol{margin:0;padding:0;list-style:none}
.article-toc ol{counter-reset:toc}
.article-toc li{counter-increment:toc;border-top:1px dashed var(--line)}
.article-toc a{display:flex;align-items:baseline;gap:12px;padding-block:13px;font-size:15px;line-height:22px;color:var(--muted);transition:color .25s}
.article-toc a::before{content:'[' counter(toc,decimal-leading-zero) ']';flex:none;font:600 12px/22px var(--font-latin);letter-spacing:.04em}
.article-toc a::after{content:'';flex:none;align-self:center;width:6px;height:6px;margin-left:auto;background:var(--text);opacity:0;transition:opacity .25s}
.article-toc a:hover,.article-toc a.is-active{color:var(--text)}
.article-toc a.is-active::after{opacity:1}
.article-toc li.is-sub a{padding-left:20px}

/* 본문 칸 */
.article-main{min-width:0;border-left:1px solid var(--line)}
.article-crumb{display:flex;gap:12px;padding:18px var(--pad) 0;font:600 12px/20px var(--font-latin);letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.article-crumb a{color:var(--text);transition:color .25s}
.article-crumb a:hover{color:#fff}
.article-crumb span{overflow:hidden;text-overflow:ellipsis}
.article-head{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-inline:var(--pad);padding-block:48px 56px;border-bottom:1px solid var(--line)}
.article-meta{font:600 13px/22px var(--font-latin);letter-spacing:.08em;color:var(--muted)}
.article-head h1{font-size:60px;line-height:72px;font-weight:800;letter-spacing:-.025em;word-break:keep-all}

/* 내용 — 관리자 편집기가 만드는 태그만: p, h2, h3, strong, em, u, s, a, ul, ol, li, blockquote, hr, img, br */
.article-body{max-width:960px;padding:48px var(--pad) 0;font-size:var(--body);line-height:var(--body-line);overflow-wrap:anywhere;word-break:keep-all}
.article-body>*{margin:0}
.article-body>*+*{margin-top:24px}
.article-body h2{margin-top:64px;font-size:30px;line-height:42px;font-weight:700;letter-spacing:-.02em}
.article-body h2::before{content:'';display:block;width:28px;height:3px;margin-bottom:16px;border-radius:3px;background:var(--mint)}
.article-body h3{margin-top:44px;font-size:23px;line-height:34px;font-weight:700}
.article-body :is(h2,h3){scroll-margin-top:32px}
.article-body>:first-child{margin-top:0}
.article-body a{color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.article-body a:hover{text-decoration-thickness:2px}
.article-body strong,.article-body b{font-weight:700}
.article-body img{width:auto;max-width:100%;height:auto;margin-inline:auto;border-radius:14px;border:1px solid var(--line)}
.article-body p:has(>img:only-child){margin-block:40px}
.article-body ul,.article-body ol{padding-left:1.4em}
.article-body li+li{margin-top:8px}
.article-body li::marker{font-weight:700}
.article-body blockquote{padding:22px 28px;border-left:3px solid var(--mint);border-radius:0 14px 14px 0;background:var(--quote);font-weight:500}
.article-body hr{height:auto;margin-block:48px;border:0;text-align:center}
.article-body hr::before{content:'• • •';letter-spacing:.6em;color:var(--muted);font-size:14px}

/* 아래: 이전·다음 글 카드(썸네일 + 제목)와 목록으로 */
.article-foot{display:flex;flex-direction:column;align-items:center;gap:40px;margin:80px var(--pad) 0;padding:40px 0 48px;border-top:1px solid var(--line)}
.article-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:100%}
.article-nav a{display:flex;align-items:center;gap:16px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card);
  transition:background .3s,border-color .3s,translate .5s var(--ease-out)}
.article-nav a:hover{background:var(--card-hover);border-color:var(--muted);translate:0 -3px}
.article-nav a.is-next{flex-direction:row-reverse;text-align:right}
/* 이전·다음 글이 없는 자리 — 빈칸 대신 점선 칸에 안내 문구 */
.article-nav-none{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:91px;padding:14px 20px;border:1px dashed var(--line);border-radius:16px}
.article-nav-none.is-next{align-items:flex-end;text-align:right}
.article-nav .article-nav-none strong{color:var(--muted);font-weight:500}
.article-nav-thumb{flex:none;width:112px;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:var(--surface)}
.article-nav-thumb img{width:100%;height:100%;object-fit:cover}
.article-nav-text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.article-nav small{font-size:13px;line-height:20px;font-weight:600;color:var(--muted)}
.article-nav strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:16px;line-height:24px;font-weight:600;transition:color .25s}
.article-nav a:hover strong{color:#fff}
/* 목록으로 버튼 — 검은 판에서 또렷하게 보이도록 밝은 바탕에 어두운 글자(판의 색 변수와 따로 정한다) */
.article-back{display:inline-flex;align-items:center;padding:13px 32px;border-radius:999px;background:var(--text);color:#111213;font-size:16px;line-height:22px;font-weight:600;
  transition:background .25s,translate .5s var(--ease-out)}
.article-back:hover{background:#fff;translate:0 -2px}
/* 글을 넘길 때 판이 커졌다 줄어들며 가로 스크롤이 생기지 않게 */
.page-insights main:has(.article-paper){overflow-x:clip}

@media(max-width:1199px){
  .board{--collection-bottom:80px;--grid-gap:40px 24px;--more-top:40px;--card-title:18px;--card-title-line:26px}
  .board .page-heading{padding-bottom:32px}
  .board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board-card{gap:16px}
  .board-grid>li:first-child .board-card{gap:32px}
  .board-grid>li:first-child .board-title{font-size:28px;line-height:38px}
  .board-sub{font-size:16px;line-height:26px}
  .article-paper{margin:16px auto 80px}
  .article{--pad:28px;grid-template-columns:260px minmax(0,1fr)}
  .article-strip{padding-inline:24px}
  .article-side>*{padding:20px 24px}
  .article-head{padding-block:44px 40px}
  .article-head h1{font-size:38px;line-height:50px}
  .article-body{padding-top:40px}
  .article-nav-thumb{width:96px}
}
/* 데스크톱 목록 — 포트폴리오처럼 좌우 빈 여백 없이 화면 폭을 다 쓰고(헤더·제목 영역은 서비스 페이지와 같은 폭), 카드는 4열로 놓는다. 글 상세는 그대로다. */
@media(min-width:1200px){
  .board-collection{--gutter:clamp(40px,3.4vw,80px)}
  .board .container{max-width:none}
  .board-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .board-grid>li:first-child .board-card{gap:clamp(56px,4.2vw,96px)}
}
/* 좁은 화면: 한 칸으로 접는다. 순서는 머리띠 → 목차 → 본문 */
@media(max-width:899px){
  .article{grid-template-columns:minmax(0,1fr)}
  .article-side{position:static;max-height:none;border-bottom:1px solid var(--line)}
  .article-main{border-left:0}
}
@media(max-width:599px){
  .board{--collection-bottom:64px;--grid-gap:32px;--more-top:32px}
  .board .page-heading{padding-bottom:24px}
  .board-grid{grid-template-columns:minmax(0,1fr)}
  .board-card{gap:12px}
  .board-grid>li:first-child{padding-bottom:32px}
  .board-grid>li:first-child .board-card{grid-template-columns:minmax(0,1fr);gap:16px}
  .board-grid>li:first-child .board-title{font-size:22px;line-height:32px}
  .article-paper{margin:12px auto 64px;border-radius:14px}
  .article{--body:16px;--body-line:28px;--pad:20px}
  .article-strip{padding:14px 20px;font-size:10px;letter-spacing:.12em}
  .article-side>*{padding:20px}
  .article-crumb{padding-block:14px}
  .article-head{gap:14px;padding-block:32px 28px}
  .article-meta{font-size:12px}
  .article-head h1{font-size:28px;line-height:38px}
  .article-body{padding-top:32px}
  .article-body>*+*{margin-top:20px}
  .article-body h2{margin-top:44px;font-size:22px;line-height:32px}
  .article-body h3{margin-top:32px;font-size:19px;line-height:28px}
  .article-body p:has(>img:only-child){margin-block:28px}
  .article-body blockquote{padding:16px 18px}
  .article-foot{gap:28px;margin-top:56px;padding-block:28px 32px}
  .article-nav{grid-template-columns:minmax(0,1fr);gap:12px}
  .article-nav a{padding:12px;gap:12px}
  .article-nav-none{min-height:0;padding:12px 16px}
  .article-nav-thumb{width:88px}
  .article-nav strong{font-size:15px;line-height:22px}
}
@media(prefers-reduced-motion:reduce){
  .board-card:hover .board-thumb img{scale:1}
  .article-nav a:hover,.article-back:hover{translate:none}
}