input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent url("/assets/icons/checkbox-unchecked.svg") center / 24px 24px no-repeat;
  cursor: pointer;
  vertical-align: middle;
  flex: 0;
}

input[type="checkbox"]:checked {
  background-image: url("/assets/icons/checkbox-checked.svg");
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cellaheal-800);
  outline-offset: 2px;
}

.candidate-toggle-cell { cursor: pointer; }

.candidate-toggle-cell:hover { background: rgba(0, 0, 0, 0.04); }

#freelancer-income-body tr[data-income-id] td:not(:last-child) { cursor: pointer; }

#freelancer-income-body tr[data-income-id] td:not(:last-child):hover { background: rgba(0, 0, 0, 0.04); }

.freelancer-income-toolbar { align-items: end; }

.freelancer-income-actions { display: flex; gap: 8px; align-items: center; }

.cost-row-header,
.cost-row { display: grid; grid-template-columns: 24px repeat(3, minmax(0, 1fr)) 62px; gap: 8px; align-items: end; }

.cost-row-header { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }

.cost-row .field label { display: none; }

.cost-row-drag-handle { display: flex; align-items: center; justify-content: center; min-height: var(--control-height-default); color: var(--muted); cursor: grab; user-select: none; }

.cost-row .remove-cost-row { --control-height: var(--control-height-default); width: 62px; padding-inline: var(--control-padding-compact); }

.b2b-product-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.b2b-product-option { display: flex; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; }
.b2b-product-option em { margin-left: 4px; color: var(--muted); font-style: normal; }
.b2b-price-card h3 { margin: 0; font-size: 14px; }
.b2b-price-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 62px; gap: 8px; align-items: end; }
.b2b-price-row .button-quiet { --control-height: var(--control-height-default); }
.b2b-statement-line { display: grid; grid-template-columns: minmax(180px, 1fr) 100px minmax(130px, 1fr) 90px; gap: 10px; align-items: end; }
.b2b-statement-line p { margin: 5px 0 0; }
.b2b-statement-line > strong:last-child { padding-bottom: 12px; text-align: right; }
.b2b-statement-total { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.b2b-statement-total div { display: grid; gap: 4px; }
.b2b-statement-total span { color: var(--muted); font-size: 12px; }
.b2b-statement-total strong { font-size: 17px; }
.b2b-client-actions { display: flex; gap: 6px; justify-content: end; }
.b2b-client-actions a.button-quiet { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height-compact); padding: 0 var(--control-padding-compact); border-radius: var(--radius-sm); color: var(--text); font: inherit; text-decoration: none; cursor: pointer; }
@media (max-width: 720px) { .b2b-product-options { grid-template-columns: 1fr; } .b2b-price-row, .b2b-statement-line, .b2b-statement-total { grid-template-columns: 1fr; } .b2b-statement-line > strong:last-child { padding-bottom: 0; text-align: left; } }

.component-row-header,
.component-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 62px; gap: 8px; align-items: end; }

.component-row-header { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }

.component-row .field label { display: none; }

.component-row .remove-component-row { --control-height: var(--control-height-default); width: 62px; padding-inline: var(--control-padding-compact); }

.drawer > .split:first-child,
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
/* 드로어 머리 오른쪽의 버튼 묶음(수정사항 저장 · 닫기). 저장은 폼 밖에 있고 form 속성으로 아래 폼을
   가리킨다 — 긴 폼에서 저장 버튼을 찾으러 끝까지 스크롤하지 않게 머리에 고정한다. */
.drawer-header-actions { display: flex; align-items: flex-start; gap: 8px; flex-shrink: 0; }

.drawer-header-actions { display: flex; gap: 8px; align-items: start; flex: 0 0 auto; }

.drawer-save-bar { position: sticky; bottom: -24px; z-index: 5; margin: 24px -24px -24px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--cellaheal-white); }

.drawer-save-bar .button { width: 100%; }

.panel { width: min(500px, 100%); border-radius: 12px; padding: 100px; border: 1px solid var(--line); background: var(--cellaheal-050); }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.login-brand { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 18px; }

.login-brand-logo { display: block; width: 100px; max-width: 100%; height: auto; margin-bottom: 24px; }

.login-brand .clh { font-size: 32px; font-weight: 700; }

.login-brand .crp { font-size: 28px; font-weight: 500; color: var(--cellaheal-600); }

.login-form { display: flex; flex-direction: column; gap: 8px; }

.login-btn { margin-top: 8px; }


.drawer-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: rgba(0, 0, 0, 0.16); }

.drawer { position: fixed; top: 0; right: 0; z-index: var(--z-drawer); width: min(640px, 100vw); height: 100dvh; padding: var(--space-6); overflow: auto; border-left: 1px solid var(--line); background: var(--cellaheal-white); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.1); }

.bank-combobox { position: relative; }

.bank-combobox-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-tooltip);
  max-height: 248px;
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--cellaheal-white);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}

.bank-combobox-option {
  display: flex;
  width: 100%;
  min-height: var(--control-height-default);
  align-items: center;
  justify-content: flex-start;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  text-align: left;
}

.bank-combobox-option:hover { background: var(--surface-muted); color: var(--text); }

.bank-combobox-empty { padding: 12px 10px; color: var(--muted); font-size: 13px; }

.favorite-star {
  --control-height: var(--control-height-compact);
  width: var(--control-height-compact);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  position: relative;
}

.favorite-star::before {
  content: "";
  position: absolute;
  inset: 7px;
  background: var(--cellaheal-200);
  mask: url("/assets/icons/star.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/star.svg") center / contain no-repeat;
  transition: background-color .3s, transform .3s;
}

.favorite-star:hover { background: var(--surface-muted); }

.favorite-star:hover::before { transform: scale(1.08); }

.favorite-star.is-active::before { background: var(--cellaheal-800); }

.favorite-account-option { gap: 12px; }

#inquiry-order-results {border-radius: 8px; border: 1px solid var(--line);}
.inquiry-order-option {border-bottom: 1px solid var(--line); background: var(--cellaheal-white); border-radius: 8px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; padding: 16px;}
.inquiry-order-option:hover {background: var(--cellaheal-050)}


.memo-hover {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.memo-hover-icon {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--cellaheal-200);
  mask: url("/assets/icons/memo.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/memo.svg") center / contain no-repeat;
}

.memo-hover.has-content .memo-hover-icon {
  background: var(--cellaheal-800);
}

.contribution-table th:not(:first-child),
.contribution-table td:not(:first-child) {
  text-align: right;
}

.finance-expense {
  color: var(--cellaheal-spotless-dark);
}

.memo-hover-bubble {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  --tooltip-width: 280px;
  transform: translateY(-50%);
}

.memo-hover:hover .memo-hover-bubble,
.memo-hover:focus-visible .memo-hover-bubble {
  display: block;
}

.text-hover {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.text-hover-label {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.text-hover.is-truncated {
  cursor: pointer;
}

.text-hover-bubble {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  --tooltip-width: 320px;
}

.text-hover:hover .text-hover-bubble,
.text-hover:focus-visible .text-hover-bubble {
  display: block;
}

.pill.inquiry-status-progress {
  color: var(--cellaheal-poreless-dark);
  background-color: var(--cellaheal-poreless-light);
  border: 1px solid var(--cellaheal-poreless-dark);
}

.pill.inquiry-status-waiting {
  color: var(--cellaheal-spotless-dark);
  background-color: var(--cellaheal-spotless-light);
  border: 1px solid var(--cellaheal-spotless-dark);
}

.pill.inquiry-status-completed {
  color: var(--cellaheal-stressless-dark);
  background-color: var(--cellaheal-stressless-light);
  border: 1px solid var(--cellaheal-stressless-dark);
}

.cs-variable-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}

.cs-variable-card { gap: 16px; }

.cs-variable-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.cs-variable-title { margin: 4px 0 0; font-size: 20px; }

.cs-variable-list { display: grid; gap: 8px; }

.cs-variable-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
}

.tree-branch { color: var(--cellaheal-300); }

.cs-variable-edit-form { align-items: center; gap: 8px; flex-wrap: wrap; }

.cs-variable-edit-form input[type="text"] { max-width: 360px; }

.cs-variable-item .cs-variable-edit-form {
  grid-column: 2 / 4;
}

.cs-variable-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.cs-variable-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cs-variable-result-form {
  grid-column: 2 / 4;
  display: grid;
  gap: 8px;
  padding: 10px 0 4px;
}

.cs-variable-result-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.cs-variable-result-options .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.cs-result-option-list {
  display: grid;
  gap: 8px;
}

.cs-result-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.delete-variable-button {
  color: var(--cellaheal-spotless-dark);
  border-color: rgba(153, 27, 27, 0.24);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cellaheal-white);
  color: var(--text);
}

.icon-button:hover { background: var(--surface-muted); }

.pen-icon {
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url("/assets/icons/pen.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/pen.svg") center / contain no-repeat;
}
.inquiry-order-option:last-of-type {border-bottom: none; border-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
.inquiry-order-option .split {margin-bottom: 16px;}

.repurchase-customer-cell { display: flex; flex-direction: column; gap: 2px; }
.repurchase-customer-name { font-weight: 600; line-height: 1.4; }
.repurchase-customer-id { color: var(--muted); font-size: 13px; line-height: 1.4; }
.repurchase-product-cell { display: flex; flex-direction: column; gap: 2px; }
.repurchase-product-value { font-weight: 600; line-height: 1.4; }
.repurchase-ajax-detail td:nth-child(4) { max-width: 280px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.repurchase-detail-button { white-space: nowrap; }
.repurchase-detail-table { table-layout: fixed; width: 100%; }
.repurchase-detail-table th:nth-child(1), .repurchase-detail-table td:nth-child(1) { width: 16%; }
.repurchase-detail-table th:nth-child(2), .repurchase-detail-table td:nth-child(2) { width: 13%; }
.repurchase-detail-table th:nth-child(3), .repurchase-detail-table td:nth-child(3) { width: 12%; }
.repurchase-detail-table th:nth-child(4), .repurchase-detail-table td:nth-child(4) { width: 27%; }
.repurchase-detail-table th:nth-child(5), .repurchase-detail-table td:nth-child(5) { width: 12%; }
.repurchase-detail-table th:nth-child(6), .repurchase-detail-table td:nth-child(6) { width: 12%; }
.repurchase-detail-table th:nth-child(7), .repurchase-detail-table td:nth-child(7) { width: 8%; }
.repurchase-detail-product-cell { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.repurchase-option-value { color: var(--muted); font-size: 13px; line-height: 1.4; }

.cancellation-chart-card { overflow: hidden; }
.cancellation-chart-frame { position: relative; width: 100%; height: clamp(260px, 40vh, 800px); margin-top: 18px; }
.cancellation-chart { display: block; width: 100%; height: 100%; }
.cancellation-chart-grid { stroke: var(--line); stroke-width: 1; }
.cancellation-chart-axis { stroke: var(--line-strong); stroke-width: 1; }
.cancellation-chart-label { fill: var(--muted); font-size: 10px; font-weight: 600; }
.cancellation-chart-axis-title { fill: var(--muted); font-size: 10px; font-weight: 600; }
.cancellation-chart-total-bar { fill: var(--cellaheal-100); stroke: var(--cellaheal-400); stroke-width: 1; }
.cancellation-chart-line { fill: none; stroke: var(--cellaheal-800); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cancellation-chart-point { fill: var(--cellaheal-white); stroke: var(--cellaheal-800); stroke-width: 1.6; }
.cancellation-chart-trend-line { stroke: var(--cellaheal-400); stroke-width: 1.6; stroke-linecap: round; }
.cancellation-chart-hover { fill: transparent; cursor: crosshair; }
.cancellation-chart-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  top: 12px;
  left: 50%;
  display: grid;
  min-width: 176px;
  gap: 4px;
  padding: var(--tooltip-padding-block) var(--tooltip-padding-inline);
  border: 1px solid var(--line-strong);
  border-radius: var(--tooltip-radius);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  pointer-events: none;
  transform: translateX(-50%);
}
.cancellation-chart-tooltip[data-tooltip-position="start"] { left: 12px; transform: translateY(12px); }
.cancellation-chart-tooltip[data-tooltip-position="left"] { left: 30%; transform: translate(-50%, 12px); }
.cancellation-chart-tooltip[data-tooltip-position="center"] { left: 50%; transform: translate(-50%, 12px); }
.cancellation-chart-tooltip[data-tooltip-position="right"] { left: 70%; transform: translate(-50%, 12px); }
.cancellation-chart-tooltip[data-tooltip-position="end"] { right: 12px; left: auto; transform: translateY(12px); }
.cancellation-chart-tooltip strong { margin-bottom: 2px; }
.cancellation-chart-tooltip span { white-space: nowrap; }
.cafe24-settings-header { align-items: center; margin-bottom: 16px; }
.cafe24-settings-title { margin: 0 0 6px; }
.cafe24-settings-description { margin: 0; }
.cafe24-settings-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.cafe24-sync-log-card { margin-top: 24px; }
.cafe24-sync-log-message { max-width: 360px; overflow-wrap: anywhere; }
.account-permission-option { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.account-permission-option input[type="checkbox"] { flex: 0 0 24px; width: 24px; }
.account-list-header { align-items: center; margin-bottom: 14px; }
.account-list-title { margin: 0; }
.account-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.is-hidden { display: none; }
.account-drawer-title { margin: 0 0 6px; }
.account-drawer-subtitle { margin: 0; }
.master-products-latest-date { font-size: 24px; }
.master-products-header { align-items: center; margin-bottom: 14px; }
.master-products-title { margin: 0; }
.master-product-drawer-title { margin: 0 0 6px; }
.master-product-drawer-subtitle { margin: 0; }
.master-product-cost-header { align-items: center; margin-bottom: 12px; }
.account-permissions { margin-top: 10px; }
.account-password-admin { margin-top: 18px; }
.channel-fees-latest-date { font-size: 24px; }
.channel-fees-header { align-items: center; margin-bottom: 40px; }
.channel-fees-title { margin: 0; }
.channel-fees-drawer-header { align-items: center; margin-bottom: 16px; }
.channel-fees-drawer-title { margin: 0 0 6px; }
.channel-fees-drawer-subtitle { margin: 0; }
.channel-fees-section-header { align-items: center; margin-bottom: 12px; }
.channel-fees-drag-handle { display: flex; align-items: center; justify-content: center; padding-top: 24px; color: var(--muted); cursor: grab; user-select: none; }
.width-auto { width: auto; }
.variables-drawer-title { margin: 0 0 6px; }
.variables-drawer-subtitle { margin: 0; }
.variables-section { margin: 16px 0; }
.variables-list-title { margin: 0 0 10px; }
.logistics-filter-header { align-items: center; }
.logistics-filter-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.logistics-notice { margin-bottom: 16px; }
.logistics-description { margin: 6px 0 0; }
.logistics-drawer-title { margin: 0 0 6px; }
.logistics-drawer-subtitle { margin: 0; }
.logistics-form { margin-top: 18px; }
.tier-batch-result-description { margin: 6px 0 0; }
.tier-batch-history-cell { background: var(--cellaheal-white); padding: 0; }
.tier-batch-summary { margin-bottom: 18px; }
.tier-batch-target { font-size: 24px; }
.tier-batch-help { margin: 6px 0 0; }
.tier-batch-section { margin-top: 18px; }
.tier-batch-section-header { align-items: center; margin-bottom: 12px; }
.tier-batch-section-title { margin: 0; }
.tier-batch-ellipsis { padding: 0 4px; }
.tier-batch-detail { padding: 14px 16px; }
.tier-batch-detail-header { align-items: center; margin-bottom: 12px; }
.tier-batch-detail-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.tier-batch-detail-loading { padding: 14px 16px; }
.ads-flash-description { margin: 6px 0 0; }
.ads-account-header { align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ads-account-title { margin: 0 0 6px; }
.ads-account-date { margin: 0 0 10px; }
.ads-account-count { margin: 0; }
.ads-action-header { align-items: flex-end; gap: 12px; }
.ads-action-title { margin: 0 0 6px; }
.logistics-context-notice { margin-bottom: 8px; }
.logistics-context-detail { margin: 6px 0 0; }
.logistics-order-summary { margin-bottom: 8px; }
.logistics-card-header { align-items: center; margin-bottom: 12px; }
.logistics-item { margin-top: 6px; }
.logistics-inquiry-header { align-items: flex-start; gap: 12px; }
.flash-description { margin: 6px 0 0; }
.sales-channel-header { align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.sales-channel-title { margin: 0 0 6px; }
.sales-upload-button, .sales-sync-button { margin-top: 8px; }
.sales-upload-description { margin: 10px 0 0; }
.sales-date-sync-form { display: grid; gap: 8px; margin-top: 14px; }
.sales-date-sync-form label { color: var(--muted); font-size: 12px; font-weight: 600; }
.sales-date-sync-controls { display: flex; align-items: center; gap: 8px; }
.sales-date-sync-controls input { min-width: 0; }
.sales-connect-container { margin-top: 8px; }
.sales-upload-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sales-upload-detail-cell { background: var(--cellaheal-white); padding: 0; }
.payment-action-group { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-status-form { margin-top: 18px; }
.payment-favorite-column { width: 72px; }
.payment-filter-header { align-items: center; }
.payment-filter-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-drawer-title { margin: 0 0 6px; }
.payment-drawer-subtitle { margin: 0; }
.payment-detail-row { gap: 16px; align-items: flex-start; }
.payment-favorite-detail { margin-left: auto; }
.mapping-list-header { align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mapping-list-title { margin: 0 0 6px; }
.mapping-list-description, .mapping-empty-message { margin: 0; }
.mapping-search-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.mapping-search-field { margin: 0; min-width: 320px; }
.mapping-reset-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 12px 14px; }
.mapping-select-column { width: 52px; }
.mapping-component-pills, .mapping-filter-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.mapping-empty-message { margin-top: 16px; }
.mapping-progress-track { display: block; width: 100%; height: 18px; appearance: none; border: 0; border-radius: 999px; overflow: hidden; margin: 12px 0 10px; background: rgba(0,0,0,0.06); }
.mapping-progress-track::-webkit-progress-bar { background: rgba(0,0,0,0.06); border-radius: 999px; }
.mapping-progress-track::-webkit-progress-value { background: var(--cellaheal-800); border-radius: 999px; }
.mapping-progress-track::-moz-progress-bar { background: var(--cellaheal-800); border-radius: 999px; }
.mapping-candidate-title { font-weight: 700; }
.mapping-candidate-summary { margin-top: 6px; }
.mapping-filter-header { align-items: center; }
.mapping-filter-nav { gap: 8px; }
.mapping-drawer-title { margin: 0 0 6px; }
.mapping-drawer-subtitle { margin: 0; }
.mapping-form-section-header { align-items: center; margin-bottom: 12px; }
.dashboard-request-list, .dashboard-section-card { margin-top: 18px; }
.dashboard-heading { margin: 0; }
.dashboard-heading-spaced { margin-bottom: 6px; }
.dashboard-subheading { margin: 6px 0 0; }
.dashboard-no-margin { margin: 0; }
.dashboard-table-scroll { overflow: auto; margin-top: 14px; }
.table-header-with-info { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.table-header-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; cursor: help; }
.table-header-info img { width: 13px; height: 13px; }
.creative-currency-control { display: flex; align-items: center; gap: 8px; }
.creative-currency-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-muted); }
.creative-currency-option { display: inline-flex; min-width: 48px; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; }
.creative-currency-option.active { background: var(--cellaheal-800); color: var(--cellaheal-white); }
.creative-filter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.creative-custom-range { margin-top: 18px; }
.creative-table-card { min-width: 0; }
.creative-table-header { align-items: flex-start; gap: 12px; }
.creative-table-header h2 { margin: 0 0 6px; }
.creative-table-header p { margin: 0; }
.creative-table-scroll { max-height: min(72vh, 900px); overflow: auto; margin-top: 14px; }
.creative-table { table-layout: auto; }
.creative-table-basic { min-width: 1500px; }
.creative-table-detail { min-width: 1850px; }
.creative-table th { position: sticky; top: 0; z-index: 1; white-space: nowrap; background: var(--cellaheal-white); }
.creative-table td { white-space: nowrap; vertical-align: middle; }
.creative-table thead th:first-child { left: 0; z-index: 5; background: var(--cellaheal-white); box-shadow: 8px 0 12px -12px rgba(20, 23, 26, 0.45); }
.creative-table .creative-image-cell { position: sticky; left: 0; z-index: 3; background: var(--cellaheal-white); box-shadow: 8px 0 12px -12px rgba(20, 23, 26, 0.45); }
.creative-table td[data-sort-type="number"] { min-width: 78px; text-align: right; }
.creative-table td[data-sort-key-cell="spend"], .creative-table td[data-sort-key-cell="conversionValue"], .creative-table td[data-sort-key-cell="cpm"], .creative-table td[data-sort-key-cell="cpc"], .creative-table td[data-sort-key-cell="cpa"], .creative-table td[data-sort-key-cell="aov"] { min-width: 108px; }
.creative-table td[data-sort-key-cell="roas"] { min-width: 68px; }
.creative-table td[data-sort-key-cell="ctr"], .creative-table td[data-sort-key-cell="lvr"], .creative-table td[data-sort-key-cell="cvr"] { min-width: 72px; }
.creative-performance-signal { transition: background 160ms ease; }
.creative-performance-neutral { background: var(--surface-muted); }
.creative-performance-green.creative-performance-intensity-1 { background: rgba(34, 197, 94, 0.04); }
.creative-performance-green.creative-performance-intensity-2 { background: rgba(34, 197, 94, 0.055); }
.creative-performance-green.creative-performance-intensity-3 { background: rgba(34, 197, 94, 0.07); }
.creative-performance-green.creative-performance-intensity-4 { background: rgba(34, 197, 94, 0.09); }
.creative-performance-green.creative-performance-intensity-5 { background: rgba(34, 197, 94, 0.12); }
.creative-performance-red.creative-performance-intensity-1 { background: rgba(239, 68, 68, 0.04); }
.creative-performance-red.creative-performance-intensity-2 { background: rgba(239, 68, 68, 0.055); }
.creative-performance-red.creative-performance-intensity-3 { background: rgba(239, 68, 68, 0.07); }
.creative-performance-red.creative-performance-intensity-4 { background: rgba(239, 68, 68, 0.09); }
.creative-performance-red.creative-performance-intensity-5 { background: rgba(239, 68, 68, 0.12); }
.creative-date-cell { width: 88px; min-width: 88px; max-width: 88px; text-align: center; }
.creative-image-cell { width: 112px; min-width: 112px; text-align: center; }
.creative-image-trigger { display: inline-flex; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.creative-image-trigger:focus-visible { outline: 2px solid var(--cellaheal-800); outline-offset: 3px; border-radius: 8px; }
.creative-thumbnail { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: 8px; background: var(--surface-muted); }
.creative-thumbnail-empty { display: inline-flex; width: 88px; height: 88px; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-muted); color: var(--muted); font-size: 12px; white-space: normal; }
.creative-text-cell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.creative-table .creative-hierarchy-cell { min-width: 360px; white-space: normal; }
.creative-hierarchy-cell span, .creative-hierarchy-cell strong { display: block; line-height: 1.45; }
.creative-hierarchy-cell span:first-child { color: var(--muted); }
.creative-hierarchy-cell span:nth-child(2) { color: var(--cellaheal-600); }
.creative-summary-row { background: var(--surface-muted); }
.creative-summary-row td { font-weight: 600; border-bottom-color: var(--line-strong); }
.creative-daily-row td { color: var(--muted); }
.creative-daily-marker, .creative-daily-indent { color: var(--muted); font-size: 12px; }
.creative-table .creative-media-cell { width: 56px; min-width: 56px; max-width: 56px; text-align: center; }
.creative-media-type { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--cellaheal-800); }
.creative-media-type img { display: block; width: 20px; height: 20px; }
.creative-table .creative-copy-cell { width: 56px; min-width: 56px; max-width: 56px; white-space: nowrap; text-align: center; }
.creative-copy-hover { position: relative; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 6px; cursor: help; }
.creative-copy-hover:focus-visible { outline: 2px solid var(--cellaheal-800); outline-offset: 2px; }
.creative-copy-icon { display: block; width: 20px; height: 20px; color: var(--cellaheal-800); }
.creative-copy-tooltip { --tooltip-width: 360px; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
.creative-copy-hover:hover .creative-copy-tooltip, .creative-copy-hover:focus-visible .creative-copy-tooltip { display: block; }
.creative-image-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 28px; }
.creative-image-modal.is-hidden { display: none; }
.creative-image-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.creative-image-modal-content { position: relative; z-index: 1; display: flex; width: min(1100px, 92vw); max-height: 92vh; flex-direction: column; padding: 18px; border-radius: 12px; background: var(--cellaheal-white); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3); }
.creative-image-modal-header { align-items: center; margin-bottom: 14px; }
.creative-image-modal-header h2 { margin: 0; }
.creative-image-modal-image { display: block; width: 100%; max-height: calc(92vh - 100px); object-fit: contain; border-radius: 8px; background: var(--surface-muted); }
@media (max-width: 1200px) { .creative-filter-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .creative-filter-row { grid-template-columns: 1fr; } }
.dashboard-amount-cell { text-align: right; }
.dashboard-empty-cell { text-align: center; }
.refund-order-column { min-width: 120px; }
.refund-customer-column { min-width: 100px; }
.refund-category-column, .refund-method-column { min-width: 120px; }
.refund-date-column { min-width: 160px; }
.refund-amount-column { min-width: 120px; text-align: right; }
.dashboard-custom-range { margin-top: 14px; }
.dashboard-field-end { align-self: flex-end; }
.dashboard-metric-stack { display: grid; gap: 4px; }
.dashboard-chart-header { align-items: flex-start; gap: 12px; }
.dashboard-pie-wrap { position: relative; }
.dashboard-category-tooltip { max-width: 220px; }
.dashboard-pie-label { fill: #6c6f73; font-size: 13px; font-weight: 600; }
.dashboard-pie-value { fill: #14171a; font-size: 34px; font-weight: 700; }
.dashboard-filter-header { align-items: center; margin-bottom: 12px; }
.dashboard-section-header { align-items: flex-end; margin-bottom: 14px; }
.dashboard-table-highlight { background: var(--cellaheal-white); }
.dashboard-table-scroll-no-margin { margin-top: 0; }
.dashboard-range-actions { align-items: flex-end; }
.dashboard-summary-grid { gap: 12px; }
.dashboard-summary-link { color: inherit; text-decoration: none; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.dashboard-summary-link:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.dashboard-summary-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.dashboard-summary-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.dashboard-summary-panel { min-width: 0; }
.dashboard-summary-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dashboard-summary-panel-head h2 { margin: 0; font-size: 16px; }
.dashboard-summary-panel-head p { margin: 4px 0 0; font-size: 13px; }
.dashboard-summary-list { display: grid; }
.dashboard-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.dashboard-summary-row:hover { background: var(--surface-muted); }
.dashboard-summary-row span { display: grid; gap: 3px; min-width: 0; }
.dashboard-summary-row small, .dashboard-summary-retention-grid small { color: var(--muted); font-size: 12px; }
.dashboard-summary-row-value { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.dashboard-summary-retention-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dashboard-summary-retention-grid > div { display: grid; gap: 5px; }
.dashboard-summary-retention-grid strong { font-size: 18px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .dashboard-summary-detail-grid { grid-template-columns: 1fr; } .dashboard-summary-retention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dashboard-summary-grid-contribution { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dashboard-summary-grid-ads { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.dashboard-soft-accent { background: #f7efe4; border-color: #ead7b8; }
.dashboard-rate-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.dashboard-page-header { align-items: flex-start; gap: 12px; }
.leave-action-group, .leave-year-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.leave-section-spacing { margin-bottom: 18px; }
.leave-section-header { align-items: flex-start; margin-bottom: 16px; }
.leave-form-header { align-items: flex-start; gap: 16px; }
.leave-heading { margin: 0 0 6px; }
.leave-description { margin: 0; }
.leave-year-heading { margin: 0 0 12px; }
.leave-edit-summary-card { margin-bottom: 16px; }
.leave-edit-summary { gap: 10px; }
.leave-update-form { margin-bottom: 16px; }
.leave-detail-value { margin-top: 4px; }
.cs-analysis-inquiry-card { margin-bottom: 10px; }
.cs-analysis-inquiry-layout { align-items: flex-start; gap: 14px; }
.cs-analysis-inquiry-main { flex: 1; min-width: 0; }
.cs-analysis-inquiry-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cs-analysis-inquiry-detail { margin: 0 0 8px; }
.cs-analysis-detail-card { margin-top: 18px; }
.cs-analysis-detail-header { gap: 12px; }
.cs-analysis-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.cs-analysis-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.cs-analysis-category-layout { display: grid; grid-template-columns: minmax(320px, 340px) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 18px; }
.cs-analysis-legend-swatch { width: 12px; height: 12px; border-radius: 999px; display: inline-block; flex: 0 0 auto; }
.cs-analysis-legend-orders { background: #d9dee8; }
.cs-analysis-legend-cs { background: #d36b2c; }
.cs-analysis-pie-track { fill: none; stroke: #ece7de; stroke-width: 40; }
.cs-analysis-pie-segment { fill: none; stroke-width: 40; transform: rotate(-90deg); transform-origin: 170px 170px; stroke-linecap: butt; cursor: pointer; }
.cs-analysis-pie-segment-0, .cs-analysis-pie-color-0 { stroke: #d36b2c; background: #d36b2c; }
.cs-analysis-pie-segment-1, .cs-analysis-pie-color-1 { stroke: #2e6f95; background: #2e6f95; }
.cs-analysis-pie-segment-2, .cs-analysis-pie-color-2 { stroke: #7f9c3d; background: #7f9c3d; }
.cs-analysis-pie-segment-3, .cs-analysis-pie-color-3 { stroke: #8d5a97; background: #8d5a97; }
.cs-analysis-pie-segment-4, .cs-analysis-pie-color-4 { stroke: #d0a437; background: #d0a437; }
.cs-analysis-pie-segment-5, .cs-analysis-pie-color-5 { stroke: #4d7f6f; background: #4d7f6f; }
.cs-analysis-category-legend { display: grid; gap: 8px; align-content: start; }
.cs-analysis-category-legend-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 12px; border: 1px solid var(--cellaheal-200); border-radius: 14px; background: var(--cellaheal-white); text-align: left; cursor: pointer; color: var(--cellaheal-800); text-decoration: none; }
.cs-analysis-category-legend-item:hover { background-color: var(--cellaheal-100); }
.cs-analysis-category-legend-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cs-analysis-category-legend-label { font-size: 14px; font-weight: 600; color: var(--cellaheal-900); }
.cs-analysis-category-legend-meta { display: grid; gap: 2px; justify-items: end; flex: 0 0 auto; font-size: 13px; }
.inquiry-item-box { margin-top: 6px; }
.inquiry-list-header { align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.inquiry-search-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.inquiry-search-field { margin: 0; min-width: 320px; }
.inquiry-filter-field { margin: 0; min-width: 160px; width: auto; }
.inquiry-reset-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 12px 14px; }
.inquiry-filter-header { align-items: center; }
.inquiry-filter-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.inquiry-order-search-card { gap: 16px; margin-bottom: 16px; }
.inquiry-order-actions { display: flex; gap: 8px; align-items: flex-end; }
.inquiry-order-results { margin-top: 12px; }
.inquiry-three-pl-fault { margin-top: -4px; }
.inquiry-checkbox-label { display: flex; align-items: center; gap: 8px; }
.inquiry-order-summary-layout { align-items: flex-start; gap: 12px; }
.sales-orders-content { padding: 14px 16px; }
.daily-report-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 18px; align-items: start; }
.daily-report-history { gap: 8px; position: sticky; top: 20px; }
.daily-report-history h2 { margin: 0; }
.daily-report-history-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.daily-report-history-item:hover, .daily-report-history-item.active { color: var(--accent); }
.daily-report-history-item strong { font-size: 13px; }
.daily-report-history-item .pill { font-size: 10px; }
.daily-report-document { min-height: 420px; }
.daily-report-document h2 { margin: 0; }
.daily-report-document .eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.daily-report-content { margin-top: 18px; white-space: pre-wrap; line-height: 1.75; overflow-wrap: anywhere; }
.daily-report-quantitative { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.daily-report-quantitative h2, .daily-report-quantitative h3 { margin: 0 0 12px; }
.daily-report-quantitative h3 { margin-top: 20px; font-size: 15px; }
.daily-report-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.daily-report-metric-card { min-width: 0; }
.daily-report-metric-card span, .daily-report-metric-card small { display: block; color: var(--muted); font-size: 11px; }
.daily-report-metric-card strong { display: block; margin: 4px 0; font-size: 17px; }
.daily-report-account-card, .daily-report-ad-card { margin-top: 10px; }
.daily-report-ad-card > strong, .daily-report-ad-card > span { display: block; }
.daily-report-account-card .daily-report-metric-grid, .daily-report-ad-card .daily-report-metric-grid { margin-top: 10px; }
@media (max-width: 760px) { .daily-report-layout { grid-template-columns: 1fr; } .daily-report-history { position: static; } }
.ra-facts-workspace { display: grid; grid-template-columns: 224px minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ra-facts-product-nav { position: sticky; top: 20px; }
.ra-facts-nav-header, .ra-facts-panel-heading, .ra-facts-editor-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ra-facts-nav-header { margin-bottom: 14px; }
.ra-facts-nav-header h2 { margin: 0; font-size: 17px; }
.ra-facts-nav-header .eyebrow { margin: 0 0 4px; }
.ra-facts-new-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px dashed var(--accent); border-radius: 8px; background: var(--surface-muted); color: inherit; text-decoration: none; }
.ra-facts-new-item strong, .ra-facts-new-item small, .ra-facts-product-copy strong, .ra-facts-product-copy small { display: block; }
.ra-facts-new-item small, .ra-facts-product-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.ra-facts-new-item > span:last-child { font-size: 20px; color: var(--accent); }
.ra-facts-product-list { display: grid; gap: 3px; }
.ra-facts-product-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 9px; border-left: 3px solid transparent; color: inherit; text-decoration: none; }
.ra-facts-product-item:hover, .ra-facts-product-item.active { border-left-color: var(--accent); background: var(--surface-muted); color: var(--accent); }
.ra-facts-product-copy { min-width: 0; }
.ra-facts-product-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ra-facts-product-status { color: var(--muted); font-size: 20px; line-height: 1; }
.ra-facts-editor { min-width: 0; }
.ra-facts-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 4px 0 20px; }
.ra-facts-editor-header h2 { margin: 0 0 5px; font-size: 24px; }
.ra-facts-editor-header p { margin: 0; }
.ra-facts-editor-header .eyebrow { margin-bottom: 7px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.ra-facts-editor-meta { flex-wrap: wrap; justify-content: flex-end; }
.ra-facts-section { padding: 24px 0; border-top: 1px solid var(--border); }
.ra-facts-section-last { padding-bottom: 10px; }
.ra-facts-section-heading { display: flex; gap: 12px; margin-bottom: 18px; }
.ra-facts-section-heading h3 { margin: 0 0 4px; font-size: 16px; }
.ra-facts-section-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.ra-facts-step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-muted); color: var(--accent); font-size: 11px; font-weight: 700; }
.ra-facts-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ra-facts-form-grid-wide { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.ra-facts-form-grid > .field:first-child:last-child { grid-column: 1 / -1; }
.ra-facts-checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 12px; }
.checkbox-row { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-height-compact); color: var(--text); cursor: pointer; }
/* 전역 input 규칙이 width:100%; flex:1이라, 줄 안의 라디오·체크박스가 남는 자리를 전부 먹고 글자를
   오른쪽 끝까지 밀어냈다(2026-09-03, 그룹 패널에서 발견). 줄의 컨트롤은 자기 크기만 차지한다. */
.checkbox-row input { flex: 0 0 auto; width: 16px; height: 16px; padding: 0; accent-color: var(--accent); }
.ra-facts-test-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ra-facts-test-item { display: grid; gap: 8px; min-width: 0; }
.ra-facts-result-field textarea { min-height: 72px; background: var(--cellaheal-white); }
.ra-facts-application { display: grid; gap: 12px; margin-top: 14px; }
/* 위 display가 .is-hidden(581행)보다 뒤에 있어 같은 특이도에서 이긴다 — Application Test를 체크하지
   않아도 문답 상자가 계속 떠 있던 원인이다. display를 지정한 요소는 숨김 규칙을 따로 못박아야 한다. */
.ra-facts-application.is-hidden { display: none; }
.ra-facts-application .muted { margin: 4px 0 0; font-size: 12px; }
.ra-facts-qa-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ra-facts-savebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 4px; }
.ra-facts-context { position: sticky; top: 20px; min-width: 0; }
.ra-facts-context details { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); overflow: hidden; }
.ra-facts-context summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; cursor: pointer; list-style: none; }
.ra-facts-context summary::-webkit-details-marker { display: none; }
.ra-facts-context summary strong, .ra-facts-context summary small { display: block; }
.ra-facts-context summary small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.ra-facts-context pre { margin: 0; max-height: 680px; padding: 14px; border-top: 1px solid var(--border); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.55; }
@media (max-width: 1180px) { .ra-facts-workspace { grid-template-columns: 210px minmax(0, 1fr); } .ra-facts-context { grid-column: 2; position: static; } }
@media (max-width: 820px) { .ra-facts-workspace { grid-template-columns: 1fr; } .ra-facts-product-nav, .ra-facts-context { position: static; grid-column: auto; } .ra-facts-product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ra-facts-form-grid, .ra-facts-form-grid-wide, .ra-facts-test-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ra-facts-product-list, .ra-facts-checkbox-grid, .ra-facts-qa-row { grid-template-columns: 1fr; } .ra-facts-editor-header, .ra-facts-savebar { align-items: stretch; flex-direction: column; } .ra-facts-editor-meta { justify-content: flex-start; } .ra-facts-savebar .button { width: 100%; } }
.ra-facts-browse-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.ra-facts-product-nav { position: sticky; top: 20px; }
.ra-facts-nav-header, .ra-facts-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ra-facts-nav-header { margin-bottom: 8px; }
.ra-facts-nav-header h2 { margin: 0; font-size: 17px; }
.ra-facts-nav-header .eyebrow { margin: 0 0 4px; }
.ra-facts-product-list { display: grid; gap: 3px; }
.ra-facts-product-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 9px; border-left: 3px solid transparent; color: inherit; text-decoration: none; }
.ra-facts-product-item:hover, .ra-facts-product-item.active { border-left-color: var(--accent); background: var(--surface-muted); color: var(--accent); }
.ra-facts-product-copy, .ra-facts-product-copy strong, .ra-facts-product-copy small { display: block; min-width: 0; }
.ra-facts-product-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ra-facts-product-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.ra-facts-product-status { color: var(--muted); font-size: 20px; line-height: 1; }
.ra-facts-preview { min-width: 0; }
.ra-facts-preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.ra-facts-preview-header h2 { margin: 0 0 5px; font-size: 24px; }
.ra-facts-preview-header p { margin: 0; }
.ra-facts-preview-header .eyebrow, .ra-facts-drawer-header .eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.ra-facts-preview-section { padding: 22px 0; border-bottom: 1px solid var(--border); }
.ra-facts-preview-section h3, .ra-facts-preview-grid h3 { margin: 0; font-size: 14px; }
.ra-facts-chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ra-facts-ingredient-list, .ra-facts-clinical-list, .ra-facts-preview-grid ul { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.ra-facts-ingredient-list li, .ra-facts-clinical-list li { padding: 10px 12px; border-radius: 6px; background: var(--surface-muted); font-size: 13px; line-height: 1.45; }
.ra-facts-clinical-list li { display: flex; justify-content: space-between; gap: 16px; }
.ra-facts-clinical-list li span { color: var(--muted); text-align: right; }
.ra-facts-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 22px 0; }
.ra-facts-preview-grid li { line-height: 1.5; }
.ra-facts-preview-text { margin: 13px 0 0; color: var(--muted); white-space: pre-wrap; line-height: 1.55; }
.ra-facts-json { border-top: 1px solid var(--border); padding-top: 16px; }
.ra-facts-json summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.ra-facts-json pre { max-height: 440px; margin: 12px 0 0; padding: 14px; overflow: auto; background: var(--surface-muted); font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ra-facts-drawer { width: min(720px, 100vw); }
.ra-facts-drawer-header { align-items: flex-start; margin-bottom: 18px; }
.ra-facts-drawer-header h2 { margin: 0 0 5px; }
.ra-facts-drawer-header p { margin: 0; }
.ra-facts-drawer-section { padding: 20px 0; border-top: 1px solid var(--border); }
.ra-facts-drawer-section h3 { margin: 0 0 14px; font-size: 15px; }
.ra-facts-drawer-section > .muted { margin: -6px 0 12px; font-size: 12px; }
.ra-facts-drawer .ra-facts-form-grid { grid-template-columns: 1fr; }
.ra-facts-drawer .ra-facts-test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ra-facts-drawer .ra-facts-application { margin-top: 14px; }
.ra-facts-answer-field { display: flex; align-items: flex-start; gap: 8px; }
.ra-facts-answer-field input { min-width: 0; flex: 1; }
.ra-facts-remove-qa { flex: 0 0 auto; padding: 10px 8px; color: var(--muted); }
@media (max-width: 820px) { .ra-facts-browse-layout { grid-template-columns: 1fr; } .ra-facts-product-nav { position: static; } .ra-facts-product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ra-facts-product-list, .ra-facts-preview-grid, .ra-facts-drawer .ra-facts-test-grid { grid-template-columns: 1fr; } .ra-facts-preview-header { flex-direction: column; } .ra-facts-preview-header .button { width: 100%; } .ra-facts-clinical-list li { flex-direction: column; gap: 4px; } .ra-facts-clinical-list li span { text-align: left; } }
.is-dragging { opacity: 0.55; }
.ra-report-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--layout-grid-gap); }
.ra-report-stat { min-width: 0; }
.ra-report-stat span, .ra-report-stat small { display: block; font-size: 12px; }
.ra-report-list-header { align-items: flex-start; margin-bottom: 16px; }
.ra-report-list-header h2 { margin: 0 0 5px; }
.ra-report-list-header p { margin: 0; }
.ra-report-row { padding: 16px 0; border-top: 1px solid var(--border); }
.ra-report-glance { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1.45fr) minmax(210px, .8fr); gap: 18px; align-items: start; }
.ra-report-media, .ra-report-main, .ra-report-result { min-width: 0; }
.ra-report-media .eyebrow, .ra-report-main .eyebrow, .ra-report-result .eyebrow { display: block; margin: 0 0 8px; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.ra-report-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ra-report-image-grid a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--surface-muted); }
.ra-report-image-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ra-report-image-grid span { position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; border-radius: 4px; background: rgba(0, 0, 0, .64); color: #fff; font-size: 10px; }
.ra-report-image-empty { display: grid; place-items: center; min-height: 110px; padding: 12px; border: 1px dashed var(--border); border-radius: 6px; color: var(--muted); font-size: 12px; text-align: center; }
.ra-report-main h3 { margin: 5px 0 0; font-size: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ra-report-result { padding: 14px; border-radius: 8px; background: var(--surface-muted); }
.ra-report-result .pill { display: inline-flex; margin-bottom: 4px; }
.ra-report-result .ra-report-summary { margin-top: 7px; }
.ra-report-row-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.ra-report-row-header h3 { max-width: 760px; margin: 5px 0 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ra-report-summary { margin: 9px 0 0; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ra-report-row-meta { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 11px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ra-report-row-meta a { color: var(--accent); }
.ra-report-detail { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border); }
.ra-report-detail summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.ra-report-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.ra-report-detail-grid strong { font-size: 12px; }
.ra-report-detail-grid p { margin: 6px 0 0; color: var(--muted); white-space: pre-wrap; line-height: 1.5; font-size: 12px; }
@media (max-width: 900px) { .ra-report-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ra-report-glance { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); } .ra-report-result { grid-column: 1 / -1; } .ra-report-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ra-report-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ra-report-glance { grid-template-columns: 1fr; } .ra-report-result { grid-column: auto; } }
.is-drop-target { border-top: 2px solid var(--accent); }
.ai-chat-card { max-width: 960px; }
.ai-chat-header { align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.ai-chat-actions { align-items: center; gap: 12px; }
.ai-chat-answer { white-space: pre-wrap; margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); line-height: 1.6; }
.ai-conversation-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ai-conversation-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.payment-evidence-upload { display: grid; gap: 10px; }
.payment-evidence-dropzone { display: flex; align-items: center; gap: 12px; }
.payment-evidence-upload.is-dragging .payment-evidence-dropzone { border-color: var(--accent); background: var(--accent-soft); }
.payment-evidence-dropzone > img { width: 28px; height: 28px; color: var(--accent); flex: 0 0 auto; }
.payment-evidence-dropzone > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; flex: 1; }
.payment-evidence-dropzone small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.payment-evidence-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.payment-evidence-status { margin: 0; font-size: 12px; }
.payment-evidence-file-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
/* 위 display가 .is-hidden(581행)보다 뒤에 있어 같은 특이도에서 이긴다 — 파일을 고르기 전에도 빈 목록
   상자가 떠 있던 원인이다. display를 지정한 요소는 숨김 규칙을 따로 못박아야 한다. */
.payment-evidence-file-list.is-hidden { display: none; }
.payment-evidence-file-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.payment-evidence-file-name { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.payment-evidence-file-name img { width: 18px; height: 18px; flex: 0 0 auto; }
.payment-evidence-file-name small { color: var(--muted); white-space: nowrap; }
.payment-evidence-remove { flex: 0 0 auto; padding: 6px 9px; font-size: 12px; }
.payment-evidence-trigger img, .payment-evidence-link img { width: 18px; height: 18px; }
.payment-evidence-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.payment-evidence-indicator { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); outline: none; }
.payment-evidence-indicator img { width: 20px; height: 20px; }
.payment-evidence-indicator.is-empty { opacity: .18; }
.payment-evidence-indicator.has-evidence { cursor: help; opacity: 1; }
.buyer-document-field { margin-top: 4px; }
.buyer-document-upload { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.buyer-document-upload .payment-evidence-dropzone { background: var(--cellaheal-white); }
.buyer-document-upload .payment-evidence-link { margin-top: 2px; }
.buyer-profile-panel-heading { padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.buyer-profile-panel .buyer-profile-panel-heading h2 { margin: 0 0 4px; }
.buyer-profile-panel .buyer-profile-panel-heading p { margin: 0; }
.buyer-profile-panel .buyer-profile-panel-heading + form { padding: 20px 24px 24px; }
.buyer-detail-stack { gap: 18px; }
@media (max-width: 560px) { .buyer-profile-panel-heading, .buyer-profile-panel .buyer-profile-panel-heading + form { padding-inline: 16px; } .buyer-document-upload { padding: 10px; } }
.payment-create-submit[disabled] { cursor: wait; opacity: .68; }
@media (max-width: 560px) { .payment-evidence-dropzone { align-items: flex-start; flex-wrap: wrap; } .payment-evidence-dropzone > span:nth-child(2) { flex-basis: calc(100% - 44px); } .payment-evidence-trigger { margin-left: 40px; } }

/* Influencer seeding */
/* 목록 안에서만 쓰는 단계 선택은 전역 메뉴와 다른 층위다. 카드형 세그먼트 대신 일반 탭으로
   처리해, 화면마다 다른 조작 규칙처럼 보이지 않게 한다. */
.influencer-filter-nav { display: flex; gap: 4px; width: 100%; max-width: 100%; flex-wrap: wrap; margin-bottom: 12px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.influencer-filter-nav .nav-link { min-height: var(--control-height-compact); padding: 6px var(--control-padding-compact); border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: var(--control-font-compact); font-weight: 600; }
.influencer-filter-nav .nav-link:hover { border-color: var(--line); background: var(--surface); color: var(--text); }
.influencer-filter-nav .nav-link.active { border-color: var(--cellaheal-800); background: var(--cellaheal-800); color: var(--cellaheal-white); font-weight: 700; box-shadow: none; }
.influencer-filter-nav-sub { margin-bottom: 18px; }
.influencer-filter-nav-sub .nav-link { font-size: 13px; color: var(--muted); }
.pill.tier-mini { color: var(--cellaheal-600); background-color: var(--cellaheal-100); border: 1px solid var(--cellaheal-300); }
.pill.tier-new { color: #7a5b00; background-color: #fff9dc; border: 1px solid #ead48a; }
.pill.tier-nano { color: var(--cellaheal-dryless-dark); background-color: #eaf5ff; border: 1px solid var(--cellaheal-dryless-dark); }
.pill.tier-micro { color: var(--cellaheal-stressless-dark); background-color: var(--cellaheal-stressless-light); border: 1px solid var(--cellaheal-stressless-dark); }
.pill.tier-mid { color: var(--cellaheal-poreless-dark); background-color: var(--cellaheal-poreless-light); border: 1px solid var(--cellaheal-poreless-dark); }
.pill.tier-macro { color: var(--cellaheal-spotless-dark); background-color: var(--cellaheal-spotless-light); border: 1px solid var(--cellaheal-spotless-dark); }
/* 메모 표시(중단 탭의 메모 열)는 이메일 표시와 같은 규칙을 쓴다 — 있으면 진하게, 없으면 흐리게,
   올렸을 때만 툴팁으로 전문. 같은 뜻의 표시가 화면마다 다른 모양이면 훑는 눈이 매번 다시 배워야 한다. */
.influencer-note-indicator,
.influencer-email-indicator { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); outline: none; }
.influencer-note-indicator img,
.influencer-email-indicator img { width: 18px; height: 18px; }
/* DM 표시 — 이메일 표시와 같은 규칙(흐림/진함 + 올리면 툴팁)을 쓰고 아이콘만 다르다. 툴팁에 DM 본문이
   통째로 들어가므로 줄바꿈을 살리고(white-space: pre-line은 위 규칙에 있다) 폭을 조금 넓게 잡는다. */
/* 유상 시딩 조건 칸. 토글 자체는 입금 요청 드로어의 일반/프리랜서와 같은 .radio-card를 쓴다 —
   "둘 중 하나"를 고르는 같은 성격이라 화면마다 다른 모양일 이유가 없다.
   무상일 때는 칸이 통째로 사라진다(.is-hidden) — 비활성으로 흐리게 두면 "채워야 하나" 싶어진다. */
.influencer-offer-fields { display: grid; gap: 12px; }
/* .is-hidden(581행)보다 위 규칙이 뒤에 있어 같은 특이도에서 이긴다 — display를 지정한 요소는 숨김
   규칙을 따로 못박아야 한다(.creative-image-modal도 같은 이유로 아래에 한 줄 더 있다). */
.influencer-offer-fields.is-hidden { display: none; }

/* 후보 정보의 DM 한 줄 — 전문은 올렸을 때만 뜬다. 표에 전문을 펼치면 그 글 하나로 표가 가득 찬다. */
.influencer-dm-peek { --tooltip-left: 0; --tooltip-transform: none; --tooltip-width: 420px; position: relative; cursor: help; border-bottom: 1px dashed var(--line-strong); outline: none; }
.influencer-note-indicator.is-empty,
.influencer-email-indicator.is-empty { opacity: .18; }
.influencer-note-indicator.has-note,
.influencer-email-indicator.has-email { cursor: help; opacity: 1; }
.influencer-hashtag-cell { display: flex; flex-wrap: wrap; gap: 4px; }
.influencer-post-links { display: inline-flex; align-items: center; gap: 8px; }
.influencer-posted-url-field { gap: 8px; }
.influencer-posted-url-list { display: grid; gap: 8px; }
.influencer-posted-url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.influencer-posted-url-row .button-quiet { width: auto; white-space: nowrap; }
.influencer-posted-url-add { justify-self: start; width: auto; }
.influencer-posted-link-list { display: grid; gap: 4px; margin-bottom: 6px; }
.influencer-posted-link-list a { overflow-wrap: anywhere; }
/* 행 선택과 그룹 벌크 바. 생김새와 동작은 상품 매칭 화면(#mapping-candidates-body, 위 20행)을 그대로
   따른다 — 같은 "여러 줄 골라서 한꺼번에 처리하는 표"인데 화면마다 선택이 다르게 보이면 훑는 눈이
   매번 다시 배워야 한다. 칸 폭(52px)도, 골라진 줄의 왼쪽 막대도 그쪽 값 그대로다. */
.influencer-select-cell { width: 52px; }
/* 후보 목록은 열이 많다. 좁은 화면에 표 전체를 억지로 맞추면 fixed-layout과 anywhere 줄바꿈 때문에
   헤더·핸들·날짜가 한 글자씩 세로로 찢어진다. 각 셀은 읽을 수 있는 한 줄 폭을 유지하고 표 자체를
   가로로 미는 방식으로 보여준다. 모바일에서는 핸들만 왼쪽에 고정해, 옆 열을 훑는 동안에도 어느
   후보의 값인지 놓치지 않되 작은 화면을 고정 열이 대부분 차지하지 않게 한다. */
.influencer-list-table { min-width: 1180px; table-layout: auto; }
.influencer-list-table th,
.influencer-list-table td { overflow-wrap: normal; white-space: nowrap; }
.influencer-list-table th:nth-child(1),
.influencer-list-table td:nth-child(1) { width: 52px; min-width: 52px; }
.influencer-list-table th:nth-child(2),
.influencer-list-table td:nth-child(2) { width: 72px; min-width: 72px; }
.influencer-list-table th:nth-child(3),
.influencer-list-table td:nth-child(3) { min-width: 150px; }
@media (max-width: 720px) {
  .influencer-list-table th:nth-child(3),
  .influencer-list-table td:nth-child(3) { position: sticky; left: 0; z-index: 1; background: var(--cellaheal-white); box-shadow: 8px 0 10px -10px var(--text); }
  .influencer-list-table th:nth-child(3) { z-index: 2; }
  .influencer-list-table tr.is-selected td:nth-child(3) { background: var(--surface-muted); }
}
/* 단계 탭 줄: 왼쪽은 탭, 오른쪽 끝은 선택했을 때만 뜨는 벌크 액션. 표 위에 줄을 하나 더 만들면
   고를 때마다 표가 아래로 밀려서 방금 체크한 줄이 눈에서 벗어난다. */
.influencer-stage-row,
.influencer-view-row,
.influencer-toolbar,
.influencer-bulk-actions,
.influencer-panel,
.influencer-group-menu,
.influencer-group-rename,
.influencer-group-new-layer,
.influencer-group-menu-foot,
.influencer-save-form,
.influencer-name-form,
.influencer-email-form,
.influencer-expiry-line,
.influencer-stop-note,
.expo-claim,
.export-filter {
  --control-height: var(--control-height-compact);
  --control-padding-inline: var(--control-padding-compact);
  --control-font-size: var(--control-font-compact);
}

.influencer-stage-row { display: flex; min-width: 0; max-width: 100%; align-items: center; gap: var(--space-3); }
/* 대분류 배경은 마지막 탭에서 끝난다. 선택 액션은 같은 줄의 오른쪽 끝에만 붙는다. */
.influencer-stage-row > .influencer-filter-nav { flex: 0 1 auto; width: fit-content; min-width: 0; margin-bottom: 0; }
/* 이름이 .influencer-bulk-actions인 이유: .influencer-stage-actions는 아래(1349행)에서 상세 화면의
   단계 전환 버튼 묶음이 이미 쓰고 있고 그쪽이 display: grid다 — 같은 이름을 쓰면 뒤에 오는 그 규칙이
   이겨서 버튼이 세로로 쌓인다(2026-09-02에 실제로 그렇게 깨졌다).
   그룹 패널이 이 안에서 절대 위치를 잡는다(.influencer-panel은 right: 0 기준).
   .is-hidden(581행)보다 뒤에 있어야 display를 지정한 이 규칙을 이긴다 — .influencer-offer-fields와 같은 이유다. */
.influencer-bulk-actions { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; white-space: nowrap; }
.influencer-bulk-actions.is-hidden { display: none; }
@media (max-width: 720px) {
  /* 좁은 화면에서는 의도적으로 두 줄로 쌓는다. 각 줄이 전체 폭을 차지해 툴바와 겹치지 않는다. */
  .influencer-stage-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .influencer-stage-row > .influencer-filter-nav { margin-bottom: 0; }
  .influencer-bulk-actions { justify-self: start; flex-wrap: wrap; white-space: normal; }
}
/* 선택 개수는 **글자**다. 버튼 클래스를 입혔더니 올렸을 때 배경이 깔려서 누를 수 있는 것처럼 보였는데,
   여기서 누를 수 있는 건 그 옆의 그룹·열기·선택 해제뿐이다 — 모양이 곧 약속이라 아닌 것에 버튼 옷을 입히면
   안 된다. 옆 버튼들과 같은 13px 계열로 크기만 맞춘다. */
.influencer-bulk-count { font-size: 13px; font-weight: 700; color: var(--text); }
/* 그룹 패널 속: 그룹 목록 → "+ 새 그룹 만들기" → (펼치면) 이름 칸. 레이어가 한 겹씩 열리는 모양이다. */
/* 목록의 그룹 칩. Tier·단계 배지와 같은 .pill 골격에 톤만 낮춘다 — 그 둘은 시스템이 정한 값이고
   이건 사람이 붙인 이름표라, 같은 굵기로 서면 한 줄에서 사실과 메모가 구분되지 않는다. */
/* 꺼둔 줄(미사용 사유 코드 등) — 목록에 남겨두되 지금 쓰는 것과 눈으로 갈리게 한다. */
.is-muted-row > td { opacity: .55; }
.influencer-group-pill { border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-weight: 600; }
/* 글자 크기는 필터·정렬 패널과 같은 13px 계열로 맞춘다 — 본문 크기를 그대로 물려받으면 300px 폭 안에서
   문장이 세 줄로 접히고, p의 기본 여백까지 붙어 패널이 두 배로 부푼다. */
.influencer-group-panel { font-size: 13px; }
.influencer-group-panel p { margin: 0; font-size: 12px; line-height: 1.5; }
.influencer-group-panel .influencer-panel-head { margin-bottom: 8px; font-weight: 700; color: var(--text); }
.influencer-group-panel-list { display: grid; gap: 2px; max-height: 240px; margin-bottom: 2px; overflow-y: auto; }
.influencer-group-panel-list .checkbox-row { flex: 1 1 auto; min-width: 0; min-height: 30px; padding: 2px 6px; border-radius: 6px; font-size: 13px; }
.influencer-group-panel-list .checkbox-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 한 줄에 고르는 자리와 이름 고치는 자리가 함께 있다. 연필은 올렸을 때만 진해진다 — 늘 같은 굵기로
   서 있으면 그룹을 고르러 온 사람 눈에 먼저 걸린다. */
.influencer-group-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; border-radius: 6px; }
.influencer-group-row:hover { background: var(--surface-muted); }
.influencer-group-rename-toggle { --control-height: var(--control-height-compact); flex: 0 0 auto; width: var(--control-height-compact); height: var(--control-height-compact); padding: 0; border: 0; background: transparent; color: var(--muted); }
.influencer-group-row:hover .influencer-group-rename-toggle { color: var(--text); }
.influencer-group-rename-toggle .pen-icon { width: 14px; height: 14px; }
.influencer-group-rename { display: flex; align-items: center; gap: 4px; width: 100%; padding: 2px 6px 6px; }
.influencer-group-rename.is-hidden { display: none; }
.influencer-group-rename input { height: var(--control-height-compact); }
.influencer-group-rename .button-quiet { flex: 0 0 auto; height: var(--control-height-compact); }
/* 컨택 이메일 — 읽는 줄과 고치는 폼이 같은 자리를 쓴다. */
.influencer-email-view { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.influencer-email-view.is-hidden, .influencer-email-form.is-hidden { display: none; }
.influencer-email-edit { --control-height: var(--control-height-compact); width: var(--control-height-compact); border: 0; background: transparent; color: var(--muted); }
.influencer-email-view:hover .influencer-email-edit { color: var(--text); }
.influencer-email-edit .pen-icon { width: 14px; height: 14px; }
.influencer-email-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.influencer-email-form input { flex: 1 1 220px; height: var(--control-height-compact); }
.influencer-email-form .button-quiet { flex: 0 0 auto; height: var(--control-height-compact); }

/* 눌러서 복사하는 글자. 링크가 아니라(어디로도 가지 않는다) 점선 밑줄로 "누를 수 있는 값"임만 알린다.
   복사되면 옆에 "복사됨"이 잠깐 뜬다 — 클립보드는 눈에 보이지 않아서 표시가 없으면 두 번 누르게 된다. */
.influencer-copy-text { padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 500; text-align: left; border-bottom: 1px dashed var(--line-strong); border-radius: 0; cursor: pointer; }
.influencer-copy-text:hover { background: transparent; color: var(--text); border-bottom-color: var(--text); }
.influencer-copy-flash { margin-left: 8px; padding: 1px 6px; border-radius: 999px; background: var(--surface-muted); color: var(--muted); font-size: 11px; font-weight: 700; opacity: 0; transition: opacity .15s ease; }
.influencer-copy-text.is-copied .influencer-copy-flash { opacity: 1; }

/* 중단/거절 드로어 — 결과를 먼저 고르고 그 결과에 필요한 칸만 남는 폼 하나. 고르는 줄은 라디오지만
   누르는 면은 줄 전체다(작은 동그라미를 겨냥하게 만들면 고를 때마다 조준을 해야 한다). */
.influencer-stop-choices { display: grid; gap: 6px; }
.influencer-stop-choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.influencer-stop-choice:hover { background: var(--surface-muted); }
.influencer-stop-choice:has(input:checked) { border-color: var(--line-strong); background: var(--surface-muted); }
.influencer-stop-choice input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; padding: 0; accent-color: var(--accent); }
.influencer-stop-choice > span { display: grid; gap: 2px; font-size: 13px; }
.influencer-stop-choice .muted { font-size: 12px; line-height: 1.45; }
/* 메모는 결과를 정하기 전에도 적는 값이라 폼 맨 위에 있다. 여러 줄을 받으므로 저장 버튼은 칸 아래
   오른쪽에 세운다 — 옆에 두면 칸이 세로로 자랄 때 버튼만 가운데에 떠 있게 된다. */
.influencer-stop-note { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.influencer-stop-note textarea { width: 100%; min-height: 76px; line-height: 1.6; resize: vertical; }
.influencer-stop-note .button-quiet { flex: 0 0 auto; height: var(--control-height-compact); }
.influencer-stop-form [data-stop-hint] p { margin: 0; }
.influencer-stop-form [data-stop-hint]:empty { display: none; }
/* 끝내는 폼과 되돌리기 사이의 선. 붙여 두면 정반대의 두 동작이 한 줄 간격으로 선다. */
.influencer-stop-divider { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }

/* 중간 상태(일부만 그 그룹인 경우) 표시와, 적용 전에 무엇이 바뀌는지 세어 보여주는 줄. */
.influencer-group-partial { font-size: 12px; }
.influencer-group-hint { flex: 1 1 auto; font-size: 12px; }
.influencer-panel-foot button:disabled { border-color: var(--line); background: var(--cellaheal-white); color: var(--muted); cursor: default; }
/* 목록의 한 줄처럼 생긴 버튼 — "여기에 한 줄 더 만든다"는 뜻이 모양에 있어야 한다. */
.influencer-group-new-toggle { display: block; width: 100%; margin-top: 6px; padding: 6px; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.influencer-group-new-toggle:hover { background: var(--surface-muted); }
.influencer-group-new-layer { display: grid; gap: 6px; margin-top: 6px; padding: 10px; border-radius: 8px; background: var(--surface-muted); }
.influencer-group-new-layer.is-hidden { display: none; }
.influencer-group-new-layer input { height: var(--control-height-compact); }
/* 상세의 "이름" 줄에 들어가는 수정 칸 — 입력과 저장이 한 줄에 서야 "고치고 바로 저장"이 한 동작으로
   읽힌다. 정보 목록 안이라 입력칸은 폭을 다 먹지 않게 잡는다. */
.influencer-name-form { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.influencer-name-form input { flex: 0 1 220px; height: var(--control-height-compact); }
.influencer-name-form .button-quiet { height: var(--control-height-compact); }
.influencer-name-hint { display: block; margin-top: 4px; font-size: 12px; }
/* 제안서 만료 줄 — 날짜와 연장 버튼을 한 줄에 세운다. 이름 줄과 같은 모양(값 + 조작 + 아래 설명)이라
   버튼 높이도 거기 맞춘다. 좁은 화면에서는 버튼이 다음 줄로 내려간다. */
.influencer-expiry-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.influencer-expiry-line .button-quiet { height: var(--control-height-compact); }
/* 상세 화면의 그룹 편집 — 체크박스가 곧 최종 상태이고, 아래 한 줄에서 새 그룹을 만들면서 함께 묶는다. */
/* 후보 정보 표의 그룹 줄. 닫힌 줄(지금 붙은 칩 + 편집 버튼)만 표에 서고, 고르는 목록은 눌렀을 때
   그 위에 뜬다 — 체크박스를 늘 펼쳐 두면 그룹이 늘어나는 만큼 이 한 줄이 표를 아래로 밀어낸다.
   가이드라인 드롭다운(.influencer-guide-picker)과 같은 규칙이다. */
.influencer-group-picker { position: relative; }
.influencer-group-current { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.influencer-group-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.influencer-group-trigger { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--cellaheal-white); color: var(--muted); font-size: 12px; font-weight: 600; }
/* 전역 button:hover(배경을 검게)를 이겨야 글자가 읽힌다 — 가이드라인 드롭다운과 같은 이유다. */
.influencer-group-trigger:hover,
.influencer-group-trigger[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface-muted); color: var(--text); }
.influencer-group-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-popover); width: min(320px, calc(100vw - 32px)); padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--cellaheal-white); box-shadow: var(--shadow); }
.influencer-group-menu.is-hidden { display: none; }
/* 그룹이 몇 개가 되든 팝오버 높이는 여기서 멈추고 안에서 스크롤한다. */
.influencer-group-menu-list { display: grid; gap: 2px; max-height: 220px; overflow-y: auto; }
.influencer-group-menu-list .checkbox-row { display: flex; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.influencer-group-menu-list .checkbox-row:hover { background: var(--surface-muted); }
.influencer-group-menu-list p { margin: 0; padding: 6px 8px; font-size: 12px; line-height: 1.5; }
.influencer-group-menu-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.influencer-group-menu-foot input { height: var(--control-height-compact); }
.influencer-group-menu-foot button { flex: 0 0 auto; height: var(--control-height-compact); }
/* 바뀐 게 없으면 누를 것이 없다 — 눌러도 아무 일이 없는 버튼은 "저장이 안 된다"로 읽힌다. */
.influencer-group-menu-foot button:disabled { border-color: var(--line); background: var(--cellaheal-white); color: var(--muted); cursor: default; }
.influencer-summary-grid { margin-bottom: 16px; }
.influencer-summary-grid .card { gap: 4px; }
.influencer-summary-grid .metric { font-size: 1.6rem; }
.influencer-ops-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.influencer-detail-list { display: grid; gap: 0; margin: 0; }
.influencer-detail-list > div { display: grid; grid-template-columns: 132px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.influencer-detail-list > div:has(.influencer-metric-grid) { align-items: start; }
.influencer-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.influencer-metric-tile { display: flex; flex-direction: column; gap: 3px; }
.influencer-metric-label { font-size: 11px; font-weight: 600; color: var(--muted); }
.influencer-metric-value { font-size: 15px; font-weight: 700; }
.influencer-metric-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* 채점 항목 카드. 정량 지표 타일과 같은 모양을 쓰되 색으로 좋고 나쁨만 얹는다 — 배점이 다른 항목끼리
   숫자만으로는 "2점"이 잘한 건지 못한 건지 알 수 없다. 색은 옅게 깔아서 카드 자체를 덮지 않는다. */
.influencer-rubric-tile { position: relative; }
.influencer-rubric-tile.is-good { background: rgba(6, 95, 70, .08); }
.influencer-rubric-tile.is-bad { background: rgba(153, 27, 27, .08); }
.influencer-rubric-tile[data-tooltip] { cursor: help; outline: none; }
.influencer-rubric-max { font-size: 12px; font-weight: 600; color: var(--muted); }
.influencer-rubric-tile[data-tooltip] { --tooltip-width: 320px; }
/* 점수 줄 — 지표 위에서 결론을 먼저 말하는 자리라 숫자를 크게 세운다. */
.influencer-score-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.influencer-score-line-value { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.influencer-score-line-value .muted { font-size: 14px; font-weight: 600; }
.influencer-detail-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.influencer-detail-list dt { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.influencer-detail-list dd { margin: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.influencer-detail-list dd pre { margin: 0; font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.influencer-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.influencer-section-title h2 { margin: 0; }
/* 제목 옆에 액션 버튼을 두는 경우 — baseline 정렬이면 버튼이 글자 아래로 처진다. */
.influencer-section-title.has-action { align-items: center; }
/* summary에 display:flex를 주면 브라우저 기본 삼각형이 사라지므로 직접 그려준다. */
summary.influencer-section-title { cursor: pointer; justify-content: flex-start; list-style: none; }
summary.influencer-section-title::-webkit-details-marker { display: none; }
summary.influencer-section-title h2::before { content: '▸'; display: inline-block; width: 1em; margin-right: 2px; color: var(--muted); font-size: 0.8em; }
details[open] > summary.influencer-section-title h2::before { content: '▾'; }
@media (max-width: 960px) {
  .influencer-ops-columns { grid-template-columns: 1fr; }
}

.influencer-score-title { display: flex; align-items: baseline; gap: 8px; }
.influencer-score-title h2 { margin: 0; }
.influencer-score-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.influencer-score-value { flex: 0 0 auto; font-size: 2.8rem; font-weight: 800; line-height: 1; }
.influencer-score-value span { margin-left: 2px; font-size: 1rem; font-weight: 600; color: var(--muted); }
.influencer-score-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pill-lg { padding: 8px 14px; font-size: 13px; }

.influencer-evidence-callout { padding: 14px 18px; border-radius: 10px; background: var(--surface-muted); }
.influencer-evidence-callout strong { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--cellaheal-800); }
.influencer-evidence-callout p { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--cellaheal-800); }
/* 발송 대기 후보의 DM 카피 — 줄바꿈이 실제 발송 문구 그대로여야 해서 pre로 보여준다. */
.influencer-evidence-callout pre { margin: 0; font-family: inherit; font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--cellaheal-800); white-space: pre-wrap; overflow-wrap: anywhere; }

/* 열이 아홉 개인 성과·로그 표는 좁은 창에서 카드 밖으로 넘친다 — 표만 가로로 밀리게 한다. */

.influencer-settings-nav { display: flex; gap: 0 18px; flex-wrap: wrap; margin: 4px 0 20px; border-bottom: 1px solid var(--line); }
.influencer-settings-tab { min-height: 40px; padding: 10px 0 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.influencer-settings-tab:hover { color: var(--text); }
.influencer-settings-tab.is-active { border-bottom-color: var(--text); color: var(--text); }
.influencer-settings-nav a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.influencer-settings-panel[hidden] { display: none; }
.influencer-settings-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.influencer-tag-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; }
.influencer-rejection-category { --tooltip-left: 0; --tooltip-transform: none; --tooltip-width: 260px; position: relative; display: inline-flex; align-items: center; min-height: 28px; border-bottom: 1px dashed var(--line-strong); color: var(--text); cursor: help; font-weight: 700; outline: none; }
.influencer-rejection-category:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.influencer-discovery-log { border-top: 1px solid var(--line); }
.influencer-discovery-log-item { border-bottom: 1px solid var(--line); }
.influencer-discovery-log-item summary { display: flex; align-items: center; gap: 8px 14px; min-height: 52px; padding: 10px 12px; cursor: pointer; list-style: none; }
.influencer-discovery-log-item summary::-webkit-details-marker { display: none; }
.influencer-discovery-log-item summary::before { content: '▸'; color: var(--muted); font-size: 12px; }
.influencer-discovery-log-item[open] summary::before { content: '▾'; }
.influencer-discovery-log-item summary > span:not(.pill) { flex: 1 1 auto; color: var(--muted); font-size: 13px; }
.influencer-discovery-log-item .table-scroll { padding: 0 12px 12px; }
@media (max-width: 640px) {
  .influencer-settings-summary-grid { grid-template-columns: 1fr; }
  .influencer-tag-summary-grid { grid-template-columns: 1fr; }
  .influencer-discovery-log-item summary { align-items: flex-start; flex-wrap: wrap; }
  .influencer-discovery-log-item summary > span:not(.pill) { flex-basis: calc(100% - 24px); }
}

/* 태그별 성과의 최종 수율 — 숫자만 나열하면 태그 사이 우열이 안 읽혀서 막대를 같이 그린다. */
.influencer-yield { display: flex; align-items: center; gap: 8px; }
.influencer-yield-bar { flex: 1 1 auto; min-width: 48px; height: 6px; accent-color: var(--cellaheal-700); }
.influencer-code-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; }
.influencer-helper-text { font-size: 12px; }
.influencer-input-limit { width: 4.5rem; }

/* 시딩 제품(판매용 마스터상품) 선택 목록 — 메인/함께 제공 두 벌을 나란히 놓는다. */
.influencer-product-choices { display: grid; gap: 2px; }
.influencer-product-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) {
  .influencer-product-columns { grid-template-columns: 1fr; }
}
/* 실제로 보낼 글이라 통째로 보여야 한다 — 안에서 스크롤되면 어디까지 썼는지가 안 보인다. 높이는
   스크립트가 내용에 맞춰 잡으므로 여기서 정하지 않는다. min-height는 글이 비었을 때 안내 문구가 들어갈
   자리일 뿐이다(예전의 560px는 DM 한 통을 미리 잡아둔 값이었는데, 짧은 글에서도 빈 칸이 남았다).
   손잡이로 늘리는 건 막았다 — 어차피 한 글자만 고쳐도 스크립트가 내용 높이로 되돌리고, 그 손잡이가
   복사 버튼 자리와 겹친다. */
.influencer-dm-textarea { min-height: 120px; line-height: 1.7; overflow-y: hidden; resize: none; }
/* 제안서 DM — 고치는 값이 아니라 그대로 복사해 붙이는 글이라 입력칸이 아니라 읽는 자리다.
   아홉 줄로 길이가 고정이라 높이는 내용에 맡긴다. */
.influencer-proposal-dm { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; color: var(--text); }
/* 보기 탭은 진행 대분류와 다른 보조 층이다. 얇은 구분선만 탭 폭에 붙여, 별도 내비게이션처럼
   떠 보이지 않게 한다. */
.influencer-view-row { display: flex; min-width: 0; max-width: 100%; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-2); }
.influencer-view-tabs { display: flex; align-items: stretch; gap: 2px; min-width: 0; width: fit-content; max-width: 100%; flex: 0 1 auto; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.influencer-view-tab-list { display: contents; }
.influencer-view-tabs.is-managed { width: auto; max-width: calc(100% - 420px); flex: 0 1 auto; flex-wrap: nowrap; }
.influencer-view-tabs.is-managed .influencer-view-tab-list { display: flex; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.influencer-view-tab { display: inline-flex; align-items: center; height: var(--control-height-compact); box-sizing: border-box; padding: 0 var(--control-padding-compact); border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); text-decoration: none; font-size: var(--control-font-compact); font-weight: 600; white-space: nowrap; }
.influencer-view-tab:hover { color: var(--text); }
.influencer-view-tab.is-active { color: var(--text); border-bottom-color: var(--cellaheal-800); }
.influencer-view-private { color: var(--cellaheal-400); }
.influencer-view-add { align-self: center; min-height: 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 15px; }
.influencer-view-add:hover { background: var(--cellaheal-100); color: var(--text); }
.influencer-view-more { position: relative; align-self: center; }
.influencer-view-more summary { display: inline-flex; align-items: center; height: var(--control-height-compact); padding: 0 var(--control-padding-compact); color: var(--muted); font-size: var(--control-font-compact); font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; }
.influencer-view-more summary::-webkit-details-marker { display: none; }
.influencer-view-more summary:hover { color: var(--text); }
.influencer-view-more-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-popover); display: grid; min-width: 160px; padding: 6px; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--surface); box-shadow: var(--shadow); }
.influencer-view-more-menu .influencer-view-tab { justify-content: flex-start; margin: 0; border-bottom: 0; border-radius: 6px; }
.influencer-view-more-menu .influencer-view-tab:hover { background: var(--surface-muted); }
/* 지금 보고 있는 보기를 관리하는 ⋯. 필터·정렬·속성과 같은 줄 끝에 둔다 — 팝오버가 이 줄 오른쪽 아래에
   열리므로, 버튼이 다른 줄에 있으면 누른 자리와 열리는 자리가 어긋난다. 글자 대신 기호 하나만 들어가는
   버튼이라 좌우 여백만 줄이고 나머지는 옆 버튼들과 같은 규칙을 그대로 쓴다. */
.influencer-toolbar-more { padding: 0 8px; font-size: 15px; line-height: 1; }

/* 조건이 저장된 보기와 달라졌을 때만 뜨는 저장 버튼. */
.influencer-toolbar-button.is-dirty { background: var(--cellaheal-800); color: var(--cellaheal-white); }
.influencer-toolbar-button.is-dirty:hover { background: var(--cellaheal-black); color: var(--cellaheal-white); }
.influencer-save-form { display: grid; gap: 6px; padding: 8px 0; }
.influencer-save-form + .influencer-save-form { border-top: 1px solid var(--line); }
.influencer-save-form .field { gap: 4px; }
.influencer-save-form input[type="text"], .influencer-save-form input:not([type]) { height: var(--control-height-compact); }
.influencer-save-form .button, .influencer-save-form .button-quiet { height: var(--control-height-compact); }
.influencer-save-note { margin: 0; font-size: 11px; line-height: 1.5; }
.influencer-save-delete { color: var(--cellaheal-spotless-dark); }

/* ── 목록 도구 줄(검색·필터·정렬)과 팝오버 ────────────────────────────────────
   노션 데이터베이스 테이블 보기의 도구 줄을 따른다: 표 바로 위에 얇게 붙어 있고, 버튼은 눌리기 전까지
   테두리 없이 조용히 있다가 조건이 걸리면 색을 얻는다. 목록이 주인공이고 도구 줄은 그 위의 얇은 층이다. */
.influencer-toolbar { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; }
.influencer-toolbar-search { flex: 0 1 340px; min-width: 260px; }
.influencer-toolbar-search input { width: 100%; height: var(--control-height-compact); border: 1px solid var(--line); border-radius: 7px; }
.influencer-toolbar-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.influencer-toolbar-button { height: var(--control-height-compact); padding: 0 var(--control-padding-compact); border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: var(--control-font-compact); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.influencer-toolbar-button:hover { border-color: var(--line-strong); background: var(--surface-muted); color: var(--text); }
.influencer-toolbar-button.is-active { border-color: var(--line-strong); color: var(--text); background: var(--surface-muted); }
.influencer-toolbar-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--cellaheal-800); color: var(--cellaheal-white); font-size: 10px; }
@media (max-width: 1100px) and (min-width: 721px) {
  .influencer-view-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .influencer-view-tabs { width: 100%; }
  .influencer-toolbar { justify-content: flex-end; }
  .influencer-toolbar-search { flex-basis: 340px; }
}

/* 팝오버 — 노션처럼 버튼 아래에 카드로 뜬다. */
.influencer-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-nav); width: min(560px, calc(100vw - 32px)); padding: var(--space-3); border: 1px solid var(--line); border-radius: 10px; background: var(--cellaheal-white); box-shadow: var(--shadow); }
.influencer-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; }
.influencer-panel-conjunction { display: inline-flex; gap: 2px; padding: 2px; border-radius: 6px; background: var(--surface-muted); }
.influencer-panel-conjunction button { --control-height: var(--control-height-compact); height: var(--control-height-compact); padding: 0 var(--space-2); border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; }
.influencer-panel-conjunction button.is-active { background: var(--cellaheal-white); color: var(--text); }
.influencer-rule-list { display: grid; gap: 6px; }
.influencer-rule { display: flex; align-items: center; gap: 6px; }
.influencer-rule select, .influencer-rule input { height: var(--control-height-compact); }
.influencer-rule-order { width: 14px; text-align: center; font-size: 12px; }
.influencer-rule-property { flex: 0 0 148px; }
.influencer-rule-operator { flex: 0 0 116px; }
.influencer-rule-value { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.influencer-rule-value input, .influencer-rule-value select { width: 100%; }
/* 여럿 중 하나 — 선택지가 많아지면 안에서 스크롤한다. 패널이 화면 밖으로 자라지 않게. */
.influencer-rule-options { display: grid; gap: 2px; max-height: 132px; overflow-y: auto; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; width: 100%; }
.influencer-rule-remove { --control-height: var(--control-height-compact); flex: 0 0 auto; width: var(--control-height-compact); height: var(--control-height-compact); padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 14px; }
.influencer-rule-remove:hover { background: var(--cellaheal-100); color: var(--text); }
.influencer-panel-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.influencer-panel-foot .button, .influencer-panel-foot .button-quiet { height: var(--control-height-compact); padding: 0 var(--control-padding-compact); font-size: var(--control-font-compact); }
.influencer-panel-foot .button { margin-left: auto; }

/* 속성(열) 패널 — 켜고 끄는 목록과 순서 옮기기. 노션의 Properties 패널과 같은 자리다. */
.influencer-panel-narrow { width: min(300px, calc(100vw - 32px)); }
.influencer-column-list { display: grid; gap: 1px; max-height: 340px; overflow-y: auto; }
.influencer-column-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.influencer-column-row:hover { background: var(--cellaheal-100); }
.influencer-column-name { flex: 1 1 auto; }
.influencer-column-move { --control-height: var(--control-height-compact); width: var(--control-height-compact); height: var(--control-height-compact); padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; }
.influencer-column-move:hover { background: var(--cellaheal-200); color: var(--text); }
.influencer-column-divider { margin: 6px 0 2px; padding: 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }

/* 지금 걸린 조건(칩) — 팝오버를 열지 않아도 왜 이 목록인지 보여야 한다. */
.influencer-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.influencer-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); overflow: hidden; }
.influencer-chip-body { --control-height: var(--control-height-compact); display: inline-flex; align-items: center; height: var(--control-height-compact); gap: 5px; padding: 0 var(--space-2); border: 0; background: transparent; color: var(--text); font-size: 12px; font-weight: 600; }
.influencer-chip-body:hover { background: var(--cellaheal-200); }
.influencer-chip-body .muted { font-weight: 500; }
.influencer-chip-remove { display: inline-flex; align-items: center; min-height: var(--control-height-compact); height: var(--control-height-compact); padding: 0 7px; color: var(--muted); text-decoration: none; font-size: 12px; }
.influencer-chip-remove:hover { background: var(--cellaheal-200); color: var(--text); }
.influencer-chip-conjunction { display: inline-flex; min-height: var(--control-height-compact); gap: 2px; padding: 2px; border-radius: 6px; background: var(--surface-muted); box-sizing: border-box; }
.influencer-chip-conjunction a { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 4px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 700; }
.influencer-chip-conjunction a.is-active { background: var(--cellaheal-white); color: var(--text); }
.influencer-chip-add { --control-height: var(--control-height-compact); height: var(--control-height-compact); padding: 0 var(--space-2); border: 1px dashed var(--line-strong); border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; }
.influencer-chip-add:hover { background: var(--cellaheal-100); color: var(--text); }
/* 발굴 실행 로그 — 실행 한 번을 앞 칸으로 묶고 태그마다 한 줄을 낸다. 묶인 칸은 여러 줄이 세로로
   쌓이므로 위에 붙여 정렬하고, 실행이 바뀌는 자리에 진한 선을 그어 어디서 끊기는지 보이게 한다. */
.influencer-run-table td { vertical-align: top; }
.influencer-run-cell { display: table-cell; }
.influencer-run-cell > * { display: block; }
.influencer-run-cell > span { margin-top: 2px; font-size: 12px; }
.influencer-run-table tr.influencer-run-first > td { border-top: 1px solid var(--line-strong); }
.influencer-run-table tr.influencer-run-first:first-child > td { border-top: 0; }

/* 후보 화면의 캠페인 가이드라인 드롭다운. 고를 목록을 늘 펼쳐 두면 정작 손댈 일이 거의 없는 칸이 DM 폼을
   밀어내므로, 닫힌 줄 하나(지금 무엇이 나가는지)만 두고 목록은 눌렀을 때만 띄운다. 닫힌 줄의 생김새는
   select에 맞춘다 — 여기서 하는 일이 "고르기"라 버튼처럼 보이면 무엇을 하는 자리인지 다시 읽어야 한다. */
.influencer-guide-picker { position: relative; }
.influencer-guide-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--cellaheal-white); color: var(--text); font-weight: 500; text-align: left; }
/* 전역 button:hover(배경을 검게)가 특이도에서 위 규칙을 이기므로 호버·펼침 상태에서 배경과 글자색을
   다시 못박는다 — 안 그러면 검은 배경에 진한 글자가 겹쳐 요약 줄이 안 읽힌다. */
.influencer-guide-trigger:hover { border-color: var(--line-strong); background: var(--surface-muted); color: var(--text); }
.influencer-guide-trigger[aria-expanded="true"],
.influencer-guide-trigger[aria-expanded="true"]:hover { border-color: var(--line-strong); background: var(--cellaheal-white); color: var(--text); box-shadow: 0 0 12px var(--accent-soft); }
.influencer-guide-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.influencer-guide-caret { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.influencer-guide-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--z-popover); max-height: 264px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--cellaheal-white); box-shadow: var(--shadow); }
.influencer-guide-menu-list { display: grid; gap: 2px; }
.influencer-guide-menu .checkbox-row { display: flex; padding: 6px 8px; border-radius: 6px; }
.influencer-guide-menu .checkbox-row:hover { background: var(--surface-muted); }
.influencer-guide-menu-empty { margin: 6px 8px; font-size: 13px; }
/* 목록 맨 아래 "추가하기" — 고를 게 마땅치 않다는 걸 알게 되는 자리가 여기라, 설정 화면으로 나가지 않고
   그 자리에서 드로어를 한 겹 더 띄운다. 목록의 마지막 줄처럼 보이게 두되 선으로 한 번 끊는다. */
.influencer-guide-add-trigger { width: 100%; margin-top: 4px; padding: 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); font-size: 13px; font-weight: 600; text-align: left; }
.influencer-guide-add-trigger:hover { background: var(--surface-muted); }

/* 제안서 미리보기 — 바로 아래 단계 전환 버튼("발송 대기로 전환")과 같은 크기·모양으로 두고 보조 버튼
   (테두리만)으로만 구분한다. a는 button 규칙의 여백을 못 받아 .button을 같이 걸고, .button-quiet의
   width:auto를 여기서 되돌린다. */
.influencer-proposal-preview { display: block; width: 100%; text-align: center; text-decoration: none; }

/* 드로어 위에 한 겹 더 뜨는 드로어("다음 단계" → "캠페인 가이드라인 추가"). 배경막도 한 층 위에 깔아서
   닫으면 아래 드로어가 그대로 남는다. 폭은 조금 좁혀 뒤에 무엇이 있는지 보이게 한다. */
.drawer-backdrop-stacked { z-index: var(--z-stacked-backdrop); }
.drawer-stacked { z-index: var(--z-stacked-drawer); width: min(520px, 100vw); }

/* 복사 버튼을 글 위에 얹는 자리. 아래쪽 여백은 마지막 줄이 버튼에 가리지 않게 비워둔다. */
.influencer-dm-box { position: relative; display: grid; }
.influencer-dm-box .influencer-dm-textarea,
.influencer-dm-box .influencer-proposal-dm { padding-bottom: 48px; }
/* 메일로 한 통에 보내는 경우: 위(고칠 수 있는 본문)와 아래(고정된 링크 안내)를 한 상자로 붙여 그린다.
   경계는 남긴다 — 아래쪽은 저장되지 않는 글이라, 고칠 수 있는 칸과 같은 면으로 보이면 안 된다. */
.influencer-dm-box .influencer-dm-textarea-merged { padding-bottom: 12px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.influencer-dm-box .influencer-proposal-dm-merged { border-top: 1px dashed var(--line-strong); border-top-left-radius: 0; border-top-right-radius: 0; }
.influencer-copy-button { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--cellaheal-white); color: var(--cellaheal-500); }
.influencer-copy-button:hover { background: var(--cellaheal-100); color: var(--text); }
/* 눌린 직후 1.6초 — 같은 자리에서 아이콘만 체크로 바뀐다. */
.influencer-copy-icon-done { display: none; }
.influencer-copy-button.is-done { color: var(--cellaheal-stressless-dark); border-color: var(--cellaheal-stressless-dark); background: var(--cellaheal-white); }
.influencer-copy-button.is-done .influencer-copy-icon { display: none; }
.influencer-copy-button.is-done .influencer-copy-icon-done { display: block; }

/* "다시 쓰기 (AI)"(보조)와 "저장"(주) — 저장이 오른쪽 끝에 오게 둔다. */
.influencer-dm-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* 발송 후보의 두 버튼(임시저장 / 저장하고 발송 대기로 전환). 둘 다 이 화면에서 끝을 내는 동작이라
   드로어 폭을 꽉 채워 세로로 쌓는다 — 오른쪽에 몰아두면 어느 쪽이 주 동작인지 크기로만 갈린다.
   보조 버튼(.button-quiet)이 위, 주 동작이 아래다. 제안서 미리보기와 같은 생김새를 쓴다. */
.influencer-stage-actions { display: grid; gap: 8px; }
.influencer-stage-actions .button { width: 100%; text-align: center; }

/* DM 생성 상태 — 40~60초를 기다리는 동안과 결과가 도착한 순간이 눈에 바로 보여야 한다. */
.influencer-dm-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.influencer-inline-hint { font-weight: 500; }
.influencer-compact-title { margin: 0 0 6px; }
.influencer-zero-margin { margin: 0; }
.influencer-helper-offset { margin: -4px 0 0; }
.influencer-dm-status { font-size: 12px; font-weight: 700; }
.influencer-dm-status.is-working { color: var(--muted); }
/* 화면 전체가 무채색이라 상태색은 브랜드 라인 색을 빌려 쓴다 — 완료는 스트레스리스(초록), 실패는 스팟리스(적). */
.influencer-dm-status.is-done { color: var(--cellaheal-stressless-dark); }
.influencer-dm-status.is-error { color: var(--cellaheal-spotless-dark); }
/* 새 글이 들어온 칸을 잠깐 물들여서 "방금 바뀐 곳"을 놓치지 않게 한다. */
.influencer-dm-textarea.is-updated { animation: influencer-dm-flash 1.8s ease-out 1; }
@keyframes influencer-dm-flash {
  0% { border-color: var(--cellaheal-stressless-dark); background: var(--cellaheal-stressless-light); }
  100% { border-color: var(--line); background: var(--cellaheal-white); }
}
@media (prefers-reduced-motion: reduce) {
  .influencer-dm-textarea.is-updated { animation: none; border-color: var(--cellaheal-stressless-dark); }
}


.influencer-rubric-table-caption { margin: 0 0 6px; }
.influencer-rubric-table { table-layout: fixed; }
.influencer-rubric-table th,
.influencer-rubric-table td { font-size: 13px; padding: 12px 10px; vertical-align: middle; text-align: center; overflow-wrap: break-word; }
.influencer-rubric-table .influencer-rubric-kind { width: 40px; white-space: nowrap; color: var(--muted); font-weight: 700; border-right: 1px solid var(--line); }
.influencer-rubric-table .influencer-rubric-label { width: 132px; white-space: nowrap; font-weight: 700; }
.influencer-rubric-table .influencer-rubric-points { width: 40px; white-space: nowrap; color: var(--muted); }
.influencer-rubric-table .influencer-rubric-result { width: 60px; white-space: nowrap; font-weight: 700; }
.influencer-rubric-table th:last-child,
.influencer-rubric-table td:last-child { text-align: left; }
.influencer-tier-icon { display: inline-block; margin-right: 5px; font-size: 10px; }
.influencer-tier-icon.tier-good { color: var(--cellaheal-stressless-dark); }
.influencer-tier-icon.tier-mid { color: var(--muted); }
.influencer-tier-icon.tier-bad { color: var(--cellaheal-spotless-dark); }
.influencer-rubric-reason { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.influencer-rubric-reason .influencer-rescore-trigger { flex: 0 0 auto; padding: 3px 10px; font-size: 12px; }

/* 목록 안 상세에 공통으로 쓰는 작업 맥락. 목록 복귀와 이 레코드의 주요 액션을 같은 줄에 두되,
   사람·조직별 프로필 표현은 아래의 선택형 히어로가 전담한다. */
.record-detail-header { position: sticky; top: 0; z-index: var(--z-nav); padding: 12px 0; background: var(--bg); overflow-anchor: none; transition: padding 220ms cubic-bezier(.22, 1, .36, 1), border-color 220ms ease, box-shadow 220ms ease, background-color 160ms ease; }
.record-detail-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; transition: margin 220ms cubic-bezier(.22, 1, .36, 1); }
.record-detail-back { color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; transition: font-size 220ms cubic-bezier(.22, 1, .36, 1); }
.record-detail-back::before { content: '‹'; margin-right: 5px; font-size: 16px; line-height: 0; vertical-align: -1px; }
.record-detail-back:hover { color: var(--text); text-decoration: underline; }
.record-detail-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.detail-profile-save { display: flex; justify-content: flex-end; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.buyer-relation-workspace { display: grid; gap: 12px; }
.buyer-relation-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.buyer-relation-values { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.buyer-relation-values:empty::before { content: '배정된 항목이 없습니다.'; color: var(--muted); font-size: 13px; }
.buyer-relation-controls { display: flex; align-items: start; gap: 8px; }
.buyer-relation-panel { display: flex; align-items: center; gap: 8px; min-width: min(520px, 56vw); }
.buyer-relation-panel.is-hidden { display: none; }
.buyer-relation-panel select, .buyer-relation-panel input { min-width: 0; flex: 1 1 130px; }
.buyer-relation-remove { margin-left: 4px; border: 0; padding: 0; color: var(--muted); background: transparent; font: inherit; cursor: pointer; }
.buyer-relation-remove:hover { color: var(--text); }
@media (max-width: 820px) { .buyer-relation-summary { grid-template-columns: 1fr; } .buyer-relation-controls { flex-wrap: wrap; } .buyer-relation-panel { min-width: 0; width: 100%; flex-wrap: wrap; } }
/* 크리에이터처럼 정체성이 중요한 상세에서만 쓰는 선택형 프로필 히어로. */
.influencer-profile-hero { display: flex; max-height: 320px; align-items: center; gap: 16px; margin: 0 0 18px; padding: 18px 0; border-block: 1px solid var(--line); overflow: hidden; opacity: 1; transform: translateY(0); transition: max-height 220ms cubic-bezier(.22, 1, .36, 1), gap 220ms cubic-bezier(.22, 1, .36, 1), margin 220ms cubic-bezier(.22, 1, .36, 1), padding 220ms cubic-bezier(.22, 1, .36, 1), border-color 160ms ease, opacity 160ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1); }
.influencer-profile-hero .influencer-avatar,
.influencer-profile-hero .influencer-avatar-placeholder { width: 56px; height: 56px; transition: width 220ms cubic-bezier(.22, 1, .36, 1), height 220ms cubic-bezier(.22, 1, .36, 1), opacity 150ms ease; }
.influencer-profile-hero h1 { transition: margin 220ms cubic-bezier(.22, 1, .36, 1), font-size 220ms cubic-bezier(.22, 1, .36, 1); }
.influencer-profile-hero p { max-height: 48px; overflow: hidden; opacity: 1; transform: translateY(0); transition: max-height 220ms cubic-bezier(.22, 1, .36, 1), margin 220ms cubic-bezier(.22, 1, .36, 1), opacity 150ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1); }
.record-detail-header.is-compact { padding: 8px 0; border-bottom: 1px solid var(--line); background: var(--bg); box-shadow: 0 6px 12px rgba(0, 0, 0, .035); }
.record-detail-header.is-compact .record-detail-context { margin-bottom: 4px; }
.record-detail-header.is-compact .record-detail-back { font-size: 11px; }
.record-detail-header.is-compact .influencer-profile-hero { max-height: 28px; min-width: 0; gap: 0; margin: 0; padding: 0; border-color: transparent; }
.record-detail-header.is-compact .influencer-avatar,
.record-detail-header.is-compact .influencer-avatar-placeholder,
.record-detail-header.is-compact .influencer-profile-hero p { max-height: 0; margin: 0; opacity: 0; transform: translateY(-4px); }
.record-detail-header.is-compact .influencer-avatar,
.record-detail-header.is-compact .influencer-avatar-placeholder { width: 0; height: 0; opacity: 0; }
.record-detail-header.is-compact .influencer-profile-hero h1 { margin: 0; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 960px) {
  .record-detail-header { top: 56px; }
  .record-detail-context { align-items: flex-start; }
  .record-detail-actions { flex-wrap: wrap; justify-content: flex-end; }
  .influencer-profile-hero { margin-bottom: 14px; padding: 14px 0; }
}
/* 핸들 자체가 인스타 프로필 링크다 — 헤더에서 링크를 따로 한 줄 차지하지 않게 하려는 것이라, 밑줄 없이 둔다. */
.influencer-profile-hero h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.08; letter-spacing: -0.05em; font-weight: 700; }
.influencer-profile-hero h1 a { color: inherit; text-decoration: none; }
.influencer-profile-hero h1 a:hover { text-decoration: underline; }
.influencer-profile-hero p { margin: 0; }
/* 인증 계정 마크 — 핸들 옆에 붙는 식별 정보라 글자 크기를 따라간다. 색은 img로 불러오는 SVG라
   CSS로 못 바꾼다(currentColor가 상속되지 않음) — verified.svg 안에 직접 박아뒀다. */
.influencer-verified-mark { width: 0.62em; height: 0.62em; margin-left: 6px; vertical-align: 0.12em; }
/* 목록 표에서는 글자가 작아 em으로 따라가면 8px까지 내려가 안 보인다 — 여기서만 크기를 못박는다.
   aspect-ratio와 object-fit은 칸이 좁아졌을 때 배지가 눌려 찌그러지는 걸 막는다(16x16 원형 배지라
   가로세로가 조금만 어긋나도 눈에 띈다). flex 컨테이너 안에 들어가도 줄어들지 않게 flex도 고정한다. */
.influencer-verified-mark { display: inline-block; aspect-ratio: 1 / 1; object-fit: contain; flex: 0 0 auto; }
.table .influencer-verified-mark { width: 15px; height: 15px; margin-left: 5px; vertical-align: -2px; }
/* 표시 이름은 핸들의 보조 정보라 확실히 작게 — 예전엔 18px이라 핸들과 비슷한 무게였다. */
.influencer-profile-name { margin-left: 10px; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.influencer-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface-muted); }
.influencer-avatar-placeholder { width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface-muted); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; text-align: center; }

.influencer-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.influencer-post-card { position: relative; min-width: 0; }
.influencer-post-card:hover { z-index: 5; }
.influencer-post-card-thumb { position: relative; aspect-ratio: 1 / 1; background: var(--line); overflow: hidden; border-radius: var(--card-radius) var(--card-radius) 0 0; }
.influencer-post-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 썸네일 위 배지 — 사진 위에 얹히므로 그림자와 불투명 배경으로 읽히게 한다. 고정됨은 오른쪽 위,
   협찬은 그 아래에 둔다(둘 다 있는 게시물이 있어서 겹치면 안 된다). */
.influencer-post-card-thumb .influencer-post-badge { position: absolute; right: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .22); }
.influencer-post-card-thumb .is-pinned { top: 6px; color: var(--cellaheal-white); background-color: var(--cellaheal-700); border: 1px solid var(--cellaheal-800); }
/* 협찬 배지 — 이력 판단에 바로 쓰이는 정보라 사진 위에서도 확실히 보이게 선명한 색으로 채운다.
   무상(제품만 받음)은 파랑, 유상(돈이 오감)은 초록으로 한눈에 갈라 보이게 한다. */
.influencer-post-card-thumb .is-gifted { top: 6px; color: var(--cellaheal-white); background-color: var(--cellaheal-dryless-dark); border-color: var(--cellaheal-dryless-dark); }
.influencer-post-card-thumb .is-paid { top: 6px; color: var(--cellaheal-white); background-color: var(--cellaheal-stressless-dark); border-color: var(--cellaheal-stressless-dark); }
/* 공구는 브랜드 협찬이 아니라 본인 판매라 노랑으로 따로 구분한다. 노랑은 흰 글씨가 안 읽혀서 글자는 검정. */
.influencer-post-card-thumb .is-groupbuy { top: 6px; color: var(--cellaheal-800); background-color: var(--cellaheal-flawless-dark); border-color: var(--cellaheal-flawless-dark); }
.influencer-post-card-thumb .is-pinned ~ .is-gifted,
.influencer-post-card-thumb .is-pinned ~ .is-groupbuy,
.influencer-post-card-thumb .is-pinned ~ .is-paid { top: 38px; }
/* 후보 정보 행에서 쓰는 공구 배지 — 썸네일 배지와 같은 색 체계를 따른다. */
.influencer-groupbuy-pill { color: var(--cellaheal-800); background-color: var(--cellaheal-flawless-light); border: 1px solid var(--cellaheal-flawless-dark); }
.influencer-post-card-body { padding: var(--panel-padding); display: flex; flex-direction: column; gap: 16px; flex: 1; }
.influencer-post-card-caption { position: relative; margin: 0; cursor: help; }
.influencer-post-card-caption-text { display: -webkit-box; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.influencer-post-card-caption[data-tooltip] { --tooltip-left: 0; --tooltip-top: calc(100% + var(--space-2)); --tooltip-bottom: auto; --tooltip-transform: none; --tooltip-width: 320px; }
.influencer-post-card-meta { margin: auto 0 0; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
.influencer-post-card-meta a { color: inherit; }
.influencer-post-card-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.influencer-post-card-meta-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.influencer-post-card-meta-stats span { display: flex; align-items: center; gap: 4px; }
.influencer-post-card-meta-icon { width: 14px; height: 14px; flex: 0 0 auto; opacity: .65; }

/* 사용/중지 토글 스위치. 체크박스 자체는 name이 없어서 전송되지 않고, 같은 폼의 hidden 필드가 "바꿀 값"을
   들고 있다 — 켜고 끄기가 한 엔드포인트에서 처리되고 값 파싱이 애매해지지 않는다. */
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { position: absolute; width: 40px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.switch-track { position: relative; width: 40px; height: 22px; flex: 0 0 auto; border-radius: 999px; background: var(--line-strong); transition: background .15s ease; }
.switch-track::before { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--cellaheal-white); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.switch input:checked ~ .switch-track { background: var(--accent); }
.switch input:checked ~ .switch-track::before { transform: translateX(18px); }
.switch input:focus-visible ~ .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled ~ .switch-track { opacity: .45; cursor: not-allowed; }
.switch-label { font-size: 13px; color: var(--muted); }
.switch input:checked ~ .switch-label { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-track::before { transition: none; }
}

/* 페르소나 행 인라인 편집 — 이름/Hook을 표 안에서 바로 고친다. */
.persona-edit-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.persona-edit-form input[name="label"] { width: 9rem; }
.persona-edit-form input[name="hookDescription"] { width: 22rem; max-width: 100%; }

/* ── 부스 게임 운영(K-beauty Expo) ────────────────────────────────────────────
   스태프가 현장에서 폰으로 쓰는 화면이다. 한 손으로 누르고, 줄 선 사람들 앞에서 힐끗 보고 판단한다 —
   그래서 버튼이 크고, 상태는 색면으로 알린다. */
.expo-search { display: flex; gap: 8px; margin-bottom: 16px; }
.expo-search { --control-height: var(--control-height-large); }
.expo-search input { flex: 1 1 auto; height: var(--control-height-large); font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; }
.expo-search .button { flex: 0 0 auto; height: var(--control-height-large); padding-inline: var(--space-5); }

.expo-result { display: grid; gap: 12px; }
/* 유효·사용됨·없음을 색면으로 가른다. 배지 하나로는 급한 자리에서 놓친다. */
.expo-result.is-used h2 { color: var(--cellaheal-spotless-dark); }
.expo-result h2 { margin: 0; }
.expo-code { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: 0.12em; }
.expo-facts { display: grid; gap: 8px; margin: 0; }
.expo-facts > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; }
.expo-facts dt { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.expo-facts dd { margin: 0; font-size: 15px; }
/* 되돌릴 수 없는 동작이라 화면에서 가장 큰 것이 이 버튼이다. */
.expo-use { --control-height: var(--control-height-hero); width: 100%; height: var(--control-height-hero); font-size: 17px; }
.expo-note { margin: 0; font-size: 12px; }

/* 티어는 할인율이 곧 등급이라 색으로 구분한다(30 핑크 / 50 레드 / 70 골드). */
.expo-tier { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.expo-tier.is-tier1 { background: var(--cellaheal-spotless-light); color: var(--cellaheal-spotless-dark); }
.expo-tier.is-tier2 { background: var(--cellaheal-red-light); color: var(--cellaheal-red-dark); }
.expo-tier.is-tier3 { background: var(--cellaheal-flawless-light); color: var(--cellaheal-poreless-dark); }

.expo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.expo-tile { display: grid; gap: 2px; }
.expo-tile-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.expo-tile strong { font-size: 22px; }
.expo-tile .muted { font-size: 11px; }

.expo-claim { display: flex; gap: 6px; align-items: center; }
.expo-claim input { flex: 1 1 auto; height: var(--control-height-compact); }
.expo-claim .button-quiet { flex: 0 0 auto; height: var(--control-height-compact); }

/* 숨긴 기록도 목록에 남긴다 — 숨긴 걸 다시 찾아 되돌려야 하기 때문이다. 대신 눈에 덜 걸리게 톤을 낮춘다. */
.is-hidden-row { color: var(--muted); background: var(--surface-muted); }
.is-hidden-row a { color: var(--muted); }
.expo-hidden-badge { background: var(--cellaheal-200); color: var(--cellaheal-600); }
.expo-row-sub { font-size: 11px; line-height: 1.4; }

/* ── 수출영업(해외 B2B) ────────────────────────────────────────────────────────
   색은 앱 전체가 쓰는 무채색 계열(--cellaheal-100~800)을 따른다. 브랜드 강조색(빨강)은
   상태 배지(.pill.bad·.status-dot)의 몫이라 일반 요소에 쓰면 "나쁨"으로 읽힌다.
   섹션 간격은 공용 .section-spaced(margin-top:18px)를 쓰므로 여기서 다시 정의하지 않는다. */

/* 완성도 게이지. 입력 품질이 곧 메일 품질이라, 무엇이 비었고 그게 왜 필요한지를 함께 놓는다.

   ⚠ 폭은 서버가 <style> 요소로 내보낸다. 인라인 style 속성은 CSP가 막는다(app.ts) —
   막히면 width:auto가 되어 완성도와 무관하게 항상 꽉 찬 것처럼 보인다.
   기본값 0으로 두어 폭 지정이 실패하면 '빈 게이지'로 보이게 한다. */
.export-gauge-progress { width: 100%; height: 10px; margin: 12px 0 16px; accent-color: var(--cellaheal-800); }
.export-gauge-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.export-gauge-item { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: start; }
/* 채운 항목은 배경으로 구분한다. 색을 쓰지 않는 이유는 "완료"가 상태 경고가 아니기 때문이다. */
.export-gauge-item p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; }
.export-gauge-mark { font-weight: 700; color: var(--cellaheal-300); }
.export-gauge-item.is-done .export-gauge-mark { color: var(--cellaheal-800); }
.export-gauge-weight { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 발송 차단 배너. 여기는 실제 경고라 상태색을 쓴다 — 저장은 됐지만 보낼 수는 없는 상태다. */
.export-readiness { margin: 0; font-size: 13px; }

/* 이 문구가 메일에 그대로 나간다는 경고. 라벨에 붙어야 쓰는 순간에 보인다.
   순수 빨강(--cellaheal-red-dark)은 너무 세서 입력 폼 전체가 오류처럼 보인다. */
.export-warn { color: var(--cellaheal-poreless-dark); font-style: normal; font-weight: 700; font-size: 11px; }

td.export-actions { text-align: right; white-space: nowrap; }
.export-actions-inner { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.export-actions-inner form { display: inline; }
.buyer-pipeline-table.data-table { table-layout: auto; min-width: 1500px; }
.buyer-pipeline-table th, .buyer-pipeline-table td { white-space: nowrap; }
.buyer-pipeline-table th:nth-child(2), .buyer-pipeline-table td:nth-child(2) { min-width: 280px; max-width: 380px; white-space: normal; }
.buyer-company-name { display: inline-flex; align-items: center; gap: 5px; }
.buyer-company-info { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; color: var(--muted); cursor: help; }
.buyer-company-info:focus-visible { border-radius: 50%; outline: 2px solid var(--cellaheal-800); outline-offset: 2px; }
.buyer-company-info img { width: 14px; height: 14px; }
.export-history-value { max-width: 320px; font-size: 12px; line-height: 1.5; color: var(--muted); word-break: break-word; }

/* 보류된 근거·브랜드도 목록에 남긴다. 지우는 대신 톤을 낮춘다.
   ⚠ 반드시 수출영업 표 안으로 한정한다 — 예전에 tr.is-inactive를 전역으로 뒀는데,
   그러면 같은 클래스를 쓰는 다른 화면의 행까지 회색이 된다. */
.export-table tr.is-inactive { color: var(--muted); background: var(--cellaheal-050); }

/* 목록 필터. 카드 안에 한 줄로 선다.
   flex-direction을 명시하는 이유: .card가 column이라 이걸 안 적으면 칸들이 세로로 쌓인다. */
.export-filter { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: end; }
.export-filter .field { flex: 1 1 160px; margin: 0; }
.export-filter .button { flex: 0 0 auto; }

/* 등급은 한 글자다. 색이 아니라 명도로 가른다 — A가 가장 진하고 C가 가장 옅다. */
.export-tier-badge { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 999px; background: var(--cellaheal-100); color: var(--cellaheal-500); font-size: 12px; font-weight: 700; }
.export-tier-A .export-tier-badge { background: var(--cellaheal-800); color: var(--cellaheal-white); }
.export-tier-B .export-tier-badge { background: var(--cellaheal-300); color: var(--cellaheal-800); }

.export-member-options { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; padding: 4px; }
.export-member-option { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.export-member-option:hover { background: var(--cellaheal-050); }
.export-member-option em { font-style: normal; color: var(--muted); font-size: 11px; }
.export-duplicate-warning { margin: 0; padding: 10px 12px; border: 1px solid var(--cellaheal-poreless-dark); border-radius: 8px; background: var(--cellaheal-poreless-light); color: var(--cellaheal-poreless-dark); font-size: 13px; }


/* ── 시딩 통계 ────────────────────────────────────────────────────────────────
   대시보드(재구매 분석)와 같은 짜임을 쓴다: 기간 토글 → KPI 카드 → 표.
   기간 토글은 .range-toggle을 그대로 재사용하므로 여기서 다시 정의하지 않는다.

   색은 이 앱의 무채색 계열(--cellaheal-100~800)을 쓴다. 브랜드 강조색(빨강)은
   상태 배지(pill.bad 등)의 몫이라 데이터 그래프에 쓰면 "나쁨"으로 읽힌다. */
.influencer-stats-custom { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 14px; }
.influencer-stats-custom .field { flex: 0 1 180px; }

/* 숫자는 오른쪽 정렬 + tabular-nums. 자릿수가 다른 값을 세로로 훑을 때 크기 비교가 되게 한다. */
.influencer-stats-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ⚠ 막대 폭은 인라인 style로 주면 안 된다 — style-src에 'unsafe-inline'이 없어 CSP가 style 속성을
   전부 막는다(app.ts). 막히면 width:auto가 되어 모든 막대가 트랙을 꽉 채운다.
   그래서 폭은 서버가 <style> 요소로 내보내고(그쪽엔 nonce가 붙는다) 여기서는 기본값만 둔다.
   기본값을 0으로 두는 이유도 같다: 폭 지정이 실패하면 '꽉 참'이 아니라 '빈 막대'로 보여야 한다. */
.influencer-funnel-table td { vertical-align: middle; }
.influencer-funnel-step { width: 26%; }
.influencer-funnel-bar-cell { width: 34%; padding-right: 18px; }
.influencer-funnel-track { display: block; width: 100%; height: 10px; border-radius: 999px; background: var(--cellaheal-100); overflow: hidden; }
.influencer-funnel-fill { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--cellaheal-800); }

/* 도넛 — 미진행 사유 분포. 조각 색은 회색 계단이다. 순위가 곧 밝기라 범례를 안 봐도 큰 조각이 구분된다.
   조각 길이는 stroke-dasharray '속성'으로 준다(SVG 표현 속성이라 CSP 차단 대상이 아니다). */
.influencer-donut-layout { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 24px; align-items: center; margin-top: 18px; }
.influencer-donut { display: block; width: 100%; max-width: 240px; }
.influencer-donut-track { fill: none; stroke: var(--cellaheal-100); }
.influencer-donut-slice { fill: none; stroke-linecap: butt; }
.influencer-donut-slice-0 { stroke: var(--cellaheal-800); }
.influencer-donut-slice-1 { stroke: var(--cellaheal-600); }
.influencer-donut-slice-2 { stroke: var(--cellaheal-500); }
.influencer-donut-slice-3 { stroke: var(--cellaheal-400); }
.influencer-donut-slice-4 { stroke: var(--cellaheal-300); }
.influencer-donut-slice-5 { stroke: var(--cellaheal-200); }
.influencer-donut-center-value { fill: var(--text); font-size: 13px; font-weight: 700; text-anchor: middle; }
.influencer-donut-center-label { fill: var(--muted); font-size: 5px; font-weight: 600; text-anchor: middle; letter-spacing: 0.06em; }
.influencer-donut-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.influencer-donut-legend li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; font-size: 13px; }
.influencer-donut-swatch { width: 12px; height: 12px; border-radius: 3px; }
.influencer-donut-swatch-0 { background: var(--cellaheal-800); }
.influencer-donut-swatch-1 { background: var(--cellaheal-600); }
.influencer-donut-swatch-2 { background: var(--cellaheal-500); }
.influencer-donut-swatch-3 { background: var(--cellaheal-400); }
.influencer-donut-swatch-4 { background: var(--cellaheal-300); }
.influencer-donut-swatch-5 { background: var(--cellaheal-200); }
.influencer-donut-legend-kind { color: var(--muted); font-size: 11px; }
.influencer-donut-legend-value { font-variant-numeric: tabular-nums; }

/* 수동 응답의 제안서 칸 묶음. 응답 내용과 시각적으로 갈라 둔다 — 앞은 "무슨 답이 왔나",
   뒤는 "제품을 어디로 보내나"라 성격이 다르다. 빈 칸으로 넘어갈 수 있는 자리라 required 표시가 없어,
   묶음 제목의 설명이 "지금 몰라도 된다"를 대신 알린다. */
.influencer-reply-fields { display: grid; gap: 10px; margin: 4px 0 0; }
.influencer-reply-fields legend { padding: 0 6px; font-size: 12px; font-weight: 700; }
.influencer-reply-fields legend .muted { font-weight: 500; }

@media (max-width: 960px) {
  .influencer-stage-row,
  .influencer-view-row,
  .influencer-toolbar,
  .influencer-bulk-actions,
  .influencer-panel,
  .influencer-group-menu,
  .influencer-name-form,
  .influencer-email-form,
  .influencer-stop-note,
  .expo-claim,
  .export-filter {
    --control-height: var(--control-height-touch);
  }

  .dashboard-summary-grid-contribution,
  .dashboard-summary-grid-ads,
  .dashboard-rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .dashboard-summary-grid-contribution,
  .dashboard-summary-grid-ads,
  .dashboard-rate-grid,
  .dashboard-summary-retention-grid,
  .influencer-settings-summary-grid,
  .influencer-tag-summary-grid,
  .b2b-statement-total { grid-template-columns: 1fr; }
}
.export-buyer-view-save { position: relative; }
.export-buyer-view-save > summary { list-style: none; cursor: pointer; }
.export-buyer-view-save > summary::-webkit-details-marker { display: none; }
.export-buyer-view-save-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-popover); display: grid; gap: 8px; width: 260px; padding: 12px; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--surface); box-shadow: var(--shadow); }
.export-buyer-view-save-panel .checkbox-row { font-size: 12px; }

/* 바이어 상세: 브랜드별 검색·신규 추가 */
.buyer-brand-row { display: flex; align-items: flex-start; gap: 8px; }
.buyer-brand-field { position: relative; min-width: 0; flex: 1; }
.buyer-brand-field input { width: 100%; }
.buyer-brand-options { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--z-popover); max-height: 240px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--cellaheal-white); box-shadow: var(--shadow); }
.buyer-brand-options.is-hidden { display: none; }
.buyer-brand-options [role="option"] { padding: 9px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
.buyer-brand-options [role="option"]:hover, .buyer-brand-options [aria-selected="true"] { background: var(--surface-muted); }
.buyer-relation-summary > button { align-self: start; }

#buyer-brand-drawer .drawer-header > button { flex-shrink: 0; white-space: nowrap; }

.buyer-contact-row { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.buyer-contact-row .split { align-items: flex-end; gap: 12px; }
.buyer-contact-row .split .field { flex: 1; min-width: 0; }
#buyer-contact-drawer .drawer-header > button { flex-shrink: 0; white-space: nowrap; }

#buyer-contact-drawer:not(.is-hidden) { display: flex; flex-direction: column; overflow: hidden; }
#buyer-contact-drawer .drawer-header { flex-shrink: 0; }
#buyer-contact-drawer [data-contact-form] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.buyer-contact-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px; }
.buyer-contact-save { flex-shrink: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.buyer-contact-save .button { width: 100%; }
.buyer-contact-delete { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Buyer detail: the outer columns stay fixed when a section enters edit mode. */
.buyer-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--space-5); align-items: start; }
.buyer-profile-form, .buyer-workspace-side { display: grid; min-width: 0; gap: var(--space-5); }
.buyer-info-section, .buyer-workspace-side > .card { min-width: 0; }
.buyer-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.buyer-section-heading h2 { margin: 0; }
.buyer-section-heading > button { flex-shrink: 0; }
.buyer-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin: 0; }
.buyer-facts > div { min-width: 0; }
.buyer-facts dt { color: var(--muted); font-size: 12px; margin-bottom: var(--space-1); }
.buyer-facts dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.buyer-facts-single { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-4); }
.buyer-edit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.buyer-edit-fields > .field { min-width: 0; align-content: start; }
.buyer-edit-fields > .full, .buyer-edit-actions { grid-column: 1 / -1; }
.buyer-edit-fields input, .buyer-edit-fields select, .buyer-edit-fields textarea { width: 100%; min-width: 0; }
.buyer-edit-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.buyer-edit-actions > span { margin-right: auto; font-size: 12px; }
.buyer-facts.is-hidden, .buyer-edit-fields.is-hidden { display: none; }
.buyer-pipeline-more { margin-top: var(--space-4); }
.buyer-workspace pre, .buyer-detail-stack pre, .buyer-source-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.buyer-activity-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.buyer-activity-list li + li { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.buyer-activity-list time { display: block; color: var(--muted); font-size: 12px; }
.buyer-activity-list p { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.buyer-info-section .buyer-relation-summary { grid-template-columns: minmax(0, 1fr) auto; }
.buyer-info-section .buyer-relation-workspace > .buyer-relation-summary > div { min-width: 0; }
.buyer-info-section .buyer-relation-values { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .buyer-workspace { grid-template-columns: minmax(0, 1fr); } .buyer-workspace-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .buyer-facts, .buyer-edit-fields, .buyer-workspace-side { grid-template-columns: minmax(0, 1fr); } .buyer-edit-actions > span { flex-basis: 100%; } }

.buyer-fact-wide { grid-column: 1 / -1; }
.buyer-secondary-actions { margin-top: var(--space-4); }
.buyer-secondary-actions > button { margin-top: var(--space-2); }
.buyer-detail-header .influencer-profile-hero > div { min-width: 0; }
.buyer-detail-header .influencer-profile-hero h1 { overflow-wrap: anywhere; }
.buyer-detail-header .influencer-profile-name { display: block; margin: var(--space-2) 0 0; }
.buyer-detail-header.is-compact .influencer-profile-name { display: none; }

.buyer-pipeline-drawer .form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.buyer-pipeline-drawer .drawer-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.buyer-info-section .buyer-relation-values .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; border-radius: var(--radius-sm); }
.buyer-info-section .buyer-relation-remove { flex-shrink: 0; }
.buyer-info-section .influencer-group-menu { max-width: 100%; }
.buyer-info-section .influencer-group-menu-foot input { min-width: 0; }
.buyer-info-section [data-relation-status]:empty { display: none; }
@media (max-width: 960px) {
  .buyer-detail-header::before { content: ''; position: absolute; top: -56px; left: 0; right: 0; height: 56px; background: var(--bg); pointer-events: none; }
}

/* Relations remain directly editable beneath each section's read/edit content. */
.buyer-related-field { --control-height: var(--control-height-compact); --control-font-size: var(--control-font-compact); --control-padding-inline: var(--control-padding-compact); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.buyer-related-field > div { min-width: 0; }
.buyer-related-field > div > strong { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.buyer-related-field > [data-relation-status] { grid-column: 1 / -1; margin: 0; }
.buyer-related-field .influencer-group-current { margin-top: var(--space-2); }
.buyer-related-field .influencer-group-current .buyer-relation-values { margin-top: 0; }
.buyer-related-field .influencer-group-trigger { border-radius: var(--radius-sm); }
.buyer-related-field .buyer-relation-values .pill { padding: var(--space-1) var(--space-2); font-size: 12px; font-weight: 500; }
.buyer-related-field .buyer-relation-remove { --control-height: var(--space-5); --control-padding-inline: 0; }

.buyer-detail-header .buyer-profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); max-height: 120px; }
.buyer-profile-meta .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }