/* 도입사례 · 주요 고객사 페이지 전용 스타일 — 2026.10.12 리뉴얼 (customer.css?v=20261012a)
   크리니티 소식(board/board.css)의 히어로·버튼 줄·표·페이지 번호를 그대로 쓰고, 이 두 페이지에만 필요한 모양을 더함
   색은 변수로만 씀(다크 모드는 나중에 값만 바꿈) */

/* ===== 버튼 줄: 도입사례 ↔ 주요 고객사 + (주요 고객사 A) 분류 바로가기 ===== */
.cu .bd-tabs-in{justify-content:space-between}
.cu-jump{display:flex;align-items:center;gap:4px}
.cu-jump a{display:inline-flex!important;align-items:center;gap:6px;height:36px!important;padding:0 12px;border-radius:999px;font-size:15px;font-weight:600;color:var(--muted)!important;white-space:nowrap;transition:color .2s,background .2s}
.cu-jump a:hover{color:var(--fg)!important;background:var(--surface)}
.cu-jump a.on{color:var(--primary)!important;background:var(--weak-bg)}
.cu-jump em{font-style:normal;font-size:13px;font-weight:500;color:inherit;opacity:.7;font-variant-numeric:tabular-nums}

/* 목록 위 한 줄: 전체 건수 */
.cu-sum{margin-bottom:16px!important;font-size:15px;color:var(--body)}
.cu-sum b{font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}

/* ===== 로고 상자 (도입사례 공통) — 그림이 없거나 깨지면 건물 그림으로 바꿈 ===== */
.cu-logo{display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.cu-logo img{display:block;max-width:80%;max-height:64%;object-fit:contain}
.cu-logo.no{background:var(--soft);border-color:transparent}
.cu-logo.no img{display:none}
.cu-logo.no::before{content:"";width:22px;height:22px;background:var(--hint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v4h4a1 1 0 0 1 1 1v12h1v1H2v-1h2Zm2 0h3v-4h2v4h2V5H6v16Zm9 0h3V10h-3v11ZM8 7h1.5v1.5H8V7Zm2.5 0H12v1.5h-1.5V7ZM8 10h1.5v1.5H8V10Zm2.5 0H12v1.5h-1.5V10ZM8 13h1.5v1.5H8V13Zm2.5 0H12v1.5h-1.5V13Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v4h4a1 1 0 0 1 1 1v12h1v1H2v-1h2Zm2 0h3v-4h2v4h2V5H6v16Zm9 0h3V10h-3v11ZM8 7h1.5v1.5H8V7Zm2.5 0H12v1.5h-1.5V7ZM8 10h1.5v1.5H8V10Zm2.5 0H12v1.5h-1.5V10ZM8 13h1.5v1.5H8V13Zm2.5 0H12v1.5h-1.5V13Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ======================================================================
   도입사례 시안 A · 표 정돈형 — 크리니티 소식 목록과 같은 표, 첫 칸에 로고
   ====================================================================== */
.cu .bd-tb .br_cat{width:208px;padding-left:12px}
.cu .bd-tb tbody td{height:96px}
.cu .bd-tb .cu-logo{width:168px;height:60px}
.cu #press .title_line{font-size:17px;font-weight:600;color:var(--fg)}
.cu #press .sub_line{margin-top:4px!important;font-size:15px;color:var(--muted)}
@media(hover:hover) and (pointer:fine){
  .cu .bd-tb tbody tr:hover .cu-logo:not(.no){border-color:#cfd6dd;box-shadow:var(--shadow)}
}

/* ======================================================================
   도입사례 시안 B · 로고 카드형 — 위: 로고(흰 바탕) / 아래: 고객사명 + #도입 제품. 날짜는 목록에서 뺌(상세에만)
   ====================================================================== */
.cu-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 16px;min-height:560px;align-content:start}
.cu-card{position:relative}
.cu-card a{display:flex!important;flex-direction:column;height:100%!important;border:1px solid var(--border);border-radius:var(--rc);background:var(--card);overflow:hidden;color:inherit;transition:transform .4s var(--ease),box-shadow .4s,border-color .25s}
.cu-card .cu-logo{aspect-ratio:2.4/1;border:0;border-radius:0;background:var(--card)}
.cu-card .cu-logo img{max-width:70%;max-height:52%}
.cu-card .cu-logo.no{background:var(--card)}
.cu-card .cu-logo.no::before{width:30px;height:30px}
.cu-cb{display:flex;flex-direction:column;gap:4px;flex:1;padding:14px 18px 16px;background:var(--soft);border-top:1px solid var(--border)}
.cu-card .title_line{font-size:16px;font-weight:700;line-height:1.4;color:var(--title);letter-spacing:-.01em;transition:color .2s}
#cp .cu-card .title_line{overflow-wrap:anywhere}                    /* 긴 기관명(예: 농림수산식품교육문화정보원)이 카드 밖으로 나가지 않게 */
.cu-card .sub_line{font-size:14px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* #도입 제품 꼬리표 (제목의 '::제품명::' 을 나눠서 보여 줌) */
.cu-tags{display:flex!important;flex-wrap:wrap;gap:2px 10px;-webkit-line-clamp:unset!important}
.cu-tags span{font-size:14px;font-weight:500;color:var(--body);white-space:nowrap}
@media(hover:hover) and (pointer:fine){
  .cu-card a:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08);border-color:#d6dde4}
  .cu-card a:hover .title_line{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}   /* 고객사명은 검정 그대로 밑줄만 (#꼬리표 파랑과 겹치지 않게) */
}
.rv-on .cu-grid .cu-card{animation:bdIn .55s var(--ease) both}       /* 순서 간격은 js/exp-filter.js 가 처음 한 번만 넣음 */
.cu-grid.no-rv .cu-card{animation:none!important}                    /* 거르기·쪽 넘김 뒤에는 움직임 없음 */
/* #제품 거르기 (시안 B) — 버튼 모양은 .mf-bar 와 같음 */
.ef-bar{margin-bottom:20px!important;align-items:center}
.ef-div{flex:none;width:1px;height:20px;margin:0 6px;background:var(--border)}
/* 기관 구분 버튼: 제품 버튼보다 한 단계 가볍게, 고르면 연파랑 */
.mf-bar .ef-s{border-color:transparent;background:var(--soft);color:var(--body)}
.mf-bar .ef-s:hover{border-color:var(--border)}
.mf-bar .ef-s[aria-pressed=true]{border-color:var(--primary);background:var(--weak-bg);color:var(--weak-fg)}
/* 버튼 줄이 화면보다 길 때: 가려진 쪽 끝을 흐리게 + 오른쪽 › 버튼 (js 가 .more-l / .more-r 를 붙임) */
.ef-wrap{position:relative}
.ef-wrap::before,.ef-wrap::after{content:"";position:absolute;top:0;bottom:0;width:56px;pointer-events:none;opacity:0;transition:opacity .25s;z-index:1}
.ef-wrap::before{left:0;background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,0))}
.ef-wrap::after{right:0;background:linear-gradient(270deg,rgba(255,255,255,.98) 30%,rgba(255,255,255,0))}
.ef-wrap.more-l::before,.ef-wrap.more-r::after{opacity:1}
.ef-more{position:absolute;right:0;top:50%;z-index:2;width:32px;height:32px;margin-top:-16px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--card);box-shadow:0 2px 8px rgba(0,0,0,.08);color:var(--body);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.ef-more::before{content:"";display:block;width:7px;height:7px;margin:0 auto 0 9px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.ef-wrap.more-r .ef-more{opacity:1;visibility:visible}
.ef-empty{padding:80px 0;text-align:center;font-size:16px;color:var(--muted)}
.cu-tags span.on{color:var(--primary);font-weight:600}
.ef-pg{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:48px}
.ef-pg[hidden],.ef-empty[hidden]{display:none}
.ef-pg ul{display:flex;gap:4px}
.ef-pg button{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 6px;border:0;border-radius:var(--r);background:none;font:inherit;font-size:15px;font-weight:500;color:var(--body);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .2s,color .2s}
.ef-pg button:hover:not(:disabled){background:var(--surface);color:var(--fg)}
.ef-pg button.on{background:var(--fg);color:#fff}
.ef-pg .ef-arr::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(-135deg) translate(-1px,-1px)}
.ef-pg .ef-arr.next::before{transform:rotate(45deg) translate(-1px,1px)}
.ef-pg .ef-arr:disabled{opacity:.3;cursor:default}

/* 기관 구분 뱃지 (공공·금융·교육·기업) — 카드는 로고 칸 왼쪽 위, 표는 기관명 앞 */
.cu-logo{position:relative}
.cu-sec{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--surface);font-style:normal;font-size:12px;font-weight:600;color:var(--body);white-space:nowrap;letter-spacing:0}
.cu-card .cu-sec{position:absolute;left:12px;top:12px}
.cu #press .cu-sec{margin-right:8px;vertical-align:2px}
.cu-logo.no .cu-sec{background:var(--card)}

/* 표(A)의 꼬리표 */
.cu #press .cu-tags{display:flex!important;gap:2px 12px;overflow:visible;white-space:normal}
.cu #press .cu-tags span{font-size:15px;color:var(--body)}

/* ======================================================================
   주요 고객사 — 로고 칸 (공통). 평소엔 회색, 마우스를 올리면 원래 색 (회사소개 고객사 띠와 같은 규칙)
   ====================================================================== */
.lg-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.lg{display:flex;align-items:center;justify-content:center;aspect-ratio:2.2/1;border-radius:12px;background:var(--card);border:1px solid var(--border);transition:border-color .3s,box-shadow .3s,opacity .35s,transform .35s var(--ease)}
.lg img{display:block;max-width:84%;max-height:66%;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .35s,opacity .35s}
@media(hover:hover) and (pointer:fine){
  .lg:hover{border-color:#d6dde4;box-shadow:0 6px 18px rgba(0,0,0,.06)}
  .lg:hover img{filter:none;opacity:1}
}
@media(hover:none),(pointer:coarse){ .lg img{filter:none;opacity:1} }   /* 터치 기기는 처음부터 원래 색 */
/* 화면에 들어오면 차례로 */
.rv-on .lg[data-rv]{opacity:0;transform:translateY(12px)}
.rv-on .lg.in{opacity:1;transform:none;transition:border-color .3s,box-shadow .3s,opacity .6s var(--ease),transform .7s var(--ease);transition-delay:0s,0s,var(--rv-d,0ms),var(--rv-d,0ms)}

/* 주요 고객사 시안 A · 분류 구역형 — 공공·금융·교육·기타를 차례로, 위 버튼 줄에서 바로가기 */
.mc-sec{padding-top:56px}
.mc-sec:first-child{padding-top:8px}
.mc-head{display:flex;align-items:baseline;gap:10px;margin-bottom:20px!important}
.mc-head h2{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--title)}
.mc-head span{font-size:16px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}

/* 주요 고객사 시안 B · 한 화면 거르기형 — 분류 버튼으로 걸러 보기, 칸은 연회색 바탕에 테두리 없이 */
.mf-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px!important}
.mf-bar button{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border:1px solid var(--border);border-radius:999px;background:var(--card);font:inherit;font-size:15px;font-weight:600;color:var(--body);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.mf-bar button em{font-style:normal;font-size:13px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.mf-bar button:hover{border-color:var(--hint);color:var(--fg)}
.mf-bar button[aria-pressed=true]{border-color:var(--fg);background:var(--fg);color:#fff}
.mf-bar button[aria-pressed=true] em{color:rgba(255,255,255,.7)}
.mf .lg-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.mf .lg{background:var(--soft);border-color:transparent}
.mf .lg img{mix-blend-mode:multiply}
@media(hover:hover) and (pointer:fine){ .mf .lg:hover{background:var(--card);border-color:var(--border)} }
.mf .lg.hide{display:none}
/* '전체'일 때 분류 제목 (하나를 고르면 제목 숨김) */
.mf-sec[hidden]{display:none}
.mf-list.no-rv .lg{opacity:1!important;transform:none!important;transition:border-color .3s,box-shadow .3s,background .3s!important}   /* 분류 버튼을 누른 뒤에는 등장 움직임 없음 */
.mf-sec+.mf-sec{margin-top:48px}
.mf-h{margin-bottom:16px!important;font-size:20px!important;font-weight:700!important;letter-spacing:-.02em;color:var(--title)}
.mf-list.is-one .mf-h{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ===== 위에 붙는 줄 (10.12): 페이지 이동 버튼 없이 이 페이지의 거르기·바로가기만 ===== */
.cu-row .mf-bar{margin:0!important}
.cu-row .ef-bar{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}     /* 한 줄로, 좁으면 옆으로 밀어서 */
.cu-row .ef-bar::-webkit-scrollbar{display:none}
.cu-row .ef-bar button{flex:none;height:38px;padding:0 14px}
.cu-row .cu-jump{gap:6px}
.cu-row .cu-jump a{height:40px!important;padding:0 18px;border:1px solid var(--border);background:var(--card)}
.cu-row .cu-jump a.on{border-color:var(--fg);background:var(--fg);color:#fff!important}
.bd-list.mf,.cu-row+#content .bd-list{padding-top:32px}
.mc-sec:first-child{padding-top:0}

/* ======================================================================
   도입사례 상세 — 위: 로고·구분·고객사명·#도입 제품(가운데 정렬) / 본문은 글 그대로 (폭 880px)
   ====================================================================== */
/* 히어로는 목록과 같음. 히어로 제목('도입사례')은 누르면 목록으로 */
.cv-list.bh-a,.bh-t .cv-list{color:inherit!important}
.cv.bv{padding-top:8px}
.cv .substance{max-width:none}                                          /* 머리는 히어로 글자와 왼쪽 줄 맞춤 */
.cv .body_text-content{max-width:880px;margin-inline:0}                /* 본문은 읽기 좋은 폭, 왼쪽 줄은 머리와 맞춤 */
/* 머리: 왼쪽 로고 / 오른쪽 고객사명 · [구분 뱃지 #도입 제품] / 작성일은 오른쪽 아래 */
.cv-head{position:relative;display:flex;align-items:center;gap:28px;padding-bottom:36px;border-bottom:1px solid var(--border)}
.cv-logo{flex:none;width:220px;height:96px;border-radius:14px}
.cv-logo img{max-width:78%;max-height:60%}
.cv-logo.no::before{width:30px;height:30px}
.cv-info{flex:1;min-width:0}
.cv .bv-t{margin:0!important;font-size:30px}
.cv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px!important}
.cv-meta .cu-sec[hidden]{display:none}
.cv-tags{display:contents}
.cv-tags a{font-size:16px;font-weight:600;color:var(--weak-fg)!important;transition:color .2s}
.cv-tags a:hover{color:var(--primary)!important;text-decoration:underline}
.cv-date{position:absolute;right:0;bottom:12px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.cv-date[hidden],.cv-date:empty{display:none}
.cv-sub{color:var(--muted)}
.pv-note{margin-bottom:24px!important;padding:12px 16px;border-radius:8px;background:var(--soft);font-size:14px!important;color:var(--muted)!important;text-align:left}
/* 본문: 관리자에서 쓴 글은 그대로 두고, 보이는 모양만 사이트에서 통일
   - 정렬: 가운데 정렬로 쓴 글도 왼쪽 정렬로
   - 줄 간격: 편집기가 넣은 빈 줄(<p><br></p>)은 반 줄 정도로만, 글자 크기·글꼴·줄 높이는 사이트 기준
   - 글자색·굵게·형광펜 같은 강조는 글 그대로 */
.cv .body_text-content{margin-top:36px}
.cv .body_text-content :is(p,div,h1,h2,h3,h4,li,span){text-align:left}
.cv .body_text-content :is(p,div){margin:0!important;line-height:1.75!important}
.cv .body_text-content .cv-blank{height:.6em;overflow:hidden}                  /* 빈 줄은 반 줄만 (js/exp-view.js 가 표시) */
.cv .body_text-content .cv-blank+.cv-blank{display:none}                      /* 빈 줄이 연달아 있으면 하나만 */
.cv .body_text-content :is(p,span,div){font-size:16px!important;color:var(--fg)}

/* ===== 반응형 ===== */
@media(max-width:1439px) and (min-width:1025px){
  .cu-row>.w{padding-right:88px}                                       /* 오른쪽 퀵메뉴에 가리지 않게 */
  .cu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}            /* 퀵메뉴 공간 때문에 4장 */
  .mf .lg-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(max-width:1024px){
  .cu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 16px}
  .lg-grid,.mf .lg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cu .bd-tb .br_cat{width:176px}
  .cu .bd-tb .cu-logo{width:144px;height:52px}
}
@media(max-width:700px){
  .cu .bd-tabs-in{gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .cu .bd-tabs-in::-webkit-scrollbar{display:none}
  .cu .boardBtn{flex:none}
  .cu-jump{flex:none}
  .cu-row .cu-jump{overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .cu-row .cu-jump a{height:36px!important;padding:0 14px}
  .bd-list.mf,.cu-row+#content .bd-list{padding-top:16px}
  .cu-jump a{height:32px!important;padding:0 9px;font-size:14px}
  .cu-jump em{display:none}
  .cu-sum{font-size:14px;margin-bottom:4px!important}
  /* 표 → 왼쪽 로고, 오른쪽 기관명·내용·날짜 */
  .cu .bd-tb tbody tr{grid-template-columns:92px minmax(0,1fr)!important;grid-template-areas:"cat title"!important;column-gap:14px!important;row-gap:4px!important;padding:16px 0!important}
  .cu .bd-tb td.br_cat{width:auto!important;align-self:center}
  .cu .bd-tb .cu-logo{width:92px;height:52px;border-radius:8px}
  .cu #press .title_line{font-size:16px!important;-webkit-line-clamp:1!important}
  .cu #press .sub_line{font-size:13px!important;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .cu .bd-tb td.br_title a{white-space:normal!important}
  /* 카드: 2장씩 */
  .cu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px;min-height:0}
  .cu-card a{border-radius:12px}
  .cu-cb{padding:10px 12px 12px;gap:2px}
  .cu-card .title_line{font-size:15px}
  .cu-card .sub_line,.cu-tags span{font-size:12.5px}
  .cu-tags{gap:0 8px}
  .cu #press .cu-tags span{font-size:13px}
  .cu-card .cu-sec{left:8px;top:8px;height:20px;padding:0 6px;font-size:11px}
  /* 로고 칸: 3칸씩 */
  .lg-grid,.mf .lg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .lg{border-radius:10px}
  .mc-sec{padding-top:40px}
  .mc-head h2{font-size:22px}
  .mc-head span{font-size:14px}
  .mf-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;gap:6px;margin-bottom:16px!important}
  .mf-bar::-webkit-scrollbar{display:none}
  .cu-row .mf-bar{margin:0 -16px!important}                       /* 위에 붙는 줄 안에서도 화면 끝까지 밀리게 (첫 버튼은 본문과 같은 16px) */
  .mf-bar button{flex:none;height:36px;padding:0 13px;font-size:14px}
  .mf-sec+.mf-sec{margin-top:32px}
  .mf-h{margin-bottom:12px!important;font-size:17px!important}
  .ef-pg{margin-top:32px;gap:0}
  .cv.bv{padding-top:0}
  .cv-head{gap:14px;padding-bottom:20px}
  .cv-logo{width:104px;height:56px;border-radius:10px}
  .cv-logo.no::before{width:22px;height:22px}
  .cv-meta .cu-sec{height:20px;padding:0 6px;font-size:11px}
  .cv .bv-t{font-size:19px;line-height:1.35}
  .cv-head{flex-wrap:wrap;padding-bottom:16px}
  .cv-meta{margin-top:6px!important;gap:4px 8px}
  .cv-tags a{font-size:13px}
  .cv-date{position:static;flex-basis:100%;font-size:12px;text-align:right;margin-top:-4px!important}
  .cv .body_text-content{margin-top:32px}
  .cv .body_text-content :is(p,span){font-size:15px!important}
  .ef-pg ul{gap:0}
  .ef-pg button{min-width:30px;height:32px;padding:0 2px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .rv-on .cu-grid .cu-card{animation:none}
  .rv-on .lg[data-rv]{opacity:1;transform:none}
}