/* Reversible presentation layer. Classic keeps the original skin and character. */ html[data-bakumi="neon"]{ --navy:#1556a4;--navy-2:#256bd0;--link:#175aa5;--blue:#1556a4;--blue-2:#256bd0; --ground:#f5f8fc;--surface:#fff;--sunk:#eaf0f8;--ink:#14263e;--muted:#52657c;--faint:#6a7d92; --line:#d7e2ef;--accent:#1761b8;--accent-ink:#fff;--accent-soft:#e6f1ff;--orange-edge:#1556a4; --hanji:none;--display:'IBM Plex Sans KR',system-ui,sans-serif;--gold:#38bdf8; --paper-shadow:0 1px 2px #10253c05,0 12px 32px #10253c08; --neo-stroke:#164d87;--neo-fill:#f7fbff;--neo-glow:drop-shadow(0 0 5px #3b9aff26); --saekdong:linear-gradient(90deg,#10253f,#2787c7,#87d7f5,#2787c7,#10253f); } html[data-bakumi="neon"][data-theme="dark"]{ --navy:#a5d7ff;--navy-2:#71bcfa;--link:#91cfff;--blue:#79c7ff;--blue-2:#9cd8ff; --ground:#090e16;--surface:#111b2a;--sunk:#0e1623;--ink:#eaf2fc;--muted:#a0afc2;--faint:#788ca5; --line:#26374c;--accent:#93dcff;--accent-ink:#08243b;--accent-soft:#142c43;--orange-edge:#459dd0; --paper-shadow:0 12px 36px #0003;--neo-stroke:#e8f8ff;--neo-fill:#0d192b; --neo-glow:drop-shadow(0 0 3px #37bfff99) drop-shadow(0 0 12px #147dff55); } html[data-bakumi="neon"] body{background:var(--ground)!important;color:var(--ink)} html[data-bakumi="neon"] :is(.hero,.auth-stage){background:transparent!important} html[data-bakumi="neon"] :is(.top,body[data-hero] .top){background:color-mix(in srgb,var(--ground) 90%,transparent)!important;border-color:var(--line)} html[data-bakumi="neon"] .top::before{height:1px;background:linear-gradient(90deg,transparent,#4a9dda66,transparent)} html[data-bakumi="neon"] .brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink)!important;letter-spacing:-.035em;font-family:var(--display)} .brand .neon-brand{display:none;width:29px;height:31px;object-fit:contain} .brand-neon{display:none} html[data-bakumi="neon"] .brand-classic{display:none} html[data-bakumi="neon"] .brand-neon{display:inline-block;box-shadow:none!important} html[data-bakumi="neon"][data-theme="dark"] .brand-neon{filter:brightness(0) invert(1)} html[data-bakumi="neon"] .brand .neon-brand{display:block} html[data-bakumi="neon"][data-theme="dark"] :is(.brand .neon-brand,img.bk-mini,img.lm-bk){filter:brightness(0) invert(1) drop-shadow(0 0 4px #2aaaff44)} html[data-bakumi="neon"] .home-hero{background:radial-gradient(ellipse 55% 430px at 50% 235px,#46a5f511,transparent 85%)!important} html[data-bakumi="neon"] .home-hero::before{background:radial-gradient(ellipse 38% 290px at 50% 240px,#147dff12,transparent 90%)!important;opacity:1} html[data-bakumi="neon"] :is(.bk-deco,.bk-chip,.bk-swoosh,.bk-rings,.bk-disc,.bk-cloud,.bk-spark,.hero-bg::after){display:none!important} html[data-bakumi="neon"] :is(.hero h1,.auth h1,.plansec h2,.article h2,.cat-head h2){font-family:var(--display);letter-spacing:-.035em} html[data-bakumi="neon"] body[data-home] .home-hero .drop:not(.quick-active){background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:26px;box-shadow:0 16px 60px #0c213512!important;backdrop-filter:none!important} html[data-bakumi="neon"][data-theme="dark"] body[data-home] .home-hero .drop:not(.quick-active){background:linear-gradient(145deg,#142033,#0f1724)!important;box-shadow:0 20px 70px #0004,0 1px 0 #ffffff08 inset!important} html[data-bakumi="neon"] body[data-home] .home-hero .drop:not(.quick-active):is(:hover,.over){border-color:#58a6d9!important;box-shadow:0 0 0 4px #3aacf90b,0 16px 60px #0c213512!important} html[data-bakumi="neon"] .drop-t strong{font-family:var(--display)!important;font-weight:700} html[data-bakumi="neon"] :is(.btn.primary,.nav a.cta,.drop-btn,.home-hero .drop-btn){background:var(--accent)!important;color:var(--accent-ink)!important;border:1px solid var(--orange-edge)!important;box-shadow:0 2px 12px #2385d312!important} html[data-bakumi="neon"] .btn.primary:hover{filter:brightness(1.06)} html[data-bakumi="neon"] #limitPlans.btn.primary{color:var(--accent-ink)!important} html[data-bakumi="neon"] :is(.rcard.on,.pills a[aria-current="page"]){border-color:var(--accent)} html[data-bakumi="neon"] .rcard.on{box-shadow:0 0 0 1px #399ee92b} html[data-bakumi="neon"] .home-tabs button[aria-selected="true"]{background:var(--ink);color:var(--ground)} html[data-bakumi="neon"] .hero .bakumi-say{background:var(--surface)!important;color:var(--muted)!important;border:1px solid var(--line)!important;box-shadow:0 4px 18px #0000000a!important;font-family:var(--display)} html[data-bakumi="neon"] .visitors b{color:var(--ink)!important} html[data-bakumi="neon"] :is(.cat,.cat-hwp,.cat-pdf,.cat-word,.cat-img){--cat:var(--navy)!important;--cat-soft:var(--accent-soft)!important;--cat-ink:var(--ink)!important;--cat-solid:var(--surface)!important;--cat-on:var(--ink)!important} html[data-bakumi="neon"] .bigcat{background:var(--surface)!important;border-color:var(--line)!important;box-shadow:none!important} html[data-bakumi="neon"] .bigcat .bigcat-top{background:var(--surface)!important;border-bottom:1px solid var(--line)!important;color:var(--ink)!important} html[data-bakumi="neon"] .bigcat .bigcat-ic{background:var(--accent-soft)!important;color:var(--navy)!important} html[data-bakumi="neon"] :is(.bigcat-tt,.bigcat-tt b,.bigcat-tt small,.cat-img .bigcat-tt b,.cat-img .bigcat-tt small){color:var(--ink)!important} html[data-bakumi="neon"] .cat .trow:hover{background:var(--accent-soft)!important} html[data-bakumi="neon"] :is(.new-badge,.trow em,.tile em,.cat em){background:#FF8800!important;color:#111827!important;font-size:9.5px!important;font-weight:800!important;line-height:1!important;letter-spacing:.04em!important;padding:3px 6.5px!important;border:0!important;border-radius:999px!important;box-shadow:none!important} html[data-bakumi="neon"] .quick-wheel.is-open .quick-wheel-svg path.is-active{fill:var(--accent);stroke:var(--accent)} html[data-bakumi="neon"] .quick-option.is-active{color:var(--accent-ink)!important} html[data-bakumi="neon"] #quota.qc-empty a{background:var(--accent);color:var(--accent-ink)!important} /* The live mascot: BAKUMI / NEON MINIMAL character sheet (same drawing and states as the desktop/mobile app). */ .bk-neon{display:none} html:not([data-bakumi="neon"]) .bk-neon{display:none!important} html[data-bakumi="neon"] .bk-body{animation:none!important;transition:transform .24s cubic-bezier(.2,.8,.3,1);isolation:isolate} /* the hero keeps its paws on the box; moods move only the drawing inside */ html[data-bakumi="neon"] .bakumi .bk-body{transform:none!important} html[data-bakumi="neon"] .bk-body>img{visibility:hidden!important;filter:none!important} html[data-bakumi="neon"] .bk-body>:is(.bk-face,.bk-alt){display:none!important} html[data-bakumi="neon"] .bk-body>.bk-neon{display:block!important;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;--nb-ox:50%;--nb-oy:94.5%;--nb-ly:94.5%} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk){color:var(--nb-ink)} html[data-bakumi="neon"]{--nb-ink:#EEF7FF;--nb-fill:#040814;--nb-core:170,215,255;--nb-rgb:22,119,255;--nb-rgb2:56,189,248;--nb-rgb3:30,144,255} html[data-bakumi="neon"][data-theme="dark"]{--nb-ink:#EEF7FF;--nb-fill:#040814;--nb-core:170,215,255;--nb-rgb:22,119,255;--nb-rgb2:56,189,248;--nb-rgb3:30,144,255} /* the hero's classic tricks: smile / poke faces / puzzled tilt / arrival */ html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is(.poke-1,.poke-3) .nb-eyes{opacity:0} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is(.poke-1,.poke-3) .nb-happy{opacity:1} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood="wave"] .nb-eyes{opacity:0} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood="wave"] .nb-happy{opacity:1} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood="wave"] .nb-check{animation:nbPop .4s cubic-bezier(.2,1.3,.4,1) forwards} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood="wave"] .nb-spark{animation:nbTick .35s .15s cubic-bezier(.2,1.4,.4,1) forwards} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood="pop"] .nb-svg{animation:nbGather .52s cubic-bezier(.2,.9,.25,1.15) both} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood="pop"] .nb-dot{animation:nbDot .5s ease-out} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood="hide"] .bk-neon{opacity:0} html[data-bakumi="neon"] :is(.bk-crumb,.bk-nom){display:none!important} html[data-bakumi="neon"] .bk-box-shake{animation:none!important} html[data-bakumi="neon"] .bk-flyer svg path{fill:var(--nb-fill)!important;stroke:var(--nb-ink)!important} html[data-bakumi="neon"][data-theme="dark"] .bk-flyer{filter:drop-shadow(0 0 2px #CFE9FF) drop-shadow(0 0 8px #1677FF)} @media(prefers-reduced-motion:reduce){html[data-bakumi="neon"] .bk-body,html[data-bakumi="neon"] .bk-neon *{animation:none!important;transition:none!important}} /* ---------- Bakumi neon symbol (BAKUMI / NEON MINIMAL sheet) ---------- Two stacked layers: .nb-l1 = the body lines with the heavy glow (static, cached by the compositor), .nb-l2 = face and effects with a light glow. Moods only change transforms/opacity, never the heavy filter. */ html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk){--nb-sw:23;--nb-g:.42;--nb-tilt:-5deg;--nb-a:.9} .nb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform-origin:var(--nb-ox,50%) var(--nb-oy,92%);will-change:transform;transition:transform .32s cubic-bezier(.2,.9,.25,1.12)} .nb-l1{filter:drop-shadow(0 0 calc(3px * var(--nb-g)) rgb(var(--nb-rgb3))) drop-shadow(0 0 calc(9px * var(--nb-g)) rgb(var(--nb-rgb))) drop-shadow(0 0 calc(26px * var(--nb-g)) rgba(var(--nb-rgb),.9))} .nb-l2{filter:drop-shadow(0 0 calc(4px * var(--nb-g)) rgba(var(--nb-rgb3),.9))} .nb-body{fill:var(--nb-fill)} .nb-line{fill:none;stroke:currentColor;stroke-width:var(--nb-sw);stroke-linejoin:round;stroke-linecap:round} .nb-halo{fill:none;stroke-linecap:round;stroke-linejoin:round} .nb-halo.h1{stroke:rgb(var(--nb-rgb3));stroke-width:calc(var(--nb-sw) * 1.8);opacity:.38} .nb-halo.h2{stroke:rgb(var(--nb-rgb));stroke-width:calc(var(--nb-sw) * 3);opacity:.16} .nb-low{fill:none;stroke:rgb(var(--nb-rgb));stroke-opacity:.25;stroke-width:calc(var(--nb-sw) * .6);stroke-linecap:round} .nb-earin{fill:rgb(var(--nb-rgb2));opacity:.16} .nb-eyes{fill:currentColor;transform-box:fill-box;transform-origin:center;transition:transform .09s ease-out,opacity .15s} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk) .bk-iris{transition:transform .12s ease-out;scale:none!important;transform-box:view-box!important} .nb-happy,.nb-squint{fill:none;stroke:currentColor;stroke-width:calc(var(--nb-sw) * 1.05);stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .1s} .nb-mouth{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);opacity:0;transition:transform .14s cubic-bezier(.2,.9,.3,1.25),opacity .08s} .nb-m{fill:var(--nb-fill);stroke:currentColor;stroke-width:calc(var(--nb-sw) * .75);stroke-linejoin:round} .nb-fang{fill:currentColor} .nb-doc,.nb-check{fill:var(--nb-fill);stroke:currentColor;stroke-width:calc(var(--nb-sw) * .42);stroke-linejoin:round;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:50% 100%} .nb-check{transform-origin:center} .nb-q{fill:none;stroke:#F5B53D;stroke-width:calc(var(--nb-sw) * 1.1);stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center} .nb-ticks,.nb-spark{fill:none;stroke:rgb(var(--nb-rgb2));stroke-width:calc(var(--nb-sw) * .75);stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center} .nb-dot{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center} .nb-ripple{fill:none;stroke:rgb(var(--nb-rgb2));stroke-width:calc(var(--nb-sw) * .8);stroke-linecap:round;opacity:0;transform-box:view-box;transform-origin:430px 470px} /* the ledge the paws rest on: one blue neon line, brightest in the middle, fading out toward both ends */ .nb-ledge{position:absolute;left:-6%;right:-6%;top:var(--nb-ly,91.7%);height:calc(var(--nb-g) * 44px + 8px);transform:translateY(-50%);pointer-events:none; background:radial-gradient(50% 50% at 50% 50%,rgba(var(--nb-core),1) 0,rgba(var(--nb-rgb3),1) 10%,rgba(var(--nb-rgb),.6) 28%,rgba(var(--nb-rgb),.18) 52%,rgba(var(--nb-rgb),0) 72%)} .nb-ledge::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:3px;margin-top:-1.5px;border-radius:3px; background:linear-gradient(90deg,rgba(var(--nb-rgb),0),rgba(var(--nb-rgb3),.85) 30%,rgba(var(--nb-core),1) 50%,rgba(var(--nb-rgb3),.85) 70%,rgba(var(--nb-rgb),0))} /* working: the light breathes on its own compositor layer, the drawing itself stays still */ .nb-pulse{position:absolute;left:8%;right:8%;top:6%;bottom:6%;border-radius:50%;pointer-events:none;opacity:0;will-change:opacity; background:radial-gradient(closest-side,rgba(var(--nb-rgb),.42),rgba(var(--nb-rgb),.12) 55%,rgba(var(--nb-rgb),0))} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk).blink .nb-eyes{transform:scaleY(.12)} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk).smile .nb-eyes{opacity:0}html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk).smile .nb-happy{opacity:1} /* ---------- moods ---------- */ html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood=sleepy] .nb-eyes{transform:scaleY(.3)} /* 100ms: a file is coming - lean toward it, mouth with fangs, speed ticks */ html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=hungry],[data-mood=windup]) .nb-svg{transform:rotate(var(--nb-tilt)) scale(1.03)} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=hungry],[data-mood=windup]) .nb-mouth{transform:scaleY(1);opacity:1} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=hungry],[data-mood=windup]) .nb-ticks{animation:nbTick .3s cubic-bezier(.2,1.4,.4,1) forwards} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=hungry],[data-mood=windup]) .nb-pulse{opacity:.7;transition:opacity .2s} /* 220ms: in one bite - eyes squeeze shut, the file goes in */ html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood=chomp] .nb-eyes{opacity:0} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood=chomp] .nb-squint{opacity:1} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood=chomp] .nb-doc{animation:nbDocIn .22s cubic-bezier(.3,.9,.3,1) forwards} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood=chomp] .nb-svg{animation:nbNom .26s cubic-bezier(.2,.9,.3,1.25)} /* 360ms -> working: short ripple, then the file is held and read */ html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood=chew] .nb-doc{opacity:1} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood=chew] .nb-ripple{animation:nbRipple .5s ease-out} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood=chew] .nb-pulse{animation:nbPulse 1.7s .3s ease-in-out infinite} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk)[data-mood=chew] .nb-eyes{animation:nbRead 1.7s .4s ease-in-out infinite} /* 520ms: done - eye-smile, the finished file with a check and a sparkle */ html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=happy],[data-mood=spit],[data-mood=full],[data-mood=wave]) .nb-eyes{opacity:0} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=happy],[data-mood=spit],[data-mood=full],[data-mood=wave]) .nb-happy{opacity:1} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=happy],[data-mood=wave]) .nb-check{animation:nbPop .4s cubic-bezier(.2,1.3,.4,1) forwards} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=happy],[data-mood=wave]) .nb-spark{animation:nbTick .35s .15s cubic-bezier(.2,1.4,.4,1) forwards} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=happy],[data-mood=wave]) .nb-svg{animation:nbSettle .45s cubic-bezier(.2,1.2,.4,1)} /* trouble: small head tilt + "?" */ html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=error],[data-mood=puzzled],[data-mood=yuck]){--nb-rgb:245,158,11;--nb-rgb2:252,211,77;--nb-rgb3:251,191,36} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=error],[data-mood=puzzled],[data-mood=yuck]) .nb-svg{transform:rotate(8deg)} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=error],[data-mood=puzzled],[data-mood=yuck]) .nb-eyes{transform:scale(.9,.8)} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=error],[data-mood=puzzled],[data-mood=yuck]) .nb-q{animation:nbPop .4s cubic-bezier(.2,1.3,.4,1) forwards} /* ---------- arrival: a point of light, a short trail, settles with a tiny bounce (~0.5s) ---------- */ html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk).nb-in .nb-dot{animation:nbDot .5s ease-out} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk).nb-in .nb-svg{animation:nbGather .52s cubic-bezier(.2,.9,.25,1.15) both} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk).nb-in .nb-ledge{animation:nbLine .5s ease-out both} @keyframes nbDot{0%{opacity:0;transform:scale(.3)}18%{opacity:1;transform:scale(1.3)}55%{opacity:.6;transform:scale(.6)}100%{opacity:0;transform:scale(0)}} @keyframes nbGather{0%{opacity:0;transform:scale(.6)}35%{opacity:.5}70%{opacity:1;transform:scale(1.035)}100%{opacity:1;transform:scale(1)}} @keyframes nbLine{0%{opacity:0;transform:translateY(-50%) scaleX(.1)}100%{opacity:1;transform:translateY(-50%) scaleX(1)}} @keyframes nbDocIn{0%{opacity:0;transform:translate(-260px,-40px) scale(.7) rotate(-18deg)}100%{opacity:1;transform:none}} @keyframes nbNom{0%{transform:rotate(var(--nb-tilt)) scale(1.05)}45%{transform:scale(.97,1.03)}100%{transform:scale(1)}} @keyframes nbRipple{0%{opacity:.95;transform:scale(.88)}100%{opacity:0;transform:scale(1.12)}} @keyframes nbPulse{0%,100%{opacity:.25}50%{opacity:.85}} @keyframes nbRead{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}} @keyframes nbPop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}} @keyframes nbSettle{0%{transform:translateY(-3%) scale(1.03)}100%{transform:none}} @keyframes nbTick{0%{opacity:0;transform:scale(.3) translate(10px,10px)}100%{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk) :is(.nb-svg,.nb-ripple,.nb-dot,.nb-pulse,.nb-ledge,.nb-eyes){animation:none!important}} /* ---------- the flying file: light trail + afterimages + bite puff (cheap: one glow on the leading copy only) ---------- */ .nfx-layer{position:fixed;inset:0;pointer-events:none;z-index:2147483000;overflow:hidden;contain:strict} .nfx-doc{position:absolute;left:0;top:0;color:#F5F8FF;will-change:transform,opacity} .nfx-doc:not(.ghost){filter:drop-shadow(0 0 6px #2E8BFF)} .nfx-doc svg{display:block;width:100%;height:auto;overflow:visible} .nfx-doc path{fill:#060B16;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .nfx-doc path+path{fill:none} .nfx-doc.ghost{color:#5FB4FF;opacity:calc(.5 - var(--k) * .13)} .nfx-doc.ghost path{fill:rgba(22,119,255,.18)} .nfx-streak{position:absolute;display:block;height:12px;margin-top:-6px;transform-origin:0 50%;border-radius:99px;will-change:transform,opacity; background:radial-gradient(60% 50% at 100% 50%,rgba(170,215,255,.95),rgba(30,144,255,.6) 40%,rgba(22,119,255,0) 100%)} .nfx-puff{position:absolute;display:block;border-radius:50%;will-change:transform,opacity;background:radial-gradient(circle,rgba(80,160,255,.7),rgba(22,119,255,.28) 45%,transparent 70%)} .nfx-ring{position:absolute;display:block;width:70px;height:70px;border-radius:50%;border:3px solid rgba(120,200,255,.9);will-change:transform,opacity} html[data-bakumi="neon"] .bakumi{--nb-g:.5} html[data-bakumi="neon"] .bakumi .bk-neon{will-change:translate} html[data-bakumi="neon"] .bk-pop{--nb-g:.55} .bakumi-style-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:72px;height:34px;padding:6px 9px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;cursor:pointer;flex-shrink:0;white-space:nowrap} .bakumi-style-toggle span{display:block} .bakumi-style-toggle:hover{background:var(--surface)} .bakumi-style-toggle:focus-visible{outline:2px solid var(--link);outline-offset:3px} @media(max-width:700px){.nav{gap:6px}.brand .neon-brand{width:24px;height:26px}} @media(max-width:640px){html[data-bakumi] .top .container{column-gap:10px}html[data-bakumi] .top .brand{font-size:20px;gap:6px;flex-shrink:0}.top .theme-toggle{padding:7px}.top .theme-toggle .theme-lbl{display:none}.top .nav a.cta{padding:7px 12px;font-size:12px}.top .nav{gap:5px}.top .lang summary{padding-inline:6px;font-size:12px}} @media(prefers-reduced-motion:reduce){html[data-bakumi="neon"] .bk-body,html[data-bakumi="neon"] .bk-neon *{animation:none!important;transition:none!important}html[data-bakumi="neon"] .bk-neon .neo-wave{opacity:0!important}} /* The hero's ledge lives on the file box's top edge itself (the box sits above Bakumi's layer): one blue neon line, fading out to both ends */ html[data-bakumi="neon"] .bakumi .nb-ledge{display:none} html[data-bakumi="neon"] body[data-home] .home-hero #drop{overflow:visible} html[data-bakumi="neon"] body[data-home] .home-hero #drop::after{content:"";position:absolute;left:50%;top:0;width:min(520px,90%);height:34px;transform:translate(-50%,-50%);pointer-events:none;z-index:4; background:radial-gradient(50% 50% at 50% 50%,rgba(170,215,255,1) 0,rgba(30,144,255,1) 9%,rgba(22,119,255,.6) 26%,rgba(22,119,255,.18) 50%,rgba(22,119,255,0) 72%)} html[data-bakumi="neon"] body[data-home] .home-hero #drop::before{content:"";position:absolute;left:50%;top:-1.5px;width:min(460px,80%);height:3px;transform:translateX(-50%);border-radius:3px;pointer-events:none;z-index:5; background:linear-gradient(90deg,rgba(22,119,255,0),rgba(30,144,255,.85) 30%,rgba(170,215,255,1) 50%,rgba(30,144,255,.85) 70%,rgba(22,119,255,0))} /* ===== other services' prices: slow marquee under the plan cards, fading out at both ends ===== */ .rivals{margin:34px auto 6px;max-width:1080px;text-align:center} .rivals-title{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--muted)} .rivals-track{position:relative;display:flex;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)} .rivals-run{flex:none;display:flex;gap:12px;margin:0;padding:4px 6px;list-style:none;animation:rivalsRun 26s linear infinite reverse;will-change:transform} .rivals-run li{display:flex;align-items:baseline;gap:10px;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);white-space:nowrap;font-size:14px} .rivals-run b{color:var(--ink);font-weight:700} .rivals-run span{color:var(--muted);font-size:12.5px} .rivals-run s{color:var(--ink);font-weight:800;text-decoration:line-through;text-decoration-color:rgba(229,72,77,.75);text-decoration-thickness:2px} .rivals-sum{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;margin:18px 0 6px;font-size:15px} .rivals-sum span{color:var(--muted);text-decoration:none} .rivals-sum strong{padding:9px 16px;border-radius:999px;color:#fff;background:linear-gradient(90deg,#1663d6,#1a8cff);box-shadow:0 0 0 1px rgba(80,160,255,.35),0 8px 26px -8px rgba(22,119,255,.75);font-weight:800} .rivals-note{margin:6px 0 0;font-size:11.5px;color:var(--faint,var(--muted))} @keyframes rivalsRun{to{transform:translateX(calc(-100% - 12px))}} @media(prefers-reduced-motion:reduce){.rivals-run{animation:none}.rivals-run[aria-hidden]{display:none}.rivals-track{justify-content:center;flex-wrap:wrap}.rivals-run{flex-wrap:wrap;justify-content:center}} @media(max-width:640px){.rivals-run li{padding:9px 14px;font-size:13px}.rivals-sum{font-size:13.5px}.rivals-sum strong{font-size:13px}} /* ===== first arrival (home hero): two light crescents meet → rings fold in → Bakumi glides in with afterimages → the file box opens from the ledge ===== */ html.bk-play[data-bakumi="neon"] body[data-home] .home-hero .bakumi .bk-neon{animation:bkIntroIn .62s cubic-bezier(.16,1,.3,1) .16s backwards} html.bk-play[data-bakumi="neon"] body[data-home] .home-hero .bakumi .bk-body{position:relative} html.bk-play[data-bakumi="neon"] body[data-home] .home-hero .bakumi .bk-body::before,html.bk-play[data-bakumi="neon"] body[data-home] .home-hero .bakumi .bk-body::after{content:"";position:absolute;z-index:2;left:50%;top:58%;pointer-events:none;opacity:0;will-change:transform,opacity} /* image 1: two crescents of light, side by side where the eyes will be */ html.bk-play[data-bakumi="neon"] body[data-home] .home-hero .bakumi .bk-body::before{width:84%;height:46%;margin:-23% 0 0 -42%;border-radius:50%;filter:drop-shadow(0 0 10px rgba(30,144,255,.9)); background:radial-gradient(closest-side at 30% 50%,transparent 56%,rgba(235,245,255,1) 64%,rgba(60,160,255,.9) 76%,rgba(22,119,255,.35) 88%,transparent 98%),radial-gradient(closest-side at 70% 50%,transparent 56%,rgba(235,245,255,1) 64%,rgba(60,160,255,.9) 76%,rgba(22,119,255,.35) 88%,transparent 98%); background-size:52% 100%,52% 100%;background-position:0 0,100% 0;background-repeat:no-repeat; animation:bkCrescent .46s cubic-bezier(.2,.8,.2,1) both} /* image 3: concentric rings that fold inward into the figure */ html.bk-play[data-bakumi="neon"] body[data-home] .home-hero .bakumi .bk-body::after{width:150%;aspect-ratio:1;margin:-75% 0 0 -75%;border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 9px,rgba(170,215,255,.85) 10px,rgba(30,144,255,.45) 12px,transparent 14px); -webkit-mask:radial-gradient(circle,transparent 30%,#000 46%,#000 66%,transparent 71%);mask:radial-gradient(circle,transparent 30%,#000 46%,#000 66%,transparent 71%); animation:bkRings .58s cubic-bezier(.3,0,.2,1) .1s both} /* image 2: afterimages trailing the glide (added by neon.js, removed after) */ .nb-ghost{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;color:#5FB4FF} .nb-ghost .nb-body,.nb-ghost .nb-earin,.nb-ghost .nb-low{display:none} .nb-ghost .nb-line{stroke:#3B8DFF} .nb-ghost .nb-halo{opacity:.25} /* the hero ignores the generic "pop" arrival; the intro above replaces it */ html[data-bakumi="neon"] body[data-home] .home-hero .bakumi[data-mood="pop"] .nb-svg{animation:none!important} html[data-bakumi="neon"] body[data-home] .home-hero .bakumi[data-mood="hide"] .bk-neon{opacity:1} /* file box: the glowing ledge draws out from the middle, then the box drops open */ html.bk-play[data-bakumi="neon"] body[data-home] .home-hero #drop{animation:bkBoxOpen .44s cubic-bezier(.16,1,.3,1) .5s backwards} html.bk-play[data-bakumi="neon"] body[data-home] .home-hero #drop>*:not(input):not(.bakumi){animation:bkBoxIn .32s ease-out .72s backwards} html.bk-play[data-bakumi="neon"] body[data-home] .home-hero #drop::before{animation:bkLedgeX .4s cubic-bezier(.16,1,.3,1) .4s backwards} html.bk-play[data-bakumi="neon"] body[data-home] .home-hero #drop::after{animation:bkLedge .4s cubic-bezier(.16,1,.3,1) .4s backwards} @keyframes bkIntroIn{0%{opacity:0;transform:translateX(-55%) scale(.9)}55%{opacity:1;transform:translateX(2.5%) scale(1.01)}100%{opacity:1;transform:none}} @keyframes bkGhost{0%{opacity:0;transform:translateX(-42%) scale(.9)}30%{opacity:var(--o)}100%{opacity:0;transform:translateX(var(--x)) scale(.98)}} @keyframes bkCrescent{0%{opacity:0;transform:scale(.35,.6)}35%{opacity:1}100%{opacity:0;transform:scale(1.25,1.05)}} @keyframes bkRings{0%{opacity:0;transform:scale(1.35)}30%{opacity:.85}100%{opacity:0;transform:scale(.45)}} @keyframes bkLedge{0%{opacity:0;transform:translate(-50%,-50%) scaleX(0)}100%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}} @keyframes bkBoxOpen{0%{clip-path:inset(-600px -40px 100% -40px);opacity:.7}100%{clip-path:inset(-600px -40px 0 -40px);opacity:1}} @keyframes bkBoxIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){html.bk-play[data-bakumi="neon"] body[data-home] .home-hero .bakumi .bk-neon,html.bk-play[data-bakumi="neon"] body[data-home] .home-hero .bakumi .bk-body::before,html.bk-play[data-bakumi="neon"] body[data-home] .home-hero .bakumi .bk-body::after,html.bk-play[data-bakumi="neon"] body[data-home] .home-hero #drop,html.bk-play[data-bakumi="neon"] body[data-home] .home-hero #drop>*,html.bk-play[data-bakumi="neon"] body[data-home] .home-hero #drop::before,html.bk-play[data-bakumi="neon"] body[data-home] .home-hero #drop::after{animation:none!important}} @keyframes bkLedgeX{0%{opacity:0;transform:translateX(-50%) scaleX(0)}100%{opacity:1;transform:translateX(-50%) scaleX(1)}} /* before the intro plays: nothing shows (a 2.5s safety net reveals everything if the script never runs) */ html.bk-intro:not(.bk-play)[data-bakumi="neon"] body[data-home] .home-hero :is(.bakumi .bk-neon,#drop,.bakumi-say){opacity:0;animation:bkSafety 0s 2.5s forwards} @keyframes bkSafety{to{opacity:1}} html.bk-play[data-bakumi="neon"] body[data-home] .home-hero .bakumi-say{animation:bkBoxIn .3s ease-out .8s backwards} /* Solid blue actions, shared across neon light and dark themes. */ html[data-bakumi="neon"]{--nbtn-solid:#1E86E8;--nbtn-hover:#2B92F0} html[data-bakumi="neon"] :is(.btn.primary,.drop-btn,.home-hero .drop-btn,.nav a.cta,#limitPlans,.qi-cta,.rivals-sum strong){ position:relative;isolation:isolate;border:1px solid var(--nbtn-solid)!important;color:#fff!important;font-weight:800;letter-spacing:-.01em; background:var(--nbtn-solid)!important; box-shadow:0 6px 18px -8px rgba(30,134,232,.35)!important; text-shadow:none;transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,background-color .3s!important} html[data-bakumi="neon"] :is(.btn.primary,.drop-btn,.home-hero .drop-btn,.nav a.cta,#limitPlans,.qi-cta)::after{display:none!important} html[data-bakumi="neon"] :is(.btn.primary,.drop-btn,.home-hero .drop-btn,.nav a.cta,#limitPlans,.qi-cta):hover{transform:translateY(-1px);filter:none; background:var(--nbtn-hover)!important;border-color:var(--nbtn-hover)!important; box-shadow:0 8px 22px -8px rgba(30,134,232,.45)!important} html[data-bakumi="neon"] :is(.btn.primary,.drop-btn,.home-hero .drop-btn,.nav a.cta,#limitPlans,.qi-cta):active{transform:scale(.97)} /* secondary buttons: glass with a thin lit rim */ html[data-bakumi="neon"] :is(.btn:not(.primary),.pill:not(.solid),.lm-btns .btn:not(.primary)){background:rgba(120,170,255,.06)!important;border:1px solid rgba(140,190,255,.28)!important;color:var(--ink)!important; box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 14px -6px rgba(60,150,255,.5)!important;backdrop-filter:blur(8px)} html[data-bakumi="neon"] :is(.btn:not(.primary),.pill:not(.solid)):hover{border-color:rgba(150,210,255,.6)!important;box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 0 20px -4px rgba(60,160,255,.7)!important} html[data-bakumi="neon"] .pill.solid{background:var(--nbtn-solid)!important;color:#fff!important;border:0!important;box-shadow:0 6px 18px -8px rgba(30,134,232,.35)!important} /* quota line: the empty state glows red only on the number; the "more" link is a neon pill */ html[data-bakumi="neon"] #quota.qc-empty{background:rgba(255,80,90,.07)!important;box-shadow:0 0 0 1px rgba(255,110,120,.32) inset,0 0 22px -8px rgba(255,80,90,.5)!important} html[data-bakumi="neon"] #quota.qc-empty a{padding:4px 12px!important;border-radius:999px} /* friend-invite coupon: from orange to Bakumi neon blue */ html[data-bakumi="neon"] .hero #quotaInvite .quota-connector{background:repeating-linear-gradient(to bottom,#3BA0FF 0 3px,transparent 3px 7px)} html[data-bakumi="neon"] .hero #quotaInvite .quota-invite{background:linear-gradient(120deg,rgba(30,110,255,.16),rgba(255,255,255,.03) 70%)!important;border:1px solid rgba(110,180,255,.38)!important;color:var(--ink)!important; box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 14px 34px -14px rgba(30,120,255,.6),0 0 26px -10px rgba(60,170,255,.55)!important;backdrop-filter:blur(10px)} html[data-bakumi="neon"] .hero #quotaInvite .quota-invite:hover{border-color:rgba(140,205,255,.7)!important;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 18px 40px -14px rgba(30,120,255,.75),0 0 34px -8px rgba(70,180,255,.7)!important} html[data-bakumi="neon"] .qi-plus{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 50%),linear-gradient(140deg,#1E6BFF,#38B6FF)!important;box-shadow:0 0 0 1px rgba(170,220,255,.55) inset,0 0 18px -4px rgba(40,150,255,.7)} html[data-bakumi="neon"] .qi-cut{border-left-color:rgba(110,180,255,.4)!important} html[data-bakumi="neon"] .qi-cta{color:#fff!important} html[data-bakumi="neon"] .qi-txt small{opacity:.75} /* invite dialog + plan tiles */ html[data-bakumi="neon"] #limit.lm .lm-tag{background:linear-gradient(100deg,#1E6BFF,#38B6FF)} html[data-bakumi="neon"] #limit.lm .lm-invite{border-color:rgba(110,180,255,.45)!important;background:linear-gradient(150deg,rgba(30,110,255,.14),rgba(255,255,255,.02) 75%)!important} html[data-bakumi="neon"] #limit.lm .lm-rewards span{background:rgba(255,255,255,.04);border-color:rgba(110,180,255,.3);color:var(--muted)} html[data-bakumi="neon"] #limit.lm .lm-rewards b{color:#6CC4FF} html[data-bakumi="neon"] #limit.lm .lm-steps li::before{background:#1E6BFF;color:#fff} html[data-bakumi="neon"] #limit.lm h3{color:var(--ink)} @media(prefers-reduced-motion:reduce){html[data-bakumi="neon"] :is(.btn,.drop-btn,.pill,.qi-cta){transition:none!important}} /* "파일 선택": same shape and size as the classic button, filled solid Pacific blue */ html[data-bakumi="neon"] body .home-hero #drop .drop-btn{background:#1E86E8!important;color:#fff!important;border:1px solid #1E86E8!important;font-weight:600!important;letter-spacing:normal!important;text-shadow:none!important;filter:none; box-shadow:0 8px 22px -6px rgba(30,134,232,.65),0 0 18px -4px rgba(30,134,232,.5)!important} html[data-bakumi="neon"] body .home-hero #drop .drop-btn::after,html[data-bakumi="neon"] body .home-hero #drop .drop-btn::before{display:none} html[data-bakumi="neon"] body .home-hero #drop .drop-btn:hover{background:#2E93F0!important;transform:translateY(-1px);box-shadow:0 10px 26px -6px rgba(30,134,232,.8),0 0 24px -4px rgba(50,150,240,.65)!important} html[data-bakumi="neon"] body .home-hero #drop .drop-btn:active{transform:scale(.97)} /* "더 쓰기": plain bold white text */ html[data-bakumi="neon"] #quota a,html[data-bakumi="neon"] #quota.qc-empty a{background:none!important;box-shadow:none!important;border:0!important;padding:0 2px!important;color:#fff!important;font-weight:800!important;text-decoration:none!important;text-shadow:none!important} html[data-bakumi="neon"] #quota a:hover{text-decoration:underline!important;filter:none} /* ===== neon home background (stars · grid floor · rings · swirling documents) ===== */ html[data-bakumi="neon"] body[data-home] .home-hero{isolation:isolate;overflow:hidden} .nb-bg{display:none} html[data-bakumi="neon"] body[data-home] .home-hero>.nb-bg{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .nb-rings{position:absolute;left:50%;top:36%;width:1500px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 179px,rgba(70,140,255,.14) 180px,transparent 182px); -webkit-mask:radial-gradient(circle,transparent 18%,#000 30%,#000 52%,transparent 70%);mask:radial-gradient(circle,transparent 18%,#000 30%,#000 52%,transparent 70%)} .nb-floor{position:absolute;left:-30%;right:-30%;bottom:-6%;height:46%;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%; background:linear-gradient(rgba(60,130,255,.32) 1px,transparent 1px) 0 0/100% 46px,linear-gradient(90deg,rgba(60,130,255,.32) 1px,transparent 1px) 0 0/62px 100%; -webkit-mask:linear-gradient(to top,#000 10%,transparent 92%);mask:linear-gradient(to top,#000 10%,transparent 92%)} .nb-dotstar{position:absolute;width:3px;height:3px;border-radius:50%;background:#7FC2FF;box-shadow:0 0 6px #3B8DFF;opacity:.55;scale:var(--s);animation:nbTw 5s var(--d) ease-in-out infinite} .nb-spk{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:.8;animation:nbTw 6s var(--d) ease-in-out infinite; background:linear-gradient(90deg,transparent,#9FD2FF 48%,#fff 50%,#9FD2FF 52%,transparent) center/100% 1.5px no-repeat,linear-gradient(transparent,#9FD2FF 48%,#fff 50%,#9FD2FF 52%,transparent) center/1.5px 100% no-repeat;filter:drop-shadow(0 0 4px #3B8DFF)} @keyframes nbTw{0%,100%{opacity:.25}50%{opacity:.9}} .nb-docs{position:absolute;left:50%;top:0;width:1400px;height:640px;margin-left:-700px} .nb-orbit{position:absolute;inset:0;width:100%;height:100%;opacity:0;overflow:visible;transition:opacity .35s ease} .nb-orbit.on{opacity:.95} .nb-orbit.on path{animation:nbFlow 1.2s linear infinite} @keyframes nbFlow{to{stroke-dashoffset:-24}} .nb-orbit path{fill:none;stroke:#4C9BFF;stroke-width:1.8;stroke-dasharray:3 9;stroke-linecap:round;filter:drop-shadow(0 0 3px #1E78FF)} .nb-doc2{position:absolute;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 0 6px rgba(40,140,255,.85)) drop-shadow(0 0 18px rgba(30,110,255,.45))} .nb-doc2{perspective:400px} .nb-card{display:block;transform-style:preserve-3d;will-change:transform} .nb-doc2 svg{display:block;width:100%;height:auto;overflow:visible} .nb-doc2.nb-flash .nb-dp{stroke:#CFEAFF;fill:rgba(40,120,255,.35)} .nb-doc2.nb-flash{filter:drop-shadow(0 0 10px rgba(80,170,255,1)) drop-shadow(0 0 26px rgba(30,110,255,.7))} html[data-bakumi="neon"] .home-hero .bakumi.nb-gulp .nb-svg{animation:nbNom .36s cubic-bezier(.2,.9,.3,1.25)} .nb-dp{fill:rgba(10,24,52,.55);stroke:#5FB0FF;stroke-width:2.2;stroke-linejoin:round} .nb-df{fill:none;stroke:#5FB0FF;stroke-width:2.2;stroke-linejoin:round} .nb-doc2 text{fill:#8FD0FF;font:800 15px/1 'IBM Plex Sans KR',system-ui,sans-serif;letter-spacing:.02em;transition:opacity .2s} @media(max-width:1199px){.nb-docs{display:none}}@media(max-width:999px){.nb-rings{width:900px}} @media(prefers-reduced-motion:reduce){.nb-dotstar,.nb-spk{animation:none}.nb-docs{display:none}} /* plan buttons: solid blue, no gradient */ html[data-bakumi="neon"] .pill.solid{background:#2B7DFF!important} html[data-bakumi="neon"] .pill.solid::after{display:none} html[data-bakumi="neon"] .pill.solid:hover{background:#3A88FF!important} /* "따로 쓰면 월 약 10만 원" bolder */ .rivals-sum span{font-weight:800!important;font-size:17px!important} /* pricing: scrolling to it shows the plans section on its own screen */ body[data-home] #plans{min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center;scroll-margin-top:64px} /* login buttons (header + form submit): solid blue like "파일 선택" */ html[data-bakumi="neon"] :is(.nav a.cta,.btn.primary.block){background:#1E86E8!important;border:1px solid #1E86E8!important;font-weight:700!important;text-shadow:none!important; box-shadow:0 6px 18px -8px rgba(30,134,232,.7)!important;filter:none!important} html[data-bakumi="neon"] :is(.nav a.cta,.btn.primary.block)::after{display:none!important} html[data-bakumi="neon"] :is(.nav a.cta,.btn.primary.block):hover{background:#2B92F0!important;border-color:#2B92F0!important;box-shadow:0 8px 22px -8px rgba(30,134,232,.85)!important} /* ========================================================================== 로그인 버튼 2종 (상단 헤더 로그인 + 로그인 폼 제출 버튼) 단색 블루(#1D74F5) 통일 ========================================================================== */ header a[href*="login"], header button.login-btn, .site-header a[href*="login"], .topbar a[href*="login"], .nav-login-btn, .btn-login, form button[type="submit"].login-submit, .login-card button[type="submit"], .auth-card button[type="submit"], .login-form button[type="submit"], .bk-solid-login-btn { background: #1D74F5 !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: 0 6px 20px rgba(29, 116, 245, 0.35) !important; color: #ffffff !important; border-radius: 999px !important; font-weight: 700 !important; text-shadow: none !important; filter: none !important; transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important; } header a[href*="login"]:hover, header button.login-btn:hover, .site-header a[href*="login"]:hover, .topbar a[href*="login"]:hover, .nav-login-btn:hover, .btn-login:hover, form button[type="submit"].login-submit:hover, .login-card button[type="submit"]:hover, .auth-card button[type="submit"]:hover, .login-form button[type="submit"]:hover, .bk-solid-login-btn:hover { background: #1562D6 !important; background-image: none !important; box-shadow: 0 8px 24px rgba(29, 116, 245, 0.48) !important; transform: translateY(-1px) !important; } /* 버튼 주변에 가상요소(::before, ::after)로 들어가 있던 네온 테두리/하이라이트 완전 제거 */ header a[href*="login"]::before, header a[href*="login"]::after, .btn-login::before, .btn-login::after, .login-card button[type="submit"]::before, .login-card button[type="submit"]::after, .auth-card button[type="submit"]::before, .auth-card button[type="submit"]::after, .bk-solid-login-btn::before, .bk-solid-login-btn::after { display: none !important; content: none !important; background: none !important; box-shadow: none !important; } /* ========================================================================== [전 테마 공통: NEON / LIGHT / DARK] 로그인 버튼 2종 & 주요 블루 버튼을 항상 2번 사진(#1D74F5 단색)으로 100% 통일 ========================================================================== */ :root, html, body, html[data-theme="neon"], html[data-theme="light"], html[data-theme="dark"], body.neon, body.light, body.dark, body.theme-neon, body.theme-light, body.theme-dark, [data-mode="neon"], [data-mode="light"], [data-mode="dark"] { --bk-solid-blue: #1D74F5 !important; --bk-solid-blue-hover: #1562D6 !important; } /* 어떤 테마(NEON / 라이트 / 다크) 상태에서도 로그인 버튼 & 파일 선택 버튼 단색 고정 */ html .bk-solid-login-btn, html[data-theme] .bk-solid-login-btn, body[class] .bk-solid-login-btn, html header a[href*="login"], html header button.login-btn, html .site-header a[href*="login"], html .topbar a[href*="login"], html .nav-login-btn, html .btn-login, html form button[type="submit"], html .login-card button[type="submit"], html .auth-card button[type="submit"], html .login-form button[type="submit"] { background: #1D74F5 !important; background-color: #1D74F5 !important; background-image: none !important; border: 0 !important; border-color: transparent !important; outline: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-radius: 999px !important; font-weight: 700 !important; text-shadow: none !important; filter: none !important; backdrop-filter: none !important; box-shadow: 0 6px 20px rgba(29, 116, 245, 0.35) !important; transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important; } html .bk-solid-login-btn:hover, html[data-theme] .bk-solid-login-btn:hover, body[class] .bk-solid-login-btn:hover, html header a[href*="login"]:hover, html header button.login-btn:hover, html .site-header a[href*="login"]:hover, html .topbar a[href*="login"]:hover, html .nav-login-btn:hover, html .btn-login:hover, html form button[type="submit"]:hover, html .login-card button[type="submit"]:hover, html .auth-card button[type="submit"]:hover, html .login-form button[type="submit"]:hover { background: #1562D6 !important; background-color: #1562D6 !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 8px 24px rgba(29, 116, 245, 0.48) !important; transform: translateY(-1px) !important; } /* 네온 모드 등에서 붙는 광택 테두리/오로라 가상요소(::before, ::after) 완전 차단 */ html .bk-solid-login-btn::before, html .bk-solid-login-btn::after, html header a[href*="login"]::before, html header a[href*="login"]::after, html .btn-login::before, html .btn-login::after, html form button[type="submit"]::before, html form button[type="submit"]::after, html .login-card button[type="submit"]::before, html .login-card button[type="submit"]::after, html .auth-card button[type="submit"]::before, html .auth-card button[type="submit"]::after { display: none !important; content: none !important; opacity: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; } /* === [ROOT CSS V100] === */ html, body { width: 100% !important; max-width: 100% !important; overflow-x: clip !important; overscroll-behavior-x: none !important; touch-action: pan-y !important; } #bkFullViewportFx { width: 100% !important; max-width: 100% !important; overflow: clip !important; contain: strict !important; } html header a[href*="login"], html nav a[href*="login"], html .topbar a[href*="login"], html .site-header a[href*="login"], html a[href^="/login"], html a[href*="/login"], html form button[type="submit"], html .login-card button[type="submit"], html .auth-card button[type="submit"], html .btn-login, html .nav-login-btn { background: #1D74F5 !important; background-color: #1D74F5 !important; background-image: none !important; border: 0 !important; box-shadow: 0 4px 14px rgba(29, 116, 245, 0.3) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-radius: 999px !important; } html header a[href*="login"]::before, html header a[href*="login"]::after, html a[href*="/login"]::before, html a[href*="/login"]::after, html form button[type="submit"]::before, html form button[type="submit"]::after { display: none !important; content: none !important; } /* ===== character-sheet match: neon tube (blue rim + light core), pre-rendered bloom that also glows inside the body, lit paw pads, stronger face glow, mouth on hover, afterimages and a puff on the bite ===== */ html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk){--nb-sw:19} html[data-bakumi="neon"] .bakumi{--nb-g:.85} html[data-bakumi="neon"] .bk-pop{--nb-g:.8} html[data-bakumi="neon"] .nb-l1{filter:none!important} .nb-l1 .nb-body{fill:#030713} .nb-l1 .nb-earin{fill:#0B1E44;opacity:.9} .nb-pawfill{fill:url(#nbPaw)} .nb-rim{fill:none;stroke:rgb(var(--nb-rgb3));stroke-width:var(--nb-sw);stroke-linecap:round;stroke-linejoin:round} .nb-l1 .nb-line{stroke:#E6F3FF;stroke-width:calc(var(--nb-sw) * .62)} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=error],[data-mood=puzzled],[data-mood=yuck]) :is(.nb-bloom,.nb-pawfill){filter:hue-rotate(185deg) saturate(1.3)} html[data-bakumi="neon"] :is(.bakumi,.bk-pop,.bk):is([data-mood=error],[data-mood=puzzled],[data-mood=yuck]) .nb-l1 .nb-line{stroke:#FFF1D6} .nb-l2{filter:drop-shadow(0 0 calc(3px * var(--nb-g)) rgb(var(--nb-rgb3))) drop-shadow(0 0 calc(12px * var(--nb-g)) rgba(var(--nb-rgb),.85))!important} .nb-happy,.nb-squint{stroke:#E6F3FF;stroke-width:calc(var(--nb-sw) * .8)} .nb-m{stroke:#E6F3FF;stroke-width:calc(var(--nb-sw) * .65)} .nb-fang{fill:#F4F9FF} .nb-doc,.nb-check{stroke:#E6F3FF} /* hover on the box or on Bakumi: lean in a touch, mouth opens (sheet 100ms) */ html[data-bakumi="neon"] .home-hero .bakumi.nb-peek[data-mood="idle"] .nb-svg{transform:rotate(-3deg) scale(1.015)} html[data-bakumi="neon"] .home-hero .bakumi.nb-peek[data-mood="idle"] .nb-mouth{transform:scaleY(.8);opacity:1} /* afterimages: outline only */ .nb-ghost :is(.nb-bloom,.nb-pawfill,.nb-body,.nb-earin){display:none} .nb-ghost .nb-rim{stroke:#2F8CFF;opacity:.85} .nb-ghost .nb-line{stroke:#8CC6FF} .nb-trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform-origin:var(--nb-ox,50%) var(--nb-oy,94.5%)} /* bite puff behind the body (sheet 220ms) */ .nb-cloud{position:absolute;left:-22%;top:28%;width:62%;height:62%;pointer-events:none;border-radius:50%;opacity:0;will-change:transform,opacity; background:radial-gradient(closest-side at 40% 50%,rgba(50,120,245,.95),rgba(30,85,210,.5) 60%,rgba(14,47,128,0)),radial-gradient(closest-side at 70% 30%,rgba(50,120,245,.8),rgba(14,47,128,0)),radial-gradient(closest-side at 65% 78%,rgba(50,120,245,.75),rgba(14,47,128,0))} /* === [PRICING PAGE SILVER BOX + STAR MOTION] === */ @keyframes bkSilverStarTwinkle { 0%, 100% { transform: scale(0.88) rotate(0deg); opacity: 0.65; } 50% { transform: scale(1.18) rotate(18deg); opacity: 1; } } .bk-pricing-silver-box { background: #EEF2F6 !important; background-color: #EEF2F6 !important; background-image: none !important; border: 1px solid #CBD5E1 !important; box-shadow: inset 0 1px 0 #FFFFFF !important; color: #0F172A !important; position: relative !important; } .bk-pricing-silver-box * { color: #0F172A !important; } .bk-pricing-silver-box .bk-credit-star, .bk-pricing-silver-box svg:last-of-type { color: #64748B !important; fill: #64748B !important; animation: bkSilverStarTwinkle 2.4s ease-in-out infinite !important; } /* Make price comparisons readable without enlarging the supporting copy. */ .rivals-sum .rivals-price-emphasis{font-size:18px;font-weight:900;line-height:1.5} .rivals-run s{font-size:16px;font-weight:900;text-shadow:.3px 0 currentColor,-.3px 0 currentColor;color:#ef4444;text-decoration-color:#ef4444;text-decoration-thickness:2px} .rivals-run .rivals-period{color:#fff;font-size:inherit;font-weight:600} @media(max-width:640px){.rivals-sum .rivals-price-emphasis{font-size:16px}.rivals-run s{font-size:15px}} /* Fit the desktop pricing overview and its source note into ordinary laptop viewports. */ @media(min-width:921px){ body[data-home] #plans{padding-block:30px 24px} body[data-home] #plans .plans-title{margin-bottom:20px} body[data-home] #plans .pcard{padding:20px;gap:10px} body[data-home] #plans .rivals-title{margin-block:20px 12px} body[data-home] #plans .rivals-sum{margin-top:12px;gap:8px} } /* ===== rival prices: dynamic belt (JS adds .rv-js) ===== */ .rivals.rv-js .rivals-run{animation:none!important;will-change:transform} .rivals.rv-js .rivals-track{touch-action:pan-y;cursor:grab;padding:10px 0} .rivals.rv-js .rivals-track:active{cursor:grabbing} .rivals.rv-js .rivals-run li{--f:0;transform:scale(calc(.9 + var(--f) * .16));opacity:calc(.5 + var(--f) * .5);transition:border-color .25s,box-shadow .25s,background .25s; border-color:rgba(110,170,255,calc(.12 + var(--f) * .6));box-shadow:0 0 calc(var(--f) * 26px) calc(var(--f) * -4px) rgba(40,140,255,.75)} .rivals.rv-js .rivals-run s{position:relative;text-decoration:none!important;display:inline-block} .rivals.rv-js .rivals-run s::after{content:"";position:absolute;left:-3px;right:-3px;top:52%;height:2.5px;border-radius:2px;background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.8); transform:scaleX(0) rotate(-8deg);transform-origin:0 50%;transition:transform .28s cubic-bezier(.2,.9,.3,1.2)} .rivals.rv-js .rivals-run li.rv-hit s::after{transform:scaleX(1) rotate(-8deg)} .rivals.rv-js .rivals-run li.rv-hit s{animation:rvKick .38s cubic-bezier(.2,1.4,.4,1)} @keyframes rvKick{0%{transform:none}35%{transform:translateY(-3px) scale(1.18)}100%{transform:none}} /* ===== "따로 쓰면 vs 바쿠다" summary: before → after, readable ===== */ .rivals-sum.rv-sum2{gap:10px;margin:20px 0 6px} .rivals-sum.rv-sum2>span{display:flex;align-items:baseline;gap:8px;font-size:14px!important;font-weight:600!important;color:var(--muted)!important} .rivals-sum.rv-sum2>span .rivals-price-emphasis{position:relative;font-size:19px!important;font-weight:800!important;color:var(--ink);opacity:.75} .rivals-sum.rv-sum2>span .rivals-price-emphasis::after{content:"";position:absolute;left:-2px;right:-2px;top:54%;height:2px;border-radius:2px;background:#ef4444;transform:rotate(-4deg)} .rivals-sum.rv-sum2>span::after{content:"";display:block;width:10px;height:10px;margin:0 0 0 2px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-3px) rotate(45deg);opacity:.6;align-self:center} html body .rivals-sum.rv-sum2 strong:not(#rvx){display:flex!important;flex-direction:column;align-items:center;gap:3px;padding:12px 26px 13px!important;border-radius:18px!important; background:#1E6FE8!important;border:1px solid rgba(150,200,255,.35)!important;box-shadow:0 10px 30px -10px rgba(30,111,232,.8)!important;text-shadow:none!important;color:#fff!important;filter:none!important} html body .rivals-sum.rv-sum2 strong:not(#rvx)::after,html body .rivals-sum.rv-sum2 strong:not(#rvx)::before{display:none!important} .rivals-sum.rv-sum2 strong .rivals-price-emphasis{font-size:20px!important;font-weight:900!important;letter-spacing:-.01em;line-height:1.3} .rivals-sum.rv-sum2 .rivals-feat{font-size:13px;font-weight:600;color:rgba(255,255,255,.88);letter-spacing:0} @media(max-width:640px){.rivals-sum.rv-sum2 strong{padding:11px 18px 12px!important}.rivals-sum.rv-sum2 strong .rivals-price-emphasis{font-size:17px!important}.rivals-sum.rv-sum2 .rivals-feat{font-size:12px}} .rivals{min-width:0;width:100%;box-sizing:border-box}.rivals-track{max-width:100%;min-width:0} body[data-home] #plans>*{min-width:0;max-width:100%;box-sizing:border-box} /* === BAKOODA CLASSIC NIGHT START === */ /* 클래식 · 다크: 홈 배경 그림 + 바쿠미 색감 + 말풍선만 (나머지는 기존 다크 그대로) */ html[data-theme="dark"]:not([data-bakumi="neon"]):not(#_) body[data-home] .home-hero{ background: linear-gradient(180deg,rgba(10,14,22,0) 0,rgba(10,14,22,0) 640px,#0a0e16 900px), url(/assets/night-bg.webp) center top/max(100%,1200px) auto no-repeat, linear-gradient(180deg,#0c0e0f 0,#0a0e16 900px,#111722 1100px,var(--ground) 1650px)!important; } html[data-theme="dark"]:not([data-bakumi="neon"]):not(#_) body[data-home] .home-hero .hero-bg{display:none!important} html[data-theme="dark"]:not([data-bakumi="neon"]):not(#_) body[data-home] .home-hero :is(.bk-rings,.bk-disc,.bk-cloud){display:none!important} @media (max-width:720px){ html[data-theme="dark"]:not([data-bakumi="neon"]):not(#_) body[data-home] .home-hero{ background: linear-gradient(180deg,rgba(10,14,22,0) 0,rgba(10,14,22,0) 520px,#0a0e16 700px), url(/assets/night-bg.webp) center top/auto 640px no-repeat, linear-gradient(180deg,#0c0e0f 0,#0a0e16 700px,#111722 1000px,var(--ground) 1650px)!important; } } /* 바쿠미: 밤빛 톤 */ html[data-theme="dark"]:not([data-bakumi="neon"]):not(#_) .bakumi .bk-body{filter:saturate(.7) brightness(.8) contrast(1.06)} /* 말풍선: 먹색 바탕 + 금테 */ html[data-theme="dark"]:not([data-bakumi="neon"]):not(#_) .bakumi-say{ background:rgba(16,15,12,.94)!important;color:#EAD7AA!important;border:1px solid rgba(201,164,92,.55)!important; box-shadow:0 8px 24px rgba(0,0,0,.45)!important; } html[data-theme="dark"]:not([data-bakumi="neon"]):not(#_) .bakumi-say::after{ background:#100F0C!important;border:0!important;border-left:1px solid rgba(201,164,92,.55)!important;border-bottom:1px solid rgba(201,164,92,.55)!important; } /* === BAKOODA CLASSIC NIGHT END === */ /* === 문의 창: 모바일에서 잘려 안 보이던 문제 수정 === */ body > #bkLiveChatRoot{overflow:visible!important;max-width:none!important;contain:none!important} @media (max-width:600px){ #bkLiveChatRoot .bk-lc-panel{position:fixed!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important;bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;height:min(540px,calc(100dvh - 96px))!important;max-height:none!important} } /* === 스킨·모드별 안 보이던 글자 보정 === */ .rivals-run .rivals-period{color:inherit!important} html[data-theme="dark"] #csBoardSection h2{color:var(--ink)!important} #csBoardSection a.btn[href*="pf.kakao.com"]{background:#191919!important;color:#FEE500!important;-webkit-text-fill-color:#FEE500!important;border-color:#191919!important} html[data-theme="dark"] .aih-card em{color:var(--navy,#AFC2F5)!important} html body #bkLiveChatRoot .bk-lc-fab{background:rgba(24,52,118,.9)!important;opacity:.95!important;color:#fff!important} /* The monochrome brand mark is shared by both mascot themes. */ html[data-bakumi] .brand .brand-default,.brand .brand-default{display:inline-block;object-fit:contain;filter:none!important;box-shadow:none!important;border-radius:8px}