/* The end page (summary.js). Draft look until คุณปู๊น's UI; sits above every pop-up so all screens end on the same page. */
#summary { position:fixed; inset:0; z-index:200; overflow:auto; background:#faf7f1; color:#2b2b2b; }
#summary.hidden, #sumOpen.hidden { display:none; }
.sum-wrap { max-width:760px; margin:0 auto; padding:24px 16px 80px; }
.sum-top { display:flex; justify-content:space-between; align-items:center; }
.sum-top img { width:44px; height:44px; }
.sum-top button, #sumOpen { font:inherit; padding:8px 16px; border-radius:20px; border:1px solid #2b2b2b; background:#fff; cursor:pointer; }
#sumOpen { position:fixed; right:16px; bottom:16px; z-index:60; background:#2b2b2b; color:#fff; }
.sum-big { font-size:clamp(34px, 7vw, 60px); line-height:1.15; margin:40px 0 10px; animation:sumUp .9s ease-out both; }
.sum-sub { font-size:18px; color:#5d5d5d; margin:0 0 34px; animation:sumUp .9s .3s ease-out both; }
.sum-journey { list-style:none; margin:0; padding:0; position:relative; }
.sum-journey::before { content:""; position:absolute; left:19px; top:10px; bottom:10px; width:2px; background:#ddd5c6; }
.sum-step { display:flex; gap:14px; margin:0 0 22px; opacity:0; transform:translateY(14px); transition:opacity .6s, transform .6s; position:relative; }
.sum-step.in { opacity:1; transform:none; }
.sum-dot { flex:0 0 40px; height:40px; border-radius:50%; background:var(--c); display:flex; align-items:center; justify-content:center; font-weight:700; border:3px solid #faf7f1; }
.sum-body { flex:1; min-width:0; }
.sum-lab { font-weight:700; font-size:17px; margin:7px 0 6px; } .sum-lab span { font-weight:400; color:#8a8a8a; font-size:14px; }
.sum-card { background:var(--c); border-radius:6px; padding:10px 12px; margin:0 0 6px; white-space:pre-wrap; box-shadow:0 1px 2px #0000001a; overflow-wrap:anywhere; }
.sum-none { color:#8a8a8a; font-style:italic; }
.sum-others { opacity:0; transition:opacity .8s; margin-top:40px; } .sum-others.in { opacity:1; }
.sum-others h3 { font-size:20px; margin:0 0 4px; } .sum-note { color:#8a8a8a; margin:0 0 14px; }
.sum-sample { position:relative; background:#fff; border:1px dashed #b9b0a0; border-radius:10px; padding:12px 14px; margin:0 0 12px; }
.sum-sample ol { margin:8px 0 0; padding-left:20px; } .sum-sample li { margin:3px 0; } .sum-sample li span { color:#8a8a8a; }
.sum-tag { position:absolute; right:10px; top:10px; font-size:12px; background:#fff3d6; border:1px solid #e9cf8f; border-radius:12px; padding:1px 9px; }
.sum-org { color:#8a8a8a; font-size:14px; }
@keyframes sumUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .sum-step, .sum-others { transition:none; } .sum-big, .sum-sub { animation:none; } }
/* board 4's How-Might-We card above its ideas (review 3 Nov) */
.sum-q { font-size:13px; color:#8a8a8a; margin:4px 0 3px; } .sum-hmw { border:2px solid #2b2b2b33; font-weight:600; }
/* narrated end (designer, 3 Nov night): the closing line waits for its sound; display:none so its rise animation starts with the voice */
.sum-head.wait { display:none; }