/* ════════════════════════════════════════════════════════════════════
   worry.css — 고민해결소 FINAL 개편 (2026-09-10 사람 지시)
   ────────────────────────────────────────────────────────────────────
   [도깨비 마을 — 고민해결소 전면 개편 FINAL 구현 명령]. 옛 판(VENT 채팅 UI)을
   완전히 대신한다. 화면은 이제 하나의 흐름이다:
     entry → emotion → concern → sending → loading → summary → card → archive
   전부 #worry-app 의 data-ws-step 하나로 가른다(물리적 화면 전환은 physiognomy
   촬영화면의 data-pc-step 과 같은 문법 — 이 프로젝트에 이미 있는 검증된 패턴을 그대로 쓴다).

   ── MASTER 컬러(지시 §5) ──────────────────────────────────────────────
     보라는 밤 분위기의 보조색일 뿐, surface 는 Warm Cream/Ivory/옅은 Lavender 다.
   ── 귀여운 글씨체(지시 §6) ───────────────────────────────────────────
     프로젝트에 이미 있는 한글 커스텀 폰트가 없어(system.css 계열은 Malgun Gothic
     뿐) 새로 도입했다 — 카페24 써라운드(Cafe24 Ssurround), OFL 라이선스·상업적
     사용·재배포·임베드 전부 허용(fonts.cafe24.com 정본 · 눈누 상업용 무료 등재).
     로컬 woff2 하나만 번들한다(오프라인 웹뷰라 CDN 의존 안 함).
   ════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Cafe24 Ssurround";
  src:url("assets/fonts/Cafe24Ssurround.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  --ws-midnight:#2b2650; --ws-violet:#a78bd6; --ws-lavender:#e4d9fb;
  --ws-cream:#fffaf0; --ws-ivory:#fdf3e2; --ws-pink:#f3c6d9; --ws-gold:#cda45e;
  --ws-ink:#4a3f5c; --ws-sub:#8b7fa0; --ws-border:#e6d9c8;
}

*{ box-sizing:border-box; }
html, body{ margin:0; min-height:100vh; min-height:100dvh; }
body.ws-body{
  font-family:var(--font-ui,"Malgun Gothic",sans-serif);
  color:var(--ws-ink); overflow-x:hidden;
}

/*  position:fixed;inset:0 — body 의 backhome-on 패딩(60px)에 안 얹혀서 이중 스크롤이
    안 생긴다(physiognomy-capture.css #phys-capture 와 같은 이유). 뒤로가기 pill
    (back-home.css .ui-topbar · z-index:9400)은 이 화면 fixed 스택보다 항상 위다 —
    #worry-app 자체엔 z-index 를 안 줘 자연 스태킹으로 pill 이 이긴다. */
#worry-app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:#3b3f74 url("assets/worry/scene-bg.jpg") center/cover no-repeat;
  overflow:hidden;
}

/*  [3차 리뉴얼 2026-09-10] 사람 지시 — "하단 브라운 오버레이는 삭제하지 말고 밝은
    웜 로즈브라운+피치+라일락 계열로 완화하여 밤 배경과 자연스럽게 연결". 옛 아래쪽
    끝단(rgba(60,40,64,.22) — 탁한 자두빛 브라운)을 걷어내지 않고 색만 밝게 데운다.
    위쪽(헤더 대비용)은 2차 그대로 손 안 댄다. */
.ws-scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(35,32,74,.28), rgba(35,32,74,.12) 45%,
    rgba(196,138,132,.20) 72%, rgba(228,180,168,.24) 88%, rgba(228,201,251,.22) 100%);
}

/* ── 헤더 — back-home pill 은 이미 떠 있다(body.backhome-on 이 60px 를 비운다).
     그 아래 줄에 제목 + 마음 보관함 버튼(지시 §9). ── */
.ws-header{
  position:relative; z-index:2; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  /*  뒤로가기 pill(.ui-topbar · top 8px + env + 44px 높이)과 안 겹치게 — #worry-app 가
      position:fixed 라 body.backhome-on 의 60px 패딩을 안 받는다. physiognomy 의
      .pc-topspace 와 같은 값을 여기서 직접 준다. */
  padding:calc(8px + env(safe-area-inset-top,0px) + 44px + 6px) 14px 4px;
}
.ws-header-title{
  /* 2026-09-10(2차) 사람 지시 — 중앙 [고민해결소] 제목을 약 15~20% 축소(1.05rem→.87rem, -17%). */
  font-size:.87rem; font-weight:700; color:#fff8ec;
  text-shadow:0 2px 10px rgba(30,20,50,.5);
}
.ws-archive-btn{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:5px;
  /* 지시 §12 — 무거운 dark purple 불투명 대신 옅은 translucent navy/lavender. */
  background:rgba(64,58,120,.34); border:1px solid rgba(255,255,255,.4);
  border-radius:999px; padding:7px 12px; min-height:34px;
  color:#fff8ec; font-family:inherit; font-size:.72rem; font-weight:600;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.ws-archive-btn svg{ width:15px; height:15px; flex:0 0 auto; }
.ws-archive-btn:active{ background:rgba(64,58,120,.5); }

/* ── 화면 전환 — data-ws-step 하나로 전부 가른다 ── */
.ws-screen{ display:none; }
#worry-app[data-ws-step="entry"]     .ws-screen[data-ws-screen="entry"],
#worry-app[data-ws-step="emotion"]   .ws-screen[data-ws-screen="emotion"],
#worry-app[data-ws-step="concern"]   .ws-screen[data-ws-screen="concern"],
#worry-app[data-ws-step="loading"]   .ws-screen[data-ws-screen="loading"],
#worry-app[data-ws-step="summary"]   .ws-screen[data-ws-screen="summary"],
#worry-app[data-ws-step="card"]      .ws-screen[data-ws-screen="card"],
#worry-app[data-ws-step="finish"]    .ws-screen[data-ws-screen="finish"],
#worry-app[data-ws-step="archive"]   .ws-screen[data-ws-screen="archive"],
#worry-app[data-ws-step="archive-detail"] .ws-screen[data-ws-screen="archive-detail"]{
  display:flex;
}
.ws-screen{
  position:relative; z-index:1; flex:1 1 auto; min-height:0;
  flex-direction:column; align-items:center;
  padding:8px 22px 0; overflow-y:auto;
  animation:ws-fade .32s ease both;
}
@keyframes ws-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .ws-screen{ animation:none; } }

.ws-q{
  margin:18px 0 4px; text-align:center; font-size:1.28rem; font-weight:700;
  line-height:1.36; color:#fff8ec; text-shadow:0 2px 10px rgba(30,20,50,.5);
}
.ws-sub{
  margin:0 0 14px; text-align:center; font-size:.86rem; color:#fbf3e6; opacity:.92;
  text-shadow:0 1px 6px rgba(30,20,50,.35);
}

/* ── 공용 CTA/버튼 ── */
.ws-cta{
  width:100%; max-width:360px; min-height:50px; margin-top:10px;
  background:linear-gradient(180deg, #fff8ec, #fdecc9);
  border:1px solid var(--ws-gold); border-radius:999px;
  color:#5a4322; font-family:inherit; font-size:1rem; font-weight:700;
  /* 지시 §11 — 강한 그림자 대신 부드러운 elevation. */
  box-shadow:0 4px 12px rgba(60,40,20,.16); cursor:pointer;
}
.ws-cta:active{ transform:scale(.99); }
.ws-cta:disabled{ opacity:.55; box-shadow:none; cursor:not-allowed; }
/* 2026-09-10(2차) — [지금 마음 말해보기] 전용: 말풍선 아이콘 + 우측 chevron.
   크림 배경·금테·둥근 필 모양(.ws-cta 그대로)은 안 건드리고 안쪽 배치만 바꾼다. */
.ws-cta-iconed{ display:flex; align-items:center; justify-content:center; gap:8px; }
.ws-cta-ico{ width:18px; height:18px; flex:0 0 auto; color:#8f6a2e; }
.ws-cta-txt{ flex:0 1 auto; }
.ws-cta-chev{ width:16px; height:16px; flex:0 0 auto; color:#8f6a2e; opacity:.75; }
.ws-cta-ghost{
  background:rgba(255,255,255,.12); color:#fff8ec; border-color:rgba(255,255,255,.4);
  box-shadow:none;
}
.ws-cta-ghost:active{ background:rgba(255,255,255,.2); }

/* ════════ SCREEN 01 — 입구 ════════ */
/* 2026-09-10(2차) 사람 지시 §"과도한 중앙 빈 공간을 줄인다" — 아래로 붙던(flex-end)
   그룹 전체를 바닥에서 8~12% 만큼 띄워 그만큼 위로 이동시킨다(반응형 — vh 기준이라
   기기 높이가 달라도 같은 비율로 따라간다). */
.ws-screen[data-ws-screen="entry"]{ justify-content:flex-end; padding-bottom:calc(8px + 10vh); }
/* 지시 §9·§10 — 3줄급 굵은 글자가 화면을 지배하지 않게: 크기 -12%·굵기 한 단계
   낮춤. 배경이 밝아진 만큼 그림자만 살짝 올려 가독성은 지킨다. */
.ws-entry-copy{ text-align:center; margin-bottom:20px; padding:0 6px; }
/* 2026-09-11 [고민해결소 ENTRY 메인 카피 문단·타이포 수정] — "있었는지"처럼 한국어 한 단어가
   글자 단위로 줄 사이에서 끊기던 문제. 원인은 word-break 지정이 아예 없었던 것(브라우저
   기본값은 CJK 음절 경계마다 끊을 수 있다) — keep-all 로 공백만 끊는 자리로 삼는다.
   font-size 는 기존 1.32rem 대비 약 10.6% 줄이고(1.32→1.18), line-height 는 지시 범위(1.3~1.4)
   안으로 좁혔다(1.42→1.36). */
.ws-entry-copy h1{
  margin:0; padding:0;   /* WO-73 — style.css:45 전역 h1 의 padding-right:160px(은화 배지 회피)가 새어 들어 360 폭에서 글이 왼쪽으로 밀려 첫 글자가 잘렸다 */
  font-size:clamp(1.02rem, 4.6vw, 1.18rem); font-weight:700; line-height:1.36;
  color:#fff8ec; text-shadow:0 2px 10px rgba(30,20,50,.5);
  word-break:keep-all; overflow-wrap:normal; letter-spacing:normal;
}
.ws-entry-copy p{
  /* 2026-09-10(2차) — 설명문을 메인 문구 대비 더 또렷하게 작게. */
  margin:14px 0 0; font-size:.76rem; color:#fbf3e6; text-shadow:0 1px 6px rgba(30,20,50,.4);
  word-break:keep-all; overflow-wrap:normal;
}
/* 2026-09-10(2차) — 고양이·책·별빛유리병을 [하나의 장면]처럼 더 가깝게, 책은 눈에 띄게
   키운다. 셋의 시각 크기 체감 비율을 100:45:60(고양이:책:유리병) 쪽으로 맞춘다 —
   책 22%→32%(§확대), 셋의 좌우 자리를 서로 더 좁혀 겹침에 가깝게 모은다. */
.ws-entry-deco{
  position:relative; width:100%; max-width:360px; height:min(30vh, 230px);
  margin:0 auto 10px; flex:0 0 auto;
}
.ws-deco-cat{ position:absolute; left:4%; bottom:0; width:54%; height:auto; z-index:2; filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
  animation:ws-cat-breathe 5.2s ease-in-out infinite; transform-origin:50% 85%; }
@keyframes ws-cat-breathe{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(1.012); } }
.ws-deco-books{ position:absolute; left:38%; bottom:1%; width:32%; height:auto; z-index:1; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.ws-deco-jar-wrap{ position:absolute; right:6%; bottom:2%; width:30%; z-index:3; }
.ws-deco-jar{ position:relative; width:100%; height:auto; display:block; filter:drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
#ws-entry-cta{ margin-bottom:8px; }
@media (prefers-reduced-motion:reduce){ .ws-deco-cat{ animation:none; } }

/* §7 — 고양이는 이 화면(감정 선택)엔 없다. [반응의 순간]에 붙는 아주 옅은 light reaction —
   감정 카드(§5)와 같은 팔레트를 쓴다. 캐릭터를 새로 그리거나 억지로 변형하지 않는다. */
.ws-mood-ack{ display:flex; align-items:center; gap:8px; }
.ws-mood-ack-glow{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle, var(--ack-glow-color,#f4d78a) 0%, transparent 72%);
  opacity:0; transition:opacity .4s ease;
}
.ws-mood-ack.is-showing .ws-mood-ack-glow{ opacity:.9; animation:ws-ack-glow-pulse 1.4s ease-in-out; }
@keyframes ws-ack-glow-pulse{ 0%,100%{ transform:scale(.85); } 50%{ transform:scale(1.15); } }
@media (prefers-reduced-motion:reduce){ .ws-mood-ack-glow{ animation:none; transition:none; } }

/* §14 — 병 속 작은 빛. releaseCount 단계(data-tier 0~3)만큼만, 강한 반짝임 없이 아주 천천히. */
.ws-jar-lights{ position:absolute; inset:14% 18% 20%; z-index:1; pointer-events:none; }
.ws-jar-lights i{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, #fff6da, #f4d78a 70%);
  box-shadow:0 0 5px 1.5px rgba(244,215,138,.65);
  opacity:0; animation:ws-jar-drift 6.5s ease-in-out infinite;
}
.ws-jar-lights[data-tier="-1"] i{ display:none; }
/* 단계가 낮을수록 보이는 점 수를 줄인다 — 자리는 미리 다 심어 두고 tier 로 몇 개만 켠다. */
.ws-jar-lights i:nth-child(n+2){ display:none; }
.ws-jar-lights[data-tier="0"] i:nth-child(-n+2){ display:block; }
.ws-jar-lights[data-tier="1"] i:nth-child(-n+4){ display:block; }
.ws-jar-lights[data-tier="2"] i:nth-child(-n+6){ display:block; }
.ws-jar-lights[data-tier="3"] i{ display:block; }
.ws-jar-lights i:nth-child(1){ left:20%; top:60%; animation-delay:.2s; }
.ws-jar-lights i:nth-child(2){ left:60%; top:70%; animation-delay:1.8s; }
.ws-jar-lights i:nth-child(3){ left:35%; top:40%; animation-delay:3.1s; }
.ws-jar-lights i:nth-child(4){ left:75%; top:45%; animation-delay:.9s; }
.ws-jar-lights i:nth-child(5){ left:15%; top:30%; animation-delay:4.2s; }
.ws-jar-lights i:nth-child(6){ left:50%; top:20%; animation-delay:2.4s; }
.ws-jar-lights i:nth-child(7){ left:80%; top:22%; animation-delay:5.1s; }
.ws-jar-lights i:nth-child(8){ left:42%; top:14%; animation-delay:1.2s; }
@keyframes ws-jar-drift{
  0%,100%{ opacity:0; transform:translateY(0); }
  15%{ opacity:.85; }
  85%{ opacity:.5; }
  100%{ opacity:0; transform:translateY(-10px); }
}
/* 15회 이상 — 병 전체가 은은하게 한 번 더 밝아진다(강한 반짝임 아님, 아주 옅은 고정 글로우) */
.ws-deco-jar-wrap[data-tier="3"] .ws-deco-jar{ filter:drop-shadow(0 8px 14px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(244,215,138,.35)); }
@media (prefers-reduced-motion:reduce){ .ws-jar-lights i{ animation:none; opacity:.4; } }

/* ════════ SCREEN 02 — 감정(마음 몽글이) ════════ */
.ws-mood-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  width:100%; max-width:420px; margin:6px 0 12px;
}
@media (max-width:340px){ .ws-mood-grid{ grid-template-columns:repeat(2, 1fr); } }
.ws-mood-card{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 6px 10px; border-radius:20px;
  background:linear-gradient(180deg, var(--ws-cream), var(--ws-ivory));
  border:1.5px solid var(--ws-border); box-shadow:0 4px 12px rgba(80,60,30,.14);
  font-family:inherit; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ws-mood-card img{ width:52px; height:52px; object-fit:contain; }
.ws-mood-card span{ font-size:.82rem; font-weight:600; color:var(--ws-ink); }
.ws-mood-card[aria-pressed="true"]{
  border-color:var(--ws-violet); transform:scale(1.02);
  box-shadow:0 0 0 3px rgba(205,164,94,.28), 0 6px 16px rgba(80,60,30,.2);
  background:linear-gradient(180deg, #fff, var(--ws-lavender));
}
.ws-mood-card:active{ transform:scale(.98); }

/* 2026-09-11 [고민해결소 감정 경험 UX 고급화] §5 — 배경 전체를 칠하지 않고 아이콘 뒤
   glow + 아주 얇은 border 색만 감정마다 다르게. 카드 바탕(크림/아이보리)은 공통으로 둔다. */
.ws-mood-card{ position:relative; }
.ws-mood-card img{ position:relative; z-index:1; }
.ws-mood-card::before{
  content:""; position:absolute; top:8px; left:50%; width:58px; height:58px;
  transform:translateX(-50%); border-radius:50%; z-index:0;
  background:radial-gradient(circle, var(--mood-glow,transparent) 0%, transparent 72%);
  opacity:.85; pointer-events:none;
}
.ws-mood-card[data-mood="mood-fine"]{ --mood-glow:#ffdba8; border-color:#eeddb8; }
.ws-mood-card[data-mood="mood-flutter"]{ --mood-glow:#eec7d2; border-color:#e6d0d8; }
.ws-mood-card[data-mood="mood-stifled"]{ --mood-glow:#f4cba8; border-color:#e9d3bd; }
.ws-mood-card[data-mood="mood-sad"]{ --mood-glow:#f0c3c9; border-color:#e8ccd0; }
.ws-mood-card[data-mood="mood-lonely"]{ --mood-glow:#c9d8ee; border-color:#d3dce8; }
.ws-mood-card[data-mood="mood-unsure"]{ --mood-glow:#f3e6da; border-color:#e6dccf; }

/* §6 — 감정 acknowledgement. 진단 문장이 아니라 짧은 한마디만, 400~700ms 노출. */
.ws-mood-ack{
  position:absolute; left:50%; bottom:14%; transform:translate(-50%, 6px);
  max-width:300px; padding:10px 18px; border-radius:999px; text-align:center;
  background:rgba(255,250,240,.95); border:1px solid var(--ws-border);
  color:var(--ws-ink); font-size:.84rem; font-weight:600;
  box-shadow:0 6px 18px rgba(40,20,60,.18);
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
}
.ws-mood-ack.is-showing{ opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion:reduce){ .ws-mood-ack{ transition:opacity .12s ease; } }

/* ════════ SCREEN 03 — 고민 입력 ════════ */
.ws-input-wrap{
  position:relative; width:100%; max-width:420px; margin:4px 0 4px;
}
#ws-concern-input, #ws-extra-input{
  width:100%; min-height:130px; padding:14px 16px 26px;
  border-radius:20px; border:1.5px solid var(--ws-border);
  background:var(--ws-cream); color:var(--ws-ink);
  font-family:inherit; font-size:.95rem; line-height:1.5; resize:none;
  box-shadow:0 4px 14px rgba(80,60,30,.12);
}
#ws-concern-input:focus, #ws-extra-input:focus{ outline:2px solid var(--ws-violet); outline-offset:1px; }
.ws-count{
  position:absolute; right:14px; bottom:10px;
  font-size:.72rem; color:var(--ws-sub);
}
.ws-spark{
  position:fixed; z-index:50; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle, #fff6da, var(--ws-gold) 70%);
  box-shadow:0 0 10px 3px rgba(205,164,94,.7);
  opacity:0; pointer-events:none;
  transition:left .75s cubic-bezier(.2,.7,.25,1), top .75s cubic-bezier(.2,.7,.25,1), opacity .75s ease;
}
.ws-spark.is-flying{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .ws-spark{ transition:opacity .2s ease; } }

/* ════════ AI 로딩 ════════ */
.ws-screen[data-ws-screen="loading"]{ justify-content:center; }
.ws-loading-jar{ width:120px; height:120px; margin-bottom:14px; }
.ws-loading-jar img{ width:100%; height:100%; object-fit:contain; animation:ws-bob 2.4s ease-in-out infinite; }
@keyframes ws-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.ws-loading-text{ font-size:.9rem; color:#fff8ec; margin:0 0 10px; text-align:center; }
.ws-dots{ display:flex; gap:6px; }
.ws-dots span{ width:7px; height:7px; border-radius:50%; background:var(--ws-gold); animation:ws-dot 1.1s infinite ease-in-out; }
.ws-dots span:nth-child(2){ animation-delay:.15s; }
.ws-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes ws-dot{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce){ .ws-loading-jar img, .ws-dots span{ animation:none; } }

/* ════════ SCREEN 04 — 마음 정리 ════════ */
.ws-summary-card{
  width:100%; max-width:420px; padding:20px 18px;
  border-radius:22px; background:linear-gradient(180deg, var(--ws-cream), var(--ws-lavender));
  border:1.5px solid var(--ws-border); box-shadow:0 8px 22px rgba(40,20,60,.2);
  margin:4px 0 6px;
}
.ws-summary-card p{ margin:0; font-size:.94rem; line-height:1.65; color:var(--ws-ink); white-space:pre-wrap; }
/*  [hidden] 속성과 이 규칙은 특이성이 같다(둘 다 (0,1,0)) — 그러면 author 규칙이 브라우저
    기본 [hidden]{display:none} 을 이긴다(실기기 실측: 위기 카드에서 [응,비슷해] 버튼이
    hidden=true 인데도 그대로 보였다 · 2026-09-10 발견). [hidden] 쪽을 명시로 다시 이긴다. */
.ws-summary-actions{ display:flex; gap:10px; width:100%; max-width:420px; margin-top:6px; }
.ws-summary-actions[hidden]{ display:none; }
.ws-summary-actions .ws-cta{ margin-top:0; }
.ws-extra-panel{
  width:100%; max-width:420px; margin-top:14px; padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.3);
}
.ws-extra-panel[hidden]{ display:none; }

/* ════════ SCREEN 05 — 오늘의 마음 카드 ════════ */
.ws-card-frame{
  position:relative; width:100%; max-width:300px; aspect-ratio:2/3; margin:6px auto 10px;
}
.ws-card-frame-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ws-card-text{
  position:absolute; left:8%; right:8%; bottom:14%; top:60%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:6px;
}
.ws-card-text strong{ font-size:1.02rem; font-weight:700; color:#4a3312; }
.ws-card-text p{ margin:0; font-size:.74rem; line-height:1.45; color:#6b512a; }
.ws-small-action{
  width:100%; max-width:360px; margin:4px 0 6px; padding:12px 16px;
  border-radius:16px; background:rgba(255,250,240,.92); border:1px solid var(--ws-border);
}
.ws-small-action-label{ display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:700; color:#6b512a; }
.ws-small-action-label svg{ width:14px; height:14px; flex:0 0 auto; }
.ws-small-action p{ margin:4px 0 0; font-size:.86rem; color:var(--ws-ink); line-height:1.5; }
/* §10 ④ 마음 한마디 — small-action 카드 바로 아래, 크게 강조하지 않는 짧은 마무리 한 줄. */
.ws-heart-line{
  display:flex; align-items:flex-start; gap:8px;
  width:100%; max-width:360px; margin:10px 0 2px; padding:2px 4px;
}
.ws-heart-line svg{ width:16px; height:16px; flex:0 0 auto; margin-top:1px; color:var(--ws-gold); }
.ws-heart-line p{ margin:0; font-size:.82rem; line-height:1.55; color:#fff8ec; text-shadow:0 1px 6px rgba(30,20,50,.35); font-style:italic; }
.ws-release-q{ margin:14px 0 2px; font-size:.82rem; color:#fbf3e6; opacity:.9; }
.ws-card-actions{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:360px; margin-top:6px; }
.ws-card-actions .ws-cta{ margin-top:0; }
.ws-cta-heart{ margin-right:2px; }

/* §15 — 흘려보내기 완료 토스트. coin/confetti 없이 담백한 한 줄만 1~2초. */
.ws-release-toast{
  position:fixed; left:50%; bottom:18%; transform:translateX(-50%);
  z-index:55; padding:12px 22px; border-radius:999px; text-align:center;
  background:rgba(255,250,240,.96); border:1px solid var(--ws-gold);
  color:var(--ws-ink); font-size:.88rem; font-weight:700;
  box-shadow:0 8px 24px rgba(40,20,60,.24);
  animation:ws-toast-in .35s ease both;
}
.ws-release-toast[hidden]{ display:none; }
@keyframes ws-toast-in{ from{ opacity:0; transform:translate(-50%, 8px); } to{ opacity:1; transform:translate(-50%, 0); } }
@media (prefers-reduced-motion:reduce){ .ws-release-toast{ animation:none; } }
@keyframes ws-card-in{ from{ opacity:0; transform:translateY(8px) scale(.97); } to{ opacity:1; transform:none; } }
.ws-card-frame{ animation:ws-card-in .4s cubic-bezier(.2,.8,.3,1) both; }
@media (prefers-reduced-motion:reduce){ .ws-card-frame{ animation:none; } }

/* ════════ 마음 보관함 / 상세 ════════ */
.ws-archive-list{
  width:100%; max-width:440px; display:flex; flex-direction:column; gap:10px; margin:6px 0 12px;
}
.ws-archive-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:16px; background:rgba(255,250,240,.94); border:1px solid var(--ws-border);
  text-align:left; font-family:inherit; cursor:pointer;
}
.ws-archive-item img{ width:34px; height:34px; object-fit:contain; flex:0 0 auto; }
.ws-archive-item-body{ flex:1; min-width:0; }
.ws-archive-item-date{ font-size:.68rem; color:var(--ws-sub); }
.ws-archive-item-title{ font-size:.88rem; font-weight:700; color:var(--ws-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-archive-item-msg{ font-size:.76rem; color:var(--ws-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-archive-empty{ color:#fff8ec; font-size:.88rem; margin:24px 0; text-align:center; }
.ws-archive-followup{
  width:100%; max-width:360px; margin:10px 0 6px; padding:12px 14px;
  border-radius:16px; background:rgba(255,250,240,.92); border:1px solid var(--ws-border);
}
.ws-archive-followup p{ margin:0 0 8px; font-size:.84rem; color:var(--ws-ink); }
.ws-archive-followup-choices{ display:flex; flex-wrap:wrap; gap:8px; }
.ws-archive-followup-choices button{
  flex:1 1 auto; min-height:40px; padding:6px 10px; border-radius:999px;
  background:var(--ws-cream); border:1px solid var(--ws-gold); color:#6b512a;
  font-family:inherit; font-size:.78rem; cursor:pointer;
}
.ws-archive-followup-answer{ font-size:.82rem; color:var(--ws-ink); }

/* ════════ 에러 오버레이 ════════ */
/* 2026-09-11 [놀이터 보라돌이 UI 전수 제거] §8 — 화면 전체를 덮는 진한 남보라(rgba(22,16,41,
   .88))였다. 이 파일 §5 가 이미 세운 원칙("보라는 밤 분위기의 보조색일 뿐, surface 는 Warm
   Cream/Ivory") 그대로, 다른 화면 전환에서와 똑같이 밝은 ivory 오버레이로 바꾼다. */
.ws-error{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center;
  background:rgba(253,243,226,.97); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.ws-error[hidden]{ display:none; }
.ws-error p{ color:var(--ws-ink); font-size:1rem; line-height:1.6; margin:0 0 16px; }
.ws-error .ws-cta{ max-width:220px; }

/* ════════ 안전 게이트(safety-gate.js) — 색만 이 화면 톤으로 스코프 재도색.
   safety-gate.css 자체는 손대지 않는다(타로집·사주집·도사집과 공유) — 여기서만 이긴다. ════════ */
#worry-app .sg-safe{
  background:rgba(255,250,240,.97); color:var(--ws-ink);
  border-color:var(--ws-gold);
}
#worry-app .sg-safe h3, #worry-app .sg-safe .sg-tel{ color:var(--ws-ink); }
#worry-app .sg-safe p, #worry-app .sg-safe .sg-safe-tail, #worry-app .sg-safe .sg-tel small{ color:var(--ws-sub); }
#worry-app .sg-safe .sg-tel{ background:var(--ws-lavender); border-color:var(--ws-border); }
#worry-app .sg-safe .sg-tel b{ color:#8f6a2e; }
#worry-app .ws-disclaimer-slot .sg-disclaimer{ color:#e6dcf2; background:rgba(255,255,255,.08); }
/*  신고 줄(SafetyGate.신고줄붙이기)은 항상 .ws-summary-card **안**(밝은 크림/라벤더 배경)
    에 붙는다(정리텍스트 바로 뒤 형제로 삽입되므로) — 어두운 배경용 색(#e6dcf2)을 쓰면
    거의 안 보인다(실기기 실측: 대비 거의 0 · 2026-09-10 발견). 카드 잉크색 계열로 고친다. */
#worry-app .sg-report{ color:var(--ws-sub); margin-top:10px; padding-top:8px; border-top:1px dashed var(--ws-border); }
#worry-app .sg-report button{ color:#6b512a; border-color:var(--ws-gold); background:rgba(255,255,255,.5); }

.ws-disclaimer-slot{ position:relative; z-index:1; flex:0 0 auto; padding:0 16px; }
.ws-bottom-safe{ flex:0 0 auto; height:calc(var(--banner-ad-height,0px) + 10px + env(safe-area-inset-bottom,0px)); }

/* ── 작은 화면(지시 §29) ── */
@media (max-height:700px){
  .ws-q{ font-size:1.08rem; margin-top:10px; }
  .ws-entry-copy h1{ font-size:1.14rem; }
  .ws-entry-deco{ height:min(22vh, 170px); }
  .ws-mood-card img{ width:44px; height:44px; }
}

/* ═══ WO-58 마무리 화면 — 카드 단추 뒤 한 장(하루마무리 [불 끌까요?] 카드와 같은 종이 카드 + 달 SVG) · 본문 ≥17px · 부제 ≥15px · 단추 높이 ≥44 ═══ */
.ws-screen[data-ws-screen="finish"]{ justify-content:center; padding-bottom:48px; }
#worry-app[data-ws-step="finish"] .ws-archive-btn{ display:none; }
.ws-fin-card{ position:relative; width:min(340px,100%); box-sizing:border-box; padding:26px 22px 22px; text-align:center; color:#4a3526;
  background:radial-gradient(120% 90% at 20% 0%,#fffdf6,#fff2d8); border:2.5px solid #dba95a; border-radius:24px; box-shadow:0 10px 26px rgba(30,20,50,.35); }
.ws-fin-moon{ display:block; width:34px; height:34px; margin:0 auto 8px; }
.ws-fin-title{ margin:0; font-size:22px; font-weight:800; line-height:1.35; color:#4a3526; word-break:keep-all; }
.ws-fin-sub{ margin:8px 0 20px; font-size:16px; line-height:1.5; color:#6a513a; word-break:keep-all; }
.ws-fin-go{ display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; padding:0 16px; border-radius:26px; border:1.5px solid #c99557;
  background:linear-gradient(#fff6d8,#f8dc9a); color:#4a3526; font-family:inherit; font-size:17px; font-weight:700; box-shadow:0 3px 10px rgba(120,80,30,.22); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ws-fin-go:active{ filter:brightness(.96); }
.ws-fin-fl{ position:absolute; width:30px; height:30px; pointer-events:none; }
.ws-fin-fl-tl{ left:-12px; top:-12px; } .ws-fin-fl-br{ right:-12px; bottom:-12px; }