/* 연습실 공용 모양(L7). 변수 이름과 값은 웹앱 app.css 와 같다(--ink --sub --line --soft --hi --ok --bad --acc).
   글꼴은 같은 출처의 Pretendard(OFL) 부분 글꼴뿐. 외부 주소·로고·실제 아이콘 없음. */
@font-face{font-family:"PretendardSub";font-weight:400;font-display:swap;src:url("fonts/pretendard-400.woff2") format("woff2")}
@font-face{font-family:"PretendardSub";font-weight:700;font-display:swap;src:url("fonts/pretendard-700.woff2") format("woff2")}
:root{--ink:#161616;--sub:#4a4a4a;--line:#2b2b2b;--soft:#f3f3f1;--hi:#fff6c9;--ok:#e6f3e6;--bad:#fbe9e7;--acc:#0b4f8a;
  --ok-ink:#1b5e2a;--bad-ink:#8a1f11;--pr-side:340px;--pr-panel-h:calc(100vh - 175px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.6 "PretendardSub","Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--acc);text-underline-offset:3px}
code,pre,textarea{font-family:"SF Mono",Menlo,Consolas,"Noto Sans Mono CJK KR",monospace}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
[hidden]{display:none!important}

/* 단추(편집기·대화 상자 안은 editor.css 가 더 자세히 정한다) */
.pr-btn{font:inherit;font-size:15px;font-weight:700;min-height:40px;padding:6px 14px;border:2px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;line-height:1.3}
.pr-btn:hover{background:var(--hi)}
.pr-btn:disabled{opacity:.55;cursor:default;background:#fff}
.pr-btn-primary{background:var(--acc);border-color:var(--acc);color:#fff}
.pr-btn-primary:hover{background:#093f6f}
.pr-btn-small{min-height:40px;padding:4px 10px;font-size:14px}
.pr-linkbtn{font:inherit;background:none;border:0;padding:8px 2px;min-height:40px;color:var(--acc);text-decoration:underline;cursor:pointer}

/* 위쪽: 건너뛰기 링크, 연습 화면 띠, 머리 줄 */
.pr-skip{position:absolute;left:8px;top:-60px;z-index:2000;padding:8px 14px;background:#fff;border:2px solid var(--acc);border-radius:8px;font-weight:700}
.pr-skip:focus{top:8px}
.pr-banner{padding:6px 14px;background:var(--hi);border-bottom:2px solid var(--line);font-size:15px;font-weight:700;line-height:1.45}
.pr-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 14px;border-bottom:1px solid #999;background:#fff}
.pr-back{font-weight:700;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center}
.pr-title{margin:0;font-size:1.15rem;line-height:1.35;flex:1 1 220px;min-width:0}
.pr-chap{display:inline-block;margin-right:4px;padding:0 .45em;border:2px solid var(--line);border-radius:6px;font-size:.95rem}
.pr-book{color:var(--sub);font-weight:700;white-space:nowrap}
.pr-progress{min-width:3.2em;padding:2px 10px;border-radius:999px;background:var(--soft);border:1px solid #999;font-weight:700;text-align:center;white-space:nowrap}

/* 연습 배치: 왼쪽 할 일, 가운데 창 */
.pr-layout{display:grid;grid-template-columns:var(--pr-side) minmax(0,1fr);align-items:start;min-height:60vh}
.pr-task{position:sticky;top:0;max-height:100vh;overflow:auto;padding:12px;border-right:2px solid var(--line);background:#fff}
.pr-task:focus{outline:none}
.pr-drawer{display:none}
.pr-noscript{color:var(--sub)}
.pr-work{min-width:0;padding:10px 12px 14px}

/* 할 일 카드 */
.pr-tcard{border:2px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.pr-tmeta{display:flex;flex-wrap:wrap;gap:2px 10px;margin:0;padding:8px 12px;background:var(--hi);border-bottom:2px solid var(--line);font-size:14px;font-weight:700}
.pr-tref{color:var(--sub)}
.pr-topt{padding:0 .5em;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:400}
.pr-tdo{margin:0;padding:10px 12px 4px;font-size:1.08rem;line-height:1.5}
.pr-tdo:focus{outline:none}
.pr-tdo:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pr-tok{margin:0;padding:4px 12px 8px;color:var(--sub);font-size:15px}
.pr-tok strong{color:var(--ink)}
.pr-tcopy{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 8px}
.pr-btn-copy{border-color:var(--acc);color:var(--acc)}
.pr-tprompt{flex:1 1 100%;font-size:14px}
.pr-tprompt summary{cursor:pointer;min-height:40px;display:flex;align-items:center;color:var(--acc);font-weight:700}
.pr-tprompt pre{margin:4px 0 0;padding:8px;background:var(--soft);border:1px solid #bbb;border-radius:6px;white-space:pre-wrap;max-height:14em;overflow:auto;font-size:13.5px}
.pr-tstate{margin:0 12px;border-radius:8px}
.pr-tstate:empty{display:none}
.pr-tstate p,.pr-tstate ul{margin:0}
.pr-tstate ul{padding-left:1.2em}
.pr-tstate.is-ok{padding:8px 12px;background:var(--ok);border:2px solid var(--ok-ink);color:var(--ok-ink)}
.pr-tstate.is-ok p+p{color:var(--ink);font-size:15px}
.pr-tok-big{font-size:1.25rem;font-weight:700}
.pr-tstate.is-fail{padding:8px 12px;background:var(--bad);border:2px solid var(--bad-ink)}
.pr-tfail-h{font-weight:700;color:var(--bad-ink)}
.pr-tstate.is-info{padding:8px 12px;background:var(--soft);border:1px solid #999}
.pr-thint{margin:8px 12px 0;padding:8px 12px;border-left:4px solid var(--acc);background:#eef3f8;font-size:15px}
.pr-thint p{margin:0}
.pr-thint p+p{margin-top:4px}
.pr-tbtns{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px 12px}
.pr-tcard.is-done{border-color:var(--ok-ink)}
.pr-tcard.is-done .pr-tmeta{background:var(--ok);border-bottom-color:var(--ok-ink)}
.pr-tcard.is-past .pr-tmeta::after{content:"지난 단계 보기";margin-left:auto;color:var(--sub);font-weight:400}
.pr-tcard.is-fresh{animation:pr-pop .9s ease-out}
@keyframes pr-pop{0%{box-shadow:0 0 0 6px var(--hi)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
.pr-end h3{margin:10px 12px 2px;font-size:1rem}
.pr-end ul{margin:0;padding:0 12px 0 32px}
.pr-end-note{margin:4px 12px;font-weight:700}
.pr-unsupported{margin:0 0 10px;padding:8px 12px;border:2px solid var(--bad-ink);border-radius:8px;background:var(--bad);font-weight:700}
.pr-canned h3{font-size:1rem;margin:1em 0 .3em}
.pr-canned p,.pr-canned ul,.pr-canned ol{margin:.4em 0}
.pr-canned .pr-canned-note{padding:8px 10px;background:var(--hi);border:1px solid var(--line);border-radius:6px;font-weight:700}

/* 단계 목록 */
.pr-steps-h{margin:16px 0 6px;font-size:15px;color:var(--sub)}
.pr-steps{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pr-chip{min-width:44px;min-height:40px;padding:2px 8px;border:2px solid #8a8a85;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.pr-chip:hover{background:var(--hi)}
.pr-chip.is-done{background:var(--ok);border-color:var(--ok-ink);color:var(--ok-ink)}
.pr-chip.is-skip{background:var(--soft);color:var(--sub)}
.pr-chip.is-cur{border-color:var(--acc);background:var(--acc);color:#fff}
.pr-chip.is-seen{outline:2px dashed var(--acc);outline-offset:2px}
.pr-task-foot{margin:8px 0 0;font-size:13.5px;color:var(--sub)}

/* 창 탭과 창 */
.pr-wintabs{display:flex;gap:4px;overflow-x:auto;padding:0 2px;border-bottom:2px solid var(--line);scrollbar-width:thin}
.pr-wintab{flex:none;min-height:40px;padding:6px 14px;border:2px solid #8a8a85;border-bottom:0;border-radius:8px 8px 0 0;background:var(--soft);color:var(--ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}
.pr-wintab:hover{background:var(--hi)}
.pr-wintab[aria-selected="true"]{background:#fff;border-color:var(--line);position:relative;top:2px;box-shadow:inset 0 3px 0 var(--acc)}
.pr-wintab.has-alert{background:var(--hi)}
.pr-alert-badge{color:var(--bad-ink)}
.pr-panel{border:2px solid var(--line);border-top:0;background:#fff;min-width:0}
.pr-host{min-width:0}
/* 시트·편집기 모듈은 이 칸 자신에 .pr-sheet{height:100%}를 붙이므로 두 클래스로 높이를 고정한다(1000행이 쪽을 늘리지 않게) */
.pr-host.pr-host-sheet,.pr-host.pr-host-editor{height:max(460px,var(--pr-panel-h))}
.pr-host-preview{min-height:520px}
.pr-privacy{margin:0;padding:4px 10px;font-size:13.5px;color:var(--sub);background:var(--soft);border-bottom:1px solid #ccc}
.pr-addr{max-width:720px;padding:28px 18px 40px}
.pr-addr-label{display:block;font-weight:700;margin-bottom:6px}
.pr-addr-row{display:flex;gap:8px}
.pr-addr-input{flex:1;min-width:0;min-height:44px;padding:6px 14px;border:2px solid var(--line);border-radius:999px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.pr-addr-msg{min-height:1.6em;margin:6px 0 0;color:var(--bad-ink);font-weight:700}
.pr-addr-note{margin:4px 0 0;color:var(--sub);font-size:15px}

/* 알림 띠(dom.toast) */
.pr-toasts{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1500;display:flex;flex-direction:column;gap:6px;width:min(420px,calc(100vw - 24px));pointer-events:none}
.pr-toast{padding:10px 14px;border-radius:8px;background:var(--ink);color:#fff;font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.pr-toast-warn{background:var(--bad);color:var(--bad-ink);border:2px solid var(--bad-ink)}

/* 바닥 */
footer[data-pr="footer"]{margin-top:18px;padding:12px 14px 28px;border-top:1px solid #999;font-size:14px;color:var(--sub)}
footer[data-pr="footer"] p{margin:.3em 0}

/* 첫 화면·알림 쪽 */
.pr-home,main[data-pr="legal"]{max-width:820px;margin:0 auto;padding:12px 14px 20px}
.pr-home-title{font-size:1.65rem;margin:.4em 0 .2em}
.pr-lead{font-size:1.08rem;font-weight:700;margin:.3em 0}
.pr-tip{padding:8px 12px;background:var(--soft);border-radius:6px}
.pr-books{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.pr-bookbtn{font:inherit;font-weight:700;min-height:44px;padding:6px 16px;border:2px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
.pr-bookbtn[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
.pr-booksec h2{font-size:1.2rem;margin:1em 0 .4em;padding-top:.5em;border-top:3px solid var(--line)}
.pr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pr-lcard{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:#fff}
.pr-lcard-main{flex:1 1 260px;min-width:0}
.pr-lcard-chap{display:inline-block;margin-right:6px;padding:0 .45em;border:2px solid var(--line);border-radius:6px;font-weight:700}
.pr-lcard-title{font-weight:700;font-size:1.05rem}
.pr-lcard-meta{display:block;color:var(--sub);font-size:15px}
.pr-lcard-state{min-width:5.5em;font-weight:700;color:var(--sub)}
.pr-lcard.is-doing .pr-lcard-state{color:var(--acc)}
.pr-lcard.is-done{border-color:var(--ok-ink);background:var(--ok)}
.pr-lcard.is-done .pr-lcard-state{color:var(--ok-ink)}
.pr-store-note{margin-top:18px;color:var(--sub)}

/* 좁은 화면(폭 360px까지): 할 일은 위쪽 서랍, 창은 전체 폭 */
@media (max-width:760px){
  :root{--pr-panel-h:calc(100vh - 120px)}
  .pr-banner{font-size:14px;padding:5px 10px}
  .pr-top{padding:6px 10px;gap:4px 10px}
  .pr-title{font-size:1.02rem;flex-basis:100%;order:-1}
  .pr-layout{display:block}
  .pr-task{position:sticky;top:0;z-index:30;max-height:none;overflow:visible;padding:0;border-right:0;border-bottom:2px solid var(--line);background:#fff}
  .pr-drawer{display:flex;width:100%;min-height:44px;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border:0;background:var(--hi);color:var(--ink);font:inherit;font-weight:700;text-align:left;cursor:pointer}
  .pr-drawer-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pr-task[data-open="true"] .pr-drawer-mark{transform:rotate(180deg)}
  .pr-task-body{max-height:62vh;overflow:auto;padding:10px}
  .pr-task[data-open="false"] .pr-task-body{display:none}
  .pr-work{padding:8px 6px 12px}
  .pr-wintab{padding:6px 10px;font-size:14px}
  .pr-host.pr-host-sheet,.pr-host.pr-host-editor{height:max(420px,var(--pr-panel-h))}
  .pr-addr{padding:18px 10px 28px}
  .pr-lcard-state{min-width:0}
  footer a{display:inline-block;min-height:40px;line-height:40px}
  #pr-p-sheet .pr-sh-tabbtn{min-width:40px}
}
@media (prefers-reduced-motion:reduce){
  .pr-tcard.is-fresh{animation:none}
  *{scroll-behavior:auto!important}
}
@media print{
  body>*{display:none!important}
  body::before{content:"연습실은 화면용입니다. 책을 보세요.";display:block;padding:20px;font-size:18px}
}