/* ═══ ReqHub 앱 레이어 — 와이어프레임에 없던 실동작 요소 ═══ */

html,body{height:100%}
body{background:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
.btn:focus-visible,.tabs button:focus-visible{outline-offset:1px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ─── 브랜드 (minijoy 심볼) ───────────────────────── */
.brand{cursor:pointer;text-decoration:none}
.brand .glyph{border:0;width:26px;height:26px;padding:0}
.brand .glyph svg{width:26px;height:22px;display:block}
.brand small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}

/* ─── 인증 화면 ───────────────────────────────────── */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--paper)}
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.auth-head{padding:24px 24px 18px;border-bottom:1px solid var(--line-soft)}
.auth-head .mark{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.auth-head .mark svg{width:38px;height:31px}
.auth-head .mark strong{font-size:19px;letter-spacing:-.02em}
.auth-head .mark small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.auth-head h1{margin:0;font-size:16px;letter-spacing:-.01em}
.auth-head p{margin:5px 0 0;font-size:12.5px;color:var(--mute);line-height:1.55}
.auth-body{padding:20px 24px 24px}
.auth-foot{padding:13px 24px;background:var(--surface-2);border-top:1px solid var(--line-soft);font-size:12px;color:var(--mute);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.auth-foot button{border:0;background:transparent;color:var(--blue);font-size:12px;text-decoration:underline;padding:0}
.auth-tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.auth-tabs button{border:1px solid transparent;border-bottom:0;background:transparent;padding:7px 13px;font-size:12.5px;color:var(--mute);border-radius:var(--r) var(--r) 0 0;margin-bottom:-1px}
.auth-tabs button[aria-selected="true"]{background:var(--surface);border-color:var(--line);color:var(--ink);font-weight:600}

.alert{border-left:2px solid var(--mark);background:var(--mark-soft);padding:9px 12px;border-radius:0 var(--r) var(--r) 0;font-size:12.5px;color:#5f3323;margin-bottom:14px;line-height:1.5}
.alert.ok{border-color:var(--ok);background:var(--ok-soft);color:#2c5138}
.alert.info{border-color:var(--blue);background:var(--blue-soft);color:#2a4272}
.alert.warn{border-color:var(--warn);background:var(--warn-soft);color:#6b5216}

/* ─── 사이드바: 로그인 칩 ─────────────────────────── */
.side-foot{position:relative;cursor:pointer}
.side-foot:hover{background:var(--surface)}
.side-foot .caret{margin-left:auto;color:var(--mute);font-size:10px}
.usermenu{position:absolute;bottom:calc(100% + 6px);left:10px;right:10px;background:var(--surface);border:1px solid var(--ink);border-radius:var(--r);z-index:70;overflow:hidden;box-shadow:0 6px 22px rgba(20,20,22,.14)}
.usermenu button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;padding:9px 12px;font-size:12.5px;text-align:left;border-bottom:1px solid var(--line-soft)}
.usermenu button:last-child{border-bottom:0}
.usermenu button:hover{background:var(--surface-2)}
.usermenu .sep{padding:7px 12px;background:var(--surface-2);font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line-soft)}

/* ─── 프로젝트 스위처 ─────────────────────────────── */
.proj-switch{position:relative;cursor:pointer;text-align:left;width:calc(100% - 24px);font:inherit}
.proj-switch:hover{border-color:var(--ink)}
.projmenu{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--surface);border:1px solid var(--ink);border-radius:var(--r);z-index:70;max-height:290px;overflow:auto;box-shadow:0 6px 22px rgba(20,20,22,.14)}
.projmenu button{display:block;width:100%;border:0;background:transparent;padding:9px 12px;font-size:12.5px;text-align:left;border-bottom:1px solid var(--line-soft)}
.projmenu button:hover{background:var(--surface-2)}
.projmenu button.on{background:var(--blue-soft)}
.projmenu button small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--mute);margin-top:1px}

/* ─── 알림 드롭다운 ───────────────────────────────── */
.bell{position:relative}
.bell .dotn{position:absolute;top:-4px;right:-5px;min-width:15px;height:15px;padding:0 3px;border-radius:9px;background:var(--mark);color:#fff;font-family:var(--mono);font-size:9px;display:grid;place-items:center;line-height:1}
.notif-pop{position:absolute;top:calc(100% + 8px);right:0;width:min(340px,84vw);background:var(--surface);border:1px solid var(--ink);border-radius:var(--r);z-index:70;max-height:400px;overflow:auto;box-shadow:0 8px 26px rgba(20,20,22,.16)}
.notif-pop .h{position:sticky;top:0;background:var(--surface-2);padding:9px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
.notif-pop .h .acts{margin-left:auto}
.notif-item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-bottom:1px solid var(--line-soft);font-size:12.5px;line-height:1.5}
.notif-item:hover{background:var(--surface-2)}
.notif-item.unread{background:var(--blue-soft)}
.notif-item.unread:hover{background:#dae1f0}
.notif-item b{display:block;font-size:12.5px;margin-bottom:2px}
.notif-item span{color:var(--mute);font-size:11.5px;display:block}
.notif-item time{font-family:var(--mono);font-size:10px;color:var(--mute);display:block;margin-top:3px}

/* ─── 토스트 ──────────────────────────────────────── */
.toasts{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:min(380px,90vw)}
.toast{background:var(--ink);color:#f2f1ee;border-radius:var(--r);padding:11px 14px;font-size:12.5px;line-height:1.5;display:flex;gap:9px;align-items:flex-start;box-shadow:0 6px 22px rgba(20,20,22,.24);animation:tin .18s ease}
.toast.ok{background:#2f5a3d}
.toast.err{background:#8a3a20}
.toast .x{margin-left:auto;border:0;background:transparent;color:inherit;opacity:.6;font-size:14px;line-height:1;padding:0}
.toast .x:hover{opacity:1}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ─── 빈 상태 · 로딩 · 에러 ───────────────────────── */
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:40px 20px;text-align:center;color:var(--mute);font-size:13px;background:var(--surface-2)}
.empty b{display:block;color:var(--ink);font-size:14px;margin-bottom:5px}
.empty > span{display:block;max-width:46ch;margin:0 auto}
.empty .btn{display:inline-block;margin-top:14px}
.skeleton{border:1px solid var(--line-soft);border-radius:var(--r);height:56px;margin-bottom:8px;background:linear-gradient(90deg,var(--surface-2) 25%,#eeede9 50%,var(--surface-2) 75%);background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ─── 표 · 목록 보강 ──────────────────────────────── */
.table tbody tr.sel{background:var(--blue-soft)}
.table td .bar{display:inline-block;width:56px;flex:none;vertical-align:middle}
.table-wrap{overflow-x:auto}
.chip.btnlike{cursor:pointer;border:0;font:inherit;font-family:var(--mono);font-size:11px}
.chip.btnlike:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on::before{background:#fff}
.filterbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.filterbar select.mini{border:1px solid var(--line);border-radius:20px;padding:3px 8px;font-size:11px;font-family:var(--mono);background:var(--surface);max-width:170px}
.rowlink{cursor:pointer}

/* ─── 진행 보드 ───────────────────────────────────
   상태 전이는 Claude Code 세션과 검수 흐름이 주도하므로
   카드를 끌어 옮기는 조작은 제공하지 않는다. */
.tick{cursor:pointer}
.tick:hover{border-color:var(--ink)}

/* ─── 타임라인 ────────────────────────────────────── */
.timeline{position:relative;padding-left:20px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl-item{position:relative;padding:0 0 16px 0}
.tl-item::before{content:"";position:absolute;left:-18px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:1.5px solid var(--mute)}
.tl-item.done::before{background:var(--ok);border-color:var(--ok)}
.tl-item.running::before{background:var(--warn);border-color:var(--warn)}
.tl-item .when{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.tl-item .t{font-size:13px;font-weight:600;margin:1px 0 3px}

/* ─── 완료조건 편집 ───────────────────────────────── */
.ac-edit li{align-items:flex-start;gap:8px}
.ac-edit .inp{flex:1;padding:5px 8px;font-size:12.5px}
.ac-edit .del{border:0;background:transparent;color:var(--mute);padding:3px 5px;font-size:13px;line-height:1;flex:none}
.ac-edit .del:hover{color:var(--mark)}
.ac .note{margin:4px 0 0;padding:5px 9px;font-size:11.5px;background:var(--surface-2);border-left-color:var(--line);color:var(--mute)}

/* ─── 리포트 좌우 대조 ────────────────────────────── */
.split-b.scroll-sync{max-height:none}
.ac li.hidden-diff{display:none}
.report-frame{width:100%;min-height:520px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);display:block}
.report-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}

/* ─── 첨부 드롭 영역 ──────────────────────────────── */
.drop{cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.file-row .rm{margin-left:6px}
.file-row a{color:var(--blue);text-decoration:none}
.file-row a:hover{text-decoration:underline}

/* ─── 마크다운 렌더 ───────────────────────────────── */
.md{font-size:13px;line-height:1.7}
.md h1,.md h2,.md h3{margin:16px 0 7px;letter-spacing:-.01em}
.md h1{font-size:16px}.md h2{font-size:14.5px}.md h3{font-size:13.5px}
.md h1:first-child,.md h2:first-child,.md h3:first-child{margin-top:0}
.md p{margin:0 0 10px}
.md ul,.md ol{margin:0 0 10px;padding-left:20px}
.md li{margin-bottom:3px}
.md code{font-family:var(--mono);font-size:11.5px;background:var(--surface-2);padding:1px 4px;border-radius:2px}
.md pre{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r);padding:10px 12px;overflow-x:auto;margin:0 0 10px}
.md pre code{background:transparent;padding:0;font-size:11.5px;line-height:1.6}
.md blockquote{margin:0 0 10px;padding-left:11px;border-left:2px solid var(--line);color:var(--mute)}
.md hr{border:0;border-top:1px solid var(--line-soft);margin:14px 0}
.md a{color:var(--blue)}
.md table{border-collapse:collapse;font-size:12.5px;margin:0 0 10px;width:100%}
.md th,.md td{border:1px solid var(--line-soft);padding:5px 8px;text-align:left}
.md th{background:var(--surface-2);font-weight:600}

/* ─── 모달 보강 ───────────────────────────────────── */
.modal.wide{width:min(680px,100%)}
.modal.xwide{width:min(920px,100%)}
.modal-b .field:last-child{margin-bottom:0}
.modal-bg{animation:fade .14s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ─── 관리자 ──────────────────────────────────────── */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.code-pill{font-family:var(--mono);font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:4px 9px;display:inline-flex;align-items:center;gap:7px}
.code-pill button{border:0;background:transparent;color:var(--mute);font-size:11px;padding:0}
.code-pill button:hover{color:var(--ink)}

/* ─── 세션 로그 ───────────────────────────────────── */
.logbox{font-family:var(--mono);font-size:11.5px;line-height:1.65;background:#1b1c1f;color:#d7d7d2;border-radius:var(--r);padding:12px 14px;max-height:420px;overflow:auto}
.logbox .t{color:#75766f;margin-right:8px}
.logbox .k{color:#8fb4e8}
.logbox .k.error{color:#e08c72}
.logbox .k.done{color:#8fca9f}

/* ─── 공유 공개 뷰 ────────────────────────────────── */
.public-wrap{max-width:1080px;margin:0 auto;padding:24px 18px 60px}
.public-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.public-head svg{width:32px;height:26px}
.public-head .ro{margin-left:auto}

/* ─── 진행 상세: 실행 현황 ────────────────────────── */
.qbox{border:1px solid var(--blue);background:var(--blue-soft);border-radius:var(--r);padding:11px 13px;margin-top:8px}
.qbox .qh{font-size:11.5px;font-family:var(--mono);color:var(--blue);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.answered-tag{font-family:var(--mono);font-size:10px;color:var(--ok);border:1px solid var(--ok);border-radius:20px;padding:1px 7px}

/* ─── 유틸 ────────────────────────────────────────── */
.mt0{margin-top:0}.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb14{margin-bottom:14px}.mb16{margin-bottom:16px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt14{margin-top:14px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.push{margin-left:auto}
.muted{color:var(--mute)}
.mono{font-family:var(--mono)}
.nowrap{white-space:nowrap}
.grow{flex:1;min-width:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none!important}

@container (max-width: 860px){
  .sidebar{position:absolute;height:100%}
  .detail-grid{grid-template-columns:1fr}
}
@container (max-width: 640px){
  .admin-grid{grid-template-columns:1fr 1fr}
}

/* ─── 시각 검증 반영 보정 ─────────────────────────── */
/* 프로젝트 카드의 상태 칩이 컬럼 폭 전체로 늘어나지 않도록 */
.proj-card > .chip{align-self:flex-start}
/* 진행 스테퍼: 라벨·시각이 한 줄에 붙지 않고 쌓이도록 */
.flow li > span{display:block}
/* 토스트 위치
   · 우상단 = 페이지 액션 버튼(제출·검수 승인 등)이 있는 자리
   · 우하단 = 폼 푸터 버튼(다음 단계·제출하기)이 있는 자리
   두 곳 모두 오른쪽 정렬이므로 좌하단(사이드바 바깥)에 띄운다. */
.toasts{left:232px;right:auto;bottom:18px;top:auto;align-items:flex-start}

/* ─── 클릭 타겟 최소 크기 (UX 감사 반영) ─────────── */
/* 프로젝트 카드 ⋯ 메뉴 */
.proj-card .menu{min-width:28px;min-height:28px;display:grid;place-items:center;border-radius:var(--r);margin:-4px -4px 0 0}
.proj-card .menu:hover{background:var(--surface-2);color:var(--ink)}
/* 초대 코드 복사 버튼 */
.code-pill button{min-width:30px;min-height:24px;padding:2px 6px;border-radius:2px}
.code-pill button:hover{background:var(--line-soft)}
/* 인증 화면 텍스트 링크 */
.auth-foot button{min-height:26px;padding:4px 2px}
/* 상태 칩 버튼 */
.chip.btnlike{min-height:24px;padding:3px 10px}
/* 댓글·목록의 ghost 버튼 */
.btn.sm.ghost{min-height:24px}

/* 표 셀 안의 인라인 select 는 내용 폭에 맞춘다 */
.table td select.inp{width:auto;min-width:104px;max-width:100%}

/* ─── 첨부 이미지 썸네일 ─────────────────────────── */
.att-thumb{display:block;width:100%;padding:0;margin-top:7px;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;background:var(--surface-2);cursor:zoom-in}
.att-thumb:hover{border-color:var(--ink)}
.att-thumb img{display:block;width:100%;max-height:150px;object-fit:cover}

/* ─── 장문·긴 문자열 오버플로 방지 ────────────────
   grid/flex 자식은 기본 min-width:auto 라서 끊기지 않는 긴 문자열이
   트랙을 밀어낸다. min-width:0 으로 트랙 폭을 고정하고,
   텍스트 블록은 필요할 때만 줄바꿈되도록 overflow-wrap:anywhere 를 준다. */
.detail-grid > *,
.grid-2 > *, .grid-3 > *,
.two > *, .three > *,
.board > *, .board-col > *,
.split > section,
.admin-grid > *,
.page-h > *, .card-h > *, .row > *,
.form-foot > *, .filterbar > * { min-width: 0 }

.md, .md p, .md li, .md h1, .md h2, .md h3, .md blockquote,
.ac li, .ac li span,
.page-h h1, .page-h p,
.card-b, .split-b,
.table td, .table .ttl,
.proj-card h3, .proj-card .desc,
.tick .t, .tl-item .t,
.cmt p, .cmt .bd,
.notif-item, .notif-item b, .notif-item span,
.empty, .alert, .note > div,
.kv dd, .file-row, .diffbox .path,
.toast { overflow-wrap: anywhere }

/* 코드·경로처럼 공백이 없는 문자열은 확실히 끊는다 */
.md code, .md pre, .inp.mono, .diffbox, .logbox,
.kv dd.mono, .code-pill { overflow-wrap: anywhere; word-break: break-word }
.md pre { overflow-x: auto }

/* 표는 자체 스크롤 컨테이너를 갖는다 */
.table-wrap { max-width: 100% }

/* 사이드바가 서랍으로 바뀌는 폭에서는 토스트를 화면 좌하단에 붙인다 */
@media (max-width: 900px){
  .toasts{left:12px;right:12px;max-width:none}
}