/* Sovasta Friend — 색과 Friend 만의 조각. 공용 모양은 /aether/aether.css. */
:root { --bg: #FFF8F0; --card: #fff; --ink: #1A2B4A; --mut: #5A6478; --line: #F0E4D6; --brand: #FF9A8B; --brand-ink: #E8705F; --accent: #1A2B4A; --ai: #7C5CFF; --ai-soft: #F2EEFF; --soft: #FFF3E8; }
.nl.on .ni { background: var(--brand); }
.hero { text-align: center; padding: 28px 20px; background: linear-gradient(160deg, #fff 0%, #FFF0E6 60%, #F2EEFF 100%); }
.hero-art svg { width: min(280px, 80%); height: auto; }
.hero h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.lead { font-size: 1.05rem; max-width: 560px; margin: 0 auto 16px; color: var(--mut); }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: start; margin-bottom: 12px; }
.three .em { font-size: 1.6rem; margin: 0; }
@media (max-width: 640px) { .three { grid-template-columns: 1fr; } }
.welcome .wsteps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.welcome .card-s { display: grid; gap: 2px; text-decoration: none; }
.welcome .card-s:hover { border-color: var(--brand); }
.ai-strip .row { flex-wrap: nowrap; overflow-x: auto; }
.ai-chip { display: grid; justify-items: center; gap: 4px; border: 0; background: none; cursor: pointer; font: 600 .78rem var(--font); color: var(--ink); min-width: 64px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pcard { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 14px 10px; }
.pcard a { text-decoration: none; } .pcard.is-ai { background: linear-gradient(180deg, var(--ai-soft), #fff 60%); }
.ai-head .slots { display: flex; gap: 6px; } .slots i { width: 22px; height: 22px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #E4DEFF; }
.slots i.on { background: var(--ai); } .slots i.off { background: #eee; }
.note { background: #FFF7E6; border: 1px solid #FCE2B0; border-radius: 10px; padding: 8px 12px; }
table.lim { border-collapse: collapse; margin: 6px 0; } table.lim th, table.lim td { border: 1px solid var(--line); padding: 4px 10px; text-align: center; }
.my-ai { border-left: 4px solid var(--ai); } .my-ai.paused { opacity: .75; border-left-color: #B9B4C9; }
.danger-t { color: var(--bad) !important; }
.personas { border: 0; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.personas legend { font-weight: 600; margin-bottom: 6px; }
.pp { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin: 0; font-weight: 400; cursor: pointer; }
.pp span { display: grid; } .pp:has(input:checked) { border-color: var(--ai); background: var(--ai-soft); }
fieldset { border: 0; padding: 0; margin: 0 0 10px; } legend { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
label.chip { display: inline-flex; gap: 4px; align-items: center; margin: 0; font-weight: 500; }
.ai-cover .cover-art { background: linear-gradient(120deg, #7C5CFF, #B9A5FF); color: #fff; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0 0 8px; } dl.kv dt { font-weight: 600; font-size: .86rem; } dl.kv dd { margin: 0; }
.chip-s.lim { background: #FEF2F2; color: #B91C1C; }
.task .artifact { background: var(--soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.event { display: flex; gap: 14px; align-items: flex-start; } .ev-b { flex: 1; min-width: 0; }
.cal { width: 58px; flex: none; border-radius: 12px; background: var(--brand); color: #fff; text-align: center; padding: 6px 0; display: grid; }
.cal b { font-size: 1.5rem; line-height: 1; } .cal span { font-size: .74rem; text-transform: uppercase; }
.cal.sm { width: 40px; padding: 4px 0; } .cal.sm b { font-size: 1.05rem; }
.prow.wide { width: 100%; border: 0; background: none; text-align: start; cursor: pointer; font: inherit; color: inherit; }
.rail-card.safe { background: linear-gradient(160deg, #fff, var(--ai-soft)); }
