:root { --ink:#242228; --paper:#fffdf9; --orange:#ff5b24; --purple:#6551da; --lavender:#e4e0ff; --yellow:#ffcd46; --peach:#ffe3d7; --line:#ddd8d2; --muted:#6f6b66; --shell:min(1180px, calc(100% - 64px)); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--paper); font-family:"Noto Sans KR", Arial, sans-serif; line-height:1.55; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .page-shell { width:var(--shell); margin:auto; }.skip-link { position:fixed; z-index:99; left:15px; top:-50px; padding:8px 12px; color:#fff; background:var(--ink); }.skip-link:focus { top:15px; }
.site-header { position:relative; z-index:5; background:var(--paper); border-bottom:1px solid rgba(36,34,40,.1); }.header-inner { display:flex; align-items:center; width:var(--shell); min-height:78px; margin:auto; gap:25px; }.brand { display:inline-flex; align-items:center; gap:8px; font-size:20px; font-weight:800; letter-spacing:-1.2px; white-space:nowrap; }.brand-mark { display:grid; place-items:center; width:27px; height:27px; color:#fff; background:var(--orange); border-radius:9px 9px 9px 1px; font-family:Montserrat,sans-serif; font-size:17px; font-style:italic; font-weight:800; letter-spacing:-2px; transform:skew(-8deg); }.audience-tabs { display:flex; gap:3px; padding:3px; background:#f0ede8; border-radius:21px; }.audience-tab { padding:5px 12px; color:#827e78; border-radius:16px; font-size:12px; font-weight:700; }.audience-tab.is-active { color:#fff; background:var(--ink); }.header-caption { margin:0 0 0 auto; color:#95908a; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.5px; }.header-link { font-size:13px; font-weight:700; }.header-link span { color:var(--orange); margin-left:6px; }
.hero { overflow:hidden; }.hero-grid { display:grid; grid-template-columns:.89fr 1.11fr; min-height:614px; padding-top:90px; }.hero-copy { position:relative; z-index:1; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 19px; color:var(--orange); font-family:"DM Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.3px; }.eyebrow span { width:25px; height:1px; background:currentColor; }.hero h1,.section-head h2,.selection-title h2,.closing h2 { margin:0; font-size:clamp(45px,5.05vw,70px); font-weight:800; line-height:1.16; letter-spacing:-5px; }.hero h1 em,.closing h2 em { color:var(--orange); font-style:normal; }.hero-description { margin:28px 0 30px; color:var(--muted); font-size:16px; line-height:1.85; letter-spacing:-.65px; }.cta { display:inline-flex; align-items:center; justify-content:space-between; gap:34px; min-height:54px; padding:0 20px; border-radius:6px; font-size:14px; font-weight:800; letter-spacing:-.5px; transition:transform .2s, background .2s; }.cta:hover { transform:translateY(-3px); }.cta-orange { color:#fff; background:var(--orange); box-shadow:0 12px 25px rgba(255,91,36,.23); }.hero-microcopy { display:flex; gap:7px; margin-top:31px; }.hero-microcopy span { padding:5px 9px; border:1px solid #ded9d3; border-radius:15px; color:#746f68; font-size:11px; font-weight:600; }.hero-art { position:relative; min-height:490px; }.hero-shape { position:absolute; }.shape-orange { top:40px; right:-70px; width:345px; height:345px; background:var(--orange); border-radius:50%; }.shape-lilac { top:16px; left:10px; width:365px; height:450px; background:#eae6ff; border-radius:180px 180px 24px 24px; transform:rotate(10deg); }.hero-note { position:absolute; z-index:2; top:63px; left:82px; margin:0; color:var(--purple); font-family:Montserrat,sans-serif; font-size:14px; font-weight:800; line-height:1.05; letter-spacing:-.8px; transform:rotate(-9deg); }.floating-message { position:absolute; z-index:2; display:flex; flex-direction:column; justify-content:space-between; color:#fff; background:var(--purple); box-shadow:0 13px 28px rgba(55,40,117,.22); }.message-one { top:148px; left:24px; width:145px; height:180px; padding:18px; border-radius:7px; font-family:Montserrat,sans-serif; font-size:28px; font-weight:800; line-height:.91; transform:rotate(-12deg); }.message-one span { color:var(--yellow); font-size:32px; }.gift-frame { position:absolute; overflow:hidden; background:#fff; box-shadow:0 22px 38px rgba(40,32,65,.19); }.frame-main { z-index:2; right:61px; bottom:28px; width:290px; height:366px; border-radius:9px; transform:rotate(8deg); }.frame-main img { width:130%; max-width:none; margin:-35px -18%; mix-blend-mode:multiply; transform:rotate(-8deg); }.frame-side { z-index:1; top:106px; right:-20px; width:185px; height:236px; border-radius:7px; transform:rotate(22deg); }.frame-side img { width:100%; height:100%; object-fit:cover; }.label-pill { position:absolute; z-index:3; padding:7px 12px; color:var(--ink); background:#fff; border-radius:22px; box-shadow:0 7px 14px rgba(0,0,0,.1); font-family:"DM Mono",monospace; font-size:9px; font-weight:500; }.pill-left { left:75px; bottom:74px; }.pill-right { right:16px; bottom:50px; }.ticker { display:flex; align-items:center; width:100%; height:56px; overflow:hidden; color:#fff; background:var(--ink); white-space:nowrap; }.ticker span { font-family:Montserrat,sans-serif; font-size:14px; font-weight:700; letter-spacing:-.5px; animation:ticker 24s linear infinite; } @keyframes ticker { to { transform:translateX(-25%); } }
.intro { padding:119px 0 128px; }.section-label { margin:0 0 31px; color:#8b857f; font-family:"DM Mono",monospace; font-size:11px; }.intro-main { display:flex; align-items:end; justify-content:space-between; gap:50px; }.intro h2 { margin:0; font-size:clamp(28px,3vw,42px); font-weight:700; line-height:1.35; letter-spacing:-3px; }.intro h2 strong { color:var(--orange); font-weight:800; }.intro-main > p { margin:0 0 6px; color:var(--muted); font-size:14px; line-height:1.8; letter-spacing:-.5px; }
.moments { padding:118px 0 124px; background:#f2efeb; }.section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:42px; }.section-head h2 { font-size:clamp(33px,3.5vw,48px); letter-spacing:-3.7px; }.moment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.moment-card { position:relative; display:flex; flex-direction:column; min-height:332px; padding:25px; overflow:hidden; border-radius:8px; transition:transform .25s; }.moment-card:hover { transform:translateY(-6px); }.moment-card .number { color:currentColor; font-family:"DM Mono",monospace; font-size:12px; opacity:.75; }.moment-card > p { margin:47px 0 9px; font-family:"DM Mono",monospace; font-size:10px; font-weight:500; }.moment-card h3 { position:relative; z-index:1; margin:0; font-size:24px; font-weight:800; line-height:1.35; letter-spacing:-1.9px; }.moment-card h3 em { font-style:normal; }.card-go { position:relative; z-index:1; display:flex; justify-content:space-between; width:100%; padding-bottom:6px; margin-top:auto; border-bottom:1px solid currentColor; font-size:12px; font-weight:700; }.card-go b { font-size:17px; }.card-peach { background:var(--peach); }.card-peach h3 em { color:var(--orange); }.card-purple { color:#fff; background:var(--purple); }.card-purple .mini-card { position:absolute; right:14px; bottom:43px; width:103px; height:138px; padding:13px; color:var(--purple); background:var(--yellow); border-radius:5px; box-shadow:0 8px 14px rgba(0,0,0,.13); font-family:Montserrat,sans-serif; font-size:20px; font-weight:800; line-height:.95; transform:rotate(10deg); }.card-yellow { background:var(--yellow); }.card-yellow h3 em { color:var(--purple); }.doodle { position:absolute; right:20px; bottom:42px; color:#fff; font-size:67px; line-height:1; }.card-yellow .doodle { color:var(--orange); font-family:Arial,sans-serif; font-size:88px; }
.gift-selection { display:grid; grid-template-columns:.72fr 1.28fr; gap:70px; padding:132px 0 140px; }.selection-title h2 { font-size:clamp(33px,3.5vw,48px); letter-spacing:-3.7px; }.text-link { display:inline-block; padding-bottom:4px; margin-top:33px; border-bottom:1px solid var(--ink); font-size:13px; font-weight:700; }.text-link span { margin-left:15px; }.selection-products { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-self:end; }.product { position:relative; display:block; min-height:353px; padding:15px; overflow:hidden; border-radius:7px; transition:transform .2s; }.product:hover { transform:translateY(-5px); }.product-image { display:grid; place-items:center; width:100%; height:203px; margin-bottom:18px; background:rgba(255,255,255,.68); border-radius:4px; overflow:hidden; }.product-image img { width:112%; max-width:none; mix-blend-mode:multiply; }.product-pink .product-image img { width:100%; height:100%; object-fit:cover; mix-blend-mode:normal; }.product span { display:block; margin-bottom:8px; font-family:"DM Mono",monospace; font-size:9px; }.product strong { font-size:14px; line-height:1.5; letter-spacing:-.7px; }.product b { position:absolute; bottom:16px; right:17px; font-size:20px; }.product-blue { color:#194778; background:#bee7ff; }.product-pink { color:#762e50; background:#ffe4ec; }.product-orange { color:#74391b; background:#ffcfaf; }
.message-band { padding:65px 0; color:#fff; background:var(--orange); }.band-grid { display:grid; grid-template-columns:.65fr 1.4fr auto; align-items:center; gap:45px; }.band-grid > p { margin:0; color:var(--yellow); font-family:Montserrat,sans-serif; font-size:20px; font-weight:800; line-height:1.03; letter-spacing:-1.3px; }.band-grid h2 { margin:0; font-size:clamp(28px,3.3vw,43px); font-weight:800; line-height:1.22; letter-spacing:-3.2px; }.band-grid h2 em { color:var(--yellow); font-style:normal; }.cta-light { color:var(--ink); background:#fff; white-space:nowrap; }.closing { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(50px,11vw,150px); padding:140px 0; }.closing-art { position:relative; min-height:450px; overflow:hidden; background:#e9e5ff; border-radius:50% 50% 11px 11px; }.closing-art::before { content:""; position:absolute; z-index:0; top:41px; left:50%; width:320px; height:320px; background:var(--yellow); border-radius:50%; transform:translateX(-50%); }.closing-card { position:absolute; z-index:1; bottom:40px; left:50%; width:245px; height:300px; padding:23px; overflow:hidden; background:#fff; border-radius:8px; box-shadow:0 20px 28px rgba(59,44,109,.2); transform:translateX(-50%) rotate(-8deg); }.closing-card p { position:relative; z-index:2; margin:0; font-family:Montserrat,sans-serif; font-size:21px; font-weight:600; line-height:1.06; letter-spacing:-1.5px; }.closing-card p strong { font-size:27px; }.closing-card img { position:absolute; bottom:-53px; left:-22px; width:118%; max-width:none; mix-blend-mode:multiply; transform:rotate(8deg); }.spark { position:absolute; z-index:2; color:var(--orange); }.spark-one { top:58px; left:39px; font-size:43px; }.spark-two { right:33px; bottom:41px; color:#fff; font-size:51px; }.closing h2 { font-size:clamp(40px,4.5vw,61px); letter-spacing:-4.5px; }.closing-copy > p:not(.eyebrow) { margin:26px 0 31px; color:var(--muted); font-size:15px; line-height:1.85; letter-spacing:-.6px; }.cta-dark { color:#fff; background:var(--ink); }
.site-footer { color:#fff; background:var(--ink); }.footer-top { display:grid; grid-template-columns:1fr 1.1fr auto; align-items:center; gap:30px; min-height:155px; }.brand-footer { color:#fff; }.footer-top p { margin:0; font-size:19px; font-weight:600; line-height:1.5; letter-spacing:-1.1px; }.footer-top > a:last-child { padding-bottom:4px; border-bottom:1px solid #fff; font-family:"DM Mono",monospace; font-size:11px; }.footer-top > a:last-child span { margin-left:13px; }.footer-bottom { display:flex; align-items:center; justify-content:space-between; min-height:58px; color:#a8a5a2; border-top:1px solid #4b494d; font-family:"DM Mono",monospace; font-size:10px; }.footer-bottom p { margin:0; }.footer-bottom a { color:#fff; text-decoration:underline; text-underline-offset:4px; }
.terms-page { background:#f5f2ee; }.terms-shell { width:min(820px,calc(100% - 40px)); margin:auto; padding:104px 0 125px; }.terms-shell > h1 { margin:0; font-size:clamp(39px,5vw,60px); font-weight:800; letter-spacing:-4px; }.terms-lead { margin:12px 0 54px; color:var(--muted); font-size:14px; }.terms-content { padding:44px 48px; background:#fffdf9; border-radius:8px; box-shadow:0 13px 30px rgba(46,42,39,.05); }.terms-copy { color:#625e58; font-size:13px; line-height:1.9; letter-spacing:-.4px; white-space:pre-wrap; word-break:keep-all; }.terms-copy::first-line { color:var(--ink); font-size:19px; font-weight:800; }.terms-back { display:inline-block; padding-bottom:5px; margin-top:30px; border-bottom:1px solid var(--ink); font-size:13px; font-weight:700; }

@media (max-width:860px) { :root { --shell:min(100% - 40px, 680px); }.header-caption { display:none; }.header-link { margin-left:auto; }.hero-grid { grid-template-columns:1fr; padding-top:68px; }.hero-art { max-width:590px; width:100%; margin:35px auto -11px; }.intro-main { display:block; }.intro-main > p { margin-top:21px; }.gift-selection { grid-template-columns:1fr; gap:38px; }.selection-products { max-width:650px; }.band-grid { grid-template-columns:1fr auto; }.band-grid > p { display:none; }.closing { gap:65px; }.footer-top { grid-template-columns:1fr auto; }.footer-top p { display:none; } }
@media (max-width:620px) { :root { --shell:calc(100% - 40px); }.header-inner { min-height:66px; gap:12px; }.brand { font-size:17px; }.brand-mark { width:24px; height:24px; font-size:15px; }.audience-tabs { padding:2px; }.audience-tab { padding:5px 9px; font-size:11px; }.header-link { font-size:0; }.header-link span { display:grid; place-items:center; width:28px; height:28px; margin:0; border:1px solid var(--ink); border-radius:50%; font-size:15px; }.hero-grid { min-height:0; padding-top:54px; }.hero h1,.closing h2 { font-size:43px; line-height:1.18; letter-spacing:-3.8px; }.hero-description { margin:20px 0 25px; font-size:14px; line-height:1.75; }.hero-description br { display:none; }.cta { min-height:49px; font-size:13px; }.hero-microcopy { margin-top:25px; }.hero-art { min-height:362px; margin-top:28px; }.shape-orange { top:39px; right:-38px; width:245px; height:245px; }.shape-lilac { top:14px; left:8px; width:270px; height:330px; }.hero-note { top:42px; left:43px; font-size:10px; }.message-one { top:104px; left:15px; width:109px; height:135px; padding:14px; font-size:21px; }.message-one span { font-size:24px; }.frame-main { right:33px; bottom:20px; width:210px; height:267px; }.frame-side { top:82px; right:-16px; width:132px; height:168px; }.pill-left { left:34px; bottom:55px; }.pill-right { right:3px; bottom:37px; }.label-pill { padding:5px 9px; font-size:7px; }.ticker { height:46px; }.ticker span { font-size:11px; }.intro { padding:74px 0 80px; }.section-label { margin-bottom:22px; font-size:10px; }.intro h2 { font-size:28px; letter-spacing:-2.4px; }.intro-main > p { font-size:13px; }.moments { padding:76px 0 80px; }.section-head { display:block; margin-bottom:27px; }.section-head h2,.selection-title h2 { font-size:32px; letter-spacing:-2.7px; }.moment-grid { grid-template-columns:1fr; gap:10px; }.moment-card { min-height:238px; padding:20px; }.moment-card > p { margin-top:28px; }.moment-card h3 { font-size:22px; }.card-purple .mini-card { right:22px; bottom:37px; width:86px; height:108px; font-size:17px; }.doodle { right:22px; bottom:28px; font-size:55px; }.gift-selection { padding:79px 0; gap:31px; }.text-link { margin-top:23px; }.selection-products { display:flex; margin-right:-20px; overflow-x:auto; padding:4px 20px 10px 1px; scrollbar-width:none; }.selection-products::-webkit-scrollbar { display:none; }.product { flex:0 0 215px; min-height:326px; }.product-image { height:183px; }.message-band { padding:47px 0; }.band-grid { display:block; }.band-grid h2 { margin-bottom:25px; font-size:31px; letter-spacing:-2.5px; }.cta-light { width:100%; }.closing { grid-template-columns:1fr; gap:48px; padding:80px 0; }.closing-art { min-height:350px; }.closing-art::before { width:264px; height:264px; }.closing-card { bottom:29px; width:195px; height:239px; padding:18px; }.closing-card p { font-size:17px; }.closing-card p strong { font-size:22px; }.spark-one { top:38px; left:28px; font-size:34px; }.spark-two { right:24px; bottom:25px; font-size:41px; }.closing-copy > p:not(.eyebrow) { margin:20px 0 26px; font-size:13px; }.cta-dark { width:100%; }.footer-top { min-height:0; padding:35px 0; }.footer-bottom { min-height:54px; font-size:9px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
@media (max-width:620px) { .terms-shell { padding:70px 0 75px; }.terms-shell > h1 { font-size:39px; letter-spacing:-3px; }.terms-lead { margin-bottom:33px; font-size:13px; }.terms-content { padding:27px 22px; }.terms-copy { font-size:12px; line-height:1.82; }.terms-copy::first-line { font-size:17px; } }