:root{
  --fg:#1b1b1f;
  --bg:#ffffff;
  --muted:#5a5a63;
  --border:#d9d9e0;
  --accent:#0b5fff;
  --warn-bg:#fff6e0;
  --warn-border:#e0b23c;
  --ok-bg:#e9f7ec;
  --ok-border:#2f9e44;
  --ok-bg-muted:#eef5f0;
  --ok-border-muted:#9fc2a8;
  --ok-text-muted:#3a6b45;
  --no-bg:#f1f2f4;
  --err-bg:#fdeaea;
  --err-border:#d64545;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:-apple-system,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.55;
  padding:0 0 3rem;
}

header.top{
  padding:1.2rem 1rem 0.6rem;
  border-bottom:1px solid var(--border);
}
header.top h1{
  margin:0 0 0.3rem;
  font-size:1.4rem;
}
.sub{
  margin:0;
  color:var(--muted);
  font-size:0.85rem;
}

.disclaimer{
  margin:0.8rem 1rem;
  padding:0.8rem 1rem;
  background:var(--warn-bg);
  border:1px solid var(--warn-border);
  border-radius:8px;
  font-size:0.9rem;
}
.disclaimer p{margin:0 0 0.5rem;}
.disclaimer details{margin-top:0.4rem;}

.error-banner{
  margin:0.8rem 1rem;
  padding:0.8rem 1rem;
  background:var(--err-bg);
  border:1px solid var(--err-border);
  border-radius:8px;
  color:#8a1f1f;
  font-weight:bold;
}

.tabs{
  display:flex;
  gap:0.4rem;
  margin:1rem 1rem 0;
  border-bottom:1px solid var(--border);
}
.tab-btn{
  flex:1;
  padding:0.6rem 0.4rem;
  border:1px solid var(--border);
  border-bottom:none;
  background:var(--no-bg);
  border-radius:8px 8px 0 0;
  font-size:0.85rem;
  cursor:pointer;
  color:var(--muted);
}
.tab-btn.active{
  background:var(--bg);
  color:var(--fg);
  font-weight:bold;
  border-bottom:2px solid var(--bg);
  margin-bottom:-1px;
}

.tab-panel{
  display:none;
  padding:1rem;
}
.tab-panel.active{display:block;}

h2{font-size:1.1rem;margin-top:0;}

.hint{
  font-size:0.85rem;
  color:var(--muted);
  background:var(--no-bg);
  padding:0.6rem 0.8rem;
  border-radius:6px;
}
.hint a{color:var(--accent);}

.search-form{
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  margin:1rem 0;
}
.search-form label{
  font-size:0.85rem;
  font-weight:bold;
  margin-top:0.4rem;
}
.search-form input[type="text"],
.search-form select{
  padding:0.55rem 0.6rem;
  font-size:1rem;
  border:1px solid var(--border);
  border-radius:6px;
  width:100%;
}
.checkbox-line{
  font-size:0.9rem;
  margin-top:0.3rem;
}
.search-form button,
.tier2-mode button{
  margin-top:0.6rem;
  padding:0.6rem 1rem;
  border:none;
  border-radius:6px;
  background:var(--accent);
  color:#fff;
  font-size:1rem;
  font-weight:bold;
  cursor:pointer;
  align-self:flex-start;
}
.search-form button:hover,
.tier2-mode button:hover{opacity:0.9;}

.myCodeWrap{margin:0.8rem 0;}
.myCodeWrap label{font-size:0.85rem;font-weight:bold;}
.myCodeWrap input{
  padding:0.5rem 0.6rem;
  border:1px solid var(--border);
  border-radius:6px;
  width:100%;
  max-width:220px;
  margin-top:0.2rem;
}

.tier2-mode{
  display:flex;
  gap:0.5rem;
  margin:0.8rem 0;
}
.mode-btn{
  flex:1;
  padding:0.5rem;
  border:1px solid var(--border);
  background:var(--no-bg);
  border-radius:6px;
  cursor:pointer;
  font-size:0.85rem;
}
.mode-btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  font-weight:bold;
}

.result-area{margin-top:1rem;}
.result-msg{
  padding:0.7rem 0.9rem;
  border-radius:6px;
  background:var(--no-bg);
  font-size:0.9rem;
}
.result-msg.error{
  background:var(--err-bg);
  color:#8a1f1f;
  font-weight:bold;
}

.card{
  border:1px solid var(--border);
  border-radius:8px;
  padding:0.8rem 0.9rem;
  margin-bottom:0.8rem;
  font-size:0.9rem;
}
.card h3{
  margin:0 0 0.4rem;
  font-size:0.98rem;
}
.card .code{
  color:var(--muted);
  font-family:monospace;
  font-size:0.85rem;
}

.badge{
  display:inline-block;
  padding:0.15rem 0.5rem;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:bold;
  margin:0.15rem 0.3rem 0.15rem 0;
}
.badge.ok{background:var(--ok-bg);color:#1c6b2c;border:1px solid var(--ok-border);}
.badge.warn{background:var(--warn-bg);color:#7a5b00;border:1px solid var(--warn-border);}
.badge.no{background:var(--no-bg);color:var(--muted);border:1px solid var(--border);}
.badge.err{background:var(--err-bg);color:#8a1f1f;border:1px solid var(--err-border);}

.verdict{
  font-weight:bold;
  padding:0.6rem 0.8rem;
  border-radius:6px;
  margin-bottom:0.6rem;
}
/* 배제 대상에 해당할 수 있음 = 사용자에게 불리한 결과 → 주의색(주황) */
.verdict-excluded{background:var(--warn-bg);border:1px solid var(--warn-border);color:#7a5b00;}
/* 지역 미선택 등으로 판정을 보류 → 동일한 주의색이지만 문맥은 "정보 부족" */
.verdict-pending{background:var(--warn-bg);border:1px solid var(--warn-border);color:#7a5b00;}
/* 배제되지 않음 = 사용자에게 유리한 결과 → 초록이되, 확정 판정이 아니므로 톤을 절제 */
.verdict-not-excluded{background:var(--ok-bg-muted);border:1px solid var(--ok-border-muted);color:var(--ok-text-muted);}

.legal-text{
  white-space:pre-wrap;
  font-size:0.85rem;
  background:var(--no-bg);
  padding:0.6rem 0.8rem;
  border-radius:6px;
  margin:0.4rem 0;
}
.raw-block{
  white-space:pre-wrap;
  font-size:0.82rem;
  background:#f6f6f9;
  border:1px dashed var(--border);
  padding:0.5rem 0.6rem;
  border-radius:6px;
  margin:0.4rem 0;
}

.list-inline{
  margin:0.3rem 0;
  padding-left:1.1rem;
  font-size:0.85rem;
}

.field-row{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
  margin:0.5rem 0;
}
.field-row label{
  font-size:0.8rem;
  display:flex;
  flex-direction:column;
  gap:0.2rem;
}
.field-row input{
  padding:0.4rem 0.5rem;
  border:1px solid var(--border);
  border-radius:6px;
  width:8rem;
}

.notes{
  margin:1.5rem 1rem 0;
  border-top:1px solid var(--border);
  padding-top:1rem;
}
.notes details{
  margin-bottom:0.8rem;
  font-size:0.88rem;
}
.notes summary{
  cursor:pointer;
  font-weight:bold;
}
.caution{
  font-size:0.85rem;
  color:#7a5b00;
  background:var(--warn-bg);
  border:1px solid var(--warn-border);
  padding:0.6rem 0.8rem;
  border-radius:6px;
}
.source-line{
  font-size:0.78rem;
  color:var(--muted);
  margin-top:1rem;
}

@media (min-width:640px){
  .search-form{max-width:520px;}
  #capitalCityWrap select{max-width:520px;}
}