/* 기본 요소·타이포·유틸리티 — 그누보드: theme/classpick/css/base.css */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.65;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--border);margin:0}
:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px;border-radius:4px}
::selection{background:var(--lime);color:var(--ink-900)}
[hidden]{display:none!important}
i[data-lucide], svg.lucide{width:18px;height:18px;stroke-width:1.75;flex:none}
svg.lucide-play{fill:currentColor}

/* 타이포 */
.t-display{font-size:48px;line-height:1.2;font-weight:800;letter-spacing:-.045em}
.t-h1{font-size:32px;line-height:1.3;font-weight:800;letter-spacing:-.04em}
.t-h2{font-size:24px;line-height:1.35;font-weight:800;letter-spacing:-.035em}
.t-h3{font-size:19px;line-height:1.4;font-weight:700;letter-spacing:-.025em}
.t-h4{font-size:16px;line-height:1.45;font-weight:700;letter-spacing:-.02em}
.t-body{font-size:15px}
.t-sm{font-size:14px;line-height:1.6}
.t-caption{font-size:13px;line-height:1.5;font-weight:500}
.t-micro{font-size:12px;line-height:1.4;font-weight:600}
.muted{color:var(--text-2)} .subtle{color:var(--text-3)}
.lime-ink{color:var(--lime-ink)} .danger-text{color:var(--danger)}
.num{font-variant-numeric:tabular-nums}
.bold{font-weight:700} .xbold{font-weight:800}
.hl{background:linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%);padding:0 2px}
.clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:768px){
  .t-display{font-size:32px}
  .t-h1{font-size:24px}
  .t-h2{font-size:20px}
  .t-h3{font-size:17px}
  .t-h4{font-size:15px}
}

/* 레이아웃 유틸 */
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.container-narrow{max-width:calc(840px + var(--gutter)*2)}
.container-form{max-width:calc(480px + var(--gutter)*2)}
.section{padding:64px 0}
.section-sm{padding:40px 0}
.bg-subtle{background:var(--bg-subtle)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.center{justify-content:center;align-items:center}
.grow{flex:1;min-width:0}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-32{gap:32px}.gap-40{gap:40px}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-64{margin-top:64px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.w-full{width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 그누보드 스킨의 화면낭독기용 문구(css/default.css를 불러오지 않으므로 여기서): 화면에서만 감추고 스크린리더에는 남깁니다 */
.sound_only,.msg_sound_only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media (max-width:1024px){ .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:768px){
  .section{padding:40px 0}
  .section-sm{padding:28px 0}
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:1fr}
  .hide-mobile{display:none!important}
}
@media (min-width:769px){ .show-mobile{display:none!important} }