/* 칼럼 페이지 전용 CSS */

/* 다크 히어로 */
.cl-hero { background:linear-gradient(180deg, #D6EEFF 0%, #EFF8FF 60%, #FFFFFF 100%); padding:120px 24px 48px; text-align:center; position:relative; overflow:hidden; }
.cl-hero__glow { position:absolute; bottom:-30%; left:50%; transform:translateX(-50%); width:500px; height:500px; background:radial-gradient(circle, rgba(232,93,138,0.1) 0%, transparent 70%); pointer-events:none; }
.cl-hero__inner { position:relative; z-index:1; }
.cl-hero__label { font-size:11px; letter-spacing:3px; color:var(--보라-600); margin-bottom:8px; }
.cl-hero__title { font-size:32px; font-weight:700; color:var(--검정-800); margin-bottom:8px; }
.cl-hero__desc { font-size:15px; color:var(--검정-700); }

/* 검색 */
.cl-search-wrap { max-width:1200px; margin:0 auto; padding:20px 24px 0; display:flex; justify-content:flex-end; }
.cl-search { display:flex; align-items:center; gap:8px; width:280px; height:38px; background:#fff; border:1px solid rgba(212,223,235,0.5); border-radius:var(--둥글기-중); padding:0 12px; transition:border-color 0.2s; }
.cl-search:focus-within { border-color:var(--보라-600); }
.cl-search__icon { width:16px; height:16px; flex-shrink:0; stroke:var(--검정-300); }
.cl-search input { flex:1; border:none; outline:none; font-size:13px; color:var(--검정-800); background:transparent; }
.cl-search input::placeholder { color:var(--베이지-400); }

/* 그리드 */
.cl-grid-wrap { max-width:1200px; margin:0 auto; padding:20px 24px 48px; }
.cl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* 카드 */
.col-card { display:block; background:#fff; border:1px solid rgba(212,223,235,0.15); border-radius:var(--둥글기-대); overflow:hidden; transition:transform 0.2s, box-shadow 0.2s; }
.col-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.col-card.hidden { display:none; }

.col-thumb { aspect-ratio:16/9; background:var(--베이지-200); background-size:cover; background-position:center; }

.col-body { padding:16px 18px 20px; }
.col-tag-label { font-size:11px; color:var(--보라-600); margin-bottom:6px; }
.col-title { font-size:17px; font-weight:600; color:var(--검정-800); line-height:1.4; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.col-excerpt { font-size:13px; color:var(--검정-700); line-height:1.65; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:10px; }
.col-meta { font-size:11px; color:var(--검정-700); }

/* 검색 결과 없음 */
.cl-empty { text-align:center; padding:48px 0; font-size:14px; color:var(--검정-700); }

/* 더 보기 */
.cl-loadmore { text-align:center; padding:24px 0; }
.cl-loadmore__btn { border:1.5px solid var(--보라-400); color:var(--보라-600); background:transparent; padding:10px 32px; border-radius:var(--둥글기-중); font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s; }
.cl-loadmore__btn:hover { background:var(--보라-50); border-color:var(--보라-600); }
.cl-loadmore__count { font-size:12px; color:var(--검정-700); margin-top:8px; }

/* ===== 상세 페이지 ===== */
.cl-back-bar { max-width:960px; margin:0 auto; padding:80px 24px 16px; border-bottom:1px solid rgba(212,223,235,0.2); }
.cl-back-bar a { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--보라-600); transition:color 0.15s; }
.cl-back-bar a:hover { color:var(--보라-700); }

.cl-article { max-width:720px; margin:0 auto; padding:24px 24px 48px; }

/* 헤더 */
.cl-article__header { text-align:center; margin-bottom:32px; }
.cl-article__header .col-tag-label { margin-bottom:12px; }
.cl-article__title { font-size:clamp(24px, 4vw, 32px); font-weight:700; color:var(--검정-800); line-height:1.35; margin-bottom:12px; }
.cl-article__meta { font-size:13px; color:var(--검정-700); display:flex; align-items:center; justify-content:center; gap:8px; }
.cl-article__meta .dot { margin:0; }

/* 썸네일 */
.cl-article__cover { border-radius:var(--둥글기-대); overflow:hidden; margin-bottom:32px; }
.cl-article__cover img { width:100%; height:auto; display:block; }

/* 목차 (TOC) */
.cl-toc { background:var(--베이지-100); border:1px solid rgba(212,223,235,0.3); border-radius:var(--둥글기-대); padding:20px 24px; margin-bottom:32px; }
.cl-toc__title { font-size:12px; font-weight:600; color:var(--검정-700); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; }
.cl-toc__list { list-style:none; padding:0; margin:0; counter-reset:toc; }
.cl-toc__list li { margin-bottom:4px; }
.cl-toc__list li a { color:var(--검정-700); font-size:14px; text-decoration:none; display:block; padding:4px 0; transition:color 0.2s, padding-left 0.2s; }
.cl-toc__list li a:hover { color:var(--보라-600); padding-left:6px; }
.cl-toc__list li.cl-toc--h3 a { padding-left:16px; font-size:13px; color:var(--검정-400); }
.cl-toc__list li.cl-toc--h3 a:hover { color:var(--보라-600); padding-left:22px; }

/* 본문 */
.cl-article__body { line-height:1.9; font-size:15px; }
.cl-article__body h2 { font-size:20px; font-weight:600; color:var(--검정-800); margin-top:40px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid rgba(212,223,235,0.2); }
.cl-article__body h3 { font-size:17px; font-weight:600; color:var(--검정-800); margin-top:28px; margin-bottom:8px; }
.cl-article__body p { color:var(--검정-700); margin-bottom:16px; }
.cl-article__body strong { font-weight:600; color:var(--검정-800); }
.cl-article__body a { color:var(--보라-600); text-decoration:underline; text-underline-offset:3px; }
.cl-article__body ul, .cl-article__body ol { margin:12px 0 20px 20px; color:var(--검정-700); }
.cl-article__body li { margin-bottom:6px; line-height:1.7; }
.cl-article__body ul li::marker { color:var(--보라-600); }
.cl-article__body ol li::marker { color:var(--보라-600); font-weight:600; }
.cl-article__body blockquote { background:var(--보라-50); border-left:3px solid var(--보라-400); padding:16px 20px; margin:20px 0; border-radius:0 var(--둥글기-중) var(--둥글기-중) 0; }
.cl-article__body blockquote p { color:var(--검정-800); margin-bottom:0; font-size:14px; }
.cl-article__body img { border-radius:var(--둥글기-대); margin:20px 0; max-width:100%; height:auto; }

/* CTA */
.cl-article__cta { background:var(--분홍-100); border-radius:var(--둥글기-대); padding:32px; margin-top:40px; text-align:center; position:relative; overflow:hidden; }
.cl-article__cta::before { content:''; position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:400px; height:400px; background:radial-gradient(circle, rgba(232,93,138,0.12) 0%, transparent 70%); pointer-events:none; }
.cl-article__cta h3 { font-size:18px; color:var(--검정-800); margin-bottom:8px; position:relative; }
.cl-article__cta p { font-size:14px; color:var(--베이지-400); margin-bottom:16px; position:relative; }
.cl-article__cta-btn { display:inline-block; background:var(--보라-600); color:#fff; padding:12px 32px; border-radius:var(--둥글기-중); font-size:15px; font-weight:500; transition:background 0.2s, transform 0.15s; position:relative; }
.cl-article__cta-btn:hover { background:var(--보라-700); transform:translateY(-2px); }

/* 태그 */
.cl-article__footer { margin-top:32px; padding-top:20px; border-top:1px solid rgba(212,223,235,0.2); }
.cl-article__tags { display:flex; flex-wrap:wrap; gap:8px; }
.article-tag { font-size:12px; color:var(--보라-600); background:var(--보라-50); padding:4px 12px; border-radius:16px; }

/* 반응형 */
@media(max-width:768px) {
  .cl-search-wrap { justify-content:stretch; }
  .cl-search { width:100%; }
  .cl-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
  .cl-hero__title { font-size:26px; }
  .cl-article { padding:16px 16px 40px; }
  .cl-article__body { font-size:14px; }
  .cl-article__body h2 { font-size:18px; margin-top:32px; }
  .cl-toc { padding:16px 20px; }
}
@media(max-width:480px) {
  .cl-grid { grid-template-columns:1fr; }
}