@font-face{font-family:"Pretendard Variable";src:url("fonts/PretendardVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--ink:#0a1120;--navy:#0b1527;--ice:#b9eaf9;--blue:#71bded;--paper:#f3f4f1;--black:#141b23;--muted:#58616a;--line:#d9dddc}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--black);font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button,a{ -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #4daefd;outline-offset:4px}
.skip-link{position:absolute;z-index:30;top:-80px;left:16px;background:#fff;color:#000;padding:12px 18px}
.skip-link:focus{top:12px}
.site-header{height:84px;background:var(--ink);color:#f3f7fb;border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:5}
.nav-inner{max-width:1600px;margin:auto;height:100%;padding:0 clamp(24px,5.2vw,90px);display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:13px;font-size:21px;font-weight:850;letter-spacing:-.055em;white-space:nowrap}
.brand-light{font-weight:350;letter-spacing:-.04em;margin-left:2px}
.brand-mark{width:31px;height:31px;position:relative;display:inline-block}
.brand-mark i{position:absolute;display:block;background:#9addf5;transform:skewX(-27deg)}
.brand-mark i:first-child{width:9px;height:28px;left:9px;top:2px}
.brand-mark i:last-child{width:9px;height:17px;left:20px;top:2px;background:#ecfbff}
.site-header nav{display:flex;align-items:center;gap:40px;font-size:14px;font-weight:650}
.site-header nav>a:not(.nav-login){color:#c8d2de;transition:color .2s}
.site-header nav>a:hover{color:#fff}
.nav-login{border:1px solid rgba(206,230,245,.4);border-radius:999px;padding:12px 20px;transition:background .2s,border-color .2s}
.nav-login:hover{background:rgba(255,255,255,.09);border-color:#cde7f8}
.nav-login span{margin-left:14px;color:#9bddfc}.nav-pending{color:#8da7bc;font-size:12px}
.hero{background:var(--ink);color:#f5f8fc;position:relative;overflow:hidden;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% 50%,rgba(25,65,98,.16),transparent 55%);pointer-events:none}
.hero-inner{max-width:1600px;margin:auto;min-height:720px;padding:44px clamp(24px,5.2vw,90px) 76px;display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);align-items:center;position:relative}
.hero-copy{position:relative;z-index:2;padding:12px 0 0}
.eyebrow,.section-kicker{font-family:Inter,"Segoe UI",sans-serif;font-size:11px;font-weight:800;letter-spacing:.2em;display:flex;align-items:center;gap:12px}
.eyebrow{color:#a5d7eb;margin-bottom:30px}
.eyebrow-line{width:27px;height:1px;background:#9cd9f7}
.eyebrow-dot{font-size:16px;line-height:0;color:#5e94b2}
.hero-definition{font-size:clamp(14px,1.15vw,18px);font-weight:450;letter-spacing:-.025em;color:#becbd7;margin:0 0 26px}
.hero h1{font-size:clamp(68px,6.55vw,104px);line-height:1.08;letter-spacing:-.065em;margin:0;font-weight:670;color:#b7e9fa;white-space:nowrap}
.hero h1 em{font-style:normal;color:inherit}
.hero-description{font-size:clamp(16px,1.24vw,19px);line-height:1.8;letter-spacing:-.025em;color:#bcc9d6;margin:30px 0 30px}
.hero-cta{display:inline-flex;align-items:center;justify-content:space-between;min-width:190px;background:#b7e9fa;color:#071524;padding:17px 18px 17px 23px;font-size:15px;font-weight:800;border-radius:5px;transition:background .2s,transform .2s}
.hero-cta:hover{background:#def8ff;transform:translateY(-2px)}
.cta-arrow{font-size:22px;font-weight:400;line-height:1}
.hero-keywords{margin-top:43px;display:flex;gap:13px;align-items:center;font-size:12px;letter-spacing:-.02em;color:#9dafbf;white-space:nowrap}
.hero-keywords b{color:#5f7c98;font-weight:400}
.hero-art{height:clamp(440px,42vw,670px);position:relative;min-width:0;margin-right:-60px}
.shift-graphic{display:block;width:100%;height:100%;object-fit:contain;mask-image:radial-gradient(ellipse at 53% 50%,#000 58%,transparent 78%);animation:art-arrive .8s ease-out both}
.hero-bottom{position:absolute;bottom:0;left:0;right:0;max-width:1600px;margin:auto;padding:0 clamp(24px,5.2vw,90px) 24px;display:flex;justify-content:space-between;color:#97abbd;font:600 10px Inter,"Segoe UI",sans-serif;letter-spacing:.18em}
.products{padding:112px clamp(24px,5.2vw,90px) 38px;max-width:1600px;margin:auto;scroll-margin-top:20px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin:0 0 54px}
.section-kicker{color:#287cae;margin:0 0 28px}
.section-kicker span{color:#8da4b2;padding-right:12px;border-right:1px solid #bdcbd2}
.section-heading h2{font-size:clamp(42px,4.3vw,67px);line-height:1.22;letter-spacing:-.075em;font-weight:760;margin:0}
.section-heading h2 em{font-style:normal;color:#6d95a9}
.section-heading>p{font-size:15px;line-height:1.85;color:#56616b;letter-spacing:-.035em;margin:0 0 5px;min-width:270px}
.product-card{min-height:440px;display:grid;grid-template-columns:48% 52%;border-radius:13px;overflow:hidden;margin-bottom:18px;background:#fff;border:1px solid #e1e4e3}
.product-text{padding:38px clamp(30px,3.5vw,55px) 43px;display:flex;flex-direction:column;justify-content:space-between}
.product-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.product-no{font:700 11px Inter,"Segoe UI",sans-serif;letter-spacing:.16em;color:#8a979e}
.product-state{font-size:11px;font-weight:750;color:#355d72;background:#eaf3f5;padding:8px 11px;border-radius:999px;white-space:nowrap}
.product-state.beta{background:#f6eee2;color:#8a642c}
.product-icon{display:grid;place-items:center;width:47px;height:47px;border-radius:11px;font-size:27px;font-weight:700;margin:18px 0 16px;line-height:1}
.icon-ziin{background:#e9f1f8;color:#3d6c8d;font-family:Georgia,serif;font-style:italic}
.icon-crema{background:#f7f0e6;color:#ad7947}
.icon-thock{background:#e8edff;color:#6578c7}
.product-text h3{font-size:clamp(37px,3.6vw,56px);line-height:1.07;letter-spacing:-.06em;margin:0 0 12px}
.product-subtitle{font-size:17px;font-weight:740;letter-spacing:-.05em;margin:0 0 10px}
.product-detail{font-size:14px;line-height:1.65;color:#626c72;letter-spacing:-.035em;max-width:420px;margin:0}
.product-link{display:inline-flex;align-items:center;gap:18px;align-self:flex-start;font-size:14px;font-weight:750;border-bottom:1px solid #14212d;min-height:44px;padding:7px 0;margin-top:22px;transition:gap .2s,color .2s}
.product-link:hover{gap:25px;color:#277cae}
.product-link span{font-size:19px;font-weight:400;line-height:1}.product-wait{align-self:flex-start;color:#677981;font-size:13px;font-weight:700;margin-top:25px}
.product-actions{display:flex;align-items:center;gap:27px;flex-wrap:wrap}
.product-secondary{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:#57626a;text-decoration:underline;text-underline-offset:3px;margin-top:22px}
.product-visual{min-height:440px;position:relative;overflow:hidden;display:grid;place-items:center}
.visual-ziin{background:radial-gradient(circle at 50% 50%,#e4f6ff 0,#d9eaf5 43%,#c7d8e5 100%)}
.visual-ziin:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle,#000 10%,transparent 70%)}
.ziin-orbit{position:absolute;border:1px solid rgba(49,101,137,.26);border-radius:50%;width:440px;height:240px;transform:rotate(-22deg)}
.orbit-two{transform:rotate(45deg);width:405px;height:255px}
.ziin-center{width:162px;height:162px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#ffffff,#cce8f8);box-shadow:0 24px 45px rgba(49,97,129,.2),inset 0 0 0 1px #fff;color:#204964;font:bold italic 54px Georgia,serif;letter-spacing:-.13em;position:relative;z-index:2;padding-right:11px}
.ziin-center span{font-size:35px}
.ziin-tag{position:absolute;border:1px solid rgba(255,255,255,.85);background:rgba(249,253,255,.8);backdrop-filter:blur(8px);color:#34627d;padding:10px 14px;border-radius:5px;font:700 10px Inter,"Segoe UI",sans-serif;letter-spacing:.15em;box-shadow:0 12px 25px rgba(49,97,129,.1)}
.tag-a{left:14%;top:22%}.tag-b{right:13%;top:25%}.tag-c{right:17%;bottom:19%}
.ziin-point{position:absolute;width:9px;height:9px;border-radius:50%;background:#5aa8d0;box-shadow:0 0 0 8px rgba(90,168,208,.13)}
.point-a{left:24%;bottom:26%}.point-b{right:27%;top:13%}.point-c{right:11%;bottom:34%}
.visual-crema{background:linear-gradient(145deg,#f2e9dd,#dccbb8)}
.visual-crema:before{content:"";position:absolute;width:560px;height:560px;border:1px solid rgba(151,106,65,.13);border-radius:50%;transform:translate(110px,30px);box-shadow:0 0 0 70px rgba(255,255,255,.06),0 0 0 140px rgba(255,255,255,.06)}
.crema-window{width:78%;height:68%;min-height:275px;background:#fbfaf8;border-radius:12px;box-shadow:0 28px 58px rgba(82,59,36,.21);transform:rotate(-5deg) translate(-1%,1%);overflow:hidden;border:1px solid #fcf9f2;position:relative}
.window-head{height:37px;background:#f2eee8;border-bottom:1px solid #e9e2d9;display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:#ad9b89;font:600 9px Inter,sans-serif;letter-spacing:.05em}
.window-dots{display:flex;gap:4px}.window-dots i{width:5px;height:5px;border-radius:50%;background:#c7b7a6}
.window-body{display:flex;height:calc(100% - 37px)}
.window-sidebar{width:21%;border-right:1px solid #eee8e0;padding:24px 15px;display:flex;flex-direction:column;gap:13px}
.window-sidebar b{height:7px;width:75%;border-radius:5px;background:#ebe5dd}.window-sidebar b:first-child{background:#d8b48c;width:90%}
.window-content{padding:31px 10%;flex:1}
.window-spark{display:block;color:#b98855;font-size:34px;margin-bottom:17px}
.window-line{display:block;height:8px;width:52%;background:#e5dfd7;border-radius:4px;margin-bottom:10px}.window-line.wide{width:80%;height:11px;background:#cbbba7}
.window-cards{display:flex;gap:8px;margin-top:30px}.window-cards i{height:58px;flex:1;background:#f2e9de;border:1px solid #e6d8c5;border-radius:5px}.window-cards i:nth-child(2){background:#e5efe9;border-color:#d5e4db}
.crema-float{position:absolute;bottom:8%;right:4%;background:#fffaf3;padding:14px 17px;color:#8c6a49;box-shadow:0 10px 25px rgba(75,50,24,.14);font-size:12px;font-weight:700;letter-spacing:-.03em;border-radius:6px}
.visual-thock{background:radial-gradient(circle at 46% 39%,#a6aee2,#7d89c7 55%,#6472af);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px}
.visual-thock:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 0 55px rgba(255,255,255,.035),0 0 0 110px rgba(255,255,255,.035)}
.thock-key{z-index:1;width:93px;height:82px;border-radius:13px;border:1px solid #e5ebff;background:linear-gradient(145deg,#edf0ff,#bbc5ea);box-shadow:0 12px 0 #8691c0,0 25px 28px rgba(23,38,86,.25);color:#6976ab;line-height:1.2;padding:16px 18px;font:600 11px Inter,sans-serif;letter-spacing:.08em;transform:rotate(-9deg)}
.thock-key strong{font-size:15px;color:#3d4b89;letter-spacing:.03em}
.sound-bars{z-index:1;height:42px;display:flex;align-items:center;gap:4px}
.sound-bars i{width:3px;height:20px;background:#e8f0ff;border-radius:3px;opacity:.8}
.sound-bars i:nth-child(5n + 1){height:11px;opacity:.6}.sound-bars i:nth-child(5n + 2){height:32px}.sound-bars i:nth-child(5n + 3){height:40px}.sound-bars i:nth-child(5n + 4){height:27px}
.thock-text{z-index:1;background:#edf1ff;color:#4b578e;padding:13px 20px;font-size:13px;font-weight:700;letter-spacing:-.04em;border-radius:5px;box-shadow:0 15px 30px rgba(23,38,86,.18)}
.cursor{display:inline-block;width:2px;height:14px;background:#7b8acb;vertical-align:middle;margin-left:4px}
.products-end{display:flex;justify-content:space-between;font:700 10px Inter,"Segoe UI",sans-serif;letter-spacing:.18em;color:#8b979b;padding:35px 2px 0}
.site-footer{background:#111a29;color:#d3dee9;padding:60px clamp(24px,5.2vw,90px) 30px}
.footer-top,.footer-bottom{max-width:1420px;margin:auto;display:flex;align-items:center;justify-content:space-between}
.footer-top{padding-bottom:80px}.footer-top p{font-size:25px;font-weight:700;letter-spacing:-.055em;color:#a8d9ee;margin:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:24px;color:#8798a9;font-size:12px}
.footer-bottom div{display:flex;gap:27px}.footer-bottom a:hover{color:#fff}
.subpage{background:#f5f6f4;min-height:calc(100svh - 280px);padding:100px 24px 125px}
.subpage-inner{max-width:960px;margin:auto}
.subpage h1{font-size:clamp(39px,4.2vw,62px);letter-spacing:-.07em;line-height:1.25;margin:0 0 17px}
.subpage-lede{font-size:17px;line-height:1.7;color:#647079;margin:0 0 57px}
.account-panel{display:flex;justify-content:space-between;align-items:center;gap:25px;background:#fff;border:1px solid #e1e5e6;border-radius:10px;padding:28px 32px;margin-bottom:15px}
.account-panel strong{font-size:17px;display:block;margin-top:10px}.account-panel p{font-size:14px;color:#69747d;line-height:1.6;margin:8px 0 0}
.panel-label{font:700 10px Inter,sans-serif;letter-spacing:.16em;color:#34759c}
.account-panel h2{font-size:26px;letter-spacing:-.055em;margin:11px 0 0}
.account-panel code{font-size:11px;overflow-wrap:anywhere}
.small-button{display:inline-block;background:#fff;border:1px solid #c6d1d7;border-radius:4px;padding:11px 17px;color:#263947;cursor:pointer;white-space:nowrap;font-size:13px;font-weight:700}
.small-button.primary{background:#142b40;color:#fff;border-color:#142b40}.small-button:hover{filter:brightness(.94)}
.delete-details{padding:25px 4px;border-bottom:1px solid #d6dedf;margin-top:30px;color:#56636c;font-size:14px}
.delete-details summary{cursor:pointer;color:#596770;font-weight:700}
.delete-details label{display:block;margin:16px 0 9px}.delete-row{display:flex;gap:12px}
.delete-row input{border:1px solid #cbd4d8;border-radius:4px;padding:10px;background:#fff;width:190px}
.delete-button{border:1px solid #ac524d;background:#fff;color:#a34640;font-size:13px;font-weight:700;padding:10px 15px;border-radius:4px;cursor:pointer}
.legal h2{font-size:22px;letter-spacing:-.04em;margin:38px 0 10px}.legal p:not(.subpage-lede):not(.section-kicker){max-width:760px;font-size:15px;line-height:1.85;color:#5e6971}.legal a{text-decoration:underline}.legal-date{margin-top:50px!important;color:#87939b!important;font-size:12px!important}
@keyframes art-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.hero-inner{grid-template-columns:1fr 48%;min-height:670px}.hero h1{font-size:clamp(60px,6.8vw,78px)}.hero-art{margin-right:-50px}.hero-keywords{flex-wrap:wrap;white-space:normal}.product-card{min-height:400px;grid-template-columns:50% 50%}.product-visual{min-height:400px}}
@media(max-width:760px){.site-header{height:68px}.nav-inner{padding:0 22px}.brand{font-size:19px}.brand-mark{transform:scale(.85);margin-right:-4px}.site-header nav{gap:18px;font-size:12px}.nav-login{padding:12px 14px}.nav-login span{margin-left:5px}.hero{min-height:auto}.hero-inner{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:50px 24px 52px}.hero-copy{padding:0}.eyebrow{font-size:9px;letter-spacing:.15em;margin-bottom:32px}.hero-definition{font-size:14px;margin-bottom:19px}.hero h1{font-size:clamp(56px,11.5vw,82px);line-height:1.08}.hero-description{font-size:15px;line-height:1.75;margin:28px 0 30px}.hero-cta{min-width:165px;padding:14px 16px 14px 19px}.hero-keywords{margin-top:38px;font-size:10px;gap:7px}.hero-art{height:auto;aspect-ratio:1.1;margin:12px -20px -24px}.hero-bottom{display:none}.products{padding:72px 18px 42px}.section-heading{display:block;margin-bottom:32px}.section-kicker{margin-bottom:22px}.section-heading h2{font-size:43px}.section-heading>p{margin-top:22px;font-size:14px}.product-card{display:flex;flex-direction:column;margin-bottom:15px;min-height:0}.product-text{min-height:350px;padding:28px 27px 29px}.product-text h3{font-size:44px}.product-subtitle{font-size:16px}.product-visual{min-height:310px;height:310px}.ziin-orbit{width:340px;height:200px}.orbit-two{width:310px}.ziin-center{width:130px;height:130px;font-size:43px}.ziin-center span{font-size:28px}.crema-window{min-height:220px;width:75%}.visual-thock:before{width:350px;height:350px}.footer-top{display:block;padding-bottom:53px}.footer-top p{font-size:21px;margin-top:26px}.site-footer{padding:55px 24px 27px}.subpage{padding:72px 22px 100px}.account-panel{align-items:flex-start;flex-direction:column}.products-end{font-size:8px}}
@media(max-width:420px){.hero h1{font-size:clamp(50px,13.4vw,56px)}.hero-keywords{font-size:9px}.product-visual{height:270px;min-height:270px}.tag-a{left:5%}.tag-b{right:5%}.tag-c{right:8%}.product-text{min-height:370px}.footer-bottom{align-items:start;gap:20px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.shift-graphic{animation:none!important}.hero-cta,.product-link{transition:none!important}}
.feedback-panel{align-items:stretch}.feedback-panel>div{width:100%}.feedback-form{display:grid;gap:12px;margin-top:22px}.feedback-form label{font-size:13px;font-weight:750}.feedback-form textarea{width:100%;resize:vertical;min-height:110px;padding:13px;border:1px solid #cbd4d8;border-radius:5px;background:#fff;font:inherit;line-height:1.5}.feedback-form button{justify-self:start}.feedback-panel [role=status],.account-panel [role=status]{color:#216d4b;font-weight:700}

.beta-info{padding:40px;margin-top:36px;background:#e9eeef;border:1px solid #d4dde0;border-radius:16px;scroll-margin-top:30px}
.beta-info h3{font-size:clamp(24px,3vw,34px);line-height:1.4;margin:12px 0 20px}
.beta-info p{line-height:1.8;color:#4b5d69}
.beta-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#d4dde0;border:1px solid #d4dde0;border-radius:16px;overflow:hidden;margin:24px 0}
.beta-facts div{padding:20px;background:#f8fafb}
.beta-facts dt{font-size:13px;color:#566775;margin-bottom:10px}
.beta-facts dd{margin:0;font-size:16px;line-height:1.5}
.beta-info .small-button{display:inline-flex;margin:16px 0}
.beta-help{font-size:14px}
@media(max-width:640px){.beta-facts{grid-template-columns:1fr}.beta-info{padding:24px}}
.site-header nav>a{display:inline-flex;align-items:center;min-height:44px}.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}