/* ============================================================
   하단 좌측 고정 아이콘 애니메이션
   · 노트(book): 5초마다 펜이 나타나 필기 동작
   · 사람+톱니(setting): 톱니바퀴만 계속 회전
   ============================================================ */

/* ---------- 노트: 펜 필기 ---------- */
.hdr-note-host { position: relative; overflow: hidden; }

.hdr-pen {
    position: absolute;
    width: 46%;
    height: 46%;
    right: 12%;
    top: 16%;
    pointer-events: none;
    transform-origin: 18% 82%;   /* 펜촉(왼쪽 아래) 기준 회전 */
    opacity: 0;
    animation: hdrPenWrite 5s ease-in-out infinite;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

@keyframes hdrPenWrite {
    0%   { opacity: 0; transform: translate(1px, -1px) rotate(-6deg); }
    5%   { opacity: 1; transform: translate(1px, -1px) rotate(-6deg); }
    9%   { transform: translate(-2px, 1px) rotate(-13deg); }
    13%  { transform: translate(2px, 2px) rotate(-4deg); }
    17%  { transform: translate(-2px, 1px) rotate(-13deg); }
    21%  { transform: translate(2px, 2px) rotate(-4deg); }
    25%  { transform: translate(-1px, 0) rotate(-9deg); }
    29%  { opacity: 1; transform: translate(1px, -1px) rotate(-6deg); }
    35%  { opacity: 0; transform: translate(1px, -1px) rotate(-6deg); }
    100% { opacity: 0; }
}

/* ---------- 사람+톱니: 톱니 회전은 SVG 자체(SMIL)로 처리 ----------
   톱니 회전은 header.php의 <g class="hdr-gear-spin"> 안
   <animateTransform>가 담당합니다. (브라우저/CSP 영향 없음) */

/* 인라인 svg 기본 채움(검정 아이콘) */
.hdr-setting-svg { fill: #000000; display: block; }

/* 접근성: 모션 최소화 설정 시 펜 정지 */
@media (prefers-reduced-motion: reduce) {
    .hdr-pen { animation: none; opacity: 0; }
}