/* ============================================================
   pages/archive/page.css — 자료실

   ⭐ **이 파일은 이 화면 안쪽만 건드린다.** 다른 레일에는 영향이 없다.
   공용(토큰 · 표 · 알약 · 버튼 · 글꼴 · 색)은 styles/ 가 갖는다. 여기서는 그것을 물려받고
   이 화면에만 필요한 것만 덧쓴다. 그래서 이 화면을 고칠 때 다른 화면을 볼 일이 없다.

   @scope .ar-page, .ar-, #ar
   ⚠️ 위 @scope 는 약속이 아니라 검사 대상이다 — 여기 적힌 것에 걸리지 않는 셀렉터를 쓰면
      tests/test_pages.js 가 실패한다. 공용 규칙을 여기서 덮어쓰지 못하게 막는 장치다.

   ⭐ 색은 전부 토큰에서 온다. 제품 상징색도 `--prod-*` 를 그대로 쓴다(RULES 3-6).
      **여기서 새 색을 만들지 않는다.**
   ============================================================ */

.ar-page{ padding:0; }
.ar-page .ar-card{ margin:0; padding:14px 16px; height:100%; min-height:0;
  display:flex; flex-direction:column; }

/* ---------- 머리 — 경로 · 제목 · 오른쪽 버튼 ---------- */
.ar-head{ display:flex; align-items:flex-end; gap:var(--sp-3); margin:0 0 var(--sp-4); flex:none; }
.ar-head .ar-h-l{ min-width:0; flex:1; }
.ar-crumb{ display:flex; align-items:center; gap:6px; font-size:var(--fs-2); color:var(--muted); margin-bottom:3px; }
.ar-crumb button{
  border-width:0; background:transparent; padding:0; cursor:pointer;
  font-family:inherit; font-size:var(--fs-2); font-weight:700; color:var(--primary);
}
.ar-crumb button:hover{ text-decoration:underline; }
.ar-title{ font-size:var(--fs-6); font-weight:800; color:var(--text); }
.ar-sub{ font-size:var(--fs-2); color:var(--muted); margin-top:3px; }
.ar-head .ar-h-r{ display:flex; gap:var(--sp-2); flex:none; }

/* ---------- 본문 ---------- */
.ar-body{ flex:1; min-height:0; overflow:auto; }

/* ---------- ① 제품 폴더 카드 ----------
   ⭐ 한 줄에 **최대 3개**다(슬랙 허들 화면과 같은 배치).
   좁아지면 2 → 1 로 줄고, 카드가 옆으로 늘어나되 찌그러지지 않는다.
   ⚠️ `min-width:0` 을 빼면 긴 제품명이 든 칸만 넓어진다. */
.ar-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-3); }
.ar-fold{
  min-width:0; display:flex; flex-direction:column; cursor:pointer; text-align:left;
  padding:0; overflow:hidden; font-family:inherit;
  border-radius:var(--sk-r); background:var(--card);
  border-width:1px; border-style:solid; border-color:var(--line-soft);
}
.ar-fold:hover{ border-color:var(--primary); box-shadow:0 2px 10px rgba(0,0,0,.07); }

/* 윗부분 — 제품 상징색 배경. 색은 js 가 인라인으로 토큰을 물려 준다 */
.ar-fold-top{
  position:relative; height:96px; display:flex; align-items:center; justify-content:center;
  background:var(--ar-prod, var(--prod-etc));
}
/* ⭐ 로고는 흰 사각형 위에 얹는다. 로고 그림이 가로로 긴 것도 있고 정사각인 것도 있어서,
   **칸 크기를 고정하고 그림을 그 안에 맞춘다**(원본 비율은 유지). */
.ar-logo{
  width:132px; height:52px; border-radius:var(--sk-r-sm); background:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding:6px;
}
.ar-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
/* 로고가 없는 제품은 머리글자로 대신한다 */
.ar-ini{ font-size:var(--fs-6); font-weight:800; letter-spacing:.02em; color:var(--ar-prod, var(--prod-etc)); }
.ar-new{
  position:absolute; left:10px; top:10px; padding:2px 8px; border-radius:999px;
  background:#fff; color:var(--ar-prod, var(--prod-etc));
  font-size:var(--fs-1); font-weight:800;
}
.ar-fold-b{ padding:10px 12px 12px; min-width:0; }
/* ⚠️ 카드 안쪽은 <button> 이라 <div> 를 넣을 수 없어 전부 <span> 이다.
   span 은 그냥 두면 옆으로 이어 붙어 "스팸스나이퍼문서 4건…" 이 된다. 줄을 나눠 준다. */
.ar-fold-n{ display:block; font-size:var(--fs-4); font-weight:800; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-fold-m{ display:block; font-size:var(--fs-2); color:var(--muted); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- ② 분류별 문서 목록 ---------- */
.ar-sec{ margin:0 0 var(--sp-4); }
.ar-sec-h{ display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-2); }
.ar-sec-t{ font-size:var(--fs-4); font-weight:800; color:var(--text); }
.ar-sec-c{ font-size:var(--fs-2); color:var(--muted); }
.ar-box{
  border-radius:var(--sk-r); background:var(--card); overflow:hidden;
  border-width:1px; border-style:solid; border-color:var(--line-soft);
}
/* ⭐ 열 폭을 **못박는다**(table-layout:fixed).
   ⚠️ 자동 폭으로 두면 표 칸의 `max-width` 가 **무시된다**(표 레이아웃 규칙).
      그래서 문서 이름이 긴 줄에서 브라우저가 맨 오른쪽 칸을 내용보다 좁게 눌러 버렸고,
      [삭제] 버튼이 표 밖으로 잘려 나갔다(실측 140px 칸에 260px 짜리 버튼 묶음).
      못박아 두면 줄마다 내용이 달라도 열이 흔들리지 않고, 긴 이름은 `…` 로 잘린다. */
.ar-tbl{ width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; }
.ar-tbl th, .ar-tbl td{ overflow:hidden; text-overflow:ellipsis; }
.ar-tbl th{
  text-align:left; padding:9px 12px; font-size:var(--fs-2); font-weight:700; color:var(--muted);
  background:var(--sk-bg2); white-space:nowrap;
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line-soft);
}
.ar-tbl td{
  padding:9px 12px; font-size:var(--fs-3); color:var(--text); vertical-align:middle;
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line-soft);
}
.ar-tbl tbody tr:last-child td{ border-bottom-width:0; }
.ar-tbl tbody tr:hover{ background:var(--row-hover); }
.ar-tbl .ar-c-n{ text-align:right; white-space:nowrap; }
.ar-tbl .ar-c-d{ white-space:nowrap; }
.ar-tbl .ar-c-a{ text-align:right; white-space:nowrap; }
/* ⭐ 남는 폭은 **문서 이름 칸이 혼자 먹는다.**
   그러지 않으면 `이전 2` 처럼 줄마다 있고 없고 하는 것 때문에 열 너비가 흔들리고,
   그만큼 맨 오른쪽 버튼이 표 밖으로 밀려 잘린다([삭제] 가 실제로 잘렸다).
   `width:100%` 로 남는 폭을 몰아주고 `max-width:0` 으로 그 칸만 줄어들 수 있게 한다. */
.ar-tbl th:not(:first-child), .ar-tbl td:not(:first-child){ white-space:nowrap; }
/* 첫 칸(문서 이름)에는 폭을 주지 않는다 — 남는 폭을 혼자 가져간다.
   ⭐ 확장자 열이 문서 바로 뒤에 들어와 뒤 열의 번호가 한 칸씩 밀렸다.
   ① 제품 상세 : 문서 | 확장자 | 버전 | 공개 범위 | 갱신일 | 크기 | 받기 */
.ar-t-detail th:nth-child(2){ width:82px; }
.ar-t-detail th:nth-child(3){ width:154px; }
.ar-t-detail th:nth-child(4){ width:96px; }
.ar-t-detail th:nth-child(5){ width:104px; }
.ar-t-detail th:nth-child(6){ width:78px; }
.ar-t-detail th:nth-child(7){ width:78px; }
/* 관리자에게는 [버전 추가 · 수정 · 삭제] 가 더 붙는다. 그만큼 넓힌다(실측 260px). */
.ar-t-detail.ar-t-edit th:nth-child(7){ width:284px; }
/* ② 모아보기 : 문서 | 확장자 | 제품 | 버전 | 공개 범위 | 갱신일 | 크기 | 받기 */
.ar-t-flat th:nth-child(2){ width:82px; }
.ar-t-flat th:nth-child(3){ width:132px; }
.ar-t-flat th:nth-child(4){ width:96px; }
.ar-t-flat th:nth-child(5){ width:104px; }
.ar-t-flat th:nth-child(6){ width:104px; }
.ar-t-flat th:nth-child(7){ width:78px; }
.ar-t-flat th:nth-child(8){ width:78px; }
.ar-doc-t{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-doc-f{ font-size:var(--fs-1); color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 알약 — 최신 · 공개 범위. ⚠️ 대외비는 `--negative` 시맨틱 색이다 */
.ar-tag{ display:inline-block; padding:1px 8px; border-radius:999px;
  font-size:var(--fs-1); font-weight:800; background:var(--sk-bg2); color:var(--muted); }
.ar-tag.new{ background:var(--primary-light); color:var(--primary); }
.ar-tag.sec{ background:var(--negative-bg); color:var(--negative); }

/* 옛 버전 — `이전 N` 을 눌러야 펼쳐진다 */
.ar-more{
  border-width:0; background:transparent; padding:2px 6px; cursor:pointer;
  font-family:inherit; font-size:var(--fs-2); font-weight:700; color:var(--primary);
}
.ar-tbl tr.ar-old td{ background:var(--sk-bg2); font-size:var(--fs-2); color:var(--muted); }
.ar-tbl tr.ar-old td:first-child{ padding-left:26px; }

.ar-none{ padding:26px 12px; text-align:center; color:var(--muted); font-size:var(--fs-3); }

/* ---------- ③ 팝업 ---------- */
.ar-modal{
  position:fixed; inset:0; z-index:1200; background:rgba(17,20,24,.42);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.ar-dlg{
  width:min(520px, 100%); max-height:88vh; display:flex; flex-direction:column;
  border-radius:var(--sk-r); background:var(--card); box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.ar-dlg-h{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:13px 16px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line-soft); }
.ar-dlg-h b{ font-size:var(--fs-4); font-weight:800; }
.ar-x{ border-width:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:var(--fs-4); color:var(--muted); padding:2px 6px; }
.ar-x:hover{ color:var(--text); }
.ar-dlg-b{ padding:14px 16px; overflow:auto; }
.ar-dlg-f{ display:flex; align-items:center; gap:var(--sp-2); padding:12px 16px;
  border-top-width:1px; border-top-style:solid; border-top-color:var(--line-soft); }
.ar-msg{ flex:1; min-width:0; font-size:var(--fs-2); color:var(--negative); }

.ar-f{ margin:0 0 var(--sp-3); }
.ar-f > label{ display:block; font-size:var(--fs-2); font-weight:700; color:var(--muted); margin-bottom:4px; }
.ar-f input[type="text"], .ar-f input[type="url"], .ar-f select, .ar-f input[type="file"]{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:var(--fs-3); color:var(--text);
  padding:7px 10px; border-radius:var(--sk-r-sm); background:var(--card);
  border-width:1px; border-style:solid; border-color:var(--line);
}
.ar-f .ar-hint{ font-size:var(--fs-1); color:var(--muted); margin-top:4px; }
.ar-f2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.ar-seg{ display:flex; gap:var(--sp-2); }
.ar-seg button{
  flex:1; cursor:pointer; font-family:inherit; font-size:var(--fs-3); font-weight:700;
  padding:7px 10px; border-radius:var(--sk-r-sm); background:var(--card); color:var(--muted);
  border-width:1px; border-style:solid; border-color:var(--line);
}
.ar-seg button.on{ background:var(--primary-light); color:var(--primary); border-color:var(--primary); }

/* 올리는 중 진행률 */
.ar-prog{ padding:0 16px 12px; }
.ar-prog-bar{ height:6px; border-radius:999px; background:var(--sk-bg2); overflow:hidden; }
.ar-prog-fill{ height:100%; width:0; background:var(--primary); transition:width .12s linear; }
.ar-prog-tx{ font-size:var(--fs-1); color:var(--muted); margin-top:5px; }

/* ---------- 좁은 화면 — 3 → 2 → 1 ---------- */
@media (max-width:1200px){
  .ar-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:760px){
  .ar-grid{ grid-template-columns:minmax(0, 1fr); }
  .ar-f2{ grid-template-columns:minmax(0, 1fr); }
}

/* ============================================================
   일괄 등록 · 버전 순서 · 미리보기 · 새 자료 표시
   ⚠️ 새 규칙은 이 블록 맨 뒤에 쌓는다. 되돌릴 때 이 블록만 지우면 된다.
   ============================================================ */

/* ---------- 표 오른쪽 버튼이 늘었다 (미리보기 · 링크) ----------
   ⚠️ 폭을 못박은 표라 칸을 넓히지 않으면 버튼이 그대로 잘린다. */
.ar-t-detail th:nth-child(7){ width:186px; }
.ar-t-detail.ar-t-edit th:nth-child(7){ width:404px; }
.ar-t-flat th:nth-child(8){ width:186px; }

/* ---------- 새 자료 표시 · 다운로드 수 ---------- */
.ar-nw{
  display:inline-block; margin-right:5px; padding:1px 6px; vertical-align:1px;
  font-size:var(--fs-1); font-weight:800; line-height:1.5;
  color:#fff; background:var(--primary); border-radius:var(--radius-full);
}
.ar-dl{ color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---------- 첫 화면의 `최근 올라온 자료` 를 없애면서 그 모양 규칙도 함께 걷어냈다 ----------
   건수는 패널 항목의 글자로 들어가므로 이 화면에 새 모양을 만들지 않았다. */

/* ---------- 끌어다 놓기 ---------- */
.ar-drop{
  position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.32);
}
.ar-drop-b{
  padding:16px 22px; font-size:var(--fs-4); font-weight:800; color:var(--primary);
  background:#fff; border-radius:var(--radius-lg);
  border-width:2px; border-style:dashed; border-color:var(--primary);
}
.ar-page{ position:relative; }

/* ---------- 일괄 등록 목록 ---------- */
.ar-dlg-w{ width:min(860px, 100%); }
.ar-bk-n{ margin-left:6px; font-size:var(--fs-2); font-weight:700; color:var(--muted); }
.ar-bk-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px;
  font-size:var(--fs-2); font-weight:700; color:var(--text); }
.ar-bk-p{ height:28px; padding:0 8px; font-family:inherit; font-size:var(--fs-2);
  color:var(--text); background:#fff;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm); }
.ar-bk-list{ display:flex; flex-direction:column; gap:5px; }
.ar-bk-r{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) 118px 118px 74px 26px;
  align-items:center; gap:6px; }
.ar-bk-r > *{ min-width:0; height:28px; }
.ar-bk-f{ font-size:var(--fs-1); color:var(--muted); line-height:28px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-bk-r input, .ar-bk-r select{
  padding:0 8px; font-family:inherit; font-size:var(--fs-2); color:var(--text); background:#fff;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm);
}
.ar-bk-r input:focus, .ar-bk-r select:focus{ border-color:var(--primary); }
.ar-bk-x{ cursor:pointer; font-family:inherit; font-size:var(--fs-2); color:var(--muted);
  background:none; border:0; border-radius:var(--radius-sm); }
.ar-bk-x:hover{ color:var(--negative); background:var(--row-hover); }

/* ---------- 버전 순서 끌기 ---------- */
.ar-tbl tr.ar-drag{ cursor:grab; }
.ar-tbl tr.ar-drag td:first-child{ position:relative; }
.ar-tbl tr.ar-drag td:first-child::before{
  content:'⠿'; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  font-size:var(--fs-2); color:var(--line);
}
.ar-tbl tr.ar-drag td:first-child{ padding-left:24px; }
.ar-tbl tr.ar-old.ar-drag td:first-child{ padding-left:40px; }
.ar-tbl tr.ar-old.ar-drag td:first-child::before{ left:22px; }

/* ---------- 미리보기 ---------- */
.ar-dlg-v{ width:min(1040px, 100%); height:min(88vh, 900px); }
.ar-dlg-v .ar-sp{ flex:1; }
.ar-view{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:10px; background:var(--sk-bg2); overflow:auto; }
.ar-view-f{ width:100%; height:100%; border:0; background:#fff; }
.ar-view-i{ max-width:100%; max-height:100%; object-fit:contain; background:#fff; }

/* ============================================================
   사업부 구분선 · 폴더 끌어 놓기
   ⚠️ 구분선은 **묶어 보여주는 것**일 뿐이다. 자료실은 사업부와 무관하게 누구나 전부 읽는다.
   ============================================================ */
.ar-divh{
  display:flex; align-items:center; gap:var(--sp-2);
  margin:18px 0 8px; padding:0 0 6px;
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line);
}
.ar-divh-n{ font-size:var(--fs-3); font-weight:800; color:var(--text); }
.ar-divh-c{ font-size:var(--fs-1); color:var(--muted); }
.ar-fold.ar-fdrag{ cursor:grab; }
.ar-fold.ar-fdrag:active{ cursor:grabbing; }

/* ============================================================
   자료 표의 확장자 열
   ⚠️ 새 규칙은 이 블록 맨 뒤에 쌓는다. 되돌릴 때 이 블록만 지우면 된다.
   ⭐ 색은 전부 01-tokens.css 의 기존 토큰이다. 여기서 새 색을 만들지 않았고,
      js 에는 색이 한 글자도 없다(묶음 이름만 넘어온다 · RULES 3-6).
   ============================================================ */
.ar-tbl .ar-c-x{ white-space:nowrap; }
.ar-ex{
  display:inline-block; padding:1px 8px; border-radius:999px;
  font-size:var(--fs-1); font-weight:800; letter-spacing:.02em;
  background:var(--sk-bg2); color:var(--muted);
}
/* 자주 쓰는 여덟 묶음. 나머지는 위의 기본색(회색) 하나로 묶인다. */
.ar-ex[data-x="pdf"]{ color:var(--cat-1); }
.ar-ex[data-x="hwp"]{ color:var(--cat-2); }
.ar-ex[data-x="doc"]{ color:var(--cat-3); }
.ar-ex[data-x="xls"]{ color:var(--cat-4); }
.ar-ex[data-x="ppt"]{ color:var(--cat-5); }
.ar-ex[data-x="zip"]{ color:var(--cat-6); }
.ar-ex[data-x="img"]{ color:var(--cat-7); }
.ar-ex[data-x="txt"]{ color:var(--cat-8); }