.yb-home {
  --yb-green: #0ec300;
  --yb-line: #303b31;
  --yb-muted: #aab8a9;
  padding: clamp(16px, 3vw, 30px);
  border-radius: 14px;
  color: #f6faf5;
  background: #101512;
}

.yb-home * { box-sizing: border-box; }

.yb-featured {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--yb-line);
  border-bottom: 4px solid var(--yb-green);
  border-radius: 12px;
  background: #191f1a;
  text-decoration: none;
}

.yb-featured--cover-only { grid-template-columns: 1fr; }

.yb-featured-cover,
.yb-featured-sample {
  display: block;
  height: clamp(260px, 38vw, 440px);
  overflow: hidden;
  border-radius: 7px;
  background-color: #212b21;
}

.yb-featured-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 621px) {
  .yb-featured-sample {
    background-image: var(--yb-sample-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

.yb-home-section { margin-top: 45px; }

.yb-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 17px;
}

.yb-section-heading h2 {
  margin: 0 0 5px;
  padding: 0 0 8px;
  border-bottom: 3px solid var(--yb-green);
  color: #f6faf5;
  font-size: clamp(20px, 2.5vw, 27px);
  background: none;
  box-shadow: none;
}

.yb-section-heading p { margin: 0; color: var(--yb-muted); font-size: 13px; }
.yb-section-heading a { color: #64e659; font-size: 13px; text-decoration: none; }

.yb-work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.yb-work-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--yb-line);
  border-radius: 10px;
  background: #1b221c;
}

.yb-work-card-main { display: block; color: inherit; text-decoration: none; }

.yb-work-card-image {
  display: block;
  aspect-ratio: 3 / 4;
  background: #263026;
}

.yb-work-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.yb-work-card h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  padding: 10px 11px 5px;
  color: #f6faf5;
  font-size: 14px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  border: 0;
  background: none;
  box-shadow: none;
}

.yb-card-circle,
.yb-card-sample { display: block; padding: 4px 11px; font-size: 12px; text-decoration: none; }
.yb-card-circle { color: var(--yb-muted); }
.yb-card-sample { margin: 4px 11px 11px; padding: 8px 10px; border-radius: 6px; color: #082b04; text-align: center; font-weight: 700; background: var(--yb-green); }

.yb-circle-list,
.yb-genre-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.yb-circle-list a,
.yb-genre-list a {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--yb-line);
  border-radius: 8px;
  color: #f6faf5;
  font-size: 13px;
  text-decoration: none;
  background: #1b221c;
  overflow-wrap: anywhere;
}

.yb-circle-list span,
.yb-genre-list span { flex: none; color: var(--yb-muted); font-size: 11px; }

.yb-featured-circles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.yb-circle-feature { min-width: 0; padding: 15px; border: 1px solid var(--yb-line); border-radius: 9px; background: #1b221c; }
.yb-circle-feature h3 { margin: 0 0 12px; font-size: 16px; }
.yb-circle-feature h3 a { color: #f6faf5; text-decoration: none; }
.yb-circle-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.yb-circle-works a { display: block; aspect-ratio: 3 / 4; background: #263026; }
.yb-circle-works img { display: block; width: 100%; height: 100%; object-fit: contain; }

.yb-home-search { max-width: 620px; margin-bottom: 18px; }
.yb-home-search label { display: block; margin-bottom: 7px; color: var(--yb-muted); font-size: 13px; }
.yb-home-search > div { display: flex; gap: 8px; }
.yb-home-search input[type="search"] { min-width: 0; flex: 1; padding: 12px; border: 1px solid var(--yb-line); border-radius: 7px; color: #f6faf5; background: #1b221c; }
.yb-home-search button { flex: none; padding: 11px 19px; border: 0; border-radius: 7px; color: #082b04; font-weight: 700; background: var(--yb-green); }
.yb-final-search { padding-bottom: 8px; }

.yb-work-article {
  --yb-green: #0ec300;
  --yb-line: #dfe9dc;
  --yb-muted: #5d6a5b;
  color: #172017;
}

.yb-work-article h2 {
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--yb-green);
}

.yb-disclosure,
.yb-price-note { color: var(--yb-muted); font-size: 13px; }

.yb-sample-reader { display: grid; gap: 12px; max-width: 720px; margin: 0 auto; }
.yb-sample-reader img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #f1f4ef; }

.yb-work-detail {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.yb-package-image { display: block; width: 100%; height: auto; }
.yb-detail-list { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 0 14px; margin: 0; border-top: 1px solid var(--yb-line); }
.yb-detail-list dt,
.yb-detail-list dd { min-width: 0; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--yb-line); line-height: 1.5; overflow-wrap: anywhere; }
.yb-detail-list dt { color: var(--yb-muted); }

.yb-aff-button {
  display: block;
  max-width: 440px;
  margin: 28px auto 8px;
  padding: 15px 20px;
  border-radius: 8px;
  color: #082b04 !important;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  background: var(--yb-green);
}

.yb-aff-button:hover,
.yb-aff-button:focus-visible,
.yb-card-sample:hover,
.yb-home-search button:hover { filter: brightness(.94); }

@media (max-width: 800px) {
  .yb-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yb-circle-list,
  .yb-genre-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .yb-featured { grid-template-columns: 1fr; }
  .yb-featured-cover { height: min(100vw, 430px); }
  .yb-featured-sample { display: none; }
  .yb-home-section { margin-top: 34px; }
  .yb-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .yb-work-card h3 { font-size: 12px; }
  .yb-card-circle,
  .yb-card-sample { font-size: 11px; }
  .yb-featured-circles { grid-template-columns: 1fr; }
  .yb-work-detail { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 12px; }
  .yb-detail-list { grid-template-columns: 64px minmax(0, 1fr); gap: 0 8px; font-size: 12px; }
}