/* connectONE · 익명 릴레이 응원 포차: light editorial cards and high-contrast feedback */
.relay-section{padding:35px 0 58px;background:#f5f7ff;min-height:70vh}
.relay-shell{background:white;border-radius:32px;border:1px solid #dfe8fa;padding:clamp(19px,3.5vw,42px);box-shadow:0 18px 48px #263e9210}
.relay-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:23px}
.relay-kicker{font-size:.73rem;letter-spacing:.12em;font-weight:900;color:#3656b8}
.relay-heading h2{margin:10px 0;font-size:clamp(1.85rem,3.5vw,2.7rem);line-height:1.18;letter-spacing:-.06em;color:#152b6b}
.relay-heading p{color:#647695;line-height:1.75;font-size:.91rem;margin:0;max-width:720px}
.relay-seal{font-size:3rem;width:90px;height:90px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(135deg,#fff0ca,#ffd6d9);transform:rotate(-7deg);flex:none}
.relay-guest{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#e9f1ff;border:1px solid #d9e7ff;border-radius:20px;padding:24px}
.relay-guest p{font-size:.87rem;line-height:1.7;color:#586f9e;margin:6px 0 0}.relay-guest strong{color:#1c459b}
.relay-blue{background:#285cf0;border:0;border-radius:13px;color:white;font-size:.88rem;font-weight:850;padding:12px 19px;cursor:pointer}
.relay-blue:disabled{background:#95a9d9;cursor:default}
.relay-soft-button{border:1px solid #d0ddf6;border-radius:13px;background:#fff;color:#2350b4;font-size:.84rem;font-weight:800;padding:10px 15px;cursor:pointer}
.relay-blue:focus-visible,.relay-soft-button:focus-visible,.relay-feeling:focus-visible,.relay-report-trigger:focus-visible{outline:3px solid #8ab0fa;outline-offset:3px}
.relay-soft-button:disabled{opacity:.64;cursor:default}
.relay-members{display:grid;gap:19px}
.relay-member-welcome{display:flex;gap:12px;align-items:center;justify-content:space-between;background:#f2f6ff;border:1px solid #e1eaf9;border-radius:16px;padding:13px 17px;font-size:.84rem;color:#3560b0}
.relay-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.relay-panel{border:1px solid #e0e8f6;border-radius:24px;padding:clamp(16px,2vw,24px);min-width:0;background:#fff}
.relay-panel.received{background:linear-gradient(155deg,#fffefb,#f8f9ff)}
.relay-panel.writing{background:linear-gradient(155deg,#eff5ff,#fcfdff)}
.relay-label{display:inline-block;padding:5px 11px;background:#e6edff;border-radius:999px;color:#3153ad;font-weight:850;letter-spacing:.065em;font-size:.68rem}
.relay-panel h3{font-size:1.2rem;letter-spacing:-.04em;color:#213e89;margin:12px 0 8px}
.relay-muted{font-size:.8rem;color:#6a7c9b;line-height:1.72}
.relay-empty-letter,.relay-empty-history{border:1px dashed #bfcfeb;border-radius:17px;background:#f7faff;padding:24px 17px;text-align:center;color:#6c7d9e;font-size:.86rem;line-height:1.8}
.relay-letter{margin:15px 0 16px;padding:18px;background:#fff;border-radius:18px;border:1px solid #ecdeca;box-shadow:0 9px 20px #9e70400d}
.relay-letter-tag{font-size:.65rem;color:#c17849;letter-spacing:.125em;font-weight:900}
.relay-letter-body{white-space:pre-wrap;overflow-wrap:anywhere;color:#3b3a4c;font-size:.94rem;line-height:1.95;margin:13px 0 17px}
.relay-letter-hint,.relay-letter-response,.relay-letter-next{font-size:.77rem;color:#647494;line-height:1.8}
.relay-letter-response{background:#f0f8e4;border-radius:12px;color:#4b722d;padding:11px}
.relay-feelings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:15px 0}
.relay-feeling{border:1px solid #e1e5f1;border-radius:16px;background:white;cursor:pointer;min-width:0;min-height:92px;padding:12px 7px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px}
.relay-feeling-icon{font-size:2rem;line-height:1.25;filter:drop-shadow(0 5px 6px #6c5c2618)}
.relay-feeling-label{font-size:.78rem;font-weight:850;color:#42547c}
.relay-feeling:hover{border-color:#a8c4fa;background:#f4f8ff}
.relay-feeling[aria-pressed=true]{background:#ecf7dc;border-color:#9cc76d}
.relay-feeling:disabled{cursor:default}
.relay-report-trigger{background:none;border:0;padding:6px;color:#63789a;font-size:.76rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.relay-report-trigger:hover{color:#235cc3}
.relay-draw{margin-top:10px;width:100%}
.relay-write textarea{width:100%;min-height:162px;box-sizing:border-box;padding:14px;border:1px solid #ccd9f2;border-radius:15px;resize:vertical;background:#fff;color:#233f7f;font:inherit;line-height:1.8;outline:none}
.relay-write textarea:focus{border-color:#3767df;box-shadow:0 0 0 3px #dbe7ff}
.relay-write-footer{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px}
.relay-note{font-size:.78rem;line-height:1.85;color:#627595;margin:6px 0}
.relay-status{font-size:.83rem;line-height:1.75;color:#3866b2;margin:0;min-height:20px}
.relay-status[data-error=true]{color:#b44346}
.relay-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:19px}
.relay-summary-cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 5px;border:1px solid #e5eaf6;background:#f8faff;border-radius:16px;text-align:center}
.relay-summary-icon{font-size:1.65rem}.relay-summary-cell strong{font-size:.76rem;color:#4d5e80}.relay-summary-number{font-size:1.1rem;font-weight:900;color:#1d4296}
.relay-history-card{border:1px solid #e1e8f7;border-radius:17px;padding:15px 18px;margin:11px 0}
.relay-history-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:.8rem;color:#345fb1}
.relay-history-head span{color:#8190a9;font-size:.74rem}
.relay-history-text{font-size:.86rem;color:#3c5179;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0}
.relay-history-feedback{font-size:.78rem;color:#5970a0;background:#f0f5ff;border-radius:10px;padding:11px;line-height:1.6}
.relay-history-area{border-top:1px solid #e6eefa;margin-top:24px;padding-top:23px}
.relay-history-area h3{font-size:1.1rem;color:#234d9f;margin:0 0 6px}
.relay-rule{background:#fff7e7;border:1px solid #f1e2be;color:#775c30;font-size:.8rem;line-height:1.8;border-radius:14px;padding:13px 16px;margin-top:18px}
.relay-report-dialog{border:0;border-radius:22px;width:min(440px,90vw);padding:24px;box-shadow:0 30px 80px #20336755}
.relay-report-dialog::backdrop{background:#1c295c77}
.relay-report-dialog h3{margin:0 0 8px;color:#224eaa}.relay-report-dialog select{width:100%;padding:11px;background:white;border:1px solid #cbd8f1;border-radius:12px;margin:8px 0 15px}
.relay-report-actions{display:flex;flex-wrap:wrap;gap:10px}.relay-report-item{padding:14px;border:1px solid #e4ebf8;border-radius:13px;margin:10px 0}.relay-moderation{margin-top:23px;padding-top:14px;border-top:1px solid #e6eaf6}
.relay-moderation h3{font-size:1rem;color:#244b96}
.relay-guest[hidden],.relay-members[hidden],.relay-report-dialog[hidden],.relay-moderation[hidden]{display:none!important}
@media(max-width:860px){.relay-grid{grid-template-columns:1fr}.relay-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.relay-heading{align-items:start}.relay-seal{width:58px;height:58px;border-radius:20px;font-size:2.1rem}.relay-guest{flex-direction:column;align-items:stretch}.relay-panel{padding:17px}.relay-member-welcome{flex-direction:column;align-items:start}}
