/* 히어로 배경 */

.pw{max-width:760px;margin:0 auto;padding:0 24px}
.post-hero{padding:96px 0 0}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--slate-light);
  letter-spacing:-.01em;margin-bottom:22px;align-items:center}
.post-meta .upd{color:var(--mint-800);font-weight:600}
.post-meta .cat{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mint-800);border:1px solid var(--mint-800);padding:5px 10px}
.post-hero h1{font-size:clamp(28px,4vw,46px);font-weight:800;line-height:1.25;
  letter-spacing:-.03em;color:var(--ink);word-break:keep-all}
.post-lead{margin-top:20px;font-size:17px;line-height:1.7;color:var(--slate-light);word-break:keep-all}
.post-rule{width:200px;height:4px;background:var(--mint);margin:36px 0 0}
.post-body{padding:44px 0 96px;font-size:17px;line-height:1.85;color:var(--ink);word-break:keep-all}
.post-body p{margin:0 0 18px}
.post-body h2{font-size:26px;font-weight:700;letter-spacing:-.025em;margin:48px 0 18px;color:var(--ink)}
.post-body h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:36px 0 14px;color:var(--ink)}
.post-body img{width:100%;height:auto;display:block;margin:28px 0;border-radius:0;background:var(--stone)}
.post-body a{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px}
.post-body ul,.post-body ol{margin:0 0 20px 20px}
.post-body li{margin-bottom:9px}
.post-body strong{font-weight:700}
/* 네이버에서 가져온 글의 원문 고지 — 본문 끝, 얇은 선 위 */
.post-offer{margin:36px 0;padding:24px 26px;border:1px solid var(--divider);
  background:var(--cream,#F4F6FA)}
.post-offer .k{display:block;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint-800);margin-bottom:10px}
.post-offer p{margin:0 0 12px;font-size:16px;line-height:1.7;color:var(--ink)}
.post-offer a{color:var(--mint-800);font-weight:700}
.post-src{margin:44px 0 0;padding-top:18px;border-top:1px solid var(--divider);
  font-size:14px;color:var(--blue-600)}
.post-body blockquote{margin:28px 0;padding:18px 22px;border-left:3px solid var(--mint);
  background:rgba(77,141,255,.08);color:var(--slate-light)}
/* 지침 5.3b — 본문 도해. figure 기본 여백(1em 40px)이 이미지를 글줄보다 좁게 들여쓴다 */
.post-body figure{margin:28px 0}
.post-body figure img{margin:0}
.post-body figcaption{margin-top:10px;padding-left:12px;border-left:2px solid var(--divider);
  font-size:14px;line-height:1.6;color:var(--slate-light)}
/* 지침 5.3 — 표는 이미지가 아니라 실제 table로 */
.post-body .tblwrap{overflow-x:auto;margin:0 0 28px}
.post-body table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.post-body th,.post-body td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--divider);vertical-align:top}
.post-body thead th{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate-light);border-bottom:1px solid var(--ink);white-space:nowrap}
.post-body tbody td{color:var(--slate-light);line-height:1.6}
.post-body tbody td:first-child,.post-body tbody th{color:var(--ink);font-weight:600;white-space:nowrap}
/* 정의 문단 — 인용 미끼, 본문과 톤을 살짝 구분 */
.post-def{font-size:18px;font-weight:600;line-height:1.7;color:var(--ink);
  padding:20px 22px;background:var(--stone);margin:0 0 28px}
@media(max-width:640px){.post-def{font-size:16px;padding:16px 18px}}
.post-nav{border-top:1px solid var(--divider);padding:32px 0 0;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px}
.post-nav a{color:var(--ink);text-decoration:none;font-weight:600;max-width:46%;word-break:keep-all}
.post-nav a:hover{color:var(--mint-800)}
.post-nav span{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;
  color:var(--slate-light);margin-bottom:6px}
/* 목록 */
.blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px;margin-top:56px}
.blog-list article{border-top:2px solid var(--divider);padding-top:22px}
.blog-list img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;margin-bottom:18px;background:var(--stone)}
.blog-list .cat{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mint-800);display:block;margin-bottom:12px}
.blog-list h3{font-size:19px;font-weight:700;line-height:1.45;letter-spacing:-.02em;word-break:keep-all}
.blog-list h3 a{color:var(--ink);text-decoration:none}
.blog-list h3 a:hover{color:var(--mint-800)}
.blog-list p{margin-top:11px;font-size:14px;line-height:1.65;color:var(--slate-light);word-break:keep-all}
.blog-list .meta{display:flex;align-items:center;gap:14px;margin-top:12px}
.blog-list time,.blog-list .read{font-size:12.5px;color:#A5AEBE}
/* 맨 위 헤드라인 카드 — 나머지와 같은 칸이면 "골라서 올렸다"는 느낌이 안 난다 */
.blog-list article.featured{grid-column:span 2}
.blog-list article.featured img{aspect-ratio:21/9}
.blog-list article.featured h3{font-size:28px;line-height:1.3}
.blog-list article.featured p{font-size:15px}
/* 카테고리마다 위쪽 선의 진하기를 다르게 둔다 — 색을 늘리지 않고 딥코발트 한 톤만 섞는다.
   172장이 전부 같은 칸으로 보이던 걸 완화한다. hover 는 항상 이걸 덮어써야 하므로 맨 뒤에 둔다. */
.blog-list article[data-cat="디지털마케팅"]{border-top-color:var(--mint-800)}
.blog-list article[data-cat="퍼포먼스"]{border-top-color:color-mix(in srgb, var(--mint-800) 70%, var(--divider))}
.blog-list article[data-cat="콘텐츠"]{border-top-color:color-mix(in srgb, var(--mint-800) 45%, var(--divider))}
.blog-list article[data-cat="디자인실험실"]{border-top-color:color-mix(in srgb, var(--mint-800) 25%, var(--divider))}
.blog-list article:hover{border-top-color:var(--mint)}
.blog-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.blog-filter a{padding:9px 16px;border:1px solid var(--divider);font-size:14px;font-weight:600;
  color:var(--ink);text-decoration:none}
.blog-filter a.on,.blog-filter a:hover{border-color:var(--mint-800);color:var(--mint-800)}
/* 카테고리 필터가 감춘 카드. article 에 display 를 주는 리셋이 있으면 [hidden] 이 밀리므로 못박습니다 */
.blog-list article[hidden]{display:none}
.blog-search{margin-top:32px}
.blog-search input{width:100%;max-width:520px;padding:13px 18px;border:1px solid var(--divider);border-radius:var(--r,16px);
  background:rgba(255,255,255,.62);font:inherit;font-size:15px;color:var(--ink);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
.blog-search input::placeholder{color:#57606E}
.blog-search input:focus{outline:2px solid var(--mint-800);outline-offset:2px;border-color:var(--mint-800)}
.blog-empty{margin-top:40px;font-size:15px;color:#57606E}
.blog-more{display:block;margin:48px auto 0;padding:14px 30px;border:1px solid var(--divider);
  border-radius:var(--r,16px);background:rgba(255,255,255,.62);font:inherit;font-size:15px;font-weight:700;
  color:var(--ink);cursor:pointer;-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
.blog-more:hover{border-color:var(--mint-800);color:var(--mint-800)}
.blog-more[hidden]{display:none}
@media (max-width:1024px){.blog-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .blog-list{grid-template-columns:1fr;gap:28px;margin-top:36px}
  .blog-list article.featured{grid-column:span 1}
  .blog-list article.featured img{aspect-ratio:16/10}
  .blog-list article.featured h3{font-size:21px}
  .post-hero{padding:56px 0 0}
  .post-body{font-size:16px;padding:32px 0 64px}
  .post-nav a{max-width:100%}
}

.rl{margin:64px 0 0;padding:44px 0 0;border-top:1px solid var(--divider)}
.rl-h{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 18px}
/* 두 제목 사이에 카드 묶음이 끼므로 .rl-h+.rl-h 는 걸리지 않습니다 */
.rl-svcs+.rl-h{margin-top:40px}
.rl-svcs{display:grid;gap:12px}
.rl-svc{display:block;padding:20px 22px;border:1px solid var(--divider);
 text-decoration:none;background:#fff;transition:border-color .18s}
.rl-svc:hover{border-color:var(--mint-800)}
/* 다음 단계는 서비스 소개와 성격이 달라 왼쪽 선으로만 구분합니다.
   카드 모양을 새로 만들면 글 아래가 서로 다른 상자 세 종류로 어수선해집니다. */
.rl-next{border-left:3px solid var(--mint-800)}
.rl-svc strong{display:block;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.rl-svc span{display:block;margin-top:6px;font-size:14px;line-height:1.55;
 color:var(--slate-light);word-break:keep-all}
.rl-posts{display:grid}
.rl-post{display:block;padding:14px 0;border-bottom:1px solid var(--stone);text-decoration:none;
 font-size:15px;line-height:1.5;color:var(--ink);word-break:keep-all}
.rl-post:hover{color:var(--mint-800)}
@media(max-width:640px){.rl{margin-top:52px;padding-top:36px}.rl-svc{padding:18px}}