@charset "utf-8";

/* ==========================================================================
   modify.css — 맨 마지막에 읽히는 덧칠 파일
   --------------------------------------------------------------------------
   앞서 읽은 base.css · layout.css · base-style.css · style.css 의 값을
   여기서 덮어씁니다. 급하게 한 곳만 고칠 때 쓰세요.
   ========================================================================== */

/* ── 테마 고유 덧칠 (EASE 원본) ────────────────────────────── */

/* 

modify

 */

#hd_pop {
  width: auto;
}

#hd_pop p {
  opacity: 1;
}

#hd_pop .hd_pops_con {
  background: var(--white-color);
}

#hd_pop .hd_pops_con > * {
  opacity: 1;
}

/* 닫기 버튼은 오른쪽 위(박스 바깥쪽 아님) */
#hd_pop .hd_pops_footer {
  background: var(--primary-color);
}

#hd_pop .hd_pops_footer .hd_pops_close {
  background: var(--primary-color);
}

/* '오늘 하루 보지 않기' 버튼은 왼쪽에 고정 */
#hd_pop .hd_pops_footer .hd_pops_reject {
  background: var(--primary-color);
}

#hd_pop .hd_pops_footer button {
  padding: 1.2rem 2.4rem;
  font-size: 1.5rem;
  border: 0;
  color: var(--white-color);
}

#hd_pop .hd_pops {
  position: fixed;
  border-radius: 0;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* 768px 이하에서 팝업이 뷰포트 안에 깔끔히 맞게 동작하도록 */
@media (max-width: 768px) {
  /* 전체 컨테이너 높이 자동 처리 */
  #hd_pop {
    height: auto;
  }

  /* 팝업 박스: 화면에 고정(스크롤과 함께 떠있지 않음), 좌우 여백 16px, 상단 40px */
  #hd_pop .hd_pops {
    position: fixed;
    /* top: 40px !important; */
    left: 16px !important;
    right: 16px !important;
    box-sizing: border-box;
    width: auto;
    max-width: calc(100vw - 32px);
    /* 좌우 16px씩 보장 */
    margin: 0 auto;
    overflow: auto;
    /* 내용이 길면 내부에서 스크롤 */
    max-height: calc(100vh - 40px - 16px);
    /* 상단 40px + 약간의 여유 */
    background: #fff;
    z-index: 10000;
  }

  #hd_pop .hd_pops_con {
    width: 100% !important;
    height: auto !important;
    background: #fff;
  }

  /* 이미지가 뷰포트를 넘지 않도록: 폭은 부모에 맞추고, 높이는 자동 */
  #hd_pop .hd_pops img {
    width: 100% !important;
    /* 부모(.hd_pops)의 너비를 따름 */
    height: auto !important;
    /* 높이는 자동 유지 */
  }
}

/* 게시판 카테고리 공통 — 메인 룩북 탭과 동일한 미니멀 텍스트 + 언더라인
   (.sub_content 스코프라 스킨별 #bo_cate 규칙보다 우선 적용됨) */
.sub_content #bo_cate {
  margin: 0 0 4.8rem;
}

.sub_content #bo_cate ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4rem;
  zoom: 1;
  border-bottom: 1px solid var(--line-color);
}

.sub_content #bo_cate ul:after {
  display: none;
}

.sub_content #bo_cate li {
  display: block;
  padding: 0;
}

.sub_content #bo_cate a {
  display: block;
  line-height: 1;
  padding: 0 0.4rem 1.6rem 0.4rem;
  margin-bottom: -1px;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--text-color-sub);

  font-size: 1.8rem;
  font-weight: 400;
  transition: 0.25s;
}

.sub_content #bo_cate a:focus,
.sub_content #bo_cate a:hover,
.sub_content #bo_cate a:active {
  text-decoration: none;
  background: none;
  color: var(--text-color);
}

.sub_content #bo_cate #bo_cate_on {
  z-index: 2;
  background: none;
  color: var(--text-color);
  font-weight: 500;
  border: none;
  border-bottom: 1px solid var(--text-color);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* 태블릿부터 선제 적용 — 탭이 줄바꿈으로 흐트러지기 전에 가로 스크롤로 전환.
   스크롤 컨테이너는 패딩 박스 밖을 잘라내므로 -1px 겹침 대신
   인셋 헤어라인 + margin 0으로 활성 밑줄 잘림 방지 */
@media (max-width: 1024px) {
  .sub_content #bo_cate ul {
    gap: 2.4rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* 스크롤 기능은 유지, 스크롤바만 숨김 */
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--line-color);
  }

  .sub_content #bo_cate ul::-webkit-scrollbar {
    display: none;
  }

  /* 탭이 눌려 줄어들지 않게 고정 */
  .sub_content #bo_cate li {
    flex: 0 0 auto;
  }

  .sub_content #bo_cate a {
    margin-bottom: 0;
  }
}

/* 폰 — 가로 스크롤 대신 세로 스택 리스트 */
@media (max-width: 768px) {
  .sub_content #bo_cate {
    margin-bottom: 3.2rem;
  }

  .sub_content #bo_cate ul {
    flex-direction: column;
    gap: 0;
    white-space: normal;
    overflow-x: visible;
    box-shadow: none;
    border-bottom: none; /* 항목별 라인으로 대체 */
  }

  .sub_content #bo_cate a {
    font-size: 1.6rem;
    padding: 1.4rem 0.4rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line-color);
  }

  .sub_content #bo_cate #bo_cate_on {
    border-bottom: 1px solid var(--text-color);
  }
}

.sub_content .bo_cate_link {
  float: left;
  display: inline-block;
  margin-right: 10px;
  background: none;
  color: var(--point-color);
  font-weight: normal !important;
  height: auto;
  line-height: 10px;
  padding: 8px 16px;
  border-radius: 0;
  font-size: 0.95em;
}

/* 분류 — 배경 딱지 없이 글자만. 좌우 여백을 없애 제목과 같은 세로선에서
   시작하게 한다. */
.sub_content #bo_v_title .bo_v_cate {
  display: block;
  margin: 0 0 1rem;
  padding: 0;

  background: none;
  border: 0;
  border-radius: 0;

  color: var(--point-color);
  font-size: var(--fs-xs, 1.3rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.sub_content .bo_tit {
  display: block;
  color: #000;
  font-weight: 400;
}

.sub_content .bo_tit svg {
  width: 16px;
  height: 16px;

  margin-left: 16px;
}

.sub_content .bo_tit svg.feather-lock {
  margin-left: 0;
  stroke: var(--point-color);
}

.sub_content #bo_list .td_datetime {
  width: auto;
  text-align: center;
  width: 90px;
  white-space: nowrap;
}

.sub_content #bo_list .td_name {
  width: 90px;
  text-align: center;
  padding: 10px 0;

  white-space: nowrap;
}

.sub_content #bo_list td {
  height: 6.4rem;
  word-break: break-all;
}

.sub_content #bo_list .bo_notice td {
  border-bottom: 1px solid var(--point-color);
  background: var(--background-color);
}

.sub_content .bo_current {
  color: #e8180c;
  white-space: nowrap;
  font-size: 1.5rem;
}

.sub_content #bo_w .bo_w_flie .file_wr {
  position: relative;
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
  vertical-align: middle;
  border-radius: 0;
  padding: 16px 5px;
  height: auto;
  margin: 0;
}

.sub_content #bo_v_title .bo_v_tit {
  display: block;
  font-size: 2.4rem;
  font-weight: 400;
  margin: 5px 0 0;
  word-break: break-all;
}

/* 제목 아래 라인 하나 */
.sub_content #bo_v_title {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-color);
}

.sub_content #bo_v_info .profile_info {
  margin: 4rem 0 1.6rem 0;
  display: inline-block;
}

.sub_content #bo_v_img {
  width: 100%;
  overflow: hidden;
  margin: 4rem 0 4rem 0;
  zoom: 1;
}

.sub_content #bo_v_con {
  margin: 4rem 0 4rem 0;
  width: 100%;
  line-height: 1.7em;
  min-height: 200px;
  word-break: break-all;
  overflow: hidden;
}

.sub_content #bo_v_file ul {
  margin: 0;
  list-style: none;
}

.sub_content #bo_v_link li {
  padding: 15px;
  position: relative;
  margin: 10px 0;
  border: 1px solid #dfdfdf;
  border-radius: 0;
  -webkit-box-shadow: 1px 1px 5px 0px hsl(232, 36%, 96%);
  -moz-box-shadow: 1px 1px 5px 0px hsl(232, 36%, 96%);
  box-shadow: 1px 1px 5px 0px hsl(232, 36%, 96%);
}

.sub_content #bo_v_link li i {
  float: left;
  color: var(--text-color-sub);
  font-size: 2.35em;
  margin-right: 40px;
}

.sub_content #bo_v_link a {
  float: none;
  display: block;
  text-decoration: none;
  word-wrap: break-word;
  color: #000;
}

.sub_content #bo_v_link a:focus,
.sub_content #bo_v_link li:hover a,
.sub_content #bo_v_link a:active {
  text-decoration: underline;
  color: #000;
}

.sub_content #bo_v_link .bo_v_link_cnt {
  color: var(--text-color-sub);
  font-size: 1.5rem;
}

.sub_content #bo_v_link li:hover {
  border-color: var(--point-dark);
  color: var(--point-dark);
}

.sub_content #bo_v_link li:hover i {
  color: var(--point-color);
}

.sub_content #bo_v_link li:hover .bo_v_link_cnt {
  color: var(--point-dark);
}

.sub_content #bo_v_file a {
  float: none;
  display: block;
  text-decoration: none;
  word-wrap: break-word;
  color: #000;
}

.sub_content .cmt_btn {
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  font-weight: bold;
  margin: 30px 0 0px;
  padding: 0 0 15px;
}

.sub_content .cmt_btn span.total {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  font-size: 1.5rem;
  color: var(--primary-color);
}

.sub_content .cmt_btn span.cmt_more {
  float: right;
  display: inline-block;
  width: 15px;
  height: 10px;
  background: url(./img/btn_cmt.png) no-repeat right 2px;
  margin-top: 5px;
}

.sub_content .cmt_btn_op span.cmt_more {
  background-position: right -8px;
}

.sub_content .cmt_btn b {
  font-size: 1.2em;
  color: #000;
}

.sub_content .cmt_btn span.total:after {
  position: absolute;
  bottom: -17px;
  left: 0;
  display: inline-block;
  background: var(--primary-color);
  content: "";
  width: 100%;
  height: 2px;
}

.sub_content #bo_w .bo_w_flie .lb_icon {
  position: absolute;
  top: 17px;
  left: 0px;
  border-radius: 0;
  height: 38px;
  line-height: 38px;
  width: 40px;
  font-size: 1.2em;
  text-align: center;
  color: var(--text-color-sub);
}

.sub_content #bo_w .bo_w_link label {
  position: absolute;
  top: 5px;
  left: 1px;
  border-radius: 0;
  height: 38px;
  line-height: 38px;
  width: 40px;
  font-size: 1.2em;
  text-align: center;
  color: var(--text-color-sub);
}

.sub_content .more_opt svg {
  width: 14px;
  height: 14px;
}

/*FAQ */
.sub_content .faq-container {
  /* max-width: 600px; */
  margin: 0 auto;
}

.sub_content .faq {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0;
  margin: 20px 0;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
  background: #f9f9f9;
}

.sub_content .faq h3 {
  font-size: 2rem;
}

.sub_content .faq.active {
  background-color: #fff;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.1),
    0 3px 6px rgba(0, 0, 0, 0.1);
}

.sub_content .faq-title {
  margin: 0 35px 0 0;
  cursor: pointer;
}

.sub_content .faq-text {
  display: none;
  margin: 30px 0 0;
  line-height: 1.5;
}

.sub_content .faq.active .faq-text {
  display: block;
}

.sub_content .faq-toggle {
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  position: absolute;
  top: 50%;
  right: 30px;
  height: 30px;
  width: 30px;

  transform: translate(0, -50%);
}

.sub_content .faq-toggle:focus {
  outline: 0;
}

.sub_content .faq-toggle .close {
  display: none;
}

.sub_content .faq.active .faq-toggle .close {
  color: #fff;
  display: block;
}

.sub_content .faq.active .faq-toggle .down {
  display: none;
}

.sub_content .faq.active .faq-toggle {
  background-color: #9fa4a8;
}

.sub_content #bo_w .btn_submit {
  padding: 0 20px;
  font-size: 1.167em;
}

.sub_content #bo_w .btn_submit {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
  display: inline-flex;
  align-items: center;
  height: 4.8rem;
  border-radius: 0;
  padding: 0 2.4rem 0 8rem;
  overflow: hidden;
  color: var(--white-color);
  white-space: nowrap;
}

.sub_content #bo_w .btn_submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 4.8rem;
  border-radius: 0;
  background: var(--primary-color);
}

.sub_content #bo_w .btn_submit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1) url(../lib/icon/edit-3.svg) no-repeat center
    center;
  filter: invert();
}

.sub_content #bo_w .btn_cancel {
  position: relative;
  z-index: 1;

  margin-top: 4rem;

  display: inline-flex;
  align-items: center;
  height: 4.8rem;
  border-radius: 0;
  padding: 0 2.4rem 0 8rem;
  overflow: hidden;

  color: var(--white-color);
  white-space: nowrap;
}

.sub_content #bo_w .btn_cancel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 4.8rem;
  border-radius: 0;
  background: var(--point-color);
}

.sub_content #bo_w .btn_cancel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1) url(../lib/icon/x.svg) no-repeat center center;

  filter: invert();
}

.sub_content #bo_w .frm_info {
  position: relative;
  line-height: 18px;
  color: var(--point-color);
  margin: 10px 0;
  display: inline-block;
  font-size: 1em;
}

.sub_content .chk_box input[type="checkbox"] + label {
  position: relative;
  /* padding-left: 24px; */
  color: #676e70;
}

.sub_content .btn_cke_sc {
  display: inline-block;
  padding: 0 10px;
  height: auto;
  border: 1px solid #ccc;
  background: #fafafa;
  color: #000;
  text-decoration: none;
  line-height: 1.9em;
  vertical-align: middle;
  cursor: pointer;
}

.sub_content #faq_sch {
  background: #f7f7f7;
  padding: 2.4rem;
  text-align: center;
  margin: 0 0 8rem 0;
}

.sub_content #faq_sch .btn_submit {
  position: relative;
  z-index: 1;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  height: 4.8rem;
  border-radius: 0;
  padding: 0 2.4rem 0 8rem;
  overflow: hidden;
  color: var(--white-color);
  background: transparent;
  white-space: nowrap;

  width: auto;

  font-weight: 400;
}

.sub_content #faq_sch .btn_submit .fa {
  display: none;
}

.sub_content #faq_sch .btn_submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 4.8rem;
  border-radius: 0;
  background: var(--point-color);
}

.sub_content #faq_sch .btn_submit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1) url(../lib/icon/search.svg) no-repeat center
    center;
  filter: invert();
}

.sub_content #fregister p {
  position: relative;
  text-align: center;
  color: #fff;
  height: 50px;
  line-height: 50px;
  font-size: 1.1em;
  background: var(--point-color);
  margin: 0 0 10px;
  border-radius: 0;
  font-weight: 400;
}

.btn_submit:hover {
  background: var(--secondary-color);
}

.btn_submit {
  border: 0;
  background: var(--primary-color);
  color: var(--white-color);
  cursor: pointer;
  border-radius: 0;
}

#content #bo_w .btn_confirm {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  margin-top: 4rem;
}

#content #bo_w .btn_confirm > * {
  margin-top: 0;
}

#content #bo_w .btn_confirm::after {
  display: none;
}

.bbs-view-image img {
  height: auto !important;
}

/* ──────────────────────────────────────────────────────────
   드롭다운이 잘리지 않도록
   ----------------------------------------------------------
   헤더 안쪽 상자에 overflow 가 걸려 있으면 펼쳐진 하위메뉴가
   헤더 높이에서 잘립니다. 넓은 화면에서만 풀어 줍니다.
   (좁은 화면의 모바일 메뉴 패널은 스크롤이 필요하므로 건드리지 않습니다)
   ────────────────────────────────────────────────────────── */

@media (min-width: 1025px) {
  #header,
  #header .hd_wrap,
  #header .header_top,
  #header .header_bottom,
  #header .gnb_container,
  #header .gnb,
  #header .gnb > ul {
    overflow: visible;
  }

  /* 하위메뉴가 뒤 요소에 가리지 않도록 */
  #header .gnb > ul > li:hover,
  #header .gnb > ul > li:focus-within {
    z-index: 40;
  }
}

/* ==========================================================================
   서브페이지에서도 스크롤하면 헤더 높이를 줄인다
   --------------------------------------------------------------------------
   높이를 줄이는 규칙은 .overlay(메인 전용)와 함께 적혀 있어 서브페이지에는 걸리지 않는다.
   여기서 높이만 다시 적어 메인 · 서브가 같게 움직이게 한다.
   (색 · 배경은 오버레이 전용이라 가져오지 않는다. 화면 폭 조건도 그대로 지킨다)
   ========================================================================== */

#header.on {
  height: auto;
}

@media (max-width: 1024px) {

  #header.on {
    height: auto;
  }
}


/* ==========================================================================
   모바일 메뉴판 — 2뎁스는 눌러서 펼친다
   --------------------------------------------------------------------------
   PC 는 대메뉴에 마우스를 올려 하위메뉴를 펼치지만 손가락으로는 올릴 수 없습니다.
   좁은 화면에서는 하위메뉴를 접어 두었다가 대메뉴를 누르면 펼칩니다.
   (펼치고 접는 동작은 js/custom.js 가 합니다)
   메뉴가 길어지면 메뉴판이 세로로 스크롤됩니다.
   ========================================================================== */
@media (max-width: 1024px) {

  /* 메뉴판이 화면보다 길어지면 스크롤 */
  #header .gnb_container {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #header .gnb_container > * {
    min-height: 0;
  }

  /* 2뎁스 : 접힘이 기본. PC 용 '떠 있는 드롭다운' 값을 평범한 목록으로 되돌린다.
     (펼칠 때는 jQuery 가 인라인 display 를 넣어 이 규칙을 넘어선다) */
  #header .gnb > ul > li ul,
  #header .gnb > ul > li:hover ul,
  #header .gnb > ul > li:focus-within ul {
    display: none;

    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;

    width: auto;
    min-width: 0;
    max-height: none;
    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    box-shadow: none;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  /* 하위 항목은 한 단 들여써 대메뉴와 구분한다 */
  #header .gnb > ul > li ul > li > a {
    padding-left: 3.2rem;
  }

  /* 하위메뉴가 있는 대메뉴에 화살표 — 펼치면 뒤집힌다 */
  #header .gnb > ul > li.has_sub > a {
    position: relative;
  }

  #header .gnb > ul > li.has_sub > a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.6rem;

    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.6rem;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    opacity: 0.55;
    transition: transform 0.25s, opacity 0.25s;
  }

  #header .gnb > ul > li.open > a::before {
    margin-top: -0.2rem;
    transform: rotate(-135deg);
    opacity: 1;
  }
}

/* ==========================================================================
   대메뉴 표시 · 아이콘 버튼 정리
   --------------------------------------------------------------------------
   · 대메뉴에 마우스를 올릴 때 글자 아래에서 펼쳐지던 선(과 점)을 쓰지 않습니다.
     호버하면 글자색이 바뀌므로 반응은 그대로 보입니다.
     테마에 따라 #header.overlay 같은 조건이 붙어 있어 확실히 끄도록 했습니다.
   · 아이콘 뒤에 깔리던 옅은 원과, 아이콘만 있는 게시판 버튼의 테두리를 없앱니다.
   ========================================================================== */
#header .gnb > ul > li > a::after,
#header .gnb > ul > li > a:hover::after,
#header .gnb > ul > li > a.active::after,
#header .gnb > ul > li:hover > a::after,
#header .gnb > ul > li:focus-within > a::after {
  display: none !important;
  content: none !important;
}

/* 아이콘 뒤 옅은 원 (아이콘 그림은 그대로 둔다) */
.icon_btn::after,
.icon_btn_write::after,
.icon_btn_cancel::after {
  background-color: transparent;
}

/* 게시판 아이콘 버튼 줄 : 검색 · 글쓰기 · 목록 · 관리
   --------------------------------------------------------------------------
   스킨 기본값은 float 에 칸 너비 40px 고정인데, 테마의 .btn 은 알약 모양이라
   좌우 2.4rem · 위아래 1.3rem 여백이 붙습니다. 그래서 버튼이 칸을 넘쳐
   오른쪽으로 삐져나오고, 높이도 글 개수 줄과 어긋났습니다.
   줄을 flex 로 바꿔 세로 가운데를 맞추고 아이콘 버튼은 정사각으로 잡습니다.

   마우스를 올렸을 때 깔리던 회색 바탕과 테두리는 쓰지 않습니다.
   아이콘 색이 바뀌므로 반응은 그대로 보입니다.

   같은 ul 을 목록 위(#bo_btn_top) · 목록 아래(.bo_fx) · 본문 아래(.bo_v_com)
   에서 함께 쓰므로 한 벌로 세 자리를 모두 맞춥니다. */
#content .sub_content #bo_btn_top {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

/* float 를 걷어내면 이 clearfix 는 빈 칸만 차지합니다 */
#content .sub_content #bo_btn_top::after {
  display: none;
}

#content .sub_content #bo_list_total {
  float: none;
  line-height: 1.5;
}

#content .sub_content .btn_bo_user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  float: none;
}

#content .sub_content #bo_btn_top .btn_bo_user {
  margin-left: auto;
}

#content .sub_content .btn_bo_user > li {
  float: none;
  width: auto;
  margin: 0;
  text-align: left;
  background: transparent;
}

/* 아이콘만 있는 버튼이라 글자용 여백 대신 정사각으로 잡습니다 */
#content .sub_content .btn_bo_user > li > .btn,
#content .sub_content .btn_bo_user > li > .btn_b01,
#content .sub_content .btn_bo_user > li > .btn_admin,
#content .sub_content .btn_bo_user > li > .btn_bo_sch,
#content .sub_content .btn_bo_user > li > .btn_more_opt {
  width: 3.4rem;
  height: 3.4rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text-color-sub);
}

#content .sub_content .btn_bo_user > li > .btn svg,
#content .sub_content .btn_bo_user > li > .btn i {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.6rem;
}

#content .sub_content .btn_bo_user > li > .btn:hover,
#content .sub_content .btn_bo_user > li > .btn:focus-visible,
#content .sub_content .btn_bo_user > li > .btn_b01:hover,
#content .sub_content .btn_bo_user > li > .btn_admin:hover,
#content .sub_content .btn_bo_user > li > .btn_bo_sch:hover,
#content .sub_content .btn_bo_user > li > .btn_more_opt:hover {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--point-color);
}

/* ==========================================================================
   메뉴판이 열려도 로고는 그대로 자리에 있게
   --------------------------------------------------------------------------
   메뉴판(.gnb_container)이 화면을 덮을 때 로고가 그 아래로 들어가
   보이지 않던 자리를 올려 줍니다. 햄버거 버튼은 그보다 한 단 더 위입니다.
   ========================================================================== */
@media (max-width: 1024px) {
  #header h1 {
    position: relative;
    z-index: 1001;
  }

  /* 자리는 style.css 의 position:fixed 그대로 두고 층만 올린다.
     여기서 position 을 다시 적으면 오른쪽 위 고정이 풀립니다. */
  #header .mbtn {
    z-index: 1002;
  }
}

/* ==========================================================================
   PC 에서는 사이드의 전화 버튼을 숨깁니다
   --------------------------------------------------------------------------
   마우스로는 전화를 걸 수 없고, 대표번호는 헤더 · 푸터에 이미 있습니다.
   손가락으로 바로 걸 수 있는 좁은 화면(1024px 이하)에서만 남깁니다.
   전화 버튼의 클래스가 테마마다 달라(.d_tel · .tel · .sn_util) href 로 잡습니다.
   ========================================================================== */
@media (min-width: 1025px) {
  #side_lnk a[href^="tel:"],
  #side_rail a[href^="tel:"],
  #side_nav a[href^="tel:"] {
    display: none;
  }
}


/* ==========================================================================
   게시판 검색 팝업 · 아이콘 버튼
   --------------------------------------------------------------------------
   검색 팝업
     예전 : 각진 흰 상자. 입력칸은 테두리만 있고, 돋보기는 칸 밖 아래로 떨어져 있었습니다.
     지금 : 모서리를 둥글리고 제목 줄을 두었습니다. 입력칸에는 옅은 배경을 깔고,
            돋보기는 칸 안 오른쪽에 넣어 높이를 맞췄습니다.

   글쓰기 · 취소 · 더보기 버튼
     예전 : 배경을 두 겹(요소 배경 = 강조색, ::before = 기본색) 깔았는데
            둥근 정도가 서로 달라 가장자리에 강조색 테두리가 비쳤습니다.
            아이콘도 4.8rem 원판이라 알약의 둥근 모서리와 겹쳤습니다.
     지금 : 배경 한 겹. 아이콘은 글자 옆 1.8rem.
            색은 mask 로 글자색을 따라가므로 filter: invert() 가 필요 없습니다.
   ========================================================================== */

/* ── 검색 팝업 ── */
.sub_content .bo_sch_bg {
  width: 100%;
  height: 100%;
  background: rgba(17, 22, 28, 0.55);
}

.sub_content .bo_sch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(46rem, calc(100vw - 4rem));
  min-width: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;

  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white-color);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-align: left;
}

/* 제목 줄 */
.sub_content .bo_sch h3 {
  display: block;
  margin: 0;
  padding: 1.8rem 5.6rem 1.8rem 2.4rem;
  border-bottom: 1px solid var(--line-color);
  background: var(--lightgray-color);

  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--headline-color);
  text-align: left;
}

.sub_content .bo_sch form {
  display: block;
  padding: 2.4rem;
}

/* 검색 대상 고르기 : 화살표는 테마 아이콘으로 그립니다 */
.sub_content .bo_sch select {
  width: 100%;
  height: 4.8rem;
  padding: 0 4.4rem 0 1.6rem;

  border: 1px solid var(--line-color);
  border-radius: var(--radius-sm);
  background-color: var(--lightgray-color);
  background-image: url(../lib/icon/chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 1.4rem center;
  background-size: 1.6rem 1.6rem;
  box-shadow: none;

  font-family: inherit;
  font-size: 1.5rem;
  color: var(--headline-color);
  cursor: pointer;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.sub_content .bo_sch select:focus {
  outline: 0;
  border-color: var(--point-color);
}

/* 검색어 칸 : 입력칸과 돋보기를 한 줄에 */
.sub_content .bo_sch .sch_bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  width: 100%;
  margin-top: 1.2rem;
  padding: 0.6rem 0.6rem 0.6rem 1.6rem;

  border: 1px solid var(--line-color);
  border-radius: var(--radius-sm);
  background: var(--lightgray-color);
  box-shadow: none;
  transition: border-color 0.2s;
}

.sub_content .bo_sch .sch_bar:focus-within {
  border-color: var(--point-color);
}

.sub_content .bo_sch .sch_input {
  flex: 1 1 auto;
  float: none;
  width: auto;
  min-width: 0;
  height: 3.6rem;
  padding: 0;

  border: 0;
  background: none;

  font-family: inherit;
  font-size: 1.5rem;
  color: var(--headline-color);
}

.sub_content .bo_sch .sch_input:focus {
  outline: 0;
}

.sub_content .bo_sch .sch_btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  float: none;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;

  border: 0;
  border-radius: var(--radius-xs);
  background: var(--point-color);
  color: var(--point-on);
  cursor: pointer;
  transition: background-color 0.2s;
}

.sub_content .bo_sch .sch_btn svg {
  width: 1.8rem;
  height: 1.8rem;
}

.sub_content .bo_sch .sch_btn i {
  font-size: 1.5rem;
}

.sub_content .bo_sch .sch_btn:hover {
  background: var(--headline-color);
}

/* 닫기 : 제목 줄 오른쪽에 맞춥니다 */
.sub_content .bo_sch .bo_sch_cls {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;

  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-color-sub);
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.sub_content .bo_sch .bo_sch_cls svg {
  width: 1.8rem;
  height: 1.8rem;
}

.sub_content .bo_sch .bo_sch_cls:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--headline-color);
}

/* ── 글쓰기 · 취소 · 더보기 버튼 ── */
.icon_btn,
.icon_btn_write,
.icon_btn_cancel {
  position: relative;
  z-index: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;

  height: 4.8rem;
  padding: 0 2.8rem;
  overflow: visible;

  border: 0;
  border-radius: var(--radius-pill);

  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}

/* 배경을 덮던 두 번째 겹을 걷어냅니다 */
.icon_btn::before,
.icon_btn_write::before,
.icon_btn_cancel::before {
  content: none;
}

/* 아이콘 : 글자 옆에 나란히. 색은 글자색을 따라갑니다 */
.icon_btn::after,
.icon_btn_write::after,
.icon_btn_cancel::after {
  content: "";
  position: static;
  flex: 0 0 auto;

  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0;
  filter: none;

  background-color: currentColor;
  background-image: none;

  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* 글쓰기 · 취소는 아이콘이 글자 앞에 옵니다 */
.icon_btn_write::after,
.icon_btn_cancel::after {
  order: -1;
}

.icon_btn::after {
  -webkit-mask-image: url(../lib/icon/arrow-right.svg);
          mask-image: url(../lib/icon/arrow-right.svg);
}

.icon_btn_write::after {
  -webkit-mask-image: url(../lib/icon/edit-3.svg);
          mask-image: url(../lib/icon/edit-3.svg);
}

.icon_btn_cancel::after {
  -webkit-mask-image: url(../lib/icon/x.svg);
          mask-image: url(../lib/icon/x.svg);
}

.icon_btn,
.icon_btn_write {
  background-color: var(--primary-color);
  color: var(--white-color);
}

.icon_btn:hover,
.icon_btn_write:hover {
  background-color: var(--point-color);
  color: var(--point-on);
}

/* 취소는 물러나 보이게 : 옅은 회색 */
.icon_btn_cancel {
  background-color: var(--lightgray-color);
  color: var(--headline-color);
}

.icon_btn_cancel:hover {
  background-color: var(--line-color);
  color: var(--headline-color);
}

/* ==========================================================================
   게시판 아이콘 버튼 : 어디에 놓여도 같게
   --------------------------------------------------------------------------
   위의 정리 규칙은 #content .sub_content 안에서만 걸립니다.
   같은 ul.btn_bo_user 를 쇼핑몰 · 1:1문의 · 회원 페이지에서도 쓰는데,
   그쪽에는 그 껍데기가 없어 그누보드 기본 알약 테두리가 그대로 보입니다.
   껍데기를 따지지 않는 규칙을 한 벌 더 깔아 둡니다.
   (본문 안에서는 위 규칙이 특이도가 높아 그대로 이깁니다)
   ========================================================================== */
.btn_bo_user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  float: none;
}

.btn_bo_user > li {
  float: none;
  width: auto;
  margin: 0;
  text-align: left;
  background: transparent;
}

.btn_bo_user > li > .btn,
.btn_bo_user > li > .btn_b01,
.btn_bo_user > li > .btn_admin,
.btn_bo_user > li > .btn_bo_sch,
.btn_bo_user > li > .btn_more_opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3.4rem;
  height: 3.4rem;
  min-width: 0;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text-color-sub);
}

.btn_bo_user > li > .btn svg,
.btn_bo_user > li > .btn i {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.6rem;
}

.btn_bo_user > li > .btn:hover,
.btn_bo_user > li > .btn:focus-visible,
.btn_bo_user > li > .btn_b01:hover,
.btn_bo_user > li > .btn_admin:hover,
.btn_bo_user > li > .btn_bo_sch:hover,
.btn_bo_user > li > .btn_more_opt:hover {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--point-color);
}

/* LNB 탭 높이 — 4rem 으로 두고 글자를 위아래 가운데에 둡니다.
   line-height 하나로 주면 다른 규칙이 그걸 덮는 순간 줄이 납작해지므로,
   min-height 로 자리를 잡고 가운데 정렬로 글자를 앉힙니다. */
.sub_title .nav_wrap .sub_nav .lnb ul a {
  display: flex;
  align-items: center;
  min-height: 4rem;
}

/* 좁은 화면 LNB — 옆으로 미는 대신 눌러서 펼치는 목록
   ------------------------------------------------------------------
   현재 메뉴 이름만 한 줄로 보여 주고, 누르면 아래로 펼칩니다.
   펼치고 접는 동작은 sub.head.nb.php 의 스크립트가 합니다.
   (.lnb > a 를 누르면 다음 형제 ul 을 slideToggle 합니다)

   높이는 padding 이 아니라 line-height 로 줍니다. 그래야 접힌 줄과
   펼친 항목의 높이가 딱 떨어지고 글자가 늘 줄 한가운데에 앉습니다.
   목록은 띄우지 않고 자리를 차지하게 둡니다. 띄우면 띠(.st_band)의
   overflow 에 잘려 펼치는 동안에만 잠깐 보입니다.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

  /* 줄 여백은 0 으로 두고 높이는 line-height 가 맡습니다 */
  .sub_title .nav_wrap {
    padding-top: 0;
    padding-bottom: 0;
  }

  .sub_title .nav_wrap .sub_nav {
    width: 100%;
    overflow-x: visible;
  }

  .sub_title .nav_wrap .sub_nav .lnb {
    position: relative;
    width: 100%;
  }

  /* 좁은 화면에서는 layout.css 가 루트 글자를 8px 까지 줄입니다(clamp).
     그래서 rem 만으로 주면 누를 자리가 같이 작아집니다.
     px 하한을 둬 손가락으로 누를 크기를 지킵니다. */

  /* 접힌 줄 = 현재 메뉴 이름 */
  .sub_title .nav_wrap .sub_nav .lnb > a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 4rem 0 0;
    margin: 0;

    min-height: max(5.6rem, 48px);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--headline-color);
    background: none;
  }

  /* 화살표 — 오른쪽 끝에 자리를 잡아 두고 열리면 뒤집습니다 */
  .sub_title .nav_wrap .sub_nav .lnb > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.4rem;

    width: 0.9rem;
    height: 0.9rem;
    margin-top: -0.6rem;

    border-right: 1px solid var(--muted-color);
    border-bottom: 1px solid var(--muted-color);
    transform: rotate(45deg);
    transition: transform 0.25s;
  }

  .sub_title .nav_wrap .sub_nav .lnb > a.on::after {
    margin-top: -0.2rem;
    transform: rotate(-135deg);
  }

  /* 펼친 목록 — 띠 폭을 꽉 채웁니다 */
  .sub_title .nav_wrap .sub_nav .lnb > ul {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;

    margin: 0 calc(var(--inner-pad) * -1);
    padding: 0;
    border-top: 1px solid var(--line-color);
  }

  .sub_title .nav_wrap .sub_nav .lnb ul li {
    width: 100%;
  }

  .sub_title .nav_wrap .sub_nav .lnb ul li ~ li {
    border-top: 1px solid var(--line-color);
  }

  /* 알약 탭이든 밑줄 탭이든, 목록 안에서는 한 줄짜리 항목으로 맞춥니다.
     좌우 여백을 --inner-pad 로 두어 접힌 줄의 글자와 세로선이 맞습니다. */
  .sub_title .nav_wrap .sub_nav .lnb ul a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 var(--inner-pad);
    margin: 0;

    min-height: max(5.6rem, 48px);
    font-size: 1.5rem;
    border: 0;
    border-radius: 0;
    background: var(--lightgray-color);
    text-align: left;
  }

  /* 현재 항목 — 왼쪽 굵은 선 하나로 표시합니다 (그림자 없이).
     알약 탭을 쓰는 테마는 이 자리에 포인트색 배경이 깔려 있어
     글자가 묻힙니다. 목록 안에서는 배경도 다른 항목과 같게 둡니다. */
  .sub_title .nav_wrap .sub_nav .lnb ul li.on a {
    padding: 0 var(--inner-pad) 0 calc(var(--inner-pad) - 3px);
    border-left: 3px solid var(--point-color);
    background: var(--lightgray-color);
    color: var(--point-color);
    font-weight: 600;
  }

  /* 밑줄 탭을 쓰는 테마 — 목록 안에서는 밑줄을 쓰지 않습니다 */
  .sub_title .nav_wrap .sub_nav .lnb ul li.on a::after {
    display: none;
  }
}

/* 손으로 누르는 자리 — 최소 크기
   ------------------------------------------------------------------
   좁은 화면에서는 layout.css 가 루트 글자를 8px 까지 줄입니다(clamp).
   그래서 rem 으로 준 높이가 20% 작아집니다. 입력칸 5.2rem 이 42px 로,
   체크박스가 13px 로 내려앉아 손가락으로 누르기 어렵습니다.
   테마마다 준 값이 달라 여기서 하한만 정합니다. */

#content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#content select {
  min-height: max(4.8rem, 44px);
}

#content textarea {
  min-height: max(12rem, 96px);
}

/* 체크박스와 라디오는 그대로 두면 13px 입니다. 조금 키웁니다.
   각 섹션 파일의 <style> 이 이 파일보다 뒤에 실려 같은 특이도로는 밀립니다.
   크기만큼은 지켜야 해서 우선권을 줍니다. */
#content input[type="checkbox"],
#content input[type="radio"] {
  width: max(2rem, 20px) !important;
  height: max(2rem, 20px) !important;
}

/* 붙어 있는 라벨까지 눌리도록 줄 높이를 줍니다 */
#content input[type="checkbox"] + label,
#content input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  min-height: max(4.4rem, 44px);
}

/* 약관 내용 보기 같은 글자만 있는 버튼도 누를 자리를 줍니다 */
#content .agree_more {
  min-height: max(4.4rem, 44px);
  padding: 0 0.4rem;
}

/* ==========================================================================
   푸터 : 개인정보처리방침 줄도 가운데로
   --------------------------------------------------------------------------
   .ft_policy 는 base-style.css 에서 display: flex 라 부모의 text-align 을
   따르지 않으므로, 가운데 정렬 푸터에서는 flex 쪽 정렬로 다시 지정합니다.
   (푸터가 왼쪽 정렬인 테마에는 이 규칙을 두지 않습니다)
   ========================================================================== */
.ft_policy {
  justify-content: center;
}

/* ==========================================================================
   헤더를 스티키로 · 가운데 정렬 맞추기
   --------------------------------------------------------------------------
   ① 헤더는 sticky 로 자기 자리를 차지합니다 (base-style.css 가 본문에 위 여백을
      주지 않는 전제). 메인(.ov)은 사진 위에 겹치는 것이 의도라 그대로 둡니다.

   ② 페이지 제목이 가운데이므로 그 아래 짧은 선과 설명글도 가운데에 둡니다
      (선은 좌우 auto 여백, 설명글은 상자째 가운데).
   ========================================================================== */

#header {
  position: sticky;
  top: 0;
}

/* 제목 아래 짧은 선 — 제목과 같은 가운데선에 */
.sub_content .page_title h3::after {
  margin-left: auto;
  margin-right: auto;
}

/* 제목 아래 설명글도 가운데로. 글상자에 max-width 가 걸려 있어
   좌우 auto 를 함께 주지 않으면 글자만 가운데이고 상자는 왼쪽에 붙습니다. */
.sub_content .content .sub_title_desc {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* 섹션 머리말의 설명글도 같은 이유로 좌우 auto 를 준다 */
.title:not(.left) .desc {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   글자 — 크기를 한 단계 내린다
   --------------------------------------------------------------------------
   제목 계열은 기본값보다 한 단계 작게 두고, 두께 대신 자간으로 무게를 잡습니다. 명조 서체라 400 아래로는
   내리지 않습니다 (300 으로 두면 한글 획이 날아갑니다).

   본문 · 보조 글자(--fs-body/sm/xs)는 그대로 둡니다. 좁은 화면에서는
   layout.css 가 루트 글자를 8px 까지 줄이므로, 여기서 더 내리면 12px 아래로
   떨어져 읽기 어려워집니다.
   ========================================================================== */

:root {
  --fs-h1: clamp(2.8rem, 3.6vw, 5.2rem);
  --fs-h2: clamp(2.2rem, 2.7vw, 3.8rem);
  --fs-h3: clamp(1.9rem, 2vw, 2.6rem);
  --fs-h4: clamp(1.6rem, 1.6vw, 2rem);
  --fs-lead: clamp(1.4rem, 1.1vw, 1.6rem);
  --fs-label: 1.3rem;
}

/* 섹션 제목 — 얇게 · 자간 넓게. h3 도 h2 와 같은 결로 맞춘다
   (base.css 의 h3 는 700 이라 혼자 두꺼웠습니다) */
.title h2 {
  font-size: 2.8rem;
}

.title h3 {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--strong-color);
}

@media (max-width: 1024px) {
  .title h2 {
    font-size: 2.4rem;
  }

  .title h3 {
    font-size: 2.1rem;
  }
}

@media (max-width: 768px) {
  .title h2 {
    font-size: 2.2rem;
  }

  .title h3 {
    font-size: 2rem;
  }
}

/* 영문 라벨 — 작게, 자간은 더 넓게 */
.title em {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
}

/* 서브페이지 제목도 같은 결로 */
.sub_content .page_title h3 strong {
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* 제목 아래 짧은 선 — 얇고 짧게 두어 제목을 눌러 보이지 않게 */
.sub_content .page_title h3::after {
  width: 3.2rem;
  height: 1px;
  border-radius: 0;
  background: var(--point-color);
}

/* ==========================================================================
   헤더 오른쪽 아이콘 두 개 — 상담 예약 · 로그인
   --------------------------------------------------------------------------
   누를 자리 4rem, 아이콘 1.8rem, 평소 농도 0.2, 올리면 포인트색으로 또렷해집니다.
   좁은 화면에서는 햄버거 단추와 자리를 다투므로 감춥니다.
   ========================================================================== */
#header .hd_util {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  margin-left: 1.6rem;
}

#header .hd_util a,
#header .hd_util .login_btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 4rem;
  height: 4rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

#header .hd_util .icon {
  width: 1.8rem;
  height: 1.8rem;
  stroke: var(--text-color);
  stroke-width: 1.6;
  opacity: 0.2;
  transition: 0.3s;
}

#header .hd_util a:hover .icon,
#header .hd_util a:focus-visible .icon,
#header .hd_util .login_btn:hover .icon,
#header .hd_util .login_btn:focus-visible .icon {
  stroke: var(--point-color);
  opacity: 1;
}

/* 사진 위(메인 첫 화면)에서는 흰 글자에 맞춘다 */
#header.ov:not(.on) .hd_util .icon {
  stroke: var(--white-color);
  opacity: 0.55;
}

#header.ov:not(.on) .hd_util a:hover .icon,
#header.ov:not(.on) .hd_util .login_btn:hover .icon {
  stroke: var(--white-color);
  opacity: 1;
}

@media (max-width: 1024px) {
  #header .hd_util {
    display: none;
  }
}

/* ==========================================================================
   본문 폭 · 헤더 비례 · 로고 크기를 한 벌로
   --------------------------------------------------------------------------
   ① 본문 폭 : 1600px (layout.css 의 1200px 을 덮는다)
   ② 로고 : 서브 · 메인 첫 화면 · 메인 스크롤 후 모두 한 가지 크기(--logo-w x --logo-h).
      원본 비율 180x56 을 지킵니다.
   ③ 배치 : 메인도 스크롤 후에는 서브페이지와 똑같은 줄(로고 왼쪽 · 메뉴 · 아이콘 오른쪽).
      메인 첫 화면(사진 위 세로 쌓기)만 다릅니다.
   ========================================================================== */

:root {
  --inner-size: 1600px;

  /* 로고 상자 — 원본 비율 180x56(3.21) 을 지킨 한 가지 크기 */
  --logo-w: 160px;
  --logo-h: 50px;
}

#header h1 a,
#header.ov:not(.on) h1 a,
#header.ov.on h1 a {
  width: var(--logo-w);
  height: var(--logo-h);
}

@media (min-width: 1025px) {
  /* 스크롤 후 메인 = 서브페이지와 같은 줄.
     컨테이너 밖으로 빼 두었던 로고를 제자리로 돌린다. */
  #header.ov.on h1 {
    position: static;
    transform: none;
  }

  #header.ov.on h1 a {
    width: var(--logo-w);
    height: var(--logo-h);
  }

  #header.ov.on .gnb_container {
    justify-content: flex-end;
  }
}

/* ==========================================================================
   헤더는 거의 화면 폭까지
   --------------------------------------------------------------------------
   본문(1600px)보다 헤더를 더 넓게 씁니다. 로고는 화면 왼쪽 끝,
   메뉴와 아이콘은 오른쪽 끝에 가깝게 붙어 화면을 넓게 쓰는 인상을 줍니다.
   좌우 여백(4.8rem)만 남기고 폭 제한은 두지 않습니다.

   스크롤해도 로고 크기는 그대로입니다 (앞의 --logo-w/--logo-h 한 벌).
   ========================================================================== */
#header .hd_wrap {
  max-width: none;
  padding-left: 4.8rem;
  padding-right: 4.8rem;
}

@media (max-width: 1024px) {
  #header .hd_wrap {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
}

@media (max-width: 768px) {
  #header .hd_wrap {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

/* ==========================================================================
   전통 문양 (SVG)
   --------------------------------------------------------------------------
   _access.pattern.php 가 문양 도형을 한 번만 그려 두고, 각 자리에서
   <svg class="deco 이름"><use href="#pt_lotus" /></svg> 로 꺼내 씁니다.

   쓸 수 있는 문양
     #pt_lotus  연화문  ·  #pt_chrysanth 국화문  ·  #pt_cloud 운문
     #pt_lattice 창살문  ·  #pt_wave 청해파문

   색은 그 자리의 color 를 따라가고(stroke="currentColor"),
   위치와 농도는 각 섹션에서 left/right 와 opacity 로 정합니다.
   좁은 화면에서는 글과 겹치므로 내보내지 않습니다.
   ========================================================================== */
.pattern_sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.deco {
  position: absolute;
  top: 50%;
  z-index: 0;

  width: 60rem;
  height: 60rem;
  transform: translateY(-50%);

  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

/* 문양은 뒤에 깔리고 글이 위에 오도록 */
.default > .w_inner,
.default > .inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .deco {
    display: none;
  }
}

/* ==========================================================================
   드롭다운 모양
   --------------------------------------------------------------------------
   · 글자를 한참 작게 (1.6rem → 1.3rem). 줄 높이와 좌우 여백도 같이 줄여
     칸이 헐렁해 보이지 않게 맞춥니다. 누르는 자리는 3.4rem 을 지킵니다.
   · 모서리를 둥글게. overflow: hidden 이 이미 걸려 있어 첫 · 끝 항목의
     배경도 둥근 모서리를 따라 잘립니다.
   · 메인 첫 화면에서는 메뉴가 사진 한가운데 있어 판이 글자에 바짝 붙습니다.
     그 상태에서만 한 칸(1.2rem) 더 내려 띄웁니다.
   ========================================================================== */
/* 좁은 화면에서는 이 판이 목록으로 바뀌므로(위 반응형 블록) 여기 값이
   따라오면 안 됩니다. 특히 transform 은 판을 반 칸 왼쪽으로 밀어
   메뉴 자리가 어긋납니다. 넓은 화면에서만 적용합니다. */
@media (min-width: 1025px) {
  #header .gnb > ul > li ul {
    border-radius: var(--radius-md, 1.2rem);
    min-width: 14rem;
    box-shadow: 0 1.2rem 3.2rem rgba(51, 48, 44, 0.08);
  }

  #header .gnb > ul > li ul li a {
    min-width: 14rem;
    padding: 0 2rem;
    line-height: 3.4rem;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
  }


  /* 메인 첫 화면(사진 위)에서는 드롭다운을 열지 않습니다.
     메뉴가 사진 한가운데 떠 있어 흰 판이 나오면 사진을 가리고,
     대메뉴를 누르면 그 자리로 바로 내려가므로 하위메뉴가 없어도
     길을 찾는 데 문제가 없습니다.
     (스크롤해서 헤더가 내려온 뒤 .ov.on 상태에서는 그대로 열립니다) */
  #header.ov:not(.on) .gnb > ul > li:hover ul,
  #header.ov:not(.on) .gnb > ul > li:focus-within ul {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* 드롭다운 자리 — 헤더에 붙여 메뉴와 이어져 보이게 1rem 올립니다.
     메인 첫 화면은 위에서 아예 열지 않으므로 자리를 따로 나누지 않습니다.
     (전에는 메인 · 서브가 서로 다른 값을 써서 스크롤 전후로 판이 위아래로
      튀었습니다. 이제 어느 화면에서든 같은 자리에 붙습니다) */
  #header .gnb > ul > li:hover ul,
  #header .gnb > ul > li:focus-within ul {
    transform: translate(-50%, -1rem);
  }
}

/* ==========================================================================
   제목 안의 강조 낱말 — 라벨 크기로 작아지지 않게
   --------------------------------------------------------------------------
   .title em 은 제목 위 작은 영문 라벨용 규칙이라 글자를 라벨 크기로 줄입니다.
   <h2>작은 차이가 <em>완성도</em>를 …</h2> 처럼 제목 안에서 한 낱말을 강조하는
   <em> 에도 그 규칙이 걸려 그 낱말만 작아졌습니다. 제목 안에서는 부모 글자를
   그대로 잇고 색만 포인트색으로 둡니다.
   ========================================================================== */
.title h2 em,
.title h3 em {
  display: inline;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  letter-spacing: inherit;
  text-transform: none;
  color: var(--point-color);
}

/* ==========================================================================
   문의 게시판 글 보기 — 접수 정보 표
   --------------------------------------------------------------------------
   폼메일이 여분 필드(wr_1 ~ wr_10)에 저장한 항목을 본문 위에 표로 보여 줍니다.
   (skin/board/dd__basic/view.skin.php · 항목 이름은 글 본문에서 읽습니다)
   ========================================================================== */
.sub_content .bo_v_form {
  margin: 0 0 3.2rem;
}

.sub_content .bo_v_form h3 {
  margin: 0 0 1.2rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--headline-color);
}

.sub_content .bo_v_form .table {
  width: 100%;
  table-layout: fixed;
  border-top: 1px solid var(--line-strong, var(--line-color));
}

.sub_content .bo_v_form .table th,
.sub_content .bo_v_form .table td {
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--line-color);
  font-size: 1.5rem;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}

.sub_content .bo_v_form .table th {
  width: 14rem;
  background: var(--lightgray-color);
  font-weight: 600;
  color: var(--headline-color);
}

.sub_content .bo_v_form .table td a {
  color: var(--point-color);
}

@media (max-width: 768px) {
  .sub_content .bo_v_form .table th {
    width: 10rem;
  }
}


/* ── 서브 LNB 글자 크기 ─────────────────────────────────────
   좁은 화면의 펼침 목록은 손가락 크기에 맞춰 따로 잡아 두었으므로
   769px 이상에서만 적용합니다. */
@media (min-width: 769px) {
  .sub_title .nav_wrap .sub_nav .lnb ul a { font-size: 1.6rem; }
}


/* ==========================================================================
   본문 표 — page_content 의 class="table" · class="tables"
   --------------------------------------------------------------------------
   표에 공통 모양이 없어 그동안 브라우저 기본(줄도 여백도 없는 상태)으로
   나왔습니다. 페이지에서 따로 꾸며 둔 표(#페이지이름 .xx_table)는 그대로
   두고, 꾸미지 않은 표만 이 한 벌을 입습니다. 아래는 전부 클래스 규칙이라
   페이지의 #ID 규칙이 언제나 이깁니다.

     · 세로줄 없이 가로줄만 — 글이 많은 표에서 눈이 덜 피로합니다
     · 머리줄(thead)은 작은 글씨, 왼쪽 첫 칸(th)은 굵게
     · 좁은 화면에서는 감싸개(.table_responsive · .r_table)가 옆으로 밀립니다

   칸 여백 · 글자 크기만 바꾸시면 표 전체가 함께 따라옵니다.
   ========================================================================== */
.sub_content .content .table,
.sub_content .content .tables {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  border-top: 1px solid var(--headline-color);
}

.sub_content .content .table th,
.sub_content .content .table td,
.sub_content .content .tables th,
.sub_content .content .tables td {
  padding: 1.8rem 1.6rem;
  border-bottom: 1px solid var(--line-color);

  font-size: var(--fs-body, 1.6rem);
  line-height: 1.7;
  text-align: left;
  vertical-align: top;
}

/* 머리줄 — 값보다 한 단계 작고 옅게 */
.sub_content .content .table thead th,
.sub_content .content .tables thead th {
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;

  font-size: var(--fs-sm, 1.4rem);
  font-weight: 600;
  color: var(--muted-color);
}

/* 왼쪽 첫 칸 — 그 줄이 무엇을 말하는지 */
.sub_content .content .table tbody th,
.sub_content .content .tables tbody th {
  font-weight: 700;
  color: var(--headline-color);
}

/* 표 제목(caption) — 가운데로 떠 있어 글줄과 어긋났습니다.
   왼쪽으로 맞추고 표와 조금 띄웁니다. */
.sub_content .content .table caption,
.sub_content .content .tables caption {
  padding-bottom: 0.8rem;

  font-size: var(--fs-sm, 1.4rem);
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
  color: var(--muted-color);
}

/* 표 위아래 여백 — 바로 위 글줄과 붙어 답답해 보였습니다 */
.sub_content .content .table_responsive,
.sub_content .content .r_table {
  margin: 1.6rem 0 2.4rem;
}

/* 개인정보처리방침의 표는 감싸개에 가로 스크롤이 없었습니다 */
.sub_content .content .r_table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .sub_content .content .table th,
  .sub_content .content .table td,
  .sub_content .content .tables th,
  .sub_content .content .tables td {
    padding: 1.4rem 1.2rem;
  }
}


/* ==========================================================================
   게시판 이전글 · 다음글
   --------------------------------------------------------------------------
   목록의 li 에 btn_prv · btn_next 가 붙어 있어 테마의 단추 모양(알약)을
   그대로 물려받습니다. 그래서 두 줄이 딱 붙어 한 덩어리처럼 보였습니다.
   사이를 띄워 두 줄로 읽히게 합니다. 폭은 지금처럼 글 길이에 맞춥니다.
   ========================================================================== */
#content .sub_content .bo_v_nb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}


/* ==========================================================================
   서브 상단 사진 높이
   --------------------------------------------------------------------------
   기본값(base-style.css)은 모든 테마가 30rem 이라 서브 첫 화면이 다 비슷해
   보입니다. 이 테마는 조금 더 크게, 다른 테마와 다르게 잡습니다.
   아래 세 값만 고치시면 됩니다 (넓은 화면 / 태블릿 / 휴대폰).
   ========================================================================== */
.sub_visual {
  min-height: 44rem;
}

@media (max-width: 1024px) {
  .sub_visual {
    min-height: 32rem;
  }
}

@media (max-width: 768px) {
  .sub_visual {
    min-height: 24rem;
  }
}

/* ==========================================================================
   좁은 화면 : 메뉴를 연 동안 헤더를 화면에 못 박는다
   --------------------------------------------------------------------------
   메뉴를 열면 뒤 배경이 움직이지 않도록 body 에 overflow:hidden 이 걸립니다.
   이때 sticky 헤더는 브라우저에 따라 붙어 있기를 그만두어
   스크롤을 내린 상태에서 메뉴를 열면 로고가 화면 위로 사라집니다.
   메뉴가 열려 있는 동안에는 fixed 로 바꿔 확실히 붙여 둡니다.
   (top 값은 테마마다 다르므로 여기서 정하지 않습니다)
   ========================================================================== */
@media (max-width: 1024px) {
  body.nav_open #header {
    position: fixed;
    left: 0;
    right: 0;
  }
}

/* ==========================================================================
   좁은 화면 서브 상단 — 사진 높이와 제목 크기
   --------------------------------------------------------------------------
   rem 으로만 잡아 두면 화면이 길든 짧든 같은 높이라 어떤 기기에서는
   사진이 띠처럼 얇아 보입니다. 화면 높이(dvh)를 기준으로 잡습니다.
   · 이 테마는 48dvh 입니다. 숫자만 바꾸면 높이가 바뀝니다.
   · dvh 를 모르는 구형 브라우저를 위해 vh 로 한 번 더 적습니다.
     (뒤 줄을 못 읽으면 앞 줄이 그대로 쓰입니다)
   · 제목은 4.8rem 입니다. 높이를 바꾸면 제목도 같이 보고 정하세요.
   ========================================================================== */
@media (max-width: 1024px) {
  .sub_visual {
    min-height: 48vh;
    min-height: 48dvh;
  }

  .sub_visual .sv_txt h2 {
    font-size: 4.8rem;
  }
}

/* ==========================================================================
   서브 상단 사진 — 양옆을 띄우고 모서리를 둥글게
   --------------------------------------------------------------------------
   넓은 화면에서는 사진이 화면에 꽉 차지 않고 좌우 여백 안에 놓입니다.
   좁은 화면(1024px 이하)에서는 다시 화면을 꽉 채우고 모서리도 폅니다.
   화면이 좁을수록 여백이 아까워 사진이 답답해 보이기 때문입니다.

   띄우는 폭은 --inner-pad(2.4rem) 입니다. 사진 안쪽 글자는 원래 여백을
   그대로 두어 둥근 모서리에 붙지 않게 했습니다.
   ========================================================================== */
@media (min-width: 1025px) {
  .sub_visual {
    width: calc(100% - var(--inner-pad) * 2);
    margin-left: auto;
    margin-right: auto;
    border-radius: 2.4rem;
  }
}

/* ==========================================================================
   좁은 화면 : 메뉴 호버 끄기
   --------------------------------------------------------------------------
   손가락은 마우스처럼 '떠날' 수가 없어, 한 번 누른 메뉴에 :hover 가 그대로
   남습니다. 그래서 메뉴판을 닫았다 열어도 눌렀던 항목만 색이 달라 보입니다.

   1뎁스는 반응형 규칙이 이미 색을 되돌려 놓고 있어 눈에 띄지 않지만,
   나중에 규칙이 바뀌어도 호버가 살아나지 않도록 함께 눌러 둡니다.
   2뎁스는 실제로 눌린 자국이 남습니다 — 글자가 골드로, 바탕이 베이지로
   바뀐 채 그대로 있습니다. 그 자국을 지웁니다.

   지금 보고 있는 메뉴 표시는 .active · .on 이 따로 맡으므로 비켜 둡니다.
   ========================================================================== */
@media (max-width: 1024px) {
  /* 1뎁스 */
  #header .gnb > ul > li > a:hover:not(.active),
  #header.ov:not(.on) .gnb > ul > li > a:hover:not(.active),
  #header .gnb > ul > li:hover > a:not(.active),
  #header.ov:not(.on) .gnb > ul > li:hover > a:not(.active) {
    color: var(--text-color);
    opacity: 1;
  }

  /* 2뎁스 */
  #header .gnb > ul > li ul li:not(.on) > a:hover {
    color: var(--text-color-sub);
    background: none;
  }
}