/* SIDE WORKS 전자책 리더 — 애플 톤(흰/옅은 회색, 반투명 막대, 파란 단추 하나). 지면 자체는 style.css 의 .page 를 그대로 쓴다. */
.rd{--rd-bg:#f5f5f7;--rd-bar:rgba(251,251,253,.78);--rd-ink:#1d1d1f;--rd-mute:#6e6e73;--rd-line:rgba(0,0,0,.1);--rd-blue:#0071e3;--rd-btn:rgba(0,0,0,.06);
  --rd-top:56px;--rd-bot:0px;
  position:fixed;inset:0;z-index:200;background:var(--rd-bg);color:var(--rd-ink);display:flex;flex-direction:column;
  font-family:-apple-system,"SF Pro Text","Apple SD Gothic Neo",Pretendard,"Noto Sans KR",system-ui,sans-serif}


html.rd-lock,html.rd-lock body{overflow:hidden}
.rd [hidden]{display:none!important}

/* 위 막대 */
.rd-top{position:relative;z-index:3;background:var(--rd-bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--rd-line);padding-top:env(safe-area-inset-top,0px)}
.rd-in{display:flex;align-items:center;gap:12px;height:var(--rd-top);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.rd-title{flex:1;min-width:0;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-count,.rd-count2{font-size:13px;color:var(--rd-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.rd-btn{font:inherit;font-size:14px;font-weight:500;color:var(--rd-ink);background:var(--rd-btn);border:0;border-radius:980px;padding:7px 14px;cursor:pointer;min-height:34px;white-space:nowrap}
.rd-btn.blue{background:var(--rd-blue);color:#fff}
.rd-btn:disabled{opacity:.35;cursor:default}
.rd-btn:focus-visible,.rd-arrow:focus-visible,.rd-toc button:focus-visible{outline:2px solid var(--rd-blue);outline-offset:2px}
.rd-prog{height:2px;background:transparent}
.rd-prog i{display:block;height:100%;width:0;background:var(--rd-blue);transition:width .25s ease}

/* 지면 무대 */
.rd-stage{flex:1;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden;
  padding:20px max(76px,env(safe-area-inset-right,0px)) 24px max(76px,env(safe-area-inset-left,0px))}
.rd-stage > section.page{grid-area:1/1;margin:0;box-shadow:0 10px 40px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.06);border-radius:10px;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.rd-stage > section.page:focus{outline:none}
/* 넓은 화면: 16:9 지면을 무대에 꼭 맞춘다(가로세로 비율 유지). 넘치는 내용은 지면 안에서 스크롤 */
@media (min-width:760px){
  .rd-stage > section.page{aspect-ratio:16/9;min-height:0;height:auto;
    width:min(calc(100vw - 152px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)), calc((100svh - var(--rd-top) - 50px - env(safe-area-inset-top,0px)) * 16 / 9))}
}
/* 휴대폰: 화면 너비로 세로로 흘려 읽는다 */
@media (max-width:759px){
  .rd{--rd-bot:56px}
  .rd-stage{place-items:stretch;padding:0}
  .rd-stage > section.page{width:100%;height:100%;border-radius:0;box-shadow:none;border:0;padding-bottom:calc(var(--rd-bot) + 20px + env(safe-area-inset-bottom,0px))}
  .rd-count{display:none}
}

/* 좌우 화살표(넓은 화면) */
.rd-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--rd-bar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--rd-ink);font-size:28px;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.08)}
.rd-arrow.prev{left:max(16px,env(safe-area-inset-left,0px))}
.rd-arrow.next{right:max(16px,env(safe-area-inset-right,0px))}
.rd-arrow:disabled{opacity:.25;cursor:default}
@media (max-width:759px){.rd-arrow{display:none}}

/* 아래 막대(휴대폰) */
.rd-bottom{display:none}
@media (max-width:759px){
  .rd-bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
    height:calc(var(--rd-bot) + env(safe-area-inset-bottom,0px));padding:0 max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left,0px));
    background:var(--rd-bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--rd-line)}
}

/* 차례 서랍 */
.rd-toc{position:absolute;z-index:4;top:calc(var(--rd-top) + 3px + env(safe-area-inset-top,0px));left:0;bottom:0;width:min(340px,86vw);
  background:var(--rd-bar);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border-right:1px solid var(--rd-line);
  display:flex;flex-direction:column;box-shadow:8px 0 30px rgba(0,0,0,.08)}
.rd-toc-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 10px max(16px,env(safe-area-inset-left,0px));font-size:15px}
.rd-toc ol{list-style:none;margin:0;padding:0 8px calc(16px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));overflow-y:auto;flex:1}
.rd-toc button{display:flex;gap:12px;align-items:baseline;width:100%;text-align:left;font:inherit;font-size:14px;color:var(--rd-ink);background:none;border:0;border-radius:8px;padding:8px 10px;cursor:pointer}
.rd-toc button span{min-width:2.2em;color:var(--rd-mute);font-variant-numeric:tabular-nums;font-size:12.5px}
.rd-toc button:hover{background:var(--rd-btn)}
.rd-toc button[aria-current]{background:var(--rd-blue);color:#fff}
.rd-toc button[aria-current] span{color:rgba(255,255,255,.8)}

/* 넘김 효과: 짧고 차분하게 */
@media (prefers-reduced-motion:no-preference){
  .rd-stage > section.page.rd-from-r{animation:rd-in-r .24s ease-out}
  .rd-stage > section.page.rd-from-l{animation:rd-in-l .24s ease-out}
}
@keyframes rd-in-r{from{opacity:.2;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes rd-in-l{from{opacity:.2;transform:translateX(-28px)}to{opacity:1;transform:none}}

/* 리더를 여는 단추(목록·상세 화면) */
.rd-open{display:inline-flex;align-items:center;gap:8px}
/* 긴 쪽: 본문이 제 높이를 갖고 지면 안에서 스크롤 — 꼬리말이 내용 위에 겹치지 않게 */
.rd-stage > section.page > .bd{flex:1 0 auto;min-height:auto}
.rd-stage > section.page > .ft{flex:none}

/* ---------- 다듬기(2026-10-26): 애플 톤 · 휴대폰 읽기 편하게 ---------- */
.rd-in{gap:10px}
.rd-title{text-align:center;font-size:15px}
.rd-count{background:var(--rd-btn);border-radius:980px;padding:5px 11px;font-size:12.5px;font-weight:500;color:var(--rd-ink)}
.rd-btn{font-size:13.5px;padding:7px 15px}
.rd-btn:hover:not(:disabled){background:rgba(0,0,0,.1)}
.rd-btn.blue:hover:not(:disabled){background:#0077ed}
.rd-prog{height:3px;background:rgba(0,0,0,.05)}
.rd-prog i{border-radius:0 3px 3px 0}
.rd-stage{background:linear-gradient(180deg,#f5f5f7,#ececf0)}
.rd-stage > section.page{border:0;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 20px 60px rgba(0,0,0,.12)}
.rd-arrow{width:48px;height:48px;font-size:26px;background:rgba(255,255,255,.86);box-shadow:0 2px 12px rgba(0,0,0,.10)}
.rd-arrow:hover:not(:disabled){background:#fff}
/* 차례 서랍: 떠 있는 둥근 판 */
.rd-toc{top:calc(var(--rd-top) + 12px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));bottom:12px;width:min(340px,calc(100vw - 24px));
  border:0;border-radius:18px;background:rgba(251,251,253,.92);box-shadow:0 12px 40px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.04)}
.rd-toc-h{padding:16px 18px 10px;font-weight:600}
.rd-toc ol{padding:0 10px 14px}
.rd-toc button{border-radius:10px;padding:9px 12px;font-size:14.5px}
.rd-toc button span{font-size:12px}
/* 휴대폰: 글자 키우고 여백 넉넉히 */
@media (max-width:759px){
  .rd{--rd-top:52px;--rd-bot:64px}
  .rd-title{text-align:left;font-size:15.5px}
  .rd-stage{background:#fff}
  .rd-stage > section.page{--t:30px;--s:16.5px;--x:13.5px;--h:17.5px;padding:26px 22px calc(var(--rd-bot) + 28px + env(safe-area-inset-bottom,0px));line-height:1.6}
  .rd-stage > section.page:not(.dark){background:#fff}
  .rd-stage > section.page .bd{padding-top:18px}
  .rd-stage > section.page .tbl{font-size:14px}
  .rd-stage > section.page .ft{margin-top:18px}
  .rd-bottom{gap:10px}
  .rd-bottom .rd-btn{min-height:42px;padding:0 20px;font-size:15px}
  .rd-count2{background:var(--rd-btn);border-radius:980px;padding:6px 12px;color:var(--rd-ink);font-weight:500}
  .rd-toc{left:8px;right:8px;width:auto;bottom:calc(var(--rd-bot) + 8px + env(safe-area-inset-bottom,0px))}
}
/* 휴대폰: 교재 쪽 안의 넓은 표(시장·가격·법규)는 그 자리에서만 가로로 밀리게 — 화면 전체가 넘치지 않게 */
@media (max-width:759px){
  .page{min-width:0;max-width:100%}
  .page .bd{min-width:0}
  .page .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .page .tbl a{word-break:break-all}
}
@media (max-width:759px){
  .page .side > *,.page .cols > *{min-width:0}
  .page p,.page li,.page dd,.page b{overflow-wrap:anywhere}
}
@media (max-width:759px){.page .ft{flex-wrap:wrap;row-gap:2px}.page .ft span{min-width:0;overflow-wrap:anywhere}}