/* ver.2 — paper grid, giant green serif, engraved money in 3D, handwritten margin notes */
:root{
  --paper:#F9EBD7; --paper2:#FCF5EA; --ink:#1B1712; --ink2:#4A4238; --soft:#7A6E5E; --ghost:#D9C6A8;
  --green:#046A38; --green2:#046A38; --verm:#E34222; --grid:rgba(70,45,10,.08);
  --serif:"Gowun Batang","Nanum Myeongjo","AppleMyungjo",serif;
  --display:"Nanum Myeongjo","AppleMyungjo",serif;
  --hand:"Nanum Pen Script","Apple SD Gothic Neo",cursive;
  --gut:clamp(18px,2.4vw,28px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--green);color:#fff}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}

/* background grid + 3D layer */
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:calc(100vw / 9) 168px;background-position:-1px 84px}
#money{position:fixed;inset:0;width:100vw;height:100vh;z-index:5;pointer-events:none}
main,.top,.strip,.foot{position:relative;z-index:2}

/* right rail */
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;color:var(--green)}
.rail i{display:block;width:1px;height:150px;background:rgba(4,106,56,.3);position:relative}
.rail b{position:absolute;left:-1px;top:0;width:3px;height:0;background:var(--green)}
@media (max-width:720px){.rail{display:none}}

/* nav */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 var(--gut);height:84px;border-bottom:1px solid var(--grid);background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(6px);position:sticky;top:0;z-index:8}
.brand{font-weight:700;font-size:18px;text-decoration:none;white-space:nowrap}
.brand em{font-weight:300;font-style:normal;margin-left:8px;color:var(--ink2)}
.links{display:flex;gap:clamp(18px,4vw,60px)}
.links a{text-decoration:none;font-size:17px;position:relative;padding:12px 0}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.links a:hover::after{transform:scaleX(1)}
.buy{justify-self:end;font-weight:700;font-size:17px;text-underline-offset:5px;text-decoration-thickness:1.5px;white-space:nowrap}
.buy sup{font-weight:300;font-size:11px;margin-left:4px}
@media (max-width:820px){.links{display:none}.top{grid-template-columns:1fr auto;height:64px}.brand{font-size:16px}.buy{font-size:15px}}

/* hero */
.hero{position:relative;min-height:calc(100svh - 84px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px var(--gut) 120px}
.kicker{font-family:var(--display);font-size:clamp(22px,2.6vw,36px);font-weight:400;letter-spacing:-.01em;margin-bottom:clamp(6px,2vh,20px)}
.giant{font-family:var(--display);font-weight:400;color:var(--green);letter-spacing:-.06em;line-height:1.02;text-wrap:balance}
.hero .giant{font-size:clamp(76px,15.4vw,246px);display:flex;flex-direction:column;align-items:center}
.hero .giant span:last-child{margin-top:.02em}
.byline{margin-top:clamp(18px,3vh,34px);font-size:clamp(17px,1.6vw,22px)}
.byline em{font-style:normal;color:var(--ink2);margin-right:10px}
.scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:120px;display:flex;flex-direction:column;align-items:center;text-decoration:none}
.scroll svg{width:120px;height:56px;overflow:visible;font-family:var(--hand);font-size:28px;letter-spacing:.35em;fill:var(--ink)}
.mouse{width:26px;height:40px;border:1.5px solid var(--ink);border-radius:14px;margin-top:-26px;position:relative}
.mouse i{position:absolute;left:50%;top:7px;width:2px;height:8px;margin-left:-1px;background:var(--ink);border-radius:2px;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* handwritten notes */
.note{position:absolute;font-family:var(--hand);color:var(--green);font-size:clamp(22px,2.1vw,30px);line-height:1;transform:rotate(var(--r,0deg));opacity:.82;white-space:nowrap;pointer-events:none;z-index:1}
.note.in{font-size:24px}
@media (max-width:720px){.hero .note:nth-of-type(n+3){display:none}.hero .note:nth-of-type(2){left:auto!important;right:8%;top:40%!important}.note{font-size:20px}}
.anchor{position:absolute;width:1px;height:1px;pointer-events:none}

/* info strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px var(--gut);font-size:16px;border-top:1px solid var(--grid);border-bottom:1px solid var(--grid)}
.strip span{text-align:center}
.strip b:last-child{text-align:right}
.strip .clock{color:var(--green);font-variant-numeric:tabular-nums}
@media (max-width:720px){.strip{grid-template-columns:1fr 1fr;font-size:14px}.strip span:nth-of-type(1){display:none}.strip .clock{text-align:right}.strip b:last-child{display:none}}

/* sections */
.sec{position:relative;padding:clamp(110px,16vh,180px) var(--gut);display:flex;flex-direction:column;align-items:center;gap:28px;max-width:1440px;margin:0 auto}
.label{font-family:var(--hand);font-size:28px;color:var(--green);transform:rotate(-2deg)}
.sec-head{display:flex;gap:14px;align-items:baseline;font-size:17px}
.sec-head span{font-style:normal;color:var(--ink2)}
.mid{font-family:var(--display);font-weight:400;font-size:clamp(34px,5.4vw,80px);line-height:1.3;letter-spacing:-.04em;text-align:center;text-wrap:balance}
.center{text-align:center}
.narrow{max-width:620px}
.soft{color:var(--ink2);font-size:clamp(16px,1.4vw,20px);line-height:1.85}
.line{font-family:var(--display);font-size:clamp(21px,2.2vw,30px);font-weight:400;letter-spacing:-.02em;line-height:1.6}
.fine{font-size:14px;color:var(--soft)}

/* scroll reveal text */
.reveal{font-size:clamp(24px,3.4vw,50px);line-height:1.5;letter-spacing:-.035em;text-align:center;max-width:none;font-weight:400;font-family:var(--display)}
.reveal.big{font-size:clamp(28px,4.6vw,72px);line-height:1.42}
.reveal .w{color:var(--ghost);transition:color .25s}
.reveal .w.on{color:var(--ink)}
.reveal .inl{display:inline-block;width:.95em;height:.95em;vertical-align:-.12em;margin:0 .1em;filter:grayscale(1)}

/* before / after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);width:100%;max-width:1060px;margin-top:12px}
.page{position:relative;border-radius:4px;padding:clamp(26px,3.4vw,44px);min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 18px 40px -22px rgba(0,0,0,.35)}
.page p{font-family:var(--display);font-size:clamp(22px,2.3vw,32px);line-height:1.38;letter-spacing:-.03em;font-weight:400}
.page .tag{font-size:13px;letter-spacing:.12em}
.before{background:var(--paper2);color:var(--ink2);transform:rotate(-1.2deg)}
.before p{text-decoration:line-through;text-decoration-color:rgba(4,106,56,.55);text-decoration-thickness:2px}
.after{background:var(--green2);color:#fff;transform:rotate(.8deg)}
@media (max-width:720px){.ba{grid-template-columns:1fr}.before,.after{transform:none}}

/* hook + price cards */
.go{position:relative;display:block;width:100%;max-width:1060px;text-decoration:none;border:1px solid var(--ink);border-radius:4px;padding:clamp(24px,3.4vw,40px);background:var(--paper2);overflow:hidden;isolation:isolate;transition:color .35s .05s,transform .3s cubic-bezier(.2,.7,.2,1)}
.go::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.go:hover{color:var(--paper);transform:translateY(-3px)}
.go:hover::before{transform:scaleY(1)}
.go .tag{font-family:var(--hand);font-size:24px;color:var(--green)}
.go:hover .tag{color:var(--paper)}
.go b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,40px);letter-spacing:-.035em;line-height:1.3;margin:6px 0 22px}
.go i{font-style:normal;font-weight:600;font-size:17px;text-decoration:underline;text-underline-offset:5px}

/* quotes */
/* question band: links to the first answer on /method */
.ask{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:26px;width:100vw;margin-top:44px;padding:clamp(72px,11vh,120px) var(--gut);background:var(--green);color:var(--paper);text-align:center;text-decoration:none}
.ask-k{font-size:clamp(17px,1.5vw,20px);opacity:.85}
.ask-q{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.6vw,66px);line-height:1.3;letter-spacing:-.04em}
.ask-a{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:760px;padding-top:26px;border-top:1px solid rgba(249,235,215,.35)}
.ask-a em{font-style:normal;font-size:17px;font-weight:700}
.ask-blur{font-size:clamp(20px,2vw,26px);line-height:1.5;filter:blur(7px);user-select:none;transition:filter .35s}
.ask:hover .ask-blur{filter:blur(4px)}
.ask-go{display:inline-flex;align-items:center;min-height:56px;padding:0 32px;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:600;font-size:18px;transition:background .25s,color .25s}
.ask:hover .ask-go{background:var(--ink);color:var(--paper)}
.hand-q{display:flex;gap:clamp(24px,6vw,90px);flex-wrap:wrap;justify-content:center;font-family:var(--hand);color:var(--green);font-size:clamp(48px,6vw,92px);line-height:1}
.hand-q span:first-child{transform:rotate(-4deg)}
.hand-q span:last-child{transform:rotate(3deg)}
.g2{font-size:clamp(70px,13vw,210px);text-align:center;margin-top:40px;color:var(--verm)}
.g3{font-size:clamp(44px,8.4vw,134px);text-align:center}
.g4{font-size:clamp(28px,5.1vw,81px);text-align:center;line-height:1}

/* three answers */
.three{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:1160px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.three li{font-family:var(--display);padding:28px clamp(16px,2.4vw,32px) 34px;font-size:clamp(24px,2.6vw,38px);line-height:1.25;letter-spacing:-.035em;font-weight:400;border-left:1px solid var(--grid)}
.three li:first-child{border-left:0}
.three em{display:block;font-style:normal;font-family:var(--hand);color:var(--green);font-size:26px;margin-bottom:22px}
@media (max-width:720px){.three{grid-template-columns:1fr}.three li{border-left:0;border-top:1px solid var(--grid)}}

/* envelope */
.env{width:100%;max-width:560px}
.env svg{width:100%;height:auto;display:block}
.env .h{font-family:var(--hand);font-size:22px;fill:var(--green);text-anchor:middle}
.env .b{font-family:var(--serif);font-size:15px;fill:var(--ink);text-anchor:middle}
.dash{animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}

/* brands */
.brands{list-style:none;width:100%;max-width:1060px;border-top:1px solid var(--ink)}
.brands li{display:grid;grid-template-columns:minmax(160px,1fr) 2.2fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--grid);font-size:18px}
.brands b{font-weight:600}
.brands .tbd{color:var(--soft)}
@media (max-width:720px){.brands li{grid-template-columns:1fr;gap:4px}}

/* buttons */
.ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:6px 0 30px}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-family:var(--serif);font-weight:600;font-size:17px;text-decoration:none;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);overflow:hidden;isolation:isolate;cursor:pointer;transition:color .3s .06s,transform .25s cubic-bezier(.2,.7,.2,1)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.btn:hover{color:var(--ink);transform:translateY(-2px)}
.btn:hover::before{transform:scaleX(1)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost::before{background:var(--green)}
.btn.ghost:hover{color:#fff;border-color:var(--green)}

/* diagnosis paper */
.paper{position:relative;width:100%;max-width:760px;background:#FFFBF4;color:#141414;padding:clamp(28px,4vw,48px);box-shadow:0 1px 0 rgba(0,0,0,.06),0 30px 60px -30px rgba(0,0,0,.4);transform:rotate(-.6deg)}
.paper .t{font-weight:700;font-size:24px;border-bottom:1.5px solid #141414;padding-bottom:14px;margin-bottom:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.paper .t span{font-weight:400;font-size:14px;color:#5f5f5f;align-self:flex-end}
.paper dt{font-weight:700;font-size:16px;margin-top:18px}
.paper dd{font-size:16px;line-height:1.75;color:#2a2a2a;margin-top:6px}

/* footer */
.foot{padding:120px var(--gut) 40px;border-top:1px solid var(--grid)}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;font-size:15px;color:var(--ink2)}

/* kakao + modal */
.kfab{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:9;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px 0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--serif);font-weight:600;font-size:15px;text-decoration:none;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:background .3s,color .3s,transform .25s}
.kfab:hover{background:var(--green);color:#fff;transform:translateY(-3px)}
@media (max-width:720px){.kfab{width:52px;padding:0;justify-content:center}.kfab span{display:none}}
.modal{position:fixed;inset:0;z-index:20;background:rgba(20,20,18,.45);display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal .box{position:relative;background:var(--paper2);max-width:460px;width:100%;padding:36px 30px 30px;border-radius:6px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.modal h3{font-weight:600;font-size:24px;margin-bottom:12px}
.modal p{font-size:16px;color:var(--ink2);margin-bottom:22px}
.modal .acts{display:flex;flex-direction:column;gap:10px}
.modal .acts .btn{justify-content:center}
.modal .x{position:absolute;right:10px;top:8px;width:44px;height:44px;border:0;background:none;font-size:26px;cursor:pointer;color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mouse i,.dash{animation:none}
  .reveal .w{color:var(--ink)}
}

/* envelope scene (05 광고) — scroll-scrubbed 3D */
.env-track{position:relative;z-index:2;height:280vh}
.env-sticky{position:sticky;top:84px;height:calc(100vh - 84px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--gut) 6vh}
.env-stage{position:relative;width:100%;flex:1;min-height:300px}
.env-shadow{position:absolute;left:50%;top:50%;width:420px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.2),rgba(0,0,0,0));pointer-events:none}
.env-trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.env-trail path{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 11}
.env-n{opacity:0;transition:none}
.swoosh{font-size:clamp(34px,3.6vw,52px)}
.env-cap{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;padding-top:4vh;position:relative;z-index:6}
@media (max-width:820px){.env-sticky{top:64px;height:calc(100vh - 64px)}}
@media (prefers-reduced-motion: reduce){.env-track{height:auto}.env-sticky{position:relative;top:0;height:80vh}.env-cap{opacity:1}}

/* Korean line breaks: break by meaning (explicit <br>), extra breaks only on narrow screens */
br.m{display:none}
@media (max-width:720px){br.m{display:inline}}
.reveal,.soft,.line,.mid{text-wrap:wrap}

/* both CTA buttons share one look: black pill, paper wipes in on hover */
.btn.ghost{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.ghost::before{background:var(--paper)}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink)}

/* scroll-drawn green underline */
.reveal .uw{background-image:linear-gradient(var(--green),var(--green));background-repeat:no-repeat;background-position:0 94%;background-size:var(--u,0%) .075em;padding-bottom:.04em}

/* accent: vermilion only for the loudest moments */
.note.verm{color:var(--verm);opacity:1}

/* case banners */
.cases{display:flex;flex-direction:column;gap:22px;width:100%;max-width:1160px;margin-top:10px}
.case{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:stretch;background:var(--paper2);border:1px solid rgba(27,23,18,.14);border-radius:6px;overflow:hidden}
.case-t{padding:32px 30px;display:flex;flex-direction:column;border-right:1px solid rgba(27,23,18,.1)}
.case-t em{font-style:normal;font-family:var(--hand);font-size:30px;color:var(--green);line-height:1}
.case-t h3{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.4vw,48px);letter-spacing:-.045em;line-height:1.2;margin-top:auto}
.case-t p{font-size:15px;color:var(--soft);margin-top:6px}
.case-imgs{display:flex;gap:10px;padding:16px;overflow:hidden}
.case-imgs img{height:300px;width:auto;flex:none;border-radius:3px;box-shadow:0 10px 24px -16px rgba(27,23,18,.5)}
@media (max-width:820px){.case{grid-template-columns:1fr}.case-t{border-right:0;border-bottom:1px solid rgba(27,23,18,.1);padding:22px 20px;flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap}.case-t h3{margin-top:0}.case-imgs{overflow-x:auto;scroll-snap-type:x mandatory}.case-imgs img{height:240px;scroll-snap-align:start}}

/* rolling brands */
.brand-roll{position:relative;z-index:2;overflow:hidden;padding:10px 0 clamp(90px,12vh,140px);-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.brand-track{list-style:none;display:flex;gap:18px;width:max-content;animation:roll 46s linear infinite}
.brand-roll:hover .brand-track{animation-play-state:paused}
.brand-track li{width:260px;flex:none;display:flex;flex-direction:column;gap:4px}
.brand-track img{width:260px;height:216px;object-fit:cover;border-radius:4px;display:block;margin-bottom:8px}
.brand-track span{font-size:13px;color:var(--soft)}
.brand-track b{font-size:17px;font-weight:600}
@keyframes roll{to{transform:translateX(calc(-50% - 9px))}}
@media (max-width:720px){.brand-track li{width:200px}.brand-track img{width:200px;height:166px}}
@media (prefers-reduced-motion: reduce){.brand-track{animation:none}.brand-roll{overflow-x:auto}}