/* ============================================================
   BEAN 콘텐츠 위젯 스킨 — 자체 격리 CSS
   레이아웃과 무관하게 동작하도록 .bean_wgt 자체에 변수 폴백 정의.
   bean 레이아웃 안에 들어가면 부모의 --bean-* 변수가 우선 적용됨.
   Pretendard 폰트도 자체 @import (다른 레이아웃에서 사용 시에도 동일 폰트 보장)
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* 기본 = 미니멀: 테두리·배경 없음, 타이포만. 어느 페이지에 얹어도 자연스럽게 흐름.
   카드 모드는 .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;}
}