/* 슬롭 탐지기가 슬롭처럼 생기면 곤란하다.
   Inter 없음, 인디고 없음, 그라디언트 없음, 블롭 없음. */

:root {
  --bg: #f6f3ee;
  --paper: #fffdf9;
  --ink: #1d1a17;
  --muted: #7a7169;
  --line: #e2dbd1;
  --accent: #b5461f;

  --hygiene:  #d63b3b;
  --template: #c9791b;
  --lexicon:  #b5461f;
  --hedge:    #8a7a2c;
  --rhythm:   #6b6b6b;
  --concrete: #2f7d4f;

  --sans: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Noto Serif KR", "Apple SD Gothic Neo", serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17151300; --bg: #171513;
    --paper: #1f1c19;
    --ink: #ece6dd;
    --muted: #9a9088;
    --line: #35302a;
    --hygiene:  #ff6b6b;
    --template: #e8a04a;
    --lexicon:  #e57a52;
    --hedge:    #c8b45a;
    --rhythm:   #9a9a9a;
    --concrete: #5fbf85;
  }
}

/* ── 테마 9종. 우상단 스와치로 고른다. [data-theme] 는 :root 보다 특이도가 높아 OS 다크모드 값을 이긴다. ── */
:root[data-theme="paper"]    { color-scheme: light; --bg:#f6f3ee; --paper:#fffdf9; --ink:#1d1a17; --muted:#7a7169; --line:#e2dbd1; --accent:#b5461f; }
:root[data-theme="ink"]      { color-scheme: dark;  --bg:#171513; --paper:#1f1c19; --ink:#ece6dd; --muted:#9a9088; --line:#35302a; --accent:#d9603a; }
:root[data-theme="sand"]     { color-scheme: light; --bg:#f3e7cf; --paper:#fbf4e6; --ink:#3a2c18; --muted:#8a7554; --line:#e2d3b3; --accent:#c2410c; }
:root[data-theme="mint"]     { color-scheme: light; --bg:#e3f3ea; --paper:#f3fbf6; --ink:#12362a; --muted:#4f7a68; --line:#c5e2d3; --accent:#0f766e; }
:root[data-theme="sky"]      { color-scheme: light; --bg:#e4eefb; --paper:#f4f8ff; --ink:#10233f; --muted:#556b8c; --line:#c7d8f0; --accent:#2563eb; }
:root[data-theme="rose"]     { color-scheme: light; --bg:#fbe6ec; --paper:#fff4f7; --ink:#4a1a2a; --muted:#8d566a; --line:#f0c9d5; --accent:#be185d; }
:root[data-theme="lemon"]    { color-scheme: light; --bg:#faf3c8; --paper:#fffbe3; --ink:#3d3510; --muted:#857a3a; --line:#ebe0a3; --accent:#b45309; }
:root[data-theme="lavender"] { color-scheme: light; --bg:#ece6fb; --paper:#f8f5ff; --ink:#2b1d4f; --muted:#6b5a94; --line:#d9cff2; --accent:#7c3aed; }
:root[data-theme="night"]    { color-scheme: dark;  --bg:#0f172a; --paper:#16213a; --ink:#e2e8f0; --muted:#94a3b8; --line:#273349; --accent:#f59e0b; }
/* 밝은 테마는 밝은 마커색, 어두운 테마는 어두운 마커색 — OS 설정과 무관하게 */
:root[data-theme="paper"], :root[data-theme="sand"], :root[data-theme="mint"], :root[data-theme="sky"],
:root[data-theme="rose"], :root[data-theme="lemon"], :root[data-theme="lavender"] {
  --hygiene:#d63b3b; --template:#c9791b; --lexicon:#b5461f; --hedge:#8a7a2c; --rhythm:#6b6b6b; --concrete:#2f7d4f;
  --input:#3f6f8f; --confusable:#a0457f; --change:#b8860b;
}
:root[data-theme="ink"], :root[data-theme="night"] {
  --hygiene:#ff6b6b; --template:#e8a04a; --lexicon:#e57a52; --hedge:#c8b45a; --rhythm:#9a9a9a; --concrete:#5fbf85;
  --input:#6fa3c7; --confusable:#d98cc0; --change:#e0b04a;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

.top {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--serif); font-size: 20px; letter-spacing: -0.01em; }
.mascot { height: 40px; width: auto; margin: -8px 0 -8px -6px; image-rendering: pixelated; align-self: center; }
.tag { color: var(--muted); }
.themes { margin-left: auto; display: flex; gap: 6px; align-self: center; }
.themes button { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); padding: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-accent) 50%); }
.themes button:hover { transform: scale(1.15); }
.themes button.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.engine { margin-left: 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.engine.err { color: var(--hygiene); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0;
  height: calc(100% - 52px);
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; height: auto; }
  .panel { border-left: 0; border-top: 1px solid var(--line); }
  /* 줄바꿈이 없으면 스와치 9개 + 엔진 줄이 좁은 화면에서 가로로 넘친다.
     그러면 innerWidth 가 뷰포트보다 커져서 position: fixed 요소가 화면 밖에 붙는다. */
  .top { flex-wrap: wrap; row-gap: 8px; }
  .themes { margin-left: 0; }
  .engine { margin-left: 0; }
}

/* ── 에디터: textarea 위에 투명 글자, 아래에 하이라이트 백드롭 ── */
.editor { display: flex; flex-direction: column; min-height: 0; }
.editor-wrap { position: relative; flex: 1; min-height: 320px; }
.backdrop, #input {
  position: absolute; inset: 0;
  margin: 0; padding: 28px 32px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-y: auto;
  border: 0;
  letter-spacing: 0;
  tab-size: 4;
}
.backdrop {
  color: transparent;
  background: var(--paper);
  pointer-events: none;
  /* overflow: hidden이면 스크롤바 폭만큼 백드롭이 넓어져서 줄바꿈 지점이 어긋난다.
     같은 overflow-y: auto로 두면 둘 다 같은 스크롤바를 갖고 같은 폭으로 접힌다.
     textarea가 위에 있어 백드롭 스크롤바는 안 보인다. */
  overflow-y: auto;
}
.backdrop, #input { scrollbar-gutter: stable; }
#input {
  background: transparent;
  color: var(--ink);
  caret-color: var(--accent);
  resize: none;
  outline: none;
}
#input::placeholder { color: var(--muted); font-style: italic; }

.backdrop mark {
  color: transparent;
  background: transparent;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.backdrop mark.hygiene  { background: color-mix(in srgb, var(--hygiene) 35%, transparent); outline: 1px solid var(--hygiene); }
.backdrop mark.template { background: color-mix(in srgb, var(--template) 22%, transparent); }
.backdrop mark.lexicon  { background: color-mix(in srgb, var(--lexicon) 22%, transparent); }
.backdrop mark.hedge    { background: color-mix(in srgb, var(--hedge) 22%, transparent); }
.backdrop mark.rhythm   { border-bottom: 2px dotted var(--rhythm); }   /* underline only — stacks with a background kind */
.backdrop mark.concrete { background: color-mix(in srgb, var(--concrete) 20%, transparent); }
.backdrop mark.active   { outline: 2px solid var(--ink); }

.editor-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.hint { color: var(--muted); }
.btn {
  font: inherit; cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--hygiene);
  color: var(--hygiene);
  background: transparent;
  border-radius: 4px;
}
.btn:hover { background: color-mix(in srgb, var(--hygiene) 12%, transparent); }
.btn:disabled, .sel:disabled { opacity: 0.35; cursor: not-allowed; filter: none; }

/* ── 패널 ── */
.panel {
  border-left: 1px solid var(--line);
  padding: 18px 20px;
  overflow-y: auto;
  background: var(--bg);
}
.counts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.count { padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.count .n { font-family: var(--serif); font-size: 34px; line-height: 1; }
.count .l { color: var(--muted); margin-top: 6px; font-size: 12px; }
.count.bad .n { color: var(--lexicon); }
.count.good .n { color: var(--concrete); }

.block { margin-bottom: 20px; }
.block-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 8px;
}
.block-title .sub { text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--ink); }
.spark { width: 100%; height: 60px; display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.spark rect { fill: var(--rhythm); opacity: 0.55; }
.spark rect.flat { fill: var(--template); opacity: 0.9; }
.spark line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.statline { display: flex; gap: 14px; margin-top: 8px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.statline b { color: var(--ink); font-weight: 600; }

.why { padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; }
.why-kind { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.why-text { font-size: 13px; }

.markers { list-style: none; margin: 0; padding: 0; }
.markers li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 8px; margin: 0 -8px;
  border-radius: 4px; cursor: pointer;
  font-size: 13px;
}
.markers li:hover, .markers li.active { background: var(--paper); }
.markers .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative; top: -1px; }
.markers .dot.hygiene  { background: var(--hygiene); }
.markers .dot.template { background: var(--template); }
.markers .dot.lexicon  { background: var(--lexicon); }
.markers .dot.hedge    { background: var(--hedge); }
.markers .dot.rhythm   { background: var(--rhythm); }
.markers .dot.concrete { background: var(--concrete); }
.markers .lbl { color: var(--muted); flex: none; min-width: 84px; font-size: 12px; }
.markers .txt { font-family: var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.markers .empty { color: var(--muted); cursor: default; }
.markers .empty:hover { background: transparent; }

/* ── 키 팝업: 첫 입력 때 한 번. 맞든 틀리든 아무 말 없이 닫힌다. ── */
.modal { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 45%, transparent); display: flex; align-items: center; justify-content: center; z-index: 10; }
.modal[hidden] { display: none; }   /* display:flex 가 UA 의 [hidden]{display:none} 을 이긴다 — 명시해야 hidden 이 먹는다 */
.modal-box { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; width: min(360px, 90vw); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal-title { font-family: var(--serif); font-size: 18px; }
.modal-sub { color: var(--muted); font-size: 12px; margin: 4px 0 12px; }
.modal-input { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); box-sizing: border-box; }
.modal-input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ── human error 모드: 주 기능. 버튼 그룹 + 바뀐 자리 표시 ── */
.human { display: flex; align-items: center; gap: 8px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.1); background: var(--accent); }
.btn.ghost { border-color: var(--line); color: var(--muted); }
.btn.ghost:hover { color: var(--ink); background: var(--paper); }
.sel { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); }
.editor-foot { flex-wrap: wrap; }
:root { --change: #b8860b; }
@media (prefers-color-scheme: dark) { :root { --change: #e0b04a; } }
.backdrop mark.change { background: color-mix(in srgb, var(--change) 32%, transparent); outline: 1px solid var(--change); }
.markers .dot.change  { background: var(--change); }

/* ── confusable: 키보드 문자와 눈으로 구분 안 되는 닮은꼴. 물결 밑줄 — 보이는 차이가 없으니 표시가 눈에 띄어야 한다. ── */
:root { --confusable: #a0457f; }
@media (prefers-color-scheme: dark) { :root { --confusable: #d98cc0; } }
.backdrop mark.confusable { background: color-mix(in srgb, var(--confusable) 30%, transparent); text-decoration: underline wavy var(--confusable); text-decoration-skip-ink: none; }
.markers .dot.confusable  { background: var(--confusable); }
.btn.conf { border-color: var(--confusable); color: var(--confusable); }
.btn.conf:hover { background: color-mix(in srgb, var(--confusable) 12%, transparent); }

/* ── input: 1차 입력 집합 밖의 문자. 위생 다음으로 강한 구조 신호. ── */
:root { --input: #3f6f8f; }
@media (prefers-color-scheme: dark) { :root { --input: #6fa3c7; } }
.backdrop mark.input { background: color-mix(in srgb, var(--input) 28%, transparent); outline: 1px dashed var(--input); }
.markers .dot.input  { background: var(--input); }

/* ── 후원 링크. 뷰포트 우하단 고정 — 패널 위에 뜨므로 패널 하단에 여백을 줘서
      마지막 마커가 가리지 않게 한다. 색은 전부 토큰이라 9개 테마를 그대로 따라간다. ── */
.coffee {
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;   /* 없으면 고정 배치의 shrink-to-fit 폭이 좁게 잡혀 세 줄로 접힌다 */
  color: var(--muted);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.coffee:hover { color: var(--ink); border-color: var(--accent); }
.coffee svg { width: 13px; height: 13px; flex: none; }
.panel { padding-bottom: 56px; }

/* 좁은 화면은 페이지 전체가 스크롤되므로 고정해두면 계속 본문을 덮는다. 문서 끝 오른쪽으로 흘린다.
   이 블록은 위의 .coffee 기본 규칙보다 뒤에 있어야 한다 — 같은 특이도라 순서가 이긴다. */
@media (max-width: 900px) {
  .coffee { position: static; display: flex; width: max-content; margin: 4px 20px 18px auto; }
  .panel { padding-bottom: 18px; }
}