/* Self-contained archive: positioning and motion never share a transform. */
#archive-overlay { padding: 0; z-index: 30; visibility: hidden; transition: opacity .35s, visibility .35s; color-scheme: light; }
body.archive-open #archive-overlay { visibility: visible; }
.ur-backdrop { position: absolute; inset: 0; border: 0; background: linear-gradient(125deg, #cedcdebc, #bac9ccd6); backdrop-filter: blur(23px) saturate(.55); }
.ur-window { position: relative; width: min(1180px, 100%); height: min(820px, 100dvh); color: #344e5a; display: flex; flex-direction: column; isolation: isolate; }
.ur-window button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ur-window button:focus-visible { outline: 2px solid #385a68; outline-offset: 7px; }
.ur-close { position: absolute; right: 30px; top: 28px; z-index: 60; width: 43px; height: 43px; border-radius: 50%; border: 1px solid #ffffff9c; background: #ffffff4f; font: 27px Georgia!important; }
.ur-heading { padding: 42px 56px 0; position: relative; z-index: 2; transition: opacity .4s; }
.ur-kicker { font: 10px 'DM Mono',monospace; letter-spacing: .2em; }
.ur-heading h2 { font: 400 clamp(48px,6vw,75px)/1 'Nanum Pen Script',cursive; margin: 12px 0 8px; color: #fdfcf4; text-shadow: 0 2px 12px #34556330; }
.ur-heading p { font-size: 12px; line-height: 1.8; margin: 0; }
.ur-heading p span { margin-left: 14px; opacity: .65; }
.ur-stage { position: relative; flex: 1; min-height: 0; margin: 0 24px; perspective: 1600px; }
.ur-stage-caption { position: absolute; top: 20px; left: 5%; right: 5%; display: flex; justify-content: space-between; font: 9px 'DM Mono',monospace; letter-spacing: .16em; opacity: .5; border-top: 1px solid #53737e38; padding-top: 12px; }
.ur-carousel { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; transition: opacity .5s, filter .5s; }
.ur-item { position: absolute; left: calc(50% - 113px); top: calc(50% - 157px); width: 226px; height: 326px; border: 0; padding: 0; background: transparent; transform-style: preserve-3d; transform: translate3d(var(--x), var(--y), var(--z)) rotateY(var(--angle)); transition: opacity .35s; }
.ur-book { display: block; position: absolute; inset: 0; border-radius: 3px 8px 8px 3px; transform-style: preserve-3d; transform: translateY(0); transition: transform .7s cubic-bezier(.2,.75,.2,1), filter .5s; box-shadow: 15px 20px 24px #29465035; }
.ur-book::after { content: ''; position: absolute; top: 4px; bottom: 4px; right: -11px; width: 12px; background: repeating-linear-gradient(90deg,#f1efe4 0 1px,#b9c3bc 1px 2px); transform-origin: left; transform: rotateY(90deg); }
.ur-book::before { content: ''; position: absolute; inset: 0; background: #768d92; transform: translateZ(-12px); border-radius: inherit; }
.ur-spine { position: absolute; top: 0; left: -14px; width: 15px; height: 100%; background: linear-gradient(90deg,#759398,var(--paper)); writing-mode: vertical-rl; font: 8px 'DM Mono',monospace; letter-spacing: .15em; padding: 20px 2px; transform: rotateY(-90deg); transform-origin: right; border: 1px solid #ffffff70; }
.ur-index-tab { position: absolute; top: -20px; left: 14px; padding: 8px 10px 12px; border: 1px solid #ffffffa6; border-radius: 5px 5px 0 0; background: var(--paper); font: 8px 'DM Mono',monospace; letter-spacing: .06em; transition: transform .7s; }
.ur-item:hover .ur-book,.ur-item:focus-visible .ur-book { transform: translateY(-36px) translateZ(55px) rotateY(15deg); filter: brightness(1.035); }
.ur-item:hover .ur-index-tab,.ur-item:focus-visible .ur-index-tab { transform: translateY(-36px); }
.ur-cover { position: absolute; inset: 0; border: 1px solid #ffffffe0; border-radius: 3px 7px 7px 3px; background: linear-gradient(105deg,#ffffff40,transparent 20%,#ffffff10 85%,#ffffff80),var(--paper); color: #304852; padding: 20px; text-align: left; overflow: hidden; box-shadow: inset 5px 0 5px #263d4a15,inset -2px 0 2px #ffffffc4; display: flex; flex-direction: column; }
.ur-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.3' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.ur-cover-top,.ur-cover-bottom { display: flex; align-items: center; justify-content: space-between; font: 6px 'DM Mono',monospace; letter-spacing: .1em; }
.ur-cover-top { padding-bottom: 10px; border-bottom: 1px solid #36546245; }
.ur-cover-top span:last-child { font-size: 16px; }
.ur-art { flex: 1; position: relative; margin: 16px 0; overflow: hidden; border: 1px solid #ffffff35; background: #f1f0e780; }
.ur-art i,.ur-art b,.ur-art em { position: absolute; display: block; }
.ur-art-orb i { width: 120px; height: 120px; border-radius: 50%; left: 5%; top: 5%; background: radial-gradient(circle at 28% 25%,#faf9e8,#8ba8a9 55%,#3f637c); box-shadow: 13px 16px 12px #3a525746; }
.ur-art-orb b { width: 92px; height: 92px; border: 1px solid #fff9; border-radius: 50%; left: 42%; top: 26%; }
.ur-art-type::before { content: 'Aa'; position: absolute; font: italic 110px/.95 Georgia; letter-spacing: -.13em; left: 14px; top: 7px; color: #506b5f; }
.ur-art-type::after { content: 'FORM & CONTENT'; position: absolute; bottom: 9px; left: 12px; letter-spacing: .25em; font-size: 6px; }
.ur-art-lines { background: repeating-linear-gradient(0deg,transparent 0 13px,#5d564c33 13px 14px),#f7efd8; }
.ur-art-lines::before { content: '“'; position: absolute; font: 145px Georgia; color: #92734b; left: 15px; top: -10px; }
.ur-art-film { background: linear-gradient(135deg,#2f515e,#91adb1); border-top: 9px dotted #e5eadc; border-bottom: 9px dotted #e5eadc; }
.ur-art-film i { inset: 17px 28px; border: 1px solid #e9eacf8c; border-radius: 50%; }
.ur-art-film::after { content: '▷'; color: #f5f4df; position: absolute; inset: 24% 0; text-align: center; font-size: 38px; }
.ur-art-grid { background: repeating-linear-gradient(90deg,transparent 0 12px,#52698944 12px 13px),repeating-linear-gradient(0deg,transparent 0 12px,#52698944 12px 13px),#dce4dd; }
.ur-art-grid i { inset: 22px 35px; background: linear-gradient(135deg,#faf3e5,#7796b0); transform: rotate(-22deg); box-shadow: 12px 10px 0 #5c728d80; border: 1px solid white; }
.ur-cover-title small { display: block; font: 7px 'DM Mono',monospace; letter-spacing: .15em; }
.ur-cover-title strong { display: block; font: 25px/.97 Georgia,serif; margin: 7px 0; letter-spacing: -.04em; max-width: 160px; }
.ur-cover-title > span { display: block; font-size: 10px; }
.ur-cover-bottom { margin-top: 15px; padding-top: 10px; border-top: 1px solid #36546240; }
.ur-barcode { width: 39px; height: 10px; background: repeating-linear-gradient(90deg,#37545b 0 1px,transparent 1px 3px,#37545b 3px 5px,transparent 5px 6px); opacity: .65; }
.ur-tray { position: absolute; left: 7%; right: 7%; top: calc(50% + 142px); height: 80px; pointer-events: none; z-index: 30; transition: opacity .5s; }
.ur-tray-floor { position: absolute; inset: -43px 0 20px; transform: perspective(900px) rotateX(58deg); background: repeating-linear-gradient(90deg,transparent 0 52px,#637e8533 53px 54px),linear-gradient(0deg,#d7e4e778,#ffffff32); border: 1px solid #fff9; border-radius: 7px; box-shadow: 0 38px 30px #334e5b30; }
.ur-tray-front { position: absolute; inset: 0 0 20px; display: flex; align-items: center; gap: 20px; padding: 0 20px; border-radius: 4px 4px 12px 12px; border: 1px solid #ffffffe0; border-bottom: 4px solid #849da59e; background: linear-gradient(175deg,#ffffffb0,#d9e6e670 20%,#bdcfd580 70%,#f6fffeaa); backdrop-filter: blur(3px); box-shadow: 0 17px 26px #37515a26,inset 0 2px 1px white; }
.ur-screw { color: #68838e; font: 13px monospace; text-shadow: 1px 1px white; }.ur-screw:last-child { margin-left: auto; }
.ur-label { background: #edece0; border: 1px solid #8b96944d; padding: 6px 11px; font: 8px 'DM Mono',monospace; letter-spacing: .15em; box-shadow: 0 1px 2px #56737e22; }
.ur-label i { font-style: normal; padding-left: 16px; opacity: .5; }
.ur-led { width: 4px; height: 4px; border-radius: 50%; background: #d3ab68; box-shadow: 0 0 5px #d3ab6877; }
.ur-controls { display: flex; align-items: center; justify-content: space-between; margin: 14px 65px 35px; font: 9px 'DM Mono',monospace; letter-spacing: .07em; }
.ur-controls > div { display: flex; align-items: center; gap: 18px; }.ur-controls button { border: 1px solid #ffffff99; background: #ffffff30; border-radius: 50%; width: 35px; height: 35px; }.ur-controls p { opacity: .6; font-size: 8px; }.ur-count { min-width: 52px; }
.ur-detail[hidden] { display: none; }.ur-detail { position: absolute; inset: 95px 65px 70px; z-index: 45; perspective: 1500px; }
.ur-return { border: 0; background: transparent; font: 10px 'DM Mono',monospace!important; padding: 0 0 18px; letter-spacing: .04em; }
.ur-detail-sheet { height: calc(100% - 40px); display: grid; grid-template-columns: .85fr 1fr; gap: 0; background: #f7f5ea; border-radius: 5px 13px 13px 5px; border: 1px solid #fffc; box-shadow: 2px 3px 0 #ccd0c6,4px 5px 0 #eeeee3,0 30px 55px #34546235; animation: ur-unfold .85s cubic-bezier(.19,.8,.2,1) both; }
.ur-detail-cover { position: relative; margin: 20px; min-height: 0; }.ur-detail-cover .ur-cover { padding: 28px; }.ur-detail-cover .ur-art { min-height: 60px; }.ur-detail-cover .ur-cover-title strong { max-width: none; font-size: clamp(30px,4vw,52px); }.ur-detail-cover .ur-art i { transform: scale(1.5); transform-origin: top left; }
.ur-detail-copy { padding: clamp(24px,4vw,50px); border-left: 1px solid #586c6e20; overflow-y: auto; background: linear-gradient(90deg,#697e6810,transparent 5%); }
.ur-detail-copy h3 { font: 500 clamp(24px,3vw,37px)/1.4 'Noto Sans SC',sans-serif; margin: 24px 0 18px; }.ur-description { font-size: 13px; line-height: 1.9; color: #6b7d80; }.ur-detail-copy dl { margin: 30px 0; }.ur-detail-copy dl div { padding: 13px 0; border-top: 1px solid #56717a26; }.ur-detail-copy dt { font: 8px 'DM Mono',monospace; color: #829193; margin-bottom: 8px; }.ur-detail-copy dd { margin: 0; font-size: 12px; }.ur-preview-note { font-size: 11px; line-height: 1.8; color: #89918b; }.ur-detail-sign { display: block; margin-top: 25px; font: 26px 'Nanum Pen Script',cursive; color: #89918b; }
.ur-reading .ur-heading,.ur-reading .ur-controls { opacity: 0; pointer-events: none; }.ur-reading .ur-carousel,.ur-reading .ur-tray { opacity: .13; filter: blur(3px); pointer-events: none; }
.ur-extracted .ur-book { transform: translateY(-90px) translateZ(180px) rotateY(32deg); }
.ur-returning .ur-detail-sheet { animation: ur-return .48s cubic-bezier(.4,0,.5,1) both; }
.ur-returning .ur-return { opacity: 0; }
@keyframes ur-return { to { opacity: 0; transform: translateY(65px) rotateY(-25deg) scale(.7); } }
body.archive-open .ur-stage { animation: ur-arrive 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ur-arrive { from { opacity: 0; translate: 0 45px; } to { opacity: 1; translate: 0 0; } }
@keyframes ur-unfold { from { opacity: 0; transform: translateY(60px) rotateY(-16deg) scale(.85); } to { opacity: 1; transform: none; } }
@media(max-height:700px) and (min-width:701px) { .ur-heading { padding-top: 22px; }.ur-heading h2 { font-size: 53px; }.ur-item { scale: .8; top: calc(50% - 155px); }.ur-tray { top: calc(50% + 110px); }.ur-stage-caption { top: 5px; }.ur-controls { margin-bottom: 16px; }.ur-detail { inset: 65px 70px 30px; } }
@media(max-width:700px) { .ur-heading { padding: 30px 25px 0; }.ur-heading p span { display: block; margin-left: 0; }.ur-close { right: 20px; top: 20px; }.ur-stage { margin: 0; overflow: clip; }.ur-carousel { scale: .72; }.ur-stage-caption { top: 24px; }.ur-tray { left: 5%; right: 5%; top: calc(50% + 125px); }.ur-controls { margin: 8px 25px 25px; }.ur-controls p { display: none; }.ur-detail { inset: 80px 20px 28px; overflow: auto; }.ur-detail-sheet { height: auto; min-height: calc(100% - 35px); grid-template-columns: 1fr; }.ur-detail-cover { height: 260px; margin: 16px; }.ur-detail-cover .ur-cover { padding: 18px; }.ur-detail-cover .ur-art { position: absolute; top: 40px; right: 18px; width: 40%; height: 150px; }.ur-detail-cover .ur-cover-title { margin-top: 35px; max-width: 50%; }.ur-detail-cover .ur-cover-title strong { font-size: 27px; }.ur-detail-cover .ur-cover-bottom { margin-top: auto; }.ur-detail-copy { padding: 25px; }.ur-detail-copy h3 { margin-top: 12px; } }
@media(prefers-reduced-motion:reduce) { #archive-overlay *,body.archive-open .ur-stage { animation: none!important; transition: none!important; } }