/* 광고 문구 검사기 */
.copy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.seg{display:flex;gap:4px;padding:4px;background:var(--surface2);border-radius:12px;margin-bottom:16px}
.seg button{flex:1;border:0;background:transparent;color:var(--text2);padding:8px 10px;border-radius:9px;cursor:pointer;font-weight:600}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.lbl-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cnt{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text3)}
.cnt.ok{color:var(--accent)} .cnt.bad{color:var(--bad)} .cnt.warn{color:var(--warn)}
#desc{min-height:96px}

.side{display:grid;gap:16px;position:sticky;top:76px}
.checks,.preview{padding:18px 20px;box-shadow:none}
.side h2{font-size:15px;margin:0 0 12px}
.side h2 small{font-size:12px;color:var(--text3);font-weight:400;margin-left:6px}
#checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#checks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}
#checks li i{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;margin-top:1px}
#checks li.ok i{background:var(--accent-weak);color:var(--accent)}
#checks li.bad i{background:var(--bad-weak);color:var(--bad)}
#checks li.warn i{background:var(--warn-weak);color:var(--warn)}
#checks li small{display:block;color:var(--text3);font-size:12.5px}

.pv{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg)}
.pv-top{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--text2);min-height:18px}
.pv-site{font-weight:700;color:var(--text)}
.pv-url{color:var(--accent)}
.pv-title{margin-top:4px;font-size:17px;font-weight:700;color:var(--new);word-break:break-all;min-height:24px}
.pv-desc{margin-top:4px;font-size:14px;color:var(--text2);line-height:1.6;word-break:break-all}
.pv .empty{color:var(--text3);font-weight:400}

@media (max-width:820px){
  .copy{grid-template-columns:1fr}
  .side{position:static}
}
#checks li small a{color:var(--accent);font-weight:600;margin-left:2px}
/* 등록 불가(빨강)·주의(주황)일 때 입력칸과 검사 결과 테두리 */
.tool-box .state-bad{border-color:var(--bad)}
.tool-box .state-bad:focus{outline-color:var(--bad)}
.tool-box .state-warn{border-color:var(--warn)}
.tool-box .state-warn:focus{outline-color:var(--warn)}
.checks.state-bad{border-color:var(--bad)}
.checks.state-warn{border-color:var(--warn)}