/* 어디든 v4 앱 셸: 하단 탭바·페이지 전환·눌림 반응·PWA 보정. common.css 다음에 로드하며 v4 로 옮긴 페이지만 이 파일을 링크한다 */

:root {
  --ds-canvas: #f2f4f6;
  --ds-card: #ffffff;
  --ds-ink: #10131a;
  --ds-ink-2: #4a5058;
  --ds-ink-3: #6a7280;
  --ds-hairline: #e8ebf0;
  --ds-purple: #6847e8;
  --ds-r: 20px;
  --ds-r-s: 14px;
  --ds-tab-h: 58px;
  --ds-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ⛔ 2026-08-28 철거. [페이지 전환]을 켜 두면 크롬 149·151 에서 다음 장이 **영영 안 그려진다**.
   실측: 홈에서 아무 칸이나 누르면 주소는 바뀌는데 paint 0, 스크린샷조차 30초 시간 초과(합성기가 멎음).
   DOM 은 다 들어와 있어서 서버·링크 점검으로는 안 잡힌다. ds.css 를 부르는 68쪽 전부가 대상이었다.
   부드러운 전환보다 화면이 그려지는 게 먼저다. 크롬이 고쳐지면 그때 다시 켠다.
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; } */

/* [손가락 반응] 누르는 순간 반응이 없으면 웹처럼 느껴진다 */
a, button { -webkit-tap-highlight-color: transparent; }
.ds-tap { touch-action: manipulation; user-select: none; }

/* [하단 탭바] 900px 이하에서만 나타난다. 옛 .mobile-bottom-nav 와 클래스가 다르므로 규칙이 서로 안 부딪힌다 */
.app-tabbar { display: none; }

@media (max-width: 900px) {
  .app-tabbar {
    position: fixed; z-index: 90; right: 0; bottom: 0; left: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--ds-tab-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--ds-hairline);
  }
  .app-tabbar a {
    min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--ds-ink-3); font-family: "SUIT", sans-serif; font-size: 10.5px; line-height: 13px; font-weight: 500;
    white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .app-tabbar svg { width: 23px; height: 23px; flex: 0 0 23px; }
  .app-tabbar a.is-active { color: var(--ds-purple); font-weight: 700; }
  .app-tabbar a:active svg { transform: scale(.9); }
  .app-tabbar svg { transition: transform .12s var(--ds-ease); }
  /* 가운데 상담 칸은 올라앉은 원형 단추다 */
  .app-tabbar .tab-cta { color: var(--ds-ink-3); }
  .app-tabbar .tab-cta-ico {
    width: 46px; height: 46px; margin-top: -20px; display: grid; place-items: center;
    color: #fff; background: var(--ds-purple); border-radius: 50%;
    box-shadow: 0 8px 20px rgba(104, 71, 232, .34);
    transition: transform .12s var(--ds-ease);
  }
  .app-tabbar .tab-cta:active .tab-cta-ico { transform: scale(.93); }
  .app-tabbar .tab-cta svg { width: 24px; height: 24px; }
  /* 탭바가 본문 끝을 가리지 않게 바닥을 비운다 */
  body { padding-bottom: calc(var(--ds-tab-h) + env(safe-area-inset-bottom) + 8px); }
  /* 옛 하단바가 남아 있어도 겹치지 않게 숨긴다 */
  .mobile-bottom-nav, .mobile-lead-bar, .mobile-floating-actions { display: none !important; }
}

/* [스크롤 등장] 화면에 들어올 때 살짝 올라온다. 움직임을 싫어하는 설정이면 끈다 */
.ds-reveal { opacity: 0; transform: translateY(16px); }
.ds-reveal.is-in { opacity: 1; transform: none; transition: opacity .55s var(--ds-ease), transform .55s var(--ds-ease); }

/* [가로 레일] 손가락으로 밀면 카드가 착 붙는다 */
.ds-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ds-rail::-webkit-scrollbar { display: none; }
.ds-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .ds-reveal { opacity: 1; transform: none; transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .app-tabbar a:active svg, .app-tabbar .tab-cta:active .tab-cta-ico { transform: none; }
}