:root{
    --bg:#F6F5F0;
    --panel:#FFFFFF;
    --ink:#16283D;
    --line:#DDD9CC;
    --moss:#3F6B52;
    --moss-bg:#E4EEE6;
    --amber:#C7862A;
    --amber-bg:#F7EAD3;
    --coral:#B34635;
    --coral-bg:#F6E2DD;
    --muted:#6B6F66;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces',serif;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  a{color:inherit;}
  button{font-family:inherit; cursor:pointer;}

  /* ---------- NAVBAR ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:var(--panel);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1180px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand-mark{
    width:34px; height:34px; border-radius:8px;
    background:var(--ink); color:var(--bg);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces',serif; font-weight:600; font-size:17px;
  }
  .brand-name{font-family:'Fraunces',serif; font-weight:600; font-size:19px;}
  .brand-sub{font-size:11px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin-top:-2px;}

  .class-tabs{display:flex; gap:6px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:4px;}
  .class-tab{
    text-decoration: none;
    border:none; background:transparent; color:var(--muted);
    padding:8px 16px; border-radius:7px; font-size:14px; font-weight:500;
    transition:background .15s, color .15s;
    white-space:nowrap;
  }
  .class-tab.active{background:var(--ink); color:#fff;}
  .class-tab:not(.active):hover{background:#EDEAE0;}

  .hamburger{display:none; border:1px solid var(--line); background:var(--panel); border-radius:8px; width:38px; height:38px; align-items:center; justify-content:center;}
  .hamburger span, .hamburger span::before, .hamburger span::after{
    content:''; display:block; width:16px; height:2px; background:var(--ink); position:relative;
  }
  .hamburger span::before{position:absolute; top:-5px;}
  .hamburger span::after{position:absolute; top:5px;}

  .mobile-tabs{display:none; flex-direction:column; padding:0 24px 16px; gap:6px;}
  .mobile-tabs .class-tab{width:100%; text-align:left;}

  @media (max-width:760px){
    .class-tabs{display:none;}
    .hamburger{display:flex;}
    .mobile-tabs.open{display:flex;}
  }

  /* ---------- HERO / INTRO ---------- */
  .intro{max-width:1180px; margin:0 auto; padding:40px 24px 8px;}
  .eyebrow{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--moss); font-weight:600;}
  .intro h1{font-size:clamp(26px,4vw,36px); margin-top:8px; max-width:640px;}
  .intro p{color:var(--muted); margin-top:10px; max-width:560px; font-size:15px; line-height:1.55;}

  /* ---------- UNIT GRID ---------- */
  .grid-section{max-width:1180px; margin:0 auto; padding:28px 24px 60px;}
  .subject-block{margin-bottom:36px;}
  .subject-title{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--line);}

  .unit-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:16px;
  }
  .unit-card{
    position:relative;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    padding:20px 18px 18px;
    text-align:left;
    transition:border-color .15s, transform .15s;
  }
  .unit-card:hover{border-color:var(--ink); transform:translateY(-2px);}
  .unit-tag{
    position:absolute; top:-1px; right:16px;
    background:var(--ink); color:var(--bg);
    font-family:'Fraunces',serif; font-size:12px; font-weight:600;
    padding:4px 9px 5px; border-radius:0 0 5px 5px;
  }
  .unit-card h3{font-size:17px; margin-top:6px; margin-bottom:6px; padding-right:34px;}
  .unit-card .meta{font-size:13px; color:var(--muted); margin-bottom:16px;}
  .ring-row{display:flex; align-items:center; justify-content:space-between; margin-top:8px;}
  .ring{
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:600; color:var(--moss);
  }
  .ring-label{font-size:12px; color:var(--muted);}
  .open-btn{
    font-size:13px; font-weight:600; color:var(--ink);
    border:1px solid var(--line); border-radius:6px; padding:6px 12px;
    background:var(--bg);
  }
  .open-btn:hover{border-color:var(--ink);}

  /* ---------- UNIT DETAIL ---------- */
  #detail{display:none; max-width:1180px; margin:0 auto; padding:24px 24px 70px;}
  .back-link{font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; margin-bottom:18px; border:none; background:none;}
  .back-link:hover{color:var(--ink);}
  .detail-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:6px;}
  .detail-head h2{font-size:26px;}
  .detail-sub{color:var(--muted); font-size:14px; margin-bottom:24px;}

  .mode-switch{display:flex; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:4px; width:fit-content; margin-bottom:22px;}
  .mode-btn{border:none; background:transparent; padding:8px 18px; border-radius:6px; font-size:14px; font-weight:500; color:var(--muted);}
  .mode-btn.active{background:var(--ink); color:#fff;}

  .study-panel{display:grid; grid-template-columns:1fr; gap:0;}
  .pdf-frame-wrap{
    border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--panel);
  }
  .pdf-toolbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted);
  }
  .pdf-toolbar a{font-weight:600; color:var(--ink); text-decoration:none;}
  iframe.pdf{width:100%; height:70vh; border:none; display:block; background:#EDEBE3;}

  /* ---------- QUIZ ---------- */
  .quiz-wrap{display:none;}
  .quiz-progress{display:flex; align-items:center; gap:10px; margin-bottom:20px; font-size:13px; color:var(--muted);}
  .progress-track{flex:1; height:4px; background:var(--line); border-radius:2px; overflow:hidden;}
  .progress-fill{height:100%; background:var(--moss); width:0%; transition:width .2s;}

  .q-card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:24px; margin-bottom:20px;}
  .q-num{font-size:12px; color:var(--moss); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;}
  .q-text{font-size:17px; font-weight:500; line-height:1.5; margin-bottom:16px;}
  .q-img{max-width:100%; border-radius:4px; border:1px solid var(--line); margin-bottom:16px; display:block;}
  .opt{
    display:flex; align-items:center; gap:12px;
    border:1px solid var(--line); border-radius:6px; padding:12px 14px; margin-bottom:9px;
    font-size:14.5px; background:var(--bg); transition:border-color .12s, background .12s;
  }
  .opt:hover{border-color:var(--ink);}
  .opt .letter{
    width:24px; height:24px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex-shrink:0; background:#fff;
  }
  .opt.correct{background:var(--moss-bg); border-color:var(--moss);}
  .opt.correct .letter{background:var(--moss); border-color:var(--moss); color:#fff;}
  .opt.wrong{background:var(--coral-bg); border-color:var(--coral);}
  .opt.wrong .letter{background:var(--coral); border-color:var(--coral); color:#fff;}

  .explain{font-size:13.5px; color:var(--muted); background:var(--bg); border-radius:5px; padding:12px 14px; margin-top:6px; display:none; border-left:2px solid var(--amber);}

  .quiz-nav{display:flex; justify-content:space-between; align-items:center; margin-top:6px;}
  .primary-btn{
    background:var(--ink); color:#fff; border:none; border-radius:6px;
    padding:11px 22px; font-size:14px; font-weight:600;
  }
  .primary-btn:disabled{opacity:.4;}
  .ghost-btn{background:none; border:1px solid var(--line); border-radius:6px; padding:11px 20px; font-size:14px; font-weight:500; color:var(--ink);}

  .result-card{display:none; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:40px 24px;}
  .result-card .score{font-family:'Fraunces',serif; font-size:44px; margin:10px 0;}
  .result-card p{color:var(--muted); font-size:14px; margin-bottom:20px;}

  @media (max-width:600px){
    .nav-inner{padding:12px 16px;}
    .intro{padding:28px 16px 4px;}
    .grid-section{padding:20px 16px 50px;}
    #detail{padding:18px 16px 50px;}
    .unit-grid{grid-template-columns:1fr;}
    iframe.pdf{height:50vh;}
    .q-card{padding:18px;}
  }


    .pdf-viewer{ border:1px solid var(--line); border-radius:6px; overflow:hidden; }
    .pdf-toolbar{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); font-size:13px; }
    .pdf-nav, .pdf-zoom{ display:flex; align-items:center; gap:10px; }
    .pdf-btn{ border:1px solid var(--line); background:#fff; border-radius:5px; width:28px; height:28px; }
    .pdf-canvas-wrap{ overflow:auto; max-height:75vh; display:flex; justify-content:center; padding:12px; background:#EDEBE3; }
    .pdf-status{ padding:40px; text-align:center; font-size:14px; color:var(--muted); }

/* Footer Styling */

/* .site-footer{ border-top:1px solid var(--line); margin-top:60px; background:var(--panel); }
.footer-inner{
  max-width:1180px; margin:0 auto; padding:32px 24px 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-links{ display:flex; gap:22px; font-size:14px; }
.footer-links a{ color:var(--muted); text-decoration:none; }
.footer-links a:hover{ color:var(--ink); }
.footer-social{ display:flex; gap:14px; }
.footer-social a{ color:var(--muted); display:flex; }
.footer-social a:hover{ color:var(--ink); }
.footer-bottom{
  text-align:center; font-size:12px; color:var(--muted);
  padding:14px 24px; border-top:1px solid var(--line);
}
@media (max-width:600px){
  .footer-inner{ flex-direction:column; text-align:center; }
} */

.site-footer{ background:var(--ink); color:var(--bg); margin-top:60px; }
.footer-inner{
  max-width:1180px; margin:0 auto; padding:40px 24px 24px;
  display:flex; justify-content:space-evenly; gap:40px;
}
.footer-col-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:rgba(246,245,240,.45); margin-bottom:12px;
}
.footer-links{ display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer-links a{ color:rgba(246,245,240,.85); text-decoration:none; }
.footer-links a:hover{ color:var(--amber); }
.footer-social{ display:flex; flex-direction:column; gap:14px; }
.footer-social a{ color:rgba(246,245,240,.85); width:fit-content; }
.footer-social a:hover{ color:var(--amber); }
.footer-bottom{
  text-align:center; font-size:12px; color:rgba(246,245,240,.45);
  padding:14px 24px; border-top:1px solid rgba(246,245,240,.12);
}
@media (max-width:600px){
  .footer-inner{ flex-direction:column; gap:28px; }
}