/* Pixel-reference layer: Figma UI Design, file BNzKobfoZuBgqUNfgsMZsF. */
:root { --figma-bg:#120c38; --figma-white:#fff; }
body { background:#0b0726; color:#fff; font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif; }
.app { padding:24px; background:#0b0726; }
.phone { width:390px; min-height:844px; border:0; border-radius:0; background:var(--figma-bg); box-shadow:0 30px 76px rgba(0,0,0,.4); }
.screen { position:relative; display:none; width:390px; min-height:844px; overflow:hidden; padding:0; background-color:var(--figma-bg); background-image:url("../assets/figma/figma-cloud-top.svg"),url("../assets/figma/figma-cloud.svg"),url("../assets/figma/figma-cloud.svg"); background-position:51px 30px,297px 336px,-25px 195px; background-repeat:no-repeat; background-size:80.746px 53px,103.599px 68px,103.599px 68px; }
.screen.on { display:block; animation:figma-enter .24s ease both; }
.screen::before { position:absolute; top:0; left:184px; width:245px; height:245px; content:""; background:url("../assets/figma/figma-moon.png") center/cover no-repeat; opacity:.2; pointer-events:none; }
.screen > * { position:absolute; z-index:1; }
.progress,.eyebrow,.lead { display:none; }
h1,h2 { position:absolute; top:137.142px; left:33px; width:323.329px; margin:0; color:transparent; font-size:0; line-height:1; text-align:center; }
h1::after,h2::after { display:block; color:#fff; font-size:31.315px; font-weight:600; line-height:37px; letter-spacing:-.055em; white-space:pre-line; }
.screen:not(.start) h1::before,.screen:not(.start) h2::before { position:absolute; top:-95px; left:-6px; width:30px; height:30px; content:""; background:url("../assets/figma/figma-back.svg") center/30px 30px no-repeat; }
.screen[data-s="0"] h1::after { content:"직접 만든 송편과 함께\A마음을 전해보세요 ✿"; }.screen[data-s="1"] h2::after { content:"송편 반죽의 재료를\A취향대로 골라주세요:)"; }.screen[data-s="2"] h2::after { content:"열심히 저어서\A반죽을 만들어 보세요!"; }.screen[data-s="3"] h2::after { content:"반죽을 꾹꾹 눌러\A평평하게 펴주세요!"; }.screen[data-s="4"] h2::after { content:"달달한 깨소를\A반죽 중앙에 올려주세요!"; }.screen[data-s="5"] h2::after { content:"내 스타일대로\A모양을 만들어주세요"; }.screen[data-s="6"] h2::after { content:"불을 올려서\A송편을 쪄주세요"; }.screen[data-s="7"] h2::after { content:"직접 만든 송편이\A맛있게 익는 중이에요:)"; }.screen[data-s="8"] h2::after { content:"짜잔!\A송편이 완성 됐어요"; }.screen[data-s="9"] h2::after { content:"송편을 포장할\A보자기를 골라주세요!"; }.screen[data-s="10"] h2::after { content:"마음을 전달할\A카드를 적어주세요!"; }.screen[data-s="11"] h1::after { content:"준비 완료!\A이제 마음을 전달해보세요"; }.screen[data-s="12"] h1::after,.screen[data-s="13"] h1::after { content:"💌 당신을 위한\A수제 송편이 도착했습니다!"; }
.start { display:none; }.start.on { display:block; }.kit { position:absolute; top:251px; left:41px; width:307.785px; height:329.099px; margin:0; padding:0; border:0; border-radius:0; background:url("../assets/figma/figma-kit.png") center/100% 100% no-repeat; }.kit img { display:none; }.kit.open { transform:scale(1.03); transition:transform .28s ease; }.note { position:absolute; top:614px; left:0; width:100%; margin:0; color:transparent; font-size:0; text-align:center; }.note::after { content:"▲ 봉지를 클릭하면 만들기가 시작됩니다!"; color:#fff; font-size:15px; line-height:18px; white-space:nowrap; }.note::before,.start .bottom { display:none; }
.bottom { position:absolute; top:646px; right:auto; bottom:auto; left:23px; width:345px; display:grid; gap:13px; }.primary,.secondary { width:345px; min-height:53px; border:0; border-radius:999px; color:#120c38; background:#fff; box-shadow:none; font-size:14px; font-weight:600; }.primary:disabled { color:rgba(18,12,56,.45); background:rgba(255,255,255,.48); opacity:1; }.screen[data-s="6"] .bottom { display:none; }.screen[data-s="11"] .bottom,.screen[data-s="13"] .bottom { top:580px; }
.grid { position:absolute; top:251px; left:40px; width:310px; display:grid; grid-template-columns:repeat(2,148px); gap:13.855px 14px; margin:0; }.dough { position:relative; width:148px; min-height:157.145px; padding:0; overflow:visible; border:0; border-radius:0; color:#fff; background:transparent; text-align:center; }.dough img { width:148px; height:120px; object-fit:contain; }.dough strong { display:block; margin:0; color:#fff; font-size:12px; font-weight:400; line-height:14px; }.dough span,.tick { display:none; }.dough.selected::after { position:absolute; top:8px; right:7px; width:22px; height:22px; content:"✓"; border-radius:50%; color:#120c38; background:#fff; font-size:14px; line-height:22px; }.status { position:absolute; top:610px; left:0; width:100%; min-height:14px; margin:0; color:transparent; font-size:0; text-align:center; }.status::after { content:"▲ 최소 2개를 선택해주세요!"; color:#fff; font-size:12px; line-height:14px; }
.stage { position:static; display:block; min-height:0; margin:0; }.bowl { position:absolute; top:347px; left:26px; width:339px; height:226px; display:block; touch-action:none; }.bowl > img:first-child { width:339px; height:226px; object-fit:contain; }.mix-dough { top:50px; left:92px; width:154px!important; height:116px!important; }.swipe { position:absolute; top:610px; right:auto; left:0; width:100%; padding:0; border-radius:0; color:transparent; background:none; font-size:0; text-align:center; }.swipe::after { content:"▲ 위아래로 마구 문질러 주세요!"; color:#fff; font-size:12px; line-height:14px; }.mix-status { position:absolute; top:233px; left:0; width:100%; min-height:30px; margin:0; color:transparent; font-size:0; text-align:center; }#mixPct { color:#fff; font-size:30px; font-weight:600; line-height:30px; }#mixPct::after { content:"%"; }
.surface,.form { position:absolute; top:309px; left:37px; width:316.647px; height:211.098px; margin:0; overflow:visible; border:0; border-radius:0; background:none; }.surface::after { display:none; }.asset { width:316.647px; height:211.098px; object-fit:contain; }.tap { position:absolute; top:610px; left:0; width:100%; min-height:14px; margin:0; color:transparent; font-size:0; text-align:center; }.screen[data-s="3"] .tap::after { content:"▲ 반죽을 클릭해주세요!"; }.screen[data-s="4"] .tap::after { content:"▲ 반죽 중앙을 클릭해주세요!"; }.tap::after { color:#fff; font-size:12px; line-height:14px; }.sesame { top:61px; left:95px; width:128px; height:85.333px; }.spoon { display:none; }.form { width:316.647px; height:211.098px; }.flat { top:0; left:0; width:316.647px; height:211.098px; }.formed { top:28px; left:63px; width:190px; height:155px; }.callout { position:absolute; top:301px; bottom:auto; left:-37px; width:390px; padding:0; border-radius:0; color:transparent; background:none; box-shadow:none; font-size:0; text-align:center; transform:none; }.callout::after { content:"▲ 반죽을 드래그 하고, 클릭해서 모양을 잡아주세요!"; color:#fff; font-size:12px; line-height:14px; }
.steam-stage { position:static; min-height:0; }.steamer { position:absolute; top:271px; left:46px; width:297px; height:198px; }.burner { position:absolute; top:402px; left:67px; width:256px; height:170px; }.steam { top:274px; border-left-color:rgba(255,255,255,.65); }.steam-note { position:absolute; top:610px; left:0; width:100%; margin:0; color:transparent; font-size:0; text-align:center; }.steam-note::after { content:"▲ 찜기를 클릭해주세요!"; color:#fff; font-size:12px; line-height:14px; }.loader { position:absolute; top:233px; left:0; width:100%; height:30px; margin:0; border-radius:0; background:none; }.loader::before { display:none; }.loader b { color:#fff; font-size:30px; font-weight:600; line-height:30px; }.loading-art { position:absolute; top:271px; left:46px; width:297px; height:301px; margin:0; object-fit:contain; opacity:0; background:url("../assets/media/media-02.png") 21px 131px/256px 170px no-repeat,url("../assets/media/media-21.png") 0 0/297px 198px no-repeat; }.hint { position:absolute; top:610px; left:0; width:100%; margin:0; color:transparent; font-size:0; text-align:center; }.hint::after { content:"▲ 딱 3초만 기다려주세요!"; color:#fff; font-size:12px; line-height:14px; }
.package,.final { position:static; min-height:0; }.package .container,.final > img { position:absolute; top:288px; left:48px; width:293.258px; height:268px; object-fit:contain; }.cakes { position:absolute; top:383px; left:115px; width:160px; height:88px; }.bojas { position:absolute; z-index:3; top:294px; left:25px; width:339px; height:226px; margin:0; padding:0; opacity:0; }.boja { min-width:100%; height:226px; padding:0; border:0; background:transparent; }.boja img,.boja span { display:none; }.screen[data-s="9"] .final { display:block; }.screen[data-s="9"] .final > img { top:294px; left:25px; width:339px; height:226px; }.screen[data-s="10"] .card { position:absolute; top:293px; left:21px; width:348px; height:232px; margin:0; background-size:348px 232px; }.card textarea { inset:78px 57px 51px; width:234px; height:103px; color:#57483d; font-size:12px; line-height:18px; }.counter { display:none; }.screen[data-s="12"] .gift-wrap { position:absolute; top:294px; left:25px; width:339px; height:226px; margin:0; }.gift-wrap img { width:339px; height:226px; object-fit:contain; filter:none; }.screen[data-s="13"] .stage { position:static; }.gift-view { position:absolute; top:259px; left:48px; width:293px; height:268px; }.gift-view .container { width:293px; height:268px; }.gift-view .card { width:348px; height:232px; margin:0; transform:translate(-27px,4px); }.swipe-tip { position:absolute; top:610px; left:0; width:100%; margin:0; color:transparent; font-size:0; text-align:center; }.swipe-tip::after { content:"▲ 좌우로 밀어 송편과 카드를 확인하세요!"; color:#fff; font-size:12px; }.receiver .bottom { position:absolute; margin:0; padding:0; }
.sheet { background:rgba(0,0,0,.5); }.panel { color:#120c38; background:#fff; }.panel p { color:#554d6d; }.panel .secondary { border:1px solid #ddd; }.toast { color:#120c38; background:#fff; }@keyframes figma-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }@media (max-width:560px) { .app { padding:0; background:var(--figma-bg); }.phone,.screen { width:100%; min-height:100dvh; box-shadow:none; } }