.event-management-pane {
  --event-navy: #132b50;
  --event-blue: #2f6fdf;
  --event-blue-soft: #eef5ff;
  --event-line: #dbe5f2;
  --event-muted: #6d7f96;
  --event-surface: #f7f9fc;
  overflow: hidden;
}

.event-management-pane [hidden] {
  display: none !important;
}

.event-management-title {
  margin-bottom: 18px;
}

.event-management-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
  padding: 7px;
  border: 1px solid var(--event-line);
  border-radius: 18px;
  background: #f4f7fb;
}

.event-management-tabs button {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 94px;
  padding: 17px 20px 17px 22px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #60748e;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.event-management-tabs button::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 3px;
  border-radius: 0 5px 5px 0;
  background: transparent;
}

.event-management-tabs button > span,
.event-panel-heading > div > span,
.referral-card-heading > div > span,
.referral-progress-heading > div > span {
  color: #7890ae;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .13em;
}

.event-management-tabs button > b {
  color: inherit;
  font-size: 16px;
  line-height: 1.35;
}

.event-management-tabs button > small {
  overflow: hidden;
  color: #8392a5;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-management-tabs button:hover,
.event-management-tabs button:focus-visible {
  border-color: #cbd9ea;
  background: rgba(255, 255, 255, .72);
  outline: none;
}

.event-management-tabs button.active,
.event-management-tabs button[aria-selected="true"] {
  border-color: #cbdcf3;
  color: var(--event-navy);
  background: #fff;
  box-shadow: 0 9px 24px rgba(29, 67, 116, .09);
}

.event-management-tabs button.active::before,
.event-management-tabs button[aria-selected="true"]::before {
  background: var(--event-blue);
}

.event-management-panel {
  min-width: 0;
}

.event-panel-heading,
.referral-card-heading,
.referral-progress-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.event-panel-heading {
  margin-bottom: 14px;
  padding: 0 2px;
}

.event-panel-heading h3,
.referral-card-heading h4,
.referral-progress-heading h4 {
  margin: 5px 0 0;
  color: var(--event-navy);
  line-height: 1.35;
}

.event-panel-heading h3 {
  font-size: 19px;
}

.event-panel-heading p,
.referral-card-heading p,
.referral-progress-heading p {
  margin: 5px 0 0;
  color: var(--event-muted);
  font-size: 12px;
  line-height: 1.65;
}

.event-mission-setting {
  margin-top: 0;
}

.event-referral-heading {
  align-items: center;
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid #d5e1ef;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
}

#referral-rule-current-badge {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid #c9daef;
  border-radius: 999px;
  color: #4b6686;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
  background: #fff;
}

.referral-rule-workspace,
.referral-link-workspace,
.referral-progress-workspace {
  min-width: 0;
  margin-top: 14px;
  padding: 22px;
  border: 1px solid var(--event-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(27, 58, 99, .055);
}

.referral-card-heading h4,
.referral-progress-heading h4 {
  font-size: 18px;
}

#referral-rule-current-title {
  max-width: 48%;
  padding: 9px 12px;
  border-radius: 10px;
  color: #315b92;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
  background: var(--event-blue-soft);
}

.referral-rule-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.referral-rule-form label,
.referral-link-form label,
.referral-progress-tools label {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  color: #40546d;
  font-size: 12px;
  font-weight: 800;
}

.referral-rule-form input,
.referral-rule-form select,
.referral-link-form input,
.referral-link-form select,
.referral-progress-tools input,
.referral-progress-tools select {
  width: 100%;
  min-width: 0;
  height: 45px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #d4dfec;
  border-radius: 10px;
  color: #172e4e;
  font: inherit;
  font-weight: 700;
  background: #fff;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.referral-rule-form input:focus,
.referral-rule-form select:focus,
.referral-link-form input:focus,
.referral-link-form select:focus,
.referral-progress-tools input:focus,
.referral-progress-tools select:focus {
  border-color: #75a1e7;
  box-shadow: 0 0 0 3px rgba(47, 111, 223, .1);
}

.referral-rule-form label > small {
  min-height: 31px;
  color: #8593a5;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
}

.referral-tax-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #d7e4f4;
  border-radius: 13px;
  background: #f6f9fe;
}

.referral-tax-preview > span {
  flex: 0 0 auto;
  color: #516984;
  font-size: 11px;
  font-weight: 800;
}

.referral-tax-preview dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
  width: min(100%, 580px);
  margin: 0;
}

.referral-tax-preview dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 0 10px;
  border-left: 1px solid #d9e4f0;
}

.referral-tax-preview dt {
  color: #708198;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.referral-tax-preview dd {
  margin: 0;
  color: #203c62;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

#referral-rule-example-net {
  color: #1f63c9;
}

.referral-rule-actions {
  display: grid;
  grid-template-columns: minmax(190px, 280px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.referral-rule-actions .primary,
.referral-link-form .primary {
  min-height: 46px;
  border-radius: 11px;
}

.referral-link-form-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.referral-link-form-actions .primary {
  flex: 1 1 auto;
}

#cancel-referral-link-edit {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid #cfdcea;
  border-radius: 11px;
  color: #49627e;
  font-size: 11px;
  font-weight: 800;
  background: #fff;
  cursor: pointer;
}

#cancel-referral-link-edit:hover,
#cancel-referral-link-edit:focus-visible {
  border-color: #9eb7d2;
  background: #f4f8fc;
}

#cancel-referral-link-edit[hidden] {
  display: none !important;
}

.referral-rule-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.referral-rule-action-buttons .primary {
  flex: 1 1 auto;
}

#cancel-referral-rule-edit {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid #cbd8e8;
  border-radius: 11px;
  color: #526a86;
  font-size: 11px;
  font-weight: 850;
  background: #fff;
  cursor: pointer;
}

#cancel-referral-rule-edit:hover,
#cancel-referral-rule-edit:focus-visible {
  border-color: #8ba6c8;
  background: #f4f8fd;
  outline: none;
}

.referral-rule-actions .message,
.referral-link-workspace > .message,
.referral-progress-workspace > .message {
  margin: 0;
}

.referral-rule-history {
  margin-top: 16px;
  border-top: 1px solid #e3eaf3;
}

.referral-rule-history summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  color: #2c4768;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.referral-rule-history summary::-webkit-details-marker {
  display: none;
}

.referral-rule-history summary > span {
  color: #8593a5;
  font-size: 10px;
  font-weight: 600;
}

.referral-rule-history summary > i {
  margin-left: auto;
  color: #55749a;
  font-style: normal;
  font-size: 18px;
}

.referral-rule-history[open] summary > i {
  transform: rotate(45deg);
}

#referral-rule-list {
  display: grid;
  gap: 8px;
  padding: 0 0 12px;
}

.referral-rule-history-item {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) repeat(4, minmax(90px, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid #e0e8f2;
  border-radius: 11px;
  color: #425a76;
  font-size: 11px;
  background: #f9fbfd;
}

.referral-rule-history-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.referral-rule-history-item > div:last-child {
  grid-column: 2 / -1;
  text-align: right;
}

.referral-rule-history-item b,
.referral-rule-history-item strong {
  color: #183557;
}

.referral-rule-history-item span {
  color: #708198;
  line-height: 1.45;
}

.referral-link-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, .7fr) minmax(160px, .65fr);
  align-items: end;
  gap: 10px;
  margin-top: 18px;
}

.referral-link-picker {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.referral-link-picker:focus-within {
  position: relative;
  z-index: 2;
}

.referral-link-search-field {
  position: relative;
  min-width: 0;
}

.referral-link-matches {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 5px;
  max-height: 240px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #ccd9e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(27, 58, 99, .15);
}

.referral-link-matches[hidden],
.referral-link-picker select[hidden] {
  display: none;
}

.referral-link-matches button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #172d4b;
  text-align: left;
  cursor: pointer;
}

.referral-link-matches button:hover,
.referral-link-matches button:focus-visible {
  outline: 2px solid #b8d1f7;
  background: #edf4ff;
}

.referral-link-matches button strong {
  font-size: 12px;
}

.referral-link-matches button small {
  color: #647992;
  font-size: 10px;
  line-height: 1.4;
}

.referral-link-picker > small {
  min-height: 15px;
  color: #74869d;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

@media (min-width: 1101px) {
  .referral-link-form > label,
  .referral-link-form-actions {
    margin-bottom: 22px;
  }
}

.referral-link-workspace > .message {
  margin-top: 10px;
}

.referral-progress-heading {
  align-items: center;
}

#refresh-referral-progress {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #cedbea;
  border-radius: 10px;
  color: #355478;
  font-size: 11px;
  font-weight: 800;
  background: #fff;
  cursor: pointer;
}

.referral-progress-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.referral-progress-summary article {
  display: grid;
  gap: 6px;
  padding: 15px;
  border: 1px solid #dce6f1;
  border-radius: 13px;
  background: var(--event-surface);
}

.referral-progress-summary span {
  color: #77889d;
  font-size: 10px;
  font-weight: 800;
}

.referral-progress-summary strong {
  color: var(--event-navy);
  font-size: 20px;
  line-height: 1.2;
}

.referral-progress-summary article:nth-child(3) strong,
.referral-progress-summary article:nth-child(4) strong {
  color: #2265ca;
}

.referral-progress-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px);
  gap: 10px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid #e0e8f1;
  border-radius: 13px;
  background: #fafbfd;
}

.referral-progress-tools label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.referral-progress-tools label > span {
  white-space: nowrap;
}

.referral-progress-tools input,
.referral-progress-tools select {
  height: 40px;
}

.referral-progress-table {
  overflow-x: auto;
  margin-top: 14px;
  border: 1px solid #dce5ef;
  border-radius: 14px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.referral-progress-table-head,
.referral-progress-row {
  display: grid;
  grid-template-columns: minmax(112px, 1.15fr) minmax(112px, 1.15fr) 66px 66px 72px 72px minmax(92px, .85fr) minmax(82px, .75fr) minmax(92px, .85fr) 82px minmax(108px, .9fr);
  align-items: center;
  min-width: 1120px;
}

.referral-progress-table-head {
  min-height: 42px;
  border-bottom: 1px solid #dde6f0;
  color: #667b95;
  font-size: 10px;
  font-weight: 800;
  background: #f3f6fa;
}

.referral-progress-table-head span,
.referral-progress-row > * {
  min-width: 0;
  padding: 10px 8px;
  box-sizing: border-box;
  text-align: center;
}

.referral-progress-row {
  min-height: 66px;
  border-bottom: 1px solid #e7edf4;
  color: #344c69;
  font-size: 11px;
}

.referral-progress-row:last-child {
  border-bottom: 0;
}

.referral-progress-row:hover {
  background: #fbfdff;
}

.referral-progress-row .referral-rider-cell {
  display: grid;
  gap: 3px;
  text-align: left;
}

.referral-rider-cell b {
  overflow: hidden;
  color: #142e50;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-rider-cell small {
  overflow: hidden;
  color: #8796a8;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-review-warning {
  color: #a4511f !important;
  font-weight: 800;
  white-space: normal !important;
}

.referral-target-progress {
  display: grid;
  gap: 4px;
}

.referral-target-progress > b {
  color: #17385f;
  font-size: 10px;
  white-space: nowrap;
}

.referral-target-progress > span {
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: #e5edf7;
}

.referral-target-progress > span > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2f6fdf;
}

.referral-target-progress > small,
.referral-progress-row [data-label="세금"] small {
  color: #8494a8;
  font-size: 8px;
}

.referral-net-amount {
  color: #165fc7;
}

.referral-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 0 8px;
  border-radius: 999px;
  color: #315b8f;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
  background: #eaf2fd;
}

.referral-status-badge.is-achieved {
  color: #146344;
  background: #e7f7ef;
}

.referral-status-badge.is-held {
  color: #9a4f1f;
  background: #fff0e5;
}

.referral-status-badge.is-paid {
  color: #5a438d;
  background: #f0eafe;
}

.referral-status-badge.is-cancelled {
  color: #7a8797;
  background: #edf1f5;
}

.referral-progress-actions {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.referral-progress-actions button {
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid #cfdcea;
  border-radius: 7px;
  color: #365776;
  font-size: 9px;
  font-weight: 800;
  background: #fff;
  cursor: pointer;
}

.referral-progress-actions button.primary {
  border-color: #2f6fdf;
  color: #fff;
  background: #2f6fdf;
}

.referral-progress-actions button.danger {
  border-color: #efcfcd;
  color: #ae413a;
  background: #fff6f5;
}

.referral-action-complete,
.referral-action-review {
  color: #7b8ba0;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
}

.referral-action-review {
  color: #a4511f;
}

.referral-progress-empty {
  margin: 0;
  padding: 34px 20px;
  color: #8795a7;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 1100px) {
  .referral-rule-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .referral-link-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .event-management-title {
    margin-bottom: 12px;
  }

  .event-management-tabs {
    gap: 7px;
    margin-bottom: 16px;
    padding: 5px;
    border-radius: 14px;
  }

  .event-management-tabs button {
    min-height: 78px;
    padding: 13px 11px 13px 14px;
    border-radius: 10px;
  }

  .event-management-tabs button::before {
    top: 14px;
    bottom: 14px;
  }

  .event-management-tabs button > span {
    font-size: 8px;
    letter-spacing: .08em;
  }

  .event-management-tabs button > b {
    font-size: 13px;
  }

  .event-management-tabs button > small {
    font-size: 9px;
  }

  .event-panel-heading {
    margin-bottom: 10px;
  }

  .event-panel-heading h3 {
    font-size: 16px;
  }

  .event-referral-heading {
    align-items: flex-start;
    gap: 10px;
    padding: 15px;
    border-radius: 14px;
  }

  .event-referral-heading p {
    font-size: 11px;
  }

  #referral-rule-current-badge {
    padding: 6px 8px;
    font-size: 9px;
  }

  .referral-rule-workspace,
  .referral-link-workspace,
  .referral-progress-workspace {
    margin-top: 10px;
    padding: 16px;
    border-radius: 15px;
  }

  .referral-card-heading,
  .referral-progress-heading {
    gap: 10px;
  }

  .referral-card-heading h4,
  .referral-progress-heading h4 {
    font-size: 16px;
  }

  #referral-rule-current-title {
    display: none;
  }

  .referral-rule-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 15px;
  }

  .referral-rule-form label:last-child {
    grid-column: 1 / -1;
  }

  .referral-rule-form input,
  .referral-rule-form select,
  .referral-link-form input,
  .referral-link-form select {
    height: 43px;
    padding: 0 10px;
  }

  .referral-tax-preview {
    display: grid;
    gap: 9px;
    padding: 13px;
  }

  .referral-tax-preview dl {
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
  }

  .referral-tax-preview dl > div {
    padding: 7px 2px;
    border-top: 1px solid #e0e8f2;
    border-left: 0;
  }

  .referral-rule-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .referral-rule-history summary {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 13px 0;
  }

  .referral-rule-history summary > span {
    order: 3;
    width: 100%;
  }

  .referral-rule-history summary > i {
    order: 2;
  }

  .referral-rule-history-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .referral-link-form {
    grid-template-columns: 1fr;
    margin-top: 15px;
  }

  .referral-link-form-actions {
    width: 100%;
  }

  #refresh-referral-progress {
    min-height: 34px;
    padding: 0 10px;
    font-size: 10px;
  }

  .referral-progress-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
  }

  .referral-progress-summary article {
    padding: 12px;
  }

  .referral-progress-summary strong {
    font-size: 17px;
  }

  .referral-progress-tools {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .referral-progress-tools label {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .referral-progress-table {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .referral-progress-table-head {
    display: none;
  }

  .referral-progress-list {
    display: grid;
    gap: 10px;
  }

  .referral-progress-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding: 11px;
    border: 1px solid #dbe5f0;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(30, 60, 101, .05);
  }

  .referral-progress-row > * {
    display: grid;
    gap: 3px;
    padding: 7px;
    text-align: left;
  }

  .referral-progress-row > *::before {
    color: #8997a8;
    font-size: 8px;
    font-weight: 800;
  }

  .referral-progress-row > *:nth-child(1)::before { content: "추천 기사"; }
  .referral-progress-row > *:nth-child(2)::before { content: "초대 기사"; }
  .referral-progress-row > *:nth-child(3)::before { content: "배민 건수"; }
  .referral-progress-row > *:nth-child(4)::before { content: "쿠팡 건수"; }
  .referral-progress-row > *:nth-child(5)::before { content: "합계"; }
  .referral-progress-row > *:nth-child(6)::before { content: "목표"; }
  .referral-progress-row > *:nth-child(7)::before { content: "총 미션금"; }
  .referral-progress-row > *:nth-child(8)::before { content: "세금"; }
  .referral-progress-row > *:nth-child(9)::before { content: "실지급"; }
  .referral-progress-row > *:nth-child(10)::before { content: "상태"; }

  .referral-progress-row > *:nth-child(11) {
    grid-column: 1 / -1;
  }

  .referral-progress-row > *:nth-child(11)::before {
    content: "처리";
  }

  .referral-progress-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 430px) {
  .event-management-tabs button > small {
    display: none;
  }

  .event-management-tabs button {
    min-height: 65px;
  }

  .event-referral-heading {
    display: grid;
  }

  #referral-rule-current-badge {
    justify-self: start;
  }

  .referral-rule-form {
    grid-template-columns: 1fr;
  }

  .referral-rule-form label:last-child {
    grid-column: auto;
  }

  .referral-progress-row {
    grid-template-columns: 1fr;
  }

  .referral-progress-row > *:nth-child(11) {
    grid-column: auto;
  }
}

/* Only actionable friend-referral review items are shown here. Normal 0-count
   and not-yet-achieved milestones stay in the regular progress presentation. */
.referral-review-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  margin-top: 3px;
  padding: 4px 8px;
  border: 1px solid #efc994;
  border-radius: 8px;
  color: #8a4d12;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.35;
  text-align: left;
  background: #fff9ef;
  cursor: pointer;
}

.referral-review-toggle:hover,
.referral-review-toggle:focus-visible {
  border-color: #d99b49;
  background: #fff3df;
  outline: none;
}

.referral-review-toggle em {
  flex: 0 0 auto;
  color: #9c641f;
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.referral-review-toggle[aria-expanded="true"] em::after {
  content: " ↑";
}

.referral-review-toggle[aria-expanded="false"] em::after {
  content: " ↓";
}

.referral-progress-table.is-tiered .referral-progress-row > .referral-review-details {
  grid-column: 1 / -1;
  display: block;
  min-width: 0;
  margin: 0 8px 12px;
  padding: 14px;
  border: 1px solid #ead6b8;
  border-radius: 12px;
  color: #394f69;
  text-align: left;
  background: #fffaf2;
}

.referral-review-details-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid #f0dfc7;
}

.referral-review-details-head > div {
  display: grid;
  gap: 3px;
}

.referral-review-details-head b {
  color: #533719;
  font-size: 12px;
}

.referral-review-details-head p {
  margin: 0;
  color: #806b52;
  font-size: 9px;
  line-height: 1.55;
}

.referral-review-details-head > span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: #8a4d12;
  font-size: 9px;
  font-weight: 900;
  background: #ffedcf;
}

.referral-review-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.referral-review-item {
  display: grid;
  grid-template-columns: minmax(170px, .9fr) minmax(260px, 1.6fr) minmax(112px, auto);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #eadfce;
  border-radius: 10px;
  background: #fff;
}

.referral-review-period,
.referral-review-reason {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.referral-review-period > span {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  color: #596f88;
  font-size: 8px;
  font-weight: 900;
  background: #edf2f8;
}

.referral-review-period > span.is-baemin {
  color: #1761bd;
  background: #e7f1ff;
}

.referral-review-period > span.is-coupang {
  color: #9a5b0d;
  background: #fff1d8;
}

.referral-review-period > span.is-referral {
  color: #28733b;
  background: #eaf7ed;
}

.referral-review-period b {
  overflow-wrap: anywhere;
  color: #203b5c;
  font-size: 11px;
  line-height: 1.45;
}

.referral-review-reason strong {
  color: #8a4d12;
  font-size: 10px;
  line-height: 1.4;
}

.referral-review-reason p {
  margin: 0;
  color: #738299;
  font-size: 9px;
  line-height: 1.55;
}

.referral-review-item-action {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.referral-review-acknowledge {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d49b4f;
  border-radius: 9px;
  color: #7d470d;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
  background: #fff8ec;
  cursor: pointer;
}

.referral-review-acknowledge:hover,
.referral-review-acknowledge:focus-visible {
  border-color: #b97924;
  background: #ffedcf;
  outline: none;
}

.referral-review-acknowledge:disabled {
  cursor: wait;
  opacity: .65;
}

.referral-review-guide {
  color: #7a8798;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.5;
  text-align: right;
}

.referral-review-feedback {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid #efd3b1;
  border-radius: 9px;
  color: #8b4c15;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.55;
  background: #fff5e8;
}

.referral-review-feedback.success {
  border-color: #c9e4d5;
  color: #1d6d4b;
  background: #edf9f2;
}

@media (max-width: 720px) {
  .referral-review-toggle {
    margin-top: 5px;
  }

  .referral-progress-table.is-tiered .referral-progress-row > .referral-review-details {
    grid-column: 1 / -1;
    margin: 2px 0 4px;
    padding: 12px;
  }

  .referral-review-item {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .referral-review-item-action {
    justify-content: flex-start;
  }

  .referral-review-acknowledge {
    width: 100%;
  }

  .referral-review-guide {
    text-align: left;
  }
}

@media (max-width: 430px) {
  .referral-review-details-head {
    gap: 8px;
  }

  .referral-review-details-head p {
    font-size: 8px;
  }
}

/* Friend-referral milestones are configured as independent cumulative payout
   steps. The original single-target styles above remain as a safe fallback for
   an older cached page, while these rules drive the current tier editor. */
.referral-rule-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.referral-tier-editor {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #d9e5f2;
  border-radius: 14px;
  background: #f9fbfe;
}

.referral-tier-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.referral-tier-heading > div {
  display: grid;
  gap: 4px;
}

.referral-tier-heading b {
  color: #17375d;
  font-size: 13px;
}

.referral-tier-heading span {
  color: #76879c;
  font-size: 10px;
  line-height: 1.5;
}

.referral-tier-heading button,
.referral-tier-remove {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #cbd9ea;
  border-radius: 9px;
  color: #31577f;
  font-size: 10px;
  font-weight: 850;
  background: #fff;
  cursor: pointer;
}

.referral-tier-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.referral-tier-row {
  display: grid;
  grid-template-columns: 34px minmax(140px, 1fr) minmax(160px, 1fr) auto;
  align-items: end;
  gap: 9px;
  padding: 11px;
  border: 1px solid #e0e8f2;
  border-radius: 11px;
  background: #fff;
}

.referral-tier-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  margin-bottom: 7px;
  border-radius: 9px;
  color: #235fae;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  background: #eaf2fe;
}

.referral-tier-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #52667f;
  font-size: 10px;
  font-weight: 800;
}

.referral-tier-row input {
  width: 100%;
  height: 41px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid #d3deeb;
  border-radius: 9px;
  color: #172e4e;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  background: #fff;
  outline: none;
}

.referral-tier-row input:focus {
  border-color: #75a1e7;
  box-shadow: 0 0 0 3px rgba(47, 111, 223, .1);
}

.referral-tier-remove {
  min-width: 58px;
  height: 41px;
  color: #a04440;
  border-color: #ebd0ce;
  background: #fff8f7;
}

.referral-tier-tax-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(230px, 1fr));
  gap: 8px;
  width: min(100%, 760px);
}

.referral-tier-tax-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dde7f2;
  border-radius: 10px;
  background: #fff;
}

.referral-tier-tax-row b {
  grid-row: 1 / span 2;
  align-self: center;
  color: #1d5fbd;
  font-size: 12px;
  white-space: nowrap;
}

.referral-tier-tax-row span,
.referral-tier-tax-row small {
  color: #506985;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.45;
  text-align: right;
}

.referral-tier-tax-row small {
  color: #7c8da2;
}

.referral-rule-history-item {
  grid-template-columns: minmax(170px, .75fr) minmax(230px, 1.5fr) minmax(180px, .7fr);
  align-items: center;
}

.referral-rule-history-item > div:last-child {
  grid-column: auto;
}

.referral-rule-history-primary,
.referral-rule-history-tiers {
  align-content: center;
}

.referral-rule-history-status {
  display: flex !important;
  flex-flow: row wrap;
  gap: 5px !important;
  margin-bottom: 3px;
}

.referral-rule-history-status span {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #586f89;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.2;
  background: #edf2f7;
}

.referral-rule-history-status .is-current {
  color: #175fba;
  background: #e5f0ff;
}

.referral-rule-history-status .is-future {
  color: #6951a7;
  background: #f0ebff;
}

.referral-rule-history-status .is-past {
  color: #697789;
  background: #edf1f5;
}

.referral-rule-history-status .is-used {
  color: #8a5419;
  background: #fff1dc;
}

.referral-rule-history-status .is-unused {
  color: #267552;
  background: #e9f8f0;
}

.referral-rule-history-status .is-archived {
  color: #586779;
  background: #e9edf2;
}

.referral-rule-history-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 10px;
}

.referral-rule-history-toolbar button {
  padding: 7px 11px;
  border: 1px solid #d5deea;
  border-radius: 9px;
  background: #fff;
  color: #51647e;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.referral-rule-history-toolbar button[hidden] {
  display: none !important;
}

.referral-rule-history-actions {
  display: flex !important;
  flex-flow: row wrap;
  justify-content: flex-end;
  gap: 7px !important;
  text-align: right !important;
}

.referral-rule-history-actions p {
  flex: 1 0 100%;
  margin: 0;
  color: #75869a;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.5;
}

.referral-rule-history-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #c8d7e8;
  border-radius: 9px;
  color: #2d5f9b;
  font-size: 9px;
  font-weight: 900;
  background: #fff;
  cursor: pointer;
}

.referral-rule-history-actions button:hover,
.referral-rule-history-actions button:focus-visible {
  border-color: #77a1d7;
  background: #f1f7ff;
  outline: none;
}

.referral-rule-history-actions button.danger {
  border-color: #ecd0ce;
  color: #a3443f;
  background: #fff8f7;
}

.referral-rule-history-actions button:disabled {
  cursor: wait;
  opacity: .6;
}

.referral-rule-history-actions.is-locked {
  padding-left: 10px;
  border-left: 2px solid #ead5b6;
}

.referral-progress-table.is-tiered .referral-progress-table-head,
.referral-progress-table.is-tiered .referral-progress-row {
  grid-template-columns: minmax(112px, 1fr) minmax(112px, 1fr) 70px 70px 76px minmax(330px, 2.5fr) minmax(104px, .8fr);
  min-width: 980px;
}

.referral-milestone-cell {
  display: grid;
  gap: 6px;
  text-align: left !important;
}

.referral-overall-progress {
  display: grid;
  gap: 5px;
}

.referral-overall-progress > span {
  overflow: hidden;
  height: 5px;
  border-radius: 999px;
  background: #e5edf7;
}

.referral-overall-progress > span > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f6fdf, #58a0f0);
}

.referral-overall-progress > small {
  color: #72859d;
  font-size: 9px;
  font-weight: 800;
}

.referral-milestone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.referral-milestone-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid #d7e2ef;
  border-radius: 999px;
  color: #526b88;
  font-size: 9px;
  font-weight: 850;
  background: #f7f9fc;
  white-space: nowrap;
}

.referral-milestone-chip.is-scheduled {
  border-color: #bcd4f4;
  color: #215da9;
  background: #eaf3ff;
}

.referral-milestone-chip.is-held {
  border-color: #efd0b6;
  color: #9a541f;
  background: #fff3e9;
}

.referral-milestone-chip.is-paid {
  border-color: #cbe4d7;
  color: #16704b;
  background: #eaf8f1;
}

.referral-milestone-chip.is-cancelled {
  border-color: #dce2ea;
  color: #687589;
  background: #f3f5f8;
}

.referral-milestone-chip.is-review {
  border-color: #eed7ad;
  color: #945f13;
  background: #fff8e8;
}

.referral-milestone-chip b {
  color: inherit;
}

/* The referral payout is a third settlement source, visually distinct from
   Baemin/Coupang while reusing the established period and dashboard cards. */
#admin .period-platform-badge.is-referral,
#admin .dashboard-overdue-platform.is-referral {
  background: #eef8ee;
  color: #28733b;
  border-color: #cbe5d0;
}

#admin .dashboard-period-card .dashboard-platform-badge.is-referral {
  border-color: rgba(178, 235, 189, .52);
  color: #d6f6dc;
  background: rgba(45, 139, 67, .18);
}

.rider-monthly-platform.is-referral:before {
  background: #2e8a49;
}

.rider-monthly-period i.is-referral {
  color: #28733b;
  background: #eaf7ed;
}

.referral-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  padding: 8px;
  border: 1px solid #dce6f1;
  border-radius: 18px;
  background: #f6f9fd;
}

.referral-workspace-tabs button {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #60738b;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.referral-workspace-tabs button > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #42688f;
  font-size: 10px;
  font-weight: 900;
  background: #e7eef8;
}

.referral-workspace-tabs button b {
  color: #203a59;
  font-size: 13px;
}

.referral-workspace-tabs button small {
  overflow: hidden;
  color: #8392a4;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-workspace-tabs button.active {
  border-color: #bcd2ef;
  color: #245fae;
  background: #fff;
  box-shadow: 0 8px 20px rgba(37, 79, 125, .08);
}

.referral-workspace-tabs button:hover,
.referral-workspace-tabs button:focus-visible {
  border-color: #bcd2ef;
  background: #fff;
  outline: none;
}

.referral-workspace-tabs button.active > span {
  color: #fff;
  background: linear-gradient(135deg, #2e72db, #2457a8);
}

.referral-target-progress.is-tiered {
  display: grid;
  gap: 8px;
  text-align: left;
}

.referral-target-progress.is-tiered > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.referral-target-progress.is-tiered > span {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: #e5edf7;
}

.referral-target-progress.is-tiered > span > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f6fdf, #58a0f0);
}

.referral-target-progress.is-tiered .referral-milestone-chip {
  display: grid;
  grid-template-columns: auto auto;
  height: auto;
  padding: 6px 9px;
  border-radius: 10px;
}

.referral-target-progress.is-tiered .referral-milestone-chip small {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .referral-workspace-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 7px;
  }

  .referral-workspace-tabs button {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    min-height: 67px;
    padding: 8px 4px;
    text-align: center;
  }

  .referral-workspace-tabs button > span {
    grid-row: auto;
    width: 26px;
    height: 26px;
  }

  .referral-workspace-tabs button b {
    font-size: 11px;
    line-height: 1.35;
    word-break: keep-all;
  }

  .referral-workspace-tabs button small {
    display: none;
  }

  .referral-rule-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .referral-rule-actions {
    grid-template-columns: 1fr;
  }

  .referral-rule-history-item {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .referral-rule-history-tiers {
    padding: 9px 0;
    border-top: 1px solid #e7edf4;
    border-bottom: 1px solid #e7edf4;
  }

  .referral-rule-history-actions,
  .referral-rule-history-actions.is-locked {
    justify-content: flex-start;
    padding-left: 0;
    border-left: 0;
    text-align: left !important;
  }

  .referral-tier-heading {
    align-items: flex-start;
  }

  .referral-tier-row {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr);
  }

  .referral-tier-remove {
    grid-column: 2 / -1;
    width: 100%;
  }

  .referral-tax-preview {
    display: grid;
  }

  .referral-tier-tax-preview {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .referral-progress-table.is-tiered .referral-progress-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .referral-progress-table.is-tiered .referral-progress-row > *:nth-child(1)::before { content: "추천 기사"; }
  .referral-progress-table.is-tiered .referral-progress-row > *:nth-child(2)::before { content: "초대 기사"; }
  .referral-progress-table.is-tiered .referral-progress-row > *:nth-child(3)::before { content: "배민 건수"; }
  .referral-progress-table.is-tiered .referral-progress-row > *:nth-child(4)::before { content: "쿠팡 건수"; }
  .referral-progress-table.is-tiered .referral-progress-row > *:nth-child(5)::before { content: "합계"; }
  .referral-progress-table.is-tiered .referral-progress-row > *:nth-child(6)::before { content: "구간별 지급 현황"; }
  .referral-progress-table.is-tiered .referral-progress-row > *:nth-child(7)::before { content: "관리"; }

  .referral-progress-table.is-tiered .referral-progress-row > *:nth-child(6),
  .referral-progress-table.is-tiered .referral-progress-row > *:nth-child(7) {
    grid-column: 1 / -1;
  }

  .referral-progress-table.is-tiered .referral-progress-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 430px) {
  .referral-rule-form {
    grid-template-columns: 1fr;
  }

  .referral-rule-action-buttons {
    display: grid;
    grid-template-columns: 1fr;
  }

  #cancel-referral-rule-edit,
  .referral-rule-history-actions button {
    width: 100%;
  }

  .referral-tier-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .referral-tier-row label,
  .referral-tier-remove {
    grid-column: 2;
  }

  .referral-progress-table.is-tiered .referral-progress-row {
    grid-template-columns: 1fr;
  }

  .referral-progress-table.is-tiered .referral-progress-row > *:nth-child(6),
  .referral-progress-table.is-tiered .referral-progress-row > *:nth-child(7) {
    grid-column: auto;
  }
}