/* 멘토링 페이지 — 모바일 우선, 시스템 폰트 */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  background: #f5f6f8;
  color: #222;
  line-height: 1.55;
}
main { max-width: 1180px; margin: 0 auto; padding: 12px 18px 48px; }
a { color: #2563eb; text-decoration: none; }
button { font: inherit; cursor: pointer; white-space: nowrap; }
button.primary {
  background: #2563eb; color: #fff; border: 0; border-radius: 8px; padding: 8px 18px;
}
button.link { background: none; border: 0; color: #2563eb; padding: 0; }
button.link.danger { color: #dc2626; }
textarea, input {
  font: inherit; width: 100%; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 8px 10px; background: #fff;
}
textarea { resize: vertical; }

/* 상단 */
.top {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 14px; background: #1e293b; color: #fff;
}
/* 브랜드가 남는 폭을 다 먹어 런처·브랜드는 왼쪽에, 사용자명만 오른쪽에 남는다 */
.top .brand { color: #fff; font-weight: 700; margin-right: auto; }
.top .user { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.top .user a { color: #cbd5e1; }
.top .user button.link { color: #cbd5e1; }
.top .who em { font-style: normal; background: #2563eb; border-radius: 6px; padding: 1px 6px; font-size: .78rem; }
.flash { background: #fef3c7; border-bottom: 1px solid #fde68a; padding: 8px 14px; }
.flash p { margin: 2px 0; }

/* 앱 런처 — 크롬 좌상단 3×3 아이콘. 팝오버는 .reviewers 와 같은 details/summary(JS 없음).
   아이콘은 이모지가 아니라 점 9개다(이모지는 OS 마다 모양이 갈린다). */
.apps { position: relative; flex-shrink: 0; }
.apps summary {
  position: relative; display: block; padding: 5px; border-radius: 8px;
  cursor: pointer; list-style: none;
}
.apps summary::-webkit-details-marker { display: none; }
.apps summary:hover { background: rgba(255, 255, 255, .14); }
.apps .dots { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; }
.apps .dots i { width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1; }
.apps summary:hover .dots i { background: #fff; }
/* 알림 — 아이콘 왼쪽 위. 헤더 색으로 테두리를 둘러 점 위에 겹쳐도 읽힌다 */
.apps .dot {
  background: #dc2626; color: #fff; border-radius: 999px;
  font-size: .68rem; line-height: 1.55; min-width: 17px; padding: 0 4px; text-align: center;
}
.apps summary .dot { position: absolute; top: -6px; left: -8px; box-shadow: 0 0 0 2px #1e293b; }
.apps-menu {
  /* 아이콘이 헤더 오른쪽 끝이라 메뉴도 오른쪽으로 편다 — left:0 이면 화면 밖으로 넘친다 */
  position: absolute; right: 0; top: 100%; z-index: 30; margin-top: 8px;
  width: 288px; max-height: 60vh; overflow-y: auto;  /* 칸이 6개를 넘으면 그때부터 세로 스크롤 */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px;
  background: #fff; border: 1px solid #d0d7de; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(140, 149, 159, .3);
}
.apps-menu form { display: contents; }  /* 로그아웃 폼을 걷어 버튼이 곧 그리드 칸이 되게 */
.apps-menu .app {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 100%; padding: 12px 4px; border: 0; border-radius: 8px; background: none;
  color: #24292f; font-size: .74rem; text-align: center;
}
.apps-menu a.app:hover, .apps-menu button.app:hover { background: #f6f8fa; }
.apps-menu .ico { font-size: 1.6rem; line-height: 1.15; }
.apps-menu .nm { word-break: keep-all; white-space: normal; }
/* 지금 보고 있는 화면 — 멘티는 멘티바 탭이 없어 이것이 유일한 위치 표시다(색은 .tabs a.on 과 같게) */
.apps-menu .app.on { background: #eef2ff; color: #1d4ed8; font-weight: 600; }
.apps-menu .app.off { opacity: .38; }        /* 멘토가 멘티 목록에 있을 때 — 갈 곳이 없다 */
.apps-menu .app .dot { position: absolute; top: 6px; right: 12px; }

/* 멘티 바 + 탭 */
.mentee-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 14px; background: #fff; border-bottom: 1px solid #e5e7eb;
}
.mentee-bar .back { font-size: .9rem; }
.tabs { display: flex; gap: 4px; margin-left: auto; }
.tabs a { padding: 6px 12px; border-radius: 8px 8px 0 0; color: #555; }
.tabs a.on { background: #eef2ff; color: #1d4ed8; font-weight: 600; }
/* 기록 md 내보내기 — 멘티바에서는 아이콘 하나, 멘토 홈에서는 한 줄 링크 */
.mentee-bar .export { font-size: 1.05rem; text-decoration: none; }
p.export { margin: 18px 0; font-size: .9rem; }

/* 공통 */
.hint { color: #666; font-size: .9rem; }
.empty { color: #999; }
.meta, .dim { color: #8a8f98; font-size: .82rem; }
.body { white-space: pre-wrap; word-break: break-word; }
.page-title { margin: 10px 0; }

/* 멘토 홈 카드 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; }
.card .name { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.card .stat { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: #555; }
.card-nav { display: flex; gap: 10px; margin: 10px 0; font-size: .92rem; }
.badge { background: #fee2e2; color: #b91c1c; border-radius: 999px; padding: 1px 8px; font-size: .78rem; }
.badge.gray { background: #e5e7eb; color: #555; }
a.badge { text-decoration: none; }  /* "새 …" 배지는 그 화면으로 가는 링크다 */
/* 초기 비번(랜덤 4자리) — 숫자를 읽어 전달하는 자리라 등폭 */
.badge.pw { background: #fef3c7; color: #92400e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* 인증 화면 */
.auth { max-width: 360px; margin: 8vh auto 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 22px; }
.auth label { display: block; margin: 10px 0; font-size: .9rem; color: #444; }
.auth input { margin-top: 4px; }
.auth button { width: 100%; margin-top: 12px; padding: 10px; }

/* 자기분석 */
.q { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; margin: 14px 0; }
.q h3 { margin: 0 0 10px; font-size: 1.02rem; }
.answer .body { background: #f8fafc; border-radius: 8px; padding: 10px 12px; }
.answer .body.empty { background: none; padding: 0; }
/* 멘티가 새로 쓴 답변 = 미확인(멘토만 보는 표시). 코멘트 .new 와 같은 노랑을 쓴다 */
.answer.new .body { background: #fffbeb; border-left: 3px solid #f59e0b; }
.answer .meta form { display: inline; margin-left: 8px; }  /* 확인 버튼은 "마지막 수정 …" 줄 끝에 */
details.edit, details.history { margin-top: 8px; }
details summary { cursor: pointer; color: #2563eb; font-size: .9rem; }
details.edit form { margin-top: 8px; display: grid; gap: 8px; justify-items: end; }
.rev { border-left: 3px solid #e5e7eb; margin: 8px 0; padding: 4px 10px; }
.comments { margin-top: 12px; border-top: 1px dashed #e5e7eb; padding-top: 10px; }
.comment { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 6px 0; }
.comment .who { font-weight: 600; font-size: .88rem; }
.comment.mentor .who { color: #1d4ed8; }
.comment .body { flex: 1 1 auto; }
/* 미확인(멘토만 보는 표시) — 멘티 화면에는 .new 클래스 자체가 렌더되지 않는다 */
.comment.new { border-left: 3px solid #f59e0b; background: #fffbeb; padding: 4px 8px; border-radius: 6px; }
/* 코멘트 수정 — 한 줄 코멘트라 입력도 한 줄. 닫혔을 때는 삭제 옆에 붙고,
   열면 [open] 이 한 줄을 다 차지해(.comment 가 wrap 이다) 폼이 코멘트 아래로 펼쳐진다 */
.comment details.edit { margin-top: 0; }
.comment details.edit[open] { flex: 1 1 100%; }
.comment details.edit form {
  grid-template-columns: 1fr auto; justify-items: stretch; align-items: center;
}
.add-comment { display: flex; gap: 8px; margin-top: 8px; }
.add-comment button { border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: 6px 14px; flex-shrink: 0; }

/* 리뷰 요청 — GitHub PR 의 Reviewers 사이드바를 문항 카드 오른쪽 위로 옮긴 것.
   팝오버는 details/summary 라 JS 가 없다. 색·모양은 GitHub Primer 값을 따랐다. */
.q-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 14px; }
.q-head h3 { flex: 1 1 58%; }
.reviewers { flex: 0 0 auto; margin-left: auto; min-width: 152px; font-size: .84rem; }
.reviewers details { position: relative; margin: 0; }
.reviewers summary, .reviewers .rv-fixed {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  color: #57606a; font-size: .84rem; font-weight: 600;
  padding-bottom: 4px; border-bottom: 1px solid #d0d7de; list-style: none;
}
.reviewers summary::-webkit-details-marker { display: none; }
.reviewers summary:hover { color: #0969da; }
.reviewers .gear { font-size: .95rem; }
.reviewers .rv-menu {
  position: absolute; right: 0; top: 100%; z-index: 20; width: 248px;
  background: #fff; border: 1px solid #d0d7de; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(140, 149, 159, .25); overflow: hidden;
}
.reviewers .rv-menu-head, .reviewers .rv-menu-foot {
  margin: 0; padding: 7px 10px; background: #f6f8fa; color: #57606a; font-size: .8rem;
}
.reviewers .rv-menu-head { border-bottom: 1px solid #d0d7de; font-weight: 600; }
.reviewers .rv-menu-foot { border-top: 1px solid #d0d7de; }
.reviewers .rv-row {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid #eaeef2; padding: 8px 10px;
}
.reviewers .rv-row:hover { background: #f6f8fa; }
.reviewers .rv-row .tick { width: 14px; color: #1f883d; visibility: hidden; }
.reviewers .rv-row.on .tick { visibility: visible; }
.reviewers .ava {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ddf4ff; color: #0969da; font-size: .72rem; font-weight: 700;
}
.reviewers .rv-list { list-style: none; margin: 6px 0 0; padding: 0; }
.reviewers .rv-list li { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.reviewers .rv-list .nm { flex: 1 1 auto; color: #24292f; }
.reviewers .mark.wait { color: #d4a72c; }  /* 리뷰 대기 = GitHub 의 노란 점 */
.reviewers .mark.ok { color: #1f883d; }
.reviewers .again { background: none; border: 0; color: #57606a; padding: 0 2px; font-size: .95rem; }
.reviewers .again:hover { color: #0969da; }
.reviewers .rv-none { margin: 6px 0 0; color: #8a8f98; }
.reviewers .rv-approve {
  width: 100%; margin-top: 8px; background: #1f883d; color: #fff;
  border: 0; border-radius: 6px; padding: 5px 10px; font-size: .84rem; font-weight: 600;
}

/* 멘토에게 질문 */
.add-wish { display: grid; gap: 8px; justify-items: end; margin-bottom: 14px; }
.wish { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.wish .who { color: #1d4ed8; margin-right: 10px; }
/* 완료된 질문은 지나간 것이라 흐리게 — 단 답변(.reply)은 멘티가 읽으러 오는 자리라 뺀다.
   부모에 opacity 를 걸면 자식이 되돌릴 수 없어 흐릴 조각만 지정한다 */
.wish.done .body, .wish.done .meta { opacity: .62; }
.wish.mine .body { font-weight: 600; }  /* 모아보기에서 내 질문 */
/* "내 질문만 표시" — JS 없이 체크박스 형제 선택자로 남의 질문을 숨긴다 */
/* 위 `textarea, input` 의 width:100%·padding 이 체크박스에도 걸려 한 줄을 다 먹는다 — 되돌린다 */
.every-wish .mine-only {
  width: auto; padding: 0; border: 0; border-radius: 0;
  margin: 0 5px 0 2px; vertical-align: -2px; accent-color: #2563eb;
}
.every-wish .mine-only-label { font-size: .9rem; color: #555; cursor: pointer; }
.every-wish .mine-only:checked ~ .wish:not(.mine),
.every-wish .mine-only:checked ~ details.history .wish:not(.mine) { display: none; }
.every-wish .mine-none { display: none; }  /* 켰을 때만 — 내 질문이 하나도 없을 때 */
.every-wish .mine-only:checked ~ .mine-none { display: block; }
.wish .row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.wish .acts { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
/* 내 질문 조작(수정·삭제) — 수정 폼이 카드 폭을 다 써야 해서 meta 줄 밖에 둔다 */
.wish .own-acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 4px; }
.wish .own-acts details.edit { margin-top: 0; }
.wish .own-acts details.edit[open] { flex: 1 1 100%; }
/* 단계 표시 — 준비중은 노란 점(리뷰 대기와 같은 뜻의 색), 완료는 초록 */
.wish .stage { font-weight: 600; white-space: nowrap; }
.wish .stage.prep { color: #9a6700; }
.wish .stage.done { color: #1f883d; }
.wish.prep { border-color: #d4a72c; }  /* 멘토가 준비 중인 질문 = 테두리로 눈에 띄게 */
/* "답변 없음"(멘토만 본다) — 완료 카드는 .meta 를 흐리게 하는데 그게 부모 opacity 라
   자식이 되돌릴 수 없다(위 .wish.done 주석). 놓치면 안 되는 표시라 색으로 벌충한다 */
.wish.done .meta .badge { background: #fecaca; color: #7f1d1d; font-weight: 600; }
.wish .meta .badge { white-space: nowrap; }  /* 모바일 390 에서 "답변 없/음" 으로 갈라지던 것 */
/* 멘토가 준비하는 답변 입력란 — 카드 폭을 다 쓰고 버튼은 오른쪽(수정 폼과 같은 배치) */
.wish .answer-edit { display: grid; gap: 8px; justify-items: end; margin-top: 8px; }
/* 답변완료된 질문의 멘토 답변(멘티가 읽는 자리) — 단계 색과 같은 초록 */
.wish .reply {
  margin-top: 8px; padding: 10px 12px; border-radius: 8px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  white-space: pre-wrap; word-break: break-word;
}
.wish .reply .tag { display: block; margin-bottom: 4px; color: #1f883d; font-size: .86rem; }

/* 개인 상담 채팅 */
.chat {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 12px; height: 60vh; overflow-y: auto; margin-bottom: 10px;
}
.msg { display: flex; margin: 6px 0; }
.msg.mentee { justify-content: flex-start; }
.msg.mentor { justify-content: flex-end; }
.bubble { max-width: 88%; border-radius: 14px; padding: 8px 12px; }
.msg.mentee .bubble { background: #f1f5f9; border-bottom-left-radius: 4px; }
.msg.mentor .bubble { background: #dbeafe; border-bottom-right-radius: 4px; }
.bubble .meta { margin-top: 3px; }
/* 말풍선 안 조작 — 멘토확인(멘티 말풍선·멘토 화면에만)과 삭제(내 말풍선에만) */
.bubble form { margin-top: 2px; }
.send { display: flex; gap: 8px; align-items: flex-end; }
.send textarea { flex: 1; }
.send button { flex-shrink: 0; }

/* 인쇄 — 화면 표시에는 영향 없음 */
@media print {
  body { background: #fff; }
  /* 조작 UI·사용 안내문·수정 이력·코멘트·조 전체 모아보기는 종이에 안 나간다 */
  .top, .tabs, .mentee-bar .back, .flash, .card-nav, .hint,
  details.edit, details.history, .comments, .add-wish, .send, button,
  .every-wish, .reviewers summary, .badge.pw, .export { display: none !important; }
  /* 초기 비번 배지는 종이에 안 나간다 — 인쇄물이 비번 유출 경로가 되지 않게 */
  /* 리뷰어 목록(누가·어떤 상태)은 종이에 남긴다 — 조작하는 ⚙ 줄만 걷는다 */
  main { max-width: none; padding: 0; }
  /* 채팅: 스크롤 상자를 풀어 전체 대화를 인쇄 */
  .chat { height: auto; overflow: visible; border: 0; padding: 0; }
  /* 문항 카드째 페이지 경계에서 통째로 유지(한 페이지를 넘는 카드만 예외적으로 분할) */
  .q, .q h3, .comment, .rev, .msg, .wish, .card { break-inside: avoid; }
  .q h3 { break-after: avoid; }
  /* 긴 본문은 문단 경계에서만 나뉘고, 한두 줄 고아는 막는다 */
  .body, .bubble { orphans: 3; widows: 3; }
}