/* DX Froala — 전자책 (글 보기·에디터 공통). 그림자 없음, 각진 버튼, 다크 기본. */
.dxeb{display:block;clear:both;position:relative;margin:22px 0;max-width:100%;box-sizing:border-box;container-type:inline-size}
.dxeb *{box-sizing:border-box}

/* 색 테마 (카드·읽기·전체화면 공통) */
.dxr-bg-dark{--bgc:#0b0f17;--pn:#111827;--st1:#1b2436;--st2:#0b0f17;--fg:#eef1f6;--mut:#8b95a8;--ln:#232d41;--ac:#f2c14e;--acfg:#17120a;--ink:#fff}
.dxr-bg-light{--bgc:#f4f6f9;--pn:#ffffff;--st1:#eef1f6;--st2:#e2e7ef;--fg:#1b2433;--mut:#64708a;--ln:#d6dce7;--ac:#1d4ed8;--acfg:#ffffff;--ink:#fff}
.dxr-bg-paper{--bgc:#f1e8d3;--pn:#f8f1df;--st1:#efe4c9;--st2:#e4d6b4;--fg:#3a2e1c;--mut:#7d6b4c;--ln:#d8c7a0;--ac:#9a3412;--acfg:#fff8ee;--ink:#fff}

/* JS 가 없을 때: 쪽 이미지를 세로로 */
.dxeb:not(.dxeb-on){background:#0b0f17;color:#eef1f6;padding:12px;border-radius:8px}
.dxeb:not(.dxeb-on) .dxeb-p{margin:0 auto 10px;max-width:760px}
.dxeb:not(.dxeb-on) .dxeb-p img{display:block;width:100%;height:auto}
.dxeb .dxeb-ti{margin:0 0 8px;font-weight:700}
.dxeb-tx,.dxeb .dxeb-nt{display:none !important}
.dxeb-on{background:none}

/* ── 카드 ── */
.dxeb-card{position:relative;overflow:hidden;background:var(--bgc);color:var(--fg);border:1px solid var(--ln);border-radius:8px;font:14px/1.55 -apple-system,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif}
.dxeb-card *{box-sizing:border-box}
.dxeb-hd{display:flex;align-items:flex-end;gap:16px;padding:18px 22px 16px}
.dxeb-hd .tt{flex:1;min-width:0}
.dxeb-eb{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--ac);text-transform:uppercase}
.dxeb-eb::before{content:"";width:18px;height:2px;background:var(--ac)}
.dxeb-tl{margin:6px 0 0;font-size:22px;line-height:1.3;font-weight:800;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;color:var(--fg)}
.dxeb-card .dxeb-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 !important;padding:0 !important;list-style:none !important}
.dxeb-card .dxeb-chips li{margin:0 !important;padding:4px 10px !important;list-style:none !important}
.dxeb-card .dxeb-chips li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--ln);border-radius:3px;color:var(--mut);font-size:12px;font-weight:600;white-space:nowrap}
.dxeb-card .dxeb-chips li i{color:var(--ac);font-size:11px}
.dxeb-ft{display:flex;gap:16px;padding:16px 22px 20px;border-top:1px solid var(--ln);background:var(--pn)}
.dxeb-ft .lb{flex:none;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--ac);padding-top:3px}
.dxeb-ft p{margin:0;color:var(--fg);opacity:.86;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere}

/* 각진 버튼 */
.dxeb-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 24px;border:1px solid var(--ac);border-radius:3px;background:var(--ac);color:var(--acfg);font:inherit;font-size:14px;font-weight:800;letter-spacing:.04em;cursor:pointer;transition:background .15s,color .15s,border-color .15s;text-decoration:none}
.dxeb-btn:hover{background:transparent;color:var(--ac)}
.dxeb-btn.sec{background:transparent;color:var(--fg);border-color:var(--ln)}
.dxeb-btn.sec:hover{border-color:var(--ac);color:var(--ac)}
.dxeb-btn i{font-size:13px}

/* ── 표지 서가 (히어로) ── */
.dxeb-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bgc)}
.dxeb-hero .bgi{position:absolute;inset:-40px;z-index:-2;background:center/cover no-repeat;filter:blur(36px) saturate(1.1);opacity:.5;transform:scale(1.1)}
.dxeb-hero .ov{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--bgc) 8%,rgba(11,15,23,.55) 55%,var(--bgc) 100%);opacity:.92}
.dxr-bg-light .dxeb-hero .ov,.dxr-bg-paper .dxeb-hero .ov{background:linear-gradient(100deg,var(--bgc) 10%,rgba(255,255,255,.55) 60%,var(--bgc) 100%)}
.dxeb-hin{display:flex;align-items:center;gap:clamp(20px,5cqw,52px);padding:clamp(22px,5cqw,44px)}
.dxeb-bk3{flex:none;position:relative;width:clamp(120px,26cqw,230px);aspect-ratio:var(--ear,.707);padding:0;border:0;background:none;cursor:pointer;perspective:900px;font:inherit}
.dxeb-bk3 .bk{position:absolute;inset:0;display:block;transform:rotateY(-17deg);transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.dxeb-bk3:hover .bk,.dxeb-bk3:focus-visible .bk{transform:rotateY(-6deg) translateY(-5px)}
.dxeb-bk3 .cv{position:absolute;inset:0;background:#fff center/cover no-repeat;border-radius:2px 5px 5px 2px;border:1px solid rgba(255,255,255,.12)}
.dxeb-bk3 .sp{position:absolute;left:0;top:0;bottom:0;width:9px;border-radius:2px 0 0 2px;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(255,255,255,.18) 45%,rgba(0,0,0,.3))}
.dxeb-bk3 .pg{position:absolute;right:-7px;top:3px;bottom:3px;width:7px;background:repeating-linear-gradient(180deg,#e9e5da 0 1px,#bdb8aa 1px 2px);border-radius:0 2px 2px 0}
.dxeb-mt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.dxeb-mt .dxeb-tl{font-size:clamp(22px,4.4cqw,36px);line-height:1.25;margin:0}
.dxeb-mt .ds{margin:0;max-width:56ch;color:var(--fg);opacity:.78;font-size:15px;line-height:1.7;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.dxeb-mt .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
@container (max-width:560px){
  .dxeb-hin{flex-direction:column;text-align:center;padding:26px 18px 28px}
  .dxeb-mt{align-items:center}
  .dxeb-mt .acts{justify-content:center}
  .dxeb-bk3{width:min(46%,190px)}
  .dxeb-hd{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 16px 12px}
  .dxeb-ft{flex-direction:column;gap:6px;padding:14px 16px 18px}
  .dxeb-tl{font-size:19px}
}

/* ── 읽기 화면 ── */
.dxr{position:relative;display:flex;flex-direction:column;background:var(--pn);color:var(--fg);outline:none;user-select:none;-webkit-user-select:none;font:14px/1.5 -apple-system,"Segoe UI","Malgun Gothic",sans-serif}
.dxr *{box-sizing:border-box}
.dxeb-card .dxr{border-top:1px solid var(--ln)}
.dxr-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:pan-y;background:radial-gradient(120% 100% at 50% 0%,var(--st1),var(--st2))}
.dxr:not(.dxr-fs) .dxr-stage{flex:none}
.dxr-fs .dxr-stage{touch-action:none}
.dxr-book{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-origin:50% 50%}
.dxr-zm .dxr-book{will-change:transform}
.dxr-pg{width:100%;height:100%;background:#fff center/100% 100% no-repeat;pointer-events:auto}

.dxr-tr{position:absolute;inset:0;display:flex;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.dxr-sl{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center}
.dxr-sl .dxr-pg{width:var(--pw);height:var(--ph);flex:none}

.dxr-sp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}
.dxr-sp.on{opacity:1;pointer-events:auto}
.dxr-sp .dxr-pg{width:var(--pw);height:var(--ph);flex:none}

/* 책 넘기기 (입체) */
.dxr-flip.dxr-two .dxr-stage,.dxr-flip.dxr-two .dxr-book{perspective:2200px}
.dxr-flip.dxr-two .dxr-book{display:block}
.dxr-lf{position:absolute;left:50%;top:50%;width:var(--pw);height:var(--ph);margin-top:calc(var(--ph) / -2);transform-origin:left center;transform-style:preserve-3d;transform:translateX(var(--sx,0)) rotateY(0deg);transition:transform .8s cubic-bezier(.45,.05,.25,1)}
.dxr-lf.dxr-tn{transform:translateX(var(--sx,0)) rotateY(-180deg)}
.dxr-fc{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;overflow:hidden}
.dxr-fc .dxr-pg{width:100%;height:100%}
.dxr-lfb{transform:rotateY(180deg)}
.dxr-lff::after,.dxr-lfb::after{content:"";position:absolute;top:0;bottom:0;width:7%;pointer-events:none}
.dxr-lff::after{left:0;background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,0))}
.dxr-lfb::after{right:0;background:linear-gradient(270deg,rgba(0,0,0,.16),rgba(0,0,0,0))}

/* 세로 스크롤 */
.dxr-scroll .dxr-book{display:block;transform:none !important}
.dxr-sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:14px 0;user-select:none}
.dxr-sc .dxr-pg{display:block;margin:0 auto 14px;flex:none}
.dxr-scroll .dxr-stage{touch-action:pan-y}

/* 버튼: 각진 사각형 */
.dxr-b{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--ln);border-radius:3px;background:transparent;color:var(--fg);cursor:pointer;font-size:14px;padding:0;flex:none;transition:border-color .15s,color .15s,background .15s}
.dxr-b:hover{border-color:var(--ac);color:var(--ac)}
.dxr-b:disabled{opacity:.3;cursor:default;border-color:var(--ln);color:var(--fg)}
.dxr-stage>.dxr-pv,.dxr-stage>.dxr-nx{position:absolute;top:50%;margin-top:-26px;z-index:5000;width:40px;height:52px;background:rgba(11,15,23,.62);border-color:rgba(255,255,255,.14);color:#fff}
.dxr-bg-light .dxr-stage>.dxr-pv,.dxr-bg-light .dxr-stage>.dxr-nx,.dxr-bg-paper .dxr-stage>.dxr-pv,.dxr-bg-paper .dxr-stage>.dxr-nx{background:rgba(255,255,255,.8);color:#1b2433;border-color:rgba(0,0,0,.1)}
.dxr-stage>.dxr-pv:hover,.dxr-stage>.dxr-nx:hover{background:var(--ac);color:var(--acfg);border-color:var(--ac)}
.dxr-stage>.dxr-pv{left:10px}.dxr-stage>.dxr-nx{right:10px}
.dxr-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--ln);background:var(--pn)}
.dxr-rg{flex:1;min-width:0;height:22px;margin:0;accent-color:var(--ac);cursor:pointer;background:none}
.dxr-ct{flex:none;min-width:64px;text-align:right;font-variant-numeric:tabular-nums;color:var(--mut);font-size:13px;font-weight:600}
.dxr-bar .dxr-b{width:36px;height:36px}

/* 전체화면 */
.dxr-ov{position:fixed;inset:0;z-index:2147482000;background:var(--bgc);display:flex}
.dxr-ov .dxr-fs{flex:1;width:100%;height:100%}
.dxr-top{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--ln);background:var(--pn)}
.dxr-tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:800}
.dxr-md{height:38px;padding:0 8px;border:1px solid var(--ln);border-radius:3px;background:var(--pn);color:var(--fg);font:inherit;cursor:pointer}
.dxr-pn{position:absolute;z-index:6000;left:0;top:55px;bottom:53px;width:min(190px,46vw);overflow:auto;padding:10px;background:var(--pn);border-right:1px solid var(--ln);display:flex;flex-direction:column;gap:10px}
.dxr-pon .dxr-stage{margin-left:min(190px,46vw)}
.dxr-th,.dxeb-th{position:relative;display:block;width:100%;padding:0;border:2px solid transparent;border-radius:3px;background:none;cursor:pointer;color:inherit;font:inherit}
.dxr-th .tm,.dxeb-th .tm{display:block;width:100%;aspect-ratio:var(--ear,.707);background:#fff center/cover no-repeat;border-radius:2px;border:1px solid var(--ln)}
.dxr-th i,.dxeb-th i{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--mut);text-align:center}
.dxr-th.on{border-color:var(--ac)}
.dxr-th:hover .tm,.dxeb-th:hover .tm{border-color:var(--ac)}

/* 쪽 모아보기 / 필름 */
.dxeb-gr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:6px 22px 22px;background:var(--bgc)}
.dxeb-st{display:flex;gap:12px;overflow-x:auto;padding:6px 22px 22px;background:var(--bgc);scroll-snap-type:x proximity;scroll-padding-left:22px;-webkit-overflow-scrolling:touch}
.dxeb-st .dxeb-th{flex:0 0 140px;width:140px;scroll-snap-align:start}
@container (max-width:700px){.dxeb-gr{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (max-width:480px){.dxeb-gr{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:4px 14px 16px}.dxeb-st{padding:4px 14px 16px}.dxeb-st .dxeb-th{flex-basis:110px;width:110px}}

/* 읽어 주기 */
.dxr-spk{outline:3px solid var(--ac);outline-offset:-3px}
.dxr-tts.on{border-color:var(--ac);color:var(--acfg);background:var(--ac)}
.dxr-tp{position:absolute;z-index:7000;right:8px;bottom:56px;width:min(330px,calc(100% - 16px));display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--ln);border-radius:4px;background:var(--pn);color:var(--fg)}
.dxr-tp .r1{display:flex;align-items:center;gap:8px}
.dxr-tp .ms{flex:1;min-width:0;font-size:13px;color:var(--mut)}
.dxr-tp label{display:flex;align-items:center;gap:8px;font-size:13px}
.dxr-tp select{flex:1;min-width:0;height:36px;padding:0 8px;border:1px solid var(--ln);border-radius:3px;background:var(--bgc);color:var(--fg);font:inherit}
.dxr-tp small{color:var(--mut);font-size:12px;line-height:1.4}

@media (max-width:640px){
  .dxr-md{max-width:104px}
  .dxr-top{gap:6px;padding:6px 8px}
  .dxr-top .dxr-zo,.dxr-top .dxr-zi{display:none}
  .dxr-stage>.dxr-pv,.dxr-stage>.dxr-nx{width:34px;height:46px;margin-top:-23px}
  .dxr-pn{top:51px}
  .dxeb-btn{height:44px;padding:0 18px}
}
@media (prefers-reduced-motion:reduce){.dxr-lf,.dxr-tr,.dxr-sp,.dxeb-bk3 .bk{transition:none}}