/* KSA Speaking Workbook — 공용 디자인(포털·허브·뷰어). 슬라이드(slidekit) 디자인과 같은 토큰을 쓴다.
   외부 폰트/CDN 없음: 기기에 Pretendard 가 있으면 사용, 없으면 서브셋 woff2(fonts/), 그것도 없으면 시스템 한글 폰트. */
@font-face{font-family:KSAPretendard;font-weight:400;font-display:swap;
  src:local("Pretendard Regular"),local("Pretendard-Regular"),url("fonts/Pretendard-Regular.subset.woff2") format("woff2")}
@font-face{font-family:KSAPretendard;font-weight:500 800;font-display:swap;
  src:local("Pretendard Bold"),local("Pretendard-Bold"),url("fonts/Pretendard-Bold.subset.woff2") format("woff2")}

:root{
  --acc:#2D6A4F; --acc-d:#1B4332; --acc-l:#E4F1E8; --acc-t:#1B4332;
  --org:#F2994A; --org-d:#3B2000;
  --bg:#FAF8F4; --card:#fff; --line:#E4E8EE; --ink:#16212B; --ink2:#2B3642; --mute:#6B7280;
  --shadow:0 6px 24px rgba(31,41,51,.07);
  --font:KSAPretendard,Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  color-scheme:light dark;
}
[data-book="1"]{--acc:#2D6A4F;--acc-d:#1B4332;--acc-l:#E4F1E8}
[data-book="2"]{--acc:#1F6FB2;--acc-d:#123F66;--acc-l:#E3EFF9}
[data-book="3"]{--acc:#7A3FA0;--acc-d:#46225F;--acc-l:#EFE6F6}
[data-book="4"]{--acc:#C2511A;--acc-d:#6B2A0A;--acc-l:#FBE9DD}
[data-book="5"]{--acc:#0E8577;--acc-d:#07504A;--acc-l:#DDF2EF}
[data-book]{--acc-t:var(--acc-d)}
@media (prefers-color-scheme:dark){
  :root{--bg:#14171A;--card:#1D2226;--line:#2D353C;--ink:#EEF1F3;--ink2:#D5DBE0;--mute:#98A2AD;--shadow:0 6px 24px rgba(0,0,0,.35)}
  [data-book]{
    --acc-l:color-mix(in srgb,var(--acc) 22%,#1D2226);
    --acc-t:color-mix(in srgb,var(--acc) 40%,#fff);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--org);outline-offset:2px}

/* ---------- 히어로 헤더 (포털·허브 공통) ---------- */
header,.page-header,.hub-header{
  position:relative;overflow:hidden;background:var(--acc-d);color:#fff;
  padding:46px max(20px,calc((100% - 1100px)/2)) 52px;text-align:left;
  border-top:8px solid var(--acc);
}
header::before,.page-header::before,.hub-header::before{
  content:"";position:absolute;right:-150px;top:-190px;width:480px;height:480px;border-radius:50%;background:var(--acc);opacity:.5;pointer-events:none}
header::after,.page-header::after,.hub-header::after{
  content:"";position:absolute;left:-110px;bottom:-150px;width:260px;height:260px;border-radius:50%;border:12px solid var(--acc);opacity:.4;pointer-events:none;
  right:auto;top:auto}
.hub-header-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto}
.hub-header{padding-inline:20px}
header>*,.page-header>*{position:relative;z-index:1}
header h1,.page-header h1,.hub-title{
  margin:0 0 6px;font-size:clamp(26px,4.6vw,40px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:#fff}
header h1::after,.page-header h1::after,.hub-title::after{content:"";display:block;width:72px;height:5px;border-radius:3px;background:var(--org);margin:16px 0 14px}
header p,.page-header p,.hub-sub{margin:0;max-width:640px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.86)}
.hub-eyebrow{font-size:13px;font-weight:700;letter-spacing:.2em;color:#F9C58E;text-transform:uppercase}
.stats,.hub-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.stats .stat,.hub-stat{background:rgba(255,255,255,.14);border-radius:30px;padding:7px 18px;font-size:14px;color:rgba(255,255,255,.9);display:flex;align-items:baseline;gap:6px}
.stats .stat b,.hub-stat b{font-size:18px;font-weight:800;color:#F9C58E;display:inline}
.stats .stat span{font-size:14px}
/* 포털: 5권 색 띠 */
.portal header{border-top:0;--acc:#33414F;
  background:linear-gradient(90deg,#2D6A4F 20%,#1F6FB2 20% 40%,#7A3FA0 40% 60%,#C2511A 60% 80%,#0E8577 80%) top/100% 8px no-repeat,#16212B}

/* ---------- 검색 ---------- */
.search-wrap,.search-row{max-width:1100px;margin:0 auto;padding:0 20px}
.search-wrap{margin-top:-26px;position:relative;z-index:5}
.search-row{padding-top:20px}
.search-input{
  width:100%;padding:15px 20px;font:inherit;font-size:15.5px;color:var(--ink);background:var(--card);
  border:2px solid var(--line);border-radius:16px;box-shadow:var(--shadow);outline:none;transition:border-color .15s,box-shadow .15s}
.search-input::placeholder{color:var(--mute)}
.search-input:focus{border-color:var(--org);box-shadow:0 0 0 4px rgba(242,153,74,.22)}
.search-hint{text-align:center;font-size:13px;color:var(--mute);margin:10px 0 0}

/* ---------- 본문 래퍼 ---------- */
.wrap,.groups,.hub-body{max-width:1100px;margin:0 auto;padding:0 20px}
.hub-body,.groups{padding-bottom:64px}
.groups{margin-top:10px}
.group{max-width:1100px;margin:0 auto;padding:10px 20px 0}
#groups>.group:last-child{padding-bottom:56px}
.results-meta{text-align:center;font-size:13.5px;color:var(--mute);margin:22px 0 6px}
.no-results{text-align:center;color:var(--mute);padding:56px 20px;font-size:15px}

/* 포털 권 이동 칩 */
.book-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:26px 0 4px}
.book-nav a,.book-nav span{padding:8px 18px;border-radius:30px;font-size:13.5px;font-weight:700;background:var(--acc-l);color:var(--acc-t);transition:transform .12s,background .12s}
.book-nav a:hover{transform:translateY(-1px);background:var(--acc);color:#fff}
.book-nav span.disabled{background:var(--line);color:var(--mute)}

/* ---------- 그룹 제목 ---------- */
.group-block,.stage-group{margin-bottom:34px}
.group-title,.stage-label,.group-head{
  display:flex;align-items:center;gap:10px;margin:28px 0 14px;font-size:18px;font-weight:800;color:var(--acc-t);letter-spacing:-.01em}
.group-title::before,.stage-label::before,.group-head::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--acc);flex:none}
.group-head{align-items:center}
.group-head h2{margin:0;font-size:18px;font-weight:800;color:var(--acc-t)}
.group-head>span,.stage-label .count{font-size:13px;font-weight:500;color:var(--mute)}
.group-title .badge{width:auto;height:auto;background:var(--acc-l);color:var(--acc-t);font-size:12.5px;font-weight:700;padding:3px 12px;border-radius:30px}

/* ---------- 카드 ---------- */
.card-grid,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.card{
  background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:18px 20px 20px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;display:flex;flex-direction:column;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--acc)}
.card:hover{transform:translateY(-3px);border-color:var(--acc)}
.card-top{display:flex;align-items:center;gap:10px;margin:6px 0 8px}
.card-badge,.card .badge{
  min-width:38px;height:38px;padding:0 8px;border-radius:30px;background:var(--acc);color:#fff;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex:none;white-space:nowrap}
.card-badge.part-a{background:var(--org);color:var(--org-d)}
.card-badge.part-b{background:var(--acc-d);color:#fff}
.card-range,.card .range{font-size:13px;color:var(--mute);font-weight:500}
.set-no{display:inline-block;margin-top:6px;background:var(--acc-l);color:var(--acc-t);border-radius:30px;padding:3px 12px;font-size:12px;font-weight:700;letter-spacing:.04em}
.card-title,.set-title,.card h3{margin:8px 0 8px;font-size:17px;font-weight:700;line-height:1.35;color:var(--ink);letter-spacing:-.01em}
.card h3{font-size:18px}
.card-meta,.meta,.meta-row{font-size:13px;color:var(--mute)}
.card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.meta{margin-bottom:14px}
.meta-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.meta-row .stat{font-size:13px;color:var(--mute)}
.card-level,.level-tag{background:var(--acc-l);color:var(--acc-t);font-weight:700;font-size:12px;padding:3px 11px;border-radius:30px;margin-left:auto}
.card-actions,.btns{display:flex;gap:10px;margin-top:auto;padding-top:14px}
.card-btn,.btns a,.btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px 0;border-radius:30px;
  font-size:14px;font-weight:700;transition:filter .12s,transform .12s}
.card-btn:hover,.btns a:hover{filter:brightness(1.07);transform:translateY(-1px)}
.card-btn-explain,.btn-explain{background:var(--acc);color:#fff}
.card-btn-practice,.btn-practice{background:var(--org);color:var(--org-d)}
.hub-footer{text-align:center;color:var(--mute);font-size:13px;padding:24px 20px 44px}
code{background:var(--line);padding:1px 6px;border-radius:6px}

/* ---------- 뷰어 ---------- */
.viewer-body,body.viewer{background:var(--acc-d)}
html:has(.viewer-body),html:has(.topbar),html:has(.v45){background:var(--acc-d)}
.viewer-body{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb,var(--acc) 30%,var(--acc-d)),var(--acc-d) 70%)}
.viewer-topbar,.topbar{
  display:flex;align-items:center;gap:12px;height:56px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
  background:rgba(0,0,0,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;flex-shrink:0;
  border-bottom:3px solid var(--acc)}
.viewer-back,.topbar a,.viewer-topbar a{
  display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:30px;background:rgba(255,255,255,.14);
  color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap;flex-shrink:0;transition:background .12s}
.viewer-back:hover,.topbar a:hover{background:rgba(255,255,255,.26)}
#typeSwitch{background:var(--org);color:var(--org-d);margin-left:auto}
#typeSwitch:hover{background:#F9AC68}
.viewer-title,.set-name{flex:1;min-width:0;text-align:center;font-size:14.5px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-title{margin:0 auto}
.viewer-counter,.counter,footer#counter{font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.16);padding:5px 14px;border-radius:30px;flex-shrink:0;min-width:64px;text-align:center}
.tabs{display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.14);border-radius:30px}
.tab{padding:6px 16px;border:0;border-radius:30px;background:transparent;color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .12s}
.tab:hover{background:rgba(255,255,255,.16)}
.tab.active{background:var(--org);color:var(--org-d)}

/* book1 무대 */
.viewer-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;touch-action:pan-y}
.viewer-stage img,.stage img{
  width:min(96vw,calc((100dvh - 120px) * 16 / 9));height:auto;max-width:96vw;aspect-ratio:16/9;object-fit:contain;
  background:#FAF8F4;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);
  user-select:none;-webkit-user-drag:none;cursor:pointer}
.viewer-stage img.is-loading,.stage img.is-loading{visibility:hidden}
/* book2~5 무대 */
.stage{position:fixed;inset:56px 0 34px 0;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.stage img{width:min(96vw,calc((100dvh - 120px) * 16 / 9))}
html:has(.topbar) body{background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb,var(--acc) 30%,var(--acc-d)),var(--acc-d) 70%) fixed;height:100%;overflow:hidden}
.topbar{position:fixed;top:0;left:0;right:0;z-index:20}
.topbar .set-name{margin:0 auto}
.counter,footer#counter{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:15;pointer-events:none;background:rgba(0,0,0,.4);padding:3px 14px;font-size:13px}
.progress,.v45 .progress{position:fixed;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.14);z-index:14}
.progress i,.progress-bar{display:block;height:100%;width:0;background:var(--org);transition:width .15s ease;border-radius:0 3px 3px 0}

/* 로딩 / 오류 문구 */
.viewer-loading,.loading{color:rgba(255,255,255,.8);font-size:14px;text-align:center;pointer-events:none}
.viewer-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;padding:0 24px}
.viewer-loading.is-visible{display:block}
.loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;padding:0 24px}
.viewer-loading.is-toast,.loading.toast{inset:auto;position:fixed;top:68px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);padding:6px 16px;border-radius:30px;font-size:13px;color:#fff;display:block}
.viewer-loading.is-toast{position:absolute;top:14px}
.viewer-loading.is-error,.loading.error{pointer-events:auto;cursor:pointer;line-height:1.7;max-width:92%;opacity:1}

/* 이전/다음 버튼 */
.viewer-nav-btn,.nav,.nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font:inherit;font-size:30px;line-height:1;padding:0 0 4px;
  background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.25);transition:background .15s,transform .15s;z-index:15}
.nav,.nav-btn{position:fixed}
.viewer-nav-btn:hover,.nav:hover,.nav-btn:hover{background:var(--org);color:var(--org-d)}
.viewer-nav-btn:disabled,.nav:disabled,.nav-btn:disabled{opacity:0;pointer-events:none}
.viewer-nav-btn.prev,.nav-prev{left:max(12px,env(safe-area-inset-left))}
.viewer-nav-btn.next,.nav-next{right:max(12px,env(safe-area-inset-right))}
.viewer-bottombar{flex-shrink:0;padding:10px 0 0}
.viewer-progress{height:5px;background:rgba(255,255,255,.14);overflow:hidden}
.viewer-progress-fill{height:100%;background:var(--org);transition:width .15s ease;border-radius:0 3px 3px 0}

@media (max-width:900px){.viewer-nav-btn,.nav,.nav-btn{width:44px;height:44px;font-size:26px}}
@media (max-width:640px){
  header,.page-header{padding-top:34px;padding-bottom:42px}
  .viewer-title,.set-name{font-size:12.5px}
  .set-name{display:none}
  .topbar{gap:8px}
  .viewer-topbar{gap:8px;padding:0 10px}
  .viewer-back,.topbar a{padding:6px 11px;font-size:12.5px}
  .tab{padding:6px 12px;font-size:12.5px}
  .viewer-counter{min-width:0;padding:4px 10px;font-size:12.5px}
  .viewer-nav-btn,.nav,.nav-btn{width:42px;height:42px;font-size:24px;background:rgba(0,0,0,.32)}
  .viewer-nav-btn.prev,.nav-prev{left:6px}.viewer-nav-btn.next,.nav-next{right:6px}
  .card-grid,.grid{grid-template-columns:1fr}
  .viewer-stage img,.stage img{width:min(98vw,calc((100dvh - 120px) * 16 / 9));border-radius:10px}
}
/* 세로 폰: 버튼을 슬라이드 아래 모서리로 */
@media (max-width:640px) and (orientation:portrait){
  .viewer-nav-btn,.nav,.nav-btn{top:auto;bottom:14px;transform:none;width:68px;height:48px;border-radius:30px;background:rgba(255,255,255,.18);font-size:26px}
  .nav{bottom:14px}
  .viewer-nav-btn.prev,.nav-prev{left:12px}.viewer-nav-btn.next,.nav-next{right:12px}
  .viewer-stage img,.stage img{width:98vw}
  .stage{inset:56px 0 80px 0}
  .counter{bottom:24px}
}
/* 낮은 가로 화면(폰 가로·프로젝터) */
@media (max-height:480px){
  .viewer-topbar,.topbar{height:44px}
  .viewer-stage img,.stage img{width:min(96vw,calc((100dvh - 90px) * 16 / 9))}
  .stage{inset:44px 0 28px 0}
  .counter{bottom:6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Book4·5 뷰어(header/.title/.link/.msg/footer#counter 구조) ---------- */
.v45{height:100%;overflow:hidden;background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb,var(--acc) 30%,var(--acc-d)),var(--acc-d) 70%) fixed}
.v45 header{position:fixed;top:0;left:0;right:0;z-index:20;height:56px;padding:0 14px;display:flex;align-items:center;gap:12px;overflow:visible;
  background:rgba(0,0,0,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:0;border-bottom:3px solid var(--acc);color:#fff}
.v45 header::before,.v45 header::after{display:none}
.v45 header>*{position:static}
.v45 header a,.v45 .link{display:inline-flex;align-items:center;padding:7px 14px;border-radius:30px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:13.5px;font-weight:700;border:0;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .12s}
.v45 header a:hover{background:rgba(255,255,255,.26)}
.v45 .link{background:var(--org);color:var(--org-d);margin-left:auto}
.v45 .link:hover{background:#F9AC68}
.v45 .title{flex:1;min-width:0;text-align:center;font-size:14.5px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v45 .progress{height:5px}
.v45 .msg{display:none;position:fixed;z-index:6;color:rgba(255,255,255,.85);font-size:14px;text-align:center}
.v45 .msg.show{display:block;top:68px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;padding:6px 16px;border-radius:30px;font-size:13px;white-space:nowrap}
.v45 .msg.error{top:50%;transform:translate(-50%,-50%);background:none;white-space:normal;max-width:92%;line-height:1.7;font-size:14px;cursor:pointer}
@media (max-width:640px){.v45 .title{font-size:12.5px}.v45 header{gap:8px;padding:0 10px}.v45 header a,.v45 .link{padding:6px 11px;font-size:12.5px}}
@media (max-height:480px){.v45 header{height:44px}}

/* ---- 전체 이동 막대 (ksa-nav.js) ---- */
.ksa-gnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 16px;background:rgba(250,248,244,.94);backdrop-filter:blur(8px);border-bottom:1px solid #E4E8EE;font-family:inherit}
.ksa-home{display:inline-flex;align-items:center;gap:6px;background:#1B4332;color:#fff!important;text-decoration:none;border-radius:20px;padding:6px 14px;font-size:13.5px;font-weight:700;white-space:nowrap}
.ksa-chips{display:flex;gap:6px;flex-wrap:wrap}
.ksa-chip{text-decoration:none;font-size:13px;font-weight:700;border-radius:18px;padding:5px 12px;background:#EDEFF3;color:#374151}
.ksa-chip[data-book="1"].on{background:#2D6A4F;color:#fff}.ksa-chip[data-book="2"].on{background:#1F6FB2;color:#fff}.ksa-chip[data-book="3"].on{background:#7A3FA0;color:#fff}.ksa-chip[data-book="4"].on{background:#C2511A;color:#fff}.ksa-chip[data-book="5"].on{background:#0E8577;color:#fff}
.ksa-chip:hover{filter:brightness(.95)}
.ksa-vnav{display:inline-flex;align-items:center;gap:8px;margin-left:8px}
.ksa-vnav .ksa-home{background:rgba(255,255,255,.18);padding:5px 12px;font-size:13px}
.ksa-bsel{border:0;border-radius:16px;padding:5px 8px;font:700 13px inherit;background:rgba(255,255,255,.9);color:#1B2B22}
@media(max-width:640px){.ksa-vnav .ksa-home span{display:none}.ksa-bsel{display:none}.ksa-gnav{padding:6px 10px}}