.yl-accordion-detail-pro {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, .35cqw, 4px);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.yl-accordion-detail-pro .yl-adp-title {
  margin: 0 0 4px;
  color: var(--yl-adp-text, #183327);
  font-weight: 800;
  font-size: clamp(.92rem, 2.6cqw, 1.08rem);
}

.yl-accordion-detail-pro .yl-adp-item {
  border: 1px solid var(--yl-adp-border, rgba(24, 51, 39, .13));
  border-radius: 10px;
  background: var(--yl-adp-bg, rgba(255, 251, 242, .88));
  box-shadow: 0 6px 16px rgba(18, 38, 29, .035);
  overflow: hidden;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.yl-accordion-detail-pro .yl-adp-item:hover,
.yl-accordion-detail-pro .yl-adp-item:focus-within {
  border-color: var(--yl-adp-hover-border, rgba(49, 90, 57, .26));
  background: var(--yl-adp-hover-bg, rgba(249, 244, 234, .98));
  box-shadow: 0 8px 18px rgba(18, 38, 29, .07);
  transform: translateY(-1px);
}

.yl-accordion-detail-pro .yl-adp-toggle {
  width: 100%;
  min-height: clamp(36px, 6.2cqw, 50px);
  border: 0;
  background: transparent;
  color: var(--yl-adp-text, #183327);
  display: grid;
  grid-template-columns: clamp(26px, 5.2cqw, 38px) minmax(0, 1fr) 24px;
  align-items: center;
  gap: clamp(8px, 1.4cqw, 13px);
  padding: clamp(7px, 1.15cqw, 11px);
  text-align: left;
  font-weight: 750;
  line-height: 1.2;
}

.yl-accordion-detail-pro .yl-adp-icon {
  width: clamp(24px, 4.7cqw, 34px);
  height: clamp(24px, 4.7cqw, 34px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--yl-adp-accent, #315a39);
}

.yl-accordion-detail-pro .yl-adp-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.yl-accordion-detail-pro .yl-adp-label {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(.78rem, 2.05cqw, .96rem);
}

.yl-accordion-detail-pro .yl-adp-mark {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--yl-adp-accent, #315a39);
  font-size: 20px;
  line-height: 1;
  transition: transform .18s ease;
}

.yl-accordion-detail-pro .yl-adp-panel {
  display: none;
  border-top: 1px solid var(--yl-adp-border, rgba(24, 51, 39, .13));
  background: var(--yl-adp-open-bg, rgba(49, 90, 57, .30));
  padding: 0 clamp(10px, 1.8cqw, 16px) clamp(10px, 1.8cqw, 14px) calc(clamp(9px, 1.5cqw, 14px) + clamp(26px, 5.2cqw, 38px) + clamp(8px, 1.4cqw, 13px));
}

.yl-accordion-detail-pro .yl-adp-body {
  max-height: var(--yl-adp-max-h, 180px);
  overflow-y: auto;
  padding-top: 8px;
  padding-right: 6px;
  color: var(--yl-adp-open-text, #14261b);
  font-size: clamp(.76rem, 1.7cqw, .9rem);
  line-height: 1.55;
  scrollbar-width: thin;
}

.yl-accordion-detail-pro .yl-adp-body::-webkit-scrollbar {
  width: 7px;
}

.yl-accordion-detail-pro .yl-adp-body::-webkit-scrollbar-thumb {
  background: rgba(49, 90, 57, .35);
  border-radius: 999px;
}

.yl-accordion-detail-pro .yl-adp-content-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.yl-accordion-detail-pro .yl-adp-content-link:hover,
.yl-accordion-detail-pro .yl-adp-content-link:focus {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.yl-accordion-detail-pro .yl-adp-item.is-open .yl-adp-panel {
  display: block;
}

.yl-accordion-detail-pro .yl-adp-item.is-open .yl-adp-mark {
  transform: rotate(45deg);
}

.yl-accordion-detail-pro--white_dark {
  --yl-adp-bg: #ffffff;
  --yl-adp-border: rgba(15, 23, 42, .12);
  --yl-adp-text: #0f172a;
  --yl-adp-muted: #475569;
  --yl-adp-accent: #111827;
  --yl-adp-open-bg: rgba(15, 23, 42, .12);
  --yl-adp-open-text: #0f172a;
  --yl-adp-hover-bg: #f8fafc;
  --yl-adp-hover-border: rgba(15, 23, 42, .24);
}

.yl-accordion-detail-pro--soft_blue {
  --yl-adp-bg: #f7fbff;
  --yl-adp-border: rgba(37, 99, 235, .14);
  --yl-adp-text: #172554;
  --yl-adp-muted: #475569;
  --yl-adp-accent: #2563eb;
  --yl-adp-open-bg: rgba(37, 99, 235, .16);
  --yl-adp-open-text: #172554;
  --yl-adp-hover-bg: #eef6ff;
  --yl-adp-hover-border: rgba(37, 99, 235, .28);
}

@container (max-width: 420px) {
  .yl-accordion-detail-pro .yl-adp-toggle {
    grid-template-columns: 26px minmax(0, 1fr) 22px;
    min-height: 38px;
  }

  .yl-accordion-detail-pro .yl-adp-panel {
    padding-left: 10px;
  }
}