/* 경쟁사 미디어믹스 — 한 화면에 1→6 차례. 지면 점검(review.css)과 같은 결 */
.cp { max-width: 1180px; margin: 0 auto; padding: 16px 20px 80px; display: flex; flex-direction: column; gap: 14px; }
.cp-step { background: #fff; border: 1px solid var(--g200); border-radius: var(--r); padding: 18px; }
.cp-step h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cp-step h2 i { font-style: normal; font-size: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cp-step h3 { font-size: 14px; margin: 14px 0 6px; }
.cp-step > .muted { font-size: 13px; margin: 0 0 12px; }
.muted.sm { font-size: 12px; }
.cp-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.cp label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--g700); flex: 1; }
.cp textarea.input { width: 100%; padding: 8px; font: inherit; font-size: 13px; }
.cp-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cp-comps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.cp-comp { display: grid; grid-template-columns: 150px 1fr 1.4fr 1fr 28px; gap: 8px; align-items: end; border: 1px solid var(--g200); border-radius: var(--r); padding: 10px; }
@media (max-width: 860px) { .cp-comp { grid-template-columns: 1fr 1fr; } }
.cp-ours { border-top: 1px solid var(--g100); margin-top: 14px; padding-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.cp-job { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--amber-50); color: var(--amber); }
.cp-log { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--g50); border-radius: 6px; padding: 8px 10px; max-height: 160px; overflow: auto; white-space: pre-wrap; margin-top: 8px; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cp-table th, .cp-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--g100); vertical-align: top; }
.cp-table th { font-size: 12px; color: var(--g600); font-weight: 600; }
.cp-comp-block { margin-top: 16px; }
.cp-comp-block > header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cp-comp-block > header h3 { margin: 0; font-size: 16px; }
.cp-why { font-size: 12px; color: var(--g600); margin: 4px 0 10px; }
.cp-strats { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.cp-strat { border: 1px solid var(--g200); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cp-strat .id { font-size: 11px; color: var(--g500); font-weight: 600; }
.cp-strat h4 { margin: 0; font-size: 15px; }
.cp-strat .thesis { font-size: 13px; color: var(--g900); }
.cp-kv { display: grid; grid-template-columns: 72px 1fr; gap: 2px 8px; font-size: 12px; }
.cp-kv dt { color: var(--g600); }
.cp-kv dd { margin: 0; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cp-chips span { font-size: 11px; padding: 2px 8px; border-radius: var(--r-chip); background: var(--g100); color: var(--g700); }
.cp-chips .paid { background: var(--amber-50); color: var(--amber); }
.cp-chips .org { background: var(--green-50); color: var(--green); }
.cp-chips .near { background: var(--blue-50); color: var(--blue-600); }
.cp-accs { font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.cp-accs a { text-decoration: none; color: var(--g800); }
.cp-accs a.stray { color: var(--g500); }
.cp-accs .p { color: var(--blue-600); font-weight: 600; }
.cp-caps { font-size: 12px; color: var(--g700); border-left: 2px solid var(--g200); padding-left: 8px; display: flex; flex-direction: column; gap: 4px; }
.cp-quote { font-size: 12px; color: var(--g600); }
.cp-quote.bad { color: var(--red); }
.cp-strat .foot { margin-top: auto; display: flex; justify-content: flex-end; }
.cp-loose { font-size: 12px; color: var(--g600); margin-top: 8px; }
.cp-overlaps { font-size: 12px; color: var(--g700); margin-top: 12px; }
.cp-logic { border: 1px solid var(--g200); border-radius: var(--r); padding: 12px 14px; margin-top: 10px; }
.cp-logic h4 { margin: 0 0 4px; font-size: 14px; }
.cp-logic .pos { font-size: 13px; }
.cp-logic .pos em { font-style: normal; font-size: 11px; color: var(--amber); margin-left: 4px; }
.cp-logic p { margin: 6px 0 0; font-size: 13px; color: var(--g900); }
.cp-logic ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--g700); }
.cp-mix { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 10px; }
.cp-mixitem { border: 1px solid var(--g200); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.cp-mixitem h4 { margin: 0; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; }
.cp-mixitem h4 b { font-size: 13px; color: var(--blue-600); }
.cp-mixitem .brief { font-size: 12px; color: var(--g700); white-space: pre-wrap; }
.cp-thesis { font-size: 15px; font-weight: 700; margin: 4px 0; }
.cp-import { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: auto; }
.cp-empty { font-size: 13px; color: var(--g500); padding: 8px 0; }