/* 명함 꾸미기 v7: 이름 색 · 배경 (목록 src/data/cardfx.js, 그리는 곳 public/js/cardfx.js)
   · 움직이는 것은 transform · opacity · 글자 배경 위치만 바꾼다. 무거운 filter 는 쓰지 않는다
   · 움직임 줄이기(기기 설정 · 설정 › 화면)면 style.css 의 .cfx-a 규칙이 모두 멈춘다. 화면 밖 배경은 .cbg-off 로 멈춘다 */

/* ───────────── 이름 색 (.ncl-<fx>) ─────────────
   낮 화면은 짙은 빛깔로, 밤 화면 · 어두운 배경(.cfx-dark)은 밝은 빛깔로. 글자가 늘 또렷하게 */
.ncl { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ncl-dawnbreak, .ncl-tide, .ncl-aurora, .ncl-prism, .ncl-moonsilver, .ncl-goldleaf, .ncl-starink, .ncl-forest, .ncl-seafoam {
  -webkit-background-clip: text; background-clip: text; color: transparent !important; background-repeat: repeat-x;
}
/* 흐르는 빛깔: 같은 색으로 끝나는 띠를 세 배 넓게 깔고 한 바퀴 민다 */
.ncl-dawnbreak { background-image: linear-gradient(90deg, #b8436e, #8a4fae 33%, #3a6cae 66%, #b8436e); background-size: 300% 100%; animation: ncl-flow 12s linear infinite; }
.ncl-tide { background-image: linear-gradient(90deg, #1b7a78, #1f4f8e 30%, #23708e 55%, #165f6a 80%, #1b7a78); background-size: 300% 100%; animation: ncl-flow 9s linear infinite; }
.ncl-aurora { background-image: linear-gradient(90deg, #2a8a5a, #23798c 30%, #6a4aa8 60%, #2f8a7a 82%, #2a8a5a); background-size: 300% 100%; animation: ncl-flow 14s linear infinite; }
.ncl-prism { background-image: linear-gradient(90deg, #c0476e, #c06a24 16%, #8a7f12 32%, #2f8a52 48%, #2a6ab0 64%, #7a48b0 82%, #c0476e); background-size: 300% 100%; animation: ncl-flow 16s linear infinite; }
/* 지나가는 빛 한 줄기 */
.ncl-moonsilver { background-image: linear-gradient(100deg, #565f78 0 40%, #b7c0da 47%, #e9edf8 50%, #b7c0da 53%, #565f78 60% 100%); background-size: 300% 100%; animation: ncl-sweep 6s linear infinite; }
.ncl-goldleaf { background-image: linear-gradient(100deg, #8a6716 0 40%, #c99c3a 47%, #f0d48a 50%, #c99c3a 53%, #8a6716 60% 100%); background-size: 300% 100%; animation: ncl-sweep 7s linear infinite; }
.ncl-starink { background-image: linear-gradient(100deg, #2c3a78 0 41%, #6a7ad8 47%, #c4ccff 50%, #6a7ad8 53%, #2c3a78 59% 100%); background-size: 300% 100%; animation: ncl-sweep 8s linear infinite; }
.ncl-forest { background-image: linear-gradient(100deg, #3a7236 0 40%, #8aa83a 47%, #d2c25a 50%, #8aa83a 53%, #3a7236 60% 100%); background-size: 300% 100%; animation: ncl-sweep 7.5s linear infinite; }
.ncl-seafoam { background-image: linear-gradient(100deg, #1d6a7a 0 41%, #4aa0aa 47%, #a8dcdc 50%, #4aa0aa 53%, #1d6a7a 59% 100%); background-size: 300% 100%; animation: ncl-sweep 5.5s linear infinite; }
/* 바뀌는 빛깔 · 숨 쉬는 빛 */
.ncl-rosewater { color: #b9516a !important; animation: ncl-rose 8s ease-in-out infinite alternate; }
.ncl-berry { color: #a82a52 !important; animation: ncl-berry 6s ease-in-out infinite alternate; }
.ncl-seasons { color: #b84a72 !important; animation: ncl-seasons 28s linear infinite; }
.ncl-candle { color: #a3601a !important; text-shadow: 0 0 5px rgba(255, 176, 70, .45); animation: ncl-candle 3.4s linear infinite; }
.ncl-lamp { color: #a3521a !important; text-shadow: 0 0 6px rgba(255, 184, 96, .75); animation: ncl-lamp 4.2s ease-in-out infinite; }
.ncl-frost { color: #2f7aa2 !important; text-shadow: 0 0 5px rgba(150, 205, 245, .9); animation: ncl-frost 5s ease-in-out infinite; }
.ncl-lavmist { color: #6e56a0 !important; text-shadow: 0 0 6px rgba(196, 172, 240, .85); animation: ncl-lav 5.5s ease-in-out infinite; }

:root[data-tone="dark"] .ncl-dawnbreak, .cfx-dark .ncl-dawnbreak { background-image: linear-gradient(90deg, #ffa3c4, #d2b0ff 33%, #9ccbff 66%, #ffa3c4); }
:root[data-tone="dark"] .ncl-tide, .cfx-dark .ncl-tide { background-image: linear-gradient(90deg, #8fe6dc, #8fb6ff 30%, #9ce4f2 55%, #7fd6c6 80%, #8fe6dc); }
:root[data-tone="dark"] .ncl-aurora, .cfx-dark .ncl-aurora { background-image: linear-gradient(90deg, #8ff2b6, #8fe2f2 30%, #cbaaff 60%, #9cf0d6 82%, #8ff2b6); }
:root[data-tone="dark"] .ncl-prism, .cfx-dark .ncl-prism { background-image: linear-gradient(90deg, #ffa6c2, #ffc58e 16%, #f4ec92 32%, #a8f0b4 48%, #9ccfff 64%, #d0b2ff 82%, #ffa6c2); }
:root[data-tone="dark"] .ncl-moonsilver, .cfx-dark .ncl-moonsilver { background-image: linear-gradient(100deg, #c2cae2 0 40%, #e6ebf8 47%, #ffffff 50%, #e6ebf8 53%, #c2cae2 60% 100%); }
:root[data-tone="dark"] .ncl-goldleaf, .cfx-dark .ncl-goldleaf { background-image: linear-gradient(100deg, #e2bc6a 0 40%, #f6dc98 47%, #fff6d6 50%, #f6dc98 53%, #e2bc6a 60% 100%); }
:root[data-tone="dark"] .ncl-starink, .cfx-dark .ncl-starink { background-image: linear-gradient(100deg, #a6b4ff 0 41%, #d2d9ff 47%, #ffffff 50%, #d2d9ff 53%, #a6b4ff 59% 100%); }
:root[data-tone="dark"] .ncl-forest, .cfx-dark .ncl-forest { background-image: linear-gradient(100deg, #a6dc9c 0 40%, #dcec9a 47%, #fff4c0 50%, #dcec9a 53%, #a6dc9c 60% 100%); }
:root[data-tone="dark"] .ncl-seafoam, .cfx-dark .ncl-seafoam { background-image: linear-gradient(100deg, #8adce6 0 41%, #c6f0f2 47%, #ffffff 50%, #c6f0f2 53%, #8adce6 59% 100%); }
:root[data-tone="dark"] .ncl-rosewater, .cfx-dark .ncl-rosewater { color: #ffacc0 !important; animation-name: ncl-rose-n; }
:root[data-tone="dark"] .ncl-berry, .cfx-dark .ncl-berry { color: #ff8cae !important; animation-name: ncl-berry-n; }
:root[data-tone="dark"] .ncl-seasons, .cfx-dark .ncl-seasons { color: #ffa8c6 !important; animation-name: ncl-seasons-n; }
:root[data-tone="dark"] .ncl-candle, .cfx-dark .ncl-candle { color: #ffcf86 !important; }
:root[data-tone="dark"] .ncl-lamp, .cfx-dark .ncl-lamp { color: #ffd49a !important; }
:root[data-tone="dark"] .ncl-frost, .cfx-dark .ncl-frost { color: #c4e8ff !important; text-shadow: 0 0 6px rgba(120, 190, 255, .7); }
:root[data-tone="dark"] .ncl-lavmist, .cfx-dark .ncl-lavmist { color: #dccdff !important; text-shadow: 0 0 6px rgba(170, 140, 240, .7); }

@keyframes ncl-flow { to { background-position: -150% 0; } }
@keyframes ncl-sweep { from { background-position: 0 0; } to { background-position: -150% 0; } }
@keyframes ncl-rose { from { color: #b9516a; } to { color: #c2683e; } }
@keyframes ncl-rose-n { from { color: #ffacc0; } to { color: #ffc49a; } }
@keyframes ncl-berry { from { color: #a82a52; } to { color: #7e2c78; } }
@keyframes ncl-berry-n { from { color: #ff8cae; } to { color: #e4a0ff; } }
@keyframes ncl-seasons { 0%, 100% { color: #b84a72; } 25% { color: #3b7f3a; } 50% { color: #b35e18; } 75% { color: #33649e; } }
@keyframes ncl-seasons-n { 0%, 100% { color: #ffa8c6; } 25% { color: #a8e8a0; } 50% { color: #ffc27e; } 75% { color: #a6ccff; } }
@keyframes ncl-candle { 0%, 100% { text-shadow: 0 0 5px rgba(255, 176, 70, .45); } 14% { text-shadow: 0 0 7px rgba(255, 186, 80, .7); } 22% { text-shadow: 0 0 4px rgba(255, 160, 60, .35); } 48% { text-shadow: 0 0 6px rgba(255, 180, 74, .6); } 56% { text-shadow: 0 0 8px rgba(255, 196, 90, .8); } 70% { text-shadow: 0 0 5px rgba(255, 170, 64, .45); } }
@keyframes ncl-lamp { 50% { text-shadow: 0 0 2px rgba(255, 184, 96, .3); } }
@keyframes ncl-frost { 50% { text-shadow: 0 0 1px rgba(150, 205, 245, .3); } }
@keyframes ncl-lav { 50% { text-shadow: 0 0 1px rgba(196, 172, 240, .3); } }
/* 위 띠 · 좁은 자리: 이름이 먼저 읽혀야 한다 (ux.css 의 이름 효과 규칙과 같게) */
.topbar .who .nm .ncl { background: none !important; color: var(--wood-ink, #f1e3c4) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .55) !important; animation: none !important; }

/* ───────────── 배경 (.cbg-<fx>) ───────────── */
.cfx-dark { --mint: #9fe3b4; } /* 어두운 배경 위 생활력 숫자 */
/* 움직이는 배경의 겹: 명함 바탕 바로 위, 글자 아래. 넘친 것은 잘라 낸다 */
.cbg-l { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.cbg-l > i { position: absolute; display: block; pointer-events: none; }
.cbg-off .cbg-l > i { animation-play-state: paused !important; }

/* 멈춘 것 */
.cbg-g-tea { background: radial-gradient(120% 80% at 18% 0%, #fbf1e1 0%, transparent 60%), linear-gradient(172deg, #f5e8d4 0%, #ecd8bb 62%, #e5cdab 100%); }
.cbg-p-letter { background: linear-gradient(90deg, transparent 0 21px, rgba(214, 112, 112, .38) 21px 22px, transparent 22px), repeating-linear-gradient(180deg, transparent 0 17px, rgba(110, 150, 196, .22) 17px 18px), linear-gradient(180deg, #fbf8ef, #f5f0e2); }
.cbg-g-meadow { background: radial-gradient(90% 60% at 30% 35%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(180deg, #edf2e2 0%, #dfe8cd 55%, #cddcb4 100%); }
.cbg-g-lilac { background: radial-gradient(80% 70% at 85% 10%, rgba(255, 236, 214, .7), transparent 65%), linear-gradient(168deg, #efe3f3 0%, #e1d4ee 52%, #f1dfe3 100%); }
.cbg-p-gingham { background: linear-gradient(90deg, rgba(196, 72, 72, .11) 50%, transparent 50%) 0 0 / 22px 22px, linear-gradient(0deg, rgba(196, 72, 72, .11) 50%, transparent 50%) 0 0 / 22px 22px, linear-gradient(180deg, #fbf3ea, #f6eadb); }
.cbg-p-lattice { background: radial-gradient(70% 90% at 72% 40%, rgba(255, 238, 196, .75), transparent 70%), repeating-linear-gradient(118deg, transparent 0 26px, rgba(132, 98, 54, .085) 26px 33px), repeating-linear-gradient(28deg, transparent 0 40px, rgba(132, 98, 54, .06) 40px 46px), linear-gradient(180deg, #f2e4c9, #e8d5b2); }
:root[data-tone="dark"] .cbg-g-tea { background: radial-gradient(120% 80% at 18% 0%, #4c3a28 0%, transparent 60%), linear-gradient(172deg, #3e3124 0%, #33281d 62%, #2c2219 100%); }
:root[data-tone="dark"] .cbg-p-letter { background: linear-gradient(90deg, transparent 0 21px, rgba(230, 120, 120, .3) 21px 22px, transparent 22px), repeating-linear-gradient(180deg, transparent 0 17px, rgba(140, 180, 230, .14) 17px 18px), linear-gradient(180deg, #30302e, #2a2a2a); }
:root[data-tone="dark"] .cbg-g-meadow { background: radial-gradient(90% 60% at 30% 35%, rgba(200, 220, 190, .1), transparent 70%), linear-gradient(180deg, #2b3428 0%, #263022 55%, #222b1c 100%); }
:root[data-tone="dark"] .cbg-g-lilac { background: radial-gradient(80% 70% at 85% 10%, rgba(120, 80, 70, .3), transparent 65%), linear-gradient(168deg, #3a3044 0%, #312a40 52%, #3a2c34 100%); }
:root[data-tone="dark"] .cbg-p-gingham { background: linear-gradient(90deg, rgba(230, 110, 110, .1) 50%, transparent 50%) 0 0 / 22px 22px, linear-gradient(0deg, rgba(230, 110, 110, .1) 50%, transparent 50%) 0 0 / 22px 22px, linear-gradient(180deg, #352a28, #2e2524); }
:root[data-tone="dark"] .cbg-p-lattice { background: radial-gradient(70% 90% at 72% 40%, rgba(120, 150, 210, .14), transparent 70%), repeating-linear-gradient(118deg, transparent 0 26px, rgba(0, 0, 0, .18) 26px 33px), repeating-linear-gradient(28deg, transparent 0 40px, rgba(0, 0, 0, .12) 40px 46px), linear-gradient(180deg, #2c3040, #262838); }

/* 피어오르는 물안개: 안개 두 겹이 서로 다른 빠르기로 옆으로 흐른다 */
.cbg-a-mist { background: linear-gradient(180deg, #dfe6ea 0%, #d3dcdf 55%, #c6d1cf 100%); }
.cbg-a-mist .cbg-l > i { top: 0; bottom: 0; left: 0; width: calc(100% + 320px); animation: cbg-slide320 46s linear infinite; }
.cbg-a-mist .cbg-l > .l1 { background: radial-gradient(150px 40% at 160px 72%, rgba(255, 255, 255, .95), transparent) 0 0 / 320px 100% repeat-x; }
.cbg-a-mist .cbg-l > .l2 { background: radial-gradient(130px 30% at 140px 30%, rgba(255, 255, 255, .8), transparent) 0 0 / 280px 100% repeat-x, radial-gradient(140px 26% at 140px 92%, rgba(255, 255, 255, .7), transparent) 0 0 / 280px 100% repeat-x; width: calc(100% + 280px); animation-name: cbg-slide280; animation-duration: 70s; animation-direction: reverse; }
:root[data-tone="dark"] .cbg-a-mist { background: linear-gradient(180deg, #2c3438 0%, #283033 55%, #232b2a 100%); }
:root[data-tone="dark"] .cbg-a-mist .cbg-l > i { opacity: .18; }

/* 노을이 번지는 하늘: 넓은 띠 하나가 아주 천천히 오간다 */
.cbg-a-dusksky { background: #f4c9b0; }
.cbg-a-dusksky .cbg-l > .l1 { top: 0; bottom: 0; left: 0; width: 300%; background: linear-gradient(100deg, #fbd8b6 0%, #f5bba6 18%, #eab0bd 34%, #cdb3df 50%, #f0b6b2 66%, #f9cfa6 82%, #fbd8b6 100%); animation: cbg-dusk 34s ease-in-out infinite alternate; }
.cbg-a-dusksky .cbg-l > .l2 { inset: 0; background: linear-gradient(180deg, rgba(255, 246, 232, .42), transparent 55%, rgba(120, 70, 110, .08)); }
:root[data-tone="dark"] .cbg-a-dusksky .cbg-l > .l1 { background: linear-gradient(100deg, #5a3a32 0%, #5a3034 18%, #4c2e40 34%, #3c3054 50%, #52303a 66%, #5a3c2c 82%, #5a3a32 100%); }
:root[data-tone="dark"] .cbg-a-dusksky .cbg-l > .l2 { background: linear-gradient(180deg, rgba(255, 220, 190, .06), transparent 55%, rgba(0, 0, 0, .15)); }

/* 바람 부는 밀밭: 옅은 물결이 옆으로 지난다 */
.cbg-a-wheatwind { background: linear-gradient(180deg, #f7ebc8 0%, #eed69c 48%, #e0bd72 100%); }
.cbg-a-wheatwind .cbg-l > .l1 { top: 30%; bottom: -10%; left: -10%; width: calc(120% + 180px); background: repeating-linear-gradient(90deg, rgba(255, 248, 214, 0) 0, rgba(255, 248, 214, .5) 50px, rgba(255, 248, 214, 0) 100px, rgba(255, 248, 214, 0) 180px); transform-origin: 0 100%; animation: cbg-wheat 6s linear infinite; }
.cbg-a-wheatwind .cbg-l > .l2 { left: 0; right: 0; bottom: 0; height: 40%; background: repeating-linear-gradient(96deg, rgba(176, 124, 40, .12) 0 2px, transparent 2px 7px); }
:root[data-tone="dark"] .cbg-a-wheatwind { background: linear-gradient(180deg, #3e3424 0%, #4a3b22 48%, #54401f 100%); }
:root[data-tone="dark"] .cbg-a-wheatwind .cbg-l > .l1 { opacity: .25; }

/* 숲 사이 햇살: 비스듬한 빛줄기가 들었다 옅어진다 */
.cbg-a-sunbeam { background: radial-gradient(90% 70% at 15% -10%, #fbf5d4, transparent 70%), linear-gradient(180deg, #e4ecd0 0%, #d3e1bc 60%, #c3d4aa 100%); }
.cbg-a-sunbeam .cbg-l > .l1 { top: -20%; bottom: -20%; left: -30%; right: -30%; background: repeating-linear-gradient(112deg, rgba(255, 250, 214, 0) 0 34px, rgba(255, 248, 206, .55) 46px 58px, rgba(255, 250, 214, 0) 72px 120px); animation: cbg-beam 9s ease-in-out infinite alternate; }
.cbg-a-sunbeam .cbg-l > .l2 { inset: 0; background: radial-gradient(1.5px 1.5px at 30% 40%, rgba(255, 252, 220, .9), transparent), radial-gradient(1.5px 1.5px at 62% 28%, rgba(255, 252, 220, .8), transparent), radial-gradient(1px 1px at 78% 62%, rgba(255, 252, 220, .9), transparent), radial-gradient(1.5px 1.5px at 45% 72%, rgba(255, 252, 220, .7), transparent); animation: cbg-mote 9s ease-in-out infinite alternate; }
:root[data-tone="dark"] .cbg-a-sunbeam { background: radial-gradient(90% 70% at 15% -10%, #4a4a32, transparent 70%), linear-gradient(180deg, #2b3324 0%, #262e20 60%, #20281b 100%); }
:root[data-tone="dark"] .cbg-a-sunbeam .cbg-l > .l1 { opacity: .3; }

/* 꽃잎 지는 오후: 꽃잎 두 겹이 비스듬히 흩어진다 (타일 한 장만큼 밀어 이음매 없이) */
.cbg-a-petals { background: radial-gradient(90% 70% at 85% 0%, #fff6f0, transparent 70%), linear-gradient(170deg, #fbeaee 0%, #f6e2e7 60%, #f1e6da 100%); }
.cbg-a-petals .cbg-l > i { top: -120px; left: 0; width: calc(100% + 120px); height: calc(100% + 120px); }
.cbg-a-petals .cbg-l > .l1 { background: radial-gradient(4px 2.6px at 18px 22px, #f2a9bd 70%, transparent 100%), radial-gradient(3px 2px at 76px 54px, #f7c2cf 70%, transparent 100%), radial-gradient(3.6px 2.4px at 104px 96px, #ee9db3 70%, transparent 100%), radial-gradient(2.6px 1.8px at 44px 104px, #f9cbd6 70%, transparent 100%), radial-gradient(3.2px 2.1px at 58px 8px, #f4b2c4 70%, transparent 100%), radial-gradient(2.8px 1.9px at 98px 34px, #f0a4b8 70%, transparent 100%); background-size: 120px 120px; animation: cbg-petal1 22s linear infinite; }
.cbg-a-petals .cbg-l > .l2 { background: radial-gradient(2.6px 1.7px at 30px 50px, #f4b6c6 70%, transparent 100%), radial-gradient(2px 1.4px at 70px 14px, #fad4dd 70%, transparent 100%), radial-gradient(2.2px 1.5px at 8px 72px, #f7c0cf 70%, transparent 100%); background-size: 80px 80px; opacity: .8; animation: cbg-petal2 16s linear infinite; }
:root[data-tone="dark"] .cbg-a-petals { background: radial-gradient(90% 70% at 85% 0%, #4a3440, transparent 70%), linear-gradient(170deg, #3a2a32 0%, #33262e 60%, #2e2828 100%); }
:root[data-tone="dark"] .cbg-a-petals .cbg-l > i { opacity: .55; }

/* 소리 없는 눈: 멀고 가까운 눈 두 겹 */
.cbg-a-snow { background: linear-gradient(180deg, #dbe4ee 0%, #e9eef3 70%, #f4f5f5 100%); }
.cbg-a-snow .cbg-l > i { left: 0; right: 0; }
.cbg-a-snow .cbg-l > .l1 { top: -140px; height: calc(100% + 140px); background: radial-gradient(circle at 20px 26px, #fff 1.8px, transparent 2.6px), radial-gradient(circle at 92px 70px, #fff 2.2px, transparent 3px), radial-gradient(circle at 50px 118px, #fff 1.6px, transparent 2.4px), radial-gradient(circle at 124px 12px, #fff 1.4px, transparent 2.2px); background-size: 140px 140px; animation: cbg-fall140 13s linear infinite; }
.cbg-a-snow .cbg-l > .l2 { top: -90px; height: calc(100% + 90px); background: radial-gradient(circle at 12px 40px, rgba(255, 255, 255, .85) 1px, transparent 1.6px), radial-gradient(circle at 58px 8px, rgba(255, 255, 255, .8) .9px, transparent 1.5px), radial-gradient(circle at 74px 66px, rgba(255, 255, 255, .85) 1px, transparent 1.6px); background-size: 90px 90px; animation: cbg-fall90 17s linear infinite; }
:root[data-tone="dark"] .cbg-a-snow { background: linear-gradient(180deg, #1f2836 0%, #263040 70%, #2c3644 100%); }

/* 윤슬: 반짝임 두 겹이 엇갈려 흐른다 */
.cbg-a-seashimmer { background: radial-gradient(120% 60% at 50% -10%, #eef7f6, transparent 60%), linear-gradient(180deg, #cfe5ec 0%, #a9cfdc 55%, #8dbfd0 100%); }
.cbg-a-seashimmer .cbg-l > i { top: 30%; bottom: 0; left: 0; width: calc(100% + 96px); }
.cbg-a-seashimmer .cbg-l > .l1 { background: radial-gradient(7px 1.4px at 14px 8px, rgba(255, 255, 255, .95), transparent), radial-gradient(5px 1.2px at 62px 22px, rgba(255, 255, 255, .85), transparent), radial-gradient(6px 1.3px at 38px 36px, rgba(255, 255, 255, .8), transparent); background-size: 96px 44px; animation: cbg-shim1 7s linear infinite; }
.cbg-a-seashimmer .cbg-l > .l2 { background: radial-gradient(6px 1.2px at 40px 14px, rgba(255, 255, 255, .85), transparent), radial-gradient(4px 1px at 80px 30px, rgba(255, 255, 255, .8), transparent); background-size: 96px 40px; animation: cbg-shim2 5s linear infinite, cbg-blink 2.6s ease-in-out infinite alternate; }
:root[data-tone="dark"] .cbg-a-seashimmer { background: radial-gradient(120% 60% at 50% -10%, #2c4650, transparent 60%), linear-gradient(180deg, #1f3a44 0%, #1a3240 55%, #152a38 100%); }
:root[data-tone="dark"] .cbg-a-seashimmer .cbg-l > i { opacity: .5; }

/* 빗방울 맺힌 창 (어두운 배경) */
.cbg-a-rain { background: radial-gradient(circle at 18% 28%, rgba(240, 240, 255, .5) 0 1.2px, transparent 2px), radial-gradient(circle at 74% 64%, rgba(240, 240, 255, .45) 0 1.4px, transparent 2.2px), radial-gradient(circle at 46% 82%, rgba(240, 240, 255, .4) 0 1px, transparent 1.8px), radial-gradient(circle at 88% 22%, rgba(240, 240, 255, .4) 0 1.1px, transparent 1.9px), radial-gradient(60px 46px at 22% 72%, rgba(255, 196, 120, .38), transparent), radial-gradient(70px 50px at 78% 34%, rgba(140, 186, 255, .3), transparent), radial-gradient(40px 34px at 56% 18%, rgba(255, 220, 160, .25), transparent), linear-gradient(180deg, #3d4858 0%, #333d4b 100%); }
.cbg-a-rain .cbg-l > i { left: 0; right: 0; }
.cbg-a-rain .cbg-l > .l1 { top: -120px; height: calc(100% + 120px); background: radial-gradient(.7px 11px at 14px 30px, rgba(214, 228, 255, .55), transparent), radial-gradient(.7px 9px at 54px 90px, rgba(214, 228, 255, .45), transparent), radial-gradient(.6px 12px at 88px 50px, rgba(214, 228, 255, .5), transparent); background-size: 104px 120px; animation: cbg-fall120 1.6s linear infinite; }
.cbg-a-rain .cbg-l > .l2 { top: -96px; height: calc(100% + 96px); background: radial-gradient(.6px 8px at 30px 10px, rgba(214, 228, 255, .35), transparent), radial-gradient(.6px 7px at 70px 60px, rgba(214, 228, 255, .3), transparent); background-size: 82px 96px; animation: cbg-fall96 2.3s linear infinite; }

/* 촛불 곁의 밤 (어두운 배경): 아래쪽 불빛이 숨 쉬듯 일렁인다 */
.cbg-a-candle { background: radial-gradient(130% 80% at 50% 115%, #5c3416 0%, #34200f 45%, #22170f 100%); }
.cbg-a-candle .cbg-l > .l1 { left: -10%; right: -10%; bottom: -30%; height: 120%; background: radial-gradient(50% 50% at 50% 100%, rgba(255, 190, 100, .62), rgba(255, 150, 70, .22) 55%, transparent 78%); transform-origin: 50% 100%; animation: cbg-flicker 3.6s linear infinite; }
.cbg-a-candle .cbg-l > .l2 { left: 0; right: 0; bottom: 0; height: 60%; background: radial-gradient(30% 40% at 50% 100%, rgba(255, 224, 160, .3), transparent 70%); animation: cbg-flicker2 2.3s linear infinite; }

/* 별이 흐르는 밤 (어두운 배경): 멀고 가까운 별 두 겹이 서로 다른 빠르기로 */
.cbg-a-starfield { background: radial-gradient(ellipse at 70% 120%, rgba(90, 110, 190, .35), transparent 60%), linear-gradient(180deg, #0f1430 0%, #171d44 60%, #1c2350 100%); }
.cbg-a-starfield .cbg-l > i { top: 0; bottom: 0; left: 0; }
.cbg-a-starfield .cbg-l > .l1 { width: calc(100% + 120px); background: radial-gradient(circle at 10px 14px, #fff 0 .7px, transparent 1.2px), radial-gradient(circle at 70px 40px, #dfe6ff 0 .6px, transparent 1.1px), radial-gradient(circle at 34px 70px, #fff6d6 0 .7px, transparent 1.2px), radial-gradient(circle at 96px 92px, #fff 0 .6px, transparent 1.1px), radial-gradient(circle at 54px 104px, #cfdcff 0 .5px, transparent 1px); background-size: 120px 120px; opacity: .8; animation: cbg-slide120 60s linear infinite; }
.cbg-a-starfield .cbg-l > .l2 { width: calc(100% + 180px); background: radial-gradient(circle at 40px 30px, #fff 0 1.1px, rgba(200, 215, 255, .35) 1.6px, transparent 3px), radial-gradient(circle at 130px 96px, #fff4d0 0 1px, rgba(255, 230, 180, .3) 1.6px, transparent 3px), radial-gradient(circle at 160px 18px, #fff 0 .9px, transparent 1.6px); background-size: 180px 130px; animation: cbg-slide180 40s linear infinite, cbg-blink 3.4s ease-in-out infinite alternate; }

/* 달 비친 연못 (어두운 배경) */
.cbg-a-moonpond { background: radial-gradient(circle at 76% 22%, #f6f0d8 0 7px, rgba(246, 240, 216, .25) 8px, rgba(200, 210, 255, .1) 16px, transparent 28px), radial-gradient(circle at 20% 14%, #fff 0 .7px, transparent 1.2px), radial-gradient(circle at 44% 30%, #fff 0 .6px, transparent 1.1px), radial-gradient(circle at 60% 10%, #fff 0 .6px, transparent 1.1px), linear-gradient(180deg, #141d34 0%, #1b2944 46%, #101d30 46.5%, #0c1828 100%); }
.cbg-a-moonpond .cbg-l > .l1 { left: calc(76% - 18px); width: 36px; top: 52%; height: 44%; background: repeating-linear-gradient(180deg, rgba(246, 240, 216, .55) 0 2px, transparent 2px 5px); -webkit-mask: radial-gradient(50% 50% at 50% 40%, #000 30%, transparent 100%); mask: radial-gradient(50% 50% at 50% 40%, #000 30%, transparent 100%); transform-origin: 50% 0; animation: cbg-wobble 4.4s ease-in-out infinite; }
.cbg-a-moonpond .cbg-l > .l2 { left: 0; right: 0; top: 47%; bottom: 0; background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(160, 190, 240, .07) 6px 7px); animation: cbg-ripple 6s ease-in-out infinite alternate; }

/* 북쪽 하늘의 극광 (어두운 배경): 빛의 장막이 너울거린다 */
.cbg-a-aurora { background: radial-gradient(circle at 12% 20%, #fff 0 .7px, transparent 1.2px), radial-gradient(circle at 38% 12%, #fff 0 .6px, transparent 1.1px), radial-gradient(circle at 66% 26%, #fff 0 .6px, transparent 1.1px), radial-gradient(circle at 88% 10%, #fff 0 .7px, transparent 1.2px), radial-gradient(circle at 52% 6%, #fff 0 .5px, transparent 1px), linear-gradient(180deg, #0c1428 0%, #12203a 55%, #172a3a 100%); }
.cbg-a-aurora .cbg-l > i { top: -10%; height: 90%; left: 0; width: 220%; }
.cbg-a-aurora .cbg-l > .l1 { background: radial-gradient(18% 60% at 12% 60%, rgba(96, 236, 170, .42), transparent 70%), radial-gradient(14% 55% at 30% 50%, rgba(80, 210, 200, .34), transparent 70%), radial-gradient(18% 62% at 52% 58%, rgba(110, 236, 160, .38), transparent 70%), radial-gradient(14% 50% at 72% 46%, rgba(170, 130, 255, .32), transparent 70%), radial-gradient(18% 60% at 90% 56%, rgba(96, 236, 170, .4), transparent 70%); transform-origin: 0 50%; animation: cbg-aurora 22s ease-in-out infinite alternate; }
.cbg-a-aurora .cbg-l > .l2 { background: radial-gradient(12% 40% at 20% 40%, rgba(190, 150, 255, .26), transparent 70%), radial-gradient(14% 46% at 46% 36%, rgba(96, 236, 200, .24), transparent 70%), radial-gradient(12% 44% at 80% 36%, rgba(120, 220, 255, .22), transparent 70%); animation: cbg-aurora2 30s ease-in-out infinite alternate; }

/* 등불 축제의 밤 (어두운 배경): 흐릿한 빛망울이 떠오른다 */
.cbg-a-lantern { background: radial-gradient(120% 70% at 50% 120%, rgba(120, 60, 40, .55), transparent 70%), linear-gradient(180deg, #181230 0%, #24183a 55%, #33203a 100%); }
.cbg-a-lantern .cbg-l > i { left: 0; right: 0; top: 0; }
.cbg-a-lantern .cbg-l > .l1 { height: calc(100% + 120px); background: radial-gradient(circle at 24px 30px, rgba(255, 206, 128, .75) 0 4px, rgba(255, 170, 90, .22) 6px, transparent 11px), radial-gradient(circle at 96px 84px, rgba(255, 190, 110, .65) 0 5px, rgba(255, 150, 80, .2) 7px, transparent 13px), radial-gradient(circle at 62px 112px, rgba(255, 220, 150, .55) 0 3px, rgba(255, 180, 100, .15) 5px, transparent 9px); background-size: 128px 120px; animation: cbg-rise120 18s linear infinite; }
.cbg-a-lantern .cbg-l > .l2 { height: calc(100% + 90px); background: radial-gradient(circle at 50px 16px, rgba(255, 200, 140, .4) 0 2px, transparent 6px), radial-gradient(circle at 10px 60px, rgba(255, 210, 150, .35) 0 2.4px, transparent 6px), radial-gradient(circle at 84px 74px, rgba(255, 180, 120, .35) 0 1.8px, transparent 5px); background-size: 100px 90px; animation: cbg-rise90 26s linear infinite; }

/* 화롯가 불티 (어두운 배경): 불티가 올라가며 사라진다 */
.cbg-a-embers { background: radial-gradient(130% 70% at 50% 125%, #8a3412 0%, #4a1e12 45%, #24140f 100%); }
.cbg-a-embers .cbg-l { -webkit-mask: linear-gradient(0deg, #000 30%, transparent 95%); mask: linear-gradient(0deg, #000 30%, transparent 95%); }
.cbg-a-embers .cbg-l > i { left: 0; right: 0; top: 0; }
.cbg-a-embers .cbg-l > .l1 { height: calc(100% + 160px); background: radial-gradient(circle at 20px 30px, #ffe2a0 0 1px, rgba(255, 140, 50, .5) 1.6px, transparent 3px), radial-gradient(circle at 80px 100px, #ffd080 0 1.2px, rgba(255, 120, 40, .45) 1.8px, transparent 3.4px), radial-gradient(circle at 106px 20px, #fff0c0 0 .8px, rgba(255, 150, 60, .4) 1.4px, transparent 2.6px), radial-gradient(circle at 50px 140px, #ffc070 0 1px, rgba(255, 110, 40, .4) 1.6px, transparent 3px); background-size: 120px 160px; animation: cbg-rise160 9s linear infinite; }
.cbg-a-embers .cbg-l > .l2 { height: calc(100% + 120px); background: radial-gradient(circle at 40px 60px, #ffd690 0 .7px, rgba(255, 130, 50, .4) 1.2px, transparent 2.2px), radial-gradient(circle at 90px 10px, #ffe0a0 0 .6px, rgba(255, 130, 50, .35) 1.1px, transparent 2px); background-size: 100px 120px; animation: cbg-rise120 13s linear infinite; }

@keyframes cbg-slide320 { to { transform: translateX(-320px); } }
@keyframes cbg-slide280 { to { transform: translateX(-280px); } }
@keyframes cbg-slide120 { to { transform: translateX(-120px); } }
@keyframes cbg-slide180 { to { transform: translateX(-180px); } }
@keyframes cbg-dusk { from { transform: translateX(0); } to { transform: translateX(-66.666%); } }
@keyframes cbg-wheat { from { transform: skewX(-14deg) translateX(-180px); } to { transform: skewX(-14deg) translateX(0); } }
@keyframes cbg-beam { from { opacity: .35; transform: translateX(-14px); } to { opacity: 1; transform: translateX(14px); } }
@keyframes cbg-mote { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: translateY(-6px); } }
@keyframes cbg-petal1 { to { transform: translate(-120px, 120px); } }
@keyframes cbg-petal2 { to { transform: translate(-80px, 80px); } }
@keyframes cbg-fall140 { to { transform: translateY(140px); } }
@keyframes cbg-fall90 { to { transform: translateY(90px); } }
@keyframes cbg-fall120 { to { transform: translateY(120px); } }
@keyframes cbg-fall96 { to { transform: translateY(96px); } }
@keyframes cbg-shim1 { to { transform: translateX(-96px); } }
@keyframes cbg-shim2 { from { transform: translateX(-96px); } to { transform: translateX(0); } }
@keyframes cbg-blink { from { opacity: .35; } to { opacity: 1; } }
@keyframes cbg-flicker { 0%, 100% { opacity: .8; transform: scale(1); } 12% { opacity: 1; transform: scale(1.05, 1.08); } 20% { opacity: .7; transform: scale(.97); } 38% { opacity: .95; transform: scale(1.03); } 52% { opacity: .75; transform: scale(.98, .95); } 64% { opacity: 1; transform: scale(1.06, 1.09); } 78% { opacity: .84; transform: scale(1); } }
@keyframes cbg-flicker2 { 0%, 100% { opacity: .7; } 30% { opacity: 1; } 55% { opacity: .6; } 80% { opacity: .9; } }
@keyframes cbg-wobble { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(1.35) scaleY(.94); opacity: .7; } }
@keyframes cbg-ripple { from { transform: translateY(0); } to { transform: translateY(3px); } }
@keyframes cbg-aurora { from { transform: translateX(0) skewX(-6deg) scaleY(.92); } to { transform: translateX(-45%) skewX(6deg) scaleY(1.06); } }
@keyframes cbg-aurora2 { from { transform: translateX(-40%) scaleY(1); opacity: .6; } to { transform: translateX(0) scaleY(.88); opacity: 1; } }
@keyframes cbg-rise90 { to { transform: translateY(-90px); } }
@keyframes cbg-rise160 { to { transform: translateY(-160px); } }
@keyframes cbg-rise120 { to { transform: translateY(-120px); } }

/* 세력 납품 상점의 테두리 견본 */
.fd-deco { display: inline-block; position: relative; width: 32px; height: 32px; border-radius: 4px; background: var(--surface-2); flex: 0 0 auto; }
.fd-deco .cfx-fr { --frw: calc(var(--frn) * 1px); }

/* 명함 꾸미기 상점: 거저 받는 것 */
.cshop .free { font-size: .76rem; color: var(--good, #3f7a3a); font-weight: 700; }

/* 테두리를 두른 작은 명함: 전투력 숫자가 테두리 무늬에 걸리지 않게 안쪽으로 */
.ncard.cfr .pws { top: calc(var(--frn, 7) * 1.5px + 1px); right: calc(var(--frn, 7) * 1.5px + 3px); }
/* 밤 화면: 흰 레이스 · 촛농이 눈부시지 않게 */
:root[data-tone="dark"] :is(.cfr-lace, .cfr-candlewax) > .fimg { opacity: .72; }