/* ============================================================
   ARIFE 정책·고객지원 넓은 화면 배치 v3200

   860px 한 줄이라 넓은 화면에서 오른쪽이 통째로 비고, 대신
   아래로만 길어졌다(고객지원 3,493px · 환불 3,016px @1600).
   가로를 쓴다.

     약관 3종  … [ 조문 색인 · 따라다님 ] [ 본문 ]
     고객지원  … [ 색인 ] [ 자주 묻는 질문 ] [ 문의 · 처리 기준 ]

   좁아지면 원래대로 한 줄로 되돌린다(v3000 규칙이 그대로 산다).

   ── 왜 `display:contents` 인가 ────────────────────────────
   `.legal-body` 는 조문을 담은 상자다. 고객지원에서는 그 안의
   세 덩이(질문·문의·처리기준)를 서로 다른 칸에 놓아야 하는데,
   상자가 살아 있으면 셋이 한 칸에 갇힌다. 상자만 없애고
   자식을 바깥 격자에 직접 얹는다.
   ============================================================ */

/* ── 1) 약관·개인정보·취소환불 : 색인 기둥 + 본문 ──────────── */
@media (min-width:1180px){
  /* 폭은 1,080px. 색인 250 + 사이 26 을 빼면 본문이 804px 다.
     본문에는 `max-width:75ch`(≈668px) 라는 읽기 폭 상한이 걸려 있어서
     틀을 더 넓히면 오른쪽이 그만큼 빈 채로 남는다. 그래서 틀을 넓히는
     대신 이 페이지에서만 상한을 풀어 칸을 꽉 채운다.
     804px 은 한글 기준 한 줄 60자쯤 — 조문처럼 짧은 문단에는 무리가 없다. */
  body.trust-legal-v310:not(.support-body-v3200) .legal-page:not(#_):not(#_){
    width:min(1080px,calc(100% - 48px))!important;
    grid-template-columns:250px minmax(0,1fr)!important;
    gap:20px 26px!important;
    align-items:start!important;
  }
  body.trust-legal-v310:not(.support-body-v3200) .legal-body:not(#_):not(#_){
    max-width:none!important;
  }
  body.trust-legal-v310:not(.support-body-v3200) .legal-page .page-hero:not(#_):not(#_){
    grid-column:1 / -1!important;
  }
  /* 위쪽 '목차' 판과 왼쪽 색인은 같은 말을 두 번 한다. 하나만 남긴다 */
  body.trust-legal-v310:not(.support-body-v3200) .legal-toc:not(#_):not(#_){
    display:none!important;
  }
  body.trust-legal-v310:not(.support-body-v3200) .trust-policy-index-v310:not(#_):not(#_){
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    position:sticky!important;
    top:170px!important;   /* 상단 메뉴(70) + 정책 탭 막대(84) 아래 */
  }
  body.trust-legal-v310:not(.support-body-v3200) .legal-body:not(#_):not(#_){
    grid-column:2!important;
    grid-row:2!important;
    margin:0!important;
  }
}

/* ── 2) 고객지원 : 색인 + 질문 + 문의 ──────────────────────── */
@media (min-width:1280px){
  body.support-body-v3200 .legal-page:not(#_):not(#_){
    width:min(1480px,calc(100% - 48px))!important;
    grid-template-columns:230px minmax(0,1.25fr) minmax(0,1fr)!important;
    gap:20px 24px!important;
    align-items:start!important;
  }
  body.support-body-v3200 .legal-page .page-hero:not(#_):not(#_){ grid-column:1 / -1!important; }
  body.support-body-v3200 .legal-toc:not(#_):not(#_){ display:none!important; }
  body.support-body-v3200 .trust-policy-index-v310:not(#_):not(#_){
    grid-column:1!important;
    grid-row:2 / span 2!important;
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    position:sticky!important;
    top:170px!important;
  }
  /* 상자를 걷어 세 덩이를 바깥 격자에 직접 얹는다 */
  body.support-body-v3200 .legal-body:not(#_):not(#_){ display:contents!important; }
  body.support-body-v3200 #sup-faq{  grid-column:2!important; grid-row:2 / span 2!important; margin:0!important; }
  body.support-body-v3200 #sup-form{ grid-column:3!important; grid-row:2!important; margin:0!important; }
  body.support-body-v3200 #sup-sla{  grid-column:3!important; grid-row:3!important; margin:0!important; }

  /* 오른쪽 칸이 좁아졌으니 안쪽도 한 줄로 세운다 */
  body.support-body-v3200 .sup-form-v3100{ grid-template-columns:minmax(0,1fr)!important; }
  body.support-body-v3200 .sup-sla-v3100 > div{ grid-template-columns:96px minmax(0,1fr)!important; }
}

/* ── 3) 세로로 세운 색인 ──────────────────────────────────── */
@media (min-width:1180px){
  body.trust-legal-v310 .trust-policy-index-v310:not(#_):not(#_) > span{
    border-right:0!important;
    border-bottom:1px solid #2c3d57!important;
    padding:4px 10px 9px!important;
  }
  body.trust-legal-v310 .trust-policy-index-v310:not(#_):not(#_) > div{
    flex-direction:column!important;
    gap:6px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    max-height:min(62vh,520px)!important;
  }
  body.trust-legal-v310 .trust-policy-index-v310:not(#_):not(#_) a{
    width:100%!important;
    min-height:40px!important;
    white-space:normal!important;   /* 조문 이름이 길면 두 줄로 접힌다 */
    line-height:1.4!important;
  }
  body.trust-legal-v310 .trust-policy-index-v310:not(#_):not(#_) a > b{ flex:0 0 auto!important; }
}

/* ── 4) 탭 막대와 푸터도 넓어진 틀에 맞춘다 ────────────────
   좁은 화면에서는 v3000 이 정한 860px 선이 그대로 살아야 하므로
   여기서도 같은 분기점(1180 / 1280)에서만 덮어쓴다. */
@media (min-width:1180px){
  body.trust-legal-v310:not(.support-body-v3200) .trust-rail-v310:not(#_):not(#_){
    padding-inline:calc((100% - min(1080px,100% - 48px)) / 2)!important;
  }
  body.trust-legal-v310:not(.support-body-v3200) .footer{
    /* v652 에서 본문이 1420px 로 넓어졌다 — 발치도 같이 간다 */
    --arife-foot-w:min(1420px,100% - 48px);
  }
}
@media (min-width:1280px){
  body.support-body-v3200 .trust-rail-v310:not(#_):not(#_){
    padding-inline:calc((100% - min(1480px,100% - 48px)) / 2)!important;
  }
  body.support-body-v3200 .footer{
    --arife-foot-w:min(1420px,100% - 48px);   /* 고객지원도 같은 폭 */
  }
}