/* LUCKLAB homepage — one cobalt brand world, quiet paper sections, the Glint star as the only ornament. */
:root{
  --luck:#0D41C2; --night:#020E6A; --glint:#466EFF; --sky:#34A4F0; --ice:#A6E1FF; --frost:#EAF2FF; --paper:#F3F7FF;
  --ink:#0A1A4A; --body:#24345F; --mute:#5B6A93; --line:#D9E3F7; --hair:#E6ECF9; --box:#B9C6E6; --hint:#8A97BA; --drop:#F7F9FF;
  --kakao:#FEE500; --kakao-ink:#191919; --white:#FFFFFF; --scrim:rgba(2,14,106,.62);
  --kr:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Unbounded","IBM Plex Sans KR",system-ui,sans-serif;
  --glint-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 341 386'%3E%3Cpath d='M341 229.5 L227.8 230 L270 329.5 L184.8 258.3 L170.5 386 L142.1 258.5 L58 328.5 L127.6 229.9 L0 201 L127.5 186.6 L45 88.5 L156.6 172.3 L185 0 L199 172.5 L312 101.5 L227.9 200.9 Z'/%3E%3C/svg%3E");
  --gut:max(20px, calc((100% - 1200px) / 2));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--kr);font-size:16px;line-height:1.5;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--white);color:var(--luck);padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}

/* the star */
.g{display:inline-block;flex:none;width:1em;aspect-ratio:341/386;background:currentColor;-webkit-mask:var(--glint-mask) center/contain no-repeat;mask:var(--glint-mask) center/contain no-repeat}

/* layout */
.wrap{padding-left:max(var(--gut), env(safe-area-inset-left,0px));padding-right:max(var(--gut), env(safe-area-inset-right,0px))}
.sec{padding-block:110px;display:flex;flex-direction:column;gap:44px}
.sec.white{background:var(--white)}
.head{display:flex;flex-direction:column;gap:14px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--luck)}
.eyebrow .g{width:13px}
.h2{font-size:44px;line-height:1.25;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.sub{font-size:18px;line-height:1.6;color:var(--mute)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.bar h3{font-size:28px;font-weight:700;letter-spacing:-.02em}
.bar .tag{font:500 13px/1 var(--mono);letter-spacing:.18em;color:var(--luck)}
.note{font-size:14px;color:var(--mute);line-height:1.55}
.list{display:grid;gap:9px}
.list li{display:flex;gap:10px;font-size:15px;line-height:1.55;color:var(--body)}
.list li .g{width:9px;margin-top:6px;color:var(--luck)}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:16px 28px;border:0;border-radius:999px;font:600 16px/1.2 var(--kr);text-align:center;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .15s, background-color .2s, box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn.sm{min-height:47px;padding:12px 20px;font-size:15px}
.btn.primary{background:var(--luck);color:var(--white)}
.btn.primary:hover{background:#0B37A6}
.btn.light{background:var(--white);color:var(--luck)}
.btn.kakao{background:var(--kakao);color:var(--kakao-ink)}
.btn.outline{background:transparent;color:var(--luck);box-shadow:inset 0 0 0 1.5px var(--luck)}
.btn.outline:hover{background:var(--frost)}
.btn.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.btn.block{width:100%}
.link{font-weight:600;color:var(--luck)}
.link:hover{text-decoration:underline;text-underline-offset:3px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.nav .in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:92px}
.logo{font:700 22px/1 var(--disp);color:var(--luck);letter-spacing:-.01em;white-space:nowrap}
.nav .links{display:flex;gap:36px;font-size:15px;font-weight:500}
.nav .links a:hover{color:var(--luck)}
.nav .acts{display:flex;gap:10px}
.nav.cobalt{background:var(--luck);border-color:transparent}
.nav.cobalt .logo{color:var(--white)}

/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--luck);color:var(--white)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(60% 70% at 72% 50%, rgba(70,110,255,.55), rgba(13,65,194,0) 70%),radial-gradient(40% 50% at 10% 100%, rgba(2,14,106,.55), rgba(2,14,106,0) 70%)}
.hero .in{display:grid;grid-template-columns:minmax(0,560px) minmax(0,620px);justify-content:space-between;align-items:center;gap:40px;min-height:740px;padding-block:88px}
.hero .copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:28px}
.hero .eyebrow{color:var(--ice)}
.hero h1{font-size:64px;line-height:1.18;font-weight:700;letter-spacing:-.03em}
.hero .lede{font-size:20px;line-height:1.6;color:rgba(234,242,255,.9)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .meta{font-size:15px;color:rgba(234,242,255,.75)}
.stage{position:relative;width:100%;max-width:620px;aspect-ratio:620/520;justify-self:end;margin-bottom:44px;cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.stage:focus-visible{outline-offset:8px;border-radius:24px}
.big{position:absolute;left:50%;top:50%;height:100%;aspect-ratio:341/386;transform:translate(-51.1%,-55.3%) translate(var(--px,0px),var(--py,0px)) rotate(var(--tilt,0deg)) scale(var(--pop,1));transform-origin:51.1% 55.3%;transition:transform .5s cubic-bezier(.2,.8,.2,1);z-index:1;filter:drop-shadow(0 0 48px rgba(120,155,255,.55))}
.big.charging{transition:transform 1.2s cubic-bezier(.3,.6,.4,1)}
.big .breathe{width:100%;height:100%;animation:breathe 6s ease-in-out infinite;transform-origin:51.1% 55.3%}
.big svg{width:100%;height:100%;display:block;overflow:visible}
.big .flash{opacity:0;transition:opacity .55s}
.flash .big .flash{opacity:.95;transition:none}
.big .sweep{animation:sweep 6.5s cubic-bezier(.5,0,.3,1) 1.6s infinite}
.big .outline{fill:none;stroke:#FFFFFF;stroke-width:2.5;opacity:0}
.big.ignite .fills{opacity:0}
.big.ignite .outline{opacity:1;animation:draw .8s cubic-bezier(.6,0,.3,1) forwards}
.big.lit .fills{opacity:1;transition:opacity .45s}
.big.lit .outline{opacity:0;transition:opacity .6s .2s}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes sweep{0%{transform:translateX(-420px)}22%,100%{transform:translateX(420px)}}
@keyframes breathe{50%{transform:scale(1.03) rotate(2deg)}}
.orbit,.sky{position:absolute;inset:0;pointer-events:none}
.orbit{z-index:0}
.sky{z-index:-1}
.orbit i,.sky i{position:absolute;width:var(--s);aspect-ratio:341/386;background:var(--c,var(--ice));-webkit-mask:var(--glint-mask) center/contain no-repeat;mask:var(--glint-mask) center/contain no-repeat}
.orbit i{animation:float var(--d) ease-in-out var(--dl,0s) infinite;filter:drop-shadow(0 0 10px rgba(166,225,255,.6))}
.sky i{animation:tw var(--d) ease-in-out var(--dl,0s) infinite}
.sky i.kept{--c:#FFFFFF;animation:born .9s cubic-bezier(.3,1.6,.5,1) both, tw var(--d) ease-in-out .9s infinite;filter:drop-shadow(0 0 6px rgba(166,225,255,.9))}
@keyframes float{0%,100%{transform:translateY(0) rotate(0) scale(1);opacity:.9}50%{transform:translateY(-10px) rotate(14deg) scale(.82);opacity:.45}}
@keyframes tw{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.85;transform:scale(1)}}
@keyframes born{from{opacity:0;transform:scale(0) rotate(-90deg)}to{opacity:.9;transform:scale(1) rotate(0)}}
.paused *,.paused::before{animation-play-state:paused!important}
.cue{position:absolute;left:50%;bottom:-18px;transform:translate(-50%,100%);z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(2,14,106,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(166,225,255,.3);font:500 13px/1 var(--kr);color:var(--frost);white-space:nowrap;pointer-events:none}
.cue .en{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ice)}
.cue .g{width:12px;color:var(--ice);animation:cueg 1.8s ease-in-out infinite}
.cue.swap{animation:cueswap .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes cueg{50%{transform:rotate(18deg) scale(1.25)}}
@keyframes cueswap{from{transform:translate(-50%,100%) scale(.85);opacity:.3}}
.hud{position:absolute;right:max(20px, env(safe-area-inset-right,0px));bottom:22px;z-index:3;display:grid;justify-items:end;gap:4px;font:500 12px/1.4 var(--mono);letter-spacing:.16em;color:rgba(166,225,255,.8);pointer-events:none}
.hud b{font-weight:500;color:var(--white)}
.hud .l{display:inline-flex;align-items:center;gap:6px}
.hud .l .g{width:8px}
.hud .dots{display:inline-flex;gap:3px}
.hud .dots i{width:7px;aspect-ratio:341/386;background:rgba(166,225,255,.3);-webkit-mask:var(--glint-mask) center/contain no-repeat;mask:var(--glint-mask) center/contain no-repeat;transition:background .3s}
.hud .dots i.on{background:var(--white)}
#fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:60}

/* trust */
.trust{background:var(--white);border-bottom:1px solid var(--line)}
.trust .in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-block:36px}
.trust .item{display:flex;gap:14px}
.trust .g{width:13px;margin-top:4px;color:var(--glint)}
.trust b{display:block;font-size:18px;font-weight:600;margin-bottom:6px}
.trust span{font-size:15px;line-height:1.5;color:var(--mute)}

/* works */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.work{display:flex;flex-direction:column;gap:16px;min-width:0}
.work .pic{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--night)}
.work .pic img{width:100%;height:100%;object-fit:cover}
.work .meta{display:flex;flex-direction:column;gap:8px}
.work .cat{font:500 13px/1 var(--mono);letter-spacing:.16em;color:var(--luck)}
.work h3{font-size:20px;line-height:1.35;font-weight:600}
.work p{font-size:15px;line-height:1.55;color:var(--mute)}
.work .open{font-size:15px;font-weight:600;color:var(--luck)}

/* studio */
.studio{background:var(--white)}
.studio .in{display:grid;grid-template-columns:480px minmax(0,640px);justify-content:space-between;gap:80px;padding-block:110px}
.studio .h2{font-size:40px;line-height:1.3}
.studio .txt{display:flex;flex-direction:column;gap:28px}
.studio .txt p{font-size:18px;line-height:1.75;color:var(--body)}
.studio .pts{display:grid;gap:14px}
.studio .pts li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:500}
.studio .pts .g{width:11px;color:var(--luck)}

/* cards */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.card{background:var(--white);border:1px solid var(--line);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.card .ph{aspect-ratio:4/3;background:var(--luck)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{display:flex;flex-direction:column;gap:14px;padding:24px 26px 28px}
.card .nm{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card .nm b{font:700 26px/1.1 var(--disp);color:var(--luck)}
.card .pill{font:500 12px/1 var(--mono);color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:6px 11px;white-space:nowrap}
.card .one{font-size:18px;line-height:1.4;font-weight:600}
.card .price{font-size:30px;font-weight:700;letter-spacing:-.02em}
.card .dash{border:0;border-top:1px dashed var(--line);margin:2px 0}
.card .fit{font-size:14px;line-height:1.5;color:var(--mute)}
.card .fit b{color:var(--ink);font-weight:600;margin-right:6px}
.card .ex{font-size:14px;font-weight:600;color:var(--luck)}
.card .ex:hover{text-decoration:underline;text-underline-offset:3px}
.card.addon .bd{gap:12px}
.card.addon .nm b{font-size:24px}
.card.addon .one{font-size:17px}
.card.addon .price{font-size:24px}
.card.addon p{font-size:15px;line-height:1.55;color:var(--mute)}
.plan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.plan .box{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:28px 30px;display:flex;flex-direction:column;gap:10px}
.plan .box.on{border:2px solid var(--luck)}
.plan small{font-size:15px;font-weight:600;color:var(--mute)}
.plan b{font-size:24px;font-weight:700;letter-spacing:-.02em}
.plan .on b{color:var(--luck)}
.plan p{font-size:15px;line-height:1.55;color:var(--body)}
.rows{background:var(--white);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.rows .r{display:grid;grid-template-columns:220px 200px minmax(0,1fr);gap:24px;align-items:center;padding:20px 28px}
.rows .r + .r{border-top:1px solid var(--line)}
.rows .r b{font-size:17px;font-weight:600}
.rows .r strong{font-size:18px;font-weight:700;color:var(--luck)}
.rows .r span{font-size:15px;line-height:1.55;color:var(--mute)}
.grp{display:flex;flex-direction:column;gap:24px}

/* process */
.steps{display:flex;align-items:center;gap:12px;list-style:none;margin:0;padding:0}
.steps li.s{flex:1 1 0;min-width:0;background:var(--paper);border-radius:18px;padding:18px 16px;display:flex;flex-direction:column;gap:8px;min-height:106px}
.steps b{font-size:16px;font-weight:600}
.steps span{font-size:13px;line-height:1.45;color:var(--mute)}
.steps li.a{flex:none;font-size:16px;font-weight:600;color:var(--luck)}

/* good to know */
.gtk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.gtk .box{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:28px 30px 30px;display:flex;flex-direction:column;gap:16px}
.gtk h3{font-size:19px;font-weight:700}
.gtk .list{gap:10px}

/* faq */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;align-items:start}
.faq details{border-bottom:1px solid var(--line);padding:22px 4px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-size:18px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;font-weight:500;color:var(--luck);line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--mute)}

/* quote */
.quote{background:var(--luck);color:var(--white)}
.quote .eyebrow{color:var(--ice)}
.quote .sub{color:rgba(234,242,255,.9)}
.qgrid{display:grid;grid-template-columns:520px minmax(0,656px);justify-content:space-between;gap:24px;align-items:start}
.panel{background:var(--white);color:var(--ink);border-radius:26px;padding:32px;display:flex;flex-direction:column;gap:22px;min-width:0}
.panel h3{font-size:22px;font-weight:700}
.lab{display:flex;gap:4px;font-size:15px;font-weight:600}
.lab i{font-style:normal;color:var(--luck)}
.pk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pk label{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;cursor:pointer;background:var(--white);transition:border-color .2s, background-color .2s}
.pk input{position:absolute;opacity:0;pointer-events:none}
.pk b{font:700 17px/1.2 var(--disp)}
.pk b.kr{font-family:var(--kr)}
.pk span{font-size:14px;font-weight:500;color:var(--mute)}
.pk label:has(input:checked){background:var(--frost);border:2px solid var(--luck);padding:15px 17px}
.pk label:has(input:checked) b{color:var(--luck)}
.pk label:has(input:focus-visible){outline:2px solid var(--sky);outline-offset:3px}
.adds{display:flex;flex-direction:column}
.add{display:flex;align-items:center;gap:12px;padding:14px 0;min-height:51px}
.add + .add{border-top:1px solid var(--hair)}
.add > label{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer;font-size:15px;font-weight:500}
.add input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;border:1.5px solid var(--box);border-radius:6px;background:var(--white);display:grid;place-items:center;cursor:pointer;transition:background-color .15s,border-color .15s}
.add input[type=checkbox]:checked{background:var(--luck);border-color:var(--luck)}
.add input[type=checkbox]:checked::after,.consent input:checked::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.add .pr{flex:none;font-size:14px;color:var(--mute);white-space:nowrap}
.stepper{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:2px}
.stepper button{width:30px;height:28px;border:0;background:none;color:var(--luck);font-size:16px;font-weight:600;cursor:pointer;border-radius:999px}
.stepper button:disabled{color:var(--box);cursor:default}
.stepper output{min-width:14px;text-align:center;font-size:15px;font-weight:600;color:var(--luck)}
.est{background:var(--luck);color:var(--white);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:8px}
.est small{font-size:14px;color:rgba(234,242,255,.85)}
.est .num{display:flex;align-items:center;gap:10px;font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.est .num .g{width:22px;color:var(--ice);opacity:0;transform:scale(.2) rotate(-90deg)}
.est .num .g.on{opacity:1;transform:none}
.est.pop .num .g{animation:estg .7s cubic-bezier(.3,1.5,.5,1) forwards}
.est .bk{font-size:14px;line-height:1.5;color:rgba(234,242,255,.85)}
.est .fin{font-size:14px;color:var(--ice)}
@keyframes estg{0%{opacity:0;transform:scale(.2) rotate(-90deg)}60%{opacity:1;transform:scale(1.25) rotate(10deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.panel.form{gap:18px}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.inp{width:100%;min-height:52px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--white);font-size:15px;transition:border-color .2s, box-shadow .2s}
.inp::placeholder{color:var(--hint)}
.inp:focus{outline:none;border-color:var(--luck);box-shadow:0 0 0 3px rgba(13,65,194,.12)}
textarea.inp{min-height:120px;resize:vertical;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;min-height:43px;padding:10px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);font-size:15px;font-weight:500;transition:background-color .15s, border-color .15s, color .15s}
.chips input:checked + span{background:var(--luck);border-color:var(--luck);color:var(--white)}
.chips input:focus-visible + span{outline:2px solid var(--sky);outline-offset:2px}
fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px}
legend{padding:0;margin-bottom:10px}
.dropz{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 16px;border:1px dashed var(--box);border-radius:12px;background:var(--drop);text-align:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.dropz.over{background:var(--frost);border-color:var(--luck)}
.dropz input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropz b{font-size:15px;font-weight:500;color:var(--luck)}
.dropz span{font-size:13px;color:var(--hint)}
.dropz .picked{font-size:14px;color:var(--ink);font-weight:500}
.err{font-size:14px;color:#C2410C}
.consent{display:flex;gap:12px;padding:18px;border-radius:14px;background:var(--paper)}
.consent input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--box);border-radius:6px;background:var(--white);display:grid;place-items:center;cursor:pointer}
.consent input:checked{background:var(--luck);border-color:var(--luck)}
.consent .t{display:flex;flex-direction:column;gap:6px;min-width:0}
.consent label{font-size:15px;font-weight:600;cursor:pointer}
.consent p{font-size:13px;line-height:1.6;color:var(--mute)}
.consent a{font-size:13px;font-weight:600;color:var(--luck)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send .lbl{display:inline-flex;align-items:center;gap:8px;transition:transform .35s,opacity .35s}
.send .fly{position:absolute;left:50%;top:50%;width:20px;margin:-11px 0 0 -10px;color:var(--white);opacity:0}
.send.go .lbl{transform:translateY(-140%);opacity:0}
.send.go .fly{animation:fly .9s cubic-bezier(.5,0,.2,1) forwards}
@keyframes fly{0%{opacity:0;transform:scale(.3)}25%{opacity:1;transform:scale(1.3) rotate(30deg)}100%{opacity:0;transform:translateY(-180px) scale(.4) rotate(220deg)}}
.fbot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fbot span{font-size:14px;color:var(--mute)}

/* footer */
.foot{background:var(--night);color:var(--white)}
.foot .in{display:flex;flex-direction:column;gap:28px;padding-block:64px calc(56px + env(safe-area-inset-bottom,0px))}
.foot .top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot .logo{color:var(--white);font-size:24px}
.foot nav{display:flex;gap:28px;flex-wrap:wrap;font-size:15px;font-weight:500}
.foot nav a:last-child{font-weight:600}
.foot hr{border:0;border-top:1px solid rgba(255,255,255,.18);margin:0}
.foot .info{display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.6;color:rgba(234,242,255,.75)}
.foot .info small{font-size:13px;color:rgba(234,242,255,.5)}
.foot .info a:hover{color:var(--white)}

/* mobile bottom bar */
.mbar{display:none}

/* lucky card */
.lucky{position:fixed;inset:0;z-index:70;display:grid;place-items:center;overflow-y:auto;padding:max(20px, env(safe-area-inset-top,0px)) max(20px, env(safe-area-inset-right,0px)) max(20px, env(safe-area-inset-bottom,0px)) max(20px, env(safe-area-inset-left,0px));background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lucky[hidden]{display:none}
.lucky .box{width:min(360px,100%);display:grid;gap:14px;justify-items:center;text-align:center;color:var(--white);animation:rise .6s cubic-bezier(.2,1.3,.4,1)}
.lucky img{width:min(260px,62vw);aspect-ratio:9/16;border-radius:18px;box-shadow:0 30px 60px rgba(2,14,106,.5);background:var(--luck)}
.lucky .eyebrow{color:var(--ice)}
.lucky p{font-size:14px;line-height:1.55;color:rgba(234,242,255,.9)}
.lucky .row{display:grid;gap:10px;width:min(300px,100%)}
.lucky .x{background:none;border:0;color:rgba(234,242,255,.85);font-weight:600;font-size:15px;padding:8px 12px;cursor:pointer}
@keyframes rise{from{transform:translateY(40px) scale(.9);opacity:0}}

/* small pages */
.page{min-height:100vh;display:flex;flex-direction:column}
.page main{flex:1}
.msg{background:var(--luck);color:var(--white)}
.msg .in{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:18px;padding-block:56px 64px}
.msg h1{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.msg p{font-size:17px;line-height:1.6;color:rgba(234,242,255,.9)}
.recv{width:64px;aspect-ratio:341/386;position:relative;filter:drop-shadow(0 0 18px rgba(166,225,255,.8))}
.recv .g{position:absolute;inset:0;width:100%;color:var(--ice)}
.recv.drop{animation:land 1.1s cubic-bezier(.3,1.4,.5,1) both}
@keyframes land{0%{transform:translateY(-160px) rotate(-200deg) scale(.4);opacity:0}60%{opacity:1}100%{transform:none}}
.next{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding-block:28px 56px}
.next .box{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:24px 22px;display:flex;flex-direction:column;gap:18px}
.next h2{font-size:18px;font-weight:700}
.next .st{display:flex;gap:12px}
.next .st .g{width:13px;margin-top:3px;color:var(--glint)}
.next .st b{display:block;font-size:16px;font-weight:600;margin-bottom:4px}
.next .st span{font-size:14px;line-height:1.5;color:var(--mute)}
.next .home{align-self:center;font-weight:600;color:var(--luck);padding:8px}
.lost .in{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:18px;padding-block:72px 64px}
.lost .num{display:flex;align-items:flex-start;gap:10px}
.lost .num b{font:700 96px/1 var(--disp);letter-spacing:-.04em;color:var(--luck)}
.lost .slot{position:relative;width:62px;aspect-ratio:341/386;border:0;background:none;padding:0;cursor:pointer;margin-top:-6px}
.lost .slot svg{width:100%;height:100%;overflow:visible}
.lost .slot .ol{fill:none;stroke:var(--glint);stroke-width:9;stroke-dasharray:26 20;stroke-linejoin:round;animation:spin 14s linear infinite;transform-origin:51.1% 55.3%;transform-box:fill-box}
.lost .slot .fl{fill:var(--glint);opacity:0;transform:scale(.3) rotate(-120deg);transform-origin:51.1% 55.3%;transform-box:fill-box;transition:opacity .4s, transform .7s cubic-bezier(.3,1.6,.5,1)}
.lost .slot.found .fl{opacity:1;transform:none}
.lost .slot.found .ol{opacity:0;transition:opacity .3s}
@keyframes spin{to{transform:rotate(360deg)}}
.lost h1{font-size:30px;font-weight:700;letter-spacing:-.02em}
.lost p{font-size:16px;line-height:1.6;color:var(--mute)}
.lost .btns{display:grid;gap:10px;padding-top:12px;max-width:420px}
.lost small{font-size:14px;line-height:1.5;color:var(--mute)}
.mini-foot{background:var(--white);border-top:1px solid var(--line)}
.mini-foot .in{padding-block:24px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.6;color:var(--mute)}

/* privacy */
.doc .in{max-width:800px;margin:0 auto;padding-block:80px 110px;display:flex;flex-direction:column;gap:20px}
.doc h1{font-size:40px;font-weight:700;letter-spacing:-.02em;margin-top:-4px}
.doc .lead{font-size:17px;line-height:1.7;color:var(--body)}
.doc h2{font-size:22px;font-weight:700;margin-top:28px}
.doc ul{display:grid;gap:8px}
.doc li{display:flex;gap:10px;font-size:16px;line-height:1.65;color:var(--body)}
.doc li .g{width:9px;margin-top:8px;color:var(--luck)}
.doc p{font-size:16px;line-height:1.65;color:var(--body)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.tbl table{width:100%;border-collapse:collapse;min-width:560px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;vertical-align:top;font-size:14px;line-height:1.55}
.tbl th{font-weight:600;background:var(--paper);color:var(--ink)}
.tbl td{color:var(--body);border-top:1px solid var(--line)}

/* tablet */
@media (max-width:1099px){
  .sec,.studio .in{padding-block:88px}
  .hero .in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:640px}
  .hero h1{font-size:clamp(44px,4.8vw,52px)}
  .studio .in{grid-template-columns:minmax(0,1fr);gap:28px}
  .cards3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .works{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qgrid{grid-template-columns:minmax(0,1fr)}
  .rows .r{grid-template-columns:180px 170px minmax(0,1fr)}
  .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps li.a{display:none}
  .nav .links{gap:22px}
}
@media (max-width:900px){ .nav .links{display:none} }

/* phone (Figma mobile) */
@media (max-width:759px){
  html{scroll-padding-top:72px}
  .nav .in{min-height:76px}
  .nav .acts .kakao{display:none}
  .logo{font-size:22px}
  .sec,.studio .in{padding-block:64px}
  .sec{gap:36px}
  .h2{font-size:30px}
  .sub{font-size:16px}
  .hero .in{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:48px 64px;gap:36px}
  .hero h1{font-size:clamp(32px,10.5vw,40px)}
  .hero .lede{font-size:17px}
  .hero .copy{gap:22px}
  .stage{justify-self:center;max-width:390px}
  .hud{bottom:16px;font-size:11px}
  .hud .l.top{display:none}
  .trust .in{grid-template-columns:minmax(0,1fr);gap:18px;padding-block:28px}
  .works{grid-template-columns:minmax(0,1fr);gap:40px}
  .studio .h2{font-size:28px}
  .studio .txt p{font-size:16px}
  .cards3{grid-template-columns:minmax(0,1fr)}
  .card .nm b{font-size:26px}
  .card .price{font-size:26px}
  .plan{grid-template-columns:minmax(0,1fr)}
  .plan .box{padding:24px 22px}
  .bar h3{font-size:22px}
  .rows .r{grid-template-columns:minmax(0,1fr);gap:4px;padding:18px 20px}
  .rows .r span{font-size:14px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .gtk{grid-template-columns:minmax(0,1fr);gap:16px}
  .gtk .box{padding:24px 22px}
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq summary{font-size:17px}
  .faq p{font-size:15px}
  .panel{padding:24px 20px;border-radius:22px}
  .f2{grid-template-columns:minmax(0,1fr)}
  .est .num{font-size:28px}
  .foot .in{padding-block:44px calc(40px + 89px + env(safe-area-inset-bottom,0px))}
  .foot .top{flex-direction:column;align-items:flex-start}
  .foot nav{gap:12px 20px}
  .mbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--white);border-top:1px solid var(--line);padding:12px max(20px, env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px, env(safe-area-inset-left,0px));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .mbar .btn{flex:1;min-width:0;padding-inline:12px}
  .mbar.away{transform:translateY(110%)}
  .msg h1{font-size:30px}
  .msg .in{padding-block:40px 48px}
  .lost .in{padding-block:56px 48px}
  .lost .num b{font-size:88px}
  .lost h1{font-size:26px}
  .doc .in{padding-block:48px 72px}
  .doc h1{font-size:30px}
  .doc h2{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .big .breathe,.big .sweep,.sky i,.orbit i,.cue .g,.lost .slot .ol,.recv.drop{animation:none!important}
  .sky i{opacity:.4}
}

/* ---------- line breaks (Korean copy) ---------- */
.sn{display:inline-block;max-width:100%}
.nw{white-space:nowrap!important}
br.d{display:none}
@media (min-width:1100px){ br.d{display:inline} }
h1,h2,h3,.h2,summary{text-wrap:balance}
p,li,td,small,.t,.rows .r span,.next .st span,.fit,.sub,.note{text-wrap:pretty}

/* ---------- stars sit on the first line of each item ---------- */
.list li,.doc li,.trust .item,.next .st,.studio .pts li{align-items:flex-start}
.list li .g{margin-top:7px}
.doc li .g{margin-top:9px}
.trust .g{margin-top:7px}
.next .st .g{margin-top:5px}
.studio .pts .g{margin-top:7px}
.list li .t,.doc li .t{min-width:0}

/* ---------- process steps: room for two-line labels on desktop ---------- */
@media (min-width:1100px){ .steps li.s{padding:18px 14px} }

/* ---------- privacy tables become label/value cards on phones ---------- */
.tbl td,.tbl th{word-break:keep-all}
.tbl .t6 td:first-child{min-width:190px}
@media (max-width:759px){
  .tbl{overflow:visible;border:0;background:none}
  .tbl table{min-width:0}
  .tbl thead{display:none}
  .tbl tr{display:grid;gap:10px;padding:16px 18px;margin-bottom:12px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
  .tbl td{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:0;border:0}
  .tbl td::before{content:attr(data-label);font-weight:600;color:var(--ink)}
}
.foot .info .fgrp,.mini-foot .fgrp{display:inline}
@media (max-width:759px){
  .foot .info .sep,.mini-foot .sep{display:none}
  .foot .info .fgrp,.mini-foot .fgrp{display:block}
}
.pk b{white-space:nowrap;font-size:clamp(14px,4.4vw,17px)}
.add label.stack{flex-direction:column;align-items:flex-start;gap:2px;cursor:default}
.add label.stack small{font-size:13px;font-weight:400;color:var(--mute)}
.hero .meta .fgrp{display:inline}
@media (max-width:759px){ .hero .meta .sep{display:none} .hero .meta .fgrp{display:block} }

/* two separate consents (collection, overseas transfer) */
.consents{display:grid;gap:8px}

/* works and add-on cards: one swipeable row on phones */
.wnav{display:none}
@media (max-width:759px){
  .swipe{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-left:calc(-1 * max(20px, env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(20px, env(safe-area-inset-right,0px)));
    padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px));
    scroll-padding-left:max(20px, env(safe-area-inset-left,0px))}
  .swipe::-webkit-scrollbar{display:none}
  .swipe > *{flex:0 0 72%;scroll-snap-align:start}
  .work{gap:14px}
  .cards3.swipe{align-items:stretch}
  .cards3.swipe .card{flex-basis:76%}
  .work h3{font-size:18px}
  .work p{font-size:14px}
  .wnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:-14px}
  .wdots{display:flex;align-items:center;gap:9px}
  .wdots i{display:block;width:9px;aspect-ratio:341/386;background:var(--line);-webkit-mask:var(--glint-mask) center/contain no-repeat;mask:var(--glint-mask) center/contain no-repeat;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s}
  .wdots i.on{background:var(--luck);transform:scale(1.5)}
  .wnav .hint{font-size:13px;font-weight:500;color:var(--mute);transition:opacity .4s}
  .wnav.moved .hint{opacity:0}
}

/* faq groups */
.faq .fq{font-size:15px;font-weight:700;color:var(--luck);padding:0 4px 6px;border-bottom:1px solid var(--line)}
.faq details .list{margin-top:12px;gap:8px}
.faq details .list .t{font-size:16px;line-height:1.55;color:var(--mute)}
@media (max-width:759px){
  .faq > div + div{margin-top:36px}
  .faq details .list .t{font-size:15px}
}

/* inquiry form: optional extras folded */
.more{border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;cursor:pointer;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";flex:none;font-size:22px;font-weight:500;line-height:1;color:var(--luck)}
.more[open] summary::after{content:"−"}
.more summary b{display:block;font-size:15px;font-weight:600}
.more summary small{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--mute)}
.more .mb{display:flex;flex-direction:column;gap:18px;padding:4px 18px 20px}
.more summary .opt{font-style:normal;font-size:12px;font-weight:600;color:var(--luck);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:3px 8px;margin-left:4px;vertical-align:2px;white-space:nowrap}

/* language switch (KO / EN) */
.lang{display:inline-flex;align-items:center;justify-content:center;min-height:47px;min-width:47px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font:500 13px/1 var(--mono);letter-spacing:.08em;color:var(--ink);white-space:nowrap}
.lang:hover{box-shadow:inset 0 0 0 1.5px var(--luck);color:var(--luck)}
@media (max-width:759px){ .nav .acts .mail{display:none} }

/* ---- 1st revamp (2026-11): coming-soon work card, About, USD service cards ---- */
.add[hidden]{display:none}
.soon{position:relative;overflow:hidden;border-radius:28px;padding:64px;background:linear-gradient(120deg,var(--night),var(--luck));color:var(--white);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.soon .tag{font:500 14px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ice)}
.soon h3{font-size:40px;line-height:1.3;font-weight:700;letter-spacing:-.03em;max-width:15em;text-wrap:balance}
.soon p:not(.tag){font-size:18px;line-height:1.6;color:rgba(234,242,255,.9);max-width:32em}
.soon .btn{margin-top:0}
.soon > *{position:relative;z-index:1}
.soon > .g{position:absolute;z-index:0;pointer-events:none}
.soon .g.gl1{width:371px;right:-31px;top:-40px;color:var(--white);opacity:.08}
.soon .g.gl2{width:48px;right:372px;top:70px;color:var(--ice)}

.about{background:var(--white)}
.about .in{display:grid;grid-template-columns:400px minmax(0,640px);justify-content:space-between;align-items:start;gap:80px;padding-block:110px}
.about .me{margin:0;display:flex;flex-direction:column;gap:16px;min-width:0}
.about .me img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:20px;background:var(--luck)}
.about figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:0;font:400 14px/1.4 var(--mono);color:var(--mute)}
.about figcaption b{font:600 15px/1.4 var(--mono);color:var(--ink)}
.about figcaption span::before{content:"\00a0·\00a0"}
.about .h2{font-size:40px;line-height:1.3}
.about .txt{display:flex;flex-direction:column;gap:28px;min-width:0}
.about .txt > p{font-size:18px;line-height:1.75;color:var(--body)}
.about .pts{display:grid;gap:14px}
.about .pts li{display:flex;align-items:flex-start;gap:12px;font-size:17px;font-weight:500}
.about .pts .g{width:11px;color:var(--luck);margin-top:7px}
.about .credits{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px dashed var(--line)}
.about .lab2{font:500 13px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--luck)}
.about .ttl{font-size:17px;line-height:1.6;font-weight:500;color:var(--ink)}
.about .by{font:400 13px/1.55 var(--mono);color:var(--mute)}

.cards3.svc{align-items:stretch}
.svc .card .bd{flex:1}
.svc .nm{flex-direction:column-reverse;align-items:flex-start;gap:12px}
.svc .nm b{font-size:24px}
.svc .card .btn{margin-top:auto}
.svc .card .list{margin-bottom:8px}
#calc[data-cur="usd"] .pk b{white-space:normal;font-size:15px;line-height:1.25}

@media (max-width:1099px){
  .about .in{grid-template-columns:300px minmax(0,1fr);gap:48px;padding-block:88px}
  .soon{padding:48px}
  .soon h3{font-size:34px}
  .soon .g.gl2{right:300px}
}
@media (max-width:759px){
  .soon{padding:36px 24px 32px;border-radius:24px;gap:14px}
  .soon .tag{font-size:12px}
  .soon h3{font-size:26px}
  .soon p:not(.tag){font-size:16px}
  .soon .g.gl1{width:220px;right:-70px;top:-30px}
  .soon .g.gl2{width:28px;right:24px;top:24px}
  .about .in{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:64px}
  .about .me{flex-direction:row;align-items:center;gap:16px}
  .about .me img{width:96px;height:120px;flex:none;border-radius:16px}
  .about figcaption{flex-direction:column;align-items:flex-start;gap:4px}
  .about figcaption b{font:600 18px/1.4 var(--kr)}
  .about figcaption span{font-size:13px}
  .about figcaption span::before{content:none}
  .about .h2{font-size:28px}
  .about .txt{gap:24px}
  .about .txt > p{font-size:17px;line-height:1.7}
  .about .ttl{font-size:16px}
  .svc .nm b{font-size:24px}
}
.doc .chg{background:var(--frost);border:1px solid var(--line);border-radius:14px;padding:14px 18px;font-size:15px;line-height:1.6;color:var(--body)}
.doc .chg b{color:var(--ink);font-weight:600}