@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* 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_tailwind_layout/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: layouts/bean_tailwind_layout/css/bean.tailwind.css */

/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-red-950: oklch(25.8% 0.092 26.042);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-indigo-400: oklch(67.3% 0.182 276.935);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-violet-50: oklch(96.9% 0.016 293.756);
    --color-violet-400: oklch(70.2% 0.183 293.541);
    --color-violet-500: oklch(60.6% 0.25 292.717);
    --color-violet-600: oklch(54.1% 0.281 293.009);
    --color-violet-700: oklch(49.1% 0.27 292.581);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-zinc-900: oklch(21% 0.006 285.885);
    --color-zinc-950: oklch(14.1% 0.005 285.823);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --breakpoint-sm: 40rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-md: 12px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --radius-bean: 5px;
    --font-bean: "Pretendard Variable", Pretendard, -apple-system, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0;
  }
  .inset-y-0 {
    inset-block: 0;
  }
  .start-0 {
    inset-inline-start: calc(var(--spacing) * 0);
  }
  .end-0 {
    inset-inline-end: calc(var(--spacing) * 0);
  }
  .end-6 {
    inset-inline-end: calc(var(--spacing) * 6);
  }
  .-top-1 {
    top: calc(var(--spacing) * -1);
  }
  .-top-3 {
    top: calc(var(--spacing) * -3);
  }
  .-top-4 {
    top: calc(var(--spacing) * -4);
  }
  .top-0 {
    top: 0;
  }
  .top-1 {
    top: var(--spacing);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-full {
    top: 100%;
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .-right-2 {
    right: calc(var(--spacing) * -2);
  }
  .-right-4 {
    right: calc(var(--spacing) * -4);
  }
  .right-0 {
    right: 0;
  }
  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .bottom-0 {
    bottom: 0;
  }
  .bottom-1\.5 {
    bottom: calc(var(--spacing) * 1.5);
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .bottom-\[32px\] {
    bottom: 32px;
  }
  .bottom-\[90px\] {
    bottom: 90px;
  }
  .left-0 {
    left: 0;
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-2\.5 {
    left: calc(var(--spacing) * 2.5);
  }
  .isolate {
    isolation: isolate;
  }
  .z-9 {
    z-index: 9;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[60\] {
    z-index: 60;
  }
  .z-\[80\] {
    z-index: 80;
  }
  .col-1 {
    grid-column: 1;
  }
  .col-span-1 {
    grid-column: span 1 / span 1;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .row-1 {
    grid-row: 1;
  }
  .float-left {
    float: left;
  }
  .float-right {
    float: right;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-3 {
    margin: calc(var(--spacing) * 3);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-2\.5 {
    margin-block: calc(var(--spacing) * 2.5);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }
  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }
  .mt-0 {
    margin-top: 0;
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-auto {
    margin-top: auto;
  }
  .-mr-0\.5 {
    margin-right: calc(var(--spacing) * -0.5);
  }
  .mr-0\.5 {
    margin-right: calc(var(--spacing) * 0.5);
  }
  .mr-1 {
    margin-right: var(--spacing);
  }
  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-2\.5 {
    margin-right: calc(var(--spacing) * 2.5);
  }
  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .-mb-0\.5 {
    margin-bottom: calc(var(--spacing) * -0.5);
  }
  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .mb-auto {
    margin-bottom: auto;
  }
  .-ml-2\.5 {
    margin-left: calc(var(--spacing) * -2.5);
  }
  .ml-1 {
    margin-left: var(--spacing);
  }
  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-2\.5 {
    margin-left: calc(var(--spacing) * 2.5);
  }
  .ml-3\.5 {
    margin-left: calc(var(--spacing) * 3.5);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-7 {
    margin-left: calc(var(--spacing) * 7);
  }
  .ml-10 {
    margin-left: calc(var(--spacing) * 10);
  }
  .ml-12 {
    margin-left: calc(var(--spacing) * 12);
  }
  .ml-\[2px\] {
    margin-left: 2px;
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .\!hidden {
    display: none !important;
  }
  .\!inline {
    display: inline !important;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .flow-root {
    display: flow-root;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .inline-grid {
    display: inline-grid;
  }
  .inline-table {
    display: inline-table;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .table-caption {
    display: table-caption;
  }
  .table-cell {
    display: table-cell;
  }
  .table-column {
    display: table-column;
  }
  .table-column-group {
    display: table-column-group;
  }
  .table-footer-group {
    display: table-footer-group;
  }
  .table-header-group {
    display: table-header-group;
  }
  .table-row {
    display: table-row;
  }
  .table-row-group {
    display: table-row-group;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .size-1 {
    width: var(--spacing);
    height: var(--spacing);
  }
  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }
  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }
  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-44 {
    height: calc(var(--spacing) * 44);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-\[38px\] {
    height: 38px;
  }
  .h-\[100px\] {
    height: 100px;
  }
  .h-\[160px\] {
    height: 160px;
  }
  .h-auto {
    height: auto;
  }
  .h-fit {
    height: fit-content;
  }
  .h-full {
    height: 100%;
  }
  .h-lvh {
    height: 100lvh;
  }
  .max-h-\[80vh\] {
    max-height: 80vh;
  }
  .max-h-full {
    max-height: 100%;
  }
  .min-h-0 {
    min-height: 0;
  }
  .min-h-\[40px\] {
    min-height: 40px;
  }
  .w-1\/2 {
    width: calc(1 / 2 * 100%);
  }
  .w-1\/4 {
    width: calc(1 / 4 * 100%);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-\[70\%\] {
    width: 70%;
  }
  .w-\[90\%\] {
    width: 90%;
  }
  .w-\[92\%\] {
    width: 92%;
  }
  .w-\[95\%\] {
    width: 95%;
  }
  .w-\[120px\] {
    width: 120px;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-lvw {
    width: 100lvw;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-screen-lg {
    max-width: var(--breakpoint-lg);
  }
  .max-w-screen-md {
    max-width: var(--breakpoint-md);
  }
  .max-w-screen-sm {
    max-width: var(--breakpoint-sm);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .min-w-0 {
    min-width: 0;
  }
  .min-w-36 {
    min-width: calc(var(--spacing) * 36);
  }
  .min-w-\[100px\] {
    min-width: 100px;
  }
  .min-w-fit {
    min-width: fit-content;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-1 {
    --tw-scale-x: 1%;
    --tw-scale-y: 1%;
    --tw-scale-z: 1%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-2 {
    --tw-scale-x: 2%;
    --tw-scale-y: 2%;
    --tw-scale-z: 2%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-3 {
    --tw-scale-x: 3%;
    --tw-scale-y: 3%;
    --tw-scale-z: 3%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-text {
    cursor: text;
  }
  .\!resize {
    resize: both !important;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-normal {
    justify-content: normal;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-0\.5 {
    column-gap: calc(var(--spacing) * 0.5);
  }
  .gap-x-1 {
    column-gap: var(--spacing);
  }
  .gap-x-1\.5 {
    column-gap: calc(var(--spacing) * 1.5);
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-2\.5 {
    column-gap: calc(var(--spacing) * 2.5);
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .-space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-1 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(var(--spacing) * var(--tw-space-x-reverse));
      margin-inline-end: calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-2\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-3 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-6 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .self-end {
    align-self: flex-end;
  }
  .self-start {
    align-self: flex-start;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-x-scroll {
    overflow-x: scroll;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overflow-y-hidden {
    overflow-y: hidden;
  }
  .overflow-y-scroll {
    overflow-y: scroll;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-ss-xl {
    border-start-start-radius: var(--radius-xl);
  }
  .rounded-se-xl {
    border-start-end-radius: var(--radius-xl);
  }
  .rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }
  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
  .rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-4 {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .border-b-4 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 4px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-slate-100 {
    border-color: var(--color-slate-100);
  }
  .border-slate-100\/70 {
    border-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-100) 70%, transparent);
    }
  }
  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .border-slate-200\/50 {
    border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-200) 50%, transparent);
    }
  }
  .border-slate-200\/70 {
    border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-200) 70%, transparent);
    }
  }
  .border-transparent {
    border-color: transparent;
  }
  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-black\/50 {
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-orange-600 {
    background-color: var(--color-orange-600);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }
  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }
  .bg-slate-100\/50 {
    background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-100) 50%, transparent);
    }
  }
  .bg-slate-100\/70 {
    background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-100) 70%, transparent);
    }
  }
  .bg-slate-200 {
    background-color: var(--color-slate-200);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-violet-50 {
    background-color: var(--color-violet-50);
  }
  .bg-violet-600 {
    background-color: var(--color-violet-600);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-yellow-600 {
    background-color: var(--color-yellow-600);
  }
  .fill-current {
    fill: currentcolor;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-0 {
    padding-inline: 0;
  }
  .px-0\.5 {
    padding-inline: calc(var(--spacing) * 0.5);
  }
  .px-1 {
    padding-inline: var(--spacing);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: var(--spacing);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .ps-2 {
    padding-inline-start: calc(var(--spacing) * 2);
  }
  .pe-4 {
    padding-inline-end: calc(var(--spacing) * 4);
  }
  .pt-0 {
    padding-top: 0;
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-\[50\%\] {
    padding-top: 50%;
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pl-1 {
    padding-left: var(--spacing);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }
  .text-center {
    text-align: center;
  }
  .text-justify {
    text-align: justify;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-bottom {
    vertical-align: bottom;
  }
  .align-middle {
    vertical-align: middle;
  }
  .align-top {
    vertical-align: top;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .text-ellipsis {
    text-overflow: ellipsis;
  }
  .whitespace-normal {
    white-space: normal;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .tab-4 {
    tab-size: 4;
  }
  .text-amber-600 {
    color: var(--color-amber-600);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-emerald-500 {
    color: var(--color-emerald-500);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-purple-500 {
    color: var(--color-purple-500);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-slate-200 {
    color: var(--color-slate-200);
  }
  .text-slate-300 {
    color: var(--color-slate-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-400\/60 {
    color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-slate-400) 60%, transparent);
    }
  }
  .text-slate-400\/90 {
    color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-slate-400) 90%, transparent);
    }
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-slate-500\/80 {
    color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-slate-500) 80%, transparent);
    }
  }
  .text-slate-500\/90 {
    color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-slate-500) 90%, transparent);
    }
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-slate-700 {
    color: var(--color-slate-700);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }
  .text-violet-500 {
    color: var(--color-violet-500);
  }
  .text-white {
    color: var(--color-white);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .overline {
    text-decoration-line: overline;
  }
  .overline\! {
    text-decoration-line: overline !important;
  }
  .underline {
    text-decoration-line: underline;
  }
  .underline\! {
    text-decoration-line: underline !important;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .subpixel-antialiased {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow\! {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-white {
    --tw-ring-color: var(--color-white);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .\!filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[height\] {
    transition-property: height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[opacity\,margin\] {
    transition-property: opacity,margin;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .\[--adaptive\:none\] {
    --adaptive: none;
  }
  .\[--placement\:right\] {
    --placement: right;
  }
  .\[--strategy\:fixed\] {
    --strategy: fixed;
  }
  .\[--trigger\:click\] {
    --trigger: click;
  }
  .\[github-user\:password\] {
    github-user: password;
  }
  .group-hover\:scale-125 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 125%;
        --tw-scale-y: 125%;
        --tw-scale-z: 125%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:rotate-90 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        rotate: 90deg;
      }
    }
  }
  .group-hover\:text-black {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-black);
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .peer-checked\:bg-emerald-400 {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--color-emerald-400);
    }
  }
  .peer-checked\:text-emerald-500 {
    &:is(:where(.peer):checked ~ *) {
      color: var(--color-emerald-500);
    }
  }
  .peer-focus\:ring-blue-300 {
    &:is(:where(.peer):focus ~ *) {
      --tw-ring-color: var(--color-blue-300);
    }
  }
  .peer-focus\:outline-none {
    &:is(:where(.peer):focus ~ *) {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .file\:mr-4 {
    &::file-selector-button {
      margin-right: calc(var(--spacing) * 4);
    }
  }
  .file\:rounded-md {
    &::file-selector-button {
      border-radius: var(--radius-md);
    }
  }
  .file\:border-0 {
    &::file-selector-button {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .file\:bg-slate-50 {
    &::file-selector-button {
      background-color: var(--color-slate-50);
    }
  }
  .file\:px-4 {
    &::file-selector-button {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .file\:py-2 {
    &::file-selector-button {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .file\:text-sm {
    &::file-selector-button {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .file\:font-semibold {
    &::file-selector-button {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
  }
  .file\:text-slate-700 {
    &::file-selector-button {
      color: var(--color-slate-700);
    }
  }
  .before\:absolute {
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .before\:start-0 {
    &::before {
      content: var(--tw-content);
      inset-inline-start: calc(var(--spacing) * 0);
    }
  }
  .before\:-top-5 {
    &::before {
      content: var(--tw-content);
      top: calc(var(--spacing) * -5);
    }
  }
  .before\:me-6 {
    &::before {
      content: var(--tw-content);
      margin-inline-end: calc(var(--spacing) * 6);
    }
  }
  .before\:h-5 {
    &::before {
      content: var(--tw-content);
      height: calc(var(--spacing) * 5);
    }
  }
  .before\:w-full {
    &::before {
      content: var(--tw-content);
      width: 100%;
    }
  }
  .before\:flex-1 {
    &::before {
      content: var(--tw-content);
      flex: 1;
    }
  }
  .before\:transform {
    &::before {
      content: var(--tw-content);
      transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    }
  }
  .before\:border-t {
    &::before {
      content: var(--tw-content);
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
  }
  .before\:border-slate-100 {
    &::before {
      content: var(--tw-content);
      border-color: var(--color-slate-100);
    }
  }
  .after\:absolute {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .after\:start-\[2px\] {
    &::after {
      content: var(--tw-content);
      inset-inline-start: 2px;
    }
  }
  .after\:top-\[2px\] {
    &::after {
      content: var(--tw-content);
      top: 2px;
    }
  }
  .after\:ms-6 {
    &::after {
      content: var(--tw-content);
      margin-inline-start: calc(var(--spacing) * 6);
    }
  }
  .after\:h-3 {
    &::after {
      content: var(--tw-content);
      height: calc(var(--spacing) * 3);
    }
  }
  .after\:w-3 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 3);
    }
  }
  .after\:flex-1 {
    &::after {
      content: var(--tw-content);
      flex: 1;
    }
  }
  .after\:rounded-full {
    &::after {
      content: var(--tw-content);
      border-radius: calc(infinity * 1px);
    }
  }
  .after\:border {
    &::after {
      content: var(--tw-content);
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .after\:border-t {
    &::after {
      content: var(--tw-content);
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
  }
  .after\:border-gray-300 {
    &::after {
      content: var(--tw-content);
      border-color: var(--color-gray-300);
    }
  }
  .after\:border-slate-100 {
    &::after {
      content: var(--tw-content);
      border-color: var(--color-slate-100);
    }
  }
  .after\:bg-white {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-white);
    }
  }
  .after\:transition-all {
    &::after {
      content: var(--tw-content);
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .after\:content-\[\'\'\] {
    &::after {
      --tw-content: '';
      content: var(--tw-content);
    }
  }
  .peer-checked\:after\:translate-x-full {
    &:is(:where(.peer):checked ~ *) {
      &::after {
        content: var(--tw-content);
        --tw-translate-x: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .peer-checked\:after\:border-white {
    &:is(:where(.peer):checked ~ *) {
      &::after {
        content: var(--tw-content);
        border-color: var(--color-white);
      }
    }
  }
  .last\:mb-0 {
    &:last-child {
      margin-bottom: 0;
    }
  }
  .last\:border-b-0 {
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .last\:border-none {
    &:last-child {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .last\:pb-0 {
    &:last-child {
      padding-bottom: 0;
    }
  }
  .hover\:z-10 {
    &:hover {
      @media (hover: hover) {
        z-index: 10;
      }
    }
  }
  .hover\:rotate-90 {
    &:hover {
      @media (hover: hover) {
        rotate: 90deg;
      }
    }
  }
  .hover\:border-indigo-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-indigo-500);
      }
    }
  }
  .hover\:bg-red-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-100);
      }
    }
  }
  .hover\:bg-red-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-200);
      }
    }
  }
  .hover\:bg-slate-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
  }
  .hover\:bg-violet-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-violet-700);
      }
    }
  }
  .hover\:text-black {
    &:hover {
      @media (hover: hover) {
        color: var(--color-black);
      }
    }
  }
  .hover\:text-emerald-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-emerald-400);
      }
    }
  }
  .hover\:text-red-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-400);
      }
    }
  }
  .hover\:text-rose-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-rose-500);
      }
    }
  }
  .hover\:text-slate-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-500);
      }
    }
  }
  .hover\:text-slate-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-600);
      }
    }
  }
  .hover\:text-slate-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-700);
      }
    }
  }
  .hover\:ring-2 {
    &:hover {
      @media (hover: hover) {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:ring-indigo-500 {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-indigo-500);
      }
    }
  }
  .hover\:file\:bg-slate-100 {
    &:hover {
      @media (hover: hover) {
        &::file-selector-button {
          background-color: var(--color-slate-100);
        }
      }
    }
  }
  .focus\:border-blue-500 {
    &:focus {
      border-color: var(--color-blue-500);
    }
  }
  .focus\:border-transparent {
    &:focus {
      border-color: transparent;
    }
  }
  .focus\:ring-0 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-blue-500 {
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .focus\:ring-gray-400 {
    &:focus {
      --tw-ring-color: var(--color-gray-400);
    }
  }
  .focus\:ring-indigo-500 {
    &:focus {
      --tw-ring-color: var(--color-indigo-500);
    }
  }
  .focus\:ring-transparent {
    &:focus {
      --tw-ring-color: transparent;
    }
  }
  .focus\:ring-offset-2 {
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .focus\:ring-offset-white {
    &:focus {
      --tw-ring-offset-color: var(--color-white);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .disabled\:pointer-events-none {
    &:disabled {
      pointer-events: none;
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .sm\:mx-auto {
    @media (width >= 40rem) {
      margin-inline: auto;
    }
  }
  .sm\:mt-0 {
    @media (width >= 40rem) {
      margin-top: 0;
    }
  }
  .sm\:h-auto {
    @media (width >= 40rem) {
      height: auto;
    }
  }
  .sm\:max-h-none {
    @media (width >= 40rem) {
      max-height: none;
    }
  }
  .sm\:w-full {
    @media (width >= 40rem) {
      width: 100%;
    }
  }
  .sm\:max-w-lg {
    @media (width >= 40rem) {
      max-width: var(--container-lg);
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:gap-x-4 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:rounded-xl {
    @media (width >= 40rem) {
      border-radius: var(--radius-xl);
    }
  }
  .sm\:border {
    @media (width >= 40rem) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .sm\:shadow-sm {
    @media (width >= 40rem) {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:top-2 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 2);
    }
  }
  .md\:-right-2 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * -2);
    }
  }
  .md\:mt-2 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 2);
    }
  }
  .md\:mr-2 {
    @media (width >= 48rem) {
      margin-right: calc(var(--spacing) * 2);
    }
  }
  .md\:mr-4 {
    @media (width >= 48rem) {
      margin-right: calc(var(--spacing) * 4);
    }
  }
  .md\:mb-0 {
    @media (width >= 48rem) {
      margin-bottom: 0;
    }
  }
  .md\:mb-6 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 6);
    }
  }
  .md\:-ml-0\.5 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * -0.5);
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:inline-flex {
    @media (width >= 48rem) {
      display: inline-flex;
    }
  }
  .md\:size-20 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 20);
      height: calc(var(--spacing) * 20);
    }
  }
  .md\:h-24 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 24);
    }
  }
  .md\:w-24 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 24);
    }
  }
  .md\:w-32 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 32);
    }
  }
  .md\:w-36 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 36);
    }
  }
  .md\:w-56 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 56);
    }
  }
  .md\:w-\[80\%\] {
    @media (width >= 48rem) {
      width: 80%;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-5 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-6 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .md\:gap-4 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-x-2 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 2);
    }
  }
  .md\:rounded-xl {
    @media (width >= 48rem) {
      border-radius: var(--radius-xl);
    }
  }
  .md\:border-4 {
    @media (width >= 48rem) {
      border-style: var(--tw-border-style);
      border-width: 4px;
    }
  }
  .md\:bg-transparent {
    @media (width >= 48rem) {
      background-color: transparent;
    }
  }
  .md\:bg-white {
    @media (width >= 48rem) {
      background-color: var(--color-white);
    }
  }
  .md\:p-4 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:px-0 {
    @media (width >= 48rem) {
      padding-inline: 0;
    }
  }
  .md\:px-2 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .md\:px-4 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .md\:px-5 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:px-16 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 16);
    }
  }
  .md\:pt-\[60\%\] {
    @media (width >= 48rem) {
      padding-top: 60%;
    }
  }
  .md\:pb-20 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 20);
    }
  }
  .md\:text-right {
    @media (width >= 48rem) {
      text-align: right;
    }
  }
  .md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:text-base {
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .md\:text-lg {
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .md\:text-sm {
    @media (width >= 48rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .md\:text-xl {
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .md\:hover\:bg-slate-50\/50 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);
          }
        }
      }
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-6 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .rtl\:peer-checked\:after\:-translate-x-full {
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      &:is(:where(.peer):checked ~ *) {
        &::after {
          content: var(--tw-content);
          --tw-translate-x: -100%;
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .dark\:border-black {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-black);
    }
  }
  .dark\:border-gray-600 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-gray-600);
    }
  }
  .dark\:border-slate-700 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-slate-700);
    }
  }
  .dark\:border-slate-800 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-slate-800);
    }
  }
  .dark\:border-slate-900 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-slate-900);
    }
  }
  .dark\:border-zinc-800 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-zinc-800);
    }
  }
  .dark\:bg-amber-900\/30 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-amber-900) 30%, transparent);
      }
    }
  }
  .dark\:bg-black {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-black);
    }
  }
  .dark\:bg-gray-700 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-gray-700);
    }
  }
  .dark\:bg-neutral-950 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-neutral-950);
    }
  }
  .dark\:bg-orange-500 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-orange-500);
    }
  }
  .dark\:bg-red-900\/30 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
      }
    }
  }
  .dark\:bg-red-950 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-red-950);
    }
  }
  .dark\:bg-red-950\/30 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-950) 30%, transparent);
      }
    }
  }
  .dark\:bg-slate-700 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-slate-700);
    }
  }
  .dark\:bg-slate-800 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-slate-800);
    }
  }
  .dark\:bg-slate-800\/50 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
      }
    }
  }
  .dark\:bg-transparent {
    @media (prefers-color-scheme: dark) {
      background-color: transparent;
    }
  }
  .dark\:bg-violet-500\/10 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
      }
    }
  }
  .dark\:bg-white {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-white);
    }
  }
  .dark\:bg-yellow-500 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-yellow-500);
    }
  }
  .dark\:bg-zinc-800 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-zinc-800);
    }
  }
  .dark\:bg-zinc-900 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-zinc-900);
    }
  }
  .dark\:bg-zinc-900\/90 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 90%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-zinc-900) 90%, transparent);
      }
    }
  }
  .dark\:bg-zinc-950 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-zinc-950);
    }
  }
  .dark\:text-amber-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-amber-400);
    }
  }
  .dark\:text-black {
    @media (prefers-color-scheme: dark) {
      color: var(--color-black);
    }
  }
  .dark\:text-gray-200 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-gray-200);
    }
  }
  .dark\:text-red-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-red-400);
    }
  }
  .dark\:text-slate-100 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-slate-100);
    }
  }
  .dark\:text-slate-200 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-slate-200);
    }
  }
  .dark\:text-slate-300 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-slate-300);
    }
  }
  .dark\:text-slate-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-slate-400);
    }
  }
  .dark\:text-slate-500 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-slate-500);
    }
  }
  .dark\:text-slate-500\/90 {
    @media (prefers-color-scheme: dark) {
      color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 90%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-slate-500) 90%, transparent);
      }
    }
  }
  .dark\:text-slate-600 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-slate-600);
    }
  }
  .dark\:text-slate-700 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-slate-700);
    }
  }
  .dark\:text-violet-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-violet-400);
    }
  }
  .dark\:text-white {
    @media (prefers-color-scheme: dark) {
      color: var(--color-white);
    }
  }
  .dark\:ring-neutral-900 {
    @media (prefers-color-scheme: dark) {
      --tw-ring-color: var(--color-neutral-900);
    }
  }
  .dark\:backdrop-blur-md {
    @media (prefers-color-scheme: dark) {
      --tw-backdrop-blur: blur(var(--blur-md));
      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    }
  }
  .dark\:group-hover\:text-white {
    @media (prefers-color-scheme: dark) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .dark\:peer-focus\:ring-blue-800 {
    @media (prefers-color-scheme: dark) {
      &:is(:where(.peer):focus ~ *) {
        --tw-ring-color: var(--color-blue-800);
      }
    }
  }
  .dark\:file\:bg-slate-700 {
    @media (prefers-color-scheme: dark) {
      &::file-selector-button {
        background-color: var(--color-slate-700);
      }
    }
  }
  .dark\:file\:text-slate-300 {
    @media (prefers-color-scheme: dark) {
      &::file-selector-button {
        color: var(--color-slate-300);
      }
    }
  }
  .dark\:before\:border-slate-800 {
    @media (prefers-color-scheme: dark) {
      &::before {
        content: var(--tw-content);
        border-color: var(--color-slate-800);
      }
    }
  }
  .dark\:after\:border-slate-800 {
    @media (prefers-color-scheme: dark) {
      &::after {
        content: var(--tw-content);
        border-color: var(--color-slate-800);
      }
    }
  }
  .dark\:hover\:border-indigo-500 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-indigo-500);
        }
      }
    }
  }
  .dark\:hover\:bg-black {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .dark\:hover\:bg-red-900\/50 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:bg-zinc-950 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-zinc-950);
        }
      }
    }
  }
  .dark\:hover\:text-slate-100 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-slate-100);
        }
      }
    }
  }
  .dark\:hover\:text-slate-200 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-slate-200);
        }
      }
    }
  }
  .dark\:hover\:text-slate-300 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-slate-300);
        }
      }
    }
  }
  .dark\:hover\:text-slate-400 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-slate-400);
        }
      }
    }
  }
  .dark\:hover\:text-white {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .dark\:hover\:ring-indigo-400 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          --tw-ring-color: var(--color-indigo-400);
        }
      }
    }
  }
  .dark\:focus\:ring-1 {
    @media (prefers-color-scheme: dark) {
      &:focus {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .dark\:focus\:ring-gray-700 {
    @media (prefers-color-scheme: dark) {
      &:focus {
        --tw-ring-color: var(--color-gray-700);
      }
    }
  }
  .dark\:focus\:ring-indigo-400 {
    @media (prefers-color-scheme: dark) {
      &:focus {
        --tw-ring-color: var(--color-indigo-400);
      }
    }
  }
  .dark\:focus\:ring-slate-600 {
    @media (prefers-color-scheme: dark) {
      &:focus {
        --tw-ring-color: var(--color-slate-600);
      }
    }
  }
  .dark\:focus\:ring-offset-gray-800 {
    @media (prefers-color-scheme: dark) {
      &:focus {
        --tw-ring-offset-color: var(--color-gray-800);
      }
    }
  }
  .dark\:focus\:outline-none {
    @media (prefers-color-scheme: dark) {
      &:focus {
        --tw-outline-style: none;
        outline-style: none;
      }
    }
  }
  .sm\:dark\:border-black {
    @media (width >= 40rem) {
      @media (prefers-color-scheme: dark) {
        border-color: var(--color-black);
      }
    }
  }
  .dark\:md\:bg-transparent {
    @media (prefers-color-scheme: dark) {
      @media (width >= 48rem) {
        background-color: transparent;
      }
    }
  }
  .dark\:md\:hover\:bg-zinc-950\/60 {
    @media (prefers-color-scheme: dark) {
      @media (width >= 48rem) {
        &:hover {
          @media (hover: hover) {
            background-color: color-mix(in srgb, oklch(14.1% 0.005 285.823) 60%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--color-zinc-950) 60%, transparent);
            }
          }
        }
      }
    }
  }
}
@layer base {
  :root {
    --font-bean: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --radius-bean: 5px;
  }
  *, *::before, *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
  }
  body {
    margin: 0;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, optgroup, select, textarea {
    font: inherit;
    color: inherit;
  }
  button, [role="button"] {
    cursor: pointer;
  }
  a {
    color: inherit;
  }
  .bean_layout {
    color: var(--bean-text);
    font-family: var(--font-bean);
    font-size: 15px;
    line-height: 1.6;
  }
  .bean_layout h1, .bean_layout h2, .bean_layout h3, .bean_layout h4, .bean_layout h5, .bean_layout h6 {
    color: var(--bean-text);
    font-weight: 700;
    line-height: 1.3;
  }
  .bean_layout strong, .bean_layout b {
    font-weight: 700;
  }
  .bean_layout small {
    font-size: 0.85em;
  }
  .bean_layout code, .bean_layout pre, .bean_layout kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .bean_layout hr {
    border: 0;
    border-top: 1px solid var(--bean-line);
    margin: 1em 0;
  }
  .bean_layout input:where([type="text"],[type="email"],[type="password"],[type="number"],[type="search"],[type="tel"],[type="url"],[type="date"],[type="time"],[type="datetime-local"],[type="month"],[type="week"]),	.bean_layout textarea,	.bean_layout select {
    font-family: var(--font-bean);
    font-size: 14px;
    line-height: 1.5;
    color: var(--bean-text);
    background-color: var(--bean-card);
    border: 1px solid var(--bean-line);
    border-radius: var(--radius-bean);
    padding: 9px 12px;
    outline: none;
    max-width: 100%;
    transition: border-color .15s ease;
  }
  .bean_layout textarea {
    display: block;
    min-height: 96px;
    resize: vertical;
  }
  .bean_layout select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8f99' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
  }
  .bean_layout select::-ms-expand {
    display: none;
  }
  .bean_layout input:where([type="text"],[type="email"],[type="password"],[type="number"],[type="search"],[type="tel"],[type="url"],[type="date"],[type="time"],[type="datetime-local"],[type="month"],[type="week"]):focus,	.bean_layout textarea:focus,	.bean_layout select:focus {
    border-color: var(--bean-accent);
  }
  .bean_layout input::placeholder, .bean_layout textarea::placeholder {
    color: var(--bean-muted);
    opacity: 1;
  }
  .bean_layout input:disabled, .bean_layout textarea:disabled, .bean_layout select:disabled {
    opacity: .6;
    cursor: not-allowed;
  }
  .bean_layout select {
    cursor: pointer;
  }
  .bean_layout input[type="checkbox"], .bean_layout input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    vertical-align: middle;
    background-color: var(--bean-card);
    border: 1px solid var(--bean-line);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
  }
  .bean_layout input[type="checkbox"] {
    border-radius: 4px;
  }
  .bean_layout input[type="radio"] {
    border-radius: 50%;
  }
  .bean_layout input[type="checkbox"]:checked, .bean_layout input[type="radio"]:checked {
    background-color: var(--bean-accent);
    border-color: var(--bean-accent);
  }
  .bean_layout input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 4px;
    height: 8px;
    border: solid var(--bean-onaccent);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .bean_layout input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--bean-onaccent);
    transform: translate(-50%, -50%);
  }
  .bean_layout input[type="checkbox"]:disabled, .bean_layout input[type="radio"]:disabled {
    opacity: .55;
    cursor: not-allowed;
  }
  .bean_layout button {
    font-family: var(--font-bean);
  }
}
@layer components {
  .bean_layout {
    background: var(--bean-bg);
    color: var(--bean-text);
    font-family: var(--font-bean);
    -webkit-font-smoothing: antialiased;
  }
  :where(.bean_layout a) {
    color: inherit;
    text-decoration: none;
  }
  .bean_root {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
  .bean_main {
    flex: 1;
  }
  .bean_wrap {
    margin-inline: auto;
    width: 100%;
    max-width: 1200px;
    padding-inline: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .bean_content-inner {
    padding-block: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .bean_btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    background-color: var(--bean-accent);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-onaccent);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-accent2);
      }
    }
  }
  .bean_btn-line {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--bean-accent);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_btn-sm {
    --bean-ctrl-h: 32px;
    --bean-ctrl-fs: 13px;
    padding-inline: calc(var(--spacing) * 3);
  }
  .bean_btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_text-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding: 0;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_header {
    top: 0;
    z-index: 50;
    width: 100%;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: transparent;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_page-main .bean_header {
    position: fixed;
    right: 0;
    left: 0;
  }
  .bean_page-sub .bean_header {
    position: sticky;
  }
  .bean_nav {
    display: flex;
    height: calc(var(--spacing) * 16);
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .bean_page-main .bean_header {
    background-color: transparent;
  }
  .bean_page-main .bean_header.bean_is-solid,	.bean_page-sub .bean_header {
    border-color: var(--bean-line);
    background: var(--bean-head);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
  }
  .bean_page-main .bean_header:not(.bean_is-solid) {
    background: rgba(0,0,0,.32);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .bean_burger {
    display: none;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding: 0;
  }
  .bean_burger-bar {
    display: block;
    height: calc(var(--spacing) * 0.5);
    width: calc(var(--spacing) * 6);
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-text);
  }
  .bean_page-main .bean_header:not(.bean_is-solid) .bean_burger-bar {
    background-color: var(--color-white);
  }
  .bean_logo {
    margin-right: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
  }
  .bean_logo-img {
    display: none;
    height: calc(var(--spacing) * 7);
    width: auto;
  }
  .bean_logo-img[src=""], .bean_logo-img:not([src]) {
    display: none !important;
  }
  .bean_logo-text {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--bean-text);
  }
  .bean_page-main .bean_header:not(.bean_is-solid) .bean_logo-text {
    color: var(--color-white);
  }
  .bean_logo .bean_logo-on {
    display: none;
  }
  .bean_logo .bean_logo-off {
    display: block;
  }
  .bean_page-main .bean_header:not(.bean_is-solid) .bean_logo .bean_logo-on {
    display: block;
  }
  .bean_page-main .bean_header:not(.bean_is-solid) .bean_logo .bean_logo-off {
    display: none;
  }
  .bean_gnb {
    display: none;
    @media (width >= 48rem) {
      display: block;
    }
    @media (width >= 48rem) {
      flex: 1;
    }
  }
  .bean_gnb-list {
    margin: 0;
    display: flex;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing);
    padding: 0;
  }
  .bean_gnb-item {
    position: relative;
  }
  .bean_gnb-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: 5px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--bean-text) 85%, transparent);
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_page-main .bean_header:not(.bean_is-solid) .bean_gnb-link {
    color: rgba(255,255,255,.85);
  }
  .bean_page-main .bean_header:not(.bean_is-solid) .bean_gnb-link:hover {
    color: #fff;
  }
  .bean_gnb-item.bean_is-on > .bean_gnb-link, .bean_gnb-item.bean_is-open > .bean_gnb-link {
    color: var(--bean-accent);
  }
  .bean_gnb-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--bean-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .18s ease;
  }
  .bean_gnb-link:hover::after,	.bean_gnb-item.bean_is-on > .bean_gnb-link::after,	.bean_gnb-item.bean_is-open > .bean_gnb-link::after {
    transform: scaleX(1);
  }
  .bean_page-main .bean_header:not(.bean_is-solid) .bean_gnb-link::after {
    background: #fff;
  }
  .bean_caret {
    cursor: pointer;
    padding-inline: var(--spacing);
    font-size: 9px;
    --tw-leading: 1;
    line-height: 1;
    color: inherit;
    -webkit-user-select: none;
    user-select: none;
  }
  .bean_gnb-item.bean_is-open > .bean_gnb-link .bean_caret {
    rotate: 180deg;
  }
  .bean_mega {
    visibility: hidden;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    display: grid;
    min-width: 240px;
    transform-origin: top;
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--spacing);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 3);
    opacity: 0%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_gnb-item.bean_is-open .bean_mega {
    visibility: visible;
    --tw-translate-y: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 100%;
  }
  .bean_mega-group {
    margin-top: calc(var(--spacing) * 1.5);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2.5);
  }
  .bean_mega-head {
    margin-bottom: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--bean-accent);
    text-transform: uppercase;
  }
  .bean_mega-leaf, .bean_mega-leaf3 {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    border-radius: 5px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-surf);
      }
    }
  }
  .bean_mega-leaf3 {
    padding-left: calc(var(--spacing) * 6);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .bean_mega-dot {
    margin-top: calc(var(--spacing) * 1.5);
    display: inline-block;
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-accent);
  }
  .bean_mega-leaf-body {
    display: flex;
    flex-direction: column;
  }
  .bean_mega-leaf-text, .bean_mega-leaf3-text {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .bean_mega-leaf-desc, .bean_mega-leaf3-desc {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--bean-muted);
  }
  .bean_nav-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
  }
  .bean_nav-cta {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-accent);
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-accent);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-accent);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--bean-onaccent);
      }
    }
  }
  .bean_page-main .bean_header:not(.bean_is-solid) .bean_nav-cta {
    border-color: rgba(255,255,255,.55);
    color: var(--color-white);
  }
  .bean_profile, .bean_login {
    position: relative;
  }
  .bean_profile-btn {
    display: inline-flex;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding: 0;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_profile.bean_is-open .bean_profile-btn {
    border-color: var(--bean-accent);
  }
  .bean_profile-ava {
    display: inline-flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .bean_profile-ava-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .bean_login-btn {
    display: inline-flex;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding: 0;
    color: var(--bean-text);
  }
  .bean_login-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .bean_profile-menu, .bean_login-menu {
    visibility: hidden;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 300px;
    max-width: 90vw;
    transform-origin: 100% 0;
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 3);
    opacity: 0%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_profile.bean_is-open .bean_profile-menu, .bean_login.bean_is-open .bean_login-menu {
    visibility: visible;
    --tw-translate-y: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 100%;
  }
  .bean_profile-head {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    padding-inline: var(--spacing);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .bean_profile-name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_profile-id {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_profile-noti {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    padding-block: calc(var(--spacing) * 2);
  }
  .bean_profile-noti-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--spacing);
    padding-bottom: var(--spacing);
  }
  .bean_profile-noti-title {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-muted);
  }
  .bean_profile-noti-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_profile-noti-mark, .bean_profile-noti-all {
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-accent);
  }
  .bean_profile-noti-list {
    display: flex;
    flex-direction: column;
  }
  .bean_profile-noti-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-radius: 5px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-surf);
      }
    }
  }
  .bean_profile-noti-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: var(--bean-text);
  }
  .bean_profile-noti-ago {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--bean-muted);
  }
  .bean_profile-noti-empty {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing);
    padding-block: calc(var(--spacing) * 2);
  }
  .bean_profile-item {
    border-radius: 5px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-surf);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_profile-sec {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
    padding-top: calc(var(--spacing) * 2);
  }
  .bean_profile-sec-title {
    padding-inline: var(--spacing);
    padding-bottom: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-muted);
  }
  .bean_profile-foot {
    margin-top: var(--spacing);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
    padding-top: calc(var(--spacing) * 2);
  }
  .bean_profile-admin, .bean_profile-logout {
    border-radius: 5px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-surf);
      }
    }
  }
  .bean_profile-logout {
    color: var(--bean-accent);
  }
  .bean_login-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .bean_login-input {
    width: 100%;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-outline-style: none;
    outline-style: none;
    &::placeholder {
      color: var(--bean-muted);
    }
    &:focus {
      border-color: var(--bean-accent);
    }
  }
  .bean_login-keep {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_login-submit {
    width: 100%;
  }
  .bean_login-sns {
    margin-top: calc(var(--spacing) * 3);
  }
  .bean_login-sns-divider {
    position: relative;
    margin-block: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_login-sns-divider::before {
    content: "";
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: 0;
    height: 1px;
    width: 100%;
    background-color: var(--bean-line);
  }
  .bean_login-sns-divider span {
    position: relative;
    background-color: var(--bean-card);
    padding-inline: calc(var(--spacing) * 2);
  }
  .bean_login-sns-btn {
    margin-top: var(--spacing);
    display: block;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--bean-accent);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_login-links {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
    padding-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_login-links a {
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_page-main .bean_hero {
    height: 100svh;
    min-height: 100svh;
  }
  .bean_hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-black);
    color: var(--color-white);
  }
  .bean_hero-slides {
    position: absolute;
    inset: 0;
  }
  .bean_hero-slide {
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .bean_hero-slide.bean_is-on {
    pointer-events: auto;
    opacity: 100%;
  }
  .bean_hero-slide-img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .bean_hero-media, .bean_hero-video {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .bean_hero-video iframe, #bean_ytplayer, #bean_ytplayer iframe {
    pointer-events: none;
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    border-style: var(--tw-border-style);
    border-width: 0px;
    transform: translate(-50%,-50%);
    width: 100vw;
    height: 56.25vw;
    min-height: 100svh;
    min-width: 177.78svh;
    max-width: none;
  }
  .bean_hero-veil {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.18) 75%, rgba(0,0,0,.12) 100%);
  }
  .bean_hero-inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .bean_hero-al-center .bean_hero-inner {
    align-items: center;
    text-align: center;
  }
  .bean_hero-al-right .bean_hero-inner {
    align-items: flex-end;
    text-align: right;
  }
  .bean_hero-tag {
    margin-bottom: calc(var(--spacing) * 4);
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    color: var(--color-white);
    text-transform: uppercase;
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .bean_hero-title {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-leading: 1.1;
    line-height: 1.1;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .bean_hero-desc {
    margin-top: calc(var(--spacing) * 5);
    max-width: var(--container-xl);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .bean_hero-btn {
    margin-top: calc(var(--spacing) * 7);
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    background-color: var(--bean-accent);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-onaccent);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-accent2);
      }
    }
  }
  .bean_hero-dots {
    position: absolute;
    bottom: calc(var(--spacing) * 7);
    left: calc(1 / 2 * 100%);
    z-index: 10;
    display: none;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_hero-dot {
    height: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 2.5);
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
    text-indent: -9999px;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_hero-dot.bean_is-on {
    background-color: var(--color-white);
  }
  .bean_hero-mute {
    position: absolute;
    right: calc(var(--spacing) * 6);
    bottom: calc(var(--spacing) * 7);
    z-index: 10;
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
    background-color: color-mix(in srgb, #000 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .bean_hero-scroll {
    position: absolute;
    bottom: calc(var(--spacing) * 6);
    left: calc(1 / 2 * 100%);
    z-index: 10;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    text-transform: uppercase;
  }
  .bean_pagehead {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bean-surf) 50%, transparent);
    }
  }
  .bean_pagehead .bean_wrap {
    padding-block: calc(var(--spacing) * 10);
  }
  .bean_crumb {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-muted);
  }
  .bean_crumb-link {
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_pagehead-title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--bean-text);
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .bean_pagehead-lead {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_footer {
    margin-top: calc(var(--spacing) * 16);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bean-surf) 40%, transparent);
    }
  }
  .bean_footer .bean_wrap {
    padding-block: calc(var(--spacing) * 12);
  }
  .bean_foot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      display: flex;
      flex-direction: row;
    }
  }
  .bean_foot-brand {
    grid-column: span 2 / span 2;
    @media (width >= 48rem) {
      flex: 0 0 40%;
      max-width: 40%;
    }
  }
  .bean_foot-logo {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--bean-text);
  }
  .bean_foot-biz {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--bean-muted);
  }
  .bean_foot-col {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      flex: 1 1 0%;
      min-width: 0;
    }
  }
  .bean_foot-h {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_foot-h-link {
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_foot-menu {
    margin: 0;
    display: flex;
    list-style-type: none;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    padding: 0;
  }
  .bean_foot-menu-link {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_foot-bot {
    margin-top: calc(var(--spacing) * 10);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
    padding-top: calc(var(--spacing) * 6);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_ovl {
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_ovl.bean_is-show {
    visibility: visible;
    opacity: 100%;
  }
  .bean_side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    height: 100%;
    width: 300px;
    max-width: 86vw;
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    overflow-y: auto;
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_side.bean_is-show {
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .bean_side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
  }
  .bean_side-close {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    color: var(--bean-muted);
  }
  .bean_side-nav {
    padding: calc(var(--spacing) * 2);
  }
  .bean_acc {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bean-line) 60%, transparent);
    }
  }
  .bean_acc-top {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
  }
  .bean_acc-direct {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
  }
  .bean_acc-label {
    display: flex;
    flex: 1;
    align-items: center;
    align-self: stretch;
    padding-inline: calc(var(--spacing) * 3);
    font-size: 15px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_acc-toggle {
    display: inline-flex;
    height: 52px;
    width: calc(var(--spacing) * 12);
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    color: inherit;
  }
  .bean_acc-ar {
    font-size: 10px;
    color: var(--bean-muted);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_acc.bean_is-open .bean_acc-ar {
    rotate: 180deg;
  }
  .bean_acc.bean_is-open > .bean_acc-top .bean_acc-label {
    color: var(--bean-accent);
  }
  .bean_acc-body {
    margin-bottom: calc(var(--spacing) * 2);
    margin-left: calc(var(--spacing) * 5);
    display: none;
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    border-color: var(--bean-line);
    padding-bottom: var(--spacing);
    padding-left: calc(var(--spacing) * 2);
  }
  .bean_acc.bean_is-open > .bean_acc-body {
    display: block;
  }
  .bean_acc-sub {
    margin-top: calc(var(--spacing) * 2);
    margin-left: var(--spacing);
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--bean-line);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bean-line) 60%, transparent);
    }
    padding-left: calc(var(--spacing) * 2);
  }
  .bean_acc-subhead {
    margin-bottom: calc(var(--spacing) * 0.5);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--bean-accent);
    text-transform: uppercase;
  }
  .bean_acc-leaf {
    display: block;
    border-radius: 5px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-surf);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_acc-sub .bean_acc-leaf {
    position: relative;
    padding-left: calc(var(--spacing) * 4);
    font-size: 13px;
  }
  .bean_acc-sub .bean_acc-leaf::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--bean-line);
  }
  .bean_is-loading {
    pointer-events: none;
    opacity: 60%;
  }
  .bean_panel {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 5);
  }
  .bean_alert {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
  }
  .bean_alert.bean_is-error {
    border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-400) 50%, transparent);
    }
    color: var(--color-red-500);
    background: color-mix(in srgb, #ef4444 8%, transparent);
  }
  .bean_req-mark, .bean_req {
    color: var(--color-red-500);
  }
  .bean_check, .bean_radio {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
  }
  .bean_captcha {
    margin-block: var(--spacing);
  }
  .bean_field {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .bean_field-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
  }
  .bean_field-help {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_field-radios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .bean_field input[type=text], .bean_field input[type=email], .bean_field input[type=password], .bean_field input[type=number], .bean_field input[type=tel], .bean_field select, .bean_field textarea,	.bean_form-input, .bean_form-select, .bean_form-textarea {
    width: 100%;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-outline-style: none;
    outline-style: none;
    &::placeholder {
      color: var(--bean-muted);
    }
    &:focus {
      border-color: var(--bean-accent);
    }
  }
  .bean_form-textarea {
    min-height: calc(var(--spacing) * 28);
    resize: vertical;
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .bean_form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .bean_form-row {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .bean_form-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
  }
  .bean_form-help {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_form-actions, .bean_form-foot {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_form-guest {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_keep {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_keep-warn {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-amber-500);
  }
  .bean_secret-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .bean_secret-row {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .bean_req-mark {
    margin-left: calc(var(--spacing) * 0.5);
  }
  .bean_dl {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--bean-line);
    }
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_dl-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    @media (width < 560px) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    @media (width < 560px) {
      gap: var(--spacing);
    }
  }
  .bean_dl-dt {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-muted);
  }
  .bean_dl-dd {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
  }
  .bean_agree {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_agree-title {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_agree-text {
    max-height: calc(var(--spacing) * 40);
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--bean-muted);
  }
  .bean_agree-confirm {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .bean_agree-req {
    color: var(--color-red-500);
  }
  .bean_extra {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .bean_extra-row {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .bean_extra-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
  }
  .bean_extra-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .bean_auth, .bean_authpage {
    margin-inline: auto;
    display: flex;
    width: 100%;
    max-width: 440px;
    flex-direction: column;
    padding-block: calc(var(--spacing) * 6);
  }
  .bean_auth-card {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 7);
  }
  .bean_auth-title {
    margin-bottom: var(--spacing);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--bean-text);
  }
  .bean_auth-sub {
    margin-bottom: calc(var(--spacing) * 5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_auth-body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .bean_auth-body input[type=text], .bean_auth-body input[type=email], .bean_auth-body input[type=password] {
    width: 100%;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-outline-style: none;
    outline-style: none;
    &::placeholder {
      color: var(--bean-muted);
    }
    &:focus {
      border-color: var(--bean-accent);
    }
  }
  .bean_auth-foot {
    margin-top: calc(var(--spacing) * 5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
    padding-top: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_auth-foot a {
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_auth-sep {
    color: var(--bean-line);
  }
  .bean_auth-help {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_auth-detail {
    margin-top: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
  }
  .bean_auth-logout {
    margin-top: calc(var(--spacing) * 4);
  }
  .bean_auth-httpcode {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--bean-accent);
  }
  .bean_auth-httpmsg {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--bean-muted);
  }
  .bean_auth-sns {
    margin-top: calc(var(--spacing) * 4);
  }
  .bean_auth-sns-divider {
    position: relative;
    margin-block: calc(var(--spacing) * 3);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_auth-sns-divider::before {
    content: "";
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: 0;
    height: 1px;
    width: 100%;
    background-color: var(--bean-line);
  }
  .bean_auth-sns-divider span {
    position: relative;
    background-color: var(--bean-card);
    padding-inline: calc(var(--spacing) * 2);
  }
  .bean_auth-sns-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2);
  }
  .bean_auth-sns-btn {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--bean-accent);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_sysmsg {
    margin-inline: auto;
    max-width: 520px;
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
  }
  .bean_sysmsg-code {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--bean-accent);
  }
  .bean_sysmsg-detail {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--bean-text);
  }
  .bean_sysmsg-help, .bean_sysmsg-loc {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_brd {
    color: var(--bean-text);
  }
  .bean_board {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .bean_board-head, .bean_board-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .bean_board-title {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .bean_board-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .bean_board-manage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .bean_board-foot {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .bean_board-msg {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .bean_cat {
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--bean-accent);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_cat.bean_is-on {
    border-color: var(--bean-accent);
    background-color: var(--bean-accent);
    color: var(--bean-onaccent);
  }
  .bean_cat-tag {
    margin-right: calc(var(--spacing) * 1.5);
    display: inline-flex;
    height: 18px;
    align-items: center;
    border-radius: 0.25rem;
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 1.5);
    vertical-align: middle;
    font-size: 11px;
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-muted);
  }
  .bean_cats-wrap {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .bean_cats-sub {
    gap: var(--spacing);
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    border-color: var(--bean-line);
    padding-left: calc(var(--spacing) * 3);
  }
  .bean_cat-sub {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: var(--spacing);
    font-size: 11px;
  }
  .bean_board-titleimg {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .bean_board-titleimg img {
    max-width: 100%;
  }
  .bean_board-htext {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
  }
  .bean_board-ftext {
    margin-top: calc(var(--spacing) * 4);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
  }
  .bean_board-search {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_board-search-select, .bean_board-search-input {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
    --tw-outline-style: none;
    outline-style: none;
    &:focus {
      border-color: var(--bean-accent);
    }
  }
  .bean_list-toolbar, .bean_list-tools, .bean_list-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_list-table {
    width: 100%;
    border-collapse: collapse;
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
    border-color: var(--bean-muted);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .bean_th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-muted);
  }
  .bean_tbody .bean_tr, .bean_tr {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_tr:hover {
    background-color: var(--bean-surf);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bean-surf) 60%, transparent);
    }
  }
  .bean_td {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    vertical-align: middle;
  }
  .bean_col-subject {
    text-align: left;
  }
  .bean_td-subject {
    text-align: left;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--bean-text);
  }
  .bean_subject-link, .bean_td-subject a {
    vertical-align: middle;
    color: var(--bean-text);
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_col-no, .bean_col-count, .bean_col-date, .bean_col-author, .bean_col-cat, .bean_col-check {
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    white-space: nowrap;
    color: var(--bean-muted);
  }
  .bean_tr-notice {
    background-color: var(--bean-surf);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bean-surf) 50%, transparent);
    }
  }
  .bean_tr-notice .bean_td {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .bean_tr-current .bean_td-subject {
    color: var(--bean-accent);
  }
  .bean_notice-flag {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-accent);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-onaccent);
  }
  .bean_reply-num {
    margin-left: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-accent);
  }
  .bean_tb-num {
    color: var(--bean-muted);
  }
  .bean_sort {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    color: inherit;
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_col-extra {
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    white-space: nowrap;
    color: var(--bean-muted);
  }
  .bean_flag {
    margin-left: var(--spacing);
    display: inline-flex;
    height: 18px;
    align-items: center;
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 1.5);
    vertical-align: middle;
    font-size: 11px;
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .bean_flag-new {
    background-color: var(--bean-accent);
    color: var(--bean-onaccent);
  }
  .bean_flag-secret {
    background-color: var(--bean-surf);
    color: var(--bean-muted);
  }
  .bean_flag-file {
    background-color: var(--bean-surf);
    color: var(--bean-muted);
  }
  .bean_view-trackback {
    margin-top: calc(var(--spacing) * 6);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding: calc(var(--spacing) * 4);
  }
  .bean_tb-url {
    margin-top: calc(var(--spacing) * 2);
  }
  .bean_tb-list {
    margin: 0;
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    list-style-type: none;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: 0;
  }
  .bean_tb-item {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 3);
  }
  .bean_tb-meta {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
  }
  .bean_tb-body {
    margin-top: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_list-table-mini {
    margin-bottom: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_list-table-mini .bean_td {
    padding-block: calc(var(--spacing) * 2);
  }
  .bean_dtable {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .bean_dtable-cap {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .bean_dt-hide {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .bean_dt-title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .bean_docs {
    display: flex;
    flex-direction: column;
  }
  .bean_gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .bean_gallery-clean {
    gap: calc(var(--spacing) * 2);
  }
  .bean_gcard-wrap {
    position: relative;
  }
  .bean_gcard-check {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    z-index: 10;
  }
  .bean_gcard {
    display: block;
    overflow: hidden;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--bean-accent);
      }
    }
  }
  .bean_gcard-thumb {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background-color: var(--bean-surf);
  }
  .bean_gcard-thumb-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .bean_gcard-thumb-empty {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--bean-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--bean-muted) 50%, transparent);
    }
  }
  .bean_gcard-flag {
    position: absolute;
    top: calc(var(--spacing) * 2);
    left: calc(var(--spacing) * 2);
    z-index: 10;
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-accent);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-onaccent);
  }
  .bean_gcard-body {
    padding: calc(var(--spacing) * 3);
  }
  .bean_gcard-over {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--spacing);
    padding: calc(var(--spacing) * 3);
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, transparent 100%);
  }
  .bean_gcard-over-cat {
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .bean_gcard-over-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .bean_gallery-clean .bean_gcard {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .bean_gallery-clean .bean_gcard-body {
    display: none;
  }
  .bean_gallery-clean .bean_gcard-thumb {
    aspect-ratio: 1 / 1;
  }
  .bean_gallery-clean .bean_gcard:hover .bean_gcard-over {
    opacity: 100%;
  }
  .bean_gcard-cat {
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-accent);
  }
  .bean_gcard-title {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_gcard-summary {
    margin-top: var(--spacing);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_gcard-meta {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 11px;
    color: var(--bean-muted);
  }
  .bean_webzine {
    display: flex;
    flex-direction: column;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--bean-line);
    }
  }
  .bean_wz-wrap, .bean_wz-item {
    display: flex;
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
  }
  .bean_wz-thumb {
    position: relative;
    height: calc(var(--spacing) * 24);
    width: calc(var(--spacing) * 32);
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 5px;
    background-color: var(--bean-surf);
  }
  .bean_wz-thumb-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .bean_wz-thumb-empty {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--bean-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--bean-muted) 50%, transparent);
    }
  }
  .bean_wz-body {
    min-width: 0;
    flex: 1;
  }
  .bean_wz-cat {
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-accent);
  }
  .bean_wz-title {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_wz-summary {
    margin-top: var(--spacing);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_wz-meta {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_faq {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .bean_faq-cat {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-accent);
  }
  .bean_faq-notice {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .bean_faq-item {
    overflow: hidden;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_faq-q {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    background-color: var(--bean-card);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
  }
  .bean_faq-q-mark {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--bean-accent);
  }
  .bean_faq-q-text {
    flex: 1;
  }
  .bean_faq-arrow {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_faq-item.bean_is-open .bean_faq-arrow {
    rotate: 180deg;
  }
  .bean_faq-a {
    display: none;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bean-surf) 50%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
  }
  .bean_faq-item.bean_is-open .bean_faq-a {
    display: block;
  }
  .bean_faq-a-inner {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .bean_faq-a-mark {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--bean-muted);
  }
  .bean_faq-a-body {
    flex: 1;
  }
  .bean_faq-a-meta {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_faq-a-foot {
    margin-top: calc(var(--spacing) * 2);
  }
  .bean_faq-a-link {
    color: var(--bean-accent);
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .bean_sns, .bean_sns-wrap {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .bean_sns-item {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 4);
  }
  .bean_sns-head {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
  }
  .bean_sns-avatar {
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-surf);
  }
  .bean_sns-avatar-empty {
    display: flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-surf);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-muted);
  }
  .bean_sns-nick {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_sns-by, .bean_sns-date, .bean_sns-cat {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_sns-flag {
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-accent);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-onaccent);
  }
  .bean_sns-title {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_sns-text {
    margin-top: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--bean-text);
  }
  .bean_sns-media {
    margin-top: calc(var(--spacing) * 3);
    overflow: hidden;
    border-radius: 5px;
  }
  .bean_sns-link {
    color: var(--bean-accent);
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .bean_sns-foot {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
    padding-top: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_sns-stat, .bean_sns-stat-vote {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .bean_tags, .bean_view-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .bean_tag, .bean_view-tag {
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_tagcloud {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    padding: calc(var(--spacing) * 4);
  }
  .bean_tagcloud-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_tagcloud-item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing);
    color: var(--bean-muted);
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_tagcloud-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .bean_tagcloud-count {
    font-size: 11px;
  }
  .bean_pager {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .bean_pager-link, .bean_prev, .bean_next {
    display: inline-flex;
    height: calc(var(--spacing) * 9);
    min-width: calc(var(--spacing) * 9);
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--bean-accent);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_pager-link.bean_is-on {
    border-color: var(--bean-accent);
    background-color: var(--bean-accent);
    color: var(--bean-onaccent);
  }
  .bean_comments {
    margin-top: calc(var(--spacing) * 8);
  }
  .bean_cmt-head {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_cmt-count {
    color: var(--bean-accent);
  }
  .bean_cmt-list {
    margin: 0;
    display: flex;
    list-style-type: none;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: 0;
  }
  .bean_cmt {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 4);
  }
  .bean_cmt-reply {
    margin-left: calc(var(--spacing) * 6);
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    border-color: var(--bean-accent);
  }
  .bean_cmt-top {
    margin-bottom: calc(var(--spacing) * 1.5);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_cmt-author {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_cmt-date {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_cmt-body {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--bean-text);
  }
  .bean_cmt-actions {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_cmt-act {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--bean-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--bean-accent);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_cmt-source {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_cmt-empty {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_cmt-form, .bean_comment-form-page {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .bean_cmt-form .bean_form-actions, .bean_comment-form-page .bean_form-actions {
    justify-content: center;
  }
  .bean_view-react {
    margin-block: calc(var(--spacing) * 6);
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
  }
  .bean_react-votes {
    display: flex;
    align-items: stretch;
    gap: calc(var(--spacing) * 3);
  }
  .bean_react-btn {
    display: inline-flex;
    min-height: 72px;
    min-width: 92px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--bean-accent);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_react-up:hover {
    border-color: var(--bean-accent);
    color: var(--bean-accent);
  }
  .bean_react-down:hover, .bean_react-declare:hover {
    border-color: var(--color-red-400);
    color: var(--color-red-500);
  }
  .bean_react-num {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .bean_react-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_view-wrap {
    display: flex;
    flex-direction: column;
  }
  .bean_view, .bean_view-body {
    color: var(--bean-text);
  }
  .bean_view-head {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    padding-bottom: calc(var(--spacing) * 4);
  }
  .bean_view-cat {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-accent);
  }
  .bean_view-title {
    margin-top: var(--spacing);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .bean_view-meta {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_view-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .bean_view-meta-pf {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-surf);
    object-fit: cover;
  }
  .bean_view-body {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .bean_view-extra, .bean_view-body, .bean_view-files, .bean_view-tags, .bean_view-trackback, .bean_view-react, .bean_view-sign {
    margin-top: calc(var(--spacing) * 6);
  }
  .bean_view-extra {
    overflow: hidden;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_view-files {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_view-extra-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-muted);
  }
  .bean_view-files-head {
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-muted);
  }
  .bean_view-file {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--bean-accent);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--bean-accent);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-card);
      }
    }
  }
  .bean_view-extra-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: baseline;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
    &:nth-child(odd) {
      background-color: var(--bean-surf);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--bean-surf) 40%, transparent);
      }
    }
    @media (width < 560px) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    @media (width < 560px) {
      gap: var(--spacing);
    }
  }
  .bean_view-extra-value {
    color: var(--bean-text);
  }
  .bean_view-tools {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .bean_view-sign {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    gap: calc(var(--spacing) * 3);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bean-surf) 50%, transparent);
    }
    padding: calc(var(--spacing) * 4);
  }
  .bean_view-sign-pf {
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-surf);
    object-fit: cover;
  }
  .bean_view-sign-name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .bean_view-sign-tx {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_view-nav {
    margin-top: calc(var(--spacing) * 6);
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--bean-line);
    }
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_view-nav-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: var(--spacing);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-surf);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--bean-surf) 60%, transparent);
        }
      }
    }
  }
  .bean_view-nav-dir {
    flex-shrink: 0;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-muted);
  }
  .bean_view-nav-title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bean-text);
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_view-nav-empty {
    color: var(--bean-muted);
  }
  .bean_view-bottomlist {
    margin-top: calc(var(--spacing) * 8);
  }
  .bean_view-bottomlist-head {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_blist {
    margin: 0;
    list-style-type: none;
    overflow: hidden;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    padding: 0;
  }
  .bean_blist-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .bean_blist-row:hover {
    background-color: var(--bean-surf);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bean-surf) 60%, transparent);
    }
  }
  .bean_blist-notice {
    background-color: var(--bean-surf);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bean-surf) 40%, transparent);
    }
  }
  .bean_blist-current {
    background-color: var(--bean-surf);
  }
  .bean_blist-current .bean_blist-title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-accent);
  }
  .bean_blist-no {
    width: calc(var(--spacing) * 7);
    flex-shrink: 0;
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_blist-flag {
    display: inline-flex;
    height: 18px;
    flex-shrink: 0;
    align-items: center;
    border-radius: 0.25rem;
    background-color: var(--bean-accent);
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: 11px;
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-onaccent);
  }
  .bean_blist-title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bean-text);
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_blist-cmt {
    flex-shrink: 0;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-muted);
  }
  .bean_blist-date {
    flex-shrink: 0;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_saved-content {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .bean_write {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .bean_write-top {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2.5);
  }
  .bean_write-meta {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .bean_write-cat, .bean_write-notice {
    width: auto;
    min-width: 160px;
    flex: none;
  }
  .bean_write-title {
    width: 100%;
  }
  .bean_write-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_editor-wrap {
    display: block;
  }
  .bean_comm-boxnav {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_comm-view {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 5);
  }
  .bean_comm-view-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .bean_comm-view-meta {
    margin-top: var(--spacing);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_comm-view-date {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_comm-view-body {
    margin-top: calc(var(--spacing) * 4);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--bean-text);
  }
  .bean_comm-view-tools {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_comm-editor {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_comm-files {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .bean_comm-file-size {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_comm-listfoot {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .bean_comm-friend-total {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_comm-popup {
    padding: calc(var(--spacing) * 4);
  }
  .bean_msg-box {
    display: flex;
    flex-direction: column;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--bean-line);
    }
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_msg-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-surf);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--bean-surf) 60%, transparent);
        }
      }
    }
  }
  .bean_msg-title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_msg-target {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_msg-target-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .bean_msg-target-by {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_msg-target-body {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_msg-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .bean_container {
    margin-inline: auto;
    width: 100%;
    max-width: 1200px;
    padding-inline: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .bean_stack {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .bean_box {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 4);
  }
  .bean_card {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 5);
  }
  .bean_card-head {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .bean_card-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_card-foot {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--bean-line);
    padding-top: calc(var(--spacing) * 3);
  }
  .bean_divider {
    margin-block: calc(var(--spacing) * 4);
    height: 1px;
    width: 100%;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: var(--bean-line);
  }
  .bean_divider-v {
    margin-inline: calc(var(--spacing) * 2);
    width: 1px;
    align-self: stretch;
    background-color: var(--bean-line);
  }
  .bean_label {
    margin-bottom: calc(var(--spacing) * 1.5);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
  }
  .bean_help {
    margin-top: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_error {
    margin-top: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red-500);
  }
  .bean_input, .bean_select, .bean_textarea {
    width: 100%;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-outline-style: none;
    outline-style: none;
    &::placeholder {
      color: var(--bean-muted);
    }
    &:focus {
      border-color: var(--bean-accent);
    }
  }
  .bean_textarea {
    min-height: calc(var(--spacing) * 24);
    resize: vertical;
  }
  .bean_input-group, .bean_form-group {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    flex-direction: column;
  }
  .bean_is-invalid {
    border-color: var(--color-red-400) !important;
  }
  .bean_switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 11);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: var(--bean-line);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_switch::after {
    content: "";
    position: absolute;
    top: calc(var(--spacing) * 0.5);
    left: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_switch:checked {
    background-color: var(--bean-accent);
  }
  .bean_switch:checked::after {
    transform: translateX(20px);
  }
  .bean_range {
    height: calc(var(--spacing) * 1.5);
    width: 100%;
    cursor: pointer;
    appearance: none;
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-line);
  }
  .bean_range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-accent);
  }
  .bean_range::-moz-range-thumb {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: var(--bean-accent);
  }
  .bean_file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_tabs {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_tab {
    margin-bottom: -1px;
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: transparent;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--bean-text);
      }
    }
  }
  .bean_tab.bean_is-active {
    border-color: var(--bean-accent);
    color: var(--bean-accent);
  }
  .bean_tab-panel {
    display: none;
    padding-block: calc(var(--spacing) * 4);
  }
  .bean_tab-panel.bean_is-active {
    display: block;
  }
  .bean_breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_breadcrumb-sep {
    color: var(--bean-line);
  }
  .bean_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .bean_dropdown {
    position: relative;
    display: inline-block;
  }
  .bean_dropdown-menu {
    visibility: hidden;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 180px;
    transform-origin: top;
    --tw-translate-y: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 1.5);
    opacity: 0%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_dropdown.bean_is-open .bean_dropdown-menu {
    visibility: visible;
    --tw-translate-y: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 100%;
  }
  .bean_menu {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .bean_menu-item {
    display: block;
    cursor: pointer;
    border-radius: 5px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-surf);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--bean-accent);
      }
    }
  }
  .bean_accordion {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--bean-line);
    }
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_accordion-head {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-text);
  }
  .bean_accordion-body {
    display: none;
    padding-inline: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_accordion-item.bean_is-open .bean_accordion-body {
    display: block;
  }
  .bean_drawer-ovl {
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_drawer-ovl.bean_is-open {
    visibility: visible;
    opacity: 100%;
  }
  .bean_drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 70;
    height: 100%;
    width: 360px;
    max-width: 90vw;
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    overflow-y: auto;
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_drawer.bean_is-open {
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .bean_drawer-left {
    right: auto;
    left: 0;
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-left-style: var(--tw-border-style);
    border-left-width: 0px;
  }
  .bean_modal-ovl {
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
    padding: calc(var(--spacing) * 4);
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_modal-ovl.bean_is-open {
    visibility: visible;
    opacity: 100%;
  }
  .bean_modal {
    width: 100%;
    max-width: var(--container-md);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 5);
  }
  .bean_modal-head {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bean_modal-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_modal-foot {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .bean_tooltip {
    position: relative;
    display: inline-flex;
  }
  .bean_tooltip-tip {
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    bottom: calc(100% + 6px);
    left: calc(1 / 2 * 100%);
    z-index: 50;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: 5px;
    background-color: var(--bean-text);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--bean-bg);
    opacity: 0%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_tooltip:hover .bean_tooltip-tip {
    visibility: visible;
    opacity: 100%;
  }
  .bean_popover {
    position: relative;
    display: inline-block;
  }
  .bean_popover-panel {
    visibility: hidden;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: calc(var(--spacing) * 64);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
    opacity: 0%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .bean_popover.bean_is-open .bean_popover-panel {
    visibility: visible;
    opacity: 100%;
  }
  .bean_alert-info {
    border-color: var(--bean-accent);
    color: var(--bean-accent);
    background: var(--bean-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--bean-accent) 8%, transparent);
    }
  }
  .bean_alert-success {
    color: var(--color-emerald-600);
    border-color: #34d399;
    background: color-mix(in srgb, #10b981 8%, transparent);
  }
  .bean_alert-warn {
    color: var(--color-amber-600);
    border-color: #fbbf24;
    background: color-mix(in srgb, #f59e0b 10%, transparent);
  }
  .bean_alert-error {
    color: var(--color-red-500);
    border-color: #f87171;
    background: color-mix(in srgb, #ef4444 8%, transparent);
  }
  .bean_toast-wrap {
    position: fixed;
    right: calc(var(--spacing) * 4);
    bottom: calc(var(--spacing) * 4);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .bean_toast {
    min-width: 240px;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-text);
  }
  .bean_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bean-muted);
  }
  .bean_badge-accent {
    background-color: var(--bean-accent);
    color: var(--bean-onaccent);
  }
  .bean_badge-dot {
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    background-color: currentcolor;
  }
  .bean_spinner {
    display: inline-block;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    animation: var(--animate-spin);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--bean-line);
    border-top-color: var(--bean-accent);
  }
  .bean_progress {
    height: calc(var(--spacing) * 2);
    width: 100%;
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-line);
  }
  .bean_progress-bar {
    height: 100%;
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-accent);
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .bean_skeleton {
    animation: var(--animate-pulse);
    border-radius: 5px;
    background-color: var(--bean-surf);
  }
  .bean_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--bean-muted);
  }
  .bean_empty-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .bean_table th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-muted);
  }
  .bean_table td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--bean-line);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    color: var(--bean-text);
  }
  .bean_table tbody tr:hover td {
    background-color: var(--bean-surf);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bean-surf) 60%, transparent);
    }
  }
  .bean_list {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--bean-line);
    }
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
  }
  .bean_list-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-surf);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--bean-surf) 60%, transparent);
        }
      }
    }
  }
  .bean_avatar {
    display: inline-flex;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-surf);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-text);
  }
  .bean_avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .bean_avatar-group {
    display: flex;
    align-items: center;
  }
  .bean_avatar-group .bean_avatar {
    margin-left: calc(var(--spacing) * -2);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--bean-card);
    &:first-child {
      margin-left: 0;
    }
  }
  .bean_timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding-left: calc(var(--spacing) * 5);
  }
  .bean_timeline::before {
    content: "";
    position: absolute;
    top: var(--spacing);
    bottom: var(--spacing);
    left: calc(var(--spacing) * 1.5);
    width: 1px;
    background-color: var(--bean-line);
  }
  .bean_timeline-item {
    position: relative;
  }
  .bean_timeline-item::before {
    content: "";
    position: absolute;
    top: var(--spacing);
    left: calc(14px * -1);
    height: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 2.5);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--bean-card);
    background-color: var(--bean-accent);
  }
  .bean_timeline-time {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--bean-muted);
  }
  .bean_calendar {
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-card);
    padding: calc(var(--spacing) * 3);
  }
  .bean_calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--spacing);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .bean_calendar-dow {
    padding-block: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--bean-muted);
  }
  .bean_calendar-day {
    aspect-ratio: 1 / 1;
    cursor: pointer;
    border-radius: 5px;
    padding-block: var(--spacing);
    color: var(--bean-text);
    &:hover {
      @media (hover: hover) {
        background-color: var(--bean-surf);
      }
    }
  }
  .bean_calendar-day.bean_is-today {
    background-color: var(--bean-accent);
    color: var(--bean-onaccent);
  }
  .bean_calendar-day.bean_is-muted {
    color: var(--bean-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--bean-muted) 50%, transparent);
    }
  }
  .bean_carousel {
    display: flex;
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
    --tw-scroll-snap-strictness: mandatory;
    gap: calc(var(--spacing) * 4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bean_carousel::-webkit-scrollbar {
    display: none;
  }
  .bean_carousel-item {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .bean_link {
    color: var(--bean-accent);
    text-underline-offset: 2px;
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .bean_code {
    border-radius: 0.25rem;
    background-color: var(--bean-surf);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: .85em;
    color: var(--bean-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .bean_codeblock {
    overflow-x: auto;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--bean-line);
    background-color: var(--bean-surf);
    padding: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .bean_quote {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--bean-accent);
    background-color: var(--bean-surf);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bean-surf) 50%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--bean-text);
  }
  .bean_img {
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: 5px;
  }
  .bean_video {
    position: relative;
    aspect-ratio: var(--aspect-video);
    overflow: hidden;
    border-radius: 5px;
    background-color: var(--color-black);
  }
  .bean_video iframe, .bean_video video {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .bean_scroll {
    overflow: auto;
  }
  .bean_focus-ring:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: var(--bean-accent);
  }
  .bean_scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--bean-line) transparent;
  }
  .bean_scrollbar::-webkit-scrollbar {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
  }
  .bean_scrollbar::-webkit-scrollbar-thumb {
    border-radius: calc(infinity * 1px);
    background-color: var(--bean-line);
  }
  .bean_scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
  }
}
@media (min-width: 641px) {
  .bean_gnb {
    display: block;
  }
  .bean_burger {
    display: none;
  }
  .bean_nav .bean_logo {
    position: static;
    transform: none;
  }
}
@media (max-width: 640px) {
  .bean_gnb {
    display: none;
  }
  .bean_burger {
    display: inline-flex;
  }
  .bean_nav {
    position: relative;
  }
  .bean_nav .bean_logo {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    margin: 0;
  }
  .bean_nav-tools {
    margin-left: auto;
  }
  .bean_cmt-form .bean_form-actions, .bean_comment-form-page .bean_form-actions {
    width: 100%;
  }
  .bean_cmt-form .bean_form-actions .bean_btn, .bean_comment-form-page .bean_form-actions .bean_btn {
    width: 100%;
  }
}
.bean_layout {
  font-family: var(--font-bean);
  color: var(--bean-text);
  background-color: var(--bean-bg);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.bean_layout input, .bean_layout select, .bean_layout textarea, .bean_layout button {
  font-family: var(--font-bean);
}
.bean_hero {
  display: flex;
  align-items: center;
}
.bean_page-main .bean_hero {
  height: 100svh;
  min-height: 100svh;
}
.bean_layout {
  --bean-ctrl-h: 40px;
  --bean-ctrl-fs: 14px;
}
.bean_layout :is(input:where([type="text"],[type="email"],[type="password"],[type="number"],[type="search"],[type="tel"],[type="url"],[type="date"],[type="time"],[type="datetime-local"],[type="month"],[type="week"]), select, .bean_btn, .bean_btn-line, .bean_input, .bean_select) {
  height: var(--bean-ctrl-h);
  min-height: var(--bean-ctrl-h);
  font-size: var(--bean-ctrl-fs);
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.2;
}
.bean_layout textarea, .bean_layout .bean_textarea {
  font-size: var(--bean-ctrl-fs);
}
.bean_sm {
  --bean-ctrl-h: 32px;
  --bean-ctrl-fs: 13px;
}
.bean_md {
  --bean-ctrl-h: 40px;
  --bean-ctrl-fs: 14px;
}
.bean_lg {
  --bean-ctrl-h: 48px;
  --bean-ctrl-fs: 15px;
}
.bean_xl {
  --bean-ctrl-h: 56px;
  --bean-ctrl-fs: 16px;
}
.bean_layout input.bean_write-title {
  --bean-ctrl-h: 50px;
  --bean-ctrl-fs: 17px;
  font-weight: 500;
}
.bean_extra .krZip {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bean_extra .krzip-postcode-wrap, .bean_extra .krzip-address-wrap, .bean_extra .krzip-detailAddress-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.bean_extra .krZip > div > label {
  width: 72px;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--bean-muted);
}
.bean_extra .krZip input[type="text"] {
  min-width: 0;
  flex: 1 1 auto;
  height: var(--bean-ctrl-h);
  min-height: var(--bean-ctrl-h);
  padding: 0 12px;
  border: 1px solid var(--bean-line);
  border-radius: var(--radius-bean);
  background: var(--bean-card);
  color: var(--bean-text);
  font-size: 14px;
  outline: none;
}
.bean_extra .krZip input[type="text"]:focus {
  border-color: var(--bean-accent);
}
.bean_extra .krZip input[disabled] {
  background: var(--bean-surf);
  color: var(--bean-muted);
  cursor: default;
}
.bean_extra .krZip .krzip-postcode {
  max-width: 160px;
  flex: 0 0 auto;
}
.bean_extra .krZip .btn, .bean_extra .krZip .krzip-search, .bean_extra .krZip .krzip-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--bean-ctrl-h);
  min-height: var(--bean-ctrl-h);
  padding: 0 14px;
  border: 1px solid var(--bean-line);
  border-radius: var(--radius-bean);
  background: var(--bean-surf);
  color: var(--bean-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.bean_extra .krZip .krzip-search:hover, .bean_extra .krZip .krzip-delete:hover {
  border-color: var(--bean-accent);
  color: var(--bean-accent);
}
.bean_extra .krZip .krzip-search {
  border-color: var(--bean-accent);
  background: var(--bean-accent);
  color: var(--bean-onaccent);
}
.bean_extra .krZip .krzip-search:hover {
  background: var(--bean-accent2);
  color: var(--bean-onaccent);
}
.bean_extra .krzip-guide {
  font-size: 12px;
  color: var(--bean-muted);
}
.bean_layout :is(input, select, textarea, button) {
  font-family: var(--font-bean);
}
.bean_layout :is(input, select, textarea) {
  font-weight: 400;
}
.bean_extra-field .rx_ev_radio, .bean_extra-field .rx_ev_checkbox {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  gap: 10px 20px;
}
.bean_extra-field .rx_ev_radio > li, .bean_extra-field .rx_ev_checkbox > li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.bean_extra-field .rx_ev_radio > li::before, .bean_extra-field .rx_ev_checkbox > li::before {
  content: none;
}
.bean_extra-field .rx_ev_radio label, .bean_extra-field .rx_ev_checkbox label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--bean-text);
  cursor: pointer;
}
.bean_extra-field:has(.dateRemover), .bean_extra-field:has(.timeRemover) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.bean_extra-field .date, .bean_extra-field .rx_ev_time {
  flex: 1 1 auto;
}
.bean_extra-field .dateRemover, .bean_extra-field .timeRemover, .bean_extra-field .evFileRemover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: var(--bean-ctrl-h);
  min-height: var(--bean-ctrl-h);
  padding: 0 14px;
  border: 1px solid var(--bean-line);
  border-radius: var(--radius-bean);
  background: var(--bean-surf);
  color: var(--bean-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.bean_extra-field .evFileRemover {
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
}
.bean_extra-field .dateRemover:hover, .bean_extra-field .timeRemover:hover, .bean_extra-field .evFileRemover:hover {
  border-color: var(--bean-accent);
  color: var(--bean-accent);
}
.bean_extra-field .ev_file_upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bean_extra-field .ev_file_info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--bean-line);
  border-radius: var(--radius-bean);
  background: var(--bean-surf);
  font-size: 13px;
}
.bean_extra-field .ev_file_info .filename {
  font-weight: 600;
  color: var(--bean-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bean_extra-field .ev_file_info .filesize {
  flex: 0 0 auto;
  color: var(--bean-muted);
}
.bean_extra-field input[type="file"] {
  width: 100%;
  max-width: 460px;
  padding: 8px;
  font-size: 13px;
  color: var(--bean-muted);
  border: 1px dashed var(--bean-line);
  border-radius: var(--radius-bean);
  background: var(--bean-card);
  cursor: pointer;
}
.bean_extra-field input[type="file"]::file-selector-button, .bean_extra-field input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 7px 14px;
  height: auto;
  border: 1px solid var(--bean-accent);
  border-radius: var(--radius-bean);
  background: var(--bean-accent);
  color: var(--bean-onaccent);
  font-family: var(--font-bean);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.bean_extra-field input[type="file"]::file-selector-button:hover {
  background: var(--bean-accent2);
}
.bean_layout .cke_chrome {
  border-color: var(--bean-line) !important;
  border-radius: var(--radius-bean);
  overflow: hidden;
  box-shadow: none !important;
}
.bean_layout .cke_inner {
  background: var(--bean-card) !important;
}
.bean_layout .cke_top {
  background: var(--bean-surf) !important;
  border-bottom: 1px solid var(--bean-line) !important;
  box-shadow: none !important;
}
.bean_layout .cke_bottom {
  background: var(--bean-surf) !important;
  border-top: 1px solid var(--bean-line) !important;
  box-shadow: none !important;
}
.bean_layout .cke_toolgroup, .bean_layout .cke_combo_button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.bean_layout .cke_button {
  background: transparent !important;
}
.bean_layout .cke_button:hover, .bean_layout .cke_button_on, .bean_layout .cke_combo_button:hover {
  background: var(--bean-card) !important;
  border-radius: 4px;
}
.bean_layout .cke_combo_text {
  color: var(--bean-text) !important;
}
.bean_layout .cke_toolbar_separator {
  background: var(--bean-line) !important;
}
.bean_layout .cke_path_item, .bean_layout .cke_path_empty, .bean_layout .cke_path_item > a {
  color: var(--bean-muted) !important;
}
.bean_is-dark .cke_button_icon {
  filter: invert(1) brightness(1.7);
}
.bean_is-dark .cke_combo_arrow {
  border-top-color: var(--bean-muted) !important;
}
.bean_layout :is(.x_form-horizontal, .x_content) input[type="radio"], .bean_layout :is(.x_form-horizontal, .x_content) input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: auto;
  height: auto;
  min-height: 0;
  border: initial;
  background: none;
  padding: 0;
  position: static;
  box-shadow: none;
}
.bean_layout :is(.x_form-horizontal, .x_content) input[type="radio"]::after, .bean_layout :is(.x_form-horizontal, .x_content) input[type="checkbox"]::after {
  content: none;
}
.bean_layout :is(.x_form-horizontal, .x_content) :is(img, svg) {
  display: inline-block;
  vertical-align: middle;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-leading: initial;
      --tw-divide-y-reverse: 0;
      --tw-scroll-snap-strictness: proximity;
    }
  }
}

/* Original file: layouts/bean_tailwind_layout/css/bean.hero.css */

/* ════════════════════════════════════════════════════════════
   BEAN 풀스크린 히어로 — 가독성 · 정렬 · 테마 대응
   bean.tailwind.css(컴파일 산출물) 다음에 로드되어 우선 적용된다.
   산출물을 직접 수정하지 않기 위해 분리한 오버라이드 레이어.
   ════════════════════════════════════════════════════════════ */

/* 콘텐츠 수직 중앙 정렬.
   비디오 히어로는 inner 가 .bean_hero 직계라 align-items 로 해결되지만,
   이미지 히어로는 inner 가 절대배치된 .bean_hero-slide 안에 있어
   슬라이드 자체를 수직 중앙 컨테이너로 만들어야 한다. */
.bean_hero { align-items: center; }
.bean_hero-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 스크림(베일) — 텍스트가 놓인 쪽만 어둡게, 반대쪽 이미지는 그대로 노출.
   좌/우/가운데 정렬 옵션에 맞춰 어두워지는 방향이 바뀐다.
   (좌측 정렬이 기본) */
.bean_hero-veil {
  background:
    linear-gradient(to right,
      rgba(0,0,0,.74) 0%, rgba(0,0,0,.44) 34%,
      rgba(0,0,0,.12) 64%, rgba(0,0,0,.03) 88%),
    linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 18%);
}
.bean_hero-al-right .bean_hero-veil {
  background:
    linear-gradient(to left,
      rgba(0,0,0,.74) 0%, rgba(0,0,0,.44) 34%,
      rgba(0,0,0,.12) 64%, rgba(0,0,0,.03) 88%),
    linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 18%);
}
.bean_hero-al-center .bean_hero-veil {
  background:
    radial-gradient(125% 100% at 50% 50%,
      rgba(0,0,0,.55) 0%, rgba(0,0,0,.34) 42%,
      rgba(0,0,0,.12) 72%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 18%,
      rgba(0,0,0,0) 82%, rgba(0,0,0,.20) 100%);
}

/* 태그 칩 — 밝은 이미지 위에서도 또렷하게(어두운 글래스 + 테두리) */
.bean_hero-tag {
  background-color: rgba(10,12,20,.42) !important;
  border: 1px solid rgba(255,255,255,.34);
  padding: 7px 16px;
  letter-spacing: .2em;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
}

/* 타이틀/설명 — 어떤 사진 위에서도 읽히도록 그림자 */
.bean_hero-title {
  letter-spacing: -.015em;
  text-shadow: 0 2px 22px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.45);
}
.bean_hero-desc {
  color: rgba(255,255,255,.93);
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}

/* 버튼 — 테마 액센트(--bean-accent) + 그림자 + 호버 리프트 */
.bean_hero-btn {
  box-shadow:
    0 14px 34px -10px color-mix(in srgb, var(--bean-accent) 62%, transparent),
    0 3px 10px rgba(0,0,0,.28);
  transition: transform .18s ease, background-color .2s ease, box-shadow .2s ease;
}
.bean_hero-btn:hover { transform: translateY(-2px); }
.bean_hero-btn:active { transform: translateY(0); }

/* Original file: modules/editor/components/bean_template/css/templates.css */

/* ============================================================
   BEAN 문서 템플릿 — 독립 실행용 CSS
   .bean_doc-* 클래스를 본문 어디서나 동작하게.
   bean 레이아웃 안에서는 --bean-* 변수가 자동 상속되어 테마 컬러 적용,
   bean 레이아웃 밖에서는 아래 :where(:root) 폴백 값 사용.
   ============================================================ */


/* 변수 폴백 — :where() 는 specificity 0 이라 bean.colors.css 의 :root 값이 우선 */
:where(:root){
	--bean-text:#1a1a1f;--bean-muted:#7a7a85;--bean-line:#e6e6e6;
	--bean-card:#ffffff;--bean-surf:#f6f7f8;
	--bean-accent:#5b2ed8;--bean-accent2:#d62b80;
	--bean-sans:'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif;
	--bean-serif:'Times New Roman',serif;
}
/* 다크모드 폴백 — bean 레이아웃 밖에서 prefers-color-scheme:dark 일 때 */
@media (prefers-color-scheme: dark){
	:where(:root){
		--bean-text:#eef0f4;--bean-muted:#8b909c;--bean-line:#2a2d36;
		--bean-card:#181a20;--bean-surf:#22252e;
		--bean-accent:#7a55ff;--bean-accent2:#ff5fa1;
	}
}

/* ── 첨부 테마 강제 (에디터 컴포넌트에서 '라이트'/'다크' 선택 시 삽입되는 wrapper) ──
   wrapper 안에서 --bean-* 를 직접 정의 → 레이아웃/시스템 테마와 무관하게 고정.
   '자동' 선택 시에는 이 wrapper 없이 삽입되어 위의 폴백 체인(레이아웃→시스템→라이트)을 따름. */
.bean_doc-theme{ font-family:var(--bean-sans); border-radius:12px; }
.bean_doc-theme--light{
	--bean-text:#1a1a1f;--bean-muted:#7a7a85;--bean-line:#e6e6e6;
	--bean-card:#ffffff;--bean-surf:#f6f7f8;--bean-accent:#5b2ed8;--bean-accent2:#d62b80;
	background:#ffffff; color:var(--bean-text); padding:6px 20px;
}
.bean_doc-theme--dark{
	--bean-text:#eef0f4;--bean-muted:#8b909c;--bean-line:#2a2d36;
	--bean-card:#181a20;--bean-surf:#22252e;--bean-accent:#7a55ff;--bean-accent2:#ff5fa1;
	background:#13151b; color:var(--bean-text); padding:6px 20px;
}

/* ============================================================
   글로벌 링크 리셋 — 모든 .bean_doc-* 컨테이너 안의 <a> 는 underline 절대 금지.
   레이아웃·테마·브라우저 기본의 text-decoration 모두 압도.
   ============================================================ */
[class*="bean_doc-"] a,
[class*="bean_doc-"] a:link,
[class*="bean_doc-"] a:visited,
[class*="bean_doc-"] a:hover,
[class*="bean_doc-"] a:focus,
[class*="bean_doc-"] a:active,
[class*="bean_doc-"] a:any-link{
	text-decoration:none !important;
	text-decoration-line:none !important;
}

.bean_doc-hero{margin:34px 0;padding:32px 0 22px;border-top:1px solid var(--bean-line);
	border-bottom:1px solid var(--bean-line);font-family:var(--bean-sans);}
.bean_doc-hero-eyebrow{font-size:11px;letter-spacing:3px;color:var(--bean-accent);
	font-weight:800;margin-bottom:14px;}
.bean_doc-hero-title{margin:0 0 10px;font-size:clamp(26px,4vw,42px);font-weight:800;
	letter-spacing:-1px;line-height:1.12;color:var(--bean-text);}
.bean_doc-hero-sub{margin:0;color:var(--bean-muted);font-size:15px;line-height:1.6;max-width:680px;}
.bean_doc-hero-meta{margin-top:18px;font-size:12px;letter-spacing:1px;color:var(--bean-muted);
	font-variant-numeric:tabular-nums;}
.bean_doc-hero-cover{position:relative;margin:34px 0;padding:90px 28px;border:0;border-radius:14px;
	background-size:cover;background-position:center;color:#fff;}
.bean_doc-hero-cover .bean_doc-hero-title,
.bean_doc-hero-cover .bean_doc-hero-sub{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45);}
.bean_doc-hero-cover .bean_doc-hero-eyebrow{color:#fff;opacity:.9;}

.bean_doc-callout{display:flex;gap:14px;margin:22px 0;padding:16px 18px;
	border:1px solid var(--bean-line);border-radius:10px;background:var(--bean-surf);
	font-family:var(--bean-sans);}
.bean_doc-callout-label{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.5px;
	padding:5px 10px;border-radius:6px;background:var(--bean-card);color:var(--bean-muted);
	text-transform:uppercase;align-self:flex-start;}
.bean_doc-callout-body{flex:1;font-size:14px;line-height:1.65;color:var(--bean-text);}
.bean_doc-callout-info{border-left:3px solid var(--bean-accent);}
.bean_doc-callout-info .bean_doc-callout-label{background:color-mix(in srgb,var(--bean-accent) 18%,transparent);color:var(--bean-accent);}
.bean_doc-callout-tip{border-left:3px solid #1aab73;}
.bean_doc-callout-tip .bean_doc-callout-label{background:color-mix(in srgb,#1aab73 18%,transparent);color:#1aab73;}
.bean_doc-callout-warn{border-left:3px solid #e0843a;}
.bean_doc-callout-warn .bean_doc-callout-label{background:color-mix(in srgb,#e0843a 22%,transparent);color:#e0843a;}

.bean_doc-pullquote{margin:30px 0;padding:18px 26px;border:0;border-left:3px solid var(--bean-accent);
	background:none;}
.bean_doc-pullquote p{margin:0;font-family:var(--bean-serif);font-style:italic;font-size:clamp(18px,2.4vw,24px);
	font-weight:400;line-height:1.5;color:var(--bean-text);letter-spacing:-.2px;}
.bean_doc-pullquote cite{display:block;margin-top:12px;font-style:normal;
	font-size:12.5px;color:var(--bean-muted);letter-spacing:.5px;font-family:var(--bean-sans);}

.bean_doc-twocol{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:22px 0;
	font-family:var(--bean-sans);}
.bean_doc-twocol>div>p{margin:0 0 12px;}

.bean_doc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0;
	font-family:var(--bean-sans);}
.bean_doc-stat{padding:22px 18px;background:var(--bean-surf);border:1px solid var(--bean-line);
	border-radius:12px;text-align:center;}
.bean_doc-stat-num{font-size:clamp(28px,4.5vw,42px);font-weight:800;color:var(--bean-accent);
	letter-spacing:-1px;line-height:1;}
.bean_doc-stat-num span{font-size:.55em;color:var(--bean-text);font-weight:600;margin-left:2px;}
.bean_doc-stat-label{margin-top:8px;font-size:12.5px;color:var(--bean-muted);letter-spacing:.3px;}

.bean_doc-steps{list-style:none;margin:24px 0;padding:0;display:flex;flex-direction:column;gap:10px;
	font-family:var(--bean-sans);}
.bean_doc-steps>li{display:flex;gap:14px;padding:16px 18px;background:var(--bean-card);
	border:1px solid var(--bean-line);border-radius:10px;}
.bean_doc-step-n{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--bean-accent);
	color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.bean_doc-step-b{flex:1;min-width:0;}
.bean_doc-step-t{font-size:14.5px;font-weight:700;color:var(--bean-text);}
.bean_doc-step-d{font-size:13px;color:var(--bean-muted);margin-top:3px;line-height:1.6;}

.bean_doc-features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0;
	font-family:var(--bean-sans);}
.bean_doc-feat{padding:20px 18px;background:var(--bean-card);border:1px solid var(--bean-line);
	border-radius:10px;}
.bean_doc-feat-h{font-size:14.5px;font-weight:800;color:var(--bean-text);margin-bottom:6px;letter-spacing:-.2px;}
.bean_doc-feat-d{font-size:13px;color:var(--bean-muted);line-height:1.65;}

.bean_doc-gallery{display:grid;gap:8px;margin:22px 0;}
.bean_doc-gallery-2x2{grid-template-columns:repeat(2,1fr);}
.bean_doc-gallery a{display:block;}
.bean_doc-gallery img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;
	border-radius:8px;display:block;}

.bean_doc-figure{margin:24px 0;font-family:var(--bean-sans);}
.bean_doc-figure img{width:100%;border-radius:10px;display:block;}
.bean_doc-figure figcaption{margin-top:8px;font-size:12.5px;color:var(--bean-muted);
	text-align:center;line-height:1.5;}

.bean_doc-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;
	margin:30px 0;padding:28px;background:linear-gradient(150deg,var(--bean-accent),var(--bean-accent2));
	color:#fff;border-radius:14px;flex-wrap:wrap;font-family:var(--bean-sans);}
.bean_doc-cta-body{flex:1;min-width:200px;}
.bean_doc-cta-h{margin:0;font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.3;}
.bean_doc-cta-d{margin:6px 0 0;font-size:13.5px;color:rgba(255,255,255,.85);}
.bean_doc-cta-btn{flex:0 0 auto;background:#0c0a14;color:#fff !important;padding:13px 22px;
	border-radius:999px;font-size:13.5px;font-weight:700;text-decoration:none;}
.bean_doc-cta-btn:hover{background:#000;}

.bean_doc-profile{display:flex;gap:22px;margin:24px 0;padding:22px;
	background:var(--bean-card);border:1px solid var(--bean-line);border-radius:12px;align-items:flex-start;
	font-family:var(--bean-sans);}
.bean_doc-profile-ph{flex:0 0 120px;}
.bean_doc-profile-ph img{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block;
	border:2px solid var(--bean-line);}
.bean_doc-profile-body{flex:1;min-width:0;}
.bean_doc-profile-name{font-size:18px;font-weight:800;color:var(--bean-text);letter-spacing:-.2px;}
.bean_doc-profile-role{font-size:12px;color:var(--bean-accent);letter-spacing:1px;
	text-transform:uppercase;margin-top:4px;}
.bean_doc-profile-bio{margin:10px 0;font-size:13.5px;color:var(--bean-muted);line-height:1.65;}
.bean_doc-profile-links{display:flex;gap:14px;flex-wrap:wrap;}
.bean_doc-profile-links a{font-size:12.5px;color:var(--bean-accent) !important;font-weight:600;
	text-decoration:none;}
.bean_doc-profile-links a:hover{opacity:.7;}

.bean_doc-timeline{list-style:none;margin:24px 0;padding:0 0 0 12px;position:relative;
	font-family:var(--bean-sans);}
.bean_doc-timeline::before{content:"";position:absolute;left:0;top:8px;bottom:8px;
	width:1px;background:var(--bean-line);}
.bean_doc-timeline>li{display:flex;gap:18px;margin-bottom:20px;position:relative;}
.bean_doc-timeline>li::before{content:"";position:absolute;left:-16px;top:8px;
	width:9px;height:9px;border-radius:50%;background:var(--bean-accent);
	box-shadow:0 0 0 3px var(--bean-card);}
.bean_doc-tl-year{flex:0 0 64px;font-size:12.5px;font-weight:800;color:var(--bean-accent);
	letter-spacing:.5px;padding-top:2px;}
.bean_doc-tl-body{flex:1;min-width:0;}
.bean_doc-tl-t{font-size:14.5px;font-weight:700;color:var(--bean-text);}
.bean_doc-tl-d{font-size:13px;color:var(--bean-muted);margin-top:3px;line-height:1.65;}

.bean_doc-faq{margin:24px 0;border:1px solid var(--bean-line);border-radius:10px;overflow:hidden;
	font-family:var(--bean-sans);}
.bean_doc-faq details{border-bottom:1px solid var(--bean-line);background:var(--bean-card);}
.bean_doc-faq details:last-child{border-bottom:0;}
.bean_doc-faq summary{padding:14px 18px;font-size:14px;font-weight:700;color:var(--bean-text);
	cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.bean_doc-faq summary::after{content:"+";font-size:18px;color:var(--bean-muted);
	transition:transform .15s;}
.bean_doc-faq details[open] summary::after{content:"−";}
.bean_doc-faq details>div{padding:0 18px 16px;font-size:13.5px;color:var(--bean-muted);line-height:1.7;}

.bean_doc-spec{width:100%;margin:22px 0;border-collapse:collapse;background:var(--bean-card);
	border:1px solid var(--bean-line);border-radius:10px;overflow:hidden;font-family:var(--bean-sans);}
.bean_doc-spec th,.bean_doc-spec td{padding:12px 16px;font-size:13.5px;text-align:left;
	border-bottom:1px solid var(--bean-line);}
.bean_doc-spec tr:last-child th,.bean_doc-spec tr:last-child td{border-bottom:0;}
.bean_doc-spec th{width:120px;font-weight:700;color:var(--bean-muted);background:var(--bean-surf);}
.bean_doc-spec td{color:var(--bean-text);}

.bean_doc-divider{margin:36px 0;text-align:center;color:var(--bean-muted);font-size:13px;
	letter-spacing:6px;font-family:var(--bean-sans);}
.bean_doc-divider span{display:inline-block;padding:0 10px;}

/* 모바일 — 2열·3열 그리드 1열로 */
@media(max-width:680px){
	.bean_doc-twocol,.bean_doc-stats,.bean_doc-features{grid-template-columns:1fr;}
	.bean_doc-gallery-2x2{grid-template-columns:1fr;}
	.bean_doc-cta{flex-direction:column;align-items:flex-start;text-align:left;}
	.bean_doc-profile{flex-direction:column;align-items:center;text-align:center;}
	.bean_doc-profile-links{justify-content:center;}
	.bean_doc-hero-cover{padding:60px 18px;}
}
/* ============================================================
   BEAN 문서 템플릿 — 비즈니스 웹사이트 메인/서브 페이지용 확장 서식
   ============================================================ */

/* (이전) 풀폭 시도 — Rhymix wrapper 구조상 viewport 끝까지 확장 불가능.
   .bean_doc-fullbleed 는 단순히 부모 폭 100% 로 떨어짐. */
.bean_doc-fullbleed{
	width:100%;
	max-width:100%;
	box-sizing:border-box;
}

/* ───────── 히어로 변형 (10) ───────── */
.bean_doc-hero-split{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;
	margin:36px 0;padding:48px 0;border-top:1px solid var(--bean-line);border-bottom:1px solid var(--bean-line);
	font-family:var(--bean-sans);}
.bean_doc-hero-split-text h1{margin:0 0 14px;font-size:clamp(28px,4.5vw,46px);font-weight:900;
	letter-spacing:-1px;line-height:1.1;color:var(--bean-text);}
.bean_doc-hero-split-text p{margin:0 0 22px;font-size:15px;color:var(--bean-muted);line-height:1.65;}
.bean_doc-hero-split-text a{display:inline-block;padding:13px 26px;border-radius:999px;
	background:var(--bean-accent);color:#fff !important;font-weight:700;font-size:14px;
	text-decoration:none !important;}
.bean_doc-hero-split-img{aspect-ratio:5/4;border-radius:14px;background:var(--bean-surf);
	background-size:cover;background-position:center;border:1px solid var(--bean-line);}

.bean_doc-hero-center{text-align:center;padding:80px 24px;margin:36px 0;
	border-radius:18px;background:linear-gradient(160deg,var(--bean-surf),var(--bean-card));
	font-family:var(--bean-sans);}
.bean_doc-hero-center h1{margin:0 0 16px;font-size:clamp(32px,5.5vw,56px);font-weight:900;
	letter-spacing:-1.5px;line-height:1.05;color:var(--bean-text);}
.bean_doc-hero-center p{margin:0 auto 28px;max-width:560px;font-size:16px;color:var(--bean-muted);line-height:1.7;}
.bean_doc-hero-center .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.bean_doc-hero-center a{padding:14px 28px;border-radius:999px;font-weight:700;font-size:14px;
	text-decoration:none !important;}
.bean_doc-hero-center a.primary{background:var(--bean-accent);color:#fff !important;}
.bean_doc-hero-center a.ghost{border:1px solid var(--bean-line);color:var(--bean-text) !important;}

.bean_doc-hero-gradient{padding:90px 28px;margin:36px 0;border-radius:18px;
	background:linear-gradient(135deg,var(--bean-accent),var(--bean-accent2));
	color:#fff;text-align:center;font-family:var(--bean-sans);}
.bean_doc-hero-gradient h1{margin:0 0 14px;font-size:clamp(32px,5vw,52px);font-weight:900;
	color:#fff;letter-spacing:-1px;}
.bean_doc-hero-gradient p{margin:0 auto;max-width:580px;font-size:16px;color:rgba(255,255,255,.88);}

.bean_doc-hero-minimal{padding:60px 0 30px;border-bottom:1px solid var(--bean-line);
	margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-hero-minimal .eb{font-size:11px;letter-spacing:3px;color:var(--bean-accent);
	font-weight:800;margin-bottom:18px;}
.bean_doc-hero-minimal h1{margin:0;font-size:clamp(34px,5.5vw,60px);font-weight:900;
	letter-spacing:-1.5px;line-height:1;color:var(--bean-text);max-width:780px;}

.bean_doc-hero-stat{margin:36px 0;padding:56px 0;border-top:1px solid var(--bean-line);
	border-bottom:1px solid var(--bean-line);font-family:var(--bean-sans);}
.bean_doc-hero-stat h1{margin:0 0 36px;font-size:clamp(30px,4.5vw,46px);font-weight:900;
	letter-spacing:-1px;color:var(--bean-text);max-width:680px;line-height:1.1;}
.bean_doc-hero-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
	padding-top:30px;border-top:1px solid var(--bean-line);}
.bean_doc-hero-stat-cell .n{font-size:34px;font-weight:900;color:var(--bean-accent);
	letter-spacing:-1px;line-height:1;}
.bean_doc-hero-stat-cell .l{font-size:12.5px;color:var(--bean-muted);margin-top:8px;letter-spacing:.5px;}

.bean_doc-hero-dual{text-align:center;padding:70px 24px;margin:36px 0;
	background:var(--bean-card);border:1px solid var(--bean-line);border-radius:18px;
	font-family:var(--bean-sans);}
.bean_doc-hero-dual h1{margin:0 0 14px;font-size:clamp(28px,4vw,42px);font-weight:900;
	letter-spacing:-.8px;color:var(--bean-text);}
.bean_doc-hero-dual p{margin:0 auto 26px;max-width:520px;font-size:15px;color:var(--bean-muted);}
.bean_doc-hero-dual .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.bean_doc-hero-dual a{padding:13px 26px;border-radius:8px;font-weight:700;font-size:14px;
	text-decoration:none !important;}
.bean_doc-hero-dual a.primary{background:var(--bean-text);color:var(--bean-card) !important;}
.bean_doc-hero-dual a.ghost{border:1px solid var(--bean-text);color:var(--bean-text) !important;}

.bean_doc-hero-pattern{position:relative;padding:80px 28px;margin:36px 0;border-radius:18px;
	background:var(--bean-surf);background-image:
		radial-gradient(color-mix(in srgb,var(--bean-accent) 30%,transparent) 1px,transparent 1px);
	background-size:18px 18px;font-family:var(--bean-sans);text-align:center;}
.bean_doc-hero-pattern h1{margin:0 0 14px;font-size:clamp(30px,4.5vw,46px);font-weight:900;
	color:var(--bean-text);letter-spacing:-1px;}
.bean_doc-hero-pattern p{margin:0 auto;max-width:560px;color:var(--bean-muted);font-size:15px;}

.bean_doc-hero-quote{margin:36px 0;padding:54px 36px;background:var(--bean-card);
	border-left:6px solid var(--bean-accent);border-radius:0 14px 14px 0;font-family:var(--bean-sans);}
.bean_doc-hero-quote p{margin:0 0 18px;font-family:var(--bean-serif);font-style:italic;
	font-size:clamp(22px,3.2vw,32px);font-weight:400;line-height:1.4;color:var(--bean-text);
	letter-spacing:-.4px;}
.bean_doc-hero-quote cite{display:block;font-style:normal;font-size:13px;
	color:var(--bean-muted);letter-spacing:.5px;}

.bean_doc-hero-logo{padding:54px 0;margin:36px 0;border-top:1px solid var(--bean-line);
	border-bottom:1px solid var(--bean-line);font-family:var(--bean-sans);text-align:center;}
.bean_doc-hero-logo h1{margin:0 0 12px;font-size:clamp(28px,4vw,40px);font-weight:900;
	color:var(--bean-text);letter-spacing:-.8px;}
.bean_doc-hero-logo p{margin:0 auto 36px;max-width:480px;color:var(--bean-muted);}
.bean_doc-hero-logo .row{display:flex;justify-content:center;align-items:center;gap:36px;flex-wrap:wrap;opacity:.7;}
.bean_doc-hero-logo .row span{font-size:13px;font-weight:800;color:var(--bean-muted);
	letter-spacing:2px;text-transform:uppercase;}

.bean_doc-hero-banner{padding:60px 28px;margin:36px 0;border-radius:16px;
	background:var(--bean-text);color:var(--bean-card);text-align:center;font-family:var(--bean-sans);}
.bean_doc-hero-banner h1{margin:0 0 12px;font-size:clamp(28px,4vw,40px);font-weight:900;color:var(--bean-card);}
.bean_doc-hero-banner p{margin:0 auto 24px;max-width:560px;color:color-mix(in srgb,var(--bean-card) 75%,transparent);font-size:15px;}
.bean_doc-hero-banner a{display:inline-block;padding:13px 28px;border-radius:999px;
	background:var(--bean-accent);color:#fff !important;font-weight:700;text-decoration:none !important;}

/* ───────── 서비스/특징 카드 (10) ───────── */
.bean_doc-svc3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0;
	font-family:var(--bean-sans);}
.bean_doc-svc3 .item{padding:28px 22px;background:var(--bean-card);border:1px solid var(--bean-line);
	border-radius:12px;}
.bean_doc-svc3 .item .ic{display:flex;align-items:center;justify-content:center;
	width:48px;height:48px;border-radius:12px;background:color-mix(in srgb,var(--bean-accent) 14%,transparent);
	color:var(--bean-accent);font-weight:900;font-size:18px;margin-bottom:18px;}
.bean_doc-svc3 .item h3{margin:0 0 8px;font-size:16px;font-weight:800;color:var(--bean-text);
	letter-spacing:-.2px;}
.bean_doc-svc3 .item p{margin:0;font-size:13.5px;color:var(--bean-muted);line-height:1.7;}

.bean_doc-svc4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0;
	font-family:var(--bean-sans);}
.bean_doc-svc4 .item{padding:22px 18px;text-align:center;border:1px solid var(--bean-line);
	border-radius:12px;background:var(--bean-card);}
.bean_doc-svc4 .item .ic{display:inline-flex;align-items:center;justify-content:center;
	width:40px;height:40px;border-radius:10px;background:var(--bean-accent);color:#fff;
	font-weight:900;margin-bottom:12px;}
.bean_doc-svc4 .item h3{margin:0 0 6px;font-size:14.5px;font-weight:800;color:var(--bean-text);}
.bean_doc-svc4 .item p{margin:0;font-size:12.5px;color:var(--bean-muted);line-height:1.6;}

.bean_doc-svc-alt{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-svc-alt>.row{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
	padding:36px 0;border-bottom:1px solid var(--bean-line);}
.bean_doc-svc-alt>.row:last-child{border-bottom:0;}
.bean_doc-svc-alt>.row:nth-child(even) .img{order:-1;}
.bean_doc-svc-alt .img{aspect-ratio:4/3;border-radius:12px;background:var(--bean-surf);
	background-size:cover;background-position:center;}
.bean_doc-svc-alt .txt h3{margin:0 0 10px;font-size:22px;font-weight:800;color:var(--bean-text);letter-spacing:-.3px;}
.bean_doc-svc-alt .txt p{margin:0 0 14px;color:var(--bean-muted);font-size:14px;line-height:1.7;}
.bean_doc-svc-alt .txt a{color:var(--bean-accent) !important;font-weight:700;font-size:13px;
	text-decoration:none !important;}

.bean_doc-svc-dark{padding:48px 36px;margin:30px 0;border-radius:14px;
	background:#0f0c18;color:#f1eef8;font-family:var(--bean-sans);}
.bean_doc-svc-dark h2{margin:0 0 30px;font-size:24px;font-weight:900;color:#fff;letter-spacing:-.4px;}
.bean_doc-svc-dark .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.bean_doc-svc-dark .item{padding:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
	border-radius:10px;}
.bean_doc-svc-dark .item h3{margin:0 0 8px;font-size:15px;font-weight:800;color:#fff;}
.bean_doc-svc-dark .item p{margin:0;font-size:13px;color:rgba(255,255,255,.65);line-height:1.6;}

.bean_doc-svc2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:30px 0;
	font-family:var(--bean-sans);}
.bean_doc-svc2 .item{padding:36px 28px;text-align:center;border:1px solid var(--bean-line);
	border-radius:14px;background:var(--bean-card);}
.bean_doc-svc2 .item h3{margin:14px 0 10px;font-size:18px;font-weight:800;color:var(--bean-text);letter-spacing:-.3px;}
.bean_doc-svc2 .item p{margin:0;color:var(--bean-muted);font-size:13.5px;line-height:1.7;}

.bean_doc-svc-stack{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-svc-stack .item{display:grid;grid-template-columns:60px 1fr;gap:18px;padding:22px 0;
	border-bottom:1px solid var(--bean-line);}
.bean_doc-svc-stack .item:last-child{border-bottom:0;}
.bean_doc-svc-stack .num{font-size:32px;font-weight:900;color:var(--bean-accent);
	letter-spacing:-.5px;line-height:1;}
.bean_doc-svc-stack h3{margin:0 0 6px;font-size:17px;font-weight:800;color:var(--bean-text);letter-spacing:-.2px;}
.bean_doc-svc-stack p{margin:0;font-size:13.5px;color:var(--bean-muted);line-height:1.7;}

.bean_doc-svc-bordered{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:30px 0;
	border:1px solid var(--bean-line);border-radius:14px;overflow:hidden;font-family:var(--bean-sans);}
.bean_doc-svc-bordered .item{padding:30px 24px;border-right:1px solid var(--bean-line);background:var(--bean-card);}
.bean_doc-svc-bordered .item:last-child{border-right:0;}
.bean_doc-svc-bordered .item h3{margin:0 0 10px;font-size:16px;font-weight:800;color:var(--bean-text);letter-spacing:-.2px;}
.bean_doc-svc-bordered .item p{margin:0;font-size:13px;color:var(--bean-muted);line-height:1.65;}

.bean_doc-svc-hover{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-svc-hover .item{padding:26px 22px;background:var(--bean-card);border:1px solid var(--bean-line);
	border-radius:12px;transition:.18s;}
.bean_doc-svc-hover .item:hover{transform:translateY(-4px);border-color:var(--bean-accent);
	box-shadow:0 14px 30px color-mix(in srgb,var(--bean-accent) 16%,transparent);}
.bean_doc-svc-hover h3{margin:0 0 8px;font-size:15.5px;font-weight:800;color:var(--bean-text);letter-spacing:-.2px;}
.bean_doc-svc-hover p{margin:0;font-size:13px;color:var(--bean-muted);line-height:1.65;}

.bean_doc-svc-link{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-svc-link .item{display:flex;justify-content:space-between;align-items:center;gap:14px;
	padding:22px 24px;background:var(--bean-card);border:1px solid var(--bean-line);
	border-radius:10px;text-decoration:none !important;color:var(--bean-text);transition:.15s;}
.bean_doc-svc-link .item:hover{border-color:var(--bean-accent);background:var(--bean-surf);}
.bean_doc-svc-link .item .body h3{margin:0 0 4px;font-size:15px;font-weight:800;color:var(--bean-text);}
.bean_doc-svc-link .item .body p{margin:0;font-size:12.5px;color:var(--bean-muted);}
.bean_doc-svc-link .item .arrow{flex:0 0 auto;color:var(--bean-accent);font-size:18px;}

.bean_doc-svc-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-svc-5 .item{padding:18px 14px;text-align:center;border:1px solid var(--bean-line);
	border-radius:10px;background:var(--bean-card);}
.bean_doc-svc-5 .item .ic{width:36px;height:36px;margin:0 auto 10px;border-radius:8px;
	background:color-mix(in srgb,var(--bean-accent) 16%,transparent);
	display:flex;align-items:center;justify-content:center;color:var(--bean-accent);font-weight:900;font-size:14px;}
.bean_doc-svc-5 .item h3{margin:0 0 4px;font-size:13px;font-weight:800;color:var(--bean-text);}
.bean_doc-svc-5 .item p{margin:0;font-size:11.5px;color:var(--bean-muted);line-height:1.5;}

/* ───────── 가격 (5) ───────── */
.bean_doc-price3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-price3 .plan{padding:32px 24px;background:var(--bean-card);border:1px solid var(--bean-line);
	border-radius:14px;display:flex;flex-direction:column;}
.bean_doc-price3 .plan.featured{border-color:var(--bean-accent);
	box-shadow:0 10px 30px color-mix(in srgb,var(--bean-accent) 16%,transparent);}
.bean_doc-price3 .plan .nm{font-size:13px;font-weight:800;color:var(--bean-accent);letter-spacing:1px;text-transform:uppercase;}
.bean_doc-price3 .plan .pr{margin:14px 0 4px;font-size:36px;font-weight:900;color:var(--bean-text);letter-spacing:-1px;line-height:1;}
.bean_doc-price3 .plan .pr small{font-size:14px;font-weight:600;color:var(--bean-muted);margin-left:4px;}
.bean_doc-price3 .plan .desc{font-size:13px;color:var(--bean-muted);margin-bottom:20px;}
.bean_doc-price3 .plan ul{list-style:none;padding:0;margin:0 0 22px;flex:1;}
.bean_doc-price3 .plan li{padding:7px 0;font-size:13px;color:var(--bean-text);border-bottom:1px solid var(--bean-line);}
.bean_doc-price3 .plan li:last-child{border-bottom:0;}
.bean_doc-price3 .plan a{display:block;padding:12px;border-radius:8px;text-align:center;
	font-weight:700;font-size:13.5px;text-decoration:none !important;}
.bean_doc-price3 .plan a.primary{background:var(--bean-accent);color:#fff !important;}
.bean_doc-price3 .plan a.ghost{border:1px solid var(--bean-line);color:var(--bean-text) !important;}

.bean_doc-price-cmp{margin:30px 0;border:1px solid var(--bean-line);border-radius:12px;overflow:hidden;
	font-family:var(--bean-sans);}
.bean_doc-price-cmp table{width:100%;border-collapse:collapse;}
.bean_doc-price-cmp th,.bean_doc-price-cmp td{padding:14px 18px;text-align:left;font-size:13.5px;
	border-bottom:1px solid var(--bean-line);}
.bean_doc-price-cmp th{background:var(--bean-surf);font-weight:800;color:var(--bean-text);}
.bean_doc-price-cmp td{color:var(--bean-text);}
.bean_doc-price-cmp tr:last-child td{border-bottom:0;}
.bean_doc-price-cmp .yes{color:var(--bean-accent);font-weight:800;}
.bean_doc-price-cmp .no{color:var(--bean-muted);}

.bean_doc-price2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-price2 .plan{padding:36px 30px;border-radius:14px;}
.bean_doc-price2 .plan.basic{background:var(--bean-card);border:1px solid var(--bean-line);}
.bean_doc-price2 .plan.pro{background:linear-gradient(160deg,var(--bean-accent),var(--bean-accent2));color:#fff;}
.bean_doc-price2 .plan h3{margin:0 0 8px;font-size:18px;font-weight:800;letter-spacing:-.2px;color:inherit;}
.bean_doc-price2 .plan .pr{margin:0 0 18px;font-size:42px;font-weight:900;letter-spacing:-1px;line-height:1;color:inherit;}
.bean_doc-price2 .plan .pr small{font-size:14px;opacity:.7;}
.bean_doc-price2 .plan ul{list-style:none;padding:0;margin:0 0 22px;font-size:13.5px;line-height:2;color:inherit;}
.bean_doc-price2 .plan a{display:inline-block;padding:11px 22px;border-radius:999px;font-weight:700;text-decoration:none !important;}
.bean_doc-price2 .basic a{background:var(--bean-text);color:var(--bean-card) !important;}
.bean_doc-price2 .pro a{background:#fff;color:var(--bean-accent) !important;}

.bean_doc-price-simple{margin:30px 0;padding:36px 28px;text-align:center;
	background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px;font-family:var(--bean-sans);}
.bean_doc-price-simple .nm{font-size:13px;font-weight:800;color:var(--bean-accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px;}
.bean_doc-price-simple .pr{font-size:54px;font-weight:900;color:var(--bean-text);letter-spacing:-2px;line-height:1;}
.bean_doc-price-simple .pr small{font-size:18px;font-weight:600;color:var(--bean-muted);}
.bean_doc-price-simple p{margin:14px 0 20px;color:var(--bean-muted);font-size:14px;}
.bean_doc-price-simple a{display:inline-block;padding:14px 36px;border-radius:999px;
	background:var(--bean-accent);color:#fff !important;font-weight:700;text-decoration:none !important;}

.bean_doc-price-tier{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:30px 0;
	border:1px solid var(--bean-line);border-radius:14px;overflow:hidden;font-family:var(--bean-sans);}
.bean_doc-price-tier .plan{padding:30px 22px;text-align:center;border-right:1px solid var(--bean-line);background:var(--bean-card);}
.bean_doc-price-tier .plan:last-child{border-right:0;}
.bean_doc-price-tier .plan.highlight{background:var(--bean-surf);}
.bean_doc-price-tier .nm{font-size:12px;font-weight:800;letter-spacing:1px;color:var(--bean-accent);text-transform:uppercase;margin-bottom:10px;}
.bean_doc-price-tier .pr{font-size:30px;font-weight:900;color:var(--bean-text);letter-spacing:-.8px;}
.bean_doc-price-tier .pr small{font-size:13px;color:var(--bean-muted);}
.bean_doc-price-tier .desc{margin:8px 0 0;font-size:12px;color:var(--bean-muted);}

/* ───────── 후기/Testimonials (5) ───────── */
.bean_doc-quote-card{margin:30px 0;padding:36px 32px;background:var(--bean-card);
	border:1px solid var(--bean-line);border-radius:14px;font-family:var(--bean-sans);}
.bean_doc-quote-card .stars{color:var(--bean-accent);letter-spacing:3px;margin-bottom:14px;font-size:14px;}
.bean_doc-quote-card p{margin:0 0 22px;font-size:17px;font-weight:500;color:var(--bean-text);line-height:1.7;letter-spacing:-.2px;}
.bean_doc-quote-card .who{display:flex;align-items:center;gap:12px;}
.bean_doc-quote-card .av{width:42px;height:42px;border-radius:50%;background:var(--bean-surf);background-size:cover;}
.bean_doc-quote-card .name{font-size:13px;font-weight:800;color:var(--bean-text);}
.bean_doc-quote-card .role{font-size:11.5px;color:var(--bean-muted);}

.bean_doc-quote-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-quote-3 .item{padding:22px;background:var(--bean-card);border:1px solid var(--bean-line);border-radius:10px;}
.bean_doc-quote-3 .item p{margin:0 0 14px;font-size:13.5px;color:var(--bean-text);line-height:1.7;}
.bean_doc-quote-3 .item .name{font-size:12.5px;font-weight:800;color:var(--bean-text);}
.bean_doc-quote-3 .item .role{font-size:11px;color:var(--bean-muted);margin-top:2px;}

.bean_doc-quote-big{margin:36px 0;padding:60px 36px;background:var(--bean-surf);
	border-radius:14px;text-align:center;font-family:var(--bean-sans);}
.bean_doc-quote-big p{margin:0 auto 20px;max-width:680px;font-family:var(--bean-serif);
	font-style:italic;font-size:clamp(20px,2.8vw,28px);font-weight:400;line-height:1.5;color:var(--bean-text);}
.bean_doc-quote-big cite{display:block;font-style:normal;font-size:13px;font-weight:800;color:var(--bean-accent);letter-spacing:1px;}

.bean_doc-quote-stack{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-quote-stack .item{padding:24px 0;border-bottom:1px dashed var(--bean-line);}
.bean_doc-quote-stack .item:last-child{border-bottom:0;}
.bean_doc-quote-stack .item p{margin:0 0 10px;font-size:15px;color:var(--bean-text);line-height:1.7;}
.bean_doc-quote-stack .item .who{font-size:12px;color:var(--bean-muted);}

.bean_doc-quote-photo{margin:30px 0;display:grid;grid-template-columns:240px 1fr;gap:28px;
	align-items:center;padding:28px;background:var(--bean-card);border:1px solid var(--bean-line);
	border-radius:14px;font-family:var(--bean-sans);}
.bean_doc-quote-photo .ph{aspect-ratio:1/1;border-radius:14px;background:var(--bean-surf);background-size:cover;}
.bean_doc-quote-photo p{margin:0 0 14px;font-size:17px;color:var(--bean-text);line-height:1.65;}
.bean_doc-quote-photo .name{font-size:13.5px;font-weight:800;color:var(--bean-text);}
.bean_doc-quote-photo .role{font-size:12px;color:var(--bean-muted);margin-top:2px;}

/* ───────── 팀/멤버 (5) ───────── */
.bean_doc-team4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-team4 .member{text-align:center;}
.bean_doc-team4 .ph{aspect-ratio:3/4;border-radius:12px;background:var(--bean-surf);background-size:cover;background-position:center top;margin-bottom:14px;}
.bean_doc-team4 .name{font-size:15px;font-weight:800;color:var(--bean-text);letter-spacing:-.2px;}
.bean_doc-team4 .role{font-size:11.5px;color:var(--bean-muted);margin-top:3px;letter-spacing:1px;text-transform:uppercase;}

.bean_doc-team-card{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-team-card .member{padding:24px;background:var(--bean-card);border:1px solid var(--bean-line);border-radius:12px;text-align:center;}
.bean_doc-team-card .ph{width:90px;height:90px;border-radius:50%;margin:0 auto 14px;background:var(--bean-surf);background-size:cover;}
.bean_doc-team-card .name{font-size:15px;font-weight:800;color:var(--bean-text);}
.bean_doc-team-card .role{font-size:11.5px;color:var(--bean-accent);margin-top:3px;letter-spacing:.5px;text-transform:uppercase;}
.bean_doc-team-card .bio{margin:10px 0 0;font-size:12.5px;color:var(--bean-muted);line-height:1.6;}

.bean_doc-team-row{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-team-row .member{display:grid;grid-template-columns:100px 1fr;gap:20px;padding:20px 0;
	border-bottom:1px solid var(--bean-line);align-items:center;}
.bean_doc-team-row .member:last-child{border-bottom:0;}
.bean_doc-team-row .ph{width:100px;height:100px;border-radius:14px;background:var(--bean-surf);background-size:cover;}
.bean_doc-team-row .name{font-size:17px;font-weight:800;color:var(--bean-text);}
.bean_doc-team-row .role{font-size:12px;color:var(--bean-muted);margin:2px 0 8px;letter-spacing:.5px;text-transform:uppercase;}
.bean_doc-team-row .bio{font-size:13px;color:var(--bean-muted);line-height:1.6;}

.bean_doc-team-strip{display:flex;justify-content:center;gap:36px;margin:30px 0;
	padding:28px 0;border-top:1px solid var(--bean-line);border-bottom:1px solid var(--bean-line);
	flex-wrap:wrap;font-family:var(--bean-sans);}
.bean_doc-team-strip .member{text-align:center;}
.bean_doc-team-strip .ph{width:70px;height:70px;border-radius:50%;background:var(--bean-surf);background-size:cover;margin:0 auto 10px;}
.bean_doc-team-strip .name{font-size:12.5px;font-weight:800;color:var(--bean-text);}
.bean_doc-team-strip .role{font-size:10.5px;color:var(--bean-muted);margin-top:2px;}

/* ───────── 프로세스 (5) ───────── */
.bean_doc-proc-h{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px 0;
	position:relative;font-family:var(--bean-sans);}
.bean_doc-proc-h::before{content:"";position:absolute;top:24px;left:24px;right:24px;height:1px;background:var(--bean-line);z-index:0;}
.bean_doc-proc-h .step{position:relative;text-align:center;background:var(--bean-bg);padding:0 14px;z-index:1;}
.bean_doc-proc-h .n{width:48px;height:48px;border-radius:50%;background:var(--bean-accent);color:#fff;
	font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.bean_doc-proc-h h3{margin:0 0 6px;font-size:14.5px;font-weight:800;color:var(--bean-text);}
.bean_doc-proc-h p{margin:0;font-size:12.5px;color:var(--bean-muted);line-height:1.6;}

.bean_doc-proc-v{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-proc-v .step{display:grid;grid-template-columns:48px 1fr;gap:22px;padding-bottom:30px;position:relative;}
.bean_doc-proc-v .step:not(:last-child)::after{content:"";position:absolute;left:23px;top:48px;bottom:6px;width:1px;background:var(--bean-line);}
.bean_doc-proc-v .n{width:48px;height:48px;border-radius:50%;background:var(--bean-accent);color:#fff;
	font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;}
.bean_doc-proc-v .body h3{margin:10px 0 6px;font-size:16px;font-weight:800;color:var(--bean-text);}
.bean_doc-proc-v .body p{margin:0;font-size:13.5px;color:var(--bean-muted);line-height:1.7;}

.bean_doc-proc-arrow{display:flex;gap:0;margin:30px 0;font-family:var(--bean-sans);flex-wrap:wrap;}
.bean_doc-proc-arrow .step{flex:1;min-width:160px;position:relative;padding:18px 24px 18px 36px;
	background:var(--bean-card);border:1px solid var(--bean-line);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);
	margin-right:-12px;}
.bean_doc-proc-arrow .step:first-child{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);padding-left:22px;}
.bean_doc-proc-arrow .step:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%);margin-right:0;}
.bean_doc-proc-arrow .n{font-size:11px;font-weight:800;color:var(--bean-accent);letter-spacing:1px;}
.bean_doc-proc-arrow h3{margin:4px 0 0;font-size:13.5px;font-weight:800;color:var(--bean-text);}

.bean_doc-proc-circle{margin:30px 0;text-align:center;font-family:var(--bean-sans);}
.bean_doc-proc-circle .row{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;}
.bean_doc-proc-circle .step{flex:0 0 180px;}
.bean_doc-proc-circle .circle{width:120px;height:120px;border-radius:50%;border:2px solid var(--bean-accent);
	margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:var(--bean-accent);}
.bean_doc-proc-circle h3{margin:0 0 6px;font-size:14px;font-weight:800;color:var(--bean-text);}
.bean_doc-proc-circle p{margin:0;font-size:12px;color:var(--bean-muted);line-height:1.55;}

.bean_doc-proc-tab{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-proc-tab .row{display:flex;border-bottom:2px solid var(--bean-line);margin-bottom:24px;flex-wrap:wrap;}
.bean_doc-proc-tab .row .step{flex:1;padding:14px 18px;text-align:center;font-size:13px;font-weight:800;color:var(--bean-muted);
	border-bottom:2px solid transparent;margin-bottom:-2px;}
.bean_doc-proc-tab .row .step.on{color:var(--bean-accent);border-bottom-color:var(--bean-accent);}
.bean_doc-proc-tab .body{padding:24px;background:var(--bean-card);border:1px solid var(--bean-line);border-radius:12px;}
.bean_doc-proc-tab .body h3{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--bean-text);}
.bean_doc-proc-tab .body p{margin:0;font-size:14px;color:var(--bean-muted);line-height:1.7;}

/* ───────── 통계/Stats (3) ───────── */
.bean_doc-stat-band{padding:48px 24px;margin:30px 0;background:var(--bean-text);color:var(--bean-card);
	border-radius:14px;font-family:var(--bean-sans);}
.bean_doc-stat-band .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.bean_doc-stat-band .n{font-size:38px;font-weight:900;color:var(--bean-accent);letter-spacing:-1px;line-height:1;}
.bean_doc-stat-band .l{font-size:12.5px;color:color-mix(in srgb,var(--bean-card) 70%,transparent);margin-top:8px;letter-spacing:.5px;}

.bean_doc-stat-big{margin:30px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;font-family:var(--bean-sans);}
.bean_doc-stat-big .cell{padding:36px 32px;border-radius:14px;background:var(--bean-card);border:1px solid var(--bean-line);}
.bean_doc-stat-big .n{font-size:54px;font-weight:900;color:var(--bean-accent);letter-spacing:-2px;line-height:1;}
.bean_doc-stat-big .l{margin-top:14px;font-size:14px;color:var(--bean-text);font-weight:600;}
.bean_doc-stat-big .d{margin-top:6px;font-size:12px;color:var(--bean-muted);}

.bean_doc-stat-inline{display:flex;gap:36px;margin:30px 0;padding:24px 28px;
	border-left:4px solid var(--bean-accent);background:var(--bean-surf);border-radius:0 10px 10px 0;
	font-family:var(--bean-sans);flex-wrap:wrap;}
.bean_doc-stat-inline .cell{flex:1;min-width:120px;}
.bean_doc-stat-inline .n{font-size:24px;font-weight:900;color:var(--bean-text);letter-spacing:-.6px;line-height:1;}
.bean_doc-stat-inline .l{font-size:12px;color:var(--bean-muted);margin-top:6px;letter-spacing:.3px;}

/* ───────── CTA 추가 (3) ───────── */
.bean_doc-cta-big{padding:80px 36px;margin:36px 0;border-radius:18px;text-align:center;
	background:linear-gradient(135deg,var(--bean-accent),var(--bean-accent2));color:#fff;font-family:var(--bean-sans);}
.bean_doc-cta-big h3{margin:0 0 14px;font-size:clamp(28px,4vw,42px);font-weight:900;color:#fff;letter-spacing:-.8px;line-height:1.15;}
.bean_doc-cta-big p{margin:0 auto 28px;max-width:560px;font-size:16px;color:rgba(255,255,255,.85);line-height:1.6;}
.bean_doc-cta-big a{display:inline-block;padding:15px 36px;border-radius:999px;background:#fff;color:var(--bean-accent) !important;font-weight:800;font-size:15px;text-decoration:none !important;}

.bean_doc-cta-split{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:center;
	margin:30px 0;padding:32px 36px;background:var(--bean-card);border:1px solid var(--bean-line);
	border-radius:14px;font-family:var(--bean-sans);}
.bean_doc-cta-split h3{margin:0 0 8px;font-size:22px;font-weight:800;color:var(--bean-text);letter-spacing:-.3px;}
.bean_doc-cta-split p{margin:0;font-size:14px;color:var(--bean-muted);line-height:1.65;}
.bean_doc-cta-split .right{text-align:right;}
.bean_doc-cta-split a{display:inline-block;padding:13px 26px;border-radius:8px;background:var(--bean-accent);color:#fff !important;font-weight:700;text-decoration:none !important;}

.bean_doc-cta-mini{padding:22px 26px;margin:24px 0;border:1px dashed var(--bean-accent);border-radius:10px;
	display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:var(--bean-sans);flex-wrap:wrap;}
.bean_doc-cta-mini p{margin:0;font-size:14px;color:var(--bean-text);font-weight:600;}
.bean_doc-cta-mini a{color:var(--bean-accent) !important;font-weight:800;text-decoration:none !important;font-size:13.5px;}

/* ───────── 파트너/로고 (3) ───────── */
.bean_doc-partners{margin:30px 0;padding:36px 0;border-top:1px solid var(--bean-line);border-bottom:1px solid var(--bean-line);text-align:center;font-family:var(--bean-sans);}
.bean_doc-partners .title{font-size:11px;letter-spacing:3px;color:var(--bean-muted);font-weight:800;margin-bottom:24px;text-transform:uppercase;}
.bean_doc-partners .row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap;opacity:.7;}
.bean_doc-partners .row span{font-size:18px;font-weight:800;color:var(--bean-text);letter-spacing:1px;}

.bean_doc-partners-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:30px 0;
	border:1px solid var(--bean-line);border-radius:14px;overflow:hidden;font-family:var(--bean-sans);}
.bean_doc-partners-grid .item{padding:30px 16px;text-align:center;border-right:1px solid var(--bean-line);
	border-bottom:1px solid var(--bean-line);background:var(--bean-card);font-size:14px;font-weight:800;color:var(--bean-muted);letter-spacing:.5px;}
.bean_doc-partners-grid .item:nth-child(6n){border-right:0;}
.bean_doc-partners-grid .item:nth-last-child(-n+6){border-bottom:0;}

.bean_doc-partners-scroll{margin:30px 0;padding:30px 0;background:var(--bean-surf);border-radius:12px;overflow:hidden;font-family:var(--bean-sans);}
.bean_doc-partners-scroll .row{display:flex;gap:60px;justify-content:center;align-items:center;flex-wrap:wrap;padding:0 30px;}
.bean_doc-partners-scroll .row span{font-size:16px;font-weight:800;color:var(--bean-muted);letter-spacing:1.5px;}

/* ───────── 섹션 헤더/footer (5) ───────── */
.bean_doc-section-head{margin:36px 0 26px;padding-bottom:18px;border-bottom:2px solid var(--bean-text);
	display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;font-family:var(--bean-sans);}
.bean_doc-section-head h2{margin:0;font-size:clamp(22px,3vw,30px);font-weight:900;color:var(--bean-text);letter-spacing:-.5px;}
.bean_doc-section-head a{color:var(--bean-accent) !important;font-weight:700;font-size:13px;text-decoration:none !important;}

.bean_doc-section-center{margin:36px 0 26px;text-align:center;font-family:var(--bean-sans);}
.bean_doc-section-center .eb{font-size:11px;font-weight:800;letter-spacing:3px;color:var(--bean-accent);margin-bottom:12px;text-transform:uppercase;}
.bean_doc-section-center h2{margin:0 0 12px;font-size:clamp(24px,3.5vw,34px);font-weight:900;color:var(--bean-text);letter-spacing:-.6px;}
.bean_doc-section-center p{margin:0 auto;max-width:580px;font-size:14px;color:var(--bean-muted);line-height:1.7;}

.bean_doc-divider-line{margin:48px 0;height:1px;background:var(--bean-line);position:relative;}
.bean_doc-divider-line span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	padding:0 18px;background:var(--bean-bg);font-size:11px;letter-spacing:3px;color:var(--bean-muted);font-weight:800;text-transform:uppercase;}

.bean_doc-page-footer{margin:48px 0 0;padding:32px 0;border-top:1px solid var(--bean-line);
	display:grid;grid-template-columns:repeat(4,1fr);gap:24px;font-family:var(--bean-sans);}
.bean_doc-page-footer h4{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:1px;color:var(--bean-text);text-transform:uppercase;}
.bean_doc-page-footer ul{list-style:none;padding:0;margin:0;}
.bean_doc-page-footer li{padding:4px 0;font-size:13px;color:var(--bean-muted);}
.bean_doc-page-footer li a{color:var(--bean-muted) !important;text-decoration:none !important;}
.bean_doc-page-footer li a:hover{color:var(--bean-accent) !important;}

.bean_doc-contact-bar{margin:30px 0;padding:24px 28px;border-radius:12px;background:var(--bean-surf);
	display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-family:var(--bean-sans);}
.bean_doc-contact-bar .info{font-size:13px;color:var(--bean-text);}
.bean_doc-contact-bar .info b{font-weight:800;color:var(--bean-text);}
.bean_doc-contact-bar .info span{color:var(--bean-muted);margin-left:8px;}
.bean_doc-contact-bar a{padding:11px 22px;border-radius:8px;background:var(--bean-accent);color:#fff !important;font-weight:700;text-decoration:none !important;font-size:13.5px;}

/* ───────── 반응형 ───────── */
@media(max-width:900px){
	.bean_doc-hero-split{grid-template-columns:1fr;gap:24px;padding:36px 0;}
	.bean_doc-hero-stat-row{grid-template-columns:repeat(3,1fr);gap:20px;}
	.bean_doc-svc3,.bean_doc-svc4,.bean_doc-svc-hover,.bean_doc-svc-bordered,.bean_doc-svc-link,.bean_doc-svc-5,
	.bean_doc-svc-dark .grid,.bean_doc-price3,.bean_doc-price-tier,.bean_doc-team4,.bean_doc-team-card,
	.bean_doc-quote-3,.bean_doc-proc-h,.bean_doc-stat-band .grid,.bean_doc-partners-grid{grid-template-columns:repeat(2,1fr);}
	.bean_doc-svc-bordered .item,.bean_doc-svc-bordered .item:last-child{border-right:0;border-bottom:1px solid var(--bean-line);}
	.bean_doc-page-footer{grid-template-columns:repeat(2,1fr);}
	.bean_doc-svc-alt>.row{grid-template-columns:1fr;}
	.bean_doc-svc-alt>.row:nth-child(even) .img{order:0;}
	.bean_doc-quote-photo{grid-template-columns:1fr;text-align:center;}
	.bean_doc-cta-split{grid-template-columns:1fr;text-align:center;}.bean_doc-cta-split .right{text-align:center;}
}
@media(max-width:580px){
	.bean_doc-hero-stat-row,.bean_doc-svc3,.bean_doc-svc4,.bean_doc-svc-hover,.bean_doc-svc-bordered,.bean_doc-svc-link,.bean_doc-svc-5,
	.bean_doc-svc-dark .grid,.bean_doc-price3,.bean_doc-price-tier,.bean_doc-team4,.bean_doc-team-card,
	.bean_doc-quote-3,.bean_doc-proc-h,.bean_doc-stat-band .grid,.bean_doc-partners-grid,.bean_doc-page-footer{grid-template-columns:1fr;}
	.bean_doc-proc-h::before{display:none;}
	.bean_doc-stat-big{grid-template-columns:1fr;}
}
/* ============================================================
   비즈니스 확장 (40종) — 프로필 · 인물 소개 페이지 · 가격표 · 인물 리스트
   ============================================================ */

/* ───────── 프로필 (10) — 개인 1명 ───────── */
.bean_doc-pf-v{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 22px;margin:24px 0;
	background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px;font-family:var(--bean-sans);}
.bean_doc-pf-v .ph{width:140px;height:140px;border-radius:50%;background:var(--bean-surf);background-size:cover;
	background-position:center;margin-bottom:18px;border:3px solid var(--bean-card);box-shadow:0 4px 14px color-mix(in srgb,var(--bean-text) 10%,transparent);}
.bean_doc-pf-v .name{font-size:22px;font-weight:900;color:var(--bean-text);letter-spacing:-.4px;}
.bean_doc-pf-v .role{font-size:12px;font-weight:700;color:var(--bean-accent);letter-spacing:1.5px;text-transform:uppercase;margin-top:6px;}
.bean_doc-pf-v .bio{margin:18px auto 0;max-width:480px;color:var(--bean-muted);font-size:14px;line-height:1.7;}
.bean_doc-pf-v .links{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap;justify-content:center;}
.bean_doc-pf-v .links a{color:var(--bean-accent) !important;font-weight:600;font-size:12.5px;}

.bean_doc-pf-h{display:grid;grid-template-columns:130px 1fr;gap:24px;align-items:center;padding:24px;margin:24px 0;
	background:var(--bean-card);border:1px solid var(--bean-line);border-radius:12px;font-family:var(--bean-sans);}
.bean_doc-pf-h .ph{width:130px;height:130px;border-radius:14px;background:var(--bean-surf);background-size:cover;background-position:center;}
.bean_doc-pf-h .name{font-size:20px;font-weight:900;color:var(--bean-text);letter-spacing:-.3px;}
.bean_doc-pf-h .role{font-size:11.5px;font-weight:700;color:var(--bean-accent);letter-spacing:1.2px;text-transform:uppercase;margin-top:4px;}
.bean_doc-pf-h .bio{margin-top:10px;color:var(--bean-muted);font-size:13.5px;line-height:1.65;}

.bean_doc-pf-min{display:flex;align-items:center;gap:14px;padding:14px 0;margin:18px 0;font-family:var(--bean-sans);}
.bean_doc-pf-min .ph{width:54px;height:54px;border-radius:50%;background:var(--bean-surf);background-size:cover;flex:0 0 auto;}
.bean_doc-pf-min .name{font-size:15px;font-weight:800;color:var(--bean-text);}
.bean_doc-pf-min .role{font-size:11.5px;color:var(--bean-muted);margin-top:2px;}

.bean_doc-pf-bio{display:grid;grid-template-columns:1fr 2fr;gap:36px;margin:30px 0;padding:36px;
	background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px;font-family:var(--bean-sans);align-items:start;}
.bean_doc-pf-bio .ph{aspect-ratio:4/5;border-radius:12px;background:var(--bean-surf);background-size:cover;background-position:center top;}
.bean_doc-pf-bio .name{font-size:28px;font-weight:900;color:var(--bean-text);letter-spacing:-.6px;}
.bean_doc-pf-bio .role{font-size:12px;font-weight:800;color:var(--bean-accent);letter-spacing:1.5px;text-transform:uppercase;margin-top:6px;}
.bean_doc-pf-bio .bio-body{margin-top:18px;color:var(--bean-muted);font-size:14.5px;line-height:1.75;}
.bean_doc-pf-bio .bio-body p{margin:0 0 12px;}

.bean_doc-pf-celeb{position:relative;margin:30px 0;padding:0;border-radius:18px;overflow:hidden;background:#000;
	font-family:var(--bean-sans);min-height:480px;display:flex;align-items:flex-end;}
.bean_doc-pf-celeb .cover{position:absolute;inset:0;background-size:cover;background-position:center;}
.bean_doc-pf-celeb .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85) 100%);}
.bean_doc-pf-celeb .info{position:relative;padding:36px;color:#fff;z-index:1;}
.bean_doc-pf-celeb .eb{font-size:11px;letter-spacing:3px;color:#fff;opacity:.8;font-weight:800;}
.bean_doc-pf-celeb .name{font-size:clamp(28px,4vw,42px);font-weight:900;color:#fff;letter-spacing:-.8px;margin-top:8px;}
.bean_doc-pf-celeb .role{font-size:13px;color:rgba(255,255,255,.85);margin-top:6px;letter-spacing:.5px;}

.bean_doc-pf-exec{margin:30px 0;padding:36px;background:var(--bean-surf);border-radius:14px;font-family:var(--bean-sans);}
.bean_doc-pf-exec .top{display:flex;gap:24px;align-items:center;margin-bottom:24px;}
.bean_doc-pf-exec .ph{width:100px;height:100px;border-radius:50%;background:var(--bean-card);background-size:cover;flex:0 0 auto;}
.bean_doc-pf-exec .name{font-size:22px;font-weight:900;color:var(--bean-text);letter-spacing:-.3px;}
.bean_doc-pf-exec .role{font-size:13px;color:var(--bean-accent);font-weight:700;margin-top:4px;letter-spacing:.5px;}
.bean_doc-pf-exec p{margin:0 0 12px;color:var(--bean-text);font-size:14px;line-height:1.75;}
.bean_doc-pf-exec ul{margin:14px 0 0;padding-left:20px;color:var(--bean-muted);font-size:13.5px;line-height:1.9;}

.bean_doc-pf-artist{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-pf-artist .hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:30px;
	background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px;}
.bean_doc-pf-artist .hero .ph{aspect-ratio:1/1;border-radius:12px;background:var(--bean-surf);background-size:cover;}
.bean_doc-pf-artist .hero .eb{font-size:11px;letter-spacing:3px;color:var(--bean-accent);font-weight:800;}
.bean_doc-pf-artist .hero .name{font-size:34px;font-weight:900;color:var(--bean-text);letter-spacing:-1px;margin-top:8px;}
.bean_doc-pf-artist .hero .role{font-size:13px;color:var(--bean-muted);margin-top:6px;}
.bean_doc-pf-artist .hero .bio{margin-top:16px;color:var(--bean-muted);font-size:14px;line-height:1.7;}
.bean_doc-pf-artist .discog{margin-top:24px;}
.bean_doc-pf-artist .discog h3{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--bean-muted);text-transform:uppercase;}
.bean_doc-pf-artist .discog .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.bean_doc-pf-artist .discog .item .cov{aspect-ratio:1/1;background:var(--bean-surf);background-size:cover;border-radius:8px;}
.bean_doc-pf-artist .discog .item .t{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--bean-text);}
.bean_doc-pf-artist .discog .item .d{font-size:11px;color:var(--bean-muted);margin-top:2px;}

.bean_doc-pf-compact{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;background:var(--bean-surf);
	border-radius:999px;font-family:var(--bean-sans);margin:6px 6px 6px 0;}
.bean_doc-pf-compact .ph{width:28px;height:28px;border-radius:50%;background:var(--bean-card);background-size:cover;flex:0 0 auto;}
.bean_doc-pf-compact .name{font-size:13px;font-weight:700;color:var(--bean-text);}
.bean_doc-pf-compact .role{font-size:11px;color:var(--bean-muted);margin-left:4px;}

.bean_doc-pf-hero-full{position:relative;margin:30px 0;padding:0;min-height:500px;display:flex;align-items:center;
	border-radius:18px;overflow:hidden;font-family:var(--bean-sans);}
.bean_doc-pf-hero-full .bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.bean_doc-pf-hero-full .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.45) 60%,transparent 100%);}
.bean_doc-pf-hero-full .info{position:relative;z-index:1;padding:60px 48px;color:#fff;max-width:560px;}
.bean_doc-pf-hero-full .eb{font-size:11px;letter-spacing:4px;color:#fff;opacity:.85;font-weight:800;}
.bean_doc-pf-hero-full .name{font-size:clamp(36px,5vw,56px);font-weight:900;color:#fff;letter-spacing:-1.2px;margin-top:12px;line-height:1;}
.bean_doc-pf-hero-full .role{font-size:14px;color:rgba(255,255,255,.88);margin-top:10px;letter-spacing:.5px;}
.bean_doc-pf-hero-full .bio{margin-top:20px;color:rgba(255,255,255,.85);font-size:14.5px;line-height:1.75;}

.bean_doc-pf-quote{margin:30px 0;padding:36px;background:var(--bean-surf);border-radius:14px;font-family:var(--bean-sans);}
.bean_doc-pf-quote .q{font-family:var(--bean-serif);font-style:italic;font-size:clamp(20px,2.6vw,26px);
	color:var(--bean-text);line-height:1.55;letter-spacing:-.3px;margin:0 0 24px;}
.bean_doc-pf-quote .who{display:flex;gap:14px;align-items:center;}
.bean_doc-pf-quote .ph{width:48px;height:48px;border-radius:50%;background:var(--bean-card);background-size:cover;}
.bean_doc-pf-quote .name{font-size:14px;font-weight:800;color:var(--bean-text);}
.bean_doc-pf-quote .role{font-size:12px;color:var(--bean-muted);margin-top:2px;}

/* ───────── 인물 소개 페이지 섹션 (10) ───────── */
.bean_doc-intro-hero{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center;padding:48px 0;margin:30px 0;
	border-bottom:2px solid var(--bean-text);font-family:var(--bean-sans);}
.bean_doc-intro-hero .ph{aspect-ratio:1/1.2;border-radius:14px;background:var(--bean-surf);background-size:cover;background-position:center top;}
.bean_doc-intro-hero .eb{font-size:11px;letter-spacing:3px;color:var(--bean-accent);font-weight:800;margin-bottom:10px;}
.bean_doc-intro-hero .name{font-size:clamp(36px,5vw,54px);font-weight:900;color:var(--bean-text);letter-spacing:-1.2px;line-height:1;}
.bean_doc-intro-hero .role{font-size:14px;color:var(--bean-muted);margin-top:10px;letter-spacing:.5px;}
.bean_doc-intro-hero .meta{display:flex;gap:24px;margin-top:20px;font-size:12.5px;color:var(--bean-muted);}
.bean_doc-intro-hero .meta b{color:var(--bean-text);}

.bean_doc-intro-about{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-intro-about h2{margin:0 0 16px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--bean-accent);text-transform:uppercase;}
.bean_doc-intro-about .body{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.bean_doc-intro-about p{margin:0 0 12px;font-size:15px;color:var(--bean-text);line-height:1.8;}

.bean_doc-intro-career{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-intro-career h2{margin:0 0 24px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--bean-accent);text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid var(--bean-line);}
.bean_doc-intro-career .item{display:grid;grid-template-columns:100px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--bean-line);}
.bean_doc-intro-career .item:last-child{border-bottom:0;}
.bean_doc-intro-career .y{font-size:13px;font-weight:800;color:var(--bean-accent);letter-spacing:.5px;}
.bean_doc-intro-career .t{font-size:15px;font-weight:700;color:var(--bean-text);}
.bean_doc-intro-career .d{font-size:13px;color:var(--bean-muted);margin-top:3px;line-height:1.65;}

.bean_doc-intro-works{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-intro-works h2{margin:0 0 18px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--bean-accent);text-transform:uppercase;}
.bean_doc-intro-works .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.bean_doc-intro-works .work .cov{aspect-ratio:4/5;background:var(--bean-surf);background-size:cover;background-position:center;border-radius:10px;}
.bean_doc-intro-works .work .t{margin-top:10px;font-size:14px;font-weight:700;color:var(--bean-text);}
.bean_doc-intro-works .work .d{font-size:12px;color:var(--bean-muted);margin-top:2px;}

.bean_doc-intro-skills{margin:30px 0;padding:24px 0;border-top:1px solid var(--bean-line);border-bottom:1px solid var(--bean-line);font-family:var(--bean-sans);}
.bean_doc-intro-skills h2{margin:0 0 16px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--bean-accent);text-transform:uppercase;}
.bean_doc-intro-skills .tags{display:flex;flex-wrap:wrap;gap:8px;}
.bean_doc-intro-skills .tag{padding:6px 14px;border-radius:999px;background:var(--bean-surf);font-size:12.5px;font-weight:700;color:var(--bean-text);}

.bean_doc-intro-media{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-intro-media h2{margin:0 0 20px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--bean-accent);text-transform:uppercase;}
.bean_doc-intro-media .item{display:flex;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--bean-line);}
.bean_doc-intro-media .item:last-child{border-bottom:0;}
.bean_doc-intro-media .src{flex:0 0 100px;font-size:12px;font-weight:800;color:var(--bean-muted);letter-spacing:1px;text-transform:uppercase;}
.bean_doc-intro-media .t{flex:1;font-size:14px;font-weight:600;color:var(--bean-text);}
.bean_doc-intro-media .d{flex:0 0 80px;font-size:11.5px;color:var(--bean-muted);text-align:right;}

.bean_doc-intro-contact{margin:30px 0;padding:36px;background:var(--bean-surf);border-radius:14px;
	display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;font-family:var(--bean-sans);}
.bean_doc-intro-contact h3{margin:0 0 8px;font-size:20px;font-weight:800;color:var(--bean-text);}
.bean_doc-intro-contact p{margin:0;color:var(--bean-muted);font-size:14px;line-height:1.7;}
.bean_doc-intro-contact .info{font-size:13px;color:var(--bean-text);line-height:1.9;}
.bean_doc-intro-contact .info b{display:block;color:var(--bean-accent);font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:800;}

.bean_doc-intro-press{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-intro-press h2{margin:0 0 20px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--bean-accent);text-transform:uppercase;}
.bean_doc-intro-press .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.bean_doc-intro-press .item{padding:22px;border-left:3px solid var(--bean-accent);background:var(--bean-card);border-radius:0 10px 10px 0;}
.bean_doc-intro-press .item p{margin:0 0 12px;font-style:italic;color:var(--bean-text);font-size:14px;line-height:1.65;}
.bean_doc-intro-press .src{font-size:11px;font-weight:800;color:var(--bean-muted);letter-spacing:1px;text-transform:uppercase;}

.bean_doc-intro-edu{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-intro-edu h2{margin:0 0 18px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--bean-accent);text-transform:uppercase;}
.bean_doc-intro-edu .item{display:grid;grid-template-columns:1fr auto;gap:18px;padding:14px 0;border-bottom:1px dashed var(--bean-line);}
.bean_doc-intro-edu .item:last-child{border-bottom:0;}
.bean_doc-intro-edu .school{font-size:14.5px;font-weight:700;color:var(--bean-text);}
.bean_doc-intro-edu .deg{font-size:12.5px;color:var(--bean-muted);margin-top:2px;}
.bean_doc-intro-edu .y{font-size:12.5px;font-weight:800;color:var(--bean-accent);align-self:center;}

.bean_doc-intro-awards{margin:30px 0;padding:30px;background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px;font-family:var(--bean-sans);}
.bean_doc-intro-awards h2{margin:0 0 20px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--bean-accent);text-transform:uppercase;}
.bean_doc-intro-awards ul{list-style:none;padding:0;margin:0;}
.bean_doc-intro-awards li{display:grid;grid-template-columns:60px 1fr;gap:18px;padding:10px 0;border-bottom:1px solid var(--bean-line);font-size:13.5px;color:var(--bean-text);}
.bean_doc-intro-awards li:last-child{border-bottom:0;}
.bean_doc-intro-awards li .y{font-weight:800;color:var(--bean-accent);}

/* ───────── 가격표 신규 (10) ───────── */
.bean_doc-px-mini{margin:24px 0;padding:24px 28px;background:var(--bean-card);border:1px solid var(--bean-line);
	border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--bean-sans);}
.bean_doc-px-mini .info .nm{font-size:11px;font-weight:800;color:var(--bean-accent);letter-spacing:1.5px;text-transform:uppercase;}
.bean_doc-px-mini .info .pr{font-size:28px;font-weight:900;color:var(--bean-text);letter-spacing:-.8px;line-height:1;margin-top:6px;}
.bean_doc-px-mini .info .pr small{font-size:13px;font-weight:600;color:var(--bean-muted);margin-left:4px;}
.bean_doc-px-mini .info .d{font-size:12px;color:var(--bean-muted);margin-top:6px;}
.bean_doc-px-mini a{padding:12px 22px;border-radius:8px;background:var(--bean-accent);color:#fff !important;font-weight:700;font-size:13.5px;}

.bean_doc-px-toggle{margin:30px 0;padding:36px 28px;background:var(--bean-card);border:1px solid var(--bean-line);
	border-radius:14px;text-align:center;font-family:var(--bean-sans);}
.bean_doc-px-toggle .nav{display:inline-flex;gap:0;background:var(--bean-surf);border-radius:999px;padding:4px;margin-bottom:24px;}
.bean_doc-px-toggle .nav span{padding:8px 18px;font-size:12.5px;font-weight:700;color:var(--bean-muted);border-radius:999px;}
.bean_doc-px-toggle .nav .on{background:var(--bean-text);color:var(--bean-card);}
.bean_doc-px-toggle .pr{font-size:48px;font-weight:900;color:var(--bean-text);letter-spacing:-1.5px;line-height:1;}
.bean_doc-px-toggle .pr small{font-size:16px;font-weight:600;color:var(--bean-muted);}
.bean_doc-px-toggle .save{margin-top:8px;font-size:12px;color:var(--bean-accent);font-weight:700;}
.bean_doc-px-toggle a{display:inline-block;margin-top:18px;padding:12px 28px;border-radius:999px;background:var(--bean-accent);color:#fff !important;font-weight:700;}

.bean_doc-px-addon{margin:24px 0;font-family:var(--bean-sans);}
.bean_doc-px-addon h2{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--bean-accent);text-transform:uppercase;}
.bean_doc-px-addon .item{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:14px 18px;
	background:var(--bean-card);border:1px solid var(--bean-line);border-radius:10px;margin-bottom:8px;}
.bean_doc-px-addon .item h3{margin:0;font-size:14px;font-weight:700;color:var(--bean-text);}
.bean_doc-px-addon .item p{margin:2px 0 0;font-size:12px;color:var(--bean-muted);}
.bean_doc-px-addon .pr{font-size:15px;font-weight:800;color:var(--bean-text);}
.bean_doc-px-addon .pr small{font-size:11px;color:var(--bean-muted);}
.bean_doc-px-addon a{padding:8px 14px;border-radius:6px;background:var(--bean-surf);color:var(--bean-text) !important;font-weight:700;font-size:12px;}

.bean_doc-px-feat-grid{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-px-feat-grid .head{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:0;background:var(--bean-surf);
	border-radius:10px 10px 0 0;border:1px solid var(--bean-line);border-bottom:0;}
.bean_doc-px-feat-grid .head .cell{padding:18px;text-align:center;font-size:13px;font-weight:800;color:var(--bean-text);border-right:1px solid var(--bean-line);}
.bean_doc-px-feat-grid .head .cell:last-child{border-right:0;}
.bean_doc-px-feat-grid .head .cell:first-child{text-align:left;}
.bean_doc-px-feat-grid .head .pr{font-size:22px;color:var(--bean-accent);letter-spacing:-.5px;margin-top:4px;}
.bean_doc-px-feat-grid .body{border:1px solid var(--bean-line);border-radius:0 0 10px 10px;overflow:hidden;}
.bean_doc-px-feat-grid .row{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:0;border-bottom:1px solid var(--bean-line);}
.bean_doc-px-feat-grid .row:last-child{border-bottom:0;}
.bean_doc-px-feat-grid .row .cell{padding:14px 18px;font-size:13px;color:var(--bean-text);border-right:1px solid var(--bean-line);text-align:center;}
.bean_doc-px-feat-grid .row .cell:last-child{border-right:0;}
.bean_doc-px-feat-grid .row .cell:first-child{text-align:left;font-weight:600;}

.bean_doc-px-enterprise{margin:30px 0;padding:48px 36px;background:linear-gradient(135deg,#0c0a14,#15121f);color:#fff;
	border-radius:14px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;font-family:var(--bean-sans);}
.bean_doc-px-enterprise h3{margin:0 0 14px;font-size:28px;font-weight:900;color:#fff;letter-spacing:-.4px;line-height:1.2;}
.bean_doc-px-enterprise p{margin:0;color:rgba(255,255,255,.78);font-size:14px;line-height:1.7;}
.bean_doc-px-enterprise ul{margin:18px 0 0;padding-left:18px;font-size:13.5px;line-height:1.9;color:rgba(255,255,255,.85);}
.bean_doc-px-enterprise .right{text-align:right;}
.bean_doc-px-enterprise a{display:inline-block;padding:14px 28px;border-radius:999px;background:#fff;color:var(--bean-text) !important;font-weight:800;font-size:14px;}

.bean_doc-px-4c{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:30px 0;
	border:1px solid var(--bean-line);border-radius:14px;overflow:hidden;font-family:var(--bean-sans);}
.bean_doc-px-4c .plan{padding:30px 22px;background:var(--bean-card);border-right:1px solid var(--bean-line);text-align:center;}
.bean_doc-px-4c .plan:last-child{border-right:0;}
.bean_doc-px-4c .plan.hi{background:var(--bean-surf);position:relative;}
.bean_doc-px-4c .plan.hi::before{content:"BEST";position:absolute;top:14px;right:14px;font-size:9px;font-weight:900;
	padding:3px 8px;background:var(--bean-accent);color:#fff;border-radius:4px;letter-spacing:1px;}
.bean_doc-px-4c .nm{font-size:12px;font-weight:800;color:var(--bean-accent);letter-spacing:1px;text-transform:uppercase;}
.bean_doc-px-4c .pr{margin:14px 0 4px;font-size:32px;font-weight:900;color:var(--bean-text);letter-spacing:-1px;line-height:1;}
.bean_doc-px-4c .pr small{font-size:12px;color:var(--bean-muted);}
.bean_doc-px-4c .desc{font-size:11.5px;color:var(--bean-muted);}
.bean_doc-px-4c ul{list-style:none;padding:14px 0;margin:14px 0;font-size:12.5px;color:var(--bean-text);line-height:1.9;
	border-top:1px solid var(--bean-line);border-bottom:1px solid var(--bean-line);}
.bean_doc-px-4c a{display:block;padding:10px;border-radius:6px;background:var(--bean-accent);color:#fff !important;font-weight:700;font-size:12.5px;}

.bean_doc-px-freemium{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-px-freemium .free{padding:36px 30px;border:2px dashed var(--bean-line);border-radius:14px;}
.bean_doc-px-freemium .paid{padding:36px 30px;background:var(--bean-card);border:1px solid var(--bean-accent);border-radius:14px;
	box-shadow:0 10px 30px color-mix(in srgb,var(--bean-accent) 18%,transparent);}
.bean_doc-px-freemium h3{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--bean-text);letter-spacing:-.2px;}
.bean_doc-px-freemium .pr{font-size:36px;font-weight:900;color:var(--bean-text);letter-spacing:-1px;line-height:1;margin:0 0 14px;}
.bean_doc-px-freemium .pr small{font-size:13px;color:var(--bean-muted);}
.bean_doc-px-freemium ul{list-style:none;padding:0;margin:0 0 18px;font-size:13px;line-height:2;color:var(--bean-text);}
.bean_doc-px-freemium a{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:700;font-size:13.5px;}
.bean_doc-px-freemium .free a{border:1px solid var(--bean-text);color:var(--bean-text) !important;}
.bean_doc-px-freemium .paid a{background:var(--bean-accent);color:#fff !important;}

.bean_doc-px-seg{margin:30px 0;display:flex;justify-content:center;gap:0;font-family:var(--bean-sans);flex-wrap:wrap;}
.bean_doc-px-seg .plan{flex:0 0 240px;padding:24px;text-align:center;border:1px solid var(--bean-line);background:var(--bean-card);}
.bean_doc-px-seg .plan:first-child{border-radius:12px 0 0 12px;border-right:0;}
.bean_doc-px-seg .plan:last-child{border-radius:0 12px 12px 0;border-left:0;}
.bean_doc-px-seg .plan.mid{background:var(--bean-surf);}
.bean_doc-px-seg .nm{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--bean-accent);text-transform:uppercase;}
.bean_doc-px-seg .pr{margin:10px 0 0;font-size:24px;font-weight:900;color:var(--bean-text);letter-spacing:-.5px;}
.bean_doc-px-seg .pr small{font-size:12px;color:var(--bean-muted);}
.bean_doc-px-seg .d{margin-top:4px;font-size:11.5px;color:var(--bean-muted);}

.bean_doc-px-ribbon{position:relative;margin:30px 0;padding:36px 30px;background:var(--bean-card);
	border:2px solid var(--bean-accent);border-radius:14px;font-family:var(--bean-sans);}
.bean_doc-px-ribbon::before{content:"BEST VALUE";position:absolute;top:-12px;left:30px;padding:5px 14px;
	background:var(--bean-accent);color:#fff;font-size:11px;font-weight:900;letter-spacing:1.5px;border-radius:4px;}
.bean_doc-px-ribbon .top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.bean_doc-px-ribbon h3{margin:0 0 8px;font-size:20px;font-weight:800;color:var(--bean-text);}
.bean_doc-px-ribbon p{margin:0;font-size:13.5px;color:var(--bean-muted);}
.bean_doc-px-ribbon .pr{font-size:36px;font-weight:900;color:var(--bean-accent);letter-spacing:-1px;line-height:1;text-align:right;}
.bean_doc-px-ribbon .pr small{font-size:13px;color:var(--bean-muted);font-weight:600;}
.bean_doc-px-ribbon ul{list-style:none;padding:20px 0;margin:18px 0;font-size:13px;line-height:1.9;color:var(--bean-text);
	border-top:1px solid var(--bean-line);border-bottom:1px solid var(--bean-line);}
.bean_doc-px-ribbon a{display:inline-block;padding:13px 28px;border-radius:8px;background:var(--bean-accent);color:#fff !important;font-weight:700;}

.bean_doc-px-hori{display:grid;grid-template-columns:1.2fr 2fr;gap:30px;align-items:center;margin:30px 0;
	padding:30px 36px;background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px;font-family:var(--bean-sans);}
.bean_doc-px-hori .pr-side .nm{font-size:11px;font-weight:800;color:var(--bean-accent);letter-spacing:1.5px;text-transform:uppercase;}
.bean_doc-px-hori .pr-side .pr{font-size:48px;font-weight:900;color:var(--bean-text);letter-spacing:-1.5px;line-height:1;margin-top:8px;}
.bean_doc-px-hori .pr-side .pr small{font-size:14px;color:var(--bean-muted);font-weight:600;}
.bean_doc-px-hori .pr-side a{display:inline-block;margin-top:18px;padding:12px 24px;border-radius:8px;background:var(--bean-accent);color:#fff !important;font-weight:700;}
.bean_doc-px-hori .feat ul{list-style:none;padding:0;margin:0;}
.bean_doc-px-hori .feat li{padding:7px 0;font-size:13.5px;color:var(--bean-text);border-bottom:1px solid var(--bean-line);}
.bean_doc-px-hori .feat li:last-child{border-bottom:0;}

/* ───────── 인물 리스트 (10) — 여러 명 ───────── */
.bean_doc-pl-6{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-pl-6 .p{text-align:center;}
.bean_doc-pl-6 .ph{aspect-ratio:1/1;border-radius:50%;background:var(--bean-surf);background-size:cover;background-position:center;margin-bottom:14px;}
.bean_doc-pl-6 .name{font-size:15px;font-weight:800;color:var(--bean-text);}
.bean_doc-pl-6 .role{font-size:11.5px;color:var(--bean-muted);margin-top:3px;letter-spacing:.5px;text-transform:uppercase;}

.bean_doc-pl-carousel{display:flex;gap:18px;overflow-x:auto;padding:6px 0 18px;margin:30px 0;
	font-family:var(--bean-sans);scroll-snap-type:x mandatory;}
.bean_doc-pl-carousel::-webkit-scrollbar{height:6px;}
.bean_doc-pl-carousel::-webkit-scrollbar-thumb{background:var(--bean-line);border-radius:3px;}
.bean_doc-pl-carousel .p{flex:0 0 220px;scroll-snap-align:start;}
.bean_doc-pl-carousel .ph{aspect-ratio:3/4;border-radius:12px;background:var(--bean-surf);background-size:cover;background-position:center top;margin-bottom:12px;}
.bean_doc-pl-carousel .name{font-size:15px;font-weight:800;color:var(--bean-text);}
.bean_doc-pl-carousel .role{font-size:11.5px;color:var(--bean-muted);margin-top:3px;}

.bean_doc-pl-dense{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-pl-dense .p{text-align:center;}
.bean_doc-pl-dense .ph{aspect-ratio:1/1;border-radius:50%;background:var(--bean-surf);background-size:cover;margin-bottom:8px;}
.bean_doc-pl-dense .name{font-size:11.5px;font-weight:700;color:var(--bean-text);}
.bean_doc-pl-dense .role{font-size:10px;color:var(--bean-muted);margin-top:2px;}

.bean_doc-pl-quote-list{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-pl-quote-list .p{display:grid;grid-template-columns:80px 1fr;gap:20px;align-items:center;padding:20px 0;
	border-bottom:1px solid var(--bean-line);}
.bean_doc-pl-quote-list .p:last-child{border-bottom:0;}
.bean_doc-pl-quote-list .ph{width:80px;height:80px;border-radius:50%;background:var(--bean-surf);background-size:cover;}
.bean_doc-pl-quote-list .q{font-size:14px;color:var(--bean-text);line-height:1.65;font-style:italic;margin:0 0 6px;}
.bean_doc-pl-quote-list .who{font-size:12px;color:var(--bean-muted);}
.bean_doc-pl-quote-list .who b{color:var(--bean-text);font-weight:800;}

.bean_doc-pl-alpha{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-pl-alpha .group{margin-bottom:20px;}
.bean_doc-pl-alpha .letter{font-size:13px;font-weight:900;color:var(--bean-accent);letter-spacing:2px;
	padding-bottom:8px;border-bottom:1px solid var(--bean-line);margin-bottom:12px;}
.bean_doc-pl-alpha .row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.bean_doc-pl-alpha .p{display:flex;gap:10px;align-items:center;padding:8px 0;}
.bean_doc-pl-alpha .ph{width:36px;height:36px;border-radius:50%;background:var(--bean-surf);background-size:cover;flex:0 0 auto;}
.bean_doc-pl-alpha .name{font-size:13px;font-weight:700;color:var(--bean-text);}
.bean_doc-pl-alpha .role{font-size:11px;color:var(--bean-muted);}

.bean_doc-pl-tabs{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-pl-tabs .nav{display:flex;gap:8px;padding-bottom:18px;border-bottom:1px solid var(--bean-line);margin-bottom:20px;flex-wrap:wrap;}
.bean_doc-pl-tabs .nav span{padding:6px 14px;border-radius:999px;background:var(--bean-surf);font-size:12px;font-weight:700;color:var(--bean-muted);}
.bean_doc-pl-tabs .nav .on{background:var(--bean-accent);color:#fff;}
.bean_doc-pl-tabs .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.bean_doc-pl-tabs .p{text-align:center;}
.bean_doc-pl-tabs .ph{aspect-ratio:3/4;border-radius:10px;background:var(--bean-surf);background-size:cover;background-position:center top;margin-bottom:10px;}
.bean_doc-pl-tabs .name{font-size:14px;font-weight:800;color:var(--bean-text);}
.bean_doc-pl-tabs .role{font-size:11px;color:var(--bean-muted);margin-top:2px;}

.bean_doc-pl-dir{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-pl-dir .p{display:grid;grid-template-columns:64px 1.5fr 1fr 1fr auto;gap:18px;align-items:center;
	padding:14px 18px;background:var(--bean-card);border:1px solid var(--bean-line);border-radius:10px;margin-bottom:6px;}
.bean_doc-pl-dir .ph{width:48px;height:48px;border-radius:50%;background:var(--bean-surf);background-size:cover;}
.bean_doc-pl-dir .name{font-size:14px;font-weight:800;color:var(--bean-text);}
.bean_doc-pl-dir .role{font-size:12px;color:var(--bean-muted);}
.bean_doc-pl-dir .team{font-size:12.5px;color:var(--bean-text);}
.bean_doc-pl-dir .mail{font-size:12px;color:var(--bean-accent) !important;}
.bean_doc-pl-dir a.btn{padding:7px 12px;border-radius:6px;background:var(--bean-surf);color:var(--bean-text) !important;font-size:11.5px;font-weight:700;}

.bean_doc-pl-tbl{margin:30px 0;width:100%;border-collapse:collapse;border:1px solid var(--bean-line);
	border-radius:10px;overflow:hidden;font-family:var(--bean-sans);}
.bean_doc-pl-tbl th,.bean_doc-pl-tbl td{padding:12px 14px;text-align:left;font-size:13px;border-bottom:1px solid var(--bean-line);}
.bean_doc-pl-tbl th{background:var(--bean-surf);font-weight:800;color:var(--bean-text);font-size:12px;letter-spacing:.5px;}
.bean_doc-pl-tbl td{color:var(--bean-text);}
.bean_doc-pl-tbl tr:last-child td{border-bottom:0;}
.bean_doc-pl-tbl .av{width:32px;height:32px;border-radius:50%;background:var(--bean-surf);background-size:cover;
	display:inline-block;vertical-align:middle;margin-right:8px;}

.bean_doc-pl-featured{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-pl-featured .star{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;padding:24px;
	background:var(--bean-card);border:1px solid var(--bean-line);border-radius:14px;align-items:center;}
.bean_doc-pl-featured .star .ph{aspect-ratio:1/1;border-radius:12px;background:var(--bean-surf);background-size:cover;}
.bean_doc-pl-featured .star .eb{font-size:11px;font-weight:800;color:var(--bean-accent);letter-spacing:1.5px;text-transform:uppercase;}
.bean_doc-pl-featured .star .name{font-size:26px;font-weight:900;color:var(--bean-text);letter-spacing:-.5px;margin-top:6px;}
.bean_doc-pl-featured .star .role{font-size:13px;color:var(--bean-muted);margin-top:6px;}
.bean_doc-pl-featured .star .bio{margin-top:14px;font-size:13.5px;color:var(--bean-muted);line-height:1.65;}
.bean_doc-pl-featured .rest{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.bean_doc-pl-featured .rest .p{text-align:center;}
.bean_doc-pl-featured .rest .ph{aspect-ratio:1/1;border-radius:50%;background:var(--bean-surf);background-size:cover;margin-bottom:8px;}
.bean_doc-pl-featured .rest .name{font-size:12px;font-weight:700;color:var(--bean-text);}
.bean_doc-pl-featured .rest .role{font-size:10.5px;color:var(--bean-muted);}

.bean_doc-pl-group{margin:30px 0;font-family:var(--bean-sans);}
.bean_doc-pl-group .sec{margin-bottom:30px;}
.bean_doc-pl-group .head{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--bean-accent);text-transform:uppercase;
	padding-bottom:10px;border-bottom:2px solid var(--bean-text);margin-bottom:16px;}
.bean_doc-pl-group .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.bean_doc-pl-group .p{text-align:center;}
.bean_doc-pl-group .ph{aspect-ratio:1/1;border-radius:12px;background:var(--bean-surf);background-size:cover;background-position:center top;margin-bottom:10px;}
.bean_doc-pl-group .name{font-size:13.5px;font-weight:800;color:var(--bean-text);}
.bean_doc-pl-group .role{font-size:11px;color:var(--bean-muted);margin-top:2px;}

/* 반응형 */
@media(max-width:900px){
	.bean_doc-pf-bio,.bean_doc-pf-artist .hero,.bean_doc-intro-hero,.bean_doc-intro-contact,
	.bean_doc-intro-about .body,.bean_doc-intro-press .grid,.bean_doc-pf-artist .discog .grid,
	.bean_doc-px-enterprise,.bean_doc-px-freemium,.bean_doc-px-hori,
	.bean_doc-pl-6,.bean_doc-pl-tabs .grid,.bean_doc-pl-group .grid,.bean_doc-pl-featured .star,
	.bean_doc-intro-works .grid,.bean_doc-px-4c{grid-template-columns:1fr;}
	.bean_doc-px-feat-grid .head,.bean_doc-px-feat-grid .row{grid-template-columns:1fr 1fr;}
	.bean_doc-pl-dense,.bean_doc-pl-alpha .row,.bean_doc-pl-featured .rest{grid-template-columns:repeat(4,1fr);}
}

/* 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) {}

/* Original file: widgets/bean_content/skins/default/css/widget.css */

/* ============================================================
   BEAN 콘텐츠 위젯 스킨 — 자체 격리 CSS
   레이아웃과 무관하게 동작하도록 .bean_wgt 자체에 변수 폴백 정의.
   bean 레이아웃 안에 들어가면 부모의 --bean-* 변수가 우선 적용됨.
   Pretendard 폰트도 자체 @import (다른 레이아웃에서 사용 시에도 동일 폰트 보장)
   ============================================================ */


/* 기본 = 미니멀: 테두리·배경 없음, 타이포만. 어느 페이지에 얹어도 자연스럽게 흐름.
   카드 모드는 .bean_wgt-panel 변형으로 옵션 ON 시에만 적용. */
.bean_wgt{
	/* 컬러 변수 폴백 (다른 레이아웃에서도 동작) */
	--bw-card:#fff; --bw-surf:#f6f7f8; --bw-line:#e6e6e6;
	--bw-text:#1a1a1f; --bw-muted:#7a7a85;
	--bw-accent:#5b2ed8; --bw-onaccent:#fff;
	background:transparent;border:0;border-radius:0;overflow:visible;
	color:var(--bw-text);
	font-family:'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif;
	font-size:14px;line-height:1.6;}

/* 패널 카드 모드 — bean_panel_mode='on' 옵션 시 적용 */
.bean_wgt-panel{background:var(--bw-card);border:1px solid var(--bw-line);
	border-radius:14px;overflow:hidden;
	box-shadow:0 1px 2px color-mix(in srgb,var(--bw-text) 5%,transparent);}

/* ============================================================
   미니멀 모드 (기본) — 카드 컨테이너가 없으므로:
   1) 모든 내부 좌우 padding 제거 (콘텐츠가 부모 경계까지 흐름)
   2) 헤더/푸터 구분선의 좌우 inset 도 0
   3) hover 배경이 부모 폭 전체로 펴지므로 hover 도 부드럽게 조정
   ============================================================ */
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-head,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-row,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-gal,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-wi,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-ci,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-medi,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-feat-body,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-feat-rest .bean_wgt-row,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-empty,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-pager,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-tabs,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-tabs-left,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-roster-scroll,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-tbl td:first-child,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-tbl td:last-child{
	padding-left:0;padding-right:0;}
/* 미니멀 헤더는 살짝 더 컴팩트 (카드 헤더 padding 보다 줄임) */
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-head{padding-top:0;padding-bottom:10px;}
/* 미니멀 모드 hover 는 음영 대신 미세한 색만 (배경판 없으므로) */
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-row:hover,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-wi:hover,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-ci:hover,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-medi:hover{background:transparent;}
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-row:hover .bean_wgt-t,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-wi:hover .bean_wgt-wh,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-ci:hover .bean_wgt-cx,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-medi:hover .bean_wgt-medt-title{color:var(--bw-accent);}

/* ============================================================
   위젯스타일 (.bean_ws-*) 안에 든 *나체* 위젯 — widgetstyle 이 외부 frame 을 제공하므로
   위젯의 내부 좌우 padding 제거 (widgetstyle padding 과 중복 방지).
   단, 위젯이 panel 모드라면 panel 자체가 frame 이므로 padding 유지.
   ============================================================ */
[class*="bean_ws-"] .bean_wgt:not(.bean_wgt-panel) .bean_wgt-head,
[class*="bean_ws-"] .bean_wgt:not(.bean_wgt-panel) .bean_wgt-row,
[class*="bean_ws-"] .bean_wgt:not(.bean_wgt-panel) .bean_wgt-gal,
[class*="bean_ws-"] .bean_wgt:not(.bean_wgt-panel) .bean_wgt-wi,
[class*="bean_ws-"] .bean_wgt:not(.bean_wgt-panel) .bean_wgt-ci,
[class*="bean_ws-"] .bean_wgt:not(.bean_wgt-panel) .bean_wgt-medi,
[class*="bean_ws-"] .bean_wgt:not(.bean_wgt-panel) .bean_wgt-empty,
[class*="bean_ws-"] .bean_wgt:not(.bean_wgt-panel) .bean_wgt-roster-scroll{
	padding-left:0;padding-right:0;}
/* 위젯스타일 헤더가 이미 있고 위젯이 나체이면 위젯 자체 헤더 숨김 (이중 헤더 방지) */
[class*="bean_ws-"] .bean_ws-head + .bean_ws-body .bean_wgt:not(.bean_wgt-panel) > .bean_wgt-head{display:none;}

/* 미니멀 모드 — 페이저 상단 구분선 제거 (떼어낼 카드가 없음) */
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-pager{border-top:0;margin-top:10px;padding-top:0;}
/* 미니멀 모드 — 헤더 구분선이 너무 진한 인상이라 라이트 톤으로 */
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-head{border-bottom-color:color-mix(in srgb,var(--bw-line) 70%,transparent);}
/* 미니멀 모드 — 리스트 위/아래 padding 정리 */
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-list,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-cmts{padding:0;}
/* 미니멀 모드 + 위젯스타일 안 — 마지막 항목 border 제거 (구분선 잔여물 방지) */
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-list>li:last-child .bean_wgt-row,
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-medlist>li:last-child .bean_wgt-medi{border-bottom:0;}
/* 로스터는 카드 자체가 시각 컨테이너 → 미니멀 모드일 때도 그대로 OK,
   단 스크롤 좌측 여백만 부모와 맞춤 */
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-roster{padding-top:14px;padding-bottom:18px;}

/* 갤러리 — 미니멀 모드일 때 셀 간격은 살짝 더 넓게 (카드 안에서 빽빽한 것과 차별) */
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-gal{gap:16px;}

/* 피처드 hero — 미니멀 모드일 때 cover 둥근 모서리 자체로 갖게 (카드 없이 떠 있는 형태) */
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-feat-cover{border-radius:10px;}
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-feat-hero{border-bottom:0;}
.bean_wgt:not(.bean_wgt-panel) .bean_wgt-feat-body{padding-top:14px;padding-bottom:18px;}

/* 위젯스타일이 자체로 색 콘트라스트가 강한 (gradient_bar, dark, accent_top 등) 경우
   안쪽 헤더의 border-bottom 이 시각적으로 잘 안 보이므로 살짝 강조 */
.bean_ws-gradient_bar .bean_wgt-head,
.bean_ws-dark .bean_wgt-head{border-bottom-color:color-mix(in srgb,var(--bw-text) 12%,transparent);}

/* ============================================================
   패널 카드 모드 — bean_panel_mode='on' 일 때만 적용되는 정밀 조율
   카드 frame 안쪽이라는 시각 맥락에서 자연스럽게:
   ============================================================ */

/* 헤더 살짝 surf 톤으로 띠어내어 body 와 명확히 구분 */
.bean_wgt-panel .bean_wgt-head{background:color-mix(in srgb,var(--bw-surf) 50%,transparent);}

/* 일반 list — 행간 잔잔한 dotted/light 구분선 (rhythm 보강) */
.bean_wgt-panel .bean_wgt-list>li:not(:last-child) .bean_wgt-row{
	border-bottom:1px solid color-mix(in srgb,var(--bw-line) 55%,transparent);}

/* 인기글 list — 순번 강조 + 행 간격 평이하게 */
.bean_wgt-panel .bean_wgt-rank .bean_wgt-row{padding-top:9px;padding-bottom:9px;}

/* 미디어 리스트 — 항목간 점선 구분 */
.bean_wgt-panel .bean_wgt-medlist>li:not(:last-child) .bean_wgt-medi{
	border-bottom:1px solid color-mix(in srgb,var(--bw-line) 55%,transparent);}

/* 갤러리 — 카드 안에서는 더 빽빽하게 정돈 (gap 살짝 줄임) */
.bean_wgt-panel .bean_wgt-gal{gap:10px;}

/* 로스터 — 카드 안에서는 스크롤 영역 좌우 패딩이 카드 padding 과 잘 어울리게 통일 */
.bean_wgt-panel .bean_wgt-roster{padding:18px 0 22px;}
.bean_wgt-panel .bean_wgt-roster-scroll{padding-left:20px;padding-right:20px;}

/* 피처드 — hero cover 카드 안에서는 윗 모서리 둥글게 (카드 상단과 일치) */
.bean_wgt-panel .bean_wgt-feat-cover{border-radius:0;}
.bean_wgt-panel .bean_wgt-feat-body{padding:18px 20px 22px;}

/* 웹진 — 카드 안에서 첫 항목 위쪽 라인 제거 (헤더 border 와 중복 방지) */
.bean_wgt-panel .bean_wgt-head + .bean_wgt-wz .bean_wgt-wi:first-child{border-top:0;}

/* 페이저 — 카드 안쪽 list 와 분리되는 상단선 더 또렷이 */
.bean_wgt-panel .bean_wgt-pager{background:color-mix(in srgb,var(--bw-surf) 35%,transparent);}

/* 탭 (top) — 탭 바 자체에 살짝 surf 톤 → 카드 안에서 "탭 영역" 시각 분리 */
.bean_wgt-panel .bean_wgt-tabs:not(.bean_wgt-tabs-left){
	background:color-mix(in srgb,var(--bw-surf) 50%,transparent);}
/* 탭(left) — 좌측 사이드바 영역도 살짝 surf */
.bean_wgt-panel .bean_wgt-tabs-left{background:color-mix(in srgb,var(--bw-surf) 50%,transparent);}

/* 빈 상태 — 카드 안에서는 가운데 정렬 + 부드러운 surf 배경판 */
.bean_wgt-panel .bean_wgt-empty{background:color-mix(in srgb,var(--bw-surf) 35%,transparent);}

/* hover 시 카드 외곽선 살짝 강조 (전체 호버) — 인터랙티브 신호 */
.bean_wgt-panel:hover{border-color:color-mix(in srgb,var(--bw-line) 60%,var(--bw-accent) 40%);
	transition:border-color .2s;}

.bean_wgt-light{--bw-card:#fff;--bw-surf:#f6f7f8;--bw-line:#e6e6e6;
	--bw-text:#1a1a1f;--bw-muted:#7a7a85;}
.bean_wgt-dark{--bw-card:#15121f;--bw-surf:#1e1a2c;--bw-line:#2e2742;
	--bw-text:#f1eef8;--bw-muted:#928aa6;--bw-accent:#a16bff;}

/* bean 레이아웃 안에 들어가면 부모 --bean-* 를 우선 사용 */
.bean_root .bean_wgt{
	--bw-card:var(--bean-card);--bw-surf:var(--bean-surf);--bw-line:var(--bean-line);
	--bw-text:var(--bean-text);--bw-muted:var(--bean-muted);
	--bw-accent:var(--bean-accent);--bw-onaccent:var(--bean-onaccent,#fff);}

/* 위젯스타일(.bean_ws-*) 안에 들어가면 widgetstyle 의 --bws-* 변수를 위젯 변수로 매핑해
   액센트/텍스트/선 색이 wrapper 와 일치하도록 */
[class*="bean_ws-"] .bean_wgt{
	--bw-text:var(--bws-text,var(--bw-text));
	--bw-muted:var(--bws-muted,var(--bw-muted));
	--bw-line:var(--bws-line,var(--bw-line));
	--bw-card:var(--bws-card,var(--bw-card));
	--bw-surf:var(--bws-surf,var(--bw-surf));
	--bw-accent:var(--bws-accent,var(--bw-accent));}

/* 모든 링크 — underline 제거 + 색상 수동 지정 (기본 규칙) */
.bean_wgt a,.bean_wgt a:link,.bean_wgt a:visited,
.bean_wgt a:hover,.bean_wgt a:focus,.bean_wgt a:active{
	text-decoration:none;color:inherit;}

/* 리스트 기본 마커 제거 */
.bean_wgt ul,.bean_wgt ol{list-style:none;margin:0;padding:0;}

/* ───────── 헤더 ───────── */
.bean_wgt-head{display:flex;justify-content:space-between;align-items:center;
	padding:16px 20px;border-bottom:1px solid var(--bw-line);}
.bean_wgt-h{font-size:15px;font-weight:800;letter-spacing:-.2px;margin:0;
	color:var(--bw-text);}
.bean_wgt-more{font-size:11.5px;font-weight:700;color:var(--bw-accent) !important;}
.bean_wgt-more:hover{opacity:.7;}
.bean_wgt-empty{padding:36px 20px;text-align:center;font-size:13px;color:var(--bw-muted);}

/* ───────── 목록 / 인기글 공용 ───────── */
.bean_wgt-list{padding:6px 0;}
.bean_wgt-list>li{margin:0;}
.bean_wgt-row{display:flex;align-items:center;gap:12px;padding:11px 20px;
	font-size:13px;color:var(--bw-text) !important;transition:background .15s;}
.bean_wgt-row:hover{background:var(--bw-surf);}
.bean_wgt-tag{flex:0 0 auto;font-size:10px;font-weight:800;padding:3px 7px;
	border-radius:5px;background:var(--bw-surf);color:var(--bw-accent);
	border:1px solid var(--bw-line);white-space:nowrap;}
.bean_wgt-t{flex:1;min-width:0;color:inherit;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bean_wgt-c{flex:0 0 auto;font-size:11.5px;color:var(--bw-accent);font-weight:700;}
.bean_wgt-d{flex:0 0 auto;font-size:11.5px;color:var(--bw-muted);
	font-variant-numeric:tabular-nums;white-space:nowrap;}
.bean_wgt-rank .bean_wgt-rn{flex:0 0 18px;font-size:13px;font-weight:900;
	color:var(--bw-accent);text-align:center;}
.bean_wgt-rank .bean_wgt-row:nth-child(n+4) .bean_wgt-rn{color:var(--bw-muted);}
.bean_wgt-pager{display:flex;justify-content:center;align-items:center;gap:4px;
	padding:12px 16px;border-top:1px solid var(--bw-line);flex-wrap:wrap;}
.bean_wgt-pager button{min-width:30px;height:30px;padding:0 8px;border-radius:6px;
	border:1px solid var(--bw-line);background:var(--bw-card);color:var(--bw-text);
	cursor:pointer;font-size:12.5px;font-weight:600;line-height:1;font-family:inherit;
	transition:.12s;}
.bean_wgt-pager button:hover{border-color:var(--bw-accent);color:var(--bw-accent);}
.bean_wgt-pager .bean_wgt-pager-num.bean_wgt-on{background:var(--bw-accent);color:#fff;
	border-color:var(--bw-accent);}
.bean_wgt-pager .bean_wgt-pager-prev,
.bean_wgt-pager .bean_wgt-pager-next{font-size:14px;width:30px;padding:0;}

/* ───────── 갤러리 — 화면 폭 기준 4→3→2→1 고정.
   --bw-gal-ratio 는 썸네일 비율 (thumbnail_width/height 입력값에서 산출, 기본 1=정사각) ───────── */
.bean_wgt-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 20px;
	--bw-gal-ratio:1;}
@media(max-width:1100px){.bean_wgt-gal{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.bean_wgt-gal{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.bean_wgt-gal{grid-template-columns:1fr;}}
.bean_wgt-gi{display:block;color:var(--bw-text) !important;}
.bean_wgt-gt{width:100%;aspect-ratio:var(--bw-gal-ratio,1);border-radius:8px;
	background:linear-gradient(160deg,var(--bw-surf),var(--bw-card));
	border:1px solid var(--bw-line);background-size:cover;background-position:center;
	transition:.2s;}
.bean_wgt-gi:hover .bean_wgt-gt{transform:translateY(-2px);border-color:var(--bw-accent);}
.bean_wgt-gc{font-size:12px;color:var(--bw-text);margin-top:8px;line-height:1.4;
	overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.bean_wgt-gd{font-size:11px;color:var(--bw-muted);margin-top:3px;}

/* ───────── 웹진 ───────── */
.bean_wgt-wz{display:flex;flex-direction:column;}
.bean_wgt-wi{display:flex;gap:18px;padding:16px 20px;border-bottom:1px solid var(--bw-line);
	color:var(--bw-text) !important;transition:background .15s;}
.bean_wgt-wi:last-child{border-bottom:0;}
.bean_wgt-wi:hover{background:var(--bw-surf);}
.bean_wgt-wt{flex:0 0 130px;aspect-ratio:4/3;border-radius:8px;
	background:linear-gradient(160deg,var(--bw-surf),var(--bw-card));
	border:1px solid var(--bw-line);background-size:cover;background-position:center;}
.bean_wgt-wb{flex:1;min-width:0;display:flex;flex-direction:column;}
.bean_wgt-wcat{font-size:11px;font-weight:800;color:var(--bw-accent);
	letter-spacing:.5px;margin-bottom:6px;}
.bean_wgt-wh{font-size:15px;font-weight:700;color:var(--bw-text);line-height:1.4;
	margin:0;letter-spacing:-.2px;
	overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.bean_wgt-wsum{font-size:12.5px;color:var(--bw-muted);line-height:1.6;margin:6px 0 0;
	overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.bean_wgt-wmeta{display:flex;gap:10px;margin-top:10px;font-size:11.5px;color:var(--bw-muted);}
.bean_wgt-wc{color:var(--bw-accent);font-weight:700;}

/* ───────── 최근 댓글 ───────── */
.bean_wgt-cmts{padding:6px 0;}
.bean_wgt-ci{display:block;padding:12px 20px;border-bottom:1px solid var(--bw-line);
	color:var(--bw-text) !important;transition:background .15s;}
.bean_wgt-ci:last-child{border-bottom:0;}
.bean_wgt-ci:hover{background:var(--bw-surf);}
.bean_wgt-cx{font-size:13px;color:var(--bw-text);line-height:1.55;
	overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.bean_wgt-cm{font-size:11.5px;color:var(--bw-muted);margin-top:4px;line-height:1.5;}
.bean_wgt-cs{color:var(--bw-accent);font-weight:700;}

/* ───────── 로스터 (가로 스크롤) ───────── */
.bean_wgt-roster{padding:20px 0 24px;}
.bean_wgt-roster-scroll{display:flex;gap:18px;overflow-x:auto;padding:0 20px 8px;
	scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.bean_wgt-roster-scroll::-webkit-scrollbar{height:6px;}
.bean_wgt-roster-scroll::-webkit-scrollbar-thumb{background:var(--bw-line);border-radius:3px;}
.bean_wgt-rost-item{flex:0 0 220px;scroll-snap-align:start;color:var(--bw-text) !important;}
.bean_wgt-rost-ph{height:286px;border-radius:12px;
	background:linear-gradient(160deg,var(--bw-surf),var(--bw-card));
	border:1px solid var(--bw-line);background-size:cover;background-position:center top;transition:.2s;}
.bean_wgt-rost-item:hover .bean_wgt-rost-ph{transform:translateY(-3px);border-color:var(--bw-accent);}
.bean_wgt-rost-name{margin:12px 0 4px;font-size:17px;font-weight:700;letter-spacing:-.2px;
	color:var(--bw-text);}
.bean_wgt-rost-role{font-size:11.5px;color:var(--bw-muted);letter-spacing:.5px;
	text-transform:uppercase;margin:0;}

/* ───────── 탭 (tab_top / tab_left) ───────── */
.bean_wgt-tabs{display:flex;gap:0;border-bottom:1px solid var(--bw-line);padding:0 12px;}
.bean_wgt-tabs li{margin:0;}
.bean_wgt-tabs a{display:block;padding:12px 14px;font-size:12.5px;font-weight:700;
	color:var(--bw-muted) !important;border-bottom:2px solid transparent;margin-bottom:-1px;}
.bean_wgt-tabs a:hover{color:var(--bw-text) !important;}
.bean_wgt-tabs li.bean_wgt-tab-on a{color:var(--bw-accent) !important;border-bottom-color:var(--bw-accent);}
.bean_wgt-tabpanels>.bean_wgt-tabpanel{display:none;}
.bean_wgt-tabpanels>.bean_wgt-tabpanel.bean_wgt-on{display:block;}

.bean_wgt-tabwrap{display:flex;align-items:stretch;}
.bean_wgt-tabs-left{flex:0 0 130px;flex-direction:column;border-bottom:0;border-right:1px solid var(--bw-line);padding:8px 0;}
.bean_wgt-tabs-left a{padding:10px 16px;border-bottom:0;border-right:2px solid transparent;margin-bottom:0;margin-right:-1px;}
.bean_wgt-tabs-left li.bean_wgt-tab-on a{border-right-color:var(--bw-accent);}
.bean_wgt-tabwrap>.bean_wgt-tabpanels{flex:1;min-width:0;}

/* ───────── 테이블형 (markup_type='table') ───────── */
.bean_wgt-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.bean_wgt-tbl tr{border-bottom:1px solid var(--bw-line);}
.bean_wgt-tbl tr:last-child{border-bottom:0;}
.bean_wgt-tbl tr:hover{background:var(--bw-surf);}
.bean_wgt-tbl td{padding:10px 12px;vertical-align:middle;}
.bean_wgt-tbl td:first-child{padding-left:20px;}
.bean_wgt-tbl td:last-child{padding-right:20px;}
.bean_wgt-tbl .bean_wgt-td-t{color:var(--bw-text);}
.bean_wgt-tbl .bean_wgt-td-t .bean_wgt-tag{margin-right:6px;}
.bean_wgt-tbl .bean_wgt-td-t .bean_wgt-t{color:var(--bw-text) !important;}
.bean_wgt-tbl .bean_wgt-td-n{color:var(--bw-muted);font-size:12px;white-space:nowrap;width:80px;}
.bean_wgt-tbl .bean_wgt-td-d{color:var(--bw-muted);font-size:11.5px;white-space:nowrap;width:90px;font-variant-numeric:tabular-nums;}

/* ───────── 보조 요소 ───────── */
.bean_wgt-new{display:inline-block;margin-left:6px;padding:1px 5px;font-size:9px;font-weight:800;
	background:var(--bw-accent);color:#fff !important;border-radius:3px;letter-spacing:.3px;
	vertical-align:middle;}
.bean_wgt-n{flex:0 0 auto;font-size:11.5px;color:var(--bw-muted);}
.bean_wgt-icons{display:inline-flex;gap:3px;align-items:center;}
.bean_wgt-icons img{height:13px;width:auto;}

/* ───────── 반응형 ───────── */
@media(max-width:680px){
	.bean_wgt-tabwrap{flex-direction:column;}
	.bean_wgt-tabs-left{flex:0 0 auto;flex-direction:row;border-right:0;border-bottom:1px solid var(--bw-line);padding:0 12px;}
	.bean_wgt-tabs-left a{border-right:0;border-bottom:2px solid transparent;}
	.bean_wgt-tabs-left li.bean_wgt-tab-on a{border-right-color:transparent;border-bottom-color:var(--bw-accent);}
	.bean_wgt-gal{grid-template-columns:repeat(2,1fr);}
	.bean_wgt-wi{flex-direction:column;}
	.bean_wgt-wt{flex:0 0 auto;width:100%;aspect-ratio:16/9;}
	.bean_wgt-rost-item{flex:0 0 170px;}
	.bean_wgt-rost-ph{height:220px;}
}

/* ───────── 피처드 (featured) — 첫 글 hero + 나머지 작은 리스트 ───────── */
.bean_wgt-feat{display:flex;flex-direction:column;}
.bean_wgt-feat-hero{display:block;color:var(--bw-text) !important;
	border-bottom:1px solid var(--bw-line);transition:background .15s;}
.bean_wgt-feat-hero:hover{background:var(--bw-surf);}
.bean_wgt-feat-cover{width:100%;aspect-ratio:16/9;
	background:linear-gradient(160deg,var(--bw-surf),var(--bw-card));
	background-size:cover;background-position:center;}
.bean_wgt-feat-body{padding:18px 20px;}
.bean_wgt-feat-cat{font-size:11px;font-weight:800;color:var(--bw-accent);
	letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase;}
.bean_wgt-feat-title{margin:0;font-size:18px;font-weight:800;line-height:1.35;
	color:var(--bw-text);letter-spacing:-.3px;
	overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.bean_wgt-feat-sum{margin:8px 0 0;font-size:13px;color:var(--bw-muted);line-height:1.6;
	overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.bean_wgt-feat-meta{display:flex;gap:10px;margin-top:12px;font-size:11.5px;color:var(--bw-muted);}
.bean_wgt-feat-rest{padding:6px 0;}

/* ───────── 미디어 리스트 (media_list) — 좌측 썸 + 우측 텍스트 ───────── */
.bean_wgt-medlist{padding:6px 0;}
.bean_wgt-medlist>li{margin:0;}
.bean_wgt-medi{display:flex;align-items:flex-start;gap:12px;padding:11px 20px;
	color:var(--bw-text) !important;transition:background .15s;}
.bean_wgt-medi:hover{background:var(--bw-surf);}
.bean_wgt-medt{flex:0 0 60px;width:60px;height:60px;border-radius:8px;
	background:linear-gradient(160deg,var(--bw-surf),var(--bw-card));
	border:1px solid var(--bw-line);background-size:cover;background-position:center;}
.bean_wgt-medb{flex:1;min-width:0;}
.bean_wgt-medcat{font-size:10px;font-weight:800;color:var(--bw-accent);
	letter-spacing:.3px;margin-bottom:3px;text-transform:uppercase;}
.bean_wgt-medt-title{font-size:13.5px;font-weight:600;color:var(--bw-text);line-height:1.45;
	overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.bean_wgt-medmeta{display:flex;gap:8px;margin-top:5px;font-size:11px;color:var(--bw-muted);}
.bean_wgt-medcomment{color:var(--bw-accent);font-weight:700;}

/* ============================================================
   탭 디자인 변형 10종 — bean_wgt-tabs--{name}
   기본(.bean_wgt-tabs-top / .bean_wgt-tabs-left) 위에 변형 클래스로 덮어쓰기
   ============================================================ */

/* --- 알약형 (pill) --- */
.bean_wgt-tabs--pill{border-bottom:0;padding:14px 16px;gap:6px;}
.bean_wgt-tabs--pill li{margin:0;}
.bean_wgt-tabs--pill a{padding:8px 16px;border-radius:999px;border-bottom:0 !important;margin-bottom:0;
	background:transparent;color:var(--bw-muted) !important;font-weight:700;}
.bean_wgt-tabs--pill a:hover{background:var(--bw-surf);color:var(--bw-text) !important;}
.bean_wgt-tabs--pill li.bean_wgt-tab-on a{background:var(--bw-accent);color:#fff !important;}

/* --- 버튼형 (액센트 배경) --- */
.bean_wgt-tabs--button{border-bottom:0;padding:14px 16px;gap:8px;}
.bean_wgt-tabs--button a{padding:9px 18px;border-radius:6px;border-bottom:0 !important;margin-bottom:0;
	background:var(--bw-surf);color:var(--bw-text) !important;font-weight:700;}
.bean_wgt-tabs--button a:hover{background:color-mix(in srgb,var(--bw-accent) 12%,var(--bw-surf));}
.bean_wgt-tabs--button li.bean_wgt-tab-on a{background:var(--bw-accent);color:#fff !important;}

/* --- 아웃라인 버튼 --- */
.bean_wgt-tabs--outline{border-bottom:0;padding:14px 16px;gap:8px;}
.bean_wgt-tabs--outline a{padding:8px 16px;border-radius:6px;border:1px solid var(--bw-line);border-bottom:1px solid var(--bw-line) !important;
	margin-bottom:0;background:transparent;color:var(--bw-text) !important;font-weight:700;}
.bean_wgt-tabs--outline a:hover{border-color:var(--bw-accent);color:var(--bw-accent) !important;}
.bean_wgt-tabs--outline li.bean_wgt-tab-on a{border-color:var(--bw-accent);background:color-mix(in srgb,var(--bw-accent) 12%,transparent);color:var(--bw-accent) !important;}

/* --- 미니멀 (구분선 없음) --- */
.bean_wgt-tabs--minimal{border-bottom:0;padding:14px 20px 8px;gap:18px;}
.bean_wgt-tabs--minimal a{padding:6px 0;border-bottom:0 !important;margin-bottom:0;font-weight:700;
	color:var(--bw-muted) !important;}
.bean_wgt-tabs--minimal a:hover{color:var(--bw-text) !important;}
.bean_wgt-tabs--minimal li.bean_wgt-tab-on a{color:var(--bw-text) !important;}

/* --- 카드형 (꼭지가 살짝 들림) --- */
.bean_wgt-tabs--card{border-bottom:1px solid var(--bw-line);padding:8px 12px 0;gap:4px;}
.bean_wgt-tabs--card a{padding:10px 18px;border-radius:8px 8px 0 0;border:1px solid transparent;border-bottom:0 !important;margin-bottom:-1px;
	background:transparent;color:var(--bw-muted) !important;font-weight:700;}
.bean_wgt-tabs--card a:hover{color:var(--bw-text) !important;}
.bean_wgt-tabs--card li.bean_wgt-tab-on a{background:var(--bw-card);border-color:var(--bw-line);
	color:var(--bw-accent) !important;position:relative;}

/* --- 세그먼티드 (iOS 풍) --- */
.bean_wgt-tabs--segmented{border-bottom:0;padding:14px 20px;display:flex;gap:0;}
.bean_wgt-tabs--segmented ul,.bean_wgt-tabs--segmented{}
.bean_wgt-tabs--segmented li{flex:1;margin:0;}
.bean_wgt-tabs--segmented li:first-child a{border-radius:8px 0 0 8px;}
.bean_wgt-tabs--segmented li:last-child a{border-radius:0 8px 8px 0;}
.bean_wgt-tabs--segmented a{display:block;padding:10px 14px;text-align:center;border:1px solid var(--bw-line);
	border-bottom:1px solid var(--bw-line) !important;border-right:0;margin-bottom:0;
	background:var(--bw-card);color:var(--bw-text) !important;font-weight:700;}
.bean_wgt-tabs--segmented li:last-child a{border-right:1px solid var(--bw-line);}
.bean_wgt-tabs--segmented li.bean_wgt-tab-on a{background:var(--bw-accent);color:#fff !important;border-color:var(--bw-accent);}

/* --- 점 인디케이터 --- */
.bean_wgt-tabs--dot{border-bottom:1px solid var(--bw-line);padding:0 14px;gap:6px;}
.bean_wgt-tabs--dot a{padding:14px 12px;border-bottom:0 !important;margin-bottom:-1px;
	color:var(--bw-muted) !important;font-weight:700;position:relative;}
.bean_wgt-tabs--dot a:hover{color:var(--bw-text) !important;}
.bean_wgt-tabs--dot li.bean_wgt-tab-on a{color:var(--bw-accent) !important;}
.bean_wgt-tabs--dot li.bean_wgt-tab-on a::after{content:"";position:absolute;left:50%;bottom:8px;
	transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--bw-accent);}

/* --- 화살표 (chevron) --- */
.bean_wgt-tabs--arrow{border-bottom:1px solid var(--bw-line);padding:0 12px;gap:4px;}
.bean_wgt-tabs--arrow a{padding:14px 20px;border-bottom:0 !important;margin-bottom:-1px;
	color:var(--bw-muted) !important;font-weight:700;position:relative;}
.bean_wgt-tabs--arrow li.bean_wgt-tab-on a{color:var(--bw-accent) !important;}
.bean_wgt-tabs--arrow li.bean_wgt-tab-on a::after{content:"";position:absolute;left:50%;bottom:-7px;
	transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--bw-card);
	border-right:1px solid var(--bw-line);border-bottom:1px solid var(--bw-line);}

/* --- 대문자 트래킹 --- */
.bean_wgt-tabs--caps{border-bottom:2px solid var(--bw-line);padding:0 14px;gap:0;}
.bean_wgt-tabs--caps a{padding:14px 18px;border-bottom:2px solid transparent;margin-bottom:-2px;
	font-size:11px;font-weight:900;letter-spacing:2.5px;text-transform:uppercase;
	color:var(--bw-muted) !important;}
.bean_wgt-tabs--caps a:hover{color:var(--bw-text) !important;}
.bean_wgt-tabs--caps li.bean_wgt-tab-on a{color:var(--bw-accent) !important;border-bottom-color:var(--bw-accent);}

/* --- 왼쪽 박스형 (배경 채움) --- */
.bean_wgt-tabs-left.bean_wgt-tabs--box{padding:8px 8px 8px 8px;border-right:1px solid var(--bw-line);background:var(--bw-surf);}
.bean_wgt-tabs-left.bean_wgt-tabs--box a{padding:10px 14px;border-right:0 !important;margin-right:0;
	border-radius:8px;font-weight:700;color:var(--bw-muted) !important;}
.bean_wgt-tabs-left.bean_wgt-tabs--box a:hover{background:var(--bw-card);color:var(--bw-text) !important;}
.bean_wgt-tabs-left.bean_wgt-tabs--box li.bean_wgt-tab-on a{background:var(--bw-accent);color:#fff !important;}

/* --- 좁은 화면에서 left → 모든 변형도 가로로 떨어짐 --- */
@media(max-width:680px){
	.bean_wgt-tabs-left.bean_wgt-tabs--box{flex-direction:row;border-right:0;border-bottom:1px solid var(--bw-line);padding:8px;}
}

/* Original file: widgetstyles/bean_section/style.css */

/* BEAN · 섹션 헤드 — 큰 제목 + serif 이탤릭 강조 + 더보기 + 굵은 밑줄 */
.bean_ws-section{
	--bws-text:#1a1a1f;--bws-muted:#7a7a85;--bws-line:#e6e6e6;--bws-accent:#5b2ed8;
	--bws-serif:'Times New Roman',serif;
	font-family:'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif;
	color:var(--bws-text);}
.bean_root .bean_ws-section{--bws-text:var(--bean-text);--bws-muted:var(--bean-muted);
	--bws-line:var(--bean-line);--bws-accent:var(--bean-accent);--bws-serif:var(--bean-serif);}
.bean_ws-section a,.bean_ws-section a:link,.bean_ws-section a:visited,
.bean_ws-section a:hover,.bean_ws-section a:focus{text-decoration:none;color:inherit;}
.bean_ws-section .bean_ws-head{display:flex;justify-content:space-between;align-items:baseline;
	border-bottom:1px solid var(--bws-line);padding:0 0 18px;margin-bottom:32px;
	flex-wrap:wrap;gap:12px;}
.bean_ws-section .bean_ws-title{margin:0;font-size:clamp(22px,3.2vw,32px);font-weight:800;
	letter-spacing:-.8px;color:var(--bws-text);line-height:1.2;}
.bean_ws-section .bean_ws-title i{font-family:var(--bws-serif);font-style:italic;font-weight:400;
	color:var(--bws-muted);}
.bean_ws-section .bean_ws-more{font-size:12px;font-weight:700;letter-spacing:1px;
	color:var(--bws-accent) !important;}
.bean_ws-section .bean_ws-more:hover{opacity:.7;}