/* 프로젝트 진행 상황 UI — 인덱스(폰)와 패널이 함께 쓴다.
 *
 * 두 페이지의 변수 이름이 다르다(인덱스는 --fg/--line/--panel, 패널은
 * --text/--border/--card). 그래서 var(A, var(B)) 로 둘 다 받는다.
 * 색을 새로 정의하지 않고 각 페이지의 색을 그대로 따라가게 하려는 것이다.
 *
 * 원칙
 *  - 문단이 아니라 항목. 제목(작고 흐림) + 내용(크고 또렷함) 을 짝으로 둔다.
 *  - 목록은 왼쪽에 붙이지 않는다. 글머리와 글 사이, 상자와 글 사이에 숨을 둔다.
 *  - 폰에서 읽히는 크기를 기준으로 잡는다.
 */

:root {
  --st-fg:     var(--text, var(--fg, #e6edf3));
  --st-muted:  var(--muted, #8b949e);
  --st-line:   var(--border, var(--line, #2d333b));
  --st-card:   var(--card2, #1c2128);
  --st-accent: var(--accent, #58a6ff);
  --st-ink:    var(--accent-ink, #06121f);
  --st-ok:     var(--ok, #3fb950);
}

/* ------------------------------------------------------------ 요약 덩어리 */
.sum { display: flex; flex-direction: column; gap: 6px; }

/* 제목은 작고 흐리게, 내용은 크고 또렷하게. 이 대비가 훑는 속도를 만든다. */
.sum-cap {
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--st-muted); text-transform: none;
  margin-top: 4px;
}
.sum-cap:first-child { margin-top: 0; }
.sum-cap.next { color: var(--st-accent); }

.sum-text {
  font-size: 14.5px; line-height: 1.55; color: var(--st-fg);
  word-break: break-word;
}
.sum-text.next { color: var(--st-accent); }

/* 목록 — 글머리와 글 사이를 벌리고, 상자 왼쪽에서도 띄운다 */
.sum-list {
  margin: 2px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.sum-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px; line-height: 1.5; color: var(--st-fg);
  word-break: break-word;
}
.sum-list li::before {
  content: ""; position: absolute;
  left: 3px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--st-accent); opacity: .75;
}

.sum-more { font-size: 12.5px; color: var(--st-muted); padding-left: 16px; }
.sum-wait { font-size: 13.5px; color: var(--st-muted); padding: 6px 0; }

/* --------------------------------------------------------- 전체 목록의 줄 */
.ov-row {
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px 16px; border-radius: 14px;
  background: var(--st-card); border: 1px solid var(--st-line);
}
.ov-row.tappable { cursor: pointer; }
.ov-row.tappable:active { transform: translateY(1px); }
.ov-row.busy { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent); }

.ov-head { display: flex; align-items: center; gap: 9px; }
.ov-head .led {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--st-muted);
}
.ov-head .led.idle { background: var(--st-ok); }
.ov-head .led.busy { background: var(--st-accent); animation: st-pulse 1s infinite; }
@keyframes st-pulse { 50% { opacity: .25; } }

.ov-name {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-age { flex: none; font-size: 12px; color: var(--st-muted); }
.ov-row.busy .ov-age { color: var(--st-accent); font-weight: 800; }

/* 최근에 답이 끝난 것 — 며칠 묵은 것과 섞이지 않게 표시를 단다 */
.ov-row.fresh { border-color: color-mix(in srgb, var(--st-ok) 45%, transparent); }
.ov-done {
  flex: none; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
  color: var(--st-ok);
  background: color-mix(in srgb, var(--st-ok) 16%, transparent);
}
.ov-row.fresh .ov-age { color: var(--st-ok); }

/* 아직 요약이 안 된 줄 — 원문이라 흐리게. 채워지면 또렷해진다. */
.ov-raw {
  font-size: 13.5px; line-height: 1.5; color: var(--st-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------- 상태 배지 */
.now-state {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800;
  background: var(--st-card); border: 1px solid var(--st-line); color: var(--st-muted);
}
.now-state.busy { color: var(--st-accent); border-color: color-mix(in srgb, var(--st-accent) 45%, transparent); }
.now-state.idle { color: var(--st-ok); border-color: color-mix(in srgb, var(--st-ok) 40%, transparent); }

/* ------------------------------------------------------------- 추천 명령 */
/* 여기 규칙은 일부러 한 단계 더 구체적으로 쓴다(.sug-row > X).
 *
 * 두 페이지 모두 자기 버튼을 크게 만드는 포괄 규칙을 갖고 있다
 * (인덱스: `.panel button { width:100%; min-height:60px }`).
 * `.panel button` 은 클래스1+요소1 이라 클래스 하나짜리 `.sug-go` 를 이긴다.
 * 그러면 ▶ 버튼이 width:100% 가 되어 줄을 통째로 먹고, 옆의 본문이 0폭으로
 * 눌려 **한 줄에 한 글자씩** 떨어진다. 자식 선택자로 한 단계 올려서 막는다.
 */
.sug { display: flex; flex-direction: column; gap: 10px; }
.sug-stage {
  padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--st-accent) 13%, transparent);
  font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--st-fg);
}

.sug-row { display: flex; gap: 8px; align-items: stretch; }
.sug .sug-row > .sug-pick {
  flex: 1 1 auto; width: auto; min-width: 0; min-height: 0;
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px 15px; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 400;
  color: var(--st-fg);
  background: var(--st-card); border: 1px solid var(--st-line);
}
.sug .sug-row > .sug-pick:active { transform: translateY(1px); }
.sug-label { font-size: 12.5px; font-weight: 800; color: var(--st-accent); }
.sug-body { font-size: 14px; line-height: 1.55; word-break: break-word; white-space: normal; }

.sug .sug-row > .sug-go {
  flex: 0 0 56px; width: 56px; min-width: 56px; min-height: 0;
  border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 800;
  color: var(--st-ink); background: var(--st-accent);
  border: 1px solid var(--st-accent);
}
.sug .sug-row > .sug-go:disabled { opacity: .45; }
.sug .sug-row > .sug-go:active:not(:disabled) { transform: translateY(1px); }

/* ------------------------------------------------------------- 직접 입력 */
/* 추천이 마음에 안 들 때 바로 쓸 수 있어야 한다. 프로젝트를 이미 고른
   상태이므로, 여기서 쓴 글은 그 프로젝트로 간다. */
.sug-own { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.sug-own-cap {
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--st-muted);
}
.sug .sug-own > .sug-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 76px; padding: 12px 14px; border-radius: 12px;
  font-family: inherit; font-size: 14px; line-height: 1.55; font-weight: 400;
  color: var(--st-fg); background: var(--st-card);
  border: 1px solid var(--st-line);
}
.sug .sug-own > .sug-input:focus {
  outline: none; border-color: var(--st-accent);
}
.sug-own-row { display: flex; gap: 8px; }
.sug .sug-own-row > button {
  flex: 1 1 0; width: auto; min-width: 0; min-height: 46px;
  border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800;
}
.sug .sug-own-row > .sug-own-edit {
  color: var(--st-fg); background: var(--st-card);
  border: 1px solid var(--st-line);
}
.sug .sug-own-row > .sug-own-send {
  color: var(--st-ink); background: var(--st-accent);
  border: 1px solid var(--st-accent);
}
.sug .sug-own-row > button:disabled { opacity: .45; }
.sug .sug-own-row > button:active:not(:disabled) { transform: translateY(1px); }

/* ------------------------------------------------------------- 프로젝트 */
.pj { display: flex; flex-direction: column; gap: 8px; }
.pj-cap {
  display: flex; align-items: center; gap: 7px;
  margin-top: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: var(--st-muted);
}
.pj-cap:first-child { margin-top: 0; }
.pj-num {
  padding: 1px 7px; border-radius: 999px;
  background: var(--st-card); border: 1px solid var(--st-line);
}
.pj-rows { display: flex; flex-direction: column; gap: 7px; }
.pj-row { display: flex; gap: 7px; }
.pj-row.off { opacity: .55; }

.pj .pj-row > .pj-pick {
  flex: 1 1 auto; width: auto; min-width: 0; min-height: 0;
  display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer;
  padding: 11px 13px; border-radius: 11px;
  font-family: inherit; font-weight: 400;
  color: var(--st-fg); background: var(--st-card); border: 1px solid var(--st-line);
}
.pj .pj-row > .pj-pick:active { transform: translateY(1px); }
.pj-pick .led {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--st-ok);
}
.pj-pick .led.busy { background: var(--st-accent); animation: st-pulse 1s infinite; }
.pj-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pj-name {
  font-size: 14.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-note { font-size: 11.5px; color: var(--st-muted); }

.pj .pj-row > .pj-ex {
  flex: 0 0 auto; width: auto; min-width: 0; min-height: 0;
  padding: 0 12px; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--st-muted); background: var(--st-card); border: 1px solid var(--st-line);
}
.pj .pj-row > .pj-ex:active { transform: translateY(1px); }
.pj .pj-row > .pj-ex:disabled { opacity: .45; }
/* 한 번 더 눌러야 닫힌다는 것을 색으로 알린다 */
.pj .pj-row > .pj-shut.armed {
  color: #fff; background: #b3261e; border-color: #b3261e;
}
.pj-none { font-size: 13px; color: var(--st-muted); padding: 8px 0; }

/* ------------------------------------------------------------- 대기 목록의 버튼 */
/* 인덱스에서는 이 줄이 `.panel` 안에 들어간다. 거기 `.panel button` 이
   width:100%; min-height:60px 라서, 그냥 두면 버튼 두 개가 화면 폭짜리로
   위아래에 쌓인다. 추천 목록과 같은 이유로 한 단계 올려 쓴다. */
/* 보냈지만 그 프로젝트가 작업 중이라 도착 확인이 아직인 것.
   실패(빨강)와 섞이면 안 된다 — 글은 이미 들어가 있다. */
.q-row.waiting { border-color: color-mix(in srgb, var(--st-accent) 45%, transparent); }
.q-row.waiting .q-badge {
  color: var(--st-accent);
  background: color-mix(in srgb, var(--st-accent) 16%, transparent);
}
.q-note { font-size: 12px; line-height: 1.5; color: var(--st-muted); margin-top: 5px; }

.q-actions { display: flex; gap: 8px; margin-top: 9px; }
.q-row > .q-actions > button {
  flex: 1 1 0; width: auto; min-width: 0; min-height: 40px;
  padding: 0 12px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--st-fg); background: var(--st-card);
  border: 1px solid var(--st-line);
}
.q-row > .q-actions > .q-drop { color: var(--st-muted); }
.q-row > .q-actions > button:disabled { opacity: .45; }
.q-row > .q-actions > button:active:not(:disabled) { transform: translateY(1px); }

/* ------------------------------------------------------------- 원문 보기 */
/* 글이 많다. 작은 글씨 + 줄바꿈 유지 + 상자 안 스크롤로 한눈에 훑게 한다. */
.raw { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.raw-bar { display: flex; gap: 7px; flex-wrap: wrap; }
.raw .raw-bar > .raw-btn, .raw .raw-bar > .raw-full {
  width: auto; min-width: 0; min-height: 34px;
  padding: 0 13px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  color: var(--st-muted); background: var(--st-card);
  border: 1px solid var(--st-line);
}
.raw .raw-bar > .raw-btn.on {
  color: var(--st-accent);
  border-color: color-mix(in srgb, var(--st-accent) 45%, transparent);
}
.raw .raw-bar > .raw-full[hidden] { display: none; }
.raw .raw-bar > .raw-btn:active,
.raw .raw-bar > .raw-full:active { transform: translateY(1px); }

.raw-body { display: flex; flex-direction: column; gap: 6px; }
.raw-body[hidden] { display: none; }
.raw-cap {
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  color: var(--st-muted); margin-top: 2px;
}
.raw-text {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: var(--st-card); border: 1px solid var(--st-line);
  color: var(--st-fg);
  /* 원문은 작게. 한 화면에 최대한 많이 들어와야 훑을 수 있다. */
  font-family: inherit;
  font-size: 11.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  max-height: 46vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: text; user-select: text;
}
.raw-none { font-size: 12px; color: var(--st-muted); }

/* 폰에서는 조금 더 작게 — 원문은 '읽기' 보다 '찾기' 로 쓴다 */
@media (max-width: 480px) {
  .raw-text { font-size: 11px; line-height: 1.48; max-height: 42vh; }
}

/* ------------------------------------------ 대기 탭에서 바로 적어 넣는 칸 */
.qc {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--st-line);
}
.qc-cap {
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--st-muted);
}
.qc > .qc-proj {
  width: 100%; box-sizing: border-box; min-height: 44px;
  padding: 0 12px; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--st-fg); background: var(--st-card);
  border: 1px solid var(--st-line);
}
.qc > .qc-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 72px; padding: 12px 14px; border-radius: 12px;
  font-family: inherit; font-size: 14px; line-height: 1.55; font-weight: 400;
  color: var(--st-fg); background: var(--st-card);
  border: 1px solid var(--st-line);
}
.qc > .qc-input:focus, .qc > .qc-proj:focus {
  outline: none; border-color: var(--st-accent);
}
.qc-row { display: flex; gap: 8px; }
.qc .qc-row > button {
  flex: 1 1 0; width: auto; min-width: 0; min-height: 46px;
  border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800;
}
.qc .qc-row > .qc-mic {
  color: var(--st-fg); background: var(--st-card);
  border: 1px solid var(--st-line);
}
.qc .qc-row > .qc-mic.rec {
  color: #fff; background: #b3261e; border-color: #b3261e;
}
.qc .qc-row > .qc-add {
  color: var(--st-ink); background: var(--st-accent);
  border: 1px solid var(--st-accent);
}
.qc .qc-row > button:disabled { opacity: .45; }
.qc .qc-row > button:active:not(:disabled) { transform: translateY(1px); }

/* ------------------------------------------- Claude 가 되묻는 질문 */
.ask {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--st-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--st-accent) 40%, transparent);
}
.ask-cap {
  font-size: 12px; font-weight: 800; letter-spacing: .03em;
  color: var(--st-accent);
}
.ask-q { display: flex; flex-direction: column; gap: 7px; }
.ask-head { font-size: 11.5px; font-weight: 800; color: var(--st-muted); }
.ask-text { font-size: 14px; line-height: 1.55; color: var(--st-fg); word-break: break-word; }

.ask .ask-q > .ask-opt {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  width: 100%; box-sizing: border-box; min-height: 0;
  padding: 11px 13px; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-weight: 400;
  color: var(--st-fg); background: var(--st-card);
  border: 1px solid var(--st-line);
}
.ask .ask-q > .ask-opt.on {
  border-color: var(--st-accent);
  background: color-mix(in srgb, var(--st-accent) 18%, transparent);
}
.ask .ask-q > .ask-opt:active { transform: translateY(1px); }
.ask-num {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  color: var(--st-ink); background: var(--st-accent);
}
.ask-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ask-label { font-size: 14px; font-weight: 700; line-height: 1.45; word-break: break-word; }
.ask-desc {
  font-size: 12.5px; line-height: 1.5; color: var(--st-muted); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.ask .ask-q > .ask-other .ask-num {
  color: var(--st-fg); background: var(--st-line);
}
.ask .ask-q > .ask-other.on .ask-num {
  color: var(--st-ink); background: var(--st-accent);
}
.ask-own { display: flex; flex-direction: column; gap: 7px; }
.ask-own[hidden] { display: none; }
.ask .ask-own > .ask-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 64px; padding: 11px 13px; border-radius: 11px;
  font-family: inherit; font-size: 14px; line-height: 1.55; font-weight: 400;
  color: var(--st-fg); background: var(--st-card);
  border: 1px solid var(--st-accent);
}
.ask .ask-own > .ask-input:focus { outline: none; }
.ask .ask-own > .ask-mic {
  width: 100%; box-sizing: border-box; min-height: 42px;
  border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  color: var(--st-fg); background: var(--st-card);
  border: 1px solid var(--st-line);
}
.ask .ask-own > .ask-mic.rec { color: #fff; background: #b3261e; border-color: #b3261e; }
.ask .ask-own > .ask-mic:active { transform: translateY(1px); }

.ask > .ask-send {
  width: 100%; box-sizing: border-box; min-height: 48px;
  border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 800;
  color: var(--st-ink); background: var(--st-accent);
  border: 1px solid var(--st-accent);
}
.ask > .ask-send:disabled { opacity: .4; }

/* --------------------------------------------------------------- 폰 화면 */
@media (max-width: 480px) {
  .ov-row { padding: 13px 14px; border-radius: 12px; }
  .ov-name { font-size: 15px; }
  .sum-text { font-size: 14px; }
  .sum-list li { font-size: 13.5px; }
  .sug .sug-row > .sug-go { flex-basis: 48px; width: 48px; min-width: 48px; font-size: 15px; }
  .sug .sug-row > .sug-pick { padding: 12px 13px; }
  .sug .sug-own > .sug-input { min-height: 68px; }
}

/* --------------------------------------------------- 원문 전체화면 */
/* 모달 안은 좁다. 긴 원문을 훑을 때는 화면을 통째로 쓴다.
   현황·질문 모달(z-index 25~28) 위에 한 겹 더 올린다. */
.rawfs {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--panel, #161b24);
}
.rawfs-bar {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
  border-bottom: 1px solid var(--st-line);
  background: var(--panel, #161b24);
}
.rawfs-title {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: var(--st-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rawfs-bar > button {
  flex: 0 0 auto; width: auto; min-width: 0; min-height: 36px;
  padding: 0 13px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--st-fg); background: var(--st-card); border: 1px solid var(--st-line);
}
.rawfs-bar > button:active { transform: translateY(1px); }

.rawfs-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 6px;
  -webkit-overflow-scrolling: touch;
}
/* 전체화면에서는 상자 높이 제한을 풀고 화면 끝까지 흐르게 둔다 */
.rawfs-body .raw-text { max-height: none; overflow: visible; }
.rawfs-body .raw-text.big { font-size: 14.5px; line-height: 1.6; }