@import url("https://fonts.googleapis.com/css?family=Taviraj:300,400,700,300i,400i,700i");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

img {
    height: auto;
    max-width: 100%;
    border-radius: 0.365em;
}

.clear {
    clear: both;
}

/* 드래그(텍스트 선택) 시 배경색과 텍스트 색상 변경 */
::selection {
    background-color: #74E6E5;
    color: #000 !important; 
}

/* Sub Menu */
#sub-nav {
  margin-top: 0;
  text-align: center;
}

#sub-nav .link_sub {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

#sub-nav .link_sub li a {
    display: inline-block;
    padding: 0.1em 1.2em;
    font-size: 0.88rem;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background-color: #8FB6D6;
    border-radius: 0.2em;
    transition: all 0.3s ease;
    border-bottom: 0;
}

#sub-nav .link_sub li a:hover {
    background-color: #48545E;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#sub-nav .link_sub li.active a {
  background-color: #48545E !important;
  color: #ffffff !important;
  pointer-events: none !important;
  opacity: 0.25 !important;
}

/* 모바일 스타일 */
@media (max-width: 768px) {
  #sub-nav .link_sub {
    flex-direction: column;
    gap: 0.5em;
  }

  #sub-nav .link_sub li a {
    width: 100%;
    font-size: 0.9rem;
  }

  .font_none {
    font-size: 0.98rem !important;
  }

  .board-header .header-item:nth-child(2),
  .board-header .header-item:nth-child(3) {
    display: none;
  }

  .header-item:nth-child(1) {
    flex: 0 0 100% !important;
  }

  .board-item {
    flex-direction: column;
    text-align: left;
  }

  .item-title {
    width: 100%;
  }

  .item-author,
  .item-date {
    margin-top: 5px;
    display: none;
  }

  .subject {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
  }
}

/* Board List */
.board-container {
  max-width: 100%;
  font-size: 14px;
  letter-spacing: 0.225em !important;
  word-spacing: 1.225em;
  margin: 0 0 3em 0;
}

.board-header {
  display: flex;
  color: #2B3748;
  padding: 12px;
  font-weight: 600 !important;
  font-size: 1em;
  text-align: center;
  border-bottom: solid 1px #CED4DB;
  height: 50px;
}

.header-item {
  flex: 0 0 20%;
}

.header-item:nth-child(1) {
  flex: 0 0 60%;
}

.board-item {
  display: flex;
  padding: 1.6em;
  border-bottom: 1px solid #dfdfdf;
}

.item-title {
  flex: 0 0 60%;
  text-align: left;
}

.item-author,
.item-date {
  flex: 0 0 20%;
  text-align: center;
}

.board-item:hover {
  background-color: #FAFBFD;
}

/* Board List Box */
.item_titles { 
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", sans-serif !important;
  font-size: 0.88rem !important; 
  font-weight: 400 !important;
  letter-spacing: 0.180em;
  word-spacing: 0.1em !important;
  transition: 0.5s !important;
  border-bottom: 0px solid #fff !important;
}

a.item_titles:link, a.item_titles:visited, a.item_titles:active {
  color: #5C6067 !important;
  text-decoration: none !important;
}

a.item_titles:hover {
  color: #19BED6 !important;
  border-bottom: solid 1px #19BED6 !important;
}

@media (max-width: 768px) {
  .item_titles {
    font-size: 0.88rem !important;
  }
}


.item_sub {
  margin: 0 5px;
  font-family: 'Montserrat', serif;
  font-weight: 400 !important;
  color: #303030 !important;
  font-size: 0.8em !important;
}

/* Align Center */
.Ac {
    text-align: center;
    list-style: none !important;
}

.Bc {
    display: none; /* 기본적으로 숨김 */
    text-align: right;
    list-style: none !important;
}

@media (max-width: 768px) {
    .Bc {
        display: block;
        margin-bottom: 2em !important;
    }
}

.Acc {
    text-align: left;
    list-style: none !important;
    padding-left: 0.1rem;
    margin-bottom: 2rem !important;
}

@media (max-width: 768px) {
    .Acc {
        padding: 0 0 1em 0;
        border-bottom: 0.01rem solid #ddd;
    }
}

.Aclink a {
    color: #5C6067 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    transition: color 0.3s ease, border-bottom 0.3s ease !important;
    border-bottom: none;
}

.Aclink a:hover {
    color: #896BA9 !important;
    text-decoration: none !important;
}

.h-title {
    font-size: 2.4rem !important;
    line-height: 1.5 !important;
}
@media (max-width: 768px) {
    .h-title {
            font-size: 1.2rem !important;
    }
}
/* 무료 법률 상담 버튼 */
.Pretendard {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.058em !important;
  word-spacing: 0.1em !important;
}

/* 404 Not Found */
        /* 팝업 배경 */
        .custom-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            /*display: none;*/
            z-index: 1000;
        }

        /* 팝업 창 */
        .custom-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 50%;
            max-width: 90%;
            padding: 20px;
            z-index: 1001;
        }
        /* 모바일 환경 (화면 너비가 768px 이하일 때) */
    @media (max-width: 768px) {
        .custom-modal {
            width: 90%;
            max-width: 90%; /* 중복될 가능성을 제거 */
    }
}

        .custom-modal .modal-header {
            color: #8A6AA9;
            font-size: 2em;
            font-family: "Taviraj", serif;
            font-weight: 700;
            /*margin-bottom: 0.3em;*/
        }
        .custom-modal .modal-middle {
            color: #B9AACB;
            font-size: 1em;
            font-family: "Taviraj", serif;
            font-weight: 500;
            margin-bottom: 1.5em;
        }

        .custom-modal .modal-body {
            margin-bottom: 1.2em;
            /*font-size: 1.23em;*/
            font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
            letter-spacing: 0.1em;
            word-spacing: 0.1em;
            line-height: 1.6em;
        }

        .custom-modal .modal-bodys {
            font-family: "Taviraj", serif;
            font-weight: 300;
            margin-bottom: 2.5em;
            font-size: 1em;
            /* letter-spacing: 0.1em; */
            /* word-spacing: 0.1em; */
            line-height: 1.8em;
        }

        .custom-modal .modal-footer {
            text-align: right;
        }

        .custom-modal .modal-footer .btn {
            display: none; /* 닫기 버튼 숨김 */
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            background: #007bff;
            color: white;
            cursor: pointer;
        }

        .custom-modal .modal-footer .btn:hover {
            background: #0056b3;
        }

/* English Button */
.Taviraje {
    font-family: "Taviraj", serif !important;
    font-weight: 600 !important;
}

/* 태그 */
/* 공통 태그 스타일 */
.tag-container {
    align-items: center; /* 수직 정렬 */
}

.tag-text {
    display: inline-flex; /* 가로로 나란히 배치 */
    background-color: #F5F5F5; /* 기본 박스 색상 */
    /* border: 1px solid #F5F5F5; */
    color: #666; /* 태그 글자 색상 */
    padding: 5px 13px; /* 패딩 */
    border-radius: 5px; /* 모서리 둥글게 */
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.5px; /* 글자 간격 조정 */
    text-decoration: none; /* 밑줄 제거 */
    margin: 7px; /* 태그들 사이 간격 */
    border-bottom: 0px solid #fff !important;
}
.tag-text:hover {
    background-color: #45CDC8; /* 검은색 박스 색상 */
    /* border:1px solid #42C5C0; */
    color: #fff !important; /* 태그 글자 색상 */
    border-radius: 5px; /* 모서리 둥글게 */
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.5s ease, color 0.5s ease; /* 배경색과 글자색에 대해 서서히 변하도록 설정 */
}

/* 각 색상에 대한 클래스 */
.tag-text.color1 {
    background-color: #45CDC8; /* 기본 색상 */
    color: #fff; /* 기본 텍스트 색상 */
}
.tag-text.color1:hover {
    background-color: #303030; /* hover 색상 */
    color: #45CDC8; /* hover 텍스트 색상 */
}

.tag-text.color2 {
    background-color: #ffcc00; /* 노란색 */
    color: #333; /* hover 텍스트 */
}
.tag-text.color2:hover {
    background-color: #303030; /* hover 색상 */
    color: #ffcc00 !important; /* hover 텍스트 색상 */
}

.tag-text.color3 {
    background-color: #FF9000; /* 주황색 */
    color: #fff; /* hover 텍스트 */
}
.tag-text.color3:hover {
    background-color: #303030; /* hover 색상 */
    color: #FF9000 !important; /* hover 텍스트 */
}

.tag-text.color4 {
    background-color: #FF7DC7; /* 파란색 */
    color: #fff; /* hover 텍스트 */
}
.tag-text.color4:hover {
    background-color: #303030; /* hover 색상 */
    color: #FF7DC7 !important; /* hover 텍스트 */
}

.tag-text.color5 {
    background-color: #BDCF27; /* 초록색 */
    color: #fff; /* hover 텍스트 */
}
.tag-text.color5:hover {
    background-color: #303030; /* hover 색상 */
    color: #BDCF27 !important; /* hover 텍스트 */
}

/* 태그 광고 */
.tag-texts {
    display: inline-flex; /* 가로로 나란히 배치 */
    background-color: #2EBAB5; /* 검은색 박스 색상 */
    border:1px solid #28ACA7;
    color: #fff; /* 태그 글자 색상 */
    padding: 8px; /* 패딩 */
    border-radius: 5px; /* 모서리 둥글게 */
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.5px; /* 글자 간격 조정 (1px) */
    text-decoration: none; /* 밑줄 제거 */
    margin: 7px; /* 태그들 사이 간격 */
}
.tag-texts:hover {
    background-color: #0F3230; /* 검은색 박스 색상 */
    border:1px solid #000000;
    color: #45CDC8; /* 태그 글자 색상 */
    padding: 8px; /* 패딩 */
    border-radius: 5px; /* 모서리 둥글게 */
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.5s ease, color 0.5s ease; /* 배경색과 글자색에 대해 서서히 변하도록 설정 */
}

/* 아이콘 */
  .icos {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease; /* Adds a smooth color transition */
  }
  .icos:hover {
    color: #101010 !important;
  }

/* 리뷰 메인 박스 */
.bgs {
    background-color: #FCFEFF !important;
}
.boxs {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #F9FAFA !important;
    margin-top: -0.49rem;
}
.Taviras {
    font-size: 0.8em !important;
    font-family: "Taviraj", serif !important;
    font-weight: 300 !important;
}
.content-right {
    text-align: right;
}
.Tavira {
    font-family: "Taviraj", serif !important;
    font-weight: 400 !important;
}

/* 리뷰 메인 박스 + 프로필 */
.pt-5 {
    padding-top: 3rem !important;
}
.d-flex {
    display: flex !important;
}
.align-items-center {
    align-items: center !important;
}
.me-3 {
    margin-right: 1rem !important;
}
.rounded-circle {
    border-radius: 50% !important;
}
.small {
    font-size: 0.8rem;
}
.text-muted {
    font-size: 0.9rem !important;
    font-family: "Taviraj", serif !important;
    font-weight: 500 !important;
    line-height: 1.5em;
}
.text-view {
    font-size: 0.88rem !important;
}

/* 목차 코드 */
    .accordion {
      margin: 10px 0;
    }

    .accordion button {
      width: 100%;
      /* text-align: left; */
      /* padding: 10px; */
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
      /* border: 1px solid #ccc; */
      /* background-color: #f9f9f9; */
      transition: background-color 0.3s;
    }

    .accordion button:hover {
      background-color: #EBF0F3;
    }

    .accordion button.active {
      background-color: #EBF0F3;
    }

    .accordion .content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      padding: 0 10px;
      border: 1px solid #EBF0F3;
      border-top: none;
      background-color: #F9FBFD;
    }

    .accordion .content ul {
      list-style: none;
      padding: 10px 0;
      margin: 0 0 1.3rem 0;
      border-bottom: 1px solid #D8E2E9;
    }
    .accordion .content > ul:last-child {
      border-bottom: none;
    }
    .accordion .content ul li {
      margin: 5px 0;
    }

    .accordion .content ul li a {
      color: #698EAC;
      font-size: 0.88rem;
      cursor: pointer;
      border-bottom:none;
      text-decoration: none;
    }

    .accordion .content ul li a:hover {
      color: #212931;
      font-size: 0.88rem;
      text-decoration: none;
    }

    /* Example content styling */
    .section {
      margin: 50px 0;
    }

    .section h2 {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .section p {
      font-size: 16px;
    }
    .section_top {
      color: #fff !important;
    }

/* 스크롤 위로 올리기 */
    #back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none;
      background-color: transparent;
      color: #fff;
      border: none;
      border-radius: 50%;
      padding: 5px 10px;
      cursor: pointer;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: background-color 0.5s ease, transform 0.5s ease;
      z-index: 9999;
    }
    #back-to-top:hover {
      background-color: #8FB6D6;
    }
@media (max-width: 768px) {
    #back-to-top {
        color: #000;
    }
    #back-to-top:hover {
      background-color: #8FB6D6;
    }
}

/* 베너 박스 */
    .banner {
      width: 100%;
      margin-bottom: 2rem;
      text-align: left;
}

@media (max-width: 768px) {
    .banner {
      display: none;
    }
}




/* 사이드바 기본 설정 */
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 70px;
  height: 100%;
  background-color: rgba(30, 37, 45, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 아이콘들을 세로로 중앙 정렬 */
  overflow: visible; /* overflow를 visible로 변경 */
  z-index: 10;
}

/* 사이드바 리스트 */
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* 각 메뉴 항목 */
.sidebar ul li {
  position: relative;
  width: 100%;
  border-bottom: 1px solid rgba(30, 37, 45, 0.5);

}

/* 메뉴 아이템의 링크 */
.sidebar ul li a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  height: 70px;
  transition: background-color 0.3s ease;
  position: relative;
}

/* 마우스 오버시 배경색 변경 */
.sidebar ul li a:hover {
  color: #FFCE09;
  background-color:transparent;
}

/* 아이콘 스타일 */
.sidebar ul li a .icon {
  width: 70px;
  text-align: center;
  font-size: 1.5rem;
  z-index: 2;
}

/* 메뉴 텍스트 */
.sidebar ul li a .menu-name {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    line-height: 70px;
    background-color: rgba(30, 37, 45, 0.5);
    border-radius: 0.5em 0 0 0.5em;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    width: 0; /* 기본 상태에서 메뉴 숨기기 */
    overflow: hidden;
    transition: width 0.3s ease; /* width 애니메이션 */
    z-index: 1;
}

/* 마우스 오버 시 메뉴 텍스트 확장 */
.sidebar ul li:hover a .menu-name {
    width: 14rem;  /* 텍스트가 확장되는 너비 */
    padding-left: 15px;  /* 여백을 유지하여 텍스트가 배경 끝에 붙지 않도록 */
    padding-right: 15px; /* 여백을 추가하여 텍스트가 오른쪽에 붙지 않도록 */
}

/* 모바일에서 사이드바 숨기기 */
@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
}