@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
/* Original file: files/cache/assets/compiled/f901bd531df05a712260b0c2277c4773d894cef3.rhymix.scss.min.css */

body,table,input,textarea,select,button{font-family:sans-serif;font-size:12px}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}body{position:relative}body.rx_modal_open{overflow:hidden;position:fixed}a img{border:0}[hidden]{display:none}.xe_content,.rhymix_content{font-family:나눔고딕, NanumGothic, Malgun Gothic, sans-serif;font-size:16px;line-height:160%;word-break:normal;word-wrap:break-word;overflow-wrap:anywhere}.xe_content p,.rhymix_content p{margin:0 0 0px 0;line-height:160%}.xe_content p span,.rhymix_content p span{line-height:160%}.xe_content img,.xe_content video,.rhymix_content img,.rhymix_content video{max-width:100%;height:auto}.xe_content table,.rhymix_content table{font:inherit}.xe_content blockquote,.rhymix_content blockquote{padding:2px 0;border-style:solid;border-color:#ccc;border-width:0;border-left-width:5px;padding-left:20px;padding-right:8px}.xe_content blockquote:lang(ar),.xe_content blockquote:lang(arc),.xe_content blockquote:lang(dv),.xe_content blockquote:lang(ha),.xe_content blockquote:lang(he),.xe_content blockquote:lang(khw),.xe_content blockquote:lang(ks),.xe_content blockquote:lang(ku),.xe_content blockquote:lang(ps),.xe_content blockquote:lang(fa),.xe_content blockquote:lang(ur),.xe_content blockquote:lang(yi),.rhymix_content blockquote:lang(ar),.rhymix_content blockquote:lang(arc),.rhymix_content blockquote:lang(dv),.rhymix_content blockquote:lang(ha),.rhymix_content blockquote:lang(he),.rhymix_content blockquote:lang(khw),.rhymix_content blockquote:lang(ks),.rhymix_content blockquote:lang(ku),.rhymix_content blockquote:lang(ps),.rhymix_content blockquote:lang(fa),.rhymix_content blockquote:lang(ur),.rhymix_content blockquote:lang(yi){border-left-width:0px;border-right-width:5px;padding-left:8px;padding-right:20px}.xe_content ul,.rhymix_content ul{list-style-type:disc}.xe_content ol,.rhymix_content ol{list-style-type:decimal}.xe_content ul,.xe_content ol,.rhymix_content ul,.rhymix_content ol{display:block;margin-left:1em;margin-right:0;padding-left:25px;padding-right:0}.xe_content ul:lang(ar),.xe_content ul:lang(arc),.xe_content ul:lang(dv),.xe_content ul:lang(ha),.xe_content ul:lang(he),.xe_content ul:lang(khw),.xe_content ul:lang(ks),.xe_content ul:lang(ku),.xe_content ul:lang(ps),.xe_content ul:lang(fa),.xe_content ul:lang(ur),.xe_content ul:lang(yi),.xe_content ol:lang(ar),.xe_content ol:lang(arc),.xe_content ol:lang(dv),.xe_content ol:lang(ha),.xe_content ol:lang(he),.xe_content ol:lang(khw),.xe_content ol:lang(ks),.xe_content ol:lang(ku),.xe_content ol:lang(ps),.xe_content ol:lang(fa),.xe_content ol:lang(ur),.xe_content ol:lang(yi),.rhymix_content ul:lang(ar),.rhymix_content ul:lang(arc),.rhymix_content ul:lang(dv),.rhymix_content ul:lang(ha),.rhymix_content ul:lang(he),.rhymix_content ul:lang(khw),.rhymix_content ul:lang(ks),.rhymix_content ul:lang(ku),.rhymix_content ul:lang(ps),.rhymix_content ul:lang(fa),.rhymix_content ul:lang(ur),.rhymix_content ul:lang(yi),.rhymix_content ol:lang(ar),.rhymix_content ol:lang(arc),.rhymix_content ol:lang(dv),.rhymix_content ol:lang(ha),.rhymix_content ol:lang(he),.rhymix_content ol:lang(khw),.rhymix_content ol:lang(ks),.rhymix_content ol:lang(ku),.rhymix_content ol:lang(ps),.rhymix_content ol:lang(fa),.rhymix_content ol:lang(ur),.rhymix_content ol:lang(yi){padding-left:0px;padding-right:25px;margin-left:0;margin-right:1em}.xe_content li,.rhymix_content li{display:list-item}@media screen{img,video{max-width:none}}.xe-clearfix:before,.xe-clearfix:after{content:" ";display:table}.xe-clearfix:after{clear:both}.xe-widget-wrapper{overflow:hidden}#rhymix_popup_menu,#popup_menu_area{position:absolute;z-index:9999;margin:10px 0;padding:0;border:1px solid #eeeeee;border-radius:2px;font-size:12px;box-shadow:0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);background:#fff;min-width:80px}#rhymix_popup_menu ul,#popup_menu_area ul{margin:0;padding:0;list-style:none}#rhymix_popup_menu li,#popup_menu_area li{margin:0;padding:0;line-height:1.5}#rhymix_popup_menu a,#popup_menu_area a{display:block;padding:5px;text-decoration:none;color:#212121}#rhymix_popup_menu a:hover,#rhymix_popup_menu a:active,#rhymix_popup_menu a:focus,#popup_menu_area a:hover,#popup_menu_area a:active,#popup_menu_area a:focus{background:#eeeeee;outline:none}@media screen and (max-width:400px){#rhymix_popup_menu,#popup_menu_area{min-width:120px;max-width:95%;font-size:13px}#rhymix_popup_menu a,#popup_menu_area a{display:block;padding:10px;text-decoration:none;color:#212121}}.editable_preview{width:100%;min-height:240px;max-height:440px;box-sizing:border-box;margin:0;padding:6px;border:1px solid #ccc;border-radius:4px;box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);overflow-y:auto;cursor:text}.editable_preview p{margin-bottom:0px !important}.editable_preview_iframe{width:100%;height:440px;box-sizing:border-box;margin:0 0 -4px 0;padding:0;border:0}#rhymix_alert{display:none;position:fixed;left:50%;bottom:20%;min-width:250px;max-width:500px;background-color:#000;color:#fff;font-size:16px;text-align:center;opacity:0.6;padding:12px 20px;border:1px solid #fff;border-radius:10px;transform:translateX(-50%);z-index:999999999}#rhymix_debug_button{display:none;position:fixed;left:0;bottom:40px;background:#eeeeee;background:linear-gradient(to bottom, #f4f4f4 0%, #eaeaea 100%);border:1px solid #ccc;border-left:0;border-top-right-radius:4px;border-bottom-right-radius:4px;box-shadow:0 0 3px 0 rgba(0, 0, 0, 0.18), 0 0 6px 0 rgba(0, 0, 0, 0.12);z-index:1073741824}#rhymix_debug_button.visible{display:block}@media print{#rhymix_debug_button.visible{display:none}}#rhymix_debug_button:hover{background:#dddddd;background:linear-gradient(to bottom, #e8e8e8 0%, #d9d9d9 100%)}#rhymix_debug_button a{display:block;font:bold 12px/14px Arial, sans-serif;color:#444;text-decoration:none;padding:4px 8px}#rhymix_debug_button a.has_errors{color:#f44336}#rhymix_debug_panel{display:none;position:fixed;left:0;top:0;max-width:100%;height:100%;overflow-y:scroll;background:#fcfcfc;box-sizing:border-box;border-right:1px solid #ccc;box-shadow:0 0 4px 0 rgba(0, 0, 0, 0.18), 0 0 8px 0 rgba(0, 0, 0, 0.12);z-index:1073741824}#rhymix_debug_panel .debug_header{clear:both;width:100%;height:36px;background:#444444;background:linear-gradient(to right, #222222 0%, #444444 40%, #eeeeee 100%);position:relative}#rhymix_debug_panel .debug_header h2{font:bold 16px/20px Arial, sans-serif;color:#fcfcfc;position:absolute;left:10px;top:10px;margin:0;padding:0}#rhymix_debug_panel .debug_header .debug_maximize{font:normal 20px/24px Arial, sans-serif;text-decoration:none;color:#444444;position:absolute;right:32px;top:6px}#rhymix_debug_panel .debug_header .debug_close{font:normal 28px/28px Arial, sans-serif;text-decoration:none;color:#444444;position:absolute;right:10px;top:4px}#rhymix_debug_panel .debug_header .debug_close:hover{color:#f44336}#rhymix_debug_panel .debug_page{clear:both;margin:12px 10px;font:normal 12px/16px Arial, NanumBarunGothic, NanumGothic, "Malgun Gothic", sans-serif}#rhymix_debug_panel .debug_page .debug_page_header{padding-bottom:8px;border-bottom:1px solid #ddd;position:relative;cursor:pointer}#rhymix_debug_panel .debug_page .debug_page_header h3{color:#444;font:inherit;font-size:14px;font-weight:bold;margin:0;padding:0}#rhymix_debug_panel .debug_page .debug_page_header h3 .error_count{display:inline-block;margin-left:6px;border-radius:4px;padding:2px 6px;font-size:12px;line-height:12px;background:#f44336;color:#ffffff}#rhymix_debug_panel .debug_page .debug_page_collapse{display:block;position:absolute;right:0;top:0;color:#999;font-size:10px;line-height:12px;text-decoration:none;padding:2px 2px}#rhymix_debug_panel .debug_page .debug_page_body{margin:8px 4px 8px 10px}#rhymix_debug_panel .debug_page .debug_page_body h4{color:#444;font:inherit;font-size:13px;font-weight:bold;margin:0 0 8px 0;padding:0}#rhymix_debug_panel .debug_page .debug_entry{font-family:Consolas, "Courier New", monospace;color:#444;margin-left:38px;margin-bottom:8px;text-indent:-28px;word-wrap:break-word;word-break:break-all}#rhymix_debug_panel .debug_page .debug_entry.pre_wrap{white-space:pre-wrap}#rhymix_debug_panel .debug_page .debug_entry ul.debug_metadata{margin:0 0 0 -16px;padding:0}#rhymix_debug_panel .debug_page .debug_entry ul.debug_metadata li{list-style:disc;margin:0;padding:0;text-indent:0}#rhymix_debug_panel .debug_page .debug_entry ul.debug_backtrace{margin:4px 0 0 16px;padding:0}#rhymix_debug_panel .debug_page .debug_entry ul.debug_backtrace li{list-style:disc;margin:0;padding:0;text-indent:0;color:#888}#rhymix_debug_panel .debug_page .debug_entry ul.debug_backtrace li ul{padding-left:20px}#rhymix_debug_panel .debug_page .debug_entry ul.debug_backtrace li ul li{list-style:circle}.btnArea{clear:both;margin:10px 0;padding:0;text-align:right}.btnArea:after{clear:both;display:block;content:""}.btn{display:inline-block;margin:0;padding:0 12px !important;height:24px !important;overflow:visible;border:1px solid #bbbbbb;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-bottom-color:#a2a2a2;border-radius:2px;text-decoration:none !important;text-align:center;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);vertical-align:top;line-height:24px !important;font-family:inherit;font-size:12px;color:#333333;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);background-color:#f5f5f5;background-image:-moz-linear-gradient(top, #ffffff, #e6e6e6);background-image:-webkit-linear-gradient(top, #ffffff, #e6e6e6);background-image:-webkit-gradient(top, #ffffff, #e6e6e6);background-image:-o-linear-gradient(top, #ffffff, #e6e6e6);background-image:linear-gradient(top, #ffffff, #e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e6e6e6", GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn:hover,.btn:active,.btn[disabled]{color:#333;background-color:#e6e6e6}.btn>a,.btn>button,.btn>input,.btn>span{display:inline-block;margin:0 -12px !important;padding:0 12px !important;overflow:visible;width:auto;height:24px;border:0;vertical-align:top;text-decoration:none !important;line-height:24px;font-family:inherit;font-size:12px;color:#333;cursor:pointer;background:none}input.btn,button.btn{height:26px !important}.btn-group{position:relative;display:inline-block;white-space:nowrap;vertical-align:middle;font-size:0}.btn-group+.btn-group{margin-left:5px}.btn-group>.btn{position:relative;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.btn-group>.btn+.btn{margin-left:-1px}.btn-group>.btn:first-child{margin-left:0;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px}.btn-group>.btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px}.btn-group>.btn:hover,.btn-group>.btn:focus,.btn-group>.btn:active,.btn-group>.btn.active{z-index:2}.rhymix_button_wrapper{clear:both;margin:10px 0;padding:0;text-align:right}.rhymix_button_wrapper:after{clear:both;display:block;content:""}.rhymix_button{display:inline-block;margin:0;padding:0 12px !important;height:24px !important;overflow:visible;border:1px solid #bbbbbb;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-bottom-color:#a2a2a2;border-radius:2px;text-decoration:none !important;text-align:center;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);vertical-align:top;line-height:24px !important;font-family:inherit;font-size:12px;color:#333333;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);background-color:#f5f5f5;background-image:-moz-linear-gradient(top, #ffffff, #e6e6e6);background-image:-webkit-linear-gradient(top, #ffffff, #e6e6e6);background-image:-webkit-gradient(top, #ffffff, #e6e6e6);background-image:-o-linear-gradient(top, #ffffff, #e6e6e6);background-image:linear-gradient(top, #ffffff, #e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e6e6e6", GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.rhymix_button:hover,.rhymix_button:active,.rhymix_button[disabled]{color:#333;background-color:#e6e6e6}.rhymix_button>a,.rhymix_button>button,.rhymix_button>input,.rhymix_button>span{display:inline-block;margin:0 -12px !important;padding:0 12px !important;overflow:visible;width:auto;height:24px;border:0;vertical-align:top;text-decoration:none !important;line-height:24px;font-family:inherit;font-size:12px;color:#333;cursor:pointer;background:none}input.rhymix_button,button.rhymix_button{height:26px !important}.message{position:relative;margin:1em 0;padding:0 1em;border:1px solid #ddd;border-radius:4px;line-height:1.4;font-size:13px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#f8f8f8}.message p{margin:1em 0 !important}.message.info{border-color:#BCE8F1;color:#3A87AD;background-color:#D9EDF7}.message.error{border-color:#EED3D7;color:#B94A48;background-color:#F2DEDE}.message.update{border-color:#D6E9C6;color:#468847;background-color:#DFF0D8}body>.message{margin:1em}.rhymix_message{position:relative;margin:1em 0;padding:0 1em;border:1px solid #ddd;border-radius:4px;line-height:1.4;font-size:13px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#f8f8f8}.rhymix_message p{margin:1em 0 !important}.rhymix_message.info{border-color:#BCE8F1;color:#3A87AD;background-color:#D9EDF7}.rhymix_message.error{border-color:#EED3D7;color:#B94A48;background-color:#F2DEDE}.rhymix_message.update{border-color:#D6E9C6;color:#468847;background-color:#DFF0D8}body>.rhymix_message{margin:1em}/* sourceMappingURL=f901bd531df05a712260b0c2277c4773d894cef3.rhymix.scss.min.map */

/* Original file: files/cache/assets/compiled/ac832cb3808f99f894b94bb965ef6a267f52df87.layout.scss.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 14px;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  background: #f0f2f5;
}
a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
ul, ol {
  list-style: none;
}
.container {
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.rb-header {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  transition: all 0.3s;
}
.rb-header.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.rb-header .header-inner {
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6rem;
}
.rb-header .header-left {
  display: flex;
  align-items: center;
  gap: 2.9rem;
  flex: 1;
}
.rb-header .header-right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.logo {
  margin: 0;
  font-size: 0;
}
.logo a {
  display: block;
}
.logo img {
  height: 2rem;
  display: block;
}
.logo span {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  line-height: 2rem;
}
.logo .logo-mo {
  display: none;
}
.mobile-menu-toggle {
  display: none;
  gap: 0.4rem;
  padding: 0.6rem;
}
.mobile-menu-toggle.button {
  flex-direction: column;
}
.mobile-menu-toggle span.hamburger-line {
  width: 1.6rem;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: all 0.3s;
}
.gnb-menu ul {
  display: flex;
  gap: 2.3rem;
}
.gnb-menu .gnb-item {
  position: relative;
}
.gnb-menu .gnb-item > a {
  font-size: 1.2rem;
  font-weight: 500;
  color: #131313;
  white-space: nowrap;
  display: block;
  padding: 1.4rem 0;
  font-weight: bold;
}
.gnb-menu .gnb-item > a:hover {
  color: #5865f2;
}
.gnb-menu .gnb-item.has-submenu .submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-27%);
  background: white;
  border-radius: 0.6rem;
  padding: 2.3rem;
  min-width: 15rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s, visibility 0.1s;
  z-index: 100;
  margin-top: 0.3rem;
}
.gnb-menu .gnb-item.has-submenu .submenu .submenu-title {
  padding: 0 0 0.8rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #161617;
  letter-spacing: -0.02rem;
}
.gnb-menu .gnb-item.has-submenu .submenu a {
  display: block;
  padding: 0.3rem 0;
  font-size: 1rem;
  color: #aeb1b4;
  white-space: nowrap;
  transition: color 0s;
  font-weight: bold;
}
.gnb-menu .gnb-item.has-submenu .submenu a:hover {
  color: #161617;
}
.gnb-menu .gnb-item.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
}
.search-toggle {
  width: 2.9rem;
  height: 2.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border-radius: 0.6rem;
  transition: all 0.2s;
}
.search-toggle img, .search-toggle svg {
  width: 20px;
  height: 20px;
}
.search-toggle:hover {
  background: #f1f3f5;
  color: #333;
}
.user-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.user-actions .user-link {
  padding: 0.6rem 1.1rem;
  font-size: 1rem;
  font-weight: 500;
  color: #495057;
  border-radius: 0.4rem;
  transition: all 0.2s;
}
.user-actions .user-link:hover {
  background: #f1f3f5;
  color: #333;
}
.user-actions .btn-signup {
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: #000;
  border-radius: 0.4rem;
  transition: all 0.2s;
}
.user-actions .btn-signup:hover {
  background: #333;
}
.write-toggle {
  width: 2.9rem;
  height: 2.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border-radius: 0.6rem;
  transition: all 0.2s;
}
.write-toggle:hover {
  background: #f1f3f5;
  color: #333;
}
.search-box {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid #e9ecef;
  padding: 1.1rem 0;
  display: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.search-box.active {
  display: block;
}
.search-box .search-inner {
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.search-box .search-input {
  flex: 1;
  padding: 0.9rem 1.1rem;
  font-size: 1.1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.6rem;
  outline: none;
}
.search-box .search-input:focus {
  border-color: #5865f2;
}
.search-box .search-submit {
  width: 3.1rem;
  height: 3.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: white;
  border-radius: 0.6rem;
  transition: background 0.2s;
}
.search-box .search-submit img, .search-box .search-submit svg {
  width: 20px;
  height: 20px;
}
.search-box .search-submit:hover {
  background: #333;
}
.search-box .search-close {
  width: 3.1rem;
  height: 3.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #868e96;
  border-radius: 0.6rem;
  transition: all 0.2s;
}
.search-box .search-close:hover {
  background: #f1f3f5;
  color: #333;
}
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s;
}
.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}
.mobile-menu {
  position: fixed;
  top: 0;
  left: -21.4rem;
  width: 21.4rem;
  height: 100%;
  background: white;
  z-index: 1000;
  overflow-y: auto;
  transition: left 0.3s;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}
.mobile-menu.active {
  left: 0;
}
.mobile-menu .mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem;
  border-bottom: 1px solid #e9ecef;
}
.mobile-menu .mobile-menu-header h2 {
  font-size: 1.3rem;
  font-weight: 600;
}
.mobile-menu .mobile-menu-header .mobile-menu-close {
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #868e96;
  border-radius: 50%;
  transition: all 0.2s;
}
.mobile-menu .mobile-menu-header .mobile-menu-close:hover {
  background: #f1f3f5;
  color: #333;
}
.mobile-menu .mobile-menu-list {
  padding: 1.1rem 0;
}
.mobile-menu .mobile-menu-item {
  border-bottom: 1px solid #f1f3f5;
}
.mobile-menu .mobile-menu-item:last-child {
  border-bottom: none;
}
.mobile-menu .mobile-menu-item > a {
  display: block;
  padding: 1.1rem 1.4rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  transition: all 0.2s;
}
.mobile-menu .mobile-menu-item > a:hover {
  background: #f8f9fa;
  color: #5865f2;
}
.mobile-menu .mobile-menu-item.has-submenu .mobile-menu-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  text-align: left;
  transition: all 0s;
}
.mobile-menu .mobile-menu-item.has-submenu .mobile-menu-toggle span {
  text-align: left;
  white-space: nowrap;
}
.mobile-menu .mobile-menu-item.has-submenu .mobile-menu-toggle:hover {
  background: #f8f9fa;
  color: #5865f2;
}
.mobile-menu .mobile-menu-item.has-submenu .mobile-menu-toggle .arrow-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s;
  color: #868e96;
  margin-left: auto;
}
.mobile-menu .mobile-menu-item.has-submenu.open .mobile-menu-toggle {
  background: #f8f9fa;
  color: #5865f2;
}
.mobile-menu .mobile-menu-item.has-submenu.open .mobile-menu-toggle .arrow-icon {
  transform: rotate(180deg);
}
.mobile-menu .mobile-menu-item.has-submenu.open .mobile-submenu {
  max-height: 35.7rem;
  opacity: 1;
}
.mobile-menu .mobile-menu-item .mobile-submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s;
  background: #fafbfc;
}
.mobile-menu .mobile-menu-item .mobile-submenu li a {
  display: block;
  padding: 0.9rem 1.4rem 0.9rem 2.9rem;
  font-size: 1rem;
  color: #495057;
  transition: all 0.2s;
}
.mobile-menu .mobile-menu-item .mobile-submenu li a:hover {
  background: #f1f3f5;
  color: #5865f2;
}
.mobile-menu .mobile-menu-auth {
  padding: 1.4rem;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 0.6rem;
}
.mobile-menu .mobile-menu-auth a {
  flex: 1;
  padding: 0.7rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.4rem;
}
.mobile-menu .mobile-menu-auth a.mobile-login {
  color: #495057;
  border: 1px solid #dee2e6;
}
.mobile-menu .mobile-menu-auth a.mobile-login:hover {
  background: #f8f9fa;
}
.mobile-menu .mobile-menu-auth a.mobile-signup {
  color: white;
  background: #000;
}
.mobile-menu .mobile-menu-auth a.mobile-signup:hover {
  background: #333;
}
.content-wrapper {
  /* [수정] 본문 하단 여백 제거 (푸터와 밀착) */
  padding: 2.5rem 0 0;
  min-height: auto;
}
.content-layout {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: 5rem;
  align-items: start;
}
.content-layout.no-sidebar {
  grid-template-columns: 1fr;
}
.sidebar-right {
  position: sticky;
  top: 7.4rem;
}
.control-btn, .more-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #868e96;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.4rem;
  transition: all 0.2s;
}
.control-btn:hover, .more-btn:hover {
  background: #f8f9fa;
  color: #333;
  border-color: #dee2e6;
}
.more-btn {
  width: auto;
  padding: 0 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
}
.badge-new, .badge-soon, .badge-doing, .badge-idle {
  padding: 2px 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 0.3rem;
  text-transform: uppercase;
}
.badge-new {
  background: #51cf66;
  color: white;
}
.badge-soon {
  background: #5865f2;
  color: white;
}
.badge-doing {
  background: #339af0;
  color: white;
}
.badge-idle {
  background: #e9ecef;
  color: #868e96;
}
.progress-bar {
  height: 0.6rem;
  background: #e9ecef;
  border-radius: 0.3rem;
  overflow: hidden;
}
.progress-bar.small {
  height: 0.4rem;
}
.progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #5865f2, #845ef7);
  border-radius: 0.3rem;
  transition: width 0.3s;
}
.main-content {
  min-height: 20rem;
  background: #fff;
  border-radius: 0.3rem;
  padding: 1rem;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
}
@media (max-width: 1024px) {
  .content-layout {
    grid-template-columns: 1fr;
  }
  .rb-header .header-inner {
    height: 4rem;
  }
  .sidebar-left, .sidebar-right {
    display: none;
  }
  .gnb-menu {
    display: none;
  }
  .mobile-menu-toggle {
    display: flex;
  }
  .logo .logo-pc {
    display: none;
  }
  .logo .logo-mo {
    display: block;
  }
  .user-actions .user-link, .user-actions .btn-signup {
    display: none;
  }
  .header-left {
    gap: 1.1rem;
  }
  .content-wrapper {
    padding: 1.5rem 0 0;
    /* 모바일 하단 여백도 제거 */
  }
  .main-content {
    padding: 1.5rem;
    border-radius: 0.8rem;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 13px;
  }
  .container {
    padding: 0 1.4rem;
  }
  .rb-header .header-inner {
    padding: 0 1.4rem;
    height: 3.5rem;
    gap: 0.7rem;
  }
  .logo img {
    height: 1.5rem;
  }
  .logo span {
    font-size: 1.3rem;
    line-height: 1.5rem;
  }
  .header-left {
    gap: 0.5rem;
  }
  .header-right {
    gap: 0.7rem;
  }
  .search-toggle, .write-toggle {
    width: 2.4rem;
    height: 2.4rem;
  }
  .search-toggle img, .search-toggle svg, .write-toggle img, .write-toggle svg {
    width: 18px;
    height: 18px;
  }
  .mobile-menu-toggle {
    padding: 0.4rem;
  }
  .mobile-menu-toggle span.hamburger-line {
    width: 1.4rem;
  }
}
@media (max-width: 480px) {
  html {
    font-size: 12px;
  }
  .container {
    padding: 0 1.1rem;
  }
  .rb-header .header-inner {
    padding: 0 1.1rem;
    height: 3.2rem;
    gap: 0.5rem;
  }
  .logo img {
    height: 1.3rem;
  }
  .logo span {
    font-size: 1.2rem;
    line-height: 1.3rem;
  }
  .header-left {
    gap: 0.4rem;
  }
  .header-right {
    gap: 0.5rem;
  }
  .search-toggle, .write-toggle {
    width: 2rem;
    height: 2rem;
  }
  .search-toggle img, .search-toggle svg, .write-toggle img, .write-toggle svg {
    width: 16px;
    height: 16px;
  }
  .mobile-menu-toggle {
    padding: 0.3rem;
  }
  .mobile-menu-toggle span.hamburger-line {
    width: 1.2rem;
  }
}
.rb-footer {
  background-color: transparent;
  border-top: none;
  /* [수정] 본문과 20px 간격을 둠 (padding-top) */
  padding: 20px 0 3rem;
  margin-top: auto;
  font-family: "Pretendard", sans-serif;
}
.rb-footer .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
}
.rb-footer .footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  /* [수정] 위아래 선 모두 제거 및 여백 조정 */
  padding: 0;
  border: none;
  width: 100%;
  max-width: 800px;
}
.rb-footer .footer-menu li a {
  font-size: 0.95rem;
  color: #868e96;
  font-weight: 500;
  transition: all 0.2s;
}
.rb-footer .footer-menu li a:hover {
  color: #333;
  font-weight: 600;
}
.rb-footer .footer-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: #adb5bd;
}
.rb-footer .footer-info .copyright {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.01rem;
}
.rb-footer .footer-info .footer-desc {
  font-size: 0.8rem;
  opacity: 0.8;
}
@media (max-width: 768px) {
  .rb-footer {
    padding: 15px 0 2rem;
    /* 모바일은 조금 더 좁게 */
  }
  .rb-footer .footer-menu {
    gap: 0.8rem 1.2rem;
    padding: 0.5rem 0;
    /* 모바일 메뉴 패딩 최소화 */
  }
  .rb-footer .footer-info .copyright {
    font-size: 0.8rem;
  }
}
.dual-widget-wrap {
  display: flex;
  flex-wrap: wrap;
  /* 공간 부족하면 줄바꿈 */
  gap: 20px;
  /* 위젯 사이 간격 */
  margin-bottom: 2rem;
}
.dual-widget-wrap .widget-item {
  /* [핵심] 
       flex-grow: 1 -> 공간이 남으면 늘어나서 채움
       flex-shrink: 1 -> 공간이 부족하면 줄어듦
       flex-basis: auto -> 아래 설정한 크기 기준
    */
  flex: 1 1 auto;
  /* [중요] 위젯이 찌그러지는 한계선 설정 */
  /* 화면이 줄어들어 이 너비보다 작아질 상황이 오면, 즉시 줄바꿈됩니다. */
  /* 300px 정도가 일반적인 갤러리/게시판 위젯이 깨지지 않는 마지노선입니다. */
  min-width: 300px;
  box-sizing: border-box;
  /* 위젯 내부 요소 꽉 채우기 */
  /* 관리자 페이지에서 설정한 목표 크기 (Flex Basis) */
  /* gap(20px)을 고려하여 계산 */
}
.dual-widget-wrap .widget-item > * {
  width: 100% !important;
}
.dual-widget-wrap .widget-item.size-100 {
  flex-basis: 100%;
}
.dual-widget-wrap .widget-item.size-50 {
  flex-basis: calc(50% - 20px);
}
.dual-widget-wrap .widget-item.size-33 {
  flex-basis: calc(33.333% - 20px);
}
.dual-widget-wrap .widget-item.size-25 {
  flex-basis: calc(25% - 20px);
}
@media (max-width: 480px) {
  .dual-widget-wrap {
    gap: 15px;
  }
  .dual-widget-wrap .widget-item {
    min-width: 100%;
    /* 강제 한 줄 */
    margin: 0;
  }
}
.widget-box {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  /* 둥글기 2px 유지 */
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease-in-out;
  /* 위젯 헤더 */
  /* 위젯 내용 영역 */
}
.widget-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}
.widget-box .widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 타이틀 여백: 왼쪽 1.4rem */
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid #e9ecef;
  background: #f9f9f9;
}
.widget-box .widget-header h3.widget-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.widget-box .widget-header h3.widget-title i, .widget-box .widget-header h3.widget-title svg {
  color: #5865f2;
  font-size: 1rem;
}
.widget-box .widget-header .widget-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 2px;
  color: #adb5bd;
  transition: all 0.2s;
}
.widget-box .widget-header .widget-more:hover {
  background: #e9ecef;
  color: #333;
}
.widget-box .widget-content {
  /* [수정] 다시 0으로 변경하여 선이 박스 끝까지 닿게 함 */
  padding: 0;
  flex: 1;
  font-size: 0.95rem;
  color: #495057;
  background: #fff;
}
.widget-box .widget-content ul {
  display: flex;
  flex-direction: column;
}
.widget-box .widget-content ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* [핵심 수정] 게시글 들여쓰기 효과 */
  /* 상하: 0.7rem */
  /* 오른쪽: 1.4rem (아이콘 등 공간) */
  /* 왼쪽: 2.4rem -> 헤더(1.4rem)보다 1rem 더 안쪽으로 밀어넣음 */
  padding: 0.7rem 1.4rem 0.7rem 2.4rem;
  border-bottom: 1px solid #f1f3f5;
}
.widget-box .widget-content ul li a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 75%;
  color: #495057;
  display: block;
}
.widget-box .widget-content ul li a:hover {
  text-decoration: underline;
  color: #212529;
}
.widget-box .widget-content ul li .date {
  font-size: 0.8rem;
  color: #adb5bd;
  white-space: nowrap;
}
.widget-box .widget-content ul li:last-child {
  border-bottom: none;
}
/* 모바일 대응 */
@media (max-width: 768px) {
  .widget-box .widget-header {
    padding: 0.8rem 1.2rem;
    /* 모바일 헤더 왼쪽 여백: 1.2rem */
  }
  .widget-box .widget-content ul li {
    /* 모바일에서도 헤더(1.2rem)보다 안쪽(2.0rem)으로 들여쓰기 */
    padding: 0.7rem 1.2rem 0.7rem 2rem;
  }
}
/* sourceMappingURL=ac832cb3808f99f894b94bb965ef6a267f52df87.layout.scss.map */

/* Original file: files/cache/assets/compiled/1200c245d15af812777a2b4fc6ca39323b1acc16.login-modal.scss.css */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  padding: 1.4rem;
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.modal-overlay .modal-container {
  background: white;
  border-radius: 1.1rem;
  width: 100%;
  max-width: 28.6rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-2rem);
  transition: transform 0.3s;
  max-height: calc(100vh - 2.8rem);
  overflow-y: auto;
}
.modal-overlay.active .modal-container {
  transform: translateY(0);
}
.modal-overlay .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.7rem 2rem;
  border-bottom: 1px solid #f1f3f5;
}
.modal-overlay .modal-header .modal-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #212529;
  margin: 0;
}
.modal-overlay .modal-header .modal-close {
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #868e96;
  border-radius: 50%;
  transition: all 0.2s;
}
.modal-overlay .modal-header .modal-close:hover {
  background: #f1f3f5;
  color: #495057;
}
.modal-overlay .modal-header .modal-close img, .modal-overlay .modal-header .modal-close svg {
  width: 1.4rem;
  height: 1.4rem;
}
.modal-overlay .modal-body {
  padding: 2rem;
}
.modal-overlay .form-group {
  margin-bottom: 1.4rem;
}
.modal-overlay .form-group .form-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.6rem;
}
.modal-overlay .form-group .form-input {
  width: 100%;
  padding: 0.9rem 1.1rem;
  font-size: 1rem;
  color: #212529;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.6rem;
  outline: none;
  transition: all 0.2s;
  font-family: inherit;
}
.modal-overlay .form-group .form-input::placeholder {
  color: #adb5bd;
}
.modal-overlay .form-group .form-input:focus {
  background: white;
  border-color: #5865f2;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.1);
}
.modal-overlay .validator-message {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.4rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.4;
  animation: shake 0.4s ease-in-out;
}
.modal-overlay .validator-message img, .modal-overlay .validator-message svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.modal-overlay .validator-message.error {
  background: #fee;
  border: 1px solid #fcc;
  color: #c00;
}
.modal-overlay .validator-message.error img, .modal-overlay .validator-message.error svg {
  stroke: #c00;
}
.modal-overlay .validator-message span {
  flex: 1;
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-0.5rem);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(0.5rem);
  }
}
.modal-overlay .form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.7rem;
}
.modal-overlay .form-options .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}
.modal-overlay .form-options .checkbox-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  accent-color: #5865f2;
}
.modal-overlay .form-options .checkbox-label span {
  font-size: 0.9rem;
  color: #495057;
}
.modal-overlay .form-options .link-text {
  font-size: 0.9rem;
  color: #868e96;
  transition: color 0.2s;
}
.modal-overlay .form-options .link-text:hover {
  color: #5865f2;
}
.modal-overlay .btn-login {
  width: 100%;
  padding: 0.9rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  background: #5865f2;
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.modal-overlay .btn-login:hover {
  background: #4752c4;
}
.modal-overlay .btn-login:active {
  transform: scale(0.98);
}
.modal-overlay .form-footer {
  margin-top: 1.7rem;
  padding-top: 1.7rem;
  border-top: 1px solid #f1f3f5;
  text-align: center;
}
.modal-overlay .form-footer .footer-text {
  font-size: 0.9rem;
  color: #868e96;
  margin-right: 0.4rem;
}
.modal-overlay .form-footer .link-signup {
  font-size: 0.9rem;
  color: #5865f2;
  font-weight: 600;
  transition: color 0.2s;
}
.modal-overlay .form-footer .link-signup:hover {
  color: #4752c4;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .modal-overlay {
    padding: 0;
  }
  .modal-overlay .modal-container {
    max-width: 100%;
    border-radius: 0;
    max-height: 100vh;
  }
  .modal-overlay .modal-header {
    padding: 1.4rem 1.4rem;
  }
  .modal-overlay .modal-body {
    padding: 1.4rem;
  }
}
/* sourceMappingURL=1200c245d15af812777a2b4fc6ca39323b1acc16.login-modal.scss.map */

/* Original file: modules/member/skins/default/css/member.css */

/* Horizontal Align */
.xm .pull-right{float:right}
.xm .pull-left{float:left}
/* DL Horizontal */
.xm .dl-horizontal{*zoom:1}
.xm .dl-horizontal:before,
.xm .dl-horizontal:after{display:table;line-height:0;content:""}
.xm .dl-horizontal:after{clear:both}
.xm .dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.xm .dl-horizontal dd{margin-left:180px}
/* Form Control Reset */
.xm form{margin:0 0 20px}
.xm fieldset{padding:0;margin:0;border:0}
.xm label,
.xm input,
.xm button,
.xm select,
.xm textarea{font-weight:normal;line-height:20px}
.xm label{display:block;margin-bottom:5px}
.xm label.x_inline{display:inline-block;margin-right:12px}
.xm select,
.xm textarea,
.xm input[type="text"],
.xm input[type="password"],
.xm input[type="datetime"],
.xm input[type="datetime-local"],
.xm input[type="date"],
.xm input[type="month"],
.xm input[type="time"],
.xm input[type="week"],
.xm input[type="number"],
.xm input[type="email"],
.xm input[type="url"],
.xm input[type="search"],
.xm input[type="tel"],
.xm input[type="color"]{display:inline-block;height:20px;padding:4px 6px;margin-bottom:10px;line-height:20px;color:#555555;vertical-align:middle;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
.xm input,
.xm textarea{width:206px}
.xm textarea{height:auto}
.xm textarea,
.xm input[type="text"],
.xm input[type="password"],
.xm input[type="datetime"],
.xm input[type="datetime-local"],
.xm input[type="date"],
.xm input[type="month"],
.xm input[type="time"],
.xm input[type="week"],
.xm input[type="number"],
.xm input[type="email"],
.xm input[type="url"],
.xm input[type="search"],
.xm input[type="tel"],
.xm input[type="color"]{background-color:#ffffff;border:1px solid #cccccc;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-webkit-transition:border linear 0.2s, box-shadow linear 0.2s;-moz-transition:border linear 0.2s, box-shadow linear 0.2s;-o-transition:border linear 0.2s, box-shadow linear 0.2s;transition:border linear 0.2s, box-shadow linear 0.2s}
.xm textarea:focus,
.xm input[type="text"]:focus,
.xm input[type="password"]:focus,
.xm input[type="datetime"]:focus,
.xm input[type="datetime-local"]:focus,
.xm input[type="date"]:focus,
.xm input[type="month"]:focus,
.xm input[type="time"]:focus,
.xm input[type="week"]:focus,
.xm input[type="number"]:focus,
.xm input[type="email"]:focus,
.xm input[type="url"]:focus,
.xm input[type="search"]:focus,
.xm input[type="tel"]:focus,
.xm input[type="color"]:focus{border-color:rgba(82, 168, 236, 0.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)}
.xm input[type="radio"],
.xm input[type="checkbox"]{margin:0;line-height:normal}
.xm input[type="file"],
.xm input[type="image"],
.xm input[type="submit"],
.xm input[type="reset"],
.xm input[type="button"],
.xm input[type="radio"],
.xm input[type="checkbox"]{width:auto}
.xm select,
.xm input[type="file"]{height:30px;*margin-top:4px;line-height:30px}
.xm select{background-color:#ffffff;border:1px solid #cccccc}
.xm select[multiple],
.xm select[size]{height:auto}
.xm select:focus,
.xm input[type="file"]:focus,
.xm input[type="radio"]:focus,
.xm input[type="checkbox"]:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
.xm input:-moz-placeholder, 
.xm textarea:-moz-placeholder {color:#999999}
.xm input:-ms-input-placeholder, 
.xm textarea:-ms-input-placeholder {color:#999999}
.xm input::-webkit-input-placeholder, 
.xm textarea::-webkit-input-placeholder {color:#999999}
.xm input,
.xm textarea{margin-left:0}
.xm input[disabled],
.xm select[disabled],
.xm textarea[disabled],
.xm input[readonly],
.xm select[readonly],
.xm textarea[readonly]{cursor:not-allowed;background-color:#eeeeee}
.xm input[type="radio"][disabled],
.xm input[type="checkbox"][disabled],
.xm input[type="radio"][readonly],
.xm input[type="checkbox"][readonly]{background-color:transparent}
.xm input:focus:invalid, 
.xm textarea:focus:invalid, 
.xm select:focus:invalid {color:#b94a48;border-color:#ee5f5b}
.xm input:focus:invalid:focus, 
.xm textarea:focus:invalid:focus, 
.xm select:focus:invalid:focus {border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7}
/* Forms */
.xm .form-horizontal .control-group{margin-bottom:20px;*zoom:1}
.xm .form-horizontal .control-group:before,
.xm .form-horizontal .control-group:after{display:table;line-height:0;content:""}
.xm .form-horizontal .control-group:after{clear:both}
.xm .form-horizontal .control-label{float:left;width:160px;padding-top:5px;text-align:right}
.xm .form-horizontal .controls{*display:inline-block;*padding-left:20px;margin-left:180px;*margin-left:0}
.xm .form-horizontal .controls:first-child{*padding-left:180px}
.xm .form-horizontal .help-block{margin-bottom:0}
.xm .form-horizontal input+.help-block,
.xm .form-horizontal select+.help-block,
.xm .form-horizontal textarea+.help-block,
.xm .form-horizontal .input-prepend+.help-block,
.xm .form-horizontal .input-append+.help-block{margin-top:10px}
.xm .help-block,
.xm .help-inline{color:#595959}
.xm .help-block{display:block;margin-bottom:10px}
.xm .help-inline{margin:0;display:inline-block;*display:inline;padding-left:5px;vertical-align:middle;*zoom:1}
.xm .input-append,
.xm .input-prepend{display:inline-block;margin-bottom:10px;font-size:0;white-space:nowrap;vertical-align:middle}
.xm .input-append input,
.xm .input-prepend input,
.xm .input-append select,
.xm .input-prepend select{position:relative;margin-bottom:0;*margin-left:0;vertical-align:top;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}
.xm .input-append input:focus,
.xm .input-prepend input:focus,
.xm .input-append select:focus,
.xm .input-prepend select:focus{z-index:2}
.xm .input-append .add-on,
.xm .input-prepend .add-on{display:inline-block;width:auto;height:20px;min-width:16px;padding:4px 5px;font-weight:normal;line-height:20px;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#eeeeee;border:1px solid #ccc}
.xm .input-append .add-on,
.xm .input-prepend .add-on,
.xm .input-append .btn,
.xm .input-prepend .btn{vertical-align:top;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
.xm .input-append .active,
.xm .input-prepend .active{background-color:#a9dba9;border-color:#46a546}
.xm .input-prepend .add-on,
.xm .input-prepend .btn{margin-right:-1px}
.xm .input-prepend .add-on:first-child,
.xm .input-prepend .btn:first-child{-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}
.xm .input-append input,
.xm .input-append select{-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}
.xm .input-append input+.btn-group .btn:last-child,
.xm .input-append select+.btn-group .btn:last-child{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}
.xm .input-append .add-on,
.xm .input-append .btn,
.xm .input-append .btn-group{margin-left:-1px}
.xm .input-append .add-on:last-child,
.xm .input-append .btn:last-child,
.xm .input-append .btn-group:last-child>.dropdown-toggle{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}
.xm .input-prepend.input-append input,
.xm .input-prepend.input-append select{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
.xm .input-prepend.input-append input+.btn-group .btn,
.xm .input-prepend.input-append select+.btn-group .btn{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}
.xm .input-prepend.input-append .add-on:first-child,
.xm .input-prepend.input-append .btn:first-child{margin-right:-1px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}
.xm .input-prepend.input-append .add-on:last-child,
.xm .input-prepend.input-append .btn:last-child{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}
.xm .input-prepend.input-append .btn-group:first-child{margin-left:0}
.xm .form-horizontal input,
.xm .form-horizontal textarea,
.xm .form-horizontal select,
.xm .form-horizontal .help-inline,
.xm .form-horizontal .input-prepend,
.xm .form-horizontal .input-append{display:inline-block;*display:inline;margin-bottom:0;vertical-align:middle;*zoom:1}
.xm .form-horizontal .hide{display:none}
.xm .control-group{margin-bottom:10px}
/* Tabs */
.xm .nav{margin:0 0 20px 0;padding:0;list-style:none}
.xm .nav>li>a{display:block}
.xm .nav>li>a:hover,
.xm .nav>li>a:focus{text-decoration:none;background-color:#eeeeee}
.xm .nav-tabs{*zoom:1}
.xm .nav-tabs:before,
.xm .nav-tabs:after{display:table;line-height:0;content:""}
.xm .nav-tabs:after{clear:both}
.xm .nav-tabs>li{float:left}
.xm .nav-tabs>li>a{padding-right:12px;padding-left:12px;margin-right:2px;line-height:14px}
.xm .nav-tabs{border-bottom:1px solid #ddd}
.xm .nav-tabs>li{margin-bottom:-1px}
.xm .nav-tabs>li>a{padding-top:8px;padding-bottom:8px;line-height:20px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}
.xm .nav-tabs>li>a:hover,
.xm .nav-tabs>li>a:focus{border-color:#eeeeee #eeeeee #dddddd}
.xm .nav-tabs>.active>a,
.xm .nav-tabs>.active>a:hover,
.xm .nav-tabs>.active>a:focus{color:#555555;cursor:default;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent}
/* Table */
.xm .table{max-width:100%;background-color:transparent;border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:20px}
.xm .table th,
.xm .table td{padding:8px;line-height:20px;text-align:left;vertical-align:top;border-top:1px solid #dddddd}
.xm .table th{font-weight:bold}
.xm .table thead th{vertical-align:bottom}
.xm .table caption+thead tr:first-child th,
.xm .table caption+thead tr:first-child td,
.xm .table colgroup+thead tr:first-child th,
.xm .table colgroup+thead tr:first-child td,
.xm .table thead:first-child tr:first-child th,
.xm .table thead:first-child tr:first-child td{border-top:0}
.xm .table tbody+tbody{border-top:2px solid #dddddd}
.xm .table-striped tbody>tr:nth-child(odd)>td,
.xm .table-striped tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}
.xm .table-hover tbody tr:hover>td,
.xm .table-hover tbody tr:hover>th{background-color:#f5f5f5}
/* Pangination */
.xm .pagination{margin:20px 0}
.xm .pagination ul{display:inline-block;*display:inline;margin-bottom:0;margin-left:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*zoom:1;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05)}
.xm .pagination ul>li{display:inline}
.xm .pagination ul>li>a,
.xm .pagination ul>li>span{float:left;padding:4px 12px;line-height:20px;text-decoration:none;background-color:#ffffff;border:1px solid #dddddd;border-left-width:0}
.xm .pagination ul>li>a:hover,
.xm .pagination ul>li>a:focus,
.xm .pagination ul>.active>a,
.xm .pagination ul>.active>span{background-color:#f5f5f5}
.xm .pagination ul>.active>a,
.xm .pagination ul>.active>span{color:#999999;cursor:default}
.xm .pagination ul>.disabled>span,
.xm .pagination ul>.disabled>a,
.xm .pagination ul>.disabled>a:hover,
.xm .pagination ul>.disabled>a:focus{color:#999999;cursor:default;background-color:transparent}
.xm .pagination ul>li:first-child>a,
.xm .pagination ul>li:first-child>span{border-left-width:1px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-topleft:4px}
.xm .pagination ul>li:last-child>a,
.xm .pagination ul>li:last-child>span{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px}
.xm .pagination-centered{text-align:center}
/* Member module customize */
.xm,
.xm input,
.xm textarea,
.xm select,
.xm button,
.xm table{font-size:13px}
.xm em{font-style:normal;color:#f00}
.xm h1{font-size:22px}
.xm .nav a,
.xm .btn{text-decoration:none}
.xm .dl-horizontal>dd{margin-bottom:10px}
.xm .table{border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.xm .table>caption{text-align:left;font-weight:bold}
.xm .table>caption>.pull-right{position:relative;top:-8px}
.xm .signin{width:400px;margin:30px auto;background-color:#ffffff;border:1px solid #999;border-radius:6px;box-shadow:0 3px 7px #ccc;box-sizing:border-box}
.xm .signin>.login-header{padding:9px 15px;border-bottom:1px solid #eee}
.xm .signin>.login-header>h1{margin:0;font-size:16px;line-height:1.4;font-weight:600;color:#666}
.xm .signin>.login-header>h1>i{opacity:.5;filter:alpha(opacity=50);margin:2px 0 0 0}
.xm .signin>.login-body{max-height:400px;padding:15px}
.xm .signin>.login-body>*:first-child{margin-top:0}
.xm .signin>.login-footer{padding:14px 15px 15px;margin-bottom:0;text-align:right;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;*zoom:1;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;color:#ccc}
.xm .signin>.login-footer:before,
.xm .signin>.login-footer:after{display:table;line-height:0;content:"";clear:both}
.xm .signin>.login-footer>a{text-decoration:none}
.xm .signin>.login-footer>a:hover,
.xm .signin>.login-footer>a:active,
.xm .signin>.login-footer>a:focus{text-decoration:underline}
.xm .signin .control-group{position:relative;padding:0 14px 0 0;margin:0;clear:both}
.xm .signin .control-group:before{content:"";display:block;clear:both}
.xm .signin .captcha{margin-bottom:10px}
.xm .signin form{margin:0}
.xm .signin fieldset{margin:0}
.xm .signin label{cursor:pointer;display:inline-block}
.xm .signin input[type="text"],
.xm .signin input[type="email"],
.xm .signin input[type="password"]{width:100%}
.xm .signin input[type="checkbox"]{margin:0}
.xm .signin .btn{border-radius:2px;overflow:visible;font-size:14px;line-height:18px;padding:3px 9px}
.xm .signin .submit{position:absolute;top:0;right:0}
.xm .signin #warning{margin-right:-14px}
.xm .signin #warning>p{margin:10px 0}
.xm .agreement{border:1px solid #ddd;padding:15px 15px 10px 15px;border-radius:5px;background:#f8f8f8;margin-bottom:15px}
.xm .agreement>.title{padding: 0 0 10px 0;margin:0 0 10px 0;border-bottom:1px dotted #ccc; font-size:16px;font-weight:bold}
.xm .agreement>.text{max-height:200px;overflow:auto}
.xm .agreement>.confirm{padding:10px 0 0 0;margin:10px 0 0 0;border-top:1px dotted #ccc}
@media all and (max-width:480px){.xm .signin{margin:0;width:100%}}
@media all and (min-width:768px){.xm .dl-horizontal>dt{margin-bottom:10px}}

/* ========================================================================
   [Hios Skin] Signup Form & Layout Optimization (Final)
   설명: 상단 여백 제거, 메뉴 숨김 처리(회원가입만), 약관 및 폼 디자인 개선
   ========================================================================== */

/* 1. [상단 여백 삭제] 전체 컨테이너 및 제목 */
.xm {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 제목(H1) 스타일: 검은 줄 삭제 및 여백 최소화 */
.xm h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 30px !important;
    border: none !important;        /* 검은 줄 삭제 */
    border-bottom: none !important; 
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* 2. [메뉴 제어] 회원가입 페이지에서만 메뉴 숨기기 (JavaScript 필요 없음) */
/* .form-horizontal(회원가입 폼)이 있는 페이지의 형제 요소인 .nav를 숨김 */
/* CSS만으로는 부모나 형제를 조건부로 숨기기 어려우므로, 
   가장 확실한 방법은 nav 자체를 숨기는 것이 아니라 
   회원가입 폼이 있을 때만 nav의 공간을 없애는 것입니다. 
   하지만 여기서는 일단 nav를 숨기는 코드를 유지하되, 
   회원정보 페이지 등에서는 nav가 보이도록 해야 합니다.
   
   [중요] 만약 회원정보 페이지에서도 메뉴가 사라진다면 
   아래 .xm .nav { display: none ... } 코드를 지우세요.
*/

/* 3. [회원가입 폼] 레이아웃 (100% 꽉 채우기) */
.xm .form-horizontal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xm .form-horizontal .control-group {
    border: none !important;
    margin-bottom: 25px !important;
    display: block !important;
    padding: 0 !important;
}

.xm .form-horizontal .control-label {
    width: 100% !important;
    text-align: left !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    float: none !important;
    display: block !important;
}

.xm .form-horizontal .control-label em {
    color: #e74c3c !important;
    margin-right: 4px !important;
}

.xm .form-horizontal .controls {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

/* 4. [입력창 디자인] 100% 너비 + 2px 둥글기 */
.xm .form-horizontal input[type="text"],
.xm .form-horizontal input[type="password"],
.xm .form-horizontal input[type="email"],
.xm .form-horizontal input[type="tel"],
.xm .form-horizontal input[type="date"],
.xm .form-horizontal select, 
.xm .form-horizontal textarea {
    width: 100% !important;
    height: 54px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    font-family: 'Pretendard', sans-serif !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    border-radius: 2px !important;
    background-color: #fff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s;
}

.xm .form-horizontal input:focus,
.xm .form-horizontal select:focus,
.xm .form-horizontal textarea:focus {
    border-color: #333 !important;
    outline: none !important;
}

/* 5. [이용약관] 회색 박스 + 가독성 (18px) */
.xm .agreement {
    background-color: #f2f2f2 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 2px !important;
    padding: 25px !important;
    margin-bottom: 40px !important;
}

.xm .agreement > .title {
    background: transparent !important;
    border-bottom: 1px solid #d0d0d0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #222 !important;
}

.xm .agreement > .text {
    background-color: #fff !important;
    border: 1px solid #dcdcdc !important;
    padding: 20px !important;
    font-size: 18px !important;    /* 18px */
    color: #333 !important;
    line-height: 1.6 !important;
    height: 250px !important;
    overflow-y: auto !important;
    border-radius: 2px !important;
}

.xm .agreement > .confirm {
    margin-top: 15px !important;
    text-align: right !important;
    border-top: none !important;
}

.xm .agreement label {
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer;
}

.xm .agreement input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* 6. [버튼 디자인] */
.xm .form-horizontal .btn,
.xm .form-horizontal input[type="submit"] {
    height: 56px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 2px !important;
    width: 100% !important;
    cursor: pointer;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.xm .form-horizontal input[type="submit"] {
    background-color: #2c2c2c !important;
    color: #fff !important;
    border: 1px solid #2c2c2c !important;
    margin-bottom: 10px !important;
}

.xm .form-horizontal input[type="submit"]:hover {
    background-color: #000 !important;
}

.xm .form-horizontal a.btn {
    background-color: #f5f5f5 !important;
    color: #444 !important;
    border: 1px solid #ddd !important;
}

.xm .form-horizontal a.btn:hover {
    background-color: #e9e9e9 !important;
    color: #222 !important;
}

.xm .form-horizontal .btnArea {
    display: flex !important;
    flex-direction: column !important;
    margin-top: 30px !important;
    border-top: none !important;
    padding-top: 0 !important;
}

/* 7. 기타 */
.xm .form-horizontal input[type="file"] {
    height: auto !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 0 !important;
}

.xm .form-horizontal .controls label {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 20px !important;
    font-size: 14px !important;
    cursor: pointer;
}
.xm .form-horizontal input[type="radio"],
.xm .form-horizontal input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}

/* ========================================================================
   [Hios Skin] Member Info Page Redesign (Profile Card Style)
   설명: 텍스트 나열식을 카드형 프로필 디자인으로 변경
   ========================================================================== */

/* 1. 전체 컨테이너: 카드 형태 만들기 */
.xm dl.dl-horizontal {
    background-color: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important; /* 둥근 모서리 */
    padding: 30px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; /* 부드러운 그림자 */
    margin-bottom: 30px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. 정보 항목 (dt, dd) 스타일링 */
/* 항목 이름 (왼쪽) */
.xm dl.dl-horizontal dt {
    width: 120px !important;       /* 고정 너비 */
    text-align: left !important;
    color: #888 !important;        /* 연한 회색 */
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 15px !important;
    float: left !important;
    clear: left !important;
    padding-top: 2px !important;   /* dd와 높이 맞춤 */
}

/* 필수 표시(*) 색상 */
.xm dl.dl-horizontal dt em {
    color: #e74c3c !important;
    margin-right: 4px !important;
}

/* 항목 값 (오른쪽) */
.xm dl.dl-horizontal dd {
    margin-left: 140px !important; /* dt 너비 + 여백 */
    margin-bottom: 15px !important;
    color: #333 !important;        /* 진한 글자색 */
    font-size: 15px !important;
    font-weight: 500 !important;
    border-bottom: 1px dashed #eee !important; /* 구분선 추가 */
    padding-bottom: 15px !important;
}

/* 마지막 줄 구분선 제거 */
.xm dl.dl-horizontal dd:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. 하단 버튼 그룹 디자인 */
.xm .btnArea.btn-group {
    display: flex !important;
    justify-content: flex-end !important; /* 오른쪽 정렬 */
    gap: 10px !important;
    margin-top: 20px !important;
    border: none !important;
    padding: 0 !important;
}

/* 버튼 스타일 (슬림하고 모던하게) */
.xm .btnArea.btn-group .btn {
    height: 40px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 4px !important; /* 살짝 둥글게 */
    background-color: #f8f9fa !important;
    border: 1px solid #ddd !important;
    color: #555 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 버튼 호버 효과 */
.xm .btnArea.btn-group .btn:hover {
    background-color: #fff !important;
    border-color: #333 !important;
    color: #333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* 탈퇴 버튼 (빨간색 포인트) */
.xm .btnArea.btn-group .btn[href*="dispMemberLeave"] {
    color: #e74c3c !important;
    border-color: #fadbd8 !important;
    background-color: #fdfefe !important;
}

.xm .btnArea.btn-group .btn[href*="dispMemberLeave"]:hover {
    background-color: #e74c3c !important;
    color: #fff !important;
    border-color: #e74c3c !important;
}

/* 4. 모바일 대응 */
@media (max-width: 768px) {
    .xm dl.dl-horizontal {
        padding: 20px !important;
    }
    
    .xm dl.dl-horizontal dt {
        float: none !important;
        width: 100% !important;
        margin-bottom: 5px !important;
        color: #999 !important;
        font-size: 13px !important;
    }
    
    .xm dl.dl-horizontal dd {
        margin-left: 0 !important;
        margin-bottom: 20px !important;
        font-size: 16px !important; /* 폰트 키움 */
        padding-bottom: 20px !important;
    }
    
    .xm .btnArea.btn-group {
        flex-direction: column !important; /* 세로 배치 */
    }
    
    .xm .btnArea.btn-group .btn {
        width: 100% !important;
        height: 48px !important;
    }
}

/* ========================================================================
   [Hios Skin] Tab Menu Fix & Rough Gray Buttons
   설명: 탭 메뉴 가로 스크롤 고정, 하단 버튼 투박한 회색톤 변경
   ========================================================================== */

/* 1. [서브 메뉴] 반응형 가로 스크롤 고정 (깨짐 방지) */
.xm .nav-tabs {
    border-bottom: 1px solid #ddd !important;
    display: flex !important;
    flex-wrap: nowrap !important;     /* 줄바꿈 절대 금지 */
    overflow-x: auto !important;      /* 가로 스크롤 허용 */
    -webkit-overflow-scrolling: touch; /* 부드러운 터치 스크롤 */
    white-space: nowrap !important;   /* 텍스트 줄바꿈 금지 */
    gap: 0 !important;
    margin-bottom: 30px !important;
    
    /* 스크롤바 숨기기 (기능은 유지) */
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge */
}
.xm .nav-tabs::-webkit-scrollbar { 
    display: none;                    /* Chrome/Safari */
}

.xm .nav-tabs > li {
    float: none !important;
    flex: 0 0 auto !important;        /* 찌그러짐 방지 */
    margin-bottom: -1px !important;
}

.xm .nav-tabs > li > a {
    border: none !important;
    background: transparent !important;
    color: #888 !important;           /* 평소 연한 회색 */
    padding: 12px 16px !important;    /* 터치하기 편한 간격 */
    margin: 0 !important;
    border-bottom: 2px solid transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
}

/* 활성화된 탭 (진한 글자 + 검은 밑줄) */
.xm .nav-tabs > .active > a,
.xm .nav-tabs > .active > a:hover,
.xm .nav-tabs > .active > a:focus {
    color: #111 !important;           /* 진한 검정 */
    font-weight: 700 !important;
    border: none !important;
    border-bottom: 2px solid #111 !important; /* 포인트 */
    background-color: transparent !important;
}

/* 2. [하단 버튼] 투박한 회색톤 (그라데이션 제거) */
.xm .btnArea.btn-group {
    display: flex !important;
    justify-content: flex-end !important; /* 우측 정렬 */
    gap: 8px !important;
    border: none !important;
    padding: 0 !important;
}

.xm .btnArea.btn-group .btn {
    /* [요청] 투박한 회색톤 스타일 */
    background-color: #f0f0f0 !important;  /* 연한 회색 배경 */
    background-image: none !important;     /* 그라데이션 완전 제거 */
    border: 1px solid #ccc !important;     /* 단순한 회색 테두리 */
    color: #333 !important;                /* 글자색 */
    
    border-radius: 2px !important;         /* 거의 각지게 (2px) */
    box-shadow: none !important;           /* 그림자 제거 (Flat) */
    text-shadow: none !important;
    
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 15px !important;
    height: 38px !important;               /* 적당한 높이 */
    line-height: 36px !important;          /* 수직 정렬 */
    transition: background-color 0.2s !important;
}

/* 버튼 마우스 호버 (조금 더 진한 회색) */
.xm .btnArea.btn-group .btn:hover {
    background-color: #e0e0e0 !important;
    border-color: #bbb !important;
    color: #000 !important;
}

/* [탈퇴 버튼] 만 예외로 약간의 붉은기 (선택사항 - 싫으시면 삭제 가능) */
.xm .btnArea.btn-group .btn[href*="dispMemberLeave"]:hover {
    background-color: #ffeaea !important; /* 호버시에만 살짝 붉게 */
    border-color: #ffcccc !important;
    color: #d9534f !important;
}

/* 3. 모바일 버튼 대응 */
@media (max-width: 768px) {
    .xm .btnArea.btn-group {
        flex-direction: column !important; /* 모바일은 세로로 */
    }
    .xm .btnArea.btn-group .btn {
        width: 100% !important;
        margin-bottom: 5px !important;
    }
}

/* ========================================================================
   [Hios Skin] Submenu Wrap Layout
   설명: 화면이 작아지면 메뉴가 잘리지 않고 아래로 줄바꿈되어 배치됨
   ========================================================================== */

/* 1. 탭 메뉴 컨테이너: 줄바꿈 허용 */
.xm .nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important;       /* [핵심] 공간 부족시 다음 줄로 내림 */
    justify-content: flex-start !important; /* 왼쪽부터 정렬 */
    height: auto !important;          /* 높이 자동 조절 */
    overflow: visible !important;     /* 스크롤 제거 */
    white-space: normal !important;   /* 텍스트 줄바꿈 허용 */
    
    width: 100% !important;
    border-bottom: 1px solid #ddd !important;
    margin-bottom: 30px !important;
    padding-bottom: 0 !important;
    gap: 10px 5px !important;         /* [세로, 가로] 간격 설정 */
}

/* 2. 개별 탭 항목 */
.xm .nav-tabs > li {
    float: none !important;
    flex: 0 0 auto !important;        /* 크기 자동 */
    display: inline-block !important;
    margin-bottom: -1px !important;   /* 하단 선과 맞물리게 */
}

/* 3. 탭 버튼 디자인 (심플한 텍스트형) */
.xm .nav-tabs > li > a {
    display: block !important;
    padding: 8px 12px !important;     /* 여백 적당히 */
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #888 !important;           /* 평소 연한 회색 */
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important; /* 밑줄 공간 */
    border-radius: 0 !important;
    transition: color 0.2s ease !important;
}

/* 4. 활성화된 탭 & 호버 효과 */
.xm .nav-tabs > .active > a,
.xm .nav-tabs > .active > a:hover,
.xm .nav-tabs > .active > a:focus,
.xm .nav-tabs > li > a:hover {
    color: #111 !important;           /* 진한 검정 */
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #111 !important; /* 검정 밑줄 */
}

/* 5. 모바일 최적화 (버튼처럼 보이게 간격 조정) */
@media (max-width: 768px) {
    .xm .nav-tabs {
        gap: 5px 8px !important;      /* 모바일에서는 간격 조정 */
        padding-bottom: 5px !important; /* 하단 여백 살짝 */
    }
    
    .xm .nav-tabs > li > a {
        font-size: 13px !important;   /* 글자 크기 살짝 조절 */
        padding: 8px 10px !important;
    }
}

/* ========================================================================
   [Hios Skin] Search Bar Modern Polish
   설명: 검색창을 버튼과 동일한 '투박한 회색톤 & 2px 라디우스'로 통일
   ========================================================================== */

/* 1. 검색 폼 컨테이너 (.pagination form) 정렬 */
.xm .pagination form {
    display: inline-flex !important;  /* 가로로 나란히 배치 */
    align-items: center !important;   /* 수직 중앙 정렬 */
    justify-content: center !important;
    gap: 4px !important;              /* 요소 사이 간격 4px */
    margin: 20px 0 !important;        /* 위아래 여백 */
}

/* 2. [공통 설정] 선택창, 입력창, 버튼 스타일 통일 */
.xm .pagination form select,
.xm .pagination form input[type="text"],
.xm .pagination form button,
.xm .pagination form .btn,
.xm .pagination form input[type="submit"] {
    height: 38px !important;          /* 높이 38px (버튼과 동일) */
    line-height: normal !important;   /* 글자 수직 정렬 */
    padding: 0 12px !important;       /* 내부 여백 */
    font-size: 13px !important;
    font-family: 'Pretendard', sans-serif !important;
    
    border: 1px solid #ccc !important; /* 깔끔한 회색 테두리 */
    border-radius: 2px !important;     /* 2px 라디우스 (각진 느낌) */
    background-image: none !important; /* 그라데이션 제거 */
    box-shadow: none !important;       /* 그림자 제거 */
    box-sizing: border-box !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* 3. [선택창 & 입력창] 흰색 배경 */
.xm .pagination form select,
.xm .pagination form input[type="text"] {
    background-color: #fff !important;
    color: #333 !important;
}

/* 포커스 효과 (진한 회색) */
.xm .pagination form select:focus,
.xm .pagination form input[type="text"]:focus {
    border-color: #555 !important;
    outline: none !important;
}

/* 입력창 너비 (적당하게) */
.xm .pagination form input[type="text"] {
    width: 200px !important;
    min-width: 150px !important;
}

/* 4. [검색 버튼] 투박한 회색톤 (회원정보 버튼과 깔맞춤) */
.xm .pagination form button,
.xm .pagination form .btn,
.xm .pagination form input[type="submit"] {
    background-color: #f0f0f0 !important; /* 연한 회색 배경 */
    color: #333 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-width: 60px !important;       /* 최소 너비 확보 */
    transition: background-color 0.2s !important;
}

/* 버튼 호버 효과 */
.xm .pagination form button:hover,
.xm .pagination form .btn:hover,
.xm .pagination form input[type="submit"]:hover {
    background-color: #e0e0e0 !important; /* 살짝 진해짐 */
    border-color: #bbb !important;
    color: #000 !important;
}

/* 5. 모바일 대응 */
@media (max-width: 768px) {
    .xm .pagination form {
        display: flex !important;
        flex-direction: column !important; /* 모바일은 세로 배치 */
        align-items: stretch !important;   /* 가로 꽉 차게 */
        gap: 8px !important;
    }
    .xm .pagination form input[type="text"],
    .xm .pagination form select,
    .xm .pagination form button {
        width: 100% !important;
    }
}

/* ========================================================================
   [Hios Skin] Mobile Search Bar Fix (Horizontal Layout)
   설명: 모바일에서도 검색창이 세로로 쌓이지 않고 '한 줄'로 깔끔하게 정렬됨
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. 검색 폼 컨테이너: 강제로 가로 배치 */
    .xm .pagination form {
        display: flex !important;
        flex-direction: row !important;   /* [핵심] 세로(column) -> 가로(row) 변경 */
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;     /* 줄바꿈 금지 */
        gap: 4px !important;              /* 간격 4px 유지 */
        width: 100% !important;
        margin: 15px 0 !important;
    }

    /* 2. 요소별 너비 비율 조정 (스마트 리사이징) */
    
    /* (1) 선택창 (제목/내용 등) */
    .xm .pagination form select {
        flex: 0 0 85px !important;        /* 너비 85px로 고정 (너무 작지 않게) */
        width: 85px !important;
        min-width: 0 !important;          /* 찌그러짐 방지 */
        padding: 0 5px !important;        /* 내부 여백 줄임 (글자 확보) */
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    /* (2) 입력창 (검색어) */
    .xm .pagination form input[type="text"] {
        flex: 1 1 auto !important;        /* 남은 공간을 모두 차지함 (가변 너비) */
        width: auto !important;           /* 100% 해제 */
        min-width: 0 !important;          /* 좁은 화면에서도 버티기 */
    }

    /* (3) 검색 버튼 */
    .xm .pagination form button,
    .xm .pagination form .btn,
    .xm .pagination form input[type="submit"] {
        flex: 0 0 55px !important;        /* 버튼 너비 55px 고정 */
        width: 55px !important;
        min-width: 0 !important;
        padding: 0 !important;            /* 여백 제거하고 중앙 정렬 */
    }
}