/* ═══════════════════════════════════════════════════════════
   research.css — /research 전용 위계
   기준: design/화면/상품안/상품안.html
     · 섹션은 테두리가 아니라 회색 밴드로 나눈다
     · 번호(no) + 제목(h2) + 상태 라벨 = 섹션 머리
     · 소제목은 11px 자간 넓힌 회색 캡션 (mini-h)
     · 라벨:값은 붙여쓰지 않고 2단 그리드로 (rowl)
   색: 위계는 크기·굵기·회색 4단·여백으로만 만든다.
       빨강은 '탈락 · 결정적 실패'에만. 그 외 색 사용 금지.
   범위: body.pg-research 안에서만 — 다른 화면에 영향 없음
   ═══════════════════════════════════════════════════════════ */

.pg-research{
  /* 4단 스케일 — 본문을 12.5→13.5, 줄간격 1.5→1.6 으로 올린다 */
  --fs-title: 14px;
  --fs-body:  13.5px;
  --fs-cap:   11px;
  /* 페이지 제목 계열 (본문 4단과 별개) */
  --fs-h1: 26px;
  --fs-h2: 16.5px;
  line-height: 1.6;
}
/* 위아래 여백만 정한다 — 좌우는 app.css 의 .shell 이 맡는다(왼쪽 = 사이드바 폭 + 여백).
   예전처럼 padding 한 줄로 쓰면 사이드바 자리까지 덮어써 본문이 사이드바 밑으로 들어간다. */
.pg-research .shell{ padding-top: 0; padding-bottom: 90px; }

/* ── 페이지 머리 ─────────────────────────────────────────── */
.pg-research .phead{ padding: 26px 2px 4px; }
.pg-research .kicker{
  font-size: var(--fs-cap); letter-spacing: .1em; font-weight: 700;
  color: var(--ink-3); margin-bottom: 9px;
}
.pg-research .pg-title{
  font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.025em;
  margin: 0 0 9px; line-height: 1.3;
}
.pg-research .lead{
  font-size: 14px; color: var(--ink-2); margin: 0; max-width: 880px; line-height: 1.65;
}

/* ── 섹션 밴드 — 테두리 대신 두꺼운 회색 띠로 구획 ────────── */
.pg-research .sect{ padding: 28px 2px 32px; }
.pg-research .sect + .sect{ border-top: 12px solid var(--line-2); }

/* 섹션 머리: 번호 · 제목 · 상태 · 우측 액션 */
.pg-research .sh{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px;
}
.pg-research .sh .no{
  font-size: var(--fs-title); font-weight: 800; letter-spacing: .04em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.pg-research .sh h2{
  margin: 0; font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.015em;
}
.pg-research .sh .sub{ font-size: var(--fs-cap); color: var(--ink-3); font-weight: 600; }
.pg-research .sh .acts{ margin-left: auto; display: flex; gap: 6px; }

/* 소제목 — 회색 캡션. 크기가 아니라 자간·색으로 구분한다 */
.pg-research .mini-h{
  font-size: var(--fs-cap); letter-spacing: .1em; font-weight: 700;
  color: var(--ink-3); margin: 22px 0 4px;
}
.pg-research .mini-h:first-child{ margin-top: 0; }

/* ── 제안 카드 → 평면 블록 + 밴드 구분 ───────────────────── */
.pg-research .prop{
  border: 0; border-radius: 0; padding: 26px 2px 30px; margin: 0; background: none;
}
.pg-research .prop + .prop{ border-top: 12px solid var(--line-2); }
.pg-research .prop > .ch{ display: block; margin-bottom: 10px; }
.pg-research .prop .ttl{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.pg-research .prop .ttl b{
  font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.015em; line-height: 1.35;
}
.pg-research .prop .ch .meta{
  display: block; font-size: var(--fs-cap); color: var(--ink-3); margin-top: 5px; line-height: 1.6;
}

/* 남은 .card (표·현황 묶음) — 테두리를 지우고 여백으로 나눈다 */
.pg-research .card{
  border: 0; border-radius: 0; padding: 24px 2px 26px; margin: 0; background: none;
}
.pg-research .card + .card{ border-top: 12px solid var(--line-2); }
.pg-research .card > .ch{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.pg-research .card > .ch b{ font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.015em; }
.pg-research .card > .ch .meta{
  font-size: var(--fs-cap); color: var(--ink-3); flex-basis: 100%; line-height: 1.6;
}

/* ── 라벨 / 값 2단 행 — "대상: xxx" 를 붙여 쓰지 않는다 ──── */
.pg-research .rowl{ margin: 0; padding: 0; list-style: none; }
.pg-research .rowl > li{
  display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 16px;
  padding: 7px 0; align-items: baseline; border-bottom: 1px solid var(--line-2);
}
.pg-research .rowl > li:last-child{ border-bottom: 0; }
.pg-research .rowl .rk{
  font-size: var(--fs-cap); font-weight: 700; color: var(--ink-3); letter-spacing: .02em;
}
.pg-research .rowl p{ margin: 0; color: var(--ink-2); max-width: 900px; }
.pg-research .rowl p b{ color: var(--ink); font-weight: 700; }

/* ── kv · mini 재규격 ────────────────────────────────────── */
.pg-research .kv{
  font-size: var(--fs-body); color: var(--ink-2); margin: 0 0 7px;
  line-height: 1.65; max-width: 980px;
}
.pg-research .kv b{ color: var(--ink); font-weight: 700; }
.pg-research .kv:last-child{ margin-bottom: 0; }

/* mini — 붙임 정보. flex 나열을 끊고 읽는 줄로 되돌린다 */
.pg-research .mini{
  display: block; font-size: var(--fs-cap); color: var(--ink-3);
  line-height: 1.65; margin: 3px 0; max-width: 940px;
}
.pg-research .mini b{ color: var(--ink-2); font-weight: 700; }
.pg-research .mini + .mini{ margin-top: 4px; }
.pg-research .mini.code{ max-height: 200px; overflow: auto; }
/* 목록형 mini — 왼쪽에 걸이 여백을 준다 */
.pg-research .kv + .mini,
.pg-research .mini.li{ padding-left: 10px; }

/* ── 펼침(details) — 소제목 위계로 ───────────────────────── */
.pg-research .prop > details,
.pg-research .card > details{
  border-top: 1px solid var(--line-2); padding: 12px 0 4px; margin-top: 12px;
}
.pg-research .prop > details > summary,
.pg-research .card > details > summary{
  font-size: var(--fs-title); font-weight: 700; color: var(--ink);
  cursor: pointer; list-style: none; padding: 2px 0 8px; line-height: 1.5;
}
.pg-research summary::-webkit-details-marker{ display: none; }
.pg-research .prop > details > summary::before,
.pg-research .card > details > summary::before{
  content: "＋"; color: var(--ink-3); font-weight: 700; margin-right: 7px;
  font-size: var(--fs-cap); vertical-align: 1px;
}
.pg-research .prop > details[open] > summary::before,
.pg-research .card > details[open] > summary::before{ content: "－"; }
.pg-research summary:hover{ color: var(--ink); }
.pg-research summary .sm{ font-weight: 500; color: var(--ink-3); font-size: var(--fs-cap); }
/* 안쪽 중첩 펼침은 캡션 크기로 한 단 낮춘다 */
.pg-research details.mini > summary{
  font-size: var(--fs-cap); font-weight: 700; color: var(--ink-2); cursor: pointer; padding: 2px 0;
}

/* ── 표 — 촘촘한 4px 패딩을 걷어내고 읽히게 ──────────────── */
.pg-research .tbl{ font-size: var(--fs-body); margin: 4px 0 2px; }
.pg-research .tbl th{
  font-size: var(--fs-cap); letter-spacing: .09em; font-weight: 700; color: var(--ink-3);
  text-transform: none; padding: 8px 12px 7px 0; border-bottom: 1px solid var(--line);
  background: #fff;
}
.pg-research .tbl td{
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-2);
  vertical-align: baseline; color: var(--ink-2); line-height: 1.6;
}
.pg-research .tbl td:first-child{ color: var(--ink); font-weight: 600; }
.pg-research .tbl tbody tr:hover td{ background: var(--hover); }
.pg-research .tbl td .mini{ margin: 0; }
.pg-research .tbl-x{ overflow-x: auto; }

/* ── 탭 · 실행 선택 ──────────────────────────────────────── */
.pg-research .bar{
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 0 0 4px; padding: 14px 2px; border-bottom: 1px solid var(--line);
}
.pg-research .bar select{
  font: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--ink);
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff;
  max-width: 520px;
}
.pg-research .tabs{ display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.pg-research .tabs a{
  font-size: var(--fs-body); font-weight: 600; color: var(--ink-3);
  padding: 8px 13px 9px; border: 0; background: none; border-radius: 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.pg-research .tabs a:hover{ color: var(--ink); background: var(--hover); }
.pg-research .tabs a.on{ color: var(--ink); font-weight: 800; border-bottom-color: var(--ink); }
.pg-research .tabs a .n{
  font-size: var(--fs-cap); color: var(--ink-3); font-weight: 700;
  font-variant-numeric: tabular-nums; margin-left: 4px;
}

/* ── 색 걷어내기 ─────────────────────────────────────────── */
/* 워크플로 버튼 — 오렌지 알약 → 무채색 외곽선 */
.pg-research .btn.wf{
  font-size: var(--fs-cap); font-weight: 700; letter-spacing: .02em;
  color: var(--ink-2); background: #fff;
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px;
}
.pg-research .btn.wf:hover{ background: var(--ink); border-color: var(--ink); color: #fff; }

/* 근거 인용 — 오렌지 → 점선 밑줄 */
.pg-research a.cite:not(.ev){
  color: var(--ink-2); text-decoration: underline dotted; text-underline-offset: 2px;
}
.pg-research a.cite:not(.ev):hover{ color: var(--ink); text-decoration-style: solid; }

/* 배지 — 초록·노랑·파랑 채움 제거. 굵기와 회색 단계로만 나눈다 */
.pg-research .lb{
  font-size: var(--fs-cap); font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 4px; padding: 1.5px 7px;
}
.pg-research .lb.ok{ background: #fff; border-color: var(--ink-3); color: var(--ink); }
.pg-research .lb.warn,
.pg-research .lb.cl{ background: #fff; border-color: var(--line); color: var(--ink-3); }
.pg-research .lb.dim{ opacity: 1; color: var(--ink-3); border-style: dashed; }
/* 빨강은 여기만 — 탈락 · 결정적 실패 */
.pg-research .lb.crit{ background: #fff; border-color: var(--crit); color: var(--crit); }

/* code — 회색 칩 유지, 크기만 맞춘다 */
.pg-research code{ font-size: var(--fs-cap); background: var(--line-2); padding: 1px 5px; border-radius: 3px; }

/* 상단 내비 현재 위치 밑줄 — 페이지당 키 컬러 1곳 규칙 유지 */
.pg-research h3{ font-size: var(--fs-title); font-weight: 800; margin: 20px 0 6px; }

/* ── 워크플로 단계 머리 — 카드 안에서 걸음마다 실선으로 끊는다 ── */
.pg-research .sh.step{
  border-top: 1px solid var(--line); padding-top: 20px; margin-top: 26px; padding-bottom: 12px;
}
.pg-research .sh.step .no{ min-width: 26px; }

/* 값 아래 보조 한 줄 */
.pg-research .m2{
  display: block; font-size: var(--fs-cap); color: var(--ink-3); margin-top: 3px; line-height: 1.6;
}
.pg-research .kv > .mini{ margin-top: 2px; }
.pg-research .lead + .lead{ margin-top: 7px; }

/* card 머리는 좌정렬 — app.css 의 space-between 을 되돌린다 */
.pg-research .card > .ch{ justify-content: flex-start; }

/* ── 좁은 화면 ───────────────────────────────────────────── */
@media (max-width: 900px){
  .pg-research .shell{ padding-bottom: 60px; }
  .pg-research .rowl > li{ grid-template-columns: 1fr; gap: 2px; }
  .pg-research .tabs{ margin-left: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   워크플로 — 고르는 축 나누기 · 단계 목차 · 화면 안 피드백
   ═══════════════════════════════════════════════════════════ */

/* ── 필터 바 — 셀렉트마다 이름을 겉으로 낸다 ─────────────── */
.pg-research .fbar{
  display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap;
  padding: 16px 2px 14px; border-bottom: 1px solid var(--line);
}
.pg-research .fgrp{ display: flex; gap: 18px; flex-wrap: wrap; }
.pg-research .fl{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pg-research .fl.fr{ margin-left: auto; }
.pg-research .fl-k{
  font-size: var(--fs-cap); letter-spacing: .09em; font-weight: 700; color: var(--ink-3);
}
.pg-research .fl-k em{ font-style: normal; font-weight: 600; letter-spacing: 0; opacity: .8; }
.pg-research .fl select,
.pg-research .fl input{
  font: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--ink);
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff;
  max-width: 320px;
}
.pg-research .fl select.wide{ max-width: 460px; min-width: 260px; }
.pg-research .fl select:disabled{ color: var(--ink-3); background: var(--hover); }
/* 우측 원천(소스)은 '함께 걸리는 축'임이 보이게 왼쪽에 얇은 구분선 */
.pg-research .fl.fr{ padding-left: 18px; border-left: 1px solid var(--line-2); }

/* 지금 무슨 조건이 걸려 있는지 한 문장 */
.pg-research .fsum{
  font-size: var(--fs-cap); color: var(--ink-3); margin: 10px 2px 0; line-height: 1.9;
}
.pg-research .fsum b{ color: var(--ink); font-weight: 700; }
.pg-research .fsum .lb{ margin-left: 4px; }

/* ── 본문 = 좌측 단계 목차 + 우측 본문 ───────────────────── */
.pg-research .wf{ display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 30px; }
.pg-research .wf-main{ min-width: 0; }
.pg-research .wf-rail{ position: sticky; top: 14px; align-self: start; padding-top: 26px; }
.pg-research .wf-rail .rk{
  font-size: var(--fs-cap); letter-spacing: .09em; font-weight: 700; color: var(--ink-3);
  margin-bottom: 9px;
}
.pg-research .wf-rail a{
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 7px;
  padding: 7px 8px 7px 0; font-size: var(--fs-cap); color: var(--ink-3); line-height: 1.5;
  border-left: 2px solid var(--line-2); padding-left: 11px; text-decoration: none;
}
.pg-research .wf-rail a .n{ font-weight: 800; font-variant-numeric: tabular-nums; }
.pg-research .wf-rail a .t{ font-weight: 600; }
.pg-research .wf-rail a:hover{ color: var(--ink); background: var(--hover); }
.pg-research .wf-rail a.on{ color: var(--ink); border-left-color: var(--ink); }
.pg-research .wf-rail a.on .t{ font-weight: 800; }

/* ── 단계 머리에 붙는 좋아요 · 아쉬워요 ──────────────────── */
.pg-research .sh.step{ scroll-margin-top: 14px; }
.pg-research .sh .acts .fb{
  font: inherit; font-size: var(--fs-cap); font-weight: 700; color: var(--ink-3);
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 9px; cursor: pointer;
}
.pg-research .sh .acts .fb:hover{ color: var(--ink); border-color: var(--ink-3); }
.pg-research .sh .acts .fb.bad:hover{ color: var(--crit); border-color: var(--crit); }

/* ── 피드백 쓰는 자리 ────────────────────────────────────── */
.pg-research .fbform{
  border: 1px solid var(--line); border-radius: 8px; padding: 16px 16px 14px;
  margin: 12px 0 4px; max-width: 720px; background: #fff;
}
.pg-research .fbform .fh{
  font-size: var(--fs-cap); letter-spacing: .09em; font-weight: 700; color: var(--ink-3);
  margin-bottom: 10px;
}
.pg-research .fbform .fh b{ color: var(--ink); letter-spacing: 0; }
.pg-research .fbform .line{ display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pg-research .fbform input[type=text],
.pg-research .fbform textarea{
  font: inherit; font-size: var(--fs-body); color: var(--ink);
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; width: 100%;
}
.pg-research .fbform textarea{ min-height: 78px; resize: vertical; line-height: 1.6; }
.pg-research .fbform label{ display: block; }
.pg-research .fbform label > span{
  display: block; font-size: var(--fs-cap); font-weight: 700; color: var(--ink-3);
  letter-spacing: .06em; margin-bottom: 5px;
}
.pg-research .fbform .who{ width: 190px; flex: 0 0 auto; }
.pg-research .fbform .vpick{ display: flex; gap: 6px; }
.pg-research .fbform .vpick button{
  font: inherit; font-size: var(--fs-cap); font-weight: 700; color: var(--ink-3);
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 7px 12px; cursor: pointer;
}
.pg-research .fbform .vpick button.on{ color: #fff; background: var(--ink); border-color: var(--ink); }
.pg-research .fbform .vpick button.bad.on{ background: var(--crit); border-color: var(--crit); }
.pg-research .fbform .body{ margin-top: 12px; }
.pg-research .fbform .foot{
  display: flex; gap: 10px; align-items: center; margin-top: 12px;
  font-size: var(--fs-cap); color: var(--ink-3);
}
.pg-research .fbform .foot .sp{ flex: 1; }
.pg-research .fbform .send{
  font: inherit; font-size: var(--fs-cap); font-weight: 800; color: #fff;
  background: var(--ink); border: 1px solid var(--ink); border-radius: 6px; padding: 8px 16px; cursor: pointer;
}
.pg-research .fbform .send:disabled{ opacity: .45; cursor: default; }
.pg-research .fbform .x{
  font: inherit; font-size: var(--fs-cap); font-weight: 700; color: var(--ink-3);
  background: none; border: 0; cursor: pointer;
}
.pg-research .fbdone{
  font-size: var(--fs-cap); color: var(--ink-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; margin: 12px 0 4px; max-width: 720px;
}

@media (max-width: 1100px){
  .pg-research .wf{ grid-template-columns: 1fr; gap: 0; }
  .pg-research .wf-rail{ position: static; padding-top: 18px; }
  .pg-research .wf-rail .rail-list{ display: flex; flex-wrap: wrap; gap: 4px; }
  .pg-research .wf-rail a{ border-left: 0; border-bottom: 2px solid var(--line-2); padding: 6px 10px; }
  .pg-research .fl.fr{ margin-left: 0; padding-left: 0; border-left: 0; }
}