:root {
  color-scheme: light;
  font-family: "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
  color: #132235;
  background: #f4f7fa;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, a { font: inherit; }

.portal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #d9e2ea;
}

.portal-header__inner {
  width: min(1180px, calc(100% - 40px));
  min-height: 86px;
  margin: 0 auto;
  padding: 12px 0;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  align-items: center;
  gap: 32px;
}

.portal-identity {
  display: grid;
  gap: 3px;
}

.network-name,
.portal-title {
  margin: 0;
  font-family: inherit;
  letter-spacing: 0;
}

.network-name {
  color: #087f78;
  font-size: 13px;
  font-weight: 600;
}

.portal-title {
  color: #132235;
  font-size: 20px;
  font-weight: 600;
}
.icon-button {
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid #bfd0df;
  border-radius: 6px;
  background: #fff;
  color: #114895;
  font-size: 24px;
  cursor: pointer;
}

.portal-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 72px; }


.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
}
.summary-item { min-width: 82px; }
.summary-item strong { display: block; color: #114895; font-size: 22px; font-weight: 600; line-height: 1.15; }
.summary-item span { color: #66788b; font-size: 12px; white-space: nowrap; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 22px; }
.section-heading h2, .boundary h2 { margin: 0; font-size: 27px; font-weight: 600; }
.read-only-note { margin: 0; color: #66788b; font-size: 14px; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid #d3dee8;
  border-top: 4px solid #1e65b7;
  border-radius: 6px;
  background: #fff;
}
.profile-card[data-family^="SEEYES"] { border-top-color: #087f78; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tag { padding: 5px 8px; border-radius: 4px; background: #edf3f8; color: #40556a; font-size: 12px; }
.tag.source-live { background: #dff4ec; color: #086b55; }
.profile-card h3 { margin: 0; font-size: 21px; font-weight: 600; }
.profile-card > p { min-height: 52px; margin: 10px 0 18px; color: #5e7184; line-height: 1.6; }
.profile-state { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 20px; }
.profile-state div { padding: 11px; background: #f7f9fb; border-left: 2px solid #b7c6d4; }
.profile-state dt { color: #718296; font-size: 12px; }
.profile-state dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.action {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #1e65b7;
  border-radius: 5px;
  color: #1e65b7;
  text-decoration: none;
  font-weight: 600;
}
.action.primary { background: #1e65b7; color: #fff; }
.boundary { margin-top: 48px; padding-top: 30px; border-top: 1px solid #d9e2ea; }
.boundary dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 20px 0 0; }
.boundary dl div { padding-left: 14px; border-left: 3px solid #8fb1d3; }
.boundary dt { font-weight: 600; }
.boundary dd { margin: 6px 0 0; color: #607386; line-height: 1.55; }
.error { padding: 18px; border: 1px solid #d74941; background: #fff; color: #9c2620; }

.hidden { display: none !important; }
button.action { background: #fff; cursor: pointer; }
.query-action[aria-pressed="true"] { background: #eaf2fb; box-shadow: inset 0 0 0 1px #1e65b7; }

.detail-panel {
  scroll-margin-top: 84px;
  margin-top: 36px;
  padding: 30px 0;
  border-top: 2px solid #1e65b7;
  border-bottom: 1px solid #d9e2ea;
  outline: none;
}
.detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.detail-heading h2 { margin: 0; font-size: 27px; font-weight: 600; }
.detail-close { flex: 0 0 auto; margin-left: 0; font-size: 25px; line-height: 1; }
.detail-message { margin: 20px 0; padding: 14px 16px; border-left: 4px solid #8fa3b8; background: #f7f9fb; line-height: 1.55; }
.detail-message.tone-success { border-left-color: #087f78; background: #edf8f5; color: #075f59; }
.detail-message.tone-warning { border-left-color: #c48118; background: #fff8e8; color: #70470b; }
.detail-message.tone-danger { border-left-color: #c63b34; background: #fff2f1; color: #922820; }
.detail-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.detail-fact { min-width: 0; padding: 12px 14px; border-left: 3px solid #a9bac9; background: #fff; }
.detail-fact.tone-success { border-left-color: #087f78; }
.detail-fact.tone-warning { border-left-color: #c48118; }
.detail-fact.tone-danger { border-left-color: #c63b34; }
.detail-fact dt { color: #718296; font-size: 12px; }
.detail-fact dd { margin: 5px 0 0; overflow-wrap: anywhere; font-size: 15px; font-weight: 600; }
.detail-checks { margin-top: 26px; }
.detail-checks h3 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.detail-checks ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.check-item { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid #e3e9ef; color: #526579; line-height: 1.5; }
.check-status { display: inline-flex; justify-content: center; padding: 3px 7px; border-radius: 4px; background: #edf3f8; color: #40556a; font-size: 12px; font-weight: 600; }
.check-item.tone-success .check-status { background: #dff4ec; color: #086b55; }
.check-item.tone-warning .check-status { background: #fff0c9; color: #80520c; }
.check-item.tone-danger .check-status { background: #fde3e1; color: #9c2620; }
.raw-details { margin-top: 24px; border-top: 1px solid #d9e2ea; }
.raw-details summary { padding: 15px 0; color: #40556a; cursor: pointer; font-weight: 600; }
.raw-details pre { max-height: 360px; margin: 0; padding: 16px; overflow: auto; border: 1px solid #d3dee8; background: #172333; color: #e8eef5; font: 12px/1.55 Consolas, "Courier New", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .portal-header__inner, .portal-main { width: min(100% - 28px, 1180px); }
  .portal-header__inner { grid-template-columns: 1fr; gap: 10px; }
  .portal-main { padding-top: 26px; }
  .summary-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 10px; }
  .summary-item { min-width: 0; }
  .section-heading { align-items: start; flex-direction: column; }
  .profile-grid, .boundary dl { grid-template-columns: 1fr; }
  .profile-card > p { min-height: 0; }
}
@media (max-width: 760px) {
  .detail-panel { margin-top: 28px; padding-top: 24px; }
  .detail-facts { grid-template-columns: 1fr 1fr; }
  .detail-heading h2 { font-size: 23px; }
  .check-item { grid-template-columns: 64px minmax(0, 1fr); }
}

@media (max-width: 430px) {
  .detail-facts { grid-template-columns: 1fr; }
  .profile-actions .action { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 0 10px; }
}