/* PC review only: this stylesheet is loaded with media="(min-width:769px)". */
@font-face{font-family:"OM KoPub Batang";src:url('/fonts/KoPubBatang-Regular.subset.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"OM KoPub Batang";src:url('/fonts/KoPubBatang-Bold.subset.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
body{--pc-nav-serif:var(--reader-serif,Georgia,serif);--pc-control-type:700 .875rem/1.6 var(--pc-nav-serif);--pc-control-radius:4px;--pc-tab-paper:#daddd4;--pc-tab-hover:#c7cebf;--pc-tab-line:#c4cbbd;--pc-tab-ink:#414d3b}
html:lang(ko) body,body.reader-ko{--pc-nav-serif:"OM KoPub Batang","OM Noto Serif KR","Noto Serif KR",serif}
:is(.editorial-nav a,.chapter-index a,.chapter-index button,.editorial-utility a,.editorial-title-actions nav a,.editorial-catalogue nav a,.reader-return,.toc-editorial-link,.editorial-begin,.editorial-video-entry a,.editorial-preview-link,.work-nav a,.work-saved-return a):not(.work-closing *){
 --tab-fill:var(--pc-tab-paper);--tab-hover:var(--pc-tab-hover);--tab-border:var(--pc-tab-line);--tab-ink:var(--pc-tab-ink);
 color:var(--tab-ink)
}
.start-actions a{font-family:var(--pc-nav-serif);font-size:1rem;font-weight:400}
:is(.editorial-nav .editorial-next,.editorial-title-actions .editorial-begin,.work-nav a[data-next]):not(.work-closing *){--tab-fill:#d0d7c8;--tab-hover:#bec8b3;--tab-border:#b9c4ae}
body .chapter-index :is(a,button)[aria-current="page"]{--tab-fill:#cbd4c1;--tab-hover:#bbc7b0;--tab-border:#9dac90;--tab-ink:#35432c}
:is(.editorial-nav,.chapter-index,.editorial-utility,.work-nav) :is(a,button):not(.work-closing *):focus-visible,.reader-return:focus-visible{outline:1px solid #64735b;outline-offset:3px}

/* The same three levels in the reading contents and the video contents. */
.editorial-contents .editorial-header h1,.toc-section-label{font:550 1rem/1.7 var(--reader-serif);color:#4c584a;letter-spacing:0}
.editorial-chapter-label,.toc-chapter-number{font:550 .71875rem/1.65 var(--reader-ui);color:#73796e;letter-spacing:.015em;margin-bottom:9px!important}
.editorial-toc-section h2,.toc-header h1.toc-chapter-title{font-size:2rem;font-weight:430;color:#303a30;line-height:1.5}
.toc-header{row-gap:18px;margin-bottom:32px}

/* An open gallery: each portrait has its own stage above the caption.
   The stage reserves the enlarged image's space; captions and neighbours never move. */
.toc-screen{--gallery-height:clamp(124px,calc((100vh - 464px)/2.72),220px);max-width:1560px;padding-top:24px;padding-bottom:24px}
.toc-header{margin-bottom:10px}
.toc-grid{display:flex;flex-wrap:wrap;justify-content:center;max-width:none;align-items:start;gap:18px 36px}
.toc-item{width:calc((100% - 108px)/4);grid-template-columns:minmax(0,1fr);gap:8px;align-items:start;min-height:0}
.toc-item .toc-art{height:calc(var(--gallery-height)*1.36);width:100%;justify-content:center;align-items:center;transform:none!important;overflow:visible}
.toc-screen[data-count] .toc-image{height:var(--gallery-height);width:auto;max-width:72%;justify-content:center;transform-origin:center;transition:transform .28s cubic-bezier(.2,.6,.35,1)}
.toc-screen .toc-art img{max-width:100%;width:auto;height:100%;object-fit:contain}
.toc-caption{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:7px;align-content:start;padding:0 6px}
.toc-caption .toc-title{align-items:flex-start;justify-content:center;min-height:0;padding:0;text-align:center}
/* Start the heart at the portrait's right edge, accounting for caption padding and button inset. */
.toc-caption .reader-actions{display:grid;grid-template-columns:calc(50% + min(calc(var(--gallery-height)*.375),calc(36% + 4.32px)) - 8px) minmax(0,1fr);align-items:center;gap:5px 0}
.toc-caption .reader-actions [data-reader-save]{grid-column:2;grid-row:1;justify-self:start}
.toc-caption .reader-actions [data-reader-watch]{grid-column:1;grid-row:1;justify-self:end;margin-right:10px}
.toc-caption .reader-actions button{min-height:30px;min-width:0;padding:3px 7px;gap:5px;justify-content:center}
.toc-caption .reader-actions [data-reader-save]{max-width:calc(100% + 22px)}
/* Contents and gallery share the gallery's exact save-button proportions. */
:is(.toc-caption,.editorial-chapter-list) .reader-actions [data-reader-save]{width:max-content;min-height:30px;min-width:0;padding:3px 7px;gap:5px;justify-content:center;border:1px solid transparent;border-radius:var(--pc-control-radius);color:var(--pc-tab-ink);background:rgba(218,221,212,.42);box-shadow:none;transition:background-color .16s ease}
:is(.toc-caption,.editorial-chapter-list) .reader-actions [data-reader-save]:hover{background:var(--pc-tab-hover)}
/* Preserve the contents row's spacing independently of its button size. */
.editorial-chapter-list .reader-actions{min-height:48px;align-items:center}
:is(.toc-caption,.editorial-chapter-list) .reader-actions [data-reader-save]:focus-visible{outline:1px solid #64735b;outline-offset:3px}
:is(.toc-caption,.editorial-chapter-list) [data-reader-save] .reader-heart{width:15px;height:15px}
.toc-caption :is(.reader-heart,.reader-check){width:15px;height:15px}
@media(hover:hover) and (pointer:fine){.toc-art:hover .toc-image,.toc-art:focus-visible .toc-image{transform:scale(1.34)}}
.toc-screen[data-count="5"] .toc-item{width:calc((100% - 72px)/3)}
@media(min-width:1440px){.toc-screen[data-count="9"] .toc-grid{column-gap:30px}.toc-screen[data-count="9"] .toc-item{width:calc((100% - 120px)/5)}}
@media(max-width:1100px){.toc-grid{gap:20px 24px}.toc-screen .toc-item{width:calc((100% - 48px)/3)}}
@media(prefers-reduced-motion:reduce){.toc-screen .toc-image{transition:none!important;transform:none!important}}

/* Silent pages use the same tab proportions, with ink reversed for their dark paper. */
.silent-choice header>p{display:none}
.silent-choice>.return-link,.silent-return .return-link{
 display:inline-flex;align-items:center;justify-content:center;gap:6px;width:fit-content;max-width:100%;min-height:42px;padding:8px 18px;
 border:1px solid #454c40;border-radius:1px;box-shadow:none;background:#292e28;color:#d9dfd3;
 text-decoration:none;overflow-wrap:anywhere;transition:background-color .16s ease
}
.silent-choice>.return-link{margin-top:36px}
.silent-return .return-link svg{width:15px;height:15px;transform:none}
.silent-choice>.return-link:hover,.silent-return .return-link:hover{background:#3b4536;color:#e5e9df}
.silent-choice>.return-link:focus-visible,.silent-return .return-link:focus-visible{outline:1px solid #c6d0bc;outline-offset:3px}

/* One type rule for every PC action. !important protects this common policy from
   page styles loaded later by the router. The five start links and prose links
   are deliberately not selected; SVGs and transport glyphs keep their geometry. */
body :is(button,select,.editorial-nav a,.chapter-index a,.editorial-utility a,.editorial-title-actions nav a,.editorial-catalogue nav a,.reader-return,.toc-editorial-link,.editorial-begin,.editorial-video-entry a,.editorial-preview-link,.work-nav a,.work-saved-return a,.ending-copy nav a,.return-link,.format-options a,#back){font:var(--pc-control-type)!important;letter-spacing:0!important}
body :is(.reader-actions button>span,.reader-reopen>span,.work-nav a>span,.editorial-nav a>span,.return-link>span,.format-options strong){font:inherit!important;letter-spacing:inherit!important}

/* One soft, borderless edge for rectangular PC controls and their painted faces. */
body :is(.work-nav a,.editorial-nav a,.chapter-index a,.chapter-index button,.editorial-utility a,.editorial-title-actions nav a,.editorial-catalogue nav a,.ending-copy nav a,.ending-copy nav button,.reader-return,.reader-reopen,.work-saved-return a,.toc-editorial-link,.editorial-begin,.editorial-video-entry a,.editorial-preview-link,.return-link,.format-options a,.login-wrap button,.reader-confirm button,.reader-actions button){border-color:transparent!important;border-radius:var(--pc-control-radius)!important}
body :is(.work-nav a,.editorial-nav a,.chapter-index a,.chapter-index button,.editorial-utility a,.editorial-title-actions nav a,.editorial-catalogue nav a,.ending-copy nav a,.ending-copy nav button,.reader-return,.reader-reopen,.work-saved-return a,.toc-editorial-link,.editorial-begin,.editorial-video-entry a,.editorial-preview-link)::before{border-color:transparent!important;border-radius:inherit!important}

/* A transient overlay: translucent olive paper, with fully opaque lettering. */
.reader-toast[data-kind="watch"]{display:flex;align-items:center;justify-content:center;width:384px;max-width:calc(100vw - 64px);min-height:104px;padding:24px 28px;border:1px solid rgba(205,218,191,.4);border-radius:3px;box-shadow:0 8px 28px rgba(30,39,25,.2);background:rgba(70,81,63,.34);backdrop-filter:blur(2px) brightness(.53);color:#fbfaf3;font:500 1.0625rem/1.7 var(--reader-ui);letter-spacing:0;text-align:center;word-break:keep-all;overflow-wrap:anywhere;pointer-events:none}
.reader-toast[data-kind="watch"] .reader-check{display:none}

/* Translation length may change a control's height, never its title space.
   Keep the approved Korean edition and portrait-edge anchor unchanged. */
html:not(:lang(ko)) body .toc-caption .reader-actions [data-reader-save]{max-width:calc(100% + 44px)}
html:not(:lang(ko)) body .toc-caption .reader-actions button span{text-align:start;overflow-wrap:normal}
html:not(:lang(ko)) body .silent-choice h1{font-family:var(--reader-serif);word-break:normal;overflow-wrap:anywhere}
body:is(.reader-th,.reader-hi){--pc-control-type:700 .875rem/1.8 var(--pc-nav-serif)}
body:is(.reader-th,.reader-hi) :is(.start-screen h1,.silent-choice h1){letter-spacing:0;line-height:1.55;word-break:normal}
html:not(:lang(ko)) body .login-wrap :is(h1,header div,.help){font-family:var(--reader-serif);letter-spacing:0;line-height:1.65;overflow-wrap:anywhere}
/* 2026-10-19: 재생을 누른 직후 첫 장면이 그려질 때까지 표지를 덮어 두어 검은 화면이 보이지 않게(휴대폰과 같은 방식, 표지 그림·배치는 기존 PC 표지와 같음) */
.video-shell .work-poster{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;object-fit:contain;transform:translateZ(0);will-change:opacity;transition:opacity .45s ease}
.video-shell .work-poster.leaving{opacity:0}

/* PC responds at once; a brief opacity change avoids restarting the rising text effect. */
@media (min-width:769px) and (pointer:fine){
 .start-kicker,.start-screen h1,.start-aside,.start-folio,.identity,.card,.prose{animation:pc-reader-arrive .16s ease-out both;animation-delay:0s}
 .view-work .work-layout,.toc-grid,.editorial-contents .editorial-toc-section{animation:pc-reader-arrive .16s ease-out both}
 @keyframes pc-reader-arrive{from{opacity:.75}to{opacity:1}}
 @media(prefers-reduced-motion:reduce){.start-kicker,.start-screen h1,.start-aside,.start-folio,.identity,.card,.prose,.view-work .work-layout,.toc-grid,.editorial-contents .editorial-toc-section{animation:none}}
}