/* styles/outing.css — "Sha의 소풍" 디오라마 월드맵 화면 (expedition_spec.md §12.5, §8, §10)
   기존 01-base-tokens.css 토큰 + 깊이킷(--grad-card/--lift/--sheen) 100% 재사용. 신규 색상 변수 생성 금지.
   url() 에셋 경로: styles/ → ../assets/ (styles/daily.css와 동일 규칙)
   진입점 = 타이틀 플로팅 아이콘(.outingFloat, styles/app/04-screens-title.css)이라 이 화면 자체에는
   더 이상 하단 내비 오버랩을 고려할 필요가 없다(body[data-screen="outing"] .titleNav는 기본 display:none). */

/* ── #outing 풀스크린 화면 ─────────────────────────────────────────────────── */
#outing {
  position: fixed;
  inset: 0;
  display: none;    /* body[data-screen="outing"] #outing { display:flex } 는 아래 라우터 규칙 */
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
  isolation: isolate;
}
body[data-screen="outing"] #outing { display: flex; }

/* ── 상단 헤더 (mapBar/mapTitle 재사용 — dailyHeader와 동일 3-child 패턴: 뒤로가기·제목·보조버튼) ── */
.outingHeader {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  width: 100%;
  max-width: none;
  margin: 0;
  flex: 0 0 auto;
  background: transparent;   /* 맵과 동일: 헤더는 디오라마 위에 떠 있게 — 밝은 베이지 바 제거(석재/나무 재질로 통일) */
}
.outingAlbumBtn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 0; padding: 0; flex: 0 0 auto;   /* min-width:0 beats ui.css button min-width:64px (would oval a circle) */
  border-radius: 50%;
  /* 맵 재질과 통일: 밝은 크림 원 → 따뜻한 나무/석재 + 금장 테 + 크림 아이콘 */
  background: radial-gradient(circle at 36% 28%, #77592f, #493619);
  border: 2px solid #caa15e;
  box-shadow: 0 3px 7px rgba(0,0,0,.42), inset 0 1px 2px rgba(255,240,200,.28);
  color: #fff6e2;
  cursor: pointer;
}
.outingAlbumBtn[hidden] { display: none; }
.outingAlbumBtn .ico { width: 19px; height: 19px; }
.outingAlbumCount {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: var(--s3); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.outingAlbumCount:empty { display: none; }
@keyframes outingAlbumBump {
  0%   { transform: scale(1); animation-timing-function: ease-in-out; }
  34%  { transform: scaleX(1.398) scaleY(1.209); animation-timing-function: ease-in-out; }   /* 부피는 옛 1.3배 그대로, 방향만 눌림으로 */
  64%  { transform: scaleX(.955) scaleY(1.048); animation-timing-function: ease-in-out; }
  86%  { transform: scaleX(1.018) scaleY(.985); animation-timing-function: ease-in-out; }
  100% { transform: scale(1); }
}
.outingAlbumBtn.bump { animation: outingAlbumBump .60s linear both; }

/* ── 맵 영역 — 디오라마 지도(assets/outing/map.webp, 불투명) 위에 핀/Sha/하단바를 오버레이 ────────── */
.outingMapWrap {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  overflow: hidden;
}
.outingMap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  background: url('../assets/outing/map.webp') center / cover no-repeat;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* 핀 3개 — 좌표는 map.webp 아트 기준(부모가 브라우저에서 미세조정 예정). Sha 이동 좌표는 이 값을
   getBoundingClientRect로 읽어 따라가므로(game/outingScreen.js), 여기 %값만 바꾸면 자동으로 맞는다. */
/* .outingPin은 <button>이라 ui.css의 범용 button{} 크롬(box-shadow 타일·:active{transform:translateY(2px)}가
   여기 centering transform을 통째로 덮어씀·:disabled{opacity:.42})을 그대로 물려받는다 — 전부 명시적으로
   리셋한다(2026-06-30 #reviewSha 함정 메모와 동일 부류). disabled는 aria-disabled로 대체(JS 참고). */
.outingPin {
  position: absolute;
  width: 112px; height: 112px;
  transform: translate(-50%, -50%);
  display: block;
  padding: 0; margin: 0;
  min-width: 0;
  border: none; background: transparent; box-shadow: none; outline: none; appearance: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .2s ease;
}
.outingPin[data-dest="forest"]   { left: 27%; top: 23%; }
.outingPin[data-dest="ruins"]    { left: 80%; top: 48%; }
.outingPin[data-dest="seashore"] { left: 27%; top: 65%; }
.outingPin[hidden] { display: none; }
.outingPin:hover { filter: none; box-shadow: none; }
.outingPin:active { transform: translate(-50%, -50%) scale(.9); box-shadow: none; filter: none; }
.outingPin[aria-disabled="true"] { pointer-events: none; }

.outingPinMark {
  --pin-scale: 1;
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #fffaf0 0%, #cdeff2 32%, var(--s3) 80%);
  border: 2px solid #fff6e2;
  box-shadow: 0 3px 7px rgba(0,0,0,.4), inset 0 -2px 4px rgba(0,0,0,.2), 0 0 0 3px rgba(255,209,92,.28);
  transform: translate(-50%, -50%) scale(var(--pin-scale));
  transform-origin: center;
  animation: outingPinPulse 2.6s ease-in-out infinite;
}
/* 소풍지 아트(assets/outing/pin.webp)가 있으면 CSS 젬 대신 그 이미지를 마커로 쓴다 — JS가 .has-pin-art 부여.
   없으면 위 CSS 젬이 그대로(자동 폴백, §D). */
.outingPinMark.has-pin-art {
  width: 94px; height: 112px; border-radius: 0;
  background: url('../assets/outing/pin.webp') center bottom / contain no-repeat;
  border: none; box-shadow: none; animation: none;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.38));
}
.outingPin[data-dest="forest"] .outingPinMark.has-pin-art {
  background-image: url('../assets/outing/pin_forest.webp');
}
.outingPin[data-dest="ruins"] .outingPinMark.has-pin-art {
  background-image: url('../assets/outing/pin_ruins.webp');
}
.outingPin[data-dest="seashore"] .outingPinMark.has-pin-art {
  background-image: url('../assets/outing/pin_seashore.webp');
}
@keyframes outingPinPulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(255,209,92,.26); }
  50%      { box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 0 6px rgba(255,209,92,.1); }
}
.outingPinLabel {
  position: absolute;
  left: 50%; top: calc(50% + 40px);
  transform: translateX(-50%);
  padding: 2px 8px; border-radius: 999px;
  background: rgba(38,28,15,.68); color: #fff6e2;
  font-size: 12px; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  white-space: nowrap;
}
.outingPinOwned {
  position: absolute;
  left: 50%; top: calc(50% + 59px);
  transform: translateX(-50%);
  padding: 1px 6px; border-radius: 999px;
  background: rgba(38,28,15,.5); color: #ffe9b0;
  font-size: 12px; font-weight: 800;
  white-space: nowrap;
}
.outingPinOwned[hidden] { display: none; }

.outingPin.selected { transform: translate(-50%, -50%) translateY(-2px); }
.outingPin.selected .outingPinMark {
  --pin-scale: 1.08;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 4px var(--s3);
}
.outingPin.active .outingPinMark { animation: outingPinPulse 1.3s ease-in-out infinite; filter: saturate(1.25); }
.outingPin.away { opacity: .5; }   /* 소풍 중인 다른 핀은 살짝 죽여 지금 핀에 시선 집중 */
/* has-pin-art일 때 selected/active: box-shadow 링(이미지 박스에 사각으로 보임) 대신 drop-shadow glow */
.outingPin.selected .outingPinMark.has-pin-art,
.outingPin.active .outingPinMark.has-pin-art {
  box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.42)) drop-shadow(0 0 9px rgba(255,209,92,.75));
}

/* ── Sha 스프라이트 — 정지 이미지 1장, left/top(px, JS)+CSS transition으로만 이동(프레임 애니 금지, §8) ── */
.outingSha {
  position: absolute;
  left: 50%; top: 80%;   /* game/outingScreen.js SHA_HOME과 동일 값 — JS가 첫 렌더에서 즉시 덮어씀 */
  width: clamp(112px, 26vw, 138px);
  max-width: none;
  z-index: 3;
  transform: translate(-50%, -50%) scale(1);
  filter: drop-shadow(0 6px 12px rgba(60,30,0,.28));
  pointer-events: none;
  opacity: 1;
  transition: left .95s cubic-bezier(.3,.85,.3,1), top .95s cubic-bezier(.3,.85,.3,1),
              transform .95s cubic-bezier(.3,.85,.3,1), filter .5s ease;
  animation: outingShaIdle 3.6s ease-in-out infinite;
}
.outingSha.at-dest {
  transform: translate(-50%, -50%) scale(.55);
  /* 소풍 중: 살짝 흐리되 따뜻한 금빛 glow로 "저 멀리서 탐험 중" 생동감(§C). animation:none은 출발/복귀의
     scale 트랜지션을 살리려 유지(여기 transform 애니를 걸면 축소 전환이 끊긴다). */
  filter: drop-shadow(0 4px 8px rgba(60,30,0,.22)) drop-shadow(0 0 10px rgba(255,209,92,.6)) brightness(.92) saturate(.9);
  animation: none;
}
.outingSha.postcard-focus {
  opacity: .34;
  filter: drop-shadow(0 5px 8px rgba(60,30,0,.18)) brightness(.9) saturate(.86);
}
@keyframes outingShaIdle {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
  50%      { transform: translate(-50%, -50%) translateY(-4%) scale(1.015); }
}

/* ── 하단 컨트롤 바 — 맵 안 양피지 패널 위 오버레이 ─────────────────────────────── */
.outingBottomBar {
  position: absolute; left: 8%; right: 8%; bottom: 4.5%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.outingBottomText {
  margin: 0; padding: 0 8px;
  min-height: 1em;
  /* 13px는 빈약 → 맵 각인 텍스트급으로 키움(오너 2026-07-25). 밝은 양피지 위라 금빛 대신 진한 나무색+엠보스. */
  color: #4a3214; font-size: 18px; font-weight: 900; letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 2px 3px rgba(120,90,50,.22);
}
.outingSendBtn { width: 100%; max-width: 260px; }
.outingSendBtn[hidden] { display: none; }

/* ── 헤더 제목 = 맵의 "맵" 명판과 동일 재질(§A 개정) — 깎인 나무 배너(row_bar.png) + 금빛 각인 텍스트.
   밝은 크림 pill(겉돌던 원인) 폐기 → 맵/섹션 배너와 재질 통일. #map .levelTitle과 같은 스타일. ── */
.outingHeader .outingHeaderTitle {
  flex: 0 0 auto;
  height: 48px; line-height: 48px;
  padding: 0 26px;
  border: none; box-shadow: none; border-radius: 0;
  background: url('../assets/badge/row_bar.png') center / 100% 100% no-repeat;
  color: #fff6e2; font-weight: 900; font-size: 18px;
  text-shadow: 0 2px 0 #4a3214, -1px 0 0 #4a3214, 1px 0 0 #4a3214, 0 2px 5px rgba(0,0,0,.5);
  white-space: nowrap;
}

/* ── 하단 상태 리치화(§B) — 상태문 + 여정 진행바 ── */
.outingProgress {
  width: 100%; max-width: 260px; height: 8px;
  border-radius: 999px;
  background: rgba(90,60,25,.22);
  box-shadow: inset 0 1px 2px rgba(60,40,15,.35);
  overflow: hidden;
}
.outingProgress[hidden] { display: none; }
.outingProgressFill {
  display: block; height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--s2), var(--s3));
  box-shadow: 0 0 6px rgba(255,209,92,.6);
  transition: width .6s ease;
}

/* 전역 타이틀 설정 톱니는 전면 디오라마 위에 겹쳐 어색 → 소풍 화면에선 숨긴다(뒤로가면 타이틀에서 접근).
   하단 허브 내비를 소풍에서 숨긴 것과 같은 원칙. */
body[data-screen="outing"] #titleSettings { display: none; }

/* 방금 도착한 엽서 토스트 — 맵 위, 하단바 바로 위에서 잠깐 나타났다 앨범 버튼으로 정리(§12 연출 원칙) */
.outingPostcardToast {
  position: absolute; left: 50%; bottom: 15%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}

/* ── 알림 opt-in 인라인 카드 (강제 팝업 아님 — 흐름 안의 카드, §9) — 맵 아래 여백에 자연스럽게 놓인다 ── */
.outingNotifyAsk {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px);
  border-radius: 18px 18px 0 0;
  background: var(--grad-card);
  border: 1px solid var(--line);
  border-width: 1px 0 0;
  box-shadow: var(--lift-sm), var(--sheen);
  text-align: center;
}
.outingNotifyAsk[hidden] { display: none; }   /* author display:flex would otherwise out-specificity UA [hidden] */
.outingNotifyAsk p { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.outingNotifyAskBtns { display: flex; gap: 10px; }

/* ── 엽서첩 오버레이 ───────────────────────────────────────────────────────── */
.outingAlbum {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(24, 17, 8, .55);
  z-index: 8;
}
.outingAlbum[hidden] { display: none; }   /* author display:flex would otherwise out-specificity UA [hidden] */
.outingAlbumCard {
  position: relative;
  width: 100%; max-width: 400px; max-height: 84vh;
  overflow-y: auto;
  /* 게임 모달과 동일한 석재-태블릿 프레임(modal_canvas.webp 9-slice, 44px) — 밝은 크림 카드 폐기, 재질 통일 */
  border: 44px solid transparent;
  border-image: url('../assets/common/modal_canvas.webp') 120 fill / 44px / 0 stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.5));
  padding: 2px 0 6px;
}
.outingAlbumClose {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; min-width: 0; padding: 0;   /* min-width:0 beats ui.css button min-width:64px */
  border-radius: 50%;
  /* 맵 재질: 나무/석재 + 금장 테 + 크림 아이콘 */
  background: radial-gradient(circle at 36% 28%, #77592f, #493619);
  border: 2px solid #caa15e;
  box-shadow: 0 2px 5px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,240,200,.25);
  color: #fff6e2;
  cursor: pointer;
}
.outingAlbumClose .ico { width: 16px; height: 16px; }
/* 제목 = 헤더와 동일한 깎인 나무 배너(row_bar.png) + 금빛 각인 텍스트 */
.outingAlbumHeading {
  width: fit-content; margin: 0 auto 14px; padding: 0 22px;
  height: 42px; line-height: 42px;
  background: url('../assets/badge/row_bar.png') center / 100% 100% no-repeat;
  color: #fff6e2; font-weight: 900; font-size: 17px;
  text-shadow: 0 2px 0 #4a3214, -1px 0 0 #4a3214, 1px 0 0 #4a3214, 0 2px 5px rgba(0,0,0,.5);
  text-align: center; white-space: nowrap;
}
.outingAlbumEmpty { margin: 10px 0 0; text-align: center; font-size: 15px; color: #6b5333; }
.outingAlbumEmpty[hidden] { display: none; }

/* 엽서 그리드 (앨범 안 전체 목록 + 토스트가 재사용) */
.outingPostcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 2px 2px;
}
.outingPostcard {
  position: relative;
  aspect-ratio: 746 / 1013;
  overflow: visible;
  border: none;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 7px 10px rgba(58,36,12,.28));
  isolation: isolate;
}
.outingPostcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: url('../assets/outing/postcard_frame.webp') center / 100% 100% no-repeat;
}
.outingPostcardToast {
  position: absolute;
  left: 50%;
  bottom: 15%;
  z-index: 5;
  width: min(56vw, 218px);
  filter: drop-shadow(0 13px 20px rgba(28,18,8,.42));
  pointer-events: none;
}
.outingDestBg {
  position: absolute;
  left: 10.86%; right: 11.39%; top: 9.48%; bottom: 10.56%;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: 14px;
}
.outingDestBg[data-dest="forest"]   { background: linear-gradient(160deg, var(--bg2), var(--panel) 60%, var(--bg) 100%); }
.outingDestBg[data-dest="seashore"] { background: linear-gradient(160deg, var(--bg2), var(--panel) 60%, var(--bg) 100%); }
.outingDestBg[data-dest="ruins"]    { background: linear-gradient(160deg, var(--bg2), var(--panel) 60%, var(--bg) 100%); }
.outingDestImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.outingPostcardSha {
  position: absolute;
  left: 50%; bottom: 1.5%;
  z-index: 2;
  width: 48%;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 8px rgba(50,28,8,.33));
  pointer-events: none;
}
.outingPostcardLabel {
  position: absolute;
  left: 50%; right: auto; bottom: 5.6%;
  z-index: 4;
  min-width: 48%; max-width: 70%;
  transform: translateX(-50%);
  padding: 3px 8px 4px;
  border-radius: 999px;
  background: rgba(255,246,226,.88);
  border: 1px solid rgba(190,150,83,.82);
  color: #4a3214;
  font-size: 12px; font-weight: 900; text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
  box-shadow: 0 2px 4px rgba(70,45,15,.18);
  white-space: nowrap;
}
/* ⚠️ `translateX(-50%)`(가로 중앙정렬)와 함수 **순서**를 그대로 지킨다 — scale 뒤의 translateY는
   스케일을 탄 이동이라 순서를 바꾸면 거리가 달라진다. 회전은 착지(44%)에서 대부분 풀리고
   그 뒤로는 눌림/늘어남만 남는다(정본 §4.6-4: 자리를 잡은 뒤엔 움직이지 않는다). */
@keyframes outingPostcardLand {
  0%   { transform: translateX(-50%) scaleX(.62) scaleY(.74) translateY(18px) rotate(-2deg); opacity: .2; animation-timing-function: cubic-bezier(.2,.72,.3,1); }
  44%  { transform: translateX(-50%) scaleX(1.14) scaleY(.95) translateY(0) rotate(.6deg); opacity: 1; animation-timing-function: ease-in-out; }
  66%  { transform: translateX(-50%) scaleX(.955) scaleY(1.048) translateY(0) rotate(.15deg); opacity: 1; animation-timing-function: ease-in-out; }
  85%  { transform: translateX(-50%) scaleX(1.02) scaleY(.982) translateY(0) rotate(0); opacity: 1; animation-timing-function: ease-in-out; }
  100% { transform: translateX(-50%) scale(1) translateY(0) rotate(0); opacity: 1; }
}
.outingPostcard.justLanded { animation: outingPostcardLand .9s linear both; }
.outingPostcard.justLanded::before {
  content: "";
  position: absolute;
  inset: -7%;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,241,184,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 22%, rgba(132,231,209,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 76%, rgba(255,211,90,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 26% 80%, rgba(255,247,223,.9) 0 1.5px, transparent 3px);
  animation: outingPostcardSpark .88s ease-out both;
}
@keyframes outingPostcardSpark {
  0% { opacity: 0; transform: scale(.82); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.12); }
}

.outingRouteMote {
  position: absolute;
  z-index: 4;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, #fff8df 0 22%, var(--s2) 56%, transparent 72%);
  box-shadow: 0 0 8px rgba(255,209,92,.7);
  animation: outingRouteMote .78s ease-out both;
}
.outingRouteMote.returning {
  background: radial-gradient(circle, #fff8df 0 22%, var(--s3) 56%, transparent 72%);
  box-shadow: 0 0 8px rgba(62,196,170,.62);
}
@keyframes outingRouteMote {
  0% { opacity: 0; transform: scale(.45); }
  32% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45) translateY(-5px); }
}
.outingArrivalGlow {
  position: absolute;
  z-index: 3;
  width: 76px; height: 42px;
  margin: -21px 0 0 -38px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,232,145,.65), rgba(255,232,145,.22) 45%, transparent 72%);
  animation: outingArrivalGlow .72s ease-out both;
}
@keyframes outingArrivalGlow {
  0% { opacity: 0; transform: scale(.55); }
  36% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.55); }
}

/* ── 접근성/모션 축소 ──────────────────────────────────────────────────────── */
html[data-motion="reduced"] {
  .outingPin, .outingPinMark { animation: none; }
  .outingSha { transition: none; animation: none; }
  .outingPostcard.justLanded { animation: none; }
  .outingPostcard.justLanded::before { animation: none; opacity: 0; }
  .outingRouteMote, .outingArrivalGlow { display: none; }
  .outingAlbumBtn.bump { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .outingPin, .outingPinMark { animation: none; }
  .outingSha { transition: none; animation: none; }
  .outingPostcard.justLanded { animation: none; }
  .outingPostcard.justLanded::before { animation: none; opacity: 0; }
  .outingRouteMote, .outingArrivalGlow { display: none; }
  .outingAlbumBtn.bump { animation: none; }
}

/* 소풍 「보내기」 — 이 화면의 주 행동. hidden일 때는 규칙이 닿지 않는다. */
#outingSendBtn:not([hidden]) { animation: ctaNudge 5.8s ease-in-out 5.0s infinite; }
html[data-motion="reduced"] #outingSendBtn:not([hidden]) { animation: none; }