/* 파마리코드 apple-design 저위험 수정 (2026-10-30) — 24_apple-design_점검_2026-10-30.md 1·2·4·5·7·8번
   v2.css·v3.css는 그대로 두고, v3.css 다음 줄에서 선택자를 덮어쓰기만 한다. JS 없음.
   DESIGN.md 토큰만 사용. 블러·그림자·기울임 없음. 움직임 줄이기에서는 v2.css의 「완성 상태 즉시 표시」를 그대로 따른다. */

/* 1. 누르는 순간 반응(터치) — 기본 파란 탭 네모 끄고, 누르면 살짝 작아짐 */
/* iOS Safari는 JS 없이는 :active를 거의 안 보여 주므로 기본 탭 표시를 그대로 둔다(-webkit-touch-callout 지원 = iOS) */
@supports not (-webkit-touch-callout:none){html{-webkit-tap-highlight-color:transparent}}
.btn,.hd .go,.dock-btn,.sns,.scene-tab,.vl-card,.note-card a,.qlist a,.tlink,summary{transition-property:transform,background-color,color,border-color}
.btn:active,.hd .go:active,.dock-btn:active,.sns:active,.vl-card:active,.tlink:active{transform:scale(.97);transition:transform 100ms ease-out}
.js-motion .vl-card[data-rise].pre.in:active{transform:scale(.97);transition:transform 100ms ease-out}   /* 떠오르기 끝난 카드도 같게(v2.css 314보다 우선) */
.scene-tab:active{background:var(--cream)}
@media (hover:none){
  .qlist a:active{transform:scale(.97);transition:transform 100ms ease-out}   /* 전체 폭 줄 — 터치에서만 */
  summary:active{background:var(--cream)}
  /* 손을 뗀 뒤 hover 채우기가 남지 않게 (문의 버튼이 열려 있을 때의 채움 표시는 유지) */
  .btn:hover::before,.hd .go:hover::before,.dock-btn.chat:hover:not([aria-expanded="true"])::before{transform:scaleX(0)}
  .btn-line:hover{color:var(--ink)}
  .btn:active::before,.hd .go:active::before,.dock-btn.chat:active::before{transform:scaleX(1);transition-duration:0s}
  .btn-line:active{color:var(--bg)}
  a.sns:hover{background:transparent}
  .scene-tab:hover:not([aria-selected="true"]){background:var(--bg)}
  .scene-tab:hover:active{background:var(--cream)}
  .note-card a:hover img{transform:none}
}
/* 키보드 포커스 채움은 터치 hover 해제보다 우선, 테두리 버튼 글자는 채움 위에서 보이게 */
.btn:focus-visible::before,.hd .go:focus-visible::before{transform:scaleX(1)}
.btn-line:focus-visible{color:var(--bg)}
@media (prefers-reduced-motion:reduce){
  /* 움직임 줄이기 = 완성 상태 즉시 표시(DESIGN.md 7절) — 눌러도 크기는 그대로 */
  .btn:active,.hd .go:active,.dock-btn:active,.sns:active,.vl-card:active,.qlist a:active,.tlink:active{transform:none}
}

/* 2. 장면 탭 전환 — 투명도는 처음부터 1, 살짝 떠오르기만 짧게 */
.js-motion .scene-panel:not([hidden]){animation:panelInQuick var(--m-micro) var(--m-ease)}
@keyframes panelInQuick{from{transform:translateY(4px)}to{transform:none}}

/* 4. 하단 구매 막대 — 스크롤 반응은 micro 시간으로 */
.buybar{transition:transform var(--m-micro) var(--m-ease)}

/* 5. 쪽 머리 큰 제목 줄 간격 */
.page-hd h1{line-height:1.25}

/* 7. 「대비 높이기」 설정 — 또렷한 선과 보조 글자 */
@media (prefers-contrast:more){
  :root{--line:#7A6B5F;--ink-3:var(--ink-2)}   /* --line = 원래 --ink-3 값(같은 자리에서 --ink-3을 바꾸므로 var 참조 대신 값) */
  .btn-line,.sns-row .sns,.helper{border-color:var(--ink)}
}

/* 8. 첫 화면 제목 밑줄 — 기다림 900ms → 300ms (DESIGN 토큰 외 값) */
.js-motion .hero h1 .ul::after{transition-delay:300ms}