*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#1a2332; --sub:#5a6678; --bg:#ffffff; --panel:#f4f6fa;
  --brand:#2c5f8a; --brand-deep:#1e4260; --accent:#e8734a; --line:#e2e7ef;
}
body{font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:inherit;text-decoration:none}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;height:52px;padding:0 20px;background:var(--brand-deep);color:#fff;position:sticky;top:0;z-index:50}
.topbar .brand{font-weight:bold;font-size:16px;white-space:nowrap}
.topbar .domain{font-size:12px;opacity:.75;white-space:nowrap}
.tb-lecture{flex:1;display:flex;align-items:center;gap:10px;min-width:0;justify-content:center}
.tb-title{font-weight:bold;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-top{background:var(--accent);color:#fff;font-size:12px;font-weight:bold;padding:5px 12px;border-radius:6px;white-space:nowrap}
.dl-top:hover{filter:brightness(1.1)}

.wrap{max-width:min(94vw,1600px);margin:0 auto;padding:24px 20px 60px}

.hero{text-align:center;padding:48px 0 36px}
.hero h1{font-size:34px;color:var(--brand-deep)}
.hero p{margin-top:10px;color:var(--sub);font-size:16px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}

/* 그룹 머리글 — 그리드 한 줄을 통째로 차지한다 */
.grp{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
     margin:30px 0 0;padding:0 0 0 13px;font-size:17px;color:var(--g,var(--brand-deep));
     border-left:4px solid var(--g,var(--brand))}
.grp:first-child{margin-top:4px}
.grp em{font-style:normal;font-weight:normal;font-size:13px;color:var(--sub)}

.card{display:block;background:var(--tint,var(--panel));border:1px solid var(--line);
      border-top:3px solid var(--g,var(--brand));border-radius:14px;padding:19px 22px 22px;
      transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(30,66,96,.12)}
.card h2{font-size:18px;margin:10px 0 6px;color:var(--ink)}
.card p{font-size:13.5px;color:var(--sub)}
.card .meta{display:inline-block;margin-top:12px;font-size:12px;color:var(--g,var(--brand))}
.badge{display:inline-block;background:var(--g,var(--brand));color:#fff;font-size:12px;font-weight:bold;padding:3px 12px;border-radius:999px}

/* 홈 카드 그룹별 색 (흰 글씨 대비 4.5 이상으로 맞춤) */
.g-prep,.grp-prep{--g:#b8551f;--tint:#fdf3ec}
.g-basic,.grp-basic{--g:#2c5f8a;--tint:#eef4f9}
.g-apply,.grp-apply{--g:#157a6e;--tint:#eaf5f2}
.g-tool,.grp-tool{--g:#6b4c9a;--tint:#f2eefa}
.g-pick,.grp-pick{--g:#b03a6d;--tint:#fbeef4}
.g-qna,.grp-qna{--g:#4d5d75;--tint:#eff2f6}
/* 여러 색이 한 줄에 섞이는 묶음의 머리글 — 중립색 */
.grp-mix{--g:#414b5e}

/* 사전안내처럼 슬라이드 없이 웹페이지로 연결되는 항목 */
.card-link{background:#fff;border-left-style:dashed;border-right-style:dashed;border-bottom-style:dashed}
.card-link .meta{font-weight:bold}

/* ===== 뷰어: 창 크기에 맞춰 100% ===== */
.viewer{position:relative;background:#10161f;height:calc(100vh - 52px - 56px);display:flex;align-items:center;justify-content:center;cursor:pointer}
/* 특정 슬라이드에 걸린 보조자료 링크 (새 창) */
.slide-links{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:92%}
.slide-links a{background:var(--accent);color:#fff;font-size:13.5px;font-weight:bold;padding:9px 18px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.slide-links a:hover{filter:brightness(1.1)}
.ex-page{display:block;font-size:11px;font-weight:normal;color:var(--accent)}
.viewer img{display:block;width:100%;height:100%;object-fit:contain}
.viewer video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.viewer video[hidden]{display:none}
.video-play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:none;cursor:pointer;padding:0;color:#fff}
.video-play-btn .vpb-icon{width:84px;height:84px;border-radius:50%;background:rgba(232,115,74,.95);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 6px 22px rgba(0,0,0,.45);transition:transform .15s,background .15s}
.video-play-btn .vpb-label{font-size:14px;font-weight:bold;background:rgba(16,22,31,.75);padding:6px 16px;border-radius:999px}
.video-play-btn:hover .vpb-icon{transform:scale(1.08);background:#e8734a}
.video-play-btn[hidden]{display:none}
.video-play-btn{z-index:4}
/* 그림 안 동영상 자리 — 여기만 눌러야 재생, 나머지는 다음 장 */
.video-hit{position:absolute;z-index:3;padding:0;background:transparent;cursor:pointer;
  border:2px solid rgba(232,115,74,0);border-radius:10px;transition:border-color .15s,background .15s}
.video-hit:hover,.video-hit:focus-visible{border-color:rgba(232,115,74,.9);background:rgba(232,115,74,.1)}
.video-hit[hidden]{display:none}

/* ===== 하단 고정 컨트롤 바 ===== */
.controls{position:fixed;bottom:0;left:300px;right:0;z-index:30;height:56px;display:flex;justify-content:center;align-items:center;gap:12px;padding:0 10px;background:rgba(16,22,31,.96);color:#dfe6f0;box-shadow:0 -4px 16px rgba(0,0,0,.25)}
.stage:fullscreen{background:#10161f}
.stage:fullscreen .viewer{height:calc(100vh - 56px)}
.stage:fullscreen .controls{left:0}

/* 복사 토스트 */
.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:#2c8a5f;color:#fff;font-size:13.5px;font-weight:bold;padding:10px 22px;border-radius:999px;z-index:60;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.show{opacity:1}
.controls button{background:#2a3441;color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:15px;cursor:pointer}
.controls button:hover{background:var(--brand)}
.controls #counter{font-size:14px;min-width:76px;text-align:center}
.controls #jump{width:64px;padding:6px;border-radius:6px;border:1px solid #3a4656;background:#1b2430;color:#fff;text-align:center}

.pager{display:flex;justify-content:space-between;align-items:center;margin:22px 0;font-size:14.5px;font-weight:bold}
.pager a{color:var(--brand);padding:8px 14px;border-radius:8px}
.pager a:hover{background:var(--panel)}

.comments{margin-top:30px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.comments h2{font-size:17px;margin-bottom:14px;color:var(--brand-deep)}
.comment-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;font-size:14px}
.comment-item .who{font-weight:bold;font-size:12.5px;color:var(--brand);margin-bottom:3px}
#commentForm{display:flex;flex-direction:column;gap:10px;margin-top:14px}
#commentForm input,#commentForm textarea{border:1px solid var(--line);border-radius:8px;padding:10px;font-size:14px;font-family:inherit}
#commentForm textarea{min-height:80px;resize:vertical}
#commentForm button{align-self:flex-end;background:var(--brand);color:#fff;border:none;border-radius:8px;padding:9px 26px;font-size:14px;font-weight:bold;cursor:pointer}
#commentForm button:hover{background:var(--brand-deep)}

.foot{text-align:center;font-size:12px;color:var(--sub);padding:12px 20px;border-top:1px solid var(--line);margin-top:14px}
.foot-contact{display:block;margin-bottom:8px;font-size:13px;color:var(--ink)}
.foot-contact .contact{color:var(--brand);font-weight:bold;text-decoration:underline}

/* ===== 왼쪽 사이드바 (강의 페이지) ===== */
.lecture-wrap{margin-left:300px}
.below{max-width:1080px;margin:0 auto;padding:14px 24px 72px}
.sidebar{position:fixed;top:52px;left:0;bottom:0;width:300px;overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);z-index:20;padding-bottom:20px}
.sb-section{font-size:11.5px;font-weight:bold;color:var(--sub);letter-spacing:.06em;padding:16px 16px 8px}
.sb-decks a{display:block;font-size:13px;color:var(--ink);padding:7px 16px;border-left:3px solid transparent}
.sb-decks a:hover{background:#e9eef6}
.sb-decks a.cur{border-left-color:var(--brand);background:#e5edf7;font-weight:bold;color:var(--brand-deep)}
.sb-slides a{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink);padding:6px 16px;border-left:3px solid transparent;line-height:1.35}
.sb-slides a:hover{background:#e9eef6}
.sb-slides a.on{border-left-color:var(--accent);background:#fdeee6;font-weight:bold}
.s-no{flex:0 0 24px;text-align:right;font-size:11px;color:var(--sub)}
.s-body{display:block;min-width:0}
.s-desc{display:block;margin-top:2px;font-size:11px;color:var(--sub);line-height:1.3}
.sb-slides a.on .s-desc{color:#8a5a3c}
.sb-extras a{display:block;font-size:12.5px;color:var(--brand-deep);font-weight:bold;padding:7px 16px}
.sb-extras a:hover{background:#e9eef6}
.extras-box{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.extras-box h2{font-size:15px;color:var(--brand-deep);margin-bottom:10px}
.ex-card{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 16px;margin:4px 8px 4px 0;font-size:13.5px;font-weight:bold;color:var(--brand)}
.ex-card:hover{border-color:var(--brand);background:#f0f6fc}
/* ===== 실습 파일 내려받기 ===== */
.sb-files a{display:block;font-size:12.5px;color:var(--brand-deep);padding:6px 16px;line-height:1.35}
.sb-files a:hover{background:#e9eef6}
.files-box{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.files-box h2{font-size:15px;color:var(--brand-deep);margin-bottom:12px}
.fl-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 16px;margin-bottom:8px}
.fl-card:hover{border-color:var(--brand);background:#f0f6fc}
.fl-ext{flex:0 0 52px;text-align:center;background:var(--brand);color:#fff;font-size:11px;font-weight:bold;padding:4px 0;border-radius:6px;letter-spacing:.03em}
.fl-card[download$=".xlam"] .fl-ext,.fl-ext.xlam{background:var(--accent)}
.fl-body{flex:1;min-width:0;display:flex;flex-direction:column}
.fl-body b{font-size:13.5px;color:var(--ink)}
.fl-body em{font-size:12px;color:var(--sub);font-style:normal}
.fl-size{flex:0 0 auto;font-size:12px;font-weight:bold;color:var(--brand)}
.fl-note{margin-top:10px;font-size:12.5px;color:var(--sub);line-height:1.7}
.fl-note code{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:12px}

.sb-toggle{display:none;position:fixed;left:12px;bottom:64px;z-index:40;width:44px;height:44px;border:none;border-radius:50%;background:var(--brand-deep);color:#fff;font-size:18px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3)}

@media (max-width:900px){
  .lecture-wrap{margin-left:0}
  .sidebar{transform:translateX(-100%);transition:transform .2s;width:280px}
  .sidebar.open{transform:translateX(0)}
  .sb-toggle{display:block}
  .controls{left:0}
  .tb-lecture .tb-title{font-size:13px}
  .topbar .domain{display:none}
  .tb-q{width:120px}
}

@media (max-width:640px){
  .hero h1{font-size:26px}
  .controls{flex-wrap:wrap}
  .topbar{padding:0 12px;gap:8px}
  .topbar .brand{font-size:14px;overflow:hidden;text-overflow:ellipsis}
  .tb-search{padding-left:8px}
  .tb-q{width:88px;font-size:12.5px}
  .rs-head h2{font-size:17px}
  .rs-deck{padding:16px}
}

/* 상단 우측 문의 링크 (도메인 표기 자리) */
.topbar a.domain{color:inherit;text-decoration:none}
.topbar a.domain:hover{text-decoration:underline;opacity:1}

/* ===== 상단 검색창 (문의 왼쪽) ===== */
.tb-right{display:flex;align-items:center;gap:14px;min-width:0}
.tb-search{display:flex;align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:2px 4px 2px 12px;transition:background .15s,border-color .15s}
.tb-search:focus-within{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
.tb-q{width:170px;background:transparent;border:none;outline:none;color:#fff;font-size:13px;
  font-family:inherit;padding:5px 0}
.tb-q::placeholder{color:rgba(255,255,255,.6)}
.tb-q::-webkit-search-cancel-button{filter:invert(1);opacity:.6;cursor:pointer}
.tb-go{border:none;background:transparent;color:#fff;font-size:14px;line-height:1;cursor:pointer;
  padding:5px 7px;border-radius:50%;opacity:.85}
.tb-go:hover{opacity:1;background:rgba(255,255,255,.18)}

/* ===== 검색 결과 (메인페이지) ===== */
.results{padding-top:8px}
.rs-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding-bottom:14px;margin-bottom:20px;
  border-bottom:2px solid var(--line)}
.rs-head h2{font-size:20px;color:var(--brand-deep)}
.rs-count{font-size:13px;color:var(--sub)}
.rs-clear{margin-left:auto;border:1px solid var(--line);background:#fff;color:var(--sub);font-family:inherit;
  font-size:12.5px;padding:6px 12px;border-radius:999px;cursor:pointer}
.rs-clear:hover{border-color:var(--brand);color:var(--brand)}
.rs-empty{color:var(--sub);font-size:14px;padding:24px 2px}
.rs-deck{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px}
.rs-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rs-h{font-size:17px;font-weight:bold;color:var(--ink)}
.rs-title:hover .rs-h{color:var(--brand);text-decoration:underline}
.rs-desc{font-size:13.5px;color:var(--sub);margin-top:6px}
.rs-slides{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.rs-slide{display:flex;gap:10px;align-items:baseline;padding:6px 8px;border-radius:8px;font-size:13.5px}
.rs-slide:hover{background:#fff}
.rs-n{flex:none;min-width:30px;text-align:right;font-size:12px;color:var(--brand);font-weight:bold}
.rs-st{min-width:0}
.rs-sub{display:block;font-size:12px;color:var(--sub);margin-top:1px}
.rs-more{align-self:flex-start;margin-top:4px;padding:4px 8px;font-size:12.5px;color:var(--brand);font-weight:bold}
.rs-more:hover{text-decoration:underline}
.results mark{background:#ffe9a8;color:inherit;border-radius:3px;padding:0 1px}

/* 슬라이드 이미지 위 클릭영역 — PPTX 하이퍼링크(모듈별 목차 등)를 웹에서 살린다 */
.hotspots{position:absolute;inset:0;pointer-events:none}
.hotspots .hs{position:absolute;pointer-events:auto;display:block;border-radius:8px;
  border:2px solid transparent;background:transparent;transition:background .12s,border-color .12s}
.hotspots .hs:hover,.hotspots .hs:focus-visible{background:rgba(0,113,227,.13);
  border-color:rgba(0,113,227,.65);outline:none}
.hotspots .hs::after{content:"↵ 이동";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:12px;font-weight:bold;color:#0071e3;background:#fff;border-radius:6px;padding:2px 8px;
  opacity:0;transition:opacity .12s;pointer-events:none}
.hotspots .hs:hover::after,.hotspots .hs:focus-visible::after{opacity:.95}

/* 하단 조작 바 오른쪽 이용 안내 2줄 (별도 푸터를 없애고 여기로 옮김) */
.ctl-note{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  text-align:right;font-size:10.5px;line-height:1.45;color:#8b97a8;white-space:nowrap;pointer-events:none}
@media(max-width:1100px){.ctl-note{display:none}}
/* 실습파일·보조자료가 없는 강의는 슬라이드 아래에 아무것도 없다 — 스크롤이 생기지 않게 여백 제거 */
.below-empty{padding:0}

/* ===== 사전안내처럼 화면 전체를 쓰는 덱을 메인 창 안에서 보여 주는 페이지 ===== */
.frame-page{display:flex;flex-direction:column;height:calc(100vh - 52px)}
.frame-stage{flex:1;min-height:0;position:relative;background:var(--panel)}
.frame-deck{display:block;width:100%;height:100%;border:0}
.frame-stage:fullscreen .frame-deck{height:100vh}
.frame-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 16px;
  border-top:1px solid var(--line);background:var(--panel);font-size:12.5px;color:var(--sub)}
.frame-hint{white-space:nowrap}
.frame-hint kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:#fff;
  padding:1px 6px;font-size:11.5px;font-family:inherit;color:var(--ink)}
.frame-bar button{font-family:inherit;font-size:12.5px;color:var(--sub);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer}
.frame-bar button:hover{border-color:var(--brand);color:var(--brand)}
.frame-open{font-weight:bold;color:var(--brand)}
.frame-open:hover{text-decoration:underline}
.frame-note{margin-left:auto;text-align:right;color:#8b97a8}
@media(max-width:900px){.frame-note{display:none}}

/* === fixed prev/next controls (2026-10) === */
/* ◀ 카운터 번호 ▶ 를 바 왼쪽에 고정 폭으로 두고, 슬라이드마다 나타나고 사라지는 복사류 버튼은 ▶ 오른쪽에 간격을 두고 배치 */
.controls{justify-content:flex-start;padding:0 16px;box-sizing:border-box}
.controls>*{flex:none}
.controls #btnPrev,.controls #btnNext{width:56px;padding:8px 0;text-align:center}
.controls #counter{width:96px;min-width:96px;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.controls #jump{width:64px;box-sizing:border-box}
.controls #btnNext{margin-right:24px}
@media (max-width:1400px){.ctl-note{display:none}}
@media (max-width:640px){
  /* 1행: ◀ 카운터 번호 ▶ (고정) / 2행: 복사·명령어·프롬프트·전체화면 — 바 높이는 버튼 수와 무관하게 고정 */
  .controls{height:104px;flex-wrap:wrap;align-content:flex-start;padding:8px 10px 0;row-gap:8px;column-gap:8px}
  .controls::before{content:"";order:1;flex:0 0 100%;height:0}
  .controls #btnNext{margin-right:0}
  .controls #btnCopy,.controls #btnCopyCmd,.controls #btnCopyPrompt,.controls #btnFull,.controls .ctl-note{order:2}
  .controls button{padding:8px 12px;font-size:14px}
  .controls #btnPrev,.controls #btnNext{padding:8px 0}
  .viewer{height:calc(100vh - 52px - 104px)}
  .stage:fullscreen .viewer{height:calc(100vh - 104px)}
  .sb-toggle{bottom:112px}
  .toast{bottom:116px}
}