@charset "utf-8";/* ----------------------------------------------
LAYOUY.CSS
* writer :uxcamp
* email :master@uxcamp.net
* license :© 2025 uxcamp. All rights reserved.
* version :1.0.0
* last update :2025.06.20
------------------------------------------------*/
/* ------------------------------------------------------------------
setup
------------------------------------------------------------------ */
html, body {margin:0; background:var(--bg-sub); font-size:12px;}
html, body {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;}
a {color:var(--anchor-color); font-size:14px; text-decoration:none; line-height:1.4; transition:all 0.2s ease;}
a:hover {color:var(--anchor-hover); transform:translateY(-1px);}
/* ------------------------------------------------------------------
UI - COMMON
------------------------------------------------------------------ */
/* UI - accessibility
------------------------------------------------*/
#skipToContent {position:relative; z-index:1000; width:100%; overflow:hidden;}
#skipToContent a {display:block; position:fixed; top:0; left:0; width:1px; height:1px; margin:0 -1px -1px 0; overflow:hidden; background:var(--danger-color); color:var(--text-white); font-size:0; text-align:center; line-height:0;}
#skipToContent a:focus {width:100%; height:auto; margin:0; padding:8px 0; font-size:12px; line-height:1;}

/* --------------------------------------------------------
UI - searchPop
----------------------------------------------------------*/
/* searchPop */
.searchPop {visibility:hidden; position:fixed; z-index:9999; top:0; width:100%; height:100%; overflow:hidden; backdrop-filter:blur(0px); transition:backdrop-filter 0.5s ease;}
.searchPop.on {visibility:visible; animation:showPop 0.6s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter:blur(15px);}
.searchPop.on .dim {opacity:1; animation:dimFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);}
.searchPop.on .search {animation:searchSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);}
.searchPop.on .search::before {animation:searchGlow 0.8s ease 0.3s both;}

@keyframes showPop {
	0% {opacity:0; backdrop-filter:blur(0px);}
	100% {opacity:1; backdrop-filter:blur(15px);}
}

@keyframes dimFadeIn {
	0% {opacity:0; transform:scale(1.1);}
	100% {opacity:1; transform:scale(1);}
}

@keyframes searchSlideIn {
	0% {opacity:0; transform:translate3d(0, -100px, 0) scale(0.8) rotateX(15deg);}
	50% {opacity:0.8; transform:translate3d(0, 20px, 0) scale(1.05) rotateX(-5deg);}
	100% {opacity:1; transform:translate3d(0, 0, 0) scale(1) rotateX(0deg);}
}

@keyframes searchGlow {
	0% {box-shadow:0 0 0 0 rgba(var(--prime-color-rgb, 59, 130, 246), 0);}
	50% {box-shadow:0 0 40px 10px rgba(var(--prime-color-rgb, 59, 130, 246), 0.3);}
	100% {box-shadow:0 0 20px 5px rgba(var(--prime-color-rgb, 59, 130, 246), 0.2);}
}

.searchPop.off {animation:hidePop 0.5s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter:blur(0px);}
.searchPop.off .dim {animation:dimFadeOut 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
.searchPop.off .search {animation:searchSlideOut 0.5s cubic-bezier(0.4, 0, 0.2, 1);}

@keyframes hidePop {
	0% {opacity:1; backdrop-filter:blur(15px);}
	100% {opacity:0; backdrop-filter:blur(0px);}
}

@keyframes dimFadeOut {
	0% {opacity:1; transform:scale(1);}
	100% {opacity:0; transform:scale(1.1);}
}

@keyframes searchSlideOut {
	0% {opacity:1; transform:translate3d(0, 0, 0) scale(1) rotateX(0deg);}
	100% {opacity:0; transform:translate3d(0, -100px, 0) scale(0.8) rotateX(15deg);}
}

.searchPop .dim {position:absolute; z-index:1; top:0; width:100%; height:100%; background:linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)); opacity:0; transition:all 0.6s cubic-bezier(0.4, 0, 0.2, 1);}
.searchPop .search {position:relative; z-index:2; width:600px; max-width:90%; margin:0 auto; margin-top:80px; overflow:hidden; border:1px solid var(--border-main); border-radius:8px; background:white; box-shadow:0 4px 20px rgba(0, 0, 0, 0.1); box-sizing:border-box;}
.searchPop .search h2 {display:none;}
.searchPop .search form {position:relative; padding:20px;}
.searchPop .search form input[type=text] {width:100%; height:50px; padding:15px 60px 15px 20px; border:2px solid var(--border-main); border-radius:8px; background:white; box-shadow:none; color:var(--text-primary); font-size:16px; font-weight:400; line-height:1.4; transition:all 0.3s ease;}
.searchPop .search form input[type=text]:focus {border-color:var(--prime-color); outline:none; box-shadow:0 0 0 3px rgba(var(--prime-color-rgb, 59, 130, 246), 0.1);}
.searchPop .search form input[type=text]::placeholder {color:var(--text-tertiary); transition:all 0.3s ease;}
.searchPop .search form input[type=text]:focus::placeholder {color:transparent;}
.searchPop .search form #sch_stx:valid ~ button {background:var(--prime-color); opacity:1; color:white; pointer-events:auto;transform:scale(1);}
.searchPop .search form button {display:flex; justify-content:center; align-items:center; position:absolute; top:25px; right:25px; width:40px; height:40px; border:none; border-radius:6px; background:var(--bg-sub); opacity:0.6; color:var(--text-tertiary); font-size:18px; cursor:pointer; transition:all 0.3s ease;pointer-events:none;transform:scale(0.9);}
.searchPop .search form button:hover {background:var(--prime-color); color:white; transform:scale(1);}

/* 모바일 반응형 */
@media (max-width:768px) {
	.searchPop .search {width:95%; margin-top:40px;}
	.searchPop .search h2 {font-size:16px; padding:15px;}
	.searchPop .search form {padding:20px;}
	.searchPop .search form input[type=text] {height:45px; font-size:15px;}
	.searchPop .search form button {width:35px; height:35px; top:25px; right:25px;}
}

/* ------------------------------------------------------------------
LAYOUT
------------------------------------------------------------------ */
/* drawerNavOn */
html.drawerNavOn,
html.drawerNavOn body {height:100%; overflow:hidden;}
#drawerNav.active {left:0; animation:slideInLeft 0.3s ease;}
#drawerNav.active ~ .drawerDim {visibility:visible; opacity:1; pointer-events:auto;}
.drawerDim {visibility:hidden; position:fixed; z-index:100; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); opacity:0; pointer-events:none;backdrop-filter:blur(10px);transition:all 0.3s ease;}
.drawerDim.active {visibility:visible; opacity:1; pointer-events:auto;}
/* LAYOUT - common
------------------------------------------------*/
.resWidth {width:1280px; margin:0 auto;}
.wrap {animation:fadeIn 0.6s ease;}
/* LAYOUT - pointWrap
------------------------------------------------*/
.pointWrap {display:none; height:40px; border-bottom:1px solid var(--border-main);}
/* LAYOUT - Header
------------------------------------------------*/
.headerWrap {display:flex; justify-content:space-between; align-items:center; height:60px; padding:0 30px; border-bottom:1px solid var(--border-main); background:rgba(255,255,255,0.6); box-sizing:border-box; backdrop-filter:blur(15px);transition:all 0.3s ease;animation:slideDownHeader 0.6s ease; position:relative; z-index:2;}
.headerWrap .staWrap {display:flex; align-items:center; gap:10px;}
.headerWrap .staWrap a {display:flex; align-items:center; color:var(--text-secondary); gap:4px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.headerWrap .staWrap a:hover {color:var(--prime-color); transform:scale(1.05);}
.headerWrap .staWrap a .bx {font-size:28px; transition:transform 0.3s ease;}
.headerWrap .staWrap a:hover .bx {transform:rotate(15deg);}
.headerWrap .staWrap a h1 {font-size:18px; font-weight:700;}
.headerWrap .staWrap #drawerNavOn {display:none; padding:7px; border:1px solid var(--border-main); border-radius:9px; background:var(--bg-main); box-shadow:0px 1px 2px 0px var(--border-main); font-size:18px; cursor:pointer; box-sizing:border-box; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.headerWrap .staWrap #drawerNavOn:hover {background:var(--prime-color); box-shadow:0 4px 12px rgba(0,0,0,0.15); color:white; transform:scale(1.1);}
.headerWrap .tools {display:flex; align-items:center; gap:10px;}
.headerWrap .tools .btnTools {padding:6px; overflow:hidden; border-radius:4px; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.headerWrap .tools .btnTools:hover {background:var(--bg-main); color:var(--prime-color); transform:translateY(-2px) scale(1.05);}
.headerWrap .tools .btnTools i {font-size:22px;}

/* LAYOUT - Container
------------------------------------------------*/
.container {display:flex; box-sizing:border-box; gap:20px; align-items:flex-start; /* animation:fadeInUp 0.8s ease 0.2s both; */}
.container .sideWrap {display:flex; justify-content:space-between; flex-direction:column; width:260px; overflow:hidden; background:var(--bg-sub); gap:20px;order:1; position:sticky; top:0; padding:20px; overflow-x: hidden; overflow-y:auto;}
.container .sideWrap .groupTitle {display:block; margin:0 8px 4px; color:var(--default-color); font-size:14px; font-weight:600;}
.container .sideWrap .widgetGroup {display:flex; flex-direction:column; gap:20px;}
.container .sideWrap .widget {display:flex; flex-direction:column; max-width:240px; gap:10px;animation:slideInLeft 0.6s ease;}
.container .sideWrap .widget:nth-child(2) {animation-delay:0.1s;}
.container .sideWrap .widget:nth-child(3) {animation-delay:0.2s;}
.container .sideWrap .widget:nth-child(4) {animation-delay:0.3s;}
.container .sideWrap .widget h2 {display:block; padding:0 8px; font-size:12px; font-weight:800; text-transform:uppercase; line-height:1.4;}
.container .sideWrap .widget .sidLogo {display:none; align-items:center; color:var(--text-secondary); gap:4px; margin-bottom:10px;}
.container .sideWrap .widget .sidLogo .bx {font-size:28px;}
.container .sideWrap .widget .sidLogo h1 {font-size:18px; font-weight:700;}
.container .sideWrap .widget .sidLogo #drawerNavOff {display:none; padding:5px; border:none; border-radius:50%; background:var(--bg-main); color:var(--text-secondary); font-size:18px; cursor:pointer; transition:all 0.3s ease;}
.container .sideWrap .widget .sidLogo #drawerNavOff:hover {background:var(--danger-color); color:white; transform:scale(1.1);}
.container .sideWrap .widget nav {}
.container .sideWrap .widget nav ul {display:flex; flex-direction:column; margin:0; padding:0; list-style:none; gap:2px;}
.container .sideWrap .widget nav ul > li {display:block; font-size:12px; animation:slideInRight 0.4s ease;animation-fill-mode:both;}
.container .sideWrap .widget nav ul > li:nth-child(1) {animation-delay:0.1s;}
.container .sideWrap .widget nav ul > li:nth-child(2) {animation-delay:0.15s;}
.container .sideWrap .widget nav ul > li:nth-child(3) {animation-delay:0.2s;}
.container .sideWrap .widget nav ul > li:nth-child(4) {animation-delay:0.25s;}
.container .sideWrap .widget nav ul > li:nth-child(5) {animation-delay:0.3s;}
.container .sideWrap .widget nav ul > li > a {display:flex; align-items:center; position:relative; padding:6px 10px; overflow:hidden; border:1px solid transparent; border-radius:8px; font-size:14px; font-weight:600; line-height:1; gap:6px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.container .sideWrap .widget nav ul > li > a::before {content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition:left 0.5s;}
.container .sideWrap .widget nav ul > li > a:hover::before {left:100%;}
.container .sideWrap .widget nav ul > li > a:hover {border:1px solid var(--border-main); background:var(--bg-main); box-shadow:0 4px 12px rgba(0,0,0,0.1); color:var(--prime-color); transform:translateX(8px) scale(1.02);}
.container .sideWrap .widget nav ul > li > a .iconNew {display:flex; align-items:center; padding:2px 3px; border-radius:4px; background:var(--prime-color); color:var(--text-white); font-size:8px; font-weight:800; animation:pulse 2s infinite;}
.container .sideWrap .widget nav ul > li > a.on {border:1px solid var(--border-main); background:var(--bg-main); box-shadow:0px 2px 4px 0px var(--border-main); color:var(--prime-color); box-sizing:border-box; transform:translateX(8px);}
.container .sideWrap .widget nav ul > li > a > i {margin-right:4px; font-style:normal; font-size:20px; transition:transform 0.3s ease;}
.container .sideWrap .widget nav ul > li > a:hover > i {transform:scale(1.2);}
.container .sideWrap .widget nav ul > li > ul {padding:6px 0; gap:0;}
.container .sideWrap .widget nav ul > li > ul > li {display:flex; align-items:center; gap:14px;}
.container .sideWrap .widget nav ul > li > ul > li::before {content:''; display:block; width:1px; height:29px; margin:0 0px 0 20px; background:var(--border-main);}
.container .sideWrap .widget nav ul > li > ul > li > a {display:flex; align-items:center; width:100%; border-radius:6px; font-size:14px; font-weight:600; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.container .sideWrap .widget nav ul > li > ul > li > a:hover {background:var(--bg-third); color:var(--prime-color); transform:translateX(5px);}
.container .sideWrap .widget nav ul > li > ul > li > a.active {background:var(--bg-third); box-shadow:inset 1px 1px 1px 0px var(--border-main); color:var(--prime-color); transform:translateX(5px);}
/* .container .sideWrap .widget nav ul > li > ul > li > a.active:before {content:''; display:block; width:4px; height:4px; border-radius:50%; background:var(--prime-color);}
 */
.container .sideWrap .widget nav ul > li > ul > li > a.active .iconNew {background:var(--bg-main); color:var(--prime-color);}
/*  */
.container .contentWrap {width:calc(100% - 320px); order:2; padding:20px; /*animation:fadeInUp 0.8s ease 0.3s both;*/}
.container .widgetWrap ~ .contentWrap {width:calc(100% - 600px);}
.container .contentWrap .contentBox {}
.container .contentWrap .boardTitle {display:flex; justify-content:space-between; align-items:center; position:relative; margin-bottom:30px; padding-bottom:20px; border-bottom:1px solid var(--border-sub);}
.container .contentWrap .boardTitle::after {content:''; position:absolute; left:0; bottom:-1px; width:0; height:2px; background:var(--prime-color); animation:growWidth 1s ease 0.5s both;}
.container .contentWrap .boardTitle .title {display:flex; align-items:center; gap:8px;}
.container .contentWrap .boardTitle .title h2 {font-size:24px; font-weight:600; animation:slideInUp 0.6s ease 0.4s both;}
.container .contentWrap .boardTitle .breadcrumbs {display:flex; margin:0 20px; animation:slideInRight 0.6s ease 0.6s both;}
.container .contentWrap .boardTitle .breadcrumbs li {display:flex; align-items:center; color:var(--text-secondary); font-size:13px; transition:all 0.3s ease;}
.container .contentWrap .boardTitle .breadcrumbs li:hover {color:var(--prime-color); transform:scale(1.05);}
.container .contentWrap .boardTitle .breadcrumbs li::before {content:"\ea50"; color:var(--text-quaternary); font-size:20px; font-family:boxicons!important;}
.container .contentWrap .boardTitle .breadcrumbs li:first-child::before {display:none;}
/*  */
.container .widgetWrap {display:flex; flex-direction:column; width:300px; order:3;gap:20px;animation:slideInRight 0.8s ease 0.4s both; position:sticky; top:0; padding:20px;}
/* LAYOUT - Footer
------------------------------------------------*/
.footerWrap {animation:fadeInUp 1s ease 0.8s both;}
.footerWrap .footerGroup {display:flex; justify-content:space-between; align-items:center; padding:20px 30px; border-top:1px solid var(--border-main); transition:all 0.3s ease;}
.footerWrap .footerGroup:hover {background:var(--bg-main);}
.footerWrap .footerGroup:first-child {background:var(--bg-main);}
.footerWrap .footerGroup .footerLogo {display:flex; align-items:center; color:var(--text-tertiary); gap:6px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.footerWrap .footerGroup .footerLogo:hover {color:var(--prime-color); transform:scale(1.05);}
.footerWrap .footerGroup .footerLogo i {font-size:24px; transition:transform 0.3s ease;}
.footerWrap .footerGroup .footerLogo:hover i {transform:rotate(180deg);}
.footerWrap .footerGroup .footerLogo h1 {font-size:16px; font-weight:600;}
.footerWrap .footerGroup .footerMenu {display:flex; align-items:center; list-style:none;}
.footerWrap .footerGroup .footerMenu a {display:flex; align-items:center; position:relative; padding:10px; border-radius:6px; font-weight:600; gap:4px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.footerWrap .footerGroup .footerMenu a::before {content:''; position:absolute; left:50%; bottom:0; width:0; height:2px; background:var(--prime-color); transition:all 0.3s ease;transform:translateX(-50%);}
.footerWrap .footerGroup .footerMenu a:hover::before {width:80%;}
.footerWrap .footerGroup .footerMenu a:hover {color:var(--prime-color); transform:translateY(-3px) scale(1.05);}
.footerWrap .footerGroup .footerMenu a .bx {font-size:20px;}
/* 맨 위로 가기 버튼 */
.scrollToTop {visibility:hidden; position:fixed; z-index:1000; right:30px; bottom:180px; width:50px; height:50px; border:none; border-radius:50%; background:var(--prime-color); opacity:0; box-shadow:0 4px 12px rgba(0,0,0,0.15); color:white; font-size:30px; cursor:pointer; transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);transform:translateY(20px) scale(0.8);}
.scrollToTop.visible {visibility:visible; opacity:1; transform:translateY(0) scale(1);}
.scrollToTop:hover {background:linear-gradient(45deg, var(--prime-color), var(--warning-color)); box-shadow:0 8px 20px rgba(0,0,0,0.25); transform:translateY(-5px) scale(1.1);}
.scrollToTop i {animation:bounceUp 2s infinite;}
/* 스크롤바 스타일링 */
::-webkit-scrollbar {width:8px;}
::-webkit-scrollbar-track {background:var(--bg-sub);}
::-webkit-scrollbar-thumb {border-radius:4px; background:var(--border-main); transition:all 0.3s ease;}
::-webkit-scrollbar-thumb:hover {background:var(--prime-color);}
/* ------------------------------------------------------------------
ANIMATIONS
------------------------------------------------------------------ */
@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}
@keyframes fadeInUp {
    from {opacity:0; transform:translateY(30px);}
    to {opacity:1; transform:translateY(0);}
}
@keyframes fadeInDown {
    from {opacity:0; transform:translateY(-30px);}
    to {opacity:1; transform:translateY(0);}
}
@keyframes slideInLeft {
    from {opacity:0; transform:translateX(-30px);}
    to {opacity:1; transform:translateX(0);}
}
@keyframes slideInRight {
    from {opacity:0; transform:translateX(30px);}
    to {opacity:1; transform:translateX(0);}
}
@keyframes slideInUp {
    from {opacity:0; transform:translateY(20px);}
    to {opacity:1; transform:translateY(0);}
}
@keyframes slideDownHeader {
    from {opacity:0; transform:translateY(-60px);}
    to {opacity:1; transform:translateY(0);}
}
@keyframes growWidth {
    from {width:0;}
    to {width:60px;}
}
@keyframes pulse {
    0%, 100% {opacity:1; transform:scale(1);}
    50% {opacity:0.8; transform:scale(1.1);}
}
@keyframes bounceUp {
    0%, 20%, 50%, 80%, 100% {transform:translateY(0);}
    40% {transform:translateY(-4px);}
    60% {transform:translateY(-2px);}
}
@keyframes shimmer {
    0% {background-position:-200px 0;}
    100% {background-position:calc(200px + 100%) 0;}
}
@keyframes floating {
    0%, 100% {transform:translateY(0px);}
    50% {transform:translateY(-6px);}
}
/* 특별한 애니메이션 클래스 */
.animate-float {animation:floating 3s ease-in-out infinite;}
.animate-shimmer {background:linear-gradient(90deg, var(--bg-main) 0px, var(--bg-sub) 40px, var(--bg-main) 80px); background-size:200px; animation:shimmer 1.5s infinite;}
/* hover시 특별 효과 */
.special-hover {transition:all 0.3s ease;}
.special-hover:hover {box-shadow:0 10px 30px rgba(0,0,0,0.2); transform:perspective(1000px) rotateX(10deg) rotateY(5deg);}
/* --------------------------------------------------------
RESPONSE
----------------------------------------------------------*/
@media (max-width:1440px) {
.container .widgetWrap {display:none;}
.container .contentWrap {width:calc(100% - 320px) !important;}
}
@media (max-width:1280px) {
.headerWrap .staWrap #drawerNavOn {display:block;}
.container .sideWrap {position:fixed; top:0; left:-280px; bottom:0; z-index:101; background:rgba(255,255,255,0.95); transition:all .3s cubic-bezier(.7,0,.3,1);transform:all .3s cubic-bezier(.7,0,.3,1);backdrop-filter:blur(10px);-webkit-transition:all .3s cubic-bezier(.7,0,.3,1);}
.container .sideWrap .widget {padding:20px; box-sizing:border-box;}
.container .sideWrap .widget .sidLogo {display:flex;}
.container .sideWrap.active {left:0;}
.container .contentWrap {width:calc(100% - 0px) !important;}
}
@media (max-width:1024px) {
    .headerWrap {padding:0 20px;}
    .container {padding:20px; gap:40px;}
    .footerWrap .footerGroup {padding:15px 20px;}
    /* 모바일에서 애니메이션 성능 최적화 */
    * {animation-duration:0.3s !important;}
}
@media (max-width:768px) {
    .container {padding:15px; gap:20px;}
    .container .contentWrap .boardTitle {align-items:flex-start; flex-direction:column; gap:10px;}
    .container .contentWrap .boardTitle .breadcrumbs {margin:0;}
    .footerWrap .footerGroup {flex-direction:column; text-align:center; gap:10px;}
 /* 모바일에서 과도한 애니메이션 비활성화 */
    .container .sideWrap .widget nav ul > li > a:hover {transform:none;}
    .scrollToTop {right:20px; bottom:20px; width:45px; height:45px;}
}