/* Cinematic editorial redesign. The artwork carries the story; controls stay secondary. */
:root{background:#f3f0e9;color:#252b27;--ink:#252b27;--paper:#faf7f0;--line:#d9d6cc;--orange:#b7643d;font-family:Arial,'Noto Sans KR','Malgun Gothic',sans-serif}
body{background:#f3f0e9}.hero-top h1 .outline{color:#f3f0e9}.brand-mark span{color:#b7643d}.site-header{border-bottom:1px solid #ddd9cf;height:96px}.brand{letter-spacing:1.2px}.page{max-width:1440px}.breadcrumb{font-size:11px;letter-spacing:1px;margin-bottom:38px}.detail-hero:has(+.scroll-story){padding-bottom:40px}.detail-hero:has(+.scroll-story)>div{display:grid;grid-template-columns:1.1fr .9fr;column-gap:70px;max-width:none;align-items:end}.detail-hero:has(+.scroll-story) .eyebrow{grid-column:1/-1;font-size:11px;color:#986446;margin-bottom:20px}.detail-hero:has(+.scroll-story) h1{font-size:clamp(42px,4.5vw,70px);line-height:1.15;letter-spacing:-3px;margin:0}.detail-hero:has(+.scroll-story) p{font-size:14px;line-height:1.95;max-width:430px;margin:0 0 4px;color:#5c635d}
.scroll-story{height:170vh;min-height:1050px;margin:0 0 80px}.scene-sticky{display:block;position:sticky;top:18px;height:auto;max-height:none}.scene-window{height:min(73vh,780px);min-height:440px;max-height:none;width:100%;position:relative;overflow:hidden;border:0;border-radius:3px;box-shadow:none;background:#252b27;isolation:isolate}.scene-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transform-origin:55% 52%;}.scene-vignette{position:absolute;inset:0;background:linear-gradient(180deg,#050d142f,transparent 35%,#0b111526 53%,#090e14c7),linear-gradient(90deg,#11121b38,transparent 70%);pointer-events:none}.scene-copy{position:absolute;left:5%;bottom:13%;width:88%;color:#fff8ea;pointer-events:none}.scene-copy .scene-kicker{font-size:12px;letter-spacing:1px;color:#fff0d9}.scene-copy h2{font:italic 400 clamp(52px,7.6vw,112px)/1 Georgia,'Times New Roman',serif;letter-spacing:-4px;margin:16px 0 20px}.scene-copy>p{color:#fff9ed;font-size:18px;line-height:1.5;margin:0 0 12px}.scene-copy .scene-step{display:block;color:#dfd8cc;font-size:12px;padding:0;border:0;min-height:0;margin:0}.scene-topline{top:26px;left:5%;right:5%;justify-content:space-between;color:#fff4df;font-size:10px;letter-spacing:2px;text-shadow:none}.scene-topline span:last-child{display:block}.scene-bottomline{left:5%;right:5%;bottom:25px;font-size:9px;letter-spacing:2px;color:#e7e0d5}.scene-percent{font:10px monospace;letter-spacing:1px}.scene-toolbar{display:flex;align-items:center;gap:24px;padding:18px 0;border-bottom:1px solid #d1cfc5}.scene-toolbar button,.scene-toolbar a{border:0;background:none;font-size:12px;padding:7px 0;color:#343c35;text-decoration:none;white-space:nowrap}.scene-toolbar button:hover,.scene-toolbar a:hover{color:#a35334}.scene-toolbar .scene-loop{min-width:97px;text-align:left}.scene-toolbar .scene-range-label{flex:1;margin:0}.scene-toolbar .scene-range{width:100%;margin:0;accent-color:#825b43;height:20px}.scene-credit{font-size:10px;line-height:1.6;color:#687066;margin:12px 0 0}.scene-light{position:absolute;inset:-10%;background:radial-gradient(ellipse at 72% 20%,#ffc87522,transparent 45%);mix-blend-mode:screen;pointer-events:none;transform:translateY(calc(var(--cinema-progress,0)*-20px))}.scene-grain{position:absolute;inset:0;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}.motion-reduced .scene-art{transform:scale(1.04)!important}.art-unavailable .scene-window{background:linear-gradient(135deg,#514439,#172933)}
.detail-content{border-top:1px solid #d7d3c8;padding-top:45px}.record{border-color:#ded9ce}.record h3{font-size:25px;letter-spacing:-.7px}.record p{line-height:1.95;color:#596259}.related{background:#e8e6dc;border-radius:3px}.chapter-card{position:relative;min-height:390px;border:0;border-radius:3px;overflow:hidden;color:#fff8ed;background:#283831!important;isolation:isolate}.chapter-card:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0003,transparent 30%,#07120dc9),var(--chapter-art) center/cover;z-index:-1;transition:transform .65s}.chapter-card:hover:before{transform:scale(1.05)}.chapter-card[data-id=stage]{--chapter-art:url('./art/stage.webp')}.chapter-card[data-id=kitchen]{--chapter-art:url('./art/kitchen.webp')}.chapter-card[data-id=film]{--chapter-art:url('./art/film.webp')}.chapter-card[data-id=code]{--chapter-art:url('./art/code.webp')}.chapter-card .chapter-symbol{visibility:hidden;height:170px}.chapter-card p{color:#e3e1d5}.chapter-card .card-plus{border-color:#fff6;color:#fff}.chapter-number{color:#fff1d8}.work-card,.work-art,.contact-box{border-radius:4px}.play-tools{box-shadow:0 6px 24px #0000000a;background:#f6f3ebed}.section-heading h2{letter-spacing:-1.7px}.intro-side .scribble{font-size:22px}.quiet .chapter-card:before{transition:none}
@media(max-width:760px){.site-header{height:80px}.page{padding-top:24px}.breadcrumb{margin-bottom:25px}.detail-hero:has(+.scroll-story)>div{display:block}.detail-hero:has(+.scroll-story) h1{font-size:46px;letter-spacing:-2px}.detail-hero:has(+.scroll-story) p{margin-top:23px;font-size:13px;line-height:1.9}.detail-hero:has(+.scroll-story){padding-bottom:27px}.scroll-story{height:auto;min-height:0;margin-bottom:42px}.scene-sticky{position:relative;top:0;height:auto;display:block}.scene-window{height:560px;min-height:0;max-height:74svh;border-radius:3px}.scene-copy{left:7%;bottom:14%;width:86%}.scene-copy h2{font-size:clamp(42px,12vw,65px);letter-spacing:-2px;line-height:1.02;margin:14px 0 19px}.scene-copy .scene-kicker{font-size:10px;letter-spacing:0}.scene-copy>p{font-size:15px}.scene-copy .scene-step{font-size:10px;line-height:1.6;margin:0}.scene-topline{top:21px;left:7%;right:7%;font-size:8px;letter-spacing:1px}.scene-bottomline{left:7%;right:7%;font-size:8px;letter-spacing:1px;bottom:21px}.scene-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:5px 15px;padding:12px 0}.scene-toolbar .scene-range-label{grid-column:1/-1;grid-row:2;padding:8px 0}.scene-toolbar .scene-scroll{text-align:right}.scene-toolbar .scene-skip{grid-column:1/-1;text-align:right}.scene-credit{font-size:9px}.chapter-card{min-height:300px;padding:19px}.chapter-card .chapter-symbol{height:100px}.chapter-card h3{font-size:20px}.chapter-card p{font-size:11px}.scene-copy small{display:none}}
/* Scene choreography: each foreground layer has its own depth and timeline. */
.chapter-layers{position:absolute;inset:0;pointer-events:none;overflow:hidden;perspective:1000px;--p:var(--cinema-progress,0);--o:var(--chapter-open,0);--m:var(--chapter-middle,0);--f:var(--chapter-finish,0)}
.scene-topline,.scene-copy,.scene-bottomline{z-index:3}.scene-art{will-change:transform}.chapter-layers>div{will-change:transform,opacity}
.stage-drape{position:absolute;top:-5%;bottom:-5%;width:29%;background:repeating-linear-gradient(90deg,#220f18 0%,#582334 13%,#7d3344 20%,#311320 31%);box-shadow:8px 0 32px #0008;filter:brightness(.68);border-bottom:12px solid #987349;transform-origin:top;}
.drape-left{left:-3%;border-radius:0 0 80% 0;transform:translateX(calc(var(--o)*-90%)) rotate(calc(var(--o)*-5deg))}.drape-right{right:-3%;border-radius:0 0 0 80%;transform:translateX(calc(var(--o)*90%)) rotate(calc(var(--o)*5deg))}
.theatre-beam{position:absolute;top:-15%;left:50%;height:120%;width:30%;background:linear-gradient(180deg,#ffe0a54d,#ffe3b209);clip-path:polygon(48% 0,55% 0,100% 100%,0 100%);mix-blend-mode:screen;transform-origin:top;filter:blur(8px);opacity:calc(.12 + var(--o)*.7)}.beam-a{transform:rotate(calc(-34deg + var(--p)*42deg))}.beam-b{left:76%;transform:rotate(calc(20deg - var(--p)*45deg));opacity:calc(var(--m)*.45)}.stage-dust{position:absolute;inset:0;background-image:radial-gradient(circle,#ffe9bb99 1px,transparent 2px);background-size:87px 109px;opacity:calc(var(--m)*.3);transform:translateY(calc(var(--p)*-100px))}
.steam{position:absolute;bottom:15%;left:56%;width:12%;height:60%;border-left:18px solid #fff6e9a8;border-radius:50%;filter:blur(14px);opacity:calc(.08 + var(--o)*.5);transform:translateY(calc(var(--p)*-120px)) rotate(calc(-15deg + var(--p)*35deg)) scaleX(calc(.5 + var(--p)))}.steam-b{left:65%;bottom:8%;height:70%;transform:translateY(calc(var(--p)*-200px)) rotate(-18deg);opacity:calc(var(--m)*.42)}.steam-c{left:73%;height:47%;transform:translateY(calc(var(--p)*-90px)) rotate(28deg)}
.recipe-note{position:absolute;right:7%;top:14%;width:220px;padding:28px;color:#554636;background:#f4ebd7;box-shadow:0 20px 45px #23160744;transform:translate3d(calc(90px - var(--m)*90px + var(--pointer-drift,0px)),calc(130px - var(--m)*130px),0) rotate(calc(13deg - var(--m)*20deg));opacity:var(--m)}.recipe-note small{font:9px monospace;letter-spacing:2px}.recipe-note strong{display:block;font:32px Georgia,serif;margin:25px 0 10px}.recipe-note span{font-size:12px}.recipe-note i{display:block;border-bottom:1px solid #b6aa92;margin-top:15px;width:90%}
.viewfinder{position:absolute;inset:12% 10% 18%;border:1px solid #fff4;opacity:calc(.6 - var(--f)*.5);transform:scale(calc(1.12 - var(--o)*.12))}.viewfinder i{position:absolute;width:30px;height:30px;border:2px solid #fff9}.viewfinder i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.viewfinder i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}.viewfinder i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.viewfinder i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}.viewfinder>span{position:absolute;right:15px;top:16px;font:10px monospace;color:white;letter-spacing:2px}
.contact-print{position:absolute;top:12%;right:10%;width:26%;padding:10px 10px 30px;background:#fbf1db;box-shadow:0 25px 40px #182d3d55;opacity:var(--m);transform:translateY(calc(200px - var(--m)*200px)) rotate(calc(20deg - var(--m)*30deg))}.contact-print img{display:block;width:100%;height:180px;object-fit:cover;object-position:20% 50%}.contact-print span{display:block;font:8px monospace;letter-spacing:1px;margin-top:12px;color:#465851}.print-b{top:30%;right:4%;opacity:var(--f);transform:translateX(calc(180px - var(--f)*180px)) rotate(12deg)}.print-b img{object-position:85% 60%}
.code-window{position:absolute;right:6%;top:18%;width:42%;background:#132b35e8;border:1px solid #d8e9e844;border-radius:12px;box-shadow:0 25px 80px #07161d77;backdrop-filter:blur(12px);color:#d9efe5;transform:translate3d(var(--pointer-drift,0px),calc(100px - var(--o)*100px),0) rotateY(calc(-18deg + var(--p)*26deg));opacity:var(--o)}.code-window-bar{padding:18px;color:#c89c77;border-bottom:1px solid #e1e7db22;font:10px monospace}.code-window-bar span{float:right;color:#afc8cc}.code-window pre{margin:0;padding:24px;font:clamp(10px,1.15vw,17px)/2.4 monospace}.code-line{display:block;overflow:hidden;white-space:nowrap;clip-path:inset(0 calc(100% - var(--o)*100%) 0 0)}.line-b{color:#edc89c;clip-path:inset(0 calc(100% - var(--m)*100%) 0 0)}.line-c{color:#8daeb1;clip-path:inset(0 calc(100% - var(--f)*100%) 0 0)}.build-result{padding:16px 24px;border-top:1px solid #ffffff22;font:10px monospace;letter-spacing:1px;opacity:var(--f);color:#bddba2}.idea-orbit{position:absolute;right:4%;top:7%;width:45%;height:65%;border:1px solid #c8e8d852;border-radius:50%;transform:rotate(calc(-35deg + var(--p)*100deg)) scale(calc(.8 + var(--p)*.3));opacity:var(--m)}.orbit-b{width:35%;right:9%;transform:rotate(calc(40deg - var(--p)*100deg))}
.motion-reduced .chapter-layers{display:none}
@media(max-width:760px){.scroll-story{height:155svh;min-height:850px}.scene-sticky{position:sticky;top:8px}.scene-window{height:60svh;min-height:330px}.recipe-note{width:145px;right:7%;padding:18px;top:14%}.recipe-note strong{font-size:23px;margin:14px 0}.contact-print{width:40%;right:9%;padding:7px 7px 18px}.contact-print img{height:100px}.print-b{right:4%;top:23%}.code-window{width:78%;top:14%;right:9%}.code-window pre{padding:14px;font-size:10px}.code-window-bar{padding:12px}.build-result{padding:12px;font-size:8px}.scene-copy{bottom:11%}.stage-drape{width:32%}.scene-toolbar{background:#f3f0e9}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:auto;min-height:0}.scene-sticky{position:relative;top:0}.chapter-layers{display:none}}
/* Translucent glass editor: tinted backdrop, polished rim and soft reflections. */
.code-window{overflow:hidden;border-radius:26px;border:1px solid #ffffff68;background:linear-gradient(135deg,#f5faff38 0%,#dae9f013 42%,#b4d7e51c 100%),#14273538;-webkit-backdrop-filter:blur(22px) saturate(155%);backdrop-filter:blur(22px) saturate(155%);box-shadow:inset 0 1px 0 #ffffffa6,inset 1px 0 0 #ffffff30,inset 0 -1px 0 #ffffff38,0 24px 60px #0612224d,0 4px 12px #06122226;color:#f1f7fa;text-shadow:0 1px 5px #06121dc2}
.code-window:before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 5% 0%,#fff5,transparent 48%),linear-gradient(115deg,transparent 28%,#ffffff0d 42%,transparent 57%);transform:translateX(var(--pointer-drift,0px))}
.code-window:after{content:'';position:absolute;inset:1px;pointer-events:none;border-radius:24px;border:1px solid #ffffff14}
.code-window-bar,.code-window pre,.build-result{position:relative}
.code-window-bar{background:linear-gradient(180deg,#ffffff16,#ffffff04);border-bottom-color:#ffffff29;color:#f0dbc0}
.code-window-bar span{color:#e3edf2}
.code-window .line-b{color:#ffe0b4}.code-window .line-c{color:#d0e0e7}
.code-window .build-result{border-top-color:#ffffff29;background:#ffffff08;color:#d5efc5}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.code-window{background:linear-gradient(135deg,#536572,#233b49);}}
@media(max-width:760px){.code-window{border-radius:20px;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}.code-window:after{border-radius:18px}}
@media(prefers-reduced-transparency:reduce){.code-window{background:#253d4b;-webkit-backdrop-filter:none;backdrop-filter:none}.code-window:before{display:none}}
.world-enter{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);z-index:5;max-width:90%;padding:13px 22px;border:1px solid #fff9;border-radius:30px;background:#29463de8;color:#fff8e9;box-shadow:0 6px 22px #22372f28;font:inherit;font-size:13px;cursor:pointer;backdrop-filter:blur(12px)}
.world-enter[hidden]{display:none}.world-enter:hover{background:#395e51}.world-enter:focus-visible{outline:3px solid #bd7845;outline-offset:4px}
@media(max-width:760px){.world-enter{left:auto;right:12px;transform:none;width:calc(100% - 155px);max-width:240px;padding:12px 10px;font-size:11px;bottom:52px}}
/* Gallery presentation for real-time miniature chapter sets. */
.diorama-host{position:absolute;inset:0 0 0 27%;pointer-events:none;visibility:hidden}.chapter-canvas{display:block;width:100%;height:100%}.diorama-ready .diorama-host{visibility:visible}.diorama-ready .scene-window{background:radial-gradient(ellipse at 68% 38%,#fffdf4,#e2dfd4)}.diorama-ready .scene-art,.diorama-ready .chapter-layers,.diorama-ready .scene-light,.diorama-ready .scene-grain,.diorama-ready .scene-vignette{display:none}.diorama-ready .scene-copy{left:4%;bottom:18%;width:30%;color:#303d3b}.diorama-ready .scene-copy h2{font-size:clamp(42px,5vw,76px);letter-spacing:-3px}.diorama-ready .scene-copy .scene-kicker,.diorama-ready .scene-copy>p,.diorama-ready .scene-copy .scene-step{color:#53635d}.diorama-ready .scene-topline,.diorama-ready .scene-bottomline{color:#59675f}.diorama-ready .scene-copy>p{font-size:15px}.diorama-ready .scene-copy .scene-step{line-height:1.8}
@media(max-width:760px){.diorama-ready .scene-window{height:70svh;min-height:520px;max-height:none}.diorama-host{inset:0 0 30%}.diorama-ready .scene-copy{left:7%;bottom:10%;width:86%}.diorama-ready .scene-copy h2{font-size:42px;margin:8px 0 10px;letter-spacing:-2px}.diorama-ready .scene-copy>p{font-size:13px;margin-bottom:5px}.diorama-ready .scene-copy .scene-kicker{font-size:9px}.diorama-ready .scene-bottomline{bottom:16px}}
