/* 크리니티 소식(공지&보도자료·이벤트) 페이지 전용 스타일 — 2026.10 리뉴얼
   회사소개(introduce/company.css)·상품문의(qna/qna.css)와 같은 색·글꼴·여백 기준. 색은 변수로만 씀(나중에 다크 모드는 값만 바꿈)
   목록·상세 모두 기존 스크립트(notice.js·common.js)가 만드는 구조 그대로에 모양만 입힘 */
:root{
  --primary:#0085f5; --primary-h:#006ecb; --weak-bg:#e8f3ff; --weak-fg:#0067c2;
  --title:#111; --fg:#191f28; --body:#4e5968; --muted:#8b95a1; --hint:#b0b8c1;
  --canvas:#fff; --soft:#f7f8fa; --surface:#f2f4f6; --card:#fff; --border:#e5e8eb;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --r:8px; --rc:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:"Pretendard Variable","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
}

/* ===== 사이트 공통 CSS(basic.css · supportBasic.css)와 함께 쓰기 위한 보정 ===== */
#header{height:var(--hd-h,56px)!important;margin-bottom:0!important;background:none!important}   /* 옛 배너(366px·도시 사진) 없이 상단 메뉴 바만 */
#header{position:sticky!important;top:0;z-index:1000;transition:transform .35s var(--ease)}
#header.hd-up{transform:translateY(-100%)}                              /* 아래로 스크롤하면 숨고 위로 올리면 나타남 (js/board-fx.js) */
:where(#cp),:where(#cp) *,:where(#cp) *::before,:where(#cp) *::after{box-sizing:border-box}
:where(#cp) a{display:inline;width:auto;height:auto;color:inherit;text-decoration:none}
:where(#cp) h1{position:relative;left:auto;top:auto;z-index:auto}       /* supportBasic.css 의 h1(로고용) 위치 무력화 */
:where(#cp) :is(h1,h2,h3,h4,p,ul,li){margin:0;padding:0}
:where(#cp) :is(h1,h2,h3,h4){font-size:inherit;font-weight:inherit}
:where(#cp) li{list-style:none}
#cp{background:var(--canvas);text-align:left;color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased}
#cp :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.w{max-width:1280px;margin:0 auto;padding-inline:40px}
/* Lenis 부드러운 스크롤 */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}

/* ===== 히어로: 흰색 → 연파랑, 목록이 빨리 보이도록 낮게 ===== */
.bh{position:relative;background:linear-gradient(100deg,#fff 0%,#fff 42%,#f4f9ff 72%,#eaf4ff 100%)}
.bh::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;background:linear-gradient(180deg,rgba(255,255,255,0),var(--canvas));pointer-events:none}
.bh-in{position:relative;z-index:1;padding-block:96px 56px}
.bh-lab{font-size:16px;font-weight:500;color:var(--body);letter-spacing:-.02em;margin-bottom:14px!important}
.bh-t{font-size:48px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--title)}
.bh-s{margin-top:16px!important;font-size:20px;font-weight:400;line-height:1.5;color:var(--body)}
/* 문구 등장 (js가 html.bfx → html.bfx-in 을 붙임. 스크립트가 없으면 처음부터 보임) */
.bfx .bh-lab,.bfx .bh-t,.bfx .bh-s{opacity:0;translate:0 16px;transition:opacity .8s var(--ease),translate .9s var(--ease)}
.bfx .bh-t{transition-delay:.06s}.bfx .bh-s{transition-delay:.14s}
.bfx-in .bh-lab,.bfx-in .bh-t,.bfx-in .bh-s{opacity:1;translate:0 0}

/* ===== 분류 탭: 스크롤하면 맨 위에 붙고, 상단 메뉴 바가 보이면 그 아래로 ===== */
.bd-tabs{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.6) blur(10px);backdrop-filter:saturate(1.6) blur(10px);transition:top .35s var(--ease)}
body.hd-shown .bd-tabs{top:var(--hd-h,56px)}                       /* 상단 메뉴 바 아래 (PC 80px · 모바일 56px, layout2026.css) */
.bd-tabs-in{display:flex;align-items:center;gap:24px}
.bd-home{display:none!important}
.boardBtn ul{display:flex}
.boardBtn li{position:relative}
.boardBtn a{display:inline-flex!important;align-items:center;white-space:nowrap;font-weight:600;color:var(--muted);transition:color .2s,background .2s,box-shadow .2s}
.boardBtn a:hover{color:var(--fg)}
.boardBtn li.clicked a{color:var(--title)}

/* ===== 목록 공통 ===== */
.bd-list{padding-block:48px 120px}
.noticeWrap{min-height:560px}                          /* 글을 불러오는 동안 푸터가 튀어 오르지 않게 */
.noticeWrap>div{display:none}
.noticeWrap>.allBrd{display:block}
.bd-tb{width:100%;border-collapse:collapse;table-layout:fixed}
.bd-tb th{font-weight:600;text-align:left}
.bd-tb td{padding:0;vertical-align:middle}
.bd-tb tbody tr{position:relative;transition:background .2s}
.bd-tb td.br_title a{display:block!important;color:var(--fg);transition:color .2s}
.bd-tb td.br_title a::after{content:"";position:absolute;inset:0}          /* 줄 전체를 눌러도 글로 이동 */
.bd-tb td.br_title a,.bd-tb .title_line,.bd-tb .sub_line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-tb td.br_date{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 분류: 스크립트가 넣은 글자를 그대로 두고 꼬리표 모양만 (js/board-fx.js 가 span 으로 감쌈) */
.cat{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;font-size:13px;font-weight:600;white-space:nowrap}
.cat-n{background:var(--weak-bg);color:var(--weak-fg)}
.cat-p{background:var(--surface);color:var(--body)}
/* 새 목록이 들어오면 위에서부터 차례로 은은하게 */
@keyframes bdIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.rv-on .bd-tb tbody tr{animation:bdIn .5s var(--ease) both}
.rv-on .bd-tb tbody tr:nth-child(2){animation-delay:.03s}.rv-on .bd-tb tbody tr:nth-child(3){animation-delay:.06s}
.rv-on .bd-tb tbody tr:nth-child(4){animation-delay:.09s}.rv-on .bd-tb tbody tr:nth-child(5){animation-delay:.12s}
.rv-on .bd-tb tbody tr:nth-child(6){animation-delay:.15s}.rv-on .bd-tb tbody tr:nth-child(7){animation-delay:.18s}
.rv-on .bd-tb tbody tr:nth-child(8){animation-delay:.21s}.rv-on .bd-tb tbody tr:nth-child(9){animation-delay:.24s}
.rv-on .bd-tb tbody tr:nth-child(10){animation-delay:.27s}

/* 페이지 번호 (구조: .paging > .prev / .nums > ul > li / .next — 기존 스크립트가 씀) */
.paging{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:48px}
.paging_num{display:flex;gap:4px}
.paging a{display:inline-flex!important;align-items:center;justify-content:center;min-width:36px;height:36px!important;padding:0 6px;border-radius:var(--r);font-size:15px;font-weight:500;color:var(--body);font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.paging_num a:hover{background:var(--surface);color:var(--fg)}
.paging .arrow a{font-size:0;color:var(--muted)}
.paging .arrow a::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(-135deg) translate(-1px,-1px)}
.paging .next a::before{transform:rotate(45deg) translate(-1px,1px)}
.paging .arrow a:hover{background:var(--surface);color:var(--fg)}

/* ===== 상세 공통 ===== */
.bd-v .bd-home{display:inline-flex!important;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--title)!important;white-space:nowrap}
.bv{padding-block:56px 120px}
.bv .substance{max-width:880px;margin:0 auto}
.bv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:14px;color:var(--muted)}
.bv-date{font-variant-numeric:tabular-nums}
.bv-t{margin-top:14px!important;font-size:32px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:var(--title);text-wrap:balance}
/* 첨부파일 (공지사항만, 있을 때) */
.attach-wrapper:empty{display:none}
.attach-wrapper{margin-top:32px;padding:16px 20px;border-radius:12px;background:var(--soft)}
.attach{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--body);margin-bottom:6px}
.attach strong{font-weight:600}
.attach .num{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--weak-bg);color:var(--weak-fg);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.attach-list{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:15px}
.attach-list+.attach-list{border-top:1px solid var(--border)}
.attach-list .text{flex:1;min-width:0;font-weight:500}
.attach-list .text a{color:var(--fg);overflow-wrap:anywhere}
.attach-list .text a:hover{color:var(--primary);text-decoration:underline}
.attach-list>.num{font-size:13px;color:var(--muted);white-space:nowrap}
.attach-list .download a{display:inline-flex!important;align-items:center;height:30px;padding:0 12px;border:1px solid var(--border);border-radius:6px;background:var(--card);font-size:13px;font-weight:600;color:var(--body);white-space:nowrap;transition:border-color .2s,color .2s}
.attach-list .download a:hover{border-color:var(--primary);color:var(--primary)}
/* 본문: 글 내용(편집기 HTML)은 그대로 두고, 화면 폭을 넘지 않게만 */
.body_text-content{margin-top:40px;font-size:16px;line-height:1.8;color:var(--fg);overflow-wrap:anywhere}
.body_text-content :is(p,div,span,font,b,strong,h1,h2,h3,h4,li,td,th){font-family:inherit!important}   /* 글마다 다른 글꼴(맑은 고딕·굴림 등)을 사이트 글꼴로 통일, 크기·색은 글 그대로 */
.body_text-content img,.body_text-content video,.body_text-content iframe{max-width:100%!important;height:auto}
.body_text-content table{max-width:100%}
.body_text-content a{color:var(--primary);text-decoration:underline}
.bv-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:64px;padding-top:24px;border-top:1px solid var(--border)}
.bv-foot .util{order:2}
#print{height:44px;padding:0 18px;border:1px solid var(--border);border-radius:var(--r);background:var(--card);font:inherit;font-size:15px;font-weight:600;color:var(--body);cursor:pointer;transition:border-color .2s,color .2s}
#print:hover{border-color:var(--hint);color:var(--fg)}
.go_menu a{display:inline-flex!important;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r);background:var(--fg);font-size:15px;font-weight:600;color:#fff!important;transition:background .2s}   /* 10.12 검정 포인트 (목록으로) */
.go_menu a::before{content:"";width:7px;height:7px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(-135deg)}
.go_menu a:hover{background:#333d4b}

/* ======================================================================
   시안 A · 표 정돈형 — 상품문의(B4)와 같은 선 구분 표, 밑줄 탭, 파란 번호
   ====================================================================== */
/* 분류: 밑줄·가로선 대신 둥근 버튼. 고른 버튼만 진하게 채움 */
.va .bd-tabs{padding-block:14px}
.va .bd-list{padding-top:28px}
.va .boardBtn ul{gap:8px}
.va .boardBtn a{height:40px!important;padding:0 18px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:15px;color:var(--body)}
.va .boardBtn a:hover{border-color:var(--hint);color:var(--fg)}
.va .boardBtn li.clicked a{border-color:var(--fg);background:var(--fg);color:#fff}
.va .boardBtn .line{display:none}
.va .bd-tb{border-top:2px solid var(--fg)}
.va .bd-tb thead th{height:52px;font-size:14px;color:var(--body);border-bottom:1px solid var(--border)}
.va .bd-tb .br_cat{width:132px;padding-left:12px}
.va .bd-tb .br_date{width:136px;padding-right:12px;text-align:right}
.va .bd-tb tbody tr{border-bottom:1px solid var(--border)}
.va .bd-tb tbody td{height:68px}
.va .bd-tb tbody td.br_title{padding-right:24px}
.va .bd-tb td.br_title a{font-size:17px;font-weight:500}
.va .bd-tb td.br_date{font-size:15px}
.va #press td{height:96px}
.va #press .title_line{font-size:17px;font-weight:600;color:var(--fg)}
.va #press .sub_line{margin-top:4px!important;font-size:14px;color:var(--muted)}
@media(hover:hover) and (pointer:fine){
  .va .bd-tb tbody tr:hover{background:var(--soft)}
  .va .bd-tb tbody tr:hover td.br_title a,.va .bd-tb tbody tr:hover .title_line{color:var(--primary)}
}
.va .paging_number.selected a{background:var(--fg);color:#fff}   /* 10.12 검정 포인트 (고른 쪽 번호) */
/* 상세 */
.va .bv-head{padding-bottom:28px;border-bottom:2px solid var(--fg)}
.va .bv-cat{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;background:var(--weak-bg);color:var(--weak-fg);font-size:13px;font-weight:600}


/* ======================================================================
   이벤트 (event.html) — 크리니티 소식의 한 분류. 카드 3열, 진행 상태 꼬리표
   구조: .wrap > .evline / .eventC > a > .thumb(img·.endCover) + .content(.title>span+h4, 내용, .range) — 기존 스크립트가 만듦
   ====================================================================== */
.bd-ev .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px;min-height:360px}
.bd-ev .evline,.bd-ev .endCover{display:none}
.bd-ev .eventC a{display:flex!important;flex-direction:column;height:100%!important;color:inherit}
.bd-ev .eventC a:not([href]){cursor:default}
.bd-ev .thumb{position:relative;aspect-ratio:2/1;border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.bd-ev .thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .3s,opacity .3s}
.bd-ev .content{display:flex;flex-direction:column;gap:6px;padding:18px 2px 0}
.bd-ev .content .title{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bd-ev .title span{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;background:var(--surface);font-size:12px;font-weight:600;color:var(--body)}
.bd-ev .title span.ing{background:var(--primary);color:#fff}
.bd-ev .is-soon .title span{background:var(--weak-bg);color:var(--weak-fg)}
.bd-ev .title h4{font-size:18px;font-weight:600;line-height:1.45;letter-spacing:-.01em;color:var(--fg);transition:color .2s}
/* 짧은 설명(편집기 HTML): 글자 모양만 맞추고 두 줄까지 */
.bd-ev .content>p:not(.range){font-size:15px!important;line-height:1.6!important;color:var(--muted)!important;font-family:inherit!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.bd-ev .content>p:not(.range) *{font-size:inherit!important;font-family:inherit!important;color:inherit!important;line-height:inherit!important}
.bd-ev .content>p:not(.range):has(>br:only-child){display:none}
.bd-ev .range{margin-top:2px!important;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.bd-ev .thumb img{object-position:center top}                           /* 세로로 긴 이미지는 윗부분이 보이게 */
/* 진행 중인 이벤트는 한 줄 전체를 쓰는 큰 카드로 (PC: 왼쪽 이미지 / 오른쪽 글) */
.bd-ev .eventC.is-ing{grid-column:1/-1}
@media(min-width:1025px){
  .bd-ev .is-ing a{flex-direction:row!important;align-items:center;gap:48px}
  .bd-ev .is-ing .thumb{flex:0 0 40%;max-width:480px;border-radius:14px}
  .bd-ev .is-ing .content{flex:1;min-width:0;padding:0;gap:10px}
  .bd-ev .is-ing .title{gap:14px}
  .bd-ev .is-ing .title h4{font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.02em}
  .bd-ev .is-ing .content>p:not(.range){font-size:16px!important;-webkit-line-clamp:3}
  .bd-ev .is-ing .range{margin-top:6px!important;font-size:14px}
}
/* 끝난 이벤트는 흐리게 */
.bd-ev .is-end .thumb img{filter:grayscale(1);opacity:.5}
.bd-ev .is-end .title h4{color:var(--body)}
@media(hover:hover) and (pointer:fine){
  .bd-ev .eventC a[href]:hover .thumb img{transform:scale(1.03)}
  .bd-ev .eventC a[href]:hover .title h4{color:var(--primary)}
  .bd-ev .is-end a[href]:hover .thumb img{opacity:.7}
}
.rv-on .bd-ev .eventC{animation:bdIn .6s var(--ease) both}
.rv-on .bd-ev .eventC:nth-of-type(2){animation-delay:.05s}.rv-on .bd-ev .eventC:nth-of-type(3){animation-delay:.1s}
.rv-on .bd-ev .eventC:nth-of-type(4){animation-delay:.15s}.rv-on .bd-ev .eventC:nth-of-type(5){animation-delay:.2s}
.rv-on .bd-ev .eventC:nth-of-type(6){animation-delay:.25s}
@media(max-width:1024px){ .bd-ev .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px} }
@media(max-width:700px){
  .bd-ev .wrap{grid-template-columns:1fr;gap:32px;min-height:0}
  .bd-ev .title h4{font-size:17px}
  .bd-ev .content>p:not(.range){font-size:14px!important}
}
@media(prefers-reduced-motion:reduce){ .rv-on .bd-ev .eventC{animation:none} }

/* ===== 반응형 ===== */
@media(max-width:1439px) and (min-width:1025px){
  .bd-list>.w,.bv>.w,.bd-list.w{padding-right:88px}             /* 오른쪽 퀵메뉴가 목록 끝을 가리지 않게 */
}
@media(max-width:1024px){
  .vb .bd-tb tbody tr{grid-template-columns:120px minmax(0,1fr) 20px;column-gap:24px}
}
@media(max-width:700px){
  .w{padding-inline:16px}
  .bh-in{padding-block:56px 32px}
  .bh-lab{font-size:15px;margin-bottom:10px!important}
  .bh-t{font-size:clamp(28px,8vw,34px)}
  .bh-s{margin-top:10px!important;font-size:16px}
  .bd-tabs-in{gap:16px}
  .boardBtn{flex:1;min-width:0}
  .va .bd-tabs{padding-block:12px}
  .va .boardBtn ul{gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}   /* 좁은 화면에서는 옆으로 밀어서 봄 */
  .va .boardBtn ul::-webkit-scrollbar{display:none}
  .va .boardBtn li{flex:none}
  .va .boardBtn a{height:36px!important;padding:0 13px;font-size:14px}
  .va .bd-list{padding-top:16px}
  .vb .bd-tabs{padding-block:10px}
  .vb .boardBtn a{flex:1;justify-content:center;padding:0 10px;height:36px!important;font-size:14px}
  .vb .boardBtn ul,.vb .boardBtn li{flex:1}
  .bd-v .bd-home{display:none!important}
  .bd-list{padding-block:24px 72px}
  .noticeWrap{min-height:420px}
  /* 목록: 표 대신 한 줄에 분류·날짜, 아래에 제목 */
  .bd-tb thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .bd-tb,.bd-tb tbody{display:block}
  .bd-tb tbody tr{display:grid!important;grid-template-columns:auto 1fr!important;grid-template-areas:"cat date" "title title"!important;column-gap:10px!important;row-gap:8px!important;align-items:center;padding:18px 4px!important;height:auto;border-bottom:1px solid var(--border)}
  .bd-tb tbody tr::after{display:none}
  .bd-tb td{display:block;height:auto!important;padding:0!important;width:auto!important}
  .bd-tb td.br_cat{grid-area:cat}
  .bd-tb td.br_date{grid-area:date;text-align:left!important;font-size:13px!important;font-weight:400!important;color:var(--muted)!important;padding:0!important}
  .bd-tb td.br_title{grid-area:title;min-width:0}
  .bd-tb td.br_title a,.bd-tb .title_line{font-size:16px!important;font-weight:600!important;line-height:1.5!important;white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .bd-tb .sub_line{font-size:13px!important}
  .cat{height:22px;padding:0 8px;font-size:12px}
  .vb .cat{height:auto;padding:0;font-size:13px}
  .vb .bd-tb tbody tr:first-child{border-top:0}
  .paging{margin-top:32px;gap:0}
  .paging_num{gap:0}
  .paging a{min-width:28px;height:32px!important;padding:0 2px;font-size:14px}
  /* 상세 */
  .bv{padding-block:32px 72px}
  .bv-meta{font-size:13px}
  .bv-t,.vb .bv-t{margin-top:10px!important;font-size:22px}
  .va .bv-head,.vb .bv-head{padding-bottom:20px}
  .attach-wrapper{margin-top:20px;padding:12px 14px}
  .attach-list{flex-wrap:wrap;gap:4px 10px;font-size:14px}
  .attach-list .text{flex-basis:100%}
  .body_text-content{margin-top:28px;font-size:15px}
  .bv-foot{margin-top:48px}
}

/* 움직임 줄이기 설정이면 등장 효과 없음 */
@media(prefers-reduced-motion:reduce){
  .rv-on .bd-tb tbody tr{animation:none}
  .bfx .bh-lab,.bfx .bh-t,.bfx .bh-s{opacity:1;translate:none;transition:none}
}
/* 인쇄: 버튼은 빼고 글만 */
@media print{
  .bv-foot,.bd-tabs{display:none!important}
  .bv .substance{max-width:none}
}