*{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%}
}