/* 콘텐츠온 SEO Checker — 기존 히어로 디자인(어두운 입력창 + 파란 버튼)을 따름 */

.cson-sc-form{
  display:flex; gap:12px; width:100%; max-width:760px; margin:0 auto;
  flex-wrap:wrap; align-items:stretch;
}
/* 테마(Neve)의 `form input:read-write` 규칙이 우선순위가 더 높아서
   선택자를 form.cson-sc-form input.cson-sc-input 으로 올려 이긴다. */
form.cson-sc-form input.cson-sc-input{
  flex:1 1 320px; min-width:0; width:auto; height:auto;
  background:#111a2e; background-color:#111a2e; color:#fff;
  border:1px solid rgba(255,255,255,.10); border-radius:10px;
  padding:18px 22px; font-size:16px; line-height:1.4;
  box-shadow:none; outline:none; -webkit-appearance:none; appearance:none;
  margin:0;
}
form.cson-sc-form input.cson-sc-input::placeholder{ color:#8b97ad; opacity:1; }
form.cson-sc-form input.cson-sc-input:focus{
  background-color:#111a2e; color:#fff;
  border-color:#4c7cf3; box-shadow:0 0 0 3px rgba(76,124,243,.25);
}

form.cson-sc-form button.cson-sc-btn,
a.cson-sc-btn{
  flex:0 0 auto; width:auto;
  background:linear-gradient(180deg,#5b86f7 0%,#3f6ae8 100%);
  color:#fff; font-weight:700; font-size:16px; letter-spacing:-.01em;
  border:0; border-radius:10px; padding:18px 34px; cursor:pointer;
  line-height:1.4; margin:0; text-decoration:none;
  transition:filter .15s ease, transform .15s ease;
}
form.cson-sc-form button.cson-sc-btn:hover,
a.cson-sc-btn:hover{ filter:brightness(1.06); color:#fff; }
form.cson-sc-form button.cson-sc-btn:active{ transform:translateY(1px); }
a.cson-sc-btn-lg{ display:inline-block; padding:16px 30px; }

/* ---------- 결과 ---------- */
.cson-sc-result{
  max-width:860px; margin:44px auto 0;
  /* 등급 색은 여기 한 곳에서만 바뀐다. 아래 규칙들은 전부 이 변수를 본다. */
  --cson-accent:#1f9d6b;
  --cson-accent-soft:#e6f4ee;
}
.cson-sc-result.cson-sc-tone-mid{ --cson-accent:#d9a02b; --cson-accent-soft:#fdf3e0; }
.cson-sc-result.cson-sc-tone-bad{ --cson-accent:#c0392b; --cson-accent-soft:#fdecea; }

.cson-sc-error{
  max-width:760px; margin:20px auto 0; padding:16px 20px;
  background:#fdecea; color:#8a2c20; border-left:3px solid #c0392b; border-radius:0 6px 6px 0;
}

/* ---------- 툴바 ---------- */
.cson-sc-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  justify-content:space-between; margin-bottom:22px;
}
.cson-sc-tool-group{ display:flex; gap:8px; flex-wrap:wrap; }
.cson-sc-result button.cson-sc-tool,
.cson-sc-result a.cson-sc-tool{
  display:inline-block; width:auto;
  background:#fff; color:#3d4f56; text-decoration:none;
  border:1px solid #dde5e7; border-radius:8px;
  padding:9px 15px; font-size:13.5px; font-weight:600; line-height:1.3;
  cursor:pointer; margin:0;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.cson-sc-result button.cson-sc-tool:hover,
.cson-sc-result a.cson-sc-tool:hover{ border-color:#3f6ae8; color:#3f6ae8; background:#fff; }
.cson-sc-result button.cson-sc-tool.is-done{
  border-color:#1f9d6b; color:#1f9d6b; background:#e6f4ee;
}

/* ---------- 점수 ---------- */
.cson-sc-score{
  display:flex; flex-wrap:wrap; gap:26px; align-items:center;
  padding-bottom:26px; border-bottom:2px solid #1e293b;
}

.cson-sc-dial{
  position:relative; flex:0 0 auto;
  width:132px; height:132px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.cson-sc-dial-svg{
  position:absolute; inset:0; width:100%; height:100%;
  transform:rotate(-90deg); /* 12시 방향에서 시작 */
}
.cson-sc-dial-track{ fill:none; stroke:#eceff0; stroke-width:8; }
.cson-sc-dial-fill{
  fill:none; stroke:var(--cson-accent); stroke-width:8; stroke-linecap:round;
  transition:stroke-dashoffset .7s cubic-bezier(.22,.8,.3,1);
}
.cson-sc-dial-num{
  position:relative; font-size:40px; font-weight:800; line-height:1;
  color:var(--cson-accent); font-variant-numeric:tabular-nums;
}
.cson-sc-dial-cap{
  position:relative; margin-top:5px;
  font-size:10px; letter-spacing:.16em; color:#9aa8ad; font-weight:700;
}

.cson-sc-score-body{ flex:1 1 300px; min-width:0; }
.cson-sc-eyebrow{
  display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#8b97ad; margin-bottom:4px;
}
.cson-sc-result a.cson-sc-target-link{
  font-size:19px; font-weight:700; word-break:break-all; text-decoration:none;
}
.cson-sc-grade{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:10px 0 12px;
}
.cson-sc-grade b{
  font-size:22px; font-weight:800; color:var(--cson-accent);
  background:var(--cson-accent-soft); border-radius:7px; padding:3px 12px;
}
.cson-sc-grade span{ font-size:14.5px; color:#5c6d74; font-variant-numeric:tabular-nums; }
.cson-sc-grade-line{ margin:12px 0 0; font-size:14.5px; color:#46585f; }

.cson-sc-tally{ display:flex; gap:8px; flex-wrap:wrap; }
.cson-sc-pill{
  font-size:13px; padding:6px 12px; border-radius:999px; white-space:nowrap;
  border:1px solid transparent;
}
.cson-sc-pill b{ font-variant-numeric:tabular-nums; }
.cson-sc-pill.cson-sc-pass{ background:#e6f4ee; color:#186b4c; border-color:#bfe3d3; }
.cson-sc-pill.cson-sc-warn{ background:#fdf3e0; color:#8a6114; border-color:#f0dcae; }
.cson-sc-pill.cson-sc-fail{ background:#fdecea; color:#983226; border-color:#f3ccc5; }

/* ---------- 검색결과 미리보기 ---------- */
.cson-sc-serp-wrap{ margin:32px 0 0; }
.cson-sc-serp-title{
  font-size:15px; font-weight:700; color:#3d4f56; margin:0 0 12px;
}
.cson-sc-serp{
  max-width:600px; /* 구글 데스크톱 결과의 실제 폭. 잘림이 여기서 재현된다. */
  padding:18px 20px; background:#fff;
  border:1px solid #e3e9ea; border-radius:12px;
  box-shadow:0 1px 3px rgba(16,24,40,.04);
}
.cson-sc-serp-id{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.cson-sc-serp-favi{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:#eef2f9; color:#3f6ae8;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
}
.cson-sc-serp-crumb{
  font-size:13px; color:#4d5156; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cson-sc-serp-h{
  margin:0 0 4px; font-size:20px; line-height:1.3; color:#1a0dab; font-weight:400;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cson-sc-serp-d{
  margin:0; font-size:14px; line-height:1.58; color:#4d5156;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.cson-sc-serp-empty{ color:#983226 !important; font-style:italic; }
.cson-sc-serp-note{
  max-width:600px; margin:10px 0 0; font-size:12.5px; color:#8b97ad; line-height:1.65;
}
.cson-sc-serp-note code{ font-size:12px; background:#f2f5f6; padding:1px 5px; border-radius:4px; }

/* ---------- 체크리스트 ---------- */
.cson-sc-lead{ color:#4a5b62; font-size:15px; margin:30px 0 0; }

.cson-sc-group{
  font-size:17px; font-weight:700; margin:34px 0 10px;
  padding-top:14px; border-top:1px solid #e3e9ea;
}

.cson-sc-list{ list-style:none; margin:0; padding:0; }
.cson-sc-item{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 0; border-bottom:1px solid #eef2f3; margin:0;
}
.cson-sc-mark{
  flex:0 0 auto; width:10px; height:10px; border-radius:50%; margin-top:7px;
}
.cson-sc-is-pass .cson-sc-mark{ background:#1f9d6b; }
.cson-sc-is-warn .cson-sc-mark{ background:#d9a02b; }
.cson-sc-is-fail .cson-sc-mark{ background:#c0392b; }

.cson-sc-body{ flex:1 1 auto; min-width:0; }
.cson-sc-row{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
  justify-content:space-between;
}
.cson-sc-label{ font-weight:700; }
.cson-sc-key{
  display:inline-block; margin-left:7px; vertical-align:1px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em;
  color:#3f6ae8; background:#eef2fd; border-radius:4px; padding:2px 6px;
}
.cson-sc-value{
  color:#46585f; font-size:14px; text-align:right;
  word-break:break-all; max-width:60%;
}
.cson-sc-is-fail .cson-sc-value{ color:#983226; font-weight:600; }
.cson-sc-note{ margin:6px 0 0; font-size:13.5px; color:#7e9096; line-height:1.6; }

.cson-sc-cta{
  margin:36px 0 0; padding:24px 26px;
  background:#f4f7f7; border-left:3px solid #3f6ae8; border-radius:0 8px 8px 0;
}
.cson-sc-cta p{ margin:0 0 16px; }

.cson-sc-disclaimer{
  margin:22px 0 0; font-size:12.5px; color:#8b97ad; line-height:1.65;
}

/* 인쇄용 머리글. 화면에서는 숨긴다. */
.cson-sc-print-head{ display:none; }

@media (max-width:640px){
  .cson-sc-btn{ width:100%; }
  .cson-sc-value{ max-width:100%; text-align:left; }
  .cson-sc-row{ justify-content:flex-start; }
  .cson-sc-score{ gap:18px; }
  .cson-sc-dial{ width:104px; height:104px; }
  .cson-sc-dial-num{ font-size:32px; }
  .cson-sc-serp-h{ font-size:17px; }
}

/* ---------- 인쇄 / PDF 저장 ----------
   테마 마크업을 직접 제어할 수 없어서, 결과와 무관한 페이지 요소를 넓게 숨긴다.
   결과 영역 안에는 header/footer/nav/aside 가 없으므로 안전하다. */
@media print{
  header, footer, nav, aside,
  #wpadminbar, .site-header, .site-footer,
  .cson-sc-form, .cson-sc-toolbar, .cson-sc-cta{
    display:none !important;
  }

  html, body{ background:#fff !important; }

  .cson-sc-print-head{
    display:flex !important; justify-content:space-between; align-items:baseline;
    gap:16px; flex-wrap:wrap;
    padding-bottom:10px; margin-bottom:20px; border-bottom:2px solid #1e293b;
    font-size:11pt;
  }
  .cson-sc-print-head span{ color:#555; font-size:9.5pt; }

  .cson-sc-result{
    max-width:none; width:100%; margin:0; padding:0;
    color:#000; font-size:10pt;
  }

  /* 도넛은 배경색 인쇄가 꺼져 있으면 빈 원으로 나온다. 숫자만 남긴다. */
  .cson-sc-dial-svg{ display:none; }
  .cson-sc-dial{ width:auto; height:auto; }
  .cson-sc-dial-num{ font-size:34pt; }

  .cson-sc-score{ border-bottom:1px solid #999; padding-bottom:16px; }
  .cson-sc-serp{ box-shadow:none; border:1px solid #bbb; }

  .cson-sc-item, .cson-sc-serp-wrap, .cson-sc-score{ break-inside:avoid; page-break-inside:avoid; }
  .cson-sc-group{ break-after:avoid; page-break-after:avoid; }

  a[href]::after{ content:""; } /* 테마가 붙이는 URL 꼬리표 제거 */
  .cson-sc-disclaimer{ margin-top:18px; font-size:8pt; }
}