/* 천희관 첫 화면 문구 3안 — 공통 틀 (꽃잎 파문 물, 버튼 없이 눌러 계속) */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } :root { --ink: #46202d; --sub: rgba(70,32,45,.62); --acc: #bf4a6f; } body { background: #ecd3da; font-family: "Gowun Batang", serif; -webkit-font-smoothing: antialiased; overflow: hidden; } /* 폰은 화면 가득, 폴드·PC만 가운데 세로 화면 */ .stage { position: relative; width: 100%; max-width: 480px; height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden; background: radial-gradient(110% 65% at 50% 34%, #fdf0f3 0%, #f7dbe2 58%, #efc7d1 100%); color: var(--ink); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } @media (min-width: 600px) { body { display: flex; align-items: center; justify-content: center; } .stage { height: min(100dvh, 920px); box-shadow: 0 30px 90px rgba(0,0,0,.18); } } .fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .restart { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top) + 14px); left: 14px; font: 500 12.5px "Noto Sans KR", sans-serif; color: var(--sub); cursor: pointer; padding: 6px 12px; border-radius: 16px; border: 1px solid rgba(70,32,45,.12); background: rgba(255,255,255,.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .card { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 0 28px; text-align: center; word-break: keep-all; pointer-events: none; transition: opacity .4s ease; } .card.out { opacity: 0; transition-duration: .3s; } /* 한 줄씩 — 흐림에서 선명으로 */ .rv { opacity: 0; filter: blur(6px); translate: 0 10px; transition: opacity 1s ease, filter 1s ease, translate 1s ease; } .rv.in { opacity: 1; filter: blur(0); translate: 0 0; } .hj { font-family: "Noto Serif KR", "Gowun Batang", serif; font-weight: 500; font-size: 13px; letter-spacing: .55em; padding-left: .55em; color: var(--sub); } b, .acc { color: var(--acc); font-weight: 700; } .big { font-size: clamp(22px, 6.5vw, 27px); line-height: 1.78; text-shadow: 0 1px 14px rgba(255,255,255,.75); } /* 2장 (세 안 공통) */ /* 2장: 금성여자 둘째 장처럼 — 화자·한자·문장을 한 덩어리로 화면 가운데에. 화자는 작게(키의 약 36%), 가장자리는 물속으로 스며들게 흐린다 */ .c2 { justify-content: center; padding-bottom: calc(env(safe-area-inset-bottom) + 64px); } .c2 .hj { margin-bottom: 14px; } .c2 .hwaja { display: block; height: min(310px, 37svh); width: auto; margin: 0 auto 18px; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%); mask-image: linear-gradient(to bottom, #000 72%, transparent 99%); } .c2::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 120%; height: 62%; translate: -50% -58%; background: radial-gradient(closest-side, rgba(255,246,248,.65), rgba(255,246,248,0)); } .c2 .tiny { margin-top: 16px; font: 400 14px "Noto Sans KR", sans-serif; color: var(--sub); } /* 「화면을 눌러 계속」 — 금성여자: 0까지 꺼지지 않게, 55%~100%에서만 숨 쉰다 */ .taphint { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 30px); width: 100%; padding: 10px 0; background: none; border: 0; cursor: pointer; font: 400 15.5px "Gowun Batang", serif; letter-spacing: .22em; padding-left: .22em; color: rgba(70,32,45,.88); text-shadow: 0 1px 10px rgba(255,255,255,.9); opacity: 0; transition: opacity .8s ease; } .taphint.on { opacity: .55; animation: hint 2.6s ease .8s infinite; } @keyframes hint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .toast { position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; font: 500 13px "Noto Sans KR", sans-serif; color: var(--ink); padding: 10px 16px; border-radius: 20px; background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s ease; pointer-events: none; } .toast.on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .rv { transition: none; } .taphint.on { opacity: .9; animation: none; } } /* 2장 화자 이름 — 한자 자리에 '소희', 강조 핑크 (주익님 10/28) */ .c2 .nm { font-family: "Gowun Batang", serif; font-weight: 700; font-size: 15px; letter-spacing: .4em; padding-left: .4em; color: var(--acc); } /* 2장 인사가 세 줄이 되어 글을 한 단계 작게, 키 작은 폰(≤620px)은 그림도 줄여 안내 글과 안 겹치게 */ .c2 .big { font-size: clamp(19px, 5.6vw, 23px); line-height: 1.7; } @media (max-height: 620px) { .c2 { padding-bottom: calc(env(safe-area-inset-bottom) + 76px); } .c2 .hwaja { height: min(310px, 31svh); margin-bottom: 12px; } .c2 .tiny { margin-top: 10px; } } /* 2장 (10/28): 인사 두 문장 사이를 띄우고 글을 한 단계 더 작게, 아래에 「좋아」 버튼 */ .c2 .big { font-size: clamp(17px, 5vw, 21px); line-height: 1.7; } .c2 .big.b { margin-top: 18px; } .okbtn { pointer-events: auto; margin-top: 34px; width: min(240px, 64vw); height: 54px; border: 0; border-radius: 27px; cursor: pointer; background: var(--acc); color: #fff; font: 700 18px "Gowun Batang", serif; letter-spacing: .3em; padding-left: .3em; box-shadow: 0 8px 22px rgba(191,74,111,.28); } .okbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .stage.btnmode { cursor: default; } @media (max-height: 620px) { .okbtn { margin-top: 22px; height: 48px; } } .okbtn.img { width: auto; height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; } .okbtn.img img { display: block; width: min(250px, 66vw); height: auto; max-height: 96px; object-fit: contain; } /* 글자 없는 버튼 그림 위에 「좋아」를 코드 글자로 얹는다 (?txt=dark|light) */ .okbtn.txt { position: relative; } .okbtn.txt span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 18px "Gowun Batang", serif; letter-spacing: .3em; padding-left: .3em; color: #46202d; } .okbtn.txt.light span { color: #fff; text-shadow: 0 1px 6px rgba(70,32,45,.25); } /* 「좋아」 확정 (주익님 10/28): 분홍 한지 부적 + 모서리 당초문(덩굴), 네 모서리 대칭. 글자는 코드(고운바탕) */ .okbtn.bujeok { width: min(250px, 66vw); height: auto; aspect-ratio: 862 / 250; border-radius: 0; background: url("okbtn.webp?v=1") center / 100% 100% no-repeat; color: #46202d; font: 700 18px "Gowun Batang", serif; letter-spacing: .3em; padding-left: .3em; box-shadow: 0 6px 16px rgba(70,32,45,.12); } .okbtn.bujeok:active { translate: 0 1px; box-shadow: 0 3px 8px rgba(70,32,45,.12); } @media (max-height: 620px) { .okbtn.bujeok { height: auto; } } /* ── 코드로 그린 「좋아」 4안 (10/28) — 그림 파일 없이 CSS·SVG만. 폰마다 선명하고, 글자는 고운바탕 ── */ .okbtn.cb { position: relative; isolation: isolate; width: min(250px, 66vw); height: 60px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #46202d; font: 700 18px "Gowun Batang", serif; letter-spacing: 0; -webkit-tap-highlight-color: transparent; transition: transform .14s ease, filter .14s ease; } .okbtn.cb span { position: relative; z-index: 2; letter-spacing: .34em; padding-left: .34em; } .okbtn.cb i { position: absolute; pointer-events: none; font-style: normal; } .okbtn.cb:active { transform: translateY(1px) scale(.985); } /* 1 · 부적 — 분홍 한지 + 붉은 이중 테두리 + 네 모서리 당초문. 누르면 붉은 「喜」 도장이 찍힌다 */ .cb1 { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg transform='translate(0 0) scale(1 1)' fill='none' stroke='%23c0393b' stroke-width='1.05' stroke-linecap='round'%3E%3Cpath d='M2.5 15 C2.5 7.5 7.5 2.5 15 2.5'/%3E%3Cpath d='M15 2.5 C19.5 2.5 20.5 7 17 8.2 C14.6 9 13.4 6.4 15.4 5.8'/%3E%3Cpath d='M2.5 15 C2.5 19.5 7 20.5 8.2 17 C9 14.6 6.4 13.4 5.8 15.4'/%3E%3Cpath d='M6.5 6.5 C9.5 8.5 11 8.6 12.4 7.2'/%3E%3Cpath d='M6.5 6.5 C8.5 9.5 8.6 11 7.2 12.4'/%3E%3Ccircle cx='5.6' cy='5.6' r='1.15' fill='%23c0393b' stroke='none'/%3E%3C/g%3E%3C/svg%3E") 10px 10px / 20px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg transform='translate(22 0) scale(-1 1)' fill='none' stroke='%23c0393b' stroke-width='1.05' stroke-linecap='round'%3E%3Cpath d='M2.5 15 C2.5 7.5 7.5 2.5 15 2.5'/%3E%3Cpath d='M15 2.5 C19.5 2.5 20.5 7 17 8.2 C14.6 9 13.4 6.4 15.4 5.8'/%3E%3Cpath d='M2.5 15 C2.5 19.5 7 20.5 8.2 17 C9 14.6 6.4 13.4 5.8 15.4'/%3E%3Cpath d='M6.5 6.5 C9.5 8.5 11 8.6 12.4 7.2'/%3E%3Cpath d='M6.5 6.5 C8.5 9.5 8.6 11 7.2 12.4'/%3E%3Ccircle cx='5.6' cy='5.6' r='1.15' fill='%23c0393b' stroke='none'/%3E%3C/g%3E%3C/svg%3E") right 10px top 10px / 20px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg transform='translate(0 22) scale(1 -1)' fill='none' stroke='%23c0393b' stroke-width='1.05' stroke-linecap='round'%3E%3Cpath d='M2.5 15 C2.5 7.5 7.5 2.5 15 2.5'/%3E%3Cpath d='M15 2.5 C19.5 2.5 20.5 7 17 8.2 C14.6 9 13.4 6.4 15.4 5.8'/%3E%3Cpath d='M2.5 15 C2.5 19.5 7 20.5 8.2 17 C9 14.6 6.4 13.4 5.8 15.4'/%3E%3Cpath d='M6.5 6.5 C9.5 8.5 11 8.6 12.4 7.2'/%3E%3Cpath d='M6.5 6.5 C8.5 9.5 8.6 11 7.2 12.4'/%3E%3Ccircle cx='5.6' cy='5.6' r='1.15' fill='%23c0393b' stroke='none'/%3E%3C/g%3E%3C/svg%3E") left 10px bottom 10px / 20px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg transform='translate(22 22) scale(-1 -1)' fill='none' stroke='%23c0393b' stroke-width='1.05' stroke-linecap='round'%3E%3Cpath d='M2.5 15 C2.5 7.5 7.5 2.5 15 2.5'/%3E%3Cpath d='M15 2.5 C19.5 2.5 20.5 7 17 8.2 C14.6 9 13.4 6.4 15.4 5.8'/%3E%3Cpath d='M2.5 15 C2.5 19.5 7 20.5 8.2 17 C9 14.6 6.4 13.4 5.8 15.4'/%3E%3Cpath d='M6.5 6.5 C9.5 8.5 11 8.6 12.4 7.2'/%3E%3Cpath d='M6.5 6.5 C8.5 9.5 8.6 11 7.2 12.4'/%3E%3Ccircle cx='5.6' cy='5.6' r='1.15' fill='%23c0393b' stroke='none'/%3E%3C/g%3E%3C/svg%3E") right 10px bottom 10px / 20px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' fill='none' stroke='rgba(192,57,59,.10)' stroke-width='.6'%3E%3Cpath d='M10 30 C40 26 60 40 90 34'/%3E%3Cpath d='M140 80 C170 70 190 88 230 78'/%3E%3Cpath d='M60 100 C80 92 100 104 120 96'/%3E%3Cpath d='M170 20 C185 26 200 18 215 26'/%3E%3C/svg%3E") 0 0 / 240px 120px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .24 0 0 0 0 .28 0 0 0 .085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px, radial-gradient(120% 140% at 50% 40%, #fff7f6 0%, #fbe9ea 70%, #f6dcdf 100%) !important; box-shadow: inset 0 0 0 3px #fdf3f3, inset 0 0 0 4.2px #c0393b, inset 0 0 0 6px #fdf3f3, inset 0 0 0 6.8px #c0393b, 0 1px 0 rgba(255,255,255,.7), 0 8px 18px -6px rgba(120,40,52,.28) !important; } .cb1 span { color: #4a1f27; } .cb1 .seal { right: 40px; top: 50%; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center; font: 700 15px "Noto Serif KR", serif; color: #fff4ef; background: #c0393b; border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(255,240,235,.5); opacity: 0; transform: scale(1.8) rotate(-8deg); } .cb1.hit .seal { animation: seal .26s cubic-bezier(.2,.9,.3,1.2) forwards; } @keyframes seal { to { opacity: .92; transform: scale(1) rotate(-8deg); } } /* 2 · 댕기 — 장미 비단 띠, 양 끝 제비꼬리, 위아래 금박 줄. 처음 뜰 때 한 번만 비단 결이 스친다 */ .cb2 { filter: drop-shadow(0 7px 10px rgba(150,40,75,.28)); } .cb2::before, .cb2::after { content: ""; position: absolute; inset: 0; z-index: 0; clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); } .cb2::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='7'%3E%3Cpath d='M0 3.5 H16' stroke='%23d9b46a' stroke-width='.6'/%3E%3Cpath d='M8 1 L10.5 3.5 L8 6 L5.5 3.5 Z' fill='none' stroke='%23d9b46a' stroke-width='.75'/%3E%3Ccircle cx='0' cy='3.5' r='.9' fill='%23d9b46a'/%3E%3Ccircle cx='16' cy='3.5' r='.9' fill='%23d9b46a'/%3E%3C/svg%3E") 0 6px / 16px 7px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='7'%3E%3Cpath d='M0 3.5 H16' stroke='%23d9b46a' stroke-width='.6'/%3E%3Cpath d='M8 1 L10.5 3.5 L8 6 L5.5 3.5 Z' fill='none' stroke='%23d9b46a' stroke-width='.75'/%3E%3Ccircle cx='0' cy='3.5' r='.9' fill='%23d9b46a'/%3E%3Ccircle cx='16' cy='3.5' r='.9' fill='%23d9b46a'/%3E%3C/svg%3E") 0 calc(100% - 6px) / 16px 7px repeat-x, linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 62%, rgba(80,10,40,.16) 100%), linear-gradient(90deg, #b8436a, #cf5a7e 50%, #b8436a); } .cb2::after { background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.38) 48%, transparent 66%) -160% 0 / 60% 100% no-repeat; } .cb2.in::after { animation: silk 1.4s ease .5s 1 both; } @keyframes silk { to { background-position: 260% 0; } } .cb2 span { color: #fff7f2; text-shadow: 0 1px 2px rgba(90,20,45,.35); } .cb2.hit { filter: drop-shadow(0 3px 6px rgba(150,40,75,.3)) brightness(1.06); } /* 3 · 물결 — 꽃잎 파문 물 위의 맑은 판, 꽃잎 하나. 누르면 버튼에서 파문이 퍼진다 */ .cb3 { border-radius: 3px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/svg%3E") calc(50% - 62px) 50% / 15px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/svg%3E") calc(50% + 62px) 50% / 15px no-repeat, linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,243,247,.68)) !important; -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(191,74,111,.38), inset 0 1px 0 #fff, inset 0 -10px 18px -12px rgba(191,74,111,.25), 0 10px 22px -10px rgba(191,74,111,.45) !important; } .cb3 span { color: #b0405f; } .cb3 .ring { left: 50%; top: 50%; width: 100%; height: 100%; translate: -50% -50%; border-radius: 6px; border: 1.5px solid rgba(191,74,111,.45); opacity: 0; } .cb3.hit .ring { animation: ring .6s ease-out forwards; } .cb3.hit .ring.r2 { animation-delay: .12s; } @keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35, 1.9); border-radius: 40px; } } /* 4 · 천희 별 — 자두빛 판 + 안쪽 금선 + 작은 별(천희성). 처음 뜰 때 별이 한 번 반짝, 누르면 한 번 더 */ .cb4 { border-radius: 2px !important; background: radial-gradient(120% 160% at 50% 0%, #5b2a3a 0%, #46202d 60%, #3a1925 100%) !important; box-shadow: inset 0 0 0 4px #46202d, inset 0 0 0 4.8px rgba(217,180,106,.75), 0 10px 22px -10px rgba(58,25,37,.6) !important; } .cb4 span { color: #fbeef0; } .cb4 .star { left: calc(50% - 62px); top: 50%; width: 14px; height: 14px; margin-top: -7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0.8 C10.9 7 13 9.1 19.2 10 C13 10.9 10.9 13 10 19.2 C9.1 13 7 10.9 0.8 10 C7 9.1 9.1 7 10 0.8 Z' fill='%23d9b46a'/%3E%3Ccircle cx='10' cy='10' r='1.3' fill='%23fff7e4'/%3E%3C/svg%3E") center / contain no-repeat; } .cb4 .star.r { left: auto; right: calc(50% - 62px); } .cb4.in .star { animation: twinkle .9s ease .9s 1 both; } .cb4.hit .star { animation: twinkle .35s ease 1 both; } @keyframes twinkle { 0% { transform: scale(1) rotate(0); } 45% { transform: scale(1.6) rotate(45deg); filter: brightness(1.3); } 100% { transform: scale(1) rotate(90deg); } } /* .rv.in 의 filter(흐림 풀기)가 댕기 그림자를 덮지 않게 */ .okbtn.cb2.rv.in { filter: drop-shadow(0 7px 10px rgba(150,40,75,.28)); } .okbtn.cb2.rv.in.hit { filter: drop-shadow(0 3px 6px rgba(150,40,75,.3)) brightness(1.06); } @media (prefers-reduced-motion: reduce) { .okbtn.cb *, .okbtn.cb::after { animation: none !important; } } /* 2장 '소희' 이름 — 파스텔 분홍 (주익님 10/28) */ .c2 .nm { color: #e891ad; } /* ── 2장 「좋아」 3번(물결) 변형 6안 (10/28) — 꽃잎 대신 다른 특징. 모두 누르면 파문 ── */ /* 3-1 · 맑은 판만 — 장식 없이 선 하나와 빛 */ .cb3.cb3a { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,243,247,.7)) !important; } /* 3-2 · 가는 밑줄 — 글자 아래 짧은 장미 선, 누르면 길어진다 */ .cb3.cb3b { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,243,247,.7)) !important; } .cb3b span::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 16px; height: 1.5px; border-radius: 1px; background: #bf4a6f; translate: calc(-50% + .17em) 0; transition: width .25s ease; } .cb3b.hit span::after { width: 46px; } /* 3-3 · 물방울 — 오른쪽 위에 작은 물방울과 그 둘레 고리 하나 */ .cb3.cb3c { background: radial-gradient(circle at calc(100% - 17px) 15px, rgba(191,74,111,.6) 0 2.4px, transparent 3px), radial-gradient(circle at calc(100% - 17px) 15px, transparent 0 6.2px, rgba(191,74,111,.24) 6.6px 7.3px, transparent 7.8px), linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,243,247,.7)) !important; } /* 3-4 · 이중 선 — 바깥 선 안쪽에 아주 옅은 둘째 선 (파문 두 겹) */ .cb3.cb3d { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,243,247,.7)) !important; outline: 1px solid rgba(191,74,111,.22); outline-offset: -5px; } /* 3-5 · 화살표 — 글자 뒤 가는 화살표, 누르면 앞으로 살짝 */ .cb3.cb3e { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,243,247,.7)) !important; } .cb3e span::after { content: ""; display: inline-block; width: 18px; height: 10px; margin-left: 6px; vertical-align: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none' stroke='%23bf4a6f' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5 H16'/%3E%3Cpath d='M12 1.2 L16 5 L12 8.8'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .22s ease; } .cb3e.hit span::after { transform: translateX(5px); } /* 3-6 · 파문 무늬 — 양 끝에서 번지는 아주 옅은 동심원 */ .cb3.cb3f { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60' fill='none' stroke='%23bf4a6f'%3E%3Ccircle cx='90' cy='30' r='14' stroke-opacity='.22' stroke-width='1'/%3E%3Ccircle cx='90' cy='30' r='26' stroke-opacity='.15' stroke-width='1'/%3E%3Ccircle cx='90' cy='30' r='38' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E") right center / 90px 60px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60' fill='none' stroke='%23bf4a6f'%3E%3Ccircle cx='0' cy='30' r='14' stroke-opacity='.22' stroke-width='1'/%3E%3Ccircle cx='0' cy='30' r='26' stroke-opacity='.15' stroke-width='1'/%3E%3Ccircle cx='0' cy='30' r='38' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E") left center / 90px 60px no-repeat, linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,243,247,.7)) !important; } /* ── 2장 「좋아」 꽃잎 물결 8안 (10/28) — 3번(양옆 꽃잎)을 바탕으로, 몸통은 모두 불투명. 누르면 파문 ── */ .cb3.op { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .cb3.op span { color: #b0405f; } /* 3-A · 기본 — 흰 판(불투명) + 장미 선 + 양옆 꽃잎 */ .cb3.cb3g { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% - 62px) 50% / 15px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% + 62px) 50% / 15px no-repeat, linear-gradient(180deg, #ffffff 0%, #fff6f8 55%, #fbe7ed 100%) !important; box-shadow: inset 0 0 0 1px rgba(191,74,111,.38), inset 0 1px 0 #fff, 0 10px 22px -10px rgba(191,74,111,.45) !important; } /* 3-B · 꽃잎이 모서리에 걸침 — 판 밖으로 살짝 나온 꽃잎 두 장(왼쪽 위·오른쪽 아래) */ .cb3.cb3h { background: linear-gradient(180deg, #ffffff 0%, #fff6f8 55%, #fbe7ed 100%) !important; box-shadow: inset 0 0 0 1px rgba(191,74,111,.38), inset 0 1px 0 #fff, 0 10px 22px -10px rgba(191,74,111,.45) !important; } .cb3h::before, .cb3h::after { content: ""; position: absolute; z-index: 3; width: 20px; height: 20px; pointer-events: none; } .cb3h::before { left: -7px; top: -8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(-28 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } .cb3h::after { right: -7px; bottom: -8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(28 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } /* 3-C · 둥근 연분홍 — 모서리 10px, 연분홍 바탕, 작은 꽃잎 */ .cb3.cb3i { border-radius: 10px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% - 58px) 50% / 13px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% + 58px) 50% / 13px no-repeat, linear-gradient(180deg, #fff1f5, #fde2ea) !important; box-shadow: inset 0 0 0 1px rgba(191,74,111,.28), inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px -10px rgba(191,74,111,.45) !important; } /* 3-D · 이중 선 — 바깥 선 안쪽에 옅은 둘째 선, 그 안에 꽃잎 */ .cb3.cb3j { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% - 60px) 50% / 14px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% + 60px) 50% / 14px no-repeat, linear-gradient(180deg, #ffffff 0%, #fff6f8 55%, #fbe7ed 100%) !important; box-shadow: inset 0 0 0 1px rgba(191,74,111,.4), inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(191,74,111,.2), 0 10px 22px -10px rgba(191,74,111,.45) !important; } /* 3-E · 위아래 띠 — 옆 선 없이 위아래만 장미 선, 아이보리 바탕 */ .cb3.cb3k { border-radius: 0 !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% - 62px) 50% / 15px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% + 62px) 50% / 15px no-repeat, linear-gradient(180deg, #fffaf7, #fbefe9) !important; box-shadow: inset 0 1.5px 0 #c9587a, inset 0 -1.5px 0 #c9587a, 0 10px 22px -10px rgba(191,74,111,.45) !important; } /* 3-F · 떨어지는 꽃잎 — 양옆 꽃잎이 서로 반대로 기울어 떨어지는 모양 */ .cb3.cb3l { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(-28 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% - 62px) 45% / 16px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(28 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% + 62px) 55% / 16px no-repeat, linear-gradient(180deg, #ffffff 0%, #fff6f8 55%, #fbe7ed 100%) !important; box-shadow: inset 0 0 0 1px rgba(191,74,111,.38), inset 0 1px 0 #fff, 0 10px 22px -10px rgba(191,74,111,.45) !important; } /* 3-G · 떠 있는 판 — 선 없이 그림자로만 띄움, 가장 부드러움 */ .cb3.cb3m { border-radius: 6px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% - 62px) 50% / 15px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4f7'/%3E%3Cstop offset='1' stop-color='%23ee9fb6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23d77894' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23d77894' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% + 62px) 50% / 15px no-repeat, linear-gradient(180deg, #ffffff, #fff5f8) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(191,74,111,.18), 0 16px 30px -12px rgba(191,74,111,.55) !important; } /* 3-H · 장미 판 — 바탕을 장미색으로 채우고 흰 글자·흰 꽃잎 */ .cb3.cb3n { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23ffe3ec'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23ffffff' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23ffffff' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% - 62px) 50% / 15px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23ffe3ec'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='url(%23g)' stroke='%23ffffff' stroke-width='.5'/%3E%3Cpath d='M8 13 C7.6 9 7.8 6 8 4.2' stroke='%23ffffff' stroke-width='.4' fill='none' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") calc(50% + 62px) 50% / 15px no-repeat, linear-gradient(180deg, #d9688c 0%, #c4507a 60%, #b5446d 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 6px rgba(120,20,60,.2), 0 12px 24px -10px rgba(170,50,95,.6) !important; } .cb3.cb3n span { color: #fff; text-shadow: 0 1px 2px rgba(100,20,50,.3); } .cb3n .ring { border-color: rgba(191,74,111,.55) !important; } /* ── 2장 「좋아」 장미 판(3-H) 변형 8안 (10/28) — 몸통 불투명, 흰 글자. 누르면 파문 + 빛이 한 번 더 ── */ .cb3.op.rose span { color: #fff; text-shadow: 0 1px 2px rgba(100,20,50,.3); } .cb3.op.rose .ring { border-color: rgba(191,74,111,.55) !important; } .cb3.op.rose.hit { filter: brightness(1.08); } /* H-1 · 가로 그라데이션 — 장미에서 산호빛 분홍으로 */ .cb3.cb3o { background: linear-gradient(90deg, #c2477a 0%, #db6a8c 55%, #ee8f9a 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -10px rgba(200,70,110,.6) !important; } /* H-2 · 글로우 — 장미 판 둘레로 분홍 빛이 번짐 */ .cb3.cb3p { background: linear-gradient(180deg, #d9688c 0%, #c4507a 60%, #b5446d 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(255,180,205,.35), 0 0 18px 2px rgba(236,120,160,.55), 0 0 40px 6px rgba(236,120,160,.25) !important; } /* H-3 · 광택 — 위쪽 절반에 유리 같은 윤기, 모서리 둥글게 */ .cb3.cb3q { border-radius: 10px !important; background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 50%), linear-gradient(180deg, #d9688c 0%, #c4507a 60%, #b5446d 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 6px rgba(120,20,60,.22), 0 12px 24px -10px rgba(170,50,95,.6) !important; } /* H-4 · 흰 안쪽 선 — 장미 판 안쪽에 가는 흰 테 (부적 이중 테두리 느낌) */ .cb3.cb3r { background: linear-gradient(180deg, #d9688c 0%, #c4507a 60%, #b5446d 100%) !important; box-shadow: inset 0 0 0 4px #c9537c, inset 0 0 0 5px rgba(255,255,255,.55), 0 12px 24px -10px rgba(170,50,95,.6) !important; } /* H-5 · 모서리 꽃잎 하나 — 오른쪽 위에 흰 꽃잎이 걸쳐 앉음 */ .cb3.cb3s { background: linear-gradient(135deg, #de7193 0%, #c4507a 55%, #b0416a 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -10px rgba(170,50,95,.6) !important; } .cb3s::after { content: ""; position: absolute; z-index: 3; right: -8px; top: -9px; width: 22px; height: 22px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='rotate(28 8 8)'%3E%3Cpath d='M8 15 C2.5 11 2 5.5 4.6 2.6 C6 1.1 7.4 2.2 8 3.6 C8.6 2.2 10 1.1 11.4 2.6 C14 5.5 13.5 11 8 15 Z' fill='%23fff' fill-opacity='.95' stroke='%23f6c6d5' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(150,40,80,.3)); } /* H-6 · 노을 — 연분홍·장미·자두 세 빛 대각선, 아래로 은은한 빛 */ .cb3.cb3t { background: linear-gradient(120deg, #f0a0b8 0%, #d55f86 45%, #9e3a63 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 26px -12px rgba(158,58,99,.7), 0 4px 16px -4px rgba(240,160,184,.6) !important; } /* H-7 · 파문 무늬 — 양 끝에서 흰 동심원이 옅게 번짐 */ .cb3.cb3u { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60' fill='none' stroke='%23fff'%3E%3Ccircle cx='90' cy='30' r='14' stroke-opacity='.28'/%3E%3Ccircle cx='90' cy='30' r='26' stroke-opacity='.18'/%3E%3Ccircle cx='90' cy='30' r='38' stroke-opacity='.1'/%3E%3C/svg%3E") right center / 90px 60px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60' fill='none' stroke='%23fff'%3E%3Ccircle cx='0' cy='30' r='14' stroke-opacity='.28'/%3E%3Ccircle cx='0' cy='30' r='26' stroke-opacity='.18'/%3E%3Ccircle cx='0' cy='30' r='38' stroke-opacity='.1'/%3E%3C/svg%3E") left center / 90px 60px no-repeat, linear-gradient(180deg, #d9688c 0%, #c4507a 60%, #b5446d 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -10px rgba(170,50,95,.6) !important; } /* H-8 · 빛 스침 + 글로우 — 처음 뜰 때 한 번 빛이 지나가고, 아래로 부드러운 빛 */ .cb3.cb3v { background: linear-gradient(180deg, #e0739a 0%, #c8527d 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -8px rgba(230,110,150,.65) !important; } .cb3v::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%) -160% 0 / 60% 100% no-repeat; } .cb3v.in::before { animation: silk 1.3s ease .6s 1 both; } .cb3v.hit::before { animation: silk .5s ease 1 both; } @media (prefers-reduced-motion: reduce) { .cb3v::before { animation: none !important; } } /* 「좋아」 등장을 부드럽게 (주익님 10/28 "너무 갑작스럽게 뜬다"): 글보다 조금 늦게, 아래에서 살짝 떠오르며 1.6초에 걸쳐 */ .c2 .okbtn.rv { translate: 0 16px; scale: .96; filter: blur(4px); transition: opacity 1.6s ease, filter 1.6s ease, translate 1.6s cubic-bezier(.2,.7,.2,1), scale 1.6s cubic-bezier(.2,.7,.2,1), transform .14s ease; } .c2 .okbtn.rv.in { translate: 0 0; scale: 1; filter: none; } .c2 .okbtn.rose.rv.in.hit { filter: brightness(1.08); }