@charset "utf-8";
/* ==========================================================================
   기부자 페이지 — 기부내역 조회 · 약정 조회
   원본 sub06/01·01a(기부내역), sub06/08·08a(약정)의 개인/사업자 두 페이지를
   탭 하나로 합쳤다. 탭 상태는 URL 해시(#personal / #business)로 유지한다.
   ========================================================================== */

.lookup{max-width:660px;margin-inline:auto}

/* ---------- 개인 / 사업자 탭 ---------- */
.lookup__tabs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  padding:7px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line);
  margin-bottom:28px;
}
.lookup__tab{
  appearance:none;border:0;cursor:pointer;
  padding:13px 10px;border-radius:999px;background:transparent;
  font-size:15.5px;font-weight:700;color:var(--text-mid);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .18s,color .18s,box-shadow .18s;
}
.lookup__tab:hover{color:var(--brand-strong)}
.lookup__tab[aria-selected="true"]{
  background:linear-gradient(135deg,var(--royal),var(--royal-deep));color:#fff;
  box-shadow:0 6px 16px rgba(59,117,192,.32);
}
.lookup__tab svg{flex:none}

/* ---------- 안내 박스 ---------- */
.lookup__notice{
  display:flex;gap:13px;align-items:flex-start;
  padding:18px 20px;border-radius:var(--radius-m);margin-bottom:26px;
  background:#fff8ec;border:1px solid #f3ddb8;
}
.lookup__notice .ico{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-deep);color:#fff;margin-top:1px;
}
.lookup__notice ul{display:flex;flex-direction:column;gap:7px}
.lookup__notice li{
  font-size:13.5px;line-height:1.65;color:#7a5312;word-break:keep-all;
}
.lookup__notice b{color:#5c3d08;font-weight:800}
.lookup__notice a{color:var(--brand-strong);font-weight:800;text-decoration:underline}

/* ---------- 폼 카드 ---------- */
.lookup__panel[hidden]{display:none}
.lookup__card{
  padding:34px 34px 30px;border-radius:var(--radius-l);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-m);
}
.lookup__card h2{
  font-size:19px;font-weight:900;letter-spacing:-.03em;color:var(--text);
  padding-bottom:18px;margin-bottom:24px;border-bottom:2px solid var(--brand);
}

.field{margin-bottom:22px}
.field > label,.field__legend{
  display:block;font-size:14px;font-weight:800;color:var(--text);margin-bottom:9px;
  word-break:keep-all;
}
.field .req{color:#d5432f;margin-left:3px}
.field__hint{display:block;font-size:12.5px;font-weight:500;color:var(--text-dim);margin-top:3px}

.field input[type="text"]{
  width:100%;padding:14px 16px;border-radius:var(--radius-s);
  border:1px solid var(--field-line);background:var(--surface);
  font:inherit;font-size:15.5px;color:var(--text);
  transition:border-color .16s,box-shadow .16s;
}
/* 자리표시자도 글자입니다. WCAG 1.4.3 의 4.5:1 을 지켜야 합니다.
   옅은 회색(#9aa7b2 · #a8b2ba)은 2.2~2.5:1 이라, 저시력인 분께는
   무엇을 넣으라는 안내가 아예 보이지 않았습니다. */
.field input::placeholder{color:var(--text-dim)}
.field input:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(0,116,176,.14);
}
.field input[aria-invalid="true"]{border-color:#d5432f;background:#fffafa}
.field input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(213,67,47,.14)}

/* 사업자등록번호 3칸 */
.bizno{display:flex;align-items:center;gap:10px}
.bizno input{text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.bizno span{color:var(--text-dim);font-weight:700;flex:none}
.bizno input:nth-of-type(1){flex:0 1 96px}
.bizno input:nth-of-type(2){flex:0 1 76px}
.bizno input:nth-of-type(3){flex:1 1 130px}

.field__err{
  display:none;margin-top:8px;font-size:13px;font-weight:700;color:#d5432f;
  align-items:center;gap:6px;word-break:keep-all;
}
.field.is-invalid .field__err{display:flex}

.lookup__submit{
  width:100%;margin-top:8px;padding:17px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,var(--royal),var(--royal-deep));color:#fff;
  font-size:16.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 10px 24px rgba(59,117,192,.32);
  transition:transform .18s,box-shadow .18s;
}
.lookup__submit:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(59,117,192,.42)}

/* ---------- 개인정보 안내 ---------- */
.lookup__privacy{
  display:flex;gap:11px;align-items:flex-start;
  margin-top:22px;padding:16px 18px;border-radius:var(--radius-m);
  background:var(--bg-alt);border:1px solid var(--line);
}
.lookup__privacy svg{flex:none;color:var(--text-dim);margin-top:2px}
.lookup__privacy p{font-size:12.5px;line-height:1.7;color:var(--text-mid);word-break:keep-all}

/* ---------- 문의 ---------- */
.lookup__help{
  margin-top:26px;padding:20px 24px;border-radius:var(--radius-m);
  background:var(--navy);color:rgba(255,255,255,.82);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;
}
.lookup__help p{font-size:13.5px;word-break:keep-all}
.lookup__help b{color:#fff;font-weight:800}
.lookup__help a{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:11px 20px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  color:#fff;font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums;
  transition:background .18s;
}
.lookup__help a:hover{background:rgba(255,255,255,.26)}

@media (max-width:620px){
  .lookup__card{padding:26px 20px 24px}
  .lookup__tab{font-size:14.5px;padding:12px 6px}
  .bizno{gap:7px}
  .bizno input:nth-of-type(1){flex:1 1 0}
  .bizno input:nth-of-type(2){flex:1 1 0}
  .bizno input:nth-of-type(3){flex:1.6 1 0}
  .lookup__help{flex-direction:column;align-items:flex-start}
  .lookup__help a{width:100%;justify-content:center}
}