:root { --ink:#120708; --wine:#250a0d; --cream:#fff0e4; --soft:#d9bbb1; --red:#f33b31; --red-deep:#9b1718; --leaf:#63d667; --line:rgba(255,234,220,.15); --serif:"Playfair Display","Noto Sans KR",serif; --sans:"DM Sans","Noto Sans KR",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--cream); background:radial-gradient(850px 500px at 80% 12%,rgba(128,17,20,.34),transparent 65%), var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; } .wrap { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:10px; font-family:var(--serif); font-size:26px; font-weight:800; letter-spacing:-.04em; } .brand img { width:30px; height:30px; object-fit:contain; } nav { display:flex; gap:30px; color:var(--soft); font-size:14px; font-weight:700; } nav a { transition:color .2s ease; } nav a:hover,nav [aria-current="page"] { color:var(--cream); }
.hero { min-height:690px; display:grid; grid-template-columns:.88fr 1.12fr; align-items:center; gap:20px; position:relative; overflow:clip; } .hero-copy { z-index:2; padding-block:78px; } .wordmark { margin:0 0 18px; color:var(--leaf); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } h1,h2,h3 { font-family:var(--serif); letter-spacing:-.05em; } h1 { max-width:600px; margin:0; font-size:clamp(48px,4.6vw,70px); line-height:1.08; } .hero-summary { margin:26px 0 34px; color:var(--soft); font-size:18px; line-height:1.75; } .primary-button { display:inline-flex; align-items:center; gap:24px; padding:17px 24px; border-radius:100px; background:linear-gradient(135deg,#ff5144,var(--red-deep)); box-shadow:0 16px 42px rgba(220,39,31,.28),inset 0 1px rgba(255,255,255,.35); font-weight:800; }
.hero-art { min-height:610px; position:relative; } .juice-splash { position:absolute; top:100px; left:10%; width:70%; height:360px; background:radial-gradient(ellipse at 45% 45%,rgba(255,60,35,.78),rgba(164,20,20,.46) 30%,transparent 68%); filter:blur(18px); transform:rotate(-13deg); } .hero-tomato { position:absolute; width:min(500px,44vw); left:-2%; top:158px; z-index:1; filter:drop-shadow(0 32px 24px rgba(0,0,0,.48)); } .phone { position:absolute; z-index:2; top:72px; right:20%; width:236px; height:478px; padding:10px; border:4px solid #302220; border-radius:38px; background:#080505; box-shadow:0 30px 70px rgba(0,0,0,.62); transform:rotate(5deg); } .phone-screen { position:relative; height:100%; overflow:hidden; border-radius:25px; background:radial-gradient(circle at 50% 16%,#57201b,#160607 66%); } .phone-brand { position:absolute; top:45px; width:100%; text-align:center; z-index:2; font-family:var(--serif); font-size:31px; font-weight:800; } .phone-timer { position:absolute; top:105px; left:50%; z-index:2; transform:translateX(-50%); padding:10px 12px; border:2px solid var(--red); border-radius:50%; color:var(--cream); font-size:17px; } .phone-screen img { position:absolute; width:128%; left:-14%; top:164px; filter:drop-shadow(0 20px 20px rgba(0,0,0,.35)); } .phone-action { position:absolute; bottom:27px; left:20px; right:20px; padding:13px; border-radius:18px; text-align:center; background:#4b201b; font-size:13px; font-weight:700; } .bottle { position:absolute; z-index:3; right:-10%; bottom:0; width:230px; height:490px; object-fit:contain; filter:drop-shadow(0 28px 32px rgba(0,0,0,.54)); }
.intro { padding:140px 0 120px; text-align:center; } .intro > p:first-child { color:var(--leaf); font-size:15px; font-weight:700; } .intro h2 { margin:14px auto 22px; font-size:clamp(38px,5vw,64px); } .intro-copy { max-width:590px; margin:auto; color:var(--soft); line-height:1.8; font-size:17px; }
.steps { border-block:1px solid var(--line); background:linear-gradient(100deg,#20090c,rgba(72,16,17,.7),#160708); } .step-grid { display:grid; grid-template-columns:repeat(3,1fr); } .step { min-height:290px; padding:44px 34px; border-left:1px solid var(--line); position:relative; overflow:hidden; } .step:last-child { border-right:1px solid var(--line); } .step span { color:var(--leaf); font-size:13px; font-weight:700; } .step h3 { margin:70px 0 12px; font-size:30px; } .step p { max-width:210px; color:var(--soft); line-height:1.7; font-size:14px; } .step::after { content:""; position:absolute; right:-22px; bottom:-32px; width:145px; height:145px; border-radius:50%; opacity:.5; } .step-press::after{background:radial-gradient(circle at 35% 30%,#ff745d,#aa1b18 55%,transparent 60%)} .step-crack::after{background:conic-gradient(from 30deg,#e43e32,#ffc6a9,#8f1213,#e43e32)} .step-pour::after{background:radial-gradient(circle,#ff4537 0 30%,transparent 31%)}
.bottle-section { display:grid; grid-template-columns:1fr .8fr; gap:70px; align-items:center; padding:130px 0; } .bottle-section h2 { margin:0 0 20px; font-size:clamp(42px,5vw,66px); } .bottle-section p:not(.wordmark) { max-width:460px; color:var(--soft); line-height:1.85; } .text-link { display:inline-block; margin-top:30px; color:var(--leaf); font-weight:800; } .bottle-stage { min-height:450px; display:grid; place-items:center; border-radius:40px; background:radial-gradient(circle at 48% 72%,rgba(246,54,36,.38),transparent 42%),#2b1011; } .bottle-stage img { height:450px; max-width:90%; object-fit:contain; filter:drop-shadow(0 30px 25px rgba(0,0,0,.45)); }
.site-footer { min-height:130px; display:flex; align-items:center; gap:26px; border-top:1px solid var(--line); color:var(--soft); } .site-footer div { display:flex; gap:18px; font-size:13px; } .site-footer small { margin-left:auto; font-size:12px; }
.legal-page { background:radial-gradient(900px 500px at 50% -10%,rgba(120,20,22,.42),transparent 65%),var(--ink); } .legal { max-width:820px; padding:90px 0 120px; } .legal h1 { font-size:clamp(44px,7vw,70px); } .effective-date { margin:16px 0 58px!important; color:var(--soft); font-size:14px!important; } .legal > p { color:#e7cec3; font-size:16px; line-height:1.95; } .legal h2 { margin:54px 0 15px; color:var(--cream); font-size:26px; } .legal strong { color:var(--cream); } .legal a { color:var(--leaf); text-decoration:underline; text-underline-offset:4px; }
@media (max-width:780px) { .wrap{width:min(100% - 36px,600px)} .site-header{height:76px}.brand{font-size:23px}.site-header nav{gap:14px;font-size:12px}.hero{min-height:auto;grid-template-columns:1fr}.hero-copy{padding:68px 0 20px}.hero-art{height:500px;min-height:0}.hero-tomato{width:390px;top:176px;left:-20px}.phone{top:18px;right:15%;width:184px;height:373px;transform:rotate(6deg)}.phone-brand{top:31px;font-size:25px}.phone-timer{top:84px;font-size:13px;padding:8px}.phone-screen img{top:127px}.phone-action{bottom:18px;font-size:10px;padding:10px}.bottle{width:155px;height:365px;right:-12%;bottom:-16px}.step-grid{grid-template-columns:1fr}.step{min-height:208px;border-right:1px solid var(--line)}.step h3{margin:38px 0 8px}.bottle-section{grid-template-columns:1fr;padding:84px 0;gap:35px}.bottle-stage{min-height:360px}.bottle-stage img{height:360px}.site-footer{padding:28px 0;align-items:flex-start;flex-wrap:wrap}.site-footer small{width:100%;margin-left:0}.legal{padding:58px 0 90px}.legal h2{margin-top:42px;font-size:24px}.legal > p{font-size:15px}.intro{padding:100px 0 85px} }