/* ── 문의 페이지 ── */

/* 상단바 문의 버튼 */
.app_topbar-inquiry {
  width: var(--g36);
  height: var(--g36);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  cursor: pointer;
}
.app_topbar-inquiry:active {
  transform: scale(.98);
}
.app_topbar-inquiry .material-symbols-outlined {
  font-size: 22px;
}

/* ── 폼 ── */
.inq-form {
  display: flex;
  flex-direction: column;
  gap: var(--g16);
}

/* 카테고리 탭 */
.inq-tabs {
  display: flex;
  gap: 8px;
}
.inq-tab {
  flex: 1;
  height: 42px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--r-sm);
  background: var(--color-bg);
  font-family: var(--ff-app);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-muted);
  cursor: pointer;
  transition: all .15s;
}
.inq-tab.active {
  border-color: var(--color-text);
  background: var(--color-text);
  color: #fff;
}

/* 필드 */
.inq-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inq-label {
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.inq-select,
.inq-input,
.inq-textarea {
  width: 100%;
  border: 1.5px solid var(--color-line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-family: var(--ff-app);
  font-size: var(--fs-14);
  color: var(--color-text);
  background: var(--color-bg);
  outline: none;
  box-sizing: border-box;
}
.inq-select:focus,
.inq-input:focus,
.inq-textarea:focus {
  border-color: var(--color-text);
}
.inq-textarea {
  resize: vertical;
  min-height: 100px;
}
.inq-charcount {
  text-align: right;
  font-size: 11px;
  color: var(--color-muted);
}

/* 동의 체크박스 */
.inq-agree {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  color: var(--color-text);
  cursor: pointer;
}
.inq-agree input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-text);
  flex-shrink: 0;
}
.inq-agree-link {
  color: var(--color-text);
  text-decoration: underline;
}

/* 제출 버튼 */
.inq-submit {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--color-text);
  color: #fff;
  font-family: var(--ff-app);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: opacity .15s;
}
.inq-submit:disabled {
  opacity: .35;
  cursor: default;
}
.inq-submit:not(:disabled):active {
  opacity: .8;
}

/* ── 내 문의 내역 ── */
.inq-history {
  margin-top: var(--g16);
}
.inq-history-title {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: 12px;
  padding: 12px 0;
  border-top: 6px solid #F3F4F6;
}
.inq-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inq-history-empty {
  text-align: center;
  color: var(--color-muted);
  font-size: var(--fs-13);
  padding: 32px 0;
}

/* 내역 카드 */
.inq-card {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 1줄: 분류 + 상태 + 날짜 */
.inq-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.inq-card-cat {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--color-muted);
}
.inq-card-status {
  font-size: 10px;
  font-weight: var(--fw-bold);
  padding: 1px 8px;
  border-radius: 8px;
}
.inq-card-status.pending {
  background: #FEF3C7;
  color: #92400E;
}
.inq-card-status.done {
  background: #D1FAE5;
  color: #065F46;
}
.inq-card-date {
  font-size: 11px;
  color: var(--color-muted);
  margin-left: auto;
}

/* 2줄: 내용 (최대 2줄, 넘으면 말줄임) */
.inq-card-content {
  font-size: var(--fs-13);
  color: var(--color-text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 관리자 답변 (있을 때만 3줄째) */
.inq-card-reply {
  font-size: 12px;
  color: #2563EB;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inq-card-reply-label {
  font-weight: var(--fw-bold);
  margin-right: 2px;
}

/* ── 이벤트 카드 ── */
.event-card{background:var(--bg-card);border-radius:var(--r12);padding:16px;margin:0 0 10px}
.event-card-title{font-size:var(--fs-15);font-weight:var(--fw-black);margin-bottom:4px}
.event-card-desc{font-size:var(--fs-13);color:var(--color-muted);margin-bottom:6px;white-space:pre-line}
.event-card-period{font-size:var(--fs-11);color:var(--color-muted2);margin-bottom:10px}
.event-card-btn{width:100%;padding:10px;border:none;border-radius:var(--r8);background:var(--color-primary,#111);color:#fff;font-size:var(--fs-14);font-weight:var(--fw-bold);cursor:pointer}
.event-selected-title{font-size:var(--fs-16);font-weight:var(--fw-black);padding:16px 0 8px;text-align:center}