/* =====================================================================
   SCALETRON 칼럼 — 기존 서브페이지 틀(contents_head 배너 + .contents_body .container) 안에
   들어가는 목록(.up-col)·본문(.up-colv) UI. 공지사항 등 다른 서브페이지와 같은 톤(흰 바탕·잉크 네이비·브랜드 블루).
   ===================================================================== */
#contents .up-col,#contents .up-colv{font-family:var(--up-sans,Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif);color:#1A2130;letter-spacing:-.01em}
#contents .up-col *,#contents .up-colv *{box-sizing:border-box}
#contents .up-col b,#contents .up-col strong,#contents .up-colv b,#contents .up-colv strong{font-size:inherit;font-weight:700}
#contents .up-col i,#contents .up-col em,#contents .up-colv i,#contents .up-colv em{font-size:inherit;font-style:normal}

/* ---------- 목록 ---------- */
#contents .up-col{padding:8px 0 110px}
#contents .up-col__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1px solid #E4E9F0;margin-bottom:44px}
#contents .up-col__tabs{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
#contents .up-col__tabs::-webkit-scrollbar{display:none}
#contents .up-col__tabs li{list-style:none}
#contents .up-col__tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 18px;font:inherit;font-size:16px;font-weight:600;color:#6B7483;cursor:pointer;white-space:nowrap;transition:color .2s}
#contents .up-col__tabs button em{font-size:13px;font-weight:500;margin-left:6px;color:#9AA3B2}
#contents .up-col__tabs button:hover{color:#1A2130}
#contents .up-col__tabs button.is-active{color:#0B1220;border-bottom-color:#0B1220}
#contents .up-col__tabs button.is-active em{color:#0852BC}
#contents .up-col__count{margin:0 0 14px;font-size:14px;color:#6B7483;white-space:nowrap}
#contents .up-col__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 32px}
#contents .up-col__card{display:none;list-style:none}
#contents .up-col__card.is-show{display:block}
#contents .up-col__card a{display:block;color:inherit;text-decoration:none}
#contents .up-col__card .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#F4F6F9}
#contents .up-col__card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
#contents .up-col__card a:hover .thumb img{transform:scale(1.04)}
#contents .up-col__card .thumb--none{display:flex;align-items:center;justify-content:center;background:#0B1220;color:rgba(255,255,255,.35);font-size:13px;letter-spacing:.3em}
#contents .up-col__card .meta{display:flex;align-items:center;gap:10px;margin:18px 0 10px;font-size:13px;color:#6B7483}
#contents .up-col__card .meta .cate{color:#0852BC;font-weight:700}
#contents .up-col__card .meta time::before{content:"";display:inline-block;width:1px;height:10px;background:#D7DEE8;margin-right:10px;vertical-align:-1px}
#contents .up-col__card h3{margin:0 0 10px;font-size:20px;font-weight:700;line-height:1.4;color:#1A2130;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
#contents .up-col__card a:hover h3{color:#0852BC}
#contents .up-col__card p{margin:0;font-size:15px;line-height:1.7;color:#5A6373;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#contents .up-col__more{display:flex;justify-content:center;margin-top:72px}
#contents .up-col__more button{appearance:none;background:#fff;border:1px solid #1A2130;border-radius:999px;padding:14px 38px;font:inherit;font-size:15px;font-weight:600;color:#1A2130;cursor:pointer;transition:background .2s,color .2s}
#contents .up-col__more button:hover{background:#1A2130;color:#fff}
#contents .up-col__empty{display:none;margin:0;padding:90px 0;text-align:center;font-size:16px;color:#6B7483}
#contents .up-col.is-empty .up-col__empty{display:block}

/* ---------- 본문 ---------- */
#contents .up-colv{max-width:820px;margin:0 auto;padding:16px 0 110px}
#contents .up-colv__head{text-align:center;padding:28px 0 36px;border-bottom:1px solid #E4E9F0}
#contents .up-colv__head .cate{display:inline-block;font-size:14px;font-weight:700;color:#0852BC;text-decoration:none;margin-bottom:16px}
#contents .up-colv__head h2{margin:0 0 20px;font-size:clamp(26px,3vw,38px);font-weight:700;line-height:1.3;color:#0B1220;word-break:keep-all;letter-spacing:-.02em}
#contents .up-colv__head .meta{display:flex;justify-content:center;gap:14px;font-size:14px;color:#6B7483}
#contents .up-colv__head .meta time::before{content:"";display:inline-block;width:1px;height:11px;background:#D7DEE8;margin-right:14px;vertical-align:-1px}
#contents .up-colv__cover{margin:44px 0 0;border-radius:8px;overflow:hidden;background:#F4F6F9}
#contents .up-colv__cover img{width:100%;display:block}
#contents .up-colv__body{padding:48px 0 0;font-size:17px;line-height:1.9;color:#2A3140;word-break:keep-all;overflow-wrap:anywhere}
#contents .up-colv__body>:first-child{margin-top:0}
#contents .up-colv__body p{margin:0 0 1.4em;font-size:inherit;line-height:inherit;color:inherit}
#contents .up-colv__body h2,#contents .up-colv__body h3,#contents .up-colv__body h4{margin:2em 0 .8em;font-weight:700;line-height:1.35;color:#0B1220;letter-spacing:-.02em}
#contents .up-colv__body h2{font-size:26px}
#contents .up-colv__body h3{font-size:22px}
#contents .up-colv__body h4{font-size:18px}
#contents .up-colv__body blockquote{margin:2em 0;padding:6px 0 6px 24px;border-left:3px solid #0852BC;color:#4A5262;font-size:18px}
#contents .up-colv__body blockquote p:last-child{margin-bottom:0}
#contents .up-colv__body ul,#contents .up-colv__body ol{margin:0 0 1.4em;padding-left:1.4em}
#contents .up-colv__body ul li{list-style:disc;margin:.3em 0}
#contents .up-colv__body ol li{list-style:decimal;margin:.3em 0}
#contents .up-colv__body img{max-width:100%;height:auto;display:block;margin:2em auto;border-radius:6px}
#contents .up-colv__body p img{margin:.6em auto}
#contents .up-colv__body figure{margin:2em 0}
#contents .up-colv__body figcaption{margin-top:10px;text-align:center;font-size:13px;color:#8A93A2}
#contents .up-colv__body a{color:#0852BC;text-decoration:underline;text-underline-offset:3px}
#contents .up-colv__body hr{border:0;height:1px;background:#E4E9F0;margin:3em 0;width:100%}
#contents .up-colv__body table{width:100%;border-collapse:collapse;margin:2em 0;font-size:15px;line-height:1.6}
#contents .up-colv__body th,#contents .up-colv__body td{border-top:1px solid #E4E9F0;padding:12px 14px;text-align:left;vertical-align:top}
#contents .up-colv__body tr:last-child th,#contents .up-colv__body tr:last-child td{border-bottom:1px solid #E4E9F0}
#contents .up-colv__body th{background:#F4F6F9;font-weight:700;color:#1A2130;white-space:nowrap}
#contents .up-colv__foot{margin-top:72px;border-top:1px solid #E4E9F0}
#contents .up-colv__nb{list-style:none;margin:0;padding:0}
#contents .up-colv__nb li{display:flex;align-items:center;gap:20px;padding:18px 6px;border-bottom:1px solid #E4E9F0;font-size:15px;list-style:none}
#contents .up-colv__nb .lbl{flex:0 0 60px;color:#6B7483;font-size:13px;font-weight:600}
#contents .up-colv__nb a{flex:1;min-width:0;color:#1A2130;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#contents .up-colv__nb a:hover{color:#0852BC}
#contents .up-colv__nb time{flex:0 0 auto;font-size:13px;color:#9AA3B2}
#contents .up-colv__nb .none{flex:1;color:#9AA3B2}
#contents .up-colv__btns{display:flex;justify-content:center;margin-top:44px}
#contents .up-colv__btns a{display:inline-block;padding:13px 36px;border:1px solid #1A2130;border-radius:999px;font-size:15px;font-weight:600;color:#1A2130;text-decoration:none;transition:background .2s,color .2s}
#contents .up-colv__btns a:hover{background:#1A2130;color:#fff}

@media (max-width:1024px){
  #contents .up-col__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
}
@media (max-width:640px){
  #contents .up-col{padding-bottom:72px}
  #contents .up-col__head{flex-direction:column;align-items:stretch;gap:0;margin-bottom:32px}
  #contents .up-col__count{display:none}
  #contents .up-col__tabs button{padding:12px 14px;font-size:15px}
  #contents .up-col__grid{grid-template-columns:1fr;gap:36px}
  #contents .up-col__card h3{font-size:18px}
  #contents .up-col__more{margin-top:48px}
  #contents .up-colv{padding-bottom:72px}
  #contents .up-colv__head{padding:12px 0 28px}
  #contents .up-colv__cover{margin-top:28px;border-radius:6px}
  #contents .up-colv__body{padding-top:32px;font-size:16px;line-height:1.85}
  #contents .up-colv__body h2{font-size:22px}
  #contents .up-colv__body h3{font-size:19px}
  #contents .up-colv__body blockquote{font-size:16px;padding-left:16px}
  #contents .up-colv__nb li{gap:12px;padding:14px 2px}
  #contents .up-colv__nb time{display:none}
}

/* ---------- Cloudflare(D1) 버전: 탭이 링크, 서버 쪽 페이지 이동 ---------- */
#contents .up-col__tabs a{display:block;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 18px;font-size:16px;font-weight:600;color:#6B7483;text-decoration:none;white-space:nowrap;transition:color .2s}
#contents .up-col__tabs a em{font-size:13px;font-weight:500;margin-left:6px;color:#9AA3B2}
#contents .up-col__tabs a:hover{color:#1A2130}
#contents .up-col__tabs a.is-active{color:#0B1220;border-bottom-color:#0B1220}
#contents .up-col__tabs a.is-active em{color:#0852BC}
#contents .up-col__pager{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:72px}
#contents .up-col__pager a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 6px;border-radius:999px;font-size:15px;font-weight:600;color:#6B7483;text-decoration:none;transition:background .2s,color .2s}
#contents .up-col__pager a:hover{background:#F4F6F9;color:#1A2130}
#contents .up-col__pager a.is-active{background:#0B1220;color:#fff}
#contents .up-col__pager .pv,#contents .up-col__pager .nx{font-size:22px;font-weight:400}
#contents .up-colv__preview{margin:0 0 24px;padding:12px 16px;border-radius:8px;background:#FFF6D8;color:#7A5A00;font-size:14px;text-align:center}
@media (max-width:640px){#contents .up-col__tabs a{padding:12px 14px;font-size:15px}#contents .up-col__pager{margin-top:48px}}