/* Keep the viewport's inline size unchanged when the list locks page scrolling.
   The root gutter also constrains fixed bars and the native top-layer dialog. */
:root{color-scheme:only light;scrollbar-gutter:stable;--toon-font:"Noto Sans KR","Study Hanja Sans","Study Hanja Extended","Tonghanja Selected Components","Tonghanja Selected Components Rare",sans-serif}
/* Episode reading has one internal scrolling surface. The document stays
   locked from the first layout; the episode index and admin previews retain
   their normal document scrolling. Browser-owned UI remains outside CSS. */
:root.webtoon-reading,
:root.webtoon-reading body.webtoon-page{height:100vh;height:100dvh;max-height:100dvh;overflow:hidden;overscroll-behavior:none;scrollbar-gutter:auto}
:root.webtoon-reading #webtoon-main{height:100vh;height:100dvh;max-height:100dvh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y pinch-zoom;scrollbar-width:none;-ms-overflow-style:none;scrollbar-gutter:auto}
:root.webtoon-reading #webtoon-main::-webkit-scrollbar{display:none;width:0;height:0}
:root.webtoon-reading #webtoon-episode,
:root.webtoon-reading .webtoon-strip{overflow:visible;height:auto;max-height:none}
*{box-sizing:border-box}
.webtoon-page{--webtoon-bar-height:65px;--webtoon-bottom-clearance:0px}
html,body.webtoon-page{width:100%;margin:0;padding:0;background:#fff;color:#252b26;font-family:var(--toon-font);overflow-x:clip}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
.webtoon-header{background:#fff;border-bottom:1px solid #E5E7EB;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:env(safe-area-inset-top,0px)}
/* Match the main header's final responsive padding, without a centered content cap. */
.webtoon-header-inner{--webtoon-header-padding-left:24px;--webtoon-header-padding-right:24px;--webtoon-header-title-gap:24px;position:relative;min-height:calc(var(--webtoon-bar-height) - 1px);display:flex;align-items:center;gap:var(--webtoon-header-title-gap);max-width:none;margin:0;padding:0 var(--webtoon-header-padding-right) 0 var(--webtoon-header-padding-left)}
.webtoon-brand{display:inline-flex;align-items:center;gap:9px;flex:none;min-height:44px;font-size:19px;font-weight:700;line-height:1;white-space:nowrap}
.webtoon-brand>span{display:block;transform:translateY(-1px)}
.webtoon-brand img{display:block;flex:none}
.webtoon-brand{position:relative;isolation:isolate;-webkit-tap-highlight-color:transparent}
.webtoon-brand::before{content:"";position:absolute;inset:0 -8px;border-radius:8px;background:transparent;pointer-events:none;z-index:-1}
.webtoon-brand:not([aria-disabled="true"]):not([data-touch-input]):active::before,.webtoon-brand:not([aria-disabled="true"]).is-touch-pressed::before{background:rgba(0,0,0,.05)}
.webtoon-header h1{min-width:0;overflow:visible;white-space:normal;overflow-wrap:anywhere;margin:0;font-size:16px;line-height:1.5;font-weight:500}
.webtoon-episode-label{display:flex;align-items:baseline;gap:8px;min-width:0}
.webtoon-episode-number{flex:none;white-space:nowrap}
.webtoon-episode-title{min-width:0;overflow-wrap:anywhere}
.webtoon-header .webtoon-episode-title{display:inline;overflow:visible;white-space:normal;overflow-wrap:anywhere}
.is-reading .webtoon-header{position:fixed;inset:0 0 auto;z-index:20}
/* Equal side tracks and symmetric safe padding center the title on the whole
   viewport. Normal flow lets long titles wrap without clipping or logo overlap. */
.is-reading .webtoon-header-inner{--webtoon-header-side:120px;display:grid;grid-template-columns:var(--webtoon-header-side) minmax(0,1fr) var(--webtoon-header-side);padding-inline:max(var(--webtoon-header-padding-left),var(--webtoon-header-padding-right))}
.is-reading .webtoon-brand{grid-column:1;grid-row:1;justify-self:start}
.is-reading .webtoon-header h1{grid-column:2;grid-row:1;display:block;width:auto;padding:12px 0;text-align:center}
.webtoon-header[hidden],.webtoon-intro[hidden],.webtoon-list[hidden],#webtoon-episode[hidden],.webtoon-floating-navigation[hidden],.webtoon-controls-toggle[hidden],.webtoon-sr-only[hidden]{display:none}
.webtoon-intro{max-width:760px;margin:0 auto;padding:38px 24px 30px}
.webtoon-eyebrow{margin:0 0 10px;color:#6e786f;font-size:13px}
.webtoon-intro h2{font-size:28px;line-height:1.35;margin:0 0 12px;overflow-wrap:anywhere}
.webtoon-intro>p:last-child{margin:0;color:#747b74;font-size:14px;line-height:1.7}
.webtoon-status{max-width:760px;padding:24px;margin:0 auto;color:#737a73;line-height:1.7}.webtoon-status:empty{display:none}
.is-reading .webtoon-status:not(:empty){padding-top:calc(88px + env(safe-area-inset-top,0px))}
.webtoon-reload{display:block;margin:0 auto 30px;border:1px solid #d9dfd8;border-radius:7px;background:#fff;padding:10px 18px}.webtoon-reload[hidden]{display:none}
.webtoon-list{max-width:760px;margin:0 auto;padding:0 24px 60px;display:grid;gap:0}
.webtoon-card{display:flex;gap:20px;padding:20px 0;border-top:1px solid #e7ebe6;align-items:center}
.webtoon-card>div{min-width:0}
.webtoon-card img{width:104px;height:130px;object-fit:cover;object-position:top;flex:none;background:#f6f7f3;border-radius:5px}
.webtoon-card .webtoon-thumb-empty{width:104px;height:130px;flex:none;background:#f6f7f3;display:grid;place-items:center;color:#7b837b}
.webtoon-card h2{font-size:18px;margin:0 0 8px;line-height:1.5;overflow-wrap:anywhere}.webtoon-card p{margin:0;color:#747b74;font-size:13px}
.webtoon-strip{width:100%;max-width:760px;margin:0 auto;padding:0;display:block;line-height:0;font-size:0;border:0;gap:0}
.webtoon-panel{position:relative;display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#fff}
.webtoon-panel img{display:block;width:100%;height:auto;margin:0;padding:0;border:0;border-radius:0;vertical-align:top;aspect-ratio:var(--panel-ratio);object-fit:contain}
.webtoon-panel:not(.is-loaded) img{visibility:hidden}
.webtoon-panel-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#f5f6f3;font-size:14px;line-height:1.6;padding:16px;text-align:center}.webtoon-panel-error[hidden]{display:none}
.webtoon-panel-error button{border:1px solid #cbd3ca;border-radius:6px;background:#fff;padding:8px 14px}
#webtoon-episode{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px) + var(--webtoon-bottom-clearance))}
.webtoon-navigation{display:grid;grid-template-columns:repeat(3,minmax(0,88px));justify-content:center;align-items:center;gap:clamp(8px,3vw,24px)}
.webtoon-navigation>a,.webtoon-navigation>span,.webtoon-navigation>button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;text-align:center;padding:10px 6px;border:0;border-radius:0;font-size:14px;font-weight:400;line-height:1.5;white-space:nowrap;background:transparent;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.webtoon-navigation>a,.webtoon-navigation>button{position:relative;isolation:isolate}
.webtoon-navigation>a::before,.webtoon-navigation>button::before{content:"";position:absolute;left:0;right:0;top:50%;height:36px;transform:translateY(-50%);border-radius:6px;background-color:transparent;pointer-events:none;z-index:-1;transition:background-color .15s ease}
.webtoon-navigation>span[aria-disabled="true"]{color:#929a92;cursor:default}
.webtoon-navigation>.webtoon-contents-button{gap:7px}
.webtoon-contents-button svg{display:block;flex:none}
.webtoon-navigation>a:not([aria-disabled="true"]):not([data-touch-input]):active::before,.webtoon-navigation>button:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,.webtoon-navigation>a:not([aria-disabled="true"]).is-touch-pressed::before,.webtoon-navigation>button:not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before{background-color:rgba(0,0,0,.05)}
.webtoon-navigation>[data-touch-input]::before{transition:none}
/* Share the header's border-box height; safe areas extend each edge separately.
   Equal side insets keep the controls centered beside an asymmetric notch. */
.webtoon-floating-navigation{position:fixed;z-index:20;inset:auto 0 0;width:100%;height:calc(var(--webtoon-bar-height) + env(safe-area-inset-bottom,0px));padding:0 max(12px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px);border:0;border-top:1px solid #E5E7EB;border-radius:0;background:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
@media(hover:hover) and (pointer:fine){
 .webtoon-navigation>a:not([aria-disabled="true"]):not([data-touch-input]):hover::before,.webtoon-navigation>button:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before{background-color:rgba(0,0,0,.05)}
}
.webtoon-sr-only,.webtoon-controls-toggle:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.webtoon-skip{position:fixed;top:-100px;left:12px;z-index:30;background:#fff;padding:12px}.webtoon-skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.webtoon-controls-toggle:focus{position:fixed;z-index:30;left:50%;top:calc(var(--webtoon-reading-header-height,calc(var(--webtoon-bar-height) + env(safe-area-inset-top,0px))) + 8px);transform:translateX(-50%);padding:10px 16px;border:1px solid #b8c8b9;border-radius:8px;background:#fff;color:#252b26}
a:focus-visible,button:focus-visible{outline:2px solid #2d5a46;outline-offset:3px}#webtoon-main:focus{outline:none}
@media(max-width:760px){
 .webtoon-page{--webtoon-bar-height:57px}
 .webtoon-header-inner{--webtoon-header-title-gap:14px}
 .is-reading .webtoon-header-inner{--webtoon-header-side:28px}
 .is-reading .webtoon-brand span{display:none}
 .webtoon-header h1{font-size:15px}
 .webtoon-intro{padding:28px 18px 24px}.webtoon-intro h2{font-size:24px}
 .webtoon-list{padding:0 18px 40px}.webtoon-strip{max-width:none;width:100%;margin:0;padding:0}
 .webtoon-card{gap:16px}.webtoon-card h2{font-size:17px}
}

@media(max-width:639px){.webtoon-header-inner{--webtoon-header-padding-left:max(12px,env(safe-area-inset-left,0px));--webtoon-header-padding-right:max(12px,env(safe-area-inset-right,0px))}}
@media(max-width:380px){.webtoon-header-inner{--webtoon-header-padding-left:max(8px,env(safe-area-inset-left,0px));--webtoon-header-padding-right:max(8px,env(safe-area-inset-right,0px))}}
@media(min-width:901px){.webtoon-header-inner{--webtoon-header-padding-right:6px}}
@media(min-width:1600px){.webtoon-header-inner{--webtoon-header-padding-right:12px}}
/* One edge bar, shown with the reading menu. The transparent rail touches the
   viewport edge; its only painted part sits exactly 2px inward, even in landscape.
   Only its short thumb hitbox can
   capture a gesture; the rest of the invisible rail passes through to reading. */
.webtoon-power-scroll{position:fixed;z-index:21;right:0;top:calc(var(--webtoon-reading-header-height,calc(var(--webtoon-bar-height) + env(safe-area-inset-top,0px))) + 8px);bottom:calc(var(--webtoon-bar-height) + env(safe-area-inset-bottom,0px) + 8px);width:44px;min-height:44px;background:transparent;border:none;box-shadow:none;touch-action:auto;pointer-events:none;user-select:none;-webkit-user-select:none;--scroll-progress:0}
.webtoon-power-scroll[hidden]{display:none}
.webtoon-power-thumb{position:absolute;top:calc(var(--scroll-progress) * (100% - 44px));right:0;width:44px;height:44px;background:transparent;border:none;box-shadow:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;pointer-events:auto;cursor:grab}
.webtoon-power-thumb::before{content:"";position:absolute;top:0;bottom:0;right:2px;width:8px;border-radius:5px;background:#5f6368;pointer-events:none;transition:width .12s ease}
.webtoon-power-scroll:focus-visible{outline:none}
.webtoon-power-scroll:focus-visible .webtoon-power-thumb::before{outline:2px solid #2d5a46;outline-offset:2px}
.webtoon-power-scroll.is-dragging .webtoon-power-thumb{cursor:grabbing}
.webtoon-power-scroll.is-dragging .webtoon-power-thumb::before{width:10px;background:#45494e}
/* Pointer capture can leave the thumb's bounds. Suppress selection only for
   that live drag; every release/cancel path removes the document marker. */
:root.webtoon-power-dragging,:root.webtoon-power-dragging *{user-select:none;-webkit-user-select:none}
.webtoon-power-scroll[aria-disabled="true"]{opacity:.4;cursor:default}
.webtoon-power-scroll[aria-disabled="true"] .webtoon-power-thumb{pointer-events:none;cursor:default}
@media(hover:hover) and (pointer:fine){.webtoon-power-scroll:not([aria-disabled="true"]) .webtoon-power-thumb:hover::before{width:10px;background:#45494e}}
@media(max-height:220px){.webtoon-power-scroll{display:none}}

/* Preserve extra reading space after the final image on touch screens, without
   enlarging the menu bars or adding gaps between manuscript images. */
@media(max-width:760px),(pointer:coarse){.webtoon-page{--webtoon-bottom-clearance:24px}}