@font-face{font-family:Gowun;src:url('assets/GowunBatang-Regular.woff') format('woff');font-display:swap;font-weight:400}
@font-face{font-family:Pretendard;src:url('assets/Pretendard-Regular.woff') format('woff');font-display:swap;font-weight:400}
:root{font-family:Pretendard,system-ui,sans-serif;color:#25192d;background:#ece7ef;font-synthesis:none;--ink:#25192d;--secondary:#493245;--rule:#9c8096;--button:#302235;--paper:rgba(255,255,255,.55)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 13% 6%,#efdae6 0,transparent 50%),radial-gradient(ellipse at 96% 60%,#d9ddeb 0,transparent 56%),#ece7ef}
a{color:inherit;text-underline-offset:4px}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
button:disabled{cursor:default;opacity:.4}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #694069;outline-offset:5px}
svg{width:21px;height:21px;flex-shrink:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-70px;left:14px;z-index:20;padding:12px;background:#fff}
.skip-link:focus{top:12px}
.site-header{max-width:1260px;margin:auto;min-height:100px;display:flex;align-items:center;padding:22px 40px;gap:25px}
.brand{font-family:Gowun,serif;font-size:1.75rem;text-decoration:none;letter-spacing:.06em}
.album-subtitle{font-family:Gowun,serif;font-size:.94rem;letter-spacing:.02em}
.site-header nav{margin-left:auto;display:flex;gap:27px;font-size:.875rem}
.site-header nav a{text-decoration:none;padding:8px 0}
.site-header nav a[aria-current=page]{border-bottom:1px solid var(--ink)}
main{max-width:1220px;margin:0 auto;padding:24px 40px 72px;outline:none}
.album-spread{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start;box-shadow:0 20px 55px #2b18391c}
.front-sleeve{position:relative;min-width:0;aspect-ratio:1;background:#e6d4e8}
.cover-art{display:block;width:100%;height:100%;object-fit:cover}
.cover-subtitle{position:absolute;bottom:6.7%;width:100%;padding:0 6%;margin:0;text-align:center;font-family:Gowun,serif;font-size:clamp(.85rem,1.4vw,1.08rem);letter-spacing:.055em;color:#21111f}
.track-sleeve{padding:7%;background:#e7cee3 url('assets/tracklist-background.webp') center/cover no-repeat;display:flex;flex-direction:column;align-self:stretch;min-width:0;min-height:0}
.track-sleeve>*{flex-shrink:0}
.sleeve-heading{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid var(--rule);gap:16px}
.sleeve-heading h2{font:400 clamp(1.6rem,2.6vw,2.15rem)/1.2 Gowun,serif;margin:0;letter-spacing:.015em}
.sleeve-heading>span{font-family:Gowun,serif;font-size:1rem}
.track-list{list-style:none;padding:15px 0 13px;margin:0;flex:1 0 auto}
.track-list li{margin:0}
.track-select{display:grid;grid-template-columns:26px 1fr;gap:12px;width:100%;text-align:left;border:0;background:transparent;padding:5px 0;min-height:51px;align-items:center;border-radius:0}
.track-select:hover .track-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.track-index{font-size:.81rem;letter-spacing:.06em;color:var(--secondary)}
.track-credit{display:block;font-size:.875rem;line-height:1.3;color:var(--secondary);margin-bottom:2px}
.track-name{font-family:Gowun,serif;font-size:1.125rem;line-height:1.35;overflow-wrap:anywhere}
.track-artist{display:inline;font-family:Pretendard,system-ui,sans-serif;font-size:.81rem;white-space:nowrap;margin-left:5px;color:var(--secondary)}
.sleeve-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:13px;border-top:1px solid #92708a6b}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 19px;min-height:44px;background:var(--button);color:#fff7ff;border:1px solid var(--button);font-size:.875rem;border-radius:3px}
.primary-button:hover{background:#4a3150}
.track-count{font-size:.75rem;letter-spacing:.1em;white-space:nowrap;color:var(--secondary)}
.loading-copy,.album-error,.noscript{line-height:1.7;font-size:1rem;padding:12px 0}
.reading-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start}
.reading-page{position:relative;isolation:isolate;padding:42px 48px 30px;background:#edf0f4;box-shadow:0 12px 42px #21122d16;min-width:0;color:var(--essay-ink,#1d2030)}
/* A single viewport-sized painting follows the text without tiling or stretching. */
.reading-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.reading-art::before{content:"";display:block;position:sticky;top:0;height:100vh;height:100lvh;max-height:100%;background:var(--page-art) center/cover no-repeat}
.back-link{font-size:.875rem;color:#493245;text-decoration:none;display:inline-block;margin-bottom:34px}
.back-link:hover{text-decoration:underline}
.track-meta{margin:0 0 25px;font-size:.81rem;letter-spacing:.025em;line-height:1.6;overflow-wrap:anywhere;color:var(--essay-ink)}
.reading-page h2{font:400 clamp(1.7rem,2.6vw,2.5rem)/1.45 Gowun,serif;letter-spacing:.01em;margin:0 0 19px;overflow-wrap:anywhere;outline:none}
.essay-author{font:400 1rem/1.6 Gowun,serif;margin:0 0 30px;padding-bottom:24px;border-bottom:1px solid #51455c66}
.essay-body{font:400 1.0625rem/2 Gowun,serif;letter-spacing:0;word-break:normal;overflow-wrap:anywhere}
.essay-body p{margin:0 0 1.35em;text-indent:1em}
.essay-body .dialogue{white-space:pre-line}
.essay-body .lyrics{margin:2.25em 0;white-space:pre-line;text-indent:0;line-height:2.15}
.essay-body .poem{white-space:pre-line;line-height:2.15;text-indent:1em}
.essay-pagination{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #51455c66;margin-top:40px;padding-top:22px;font-family:Pretendard,system-ui,sans-serif;font-size:.875rem}
.essay-pagination button{border:0;background:transparent;padding:10px 0;min-height:44px}
.essay-pagination button:hover:not(:disabled){text-decoration:underline;text-underline-offset:5px}
.essay-pagination>span{font-size:.81rem;letter-spacing:.08em}
.listening-column{position:sticky;top:24px;min-width:0}
.player-panel{padding:23px;background:#f9f5fbc9;border:1px solid #67506b2e;box-shadow:0 8px 26px #2410320a}
.playing-track{margin:0 0 12px;font-size:.75rem;letter-spacing:.11em}
.player-panel h3{font:400 1.4rem/1.45 Gowun,serif;margin:0 0 6px;overflow-wrap:anywhere}
.playing-artist{margin:0 0 20px;font-size:.875rem;color:#493245}
.video-container{min-height:200px;background:#211c26;width:100%;aspect-ratio:1.42;overflow:hidden}
.video-container iframe{border:0;display:block;width:100%;height:100%;min-height:200px}
.player-button{width:100%;margin-top:18px}
.player-status{font-size:.875rem;line-height:1.7;min-height:2.7em;margin:14px 0 8px;overflow-wrap:anywhere}
.youtube-link{font-size:.875rem;display:inline-block;min-height:35px;padding:8px 0}
.reader-tracklist{border-top:1px solid #8b738b65;margin-top:25px;padding-top:10px}
.reader-tracklist a{display:grid;grid-template-columns:23px 1fr;gap:10px;padding:12px 8px;text-decoration:none;font-size:.875rem;line-height:1.5}
.reader-tracklist a>span:first-child{font-size:.75rem;letter-spacing:.02em}
.reader-tracklist a[aria-current=page]{background:#4f2f5314;border-left:2px solid #493245;padding-left:6px}
.reader-tracklist a:hover{background:#4f2f530d}
.mini-author{display:block;font-size:.75rem;color:#493245;margin-top:2px}
.thanks-sleeve{position:relative;width:min(100%,570px);margin:0 auto;aspect-ratio:1;background:#e7cee3 url('assets/tracklist-background.webp') center/cover;box-shadow:0 20px 55px #2b18391c;text-align:center;padding:55px 45px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:550px}
.thanks-sleeve h2{font:400 2rem/1.4 Gowun,serif;letter-spacing:.04em;margin:0 0 33px;outline:none}
.thanks-sleeve ul{padding:0;margin:0;list-style:none;font:400 1.25rem/2.3 Gowun,serif;letter-spacing:.05em}
.and-you{font:400 1.6rem/1.4 Gowun,serif;letter-spacing:.03em;margin:30px 0 0}
.thanks-return{font-size:.875rem;margin-top:38px;padding:8px}
@media(max-width:1099px){.album-spread{grid-template-columns:1fr;max-width:520px;margin:auto;gap:20px;box-shadow:none}.front-sleeve,.track-sleeve{box-shadow:0 12px 38px #2b183918}}
@media(max-width:1000px){.site-header{padding-left:26px;padding-right:26px}main{padding-left:26px;padding-right:26px}.track-sleeve{padding:7%}.sleeve-heading{padding-bottom:15px}.track-select{padding:8px 0;gap:8px;grid-template-columns:21px 1fr}.track-credit{font-size:.81rem}.track-name{font-size:1.02rem}.reading-layout{grid-template-columns:minmax(0,1fr) 280px;gap:20px}.reading-page{padding:32px}.player-panel{padding:16px}.track-count{display:none}}
@media(max-width:760px){.site-header{min-height:90px;padding:20px;gap:15px;flex-wrap:wrap}.album-subtitle{order:3;width:100%;font-size:.81rem}.site-header nav{gap:20px}main{padding:16px 20px 45px}.album-spread{grid-template-columns:1fr;max-width:520px;margin:auto;box-shadow:none;gap:20px}.front-sleeve{box-shadow:0 12px 38px #2b183918}.cover-subtitle{font-size:clamp(.85rem,2.6vw,1.05rem)}.track-sleeve{padding:32px;box-shadow:0 12px 38px #2b183918}.sleeve-heading{padding-bottom:21px}.sleeve-heading h2{font-size:2rem}.track-list{padding-top:15px;padding-bottom:20px}.track-select{padding:12px 0;gap:12px;grid-template-columns:26px 1fr}.track-name{font-size:1.23rem}.track-credit{font-size:.875rem}.track-count{display:block}.reading-layout{display:flex;flex-direction:column;gap:22px}.reading-page{order:2;width:100%;padding:28px 27px}.listening-column{position:static;order:1;width:100%}.player-panel{padding:20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,1fr);column-gap:20px}.playing-track,.player-panel h3,.playing-artist,.player-button,.player-status,.youtube-link{grid-column:1}.playing-track{margin-bottom:8px}.playing-artist{margin-bottom:10px}.player-panel h3{font-size:1.25rem}.video-container{grid-column:2;grid-row:1 / span 6;min-height:200px;align-self:center;aspect-ratio:1.3}.player-button{margin-top:10px}.player-status{margin:10px 0 0;font-size:.875rem;min-height:auto}.youtube-link{margin-top:3px}.reader-tracklist{display:none}.reading-page h2{font-size:1.9rem}.back-link{margin-bottom:25px}.essay-body{font-size:1.0625rem}.thanks-sleeve{padding:55px 28px 40px}.thanks-sleeve h2{font-size:1.9rem}.thanks-sleeve ul{font-size:1.15rem}}
@media(max-width:490px){.site-header{padding-left:18px;padding-right:18px}.brand{font-size:1.6rem}main{padding-left:14px;padding-right:14px}.track-sleeve{padding:27px}.track-name{font-size:1.17rem}.track-artist{font-size:.81rem}.player-panel{display:block;padding:23px}.video-container{aspect-ratio:1.5;min-height:200px;margin-top:17px}.player-panel h3{font-size:1.4rem}.player-button{margin-top:16px}.player-status{margin-top:12px}.youtube-link{margin-top:8px}.reading-page{padding:27px 24px}.reading-page h2{font-size:1.7rem}.thanks-sleeve{min-height:540px}}
@media(prefers-reduced-motion:no-preference){.primary-button{transition:background .16s}.track-select,.reader-tracklist a{transition:background .16s}.reading-page{animation:unfold .26s ease-out}@keyframes unfold{from{opacity:.5;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}}