/* Story-first (l1) "지금 마음과 가까운 것" picker and the picked person's panel, 2026-10-23.
   Look follows the approved prototype (docs/landing-persona/prototype.html): line pictograms, slate text, violet accent.
   Every rule is scoped to #emotional-landing (so the page's own section rules do not override the prototype spacing) or to l1, so the outcome-first (l2) hero is untouched. */
#emotional-landing .persona-picker{max-width:560px;margin:0 0 6px}
#emotional-landing .persona-chips{display:flex;flex-direction:column;gap:10px;margin:22px 0 4px}
#emotional-landing .persona-chip{appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid #ece9f1;background:#fff;border-radius:14px;padding:12px 14px;font:inherit;font-size:16.5px;line-height:1.45;letter-spacing:-.02em;color:var(--ink);cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
#emotional-landing .persona-chip::after{content:"";flex:0 0 8px;width:8px;height:8px;margin-right:4px;border-right:1.6px solid #b9b2c4;border-bottom:1.6px solid #b9b2c4;transform:rotate(-45deg)}
#emotional-landing .persona-chip:hover{border-color:#d9cdfa}
#emotional-landing .persona-chip:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
#emotional-landing .persona-chip[aria-pressed="true"]{border-color:#c4b5fd;background:#f7f5fc;color:var(--violet);font-weight:650}
#emotional-landing .persona-chip[aria-pressed="true"]::after{border-color:var(--violet)}
#emotional-landing .persona-ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:#f7f5fc;display:grid;place-items:center}
#emotional-landing .persona-chip[aria-pressed="true"] .persona-ico{background:#fff}
#emotional-landing .persona-ico svg{width:22px;height:22px;fill:none;stroke:var(--violet);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#emotional-landing .persona-txt{flex:1;min-width:0;word-break:keep-all}
#emotional-landing .persona-skip{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--secondary)}

/* The hero's own button stays for people who start without picking, smaller and quieter than the panel's. */
html[data-landing-variant="l1"] #emotional-landing .hero .hero-actions{margin-top:18px;gap:6px}
html[data-landing-variant="l1"] #emotional-landing .hero #hero-cta{width:auto;min-height:0;margin-top:0;padding:11px 18px;gap:12px;justify-content:center;font-size:15px;background:#fff;color:var(--violet);border:1px solid #d9cdfa;box-shadow:none}
html[data-landing-variant="l1"] #emotional-landing .hero #hero-cta:hover{background:#f7f5fc}
html[data-landing-variant="l1"] #emotional-landing .hero .hero-actions .btn-caption{text-align:left}

#emotional-landing .persona-panel{padding:8px 0 34px}
#emotional-landing .persona-panel .shell{max-width:calc(var(--content) + 44px)}
#emotional-landing .persona-night{margin-top:18px;padding:22px 20px;border-radius:16px;background:#1f1b2b;color:#f3f0f8}
#emotional-landing .persona-tag{display:inline-block;font-size:11.5px;line-height:1.6;color:#c9bff0;border:1px solid #4b4266;border-radius:999px;padding:1px 8px;margin-bottom:12px}
#emotional-landing .persona-night p{margin:0;font-size:17px;line-height:1.95;letter-spacing:-.01em;word-break:keep-all}
#emotional-landing .persona-alone{margin:22px 2px 0;font-size:15.5px;line-height:1.75;color:#3d3843;word-break:keep-all}
#emotional-landing .persona-alone small{display:block;margin-top:2px;font-size:12.5px;color:var(--secondary)}
#emotional-landing .persona-panel h2{margin:34px 0 0;font-size:var(--landing-type-subheading);line-height:1.5;letter-spacing:-.02em;color:var(--ink)}
#emotional-landing .persona-quote{margin:14px 0 0;padding:14px 16px;border-left:3px solid var(--violet);background:#faf9ff;border-radius:0 12px 12px 0;font-size:16px;line-height:1.8;color:#2b2731;word-break:keep-all}
#emotional-landing .persona-quote b{display:block;margin-bottom:4px;font-size:13px;color:var(--violet)}
#emotional-landing .persona-answer{margin-top:16px;border-top:1px solid #ece9f1}
#emotional-landing .persona-answer>div{padding:16px 0;border-bottom:1px solid #ece9f1}
#emotional-landing .persona-label{margin-bottom:6px;font-size:13.5px;font-weight:650;color:var(--violet)}
#emotional-landing .persona-answer p{margin:0;font-size:16.5px;line-height:1.85;color:var(--ink);word-break:keep-all}
#emotional-landing .persona-answer strong{display:block;margin-bottom:4px;font-size:17px}
#emotional-landing .persona-question{font-weight:650}
#emotional-landing .persona-facts{margin:16px 0 0;font-size:14.5px;line-height:1.8;color:var(--secondary);word-break:keep-all}
#emotional-landing .persona-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:24px}
#emotional-landing .persona-actions .btn{margin-top:0}
#emotional-landing .persona-handoff{margin:4px 0 0;padding:12px 14px;border-radius:12px;background:#f7f5fc;font-size:14.5px;line-height:1.6;color:#4c3a86;word-break:keep-all}
#emotional-landing .persona-handoff[hidden]{display:none}
#emotional-landing .persona-actions .cta-note{text-align:center}

@media(min-width:741px){
 #emotional-landing .persona-panel{padding:16px 0 56px}
 #emotional-landing .persona-panel .shell{max-width:664px}
 #emotional-landing .persona-actions{align-items:flex-start}
 #emotional-landing .persona-actions .btn{min-width:320px}
 #emotional-landing .persona-handoff{align-self:stretch}
 #emotional-landing .persona-actions .cta-note{text-align:left}
}

/* Intake: one line above the "concerns" question after a landing pick (journey.js applyLandingPick). */
.landing-pick-note{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#f7f5fc;font-size:14.5px;line-height:1.6;color:#4c3a86;word-break:keep-all}