*{box-sizing:border-box}html,body{margin:0;color:#203c4a;background:#eae9e2;font-family:"Noto Sans CJK KR","Noto Sans KR",Arial,sans-serif}.hero{height:100svh;min-height:680px;max-height:1100px;position:relative;isolation:isolate;overflow:hidden}.landscape{position:absolute;inset:0;background:url(assets/landscape.webp) center center/cover no-repeat;z-index:-3}.window-light{position:absolute;inset:0;background:linear-gradient(112deg,rgba(255,250,232,.10),transparent 42%,rgba(146,174,186,.06));z-index:-2;animation:light 12s ease-in-out infinite alternate;pointer-events:none}@keyframes light{to{opacity:.38;transform:translateX(1%)}}header{position:absolute;left:6%;right:6%;top:38px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:14px;letter-spacing:2.4px;color:inherit;text-decoration:none;font-weight:700}.brand span{display:block;font-size:10px;letter-spacing:2px;font-weight:400;margin-top:7px}.edition{font-size:10px;letter-spacing:1.6px}.edition b{font-size:20px;font-weight:400;margin-left:14px}.copy{position:absolute;left:10%;top:27%;z-index:3}.eyebrow{font-size:11px;letter-spacing:3.2px;margin:0 0 22px;font-weight:600}h1{font-size:clamp(44px,5vw,74px);font-weight:400;letter-spacing:-4px;line-height:1.18;margin:0}.intro{font-size:15px;line-height:1.9;color:#3e5560;margin-top:25px;letter-spacing:-.3px}.links{display:flex;gap:30px;margin-top:30px;font-size:11px}.links span{padding-bottom:9px;border-bottom:1px solid #203c4a55}.links b{margin-left:16px;font-weight:400}.character-stage{position:absolute;width:480px;aspect-ratio:1;left:70%;top:38%;transform:translateX(-50%);z-index:2}.character-stage canvas,.fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.fallback{display:none}.contact-shadow{position:absolute;left:37%;width:29%;height:3%;bottom:16.1%;background:radial-gradient(ellipse,rgba(54,46,39,.52),rgba(57,55,43,.21) 48%,transparent 74%);filter:blur(3px)}.character-note{position:absolute;left:80%;top:70%;font-size:12px;line-height:1.7}.character-note span{font-size:9px;letter-spacing:2px;color:#60727a}.character-note p{margin-top:9px}footer{position:absolute;left:6%;right:6%;bottom:35px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.8px}footer b{margin-left:15px;font-size:17px;font-weight:400}.review-strip{position:fixed;bottom:0;left:0;right:0;text-align:center;line-height:23px;background:#203c4a;color:#eee9dd;font-size:9px;letter-spacing:1px;z-index:10}
@media(max-width:760px){.hero{min-height:740px;max-height:none}.landscape{background-position:58% center}header{top:27px;left:7%;right:7%}.brand{font-size:10px;letter-spacing:1.9px}.brand span{font-size:9px}.edition{font-size:8px;letter-spacing:.7px}.edition b{font-size:17px;margin-left:8px}.copy{left:9%;top:20%}.eyebrow{font-size:9px;margin-bottom:18px;letter-spacing:2.5px}h1{font-size:46px;letter-spacing:-2.7px;line-height:1.17}.intro{font-size:12px;line-height:1.8;margin-top:18px}.links{font-size:10px;gap:22px;margin-top:22px}.links b{margin-left:10px}.character-stage{width:350px;left:56%;top:48%}.character-note{left:9%;top:75%;font-size:10px}.character-note span{font-size:8px;letter-spacing:1px}.character-note p{margin-top:6px}footer{left:7%;right:7%;bottom:42px;font-size:7px;letter-spacing:.9px}footer span:first-child{max-width:130px;line-height:1.6}footer b{margin-left:6px}}@media(max-width:360px){h1{font-size:40px}.copy{top:19%}.character-stage{width:310px;top:49%}.intro{font-size:11px}.edition{letter-spacing:0}}@media(prefers-reduced-motion:reduce){.window-light{animation:none}}

/* v002 tablet safe zones: character canvas and text never intersect. */
@media(min-width:761px) and (max-width:1100px){
 .copy{left:7%;top:26%;width:43%;max-width:43%}
 .copy h1{font-size:clamp(42px,5.3vw,58px);letter-spacing:-2.8px}
 .copy .intro{font-size:13px;line-height:1.8;overflow-wrap:anywhere}
 .copy .links{gap:18px;font-size:10px;flex-wrap:wrap}
 .copy .links b{margin-left:8px}
 .character-stage{left:77%;top:44%;width:34vw;max-width:360px}
 .character-note{left:7%;top:auto;bottom:12%;font-size:10px;max-width:43%}
}
@media(min-width:761px) and (max-width:1100px) and (max-height:720px){
 .hero{min-height:720px}
 .copy{top:24%}
 .character-stage{top:42%}
 .character-note{top:auto;bottom:10%}
}

/* Shared scene base: independent character and soft ambient light. */
.hero{background:#e9e6d9}.landscape{background-position:center 58%}.copy{top:26%;max-width:49%;padding:24px 30px 24px 0}.copy:before{content:"";position:absolute;inset:-45px -55px -45px -80px;background:radial-gradient(ellipse,#f5f0e5ed 0%,#f5f0e5c7 48%,transparent 73%);z-index:-1;pointer-events:none}.character-stage{width:560px;left:72%;top:36%}.contact-shadow{left:29%;width:43%;bottom:15.8%;height:3.1%}.character-note{left:83%;top:73%}.breeze{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 25% 40%,#fff4c22b,transparent 53%);animation:breeze 14s ease-in-out infinite alternate}@keyframes breeze{from{opacity:.4;transform:translateX(-1%)}to{opacity:.9;transform:translateX(1%)}}.offscreen .breeze,.is-hidden .breeze{animation-play-state:paused}
@media(max-width:760px){.landscape{background-position:62% center}.hero{min-height:780px}.copy{top:18%;max-width:87%;padding:12px 0}.copy:before{inset:-35px -15px -20px -35px;background:radial-gradient(ellipse,#f5f0e5f2,#f5f0e5cc 45%,transparent 75%)}.character-stage{width:380px;max-width:100vw;left:56%;top:46%}.character-note{left:9%;top:78%}.intro{max-width:290px}.brand{padding:5px;background:#f4eddfb8}}
@media(min-width:761px) and (max-width:1100px){.copy{left:7%;top:25%;max-width:45%;padding:20px 0}.character-stage{left:77%;top:45%;width:42vw;max-width:430px}.character-note{left:7%;top:auto;bottom:12%}}
@media(max-width:360px){.character-stage{width:330px;top:48%}h1{font-size:39px}.intro{font-size:11px}.copy{top:19%}}
@media(prefers-reduced-motion:reduce){.breeze,.window-light{animation:none}}

/* Shared responsive refinement: narrow contact shadow below the artwork, no scale distortion. */
.hero{background:#ece5d8}.landscape{background-position:center 60%}.character-stage{width:520px;left:72%;top:35%}.contact-shadow{left:39%;width:23%;bottom:15.8%;height:2.8%}.character-note{left:86%;top:73%}.eyebrow{letter-spacing:2px}
@media(max-width:760px){.landscape{background-position:64% center}.character-stage{width:380px;max-width:100vw;left:56%;top:46%}.character-note{left:9%;top:80%}.eyebrow{font-size:8px;letter-spacing:1.2px}}
@media(min-width:761px) and (max-width:1100px){.character-stage{left:77%;top:44%;width:40vw;max-width:430px}.character-note{left:7%;top:auto;bottom:12%}}
@media(max-width:360px){.character-stage{width:320px;top:49%}}

/* Shared responsive refinement: narrow contact shadow below the artwork, no scale distortion. */
.hero{background:#ece5d8}.landscape{background-position:center 60%}.character-stage{width:480px;left:72%;top:35%}.contact-shadow{left:35%;width:33%;bottom:15.8%;height:2.8%}.character-note{left:86%;top:73%}.eyebrow{letter-spacing:2px}
@media(max-width:760px){.landscape{background-position:64% center}.character-stage{width:380px;max-width:100vw;left:56%;top:46%}.character-note{left:9%;top:80%}.eyebrow{font-size:8px;letter-spacing:1.2px}}
@media(min-width:761px) and (max-width:1100px){.character-stage{left:77%;top:44%;width:40vw;max-width:430px}.character-note{left:7%;top:auto;bottom:12%}}
@media(max-width:360px){.character-stage{width:320px;top:49%}}

/* Shared responsive refinement: narrow contact shadow below the artwork, no scale distortion. */
.hero{background:#ece5d8}.landscape{background-position:center 60%}.character-stage{width:480px;left:72%;top:35%}.contact-shadow{left:35%;width:33%;bottom:15.8%;height:2.8%}.character-note{left:86%;top:73%}.eyebrow{letter-spacing:2px}
@media(max-width:760px){.landscape{background-position:64% center}.character-stage{width:380px;max-width:100vw;left:56%;top:46%}.character-note{left:9%;top:80%}.eyebrow{font-size:8px;letter-spacing:1.2px}}
@media(min-width:761px) and (max-width:1100px){.character-stage{left:77%;top:44%;width:40vw;max-width:430px}.character-note{left:7%;top:auto;bottom:12%}}
@media(max-width:360px){.character-stage{width:320px;top:49%}}

@media(max-width:760px){.landscape{background-size:auto 118%;background-position:64% top}}

/* 210 lunchbox: entire approved cell; rigid motion and shared shadow. */
.character-stage{width:420px;top:max(35%,calc(74% - 350px))}.contact-shadow{left:30%;width:40%;bottom:12.466667%;height:2.8%}
@media(max-width:760px){.landscape{background-size:cover;background-position:62% 60%}.character-stage{width:min(360px,calc(100vw - 88px));max-width:100vw;top:max(49%,calc(74% - min(300px,calc(83.333333vw - 73.333333px))))}}
@media(min-width:761px) and (max-width:1100px){.character-stage{width:38vw;max-width:380px;top:max(44%,calc(74% - min(316.666667px,31.666667vw)))}}

/*210 short-height review correction: rigid full-cell positioning within the viewport. */
@media(max-height:779px){.hero{height:100svh;min-height:0}.character-stage{top:auto;bottom:48px}.copy{top:18%}}
@media(max-width:480px) and (max-height:779px){.copy{top:max(80px,12%);max-width:87%;padding:0}.eyebrow{font-size:8px;line-height:1.2;margin:0 0 10px}h1{font-size:clamp(32px,8.75vw,40px);line-height:1.1;letter-spacing:-1.7px}.intro{font-size:11px;line-height:1.6;margin-top:10px;margin-bottom:0;max-width:100%}.links{font-size:9px;line-height:16px;gap:18px;margin-top:14px}.links b{margin-left:6px}.character-stage{top:auto;bottom:36px;width:min(360px,calc(100vw - 88px),calc(100svh - 344px));left:56%}.character-note{display:none}}
@media(min-width:481px) and (max-width:760px) and (max-height:779px){.copy{left:7%;top:18%;max-width:45%;padding:0}h1{font-size:clamp(32px,4.7vw,40px);line-height:1.1;letter-spacing:-1.7px}.intro{font-size:11px;line-height:1.65}.links{font-size:9px;gap:14px}.links b{margin-left:6px}.character-stage{top:auto;bottom:48px;left:80%;width:min(320px,38vw)}.character-note{left:7%;top:auto;bottom:12%}}

/* Very short/landscape screens use ordinary document scrolling instead of a sticky crop. */
@media(max-height:559px){.experience.motion-restored{height:auto!important;min-height:0!important}.experience.motion-restored>.hero{position:relative!important;top:auto!important;height:560px;min-height:560px}.experience.motion-restored .landscape,.experience.motion-restored .copy{transform:none!important;opacity:1!important}.experience.motion-restored .character-stage{transform:translateX(-50%)!important}.experience.motion-restored .character-note{opacity:1!important;transform:none!important}}
@media(max-width:480px) and (max-height:559px){.character-stage{width:min(216px,calc(100vw - 88px))}}

/* Narrow tall screens: reserve comfortable copy-to-artwork clearance at the780px boundary. */
@media(max-width:480px) and (min-height:780px){.copy{top:14%}.character-stage{top:calc(max(49%,calc(74% - min(300px,calc(83.333333vw - 73.333333px)))) + 16px)}}

/* Keep focused hero links at their readable narrow-screen initial position. */
@media(max-width:480px){.experience.motion-restored .copy:focus-within{transform:none!important}}