*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit}img{display:block;width:100%;height:auto}h1,h2,h3,p,figure{margin:0}h1,h2{letter-spacing:-.035em;line-height:1.2;text-wrap:balance}p{line-height:1.7}h1{font-size:var(--nn-reading-title)}h2{font-size:var(--nn-reading-heading)}h3{font-size:var(--nn-font-body-xl)}header{padding:var(--nn-space-20) var(--nn-space-48);display:flex;align-items:center;justify-content:space-between;gap:var(--nn-space-24)}.brand{font-size:var(--nn-font-size-70);font-weight:var(--nn-font-weight-bold);text-decoration:none;letter-spacing:-.04em}.brand span{font-family:var(--nn-font-hand-pen);font-size:var(--nn-font-size-80);margin-right:var(--nn-space-8)}nav{display:flex;align-items:center;gap:var(--nn-space-32)}nav a{text-decoration:none;min-height:44px;display:flex;align-items:center}nav a:hover{text-decoration:underline}.skip{position:absolute;left:var(--nn-space-16);top:-80px;z-index:10}.skip:focus{top:var(--nn-space-16)}:focus-visible{outline:var(--nn-stroke-selected) solid var(--nn-focus);outline-offset:var(--nn-space-4)}.wrap{max-width:1440px;margin:auto;padding-inline:var(--nn-space-48)}.hero{position:relative}.film{height:740px;display:flex;align-items:center;overflow:hidden;color:var(--nn-inverse);background:var(--nn-color-fill-inverse)}.film>img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:center 60%}.film:after{content:'';position:absolute;inset:0;background:var(--nn-hero-shade)}.film .wrap{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:var(--nn-space-48)}.film h1{font-size:var(--nn-reading-title);max-width:600px}.film .hand{font-family:var(--nn-font-hand-pen);font-size:var(--nn-reading-title);margin-bottom:var(--nn-space-24)}.hero p{font-size:var(--nn-font-body-lg);max-width:540px;margin:var(--nn-space-24) 0}.credit{font-size:var(--nn-font-body-sm);padding-top:var(--nn-space-12)}.film-detail{padding-bottom:var(--nn-space-8)}.film-detail .nn-button{margin-top:var(--nn-space-8)}.simple{padding-block:var(--nn-space-48) var(--nn-space-24)}.simple-top{display:flex;justify-content:space-between;align-items:end;gap:var(--nn-space-32);margin-bottom:var(--nn-space-32)}.simple-top p{margin-bottom:0}.simple-top .nn-button{white-space:nowrap}.screen{box-shadow:var(--nn-elevation-2);overflow:hidden}.screen img{aspect-ratio:1440/1000;object-fit:cover}.simple .screen{max-height:660px}.simple .screen img{object-position:top}.screen figcaption{padding:var(--nn-space-12) var(--nn-space-16);font-size:var(--nn-font-body-sm);background:var(--nn-page-bg);background-image:var(--nn-page-texture)}section.content{padding-block:calc(var(--nn-space-48) * 2)}.intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--nn-space-48);align-items:start}.intro p{font-size:var(--nn-font-body-lg);max-width:600px}.wide-screen{margin-top:var(--nn-space-48)}.wide-screen img{max-height:680px;object-fit:cover;object-position:top}.feature-row{display:grid;grid-template-columns:5fr 7fr;gap:var(--nn-space-48);align-items:center;margin-top:calc(var(--nn-space-48) * 1.5)}.feature-row p{margin-top:var(--nn-space-16);max-width:430px}.fragment{overflow:hidden;min-width:0;background:var(--nn-category-work-mat);background-image:var(--nn-texture-paper);padding:var(--nn-space-24)}.fragment img{height:390px;object-fit:cover;object-position:right top;box-shadow:var(--nn-elevation-2)}.fragment.page img{object-position:center top}.steps{display:grid;grid-template-columns:1fr 2fr;gap:var(--nn-space-48)}.step-list{display:grid;gap:var(--nn-space-32)}.step-list article p{margin-top:var(--nn-space-8)}.closing{display:grid;grid-template-columns:1fr 1fr;gap:var(--nn-space-48);align-items:center}.closing>img{aspect-ratio:4/3;object-fit:cover}.closing p{margin-block:var(--nn-space-24)}.faq{display:grid;grid-template-columns:1fr 2fr;gap:var(--nn-space-48)}details{padding:var(--nn-space-24) 0;border-bottom:var(--nn-stroke-default) solid var(--nn-border)}summary{cursor:pointer;min-height:44px;font-weight:var(--nn-font-weight-bold);font-size:var(--nn-font-body-lg)}details p{padding-top:var(--nn-space-12);max-width:700px}footer{padding-block:var(--nn-space-48)}footer .foot{display:flex;justify-content:space-between;align-items:center;gap:var(--nn-space-24)}footer small{font-size:var(--nn-font-body-sm)}.footer-name{font-family:var(--nn-font-hand-pen);font-size:var(--nn-reading-title)}.credits{max-width:1000px;margin-top:var(--nn-space-24);font-size:var(--nn-font-body-sm)}@media(max-width:700px){header{padding:var(--nn-space-16);gap:var(--nn-space-12)}.brand{font-size:var(--nn-font-size-60)}.brand span{font-size:var(--nn-font-size-70)}nav{gap:var(--nn-space-16)}nav .optional{display:none}nav a{font-size:var(--nn-font-body-sm)}.wrap{padding-inline:var(--nn-space-20)}h1,.film h1{font-size:var(--nn-reading-mobile-title)}h2{font-size:var(--nn-reading-mobile-heading)}.film{height:690px;align-items:stretch}.film>img{object-position:52% center}.film .wrap{display:flex;flex-direction:column;align-items:start;justify-content:space-between;padding-top:var(--nn-space-48);padding-bottom:var(--nn-space-48);gap:var(--nn-space-32)}.film .hand{font-size:var(--nn-reading-title)}.hero p{font-size:var(--nn-reading-mobile-body);margin-block:var(--nn-space-16)}.simple{padding-top:var(--nn-space-32)}.simple-top{display:block}.simple-top .nn-button{margin-top:var(--nn-space-24)}.simple .screen{margin-top:var(--nn-space-32);max-height:none}.simple .screen img{height:510px;aspect-ratio:auto;object-fit:cover;object-position:center top}.simple .screen img.mobile{object-fit:contain;height:auto}.intro,.feature-row,.steps,.faq,.closing{grid-template-columns:1fr;gap:var(--nn-space-24)}section.content{padding-block:var(--nn-space-48)}.intro p{font-size:var(--nn-reading-mobile-body)}.wide-screen{margin-top:var(--nn-space-32)}.wide-screen img{height:360px;width:100%;object-fit:cover;object-position:48% top}.feature-row{margin-top:var(--nn-space-48)}.fragment{padding:var(--nn-space-12)}.fragment img{height:350px;object-position:right top}.closing>img{order:2}footer .foot{align-items:start;flex-direction:column}.credit{font-size:var(--nn-font-body-sm)}}.fragment:not(.page) img{height:auto;object-fit:contain}
@media(max-width:700px){.simple h1{max-width:290px}.simple-top{padding-top:var(--nn-space-8)}}

/* A안의 노트 필름: 첫 장면만 고정하고 손글씨를 스크롤에 연결합니다. */
body{word-break:keep-all;overflow-wrap:break-word}section[id]{scroll-margin-top:var(--nn-space-24)}
.film-story{height:1600px}.film{position:sticky;top:0;height: min(900px,100svh);min-height:660px}.film>img{object-position:center;transform:scale(1.025)}
.inks{position:absolute;inset:0;pointer-events:none}.ink{position:absolute}.ink svg{display:block;width:100%;height:auto}.film .wrap{z-index:2;pointer-events:none}.film .wrap a{pointer-events:auto}.motion-toggle{position:absolute;z-index:3;right:var(--nn-space-24);bottom:var(--nn-space-24);font-size:var(--nn-font-body-sm)}
.wide-screen img,.fragment img,.fragment.page img,.fragment:not(.page) img{height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
@media(max-width:800px){.intro,.feature-row,.steps,.faq,.closing{grid-template-columns:1fr}.film .wrap{grid-template-columns:1fr;gap:var(--nn-space-24)}.film-story{height:1350px}}
@media(max-width:700px){.film{height:760px;min-height:0;max-height:none}.film-story{height:1300px}.film .wrap{padding-bottom:90px}.film h1{font-size:var(--nn-reading-mobile-title)}.motion-toggle{right:var(--nn-space-20);bottom:var(--nn-space-20)}.wide-screen{margin-inline:0}.fragment{padding:var(--nn-space-12)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film-story{height:auto}.film{position:relative}.film>img{transform:none}*,*::before,*::after{transition:none!important;animation:none!important}}
.inks{opacity:.28}.film-detail{align-self:start}.film .wrap{align-items:start}.film-story{background-image:var(--nn-texture-paper);background-color:var(--nn-page-bg)}
@media(max-width:700px){.film-story{height:1050px}.film .wrap{justify-content:space-between}}

/* 2차: 홈페이지와 같은 공통 종이, 크래프트 재료를 사용합니다. */
body{background:var(--nn-page-bg) var(--nn-page-texture);background-size:960px 960px}
header{position:relative;z-index:5}nav{gap:var(--nn-space-16)}nav a{font-size:var(--nn-font-body-md);padding:var(--nn-space-8);min-width:44px;min-height:44px}.menu-toggle{display:none}
.film{color:var(--nn-text)}.film>img{filter:brightness(1.22);transform:none!important}.film:after{background:linear-gradient(90deg,var(--nn-paper-color),transparent 75%);opacity:.84}.film .wrap{display:block;pointer-events:none}.film .wrap>div{max-width:48%}.film .film-detail{margin-top:var(--nn-space-32)}.film .hand{font-weight:400;font-synthesis:none}.inks{z-index:1;opacity:1}.ink svg path{stroke:var(--nn-text)!important}.film-story{height:calc(min(900px,100svh) + (1600px - min(900px,100svh))/2)}
.screen-section{background:var(--nn-sheet-color) var(--nn-texture-paper)}
.features-section{background:var(--nn-kraft-bg) var(--nn-kraft-texture)}
.feature-row{grid-template-columns:4fr 7fr;gap:var(--nn-space-48);margin-top:calc(var(--nn-space-48)*2)}.fragment{padding:0;background:none;box-shadow:none}.fragment img{box-shadow:var(--nn-elevation-3)}
.feature-row:nth-of-type(3){grid-template-columns:8fr 4fr}.feature-row:nth-of-type(3)>div{order:2}.feature-row:nth-of-type(3) .fragment{margin-left:calc(var(--nn-space-24)*-1);transform:rotate(-1deg)}
.feature-row:nth-of-type(4){grid-template-columns:5fr 5fr;padding-left:var(--nn-space-48)}.feature-row:nth-of-type(4) .fragment{transform:rotate(1deg)}
#how{background:var(--nn-color-fill-inverse) var(--nn-texture-kraft);color:var(--nn-inverse);box-shadow:var(--nn-elevation-3)}
.faq-section{background:var(--nn-page-bg) var(--nn-page-texture);background-size:960px 960px}
.closing-section{background:linear-gradient(90deg,color-mix(in srgb,var(--nn-paper-color) 88%,transparent),color-mix(in srgb,var(--nn-paper-color) 96%,transparent)),url('assets/closing-desk.jpg') center/cover}.closing>img{box-shadow:var(--nn-elevation-3)}
@media(max-width:800px){.film-story{height:calc(min(900px,100svh) + (1350px - min(900px,100svh))/2)}.film .wrap>div{max-width:55%}.film h1{font-size:var(--nn-reading-mobile-title)}.film .hand{margin-bottom:var(--nn-space-16)}.hero p{font-size:var(--nn-font-body-md)}.feature-row,.feature-row:nth-of-type(3),.feature-row:nth-of-type(4){grid-template-columns:1fr;padding-left:0}.feature-row:nth-of-type(3)>div{order:0}.feature-row:nth-of-type(3) .fragment{margin-left:0;max-width:94%}.feature-row:nth-of-type(4) .fragment{max-width:88%;margin-left:auto}}
@media(max-width:700px){.menu-toggle:not([hidden]){display:inline-flex;min-height:44px;font-size:var(--nn-font-body-md)}header{flex-wrap:wrap}nav{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:0}nav[hidden]{display:none}nav .optional{display:flex}nav a{font-size:var(--nn-font-body-md);min-height:48px}.film{height:760px}.film-story{height:905px}.film:after{background:linear-gradient(180deg,var(--nn-paper-color),transparent 45%,transparent 62%,var(--nn-paper-color));opacity:.96}.film .wrap{display:flex;padding-block:var(--nn-space-32) 90px}.film .wrap>div{max-width:100%}.film .film-detail{margin-top:0}.film .hand{margin-bottom:var(--nn-space-8);font-size:var(--nn-reading-mobile-title)}.film h1{font-size:var(--nn-reading-mobile-heading)}.film .film-detail p{margin-top:0}.feature-row{margin-top:var(--nn-space-48)}}
@media(prefers-reduced-motion:reduce){.film-story{height:auto}.film{position:relative}}
.film .wrap{height:100%;margin-block:0;display:flex;flex-direction:column;justify-content:center;align-items:start;padding-block:var(--nn-space-48)}
@media(max-width:700px){.film .wrap{justify-content:space-between;padding-block:var(--nn-space-32) 100px}}
.film-detail p{background:var(--nn-paper-color) var(--nn-texture-paper);padding:var(--nn-space-12);box-shadow:var(--nn-elevation-1)}

/* 3차: 사진 원본 좌표에 손글씨와 밑선을 고정합니다. */
.film-detail p{background:none;padding:0;box-shadow:none;color:var(--nn-text)}
.film .photo-credit{position:absolute;z-index:2;right:var(--nn-space-24);bottom:var(--nn-space-8);font-size:var(--nn-font-body-sm);color:var(--nn-text);text-shadow:0 0 4px var(--nn-paper-color)}
.film .motion-toggle{bottom:var(--nn-space-48)}
.film-story{height:calc(min(900px,100svh) + 240px)}
@media(max-width:700px){.film-story{height:905px}.film .photo-credit{right:var(--nn-space-12);font-size:11px}.film .motion-toggle{bottom:var(--nn-space-32)}}
@media(prefers-reduced-motion:reduce){.film-story{height:auto}}

@media(min-width:700px) and (max-width:1099px){.film{height:calc(100vw * 2 / 3);min-height:512px}.film .wrap>div{max-width:48%}.film .film-detail{margin-top:var(--nn-space-16)}.film .wrap{padding-block:var(--nn-space-24)}.film .hand{font-size:var(--nn-reading-mobile-heading)}.film-story{height:calc(max(512px,100vw * 2 / 3) + 160px)}}
@media(max-width:699px){.film-detail p{margin-left:var(--nn-space-24)}}

/* 3b: 공통 토큰의 다음 글자 크기와 종이 좌표를 사용합니다. */
.nn-root{font-size:var(--nn-font-size-40);--nn-muted:var(--nn-color-text-primary);--nn-accent:var(--nn-color-action-hover)}
h1,.film h1{font-size:calc(var(--nn-reading-title) + var(--nn-font-size-10))}h2{font-size:var(--nn-font-size-90)}h3{font-size:var(--nn-font-size-60)}
p{ text-wrap:pretty }nav a,.nn-button,.menu-toggle:not([hidden]){font-size:var(--nn-font-size-40)}
.brand{font-size:var(--nn-font-size-80)}.brand span{font-size:var(--nn-font-size-90)}
.intro p,.hero p,summary{font-size:var(--nn-font-size-50)}
footer small,.credits{font-size:var(--nn-font-size-30);color:var(--nn-text)}
.footer-name{font-size:calc(var(--nn-reading-title) + var(--nn-font-size-10))}
.features-section{background:var(--nn-kraft-bg) var(--nn-kraft-texture);border-block:var(--nn-stroke-default) solid var(--nn-color-action-hover)}
#how{background:var(--nn-sheet-color) var(--nn-texture-paper);color:var(--nn-text)}
.faq-section{background:var(--nn-kraft-bg) var(--nn-kraft-texture)}
.film:after{display:none}.film>img{filter:brightness(1.5)}
.film .wrap{position:absolute;left:var(--paper-ui-x);top:var(--paper-ui-y);width:var(--paper-ui-w);height:auto;max-width:none;padding:0;margin:0;display:flex;gap:var(--nn-space-16);justify-content:start;align-items:start}
.film .wrap>div{max-width:100%;width:100%}.film .hand{font-size:calc(var(--nn-reading-title) + var(--nn-font-size-10));line-height:1.2;margin:0 0 var(--nn-space-16)}
.film .film-detail{margin:0;padding:0}.film-detail p{font-size:var(--nn-font-size-50);margin:0 0 var(--nn-space-16);line-height:var(--paper-rule)}
.film .motion-toggle{position:static;font-size:var(--nn-font-size-30);pointer-events:auto;margin:0}
.film .film-detail .nn-button{margin:0}.film h1{line-height:1.3}.film-detail br{display:none}
@media(max-width:1099px){
 .film{height:var(--paper-stage-height,1040px);min-height:0;max-height:none}.film-story{height:calc(var(--paper-stage-height,1040px) + 160px)}
 .film .wrap{gap:var(--nn-space-16)}.film .hand{font-size:var(--nn-font-size-80);margin-bottom:var(--nn-space-8)}
 .film h1{font-size:var(--nn-font-size-90)}.film-detail p{font-size:var(--nn-font-size-40);line-height:var(--paper-rule)}
}
@media(max-width:700px){
 h2{font-size:var(--nn-font-size-80)}h3{font-size:var(--nn-font-size-60)}
 .intro p,summary{font-size:var(--nn-font-size-40)}nav a{font-size:var(--nn-font-size-40)}
 .brand{font-size:var(--nn-font-size-70)}.brand span{font-size:var(--nn-font-size-80)}
 .film h1{font-size:var(--nn-font-size-90)}.film .wrap{padding:0;justify-content:start}
}
@media(prefers-reduced-motion:reduce){.film-story{height:auto}}

.film:after{display:block;background:var(--nn-paper-color);opacity:.5}
.film-detail p{max-width:none}.film-detail br{display:block}

/* 4차: 밝은 영역을 압축하고 공통 종이색을 얹습니다. */
.film{--notebook-brightness:1.12;--notebook-contrast:.78;--notebook-wash:.26;background:var(--nn-paper-color)}
.film>img{filter:brightness(var(--notebook-brightness)) contrast(var(--notebook-contrast))}
.film:after{background:var(--nn-paper-color);opacity:var(--notebook-wash);pointer-events:none}
.screen-section{padding-top:var(--nn-space-32)!important;background:var(--nn-page-bg) var(--nn-page-texture)}
.feature-row:last-child .fragment{display:block;width:100%;max-width:100%}
.film{--notebook-wash:.54}
.film-story{margin-bottom:-240px}
.screen-section{position:relative;z-index:3}
@media(max-width:1099px){.film-story{margin-bottom:-160px}}
@media(prefers-reduced-motion:reduce){.film-story{margin-bottom:0}}

/* 4b: 3b photo brightness 1.5, with its original paper wash. */
.film{--notebook-dim:.30;--notebook-wash:.5}
.film>img{filter:brightness(calc(1.5 * (1 - var(--notebook-dim))))}

/* 4c: 기능은 쓰는 순서로, 종이 설정은 독립된 재료 구역으로 보여 줍니다. */
.features-section{background:var(--nn-sheet-color) var(--nn-texture-paper);border:0}
.features-section .feature-row{grid-template-columns:5fr 6fr;padding:0;gap:var(--nn-space-48);margin-top:calc(var(--nn-space-80) + var(--nn-space-24))}
.features-section .feature-row>div{order:0}.features-section .fragment{margin:0;transform:none;max-width:100%;overflow:visible}
.features-section .feature-row p,.paper-feature p{max-width:550px}
.features-section .fragment img{height:auto;aspect-ratio:auto;object-fit:contain;box-shadow:var(--nn-elevation-2)}
.features-section .feature-diary{grid-template-columns:1fr;gap:var(--nn-space-32)}
.feature-diary>div{display:grid;grid-template-columns:1fr 1fr;gap:var(--nn-space-48)}.feature-diary p{margin:0}.feature-diary .fragment{width:85%;margin-inline:auto}
.features-section .feature-photo,.features-section .feature-media,.features-section .feature-pages{grid-template-columns:6fr 5fr}
.features-section .feature-photo>div,.features-section .feature-media>div,.features-section .feature-pages>div{order:2}
.feature-elements .fragment,.feature-photo .fragment,.feature-media .fragment,.feature-pages .fragment,.feature-export .fragment{width:100%;max-width:460px;justify-self:center}
.paper-feature{display:grid;grid-template-columns:6fr 5fr;gap:var(--nn-space-48);align-items:center;margin-top:calc(var(--nn-space-80) + var(--nn-space-24));margin-inline:calc(-1 * var(--nn-space-48));padding:var(--nn-space-80) var(--nn-space-48);background:var(--nn-editor-warm-300) var(--nn-texture-kraft);border-block:0;box-shadow:var(--nn-elevation-3)}
.paper-feature h3{font-size:var(--nn-font-size-90);line-height:1.2;letter-spacing:-.035em;margin-block:var(--nn-space-24)}
.paper-chip{display:inline-flex;background:var(--nn-color-action-hover);color:var(--nn-inverse);font-size:var(--nn-font-size-30);font-weight:var(--nn-font-weight-bold);padding:var(--nn-space-8) var(--nn-space-16);border-radius:var(--nn-radius-sm)}
@media(max-width:800px){
 .features-section .feature-row,.features-section .feature-photo,.features-section .feature-media,.features-section .feature-pages,.paper-feature{grid-template-columns:1fr;gap:var(--nn-space-32)}
 .features-section .feature-row>div,.features-section .feature-photo>div,.features-section .feature-media>div,.features-section .feature-pages>div{order:0}
 .feature-diary>div{display:block}.feature-diary p{margin-top:var(--nn-space-16)}.feature-diary .fragment{width:100%}
 .paper-feature{margin-inline:0;padding:var(--nn-space-48) var(--nn-space-24)}
 .features-section .feature-row,.paper-feature{margin-top:var(--nn-space-80)}
 .paper-feature h3{font-size:var(--nn-font-size-80)}
}
@media(max-width:700px){.paper-feature{margin-inline:calc(-1 * var(--nn-space-20));padding-inline:var(--nn-space-20)}.feature-row p br,.paper-feature p br{display:none}}

/* 4e: Shared button with a reserved footer gutter. */
.back-to-top{position:fixed;z-index:6;right:var(--nn-space-16);bottom:calc(var(--nn-space-16) + env(safe-area-inset-bottom,0px));width:48px;height:48px;padding:0;box-shadow:var(--nn-elevation-2)}
.back-to-top[hidden]{display:none}
.back-to-top svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
footer{padding-bottom:calc(var(--nn-space-80) + env(safe-area-inset-bottom,0px))}
footer .wrap{padding-right:calc(var(--nn-space-48) + var(--nn-space-32))}

/* 4f: one continuous, subtle crumpled-paper field behind the middle sections. */
#main{background-color:var(--nn-page-bg);background-image:url('ds/textures/paper-crumpled.svg');background-size:960px 960px;background-repeat:repeat}
#screen,#features,#how,#faq{background:transparent}