/* 공공데이터 조회 화면 — 65세 이상 기준
 * 단계를 번호로 끊고, 고른 것만 남긴다. 격자좌표 같은 숫자는 화면에 내지 않는다.
 * 나란히 놓는 것은 높이를 같게 맞춘다(들쑥날쑥해 보이지 않게).
 */
.pd { --pd-red: #e3071b; --pd-line: #e4e6ea; --pd-mut: #5b6270; --pd-panel: #f7f8fa; }

.pd-step { display: flex; align-items: center; gap: 9px; margin: 22px 0 10px;
  font-size: 18px; font-weight: 800; color: #151a22; }
.pd-step:first-of-type { margin-top: 14px; }
.pd-step > b { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--pd-red);
  color: #fff; font-size: 15px; flex: 0 0 auto; }

/* 1단계 — 무엇을. 드롭다운에 숨기지 않고 펼쳐 둔다. */
.pd-kinds { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.pd-kind { display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  min-height: 56px; padding: 6px 14px; border:1px solid #d5d8dd; border-radius: 13px;
  background: #fff; cursor: pointer; text-align: left; font: inherit; }
.pd-kind > b { font-size: 16.5px; font-weight: 800; color: #151a22; }
.pd-kind > span { font-size: 13px; color: var(--pd-mut); word-break: keep-all; line-height: 1.45; }
.pd-kind:hover { border-color: #b9bdc5; background: var(--pd-panel); }
.pd-kind.on { border-color: var(--pd-red); background: var(--pd-red); }
.pd-kind.on > b, .pd-kind.on > span { color: #fff; }
.pd-kind:focus-visible { outline: 3px solid #1b6fd0; outline-offset: 2px; }

/* 2단계 — 어디를. 상자 높이를 서로 맞춘다. */
.pd-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.pd-f { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px; border: 1px solid var(--pd-line); border-radius: 14px; background: var(--pd-panel); }
.pd-f.pd-grow { flex: 2 1 320px; }
.pd-f > span { font-size: 14px; font-weight: 800; color: var(--pd-mut); }
.pd-inline { display: flex; gap: 7px; align-items: stretch; }
.pd-inline > .pd-input { flex: 1 1 auto; min-width: 0; }
.pd-inline > .fms-button { flex: 0 0 auto; min-height: 46px; }

.pd-input, .pd-select { width: 100%; min-height: 46px; padding: 0 15px; border:1px solid #d5d8dd;
  border-radius: 999px; background: #fff; font: inherit; font-size: 14px; font-weight: 700;
  color: #151a22; box-sizing: border-box; }
.pd-select { appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c525e' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.pd-input:focus-visible, .pd-select:focus-visible { outline: 3px solid #1b6fd0; outline-offset: 2px; }

.pd-place { margin: 10px 0 0; padding: 12px 15px; border-radius: 13px;
  background: #eaf6ee; border:1px solid #a8d8bd; color: #0b6b4a;
  font-size: 16px; font-weight: 800; line-height: 1.5; word-break: keep-all; }
.pd-clear { margin-left: 8px; border: 0; background: transparent; color: #0b6b4a;
  font: inherit; font-size: 14px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.pd-hint { margin: 10px 0 0; font-size: 14px; color: var(--pd-mut); line-height: 1.6; word-break: keep-all; }

/* 주소 후보 */
.pd-cands { display: grid; gap: 7px; margin-top: 10px; }
.pd-cands > button { display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  min-height: 46px; padding: 11px 15px; border:1px solid #d5d8dd; border-radius: 13px;
  background: #fff; cursor: pointer; text-align: left; font: inherit; }
.pd-cands > button:hover { border-color: var(--pd-red); background: #fff5f6; }
.pd-cands > button > b { font-size: 16px; font-weight: 800; }
.pd-cands > button > span { font-size: 13px; color: var(--pd-mut); }

.pd-go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: stretch; }
.pd-go > .fms-button { min-height: 56px; padding: 0 28px; font-size: 17px; }

.pd-busy { margin: 12px 0 0; padding: 12px 15px; border-radius: 13px; background: #eef4fd;
  border:1px solid #b9d3f5; color: #114a8a; font-size: 16px; font-weight: 800; }
.pd-error { margin: 12px 0 0; padding: 12px 15px; border-radius: 13px; background: #fdecec;
  border:1px solid #f0b3b3; color: #8a1414; font-size: 16px; font-weight: 800;
  line-height: 1.55; word-break: keep-all; }

/* 결과 — 표로 본다. JSON 은 접어 둔다. */
.pd-result { margin-top: 18px; }
.pd-when { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--pd-mut); word-break: keep-all; }
.pd-none { margin: 0; padding: 18px; border-radius: 13px; background: var(--pd-panel);
  color: var(--pd-mut); font-size: 16px; font-weight: 700; text-align: center; }
.pd-none.pd-ok { background: #eaf6ee; color: #0b6b4a; }
.pd-scroll { overflow-x: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
.pd-table th, .pd-table td { padding: 10px 12px; border-bottom: 1px solid var(--pd-line);
  text-align: center; white-space: nowrap; }
.pd-table thead th { background: var(--pd-panel); font-weight: 800; color: var(--pd-mut); font-size: 14px; }
.pd-table td b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pd-basis { margin: 8px 0 0; font-size: 13px; color: var(--pd-mut); }

/* 지금 시각 줄 — 열두 줄을 눈으로 훑지 않게 한다.
   색만으로 알리지 않고 '지금' 이라는 글자도 함께 넣는다. */
.pd-table tr.pd-now > td { background: #fff2f3; color: var(--pd-red); font-weight: 800; }
.pd-table tr.pd-now > td:first-child { box-shadow: inset 4px 0 0 var(--pd-red); }
.pd-table tr.pd-now > td b { color: var(--pd-red); font-size: 19px; }
.pd-nowtag { display: inline-block; padding: 2px 7px; margin-right: 5px; border-radius: 999px;
  background: var(--pd-red); color: #fff; font-size: 12px; font-weight: 800; font-style: normal;
  vertical-align: 2px; }
/* 표를 못 보는 상황에서도 지금 값만 한 줄로 읽히게 한다 */
.pd-nowline { margin: 10px 0 0; padding: 13px 16px; border-radius: 13px;
  background: #fff2f3; border:1px solid #f0b3b3; color: #8a1414;
  font-size: 16.5px; font-weight: 800; line-height: 1.6; word-break: keep-all; }
.pd-nowline b { font-size: 18px; font-variant-numeric: tabular-nums; }

.pd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pd-list > li { display: flex; flex-direction: column; gap: 3px; padding: 12px 15px;
  border: 1px solid var(--pd-line); border-radius: 13px; background: #fff; }
.pd-list > li > b { font-size: 16px; font-weight: 800; word-break: keep-all; }
.pd-list > li > span { font-size: 13px; color: var(--pd-mut); }

.pd-cells { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pd-cells > div { padding: 12px 14px; border-radius: 13px; background: var(--pd-panel); }
.pd-cells > div > span { display: block; font-size: 13px; font-weight: 800; color: var(--pd-mut); margin-bottom: 3px; }
.pd-cells > div > b { font-size: 17px; font-weight: 800; word-break: keep-all; }

.pd-raw { margin-top: 12px; min-height: 48px; }
.pd-json { margin: 10px 0 0; padding: 14px; border-radius: 13px; background: #151a22; color: #d7e3f4;
  font-size: 12.5px; line-height: 1.6; overflow-x: auto; max-height: 380px; }

@media (max-width: 560px) {
  .pd-kinds { grid-template-columns: 1fr 1fr; }
  .pd-f, .pd-f.pd-grow { flex: 1 1 100%; }
}

/* ★ 대장을 다 보여 주면서 생긴 것들 (2026-08-20)
   사장님: 「건축물 대장 API에서 보일수 있는건 다 보여줘」
           「자세히 보는데 왜 안나오고 코드만 나와?」 */
.pd-verdict{margin:12px 0 0;padding:11px 14px;border-radius:12px;background:#eef4ff;
  border-left:5px solid #2f6bd8;color:#1f3d78;font-weight:800;font-size:16px}
.pd-verdict small{display:block;margin-top:4px;font-weight:600;font-size:13px;color:#4a5f88}
.pd-more{margin-top:12px;border:1px solid #e2e7e4;border-radius:12px;background:#fafbfa}
.pd-more>summary{cursor:pointer;padding:11px 14px;font-weight:700;font-size:15px;color:#3a4048}
.pd-more>summary:hover{background:#f2f5f3}
.pd-more>summary::marker{color:#8a949c}
.pd-more .pd-cells{padding:4px 12px 12px}
.pd-floors-title{margin:14px 0 6px;font-weight:800;font-size:15px;color:#2b3138}
.pd-floors li{display:flex;gap:10px;align-items:baseline}
.pd-floors li b{min-width:6.5em}

/* 건축물대장 종이 단추 (2026-08-21)
   ★ 「자세히 보기」 옆에 나란히 선다. 두 단추의 높이를 같게 맞춘다 —
     나란히 놓은 것이 높이가 다르면 눈에 거슬리고 눌러야 할 것이 헷갈린다. */
.pd .pd-raw, .pd .pd-pdf { min-height: 46px; }
.pd .pd-pdf { margin-left: 8px; }
@media (max-width: 560px) {
  /* 좁은 화면에서는 위아래로 — 옆으로 밀려 삐져나오지 않게 */
  .pd .pd-raw, .pd .pd-pdf { display: block; width: 100%; margin-left: 0; margin-top: 8px; }
}