/* 共用「文脈」16篇原創篇章插圖；各場景均來自 assets/illustrations/classics.svg */
/* 簡牘竹青 · lunyu */
.group-card[data-art-tone="lunyu"],.work-choice[data-art-tone="lunyu"]{--art-surface:#EBF2E7;--art-border:#D3E3CD}
/* 魚水青 · yuw */
.group-card[data-art-tone="yuw"],.work-choice[data-art-tone="yuw"]{--art-surface:#E6F3F2;--art-border:#CFE5E3}
/* 逍遙雲藍 · xiaoyao */
.group-card[data-art-tone="xiaoyao"],.work-choice[data-art-tone="xiaoyao"]{--art-surface:#E8F3F6;--art-border:#D2E5EB}
/* 書卷砂米 · quanxue */
.group-card[data-art-tone="quanxue"],.work-choice[data-art-tone="quanxue"]{--art-surface:#F5EFE3;--art-border:#E8DCC9}
/* 璧玉青綠 · lianpo */
.group-card[data-art-tone="lianpo"],.work-choice[data-art-tone="lianpo"]{--art-surface:#E3F1E9;--art-border:#CFE3D9}
/* 出師旗幟灰藍 · chushi */
.group-card[data-art-tone="chushi"],.work-choice[data-art-tone="chushi"]{--art-surface:#ECF0F7;--art-border:#D4DFEE}
/* 師說卷軸淡金 · shishuo */
.group-card[data-art-tone="shishuo"],.work-choice[data-art-tone="shishuo"]{--art-surface:#FAF1DD;--art-border:#ECDFBF}
/* 西山苔綠 · xishan */
.group-card[data-art-tone="xishan"],.work-choice[data-art-tone="xishan"]{--art-surface:#EAF1E8;--art-border:#D6E2D4}
/* 洞庭湖藍 · yueyang */
.group-card[data-art-tone="yueyang"],.work-choice[data-art-tone="yueyang"]{--art-surface:#E8F2F9;--art-border:#D0E2F0}
/* 六國古城石灰 · liuguo */
.group-card[data-art-tone="liuguo"],.work-choice[data-art-tone="liuguo"]{--art-surface:#F1ECE4;--art-border:#DFD6C8}
/* 月光象牙米 · yuexia */
.group-card[data-art-tone="yuexia"],.work-choice[data-art-tone="yuexia"]{--art-surface:#F8F2E9;--art-border:#E6DCCB}
/* 秋山松青 · shanju */
.group-card[data-art-tone="shanju"],.work-choice[data-art-tone="shanju"]{--art-surface:#E6F0EC;--art-border:#CFE0D8}
/* 暮色煙藍 · denglou */
.group-card[data-art-tone="denglou"],.work-choice[data-art-tone="denglou"]{--art-surface:#EBEFF5;--art-border:#D4DDE9}
/* 赤壁淡陶 · niannu */
.group-card[data-art-tone="niannu"],.work-choice[data-art-tone="niannu"]{--art-surface:#F5EAE4;--art-border:#E8D7CE}
/* 秋葉淡玫灰 · shengsheng */
.group-card[data-art-tone="shengsheng"],.work-choice[data-art-tone="shengsheng"]{--art-surface:#F5ECE9;--art-border:#E7D7D3}
/* 元夕燈杏 · qingyu */
.group-card[data-art-tone="qingyu"],.work-choice[data-art-tone="qingyu"]{--art-surface:#FFF0DF;--art-border:#F0DBBE}

/* Lumen UI Card / CardContent / CardFooter composition adapted to the existing static site.
   16 coordinated chapter surfaces remain from the palette above. */
.group-grid{
  --chapter-ink:#263F38;
  --chapter-soft:#58766C;
  --chapter-brand:#176953;
  --chapter-spacing-xs:4px;
  --chapter-spacing-sm:8px;
  --chapter-spacing-lg:16px;
  row-gap:16px;
  column-gap:16px;
}
.group-card{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:235px;
  padding:18px 19px 16px;
  background:var(--art-surface,#EDF5EC);
  border:1px solid var(--art-border,#D5E6D9);
  border-radius:20px;
  box-shadow:0 3px 12px rgba(26,69,54,.045);
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.group-card:hover{
  transform:translateY(-2px);
  border-color:rgba(29,114,86,.33);
  box-shadow:0 9px 22px rgba(30,79,61,.095);
}
.group-card:focus-within{
  outline:3px solid #1D856B;
  outline-offset:3px;
}
.group-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  min-height:19px;
  margin:0;
}
.group-card .group-number,
.group-card:nth-child(3n+2) .group-number,
.group-card:nth-child(3n) .group-number{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:auto;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--chapter-brand);
  font-size:12px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:.07em;
  font-variant-numeric:tabular-nums;
}
.group-card .group-tag{
  min-width:0;
  max-width:76%;
  text-align:right;
  color:var(--chapter-soft);
  font-size:10px;
  font-weight:750;
  line-height:1.3;
  letter-spacing:.015em;
}
.group-card-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,45%);
  gap:3px;
  align-items:center;
  min-width:0;
  min-height:120px;
  flex:1 1 auto;
  margin:13px 0 9px;
}
.group-card-copy{
  min-width:0;
  align-self:center;
  padding:0;
  position:relative;
  z-index:1;
}
.group-card .group-card-copy h3{
  margin:0;
  color:var(--chapter-ink);
  font-size:clamp(18px,1.7vw,21px);
  line-height:1.38;
  font-weight:900;
  letter-spacing:-.047em;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
.group-card .group-card-copy p{
  margin:7px 0 0;
  color:var(--chapter-soft);
  font-size:12px;
  line-height:1.48;
  font-weight:650;
  overflow-wrap:anywhere;
}
.group-card .group-art{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  align-self:center;
  justify-self:stretch;
  width:100%;
  height:auto;
  aspect-ratio:220 / 132;
  flex:0 1 auto;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
  pointer-events:none;
}
.group-card .group-art:before{display:none}
.group-card .group-art .classics-art{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  flex:0 0 100%;
  transform:scale(1.1);
  transform-origin:right bottom;
}
.classics-art{display:block;object-fit:contain}
.group-card .group-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:7px;
  flex-shrink:0;
  min-height:42px;
  margin:0;
  padding:9px 0 0;
  border-top:1px solid rgba(55,97,80,.17);
  position:relative;
  z-index:1;
}
.group-card .question-total{
  color:var(--chapter-soft);
  font-size:11px;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
}
.group-card .card-start{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-shrink:0;
  min-height:34px;
  width:auto;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  color:var(--chapter-brand);
  font-size:12px;
  line-height:1.35;
  font-weight:850;
  cursor:pointer;
}
.group-card .card-start:hover{background:transparent}
.group-card .cta-text{white-space:nowrap}
.group-card .cta-arrow{
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--chapter-brand);
  color:#fff;
  font-size:15px;
  line-height:1;
  font-weight:800;
  transition:transform .18s ease,background .18s ease;
}
.group-card:hover .cta-arrow{transform:translate(1px,-1px);background:#0E5646}
/* One semantic button owns the entire card's pointer surface. */
.group-card .card-start:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
}
.group-card .card-start:focus-visible{outline:0}

/* 切換篇章視窗：整張選項卡直接使用其 SVG 對應底色。 */
.work-choice[data-art-tone]{
  background:var(--art-surface,#e7f4ed);
  border-color:var(--art-border,#d8e9dd);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.work-choice[data-art-tone]:hover{border-color:#77ae99}
.work-choice[data-art-tone]:has(input:checked){
  background:var(--art-surface,#e7f4ed);
  border-color:#198669;
  box-shadow:inset 0 0 0 1px #198669;
}
.work-choice[data-art-tone]:focus-within{outline:2px solid #138a72;outline-offset:2px}
.work-choice[data-art-tone] b{color:#304e43}
.work-choice[data-art-tone] small{color:#647e72}

.work-choice{align-items:center;gap:10px}
.work-choice-copy{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.work-choice-copy b{font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.work-choice-copy small{font-size:10px;line-height:1.55}
.work-choice-art{
  display:flex;
  flex:0 0 72px;
  align-self:center;
  align-items:flex-end;
  justify-content:flex-end;
  width:72px;
  height:57px;
  margin-left:auto;
  padding:0;
  border:0;
  background:transparent;
  overflow:hidden;
}
.work-choice-art .classics-art{display:block;width:100%;height:100%;max-width:none;max-height:none}


@media(max-width:900px){
  .group-grid{gap:13px}
  .group-card{min-height:228px;padding:17px 17px 15px}
  .group-card-main{min-height:116px}
}
@media(max-width:620px){
  .group-grid{gap:12px}
  .group-card{
    min-height:226px;
    padding:15px 13px 14px;
    border-radius:17px;
  }
  .group-card-header{min-height:18px;gap:4px}
  .group-card .group-number,
  .group-card:nth-child(3n+2) .group-number,
  .group-card:nth-child(3n) .group-number{font-size:11px}
  .group-card .group-tag{font-size:9px;line-height:1.4}
  .group-card-main{
    grid-template-columns:minmax(0,1fr) minmax(0,45%);
    gap:2px;
    min-height:126px;
    margin:10px 0 7px;
  }
  .group-card .group-card-copy h3{font-size:16px;line-height:1.38}
  .group-card .group-card-copy p{font-size:10.5px;margin-top:6px;line-height:1.45}
  .group-card .group-art{align-self:center;margin:0}
  .group-card .group-art .classics-art{transform:scale(1.12)}
  .group-card .group-card-footer{
    min-height:39px;
    padding-top:8px;
    gap:4px;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
  .group-card .question-total{font-size:10px}
  .group-card .card-start{
    min-height:31px;
    width:auto;
    padding:0;
    border:0;
    font-size:10.5px;
    gap:4px;
    background:transparent;
  }
  .group-card .cta-arrow{width:28px;height:28px;flex-basis:28px;font-size:14px}
  .work-choice-art{flex-basis:78px;width:78px;height:52px}
}
@media(max-width:370px){
  .group-grid{grid-template-columns:1fr}
  .group-card{min-height:198px;padding:17px 17px 14px}
  .group-card-main{min-height:100px;grid-template-columns:minmax(0,1fr) minmax(0,40%)}
  .group-card .group-card-copy h3{font-size:20px}
  .group-card .group-card-copy p{font-size:12px}
  .group-card .card-start{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .group-card,.group-card .cta-arrow{transition:none}
  .group-card:hover,.group-card:hover .cta-arrow{transform:none}
}