/* ============================================================
   ARIFE 요금 화면 간추리기 v1330 — 옷
   짜임새는 arife-pricing-tidy-v1330.js 가 잡는다. 여기서는 그 자리만 입힌다.
   arife-pricing-v1320.css 다음에 온다(v1320 이 잡아 둔 것은 그대로 둔다).
   ============================================================ */

/* ── 히어로를 한 뼘으로 ─────────────────────────────────
   오른쪽 장식을 걷어냈으니 두 칸으로 나눌 까닭이 없다.
   445px 이던 자리를 줄여 플랜 카드를 화면 안으로 끌어올린다. */
html body.pricing-page:not(#nope):not(#_) .pricing-hero-slim-v1330{
  min-height:0!important;
  display:block!important;
  padding:34px 34px 30px!important;
}
html body.pricing-page:not(#nope):not(#_) .pricing-hero-slim-v1330 h1{
  max-width:none!important;
  font-size:clamp(32px,3.9vw,52px)!important;
  line-height:1.08!important;
  text-wrap:balance;
  word-break:keep-all;
}
html body.pricing-page:not(#nope):not(#_) .pricing-hero-slim-v1330 > div > p{
  max-width:760px!important;
  margin:14px 0 0!important;
  font-size:13.5px!important;
  line-height:1.7!important;
}

/* ── 되풀이하던 두 띠를 하나로 ──────────────────────────
   'NO MODEL LOCK' 띠에 '크레딧만 충전하기' 길을 붙였다.
   원래 격자가 세 칸(표식 · 글 · 배지)이라 넷째가 아랫줄로 떨어진다. */
html body.pricing-page:not(#nope):not(#_) .pricing-model-rule-slim-v1330{
  grid-template-columns:auto minmax(0,1fr) auto auto!important;
  gap:12px!important;
  margin-top:16px!important;
}
html body.pricing-page:not(#nope):not(#_) .pricing-model-rule-slim-v1330 small{
  color:#4a6380!important;
  font-size:11.5px!important;
  line-height:1.5!important;
}
/* 충전으로 가는 길 — 띠 안에서도 '누를 수 있는 것'으로 보여야 한다 */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-rule-link-v1330{
  display:inline-flex!important;
  align-items:center!important;
  min-height:34px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#5b9bec,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.8),0 12px 20px -14px rgba(30,80,160,.9)!important;
  color:#fff!important;
  font-size:11.5px!important;
  font-weight:800!important;
  text-decoration:none!important;
  white-space:nowrap;
}
/* 띠를 넣는 쪽이 없을 때만 쓰이는 대비책 */
html body.pricing-page:not(#nope):not(#_) .pricing-principle-inhero-v1330{
  margin:16px 0 0!important;
}

/* 플랜 자리에서 위로 붙은 여백을 줄여 카드가 더 빨리 나오게 한다 */
html body.pricing-page:not(#nope):not(#_) .pricing-tidy-v1330 #plans{
  margin-top:26px!important;
}

/* ── 접는 서랍 ──────────────────────────────────────────
   표를 지우지 않는다. 필요할 때 펼치도록 접어 둘 뿐이다.
   닫혀 있을 때도 '안에 무엇이 몇 줄 들었는지' 를 말해 준다 —
   그래야 열어 볼지 말지를 열기 전에 정한다. */
.pricing-fold-v1330{
  margin-top:16px;
  border-radius:16px;
  background:rgba(255,255,255,.5);
  box-shadow:inset 0 1.5px 1px -1px #fff,inset 0 0 0 1px rgba(160,196,244,.6);
  overflow:hidden;
}
html body.pricing-page:not(#nope):not(#_) .pricing-fold-v1330 > summary{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  min-height:60px!important;
  padding:0 16px!important;
  list-style:none;
  cursor:pointer;
}
.pricing-fold-v1330 > summary::-webkit-details-marker{display:none}
.pricing-fold-v1330 > summary > span{display:grid;gap:4px;min-width:0}
html body.pricing-page:not(#nope):not(#_) .pricing-fold-v1330 > summary strong{
  color:#16324f!important;
  font-size:13px!important;
  letter-spacing:-.01em!important;
}
html body.pricing-page:not(#nope):not(#_) .pricing-fold-v1330 > summary small{
  color:#4a6380!important;
  font-size:11.5px!important;
  line-height:1.5!important;
}
html body.pricing-page:not(#nope):not(#_) .pricing-fold-v1330 > summary i{
  width:34px;height:34px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.6);
  color:#2f6ec9!important;
  font-style:normal;
  font-size:13px;
  transition:transform .18s;
}
.pricing-fold-v1330[open] > summary i{transform:rotate(45deg)}
.pricing-fold-v1330 > summary:hover{background:rgba(255,255,255,.42)}
/* 펼친 내용은 서랍 안쪽 여백을 갖는다 */
.pricing-fold-v1330 > :not(summary){margin:0 14px 14px}
.pricing-fold-v1330 > small{display:block;margin-top:10px}
html body.pricing-page:not(#nope):not(#_) .pricing-fold-v1330 .pricing-matrix{width:100%!important}
/* 좁은 화면에서 표가 서랍 밖으로 삐져나가지 않게 */
.pricing-fold-v1330 > .persec-table-v360{display:block;max-width:100%;overflow-x:auto}

/* 표를 접었으니 감싸던 판은 얇아진다 */
html body.pricing-page:not(#nope):not(#_) .pricing-tidy-v1330 .persec-note-v360{
  margin-top:16px!important;
  padding:16px!important;
}

/* ── 충전 카드를 사이트 파랑으로 ────────────────────────
   이 화면에서 저 셋만 보라였다(실측: linear-gradient(135deg,#426fbd,#596fc9,#7465cc)).
   플랜 단추가 파랑인데 충전만 보라면, 다른 곳으로 가는 문처럼 보인다. */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .topup-grid a{
  border:0!important;
  background:linear-gradient(180deg,#5b9bec,#2f6ec9)!important;
  box-shadow:
    inset 0 1.5px 1px -1px rgba(255,255,255,.75),
    0 14px 24px -14px rgba(30,80,160,.9)!important;
  color:#fff!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .topup-grid a:hover{
  transform:translateY(-2px)!important;
  box-shadow:
    inset 0 1.5px 1px -1px rgba(255,255,255,.8),
    0 20px 30px -16px rgba(30,80,160,.95)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .topup-grid a small{
  color:rgba(255,255,255,.82)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .topup-grid a :is(strong,b){
  color:#fff!important;
}

/* ── 안심 문구 셋을 한 줄로 ─────────────────────────────
   v1320 에서 flex 로 폈는데도 1+2 로 접혔다. 까닭은 이 칸이
   '1.35fr .65fr' 격자의 좁은 쪽(약 380px)에 갇혀 있어서였다(실측).
   충전 카드와 안심 문구는 견주는 사이가 아니므로 위아래로 놓는다. */
html body.pricing-page:not(#nope):not(#_) .pricing-tidy-v1330 .pricing-extras{
  grid-template-columns:minmax(0,1fr)!important;
  gap:12px!important;
}
html body.pricing-page:not(#nope):not(#_) .pricing-tidy-v1330 .pricing-assurance{
  justify-content:center!important;
  gap:10px 30px!important;
  padding:16px!important;
}

@media(max-width:860px){
  html body.pricing-page:not(#nope):not(#_) .pricing-hero-slim-v1330{padding:26px 20px 24px!important}
  html body.pricing-page:not(#nope):not(#_) .pricing-model-rule-slim-v1330{
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-rule-link-v1330{
    grid-column:2;justify-self:start;
  }
}
@media(max-width:620px){
  html body.pricing-page:not(#nope):not(#_) .pricing-fold-v1330 > summary{padding:12px 13px!important}
  html body.pricing-page:not(#nope):not(#_) .pricing-tidy-v1330 .pricing-assurance{
    justify-content:flex-start!important;
  }
}

/* 2026-09-05 — 접는 서랍의 제목 글과 표가 판 가장자리에 너무 붙어 있었다(실측 제목 14px · 표 10px).
   숨 쉴 자리를 준다. */
html body.pricing-page:not(#nope):not(#_):not(#__) .pricing-fold-v1330 > summary{padding:16px 22px!important}
html body.pricing-page:not(#nope):not(#_):not(#__) .pricing-fold-v1330 > :not(summary){margin:2px 20px 20px!important}
html body.pricing-page:not(#nope):not(#_):not(#__) .pricing-fold-v1330 > summary + *{margin-top:2px!important}
/* 표가 width:100% 에 양옆 여백 20px 이라 오른쪽으로 40px 삐져나가 서랍(overflow:hidden)에 잘렸다 —
   왼쪽만 여백이 있고 오른쪽은 붙어 보였다. 여백만큼 빼서 좌우를 맞춘다. */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-fold-v1330 > .pricing-matrix,
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-fold-v1330 > .persec-table-v360{width:calc(100% - 40px)!important;min-width:0!important;box-sizing:border-box}