/* 스토리 목록 */
.stories{padding:clamp(90px,16vh,170px) 0 clamp(60px,10vh,110px)}
.st-list{list-style:none}
.st-list li{border-top:1px solid color-mix(in srgb,currentColor 32%,transparent)}
.st-list li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 32%,transparent)}
.st-list a{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:baseline;padding:clamp(14px,1.5vw,24px) var(--g)}
.st-no{grid-column:1 / span 1}
.st-t{grid-column:2 / span 9;font-size:clamp(25px,3.7vw,60px);line-height:1.18;letter-spacing:-.03em;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.st-l{grid-column:11 / span 2;text-align:right}
.st-list img{position:absolute;right:calc(var(--g) + 12vw);top:50%;width:21vw;height:14vw;transform:translateY(-50%);opacity:0;clip-path:inset(50% 0);transition:opacity .25s,clip-path .55s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:2}
@media (hover:hover) and (min-width:761px){
  .st-list a:hover .st-t{transform:translateX(1.2vw)}
  .st-list a:hover img{opacity:1;clip-path:inset(0 0)}
}
@media (hover:none),(max-width:760px){
  .st-list a{display:block;padding:14px var(--g) 18px}
  .st-no{display:inline-block;margin-right:10px}
  .st-l{display:inline-block}
  .st-t{display:block;margin:8px 0 14px;font-size:27px}
  .st-list img{position:static;transform:none;opacity:1;clip-path:none;width:100%;height:auto;aspect-ratio:3/2}
}

.st-nav{display:flex;flex-wrap:wrap;gap:8px 22px;padding:0 var(--g) clamp(36px,6vh,64px)}
.st-nav a{text-decoration:underline;text-underline-offset:.3em}
.st-cat{padding-bottom:clamp(44px,8vh,90px);scroll-margin-top:20px}
.st-cat-h{display:flex;justify-content:space-between;font-weight:400;padding:0 var(--g) 10px}

:root{--g:clamp(16px,2.4vw,36px);--display:"Song Myung","AppleMyungjo","Nanum Myeongjo",serif;--body:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.85;word-break:keep-all;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.mono{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.02em}
.disp{font-family:var(--display);font-weight:400;letter-spacing:-.02em}
.todo{text-decoration:none}
.draft .todo{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:.28em}
.draft-only{display:none}
.draft .draft-only{display:block}
#grain{position:fixed;inset:-50%;z-index:40;pointer-events:none;opacity:.075;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:var(--g)}
.brand{font-family:var(--display);font-size:17px;line-height:1.1}
.art-head{padding:clamp(70px,14vh,150px) var(--g) clamp(36px,6vh,64px)}
.art-meta{display:flex;gap:18px;margin-bottom:clamp(18px,3vh,30px)}
.art-head h1{font-size:clamp(40px,8.2vw,136px);line-height:1.1;letter-spacing:-.035em;max-width:13em}
.list-head{padding-bottom:clamp(44px,8vh,90px)}
.art-fig{padding:0 var(--g)}
.art-fig img{aspect-ratio:3/2;height:auto;max-height:92vh}
.art-fig figcaption{padding-top:8px;opacity:.72}
.art-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:clamp(60px,11vh,120px) var(--g) clamp(90px,16vh,170px)}
.art-body>*{grid-column:6 / span 6}
.art-body p+p{margin-top:1.25em}
.art-body .lead{grid-column:2 / span 9;font-size:clamp(25px,3.3vw,52px);line-height:1.34;letter-spacing:-.025em;margin-bottom:clamp(44px,8vh,90px)}
.art-body blockquote{grid-column:2 / span 9;font-size:clamp(25px,3.3vw,52px);line-height:1.34;letter-spacing:-.025em;margin:clamp(44px,8vh,90px) 0}
.next{display:block;padding:clamp(44px,8vh,90px) var(--g);background:var(--bg2);color:var(--ink2)}
.next-t{display:block;margin-top:14px;font-size:clamp(32px,6vw,100px);line-height:1.14;letter-spacing:-.03em}
.foot{padding:var(--g);display:flex;flex-wrap:wrap;gap:4px 28px;justify-content:space-between;font-size:13px;line-height:1.6}
@media (max-width:760px){
  body{font-size:16px}
  .art-body{display:block}
  .art-body .lead{margin-bottom:40px}
  .art-body blockquote{margin:40px 0}
}