@charset "utf-8";
/* 늘봄 매거진 — 블로그 웹진 스킨
   레퍼런스 = dokkaebimedia.club 매거진 룩(Pretendard·카드그리드·컬러 액센트·바이라인)을
   늘봄 브랜드 레드로 옮긴 것. 본문 폭은 44rem 고정(한 줄 한글 40~45자). */

.gb{
  --red:#5957c7; --red-d:#3c3ab2; --red-soft:#dfdff6;
  --ink:#16181d; --ink-2:#242a33; --sub:#5b6472; --mute:#868e9c;
  --line:#eceef2; --line-2:#dfe3e9; --bg:#f7f8fa;
  font-family:'Pretendard Variable',Pretendard,-apple-system,system-ui,'Malgun Gothic',sans-serif;
  color:var(--ink); word-break:keep-all;
}
.gb *{box-sizing:border-box}
.gb a{text-decoration:none; color:inherit}
.gb img{max-width:100%; height:auto; display:block}

/* ══ 목록 머리 ══ */
.gb-head{padding:34px 0 26px; border-bottom:2px solid var(--ink)}
.gb-head h1{
  margin:0 0 8px; font-size:32px; font-weight:900; letter-spacing:-.035em; line-height:1.25;
}
.gb-head h1 em{font-style:normal; color:var(--red)}
.gb-head p{margin:0; font-size:14.5px; color:var(--sub); line-height:1.65; max-width:44rem}
.gb-head .cnt{
  display:inline-block; margin-top:12px; padding:4px 11px; border-radius:20px;
  font-size:12px; font-weight:800; color:var(--red); background:var(--red-soft);
}

/* ══ 피처(첫 글) ══ */
.gb-feat{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:30px;
  align-items:center; padding:30px 0; border-bottom:1px solid var(--line);
}
.gb-feat .thumb{position:relative; border-radius:16px; overflow:hidden; background:var(--bg); aspect-ratio:16/10}
.gb-feat .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .35s}
.gb-feat:hover .thumb img{transform:scale(1.03)}
.gb-feat h2{
  margin:12px 0 12px; font-size:27px; font-weight:900; letter-spacing:-.032em; line-height:1.34;
}
.gb-feat p{margin:0 0 16px; font-size:15.5px; line-height:1.75; color:var(--sub)}

/* ══ 카드 그리드 ══ */
.gb-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px 24px; padding:32px 0}
.gb-card .thumb{
  border-radius:14px; overflow:hidden; background:var(--bg); aspect-ratio:16/10; margin-bottom:13px;
}
.gb-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .35s}
.gb-card:hover .thumb img{transform:scale(1.04)}
.gb-card h3{
  margin:0 0 8px; font-size:17.5px; font-weight:800; letter-spacing:-.028em; line-height:1.42;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.gb-card:hover h3{color:var(--red)}
.gb-card p{
  margin:0 0 10px; font-size:13.5px; line-height:1.68; color:var(--sub);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* 태그 pill + 메타 */
.gb-pill{
  display:inline-block; padding:4px 11px; border-radius:20px;
  font-size:11.5px; font-weight:800; letter-spacing:-.01em; color:#fff; background:var(--red);
}
.gb-meta{font-size:12px; color:var(--mute); font-weight:500}
.gb-meta .dot{margin:0 6px; opacity:.5}

/* ══ 페이지네이션 ══ */
.gb-page{display:flex; justify-content:center; gap:6px; padding:10px 0 40px; flex-wrap:wrap}
.gb-page a, .gb-page strong{
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 13px; border:1px solid var(--line-2); border-radius:9px;
  font-size:14px; font-weight:700; color:var(--sub); background:#fff;
}
.gb-page a:hover{border-color:var(--red); color:var(--red)}
.gb-page strong{background:var(--red); border-color:var(--red); color:#fff}

.gb-empty{padding:70px 20px; text-align:center; color:var(--mute); font-size:15px}

/* ══════════ 상세 ══════════ */
.gb-artwrap{
  display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:48px;
  align-items:start; padding:26px 0 10px;
}
.gb-article{min-width:0; max-width:46rem}

.gb-bc{font-size:12.5px; color:var(--mute); margin:0 0 14px}
.gb-bc a:hover{color:var(--red)}
.gb-bc .sep{margin:0 6px; opacity:.55}

.gb-h1{
  margin:13px 0 14px; font-size:34px; font-weight:900;
  letter-spacing:-.038em; line-height:1.3; color:#0f1319;
}
.gb-dek{
  position:relative; margin:4px 0 24px; padding:4px 2px 5px 20px;
  font-size:17px; line-height:1.74; color:#4b5563; letter-spacing:-.012em;
}
.gb-dek::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:4px; border-radius:2px; background:var(--red);
}

.gb-by{
  display:flex; align-items:center; gap:12px; padding:14px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.gb-by .av{
  width:38px; height:38px; flex:0 0 38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; color:#fff; background:var(--red);
}
.gb-by b{display:block; font-size:14px; font-weight:800}
.gb-by .sub{font-size:12.5px; color:var(--mute)}
.gb-by .sub i{font-style:normal}

/* 목차 */
.gb-toc{
  margin:22px 0 4px; padding:16px 18px;
  background:var(--bg); border:1px solid var(--line); border-radius:13px;
}
.gb-toc b{display:block; font-size:12.5px; font-weight:800; color:var(--red); margin-bottom:9px; letter-spacing:.02em}
.gb-toc ol{margin:0; padding-left:18px}
.gb-toc li{font-size:14px; line-height:1.85; color:var(--sub)}
.gb-toc a:hover{color:var(--red); text-decoration:underline}

/* 본문 */
.gb-body{font-size:17.5px; line-height:1.92; color:var(--ink-2); padding:22px 0 8px; letter-spacing:-.003em}
.gb-body p{margin:0 0 1.5em}
.gb-body h2{
  margin:2.1em 0 .75em; padding-left:14px; font-size:23px; font-weight:900;
  letter-spacing:-.032em; line-height:1.4; color:var(--ink);
  border-left:5px solid var(--red);
}
.gb-body h3{margin:1.8em 0 .6em; font-size:18.5px; font-weight:800; letter-spacing:-.026em; color:var(--ink)}
.gb-body ul, .gb-body ol{margin:0 0 1.5em; padding-left:1.35em}
.gb-body li{margin-bottom:.55em}
.gb-body strong{font-weight:800; color:var(--ink)}
.gb-body figure{margin:2em 0}
.gb-body figure img{width:100%; border-radius:14px}
.gb-body figcaption{margin-top:9px; font-size:12.5px; color:var(--mute); text-align:center; line-height:1.6}
.gb-body blockquote{
  margin:1.9em 0; padding:18px 20px; background:var(--red-soft);
  border-left:4px solid var(--red); border-radius:0 12px 12px 0;
  font-size:16.5px; line-height:1.8; color:#404064;
}
.gb-body blockquote p:last-child{margin-bottom:0}
.gb-body table{width:100%; border-collapse:collapse; margin:0 0 1.6em; font-size:15px}
.gb-body th, .gb-body td{padding:11px 13px; border:1px solid var(--line-2); text-align:left; line-height:1.6}
.gb-body th{background:var(--bg); font-weight:800}
.gb-body a{color:var(--red); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.gb-body a:hover{color:var(--red-d)}

/* 하단 안내 박스 */
.gb-foot-by{
  display:flex; gap:15px; margin:32px 0 0; padding:20px 22px;
  background:var(--bg); border:1px solid var(--line); border-radius:16px;
}
.gb-foot-by .av{
  width:46px; height:46px; flex:0 0 46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900; color:#fff; background:var(--red);
}
.gb-foot-by b{display:block; font-size:14.5px; font-weight:800; margin-bottom:5px}
.gb-foot-by p{margin:0; font-size:13.5px; line-height:1.7; color:var(--sub)}

/* ══ 하단 관련 콘텐츠 (2열 × 가로 카드 4개) ══ */
.gb-rel{margin:34px 0 4px}
.gb-rel-h{
  display:flex; align-items:center; gap:9px; margin:0 0 15px;
  font-size:18px; font-weight:800; letter-spacing:-.024em; color:var(--ink);
  padding:0; border:0;
}
.gb-rel-h::before{
  content:""; width:4px; height:17px; border-radius:2px; background:var(--red);
}
.gb-rel-grid{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.gb-rel-c{
  display:flex; gap:13px; align-items:center; padding:11px;
  background:#fff; border:1px solid var(--line); border-radius:13px;
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
.gb-rel-c:hover{
  border-color:var(--red); box-shadow:0 4px 14px rgba(217,44,66,.13);
  transform:translateY(-1px);
}
.gb-rel-c .th{
  flex:0 0 84px; width:84px; height:84px; border-radius:10px;
  overflow:hidden; background:var(--bg); display:block;
}
.gb-rel-c .th img{width:100%; height:100%; object-fit:cover}
.gb-rel-c .tx{min-width:0; display:block}
.gb-rel-c b{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:14.5px; font-weight:700; line-height:1.46; letter-spacing:-.02em; color:var(--ink);
}
.gb-rel-c:hover b{color:var(--red)}
.gb-rel-c em{display:block; margin-top:6px; font-style:normal; font-size:11.5px; color:var(--mute)}

/* 이전·다음 */
.gb-nav{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:26px 0 0}
.gb-nav a{
  padding:16px 18px; border:1px solid var(--line-2); border-radius:13px; background:#fff;
}
.gb-nav a:hover{border-color:var(--red)}
.gb-nav span{display:block; font-size:11.5px; font-weight:800; color:var(--mute); margin-bottom:6px}
.gb-nav b{font-size:14.5px; font-weight:700; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.gb-nav .next{text-align:right}

/* ══ 사이드바 ══ */
.gb-side{position:sticky; top:20px}
.gb-side section{margin-bottom:22px; border:1px solid var(--line); border-radius:15px; overflow:hidden; background:#fff}
.gb-side h4{
  margin:0; padding:14px 17px; font-size:13.5px; font-weight:800;
  border-bottom:1px solid var(--line); background:var(--bg);
}
.gb-side ul{list-style:none; margin:0; padding:7px 0}
.gb-side li a{display:block; padding:10px 17px; font-size:14px; line-height:1.55; color:var(--ink-2)}
.gb-side li a:hover{background:var(--bg); color:var(--red)}
.gb-cta{padding:20px 18px; text-align:center; background:linear-gradient(160deg,#22262e,#14171c)}
.gb-cta b{display:block; font-size:15px; font-weight:800; color:#fff; margin-bottom:6px}
.gb-cta p{margin:0 0 13px; font-size:12.5px; line-height:1.65; color:#a8afbb}
.gb-cta a{
  display:block; padding:12px; border-radius:10px; background:var(--red);
  font-size:15px; font-weight:800; color:#fff; letter-spacing:.01em;
}
.gb-cta a:hover{background:var(--red-d)}

/* ══ 반응형 ══ */
@media (max-width:1023px){
  .gb-artwrap{grid-template-columns:1fr; gap:0; max-width:46rem; margin:0 auto}
  .gb-side{position:static; margin-top:34px}
  .gb-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .gb-head{padding:24px 0 20px}
  .gb-head h1{font-size:25px}
  .gb-feat{grid-template-columns:1fr; gap:15px; padding:22px 0}
  .gb-feat h2{font-size:21px; margin:10px 0}
  .gb-feat p{font-size:14.5px}
  .gb-grid{grid-template-columns:1fr; gap:24px; padding:24px 0}
  .gb-h1{font-size:25px; line-height:1.34; margin:11px 0 13px}
  .gb-dek{font-size:15.5px; line-height:1.68; padding-left:15px; margin-bottom:20px}
  .gb-body{font-size:16.5px; line-height:1.9}
  .gb-body h2{font-size:20px; padding-left:12px; border-left-width:4px}
  .gb-body h3{font-size:17px}
  .gb-rel-grid{grid-template-columns:1fr}
  .gb-rel-h{font-size:17px}
  .gb-rel-c .th{flex:0 0 74px; width:74px; height:74px}
  .gb-nav{grid-template-columns:1fr}
  .gb-nav .next{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .gb-feat .thumb img,.gb-card .thumb img{transition:none}
  .gb-feat:hover .thumb img,.gb-card:hover .thumb img{transform:none}
}