/* 두루미 놀이터 · 터치/피드백 레이어 (public/fx/touch.css)
   index.html 은 건드리지 않아요. fx/touch.js 가 <html data-fx="touch"> 를 달 때만 켜지고,
   모든 규칙이 [data-fx~="touch"] 범위 안이라 기존 스타일과 충돌하지 않아요.
   레이아웃(높이·여백)은 바꾸지 않고 transform·opacity·box-shadow·색만 써요.
   모션이 있는 규칙은 전부 prefers-reduced-motion:no-preference 안에 둬서, 모션 줄이기 설정이면 정지해요. */

/* 0) 접근성 보정(review-151) — 모션·JS 와 무관하게 항상 적용돼요. 아래 규칙들은 전부 특이도가 낮아서(:where) 앱의 :focus-visible·테두리 규칙이 있으면 그쪽이 이겨요.
   공유·꾸미기 시트(#shBack · #decoBack)는 <footer> 안에 있어서, 오라클·식물·소개 화면에서 푸터를 visibility:hidden 으로 숨길 때(index.html `body:has(#v-oracle.on) footer{visibility:hidden}`)
   position:fixed 시트까지 같이 숨겨져서 스티키 바 '친구에게 공유'를 눌러도 시트가 안 보였어요(키보드 포커스도 못 들어가요). 시트 자신은 보이게 되돌려요. */
footer .sh-back, footer .deco-back { visibility: visible; }

/* 강제 색상(Windows 고대비): 테두리 없이 색 배경만으로 모양을 낸 버튼은 배경이 사라져 글자만 남아요 → 시스템 색 윤곽선(레이아웃은 그대로)을 더해요. 포커스 링은 앱의 :focus-visible 이 덮어써요 */
@media (forced-colors: active) {
  :where(button, [role="button"], a.btn, a.tcard, summary, .pickbtn, .opt, .chip):not(:focus-visible) { outline: 1px solid ButtonText; outline-offset: -1px; }
  :where(.sh-sheet, .toast) { outline: 2px solid CanvasText; }
  .chip.on, .chip[aria-pressed="true"], .opt.on { outline: 3px solid Highlight; outline-offset: -3px; }   /* 선택된 칩은 배경색이 사라지면 안 고른 것과 같아 보여요 */
}

/* 대비 높이기(prefers-contrast: more): 반투명 바탕 위 글자·옅은 테두리를 또렷하게 */
@media (prefers-contrast: more) {
  .toast { border: 2px solid currentColor; }
  :where(.chip, .tcard, .pickbtn, .opt, .search):not(.on) { border-color: currentColor; }   /* 옅은 1px 테두리(대비 약 1.3:1)를 글자색으로 — 칸의 경계가 또렷해져요(이 모드에서만) */
}

/* 1) 터치 하이라이트 제거 + 더블탭 확대 방지 (모션과 무관해서 항상 적용) */
[data-fx~="touch"] .btn,
[data-fx~="touch"] .opt,
[data-fx~="touch"] .tcard,
[data-fx~="touch"] .chip,
[data-fx~="touch"] .prod,
[data-fx~="touch"] .wc,
[data-fx~="touch"] .pickbtn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* 칩은 눈에 보이는 높이가 44px 미만이라 보이지 않는 영역만 넓혀서(레이아웃 변화 없음) 터치 크기를 맞춘다 */
[data-fx~="touch"] .chip { position: relative; }
[data-fx~="touch"] .chip::before { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; transform: translateY(-50%); }

@media (prefers-reduced-motion: no-preference) {

  /* 2) 눌림 피드백: 누르면 .97 로 살짝 줄고, 떼면 부드럽게 튀어 오르며 돌아온다 */
  [data-fx~="touch"] .btn,
  [data-fx~="touch"] .opt,
  [data-fx~="touch"] .tcard,
  [data-fx~="touch"] .chip,
  [data-fx~="touch"] .prod {
    transition: transform .2s cubic-bezier(.2, .9, .3, 1.25), box-shadow .18s ease, background-color .15s ease, border-color .15s ease, opacity .18s ease, filter .15s ease;
  }
  /* 눌림 표시는 :active 가 아니라 JS 가 붙이는 .fx-t-pressed 로 해요: 손가락이 스크롤을 시작할 때는 :active 가 먼저 켜져서
     카드가 눌려 보이므로, 터치는 약 70ms 동안 움직이지 않은 뒤(또는 탭이 끝난 순간)에만 붙고, 8px 넘게 움직이거나
     pointercancel/스크롤이 오면 바로 취소돼요(touch.js). 마우스·펜은 스크롤 제스처가 없어서 즉시 붙어요. */
  [data-fx~="touch"] .btn:not(:disabled):not([hidden]).fx-t-pressed,
  [data-fx~="touch"] .opt.fx-t-pressed,
  [data-fx~="touch"] .tcard:not(.soon).fx-t-pressed,
  [data-fx~="touch"] .prod:not(.soon).fx-t-pressed {
    transform: scale(.97);
    transition-duration: .08s;
    filter: brightness(.985);
  }
  [data-fx~="touch"] .chip.fx-t-pressed { transform: scale(.94); transition-duration: .08s; }
  /* 홈 상황 입구 칩 · 분류 머리글(접이식)도 같은 쫀득한 눌림(홈 전면 개편 ①) */
  [data-fx~="touch"] .sitbtn, [data-fx~="touch"] #homeTests .hsec>.sec-title { transition: transform .2s cubic-bezier(.2, .9, .3, 1.25), box-shadow .18s ease, background-color .15s ease, border-color .15s ease; }
  [data-fx~="touch"] .sitbtn.fx-t-pressed { transform: scale(.96); transition-duration: .08s; }
  [data-fx~="touch"] #homeTests .hsec>.sec-title.fx-t-pressed { transform: scale(.985); transition-duration: .08s; }
  /* 카드 벽의 카드: 선택되지 않은 카드만 눌림 표시(선택 카드의 기존 확대 연출은 그대로 둔다) */
  [data-fx~="touch"] .wc:not(.sel).fx-t-pressed { transform: translateY(1px) scale(.9); filter: brightness(1.2); }
  /* 앱 CSS 의 :active 눌림(.tcard:active 등)이 스크롤 시작에 먼저 켜지는 것도, 확정(.fx-t-pressed) 전에는 꺼 둔다 */
  [data-fx~="touch"] .btn:active:not(.fx-t-pressed),
  [data-fx~="touch"] .opt:active:not(.fx-t-pressed),
  [data-fx~="touch"] .tcard:active:not(.fx-t-pressed),
  [data-fx~="touch"] .prod:active:not(.fx-t-pressed),
  [data-fx~="touch"] .chip:active:not(.fx-t-pressed) { transform: none; }

  /* 3) 선택지: 누르면 선택 표시가 '톡' 들어가고(색 채움 + 체크 팝 + 링 한 번), 나머지는 살짝 물러난다 */
  [data-fx~="touch"] #opts .opt.sel {
    background: linear-gradient(135deg, #ffe7d8, #fff3ec);
    border-color: var(--pri, #ff7a59);
    transform: none;
    animation: fx-t-sel .22s cubic-bezier(.2, 1.35, .4, 1);
  }
  [data-fx~="touch"] #opts .opt.sel b {
    background: var(--pri, #ff7a59);
    color: #fff;
    font-size: 0;
    animation: fx-t-pop .24s cubic-bezier(.2, 1.7, .4, 1);
  }
  [data-fx~="touch"] #opts .opt.sel b::after { content: "✓"; font-size: 15px; font-weight: 800; line-height: 26px; }
  [data-fx~="touch"] #opts:has(.opt.sel) .opt:not(.sel) { opacity: .5; transform: scale(.985); }

  /* 다음 문항: 선택지가 아래에서 살짝 올라오며 차례로 들어온다(앱의 220ms 전환과 겹쳐서 끝나므로 대기 시간은 그대로) */
  [data-fx~="touch"] #opts .opt { animation: fx-t-in .2s cubic-bezier(.2, .8, .3, 1) backwards; }
  [data-fx~="touch"] #opts .opt:nth-child(2) { animation-delay: .025s; }
  [data-fx~="touch"] #opts .opt:nth-child(3) { animation-delay: .05s; }
  [data-fx~="touch"] #opts .opt:nth-child(n+4) { animation-delay: .075s; }

  /* 문항 번호·질문 글: JS 가 바뀔 때마다 .fx-t-bump 를 잠깐 붙여 준다.
     연출을 다시 시작할 때 강제 리플로우(offsetWidth 읽기)를 피하려고, JS 가 .fx-t-bump ↔ .fx-t-bump2 를 번갈아 붙여요(이름이 바뀌면 애니메이션이 처음부터 다시 돌아요).
     두 클래스는 키프레임 이름만 다르고 내용은 같아요. */
  [data-fx~="touch"] #qn.fx-t-bump { animation: fx-t-bump .32s cubic-bezier(.2, 1.5, .4, 1); }
  [data-fx~="touch"] #qn.fx-t-bump2 { animation: fx-t-bump2 .32s cubic-bezier(.2, 1.5, .4, 1); }
  [data-fx~="touch"] #qt.fx-t-bump { animation: fx-t-in-soft .26s ease-out; }
  [data-fx~="touch"] #qt.fx-t-bump2 { animation: fx-t-in-soft2 .26s ease-out; }

  /* 4) 진행 바: 부드러운 이징 + 바뀔 때 한 번 반짝 */
  [data-fx~="touch"] .progress i {
    position: relative;
    overflow: hidden;
    transition: width .38s cubic-bezier(.2, .8, .2, 1);
    box-shadow: 0 0 8px rgba(255, 170, 90, .45);
  }
  [data-fx~="touch"] .progress i::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .65), rgba(255, 255, 255, 0));
    transform: translateX(0); opacity: 0;
  }
  [data-fx~="touch"] .progress i.fx-t-hit::after { animation: fx-t-sheen .5s ease-out; }
  [data-fx~="touch"] .progress i.fx-t-hit2::after { animation: fx-t-sheen2 .5s ease-out; }

  /* 홈 카테고리 칩: 선택되는 순간 한 번 통통 */
  [data-fx~="touch"] .chip.on { animation: fx-t-chip .28s cubic-bezier(.2, 1.5, .4, 1); }

  /* 5) 포인터 위치에서 퍼지는 리플: 화면에 고정된 단일 요소를 재사용하고, 누른 요소의 모양대로 잘라서 보여 준다 */
  .fx-t-ripple {
    display: none;
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 2147483000;
    clip-path: var(--fx-t-clip, inset(50%));
  }
  .fx-t-ripple.fx-t-go, .fx-t-ripple.fx-t-go2 { display: block; }
  .fx-t-ripple::before {
    content: "";
    position: absolute;
    left: var(--fx-t-x, 0); top: var(--fx-t-y, 0);
    width: var(--fx-t-d, 80px); height: var(--fx-t-d, 80px);
    margin: calc(var(--fx-t-d, 80px) / -2) 0 0 calc(var(--fx-t-d, 80px) / -2);
    border-radius: 50%;
    background: radial-gradient(circle, var(--fx-t-c, rgba(194, 62, 37, .18)) 0%, transparent 70%);
    transform: scale(0);
    opacity: 1;
  }
  .fx-t-ripple.fx-t-go::before { animation: fx-t-rip .5s cubic-bezier(.2, .7, .3, 1) forwards; }
  .fx-t-ripple.fx-t-go2::before { animation: fx-t-rip2 .5s cubic-bezier(.2, .7, .3, 1) forwards; }

  @keyframes fx-t-sel   { 0% { transform: scale(.97); box-shadow: 0 0 0 0 rgba(255, 122, 89, .4); }
                        55% { transform: scale(1.015); }
                        100% { transform: scale(1); box-shadow: 0 0 0 7px rgba(255, 122, 89, 0); } }
  @keyframes fx-t-pop   { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
  @keyframes fx-t-in    { from { opacity: 0; transform: translateY(9px) scale(.985); } }
  @keyframes fx-t-in-soft { from { opacity: .2; transform: translateY(5px); } }
  @keyframes fx-t-bump  { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
  @keyframes fx-t-sheen { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(520%); } }
  @keyframes fx-t-bump2 { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
  @keyframes fx-t-in-soft2 { from { opacity: .2; transform: translateY(5px); } }
  @keyframes fx-t-sheen2 { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(520%); } }
  @keyframes fx-t-rip2  { 0% { transform: scale(0); opacity: .95; } 100% { transform: scale(1); opacity: 0; } }
  @keyframes fx-t-chip  { 0% { transform: scale(.92); } 100% { transform: scale(1); } }
  @keyframes fx-t-rip   { 0% { transform: scale(0); opacity: .95; } 100% { transform: scale(1); opacity: 0; } }
}