/* ============================================================
   JSON 포맷터·검증기 전용 스타일
   (색상·간격·카드 등 공통 토큰은 common.css 재사용)
   - 이 도구의 모티프: 코드 에디터의 들여쓰기 안내선
   - 본체는 개발 도구 톤: 좌 입력 / 우 결과, 모노스페이스
   ============================================================ */

:root {
  --json-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas,
               "Liberation Mono", "Nanum Gothic Coding", monospace;
  /* 구문 색: 종이 톤과 어울리는 차분한 계열 */
  --json-key: #8c4a3f;      /* 키: 주묵 계열 */
  --json-str: #3f6a48;      /* 문자열: 먹빛 초록 */
  --json-num: #33567e;      /* 숫자: 남색 */
  --json-lit: #8a5a2b;      /* true/false/null: 갈색 */
  --json-punct: #8d8371;    /* 괄호·쉼표 */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --json-key: #e0968a;
    --json-str: #9cc4a4;
    --json-num: #92b4dd;
    --json-lit: #d3a877;
    --json-punct: #857b69;
  }
}
:root[data-theme="dark"] {
  --json-key: #e0968a;
  --json-str: #9cc4a4;
  --json-num: #92b4dd;
  --json-lit: #d3a877;
  --json-punct: #857b69;
}

/* ---- 도입부: 들여쓰기 안내선 모티프 ---- */
.json-motif { position: relative; overflow: hidden; }
.json-motif > * { position: relative; }
.json-motif::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 코드 에디터의 세로 들여쓰기 안내선 */
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-grid) 0, var(--color-grid) 1px,
    transparent 1px, transparent 28px
  );
  opacity: .5;
  -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,.5), transparent 55%);
          mask-image: linear-gradient(115deg, rgba(0,0,0,.5), transparent 55%);
  pointer-events: none;
}

.tool-intro {
  padding: var(--space-6) 0 var(--space-5);
  margin-bottom: var(--space-5);
}
.tool-intro h1 {
  margin: 0 0 var(--space-3);
  max-width: 20ch;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.lead {
  color: var(--color-text-sub);
  margin: var(--space-2) 0 var(--space-2);
  max-width: 60ch;
  font-size: 1.02rem;
}
.lead-note {
  color: var(--color-text-sub);
  font-size: .88rem;
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- 작은 버튼 ---- */
.btn-sm { padding: 5px 11px; font-size: .85rem; }

/* ---- 설명/FAQ 본문 (다른 도구와 동일 톤) ---- */
.prose { margin-top: var(--space-6); }
.prose h2 { margin-bottom: var(--space-3); }
.prose h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1.05rem; }
.prose p, .prose li { color: var(--color-text); }
.prose em { color: var(--color-primary); font-style: normal; font-weight: 600; }
.prose code {
  font-family: var(--json-mono);
  font-size: .86em;
  background: var(--color-primary-weak);
  border-radius: 4px;
  padding: 1px 5px;
}
.prose ol, .prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
}
.prose summary { cursor: pointer; font-weight: 600; }
.prose details[open] summary { margin-bottom: var(--space-2); }
.prose details p { margin: 0; color: var(--color-text-sub); }

/* ---- 도구줄 ---- */
.json-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.controls-actions { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.controls-hint { color: var(--color-text-sub); font-size: .85rem; }

/* ---- 입력/결과 2단 ---- */
.json-bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  margin-bottom: var(--space-4);
}
@media (max-width: 860px) {
  .json-bench { grid-template-columns: 1fr; }
}

.json-pane {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.pane-title {
  font-weight: 700;
  font-size: .92rem;
}
.pane-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.pane-cnt { color: var(--color-text-sub); font-size: .82rem; }

#jsonIn {
  flex: 1;
  width: 100%;
  min-height: 340px;
  resize: vertical;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--space-3);
  font-family: var(--json-mono);
  font-size: .88rem;
  line-height: 1.55;
  tab-size: 2;
}
#jsonIn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}
/* 파일 끌어다 놓기 안내 */
#jsonIn.is-dragover {
  outline: 2px dashed var(--color-primary);
  outline-offset: -1px;
}

/* ---- 상태 줄 ---- */
.json-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-height: 26px;
  margin-bottom: var(--space-2);
  font-size: .84rem;
  color: var(--color-text-sub);
}
.json-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: .82rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.json-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.badge-ok {
  color: #3f6a48;
  background: rgba(105, 160, 118, .14);
  border-color: rgba(105, 160, 118, .4);
}
.badge-bad {
  color: var(--color-primary);
  background: var(--color-primary-weak);
  border-color: var(--color-grid-strong);
}
.badge-warn {
  color: #8a5a2b;
  background: rgba(190, 140, 70, .12);
  border-color: rgba(190, 140, 70, .4);
}
:root[data-theme="dark"] .badge-ok,
:root:not([data-theme="light"]) .badge-ok { color: #9cc4a4; }
:root[data-theme="dark"] .badge-warn { color: #d3a877; }

/* ---- 오류 상세 ---- */
.json-error {
  border: 1px solid var(--color-grid-strong);
  background: var(--color-primary-weak);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.err-title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  font-size: .88rem;
}
.err-frame {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--json-mono);
  font-size: .82rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}
.err-frame .ln {
  color: var(--color-text-sub);
  user-select: none;
}
.err-frame .caret { color: var(--color-primary); font-weight: 700; }
.err-hints {
  margin: 0;
  padding-left: 1.2em;
  font-size: .84rem;
  color: var(--color-text-sub);
}
.err-hints li { margin: 2px 0; }
.btn-fix { margin-top: var(--space-2); }

/* ---- 정리된 출력 ---- */
.json-output {
  flex: 1;
  margin: 0;
  min-height: 0;
  max-height: 560px;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  padding: var(--space-3);
  font-family: var(--json-mono);
  font-size: .88rem;
  line-height: 1.55;
  tab-size: 2;
}
.json-output code { font-family: inherit; white-space: pre; }
.json-output[hidden] { display: none; }

.json-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--color-text-sub);
  font-size: .9rem;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

/* 구문 색 */
.tk-key { color: var(--json-key); }
.tk-str { color: var(--json-str); }
.tk-num { color: var(--json-num); }
.tk-lit { color: var(--json-lit); font-weight: 700; }

/* ---- 정리 옵션 ---- */
.json-opts {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.opt-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.opt-label {
  font-size: .84rem;
  font-weight: 700;
  color: var(--color-text-sub);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .86rem;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  cursor: pointer;
  user-select: none;
}
.chip:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-weak);
}
.chip input { accent-color: var(--color-primary); margin: 0; }
.chip-div {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
}
@media (max-width: 640px) {
  .chip-div { display: none; }
}