/* 선택한 다운로드 동작: 첫 배지를 지나면 나타나고, 하단 다운로드 섹션에서 숨긴다. */
.download-launcher[hidden] { display: none; }
.download-launcher {
  position: fixed; z-index: 5; right: 26px;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 16px;
  min-height: 54px; padding: 12px 20px;
  color: var(--fg); background: var(--raised);
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  font: 600 16px/1.4 var(--sans); box-shadow: 0 8px 26px #0008;
  cursor: pointer;
}
.download-launcher svg { width: 20px; height: 20px; }
.download-sheet {
  color: var(--fg); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l) var(--r-l) 0 0;
  inset: auto 0 0; margin: 0 auto; padding: 26px 26px calc(26px + env(safe-area-inset-bottom));
  width: min(100%, 440px); max-width: 100%; max-height: 90dvh;
}
.download-sheet::backdrop { background: #0009; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sheet-head h2 { font-size: 21px; }
.sheet-close { min-width: 44px; min-height: 44px; border: 0; background: var(--raised); color: var(--fg); border-radius: 50%; font-size: 24px; cursor: pointer; }
.download-sheet p { color: var(--fg-2); font-size: 14.5px; margin: 12px 0 20px; }
.download-sheet .store-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.download-sheet .store-link { width: 100%; min-width: 0; min-height: 72px; padding: 0; }
.download-sheet .store-link:hover { background: var(--raised); }
body:has(.download-sheet[open]) { overflow: hidden; }
@media (min-width: 641px) {
  .download-sheet { inset: 0; margin: auto; border-radius: var(--r-l); height: max-content; }
}
/* 320px에서도 공식 배지의 최소 높이40px를 유지하며 한 줄로 놓는다. */
@media (max-width: 359px) {
  .download-sheet { padding-inline: var(--s4); }
}

/* 웹 랜딩 전용 조판. 앱 토큰은 유지한다.
   읽고 조작하는 앱과 달리 랜딩은 한 화면에 한 주장: 제목 대조를 키운다.
   44/36px 모바일 제목, 17px 본문. 데스크톱에서만 72/52px까지 확장. */
.editorial {
  --ed-display: clamp(36px, 11.3vw, 44px);
  --ed-title: clamp(30px, 9.2vw, 36px);
  --ed-section-space: 68px;
}
.editorial .wrap { max-width: 1080px; }
.editorial section { padding-block: var(--ed-section-space); }
.editorial .ed-hero { padding-top: 44px; }
.ed-grid { display: grid; gap: 44px; align-items: center; }
.editorial .ed-copy { display: flex; flex-direction: column; gap: var(--s5); align-items: flex-start; }
.ed-label { color: var(--fg-3); font-size: var(--fs-label); font-weight: 600; line-height: 1.5; }
.editorial h1 { font-size: var(--ed-display); line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; }
.headline-line { display: block; }
.editorial .ed-copy h2, .editorial .ed-closing h2 { font-size: var(--ed-title); line-height: 1.2; letter-spacing: -.035em; }
.ed-body { color: var(--fg-2); font-size: var(--fs-3); line-height: 1.75; }
.ed-copy .store-actions { margin-top: var(--s2); }
.editorial .hero-copy > .store-actions { align-self: flex-start; }
.ed-scan { width: min(100%, 338px); justify-self: center; position: relative; padding-bottom: 90px; }
.scan-window { width: 78%; margin: 0 auto; height: 370px; border: 6px solid var(--raised); border-radius: 34px; overflow: hidden; background: var(--card); }
.scan-window img { display: block; width: 100%; height: auto; }
.ed-comparison { position: absolute; bottom: 0; right: 0; width: 90%; padding: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); }
.ed-comparison > p { margin-bottom: var(--s4); }
.ed-mall { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-size: var(--fs-3); }
.ed-mall + .ed-mall { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3); }
.ed-mall strong { font: 700 30px/1.2 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.ed-mall-secondary { color: var(--fg-2); }
.ed-mall-secondary strong { font-size: var(--fs-n2); }
.ed-proof { border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s6); background: var(--card); }
.ed-calculation { margin-top: var(--s6); }
.ed-calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding-block: var(--s2); font-size: var(--fs-4); }
.ed-number { font: 500 var(--fs-n2)/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.ed-discount .ed-number { color: var(--teal-ink); }
.ed-total { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); font-size: var(--fs-4); }
.ed-price { position: relative; padding-inline: var(--s4); font: 700 clamp(34px,10.4vw,44px)/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.ed-price::before, .ed-price::after { content: ''; position: absolute; width: 8px; top: 0; bottom: 0; border: 3px solid var(--coral); }
.ed-price::before { left: 0; border-right: 0; }
.ed-price::after { right: 0; border-left: 0; }
.ed-caption { margin-top: var(--s5); color: var(--fg-3); font-size: var(--fs-4); }
.ed-app-shot { width: min(100%, 320px); justify-self: center; margin: 0; border: 6px solid var(--raised); border-radius: 34px; overflow: hidden; background: var(--bg); }
.ed-app-shot img { display: block; width: 100%; height: auto; }
/* 목록은 실제 화면 전체를 보여 상품 행이 중간에서 잘리지 않게 한다. */
.editorial .ed-trust { background: var(--card); }
.ed-trust .wrap { display: flex; flex-direction: column; gap: var(--s5); }
.ed-trust h2 { font-size: var(--fs-2); line-height: 1.4; }
.ed-trust a { font-size: var(--fs-4); min-height: 44px; display: inline-flex; align-items: center; gap: var(--s2); align-self: flex-start; }
.ed-closing .wrap { display: flex; flex-direction: column; gap: var(--s5); align-items: center; text-align: center; }
/* 이미 읽을 수 있는 내용은 숨기지 않는다. 모션은 그 내용의 순서만 안내한다. */
@media (prefers-reduced-motion: no-preference) {
  .editorial .headline-line { animation: ed-title-in 420ms cubic-bezier(.2,.7,.2,1) both; }
  .editorial .headline-line + .headline-line { animation-delay: 90ms; }
  [data-reveal].ed-prepare { opacity: .6; transform: translateY(16px); transition: opacity 420ms ease-out, transform 420ms cubic-bezier(.2,.7,.2,1); }
  [data-reveal].ed-in { opacity: 1; transform: none; }
  .editorial .download-sheet[open] { animation: ed-sheet-in 220ms ease-out; }
}
@keyframes ed-title-in { from { opacity: .65; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ed-result-in { from { opacity: .65; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ed-evidence-in { from { opacity: .55; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ed-sheet-in { from { transform: translateY(16px); } to { transform: none; } }
@media (min-width: 860px) {
  .editorial { --ed-display: clamp(52px,6vw,72px); --ed-title: clamp(36px,4.5vw,52px); --ed-section-space: 110px; }
  .ed-grid { grid-template-columns: 1.15fr 1fr; gap: 68px; }
  .ed-grid--flip .ed-copy { order: 2; }
  .editorial .ed-hero { padding-top: 78px; }
  .ed-scan { width: 100%; max-width: 360px; }
  .scan-window { height: 400px; }
  .ed-proof { padding: var(--s7); }
  .ed-trust .wrap { align-items: center; text-align: center; }
  .ed-trust a { align-self: center; }
}
/* 설득 순서: 내 가격 → 기록 → 매장에서의 발견. */
.editorial .ed-body { font-size: 17px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; max-width: 32em; }
.editorial .ed-copy { gap: 20px; }
.ed-scene { width: 100%; max-width: 380px; justify-self: center; min-width: 0; }
.ed-scene--price { max-width: 430px; }
.ed-phone-stage { position: relative; padding-block: 8px 18px; }
.ed-phone-stage .ed-app-shot { width: 78%; margin-inline: auto; }
.ed-focus-card { position: absolute; left: 0; right: 0; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--bg); box-shadow: 0 14px 40px #0008; }
.ed-focus-card svg { display: block; width: 100%; height: auto; }
.ed-scene--cart .ed-focus-card { top: 24%; }
.ed-scene--history .ed-focus-card { top: 49%; }
.ed-scan { width: 100%; padding-bottom: 125px; }
.scan-window { position: relative; width: 88%; height: auto; aspect-ratio: 4/5; border-radius: 24px; }
.scan-photo { position: absolute; inset: 0; background: url('/assets/screens/scan-photo.jpg') 52.7344% 43.8616% / 200% auto no-repeat; }
.scan-frame { position: absolute; width: 66%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: visible; }
.scan-frame path { stroke: var(--coral); stroke-width: 1.2; fill: none; }
.ed-comparison { width: 94%; }
.editorial .ed-trust h2 { font-size: var(--ed-title); letter-spacing: -.035em; }
.ed-scene--price .ed-caption { font-size: var(--fs-4); }
@media (prefers-reduced-motion: no-preference) {
  .ed-scene.ed-in .ed-focus-card { animation: ed-component-focus 1200ms cubic-bezier(.16,1,.3,1) both; }
  .ed-scene--price.ed-in .ed-calc-row { animation: ed-evidence-in 600ms ease-out both; }
  .ed-scene--price.ed-in .ed-calc-row:nth-child(2) { animation-delay: 160ms; }
  .ed-scene--price.ed-in .ed-calc-row:nth-child(3) { animation-delay: 320ms; }
  .ed-scene--price.ed-in .ed-total { animation: ed-price-focus 1000ms cubic-bezier(.16,1,.3,1) 380ms both; }
  .ed-scene--scan.ed-in .scan-frame { animation: ed-scan-lock 1500ms cubic-bezier(.22,.68,.2,1) both; }
  .ed-scene--scan.ed-in .ed-comparison { animation: ed-result-in 600ms cubic-bezier(.2,.7,.2,1) 900ms both; }
}
@keyframes ed-component-focus {
  from { opacity: .7; transform: translateY(12px) scale(.78); box-shadow: 0 0 0 #0000; }
  to { opacity: 1; transform: none; box-shadow: 0 14px 40px #0008; }
}
@keyframes ed-price-focus {
  from { transform: scale(.94); transform-origin: left center; opacity: .7; }
  to { transform: none; opacity: 1; }
}
@keyframes ed-scan-lock {
  0% { transform: translate(-50%, -56%) scale(1.18); opacity: .65; }
  60% { transform: translate(-50%, -50%) scale(1.02); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@media (min-width: 860px) {
  .editorial .ed-body { font-size: 18px; }
  .scan-window { height: auto; }
}