/* 계정관리 화면 — 왼쪽 메뉴 + 오른쪽 내용. /admin, /center, /worker가 함께 쓴다.
   (작업자 앱은 화면이 좁아 메뉴를 가로로 눕힌다 — 아래 좁은 화면 규칙과 같다.)

   색은 var() 대체값을 겹쳐 써서 그 화면의 색을 따르게 한다 — 센터는 따뜻한 색(--warm-*,
   --accent*), 관리자·작업자는 푸른 색(--mw-*)을 쓴다. 예전에는 --mw-*만 써서 센터
   계정관리만 혼자 파란 화면이었다. */

/* 계정관리 메뉴는 **브라우저 탭 모양**이다(/shared/tabs.css 와 같은 모양).
 *
 * 예전에는 왼쪽 세로 사이드바였다. 그런데 하는 일은 탭과 똑같고(아래 칸을 갈아 끼운다),
 * 좁은 화면에서는 이미 가로로 눕고 있었다. 시스템 안의 다른 전환기(이관 관리·업체관리·우리
 * 건설사)가 모두 탭 모양인데 여기만 사이드바여서, 같은 일을 하는 것이 두 가지로 보였다.
 *
 * 클래스 이름과 .on 표시는 그대로 둔다 — /admin, /center, /worker 세 화면이 같은 JS
 * (shared/inquiry.js 의 switchAccountTab)를 쓰므로, 표시 방법을 바꾸면 세 군데가 함께
 * 틀어진다. 모양만 바꾸고 짜임은 건드리지 않는다.
 */
.acct { display: flex; flex-direction: column; gap: 0; align-items: stretch; }

.acct-nav {
  display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--warm-line, var(--mw-line-strong));
  /* 탭이 많아 한 줄을 넘으면 아래에서 접어 내린다(좁은 화면 규칙 참고). */
}
.acct-nav button {
  display: inline-flex; align-items: center; gap: 7px; width: auto;
  padding: 0 14px; min-height: 40px; margin-bottom: -1px;
  border: 1px solid transparent; border-bottom-color: transparent;
  border-radius: 10px 10px 0 0;              /* 위만 둥글고 아래는 각진다 — 종이 탭처럼 */
  /* 브라우저가 button 에 제 기본 모양(ButtonFace)을 입히는데, 그것이 어두운 테마에서도 흰색으로
     남아 새어 나왔다. appearance 를 끄고 배경을 긴 이름으로 못 박는다. */
  -webkit-appearance: none; appearance: none;
  background-color: transparent; background-image: none;
  font-size: 13px; font-weight: 700; color: var(--warm-sub, var(--mw-muted));
  text-align: left; cursor: pointer; font-family: inherit; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mw-dur, .15s) var(--mw-ease, ease), color var(--mw-dur, .15s) var(--mw-ease, ease);
}
.acct-nav button:hover { background-color: var(--warm-bg, var(--mw-surface-sunken)); color: var(--warm-ink, var(--mw-ink)); }
/* 고른 탭 — 바탕을 카드와 같은 색으로 두고 아래 테두리를 지운다. 그래야 밑줄이 그 자리에서
   끊겨 아래 내용과 한 덩어리로 보인다. 위쪽 굵은 선이 「여기가 열린 장」을 못 박는다. */
.acct-nav button.on {
  background-color: var(--warm-card, var(--mw-surface));
  color: var(--accent-ink, var(--mw-accent-ink));
  border-color: var(--warm-line, var(--mw-line-strong));
  border-bottom-color: var(--warm-card, var(--mw-surface));
  box-shadow: inset 0 2px 0 0 var(--accent, var(--mw-accent));
}
/* 키보드로 옮겨 다닐 때 어디 있는지 보여야 한다. */
.acct-nav button:focus-visible { outline: 2px solid var(--accent, var(--mw-accent)); outline-offset: -2px; }
.acct-nav button .ico { font-size: 15px; line-height: 1; }
/* 안 읽은 답변 개수 */
.acct-nav button .dot {
  margin-left: auto; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 9px; background: var(--mw-danger); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
.acct-body { flex: 1 1 auto; min-width: 0; }
.acct-body > [data-acct-panel] { display: none; }
.acct-body > [data-acct-panel].on { display: block; }

/* ---- 문의 ---- */
.inq-form { display: grid; gap: 10px; }
.inq-form label { font-size: 12px; font-weight: 600; color: var(--warm-sub, var(--mw-ink-soft)); display: block; }
.inq-form select, .inq-form input, .inq-form textarea {
  width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 9px 10px; border: 1px solid var(--warm-line, var(--mw-line-strong)); border-radius: 8px;
  font-size: 13px; font-family: inherit; color: var(--warm-ink, var(--mw-ink));
  background: var(--warm-card, var(--mw-surface));
}
.inq-form textarea { min-height: 110px; line-height: 1.55; resize: vertical; }
.inq-form select:focus, .inq-form input:focus, .inq-form textarea:focus {
  outline: none; border-color: var(--accent, var(--mw-accent));
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(47, 95, 218, .12));
}

.inq-list { display: grid; gap: 10px; }
.inq-item {
  border: 1px solid var(--warm-line, var(--mw-line)); border-radius: 10px;
  background: var(--warm-card, var(--mw-surface)); overflow: hidden;
}
.inq-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 13px; cursor: pointer;
}
.inq-head:hover { background: var(--warm-bg, var(--mw-surface-sunken)); }
.inq-cat {
  font-size: 10.5px; font-weight: 700; color: var(--accent-ink, var(--mw-muted));
  background: var(--accent-soft, var(--mw-accent-soft)); padding: 2px 7px; border-radius: 9px;
}
.inq-title { font-size: 13px; font-weight: 700; color: var(--warm-ink, var(--mw-ink)); }
.inq-date { font-size: 11.5px; color: var(--warm-sub, var(--mw-muted)); }
.inq-state {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 10px;
}
.inq-state.open { background: var(--mw-warn-soft); color: var(--mw-warn-ink); }
.inq-state.answered { background: var(--mw-good-soft); color: var(--mw-good-ink); }
.inq-state.closed { background: var(--warm-bg, var(--mw-surface-sunken)); color: var(--warm-sub, var(--mw-muted)); }
.inq-new { width: 7px; height: 7px; border-radius: 50%; background: var(--mw-danger); }

.inq-body { display: none; padding: 0 13px 13px; border-top: 1px solid var(--warm-line, var(--mw-surface-sunken)); }
.inq-item.open .inq-body { display: block; }

/* 슈퍼관리자의 "문의 관리" 화면(#sa-inq-list)은 여러 사람의 문의를 훑어보는 자리라 말풍선을
   그대로 쓴다. 아래 "내 문의" 전용 규칙과 섞이지 않게 여기 남겨 둔다. */
.inq-msgs { display: grid; gap: 8px; margin: 12px 0; }
.inq-msg { max-width: 82%; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.inq-msg .who { display: block; font-size: 11px; font-weight: 700; margin-bottom: 3px; opacity: .75; }
.inq-msg .when { display: block; font-size: 10.5px; margin-top: 5px; opacity: .55; }
/* 내가 쓴 글은 오른쪽, 상대 글은 왼쪽 — 누가 한 말인지 한눈에 갈린다. */
.inq-msg.user { margin-left: auto; background: var(--accent-soft, var(--mw-accent-soft)); color: var(--accent-ink, var(--mw-accent-ink)); border-bottom-right-radius: 3px; }
.inq-msg.staff { margin-right: auto; background: var(--warm-bg, var(--mw-surface-sunken)); color: var(--warm-ink, var(--mw-ink)); border-bottom-left-radius: 3px; }

/* ── 내 문의(#inq-list) ── 한 건씩 카드로 읽는 자리라 말풍선 대신 문서처럼 위에서 아래로 쌓는다.
   내가 물은 것은 그대로 두고, 마감웍스 답변은 한 칸 들여쓴 상자에 넣어 어디까지가 답변인지
   눈으로 갈린다. 접었다 펼치는 동작은 그대로다. */
#inq-list .inq-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 펼칠 수 있다는 걸 알려주는 꺾쇠. 펼치면 위를 향한다. */
#inq-list .inq-caret {
  width: 7px; height: 7px; flex: none; margin-left: 2px;
  border-right: 1.6px solid var(--warm-sub, var(--mw-muted));
  border-bottom: 1.6px solid var(--warm-sub, var(--mw-muted));
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
#inq-list .inq-item.open .inq-caret { transform: rotate(-135deg) translate(-2px, -2px); }
#inq-list .inq-q { padding: 13px 1px 0; }
#inq-list .inq-a {
  margin: 11px 0 0 14px; padding: 11px 13px; border-radius: 9px;
  background: var(--warm-bg, var(--mw-surface-sunken));
}
#inq-list .inq-a-label {
  font-size: 11px; font-weight: 700; margin-bottom: 5px;
  color: var(--warm-sub, var(--mw-muted));
}
#inq-list .inq-text { font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--warm-ink, var(--mw-ink)); }
#inq-list .inq-when { font-size: 11.5px; margin-top: 7px; color: var(--warm-sub, var(--mw-muted)); }
/* 마지막 글과 답장칸이 붙지 않게 한 칸 띄운다. */
#inq-list .inq-reply { margin-top: 14px; }

.inq-reply { display: flex; gap: 8px; align-items: flex-end; }
.inq-reply textarea {
  flex: 1; min-height: 62px; box-sizing: border-box;
  padding: 9px 10px; border: 1px solid var(--warm-line, var(--mw-line-strong)); border-radius: 8px;
  font-size: 13px; font-family: inherit; line-height: 1.55; resize: vertical;
  color: var(--warm-ink, var(--mw-ink)); background: var(--warm-card, var(--mw-surface));
}
.inq-empty { font-size: 12.5px; color: var(--warm-sub, var(--mw-muted)); padding: 14px 2px; }

@media (max-width: 760px) {
  /* 탭이 두 줄로 접히면 -1px 이음새가 윗줄에도 걸려 줄이 어긋나 보인다. 그때는 이음새를
     버리고 밑줄도 지운다 — 좁은 화면에서는 「이어져 보이기」보다 「안 어긋나 보이기」가 낫다.
     (/shared/tabs.css 의 같은 규칙과 짝을 맞춘다.) */
  .acct-nav { border-bottom: none; gap: 6px; }
  .acct-nav button {
    margin-bottom: 0; border-radius: 10px;
    border-color: var(--warm-line, var(--mw-line));
    padding: 0 12px;
  }
  .acct-nav button.on {
    border-color: var(--warm-line, var(--mw-line-strong));
    border-bottom-color: var(--warm-line, var(--mw-line-strong));
  }
  .inq-msg { max-width: 92%; }
}

/* ---- 아이폰 자동확대 방지 ----
   iOS는 글자 크기가 16px 미만인 입력칸을 누르면 화면을 확대하고 되돌리지 않는다.
   좁은 화면에서만 16px로 올린다 — 넓은 화면의 촘촘한 배치는 그대로 둔다. */
@media (max-width: 640px) {
  .inq-form select, .inq-form input, .inq-form textarea { font-size: 16px; }
}