/* 질문하기(m/ask.html)와 질문과 답(m/qna.html)에만 쓰는 꼴. 공용 꼴은 m.css에 있다.
   색은 lm-tokens.css의 --lm- 변수만, 크기는 base.css의 --rd- 변수만 쓴다. CSP가 style 속성을 막으므로 모두 클래스로 준다. */

/* ── 펼쳐 보는 줄(안건 고르기·이미 올라온 답). 줄 전체가 누르는 자리 ── */

.q-fold {
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

.q-fold > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--lm-space-12);
  min-height: var(--rd-tap);
  padding: var(--lm-space-12) var(--lm-space-16);
  border-radius: var(--lm-radius-card);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--rd-duration-color) var(--lm-ease-out);
}

.q-fold > summary::-webkit-details-marker {
  display: none;
}

.q-fold-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.q-fold-label {
  color: var(--lm-text-muted);
  font-size: var(--rd-fs-small);
  line-height: 1.5;
}

.q-fold-value {
  color: var(--lm-text-strong);
  font-weight: 600;
  line-height: 1.5;
}

.q-fold-more {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-4);
  color: var(--lm-primary);
  font-size: var(--rd-fs-small);
  font-weight: 600;
  white-space: nowrap;
}

.q-fold-more .icon {
  transition: transform var(--lm-duration) var(--lm-ease-out);
}

.q-fold[open] > summary .q-fold-more .icon {
  transform: rotate(90deg);
}

.q-fold-body {
  display: grid;
  gap: var(--lm-space-12);
  padding: var(--lm-space-12) var(--lm-space-16) var(--lm-space-16);
  border-top: 1px solid var(--lm-hairline);
}

@media (hover: hover) {
  .q-fold > summary:hover {
    background: var(--lm-bg-subtle);
  }
}

/* ── 안건 고르기: 큰 고르기 줄. 고른 줄은 코발트 테두리와 옅은 바탕 ── */

.q-choices {
  display: grid;
  gap: var(--lm-space-8);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.q-choice {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: var(--lm-space-12);
  min-height: var(--rd-tap);
  padding: var(--lm-space-12) var(--lm-space-16);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-control);
  background: var(--lm-bg-surface);
  cursor: pointer;
  transition: border-color var(--rd-duration-color) var(--lm-ease-out), background-color var(--rd-duration-color) var(--lm-ease-out);
}

.q-choice input {
  width: 24px;
  height: 24px;
  margin: calc((1.5em - 24px) / 2) 0 0;
  accent-color: var(--lm-primary);
}

.q-choice input:focus-visible {
  outline: none;
}

.q-choice:has(input:focus-visible) {
  outline: var(--lm-focus-ring);
  outline-offset: 2px;
}

.q-choice:has(input:checked) {
  border-color: var(--lm-primary);
  background: var(--lm-trust-soft);
}

.q-choice-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1.5;
}

.q-choice-num {
  color: var(--lm-text-muted);
  font-size: var(--rd-fs-small);
  font-weight: 600;
}

.q-choice-title {
  color: var(--lm-text-strong);
  font-weight: 600;
}

@media (hover: hover) {
  .q-choice:hover {
    border-color: var(--lm-text);
  }
}

/* ── 이미 올라온 답 ── */

.q-prior {
  display: grid;
  gap: var(--lm-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-prior > li {
  display: grid;
  gap: var(--lm-space-8);
}

.q-prior > li + li {
  padding-top: var(--lm-space-16);
  border-top: 1px solid var(--lm-hairline);
}

.q-prior-question {
  color: var(--lm-text-strong);
  font-weight: 700;
  line-height: 1.5;
}

.q-prior-answer {
  white-space: pre-line;
}

/* 글 사이의 링크도 누르는 자리는 56px */
.q-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--rd-tap);
}

/* ── 개인정보 안내(본문 크기·본문 색으로, 흐리게 두지 않는다) ── */

.q-privacy {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--lm-space-8);
  color: var(--lm-text);
}

.q-privacy > .icon {
  margin-top: calc((1.75em - 24px) / 2);
  color: var(--lm-text-strong);
}

.q-privacy-text {
  display: grid;
  gap: var(--lm-space-8);
}

/* 질문 칸 아래 글자 수. 오른쪽에 조용히, 가득 차면 본문 색으로 */
.q-count {
  justify-self: end;
  color: var(--lm-text-muted);
  font-size: var(--rd-fs-small);
  line-height: 1.5;
}

.q-count.is-full {
  color: var(--lm-text-strong);
  font-weight: 600;
}

/* ── 질문과 답: 주제로 바로 가기, 이 기기에서 보낸 질문 ── */

.q-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

.q-rows > li + li {
  border-top: 1px solid var(--lm-hairline);
}

.q-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--lm-space-12);
  min-height: var(--rd-tap);
  padding: var(--lm-space-8) var(--lm-space-16);
  color: var(--lm-text-strong);
  text-decoration: none;
}

a.q-row {
  border-radius: var(--lm-radius-card);
  font-weight: 600;
  transition: background-color var(--rd-duration-color) var(--lm-ease-out);
}

a.q-row:focus-visible {
  outline-offset: -3px;
}

.q-row-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1.5;
}

/* 이 기기에서 보낸 질문: 번호 옆에 보낸 글의 앞부분. 좁으면 다음 줄로 */
.q-mine-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--lm-space-12);
  min-width: 0;
}

.q-mine-no {
  flex: 0 0 auto;
  color: var(--lm-text-strong);
  font-weight: 700;
}

.q-mine-text {
  min-width: 0;
  color: var(--lm-text);
  font-weight: 400;
}

.q-row-sub {
  color: var(--lm-text-muted);
  font-size: var(--rd-fs-small);
  font-weight: 400;
}

.q-row-end {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-8);
  color: var(--lm-text-muted);
  font-size: var(--rd-fs-small);
  font-weight: 600;
}

/* 같은 화면 안으로 내려가는 줄은 아래쪽 화살표 */
.q-row-end .icon.is-down {
  transform: rotate(90deg);
}

@media (hover: hover) {
  a.q-row:hover {
    background: var(--lm-bg-subtle);
  }
}

/* 바로 가기로 내려온 제목이 화면 맨 위에 붙지 않게 */
.q-anchor {
  scroll-margin-top: var(--lm-space-16);
}

/* ── 질문과 답: 받은 질문 처리 결과(장부). 누르는 자리가 아니라 읽는 줄 ── */

.q-ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

.q-ledger > li {
  padding: var(--lm-space-12) var(--lm-space-16);
  color: var(--lm-text-strong);
  line-height: 1.5;
}

.q-ledger > li + li {
  border-top: 1px solid var(--lm-hairline);
}

/* ── 물음 하나(공개 답·집행부에 물어본 것) ── */

.q-question {
  font-size: var(--rd-fs-body);
  line-height: 1.6;
}

.q-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-space-8);
}

/* 상태·안내 한 줄: 아이콘 + 본문 색 글(흐리게 두지 않는다, 읽혀야 하므로) */
.q-state {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--lm-space-8);
  color: var(--lm-text-strong);
  line-height: 1.6;
}

.q-state > .icon {
  margin-top: calc((1.6em - 24px) / 2);
  color: var(--lm-text-muted);
}

/* ── 저도 이게 궁금해요: 띠와 단추 ── */

.q-echo {
  display: grid;
  gap: var(--lm-space-8);
  padding-top: var(--lm-space-12);
  border-top: 1px solid var(--lm-hairline);
}

.q-echo[hidden] {
  display: none;
}

.q-band {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--lm-space-8);
  padding: var(--lm-space-4) var(--lm-space-12);
  border-radius: var(--lm-radius-pill);
  background: var(--lm-trust-soft);
  color: var(--lm-text-strong);
  font-weight: 600;
  line-height: 1.5;
}

.q-band > .icon {
  color: var(--lm-trust);
}

.q-echo-action {
  display: grid;
  gap: var(--lm-space-8);
}

.q-echo-done {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-8);
  min-height: var(--rd-tap);
  color: var(--lm-success-text);
  font-weight: 600;
}

/* ── 질문하기: [이것 물어보기]로 온 문장(물음 꼴로 바꾸지 못했을 때 입력칸 위에) ── */

.q-from {
  display: grid;
  gap: var(--lm-space-4);
  padding: var(--lm-space-12) var(--lm-space-16);
  border: 1px dashed var(--lm-border-strong);
  border-radius: var(--lm-radius-control);
}

.q-from-text {
  color: var(--lm-text-strong);
  line-height: 1.6;
}