:root{
--color-vintage-cream:#ece0d2;
--color-bone-white:#f3f3f3;
--color-walnut-ink:#573d21;
--color-saddle-brown:#7c664d;
--color-peach-sand:#e1c6ab;
--color-terracotta-glow:#e3a36e;
--color-apricot-whisper:#efa164;
--color-vine-sage:#d8deb7;
--font-romie:'Romie', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-arial-narrow:'Arial Narrow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-gtstandard-m:'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--text-caption:12px;
--leading-caption:1.3;
--tracking-caption:0.36px;
--text-body-sm:14px;
--leading-body-sm:1.7;
--tracking-body-sm:0.42px;
--text-body:16px;
--leading-body:1.7;
--tracking-body:0.48px;
--text-subheading:20px;
--leading-subheading:1.5;
--tracking-subheading:0.6px;
--text-heading-sm:24px;
--leading-heading-sm:1.3;
--tracking-heading-sm:0.72px;
--text-heading:48px;
--leading-heading:1.2;
--tracking-heading:1.44px;
--text-display:64px;
--leading-display:1.2;
--tracking-display:1.92px;
--font-weight-regular:400;
--font-weight-bold:700;
--spacing-5:5px;
--spacing-7:7px;
--spacing-8:8px;
--spacing-10:10px;
--spacing-15:15px;
--spacing-17:17px;
--spacing-20:20px;
--spacing-24:24px;
--spacing-30:30px;
--spacing-36:36px;
--spacing-40:40px;
--spacing-48:48px;
--spacing-50:50px;
--spacing-60:60px;
--spacing-100:100px;
--spacing-110:110px;
--page-max-width:1200px;
--section-gap:80px;
--card-padding:24px;
--element-gap:10px;
--radius-cards:0px;
--radius-badges:0px;
--radius-inputs:0px;
--radius-buttons:0px;
--surface-canvas:#ece0d2;
--surface-card:#f3f3f3;
--surface-action-surface:#e1c6ab;
--font-reading:'Noto Serif KR',serif;--font-utility:'Noto Sans KR',sans-serif;--tracking-utility:0.043em;--leading-editorial:1.7;--hairline:1px;--focus-width:2px;--reader-width:768px;--header-height:72px;--motion-menu:240ms;}
@font-face{font-family:'Noto Serif KR';src:url('assets/fonts/serif.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans KR';src:url('assets/fonts/sans.woff') format('woff');font-weight:400 700;font-display:swap}
*{box-sizing:border-box}html{color-scheme:light;scroll-padding-top:var(--header-height)}
body{margin:0;background:var(--color-vintage-cream);color:var(--color-walnut-ink);font-family:var(--font-reading);font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body)}
button,a{touch-action:manipulation}button,summary{cursor:pointer}a{color:inherit;text-underline-offset:var(--spacing-5)}button{font:inherit}img,video{display:block;max-width:100%}img{height:auto}video{width:100%;aspect-ratio:16/9;background:var(--color-walnut-ink)}[hidden]{display:none!important}
:focus-visible{outline:var(--focus-width) solid var(--color-walnut-ink);outline-offset:var(--spacing-5)}h1,h2,p,figure{margin:0}h1,h2{text-wrap:balance;word-break:keep-all;overflow-wrap:break-word;font-weight:var(--font-weight-regular)}
h1{font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}h2{font-size:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
.skip{position:fixed;z-index:4;top:var(--spacing-8);left:var(--spacing-8);transform:translateY(-200%);background:var(--color-bone-white);padding:var(--spacing-10)}.skip:focus{transform:none}
header{position:sticky;top:0;z-index:3;background:var(--color-bone-white);border-bottom:var(--hairline) solid var(--color-saddle-brown)}.nav-bar{max-width:var(--page-max-width);margin:auto;padding:var(--spacing-17) var(--spacing-24);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-24)}
.brand{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);text-decoration:none;flex-shrink:0}.nav-links{display:flex;gap:var(--spacing-36);align-items:center}.nav-links a,.action,.utility,summary{font-family:var(--font-utility);font-size:var(--text-body-sm);line-height:var(--leading-body-sm);letter-spacing:var(--tracking-utility)}.nav-links a{text-decoration:none;padding:var(--spacing-7) 0}.nav-links a:focus-visible{text-decoration:underline}
.menu-toggle{display:none;border:0;background:none;color:inherit;padding:var(--spacing-10);min-width:var(--spacing-48);min-height:var(--spacing-48)}.menu-icon{display:block;width:var(--spacing-24);height:var(--spacing-20);position:relative}.menu-icon span{position:absolute;width:100%;height:var(--hairline);left:0;background:currentColor;transition:transform var(--motion-menu),opacity var(--motion-menu)}.menu-icon span:first-child{top:0}.menu-icon span:nth-child(2){top:50%}.menu-icon span:last-child{top:100%}header[data-open=true] .menu-icon span:first-child{transform:translateY(var(--spacing-10)) rotate(45deg)}header[data-open=true] .menu-icon span:nth-child(2){opacity:0}header[data-open=true] .menu-icon span:last-child{transform:translateY(calc(-1 * var(--spacing-10))) rotate(-45deg)}
.cinema{scroll-margin-top:var(--header-height)}.invitation{display:grid;position:relative;align-items:center}.hero-art{grid-area:1/1;width:100%;aspect-ratio:16/9;object-fit:contain}.hero-copy{grid-area:1/1;position:relative;z-index:1;margin-left:max(var(--spacing-48),calc((100% - var(--page-max-width))/2));width:max-content;max-width:36%;padding:var(--spacing-24);background:var(--color-vintage-cream);color:var(--color-walnut-ink);display:flex;align-items:flex-start;flex-direction:column;gap:var(--spacing-24)}.hero-copy p{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading)}.action{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;padding:var(--spacing-10) var(--spacing-24);min-height:var(--spacing-48);border:var(--hairline) solid var(--color-walnut-ink);border-radius:var(--radius-buttons);color:var(--color-walnut-ink);background:var(--color-peach-sand)}.hero-copy .action{margin-top:var(--spacing-10)}.mobile-read{display:none}
.player-status{font-family:var(--font-utility);font-size:var(--text-body-sm);line-height:var(--leading-body-sm);letter-spacing:var(--tracking-body-sm);text-align:center}.player-status:empty{display:none}.player-status:not(:empty){padding:var(--spacing-10)}.recovery{padding:var(--spacing-24);display:flex;justify-content:center;gap:var(--spacing-24);flex-wrap:wrap}
.webtoon{max-width:var(--page-max-width);margin:auto;padding:var(--section-gap) var(--spacing-24) 0;scroll-margin-top:var(--header-height)}.section-intro{text-align:center;margin-bottom:var(--spacing-40);display:grid;gap:var(--spacing-20)}.reader{width:100%;max-width:var(--reader-width);margin:auto;display:flex;flex-direction:column;gap:var(--spacing-24)}.reader img{width:100%;height:auto}.reader figure{border:var(--hairline) solid var(--color-saddle-brown)}
.closing{padding:var(--section-gap) var(--spacing-24);text-align:center;display:grid;gap:var(--spacing-24);justify-items:center}.closing p{font-size:var(--text-subheading);line-height:var(--leading-editorial);letter-spacing:var(--tracking-subheading)}details{max-width:var(--reader-width);width:100%;text-align:left;border-top:var(--hairline) solid var(--color-saddle-brown);border-bottom:var(--hairline) solid var(--color-saddle-brown)}summary{padding:var(--spacing-17) 0}.lyrics{padding:var(--spacing-20) 0;display:grid;gap:var(--spacing-24)}.lyrics p{font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body)}footer{padding:var(--spacing-24);text-align:center;font-family:var(--font-utility);font-size:var(--text-body-sm);line-height:var(--leading-body-sm);letter-spacing:var(--tracking-body-sm);border-top:var(--hairline) solid var(--color-saddle-brown)}
@media(max-width:768px){
 .nav-bar{padding:var(--spacing-8) var(--spacing-20);flex-wrap:wrap;gap:0}.enhanced .menu-toggle{display:block}.nav-links{width:100%;display:grid;gap:var(--spacing-10);padding:var(--spacing-20) 0}.enhanced .nav-links{position:absolute;top:100%;left:0;background:var(--color-bone-white);padding:var(--spacing-24);border-bottom:var(--hairline) solid var(--color-saddle-brown);visibility:hidden;opacity:0;transform:translateY(calc(-1 * var(--spacing-8)));transition:opacity var(--motion-menu),transform var(--motion-menu),visibility var(--motion-menu)}.enhanced header[data-open=true] .nav-links{visibility:visible;opacity:1;transform:none}.nav-links a{padding:var(--spacing-10)}
 .invitation{display:flex;flex-direction:column}.hero-copy{display:contents;color:var(--color-walnut-ink)}.hero-copy h1{order:0;padding-top:var(--spacing-48)}.hero-copy p{order:1;text-align:center;padding:var(--spacing-20)}.hero-art{order:2}.hero-copy .action{order:3;margin:var(--spacing-24) var(--spacing-20) 0;width:calc(100% - var(--spacing-40))}.mobile-read{display:block;order:4;margin-top:var(--spacing-24)}
 .webtoon{padding:var(--spacing-60) var(--spacing-20) 0}.section-intro h2{font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm);letter-spacing:var(--tracking-heading-sm)}.section-intro{margin-bottom:var(--spacing-24)}.reader{gap:var(--spacing-20)}.closing{padding:var(--spacing-60) var(--spacing-20)}
}
@media(min-width:769px) and (max-width:1024px){.hero-copy{margin-left:var(--spacing-30);gap:var(--spacing-15)}.hero-copy h1{font-size:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}}
@media(hover:hover) and (pointer:fine){.action:hover{background:var(--color-terracotta-glow)}.nav-links a:hover{text-decoration:underline}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

body p{ text-wrap:pretty }
@media(hover:none),(pointer:coarse){.action,.menu-toggle,.nav-links a{min-height:var(--spacing-48)}}