/* ══════════════════════════════════════════════════════════════
   app-v5.css — 앱 화면을 랜딩(index-*.html) 디자인 시스템에 맞춤
   ------------------------------------------------------------------
   · 토큰은 랜딩에서 실제로 쓰는 값과 동일하게 유지한다.
   · 기존 마크업을 바꾸지 않고 오버라이드만 한다 (app-modern.css 선례).
   · 헤드라인 단어 회전은 쓰지 않는다.
   · 입력 중에는 배경/장식 모션을 전부 멈춘다 (body.is-writing).
   · 응답은 스크롤 스토리텔링(고정 레일 + 순차 리빌)로 읽힌다.
   ══════════════════════════════════════════════════════════════ */

:root{
  --v5-ease:cubic-bezier(.2,.7,.2,1);
  --v5-r:16px; --v5-r-lg:22px; --v5-r-xl:28px;
}

/* ── 1. 살아있는 광원 (랜딩의 라벤더/골드 오라와 동일 계열) ───────── */
.v5-aura{position:fixed;inset:0 0 auto 0;height:1000px;pointer-events:none;z-index:0;overflow:hidden}
.v5-aura span{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.v5-aura .a1{width:760px;height:520px;left:6%;top:-200px;background:rgba(30,58,255,.12);
  animation:v5d1 26s var(--v5-ease) infinite alternate}
.v5-aura .a2{width:600px;height:440px;right:0;top:-140px;background:rgba(205,160,10,.12);
  animation:v5d2 32s var(--v5-ease) infinite alternate}
.v5-aura .a3{width:520px;height:400px;left:38%;top:40px;background:rgba(140,120,255,.10);
  animation:v5d3 22s var(--v5-ease) infinite alternate}
@keyframes v5d1{to{transform:translate(90px,60px) scale(1.14)}}
@keyframes v5d2{to{transform:translate(-110px,80px) scale(1.10)}}
@keyframes v5d3{to{transform:translate(60px,-50px) scale(1.18)}}
:root[data-theme="dark"] .v5-aura .a1{background:rgba(115,135,255,.10)}
:root[data-theme="dark"] .v5-aura .a2{background:rgba(227,190,74,.09)}
:root[data-theme="dark"] .v5-aura .a3{background:rgba(140,120,255,.08)}

/* ── 2. 미세 그레인 ─────────────────────────────────────────────── */
.v5-grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.022;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
:root[data-theme="dark"] .v5-grain{opacity:.04;mix-blend-mode:soft-light}

/* 본문이 광원 위로 오도록 */
.repent,.repent.solo{position:relative;z-index:10;background:transparent!important}

/* ── 3. 입력 중 모션 정지 ───────────────────────────────────────── */
body.is-writing .v5-aura span{animation-play-state:paused}
body.is-writing .v5-marq-track{animation-play-state:paused}
body.is-writing .v5-aura{opacity:.45;transition:opacity .8s var(--v5-ease)}
body.is-writing .btn-gold::after,
body.is-writing .nav-cta .btn-primary::after{animation:none;opacity:0}
.v5-aura{transition:opacity .8s var(--v5-ease)}

/* ── 4. 블러 리빌 (랜딩과 동일 문법) ────────────────────────────── */
.v5-rev{opacity:0;filter:blur(12px);transform:translateY(22px);
  transition:opacity .9s var(--v5-ease),filter .9s var(--v5-ease),transform .9s var(--v5-ease)}
.v5-rev.v5-in{opacity:1;filter:blur(0);transform:none}

/* ── 5. 헤드라인: 랜딩과 동일한 800 볼드 + 아웃라인 스트로크 ───── */
.solo-head{text-align:center}
.hc-disp{font-weight:800!important;letter-spacing:-.033em!important;line-height:1.08!important;
  font-size:clamp(34px,5.4vw,60px)!important}
.hc-disp em{font-style:normal;color:var(--blue,#1E3AFF);font-weight:800}
.hc-disp .v5-out{color:transparent;-webkit-text-stroke:1.6px var(--ink,#0B0B0F)}
:root[data-theme="dark"] .hc-disp .v5-out{-webkit-text-stroke-color:#F4F4F6}
.solo-sub{max-width:560px;margin-left:auto;margin-right:auto;text-align:center}

/* 배지 */
.v5-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);
  backdrop-filter:blur(10px);border:1px solid var(--line,#E9E9EE);border-radius:999px;
  padding:7px 15px 7px 8px;font-size:12.5px;font-weight:700;color:var(--ink-2,#3A3A42);
  box-shadow:var(--sh-sm,0 1px 2px rgba(11,11,15,.06));margin-bottom:22px}
:root[data-theme="dark"] .v5-badge{background:rgba(255,255,255,.05)}
.v5-badge i{background:var(--blue-soft,#EEF0FF);color:var(--blue,#1E3AFF);border-radius:999px;
  padding:3px 9px;font-size:11px;font-weight:800;font-style:normal}
.v5-badge .live{width:6px;height:6px;border-radius:50%;background:var(--blue,#1E3AFF);
  box-shadow:0 0 0 0 rgba(30,58,255,.5);animation:v5pulse 2.4s infinite}
@keyframes v5pulse{70%{box-shadow:0 0 0 7px rgba(30,58,255,0)}100%{box-shadow:0 0 0 0 rgba(30,58,255,0)}}
body.is-writing .v5-badge .live{animation:none}

/* ── 6. 스텝 레일: 스크롤 스토리텔링의 고정 축 ─────────────────── */
.v5-rail{position:sticky;top:74px;z-index:30;display:flex;justify-content:center;gap:8px;
  flex-wrap:wrap;margin:0 auto 26px;padding:8px;width:max-content;max-width:100%;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid var(--line,#E9E9EE);border-radius:999px;
  box-shadow:var(--sh,0 8px 30px rgba(11,11,15,.08));transition:opacity .4s var(--v5-ease)}
:root[data-theme="dark"] .v5-rail{background:rgba(18,18,24,.72)}
.v5-rail .s{display:flex;align-items:center;gap:9px;border-radius:999px;padding:6px 15px 6px 6px;
  font-size:13px;font-weight:700;color:var(--muted,#6C6C77);transition:.3s var(--v5-ease)}
.v5-rail .s i{width:24px;height:24px;border-radius:8px;background:var(--bg-2,#F1F1F4);
  color:var(--muted,#6C6C77);display:grid;place-items:center;font-size:11px;font-weight:800;
  font-style:normal;transition:.3s var(--v5-ease)}
.v5-rail .s.done i{background:var(--gold,#CDA00A);color:var(--gold-ink,#1A1400)}
.v5-rail .s.on{color:var(--ink,#0B0B0F);background:var(--blue-soft,#EEF0FF)}
.v5-rail .s.on i{background:var(--blue,#1E3AFF);color:#fff}
body.is-writing .v5-rail{opacity:.35}
.v5-rail:hover{opacity:1}

/* ── 7. 앱 카드 = 브라우저 크롬 목업 문법 ──────────────────────── */
/* 랜딩과 동일하게 순백. 앱 스타일시트의 크림색 --bg 를 상속하지 않는다. */
.app-card{border:1px solid var(--line,#E9E9EE)!important;border-radius:var(--v5-r-xl)!important;
  box-shadow:var(--sh-lg,0 24px 60px -12px rgba(11,11,15,.18))!important;
  background:#fff!important;overflow:hidden;padding:0!important}
:root[data-theme="dark"] .app-card{background:#121218!important}
.app-step{padding:34px 36px 32px}
@media(max-width:640px){.app-step{padding:24px 20px 22px}}

/* 칩 */
.confess-helpers .chip{border:1px solid var(--line,#E9E9EE)!important;border-radius:999px!important;
  padding:8px 15px!important;font-size:13px!important;font-weight:600!important;
  box-shadow:var(--sh-sm,0 1px 2px rgba(11,11,15,.06))!important;transition:.25s var(--v5-ease)!important}
.confess-helpers .chip:hover{border-color:var(--blue,#1E3AFF)!important;color:var(--blue,#1E3AFF)!important;
  transform:translateY(-2px)}
.confess-helpers .chip.is-active,.confess-helpers .chip[aria-pressed="true"]{
  background:var(--blue,#1E3AFF)!important;border-color:var(--blue,#1E3AFF)!important;color:#fff!important;
  box-shadow:0 4px 14px -4px rgba(30,58,255,.5)!important}
.helper-label{font-size:12.5px;font-weight:800;color:var(--blue,#1E3AFF)}

/* ── 8. 입력창: 포커스 시 그라디언트 보더 ──────────────────────── */
.v5-field{position:relative;border-radius:var(--v5-r-lg);background:#fff;
  border:1px solid var(--line,#E9E9EE);box-shadow:var(--sh,0 8px 30px rgba(11,11,15,.08));
  padding:4px;transition:.3s var(--v5-ease)}
.v5-field::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(120deg,var(--blue,#1E3AFF),var(--gold,#CDA00A),var(--blue,#1E3AFF));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;
  transition:opacity .4s var(--v5-ease);pointer-events:none}
.v5-field:focus-within{box-shadow:0 0 0 5px rgba(30,58,255,.07),var(--sh,0 8px 30px rgba(11,11,15,.08));
  transform:translateY(-2px)}
.v5-field:focus-within::before{opacity:1}
/* 이중 테두리 방지: 기본/포커스/호버 모두에서 자체 테두리를 제거한다.
   포커스 표시는 .v5-field 의 그라디언트 보더가 담당한다. */
.confess-textarea,
.confess-textarea:focus,
.confess-textarea:focus-visible,
.confess-textarea:hover{border:0!important;outline:0!important;box-shadow:none!important;
  background:transparent!important;border-radius:calc(var(--v5-r-lg) - 4px)!important;
  padding:18px 18px 12px!important;font-size:16.5px!important;line-height:1.75!important;
  resize:none!important}
:root[data-theme="dark"] .v5-field{background:#121218}

/* 전송 버튼 */
#submit-confession{border-radius:999px!important;padding:12px 22px!important;font-weight:700!important;
  transition:.25s var(--v5-ease)!important}
#submit-confession:hover{transform:translateY(-2px);
  box-shadow:0 8px 20px -6px rgba(205,160,10,.55)!important}
#submit-confession svg{transition:transform .3s var(--v5-ease)}
#submit-confession:hover svg{transform:translateY(-3px)}

/* ── 9. 말씀 레퍼런스 마퀴 ─────────────────────────────────────── */
.v5-marq{margin:22px auto 0;max-width:820px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.v5-marq-track{display:flex;gap:10px;width:max-content;animation:v5mv 34s linear infinite}
@keyframes v5mv{to{transform:translateX(-50%)}}
.v5-marq-track span{font-size:12.5px;font-weight:600;color:var(--muted,#6C6C77);
  border:1px solid var(--line,#E9E9EE);background:rgba(255,255,255,.6);border-radius:999px;
  padding:6px 14px;white-space:nowrap}
:root[data-theme="dark"] .v5-marq-track span{background:rgba(255,255,255,.04)}

/* ── 10. 응답: 스크롤 스토리텔링 (순차 리빌 + 스포트라이트) ────── */
.response-block{position:relative;border-radius:var(--v5-r-xl)!important;
  border:1px solid var(--line,#E9E9EE)!important;
  box-shadow:var(--sh-sm,0 1px 2px rgba(11,11,15,.06))!important;
  padding:26px!important;overflow:hidden;transition:.35s var(--v5-ease)}
.response-block::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .4s;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(30,58,255,.09),transparent 62%)}
.response-block:hover::before{opacity:.45}
.response-block:hover{box-shadow:var(--sh-sm,0 1px 2px rgba(11,11,15,.06))!important;transform:none}
.response-block .block-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#6C6C77)}
.response-word{background:linear-gradient(180deg,var(--gold-soft,#FBF3D9),var(--bg,#fff) 62%)!important}
.response-word .block-label{color:var(--gold-deep,#A88208)}
.response-word blockquote{font-size:17px;font-weight:700;line-height:1.6;letter-spacing:-.02em;
  margin-top:12px;position:relative}
.response-word cite{display:block;font-style:normal;font-size:12.5px;font-weight:700;
  color:var(--gold-deep,#A88208);margin-top:12px;position:relative}
.response-meditation .block-label{color:var(--blue,#1E3AFF)}
.response-prayer{background:var(--ink,#0B0B0F)!important;border-color:var(--ink,#0B0B0F)!important}
.response-prayer .block-label{color:var(--gold,#CDA00A)}
.response-prayer p{color:#EDEDF2!important}
.response-prayer::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
  rgba(205,160,10,.16),transparent 62%)}
:root[data-theme="dark"] .response-prayer{background:rgba(255,255,255,.04)!important;
  border-color:var(--line,#22232B)!important}

/* 순차 리빌 */
.response .response-block{opacity:0;filter:blur(3px);transform:translateY(8px);
  transition:opacity .32s var(--v5-ease),filter .32s var(--v5-ease),transform .32s var(--v5-ease)}
.response .response-block.v5-in{opacity:1;filter:blur(0);transform:none}

@media(prefers-reduced-motion:reduce){
  .v5-aura span,.v5-marq-track,.v5-badge .live{animation:none!important}
  .v5-rev,.response .response-block{opacity:1!important;filter:none!important;transform:none!important;
    transition:none!important}
}