@charset "UTF-8";

/* Original file: files/cache/assets/compiled/f2f42398f963412369d3059081c86865885f1512.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:inherit;font-size:13px;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=f2f42398f963412369d3059081c86865885f1512.rhymix.scss.min.map */

/* Original file: common/css/xeicon/xeicon.min.css */

@font-face{font-family:xeicon;src:url("../../../../common/css/xeicon/fonts/xeicon.eot?v=1.0.4");src:url("../../../../common/css/xeicon/fonts/xeicon.eot?#iefix&v=1.0.4")format('embedded-opentype'),url("../../../../common/css/xeicon/fonts/xeicon.woff2?v=1.0.4")format('woff2'),url("../../../../common/css/xeicon/fonts/xeicon.woff?v=1.0.4")format('woff'),url("../../../../common/css/xeicon/fonts/xeicon.ttf?v=1.0.4")format('truetype'),url("../../../../common/css/xeicon/fonts/xeicon.svg?v=1.0.4#xeicon")format('svg');font-weight:400;font-style:normal}i.xi,i[class^="xi-"],i[class*=" xi-"]{display:inline-block;font-family:xeicon;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.xi-home:before{content:"\e606"}.xi-bars:before{content:"\e607"}.xi-plus:before{content:"\e603"}.xi-plus-circle:before{content:"\e611"}.xi-plus-square:before{content:"\e612"}.xi-minus:before{content:"\e613"}.xi-minus-circle:before{content:"\e614"}.xi-minus-square:before{content:"\e615"}.xi-close:before{content:"\e616"}.xi-close-circle:before{content:"\e617"}.xi-close-square:before{content:"\e618"}.xi-angle-left:before{content:"\e60b"}.xi-left-circle:before{content:"\e61a"}.xi-left-square:before{content:"\e61b"}.xi-angle-right:before{content:"\e60d"}.xi-right-circle:before{content:"\e61d"}.xi-right-square:before{content:"\e61e"}.xi-angle-up:before{content:"\e60e"}.xi-up-circle:before{content:"\e620"}.xi-up-square:before{content:"\e621"}.xi-angle-down:before{content:"\e619"}.xi-down-circle:before{content:"\e623"}.xi-down-square:before{content:"\e624"}.xi-arrow-left:before{content:"\e625"}.xi-arrow-right:before{content:"\e626"}.xi-arrow-up:before{content:"\e627"}.xi-arrow-down:before{content:"\e628"}.xi-angle-double-left:before{content:"\e629"}.xi-angle-double-right:before{content:"\e62a"}.xi-angle-double-up:before{content:"\e62b"}.xi-angle-double-down:before{content:"\e62c"}.xi-caret-left:before{content:"\e62d"}.xi-caret-left-circle:before{content:"\e62e"}.xi-caret-left-square:before{content:"\e62f"}.xi-caret-right:before{content:"\e630"}.xi-caret-right-circle:before{content:"\e631"}.xi-caret-right-square:before{content:"\e632"}.xi-caret-up:before{content:"\e633"}.xi-caret-up-circle:before{content:"\e634"}.xi-caret-up-square:before{content:"\e635"}.xi-caret-down:before{content:"\e636"}.xi-caret-down-circle:before{content:"\e637"}.xi-caret-down-square:before{content:"\e638"}.xi-arrows:before{content:"\e639"}.xi-arrows-alt:before{content:"\e63a"}.xi-expand-square:before{content:"\e61c"}.xi-compress-square:before{content:"\e63c"}.xi-arrows-h:before{content:"\e63e"}.xi-arrows-v:before{content:"\e63f"}.xi-expand:before{content:"\e640"}.xi-compress:before{content:"\e641"}.xi-refresh:before{content:"\e642"}.xi-power-off:before{content:"\e643"}.xi-alt:before{content:"\e644"}.xi-command:before{content:"\e645"}.xi-esc:before{content:"\e646"}.xi-eye:before{content:"\e64a"}.xi-eye-slash:before{content:"\e61f"}.xi-toggle:before{content:"\e647"}.xi-toggle-off:before{content:"\e648"}.xi-toggle-on:before{content:"\e649"}.xi-ellipsis-h:before{content:"\e64b"}.xi-ellipsis-v:before{content:"\e64c"}.xi-link:before{content:"\e600"}.xi-link-l:before{content:"\e601"}.xi-unlink:before{content:"\e602"}.xi-download-circle:before{content:"\e64d"}.xi-upload-circle:before{content:"\e650"}.xi-download:before{content:"\e651"}.xi-upload:before{content:"\e652"}.xi-download-disk:before{content:"\e653"}.xi-upload-disk:before{content:"\e654"}.xi-archive:before{content:"\e655"}.xi-download-my:before{content:"\e656"}.xi-download-bottom:before{content:"\e657"}.xi-download-caret:before{content:"\e658"}.xi-cloud:before{content:"\e659"}.xi-cloud-upload:before{content:"\e65a"}.xi-cloud-download:before{content:"\e65b"}.xi-upload-square:before{content:"\e65d"}.xi-download-square:before{content:"\e622"}.xi-share2:before{content:"\e64e"}.xi-share-l:before{content:"\e64f"}.xi-share-alt:before{content:"\e65f"}.xi-share-arrow-alt:before{content:"\e661"}.xi-cloud-minus:before{content:"\e663"}.xi-external-share:before{content:"\e664"}.xi-external-link:before{content:"\e665"}.xi-rss-square:before{content:"\e666"}.xi-code-fork:before{content:"\e667"}.xi-sitemap:before{content:"\e65c"}.xi-wifi-router:before{content:"\e668"}.xi-wifi:before{content:"\e669"}.xi-signal:before{content:"\e66a"}.xi-antenna:before{content:"\e660"}.xi-marquee-add:before{content:"\e66e"}.xi-marquee-remove:before{content:"\e66f"}.xi-exchange:before{content:"\e670"}.xi-repeat:before{content:"\e671"}.xi-pen:before{content:"\e673"}.xi-eraser:before{content:"\e674"}.xi-magnifier:before{content:"\e63b"}.xi-magnifier-expand:before{content:"\e63d"}.xi-magnifier-reduce:before{content:"\e65e"}.xi-trash:before{content:"\e662"}.xi-scissors:before{content:"\e675"}.xi-pin:before{content:"\e678"}.xi-clip:before{content:"\e679"}.xi-key:before{content:"\e683"}.xi-slip-tongs:before{content:"\e684"}.xi-lock:before{content:"\e66b"}.xi-unlock:before{content:"\e66c"}.xi-target:before{content:"\e68f"}.xi-paper:before{content:"\e604"}.xi-stack-paper:before{content:"\e605"}.xi-pen-point:before{content:"\e67a"}.xi-pencil-point:before{content:"\e67b"}.xi-brush-point:before{content:"\e67c"}.xi-magnet:before{content:"\e67d"}.xi-cube:before{content:"\e67e"}.xi-type:before{content:"\e66d"}.xi-paint-brush:before{content:"\e672"}.xi-paint-bucket:before{content:"\e676"}.xi-crop:before{content:"\e677"}.xi-marquee:before{content:"\e685"}.xi-color:before{content:"\e687"}.xi-rgb:before{content:"\e67f"}.xi-ruler:before{content:"\e68c"}.xi-ruler-triangle:before{content:"\e680"}.xi-magic:before{content:"\e68d"}.xi-eyedropper:before{content:"\e681"}.xi-canvas:before{content:"\e682"}.xi-cog:before{content:"\e686"}.xi-wrench:before{content:"\e68b"}.xi-align-justify:before{content:"\e690"}.xi-align-left:before{content:"\e691"}.xi-align-center:before{content:"\e692"}.xi-align-right:before{content:"\e693"}.xi-layout-full:before{content:"\e694"}.xi-layout-side-left:before{content:"\e695"}.xi-layout-side-right:before{content:"\e696"}.xi-layout-left-mid:before{content:"\e6a1"}.xi-layout-center:before{content:"\e6a7"}.xi-layout-side-three:before{content:"\e6ac"}.xi-layout-grid:before{content:"\e697"}.xi-layout-top:before{content:"\e698"}.xi-layout-top-left:before{content:"\e699"}.xi-layout-top-grid:before{content:"\e69a"}.xi-layout-top-three:before{content:"\e6ad"}.xi-layout-top-center:before{content:"\e69b"}.xi-layout-top-left-mid:before{content:"\e69c"}.xi-layout-top-right:before{content:"\e69d"}.xi-bold:before{content:"\e69e"}.xi-underline:before{content:"\e69f"}.xi-italic:before{content:"\e6a0"}.xi-caps:before{content:"\e6ae"}.xi-strikethrough:before{content:"\e6a2"}.xi-paragraph:before{content:"\e6a3"}.xi-list-ul:before{content:"\e6a4"}.xi-list-ul-square:before{content:"\e6a5"}.xi-list-ol:before{content:"\e6a6"}.xi-list-ul-l:before{content:"\e6af"}.xi-indent:before{content:"\e6a8"}.xi-indent-arrow:before{content:"\e6a9"}.xi-dedent:before{content:"\e6aa"}.xi-dedent-arrow:before{content:"\e6ab"}.xi-contents-right:before{content:"\e6b0"}.xi-contents-left:before{content:"\e6b1"}.xi-contents-grid:before{content:"\e6b2"}.xi-lineheight-plus:before{content:"\e6b4"}.xi-lineheight-minus:before{content:"\e6b5"}.xi-lineheight:before{content:"\e688"}.xi-code:before{content:"\e689"}.xi-rotate-right:before{content:"\e6b8"}.xi-rotate-left:before{content:"\e6b9"}.xi-user:before{content:"\e68a"}.xi-user-plus:before{content:"\e68e"}.xi-user-minus:before{content:"\e6b3"}.xi-user-check:before{content:"\e6b6"}.xi-user-circle:before{content:"\e6b7"}.xi-user-info:before{content:"\e6ba"}.xi-user-add:before{content:"\e6bb"}.xi-users:before{content:"\e6c0"}.xi-user-folder:before{content:"\e6c4"}.xi-user-address:before{content:"\e6c5"}.xi-user-lock:before{content:"\e6c6"}.xi-female:before{content:"\e6c7"}.xi-male:before{content:"\e6c8"}.xi-gender:before{content:"\e6c9"}.xi-woman:before{content:"\e6bc"}.xi-man:before{content:"\e6bd"}.xi-toilet:before{content:"\e6be"}.xi-love:before{content:"\e6bf"}.xi-handshake:before{content:"\e6c1"}.xi-meeting:before{content:"\e6c2"}.xi-community:before{content:"\e6c3"}.xi-family:before{content:"\e6ca"}.xi-lecture:before{content:"\e6cb"}.xi-maternity:before{content:"\e6cd"}.xi-baby:before{content:"\e6cf"}.xi-wheelchair:before{content:"\e6d0"}.xi-collaboration:before{content:"\e6d3"}.xi-envelope:before{content:"\e6cc"}.xi-letter:before{content:"\e6ce"}.xi-postcard:before{content:"\e6d4"}.xi-envelope-open:before{content:"\e6d1"}.xi-at:before{content:"\e6d2"}.xi-postbox:before{content:"\e6d6"}.xi-reply:before{content:"\e6d7"}.xi-reply-all:before{content:"\e6d8"}.xi-reply-l:before{content:"\e6d9"}.xi-reply-all-l:before{content:"\e6da"}.xi-paper-plane:before{content:"\e6d5"}.xi-refresh-l:before{content:"\e6db"}.xi-undo:before{content:"\e6dc"}.xi-chat:before{content:"\e6dd"}.xi-message:before{content:"\e6de"}.xi-message-list:before{content:"\e6df"}.xi-comment:before{content:"\e6eb"}.xi-comments:before{content:"\e6ec"}.xi-note:before{content:"\e6ed"}.xi-smiley-face:before{content:"\e6ee"}.xi-neutral-face:before{content:"\e6ef"}.xi-sad-face:before{content:"\e6f0"}.xi-happy-face:before{content:"\e6f1"}.xi-lol-face:before{content:"\e6f2"}.xi-dead-face:before{content:"\e6f3"}.xi-angry-face:before{content:"\e6f4"}.xi-confused-face:before{content:"\e6f7"}.xi-wink-face:before{content:"\e6f9"}.xi-lips-sealed-face:before{content:"\e6fa"}.xi-thumbs-up:before{content:"\e6fc"}.xi-thumbs-down:before{content:"\e6fd"}.xi-star:before{content:"\e6fe"}.xi-heart:before{content:"\e6ff"}.xi-badge:before{content:"\e700"}.xi-medal:before{content:"\e701"}.xi-trophy:before{content:"\e753"}.xi-present:before{content:"\e755"}.xi-tag:before{content:"\e70a"}.xi-tags:before{content:"\e70b"}.xi-flag-triangle:before{content:"\e70c"}.xi-bookmark:before{content:"\e70d"}.xi-book-spread:before{content:"\e70e"}.xi-book:before{content:"\e70f"}.xi-tagged-book:before{content:"\e710"}.xi-crown:before{content:"\e711"}.xi-check:before{content:"\e6e0"}.xi-check-box:before{content:"\e6e1"}.xi-check-boxout:before{content:"\e6e2"}.xi-check-circle:before{content:"\e6e3"}.xi-check-circleout:before{content:"\e6e4"}.xi-check-shield:before{content:"\e6e5"}.xi-check-shieldout:before{content:"\e6e6"}.xi-check-comment:before{content:"\e6e8"}.xi-check-commentout:before{content:"\e6e7"}.xi-check-home-o:before{content:"\e712"}.xi-check-home:before{content:"\e6e9"}.xi-check-homeout:before{content:"\e6ea"}.xi-form:before{content:"\e713"}.xi-form-check:before{content:"\e714"}.xi-form-checkout:before{content:"\e715"}.xi-notice:before{content:"\e608"}.xi-announce:before{content:"\e609"}.xi-slash-circle:before{content:"\e60a"}.xi-ban-circle:before{content:"\e716"}.xi-ban-square:before{content:"\e717"}.xi-unknown-square:before{content:"\e718"}.xi-unknown-circle:before{content:"\e719"}.xi-rollback:before{content:"\e6f5"}.xi-rollback-circle:before{content:"\e6f6"}.xi-info-circle:before{content:"\e71a"}.xi-info-suqare:before{content:"\e71b"}.xi-info-triangle:before{content:"\e6f8"}.xi-new:before{content:"\e71e"}.xi-update:before{content:"\e725"}.xi-information-square:before{content:"\e726"}.xi-information-circle:before{content:"\e727"}.xi-help:before{content:"\e6fb"}.xi-skull:before{content:"\e728"}.xi-image:before{content:"\e729"}.xi-images:before{content:"\e72b"}.xi-camera:before{content:"\e72c"}.xi-camera-round:before{content:"\e702"}.xi-camera-retro:before{content:"\e703"}.xi-cameracorder:before{content:"\e704"}.xi-shutter:before{content:"\e72d"}.xi-shuffle:before{content:"\e60c"}.xi-step-backward:before{content:"\e705"}.xi-step-forward:before{content:"\e706"}.xi-pause:before{content:"\e72e"}.xi-fast-backward:before{content:"\e707"}.xi-fast-forward:before{content:"\e708"}.xi-eject:before{content:"\e72f"}.xi-stop:before{content:"\e709"}.xi-record:before{content:"\e71c"}.xi-play:before{content:"\e71d"}.xi-forward:before{content:"\e71f"}.xi-backward:before{content:"\e720"}.xi-pause-o:before{content:"\e721"}.xi-step-forward-o:before{content:"\e722"}.xi-step-backward-o:before{content:"\e723"}.xi-eject-o:before{content:"\e724"}.xi-video-camera:before{content:"\e72a"}.xi-movie:before{content:"\e730"}.xi-cine-camera:before{content:"\e731"}.xi-video-call:before{content:"\e732"}.xi-film:before{content:"\e733"}.xi-volume-circle:before{content:"\e738"}.xi-volume-off-circle:before{content:"\e734"}.xi-volume:before{content:"\e735"}.xi-volume-min:before{content:"\e73c"}.xi-volume-mid:before{content:"\e73b"}.xi-volume-max:before{content:"\e73a"}.xi-volume-plus:before{content:"\e73d"}.xi-volume-minus:before{content:"\e73e"}.xi-volume-slash:before{content:"\e73f"}.xi-volume-off:before{content:"\e740"}.xi-headset:before{content:"\e736"}.xi-microphone:before{content:"\e737"}.xi-microphone-slash:before{content:"\e739"}.xi-stand-mic:before{content:"\e741"}.xi-dynamic-mic:before{content:"\e742"}.xi-volume-bar:before{content:"\e743"}.xi-music:before{content:"\e744"}.xi-music-scale:before{content:"\e74f"}.xi-speaker:before{content:"\e745"}.xi-record-play:before{content:"\e746"}.xi-music-keyboard:before{content:"\e748"}.xi-adult:before{content:"\e749"}.xi-marker:before{content:"\e60f"}.xi-marker-circle:before{content:"\e763"}.xi-marker-plus:before{content:"\e764"}.xi-marker-minus:before{content:"\e765"}.xi-marker-multiply:before{content:"\e766"}.xi-pin-circle:before{content:"\e767"}.xi-pin-plus:before{content:"\e768"}.xi-pin-minus:before{content:"\e769"}.xi-pin-multiply:before{content:"\e76a"}.xi-map-marker:before{content:"\e74a"}.xi-map-folding:before{content:"\e770"}.xi-location-arrow:before{content:"\e771"}.xi-compass:before{content:"\e74b"}.xi-gps:before{content:"\e774"}.xi-flag-wind:before{content:"\e74e"}.xi-flag:before{content:"\e750"}.xi-flag-line:before{content:"\e751"}.xi-car:before{content:"\e752"}.xi-bus:before{content:"\e754"}.xi-taxi:before{content:"\e756"}.xi-subway:before{content:"\e757"}.xi-ship:before{content:"\e758"}.xi-scooter:before{content:"\e759"}.xi-bike:before{content:"\e75a"}.xi-ambulance:before{content:"\e75b"}.xi-truck:before{content:"\e75c"}.xi-flight:before{content:"\e75d"}.xi-automobile:before{content:"\e75e"}.xi-walking:before{content:"\e75f"}.xi-bicycle:before{content:"\e760"}.xi-motorbike:before{content:"\e761"}.xi-cruise:before{content:"\e762"}.xi-bus-side:before{content:"\e76b"}.xi-train:before{content:"\e76c"}.xi-helicopter:before{content:"\e76d"}.xi-shipping:before{content:"\e76e"}.xi-gas-station:before{content:"\e76f"}.xi-coffee:before{content:"\e772"}.xi-restaurants:before{content:"\e773"}.xi-florist:before{content:"\e775"}.xi-market:before{content:"\e776"}.xi-hlz:before{content:"\e777"}.xi-park:before{content:"\e778"}.xi-cake:before{content:"\e779"}.xi-cash-machine:before{content:"\e77a"}.xi-gamepad:before{content:"\e77b"}.xi-hospital:before{content:"\e77c"}.xi-bank-o:before{content:"\e77e"}.xi-monitor:before{content:"\e77f"}.xi-laptop:before{content:"\e780"}.xi-pc:before{content:"\e781"}.xi-mobile:before{content:"\e782"}.xi-tablet:before{content:"\e783"}.xi-tv:before{content:"\e784"}.xi-mouse:before{content:"\e77d"}.xi-print:before{content:"\e785"}.xi-fax:before{content:"\e787"}.xi-battery-min:before{content:"\e788"}.xi-battery-mid:before{content:"\e78b"}.xi-battery-full:before{content:"\e78c"}.xi-keyboard:before{content:"\e78e"}.xi-telephone:before{content:"\e610"}.xi-phone:before{content:"\e78f"}.xi-ringing:before{content:"\e791"}.xi-missed:before{content:"\e793"}.xi-reception:before{content:"\e794"}.xi-outgoing:before{content:"\e795"}.xi-call-log:before{content:"\e796"}.xi-plug:before{content:"\e78d"}.xi-presentation:before{content:"\e797"}.xi-projector:before{content:"\e79b"}.xi-radio:before{content:"\e79c"}.xi-diskette:before{content:"\e786"}.xi-usb:before{content:"\e79d"}.xi-memorycard:before{content:"\e79e"}.xi-webcam:before{content:"\e79f"}.xi-cd-r:before{content:"\e789"}.xi-hdd:before{content:"\e78a"}.xi-line-sharer:before{content:"\e7a0"}.xi-tablet-pen:before{content:"\e7a1"}.xi-time:before{content:"\e790"}.xi-alarm-clock:before{content:"\e792"}.xi-timer:before{content:"\e7a2"}.xi-time-forward:before{content:"\e7a3"}.xi-time-back:before{content:"\e7a4"}.xi-bell:before{content:"\e798"}.xi-bell-ring:before{content:"\e799"}.xi-bell-slash:before{content:"\e79a"}.xi-sandwatch-min:before{content:"\e7a5"}.xi-sandwatch-mid:before{content:"\e7a6"}.xi-sandwatch-full:before{content:"\e7a7"}.xi-watch:before{content:"\e7a8"}.xi-calendar:before{content:"\e7a9"}.xi-calendar-o:before{content:"\e7aa"}.xi-calendar-month:before{content:"\e7ab"}.xi-calendar-week:before{content:"\e7ac"}.xi-calendar-add:before{content:"\e7ad"}.xi-calendar-remove:before{content:"\e7ae"}.xi-calendar-cancel:before{content:"\e7af"}.xi-calendar-check:before{content:"\e7b0"}.xi-file:before{content:"\e7b1"}.xi-file-add:before{content:"\e7b2"}.xi-file-remove:before{content:"\e7b3"}.xi-file-text:before{content:"\e7b4"}.xi-documents:before{content:"\e7b5"}.xi-file-image:before{content:"\e7b6"}.xi-file-movie:before{content:"\e7b7"}.xi-file-music:before{content:"\e7b8"}.xi-file-code:before{content:"\e7b9"}.xi-file-zip:before{content:"\e7ba"}.xi-file-excel:before{content:"\e7bb"}.xi-file-word:before{content:"\e7bc"}.xi-file-powerpoint:before{content:"\e7bd"}.xi-file-check:before{content:"\e7be"}.xi-file-upload:before{content:"\e7bf"}.xi-file-download:before{content:"\e7c0"}.xi-file-bookmark:before{content:"\e7c1"}.xi-folder:before{content:"\e7c2"}.xi-folder-open:before{content:"\e7c3"}.xi-folder-check:before{content:"\e7c4"}.xi-folder-plus:before{content:"\e7c5"}.xi-folder-remove:before{content:"\e7c6"}.xi-folder-upload:before{content:"\e7c7"}.xi-folder-download:before{content:"\e7c8"}.xi-folder-zip:before{content:"\e7c9"}.xi-windows:before{content:"\e7ca"}.xi-windows-text:before{content:"\e7cb"}.xi-windows-ban:before{content:"\e7cc"}.xi-windows-add:before{content:"\e7cd"}.xi-windows-remove:before{content:"\e7ce"}.xi-windows-check:before{content:"\e7cf"}.xi-windows-refresh:before{content:"\e7d0"}.xi-windows-search:before{content:"\e7d1"}.xi-windows-lock:before{content:"\e7d2"}.xi-computer-network:before{content:"\e7d3"}.xi-home-network:before{content:"\e7d4"}.xi-cloud-network:before{content:"\e7d5"}.xi-internet-network:before{content:"\e7d6"}.xi-server:before{content:"\e7d7"}.xi-server-folder:before{content:"\e7d8"}.xi-db-min:before{content:"\e7d9"}.xi-db-mid:before{content:"\e7da"}.xi-db-full:before{content:"\e7db"}.xi-db-pull:before{content:"\e7dc"}.xi-db-push:before{content:"\e7dd"}.xi-chart-bar:before{content:"\e7de"}.xi-rise:before{content:"\e7df"}.xi-decline:before{content:"\e7e0"}.xi-chart-circle:before{content:"\e7e1"}.xi-chart-donut:before{content:"\e7e2"}.xi-chart-pyramid:before{content:"\e7e3"}.xi-chart-line:before{content:"\e7e4"}.xi-chart-star:before{content:"\e7e5"}.xi-yuan:before{content:"\e7e6"}.xi-yen:before{content:"\e7e7"}.xi-pound:before{content:"\e7e8"}.xi-euro:before{content:"\e7e9"}.xi-won:before{content:"\e7ea"}.xi-dollar:before{content:"\e7eb"}.xi-peso:before{content:"\e7ec"}.xi-rupee:before{content:"\e7ed"}.xi-rial:before{content:"\e7ee"}.xi-credit-card:before{content:"\e7ef"}.xi-wallet:before{content:"\e7f0"}.xi-money:before{content:"\e7f3"}.xi-piggy-bank:before{content:"\e7f4"}.xi-strongbox:before{content:"\e7f5"}.xi-bank:before{content:"\e7f8"}.xi-briefcase:before{content:"\e7f9"}.xi-percent:before{content:"\e7fa"}.xi-calculator:before{content:"\e7fb"}.xi-payment:before{content:"\e7fc"}.xi-scales:before{content:"\e7fd"}.xi-cart:before{content:"\e7fe"}.xi-cart-add:before{content:"\e7ff"}.xi-cart-remove:before{content:"\e800"}.xi-shopping-bag:before{content:"\e801"}.xi-basket:before{content:"\e802"}.xi-barcode:before{content:"\e803"}.xi-box:before{content:"\e804"}.xi-fragile:before{content:"\e805"}.xi-hat:before{content:"\e806"}.xi-underwear:before{content:"\e807"}.xi-shirts:before{content:"\e808"}.xi-dress:before{content:"\e809"}.xi-sofa:before{content:"\e80a"}.xi-clothes:before{content:"\e80b"}.xi-barter:before{content:"\e80c"}.xi-shop:before{content:"\e80d"}.xi-shoes:before{content:"\e80e"}.xi-glasses:before{content:"\e80f"}.xi-ring:before{content:"\e810"}.xi-lipstick:before{content:"\e811"}.xi-toilet-paper:before{content:"\e812"}.xi-backpack:before{content:"\e813"}.xi-tent:before{content:"\e814"}.xi-sticker:before{content:"\e815"}.xi-coupon:before{content:"\e816"}.xi-feeding-bottle:before{content:"\e817"}.xi-apple:before{content:"\e818"}.xi-education:before{content:"\e84a"}.xi-qr-code:before{content:"\e857"}.xi-devices:before{content:"\e865"}.xi-html5:before{content:"\e866"}.xi-css3:before{content:"\e867"}.xi-ruby:before{content:"\e868"}.xi-radiation:before{content:"\e7f1"}.xi-rocket:before{content:"\e7f2"}.xi-satellite:before{content:"\e869"}.xi-atom:before{content:"\e86a"}.xi-shield:before{content:"\e86b"}.xi-globus:before{content:"\e7f6"}.xi-saturn:before{content:"\e86c"}.xi-network:before{content:"\e86d"}.xi-idea:before{content:"\e86e"}.xi-funnel:before{content:"\e7f7"}.xi-chip:before{content:"\e86f"}.xi-microscope:before{content:"\e870"}.xi-gene:before{content:"\e871"}.xi-vitro:before{content:"\e872"}.xi-robot:before{content:"\e873"}.xi-fire:before{content:"\e874"}.xi-spinner-1:before{content:"\e875"}.xi-spinner-2:before{content:"\e876"}.xi-spinner-3:before{content:"\e877"}.xi-spinner-4:before{content:"\e878"}.xi-spinner-5:before{content:"\e879"}.xi-spinner-6:before{content:"\e87a"}.xi-sun:before{content:"\e87b"}.xi-sunset:before{content:"\e87c"}.xi-umbrella:before{content:"\e87d"}.xi-humidity:before{content:"\e87e"}.xi-snow:before{content:"\e87f"}.xi-fog:before{content:"\e880"}.xi-lightning:before{content:"\e881"}.xi-cloudiness:before{content:"\e882"}.xi-cloudy-rain:before{content:"\e883"}.xi-heavy-snow:before{content:"\e884"}.xi-rain:before{content:"\e885"}.xi-cloudy-night:before{content:"\e886"}.xi-partly-cloudy:before{content:"\e887"}.xi-cloudy:before{content:"\e888"}.xi-wind:before{content:"\e889"}.xi-windy:before{content:"\e88a"}.xi-night:before{content:"\e88b"}.xi-full-moon:before{content:"\e88c"}.xi-waxing-gibbous:before{content:"\e88d"}.xi-halfmoon:before{content:"\e88e"}.xi-crescent:before{content:"\e88f"}.xi-hot:before{content:"\e890"}.xi-warm:before{content:"\e891"}.xi-cold:before{content:"\e892"}.xi-tree:before{content:"\e893"}.xi-leaf:before{content:"\e894"}.xi-flower:before{content:"\e895"}.xi-tornado:before{content:"\e896"}.xi-snowman:before{content:"\e897"}.xi-facebook:before{content:"\e819"}.xi-google-plus:before{content:"\e81a"}.xi-twitter:before{content:"\e81b"}.xi-vk:before{content:"\e81c"}.xi-blogger:before{content:"\e81d"}.xi-hubpages:before{content:"\e81e"}.xi-medium:before{content:"\e81f"}.xi-naver:before{content:"\e820"}.xi-tumblr:before{content:"\e821"}.xi-xing:before{content:"\e822"}.xi-bloglovin:before{content:"\e823"}.xi-stumbleupon:before{content:"\e824"}.xi-delicious:before{content:"\e825"}.xi-linkedin:before{content:"\e826"}.xi-pocket:before{content:"\e827"}.xi-feedly:before{content:"\e828"}.xi-social-rssfeed:before{content:"\e829"}.xi-digg:before{content:"\e82a"}.xi-reddit:before{content:"\e82b"}.xi-social-email:before{content:"\e82c"}.xi-social-print:before{content:"\e82d"}.xi-github:before{content:"\e82e"}.xi-git:before{content:"\e82f"}.xi-hunie:before{content:"\e830"}.xi-trello:before{content:"\e831"}.xi-yobi:before{content:"\e832"}.xi-d2:before{content:"\e898"}.xi-skillshare:before{content:"\e833"}.xi-slideshare:before{content:"\e834"}.xi-stackoverflow:before{content:"\e835"}.xi-flickr:before{content:"\e836"}.xi-instagram:before{content:"\e837"}.xi-kakaostory:before{content:"\e838"}.xi-path:before{content:"\e839"}.xi-behance:before{content:"\e83a"}.xi-deviantart:before{content:"\e83b"}.xi-dribbble:before{content:"\e83c"}.xi-pinterest:before{content:"\e83d"}.xi-evernote:before{content:"\e83e"}.xi-onenote:before{content:"\e83f"}.xi-goodreads:before{content:"\e840"}.xi-kickstarter:before{content:"\e841"}.xi-senscritique:before{content:"\e842"}.xi-myplace:before{content:"\e843"}.xi-soundcloud:before{content:"\e844"}.xi-vimeo:before{content:"\e845"}.xi-youtube:before{content:"\e846"}.xi-foursquare:before{content:"\e847"}.xi-trover:before{content:"\e848"}.xi-facebook-messenger:before{content:"\e849"}.xi-kakaotalk:before{content:"\e899"}.xi-line-messenger:before{content:"\e84b"}.xi-skype:before{content:"\e84c"}.xi-telegram:before{content:"\e84d"}.xi-wechat:before{content:"\e84e"}.xi-whatsapp:before{content:"\e84f"}.xi-bitrix:before{content:"\e850"}.xi-concrete5:before{content:"\e851"}.xi-dot-cms:before{content:"\e852"}.xi-drupal:before{content:"\e853"}.xi-expressionengine:before{content:"\e854"}.xi-ghost:before{content:"\e855"}.xi-joomla:before{content:"\e856"}.xi-magento:before{content:"\e858"}.xi-opencart:before{content:"\e859"}.xi-oscommerce:before{content:"\e85a"}.xi-prestashop:before{content:"\e85b"}.xi-silverstripe:before{content:"\e85c"}.xi-typo3:before{content:"\e85d"}.xi-ubercart:before{content:"\e85e"}.xi-vbulletin:before{content:"\e85f"}.xi-wix:before{content:"\e860"}.xi-virtuemart:before{content:"\e861"}.xi-wordpress:before{content:"\e862"}.xi-xpressengine:before{content:"\e863"}.xi-xe:before{content:"\e89b"}.xi-zencart:before{content:"\e864"}.xi-copyright:before{content:"\e89c"}.xi-copyleft:before{content:"\e89d"}.xi-registered:before{content:"\e89e"}.xi-trademark:before{content:"\e89f"}.xi-cc:before{content:"\e8a0"}.xi-by:before{content:"\e8a1"}.xi-sa:before{content:"\e8a2"}.xi-nd:before{content:"\e8a3"}.xi-nc:before{content:"\e8a4"}.xi-nc-eu:before{content:"\e8a5"}.xi-nc-jp:before{content:"\e8a6"}.xi-remix:before{content:"\e8a7"}.xi-pd:before{content:"\e8a8"}.xi-sampling:before{content:"\e8a9"}.xi-share:before{content:"\e8aa"}.xi-zero:before{content:"\e8ab"}.xi-x{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.xi-2x{font-size:2em}.xi-3x{font-size:3em}.xi-4x{font-size:4em}.xi-5x{font-size:5em}.xi-spin{-webkit-animation:xi-spin 2s infinite linear;animation:xi-spin 2s infinite linear}@-webkit-keyframes xi-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes xi-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.xi-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.xi-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.xi-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.xi-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.xi-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .xi-flip-horizontal,:root .xi-flip-vertical,:root .xi-rotate-180,:root .xi-rotate-270,:root .xi-rotate-90{filter:none}.xi-fw{width:1.28571429em;text-align:center}.xi-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.xi-ul>li{position:relative}.xi-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.xi-li.xi-lg{left:-1.85714286em}.xi-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.xi.pull-left{margin-right:.3em}.xi.pull-right{margin-left:.3em}

/* Original file: layouts/KF_rx_netcite/css/layout.css */

/* =============================================================
   kfgcm.org Layout CSS  |  prefix: kf-
============================================================= */

:root {
    --kf-sb-full:  220px;
    --kf-sb-slim:   60px;

    --kf-accent-red:       #C0392B;
    --kf-accent-red-h:     #A93226;
    --kf-accent-red-light: rgba(192,57,43,.13);
    --kf-accent-blue:      #2471A3;
    --kf-accent-blue-h:    #1A5276;

    --kf-sb-bg:          #1E2A38;
    --kf-sb-border:      #2D3D50;
    --kf-sb-text:        #C8D6E5;
    --kf-sb-muted:       #7A9AB8;
    --kf-sb-hover:       rgba(255,255,255,.07);
    --kf-sb-active-bg:   rgba(192,57,43,.18);
    --kf-sb-active-text: #E8847B;
    --kf-sb-shadow:      4px 0 16px rgba(0,0,0,.35);

    --kf-tb-bg:     #1a1a2e;
    --kf-tb-border: #0f0f1a;
    --kf-tb-text:   #d0d0e0;
    --kf-tb-muted:  #8888aa;
    --kf-tb-hover:  rgba(255,255,255,.08);
    --kf-tb-active: #E8847B;
    --kf-tb-h:      50px;
    --kf-tb-shadow: 0 2px 12px rgba(0,0,0,.4);

    --kf-body-bg:   #0f1923;
    --kf-text:      #d8e0e8;
    --kf-text2:     #8899aa;
    --kf-ct-bg:     #162230;
    --kf-ct-shadow: inset 3px 0 8px rgba(0,0,0,.45);

    --kf-ft-bg:     #111820;
    --kf-ft-border: #0a1018;
    --kf-ft-text:   #667788;
    --kf-ft-shadow: 0 -2px 10px rgba(0,0,0,.35);

    --kf-dd-bg:     #1e2d3d;
    --kf-dd-border: #2d3d50;
    --kf-dd-shadow: 0 6px 20px rgba(0,0,0,.5);
    --kf-dd-hover:  rgba(255,255,255,.07);
    --kf-dd-danger: #f87171;

    --kf-tr:    all .2s ease;
    --kf-tb-z:  100;
    --kf-sb-z:  200;
    --kf-ov-z:  190;
    --kf-fly-z: 500;
}

html:not(.gloomy) {
    --kf-sb-bg:     #1E2A38;
    --kf-sb-border: #2D3D50;
    --kf-sb-shadow: -3px 0 16px rgba(0,0,0,.6), 3px 0 16px rgba(0,0,0,.6);

    --kf-tb-bg:     #ffffff;
    --kf-tb-border: #e2e8f0;
    --kf-tb-text:   #1a202c;
    --kf-tb-muted:  #64748b;
    --kf-tb-hover:  #f1f5f9;
    --kf-tb-active: #C0392B;
    --kf-tb-shadow: 3px 3px 16px rgba(0,0,0,.10);

    --kf-body-bg:   #f0f4f8;
    --kf-text:      #1a202c;
    --kf-ct-bg:     #ffffff;
    --kf-ct-shadow: 3px 0 8px rgba(0,0,0,.20);

    --kf-ft-bg:     #ffffff;
    --kf-ft-border: #e2e8f0;
    --kf-ft-text:   #64748b;
    --kf-ft-shadow: 0 2px 16px rgba(0,0,0,.30);

    --kf-dd-bg:     #ffffff;
    --kf-dd-border: #e2e8f0;
    --kf-dd-shadow: 0 6px 20px rgba(0,0,0,.12);
    --kf-dd-hover:  #f1f5f9;
    --kf-dd-danger: #ef4444;
}

html.gloomy {
    --kf-sb-bg:     #0d1117;
    --kf-sb-border: #1e2a38;
    --kf-sb-shadow: 4px 0 20px rgba(0,0,0,.6);
    --kf-tb-bg:     #0d1117;
    --kf-tb-border: #161b22;
    --kf-tb-text:   #c9d1d9;
    --kf-tb-muted:  #8b949e;
    --kf-tb-hover:  rgba(255,255,255,.06);
    --kf-tb-active: #E8847B;
    --kf-tb-shadow: 0 2px 12px rgba(0,0,0,.6);
    --kf-body-bg:   #0d1117;
    --kf-ct-bg:     #161b22;
    --kf-ct-shadow: inset 3px 0 8px rgba(0,0,0,.45);
    --kf-ft-bg:     #0d1117;
    --kf-ft-border: #161b22;
    --kf-ft-text:   #8b949e;
    --kf-ft-shadow: 0 -2px 12px rgba(0,0,0,.5);
    --kf-dd-bg:     #1c2128;
    --kf-dd-border: #2d333b;
    --kf-dd-shadow: 0 6px 20px rgba(0,0,0,.6);
    --kf-dd-hover:  rgba(255,255,255,.05);
}

/* =============================================================
   Reset
============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: 'Nanum Gothic', 'Malgun Gothic', sans-serif;
    background: var(--kf-body-bg);
    color: var(--kf-text);
    transition: background .25s, color .25s;
}
body.kf-noscroll { overflow: hidden; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; outline: none; }

/* =============================================================
   최상위 래퍼
============================================================= */
.kf-wrap {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    margin: 0 auto;
    position: relative;
}

/* =============================================================
   사이드바
============================================================= */
.kf-sidebar {
    width: var(--kf-sb-full);
    flex-shrink: 0;
    background: var(--kf-sb-bg);
    border-right: 1px solid var(--kf-sb-border);
    box-shadow: var(--kf-sb-shadow);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: visible;
    transition: width .28s ease, background .2s;
    z-index: var(--kf-sb-z);
}

.kf-sidebar.kf-sb-slim { width: var(--kf-sb-slim); }

.kf-sb-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--kf-sb-border) transparent;
}
.kf-sb-inner::-webkit-scrollbar       { width: 4px; }
.kf-sb-inner::-webkit-scrollbar-track { background: transparent; }
.kf-sb-inner::-webkit-scrollbar-thumb { background: var(--kf-sb-border); border-radius: 2px; }

/* ── 사이드바 상단 헤더 (로고 + 닫기 햄버거) ── */
.kf-sb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.75rem .75rem 2.75rem 1rem;
    border-bottom: 1px solid var(--kf-sb-border);
    flex-shrink: 0;
    overflow: hidden;
    min-height: var(--kf-tb-h);
}

.kf-sb-logo-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: center;
}

.kf-logo-img {
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: max-height .28s, max-width .28s;
}
.kf-sidebar.kf-sb-slim .kf-logo-img { max-height: 24px; max-width: 32px; }

.kf-logo-text {
    font-size: .9rem;
    font-weight: 700;
    color: var(--kf-accent-red);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-size .28s, opacity .28s;
}
.kf-sidebar.kf-sb-slim .kf-logo-text { font-size: 0; opacity: 0; }

/* 사이드바 내부 햄버거 (닫기용) */
.kf-sb-close {
    display: none; /* 모바일에서만 표시 */
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: var(--kf-sb-muted);
    border-radius: 4px;
    transition: var(--kf-tr);
    margin-left: .5rem;
}
.kf-sb-close:hover { background: var(--kf-sb-hover); color: var(--kf-sb-text); }

/* ── 사이드바 네비게이션 ── */
.kf-sb-nav { padding: .5rem 0; }
.kf-nav-list { list-style: none; padding: 0; margin: 0; }
.kf-nav-item { position: relative; }

/* 공통 링크 베이스 */
.kf-nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .575rem 1rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--kf-sb-text);
    white-space: nowrap;
    overflow: hidden;
    transition: var(--kf-tr);
    position: relative;
}
.kf-nav-link:hover { background: var(--kf-sb-hover); color: #fff; }
.kf-nav-link.kf-active {
    background: var(--kf-sb-active-bg);
    color: var(--kf-sb-active-text);
    border-left: 3px solid var(--kf-accent-red);
    padding-left: calc(.875rem - 3px);
}

/* 링크 텍스트 */
.kf-nav-link-text {
    transition: opacity .2s, max-width .28s;
    white-space: nowrap;
    overflow: hidden;
    max-width: 200px;
}
.kf-sidebar.kf-sb-slim .kf-nav-link-text { opacity: 0; max-width: 0; }

/* ── slim: 서브 없는 1단 — 원형 배지 ── */
.kf-nav-badge {
    display: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--kf-sb-hover);
    border: 1px solid var(--kf-sb-border);
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--kf-sb-text);
    flex-shrink: 0;
    transition: var(--kf-tr);
    margin: 0 auto;
}
.kf-sidebar.kf-sb-slim .kf-nav-item > .kf-nav-link .kf-nav-badge { display: flex; }
.kf-sidebar.kf-sb-slim .kf-nav-item > .kf-nav-link:hover .kf-nav-badge {
    background: var(--kf-accent-red);
    border-color: var(--kf-accent-red);
    color: #fff;
}
.kf-sidebar.kf-sb-slim .kf-nav-item > .kf-nav-link.kf-active .kf-nav-badge {
    background: var(--kf-accent-red);
    border-color: var(--kf-accent-red);
    color: #fff;
}

/* ── slim: 서브 있는 1단 — 사각 배지 ── */
.kf-nav-sq-badge {
    display: none;
    width: 30px;
    height: 26px;
    border-radius: 4px;
    background: var(--kf-sb-hover);
    border: 1px solid var(--kf-sb-border);
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--kf-sb-text);
    flex-shrink: 0;
    transition: var(--kf-tr);
    letter-spacing: -.02em;
}
.kf-sidebar.kf-sb-slim .kf-nav-toggle .kf-nav-sq-badge { display: flex; }
.kf-sidebar.kf-sb-slim .kf-nav-toggle:hover .kf-nav-sq-badge,
.kf-sidebar.kf-sb-slim .kf-nav-toggle > .kf-nav-link:hover ~ * .kf-nav-sq-badge {
    background: rgba(192,57,43,.25);
    border-color: var(--kf-accent-red);
    color: var(--kf-sb-active-text);
}
.kf-sidebar.kf-sb-slim .kf-nav-toggle > .kf-nav-link.kf-active .kf-nav-sq-badge {
    background: var(--kf-sb-active-bg);
    border-color: var(--kf-accent-red);
    color: var(--kf-sb-active-text);
}

/* ── slim 1단 메뉴: 툴팁 ── */
.kf-nav-tooltip {
    position: fixed;
    left: 0; /* JS가 설정 */
    top: 0;
    background: var(--kf-sb-bg);
    border: 1px solid var(--kf-sb-border);
    border-left: 3px solid var(--kf-accent-red);
    box-shadow: 4px 4px 14px rgba(0,0,0,.4);
    padding: .35rem .875rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--kf-sb-text);
    white-space: nowrap;
    border-radius: 0 4px 4px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: var(--kf-fly-z);
    pointer-events: none;
}
.kf-nav-tooltip.kf-tip-on {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 서브있는 항목 toggle row */
.kf-nav-toggle > .kf-nav-link { pointer-events: none; }
.kf-nav-toggle > .kf-nav-link .kf-nav-link-text { pointer-events: auto; }
.kf-nav-toggle { display: flex; align-items: center; position: relative; }
.kf-nav-toggle > .kf-nav-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .575rem .875rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--kf-sb-text);
    white-space: nowrap;
    overflow: hidden;
    transition: var(--kf-tr);
}
.kf-nav-toggle > .kf-nav-link:hover { color: #fff; }
.kf-nav-toggle.kf-open > .kf-nav-link,
.kf-nav-toggle > .kf-nav-link.kf-active { color: var(--kf-sb-active-text); }

/* slim 시 toggle 행 중앙 정렬 */
.kf-sidebar.kf-sb-slim .kf-nav-toggle { justify-content: center; }
.kf-sidebar.kf-sb-slim .kf-nav-toggle > .kf-nav-link {
    flex: 0 0 auto;
    padding: .575rem;
    justify-content: center;
}

/* arrow */
.kf-nav-arrow {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kf-sb-muted);
    transition: transform .25s, color .2s, opacity .2s, width .2s;
    margin-right: .25rem;
}
.kf-nav-arrow:hover { color: var(--kf-sb-text); }
.kf-nav-toggle.kf-open .kf-nav-arrow { transform: rotate(180deg); color: var(--kf-sb-text); }
.kf-sidebar.kf-sb-slim .kf-nav-arrow { opacity: 0; width: 0; margin: 0; pointer-events: none; }

/* 아코디언 서브 */
.kf-subnav {
    list-style: none;
    padding: 0; margin: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
}
.kf-sidebar.kf-sb-slim .kf-subnav { max-height: 0 !important; }

.kf-subnav-link {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .4rem .875rem .4rem 2rem;
    font-size: .78rem;
    color: var(--kf-sb-muted);
    white-space: nowrap;
    overflow: hidden;
    transition: var(--kf-tr);
}
.kf-subnav-link:hover    { background: var(--kf-sb-hover); color: var(--kf-sb-text); }
.kf-subnav-link.kf-active { color: var(--kf-accent-red); background: var(--kf-sb-active-bg); }
.kf-subnav-link svg { flex-shrink: 0; opacity: .6; }

/* ── 플라이아웃 (JS position:fixed) ── */
.kf-flyout {
    position: fixed;
    min-width: 180px;
    background: var(--kf-sb-bg);
    border: 1px solid var(--kf-sb-border);
    border-left: 3px solid var(--kf-accent-red);
    box-shadow: 6px 4px 20px rgba(0,0,0,.45);
    list-style: none;
    padding: .375rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: var(--kf-fly-z);
    pointer-events: none;
}
.kf-flyout.kf-fly-on {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}
.kf-flyout-title {
    display: block;
    padding: .45rem 1rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--kf-sb-active-text);
    border-bottom: 1px solid var(--kf-sb-border);
    margin-bottom: .25rem;
    white-space: nowrap;
}
a.kf-flyout-title {
    text-decoration: none;
    cursor: pointer;
}
a.kf-flyout-title:hover {
    color: #fff;
    background: var(--kf-sb-hover);
}
.kf-flyout-link {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .4rem 1rem;
    font-size: .8rem;
    color: var(--kf-sb-text);
    white-space: nowrap;
    transition: var(--kf-tr);
}
.kf-flyout-link:hover    { background: var(--kf-sb-hover); color: #fff; }
.kf-flyout-link.kf-active { color: var(--kf-accent-red); }

/* ── 사이드바 위젯 ── */
.kf-sb-widget {
    padding: .75rem;
    border-top: 1px solid var(--kf-sb-border);
    flex-shrink: 0;
    overflow: hidden;
    transition: padding .28s;
}
.kf-sb-widget img { max-width: 100%; height: auto; display: block; transition: max-width .28s; }
.kf-sidebar.kf-sb-slim .kf-sb-widget { padding: .5rem .375rem; }
.kf-sidebar.kf-sb-slim .kf-sb-widget img { max-width: calc(var(--kf-sb-slim) - 12px); }

/* =============================================================
   오버레이 (모바일)
============================================================= */
.kf-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: var(--kf-ov-z);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.kf-overlay.kf-ov-on { opacity: 1; pointer-events: auto; }

/* =============================================================
   바디
============================================================= */
.kf-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background .2s;
}

/* =============================================================
   상단 유틸리티 바
============================================================= */
.kf-topbar {
    position: sticky;
    top: 0;
    z-index: var(--kf-tb-z);
    height: var(--kf-tb-h);
    background: var(--kf-tb-bg);
    border-bottom: 1px solid var(--kf-tb-border);
    box-shadow: var(--kf-tb-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    gap: .5rem;
    transition: background .2s, box-shadow .2s;
}
.kf-tb-left,
.kf-tb-right { display: flex; align-items: center; gap: .25rem; }

/* 햄버거 — 항상 표시 */
.kf-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 7px;
    color: var(--kf-tb-text);
    border-radius: 4px;
    flex-shrink: 0;
    transition: var(--kf-tr);
}
.kf-hamburger span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: var(--kf-tr);
}
.kf-hamburger:hover { background: var(--kf-tb-hover); color: var(--kf-accent-red); }

/* ── 상단 Utility 메뉴 — 클릭 드롭다운 ── */
.kf-top-nav { display: flex; align-items: center; }
.kf-top-nav-list { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; }
.kf-top-nav-item { position: relative; }

/* 드롭다운 트리거 버튼 */
.kf-top-dd-btn {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: 0 .875rem;
    height: var(--kf-tb-h);
    font-size: .8rem;
    font-weight: 600;
    color: var(--kf-tb-muted);
    white-space: nowrap;
    border-radius: 0;
    transition: var(--kf-tr);
    font-family: inherit;
    background: none;
    cursor: pointer;
    border: none;
}
.kf-top-dd-btn:hover  { background: var(--kf-tb-hover); color: var(--kf-tb-text); }
.kf-top-dd-btn.kf-active { color: var(--kf-tb-active); }

.kf-top-dd-arrow {
    width: 10px; height: 10px;
    opacity: .5;
    flex-shrink: 0;
    transition: transform .2s;
}
.kf-top-nav-item.kf-dd-open .kf-top-dd-arrow { transform: rotate(180deg); opacity: 1; }

/* 1단 드롭다운 패널 */
.kf-top-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    list-style: none;
    padding: .375rem 0;
    background: var(--kf-dd-bg);
    border: 1px solid var(--kf-dd-border);
    box-shadow: var(--kf-dd-shadow);
    border-radius: 0 0 6px 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all .18s ease;
    z-index: 300;
}
.kf-top-nav-item.kf-dd-open .kf-top-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* 서브 없는 단순 링크 */
.kf-top-nav-link {
    display: flex;
    align-items: center;
    padding: 0 .875rem;
    height: var(--kf-tb-h);
    font-size: .8rem;
    font-weight: 600;
    color: var(--kf-tb-muted);
    white-space: nowrap;
    transition: var(--kf-tr);
}
.kf-top-nav-link:hover  { background: var(--kf-tb-hover); color: var(--kf-tb-text); }
.kf-top-nav-link.kf-active { color: var(--kf-tb-active); }

.kf-top-sub-link {
    display: block;
    padding: .5rem 1rem;
    font-size: .8rem;
    color: var(--kf-tb-text);
    white-space: nowrap;
    transition: var(--kf-tr);
}
.kf-top-sub-link:hover    { background: var(--kf-dd-hover); }
.kf-top-sub-link.kf-active { color: var(--kf-accent-red); }

/* 사이트명 */
.kf-site-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--kf-tb-text);
    white-space: nowrap;
    margin-left: .5rem;
    opacity: .7;
}

/* 아이콘 버튼 */
.kf-tb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--kf-tb-muted);
    border: 1px solid transparent;
    transition: var(--kf-tr);
}
.kf-tb-btn:hover {
    background: var(--kf-tb-hover);
    color: var(--kf-tb-text);
    border-color: var(--kf-tb-border);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

html:not(.gloomy) .kf-icon-moon { display: none; }
html.gloomy       .kf-icon-sun  { display: none; }

/* 우측 드롭다운 */
.kf-tb-dd { position: relative; }
.kf-dd-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--kf-dd-bg);
    border: 1px solid var(--kf-dd-border);
    box-shadow: var(--kf-dd-shadow);
    border-radius: 8px;
    min-width: 160px;
    padding: .375rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .18s ease;
    z-index: 400;
}
.kf-tb-dd.kf-dd-open .kf-dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.kf-dd-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    font-size: .8125rem;
    color: var(--kf-tb-text);
    white-space: nowrap;
    transition: var(--kf-tr);
}
.kf-dd-item:hover  { background: var(--kf-dd-hover); }
.kf-dd-item svg    { flex-shrink: 0; opacity: .65; }
.kf-dd-danger      { color: var(--kf-dd-danger) !important; }
.kf-dd-danger:hover { background: rgba(239,68,68,.08); }

/* =============================================================
   SUB HEADER
============================================================= */
.kf-sub-header {overflow: hidden; width: 100%;}
.kf-sub-header-inner {margin: 0 auto; padding: .5rem 0 1rem;}

/* =============================================================
   메인 콘텐츠
============================================================= */
.kf-content {
    flex: 1;
    padding: 1.5rem;
    min-width: 0;
    background: var(--kf-ct-bg);
    box-shadow: var(--kf-ct-shadow);
    word-break: break-word;
    overflow-wrap: break-word;
    transition: background .2s;
}
.kf-content img,
.kf-content video,
.kf-content table { max-width: 100% !important; height: auto !important; }

/* =============================================================
   푸터
============================================================= */
.kf-footer {
    background: var(--kf-ft-bg);
    border-top: 1px solid var(--kf-ft-border);
    box-shadow: var(--kf-ft-shadow);
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: background .2s;
}
.kf-copyright { font-size: .8125rem; color: var(--kf-ft-text); line-height: 1.5; }
.kf-copyright a { color: var(--kf-accent-blue); transition: var(--kf-tr); }
.kf-copyright a:hover { color: var(--kf-accent-blue-h); }

.kf-dropup { position: relative; }
.kf-dropup-btn {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .35rem .875rem;
    font-size: .8125rem;
    color: var(--kf-ft-text);
    border: 1px solid var(--kf-dd-border);
    border-radius: 4px;
    transition: var(--kf-tr);
}
.kf-dropup-btn:hover { color: var(--kf-tb-text); border-color: var(--kf-accent-blue); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.kf-dropup-btn svg { transition: transform .2s; }
.kf-dropup.kf-du-open .kf-dropup-btn svg { transform: rotate(180deg); }

.kf-du-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    list-style: none;
    padding: .375rem 0;
    background: var(--kf-dd-bg);
    border: 1px solid var(--kf-dd-border);
    box-shadow: var(--kf-dd-shadow);
    border-radius: 8px;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all .18s ease;
    z-index: 400;
}
.kf-dropup.kf-du-open .kf-du-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.kf-du-item {
    display: block;
    padding: .45rem 1rem;
    font-size: .8125rem;
    color: var(--kf-tb-text);
    white-space: nowrap;
    transition: var(--kf-tr);
}
.kf-du-item:hover     { background: var(--kf-dd-hover); }
.kf-du-item.kf-active { color: var(--kf-accent-red); }

/* =============================================================
   반응형
============================================================= */
@media (min-width: 992px) {
    .kf-overlay  { display: none !important; }
    .kf-sidebar  { transform: none !important; position: sticky; }
    .kf-sb-close { display: none !important; }
}

@media (max-width: 991px) {
    .kf-overlay { display: block; }

    .kf-sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        z-index: var(--kf-sb-z);
        transform: translateX(-100%);
        transition: transform .3s ease, width .28s ease, background .2s;
    }
    .kf-sidebar.kf-sb-open { transform: translateX(0); }

    /* 모바일 사이드바 내 닫기 버튼 표시 */
    .kf-sb-close { display: flex; }

    /* 모바일에서 slim 무시 */
    .kf-sidebar.kf-sb-slim { width: var(--kf-sb-full) !important; }
    .kf-sidebar.kf-sb-slim .kf-nav-link-text { opacity: 1 !important; max-width: 200px !important; }
    .kf-sidebar.kf-sb-slim .kf-nav-arrow { opacity: 1 !important; width: 28px !important; pointer-events: auto !important; }
    .kf-sidebar.kf-sb-slim .kf-logo-img  { max-height: 36px !important; max-width: 100% !important; }
    .kf-sidebar.kf-sb-slim .kf-logo-text { font-size: .9rem !important; opacity: 1 !important; }
    .kf-sidebar.kf-sb-slim .kf-nav-badge { display: none !important; }
    .kf-flyout { display: none !important; }
    .kf-nav-tooltip { display: none !important; }

    .kf-top-nav  { display: none; }
    .kf-site-name { opacity: 1; }
}

@media (max-width: 576px) {
    .kf-content { padding: 1rem; }
    .kf-footer  { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .kf-du-menu { right: auto; left: 0; }
}

/* =============================================================
   위젯 2열 반응형
============================================================= */
@media (max-width: 480px) {
    [class*="col-left"],
    [class*="col-right"],
    [class*="col-center"] {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        clear: both !important;
    }
}

/* =============================================================
   DayNight 위젯 스킨 변수 브리지
   :root {
    --text-primary:   var(--kf-text, #1a202c);
    --text-secondary: var(--kf-text2, #4a5568);
    --bg-surface:     var(--kf-ct-bg, #ffffff);
    --border-color:   var(--kf-sb-border, #e2e8f0);
    --accent:         var(--kf-accent-red, #C0392B);
}
============================================================= */

/* Original file: layouts/KF_rx_netcite/css/module-fix.css */

/* 회원 모듈 전체 input 크기 복구 */
.xm .form-horizontal input[type="text"],
.xm .form-horizontal input[type="password"],
.xm .form-horizontal input[type="email"],
.xm .form-horizontal input[type="url"],
.xm .form-horizontal input[type="date"],
.xm .form-horizontal input[type="number"],
.xm .form-horizontal input[type="file"] {
    height: auto !important;
    box-sizing: border-box !important;
}

/* input-append 구조 대응 */
.xm .input-append input[type="text"],
.xm .input-append input[type="password"],
.xm .input-append input[type="email"] {
    height: auto !important;
    box-sizing: border-box !important;
}

/* 다국어/카테고리 입력창 (x_input-append) 대응 */
.x_input-append input[type="text"],
.x_input-append input[type="password"],
.x_input-append input[type="email"] {
    height: auto !important;
    box-sizing: border-box !important;
}

/* 카테고리 입력창 직접 지정 */
input[name="category_title"] {
    height: auto !important;
    box-sizing: border-box !important;
}

/* form-horizontal 밖에 있는 input 대응 */
.xm input[type="email"][readonly],
.xm input[type="text"][readonly] {
    height: auto !important;
    box-sizing: border-box !important;
}

/* form-horizontal 밖에 있는 단독 input 대응 */
.xm form input[type="text"],
.xm form input[type="password"],
.xm form input[type="email"],
.xm form input[type="url"],
.xm form input[type="date"],
.xm form input[type="number"] {
    height: auto !important;
    box-sizing: border-box !important;
}

.xm form input[readonly],
.xm form input[disabled] {
    height: auto !important;
    box-sizing: border-box !important;
}

.xm input[name="search_keyword"] {
    height: auto !important;
    box-sizing: border-box !important;
}

/* Communication 모듈 input 크기 복구 */
.xc input[type="text"],
.xc input[type="password"],
.xc input[type="email"],
.xc input[type="url"],
.xc input[type="date"],
.xc input[type="number"],
.xc input[type="file"] {
    height: auto !important;
    box-sizing: border-box !important;
}

.xc .pagination input[type="text"] {
    height: auto !important;
    box-sizing: border-box !important;
}

/* Original file: modules/board/skins/daynight_board/css/board.css */

/* ==========================================================
   DayNight Board Skin — board.css
   DayNight CSS 변수 연동 + Snow/Gloomy 자동 대응
   반응형: 768px / 480px 브레이크포인트
========================================================== */

/* ----------------------------------------------------------
   1. 기본 래퍼
---------------------------------------------------------- */
.dnb {
  color: var(--text-primary);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ----------------------------------------------------------
   2. 카테고리 탭
---------------------------------------------------------- */
.dnb-cat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

/* 전체 카테고리 */
.dnb-cat__all {
  padding: 0.24rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 3px;
  transition: all .15s ease;
}

.dnb-cat__all.dnb-cat--on {
  background: var(--accent);
  color: #fff;
}

.dnb-cat__all:hover {
  background: var(--accent);
  color: #fff;
}

/* 1차 카테고리 */
.dnb-cat__lv1 {
  padding: 0.22rem 0.5rem;
  font-size: 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  color: var(--text-secondary);
  transition: all .15s ease;
}

.dnb-cat__lv1:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.dnb-cat__lv1.dnb-cat--on {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* 2차 카테고리 */
.dnb-cat__lv2 {
  padding: 0.18rem 0.4rem;
  font-size: 0.68rem;
  border: 1px dashed var(--border-color);
  border-radius: 2px;
  color: var(--text-secondary);
  opacity: 0.8;
  margin-left: 0.35rem;
  transition: all .15s ease;
}

.dnb-cat__lv2:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.dnb-cat__lv2.dnb-cat--on {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  position: relative;
}

.dnb-cat__lv2.dnb-cat--on::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 70%;
  background: var(--accent);
  border-radius: 1px;
}

/* ----------------------------------------------------------
   3. 공통 버튼
---------------------------------------------------------- */
.dnb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: var(--transition, all .2s ease);
  text-decoration: none;
  white-space: nowrap;
}

.dnb-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.dnb-btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.dnb-btn--accent:hover {
  background: var(--accent-hover, #0EA5E9);
  border-color: var(--accent-hover, #0EA5E9);
  color: #fff;
}

.dnb-btn--danger {
  background: var(--danger, #EF4444);
  border-color: var(--danger, #EF4444);
  color: #fff;
}

.dnb-btn--danger:hover {
  opacity: 0.85;
  color: #fff;
}

.dnb-btn--sm {
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
}

.dnb-btn--list {
  background: var(--bg-primary);
}

/* ----------------------------------------------------------
   4. 공통 인풋
---------------------------------------------------------- */
.dnb-input {
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
  transition: var(--transition, all .2s ease);
  width: 100%;
}

.dnb-input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light);
}

.dnb-select {
  height: 2.25rem;
  padding: 0 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
}

/* ----------------------------------------------------------
   5. 배지
---------------------------------------------------------- */
.dnb-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
}

.dnb-badge--notice {
  background: var(--accent);
  color: #fff;
}

.dnb-badge--new {
  background: var(--success, #22C55E);
  color: #fff;
}

.dnb-badge--best {
  background: var(--warning, #F59E0B);
  color: #fff;
}

/* ----------------------------------------------------------
   6. 빈 목록
---------------------------------------------------------- */
.dnb-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}

.dnb-empty i {
  display: block;
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.4;
}

/* ----------------------------------------------------------
   7. 목록형 (테이블)
---------------------------------------------------------- */
.dnb-list a {text-decoration: none; color: var(--text-primary);}

.dnb-list a:hover,
.dnb-list a:active,
.dnb-list a:focus {text-decoration: underline; color: var(--text-secondary);}

.dnb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.dnb-table thead tr {
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.dnb-table th {
  padding: 0.65rem 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.dnb-table__no    { width: 60px; text-align: center; }
.dnb-table__date  { width: 90px; text-align: center; }
.dnb-table__count { width: 60px; text-align: center; }
.dnb-table__vote  { width: 55px; text-align: center; }
.dnb-table__check { width: 36px; text-align: center; }
.dnb-table__author { width: 90px; text-align: center; }

.dnb-table__row td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  font-size: 0.6875rem;
}

.dnb-table__row .dnb-table__title {
  font-size: 0.8125rem;
}

.dnb-table__row:hover td {
  background: var(--bg-surface);
}

.dnb-table__row--notice td {
  background: var(--accent-light);
}

.dnb-table__row--current td {
  background: var(--accent-light);
}

.dnb-table__title a {
  color: var(--text-primary);
}

.dnb-table__title a:hover {
  color: var(--accent);
}

.dnb-reply-count {
  margin-left: 0.25rem;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
}

.dnb-table__no,
.dnb-table__date,
.dnb-table__count,
.dnb-table__vote {
  text-align: center;
  color: var(--text-secondary);
}

/* 목록형 모바일: 날짜/조회/추천 숨김 */
@media (max-width: 768px) {
  .dnb-table__count,
  .dnb-table__vote,
  .dnb-table__check { display: none; }
  .dnb-table__author { display: none; }
}

@media (max-width: 480px) {
  .dnb-table__no   { display: none; }
  .dnb-table__date { width: 70px; font-size: 0.75rem; }
}

/* ----------------------------------------------------------
   8. 웹진형 (카드 그리드)
---------------------------------------------------------- */
.dnb-webzine {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dnb-webzine__item {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-primary);
  transition: var(--transition, all .2s ease);
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.05));
  display: flex;
  flex-direction: column;
}

.dnb-webzine__item:hover {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.1));
  transform: translateY(-2px);
}

.dnb-webzine__item--notice { border-top: 2px solid var(--accent); }

.dnb-webzine__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* ── 썸네일 영역 ── */
.dnb-webzine__thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.dnb-webzine__thumb img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.dnb-webzine__item:hover .dnb-webzine__thumb img {
  transform: scale(1.04);
}

/* 이미지 없을 때 */
.dnb-webzine__no-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  opacity: 0.3;
}

/* 공지/NEW 뱃지 — 좌상단 */
.dnb-webzine__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  z-index: 2;
}
.dnb-webzine__badge--notice { background: var(--accent); color: #fff; }
.dnb-webzine__badge--new    { background: var(--success, #22C55E); color: #fff; }

/* 그라데이션 오버레이 — 하단 제목/카테고리 */
.dnb-webzine__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.0)  100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.75rem 0.875rem;
}

.dnb-webzine__overlay-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* 카테고리 — 오버레이 안, 제목 위 */
.dnb-webzine__overlay-cat {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  /* 배경을 살짝 줘서 가독성 확보 */
  background: rgba(0,0,0,0.35);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  align-self: flex-start;
}

/* 제목 — 오버레이 하단 */
.dnb-webzine__overlay-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ── body 영역: 요약 + 메타 ── */
.dnb-webzine__body {
  padding: 0.75rem 0.875rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.dnb-webzine__summary {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.dnb-webzine__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: auto;
}

.dnb-webzine__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.dnb-webzine__meta svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.dnb-cart {
  position: absolute;
  top: 1rem;       /* 상단 여백 확대 */
  left: 0;
  width: 1.2rem;   /* 클릭하기 편하게 살짝 키움 */
  height: 1.2rem;
  cursor: pointer;
  
  /* 포인트 컬러 및 테두리 설정 */
  accent-color: var(--accent); 
  border: 1px solid var(--border-color);
  outline: none;
  
  /* 부드러운 전환 효과 */
  transition: var(--transition);
}

/* 체크박스에 마우스 올렸을 때 강조 */
.dnb-cart:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 5px var(--accent-light));
}

.dnb-admin-bar {
    background-color: var(--bg-secondary); /* 다크모드 대응 */
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    margin-bottom: 15px; /* 목록과의 간격 */
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
}

.dnb-admin-bar label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.dnb-admin-bar input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

@media (max-width: 480px) {
  .dnb-webzine { grid-template-columns: 1fr !important; }
}

/* ----------------------------------------------------------
   9. 갤러리형
---------------------------------------------------------- */
.dnb-gallery {
  display: grid;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dnb-gallery__item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
}

.dnb-gallery__item--notice .dnb-gallery__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: 8px;
  z-index: 2;
  pointer-events: none;
}

.dnb-gallery__thumb {
  position: relative;
  overflow: hidden;
  /* height는 style="{$dnb_th}px" 인라인으로 주입 */
}

.dnb-gallery__thumb img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.dnb-gallery__item:hover .dnb-gallery__thumb img {
  transform: scale(1.06);
}

.dnb-gallery__no-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 2.5rem;
  opacity: 0.25;
}

.dnb-gallery__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 40%, rgba(0,0,0,0.15));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.75rem;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.dnb-gallery__item:hover .dnb-gallery__overlay {
  opacity: 0;
}

.dnb-gallery__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
}

.dnb-gallery__badge--notice { background: var(--accent); color: #fff; }
.dnb-gallery__badge--new    { background: var(--success, #22C55E); color: #fff; }

.dnb-gallery__overlay-title {
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.3rem;
}

.dnb-gallery__overlay-meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
}

.dnb-gallery__title {
  padding: 0.5rem 0.6rem;
  font-size: 0.8125rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.25s ease;
}

/* hover 시 타이틀 숨김 (오버레이 반전과 세트) */
.dnb-gallery__item:hover .dnb-gallery__title {
  opacity: 0;
}

@media (max-width: 360px) {
  .dnb-gallery { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ----------------------------------------------------------
   10. FAQ형
---------------------------------------------------------- */
.dnb-faq {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 2px solid var(--accent);
}

.dnb-faq__item {
  position: relative;
  border-bottom: 1px solid var(--border-color);
}

.dnb-faq__item--notice .dnb-faq__q {
  background: var(--accent-light);
}

.dnb-faq__q {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: background 0.15s;
}

.dnb-faq__q:hover {
  background: var(--bg-surface);
}

/* 체크박스가 들어갈 공간만큼 질문 텍스트 밀어내기 (관리자일 때만) */
.dnb-faq__item:has(.dnb-cart) .dnb-faq__q {
    padding-left: 45px; /* 체크박스 크기만큼 왼쪽 패딩 추가 */
}

.dnb-faq__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--accent);
  color: #fff;
}

.dnb-faq__mark--notice {
  background: var(--text-secondary);
  font-size: 0.55rem;
}

.dnb-faq__mark--a {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  align-self: flex-start;
  margin-top: 0.1rem;
}

.dnb-faq__cat {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  flex-shrink: 0;
}

.dnb-faq__text {
  flex: 1;
  font-weight: 500;
}

.dnb-faq__meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-left: auto;
  flex-shrink: 0;
}

.dnb-faq__arrow {
  flex-shrink: 0;
  margin-left: 0.5rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  position: relative;
  transition: transform 0.2s ease;
}

.dnb-faq__arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
}

.dnb-faq__item.is-open .dnb-faq__arrow {
  transform: rotate(180deg);
}

.dnb-faq__a {
  display: none;
  padding: 0.85rem 1rem 1rem 1rem;
  background: var(--bg-surface);
  gap: 0.65rem;
  align-items: flex-start;
}

.dnb-faq__a.is-open {
  display: flex;
}

.dnb-faq__content {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.75;
  min-width: 0;
  word-break: break-word;
}

.dnb-faq__edit {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}

.dnb-faq__edit a {
  font-size: 0.7rem;
  color: var(--text-secondary);
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  white-space: nowrap;
}

.dnb-faq__edit a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 600px) {
  .dnb-faq__meta { display: none; }
}

/* ----------------------------------------------------------
   11. 블로그형
---------------------------------------------------------- */
.dnb-blog {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dnb-blog__item {
  display: flex;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.dnb-blog__item--notice {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
}

.dnb-blog__thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 135px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
}

.dnb-blog__thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.dnb-blog__item:hover .dnb-blog__thumb-wrap img {
  transform: scale(1.04);
}

.dnb-blog__no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-secondary);
  font-size: 2rem;
  opacity: 0.25;
}

.dnb-blog__thumb-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
}

.dnb-blog__thumb-badge--new {
  background: var(--success, #22C55E);
  color: #fff;
}

.dnb-blog__body {
  flex: 1;
  min-width: 0;
}

.dnb-blog__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.dnb-blog__cat {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dnb-blog__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 0.45rem;
}

.dnb-blog__title a {
  color: var(--text-primary);
}

.dnb-blog__title a:hover {
  color: var(--accent);
}

.dnb-blog__summary {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.65rem;
}

.dnb-blog__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.65rem;
}

.dnb-blog__meta i { margin-right: 0.2rem; }
.dnb-blog__meta a { color: inherit; }
.dnb-blog__meta a:hover { color: var(--accent); }

.dnb-blog__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8125rem;
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 600px) {
  .dnb-blog__item {
    flex-direction: column;
    gap: 0.75rem;
  }
  .dnb-blog__thumb-wrap {
    width: 100%;
    height: 180px;
  }
}

/* ----------------------------------------------------------
   12. 하단 푸터 (버튼/검색/페이지네이션)
---------------------------------------------------------- */
.dnb-footer {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dnb-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 검색창 전체 레이아웃 */
.dnb-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap; /* 버튼이 아래로 떨어지지 않도록 */
  overflow: visible;
  max-width: 420px; /* 원하는 길이 */
  width: 100%;
  margin: 0 auto; /* 가운데 정렬 원하면 */ 
}

/* hidden input은 flex에서 자리 차지하지 않게 */
.dnb-search input[type="hidden"] {
  display: none;
}

/* 검색 대상 select */
.dnb-search__select {
  height: 2.25rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.8125rem;
  flex-shrink: 0;
  max-width: 130px;
  box-sizing: border-box;
}

/* 버튼 공통 */
.dnb-search__btn,
.dnb-search button[type="submit"],
.dnb-search .dnb-btn {
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  white-space: nowrap;
  box-sizing: border-box;
}

.dnb-search__btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* input-wrap: flex 줄 높이를 깨지 않도록 고정 */
.dnb-search__input-wrap {
  height: 2.25rem; /* input과 동일하게 강제 */
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  min-width: 0; /* input이 줄어들 수 있게 */
}

/* input-wrap 내부 아이콘 */
.dnb-search__input-wrap i {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 0.875rem;
  pointer-events: none;
}

/* 검색 input */
.dnb-search__input {
  height: 100%; /* wrap 높이에 맞춤 */
  width: 100%;
  padding: 0 0.75rem 0 2rem; /* 아이콘 공간 확보 */
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
  box-sizing: border-box;
}

/* input focus 효과 */
.dnb-search__input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* ----------------------------------------------------------
   13. 페이지네이션
---------------------------------------------------------- */
.dnb-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

.dnb-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 0.8125rem;
  color: var(--text-primary);
  transition: var(--transition, all .2s ease);
  text-decoration: none;
}

.dnb-page-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.dnb-page-btn--current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

.dnb-page-btn--current:hover {
  color: #fff;
}

.dnb-page-btn--edge {
  color: var(--text-secondary);
}

/* ----------------------------------------------------------
   14. 본문 읽기 (_read)
---------------------------------------------------------- */
.dnb-read {
  max-width: 100%;
}

.dnb-read__header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}

.dnb-read__cat {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.dnb-read__cat a { color: inherit; }

.dnb-read__title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.dnb-read__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.dnb-read__meta i { margin-right: 0.25rem; }
.dnb-read__meta a { color: inherit; }

.dnb-read__body {
  padding: 1.5rem 0;
  min-height: 200px;
}

.dnb-read__body::after {
    content: "";
    display: block;
    clear: both;
}

/* 게시판 본문 링크 색상 */
.dnb-read__body a {color: var(--accent);}
.dnb-read__body a:visited {color: var(--accent-light);}
.dnb-read__body a:hover {color: var(--accent-hover);}

.dnb-read__tags {
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.dnb-tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 2rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: var(--transition, all .2s ease);
}

.dnb-tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.dnb-tag__count {
  font-size: 0.7rem;
  opacity: 0.7;
}

.dnb-read__sign {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin: 1rem 0;
  background: var(--bg-surface);
}

.dnb-read__sign img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

/* 추천 버튼 */
.dnb-read__vote-area {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin: 1rem 0;
}

.dnb-vote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.75rem 2rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition, all .2s ease);
  text-decoration: none;
}

.dnb-vote-btn i { font-size: 1.25rem; }
.dnb-vote-btn strong { font-size: 1.1rem; font-weight: 700; }

.dnb-vote-btn--up:hover,
.dnb-vote-btn--up.dnb-vote-btn--active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.dnb-vote-btn--down:hover,
.dnb-vote-btn--down.dnb-vote-btn--active {
  border-color: var(--danger, #EF4444);
  color: var(--danger, #EF4444);
  background: rgba(239,68,68,0.07);
}

/* 첨부파일 */
.dnb-files-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.8125rem;
  cursor: pointer;
}

.dnb-files-list {
  display: none;
  list-style: none;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
}

.dnb-files-list.is-open { display: block; }

.dnb-files-list li { padding: 0.3rem 0; }

.dnb-files-list a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.dnb-files-list a:hover { color: var(--accent); }

.dnb-file-size {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* 읽기 액션 */
.dnb-read__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

/* 이전/다음 */
.dnb-read__nav {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 1.5rem;
}

.dnb-read__nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  transition: background 0.15s;
  text-decoration: none;
}

.dnb-read__nav-item:first-child {
  border-bottom: 1px solid var(--border-color);
}

.dnb-read__nav-item:hover {
  background: var(--bg-surface);
  color: var(--accent);
}

.dnb-read__nav-label {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 60px;
}

.dnb-read__nav-title {
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   15. 확장변수 테이블
---------------------------------------------------------- */
.dnb-extra-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.dnb-extra-table th,
.dnb-extra-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
}

.dnb-extra-table th {
  background: var(--bg-surface);
  font-weight: 600;
  width: 140px;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   16. 댓글 (_comment)
---------------------------------------------------------- */
.dnb-comment {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--accent);
}

.dnb-comment__header h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dnb-comment__count {
  font-size: 0.875rem;
  color: var(--accent);
}

.dnb-comment__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dnb-comment__item {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.dnb-comment__item--reply {
  padding-left: 2rem;
  background: var(--bg-surface);
  margin-left: 1rem;
  border-left: 3px solid var(--border-color);
  border-radius: 0 6px 6px 0;
}

.dnb-comment__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.dnb-comment__avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.dnb-comment__avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.dnb-comment__avatar-default {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.dnb-comment__info { display: flex; flex-direction: column; }

.dnb-comment__author {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dnb-comment__author a { color: inherit; }

.dnb-comment__time {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.dnb-comment__body {
  font-size: 0.9rem;
  line-height: 1.7;
  padding-left: 3rem;
}

.dnb-comment__body--deleted {
  color: var(--text-secondary);
  font-style: italic;
}

.dnb-comment__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-left: 3rem;
  margin-top: 0.5rem;
}

.dnb-comment__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  transition: var(--transition, all .2s ease);
  text-decoration: none;
}

.dnb-comment__action-btn:hover {
  color: var(--accent);
  background: var(--bg-surface);
}

.dnb-comment__action-btn--active {
  color: var(--accent);
}

.dnb-comment__action-btn--delete:hover {
  color: var(--danger, #EF4444);
}

/* 댓글 작성폼 */
.dnb-comment__form {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
}

.dnb-comment__form-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dnb-comment__editor { margin-bottom: 0.75rem; }

.dnb-comment__form-footer {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* submit 버튼은 오른쪽 정렬 */
.dnb-comment__form-footer > button[type="submit"] {
  align-self: flex-end;
}

.dnb-comment__form-author {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dnb-comment__form-author .dnb-input {
  flex: 1;
  min-width: 120px;
}

.dnb-comment__form-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.8125rem;
}

.dnb-comment__reply-context {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-surface);
  border-radius: 0 6px 6px 0;
  margin-bottom: 1rem;
}

.dnb-comment__secret {
  padding: 0.75rem 1rem 0.75rem 3rem;
}

/* ----------------------------------------------------------
   17. 글쓰기 폼
---------------------------------------------------------- */
.dnb-write {
  background: var(--bg-primary);
}

.dnb-write__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  align-items: center;
}

.dnb-write__title-input {
  flex: 1;
  min-width: 200px;
  font-size: 1rem;
  height: 2.5rem;
  font-weight: 600;
}

.dnb-write__editor {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.dnb-write__footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.dnb-write__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  font-size: 0.8125rem;
}

.dnb-write__opts label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.dnb-write__author-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dnb-write__author-info .dnb-input { flex: 1; min-width: 120px; }

.dnb-write__tags,
.dnb-write__reason {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dnb-write__tags label,
.dnb-write__reason label {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.dnb-write__tags .dnb-input,
.dnb-write__reason .dnb-input {
  flex: 1;
}

.dnb-write__submit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.dnb-write__extra {
  margin-bottom: 0.75rem;
}

/* ----------------------------------------------------------
   18. 다이얼로그 (삭제/비밀번호)
---------------------------------------------------------- */
.dnb-dialog {
  max-width: 480px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.dnb-dialog__icon {
  font-size: 2.5rem;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.dnb-dialog__context {
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: left;
  max-height: 120px;
  overflow: hidden;
}

.dnb-dialog__msg {
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
}

.dnb-dialog__pw {
  margin-bottom: 1rem;
}

.dnb-dialog__actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

/* 비밀글 폼 */
.dnb-secret-form {
  text-align: center;
  padding: 0.5rem 1rem;
}

.dnb-secret-form i {
  font-size: 1.2rem;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 0.75rem;
}

.dnb-secret-form p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

.dnb-secret-form__row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  max-width: 360px;
  margin: 0 auto;
}

/* ----------------------------------------------------------
   19. 태그 클라우드
---------------------------------------------------------- */
.dnb-tag-cloud {
  padding: 1.5rem 0;
}

.dnb-tag-cloud__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dnb-tag-cloud__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------
   20. 공통 반응형
---------------------------------------------------------- */
@media (max-width: 600px) {
  .dnb-read__vote-area {
    gap: 0.5rem;
  }
  .dnb-vote-btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.75rem;
  }
  .dnb-read__title {
    font-size: 1.125rem;
  }
  .dnb-comment__body,
  .dnb-comment__actions {
    padding-left: 0;
  }
  .dnb-comment__item--reply {
    margin-left: 0.5rem;
  }
  .dnb-write__submit {
    justify-content: stretch;
  }
  .dnb-write__submit .dnb-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ----------------------------------------------------------
   21. 트랙백
---------------------------------------------------------- */
.dnb-trackback {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.dnb-trackback__header h2 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dnb-trackback__url {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    word-break: break-all;
}

.dnb-trackback__url a {
    color: var(--accent);
}

.dnb-trackback__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dnb-trackback__item {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-color);
}

.dnb-trackback__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.dnb-trackback__blog {
    font-size: 0.875rem;
    font-weight: 600;
}

.dnb-trackback__blog a {
    color: var(--text-primary);
}

.dnb-trackback__blog a:hover {
    color: var(--accent);
}

.dnb-trackback__body {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ----------------------------------------------------------
   22. 수정 이력 (update_log)
---------------------------------------------------------- */
.dnb-update-log__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dnb-update-log__reason {
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 1rem 0;
}

/* ----------------------------------------------------------
   23. 추천/비추천 로그 (vote_log)
---------------------------------------------------------- */
.dnb-vote-log {
    padding: 1rem 0;
}

.dnb-vote-log__section {
    margin-bottom: 1.5rem;
}

.dnb-vote-log__heading {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.dnb-vote-log__members {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ----------------------------------------------------------
   상단 툴바 (dnb-toolbar)
---------------------------------------------------------- */
.dnb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.375rem 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.dnb-toolbar__switcher {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.dnb-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: auto;
}

/* 스타일 전환 아이콘 버튼 */
.dnb-style-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
  border-radius: 4px;
  transition: var(--transition, all .2s ease);
}

.dnb-style-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dnb-style-btn:hover {
  color: var(--text-primary);
  background: var(--bg-primary);
}

.dnb-style-btn--on {
  color: var(--accent);
  background: var(--accent-light);
}

.dnb-style-btn--on:hover {
  color: var(--accent);
  background: var(--accent-light);
}

/* 툴바 아이콘 버튼 (글쓰기·태그·설정·문서관리) */
.dnb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
  border-radius: 4px;
  transition: var(--transition, all .2s ease);
}

.dnb-icon-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.dnb-icon-btn:hover {
  color: var(--accent);
  background: var(--bg-primary);
}


@media (max-width: 480px) {
  .dnb-toolbar {
    gap: 0.375rem;
    padding: 0.25rem 0.375rem;
  }
  .dnb-style-btn,
  .dnb-icon-btn {
    width: 26px;
    height: 26px;
    font-size: 0.875rem;
  }
}

/* ----------------------------------------------------------
   테마 토글 버튼
---------------------------------------------------------- */
/* 구분선 */
.dnb-toolbar__divider {
  width: 1px;
  height: 18px;
  background: var(--border-color);
  margin: 0 0.125rem;
  flex-shrink: 0;
}

/* 기본(snow): moon 표시 → 클릭하면 다크로 */
.dnb-theme-btn .dnb-theme-icon--moon { display: block; }
.dnb-theme-btn .dnb-theme-icon--sun  { display: none;  }

/* gloomy 상태: sun 표시 → 클릭하면 라이트로 */
.dnb-theme-btn[data-theme="gloomy"] .dnb-theme-icon--moon { display: none;  }
.dnb-theme-btn[data-theme="gloomy"] .dnb-theme-icon--sun  { display: block; }

/* ----------------------------------------------------------
   standalone 다크모드
   .dnb.dnb--dark 자체에 배경+색상 변수 재정의
   → 모든 하위 요소가 CSS 변수 상속으로 자동 적용
---------------------------------------------------------- */

/* ① div.dnb 자체에 배경 + CSS 변수 재정의 */
.dnb.dnb--dark {
    background:       #171717 !important;
    color:            #F5F5F5;
    --bg-primary:     #0F0F0F;
    --bg-secondary:   #171717;
    --bg-surface:     #1F1F1F;
    --border-color:   #2E2E2E;
    --text-primary:   #F5F5F5;
    --text-secondary: #A3A3A3;
    --accent:         #FF7000;
    --accent-hover:   #FFA000;
    --accent-light:   rgba(255,160,0,0.15);
    --shadow:         0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.4);
}

/* ② 명시적 background 지정이 필요한 요소들
      (var()를 쓰지 않고 흰색이 하드코딩된 경우 대비)
      color는 !important 없이 설정 → hover/active color 규칙이 정상 덮어쓸 수 있도록 
	  .dnb.dnb--dark .dnb-comment,
	  .dnb.dnb--dark .dnb-comment__item,
	  .dnb.dnb--dark .dnb-comment__item--reply,
	  .dnb.dnb--dark .dnb-comment__form,	*/
.dnb.dnb--dark .dnb-toolbar,
.dnb.dnb--dark .dnb-cat,
.dnb.dnb--dark .dnb-list,
.dnb.dnb--dark .dnb-table,
.dnb.dnb--dark .dnb-table thead th,
.dnb.dnb--dark .dnb-footer,
.dnb.dnb--dark .dnb-read,
.dnb.dnb--dark .dnb-read__nav-item,
.dnb.dnb--dark .dnb-read__vote-area,
.dnb.dnb--dark .dnb-extra-table th,
.dnb.dnb--dark .dnb-extra-table td,
.dnb.dnb--dark .dnb-write,
.dnb.dnb--dark .dnb-write__header,
.dnb.dnb--dark .dnb-write__footer,
.dnb.dnb--dark .dnb-webzine__item,
.dnb.dnb--dark .dnb-gallery__item,
.dnb.dnb--dark .dnb-blog__item,
.dnb.dnb--dark .dnb-faq__item {
    background-color: var(--bg-primary) !important;
    border-color:     var(--border-color) !important;
    color:            var(--text-primary);
}

/* ②-b 페이지네이션 버튼: !important 없이 base 색상만
      → .dnb-page-btn:hover 및 .dnb-page-btn--current 규칙이 정상 적용되도록 */
.dnb.dnb--dark .dnb-page-btn {
    background-color: var(--bg-primary);
    border-color:     var(--border-color);
    color:            var(--text-primary);
}

.dnb.dnb--dark .dnb-page-btn.dnb-page-btn--current {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.dnb.dnb--dark .dnb-page-btn.dnb-page-btn--current:hover {
  color: #000;
}

/* ③ surface 색 (한 단계 밝은 배경) .dnb.dnb--dark .dnb-comment__item--reply, */
.dnb.dnb--dark .dnb-toolbar,
.dnb.dnb--dark .dnb-table thead th,
.dnb.dnb--dark .dnb-table__row:hover,
.dnb.dnb--dark .dnb-read__nav-item:hover,
.dnb.dnb--dark .dnb-comment__action-btn:hover {
    background-color: var(--bg-surface);
	color: var(--accent);
}

/* ④ 입력 요소 */
.dnb.dnb--dark .dnb-search__input,
.dnb.dnb--dark .dnb-search__select,
.dnb.dnb--dark .dnb-input,
.dnb.dnb--dark .dnb-write__title-input {
    background-color: var(--bg-surface);
    border-color:     var(--border-color);
    color:            var(--text-primary);
}

/* ④-b 버튼: color !important 없이 base만 설정 → hover가 정상 덮어쓸 수 있도록 */
.dnb.dnb--dark .dnb-btn,
.dnb.dnb--dark .dnb-vote-btn {
    background-color: var(--bg-surface);
    border-color:     var(--border-color);
    color:            var(--text-primary);
}
.dnb.dnb--dark .dnb-input:focus,
.dnb.dnb--dark .dnb-write__title-input:focus,
.dnb.dnb--dark .dnb-search__input:focus { border-color: var(--accent); }

/* ⑤ secondary 텍스트 */
.dnb.dnb--dark .dnb-read__meta,
.dnb.dnb--dark .dnb-read__nav-label,
.dnb.dnb--dark .dnb-comment__time,
.dnb.dnb--dark .dnb-comment__body--deleted,
.dnb.dnb--dark .dnb-comment__action-btn,
.dnb.dnb--dark .dnb-table__date,
.dnb.dnb--dark .dnb-table__count,
.dnb.dnb--dark .dnb-table__vote,
.dnb.dnb--dark .dnb-table__author,
.dnb.dnb--dark .dnb-webzine__meta,
.dnb.dnb--dark .dnb-webzine__summary,
.dnb.dnb--dark .dnb-blog__meta,
.dnb.dnb--dark .dnb-blog__summary,
.dnb.dnb--dark .dnb-write__opts label,
.dnb.dnb--dark .dnb-cat__all,
.dnb.dnb--dark .dnb-empty,
.dnb.dnb--dark .dnb-page-btn {
    color: var(--text-secondary);
}

/* ⑥ accent 색 유지 */
.dnb.dnb--dark .dnb-cat--on,
.dnb.dnb--dark .dnb-cat__all:hover { color: var(--accent); border-color: var(--accent); }
.dnb.dnb--dark .dnb-page-btn--active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ⑦ 아바타/파일 */
.dnb.dnb--dark .dnb-comment__avatar-default { background: var(--bg-surface); color: var(--text-secondary); }
.dnb.dnb--dark .dnb-files-list a { color: var(--text-secondary); }

/* ----------------------------------------------------------
   dark 모드 hover 규칙
   .dnb.dnb--dark (specificity 0,3,0) 이 일반 hover (0,1,1)를
   덮어쓰기 때문에 동일 컨텍스트로 명시적 재선언
---------------------------------------------------------- */

/* 일반 버튼 */
.dnb.dnb--dark .dnb-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* accent 버튼 */
.dnb.dnb--dark .dnb-btn--accent:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

/* danger 버튼 */
.dnb.dnb--dark .dnb-btn--danger:hover {
    opacity: 0.85;
    color: #fff;
}

/* 페이지네이션 */
.dnb.dnb--dark .dnb-page-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* 추천 버튼 */
.dnb.dnb--dark .dnb-vote-btn--up:hover,
.dnb.dnb--dark .dnb-vote-btn--up.dnb-vote-btn--active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

.dnb.dnb--dark .dnb-vote-btn--down:hover,
.dnb.dnb--dark .dnb-vote-btn--down.dnb-vote-btn--active {
    border-color: var(--danger, #EF4444);
    color: var(--danger, #EF4444);
    background: rgba(239, 68, 68, 0.07);
}

/* 태그 */
.dnb.dnb--dark .dnb-tag:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* FAQ 수정/삭제 링크 */
.dnb.dnb--dark .dnb-faq__edit a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* 첨부파일 링크 */
.dnb.dnb--dark .dnb-files-list a:hover {
    color: var(--accent);
}

/* 블로그형 제목 */
.dnb.dnb--dark .dnb-blog__title a:hover {
    color: var(--accent);
}

/* ----------------------------------------------------------
   하단 목록
   --read 수식어: 글읽기 화면 하단 (구분선 + 여백)
   수식어 없음: 일반 목록 화면 (구분선 없음)
---------------------------------------------------------- */
.dnb-bottom-list--read {
    margin-top: 2rem;
}

/* Original file: modules/board/skins/daynight_board/css/shop.css */

/* ==========================================================
   shop.css — DayNight Board 쇼핑 게시판 전용 스타일
   _list_shop.html / _read_shop.html
========================================================== */

/* ----------------------------------------------------------
   1. 상품 카드 그리드
---------------------------------------------------------- */
.dnb-shop {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--shop-card-min, 220px), 1fr));
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dnb-shop__item {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dnb-shop__item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.dnb-shop__item--notice {
    border-color: var(--accent);
}
.dnb-shop__item--notice::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
    z-index: 1;
}

/* ----------------------------------------------------------
   2. 썸네일
---------------------------------------------------------- */
.dnb-shop__thumb-link {
    display: block;
    text-decoration: none;
}

.dnb-shop__thumb {
    position: relative;
    width: 100%;
    /* 비율은 JS에서 --shop-img-ratio 변수로 주입 */
    padding-top: var(--shop-img-ratio, 100%);
    overflow: hidden;
    background: var(--bg-primary);
}

.dnb-shop__thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.dnb-shop__item:hover .dnb-shop__thumb img {
    transform: scale(1.05);
}

.dnb-shop__no-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-secondary);
    opacity: 0.2;
}

/* ----------------------------------------------------------
   3. 뱃지
---------------------------------------------------------- */
.dnb-shop__badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 2;
}
.dnb-shop__badge--notice { background: var(--accent); color: #fff; }
.dnb-shop__badge--new    { background: var(--success, #22C55E); color: #fff; }

.dnb-shop__badge--cat {
    top: 0.5rem;
    right: 0.5rem;      /* 우측 상단 */
	left: auto;
    background: rgba(0, 0, 0, 0.55);
    color: var(--accent);
    backdrop-filter: blur(2px);
}

/* ----------------------------------------------------------
   4. 카드 본문 (상품 정보)
---------------------------------------------------------- */
.dnb-shop__body {
    flex: 1;
    padding: 0.65rem 0.75rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dnb-shop__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
}
.dnb-shop__name a {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.dnb-shop__name a:hover { color: var(--accent); }

/* 확장변수 전체 출력 영역 */
.dnb-shop__extra-vars {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.15rem;
}

.dnb-shop__extra-var {
    font-size: 0.775rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dnb-shop__extra-var-label {
    font-weight: 500;
    margin-right: 0.25rem;
}

/* 가격 강조 */
.dnb-shop__price {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
}

/* ----------------------------------------------------------
   5. 카드 하단 (Add to Cart 버튼)
---------------------------------------------------------- */
.dnb-shop__foot {
    padding: 0.5rem 0.75rem 0.75rem;
}

/* 기본 공통 */
.dnb-shop__cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: 0.2s ease;
}

.dnb-shop__cart-btn .icon { font-size: 1rem; }

/* 다크 모드 */
.dnb--cs-dark .dnb-shop__cart-btn,
.dnb--cs-daynight.dnb--dark .dnb-shop__cart-btn {
    background: linear-gradient(#2b2b2b, #1f1f1f);
    box-shadow:
        inset 3px 3px 6px rgba(0,0,0,0.6),
        inset -3px -3px 6px rgba(255,255,255,0.05);
    border: 1px solid #3a3a3a;
    color: #f5f5f5;
}

.dnb--cs-dark .dnb-shop__cart-btn:hover,
.dnb--cs-daynight.dnb--dark .dnb-shop__cart-btn:hover {
    color: var(--accent);
    box-shadow:
        inset 1px 1px 3px rgba(0,0,0,0.7),
        inset -1px -1px 3px rgba(255,255,255,0.08);
    transform: translateY(-1px);
}

/* 라이트 모드 */
.dnb--cs-light .dnb-shop__cart-btn,
.dnb--cs-daynight:not(.dnb--dark) .dnb-shop__cart-btn {
    background: linear-gradient(#f5f5f5, #e8e8e8);
    box-shadow:
        inset 3px 3px 6px rgba(0,0,0,0.08),
        inset -3px -3px 6px rgba(255,255,255,0.8);
    border: 1px solid #d0d0d0;
    color: #1f1f1f;
}

.dnb--cs-light .dnb-shop__cart-btn:hover,
.dnb--cs-daynight:not(.dnb--dark) .dnb-shop__cart-btn:hover {
    color: var(--accent);
    box-shadow:
        inset 1px 1px 3px rgba(0,0,0,0.1),
        inset -1px -1px 3px rgba(255,255,255,0.9);
    transform: translateY(-1px);
}

/* 관리자 체크박스 */
.dnb-shop__item .dnb-cart {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
}

/* ----------------------------------------------------------
   6. 상세 페이지 — 2단 레이아웃
---------------------------------------------------------- */
.dnb-shop-read {
    display: grid;
    grid-template-columns: var(--shop-read-img-w, 50%) 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 2rem;
}

/* 이미지 영역 (좌) */
.dnb-shop-read__gallery {
    position: sticky;
    top: 1rem;
}

.dnb-shop-read__main-wrap {
    position: relative;
    width: 100%;
    padding-top: var(--shop-img-ratio, 100%);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
}

.dnb-shop-read__main-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}
.dnb-shop-read__main-img:hover { transform: scale(1.03); }

.dnb-shop-read__no-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--text-secondary);
    opacity: 0.2;
}

/* 썸네일 목록 */
.dnb-shop-read__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.dnb-shop-read__thumb {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--border-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
}
.dnb-shop-read__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.dnb-shop-read__thumb:hover,
.dnb-shop-read__thumb--active {
    border-color: var(--accent);
}

/* 상품 정보 영역 (우) */
.dnb-shop-read__info {
    /* 이미지 영역 높이에 맞게 스크롤 */
    max-height: calc(var(--shop-read-info-maxh, 600px));
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
    /* 스크롤바 스타일 */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.dnb-shop-read__info::-webkit-scrollbar {
    width: 4px;
}
.dnb-shop-read__info::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.dnb-shop-read__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.dnb-shop-read__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 1rem;
}

/* 확장변수 테이블 */
.dnb-shop-read__extra {
    margin-bottom: 1rem;
}

.dnb-shop-read__extra-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.dnb-shop-read__extra-table th,
.dnb-shop-read__extra-table td {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}
.dnb-shop-read__extra-table th {
    width: 30%;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}
.dnb-shop-read__extra-table td {
    color: var(--text-primary);
}

/* Add to Cart 버튼 */
.dnb-shop-read__cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 1rem;
    transition: background 0.2s ease, transform 0.15s ease;
}
.dnb-shop-read__cart-btn:hover {
    background: var(--accent-hover, #0EA5E9);
    transform: translateY(-1px);
}
.dnb-shop-read__cart-btn .icon { font-size: 1.1rem; }

/* ----------------------------------------------------------
   7. 반응형
---------------------------------------------------------- */
@media (max-width: 768px) {
    .dnb-shop-read {
        grid-template-columns: 1fr;
    }
    .dnb-shop-read__gallery {
        position: static;
    }
    .dnb-shop-read__info {
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 480px) {
    .dnb-shop {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* ----------------------------------------------------------
   8. 다크모드
---------------------------------------------------------- */
.dnb.dnb--dark .dnb-shop__item,
.dnb.dnb--dark .dnb-shop-read__main-wrap,
.dnb.dnb--dark .dnb-shop-read__extra-table th,
.dnb.dnb--dark .dnb-shop-read__extra-table td {
    background-color: var(--bg-primary) !important;
    border-color:     var(--border-color) !important;
    color:            var(--text-primary);
}

.dnb.dnb--dark .dnb-shop-read__info {
    scrollbar-color: var(--border-color) transparent;
}

/* ----------------------------------------------------------
   툴바 쇼핑 게시판 표시 아이콘
---------------------------------------------------------- */
.dnb-icon-btn--shop-on {
    color: var(--accent) !important;
    cursor: default;
}

/* ----------------------------------------------------------
   쇼핑 게시판 공지글 테이블
---------------------------------------------------------- */
.dnb-shop__notice-table {
    width: 100%;
    margin-bottom: 1.25rem;
    border-collapse: collapse;
}
.dnb-shop__notice-table .dnb-table__no {
    width: 60px;
    text-align: center;
}
.dnb-shop__notice-table .dnb-table__date {
    width: 90px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.dnb-shop__notice-table .dnb-table__check {
    width: 36px;
    text-align: center;
}
.dnb-shop__notice-table td {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.dnb-shop__notice-table .dnb-table__title a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
}
.dnb-shop__notice-table .dnb-table__title a:hover {
    color: var(--accent);
}
.dnb.dnb--dark .dnb-shop__notice-table td {
    border-color: var(--border-color);
}

/* ----------------------------------------------------------
   카드 이미지 오버레이 제목 + 옵션 뱃지
---------------------------------------------------------- */
.dnb-shop__overlay {
    position: absolute;
    inset: 0;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 40%, rgba(0,0,0,0.05) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.3rem;
}

.dnb-shop__overlay-title {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.dnb-shop__overlay-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

/* rxcart-opt-badge를 카드 오버레이 위에서도 사용 —
   widget.css의 light/dark 대신 항상 어두운 배경 위에 표시 */
.dnb-shop__overlay .rxcart-opt-badge {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 0.5px solid rgba(255,255,255,0.35);
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 99px;
    white-space: nowrap;
}

/* _read_shop.html 옵션 뱃지 영역 */
.dnb-shop-read__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0.5rem 0 0.25rem;
}

/* ----------------------------------------------------------
   rxcart-opt-badge 독립 스타일
   (rxcart-light/dark 부모 없이도 동작)
---------------------------------------------------------- */
.dnb-shop__overlay-opts .rxcart-opt-badge,
.dnb-shop-read__opts .rxcart-opt-badge,
.dnb-shop__extra-vars .rxcart-opt-badge {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 0.5px solid rgba(255,255,255,0.35);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 99px;
    display: inline-block;
    white-space: nowrap;
}

/* 상세 페이지 opts — 라이트/다크 대응 */
.dnb-shop-read__opts .rxcart-opt-badge {
    background: #f0f9ff;
    color: #0369a1;
    border: 0.5px solid #bae6fd;
}
.dnb.dnb--dark .dnb-shop-read__opts .rxcart-opt-badge {
    background: #0c2a3a;
    color: #7dd3fc;
    border: 0.5px solid #164e63;
}

/* ----------------------------------------------------------
   카드 오버레이 옵션 뱃지 (.dnb-shop__opt-badge)
---------------------------------------------------------- */
.dnb-shop__opt-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 99px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 0.5px solid rgba(255,255,255,0.35);
    white-space: nowrap;
}

/* ----------------------------------------------------------
   옵션 뱃지 독립 스타일
   (rxcart-opt-badge는 widget.css에서 rxcart-light/dark 부모
    클래스 필요 → shop.css에서 독립적으로 재정의)
---------------------------------------------------------- */
.dnb-shop-read__opts .rxcart-opt-badge,
.dnb-shop__opt-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 99px;
    white-space: nowrap;
    background: var(--accent-light, rgba(56,189,248,0.12));
    color: var(--accent);
    border: 0.5px solid var(--accent);
    margin: 2px 2px 2px 0;
}

/* 다크모드 */
.dnb.dnb--dark .dnb-shop-read__opts .rxcart-opt-badge,
.dnb.dnb--dark .dnb-shop__opt-badge {
    background: rgba(255,160,0,0.15);
    color: var(--accent);
    border-color: var(--accent);
}

/* ----------------------------------------------------------
   카드형 제목 오버레이 (이미지 하단 그라디언트)
---------------------------------------------------------- */
.dnb-shop__thumb {
    position: relative;
}

.dnb-shop__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 0.75rem 0.6rem;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

.dnb-shop__overlay-title {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 0.3rem;
}

.dnb-shop__overlay-price {
    color: rgba(255,255,255,0.92);
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
}

.dnb-shop__overlay-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 0.25rem;
}

/* 오버레이 안의 뱃지는 반투명 흰색 계열 */
.dnb-shop__overlay .dnb-shop__opt-badge {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-color: rgba(255,255,255,0.35);
    font-size: 0.7rem;
}

/* 오버레이 사용 시 body 영역 숨김 (중복 방지) */
.dnb-shop__item--has-overlay .dnb-shop__body {
    display: none;
}

/* ----------------------------------------------------------
   옵션 뱃지 독립 스타일
   (rxcart-light/dark 부모 없이도 적용)
---------------------------------------------------------- */
.dnb-shop-read__opts .rxcart-opt-badge,
.dnb-shop__item .rxcart-opt-badge {
    background: var(--accent-light, rgba(56,189,248,0.1));
    color: var(--accent);
    border: 0.5px solid var(--accent);
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
    white-space: nowrap;
}
.dnb.dnb--dark .dnb-shop-read__opts .rxcart-opt-badge,
.dnb.dnb--dark .dnb-shop__item .rxcart-opt-badge {
    background: var(--accent-light, rgba(255,160,0,0.15));
    color: var(--accent);
    border-color: var(--accent);
}

/* ----------------------------------------------------------
   옵션 뱃지 — rxcart-light/dark 부모 없이도 동작
---------------------------------------------------------- */
.dnb-shop__opt-badges,
.dnb-shop-read__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0.3rem 0 0;
}

.dnb-shop__opt-badge,
.dnb-shop-read__opts .rxcart-opt-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 99px;
    white-space: nowrap;
    background: #f0f9ff;
    color: #0369a1;
    border: 0.5px solid #bae6fd;
}

.dnb.dnb--dark .dnb-shop__opt-badge,
.dnb.dnb--dark .dnb-shop-read__opts .rxcart-opt-badge {
    background: #0c2a3a;
    color: #7dd3fc;
    border-color: #164e63;
}

/* ----------------------------------------------------------
   카드형 제목 오버레이 (웹진형처럼 이미지 하단)
---------------------------------------------------------- */
.dnb-shop__thumb {
    position: relative;
}

.dnb-shop__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 0.75rem 0.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0));
    pointer-events: none;
}

.dnb-shop__overlay-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 0.25rem;
}

.dnb-shop__overlay-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    opacity: 0.95;
    margin: 0;
}

/* 오버레이 사용시 body의 상품명/가격 숨김 */
.dnb-shop__body--overlay .dnb-shop__name,
.dnb-shop__body--overlay .dnb-shop__price {
    display: none;
}

/* Original file: modules/board/skins/daynight_board//css/colorset-daynight.css */

/* ==========================================================
   DayNight Board — colorset-daynight.css
   DayNight 레이아웃 CSS 변수 자동 연동
   Snow 모드 / Gloomy(다크) 모드 자동 전환
========================================================== */

/* Snow (기본) — DayNight 레이아웃 없이 단독 사용 시 fallback */
.dnb--cs-daynight {
    --bg-primary:     #ffffff;
    --bg-secondary:   #d9d9d9;
    --bg-surface:     #F1F5F9;
    --border-color:   #E2E8F0;
    --text-primary:   #11151B;
    --text-secondary: #2D2D2D;
    --accent:         #FF7000;
    --accent-hover:   #0EA5E9;
    --accent-light:   rgba(56, 189, 248, 0.1);
    --success:        #22C55E;
    --warning:        #F59E0B;
    --danger:         #EF4444;
    --shadow:         0 1px 3px rgba(0,0,0,0.05);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.05);
    --transition:     all .2s ease;
}

/* Gloomy(다크) 모드 — DayNight 레이아웃의 html.gloomy / body.gloomy 클래스 연동 */
html.gloomy .dnb--cs-daynight,
body.gloomy .dnb--cs-daynight {
    --bg-primary:     #0F0F0F;
    --bg-secondary:   #171717;
    --bg-surface:     #1F1F1F;
    --border-color:   #2E2E2E;
    --text-primary:   #F5F5F5;
    --text-secondary: #A3A3A3;
    --accent:         #FF7000;
    --accent-hover:   #FFA000;
    --accent-light:   rgba(255, 160, 0, 0.15);
    --shadow:         0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.4);
}

/* ── standalone 독립 다크모드 ──────────────────────────────
   .dnb--dark 클래스가 붙으면 html.gloomy 와 무관하게 다크 적용
   html.gloomy 상태에서도 .dnb--dark 없으면 라이트 유지 가능
──────────────────────────────────────────────────────────── */
.dnb--cs-daynight.dnb--dark {
    --bg-primary:     #0F0F0F;
    --bg-secondary:   #171717;
    --bg-surface:     #1F1F1F;
    --border-color:   #2E2E2E;
    --text-primary:   #F5F5F5;
    --text-secondary: #A3A3A3;
    --accent:         #FF7000;
    --accent-hover:   #FFA000;
    --accent-light:   rgba(255, 160, 0, 0.15);
    --shadow:         0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.4);
}

/* Original file: widgets/breadcrumb/skins/daynight_breadcrumb/css/breadcrumb.css */

/* =============================================================
   Breadcrumb — 공통 레이아웃
============================================================= */
.dn-bc { margin-bottom: .75rem; }
.dn-bc-list { display: flex; align-items: center; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-size: .8125rem; gap: 0; }
.dn-bc-item { display: flex; align-items: center; }
.dn-bc-sep { margin: 0 .375rem; font-size: .75rem; line-height: 1; user-select: none; }
.dn-bc-item a { text-decoration: none; transition: color .15s ease; display: flex; align-items: center; gap: .25rem; white-space: nowrap; }
.dn-bc-home svg { display: block; }
.dn-bc-current a { font-weight: 500; pointer-events: none; cursor: default; }

/* =============================================================
   colorset: daynight — CSS 변수 연동 (라이트 기본값)
   다크모드는 위젯 설정의 '다크모드 셀렉터'로 동적 출력
============================================================= */
.dn-bc--daynight .dn-bc-sep         { color: var(--border-color, #d1d5db); }
.dn-bc--daynight .dn-bc-item a      { color: var(--text-secondary, #6b7280); }
.dn-bc--daynight .dn-bc-item a:hover { color: var(--accent, #ff7000); }
.dn-bc--daynight .dn-bc-current a   { color: var(--text-primary, #111827); }

/* =============================================================
   colorset: light — 밝은 레이아웃 고정 색상
   CSS 변수 없는 레이아웃에서 사용
============================================================= */
.dn-bc--light .dn-bc-sep         { color: #c4c9d4; }
.dn-bc--light .dn-bc-item a      { color: #5a6478; }
.dn-bc--light .dn-bc-item a:hover { color: #2563eb; }
.dn-bc--light .dn-bc-current a   { color: #1a202c; }

/* =============================================================
   colorset: dark — 어두운 레이아웃 고정 색상
   CSS 변수 없는 레이아웃에서 사용
============================================================= */
.dn-bc--dark .dn-bc-sep         { color: #4b5563; }
.dn-bc--dark .dn-bc-item a      { color: #9ca3af; }
.dn-bc--dark .dn-bc-item a:hover { color: #60a5fa; }
.dn-bc--dark .dn-bc-current a   { color: #f3f4f6; }