/* Shared navigation for this independent study. Original logo is displayed without modifying its file. */
.site-header{position:fixed;inset:0 0 auto;z-index:20;height:96px;color:#e8e4d9;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;background:linear-gradient(#111310e8,#11131000)}
.header-inner{width:calc(100% - 96px);max-width:1340px;height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.header-brand{display:block;color:inherit;flex-shrink:0;width:136px;line-height:0;border-radius:4px}
.brand-art{display:block;width:100%;height:auto;overflow:hidden;}
.header-nav{display:flex;align-items:center;gap:34px;white-space:nowrap;font-size:15px;letter-spacing:-.02em;font-weight:500}
.header-nav a{position:relative;display:block;color:inherit;text-decoration:none;padding:14px 0;line-height:1.5;opacity:.84;transition:opacity .2s}
.header-nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.header-nav a:hover,.header-nav a[aria-current="page"]{opacity:1}
.header-nav a:hover::after,.header-nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-brand:focus-visible,.header-nav a:focus-visible,.back-link:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:2px}
.header-page{margin:0;background:#f8f6f0;color:#343b32;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all}
.header-page *{box-sizing:border-box}
.header-page .site-header{color:#343b32;background:#f8f6f0ed;backdrop-filter:blur(12px)}

.editorial-main{width:calc(100% - 64px);max-width:760px;margin:0 auto;padding:190px 0 110px;min-height:100svh}
.editorial-eyebrow{margin:0 0 26px;color:#757c70;font-size:13px;letter-spacing:.07em}
.editorial-main h1{font-family:"AppleMyungjo","Batang","Noto Serif KR",serif;font-size:clamp(32px,4.5vw,52px);font-weight:400;line-height:1.55;letter-spacing:-.035em;margin:0 0 40px}
.editorial-main p:not(.editorial-eyebrow){max-width:600px;font-size:17px;line-height:2;color:#60665c;margin:0 0 22px}
.editorial-main .back-link{display:inline-block;margin-top:36px;color:#343b32;text-decoration:none;border-bottom:1px solid #a3aa99;padding-bottom:7px;font-size:14px}
@media(max-width:700px){.site-header{height:78px}.header-inner{width:calc(100% - 40px);gap:14px}.header-brand{width:104px}.header-nav{font-size:12px;gap:18px}.editorial-main{width:calc(100% - 48px);padding:140px 0 70px}.editorial-main h1{font-size:32px;margin-bottom:28px}.editorial-main p:not(.editorial-eyebrow){font-size:15px}}
@media(max-width:360px){.header-inner{width:calc(100% - 32px);gap:10px}.header-brand{width:82px}.header-nav{font-size:11px;gap:13px}}
@media(max-height:500px) and (min-width:701px){.site-header{height:70px}.header-brand{width:105px}}
@media(prefers-reduced-motion:reduce){.header-nav a,.header-nav a::after{transition:none}}

/* Primary download action stays at the right edge on every navigable page. */
.header-actions{display:flex;align-items:center;gap:38px}
.header-download{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;min-height:46px;padding:0 21px;border:1px solid #dfe5c7;border-radius:8px;background:#dfe5c7;color:#263522;font-size:14px;font-weight:600;line-height:1.4;letter-spacing:-.025em;text-decoration:none;white-space:nowrap;box-shadow:0 3px 16px #11131014;transition:background .2s,box-shadow .2s}
.header-download svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.header-download:hover{background:#edf1dc;box-shadow:0 4px 20px #11131020}
.header-download:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.header-page .header-download,.js[data-call="true"] .header-download,.js[data-story-theme="light"] .header-download{color:#f8f8eb;background:#3b5135;border-color:#3b5135;box-shadow:none}
.header-page .header-download:hover,.js[data-call="true"] .header-download:hover,.js[data-story-theme="light"] .header-download:hover{background:#4b6544}
.js .intro-page .site-header{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility .4s,color .6s,background .6s}
.js[data-header-visible="true"] .intro-page .site-header{opacity:1;visibility:visible;pointer-events:auto}
@media(max-width:999px){.header-actions{gap:24px}.header-download{padding-inline:17px;font-size:13px}.header-nav{gap:24px}}
@media(max-width:700px){
 .header-inner{display:grid;grid-template-columns:auto 1fr auto;gap:14px}
 .header-actions{display:contents}
 .header-nav{justify-self:end;flex-direction:column;align-items:center;gap:0;font-size:11px;line-height:1.45}
 .header-nav a{padding:4px 0}.header-nav a::after{bottom:1px}
 .header-download{min-height:44px;padding-inline:13px;font-size:12px;gap:7px;border-radius:7px}.header-download svg{width:14px;height:14px}
}
@media(max-width:360px){.header-inner{gap:10px}.header-brand{width:76px}.header-nav{font-size:10px}.header-download{padding-inline:11px;font-size:11px;gap:6px}}
@media(prefers-reduced-motion:reduce){.header-download,.js .intro-page .site-header{transition:none}}

/* Keep both actions visible, including on narrow screens. */
.header-purchase{display:flex;align-items:center;gap:12px;flex-shrink:0}
.header-payment{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid currentColor;border-radius:8px;color:inherit;background:transparent;font-size:14px;font-weight:600;line-height:1.4;letter-spacing:-.025em;text-decoration:none;white-space:nowrap;transition:background .2s,box-shadow .2s}
.header-payment:hover{background:color-mix(in srgb,currentColor 8%,transparent);box-shadow:inset 0 0 0 1px currentColor}
.header-payment:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(min-width:701px) and (max-width:999px){.header-purchase{gap:8px}.header-purchase>a{padding-inline:12px;font-size:12px}}
@media(max-width:700px){
 .header-purchase{flex-direction:column;align-items:stretch;gap:4px}
 .header-purchase>a{min-height:34px;padding-inline:13px;font-size:12px;border-radius:6px}
}
@media(max-width:360px){.header-purchase>a{padding-inline:10px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.header-payment{transition:none}}