/* Product screen version v4 (2026-10-01). Load after tactile/fonts.css, tokens.css, components.css,
   and service.css. Opt in with .app-surface on the page root. Light only; dark tokens scoped to two bands. */
.app-surface {
  --app-accent-text: color-mix(in srgb, var(--accent) 54%, #111111);
  --app-accent-wash: color-mix(in srgb, var(--accent) 11%, var(--surface));
  --app-accent-edge: color-mix(in srgb, var(--accent) 38%, var(--line-strong));
  --app-view-duration: 180ms;
  --app-view-ease: cubic-bezier(.2, 0, 0, 1);
}

/* 강조 다크 구간 안(data-theme="dark" 요소 범위)에서는 아쿠아 역할 글자가 다크 토큰을 따른다. */
.app-surface [data-theme="dark"],
.app-surface[data-theme="dark"] {
  --app-accent-text: var(--accent);
  --app-accent-wash: color-mix(in srgb, var(--accent) 13%, var(--surface));
  --app-accent-edge: color-mix(in srgb, var(--accent) 42%, var(--line-strong));
}

/* 강조 다크 구간 두 곳(§5 · 2026-10-01 결정): coSchema 캔버스 집중 패널과 푸터.
   요소에 data-theme="dark" 를 함께 붙여 tactile/tokens.css 의 다크 토큰을 범위 안에서만 쓴다.
   로그인·빈 상태·대시보드 머리·결제 완료의 잉크 첫인상 면(.app-intro)과 글자 그라데이션·완료 빛은 폐기했다. */
.app-surface .app-canvas-focus,
.app-surface .app-footer {
  background: var(--canvas);
  color: var(--ink);
}
.app-surface .app-canvas-focus { border-radius: var(--radius-panel); padding: 24px; }
.app-surface .app-footer { padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 56px); }
.app-surface .app-footer a { color: var(--ink); }
.app-surface :is(.app-canvas-focus, .app-footer) .btn-primary { color: var(--primary-text); background: var(--primary-base); border-color: var(--primary-border); }

/* Aquamarine names the live place, a human review, and a key number.
   Keep the ordinary selected control neutral; add this cue beside its label. */
.app-surface .app-current { color: var(--app-accent-text); font-weight: 600; }
.app-surface .app-metric-value { color: var(--app-accent-text); font-variant-numeric: tabular-nums; }
.app-surface .app-review {
  background: var(--app-accent-wash);
  border: 1px solid var(--app-accent-edge);
  border-radius: 12px;
  padding: 16px 18px;
}
.app-surface .app-review-label { color: var(--app-accent-text); font-weight: 600; }
.app-surface .app-selected-cue { color: var(--app-accent-text); font-weight: 600; }
.app-surface .app-choice[aria-selected="true"],
.app-surface .app-choice[aria-pressed="true"] {
  background: var(--selected-fill);
  border-color: var(--selected-border);
  color: var(--selected-text);
}
.app-surface .app-choice:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Page navigation may opt in to one quiet opacity transition. No scroll hook. */
.app-surface .app-view[data-enter] { animation: app-view-enter var(--app-view-duration) var(--app-view-ease) both; }
@keyframes app-view-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .app-surface .app-view[data-enter] { animation: none !important; }
}