/* ==========================================================================
   하위 페이지 공통 골격
   서브배너 → breadcrumb → 공유 유틸 → 섹션 → (게시판 목록/상세, 사이드 위젯)
   ========================================================================== */

.sub { display: block; min-height: 900px; }

/* 하위 페이지는 헤더가 배너 위에 겹치므로 배너 자체가 헤더 높이를 흡수한다 */
.sub .sec { display: block; }

/* --------------------------------------------------------------- 서브배너 -- */
.sub-banner { width: 100%; }
.sub-banner .container { display: flex; align-items: center; height: 480px; }
.sub-banner .img-box img { height: 110px; }
.sub-banner h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--white); }

/* ------------------------------------------------------------- breadcrumb -- */
.breadcrumb { background: var(--white); border-bottom: 1px solid #DBDBDB; }
.breadcrumb .container { display: flex; }

.breadcrumb > .container > a {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 18px;
  border-left: 1px solid #DBDBDB;
  border-right: 1px solid #DBDBDB;
}

.crumb { position: relative; border-right: 1px solid #DBDBDB; }

.crumb > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  height: 60px;
  padding: 0 34px;
  font-size: var(--fs-base);
  cursor: pointer;
}

.crumb > p img { transition: all var(--dur); }
.crumb.is-open > p img { transform: rotate(180deg); }

.crumb .dropdown {
  position: absolute;
  left: 0;
  top: 60px;
  z-index: 100;
  display: none;
  width: 100%;
  padding: 10px 0;
  background: var(--white);
  border: 1px solid #000;
  box-shadow: var(--shadow-header);
}

.crumb .dropdown a {
  display: block;
  padding: 13px 30px;
  font-size: var(--fs-base);
  transition: all var(--dur);
}

.crumb .dropdown a:hover { background: #f8f8f8; }

/* ------------------------------------------------- 공유·인쇄 유틸 버튼 줄 -- */
.sub-util { padding: 60px 0; }
.sub-util .container { display: flex; justify-content: flex-end; }
.sub-util ul { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.sub-util li { position: relative; }
.sub-util li a, .sub-util li button { position: relative; }

.sub-util li > span {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  padding: 3.5px 12px;
  border-radius: 100px;
  background: var(--brand);
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
}

.sub-util li:hover > span { top: -24px; opacity: 1; visibility: visible; }

.share-sub {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 5;
  display: none;
  width: 100%;
}

.share-btns li:hover .share-sub { display: block; }

.share-sub ul {
  display: block;
  padding: 20px 0;
  border-radius: 50px;
  background: var(--white);
  box-shadow: 0 4px 30px rgba(0, 0, 0, .15);
}

.share-sub li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  transition: all var(--dur-s);
}

.share-sub li a:hover { background: rgba(201, 218, 232, .5); }

/* ------------------------------------------------------------ 검색 입력줄 --
 * ★ 반드시 .sub 로 범위를 준다. 범위 없이 .search-box 로 쓰면 헤더 우측
 *   돋보기(#header .search-box)까지 걸려 margin-bottom:60px 이 붙는다.
 *   .util 은 align-items:center 이고 중앙 정렬은 마진 박스 기준이라
 *   아이콘이 정확히 30px 위로 밀린다(홈은 이 CSS 를 안 불러 멀쩡, 하위페이지만 어긋남).
 *   원본 클론 단계부터 있던 문제다. */
.sub .search-box { display: flex; gap: 10px; margin-bottom: 60px; }

.sub .search-box input {
  width: 100%;
  height: 60px;
  padding: 0 24px;
  border: 1px solid var(--line-input);
  border-radius: 4px;
  font-size: var(--fs-md);
  font-weight: 600;
}

.sub .search-box input::placeholder { color: var(--ink-600); }

.sub .search-box select {
  min-width: 250px;
  height: 60px;
  padding: 0 24px;
  border: 1px solid var(--line-input);
  border-radius: 4px;
  background: url(../img/acc_down.svg) no-repeat right 24px center / 16px;
  font-size: var(--fs-md);
}

.sub .search-box button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  width: 60px;
  height: 60px;
  border-radius: 3.6px;
  background: var(--brand);
}

/* ------------------------------------------------------------ 페이지네이션 -- */
.pagination { margin-top: 65px; }
.pagination ul { display: flex; justify-content: center; gap: 10px; }
.pagination > ul > li { display: flex; align-items: center; }
.pagination ul .prev { margin-right: 26px; }
.pagination ul ol { display: flex; align-items: center; gap: 20px; margin-right: 26px; }
.pagination ul ol li a { font-size: var(--fs-base); font-weight: 300; }

.pagination ul ol li.active a {
  position: relative;
  font-size: var(--fs-base);
  font-weight: 700;
}

.pagination ul ol li.active a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #131313;
}

/* ---------------------------------------------------------- 게시판 상세 -- */
.board-detail .container { max-width: 1400px; }

.board-detail .tag-box {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin-bottom: 24px;
  padding-right: 20px;
  border-radius: 70px;
  background: #F7F8FC;
}

.board-detail .tag-box .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 100%;
  background: var(--white);
  box-shadow: 0 3.091px 7.727px 0 rgba(0, 118, 191, .1);
}

.board-detail .tag-box p { font-size: var(--fs-base); font-weight: 600; color: var(--brand); }
.board-detail .tag-box .arrow { display: flex; align-items: center; }
.board-detail .tag-box .arrow img { height: 20px; }

.board-detail .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 60px;
}

.board-detail .title .subject { display: flex; align-items: center; gap: 10px; }

.board-detail .title .subject .notice {
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--brand);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.board-detail .title .subject h3 { font-size: var(--fs-h5); font-weight: 600; line-height: 1.5; }
.board-detail .title .date span { font-size: var(--fs-2xs); color: var(--ink-350); }

/* 상세 페이지에서는 모바일 전용 블록을 확실히 감춘다(원본도 같은 규칙을 덧붙인다) */
.board-detail .mo { display: none; }

.board-detail .content { margin-bottom: 170px; word-break: break-all; }
.board-detail .content * { word-break: break-all; }
.board-detail .content img { max-width: 100%; height: auto; }
.board-detail .content p { margin-bottom: 1em; line-height: 1.7; }
.board-detail .content h1, .board-detail .content h2, .board-detail .content h3,
.board-detail .content h4, .board-detail .content h5, .board-detail .content h6 {
  margin: 1.2em 0 .6em;
  font-size: 1.5em;
  font-weight: bold;
}
.board-detail .content ul, .board-detail .content ol { margin: 1em 0 1em 2em; }
.board-detail .content ul { list-style-type: disc; }
.board-detail .content ol { list-style-type: decimal; }
.board-detail .content li { margin-bottom: .4em; line-height: 1.6; list-style: unset; }
.board-detail .content blockquote {
  margin: 20px 0;
  padding: 10px 20px;
  border-left: 5px solid #ccc;
  background: #f9f9f9;
  color: #555;
}

/* 상세 본문 아래 부가 블록(관련 변호사·관련 분야·첨부 등) */
.board-detail .item-box { margin-bottom: 80px; }

.board-detail .item-box > h3 {
  margin-bottom: 24px;
  padding: 10px;
  border-bottom: 1px solid #DBDBDB;
  font-size: 32px;
  font-weight: 700;
}

.board-detail .item-1 article { font-size: var(--fs-md); line-height: 1.5; color: #434343; }

.board-detail .item-2 > p {
  position: relative;
  margin-bottom: 15px;
  padding-left: 15px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--brand);
}

.board-detail .item-2 > p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: var(--brand);
  transform: translateY(-50%);
}

.board-detail .item-2 ul {
  display: flex;
  flex-wrap: wrap;
  row-gap: 34px;
  column-gap: 24px;
  margin-bottom: 50px;
}

.board-detail .item-2 ul:last-child { margin-bottom: 0; }
.board-detail .item-2 ul li { width: calc(25% - 18px); }
.board-detail .item-2 ul li .img-box { margin-bottom: 20px; }
.board-detail .item-2 ul li .img-box img { width: 100%; }

.board-detail .item-2 ul li .text-box > span {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-md);
  color: #778392;
}

.board-detail .item-2 ul li .text-box > p { font-size: var(--fs-lg); font-weight: 700; color: #3C3C3C; }

.board-detail .item-3 ul { display: flex; align-items: center; gap: 24px; }
.board-detail .item-3 ul li { font-size: var(--fs-lg); color: var(--brand); list-style: inside; }

.board-detail .item-4 ul { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.board-detail .item-4 ul li { width: calc(25% - 18px); }
.board-detail .item-4 ul li .img-box { margin-bottom: 20px; }
.board-detail .item-4 ul li .img-box img { width: 100%; }
.board-detail .item-4 ul li p { margin-bottom: 14px; font-size: var(--fs-lg); font-weight: 700; }
.board-detail .item-4 ul li article { font-size: var(--fs-base); font-weight: 500; line-height: 1.5; color: #707070; }

.board-detail .item-5 ul li { margin-bottom: 14px; }
.board-detail .item-5 ul li:last-child { margin-bottom: 0; }
.board-detail .item-5 ul li a { display: flex; align-items: center; gap: 10px; }

.board-detail .item-5 ul li a p {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-detail .item-6 ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-radius: 5px;
  background: var(--tint);
}

.board-detail .item-6 ul li a p { font-size: var(--fs-md); font-weight: 600; color: var(--brand); }

.board-detail .btn-box { display: flex; justify-content: flex-end; margin: 100px 0 0; }

.board-detail .btn-box a {
  display: flex;
  justify-content: center;
  width: 140px;
  padding: 12px 0;
  border: 1.5px solid #DBDBDB;
  font-size: var(--fs-base);
  font-weight: 700;
  color: #686868;
}

.post-nav { margin-top: 34px; border-top: 1.5px solid #DBDBDB; }

.post-nav .item {
  display: flex;
  align-items: center;
  padding: 24px 34px;
  border-bottom: 1.5px solid #DBDBDB;
}

.post-nav .item img { margin-right: 24px; }

.post-nav .item span {
  margin-right: 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-500);
  white-space: nowrap;
}

.post-nav .item a {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  color: #343434;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------- 사이드 위젯: 안내 박스 + 상담 폼 -- */
.p-division-detail .sec-1 .right .item-1,
.p-team-detail .sec-1 .right .item-1 {
  margin-bottom: 24px;
  padding: 24px 20px;
  border-radius: 15px;
  box-shadow: var(--shadow-panel);
}

.p-division-detail .sec-1 .right .item-1 h3,
.p-team-detail .sec-1 .right .item-1 h3 {
  margin-bottom: 24px;
  padding: 10px;
  border-bottom: 1px solid #DBDBDB;
  font-size: var(--fs-md);
  font-weight: 700;
}

.p-division-detail .sec-1 .right .item-1 ul li,
.p-team-detail .sec-1 .right .item-1 ul li {
  margin-left: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: #434343;
  list-style: initial;
}

.p-division-detail .sec-1 .right .acc .acc__head,
.p-team-detail .sec-1 .right .acc .acc__head,
.p-member-detail .item-2 .left .acc .acc__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 20px 24px;
  border: 1px solid rgba(8, 71, 132, .2);
  border-radius: 15px;
  background: #F4F9FE;
  cursor: pointer;
}

.p-division-detail .sec-1 .right .acc .acc__head p,
.p-team-detail .sec-1 .right .acc .acc__head p,
.p-member-detail .item-2 .left .acc .acc__head p{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--brand);
}

.p-division-detail .sec-1 .right .acc .acc__row.is-open .acc__head > img,
.p-team-detail .sec-1 .right .acc .acc__row.is-open .acc__head > img,
.p-member-detail .item-2 .left .acc .acc__row.is-open .acc__head > img{ transform: rotate(180deg); }

.p-division-detail .sec-1 .right .acc .acc__body,
.p-team-detail .sec-1 .right .acc .acc__body,
.p-member-detail .item-2 .left .acc .acc__body{
  display: none;
  padding: 24px;
  border: 1px solid #DBDBDB;
  border-radius: 15px;
  box-shadow: var(--shadow-panel);
}

.p-division-detail .sec-1 .right .acc .field,
.p-team-detail .sec-1 .right .acc .field,
.p-member-detail .item-2 .left .acc .field{ margin-bottom: 20px; }
.p-division-detail .sec-1 .right .acc .field label,
.p-team-detail .sec-1 .right .acc .field label,
.p-member-detail .item-2 .left .acc .field label{ display: block; margin-bottom: 8px; font-size: var(--fs-base); font-weight: 500; }

.p-division-detail .sec-1 .right .acc .field input,
.p-team-detail .sec-1 .right .acc .field input,
.p-member-detail .item-2 .left .acc .field input{
  width: 100%;
  padding: 16px 14px;
  border: 1px solid var(--line-input);
  border-radius: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
}

.p-division-detail .sec-1 .right .acc .file,
.p-team-detail .sec-1 .right .acc .file,
.p-member-detail .item-2 .left .acc .file{ display: flex; gap: 20px; margin-bottom: 24px; }
.p-division-detail .sec-1 .right .acc .file label,
.p-team-detail .sec-1 .right .acc .file label,
.p-member-detail .item-2 .left .acc .file label{ display: block; font-size: var(--fs-base); font-weight: 500; }

.p-division-detail .sec-1 .right .acc .file button,
.p-team-detail .sec-1 .right .acc .file button,
.p-member-detail .item-2 .left .acc .file button{
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--line-input);
  border-radius: 5px;
}

.p-division-detail .sec-1 .right .acc .file button p,
.p-team-detail .sec-1 .right .acc .file button p,
.p-member-detail .item-2 .left .acc .file button p{ font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; color: var(--ink-600); }
.p-division-detail .sec-1 .right .acc .agree,
.p-team-detail .sec-1 .right .acc .agree,
.p-member-detail .item-2 .left .acc .agree{ display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.p-division-detail .sec-1 .right .acc .agree label,
.p-team-detail .sec-1 .right .acc .agree label,
.p-member-detail .item-2 .left .acc .agree label{ cursor: pointer; }

.p-division-detail .sec-1 .right .acc .submit,
.p-team-detail .sec-1 .right .acc .submit,
.p-member-detail .item-2 .left .acc .submit{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--brand);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* -------------------------------------------------------------- 반응형 -- */
@media (max-width: 1500px) {
  .board-detail .title .subject h3 { font-size: 28px; }
}

@media (max-width: 1280px) {
  .breadcrumb .container { padding: 0; }
}

@media (max-width: 1024px) {
  .board-detail .item-2 ul li { width: calc(50% - 12px); }
  .board-detail .item-4 ul li { width: 100%; }
  .board-detail .item-4 ul li article br { display: none; }

  .sub-banner h3 { font-size: var(--fs-h5); }
  .breadcrumb .container { padding: 0; }
  .crumb { width: 100%; }
  .crumb > p { width: 100%; }
  .sub-util { padding: 40px 0; }
}

@media (max-width: 768px) {
  .sub-banner .container { height: 240px; }
  .sub-banner h3 { font-size: var(--fs-lg); }
  .sub-banner .img-box img { width: 90%; max-width: 260px; height: auto; }

  .breadcrumb { border-bottom: 0; }
  .breadcrumb .container { flex-direction: column; }
  .breadcrumb > .container > a { display: none; padding: 10px; }
  .breadcrumb > .container > a img { height: 20px; }
  .crumb { border-right: 0; border-bottom: 1px solid #DBDBDB; }
  .crumb > p { height: 40px; padding: 0 24px; font-size: 13px; }
  .crumb > p img { height: 20px; }
  .crumb .dropdown { top: 40px; }
  .crumb .dropdown a { font-size: 13px; }

  .sub-util ul li button img { height: 30px; }
  .sub-util li > span { font-size: 12px; }

  /* 게시판 상세 모바일 */
  .board-detail .content { margin-bottom: 60px; }
  .board-detail .tag-box { gap: 8px; }
  .board-detail .tag-box p { font-size: 12px; }
  .board-detail .title { margin-bottom: 30px; }
  .board-detail .title .util { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
  .board-detail .title .util .date { font-size: 13px; font-weight: 700; color: var(--ink-350); }
  .board-detail .title .util .notice {
    padding: 4px 6px;
    border-radius: 5px;
    background: var(--brand);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
  }
  .board-detail .title .subject h3 { font-size: var(--fs-lg); font-weight: 600; }
  .board-detail .item-box > h3 { margin-bottom: 24px; padding: 0 0 10px; font-size: var(--fs-base); }
  .board-detail .item-box { margin-bottom: 60px; }
  .board-detail .item-1 article { font-size: 13px; }
  .board-detail .item-1 article br { display: none; }
  .board-detail .item-2 > p { margin-bottom: 40px; font-size: var(--fs-xs); }
  .board-detail .item-2 ul li .text-box > span { margin-bottom: 2px; font-size: 12px; }
  .board-detail .item-2 ul li .text-box > p { margin-bottom: 8px; font-size: var(--fs-2xs); }
  .board-detail .item-2 ul li .text-box b { flex-direction: column; align-items: flex-start; gap: 5px; }
  .board-detail .item-2 ul li .text-box b i,
  .board-detail .item-2 ul li .text-box b span { font-size: 12px; }
  .board-detail .item-3 ul li { font-size: var(--fs-xs); }
  .board-detail .item-4 ul li p { font-size: var(--fs-xs); }
  .board-detail .item-4 ul li article { font-size: 13px; }
  .board-detail .item-5 ul li a p { font-size: 13px; }
  .board-detail .item-6 ul li a { padding: 20px; }
  .board-detail .item-6 ul li a p { font-size: var(--fs-2xs); }
  .board-detail .item-6 ul li a img { height: 20px; }
  .board-detail .btn-box a { width: 100px; height: 35px; padding: 0; font-size: 13px; line-height: 35px; }
  .post-nav .item { padding: 20px; }
  .post-nav .item img { height: 20px; margin-right: 14px; }
  .post-nav .item span,
  .post-nav .item a { font-size: var(--fs-2xs); }

  .pagination { margin-top: 30px; }
  .pagination ul { gap: 0; }
  .pagination ul ol { gap: 12px; margin-right: 0; }
  .pagination ul ol li a,
  .pagination ul ol li.active a { font-size: 13px; }
  .pagination ul .prev { margin-right: 0; }
}