/* 달무늬 — 레이아웃 가드 + 고양이 컨셉 모션 레이어
   tw.css 뒤에 로드되는 것을 전제로 함(선택자 우선순위 동일 시 나중 규칙이 이김). */

/* width/height 속성을 붙인 이미지가 세로로 늘어나지 않도록 하는 가드.
   .img-frame(height:100%)는 클래스 선택자라 이 규칙에 영향받지 않음. */
img { height: auto; }

/* ── 고정 공지바가 푸터 텍스트를 덮지 않도록 여백 확보 ──
   --notice-h 는 dalmuni-ui.js가 공지바 실측 높이로 채운다(문구 길이·줄바꿈 대응).
   선택자를 footer[class] (0,1,1)로 둔 이유: tw.css의 .py-12 (0,1,0)를 이겨야 여백이 실제로 먹는다. */
footer[class] { padding-bottom: calc(3rem + var(--notice-h, 0px)); }

/* ── 고정 내비가 섹션 제목을 덮지 않게 ──
   내비는 top-4(16px) + 높이 52px = 상단 68px 를 상시 점유한다. 그 아래로 두 가지를 건다.
   1) 앵커로 이동한 섹션이 내비 밑으로 들어가지 않도록 scroll-margin-top.
   2) 아래로 스크롤하는 동안에는 내비를 접는다(위로 올리면 즉시 복귀) — dalmuni-ui.js 가 클래스를 토글.
   transform 을 여기서 다시 선언하는 이유: tw.css 의 .-translate-x-1/2 와 함수 목록을 맞춰야
   접힘 전이가 matrix 보간으로 튀지 않는다. #dm-nav (1,0,0) 가 클래스 (0,1,0) 를 이긴다. */
section[id] { scroll-margin-top: 5.5rem; }
#dm-nav { transform: translateX(-50%); transition: transform .3s ease, opacity .3s ease; }
html.dm-nav-hidden #dm-nav {
  transform: translateX(-50%) translateY(calc(-100% - 1.25rem));
  opacity: 0; pointer-events: none;
}
.dm-noanim #dm-nav { transition: none !important; }

/* ── 모바일 내비 ── */
.dm-bars { display: block; width: 20px; height: 14px; position: relative; }
.dm-bars i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: #4A3F35; transition: transform .34s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.dm-bars i:nth-child(1) { top: 0; }
.dm-bars i:nth-child(2) { top: 6px; }
.dm-bars i:nth-child(3) { top: 12px; }
[aria-expanded="true"] .dm-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .dm-bars i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .dm-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

#dm-menu {
  transform-origin: 50% 0;
  transition: opacity .26s ease, transform .34s cubic-bezier(.34,1.56,.64,1), visibility .26s;
}
#dm-menu[data-open="false"] { opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.96); pointer-events: none; }
#dm-menu[data-open="true"]  { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }

/* ── 스프링 트랜지션(카드 갸웃용) ── */
.spring {
  transition-property: transform, box-shadow;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}
/* 터치 기기: 탭하면 잠시 갸웃 */
.dm-tap { transform: rotate(var(--tapdeg, 2.5deg)) translateY(-6px); }

/* ── 낮잠 호흡 ── */
@keyframes dm-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  45%      { transform: translate3d(0, -2.5px, 0) scale(1.006); }
}
.breathe {
  animation: dm-breathe var(--bdur, 4.6s) cubic-bezier(.45, 0, .55, 1) infinite;
  animation-delay: var(--bdel, 0s);
  will-change: transform;
}
/* 기울어진 카드(rotate-1 등)의 호흡 — 기존 회전각을 키프레임 안에 유지 */
@keyframes dm-breathe-rot {
  0%, 100% { transform: rotate(var(--rot, 1deg)) translate3d(0, 0, 0) scale(1); }
  45%      { transform: rotate(var(--rot, 1deg)) translate3d(0, -3px, 0) scale(1.005); }
}
.breathe-rot {
  animation: dm-breathe-rot var(--bdur, 5s) cubic-bezier(.45, 0, .55, 1) infinite;
  animation-delay: var(--bdel, 0s);
  will-change: transform;
}

/* ── 발자국 트레일 (좌측 여백) ── */
#dm-paws { position: fixed; inset: 0; pointer-events: none; z-index: 30; display: none; }
@media (min-width: 1280px) { #dm-paws { display: block; } }
.dm-paw {
  position: absolute; width: 30px; height: 30px; color: #C7B4A0;
  opacity: 0; transform: scale(.4) rotate(var(--pr, 0deg));
  transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.dm-paw.on { opacity: .5; transform: scale(1) rotate(var(--pr, 0deg)); }

/* ── 공지바 등장: 슬라이드 + 바운스 1회, 달 아이콘 흔들림 1회 ── */
@keyframes dm-notice-in {
  0%   { transform: translate(-50%, 160%); opacity: 0; }
  55%  { transform: translate(-50%, -10px); opacity: 1; }
  76%  { transform: translate(-50%, 4px); }
  100% { transform: translate(-50%, 0); opacity: 1; }
}
#cms-notice { animation: dm-notice-in .95s cubic-bezier(.22, 1, .36, 1) .55s both; }

/* ── 공지바 노출 구간 제한 (본문 가림 해소) ──
   position:fixed 인 공지바는 본문 중간에서 어떤 여백으로도 가림을 못 막는다.
   footer[class] 의 --notice-h 여백은 푸터만 지키고, 실측 가림 24건은 전부 중간 구간이었다.
   → 문서 상단 구간(scrollY <= 120)에서만 띄우고 내려가면 접는다. 접힘 언어는 내비와 동일.

   등장 애니메이션이 animation-fill-mode:both 라 transform/opacity 를 계속 붙들고 있어
   클래스로 접을 수가 없다. 그래서 애니메이션이 끝난 뒤 dm-notice-ready 로 소유권을
   전이(transition)에 넘긴다 — 애니메이션 100% 프레임과 기본 transform 이 동일해 넘길 때 튀지 않는다. */
#cms-notice.dm-notice-ready { animation: none; transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .28s ease; }
#cms-notice.dm-notice-off   { transform: translate(-50%, calc(100% + 1.5rem)); opacity: 0; pointer-events: none; }
@keyframes dm-moon-wiggle {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(-17deg); }
  83% { transform: rotate(13deg); }
  90% { transform: rotate(-6deg); }
  95% { transform: rotate(2deg); }
}
.dm-moon { display: inline-block; transform-origin: 50% 65%; animation: dm-moon-wiggle 2.2s ease-in-out .55s both; }

/* ── 포커스 링 ──
   UA 기본값(데스크톱 파랑 #005FCC / 모바일 주황)이 브랜드와 무관해 키보드 사용자에게만 톤이 튀었다.
   :focus-visible 만 잡아 마우스 클릭에는 링이 안 뜨게 하고, 색은 텍스트용 진한 코랄을 쓴다
   (#945D47 — 흰 배경 5.36 / 크림 5.07 로 비텍스트 대비 3.0 을 넉넉히 넘긴다).
   outline 은 border-radius 를 따라가므로 알약·둥근 카드에도 그대로 맞는다. */
:focus-visible {
  outline: 3px solid #945D47;
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── 정적 폴백 ── */
@media (prefers-reduced-motion: reduce) {
  .breathe, .breathe-rot, .dm-moon, #cms-notice, .floaty { animation: none !important; }
  .dm-paw { transition: none !important; }
  .spring, #dm-menu, .dm-bars i { transition: none !important; }
  #cms-notice.dm-notice-ready { transition: none !important; }
  html { scroll-behavior: auto; }
}
.dm-noanim .breathe, .dm-noanim .breathe-rot, .dm-noanim .dm-moon,
.dm-noanim #cms-notice, .dm-noanim .floaty { animation: none !important; }
.dm-noanim .dm-paw, .dm-noanim .spring, .dm-noanim #dm-menu, .dm-noanim .dm-bars i { transition: none !important; }
.dm-noanim #cms-notice.dm-notice-ready { transition: none !important; }