/* 이름 꾸미기 — 글자 효과 (헤더 이름과 뽑기 화면이 함께 쓴다)
   ⚠ 색·그라데이션은 글자마다 style 로 직접 박는다. 여기 있는 건 움직임·스킨·기본 뼈대뿐. */
/* 이름은 글자 하나마다 두 겹으로 그린다.
   바깥(.nm-ch) = 움직임(transform), 안(.nm-in) = 색·그라데이션.
   한 겹에 몰면 둘 중 하나만 살아남아 글자가 안 보이거나 안 움직인다. */
.nm    { font-weight: 700; display: inline-block; line-height: 1.2; position: relative; }
.nm-ch { display: inline-block; }
.nm-in { display: inline-block; }

/* 색은 서버가 글자마다 직접 칠한다. 기본색만 테마를 따라가야 해서 여기 남긴다. */
.c-basic .nm-in { color: #334155; }
html.dark .c-basic .nm-in { color: #e2e8f0; }

/* 그라데이션은 서버가 글자마다 직접 겹쳐 그린다. 흐름 애니메이션만 여기. */
@keyframes nm-flow { to { background-position: -300% 0, 0 0; } }

/* ---- 움직임 (글자마다 조금씩 밀려서 시작한다) ------------------------ */
.move .nm-ch { animation-delay: calc(var(--i) * 0.09s); }
.m-wave  .nm-ch { animation: m-wave 2.4s ease-in-out infinite; }
.m-beat  .nm-ch { animation: m-beat 1.6s ease-in-out infinite; }
.m-shake .nm-ch { animation: m-shake 2.6s ease-in-out infinite; }
.m-pop   .nm-ch { animation: m-pop 2.2s ease-in-out infinite; }
.m-storm .nm-ch { animation: m-storm 1.1s ease-in-out infinite; }
@keyframes m-wave {
    0%, 60%, 100% { transform: translateY(0); }
    20%           { transform: translateY(-0.16em); }
}
@keyframes m-beat {
    0%, 55%, 100% { transform: scale(1); }
    22%           { transform: scale(1.18); }
}
@keyframes m-shake {
    0%, 70%, 100% { transform: translateX(0) rotate(0deg); }
    76%           { transform: translateX(-0.06em) rotate(-6deg); }
    84%           { transform: translateX(0.06em) rotate(6deg); }
    92%           { transform: translateX(-0.03em) rotate(-3deg); }
}
@keyframes m-pop {
    0%, 32%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
    8%            { transform: translateY(-0.28em) scale(1.3) rotate(-9deg); }
    18%           { transform: translateY(0.06em) scale(0.94) rotate(5deg); }
    25%           { transform: translateY(-0.06em) scale(1.05) rotate(0deg); }
}
/* 요동 — 제자리에서 좌우로 격렬하게 기울며 떤다 (자리를 옮기지 않는다) */
@keyframes m-storm {
    0%, 100% { transform: rotate(0deg) scale(1); }
    15%      { transform: rotate(-17deg) scale(1.12); }
    35%      { transform: rotate(14deg)  scale(0.95); }
    55%      { transform: rotate(-10deg) scale(1.08); }
    75%      { transform: rotate(6deg)   scale(0.98); }
}

/* ---- 스킨 (장식·후광) ------------------------------------------------ */
/* 훈장 계열 — 크기·모양·자리를 서로 다르게 해서 한눈에 구분되게 한다.
   작은 부호를 같은 자리에 같은 크기로 두면 뭐가 뭔지 알 수 없다(실제로 겪음). */
.s-star::before, .s-ember::before, .s-gem::before, .s-crown::before {
    position: absolute; pointer-events: none; line-height: 1;
}
/* 별 — 오른쪽 위, 금색 큰 별 */
.s-star::before  { content: "★"; right: -0.62em; top: -0.5em; font-size: 0.8em;
                   color: #fbbf24; text-shadow: 0 0 8px rgba(251,191,36,0.9);
                   animation: s-twinkle 1.7s ease-in-out infinite; }
/* 불씨 — 오른쪽 어깨, 작고 붉은 불똥이 위로 흔들린다 */
.s-ember::before { content: "●"; right: -0.55em; top: -0.42em; font-size: 0.62em;
                   color: #f97316; text-shadow: 0 0 10px #ef4444, 0 0 20px #f97316;
                   animation: s-ember 1.1s ease-in-out infinite; }
/* 보석 — 왼쪽 위, 청록 마름모 */
.s-gem::before   { content: "◆"; right: -0.6em; top: -0.45em; font-size: 0.68em;
                   color: #22d3ee; text-shadow: 0 0 9px rgba(34,211,238,0.95);
                   animation: s-spin 3.2s linear infinite; }
/* 왕관 — 이름 위 한가운데, 크게 */
.s-crown::before { content: "⚜"; right: -0.62em; top: -0.62em;
                   font-size: 0.82em; color: #fbbf24;
                   text-shadow: 0 0 10px rgba(245,158,11,0.95);
                   animation: s-bob 2.4s ease-in-out infinite; }
@keyframes s-ember {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.75; }
    50%      { transform: translateY(-0.35em) scale(1.25); opacity: 1; }
}
@keyframes s-twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.7) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.25) rotate(90deg); }
}
@keyframes s-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.16em); }
}
@keyframes s-spin { to { transform: rotate(360deg); } }

/* 후광 계열 스킨 — 글자 자체가 빛난다 */
.s-halo  { filter: drop-shadow(0 0 6px rgba(148,163,184,0.8)); }
.s-flame { filter: drop-shadow(0 0 7px rgba(249,115,22,0.9)); animation: s-flame 1.4s ease-in-out infinite; }
.s-holy  { filter: drop-shadow(0 0 8px rgba(253,224,71,0.95)) drop-shadow(0 0 18px rgba(245,158,11,0.6));
           animation: s-holy 2.4s ease-in-out infinite; }
.s-prism { animation: s-prism 2.4s ease-in-out infinite; }
@keyframes s-flame {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(249,115,22,0.75)); }
    50%      { filter: drop-shadow(0 0 12px rgba(249,115,22,1)) drop-shadow(0 0 22px rgba(239,68,68,0.7)); }
}
@keyframes s-holy {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(253,224,71,0.8)); }
    50%      { filter: drop-shadow(0 0 14px rgba(253,224,71,1)) drop-shadow(0 0 26px rgba(245,158,11,0.7)); }
}
@keyframes s-prism {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(232,121,249,0.6)); }
    50%      { filter: drop-shadow(0 0 10px rgba(34,211,238,0.9)) drop-shadow(0 0 18px rgba(232,121,249,0.6)); }
}

/* ---- 움직임 (추가분) ------------------------------------------------ */
.m-breath .nm-ch { animation: m-breath 3.2s ease-in-out infinite; }
.m-tilt   .nm-ch { animation: m-tilt 3.4s ease-in-out infinite; }
.m-slide  .nm-ch { animation: m-slide 3.0s ease-in-out infinite; }
.m-blink  .nm-ch { animation: m-blink 2.8s ease-in-out infinite; }
.m-flip   .nm-ch { animation: m-flip 3.0s ease-in-out infinite; }
.m-tempest .nm-ch { animation: m-tempest 1.7s linear infinite; }
@keyframes m-breath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes m-tilt   { 0%,70%,100% { transform: rotate(0deg); } 85% { transform: rotate(-7deg); } }
@keyframes m-slide  { 0%,60%,100% { transform: translateX(0); } 30% { transform: translateX(0.08em); } }
@keyframes m-blink  { 0%,80%,100% { opacity: 1; } 90% { opacity: 0.35; } }
@keyframes m-flip   { 0%,55%,100% { transform: rotateY(0deg); } 25% { transform: rotateY(180deg); } }
/* 폭풍 — 글자가 제자리를 돌며 원을 그린다. 회오리에 휘말린 모양 (기울지 않는다) */
@keyframes m-tempest {
    0%, 100% { transform: translate(0.18em, 0) scale(1.06); }
    25%      { transform: translate(0, -0.2em) scale(1.16); }
    50%      { transform: translate(-0.18em, 0) scale(1.06); }
    75%      { transform: translate(0, 0.14em) scale(0.92); }
}

/* ---- 스킨 (추가분) --------------------------------------------------- */

/* 밑줄·홑괄호 — 얼룩처럼 안 보이게, 이름에 붙는 형태로 */
.s-underline { border-bottom: 0.07em solid currentColor; padding-bottom: 0.06em; }
/* 홑괄호 — 이름 양옆에 자리를 만들어 두고 그 자리에 넣는다.
   자리를 안 비우면 괄호가 첫 글자·끝 글자 위에 겹쳐 찍힌다. */
.s-bracket { padding: 0 0.85em; }
.s-bracket::before, .s-bracket::after {
    position: absolute; top: 0; font-weight: 400; opacity: 0.5; pointer-events: none;
}
.s-bracket::before { content: "〈"; left: 0; }
.s-bracket::after  { content: "〉"; right: 0; }
.s-ember::before { color: #fdba74; text-shadow: 0 0 6px #f97316;
                   animation: s-twinkle 2.2s ease-in-out infinite; }
.s-shadow { filter: drop-shadow(2px 2px 0 rgba(15,23,42,0.28)); }
.s-dim    { filter: drop-shadow(0 0 4px rgba(148,163,184,0.55)); }

/* 명멸 — 밝기가 숨쉬듯 오르내린다 (흐르는 띠가 아니라서 CSS 로 따로 건다) */
.g-pulse .nm-in { animation: nm-pulse 2.6s ease-in-out infinite; }
@keyframes nm-pulse {
    0%, 100% { filter: brightness(0.78); }
    50%      { filter: brightness(1.55); }
}