@charset "utf-8";

:root {
	--maxWidth: 150rem;
	--inPd: 5rem;
    --font-Pretendard: "Pretendard", sans-serif;
    --font-Isamanru: "Isamanru";
    --font-Outfit: "Outfit", sans-serif;
    --brown : #CDB083;
    --header-h: 100px;
}


html {font-size: 62.5%;} /* 1rem = 10px */
body {font-family: var(--font-Pretendard);font-size: max(1.80rem, 17px);line-height: 1.4;word-break: keep-all;word-wrap: break-word;color:#000;touch-action: auto;overscroll-behavior: auto;text-size-adjust:100%;scroll-behavior: smooth;}
.cinner {max-width: var(--maxWidth);padding: 0 var(--inPd);margin: 0 auto;}

@media (max-width: 1024px){
	:root {
		--inPd: 3rem;
		--header-h: 80px;
	}
    html {font-size: 56.25%;} /* 1rem = 9px */
}
@media (max-width: 768px){
	:root {
		--inPd: 20px;
	}
    html {font-size: 43.75%;} /* 1rem = 7px */
}
@media (max-width: 480px){
	:root {
		--header-h: 70px;
	}
    html {font-size: 37.5%;} /* 1rem = 6px */
}

/* ===========================
   Header 
   =========================== */
#header {height: var(--header-h);border-bottom: 1px solid #eee;box-sizing: border-box;}
#header .cinner {display: flex;justify-content: flex-end;align-items: center;width: 100%;height: 100%;position: relative;}
.header__logo {position: absolute;top: 0;left: var(--inPd);bottom: 0;margin: auto;}
.header__logo a {display: flex;align-items: center;width: 100%;height: 100%;}
#header .nav {display: flex;align-items: center;gap: 80px;height: 100%;}
#main-nav {height: 100%;}
.main-nav__depth1 {height: 100%;}
.main-nav__depth1 .mn-ul1 {display: flex;align-items: center;gap: 100px;height: 100%;}
.main-nav__depth1 .mn-li1 {display: flex;align-items: center;height: 100%;position: relative;}
.main-nav__depth1 .mn-a1 {height: 100%;font-size: 2.0rem;line-height: var(--header-h);transition: color 0.2s;cursor: pointer;}
.main-nav__depth1 .mn-li1:hover .mn-a1,
.main-nav__depth1 .mn-li1.active .mn-a1 {color: var(--brown);}
.main-nav__depth2 {display: none;min-width: 145px;padding: 1rem 0;border: 1px solid #eee;border-top: 2px solid #CDB083;box-sizing: border-box;background: #fff;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);position: absolute;top: var(--header-h);left: 50%;transform: translateX(-50%);z-index: 600;}
.main-nav__depth1 .mn-li1:hover > .main-nav__depth2 {display: block;}
.main-nav__depth2 .mn-a2 {display: block;width: 100%;padding: 10px 2.2rem;box-sizing: border-box;font-size: max(1.70rem, 17px);transition: color 0.15s, padding-left 0.15s;}
.main-nav__depth2 .mn-a2:hover {color: var(--brown);}
.main-nav__depth2 .mn-a2:hover,
.main-nav__depth2 .mn-a2.active {padding-left: 3.0rem;color: var(--brown);background: #fdfcfa;}
.nav__btn {display: flex;flex-direction: column;justify-content: space-between;align-items: center;width: 25px;aspect-ratio: 25 / 19;background: none;border: none;cursor: pointer;}
.nav__btn span {display: block;width: 100%;height: 3px;background: #222;transition: all 0.3s;transform-origin: center;}
.nav__btn.is-open span:nth-child(1) {transform: translateY(8px) rotate(45deg);}
.nav__btn.is-open span:nth-child(2) { opacity: 0; }
.nav__btn.is-open span:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}

@media (max-width: 1400px){
    .main-nav__depth1 .mn-ul1 {gap: 80px;}
}
@media (max-width: 1200px){
    #header .nav {gap: 40px;}
    .main-nav__depth1 .mn-ul1 {gap: 60px;}
}
@media (max-width: 1024px){
    #main-nav {display: none;}
    .header__logo img {max-width: 85%;}
}
@media (max-width: 480px){
    .header__logo img {max-width: 75%;}
}



/* ======================
   SIDEBAR
   ====================== */
#sidebar {max-width: 450px;width: 100%;height: 100%;box-sizing: border-box;background: #fff;position: fixed;top: 0;right: 0;transform: translateX(100%);z-index: 9999;transition: .35s;visibility: hidden;opacity: 0;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);}
#sidebar.open {transform: translateX(0);visibility: visible;opacity: 1;}
.sidebar__header {display: flex;justify-content: flex-end;align-items: center;padding: 36px 24px;box-sizing: border-box;width: 100%;}
.sidebar__header > .sidebar-btn_close {display: block;width: 24px;aspect-ratio: 4 / 3;border: 0;background: no-repeat;position: relative;}
.sidebar__header > .sidebar-btn_close::before,
.sidebar__header > .sidebar-btn_close::after {content: '';display: block;width: 100%;height: 2px;background: #000;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
.sidebar__header > .sidebar-btn_close::before {transform: rotate(45deg);}
.sidebar__header > .sidebar-btn_close::after {transform: rotate(-45deg);}
.sidebar__cont {max-height: 92%;max-height: calc(100vh - 120px);height: 100vh;margin: 0 24px;box-sizing: border-box;overflow-y: scroll;}
.sidebar__cont::-webkit-scrollbar {width: 4px;}
.sidebar__cont::-webkit-scrollbar-thumb {background-color: #bfbfbf;border-radius: 2px;}
.sidebar__cont::-webkit-scrollbar-track {background-color: transparent;}
.sidebar__menu_depth1 .mn-ul1 {display: flex;flex-direction: column;}
.sidebar__menu_depth1 .mn-li1 {border-bottom: 1px solid #ececec;position: relative;}
.sidebar__menu_depth1 .mn-li1.active .sidebar__menu_depth2 {margin-bottom: 15px;}
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2) >.toggle-arrow {width: 18px;aspect-ratio: 1 / 1;position: absolute;top: 30px;right: 0;transform: translateY(-50%);cursor: pointer;}
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2) >.toggle-arrow::before,
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2) >.toggle-arrow::after {content: '';width: 100%;height: 2px;background: #111;position: absolute;inset: 0;margin: auto;transition: transform 0.3s ease-in-out;}
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2) >.toggle-arrow::after {transform: rotate(90deg);}
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2).open > .toggle-arrow::after {transform: rotate(0);}
.sidebar__menu_depth1 .mn-a1 {display: block;width: 100%;padding: 20px 0;font-size: max(1.80rem, 18px);font-weight: 500;transition: color .2s;cursor: pointer}
.sidebar__menu_depth1 .mn-a1:hover,
.sidebar__menu_depth1 .mn-li1.active {color: var(--brown);}
.sidebar__menu_depth2 {max-height: 0;overflow: hidden;transition: max-height 0.3s ease-in-out;padding: 0 1.50rem;box-sizing: border-box;}
.sidebar__menu_depth2 .mn-ul2 {display: flex;flex-direction: column;/* padding: 15px 0; */}
.sidebar__menu_depth2 .mn-li2 {position: relative;}
.sidebar__menu_depth2 .mn-li2:last-child {border-bottom: 0;}
.sidebar__menu_depth2 .mn-a2 {display: block;padding: 14px 0;color: #6f6f6f;font-size: max(1.70rem, 17px);position: relative;transition: .35s ease;}
.sidebar__menu_depth2 .mn-s2 {position: relative;}
.sidebar__menu_depth2 .mn-s2::before {content: '';display: block;width: 6px;aspect-ratio: 1 / 1;border-top: 2px solid var(--brown);border-right: 2px solid var(--brown);position: absolute;top: 50%;left: 0;transform: rotate(45deg) translate(-45%, -45%);opacity: 0;visibility: hidden;transition: .2s;}
.sidebar__menu_depth2 .mn-a2:hover,
.sidebar__menu_depth2 .mn-a2.sub-active {color: var(--brown);}
.sidebar__menu_depth2 .mn-a2.sub-active .mn-s2 {padding-left: 1.50rem;}
.sidebar__menu_depth2 .mn-a2.sub-active .mn-s2::before {opacity: 1;visibility: visible;}
#sidebar__dim {width: 100%;height: 100%;background: rgba(0,0,0,0.5);opacity: 0;visibility: hidden;position: fixed;top: 0;left: 0;z-index: 999;transition: 0.3s;}
#sidebar__dim.show {opacity: 1;visibility: visible;}



/* ======================
   FOOTER
   ====================== */
#footer {padding: 6.0rem 0 11.0rem;background: #3D3D3D;color: #fff;font-size: max(1.6rem, 14px);}
.footer__info {display: flex;flex-wrap: wrap;gap: 5px 15px;max-width: 742px;margin-bottom: 18px;}

@media (max-width: 768px){
	.footer__info {max-width: 723px;}
}
@media (max-width: 640px){
	.footer__info {gap: 5px 10px;}
}

#footer .btn-top {display: flex;align-items: center;justify-content: center;width: 60px;aspect-ratio: 1 / 1;border-radius: 50%;background: #161616;color: #fff;font-size: 14px;font-weight: 500;opacity: .5;position: fixed;bottom: -100%;right: 20px;transition: bottom .6s;z-index: 20;}
#footer .btn-top span:before {content: '';display: block;border: 1px solid #fff;border-right: 0;border-bottom: 0;box-sizing: border-box;width: 10px;height: 10px;margin: 0 auto;transform: rotate(45deg);}
#footer .btn-top.over {bottom: 20px;}
#footer .btn-top:hover,
#footer .btn-top:focus {opacity: .8;}



/* ======================
   SUB PAGE
   ====================== */
.sub_page {padding: 10rem 0 15rem;}
.page__intro {margin-bottom: 12rem;text-align: center;}
.page__intro .page__title {font-family: var(--font-Isamanru);font-size: 4.50rem;font-weight: 500;}
.page__intro .page__title-sub {color: var(--brown);font-family: var(--font-Outfit);font-weight: 600;}
.page__intro .page__desc {color: #181818;}


/* ======================
   SUB PAGE - 검색 폼
   ====================== */
.works-search {display: flex;justify-content: center;align-items: center;gap: 8px;margin-bottom: 30px;}
.works-search__input {flex: 1;min-width: 200px;max-width: 480px;height: 44px;padding: 0 16px;border: 1px solid #ddd;box-sizing: border-box;border-radius: 4px;font-size: max(1.4rem, 14px);outline: none;transition: border-color 0.2s;}
.works-search__input:focus {border-color: var(--brown);}
.works-search__btn {height: 44px;padding: 0 24px;background: var(--brown);color: #fff;border: none;border-radius: 4px;font-size: max(1.4rem, 14px);font-weight: 500;cursor: pointer;transition: background 0.2s;}
.works-search__btn:hover { background: #b8966e; }
.works-search__reset {height: 44px;padding: 0 14px;border: 1px solid #ddd;box-sizing: border-box;border-radius: 4px;color: #999;font-size: max(1.4rem, 14px);line-height: 44px;transition: color 0.2s, border-color 0.2s;}
.works-search__reset:hover { color: #e74c3c; border-color: #e74c3c; }
.works-search__desc {margin-bottom: 12px;color: #555;font-size: max(1.4rem, 14px)}

@media (max-width: 640px) {
    .works-search__input {max-width: 100%; width: 100%;}
}


/* ======================
   SUB PAGE - 게시판 Pagination
   ====================== */
.pagination {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 4px;margin-top: 10rem;}
.pagination__btn {display: inline-flex;justify-content: center;align-items: center;min-width: 32px;aspect-ratio: 1 / 1;padding: 0 5px;border: 1px solid #ddd;box-sizing: border-box;border-radius: 4px;background: #fff;color: #666;font-size: max(1rem, 10px);transition: all 0.15s ease;}
.pagination__btn:hover {color: var(--brown);border-color: var(--brown);}
.pagination__btn--active {border-color: var(--brown);background: var(--brown);color: #fff;font-weight: 600;}
.pagination__btn--disabled {color: #ccc;pointer-events: none;}