:root{--ink:#142d42;--muted:#4c6170;--blue:#155a96;--paper:#f7f6f0;--white:#fff;--line:#d8dfdf;--orange:#f5801f;--red:#ed1c24;--yellow:#edd300;--green:#3eb54b;--teal:#3cb2ba;--gutter:clamp(22px,4vw,64px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;background:var(--paper)}
body{margin:0;font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;color:var(--ink);line-height:1.8;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-underline-offset:5px}
img{display:block;max-width:100%;height:auto}
button{font:inherit}
::selection{background:#cde7ec;color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.skip-link{position:fixed;z-index:200;top:12px;left:18px;padding:8px 18px;background:var(--ink);color:white;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.site-header{position:fixed;z-index:90;top:0;left:0;right:0;padding:14px var(--gutter);pointer-events:none}
.nav-shell{max-width:1440px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:40px;display:flex;align-items:center;gap:24px;padding:10px 12px 10px 18px;pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:12px;font-weight:850;letter-spacing:.12em;line-height:1.2}
.brand-mark{display:grid;place-items:center;width:48px;height:28px;flex-shrink:0}
.brand-mark img{position:static;width:100%;height:auto;object-fit:contain}
.brand small{display:block;margin-top:4px;font-size:8px;letter-spacing:.15em}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:12px;font-weight:750}
.nav-links a{text-decoration:none}
.back-link{background:var(--ink);color:white;text-decoration:none;padding:9px 17px;border-radius:30px;font-size:11px;font-weight:750}
.essay-hero{padding:150px var(--gutter) 70px;max-width:1568px;margin:auto}
.collab-line{display:flex;align-items:center;gap:15px;margin-bottom:38px;font-size:11px;font-weight:800;letter-spacing:.12em}
.collab-line img{width:108px;height:auto}
.collab-line b{font-size:20px;font-weight:400;color:#81929d}
.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,80px);align-items:center}
.eyebrow,.kicker{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--blue);text-transform:uppercase}
.essay-hero h1{font-family:Batang,"Noto Serif KR",Georgia,serif;font-weight:400;font-size:clamp(46px,5.4vw,83px);line-height:1.2;letter-spacing:-.065em;margin:22px 0 28px}
.essay-hero h1 em{font-style:normal;color:var(--blue)}
.hero-deck{max-width:600px;color:var(--muted);font-size:clamp(16px,1.35vw,19px);line-height:1.95;margin:0}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-size:10px;letter-spacing:.08em;color:var(--muted)}
.hero-art{margin:0;background:white;border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.hero-art img{width:100%;aspect-ratio:3/2;object-fit:contain}
figcaption{font-size:12px;color:var(--muted);line-height:1.8}
.hero-art figcaption{padding:18px 24px;border-top:1px solid var(--line)}
.intro-band{padding:60px var(--gutter);background:var(--blue);color:white}
.intro-inner{max-width:1160px;margin:auto;display:grid;grid-template-columns:1.35fr 1fr;gap:60px;align-items:center}
.intro-inner blockquote{margin:0;font-family:Batang,"Noto Serif KR",Georgia,serif;font-size:clamp(26px,3vw,43px);line-height:1.6;letter-spacing:-.04em}
.intro-inner p{margin:0;font-size:14px;color:#e1edf7;line-height:1.95}
.reading-map{max-width:1200px;margin:0 auto;padding:60px var(--gutter) 30px}
.reading-map summary{cursor:pointer;font-size:19px;font-weight:750;padding:18px 0;border-bottom:1px solid var(--ink)}
.toc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin:18px 0 0;padding:0;list-style:none}
.toc-grid a{display:block;padding:12px 0;text-decoration:none;font-size:13px;border-bottom:1px solid var(--line)}
.toc-grid span{color:var(--blue);font-size:10px;margin-right:8px}
.essay-body{max-width:1200px;padding:0 var(--gutter);margin:auto}
.chapter{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(32px,5vw,76px);padding:75px 0;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.chapter-side{align-self:start;position:sticky;top:112px}
.chapter-number{display:block;font-family:Georgia,serif;font-size:54px;line-height:1;color:var(--blue)}
.chapter-side small{display:block;margin-top:14px;font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.chapter-content{min-width:0}
.chapter h2{margin:0 0 30px;font-family:Batang,"Noto Serif KR",Georgia,serif;font-weight:400;font-size:clamp(29px,3.2vw,46px);line-height:1.45;letter-spacing:-.045em}
.chapter h3{margin:36px 0 14px;font-size:21px;letter-spacing:-.03em;line-height:1.6}
.chapter p{margin:0 0 23px;font-size:17px;line-height:2.03;color:#334e60;letter-spacing:-.012em}
.chapter strong{color:var(--ink);font-weight:750}
.pullquote{margin:36px 0;padding:22px 0 22px 24px;border-left:3px solid var(--teal);font-family:Batang,"Noto Serif KR",Georgia,serif;font-size:clamp(22px,2.4vw,31px);line-height:1.7;color:var(--blue);letter-spacing:-.03em}
.note{padding:22px 26px;margin:30px 0;background:#eaf2f4;border-radius:3px}
.note b{display:block;color:var(--blue);font-size:11px;letter-spacing:.1em;margin-bottom:9px}
.note p{font-size:14px;line-height:1.85;margin:0}
.source-note{font-size:12px!important;color:#647788!important;line-height:1.85!important}
.source-note a{color:var(--blue)}
.character-sheet{margin:35px 0;background:white;padding:25px 16px;border:1px solid var(--line);border-radius:12px}
.character-sheet figcaption{margin-top:18px;text-align:center}
.role-list{list-style:none;margin:25px 0 30px;padding:0}
.role-list li{padding:19px 0 19px 20px;border-left:5px solid var(--role);border-bottom:1px solid var(--line);margin:0 0 10px}
.role-list h3{margin:0 0 5px;font-size:18px}
.role-list p{margin:0;font-size:15px;line-height:1.85}
.flow{list-style:none;padding:0;margin:32px 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.flow li{position:relative;border-top:3px solid var(--teal);padding:16px 10px;background:white;font-size:13px}
.flow small{display:block;color:var(--blue);font-size:10px;margin-bottom:8px}
.flow strong{display:block;margin-bottom:7px;font-size:16px}
.table-wrap{overflow-x:auto;margin:30px 0;border:1px solid var(--line);border-radius:6px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:13px;line-height:1.8}
caption{text-align:left;padding:17px 18px;font-weight:750;font-size:14px;background:white}
th,td{padding:16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{background:#e9eff3;font-size:12px;font-weight:750}
tbody tr:last-child td{border-bottom:0}
.chapter-with-comic{row-gap:30px}
.chapter-with-comic>.chapter-side{position:static}
.chapter-continuation{grid-column:2}
.comic-feature{grid-column:1/-1;margin:0;background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.comic-feature-label{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding:19px 26px;border-bottom:1px solid var(--line);font-size:11px;font-weight:750;letter-spacing:.06em;color:var(--blue)}
.comic-feature-label span:last-child{font-weight:400;color:var(--muted)}
.comic-image-link{display:block;padding:12px;background:#fffcf5}
.comic-image-link:focus-visible{outline-offset:-5px}
.comic-image-link img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.illustration-wide .comic-image-link img{aspect-ratio:auto}
.comic-feature figcaption{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;padding:30px;border-top:1px solid var(--line)}
.comic-feature figcaption .kicker{font-size:10px;font-weight:800;line-height:1.6;color:var(--blue);letter-spacing:.1em;margin:0 0 12px}
.comic-feature figcaption h3{font-family:Batang,"Noto Serif KR",Georgia,serif;font-size:clamp(22px,2.5vw,30px);font-weight:400;line-height:1.6;margin:0 0 16px}
.comic-feature figcaption p{font-size:14px;line-height:1.9;margin:0}
.comic-application{align-self:start;border-left:2px solid var(--teal);padding-left:22px}
.comic-application b{display:block;font-size:12px;color:var(--blue);margin-bottom:12px}
.comic-application a{display:inline-block;margin-top:20px;padding:5px 0;color:var(--blue);font-size:12px;font-weight:750}
.application-examples{margin:36px 0;padding:26px;background:#eaf2f4;border:1px solid var(--line);border-radius:12px}
.application-examples>figcaption{font-size:12px;margin-bottom:24px}
.application-examples>figcaption>span{display:block;font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--blue);margin-bottom:12px}
.application-examples>figcaption>strong{display:block;font-family:Batang,"Noto Serif KR",Georgia,serif;font-weight:400;font-size:26px;line-height:1.6;margin-bottom:12px}
.application-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.application-card{min-width:0;padding:24px 20px;background:white;border-top:5px solid var(--blue)}
.application-card.supplies{border-top-color:var(--teal)}
.chapter .application-tag{font-size:10px;font-weight:750;color:var(--blue);letter-spacing:.04em;line-height:1.6;margin:0 0 20px}
.chapter .application-card h3{font-size:21px;line-height:1.6;margin:0 0 24px}
.application-card ol{list-style:none;padding:0;margin:0}
.application-card li{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:12px;line-height:1.8;color:var(--muted)}
.application-card li>span{font-size:11px;font-weight:800;color:var(--blue)}
.application-card li strong{display:block;font-size:13px;margin-bottom:3px}
.application-card dl{margin:0;font-size:12px;line-height:1.8}
.application-card dl>div{padding:10px 0;border-top:1px solid var(--line)}
.application-card dt{font-size:13px;font-weight:750;color:var(--ink)}
.application-card dd{margin:3px 0 0;color:var(--muted)}
.chapter .application-footnote{border-top:1px solid var(--line);padding-top:16px;margin:18px 0 0;font-size:11px;line-height:1.8;color:var(--muted)}
.storyboard{list-style:none;padding:0;margin:32px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;counter-reset:panel}
.storyboard li{background:white;padding:23px;border:1px solid var(--line);border-radius:10px;counter-increment:panel}
.storyboard li::before{content:"CUT 0" counter(panel);display:block;font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--blue);margin-bottom:12px}
.storyboard h3{margin:0 0 10px;font-size:17px}
.storyboard p{font-size:14px;line-height:1.9;margin:0 0 12px}
.storyboard .dialogue{font-weight:700;color:var(--ink);margin-bottom:0}
.action-link{display:inline-flex;align-items:center;gap:15px;text-decoration:none;color:white;background:var(--blue);padding:12px 20px;border-radius:30px;font-size:13px;font-weight:700;margin:6px 0 18px}
.action-link.secondary{color:var(--blue);background:transparent;border:1px solid var(--blue)}
.draft-card{border:1px solid var(--blue);padding:30px;margin:30px 0;background:white}
.draft-card .kicker{margin:0 0 15px;font-size:10px}
.draft-card h3{margin:0 0 18px;font-size:24px}
.draft-card p{font-size:15px}
.draft-card p:last-child{margin:0}
.checklist{padding-left:22px;margin:20px 0 25px;color:#334e60;font-size:15px;line-height:1.95}
.checklist li{padding:5px 0 5px 3px}
.timeline{list-style:none;padding:0;margin:30px 0}
.timeline li{border-left:2px solid var(--teal);padding:0 0 28px 24px}
.timeline h3{margin:0 0 8px;font-size:19px}
.timeline p{font-size:15px;margin:0}
.ending{padding:80px var(--gutter);margin-top:60px;background:#e4eef0}
.ending-inner{max-width:850px;margin:auto}
.ending p{font-family:Batang,"Noto Serif KR",Georgia,serif;font-size:clamp(27px,3.4vw,43px);line-height:1.6;letter-spacing:-.04em;margin:0 0 30px}
.ending small{display:block;font-size:14px;line-height:1.9;color:var(--muted)}
.references{max-width:1040px;margin:auto;padding:55px var(--gutter);font-size:13px;color:var(--muted)}
.references h2{font-size:15px;color:var(--ink);margin:0 0 16px}
.references p{margin:10px 0;line-height:1.9}
.article-footer{padding:32px var(--gutter);background:var(--ink);color:white}
.footer-inner{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.footer-logo{width:115px;height:auto}
.footer-meta{text-align:right;font-size:10px;line-height:1.9;letter-spacing:.08em}
.floating-top{position:fixed;top:50%;right:16px;z-index:80;transform:translateY(-50%);height:42px;width:42px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:white;border:1px solid white;font-size:21px;cursor:pointer}
.floating-top[hidden]{display:none}
@media(max-width:1050px){.hero-grid{grid-template-columns:1fr 1fr;gap:30px}.essay-hero h1{font-size:54px}.chapter{grid-template-columns:105px minmax(0,1fr);gap:35px}.flow{grid-template-columns:1fr}.flow li{display:grid;grid-template-columns:32px 90px 1fr;gap:12px;padding:13px 16px;align-items:start}.flow small,.flow strong{margin:0}.intro-inner{gap:35px}.toc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.nav-links,.brand small{display:none}.nav-shell{gap:14px}.back-link{margin-left:auto}.essay-hero{padding-top:125px}.collab-line{margin-bottom:22px}.hero-grid{grid-template-columns:1fr;gap:36px}.essay-hero h1{font-size:clamp(42px,8.8vw,64px)}.hero-art{max-width:650px}.hero-deck{font-size:16px}.intro-inner{grid-template-columns:1fr;gap:27px}.intro-band{padding-top:45px;padding-bottom:45px}.chapter{grid-template-columns:1fr;gap:24px;padding:50px 0}.chapter-side{position:static;display:flex;align-items:center;gap:18px}.chapter-number{font-size:37px}.chapter-side small{margin:0}.chapter h2{font-size:31px}.chapter p{font-size:16px}.chapter .source-note{font-size:12px}.chapter .note p,.chapter .storyboard p{font-size:14px}.chapter .timeline p,.chapter .draft-card p,.chapter .role-list p{font-size:15px}.role-list h3{font-size:17px}.reading-map{padding-top:30px}.toc-grid{grid-template-columns:1fr}.storyboard{grid-template-columns:1fr}.note,.draft-card{padding:22px}.floating-top{right:8px;width:36px;height:36px}.footer-inner{align-items:flex-start;flex-direction:column}.footer-meta{text-align:left}.character-sheet{padding:20px 9px}.flow li{grid-template-columns:26px 76px 1fr;gap:8px}.flow strong{font-size:14px}.references{padding-top:40px;padding-bottom:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:760px){.chapter-continuation{grid-column:1}.comic-feature-label{padding:16px 18px}.comic-image-link{padding:5px}.comic-feature figcaption{grid-template-columns:1fr;gap:24px;padding:22px 18px}.comic-feature figcaption h3{font-size:23px}.comic-feature figcaption p{font-size:14px}.application-examples{padding:20px 16px}.application-grid{grid-template-columns:1fr}.application-examples>figcaption>strong{font-size:24px}}
@media(min-width:761px) and (max-width:1050px){.application-grid{grid-template-columns:1fr}}
@media print{.comic-feature{max-width:160mm;margin:20px auto;break-inside:auto}.comic-feature-label{padding:10px 16px}.comic-image-link{max-width:135mm;margin:auto}.comic-feature figcaption{display:block;padding:16px;break-inside:avoid}.comic-feature figcaption h3{font-size:16pt}.comic-application{margin-top:16px}.comic-application a{display:none}.application-examples{break-inside:auto}.application-grid{grid-template-columns:1fr 1fr}.application-card{break-inside:avoid}}
@media print{@page{margin:17mm}.site-header,.reading-map,.floating-top,.skip-link,.action-link,.article-footer{display:none!important}html,body{background:white;color:black;font-size:11pt;scroll-behavior:auto}.essay-hero,.essay-body,.references{max-width:none;padding:0}.essay-hero{padding-bottom:24px}.hero-grid{display:block}.essay-hero h1{font-size:34pt}.hero-art{max-width:125mm;margin:20px 0}.hero-meta{margin:15px 0}.intro-band,.ending{background:white;color:black;padding:24px 0}.intro-inner{display:block}.intro-inner p{color:#333;margin-top:20px}.intro-inner blockquote{font-size:20pt}.chapter{display:block;padding:30px 0;break-inside:auto}.chapter-side{position:static;display:flex;align-items:center;gap:15px;margin-bottom:18px}.chapter-number{font-size:24pt}.chapter h2{font-size:23pt;break-after:avoid}.chapter h3{break-after:avoid}.chapter p{font-size:11pt;line-height:1.9;orphans:3;widows:3}.note,.storyboard li,.draft-card,figure{break-inside:avoid}.table-wrap{overflow:visible}table{min-width:0;font-size:9pt}th,td{padding:8px}.scenario-figure{max-width:140mm}.ending p{font-size:22pt}.character-sheet{max-width:175mm}.storyboard{display:block}.storyboard li{margin-bottom:14px}}