/* 드론에듀 공통 스타일 */
@font-face { font-family: 'Paperlogy'; src: url('/assets/fonts/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --navy: #1767d6; --navy-d: #0c1b33; --ink: #1b2735; --sub: #39475a; --muted: #4f5d6e;
  --line: #dde4ec; --line2: #c5d2e2; --bg: #f3f6fa; --soft: #eaf2fe; --white: #fff;
  --gold: #ffb547; --gold-soft: #fff3dc; --gold-ink: #7a4b00;
  --sky: #2f8bff; --sky-d: #1565d0; --hd-bg: linear-gradient(90deg, #0c1b33 0%, #12305a 100%);
  --q4: #2f80ed; --q3: #1f8a4c; --q2: #d9600b; --q1: #7a3fc0; --qi: #0f8577;
  --ok: #1d6b45; --ok-soft: #e8f5ee; --bad: #b42318; --bad-soft: #fdecea;
  --serif: var(--sans-base);
  --sans-base: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --sans: var(--sans-base);

  /* ── 디자인 토큰(사이트 전체 한 벌) ──
     폭: 본문 최대 1280px(머리줄·꼬리말·띠와 같은 선) · 좌우 여백 휴대폰 16 / 태블릿 24 / PC 32
     간격: 4px 단위(8px 리듬) · 글자: 본문 16px, 제목은 clamp() 로 PC↔휴대폰 사이를 부드럽게 */
  --wrap: 1280px;
  --gutter: 16px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sec-y: clamp(40px, 4vw + 24px, 72px);          /* 큰 칸 위아래 */
  --fs-xs: 13px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 17px;
  --fs-h3: clamp(18px, .35vw + 16px, 20px);
  --fs-h2: clamp(22px, 1.1vw + 17px, 30px);
  --fs-h1: clamp(24px, 1.6vw + 18px, 34px);
  --lh: 1.7; --lh-tight: 1.35;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r: 16px;
  --sh-1: 0 1px 2px rgba(12,27,51,.04), 0 6px 18px rgba(12,27,51,.07);
  --sh-2: 0 12px 32px rgba(12,27,51,.14);
  --tap: 44px;                                        /* 휴대폰 손가락 단추 최소 높이 */
  --card-p: clamp(18px, 1.2vw + 13px, 26px);
}
@media (min-width: 641px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }
/* 밝은 화면 전용: 휴대폰이 다크 모드여도 브라우저가 사이트 색을 멋대로 어둡게 바꾸지 않게(크롬 '웹사이트 어둡게'·홈 화면 앱 등) */
:root { color-scheme: only light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); font-size: var(--fs-base); line-height: 1.65; word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--navy); }
a:hover { color: var(--navy-d); }
img { max-width: 100%; }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
td a, .md a, .ft a, .msg a { overflow-wrap: anywhere; }   /* 긴 주소가 칸을 밀어내지 않게 */
.serif { font-family: var(--serif); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* 꼬리말이 있는 화면: 내용이 짧아도 꼬리말은 화면 맨 아래 */
body:has(> footer.ft) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:has(> footer.ft) > footer.ft { margin-top: auto; }
body:has(> footer.ft) > * { flex-shrink: 0; }
body:has(> footer.ft) > :is(main, section, header) { width: 100%; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* 머리말 */
.hd { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.hd .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-tag { display: none; }   /* 휴대폰에서만 보임: 로고 옆 '드론 자격증' */
.hd-nick { text-decoration: none; color: var(--ink); }
.hd-nick:hover b { text-decoration: underline; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-weight: 500; }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }   /* 밑줄 자리를 늘 두어 메뉴를 옮겨도 머리줄 높이가 같게 */
.nav a.on { color: var(--navy-d); font-weight: 700; border-bottom: 2px solid var(--navy-d); }
.hd-user { display: flex; align-items: center; gap: 10px; font-size: 15px; flex-wrap: wrap; }
.btn.btn-study { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; padding: 0 16px; }
.btn.btn-study:hover { background: var(--navy-d); border-color: var(--navy-d); color: #fff; }
.btn.btn-study.on { background: var(--navy-d); border-color: var(--navy-d); box-shadow: 0 0 0 3px rgba(245,197,66,.55); }
.btn-study svg { color: var(--gold); }

/* 지금 위치: 영역 표지 + 위치줄 (학습장·문제 풀기·실전모의고사·전자책·내 학습) */
.crumb { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 14px; color: var(--muted); line-height: 1.5; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--navy); text-decoration: underline; }
.crumb .sep { font-style: normal; color: #9aa7bb; }
.crumb b { color: var(--navy-d); font-weight: 700; }
.area { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-right: 4px; white-space: nowrap; line-height: 1.5; }
.area::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.area-learn { background: var(--navy); color: #fff; }
.area-quiz { background: var(--gold); color: var(--navy-d); }
.area-mock { background: #7a1f2b; color: #fff; }
.area-book { background: var(--ok); color: #fff; }
.area-my { background: var(--soft); color: var(--navy-d); box-shadow: inset 0 0 0 1px var(--line2); }
/* 휴대폰: 위치줄은 한 줄(영역 표지 + 지금 화면만). 휴대폰 문제 창 안도 같음 — PC 서랍 안(in-drawer)·따로 창(popup)은 그대로 */
@media (max-width: 640px) {
  body:not(.in-drawer):not(.popup) .crumb { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: 13.5px; }
  body:not(.in-drawer):not(.popup) .crumb > :not(.area):not(b) { display: none; }
  body:not(.in-drawer):not(.popup) .crumb > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body:not(.in-drawer):not(.popup) .crumb > .area { font-size: 12px; padding: 2px 9px; }
}

/* 버튼·입력 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px; border-radius: 12px;
  border: 1px solid var(--line2); background: var(--white); color: var(--ink); font: inherit; font-weight: 500; line-height: 1.3; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:hover { border-color: var(--navy); color: var(--navy-d); }
.btn-p { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.btn-p:hover { background: var(--navy-d); color: #fff; }
.btn-g { background: var(--gold); border-color: var(--gold); color: var(--navy-d); font-weight: 700; }
.btn-s { min-height: 38px; padding: 0 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-weight: 700; font-size: 15px; }
.field input, .field select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 12px; font: inherit; font-size: max(16px, 1em); background: #fff; color: var(--ink); }
.field input:focus, .field select:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.field small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.hd :focus-visible, .ft :focus-visible, .pband :focus-visible, .navy :focus-visible { outline-color: #8fc2ff; }
::placeholder { color: #8391a3; opacity: 1; }

/* 카드·배지 */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-p); }
.chip { display: inline-block; white-space: nowrap; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--soft); color: var(--navy); }
.chip-gold { background: var(--gold-soft); color: var(--gold-ink); }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-bad { background: var(--bad-soft); color: var(--bad); }
.grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.sec { padding: var(--sec-y) 0; }
.sec-white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec h2 { font-family: var(--serif); font-size: var(--fs-h2); color: var(--navy-d); margin-bottom: 10px; }
.sec .lead { color: var(--muted); font-size: var(--fs-md); margin: 0 0 var(--sp-6); }

/* 화면 머리(내 학습·실전모의고사·합격수기·이용권·관리자·내 계정·문의): 동그란 똑순쌤 + 제목 + 설명 — 메뉴를 옮겨도 같은 자리·같은 모양 */
.sec.pg { padding-top: clamp(20px, 2vw + 12px, 40px); }
.page-hd { display: flex; align-items: flex-start; gap: var(--sp-4); margin: 0 0 var(--sp-6); }   /* 얼굴은 제목 높이에 맞춤(설명 줄 수가 달라도 같은 자리) */
.page-hd > .face { width: 72px; height: 72px; border-width: 3px; box-shadow: 0 3px 10px rgba(20,38,74,.16); }
.page-hd-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.page-hd h1 { font-family: var(--serif); font-size: var(--fs-h1); line-height: 1.3; color: var(--navy-d); }
.page-hd p { margin: 0; color: var(--muted); font-size: clamp(15px, .3vw + 14px, 17px); line-height: 1.65; }
.page-hd p.sub { font-size: var(--fs-sm); }
/* 영역 표지 모양의 제목(실전모의고사: 자줏빛 알약에 흰 글씨) */
.page-hd .pill { display: inline-flex; align-items: center; gap: .3em; padding: .06em .62em .1em .5em; border-radius: 999px; color: #fff; }
.page-hd .pill::before { content: ''; flex: 0 0 auto; width: .26em; height: .26em; border-radius: 50%; background: currentColor; opacity: .75; }
.page-hd .pill-mock { background: #7a1f2b; }

/* 말풍선 */
.bubble { background: #fff; border: 1px solid #d5deec; border-radius: 16px; padding: 14px 16px; box-shadow: 0 6px 18px rgba(20,38,74,.08); font-size: 15px; }

/* 표 */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; white-space: nowrap; }
.tbl-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 알림 */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--navy-d); color: #fff; padding: 14px 20px;
  border-radius: 12px; font-size: 15px; z-index: 100; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.toast.err { background: var(--bad); }
.msg { padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.msg-ok { background: var(--ok-soft); color: #14532d; }
.msg-bad { background: var(--bad-soft); color: #7a1a12; }
.msg-info { background: var(--soft); color: var(--navy-d); }

/* 꼬리말 */
.ft { background: var(--navy-d); color: #c9d3e3; font-size: 14px; }
.ft .wrap { padding-top: 36px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 8px; }
.ft a { color: #fff; }

/* 대화상자 · 똑순쌤 안내 */
.face { border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: #dee8f7; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(20,38,74,.16); }
.teach { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.teach > .face { width: 52px; height: 52px; }
.teach > .tbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ask .dlg { max-width: 500px; gap: 18px; }
.ask .asktxt { color: var(--sub); font-size: 15.5px; line-height: 1.7; margin-top: 6px; }
.ask .asktxt b { color: var(--navy-d); }
.askbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.askbtns .btn { flex: 1 1 140px; white-space: nowrap; }
.askbtns:has(> .btn:nth-child(3)) { flex-direction: column; }   /* 단추가 셋이면 위아래로 */
.askbtns:has(> .btn:nth-child(3)) .btn { flex: 0 0 auto; }
.dlg-bg { position: fixed; inset: 0; background: rgba(20,38,74,.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 70; }
.dlg { background: #fff; border-radius: var(--r-lg); padding: var(--card-p); width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 16px; }


/* ── 좁은 화면(960px 이하) 머리줄: 로고 · ☰ — 메뉴 글줄은 ☰ 안으로 */
.hd-menu { display: none; }
.hd-panel[hidden], .hd-dim[hidden] { display: none !important; }
@media (max-width: 960px) {
  .hd .wrap { display: flex; flex-wrap: nowrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .logo { margin-right: auto; }
  .logo img { height: 28px; }
  .hd .nav, .hd-user { display: none !important; }
  .hd-user { flex-wrap: nowrap; }
  .hd-menu { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; flex: 0 0 auto;
    border: 1px solid var(--line2); border-radius: 12px; background: #fff; cursor: pointer; padding: 0; }
  .hd-menu span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--navy-d); transition: transform .18s, opacity .18s; }
  .hd-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hd-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hd-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hd-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 32px rgba(20,38,74,.18); padding: 4px 20px 20px; max-height: calc(100vh - 70px); max-height: calc(100dvh - var(--hd-h, 64px) - 6px);
    overflow-y: auto; overscroll-behavior: contain; }
  .hd-panel nav a { display: block; padding: 15px 2px; font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  .hd-panel nav a.on { color: var(--navy-d); font-weight: 800; }
  .hp-user { display: flex; gap: 10px; margin-top: 18px; }
  .hp-user .btn { flex: 1 1 0; min-height: 48px; min-width: 0; }
  .hp-me span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hd-panel:focus { outline: none; }
  .hd.menu-open { z-index: 47; }
  .hd-dim { position: fixed; inset: 0; z-index: 46; background: rgba(10,20,40,.45); touch-action: none; }
  /* 메뉴가 열려 있는 동안 뒤 화면이 밀리지 않게: 문서(html)만 잠금.
     body 까지 잠그면 body 가 따로 스크롤 상자가 되어, 내려 본 자리에서 연 메뉴가 머리줄과 함께 화면 위로 사라짐 */
  html.menu-lock { overflow: hidden; }
}
@media (min-width: 961px) { .hd-panel, .hd-dim { display: none !important; } }

/* ── 문제 창: PC는 학습장 오른쪽 서랍(본문이 그만큼 좁아짐) · 휴대폰은 꽉 찬 화면 */
.wkpane { position: fixed; top: var(--hd-h, 0px); right: 0; bottom: 0; width: var(--pane-dw, 560px); z-index: 45; display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line2); box-shadow: -6px 0 24px rgba(20,38,74,.10); transition: transform .22s ease; }
.wkpane[hidden] { display: none !important; }
.wkpane.folded { transform: translateX(100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
body.pane-docked .wk-main, body.pane-docked > .ft { margin-right: var(--pane-w, 0px); }
.wkpane-split { position: absolute; left: -6px; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 3; touch-action: none; }
.wkpane-split::after { content: ''; position: absolute; left: 5px; top: 50%; width: 3px; height: 44px; margin-top: -22px; border-radius: 3px; background: var(--line2); transition: background .15s, height .15s, margin .15s; }
.wkpane-split:hover::after, .wkpane-split:focus-visible::after, .wkpane.moving .wkpane-split::after { background: var(--navy); height: 76px; margin-top: -38px; }
.wkpane-split:focus-visible { outline: none; }
.wkpane-bar { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; background: var(--navy-d); color: #fff; cursor: grab; user-select: none; flex: 0 0 auto; touch-action: none; }
.wkpane.lifting .wkpane-bar { cursor: grabbing; }
.wkpane-grip { width: 10px; height: 18px; flex: 0 0 auto; background-image: radial-gradient(circle, rgba(255,255,255,.6) 1.3px, transparent 1.7px); background-size: 5px 6px; }
.wkpane-ttl { font-size: 15px; margin-right: auto; white-space: nowrap; }
.wkpane-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.wkpane-acts button, .wkpane-back { border: 1px solid rgba(255,255,255,.32); background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 600;
  min-height: 34px; padding: 0 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.wkpane-acts button:hover, .wkpane-back:hover { background: rgba(255,255,255,.12); }
.wkpane-bar button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wkpane-x { width: 36px; padding: 0 !important; font-size: 16px !important; }
.wkpane-back { display: none; }
.wkpane-body { position: relative; flex: 1 1 auto; min-height: 0; }
.wkpane-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
.wkpane.moving .wkpane-frame, body.pane-sizing iframe { pointer-events: none; }
body.pane-sizing { cursor: col-resize; user-select: none; }
.wkpane.lifting { transition: none; box-shadow: 0 30px 70px rgba(20,38,74,.35); opacity: .94; }
.wkpane-ghost { position: fixed; z-index: 101; transform: translateX(-50%); background: var(--navy-d); color: #fff; font-size: 13.5px; font-weight: 700; padding: 8px 14px;
  border-radius: 10px; pointer-events: none; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.wkpane-ghost.out { background: var(--gold); color: var(--navy-d); }
.wkpane-ghost[hidden] { display: none; }
/* 접었을 때·따로 창일 때 오른쪽 가장자리 손잡이(계산기 단추 바로 위) */
.wkpane-handle { position: fixed; right: 0; top: calc(50% - 48px); transform: translateY(-100%); z-index: 44; writing-mode: vertical-rl; display: flex; align-items: center; gap: 6px;
  background: var(--gold); color: var(--navy-d); border: 0; border-radius: 12px 0 0 12px; padding: 14px 8px; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 2px;
  cursor: pointer; box-shadow: -2px 4px 14px rgba(20,38,74,.22); }
.wkpane-handle i { font-style: normal; writing-mode: horizontal-tb; letter-spacing: 0; }
@media (min-width: 1180px) { body.calc-docked .wkpane-handle { right: var(--calc-w, 284px); } }   /* 붙어 있는 계산기를 가리지 않게 */
.wkpane-handle:hover { background: #ffd65c; }
.wkpane-handle:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.wkpane-handle[hidden], .wkpane-dock[hidden] { display: none !important; }
.wkpane-dock { display: none; }
@media (max-width: 760px) {
  .wkpane { top: 0; left: 0; width: auto; border: 0; box-shadow: none; transition: transform .26s ease, visibility 0s; }
  .wkpane.folded { transform: translateX(100%); transition: transform .26s ease, visibility 0s linear .26s; }
  .wkpane-split, .wkpane-fold, .wkpane-grip { display: none !important; }
  .wkpane-bar { cursor: default; padding: 8px; gap: 6px; touch-action: pan-y; }
  .wkpane-back { display: inline-flex; align-items: center; }
  .wkpane-acts button, .wkpane-back { min-height: 40px; }
  .wkpane-x { width: 40px; }
  .wkpane-ttl { margin: 0 auto; }
  html.wkpane-lock, html.wkpane-lock body { overflow: hidden; }
  .wkpane-handle { top: auto; bottom: 140px; transform: none; }
  .wkpane-dock { position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%); z-index: 45; display: flex; border: 0; border-radius: 999px; background: var(--navy-d); color: #fff;
    padding: 0; overflow: hidden; font: inherit; font-size: 15px; font-weight: 700; box-shadow: 0 10px 28px rgba(20,38,74,.3); cursor: pointer; }
  .wkpane-dock b, .wkpane-dock i { padding: 12px 18px; font-style: normal; }
  .wkpane-dock b { background: rgba(255,255,255,.16); font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { .wkpane, .wkpane.folded, .compass, .compass.open { transition: none; } }
/* 문제 창 안의 화면(서랍 안·따로 창): 머리줄·꼬리말 없음 */
body.embedded, body.popup { background: var(--bg); }
.popbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: var(--navy-d); color: #fff; }
.popbar .area { margin: 0; }
.popbar .sub { font-size: 13.5px; color: rgba(255,255,255,.75); margin-right: auto; }
.popbar .sub b { color: #fff; }
.popbar button { border: 1px solid rgba(255,255,255,.32); background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 600; min-height: 34px; padding: 0 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.popbar button:hover { background: rgba(255,255,255,.12); }
.popbar button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.popbar .tip { flex: 1 0 100%; font-size: 13px; color: var(--navy-d); background: var(--gold-soft); border-radius: 8px; padding: 6px 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.popbar .tip button { color: var(--navy-d); border-color: #d9be6a; min-height: 28px; font-size: 13px; padding: 0 10px; }

/* 전자책: 학습장 위에 펼치는 층(덮으면 보던 자리 그대로) */
.wkbook { position: fixed; inset: 0; z-index: 50; background: #e6eaf1; }
.wkbook iframe { width: 100%; height: 100%; border: 0; display: block; }
html.wkbook-lock, html.wkbook-lock body { overflow: hidden; }

/* 전체 화면으로 공부하기: 학습장 화면을 담은 층(이 층이 전체 화면이 됨) */
.wkfocus { position: fixed; inset: 0; z-index: 2147483000; background: var(--bg); }
.wkfocus:fullscreen { width: 100%; height: 100%; background: var(--bg); }
.wkfocus::backdrop { background: var(--bg); }
.wkfocus-frame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.wkfocus-load { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: grid; place-items: center; color: var(--muted); font-size: 15px; }
.wkfocus-bar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 32px); background: var(--navy-d); color: #fff; border-radius: 999px; padding: 10px 18px; font-size: 14.5px; box-shadow: 0 10px 30px rgba(20,38,74,.3); }
.wkfocus-bar[hidden] { display: none; }
.wkfocus-bar button { display: none; font: inherit; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 6px 14px; cursor: pointer; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; }
.wkfocus-bar.lost button { display: inline-block; }
.wkfocus-bar [data-again] { background: var(--gold); border-color: var(--gold); color: var(--navy-d); }
html.wkfocus-lock, html.wkfocus-lock body { overflow: hidden; }
/* 전체 화면으로 공부하기 단추(절 화면·과목 지도) */
.btn.btn-focus { white-space: nowrap; }
.btn.btn-focus[hidden] { display: none; }
.btn.btn-focus.on { background: var(--navy-d); border-color: var(--navy-d); color: #fff; }

/* 학습 화면은 인쇄하지 않음(인쇄는 전자책에서) */
@media print {
  html.noprint body > * { display: none !important; }
  html.noprint body::before { content: '이 화면은 인쇄할 수 없어요. 인쇄는 전자책의 [인쇄] 단추로 할 수 있어요.'; display: block; padding: 48px 24px; font-size: 18px; color: #1a2233; }
}


/* ───────── 드론에듀 테마(머리줄·꼬리말·단추) ───────── */
.serif, .sec h2, .page-hd h1 { font-weight: 800; letter-spacing: -0.02em; }
.hd { background: var(--hd-bg); border-bottom: 0; color: #fff; }
.hd .wrap { max-width: 1280px; }
.logo { color: #fff; gap: 10px; }
.logo-mark { display: block; flex: none; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.1; }
.logo-txt b { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.logo-txt b i, .ft-logo i { font-style: normal; color: var(--sky); }
.logo-txt small { font-size: 12.5px; color: #cfd9e6; margin-top: 3px; white-space: nowrap; letter-spacing: -.01em; }
.nav { gap: 4px clamp(18px, 3vw - 14px, 30px); }
.nav a { color: #e6ecf4; }
.nav a:hover { color: #fff; }
.nav a.on { color: #fff; border-bottom-color: var(--sky); }
.hd-user, .hd-nick { color: #fff; }
.hd-login { color: #fff; text-decoration: none; font-size: 15px; padding-right: 4px; }
.hd-login:hover { color: #fff; text-decoration: underline; }
.hd .btn.hd-pill { background: #1e7bf2; border-color: #1e7bf2; color: #fff; font-weight: 700; border-radius: 999px; padding: 0 18px; box-shadow: 0 6px 16px rgba(30,123,242,.40); }
.hd .btn.hd-pill:hover { background: var(--sky-d); border-color: var(--sky-d); color: #fff; }
.hd .btn.hd-ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; border-radius: 999px; }
.hd .btn.hd-ghost:hover { border-color: #fff; color: #fff; }
.hd-menu span { background: #fff; }
.hd .hd-menu { background: transparent; border: 1px solid rgba(255,255,255,.35); }
.btn-p { border-radius: 999px; }
.btn-g { background: #1e7bf2; border-color: #1e7bf2; color: #fff; border-radius: 999px; }
.btn-g:hover { background: var(--sky-d); border-color: var(--sky-d); color: #fff; }
.area-learn { background: #1767d6; }
.area-mock { background: #6b3fb8; }
/* 꼬리말 */
.ft { background: var(--navy-d); color: #b8c4d2; font-size: var(--fs-sm); line-height: 1.8; }
.ft .wrap { gap: var(--sp-2); padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.ft-band { border-bottom: 1px solid #22385a; }
.ft-band .wrap { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding-top: var(--sp-4); padding-bottom: var(--sp-4); color: #e6ecf4; font-size: 15px; text-align: center; }
.ft-logo { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: #fff; margin-bottom: var(--sp-1); }
.ft-logo .logo-mark { width: 40px; height: 29px; }
.ft-logo small { font-size: var(--fs-sm); font-weight: 500; color: #b8c4d2; }
.ft-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 2px; }
.ft-links a { color: #dce4ee; text-decoration: none; }
.ft-links a:hover { color: #fff; text-decoration: underline; }
.ft-copy { margin: 10px 0 0; padding: 14px 16px; border-radius: 12px; background: #12264a; color: #c9d4e2; font-size: 13px; line-height: 1.8; }
.ft-c { color: #9fb0c3; font-size: var(--fs-xs); }
/* 종별 색 표지 */
.qtag { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 999px; }
.qtag.q4 { background: var(--q4); } .qtag.q3 { background: var(--q3); } .qtag.q2 { background: var(--q2); } .qtag.q1 { background: var(--q1); } .qtag.qi { background: var(--qi); }
@media (max-width: 960px) {
  .logo-txt small { display: none; }
  .logo-txt b { font-size: 21px; }
}
/* 태블릿 가로·작은 노트북(961~1279px): 머리줄을 한 줄로 — 한 줄 소개는 숨기고 메뉴 간격·글자를 조금 줄임 */
@media (min-width: 961px) and (max-width: 1279px) {
  .hd .wrap { flex-wrap: nowrap; gap: 12px 20px; }
  .logo-txt small { display: none; }
  .logo-txt b { font-size: 22px; }
  .nav { flex-wrap: nowrap; gap: 4px clamp(14px, 2.2vw - 8px, 26px); font-size: 15px; white-space: nowrap; }
  .hd-user { flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
  .hd .btn.hd-pill, .hd .btn.hd-ghost { padding: 0 14px; }
}
@media (min-width: 961px) and (max-width: 1120px) { .hd-nick { display: none; } }   /* 자리가 모자라면 이름은 숨김(내 계정은 '내 학습'에서) */
/* 화면 머리 띠(시험안내·문제은행·고객센터 등): 히어로 사진의 노을 산을 깔고 어둡게 덮음 */
.pband { position: relative; color: #fff; background: #0c1b33 url('/assets/img/banner.jpg') center 40% / cover no-repeat; }
.pband::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,20,40,.90) 0%, rgba(8,20,40,.70) 45%, rgba(8,20,40,.30) 100%); }
.pband .wrap { position: relative; padding-top: clamp(24px, 2vw + 14px, 40px); padding-bottom: clamp(28px, 2vw + 16px, 44px); text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.pband .crumb-w { font-size: 14px; color: #cfd9e6; }
.pband h1 { margin-top: var(--sp-2); font-size: clamp(28px, 1.9vw + 18px, 40px); font-weight: 900; letter-spacing: -.02em; color: #fff; }
.pband p { margin: var(--sp-2) 0 0; font-size: var(--fs-base); color: #e6ecf4; max-width: 60em; }
.pband-tabs { position: relative; display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-5); }
.pband-tabs button, .pband-tabs a { border: 0; font: inherit; font-size: var(--fs-base); min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 20px; border-radius: 12px 12px 0 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; text-decoration: none; text-shadow: none; white-space: nowrap; }
.pband-tabs button:hover, .pband-tabs a:hover { background: rgba(255,255,255,.22); color: #fff; }
.pband-tabs .on { background: var(--bg); color: var(--c, var(--navy-d)); font-weight: 800; }
.pband + .wrap, .pband ~ main.wrap { padding-top: var(--sp-6); }
.box { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--card-p); }

/* 결제 방식 안내(계좌이체 임시 · PG 준비 중) */
.paynote { display: flex; gap: 12px; align-items: flex-start; background: #fff8ea; border: 1px solid #f0d49b; border-radius: 12px; padding: 14px 16px; color: #4a3a12; line-height: 1.65; font-size: 15px; }
.paynote[hidden] { display: none; }
.paynote .pn-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #ffb547; color: #0b1a2e; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.paynote p { margin: 2px 0 0; } .paynote .pn-t { color: #7a4b00; font-size: 15.5px; } .paynote .pn-s { font-size: 13.5px; color: #6b5a2e; margin-top: 6px; }
.paynote.compact { padding: 8px 12px; font-size: 13.5px; align-items: center; gap: 8px; border-radius: 10px; }
.paynote.compact .pn-ic { width: 20px; height: 20px; font-size: 12px; }

/* ═════════ 휴대폰(640px 이하) 공통 — 모든 화면에 같게(머리줄·단추·입력·카드·화면 머리)
   화면별 휴대폰 조정은 mobile.css(각 화면 머리 맨 끝에서 불러와 화면 안 스타일보다 나중에 적용) */
@media (max-width: 640px) {
  /* 머리줄: 낮게 · 작은 로고 + 가는 칸막이 + '드론 자격증' · ☰ 는 테두리 없이 */
  .hd { transition: transform .22s ease; }
  .hd .wrap { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .logo { gap: 8px; min-width: 0; }
  .logo-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #dce4ee; letter-spacing: -.01em; white-space: nowrap; }
  .logo-tag::before { content: ''; width: 1px; height: 14px; background: rgba(255,255,255,.35); }
  .logo-mark { width: 36px; height: 27px; }
  .logo-txt b { font-size: 19px; }
  .hd-menu, .hd .hd-menu { width: var(--tap); height: var(--tap); border-color: transparent; border-radius: 10px; }
  .hd-panel { padding: 0 var(--gutter) var(--gutter); }
  .hd-panel nav a { padding: 14px 2px; font-size: 16px; }
  .hp-user .btn { min-height: var(--tap); }
  html.hd-hidden .hd { transform: translateY(-100%); }   /* 읽어 내려가면 숨기고, 조금이라도 올리면 다시 보임(app.js) */
  /* 카카오톡 등 앱 안의 브라우저·삼성 다크 모드: 맨 위 안내 띠 */
  .inapp { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; background: var(--navy-d); color: #fff; font-size: 13.5px; line-height: 1.45; }
  .inapp .tx { flex: 1 1 auto; min-width: 0; }
  .inapp .tx b { color: var(--gold); font-weight: 700; }
  .inapp .go { flex: 0 0 auto; border: 0; border-radius: 999px; background: var(--gold); color: var(--navy-d); font: inherit; font-size: 13px; font-weight: 800; padding: 0 12px; min-height: 36px; cursor: pointer; white-space: nowrap; }
  .inapp .x { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.8); font: inherit; font-size: 15px; cursor: pointer; }
  /* 단추·입력: 손가락으로 누르기 쉬운 높이(44px 이상) */
  .btn { min-height: var(--tap); padding: 0 16px; font-size: 15px; border-radius: 12px; }
  .btn-s { min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: var(--r-sm); }
  form .btn-p { min-height: 48px; }
  .field input, .field select { min-height: 48px; }
  .chip { font-size: 13px; padding: 4px 10px; }
  /* 카드·칸 */
  .card { border-radius: 16px; }
  .grid { gap: var(--sp-3); }
  .box { border-radius: 16px; }
  .sec .lead { margin-bottom: var(--sp-5); }
  /* 화면 머리: 배지 48px */
  .page-hd { gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .page-hd > .face { width: 48px; height: 48px; border-width: 2px; }
  .page-hd-tx { gap: 4px; }
  .page-hd p.sub { font-size: 13px; }
  .teach > .face { width: 36px; height: 36px; border-width: 1.5px; }
  .ask .teach > .face { width: 44px; height: 44px; }
  .ask .dlg { gap: 14px; }
  .ask .asktxt { font-size: 15px; }
  .dlg { padding: 20px 18px; }
  /* 띠 머리(시험안내·문제은행·고객센터): 탭은 한 줄로 밀어 보기 */
  .pband-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .pband-tabs::-webkit-scrollbar { display: none; }
  .pband-tabs button, .pband-tabs a { flex: 0 0 auto; padding: 0 16px; font-size: 15px; }
  .pband p { font-size: 15px; }
  /* 꼬리말 */
  .ft .wrap { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
  .ft-band .wrap { padding-top: var(--sp-3); padding-bottom: var(--sp-3); font-size: 14px; }
  .ft-band .wrap > [aria-hidden] { display: none; }
  .ft-band .wrap > span { flex-basis: 100%; }
  .ft-links { gap: 2px 16px; }
  .ft-links a { display: inline-block; padding: 6px 0; }
  .ft-copy { font-size: 13px; line-height: 1.75; }
}