/* 구현에만 있는 것 — 목업에 짝이 없는 몇 가지.
 *
 * 옷은 theme.css 하나가 입힌다(목업과 같은 파일). 여기에는 **목업에 없는 것**만
 * 둔다. 지금은 둘뿐이다 —
 *   · 목업 바로가기 띠 (목업 자신에게는 필요 없다)
 *   · 로그인 팝업의 여닫기 (목업은 login.js 가 껍데기째 만들어 붙인다)
 *
 * 여기가 자꾸 길어지면 신호다 — 목업에 없는 화면을 그리고 있다는 뜻이다.
 */

/* ── 로그인 팝업 ──────────────────────────────────────
 * 목업은 login.js 가 .back.lgscrim 을 만들어 붙였다 뗀다. 구현은 마크업을
 * 미리 두고 여닫으므로 숨기는 규칙이 필요하다. 안 두었더니 껍데기가 모든
 * 화면에 펼쳐져 아이콘이 화면만 하게 나왔다.
 * 속옷(.lgnote · .lglab · .lgpw …)은 theme.css 가 이미 갖고 있다. */
.mo{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:20px;
  background:var(--scrim,rgba(20,22,26,.42))}
body.login .mo{display:grid}

/* ── 목업 바로가기 ────────────────────────────────────
 * 우측 하단에 떠 있다. 첫 화면이 구현으로 옮겨 온 뒤로는 목업으로 가는 유일한 길이다. */
.mockgo{position:fixed;bottom:16px;right:16px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;padding:9px 13px 9px 11px;
  border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(26,26,26,.92);color:#fff;text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.16),0 14px 34px rgba(0,0,0,.22);
  transition:transform .2s,box-shadow .2s,background .2s}
.mockgo:hover{transform:translateY(-2px);background:#1A1A1A;text-decoration:none}
.mockgo:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mockgo-i{flex:none;width:26px;height:26px;border-radius:8px;display:grid;
  place-items:center;background:rgba(255,255,255,.14)}
.mockgo-i svg{width:15px;height:15px}
.mockgo-t{display:flex;flex-direction:column;line-height:1.25}
.mockgo-t b{font-size:13px;font-weight:700;letter-spacing:-.01em}
.mockgo-t span{font-size:11px;color:rgba(255,255,255,.62)}
.mockgo-o{flex:none;opacity:.55}
.mockgo-o svg{width:13px;height:13px}
/* 좁은 화면에서는 글자를 접고 아이콘만 남긴다 */
@media (max-width:560px){
  .mockgo{padding:9px;gap:0}
  .mockgo-t,.mockgo-o{display:none}
}

/* ── 팝업을 여는 자리 ─────────────────────────────────
 * 목업은 `<a href="#">` 으로 열지만, 구현에서는 단추로 둔다 — 팝업을 여는 것은
 * 옮겨 가는 것이 아니고, href="#" 는 아무 데도 안 가는 죽은 링크처럼 읽힌다.
 * 옆의 링크들과 같은 모양이어야 하므로 단추 옷을 벗긴다. */
.zfoot button.zgo{border:0;background:none;padding:0;cursor:pointer;
  font:600 var(--t-small)/1.4 inherit;color:var(--accent);white-space:nowrap}
.zfoot button.zgo:hover{text-decoration:underline}

/* ── 로그인 팝업 ──────────────────────────────────────
 * 속옷(.lgnote · .lglab · .lgpw · .lgrule · .lgways)은 theme.css 가 갖는다.
 * 여기에는 **구현에만 있는 것**만 둔다 — 목업은 팝업을 JS 가 만들어 붙였다 뗐지만
 * 구현은 마크업을 미리 두고 여닫으므로 그 규칙이 필요하다. */
.lghead{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.lghead h2{flex:1;min-width:0;margin:0}
.lgx{border:0;background:none;padding:4px;cursor:pointer;color:var(--dim);
  font-size:16px;line-height:1}
.lgx:hover{color:var(--ink)}
/* 비밀번호 규칙 — 지킨 것에 표시가 붙는다. login.js 가 .ok 를 켠다 */
.lgpol{list-style:none;margin:-8px 0 14px;padding:0;display:grid;gap:4px}
.lgpol li{font-size:12px;color:var(--dim);padding-left:16px;position:relative}
.lgpol li::before{content:"○";position:absolute;left:0}
.lgpol li.ok{color:var(--ok)}
.lgpol li.ok::before{content:"●"}
/* 걸음 표시 — 로그인 한 걸음일 때는 감춘다 */
.lgmodal .steps3{margin:0 0 16px}

/* ── 업무 기반 추천 팝업 ──────────────────────────────
 * 목업은 ob.js 가 판을 만들어 붙였다 뗐다. 구현은 폼으로 두고 여닫으므로
 * 그만큼의 규칙이 필요하다. 속옷(.obq · .obc · .obw …)은 theme.css 가 갖는다. */
#ob{display:none}
#ob:not([hidden]){display:grid;place-items:center}

/* ── 라디오·체크박스를 칩으로 ─────────────────────────
 * 목업은 이 자리에 button 을 세우고 JS 가 상태를 쥔다. 구현은 폼으로 보내야 하므로
 * 진짜 input 을 쓰고 옷만 칩으로 입힌다 — JS 가 없어도 고르고 보낼 수 있다.
 * 켜진 것은 CSS 가 판단한다(:has). 서버가 on 을 같이 적으면 눌러 옮긴 뒤
 * 두 칸이 골라진 것처럼 보인다. */
.chips.pick .chip{position:relative;cursor:pointer}
.chips.pick .chip input{position:absolute;opacity:0;width:0;height:0}
.chips.pick .chip:has(input:checked){
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.chips.pick .chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* ── 처리함 · 등록 검수 ───────────────────────────────
 * 목업은 줄을 눌러 그 자리에서 펼치고 JS 가 몸통을 그린다. 구현은 검수 상세로
 * 보내므로 .ibhead 를 button 이 아니라 a 로 세운다 — 링크 밑줄과 색을 지운다.
 * 모양은 theme.css 의 .ibhead 가 그대로 갖는다. */
a.ibhead{text-decoration:none;color:inherit}
a.ibhead .nm{text-decoration:none}
a.ibhead:hover .nm{text-decoration:underline}

/* 등록 검수는 결정 줄이 폼이다 — 목업은 눌러 고른 뒤 한 번 더 보내지만
 * 구현은 단추 셋이 곧 결정이라 판 이름을 label 로 쓴다 */
.rvact label.note{margin:0;font-weight:700;color:var(--n-900)}
.rvact label.note b{font-weight:700;color:var(--dim)}

/* ── 한 일을 알리는 띠 ─────────────────────────────────
 * 되돌려 놓고 아무 말도 하지 않으면 눌린 것이 먹었는지 알 수 없다.
 * 목업은 이 자리를 JS 로 띄웠다 붙였다 해서 이름이 없다 — 여기서 하나 세운다.
 * 한 이름으로 둘을 가른다(CM-13): 된 것은 .flash, 안 된 것은 .flash.miss.
 * .warnbox 를 쓰면 잘 된 일에 경고 색이 붙는다. */
.flash{
  margin:0 0 16px; padding:13px 18px; border-radius:var(--r-s);
  background:var(--ok-bg); color:var(--ok);
  font-size:var(--t-small); font-weight:700;
}
.flash.miss{background:var(--warn-bg); color:var(--warn-ink)}

/* ── 올리기 (SC-26) ───────────────────────────────────
 * 목업은 유형 카드와 공개범위를 button 으로 세우고 JS 가 고른 것을 쥔다.
 * 구현은 폼으로 보내야 하므로 진짜 라디오를 쓰고 옷만 그 모양으로 입힌다 —
 * JS 가 없어도 고르고 보낼 수 있다. 모양은 theme.css 의 .pcard · .wayopt 가
 * 그대로 갖고, 여기서는 라디오를 감추고 켜진 것을 CSS 로 판단한다. */
.pcard input, .wayopt input{position:absolute;opacity:0;width:0;height:0}
.pcard:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.wayopt:has(input:checked){border-color:var(--accent);background:var(--accent-bg)}
.wayopt:has(input:checked) .chk{border-color:var(--accent);background:var(--accent)}
.wayopt:has(input:checked) .chk::before{content:"✓"}
/* theme.css 가 .chk 를 두 가지로 쓴다 — 검증 결과 줄(padding:18px 20px)과
 * 고르개의 네모 표시(18×18). 한 이름이 두 가지라 앞의 안쪽 여백이 뒤에 얹혀
 * 표시가 두 배로 부푼다. 목업도 같이 겪는 것이라 theme.css 를 건드리지 않고
 * 여기서 이 자리만 못 박는다. */
.wayopt .chk{padding:0}
.pcard:has(input:focus-visible),.wayopt:has(input:focus-visible){
  outline:2px solid var(--focus-ring);outline-offset:2px}

/* 스킬 만드는 절차 — 목업 register 에는 이 안내가 없다(목업은 스킬이 이미
 * 있다고 본다). 실제로는 여기서 처음 만드는 사람이 많아 자리를 둔다. */
.howto{margin:14px 0 0;padding:0;list-style:none;counter-reset:h}
.howto > li{
  position:relative;padding:0 0 0 34px;margin-top:18px;counter-increment:h}
.howto > li:first-child{margin-top:0}
.howto > li::before{
  content:counter(h);position:absolute;left:0;top:0;
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--sunken);color:var(--dim);font-size:12px;font-weight:800}
.howto > li > b{display:block;font-size:var(--t-small);font-weight:700;color:var(--n-900)}
.howto > li > p{margin-top:6px;font-size:var(--t-small);color:var(--ink);line-height:1.7}
/* 안내 안의 코드 조각은 옮겨 적을 것이라 줄을 접지 않는다 */
.howto .copybox pre{white-space:pre}

/* 주소 칸은 겉 테두리가 감싼다 — 안쪽 input 이 제 테두리를 갖지 않는다.
 * type 을 안 적어 .frow2 input[type=text] 가 걸리지 않게 했지만,
 * 뒤에 누가 type 을 적어도 깨지지 않도록 여기서 못 박는다. */
.frow2 .slug input{border:0;padding:0 10px;background:none;border-radius:0}

/* ── 아직 안 만든 자리 ────────────────────────────────
 * 목업은 모든 화면이 있어서 이런 표시가 필요 없다. 구현은 아직 없는 것이
 * 있고, 살아 있는 링크와 똑같이 보이면 눌러 보고서야 안다(CM-15).
 * 흐리게 두고 손 모양을 막는다 — 링크가 아니라는 것이 눌러 보기 전에 보여야
 * 한다. 화면이 서면 이 칸은 저절로 링크가 된다(base.html 이 href 로 가른다). */
.gnav a.soon, .subtab.soon{color:var(--faint);cursor:not-allowed}
.gnav a.soon:hover, .subtab.soon:hover{color:var(--faint)}

/* 업무 추천 판의 '다시 고르기' — 판 안의 작은 글자 단추다. 단추 기본 옷을
 * 입으면 회색 네모가 되어 카드 가운데 튄다. */
.obh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.obedit{
  margin-left:auto;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;color:var(--accent-ink);
  text-decoration:underline;text-underline-offset:2px}
.obedit:hover{color:var(--accent)}

/* 기간 두 칸 — 물결표를 사이에 두고 한 줄로 */
.per{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.per input{flex:1;min-width:150px}
.per .tilde{flex:none;color:var(--dim)}

/* ── 조직도에서 사람 고르기 ───────────────────────────
 * 목업은 오른쪽에서 밀려 나오는 판(.rnb)을 스크립트가 세운다. 구현은 폼으로
 * 보내야 해서 칸 안에서 접었다 편다 — <details> 하나면 스크립트 없이도
 * 펼치고 고를 수 있다. 고른 결과(사번)는 어느 쪽으로 골라도 같다. */
.orgpick{
  margin-top:10px;padding:12px 14px;max-height:420px;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--n-50)}
.orgpick > .note{margin:0 0 10px}
.orgnode{margin-left:0}
.orgnode .orgnode{margin-left:14px;padding-left:10px;border-left:1px solid var(--line)}
.orgnode > summary{
  padding:6px 2px;cursor:pointer;list-style:none;
  font-size:var(--t-small);font-weight:700;color:var(--n-900)}
.orgnode > summary::-webkit-details-marker{display:none}
/* 펼침 표시는 글자로 둔다 — 아이콘을 넣으면 크기를 줄 자리가 또 필요하다 */
.orgnode > summary::before{content:"▸ ";color:var(--faint);font-weight:400}
.orgnode[open] > summary::before{content:"▾ "}
.orgnode > summary:hover{color:var(--accent-ink)}
.orgnode > summary .cnt{
  margin-left:6px;padding:1px 6px;border-radius:999px;
  background:var(--sunken);color:var(--dim);font-size:11px;font-weight:700}
/* 사람 한 줄. 단추와 이미 넣은 줄이 같은 자리에 서야 목록이 안 흔들린다 */
.orgman{
  display:block;text-align:left;margin:1px 0 1px 16px;padding:5px 9px;
  border:0;border-radius:var(--r-s);background:none;cursor:pointer;
  font:inherit;font-size:var(--t-small);color:var(--ink)}
button.orgman:hover{background:var(--accent-bg);color:var(--accent-ink)}
.orgman .d{margin-left:6px;color:var(--dim);font-size:12px}
.orgman.took{cursor:default;color:var(--dim)}
.orgman .already{margin-left:8px;font-size:11px;font-weight:700;color:var(--ok)}

/* ── 글자수 세기 ──────────────────────────────────────
 * 길이를 막아 두기만 하면 왜 더 안 써지는지 모른다 — 남은 자리를 늘 보여 둔다.
 * 칸 바로 뒤 오른쪽에 붙는다. 자리를 차지해 칸을 밀지 않게 블록으로 두고
 * 오른쪽 끝에 세운다. */
.cin{
  display:block;margin-top:4px;text-align:right;
  font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
/* 거의 다 찼을 때 미리 알린다 — 다 차고 나서 알리면 이미 늦다 */
.cin.near{color:var(--warn-ink);font-weight:700}
.cin.full{color:var(--danger);font-weight:700}

/* ── 적은 대로 보여 준다 ──────────────────────────────
 * HTML 은 줄바꿈을 공백으로 접는다. 여러 줄 칸(하는 일 · 다루는 데이터 ·
 * 목적 · 남긴 말)에 번호를 매겨 줄줄이 적어도 상세에서는 한 덩어리로 붙는다.
 * 사장님이 1·2·3·4 로 나눠 적은 것이 한 문단으로 나와 지적받았다(2026-09-14).
 *
 * `pre-line` 은 **줄바꿈만** 살리고 이어지는 공백과 줄맞춤은 접는다 —
 * `pre` 로 두면 길어질 때 가로로 삐져나가고, 붙여넣은 들여쓰기까지 그대로 선다.
 *
 * 목록 카드(.acard .ad)에는 쓰지 않는다. 거기는 두 줄로 잘라 보여 주는
 * 자리라 줄바꿈을 살리면 첫 줄만 보이고 만다. */
.keeplines{white-space:pre-line}

/* ── 알림 줄 ──────────────────────────────────────────
 * 목업은 줄 전체가 링크(`<a>`)다. 구현은 **누르면 읽음까지 남겨야** 해서
 * 폼으로 보낸다 — 링크로는 서버에 아무것도 못 남긴다. 모양은 목업의
 * `.nfrow a` 가 가진 것을 그대로 쓰고, 단추 기본 옷만 벗긴다. */
.nfrow > form{display:contents}
.nfgo{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 16px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:var(--t-small);text-align:left;color:inherit}
.nfgo:hover{background:var(--sunken)}
/* 안 읽은 줄은 바탕으로 가른다 — 점 하나만으로는 목록에서 눈에 띄지 않는다 */
.nfrow.new .nfgo,
.nfrow.new .nfgo:hover{background:var(--accent-bg)}
.nfrow.new .nfgo .nft{font-weight:700}
.nfgo:hover .nft{text-decoration:underline}
.nfgo:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
/* 딸린 말은 제목 **뒤에 잇는다.** 아래로 내리면 그 줄만 키가 커져
 * 목록이 들쭉날쭉해진다 — 목업 줄은 모두 한 줄 높이다. */
.nft > em{
  margin-left:8px;font-style:normal;color:var(--dim);font-size:12px;font-weight:400}


/* 상세 한 줄 지표 — 세운 칸 수만큼만 나눈다 (SC-04).
   theme.css 는 늘 여섯으로 나눈다. 목업은 여섯을 다 채우지만 실물은
   모르는 것을 안 세우므로 넷이면 왼쪽으로 몰려 붙었다.
   좁은 화면 규칙은 theme.css 가 !important 로 덮어 그대로 둔다. */
.sum{grid-template-columns:repeat(var(--n,6),1fr)}

/* 탭을 링크로 쓴다 — 주소에 탭이 담겨야 새로고침과 뒤로가기가 산다.
   theme.css 의 `.tab` 은 button 을 보고 만든 것이라 a 에 필요한 것만 더한다. */
a.tab{text-decoration:none; display:inline-block}
a.tab:hover{text-decoration:none}


/* 걸음 표시가 두 줄로 갈라지던 것 — "본인 확 / 인" (SC-34).
   판은 400px 인데 걸음 셋을 늘어놓으면 400px 을 넘는다. 넘친 만큼
   글자가 접혀 걸음 이름이 두 줄이 됐다.

   **글자를 접지 않고, 남는 자리는 잇는 줄이 먹는다.** 판을 넓히는 것만으로는
   폰 너비에서 또 접힌다 — 줄어들 수 있는 것이 하나는 있어야 한다.
   그 자리는 잇는 줄(`.bar`)이다. 걸음 이름은 줄어들 수 없는 것이고,
   접히면 무슨 걸음인지 읽기 어려워진다. */
.lgmodal{width:min(440px, calc(100vw - 32px))}
.lgmodal .s3{padding-right:0; min-width:0}
.lgmodal .s3 b{white-space:nowrap}
.lgmodal .s3 .bar{flex:1 1 auto; width:auto; min-width:10px; margin:0 9px}


/* 첨부 이미지 — 목업은 자리만 그려 둔 판(`.ph`)이라 실물 그림 규칙이 없다.
   판 너비를 넘지 않게 하고 비율은 그대로 둔다. */
.shots img{display:block; width:100%; height:150px; object-fit:cover;
           border:1px solid var(--line); border-radius:var(--r-s); background:var(--n-50)}


/* 자산 관리에서 그림을 빼는 단추 — 설명 줄 오른쪽 끝에 붙는다 */
.shots figcaption form{float:right; margin-left:8px}
.shots figcaption{min-height:22px}


/* 그림 넣기 — 끌어다 놓는 판과 미리보기 (SC-04 개요).
   `.drop` 은 목업 register.html 이 쓰던 판이다. 여기서는 `label` 이라
   눌러도 골라지므로 손 모양을 준다. */
label.drop{display:block; cursor:pointer}
label.drop:hover{border-color:var(--accent); background:var(--accent-bg)}
/* 끌어 온 것이 판 위에 있을 때 — 여기 놓으면 된다는 것을 보여 준다 */
.drop.on{border-color:var(--accent); background:var(--accent-bg)}
.shotprev{margin:12px 0 0; display:flex; align-items:center; gap:12px}
.shotprev img{
  width:120px; height:80px; object-fit:cover; flex:none;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--n-50);
}
.shotprev figcaption{font-size:12px; color:var(--dim); line-height:1.6; word-break:break-all}


/* 빈 화면의 글 속 굵은 글씨가 줄을 끊던 것.
   `.empty b` 는 **제목**을 한 줄로 세우려고 `display:block` 인데, 글(`p`)
   안의 `<b>` 까지 걸려 한 낱말마다 줄이 바뀌었다 — 가운데 맞춤이라 더
   읽기 어려웠다. 제목은 `.empty > b` 가 그대로 맡고, 글 속은 되돌린다. */
.empty p b{display:inline}