/* BORYSU Web MVP-01. Desktop-first, one breakpoint to stop mobile from breaking. */
:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --ink: #1c2128;
  --muted: #5b6673;
  --line: #dde1e6;
  --brand: #1b5fbe;
  --brand-dark: #17509f;
  --ok-bg: #e7f4ec; --ok-ink: #17683a;
  --warn-bg: #fdf3dd; --warn-ink: #8a6100;
  --bad-bg: #fdeceb; --bad-ink: #a12822;
}

* { box-sizing: border-box; }

/* The `hidden` attribute only works through the UA stylesheet's
   `[hidden] { display: none }`, which any author `display` rule outranks --
   `.modal` below sets `display: flex`, which silently made `hidden` inert on
   it: the empty dialog rendered on page load and setting `.hidden = true` did
   nothing visible. Declaring it here, with !important, makes the attribute
   authoritative for every element on the page rather than only the ones that
   happen not to set a display. */
[hidden] { display: none !important; }

/* Scroll lock while a dialog is open, so the page behind it cannot move. */
body.modal-open { overflow: hidden; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
               "Malgun Gothic", "Noto Sans KR", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }

.site-header {
  background: var(--brand);
  color: #fff;
  padding: 22px 0;
  margin-bottom: 24px;
}
.site-header h1 { margin: 0; font-size: 26px; letter-spacing: 1px; }
.service-name { margin: 4px 0 0; font-size: 15px; font-weight: 600; opacity: .95; }
.tagline { margin: 3px 0 0; opacity: .85; font-size: 14px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.card h2 { margin: 0 0 6px; font-size: 18px; }
.card h3 { margin: 20px 0 8px; font-size: 15px; border-top: 1px solid var(--line); padding-top: 14px; }

.hint { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.hint-inline { color: var(--muted); font-weight: 400; font-size: 12px; }

/* ---- presets ---- */
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
.preset {
  background: #eef2f7; border: 1px solid var(--line); color: var(--ink);
  padding: 7px 13px; border-radius: 999px; font-size: 13px; cursor: pointer;
}
.preset:hover { background: #e2e9f2; border-color: #c3ccd8; }
.preset.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.preset.reset { background: #fff; color: var(--muted); }
.preset-active { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* ---- form ---- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
.grid.tri { grid-template-columns: repeat(3, 1fr); }
label { display: block; font-size: 13px; font-weight: 600; }
label.full { display: block; margin-top: 12px; }
input, select, textarea {
  width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-weight: 400; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
input.invalid { border-color: #c0392b; background: #fff7f6; }
textarea { resize: vertical; }
.req { color: #c0392b; }

.actions { margin-top: 20px; display: flex; align-items: center; gap: 14px; }
button.primary {
  background: var(--brand); color: #fff; border: 0; border-radius: 7px;
  padding: 11px 24px; font-size: 15px; font-weight: 600; cursor: pointer;
}
button.primary:hover { background: var(--brand-dark); }
button.primary:disabled { background: #9aa7b6; cursor: progress; }
.status { font-size: 14px; color: var(--muted); }

.errors {
  margin-top: 14px; padding: 10px 12px; border-radius: 6px;
  background: var(--bad-bg); color: var(--bad-ink); font-size: 13px;
}
.errors ul { margin: 4px 0 0; padding-left: 18px; }

/* ---- results ---- */
.gate-summary { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.result {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 10px; background: #fff;
}
.result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.result-title { margin: 0; font-size: 15px; font-weight: 600; }
.result-meta { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.result-why { font-size: 13px; margin: 8px 0 0; }
.result-actions { margin-top: 10px; }
.link-btn {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--brand);
}
.link-btn:hover { background: #f0f4fa; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.bad { background: var(--bad-bg); color: var(--bad-ink); }

.empty { padding: 22px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---- one page of results ---- */
/* The toolbar carries the count on the left and the size selector on the
   right; it wraps rather than squeezing either one on a narrow screen. */
.results-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px;
}
.results-summary { margin: 0; font-size: 13px; color: var(--muted); }
.results-toolbar label.page-size-picker {
  font-size: 13px; font-weight: 400; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
}
.results-toolbar label.page-size-picker select { width: auto; margin-top: 0; }

.pagination {
  margin-top: 18px; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
}
/* The numbers are the part that can grow, so they get their own box: it wraps
   first and scrolls only if a line still will not fit. Nothing here may push
   the page sideways on a phone. */
.page-numbers {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px; max-width: 100%; overflow-x: auto;
}
.page-step, .page-num {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); padding: 6px 11px; font-size: 13px; cursor: pointer;
  min-width: 36px; line-height: 1.2;
}
.page-step:hover:not(:disabled), .page-num:hover:not(.active) { background: #f0f4fa; }
.page-step:disabled { opacity: .4; cursor: default; }
.page-num.active {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
.page-num:disabled { cursor: default; }
.page-gap { color: var(--muted); font-size: 13px; padding: 0 2px; }

/* ---- application period ---- */
/* The period badge is deliberately a different shape from the eligibility
   badge (square-ish, outlined) so the two are not read as one verdict. */
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.badge.period {
  border-radius: 5px; border: 1px solid transparent;
  background: #eef2f7; color: var(--muted);
}
.badge.period.open    { background: #eaf2fd; color: #14508f; border-color: #c3d9f5; }
.badge.period.soon    { background: #f1eefb; color: #4b3b8f; border-color: #d6cdf0; }
.badge.period.urgent  { background: #fdeceb; color: #a12822; border-color: #f3c7c4; font-weight: 700; }
.badge.period.closed  { background: #eceef1; color: #5b6673; border-color: #d7dbe0; }
.badge.period.check   { background: #f5f2e8; color: #715c22; border-color: #e3d9bd; }

.result-period, .detail-period {
  margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ink);
}
.detail-period { margin: 10px 0 14px; font-size: 14px; }
.detail-agency { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

/* A closed programme stays visible -- eligibility and recruitment status are
   different questions -- but reads as past. */
.result.is-closed { background: #fafbfc; }
.result.is-closed .result-title { color: var(--muted); }

.result-actions { display: flex; align-items: center; gap: 12px; }
.result-actions .result-meta { margin: 0; font-size: 12px; }

/* ---- modal ---- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(20, 26, 33, .5); }
.modal-body {
  position: relative; background: #fff; border-radius: 10px;
  width: min(760px, calc(100vw - 40px)); max-height: calc(100vh - 60px);
  overflow-y: auto; padding: 24px 26px;
}
.modal-close {
  position: absolute; top: 10px; right: 14px; border: 0; background: none;
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted);
}
.detail-section { margin-top: 20px; }
.detail-section h4 { margin: 0 0 8px; font-size: 14px; }
.detail-section p { margin: 0 0 8px; font-size: 14px; white-space: pre-wrap; }
.kv { font-size: 14px; margin: 0 0 6px; }
.kv .k { color: var(--muted); display: inline-block; min-width: 84px; }

.cond { display: flex; justify-content: space-between; gap: 10px;
        padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cond:last-child { border-bottom: 0; }
.cond-label { font-weight: 600; }
.cond-detail { color: var(--muted); font-size: 13px; }

.evidence {
  border-left: 3px solid var(--brand); background: #f7f9fc;
  padding: 10px 12px; margin-bottom: 10px; border-radius: 0 6px 6px 0;
}
.evidence blockquote { margin: 0 0 6px; font-size: 13px; }
.evidence .src { font-size: 12px; color: var(--muted); }

.xai-note, .evidence-note {
  font-size: 12px; color: var(--muted); margin: 0 0 10px;
  padding: 8px 10px; border-radius: 6px; background: #f0f2f5;
}

.footer { color: var(--muted); font-size: 12px; padding-bottom: 30px; }

@media (max-width: 720px) {
  .grid, .grid.tri { grid-template-columns: 1fr; }
  .result-head { flex-direction: column; }
  .preset-row { gap: 6px; }
  .preset { font-size: 12px; padding: 6px 10px; }
  /* The count and the selector each get their own line rather than the two
     fighting over one. */
  .results-toolbar { flex-direction: column; align-items: flex-start; }
  .results-toolbar label.page-size-picker { margin-left: 0; }
  .page-step, .page-num { padding: 6px 9px; min-width: 32px; font-size: 12px; }
}

/* ---- navigation ---- */
.site-nav { margin-top: 12px; display: flex; gap: 8px; }
.nav-link {
  color: #fff; text-decoration: none; font-size: 14px; padding: 6px 14px;
  border-radius: 999px; background: rgba(255,255,255,.14);
}
.nav-link:hover { background: rgba(255,255,255,.24); }
.nav-link.active { background: #fff; color: var(--brand); font-weight: 600; }

/* ---- explorer ---- */
.filter-heading { margin: 18px 0 8px; font-size: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.preset.filter { font-size: 13px; }
.explorer-options { margin-top: 18px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
label.inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
label.inline select { width: auto; margin-top: 0; }
label.inline.checkbox input { width: auto; margin: 0; }
.badge.purpose { background: #e8eefb; color: #24408a; border-radius: 5px; }
.result-agency { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.detail-footnote { margin-top: 18px; font-size: 12px; color: var(--muted); }
.pager { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; }
.pager button:disabled { opacity: .4; cursor: default; }

/* ---- member navigation and profile saving ---- */
.nav-spacer { flex: 1; }
/* The nav has to wrap. /account gained the member area when the header was
   unified, so the row is now four links plus an address plus two controls --
   without wrapping that runs off the side of a phone. */
.site-nav { align-items: center; flex-wrap: wrap; row-gap: 8px; }
.nav-account { display: flex; gap: 8px; align-items: center; min-width: 0; }
.nav-account .nav-email {
  color: #fff; font-size: 13px; opacity: .9;
  /* A long address must shorten rather than push the buttons off-screen. */
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 560px) {
  /* Below this the spacer would push the member area onto a line of its own
     with the links stranded above it; letting the row wrap naturally reads
     better and keeps everything reachable. */
  .nav-spacer { flex-basis: 100%; height: 0; }
  .nav-account .nav-email { max-width: 100%; }
}

button.secondary {
  background: #fff; color: var(--brand); border: 1px solid var(--brand);
  border-radius: 7px; padding: 10px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
button.secondary:hover { background: #eef3fb; }
button.secondary:disabled { opacity: .55; cursor: default; }
.save-note { margin: 10px 0 0; font-size: 13px; }
.save-note.ok { color: var(--ok-ink); }
.save-note.warn { color: var(--warn-ink); }
.save-note.bad { color: var(--bad-ink); }