/* 화면 전환·움직임 (2026-11) — _common.js 짝. 모든 화면에 실린다.
   - 흰 화면 없애기: 하늘 바탕 그림이 뜨기 전에도 같은 색이 깔리게
   - 화면 전환: 브라우저 화면 전환(View Transitions)으로 앞 화면은 살짝 가라앉으며 사라지고, 새 화면은 살짝 떠오르며 나타난다.
     맨 위 띠·오른쪽 아래 띠는 제자리에 머문다
   - 누르면 바로: 맨 위 진행 띠 + 화면이 살짝 흐려짐(서버 응답을 기다리는 동안)
   - 단추·카드·메뉴: 올리면 살짝 뜨고, 누르면 살짝 눌림
   '원작 그대로'(html.farm-skin 없음)에서는 바꾸지 않는다. 화면 전환 효과는 _common.js 가 그때 끈다. */

/* ---------- 화면 전환 (Chrome·Edge 126+, Safari 18.2+. 안 되는 브라우저는 그냥 넘어간다) ---------- */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .42s; }
::view-transition-old(root) { animation: fsVtOut .26s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: fsVtIn .42s cubic-bezier(.16, 1, .3, 1) .04s both; }
@keyframes fsVtOut { to { opacity: 0; transform: scale(.985); filter: blur(2px); } }
@keyframes fsVtIn { from { opacity: 0; transform: translateY(10px) scale(1.006); filter: blur(1px); } }
html.farm-skin .gnb.fs-top { view-transition-name: fs-top; }
html.farm-skin #__farm_badge { view-transition-name: fs-badge; }
::view-transition-group(fs-top), ::view-transition-group(fs-badge) { animation-duration: .3s; }
::view-transition-old(fs-top), ::view-transition-new(fs-top),
::view-transition-old(fs-badge), ::view-transition-new(fs-badge) { animation: none; mix-blend-mode: normal; }
::view-transition-old(fs-top) { display: none; }
::view-transition-old(fs-badge) { display: none; }

/* ---------- 흰 화면 없애기 ---------- */
/* 하늘 바탕 그림(bg_body.gif: 맨 위 하늘색 → 750px 아래로 흰색)과 같은 색을 그림 밑에 깐다 */
html.farm-skin body[background*="bg_body"] {
  background-color: #eaf8fd;
  background-image: url(/_img/new_pet/bg_body.gif), linear-gradient(#79dbf3 0, #c9eefa 360px, #fff 760px);
  background-repeat: repeat, no-repeat;
  background-size: auto, 100% 760px;
}
html.farm-skin { background-color: #eaf8fd; }
html.farm-skin.farm-pop-open, html.farm-skin-pop { background-color: transparent; }

/* ---------- 누르면 바로: 진행 띠 ---------- */
#fs-progress {
  position: fixed; left: 0; top: 0; z-index: 2147483646; width: 100%; height: 3px; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, #b8f04a, #43a82b 45%, #2f8a1c 70%, #ffd34d);
  box-shadow: 0 0 12px rgba(67, 168, 43, .55), 0 0 2px rgba(67, 168, 43, .8);
  border-radius: 0 3px 3px 0;
}
#fs-progress::after {                 /* 앞머리 반짝임 */
  content: ""; position: absolute; right: 0; top: -3px; width: 90px; height: 9px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
}
html.fs-leaving #fs-progress { opacity: 1; animation: fsProg 9s cubic-bezier(.06, .7, .2, 1) forwards; }
@keyframes fsProg { 0% { transform: scaleX(0); } 6% { transform: scaleX(.32); } 30% { transform: scaleX(.62); } 70% { transform: scaleX(.84); } 100% { transform: scaleX(.94); } }
#fs-wait {                             /* 0.7초 넘게 걸리면 가운데 위에 작게 */
  position: fixed; left: 50%; top: 52px; z-index: 2147483646; transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 6px 24px rgba(40, 90, 10, .18), 0 0 0 1px rgba(67, 168, 43, .18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 700 12px/1 "Pretendard", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; color: #2f8a1c; letter-spacing: -.2px;
  transition: opacity .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
#fs-wait i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(67, 168, 43, .25); border-top-color: #43a82b; animation: fsSpin .8s linear infinite; }
html.fs-leaving.fs-slow #fs-wait { opacity: 1; transform: translate(-50%, 0); }
@keyframes fsSpin { to { transform: rotate(360deg); } }
/* 화면이 살짝 흐려짐: 눌렀다는 느낌만, 글자는 읽힌다 */
/* (filter·transform 은 쓰지 않는다: 안에 든 position:fixed 요소의 기준이 바뀌어 잠깐 흔들릴 수 있어서 투명도만) */
html.farm-skin body > * { transition: opacity .35s ease; }
html.fs-leaving body > *:not(#fs-progress):not(#fs-wait):not(#__farm_badge):not(.farm-pop):not(.farm-pop-dim) { opacity: .6; }
html.fs-leaving, html.fs-leaving * { cursor: progress !important; }

/* ---------- 들어올 때(화면 전환이 없는 브라우저만): 살짝 떠오름 ---------- */
html.farm-skin.fs-novt body > *:not(#__farm_badge):not(#fs-progress):not(#fs-wait):not(.farm-pop):not(.farm-pop-dim) { animation: fsEnter .38s ease-out both; }
@keyframes fsEnter { from { opacity: 0; } }

/* ---------- 단추·카드·메뉴: 부드러운 반응 ---------- */
html.farm-skin .fs-btn, html.farm-skin .dk .btn, html.farm-skin input[type=button], html.farm-skin input[type=submit],
html.farm-skin button:not([data-z]) {
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease, filter .18s ease, background-color .18s ease;
  will-change: transform;
}
html.farm-skin .fs-btn:hover, html.farm-skin .dk .btn:not([disabled]):hover { transform: translateY(-1.5px); filter: brightness(1.05) saturate(1.05); }
html.farm-skin .fs-btn:active, html.farm-skin .dk .btn:not([disabled]):active,
html.farm-skin input[type=button]:active, html.farm-skin input[type=submit]:active, html.farm-skin button:not([data-z]):active {
  transform: translateY(1px) scale(.965); filter: brightness(.97); transition-duration: .08s;
}
html.farm-skin .fs-card { transition: box-shadow .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1); }
html.farm-skin .fs-tile { transition: transform .26s cubic-bezier(.16, 1, .3, 1), box-shadow .26s ease; }
html.farm-skin a.fs-tile:hover, html.farm-skin .fs-tile:has(a:hover) { transform: translateY(-2px); }
html.farm-skin .fs-menu a { transition: background-color .2s ease, transform .22s cubic-bezier(.16, 1, .3, 1), color .2s ease; }
html.farm-skin .fs-menu a:hover { transform: translateX(3px); }
html.farm-skin .fs-menu a:active { transform: translateX(1px) scale(.98); }
html.farm-skin a[href] img { transition: filter .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1); }
html.farm-skin :focus-visible { outline: 2px solid rgba(67, 168, 43, .6); outline-offset: 2px; border-radius: 6px; }
/* 새 화면(기부함 등)의 상자·카드 */
html.farm-skin .dk .box, html.farm-skin .dk .card { transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease; }
html.farm-skin .dk .card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(120, 90, 0, .14); }
html.farm-skin .dk .bar i { transition: width .8s cubic-bezier(.16, 1, .3, 1); }

/* ---------- 화면 안 창(팝업): 열 때·닫을 때 부드럽게 ---------- */
html.farm-skin .farm-pop { animation: fsPopIn .34s cubic-bezier(.16, 1, .3, 1) both; }
html.farm-skin .farm-pop.farm-pop-out { animation: fsPopOut .17s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }
html.farm-skin .farm-pop-dim { transition: opacity .28s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@keyframes fsPopIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
/* 창 안 내용이 뜨기 전: 흰 빈칸 대신 작은 로딩 표시, 뜨면 부드럽게 나타남(못 알아채도 1.2초 뒤에는 꼭 보임) */
html.farm-skin .farm-pop-body::before {
  content: ""; position: absolute; left: 50%; top: 38%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 3px solid rgba(67, 168, 43, .18); border-top-color: #43a82b; animation: fsSpin .8s linear infinite;
}
html.farm-skin .farm-pop-body iframe { position: relative; z-index: 1; background: transparent; opacity: 0; animation: fsShowLate .01s 1.2s forwards; }
html.farm-skin .farm-pop-body iframe.fs-loaded { opacity: 1; animation: none; transition: opacity .28s ease; }
@keyframes fsShowLate { to { opacity: 1; } }
@keyframes fsPopOut { to { opacity: 0; transform: translateY(6px) scale(.97); } }

/* ---------- 움직임 줄이기를 켠 사람 ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.farm-skin *, html.farm-skin *::before, html.farm-skin *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  #fs-progress { display: none; }
}
@media print { #fs-progress, #fs-wait { display: none !important; } }

/* ---------- 원작 상표가 박힌 도움말 플래시(「쥬니버 도우미」 곰)는 숨긴다 — 글자를 바꿀 수 없는 플래시라서. 원작 그대로에서도 ---------- */
object#visualzone, embed[src*="help/right_farm.swf"], ruffle-embed[src*="help/right_farm.swf"], ruffle-object[data*="help/right_farm.swf"] { display: none !important; }