/* 실적리스트·DB리스트 모바일 카드 — 타임라인 카드형 (2026-09-30)
 * 마크업 = workspace/_order_list_search_card.html.erb · workspace/_db_list_search_results.html.erb(카드 블록)
 *        · workspace/_gifts_management_search_results.html.erb(카드 블록, 타임라인 없음)
 *        · workspace/_review_data_card.html.erb(후기, 타임라인 없음)
 *        · consultation_reservations/_search_results.html.erb(상담예약 카드 블록, 타임라인 없음)
 *        · status_notifications/_search_results.html.erb(상태알림 카드 블록 — 상담예약 문법 재사용)
 *        · workspace/_customer_search_results.html.erb(고객관리 카드 블록 — 3칸 숫자)
 *        · workspace/_first_db_search_results.html.erb(원천DB 카드 블록)
 *        · workspace/_ad_campaigns_list.html.erb(광고캠페인 카드 블록 — 4칸 성과)
 *        · companies/tabs/_landing_pages_list.html.erb(랜딩페이지 카드 블록 — 4칸 성과)
 *        · workspace/_privacy_consent_groups_search_results.html.erb(동의서 그룹 카드 블록 — 2칸) (.olc-*)
 * 펼침 = controllers/ol_card_controller.js (두 화면 공용)
 * 색 축: --olc-acc = 첫 진행상태의 정체성 색(StatusPillHelper.accent) — 왼쪽 띠·타임라인 점에 쓴다.
 * 배경·글자색은 항상 함께 지정한다(개발 규칙 10).
 */
.olc {
  --olc-acc: var(--ord-text-4);
  position: relative;
  background: var(--ord-panel);
  color: var(--ord-text);
  border: 1px solid var(--ord-line);
  border-left: 4px solid var(--olc-acc);
  border-radius: 0;   /* 9/30 사용자 — 카드 모서리 라운드 없음 */
  padding: 12px 14px 10px;
  cursor: pointer;
}
.olc.is-ask    { background: var(--ord-tint-amber-bg); }
.olc.is-answer { background: var(--ord-tint-green-bg); }
.olc.is-dup      { background: var(--ord-tint-amber-bg); }                 /* DB리스트 — 최근 중복 유입(빠른 상담 신호) */
.olc.is-disabled { opacity: .5; cursor: not-allowed; }    /* DB리스트 — 공유 중(공유DB리스트에서 처리) */
.olc.is-static   { cursor: default; }                     /* 사은품관리 — 카드 본체 클릭 없음(고객명·상태만 동작) */
/* 사은품관리 — 긴급: 빨간 머리띠 + 붉은 테두리·바탕 (9/30 «눈에 확 띄게») */
.olc.is-urgent { background: var(--ord-tint-red-bg); border-color: var(--ord-tint-red-line); }
.olc-urgent-band {
  display: flex; align-items: center; gap: 6px;
  margin: -12px -14px 10px; padding: 6px 14px;
  background: var(--ord-badge); color: var(--ord-on-solid);
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
}
.olc-urgent-band::before {
  content: "!"; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ord-panel); color: var(--ord-tint-red-fg); font-size: 11px; font-weight: 900;
}

/* 사은품관리 — 체크박스·링크형 이름·작은 배지·수령자/결제수단·큰 금액 */
.olc-check { align-self: center; width: 18px; height: 18px; margin: 0 2px 0 0; accent-color: var(--ord-accent); cursor: pointer; }
.olc-name.is-link { color: var(--ord-tint-blue-fg); cursor: pointer; }
.olc-mini { align-self: center; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; border: 1px solid; }
.olc-mini.is-purple { background: var(--ord-tint-violet-bg); color: var(--ord-tint-violet-fg); border-color: var(--ord-tint-indigo-line); }
.olc-mini.is-red    { background: var(--ord-tint-red-bg); color: var(--ord-tint-red-fg); border-color: var(--ord-tint-red-line); }
.olc-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px; }
.olc-pay .olc-kv b { font-weight: 800; color: var(--ord-text); }
.olc-amount.is-lg { font-size: 17px; }
.olc-pills { display: flex; flex-wrap: wrap; gap: 4px; }

/* 머리 — 이름·연락처(좌) | 진행상태(우측 상단) */
.olc-top { display: flex; align-items: flex-start; gap: 8px; }
.olc-who { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; row-gap: 2px; }
.olc-name { font-size: 17px; font-weight: 800; color: var(--ord-text); }
.olc-tel  { font-size: 13px; color: var(--ord-text-3); }
.olc-note { font-size: 11px; color: var(--ord-text-4); }
.olc-inq {
  align-self: center;
  padding: 1px 7px; border-radius: 6px;
  font-size: 10px; font-weight: 700; color: var(--ord-on-solid); background: var(--ord-solid-violet);
}
.olc.is-answer .olc-inq { background: var(--ord-solid-green); }
.olc-st { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 48%; }
.olc-st .ord-st-pill.is-sm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 3px 10px; font-size: 12px; }

/* DB리스트 — 블랙리스트 배지 · 시스템 상태(열람/미열람 등, 진행상태 아래 작은 pill) */
.olc-bl {
  align-self: center; padding: 1px 7px; border-radius: 6px;
  font-size: 10px; font-weight: 700; background: var(--bl-bg, var(--ord-tint-red-bg)); color: var(--bl-fg, var(--ord-tint-red-fg));
}
.olc-sys-st {
  --s-acc: var(--ord-text-3);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  color: var(--s-acc); background: color-mix(in srgb, var(--s-acc) 8%, var(--ord-panel));
  border: 1px solid color-mix(in srgb, var(--s-acc) 20%, var(--ord-panel));
}
.olc-sys-st.is-lg { padding: 3px 10px; font-size: 12px; }
.olc-sys-st.is-link { cursor: pointer; }
.olc-sys-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s-acc); }
.olc-tag { padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; background: var(--ord-band); color: var(--ord-text-2); }
.olc-tag.is-order  { background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); }
.olc-tag.is-view   { background: var(--ord-tint-blue-bg); color: var(--ord-tint-indigo-fg); }
.olc-tag.is-info   { background: var(--ord-tint-cyan-bg); color: var(--ord-tint-cyan-fg); }
.olc-tag.is-warn   { background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); }
.olc-tag.is-danger { background: var(--ord-tint-red-bg); color: var(--ord-tint-red-fg); }

/* 후기데이터 — 별점·미디어 줄 · 인용형 본문 */
.olc-rv-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.olc-stars { color: var(--ord-star); font-size: 15px; letter-spacing: 1px; white-space: nowrap; }
.olc-stars .is-off { color: var(--ord-text-5); }
.olc-stars b { margin-left: 4px; color: var(--ord-text-3); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.olc-rv-off { font-style: normal; color: var(--ord-tint-amber-fg); font-weight: 800; }
.olc-quote {
  margin-top: 8px; padding: 8px 12px;
  background: var(--ord-surface-2); color: var(--ord-text-2);
  border-left: 3px solid var(--ord-line);
  font-size: 14px; line-height: 1.55;
  word-break: keep-all; overflow-wrap: anywhere;
}
.olc-quote.is-empty { color: var(--ord-line-2); }
.fdb-consent-tag { border: 0; cursor: pointer; background: var(--ord-band); color: var(--c-fg, var(--ord-tint-green-fg)); }

/* 상담예약 — UI 배지·예약 시각(크게)·안읽음 강조 */
.rsv-ui {
  align-self: center; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 11px; font-weight: 700;
  background: var(--ui-bg, var(--ord-line)); color: var(--ui-fg, var(--ord-text-2));
}
.rsv-when { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rsv-when-time { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; color: var(--ord-text-2); font-variant-numeric: tabular-nums; }
.rsv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ord-tint-blue-fg); }
.rsv-card.is-unread { background: var(--ord-tint-blue-bg); }
.rsv-card.is-unread .rsv-when-time { font-weight: 800; color: var(--ord-text); }
.rsv-card.is-cancelled .rsv-when-time { color: var(--ord-text-4); text-decoration: line-through; }
.rsv-read { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--ord-text-4); }
.rsv-memo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 상태알림 — 표/카드 전환 · 지정 상태 줄 · 등록일 */
.sn-mobile-cards { display: none; }
@media (max-width: 768px) {
  .sn-pc-table { display: none; }
  .sn-mobile-cards { display: flex; flex-direction: column; gap: 10px; }
}
.sn-when {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 12px;
  background: var(--ord-surface-2); color: var(--ord-text-2); border-radius: 8px;
}
.sn-when-lbl { font-size: 13px; font-weight: 600; color: var(--ord-text-2); }
.sn-when .ord-st-pill.is-sm { padding: 3px 10px; font-size: 12px; }
.sn-date { flex-shrink: 0; font-size: 12px; color: var(--ord-text-4); }

/* 고객관리 — 3칸 숫자 · 고객번호 · 위 도구 줄 */
.cust-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 10px; background: var(--ord-surface-2); color: var(--ord-text); border-radius: 8px;
}
.cust-stats > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; }
.cust-stats > div + div { border-left: 1px solid var(--ord-line); }
.cust-stats b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cust-stats span { font-size: 11.5px; color: var(--ord-text-4); }
.cust-stats .is-zero b { color: var(--ord-line-2); }
.cust-stats.is-4 { grid-template-columns: repeat(4, 1fr); }
.cust-stats.is-2 { grid-template-columns: repeat(2, 1fr); }
.pcg-usage { flex-wrap: wrap; gap: 6px; }
.cust-stats b.is-good { color: var(--ord-tint-green-fg); }
.cust-stats b.is-info { color: var(--ord-tint-blue-fg); }
.cust-stats b.is-bad  { color: var(--ord-tint-red-fg); }
.cust-stats .is-zero b.is-good,
.cust-stats .is-zero b.is-info,
.cust-stats .is-zero b.is-bad { color: var(--ord-line-2); }
.lp-lock { align-self: center; flex-shrink: 0; }
@media (max-width: 768px) {
  .lp-toolbar { justify-content: flex-end !important; gap: 8px; }
  .lp-toolbar > select { order: 0; }
  .pcg-toolbar #pcg-count { font-size: 13px; }
}
.adc-name { font-size: 16px; word-break: keep-all; overflow-wrap: anywhere; }
.adc-sub { margin-top: 4px; }
.cust-no { flex: 1; font-size: 12px; color: var(--ord-text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#cust-total-label strong { color: var(--ord-text); font-weight: 800; }
@media (max-width: 768px) {
  .cust-toolbar { justify-content: space-between; }
  .cust-toolbar #cust-total-label { order: -1; font-size: 13px !important; color: var(--ord-text-2) !important; }
  .cust-toolbar #cust-per { padding: 6px 10px !important; border-radius: 8px !important; font-size: 13px !important; background: var(--ord-panel); color: var(--ord-text); }
}

/* 상품 */
.olc-prod { margin-top: 8px; }
.olc-prod-name { font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--ord-text); word-break: keep-all; overflow-wrap: anywhere; }
.olc-prod-sub  { margin-top: 1px; font-size: 12.5px; color: var(--ord-text-3); }

/* 날짜 타임라인 — 점 사이 선은 첫 칸 가운데 ~ 끝 칸 가운데 */
.olc-tl {
  --olc-n: 4;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--olc-n), 1fr);
  margin: 12px 0 4px;
}
.olc-tl::before {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(50% / var(--olc-n));
  right: calc(50% / var(--olc-n));
  height: 2px;
  background: var(--ord-line);
}
.olc-step { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.olc-step i {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ord-panel); border: 2px solid var(--ord-line-2); box-sizing: border-box;
}
.olc-step.is-done i { background: var(--olc-acc); border-color: var(--olc-acc); }
.olc-step.is-cur i  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--olc-acc) 22%, transparent); }
.olc-step b    { margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--ord-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.olc-step span { font-size: 11px; color: var(--ord-text-4); }
.olc-step:not(.is-done) b { color: var(--ord-text-3); }
/* 날짜 필드가 6개 이상이면 글자를 줄여 한 줄에 맞춘다(실적날짜필드 설정 순서대로 전부 표시) */
.olc-tl.is-dense .olc-step b { font-size: 11px; }
.olc-tl.is-dense .olc-step span { font-size: 10px; }

/* 발 — ①사은품 줄(있을 때만, 우측 정렬) ②담당자·상위점 | [⌄] */
.olc-foot {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--ord-line);
}
.olc-foot-gift { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-bottom: 4px; }
.olc-foot-row  { display: flex; align-items: center; gap: 8px; }
.olc-foot-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.olc-chip-person[hidden] { display: none; }
.olc-chip-person, .olc-chip-org {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--ord-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.olc-chip-person::before, .olc-chip-org::before {
  content: ""; flex-shrink: 0; width: 14px; height: 14px;
  background: var(--ord-accent);
  -webkit-mask: var(--olc-ico) center / contain no-repeat;
          mask: var(--olc-ico) center / contain no-repeat;
}
.olc-chip-person::before { --olc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3.5 21c0-4.4 3.8-7.5 8.5-7.5s8.5 3.1 8.5 7.5z'/%3E%3C/svg%3E"); }
.olc-chip-org::before    { --olc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V4.5A1.5 1.5 0 0 1 5.5 3h9A1.5 1.5 0 0 1 16 4.5V9h2.5A1.5 1.5 0 0 1 20 10.5V21zM7 6.5v2h2v-2zm4 0v2h2v-2zM7 10.5v2h2v-2zm4 0v2h2v-2zM7 14.5v2h2v-2zm4 0v2h2v-2z'/%3E%3C/svg%3E"); }
.olc-amount { font-size: 14px; font-weight: 800; color: var(--ord-text); font-variant-numeric: tabular-nums; }
.olc-gift-st {
  padding: 2px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700;
  background: var(--g-bg, var(--ord-band)); color: var(--g-fg, var(--ord-text-2));
}
.olc-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 30px; height: 30px; margin-right: -6px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ord-text-4); cursor: pointer;
}
.olc-toggle svg { width: 18px; height: 18px; transition: transform .15s; }
.olc.is-open .olc-toggle svg { transform: rotate(180deg); }
.olc-toggle:active { background: var(--ord-band); }

/* 펼침 상세 — 2열 격자 */
.olc-more {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
  margin-top: 8px; padding: 12px 14px;
  background: var(--ord-surface-2); color: var(--ord-text);
  border-radius: 8px;
}
.olc-more[hidden] { display: none; }
.olc-kv { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.olc-kv.is-wide { grid-column: 1 / -1; }
.olc-kv em   { font-style: normal; font-size: 11.5px; color: var(--ord-text-4); }
.olc-kv > span { font-size: 13.5px; color: var(--ord-text); word-break: keep-all; overflow-wrap: anywhere; }
.olc-kv small { color: var(--ord-text-4); font-size: 11px; }
.olc-empty { color: var(--ord-line-2); }