/* 정보공유 (the member-only board) and its 컨소시엄 제안 sub-board.
 *
 * Loaded after style.css on all four board pages, so it inherits the same
 * variables (--muted, --line, --brand, ...) and only adds what the board needs.
 * Nothing here restyles an existing class.
 *
 * The two boards share every rule in this file: the same rows, the same
 * editor, the same picker, the same post page. The .consortium-* section at
 * the bottom is only what a proposal has and an information post does not --
 * a recruitment badge, a roles multi-select, a fact list and a date/status
 * pair -- so there is one stylesheet, not two that can drift apart.
 *
 * Everything that can grow -- a title, a filename, a pasted URL, a row of
 * thumbnails -- is told to wrap or to scroll inside its own box. Nothing on
 * these pages may push the page sideways on a phone.
 */

/* ---------------------------------------------------- the title line */
/* The board name on the left, the write action on the right. 컨소시엄 제안 and
   정보공유 used to be a tab row here; they are separate header menus now, so
   this line carries only the one board a member is actually on. */

.board-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.board-page-head h2 { margin: 0; }

/* ------------------------------------------------------- the guest notice */

.board-guest {
  margin: 8px 0 0;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
  font-size: 14px;
  color: var(--ink);
  text-align: center;
}
.board-guest-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.board-guest-actions .link-btn { text-decoration: none; }

/* ------------------------------------------------------------- the search */

.board-search {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 0;
}
.board-search-label {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.board-search-label input { margin-top: 0; min-width: 0; }

.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}
/* Inherits colour, radius and hover from a.primary in style.css -- this only
   sets the size, so the board's CTA cannot drift from the site's buttons. */
.board-write {
  padding: 10px 22px;
  font-size: 14px;
  white-space: nowrap;
}

/* --------------------------------------------------------------- the list */

.board-row {
  border-top: 1px solid var(--line);
  padding: 14px 2px;
}
.board-row:first-child { border-top: 0; }
.board-row-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.badge.board-cat { flex: 0 0 auto; }
.board-row-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
  /* A title with no spaces must wrap rather than widen the page. */
  overflow-wrap: anywhere;
}
.board-row-title a { color: var(--ink); text-decoration: none; }
.board-row-title a:hover { color: var(--brand); text-decoration: underline; }
.board-row-meta {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.board-row-program {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--brand);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------- the body editor */
/* A contenteditable surface, but nothing here makes it a rich-text editor: it
   holds text, line breaks and thumbnails, and what it saves is text plus
   [[img:n]] markers. Everything is capped at the column width, so a wide
   screenshot on a phone shrinks rather than pushing the page sideways. */

.board-body-field { margin-top: 12px; }
.board-field-label { display: block; font-size: 13px; font-weight: 600; }

.board-editor-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 6px;
}
.board-editor-tools .hint-inline { overflow-wrap: anywhere; }

.board-editor {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 260px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  /* The same as the post page, so what is typed is what is read back. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  max-height: 60vh;
}
.board-editor:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.board-editor.is-dropping { border-color: var(--brand); background: #f2f7ff; }

/* The placeholder is drawn, not typed: nothing is put into the element, so an
   empty body stays genuinely empty. */
.board-editor.is-empty::before,
.board-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.board-inline-image {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 6px 0;
  vertical-align: top;
  line-height: 0;
}
.board-inline-image img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f2f4f7;
}
.board-inline-image.is-uploading img { opacity: 0.45; }
.board-inline-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 24, 31, 0.72);
  color: #fff;
  font-size: 15px;
  line-height: 24px;
  cursor: pointer;
}
.board-inline-remove:hover { background: rgba(20, 24, 31, 0.9); }

.board-editor-error {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--bad-bg);
  color: var(--bad-ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.board-file-hint { margin: 8px 0 0; font-size: 12px; overflow-wrap: anywhere; }

/* --------------------------------------------------------- the write form */

.board-picker { margin-top: 6px; }
.board-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.board-picker-search .board-search-label { flex: 1 1 260px; }
.board-picked {
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid #c3d9f5;
  border-radius: 8px;
  background: #eaf2fd;
  font-size: 13px;
  color: #14508f;
  overflow-wrap: anywhere;
}
.board-picker-status { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.board-picker-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  /* A long result list gets its own scroll box rather than a long page. */
  max-height: 300px;
  overflow-y: auto;
}
.board-picker-hit {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px 12px;
  font: inherit;
  cursor: pointer;
  min-width: 0;
}
.board-picker-hit:hover { background: #f0f4fa; border-color: #c3ccd8; }
.board-picker-hit-title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.board-picker-hit-meta { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

/* ------------------------------------------------------------- the files */

.board-files input[type="file"] {
  width: 100%;
  max-width: 100%;
  padding: 8px;
  font-size: 13px;
}
.board-file-summary {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.board-file-warnings {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 12px;
}
.board-file-warnings p { margin: 0; }
.board-file-warnings ul { margin: 6px 0 0; padding-left: 18px; }

.board-file-list { margin-top: 10px; }
.board-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.board-file:first-child { border-top: 0; }
.board-file-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #f2f4f7;
}
.board-file-thumb-none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.board-file-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.board-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  /* A 200-character filename must not widen the card. */
  overflow-wrap: anywhere;
}
a.board-file-name { color: var(--brand); }
.board-file-meta { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.board-file .link-btn { flex: 0 0 auto; }

/* --------------------------------------------------------- the post page */

.board-back { margin: 0 0 12px; font-size: 13px; }
.board-back a { color: var(--muted); text-decoration: none; }
.board-back a:hover { color: var(--brand); }

.board-post-title {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.board-post-meta { margin: 6px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.board-post-program { margin: 8px 0 0; font-size: 13px; overflow-wrap: anywhere; }

/* The post body is written with textContent; the newlines a member typed are
   kept here rather than by turning their text into markup. */
.board-body {
  margin: 18px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* An image the body referenced, drawn in the flow by the viewer -- never by
   assigning markup. */
.board-body-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.board-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.board-thumb {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
  max-width: 100%;
}
.board-thumb img {
  display: block;
  width: 160px;
  height: 120px;
  max-width: 100%;
  object-fit: cover;
}
.board-thumb:hover { border-color: var(--brand); }

.board-documents { margin-top: 18px; }
.board-documents .filter-heading { margin-top: 0; border-top: 0; padding-top: 0; }

.board-post-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.board-owner-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.board-owner-actions .link-btn { text-decoration: none; }

.board-comments { margin-top: 6px; }
.board-comments .filter-heading { margin-top: 22px; }

/* The lightbox reuses .modal / .modal-body from style.css; only the picture
   inside it is new. */
.board-lightbox-body { width: min(900px, calc(100vw - 40px)); }
#board-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 160px);
  margin: 8px auto 0;
  object-fit: contain;
}
.board-lightbox-name {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* =========================================================== 컨소시엄 제안 */
/* Only what a proposal has and an information post does not. Everything else
   on these pages -- the row, the editor, the picker, the files, the post page,
   the lightbox -- is the board's own, above. */

/* --------------------------------------------------------- 모집 상태 */
/* The status is the first thing a reader needs and the one thing that decides
   whether a proposal is worth acting on, so it is a filled badge rather than
   another grey line. The colour comes from the key, never from the words: the
   labels are the API's and are never compared against here. */

.badge.consortium-status {
  flex: 0 0 auto;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
}
/* 모집이 열려 있는 제안. Filled, not tinted: it has to be findable at a
   glance in a list where most rows are closed. */
.badge.consortium-status[data-status="OPEN"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.badge.consortium-status[data-status="IN_TALKS"] {
  background: var(--warn-bg);
  border-color: #e3d9bd;
  color: var(--warn-ink);
}
.badge.consortium-status[data-status="CLOSED"] {
  background: #eceef1;
  border-color: #d7dbe0;
  color: #5b6673;
}

/* ------------------------------------------------------------- the list */

.consortium-order-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* A closed proposal stays readable but stops competing with the open ones. */
.consortium-row:has(.consortium-status[data-status="CLOSED"]) .board-row-title a {
  color: var(--muted);
}

.consortium-row-roles {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------- 모집 역할 (the form) */
/* A multi-select made of checkboxes rather than a <select multiple>: several
   roles at once is the normal case, and a list you ctrl-click is the one
   control people reliably get wrong -- especially on a phone, where a
   multi-select has no good native shape at all. */

.consortium-roles-field {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.consortium-roles-field legend {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}
.consortium-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
/* `min-width: 0` plus `overflow-wrap: anywhere` let a flex item shrink to its
   narrowest character, and Korean has no spaces to break at -- so 공동연구개발기관
   came out one letter per line inside a sliver of a pill. The item is sized by
   its content and never breaks inside a label; when the row runs out of room
   the whole item wraps to the next line instead. */
.consortium-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}
.consortium-role > span { white-space: nowrap; }
.consortium-role:hover { background: #f0f4fa; border-color: #c3ccd8; }
.consortium-role input { margin: 0; width: auto; flex: 0 0 auto; }
/* The chip follows the box, so what is selected can be read without going
   along the row checking every checkbox. */
.consortium-role:has(input:checked) {
  background: #eaf2fd;
  border-color: #c3d9f5;
  color: #14508f;
  font-weight: 600;
}
.consortium-role:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ------------------------------------------------ 마감일 + 모집 상태 */

.consortium-when {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.consortium-when > label.full {
  flex: 1 1 220px;
  min-width: 0;
}
.consortium-when input, .consortium-when select { max-width: 100%; }

/* --------------------------------------------------------- the post page */

.consortium-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 16px 0 0;
  padding: 4px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
}
.consortium-fact {
  display: flex;
  gap: 12px;
  padding: 8px 14px;
  min-width: 0;
}
.consortium-fact dt {
  flex: 0 0 116px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.consortium-fact dd {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-size: 13px;
  color: var(--ink);
  /* A list of fields or a programme name must wrap, not widen the card. */
  overflow-wrap: anywhere;
}
.consortium-fact dd a { color: var(--brand); }

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 720px) {
  .board-toolbar { align-items: stretch; }
  .board-write { text-align: center; width: 100%; }
  .board-search-label, .board-picker-search .board-search-label { flex-basis: 100%; }
  .board-row-title { font-size: 14px; }
  .board-thumb img { width: 120px; height: 92px; }
  .board-owner-actions { margin-left: 0; }
  .board-editor { min-height: 200px; font-size: 14px; }
  .board-inline-image img { max-height: 240px; }
  .board-post-title { font-size: 18px; }
  .board-page-head { align-items: stretch; }
  .consortium-order-note { order: 2; }
  .consortium-when { gap: 0; }
  .consortium-when > label.full { flex-basis: 100%; }
  .consortium-role { font-size: 12px; padding: 6px 10px; }
  /* The label above the value rather than beside it: a 116px column leaves a
     programme name about forty pixels to wrap in. */
  .consortium-fact { flex-direction: column; gap: 2px; }
  .consortium-fact dt { flex-basis: auto; }
  .consortium-row-roles { font-size: 12px; }
}