/* ============================================================
   ARIFE 정책·고객지원 콘솔 v3300

   무엇이 마음에 안 들었나 (사용자 지적 4가지)
     · 다 비슷한 네모 카드만 나열
     · 너무 어둡고 평평함
     · 움직임·반응이 없음
     · 위아래 순서가 뻔함

   그래서 바꾼 것
     1) 상자를 걷어낸다 — 조문을 테두리 상자에 담지 않고
        세로 '척추(spine)' 에 매단다. 왼쪽에 선 하나가 흐르고
        조문마다 마디(node)가 달린다. 네모의 반복이 사라진다.
     2) 밝기 폭을 넓힌다 — 바탕(#05080e)부터 유리판(흰색 7%)까지
        층을 나누고, 청록·보라 두 빛을 크게 깔아 깊이를 만든다.
        (팔레트 규칙대로 새 색은 만들지 않는다)
     3) 반응을 넣는다 — 읽은 만큼 차오르는 막대, 지금 보는 조문에
        불이 들어오는 마디, 커서를 따라 도는 빛, 처음 보일 때
        떠오르는 등장. 움직임을 싫어하는 설정이면 전부 끈다.
     4) 리듬을 만든다 — 조문 번호를 88px 유령 숫자로 뒤에 깔아
        큰 것과 작은 것이 번갈아 오게 한다. 첫 조문은 크게 연다.

   글은 법적 문서다. 화려함이 읽기를 방해하면 안 되므로
   장식은 전부 배경·가장자리에만 두고 본문 글자는 건드리지 않는다.
   ============================================================ */

body.trust-legal-v310{
  --pc-ink:#05080e;
  --pc-cyan:#5fd6f5;
  --pc-violet:#8c7dff;
  --pc-line:rgba(150,183,222,.16);
  --pc-glass:rgba(255,255,255,.045);
}
/* 페이지마다 빛의 자리를 바꾼다. 색을 새로 만들지 않고 각도만 돌린다 */
body.trust-legal-v310{ --pc-x:16%; --pc-y:8%;  }
body.trust-legal-v310.support-body-v3200{ --pc-x:78%; --pc-y:6%; }

/* ── 1) 바탕 : 층을 나눠 평평함을 없앤다 ────────────────────── */
body.trust-legal-v310:not(#_):not(#_){
  background:
    radial-gradient(1100px 620px at var(--pc-x) var(--pc-y),rgba(95,214,245,.11),transparent 62%),
    radial-gradient(900px 520px at calc(100% - var(--pc-x)) 78%,rgba(140,125,255,.09),transparent 60%),
    linear-gradient(180deg,#070b13 0%,#05080e 46%,#070a11 100%)!important;
  background-attachment:fixed!important;
}
/* 아주 고운 격자 한 겹. 있는 줄 모르지만 없으면 화면이 빈 종이처럼 뜬다 */
body.trust-legal-v310::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(150,183,222,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,183,222,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1200px 800px at 50% 0,#000,transparent 78%);
}
body.trust-legal-v310 .site-nav,
body.trust-legal-v310 main,
body.trust-legal-v310 .footer{ position:relative; z-index:1; }
/* 탭 막대와 옆 색인은 `position:sticky` 다. 여기서 `relative` 로 덮으면
   따라다니지 않고 그냥 흘러가 버린다 — 쌓임 순서만 올린다. */
body.trust-legal-v310 .trust-rail-v310{ z-index:46; }

/* ── 2) 읽은 만큼 차오르는 막대 ────────────────────────────── */
.pc-progress-v3300{
  position:fixed;
  left:0;
  top:0;
  z-index:60;
  width:100%;
  height:2px;
  pointer-events:none;
  background:transparent;
}
.pc-progress-v3300 > i{
  display:block;
  width:var(--pc-read,0%);
  height:100%;
  background:linear-gradient(90deg,var(--pc-cyan),var(--pc-violet));
  box-shadow:0 0 12px rgba(95,214,245,.55);
  transition:width .12s linear;
}

/* ── 3) 머리판 : 유리 한 장 + 큰 유령 글자 ────────────────── */
body.trust-legal-v310 .legal-page .page-hero:not(#_):not(#_){
  position:relative;
  overflow:hidden;
  padding:52px 46px 46px!important;
  border:1px solid var(--pc-line)!important;
  border-radius:26px!important;
  background:
    linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.012) 42%,transparent 72%),
    linear-gradient(180deg,rgba(12,20,33,.86),rgba(6,10,17,.9))!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.13),
    0 24px 60px rgba(0,0,0,.42)!important;
}
/* 위쪽 가장자리에 얇은 빛줄 — 유리의 두께를 느끼게 한다 */
body.trust-legal-v310 .legal-page .page-hero::after{
  content:"";
  position:absolute;
  left:26px;
  right:26px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--pc-cyan),var(--pc-violet),transparent);
  opacity:.7;
}
body.trust-legal-v310 .legal-page .page-hero h1:not(#_):not(#_){
  position:relative;
  z-index:1;
  letter-spacing:-.055em!important;
}
body.trust-legal-v310 .legal-page .page-hero .crumbs:not(#_):not(#_){
  position:relative;
  z-index:1;
}

/* ── 4) 조문 : 상자를 버리고 척추에 매단다 ────────────────── */
body.trust-legal-v310 .legal-body:not(#_):not(#_){
  position:relative;
  gap:0!important;
  padding-left:34px!important;
}
/* 척추 — 위아래로 흐려지는 세로선 */
body.trust-legal-v310 .legal-body::before{
  content:"";
  position:absolute;
  left:7px;
  top:12px;
  bottom:12px;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--pc-line) 8%,var(--pc-line) 92%,transparent);
}
/* 읽은 만큼 척추에 불이 들어온다 */
body.trust-legal-v310 .legal-body::after{
  content:"";
  position:absolute;
  left:7px;
  top:12px;
  width:1px;
  height:var(--pc-spine,0px);
  background:linear-gradient(180deg,var(--pc-cyan),var(--pc-violet));
  box-shadow:0 0 10px rgba(95,214,245,.5);
  transition:height .16s linear;
}

body.trust-legal-v310 .legal-body > article:not(#_):not(#_){
  position:relative;
  margin:0!important;
  padding:30px 30px 34px 26px!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:background .28s ease,box-shadow .28s ease;
}
/* 마디 — 조문마다 척추에 달리는 점 */
body.trust-legal-v310 .legal-body > article::before{
  content:"";
  position:absolute;
  left:-32px;
  top:40px;
  width:9px;
  height:9px;
  border:1px solid rgba(150,183,222,.5);
  border-radius:50%;
  background:#0a1018;
  transition:transform .3s cubic-bezier(.2,.9,.25,1),border-color .3s ease,box-shadow .3s ease;
}
/* 유령 숫자 — 큰 것과 작은 것의 리듬을 만든다 */
body.trust-legal-v310 .legal-body > article::after{
  content:attr(data-pc-num);
  position:absolute;
  right:20px;
  top:6px;
  color:rgba(190,216,247,.045);
  font:900 88px/1 ui-monospace,Consolas,monospace;
  letter-spacing:-.06em;
  pointer-events:none;
  user-select:none;
}

/* 지금 읽고 있는 조문 */
body.trust-legal-v310 .legal-body > article.is-pc-live{
  background:linear-gradient(120deg,rgba(95,214,245,.055),rgba(140,125,255,.03) 58%,transparent 88%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.06)!important;
}
body.trust-legal-v310 .legal-body > article.is-pc-live::before{
  transform:scale(1.55);
  border-color:var(--pc-cyan);
  box-shadow:0 0 0 4px rgba(95,214,245,.12),0 0 16px rgba(95,214,245,.5);
}
body.trust-legal-v310 .legal-body > article.is-pc-live::after{ color:rgba(120,206,240,.075); }

/* 커서를 따라 도는 빛 — 상자 테두리 없이도 '만져지는' 느낌을 준다 */
body.trust-legal-v310 .legal-body > article > .pc-glow-v3300{
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(220px 160px at var(--pc-mx,50%) var(--pc-my,50%),rgba(95,214,245,.1),transparent 70%);
  transition:opacity .3s ease;
}
body.trust-legal-v310 .legal-body > article:hover > .pc-glow-v3300{ opacity:1; }

/* 첫 조문은 크게 연다 — 위아래 순서가 뻔하지 않게 */
body.trust-legal-v310 .legal-body > article:first-of-type h2:not(#_):not(#_){
  font-size:26px!important;
  letter-spacing:-.04em!important;
}
body.trust-legal-v310 .legal-body > article:first-of-type > p:first-of-type:not(#_):not(#_){
  color:#cddcef!important;
  font-size:15px!important;
  line-height:1.95!important;
}

body.trust-legal-v310 .legal-body > article h2:not(#_):not(#_){
  position:relative;
  z-index:1;
  margin:0 0 14px!important;
  color:#f0f5fd!important;
}

/* ── 5) 처음 보일 때 떠오른다 ──────────────────────────────── */
body.trust-legal-v310 .pc-rise-v3300{
  opacity:0;
  transform:translateY(16px);
}
body.trust-legal-v310 .pc-rise-v3300.is-pc-in{
  opacity:1;
  transform:none;
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1);
}

/* ── 6) 옆 색인 : 지금 조문에 불이 들어온다 ───────────────── */
body.trust-legal-v310 .trust-policy-index-v310:not(#_):not(#_){
  border-color:var(--pc-line)!important;
  /* 따라다니는 판이라 바탕이 비치면 밑의 글자가 겹쳐 보인다. 불투명한 바닥을 깐다 */
  background:
    linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,0) 48%),
    #0a0f18!important;
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 16px 40px rgba(0,0,0,.34)!important;
}
body.trust-legal-v310 .trust-policy-index-v310 a:not(#_):not(#_){
  border-color:transparent!important;
  background:transparent!important;
  transition:color .22s ease,background .22s ease,transform .22s ease!important;
}
body.trust-legal-v310 .trust-policy-index-v310 a:hover:not(#_):not(#_){
  background:rgba(120,170,225,.09)!important;
  transform:translateX(2px)!important;
}
body.trust-legal-v310 .trust-policy-index-v310 a.is-pc-here:not(#_):not(#_){
  background:linear-gradient(96deg,rgba(95,214,245,.15),rgba(140,125,255,.07))!important;
  color:#eff7ff!important;
}
body.trust-legal-v310 .trust-policy-index-v310 a.is-pc-here > b:not(#_):not(#_){
  border-color:var(--pc-cyan)!important;
  background:rgba(95,214,245,.16)!important;
  color:#d8f4ff!important;
}

/* ── 7) 고객지원 : 질문·문의도 같은 말을 쓰게 ───────────────── */
body.support-body-v3200 .sup-faq-v3100:not(#_):not(#_){
  border-color:var(--pc-line)!important;
  background:linear-gradient(150deg,rgba(255,255,255,.035),rgba(255,255,255,.008))!important;
  transition:border-color .24s ease,background .24s ease,transform .24s ease;
}
body.support-body-v3200 .sup-faq-v3100:hover:not(#_):not(#_){
  border-color:rgba(95,214,245,.36)!important;
  transform:translateY(-1px);
}
body.support-body-v3200 .sup-faq-v3100[open]:not(#_):not(#_){
  border-color:rgba(95,214,245,.4)!important;
  background:linear-gradient(150deg,rgba(95,214,245,.075),rgba(255,255,255,.01) 60%)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.3)!important;
}
body.support-body-v3200 #sup-form:not(#_):not(#_),
body.support-body-v3200 #sup-sla:not(#_):not(#_){
  padding:28px 26px 30px!important;
  border:1px solid var(--pc-line)!important;
  border-radius:20px!important;
  background:
    linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.01) 46%),
    rgba(8,12,20,.72)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 18px 44px rgba(0,0,0,.34)!important;
}
/* 문의 칸은 상자에 담긴 게 맞으므로 척추·유령숫자를 붙이지 않는다 */
body.support-body-v3200 #sup-form::before,
body.support-body-v3200 #sup-form::after,
body.support-body-v3200 #sup-sla::before,
body.support-body-v3200 #sup-sla::after{ content:none!important; }
body.support-body-v3200 #sup-faq:not(#_):not(#_){ padding-left:26px!important; }

/* ── 8) 움직임을 싫어하는 설정이면 전부 끈다 ───────────────── */
@media (prefers-reduced-motion:reduce){
  body.trust-legal-v310 .pc-rise-v3300{ opacity:1!important; transform:none!important; }
  body.trust-legal-v310 .legal-body::after,
  .pc-progress-v3300 > i{ transition:none!important; }
  body.trust-legal-v310 .legal-body > article,
  body.trust-legal-v310 .legal-body > article::before,
  body.trust-legal-v310 .trust-policy-index-v310 a,
  body.support-body-v3200 .sup-faq-v3100{ transition:none!important; }
  body.trust-legal-v310 .legal-body > article > .pc-glow-v3300{ display:none!important; }
}

/* ── 9) 좁은 화면 ─────────────────────────────────────────── */
@media (max-width:1179px){
  body.trust-legal-v310 .legal-body:not(#_):not(#_){ padding-left:26px!important; }
  body.trust-legal-v310 .legal-body > article:not(#_):not(#_){ padding:24px 18px 26px 18px!important; }
  body.trust-legal-v310 .legal-body > article::before{ left:-25px; top:32px; }
  body.trust-legal-v310 .legal-body > article::after{ font-size:64px; right:12px; }
  body.trust-legal-v310 .legal-page .page-hero:not(#_):not(#_){ padding:38px 26px 34px!important; border-radius:22px!important; }
}
@media (max-width:700px){
  body.trust-legal-v310 .legal-body > article::after{ font-size:52px; opacity:.75; }
  body.trust-legal-v310 .legal-page .page-hero:not(#_):not(#_){ padding:30px 20px 28px!important; }
}

/* ── 10) '안전 이용' 안내창 ──────────────────────────────────
   창이 화면 밖으로 밀려 잘려 있었다. 원인은 이름 충돌이었다 —
   `trust-guide-open-v310` 을 단추 클래스와 body 상태 클래스로
   함께 써서, 창이 열린 동안 body 가 단추의 `:hover{transform}`
   규칙에 걸렸다. body 에 transform 이 붙으면 그 안의
   `position:fixed` 가 화면이 아니라 문서를 기준으로 잡혀
   창이 문서 한가운데(화면 밖)로 가 버린다.
   단추 규칙을 `button.` 으로 못 박아 해결했다(원본 CSS 수정).

   여기서는 남은 균형만 잡는다. */
.trust-guide-dialog-v310:not(#_):not(#_){
  border-radius:22px!important;
}
.trust-guide-body-v310:not(#_):not(#_){
  gap:12px!important;
  align-items:stretch!important;
}
.trust-guide-body-v310 > article:not(#_):not(#_){
  align-items:start!important;
  height:100%!important;
}
/* 두 단추의 무게를 맞춘다 — 한쪽만 커다란 띠였다.
   바닥은 flex 가 아니라 `190px 560px` 격자라 `flex:1` 이 먹지 않았다. */
.trust-guide-dialog-v310 > footer:not(#_):not(#_){
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)!important;
  gap:10px!important;
}
.trust-guide-dialog-v310 > footer > button:not(#_):not(#_),
.trust-guide-dialog-v310 > footer > a:not(#_):not(#_){
  flex:1 1 0!important;
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* 2026-09-04 모바일 실측 — 「ARIFE 서비스 이용약관」 제목이 '약/관'으로 한 글자만 꺾였다.
   한국어 제목은 어절 단위로만 줄을 바꾼다. */
body.trust-legal-v310 .legal-page .page-hero h1:not(#_):not(#_){ word-break:keep-all; overflow-wrap:anywhere; }
@media (max-width:420px){
  body.trust-legal-v310 .legal-page .page-hero h1:not(#_):not(#_){ font-size:28px!important; }
}