/* Episode 01: reading, evidence, implementation. Scoped to one reviewed article. */
.pj-episode-one .ps-document{max-width:1320px;width:86%}.pj-episode-one .ps-guide-top{padding-top:150px}.pj-episode-one .pj-hero{grid-template-columns:1.25fr .75fr;gap:7%;padding-bottom:65px;align-items:center}.pj-episode-one .pj-hero h1{font-size:clamp(34px,3.7vw,58px);line-height:1.28;letter-spacing:-.055em}.pj-episode-one .pj-kicker{margin-bottom:35px}.pj-episode-one .pj-hero .pj-lead{font-size:17px;line-height:1.85;max-width:600px}.pj-episode-one .pj-portrait img{max-height:560px;object-fit:cover;object-position:center 28%}.pj-episode-one .pj-date{font-size:13px}.pj-episode-one .pj-inline-link{font-size:15px}.pj-episode-one .pj-contents{display:grid;grid-template-columns:repeat(3,1fr);gap:0 35px;border-top:1px solid #1c2723;border-bottom:1px solid #cdd0cc;padding:20px 0;margin-bottom:65px}.pj-contents a{font-size:14px;padding:13px 0;text-decoration:none}.pj-contents a:hover{text-decoration:underline}.pj-contents a span{font-size:11px;color:#6d746f;margin-right:15px}.pj-episode-one .pj-article-intro{max-width:760px;margin:0 auto 75px}.pj-episode-one .pj-article-intro p,.pj-episode-one .pj-chapter>p,.pj-episode-one .pj-detail-pair p,.pj-episode-one .pj-references>p{font-size:17px;line-height:2;letter-spacing:-.025em;word-break:keep-all;overflow-wrap:break-word}.pj-episode-one .pj-chapter{padding:65px 0 25px;border-top:1px solid #cbd0cb;scroll-margin-top:115px}.pj-chapter-heading{max-width:760px;margin:0 auto 30px}.pj-chapter-heading>span{font-size:11px;letter-spacing:.13em;color:#64756a}.pj-chapter-heading h2{font-size:clamp(27px,3vw,41px);font-weight:500;line-height:1.4;letter-spacing:-.04em;margin:20px 0 0;word-break:keep-all}.pj-episode-one .pj-chapter>p{max-width:760px;margin:24px auto}.pj-episode-one p code{font: .88em Consolas,monospace;background:#edf0ec;border-radius:3px;padding:2px 5px;overflow-wrap:anywhere}.pj-episode-one p a{border-bottom:1px solid #87998b}.pj-evidence{margin:42px 0 52px}.pj-evidence>a{display:block;background:#202622}.pj-evidence img{display:block;width:100%;height:auto}.pj-evidence figcaption{padding:16px 0;display:grid;grid-template-columns:1fr 1.6fr;gap:30px;border-bottom:1px solid #daddd7;font-size:13px;line-height:1.8;color:#646b65;word-break:keep-all}.pj-evidence figcaption b{color:#24332a;font-weight:500}.pj-episode-one .pj-code{max-width:940px;margin:32px auto 34px;background:#17241f;color:#ebf0ea;border-radius:3px;overflow:hidden}.pj-code figcaption{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:18px 22px;border-bottom:1px solid #35413b;font:12px/1.7 Arial,'Malgun Gothic',sans-serif}.pj-code figcaption a{color:#adc8b5;text-decoration:underline;text-underline-offset:3px}.pj-code pre{margin:0;padding:23px 0 27px;overflow:auto;font:13px/1.85 Consolas,'Courier New',monospace;tab-size:2;color:inherit;background:transparent}.pj-code pre:focus{outline:2px solid #a6caba;outline-offset:-3px}.pj-code code{font:inherit;background:transparent;color:inherit;padding:0;white-space:pre}.pj-code .code-line{display:block;min-height:1.85em;padding-right:22px}.pj-code .code-line i{display:inline-block;width:48px;box-sizing:border-box;padding-right:16px;margin-right:12px;text-align:right;font-style:normal;color:#83a08d;user-select:none;border-right:1px solid #35413b}.pj-diagram{background:#edf0e9;border:1px solid #d8dfd3;margin:38px 0 46px;padding:32px 38px}.diagram-caption{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #c8d0c2;padding-bottom:20px;line-height:1.6}.diagram-caption b{font-size:21px;letter-spacing:-.04em;font-weight:500;color:#1a3024}.diagram-caption>span{font-size:11px;color:#687362;padding-top:7px}.document-flow{display:grid;grid-template-columns:1.25fr 55px 1fr;align-items:center;gap:20px;padding:32px 0}.document-stack{display:grid;gap:10px}.stack-row{background:#fff;border:1px solid #ced6c7;padding:18px 22px}.stack-row span{display:block;font-size:11px;color:#67785b;letter-spacing:.06em}.stack-row strong{display:block;font:italic 35px Georgia,serif;margin:10px 0;color:#192c29}.stack-row small{display:block;font-size:12px;color:#697363}.mask-attachment{padding:9px 18px 9px 25px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:12px;background:#dfe6d6;color:#415039;margin-left:24px}.mask-attachment small{font-size:11px}.image-row{display:flex;align-items:center;gap:22px}.image-row img{width:75px;height:88px;object-fit:cover}.image-row strong{font-style:normal;font-size:25px}.flow-arrow{font-size:32px;color:#627953;text-align:center}.document-output{border-left:1px solid #c1cbb7;padding:20px 0 20px 30px}.document-output>span{font:13px Consolas,monospace;color:#5d7451}.document-output strong{display:block;font-size:28px;line-height:1.4;font-weight:500;letter-spacing:-.04em;margin:17px 0}.document-output p{font-size:14px;line-height:1.9;color:#687460}.pj-diagram>figcaption{font-size:12px;line-height:1.9;color:#56654e;border-top:1px solid #c8d0c2;padding-top:18px;word-break:keep-all}.mask-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:35px 0;text-align:center}.mask-demo>div{min-width:0}.mask-swatch{width:62px;height:62px;display:block;margin:0 auto 20px;border:1px solid #b5bfad}.mask-swatch.white{background:white}.mask-swatch.gray{background:#808080}.mask-swatch.black{background:#111}.mask-demo b{font-size:17px;font-weight:500}.mask-demo p{font-size:13px;color:#5f6e58;line-height:1.7}.mask-equation{background:#dde5d5;text-align:center;font-size:15px;padding:18px;line-height:1.8;margin-bottom:25px}.pj-detail-pair{max-width:940px;margin:45px auto 55px;display:grid;grid-template-columns:310px 1fr;gap:45px;align-items:center}.pj-detail-pair figure{margin:0;min-width:0}.pj-ui-crop{position:relative;overflow:hidden;background:#292929;border:1px solid #d1d8ce;height:475px;width:100%}.pj-ui-crop img{position:absolute;width:1600px;max-width:none!important;height:1050px;left:-1294px;top:-148px}.pj-ui-crop.mask-crop img{top:-422px}.pj-detail-pair figcaption{font-size:12px;line-height:1.85;color:#6a7564;padding-top:12px}.pj-detail-pair figcaption b{display:block;color:#304a35;margin-bottom:4px}.pj-detail-pair h3{font-size:25px;font-weight:500;line-height:1.5;letter-spacing:-.04em}.pj-episode-one .pj-small{font-size:12px!important;color:#72766f;line-height:1.9!important}.pj-save-pair{display:grid;grid-template-columns:1fr 1fr;gap:25px;max-width:940px;margin:35px auto 50px}.pj-save-pair>div{padding:28px 30px;background:#f0f2ed;border-top:2px solid #455b42}.pj-save-pair span{font-size:12px;color:#677660}.pj-save-pair h3{font-size:26px;font-weight:500;margin:16px 0}.pj-save-pair p{font-size:15px;line-height:1.9}.pj-result-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:850px;margin:38px auto}.pj-result-pair figure{margin:0}.pj-result-pair img{width:100%;height:auto;display:block}.pj-result-pair figcaption{font-size:12px;color:#687160;padding-top:12px}.pj-references{padding:55px 0;margin-top:30px;border-top:1px solid #cbd0cb}.pj-references h2{font-size:28px;font-weight:500;letter-spacing:-.04em}.pj-references>p{max-width:850px}.pj-references ul{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 45px;margin:25px 0}.pj-references li{padding:22px 0;border-top:1px solid #daddd7;font-size:15px;line-height:1.8}.pj-references li a{text-decoration:underline;text-underline-offset:4px}.pj-references li span{display:block;font-size:13px;color:#66735f;margin-top:6px}.pj-episode-one .pj-next{margin-top:15px}
@media(max-width:800px){.pj-episode-one .pj-hero{grid-template-columns:1fr;gap:35px}.pj-episode-one .pj-hero h1{font-size:38px}.pj-episode-one .pj-portrait{max-width:440px}.pj-episode-one .ps-guide-top{padding-top:112px}.pj-episode-one .pj-contents{grid-template-columns:1fr 1fr;gap:0 15px;margin-bottom:35px}.pj-contents a{font-size:12px}.pj-contents a span{margin-right:8px}.pj-episode-one .pj-article-intro{margin-bottom:45px}.pj-episode-one .pj-chapter{padding-top:38px}.pj-episode-one .pj-article-intro p,.pj-episode-one .pj-chapter>p,.pj-episode-one .pj-detail-pair p,.pj-episode-one .pj-references>p{font-size:16px;line-height:1.95}.pj-evidence figcaption{grid-template-columns:1fr;gap:5px}.pj-code figcaption{display:block;padding:14px 15px}.pj-code figcaption a{display:block;font-size:11px;margin-top:4px}.pj-code pre{font-size:12px}.pj-code .code-line i{width:37px;margin-right:8px;padding-right:9px}.pj-diagram{padding:22px 20px}.diagram-caption{display:block}.diagram-caption b{display:block;font-size:20px}.diagram-caption>span{display:block}.document-flow{grid-template-columns:1fr;gap:12px}.flow-arrow{transform:rotate(90deg)}.document-output{border-left:0;border-top:1px solid #c1cbb7;padding:20px 0 0}.document-output strong br{display:none}.document-output strong{font-size:25px}.mask-demo{gap:9px}.mask-demo b{font-size:13px}.mask-demo p{font-size:11px}.mask-swatch{width:45px;height:45px}.mask-equation{font-size:12px;padding:12px}.pj-detail-pair{grid-template-columns:1fr;gap:18px}.pj-detail-pair figure{width:100%;max-width:310px;margin:auto}.pj-save-pair{grid-template-columns:1fr;gap:15px}.pj-result-pair{gap:14px}.pj-result-pair figcaption{font-size:10px}.pj-references ul{grid-template-columns:1fr}.pj-episode-one .pj-portrait img{max-height:480px}.pj-episode-one .pj-hero .pj-lead{font-size:16px}}
@media(prefers-reduced-motion:reduce){.pj-episode-one *{scroll-behavior:auto!important}}
/* Review fixes: persistent header stays readable over long-form content. */
.pj-episode-one .site-header{background:rgba(255,255,255,.97)!important;mix-blend-mode:normal!important;color:#111!important;border-bottom:1px solid #edf0e9;backdrop-filter:blur(8px)}
.pj-episode-one .site-header a,.pj-episode-one .site-header button{color:#111!important}.pj-episode-one .pj-code figcaption{color:#e2e9df}.pj-episode-one .pj-article-intro p,.pj-episode-one .pj-chapter>p,.pj-episode-one .pj-detail-pair p{font-weight:400;color:#303932}.pj-episode-one .pj-hero h1{text-wrap:balance}.pj-episode-one .pj-code pre{scrollbar-color:#6c8672 #17241f}.pj-episode-one .pj-code figcaption::after{content:'TypeScript';font-size:10px;color:#acc3af}.pj-episode-one .pj-code pre::after{content:'';display:block}.pj-episode-one .pj-code:has(pre:focus){outline:2px solid #52745d;outline-offset:4px}
@media(max-width:800px){.pj-episode-one .pj-code figcaption::after{content:'가로로 밀어 전체 코드 보기';display:block;margin-top:8px;color:#c2d5c4}.pj-episode-one .pj-hero h1{font-size:35px;line-height:1.35}}
.build-flow{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;gap:15px;align-items:center;margin:30px 0}.build-flow>div{border:1px solid #c8d0c2;background:white;padding:25px 18px;min-height:110px}.build-flow b,.build-branches b{font:17px/1.8 Consolas,monospace;display:block;color:#193b24}.build-flow span{display:block;font-size:14px;line-height:1.85;margin-top:10px}.build-flow i{font-style:normal;font-size:24px;color:#567649;text-align:center}.build-branches{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 0 30px}.build-branches>div{border-top:2px solid #6c8a59;padding:20px;background:#e1e8d9}.build-branches b{font-size:14px}.build-branches span{font:12px/1.8 Consolas,monospace;display:block;margin-top:8px;overflow-wrap:anywhere}@media(max-width:800px){.build-flow{grid-template-columns:1fr;gap:10px}.build-flow i{transform:rotate(90deg)}.build-flow>div{min-height:0}.build-branches{grid-template-columns:1fr}.build-flow b{font-size:18px}}
