@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css");@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  --font-mono: "JetBrains Mono", "D2Coding", Consolas, monospace;
  --shadow: 0 1px 2px #0A1A330A, 0 8px 22px #0A1A3309;
  color: #0A1A33;
  background: #F2F1EC;
  font-family:
    "Pretendard Variable", "Pretendard", "Malgun Gothic", -apple-system,
    BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
  line-height: 1.75;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  max-width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: #0E2750;
  color: #FFFFFF;
  padding: 0 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
button:hover:not(:disabled) {
  background: #061328;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
button.primary {
  background: #0E2750;
  color: #FFFFFF;
}
button.primary:hover:not(:disabled) {
  background: #061328;
}
button.secondary {
  border: 1px solid #0E275033;
  background: #FFFFFF;
  color: #0A1A33;
}
button.secondary:hover:not(:disabled) {
  background: #FBFAF6;
}
button.primary:hover:not(:disabled) {
  border-color: #1c4273;
  background: #1c4273;
  color: #ffffff;
}
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #b7c2d2;
  border-radius: 6px;
  background: #ffffff;
  color: #1d2430;
  font-weight: 750;
  text-decoration: none;
}
.link-button:hover {
  border-color: #315f9d;
  color: #224f8a;
}
button.danger {
  border: 1px solid #FDA29B;
  background: #FFFFFF;
  color: #B42318;
}
button.danger:hover:not(:disabled) {
  background: #FEE4E2;
}
.page {
  width: calc(100% - 32px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 0 36px;
}
.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 12px;
  padding: 20px 22px;
  border: 1px solid #0E2750;
  border-radius: 8px;
  background: #0E2750;
  color: #F2F1EC;
  box-shadow: var(--shadow);
}
.app-header h1 {
  color: #F2F1EC;
}
.app-header .header-desc {
  margin: 4px 0 0;
  color: #F2F1EC;
  opacity: 0.85;
}
.app-header button {
  border: 1px solid #0E275033;
  background: #FFFFFF;
  color: #0A1A33;
}
.app-header button:hover:not(:disabled) {
  background: #FBFAF6;
  color: #0A1A33;
}
.app-header .badge.ok {
  background: #FBFAF61F;
  color: #F2F1EC;
}
.app-header .badge.warn {
  background: #FBFAF61F;
  color: #C9A86A;
}
.eyebrow {
  margin: 0 0 6px;
  color: #C9A86A;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  margin-bottom: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}
h2 {
  margin-bottom: 8px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
}
h3 {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.header-actions,
.button-row,
.gmail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.test-email-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
}
.test-email-inline span {
  color: #6E7A8F;
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}
.test-email-inline input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #FBFAF6;
  font: inherit;
}
.test-email-inline input:focus-visible {
  outline: 2px solid #0E275047;
  outline-offset: 1px;
}
.badge,
.mini-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}
.badge.ok {
  background: #0E275014;
  color: #0E2750;
}
.badge.warn {
  background: #C9A86A33;
  color: #A8853F;
}
.mini-badge {
  margin-bottom: 8px;
  background: #0E275014;
  color: #0E2750;
}
/* 저장하지 않은 변경이 있다는 표시(랜딩 전환 카드) — 배지 색만 경고 톤으로 */
.mini-badge.warn {
  background: #C9A86A33;
  color: #8A6A26;
}
.backend-notice,
.notice {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  line-height: 1.45;
}
.backend-notice {
  border: 1px solid #C9A86A;
  background: #C9A86A33;
}
.backend-notice small {
  color: #A8853F;
}
.notice {
  border: 1px solid #0E275021;
  background: #FBFAF6;
  color: #0A1A33;
}
.notice.success {
  border-color: #0E275033;
  background: #0E275014;
  color: #0E2750;
}
.notice.error {
  border-color: #FEE4E2;
  background: #FEE4E2;
  color: #B42318;
}
.settings-panel,
.status-monitor {
  margin-top: 16px;
  box-shadow: var(--shadow);
}
.settings-panel {
  padding: 16px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #FBFAF6;
  box-shadow: var(--shadow);
}
.settings-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}
.settings-head p {
  margin-bottom: 0;
  color: #6E7A8F;
  line-height: 1.45;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.settings-group {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e0e6ef;
  border-radius: 8px;
  background: #fbfcfe;
}
.checkbox-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: #253244;
  line-height: 1.45;
}
.checkbox-field input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.settings-note {
  margin: 0;
  color: #5b687a;
  font-size: 0.9rem;
  line-height: 1.45;
}
.connection-guide {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #fbfcfe;
}
.connection-guide-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.connection-guide-head p {
  margin-bottom: 0;
  color: #5b687a;
  line-height: 1.45;
}
.connection-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: connection-step;
}
.connection-steps li {
  min-height: 158px;
  padding: 10px;
  border: 1px solid #e0e6ef;
  border-left: 3px solid #315f9d;
  border-radius: 6px;
  background: #ffffff;
  counter-increment: connection-step;
}
.connection-steps strong,
.connection-steps span,
.connection-value span,
.connection-value code,
.connection-value small {
  display: block;
}
.connection-steps strong::before {
  content: counter(connection-step) ". ";
}
.connection-steps span {
  margin-top: 6px;
  color: #5b687a;
  font-size: 0.88rem;
  line-height: 1.4;
}
.connection-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.connection-requirements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.step-state {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
}
.step-state.ok {
  background: #1f7a4d1f;
  color: #145c39;
}
.step-state.todo {
  background: #b456001f;
  color: #8a4200;
}
.connection-steps code,
.connection-requirements code,
.landing-import code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #0E27500f;
  font-size: 0.85em;
  word-break: break-all;
}
.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.step-actions .link-button,
.step-actions button {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.82rem;
}
.redirect-uri-box {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 8px;
}
.redirect-uri-box code {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #d8e5f5;
  border-radius: 6px;
  background: #f4f8fd;
  font-size: 0.78rem;
  line-height: 1.3;
  word-break: break-all;
}
.redirect-uri-box button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #0E2750;
  border-radius: 6px;
  background: #0E2750;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.redirect-uri-box button:hover {
  background: #163a6b;
}
.send-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}
.send-toggle.on {
  background: #1f7a4d18;
  color: #145c39;
  border-color: #1f7a4d44;
}
.send-toggle.off {
  background: #b4560018;
  color: #8a4200;
  border-color: #b4560044;
}
.send-toggle input {
  margin: 0;
}
.flow-step.step-excluded {
  opacity: 0.62;
}
.flow-step.step-excluded::after {
  content: "이 메일은 발송에서 제외됨";
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #8a4200;
}
.set-hint {
  margin: 8px 0 0;
  font-size: 0.86rem;
  color: #5b687a;
}
/* 크기·배치는 아래 "재시작 칸 — select 한 줄, 버튼 두 개" 블록에서 정한다.
   여기서는 모양(테두리·색)만. 옛 규칙이 select를 160px로 묶고 버튼에 왼쪽 여백을 주는 바람에
   드롭다운이 버튼 줄보다 짧고 왼쪽이 어긋나 보였다. */
.restart-cell {
  white-space: nowrap;
}
.restart-cell select {
  padding: 0 8px;
  border: 1px solid #0E275033;
  border-radius: 6px;
  background: #fff;
  color: #0E2750;
}
.restart-cell .restart-btn {
  border: 1px solid #0E2750;
  border-radius: 6px;
  background: #fff;
  color: #0E2750;
  font-weight: 700;
  cursor: pointer;
}
.restart-cell .restart-btn:hover {
  background: #0E27500d;
}
.funnel-status {
  margin-top: 4px;
}
.contact-list-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #0E275022;
}
.funnel-status .panel-title h3 {
  margin: 0 0 4px;
}
/* 패널 접기/펴기 — 제목 자체가 버튼이라 누를 자리를 따로 찾지 않아도 된다. */
.panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.panel-toggle:hover { color: #0E2750; }
.panel-caret {
  display: inline-block;
  width: 1em;
  color: #8A93A5;
  font-size: 0.85em;
}
/* 접었을 때 위아래 여백까지 줄여 목록이 실제로 짧아 보이게 한다. */
.funnel-status.is-collapsed { margin-bottom: 4px; }
/* 유입 현황 조회 구간 — 달력 두 칸 + 빠른 선택. 좁은 화면에서는 아래로 접힌다. */
.traffic-period {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.traffic-period label {
  display: grid;
  gap: 4px;
}
.traffic-period label span {
  color: #6E7A8F;
  font-size: 0.78rem;
  font-weight: 800;
}
.traffic-period input[type="date"] {
  padding: 7px 10px;
  border: 1px solid #D9DDE6;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  color: #0E2750;
  background: #fff;
}
/* 기준 고르는 칸(첫 등록·최근 발송·다음 발송). 달력 칸과 같은 높이로 선다. */
.traffic-period select {
  padding: 7px 10px;
  border: 1px solid #D9DDE6;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  color: #0E2750;
  background: #fff;
}
/* 고객 퍼널 현황의 날짜 줄은 패널 제목 아래 한 줄로 따로 선다(유입 현황은 제목 오른쪽). */
.enrollment-period { margin: 4px 0 8px; }
.traffic-period-dash {
  color: #8A93A5;
  padding-bottom: 8px;
}
/* 숫자가 어느 기간의 것인지 표 바로 위에서 읽히게 한다. */
.traffic-range-line { margin-bottom: 10px; }
/* 채널 행 드래그 정렬 */
.funnel-status-table tr[draggable="true"] { cursor: grab; }
.funnel-status-table tr[draggable="true"]:active { cursor: grabbing; }
.drag-grip {
  color: #C2C9D6;
  margin-right: 6px;
  letter-spacing: -1px;
  user-select: none;
}
.funnel-status-table tr.is-dragging { opacity: 0.45; }
/* 놓을 자리 표시 — 행 위쪽에 선을 그어 "여기로 들어간다"를 보여준다. */
.funnel-status-table tr.is-drop-target td {
  box-shadow: inset 0 2px 0 0 #C9A86A;
}
/* 채널 이름: 평소엔 글자, 더블클릭하면 입력칸 */
.channel-name {
  cursor: text;
  border-bottom: 1px dashed transparent;
}
.channel-name:hover { border-bottom-color: #C2C9D6; }
.channel-name-input {
  width: 100%;
  max-width: 220px;
  padding: 4px 8px;
  border: 1.5px solid #C9A86A;
  border-radius: 6px;
  font: inherit;
}
.funnel-status .panel-title p {
  margin: 0;
  color: #5b687a;
}
.series-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.series-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.series-chip.auto {
  background: #1f7a4d1a;
  color: #145c39;
}
.series-chip.manual {
  background: #0E27501a;
  color: #0E2750;
}
.table-scroll {
  overflow-x: auto;
  margin-top: 12px;
}
.funnel-status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.funnel-status-table th,
.funnel-status-table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid #eef1f6;
  vertical-align: top;
}
.funnel-status-table th {
  font-size: 0.8rem;
  color: #6E7A8F;
  font-weight: 700;
  white-space: nowrap;
}
.funnel-status-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.funnel-status-table th.sortable:hover {
  color: #0E2750;
}
.funnel-status-table th.sortable.active {
  color: #0E2750;
}
/* 퍼널(시리즈) 열 아래 한 줄 — 이 사람이 "지금" 붙어 있는 퍼널인지 보여준다.
   같은 사람이 여러 퍼널에 걸치면 줄이 여러 개 생기므로 이 표시가 없으면 구분이 안 된다. */
.funnel-status-table .series-state {
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}
.funnel-status-table .series-state.on { color: #1F7A4D; }
.funnel-status-table .series-state.off { color: #8A93A5; font-weight: 600; }
.funnel-status-table .sub {
  margin-top: 2px;
  font-size: 0.78rem;
  color: #8894a5;
  word-break: break-all;
}
/* 표 머리의 보조 라벨(「/ 순방문」). 본 라벨 옆에 붙어야지 줄이 갈리면 칸 이름이 둘로 읽힌다. */
.funnel-status-table th .sub {
  display: inline;
  margin: 0;
  word-break: keep-all;
}
.send-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.send-badge.ok {
  background: #1f7a4d1f;
  color: #145c39;
}
.send-badge.warn {
  background: #b456001f;
  color: #8a4200;
}
.send-badge.neutral {
  background: #0E275014;
  color: #5b687a;
}
.connection-requirements div {
  min-height: 96px;
  padding: 10px;
  border: 1px solid #d8e5f5;
  border-radius: 6px;
  background: #f4f8fd;
}
.connection-requirements strong,
.connection-requirements span {
  display: block;
}
.connection-requirements strong {
  color: #1d2430;
}
.connection-requirements span {
  margin-top: 6px;
  color: #5b687a;
  font-size: 0.88rem;
  line-height: 1.4;
}
.connection-value {
  display: block;
  min-height: 106px;
  padding: 10px;
  border: 1px solid #e0e6ef;
  border-radius: 6px;
  background: #ffffff;
}
.connection-value.ok {
  border-color: #bbdfc8;
  background: #effaf2;
}
.connection-value.warn {
  border-color: #f0d38a;
  background: #fff8df;
}
.connection-value span {
  color: #5b687a;
  font-size: 0.82rem;
  font-weight: 850;
}
.connection-value code {
  margin: 6px 0;
  overflow-wrap: anywhere;
  white-space: normal;
  color: #1d2430;
  font-family: inherit;
  font-weight: 800;
}
.connection-value input {
  margin: 6px 0;
}
.connection-value small,
.sensitive-note {
  color: #5b687a;
  line-height: 1.4;
}
.sensitive-note {
  margin: 0;
  font-size: 0.88rem;
}
.automation-control {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #ffffff;
}
.automation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.automation-head strong,
.automation-head span,
.automation-stat strong,
.automation-stat span,
.followup-preview strong,
.followup-preview span {
  display: block;
}
.automation-head p {
  margin: 4px 0 0;
  color: #5b687a;
  line-height: 1.45;
}
.automation-buttons {
  justify-content: flex-end;
}
.automation-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.automation-stat {
  min-height: 92px;
  padding: 10px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #FBFAF6;
}
.advanced-settings {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.status-monitor {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.monitor-item {
  min-height: 88px;
  padding: 10px 12px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #FBFAF6;
}
.monitor-item.ok {
  border-color: #0E275033;
  background: #0E275014;
}
.monitor-item.warn {
  border-color: #C9A86A;
  background: #C9A86A33;
}
.monitor-item.focus {
  border-color: #0E275047;
  background: #0E275014;
}
.monitor-item.neutral {
  background: #FBFAF6;
}
.monitor-item span,
.monitor-item small {
  display: block;
}
.monitor-item span {
  color: #6E7A8F;
  font-size: 0.82rem;
  font-weight: 850;
}
.monitor-item strong {
  display: block;
  margin: 6px 0;
  font-size: 1.12rem;
}
.monitor-item small {
  color: #6E7A8F;
  line-height: 1.4;
}
.workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.workflow-card,
.work-panel,
.flow-step {
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #FBFAF6;
  box-shadow: var(--shadow);
}
.workflow-card {
  display: grid;
  gap: 10px;
  min-height: 205px;
  padding: 14px;
}
.workflow-card.next {
  border-color: #0E2750;
  box-shadow: 0 0 0 2px #0E27501A;
}
/* 위(카드)-아래(탭) 동기화: 활성 탭 카드 강조 */
.workflow-card[role="button"] { cursor: pointer; }
.workflow-card[role="button"]:hover { border-color: #0E2750; }
.workflow-card.active {
  border-color: #0E2750;
  background: #0E27500D;
  box-shadow: 0 0 0 2px #0E2750;
}
.workflow-card:focus-visible {
  outline: 2px solid #C9A86A;
  outline-offset: 2px;
}
.workflow-card-cta { width: 100%; }
.workflow-card p {
  min-height: 42px;
  margin-bottom: 0;
  color: #6E7A8F;
  line-height: 1.45;
}
.workflow-card strong {
  min-height: 22px;
  color: #0E2750;
  font-size: 0.9rem;
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0E2750;
  color: #FBFAF6;
  font-size: 0.86rem;
  font-weight: 850;
}
.layout {
  display: block;
}
.work-panel {
  padding: 18px;
}
.field {
  display: grid;
  gap: 6px;
}
.field span {
  color: #6E7A8F;
  font-size: 0.86rem;
  font-weight: 800;
}
.field small {
  color: #5b687a;
  font-size: 0.82rem;
  line-height: 1.4;
}
input,
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid #0E275033;
  border-radius: 6px;
  background: #FFFFFF;
  color: #0A1A33;
}
input {
  min-height: 38px;
  padding: 0 10px;
}
select {
  min-height: 38px;
  padding: 0 34px 0 10px;
}
textarea {
  padding: 10px;
  line-height: 1.5;
  resize: vertical;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.tab {
  flex: 0 1 auto;
  min-height: 40px;
  border: 1px solid transparent;
  background: transparent;
  padding: 8px 14px;
  color: #6E7A8F;
  font-size: 16px;
  font-weight: 700;
}
.tab:hover:not(:disabled) {
  background: #FBFAF6;
  color: #0A1A33;
}
.tab.active {
  border-color: #0E275033;
  background: #C9A86A33;
  color: #0E2750;
}
.tab.active:hover:not(:disabled) {
  background: #C9A86A33;
  color: #0E2750;
}
.tab-panel {
  padding-top: 18px;
}
.panel-title {
  display: grid;
  /* 오른쪽 칸을 `auto`로 두면 트랙이 **max-content**(= 안의 것이 한 줄로 다 펴진 너비)를
     요구한다. 시리즈 필터처럼 칩이 여덟 개씩 붙는 자리에서는 그 요구가 화면보다 커져
     제목 칸(minmax(0,1fr))이 0에 가깝게 눌리고, 제목이 세로로 한 글자씩 선다(2026-08-23 실제 사고).
     minmax(0, auto)로 두면 넘칠 때 오른쪽이 줄어들어 안에서 줄바꿈한다. */
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
/* 필터 줄은 제목 옆이 아니라 **제 줄**을 쓴다.
   좁은 칸에서 칩이 여러 줄로 접히면 제목 옆이 들쭉날쭉해지고, 무엇보다 이건 바로 아래 표를
   거르는 장치라 표 위에 가로로 펼쳐져 있는 편이 읽기도 쉽다. */
.panel-title.has-legend {
  grid-template-columns: minmax(0, 1fr);
}
.panel-title.has-legend .series-legend {
  margin-top: 4px;
}
.panel-title p {
  margin-bottom: 0;
  color: #6E7A8F;
  line-height: 1.45;
}
.summary-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.inline-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #0E275014;
  color: #0E2750;
}
.inline-status span {
  color: #0E2750;
}
.inline-status.ok {
  border-color: #1f7a4d55;
  background: #1f7a4d14;
  color: #145c39;
}
.inline-status.ok span {
  color: #145c39;
}
.inline-status.warn {
  border-color: #b4560055;
  background: #b4560014;
  color: #8a4200;
}
.inline-status.warn span {
  color: #8a4200;
}
.landing-import {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #0E275033;
  border-left: 3px solid #315f9d;
  border-radius: 10px;
  background: #FBFAF6;
}
.landing-import .connection-guide-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 12px;
  align-items: start;
}
.landing-import .connection-guide-head h3 {
  margin: 0 0 4px;
}
.landing-import .connection-guide-head p {
  margin: 0;
  color: #5b687a;
  line-height: 1.45;
}
.landing-import .inline-status {
  margin-bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.landing-source {
  display: grid;
  gap: 4px;
}
.landing-source span {
  font-weight: 700;
  font-size: 0.9rem;
  color: #0E2750;
}
.landing-source input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #ffffff;
  font-size: 0.92rem;
}
@media (max-width: 720px) {
  .landing-import .connection-guide-head {
    grid-template-columns: minmax(0, 1fr);
  }
}
.contact-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #FBFAF6;
}
.contact-actions strong,
.contact-actions span {
  display: block;
}
.contact-actions span {
  margin-top: 4px;
  color: #6E7A8F;
  font-size: 0.9rem;
}
.import-review {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #FBFAF6;
}
.import-review-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}
.import-review h3 {
  margin-bottom: 4px;
  font-size: 1.08rem;
}
.import-review p {
  margin-bottom: 0;
  color: #6E7A8F;
  line-height: 1.45;
}
.import-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.import-stats div {
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #FBFAF6;
}
.import-stats span,
.import-stats strong,
.import-field small {
  display: block;
}
.import-stats span {
  margin-bottom: 4px;
  color: #6E7A8F;
  font-size: 0.84rem;
  font-weight: 800;
}
.import-stats strong {
  color: #0A1A33;
  font-size: 1.25rem;
}
.mapping-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.import-field small {
  min-height: 20px;
  color: #6E7A8F;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.import-help {
  padding: 10px 12px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #FBFAF6;
}
.import-preview table {
  min-width: 680px;
}
.summary-item {
  min-height: 78px;
  padding: 12px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #FBFAF6;
}
.summary-item span {
  display: block;
  margin-bottom: 6px;
  color: #6E7A8F;
  font-size: 0.86rem;
  font-weight: 800;
}
.summary-item strong {
  font-size: 1.55rem;
}
/* 요약 카드 밑에 붙는 보조 수치(페이지뷰 기준 전환율). 위 라벨보다 작고 아래 여백은 없다. */
.summary-item .sub {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #8A93A5;
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid #0E275033;
  border-radius: 8px;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid #0E275014;
  text-align: left;
  vertical-align: top;
}
th {
  background: #F2F1EC;
  color: #6E7A8F;
  font-size: 0.84rem;
  font-weight: 850;
}
td {
  color: #0A1A33;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.select-col {
  width: 48px;
  text-align: center;
}
.select-col input {
  width: 18px;
  min-height: 18px;
  accent-color: #0E2750;
}
.selected-row td {
  background: #0E275014;
}
tbody tr:last-child td {
  border-bottom: 0;
}
.empty,
.table-note {
  margin: 0;
  padding: 16px;
  border: 1px dashed #0E275033;
  border-radius: 8px;
  color: #6E7A8F;
  line-height: 1.5;
}
.table-note {
  border: 0;
}
.flow-list {
  display: grid;
  gap: 14px;
}
.flow-add-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.set-manager {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #c9d8ec;
  border-radius: 8px;
  background: #f7fbff;
}
.set-manager-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  gap: 12px;
  align-items: start;
}
.set-manager-head .button-row {
  justify-content: flex-end;
  min-width: 0;
}
.set-manager-head p {
  margin-bottom: 0;
  color: #5b687a;
  line-height: 1.45;
}
.set-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) minmax(140px, 0.7fr) minmax(220px, 1.3fr);
  gap: 10px;
}
.set-options {
  display: grid;
  gap: 8px;
}
.series-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid #d8e5f5;
  border-radius: 6px;
  background: #ffffff;
}
.series-toggle input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
}
.series-toggle strong,
.series-toggle small {
  display: block;
}
.series-toggle strong {
  color: #1d2430;
}
.series-toggle small {
  margin-top: 4px;
  color: #5b687a;
  line-height: 1.4;
}
.set-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.set-summary span {
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid #d8e5f5;
  border-radius: 6px;
  background: #ffffff;
  color: #40516a;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.flow-help {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #FBFAF6;
  color: #6E7A8F;
  line-height: 1.45;
}
.flow-help strong {
  color: #0A1A33;
}
.flow-followup-off {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #ead08a;
  border-radius: 8px;
  background: #fff8df;
  color: #4d5c6f;
  line-height: 1.45;
}
.flow-followup-off strong {
  color: #1d2430;
}
.flow-step {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #0E275033;
  border-radius: 8px;
  background: #FBFAF6;
}
.flow-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.flow-head p {
  margin-bottom: 0;
  color: #6E7A8F;
  line-height: 1.45;
}
.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.schedule-grid {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}
.file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #0E275033;
  border-radius: 6px;
  background: #FBFAF6;
  font-weight: 750;
  cursor: pointer;
}
.file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.gmail-actions {
  margin-bottom: 16px;
}
.checklist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.checklist div {
  min-height: 96px;
  padding: 12px;
  border: 1px solid #C9A86A;
  border-radius: 8px;
  background: #C9A86A33;
}
.checklist div.done {
  border-color: #0E275033;
  background: #0E275014;
}
.checklist strong,
.checklist span {
  display: block;
}
.checklist strong {
  margin-bottom: 6px;
}
.checklist span {
  color: #6E7A8F;
  font-size: 0.9rem;
  line-height: 1.45;
}
@media (max-width: 1120px) {
  .status-monitor {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
  }

  .workflow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .connection-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .connection-requirements,
  .connection-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .set-grid,
  .set-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .page {
    width: min(100% - 24px, 1360px);
    padding-top: 18px;
  }

  .app-header,
  .panel-title,
  .settings-head,
  .connection-guide-head,
  .automation-head,
  .set-manager-head,
  .import-review-head,
  .flow-head,
  .contact-actions {
    grid-template-columns: 1fr;
  }

  .set-manager-head .button-row {
    justify-content: flex-start;
  }

  .workflow,
  .status-monitor,
  .summary-row,
  .import-stats,
  .mapping-grid,
  .checklist,
  .connection-steps,
  .connection-requirements,
  .connection-values,
  .set-grid,
  .set-summary,
  .flow-grid {
    grid-template-columns: 1fr;
  }

  .status-monitor {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
  }

  h1 {
    font-size: 1.75rem;
  }

  .automation-buttons {
    justify-content: flex-start;
  }

  .flow-add-row {
    justify-content: stretch;
  }

  .flow-add-row button {
    width: 100%;
  }
}
/* 결과메일 미리보기 (52분기 D0/D2/D4 HTML 렌더) */
.preview-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 12px 0 8px;
}
.preview-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #55617a;
}
.preview-controls select,
.preview-controls input {
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid #d5d9e2;
  border-radius: 8px;
  font-size: 14px;
}
.preview-controls button {
  height: 38px;
}
.preview-branch {
  margin: 4px 0 12px;
  font-size: 13px;
  color: #8a6d2f;
  background: #faf6ec;
  border: 1px solid #ecdfc2;
  border-radius: 8px;
  padding: 8px 12px;
}
.mail-preview {
  border: 1px solid #e2e5ec;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #fff;
}
.mail-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: #f5f6f9;
  border-bottom: 1px solid #e2e5ec;
}
.mail-preview-head strong {
  font-size: 14px;
  color: #1a2230;
}
.mail-preview-subject {
  font-size: 13px;
  color: #55617a;
}
.preview-missing {
  font-size: 12px;
  color: #b23b3b;
  background: #fdecec;
  border-radius: 6px;
  padding: 2px 8px;
}
.mail-preview-frame {
  width: 100%;
  height: 640px;
  border: 0;
  display: block;
  background: #fbfaf6;
}
.series-vars-card {
  margin: 12px 0;
  padding: 16px 18px;
  border: 1px solid #C9A86A;
  border-radius: 12px;
  background: #fbf7ee;
}
.series-vars-card h3 { margin: 0 0 4px; }
.series-vars-card code {
  background: #efe6d2;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
/* 세미나 기수 운영 카드 — 기간 시작 → 초대 → 특전 → 종료·복귀를 순서대로 밟는 패널 */
.seminar-ops {
  margin-top: 14px;
  padding: 14px 16px;
  border-top: 1px dashed #d8c9a4;
}
.seminar-ops-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.seminar-ops-head h4 { margin: 0; font-size: 0.98rem; }
/* 랜딩 → 세미나 퍼널 연결 상태(숫자로 보여주는 자가진단) */
.seminar-landing {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d9dee8;
  background: #fff;
}
.seminar-landing.ok { border-color: #1f7a4d55; background: #f4fbf7; }
.seminar-landing.warn { border-color: #C9A86A; background: #fdfbf6; }
.seminar-landing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.seminar-landing-head a { font-weight: 700; color: #0E2750; }
.seminar-landing p { margin: 6px 0 0; }
.seminar-ops-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
  color: #3c4a5c;
  line-height: 1.6;
}
.seminar-ops-steps b { color: #0E2750; }
.seminar-ops-steps .button-row { margin-top: 6px; }
/* 선택 명단을 원하는 퍼널로 한 번에 보내기(일괄 작업 바 안) */
.bulk-move {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 10px 12px;
  border: 1px solid #d9dee8;
  border-radius: 10px;
  background: #fbfcfe;
}
.bulk-move-label { font-size: 0.85rem; font-weight: 700; color: #0E2750; }
.bulk-move select { min-width: 240px; }
.bulk-move .sub { flex-basis: 100%; margin: 0; }
/* 시리즈별 명단 엑셀 불러오기 카드 */
.series-import {
  margin: 10px 0 14px;
  padding: 14px 16px;
  border: 1px dashed #C9A86A;
  border-radius: 12px;
  background: #fdfbf6;
}
.series-import-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.series-import-head p { margin: 4px 0 0; }
.series-import-preview {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ecdfc4;
  font-size: 0.9rem;
}
.series-import-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 4px;
}
.series-import-controls .field { min-width: 220px; }
/* 시리즈 필터(명단 범례) — 누르면 그 퍼널 명단만 본다 */
.series-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid #d9dee8;
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  color: #5b687a;
  cursor: pointer;
}
.series-filter-btn.on {
  border-color: #0E2750;
  color: #0E2750;
  background: #eef2f8;
}
.html-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}
.html-live-wrap .html-live-preview {
  height: 420px;
  margin-top: 6px;
  border: 1px solid #d9dee8;
  border-radius: 10px;
}
/* 수신인별 미리보기 (flow 탭) */
.recipient-preview {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e2e5ec;
}
.current-badge {
  font-size: 12px;
  font-weight: 700;
  color: #0E2750;
  background: #C9A86A;
  border-radius: 6px;
  padding: 2px 8px;
}
.mail-preview.is-current {
  border-color: #C9A86A;
  box-shadow: 0 0 0 2px rgba(201, 168, 106, 0.35);
}
.mail-preview-text {
  margin: 0;
  padding: 14px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
  color: #1a2230;
  background: #fbfaf6;
}
/* 상태 모니터 클릭형 타일 (첫 메일 자동 발송 토글) */
.monitor-item.clickable {
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.monitor-item.clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 39, 80, 0.12);
}
.monitor-item.clickable:focus-visible {
  outline: 2px solid #C9A86A;
  outline-offset: 2px;
}
.monitor-item.clickable::after {
  content: "⤾";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 13px;
  opacity: 0.5;
}
.monitor-item.clickable { position: relative; }
/* 고객 퍼널 현황 행별 삭제 버튼 */
.danger-btn {
  background: #fff;
  color: #b23b3b;
  border: 1px solid #e6b3b3;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.danger-btn:hover {
  background: #fdecec;
  border-color: #b23b3b;
}
/* 고객 퍼널 현황 관리 버튼 (비활성화/활성화) */
.manage-cell { white-space: nowrap; }
.manage-cell .mini-btn,
.manage-cell .danger-btn { margin-right: 4px; }
.mini-btn {
  background: #fff;
  color: #55617a;
  border: 1px solid #d5d9e2;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.mini-btn:hover {
  background: #f2f4f8;
  border-color: #9aa4b5;
}
/* ── 시리즈 탭: 이 시리즈 고객현황 요약 ── */
.series-funnel-summary {
  margin: 18px 0 8px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e2e5ec;
  border-radius: 12px;
}
.series-funnel-summary .summary-row { margin-top: 8px; }
/* ── 각 메일 위 대기 고객 명단 ── */
.step-waiting {
  padding: 10px 14px;
  background: #f7f9fc;
  border-bottom: 1px solid #e6eaf1;
}
.step-waiting.empty-waiting {
  background: #fafbfd;
  color: #8a93a6;
}
.step-waiting-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.step-waiting-head {
  font-size: 13px;
  font-weight: 700;
  color: #3a475e;
}
.waiting-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  /* 한 단계에 수십 명이 몰리면 화면을 통째로 차지한다 — 스크롤로 가둔다 */
  max-height: 220px;
  overflow-y: auto;
  align-content: flex-start;
  /* stretch(기본)면 한 줄의 모든 칩이 그 줄에서 가장 큰 칩 높이로 늘어난다 —
     체크박스가 있는 칩 하나 때문에 줄 전체가 두 배로 부푸는 게 그 이유였다. */
  align-items: flex-start;
}
.waiting-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: #fff;
  border: 1px solid #d9dee8;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.3;
  /* 이름·배지가 한 줄로 붙어 있어야 칩이다. 줄바꿈을 허용하면 글자가 세로로 쌓여
     칩이 커다란 타원이 된다(실제로 그렇게 깨져 있었다). */
  white-space: nowrap;
  max-width: 100%;
}
/* 전역 input { width: 100% }이 체크박스를 칸 전체로 늘려 이름을 세로로 밀어냈다 — 여기서만 되돌린다 */
.waiting-chip input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
}
.waiting-chip.ok { border-color: #bfe3cf; }
.waiting-chip.warn { border-color: #ecdcae; }
.waiting-chip .step-approve-box {
  display: inline-flex;
  align-items: center;
  margin: 0;
  min-height: 0;
  padding: 0;
  cursor: pointer;
}
.waiting-name {
  /* 전역 button 규칙(min-height 40px · 남색 배경 · white-space normal)을 칩 안에서 끈다 */
  display: inline;
  min-height: 0;
  background: none;
  border: 0;
  padding: 0;
  color: #1a2230;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: underline dotted #9aa4b5;
  text-underline-offset: 2px;
}
.waiting-name:hover:not(:disabled) { background: none; }
.waiting-name:hover { color: #8a6d2f; }
.waiting-badge {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #55617a;
  background: #eef1f6;
}
.waiting-badge.ok { color: #1f7a4d; background: #e6f4ec; }
.waiting-badge.warn { color: #8a6d2f; background: #faf1da; }
.waiting-hint { margin: 8px 0 0; }
/* ── 고객 현황표 일괄 작업 바 ── */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 8px 14px;
  border: 1px dashed #d5d9e2;
  border-radius: 10px;
  background: #fafbfd;
}
.bulk-bar.active {
  border-style: solid;
  border-color: #b9c2d4;
  background: #f2f6fd;
}
.bulk-count {
  font-size: 13px;
  font-weight: 700;
  color: #3a475e;
}
/* ── Gmail 결과: 시리즈·단계별 발송 고객 ── */
.sent-by-series {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #e2e5ec;
}
.sent-series {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e2e5ec;
  border-radius: 12px;
}
.sent-series-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sent-step { margin: 10px 0; }
.sent-step-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.sent-step-head strong { font-size: 13px; color: #1a2230; }
.sent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sent-chip {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #1f7a4d;
  background: #e6f4ec;
  border: 1px solid #bfe3cf;
}
/* ── 이 시리즈 고객 명단(roster) ── */
.roster-wrap { margin-top: 12px; }
.roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.roster-table thead th {
  text-align: left;
  font-size: 12px;
  color: #6E7A8F;
  font-weight: 800;
  padding: 6px 10px;
  border-bottom: 1px solid #e2e5ec;
}
.roster-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #eef0f4;
  vertical-align: middle;
}
.roster-row.is-selected td {
  background: #faf6ec;
}
.roster-row .sub { font-size: 11px; }
/* ── 수신인별 미리보기 단계 위치 배지 ── */
.stage-tag {
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
}
.stage-tag.now { color: #0E2750; background: #C9A86A; }
.stage-tag.past { color: #1f7a4d; background: #e6f4ec; }
.stage-tag.next { color: #55617a; background: #eef1f6; }
.stage-tag.skip { color: #8a8f9a; background: #f1f1f1; text-decoration: line-through; }
/* 진단 정보가 없는 고객 — 그대로 두면 빈 메일이 나가므로 눈에 띄게 */
.warn-text { color: #b4532a; font-weight: 600; }
/* ── 미리보기 대상 선택 바 ── */
.recipient-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 6px;
  padding: 8px 14px;
  border: 1px solid #e2e5ec;
  border-radius: 10px;
  background: #fbfaf6;
}
.recipient-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.recipient-bar-left select { min-width: 240px; }
/* ── 각 단계에 채워진 수신인 메일 ── */
.step-recipient-mail {
  margin: 0 0 12px;
  border: 1px solid #d9dee8;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.step-recipient-mail.is-current {
  border-color: #C9A86A;
  box-shadow: 0 0 0 2px rgba(201, 168, 106, 0.30);
}
.step-recipient-mail.is-sample {
  border-style: dashed;
  border-color: #b6becb;
  background: #fbfcfe;
}
.step-recipient-mail.is-sample .step-recipient-who {
  color: #6E7A8F;
}
.step-recipient-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f5f6f9;
  border-bottom: 1px solid #e2e5ec;
}
.step-recipient-who { font-weight: 700; font-size: 13px; color: #1a2230; }
.step-recipient-mail .mail-preview-subject { padding: 8px 12px 0; }
.step-recipient-mail .mail-preview-frame { height: 520px; margin-top: 8px; }
.step-recipient-mail .mail-preview-text { margin: 8px 12px 12px; white-space: pre-wrap; }
/* 랜딩 전환 카드(첫 화면) — 어떤 랜딩을 보여줄지, 기수 문구를 앱에서 바꾼다.
   첫 화면에서는 바깥 .funnel-status 패널이 테두리를 맡으므로 안쪽 상자는 테두리를 두르지 않는다. */
.landing-mode { margin: 0; }
.landing-mode-panel .panel-title h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.landing-mode-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.landing-mode-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.landing-mode-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 220px;
  padding: 10px 12px;
  border: 1px solid #d9dee8;
  border-radius: 10px;
  cursor: pointer;
}
.landing-mode-opt.on { border-color: #0E2750; background: #eef2f8; }
/* 앱 공통 input이 width:100%라 라디오가 칸을 다 먹고 글자가 오른쪽 끝으로 밀린다 — 여기서만 되돌린다 */
.landing-mode-opt input[type="radio"] { width: auto; flex: 0 0 auto; margin: 3px 0 0; }
.landing-mode-opt > span { flex: 1 1 auto; text-align: left; line-height: 1.5; }
.landing-mode-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.landing-mode-fields .field { flex: 1 1 220px; }
/* 불러온 명단 미리보기 — 넣기 전에 골라내는 표 */
.series-import-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.series-import-rows {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #d9dee8;
  border-radius: 10px;
  margin: 8px 0;
  background: #fff;
}
.series-import-rows .roster-table thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.roster-table .select-col { width: 34px; }
.roster-table tr.row-off td { opacity: 0.45; }
/* 고객별 메일 진행(펼치기) — 무엇이 나갔고, 지금 어디에 서 있고, 무엇이 남았는지 */
/* 칸을 34px로 묶어 두니 전역 button(inline-flex · gap 8px · white-space normal) 안에서
   "3/10"이 한 글자씩 세로로 접혔다. 칸을 숫자 폭에 맞추고 줄바꿈을 막아 가로 한 줄로 세운다. */
.funnel-status-table .progress-col { width: 64px; padding-left: 8px; padding-right: 4px; }
.funnel-status-table .progress-toggle {
  /* 칸을 꽉 채워 3/10 · 10/10 · 0/7이 서로 다른 폭으로 들쭉날쭉하지 않게 한다 */
  width: 100%;
  justify-content: center;
  min-height: 26px;
  padding: 0 6px;
  gap: 3px;
  white-space: nowrap;
  /* 자릿수가 달라도(3/10 · 10/10) 숫자 폭이 같아 행끼리 세로로 맞는다 */
  font-variant-numeric: tabular-nums;
}
.funnel-status-table .progress-toggle .caret { flex: 0 0 auto; color: #8A93A5; }
.funnel-status-table tr.progress-row > td { background: #f7f9fc; border-bottom: 1px solid #e3e9f2; }
.mail-progress { padding: 4px 2px 8px; }
.mail-progress-head { font-size: 0.85rem; color: #4a5568; margin-bottom: 6px; }
.mail-progress-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 0.86rem; }
.mail-progress-list li { line-height: 1.5; }
.mail-progress-list li b { display: inline-block; width: 14px; }
.mail-progress-list li.done { color: #1F7A4D; }
.mail-progress-list li.now { color: #0E2750; font-weight: 700; }
.mail-progress-list li.todo { color: #6E7A8F; }
.mail-progress-list li.off { color: #A6AEBC; text-decoration: line-through; }
/* 재시작 발송 시각 — 행마다 두면 표가 커지므로 일괄바 안에 한 곳만 둔다 */
.restart-option { margin: 8px 0 0; padding: 10px 12px; border: 1px solid #d9dee8; border-radius: 10px; background: #fff; }
.restart-option .field { max-width: 320px; }
.restart-btn.now { background: #fff; border: 1px solid #A8853F; color: #A8853F; }
.restart-btn.now:hover:not(:disabled) { background: #faf1da; }
/* 재시작 칸 — select 한 줄, 버튼 두 개가 그 아래 한 줄. 전역 button(min-height 40px)이
   좁은 칸에서 서로 밀어내 줄이 어긋나던 것을 여기서 크기를 낮춰 맞춘다. */
.restart-cell .restart-box { display: grid; gap: 6px; min-width: 200px; max-width: 240px; }
.restart-cell .restart-box select {
  width: 100%;
  max-width: none;
  min-height: 32px;
  height: 32px;
  margin: 0;
  font-size: 0.82rem;
  text-overflow: ellipsis;
}
.restart-cell .restart-actions { display: flex; gap: 6px; }
.restart-cell .restart-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  height: 32px;
  margin: 0;
  padding: 0 8px;
  font-size: 0.8rem;
  white-space: nowrap;
}
/* 지난 예약 — 자동 발송이 멈춰 있다는 신호라 눈에 띄게 세운다 */
.funnel-status-table .overdue { color: #B42318; font-weight: 800; }
.funnel-status-table .sub.overdue { font-weight: 700; }
/* 진행 숫자는 절대 접히면 안 된다(flex 항목이라 기본값이면 줄어들며 쪼개진다) */
.funnel-status-table .progress-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: #6E7A8F;
  white-space: nowrap;
}
/* 최근 발송·다음 발송에 "무엇"을 함께 — 시각만으로는 상황 판단이 안 된다 */
.funnel-status-table .next-step-name { display: block; font-size: 0.8rem; line-height: 1.35; margin-bottom: 2px; }
/* ── 특별선물 퍼널 현황 ────────────────────────────────────────────
   메일이 나가지 않는 퍼널(하이닉스 특별선물 등)을 랜딩 단위로 보는 카드.
   위 '유입 현황'과 같은 표 스타일(.funnel-status-table)을 그대로 쓰고,
   여기서는 퍼널을 여러 개 세로로 쌓을 때 서로 구분되게만 감싼다. */
.gift-funnel {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #0E275022;
  border-radius: 10px;
  background: #FBFAF6;
}
.gift-funnel + .gift-funnel {
  margin-top: 12px;
}
.gift-funnel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.gift-funnel-head b {
  font-size: 0.98rem;
  color: #0E2750;
}
.gift-funnel-head code {
  font-size: 0.8rem;
}