/* =========================================================
   생각의 숲 — 관리자 페이지 시안 / 지면형(Editorial) 레이아웃
   · 사이드바 없음. 상단 마스트헤드 + 섹션 바.
   · 카드/그림자를 쓰지 않고 괘선 · 여백 · 활자 크기로만 위계를 잡습니다.
   · 디자인 토큰은 사용자 화면의 style.css 를 그대로 씁니다.
   ========================================================= */
.adm{
  --mast:56px;
  --sub:46px;
  --sheet:1380px;
  --pad:44px;
  --ink-line:#DCD8D0;
  /* IBM Plex Mono 에는 한글 글리프가 없어 숫자·영문만 모노로 잡고
     한글은 Pretendard 로 떨어지도록 스택을 관리자 화면에서만 재정의합니다. */
  --font-mono:'IBM Plex Mono','Pretendard Variable',Pretendard,ui-monospace,'SFMono-Regular',Menlo,monospace;
  background:var(--paper-2);
  color:var(--ink-700);
  font-size:15px;
}
.adm .wrap{max-width:none;padding-inline:0;}

/* =========================================================
   마스트헤드
   ========================================================= */
/* 스크림(80)보다 위에 둡니다. 모바일에서 메뉴를 펼쳤을 때
   마스트헤드가 회색 막에 덮여 눌리지 않던 문제를 막습니다.
   모달을 열 때는 스크림 z-index 를 90 으로 올리므로 그때는 이 줄도 함께 덮입니다. */
.mast{
  position:sticky;top:0;z-index:85;height:var(--mast);
  background:var(--navy-900);color:#C9D4E0;
}
.mast__in{
  max-width:var(--sheet);margin-inline:auto;padding-inline:var(--pad);
  height:100%;display:flex;align-items:center;gap:34px;
}
.mast__brand{display:flex;align-items:center;gap:9px;flex:none;}
.mast__brand img{height:21px;width:auto;}
.mast__brand span{
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  color:var(--brand-400);padding-top:2px;
}
.mast__nav{display:flex;gap:2px;}
.mast__nav a{
  position:relative;padding:0 15px;height:var(--mast);display:flex;align-items:center;
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;color:rgba(201,212,224,.7);
  transition:color .18s var(--ease);
}
.mast__nav a::after{
  content:'';position:absolute;left:15px;right:15px;bottom:0;height:2px;
  background:var(--brand-500);transform:scaleX(0);transition:transform .2s var(--ease);
}
.mast__nav a:hover{color:#fff;}
.g-stat    .mast__nav a[data-g="stat"],
.g-content .mast__nav a[data-g="content"],
.g-config  .mast__nav a[data-g="config"],
.g-member  .mast__nav a[data-g="member"]{color:#fff;font-weight:600;}
.g-stat    .mast__nav a[data-g="stat"]::after,
.g-content .mast__nav a[data-g="content"]::after,
.g-config  .mast__nav a[data-g="config"]::after,
.g-member  .mast__nav a[data-g="member"]::after{transform:scaleX(1);}

.mast__util{margin-left:auto;display:flex;align-items:center;gap:14px;}
.mast__search{position:relative;display:block;}
.mast__search svg{position:absolute;left:0;top:50%;transform:translateY(-50%);width:14px;height:14px;color:rgba(201,212,224,.5);}
.mast__search input{
  width:180px;height:30px;padding:0 0 0 22px;border:0;border-bottom:1px solid rgba(255,255,255,.14);
  background:none;color:#fff;font-size:13px;transition:.2s var(--ease);
}
.mast__search input::placeholder{color:rgba(201,212,224,.42);}
.mast__search input:focus{outline:none;width:230px;border-bottom-color:var(--brand-500);}
.mast__ico{position:relative;display:grid;place-items:center;width:26px;height:26px;color:rgba(201,212,224,.72);}
.mast__ico:hover{color:#fff;}
.mast__ico svg{width:16px;height:16px;}
.mast__ico i{
  position:absolute;top:-2px;right:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;
  background:var(--brand-500);color:#fff;font-family:var(--font-mono);font-size:9px;font-style:normal;
  display:grid;place-items:center;
}
.mast__me{
  display:grid;line-height:1.25;padding-left:14px;border-left:1px solid rgba(255,255,255,.12);
  font-size:12.5px;color:rgba(201,212,224,.62);
}
.mast__me b{font-size:13px;font-weight:600;color:#fff;}
.mast__out{display:grid;place-items:center;width:26px;height:26px;color:rgba(201,212,224,.5);}
.mast__out:hover{color:#fff;}
.mast__out svg{width:14px;height:14px;}
.mast__burger{display:none;width:26px;height:26px;position:relative;}
.mast__burger span,.mast__burger span::before,.mast__burger span::after{
  position:absolute;left:5px;width:16px;height:1.5px;border-radius:2px;background:#fff;content:'';
}
.mast__burger span{top:12px;}
.mast__burger span::before{left:0;top:-5px;}
.mast__burger span::after{left:0;top:5px;}

/* =========================================================
   섹션 바
   ========================================================= */
.subbar{
  position:sticky;top:var(--mast);z-index:60;height:var(--sub);
  background:rgba(250,248,244,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-line);
}
.subbar__in{
  max-width:var(--sheet);margin-inline:auto;padding-inline:var(--pad);
  height:100%;display:flex;align-items:center;gap:26px;
}
.subnav{display:none;gap:24px;height:100%;}
.g-stat    .subnav[data-g="stat"],
.g-content .subnav[data-g="content"],
.g-config  .subnav[data-g="config"],
.g-member  .subnav[data-g="member"]{display:flex;}
.subnav a{
  position:relative;display:flex;align-items:center;gap:6px;height:100%;
  font-size:13.5px;font-weight:500;color:var(--ink-500);transition:color .18s var(--ease);
}
.subnav a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink-900);opacity:0;}
.subnav a:hover{color:var(--ink-800);}
.subnav a.is-active{color:var(--ink-900);font-weight:700;}
.subnav a.is-active::after{opacity:1;}
.subnav a i{
  font-style:normal;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--brand-500);color:#fff;font-family:var(--font-mono);font-size:9.5px;
  display:grid;place-items:center;
}
.subbar__date{
  margin-left:auto;display:flex;align-items:center;gap:16px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0;color:var(--ink-400);white-space:nowrap;
}
.subbar__date a{color:var(--brand-600);font-weight:600;}
.subbar__date a:hover{text-decoration:underline;}

/* =========================================================
   지면 (본문)
   ========================================================= */
.sheet{max-width:var(--sheet);margin-inline:auto;padding:0 var(--pad) 90px;}
.sheet__in{max-width:var(--sheet);margin-inline:auto;padding-inline:var(--pad);}
.admftr{border-top:1px solid var(--ink-line);padding:22px 0 34px;}
.admftr .sheet__in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:0;color:var(--ink-400);font-family:var(--font-mono);}

/* 페이지 머리 — 큰 제목 + 설명 + 우측 액션 */
.ph{
  display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;
  padding:42px 0 22px;border-bottom:2px solid var(--ink-900);
}
.ph__l{min-width:0;flex:1;}
.ph__k{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  color:var(--brand-600);margin-bottom:9px;
}
.ph__t{font-size:32px;font-weight:700;letter-spacing:-.045em;color:var(--ink-900);line-height:1.2;}
.ph__d{margin-top:9px;font-size:13.5px;color:var(--ink-500);max-width:62ch;line-height:1.65;}
.ph__r{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}

/* 본문 컨테이너 — 최상위 블록 사이는 괘선으로 끊습니다 */
.apage > * + *{margin-top:36px;padding-top:32px;border-top:1px solid var(--ink-line);}
.apage > .ph + *{margin-top:0;padding-top:30px;border-top:0;}
.apage > .ph + .fbar{padding-top:16px;}
/* 필터 줄은 자체 아래 괘선이 있으므로 다음 블록에 선을 겹치지 않습니다 */
.apage > .fbar + *{margin-top:0;padding-top:30px;border-top:0;}

/* 블록 — 테두리 없는 지면 단락 */
.blk{min-width:0;}
.blk__h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.blk__t{
  position:relative;padding-left:13px;
  font-size:15px;font-weight:700;letter-spacing:-.03em;color:var(--ink-900);
}
.blk__t::before{
  content:'';position:absolute;left:0;top:.18em;width:3px;height:.92em;
  border-radius:2px;background:var(--brand-500);
}
.blk__d{font-size:12.5px;color:var(--ink-400);}
.blk__act{margin-left:auto;display:flex;align-items:center;gap:8px;}
.blk__b{min-width:0;}
.blk__f{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:12px;}

/* 그리드 — 세로 괘선으로 단 나눔 */
.grid{display:grid;gap:34px;}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--split{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);}
.grid--work{grid-template-columns:minmax(0,1fr) 392px;align-items:start;}
.grid--one{grid-template-columns:minmax(0,1fr);}
/* 단 사이는 세로 괘선 */
.grid--2 > * + *,.grid--3 > * + *,.grid--split > * + *{
  padding-left:34px;border-left:1px solid var(--ink-line);
}
.mb{margin-bottom:0;}

/* =========================================================
   수치 — 대표 수치 + 괘선 행
   ========================================================= */
.lead{padding:34px 0 30px;}
.lead__k{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--ink-400);margin-bottom:12px;
}
.lead__v{
  font-size:56px;font-weight:700;letter-spacing:-.055em;line-height:1;color:var(--ink-900);
  font-variant-numeric:tabular-nums;
}
.lead__v small{font-size:22px;font-weight:600;color:var(--ink-500);margin-left:4px;letter-spacing:-.02em;}
.lead__d{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-500);}

.figs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--ink-900);border-bottom:1px solid var(--ink-line);
}
.figs--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.fig{padding:18px 22px 20px;display:grid;gap:7px;}
.fig + .fig{border-left:1px solid var(--ink-line);}
.fig:first-child{padding-left:0;}
.fig__k{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-500);}
.fig__k svg{width:13px;height:13px;color:var(--brand-500);}
.fig__v{
  font-size:26px;font-weight:700;letter-spacing:-.045em;line-height:1.1;color:var(--ink-900);
  font-variant-numeric:tabular-nums;
}
.fig__v small{font-size:13px;font-weight:600;color:var(--ink-500);margin-left:2px;}
.fig__d{font-size:12px;color:var(--ink-400);display:flex;align-items:center;gap:6px;}
.trend{font-weight:600;font-variant-numeric:tabular-nums;font-style:normal;}
.trend--up{color:#10714E;}
.trend--down{color:#A6251C;}

/* =========================================================
   차트 — 선과 막대만
   ========================================================= */
.chart{display:flex;align-items:flex-end;gap:12px;height:190px;}
.chart__c{flex:1;height:100%;min-width:0;display:grid;grid-template-rows:1fr auto;gap:9px;justify-items:center;}
.chart__bar{
  position:relative;align-self:end;width:100%;max-width:30px;
  background:var(--navy-200);transition:background .18s var(--ease);
}
.chart__c:hover .chart__bar{background:var(--navy-500);}
.chart__c:hover .chart__bar::after{
  content:attr(data-v);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  padding:4px 9px;background:var(--ink-900);color:#fff;
  font-family:var(--font-mono);font-size:10.5px;white-space:nowrap;
}
.chart__c:not(.chart__c--dim) .chart__bar{background:var(--brand-500);}
.chart__x{font-family:var(--font-mono);font-size:11px;letter-spacing:0;color:var(--ink-400);}

.donut{display:flex;align-items:center;gap:26px;}
.donut svg{width:132px;height:132px;flex:none;transform:rotate(-90deg);}
.donut__legend{display:grid;flex:1;min-width:0;}
.donut__i{display:flex;align-items:center;gap:9px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line-soft);}
.donut__i:last-child{border-bottom:0;}
.donut__i i{width:9px;height:9px;flex:none;}
.donut__i b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-900);font-family:var(--font-mono);font-size:12.5px;}

.meter{display:grid;}
.meter__r{display:grid;gap:7px;padding:9px 0;border-bottom:1px solid var(--line-soft);}
.meter__r:last-child{border-bottom:0;}
.meter__l{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink-700);}
.meter__l b{margin-left:auto;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-900);}
.meter__t{height:3px;background:var(--paper-3);}
.meter__t i{display:block;height:100%;background:var(--brand-500);}

/* =========================================================
   필터 줄
   ========================================================= */
.fbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--ink-line);}
.fbar__sp{margin-left:auto;}
.seg{display:inline-flex;gap:18px;}
.seg button{
  position:relative;padding:3px 0;font-size:13.5px;font-weight:500;color:var(--ink-400);
  transition:color .18s var(--ease);white-space:nowrap;
}
.seg button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand-500);opacity:0;}
.seg button:hover{color:var(--ink-700);}
.seg button.is-on{color:var(--ink-900);font-weight:700;}
.seg button.is-on::after{opacity:1;}

.sel,.inp{
  height:34px;padding:0 12px;border:1px solid var(--ink-line);background:#fff;
  font-size:13px;color:var(--ink-900);border-radius:0;
}
.sel{
  padding-right:30px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238B919B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:10px;
}
.sel:focus,.inp:focus{outline:none;border-color:var(--ink-900);}
.fsearch{position:relative;display:flex;align-items:center;}
.fsearch svg{position:absolute;left:0;width:14px;height:14px;color:var(--ink-300);}
.inp--search{width:230px;padding-left:22px;border:0;border-bottom:1px solid var(--ink-line);background:none;height:30px;}
.inp--search:focus{border-bottom-color:var(--ink-900);}

/* =========================================================
   버튼 — 테두리 위주, 각진 형태
   ========================================================= */
.abtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;
  border:1px solid var(--ink-900);background:none;
  font-size:13px;font-weight:600;letter-spacing:-.02em;color:var(--ink-900);white-space:nowrap;
  transition:.16s var(--ease);
}
.abtn svg{width:14px;height:14px;flex:none;}
.abtn:hover{background:var(--ink-900);color:#fff;}
.abtn--quiet{border-color:var(--ink-line);color:var(--ink-600);}
.abtn--quiet:hover{border-color:var(--ink-900);background:none;color:var(--ink-900);}
.abtn--primary{background:var(--brand-500);border-color:var(--brand-500);color:#fff;}
.abtn--primary:hover{background:var(--brand-700);border-color:var(--brand-700);color:#fff;}
.abtn--navy{background:var(--navy-800);border-color:var(--navy-800);color:#fff;}
.abtn--navy:hover{background:var(--navy-600);border-color:var(--navy-600);color:#fff;}
.abtn--danger{border-color:#D9AFAA;color:#A6251C;}
.abtn--danger:hover{background:#A6251C;border-color:#A6251C;color:#fff;}
.abtn--sm{height:27px;padding:0 9px;font-size:12px;}
.abtn--icon{width:34px;padding:0;}
.abtn--icon.abtn--sm{width:27px;}
.abtn[disabled]{opacity:.4;pointer-events:none;}

/* =========================================================
   표 — 괘선만
   ========================================================= */
.atable{width:100%;border-collapse:collapse;}
.atable th{
  padding:10px 14px 9px;text-align:left;white-space:nowrap;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-400);border-bottom:1px solid var(--ink-900);
}
.atable th:first-child,.atable td:first-child{padding-left:0;}
.atable th:last-child,.atable td:last-child{padding-right:0;}
.atable td{padding:14px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:13.5px;color:var(--ink-700);}
.atable tbody tr{transition:background .16s var(--ease);}
.atable tbody tr:hover{background:rgba(255,255,255,.7);}
.atable tbody tr.is-on{background:#fff;box-shadow:inset 2px 0 0 var(--brand-500);}
.atable tbody tr.is-on td:first-child{padding-left:12px;}
.atable--sel tbody tr{cursor:pointer;}
.atable .num,.atable .mono{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-500);white-space:nowrap;}
.atable .amt{font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:13px;color:var(--ink-900);white-space:nowrap;text-align:right;}
.atable .nm{font-weight:600;color:var(--ink-900);letter-spacing:-.025em;}
/* 제목 · 이름을 누르면 등록 · 수정 팝업이 열립니다 (수정 버튼과 병행) */
.nm--link{
  display:inline;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-weight:600;color:var(--ink-900);letter-spacing:-.025em;text-align:left;
  border-bottom:1px solid transparent;
}
.nm--link:hover,.nm--link:focus-visible{color:var(--brand-700);border-bottom-color:currentColor;}
.atable .sub{display:block;margin-top:3px;font-family:var(--font-mono);font-size:11px;color:var(--ink-400);font-weight:400;letter-spacing:0;}
.atable .r{text-align:right;}
.atable .c{text-align:center;}
.atable__act{display:flex;gap:6px;justify-content:flex-end;}
.tscroll{overflow-x:auto;}
.tscroll .atable{min-width:820px;}

.chk-cell{width:34px;}
.cbox{display:inline-grid;place-items:center;width:15px;height:15px;border:1px solid var(--ink-300);cursor:pointer;transition:.16s var(--ease);background:#fff;}
.cbox input{position:absolute;opacity:0;width:0;height:0;}
.cbox svg{width:9px;height:9px;color:#fff;opacity:0;}
.cbox:has(input:checked){background:var(--ink-900);border-color:var(--ink-900);}
.cbox:has(input:checked) svg{opacity:1;}

/* =========================================================
   상태 표기 — 배경 없이 점 + 글자
   ========================================================= */
.chip-s{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap;}
.chip-s::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.chip-s--wait{color:#A8620A;}
.chip-s--ing{color:var(--brand-600);}
.chip-s--ok{color:#10714E;}
.chip-s--off{color:var(--ink-400);}
.chip-s--stop{color:#A6251C;}
.chip-s--navy{color:var(--navy-500);}
.chip-s--cancel{color:#A6251C;}
.tagx{
  display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--ink-line);
  font-size:11.5px;font-weight:600;color:var(--ink-600);letter-spacing:-.01em;line-height:1.5;
}
.tagx--new,.tagx--best{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;}
.tagx--new{border-color:var(--brand-400);color:var(--brand-700);}
.tagx--best{border-color:var(--navy-200);color:var(--navy-600);}

/* =========================================================
   작업 단 (우측) — 세로 괘선으로 분리
   ========================================================= */
.panel{position:sticky;top:calc(var(--mast) + var(--sub) + 26px);padding-left:34px;border-left:1px solid var(--ink-900);}
.panel__head{padding-bottom:16px;border-bottom:1px solid var(--line-soft);}
.panel__k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-400);}
.panel__t{margin-top:6px;font-size:19px;font-weight:700;letter-spacing:-.04em;color:var(--ink-900);line-height:1.35;}
.panel__body{padding-top:18px;display:grid;gap:20px;max-height:calc(100vh - var(--mast) - var(--sub) - 190px);overflow-y:auto;}

/* 정의 목록 */
.adl{display:grid;}
.adl > div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);}
.adl > div:last-child{border-bottom:0;}
.adl dt{font-size:12px;font-weight:600;color:var(--ink-400);}
.adl dd{font-size:13.5px;color:var(--ink-900);margin:0;word-break:break-all;}
.adl dd .mono{font-family:var(--font-mono);font-size:12px;}
.adl--tight > div{grid-template-columns:78px minmax(0,1fr);gap:10px;padding:6px 0;}
.linkbtn{padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--brand-600);font-weight:600;text-decoration:underline;}
.linkbtn:hover{color:var(--brand-700);}
.adl--tight dd{font-size:13px;}

/* 서식 미리보기 — 거래명세서 · 메일 템플릿 */
.docsheet{padding:30px 32px;border:1px solid var(--ink-line);background:#fff;}
.docsheet__t{text-align:center;font-size:21px;font-weight:700;letter-spacing:.32em;color:var(--ink-900);}
.docsheet__no{margin-top:8px;text-align:center;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-400);}
.docsheet__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:24px;padding-top:20px;border-top:2px solid var(--ink-900);}
.docsheet__k{margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--brand-600);}
.docsheet__seal{
  display:inline-grid;place-items:center;width:22px;height:22px;margin-left:6px;vertical-align:middle;
  border:1px solid #C0392B;border-radius:50%;color:#C0392B;font-size:10px;font-weight:700;
}
.docsheet__tbl{margin-top:22px;}
.docsheet__tbl tfoot td{padding:10px 12px;border-top:1px solid var(--ink-line);}
.docsheet--mail{padding:0;}
.docsheet--mail .mailhead{padding:16px 20px;border-bottom:1px solid var(--line-soft);background:var(--paper-2);}
.docsheet--mail .mailhead b{display:block;font-size:14px;color:var(--ink-900);}
.docsheet--mail .mailhead span{font-size:12px;color:var(--ink-400);}
.docsheet--mail .mailbody{padding:26px 24px;font-size:13.5px;line-height:1.85;color:var(--ink-700);}
.docsheet--mail .mailbody h4{margin-bottom:10px;font-size:16px;font-weight:700;color:var(--ink-900);}
.docsheet--mail .mailbody p + p{margin-top:12px;}
.docsheet--mail .mailbody .mailbtn{
  display:inline-block;margin:16px 0;padding:11px 22px;background:var(--brand-500);color:#fff;
  font-size:13.5px;font-weight:600;border-radius:4px;
}
.docsheet--mail .mailfoot{padding:14px 24px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--ink-400);}
@media (max-width:760px){.docsheet__cols{grid-template-columns:1fr;}.docsheet{padding:20px 16px;}}

/* =========================================================
   폼
   ========================================================= */
.aform{display:grid;gap:18px;}
.aform__f{display:grid;gap:7px;}
.aform__l{font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--ink-800);display:flex;align-items:center;gap:5px;}
.aform__l b{color:var(--brand-600);}
.aform__h{font-size:11.5px;color:var(--ink-400);line-height:1.6;}
.aform__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.aform__row--3{grid-template-columns:repeat(3,1fr);}
.aform .inp,.aform .sel{width:100%;height:38px;}
.aform textarea.inp{height:auto;min-height:96px;padding:10px 12px;line-height:1.65;resize:vertical;}

/* 본문 편집기 — 그림 · 표 · 서식 도구 모음 (시안에서는 도구 모음만 표시) */
.editor{border:1px solid var(--ink-line);background:#fff;}
.editor__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:7px 8px;border-bottom:1px solid var(--line-soft);background:var(--paper-2);
}
.editor__bar button{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;
  border:1px solid transparent;background:none;cursor:pointer;
  font-size:12px;font-weight:500;color:var(--ink-600);
}
.editor__bar button:hover{border-color:var(--ink-line);background:#fff;color:var(--ink-900);}
.editor__bar button svg{width:13px;height:13px;}
.editor__bar i{width:1px;height:16px;margin:0 4px;background:var(--ink-line);}
.editor__bar b{font-weight:700;}
.editor__bar em{font-style:italic;font-family:Georgia,serif;}
.editor .inp{border:0;width:100%;}
.editor .inp:focus{outline-offset:-2px;}

/* 계정별 메뉴 접근 권한 — 등급 기본값 + 체크로 가감 */
.permgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;}
.permrow{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--ink-700);}
.permrow .cbox{flex:none;}

/* CI 목록 썸네일 */
.cithumb{
  flex:none;display:grid;place-items:center;width:84px;height:30px;
  border:1px solid var(--line-soft);background:#fff;
}
.cithumb img{max-width:74px;max-height:24px;width:auto;height:auto;}
@media (max-width:760px){.permgrid{grid-template-columns:1fr;}}
.aform__act{display:flex;gap:8px;padding-top:2px;flex-wrap:wrap;}
.aform__act .abtn{flex:0 1 auto;min-width:112px;height:38px;}
.hint{
  display:flex;gap:9px;padding:12px 0 0;border-top:1px solid var(--brand-200);
  font-size:12.5px;line-height:1.65;color:var(--brand-700);
}
.hint svg{width:14px;height:14px;flex:none;margin-top:3px;}
.hint--navy{border-top-color:var(--navy-200);color:var(--navy-600);}
.hint--warn{border-top-color:#D9AFAA;color:#A6251C;}

.drop{
  display:grid;place-items:center;gap:7px;padding:24px 14px;text-align:center;
  border:1px dashed var(--ink-line);background:rgba(255,255,255,.6);cursor:pointer;transition:.18s var(--ease);
}
.drop:hover{border-color:var(--brand-500);background:#fff;}
.drop svg{width:19px;height:19px;color:var(--ink-300);}
.drop b{font-size:12.5px;color:var(--ink-800);}
.drop span{font-size:11.5px;letter-spacing:0;color:var(--ink-400);font-family:var(--font-mono);}
.filerow{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.filerow__i{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ink-line);flex:none;}
.filerow__i svg{width:14px;height:14px;color:var(--brand-600);}
.filerow__m{min-width:0;flex:1;}
.filerow__m b{display:block;font-size:12.5px;color:var(--ink-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.filerow__m span{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-400);}

.sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--ink-700);}
.sw input{position:absolute;opacity:0;width:0;height:0;}
.sw__t{width:34px;height:18px;background:var(--ink-200);position:relative;transition:.2s var(--ease);flex:none;}
.sw__t::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;background:#fff;transition:.2s var(--ease);}
.sw input:checked + .sw__t{background:var(--brand-500);}
.sw input:checked + .sw__t::after{transform:translateX(16px);}

/* =========================================================
   탭
   ========================================================= */
.atabs{display:flex;gap:20px;border-bottom:1px solid var(--ink-line);}
.atabs button{
  position:relative;padding:11px 0;font-size:13px;font-weight:500;color:var(--ink-400);
  transition:color .18s var(--ease);
}
.atabs button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink-900);opacity:0;}
.atabs button:hover{color:var(--ink-700);}
.atabs button.is-on{color:var(--ink-900);font-weight:700;}
.atabs button.is-on::after{opacity:1;}
.apane{display:none;}
.apane.is-on{display:block;}

/* =========================================================
   진행 단계 — 세로 괘선 타임라인
   ========================================================= */
.steps6{display:grid;}
.steps6__i{
  position:relative;display:flex;align-items:center;gap:11px;padding:8px 0 8px 22px;
  font-size:13px;color:var(--ink-300);
}
.steps6__i::before{content:'';position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--line-soft);}
.steps6__i:first-child::before{top:50%;}
.steps6__i:last-child::before{bottom:50%;}
.steps6__i i{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--paper-2);
  border:1px solid var(--ink-200);font-size:0;
}
.steps6__i.is-done{color:var(--ink-600);}
.steps6__i.is-done i{background:var(--navy-500);border-color:var(--navy-500);}
.steps6__i.is-done::before{background:var(--navy-200);}
.steps6__i.is-now{color:var(--brand-700);font-weight:700;}
.steps6__i.is-now i{background:var(--brand-500);border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100);}
.steps6__i span{margin-left:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:0;color:var(--ink-300);font-weight:400;}

/* =========================================================
   기록 / 피드
   ========================================================= */
.feed{display:grid;}
.feed__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft);}
.feed__i:last-child{border-bottom:0;}
.feed__ico{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--ink-line);}
.feed__ico svg{width:13px;height:13px;color:var(--ink-500);}
.feed__ico--brand{border-color:var(--brand-400);}
.feed__ico--brand svg{color:var(--brand-600);}
.feed__ico--navy{border-color:var(--navy-200);}
.feed__ico--navy svg{color:var(--navy-500);}
.feed__b{min-width:0;}
.feed__t{font-size:13.5px;color:var(--ink-700);line-height:1.55;}
.feed__t b{color:var(--ink-900);font-weight:600;}
.feed__d{margin-top:3px;font-family:var(--font-mono);font-size:11px;letter-spacing:0;color:var(--ink-400);}

/* 업무노트 — 댓글 형식 내부 기록 */
.wnote{display:grid;border-top:1px solid var(--ink-line);}
.wnote__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;padding:13px 0;border-bottom:1px solid var(--line-soft);}
.wnote__av{
  width:28px;height:28px;display:grid;place-items:center;flex:none;
  background:var(--navy-50);border:1px solid var(--ink-line);
  font-size:12px;font-weight:700;color:var(--ink-700);
}
.wnote__b{min-width:0;}
.wnote__m{display:flex;align-items:baseline;gap:9px;}
.wnote__m b{font-size:12.5px;font-weight:700;color:var(--ink-900);}
.wnote__m span{font-family:var(--font-mono);font-size:11px;letter-spacing:0;color:var(--ink-400);}
.wnote__x{margin-top:4px;font-size:13.5px;line-height:1.65;color:var(--ink-700);word-break:break-word;}
.mention{
  display:inline-block;padding:1px 6px;border-radius:2px;
  background:var(--brand-50);color:var(--brand-600);font-weight:700;
}
.wnote__write{position:relative;margin-top:16px;}
/* 이 영역은 .aform 바깥이라 입력칸 크기를 따로 잡아 줍니다 */
.wnote__write .inp{width:100%;height:auto;min-height:76px;padding:10px 12px;line-height:1.65;resize:vertical;}
.wnote__act{display:flex;align-items:center;gap:8px;margin-top:9px;}
.wnote__pick{
  position:absolute;left:0;bottom:calc(100% - 4px);z-index:2;min-width:190px;
  background:var(--paper);border:1px solid var(--ink-900);box-shadow:var(--shadow-xl);
  padding:5px;display:grid;
}
.wnote__pick[hidden]{display:none;}
.wnote__pick button{
  display:flex;align-items:baseline;gap:7px;padding:8px 10px;text-align:left;
  font-size:13px;font-weight:600;color:var(--ink-800);
}
.wnote__pick button[hidden]{display:none;}
.wnote__pick button span{font-size:11.5px;font-weight:500;color:var(--ink-400);}
.wnote__pick button:hover{background:var(--paper-3);}

/* =========================================================
   순서 있는 행 (카테고리 · 섹션)
   ========================================================= */
.catrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft);}
.catrow:first-of-type{border-top:1px solid var(--ink-900);}
.catrow__grip{display:grid;gap:3px;cursor:grab;flex:none;}
.catrow__grip i{display:block;width:10px;height:1px;background:var(--ink-300);}
.catrow__sw{width:10px;height:10px;flex:none;}
.catrow__m{flex:1;min-width:0;}
.catrow__m b,.catrow__ttl{display:block;font-size:14px;font-weight:600;color:var(--ink-900);letter-spacing:-.025em;}
.catrow__ttl{padding:0;border:0;background:none;cursor:pointer;font-family:inherit;text-align:left;}
.catrow__ttl:hover,.catrow__ttl:focus-visible{color:var(--brand-700);text-decoration:underline;}
/* 드래그로 순서 바꾸기 */
.catrow[draggable="true"] .catrow__grip{cursor:grab;}
.catrow.is-drag{opacity:.45;}
.catrow.is-over{box-shadow:inset 0 2px 0 var(--brand-500);}
.catrow__m span{font-family:var(--font-mono);font-size:11px;letter-spacing:0;color:var(--ink-400);}
.catrow__n{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0;color:var(--ink-500);white-space:nowrap;}

/* =========================================================
   미리보기
   ========================================================= */
.preview{border:1px solid var(--ink-line);background:#fff;}
.preview__bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line-soft);}
.preview__dot{width:7px;height:7px;border-radius:50%;background:var(--ink-200);}
.preview__url{margin-left:8px;flex:1;font-family:var(--font-mono);font-size:10px;color:var(--ink-400);}
.preview__body{padding:18px;}
.pv-hero{padding:24px 20px;background:var(--navy-800);color:#fff;}
.pv-hero b{display:block;font-size:18px;font-weight:700;letter-spacing:-.04em;line-height:1.35;}
.pv-hero span{display:block;margin-top:8px;font-size:12px;color:rgba(255,255,255,.7);line-height:1.6;}
.pv-hero em{display:inline-flex;margin-top:14px;padding:7px 15px;background:var(--brand-500);font-style:normal;font-size:12px;font-weight:600;}
.pv-sec{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-700);}
.pv-sec b{font-weight:600;color:var(--ink-900);}
.pv-sec .tagx{margin-left:auto;}
.pv-sec.is-off{opacity:.4;}
.preview--dark{background:var(--navy-900);border-color:var(--navy-800);}
.preview--dark .preview__body{padding:22px 20px;}
.pv-co{margin:0 0 7px;font-size:12px;line-height:1.65;color:rgba(255,255,255,.72);}
.pv-co b{display:block;margin-bottom:6px;font-size:14px;font-weight:700;color:#fff;letter-spacing:-.02em;}
.pv-co:nth-child(2){margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14);}
.pv-co .mono{font-family:var(--font-mono);font-size:11.5px;}

/* =========================================================
   페이지네이션 · 보조
   ========================================================= */
.apager{display:flex;align-items:center;gap:4px;justify-content:center;padding:20px 0 0;}
.apager button{
  min-width:28px;height:28px;padding:0 7px;border:0;background:none;
  font-family:var(--font-mono);font-size:12px;color:var(--ink-400);transition:.16s var(--ease);
}
.apager button:hover{color:var(--ink-900);}
.apager button.is-on{color:var(--ink-900);font-weight:700;box-shadow:inset 0 -2px 0 var(--ink-900);}
.apager svg{width:12px;height:12px;margin:0 auto;}
.tinfo{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0;color:var(--ink-400);}
.tinfo b{color:var(--ink-900);}

/* =========================================================
   모달 · 토스트 · 스크림
   ========================================================= */
.adm-scrim{position:fixed;inset:0;z-index:80;background:rgba(14,29,47,.42);opacity:0;visibility:hidden;transition:.22s var(--ease);}
.adm-scrim.is-on{opacity:1;visibility:visible;}
.modal{
  position:fixed;z-index:90;left:50%;top:50%;transform:translate(-50%,-46%);
  width:min(660px,calc(100vw - 36px));max-height:calc(100vh - 70px);
  display:flex;flex-direction:column;background:var(--paper);
  box-shadow:var(--shadow-xl);opacity:0;visibility:hidden;transition:.22s var(--ease-out);
}
.modal.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%);}
.modal--wide{width:min(840px,calc(100vw - 36px));}
/* 목록에서 고른 행의 상세를 그대로 담는 창 (조사의뢰 처리) */
.modal--panel{width:min(760px,calc(100vw - 36px));max-height:calc(100vh - 56px);}
.modal--panel .modal__body{display:grid;gap:20px;}
.modal--panel .modal__head{align-items:flex-start;}
.modal--panel .modal__x{margin-top:2px;}
.modal__headl{min-width:0;}
/* 팝업 머리글의 진행 상태 — 탭 이름이 아니라 「이 건의 현재 상태」임을 또렷하게 */
.modal__st{display:flex;align-items:center;gap:8px;margin-top:7px;}
.modal__stk{font-size:11.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-400);}
.modal__tabs{padding:14px 26px 0;}
.modal__head{display:flex;align-items:center;gap:12px;padding:22px 26px 16px;border-bottom:2px solid var(--ink-900);}
.modal__t{font-size:19px;font-weight:700;letter-spacing:-.04em;color:var(--ink-900);}
.modal__x{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;color:var(--ink-400);}
.modal__x:hover{color:var(--ink-900);}
.modal__x svg{width:14px;height:14px;}
.modal__body{padding:24px 26px;overflow-y:auto;}
.modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 26px;border-top:1px solid var(--ink-line);}
.toast{
  position:fixed;z-index:95;left:50%;bottom:30px;transform:translate(-50%,14px);
  display:flex;align-items:center;gap:9px;padding:13px 22px;
  background:var(--ink-900);color:#fff;font-size:13px;font-weight:500;
  opacity:0;visibility:hidden;transition:.22s var(--ease-out);max-width:calc(100vw - 36px);
}
.toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);}
.toast svg{width:14px;height:14px;color:var(--brand-400);flex:none;}

/* =========================================================
   로그인
   ========================================================= */
.adm--bare{background:var(--navy-900);}
.alogin{min-height:100vh;display:grid;place-items:center;padding:40px 20px;position:relative;overflow:hidden;}
.alogin::before{content:'';position:absolute;inset:0;background:radial-gradient(880px 440px at 50% -10%,rgba(247,148,29,.2),transparent 70%);}
.alogin__card{position:relative;width:min(384px,100%);padding:38px 34px;background:var(--paper-2);}
.alogin__logo{height:26px;width:auto;margin:0 auto 24px;}
.alogin__t{text-align:center;font-size:20px;font-weight:700;letter-spacing:-.04em;color:var(--ink-900);}
.alogin__d{text-align:center;margin:7px 0 26px;font-size:12.5px;color:var(--ink-400);}
.alogin__note{margin-top:22px;padding-top:18px;border-top:1px solid var(--ink-line);font-size:11.5px;letter-spacing:0;line-height:1.8;color:var(--ink-400);text-align:center;}
.alogin__note b{color:var(--ink-600);}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:1240px){
  .adm{--pad:28px;}
  .grid--work,.grid--split{grid-template-columns:minmax(0,1fr);}
  .grid--split > * + *{padding-left:0;border-left:0;border-top:1px solid var(--ink-line);padding-top:30px;}
  .panel{position:static;padding-left:0;border-left:0;border-top:2px solid var(--ink-900);padding-top:24px;}
  .panel__body{max-height:none;}
}
@media (max-width:960px){
  .mast__nav,.mast__search,.mast__me{display:none;}
  .mast__burger{display:block;}
  .mast.is-open .mast__nav{
    display:flex;position:absolute;left:0;right:0;top:var(--mast);flex-direction:column;
    background:var(--navy-900);padding:8px 0 14px;box-shadow:var(--shadow-lg);
  }
  .mast.is-open .mast__nav a{height:44px;padding-inline:var(--pad);}
  .mast.is-open .mast__nav a::after{display:none;}
  .grid--3,.grid--2{grid-template-columns:minmax(0,1fr);}
  .grid--2 > * + *,.grid--3 > * + *{padding-left:0;border-left:0;border-top:1px solid var(--ink-line);padding-top:30px;}
  .figs,.figs--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fig{padding-inline:16px;}
  .fig:nth-child(odd){padding-left:0;}
  .fig:nth-child(3){border-left:0;}
  .fig:nth-child(n+3){border-top:1px solid var(--ink-line);}
  .ph__t{font-size:26px;}
  .lead__v{font-size:42px;}
}
@media (max-width:640px){
  .adm{--pad:18px;}
  .figs,.figs--4{grid-template-columns:minmax(0,1fr);}
  .fig{padding-inline:0;border-left:0 !important;}
  .fig + .fig{border-top:1px solid var(--ink-line);}
  .subbar__in{gap:14px;overflow-x:auto;}
  .subbar__date{display:none;}
  .aform__row,.aform__row--3{grid-template-columns:1fr;}
  .inp--search{width:100%;}
  .fbar{gap:12px;}
  /* 좁은 화면에서는 창 여백을 줄이고, 탭은 줄바꿈 대신 옆으로 밀어 봅니다 */
  .modal__head{padding:18px 18px 14px;}
  .modal__body,.modal__foot{padding-inline:18px;}
  .modal__tabs{padding:12px 18px 0;}
  .modal__tabs .atabs{gap:16px;overflow-x:auto;scrollbar-width:none;}
  .modal__tabs .atabs::-webkit-scrollbar{display:none;}
  .modal__tabs .atabs button{flex:none;white-space:nowrap;}
  /* 창 바닥 줄은 인라인 style 로 -22px 를 물고 있어 !important 로 맞춰 줍니다 */
  .modal__foot{margin-inline:-18px !important;}
  /* 칸이 많은 표는 블록 안에서만 옆으로 밀어 봅니다 (화면 전체가 밀리지 않도록) */
  .blk__b--flush{overflow-x:auto;}
  .blk__b--flush > .atable{min-width:520px;}
  /* 순서 줄 — 이름을 윗줄에 두고 스위치 · 버튼을 아랫줄로 내립니다 */
  .catrow{flex-wrap:wrap;gap:10px 12px;}
  .catrow__grip{display:none;}
  .catrow__m{flex:1 1 100%;}
  .catrow__n{order:2;margin-right:auto;}
  .catrow .sw{order:3;}
  .catrow .abtn{order:4;}
}

/* 순서 이동 — 옮기는 줄을 한 덩어리로 띄워 보여줍니다 */
.catrow.is-moving{
  position:relative;z-index:3;
  background:var(--brand-50);
  box-shadow:0 10px 24px -12px rgba(18,22,28,.35);
}

/* hidden 속성이 버튼에도 통하도록 (.abtn 의 display 가 UA 기본값을 덮기 때문) */
.abtn[hidden]{display:none;}

/* CI — 원본 해상도가 낮아 나중에 교체가 필요한 항목 */
.tagx--low{margin-left:7px;color:#A8620A;box-shadow:inset 0 0 0 1px rgba(168,98,10,.35);}