/*
 * Widget styles — EntryCard, MilestoneCard, SignaturePad, etc.
 * Per CLAUDE.md §1, this file <= 200 lines.
 */

/* EntryCard */
.entry-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 18px; padding: 24px;
  margin-bottom: var(--sp-3); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
}
.entry-card:hover { border-color: var(--brand-primary); box-shadow: 0 12px 32px rgba(124, 58, 237, 0.12); transform: translateY(-2px); }
.entry-card.recommended {
  border-color: var(--brand-primary);
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF5FF 50%, #F0F9FF 100%);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.10);
  position: relative;
}
.entry-card.recommended::before {
  content: ''; position: absolute; inset: -1.5px;
  border-radius: 18px; padding: 1.5px;
  background: var(--brand-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.entry-card.recommended .entry-card-title {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.entry-card-price { font-size: clamp(24px, 4vw, 32px); font-weight: 800; color: var(--text); margin-bottom: var(--sp-1); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.entry-card-price.free {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.entry-card-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-2); }
.entry-card-desc  { font-size: var(--fs-md); color: var(--text-sub); line-height: 1.6; margin-bottom: var(--sp-4); }
.entry-card-features { list-style: none; padding: 0; margin-bottom: var(--sp-4); }
.entry-card-features li { padding: 4px 0; padding-left: 22px; position: relative; font-size: var(--fs-md); color: var(--text-sub); }
.entry-card-features li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; }

/* MilestoneCard */
.milestone-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3); transition: all 0.15s;
}
.milestone-card.expanded { border-color: var(--toss-blue); }
.milestone-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); cursor: pointer; }
.milestone-card-icon { font-size: 18px; width: 28px; flex-shrink: 0; }
.milestone-card-icon.done { color: var(--success); }
.milestone-card-icon.in_progress { color: var(--toss-blue); }
.milestone-card-icon.pending { color: var(--text-mute); }
.milestone-card-icon.cancelled { color: var(--danger); }
.milestone-card-title { font-weight: 700; font-size: var(--fs-md); }
.milestone-card-meta  { font-size: var(--fs-sm); color: var(--text-sub); margin-top: 2px; }
.milestone-card-fee   { font-weight: 700; color: var(--text); white-space: nowrap; }
.milestone-card-detail { padding-top: var(--sp-4); margin-top: var(--sp-4); border-top: 1px dashed var(--border); display: none; }
.milestone-card.expanded .milestone-card-detail { display: block; }
.milestone-card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

/* [P3c-3] 旧 ChatPanel 스타일(.chat-*) 제거 — UIUX v2.60에서 컴포넌트 폐기(메신저는 .msger-* 별도) */

/* TemplateReply */
.template-tray { display: flex; gap: 6px; flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); background: var(--surface-alt); border-top: 1px solid var(--border); }
.template-chip { font-size: var(--fs-sm); padding: 6px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); cursor: pointer; }
.template-chip:hover { border-color: var(--toss-blue); background: var(--toss-blue-12); }

/* SignaturePad */
.signature-pad-wrap { background: var(--surface-alt); border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: var(--sp-2); }
.signature-pad-canvas { display: block; width: 100%; height: 200px; background: var(--surface); border-radius: var(--radius-sm); touch-action: none; cursor: crosshair; }
.signature-pad-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

/* SlotPicker */
.slot-picker { display: flex; flex-direction: column; gap: var(--sp-2); }
.slot-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all 0.15s; }
.slot-row:hover { border-color: var(--toss-blue); background: var(--toss-blue-12); }
.slot-row.selected { border-color: var(--toss-blue); background: var(--toss-blue-12); }
.slot-row input[type="radio"] { accent-color: var(--toss-blue); }
.slot-when { flex: 1; font-weight: 600; }
.slot-channel { font-size: var(--fs-sm); color: var(--text-sub); }

/* SLA countdown */
.sla-countdown { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; }
.sla-countdown.fresh    { background: var(--success-light); color: var(--success); }
.sla-countdown.imminent { background: var(--warn-light);    color: var(--warn); }
.sla-countdown.violated { background: var(--danger-light);  color: var(--danger); animation: pulse 1.5s ease-in-out infinite; }