/* ============================================================
   ARIFE 고객지원 구조 정리 v3400

   지적받은 것
     1) 한 칸씩 펼칠 때마다 페이지 구조가 바뀐다
        (실측: 4개 펼치면 문서 +229px, '처리 기준' 이 500px 아래로 밀림)
     2) 오른쪽 '문의 보내기' 와 '처리 기준' 의 자리가 애매하다
     3) 간격이 안 맞는다

   고친 방향
     1) 질문을 묶음 탭으로 나눠 한 번에 한 묶음만 편다.
        펼쳐도 흔들리는 폭이 확 줄어든다.
     2) 자리를 다시 나눈다.
          가운데 = 자주 묻는 질문 + 처리 기준   (읽는 것)
          오른쪽 = 문의 보내기, 따라다님        (하는 것)
        '읽는 것'과 '하는 것'을 세로로 갈라서, 스크롤을 내려도
        문의 칸은 늘 눈앞에 남는다. 처리 기준은 질문과 성격이
        같으므로 질문 아래로 내린다.
     3) 세로 간격을 22px 한 값으로 통일한다.
   ============================================================ */

/* ── 1) 묶음 탭 ────────────────────────────────────────────── */
.sup-tabs-v3400{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:2px 0 18px;
  padding:6px;
  border:1px solid rgba(150,183,222,.16);
  border-radius:15px;
  background:rgba(8,13,22,.6);
}
.sup-tab-v3400{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#93a2b6;
  font:700 12.5px/1 inherit;
  font-family:inherit;
  cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease;
}
.sup-tab-v3400 > b{
  min-width:19px;
  height:19px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:99px;
  background:rgba(150,183,222,.13);
  color:#8fa1b8;
  font:800 10.5px/1 ui-monospace,Consolas,monospace;
}
.sup-tab-v3400:hover{
  color:#dfe8f5;
  background:rgba(120,170,225,.09);
}
.sup-tab-v3400.is-sup-live-v3400{
  border-color:rgba(95,214,245,.42);
  background:linear-gradient(120deg,rgba(95,214,245,.17),rgba(140,125,255,.09));
  color:#f2f8ff;
  box-shadow:inset 0 1px rgba(255,255,255,.12);
}
.sup-tab-v3400.is-sup-live-v3400 > b{
  background:rgba(95,214,245,.24);
  color:#d9f4ff;
}
.sup-tab-v3400:focus-visible{ outline:2px solid #9dc8ff; outline-offset:2px; }

/* 탭이 제목을 대신하므로 원래 묶음 제목은 감춘다(읽어 주는 기계에는 남는다) */
.sup-group-hidden-v3400{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
.sup-pack-v3400{ display:grid; gap:8px; }
.sup-pack-v3400[hidden]{ display:none; }

/* ── 2) 넓은 화면 자리 배치 ───────────────────────────────── */
@media (min-width:1280px){
  /* 가운데 : 질문 → 처리 기준 */
  body.support-body-v3200 #sup-faq:not(#_):not(#_){ grid-column:2!important; grid-row:2!important; }
  body.support-body-v3200 #sup-sla:not(#_):not(#_){ grid-column:2!important; grid-row:3!important; margin-top:22px!important; }
  /* 오른쪽 : 문의 한 칸, 따라다님 */
  body.support-body-v3200 #sup-form:not(#_):not(#_){
    grid-column:3!important;
    grid-row:2 / span 2!important;
    align-self:start!important;
    position:sticky!important;
    top:170px!important;      /* 상단 메뉴(70) + 정책 탭 막대(84) 아래 */
    max-height:calc(100vh - 196px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  /* 따라다니는 칸 안에서 스크롤 막대가 모서리를 뚫지 않게 */
  body.support-body-v3200 #sup-form::-webkit-scrollbar{ width:6px; }
}

/* ── 3) 간격 통일 ─────────────────────────────────────────── */
body.support-body-v3200 .legal-body > article:not(#_):not(#_){ padding-bottom:26px!important; }
body.support-body-v3200 #sup-faq > h2:not(#_):not(#_),
body.support-body-v3200 #sup-form > h2:not(#_):not(#_),
body.support-body-v3200 #sup-sla > h2:not(#_):not(#_){ margin:0 0 16px!important; }
body.support-body-v3200 .sup-intro-v3100{ margin:0 0 18px!important; }
body.support-body-v3200 .sup-sla-v3100{ margin:0 0 16px!important; }
body.support-body-v3200 .sup-mine-v3100{ margin-top:22px!important; padding-top:20px!important; }
body.support-body-v3200 .sup-faq-v3100 + .sup-faq-v3100{ margin-top:0!important; }
body.support-body-v3200 .sup-faq-v3100{ margin:0!important; }

/* ── 4) 좁은 화면 : 따라다니기를 끄고 순서대로 ─────────────── */
@media (max-width:1279px){
  body.support-body-v3200 #sup-form:not(#_):not(#_){
    position:static!important;
    max-height:none!important;
    overflow:visible!important;
  }
}

/* 좁은 화면에서는 탭 넉 장을 2×2 로 세운다.
   가로 스크롤로 두면 뒤쪽 두 묶음이 있는 줄도 모르고 지나간다.
   (`flex-wrap:nowrap` 은 다른 묶음의 규칙에 밀려 먹지 않았다 — 격자로 간다) */
@media (max-width:700px){
  .sup-tabs-v3400:not(#_):not(#_){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .sup-tab-v3400:not(#_):not(#_){
    justify-content:space-between!important;
    padding:0 11px!important;
    font-size:12px!important;
  }
}

/* ── 6) 고객지원에서는 '척추'와 마디를 걷어낸다 ──────────────
   척추(세로선 + 조문 마디)는 조문이 줄줄이 이어지는 약관 문서용이다.
   고객지원은 질문·문의·처리기준 세 판이라 매달 것이 없다.

   게다가 넓은 화면에서는 `.legal-body` 를 `display:contents` 로
   걷어 세 판을 바깥 격자에 직접 얹는데, 상자가 사라져도
   그 가상요소(세로선)는 남아 조상 기준으로 그려졌다. 그래서
   왼쪽에 쓸데없는 선이 하나 더 생겼고, 조문 마디(9px 동그라미)는
   매달릴 선이 없어 '문서 내 이동' 판 모서리에 홀로 떠 있었다.
   둘 다 지운다. */
body.support-body-v3200 .legal-body::before,
body.support-body-v3200 .legal-body::after,
body.support-body-v3200 .legal-body > article::before{
  content:none!important;
  display:none!important;
}
body.support-body-v3200 .legal-body:not(#_):not(#_){
  padding-left:0!important;
}
body.support-body-v3200 .legal-body > article:not(#_):not(#_){
  padding-left:0!important;
}
@media (min-width:1280px){
  body.support-body-v3200 #sup-form:not(#_):not(#_),
  body.support-body-v3200 #sup-sla:not(#_):not(#_){
    padding:28px 26px 30px!important;
  }
}