/* FRAMELABS v2 — brand tokens from logo/final/brand.md */
:root{
  --green:#1C4435;
  --green-deep:#13302A;
  --gold:#B99A5B;
  --gold-light:#E0D2AE;
  --cream:#F7F5EF;
  --tint:#EEEADF;
  --paper:#FFFFFF;
  --ink:#1C4435;
  --body:#33433C;
  --muted:#5E6B64;
  --line:#D9D3C3;
  --kr:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --en:"Archivo","Pretendard Variable",sans-serif;
  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--body);font-family:var(--kr);font-size:17px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{color:var(--ink);margin:0;line-height:1.25;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.num{font-family:var(--en);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:10px;font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}
.btn-solid{background:var(--green);color:var(--cream)}
.btn-solid:hover{background:var(--green-deep)}
.btn-line{border-color:var(--green);color:var(--green);background:transparent}
.btn-line:hover{background:var(--green);color:var(--cream)}
.btn-gold{background:var(--gold-light);color:var(--green-deep)}
.btn-gold:hover{background:#EBE0C2}
.btn-block{width:100%}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(247,245,239,.9);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;gap:32px;height:68px}
.brand img{height:34px;width:auto}
.menu{display:flex;gap:28px;margin-left:auto}
.menu a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--gold)}

/* 9:16 frame — echoes the logo symbol */
.frame{margin:0;aspect-ratio:9/16;border:5px solid var(--green);border-radius:18px;overflow:hidden;background:var(--green)}
.frame video{width:100%;height:100%;object-fit:cover;border-radius:12px}

/* hero */
/* hero: deep green stage, huge type, a slow river of real work */
.hero{background:var(--green);color:var(--cream);padding:clamp(56px,8vw,104px) 0 0;overflow:hidden}
.hero-in{display:grid;grid-template-columns:auto 1fr;gap:48px 64px;align-items:end}
.hero h1{color:var(--cream);font-size:clamp(46px,8.4vw,128px);font-weight:800;letter-spacing:-.045em;line-height:1.04}
.hero-side{max-width:400px;justify-self:end;padding-bottom:10px}
.lead{font-size:clamp(16px,1.4vw,18px);color:rgba(247,245,239,.84)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn-ghost{border-color:rgba(224,210,174,.6);color:var(--cream);background:transparent}
.btn-ghost:hover{border-color:var(--gold-light);background:rgba(224,210,174,.12)}

.marquee{margin-top:clamp(48px,7vw,88px);overflow:hidden;padding:8px 0 40px}
.marquee-track{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;animation:drift 80s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .frame{width:clamp(150px,15vw,230px);flex:none;border-color:var(--gold-light);background:var(--green-deep)}
.marquee .frame:nth-child(even){transform:translateY(36px)}
@keyframes drift{to{transform:translateX(calc(-50% - clamp(14px,1.6vw,24px) / 2))}}

.facts{display:grid;grid-template-columns:repeat(4,1fr);margin:24px auto 0;padding-top:0;padding-bottom:0}
.facts>div{padding:20px 0 24px;border-top:1px solid rgba(224,210,174,.28)}
.facts>div+div{padding-left:24px;border-left:1px solid rgba(224,210,174,.28)}
.facts dt{font-size:13px;color:rgba(247,245,239,.62);font-weight:600}
.facts dd{margin:2px 0 0;font-size:16px;color:var(--cream);font-weight:600}
.facts dd b{font-size:28px;line-height:1.2;margin-right:1px;color:var(--gold-light)}
.promo{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px var(--gutter);background:var(--green-deep);color:var(--cream);font-size:15px;font-weight:600;text-decoration:none}
.promo:hover{background:#0E2620}
.promo-tag{background:var(--gold-light);color:var(--green-deep);font-size:13px;font-weight:800;padding:3px 10px;border-radius:999px}

/* sections */
.sec{padding:clamp(72px,10vw,120px) 0}
.sec-tint{background:var(--tint)}
.sec-head{max-width:640px;margin-bottom:48px}
.sec-head h2{font-size:clamp(30px,3.6vw,46px);font-weight:800}
.sec-head p{margin-top:16px;color:var(--body)}
.note{margin-top:28px;font-size:15px;color:var(--muted)}

/* work: coverflow. Positions are set by site.js from each card's distance to the centre */
.flow{--cw:clamp(180px,min(22vw,calc((100vh - 300px) * .5)),300px);position:relative;overflow:hidden;color:var(--cream);
  background:radial-gradient(60% 55% at 50% 52%,#24563F 0%,var(--green-deep) 62%,#0D221C 100%);
  padding:clamp(72px,9vw,112px) 0 clamp(64px,8vw,104px)}
.flow-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.flow-head h2{color:var(--cream);font-size:clamp(30px,3.6vw,46px);font-weight:800}
.flow-head p{margin-top:12px;max-width:34em;color:rgba(247,245,239,.72)}
.flow-count{flex:none;display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(247,245,239,.55)}
.flow-count b{color:var(--gold-light);font-weight:700}
.flow-count i{display:block;width:72px;height:1px;background:rgba(224,210,174,.45)}
.flow-stage{position:relative;height:calc(var(--cw) * 16 / 9 + 40px);margin-top:clamp(36px,5vw,56px);perspective:1600px}
.flow-track{list-style:none;margin:0;padding:0;position:absolute;inset:0;transform-style:preserve-3d;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.flow-track>li{position:absolute;top:20px;left:50%;width:var(--cw);margin-left:calc(var(--cw) / -2);
  transition:transform .65s cubic-bezier(.22,.7,.2,1),opacity .5s ease,filter .5s ease;will-change:transform}
.flow-card{display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.flow .frame{width:100%;border-color:rgba(224,210,174,.35);background:#0D221C;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.flow .frame img,.flow .frame video{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px;pointer-events:none}
.flow-track>li.is-active .frame{border-color:var(--gold-light);box-shadow:0 0 0 1px rgba(224,210,174,.4),0 0 60px rgba(224,210,174,.28),0 40px 80px -24px rgba(0,0,0,.7)}
.flow-card:focus-visible{outline:none}
.flow-card:focus-visible .frame{outline:3px solid var(--gold);outline-offset:4px}
.flow-btn{position:absolute;top:50%;z-index:60;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid rgba(224,210,174,.45);
  background:rgba(13,34,28,.55);backdrop-filter:blur(6px);color:var(--gold-light);cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s}
.flow-btn:hover{background:rgba(13,34,28,.85);border-color:var(--gold-light)}
.flow-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow-prev{left:max(var(--gutter),calc(50% - var(--cw) * 2.1))}
.flow-next{right:max(var(--gutter),calc(50% - var(--cw) * 2.1))}
.flow-caption{text-align:center;margin-top:28px;padding:0 var(--gutter);min-height:84px}
.flow-cat{display:block;font-size:14px;font-weight:700;color:var(--gold)}
.flow-hook{margin:8px 0 0;font-size:clamp(20px,2.2vw,26px);font-weight:800;color:var(--cream);letter-spacing:-.02em}
.reel{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,56px);margin-top:clamp(56px,7vw,88px)}
.reel h3{color:var(--cream);font-size:22px;font-weight:800}
.reel p{margin-top:8px;color:rgba(247,245,239,.7)}
.reel-video{width:min(560px,100%);aspect-ratio:16/9;border-radius:16px;background:#0D221C;border:4px solid rgba(224,210,174,.35)}

/* 30s timeline — widths proportional to seconds */
.timeline{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.timeline li{flex:var(--len) 1 0;min-width:0;display:flex;flex-direction:column}
.timeline img{width:100%;height:240px;object-fit:cover;border-radius:10px}
.timeline .tc{margin-top:14px;padding-top:10px;border-top:3px solid var(--green);font-size:14px;color:var(--green)}
.timeline b{margin-top:2px;font-size:17px;color:var(--ink)}
.timeline li>span:last-child{font-size:14px;color:var(--muted);line-height:1.55}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:36px 32px 32px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.plan-name{font-family:var(--en);font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--gold)}
.plan-for{margin-top:6px;font-size:18px;font-weight:700;color:var(--ink)}
.plan-price{margin-top:20px;font-size:18px;font-weight:600;color:var(--ink)}
.plan-price .num{font-size:44px;line-height:1}
.spec{margin:28px 0 32px;padding:0;flex:1}
.spec>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.spec dt{color:var(--muted)}
.spec dd{margin:0;font-weight:600;color:var(--ink);text-align:right}
.plan-best{background:var(--green);border-color:var(--green)}
.plan-best .plan-name{color:var(--gold-light)}
.plan-best .plan-for,.plan-best .plan-price,.plan-best .spec dd{color:var(--cream)}
.plan-best .spec dt{color:rgba(247,245,239,.68)}
.plan-best .spec>div{border-top-color:rgba(224,210,174,.25)}
.badge{position:absolute;top:-13px;left:32px;background:var(--gold-light);color:var(--green-deep);font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px}

/* steps */
.steps-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;column-gap:8px;padding:20px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);grid-row:span 2;font-family:var(--en);font-weight:800;font-size:28px;line-height:1.1;color:var(--gold)}
.steps b{font-size:18px;color:var(--ink)}
.steps span{color:var(--body);font-size:16px}
.prep{position:sticky;top:96px;padding:32px;background:var(--paper);border-radius:16px;border:1px solid var(--line)}
.prep h3{font-size:20px;font-weight:800}
.prep h4{margin-top:24px;font-size:15px;font-weight:700;color:var(--muted)}
.prep p{margin-top:6px;font-size:15px}
.check{list-style:none;margin:16px 0 0;padding:0}
.check li{position:relative;padding:8px 0 8px 30px;font-size:16px;color:var(--ink)}
.check li::before{content:"";position:absolute;left:2px;top:15px;width:14px;height:8px;border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(-45deg)}

/* honest */
.honest{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.honest>div{padding:28px 0;border-top:1px solid var(--line)}
.honest h3{font-size:19px;font-weight:700}
.honest p{margin-top:8px;font-size:16px}
.honest-no h3{color:#8A4B2A}

/* faq */
.faq-layout{display:grid;grid-template-columns:1fr 1.7fr;gap:56px;align-items:start}
.faq-layout .sec-head{margin-bottom:0}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-size:18px;font-weight:700;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.qa details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.qa details p{padding:0 40px 24px 0;font-size:16px}

/* contact */
.contact{background:var(--green);color:var(--cream);padding:clamp(72px,10vw,120px) 0}
.contact-in{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.contact h2{color:var(--cream);font-size:clamp(30px,3.6vw,46px);font-weight:800}
.contact-copy p{margin-top:20px;color:rgba(247,245,239,.82);max-width:26em}
.mail{display:inline-block;margin-top:32px;font-family:var(--en);font-size:20px;font-weight:700;color:var(--gold-light);text-decoration:none;border-bottom:1.5px solid var(--gold-light);padding-bottom:2px}
.form{display:grid;gap:8px}
.form label{margin-top:12px;font-size:15px;font-weight:700;color:var(--cream)}
.form label:first-child{margin-top:0}
.form label span{color:var(--gold-light)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row>div{display:grid;gap:8px}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--cream);border:1.5px solid transparent;border-radius:10px;padding:14px 16px;min-height:52px}
.form textarea{resize:vertical;line-height:1.6}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold-light);box-shadow:0 0 0 3px rgba(224,210,174,.35)}
.form .btn{margin-top:20px}
.form-note{font-size:13px;line-height:1.6;color:rgba(247,245,239,.7)}
.form-status{font-size:15px;font-weight:600;color:var(--gold-light)}
.form-status:empty{display:none}

/* footer */
.foot{background:var(--green-deep);color:rgba(247,245,239,.7);padding:40px 0}
.foot-in{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.foot img{height:48px;width:auto}
.foot-links{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap}
.foot-links a{font-size:15px;text-decoration:none;color:var(--cream)}
.foot-links a:hover{text-decoration:underline}
.foot small{font-family:var(--en);font-size:13px}

/* tablet */
@media (max-width:1000px){
  .menu{display:none}
  .top-in{justify-content:space-between}
  .hero-in{grid-template-columns:1fr;gap:28px}
  .hero-side{justify-self:start}
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts>div:nth-child(3){padding-left:0;border-left:0}
  .flow-head{flex-direction:column;align-items:flex-start;gap:16px}
  .reel{flex-direction:column;align-items:stretch;text-align:center}
  .steps-layout,.faq-layout,.contact-in{grid-template-columns:1fr;gap:40px}
  .prep{position:static}
  .plans{grid-template-columns:1fr;max-width:520px}
  .timeline{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .timeline li{flex:0 0 200px;scroll-snap-align:start}
  .timeline img{height:220px}
}
/* phone */
@media (max-width:640px){
  body{font-size:16px}
  .top-in{height:60px}
  .brand img{height:28px}
  .hero{padding-top:32px}
  .facts dd b{font-size:22px}
  .facts>div+div{padding-left:14px}
  .actions .btn{flex:1 1 100%}
  .frame{border-width:4px;border-radius:14px}
  .frame video{border-radius:10px}
  .marquee .frame:nth-child(even){transform:translateY(24px)}
  .facts dd b{font-size:24px}
  .facts>div{padding:16px 0 18px}
  .facts>div+div{padding-left:16px}
  .promo{flex-direction:column;gap:6px;text-align:center}
  .flow{--cw:56vw}
  .flow-btn{width:44px;height:44px;margin-top:-22px}
  .flow-prev{left:10px}
  .flow-next{right:10px}
  .honest{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .plan{padding:32px 24px 24px}
  .qa summary{font-size:17px}
  .foot-links{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
}

/* ===== 2026-11-10 개편: 히어로 쇼릴 · 탭 코버플로 · 칩 · 공감 카드 · 고정 문의 막대 ===== */
.lead-more{margin-top:10px;font-size:15px;font-weight:600;color:var(--gold-light)}
.hero-reel{position:relative;margin-top:clamp(40px,6vw,72px);max-width:1040px}
.hero-reel .reel-video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:#0D221C;border:5px solid var(--gold-light);box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}
.reel-sound{position:absolute;right:calc(var(--gutter) + 16px);bottom:16px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(224,210,174,.6);background:rgba(13,34,28,.72);color:var(--cream);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.reel-sound::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3C/svg%3E") center/contain no-repeat}
.reel-sound:hover{background:rgba(13,34,28,.9);border-color:var(--gold-light)}
.hero .facts{margin-top:clamp(28px,4vw,48px)}
.facts dd b+b{margin-left:2px}

.flow-notice{display:inline-block;margin-bottom:14px;padding:6px 14px;border-radius:999px;background:rgba(224,210,174,.14);border:1px solid rgba(224,210,174,.35);font-size:14px;font-weight:600;color:var(--gold-light)}
.flow-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.flow-tabs [role=tab]{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(224,210,174,.4);background:transparent;color:rgba(247,245,239,.8);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.flow-tabs [role=tab]:hover{border-color:var(--gold-light);color:var(--cream)}
.flow-tabs [role=tab][aria-selected=true]{background:var(--gold-light);border-color:var(--gold-light);color:var(--green-deep)}
.flow{--ar:1.7778}
.flow-stage{height:calc(var(--cw) * var(--ar) + 40px)}
.flow .frame{aspect-ratio:auto;height:calc(var(--cw) * var(--ar) - 10px);position:relative}
.flow[data-tab=ads],.flow[data-tab=cards]{--cw:clamp(200px,min(26vw,calc((100vh - 300px) * .8)),340px);--ar:1.25}
.flow[data-tab=ads] .frame img{object-fit:contain;background:#0D221C}
.flow[data-tab=brand]{--cw:clamp(280px,min(46vw,calc((100vh - 300px) * 1.78)),620px);--ar:.5625}
.flow-caption{min-height:84px}
.play-tag{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(13,34,28,.55);border:1px solid rgba(224,210,174,.6);opacity:0;transition:opacity .3s;pointer-events:none}
.play-tag::after{content:"";position:absolute;left:22px;top:17px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent var(--cream)}
.flow-track>li.is-active .play-tag{opacity:1}
.flow-track>li.is-active .flow-card:hover .play-tag{background:rgba(13,34,28,.8)}
.set-tag{position:absolute;right:10px;top:10px;padding:2px 10px;border-radius:999px;background:rgba(13,34,28,.75);color:var(--cream);font-size:12px;font-weight:700}

.lightbox{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;margin:0;overflow:hidden}
.lightbox::backdrop{background:rgba(8,20,16,.88)}
.lightbox[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.lb-body{display:flex;align-items:center;justify-content:center;max-width:calc(100vw - 32px)}
.lb-body video,.lb-body img{max-height:calc(100dvh - 120px);max-width:min(calc(100vw - 32px),560px);width:auto;height:auto;border-radius:14px;background:#000}
.lightbox.lb-wide .lb-body video{max-width:min(calc(100vw - 32px),1100px)}
.lb-cap{color:var(--cream);font-size:15px;font-weight:600;text-align:center;padding:0 16px}
.lb-close,.lb-nav{position:fixed;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(224,210,174,.5);background:rgba(13,34,28,.7);color:var(--cream);cursor:pointer}
.lb-close svg,.lb-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-close{top:16px;right:16px}
.lb-nav{top:50%;margin-top:-24px;display:none}
.lb-prev{left:16px}.lb-next{right:16px}
.lightbox.lb-multi .lb-nav{display:flex}

.need{padding-bottom:clamp(48px,6vw,72px)}
.need .sec-head{margin-bottom:28px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{min-height:52px;padding:0 24px;border-radius:999px;border:1.5px solid var(--green);background:var(--paper);color:var(--green);font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s}
.chip:hover{background:#EFF3EF}
.chip[aria-pressed=true]{background:var(--green);color:var(--cream)}
.chip-soft{border-color:var(--line);color:var(--muted)}
.need-msg{margin-top:20px;font-size:15px;color:var(--body)}
.need-msg b{color:var(--ink)}
.need-msg a{margin-left:10px;font-weight:700;color:var(--green)}

.worry{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.worry>div{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px 26px}
.worry h3{font-size:19px;font-weight:800}
.worry p{margin-top:10px;font-size:16px}
.note-more{margin-top:8px}

.cta-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:20px;width:max-content;max-width:calc(100vw - 24px);padding:10px 10px 10px 24px;border-radius:999px;background:var(--green-deep);color:var(--cream);text-decoration:none;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);transform:translate(-50%,140%);opacity:0;transition:transform .35s ease,opacity .35s ease;pointer-events:none}
.cta-bar.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.cta-text{display:flex;flex-direction:column;line-height:1.35}
.cta-text b{font-size:15px}
.cta-text span{font-size:13px;color:rgba(247,245,239,.7)}
.cta-btn{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--gold-light);color:var(--green-deep);font-weight:800;font-size:15px}
.cta-bar:hover .cta-btn{background:#EBE0C2}
.foot{padding-bottom:110px}

@media (max-width:1000px){
  .worry{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero-reel .reel-video{border-width:4px;border-radius:14px}
  .reel-sound{right:calc(var(--gutter) + 10px);bottom:10px;min-height:36px;padding:0 12px;font-size:13px}
  .flow-tabs{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:0 var(--gutter) 4px;scrollbar-width:none}
  .flow-tabs::-webkit-scrollbar{display:none}
  .flow-tabs [role=tab]{flex:none;min-height:40px;padding:0 16px;font-size:14px}
  .flow[data-tab=ads],.flow[data-tab=cards]{--cw:64vw}
  .flow[data-tab=brand]{--cw:84vw}
  .chip{min-height:46px;padding:0 18px;font-size:15px}
  .cta-text span{display:none}
  .cta-bar{gap:12px;padding-left:18px}
  .lb-nav{top:auto;bottom:16px;margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .cta-bar{transition:none}
}

/* logo: same animated wordmark as the launch-discount page (GIF has a cream background) */
.brand .motion-logo img{height:46px;width:auto}
.foot-logo{display:inline-block;background:#F5F4EF;padding:8px 12px;border-radius:8px;line-height:0}
.foot .foot-logo img{height:52px;width:auto}
@media (max-width:640px){
  .brand .motion-logo img{height:36px}
  .foot .foot-logo img{height:44px}
}

/* gradient instead of flat green (hero, contact) */
.hero{background:
  radial-gradient(60% 50% at 88% 6%,rgba(224,210,174,.20) 0%,rgba(224,210,174,0) 70%),
  radial-gradient(70% 60% at 0% 100%,rgba(58,122,92,.55) 0%,rgba(58,122,92,0) 70%),
  linear-gradient(165deg,#24563F 0%,#1C4435 45%,#11291F 100%)}
.contact{background:
  radial-gradient(55% 60% at 100% 0%,rgba(224,210,174,.14) 0%,rgba(224,210,174,0) 70%),
  linear-gradient(200deg,#24563F 0%,#1C4435 50%,#11291F 100%)}
.promo{background:linear-gradient(90deg,#11291F 0%,#1C4435 50%,#11291F 100%)}
.hero-in{grid-template-columns:minmax(0,1fr) minmax(300px,400px)}
.hero h1{font-size:clamp(44px,7.2vw,112px)}
@media (max-width:1000px){ .hero-in{grid-template-columns:1fr} }
.hero h1{font-size:clamp(40px,5.8vw,88px)}
.hero-with{margin-top:18px;font-size:clamp(20px,2.2vw,30px);font-weight:700;color:var(--gold-light);letter-spacing:-.02em}
.hero-with .num{letter-spacing:.04em}
.hero h1{font-size:clamp(34px,5.4vw,84px)}
.h1-with{color:var(--gold-light)}
.h1-en{font-family:var(--en);letter-spacing:-.01em}
@media (max-width:640px){ .hero h1{font-size:clamp(30px,9.4vw,44px)} }
/* 3-line headline gets the full width; description + buttons sit below it */
.hero-in{grid-template-columns:1fr;gap:28px}
.hero h1{font-size:clamp(26px,7.2vw,84px)}
.h1-with{white-space:nowrap}
.hero-side{justify-self:start;max-width:560px;padding-bottom:0}
@media (max-width:640px){ .hero h1{font-size:clamp(26px,7.2vw,44px)} }

/* 가격: 1편 기준 표시 */
.plan-price small{font-size:15px;font-weight:600;color:var(--muted);margin-left:2px}

/* 런칭 할인: 크게, 눈에 띄게 */
.promo{position:relative;overflow:hidden;gap:clamp(14px,2.4vw,28px);padding:clamp(18px,2.4vw,26px) var(--gutter);
  background:linear-gradient(100deg,#C9A86A 0%,#E8D7AE 45%,#C9A86A 100%);color:var(--green-deep);font-size:clamp(18px,1.9vw,23px);font-weight:800;letter-spacing:-.01em}
.promo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:promo-shine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes promo-shine{0%,55%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
.promo:hover{background:linear-gradient(100deg,#D4B477 0%,#F0E2BF 45%,#D4B477 100%)}
.promo-tag{background:var(--green-deep);color:var(--gold-light);font-size:clamp(13px,1.2vw,15px);padding:6px 14px;letter-spacing:.02em}
.promo-text em{font-style:normal;font-size:1.35em;color:#7A1F1F;margin:0 2px}
.promo-go{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 20px;border-radius:999px;background:var(--green-deep);color:var(--cream);font-size:clamp(14px,1.3vw,16px);font-weight:700;white-space:nowrap}
.promo:hover .promo-go{background:#0E2620}
@media (max-width:640px){
  .promo{flex-direction:column;gap:10px;font-size:19px}
  .promo-go{min-height:40px}
}
@media (prefers-reduced-motion:reduce){ .promo::after{animation:none;display:none} }
/* 히어로 3줄째: 한글 워드마크 프레임랩스 (어두운 배경 규칙: 프레임=크림, 랩스=라이트골드) */
.h1-with{color:var(--cream)}
.h1-with .wm-a{color:var(--cream)}
.h1-with .wm-b{color:var(--gold-light)}
.hero h1{font-size:clamp(30px,8.6vw,96px)}
@media (max-width:640px){ .hero h1{font-size:clamp(30px,9.6vw,48px)} }
/* 프레임랩스 전체를 같은 금색으로 */
.h1-with .wm-a,.h1-with .wm-b{color:var(--gold-light)}

/* 가격 위: 숏폼 외 작업 안내 */
.more-work{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;margin:0 0 32px;padding:20px 24px;border-radius:16px;
  background:var(--green);color:var(--cream);text-decoration:none;box-shadow:0 14px 30px -18px rgba(19,48,42,.6)}
.more-work:hover{background:var(--green-deep)}
.more-tag{flex:none;background:var(--gold-light);color:var(--green-deep);font-size:14px;font-weight:800;padding:5px 12px;border-radius:999px}
.more-list{font-size:clamp(17px,1.7vw,20px);font-weight:600;line-height:1.5}
.more-list b{color:var(--gold-light);font-weight:800}
.more-list i{font-style:normal;margin:0 6px;color:rgba(247,245,239,.5)}
.more-go{margin-left:auto;flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(224,210,174,.6);font-size:15px;font-weight:700;white-space:nowrap}
@media (max-width:640px){ .more-go{margin-left:0} .more-work{padding:18px} }
/* 가격 아래 안내: 진하게 */
.note-strong{margin-top:24px;font-size:clamp(16px,1.5vw,18px);font-weight:600;color:var(--ink);line-height:1.6}
.note-strong b{font-weight:800;color:var(--green-deep);background:linear-gradient(transparent 62%,rgba(224,210,174,.75) 62%)}

/* 2026-11-11 히어로 제목 페이드 업 (줄마다 시간차) */
.rise .ln{display:block;opacity:0;transform:translateY(.6em);animation:rise-up .9s cubic-bezier(.2,.7,.2,1) forwards}
.rise .ln:nth-child(1){animation-delay:.15s}
.rise .ln:nth-child(2){animation-delay:.35s}
.rise .ln:nth-child(3){animation-delay:.55s}
.rise-after{opacity:0;transform:translateY(16px);animation:rise-up .8s cubic-bezier(.2,.7,.2,1) .9s forwards}
@keyframes rise-up{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .rise .ln,.rise-after{opacity:1;transform:none;animation:none} }
/* 숏폼 외 작업 줄: 항목 구분, 설명과 같은 크기 */
.lead-more{font-size:clamp(16px,1.4vw,18px);font-weight:600;color:rgba(247,245,239,.84)}
.lead-more b{color:var(--gold-light);font-weight:800}
.lead-more i{font-style:normal;margin:0 .45em;color:rgba(247,245,239,.5)}
/* 첫 거래 이벤트 띠 */
.promo-text em{font-size:1.1em;color:#7A1F1F;font-weight:900}
/* 디럭스·프리미엄 톱니 배지 */
.gift{position:absolute;top:-30px;right:-18px;z-index:2;width:104px;height:104px;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#D9493B 0%,#B3302A 60%,#8E2320 100%);color:#FFF6E6;
  clip-path:polygon(50.0% 0.0%,57.5% 7.7%,67.1% 3.0%,71.5% 12.8%,82.1% 11.7%,82.9% 22.4%,93.3% 25.0%,90.4% 35.3%,99.2% 41.3%,93.0% 50.0%,99.2% 58.7%,90.4% 64.7%,93.3% 75.0%,82.9% 77.6%,82.1% 88.3%,71.5% 87.2%,67.1% 97.0%,57.5% 92.3%,50.0% 100.0%,42.5% 92.3%,32.9% 97.0%,28.5% 87.2%,17.9% 88.3%,17.1% 77.6%,6.7% 75.0%,9.6% 64.7%,0.8% 58.7%,7.0% 50.0%,0.8% 41.3%,9.6% 35.3%,6.7% 25.0%,17.1% 22.4%,17.9% 11.7%,28.5% 12.8%,32.9% 3.0%,42.5% 7.7%);transform:rotate(12deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));animation:gift-wiggle 3.2s ease-in-out infinite}
.gift span{display:flex;flex-direction:column;align-items:center;line-height:1.05;font-size:13px;font-weight:800;letter-spacing:-.02em;text-align:center}
.gift b{font-size:24px;font-weight:900;margin:2px 0}
@keyframes gift-wiggle{0%,80%,100%{transform:rotate(12deg) scale(1)}88%{transform:rotate(4deg) scale(1.06)}94%{transform:rotate(16deg) scale(1.03)}}
@media (prefers-reduced-motion:reduce){ .gift{animation:none} }
@media (max-width:640px){ .gift{right:-6px;top:-26px;width:92px;height:92px} .gift b{font-size:21px} }
.gift-note{margin-top:28px;display:flex;align-items:baseline;gap:10px;font-size:clamp(15px,1.4vw,17px);color:var(--ink);line-height:1.6}
.gift-note b{color:#A3291F;font-weight:800;margin-right:4px}
.gift-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#B3302A;transform:translateY(-1px)}
.hero-side{max-width:680px}
.gift{width:114px;height:114px}
.gift span{font-size:15px}
.gift b{font-size:27px}
@media (max-width:640px){ .gift{width:98px;height:98px} .gift span{font-size:13px} .gift b{font-size:23px} }

/* 쇼릴: 클릭하면 1회 재생 후 멈춤 */
.hero-reel .reel-video{cursor:pointer}
.reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:14px;min-height:64px;padding:0 28px 0 14px;border-radius:999px;border:0;
  background:rgba(13,34,28,.82);color:var(--cream);font:inherit;font-size:clamp(16px,1.6vw,19px);font-weight:800;cursor:pointer;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transition:opacity .25s,transform .25s}
.reel-play:hover{background:rgba(13,34,28,.95);transform:translate(-50%,-50%) scale(1.04)}
.reel-play-icon{width:44px;height:44px;border-radius:50%;background:var(--gold-light);position:relative;flex:none}
.reel-play-icon::after{content:"";position:absolute;left:17px;top:13px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--green-deep)}
.reel-play small{font-size:.8em;font-weight:600;opacity:.7;margin-left:4px}
.hero-reel.is-playing .reel-play{opacity:0;pointer-events:none}
@media (max-width:640px){ .reel-play{min-height:52px;padding:0 20px 0 10px;gap:10px} .reel-play-icon{width:36px;height:36px} .reel-play-icon::after{left:14px;top:10px;border-width:8px 0 8px 12px} }