@charset "UTF-8";

:root{
  --inner-width : 1400px;
  --spacer: 1rem;

  --body-color : #F5F3EC;

  --gray-100: #F8F9FA; /* 가장 밝은 회색 (배경용) */
  --gray-200: #E9ECEF; /* 아주 연한 회색 (카드, 구분선용) */
  --gray-300: #DEE2E6; /* 연한 회색 (테두리, 테두리 강조용) */
  --gray-400: #CED4DA; /* 비활성화 요소, 연한 아이콘 */
  --gray-500: #ADB5BD; /* 중간 회색 (플레이스홀더, 서브 텍스트) */
  --gray-600: #6C757D; /* 차분한 본문 보조 텍스트 */
  --gray-700: #495057; /* 짙은 회색 (가독성 높은 본문 텍스트) */
  --gray-800: #343A40; /* 아주 짙은 회색 (제목, 강조 텍스트) */
  --gray-900: #212529; /* 다크 모드 배경, 거의 검은색 텍스트 */


  --primary : #1D4533;
  --primary-subtle: #E8F3E6;
  --secondary : #999;
  --secondary-subtle: #EBEBEB;
  --danger: #D64545;
  --danger-subtle: #FBEAEA;
  --success: #2B6CB0;
  --success-subtle: #E6F0F9;
  --warning: #B8860B;
  --warning-subtle: #FBF3E2;
  --dark : #333;
  --dark-subtle: #E7E7E6;
  --tan: #8A6D4E;
  --tan-subtle: #F4EEE4;
  --info: #3E8FB0;
  --info-subtle: #E3F1F5;

  --primary-rgb: 29, 69, 51;

  --primary-bg: #F4F8F5;

  --border-color: #e0e0e0;

  --text-strong: #333;
  --text-base: #555;
  --text-muted: #777;
  --text-faint: #999;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 6px rgba(0, 0, 0, 0.08);

  --header-height : 80px;

  --nanum : "Nanum Myeongjo", serif;
}
html.fs-16{font-size: 16px; }
html.fs-18{font-size: 18px; }
html.fs-20{font-size: 20px; }
body{background: var(--body-color); }

#header{background: var(--primary); color: #fff; }
#header .content_box{max-width: 100%; padding: 20px; display: flex; justify-content: space-between; align-items: center;; }
#header .logo{line-height: 1;}
#header .logo h6{font-size: 1.25rem; margin-bottom: 4px; }
#header .logo span{font-weight: normal; font-size: 0.8125rem;}

.util_box .logout_btn_box a {color: var(--gray-400); font-size: 16px; background: rgba(255,255,255,.15); }
.util_box .logout_btn_box a::before {content: ""; display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") no-repeat center / contain; }

.content_box{max-width: var(--inner-width); margin: 0 auto; padding: 0 20px;}

#main{padding: 60px 0; }
#main .content_box{display: flex; gap: 40px; }

#snb{position: sticky; top: 20px; left: 0; width: 200px; flex-shrink: 0; align-self: flex-start}
#snb .reserve_search_box{background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 20px;}
#snb .reserve_search_box h6{margin-bottom: 12px; font-weight: normal;}
#nav li a{padding: 8px 12px; border-radius: 8px; font-weight: bold; color: var(--secondary)}
#nav .dep_1.active{background: var(--primary-subtle); color: var(--primary); border-radius: 12px; }
#nav .dep_1>a:hover{color: var(--dark); }
#nav .dep_1.active>a{color: var(--primary); }
#nav.admin .dep_1>a{color: var(--dark)}
#nav .dep_2{text-indent: 12px}
#nav .dep_2 a{font-size: 16px; font-weight: normal;}
#nav .dep_2 a:hover{font-weight: bold; color: var(--dark);}
#nav .dep_2 a.active{color: var(--primary); font-weight: bold;}

.util_box{display: flex; align-items: center; gap: 20px; }
.util_box .menu_btn{width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }

.fixed_menu_wrap{position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(0,0,0,.5); overflow: hidden; visibility: hidden; opacity: 0; z-index: -1;}
.fixed_menu_wrap.on{ z-index: 999; opacity: 1; visibility: visible; }
.fixed_menu_wrap .content_box{display: flex; justify-content: flex-end; height: 100%; padding: 0; margin: 0; width: 100%; max-width: none; }
.fixed_menu{height: 100%; background: var(--tan-subtle);width: 100%; max-width: 500px; overflow: auto; scroll-behavior: contain;  transform: translateX(100%); transition: all .2s; }
.fixed_menu_wrap.on .fixed_menu{transform: translateX(0); }
.fixed_menu::-webkit-scrollbar{display: none; }
.fixed_menu .top_box{padding: 20px; display: flex; justify-content: space-between; align-items: center; background: var(--primary); color: #fff; }
.fixed_menu .profile_box{padding: 20px; border-bottom: 1px solid var(--border-color); }
.fixed_menu .profile_box .img_box{width: 75px; height: 75px; border-radius: 50%; border: 1px solid var(--border-color); overflow: hidden; }
.fixed_menu .profile_box .img_box img{width: 100%; height: 100%; object-fit: cover; }
.fixed_menu .profile_box .desc{display: flex; gap: 20px; margin-bottom: 12px; align-items: center; }
.fixed_menu .profile_box .btn_box a{flex: 1; }
.fixed_menu #nav{width: 100%;  padding: 20px; }


#container{width: 100%; }

#fixed_btn_box{position: fixed; bottom: 20px; right: 20px; z-index: 99;; display: grid; gap: 8px; }
#fixed_btn_box a{width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); background: #fff; flex-direction: column; font-size: 14px; gap: 4px; }
#fixed_btn_box .top_btn{background: var(--primary-subtle)}
#fixed_btn_box a span{color: #999; }

/* daum map 지도 */
.post_wrap{}
.post_wrap>*{border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; margin-top: 4px !important;}


/* popup */
#popup{position: fixed; top: 0; left: 0; margin: 40px; background: #f9f9f9; width: 100%; max-width: 500px; z-index: 10; box-shadow: var(--shadow); border-radius: 16px; display: none; max-height: 90dvh; overflow: hidden; }
#popup.show{display: block; }
#popup .content_box{overflow: hidden; border-radius: 16px; padding: 0; height: 100%; }
#popup .img_box{flex: 1; }
#popup .img_box img{width: 100%; height: auto; }
#popup .btn_box{justify-content: space-between; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; background: #fff; }
#popup .btn_box a{padding: 8px 12px; font-size: 14px; color: #555; }


@media (width <= 1024px) {
  #main{padding-top: 30px; }
  #main .content_box{flex-direction: column; gap: 0; }

  #snb{width: 100%; background: var(--body-color); top: 0; padding: 8px 0; z-index: 1; margin-bottom: 20px;}
  #nav{overflow: auto; width: 100%; }
  #nav::-webkit-scrollbar{display: none; }
  #snb{display: none; }

  #fixed_btn_box{bottom: 16px; right: 16px; }
  #fixed_btn_box a{width: 40px; height: 40px; border-radius: 8px; }
  #fixed_btn_box a span{display: none}

}

@media (width <= 768px) {
  .util_box .name,
  .util_box .logout_btn_box{display: none}


  #popup{margin: 0; height: 100dvh; display: flex; align-items: flex-end; background:rgba(0,0,0,.5); border-radius: 0; max-height: 100dvh; }
  #popup .content_box{background: #fff; padding: 0; border-radius: 20px 20px 0 0 ;}

}