/* NAVER Nanum Square Round: an even, rounded face for the written content. */
@font-face{font-family:"Notebook Round";font-style:normal;font-weight:400;font-display:swap;src:url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.woff2") format("woff2"),url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.woff") format("woff")}
@font-face{font-family:"Notebook Round";font-style:normal;font-weight:700;font-display:swap;src:url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.woff2") format("woff2"),url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.woff") format("woff")}
/* Current notebook scale. Shared by the live page and design-book specimens. */
:root{
 --note-space-1:8px;--note-space-2:16px;--note-space-3:24px;--note-space-4:32px;--note-space-5:48px;
 --note-inset-x:48px;--note-inset-top:32px;--note-inset-bottom:40px;
 --note-title:40px;--note-reading:34px;--note-display:88px;--note-copy:16px;--note-label:12px;--note-micro:10px;
 --note-control:44px;--note-icon:18px;--note-signature:136px;--note-header-gap:32px;--note-leading:1.4;
}
.whole-text-practice,.whole-text-sample{--reading-size:var(--note-reading);--reading-leading:var(--note-leading)}
/* Story lines are short, so the notebook stays narrower than the site grid. */
:root{--notebook-width:912px;--note-desk:#d5d8df}
.whole-text-practice{--page-width:var(--notebook-width)}
body.whole-text-practice{background:var(--note-desk)}
body.whole-text-practice .practice{padding-bottom:var(--note-space-3)}
/* Fit the notebook to short viewports (top padding + edge/bottom gap), never below a readable minimum. */
.whole-text-practice{--notebook-height:clamp(600px,calc(100svh - 72px),780px)}
@media(max-width:600px){.whole-text-practice{--notebook-height:clamp(480px,calc(100svh - 56px),640px)}}.whole-text-sample{max-width:var(--notebook-width)}
.design-book-page .whole-text-sample{max-width:calc(var(--notebook-width) + 2 * var(--note-space-4));padding:var(--note-space-4);background:var(--note-desk)}
.notebook-cover,.whole-text-practice .writing-area.notebook-sheet,.whole-text-sample .notebook-sheet{padding:var(--note-inset-top) var(--note-inset-x) var(--note-inset-bottom)}
.notebook-imprint,.cover-edition:has(>.rhythm-panel){grid-template-columns:minmax(0,1fr) var(--note-signature);gap:var(--note-header-gap)}
.notebook-imprint{margin-bottom:var(--note-space-4)}
.notebook-signature>img{width:var(--note-signature)}
.notebook-signature .notebook-address,.cover-edition .site-address{font-size:var(--note-micro);line-height:1.4;letter-spacing:.04em}
.cover-title-block{padding:var(--note-space-5) 0 var(--note-space-4)}
/* The notebook's theme leads the cover; the publisher mark sits quietly at the foot. */
.cover-imprint{display:flex;flex-direction:column;align-items:flex-start;gap:var(--note-space-1)}
.cover-imprint .cover-brand{margin:0}
.cover-imprint .cover-brand .brand-lockup{width:120px}
.cover-imprint>span{font-size:var(--note-label);line-height:1.5;color:var(--muted)}
.cover-bottom{align-items:flex-end}
.cover-title-block h2{font-size:var(--note-display);line-height:1.12;margin:0 0 var(--note-space-3)}
.cover-title-block p{font-size:var(--note-copy);line-height:1.7;margin:0}
.whole-text-practice .notebook-sheet .manuscript-title,.whole-text-sample .notebook-sheet .manuscript-title{font-size:var(--note-title);line-height:1.25;padding-bottom:var(--note-space-2);margin-bottom:var(--note-space-2);--rule-offset:var(--note-space-2)}
.cover-bottom,.notebook-sheet>.reading-navigation{margin-top:auto;padding-top:var(--note-space-2);gap:var(--note-space-2);min-height:var(--note-control)}
.notebook-sheet>.reading-navigation{margin-top:var(--note-space-4)}
body .footer{font-size:var(--note-label);line-height:1.5}
.cover-bottom .notebook-action,.notebook-sheet>.reading-navigation .notebook-action,.design-book-page .ui-button{min-height:var(--note-control);font-size:var(--note-label);gap:var(--note-space-1);padding-inline:var(--note-space-2)}
.notebook-action .ui-icon,.notebook-sheet>.reading-navigation .notebook-action .ui-icon{width:var(--note-icon);height:var(--note-icon)}
.reading-navigation-buttons{gap:var(--note-space-1)}
.whole-text-sample{padding-top:var(--note-space-4)}
.whole-text-sample>.notebook-shelf{margin-bottom:var(--note-space-4)}
.design-book-page .book-section{padding-block:var(--note-space-5);gap:var(--note-space-4)}
.design-book-page .book-section p{font-size:var(--note-copy);line-height:1.7;margin:0 0 var(--note-space-3)}
.design-book-page .book-section h2{font-size:32px;margin-bottom:var(--note-space-3)}
.design-book-page .book-three{gap:var(--note-space-3)}
/* Keep specimens identical to the product instead of inheriting article type. */
.design-book-page .cover-title-block h2{font-size:var(--note-display);line-height:1.12;margin:0 0 var(--note-space-3)}
.design-book-page .cover-title-block p{font-size:var(--note-copy);line-height:1.7;margin:0}
.design-book-page [data-replay-sticker]{margin-top:var(--note-space-3)}
@media(max-width:600px){
 :root{--note-inset-x:20px;--note-inset-top:24px;--note-inset-bottom:28px;--note-title:30px;--note-reading:24px;--note-display:56px;--note-signature:106px;--note-header-gap:16px}
 .notebook-imprint{margin-bottom:var(--note-space-3)}
 .cover-title-block{padding-block:var(--note-space-3)}
 .notebook-sheet>.reading-navigation{margin-top:var(--note-space-3)}
 .cover-bottom{flex-direction:row;align-items:flex-end;flex-wrap:wrap}
 .cover-imprint .cover-brand .brand-lockup{width:104px}
 .cover-bottom>.notebook-action{margin-left:auto}
}

/* Keep the first-column caret inside the ruled-paper clipping boundary. */
.whole-text-practice .notebook-sheet>.writing-stage,
.whole-text-sample>.notebook-sheet>.passage{margin-inline:-4px;padding-inline:4px}

/* Large watermark folio in the unused lower-right paper, beneath the writing. */
:root{--note-folio-mark:168px}
.notebook-sheet>.reading-navigation{position:relative}
.notebook-folio-mark{
 position:absolute;right:0;bottom:calc(100% + var(--note-space-2));z-index:-1;
 font-family:var(--font);font-size:var(--note-folio-mark);font-weight:300;
 line-height:.72;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
 color:var(--ink);opacity:.05;pointer-events:none;user-select:none;
}
@media(max-width:600px){:root{--note-folio-mark:104px}}
/* Running title: the notebook's theme printed at the foot of every inner page. */
:root{--note-running-title:24px}
.notebook-running-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--note-running-title);font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--ink);opacity:.14;user-select:none}
@media(max-width:600px){:root{--note-running-title:15px}.notebook-running-title{white-space:normal;word-break:keep-all;line-height:1.25}}

/* Separate the notebook furniture from the fresh, open writing face. */
:root{--font-writing:"Notebook Round",var(--font)}
.whole-text-practice .notebook-sheet .passage,
.whole-text-practice .notebook-sheet .reading-passage,
.whole-text-sample .notebook-sheet .passage{
 font-family:var(--font-writing);font-weight:400;font-synthesis:none;
}
.whole-text-practice .notebook-sheet .manuscript-title,
.whole-text-sample .notebook-sheet .manuscript-title{font-weight:700;letter-spacing:0}

/* Written ink and the untouched guide remain distinct throughout the page. */
:root{--note-unwritten:#b8bcc6;--note-written:#17191e}
.whole-text-practice .notebook-sheet .manuscript-line.current,
.whole-text-practice .notebook-sheet .manuscript-line.pending-line,
.whole-text-sample .notebook-sheet .manuscript-line.current,
.whole-text-sample .notebook-sheet .manuscript-line.pending-line{color:var(--note-unwritten)}
.whole-text-practice .notebook-sheet .manuscript-line.completed-line,
.whole-text-practice .notebook-sheet .reading-passage .manuscript-line,
.whole-text-sample .notebook-sheet .manuscript-line.completed-line,
.whole-text-practice .notebook-sheet .manuscript-line.current .char.correct,
.whole-text-sample .notebook-sheet .manuscript-line.current .char.correct{color:var(--note-written)}

/* Transition snapshots have no extra paper edge or grain overlay. */
.notebook-sheet.page-turn-leaf::before,.notebook-sheet.page-turn-leaf::after{display:none}

/* The same paper snapshot works when opening or closing the cover. */
.whole-text-practice .page-turn-leaf{position:absolute;inset:0;z-index:5;width:100%;min-height:0;margin:0;border:0;box-shadow:none;overflow:hidden;pointer-events:none}
.whole-text-practice .page-turn-leaf::before,.whole-text-practice .page-turn-leaf::after{display:none}
/* Cover identity: cobalt cloth spine with a hinge crease, and the brand cursor after the title. */
:root{--cover-spine:18px}
.notebook-cover::before{inset:0 auto 0 0;width:var(--cover-spine);background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cfilter%20id%3D%22paper%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.72%20.48%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%20seed%3D%2217%22/%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.16%200%200%200%200%200.18%200%200%200%200%200.22%200%200%200%20.22%200%22/%3E%3C/filter%3E%3Cpath%20fill%3D%22white%22%20filter%3D%22url%28%23paper%29%22%20d%3D%22M0%200h180v180H0z%22/%3E%3C/svg%3E") 0 0/180px 180px,var(--brand);background-blend-mode:multiply;box-shadow:inset -1px 0 0 rgb(8 20 80/.35),1px 0 0 rgb(255 255 255/.7),9px 0 14px -8px rgb(20 30 70/.28)}
.notebook-cover .cover-title-block h2::after{content:"";display:inline-block;width:max(2px,.05em);height:.84em;margin-left:.14em;vertical-align:-.05em;background:var(--brand);animation:cover-cursor 1.1s steps(1,end) infinite}
@keyframes cover-cursor{50%{opacity:0}}
.whole-text-practice .notebook-cover.page-turn-leaf::before,.whole-text-practice .notebook-cover.page-turn-leaf::after,.whole-text-sample .notebook-cover.page-turn-leaf::before,.whole-text-sample .notebook-cover.page-turn-leaf::after{display:block}
.page-turn-leaf.swing-leaf{position:absolute;inset:0;z-index:6;margin:0;transform-origin:left center;backface-visibility:hidden;pointer-events:none}
.is-turning{overflow-x:clip}
@media(prefers-reduced-motion:reduce){.notebook-cover .cover-title-block h2::after{animation:none}}
@media(max-width:600px){:root{--cover-spine:10px}.notebook-cover{padding-left:calc(var(--note-inset-x) + var(--cover-spine))}}

/* Paper stock: fine grain, sparse fibres and soft mottling; the cover is heavier than the writing sheet. */
.notebook-cover::after,.whole-text-practice .writing-area.notebook-sheet::after,.whole-text-sample .notebook-sheet::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cfilter%20id%3D%22paper%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.72%20.48%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%20seed%3D%2217%22/%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.16%200%200%200%200%200.18%200%200%200%200%200.22%200%200%200%20.22%200%22/%3E%3C/filter%3E%3Cpath%20fill%3D%22white%22%20filter%3D%22url%28%23paper%29%22%20d%3D%22M0%200h180v180H0z%22/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22320%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.05%20.22%22%20numOctaves%3D%223%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.2%200%200%200%200%20.22%200%200%200%200%20.28%201.9%200%200%200%20-1.3%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23f)%22%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22480%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.008%22%20numOctaves%3D%223%22%20seed%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.22%200%200%200%200%20.24%200%200%200%200%20.3%20.34%200%200%200%20-.14%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23f)%22%2F%3E%3C%2Fsvg%3E");background-size:180px 180px,320px 320px,480px 480px}
.notebook-cover::after{opacity:.72}
.whole-text-practice .writing-area.notebook-sheet::after,.whole-text-sample .notebook-sheet::after{opacity:.32}

/* Notebook shelf: the chosen cover in place, the other notebooks peeking from the side. */
:root{--shelf-gap:24px}
.design-book-page .whole-text-sample{overflow-x:clip}
.notebook-shelf[hidden]{display:none}
.notebook-shelf{position:relative}
.notebook-shelf-tabs{position:absolute;left:0;bottom:calc(100% + 10px);display:flex;gap:var(--note-space-3)}
.notebook-shelf-tabs [role=tab]{padding:3px 0;font-size:var(--note-label);line-height:1.5;letter-spacing:-.01em;color:#676b76;border-bottom:1px solid transparent}
.notebook-shelf-tabs [role=tab][aria-selected=true]{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}
.notebook-shelf-tabs [role=tab]:focus-visible{outline-offset:3px}
/* Full-bleed clip box: neighbours may reach the screen edge without making the page scroll sideways. */
.notebook-shelf-viewport{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);overflow-x:clip;touch-action:pan-y}
.notebook-shelf-track{display:flex;gap:var(--shelf-gap);cursor:pointer;transform:translateX(calc(var(--shelf-index,0) * (-100% - var(--shelf-gap))));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.notebook-shelf .notebook-cover{flex:0 0 100%;margin:0;cursor:auto;transition:opacity .4s ease,filter .4s ease}
/* Unselected notebooks lie under frosted glass: colourless, softened and hazed toward white. */
.notebook-shelf .notebook-cover:not(.is-active){opacity:.6;filter:grayscale(1) blur(3px) contrast(.78) brightness(1.08)}
.notebook-shelf .notebook-cover:not(.is-active) .cover-title-block h2::after{animation:none;visibility:hidden}
.notebook-shelf-tabs{transition:opacity .24s ease}
/* Site intro: the first view shows a smaller shelf under a short introduction; choosing a notebook folds the introduction away. */
@property --intro-scale{syntax:"<number>";inherits:true;initial-value:1}
body.whole-text-practice{--intro-scale:1;transition:--intro-scale .62s cubic-bezier(.22,1,.36,1) .12s}
body.whole-text-practice.is-intro{--intro-scale:var(--intro-fit,.62)}
.site-intro{order:0;display:grid;grid-template-rows:1fr;transition:grid-template-rows .62s cubic-bezier(.22,1,.36,1) .12s,opacity .24s ease}
.site-intro[hidden]{display:none}
.whole-text-practice:not(.is-intro) .site-intro{grid-template-rows:0fr;opacity:0}
.site-intro-inner{min-height:0;overflow:hidden}
.site-intro-brand{display:flex}
.site-intro-brand .brand-lockup{width:120px}
.site-intro{--intro-title:56px;--intro-title-gap:var(--note-space-4) 0 var(--note-space-3);--intro-foot:var(--note-space-5)}
.site-intro .site-intro-title{margin:var(--intro-title-gap);font-size:var(--intro-title);font-weight:700;line-height:1.18;letter-spacing:-.035em;color:var(--ink);word-break:keep-all}
.site-intro .site-intro-copy{max-width:520px;margin:0;font-size:var(--note-copy);line-height:1.7;color:#4b4f59;word-break:keep-all}
.site-intro .site-intro-hint{margin:var(--note-space-2) 0 var(--intro-foot);font-size:var(--note-label);line-height:1.5;color:var(--muted)}
.has-intro .practice>.notebook-shelf{transform:scale(var(--intro-scale));transform-origin:top left;margin-bottom:calc(var(--shelf-h,0px) * (var(--intro-scale) - 1))}
.has-intro .notebook-shelf-viewport{--bleed-left:calc((50vw - 50%) / var(--intro-scale));--bleed-right:calc((50vw + 50%) / var(--intro-scale) - 100%);margin-inline:calc(-1 * var(--bleed-left)) calc(-1 * var(--bleed-right));padding-inline:var(--bleed-left) var(--bleed-right)}
.is-intro .notebook-shelf-tabs{opacity:0;pointer-events:none}
.has-intro:not(.is-intro) .notebook-shelf-tabs{transition-delay:.5s}
.is-intro .notebook-shelf .notebook-cover{cursor:pointer}
@media(max-width:600px){.site-intro{--intro-title:34px;--intro-title-gap:var(--note-space-3) 0 var(--note-space-2);--intro-foot:var(--note-space-4)}.site-intro .site-intro-copy{font-size:15px}.site-intro-brand .brand-lockup{width:104px}}
@media(min-width:601px) and (max-height:820px){.whole-text-practice .site-intro{--intro-title:44px;--intro-title-gap:var(--note-space-3) 0 var(--note-space-2);--intro-foot:var(--note-space-4)}.site-intro-brand .brand-lockup{width:104px}}
.design-book-page .intro-specimen{margin:0 0 var(--note-space-3);padding:var(--note-space-5) var(--note-space-3) var(--note-space-1);background:var(--note-desk)}
.design-book-page .intro-specimen .site-intro-title{font-size:var(--intro-title);line-height:1.18;margin:var(--intro-title-gap)}
.design-book-page .intro-specimen .site-intro-copy{font-size:var(--note-copy);margin:0}
.design-book-page .intro-specimen .site-intro-hint{font-size:var(--note-label);margin:var(--note-space-2) 0 var(--intro-foot)}
@media(prefers-reduced-motion:reduce){body.whole-text-practice,.site-intro{transition:none}}
.notebook-shelf.is-leaving .notebook-shelf-tabs,.notebook-shelf.is-leaving .notebook-cover:not(.is-active){opacity:0;transition-duration:.24s}
@media(prefers-reduced-motion:reduce){.notebook-shelf-track,.notebook-shelf .notebook-cover,.notebook-shelf-tabs{transition:none}}
@media(max-width:600px){:root{--shelf-gap:8px}.notebook-shelf-tabs{bottom:calc(100% + 4px);gap:var(--note-space-2)}}