.section-page { padding: 26px 0 44px; }
.section-page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-page-title { margin: 0; color: var(--t-title); font-family: 'Noto Serif SC', serif; font-size: 25px; line-height: 1.4; }
.section-page-title small { margin-left: 9px; color: var(--t-sub); font-family: 'Noto Sans SC', sans-serif; font-size: 14px; font-weight: 400; }
.section-page-count { color: var(--t-sub); font-size: 13px; }
.section-surface { padding: 14px; background: #EDF3F6; }

.classroom-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.classroom-list-card { position: relative; height: 132px; overflow: hidden; border-radius: 9px; background: #DFE7EA; color: #173A46; box-shadow: 0 4px 13px rgba(15,64,40,.12); transition: transform .18s ease, box-shadow .18s ease; }
.classroom-list-card:hover { color: #173A46; transform: translateY(-2px); box-shadow: 0 9px 22px rgba(15,64,40,.17); }
.classroom-list-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.classroom-list-card:hover img { transform: scale(1.035); }
.classroom-list-card::after { content: ''; position: absolute; inset: 42% 0 0; background: linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96)); }
.classroom-play { position: absolute; z-index: 2; left: 50%; top: 42%; width: 42px; height: 42px; box-sizing: border-box; transform: translate(-50%,-50%); border: 2px solid #226F6F; border-radius: 50%; background: rgba(255,255,255,.88); }
.classroom-play::after { content: ''; position: absolute; left: 15px; top: 10px; border-left: 13px solid #226F6F; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.classroom-list-name { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 9px; color: #173A46; font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center; text-shadow: 0 1px 0 #fff; }

.continuing-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.continuing-list-card { min-height: 142px; padding: 18px 16px; display: flex; align-items: center; gap: 14px; border-radius: 9px; background: #fff; color: #0C1B34; box-shadow: 0 7px 24px rgba(35,56,80,.08); transition: transform .18s ease, box-shadow .18s ease; }
.continuing-list-card:hover { color: #0C1B34; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(35,56,80,.13); }
.continuing-list-icon { width: 64px; height: 82px; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 9px; background: linear-gradient(145deg,#12629A,#0B4778); }
.continuing-list-card:nth-child(4n+2) .continuing-list-icon { border-radius: 22px 8px; background: linear-gradient(145deg,#247DB1,#13517E); }
.continuing-list-card:nth-child(4n+3) .continuing-list-icon { border-radius: 50%; background: linear-gradient(145deg,#267B66,#135746); }
.continuing-list-card:nth-child(4n) .continuing-list-icon { border-radius: 8px 24px; background: linear-gradient(145deg,#B57918,#C7902D); }
.continuing-list-icon svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.continuing-list-icon.has-upload { overflow: hidden; background: #EEF3F6; box-shadow: 0 8px 18px rgba(35,56,80,.12); }
.continuing-list-icon.has-upload img { width: 100%; height: 100%; display: block; object-fit: cover; }
.continuing-list-copy { min-width: 0; }
.continuing-list-name { display: block; color: #08172F; font-size: 16px; font-weight: 700; line-height: 1.5; }
.continuing-list-desc { display: block; margin-top: 6px; color: #6D809E; font-size: 12px; line-height: 1.6; }

.featured-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.featured-list-card { position: relative; min-height: 132px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 9px; color: #fff; background: #0A2235 center / cover no-repeat; box-shadow: 0 5px 16px rgba(18,47,72,.18); transition: transform .18s ease, box-shadow .18s ease; }
.featured-list-card::after { content: ''; position: absolute; inset: 0; background: rgba(2,23,44,.16); }
.featured-list-card:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 11px 25px rgba(18,47,72,.27); }
.featured-list-name { position: relative; z-index: 1; color: #fff; font-family: 'Noto Serif SC',serif; font-size: 23px; font-weight: 700; letter-spacing: .05em; text-shadow: 0 2px 7px rgba(0,24,38,.68); }

.faculty-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid #E3E8EA; border-radius: 15px; background: linear-gradient(100deg,#fff 0%,#fff 82%,#F7F5EF 100%); box-shadow: 0 7px 22px rgba(31,67,86,.1); }
.faculty-list-card { position: relative; min-width: 0; padding: 18px 10px 20px; text-align: center; color: inherit; cursor: pointer; }
.faculty-list-card:hover { color: inherit; background: rgba(239,246,247,.7); }
.faculty-list-card:not(:nth-child(6n))::after { content: ''; position: absolute; top: 28px; right: 0; bottom: 24px; width: 1px; background: #E8DDC7; }
.faculty-avatar { position: relative; width: 82px; height: 82px; margin: 0 auto; overflow: hidden; border-radius: 50%; background: var(--blue-050); color: var(--navy-600); font: 700 27px/82px 'Noto Serif SC',serif; }
.faculty-avatar::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 32px; height: 3px; background: linear-gradient(90deg,#18878A 0 58%,#D6A44A 58%); transform: translateX(-50%); }
.faculty-avatar img { width: 100%; height: 100%; object-fit: cover; }
.faculty-name { margin-top: 13px; color: #123347; font-family: 'Noto Serif SC',serif; font-size: 17px; font-weight: 700; }
.faculty-title { margin-top: 5px; overflow: hidden; color: #52677F; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.faculty-row + .faculty-row { margin-top: 14px; }

@media (max-width: 900px) {
  .section-page { padding: 20px 16px 36px; }
  .classroom-list, .continuing-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faculty-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faculty-list-card:not(:nth-child(6n))::after { display: none; }
}
@media (max-width: 600px) {
  .section-page-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .section-page-title small { display: block; margin: 4px 0 0; }
  .section-surface { padding: 10px; }
  .classroom-list, .continuing-list, .featured-list { grid-template-columns: 1fr; }
  .faculty-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}