:root{
  --bg:#0b1220;
  --card:#121b2f;
  --text:#e9eefc;
  --muted:#a9b4d6;
  --line:rgba(255,255,255,.12);
  --btn:#3b82f6;
  --btn2:rgba(255,255,255,.12);

  /* 상태/강조 */
  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;

  /* 포커스/그림자/라운드 통일 */
  --focus: rgba(59,130,246,.45);
  --shadow: 0 16px 40px rgba(0,0,0,.35);
  --radius:16px;
}

*{box-sizing:border-box}
html, body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background:
    radial-gradient(900px 600px at 15% 10%, #1a2a57 0%, transparent 55%),
    radial-gradient(900px 600px at 85% 20%, #173b2c 0%, transparent 55%),
    var(--bg);
  color:var(--text);
}

.wrap{max-width:920px; margin:0 auto; padding:28px 18px 60px}

.header h1{margin:0; font-size:28px; letter-spacing:-.2px}
.sub{margin:8px 0 0; color:var(--muted)}

.card{
  margin-top:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}

h2{margin:0 0 12px; font-size:18px}
.hint{margin:0 0 10px; color:var(--muted); font-size:13px}

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

/* ✅ index.html에서 새로 쓴 클래스들(인라인 제거용) */
.grid--mt-md{ margin-top:14px; }

label span{display:block; font-size:13px; color:var(--muted); margin:0 0 6px}

input, textarea, select{
  width:100%;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  color:var(--text);
  padding:12px 12px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* 포커스 UX 개선 */
input:focus, textarea:focus, select:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px var(--focus);
}

/* number input 스핀 버튼(크롬) 너무 튀는거 완화 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  opacity:.6;
}

/* select 기본 스타일 보정 + 화살표 */
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
    linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size:6px 6px, 6px 6px, 100% 100%;
  background-repeat:no-repeat;
  padding-right:34px;
}

textarea{resize:vertical}

/* actions */
.actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* ✅ 인라인 제거용 유틸 클래스들 */
.actions--start{ justify-content:flex-start; }
.actions--gap-sm{ gap:8px; }
.actions--mb-sm{ margin-bottom:12px; }
.actions--my-sm{ margin:12px 0; }
.actions--mt-sm{ margin-top:10px; }

/* ✅ 주소 input이 화면에 맞게 늘어나도록 */
.input-grow{
  flex:1;
  min-width:240px;
}

/* ✅ label+select(용도지역/용도) 레이아웃 통일 */
.field{
  flex:1;
  min-width:240px;
}
.field__label{
  display:block;
  margin-bottom:6px;
}
.field__control{
  width:100%;
}

button{
  border:0;
  border-radius:12px;
  padding:10px 14px;
  color:white;
  background:var(--btn);
  cursor:pointer;
  font-weight:700;
  transition: transform .05s ease, filter .15s ease, opacity .15s ease;
}

button.ghost{
  background:var(--btn2);
  border:1px solid var(--line);
}

button:active{transform: translateY(1px)}
button:hover{filter:brightness(1.05)}

/* 비활성 */
button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* 결과 박스 */
.result{
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  border:1px dashed var(--line);
  color:var(--text);
  min-height:52px;
  background: rgba(0,0,0,.08);
}

/* ✅ 체크리스트 카드(공통) */
.checklistCard{
  margin-top:12px;
  border:1px dashed var(--line);
  background: rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding:12px;
}

/* ✅ 체크리스트 상단 서버판정 바/노트 (index.html 인라인 제거용) */
.checklistServerBar{
  margin:0 0 10px;
}
.checklistNote{
  margin:0 0 12px;
  line-height:1.45;
}

/* ✅ 초기 숨김용 클래스(표시/숨김은 JS가 style.display로도 제어) */
.is-hidden{
  display:none;
}

/* 기존 id 스타일은 “호환용 최소”만 유지 */
#checklistCard{
  background: rgba(0,0,0,.10);
}

/* ✅ checklistList 내부 여백/구분 */
#checklistList{
  margin-top:10px;
}
#checklistList:empty{
  margin-top:0;
}

/* ✅ missing 힌트 톤 통일 */
.missing-hint{
  margin-top:6px;
  font-size:12px;
  opacity:.95;
  color: var(--warn);
}

/* ✅ judge hint 작은 텍스트 */
.muted-sm{
  font-size:12px;
  opacity:.85;
}

/* ✅ 지도 영역 */
.map{
  height:280px;
  border-radius:14px;
  overflow:hidden;
  margin-top:10px;
  border:1px solid rgba(255,255,255,.10);
}

#map{
  border:1px solid rgba(255,255,255,.10);
}

/* 요약 박스 pre 가독성 */
#summaryBox pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
}

/* 링크 스타일(법령 링크) */
a{
  color:#7ab7ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover{
  filter:brightness(1.1);
}

/* 스크롤바 */
*::-webkit-scrollbar{height:10px; width:10px}
*::-webkit-scrollbar-thumb{background: rgba(255,255,255,.18); border-radius:999px}
*::-webkit-scrollbar-track{background: rgba(0,0,0,.12)}

.footer{margin-top:14px; color:var(--muted)}

@media (max-width:720px){
  .grid{grid-template-columns:1fr}
}

/* =========================================================
   ✅ script.js에서 새로 추가된 클래스들
========================================================= */

.inlineDim{ opacity:.75; }

.calcNote{
  opacity:.85;
  margin-top:8px;
}

.ruleAppliedMeta{
  margin-top:6px;
  opacity:.9;
}

.useRow{
  margin-top:6px;
  opacity:.9;
}

.geoName{
  margin-top:6px;
  opacity:.9;
}
.geoCoord{
  margin-top:6px;
}

.ruleAutoZoning{ margin-top:6px; }
.ruleAutoDone{ margin-top:6px; opacity:.9; }
.ruleAutoJuris{ margin-top:6px; opacity:.9; }

.summaryPre{
  white-space:pre-wrap;
  margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
}

/* 체크리스트 상단 헤더 */
.clHeader{
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(0,0,0,.12);
  margin-bottom:12px;
}
.clHeaderRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.clHeaderText{ min-width:0; }
.clHeaderTitle{ font-weight:900; }
.clHeaderHint{
  opacity:.85;
  font-size:12px;
  margin-top:6px;
  line-height:1.45;
}
.clToggleAllBtn{ white-space:nowrap; }

.clBody{ display:block; }

.clItem{
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.10);
}
.clItem:first-of-type{
  border-top:0;
}
.clItemTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.clItemTitle{ font-weight:800; }
.clJudge{
  font-size:12px;
  opacity:.95;
  text-align:right;
}
.clWhy{
  opacity:.85;
  font-size:13px;
  margin-top:6px;
}

.clAppliesTo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:12px;
  color: var(--muted);
  line-height:1.25;
  max-width:100%;
  white-space:normal;
  word-break:keep-all;
}
@media (max-width:720px){
  .clAppliesTo{
    display:flex;
    border-radius:14px;
  }
}

.clNeedInputLine{
  opacity:.85;
  font-size:13px;
  margin-top:4px;
}

.clInputLabel{ display:block; margin-top:10px; }
.clInputCaption{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  opacity:.9;
  color: var(--muted);
}
.clInput{ width:100%; }

.clRefs{
  opacity:.75;
  font-size:12px;
  margin-top:10px;
}

.clLaws{ margin-top:10px; }

.clJudgeMsg{
  font-size:12px;
  opacity:.9;
  margin-top:10px;
  line-height:1.45;
}

/* =========================
   ✅ LAW PANEL + LAW CARD
========================= */
.lawsPanel{
  margin-top:10px;
  padding:10px;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:14px;
  background: rgba(0,0,0,.10);
}

/* ✅ FIX: 래퍼 div 간격을 확실하게 */
.lawsPanel > div + div{ margin-top:10px; }

.lawCard{
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background: rgba(0,0,0,.18);
}

.lawCardTop{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
}
.lawCardTitle{ font-weight:900; }
.lawCardDate{
  opacity:.8;
  font-size:12px;
  white-space:nowrap;
}
.lawCardMeta{
  opacity:.85;
  font-size:12px;
  margin-top:6px;
}
.lawCardSummary{
  opacity:.92;
  font-size:13px;
  margin-top:8px;
  line-height:1.5;
}
.lawCardSub{
  opacity:.85;
  font-size:12px;
  margin-top:6px;
}
.lawCardLink{
  margin-top:8px;
  font-size:12px;
}

/* =========================
   ✅ JUDGE BADGE (pill)
========================= */
.judgeBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size:12px;
  font-weight:900;
  line-height:1;
}

.judgeBadge--allow{
  color: var(--good);
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
}
.judgeBadge--conditional{
  color: var(--warn);
  border-color: rgba(245,158,11,.40);
  background: rgba(245,158,11,.10);
}
.judgeBadge--deny{
  color: var(--bad);
  border-color: rgba(239,68,68,.40);
  background: rgba(239,68,68,.10);
}
.judgeBadge--need_input{
  color: var(--warn);
  border-color: rgba(96,165,250,.35);
  background: rgba(96,165,250,.10);
}
.judgeBadge--unknown{
  color: var(--muted);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}

/* 입력 누락 강조 */
input[data-missing="1"]{
  border-color: var(--warn) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .22) !important;
}