body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.oss-page { flex: 1 0 auto; padding: clamp(24px, 3vw, 48px) var(--gutter) clamp(80px, 8vw, 140px); }
.oss-footer { flex: none; }
.oss-hero { max-width: 920px; margin-bottom: clamp(32px, 4vw, 64px); }
.oss-hero h1 { font-family: var(--serif); font-size: clamp(30px, 3.3vw, 50px); line-height: 1.3; }
.oss-intro { max-width: 680px; margin-top: 10px; color: #596A5E; font-size: 15px; line-height: 1.7; }
.oss-layout { display: grid; grid-template-columns: minmax(185px, 230px) minmax(0, 1fr); gap: clamp(30px, 4vw, 68px); align-items: start; }
.oss-sidebar { position: sticky; top: 24px; }
.oss-sidebar h2 { margin: 0 0 14px 12px; color: #6A796C; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.oss-categories { display: flex; flex-direction: column; gap: 3px; }
.oss-category { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: #4E6152; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.oss-category:hover { background: #EBF0E6; }
.oss-category.is-active { background: #E3EBD9; color: var(--ink); font-weight: 700; }
.oss-category__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oss-category__count { flex: none; color: #89988B; font-size: 12px; font-weight: 500; }
.oss-content { min-width: 0; }
.oss-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.oss-search { display: flex; align-items: center; gap: 10px; width: min(440px, 100%); height: 48px; padding: 0 15px; border: 1px solid #E1E8DC; border-radius: 11px; background: #FFF; }
.oss-search:focus-within { border-color: #83A772; box-shadow: 0 0 0 3px rgba(131, 167, 114, .15); }
.oss-search svg { flex: none; width: 19px; height: 19px; fill: none; stroke: #879589; stroke-width: 1.8; stroke-linecap: round; }
.oss-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; }
.oss-search input::placeholder { color: #A0AAA0; }
.oss-count { flex: none; color: #788779; font-size: 13px; }
.oss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.oss-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 16px clamp(18px, 2vw, 26px); border: 1px solid #E8ECE4; border-radius: 14px; background: #FFF; transition: border-color .2s, transform .2s, box-shadow .2s; }
.oss-card:hover { transform: translateY(-2px); border-color: #B9CFAD; box-shadow: 0 10px 28px rgba(16, 45, 28, .07); }
.oss-card__category { color: #6B8E61; font-size: 12px; font-weight: 600; }
.oss-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 8px; }
.oss-card h3 { min-width: 0; overflow-wrap: anywhere; font-size: 19px; line-height: 1.35; }
.oss-card__arrow { flex: none; color: #78A169; font-size: 21px; line-height: 1; }
.oss-card__desc { margin-top: 7px; color: #67766A; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.oss-state { grid-column: 1 / -1; padding: 40px 24px; border: 1px dashed #D8E1D3; border-radius: 14px; color: #718172; text-align: center; }
.oss-more { display: block; min-width: 180px; margin: 32px auto 0; padding: 12px 24px; border: 1px solid #B6C9AD; border-radius: 10px; background: transparent; color: var(--btn); font: inherit; font-weight: 700; cursor: pointer; }
.oss-more:hover { background: #EAF0E4; }
.oss-more[hidden] { display: none; }
.oss-category:focus-visible, .oss-card:focus-visible, .oss-more:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.oss-footer__logo { display: inline-flex; align-items: center; }
.oss-footer__logo img { width: 156px; height: 54px; object-fit: contain; }
.oss-footer__logo:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (max-width: 1000px) { .oss-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .oss-page { padding-top: 22px; }
  .oss-hero { margin-bottom: 26px; }
  .oss-hero h1 { font-size: clamp(26px, 6vw, 32px); }
  .oss-intro { margin-top: 8px; font-size: 14px; }
  .oss-layout { display: block; }
  .oss-sidebar { position: static; margin-bottom: 22px; }
  .oss-sidebar h2 { margin-left: 0; }
  .oss-categories { flex-direction: row; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; overflow-x: auto; scrollbar-width: thin; }
  .oss-category { flex: none; width: auto; min-height: 39px; padding: 8px 12px; border: 1px solid #DFE8D9; border-radius: 999px; background: #FFF; white-space: nowrap; }
  .oss-category.is-active { border-color: #C8D9BC; }
  .oss-category__label { overflow: visible; }
  .oss-toolbar { align-items: stretch; flex-direction: column; gap: 9px; }
  .oss-search { width: 100%; }
  .oss-footer .about__bar { flex-direction: row; text-align: left; }
  .oss-footer__logo img { width: 144px; height: 50px; }
}