@charset "utf-8";
/* =========================================================
   대양씨아이에스 — 서브 페이지 공통 스타일 (sub.css)
   · 서브 페이지 상단(타이틀 + 2뎁스 메뉴) / 본문 레이아웃 /
     분류 필터 + 검색 / 게시판 목록 · 상세 / 페이징
   ========================================================= */

/* 서브 페이지 본문 : 그라데이션 없이 흰색 배경 */
main{position:relative;background:#fff}


/* ---------- 페이지 상단 (타이틀 + 2뎁스 메뉴바) ---------- */
.sub-top{
  padding-top:calc(var(--hd) + var(--hd-util));
  background:linear-gradient(180deg,#EEF3FC 0%,#F6F9FE 100%);
  border-bottom:1px solid var(--line);
}
/* 위아래만 지정 : .wrap 의 좌우 여백을 지우지 않도록 (모바일에서 긴 설명이 화면 끝에 붙던 문제) */
.sub-head{padding-top:clamp(38px,4.6vw,60px);padding-bottom:clamp(26px,3vw,34px);text-align:center}
.sub-head .eyebrow{justify-content:center}
.sub-head h1{
  margin-top:12px;font-size:clamp(28px,3.4vw,42px);font-weight:800;
  letter-spacing:-.04em;line-height:1.28;color:var(--navy);
}
.sub-head p{margin-top:12px;font-size:clamp(14.5px,1.3vw,17px);color:var(--ink-70)}

/* 2뎁스 메뉴바 : 화면 너비를 넘으면 가로 스크롤 */
.dep2{position:relative}
.dep2-in{
  display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line);
}
.dep2-in::-webkit-scrollbar{display:none}
.dep2-in a{
  position:relative;flex:1 0 auto;min-width:132px;height:60px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:15.5px;font-weight:600;color:var(--ink-70);white-space:nowrap;
  border-right:1px solid var(--line);transition:.2s var(--ease);
}
.dep2-in a:first-child{border-left:1px solid var(--line)}
.dep2-in a:hover{background:rgba(255,255,255,.7);color:var(--blue)}
.dep2-in a.on{background:var(--navy);color:#fff;font-weight:700;border-color:var(--navy)}
.dep2-in a .ext{width:11px;height:11px;opacity:.6}
.dep2-fade{
  position:absolute;top:0;right:0;width:44px;height:100%;pointer-events:none;
  background:linear-gradient(90deg,rgba(246,249,254,0),rgba(246,249,254,.95));
  opacity:0;transition:opacity .25s;
}
.dep2.is-scrollable .dep2-fade{opacity:1}

/* 3뎁스 메뉴바 : 선택된 2뎁스 바로 아래에 노출 (화면설계서 2.1)
   묶음은 모두 넣어두고, 선택된 2뎁스에 해당하는 것만 common.js 가 펼칩니다. */
.dep3{background:#fff;border-top:1px solid var(--line)}
.dep3-grp[hidden]{display:none}
.dep3-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;
  padding:14px 0 15px;
}
.dep3-in a{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 16px;border-radius:999px;
  font-size:14.5px;font-weight:600;color:var(--ink-50);white-space:nowrap;
  transition:.2s var(--ease);
}
.dep3-in a:hover{background:var(--mist-2);color:var(--blue)}
.dep3-in a.on{background:var(--mist-2);color:var(--navy);font-weight:700}
.dep3-in a .ext{width:11px;height:11px;opacity:.6}

/* ---------- 본문 영역 ----------
   위쪽 여백 26px 은 메뉴 탭과 경로(브레드크럼) 사이 간격입니다.
   회사소개 쪽 페이지(.cp-crumb, company.css)와 같은 값으로 맞춰
   어느 페이지에서나 탭 ↔ 경로 간격이 같아 보이게 했습니다. (2026-10 3차 수정 4번) */
.sub-body{padding:26px 0 clamp(72px,8vw,110px)}

/* 경로 */
.crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;color:var(--ink-50);margin-bottom:22px;
}
.crumb a:hover{color:var(--blue)}
.crumb svg{width:12px;height:12px;opacity:.5}
.crumb b{color:var(--ink-70);font-weight:600}

/* ---------- 게시판 상단 안내 박스 (공통 컴포넌트) ----------
   365케어서비스 상단 인트로(.care-intro)와 동일한 디자인입니다.
   게시판 목록 위에 놓는 안내 박스로, 채용공고 외에
   자료실·사내소식 등에서도 그대로 재사용할 수 있습니다.  */
.bd-intro{
  position:relative;overflow:hidden;border-radius:18px;
  background:linear-gradient(120deg,#0F30C9 0%,#2A1BC6 52%,#9D00DD 100%);
  color:#fff;padding:clamp(34px,4.4vw,54px) clamp(26px,3.6vw,52px);
  margin-bottom:clamp(28px,3.2vw,38px);
}
.bd-intro::before{
  content:'';position:absolute;width:420px;height:420px;right:-120px;top:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 66%);
}
.bd-intro::after{
  content:'';position:absolute;width:340px;height:340px;left:-140px;bottom:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 68%);
}
.bd-intro>*{position:relative;z-index:1}
.bd-intro .lb{
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  /* 국문이 섞인 라벨이라 365케어(.14em)보다 자간을 좁게 잡았습니다 */
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;
}
.bd-intro h2{
  margin-top:16px;font-size:clamp(22px,2.6vw,32px);font-weight:800;
  letter-spacing:-.04em;line-height:1.42;
}
.bd-intro h2 em{
  font-style:normal;
  background:linear-gradient(90deg,#fff,#D9E3FF);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.bd-intro p{
  margin-top:14px;font-size:clamp(14.5px,1.35vw,16.5px);line-height:1.75;
  color:rgba(255,255,255,.86);max-width:760px;
}

/* ---------- 분류 필터 + 검색 ---------- */
.list-top{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.cate{display:flex;gap:6px;flex-wrap:wrap}
.cate a{
  display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;
  font-size:14.5px;font-weight:600;color:var(--ink-70);border:1px solid var(--line);background:#fff;
  transition:.2s var(--ease);
}
.cate a:hover{border-color:#C3CFF0;color:var(--blue)}
.cate a.on{background:var(--navy);border-color:var(--navy);color:#fff}

.bd-search{display:flex;gap:8px;flex:none}
.bd-search select,.bd-search input{
  height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:14.5px;color:var(--ink);padding:0 14px;transition:border-color .2s,box-shadow .2s;
}
.bd-search select{
  width:112px;appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8399' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;
}
.bd-search input{width:240px}
.bd-search input::placeholder{color:var(--ink-30,#AEB6C8)}
.bd-search select:focus,.bd-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,48,201,.10)}
.bd-search button{
  width:44px;height:42px;border-radius:10px;background:var(--navy);color:#fff;
  display:grid;place-items:center;transition:.2s var(--ease);flex:none;
}
.bd-search button:hover{background:linear-gradient(90deg,var(--blue),var(--violet))}
.bd-search button svg{width:18px;height:18px}

.list-count{font-size:13.5px;color:var(--ink-50);margin-bottom:14px}
.list-count b{color:var(--blue);font-weight:700}

/* ---------- 게시판 목록 ---------- */
.bd-table{width:100%;border-collapse:collapse;border-top:2px solid var(--navy)}
.bd-table th,.bd-table td{
  padding:18px 12px;border-bottom:1px solid var(--line);
  font-size:15px;text-align:center;vertical-align:middle;
}
.bd-table thead th{
  padding:15px 12px;font-size:14px;font-weight:700;color:var(--ink-70);
  background:var(--mist);border-bottom:1px solid var(--line);
}
.bd-table tbody tr{transition:background .18s}
.bd-table tbody tr:hover{background:var(--mist)}
.bd-table .no{font-family:var(--mono);font-size:13.5px;color:var(--ink-50);width:80px}
.bd-table .cate-col{width:130px}
.bd-table .subj{text-align:left}
.bd-table .subj a{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;letter-spacing:-.03em;
}
.bd-table .subj a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.bd-table .date{width:130px;font-family:var(--mono);font-size:13.5px;color:var(--ink-50)}
.bd-table .hit{width:90px;font-family:var(--mono);font-size:13.5px;color:var(--ink-50)}
.tag-c{
  display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:6px;
  font-size:12.5px;font-weight:600;color:var(--blue);background:var(--mist-2);
}
.badge-new{
  display:inline-grid;place-items:center;width:17px;height:17px;border-radius:5px;flex:none;
  background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;
  font-size:10px;font-weight:700;font-family:var(--mono);
}
.ico-file{width:16px;height:16px;color:var(--ink-50);flex:none}
.bd-empty{padding:70px 20px;text-align:center;color:var(--ink-50);font-size:15px}

/* ---------- 페이징 ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:38px}
.pager a,.pager span{
  min-width:40px;height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;color:var(--ink-70);background:#fff;transition:.18s var(--ease);
}
.pager a:hover{border-color:#C3CFF0;background:var(--mist);color:var(--blue)}
.pager .on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.pager svg{width:14px;height:14px}

/* ---------- 게시판 상세 ---------- */
.bd-view{border-top:2px solid var(--navy)}
.bd-view-head{padding:28px 24px;border-bottom:1px solid var(--line);background:var(--mist)}
.bd-view-head .tag-c{margin-bottom:12px}
.bd-view-head h2{font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.035em;line-height:1.4}
.bd-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:13.5px;color:var(--ink-50)}
.bd-meta span{display:inline-flex;align-items:center;gap:6px}
.bd-meta svg{width:14px;height:14px;opacity:.7}
.bd-meta em{font-style:normal;font-family:var(--mono)}

/* 첨부파일 : 자료실 상세에만 노출 */
.bd-files{padding:18px 24px;border-bottom:1px solid var(--line);background:#fff}
.bd-files .lb{
  display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--ink-50);margin-bottom:12px;
}
.bd-files ul{display:flex;flex-direction:column;gap:8px}
.bd-files li a{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);
  border-radius:10px;background:#fff;transition:.2s var(--ease);
}
.bd-files li a:hover{border-color:var(--blue);background:var(--mist)}
.bd-files .fi{
  width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--mist-2);color:var(--blue);
}
.bd-files .fi svg{width:17px;height:17px}
.bd-files .fn{flex:1;min-width:0;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-files .fs{font-family:var(--mono);font-size:12.5px;color:var(--ink-50);flex:none}
.bd-files .dl{width:20px;height:20px;color:var(--ink-50);flex:none;transition:color .2s}
.bd-files li a:hover .dl{color:var(--blue)}

/* 이관한 옛 글의 이미지 : 인라인 style="width:640px; height:480px" 때문에
   좁은 화면에서 가로만 줄고 세로는 그대로라 늘어져 보이던 문제를 막습니다.
   (가로 비율은 그대로 두고 세로만 자동 계산) */
.bd-content img,
.ex-content img,
.faq-a .tx img{max-width:100% !important;height:auto !important}

/* 본문에 넣은 유튜브 영상 : 화면 폭에 맞춰 16:9 로 */
.bd-content iframe,
.ex-content iframe,
.faq-a .tx iframe{
  display:block;width:100%;max-width:100%;aspect-ratio:16/9;height:auto;
  margin:18px 0;border:0;border-radius:12px;background:#0B1020;
}

.bd-content{padding:38px 24px 46px;font-size:16px;line-height:1.85;color:var(--ink-70);border-bottom:1px solid var(--line)}
.bd-content p+p{margin-top:18px}
.bd-content h3{margin:32px 0 12px;font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.bd-content ul{margin:12px 0 0;padding-left:2px}
.bd-content ul li{position:relative;padding-left:16px;margin-top:8px}
.bd-content ul li::before{content:'';position:absolute;left:2px;top:11px;width:4px;height:4px;border-radius:50%;background:var(--blue)}
.bd-content img{margin:24px 0;border-radius:12px;border:1px solid var(--line)}
.bd-content strong{color:var(--ink);font-weight:700}
.bd-content .note{
  margin-top:26px;padding:18px 20px;border-radius:12px;background:var(--mist);
  border-left:3px solid var(--blue);font-size:14.5px;color:var(--ink-70);
}

/* 하단 액션 버튼 */
.bd-act{display:flex;justify-content:center;gap:10px;margin-top:38px}
.btn-g{
  display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 26px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-size:15px;font-weight:600;color:var(--ink-70);
  transition:.22s var(--ease);
}
.btn-g:hover{border-color:var(--ink-50);color:var(--ink);background:var(--mist)}
.btn-g svg{width:15px;height:15px}
.btn-g.solid{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-g.solid:hover{background:linear-gradient(90deg,var(--blue),var(--violet));border-color:transparent;color:#fff}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .sub-top{padding-top:var(--hd-m)}
  .dep2-in a{min-width:auto;padding:0 20px;height:54px;font-size:14.5px;flex:0 0 auto}
  .dep3-in{padding:11px 16px 12px;gap:5px 3px}
  .dep3-in a{height:32px;padding:0 13px;font-size:13.5px}
  .bd-intro{border-radius:14px}
  .bd-intro::before{width:260px;height:260px;right:-90px;top:-140px}
  .bd-intro::after{display:none}
  .bd-intro h2{line-height:1.5}
  .list-top{gap:14px}
  .bd-search{width:100%}
  .bd-search input{flex:1;width:auto}
  /* 좁은 화면에서는 표 대신 카드형 리스트로 전환 */
  .bd-table thead,.bd-table colgroup{display:none}
  .bd-table,.bd-table tbody,.bd-table tr,.bd-table td{display:block;width:auto}
  .bd-table tr{padding:16px 4px;border-bottom:1px solid var(--line)}
  .bd-table td{padding:0;border:0;text-align:left}
  .bd-table .no{display:none}
  .bd-table .subj{margin:8px 0 10px}
  .bd-table .subj a{font-size:15.5px;line-height:1.5;align-items:flex-start}
  .bd-table .date,.bd-table .hit{display:inline-block;margin-right:14px;font-size:12.5px}
  .bd-table .date::before{content:'작성일 ';color:var(--ink-30,#AEB6C8)}
  .bd-table .hit::before{content:'조회 ';color:var(--ink-30,#AEB6C8)}
  .bd-search{flex-wrap:nowrap}
  .bd-search input{min-width:0}
  .bd-view-head,.bd-files,.bd-content{padding-left:18px;padding-right:18px}
  .bd-act{flex-direction:column}
  .btn-g{width:100%;justify-content:center}
}
@media (max-width:560px){
  .bd-table .no{display:none}
  .cate a{height:34px;padding:0 14px;font-size:13.5px}
  .bd-search select{width:96px}
  .pager a,.pager span{min-width:36px;height:36px}
}