/* 색·배경·움직임 (디자인 초안). 모든 페이지 바로 앞에서 불러 기존 색 변수만 덮어요. 페이지별 톤은 theme.js가 붙이는 html[data-page]로 고르고, 움직임은 CSS만 써서 동작 줄이기 설정이면 멈춰요. */ :root{ --t1:#3b3f9e; --t2:#6a4c9c; --t3:#2d7d86; /* 남색 · 보라 · 청록: 기본 톤 */ --bg:#f4f4f9; --bg-alt:rgba(255,255,255,.55); --panel:rgba(255,255,255,.82); --panel-2:rgba(250,250,253,.9); --tile:rgba(255,255,255,.82); --tile-2:#fafafd; --text:#17182b; --text-2:#5d5f73; --line:#d4d4e2; --line-soft:rgba(40,40,90,.09); --accent:#3e3fa8; --accent-hover:#33348f; --link:#3e3fa8; --nav:rgba(246,246,251,.72); --ring-track:#e4e4ef; --r-ok:#3e3fa8; --inv-bg:linear-gradient(150deg,#141634 0%,#211a3f 55%,#0f2a33 100%); --inv-tile:rgba(255,255,255,.06); --inv-link:#9fa6ff; --inv-line:rgba(255,255,255,.16); --inv-text-2:#aeb0c6; --feat-bg:linear-gradient(160deg,#17193a 0%,#2a1d4a 60%,#123039 100%); --feat-text-2:#b3b5cb; --feat-line:rgba(255,255,255,.16); --g-head:linear-gradient(100deg,#20226b 0%,#4b3a8c 45%,#22707a 100%); --g-num:linear-gradient(100deg,var(--t1),var(--t3)); --g-btn:linear-gradient(120deg,#30318d 0%,#4d3c94 55%,#2a6b7a 100%); --orb-a:.20; --orb-b:.16; } html[data-page="checkout"],html[data-page="order"],html[data-page="success"],html[data-page="fail"]{ --t1:#5a3f98; --t2:#8a4a7c; --t3:#3b3f9e; --g-head:linear-gradient(100deg,#2c1f66 0%,#6a3f86 55%,#353b93 100%); } html[data-page="dashboard"],html[data-page="my"],html[data-page="docs"]{ --t1:#2b3f86; --t2:#2a7d82; --t3:#5a4c94; --g-head:linear-gradient(100deg,#1c2a66 0%,#24617a 55%,#4a3f88 100%); } html[data-page="login"],html[data-page="scan"],html[data-page="measure"],html[data-page="leads"]{ --t1:#2a7d82; --t2:#3d4aa0; --t3:#5d4a92; --g-head:linear-gradient(100deg,#174d5a 0%,#2f3d8c 60%,#4f3b86 100%); } html[data-page="admin"],html[data-page="admin-dash"]{ --t1:#3a4568; --t2:#3e3fa8; --t3:#2d6f7a; --orb-a:.12; --orb-b:.10; } html[data-page="terms"],html[data-page="privacy"],html[data-page="refund"]{ --orb-a:.10; --orb-b:.08; } :root[data-theme="dark"]{ --bg:#0b0c1a; --bg-alt:rgba(255,255,255,.03); --panel:rgba(24,25,44,.78); --panel-2:rgba(32,33,56,.8); --tile:rgba(24,25,44,.78); --tile-2:rgba(34,35,60,.85); --text:#ecebf6; --text-2:#a3a4bd; --line:#34365a; --line-soft:rgba(190,190,255,.10); --accent:#6d6fe0; --accent-hover:#7f81ea; --link:#a4a8ff; --r-ok:#8c8ff2; --ring-track:#25264a; --nav:rgba(12,13,28,.72); --inv-bg:linear-gradient(150deg,#15173a 0%,#24184a 55%,#0e2e38 100%); --inv-tile:rgba(255,255,255,.05); --feat-bg:linear-gradient(160deg,#ece9fb 0%,#e3e7f8 60%,#ddf0f0 100%); --feat-text:#17182b; --feat-text-2:#55576d; --feat-line:#cfd0e2; --g-head:linear-gradient(100deg,#c9cbff 0%,#d7b8ff 45%,#8fe0de 100%); --g-btn:linear-gradient(120deg,#4446b8 0%,#6447b0 55%,#2c7f8c 100%); --orb-a:.30; --orb-b:.24; } :root[data-theme="dark"][data-page="checkout"],:root[data-theme="dark"][data-page="order"]{ --g-head:linear-gradient(100deg,#d9c7ff 0%,#f0b9de 55%,#b9bdff 100%); } :root[data-theme="dark"][data-page="dashboard"],:root[data-theme="dark"][data-page="my"],:root[data-theme="dark"][data-page="docs"]{ --g-head:linear-gradient(100deg,#b9c6ff 0%,#93dcdc 55%,#cdbcff 100%); } :root[data-theme="dark"][data-page="login"],:root[data-theme="dark"][data-page="scan"],:root[data-theme="dark"][data-page="measure"]{ --g-head:linear-gradient(100deg,#93e0dc 0%,#b6bdff 60%,#d6c2ff 100%); } /* 배경: 페이지 톤 세 가지 색이 은은하게 섞인 그라데이션 + 천천히 떠다니는 큰 원 두 개와 가는 고리 하나 */ body{ background: radial-gradient(1200px 700px at 8% -10%, color-mix(in srgb,var(--t1) 16%,transparent), transparent 70%), radial-gradient(900px 700px at 100% 30%, color-mix(in srgb,var(--t2) 12%,transparent), transparent 70%), radial-gradient(1000px 800px at 30% 110%, color-mix(in srgb,var(--t3) 12%,transparent), transparent 70%), var(--bg); background-attachment:fixed; } body::before,body::after{ content:""; position:fixed; z-index:-1; pointer-events:none; border-radius:50%; } body::before{ width:46vmax; height:46vmax; left:-12vmax; top:-14vmax; background:radial-gradient(circle at 35% 35%, color-mix(in srgb,var(--t2) 100%,transparent), transparent 62%); opacity:var(--orb-a); filter:blur(40px); animation:gt-drift-a 38s ease-in-out infinite alternate; } body::after{ width:30vmax; height:30vmax; right:-8vmax; bottom:-10vmax; border:1px solid color-mix(in srgb,var(--t3) 55%,transparent); background:radial-gradient(circle, color-mix(in srgb,var(--t3) 100%,transparent), transparent 66%); opacity:var(--orb-b); animation:gt-drift-b 46s ease-in-out infinite alternate; } @keyframes gt-drift-a{ to{ transform:translate(14vmax,10vmax) scale(1.12); } } @keyframes gt-drift-b{ to{ transform:translate(-12vmax,-8vmax) rotate(40deg) scale(.92); } } /* 메인은 섹션 바탕이 원래 단색이라 투명하게 열어 배경이 보이게 */ .nav{ background:var(--nav); } .top{ background:var(--nav) !important; } .sec.alt{ background:var(--bg-alt); } .sec.inv{ background:var(--inv-bg); } .svc-tile,.offer,.score,.cats,.prob,.aiq,.lock,.ind,.opt,.card,.vz-tile,.vz-pri > li,.vz-week li,.vz-riv div,.vz-cnt div{ border:1px solid var(--line-soft); } .demo,.app{ background:var(--bg-alt); border:1px solid var(--line-soft); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .card,.svc-tile,.offer{ backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .svc-tile.feat{ background:var(--feat-bg); border-color:transparent; } .vs-q{ background:var(--g-btn); } .feat .svc-list svg,.feat .more,.feat .tile-links .more{ color:#a4a8ff; } :root[data-theme="dark"] .feat .svc-list svg,:root[data-theme="dark"] .feat .more,:root[data-theme="dark"] .feat .tile-links .more{ color:#3e3fa8; } /* 버튼·강조 막대: 단색 파랑 대신 남색→보라→청록 */ .btn:not(.line):not(.danger):not(.soft):not(.ghost),.nav-cta,.q-bubble,.offer-tag,.vz-pri > li:first-child .vz-rk,.vz-road li:first-child .vz-node{ background:var(--g-btn); background-size:140% 100%; background-position:0 0; transition:background-position .4s ease, transform .12s ease, box-shadow .2s; } .btn:not(.line):not(.danger):not(.soft):not(.ghost){ box-shadow:0 10px 24px -12px color-mix(in srgb,var(--t1) 80%,transparent); } .btn:not(.line):not(.danger):not(.soft):not(.ghost):hover,.nav-cta:hover{ background:var(--g-btn); background-size:140% 100%; background-position:100% 0; } .btn.soft{ background:color-mix(in srgb,var(--accent) 10%,transparent); } .btn.soft:hover{ background:color-mix(in srgb,var(--accent) 17%,transparent); } .btn.ghost{ color:var(--inv-link); box-shadow:inset 0 0 0 1px var(--inv-line); } .cat-bar i,.qbar i,.jbb i,.vz-bar i,.stage.done i,.stage.cur i{ background:linear-gradient(90deg,var(--t1),var(--t2),var(--t3)); } .field input:focus,.field textarea:focus{ box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); } /* 제목·큰 숫자: 그라데이션 글자. 본문은 가독성 위해 단색 유지 */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .h-xl,.h-l,h1.t,.hero h1,.app-h,.res-head h2,.svc-price,.offer-p,.ring-num b,.vz-v b,.vz-cnt b,.svc-tag .hl,h1:not([class]){ background-image:var(--g-head); background-size:150% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:gt-sheen 14s ease-in-out infinite alternate; } .h-m,.blk-h,.card h2,.pr h3,.svc-tile h3{ background-image:linear-gradient(100deg,var(--text) 0%,var(--text) 40%,color-mix(in srgb,var(--t2) 70%,var(--text)) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .vz-v b,.vz-cnt b,.ring-num b,.svc-price,.offer-p{ background-image:var(--g-num); animation:none; } :root[data-theme="dark"] .vz-v b,:root[data-theme="dark"] .vz-cnt b,:root[data-theme="dark"] .ring-num b,:root[data-theme="dark"] .svc-price,:root[data-theme="dark"] .offer-p{ background-image:linear-gradient(100deg,#c3c6ff,#93dcdc); } .inv .h-l,.inv .h-xl,.inv .h-m{ background-image:linear-gradient(100deg,#e7e6ff 0%,#cdb8ff 50%,#9fe3df 100%); } .feat .svc-tag .hl,.feat .svc-price{ background-image:linear-gradient(100deg,#c9cbff,#9fe3df); } :root[data-theme="dark"] .feat .svc-tag .hl,:root[data-theme="dark"] .feat .svc-price{ background-image:linear-gradient(100deg,#30318d,#2a6b7a); } .vz-cnt .up b,.vz-cnt .down b{ background:none; -webkit-text-fill-color:currentColor; } .svc-price s,.offer-p s{ -webkit-text-fill-color:var(--text-2); } .feat .svc-price s{ -webkit-text-fill-color:var(--feat-text-2); } } @keyframes gt-sheen{ to{ background-position:100% 0; } } /* 카드가 화면에 들어올 때 살짝 떠오르기 (지원 브라우저만, 스크롤에 맞춰 CSS로) */ @supports (animation-timeline:view()){ .svc-tile,.offer,.vs-tile,.pr > div,.prob,.card,.vz-pri > li{ animation:gt-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 40%; } } @keyframes gt-rise{ from{ opacity:.0; transform:translateY(22px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ body::before,body::after,.h-xl,.h-l,h1.t,.hero h1,.app-h,.res-head h2,h1:not([class]),.svc-tile,.offer,.vs-tile,.pr > div,.prob,.card,.vz-pri > li{ animation:none !important; } } @media print{ body::before,body::after{ display:none; } body{ background:#fff; } } .svc-tile.feat h3{ background-image:none; -webkit-text-fill-color:var(--feat-text); color:var(--feat-text); } /* ── 강조: 제목은 단색, 핵심 구절(em.em)만 그라데이션. 본문 핵심 문장은 형광펜처럼 아래쪽 색띠 ── */ .h-xl:has(.em),.h-l:has(.em){ background:none; color:var(--text); -webkit-text-fill-color:currentColor; animation:none; } .inv .h-xl:has(.em),.inv .h-l:has(.em){ color:var(--inv-text); } em.em{ font-style:normal; background-image:var(--g-head); background-size:150% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:gt-sheen 14s ease-in-out infinite alternate; } .inv em.em{ background-image:linear-gradient(100deg,#c9c3ff 0%,#e0b8ff 45%,#8fe6df 100%); } mark.mk-hl{ background:linear-gradient(transparent 62%, color-mix(in srgb,var(--t2) 22%,transparent) 62%); color:var(--text); font-weight:600; padding:0 2px; border-radius:2px; } .inv mark.mk-hl{ background:linear-gradient(transparent 62%, rgba(160,140,255,.32) 62%); color:var(--inv-text); } .qa-a strong{ color:var(--accent); } :root[data-theme="dark"] .qa-a strong{ color:var(--link); } /* ── 눈에 띄어야 할 오브젝트: 첫 버튼·우리 가게 없음 표시·추천 상품·점수 ── */ .hero .actions .btn:not(.soft),.nav-cta{ position:relative; } .hero .actions .btn:not(.soft){ min-height:54px; padding:0 30px; font-size:17.5px; box-shadow:0 14px 34px -12px color-mix(in srgb,var(--t2) 85%,transparent); } .hero .actions .btn:not(.soft)::after,.nav-cta::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; box-shadow:0 0 0 0 color-mix(in srgb,var(--t2) 45%,transparent); animation:gt-ping 3.2s ease-out infinite; pointer-events:none; } @keyframes gt-ping{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--t2) 40%,transparent); } 70%,100%{ box-shadow:0 0 0 12px transparent; } } .a-miss{ border:1.5px solid color-mix(in srgb,var(--miss) 70%,transparent); background:linear-gradient(120deg,color-mix(in srgb,var(--miss) 11%,transparent),color-mix(in srgb,var(--t2) 8%,transparent)); box-shadow:0 12px 30px -16px color-mix(in srgb,var(--miss) 70%,transparent); } .a-miss.on{ animation:gt-nudge 1.2s ease .2s 1 both; } @keyframes gt-nudge{ 0%{ transform:translateY(8px) scale(.98); } 60%{ transform:translateY(-2px) scale(1.01); } 100%{ transform:none; } } .a-miss a{ background:var(--g-btn); color:#fff; padding:0 16px; min-height:40px; border-radius:980px; text-decoration:none; } .vs-pick .out{ border-style:solid; background:rgba(255,80,80,.12); color:#ffb4ae; } .svc-tile.feat{ transform:translateY(-14px); box-shadow:0 30px 60px -28px color-mix(in srgb,var(--t1) 90%,transparent), 0 0 0 1px color-mix(in srgb,var(--t2) 50%,transparent); } @media (max-width:900px){ .svc-tile.feat{ transform:none; } } .svc-tile.feat .btn:not(.line):not(.danger):not(.soft):not(.ghost){ background:linear-gradient(120deg,#ffffff,#e6e2ff); color:#24256e; } :root[data-theme="dark"] .svc-tile.feat .btn:not(.line):not(.danger):not(.soft):not(.ghost){ background:var(--g-btn); color:#fff; } .offer-tag{ box-shadow:0 6px 16px -6px color-mix(in srgb,var(--t2) 90%,transparent); } .score{ box-shadow:0 24px 50px -30px color-mix(in srgb,var(--t1) 80%,transparent); } .vz-pri > li:first-child{ border-color:color-mix(in srgb,var(--t2) 45%,transparent); box-shadow:0 14px 30px -22px color-mix(in srgb,var(--t1) 90%,transparent); } @media (prefers-reduced-motion:reduce){ .hero .actions .btn::after,.nav-cta::after,em.em,.a-miss.on{ animation:none !important; } } :root[data-theme="dark"] mark.mk-hl{ background:linear-gradient(transparent 60%, rgba(150,130,255,.38) 60%); } /* ══ 초안 2: 더 밝은 같은 계열 색 · 강조 글자 윤곽선 · 떠다니는 오브젝트 네 개 ══ */ :root{ --t1:#5b5fd6; --t2:#9a6ce0; --t3:#3aa3ae; --bg:#f7f6ff; --bg-alt:rgba(255,255,255,.5); --text:#1b1c3a; --text-2:#5a5c78; --accent:#4f52d0; --accent-hover:#4245bd; --link:#4f52d0; --r-ok:#4f52d0; --inv-bg:linear-gradient(150deg,#3b3ea8 0%,#6a4cc0 52%,#2f8296 100%); --inv-tile:rgba(255,255,255,.10); --inv-line:rgba(255,255,255,.24); --inv-text-2:#dcdcf4; --inv-link:#e6e4ff; --feat-bg:linear-gradient(160deg,#4245b8 0%,#7351c6 55%,#2f8a9c 100%); --feat-text-2:#e1e0f6; --feat-line:rgba(255,255,255,.24); --g-head:linear-gradient(100deg,#3c40c4 0%,#8b52da 48%,#2a9fab 100%); --g-num:linear-gradient(100deg,#4f52d0,#2a9fab); --g-btn:linear-gradient(120deg,#4a4dcc 0%,#7a52d4 55%,#2f95a6 100%); --stroke:rgba(40,36,120,.35); } html[data-page="checkout"],html[data-page="order"],html[data-page="success"],html[data-page="fail"]{ --t1:#7a5ad8; --t2:#c16aa8; --t3:#5b5fd6; --g-head:linear-gradient(100deg,#5a3fc4 0%,#b4569a 55%,#4f52d0 100%); } html[data-page="dashboard"],html[data-page="my"],html[data-page="docs"]{ --t1:#4c66d0; --t2:#3aa3ae; --t3:#8a6ad8; --g-head:linear-gradient(100deg,#3c55c4 0%,#2a99a6 55%,#7a56d0 100%); } html[data-page="login"],html[data-page="scan"],html[data-page="measure"],html[data-page="leads"]{ --t1:#3aa3ae; --t2:#5b67d6; --t3:#9a6ce0; --g-head:linear-gradient(100deg,#1f8794 0%,#4a55cc 60%,#8550d0 100%); } :root[data-theme="dark"]{ --t1:#6d70f0; --t2:#a77cf0; --t3:#4cc0c8; --bg:#14163a; --bg-alt:rgba(255,255,255,.04); --panel:rgba(34,36,78,.72); --panel-2:rgba(44,46,92,.75); --tile:rgba(34,36,78,.72); --tile-2:rgba(48,50,98,.8); --text:#f1f0ff; --text-2:#b8b9da; --line:#40437a; --line-soft:rgba(200,200,255,.12); --accent:#7c7ff5; --link:#b4b7ff; --nav:rgba(20,22,58,.7); --inv-bg:linear-gradient(150deg,#2a2d86 0%,#4f3596 52%,#1f6a7c 100%); --g-head:linear-gradient(100deg,#c9cbff 0%,#e2b9ff 45%,#8eeee6 100%); --g-btn:linear-gradient(120deg,#5b5eea 0%,#8a5ee6 55%,#35a8b8 100%); --stroke:rgba(255,255,255,.28); } /* 강조 글자: 그라데이션 + 얇은 윤곽선 + 아주 옅은 그림자 */ em.em{ -webkit-text-stroke:1px var(--stroke); filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--t2) 22%,transparent)); } .inv em.em{ background-image:linear-gradient(100deg,#ffffff 0%,#f0d9ff 45%,#b8fff6 100%); -webkit-text-stroke:1px rgba(255,255,255,.55); } h1.t,h1:not([class]){ -webkit-text-stroke:.6px var(--stroke); } .inv mark.mk-hl{ background:linear-gradient(transparent 60%, rgba(255,255,255,.28) 60%); color:#fff; } /* 배경: 더 밝게, 같은 계열 다른 색(라벤더·하늘·민트)을 넓게 */ body{ background: radial-gradient(1100px 700px at 0% -5%, color-mix(in srgb,var(--t1) 22%,transparent), transparent 70%), radial-gradient(900px 700px at 100% 25%, color-mix(in srgb,var(--t2) 20%,transparent), transparent 70%), radial-gradient(1000px 800px at 25% 105%, color-mix(in srgb,var(--t3) 20%,transparent), transparent 70%), linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--t1) 6%,var(--bg))); background-attachment:fixed; } /* 떠다니는 오브젝트 네 개: 모양이 바뀌는 빛 덩어리 둘, 천천히 도는 고리, 작은 점 무리 */ html::before,html::after{ content:""; position:fixed; z-index:-1; pointer-events:none; } body::before{ width:38vmax; height:38vmax; left:-8vmax; top:-6vmax; border-radius:42% 58% 63% 37% / 45% 40% 60% 55%; filter:blur(36px); opacity:.42; background:linear-gradient(135deg,var(--t1),var(--t2)); animation:gt-float-a 26s ease-in-out infinite alternate, gt-morph 18s ease-in-out infinite alternate; } body::after{ width:30vmax; height:30vmax; right:-6vmax; bottom:-6vmax; left:auto; top:auto; border:0; border-radius:58% 42% 38% 62% / 52% 60% 40% 48%; filter:blur(34px); opacity:.38; background:linear-gradient(135deg,var(--t3),var(--t1)); animation:gt-float-b 30s ease-in-out infinite alternate, gt-morph 22s ease-in-out infinite alternate-reverse; } html::before{ width:22vmax; height:22vmax; right:8vw; top:14vh; border-radius:50%; opacity:.55; border:1.5px solid color-mix(in srgb,var(--t2) 60%,transparent); box-shadow:inset 0 0 0 10px color-mix(in srgb,var(--t2) 6%,transparent); animation:gt-orbit 40s linear infinite; } html::after{ width:180px; height:180px; left:12vw; bottom:12vh; opacity:.5; background:radial-gradient(circle,color-mix(in srgb,var(--t1) 70%,transparent) 2px,transparent 2.5px) 0 0/22px 22px; -webkit-mask:radial-gradient(circle,#000 40%,transparent 70%); mask:radial-gradient(circle,#000 40%,transparent 70%); animation:gt-bob 12s ease-in-out infinite alternate; } :root[data-theme="dark"] body::before{ opacity:.38; } :root[data-theme="dark"] body::after{ opacity:.32; } @keyframes gt-float-a{ 0%{ transform:translate(0,0) rotate(0); } 50%{ transform:translate(10vmax,6vmax) rotate(25deg); } 100%{ transform:translate(4vmax,14vmax) rotate(-10deg); } } @keyframes gt-float-b{ 0%{ transform:translate(0,0); } 50%{ transform:translate(-9vmax,-5vmax); } 100%{ transform:translate(-3vmax,-12vmax); } } @keyframes gt-morph{ 0%{ border-radius:42% 58% 63% 37% / 45% 40% 60% 55%; } 50%{ border-radius:60% 40% 35% 65% / 55% 62% 38% 45%; } 100%{ border-radius:38% 62% 55% 45% / 40% 48% 52% 60%; } } @keyframes gt-orbit{ 0%{ transform:translate(0,0) rotate(0) scale(1); } 50%{ transform:translate(-4vw,6vh) rotate(180deg) scale(1.08); } 100%{ transform:translate(0,0) rotate(360deg) scale(1); } } @keyframes gt-bob{ to{ transform:translate(3vw,-6vh) rotate(20deg); } } @media (max-width:640px){ html::before{ width:40vmax; height:40vmax; right:-12vw; } html::after{ width:120px; height:120px; } } @media (prefers-reduced-motion:reduce){ html::before,html::after{ animation:none !important; } } @media print{ html::before,html::after{ display:none; } } /* ══ 초안 3: 점 무리 삭제 · 어두운 화면 배경을 검정 → 미드나잇 보라로 (글자는 초안 2 그대로) ══ */ html::after{ content:none; } :root[data-theme="dark"]{ --bg:#05040c; --bg-alt:rgba(120,90,220,.05); --panel:rgba(26,20,52,.72); --panel-2:rgba(36,28,70,.75); --tile:rgba(26,20,52,.72); --tile-2:rgba(40,31,78,.8); --line:#3a2f66; --line-soft:rgba(190,170,255,.12); --nav:rgba(8,6,18,.72); --inv-bg:linear-gradient(160deg,#0a0716 0%,#1d1240 55%,#2a1658 100%); } :root[data-theme="dark"] body{ background: radial-gradient(1100px 700px at 100% 0%, rgba(92,56,180,.30), transparent 70%), radial-gradient(900px 700px at 0% 60%, rgba(60,36,130,.26), transparent 70%), linear-gradient(180deg,#000 0%,#0b0718 35%,#1a1038 75%,#24144a 100%); background-attachment:fixed; } :root[data-theme="dark"] body::before{ background:linear-gradient(135deg,#3b2a8c,#6a3fb8); opacity:.35; } :root[data-theme="dark"] body::after{ background:linear-gradient(135deg,#2a1e6a,#5a3aa8); opacity:.30; } :root[data-theme="dark"] html::before{ border-color:rgba(170,140,255,.35); } :root[data-theme="dark"] .sec.alt{ background:transparent; } /* ══ 초안 4: 반짝임 걷어내기 · 모던하고 묵직하게 · 배경은 떠다니는 기하학 입자 ══ */ /* 빛 덩어리·고리·점 무리 대신, 가는 선으로 그린 삼각형·사각형·원·마름모·짧은 선이 세 겹으로 서로 다른 속도로 천천히 흘러감 */ :root{ --pt-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600' fill='none' stroke='rgba%2852%2C52%2C120%2C.13%29' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpolygon points='60%2C40 78%2C72 42%2C72'/%3E%3Crect x='300' y='120' width='16' height='16' transform='rotate%2820 308 128%29'/%3E%3Ccircle cx='470' cy='300' r='9'/%3E%3Cline x1='150' y1='420' x2='178' y2='404'/%3E%3Cpolygon points='520%2C520 534%2C534 520%2C548 506%2C534'/%3E%3Ccircle cx='220' cy='230' r='2.5' fill='rgba%2852%2C52%2C120%2C.13%29'/%3E%3C/svg%3E"); --pt-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='780' height='780' viewBox='0 0 780 780' fill='none' stroke='rgba%2852%2C52%2C120%2C.13%29' stroke-width='1.2' stroke-linejoin='round'%3E%3Ccircle cx='120' cy='560' r='14'/%3E%3Cpolygon points='600%2C90 622%2C128 578%2C128'/%3E%3Crect x='380' y='420' width='22' height='22' transform='rotate%28-15 391 431%29'/%3E%3Cline x1='60' y1='240' x2='96' y2='240'/%3E%3Cpolygon points='700%2C640 712%2C652 700%2C664 688%2C652'/%3E%3Ccircle cx='520' cy='260' r='3' fill='rgba%2852%2C52%2C120%2C.13%29'/%3E%3C/svg%3E"); --pt-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000' viewBox='0 0 1000 1000' fill='none' stroke='rgba%2852%2C52%2C120%2C.13%29' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpolygon points='200%2C700 230%2C752 170%2C752'/%3E%3Ccircle cx='780' cy='200' r='20'/%3E%3Crect x='520' y='820' width='30' height='30' transform='rotate%2835 535 835%29'/%3E%3Cline x1='860' y1='560' x2='900' y2='536'/%3E%3C/svg%3E"); } :root[data-theme="dark"]{ --pt-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600' fill='none' stroke='rgba%28190%2C180%2C255%2C.12%29' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpolygon points='60%2C40 78%2C72 42%2C72'/%3E%3Crect x='300' y='120' width='16' height='16' transform='rotate%2820 308 128%29'/%3E%3Ccircle cx='470' cy='300' r='9'/%3E%3Cline x1='150' y1='420' x2='178' y2='404'/%3E%3Cpolygon points='520%2C520 534%2C534 520%2C548 506%2C534'/%3E%3Ccircle cx='220' cy='230' r='2.5' fill='rgba%28190%2C180%2C255%2C.2%29'/%3E%3C/svg%3E"); --pt-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='780' height='780' viewBox='0 0 780 780' fill='none' stroke='rgba%28190%2C180%2C255%2C.12%29' stroke-width='1.2' stroke-linejoin='round'%3E%3Ccircle cx='120' cy='560' r='14'/%3E%3Cpolygon points='600%2C90 622%2C128 578%2C128'/%3E%3Crect x='380' y='420' width='22' height='22' transform='rotate%28-15 391 431%29'/%3E%3Cline x1='60' y1='240' x2='96' y2='240'/%3E%3Cpolygon points='700%2C640 712%2C652 700%2C664 688%2C652'/%3E%3Ccircle cx='520' cy='260' r='3' fill='rgba%28190%2C180%2C255%2C.2%29'/%3E%3C/svg%3E"); --pt-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000' viewBox='0 0 1000 1000' fill='none' stroke='rgba%28190%2C180%2C255%2C.12%29' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpolygon points='200%2C700 230%2C752 170%2C752'/%3E%3Ccircle cx='780' cy='200' r='20'/%3E%3Crect x='520' y='820' width='30' height='30' transform='rotate%2835 535 835%29'/%3E%3Cline x1='860' y1='560' x2='900' y2='536'/%3E%3C/svg%3E"); } html::before,html::after,body::before,body::after{ content:""; position:fixed; z-index:-1; pointer-events:none; border:0; border-radius:0; filter:none; box-shadow:none; opacity:1; inset:auto; transform:none; } html::before{ top:-600px; left:-600px; width:calc(100vw + 1200px); height:calc(100vh + 1200px); background:var(--pt-a); animation:gt-pa 120s linear infinite; } html::after{ content:""; top:-780px; left:-780px; width:calc(100vw + 1560px); height:calc(100vh + 1560px); background:var(--pt-b); -webkit-mask:none; mask:none; animation:gt-pb 170s linear infinite; } body::before{ top:-1000px; left:-1000px; width:calc(100vw + 2000px); height:calc(100vh + 2000px); background:var(--pt-c); opacity:.8; animation:gt-pc 240s linear infinite; } body::after{ content:none; } @keyframes gt-pa{ to{ transform:translate(600px,-600px); } } @keyframes gt-pb{ to{ transform:translate(-780px,-780px); } } @keyframes gt-pc{ to{ transform:translate(1000px,1000px); } } /* 배경: 무광 단색에 가까운 그라데이션. 어두운 화면은 검정 → 미드나잇 보라, 밝은 화면은 차가운 회백 */ :root{ --bg:#f3f3f7; --t1:#3d3f8f; --t2:#5a4a8e; --t3:#2f6a76; --accent:#33357e; --accent-hover:#2a2c6c; --link:#3a3c96; --g-head:linear-gradient(100deg,#2b2d72 0%,#4c3f86 100%); --g-btn:#2f3178; --g-num:linear-gradient(100deg,#2f3178,#4c3f86); --inv-bg:linear-gradient(180deg,#14152e 0%,#1d1a3c 100%); --feat-bg:linear-gradient(180deg,#191a3a 0%,#231d44 100%); --feat-text-2:#b9bad0; --inv-text-2:#b9bad0; --inv-link:#c3c5ff; } body{ background:linear-gradient(180deg,#f6f6f9 0%,#ecebf3 100%); background-attachment:fixed; } :root[data-theme="dark"]{ --bg:#050409; --accent:#5b5ec9; --accent-hover:#6669d4; --link:#aeb1f5; --g-head:linear-gradient(100deg,#e6e4ff 0%,#b9b1ee 100%); --g-btn:#4a4cb4; --stroke:transparent; --panel:rgba(22,18,40,.82); --tile:rgba(22,18,40,.82); --panel-2:rgba(30,25,54,.85); --tile-2:rgba(32,27,58,.88); --inv-bg:transparent; --feat-bg:linear-gradient(180deg,#1f1a44 0%,#2a2058 100%); --feat-text:#f1f0ff; --feat-text-2:#bdb9da; --feat-line:rgba(255,255,255,.14); } :root[data-theme="dark"] body{ background:linear-gradient(180deg,#000 0%,#08060f 30%,#120c26 70%,#1c1238 100%); background-attachment:fixed; } /* 반짝임 제거: 흐르는 색·윤곽선·발광 그림자·파동·튀어오름 끔 */ .h-xl,.h-l,h1.t,.hero h1,.app-h,.res-head h2,h1:not([class]),em.em{ animation:none !important; -webkit-text-stroke:0 !important; filter:none !important; background-size:100% 100% !important; } .inv em.em{ background-image:linear-gradient(100deg,#ffffff,#c9c3f2); } .hero .actions .btn::after,.nav-cta::after{ content:none !important; } .a-miss.on{ animation:none; } .btn:not(.line):not(.danger):not(.soft):not(.ghost),.nav-cta,.q-bubble,.vs-q,.offer-tag,.a-miss a{ background:var(--g-btn) !important; box-shadow:none !important; } .btn:not(.line):not(.danger):not(.soft):not(.ghost):hover,.nav-cta:hover{ background:var(--accent-hover) !important; } .hero .actions .btn:not(.soft){ box-shadow:none; } .svc-tile.feat{ box-shadow:0 0 0 1px color-mix(in srgb,var(--t2) 40%,transparent); } :root[data-theme="dark"] .svc-tile.feat .btn:not(.line):not(.danger):not(.soft):not(.ghost){ background:#f1f0ff !important; color:#1d1a44; } .svc-tile.feat .btn:not(.line):not(.danger):not(.soft):not(.ghost){ background:#f1f0ff !important; color:#1d1a44; } .a-miss{ box-shadow:none; background:color-mix(in srgb,var(--miss) 8%,transparent); } .score,.vz-pri > li:first-child,.btn:not(.line):not(.danger):not(.soft):not(.ghost){ box-shadow:none; } .card,.svc-tile,.offer,.demo,.app{ backdrop-filter:none; -webkit-backdrop-filter:none; } .cat-bar i,.qbar i,.jbb i,.vz-bar i,.stage.done i,.stage.cur i{ background:var(--accent); } mark.mk-hl{ background:linear-gradient(transparent 64%, color-mix(in srgb,var(--t2) 18%,transparent) 64%); } :root[data-theme="dark"] mark.mk-hl,.inv mark.mk-hl{ background:linear-gradient(transparent 64%, rgba(160,150,240,.26) 64%); } :root[data-theme="dark"] .sec.inv{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); } @media (prefers-reduced-motion:reduce){ html::before,html::after,body::before{ animation:none !important; } } /* 입자가 카드·글자 위로 비치지 않게 카드는 불투명 */ :root[data-theme="dark"]{ --panel:#130f24; --tile:#130f24; --panel-2:#1a1530; --tile-2:#1d1834; --bg-alt:transparent; } :root:not([data-theme="dark"]){ --panel:#ffffff; --tile:#ffffff; --panel-2:#fafafc; } .demo,.app{ background:var(--tile); } :root[data-theme="dark"]{ --inv-tile:#130f24; } :root[data-theme="dark"] .feat .svc-tag .hl,:root[data-theme="dark"] .feat .svc-price{ background-image:linear-gradient(100deg,#e6e4ff,#b9b1ee); } /* ══ 새 초안 2: 배경 움직임을 기하학 입자 → 별로. 작은 별·중간 별·십자 반짝이는 별 세 겹이 서로 다른 박자로 깜빡이며 아주 천천히 흐름 ══ */ :root{ --pt-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Ccircle cx='270' cy='18' r='0.92' fill='%233a3a80' fill-opacity='0.28'/%3E%3Ccircle cx='263' cy='308' r='0.91' fill='%233a3a80' fill-opacity='0.13'/%3E%3Ccircle cx='220' cy='212' r='0.92' fill='%233a3a80' fill-opacity='0.26'/%3E%3Ccircle cx='347' cy='245' r='0.95' fill='%233a3a80' fill-opacity='0.24'/%3E%3Ccircle cx='291' cy='97' r='0.52' fill='%233a3a80' fill-opacity='0.13'/%3E%3Ccircle cx='151' cy='44' r='0.92' fill='%233a3a80' fill-opacity='0.21'/%3E%3Ccircle cx='264' cy='263' r='0.84' fill='%233a3a80' fill-opacity='0.20'/%3E%3Ccircle cx='1' cy='335' r='0.87' fill='%233a3a80' fill-opacity='0.20'/%3E%3Ccircle cx='225' cy='277' r='0.53' fill='%233a3a80' fill-opacity='0.25'/%3E%3Ccircle cx='106' cy='31' r='0.63' fill='%233a3a80' fill-opacity='0.25'/%3E%3Ccircle cx='86' cy='311' r='0.99' fill='%233a3a80' fill-opacity='0.20'/%3E%3Ccircle cx='161' cy='201' r='0.84' fill='%233a3a80' fill-opacity='0.25'/%3E%3Ccircle cx='259' cy='270' r='0.54' fill='%233a3a80' fill-opacity='0.13'/%3E%3Ccircle cx='107' cy='312' r='0.65' fill='%233a3a80' fill-opacity='0.21'/%3E%3Ccircle cx='5' cy='25' r='0.63' fill='%233a3a80' fill-opacity='0.23'/%3E%3Ccircle cx='291' cy='284' r='0.65' fill='%233a3a80' fill-opacity='0.20'/%3E%3Ccircle cx='195' cy='196' r='0.56' fill='%233a3a80' fill-opacity='0.28'/%3E%3Ccircle cx='84' cy='411' r='0.97' fill='%233a3a80' fill-opacity='0.10'/%3E%3Ccircle cx='193' cy='344' r='0.98' fill='%233a3a80' fill-opacity='0.19'/%3E%3Ccircle cx='113' cy='88' r='0.97' fill='%233a3a80' fill-opacity='0.14'/%3E%3Ccircle cx='244' cy='60' r='0.76' fill='%233a3a80' fill-opacity='0.29'/%3E%3Ccircle cx='56' cy='344' r='0.75' fill='%233a3a80' fill-opacity='0.28'/%3E%3Ccircle cx='295' cy='97' r='0.95' fill='%233a3a80' fill-opacity='0.20'/%3E%3Ccircle cx='10' cy='2' r='0.75' fill='%233a3a80' fill-opacity='0.19'/%3E%3Ccircle cx='127' cy='59' r='0.67' fill='%233a3a80' fill-opacity='0.16'/%3E%3Ccircle cx='353' cy='1' r='0.88' fill='%233a3a80' fill-opacity='0.27'/%3E%3Ccircle cx='50' cy='389' r='0.86' fill='%233a3a80' fill-opacity='0.28'/%3E%3Ccircle cx='122' cy='156' r='0.70' fill='%233a3a80' fill-opacity='0.30'/%3E%3Ccircle cx='247' cy='151' r='0.71' fill='%233a3a80' fill-opacity='0.16'/%3E%3Ccircle cx='20' cy='43' r='0.92' fill='%233a3a80' fill-opacity='0.16'/%3E%3Ccircle cx='393' cy='105' r='0.63' fill='%233a3a80' fill-opacity='0.20'/%3E%3Ccircle cx='80' cy='157' r='0.98' fill='%233a3a80' fill-opacity='0.28'/%3E%3Ccircle cx='341' cy='265' r='0.96' fill='%233a3a80' fill-opacity='0.29'/%3E%3Ccircle cx='231' cy='302' r='0.52' fill='%233a3a80' fill-opacity='0.25'/%3E%3Ccircle cx='189' cy='316' r='0.82' fill='%233a3a80' fill-opacity='0.16'/%3E%3Ccircle cx='21' cy='389' r='0.56' fill='%233a3a80' fill-opacity='0.19'/%3E%3Ccircle cx='144' cy='125' r='0.87' fill='%233a3a80' fill-opacity='0.30'/%3E%3Ccircle cx='109' cy='276' r='0.65' fill='%233a3a80' fill-opacity='0.21'/%3E%3Ccircle cx='166' cy='70' r='0.58' fill='%233a3a80' fill-opacity='0.14'/%3E%3Ccircle cx='381' cy='209' r='0.61' fill='%233a3a80' fill-opacity='0.28'/%3E%3C/svg%3E"); --pt-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Ccircle cx='638' cy='288' r='0.88' fill='%234a3f8a' fill-opacity='0.16'/%3E%3Ccircle cx='58' cy='219' r='0.85' fill='%234a3f8a' fill-opacity='0.17'/%3E%3Ccircle cx='165' cy='365' r='1.33' fill='%234a3f8a' fill-opacity='0.27'/%3E%3Ccircle cx='264' cy='265' r='1.11' fill='%234a3f8a' fill-opacity='0.20'/%3E%3Ccircle cx='216' cy='40' r='0.97' fill='%234a3f8a' fill-opacity='0.31'/%3E%3Ccircle cx='81' cy='322' r='1.18' fill='%234a3f8a' fill-opacity='0.29'/%3E%3Ccircle cx='138' cy='173' r='0.95' fill='%234a3f8a' fill-opacity='0.20'/%3E%3Ccircle cx='285' cy='611' r='1.31' fill='%234a3f8a' fill-opacity='0.29'/%3E%3Ccircle cx='14' cy='21' r='1.23' fill='%234a3f8a' fill-opacity='0.30'/%3E%3Ccircle cx='303' cy='376' r='0.80' fill='%234a3f8a' fill-opacity='0.20'/%3E%3Ccircle cx='593' cy='528' r='1.31' fill='%234a3f8a' fill-opacity='0.31'/%3E%3Ccircle cx='159' cy='70' r='0.89' fill='%234a3f8a' fill-opacity='0.22'/%3E%3Ccircle cx='437' cy='603' r='1.23' fill='%234a3f8a' fill-opacity='0.25'/%3E%3Ccircle cx='489' cy='293' r='1.13' fill='%234a3f8a' fill-opacity='0.13'/%3E%3Ccircle cx='501' cy='149' r='1.35' fill='%234a3f8a' fill-opacity='0.25'/%3E%3Ccircle cx='194' cy='82' r='0.95' fill='%234a3f8a' fill-opacity='0.25'/%3E%3Ccircle cx='447' cy='72' r='0.84' fill='%234a3f8a' fill-opacity='0.22'/%3E%3Ccircle cx='373' cy='248' r='0.93' fill='%234a3f8a' fill-opacity='0.24'/%3E%3Ccircle cx='7' cy='193' r='1.08' fill='%234a3f8a' fill-opacity='0.31'/%3E%3Ccircle cx='413' cy='566' r='1.09' fill='%234a3f8a' fill-opacity='0.17'/%3E%3C/svg%3E"); --pt-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cpath d='M232 840.9L233.6 845.0L237.7 846L233.6 847.3L232 851.4L231.3 847.3L227.2 846L231.3 845.0Z' fill='rgba%2870%2C60%2C140%2C.22%29'/%3E%3Ccircle cx='232' cy='846' r='1.3' fill='%23fff'/%3E%3Cpath d='M284 34.0L285.4 37.7L289.1 39L285.4 39.8L284 43.5L283.3 39.8L279.6 39L283.3 37.7Z' fill='rgba%2870%2C60%2C140%2C.22%29'/%3E%3Ccircle cx='284' cy='39' r='1.3' fill='%23fff'/%3E%3Cpath d='M600 377.1L600.9 380.3L604.2 381L600.9 382.1L600 385.4L599.1 382.1L595.9 381L599.1 380.3Z' fill='rgba%2870%2C60%2C140%2C.22%29'/%3E%3Ccircle cx='600' cy='381' r='1.3' fill='%23fff'/%3E%3Cpath d='M594 811.6L594.8 814.7L598.0 816L594.8 816.5L594 819.7L593.0 816.5L589.9 816L593.0 814.7Z' fill='rgba%2870%2C60%2C140%2C.22%29'/%3E%3Ccircle cx='594' cy='816' r='1.3' fill='%23fff'/%3E%3C/svg%3E"); } :root[data-theme="dark"]{ --pt-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Ccircle cx='136' cy='63' r='0.89' fill='%23ffffff' fill-opacity='0.29'/%3E%3Ccircle cx='225' cy='154' r='0.53' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='16' cy='182' r='0.54' fill='%23ffffff' fill-opacity='0.30'/%3E%3Ccircle cx='178' cy='347' r='0.57' fill='%23ffffff' fill-opacity='0.37'/%3E%3Ccircle cx='264' cy='398' r='0.85' fill='%23ffffff' fill-opacity='0.47'/%3E%3Ccircle cx='410' cy='20' r='1.02' fill='%23ffffff' fill-opacity='0.41'/%3E%3Ccircle cx='61' cy='49' r='0.69' fill='%23ffffff' fill-opacity='0.70'/%3E%3Ccircle cx='76' cy='244' r='0.88' fill='%23ffffff' fill-opacity='0.45'/%3E%3Ccircle cx='230' cy='26' r='0.54' fill='%23ffffff' fill-opacity='0.36'/%3E%3Ccircle cx='286' cy='180' r='0.69' fill='%23ffffff' fill-opacity='0.57'/%3E%3Ccircle cx='190' cy='126' r='0.98' fill='%23ffffff' fill-opacity='0.63'/%3E%3Ccircle cx='103' cy='241' r='0.82' fill='%23ffffff' fill-opacity='0.73'/%3E%3Ccircle cx='306' cy='121' r='1.09' fill='%23ffffff' fill-opacity='0.31'/%3E%3Ccircle cx='176' cy='318' r='0.59' fill='%23ffffff' fill-opacity='0.52'/%3E%3Ccircle cx='16' cy='281' r='0.96' fill='%23ffffff' fill-opacity='0.57'/%3E%3Ccircle cx='368' cy='132' r='0.92' fill='%23ffffff' fill-opacity='0.58'/%3E%3Ccircle cx='244' cy='192' r='1.00' fill='%23ffffff' fill-opacity='0.77'/%3E%3Ccircle cx='199' cy='279' r='0.54' fill='%23ffffff' fill-opacity='0.64'/%3E%3Ccircle cx='272' cy='417' r='0.99' fill='%23ffffff' fill-opacity='0.41'/%3E%3Ccircle cx='162' cy='281' r='0.51' fill='%23ffffff' fill-opacity='0.50'/%3E%3Ccircle cx='71' cy='49' r='0.54' fill='%23ffffff' fill-opacity='0.67'/%3E%3Ccircle cx='54' cy='104' r='0.73' fill='%23ffffff' fill-opacity='0.73'/%3E%3Ccircle cx='34' cy='189' r='0.83' fill='%23ffffff' fill-opacity='0.74'/%3E%3Ccircle cx='344' cy='363' r='0.67' fill='%23ffffff' fill-opacity='0.48'/%3E%3Ccircle cx='151' cy='371' r='1.07' fill='%23ffffff' fill-opacity='0.33'/%3E%3Ccircle cx='74' cy='97' r='0.64' fill='%23ffffff' fill-opacity='0.52'/%3E%3Ccircle cx='247' cy='110' r='0.50' fill='%23ffffff' fill-opacity='0.48'/%3E%3Ccircle cx='155' cy='238' r='1.07' fill='%23ffffff' fill-opacity='0.63'/%3E%3Ccircle cx='217' cy='259' r='0.91' fill='%23ffffff' fill-opacity='0.28'/%3E%3Ccircle cx='378' cy='328' r='1.02' fill='%23ffffff' fill-opacity='0.69'/%3E%3Ccircle cx='165' cy='168' r='0.56' fill='%23ffffff' fill-opacity='0.60'/%3E%3Ccircle cx='26' cy='28' r='0.63' fill='%23ffffff' fill-opacity='0.34'/%3E%3Ccircle cx='143' cy='22' r='0.50' fill='%23ffffff' fill-opacity='0.33'/%3E%3Ccircle cx='43' cy='153' r='0.52' fill='%23ffffff' fill-opacity='0.73'/%3E%3Ccircle cx='258' cy='62' r='0.65' fill='%23ffffff' fill-opacity='0.44'/%3E%3Ccircle cx='153' cy='52' r='1.01' fill='%23ffffff' fill-opacity='0.80'/%3E%3Ccircle cx='196' cy='203' r='0.55' fill='%23ffffff' fill-opacity='0.31'/%3E%3Ccircle cx='144' cy='111' r='1.00' fill='%23ffffff' fill-opacity='0.34'/%3E%3Ccircle cx='10' cy='399' r='0.82' fill='%23ffffff' fill-opacity='0.33'/%3E%3Ccircle cx='228' cy='11' r='0.82' fill='%23ffffff' fill-opacity='0.79'/%3E%3Ccircle cx='363' cy='292' r='0.66' fill='%23ffffff' fill-opacity='0.45'/%3E%3Ccircle cx='70' cy='324' r='0.82' fill='%23ffffff' fill-opacity='0.68'/%3E%3Ccircle cx='138' cy='94' r='0.99' fill='%23ffffff' fill-opacity='0.79'/%3E%3Ccircle cx='358' cy='339' r='0.99' fill='%23ffffff' fill-opacity='0.66'/%3E%3Ccircle cx='95' cy='217' r='0.71' fill='%23ffffff' fill-opacity='0.27'/%3E%3Ccircle cx='12' cy='117' r='0.66' fill='%23ffffff' fill-opacity='0.63'/%3E%3Ccircle cx='402' cy='188' r='1.06' fill='%23ffffff' fill-opacity='0.79'/%3E%3Ccircle cx='401' cy='153' r='0.63' fill='%23ffffff' fill-opacity='0.37'/%3E%3Ccircle cx='83' cy='86' r='0.87' fill='%23ffffff' fill-opacity='0.75'/%3E%3Ccircle cx='353' cy='201' r='0.89' fill='%23ffffff' fill-opacity='0.69'/%3E%3Ccircle cx='36' cy='277' r='1.05' fill='%23ffffff' fill-opacity='0.68'/%3E%3Ccircle cx='315' cy='201' r='0.61' fill='%23ffffff' fill-opacity='0.68'/%3E%3Ccircle cx='140' cy='336' r='1.08' fill='%23ffffff' fill-opacity='0.47'/%3E%3Ccircle cx='169' cy='398' r='0.93' fill='%23ffffff' fill-opacity='0.34'/%3E%3Ccircle cx='53' cy='63' r='1.04' fill='%23ffffff' fill-opacity='0.69'/%3E%3Ccircle cx='61' cy='347' r='1.09' fill='%23ffffff' fill-opacity='0.61'/%3E%3Ccircle cx='147' cy='230' r='0.58' fill='%23ffffff' fill-opacity='0.26'/%3E%3Ccircle cx='408' cy='273' r='0.82' fill='%23ffffff' fill-opacity='0.76'/%3E%3Ccircle cx='182' cy='366' r='1.00' fill='%23ffffff' fill-opacity='0.37'/%3E%3Ccircle cx='106' cy='123' r='0.64' fill='%23ffffff' fill-opacity='0.57'/%3E%3Ccircle cx='109' cy='176' r='0.58' fill='%23ffffff' fill-opacity='0.75'/%3E%3Ccircle cx='149' cy='192' r='0.85' fill='%23ffffff' fill-opacity='0.75'/%3E%3Ccircle cx='177' cy='385' r='0.80' fill='%23ffffff' fill-opacity='0.54'/%3E%3Ccircle cx='220' cy='8' r='0.76' fill='%23ffffff' fill-opacity='0.35'/%3E%3Ccircle cx='2' cy='336' r='0.60' fill='%23ffffff' fill-opacity='0.51'/%3E%3Ccircle cx='305' cy='234' r='0.70' fill='%23ffffff' fill-opacity='0.54'/%3E%3Ccircle cx='233' cy='329' r='0.56' fill='%23ffffff' fill-opacity='0.56'/%3E%3Ccircle cx='104' cy='116' r='0.96' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='236' cy='319' r='1.05' fill='%23ffffff' fill-opacity='0.49'/%3E%3Ccircle cx='257' cy='212' r='0.81' fill='%23ffffff' fill-opacity='0.63'/%3E%3C/svg%3E"); --pt-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Ccircle cx='290' cy='341' r='1.23' fill='%23e4dcff' fill-opacity='0.96'/%3E%3Ccircle cx='447' cy='561' r='1.56' fill='%23e4dcff' fill-opacity='0.56'/%3E%3Ccircle cx='358' cy='604' r='1.49' fill='%23e4dcff' fill-opacity='0.48'/%3E%3Ccircle cx='78' cy='283' r='0.95' fill='%23e4dcff' fill-opacity='0.54'/%3E%3Ccircle cx='47' cy='428' r='1.45' fill='%23e4dcff' fill-opacity='0.94'/%3E%3Ccircle cx='99' cy='458' r='1.36' fill='%23e4dcff' fill-opacity='0.49'/%3E%3Ccircle cx='565' cy='619' r='1.05' fill='%23e4dcff' fill-opacity='0.97'/%3E%3Ccircle cx='255' cy='312' r='1.59' fill='%23e4dcff' fill-opacity='0.90'/%3E%3Ccircle cx='103' cy='276' r='1.26' fill='%23e4dcff' fill-opacity='0.60'/%3E%3Ccircle cx='125' cy='204' r='1.41' fill='%23e4dcff' fill-opacity='0.41'/%3E%3Ccircle cx='355' cy='282' r='0.91' fill='%23e4dcff' fill-opacity='0.60'/%3E%3Ccircle cx='399' cy='328' r='0.95' fill='%23e4dcff' fill-opacity='0.99'/%3E%3Ccircle cx='505' cy='622' r='0.97' fill='%23e4dcff' fill-opacity='0.56'/%3E%3Ccircle cx='25' cy='499' r='1.09' fill='%23e4dcff' fill-opacity='0.48'/%3E%3Ccircle cx='270' cy='583' r='1.47' fill='%23e4dcff' fill-opacity='0.56'/%3E%3Ccircle cx='96' cy='588' r='1.30' fill='%23e4dcff' fill-opacity='0.82'/%3E%3Ccircle cx='57' cy='37' r='1.38' fill='%23e4dcff' fill-opacity='0.66'/%3E%3Ccircle cx='46' cy='601' r='1.34' fill='%23e4dcff' fill-opacity='0.88'/%3E%3Ccircle cx='54' cy='548' r='0.95' fill='%23e4dcff' fill-opacity='0.92'/%3E%3Ccircle cx='290' cy='217' r='1.29' fill='%23e4dcff' fill-opacity='0.96'/%3E%3Ccircle cx='171' cy='83' r='1.27' fill='%23e4dcff' fill-opacity='0.54'/%3E%3Ccircle cx='70' cy='103' r='0.94' fill='%23e4dcff' fill-opacity='0.52'/%3E%3Ccircle cx='200' cy='195' r='1.43' fill='%23e4dcff' fill-opacity='0.57'/%3E%3Ccircle cx='320' cy='114' r='1.14' fill='%23e4dcff' fill-opacity='0.41'/%3E%3Ccircle cx='160' cy='10' r='1.41' fill='%23e4dcff' fill-opacity='0.73'/%3E%3Ccircle cx='121' cy='304' r='1.55' fill='%23e4dcff' fill-opacity='0.46'/%3E%3Ccircle cx='524' cy='277' r='1.25' fill='%23e4dcff' fill-opacity='0.90'/%3E%3Ccircle cx='252' cy='324' r='1.38' fill='%23e4dcff' fill-opacity='0.99'/%3E%3Ccircle cx='219' cy='533' r='1.39' fill='%23e4dcff' fill-opacity='0.78'/%3E%3Ccircle cx='259' cy='222' r='0.94' fill='%23e4dcff' fill-opacity='0.48'/%3E%3Ccircle cx='45' cy='474' r='1.08' fill='%23e4dcff' fill-opacity='0.50'/%3E%3Ccircle cx='54' cy='538' r='1.51' fill='%23e4dcff' fill-opacity='0.80'/%3E%3Ccircle cx='180' cy='155' r='1.11' fill='%23e4dcff' fill-opacity='0.68'/%3E%3Ccircle cx='101' cy='285' r='1.08' fill='%23e4dcff' fill-opacity='0.98'/%3E%3Ccircle cx='622' cy='350' r='1.07' fill='%23e4dcff' fill-opacity='0.98'/%3E%3Ccircle cx='198' cy='228' r='0.90' fill='%23e4dcff' fill-opacity='0.63'/%3E%3Ccircle cx='304' cy='322' r='1.04' fill='%23e4dcff' fill-opacity='0.70'/%3E%3Ccircle cx='3' cy='169' r='0.96' fill='%23e4dcff' fill-opacity='0.64'/%3E%3C/svg%3E"); --pt-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cpath d='M56 35.1L56.8 38.4L60.1 39L56.8 40.3L56 43.6L54.9 40.3L51.6 39L54.9 38.4Z' fill='rgba%28230%2C222%2C255%2C.75%29'/%3E%3Ccircle cx='56' cy='39' r='1.3' fill='%23fff'/%3E%3Cpath d='M220 518.8L221.3 522.5L225.0 524L221.3 524.7L220 528.4L219.2 524.7L215.4 524L219.2 522.5Z' fill='rgba%28230%2C222%2C255%2C.75%29'/%3E%3Ccircle cx='220' cy='524' r='1.3' fill='%23fff'/%3E%3Cpath d='M665 580.2L666.6 584.3L670.8 585L666.6 586.7L665 590.8L664.3 586.7L660.2 585L664.3 584.3Z' fill='rgba%28230%2C222%2C255%2C.75%29'/%3E%3Ccircle cx='665' cy='585' r='1.3' fill='%23fff'/%3E%3Cpath d='M776 350.7L777.0 354.0L780.3 355L777.0 355.9L776 359.3L775.1 355.9L771.7 355L775.1 354.0Z' fill='rgba%28230%2C222%2C255%2C.75%29'/%3E%3Ccircle cx='776' cy='355' r='1.3' fill='%23fff'/%3E%3Cpath d='M867 143.2L868.0 147.4L872.2 149L868.0 149.7L867 153.8L865.7 149.7L861.6 149L865.7 147.4Z' fill='rgba%28230%2C222%2C255%2C.75%29'/%3E%3Ccircle cx='867' cy='149' r='1.3' fill='%23fff'/%3E%3C/svg%3E"); } html::before{ animation:gt-pa 300s linear infinite, gt-tw 7s ease-in-out infinite alternate; } html::after{ animation:gt-pb 420s linear infinite, gt-tw 11s ease-in-out -4s infinite alternate; } body::before{ opacity:1; animation:gt-pc 600s linear infinite, gt-tw2 5s ease-in-out -2s infinite alternate; } @keyframes gt-tw{ 0%{ opacity:1; } 100%{ opacity:.45; } } @keyframes gt-tw2{ 0%{ opacity:.25; } 60%{ opacity:1; } 100%{ opacity:.6; } } /* ══ 새 초안 3: 같은 검정 → 미드나잇 보라 그라데이션 위에 밤하늘. 별을 더 촘촘히, 은하수 띠, 지평선 쪽 보랏빛, 가끔 지나가는 유성 하나 ══ */ :root[data-theme="dark"]{ --pt-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380'%3E%3Ccircle cx='13' cy='128' r='0.65' fill='%23ffffff' fill-opacity='0.64'/%3E%3Ccircle cx='75' cy='303' r='0.84' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='78' cy='369' r='0.59' fill='%23ffffff' fill-opacity='0.73'/%3E%3Ccircle cx='88' cy='84' r='0.86' fill='%23ffffff' fill-opacity='0.39'/%3E%3Ccircle cx='362' cy='188' r='0.51' fill='%23ffffff' fill-opacity='0.35'/%3E%3Ccircle cx='158' cy='253' r='0.97' fill='%23ffffff' fill-opacity='0.30'/%3E%3Ccircle cx='150' cy='81' r='0.98' fill='%23ffffff' fill-opacity='0.29'/%3E%3Ccircle cx='20' cy='23' r='0.64' fill='%23ffffff' fill-opacity='0.78'/%3E%3Ccircle cx='336' cy='278' r='1.00' fill='%23ffffff' fill-opacity='0.81'/%3E%3Ccircle cx='125' cy='70' r='0.96' fill='%23ffffff' fill-opacity='0.69'/%3E%3Ccircle cx='12' cy='252' r='0.63' fill='%23ffffff' fill-opacity='0.44'/%3E%3Ccircle cx='126' cy='64' r='0.40' fill='%23ffffff' fill-opacity='0.38'/%3E%3Ccircle cx='134' cy='363' r='0.47' fill='%23ffffff' fill-opacity='0.83'/%3E%3Ccircle cx='79' cy='136' r='0.89' fill='%23ffffff' fill-opacity='0.73'/%3E%3Ccircle cx='164' cy='19' r='0.68' fill='%23ffffff' fill-opacity='0.44'/%3E%3Ccircle cx='349' cy='73' r='0.62' fill='%23ffffff' fill-opacity='0.78'/%3E%3Ccircle cx='12' cy='156' r='0.89' fill='%23ffffff' fill-opacity='0.70'/%3E%3Ccircle cx='15' cy='13' r='0.44' fill='%23ffffff' fill-opacity='0.80'/%3E%3Ccircle cx='98' cy='284' r='0.94' fill='%23ffffff' fill-opacity='0.42'/%3E%3Ccircle cx='103' cy='364' r='0.77' fill='%23ffffff' fill-opacity='0.37'/%3E%3Ccircle cx='272' cy='120' r='0.57' fill='%23ffffff' fill-opacity='0.20'/%3E%3Ccircle cx='287' cy='348' r='0.78' fill='%23ffffff' fill-opacity='0.81'/%3E%3Ccircle cx='9' cy='89' r='0.69' fill='%23ffffff' fill-opacity='0.82'/%3E%3Ccircle cx='362' cy='147' r='0.55' fill='%23ffffff' fill-opacity='0.48'/%3E%3Ccircle cx='188' cy='353' r='0.51' fill='%23ffffff' fill-opacity='0.72'/%3E%3Ccircle cx='281' cy='313' r='0.86' fill='%23ffffff' fill-opacity='0.59'/%3E%3Ccircle cx='125' cy='121' r='0.62' fill='%23ffffff' fill-opacity='0.71'/%3E%3Ccircle cx='30' cy='75' r='0.85' fill='%23ffffff' fill-opacity='0.36'/%3E%3Ccircle cx='25' cy='13' r='0.73' fill='%23ffffff' fill-opacity='0.41'/%3E%3Ccircle cx='372' cy='336' r='0.99' fill='%23ffffff' fill-opacity='0.37'/%3E%3Ccircle cx='32' cy='37' r='0.70' fill='%23ffffff' fill-opacity='0.66'/%3E%3Ccircle cx='170' cy='89' r='0.65' fill='%23ffffff' fill-opacity='0.60'/%3E%3Ccircle cx='256' cy='284' r='0.91' fill='%23ffffff' fill-opacity='0.63'/%3E%3Ccircle cx='46' cy='320' r='0.58' fill='%23ffffff' fill-opacity='0.57'/%3E%3Ccircle cx='142' cy='280' r='0.52' fill='%23ffffff' fill-opacity='0.36'/%3E%3Ccircle cx='93' cy='58' r='0.93' fill='%23ffffff' fill-opacity='0.58'/%3E%3Ccircle cx='124' cy='151' r='1.00' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='88' cy='307' r='0.79' fill='%23ffffff' fill-opacity='0.84'/%3E%3Ccircle cx='39' cy='180' r='0.89' fill='%23ffffff' fill-opacity='0.75'/%3E%3Ccircle cx='347' cy='15' r='0.58' fill='%23ffffff' fill-opacity='0.28'/%3E%3Ccircle cx='72' cy='370' r='0.75' fill='%23ffffff' fill-opacity='0.80'/%3E%3Ccircle cx='141' cy='329' r='0.67' fill='%23ffffff' fill-opacity='0.37'/%3E%3Ccircle cx='296' cy='359' r='0.46' fill='%23ffffff' fill-opacity='0.59'/%3E%3Ccircle cx='236' cy='83' r='0.62' fill='%23ffffff' fill-opacity='0.29'/%3E%3Ccircle cx='78' cy='97' r='0.76' fill='%23ffffff' fill-opacity='0.62'/%3E%3Ccircle cx='77' cy='4' r='0.60' fill='%23ffffff' fill-opacity='0.64'/%3E%3Ccircle cx='70' cy='119' r='0.52' fill='%23ffffff' fill-opacity='0.72'/%3E%3Ccircle cx='208' cy='24' r='0.46' fill='%23ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='209' cy='243' r='0.45' fill='%23ffffff' fill-opacity='0.31'/%3E%3Ccircle cx='264' cy='156' r='0.57' fill='%23ffffff' fill-opacity='0.40'/%3E%3Ccircle cx='362' cy='119' r='0.74' fill='%23ffffff' fill-opacity='0.43'/%3E%3Ccircle cx='158' cy='328' r='1.00' fill='%23ffffff' fill-opacity='0.44'/%3E%3Ccircle cx='75' cy='277' r='0.52' fill='%23ffffff' fill-opacity='0.20'/%3E%3Ccircle cx='343' cy='161' r='0.89' fill='%23ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='335' cy='175' r='0.50' fill='%23ffffff' fill-opacity='0.21'/%3E%3Ccircle cx='210' cy='243' r='0.95' fill='%23ffffff' fill-opacity='0.26'/%3E%3Ccircle cx='236' cy='141' r='0.70' fill='%23ffffff' fill-opacity='0.29'/%3E%3Ccircle cx='108' cy='198' r='0.96' fill='%23ffffff' fill-opacity='0.27'/%3E%3Ccircle cx='186' cy='306' r='0.98' fill='%23ffffff' fill-opacity='0.33'/%3E%3Ccircle cx='48' cy='358' r='0.99' fill='%23ffffff' fill-opacity='0.51'/%3E%3Ccircle cx='20' cy='352' r='0.63' fill='%23ffffff' fill-opacity='0.79'/%3E%3Ccircle cx='236' cy='313' r='0.50' fill='%23ffffff' fill-opacity='0.71'/%3E%3Ccircle cx='84' cy='154' r='0.91' fill='%23ffffff' fill-opacity='0.74'/%3E%3Ccircle cx='70' cy='83' r='0.64' fill='%23ffffff' fill-opacity='0.54'/%3E%3Ccircle cx='146' cy='47' r='0.55' fill='%23ffffff' fill-opacity='0.67'/%3E%3Ccircle cx='341' cy='16' r='0.74' fill='%23ffffff' fill-opacity='0.69'/%3E%3Ccircle cx='14' cy='319' r='0.47' fill='%23ffffff' fill-opacity='0.59'/%3E%3Ccircle cx='209' cy='238' r='0.58' fill='%23ffffff' fill-opacity='0.47'/%3E%3Ccircle cx='221' cy='162' r='0.80' fill='%23ffffff' fill-opacity='0.49'/%3E%3Ccircle cx='167' cy='9' r='0.77' fill='%23ffffff' fill-opacity='0.52'/%3E%3Ccircle cx='89' cy='290' r='0.87' fill='%23ffffff' fill-opacity='0.50'/%3E%3Ccircle cx='68' cy='180' r='0.46' fill='%23ffffff' fill-opacity='0.28'/%3E%3Ccircle cx='164' cy='35' r='0.67' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='15' cy='242' r='0.45' fill='%23ffffff' fill-opacity='0.68'/%3E%3Ccircle cx='296' cy='194' r='0.43' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='144' cy='361' r='0.48' fill='%23ffffff' fill-opacity='0.76'/%3E%3Ccircle cx='379' cy='278' r='0.89' fill='%23ffffff' fill-opacity='0.33'/%3E%3Ccircle cx='373' cy='187' r='0.97' fill='%23ffffff' fill-opacity='0.80'/%3E%3Ccircle cx='63' cy='300' r='0.96' fill='%23ffffff' fill-opacity='0.24'/%3E%3Ccircle cx='133' cy='287' r='0.50' fill='%23ffffff' fill-opacity='0.78'/%3E%3Ccircle cx='104' cy='310' r='0.49' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='350' cy='79' r='0.56' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='121' cy='14' r='0.51' fill='%23ffffff' fill-opacity='0.30'/%3E%3Ccircle cx='356' cy='258' r='0.94' fill='%23ffffff' fill-opacity='0.31'/%3E%3Ccircle cx='298' cy='44' r='0.72' fill='%23ffffff' fill-opacity='0.61'/%3E%3Ccircle cx='137' cy='332' r='0.73' fill='%23ffffff' fill-opacity='0.58'/%3E%3Ccircle cx='335' cy='40' r='1.00' fill='%23ffffff' fill-opacity='0.61'/%3E%3Ccircle cx='150' cy='303' r='0.56' fill='%23ffffff' fill-opacity='0.84'/%3E%3Ccircle cx='219' cy='137' r='0.86' fill='%23ffffff' fill-opacity='0.49'/%3E%3Ccircle cx='67' cy='283' r='0.43' fill='%23ffffff' fill-opacity='0.73'/%3E%3Ccircle cx='96' cy='243' r='0.99' fill='%23ffffff' fill-opacity='0.58'/%3E%3Ccircle cx='252' cy='119' r='0.40' fill='%23ffffff' fill-opacity='0.22'/%3E%3Ccircle cx='57' cy='234' r='0.66' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='340' cy='50' r='0.54' fill='%23ffffff' fill-opacity='0.62'/%3E%3Ccircle cx='8' cy='1' r='0.61' fill='%23ffffff' fill-opacity='0.27'/%3E%3Ccircle cx='136' cy='85' r='0.75' fill='%23ffffff' fill-opacity='0.58'/%3E%3Ccircle cx='78' cy='237' r='0.68' fill='%23ffffff' fill-opacity='0.29'/%3E%3Ccircle cx='356' cy='93' r='0.49' fill='%23ffffff' fill-opacity='0.26'/%3E%3Ccircle cx='243' cy='331' r='0.87' fill='%23ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='100' cy='4' r='0.79' fill='%23ffffff' fill-opacity='0.57'/%3E%3Ccircle cx='133' cy='245' r='0.67' fill='%23ffffff' fill-opacity='0.81'/%3E%3Ccircle cx='279' cy='94' r='0.94' fill='%23ffffff' fill-opacity='0.23'/%3E%3Ccircle cx='202' cy='154' r='0.54' fill='%23ffffff' fill-opacity='0.24'/%3E%3Ccircle cx='296' cy='5' r='0.73' fill='%23ffffff' fill-opacity='0.81'/%3E%3Ccircle cx='54' cy='76' r='0.76' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='244' cy='309' r='0.50' fill='%23ffffff' fill-opacity='0.40'/%3E%3Ccircle cx='114' cy='18' r='0.93' fill='%23ffffff' fill-opacity='0.71'/%3E%3Ccircle cx='272' cy='2' r='0.91' fill='%23ffffff' fill-opacity='0.68'/%3E%3Ccircle cx='177' cy='282' r='0.67' fill='%23ffffff' fill-opacity='0.35'/%3E%3Ccircle cx='40' cy='88' r='0.42' fill='%23ffffff' fill-opacity='0.42'/%3E%3C/svg%3E"); --pt-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Ccircle cx='450' cy='417' r='1.56' fill='%23efe9ff' fill-opacity='0.83'/%3E%3Ccircle cx='160' cy='332' r='1.19' fill='%23efe9ff' fill-opacity='0.87'/%3E%3Ccircle cx='314' cy='159' r='1.38' fill='%23efe9ff' fill-opacity='0.98'/%3E%3Ccircle cx='130' cy='528' r='0.81' fill='%23efe9ff' fill-opacity='0.56'/%3E%3Ccircle cx='142' cy='446' r='1.65' fill='%23efe9ff' fill-opacity='0.85'/%3E%3Ccircle cx='196' cy='528' r='1.10' fill='%23efe9ff' fill-opacity='0.54'/%3E%3Ccircle cx='545' cy='378' r='1.42' fill='%23efe9ff' fill-opacity='0.80'/%3E%3Ccircle cx='587' cy='282' r='1.56' fill='%23efe9ff' fill-opacity='0.82'/%3E%3Ccircle cx='515' cy='262' r='1.45' fill='%23efe9ff' fill-opacity='0.74'/%3E%3Ccircle cx='185' cy='127' r='1.36' fill='%23efe9ff' fill-opacity='0.45'/%3E%3Ccircle cx='546' cy='87' r='0.82' fill='%23efe9ff' fill-opacity='0.46'/%3E%3Ccircle cx='557' cy='207' r='0.93' fill='%23efe9ff' fill-opacity='0.42'/%3E%3Ccircle cx='25' cy='416' r='1.37' fill='%23efe9ff' fill-opacity='0.82'/%3E%3Ccircle cx='442' cy='39' r='1.33' fill='%23efe9ff' fill-opacity='0.62'/%3E%3Ccircle cx='491' cy='492' r='1.60' fill='%23efe9ff' fill-opacity='0.44'/%3E%3Ccircle cx='521' cy='549' r='1.65' fill='%23efe9ff' fill-opacity='0.46'/%3E%3Ccircle cx='123' cy='67' r='0.83' fill='%23efe9ff' fill-opacity='0.91'/%3E%3Ccircle cx='487' cy='381' r='1.54' fill='%23efe9ff' fill-opacity='0.78'/%3E%3Ccircle cx='172' cy='60' r='0.89' fill='%23efe9ff' fill-opacity='0.85'/%3E%3Ccircle cx='123' cy='191' r='1.18' fill='%23efe9ff' fill-opacity='0.41'/%3E%3Ccircle cx='154' cy='170' r='1.44' fill='%23efe9ff' fill-opacity='0.62'/%3E%3Ccircle cx='192' cy='578' r='1.25' fill='%23efe9ff' fill-opacity='0.91'/%3E%3Ccircle cx='371' cy='19' r='1.17' fill='%23efe9ff' fill-opacity='0.66'/%3E%3Ccircle cx='464' cy='208' r='1.43' fill='%23efe9ff' fill-opacity='0.72'/%3E%3Ccircle cx='130' cy='517' r='0.88' fill='%23efe9ff' fill-opacity='0.89'/%3E%3Ccircle cx='102' cy='1' r='0.98' fill='%23efe9ff' fill-opacity='0.86'/%3E%3Ccircle cx='587' cy='3' r='1.24' fill='%23efe9ff' fill-opacity='0.69'/%3E%3Ccircle cx='478' cy='111' r='1.25' fill='%23efe9ff' fill-opacity='0.61'/%3E%3Ccircle cx='499' cy='156' r='1.65' fill='%23efe9ff' fill-opacity='0.57'/%3E%3Ccircle cx='129' cy='420' r='1.25' fill='%23efe9ff' fill-opacity='0.47'/%3E%3Ccircle cx='382' cy='49' r='1.51' fill='%23efe9ff' fill-opacity='0.82'/%3E%3Ccircle cx='472' cy='377' r='1.12' fill='%23efe9ff' fill-opacity='0.64'/%3E%3Ccircle cx='237' cy='534' r='0.88' fill='%23efe9ff' fill-opacity='0.93'/%3E%3Ccircle cx='15' cy='124' r='1.04' fill='%23efe9ff' fill-opacity='0.94'/%3E%3Ccircle cx='301' cy='228' r='1.60' fill='%23efe9ff' fill-opacity='0.54'/%3E%3Ccircle cx='277' cy='319' r='1.48' fill='%23efe9ff' fill-opacity='0.85'/%3E%3Ccircle cx='388' cy='209' r='1.09' fill='%23efe9ff' fill-opacity='0.49'/%3E%3Ccircle cx='506' cy='397' r='1.47' fill='%23efe9ff' fill-opacity='0.50'/%3E%3Ccircle cx='263' cy='464' r='1.32' fill='%23efe9ff' fill-opacity='0.48'/%3E%3Ccircle cx='277' cy='531' r='1.01' fill='%23efe9ff' fill-opacity='0.51'/%3E%3Ccircle cx='181' cy='422' r='1.56' fill='%23efe9ff' fill-opacity='0.49'/%3E%3Ccircle cx='94' cy='149' r='1.09' fill='%23efe9ff' fill-opacity='0.71'/%3E%3Ccircle cx='97' cy='197' r='0.97' fill='%23efe9ff' fill-opacity='0.99'/%3E%3Ccircle cx='437' cy='61' r='1.67' fill='%23efe9ff' fill-opacity='0.46'/%3E%3Ccircle cx='231' cy='590' r='1.52' fill='%23efe9ff' fill-opacity='0.84'/%3E%3Ccircle cx='261' cy='118' r='1.37' fill='%23efe9ff' fill-opacity='0.46'/%3E%3Ccircle cx='124' cy='233' r='0.83' fill='%23efe9ff' fill-opacity='0.64'/%3E%3Ccircle cx='475' cy='416' r='1.25' fill='%23efe9ff' fill-opacity='0.78'/%3E%3Ccircle cx='278' cy='85' r='1.34' fill='%23efe9ff' fill-opacity='0.64'/%3E%3Ccircle cx='445' cy='545' r='1.19' fill='%23efe9ff' fill-opacity='0.74'/%3E%3C/svg%3E"); --pt-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='820'%3E%3Cpath d='M604 344.4L605.2 347.6L608.4 349L605.2 349.4L604 352.6L603.4 349.4L600.2 349L603.4 347.6Z' fill='rgba%28236%2C230%2C255%2C.8%29'/%3E%3Ccircle cx='604' cy='349' r='1.3' fill='%23fff'/%3E%3Cpath d='M583 701.0L584.5 705.3L588.8 706L584.5 707.7L583 711.9L582.1 707.7L577.9 706L582.1 705.3Z' fill='rgba%28236%2C230%2C255%2C.8%29'/%3E%3Ccircle cx='583' cy='706' r='1.3' fill='%23fff'/%3E%3Cpath d='M566 679.7L567.2 683.8L571.3 685L567.2 686.1L566 690.1L564.9 686.1L560.9 685L564.9 683.8Z' fill='rgba%28236%2C230%2C255%2C.8%29'/%3E%3Ccircle cx='566' cy='685' r='1.3' fill='%23fff'/%3E%3Cpath d='M520 369.8L521.3 373.1L524.7 374L521.3 375.0L520 378.3L519.5 375.0L516.1 374L519.5 373.1Z' fill='rgba%28236%2C230%2C255%2C.8%29'/%3E%3Ccircle cx='520' cy='374' r='1.3' fill='%23fff'/%3E%3Cpath d='M510 91.8L511.1 95.3L514.6 96L511.1 97.3L510 100.9L509.1 97.3L505.5 96L509.1 95.3Z' fill='rgba%28236%2C230%2C255%2C.8%29'/%3E%3Ccircle cx='510' cy='96' r='1.3' fill='%23fff'/%3E%3Cpath d='M630 571.2L631.4 575.1L635.3 576L631.4 577.4L630 581.3L629.1 577.4L625.2 576L629.1 575.1Z' fill='rgba%28236%2C230%2C255%2C.8%29'/%3E%3Ccircle cx='630' cy='576' r='1.3' fill='%23fff'/%3E%3Cpath d='M215 345.8L216.1 349.4L219.7 350L216.1 351.4L215 355.0L214.0 351.4L210.4 350L214.0 349.4Z' fill='rgba%28236%2C230%2C255%2C.8%29'/%3E%3Ccircle cx='215' cy='350' r='1.3' fill='%23fff'/%3E%3C/svg%3E"); } :root[data-theme="dark"] body{ background: linear-gradient(115deg, transparent 30%, rgba(170,150,255,.08) 42%, rgba(215,195,255,.13) 50%, rgba(170,150,255,.08) 58%, transparent 70%), radial-gradient(140% 60% at 50% 115%, rgba(110,64,190,.6), transparent 62%), linear-gradient(180deg,#000 0%,#05040d 28%,#0f0a22 62%,#1c1238 100%); background-attachment:fixed; } :root[data-theme="dark"] body::after{ content:""; position:fixed; z-index:-1; pointer-events:none; top:12vh; left:62vw; width:160px; height:1.5px; border-radius:2px; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85)); transform:rotate(-24deg); opacity:0; animation:gt-meteor 14s ease-in 3s infinite; } @keyframes gt-meteor{ 0%,88%{ opacity:0; transform:translate(0,0) rotate(-24deg); } 90%{ opacity:1; } 97%{ opacity:0; transform:translate(-340px,150px) rotate(-24deg); } 100%{ opacity:0; } } @media (prefers-reduced-motion:reduce){ :root[data-theme="dark"] body::after{ animation:none; opacity:0; } } /* ══ 초안 3 확정: 모든 페이지를 같은 밤하늘 톤으로 (페이지별 색 차이 없앰) ══ */ html[data-page]{ --t1:#3d3f8f; --t2:#5a4a8e; --t3:#2f6a76; --g-head:linear-gradient(100deg,#2b2d72 0%,#4c3f86 100%); } :root[data-theme="dark"][data-page]{ --t1:#6d70f0; --t2:#a77cf0; --t3:#4cc0c8; --g-head:linear-gradient(100deg,#e6e4ff 0%,#b9b1ee 100%); } /* ══ 잔잔한 밤하늘 (상협님 2026-10-08): 깜빡임·색 변화 없앰, 가장 어두운 밤하늘로 고정, 별은 천천히 흐르고 유성우가 가끔 떨어짐 ══ */ :root[data-theme="dark"] body{ background:linear-gradient(180deg,#000 0%,#030208 60%,#07051a 100%) fixed; } :root[data-theme="dark"] body::after{ content:none; } html::before{ animation:gt-pa 220s linear infinite; } html::after{ animation:gt-pb 300s linear infinite; } body::before{ opacity:.9; animation:gt-pc 420s linear infinite; } /* 다크에서 이 층이 보라 덩어리(예전 초안 규칙)로 덮여 화면 전체 색이 천천히 바뀌어 보였음 → 별 층으로 되돌림 */ :root[data-theme="dark"] body::before{ background:var(--pt-c); opacity:.9; } .gt-meteors{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; } :root:not([data-theme="dark"]) .gt-meteors{ display:none; } .gt-meteors i{ position:absolute; width:150px; height:1.5px; border-radius:2px; opacity:0; background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(200,190,255,.35) 30%,rgba(255,255,255,0)); animation:gt-shower 12s linear infinite; } .gt-meteors i:nth-child(1){ top:6%; left:78%; animation-duration:11s; animation-delay:1s; } .gt-meteors i:nth-child(2){ top:14%; left:52%; animation-duration:14s; animation-delay:4s; } .gt-meteors i:nth-child(3){ top:3%; left:30%; animation-duration:17s; animation-delay:8s; } .gt-meteors i:nth-child(4){ top:22%; left:92%; animation-duration:13s; animation-delay:6.5s; } .gt-meteors i:nth-child(5){ top:10%; left:66%; animation-duration:19s; animation-delay:11s; } .gt-meteors i:nth-child(6){ top:30%; left:44%; animation-duration:16s; animation-delay:2.5s; } @keyframes gt-shower{ 0%{ opacity:0; transform:rotate(-32deg) translateX(0); } 1.5%{ opacity:1; } 9%{ opacity:0; transform:rotate(-32deg) translateX(-460px); } 100%{ opacity:0; transform:rotate(-32deg) translateX(-460px); } } @media (prefers-reduced-motion:reduce){ .gt-meteors{ display:none; } html::before,html::after,body::before{ animation:none !important; } } @media print{ .gt-meteors{ display:none; } } /* ══ 다듬기 (2026-10-08): 작은 제목은 단색, 강조 문장은 형광펜 띠 대신 얇은 밑줄, 별은 글자 뒤에서 한 단계 낮게 ══ */ .h-m,.blk-h,.card h2,.pr h3,.svc-tile:not(.feat) h3{ background:none !important; color:var(--text) !important; -webkit-text-fill-color:currentColor !important; } mark.mk-hl,:root[data-theme="dark"] mark.mk-hl,.inv mark.mk-hl{ background:none; padding:0; border-radius:0; color:var(--text); text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--t2) 70%,transparent); text-decoration-thickness:2px; text-underline-offset:.28em; } :root[data-theme="dark"] mark.mk-hl{ color:#fff; } :root[data-theme="dark"] html::after{ opacity:.75; } /* ══ 매끄럽게 (2026-10-08): 구역 경계선·띠를 끝에서 흐리게, 제목 줄바꿈 균형, 열고 닫힘을 같은 부드러운 곡선으로 ══ */ :root{ --ease-soft:cubic-bezier(.22,.8,.24,1); } :root[data-theme="dark"] .sec.inv{ border:0; position:relative; } :root[data-theme="dark"] .sec.inv::before,:root[data-theme="dark"] .sec.inv::after{ content:""; position:absolute; left:0; right:0; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--line-soft) 25%,var(--line-soft) 75%,transparent); } :root[data-theme="dark"] .sec.inv::before{ top:0; } :root[data-theme="dark"] .sec.inv::after{ bottom:0; } :root:not([data-theme="dark"]) .sec.alt{ background:linear-gradient(180deg,transparent,var(--bg-alt) 90px,var(--bg-alt) calc(100% - 90px),transparent); } h1,h2,h3,.h-xl,.h-l,.h-m{ text-wrap:balance; } p,li,.sub{ text-wrap:pretty; } .qa-a{ transition:grid-template-rows .38s var(--ease-soft), padding-bottom .38s var(--ease-soft); } .qa-a > div{ opacity:0; transition:opacity .25s var(--ease-soft); } .qa-item.open .qa-a > div{ opacity:1; transition-delay:.06s; } .qa-btn svg{ transition:transform .32s var(--ease-soft); } .seq{ transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft); } @media (prefers-reduced-motion:reduce){ .qa-a,.qa-a > div,.qa-btn svg,.seq{ transition:none; } } @media (max-width:440px){ .h-l{ font-size:clamp(25px,7.2vw,32px); line-height:1.18; } } /* 좁은 화면에서 두 줄 제목이 한 단어만 넘어가지 않게 */ /* ══ UI 점검 (2026-10-08): 밝은 모드 어두운 띠 안 강조 글자 복구, 휴대폰에서 작은 링크 누르기 쉽게(세로 44px 근처) ══ */ .inv mark.mk-hl{ color:var(--inv-text); } @media (max-width:640px){ .nav-login{ padding:12px 6px; } .legal-links a,#contact-list a{ display:inline-block; padding:10px 0; } }