/* =========================================================
   통일부 AI 공론화 플랫폼 / 온라인 숙의시스템 V2
   디자인 시스템 — 대한민국 정부(통일부) 톤
   · 블루/네이비 메인 · 정부 표준 산세리프(Pretendard) · 격식·정돈
   ========================================================= */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* 정부 블루 계열 (메인) */
  --navy:        #0b2447;   /* 헤더/히어로 딥네이비 */
  --navy-2:      #102b54;
  --gov:         #1d4ed8;   /* 핵심 액션 블루 */
  --gov-strong:  #1640b0;
  --gov-soft:    #eaf1ff;
  --gov-line:    #d4e0f5;
  --sky:         #2f6bff;

  /* 보조/상태 */
  --hr-red:      #d6122b;   /* 한국리서치 보조 포인트(로고 등 최소 사용) */
  --ok:          #138a4e;   /* 참석/완료 */
  --ok-soft:     #e6f4ec;
  --danger:      #d92d20;   /* 불참 */
  --danger-soft: #fdeceb;
  --warn:        #b25e00;

  /* 중립 */
  --ink:         #15191f;
  --ink-2:       #46505f;
  --ink-3:       #8b94a3;
  --line:        #e6e9f0;
  --line-2:      #eef1f6;
  --bg:          #f5f7fb;
  --card:        #ffffff;

  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 1px 2px rgba(16,30,60,.04), 0 4px 16px rgba(16,30,60,.05);
  --shadow-lg:   0 12px 36px rgba(16,30,60,.12);
  --ring:        0 0 0 3px rgba(29,78,216,.16);
  --font: "Pretendard","Pretendard Variable","Malgun Gothic","맑은 고딕",-apple-system,"Segoe UI",sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;   /* 모바일에서 넓은 요소 하나가 페이지 전체를 좌우로 흔드는 것 방지 (표는 자체 스크롤) */
  font-size: 14px; line-height: 1.55;
  letter-spacing: -.1px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { letter-spacing: -.4px; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content:center; gap: 6px;
  height: 40px; padding: 0 18px; border: 1px solid transparent;
  border-radius: var(--radius-sm); font-weight: 700; font-size: 14px;
  background: #fff; color: var(--ink); transition: .15s; white-space: nowrap;
}
.btn:hover { filter: brightness(.985); }
.btn-primary { background: var(--gov); color: #fff; box-shadow: 0 1px 2px rgba(29,78,216,.25); }
.btn-primary:hover { background: var(--gov-strong); }
.btn-navy { background: var(--navy); color:#fff; }
.btn-blue { background: var(--sky); color: #fff; }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--gov); color: var(--gov); background: var(--gov-soft); }
.btn-sm { height: 33px; padding: 0 13px; font-size: 13px; border-radius: 7px; }
.btn-block { width: 100%; }

/* ---------- 칩/뱃지 ---------- */
.chip { display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:999px;
  font-size:12px; font-weight:700; border:1px solid var(--gov-line); color:var(--gov); background:var(--gov-soft); }
.badge { display:inline-flex; align-items:center; height:23px; padding:0 9px; border-radius:6px; font-size:12px; font-weight:700; }
.badge-ok   { background: var(--ok-soft); color: var(--ok); }
.badge-on   { background: var(--gov-soft); color: var(--gov); }
.badge-off  { background: #f1f3f6; color: var(--ink-3); }
.badge-red  { background: var(--danger-soft); color: var(--danger); }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; }
.dot-on  { background: var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
.dot-off { background: #c4cad4; }

/* =========================================================
   인증(로그인)
   ========================================================= */
.auth-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; background: radial-gradient(1200px 500px at 50% -10%, #e9f0ff 0%, #f5f7fb 55%); }
.auth-gov { display:flex; align-items:center; gap:10px; margin-bottom:26px; color:var(--navy); font-weight:800; letter-spacing:-.3px; font-size:15px; }
.auth-card { width:100%; max-width:430px; background:var(--card); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow-lg); padding:42px 36px; }
.auth-title { text-align:center; margin:0 0 28px; font-size:22px; font-weight:800; color:var(--navy); }
.auth-sub { text-align:center; margin:0 0 30px; font-size:13px; color:var(--ink-3); }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:7px; }
.input { width:100%; height:48px; padding:0 14px; font-size:15px; border:1px solid var(--line);
  border-radius:10px; background:#fbfcfe; transition:.15s; color:var(--ink); }
.input:focus { outline:none; border-color:var(--gov); background:#fff; box-shadow:var(--ring); }
.test-hint { display:flex; align-items:center; gap:8px; margin-top:16px; padding:10px 12px;
  background:var(--gov-soft); border:1px dashed var(--gov-line); border-radius:9px;
  font-size:12px; color:var(--ink-2); }
.test-hint .lucide { width:15px; height:15px; color:var(--gov); flex:none; }
.test-hint b { color:var(--gov); }
.auth-links { display:flex; justify-content:center; gap:18px; margin-top:18px; font-size:13px; }
.auth-links a { color:var(--ink-3); font-weight:600; }
.auth-links a:hover { color:var(--gov); }
.auth-foot { margin-top:28px; padding-top:20px; border-top:1px solid var(--line-2); text-align:center; }
.hr-logo { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-2); font-weight:500; letter-spacing:.2px; }
.hr-logo .hr-bar { width:2px; height:14px; background:var(--hr-red); border-radius:1px; display:inline-block; }
.hr-logo b { font-weight:800; color:var(--hr-red); letter-spacing:.2px; }

/* 정부상징 심볼 / 통일부 워드마크 (실제 로고 이미지) */
/* 정부상징 심볼 (투명 배경 — 박스 없이 직접 노출) */
.gov-sym { display:inline-block; vertical-align:middle; width:auto; flex:none; }
.gov-sym.sm { height:36px; }
.gov-sym.lg { height:50px; }

/* (구) 정부상징 심볼 배지 — 현재 미사용 */
.gov-badge { display:inline-flex; align-items:center; justify-content:center; background:#fff;
  border:1px solid var(--gov-line); border-radius:10px; box-shadow:0 1px 3px rgba(16,30,60,.08); flex:none; overflow:hidden; }
.gov-badge img { display:block; width:92%; height:92%; object-fit:contain; }
.gov-badge.sm { width:38px; height:38px; }
.gov-badge.lg { width:52px; height:52px; border-radius:13px; }
.wordmark-txt { font-weight:800; font-size:18px; color:var(--navy); letter-spacing:-.5px; line-height:1; }
.brand-div { width:1px; height:20px; background:var(--line); display:inline-block; }
.auth-gov-en { color:var(--ink-3); font-weight:600; font-size:13px; line-height:1; }
.auth-gov { gap:10px; }
.topbar .brand { display:flex; align-items:center; gap:10px; }
.topbar .brand .t1, .topbar .brand .t2, .topbar .brand .wordmark-txt { display:inline-flex; align-items:center; }

/* ---------- Lucide 아이콘 (전역) ---------- */
.lucide { width:18px; height:18px; stroke-width:2; vertical-align:middle; flex:none; display:inline-block; }
.btn .lucide { width:16px; height:16px; }
.btn-sm .lucide { width:15px; height:15px; }
.tab .lucide { width:16px; height:16px; margin-right:5px; vertical-align:-3px; }
.adm-head h2 .lucide { width:21px; height:21px; color:var(--gov); }
.mcard .ic .lucide { width:24px; height:24px; }
.wide-card .ic2 .lucide, .ic2 .lucide { width:21px; height:21px; }
.sheet-colhead .lucide { width:17px; height:17px; vertical-align:-3px; margin-right:4px; color:var(--gov); }
.logout .lucide { width:15px; height:15px; }
.kpi .lucide { width:16px; height:16px; }
.chip .lucide, .badge .lucide { width:13px; height:13px; margin-right:3px; vertical-align:-2px; }
.warn .lucide { width:15px; height:15px; vertical-align:-3px; margin-right:4px; }
.hero .lucide { color:#aac4ff; }

/* =========================================================
   앱 셸 (로그인 이후)
   ========================================================= */
.gov-strip { height:34px; background:var(--navy); color:#cdd8ee; display:flex; align-items:center;
  justify-content:space-between; padding:0 26px; font-size:12px; }
.gov-strip .l { display:flex; align-items:center; gap:8px; font-weight:600; }
.gov-strip .r { display:flex; align-items:center; gap:16px; }
.gov-strip a { color:#cdd8ee; } .gov-strip a:hover { color:#fff; }

.topbar { height:64px; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 26px; position:sticky; top:0; z-index:20; }
.topbar .brand { display:flex; align-items:center; gap:12px; }
.topbar .brand .t1 { font-weight:800; color:var(--navy); font-size:16px; transition:.15s; }
a.t1:hover { color:var(--gov); }
.topbar .brand .t2 { font-size:12.5px; color:var(--ink-3); margin-left:2px; font-weight:600; }
.topbar .right { display:flex; align-items:center; gap:16px; }
.topbar .who { font-size:13px; color:var(--ink-2); }
.topbar .who b { color:var(--ink); }
.topbar .who .who-role { color:var(--ink-3); font-size:12px; }
.logout { display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-weight:700; font-size:13px;
  border:1px solid var(--line); height:34px; padding:0 13px; border-radius:7px; }
.logout:hover { border-color:var(--gov); color:var(--gov); background:var(--gov-soft); }

.page { max-width:1280px; margin:0 auto; padding:28px 26px 60px; }
/* 관리자 페이지는 표 열이 많은 운영 콘솔이라 폭을 넓게 쓴다(출석 체크 16열 등).
   화면이 그보다 좁으면 자동으로 줄어들므로 작은 노트북에서도 문제 없음. */
.page.page-wide { max-width:1680px; }

.gov-foot { border-top:1px solid var(--line); background:#fff; color:var(--ink-3); font-size:12.5px; }
.gov-foot .inner { max-width:1280px; margin:0 auto; padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.gov-foot b { color:var(--ink-2); }

/* =========================================================
   메인페이지
   ========================================================= */
.hero { position:relative; overflow:hidden; color:#fff; border-radius:16px; padding:38px 40px; margin-bottom:26px;
  background: linear-gradient(120deg, var(--navy) 0%, #173b73 55%, #1d4ed8 130%); box-shadow:var(--shadow); }
.hero::after { content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%;
  border:32px solid rgba(255,255,255,.06); }
.hero .eyebrow { font-size:12.5px; font-weight:700; letter-spacing:.6px; color:#aac4ff; margin-bottom:10px; }
.hero h1 { margin:0 0 10px; font-size:27px; font-weight:800; }
.hero p { margin:0; opacity:.88; font-size:14px; }
.grid-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mcard { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px 22px;
  box-shadow:var(--shadow); transition:.18s; position:relative; overflow:hidden; }
.mcard::before { content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--gov); opacity:0; transition:.18s; }
.mcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--gov-line); }
.mcard:hover::before { opacity:1; }
.mcard .ic { width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
  background:var(--gov-soft); color:var(--gov); font-size:23px; margin-bottom:16px; }
.mcard h3 { margin:0 0 2px; font-size:16px; font-weight:800; color:var(--navy); }
/* 모듈 영문 병기 (Deliberative Public Dialogue 등) — 국문 바로 아래 작게 */
.mcard .mcard-en { margin:0 0 6px; font-size:11.5px; font-weight:600; color:var(--gov); letter-spacing:.01em; min-height:0; }
.mcard p { margin:0; font-size:12.5px; color:var(--ink-3); min-height:34px; }
.mcard .go { margin-top:14px; font-size:13px; font-weight:700; color:var(--gov); }
.mcard.disabled { opacity:.6; } .mcard.disabled:hover { transform:none; box-shadow:var(--shadow); border-color:var(--line); }
.mcard.disabled:hover::before { opacity:0; }
.tag-soon { position:absolute; top:14px; right:14px; font-size:11px; font-weight:700; color:var(--ink-3); background:#f1f3f6; padding:3px 8px; border-radius:999px; }
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.wide-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px;
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; transition:.15s; }
.wide-card:hover { border-color:var(--gov-line); box-shadow:var(--shadow-lg); }
.wide-card .l { display:flex; align-items:center; gap:14px; }
.wide-card .ic2 { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--gov-soft); color:var(--gov); font-size:20px; }

/* =========================================================
   관리자 / 공통 콘텐츠 헤더
   ========================================================= */
.adm-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.adm-head h2 { margin:0; font-size:21px; font-weight:800; color:var(--navy); display:flex; align-items:center; gap:10px; }
.adm-head .pof { font-size:12.5px; font-weight:700; color:var(--ink-2); background:#fff; border:1px solid var(--line); padding:6px 12px; border-radius:8px; }
.crumb { font-size:12.5px; color:var(--ink-3); margin-bottom:6px; font-weight:600; }
.crumb b { color:var(--gov); }

.tabs { display:flex; gap:2px; border-bottom:2px solid var(--line); margin-bottom:22px; flex-wrap:wrap; }
.tab { appearance:none; border:none; background:transparent; padding:13px 18px; font-size:14px; font-weight:700;
  color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-2px; }
.tab:hover { color:var(--navy); }
.tab.active { color:var(--gov); border-bottom-color:var(--gov); }

.toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.search { flex:1; min-width:220px; position:relative; }
.search input { width:100%; height:42px; padding:0 14px 0 40px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:13.5px; }
.search input:focus { outline:none; border-color:var(--gov); box-shadow:var(--ring); }
.search .si { position:absolute; left:14px; top:12px; color:var(--ink-3); }
.counter { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:800; }
.counter .c-ok { color:var(--ok); } .counter .c-no { color:var(--danger); } .counter .sep { color:var(--line); font-weight:400; }

/* 표가 컨테이너보다 넓으면 잘리지 않고 가로 스크롤되게.
   (overflow:hidden 이면 출석표처럼 열이 많은 표의 오른쪽 끝 — 출석 토글 등 — 이 통째로 잘림)
   세로는 hidden 을 명시해 불필요한 세로 스크롤바가 생기지 않게 한다. */
.card-table { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow-x:auto; overflow-y:hidden; }
table.grid { width:100%; border-collapse:collapse; font-size:13px; }
table.grid thead th { background:#f7f9fc; color:var(--ink-2); font-weight:700; text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.grid tbody td { padding:12px 14px; border-bottom:1px solid var(--line-2); color:var(--ink); white-space:nowrap; }

/* 열이 많은 표(출석 체크 16열 등) — 여백·글자를 줄여 가로 폭을 확보 */
table.grid.grid-dense thead th { padding:10px 8px; font-size:12px; line-height:1.35; }
table.grid.grid-dense tbody td { padding:8px 8px; font-size:12.5px; }
table.grid.grid-dense .btn.btn-sm { padding:0 8px; height:26px; font-size:11.5px; }
table.grid.grid-dense .mini-sel,
table.grid.grid-dense .memo-input { font-size:12px; }

/* 마지막 열(출석 토글)은 가로 스크롤과 무관하게 항상 보이도록 오른쪽에 고정.
   표가 넓어 스크롤될 때 정작 필요한 조작 열이 화면 밖으로 밀려나는 걸 막는다. */
table.grid.grid-dense thead th:last-child,
table.grid.grid-dense tbody td:last-child {
  position:sticky; right:0; z-index:2;
  box-shadow:-6px 0 6px -6px rgba(16,30,60,.18);
}
table.grid.grid-dense thead th:last-child { background:#f7f9fc; }
table.grid.grid-dense tbody td:last-child { background:#fff; }
table.grid.grid-dense tbody tr:hover td:last-child { background:#f9fbfe; }
table.grid tbody tr:last-child td { border-bottom:none; }
table.grid tbody tr:hover { background:#f9fbfe; }
table.grid .muted { color:var(--ink-3); }

/* 메모 편집칸 */
.memo-cell { display:flex; align-items:center; gap:4px; }
.memo-input { width:130px; height:30px; padding:0 9px; font-size:12.5px; border:1px solid transparent;
  border-radius:7px; background:transparent; color:var(--ink); transition:.12s; }
.memo-input:hover { border-color:var(--line); background:#fafbfd; }
.memo-input:focus { outline:none; border-color:var(--gov); background:#fff; box-shadow:var(--ring); }
.memo-save { width:28px; height:28px; flex:none; display:grid; place-items:center; border:1px solid var(--line);
  background:#fff; border-radius:7px; color:var(--ink-3); }
.memo-save:hover { border-color:var(--gov); color:var(--gov); background:var(--gov-soft); }
.memo-save .lucide { width:15px; height:15px; }

/* 진행률 바 */
.bar { display:block; height:8px; background:var(--line-2); border-radius:99px; overflow:hidden; }
.bar-fill { display:block; height:100%; background:var(--gov); border-radius:99px; }

.att { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.att button { border:none; background:#fff; padding:6px 14px; font-size:12.5px; font-weight:700; color:var(--ink-3); }
.att .on.is-att { background:var(--ok); color:#fff; }
.att .on.is-noatt { background:var(--danger); color:#fff; }

.tablefoot { display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:13px 16px; color:var(--ink-3); font-size:12.5px; border-top:1px solid var(--line-2); }

/* 페이지네이션 */
.pager { display:flex; align-items:center; justify-content:center; gap:6px; margin:18px 0 4px; }
.pager .pg { min-width:34px; height:34px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:9px; background:var(--card); color:var(--ink-2); font-size:13.5px; text-decoration:none; transition:all .12s; }
.pager .pg:hover { border-color:var(--gov); color:var(--gov); }
.pager .pg-cur { background:var(--gov); border-color:var(--gov); color:#fff; font-weight:600; }
.pager .pg-cur:hover { color:#fff; }
.pager .pg-disabled { color:var(--ink-3); opacity:.45; pointer-events:none; }

.placeholder { background:var(--card); border:1px dashed var(--gov-line); border-radius:14px; padding:60px 20px; text-align:center; color:var(--ink-3); }
.placeholder .pic { font-size:34px; margin-bottom:12px; opacity:.55; }
.placeholder .pic .lucide { width:38px; height:38px; stroke-width:1.5; }
.hidden { display:none; }

/* ---------- 권한(역할)별 노출 제어 ----------
   role(엑셀 권한구분 5종):
   member(참여자_일반) / leader(참여자_조장) / staff(관리자_스태프) / admin(관리자_총괄) / observer(참관자) */
/* 총괄 관리자 전용 (참여자 설문 관리 · 설문 발송) */
body:not([data-role="admin"]) .cap-chief,
body:not([data-role="admin"]) .cap-survey-send { display:none !important; }
/* 방 상태 읽기전용 배지: 총괄(admin)에게는 토글을 보여주므로 배지 숨김 */
body[data-role="admin"] .room-status-ro { display:none !important; }
/* 스태프 이상(스태프·총괄) — 관리자 페이지/공유시트 관리기능 · 문의 답변 */
body:not([data-role="staff"]):not([data-role="admin"]) .cap-admin { display:none !important; }
/* 조장 전용 (최종 선정완료 등) */
body:not([data-role="leader"]) .cap-leader { display:none !important; }
/* 게시판 답변 권한 (총괄·스태프) — 구 board 역할 대체 */
body:not([data-role="staff"]):not([data-role="admin"]) .cap-board { display:none !important; }

/* 참관자(통일부 관계자) — 열람 전용: 모든 조작 UI 숨김 + 입력 비활성 */
body[data-role="observer"] .toolbar .btn,
body[data-role="observer"] .adm-head .btn,
body[data-role="observer"] .att,
body[data-role="observer"] .memo-save,
body[data-role="observer"] .sel-foot .btn,
body[data-role="observer"] .card-table .btn { display:none !important; }
body[data-role="observer"] input,
body[data-role="observer"] select,
body[data-role="observer"] textarea {
  pointer-events:none !important; background:#f6f7f9 !important; color:var(--ink-3); }
/* 참관 안내 배너 */
.ro-banner { display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:11px 16px;
  background:#eef4ff; border:1px solid #cfe0ff; border-radius:10px; color:#1f51b5; font-size:13px; font-weight:600; }
.ro-banner .lucide { width:16px; height:16px; }

/* ---------- 공유시트: 다른 조 = 열람 전용 ----------
   조원·조장이 자기 조가 아닌 조 시트를 볼 때 .sheet-ro 부여 →
   편집/저장 버튼 숨김 + 입력 잠금 (스태프·총괄은 전체 조 편집 가능하므로 미적용) */
.sheet-ro .sheet-head .btn,
.sheet-ro .sel-foot .btn,
.sheet-ro .toolbar .btn,
.sheet-ro .card-table .btn { display:none !important; }
.sheet-ro input,
.sheet-ro select,
.sheet-ro textarea,
.sheet-ro .sheet-head .val[contenteditable] {
  pointer-events:none !important; background:#f6f7f9 !important; color:var(--ink-3); }
.sheet-ro .ai-list[data-select] li { pointer-events:none !important; cursor:default; }
/* 접근 권한 없음 안내 */
.perm-denied { display:none; }
.perm-denied .box { max-width:460px; margin:80px auto; text-align:center; background:var(--card);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:48px 32px; }
.perm-denied .box .lucide { width:40px; height:40px; color:var(--ink-3); margin-bottom:14px; }
.perm-denied .box h3 { margin:0 0 6px; font-size:18px; color:var(--navy); }
.perm-denied .box p { margin:0; font-size:13px; color:var(--ink-3); }
.role-pill { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:999px;
  font-size:11.5px; font-weight:700; background:var(--gov-soft); color:var(--gov); margin-left:6px; }
.role-pill .lucide { width:12px; height:12px; }

/* ---------- 목업 인터랙션 ---------- */
.mock-toast { position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(10px);
  background:var(--navy); color:#fff; font-size:13px; font-weight:600; padding:11px 18px; border-radius:10px;
  box-shadow:var(--shadow-lg); opacity:0; transition:.25s; z-index:9999; pointer-events:none; white-space:nowrap; }
.mock-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.ai-list[data-select] li { padding-right:34px; }
.ai-list li.selected { border-color:var(--gov); background:var(--gov-soft); color:var(--navy); font-weight:600; position:relative; }
.ai-list li.selected::after { content:"✓"; position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--gov); font-weight:800; }
.sheet-head .val[contenteditable] { cursor:text; border-radius:5px; padding:1px 5px; margin:-1px -5px; transition:.12s; }
.sheet-head .val[contenteditable]:hover { background:#f1f5fb; }
.sheet-head .val[contenteditable]:focus { outline:none; background:#fff; box-shadow:var(--ring); }
.chat-bubble { max-width:80%; border-radius:12px; padding:10px 14px; font-size:13px; }
.chat-bubble.user { align-self:flex-end; background:var(--gov-soft); color:var(--navy); }
.chat-bubble.ai { align-self:flex-start; background:#f1f3f6; color:var(--ink-3); }

/* KPI 카드 */
/* KPI 카드 — 개수가 3개 고정이 아니라 4개(전체리스트·현재참석자·불참·참석률 / 설문 4종)도 있어
   고정 3칸 대신 자동 배치. 좁은 화면에서는 자연스럽게 줄바꿈된다. */
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:18px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); }
.kpi .lab { font-size:12.5px; color:var(--ink-3); font-weight:700; }
.kpi .val { font-size:27px; font-weight:800; margin-top:4px; color:var(--navy); }
.kpi.ok .val { color:var(--ok); } .kpi.no .val { color:var(--danger); } .kpi.rate .val { color:var(--gov); }

/* 차트 */
.charts { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
.chart-card { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:18px 20px; }
.chart-card h4 { margin:0 0 14px; font-size:14px; font-weight:800; color:var(--navy); }
.legend { display:flex; gap:16px; font-size:12px; color:var(--ink-2); margin-top:10px; }
.legend i { width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }

/* =========================================================
   공유시트
   ========================================================= */
.sheet-head { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:16px 20px; margin-bottom:16px; display:grid; grid-template-columns:2fr 1fr auto; gap:18px; align-items:center; }
/* 진행목표 칸 삭제(2026-08-04) → 주제 + 버튼 2칸 배치 */
.sheet-head.sheet-head-topic { grid-template-columns:1fr auto; }
.sheet-head .lab { display:block; font-size:11.5px; font-weight:700; color:var(--gov); margin-bottom:3px; }
.sheet-head .val { font-size:13.5px; font-weight:600; color:var(--ink); }
.cattabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line-2); }
.cattab { appearance:none; display:inline-flex; align-items:center; text-decoration:none; cursor:pointer; height:36px; padding:0 18px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--ink-2); background:var(--gov-soft); border:1px solid var(--gov-line); }
.cattab:hover { color:var(--gov); }
.cattab.active { background:var(--gov); border-color:var(--gov); color:#fff; box-shadow:0 2px 6px rgba(29,78,216,.28); }

.grouptabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.gtab { appearance:none; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; text-decoration:none; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink-2); height:33px; padding:0 15px; border-radius:999px; font-size:13px; font-weight:700; }
.gtab:hover { text-decoration:none; }
.gtab.active { background:var(--gov); color:#fff; border-color:var(--gov); }
/* 기본 2단(AI요약 | 선정). 공통의견 시트는 3분류(자유의견·주요쟁점·공통의견)라 .cols-3 사용. */
.sheet-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.sheet-grid.cols-3 { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
/* 헤더에 보조문구(span)와 버튼([AI 요약 불러오기] 등)이 함께 들어가므로 flex 로 배치.
   예전에는 span 을 float:right 로 띄웠는데, 버튼이 추가되면서 서로 밀어내 버튼이 안 보이는 문제가 있었다.
   → span 은 왼쪽 텍스트 뒤에 붙고, 남는 공간을 밀어(margin-right:auto) 버튼이 오른쪽 끝에 오게 한다. */
.sheet-colhead { padding:13px 16px; border-bottom:1px solid var(--line); font-weight:800; font-size:14px; color:var(--navy);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sheet-colhead span { float:none; margin-right:auto; font-size:11.5px; font-weight:600; color:var(--ink-3); }
.ai-list { list-style:none; margin:0; padding:8px; }
.ai-list li { padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin:7px; font-size:13px; cursor:pointer; transition:.12s; background:#fff; }
.ai-list li:hover { border-color:var(--gov); background:var(--gov-soft); }
.picked { padding:12px 14px; border:1px solid var(--gov); background:var(--gov-soft); border-radius:10px; margin-bottom:9px; font-size:13px; font-weight:600; color:var(--navy); }
.picked.empty { border-style:dashed; border-color:var(--line); background:#fafbfd; color:var(--ink-3); font-weight:500; }
.sel-hint { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-3); margin:-4px 0 14px; }
.sel-hint .lucide { width:14px; height:14px; color:var(--gov); }
.sel-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2); }
.seg { display:flex; align-items:center; gap:14px; font-size:13px; font-weight:600; color:var(--ink-2); }
.seg-lab { color:var(--ink-3); font-weight:700; font-size:12.5px; }
.seg label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.opn-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.subtabs { display:inline-flex; gap:4px; background:var(--line-2); padding:4px; border-radius:10px; }
.subtab { appearance:none; border:none; background:transparent; padding:7px 16px; font-size:13px; font-weight:700; color:var(--ink-3); border-radius:7px; }
.subtab.active { background:#fff; color:var(--gov); box-shadow:0 1px 2px rgba(16,30,60,.08); }
.chatbox { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:16px; margin-top:16px; }
.chat-line { font-size:13px; padding:5px 0; }
.chat-line b { color:var(--gov); margin-right:6px; }
.warn { background:#fff7ed; border:1px solid #fcd9a8; color:var(--warn); font-size:12.5px; font-weight:700; padding:9px 12px; border-radius:9px; margin-bottom:10px; }

@media (max-width: 980px) {
  .grid-cards { grid-template-columns:repeat(2,1fr); }
  .kpis { grid-template-columns:1fr; }
  .row-2 { grid-template-columns:1fr; }
  .sheet-grid { grid-template-columns:1fr; }
  .charts { grid-template-columns:1fr; }
  .sheet-head { grid-template-columns:1fr; }
  .gov-strip .l span.hide-m { display:none; }
}

/* ── 모바일(폰) ── 참여자 대부분 모바일 접속. 가로 넘침 없이 세로로 쌓이게. */
@media (max-width: 640px) {
  /* 페이지 여백 축소 */
  .page, .page.page-wide { padding:16px 14px 48px; max-width:100%; }

  /* 상단바: 브랜드 + 우측(이름/로그아웃)을 두 줄로 감싸고 높이 자동 */
  .topbar { height:auto; flex-wrap:wrap; gap:6px 10px; padding:10px 14px; }
  .topbar .brand .t1 { font-size:15px; }
  .topbar .right { gap:10px; }
  .topbar .who { font-size:12px; }
  .gov-strip { height:auto; padding:6px 14px; font-size:11px; flex-wrap:wrap; gap:4px 10px; }
  .gov-strip .r { gap:10px; }

  /* 메인 카드: 무조건 1열 */
  .grid-cards { grid-template-columns:1fr; gap:12px; }
  .mcard { padding:18px 18px; }
  .mcard p { min-height:0; }

  /* 히어로(상단 배너) 축소 */
  .hero { padding:24px 20px; border-radius:12px; margin-bottom:18px; }
  .hero h1 { font-size:21px; }
  .hero p { font-size:13px; }

  /* 탭·카테고리탭: 넘치면 가로 스크롤(줄바꿈보다 스크롤이 조작 쉬움) */
  .tabs, .cattabs, .subtabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tab, .cattab, .subtab { white-space:nowrap; flex:0 0 auto; }
  .tab { padding:12px 13px; font-size:13px; }

  /* 툴바: 검색·버튼 세로로 */
  .toolbar { flex-direction:column; align-items:stretch; gap:8px; }
  .toolbar .search { min-width:0; width:100%; }
  .toolbar .btn, .toolbar > a.btn { width:100%; justify-content:center; }
  .counter { justify-content:center; flex-wrap:wrap; }

  /* 선정 폼 하단: 진행완료 라디오 + 저장버튼 세로 */
  .sel-foot { flex-direction:column; align-items:stretch; gap:10px; }
  .sel-foot .btn { width:100%; justify-content:center; }
  .opn-grid { grid-template-columns:1fr; }

  /* 카드 헤더의 우측 버튼이 좁을 때 아래로 */
  .sheet-colhead { flex-wrap:wrap; }

  /* 로그인 카드 여백 */
  .auth-card { padding:26px 20px; margin:16px; }
}

/* ── 소형 폰(≤400px) ── 아주 좁은 화면 보정 */
@media (max-width: 400px) {
  .hero h1 { font-size:19px; }
  .kpi .val { font-size:22px; }
  .topbar .who .who-role { display:none; }   /* 아주 좁으면 역할 숨기고 이름만 */
}