/* ============================================================
   ARIFE 고객지원 v3100

   약관·개인정보·취소환불과 같은 '정책 4형제' 자리다.
   그래서 틀·폭·탭 막대는 그 셋과 똑같이 쓰고(arife-legal-align-v3000),
   이 파일은 이 페이지에만 있는 것 — 자주 묻는 질문, 문의 폼,
   처리 기준 표 — 만 맡는다.
   ============================================================ */

/* ── 1) 자주 묻는 질문 ─────────────────────────────────────
   묶음 제목(결제와 구독 / AI 생성 / …)은 조문 번호처럼 보이지 않게
   작고 차분하게. */
.support-page-v3100 .sup-group-v3100{
  margin:26px 0 10px;
  color:#7fc9e8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.09em;
}
.support-page-v3100 .sup-group-v3100:first-of-type{ margin-top:6px; }

.support-page-v3100 .sup-faq-v3100{
  margin:0 0 8px;
  border:1px solid rgba(148,176,214,.2);
  border-radius:13px;
  background:rgba(255,255,255,.022);
  overflow:hidden;
}
.support-page-v3100 .sup-faq-v3100 > summary{
  padding:14px 42px 14px 16px;
  position:relative;
  cursor:pointer;
  color:#dfe8f5;
  font-size:13.5px;
  font-weight:700;
  line-height:1.5;
  list-style:none;
}
.support-page-v3100 .sup-faq-v3100 > summary::-webkit-details-marker{ display:none; }
/* 여닫이 표시. `+` 가 열리면 `×` 로 기울어진다 */
.support-page-v3100 .sup-faq-v3100 > summary::after{
  content:"+";
  position:absolute;
  right:15px;
  top:50%;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border:1px solid rgba(148,176,214,.32);
  border-radius:7px;
  color:#9fb6d4;
  font-size:13px;
  font-weight:700;
  line-height:1;
  transform:translateY(-50%);
  transition:transform .18s ease,border-color .18s ease;
}
.support-page-v3100 .sup-faq-v3100[open] > summary::after{
  transform:translateY(-50%) rotate(45deg);
  border-color:#6f9ed8;
}
.support-page-v3100 .sup-faq-v3100 > summary:hover{ background:rgba(120,160,220,.07); }
.support-page-v3100 .sup-faq-v3100[open] > summary{ border-bottom:1px solid rgba(148,176,214,.16); }
.support-page-v3100 .sup-faq-v3100 > p{
  margin:0;
  padding:14px 16px;
  color:#a9b6c7;
  font-size:13px;
  line-height:1.8;
}
.support-page-v3100 .sup-faq-v3100 > p + p{ padding-top:0; }
.support-page-v3100 .sup-faq-v3100 b{ color:#dbe6f4; }

/* 근거 줄 — 이 답이 어느 조항에서 나왔는지 밝힌다.
   말로만 안내하면 나중에 정책이 바뀌었을 때 어긋난 걸 아무도 못 찾는다. */
.support-page-v3100 .sup-src-v3100{
  color:#6d7b8d!important;
  font-size:11.5px!important;
}
.support-page-v3100 .sup-src-v3100 a{
  color:#8fb4de;
  border-bottom:1px solid rgba(143,180,222,.3);
}
.support-page-v3100 .sup-src-v3100 a:hover{ color:#cfe2fb; }

/* ── 2) 문의 폼 ───────────────────────────────────────────── */
.support-page-v3100 .sup-intro-v3100{
  margin:0 0 16px;
  color:#98a5b6;
  font-size:12.5px;
  line-height:1.75;
}
.support-page-v3100 .sup-form-v3100{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.support-page-v3100 .sup-full-v3100{ grid-column:1 / -1; }
.support-page-v3100 .sup-field-v3100{
  min-width:0;
  display:grid;
  gap:7px;
  position:relative;
}
.support-page-v3100 .sup-field-v3100 > label{
  color:#c3cedd;
  font-size:12px;
  font-weight:700;
}
.support-page-v3100 .sup-field-v3100 > label span{
  color:#6f7d8f;
  font-weight:500;
}
.support-page-v3100 .sup-field-v3100 :is(input,select,textarea){
  width:100%;
  min-height:44px;
  padding:11px 13px;
  border:1px solid #33465f;
  border-radius:11px;
  background:#0b1119;
  color:#e8eef8;
  font-size:13px;
  font-family:inherit;
  line-height:1.6;
}
.support-page-v3100 .sup-field-v3100 textarea{ min-height:150px; resize:vertical; }
.support-page-v3100 .sup-field-v3100 :is(input,select,textarea):focus{
  border-color:#6f9eff;
  box-shadow:0 0 0 3px rgba(73,121,238,.14);
  outline:0;
}
.support-page-v3100 .sup-field-v3100 :is(input,textarea)::placeholder{ color:#5d6b7d; }
.support-page-v3100 .sup-field-v3100.is-bad-v3100 :is(input,textarea){ border-color:#e0736f; }

.support-page-v3100 .sup-count-v3100{
  position:absolute;
  right:2px;
  bottom:-17px;
  color:#66748a;
  font-size:11px;
  font-weight:500;
}

.support-page-v3100 .sup-actions-v3100{
  grid-column:1 / -1;
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
}
.support-page-v3100 .sup-actions-v3100 .button{ min-height:46px; padding:0 26px; }
.support-page-v3100 .sup-mail-v3100{
  color:#8b98a9;
  font-size:12px;
}
.support-page-v3100 .sup-mail-v3100:hover{ color:#dae5f4; }

.support-page-v3100 .sup-status-v3100{
  grid-column:1 / -1;
  margin:0;
  min-height:19px;
  color:#8fb4de;
  font-size:12.5px;
  line-height:1.7;
}
.support-page-v3100 .sup-status-v3100.is-bad-v3100{ color:#f0938e; }
.support-page-v3100 .sup-status-v3100.is-good-v3100{ color:#6fd6a6; }

/* ── 내가 보낸 문의 ───────────────────────────────────────── */
.support-page-v3100 .sup-mine-v3100{
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid rgba(148,176,214,.16);
}
.support-page-v3100 .sup-mine-v3100 h3{
  margin:0 0 13px;
  color:#dfe8f5;
  font-size:14px;
}
.support-page-v3100 .sup-ticket-v3100{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:4px 12px;
  margin-bottom:8px;
  padding:13px 15px;
  border:1px solid rgba(148,176,214,.18);
  border-radius:12px;
  background:rgba(255,255,255,.018);
}
.support-page-v3100 .sup-ticket-v3100 strong{
  min-width:0;
  color:#e2eaf6;
  font-size:13px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.support-page-v3100 .sup-ticket-v3100 small{
  grid-column:1;
  color:#6f7d8f;
  font-size:11.5px;
}
.support-page-v3100 .sup-ticket-v3100 em{
  grid-column:2;
  grid-row:1 / span 2;
  padding:6px 11px;
  border:1px solid #3c5271;
  border-radius:99px;
  font-size:11px;
  font-style:normal;
  font-weight:700;
  white-space:nowrap;
}
/* 상태 색 — 팔레트 규칙대로 청록(진행) · 보라(답변 완료) · 회색(닫힘) */
.support-page-v3100 .sup-ticket-v3100 em[data-state="open"]       { border-color:#3f6f86; color:#7fc9e8; }
.support-page-v3100 .sup-ticket-v3100 em[data-state="in_progress"]{ border-color:#3f6f86; color:#7fc9e8; }
.support-page-v3100 .sup-ticket-v3100 em[data-state="answered"]   { border-color:#5b52a4; color:#b3a9ff; }
.support-page-v3100 .sup-ticket-v3100 em[data-state="closed"]     { border-color:#3a4457; color:#8592a5; }
.support-page-v3100 .sup-empty-v3100{
  padding:16px;
  border:1px dashed rgba(148,176,214,.2);
  border-radius:12px;
  color:#7c8a9c;
  font-size:12.5px;
}

/* ── 3) 처리 기준 표 ──────────────────────────────────────── */
.support-page-v3100 .sup-sla-v3100{
  display:grid;
  gap:1px;
  margin:4px 0 18px;
  border:1px solid rgba(148,176,214,.18);
  border-radius:13px;
  background:rgba(148,176,214,.14);
  overflow:hidden;
}
.support-page-v3100 .sup-sla-v3100 > div{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:14px;
  padding:13px 16px;
  background:#0b1017;
}
.support-page-v3100 .sup-sla-v3100 > div > b{
  color:#dbe6f4;
  font-size:12.5px;
  font-weight:800;
}
.support-page-v3100 .sup-sla-v3100 > div > span{
  color:#a1aec0;
  font-size:12.5px;
  line-height:1.75;
}
.support-page-v3100 .sup-sla-v3100 b b{ color:#7fc9e8; }

/* ── 좁은 화면 ────────────────────────────────────────────── */
@media (max-width:700px){
  .support-page-v3100 .sup-form-v3100{ grid-template-columns:minmax(0,1fr); }
  .support-page-v3100 .sup-sla-v3100 > div{ grid-template-columns:minmax(0,1fr); gap:5px; }
  .support-page-v3100 .sup-ticket-v3100{ grid-template-columns:minmax(0,1fr); }
  .support-page-v3100 .sup-ticket-v3100 em{ grid-column:1; grid-row:auto; justify-self:start; margin-top:6px; }
  .support-page-v3100 .sup-actions-v3100 .button{ width:100%; }
}

/* ── 관리자 화면의 문의 목록 ──────────────────────────────── */
[data-support-admin-list]{
  display:grid;
  gap:10px;
}
.sup-admin-card-v3100{
  display:grid;
  gap:10px;
  padding:16px 18px;
  border:1px solid rgba(148,176,214,.2);
  border-left:3px solid #3f6f86;
  border-radius:13px;
  background:rgba(255,255,255,.02);
}
.sup-admin-card-v3100[data-state="answered"]{ border-left-color:#7a6fd6; }
.sup-admin-card-v3100[data-state="closed"]{ border-left-color:#3a4457; opacity:.72; }
.sup-admin-card-v3100 > header{ display:grid; gap:4px; }
.sup-admin-card-v3100 > header strong{ color:#e6edf8; font-size:13.5px; }
.sup-admin-card-v3100 > header small{ color:#7b899b; font-size:11.5px; }
.sup-admin-body-v3100{
  margin:0;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(6,10,17,.7);
  color:#adbaca;
  font-size:12.5px;
  line-height:1.8;
  white-space:pre-wrap;
  word-break:break-word;
}
.sup-admin-card-v3100 > footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px 14px;
}
.sup-admin-ref-v3100{
  padding:5px 10px;
  border:1px solid #3a4c66;
  border-radius:8px;
  color:#9fb0c6;
  font-size:11.5px;
}
.sup-admin-mail-v3100{ color:#8fb4de; font-size:12px; }
.sup-admin-mail-v3100:hover{ color:#d6e6fb; }
.sup-admin-state-v3100{
  margin-left:auto;
  min-height:36px;
  padding:0 11px;
  border:1px solid #33465f;
  border-radius:9px;
  background:#0b1119;
  color:#e2eaf6;
  font-size:12px;
  font-family:inherit;
}
@media (max-width:700px){
  .sup-admin-state-v3100{ margin-left:0; width:100%; }
}