:root{
  --ink:#18211d;--muted:#6d7771;--line:#dfe6e1;--paper:#f6f8f5;--card:#fff;
  --accent:#1f5b45;--accent-2:#e9f2ed;--warm:#8f6d3f;--danger:#8a3f3f;
  --locked:#a7afa9;--locked-bg:#eff1ef;--shadow:0 18px 50px rgba(27,50,39,.08);--radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;line-height:1.72}
button,select,input,textarea{font:inherit}button{cursor:pointer}
.shell{width:min(1160px,calc(100% - 32px));margin-inline:auto}
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.header-inner{padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1.25}
.brand-kicker{font-size:11px;letter-spacing:.17em;color:var(--accent);font-weight:800}
.brand strong{font-family:Georgia,"Times New Roman",serif;font-size:28px;margin-top:4px}
.brand>span:last-child{font-size:13px;color:var(--muted);margin-top:5px}
.header-clock{text-align:right;line-height:1.2}.header-clock span{display:block;font-size:10px;letter-spacing:.15em;color:var(--muted);font-weight:800}.header-clock strong{font-variant-numeric:tabular-nums;font-size:18px}
main{padding:34px 0 80px}
.eyebrow{margin:0 0 6px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.16em}
.journey-card,.hero-card,.lesson-card,.completion-card,.empty-card,.locked-lesson-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.journey-card{padding:28px 30px;margin-bottom:26px}
.journey-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px}.journey-head h1{font-size:25px;margin:0}.journey-count{display:flex;align-items:baseline;gap:5px;color:var(--muted)}.journey-count strong{font-size:30px;color:var(--accent)}
.journey-progress{height:10px;background:#e7ebe8;border-radius:999px;overflow:hidden;margin:20px 0 11px}.journey-progress span{display:block;height:100%;background:var(--accent);border-radius:inherit}
.journey-legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:12px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.dot.open{background:var(--accent)}.dot.today{background:var(--warm)}.dot.locked{background:#b9bfbb}.star-legend{color:#8b6a38;font-weight:700}
.roadmap-section{margin-bottom:28px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:13px}.section-heading h2{margin:0;font-size:22px}.section-heading>span{font-size:12px;color:var(--muted)}
.roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.roadmap-item{min-height:112px;border:1px solid var(--line);border-radius:15px;padding:14px 15px;text-decoration:none;display:flex;flex-direction:column;gap:4px;transition:.15s ease}
.roadmap-item strong{font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.35}
.roadmap-day{font-size:10px;font-weight:900;letter-spacing:.09em}
.roadmap-meaning{font-size:12px;line-height:1.45;color:#66716b;margin-top:3px}
.roadmap-frequency{display:flex;align-items:center;gap:7px;margin-top:6px}
.roadmap-frequency b{font-family:Georgia,"Times New Roman",serif;font-size:13px;letter-spacing:.04em;color:#9a7134}
.roadmap-frequency em{font-style:normal;font-size:9px;color:#8a938e}
.roadmap-status{margin-top:auto;font-size:11px;padding-top:7px}
.roadmap-item.released{background:#fff;color:var(--ink)}.roadmap-item.released .roadmap-day,.roadmap-item.released .roadmap-status{color:var(--accent)}
.roadmap-item.released:hover,.roadmap-item.selected{border-color:#8db09e;background:#f0f6f2;transform:translateY(-1px)}
.roadmap-item.locked{background:var(--locked-bg);border-color:#e0e4e1;color:#9aa19d;cursor:not-allowed}.roadmap-item.locked strong{color:#8d9490}.roadmap-item.locked .roadmap-meaning{color:#a0a7a3}.roadmap-item.locked .roadmap-frequency b{color:#b3a58f}.roadmap-item.locked .roadmap-frequency em,.roadmap-item.locked .roadmap-status{color:#a7ada9}
.roadmap-item.today{box-shadow:inset 0 0 0 1px #b89a6c}.roadmap-item.today .roadmap-day{color:var(--warm)}
.locked-lesson-card{text-align:center;padding:42px 30px}.locked-lesson-card h2{font-family:Georgia,"Times New Roman",serif;font-size:32px;margin:8px auto 12px;max-width:800px}.locked-lesson-card>p{color:var(--muted)}
.day-badge{display:inline-flex;background:var(--accent);color:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;letter-spacing:.08em}
.countdown-box{display:inline-flex;min-width:320px;flex-direction:column;background:#f4f7f5;border:1px solid #dbe4de;border-radius:18px;padding:18px 28px;margin:14px auto}.countdown-box span,.countdown-box small{color:var(--muted);font-size:12px}.countdown-box strong{font-size:28px;font-variant-numeric:tabular-nums;color:var(--accent)}
.locked-message{display:inline-block;background:#f5eeee;color:var(--danger);border-radius:12px;padding:12px 18px}.server-lock-note{font-size:12px!important;margin-top:18px}
.hero-card{padding:42px}.hero-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}
.hero-card>.eyebrow{margin-top:32px}.hero-card h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(33px,5.4vw,58px);line-height:1.12;margin:0;max-width:900px;font-weight:600;letter-spacing:-.02em}
.meaning{font-size:20px;margin:18px 0 30px;color:#3e4a44}
.speakable-heading{display:flex;align-items:flex-start;gap:14px}.speakable-heading h1{flex:1}
.speak-en{border:1px solid #cddbd3;background:#fff;color:var(--accent);font-weight:800;transition:.15s ease;box-shadow:0 3px 10px rgba(31,91,69,.05)}
.speak-en:hover,.speak-en:focus-visible,.speak-en.speaking{border-color:var(--accent);background:var(--accent);color:#fff;outline:none}
.speak-en-icon{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;padding:0;font-size:15px;line-height:1}
.speak-en-main{flex:0 0 auto;border-radius:999px;padding:9px 14px;white-space:nowrap;font-size:13px}
.audio-panel{background:linear-gradient(135deg,#edf4f0,#f7f9f7);border:1px solid #d7e5dc;border-radius:18px;padding:20px}.audio-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.audio-title span{font-size:13px;color:var(--accent);font-weight:700}
.audio-controls{display:flex;flex-wrap:wrap;gap:9px}.audio-controls button,.completion-card button{border:1px solid #cad8d0;background:#fff;color:var(--ink);border-radius:12px;padding:10px 14px;font-weight:700}.audio-controls button:hover,.audio-controls button.active{border-color:var(--accent);background:var(--accent);color:#fff}.audio-controls .infinity{border-color:#a98d65;color:#6d4d22}.audio-controls .stop-btn{color:var(--danger)}
.audio-options{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px}.audio-options label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.audio-options select{border:1px solid #ccd7d0;border-radius:9px;background:#fff;padding:7px 9px;color:var(--ink)}
.learning-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.lesson-card{padding:30px;position:relative}.lesson-card.wide{grid-column:1/-1}.section-no{font-family:Georgia,serif;color:#a6b3ac;font-size:14px}.lesson-card h2,.completion-card h2{font-size:22px;margin:4px 0 18px}.lesson-card p{margin:0 0 14px}
.note-box,.tip-box{margin-top:20px;border-left:3px solid var(--accent);background:#f5f8f6;padding:15px 17px;border-radius:0 12px 12px 0}.note-box p{margin:5px 0 0}.chunk{font-family:Georgia,serif;font-size:22px!important;line-height:1.4}.pron-guide{color:var(--accent);font-weight:700}.plain-list{padding-left:20px;margin-bottom:0}
.english-audio-row{display:flex;align-items:flex-start;gap:10px}.english-audio-row>p{flex:1}.example-audio-row{align-items:center}.example-list{display:grid;gap:10px}.example-item{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line)}.example-item:first-child{border-top:0}.example-item>span{width:30px;height:30px;display:grid;place-items:center;background:var(--accent-2);border-radius:50%;color:var(--accent);font-weight:800;font-size:12px}.example-en{font-family:Georgia,serif;font-size:19px;margin:0!important}.example-ko{color:var(--muted);font-size:14px;margin:4px 0 0!important}
.practice-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}.practice-list li{display:flex;align-items:flex-start;gap:10px}.compare-expression{font-family:Georgia,serif;font-size:21px;font-weight:700}
.completion-card{margin-top:18px;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.completion-card .eyebrow{margin:0}.completion-card h2{margin:4px 0 4px}.completion-card p:last-child{margin:0;color:var(--muted);font-size:13px}.completion-card button{min-width:165px;border-color:var(--accent);color:var(--accent)}.completion-card button.done{background:var(--accent);color:#fff}
.empty-card{padding:50px;text-align:center}.site-footer{border-top:1px solid var(--line);padding:28px 0 45px;color:var(--muted);font-size:12px;text-align:center}

@media(max-width:900px){.roadmap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){
  .header-inner{align-items:flex-start}.header-clock{padding-top:4px}
  .journey-head{align-items:flex-start;flex-direction:column}.journey-count{align-self:flex-end}
  .roadmap-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}
  .learning-grid{grid-template-columns:1fr}.lesson-card.wide{grid-column:auto}
  .hero-card{padding:27px 22px}.lesson-card{padding:24px 21px}.hero-meta{align-items:flex-start}
  .completion-card{align-items:stretch;flex-direction:column}.completion-card button{width:100%}
  .speakable-heading{flex-direction:column;gap:12px}.speak-en-main{align-self:flex-start}
  .countdown-box{min-width:0;width:100%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.locked-meaning{font-size:17px!important;color:#4e5953!important;margin:2px 0 8px!important}
.locked-frequency{display:flex;justify-content:center;align-items:center;gap:9px;margin:0 0 16px}
.locked-frequency span{font-family:Georgia,"Times New Roman",serif;color:#9a7134;letter-spacing:.05em}
.locked-frequency small{color:var(--muted)}
.lesson-frequency{display:flex;align-items:center;gap:9px;margin:-16px 0 24px}
.lesson-frequency b{font-family:Georgia,"Times New Roman",serif;color:#9a7134;letter-spacing:.05em;font-size:16px}
.lesson-frequency span{font-size:11px;color:var(--muted);font-weight:700}

.header-actions{display:flex;align-items:center;gap:14px}
.account-chip{display:inline-flex;align-items:center;text-decoration:none;border:1px solid #cbdad1;border-radius:999px;padding:8px 11px;color:var(--accent);font-size:11px;font-weight:800;background:#fff}
.account-chip.guest{background:#f0f6f2}
.free-access-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#eef6f1;border:1px solid #d6e6dc;border-radius:16px;padding:13px 16px;margin-bottom:16px}
.free-access-banner div{display:flex;align-items:center;gap:10px}
.free-access-banner strong{color:var(--accent);font-size:13px}
.free-access-banner span{color:var(--muted);font-size:12px}
.free-access-banner a{font-size:11px;font-weight:900;color:var(--accent);text-decoration:none;white-space:nowrap}
#completeLesson:disabled{opacity:.55;cursor:wait}
@media(max-width:700px){
  .header-actions{flex-direction:column;align-items:flex-end;gap:7px}
  .account-chip{font-size:10px}
  .free-access-banner{align-items:flex-start;flex-direction:column}
  .free-access-banner div{align-items:flex-start;flex-direction:column;gap:2px}
}


/* V1.4.1 — 오늘 학습 중심 UX */
.today-navigation-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 20px;
  margin-bottom:18px;
  box-shadow:0 10px 28px rgba(27,50,39,.05)
}
.today-nav-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}
.today-stage-line{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap
}
.today-stage-line strong{
  font-size:17px
}
.today-stage-line span{
  color:var(--muted);
  font-size:12px
}
.schedule-open-btn,.back-today-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #c7d9cf;
  border-radius:999px;
  padding:9px 14px;
  background:#f0f6f2;
  color:var(--accent);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  white-space:nowrap
}
.schedule-open-btn:hover,.back-today-btn:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent)
}
.journey-progress.compact{
  margin:14px 0 8px;
  height:7px
}
.compact-progress-text{
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:var(--muted);
  font-size:11px
}
.schedule-only-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:26px 28px;
  margin-bottom:14px;
  box-shadow:var(--shadow)
}
.schedule-only-head h1{
  margin:2px 0 5px;
  font-size:28px
}
.schedule-only-head p:last-child{
  margin:0;
  color:var(--muted);
  font-size:13px
}
.roadmap-section.schedule-only{
  margin-top:0
}
.roadmap-section.schedule-only .journey-legend{
  padding:9px 4px 14px
}
.roadmap-section.schedule-only .roadmap-grid{
  margin-bottom:20px
}

/* 기본 학습화면에서는 스케줄 카드가 존재하지 않으므로
   사용자가 바로 오늘 학습 본문으로 진입한다. */

@media(max-width:720px){
  .today-nav-main,
  .schedule-only-head{
    align-items:flex-start;
    flex-direction:column
  }
  .schedule-open-btn,.back-today-btn{
    width:100%
  }
  .compact-progress-text{
    flex-direction:column;
    gap:2px
  }
}


/* V1.6.1 — Daily English Kit branding */
.today-stage-line strong{
  display:inline-flex;
  align-items:center;
  gap:6px
}
.today-stage-line strong::before{
  content:"KIT";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#edf5f0;
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em
}
.schedule-only-head .eyebrow{
  letter-spacing:.08em
}


/* V1.6.5 — Public header admin entry */
.admin-entry-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border:1px solid #d7dfda;
  border-radius:999px;
  background:#fff;
  color:#66736b;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:.15s ease
}
.admin-entry-btn:hover{
  border-color:#1f5b45;
  color:#1f5b45;
  background:#f3f7f4
}
@media(max-width:700px){
  .admin-entry-btn{
    min-height:30px;
    padding:0 10px;
    font-size:9px
  }
}


/* =========================================================
   V1.6.8 — Browser Web Speech Test Mode
   ========================================================= */

.speech-test-options{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.speech-test-options label{
  min-width:0;
}
.speech-test-options select{
  width:100%;
  min-width:0;
}
.speech-engine-note{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(31,91,69,.10);
  color:#6d7972;
  font-size:10px;
  line-height:1.4;
}
.speech-engine-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 7px;
  border-radius:999px;
  background:#e8f3ec;
  color:#1f5b45;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}
#speechVoiceStatus{
  min-width:0;
  overflow-wrap:anywhere;
}

@media(max-width:900px){
  .speech-test-options{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:560px){
  .speech-test-options{
    grid-template-columns:1fr;
  }
  .speech-engine-note{
    align-items:flex-start;
  }
}


/* =========================================================
   V1.7.0 — Azure Neural Voice + Permanent Audio Cache
   ========================================================= */
.azure-audio-options{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.azure-engine-note{
  background:linear-gradient(90deg,rgba(238,247,242,.8),rgba(255,255,255,0));
  border-radius:10px;
  padding:9px 10px;
  border-top:0;
}
.azure-engine-note .speech-engine-badge{
  background:#dfeee6;
  color:#195a42;
}
@media(max-width:560px){
  .azure-audio-options{
    grid-template-columns:1fr 1fr;
  }
}