.course-catalog-page { background: #f5f7f5; }
.course-catalog-page .topbar { max-width: 1200px; margin: auto; }
.course-catalog-page .brand-title { display: none; }
.course-catalog-page main { display: block; max-width: 1168px; margin: auto; padding: 20px 24px 40px; }
.course-header-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.course-header-links a { color: #fff; text-decoration: none; font-size: 12px; line-height: 1.8; }
.course-header-links a[aria-current] { border-bottom: 2px solid #dcbd6b; }
.course-index-title { display: flex; justify-content: space-between; gap: 20px; align-items: end; padding: 20px 0 25px; }
.course-index-title h1, .course-detail-title h1 { margin: 6px 0 13px; color: #173e2d; font-size: 28px; line-height: 1.5; overflow-wrap: anywhere; text-wrap: balance; }
.course-index-title p { font-size: 13px; color: #52665b; margin: 0; }
.course-index-title p span { display: inline-block; margin-left: 18px; }
.course-index-title time { color: #65766c; font-size: 11px; white-space: nowrap; }
.course-venue-nav { display: flex; flex-wrap: wrap; gap: 0 25px; padding: 12px 0 17px; border-top: 2px solid #14583e; }
.course-venue-nav a { color: #22553c; font-size: 13px; padding: 7px 0; text-decoration: none; }
.course-venue-nav a:hover { text-decoration: underline; }
.course-venue-list { border-top: 1px solid #b7c8be; }
.course-venue { border-bottom: 1px solid #b7c8be; background: #fff; scroll-margin-top: 100px; }
.course-venue > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; padding: 19px 22px; cursor: pointer; font-size: 19px; font-weight: 700; color: #214431; }
.course-venue > summary::-webkit-details-marker { display: none; }
.course-venue > summary small { display: inline-block; margin-left: 20px; font-size: 11px; font-weight: 400; color: #6c7d71; }
.course-venue-count { display: flex; align-items: center; gap: 20px; font-size: 12px; font-weight: 400; white-space: nowrap; color: #64756b; }
.course-venue-count svg { width: 16px; height: 16px; }
.course-venue[open] .course-venue-count svg { transform: rotate(180deg); }
.course-track-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 45px; padding: 0 22px 22px; }
.course-track { min-width: 0; }
.course-track h3 { color: #52675a; margin: 0; padding: 9px 0; font-size: 12px; border-bottom: 1px solid #d4ded7; }
.course-track ul { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; padding: 0; gap: 0 13px; }
.course-track a { display: flex; flex-wrap: wrap; gap: 3px 6px; min-height: 46px; align-content: center; align-items: center; padding: 10px 0; color: #194c35; text-decoration: none; border-bottom: 1px solid #e6ece8; }
.course-track a > span { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.course-track a > small { flex-basis: 100%; font-size: 10px; line-height: 1.65; color: #61776a; }
.course-track a > svg { margin-left: auto; width: 13px; height: 13px; flex: 0 0 13px; }
.course-track a:hover { color: #91671b; }
.course-venue-source { display: inline-flex; gap: 6px; margin: 0 22px 20px; font-size: 10px; color: #65786d; }
.course-venue-source svg { width: 12px; height: 12px; }
.course-scope-note { margin: 20px 0 0; color: #6a796f; font-size: 11px; line-height: 1.9; }
.course-detail-title { padding: 20px 0 0; }
.course-detail-title .page-kicker { margin: 0; font-size: 10px; color: #627a6a; }
.course-distance-nav { display: flex; flex-wrap: wrap; gap: 0 24px; border-top: 1px solid #b7c8be; border-bottom: 1px solid #b7c8be; margin-top: 22px; }
.course-distance-nav a { padding: 13px 0 11px; color: #667b6d; font-size: 12px; text-decoration: none; border-bottom: 3px solid transparent; font-variant-numeric: tabular-nums; }
.course-distance-nav a[aria-current] { color: #14583e; border-color: #14583e; font-weight: 700; }
.course-detail-body { padding: 22px 0 27px; }
.course-overview { margin: 0 0 22px; font-size: 14px; line-height: 2; max-width: 900px; color: #3d5546; }
.course-catalog-page .course-metrics { border-bottom: 1px solid #d0dcd3; }
.course-catalog-page .course-reading { padding: 8px 0 26px; }
.course-viewpoint ul { padding-left: 18px; margin: 0; font-size: 12px; line-height: 1.9; color: #4f6557; }
.course-viewpoint li + li { margin-top: 10px; }
.course-explanation { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 35px; padding: 25px 0; border-top: 1px solid #d0dcd3; }
.course-explanation h3, .course-dimensions h3, .course-cautions h3 { margin: 0 0 9px; font-size: 13px; color: #31543e; }
.course-explanation p { font-size: 13px; line-height: 1.95; margin: 0; color: #4a6052; }
.course-explanation p + p { margin-top: 8px; }
.course-distance-specific { grid-column: 1/-1; }
.course-dimensions { padding: 20px 0 24px; border-top: 1px solid #d0dcd3; }
.course-table-scroll { max-width: 100%; overflow-x: auto; }
.course-catalog-page .course-dimension-table, .graded-detail-page .course-dimension-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.course-dimension-table th, .course-dimension-table td { text-align: left; padding: 12px; border-bottom: 1px solid #d0dcd3; font-size: 12px; white-space: normal; overflow-wrap: anywhere; background: #fff; }
.course-dimension-table thead th { background: #edf3ee; color: #49624f; }
.course-dimension-table th:first-child { width: 19%; }
.course-cautions { padding: 18px 0; border-top: 1px solid #d0dcd3; }
.course-cautions ul { margin: 0; padding-left: 18px; color: #68766b; font-size: 11px; line-height: 1.9; }
.course-library-link { display: inline-flex; gap: 7px; margin-top: 14px; font-size: 12px; }
.course-library-link svg { width: 14px; height: 14px; }
.course-detail-bottom { display: flex; flex-wrap: wrap; gap: 15px 35px; border-top: 2px solid #14583e; padding-top: 20px; }
.course-detail-bottom a { display: inline-flex; gap: 8px; align-items: center; color: #31543e; font-size: 12px; text-decoration: none; }
.course-detail-bottom svg { width: 15px; height: 15px; }
.course-tendencies { padding: 22px 0; margin: 0 0 24px; border-top: 2px solid #315c47; border-bottom: 1px solid #c6d5cb; scroll-margin-top: 140px; }
.course-tendency-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.course-tendency-heading h3 { margin: 0; color: #244d36; font-size: 17px; }
.course-tendency-heading p { margin: 6px 0 0; color: #66796b; font-size: 11px; }
.course-tendency-heading time { white-space: nowrap; color: #6b796e; font-size: 10px; }
.course-tendency-list { margin: 0; }
.course-tendency-row { display: grid; grid-template-columns: 135px minmax(0,1fr); gap: 22px; padding: 19px 0; border-bottom: 1px solid #dce5df; }
.course-tendency-row dt { color: #536a5c; font-size: 12px; font-weight: 700; line-height: 1.8; }
.course-tendency-row dt small { display: block; color: #7a827c; font-size: 10px; font-weight: 400; }
.course-tendency-row dd { min-width: 0; margin: 0; }
.course-tendency-row h4 { margin: 0 0 7px; padding-left: 10px; border-left: 3px solid #8b773b; color: #5d542e; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.course-tendency-row[data-tone="favorable"] h4 { border-color: #387254; color: #285d40; }
.course-tendency-row[data-tone="unfavorable"] h4 { border-color: #ae6356; color: #8a4d43; }
.course-tendency-row dd p { color: #485f50; font-size: 12px; line-height: 1.95; margin: 0; }
.course-tendency-note { margin: 15px 0 0; color: #738075; font-size: 10px; line-height: 1.85; }
.course-references { border-top: 1px solid #d0dcd3; margin-top: 22px; padding: 0; }
.course-references > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 0; color: #586d5e; font-size: 12px; cursor: pointer; list-style: none; }
.course-references > summary::-webkit-details-marker { display: none; }
.course-references > summary svg { width: 15px; height: 15px; flex: 0 0 15px; }
.course-references[open] > summary svg { transform: rotate(180deg); }
.course-references > div { padding: 0 0 17px; color: #69796e; font-size: 11px; line-height: 1.9; }
.course-references p { margin: 0 0 7px; }
.course-references ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 7px 24px; }
.course-references a { color: #4d6d58; overflow-wrap: anywhere; }
.course-references a svg { display: inline-block; width: 11px; height: 11px; vertical-align: middle; margin-left: 5px; }
.course-references summary:focus-visible { outline: 2px solid #14583e; outline-offset: 3px; }
.course-statistics { padding: 22px 0 26px; margin-bottom: 24px; border-bottom: 1px solid #c6d5cb; scroll-margin-top: 140px; overflow-anchor: none; }
.course-stat-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.course-stat-heading h3 { margin: 0 0 8px; font-size: 17px; color: #244d36; }
.course-stat-heading p { margin: 0; color: #6b796e; font-size: 11px; line-height: 1.8; }
.course-stat-total { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.course-stat-total strong { color: #244d36; font-size: 20px; margin-right: 5px; }
.course-stat-total span { display: block; }
.course-stat-tabs { display: flex; gap: 24px; margin: 0 0 17px; border-bottom: 1px solid #b7c8be; }
.course-stat-tabs[hidden], .course-stat-filter[hidden], .course-stat-panel[hidden], [data-frame-view][hidden] { display: none; }
.course-stat-tabs button { appearance: none; background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 11px 0; margin: 0 0 -1px; border-radius: 0; color: #687c6e; font: inherit; font-size: 12px; cursor: pointer; }
.course-stat-tabs button[aria-selected="true"] { color: #16533a; border-bottom-color: #16533a; font-weight: 700; }
.course-stat-tabs button:focus-visible { outline: 2px solid #14583e; outline-offset: 3px; }
.course-stat-panel { max-width: 870px; }
.course-stat-panel + .course-stat-panel { margin-top: 24px; }
.course-statistics[data-initialized] .course-stat-panel { margin-top: 0; }
.course-statistics[data-initialized] .course-stat-panel-title { display: none; }
.course-stat-panel-title { font-size: 14px; color: #31543e; margin: 0 0 14px; }
.course-stat-filter { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 14px; font-size: 11px; color: #617568; }
.course-stat-filter select { width: 170px; max-width: 65%; padding: 9px 30px 9px 10px; border: 1px solid #b7c8be; border-radius: 4px; background: #fff; color: #2c503b; font: inherit; font-size: 12px; }
.course-stats-scroll { max-width: 100%; overflow-x: auto; }
.course-catalog-page .course-stats-table, .graded-detail-page .course-stats-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.course-stats-table caption { text-align: left; color: #687b6d; padding: 0 0 9px; font-size: 11px; }
.course-stats-table th, .course-stats-table td { width: 25%; background: transparent; color: #385443; padding: 12px 13px; border-bottom: 1px solid #d8e2db; font-size: 13px; white-space: normal; overflow-wrap: anywhere; vertical-align: middle; }
.course-stats-table thead th { background: #edf3ee; color: #617768; font-weight: 500; font-size: 11px; }
.course-stats-table thead th:first-child { text-align: left; }
.course-stats-table td, .course-stats-table thead th:not(:first-child) { text-align: right; }
.course-stats-table tbody th { text-align: left; font-weight: 500; font-size: 12px; }
.course-stats-table small { display: block; margin-top: 3px; color: #7a877d; font-size: 10px; font-weight: 400; }
.course-stat-rate { color: #244d36; font-weight: 700; }
.course-frame { display: inline-grid; place-items: center; width: 23px; height: 23px; font-size: 12px; border: 1px solid #bcc8be; color: #2d3b30; background: #fff; }
.course-frame[data-frame="2"] { background: #303b34; border-color: #303b34; color: #fff; }
.course-frame[data-frame="3"] { background: #b43f45; border-color: #b43f45; color: #fff; }
.course-frame[data-frame="4"] { background: #316caa; border-color: #316caa; color: #fff; }
.course-frame[data-frame="5"] { background: #e9ce5f; border-color: #d8bc4f; }
.course-frame[data-frame="6"] { background: #438662; border-color: #438662; color: #fff; }
.course-frame[data-frame="7"] { background: #ce7c3f; border-color: #ce7c3f; color: #fff; }
.course-frame[data-frame="8"] { background: #dba1b7; border-color: #c78aa2; }
.course-stat-note, .course-stat-intro { color: #738075; font-size: 10px; line-height: 1.85; margin: 13px 0 0; }
.course-stat-intro { margin: 0 0 14px; font-size: 11px; }
.course-stat-scope { margin: 0 0 16px; max-width: 870px; color: #3d5b49; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.course-stat-warning { padding: 11px 0; color: #886824; font-size: 11px; line-height: 1.8; }
.course-stat-methods { border-top: 1px solid #d8e2db; margin-top: 18px; font-size: 11px; color: #68796d; }
.course-stat-methods summary { padding: 14px 0; cursor: pointer; }
.course-stat-methods dl { margin: 0; }
.course-stat-methods dl > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 15px; margin: 0 0 12px; line-height: 1.85; }
.course-stat-methods dt { font-weight: 600; color: #4f6858; }
.course-stat-methods dd { margin: 0; }
.course-stat-methods > p { font-size: 10px; line-height: 1.85; }
.course-stat-era { max-width: 870px; }
.course-stat-era summary { color: #31543e; font-size: 12px; font-weight: 600; line-height: 1.8; overflow-wrap: anywhere; }
.course-stat-era summary span { display: inline-block; margin-left: 8px; color: #68796d; font-size: 11px; font-weight: 400; }
.course-stat-era h4 { margin: 22px 0 12px; color: #31543e; font-size: 13px; }
.course-stat-era > .course-stat-era-total { font-size: 11px; }
@media (max-width: 700px) {
  .course-catalog-page main { padding: 15px 16px 30px; }
  .course-catalog-page .topbar { padding: 12px 16px; gap: 12px; }
  .course-catalog-page .brand-image { height: 38px; max-width: 115px; object-fit: contain; }
  .course-header-links { gap: 8px 12px; flex-wrap: wrap; justify-content: flex-end; }
  .course-header-links a { font-size: 10px; }
  .course-index-title { align-items: start; flex-direction: column; gap: 10px; }
  .course-index-title h1, .course-detail-title h1 { font-size: 23px; }
  .course-index-title p span { margin-left: 10px; font-size: 11px; }
  .course-venue-nav { gap: 0 20px; }
  .course-venue > summary { padding: 17px 14px; font-size: 17px; }
  .course-venue > summary small { margin-left: 12px; font-size: 10px; }
  .course-venue-count { gap: 10px; font-size: 11px; }
  .course-track-grid { grid-template-columns: minmax(0,1fr); padding: 0 14px 17px; gap: 20px; }
  .course-venue-source { margin-left: 14px; }
  .course-overview { font-size: 12px; }
  .course-distance-nav { gap: 0 19px; }
  .course-distance-nav a { font-size: 11px; }
  .course-explanation { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .course-explanation p { font-size: 12px; }
  .course-dimension-table th, .course-dimension-table td { padding: 11px 5px; font-size: 10px; }
  .course-tendency-heading { align-items: start; flex-wrap: wrap; }
  .course-tendency-heading h3 { font-size: 16px; }
  .course-tendency-row { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 18px 0; }
  .course-tendency-row dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 12px; font-size: 11px; }
  .course-tendency-row h4 { font-size: 13px; }
  .course-stat-heading h3 { font-size: 16px; }
  .course-stat-heading { flex-wrap: wrap; }
  .course-stat-total { text-align: left; }
  .course-stat-total span { display: inline-block; margin-left: 10px; }
  .course-stat-tabs { gap: 24px; }
  .course-stat-tabs button { font-size: 11px; }
  .course-stats-table th, .course-stats-table td { padding: 10px 5px; font-size: 12px; }
  .course-stats-table tbody th, .course-stats-table thead th { font-size: 10px; }
  .course-stats-table small { font-size: 9px; }
  .course-stat-methods dl > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
}
