@charset "UTF-8"; /* Original file: files/cache/assets/compiled/8d9d7b6550a4c7aa1fef06d431d813b10907511b.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=8d9d7b6550a4c7aa1fef06d431d813b10907511b.rhymix.scss.min.map */ /* Original file: layouts/bean/css/bean.base.css */ /* ============================================================ BEAN THEME — bean.base.css (골조 / 구조 전용, 색상 없음) 색상은 bean.colors.css 의 --bean-* 변수로 주입됩니다. 모든 선택자는 .bean_ 접두어로 격리되어 라이믹스/브라우저 기본 CSS 와 충돌하지 않습니다. ============================================================ */ /* ---- reset (scoped) ---- */ /* body 기본 여백(브라우저 UA 8px) 제거 — _init.html 이 body 에 bean_layout 클래스 부여 */ body.bean_layout{margin:0;padding:0;} .bean_root *,.bean_root *::before,.bean_root *::after{box-sizing:border-box;} .bean_root{ --bean-sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif; --bean-serif:'Times New Roman',serif; font-family:var(--bean-sans); font-size:16px; color:var(--bean-text); background:var(--bean-bg); line-height:1.65; -webkit-font-smoothing:antialiased; min-height:100vh; } /* 타이포 여백 리셋 — :where() 로 specificity 0 → 컴포넌트 클래스 마진이 항상 이김. (이전에 [class^="bean_"] 로 리셋했더니 .bean_wrap 의 margin:0 auto 까지 덮어써 레이아웃이 한쪽으로 쏠렸음.) ul/ol/img 는 제외해 게시글 본문 스타일 보존. */ .bean_root :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd){margin:0;} .bean_gnb-list,.bean_foot-menu,.bean_cmt-list{list-style:none;margin:0;padding:0;} .bean_root :where(a){color:inherit;text-decoration:none;} /* 게시글·콘텐츠 본문 링크는 가독성 위해 강조색 + 밑줄 복원 */ .bean_view-body a,.bean_root .xe_content a,.bean_root .rhymix_content a{ color:var(--bean-accent);text-decoration:underline;} .bean_wrap{max-width:1180px;margin:0 auto;padding:0 28px;} /* ---- scrollbar ---- */ .bean_root ::-webkit-scrollbar{width:12px;height:10px;} .bean_root ::-webkit-scrollbar-track{background:var(--bean-surf);} .bean_root ::-webkit-scrollbar-thumb{background:var(--bean-accent);border-radius:8px;border:3px solid var(--bean-surf);} /* ---- buttons / generic ---- */ .bean_btn{display:inline-block;background:var(--bean-accent);color:var(--bean-onaccent); padding:13px 24px;border-radius:999px;font-size:13.5px;font-weight:700;border:0;cursor:pointer; font-family:inherit;line-height:1.2;transition:background .15s;text-align:center;} .bean_btn:hover{background:var(--bean-accent2);} /* 테두리만 있는 버튼 — 테두리색과 글자색을 같게 */ .bean_btn-line{display:inline-block;background:none;border:1px solid var(--bean-text);color:var(--bean-text); padding:12px 22px;border-radius:999px;font-size:13.5px;font-weight:700;cursor:pointer; font-family:inherit;line-height:1.2;transition:.15s;text-align:center;} .bean_btn-line:hover{border-color:var(--bean-accent);color:var(--bean-accent);} .bean_btn-sm{padding:9px 16px;font-size:12.5px;} .bean_panel{background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px;} /* 입력창 placeholder — 테마 muted 색으로 통일 */ .bean_root input::placeholder,.bean_root textarea::placeholder{color:var(--bean-muted);opacity:1;} /* ============================================================ HEADER ============================================================ */ .bean_header{position:fixed;top:0;left:0;right:0;z-index:80; transition:background .25s,border-color .25s; background:var(--bean-head);border-bottom:1px solid var(--bean-line); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} .bean_page-main .bean_header{background:transparent;border-bottom-color:transparent; backdrop-filter:none;-webkit-backdrop-filter:none;} .bean_page-main .bean_header.bean_is-solid{background:var(--bean-head);border-bottom-color:var(--bean-line); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} .bean_nav{display:flex;align-items:center;justify-content:space-between; height:74px;gap:24px;position:relative;} .bean_logo{flex:0 0 auto;} .bean_logo-text{font-weight:800;font-size:22px;letter-spacing:3px;color:var(--bean-text);} .bean_page-main .bean_header:not(.bean_is-solid) .bean_logo-text{color:#fff;} .bean_logo-img{height:34px;width:auto;display:block;} /* gnb */ .bean_gnb-list{display:flex;gap:6px;} .bean_gnb-item{position:relative;} .bean_gnb-link{display:flex;align-items:center;gap:6px;padding:12px 16px; font-size:13.5px;font-weight:600;color:var(--bean-muted);border-radius:9px;transition:.15s;} .bean_gnb-link:hover,.bean_gnb-item.bean_is-open>.bean_gnb-link,.bean_gnb-item.bean_is-on>.bean_gnb-link{ color:var(--bean-text);background:var(--bean-surf);} .bean_page-main .bean_header:not(.bean_is-solid) .bean_gnb-link{color:rgba(255,255,255,.82);} .bean_page-main .bean_header:not(.bean_is-solid) .bean_gnb-link:hover, .bean_page-main .bean_header:not(.bean_is-solid) .bean_gnb-item.bean_is-open>.bean_gnb-link, .bean_page-main .bean_header:not(.bean_is-solid) .bean_gnb-item.bean_is-on>.bean_gnb-link{ color:#fff;background:rgba(255,255,255,.14);} .bean_caret{font-size:9px;transition:transform .2s;cursor:pointer;padding:3px 4px;margin:-3px -2px;} .bean_gnb-item.bean_is-open>.bean_gnb-link .bean_caret{transform:rotate(180deg);} /* mega */ .bean_mega{position:absolute;top:calc(100% + 8px);left:0;min-width:300px; background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px;padding:12px; opacity:0;visibility:hidden;transform:translateY(8px);transition:all .18s; box-shadow:0 24px 50px rgba(0,0,0,.3);} .bean_gnb-item.bean_is-open .bean_mega{opacity:1;visibility:visible;transform:translateY(0);} .bean_mega-leaf{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:9px; color:var(--bean-text);transition:background .15s;} .bean_mega-leaf:hover{background:var(--bean-surf);} .bean_mega-dot{width:6px;height:6px;border-radius:50%;background:var(--bean-accent);flex:0 0 auto;margin-top:6px;} .bean_mega-leaf-body{display:flex;flex-direction:column;} .bean_mega-leaf-text{font-size:14px;font-weight:600;} .bean_mega-leaf-desc{font-size:11.5px;color:var(--bean-muted);margin-top:2px;line-height:1.45;} .bean_mega-group{margin-top:6px;padding:10px 12px 4px;border-top:1px solid var(--bean-line);} .bean_mega-head{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--bean-accent);margin-bottom:6px;} .bean_mega-leaf3{display:block;padding:9px 12px 9px 22px;border-radius:8px; color:var(--bean-text);transition:background .15s;} .bean_mega-leaf3:hover{background:var(--bean-surf);} .bean_mega-leaf3-text{display:block;font-size:13.5px;font-weight:600;} .bean_mega-leaf3-desc{display:block;font-size:11.5px;color:var(--bean-muted);margin-top:2px;line-height:1.45;} /* nav tools */ .bean_nav-tools{display:flex;align-items:center;gap:10px;flex:0 0 auto;} .bean_nav-cta{background:none;border:1px solid var(--bean-accent);color:var(--bean-accent); padding:9px 18px;border-radius:999px;font-size:12px;font-weight:700; font-family:inherit;cursor:pointer;line-height:1.2;transition:.15s;} .bean_nav-cta:hover{background:var(--bean-accent);color:var(--bean-onaccent);} .bean_page-main .bean_header:not(.bean_is-solid) .bean_nav-cta{border-color:rgba(255,255,255,.55);color:#fff;} /* burger */ .bean_burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;} .bean_burger-bar{width:24px;height:2px;background:var(--bean-text);display:block;} .bean_page-main .bean_header:not(.bean_is-solid) .bean_burger-bar{background:#fff;} /* ---- 프로필 드롭다운 ---- */ .bean_profile{position:relative;} .bean_profile-btn{background:none;border:0;cursor:pointer;padding:0;display:block;} .bean_profile-ava{display:flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;background:var(--bean-accent); color:var(--bean-onaccent);font-size:15px;font-weight:800;overflow:hidden; border:2px solid transparent;transition:.15s;} .bean_profile-ava-img{width:100%;height:100%;border-radius:50%;object-fit:cover;} .bean_profile-btn:hover .bean_profile-ava, .bean_profile.bean_is-open .bean_profile-ava{border-color:var(--bean-accent2);} .bean_profile-menu{position:absolute;top:calc(100% + 12px);right:0;width:320px;max-width:86vw; background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px; box-shadow:0 24px 50px rgba(0,0,0,.3);overflow:hidden;z-index:90; opacity:0;visibility:hidden;transform:translateY(8px);transition:all .18s;} .bean_profile.bean_is-open .bean_profile-menu{opacity:1;visibility:visible;transform:translateY(0);} .bean_profile-head{padding:18px 20px;border-bottom:1px solid var(--bean-line);} .bean_profile-name{font-size:15px;font-weight:800;color:var(--bean-text);} .bean_profile-id{font-size:12px;color:var(--bean-muted);margin-top:2px;} .bean_profile-noti{padding:14px 20px;border-bottom:1px solid var(--bean-line);} .bean_profile-noti-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;} .bean_profile-noti-title{font-size:11.5px;font-weight:800;letter-spacing:1px;color:var(--bean-accent);} .bean_profile-noti-all{font-size:11.5px;color:var(--bean-muted);} .bean_profile-noti-all:hover{color:var(--bean-accent);} .bean_profile-noti-empty{font-size:12.5px;color:var(--bean-muted);padding:4px 0;} .bean_profile-noti-list{display:flex;flex-direction:column;max-height:220px;overflow-y:auto;} .bean_profile-noti-item{display:block;padding:8px 0;border-top:1px solid var(--bean-line);} .bean_profile-noti-item:hover{color:var(--bean-accent);} .bean_profile-noti-text{display:block;font-size:12.5px;color:var(--bean-text);line-height:1.5; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .bean_profile-noti-item:hover .bean_profile-noti-text{color:var(--bean-accent);} .bean_profile-noti-ago{display:block;font-size:11px;color:var(--bean-muted);margin-top:2px;} .bean_profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:10px;} .bean_profile-item{display:block;padding:9px 12px;border-radius:8px;font-size:13px; font-weight:600;color:var(--bean-text);transition:.12s;} .bean_profile-item:hover{background:var(--bean-surf);color:var(--bean-accent);} .bean_profile-sec{border-top:1px solid var(--bean-line);} .bean_profile-sec-title{font-size:11px;font-weight:800;letter-spacing:1px; color:var(--bean-accent);padding:12px 22px 0;} .bean_profile-foot{border-top:1px solid var(--bean-line);padding:10px; display:flex;flex-direction:column;gap:2px;} .bean_profile-admin,.bean_profile-logout{display:block;padding:10px 12px;border-radius:8px; font-size:13px;font-weight:700;transition:.12s;} .bean_profile-admin{color:var(--bean-accent);} .bean_profile-admin:hover{background:var(--bean-surf);} .bean_profile-logout{color:var(--bean-muted);} .bean_profile-logout:hover{background:var(--bean-surf);color:var(--bean-text);} /* ---- 로그인 드롭다운 ---- */ .bean_login{position:relative;} .bean_login-btn{display:flex;align-items:center;justify-content:center;flex:0 0 auto; width:38px;height:38px;border-radius:50%;background:var(--bean-accent); color:var(--bean-onaccent);border:2px solid transparent;cursor:pointer; padding:0;transition:.15s;} .bean_login-btn:hover,.bean_login.bean_is-open .bean_login-btn{border-color:var(--bean-accent2);} .bean_login-icon{width:20px;height:20px;display:block;} .bean_login-menu{position:absolute;top:calc(100% + 12px);right:0;width:300px;max-width:92vw; background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px; box-shadow:0 24px 50px rgba(0,0,0,.3);padding:18px;z-index:90; max-height:calc(100vh - 96px);overflow-y:auto;-webkit-overflow-scrolling:touch; opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,visibility .18s,transform .18s;} .bean_login.bean_is-open .bean_login-menu{opacity:1;visibility:visible;transform:translateY(0);} .bean_login-input{width:100%;padding:11px 13px;font-size:13.5px;font-family:inherit; background:var(--bean-surf);border:1px solid var(--bean-line);border-radius:9px; color:var(--bean-text);margin-bottom:8px;} .bean_login-input:focus{outline:0;border-color:var(--bean-accent);} .bean_login-keep{display:flex;align-items:center;gap:7px;font-size:12.5px; color:var(--bean-muted);margin:4px 0 12px;cursor:pointer;} .bean_login-keep input{width:15px;height:15px;accent-color:var(--bean-accent);} .bean_login-submit{width:100%;} /* 소셜 로그인 버튼 (로그인 팝업) — SNS 개수에 맞춰 자동 줄바꿈되는 반응형 그리드 */ .bean_login-sns{margin-top:14px;display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;} .bean_login-sns-divider{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:2px 0 4px; font-size:11px;color:var(--bean-muted);} .bean_login-sns-divider::before,.bean_login-sns-divider::after{content:"";flex:1; height:1px;background:var(--bean-line);} .bean_login-sns-btn{display:block;text-align:center;padding:10px 8px; border:1px solid var(--bean-line);border-radius:9px;background:var(--bean-surf); color:var(--bean-text);font-size:12.5px;font-weight:600;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:border-color .15s,color .15s;} .bean_login-sns-btn:hover{border-color:var(--bean-accent);color:var(--bean-accent);} /* 마지막 버튼이 한 줄에 홀로 남으면 가로 전체를 채운다. (divider 가 1번째 자식이라 버튼은 2,3 / 4,5 … 로 짝지어지므로 짝수 index 가 줄 시작) */ .bean_login-sns-btn:last-child:nth-child(even){grid-column:1/-1;} /* 매우 좁은 화면에서는 1열로 */ @media(max-width:360px){ .bean_login-sns{grid-template-columns:1fr;} } .bean_login-links{display:flex;justify-content:center;gap:14px;margin-top:14px; padding-top:12px;border-top:1px solid var(--bean-line);} .bean_login-links a{font-size:12px;color:var(--bean-muted);} .bean_login-links a:hover{color:var(--bean-accent);} /* ============================================================ SIDEBAR (mobile) ============================================================ */ .bean_ovl{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90; opacity:0;visibility:hidden;transition:.2s;} .bean_ovl.bean_is-show{opacity:1;visibility:visible;} .bean_side{position:fixed;top:0;left:0;bottom:0;width:330px;max-width:86vw;z-index:95; background:var(--bean-card);border-right:1px solid var(--bean-line); transform:translateX(-100%);transition:transform .26s;overflow-y:auto;} .bean_side.bean_is-show{transform:translateX(0);} .bean_side-head{display:flex;align-items:center;justify-content:space-between; padding:22px 24px;border-bottom:1px solid var(--bean-line);} .bean_side-close{background:none;border:0;color:var(--bean-text);font-size:24px; cursor:pointer;line-height:1;font-family:inherit;} .bean_acc-top{display:flex;align-items:stretch; border-bottom:1px solid var(--bean-line);} .bean_acc-label{flex:1;padding:16px 24px;font-size:15px;font-weight:700; color:var(--bean-text);} .bean_acc-toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center; width:58px;background:none;border:0;border-left:1px solid var(--bean-line); cursor:pointer;color:var(--bean-muted);font-family:inherit;} .bean_acc-toggle:hover{color:var(--bean-accent);} .bean_acc-ar{font-size:11px;color:var(--bean-muted);transition:transform .2s;} .bean_acc-toggle:hover .bean_acc-ar{color:var(--bean-accent);} .bean_acc.bean_is-open>.bean_acc-top .bean_acc-ar{transform:rotate(180deg);} .bean_acc-body{display:none;background:var(--bean-bg);border-bottom:1px solid var(--bean-line);} .bean_acc.bean_is-open>.bean_acc-body{display:block;} .bean_acc-leaf{display:block;padding:13px 24px 13px 42px;font-size:14px; border-bottom:1px solid var(--bean-line);color:var(--bean-text);} .bean_acc-leaf:last-child{border-bottom:0;} .bean_acc-sub{background:var(--bean-surf);} .bean_acc-subhead{padding:12px 24px 12px 42px;font-size:12.5px;font-weight:700; letter-spacing:1px;color:var(--bean-accent);border-bottom:1px solid var(--bean-line);} /* ============================================================ HERO (main page) — fullscreen video / image ============================================================ */ .bean_hero{position:relative;height:100vh;min-height:560px;overflow:hidden; display:flex;flex-direction:column;justify-content:center;} .bean_hero-media{position:absolute;inset:0;z-index:0;background:#05070f;} .bean_hero-video{position:absolute;inset:0;overflow:hidden;} .bean_hero-video iframe,.bean_hero-video #bean_ytplayer{ position:absolute;top:50%;left:50%;width:100vw;height:56.25vw; min-height:100vh;min-width:177.78vh;transform:translate(-50%,-50%); pointer-events:none;border:0;} .bean_hero-slides{position:absolute;inset:0;} .bean_hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease; display:flex;flex-direction:column;justify-content:center;} .bean_hero-slide.bean_is-on{opacity:1;} .bean_hero-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;} .bean_hero-veil{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.58) 55%,rgba(0,0,0,.86) 100%);} .bean_hero-inner{position:relative;z-index:2;width:100%;} .bean_hero-tag{font-size:12px;letter-spacing:5px;color:var(--bean-accent);margin-bottom:22px;} .bean_hero-title{font-size:clamp(44px,8vw,112px);line-height:1;font-weight:800; letter-spacing:-2px;color:#fff;} .bean_hero-desc{max-width:460px;color:rgba(255,255,255,.8);font-size:15px;margin-top:26px;} .bean_hero-btn{display:inline-block;margin-top:30px;background:var(--bean-accent); color:var(--bean-onaccent);padding:14px 30px;border-radius:999px; font-size:14px;font-weight:700;transition:background .15s;} .bean_hero-btn:hover{background:var(--bean-accent2);} .bean_hero-mute{position:absolute;right:28px;bottom:30px;z-index:3; background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.4);color:#fff; padding:9px 16px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer; font-family:inherit;transition:.15s;} .bean_hero-mute:hover{background:rgba(0,0,0,.78);border-color:#fff;} .bean_hero-dots{position:absolute;left:50%;bottom:30px;transform:translateX(-50%); z-index:3;display:none;gap:8px;} .bean_hero-dots .bean_hero-dot{width:30px;height:30px;border-radius:999px;cursor:pointer; font-family:inherit;font-size:12px;font-weight:700;color:#fff; background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.45);transition:.15s;} .bean_hero-dots .bean_hero-dot:hover{border-color:#fff;} .bean_hero-dots .bean_hero-dot.bean_is-on{background:#fff;color:#111;border-color:#fff;} .bean_hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:8px; font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.6);} .bean_hero-scroll::after{content:"";width:1px;height:34px; background:linear-gradient(rgba(255,255,255,.7),transparent);animation:bean_sdrop 1.6s infinite;} @keyframes bean_sdrop{0%{opacity:0;transform:scaleY(.3);transform-origin:top;} 40%{opacity:1;}100%{opacity:0;transform:scaleY(1);transform-origin:top;}} /* ============================================================ PAGEHEAD (sub page) ============================================================ */ .bean_pagehead{padding:118px 0 46px;border-bottom:1px solid var(--bean-line); background:linear-gradient(160deg,var(--bean-surf),var(--bean-bg));} .bean_crumb{font-size:11.5px;letter-spacing:2px;color:var(--bean-accent);font-weight:700;} .bean_crumb-link:hover{text-decoration:underline;} .bean_pagehead-title{font-size:clamp(28px,4.6vw,46px);font-weight:800; letter-spacing:-1px;margin-top:12px;} .bean_pagehead-lead{margin-top:12px;max-width:680px;font-size:14.5px; line-height:1.7;color:var(--bean-muted);} /* ============================================================ MAIN CONTENT ============================================================ */ .bean_main{display:block;} .bean_page-sub .bean_main{padding:48px 0 70px;} .bean_page-main .bean_main{padding:0 0 70px;} /* flow-root: 위젯페이지 등 본문에 float 가 있어도 항상 감싸서 (관리자만 보이는 btnArea 유무와 무관하게) 푸터와의 구분이 유지되게 함 */ .bean_content-inner{display:flow-root;} /* ============================================================ FOOTER ============================================================ */ .bean_footer{border-top:1px solid var(--bean-line);background:var(--bean-card); padding:56px 0 34px;margin-top:50px;} .bean_foot-grid{display:flex;flex-wrap:wrap;gap:36px;} .bean_foot-brand{flex:2 1 300px;min-width:0;} .bean_foot-col{flex:1 1 130px;min-width:0;} .bean_foot-logo{font-size:23px;font-weight:800;letter-spacing:2px;margin-bottom:12px;} .bean_foot-biz{font-size:12px;color:var(--bean-muted);line-height:1.8;max-width:430px;} .bean_foot-h{display:block;font-size:12px;letter-spacing:2px;color:var(--bean-accent); margin:0 0 14px;font-weight:700;} a.bean_foot-h-link:hover{color:var(--bean-text);} .bean_foot-menu-item{padding:5px 0;} .bean_foot-menu-link{font-size:13px;color:var(--bean-muted);} .bean_foot-menu-link:hover{color:var(--bean-accent);} .bean_foot-bot{margin-top:40px;padding-top:22px;border-top:1px solid var(--bean-line); font-size:12px;color:var(--bean-muted);} /* ============================================================ BOARD SKIN — 공통 ============================================================ */ .bean_board{position:relative;transition:opacity .2s;} .bean_board.bean_is-loading{opacity:.45;pointer-events:none;} .bean_board-head{margin-bottom:22px;} .bean_board-title{font-size:22px;font-weight:800;letter-spacing:-.5px;} .bean_board-tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center; justify-content:space-between;margin-bottom:22px;} .bean_cats{display:flex;gap:6px;flex-wrap:wrap;} .bean_cat{background:none;border:1px solid var(--bean-line);color:var(--bean-muted); padding:8px 15px;border-radius:999px;font-size:12.5px;font-weight:600; cursor:pointer;font-family:inherit;transition:.15s;} .bean_cat:hover{border-color:var(--bean-accent);color:var(--bean-accent);} .bean_cat.bean_is-on{background:var(--bean-accent);border-color:var(--bean-accent);color:var(--bean-onaccent);} .bean_board-search{display:flex;gap:8px;} .bean_board-search-select,.bean_board-search-input{background:var(--bean-surf); border:1px solid var(--bean-line);color:var(--bean-text);padding:9px 13px; border-radius:9px;font-size:13px;font-family:inherit;} .bean_board-search-input{width:190px;} .bean_board-msg{padding:60px 20px;text-align:center;color:var(--bean-muted);font-size:14px;} /* ---- 목록형 (list) ---- */ .bean_list-table{width:100%;border-collapse:collapse;border-spacing:0; border-top:2px solid var(--bean-accent);font-family:inherit;} .bean_list-table .bean_th{font-size:12px;letter-spacing:.5px;color:var(--bean-muted); font-weight:700;padding:13px 10px;border-bottom:1px solid var(--bean-line);text-align:left;} .bean_list-table .bean_td{font-size:13.5px;padding:14px 10px; border-bottom:1px solid var(--bean-line);color:var(--bean-muted);vertical-align:middle;} .bean_list-table .bean_tr:hover .bean_td{background:var(--bean-surf);} .bean_list-table .bean_tr-notice .bean_td{background:var(--bean-surf);} .bean_td-subject .bean_subject-link{color:var(--bean-text);font-weight:600;} .bean_td-subject .bean_subject-link:hover{color:var(--bean-accent);} .bean_col-no{width:74px;} .bean_col-author{width:120px;} .bean_col-date{width:104px;} .bean_col-count{width:64px;} .bean_tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.5px; padding:3px 8px;border-radius:5px;background:var(--bean-bg);color:var(--bean-accent); border:1px solid var(--bean-line);margin-right:8px;} .bean_reply-num{color:var(--bean-accent);font-weight:700;font-size:12px;margin-left:4px;} .bean_notice-flag{display:inline-block;font-size:10.5px;font-weight:800; color:var(--bean-onaccent);background:var(--bean-accent);padding:3px 8px;border-radius:5px;} /* ---- 갤러리형 (gallery) ---- */ .bean_gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .bean_gcard{display:flex;flex-direction:column;overflow:hidden; background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px; transition:transform .2s,border-color .2s;} .bean_gcard:hover{transform:translateY(-5px);border-color:var(--bean-accent);} .bean_gcard-thumb{height:188px;position:relative;overflow:hidden; background:linear-gradient(160deg,var(--bean-surf),var(--bean-card)); border-bottom:1px solid var(--bean-line);} .bean_gcard-thumb-img{width:100%;height:100%;object-fit:cover;display:block;} .bean_gcard-flag{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:800; letter-spacing:.5px;background:var(--bean-accent);color:var(--bean-onaccent); padding:3px 8px;border-radius:5px;} .bean_gcard-body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column;} .bean_gcard-cat{font-size:11px;font-weight:700;color:var(--bean-accent); letter-spacing:.5px;margin-bottom:6px;} .bean_gcard-title{font-size:15px;font-weight:700;line-height:1.5;flex:1;color:var(--bean-text);} .bean_gcard-summary{font-size:12.5px;color:var(--bean-muted);margin-top:8px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .bean_gcard-meta{display:flex;justify-content:space-between; font-size:12px;color:var(--bean-muted);margin-top:13px;} .bean_gcard-meta-count{color:var(--bean-accent);} /* ---- pagination ---- */ .bean_pager{display:flex;gap:6px;justify-content:center;margin-top:34px;flex-wrap:wrap;} .bean_pager-link{min-width:36px;height:36px;padding:0 12px;display:flex; align-items:center;justify-content:center;border:1px solid var(--bean-line); border-radius:8px;font-size:13px;color:var(--bean-muted);} .bean_pager-link:hover{border-color:var(--bean-accent);color:var(--bean-accent);} .bean_pager-link.bean_is-on{background:var(--bean-accent);border-color:var(--bean-accent); color:var(--bean-onaccent);font-weight:700;} /* ---- board footer ---- */ .bean_board-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;} /* ============================================================ BOARD SKIN — 글 보기 (view) ============================================================ */ .bean_view-head{padding-bottom:22px;border-bottom:2px solid var(--bean-accent);} .bean_view-cat{font-size:12px;font-weight:700;color:var(--bean-accent);} .bean_view-title{font-size:clamp(20px,3vw,30px);font-weight:800; letter-spacing:-.5px;margin:8px 0 14px;} .bean_view-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--bean-muted);} .bean_view-meta-item{display:flex;gap:6px;} .bean_view-body{padding:34px 4px;font-size:15px;line-height:1.85; color:var(--bean-text);border-bottom:1px solid var(--bean-line);min-height:160px;} .bean_view-body img{display:inline;height:auto;} .bean_view-tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:18px 0 40px;} /* comments */ .bean_cmt-head{font-size:15px;font-weight:800;margin:30px 0 16px;} .bean_cmt{padding:18px 0;border-bottom:1px solid var(--bean-line);} .bean_cmt-top{display:flex;gap:10px;align-items:center;margin-bottom:8px;} .bean_cmt-author{font-size:13.5px;font-weight:700;color:var(--bean-text);} .bean_cmt-date{font-size:12px;color:var(--bean-muted);} .bean_cmt-body{font-size:13.5px;color:var(--bean-text);line-height:1.7;} .bean_cmt-reply{margin-left:34px;} .bean_form{display:block;margin-top:22px;} .bean_form-row{margin-bottom:14px;} .bean_form-label{display:block;font-size:12.5px;font-weight:700; color:var(--bean-text);margin-bottom:7px;} .bean_form-input,.bean_form-textarea,.bean_form-select{width:100%; background:var(--bean-surf);border:1px solid var(--bean-line);color:var(--bean-text); padding:12px 14px;border-radius:9px;font-size:13.5px;font-family:inherit;} .bean_form-textarea{min-height:120px;resize:vertical;line-height:1.6;} .bean_form-input:focus,.bean_form-textarea:focus,.bean_form-select:focus{ outline:0;border-color:var(--bean-accent);} .bean_form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;} .bean_form-help{font-size:12px;color:var(--bean-muted);margin-top:6px;} /* ============================================================ BOARD SKIN — 글보기 / 댓글 / 글쓰기 / 메시지 추가 컴포넌트 ============================================================ */ .bean_view-wrap{display:block;} .bean_view{display:block;} .bean_view-files{margin-top:24px;padding:18px 20px;background:var(--bean-surf); border:1px solid var(--bean-line);border-radius:12px;} .bean_view-files-head{font-size:12px;font-weight:700;color:var(--bean-accent); letter-spacing:1px;margin-bottom:8px;} .bean_view-file{display:block;font-size:13px;color:var(--bean-text);padding:4px 0;} .bean_view-file:hover{color:var(--bean-accent);} .bean_view-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;} .bean_view-tag{font-size:12px;padding:6px 12px;border-radius:999px; background:var(--bean-surf);border:1px solid var(--bean-line);color:var(--bean-muted);} .bean_view-tag:hover{border-color:var(--bean-accent);color:var(--bean-accent);} .bean_secret-form{padding:30px 0;} .bean_secret-row{display:flex;gap:8px;margin-top:10px;max-width:360px;} .bean_secret-row .bean_form-input{flex:1;} .bean_col-cat{width:120px;} .bean_cat-tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 11px; border-radius:999px;background:color-mix(in srgb,var(--bean-accent) 14%,transparent); color:var(--bean-accent);white-space:nowrap;} .bean_comments{margin-top:42px;} .bean_cmt-count{color:var(--bean-accent);} .bean_cmt-list{margin-bottom:8px;} .bean_cmt-empty{padding:30px 0;text-align:center;color:var(--bean-muted);font-size:13.5px;} .bean_cmt-actions{display:flex;gap:14px;margin-top:8px;} .bean_cmt-act{font-size:12px;color:var(--bean-muted);} .bean_cmt-act:hover{color:var(--bean-accent);} .bean_cmt-source{background:var(--bean-surf);border:1px solid var(--bean-line); border-radius:12px;padding:16px 18px;margin-bottom:18px;} .bean_cmt-form{margin-top:22px;} /* ===== 에디터 영역 (CKEditor + Rhymix 파일첨부) ===== CKEditor 스킨은 Rhymix 관리자 → 에디터 설정에서 Moono(기본) / Moono Dark / Moono Lisa 중 선택. Moono·Moono Lisa 는 본문·툴바가 밝은 색, Moono Dark 만 어두움. 현재 기본(밝은 색)에 맞춰 첨부 박스 등 주변부를 '일관된 밝은 카드' 로 묶는다. (스킨 툴바 아이콘은 스킨에 박힌 스프라이트라 CSS 로 못 바꾸므로, 주변부를 에디터에 맞추는 방향.) */ .bean_editor-wrap{display:block;} .bean_editor-wrap textarea,.bean_editor-wrap .rx_editor_textarea{ background:var(--bean-surf) !important;color:var(--bean-text) !important; border:1px solid var(--bean-line) !important;border-radius:10px !important; padding:12px 14px !important;} /* CKEditor 외곽 — 테두리·모서리 정리 */ .bean_editor-wrap .cke{border:1px solid #dfe3ea !important; border-radius:10px !important;overflow:hidden;box-shadow:none !important;} /* Rhymix 파일첨부 박스 — 에디터(라이트)에 맞춰 흰 카드로 통일 */ .bean_editor-wrap .xefu-container{margin-top:10px;padding:10px;color:#3a3f4a; background:#ffffff;border:1px solid #dfe3ea;border-radius:10px;} .bean_editor-wrap .xefu-dropzone{background:#f6f7f9; border:1px dashed #ccd2dc;border-radius:8px;} .bean_editor-wrap .xefu-dropzone-message, .bean_editor-wrap .upload_info, .bean_editor-wrap .xefu-controll, .bean_editor-wrap .xefu-list{color:#7a818f;} .bean_editor-wrap .xefu-btn{display:inline-block;background:#ffffff;color:#3a3f4a; border:1px solid #ccd2dc !important;border-radius:8px;padding:8px 14px; font-weight:600;font-family:inherit;cursor:pointer;} .bean_editor-wrap .xefu-btn:hover{border-color:var(--bean-accent) !important;color:var(--bean-accent);} .bean_editor-wrap .xefu-controll{border-top:1px solid #e6e9ee; margin-top:8px;padding-top:10px;font-size:12px;} /* simpleeditor(서명 등) — 콜로셋이 light 로 박혀 다크모드에서 흰 박스로 보이는 문제 보정. .light 강제 흰색을 BEAN 테마 색으로 덮는다. (회원정보 수정의 서명 에디터 포함) */ .bean_editor-wrap .rx_simpleeditor, .bean_editor-wrap .rx_simpleeditor.light{ background:var(--bean-surf) !important;color:var(--bean-text) !important; border:1px solid var(--bean-line) !important;border-radius:10px !important;} .bean_editor-wrap .rx_simpleeditor a{color:var(--bean-accent) !important;} .bean_editor-wrap .rx_simpleeditor:empty::before{color:var(--bean-muted) !important;} .bean_form-guest{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;} .bean_form-guest .bean_form-input{flex:1;min-width:140px;} .bean_write{display:block;} .bean_write-top{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;} .bean_write-cat,.bean_write-notice{flex:0 0 auto;width:auto;min-width:140px;} .bean_write-title{flex:1;min-width:200px;font-size:15px;font-weight:600;} .bean_extra{border:1px solid var(--bean-line);border-radius:12px;overflow:hidden;margin-bottom:14px;} .bean_extra-row{display:flex;border-bottom:1px solid var(--bean-line);} .bean_extra-row:last-child{border-bottom:0;} .bean_extra-label{width:160px;flex:0 0 auto;padding:13px 16px; background:var(--bean-surf);font-size:13px;font-weight:700;} .bean_extra-field{flex:1;padding:13px 16px;font-size:13.5px;} .bean_req{color:var(--bean-accent);} .bean_write-options{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0;} .bean_check{display:flex;align-items:center;gap:7px;font-size:13px; color:var(--bean-text);cursor:pointer;} .bean_check input{width:16px;height:16px;accent-color:var(--bean-accent);} .bean_captcha{margin:14px 0;} .bean_comment-form-page{display:block;} .bean_msg-box{max-width:520px;margin:30px auto;padding:34px 32px;text-align:center; background:var(--bean-card);border:1px solid var(--bean-line);border-radius:16px;} .bean_msg-title{font-size:17px;font-weight:700;line-height:1.5;} .bean_msg-row{display:flex;gap:8px;margin-top:18px;} .bean_msg-row .bean_form-input{flex:1;} .bean_msg-actions{display:flex;gap:10px;justify-content:center;margin-top:22px;} .bean_msg-target{padding:16px 18px;margin-bottom:20px;text-align:left; background:var(--bean-surf);border:1px solid var(--bean-line);border-radius:12px;} .bean_msg-target-title{font-size:15px;font-weight:700;} .bean_msg-target-by{font-size:12.5px;color:var(--bean-muted);margin-top:4px;} .bean_msg-target-body{font-size:13px;color:var(--bean-text);margin-top:8px;} .bean_tagcloud{display:block;} .bean_tagcloud-list{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0;} .bean_tagcloud-item{display:flex;align-items:center;gap:7px;padding:9px 15px; border-radius:999px;background:var(--bean-surf);border:1px solid var(--bean-line);} .bean_tagcloud-item:hover{border-color:var(--bean-accent);} .bean_tagcloud-name{font-size:13px;font-weight:600;color:var(--bean-text);} .bean_tagcloud-count{font-size:11px;font-weight:700;color:var(--bean-accent);} /* ============================================================ MEMBER MODULE SKIN ============================================================ */ .bean_mpage{display:block;max-width:880px;margin:0 auto;} .bean_mpage-tabs{display:flex;flex-wrap:wrap;gap:2px; border-bottom:1px solid var(--bean-line);margin-bottom:32px;} .bean_mpage-tab{padding:12px 15px;font-size:13px;font-weight:600;color:var(--bean-muted); border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;} .bean_mpage-tab:hover{color:var(--bean-text);} .bean_mpage-tab.bean_is-on{color:var(--bean-accent); border-bottom-color:var(--bean-accent);font-weight:700;} .bean_mpage-title{font-size:24px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px;} .bean_mpage-desc{font-size:13.5px;color:var(--bean-muted);margin-bottom:22px;line-height:1.6;} .bean_mpage-sec{margin-top:44px;} .bean_mpage-sec:first-child{margin-top:0;} /* validator / 안내 메시지 */ .bean_alert{padding:13px 16px;border-radius:10px;font-size:13px;margin-bottom:20px;line-height:1.6; background:color-mix(in srgb,var(--bean-accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--bean-accent) 34%,transparent);color:var(--bean-text);} .bean_alert.bean_is-error{background:color-mix(in srgb,#e5484d 13%,transparent); border-color:color-mix(in srgb,#e5484d 42%,transparent);} /* 중앙 정렬 인증 카드 (로그인 / 계정찾기 / 비밀번호재설정 / 로그아웃) */ .bean_auth{max-width:420px;margin:8px auto;} .bean_auth-card{background:var(--bean-card);border:1px solid var(--bean-line); border-radius:16px;padding:36px 32px;} .bean_auth-title{font-size:21px;font-weight:800;text-align:center;letter-spacing:-.5px;} .bean_auth-sub{font-size:13px;color:var(--bean-muted);text-align:center; margin-top:9px;line-height:1.6;} .bean_auth-body{margin-top:24px;} .bean_auth-foot{display:flex;justify-content:center;align-items:center;gap:9px; margin-top:20px;padding-top:18px;border-top:1px solid var(--bean-line); font-size:12.5px;color:var(--bean-muted);} .bean_auth-foot a{color:var(--bean-muted);} .bean_auth-foot a:hover{color:var(--bean-accent);} .bean_auth-sep{color:var(--bean-line);} /* 로그인 페이지 — SNS 로그인 버튼 (반응형 그리드) */ .bean_auth-sns{margin-top:22px;} .bean_auth-sns-divider{display:flex;align-items:center;gap:10px;margin-bottom:12px; font-size:11.5px;color:var(--bean-muted);} .bean_auth-sns-divider::before,.bean_auth-sns-divider::after{content:"";flex:1; height:1px;background:var(--bean-line);} .bean_auth-sns-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .bean_auth-sns-btn{display:block;text-align:center;padding:11px 8px; border:1px solid var(--bean-line);border-radius:9px;background:var(--bean-surf); color:var(--bean-text);font-size:13px;font-weight:600;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:border-color .15s,color .15s;} .bean_auth-sns-btn:hover{border-color:var(--bean-accent);color:var(--bean-accent);} .bean_auth-sns-btn:last-child:nth-child(odd){grid-column:1/-1;} @media(max-width:380px){ .bean_auth-sns-grid{grid-template-columns:1fr;} } /* 회원 폼 필드 */ .bean_field{margin-bottom:16px;} .bean_field-label{display:block;font-size:12.5px;font-weight:700; color:var(--bean-text);margin-bottom:7px;} .bean_field-help{font-size:11.5px;color:var(--bean-muted);margin-top:6px;line-height:1.55;} .bean_field-radios{display:flex;flex-wrap:wrap;gap:16px;padding-top:4px;} /* 회원 폼 필수항목 표시 — 모듈이 라벨에 넣는 * 를 테마색으로 */ .bean_field em,.bean_field-label em{font-style:normal;color:var(--bean-accent) !important;font-weight:700;} /* 회원 정보수정 — 프로필 사진/이미지 마크 첨부 필드 (업로드 카드 형태로 정돈) */ #profile_imagetag,#image_nametag,#image_marktag{ display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px; margin-bottom:10px;} #profile_imagetag img,#image_nametag img,#image_marktag img{ display:block;max-width:150px;max-height:150px;width:auto;height:auto; border-radius:12px;border:1px solid var(--bean-line);background:var(--bean-surf);} #profile_imagetag button,#image_nametag button,#image_marktag button{ background:none;border:1px solid var(--bean-line);color:var(--bean-muted); padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600; font-family:inherit;cursor:pointer;transition:.15s;} #profile_imagetag button:hover,#image_nametag button:hover,#image_marktag button:hover{ border-color:var(--bean-accent);color:var(--bean-accent);} .bean_field input[type=file]{display:block;font-size:12.5px;color:var(--bean-muted); background:var(--bean-surf);border:1px solid var(--bean-line); border-radius:9px;padding:9px 12px;max-width:100%;cursor:pointer;} .bean_field .help-block{font-size:11.5px;color:var(--bean-muted); margin-top:8px;line-height:1.6;} /* 라디오 — 선택형 칩(알약) UI */ .bean_radio{display:inline-flex;align-items:center;gap:8px;font-size:13px; color:var(--bean-text);cursor:pointer;padding:9px 15px; border:1px solid var(--bean-line);border-radius:999px; background:var(--bean-card);transition:.15s;} .bean_radio:hover{border-color:var(--bean-accent);} .bean_radio:has(input:checked){border-color:var(--bean-accent); background:color-mix(in srgb,var(--bean-accent) 12%,transparent); color:var(--bean-accent);font-weight:700;} .bean_radio input{width:15px;height:15px;accent-color:var(--bean-accent);} .bean_keep{display:flex;align-items:center;gap:7px;font-size:12.5px; color:var(--bean-muted);margin:2px 0;cursor:pointer;} .bean_keep input{width:15px;height:15px;accent-color:var(--bean-accent);} .bean_keep-warn{font-size:11.5px;color:var(--bean-muted);line-height:1.55; background:var(--bean-surf);border:1px solid var(--bean-line); border-radius:8px;padding:10px 12px;margin:8px 0 2px;} .bean_req-mark{color:var(--bean-accent);font-weight:700;} /* 회원 스킨 공통 입력창 — 모듈이 네이티브 input 을 직접 출력하므로 폭넓게 적용 */ .bean_mpage input[type=text],.bean_mpage input[type=email], .bean_mpage input[type=password],.bean_mpage input[type=tel], .bean_mpage input[type=number],.bean_mpage input[type=date], .bean_mpage input[type=search],.bean_mpage input[type=url],.bean_mpage select,.bean_mpage textarea, .bean_auth input[type=text],.bean_auth input[type=email], .bean_auth input[type=password]{ width:100%;background:var(--bean-surf);border:1px solid var(--bean-line); color:var(--bean-text);padding:11px 13px;border-radius:9px;font-size:13.5px; font-family:inherit;line-height:1.4;} .bean_mpage textarea{min-height:110px;resize:vertical;line-height:1.6;} /* 단일 줄 입력칸·버튼 높이 통일 (생일 등 네이티브 input 이 더 커지는 것 방지) */ .bean_mpage input[type=text],.bean_mpage input[type=email], .bean_mpage input[type=password],.bean_mpage input[type=tel], .bean_mpage input[type=number],.bean_mpage input[type=date], .bean_mpage input[type=search],.bean_mpage input[type=url]{ box-sizing:border-box;height:42px;} .bean_mpage input:focus,.bean_mpage select:focus,.bean_mpage textarea:focus, .bean_auth input:focus{outline:0;border-color:var(--bean-accent);} /* 회원 폼 — 모듈이 생성하는 버튼(전화번호 인증·생일 삭제·우편번호 검색 등) */ .bean_mpage .bean_field .btn,.bean_mpage .bean_field input[type=button]{ display:inline-flex;align-items:center;justify-content:center;width:auto; box-sizing:border-box;height:42px !important; background:var(--bean-surf);border:1px solid var(--bean-line);color:var(--bean-text); padding:0 16px;border-radius:9px;font-size:13.5px;font-weight:600; font-family:inherit;line-height:1.4;cursor:pointer;text-decoration:none; vertical-align:middle;transition:.15s;} .bean_mpage .bean_field .btn:hover,.bean_mpage .bean_field input[type=button]:hover{ border-color:var(--bean-accent);color:var(--bean-accent);} .bean_field .verifySMS{margin-top:8px;} .bean_field .verifySMS_input_area{display:flex;gap:8px;flex-wrap:wrap; align-items:stretch;margin-top:8px;} .bean_mpage .bean_field .verifySMS_input_area .verifySMS_input_number{ width:auto;flex:1;min-width:140px;} /* jQuery UI 데이트픽커 — 생일 등 날짜 선택 달력 (BEAN 테마) */ .ui-datepicker{ width:auto !important;min-width:272px;padding:12px !important;z-index:200; background:var(--bean-card) !important;border:1px solid var(--bean-line) !important; border-radius:14px !important;box-shadow:0 22px 50px rgba(0,0,0,.34); font-family:var(--bean-sans);color:var(--bean-text);} .ui-datepicker .ui-datepicker-header{ position:relative;background:none !important;border:0 !important;padding:2px 36px 10px !important;} .ui-datepicker .ui-datepicker-title{ display:flex;justify-content:center;align-items:center;gap:6px; margin:0;font-size:13.5px;font-weight:700;color:var(--bean-text);line-height:30px;} .ui-datepicker .ui-datepicker-title select{ background:var(--bean-surf);color:var(--bean-text); border:1px solid var(--bean-line);border-radius:8px; padding:4px 8px;font-size:12.5px;font-family:inherit;cursor:pointer;margin:0;} .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{ position:absolute;top:0;width:30px;height:30px;cursor:pointer; border:0 !important;background:none;border-radius:8px;transition:background .15s;} .ui-datepicker .ui-datepicker-prev{left:0;} .ui-datepicker .ui-datepicker-next{right:0;} .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover{background:var(--bean-surf);} .ui-datepicker .ui-datepicker-prev .ui-icon, .ui-datepicker .ui-datepicker-next .ui-icon{display:none;} .ui-datepicker .ui-datepicker-prev::before, .ui-datepicker .ui-datepicker-next::before{ content:'';position:absolute;top:50%;left:50%; width:7px;height:7px;border:2px solid var(--bean-text);border-right:0;border-bottom:0;} .ui-datepicker .ui-datepicker-prev::before{transform:translate(-20%,-50%) rotate(-45deg);} .ui-datepicker .ui-datepicker-next::before{transform:translate(-80%,-50%) rotate(135deg);} .ui-datepicker table.ui-datepicker-calendar{ width:100%;border-collapse:collapse;margin:0;font-size:12.5px;} .ui-datepicker .ui-datepicker-calendar th{ padding:6px 0;font-size:11px;font-weight:700;color:var(--bean-muted);} .ui-datepicker .ui-datepicker-calendar td{padding:1px;border:0;} .ui-datepicker .ui-datepicker-calendar td a, .ui-datepicker .ui-datepicker-calendar td span{ display:block;text-align:center;padding:0 !important;border:0 !important; height:32px;line-height:32px;border-radius:9px; background:none !important;color:var(--bean-text) !important;text-decoration:none;} .ui-datepicker .ui-datepicker-calendar td span{color:var(--bean-muted) !important;opacity:.45;} .ui-datepicker .ui-datepicker-calendar td:first-child a, .ui-datepicker .ui-datepicker-calendar td:first-child span{color:#e5709a !important;} .ui-datepicker .ui-datepicker-calendar td:last-child a, .ui-datepicker .ui-datepicker-calendar td:last-child span{color:#6f9be0 !important;} .ui-datepicker .ui-datepicker-calendar td a:hover{background:var(--bean-surf) !important;} .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month a{ color:var(--bean-muted) !important;opacity:.4;} .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a{ background:color-mix(in srgb,var(--bean-accent) 16%,transparent) !important; color:var(--bean-accent) !important;font-weight:700;} .ui-datepicker .ui-datepicker-calendar td a.ui-state-active{ background:var(--bean-accent) !important;color:var(--bean-onaccent) !important;font-weight:700;} .ui-datepicker .ui-datepicker-buttonpane{ margin:8px -2px 0;padding-top:8px;border-top:1px solid var(--bean-line); display:flex;justify-content:space-between;} .ui-datepicker .ui-datepicker-buttonpane button{ background:none;border:0;color:var(--bean-accent);font-family:inherit; font-size:12px;font-weight:700;cursor:pointer;padding:4px 6px;border-radius:6px;} .ui-datepicker .ui-datepicker-buttonpane button:hover{background:var(--bean-surf);} .bean_mpage input[readonly],.bean_mpage input[disabled]{ background:var(--bean-bg);color:var(--bean-muted);} /* 우편번호·주소 위젯 (krzip — 모듈 자체 default.css 가 24px 인풋·회색 보더를 강제하므로 덮어쓴다) */ .bean_mpage .krZip{display:flex;flex-direction:column;gap:10px;} .bean_mpage .krZip>div{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:0;} .bean_mpage .krZip label{min-width:0;width:100%;margin:0; font-size:11.5px;font-weight:700;color:var(--bean-muted); letter-spacing:.02em;} .bean_mpage .krZip input[type=text]{height:auto;line-height:1.4; flex:1;width:auto;min-width:150px;} .bean_mpage .krZip .krzip-postcode{flex:0 0 auto;width:140px;min-width:0;} .bean_mpage .krZip .krzip-guide{display:none;width:100%; color:var(--bean-muted);font-size:11.5px;line-height:1.55;} /* 모듈이 생성하는 전화번호 입력칸 (extravar tel — 인라인 style="width:33.3px" 보정) */ .bean_mpage .bean_field input.rx_ev_tel1, .bean_mpage .bean_field input.rx_ev_tel2, .bean_mpage .bean_field input.rx_ev_tel3{width:72px !important;text-align:center;} .bean_mpage .bean_field input.rx_ev_tel_v2, .bean_mpage .bean_field select.rx_ev_select_country{width:auto; display:inline-block;min-width:200px;max-width:100%;} /* 생일 — 날짜 입력 + 삭제 버튼을 한 줄로 (모듈이 input 을 width:100% 로 출력해 줄바꿈되던 문제) */ .bean_mpage .bean_field:has(.inputDate){ display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;} .bean_mpage .bean_field:has(.inputDate)>.bean_field-label{width:100%;margin-bottom:0;} .bean_mpage .bean_field:has(.inputDate) .inputDate{flex:1;width:auto;min-width:200px;} .bean_mpage .bean_field:has(.inputDate) .dateRemover{flex:0 0 auto;} /* 전화번호 — 국가번호 select + 번호 입력 + 인증 버튼을 한 줄로 */ .bean_mpage .bean_field:has(.phone_number){ display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;} .bean_mpage .bean_field:has(.phone_number)>.bean_field-label{width:100%;margin-bottom:0;} .bean_mpage .bean_field:has(.phone_number) .phone_country{ flex:0 0 auto;width:auto;min-width:130px;} .bean_mpage .bean_field:has(.phone_number) .phone_number{ flex:1;width:auto;min-width:160px;} .bean_mpage .bean_field:has(.phone_number) .verifySMS{flex:0 0 auto;margin-top:0;} .bean_mpage .bean_field:has(.phone_number) .verifySMS_input_area{width:100%;margin-top:0;} /* 폼 하단 버튼줄 */ .bean_form-foot{display:flex;justify-content:flex-end;gap:8px; margin-top:26px;padding-top:18px;border-top:1px solid var(--bean-line);} .bean_form-foot .bean_btn,.bean_form-foot .bean_btn-line{min-width:120px;} .bean_btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;} /* 인라인 폼 (입력창 + 버튼 한 줄) — 입력창·select·버튼 높이 통일 */ .bean_inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;} .bean_inline-form input[type=text],.bean_inline-form input[type=email], .bean_inline-form input[type=password]{flex:1;min-width:180px;} .bean_inline-form input,.bean_inline-form select, .bean_inline-form .bean_btn,.bean_inline-form .bean_btn-line{height:44px;} .bean_inline-form .bean_btn,.bean_inline-form .bean_btn-line{ display:inline-flex;align-items:center;justify-content:center; padding-top:0;padding-bottom:0;} /* 회원정보 정의 목록 */ .bean_dl{border-top:2px solid var(--bean-accent);} .bean_dl-row{display:flex;border-bottom:1px solid var(--bean-line);} .bean_dl-dt{width:210px;flex:0 0 auto;padding:14px 18px;background:var(--bean-surf); font-size:13px;font-weight:700;color:var(--bean-text);} .bean_dl-dd{flex:1;padding:14px 18px;font-size:13.5px;color:var(--bean-muted); word-break:break-word;} .bean_dl-dd.bean_is-empty{color:var(--bean-line);} /* 데이터 표 (내 글 / 댓글 / 스크랩 / 저장글 / 기기) */ .bean_dtable{width:100%;border-collapse:collapse;border-spacing:0; border-top:2px solid var(--bean-accent);font-family:inherit;} .bean_dtable th{font-size:12px;color:var(--bean-muted);font-weight:700; padding:12px 10px;border-bottom:1px solid var(--bean-line);text-align:left;} .bean_dtable td{font-size:13px;padding:13px 10px;color:var(--bean-muted); border-bottom:1px solid var(--bean-line);vertical-align:middle;} .bean_dtable tr:hover td{background:var(--bean-surf);} .bean_dtable .bean_dt-title,.bean_dtable .bean_dt-title a{ color:var(--bean-text);font-weight:600;} .bean_dtable .bean_dt-title a:hover{color:var(--bean-accent);} .bean_dtable-cap{font-size:12px;color:var(--bean-muted);margin-bottom:10px;} .bean_text-btn{background:none;border:0;color:var(--bean-muted);cursor:pointer; font-family:inherit;font-size:12.5px;padding:4px 6px;} .bean_text-btn:hover{color:var(--bean-accent);text-decoration:underline;} .bean_saved-content{margin-top:8px;padding:13px 15px;background:var(--bean-surf); border:1px solid var(--bean-line);border-radius:10px; font-size:13px;color:var(--bean-text);line-height:1.7;} /* 약관 동의 (회원가입) */ .bean_agree{border:1px solid var(--bean-line);border-radius:12px; margin-bottom:14px;overflow:hidden;} .bean_agree-title{padding:12px 16px;background:var(--bean-surf); font-size:13px;font-weight:700;color:var(--bean-text);} .bean_agree-text{max-height:170px;overflow-y:auto;padding:14px 16px; font-size:12.5px;color:var(--bean-muted);line-height:1.7; border-bottom:1px solid var(--bean-line);} .bean_agree-confirm{padding:11px 16px;} .bean_agree-confirm .bean_radio{font-size:12.5px;} /* 목록 도구줄 */ .bean_list-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start; justify-content:space-between;margin:22px 0 26px;} .bean_list-search{display:flex;gap:8px;flex-wrap:wrap;} .bean_list-search input[type=text],.bean_list-search select{width:auto;} .bean_list-search input[type=text]{min-width:180px;} .bean_list-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;} /* 인라인 영역의 select 는 내용 너비만 차지 — 버튼이 같은 줄에 붙도록 */ .bean_mpage .bean_inline-form select, .bean_mpage .bean_list-tools select, .bean_mpage .bean_btn-row select{width:auto;max-width:100%;} /* ============================================================ MESSAGE MODULE (시스템 메시지 / 오류 표시) ============================================================ */ .bean_sysmsg .bean_auth-card{text-align:center;} .bean_sysmsg-code{font-size:54px;font-weight:800;line-height:1;letter-spacing:-1px; color:var(--bean-accent);margin-bottom:10px;} .bean_sysmsg-detail,.bean_sysmsg-help,.bean_sysmsg-loc{margin-top:8px;} .bean_sysmsg-help{color:var(--bean-muted);font-size:12.5px;} .bean_sysmsg-loc{word-break:break-all;font-size:12px;color:var(--bean-muted);} /* ============================================================ NCENTERLITE MODULE (알림센터) ============================================================ */ /* 상단 고정 알림 바 (ncenterlite.html 위젯) */ #nc_container.bean_ncl-bar{z-index:99;position:fixed;top:0;left:0;width:100%; margin:0;padding:0;background:var(--bean-card);border-bottom:1px solid var(--bean-line); color:var(--bean-text);font-size:12px;line-height:1.4;} .bean_ncl-block{height:38px;} .bean_ncl-menu{display:flex;align-items:center;gap:10px;margin:0;padding:7px 14px;list-style:none;} .bean_ncl-menu::after{content:"";display:block;clear:both;} .bean_ncl-menu-item.fRight{margin-left:auto;} .bean_ncl-menu-item.fLeft,.bean_ncl-profile.fLeft{float:none;} .bean_ncl-profile{display:flex;align-items:center;gap:6px;color:var(--bean-muted);} .bean_ncl-profile-name{color:var(--bean-text);} .bean_ncl-profile-img{width:22px;height:22px;border-radius:50%;object-fit:cover;} #nc_container.bean_ncl-bar a{text-decoration:none;color:var(--bean-text);} .bean_ncl-toggle{display:inline-block;font-weight:600;color:var(--bean-accent);cursor:pointer;} .bean_ncl-readall{display:none;margin-left:8px;font-size:11px;color:var(--bean-muted);} .bean_ncl-close{color:var(--bean-muted);} .bean_ncl-close:hover,.bean_ncl-readall:hover,.bean_ncl-toggle:hover{color:var(--bean-text);} /* 바 안의 드롭다운 피드 */ #nc_container .bean_ncl-list{display:none;position:absolute;top:100%;left:14px; width:340px;max-width:90vw;box-sizing:border-box;background:var(--bean-card); border:1px solid var(--bean-line);border-radius:0 0 14px 14px; box-shadow:0 10px 28px rgba(0,0,0,.22);} #nc_container .bean_ncl-list-scroll{overflow-y:auto;overflow-x:hidden;} .bean_ncl-feed{margin:0;padding:0;list-style:none;} .bean_ncl-more{display:block;padding:11px;text-align:center;font-size:12px; color:var(--bean-accent);border-top:1px solid var(--bean-line);} .bean_ncl-more:hover{background:color-mix(in srgb,var(--bean-accent) 14%,transparent);} /* 피드 항목 (바 드롭다운 + NotifyList 페이지 공용) */ .bean_ncl-feed-item{display:flex;align-items:flex-start;gap:10px;padding:12px 14px; border-bottom:1px solid var(--bean-line);list-style:none;} .bean_ncl-feed-item:last-child{border-bottom:0;} .bean_ncl-feed-link{display:flex;flex:1;min-width:0;gap:10px;align-items:flex-start; text-decoration:none;color:var(--bean-text);} .bean_ncl-feed-link:hover .bean_ncl-feed-text{color:var(--bean-accent);} .bean_ncl-feed-img{flex:0 0 auto;width:38px;height:38px;border-radius:50%;object-fit:cover;} .bean_ncl-feed-body{min-width:0;flex:1;} .bean_ncl-feed-text{display:block;font-size:13px;line-height:1.45;word-break:break-word;} .bean_ncl-feed-meta,.bean_ncl-feed-ago{display:block;margin-top:3px; font-size:11px;color:var(--bean-muted);} .bean_ncl-feed-sep{margin:0 4px;} .bean_ncl-is-unread{background:color-mix(in srgb,var(--bean-accent) 9%,transparent);} .bean_ncl-is-unread .bean_ncl-feed-text{font-weight:600;} .bean_ncl-tag{flex:0 0 auto;padding:2px 8px;border-radius:999px;font-size:11px; background:var(--bean-surf);color:var(--bean-muted);} .bean_ncl-tag-new{background:var(--bean-accent);color:var(--bean-onaccent);} .bean_ncl-empty{padding:28px 14px;text-align:center;color:var(--bean-muted);} .bean_ncl-warn{color:var(--bean-accent2);} .bean_ncl-config-row{border-top:1px solid var(--bean-line);padding-top:14px;} .bean_ncl-popup{padding:20px;} .bean_ncl-target{padding:14px;margin-bottom:16px;} .bean_ncl-target-type{display:block;font-size:12px;color:var(--bean-muted);margin-bottom:4px;} .bean_ncl-target-text{margin:0;font-size:14px;line-height:1.5;} .bean_ncl-sub-select{min-width:140px;} @media(max-width:640px){ #nc_container.bean_ncl-bar{position:relative;} .bean_ncl-block{display:none;} #nc_container .bean_ncl-list{position:relative;top:0;left:0;width:100%;} } /* ============================================================ COMMUNICATION MODULE (쪽지 / 친구) ============================================================ */ .bean_comm-popup{padding:18px 0;} .bean_comm-boxnav{flex-wrap:wrap;} .bean_comm-view{padding:20px 22px;} .bean_comm-view-title{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--bean-text);} .bean_comm-view-meta{margin:0 0 14px;font-size:13px;color:var(--bean-muted); display:flex;gap:10px;align-items:baseline;} .bean_comm-view-meta a{color:var(--bean-text);font-weight:600;} .bean_comm-view-date{color:var(--bean-muted);} .bean_comm-view-body{padding:14px 0;border-top:1px solid var(--bean-line); line-height:1.7;color:var(--bean-text);word-break:break-word;} .bean_comm-view-tools{margin-top:14px;} .bean_comm-files{margin:12px 0 0;padding:12px 14px;list-style:none; background:color-mix(in srgb,var(--bean-accent) 8%,transparent);border-radius:10px;} .bean_comm-files li{font-size:13px;line-height:1.9;} .bean_comm-files a{color:var(--bean-text);font-weight:600;} .bean_comm-file-size{color:var(--bean-muted);} .bean_comm-editor{margin:4px 0 6px;} .bean_comm-listfoot{margin-top:16px;} .bean_comm-friend-total{font-size:13px;color:var(--bean-muted);} /* ============================================================ ELKHABOOK MODULE (mylog / 미니홈피) ============================================================ */ .bean_mylog-grid{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start;} .bean_mylog-side{display:flex;flex-direction:column;gap:14px;min-width:0;} .bean_mylog-feed{display:flex;flex-direction:column;gap:14px;min-width:0;} .bean_mylog-nav{margin-bottom:18px;} .bean_mylog-profile{text-align:center;padding:22px 20px;} .bean_mylog-block{padding:18px 20px;} /* 사이드바 정보 블록 — 좁은 폭에 맞춘 세로 스택 (키 위, 값 아래) */ .bean_mylog-info-row{padding:9px 0;border-bottom:1px solid var(--bean-line);} .bean_mylog-info-row:first-child{padding-top:0;} .bean_mylog-info-row:last-child{border-bottom:0;padding-bottom:0;} .bean_mylog-info-k{display:block;font-size:11.5px;font-weight:700; color:var(--bean-muted);margin-bottom:4px;} .bean_mylog-info-v{display:block;font-size:13px;color:var(--bean-text); line-height:1.6;word-break:break-word;} .bean_mylog-info-v a{color:var(--bean-text);} .bean_mylog-info-v a:hover{color:var(--bean-accent);} .bean_mylog-avatar{width:104px;height:104px;margin:0 auto 12px;border-radius:50%; overflow:hidden;background:var(--bean-surf);border:2px solid var(--bean-line);} .bean_mylog-avatar img{width:100%;height:100%;object-fit:cover;display:block;} .bean_mylog-avatar-none{display:flex;width:100%;height:100%;align-items:center; justify-content:center;font-size:42px;font-weight:700;color:var(--bean-onaccent); background:var(--bean-accent);text-transform:uppercase;} .bean_mylog-name{margin:0 0 12px;font-size:18px;font-weight:700;} .bean_mylog-name a{color:var(--bean-text);text-decoration:none;} .bean_mylog-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap; padding:12px 0;border-top:1px solid var(--bean-line);} .bean_mylog-stat{display:flex;flex-direction:column;align-items:center;min-width:56px; padding:4px 6px;border-radius:10px; background:color-mix(in srgb,var(--bean-accent) 8%,transparent);} .bean_mylog-stat-num{font-size:16px;font-weight:700;color:var(--bean-accent);} .bean_mylog-stat-label{font-size:11px;color:var(--bean-muted);margin-top:2px;} .bean_mylog-follow-btn{display:inline-flex;align-items:center;} .bean_mylog-signature{margin:10px 0 0;padding-top:10px;font-size:13px; color:var(--bean-muted);line-height:1.6;border-top:1px solid var(--bean-line);} .bean_mylog-block-title{display:flex;justify-content:space-between;align-items:baseline; margin:0 0 12px;padding-bottom:11px;font-size:14px;font-weight:700; color:var(--bean-text);border-bottom:1px solid var(--bean-line);} .bean_mylog-more{font-size:12px;} .bean_mylog-empty{color:var(--bean-muted);} .bean_mylog-nicklog{display:inline-block;margin-right:8px;} .bean_mylog-nicklog-date{color:var(--bean-muted);font-size:11px;} .bean_mylog-cats{list-style:none;margin:0;padding:0;} .bean_mylog-cat{display:flex;justify-content:space-between;padding:5px 0; border-bottom:1px solid var(--bean-line);font-size:13px;} .bean_mylog-cat:last-child{border-bottom:0;} .bean_mylog-cat a{color:var(--bean-text);text-decoration:none;} .bean_mylog-cat a.bean_is-on{font-weight:700;color:var(--bean-accent);} .bean_mylog-cat a:hover{color:var(--bean-accent);} .bean_mylog-cat-num{color:var(--bean-muted);font-size:12px;} .bean_mylog-cfg{position:relative;display:inline-block;} .bean_mylog-cfg-menu{display:none;position:absolute;right:0;top:100%;z-index:20; min-width:160px;margin-top:4px;padding:8px;border:1px solid var(--bean-line); border-radius:12px;background:var(--bean-card); box-shadow:0 6px 18px color-mix(in srgb,var(--bean-text) 14%,transparent);} .bean_mylog-cfg:hover .bean_mylog-cfg-menu, .bean_mylog-cfg:focus-within .bean_mylog-cfg-menu{display:block;} .bean_mylog-cfg-item{display:block;padding:5px 6px;font-size:12px;border-radius:8px; color:var(--bean-text);text-decoration:none;} .bean_mylog-cfg-item:hover{background:color-mix(in srgb,var(--bean-accent) 14%,transparent);} .bean_mylog-cfg-help{display:block;margin-top:4px;padding-top:6px;font-size:11px; color:var(--bean-muted);border-top:1px solid var(--bean-line);} .bean_mylog-cfg-static{font-size:12px;color:var(--bean-muted);} .bean_mylog-docs{padding:20px 22px;} .bean_mylog-docs-title{display:flex;align-items:baseline;gap:8px;margin:0 0 12px; padding-bottom:10px;font-size:15px;font-weight:700; border-bottom:2px solid var(--bean-line);} .bean_mylog-docs-count{font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px; color:var(--bean-accent);background:color-mix(in srgb,var(--bean-accent) 14%,transparent);} .bean_mylog-docs-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px; margin-bottom:14px;font-size:12px;} .bean_mylog-docs-pages{display:flex;flex-wrap:wrap;align-items:center;gap:12px;} .bean_mylog-docs-cfg{display:flex;align-items:center;gap:7px;margin-left:auto;} .bean_mylog-docs-cfg-label{font-size:11px;font-weight:700;letter-spacing:.3px; color:var(--bean-muted);} .bean_mylog-cfg-caret{font-size:9px;margin-left:3px;color:var(--bean-muted);} .bean_mylog-curpage{font-weight:700;color:var(--bean-accent);} .bean_mylog-docs-msg{padding:20px 0;text-align:center;color:var(--bean-muted);} .bean_mylog-timeline{list-style:none;margin:0;padding:0;} .bean_mylog-tl-item{display:grid;grid-template-columns:84px 1fr;gap:12px; position:relative;padding:10px 0;} .bean_mylog-tl-when{text-align:right;font-size:12px;color:var(--bean-muted);} .bean_mylog-tl-date{font-weight:700;color:var(--bean-text);} .bean_mylog-tl-time{font-size:11px;} .bean_mylog-tl-body{position:relative;padding-left:16px;min-width:0; border-left:2px solid var(--bean-line);} .bean_mylog-tl-body::before{content:"";position:absolute;left:-6px;top:4px; width:10px;height:10px;border-radius:50%;background:var(--bean-card); border:2px solid var(--bean-line);} .bean_mylog-tl-dot .bean_mylog-tl-body::before{border-color:var(--bean-accent);} .bean_mylog-tl-invalid .bean_mylog-tl-body{font-style:italic;opacity:.7;} .bean_mylog-tl-title{margin:0 0 4px;font-size:14px;font-weight:600;line-height:1.4;} .bean_mylog-tl-title a{color:var(--bean-text);text-decoration:none;} .bean_mylog-tl-title a:hover{color:var(--bean-accent);} .bean_mylog-tl-board{font-size:12px;font-weight:600;padding:0 6px;border-radius:6px; color:var(--bean-accent2);background:color-mix(in srgb,var(--bean-accent2) 14%,transparent);} .bean_mylog-tl-room{font-size:12px;color:var(--bean-muted);} .bean_mylog-tl-summary{margin:0;font-size:13px;color:var(--bean-muted);line-height:1.5; word-break:break-word;} .bean_mylog-tl-metas{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:10px;font-size:11px;} .bean_mylog-tl-meta{color:var(--bean-muted);} .bean_mylog-tl-meta-k{color:var(--bean-text);font-weight:600;} .bean_mylog-tl-title .delete{margin-left:6px;font-size:11px;color:var(--bean-muted);} @media(max-width:720px){ .bean_mylog-grid{grid-template-columns:1fr;} } /* ============================================================ LAZYPUSH MODULE (푸시 알림 설정) ============================================================ */ .bean_lazy-sec{margin-top:34px;padding-top:28px;border-top:1px solid var(--bean-line);} .bean_lazy-sec:first-of-type{margin-top:24px;padding-top:0;border-top:0;} .bean_lazy-h{font-size:15px;font-weight:800;color:var(--bean-text);margin:0 0 12px;} .bean_lazy-h-sub{font-size:13.5px;margin-top:22px;} .bean_lazy-intro{font-size:13px;color:var(--bean-muted);line-height:1.6;margin:0 0 12px;} .bean_lazy-state{font-size:13.5px;margin:10px 0;} .bean_lazy-on{color:#16a34a;font-weight:700;} .bean_lazy-off{color:#dc2626;font-weight:700;} .bean_lazy-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;} .bean_lazy-opt label{display:flex;align-items:center;gap:9px;padding:9px 11px; border-radius:9px;font-size:13.5px;color:var(--bean-text);cursor:pointer;} .bean_lazy-opt label:hover{background:var(--bean-surf);} .bean_lazy-opt input{width:16px;height:16px;accent-color:var(--bean-accent);flex:0 0 auto;} .bean_lazy-times{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;} .bean_lazy-time{display:flex;flex-wrap:wrap;align-items:center;gap:8px; padding:11px 13px;background:var(--bean-surf);border:1px solid var(--bean-line); border-radius:10px;font-size:13px;color:var(--bean-text);} .bean_mpage .bean_lazy-time select{width:auto;} .bean_lazy-time-label{flex:1;} .bean_lazy-time-tilde{color:var(--bean-muted);} .bean_mpage input.bean_lazy-email{width:auto;display:inline-block;min-width:220px;max-width:100%;} .bean_lazy-email-label{font-size:12.5px;font-weight:700;color:var(--bean-text);margin-right:4px;} /* ============================================================ 외부페이지 — 음원 유통 소개 (distribution) ============================================================ */ .bean_dist{margin:0 auto;} /* --- section shell --- */ .bean_dist-sect{padding:54px 0;} .bean_dist-sect:first-child{padding-top:0;} .bean_dist-alt{background:var(--bean-surf); padding:54px 28px;margin:0 -28px;border-radius:0;} .bean_dist-sect-t{font-size:12.5px;letter-spacing:2px; color:var(--bean-accent);font-weight:700;} .bean_dist-sect-h{font-size:clamp(22px,3.2vw,32px);font-weight:800; letter-spacing:-.5px;color:var(--bean-text);margin:8px 0 28px;} /* --- stat grid --- */ .bean_dist-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .bean_dist-stat{padding:28px 20px;text-align:center;background:var(--bean-card); border:1px solid var(--bean-line);border-radius:14px;} .bean_dist-stat-n{font-size:34px;font-weight:900;color:var(--bean-accent); letter-spacing:-1px;} .bean_dist-stat-l{font-size:12.5px;color:var(--bean-muted);margin-top:6px;} /* --- about lead body --- */ .bean_dist-lead-body{font-size:15px;line-height:1.9;color:var(--bean-muted);} .bean_dist-lead-body p{margin:0 0 12px;} .bean_dist-lead-body p:last-child{margin-bottom:0;} /* --- feature cards --- */ .bean_dist-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .bean_dist-feat{padding:26px 26px;background:var(--bean-card); border:1px solid var(--bean-line);border-radius:14px;} .bean_dist-feat h3{font-size:16.5px;font-weight:800;color:var(--bean-text); margin:0 0 8px;} .bean_dist-feat p{font-size:13.5px;line-height:1.7;color:var(--bean-muted);margin:0;} /* --- step cards --- */ .bean_dist-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .bean_dist-step{padding:24px;background:var(--bean-card); border:1px solid var(--bean-line);border-radius:14px;} .bean_dist-step-n{font-size:12px;font-weight:800;letter-spacing:1px; color:var(--bean-accent);} .bean_dist-step h3{font-size:15.5px;font-weight:800;color:var(--bean-text); margin:9px 0 6px;} .bean_dist-step p{font-size:12.5px;line-height:1.65;color:var(--bean-muted);margin:0;} /* --- channel banner --- */ .bean_dist-banner{position:relative;overflow:hidden;border-radius:18px; padding:54px 30px;margin:0 0 36px;text-align:center; background:linear-gradient(140deg,var(--bean-card),var(--bean-bg)); border:1px solid var(--bean-line);} .bean_dist-banner-label{display:inline-block;font-size:13px;font-weight:800; letter-spacing:5px;color:var(--bean-accent);margin-bottom:14px;} .bean_dist-banner-text{font-size:clamp(16px,2.3vw,22px);line-height:1.7; font-weight:600;color:var(--bean-text);margin:0;} .bean_dist-banner-num{display:inline-block;font-size:1.7em;font-weight:800; color:var(--bean-accent);margin:0 4px;} .bean_dist-intro{text-align:center;margin:0 0 38px;} .bean_dist-intro p{font-size:15px;font-weight:500;line-height:1.7; color:var(--bean-text);margin:0 0 8px;} .bean_dist-intro p:last-child{margin-bottom:0;} /* --- platform logo grid (preserved look) --- */ .bean_dist-platforms{margin:0 0 36px;} .bean_dist-platforms:last-child{margin-bottom:0;} .bean_dist-h{font-size:18px;font-weight:800;color:var(--bean-text); padding-bottom:12px;margin:0 0 20px;letter-spacing:-.3px; border-bottom:2px solid var(--bean-accent);} .bean_dist-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;} .bean_dist-grid-3{grid-template-columns:repeat(3,1fr);} .bean_dist-logo{display:flex;align-items:center;justify-content:center; padding:20px;background:var(--bean-card);border:1px solid var(--bean-line); border-radius:12px;transition:transform .18s,border-color .18s;} .bean_dist-logo:hover{transform:translateY(-3px);border-color:var(--bean-accent);} .bean_dist-logo img{width:100%;max-width:118px;height:40px;object-fit:contain;} /* --- faq accordion --- */ .bean_dist-faq-group{margin-bottom:32px;} .bean_dist-faq-group:last-child{margin-bottom:0;} .bean_dist-faq-item{margin-bottom:10px;background:var(--bean-card); border:1px solid var(--bean-line);border-radius:12px;overflow:hidden;} .bean_dist-faq-q{width:100%;display:flex;align-items:center;gap:12px; padding:16px 18px;background:none;border:0;cursor:pointer;font-family:inherit; font-size:14.5px;font-weight:600;color:var(--bean-text);text-align:left; line-height:1.5;transition:background .15s;} .bean_dist-faq-q:hover,.bean_dist-faq-q.bean_is-on{background:var(--bean-surf);} .bean_dist-faq-caret{flex:0 0 auto;font-size:10px;color:var(--bean-accent); transition:transform .2s;} .bean_dist-faq-q.bean_is-on .bean_dist-faq-caret{transform:rotate(90deg);} .bean_dist-faq-a{display:none;padding:4px 18px 16px;border-top:1px solid var(--bean-line);} .bean_dist-faq-a.bean_is-open{display:block;} .bean_dist-faq-a p{font-size:13.5px;line-height:1.75;color:var(--bean-muted);margin:10px 0 0;} .bean_dist-faq-a a{color:var(--bean-accent);text-decoration:underline;} /* --- cta band --- */ .bean_dist-cta-band{padding:46px 40px;text-align:center;border-radius:18px; background:linear-gradient(150deg,var(--bean-accent),var(--bean-accent2));} .bean_dist-cta-band h3{font-size:24px;font-weight:800;color:var(--bean-onaccent);margin:0;} .bean_dist-cta-band p{font-size:13.5px;line-height:1.7;color:var(--bean-onaccent); opacity:.9;margin:9px 0 20px;} .bean_dist-btn{display:inline-block;background:var(--bean-onaccent); color:var(--bean-accent);padding:14px 30px;border-radius:999px; font-size:14.5px;font-weight:700;text-decoration:none;transition:background .15s;} .bean_dist-cta-band .bean_dist-btn:hover{background:var(--bean-bg);} /* ============================================================ 외부페이지 — 아티스트 프로필 (profile) ============================================================ */ .bean_prof{max-width:1140px;margin:0 auto;} /* 히어로 — 사진(메인+서브갤러리) | 정보. 넓은 화면: 1:1 두 컬럼 / 좁은 화면(≤1080): 세로 1단 */ .bean_prof-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px;align-items:start;} /* 사진 + 썸네일 갤러리 */ .bean_prof-photo{border-radius:16px;overflow:hidden; border:1px solid var(--bean-line);background:var(--bean-surf);} .bean_prof-photo-img{display:block;width:100%;aspect-ratio:1/1; object-fit:cover;object-position:center 22%;} .bean_prof-thumbs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;} .bean_prof-thumb{flex:1 1 0;min-width:50px;aspect-ratio:1/1;object-fit:cover; cursor:pointer;border-radius:9px;border:1px solid var(--bean-line); transition:border-color .15s,transform .15s;} .bean_prof-thumb:hover{border-color:var(--bean-accent);transform:translateY(-2px);} /* 정보 컬럼 */ .bean_prof-info{min-width:0;} .bean_prof-role{font-size:12.5px;font-weight:800;letter-spacing:1.5px; text-transform:uppercase;color:var(--bean-accent);} .bean_prof-name{font-size:clamp(30px,4.4vw,42px);font-weight:900;letter-spacing:-1px; line-height:1.15;color:var(--bean-text);margin:9px 0 16px;} .bean_prof-bio{font-size:14px;line-height:1.9;color:var(--bean-muted); margin:0 0 20px;white-space:pre-line;} /* 연락처 — k/v 행 */ .bean_prof-contact{border-top:1px solid var(--bean-line);} .bean_prof-contact-row{display:flex;gap:14px;padding:11px 2px; border-bottom:1px solid var(--bean-line);font-size:13.5px;} .bean_prof-ck{flex:0 0 76px;font-weight:700;color:var(--bean-accent);} .bean_prof-cv{min-width:0;color:var(--bean-muted);word-break:break-word;} .bean_prof-cv a{color:var(--bean-muted);} .bean_prof-cv a:hover{color:var(--bean-accent);} /* 전체폭 블록 (경력·학력·수상·영상 등) */ .bean_prof-block{margin-top:24px;background:var(--bean-card); border:1px solid var(--bean-line);border-radius:16px;padding:28px 30px;} .bean_prof-block-eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--bean-accent);} .bean_prof-block-title{font-size:clamp(19px,2.6vw,25px);font-weight:800;letter-spacing:-.5px; color:var(--bean-text);margin:7px 0 0;} .bean_prof-block-body{margin-top:20px;} .bean_prof-sub{font-size:13.5px;font-weight:800;color:var(--bean-text); margin:22px 0 9px;padding-left:11px;border-left:3px solid var(--bean-accent);} .bean_prof-sub:first-child{margin-top:0;} .bean_prof-text{font-size:14px;line-height:1.9;color:var(--bean-muted); margin:0 0 12px;white-space:pre-line;} .bean_prof-text:last-child{margin-bottom:0;} /* 경력 목록 — 폭에 따라 다단으로 흐른다(넓은 화면 3단 → 모바일 1단, 반응형) */ .bean_prof-list{list-style:none;margin:0;padding:0;columns:300px;column-gap:34px;} .bean_prof-list li{position:relative;font-size:13.5px;line-height:1.65; color:var(--bean-muted);padding:6px 0 6px 15px;break-inside:avoid;} .bean_prof-list li::before{content:"";position:absolute;left:0;top:13px; width:5px;height:5px;border-radius:50%;background:var(--bean-accent);} .bean_prof-list li a{color:var(--bean-text);font-weight:600;} .bean_prof-list li a:hover{color:var(--bean-accent);} /* 출연 영상 */ .bean_prof-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .bean_prof-video{border:1px solid var(--bean-line);border-radius:12px; overflow:hidden;background:var(--bean-surf);transition:transform .18s,border-color .18s;} .bean_prof-video:hover{transform:translateY(-3px);border-color:var(--bean-accent);} .bean_prof-video-frame{aspect-ratio:16/9;background:var(--bean-surf);} .bean_prof-video-frame iframe{width:100%;height:100%;border:0;display:block;} .bean_prof-video-body{padding:12px 14px;} .bean_prof-video-body h3{font-size:13.5px;font-weight:700;color:var(--bean-text);margin:0 0 4px;} .bean_prof-video-body p{font-size:12px;color:var(--bean-muted);margin:0;} .bean_prof-books{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;} .bean_prof-book{display:block;text-decoration:none;background:var(--bean-surf); border:1px solid var(--bean-line);border-radius:12px;overflow:hidden; transition:transform .18s,border-color .18s;} .bean_prof-book:hover{transform:translateY(-3px);border-color:var(--bean-accent);} .bean_prof-book-body{padding:11px 13px;} .bean_prof-book-title{font-size:13px;font-weight:700;color:var(--bean-text); line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .bean_prof-book-desc{font-size:11.5px;color:var(--bean-muted);margin-top:3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* ============================================================ 외부페이지 — 아티스트 목록 (artists) ============================================================ */ .bean_artists{max-width:1180px;margin:0 auto;} .bean_artists-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;} .bean_artists-tab{background:none;border:1px solid var(--bean-line);color:var(--bean-muted); padding:9px 18px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer; font-family:inherit;transition:.15s;} .bean_artists-tab:hover{border-color:var(--bean-accent);color:var(--bean-accent);} .bean_artists-tab.bean_is-on{background:var(--bean-accent);border-color:var(--bean-accent); color:var(--bean-onaccent);} .bean_artists-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .bean_artist-card{display:block;} .bean_artist-photo{height:300px;border-radius:14px;overflow:hidden; background:linear-gradient(160deg,var(--bean-surf),var(--bean-card)); border:1px solid var(--bean-line);transition:transform .2s,border-color .2s;} .bean_artist-photo img{width:100%;height:100%;object-fit:cover;display:block;} .bean_artist-card:hover .bean_artist-photo{border-color:var(--bean-accent);transform:translateY(-6px);} .bean_artist-name{margin-top:14px;font-size:18px;font-weight:700;color:var(--bean-text);} .bean_artist-role{font-size:12.5px;color:var(--bean-muted);letter-spacing:.5px;margin-top:2px;} .bean_artists-empty{padding:50px 0;text-align:center;color:var(--bean-muted);font-size:14px;} /* ============================================================ 페이지/위젯 모듈 관리자 버튼 영역 (btnArea) ============================================================ */ .bean_root .btnArea{margin-top:22px;padding-top:16px; border-top:1px solid var(--bean-line);display:flex;} .bean_root .btnArea .btn-group{display:flex;flex-wrap:wrap;gap:8px;} .bean_root .btnArea .btn{display:inline-flex;align-items:center;justify-content:center; background:var(--bean-surf);border:1px solid var(--bean-line);color:var(--bean-text); padding:9px 17px;border-radius:999px;font-size:12.5px;font-weight:600; font-family:inherit;line-height:1.2;cursor:pointer;text-decoration:none;transition:.15s;} .bean_root .btnArea .btn:hover{border-color:var(--bean-accent);color:var(--bean-accent);} /* ============================================================ BOARD SKIN — 관리 도구 / 선택 체크박스 ============================================================ */ .bean_board-manage{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 14px;} .bean_col-check{width:42px;text-align:center;} .bean_list-table .bean_td.bean_col-check{text-align:center;} .bean_gcard-wrap,.bean_wz-wrap,.bean_sns-wrap{position:relative;} .bean_gcard-check{position:absolute;top:10px;right:10px;z-index:3;display:flex; width:26px;height:26px;align-items:center;justify-content:center; background:var(--bean-card);border:1px solid var(--bean-line);border-radius:6px;cursor:pointer;} .bean_gcard-check input{width:16px;height:16px;cursor:pointer;margin:0;} .bean_gcard-thumb-empty,.bean_wz-thumb-empty{position:absolute;inset:0;display:flex; align-items:center;justify-content:center;font-size:30px;font-weight:800; color:var(--bean-line);letter-spacing:1px;text-transform:uppercase;} /* ---- 갤러리형 (깔끔한 그리드) ---- */ .bean_gallery-clean{gap:30px;} .bean_gallery-clean .bean_gcard{border-radius:16px;box-shadow:0 1px 2px color-mix(in srgb,var(--bean-text) 5%,transparent);} .bean_gallery-clean .bean_gcard:hover{transform:none;border-color:var(--bean-line); box-shadow:0 10px 26px color-mix(in srgb,var(--bean-text) 12%,transparent);} .bean_gallery-clean .bean_gcard-thumb{height:210px;} .bean_gallery-clean .bean_gcard-body{padding:18px 20px 20px;} /* ---- 웹진형 (webzine) ---- */ .bean_webzine{display:flex;flex-direction:column;gap:18px;} .bean_wz-item{display:flex;gap:22px;background:var(--bean-card); border:1px solid var(--bean-line);border-radius:14px;overflow:hidden; transition:border-color .18s,box-shadow .18s;} .bean_wz-item:hover{border-color:var(--bean-accent); box-shadow:0 8px 22px color-mix(in srgb,var(--bean-text) 10%,transparent);} .bean_wz-thumb{flex:0 0 280px;position:relative;overflow:hidden; background:linear-gradient(160deg,var(--bean-surf),var(--bean-card));} .bean_wz-thumb-img{width:100%;height:100%;object-fit:cover;display:block;min-height:200px;} .bean_wz-body{flex:1;min-width:0;padding:22px 24px;display:flex;flex-direction:column;} .bean_wz-cat{font-size:11px;font-weight:700;color:var(--bean-accent);letter-spacing:.5px;margin-bottom:8px;} .bean_wz-title{font-size:18px;font-weight:800;line-height:1.45;color:var(--bean-text);letter-spacing:-.3px;} .bean_wz-summary{font-size:13px;color:var(--bean-muted);line-height:1.7;margin-top:10px;flex:1; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .bean_wz-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--bean-muted);margin-top:16px;} /* ---- FAQ형 (아코디언) ---- */ .bean_faq{border-top:2px solid var(--bean-accent);} .bean_faq-item{border-bottom:1px solid var(--bean-line);} .bean_faq-q{display:flex;align-items:center;gap:12px;width:100%; padding:18px 6px;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;} .bean_faq-q-mark{flex:0 0 26px;height:26px;display:flex;align-items:center;justify-content:center; background:var(--bean-accent);color:var(--bean-onaccent);border-radius:7px;font-size:13px;font-weight:800;} .bean_faq-cat{font-size:11px;font-weight:700;color:var(--bean-accent);} .bean_faq-q-text{flex:1;min-width:0;font-size:14.5px;font-weight:700;color:var(--bean-text);} .bean_faq-notice{font-size:10.5px;font-weight:800;background:var(--bean-accent); color:var(--bean-onaccent);padding:3px 8px;border-radius:5px;} .bean_faq-arrow{flex:0 0 auto;width:22px;text-align:center;font-size:18px;color:var(--bean-muted); transition:color .15s;} .bean_faq-arrow::before{content:'+';} .bean_faq-q:hover .bean_faq-q-text{color:var(--bean-accent);} .bean_faq-q:hover .bean_faq-arrow{color:var(--bean-accent);} .bean_faq-item.bean_is-open .bean_faq-arrow::before{content:'\2212';} .bean_faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;} .bean_faq-item.bean_is-open .bean_faq-a{grid-template-rows:1fr;} .bean_faq-a-inner{overflow:hidden;min-height:0;} .bean_faq-a > .bean_faq-a-inner{display:flex;gap:12px;} .bean_faq-a-mark{flex:0 0 26px;height:26px;display:flex;align-items:center;justify-content:center; background:var(--bean-surf);color:var(--bean-muted);border:1px solid var(--bean-line); border-radius:7px;font-size:13px;font-weight:800;margin-bottom:18px;} .bean_faq-a-body{flex:1;min-width:0;padding-bottom:20px;} .bean_faq-a-text{font-size:13.5px;line-height:1.8;color:var(--bean-muted);white-space:pre-line;} .bean_faq-a-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px;} .bean_faq-a-link{font-size:12.5px;font-weight:700;color:var(--bean-accent); border:1px solid var(--bean-line);border-radius:7px;padding:6px 12px;} .bean_faq-a-link:hover{border-color:var(--bean-accent);} .bean_faq-a-meta{font-size:12px;color:var(--bean-muted);} /* ---- SNS형 (타임라인) ---- */ .bean_sns{display:flex;flex-direction:column;gap:16px;max-width:620px;margin:0 auto;} .bean_sns-item{background:var(--bean-card);border:1px solid var(--bean-line); border-radius:14px;padding:18px 20px;transition:border-color .18s;} .bean_sns-item:hover{border-color:var(--bean-accent);} .bean_sns-head{display:flex;align-items:center;gap:11px;margin-bottom:13px;} .bean_sns-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 42px;} .bean_sns-avatar-empty{display:flex;align-items:center;justify-content:center; background:var(--bean-accent);color:var(--bean-onaccent);font-size:17px;font-weight:800;text-transform:uppercase;} .bean_sns-by{min-width:0;} .bean_sns-nick{font-size:13.5px;font-weight:700;color:var(--bean-text);display:flex;align-items:center;gap:7px;} .bean_sns-flag{font-size:10px;font-weight:800;background:var(--bean-accent); color:var(--bean-onaccent);padding:2px 7px;border-radius:5px;} .bean_sns-date{font-size:12px;color:var(--bean-muted);margin-top:2px;} .bean_sns-link{display:block;} .bean_sns-cat{display:inline-block;font-size:11px;font-weight:700;color:var(--bean-accent);margin-bottom:5px;} .bean_sns-title{font-size:15.5px;font-weight:700;line-height:1.5;color:var(--bean-text);} .bean_sns-text{font-size:13.5px;line-height:1.7;color:var(--bean-muted);margin-top:7px; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;} .bean_sns-media{margin-top:13px;border-radius:11px;overflow:hidden;border:1px solid var(--bean-line);} .bean_sns-media img{width:100%;display:block;} .bean_sns-foot{display:flex;gap:16px;margin-top:14px;padding-top:13px; border-top:1px solid var(--bean-line);font-size:12.5px;color:var(--bean-muted);} .bean_sns-stat-vote{color:var(--bean-accent);font-weight:700;} /* ============================================================ BOARD SKIN — 글보기 추가 기능 (extra vars / 추천 / 서명 / 이전다음 / 하단목록) ============================================================ */ .bean_view-meta-pf{width:24px;height:24px;border-radius:50%;object-fit:cover;} /* 사용자 정의 변수 */ .bean_view-extra{margin-top:24px;border:1px solid var(--bean-line);border-radius:12px;overflow:hidden;} .bean_view-extra-row{display:flex;border-bottom:1px solid var(--bean-line);} .bean_view-extra-row:last-child{border-bottom:0;} .bean_view-extra-label{flex:0 0 150px;padding:12px 16px;background:var(--bean-surf); font-size:12.5px;font-weight:700;color:var(--bean-text);} .bean_view-extra-value{flex:1;min-width:0;padding:12px 16px;font-size:13px;color:var(--bean-muted);} /* 추천 / 비추천 / 신고 */ .bean_view-react{display:flex;gap:10px;align-items:center;justify-content:center; margin:30px 0 6px;flex-wrap:wrap;} .bean_react-votes{display:flex;gap:10px;} .bean_react-btn{display:flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit; padding:10px 20px;border-radius:10px;border:1px solid var(--bean-line); background:var(--bean-card);color:var(--bean-text);font-size:13px;font-weight:700; transition:border-color .15s,background .15s,color .15s;} .bean_react-up:hover{border-color:var(--bean-accent);color:var(--bean-accent);} .bean_react-down:hover{border-color:var(--bean-text);} .bean_react-num{font-size:13px;font-weight:800;} .bean_react-up .bean_react-num{color:var(--bean-accent);} .bean_react-declare{font-size:12px;font-weight:600;color:var(--bean-muted);padding:10px 16px;} .bean_react-declare:hover{border-color:var(--bean-text);color:var(--bean-text);} /* 작성자 서명 */ .bean_view-sign{display:flex;gap:14px;align-items:flex-start;margin-top:26px; padding:18px 20px;background:var(--bean-surf);border:1px solid var(--bean-line);border-radius:12px;} .bean_view-sign-pf{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 48px;} .bean_view-sign-name{font-size:13.5px;font-weight:700;color:var(--bean-text);} .bean_view-sign-tx{font-size:12.5px;color:var(--bean-muted);line-height:1.6;margin-top:5px;} /* 이전글 / 다음글 */ .bean_view-nav{display:flex;gap:12px;margin:18px 0 0;} .bean_view-nav-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px; padding:14px 16px;border:1px solid var(--bean-line);border-radius:10px; background:var(--bean-card);transition:border-color .15s,background .15s;} a.bean_view-nav-item:hover{border-color:var(--bean-accent);background:var(--bean-surf);} .bean_view-nav-next{text-align:right;} .bean_view-nav-empty{background:none;border-color:transparent;} .bean_view-nav-dir{font-size:11.5px;font-weight:700;color:var(--bean-accent);} .bean_view-nav-title{font-size:13.5px;color:var(--bean-text);overflow:hidden; text-overflow:ellipsis;white-space:nowrap;} /* 글 하단 목록 */ .bean_view-bottomlist{margin-top:40px;} .bean_view-bottomlist-head{font-size:13px;font-weight:800;color:var(--bean-text);margin-bottom:10px;} .bean_list-table-mini{border-top-width:1px;} .bean_list-table-mini .bean_td{padding:11px 10px;font-size:13px;} .bean_list-table .bean_tr-current .bean_td{background:color-mix(in srgb,var(--bean-accent) 12%,transparent);} .bean_list-table .bean_tr-current .bean_subject-link{color:var(--bean-accent);} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1080px){ .bean_gnb{display:none;} .bean_burger{display:flex;} .bean_nav .bean_logo{position:absolute;left:50%;transform:translateX(-50%);} .bean_foot-grid{gap:28px 24px;} .bean_foot-brand{flex-basis:100%;} .bean_gallery{grid-template-columns:repeat(2,1fr);} .bean_dist-grid{grid-template-columns:repeat(3,1fr);} .bean_dist-feat-grid{grid-template-columns:repeat(2,1fr);} .bean_prof-hero{grid-template-columns:1fr;gap:22px;} .bean_prof-video-grid{grid-template-columns:repeat(2,1fr);} .bean_prof-books{grid-template-columns:repeat(3,1fr);} .bean_artists-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:680px){ .bean_wrap{padding:0 18px;} .bean_pagehead{padding:104px 0 36px;} .bean_gallery{grid-template-columns:1fr;} .bean_board-tools{flex-direction:column;align-items:stretch;} .bean_board-search-input{width:100%;} .bean_list-table .bean_col-author, .bean_list-table .bean_col-count{display:none;} .bean_hero-mute{right:16px;bottom:64px;} .bean_write-top{flex-direction:column;} .bean_write-cat,.bean_write-notice,.bean_write-title{width:100%;} .bean_wz-item{flex-direction:column;} .bean_wz-thumb{flex-basis:auto;} .bean_wz-thumb-img{min-height:0;height:200px;} .bean_view-nav{flex-direction:column;} .bean_view-nav-next{text-align:left;} .bean_view-nav-empty{display:none;} .bean_view-extra-row{flex-direction:column;} .bean_view-extra-label{flex-basis:auto;} .bean_extra-row{flex-direction:column;} .bean_extra-label{width:100%;} .bean_msg-box{padding:26px 22px;} .bean_auth-card{padding:28px 22px;} .bean_dl-row{flex-direction:column;} .bean_dl-dt{width:100%;} .bean_form-foot{flex-direction:column-reverse;} .bean_form-foot .bean_btn,.bean_form-foot .bean_btn-line{width:100%;} .bean_dtable .bean_dt-hide{display:none;} .bean_dist-grid,.bean_dist-grid-3{grid-template-columns:repeat(2,1fr);} .bean_dist-stat-grid,.bean_dist-steps,.bean_dist-feat-grid{grid-template-columns:repeat(2,1fr);} .bean_dist-feat-grid{grid-template-columns:1fr;} .bean_dist-banner{padding:42px 18px;} .bean_dist-alt{padding:44px 18px;margin:0 -18px;} .bean_dist-sect{padding:44px 0;} .bean_dist-cta-band{padding:38px 22px;} .bean_prof-hero{gap:18px;} .bean_prof-block{padding:22px 18px;} .bean_prof-name{margin-bottom:13px;} .bean_prof-video-grid{grid-template-columns:1fr;} .bean_prof-books{grid-template-columns:repeat(2,1fr);} } /* ===== Froala 에디터 — BEAN 테마 (글쓰기 화면) ===== */ .fr-box.fr-basic{border-radius:10px;} .fr-toolbar, .fr-box.fr-basic .fr-wrapper, .fr-second-toolbar{ background:var(--bean-surf) !important; border-color:var(--bean-line) !important; color:var(--bean-text) !important;} .fr-toolbar.fr-top{border-radius:10px 10px 0 0 !important;box-shadow:none !important;} .fr-second-toolbar{border-radius:0 0 10px 10px !important;} .fr-box.fr-basic .fr-wrapper{background:var(--bean-card) !important;box-shadow:none !important;} .fr-box.fr-basic .fr-element, .fr-element.fr-view{background:var(--bean-card) !important;color:var(--bean-text) !important;} .fr-placeholder{color:var(--bean-muted) !important;} /* 툴바 버튼 */ .fr-toolbar .fr-command.fr-btn, .fr-popup .fr-command.fr-btn{color:var(--bean-text) !important;} .fr-toolbar .fr-command.fr-btn svg path, .fr-popup .fr-command.fr-btn svg path{fill:var(--bean-text) !important;} .fr-toolbar .fr-command.fr-btn:hover:not(.fr-disabled), .fr-toolbar .fr-command.fr-btn:focus:not(.fr-disabled), .fr-popup .fr-command.fr-btn:hover:not(.fr-disabled){ background:var(--bean-line) !important;color:var(--bean-text) !important;} .fr-toolbar .fr-command.fr-btn.fr-active, .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active{ background:var(--bean-line) !important;color:var(--bean-accent) !important;} .fr-toolbar .fr-command.fr-btn.fr-active svg path{fill:var(--bean-accent) !important;} .fr-toolbar .fr-command.fr-btn.fr-disabled svg path{opacity:.35;} /* 드롭다운 화살표 — Froala hover 가 #222 !important 라 #bean_root 로 우선순위 확보, hover/active 시 밝게 */ #bean_root .fr-toolbar .fr-command.fr-btn.fr-dropdown::after, #bean_root .fr-popup .fr-command.fr-btn.fr-dropdown::after{ border-top-color:var(--bean-muted) !important;} #bean_root .fr-toolbar .fr-command.fr-btn.fr-dropdown:hover::after, #bean_root .fr-toolbar .fr-command.fr-btn.fr-dropdown:focus::after, #bean_root .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active::after, #bean_root .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after, #bean_root .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after{ border-top-color:var(--bean-text) !important;} /* 툴바 구분선 (Froala 기본 #ebebeb 밝은 회색) */ #bean_root .fr-toolbar .fr-separator, #bean_root .fr-separator, .fr-popup .fr-separator,.fr-modal .fr-separator{background:var(--bean-line) !important;} .fr-toolbar .fr-newline{background:var(--bean-line) !important;} .fr-toolbar.fr-mobile .fr-more-toolbar{background:var(--bean-surf) !important;} /* 드롭다운 메뉴 */ .fr-toolbar .fr-dropdown-menu, .fr-popup .fr-dropdown-menu{ background:var(--bean-card) !important; border:1px solid var(--bean-line) !important; box-shadow:0 10px 28px rgba(0,0,0,.32) !important;} .fr-dropdown-menu .fr-dropdown-wrapper{background:transparent !important;} .fr-dropdown-menu .fr-dropdown-content ul.fr-dropdown-list li a{color:var(--bean-text) !important;} .fr-dropdown-menu .fr-dropdown-content ul.fr-dropdown-list li a:hover, .fr-dropdown-menu .fr-dropdown-content ul.fr-dropdown-list li a.fr-active{ background:var(--bean-surf) !important;color:var(--bean-accent) !important;} /* 팝업(링크·이미지·표 삽입 등) */ .fr-popup,.fr-modal{ background:var(--bean-card) !important; border:1px solid var(--bean-line) !important; color:var(--bean-text) !important; box-shadow:0 14px 36px rgba(0,0,0,.36) !important;} .fr-popup .fr-input-line input[type="text"], .fr-popup .fr-input-line input[type="number"], .fr-popup .fr-input-line textarea, .fr-modal input[type="text"],.fr-modal textarea{ background:var(--bean-surf) !important; border:1px solid var(--bean-line) !important; color:var(--bean-text) !important;} .fr-popup .fr-input-line input+label, .fr-popup .fr-input-line textarea+label{ background:var(--bean-card) !important;color:var(--bean-muted) !important;} .fr-popup input:focus,.fr-popup textarea:focus{border-color:var(--bean-accent) !important;} .fr-popup .fr-action-buttons button.fr-command{ color:var(--bean-accent) !important;background:transparent !important;} .fr-popup .fr-checkbox-line,.fr-popup label{color:var(--bean-text) !important;} .fr-popup .fr-arrow{display:none !important;} /* 카운터·툴팁·코드뷰 */ .fr-box .fr-counter,.fr-second-toolbar .fr-counter{color:var(--bean-muted) !important;} .fr-tooltip{background:var(--bean-card) !important;color:var(--bean-text) !important; border:1px solid var(--bean-line) !important;} .fr-box .CodeMirror{background:var(--bean-card) !important;color:var(--bean-text) !important;} /* 드롭다운 열림·선택·hover 상태 버튼 (Froala 기본 #ebebeb/#d6d6d6 회색 보정) */ .fr-toolbar .fr-command.fr-btn-hover, .fr-toolbar .fr-command.fr-expanded, .fr-toolbar .fr-command.fr-selected, .fr-popup .fr-command.fr-selected, .fr-modal .fr-command:hover, .fr-modal .fr-command:focus{ background:var(--bean-line) !important;color:var(--bean-text) !important;} .fr-toolbar .fr-command.fr-expanded svg path, .fr-toolbar .fr-command.fr-selected svg path{fill:var(--bean-text) !important;} /* 모달(이미지 관리자 등) */ .fr-modal,.fr-modal .fr-modal-wrapper, .fr-modal .fr-modal-wrapper .fr-modal-head{ background:var(--bean-card) !important;color:var(--bean-text) !important;} .fr-modal .fr-modal-wrapper .fr-modal-head{ border-bottom:1px solid var(--bean-line) !important;box-shadow:none !important;} .fr-modal .fr-modal-head .fr-modal-head-line, .fr-modal .fr-modal-head i, .fr-modal .fr-modal-more{color:var(--bean-text) !important;} .fr-modal .fr-modal-head svg path{fill:var(--bean-text) !important;} /* 플로팅 추가(+) 버튼 */ .fr-box a.fr-floating-btn{ background:var(--bean-surf) !important;color:var(--bean-accent) !important; border:1px solid var(--bean-line) !important;} .fr-box a.fr-floating-btn svg path{fill:var(--bean-accent) !important;} /* 분할 드롭다운 버튼(.fr-options) 흰 구분선 — Froala 기본 border-left:1px #fafafa */ #bean_root .fr-command.fr-btn.fr-options.fr-btn-hover, #bean_root .fr-command.fr-btn.fr-options:focus, #bean_root .fr-command.fr-btn.fr-options:hover{ border-left:solid 1px var(--bean-line) !important;} /* 드롭다운 열림(active) 상태 회색 — Froala 가 .fr-dropdown.fr-active:hover 에 #d6d6d6 !important 라 #bean_root 로 우선순위 확보 */ #bean_root .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover, #bean_root .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus, #bean_root .fr-toolbar .fr-command.fr-selected, #bean_root .fr-toolbar .fr-command.fr-active.fr-selected, #bean_root .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover, #bean_root .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus{ background:var(--bean-line) !important;color:var(--bean-text) !important;} /* Original file: layouts/bean/css/bean.colors.css */ /* ============================================================ BEAN THEME — bean.colors.css (색상 전용) 골조(bean.base.css)가 소비하는 --bean-* 색상 변수만 담습니다. 레이아웃 설정의 '색상 테마'가 #bean_root 에 .bean_theme-* 를 부여하면 해당 팔레트가 적용됩니다. ============================================================ */ /* --bean-* 기본값. BEAN 레이아웃 밖(다른 레이아웃·독립형으로 쓰는 모듈 스킨)에서도 var(--bean-*) 가 비지 않도록 :root 에 폴백 기본값을 둔다. BEAN 레이아웃에서는 #bean_root 의 .bean_theme-* 가 더 가까운 조상이므로 선택한 테마 색이 우선 적용된다. */ :root{ --bean-bg:#f4f5f7;--bean-card:#ffffff;--bean-surf:#f1f2f4;--bean-line:#e3e5ea; --bean-text:#1f2430;--bean-muted:#8a90a2; --bean-accent:#3b6ef0;--bean-accent2:#2554c8;--bean-onaccent:#ffffff; --bean-head:rgba(244,245,247,.78); } /* ---- Midnight — 다크 · 네이비 + 아이스 ---- */ .bean_theme-midnight{ --bean-bg:#0b1020;--bean-card:#111830;--bean-surf:#18203d;--bean-line:#26304f; --bean-text:#eef2fb;--bean-muted:#8893b4; --bean-accent:#5ad1ff;--bean-accent2:#9d7bff;--bean-onaccent:#ffffff; --bean-head:rgba(11,16,32,.72); } /* ---- Nebula — 다크 · 바이올렛 ---- */ .bean_theme-nebula{ --bean-bg:#0c0a14;--bean-card:#15121f;--bean-surf:#1e1a2c;--bean-line:#2e2742; --bean-text:#f1eef8;--bean-muted:#928aa6; --bean-accent:#a16bff;--bean-accent2:#ff5ea8;--bean-onaccent:#ffffff; --bean-head:rgba(12,10,20,.72); } /* ---- Rosewood — 다크 · 플럼 + 샴페인 ---- */ .bean_theme-rosewood{ --bean-bg:#17101a;--bean-card:#211824;--bean-surf:#2b2030;--bean-line:#3a2d40; --bean-text:#f3eef2;--bean-muted:#9d8fa0; --bean-accent:#e0b083;--bean-accent2:#d98da6;--bean-onaccent:#ffffff; --bean-head:rgba(23,16,26,.72); } /* ---- Citron — 다크 · 시트론 ---- */ .bean_theme-citron{ --bean-bg:#101110;--bean-card:#19191a;--bean-surf:#232423;--bean-line:#323331; --bean-text:#f4f5f2;--bean-muted:#8f928c; --bean-accent:#e9e34d;--bean-accent2:#bfe35a;--bean-onaccent:#ffffff; --bean-head:rgba(16,17,16,.72); } /* ---- Grove — 라이트 · 에메랄드 ---- */ .bean_theme-grove{ --bean-bg:#f6f7f4;--bean-card:#ffffff;--bean-surf:#eef0ea;--bean-line:#e0e3da; --bean-text:#15201a;--bean-muted:#6f7a72; --bean-accent:#1f9d6b;--bean-accent2:#0f6e57;--bean-onaccent:#ffffff; --bean-head:rgba(246,247,244,.78); } /* ---- Azure — 라이트 · 코발트 ---- */ .bean_theme-azure{ --bean-bg:#f3f5fa;--bean-card:#ffffff;--bean-surf:#e9edf6;--bean-line:#dde2ee; --bean-text:#16203a;--bean-muted:#6c768e; --bean-accent:#3457ff;--bean-accent2:#5e3bff;--bean-onaccent:#ffffff; --bean-head:rgba(243,245,250,.78); } /* ---- Terra — 라이트 · 테라코타 ---- */ .bean_theme-terra{ --bean-bg:#f3efe6;--bean-card:#ffffff;--bean-surf:#ebe5d8;--bean-line:#e3dccb; --bean-text:#2a2118;--bean-muted:#897e6a; --bean-accent:#c4623a;--bean-accent2:#9c4a2c;--bean-onaccent:#ffffff; --bean-head:rgba(243,239,230,.78); } /* ---- Orchid — 라이트 · 그레이프 퍼플 ---- */ .bean_theme-orchid{ --bean-bg:#f5f4f8;--bean-card:#ffffff;--bean-surf:#ecebf3;--bean-line:#e3e1ec; --bean-text:#1f1a2e;--bean-muted:#74708a; --bean-accent:#6b3fd4;--bean-accent2:#4a2aa0;--bean-onaccent:#ffffff; --bean-head:rgba(245,244,248,.78); } /* ---- Rose — 라이트 · 크림슨 로즈 ---- */ .bean_theme-rose{ --bean-bg:#faf6f7;--bean-card:#ffffff;--bean-surf:#f3e9ec;--bean-line:#ecdfe3; --bean-text:#2a1820;--bean-muted:#8a7681; --bean-accent:#d6336c;--bean-accent2:#a31d52;--bean-onaccent:#ffffff; --bean-head:rgba(250,246,247,.78); } /* ===== 추가 다크 5종 ===== */ /* ---- Carbon — 다크 · 그래파이트 + 앰버 ---- */ .bean_theme-carbon{ --bean-bg:#121212;--bean-card:#1b1b1b;--bean-surf:#262626;--bean-line:#353535; --bean-text:#f2f2f0;--bean-muted:#8f8f8a; --bean-accent:#ffb020;--bean-accent2:#ff7a3c;--bean-onaccent:#2a1c00; --bean-head:rgba(18,18,18,.72); } /* ---- Tideglass — 다크 · 딥틸 + 아쿠아 ---- */ .bean_theme-tideglass{ --bean-bg:#071417;--bean-card:#0e1f22;--bean-surf:#152b2f;--bean-line:#234043; --bean-text:#e9f4f3;--bean-muted:#7e9b9a; --bean-accent:#2fd4c4;--bean-accent2:#3aa0e0;--bean-onaccent:#04201d; --bean-head:rgba(7,20,23,.72); } /* ---- Ember — 다크 · 차콜 + 코랄 ---- */ .bean_theme-ember{ --bean-bg:#161113;--bean-card:#20181a;--bean-surf:#2b2125;--bean-line:#3c2e33; --bean-text:#f5edef;--bean-muted:#a08e93; --bean-accent:#ff5d5d;--bean-accent2:#ff9248;--bean-onaccent:#ffffff; --bean-head:rgba(22,17,19,.72); } /* ---- Mono — 다크 · 모노크롬 ---- */ .bean_theme-mono{ --bean-bg:#0e0e0e;--bean-card:#181818;--bean-surf:#222222;--bean-line:#333333; --bean-text:#f4f4f4;--bean-muted:#8c8c8c; --bean-accent:#e6e6e6;--bean-accent2:#9a9a9a;--bean-onaccent:#0e0e0e; --bean-head:rgba(14,14,14,.72); } /* ---- Forest — 다크 · 딥그린 + 라임 ---- */ .bean_theme-forest{ --bean-bg:#0c130c;--bean-card:#141d13;--bean-surf:#1d281b;--bean-line:#2c3a29; --bean-text:#eef4ea;--bean-muted:#8a9885; --bean-accent:#8fd14f;--bean-accent2:#4fb37a;--bean-onaccent:#0c1606; --bean-head:rgba(12,19,12,.72); } /* ===== 추가 라이트 5종 ===== */ /* ---- Linen — 라이트 · 웜그레이 + 잉크 ---- */ .bean_theme-linen{ --bean-bg:#f4f2ee;--bean-card:#ffffff;--bean-surf:#ece9e3;--bean-line:#e0dcd3; --bean-text:#1c1b18;--bean-muted:#7c7972; --bean-accent:#2b2a26;--bean-accent2:#5c5a52;--bean-onaccent:#ffffff; --bean-head:rgba(244,242,238,.78); } /* ---- Sky — 라이트 · 스카이블루 ---- */ .bean_theme-sky{ --bean-bg:#eef4fb;--bean-card:#ffffff;--bean-surf:#e2ecf7;--bean-line:#d6e2f0; --bean-text:#142634;--bean-muted:#647689; --bean-accent:#0ea5e9;--bean-accent2:#2563eb;--bean-onaccent:#ffffff; --bean-head:rgba(238,244,251,.78); } /* ---- Marigold — 라이트 · 크림 + 골든앰버 ---- */ .bean_theme-marigold{ --bean-bg:#faf6ec;--bean-card:#ffffff;--bean-surf:#f3ecd9;--bean-line:#ebe3cc; --bean-text:#2c2410;--bean-muted:#8a7f5f; --bean-accent:#d99405;--bean-accent2:#b5651d;--bean-onaccent:#ffffff; --bean-head:rgba(250,246,236,.78); } /* ---- Mint — 라이트 · 민트 + 틸 ---- */ .bean_theme-mint{ --bean-bg:#eef7f4;--bean-card:#ffffff;--bean-surf:#e2f1ec;--bean-line:#d4e7e0; --bean-text:#15231e;--bean-muted:#5f7d74; --bean-accent:#0d9488;--bean-accent2:#0f766e;--bean-onaccent:#ffffff; --bean-head:rgba(238,247,244,.78); } /* ---- Slate — 라이트 · 쿨그레이 + 인디고 ---- */ .bean_theme-slate{ --bean-bg:#f2f3f6;--bean-card:#ffffff;--bean-surf:#e7e9ef;--bean-line:#dcdee6; --bean-text:#1c1f2b;--bean-muted:#6b7080; --bean-accent:#4f46e5;--bean-accent2:#7c3aed;--bean-onaccent:#ffffff; --bean-head:rgba(242,243,246,.78); } /* ===== 추가 다크 6종 (다크 15종 완성) ===== */ /* ---- Obsidian — 다크 · 잉크블랙 + 일렉트릭블루 ---- */ .bean_theme-obsidian{ --bean-bg:#08090b;--bean-card:#121317;--bean-surf:#1b1d23;--bean-line:#2a2d36; --bean-text:#eef0f4;--bean-muted:#868b98; --bean-accent:#3b82f6;--bean-accent2:#2dd4bf;--bean-onaccent:#ffffff; --bean-head:rgba(8,9,11,.72); } /* ---- Espresso — 다크 · 다크브라운 + 카라멜 ---- */ .bean_theme-espresso{ --bean-bg:#18120d;--bean-card:#221a13;--bean-surf:#2d231a;--bean-line:#3d3026; --bean-text:#f3ece4;--bean-muted:#a3927f; --bean-accent:#d99c5b;--bean-accent2:#b5764a;--bean-onaccent:#25190c; --bean-head:rgba(24,18,13,.72); } /* ---- Steel — 다크 · 블루그레이 + 스틸블루 ---- */ .bean_theme-steel{ --bean-bg:#0f1318;--bean-card:#181d24;--bean-surf:#222932;--bean-line:#323a45; --bean-text:#e9edf2;--bean-muted:#8995a3; --bean-accent:#6aa8d8;--bean-accent2:#8d9bb0;--bean-onaccent:#0c1116; --bean-head:rgba(15,19,24,.72); } /* ---- Magma — 다크 · 블랙 + 오렌지레드 ---- */ .bean_theme-magma{ --bean-bg:#0f0c0a;--bean-card:#18130f;--bean-surf:#221a14;--bean-line:#342820; --bean-text:#f4ece6;--bean-muted:#9a8c80; --bean-accent:#ff5a1f;--bean-accent2:#ffae42;--bean-onaccent:#ffffff; --bean-head:rgba(15,12,10,.72); } /* ---- Verdant — 다크 · 카키그린 + 올리브골드 ---- */ .bean_theme-verdant{ --bean-bg:#0f120a;--bean-card:#181c10;--bean-surf:#222719;--bean-line:#333a24; --bean-text:#eef2e4;--bean-muted:#909a7d; --bean-accent:#b7c24a;--bean-accent2:#7fae4c;--bean-onaccent:#14160a; --bean-head:rgba(15,18,10,.72); } /* ---- Royal — 다크 · 딥퍼플 + 골드 ---- */ .bean_theme-royal{ --bean-bg:#100a1a;--bean-card:#191124;--bean-surf:#241a32;--bean-line:#352846; --bean-text:#f0ecf6;--bean-muted:#948aa8; --bean-accent:#e8c45a;--bean-accent2:#b07bff;--bean-onaccent:#1c1206; --bean-head:rgba(16,10,26,.72); } /* ===== 추가 라이트 5종 (라이트 15종 완성) ===== */ /* ---- Coral — 라이트 · 피치 + 코랄 ---- */ .bean_theme-coral{ --bean-bg:#fdf3ef;--bean-card:#ffffff;--bean-surf:#fbe7df;--bean-line:#f3d8cd; --bean-text:#2e1d16;--bean-muted:#97796d; --bean-accent:#f4663c;--bean-accent2:#e0432f;--bean-onaccent:#ffffff; --bean-head:rgba(253,243,239,.78); } /* ---- Sand — 라이트 · 샌드베이지 + 브론즈 ---- */ .bean_theme-sand{ --bean-bg:#f5f1e7;--bean-card:#ffffff;--bean-surf:#ede6d4;--bean-line:#e4dcc4; --bean-text:#2b2519;--bean-muted:#8c8068; --bean-accent:#9a7b3e;--bean-accent2:#6f5e35;--bean-onaccent:#ffffff; --bean-head:rgba(245,241,231,.78); } /* ---- Lavender — 라이트 · 라벤더 + 바이올렛 ---- */ .bean_theme-lavender{ --bean-bg:#f4f2fb;--bean-card:#ffffff;--bean-surf:#eae6f7;--bean-line:#e1dcf0; --bean-text:#211d33;--bean-muted:#756f92; --bean-accent:#7c5cdb;--bean-accent2:#5b3fb5;--bean-onaccent:#ffffff; --bean-head:rgba(244,242,251,.78); } /* ---- Lagoon — 라이트 · 아쿠아 + 시안 ---- */ .bean_theme-lagoon{ --bean-bg:#ecf6f7;--bean-card:#ffffff;--bean-surf:#ddeef0;--bean-line:#cfe4e7; --bean-text:#102528;--bean-muted:#5e7e82; --bean-accent:#06b6b4;--bean-accent2:#0e7c8c;--bean-onaccent:#ffffff; --bean-head:rgba(236,246,247,.78); } /* ---- Plum — 라이트 · 라이트플럼 + 마젠타 ---- */ .bean_theme-plum{ --bean-bg:#f9f2f7;--bean-card:#ffffff;--bean-surf:#f1e3ee;--bean-line:#e9d7e3; --bean-text:#2b1824;--bean-muted:#8a7383; --bean-accent:#b5179e;--bean-accent2:#84118c;--bean-onaccent:#ffffff; --bean-head:rgba(249,242,247,.78); } /* Original file: modules/editor/skins/froalaeditor/css/style.css */ /*! * Froala WYSIWYG Editor Default style v1.4.9 (https://romanesque.io) * Author largeden (largeden@romanesque.co) * Copyright Romanesque.io (https://romanesque.io) */ /* // default // // ================================================================================= // */ body { -webkit-text-size-adjust: 100%; } .fr-view > *, .fr-view > *::before, .fr-view > *::after, .fr-toolbar *, .fr-placeholder, .fr-layout, .fr-layout-col-sm, .fr-layout-col-md, .fr-layout-col-xs, .fr-layout-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .xe_content::before, .xe_content::after { content: " "; display: table; } .xe_content::after { clear: both; } .fr-placeholder::-webkit-input-placeholder, .fr-placeholder:-ms-input-placeholder, .fr-placeholder::-moz-placeholder { color: rgba(150, 150, 150, 0.1); } .fr-placeholder { position: static; width: 100%; margin-top: 0px; border: 0; } .fr-box.fr-basic.fr-top.fr-hide-toolbar .fr-wrapper { box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .06); border: 1px solid rgba(222, 222, 222, 1); } .fr-wrapper, .fr-placeholder { overflow: hidden; } /* // default end // // --------------------------------------------------------------------------------- // */ /* // paragraph // // ================================================================================= // */ /* Basic */ .fr-view, .fr-view label, .fr-view table th, .fr-view table td, .fr-view input, .fr-view button, .fr-view textarea, .fr-view select, .fr-placeholder { /* font-family: -apple-system, "Helvetica Neue", ".HiraKakuInterface-W2", "ヒラギノ角ゴシック W0", "ヒラギノ角ゴ ProN W3", "HiraKakuPro-W3", "Meiryo UI", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif !important; font-size: 17px !important; line-height: 1.6 !important; font-weight: 200 !important; letter-spacing: -0.3px !important; word-spacing: 0px !important; */ } .fr-view p, .fr-placeholder { margin-top: 0; margin-bottom: 0; line-height: 1.6; text-align: left; word-break: break-all; word-wrap: break-word; } /* Heading Format */ .fr-view h1, .fr-view h2, .fr-view h3, .fr-view h4, .fr-view h5, .fr-view h6 { margin-top: 0; margin-bottom: 0; padding: 0; font-weight: 400; } .fr-view h1, .fr-box h1 { font-size: 2.17em; } .fr-view h2, .fr-box h2 { font-size: 1.74em; } .fr-view h3, .fr-box h3 { font-size: 1.31em; } .fr-view h4, .fr-box h4 { font-size: 1em; } .fr-view h5, .fr-box h5 { font-size: 0.8em; } .fr-view h6, .fr-box h6 { font-size: 0.65em; } /* basic paragraph */ .fr-view h1 + p, .fr-view h1 + pre, .fr-view h1 + div, .fr-view h1 + h1, .fr-view h1 + h2, .fr-view h1 + h3, .fr-view h1 + h4, .fr-view h1 + h5, .fr-view h1 + h6, .fr-view h1 + table, .fr-view h1 + figure, .fr-view h1 + blockquote, .fr-view h2 + p, .fr-view h2 + pre, .fr-view h2 + div, .fr-view h2 + h1, .fr-view h2 + h2, .fr-view h2 + h3, .fr-view h2 + h4, .fr-view h2 + h5, .fr-view h2 + h6, .fr-view h2 + table, .fr-view h2 + figure, .fr-view h2 + blockquote, .fr-view h3 + p, .fr-view h3 + pre, .fr-view h3 + div, .fr-view h3 + h1, .fr-view h3 + h2, .fr-view h3 + h3, .fr-view h3 + h4, .fr-view h3 + h5, .fr-view h3 + h6, .fr-view h3 + table, .fr-view h3 + figure, .fr-view h3 + blockquote, .fr-view h4 + p, .fr-view h4 + pre, .fr-view h4 + div, .fr-view h4 + h1, .fr-view h4 + h2, .fr-view h4 + h3, .fr-view h4 + h4, .fr-view h4 + h5, .fr-view h4 + h6, .fr-view h4 + table, .fr-view h4 + figure, .fr-view h4 + blockquote, .fr-view h5 + p, .fr-view h5 + pre, .fr-view h5 + div, .fr-view h5 + h1, .fr-view h5 + h2, .fr-view h5 + h3, .fr-view h5 + h4, .fr-view h5 + table, .fr-view h5 + figure, .fr-view h5 + blockquote, .fr-view h6 + p, .fr-view h6 + pre, .fr-view h6 + div, .fr-view h6 + h1, .fr-view h6 + h2, .fr-view h6 + h3, .fr-view h6 + h4, .fr-view h6 + table, .fr-view h6 + figure, .fr-view h6 + blockquote, .fr-view div + p, .fr-view div + pre, .fr-view div + table, .fr-view div + figure, .fr-view div + h1, .fr-view div + h2, .fr-view div + h3, .fr-view div + h4, .fr-view div + blockquote, .fr-view table + p, .fr-view table + pre, .fr-view table + table, .fr-view table + figure, .fr-view table + div, .fr-view table + h1, .fr-view table + h2, .fr-view table + h3, .fr-view table + h4, .fr-view table + blockquote, .fr-view figure + p, .fr-view figure + pre, .fr-view figure + table, .fr-view figure + figure, .fr-view figure + div, .fr-view figure + h1, .fr-view figure + h2, .fr-view figure + h3, .fr-view figure + h4, .fr-view figure + blockquote, .fr-view blockquote + p, .fr-view blockquote + pre, .fr-view blockquote + table, .fr-view blockquote + figure, .fr-view blockquote + blockquote, .fr-view blockquote + div, .fr-view blockquote + h1, .fr-view blockquote + h2, .fr-view blockquote + h3, .fr-view blockquote + h4, .fr-view pre + p, .fr-view pre + pre, .fr-view pre + table, .fr-view pre + figure, .fr-view pre + blockquote, .fr-view pre + div, .fr-view pre + h1, .fr-view pre + h2, .fr-view pre + h3, .fr-view pre + h4, .fr-view p + p, .fr-view p + pre, .fr-view p + div, .fr-view p + table, .fr-view p + figure, .fr-view p + blockquote { margin-top: 0.6em; } /* end of paragraph */ .fr-view pre + h1, .fr-view pre + h2, .fr-view pre + h3, .fr-view pre + h4, .fr-view table + h1, .fr-view table + h2, .fr-view table + h3, .fr-view table + h4, .fr-view figure + h1, .fr-view figure + h2, .fr-view figure + h3, .fr-view figure + h4, .fr-view blockquote + h1, .fr-view blockquote + h2, .fr-view blockquote + h3, .fr-view blockquote + h4, .fr-view p + h1, .fr-view p + h2, .fr-view p + h3, .fr-view p + h4 { margin-top: 1em; } /* Heading 5, 6 of paragraph */ .fr-view p + h5, .fr-view p + h6, .fr-view h5 + h5, .fr-view h5 + h6, .fr-view h6 + h5, .fr-view h6 + h6 { margin-top: 0em; } /* Default paragraph */ .fr-view p + p { /* margin-top: 0em; */ } /* // paragraph end // // --------------------------------------------------------------------------------- // */ /* // table // // ================================================================================= // */ .fr-view table { border: none; border-collapse: collapse; empty-cells: show; max-width: 100%; width: 100%; } .fr-view table.fr-dashed-borders td, .fr-view table.fr-dashed-borders th { border-style: dashed; } .fr-view table.fr-alternate-rows tbody tr:nth-child(2n) { background: rgba(245, 245, 245, 1); } .fr-view table td, .fr-view table th { border: 1px solid rgba(222, 222, 222, 1); } .fr-view table td:empty, .fr-view table th:empty { height: 20px; } .fr-view table td.fr-highlighted, .fr-view table th.fr-highlighted { border: 1px double red; } .fr-view table td.fr-thick, .fr-view table th.fr-thick { border-width: 2px; } .fr-view table th { background: rgba(230, 230, 230, 1); } .fr-view table th.fr-selected-cell { border: 1px double rgba(30, 137, 230, 1); } .fr-insert-helper::before { position: absolute; z-index: -1; top: -10px; left: -10px; width: calc(32px + 20px); height: calc(32px + 20px); background-color: rgba(255, 255, 255, .001); content: ""; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .fr-table-dtb { margin-left: auto !important; margin-right: auto !important; } /* // table end // // --------------------------------------------------------------------------------- // */ /* // link // // ================================================================================= // */ .fr-view a { position: relative; line-height: 1; text-decoration: none; color: rgba(30, 137, 230, 1); -webkit-transition: color 0.2s ease 0s, text-decoration 0.2s ease 0s; -moz-transition: color 0.2s ease 0s, text-decoration 0.2s ease 0s; -o-transition: color 0.2s ease 0s, text-decoration 0.2s ease 0s; transition: color 0.2s ease 0s, text-decoration 0.2s ease 0s; } .fr-view a:not(.fr-file):active, .fr-view a:not(.fr-file):hover, .fr-view a:not(.fr-file):focus { /* text-decoration: underline; */ border: 0px solid rgba(66, 162, 245, 1); border-bottom-width: 1px; outline: 0; color: rgba(66, 162, 245, 1); } .fr-view a[target=_blank]:not(.fr-file)::after { padding-left: 3px; font-family: FontAwesome; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; content: "\f08e"; font-size: .8em; } .fr-view a.fr-file { position: relative; padding: 7px; margin: 2.5px; /* margin-right: 2.5px; */ display: inline-block; border-style: solid; border-color: rgba(30, 137, 230, 1); border-width: 2px; cursor: pointer; text-align: center; white-space: nowrap; text-decoration: none; color: rgba(30, 137, 230, 1); line-height: 1; -webkit-border-radius: 4px !important; -moz-border-radius: 4px !important; border-radius: 4px !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fr-view a.fr-file::before { padding-right: 5px; font-family: FontAwesome; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; content: "\f019"; } .fr-view a.fr-file::after { font-size: .8em; content: ""; } .fr-view a.fr-file:active, .fr-view a.fr-file:hover, .fr-view a.fr-file:focus { background: rgba(30, 137, 230, 1); text-decoration: none; color: rgba(255, 255, 255, 1); } .fr-view a.fr-file[target=_blank]::after { padding-left: 3px; font-family: FontAwesome; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; content: "\f08e"; } .fr-view a.fr-file[target=_blank]:active::after, .fr-view a.fr-file[target=_blank]:hover::after, .fr-view a.fr-file[target=_blank]:focus::after { color: rgba(0, 0, 0, 0.5); } /* color pack */ .fr-view a.fr-cinnabar:not(.fr-file) { color: rgba(227, 83, 66, 1); } .fr-view a.fr-cinnabar:not(.fr-file):active, .fr-view a.fr-cinnabar:not(.fr-file):hover, .fr-view a.fr-cinnabar:not(.fr-file):focus { border-color: rgba(235, 106, 87, 1); color: rgba(235, 106, 87, 1); } .fr-view a.fr-file.fr-cinnabar { border-color: rgba(227, 83, 66, 1); color: rgba(227, 83, 66, 1); } .fr-view a.fr-file.fr-cinnabar:active, .fr-view a.fr-file.fr-cinnabar:hover, .fr-view a.fr-file.fr-cinnabar:focus { background: rgba(227, 83, 66, 1); color: rgba(255, 255, 255, 1); } .fr-view a.fr-turbo:not(.fr-file) { color: rgba(250, 197, 28, 1); } .fr-view a.fr-turbo:not(.fr-file):active, .fr-view a.fr-turbo:not(.fr-file):hover, .fr-view a.fr-turbo:not(.fr-file):focus { border-color: rgba(247, 218, 100, 1); color: rgba(247, 218, 100, 1); } .fr-view a.fr-file.fr-turbo { border-color: rgba(250, 197, 28, 1); color: rgba(250, 197, 28, 1); } .fr-view a.fr-file.fr-turbo:active, .fr-view a.fr-file.fr-turbo:hover, .fr-view a.fr-file.fr-turbo:focus { background: rgba(250, 197, 28, 1); color: rgba(255, 255, 255, 1); } .fr-view a.fr-anchor { color: inherit; } .fr-view a.fr-anchor:active, .fr-view a.fr-anchor:hover, .fr-view a.fr-anchor:focus { border-color: transparent; border-bottom-width: 0; background: none; text-decoration: none; color: inherit; } .fr-view a.fr-anchor[target=_blank]::after { padding-left: auto; font-family: inherit; content: normal; } .fr-view a.fr-anchor[target=_blank]:active::after, .fr-view a.fr-anchor[target=_blank]:hover::after, .fr-view a.fr-anchor[target=_blank]:focus::after { color: inherit; } /* // link end // // --------------------------------------------------------------------------------- // */ /* // image // // ================================================================================= // */ .fr-view img { position: relative; max-width: calc(100%); } .fr-view img.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; } .fr-view img.fr-dib.fr-fil { margin-left: 0; } .fr-view img.fr-dib.fr-fir { margin-right: 0; } .fr-view img.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin: 1px; /* margin-left: 5px; */ /* margin-right: 5px; */ max-width: calc(100% - (2 * 5px)); } .fr-view img.fr-rounded { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; } .fr-view img.fr-bordered { border: solid 1px #EFEFEF; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .fr-view img.fr-shadow { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16); } .fr-view span.fr-img-caption { position: relative; max-width: 100%; } .fr-view span.fr-img-caption.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; } .fr-view span.fr-img-caption.fr-dib.fr-fil { margin-left: 0; text-align: left; } .fr-view span.fr-img-caption.fr-dib.fr-fir { margin-right: 0; text-align: right; } .fr-view span.fr-img-caption.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px; max-width: calc(100% - (2 * 5px)); } .fr-view span.fr-img-caption.fr-dii.fr-fil { float: left; margin: 5px 5px 5px 0; max-width: calc(100% - 5px); } .fr-view span.fr-img-caption.fr-dii.fr-fir { float: right; margin: 5px 0 5px 5px; max-width: calc(100% - 5px); } .fr-view span.fr-img-caption.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-view span.fr-img-caption.fr-bordered { border: solid 5px #CCC; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .fr-view span.fr-img-caption.fr-shadow { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16); } .fr-view .fr-img-caption { text-align: center; } .fr-view .fr-img-caption .fr-img-wrap { padding: 0px; display: inline-block; margin: auto; text-align: center; } .fr-view .fr-img-caption .fr-img-wrap img { display: block; margin: auto; } .fr-view .fr-img-caption .fr-img-wrap > span, .fr-view .fr-img-caption .fr-img-wrap::before { margin: auto; display: inline-block; padding: 5px 5px 10px; font-size: 16px; font-weight: initial; text-align: center; color: rgba(0, 0, 0, 0.5); width: 100%; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-opacity: 0.9; -moz-opacity: 0.9; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fr-view .fr-img-caption .fr-img-wrap[placeholder]::before { position: absolute; z-index: 0; bottom: 0; left: 50%; font-style: italic; color: rgba(0, 0, 0, 0.25); content: attr(placeholder); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } /* // image end // // --------------------------------------------------------------------------------- // */ /* // video // // ================================================================================= // */ .fr-view .fr-video { text-align: center; position: relative; } .fr-view .fr-video > * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; max-width: 100%; border: none; } .fr-view .fr-video.fr-dvb { display: block; clear: both; } .fr-view .fr-video.fr-dvb.fr-fvl { text-align: left; } .fr-view .fr-video.fr-dvb.fr-fvr { text-align: right; } .fr-view .fr-video.fr-dvi { display: inline-block; } @media (max-width: 640px) { .fr-view .fr-video.fr-dvi.fr-fvl { float: left; } .fr-view .fr-video.fr-dvi.fr-fvr { float: right; } .fr-view .fr-video:not(.fr-video-html5) { overflow: hidden; padding-top: 56.25%; width: 100%; height: auto; } .fr-view .fr-video:not(.fr-video-html5) > * { position: absolute; top: 0; left: 0; width:100%; height:100%; } } /* // video end // // --------------------------------------------------------------------------------- // */ /* // figure // // ================================================================================= // */ .fr-view figure { position: relative; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; } .fr-view figure::before { position: absolute; z-index: 0; bottom: -35px; content: attr(placeholder); } .fr-view figure.figcaption { margin-top: 0; margin-bottom: 0; } .fr-view figure.figcaption::before { content: ""; } .fr-view figure::before, .fr-view figcaption { margin-top: 0; margin-bottom: 0; width: 100%; text-align: center; font-style: italic; font-size: 14px; color: rgba(0, 0, 0, 0.5); } @media (min-width: 1024px) { .fr-view figure.fr-ffl { float: left; margin: 5px -15px 30px 0; width: 50%; -webkit-transform: translate(-50px, 20px); -ms-transform: translate(-50px, 20px); -o-transform: translate(-50px, 20px); transform: translate(-50px, 20px); } .fr-view figure.fr-ffr { float: right; margin: 5px 0 30px -15px; width: 50%; -webkit-transform: translate(50px, 20px); -ms-transform: translate(50px, 20px); -o-transform: translate(50px, 20px); transform: translate(50px, 20px); } } /* // figure end // // --------------------------------------------------------------------------------- // */ /* // layout // // ================================================================================= // */ .fr-view .fr-layout { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } .fr-view .fr-layout-box { padding: 10px; margin: 0; width: 100%; } .fr-view .fr-layout-col-sm, .fr-view .fr-layout-col-md, .fr-view .fr-layout-col-xs { padding: 10px; margin-bottom: 10px; width: 100%; } @media (min-width: 768px) { .fr-view .fr-layout-col-sm { width: 33.33333333%; } .fr-view .fr-layout-col-md { width: 50%; } .fr-view .fr-layout-col-xs { width: 100%; } .fr-view .fr-layout-col-wide { width: 66.66666667%; } } /* // layout end // // --------------------------------------------------------------------------------- // */ /* // blockquote // // ================================================================================= // */ .fr-view[dir="rtl"] blockquote { border-left: none; border-right: solid 2px rgba(94, 53, 176, 1); margin-right: 0; padding-right: 5px; padding-left: 0px; } .fr-view[dir="rtl"] blockquote blockquote { border-color: rgba(0, 187, 212, 1); } .fr-view[dir="rtl"] blockquote blockquote blockquote { border-color: rgba(68, 161, 72, 1); } .fr-view blockquote { border-left: solid 2px rgba(94, 53, 176, 1); margin-left: auto; margin-right: auto; margin-bottom: 0; padding-left: 5px; color: rgba(94, 53, 176, 1); line-height: 1.6; word-break: break-all; word-wrap: break-word; } .fr-view blockquote blockquote { border-color: rgba(0, 187, 212, 1); color: rgba(0, 187, 212, 1); } .fr-view blockquote blockquote blockquote { border-color: rgba(68, 161, 72, 1); color: rgba(68, 161, 72, 1); } .fr-view blockquote.fr-quote { position: relative; margin-top: 1.5em; margin-bottom: 1.5em; padding: 20px 60px 20px 60px; border-left: 0; background-color: transparent; color: inherit; font-size: 1.2em; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .fr-view blockquote.fr-quote::before { position: absolute; top: 5px; left: 15px; padding: 2px; font-family: FontAwesome; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; content: "\f10e"; width: 35px; height: calc(100% - 40px); color: inherit; font-size: 28px; text-align: left; } .fr-view blockquote.fr-info, .fr-view blockquote.fr-warning, .fr-view blockquote.fr-danger { position: relative; margin-bottom: 1.5em; padding: 20px 20px 20px 60px; border-left: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .fr-view blockquote.fr-info::before, .fr-view blockquote.fr-warning::before, .fr-view blockquote.fr-danger::before { position: absolute; padding: 2px; font-family: FontAwesome; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; height: calc(100% - 40px); text-align: left; } .fr-view blockquote.fr-quote, .fr-view blockquote.fr-info, .fr-view blockquote.fr-warning, .fr-view blockquote.fr-danger { margin-left: 3%; margin-right: 3%; width: auto; } .fr-view > blockquote.fr-quote, .fr-view > blockquote.fr-info, .fr-view > blockquote.fr-warning, .fr-view > blockquote.fr-danger { margin-left: auto; margin-right: auto; width: calc(100% - 6%); margin-left: 3%\0; margin-right: 3%\0; width: auto\0; } .fr-view blockquote.fr-info { background-color: rgba(84, 172, 209, .3); color: rgba(62, 143, 186, 1); } .fr-view blockquote.fr-info::before { left: 20px; border-right: solid 2px rgba(84, 172, 209, .3); content: "\f129"; width: 30px; color: rgba(84, 172, 209, .2); } .fr-view blockquote.fr-warning { background-color: rgba(248, 218, 100, .3); color: rgba(250, 158, 38, 1); } .fr-view blockquote.fr-warning::before { left: 14px; border-right: solid 2px rgba(250, 158, 38, .3); content: "\f071"; width: 36px; color: rgba(250, 158, 38, .2); } .fr-view blockquote.fr-danger { background-color: rgba(235, 106, 87, .3); color: rgba(209, 72, 65, 1); } .fr-view blockquote.fr-danger::before { left: 15px; border-right: solid 2px rgba(209, 72, 65, .3); content: "\f05a"; width: 35px; color: rgba(209, 72, 65, .2); } /* // blockquote end // // --------------------------------------------------------------------------------- // */ /* // embedly // // ================================================================================= // */ .fr-view a.embedly-card { visibility: hidden; opacity: 0; } .fr-view div.embedly-card { overflow: hidden; } /* // embedly end // // --------------------------------------------------------------------------------- // */ /* // Other Styles // // ================================================================================= // */ .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-view span[style~="color:"] a { color: inherit; } .fr-view strong { font-weight: 600 !important; } .fr-view hr { position: relative; width: 33.33333333% !important; border: 2px solid rgba(40, 50, 78, 0.1); margin: 2em auto !important; clear: both; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; page-break-after: always; } .fr-view pre, .fr-view pre > * { font-family: "Lucida Console", Monaco, monospace; unicode-bidi: embed; white-space: pre-wrap !important; word-wrap: break-word !important; } .fr-view pre { margin-bottom: 0; padding: 10px; font-size: 14px; line-height: 1.6; } .fr-view span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } .fr-view span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } .fr-view .fr-text-gray { color: rgba(171, 171, 171, 1) !important; } .fr-view .fr-text-bordered { border-top: solid 1px rgba(33, 33, 33, 1); border-bottom: solid 1px rgba(33, 33, 33, 1); padding: 10px 0; } .fr-view .fr-text-spaced { letter-spacing: 1px; } .fr-view .fr-text-uppercase { text-transform: uppercase; } .fr-view button.fr-rounded, .fr-view input.fr-rounded, .fr-view textarea.fr-rounded { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; } .fr-view button.fr-large, .fr-view input.fr-large, .fr-view textarea.fr-large { font-size: 24px; } .fr-view code { background: rgba(240, 240, 240, 1); padding: 2px 6px; font-family: "Lucida Console", Monaco, monospace; unicode-bidi: embed; white-space: nowrap; font-size: 0.85em; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .rotate90 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .rotate180 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .rotate270 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .rotate-90 { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } /* // Other Styles end // // --------------------------------------------------------------------------------- // */ /* // CSS library // // ================================================================================= // */ /* Una Kravets Online https://una.im/CSSgram/ */ .aden{position:relative;-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden:after,.aden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.aden img{width:100%;z-index:1}.aden:before{z-index:2}.aden:after{z-index:3}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.gingham::after,.perpetua::after,.reyes::after{mix-blend-mode:soft-light}.inkwell{position:relative;-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.inkwell:after,.inkwell:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.inkwell img{width:100%;z-index:1}.inkwell:before{z-index:2}.inkwell:after{z-index:3}.perpetua{position:relative}.perpetua:after,.perpetua:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua img{width:100%;z-index:1}.perpetua:before{z-index:2}.perpetua:after{z-index:3}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d);opacity:.5}.reyes{position:relative;-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes:after,.reyes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.reyes img{width:100%;z-index:1}.reyes:before{z-index:2}.reyes:after{z-index:3}.reyes::after{background:#efcdad;opacity:.5}.gingham{position:relative;-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham:after,.gingham:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.gingham img{width:100%;z-index:1}.gingham:before{z-index:2}.gingham:after{z-index:3}.gingham::after{background:#e6e6fa}.toaster{position:relative;-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster:after,.toaster:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.toaster img{width:100%;z-index:1}.toaster:before{z-index:2}.toaster:after{z-index:3}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{position:relative;-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden:after,.walden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.walden img{width:100%;z-index:1}.walden:before{z-index:2}.walden:after{z-index:3}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{position:relative;-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson:after,.hudson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.hudson img{width:100%;z-index:1}.hudson:before{z-index:2}.hudson:after{z-index:3}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{position:relative;-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird:after,.earlybird:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.earlybird img{width:100%;z-index:1}.earlybird:before{z-index:2}.earlybird:after{z-index:3}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{position:relative;-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair:after,.mayfair:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.mayfair img{width:100%;z-index:1}.mayfair:before{z-index:2}.mayfair:after{z-index:3}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{position:relative;-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi:after,.lofi:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lofi img{width:100%;z-index:1}.lofi:before{z-index:2}.lofi:after{z-index:3}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{position:relative;-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after,._1977:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977 img{width:100%;z-index:1}._1977:before{z-index:2}._1977:after{z-index:3;background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{position:relative;-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn:after,.brooklyn:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brooklyn img{width:100%;z-index:1}.brooklyn:before{z-index:2}.brooklyn:after{z-index:3}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{position:relative;-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.xpro2 img{width:100%;z-index:1}.xpro2:before{z-index:2}.xpro2:after{z-index:3}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{position:relative;-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville:after,.nashville:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.nashville img{width:100%;z-index:1}.nashville:before{z-index:2}.nashville:after{z-index:3}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{position:relative;-webkit-filter:contrast(.9);filter:contrast(.9)}.lark:after,.lark:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lark img{width:100%;z-index:1}.lark:before{z-index:2}.lark:after{z-index:3}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{position:relative;-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon:after,.moon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.moon img{width:100%;z-index:1}.moon:before{z-index:2}.moon:after{z-index:3}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{position:relative;-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:after,.clarendon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.clarendon img{width:100%;z-index:1}.clarendon:before{z-index:2;background:rgba(127,187,227,.2);mix-blend-mode:overlay}.clarendon:after{z-index:3}.willow{position:relative;-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow:after,.willow:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.willow img{width:100%;z-index:1}.willow:before{z-index:2}.willow:after{z-index:3}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{position:relative;-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise:after,.rise:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.rise img{width:100%;z-index:1}.rise:before{z-index:2}.rise:after{z-index:3}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{position:relative;-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber:after,.slumber:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.slumber img{width:100%;z-index:1}.slumber:before{z-index:2}.slumber:after{z-index:3}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{position:relative;-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan:after,.brannan:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brannan img{width:100%;z-index:1}.brannan:before{z-index:2}.brannan:after{z-index:3}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}.valencia{position:relative;-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia:after,.valencia:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.valencia img{width:100%;z-index:1}.valencia:before{z-index:2}.valencia:after{z-index:3}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5}.kelvin{position:relative}.kelvin:after,.kelvin:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.kelvin img{width:100%;z-index:1}.kelvin:before{z-index:2}.kelvin:after{z-index:3}.kelvin::after{background:#b77d21;mix-blend-mode:overlay}.kelvin::before{background:#382c34;mix-blend-mode:color-dodge}.maven{position:relative;-webkit-filter:sepia(.25) brightness(.95) contrast(.95) saturate(1.5);filter:sepia(.25) brightness(.95) contrast(.95) saturate(1.5)}.maven:after,.maven:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.maven img{width:100%;z-index:1}.maven:before{z-index:2}.maven:after{z-index:3;background:rgba(3,230,26,.2);mix-blend-mode:hue}.stinson{position:relative;-webkit-filter:contrast(.75) saturate(.85) brightness(1.15);filter:contrast(.75) saturate(.85) brightness(1.15)}.stinson:after,.stinson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.stinson img{width:100%;z-index:1}.stinson:before{z-index:2}.stinson:after{z-index:3}.stinson::before{background:rgba(240,149,128,.2);mix-blend-mode:soft-light} /* // CSS library end // // --------------------------------------------------------------------------------- // */ /* // Google reCaptcha // // ================================================================================= // */ .grecaptcha-badge { /* display: none; */ } /* // Google reCaptcha end // // --------------------------------------------------------------------------------- // */ @media (max-width: 479px) { .fr-view div.fr-embedly + p { clear: both; } .fr-view div.fr-embedly div[class*=embd] { display: none; } } @media (min-width: 480px) {} @media (min-width: 768px) { .fr-view, .fr-view label, .fr-view table th, .fr-view table td, .fr-view input, .fr-view button, .fr-view textarea, .fr-view select, .fr-placeholder { /* font-size: 18px !important; letter-spacing: 0px !important; word-spacing: 2px !important; */ } } @media (min-width: 992px) { /* // width // // ============================================================================= // */ [class*="document_"].fr-view > *:not(.ro-blank), .fr-document .fr-view > *:not(.ro-blank), .fr-document .fr-placeholder { /* width: 816px; */ } .fr-document .fr-placeholder { /* padding-left: 0 !important; padding-right: 0 !important; */ } /* IE hack */ [class*="document_"].fr-view > *, .fr-document .fr-box, .fr-edit-document { /* width: 816px\0 !important; */ } [class*="document_"].fr-view > blockquote.fr-quote, .fr-view > blockquote.fr-quote, [class*="document_"].fr-view > blockquote.fr-info, .fr-view > blockquote.fr-info, [class*="document_"].fr-view > blockquote.fr-warning, .fr-view > blockquote.fr-warning, [class*="document_"].fr-view > blockquote.fr-danger, .fr-view > blockquote.fr-danger { /* width: calc(816px - 6%); */ } /* // width end // // ----------------------------------------------------------------------------- // */ /* // editor // // ============================================================================= // */ [class*="document_"].fr-view > *:not(.ro-blank), .fr-document .fr-view > *:not(.ro-blank), .fr-document .fr-placeholder { /* margin-left: auto !important; margin-right: auto !important; */ } /* IE hack */ [class*="document_"].fr-view > *:not(.ro-blank), .fr-document .fr-box, .fr-edit-document { /* margin-left: auto\0 !important; margin-right: auto\0 !important; */ } .fr-document .fr-placeholder { /* padding-left: 10px\0 !important; padding-right: 10px\0 !important; width: 100%\0 !important; */ } [class*="document_"].fr-view > *:not(.ro-blank), .fr-document .fr-view > *:not(.ro-blank) { /* width: auto\0; */ } [class*="document_"].fr-view > blockquote.fr-quote, .fr-view > blockquote.fr-quote, [class*="document_"].fr-view > blockquote.fr-info, .fr-view > blockquote.fr-info, [class*="document_"].fr-view > blockquote.fr-warning, .fr-view > blockquote.fr-warning, [class*="document_"].fr-view > blockquote.fr-danger, .fr-view > blockquote.fr-danger { /* margin-left: 3%\0 !important; margin-right: 3%\0 !important; width: auto\0 !important; */ } } @media (min-width: 1200px) {}