/* Shared native dialog only; no global page or viewer layout rules. */
.webtoon-contents-dialog *{box-sizing:border-box}.webtoon-contents-dialog a{color:inherit;text-decoration:none}.webtoon-contents-dialog button{font-family:inherit;cursor:pointer}.webtoon-contents-dialog .webtoon-episode-label{display:flex;align-items:baseline;gap:8px;min-width:0}.webtoon-contents-dialog .webtoon-episode-number{flex:none;white-space:nowrap}
.webtoon-contents-dialog{font-family:var(--toon-font,var(--hanja-font,sans-serif));line-height:1.5;box-sizing:border-box;position:fixed;inset:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));margin:auto;width:420px;min-width:0;max-width:min(420px,calc(100% - max(16px,env(safe-area-inset-left,0px)) - max(16px,env(safe-area-inset-right,0px))));max-height:calc(100vh - max(24px,env(safe-area-inset-top,0px)) - max(24px,env(safe-area-inset-bottom,0px)));max-height:calc(100dvh - max(24px,env(safe-area-inset-top,0px)) - max(24px,env(safe-area-inset-bottom,0px)));padding:0;border:1px solid #dce2dc;border-radius:18px;background:#fff;color:#252b26;box-shadow:0 16px 64px #182b2233;overflow:hidden;overscroll-behavior:contain}
.webtoon-contents-dialog[open]{display:flex;flex-direction:column}
.webtoon-contents-dialog::backdrop{background:rgba(26,33,28,.4)}
.webtoon-contents-heading{box-sizing:border-box;display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:9px 11px;border-bottom:1px solid #e8ece7}
/* Very long series names scroll independently so Close and the episode list
   remain reachable even on a short landscape screen. The heading is focusable. */
.webtoon-contents-heading h2{flex:1;min-width:0;max-height:min(180px,40vh);max-height:min(180px,calc((100dvh - max(24px,env(safe-area-inset-top,0px)) - max(24px,env(safe-area-inset-bottom,0px))) * .4));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;margin:0;font-size:15px;line-height:1.4;font-weight:700}
.webtoon-contents-heading h2:focus-visible{outline:2px solid #738d77;outline-offset:2px}
.webtoon-contents-close,.webtoon-contents-retry{flex:none;border:1px solid #e1e5e0;border-radius:8px;background:#f6f7f5;color:#475249;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.webtoon-contents-close{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:6px;background:transparent;font-size:20px;line-height:1}
.webtoon-contents-retry{align-self:center;margin:0 20px 22px;padding:10px 16px;min-height:44px;font-size:14px}
.webtoon-contents-retry[hidden]{display:none}
.webtoon-contents-status{flex:none;width:0;min-width:100%;margin:0;padding:24px 22px;font-size:14px;line-height:1.7;color:#737a73;text-align:center}
.webtoon-contents-status:empty{display:none}
.webtoon-contents-list{position:relative;width:100%;max-width:100%;min-width:0;min-height:0;max-height:520px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;list-style:none;margin:0;padding:10px 11px;scrollbar-width:thin;touch-action:pan-y pinch-zoom}
/* Older WebKit does not support scrollbar-width; keep its classic gutter within the inset. */
.webtoon-contents-list::-webkit-scrollbar{width:10px}
.webtoon-contents-list:empty{display:none}
/* The scrollbar occupies part of the right inset only when actually present. */
.webtoon-contents-list{padding-right:max(0px,calc(11px - var(--contents-scrollbar-width,0px)))}
.webtoon-contents-list li{margin:0;padding:0}
.webtoon-contents-link{display:flex;align-items:center;gap:13px;min-width:0;padding:6px 20px 6px 10px;border:1px solid transparent;border-radius:10px;-webkit-tap-highlight-color:transparent}
.webtoon-contents-link[aria-current="page"]{background:#edf2ed;border-color:#cedbce}
.webtoon-contents-thumb{position:relative;display:grid;place-items:center;flex:none;width:42px;height:36px;overflow:hidden;border-radius:6px;background:#e9ece7;color:#7b837b;font-size:12px}
.webtoon-contents-thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.webtoon-contents-label{min-width:0;flex:1;font-size:14px;line-height:1.6}
.webtoon-contents-label .webtoon-episode-number{min-width:0}
.webtoon-contents-label .webtoon-episode-title{flex:1;min-width:0;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.webtoon-contents-close:active{background:#f3f4f6}
.webtoon-contents-retry:active,.webtoon-contents-link:active{background:#e2e6e1}
.webtoon-contents-link:focus-visible{outline-offset:-3px}
@media(hover:hover) and (pointer:fine){
 .webtoon-contents-link:hover{background:#f0f3ef;border-color:#cad6ca}
 .webtoon-contents-link[aria-current="page"]:hover{background:#e5ece4}
 .webtoon-contents-close:hover{background:#f3f4f6}
 .webtoon-contents-retry:hover{background:#e9ede7}
}
/* Phones use the available width; desktop and tablet use a stable 420px. */
@media(max-width:600px){
 .webtoon-contents-dialog{width:calc(100% - max(16px,env(safe-area-inset-left,0px)) - max(16px,env(safe-area-inset-right,0px)));max-width:calc(100% - max(16px,env(safe-area-inset-left,0px)) - max(16px,env(safe-area-inset-right,0px)))}
}