/* 두목넷 강좌 혜택: Bootstrap 버튼과 Tooltip을 사용합니다. */
.dm-course-benefits{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 16px;margin:10px 0 12px;background:var(--bs-light,#f8f9fa);border:1px solid var(--bs-border-color,#dee2e6);border-radius:var(--bs-border-radius,.375rem);font-family:var(--bs-body-font-family,inherit);text-align:left}
.dm-benefits-label{font-size:15px;font-weight:600;color:var(--bs-body-color,#253046);margin-right:4px}
.dm-course-benefits .dm-benefit.btn{padding:3px 0;border:0;font-family:inherit;font-size:15px;font-weight:500;line-height:1.6;text-decoration:none;white-space:nowrap;background:transparent;box-shadow:none}
.dm-course-benefits .dm-benefit-supported{color:var(--bs-primary,#2451d6)}
.dm-course-benefits .dm-benefit-unavailable{color:#737d8b;text-decoration:line-through!important;text-decoration-thickness:1px}
.dm-course-benefits .dm-benefit:focus-visible{outline:3px solid var(--bs-primary,#2451d6);outline-offset:3px}
.dm-benefit-note{font-family:var(--bs-body-font-family,inherit);font-size:14px;line-height:1.6;color:var(--bs-secondary,#68758a);margin:0 0 14px}
.course .dm-course-benefits{gap:8px 18px;padding:16px 20px}
.course .dm-benefits-label,.course .dm-course-benefits .dm-benefit.btn{font-size:13px}
.course .dm-course-benefits{justify-content:flex-end}
.dm-benefit-tooltip .tooltip-inner{max-width:290px;padding:12px 16px;font-family:var(--bs-body-font-family,inherit);font-size:14px;line-height:1.65;text-align:left}
@media(max-width:767px){.dm-course-benefits{gap:6px 12px;padding:12px 14px}.course .dm-course-benefits{padding:14px 16px}.dm-benefit-tooltip .tooltip-inner{max-width:min(290px,calc(100vw - 32px))}}

.course .dm-course-title-benefits .dm-course-benefits{justify-content:flex-start;background:transparent;border:0;padding:0;margin:0 0 10px;gap:6px 14px}
.course .dm-course-title-benefits .dm-benefits-label,.course .dm-course-title-benefits .dm-benefit.btn{font-size:12px}
.course .dm-course-title-benefits .dm-benefits-label{color:#d6e0f0}
.course .dm-course-title-benefits .dm-benefit-supported{color:#d6e8ff}
.course .dm-course-title-benefits .dm-benefit-unavailable{color:#aebbd0}

/* 제목 위 혜택 라벨과 버튼의 글자 기준선·높이를 통일합니다. */
.course .dm-course-title-benefits .dm-benefits-label,.course .dm-course-title-benefits .dm-benefit.btn{display:inline-flex;align-items:center;line-height:1.6;padding:0;margin-top:0;margin-bottom:0;vertical-align:middle}

/* 목록에서는 짧은 네 항목과 구분선으로 압축합니다. */
.dm-course-benefits.dm-course-benefits-compact{gap:0;padding:8px 12px;margin:8px 0 10px;flex-wrap:nowrap}
.dm-course-benefits-compact .dm-benefit.btn{padding:1px 0;font-size:14px;line-height:1.5;display:inline-flex;align-items:center}
.dm-course-benefits-compact .dm-benefit+.dm-benefit::before{content:"";display:inline-block;height:.8em;border-left:1px solid #bbc3ce;margin:0 8px}
@media(max-width:380px){.dm-course-benefits.dm-course-benefits-compact{padding:8px}.dm-course-benefits-compact .dm-benefit.btn{font-size:13px}.dm-course-benefits-compact .dm-benefit+.dm-benefit::before{margin:0 6px}}

/* 상품 상세의 혜택은 여백을 줄이고 텍스트를 수직 중앙에 배치합니다. */
.dm-course-benefits.dm-course-benefits-compact .dm-benefit.btn{margin-top:0;margin-bottom:0;min-height:0;align-self:center}
