@charset "utf-8";
/* 게시판 스킨 체험 (skinlab) — 스킨을 돋보이게 하려고 테마는 흰 바탕 · 회색 선 · 탭만 둔다 */
:root{ --sl-ink:#111827; --sl-body:#4b5563; --sl-mut:#9ca3af; --sl-line:#e5e7eb; --sl-soft:#f6f7f9; --sl-key:#2563eb; }
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:#fff; color:var(--sl-ink); font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:15px; line-height:1.7; -webkit-text-size-adjust:100%; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }
.sl-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.sl-bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; padding:8px 16px; background:#111827; color:#cbd5e1; font-size:12.5px; text-align:center; }
.sl-bar b{ color:#fff; }
.sl-bar a{ color:#93c5fd; font-weight:700; }
.sl-head{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--sl-line); }
.sl-head__in{ display:flex; justify-content:space-between; align-items:center; gap:16px; height:60px; }
.sl-logo{ display:flex; align-items:baseline; gap:8px; }
.sl-logo strong{ font-size:18px; font-weight:800; letter-spacing:.08em; }
.sl-logo small{ font-size:11px; color:var(--sl-mut); }
.sl-now{ margin:0; font-size:13px; color:var(--sl-body); }
.sl-now code{ padding:2px 8px; border-radius:6px; background:var(--sl-soft); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--sl-key); }
.sl-tabs{ border-top:1px solid var(--sl-line); overflow-x:auto; scrollbar-width:none; }
.sl-tabs::-webkit-scrollbar{ display:none; }
.sl-tabs ul{ display:flex; gap:4px; margin:0 auto; list-style:none; white-space:nowrap; }
.sl-tabs a{ display:block; padding:12px 14px; font-size:14px; font-weight:500; color:var(--sl-body); border-bottom:2px solid transparent; }
.sl-tabs a:hover{ color:var(--sl-ink); }
.sl-tabs a.is-on{ color:var(--sl-key); border-bottom-color:var(--sl-key); font-weight:700; }
.sl-main{ padding:34px 0 80px; min-height:60vh; }
.sl-intro{ padding:30px 0 10px; text-align:center; }
.sl-intro h1{ margin:0; font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-.03em; }
.sl-intro p{ margin:14px 0 0; color:var(--sl-body); }
.sl-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:36px 0 0; padding:0; list-style:none; }
.sl-cards a{ display:flex; flex-direction:column; gap:6px; height:100%; padding:22px; border:1px solid var(--sl-line); border-radius:12px; transition:border-color .2s, transform .2s; }
.sl-cards a:hover{ border-color:var(--sl-key); transform:translateY(-3px); }
.sl-cards code{ align-self:flex-start; padding:2px 8px; border-radius:6px; background:var(--sl-soft); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--sl-key); }
.sl-cards strong{ font-size:18px; }
.sl-cards span{ font-size:13.5px; color:var(--sl-body); }
.sl-cards em{ margin-top:auto; padding-top:10px; font-style:normal; font-size:13px; font-weight:600; color:var(--sl-key); }
.sl-foot{ padding:30px 0 40px; border-top:1px solid var(--sl-line); background:var(--sl-soft); font-size:13px; color:var(--sl-body); text-align:center; }
.sl-foot p{ margin:4px 0; }
.sl-foot a{ color:var(--sl-key); text-decoration:underline; }
@media (max-width:640px){ .sl-wrap{ padding:0 16px; } .sl-now{ display:none; } }
/* 최신글 모음 · 추가 안내 카드 */
.sl-more{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:36px 0 0; padding:0; list-style:none; }
.sl-more a{ display:flex; flex-direction:column; gap:6px; height:100%; padding:24px; border-radius:14px; background:#111827; color:#fff; transition:transform .2s; }
.sl-more a:hover{ transform:translateY(-3px); }
.sl-more code{ align-self:flex-start; padding:2px 8px; border-radius:6px; background:rgba(255,255,255,.12); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:#93c5fd; }
.sl-more strong{ font-size:20px; }
.sl-more span{ font-size:14px; color:#cbd5e1; }
.sl-more em{ margin-top:auto; padding-top:8px; font-style:normal; font-size:13.5px; font-weight:700; color:#93c5fd; }
.sl-cards{ margin-top:14px; }
.sl-lat{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin-top:34px; }
.sl-lat__item{ padding:26px 26px 30px; border:1px solid var(--sl-line); border-radius:16px; background:#fff; min-width:0; }
.sl-lat__item.is-wide{ grid-column:1 / -1; }
.sl-lat__head{ margin-bottom:22px; padding-bottom:18px; border-bottom:1px dashed var(--sl-line); }
.sl-lat__head code{ padding:2px 8px; border-radius:6px; background:var(--sl-soft); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--sl-key); }
.sl-lat__head h2{ margin:8px 0 2px; font-size:21px; }
.sl-lat__head p{ margin:0; font-size:14px; color:var(--sl-body); }
.sl-lat__head pre{ margin:10px 0 0; padding:8px 12px; border-radius:8px; background:#0f172a; color:#e2e8f0; font-size:12.5px; white-space:pre-wrap; word-break:break-all; }
@media (max-width:760px){
  .sl-more, .sl-lat{ grid-template-columns:1fr; }
  .sl-lat__item{ padding:20px 16px 22px; }
}