/* ========== Sub Page Common CSS ========== */

/* ===== 기존 사이트 스타일 직접 수정 { ===== */
.subSkin h2, #lnb h2, .tit_area .title, h2.title { font-family: 'Paperlogy'; }
.subSkin h2 { font-size: 46px; }
.tit_area .title { font-size: 32px; }
.sideBtnWrap { bottom: auto; top: 50%; transform: translateY(-50%); }
.sideBtns .botBtTop { width: 3.8rem; height: 3.8rem; }
.sideBtnWrap a { width: 3.8rem; height: 3.8rem; font-size: 10px; background-position: top 0.28rem center; background-size: 1.2rem; padding-top: 1.65rem; }
.botBtTop { padding-top: 0; width: 3.8rem; height: 3.8rem; font-size: 0; background-position: center center; background-size: 16px; }
/* ===== } 기존 사이트 스타일 직접 수정 ===== */

/* ===== 웹접근성 보완 작업 { ===== */
.listTypeB, .listTypeC { overflow: visible; }

.listTypeB ul li a:focus,
.listTypeC ul li a:focus-visible { border: none !important; }

.listTypeB ul li a:focus-visible,
.listTypeB ul li a:focus-visible > *,
.listTypeC ul li a:focus-visible, 
.listTypeC ul li a:focus-visible > * { outline: 2px solid #000 !important; outline-offset: -2px !important; }

.listTypeD.listEdit > ul > li a { display: inline-block; }
/* ===== } 웹접근성 보완 작업 ===== */

.btnSns .re-share-btn { position: relative; }
.etcBtn .btnSns span a { background-size: contain; }
.btnSns .re-share-btn:hover, .btnSns .re-share-btn:focus-within { z-index: 10; }
.btnSns .re-share-btn.facebook a { background-image: url('../img/sns-facebook.svg'); }
.btnSns .re-share-btn.twitter-x a { background-image: url('../img/sns-x.svg'); }
.btnSns .re-share-btn.instagram a { background-image: url('../img/sns-instagram.svg'); }
.btnSns .re-share-btn.kakao a { background-image: url('../img/sns-kakao.svg'); }
.btnSns .re-share-btn.blog a { background-image: url('../img/sns-blog.svg'); }
.btnSns .re-share-btn.link a { background-image: url('../img/sns-link.svg'); }
.btnSns .re-share-btn.print a { background-image: url('../img/sns-print.svg'); }

.re-form-choice-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-left: auto; width: fit-content; padding: 0; list-style: none; }
.re-form-choice-item { position: relative; }
/* 네이티브 input은 커스텀 컨트롤(::before)과 같은 위치에 두고 투명 처리 → 포커스가 같은 자리에서 잡힘 */
.re-form-choice-item input[type=radio], .re-form-choice-item input[type=checkbox] { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 23px; height: 23px; margin: 0; padding: 0; border: none; appearance: none; -webkit-appearance: none; opacity: 0; z-index: 1; cursor: pointer; outline: none; }
.re-form-choice-item label { position: relative; display: inline-block; font-weight: 400; font-size: 17px; line-height: 23px; padding-left: 29px; cursor: pointer; }
.re-form-choice-item label::before { content: ''; box-sizing: border-box; width: 23px; aspect-ratio: 1/1; border: 1px solid #D9D9D9; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background-color: #fff; }
.re-form-choice-item label::after { box-sizing: border-box; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; }
.re-form-choice-item input:checked + label::after { opacity: 1; }
.re-form-choice-item input:focus + label::before,
.re-form-choice-item input:focus-visible + label::before { outline: 3px dotted #000000; }
/* radio — 홀수(23/13)로 도트 중앙 정렬 */
.re-form-choice-item input[type=radio] + label::before { border-radius: 50%; }
.re-form-choice-item input[type=radio] + label::after { content: ''; width: 13px; aspect-ratio: 1/1; border-radius: 50%; left: 5px; background-color: #2E6CD0; }
.re-form-choice-item input[type=radio]:checked + label::before { border: 2px solid #2E6CD0; }
/* checkbox */
.re-form-choice-item input[type=checkbox] + label::before { border-radius: 2px; overflow: hidden; }
.re-form-choice-item input[type=checkbox] + label::after { content: "\eb7a"; font-family: "remixicon"; font-size: 17px; line-height: 1; color: #fff; left: 3px; pointer-events: none; }
.re-form-choice-item input[type=checkbox]:checked + label::before { border-color: #2E6CD0; background-color: #2E6CD0; }



/* ====================  반응형 ==================== */
@media screen and (max-width:1720px) {
  .sideBtnWrap { bottom: 1rem; top: auto; transform: none; }
}
@media screen and (max-width:1440px) {
}
@media screen and (max-width:1024px) {
  .re-form-choice-item label { font-size: 16px; }
}
@media screen and (max-width:768px) {
  .re-form-choice-item input[type=radio],
  .re-form-choice-item input[type=checkbox] { width: 17px; height: 17px; }
  .re-form-choice-item label { font-size: 14px; line-height: 17px; padding-left: 23px; }
  .re-form-choice-item label::before { width: 17px; }
  .re-form-choice-item input[type=radio] + label::after { width: 9px; left: 4px; }
  .re-form-choice-item input[type=checkbox] + label::after { font-size: 13px; left: 2px; }
}
@media screen and (max-width:425px) {
  .re-form-choice-item label { font-size: 13px; }
}