.story *{box-sizing:border-box}.story{scroll-behavior:smooth}.story{margin:0;background:#f5f7fa;color:#17243f;font-family:Pretendard,system-ui,sans-serif;word-break:keep-all}.story{--p:0;height:175svh}.story .stage{position:sticky;top:80px;min-height:690px;height:calc(100svh - 80px);max-width:1280px;margin:auto;display:grid;grid-template-columns:47% 53%;align-items:center;padding:30px 24px 40px;gap:10px}.story .kicker{font-size:10px;letter-spacing:.18em;font-weight:750;color:#64748b}.story .audience{font-size:14px;margin:36px 0 20px}.story h1{font-size:clamp(44px,4.6vw,68px);line-height:1.15;letter-spacing:-.065em;margin:0 0 28px;font-weight:800}.story em{font-style:normal;color:#3565d8}.story .lead{font-size:18px;line-height:1.8;color:#526077}.story .lead strong{font-weight:500;color:#17243f}.story .actions{display:flex;gap:24px;align-items:center;margin-top:30px}.story .cta{background:#17243f;color:white;padding:18px 22px;text-decoration:none;border-radius:5px;font-size:14px;font-weight:700}.story .cta span{margin-left:22px}.story .watch{font-size:13px;color:#17243f;text-underline-offset:5px}.story .requirements{font-size:10px;line-height:1.7;color:#657188;margin-top:16px}.story .progress{display:flex;align-items:center;gap:12px;margin-top:42px;font-size:12px;color:#64748b}.story .progress i{width:30px;height:1px;background:#cbd3df}.story .progress .active{color:#17243f;font-weight:800}.story .scroll-note{font-size:9px;letter-spacing:.16em;color:#68768c;margin-top:28px}.story .scroll-note span{margin-left:16px}.story .scene{height:590px;position:relative;perspective:1400px}.story .scene-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em;color:#627188;margin:0 12px 16px}.story .state{letter-spacing:0}.story .paper{position:relative;height:545px;background:#fff;border:1px solid #e1e6ed;box-shadow:0 24px 60px #17243f12;overflow:hidden;transform:rotate(calc(-3deg + var(--p)*3deg));border-radius:8px}.story .photo{position:absolute;left:calc(0% + var(--p)*6%);top:calc(0px + var(--p)*102px);width:calc(100% - var(--p)*12%);height:calc(545px - var(--p)*342px);overflow:hidden;border-radius:calc(var(--p)*4px)}.story .photo img{height:100%;width:100%;object-fit:cover;object-position:center 49%;display:block}.story .photo:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#101c2e99);opacity:calc(1 - var(--p))}.story .photo-caption{position:absolute;z-index:1;bottom:35px;left:32px;color:white;font-size:30px;font-weight:650;line-height:1.4;letter-spacing:-.04em;opacity:calc(1 - var(--p)*2)}.story .article-heading{position:absolute;left:6%;top:24px;opacity:var(--p)}.story .article-heading small{font-size:9px;color:#66758a}.story .article-heading h2{font-size:21px;margin:8px 0;line-height:1.3;letter-spacing:-.03em}.story .article-body{position:absolute;top:318px;left:6%;right:6%;font-size:12px;line-height:1.8;color:#526077;opacity:var(--p);transform:translateY(calc(15px - var(--p)*15px))}.story .article-body p{margin:0 0 12px}.story .complete{border-top:1px solid #e4e9ef;margin-top:18px;padding-top:14px;font-weight:700;color:#17243f}.story .complete span{float:right;color:#64748b;font-weight:400}.story .field-note{position:absolute;bottom:-7px;left:24px;background:#fff;padding:17px 22px;border-left:2px solid #17243f;box-shadow:0 8px 30px #17243f0c;opacity:calc(1 - var(--p)*2);pointer-events:none}.story .field-note>span{font-size:9px;letter-spacing:.12em;color:#64748b}.story .field-note p{font-size:12px;line-height:1.7;margin:8px 0}.story .field-note small{font-size:9px;color:#64748b}.story .proof{max-width:1120px;margin:0 auto;padding:100px 24px 70px;text-align:center}.story .proof h2{font-size:40px;letter-spacing:-.05em;margin:20px 0}.story .proof>p:not(.kicker){color:#526077}.story .proof img{width:100%;height:auto;margin-top:35px;border:1px solid #dbe2ec;border-radius:10px;box-shadow:0 20px 60px #17243f0b}.story .proof aside{font-size:12px;line-height:1.8;color:#64748b;margin-top:40px}.story a:focus-visible{outline:3px solid #3565d8;outline-offset:5px}.story #story-end{scroll-margin-top:100px}@media(max-width:800px){.story{height:auto;--p:1!important}.story .stage{position:relative;top:0;height:auto;min-height:0;grid-template-columns:1fr;padding:40px 22px;gap:40px}.story .audience{margin-top:24px}.story h1{font-size:44px}.story .lead{font-size:16px}.story .actions{gap:18px}.story .cta{padding:16px}.story .cta span{margin-left:8px}.story .progress{margin-top:26px}.story .scroll-note{display:none}.story .scene{height:570px}.story .paper{transform:none}.story .scene-label{font-size:8px}.story .article-heading h2{font-size:20px}.story .article-body{font-size:12px}.story .field-note{display:none}.story .proof{padding-top:45px}.story .proof h2{font-size:30px}}@media(prefers-reduced-motion:reduce){.story{scroll-behavior:auto}.story{--p:1!important;height:auto}.story .stage{position:relative;top:0}.story .scroll-note{display:none}}.story .field-note{left:auto;right:18px}.story .photo-caption{font-size:25px;bottom:48px}@media(min-width:801px) and (max-width:1100px){.story .photo-caption{bottom:150px}}.story h1{font-size:clamp(36px,3.3vw,48px);line-height:1.3}.story .detail{font-size:14px;line-height:1.9;color:#64748b;max-width:530px}@media(max-width:800px){.story h1{font-size:34px}.story .detail{font-size:13px}.story .lead{font-size:16px}}
/* Readability and article spacing repair */
.story .audience{font-size:16px;margin:24px 0 18px}
.story .lead{font-size:21px;line-height:1.7;color:#37465f}
.story .detail{font-size:17px;line-height:1.85;color:#46566e}
.story .cta,.story .watch{font-size:16px}
.story .requirements{font-size:13px;color:#526077}
.story .progress{font-size:14px;margin-top:28px}
.story .kicker{font-size:11px}
.story .article-heading{top:22px;right:6%}
.story .article-heading small{font-size:12px}
.story .article-heading h2{font-size:22px;line-height:1.35;margin:8px 0 0}
.story .photo{top:calc(var(--p)*130px);height:calc(545px - var(--p)*365px)}
.story .article-body{top:324px;font-size:15px;line-height:1.65}
.story .article-body p{margin:0 0 10px}
.story .complete{margin-top:12px;padding-top:12px;font-size:13px}
@media(max-width:1100px){.story .stage{grid-template-columns:46% 54%}.story .article-heading h2{font-size:20px}.story .article-body{font-size:14px}}
@media(max-width:800px){.story .stage{grid-template-columns:1fr}.story .lead{font-size:19px}.story .detail{font-size:16px}.story .requirements{font-size:12px}.story .cta,.story .watch{font-size:14px}.story .article-heading h2{font-size:20px}.story .article-body{font-size:14px}.story .paper{height:580px}.story .scene{height:605px}}