/* ============================================================
   Guide site — data-list design system (2026-08)
   Loaded AFTER /guide-layout.css on the list pages
   (search.html / jin_search.html + .en variants).
   Turns each ng-repeat row into a designed "record":
   - systematic tokens (KQ 3. / 권고 3-2.) as bold navy lead-ins
   - Question vs guideline text hierarchy
   - zebra rows + department-hued 3px left accent
   - department / region(모달리티) chips from structured fields
   ============================================================ */

/* ---- 1) Department hue map (8 base hues + a few extensions).
   The page script maps Department names (whitespace-insensitive,
   substring match, hash fallback) to these classes. Each class
   only sets two custom properties consumed below. */
.dept-blue   {--dept:#1663d8; --dept-bg:#e8effc;}   /* 흉부 */
.dept-teal   {--dept:#0e8f8c; --dept-bg:#e0f3f2;}   /* 복부 */
.dept-violet {--dept:#6d4fc4; --dept-bg:#eeeafa;}   /* 신경두경부 */
.dept-crimson{--dept:#bf3b4c; --dept-bg:#fbe9ec;}   /* 심장 */
.dept-magenta{--dept:#b03383; --dept-bg:#f9e8f3;}   /* 유방 */
.dept-amber  {--dept:#a8611a; --dept-bg:#f9efe0;}   /* 소아 */
.dept-green  {--dept:#2f8a4c; --dept-bg:#e5f4ea;}   /* 근골격 */
.dept-sky    {--dept:#0f76b0; --dept-bg:#e3f2fa;}   /* 비뇨 */
.dept-olive  {--dept:#6f7d1e; --dept-bg:#f2f4de;}   /* 갑상선 */
.dept-slate  {--dept:#5b6b81; --dept-bg:#eceff4;}   /* 치과 / unknown */
.dept-rust   {--dept:#bb4d1f; --dept-bg:#faebe2;}   /* 인터벤션 */
.dept-indigo {--dept:#4a44b5; --dept-bg:#eae9f9;}   /* 핵의학 */
.dept-navy   {--dept:#0f4cab; --dept-bg:#e7edf9;}   /* 전체 */

/* ---- 2) Sticky search header (navbar 60px + this block, both fixed).
   Height grows from 60px to fit the chip/count line, so the list
   padding below is raised to match. */
.input-chat-block{
  height:auto;
  padding:11px 20px 12px;
  border-top:0;
  border-bottom:1px solid #d8dfeb;
  background:#f4f7fb;
  box-shadow:0 2px 6px rgba(15,27,45,.05);
}
.guide-listhead{
  display:flex; align-items:center; gap:8px;
  min-height:24px; margin-bottom:8px;
  font-family:var(--cdss-font, 'Pretendard', sans-serif);
}
.listhead-title{
  font-size:13px; font-weight:800; color:#0f1b2d; letter-spacing:.02em;
}
.listhead-count{
  margin-left:auto; font-size:12px; font-weight:600; color:#5b6b81;
  white-space:nowrap;
}
.listhead-count b{font-size:14px; font-weight:800; color:#1663d8;}
/* prominent, high-contrast input (overrides washington.css underline look) */
.input-chat-block .w-form{margin:0;}
.input-chat-block form{margin:0;}
.input-chat{
  float:none; width:100%; height:42px; box-sizing:border-box;
  margin:0; padding:0 15px;
  border:1.5px solid #b9c6dd; border-radius:10px;
  background:#fff; color:#1e293b;
  font-family:var(--cdss-font, 'Pretendard', sans-serif);
  font-size:14px; font-weight:500;
  box-shadow:0 1px 2px rgba(15,27,45,.05);
  transition:border-color .15s, box-shadow .15s;
}
.input-chat::placeholder{color:#93a3ba;}
.input-chat:focus{
  border-color:#1663d8;
  box-shadow:0 0 0 3px rgba(22,99,216,.14);
}
/* list starts below navbar(60) + taller search header (~103) */
.search_body{padding-top:172px;}

/* ---- 3) Record rows: zebra + department accent + hover ---- */
.list.list-messages{border-top:0;}
.rec-row{
  padding:0; margin:0;
  border-left:3px solid var(--dept, #c8d4e6);
  border-bottom:1px solid #e4e9f2;
  background:#fff;
  transition:background .15s, border-left-color .15s;
}
.rec-row:nth-child(even){background:#f4f7fb;}
.rec-row:hover{background:#e9f1fd;}          /* light primary tint */
.rec-row a{cursor:pointer;}
.rec-card{
  display:block;
  padding:14px 22px 14px 19px;
}

/* chips line */
.rec-chips{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin-bottom:8px;
}
.chip{
  display:inline-flex; align-items:center;
  padding:5px 10px; border-radius:999px;
  font-family:var(--cdss-font, 'Pretendard', sans-serif);
  font-size:11.5px; font-weight:700; line-height:1;
  letter-spacing:.015em; white-space:nowrap;
}
.chip-dept{background:var(--dept-bg, #eceff4); color:var(--dept, #5b6b81);}
.chip-region{
  background:#fff; border:1px solid #b9c6dd; color:#24457a;
  font-weight:600; padding:4px 10px;
}

/* systematic tokens: KQ 3. / 권고 3-2. — set apart from the sentence */
.sys-token{
  display:inline-block;
  margin-right:9px;
  font-family:var(--cdss-font, 'Pretendard', sans-serif);
  font-weight:800; color:#0f4cab;
  letter-spacing:.04em;
  white-space:nowrap;
}
.rec-q .sys-token{font-size:15.5px;}
.rec-guide .sys-token{
  font-size:12px;
  padding:2px 7px; margin-right:8px;
  background:#e7edf9; border-radius:6px;
  letter-spacing:.05em;
  position:relative; top:-1px;
}

/* Question = primary; guideline text = secondary/muted */
.rec-q{
  font-family:var(--cdss-font, 'Pretendard', sans-serif);
  font-size:15px; font-weight:600; color:#0f1b2d;
  line-height:1.55; padding:0; display:block;
}
.rec-q .rec-q-text{font-weight:600;}
.rec-guide{
  margin-top:4px; padding:0;
  font-family:var(--cdss-font, 'Pretendard', sans-serif);
  font-size:13px; font-weight:400; color:#5b6b81;
  line-height:1.6;
}

/* empty state (QA 2026-08): shown when a list has no rows at all
   (e.g. the English data node is empty) — instead of a blank page */
.guide-empty{
  margin:26px 22px; padding:26px 24px;
  border:1px dashed #b9c6dd; border-radius:12px;
  background:#f8fafd; text-align:center;
  font-family:var(--cdss-font, 'Pretendard', sans-serif);
}
.guide-empty p{margin:0 0 6px; padding:0; font-size:14px; line-height:1.6; color:#5b6b81;}
.guide-empty p b{color:#0f1b2d; font-weight:700;}
.guide-empty a{color:#1663d8; font-weight:600;}

/* ---- 4) Mobile: keep everything inside the viewport ---- */
@media (max-width:420px){
  .input-chat-block{padding:10px 14px 11px;}
  .search_body{padding-top:174px;}
  .rec-card{padding:12px 14px 12px 12px;}
  .rec-q{font-size:14.5px;}
  .rec-q .sys-token{font-size:15px;}
  .chip{max-width:100%; overflow:hidden; text-overflow:ellipsis;}
}