:root{
    --bg1:#fdd3e6; --bg2:#b9e0ff; --bg3:#f3ccff;
    --text:#0f172a; --muted:#6b7280; --line:#e5e7eb;
  }
  
  /* Layout & background */
  *{box-sizing:border-box}
  html,body{height:100%}
  body {
    font-family: 'Google Sans', sans-serif;
    margin: 0;
    padding: 0;
    color: #111;
  }
  .container{max-width:1100px; margin:0 auto; padding:28px 20px 56px}
  
  /* Header */
  .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px}
  .brand{display:flex; align-items:center; gap:10px}
  .brand-logo-img{height:36px; width:auto; display:block}
  .nav-actions{display:flex; gap:10px}
  .btn{
    appearance:none; border:0; padding:10px 14px; border-radius:12px; cursor:pointer;
    font-weight:600; background:#111; color:#fff; transition:.2s transform,.2s opacity;
    text-decoration:none; display:inline-block;
  }
  .btn:hover{transform:translateY(-1px)}
  
  /* Hero (논문 타이틀 스타일, 배경과 자연스럽게 융화) */
  .hero{
    text-align:center;
    padding:3.5rem 1rem 2.25rem;
    margin:18px auto 22px;
    max-width:920px;
    border-radius:22px;
    background:linear-gradient(135deg, #ffffffcf 0%, #f7fbffcf 100%);
    backdrop-filter:saturate(140%) blur(8px);
    box-shadow:0 16px 40px rgba(0,0,0,.07);
  }
  .hero .title{
    font-size:clamp(28px,3.4vw,42px);
    font-weight:800;
    margin:0 0 16px;
    color:#101828;
  }
  .hero .authors{
    margin:0 0 6px;
    font-size:1.25rem;
  }
  .hero .authors a{color:#2563eb; text-decoration:none}
  .hero .authors a:hover{text-decoration:underline}
  .hero .affiliation{
    margin:0 0 18px;
    font-size:1.25rem;
    color:#555;
  }
  .links{display:flex; justify-content:center; gap:12px; margin-top:16px}
.link-btn{
  padding:8px 16px;
  border-radius:24px;
  background:#333;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  transition:.2s;
}
.link-btn:hover{background:#111}
  
  /* Listen section (compact) */
  .listen{margin:34px 0}
  .listen h2{font-size:1.25rem; margin:0 0 16px}
  .utterance-block{margin:0 0 24px}
  .utt{margin:0 0 10px; font-weight:700; font-size:1.05rem}
  .audios{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr)); /* 4열: GPT-4o, ElevenLabs, Supertone, Ours */
    gap:16px;
    margin-top:8px;
  }
  .col{display:flex; flex-direction:column; gap:6px}
  .label{text-align:center; font-weight:700; font-size:14px; color:#3a3f46}
  audio{width:100%; background:#f3f4f6; border-radius:16px}
  
  .col.wrong {
    border: 2px solid #e53935;   /* 빨간색 테두리 */
    border-radius: 8px;
    padding: 0px;
    background-color: rgba(229, 57, 53, 0.05); /* 옅은 빨간 배경 (선택사항) */
  }

  .col.right {
    border: 2px solid #1e88e5;   /* 파란색 */
    border-radius: 8px;
    padding: 0px;
    background-color: rgba(30, 136, 229, 0.05); /* 옅은 파랑 배경 (선택) */
  }

  .divider{height:1px; background:var(--line); margin:22px 0}
  .footer-text {
    max-width: none;
    margin: 0;
    font-size: 1rem;
    color: #273037;
    line-height: 1.7;   /* 문장 줄 간격 */
  }
  
  .footer-text p {
    margin: 0 0 18px;   /* 문단 간 여백 */
  }
  
  .footer-text ul {
    margin: 0 0 18px 20px;
    padding: 0;
  }
  
  .footer-text li {
    margin: 8px 0;      /* 리스트 항목 간 여백 */
    line-height: 1.6;   /* 리스트 줄 간격 */
  }
  
  .footer-text strong {
    font-weight: 700;
    color: #3661E3;  /* 보라색 강조 */
  }

  .chart {
    max-width: 850px;     /* 조금 더 좁게 잡아서 중앙에 집중 */
    margin: 32px auto;    /* 가운데 배치 */
    text-align: center;   /* 내부 텍스트/캡션 중앙 정렬 */
  }
  .chart img {
    display: inline-block; /* block → inline-block으로 바꿔야 text-align:center 적용됨 */
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    background: #fff;
  }
  .chart figcaption {
    margin-top: 12px;
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.5;
  }

  code {
    background: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "JetBrains Mono", "Menlo", "Consolas", monospace;
    font-size: 0.95em;
  }

  /* ===== GRPO section styles ===== */
.grpo-section { margin: 40px 0 10px; }
.eq-card{
  max-width: 900px;
  margin: 12px auto 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
}
.eq-title, .eq-sub{
  margin: 0 0 8px;
  font-weight: 700;
  color: #273037;
}
.eq { margin: 6px 0 10px; text-align: center; }

/* Dark mode tweak */
@media (prefers-color-scheme: dark){
  .eq-card{
    background: rgba(255,255,255,0.05);
    border-color: #2d3748;
  }
  .eq-title, .eq-sub{ color: #e6e9ef; }
}



  /* Responsive */
  @media (max-width:860px){
    .audios{grid-template-columns:1fr}
    .label{text-align:left}
  }
  
  /* ───────────── 다크 모드 대응 ───────────── */
@media (prefers-color-scheme: dark) {
  :root{
    --text:#E7EAF0;
    --muted:#A5ACB8;
    --line:#2A2F37;
  }

  html, body { background:#0E131A; color:var(--text); }

  /* 상단 로고: 흰 로고가 없다면 임시로 반전 */
  .brand-logo-img{
    filter: brightness(0) invert(1) contrast(1.05);
  }
  /* (흰색 로고 파일 쓰고 싶으면 위 줄 지우고 아래처럼 사용)
  .brand-logo-img { content: url("../img/ch-logo-white-ko.png"); filter:none; }
  */

  /* 버튼/링크 */
  a { color:#8EA6FF; }
  a:hover { text-decoration: underline; }
  .btn, .link-btn{
    background:#1F2630; color:#F2F4F8; border:1px solid #2E3641;
  }
  .btn:hover, .link-btn:hover{ background:#263041; }

  /* 히어로 카드: 어두운 투명 카드 */
  .hero{
    background: linear-gradient(135deg, #111722d9 0%, #0f1622d9 100%);
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
  }
  .hero .title{ color:#F3F5F8; }
  .hero .authors a{ color:#9AB2FF; }
  .hero .affiliation{ color:#C2C8D3; }

  /* 구분선 */
  .divider{ background:var(--line); }

  /* 오디오 표 */
  .label{ color:#C9CFDA; }
  audio{ background:#1A202A; }

  /* 본문(footer-text) */
  .footer-text{ color:#D7DCE5; }
  .footer-text li{ color:#D7DCE5; }

  /* 강조색(중간톤: #3661E3 ↔ #572DFD 사이) */
  .footer-text strong{
    color:#466EE8;   /* 요청한 중간색 */
  }
}