/* ADR 0106: 네이버 광고 구조 빌더 공통 구조.
   ux-spec §9.1. 색·서체는 --ads-* 간접 변수만 쓴다. --ads-* 기본값은
   같은 루트의 --nbo-* (테마가 이미 매핑)를 그대로 받아 라이트·다크를
   따른다. 브랜드 값은 각 스코프(web/brands/bemove/theme.css,
   apps/musclefactory/adapter/adapter.css)에서만 매핑한다.
   스코프 없는 전역 선택자에 브랜드 색을 넣지 않는다. */
.fx-ads-root {
  --ads-card: var(--nbo-card, var(--card, #ffffff));
  --ads-bg-sub: var(--nbo-bg-sub, var(--bg-sub, #f8fafc));
  --ads-text: var(--nbo-text, var(--text, #1e293b));
  --ads-text-sub: var(--nbo-text-sub, var(--text-sub, #64748b));
  --ads-border: var(--nbo-border, var(--border, #e2e8f0));
  --ads-border-table: var(--nbo-border-table, var(--border, #e2e8f0));
  --ads-fill: var(--nbo-fill, var(--primary-fill, #7c3aed));
  --ads-fill-fg: var(--nbo-fill-fg, #ffffff);
  --ads-ok: var(--nbo-ok, #15803d);
  --ads-info: var(--nbo-info, #1d4ed8);
  --ads-warn: var(--nbo-warn, #b45309);
  --ads-danger: var(--nbo-danger, #b91c1c);
  --ads-focus: var(--nbo-focus, 0 0 0 3px rgba(99, 102, 241, 0.35));
  --ads-r-ctl: var(--nbo-r-ctl, 8px);
  --ads-r-card: var(--nbo-r-card, 12px);
  --ads-r-sheet: var(--nbo-r-sheet, 16px);
  --ads-font-mono: var(--nbo-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* hidden 강제: 숨긴 섹션·시트·저장 바·빈 띠가 보이는 실측 결함을 막는다. */
.fx-ads-root [hidden] {
  display: none !important;
}

/* 입력 기본: NBO 루트 규칙과 같은 값(독립 로드 대비). */
.fx-ads-root .form-control {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-r-ctl);
  background: var(--ads-card);
  color: var(--ads-text);
  min-height: 36px;
  width: 100%;
}

.fx-ads-root .form-control:focus-visible {
  outline: none;
  box-shadow: var(--ads-focus);
}

.fx-ads-root .form-control:disabled {
  background: var(--ads-bg-sub);
  color: var(--ads-text-sub);
}

.fx-ads-root .form-control::placeholder {
  color: var(--ads-text-sub);
}

/* 글자 버튼·칩 아래 작은 줄·주의 글자. */
.fx-ads-root .fx-ads-linkbtn {
  background: none;
  border: none;
  padding: 0;
  color: var(--ads-info);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.fx-ads-root .fx-ads-linkbtn:hover {
  text-decoration: underline;
}

.fx-ads-root .is-warn {
  color: var(--ads-warn);
}

.fx-ads-root h4 {
  font-size: 13px;
  margin: 12px 0 6px;
  color: var(--ads-text);
}

.fx-ads-root h5 {
  font-size: 12px;
  margin: 10px 0 4px;
  color: var(--ads-text);
}

/* 표시 서체는 제목 20px에만(18px 미만 사용 금지). */
.fx-ads-root .fx-nbo-title,
.fx-ads-root .fx-ads-sheet-head h3 {
  font-family: var(--ads-font-display, var(--nbo-font-display, inherit));
}

/* ── 매트릭스 ── */
.fx-ads-root .fx-ads-matrix {
  width: 100%;
}

.fx-ads-root .fx-ads-matrix th.dev {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--ads-text);
  background: var(--ads-dev-head-bg, var(--ads-bg-sub));
}

.fx-ads-root .fx-ads-matrix th.dev + th.dev {
  border-left: 1px solid var(--ads-border-table);
}

.fx-ads-root .fx-ads-matrix th.kind {
  text-align: left;
  font-size: 13px;
}

.fx-ads-root .fx-ads-matrix th.kind small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--ads-text-sub);
}

.fx-ads-root .fx-ads-matrix td:nth-child(5) {
  border-left: 1px solid var(--ads-border-table);
}

.fx-ads-root .fx-ads-branch b {
  display: block;
  font-size: 15px;
}

.fx-ads-root .fx-ads-tgt {
  display: block;
  font-size: 12px;
  color: var(--ads-text-sub);
  margin-top: 2px;
}

.fx-ads-root button.fx-ads-tgt {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.fx-ads-root button.fx-ads-tgt:hover {
  text-decoration: underline;
}

.fx-ads-root .fx-ads-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--ads-r-ctl);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ads-text);
  font: inherit;
}

.fx-ads-root .fx-ads-cell:hover,
.fx-ads-root .fx-ads-cell:focus-visible {
  border-color: var(--ads-cell-hover-border, var(--ads-text));
  outline: none;
}

.fx-ads-root .fx-ads-cell.is-missing {
  border: 1px dashed var(--ads-missing-border, var(--ads-border));
}

.fx-ads-root .fx-ads-cell b {
  font-family: var(--ads-font-mono);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fx-ads-root .fx-ads-cell-unit {
  font-size: 11px;
  color: var(--ads-text-sub);
  margin-left: 4px;
}

.fx-ads-root .fx-ads-legend {
  font-size: 12px;
  color: var(--ads-text-sub);
  margin: 8px 0 0;
}

/* ── 모바일 지점 카드 ── */
.fx-ads-root .fx-ads-bcards {
  display: none;
  gap: 10px;
}

.fx-ads-root .fx-ads-bcard {
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-r-card);
  padding: 10px 12px;
  background: var(--ads-card);
}

.fx-ads-root .fx-ads-bcard-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.fx-ads-root .fx-ads-bcard-grid {
  display: grid;
  grid-template-columns: 32px repeat(3, 1fr);
  gap: 6px;
  align-items: stretch;
}

.fx-ads-root .fx-ads-bcard-kind,
.fx-ads-root .fx-ads-bcard-dev {
  font-size: 12px;
  color: var(--ads-text-sub);
  align-self: center;
}

.fx-ads-root .fx-ads-bcell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  justify-content: center;
  min-height: 44px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--ads-r-ctl);
  background: transparent;
  cursor: pointer;
  color: var(--ads-text);
  font: inherit;
  font-size: 12px;
}

.fx-ads-root .fx-ads-bcell.is-missing {
  border: 1px dashed var(--ads-missing-border, var(--ads-border));
}

.fx-ads-root .fx-ads-bcell b {
  font-family: var(--ads-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── 행 상세·점+글자 상태 ── */
.fx-ads-root .fx-ads-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
}

.fx-ads-root .fx-ads-detail3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.fx-ads-root .fx-ads-detail-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.fx-ads-root .fx-ads-dup {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.fx-ads-root .fx-ads-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: 1px;
}

.fx-ads-root .fx-ads-dot.is-ok { color: var(--ads-ok); }
.fx-ads-root .fx-ads-dot.is-info { color: var(--ads-info); }
.fx-ads-root .fx-ads-dot.is-warn { color: var(--ads-warn); }
.fx-ads-root .fx-ads-dot.is-danger { color: var(--ads-danger); }
.fx-ads-root .fx-ads-dot.is-muted { color: var(--ads-text-sub); }

/* ── 배치안 ── */
.fx-ads-root .fx-ads-seedbox {
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-r-card);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.fx-ads-root .fx-ads-seedbox h4 {
  margin: 0 0 8px;
}

.fx-ads-root .fx-ads-seedrow {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ads-text-sub);
}

.fx-ads-root .fx-ads-target-label {
  margin-left: 8px;
}

.fx-ads-root .fx-ads-targets {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fx-ads-root .fx-ads-target {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--ads-text);
  font-size: 13px;
}

.fx-ads-root .fx-ads-target-fixed {
  color: var(--ads-text);
  font-size: 13px;
}

.fx-ads-root .fx-ads-planbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0;
}

.fx-ads-root .fx-ads-plan-tools {
  display: flex;
  gap: 8px;
}

.fx-ads-root .fx-ads-plan-tools .form-control {
  width: auto;
}

.fx-ads-root .fx-ads-pairs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fx-ads-root .fx-ads-pair {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fx-ads-root .fx-ads-pill {
  font-size: 12px;
  border: 1px solid var(--ads-pill-border, var(--ads-text));
  border-radius: var(--ads-r-ctl);
  padding: 3px 8px;
  background: transparent;
  color: var(--ads-text);
  cursor: pointer;
  white-space: nowrap;
}

.fx-ads-root .fx-ads-pill .dev {
  font-family: var(--ads-font-mono);
  font-weight: 600;
}

.fx-ads-root .fx-ads-pill[aria-pressed="false"] {
  border-style: dashed;
  color: var(--ads-pill-off-ink, var(--ads-text-sub));
  border-color: var(--ads-pill-off-border, var(--ads-border));
}

.fx-ads-root .fx-ads-pill.is-new::before {
  content: "+ ";
  color: var(--ads-pill-new-ink, inherit);
}

.fx-ads-root .fx-ads-pill.is-locked {
  cursor: default;
  color: var(--ads-text-sub);
  border-style: dashed;
}

.fx-ads-root .fx-ads-cls {
  display: inline-block;
  border: 1px solid var(--ads-cls-border, var(--ads-border-table));
  color: var(--ads-cls-ink, var(--ads-text));
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--ads-r-ctl);
  padding: 1px 8px;
  white-space: nowrap;
}

.fx-ads-root .fx-ads-radio3 {
  display: inline-flex;
  gap: 8px;
  margin-left: 8px;
}

.fx-ads-root .fx-ads-radio {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  color: var(--ads-text);
  white-space: nowrap;
}

.fx-ads-root .fx-ads-plan-cards {
  display: none;
}

.fx-ads-root .fx-ads-card-detail {
  border-top: 1px solid var(--ads-border);
  padding-top: 8px;
  margin-top: 4px;
}

/* ── 승인 시트 ── */
.fx-ads-root .fx-ads-summary4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.fx-ads-root .fx-ads-summary4 .k {
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-r-card);
  padding: 8px 10px;
}

.fx-ads-root .fx-ads-summary4 .k.budget {
  grid-column: 1 / -1;
}

.fx-ads-root .fx-ads-summary4 .k b {
  display: block;
  font-family: var(--ads-font-mono);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fx-ads-root .fx-ads-summary4 .k.budget b {
  font-size: 24px;
}

.fx-ads-root .fx-ads-summary4 .k span {
  font-size: 12px;
  color: var(--ads-text-sub);
}

.fx-ads-root .fx-ads-budget {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fx-ads-root .fx-ads-budget li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.fx-ads-root .fx-ads-budget-in {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}

.fx-ads-root .fx-ads-budget-in .form-control {
  width: 110px;
  text-align: right;
  font-family: var(--ads-font-mono);
  font-variant-numeric: tabular-nums;
}

.fx-ads-root .fx-ads-adlist {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fx-ads-root .fx-ads-adlist li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.fx-ads-root .fx-ads-adlist .pv {
  font-size: 12px;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.fx-ads-root .fx-ads-adlist .pv em {
  font-style: normal;
  font-size: 11px;
  color: var(--ads-text-sub);
  font-family: var(--ads-font-mono);
}

.fx-ads-root .fx-ads-adlist .pv em.is-warn {
  color: var(--ads-warn);
  font-family: inherit;
}

.fx-ads-root .fx-ads-exclude {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px;
}

.fx-ads-root .fx-ads-msglist {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px;
  color: var(--ads-danger);
}

/* ── 실행 결과 ── */
.fx-ads-root .fx-ads-runhead {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.fx-ads-root .fx-ads-runhead .form-control {
  width: auto;
  min-width: 200px;
}

.fx-ads-root .fx-ads-runhead p {
  flex: 1;
  margin: 0;
  font-size: 13px;
}

.fx-ads-root .fx-ads-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.fx-ads-root .fx-ads-step {
  display: grid;
  grid-template-columns: 140px 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.fx-ads-root .fx-ads-step-name {
  font-family: var(--ads-font-mono);
  font-size: 14px;
  color: var(--ads-text-sub);
  white-space: nowrap;
}

.fx-ads-root .fx-ads-step-label {
  font-size: 13px;
  white-space: nowrap;
}

.fx-ads-root .fx-ads-foot {
  text-align: right;
  margin: 10px 0 0;
}

/* ── 사전 ── */
.fx-ads-root .fx-ads-lex {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
}

.fx-ads-root .fx-ads-lexcol {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.fx-ads-root .fx-ads-lexbox {
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-r-card);
  padding: 12px;
}

.fx-ads-root .fx-ads-lexbox h4 {
  margin: 0 0 8px;
}

.fx-ads-root .fx-ads-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.fx-ads-root .fx-ads-lex-add {
  max-width: 160px;
}

.fx-ads-root .fx-ads-lexgroup {
  margin-top: 6px;
}

.fx-ads-root .fx-ads-preview {
  font-size: 13px;
  margin-top: 8px;
}

.fx-ads-root .fx-ads-preview p {
  margin: 2px 0;
}

.fx-ads-root .fx-ads-review {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 0;
  border-top: 1px solid var(--ads-border);
}

/* ── 지점 위치·플레이스·지도·템플릿 ── */
.fx-ads-root .fx-ads-places {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
}

.fx-ads-root .fx-ads-place {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  background: transparent;
  border: 1px solid var(--ads-border);
  border-left-width: 1px;
  border-radius: var(--ads-r-ctl);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--ads-text);
  font: inherit;
}

.fx-ads-root .fx-ads-place b {
  font-size: 13px;
}

.fx-ads-root .fx-ads-place span {
  font-size: 12px;
  color: var(--ads-text-sub);
}

.fx-ads-root .fx-ads-place.is-selected {
  border-left: 3px solid var(--ads-fill);
  background: var(--ads-bg-sub);
}

.fx-ads-root .fx-ads-map {
  height: 260px;
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-r-ctl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ads-bg-sub);
}

.fx-ads-root .fx-ads-radius {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.fx-ads-root .fx-ads-radius input[type="range"] {
  flex: 1;
  min-height: 36px;
}

.fx-ads-root .fx-ads-radius .form-control {
  width: 84px;
  text-align: right;
  font-family: var(--ads-font-mono);
  font-variant-numeric: tabular-nums;
}

.fx-ads-root .fx-ads-slotrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fx-ads-root .fx-ads-slotrow label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ads-text-sub);
}

.fx-ads-root .fx-ads-tpl {
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-r-card);
  padding: 12px;
  margin-bottom: 10px;
}

.fx-ads-root .fx-ads-tpl h4 {
  margin: 0 0 8px;
}

.fx-ads-root .fx-field.withcnt {
  position: relative;
}

.fx-ads-root .fx-field.withcnt .cnt {
  font-family: var(--ads-font-mono);
  font-size: 12px;
  color: var(--ads-text-sub);
  white-space: nowrap;
}

/* ── 시트 골격: 마크업이 .fx-nbo-sheet-head·body·foot 를 함께 달아
   여백·테두리·스크롤(몸만 스크롤, 머리·바닥 고정)은 0105 규칙 한 곳에서
   관리한다. 여기는 0106 간격 델타만 둔다. */
.fx-ads-root .fx-ads-sheet-head {
  gap: 8px;
}

.fx-ads-root .fx-ads-sheet-head h3 {
  margin: 0;
  font-size: 20px;
}

.fx-ads-root .fx-ads-sheet-body {
  gap: 4px;
}

/* 시트 안 슬라이더·라디오·체크박스 강조: 브랜드 스코프가 --ads-accent 로
   매핑하고, 없으면 주 채움(--ads-fill → --nbo-fill)을 쓴다. UA 기본 파랑 금지. */
.fx-ads-root .fx-ads-sheet-body input[type="range"],
.fx-ads-root .fx-ads-sheet-body input[type="radio"],
.fx-ads-root .fx-ads-sheet-body input[type="checkbox"] {
  accent-color: var(--ads-accent, var(--ads-fill));
}

/* ── 반응형 ── */
@media (max-width: 1050px) {
  .fx-ads-root .fx-ads-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .fx-ads-root .fx-ads-matrix {
    display: none;
  }

  .fx-ads-root .fx-ads-bcards {
    display: grid;
  }

  .fx-ads-root .fx-ads-lex {
    grid-template-columns: 1fr;
  }

  .fx-ads-root .fx-ads-detail,
  .fx-ads-root .fx-ads-detail3 {
    grid-template-columns: 1fr;
  }

  .fx-ads-root table.fx-ads-plan {
    display: none;
  }

  .fx-ads-root .fx-ads-plan-cards {
    display: block;
  }

  .fx-ads-root table.fx-ads-run {
    display: none;
  }

  .fx-ads-root .fx-ads-pill {
    min-height: 36px;
  }
}

@media (max-width: 680px) {
  .fx-ads-root .fx-nbo-head-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .fx-ads-root .fx-nbo-head-actions [data-ads-go="plan"] {
    grid-column: 1 / -1;
  }

  .fx-ads-root .fx-ads-step {
    grid-template-columns: 1fr;
  }

  .fx-ads-root .fx-ads-map {
    height: 240px;
  }

  .fx-ads-root .fx-ads-slotrow {
    grid-template-columns: 1fr;
  }
}