@charset "utf-8";
/* ============================================================================
   시민 제보 게시판 스킨
   ----------------------------------------------------------------------------
   색은 관리자 [사이트 설정 > 색상 팔레트] 가 심어 주는 --arc-* 변수를 쓴다.
   게시판 화면은 테마 head.php 를 거치므로 run_event('pre_head') 가 돌아
   변수가 들어와 있다. 혹시 변수가 없는 상황에서도 화면이 무너지지 않도록
   현재 팔레트(진녹) 값을 기본값으로 함께 적어 둔다.
   ========================================================================== */

/* 색·치수 값은 두 뿌리 모두에 심는다.
   목록·상세는 .hmr 로 감싸지만, 글쓰기 화면은 아카이브 레이아웃을 쓰느라
   .arc-board … .arcr-write-page 로 감싼다. 값을 .hmr 에만 두었더니 글쓰기
   화면에서 var(--arcr-main) 이 정의되지 않아 체크 아이콘 배경이 투명해지고
   안내 상자 색이 빠졌다. 값과 레이아웃을 분리해 둔다. */
.hmr,
.arcr-write-page{
  --arcr-main:var(--arc-main, #17332a);
  --arcr-point:var(--arc-point, #2b5f4a);
  --arcr-accent:var(--arc-accent, #3f8f6b);
  --arcr-line:var(--arc-line, #cfe2d8);
  --arcr-bg:var(--arc-bg, #f2f7f4);
  --arcr-ink:var(--arc-ink, #1f2937);
  --arcr-muted:#6f6a64;
  --arcr-paper:#fff;

  /* 사이트 표준 폭. 아카이브 게시판 스킨의 --arc-max 와 같은 값이라
     제보 게시판만 좁아 보이지 않는다(그쪽은 .arc-board 가 1600px + 좌우 40px). */
  --arcr-max:1400px;
  /* 글을 읽는 폭. 1600px 을 글자로 채우면 한 줄이 너무 길어 읽기 어렵다.
     그래서 바깥 칸은 사이트에 맞추고, 글이 들어가는 안쪽만 이 값으로 좁힌다. */
  --arcr-read:900px;
}

.hmr{
  width:100%;
  max-width:var(--arcr-max);
  margin:0 auto;
  padding:8px 40px 72px;
  color:var(--arcr-ink);
  font-size:15px;
  line-height:1.75;
  letter-spacing:-.01em;
  word-break:keep-all;
}

/* 글쓰기·상세는 읽고 쓰는 화면이라 안쪽 블록을 가운데로 모아 좁힌다.
   목록(.arcr-list)은 표처럼 훑는 화면이라 넓은 폭을 그대로 쓴다. */
.arcr-write > *,
.arcr-view > *{
  max-width:var(--arcr-read);
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:1180px){ .hmr{padding-left:24px;padding-right:24px} }
@media(max-width:640px){ .hmr{padding-left:16px;padding-right:16px} }
.hmr *{box-sizing:border-box}

/* 기본 여백을 지우는 리셋은 :where() 로 감싼다.
 *
 * 왜 —  `.hmr p{margin:0}` 은 특이도가 (0,1,1) 이다. 그러면 뒤에 오는
 * `.arcr-scope__note{margin-top:22px}` (0,1,0) 이 져서 여백이 통째로 0 이 된다.
 * 실제로 안내문·단계 목록·설명글이 위 요소에 딱 붙어 버렸다. 값을 아무리
 * 키워도 화면이 꿈쩍하지 않아 원인을 찾기도 어려웠다.
 *
 * :where() 안에 넣으면 그 부분의 특이도가 0 으로 계산되어 전체가 (0,1,0) 이
 * 된다. 리셋은 그대로 걸리면서, 클래스로 준 여백은 정상적으로 이긴다.
 * 같은 이유로 링크 색도 :where() 로 감싼다 — 버튼 글자색이 상속으로
 * 덮이던 문제와 뿌리가 같다. */
.hmr :where(h1,h2,h3,p,ul,ol,dl){margin:0}
.hmr :where(ul,ol){padding:0;list-style:none}
.hmr :where(a){color:inherit;text-decoration:none}

/* ---------- 머리말 ---------- */
.arcr-crumb{display:flex;align-items:center;gap:7px;color:var(--arcr-muted);font-size:12.5px;margin:18px 0;white-space:nowrap}
.arcr-crumb a{display:flex;color:var(--arcr-muted)}
.arcr-crumb a:hover{color:var(--arcr-ink,#1f2937)}
.arcr-crumb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.arcr-crumb span:first-of-type{color:#c1c5cb}
.arcr-head{padding:8px 0 26px;margin-bottom:28px}
.arcr-kicker{
  font-size:12.5px;font-weight:700;letter-spacing:.1em;
  color:var(--arcr-accent);text-transform:uppercase;margin-bottom:8px;
}
.arcr-head h1{font-size:clamp(22px,3.2vw,30px);font-weight:800;letter-spacing:-.035em;line-height:1.3}
.arcr-lead{margin-top:12px;color:var(--arcr-muted);font-size:15px;max-width:640px}
.arcr-head__cta{margin-top:20px}
.arcr-meta{margin-top:12px;color:var(--arcr-muted);font-size:13.5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.arcr-meta i{opacity:.45;font-style:normal}

/* ---------- 버튼 ----------
   선택자 앞에 .hmr 를 반드시 붙인다.
   위쪽 `.hmr a{color:inherit}` 는 특이도가 (0,1,1) 이라, 버튼을 `.arcr-btn`
   (0,1,0) 으로만 쓰면 링크 규칙이 이겨서 글자색이 잉크색으로 상속된다.
   실제로 '사진·영상 제보하기' 버튼이 진녹 배경에 진회색 글자로 나와
   마우스를 올리기 전에는 글씨가 보이지 않았다.
   `.hmr .arcr-btn` 은 (0,2,0) 이라 안전하게 이긴다. */
.hmr .arcr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:46px;padding:0 22px;border-radius:10px;
  border:1px solid var(--arcr-line);background:var(--arcr-paper);
  color:var(--arcr-ink);font-size:15px;font-weight:600;cursor:pointer;
  transition:.2s ease;
}
.hmr .arcr-btn:hover{border-color:var(--arcr-accent);color:var(--arcr-main)}
.hmr .arcr-btn--primary{background:var(--arcr-main);border-color:var(--arcr-main);color:#fff}
.hmr .arcr-btn--primary:hover{background:var(--arcr-point);border-color:var(--arcr-point);color:#fff}
.arcr-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}

/* ---------- 저작권 고지 (글쓰기) ---------- */
.arcr-notice{
  background:var(--arcr-bg);border:1px solid var(--arcr-line);
  border-radius:14px;padding:24px 26px;margin-bottom:28px;
}
.arcr-notice h2{font-size:16.5px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;color:var(--arcr-main)}
.arcr-notice ul{display:flex;flex-direction:column;gap:12px}
.arcr-notice li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.75;color:#3f4a45}
.arcr-notice li::before{
  content:"";position:absolute;left:0;top:11px;
  width:5px;height:5px;border-radius:50%;background:var(--arcr-accent);
}
.arcr-notice strong{color:var(--arcr-main)}
.arcr-notice em{font-style:normal;font-weight:700;color:var(--arcr-point)}

/* ============================================================================
   글쓰기 화면
   ----------------------------------------------------------------------------
   입력칸·업로더·AI 진행 화면은 아카이브 글쓰기 스킨의 것을 그대로 쓴다
   (write.skin.php 가 그쪽 style.css 와 skin.js 를 함께 불러온다).
   그래서 여기에는 아카이브에 없는 것 — 저작권 고지와 동의란 — 만 둔다.

   ※ 예전에는 이 자리에 .arcr-row 로 시작하는 자체 폼 스타일이 있었다.
      그런데 목록 화면의 줄(.arcr-row)과 이름이 겹쳐서, 나중에 정의된
      목록 규칙(display:flex)이 글쓰기 폼을 덮어 라벨이 입력칸 왼쪽에
      붙어 버렸다. 지금은 글쓰기가 arc-* 클래스를 쓰므로 겹칠 일이 없다.
   ========================================================================== */
.arcr-write-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:18px 0 0}
.arcr-write-page .arcr-write-lead{
  margin:12px 0 26px;
  font-size:15.5px;
  line-height:1.75;
  color:var(--arcr-muted);
  max-width:70ch;
}

/* 저작권 고지 */
.arcr-write-page .arcr-notice{
  width:min(100%, 1080px);
  margin:0 auto 26px;
  background:var(--arcr-bg);
  border:1px solid var(--arcr-line);
  border-radius:14px;
  padding:24px 26px;
}
.arcr-write-page .arcr-notice h2{
  font-size:16.5px;font-weight:800;letter-spacing:-.02em;
  margin:0 0 14px;color:var(--arcr-main);
}
.arcr-write-page .arcr-notice ul{
  display:flex;flex-direction:column;gap:12px;margin:0 0 18px;padding:0;list-style:none;
}
.arcr-write-page .arcr-notice li{
  position:relative;padding-left:16px;
  font-size:14.5px;line-height:1.75;color:#3f4a45;
}
.arcr-write-page .arcr-notice li::before{
  content:"";position:absolute;left:0;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--arcr-accent);
}
.arcr-write-page .arcr-notice strong{color:var(--arcr-main)}
.arcr-write-page .arcr-notice em{font-style:normal;font-weight:700;color:var(--arcr-point)}

/* 동의 체크 — 고지 상자 안쪽 맨 아래 */
.arcr-check{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  margin:0;padding:16px 18px;
  background:#fff;border:1px solid var(--arcr-line);border-radius:12px;
}
.arcr-check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--arcr-main)}
.arcr-check span{font-size:14.5px;line-height:1.7;font-weight:400;color:#3f4a45}
.arcr-check strong{color:var(--arcr-main)}
.arcr-check b{color:#c0392b}

.arcr-agreed-note{
  width:min(100%, 1080px);margin:0 auto 22px;
  font-size:13px;color:var(--arcr-muted);
  background:var(--arcr-bg);border-radius:10px;padding:12px 16px;
}

@media(max-width:640px){
  .arcr-write-page .arcr-notice{padding:18px 18px;border-radius:12px}
  .arcr-check{padding:14px}
}

/* ---------- 처리상태 ---------- */
.arcr-status{
  display:flex;gap:16px;align-items:flex-start;
  border:1px solid var(--arcr-line);border-radius:14px;
  padding:20px 22px;margin-bottom:28px;background:var(--arcr-bg);
}
.arcr-status p{font-size:14.5px;color:#3f4a45;margin:0}
.arcr-status__badge{
  flex:none;display:inline-flex;align-items:center;height:30px;padding:0 14px;
  border-radius:999px;font-size:13.5px;font-weight:700;color:#fff;background:var(--arcr-muted);
}
.arcr-status.is-new .arcr-status__badge{background:#6b7f8a}
.arcr-status.is-review .arcr-status__badge{background:#b8863b}
.arcr-status.is-ok .arcr-status__badge{background:var(--arcr-main)}
.arcr-status.is-no .arcr-status__badge{background:#9a4b41}

/* ---------- 본문 ---------- */
.arcr-body,.arcr-files-view,.arcr-ai,.arcr-copyright,.arcr-adminbox,.arcr-guide{margin-bottom:28px}
.arcr-body h2,.arcr-files-view h2,.arcr-ai h2,.arcr-copyright h2,.arcr-adminbox h2,.arcr-guide h2{
  font-size:16.5px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;color:var(--arcr-main);
}
.arcr-files-view h2 span{font-weight:600;color:var(--arcr-muted);font-size:14px;margin-left:4px}
.arcr-content{font-size:15.5px;line-height:1.85;color:#333;word-break:break-word}
.arcr-content img{max-width:100%;height:auto}

.arcr-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.arcr-thumb{margin:0;border:1px solid var(--arcr-line);border-radius:12px;overflow:hidden;background:#fff}
.arcr-thumb img{width:100%;height:150px;object-fit:cover;display:block}
.arcr-thumb__file{height:150px;display:grid;place-items:center;background:var(--arcr-bg);color:var(--arcr-muted);font-size:13px}
.arcr-thumb figcaption{padding:10px 12px;font-size:12.5px;line-height:1.5}
.arcr-thumb figcaption span{display:block;color:var(--arcr-ink);word-break:break-all}
.arcr-thumb figcaption small{color:var(--arcr-muted)}

/* ---------- AI 분석 ---------- */
.arcr-ai{
  border:1px solid var(--arcr-line);border-radius:14px;padding:22px 24px;background:#fff;
}
.arcr-ai__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.arcr-ai__head h2{margin-bottom:0}
.arcr-ai__count{font-size:12.5px;color:var(--arcr-muted)}
.arcr-ai__wait{font-size:14.5px;color:var(--arcr-muted);margin-top:12px}
.arcr-ai__lead{
  margin:14px 0 18px;padding:14px 16px;border-radius:10px;
  background:var(--arcr-bg);font-size:14px;line-height:1.75;color:#3f4a45;
}
.arcr-ai__lead strong{color:var(--arcr-main)}
.arcr-ai__table{display:grid;grid-template-columns:100px 1fr;gap:0;font-size:14.5px}
.arcr-ai__table > div{display:contents}
.arcr-ai__table dt{padding:10px 0;color:var(--arcr-muted);border-top:1px solid var(--arcr-line)}
.arcr-ai__table dd{padding:10px 0;margin:0;border-top:1px solid var(--arcr-line);word-break:break-word}
.arcr-ai__files{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.arcr-ai__files li{border-top:1px solid var(--arcr-line);padding-top:14px}
.arcr-ai__files strong{display:block;font-size:13.5px;color:var(--arcr-main);word-break:break-all}
.arcr-ai__files p{margin:6px 0 0;font-size:14.5px;line-height:1.7;color:#3f4a45}
.arcr-ai__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.arcr-ai__tags span{
  display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;
  background:var(--arcr-bg);border:1px solid var(--arcr-line);
  font-size:12.5px;color:var(--arcr-point);
}
.arcr-ai__fix{margin-top:20px}

/* ---------- 저작권 안내 ---------- */
.arcr-copyright{
  border:1px solid var(--arcr-line);border-radius:14px;padding:20px 22px;background:var(--arcr-bg);
}
.arcr-copyright p{font-size:14.5px;line-height:1.8;color:#3f4a45}
.arcr-copyright strong{color:var(--arcr-main)}
.arcr-copyright__at{font-size:12.5px;color:var(--arcr-muted)}

/* ---------- 담당자 ---------- */
.arcr-adminbox{
  border:1px dashed var(--arcr-accent);border-radius:14px;padding:18px 20px;background:#fff;
}
.arcr-adminbox p{font-size:14px;line-height:1.75;color:#3f4a45}
.arcr-adminbox__now{margin-top:10px;font-size:13.5px;color:var(--arcr-muted)}

/* ---------- 목록 ---------- */
.arcr-guide{background:var(--arcr-bg);border-radius:14px;padding:20px 22px}
.arcr-guide ol{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.arcr-guide li{font-size:13.5px;line-height:1.6;color:#3f4a45}
.arcr-guide li b{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--arcr-main);color:#fff;font-size:12px;margin-right:6px;
}
@media(max-width:760px){.arcr-guide ol{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.arcr-guide ol{grid-template-columns:1fr}}

.arcr-count{font-size:13.5px;color:var(--arcr-muted);margin-bottom:10px}
.arcr-rows{border-top:1px solid var(--arcr-line)}
.arcr-row{display:flex;align-items:center;gap:14px;padding:16px 4px;border-bottom:1px solid var(--arcr-line)}
.arcr-row__chk{flex:none;margin:0}
.arcr-row__badge{
  flex:none;display:inline-flex;align-items:center;height:26px;padding:0 11px;
  border-radius:999px;font-size:12.5px;font-weight:700;color:#fff;background:#6b7f8a;
}
.arcr-row__badge.is-review{background:#b8863b}
.arcr-row__badge.is-ok{background:var(--arcr-main)}
.arcr-row__badge.is-no{background:#9a4b41}
.arcr-row__link{flex:1;min-width:0}
.arcr-row__subject{
  display:block;font-size:15.5px;font-weight:600;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.arcr-row:hover .arcr-row__subject{color:var(--arcr-point);text-decoration:underline;text-underline-offset:3px}
.arcr-row__cmt{font-style:normal;font-size:12.5px;color:var(--arcr-accent);margin-left:6px}
.arcr-row__meta{display:block;margin-top:5px;font-size:12.5px;color:var(--arcr-muted)}
.arcr-row__meta i{opacity:.45;font-style:normal;margin:0 5px}
.arcr-empty{padding:56px 20px;text-align:center;color:var(--arcr-muted);font-size:14.5px}

.arcr-adminbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.arcr-adminbar .arcr-btn{height:38px;padding:0 14px;font-size:13.5px}

.arcr-search{display:flex;gap:8px;justify-content:center;margin-top:26px}
.arcr-search input[type=text]{
  width:min(320px,60vw);height:46px;border:1px solid var(--arcr-line);
  border-radius:10px;padding:0 14px;font-size:14.5px;
}

/* 그누보드 기본 페이지네이션을 스킨 톤에 맞춘다 */
.hmr .pg_wrap{display:flex;justify-content:center;gap:6px;margin-top:28px;flex-wrap:wrap}
.hmr .pg_page,.hmr .pg_current{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 10px;
  border-radius:10px;font-size:14.5px;border:1px solid transparent;color:var(--arcr-muted);
}
.hmr .pg_page:hover{border-color:var(--arcr-line);color:var(--arcr-main)}
.hmr .pg_current{background:var(--arcr-main);color:#fff;font-weight:700}

/* 동의 전 AI 시작 버튼 — 눌러도 막히므로 그렇게 보이게 한다.
   disabled 속성은 쓰지 않는다(파일 선택 여부에 따라 skin.js 가 관리한다). */
.arcr-write-page .arc-ai-start.is-need-agree{
  opacity:.55;
  cursor:not-allowed;
}

/* ============================================================================
   받는 자료 기준 안내 (목록 · 글쓰기 공통)
   ----------------------------------------------------------------------------
   "받습니다 / 받지 않습니다" 를 나란히 두는 이유
     한쪽만 적어 두면 읽는 사람이 자기 자료가 여기 드는지 판단하기 어렵다.
     둘을 붙여 놓으면 비교가 되어, 보내기 전에 스스로 걸러진다.
     거절 건수를 줄이는 것이 이 구역의 목적이다.
   ========================================================================== */
.arcr-scope{
  width:min(100%, 1080px);
  margin:0 auto 26px;
  background:var(--arcr-paper);
  border:1px solid var(--arcr-line);
  border-radius:14px;
  padding:24px 26px;
}
.arcr-scope > h2{
  font-size:16.5px;font-weight:800;letter-spacing:-.02em;
  margin:0 0 16px;color:var(--arcr-main);
}
.arcr-scope__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.arcr-scope__cols{grid-template-columns:1fr;gap:14px}}

.arcr-scope__col{border-radius:12px;padding:16px 18px}
.arcr-scope__col.is-yes{background:var(--arcr-bg);border:1px solid var(--arcr-line)}
.arcr-scope__col.is-no{background:#faf7f5;border:1px solid #e8ddd8}
.arcr-scope__col h3{
  display:flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px;
}
.arcr-scope__col.is-yes h3{color:var(--arcr-main)}
.arcr-scope__col.is-no h3{color:#9a4b41}
/* 앞의 표시는 글이 아니라 기호다 — 화면 낭독기가 읽지 않게 둔다 */
.arcr-scope__col h3::before{
  content:"";width:18px;height:18px;border-radius:50%;flex:none;
  background:no-repeat center/12px 12px;
}
.arcr-scope__col.is-yes h3::before{
  background-color:var(--arcr-main);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}
.arcr-scope__col.is-no h3::before{
  background-color:#9a4b41;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.arcr-scope__col ul{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
.arcr-scope__col li{
  position:relative;padding-left:13px;
  font-size:14px;line-height:1.65;color:#3f4a45;
}
.arcr-scope__col li::before{
  content:"";position:absolute;left:0;top:10px;
  width:5px;height:1.5px;background:var(--arcr-line);
}
.arcr-scope__col.is-no li::before{background:#e0cdc6}
.arcr-scope__col strong{color:var(--arcr-main)}
.arcr-scope__col.is-no strong{color:#9a4b41}

.arcr-scope__note{
  margin:16px 0 0;padding:12px 14px;
  background:var(--arcr-bg);border-radius:10px;
  font-size:13.5px;line-height:1.7;color:#3f4a45;
}
.arcr-scope__note strong{color:var(--arcr-main)}

@media(max-width:640px){
  .arcr-scope{padding:18px;border-radius:12px}
}

/* ============================================================================
   목록 머리말 — 한 줄 배치
   ----------------------------------------------------------------------------
   이 화면에 온 사람은 이미 제보하러 온 것이다. 긴 설명보다 '제보하기'까지
   가는 길이 짧은 편이 낫다. 제목과 버튼을 같은 줄에 두고 설명은 한 줄로 줄여
   첫 화면에 목록이 보이게 한다.
   ========================================================================== */
.arcr-head--compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding:4px 0 18px;
  margin-bottom:16px;
}
.arcr-head--compact .arcr-head__text{min-width:0;flex:1 1 420px}
.arcr-head--compact h1{
  font-size:clamp(20px,2.6vw,26px);
  font-weight:800;letter-spacing:-.035em;line-height:1.25;margin:0;
}
.arcr-head--compact .arcr-lead{
  margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--arcr-muted);max-width:70ch;
}
.arcr-head--compact .arcr-lead strong{color:var(--arcr-main)}
.arcr-head__btn{flex:none}
@media(max-width:640px){
  .arcr-head--compact{gap:14px;padding-bottom:14px}
  .arcr-head__btn{width:100%}
}

/* ---------- 접히는 안내 ---------- */
.arcr-fold{
  border:1px solid var(--arcr-line);
  border-radius:12px;
  background:var(--arcr-paper);
  margin-bottom:22px;
  overflow:hidden;
}
.arcr-fold > summary{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 18px;
  cursor:pointer;
  font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--arcr-main);
  list-style:none;
}
.arcr-fold > summary::-webkit-details-marker{display:none}
/* 여닫이 표시는 직접 그린다 — 브라우저 기본 삼각형은 위치가 제각각이다 */
.arcr-fold > summary::before{
  content:"";flex:none;width:9px;height:9px;
  border-right:2px solid var(--arcr-accent);
  border-bottom:2px solid var(--arcr-accent);
  transform:rotate(45deg);
  transition:transform .2s ease;
  margin-top:-3px;
}
.arcr-fold[open] > summary::before{transform:rotate(-135deg);margin-top:3px}
.arcr-fold > summary:hover{background:var(--arcr-bg)}
.arcr-fold > summary em{
  font-style:normal;font-weight:500;font-size:13px;color:var(--arcr-muted);
}
.arcr-fold__body{padding:2px 18px 18px;border-top:1px solid var(--arcr-line)}
.arcr-fold__body .arcr-scope__cols{margin-top:16px}

/* 접힌 칸 안의 진행 단계 — 네 칸을 한 줄로 */
.arcr-steps{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:16px 0 0;padding:0;list-style:none;
}
.arcr-steps li{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  background:var(--arcr-bg);border:1px solid var(--arcr-line);
  font-size:13px;color:#3f4a45;
}
.arcr-steps b{
  display:inline-grid;place-items:center;
  width:19px;height:19px;border-radius:50%;
  background:var(--arcr-main);color:#fff;font-size:11px;font-weight:700;
}

/* ---------- 기준 안내 상자의 숨통 ----------
   처음엔 값을 촘촘하게 잡았더니 목록·설명·안내문이 서로 붙어 답답했다.
   읽는 글이 많은 칸이라 줄 간격과 안쪽 여백을 넉넉히 준다.
   (목록 화면의 접힌 칸에도 같이 적용된다) */
.arcr-scope,
.arcr-fold__body{ padding-bottom:24px }
.arcr-scope{ padding:28px 28px 24px }

.arcr-scope__cols{ gap:22px }
.arcr-scope__col{ padding:20px 22px }
.arcr-scope__col h3{ margin-bottom:14px }
.arcr-scope__col ul{ gap:10px }
.arcr-scope__col li{ padding-left:15px; line-height:1.7 }
.arcr-scope__col li::before{ top:11px }

.arcr-scope__note{
  margin-top:22px;
  padding:15px 18px;
  line-height:1.75;
}

/* 상자 자체도 다음 구역과 붙지 않게 */
.arcr-write-page .arcr-scope{ margin-bottom:28px }

@media(max-width:640px){
  .arcr-scope{ padding:20px 18px 18px }
  .arcr-scope__col{ padding:16px 16px }
  .arcr-scope__note{ margin-top:16px; padding:13px 15px }
}

/* ============================================================================
   담당자 검토 패널 (상세 화면, 관리자에게만 보인다)
   ========================================================================== */
.arcr-review{
  border:1px solid var(--arcr-accent);
  border-radius:14px;
  background:var(--arcr-paper);
  padding:22px 24px;
  margin-bottom:28px;
}
.arcr-review__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--arcr-line);
}
.arcr-review__head h2{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--arcr-main)}
.arcr-review__now{font-size:13.5px;color:var(--arcr-muted)}
.arcr-review__now b{color:var(--arcr-main)}
.arcr-review h3{
  font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--arcr-main);margin:0 0 10px;
}
.arcr-review__caveat{
  font-size:13px;line-height:1.7;color:var(--arcr-muted);
  background:var(--arcr-bg);border-radius:8px;padding:11px 14px;margin:0 0 14px;
}
.arcr-review__caveat strong{color:var(--arcr-main)}

/* 신호 목록 — 색으로 심각도를 구분하되 글로도 읽히게 한다 */
.arcr-review__signals ul{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.arcr-review__signals li{
  display:flex;flex-direction:column;gap:3px;
  padding:12px 14px 12px 16px;border-radius:10px;
  border:1px solid var(--arcr-line);border-left-width:4px;background:#fff;
}
.arcr-review__signals li strong{font-size:14px;font-weight:700;letter-spacing:-.02em}
.arcr-review__signals li span{font-size:13px;line-height:1.65;color:#3f4a45}
.arcr-review__signals li.is-warn{border-left-color:#b8863b;background:#fdfaf4}
.arcr-review__signals li.is-warn strong{color:#8a6414}
.arcr-review__signals li.is-ok{border-left-color:var(--arcr-main);background:var(--arcr-bg)}
.arcr-review__signals li.is-ok strong{color:var(--arcr-main)}
.arcr-review__signals li.is-info{border-left-color:var(--arcr-line)}
.arcr-review__signals li.is-info strong{color:var(--arcr-muted)}

.arcr-review__how{margin-top:20px}
.arcr-review__how ol{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.arcr-review__how li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:14px;line-height:1.65;color:#3f4a45;
}
.arcr-review__how li b{
  flex:none;display:inline-grid;place-items:center;
  width:20px;height:20px;border-radius:50%;margin-top:2px;
  background:var(--arcr-main);color:#fff;font-size:11px;font-weight:700;
}
.arcr-review__how strong{color:var(--arcr-main)}
.arcr-review__note{
  margin:14px 0 0;padding:12px 14px;border-radius:8px;
  background:var(--arcr-bg);font-size:13px;line-height:1.7;color:#3f4a45;
}
.arcr-review__note b{color:var(--arcr-main)}
.arcr-review__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}

/* 담당자 처리칸 (수정 화면) */
.arcr-admin-row{
  border:1px solid var(--arcr-accent);border-radius:12px;
  padding:16px 18px;background:var(--arcr-bg);
}
.arcr-admin-row > label small{
  font-weight:600;font-size:11.5px;color:var(--arcr-accent);
  margin-left:6px;letter-spacing:.02em;
}
.arcr-admin-row .arc-write-help strong{color:#8a6414}

/* 첨부 원본 보기 */
.arcr-thumb a{display:block;position:relative}
.arcr-thumb__zoom{
  position:absolute;left:0;right:0;bottom:0;
  padding:7px 10px;font-size:12px;font-weight:600;color:#fff;
  background:linear-gradient(0deg, rgba(15,25,20,.78), rgba(15,25,20,0));
  opacity:0;transition:opacity .18s ease;text-align:center;
}
.arcr-thumb a:hover .arcr-thumb__zoom,
.arcr-thumb a:focus-visible .arcr-thumb__zoom{opacity:1}
.arcr-thumb__file{
  display:grid;place-items:center;height:150px;
  background:var(--arcr-bg);color:var(--arcr-muted);font-size:13px;
}
@media(hover:none){ .arcr-thumb__zoom{opacity:1} }

@media(max-width:640px){
  .arcr-review{padding:18px;border-radius:12px}
}

/* ---------- 세로 간격 마무리 ----------
   리셋을 :where() 로 낮춘 뒤에야 아래 값들이 실제로 먹기 시작했다.
   행과 행 사이가 붙어 답답하던 곳을 한 번에 잡는다. */
.arcr-scope__note{ margin-top:24px }
.arcr-steps{ margin-top:22px; row-gap:10px }
.arcr-fold__body{ padding-top:6px }
.arcr-fold__body .arcr-scope__cols{ margin-top:18px }
.arcr-review__caveat{ margin-bottom:16px }
.arcr-review__note{ margin-top:16px }
.arcr-scope__col li{ line-height:1.75 }

/* 접힌 칸을 열었을 때 아래 목록과도 떨어뜨린다 */
.arcr-fold{ margin-bottom:26px }

/* ============================================================================
   글쓰기 화면 — 아카이브 리셋을 넘어서기
   ----------------------------------------------------------------------------
   이 화면은 아카이브 스타일시트를 함께 불러온다. 그쪽 30줄에
       .arc-board h1,h2,h3,p,dl,dt,dd { margin:0; padding:0 }
   이 있고 특이도가 (0,1,1) 이라, 내가 클래스 하나로 준 여백(0,1,0)을 전부
   이긴다. 실제로 안내문(.arcr-scope__note)의 좌우 안쪽 여백이 0 이 되어
   글자가 상자 테두리에 딱 붙었다.

   그래서 이 화면에서 쓰는 p·h2·h3 계열은 .arcr-write-page 를 앞에 붙여
   (0,2,0) 으로 올린다. 값을 키우는 것으로는 해결되지 않는 종류의 문제다.
   ========================================================================== */
.arcr-write-page .arcr-scope__note{
  margin:24px 0 0;
  padding:16px 20px;
  background:var(--arcr-bg);
  border-radius:10px;
  font-size:13.5px;
  line-height:1.75;
  color:#3f4a45;
}
.arcr-write-page .arcr-scope > h2{
  margin:0 0 16px;
  padding:0;
  font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--arcr-main);
}
.arcr-write-page .arcr-scope__col h3{
  margin:0 0 14px;
  padding:0;
}
.arcr-write-page .arcr-agreed-note{
  margin:0 auto 22px;
  padding:12px 16px;
}
/* 두 칸 사이와 바깥 여백도 조금 더 — 글이 많은 칸이라 숨통이 필요하다 */
.arcr-write-page .arcr-scope{ padding:28px 30px 26px }
.arcr-write-page .arcr-scope__cols{ gap:24px }
.arcr-write-page .arcr-scope__col{ padding:20px 22px 22px }

@media(max-width:640px){
  .arcr-write-page .arcr-scope{ padding:20px 18px 18px }
  .arcr-write-page .arcr-scope__note{ margin-top:18px; padding:14px 16px }
}

/* ── 두 단계 진행 표시 (2026-08-28) ────────────────────────────────────────
   1 안내 확인·동의 → 2 자료 등록.
   지금 어디쯤인지, 앞으로 몇 걸음 남았는지 보이면 처음 온 사람이 덜 망설인다. */
.arcr-steps {
  display:flex; align-items:center; gap:10px;
  max-width:var(--arcr-read); margin:0 auto 26px; padding:0 4px;
}
.arcr-steps i {
  flex:1 1 auto; height:2px; background:var(--arcr-line); border-radius:2px;
}
.arcr-step {
  display:flex; align-items:center; gap:9px; flex:none;
  color:var(--arcr-muted); font-size:14px; font-weight:600;
}
.arcr-step span {
  width:26px; height:26px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--arcr-line); color:#fff; font-size:13px; font-weight:800;
}
.arcr-step.is-active { color:var(--arcr-main); }
.arcr-step.is-active span { background:var(--arcr-main); }
/* 지나온 단계 — 숫자 자리에 체크를 넣는다 */
.arcr-step.is-done { color:var(--arcr-point); }
.arcr-step.is-done span { background:var(--arcr-accent); font-size:0; }
.arcr-step.is-done span::after { content:'\2713'; font-size:14px; }

/* 1단계 아래 버튼 줄 — 2단계의 arc-write-actions 와 같은 모양으로 맞춘다 */
.arcr-step-actions {
  display:flex; justify-content:flex-end; gap:10px;
  max-width:var(--arcr-read); margin:22px auto 0;
}

@media (max-width:600px) {
  .arcr-steps { gap:7px; }
  .arcr-step strong { display:none; }   /* 좁은 화면에서는 번호만 */
  .arcr-step-actions { flex-direction:column-reverse; }
  .arcr-step-actions .arc-btn { width:100%; text-align:center; }
}

/* ── 1단계를 한 화면에 담는다 (2026-08-28) ────────────────────────────────
   [동의하고 다음으로]가 화면 밖으로 밀려 잘려 보였다. 안내를 읽고 바로
   누르는 자리라, 스크롤을 내려야 단추가 보이면 흐름이 끊긴다.

   내용을 덜어내지 않고 세로 여백만 줄인다 — 읽을 것은 그대로 두고
   빈 곳을 좁히는 쪽이 낫다. 넓은 화면에서는 고지 항목을 두 줄로 나눠
   세로를 더 줄인다. 좁은 화면(노트북 세로, 태블릿)에서는 원래대로 흐른다.
   2단계에는 적용하지 않는다 — 거기는 스크롤이 자연스럽다. */
#arcrStep1 .arcr-scope,
#arcrStep1 .arcr-notice { padding:18px 22px; margin-bottom:16px; }
#arcrStep1 .arcr-scope > h2,
#arcrStep1 .arcr-notice h2 { font-size:15.5px; margin-bottom:11px; }
#arcrStep1 .arcr-scope__cols { gap:14px; }
#arcrStep1 .arcr-scope__col { padding:13px 15px; }
#arcrStep1 .arcr-scope__col h3 { font-size:14px; margin-bottom:7px; }
#arcrStep1 .arcr-scope__col li { line-height:1.6; }
#arcrStep1 .arcr-scope__note { margin-top:14px; padding:10px 14px; font-size:13px; }
#arcrStep1 .arcr-notice ul { gap:8px; margin-bottom:14px; }
#arcrStep1 .arcr-notice li { font-size:14px; line-height:1.6; }
#arcrStep1 .arcr-notice li::before { top:9px; }
#arcrStep1 .arcr-check { padding:12px 15px; }
#arcrStep1 .arcr-check span { font-size:14px; line-height:1.6; }
.arcr-step-actions { margin-top:16px; }

/* 넓은 화면 — 고지 네 항목을 두 줄로 나눈다. 세로가 절반이 된다. */
@media (min-width:1000px) {
  #arcrStep1 .arcr-notice ul {
    display:grid; grid-template-columns:1fr 1fr; gap:9px 26px;
  }
  .arcr-write-page .arcr-write-lead { margin-bottom:16px; }
  .arcr-steps { margin-bottom:18px; }
}

/* 1단계 — 남은 세로 여백 마무리 (2026-08-28) */
#arcrStep1 .arcr-scope,
#arcrStep1 .arcr-notice { margin-bottom:12px; }
#arcrStep1 .arcr-scope__note { margin-top:11px; padding:9px 13px; }
#arcrStep1 .arcr-notice ul { margin-bottom:11px; }
.arcr-step-actions { margin-top:14px; }
@media (min-width:1000px) {
  .arcr-write-head { margin-top:8px; }
  .arcr-write-page .arcr-write-lead { margin:8px 0 14px; }
  .arcr-steps { margin-bottom:14px; }
}

/* ── 고지 항목 — 핵심은 크게, 부연은 작게 (2026-08-28) ────────────────────
   한 항목 = 굵은 한 줄(핵심) + 작은 한 줄(부연).
   훑기만 해도 네 가지가 눈에 들어오고, 궁금한 사람만 아래 줄을 읽는다.
   길게 쓰면 아무도 안 읽어 고지의 뜻이 사라진다. */
.arcr-write-page .arcr-notice li { line-height:1.55; }
.arcr-write-page .arcr-notice li strong {
  display:block;
  font-size:15.5px; font-weight:800; letter-spacing:-.02em;
  color:var(--arcr-main);
  margin-bottom:3px;
}
.arcr-write-page .arcr-notice li span {
  display:block;
  font-size:13.5px; color:#6b7671;
}
#arcrStep1 .arcr-notice li strong { font-size:15px; }
#arcrStep1 .arcr-notice li span { font-size:13.5px; }
@media (max-width:640px) {
  .arcr-write-page .arcr-notice li strong { font-size:15px; }
  .arcr-write-page .arcr-notice li span { font-size:13px; }
}

/* ── 알림창 단추 가운데로 (2026-08-28) ────────────────────────────────────
   빌려 쓰는 확인창 CSS 는 [취소][확인] 두 개를 전제로 grid 2칸을 잡는다.
   알림창은 단추가 [확인] 하나뿐이라 그대로 두면 왼쪽 절반만 차지해
   한쪽으로 쏠려 보인다. 이 레이어에서만 가운데로 세운다. */
#arcrAlertLayer .arc-confirm-actions {
  display:flex; justify-content:center; margin-top:22px;
}
#arcrAlertLayer .arc-confirm-actions button { min-width:134px; padding:0 26px; }