/* =========================================================
   Harmony - 學生音樂比賽成績查詢系統
   風格：清新明亮 Fresh & Bright
   ========================================================= */

:root{
  --c-bg:        #F5F8FC;
  --c-bg-alt:    #EDF3FA;
  --c-card:      #FFFFFF;
  --c-ink:       #1F2A44;
  --c-ink-soft:  #4A5672;
  --c-muted:     #8A95AC;
  --c-line:      #E3EAF3;
  --c-line-soft: #EEF3F9;

  --c-primary:   #4F9DDE;
  --c-primary-d: #2F7BC2;
  --c-primary-l: #E6F1FB;

  --c-accent:    #F4B95A;
  --c-accent-l:  #FEF2DC;

  --c-mint:      #5EC9A0;
  --c-mint-l:    #E4F6EE;

  --c-rose:      #F48FB1;
  --c-rose-l:    #FCE4EC;

  --c-violet:    #9B8CF0;
  --c-violet-l:  #ECE9FD;

  --radius-s: 8px;
  --radius:   14px;
  --radius-l: 22px;

  --shadow-s: 0 1px 2px rgba(31,42,68,.04), 0 1px 3px rgba(31,42,68,.04);
  --shadow:   0 4px 14px rgba(31,42,68,.06), 0 10px 30px rgba(31,42,68,.05);
  --shadow-l: 0 12px 40px rgba(31,42,68,.10);
  --shadow-t:  0 2px 6px rgba(0, 0, 0, 0.25);
  --font-zh: "Noto Sans TC", -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: var(--font-zh);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
h1, h2, h3, h4{ margin: 0; font-weight: 700; letter-spacing: -.01em; }
p{ margin: 0; }

/* =============== Top bar =============== */
.topbar{
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--c-line);
}
.topbar-inner{
  max-width: 1240px; margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand{ display: flex; align-items: center; gap: 12px; }
.brand-icon{
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--c-primary), #8ACCF0);
  color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-s);
}
.brand-icon svg{ width: 20px; height: 20px; }
.brand-text strong{ display: block; font-size: 18px; line-height: 1.1; }
.brand-text small{ display: block; font-size: 11.5px; color: var(--c-muted); letter-spacing: .08em; }

.topnav{ display: flex; gap: 4px; margin-left: auto; }
.nav-item{ position: relative; }
.nav-link{
  appearance: none; border: 0; background: transparent;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  color: var(--c-ink-soft); font: inherit; font-size: 18px; font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
}
.nav-link .caret{ transition: transform .2s ease; }
.nav-link:hover{ background: var(--c-primary-l); color: #e34b00; }
.nav-item.active > .nav-link{ background: var(--c-ink); color: #fff; }



/* SVG icon glyphs */
.si[data-i]::before{ font-family: "Noto Sans TC"; font-size: 15px; font-weight: 700; }
.si[data-i="user"]::before{ content: "\1F464"; font-size: 16px; }
.si[data-i="team"]::before{ content: "\1F465"; font-size: 16px; }
.si[data-i="trophy"]::before{ content: "\1F3C6"; font-size: 16px; }
.si[data-i="download"]::before{ content: "\2B07"; font-weight: 900; }
.si[data-i="calendar"]::before{ content: "\1F4C5"; font-size: 16px; }
.si[data-i="map"]::before{ content: "\1F4CD"; font-size: 16px; }
.si[data-i="file"]::before{ content: "\1F4CB"; font-size: 16px; }
.si[data-i="book"]::before{ content: "\1F4D6"; font-size: 16px; }
.si[data-i="medal-gold"]::before{ content: "\1F947"; font-size: 16px; }
.si[data-i="medal-silver"]::before{ content: "\1F948"; font-size: 16px; }
.si[data-i="medal-bronze"]::before{ content: "\1F949"; font-size: 16px; }
.si[data-i="history"]::before{ content: "\23F1"; font-size: 14px; }
.si[data-i="star"]::before{ content: "\2605"; color: var(--c-accent); }
.si[data-i="bell"]::before{ content: "\1F514"; font-size: 14px; }
.si[data-i="gear"]::before{ content: "\2699"; font-size: 16px; }
.si[data-i="help"]::before{ content: "?"; font-weight: 900; }
.si[data-i="logout"]::before{ content: "\23FB"; font-size: 14px; }

/* ---- Hamburger ---- */
.hamburger{
  display: none;
  appearance: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--c-bg-alt);
  position: relative;
  transition: background .15s ease;
}
.hamburger:hover{ background: var(--c-primary-l); }
.hamburger span{
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2.5px; border-radius: 2px;
  background: var(--c-ink);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.hamburger span:nth-child(1){ top: 13px; }
.hamburger span:nth-child(2){ top: 19px; }
.hamburger span:nth-child(3){ top: 25px; }
.hamburger.open span:nth-child(1){ top: 19px; transform: translateX(-50%) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ top: 19px; transform: translateX(-50%) rotate(-45deg); }


@media (max-width: 760px){
  .hamburger{ display: block; }
  .topbar-inner{ position: relative; }
  .topnav{
    position: absolute;
    top: calc(100% + 1px); right: 16px; left: 16px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: 10px;
    flex-direction: column;
    gap: 2px;
    box-shadow: var(--shadow);
    margin-left: 0;
    max-height: calc(100vh - 80px); overflow-y: auto;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .topnav.open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-item{ width: 100%; }
  .nav-link{
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
  }
  .nav-item.active > .nav-link{
    background: var(--c-primary-l);
    color: var(--c-primary-d);
  }
}

/* =============== Hero =============== */
.hero{
  position: relative; overflow: hidden;
 background:#f9f4e4;
  width: 100%;
 padding:0px 15px ; 
 display: block;
 min-height: 350px;height: 350px;}

.hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 height: 100%;
}
.hero-tag{
  display: block;
  position: absolute;
  margin: auto;
  
  top: 10px;
  text-align: center;
  color: #e34b00; font-size: 48px; font-weight: 600;
  text-shadow: 0 2px 8px rgba(31,42,68,.25), 0 4px 10px rgba(160, 197, 228, 0.2);
}
.hero h1{
  margin: 18px 0 14px;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.12;
  font-weight: 800;
}
.hero h1 em{
  font-family: var(--font-display);
  font-style: italic; font-weight: 600;
  background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub{ font-size: 17px; color: var(--c-ink-soft); max-width: 560px; }
.hero-stats{
  margin-top: 34px;
  display: flex; gap: 32px; flex-wrap: wrap;
}
.hero-stats strong{
  display: block; font-size: 30px; font-weight: 800;
  color: var(--c-primary-d); font-family: var(--font-display);
  font-style: italic;
}
.hero-stats span{ font-size: 13px; color: var(--c-muted); }

.hero-visual{
  position: relative; height: 340px;
}
.disc{
  position: absolute; inset: 0; margin: auto;
  width: 280px; height: 280px; border-radius: 50%;
  background:
    radial-gradient(circle at center, #1F2A44 0 14%, transparent 14.5%),
    repeating-radial-gradient(circle at center, #2E3A56 0 2px, #3A4866 2px 4px),
    linear-gradient(135deg, #2E3A56, #1F2A44);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.06),
    0 30px 60px rgba(31,42,68,.30),
    0 0 0 12px rgba(255,255,255,.8),
    0 0 0 13px var(--c-line);
  animation: spin 18s linear infinite;
}
.disc::before{
  content:""; position: absolute; inset: 0; margin: auto;
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent), #F7D693);
  box-shadow: 0 0 0 4px #1F2A44;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.note-float{
  position: absolute; font-size: 42px; font-weight: 700;
  color: var(--c-primary);
  text-shadow: 0 8px 20px rgba(79,157,222,.3);
  animation: float 6s ease-in-out infinite;
}
.note-float.n1{ top: 6%;  left: 10%; color: var(--c-primary); animation-delay: 0s; }
.note-float.n2{ top: 20%; right: 8%;  color: var(--c-accent);  font-size: 56px; animation-delay: 1.2s; }
.note-float.n3{ bottom: 14%; left: 4%; color: var(--c-mint);   font-size: 38px; animation-delay: 2.4s; }
.note-float.n4{ bottom: 6%;  right: 18%; color: var(--c-violet); font-size: 48px; animation-delay: 3.6s; }
@keyframes float{
  0%,100%{ transform: translateY(0) rotate(-4deg); }
  50%    { transform: translateY(-18px) rotate(4deg); }
}


/* =============== Container =============== */
.container{
  max-width: 1240px;
  margin: -40px auto 64px;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}
@media (max-width: 960px){
  .hero-inner{ grid-template-columns: 1fr; padding: 56px 24px 64px; }
  .hero-visual{ display: none; }
  .disc{ width: 220px; height: 220px; }
}
@media (max-width:915px){
  .hero {
    
      min-height:275px;
      height:275px;
      background-size: contain;
    }
  
    .hero-tag {
      position: absolute;
      top: 0px;
      left: 12px;
      font-size: 2rem;
    }
  
    .note-float {
      display: none;
    }
  
    .container {
      margin-top: 0
    }
}
/* =============== Search panel =============== */
.search-panel{
  background: var(--c-card);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
  border: 1px solid var(--c-line);
  padding: 22px 22px 20px;
}

.filter-footer{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--c-line-soft);
}


.btn-primary{
  appearance: none; border: 0; cursor: pointer;
  padding: 12px 26px; border-radius: 10px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-d));
  color: #fff; font: inherit; font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 16px rgba(47,123,194,.35);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(47,123,194,.45); }
.btn-primary:active{ transform: translateY(0); }

.filter-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: end;
}
.field{ display: block; }
.field > span{
  display: block; font-size: 14px; font-weight: 600;
  color: var(--c-ink-soft);
  margin-bottom: 6px; letter-spacing: .03em;
}
.field select{
  width: 100%;
  padding: 10px 34px 10px 12px;
  border: 1.5px solid var(--c-line);
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238A95AC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9'/></svg>")
    right 12px center/14px no-repeat;
  border-radius: 10px;
  font: inherit; font-size: 14.5px; color: var(--c-ink);
  appearance: none; -webkit-appearance: none;
  cursor: pointer; transition: all .15s ease;
}
.field select:hover{ border-color: var(--c-primary); }
.field select:focus{ outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(79,157,222,.15); }

.btn-ghost{
  padding: 10px 18px;
  border: 1.5px solid var(--c-line);
  background: #fff;
  border-radius: 10px;
  color: var(--c-ink-soft); font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: all .15s ease;
  white-space: nowrap; height: fit-content;
}
.btn-ghost:hover{ border-color: var(--c-primary); color: var(--c-primary-d); background: var(--c-primary-l); }

@media (max-width: 900px){
  .filter-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px){
  .filter-grid{ grid-template-columns: 1fr; }
}

/* =============== Result head =============== */
.result-head{
  margin: 40px 0 20px;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.result-head h2{ font-size: 24px; }
.muted{ color: var(--c-muted); font-size: 14px; }
.muted.small{ font-size: 12.5px; }

.result-tools{ display: flex; align-items: center; gap: 10px; }
.btn-outline{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: #fff; border: 1.5px solid var(--c-line); border-radius: 10px;
  color: var(--c-ink-soft); font: inherit; font-weight: 600; font-size: 13.5px;
  cursor: pointer; transition: all .15s ease;
}
.btn-outline:hover{ border-color: var(--c-primary); color: var(--c-primary-d); }
@media (max-width:915px){
  .result-head{
  margin: 8px 0 15px;}
}
/* =============== 等次 (used in table) =============== */
.chip{
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  background: var(--c-primary-l); color: var(--c-primary-d);
  letter-spacing: .03em;
}
.chip.特優{ background: var(--c-mint-l); color: #2D8A6A; }
.chip.優等{ background: var(--c-violet-l); color: #5E4DC0; }
.chip.甲等{ background: var(--c-rose-l); color: #B84A76; }
.chip.棄權{ background: #f7e7db; color: #5C6680; }

.btn-link{
  appearance: none; border: 0; cursor: pointer; background: transparent;
  padding: 6px 0;
  color: #004098; font: inherit; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 4px;
}
.btn-link:hover{ color: #e34b00; }

/* =============== Result table =============== */
.results-table-wrap{
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-s);
}
.results-table{
  width: 100%; border-collapse: collapse;
}
.results-table th, .results-table td{
  padding: 14px 18px;
  text-align: left;
  font-size: 16px;
  vertical-align: middle;
}
.results-table thead th{
  background: var(--c-bg-alt);
  color: var(--c-ink-soft);
  font-size: 14px; font-weight: 700;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--c-line);
}
.results-table tbody tr{
  border-bottom: 1px solid var(--c-line-soft);
  transition: background .15s ease;
}
.results-table tbody tr:hover{ background: var(--c-bg); }
.results-table tbody tr:last-child{ border-bottom: 0; }

/* ≤768px */
@media (max-width:768px){
  .results-table-wrap{ overflow-x: hidden; }
  .results-table{ min-width: 0; display: block; }
  .results-table thead{ display: none; }
  .results-table tbody{ display: block; }
  .results-table tbody tr{
    display: flex; flex-wrap: wrap;
    border-bottom: 3px solid #c0c8d8;
    box-shadow: var(--shadow-t);
  }
  .results-table tbody tr:last-child{ border-bottom: 0; }


  .results-table tbody td{
    display: block;
    padding: 0 14px 10px;
    box-sizing: border-box;
    border-right: 1px solid var(--c-line-soft);
  }

  /* 上列% */
  .results-table tbody td:nth-child(1){ flex: 0 0 30%; }
  .results-table tbody td:nth-child(2){ flex: 0 0 70%; }
  .results-table tbody td:nth-child(3){ flex: 0 0 100%; border-right: 0; text-align: left; }

  /* 下列% */
  .results-table tbody td:nth-child(4){ flex: 0 0 70%; }
  .results-table tbody td:nth-child(5){ flex: 0 0 30%; border-right: 0; }

  /* 上列底線（分隔上下兩列） */
  .results-table tbody td:nth-child(1),
  .results-table tbody td:nth-child(2),
  .results-table tbody td:nth-child(3){ border-bottom: 1px solid var(--c-line-soft); }

  /* ::before  */
  .results-table tbody td::before{
    display: block;
    margin: 0 -14px 8px;
    padding: 6px 14px;
    background: var(--c-bg-alt);
    font-size: 12.5px; font-weight: 700;
    color: var(--c-ink-soft); letter-spacing: .04em;
    border-bottom: 1px solid var(--c-line-soft);
    white-space: nowrap;
  }
  .results-table tbody td:nth-child(1)::before{ content: "場次";text-align: left; }
  .results-table tbody td:nth-child(2)::before{ content: "日期"; }
  .results-table tbody td:nth-child(3)::before{ content: "地點"; }
  .results-table tbody td:nth-child(4)::before{ content: "類別"; }
  .results-table tbody td:nth-child(5)::before{ content: "成績公告"; }

  /* 日期欄、類別欄：同行顯示*/
  .results-table tbody td:nth-child(2) br,
  .results-table tbody td:nth-child(4) br{ display: none; }
  .results-table tbody td:nth-child(2) span,
  .results-table tbody td:nth-child(4) span{ margin-left: 8px; }
}

.hidden{ display: none !important; }

/* =============== Pager =============== */
.pager{
  margin: 28px 0 0;
  display: flex; justify-content: center; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.pager button{
  appearance: none; border: 1px solid var(--c-line); background: #fff;
  min-width: 38px; height: 38px; padding: 0 12px;
  border-radius: 10px;
  font: inherit; font-weight: 600; font-size: 14px; color: var(--c-ink-soft);
  cursor: pointer; transition: all .15s ease;
}
.pager button:hover:not(:disabled){ border-color: var(--c-primary); color: var(--c-primary-d); }
.pager button.active{ background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.pager button:disabled{ opacity: .4; cursor: not-allowed; }

/* =============== Detail page =============== */
.detail-info-wrap,
.detail-scores-wrap{
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-s);
}
.detail-scores-wrap{ margin-top: 28px; }

.detail-table{
  width: 100%; border-collapse: collapse;
}
.detail-table th{
  background: var(--c-bg-alt);
  color: var(--c-ink-soft);
  font-size: 14px; font-weight: 700;
  letter-spacing: .04em;
  padding: 12px 5px;
  border-bottom: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  text-align: center;
  white-space: nowrap;
}
.detail-table th:last-child{ border-right: 0; }
.detail-table td{
  padding: 13px 5px;
  font-size: 15px;
  border-right: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  text-align: center;
  vertical-align: middle;
}
.detail-table td:last-child{ border-right: 0; }
.detail-table tbody tr:last-child td{ border-bottom: 0; }
.detail-table tbody tr:hover{ background: var(--c-bg); }

.scores-table{ width: 100%; }

/* 成績1-7、違規扣分、評定等第 欄位縮窄，避免 1280px 溢出 */
.scores-table th:nth-child(n+3):nth-child(-n+9),
.scores-table td:nth-child(n+3):nth-child(-n+9),
.scores-table th:nth-child(11),
.scores-table td:nth-child(11),
.scores-table th:nth-child(13),
.scores-table td:nth-child(13) {
  padding-left: 6px;
  padding-right: 6px;
}
/* 違規扣分(11)、扣分原因(15) 標頭保證2字並排 */
.scores-table th:nth-child(11),
.scores-table th:nth-child(15) {
  min-width: 2.5em;
}

.detail-actions{
  display: flex; justify-content: center; gap: 12px;
  margin-top: 32px; margin-bottom: 16px;
}

/* =============== Footer =============== */
.footer{
  margin-top: 72px;
  background: #ffc7ac;
  color: #666;
}
.footer-inner{
  max-width: 1240px; margin: 0 auto;
  padding: 36px 28px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.foot-brand{ color: #666; font-weight: 700; }
.footer .muted{ color: #666; }
.foot-links{ display: flex; gap: 22px; }
.foot-links a{ font-size: 13.5px; color: #666; transition: color .15s; }
.foot-links a:hover{ color: #dcf1ff; }

/* =============== 比賽資訊(≤820px) =============== */
.detail-info-tablet{ display: none; }

.dit-row{
  display: flex;
  border-bottom: 1px solid var(--c-line);
}
.dit-row:last-child{ border-bottom: 0; }
.dit-cell{
  flex: 1;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--c-line-soft);
}
.dit-cell:last-child{ border-right: 0; }
.dit-label{
  background: var(--c-bg-alt);
  padding: 9px 13px;
  font-size: 13px; font-weight: 700;
  color: var(--c-ink-soft); letter-spacing: .04em;
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.dit-val{
  padding: 11px 13px;
  font-size: 14px; color: var(--c-ink);
  flex: 1;
}

@media (max-width: 820px){
  .detail-info-wrap .detail-table{ display: none; }
  .detail-info-tablet{ display: block; }
  .detail-info-wrap{ overflow-x: hidden; }
}

/* =============== Tablet Scores Accordion (≤1024px) =============== */
.scores-accordion{ display: none; }

.sa-thead{
  display: flex; align-items: center;
  padding: 10px 14px;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-line);
  font-size: 13px; font-weight: 700;
  color: var(--c-ink-soft); letter-spacing: .04em;
}
.sa-item{ border-bottom: 1px solid var(--c-line-soft); }
.sa-item:last-child{ border-bottom: 0; }
.sa-row{
  display: flex; align-items: center;
  width: 100%; padding: 12px 14px;
  border: 0; background: transparent;
  cursor: pointer; text-align: left;
  font: inherit; color: var(--c-ink);
  transition: background .15s ease;
}
.sa-row:hover{ background: var(--c-bg); }
.sa-row[aria-expanded="true"]{
  background: #fff4ee;
  border-bottom: 1px solid #dcdcdc;
}

.sa-col-seq{ flex: 0 0 36px; text-align: center; font-size: 14px; }
.sa-col-unit{ flex: 1; text-align: left; padding: 0 8px; min-width: 0; }
.unit-name{ display: block; font-weight: 600; font-size: 14px; }
.unit-school{ display: block; font-size: 12px; color: var(--c-ink-soft); line-height: 1.4; }
.sa-col-score{ flex: 0 0 64px; text-align: center; font-size: 14px; }
.sa-col-rank{ flex: 0 0 58px; text-align: center; line-height: 1.6; }
.rank-num{ display: block; font-size: 12px; color: var(--c-ink-soft); }
.sa-col-toggle{ flex: 0 0 36px; text-align: center; }

.toggle-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary);
  font-size: 18px; font-weight: 300; line-height: 1;
  transition: transform .25s ease, background .15s ease, color .15s ease;
}
.sa-row[aria-expanded="true"] .toggle-btn{
  transform: rotate(45deg);
  background: var(--c-primary);
  color: #fff;
}

.sa-detail{
  background: var(--c-bg);
  padding: 12px 14px 14px;
}
.sa-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  overflow: hidden;
  margin-bottom: 8px;
}
.sa-grid-2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.sa-grid-4{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.sa-grid-5{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.sg-head{
  background: var(--c-bg-alt);
  padding: 7px 8px;
  font-size: 12.5px; font-weight: 700;
  color: var(--c-ink-soft);
  text-align: center; letter-spacing: .03em;
}
.sg-cell{
  background: var(--c-card);
  padding: 9px 8px;
  min-height: 40px;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 1024px){
  .scores-table{ display: none; }
  .scores-accordion{ display: block; }
  .detail-scores-wrap{ overflow-x: hidden; }
}

@media (max-width: 820px){
 .sg-final{background-color:#fff4ee}

}