/* 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: var(--ink);
  --app-accent-wash: var(--selected-fill);
  --app-accent-edge: transparent; /* 「확인 필요」 칸 바깥 경계 — 캔버스 3.63:1 · mist 빛 위 3.15:1(2026-10-22) */
  --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(--ink);
  --app-accent-wash: var(--selected-fill);
  --app-accent-edge: transparent;
}

/* 집중 패널과 푸터의 범위 지정. */
.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); }

/* 현재 위치·확인 칸·핵심 숫자는 무채색으로 구별한다. */
.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: 0;
  box-shadow: var(--panel-shadow);
  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(--control-on); /* 고른 칸 경계 — 카드 경계(3:1)보다 옅어지지 않게 잉크(2026-10-22) */
  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; }
}