:root {
  --bg: #F4F5F2;
  --paper: #FFFFFF;
  --ink: #232B26;
  --ink-soft: #5B655F;
  --line: #DCE1DC;
  --pine: #3E6259;
  --pine-dark: #2C4740;
  --amber: #A67A00;
  --amber-bg: #FBF1DC;
  --rose: #A24C63;
  --rose-bg: #FBE9EE;
  --slate: #40597F;
  --slate-bg: #E9EFF7;
  --plum: #74537E;
  --plum-bg: #F1E9F3;
  --sage: #5C7A5E;
  --sage-bg: #E9F0E7;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}

.masthead {
  background: var(--pine-dark);
  color: #F4F5F2;
  padding: 28px 24px;
}
.masthead-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.mark {
  font-size: 34px;
  color: #E7C77C;
  line-height: 1;
}
.brand-logo-box {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}
.brand-logo-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-logo-box-small {
  width: 38px;
  height: 38px;
  padding: 5px;
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid #E8ECE7;
}
.masthead h1 {
  margin: 0 0 2px;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.brand-byline {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 700;
  color: #E7C77C;
}
.tagline {
  margin: 0;
  font-size: 13px;
  color: #C6D2CB;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}

.status-bar {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  background: #EDEEE9;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.status-bar[data-kind="ready"] { background: var(--sage-bg); color: var(--sage); border-color: #CBDDCB; }
.status-bar[data-kind="error"] { background: var(--rose-bg); color: var(--rose); border-color: #EFC9D2; }

.notice-card {
  background: #FFF8E8;
  border: 1px solid #E8D29A;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
  color: var(--ink);
}
.notice-card h2 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--amber);
}
.notice-card p {
  margin: 6px 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.notice-card strong { color: var(--ink); }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.panel h2 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pine-dark);
}
.section-desc {
  margin: 0 0 16px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
}

textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: #FCFDFB;
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--pine); outline-offset: 1px; }
textarea[readonly] { background: #F8F9F6; }

.panel-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  background: var(--pine);
  color: #fff;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--pine-dark); }
button:disabled { background: #C7CDC7; cursor: not-allowed; }
button.secondary {
  background: transparent;
  color: var(--pine-dark);
  border: 1px solid var(--pine);
}
button.secondary:hover { background: var(--sage-bg); }

.hint { font-size: 12.5px; color: var(--ink-soft); }

.candidate-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.candidate-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #FCFDFB;
  font-size: 13.5px;
}
.candidate-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--pine); }
.candidate-text { font-weight: 600; flex: 0 0 auto; }
.candidate-type {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.type-이름\/고유명사 { background: var(--amber-bg); color: var(--amber); }
.type-전화번호\ 등 { background: var(--rose-bg); color: var(--rose); }
.type-이메일 { background: var(--slate-bg); color: var(--slate); }
.type-URL { background: var(--slate-bg); color: var(--slate); }
.type-주민번호 { background: var(--plum-bg); color: var(--plum); }
.type-날짜 { background: var(--sage-bg); color: var(--sage); }
.type-수동추가 { background: #EEEEEE; color: #555; }
.candidate-count { color: var(--ink-soft); font-size: 12px; }
.candidate-label-input {
  margin-left: auto;
  width: 90px;
  font-size: 12.5px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.manual-add { border-top: 1px dashed var(--line); padding-top: 16px; }
.manual-add label { font-size: 12.5px; color: var(--ink-soft); display: block; margin-bottom: 6px; }
.manual-add-row { display: flex; gap: 8px; }
.manual-add-row input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
}

footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 40px;
  font-size: 12px;
  color: var(--ink-soft);
}

.review-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.review-actions button {
  padding: 7px 10px;
  font-size: 12.5px;
}
.candidate-summary {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.candidate-confidence {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: #fff;
}
.confidence-high { color: var(--pine-dark); border-color: #CBDDCB; background: var(--sage-bg); }
.confidence-medium { color: var(--amber); border-color: #E7D3A4; background: var(--amber-bg); }
.confidence-low { color: var(--ink-soft); }
.type-person { background: var(--amber-bg); color: var(--amber); }
.type-family { background: var(--plum-bg); color: var(--plum); }
.type-org { background: var(--sage-bg); color: var(--sage); }
.type-place { background: #EEF3EF; color: var(--pine); }
.type-proper { background: #EEEEEE; color: #555; }
.type-phone { background: var(--rose-bg); color: var(--rose); }
.type-email { background: var(--slate-bg); color: var(--slate); }
.type-url { background: var(--slate-bg); color: var(--slate); }
.type-resident { background: var(--plum-bg); color: var(--plum); }
.type-date { background: var(--sage-bg); color: var(--sage); }
.type-manual { background: #EEEEEE; color: #555; }

footer .oss-notice {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.6;
  color: #7A817B;
}
footer .oss-notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}