/* 디자인 규격 v2 — 기본값과 재사용 부품. 쪽별 배치는 각 쪽에서 정의합니다. */
:root{--deep:#121a24;--navy:#22303f;--paper:#f4efe4;--ink:#1d1b18;--sand:#e8dcc6;--gold:#c9b38d;--rust:#9c3d24;--text:#f3efe7;--muted:rgba(243,239,231,.78);--line:rgba(243,239,231,.2);--sans:"Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo",sans-serif;--serif:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo",serif;--f14:14px;--f16:16px;--f18:18px;--f22:22px;--f28:28px;--f40:40px;--hero:clamp(56px,8vw,128px);--s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:96px;--wide:1180px;--read:720px;--radius-glass:18px;--radius-paper:4px;--radius-button:999px;--fast:.2s;--medium:.35s;--slow:.45s;--nav-height:max(64px,9vh);--pad:6.2vw}
*{box-sizing:border-box}
html{background:var(--deep);color:var(--text);font:var(--f18)/1.7 var(--sans)}
body{margin:0;isolation:isolate;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
h1,h2,h3{line-height:1.2}
h1{font:900 var(--hero)/1.2 var(--serif);letter-spacing:-.045em}
h2{font-size:var(--f40)}
h3{font-size:var(--f28)}
small{font-size:var(--f14)}
.f14{font-size:var(--f14)}
.f16{font-size:var(--f16)}
.f18{font-size:var(--f18)}
.f22{font-size:var(--f22)}
.f28{font-size:var(--f28)}
.f40{font-size:var(--f40)}
.hero{font-size:var(--hero)}
.serif{font-family:var(--serif)}
.strong{font-weight:800}
.muted{color:var(--muted)}
.accent{color:var(--gold)}
.eyebrow{font-size:var(--f14);font-weight:800;letter-spacing:.2em;color:var(--gold)}
.glass-surface,.card,.folder,.job{background:rgba(18,26,36,.8);border:1px solid var(--line);border-radius:var(--radius-glass);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px rgba(255,255,255,.06),0 16px 40px #0002}
.paper-surface{background:var(--paper);color:var(--ink);border-radius:var(--radius-paper);box-shadow:0 16px 40px #0002;--muted:#4a453e;--line:rgba(29,27,24,.2)}
.paper-surface h1,.paper-surface h2,.paper-surface h3{font-family:var(--serif)}
.paper-surface p,.paper-surface li{font-size:var(--f18);line-height:1.95}
.paper-surface .eyebrow,.paper-surface .accent{color:var(--rust)}
.paper-surface img{border:0;border-radius:0}
.photo-round, .moment figure{border-radius:var(--radius-glass)}
.reading{max-width:var(--read);font-size:var(--f18);line-height:1.95}
.list-row{border-bottom:1px solid var(--line)}
.list-rule{border-top:1px solid var(--line)}
.quote{font:700 var(--f28)/1.7 var(--serif);color:var(--rust);border-left:3px solid var(--rust);padding:var(--s2) var(--s3)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);padding:var(--s1) var(--s3);border:1px solid var(--line);border-radius:var(--radius-button);background:rgba(243,239,231,.06);font-size:var(--f16);font-weight:700;color:var(--gold);transition:color var(--fast),border-color var(--fast)}
.button:hover{border-color:var(--gold)}
.text-link{color:var(--gold);border-bottom:1px solid var(--gold)}
.paper-surface .text-link{color:var(--rust);border-color:var(--rust)}
.selected,[aria-selected="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.menu{position:sticky;top:0;z-index:50;min-height:var(--nav-height);background:rgba(18,26,36,.9);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line);color:var(--text);font-family:var(--sans)}
.menu-inner{height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:0 var(--pad);margin:0;max-width:none}
.menu-links{display:flex;align-items:center;gap:2.4vw;white-space:nowrap;font-size:var(--f14);font-weight:600}
.menu-home{font-size:var(--f16);font-weight:800;letter-spacing:.08em}
.menu a{transition:color var(--fast)}
.menu a:hover,.menu .on,.menu [aria-current="page"]{color:var(--gold)}
[id]{scroll-margin-top:calc(var(--nav-height) + var(--s3))}
.section-header{padding:var(--s5) 0;color:var(--text)}
.section-header h1{margin:var(--s2) 0}
.section-header .sub{font:700 var(--f22)/1.7 var(--serif);color:var(--muted);margin:0}
.section-header .dl{margin-top:var(--s3)}
.sitefoot{color:var(--text);font-size:var(--f16);border-top:1px solid var(--line)}
.sitefoot>div{padding:var(--s4) var(--pad);display:flex;justify-content:space-between;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap}
.sitefoot b{color:var(--text)}
.sitefoot .pdf{display:flex;gap:var(--s3)}
.sitefoot .pdf a{color:var(--gold);border-bottom:1px solid var(--gold)}
.card{padding:var(--s3);margin-bottom:var(--s3)}
.card .tag,summary .tag{font-size:var(--f14);font-weight:800;color:var(--gold)}
.card h3.t{font-size:var(--f28);font-weight:900;line-height:1.2;margin:var(--s2) 0}
.card .meta{font-size:var(--f16);color:var(--muted);margin:0 0 var(--s3)}
.card .rows,details>.card{background:var(--paper);color:var(--ink);border-radius:var(--radius-paper);padding:var(--s3);--line:rgba(29,27,24,.2);--muted:#4a453e}
.card .row{border-top:1px solid var(--line)}
.card .lab{font-size:var(--f14);font-weight:800;color:var(--rust)}
.card .body p,.card .body li{font-size:var(--f18);line-height:1.95}
.card .alt{padding:var(--s2);background:var(--sand);font-size:var(--f18);line-height:1.95}
.card .alt .t{display:block;font-size:var(--f14);font-weight:800;color:var(--rust)}
details.item{background:rgba(18,26,36,.8);border:1px solid var(--line);border-radius:var(--radius-glass);padding:0 var(--s3);margin:var(--s2) 0}
details.item summary{list-style:none;cursor:pointer}
details.item summary::-webkit-details-marker{display:none}
details.item summary::after{content:"+";font-size:var(--f28);color:var(--gold)}
details.item[open] summary::after{content:"−"}
details.item .tt{font-size:var(--f18);font-weight:800}
details>.card{border:0;box-shadow:none;backdrop-filter:none}
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;filter:blur(70px)}
.blobs i{position:absolute;display:block;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:morph var(--m,26s) ease-in-out infinite alternate,float var(--f,34s) ease-in-out infinite alternate}
@keyframes morph{0%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}50%{border-radius:63% 37% 38% 62%/58% 63% 37% 42%}100%{border-radius:37% 63% 52% 48%/44% 39% 61% 56%}}
@keyframes float{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(var(--tx,-4vw),var(--ty,3vh)) rotate(28deg)}}
.b1{width:52vw;height:46vw;left:-8%;top:18%;background:#c9b38d;opacity:.13;--tx:6vw;--ty:-2vh}
.b2{width:34vw;height:34vw;left:62%;top:-10%;background:#c9b38d;opacity:.09;--m:32s;--f:44s;--tx:-5vw;--ty:5vh}
.b3{width:28vw;height:28vw;left:74%;top:66%;background:#c2563a;opacity:.08;--m:36s;--f:48s}
@media(max-width:900px){:root{--pad:5.5vw;--nav-height:max(56px,7dvh)}.menu-inner{gap:var(--s1)}.menu-links{gap:var(--s1);letter-spacing:-.02em}.blobs i{--m:40s;--f:52s}.blobs .b3{display:none}.sitefoot>div{align-items:flex-start;flex-direction:column}.sitefoot .pdf{flex-wrap:wrap}.section-header{padding:var(--s4) 0}.card{padding:var(--s2)}.card .rows,details>.card{padding:var(--s2)}details.item{padding:0 var(--s2)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.q::before{content:"— ";color:var(--rust)}
.a p:first-child::before{content:"김지형  ";font-weight:800}
.end p:last-child::after{content:" ■";color:var(--rust);font-size:var(--f16)}
.cabinet-title{letter-spacing:-.055em;font-weight:650;font-size:var(--hero)}
.cabinet-title span{color:var(--gold)}
.jobbar{background:#121a24f5;backdrop-filter:blur(20px);border-bottom:1px solid #c9b38d40}
.job{font-size:var(--f16);font-weight:650}
.job::after{content:'';border:1px solid #a9b1b8;border-left:4px solid var(--gold);border-right:4px solid var(--gold);background:linear-gradient(#dceaf15c,#a2b8c718);box-shadow:0 2px 3px #0008}
.job[aria-selected=true]{border-color:var(--gold);background:linear-gradient(155deg,#354958,#22303f);color:#fff}
.cabinet-heading{font-size:var(--f28);letter-spacing:-.035em}
.line{background:linear-gradient(90deg,#c9b38d80,#c9b38d10)}
.glass{border:1px solid #aebdc8;border-inline:5px solid var(--gold);background:linear-gradient(#dceaf150,#dceaf110)}
.interior{border:2px solid #788080;border-top:3px solid var(--gold);border-radius:7px;background:linear-gradient(90deg,#15222cee,#15222cdd);box-shadow:inset 0 0 35px #000,20px 35px 55px #0006}
.front{border:1px solid #738089;border-top:2px solid var(--gold);background:linear-gradient(120deg,#344654,#182534);box-shadow:0 15px 25px #0008}
.front i{border:1px solid #b1c5cf;border-inline:9px solid var(--gold);background:linear-gradient(#cedfe35e,#cedfe30a);box-shadow:0 4px 4px #0008}
.folder{text-align:left;transition:transform .35s}
.folder::before{content:'';border:1px solid #91a5ad85;border-bottom:0;border-radius:4px 7px 0 0;background:#42515d}
.folder b{font-size:var(--f16);font-weight:650;line-height:1.35}
.folder span{font-size:var(--f14);color:#e0e5e7;line-height:1.55}
.folder[aria-selected=true]{border-color:var(--gold);background:linear-gradient(120deg,#c9b38d35,#52637655)}
.folder[aria-selected=true]::before{background:var(--gold)}
.sheet-back{background:#acb8b9;border:1px solid #d1d8d6;box-shadow:0 15px 30px #0004;border-radius:3px}
.turn-sheet{background:#ded9cb;border:1px solid #b3a58f;border-radius:3px}
.document-task{font-size:var(--f14);color:var(--rust);font-weight:700}
.document-title{font-family:var(--serif);font-size:var(--f28);font-weight:700;letter-spacing:-.045em;line-height:1.2}
.document-meta{border-top:1px solid #9e9a8c80}
.document-meta p{font-size:var(--f16);line-height:1.5;color:var(--ink)}
.document-detail li::marker{color:#8b7551}
.document-link{font-size:var(--f16);font-weight:700;border-top:1px solid #9e9a8c80;color:var(--rust)}
.document-link:hover{color:#8a6028}
.controls>button{border:1px solid #a1adb675;background:#263747;border-radius:30px;font-size:var(--f22)}
.controls button:disabled{opacity:.35;cursor:default}
.pager-dots button{border:0;background:transparent}
.pager-dots button::after{content:'';border-radius:50%;border:1px solid #c9b38d}
.pager-dots button[aria-current=true]::after{background:var(--gold)}
@media(max-width:700px){.job{font-size:var(--f14)}
.cabinet-heading{font-size:var(--f22)}

.folder b{font-size:var(--f14)}
.folder span{font-size:var(--f14);line-height:1.5}


.document-meta{font-size:var(--f14)}}
.document-detail{font-size:var(--f18);line-height:1.95}
.tone-deep{background:var(--deep);color:var(--text)}
.tone-navy{background:var(--navy);color:var(--text)}
.tone-paper{background:var(--paper);color:var(--ink)}
.tone-ink{background:var(--ink);color:var(--paper)}
.tone-sand{background:var(--sand);color:var(--ink)}
.tone-gold{background:var(--gold);color:var(--ink)}
.tone-rust{background:var(--rust);color:var(--text)}
.tone-text{background:var(--text);color:var(--ink)}
.tone-muted{background:var(--muted);color:var(--ink)}
.space-sample{background:var(--gold)}
.space-1{height:var(--s1)}
.space-2{height:var(--s2)}
.space-3{height:var(--s3)}
.space-4{height:var(--s4)}
.space-5{height:var(--s5)}
.space-6{height:var(--s6)}
.drop-cap::first-letter{float:left;font:900 var(--f40)/1.2 var(--serif);margin:var(--s1) var(--s2) 0 0;color:var(--rust)}
/* Cabinet component geometry. */
.job{position:relative;min-height:72px;padding:var(--s1) var(--s1) var(--s3)}
.job::after{position:absolute;bottom:9px;left:37%;width:26%;height:5px}
.job[aria-selected=true]{transform:none}
.line{height:1px;flex:1}
.glass{width:84px;height:10px;margin-right:var(--s1)}
.scene{position:absolute;inset:0;z-index:-1;perspective:1200px;pointer-events:none}
.tray{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:center 80%}
.interior{position:absolute;inset:-8px -9px 20px}
.front{position:absolute;bottom:-8px;left:-12px;right:-12px;height:49px}
.front i{display:block;margin:var(--s2) auto;width:140px;height:12px}
.folder{position:relative;min-height:100px;padding:var(--s2) var(--s2) var(--s2)}
.folder::before{position:absolute;top:-7px;left:-1px;width:45%;height:7px}
.folder b{display:block}
.folder span{display:block;margin-top:var(--s1)}
.folder[aria-selected=true]{transform:none}
.reader{position:relative;min-width:0;perspective:1100px;padding-bottom:var(--s1);touch-action:pan-y}
.sheet-back{position:absolute;inset:4px -7px 79px 8px;transform:rotate(2deg)}
.turn-sheet{position:absolute;inset:0 0 75px;z-index:4;pointer-events:none;visibility:hidden;transform-origin:left center}
.document{position:relative;min-height:408px;padding:var(--s3) var(--s3) var(--s3);overflow-wrap:anywhere}
.document-task{margin:0 0 var(--s2)}
.document-title{margin:0 0 var(--s3)}
.document-meta{padding-top:var(--s2);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2)}
.document-meta p{margin:0}
.document-meta p:empty{display:none}
.document-detail{margin:var(--s3) 0 var(--s3);padding-left:var(--s2)}
.document-detail li{padding-left:var(--s1);margin:var(--s1) 0}
.document-link{display:flex;width:100%;justify-content:space-between;padding-top:var(--s2)}
.controls{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) 0 var(--s2);position:relative}
.controls>button{width:44px;height:40px}
.pager-dots{display:flex;gap:var(--s1)}
.pager-dots button{width:30px;height:30px;padding:var(--s1)}
.pager-dots button::after{display:block;width:7px;height:7px}
@media(max-width:1000px){.folder{padding:var(--s2) var(--s1)}
.document{padding:var(--s3)}}
@media(max-width:700px){.job{min-height:55px;padding:var(--s1) var(--s1) var(--s2)}
.job::after{bottom:8px;height:4px}
.glass{width:47px;height:8px}
.interior{inset:-3px -2px 20px}
.front{left:-4px;right:-4px}
.folder{min-height:109px;padding:var(--s2) var(--s1)}
.folder span{margin-top:var(--s1)}
.reader{scroll-margin-top:calc(var(--nav-height) + 160px)}
.sheet-back{right:-3px;left:4px}
.document{padding:var(--s3) var(--s3);min-height:400px}
.document-meta{gap:var(--s1)}
.controls{padding-bottom:var(--s3)}
.turn-sheet{inset:0 0 85px}
.tray{transform:none}}
@media print{html,body{background:var(--paper);color:var(--ink)}.blobs,.menu,.sitefoot{display:none}.glass-surface,.card,details.item,.folder,.job{background:var(--paper);color:var(--ink);box-shadow:none;backdrop-filter:none;border-color:#ccc}.section-header{color:var(--ink)}.muted,.sub,.card .meta,.document-meta p{color:var(--ink)}.paper-surface{box-shadow:none}.eyebrow,.accent,.card .tag,summary .tag{color:var(--rust)}}
@media print{.scene,.sheet-back,.turn-sheet,.controls{display:none}.jobbar,.job[aria-selected=true],.folder[aria-selected=true]{background:var(--paper);color:var(--ink)}.folder span,.section-header .sub{color:var(--ink)}}