/* PIGLOG scrolltelling landing — 마대리 2026-11 */
@font-face{font-family:PLSans;src:url(fonts/pl-600.woff2) format('woff2');font-weight:100 649;font-display:swap}
@font-face{font-family:PLSans;src:url(fonts/pl-700.woff2) format('woff2');font-weight:650 749;font-display:swap}
@font-face{font-family:PLSans;src:url(fonts/pl-800.woff2) format('woff2');font-weight:750 849;font-display:swap}
@font-face{font-family:PLSans;src:url(fonts/pl-900.woff2) format('woff2');font-weight:850 1000;font-display:swap}
@font-face{font-family:PLDeva;src:url(fonts/pl-deva.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{--green:#258258;--action:#24835A;--ink:#113025;--coral:#F4827C;--mint:#EAF6EE;--sub:#52685B;--line:#11302522;
  --sans:PLSans,Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif}
*{box-sizing:border-box}
html{background:#F8FCF9;color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:4px;border-radius:999px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:60;background:#fff;color:var(--ink);padding:10px 16px;border-radius:12px;font-weight:700}
.skip:focus{top:12px}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* header (as the existing landing) */
.hd{position:fixed;left:0;top:0;right:0;z-index:30;padding:26px 4vw;padding-top:calc(26px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;color:#fff;pointer-events:none;transition:color .35s}
.hd>*{pointer-events:auto}
body.light .hd{color:var(--ink)}
.brand{display:flex;gap:10px;align-items:center;font-size:17px;letter-spacing:-.6px}
.brand b{font-weight:800}
.brand-ic{width:30px;height:30px;display:block}
.brand small{font-size:10px;letter-spacing:.14em;opacity:.6;margin-left:6px;font-weight:600}
.hd-r{display:flex;gap:24px;align-items:center;font-size:12px;font-weight:600}
.navstart{border:1px solid #ffffff55;padding:11px 20px;border-radius:99px;transition:background .2s,border-color .35s;font-weight:700}
.navstart:hover{background:#ffffff22}
body.light .navstart{border-color:#11302533;background:#ffffffb8}
body.light .navstart:hover{background:#fff}

/* story */
#pl-story{position:relative;height:3000vh;background:#0B0F0D}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#F8FCF9}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;will-change:opacity;contain:strict;background:#F8FCF9}
.scene.on{visibility:visible}
.scene>svg{display:block;width:100%;height:100%}
.intro{opacity:1;visibility:visible;background:#0B0F0D;will-change:transform,opacity}
.intro #pl-logo,.intro #pl-cloudsFront{display:none}

/* copy (real text) */
.copy-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.copy{position:absolute;left:6vw;top:19vh;width:44vw;opacity:0;visibility:hidden;will-change:opacity,transform}
.copy.on{visibility:visible;opacity:1}
.copy h2{margin:0;font-weight:900;font-size:clamp(38px,4.6vw,96px);line-height:1.13;letter-spacing:-.05em;color:var(--ink);word-break:keep-all}
.ln{display:block;overflow:hidden;padding:0 .04em .08em 0;margin-bottom:-.08em}
.ln>span{display:inline-block;transform:translateY(112%);will-change:transform}
.ln.g,.copy em{color:var(--green);font-style:normal}
.sub{margin:.9em 0 0;font-size:clamp(16px,1.42vw,27px);font-weight:600;letter-spacing:-.03em;color:var(--sub);opacity:0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;opacity:0}
.chip{display:inline-flex;align-items:center;height:clamp(36px,2.6vw,48px);padding:0 clamp(16px,1.2vw,22px);border-radius:99px;background:#fff;border:1.5px solid #D5E5DB;font-weight:700;font-size:clamp(14px,1.05vw,19px);letter-spacing:-.02em}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}
.copy.center{left:0;right:0;width:auto;text-align:center}
.copy.center .ln{display:inline-block}
.copy.top{top:12.5vh}
.copy.top h2{font-size:clamp(34px,4.2vw,84px)}
.ex{margin:14px 0 0;opacity:0}
.ex span{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--sub);background:#fff;border:1px solid #D5E5DB;border-radius:99px;padding:5px 12px}
.copy.end{top:auto;bottom:15vh}
.copy.end h2{font-size:clamp(36px,4.4vw,88px)}
.ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:34px 0 0;opacity:0}
.copy.live{pointer-events:auto}
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;border-radius:999px;padding:18px 28px;font-size:16px;font-weight:700;letter-spacing:-.02em;transition:transform .25s,background .25s}
.cta:hover{transform:translateY(-2px)}
.cta.primary{background:var(--action);color:#fff}
.cta.primary:hover{background:#1B6D49}
.cta.secondary{border:1px solid #11302533;background:#ffffffc0;color:var(--ink)}
.cta span{font-size:19px;line-height:1}
.reduced-only{display:none}

/* progress rail + chapter (as the existing landing) */
.rail{position:fixed;z-index:25;right:25px;top:50%;height:140px;width:3px;border-radius:3px;background:#ffffff33;transform:translateY(-50%);transition:background .35s}
body.light .rail{background:#11302522}
.rail i{display:block;width:3px;border-radius:3px;background:var(--coral);height:100%;transform-origin:top;transform:scaleY(0)}
.chap{position:fixed;z-index:20;left:4vw;bottom:calc(26px + env(safe-area-inset-bottom));color:var(--ink);background:#ffffffd9;padding:9px 15px;border-radius:99px;display:flex;gap:14px;align-items:center;pointer-events:none;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .3s}
.chap span:first-child{opacity:.45;font-variant-numeric:tabular-nums}
body.light .chap.on{opacity:1}

/* footer */
.ft{position:relative;z-index:3;background:var(--mint);padding:72px 8vw 28px}
.ft-main{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:48px;border-bottom:1px solid var(--line)}
.ft-title{margin:0;font-size:clamp(26px,2.6vw,44px);font-weight:900;letter-spacing:-.05em}
.ft-title em{font-style:normal;color:var(--green)}
.ft-links{display:flex;gap:10px;margin:0;flex-wrap:wrap}
.cta.sm{padding:15px 22px;font-size:14px;gap:20px}
.ft-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:11px;letter-spacing:.03em;color:var(--sub)}
.totop{font-weight:700;color:var(--ink)}

@media (max-width:1100px) and (min-width:769px){.copy{width:46vw}.hd-r .tag{display:none}}
@media (max-width:768px){
  .hd{padding:18px 20px;padding-top:calc(18px + env(safe-area-inset-top))}
  .brand{font-size:15px}.brand-ic{width:26px;height:26px}.brand small,.hd-r .tag{display:none}
  .navstart{padding:9px 16px;font-size:12px}
  #pl-story{height:2200vh}
  .copy{left:22px;right:22px;width:auto;top:calc(80px + env(safe-area-inset-top))}
  .copy h2{font-size:clamp(27px,8vw,42px);line-height:1.18;letter-spacing:-.055em}
  .sub{font-size:clamp(14px,3.9vw,18px);margin-top:.7em}
  .chips{margin-top:14px;gap:8px}.chip{height:32px;padding:0 13px;font-size:13px}
  .copy.top{top:calc(80px + env(safe-area-inset-top))}
  .copy.top h2,.copy.end h2{font-size:clamp(27px,8vw,42px)}
  .copy.center .ln{display:block}
  .ex{margin-top:10px}
  .copy.end{bottom:auto;top:58%}
  .ctas{flex-direction:column;align-items:stretch;margin-top:26px;padding:0 6px}
  .cta{padding:17px 24px;font-size:15px}
  .rail{right:10px;height:90px}
  .chap{left:20px;font-size:9px;gap:10px;bottom:calc(20px + env(safe-area-inset-bottom))}
  .ft{padding:52px 22px 24px}.ft-main{padding-bottom:34px}
}

/* prefers-reduced-motion: static scenes + copy, stacked */
body.reduced #pl-story{height:auto;background:#F8FCF9}
body.reduced .stage{position:relative;height:auto;overflow:visible}
body.reduced .scene{position:relative;inset:auto;opacity:1;visibility:visible;height:auto;aspect-ratio:16/9;contain:none;overflow:hidden;will-change:auto;border-bottom:1px solid var(--line)}
body.reduced .intro{aspect-ratio:auto;height:100vh}
body.reduced .copy-layer{display:none}
body.reduced .scene .copy{opacity:1;visibility:visible;z-index:5}
body.reduced .scene .copy *{opacity:1!important;transform:none!important}
body.reduced .reduced-only{display:block}
body.reduced .rail,body.reduced .chap{display:none}
body.reduced .copy.end{pointer-events:auto}
@media (max-width:768px){body.reduced .scene{aspect-ratio:9/16}body.reduced .intro{aspect-ratio:auto}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}