/* ============================================================
   ARIFE 요금 화면 v1320

   실측으로 잡은 것 (2026-08-07)
     ① 창 너비 981~1180px 에서 플랜 셋이 2+1 로 깨진다.
        body.pricing-page .pricing-cards 가 그 구간에서 '1fr 1fr' 이라,
        맥스 혼자 아래 줄에 전폭으로 눕는다. 요금표는 셋을 나란히 놓고
        견주라고 있는 것인데, 하나만 크게 누우면 비교가 안 된다.
     ② 스탠다드 카드에만 머리말(추천 플랜 / 집중 제작)이 없어
        제목 높이가 옆 카드와 어긋난다.
     ③ 히어로 오른쪽 판 셋이 빈 상자로 보인다. 원래 장식인데
        밝은 바탕에서는 '내용이 안 들어온 자리' 처럼 읽힌다.
     ④ 맨 아래 '크레딧만 충전' 은 접힌 서랍이라 닫혀 있을 때 값이
        하나도 안 보인다. 열어 보기 전에는 빈 카드로 보인다.
     ⑤ 그 옆 안심 문구 셋이 1+2 로 접혀 줄이 어긋난다.

   원칙: 값과 문구는 건드리지 않는다. 자리와 결만 바로잡는다.
   ============================================================ */

/* ── ① 플랜 셋은 끝까지 나란히 ─────────────────────────
   860px 아래로 내려가면 그때 한 줄씩 쌓는다. 그 사이에서는
   좁아지더라도 셋이 함께 보이는 편이 견주기에 낫다. */
@media(min-width:861px){
  html body.pricing-page:not(#nope):not(#_) .pricing-cards{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  /* 칸을 셋으로 되돌려도 맥스에 grid-column:1/-1 이 따로 걸려 있어
     혼자 전폭으로 누웠다(실측). 그것까지 풀어야 셋이 나란히 선다. */
  html body.pricing-page:not(#nope):not(#_) .pricing-card.max{
    grid-column:auto!important;
  }
}
@media(max-width:860px){
  html body.pricing-page:not(#nope):not(#_) .pricing-cards{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* ── ② 카드 머리 줄 맞추기 ─────────────────────────────
   스탠다드에만 머리말이 없어 제목이 혼자 위로 올라가 있었다.
   HTML 을 고치지 않고 같은 자리에 같은 크기의 말을 넣어 준다. */
html body.pricing-page:not(#nope):not(#_) .pricing-card.standard .pricing-card-head > div::before{
  content:"기본 플랜";
  display:block;
  color:#2f6ec9;
  font:850 11px/1 ui-monospace,Consolas,monospace;
  letter-spacing:.17em;
}
html body.pricing-page:not(#nope):not(#_) .pricing-card-head small{
  color:#2f6ec9!important;
}
/* 다크 — 진파랑 #2f6ec9 가 판(46,49,52) 위에서 2.6:1 이라 흐렸다. 세 카드 머리말을 같은 밝은 파랑으로. */
html[data-theme="dark"] body.pricing-page:not(#nope):not(#_):not(#__) .pricing-card.standard .pricing-card-head > div::before,
html[data-theme="dark"] body.pricing-page:not(#nope):not(#_):not(#__) .pricing-card-head small{
  color:#8fb8ff!important;
}
/* 카드마다 '/월' 이 값 아래로 처져 있었다. 값에 붙여 쓴다. */
html body.pricing-page:not(#nope):not(#_) .pricing-price{
  display:flex!important;
  align-items:baseline!important;
  gap:6px!important;
  flex-wrap:wrap;
}
html body.pricing-page:not(#nope):not(#_) .pricing-price [data-plan-period]{
  align-self:baseline!important;
  color:#4a6380!important;
  font-size:13px!important;
}

/* ── ③ 히어로 오른쪽 판 — 빈 상자에서 '무엇이 다른가' 로 ──
   원래 장식이지만, 이왕 자리를 차지한다면 플랜이 무엇으로
   갈리는지 한눈에 알려 주는 편이 낫다. 말은 이미 들어 있다. */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-hero-visual span{
  min-height:0!important;
  display:flex!important;
  flex-direction:row!important;   /* 원본이 column 이라 표식이 글자 위로 올라갔다 */
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  padding:15px 17px!important;
  border:0!important;
  border-radius:18px!important;
  background:radial-gradient(96% 60% at 50% 2%,#fff,rgba(255,255,255,.88) 44%,rgba(240,246,255,.8))!important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 12px 22px -16px rgba(20,45,90,.55)!important;
  text-align:left!important;
}
/* 첫 칸에 grid-row:span 2 와 rotateY(-7deg) 가 걸려 있어
   혼자 두 줄 높이로 서고 비스듬히 누워 있었다(실측 244px 대 117px).
   셋은 같은 무게의 갈림길이므로 나란히 세운다. */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-hero-visual span:first-child{
  grid-row:auto!important;
  background:radial-gradient(96% 60% at 50% 2%,#fff,rgba(255,255,255,.88) 44%,rgba(240,246,255,.8))!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-hero-visual span{
  transform:none!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-hero-visual span b{
  margin:0!important;
  color:#16324f!important;
  font-size:12.5px!important;
  font-weight:800!important;
  line-height:1.4!important;
  letter-spacing:-.01em!important;
}
/* 앞에 작은 표식을 하나 둬서 '항목'임이 보이게 한다 */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-hero-visual span::before{
  content:"";
  width:8px;height:8px;flex:none;
  border-radius:50%;
  background:linear-gradient(180deg,#5b9bec,#2f6ec9);
}
/* 셋 중 하나가 두 칸을 쓰면 '큰 것 하나 + 작은 것 둘' 로 읽힌다.
   셋은 동등한 갈림길이므로 같은 크기로 세운다.
   그리고 이 상자 자체에도 유리판이 깔려 있어, 판 안에 판이 든
   '액자 속 액자' 가 됐다(실측 390×245 안에 106×107 세 개).
   바깥 판을 지우고 안쪽 셋이 자리를 다 쓰게 한다. */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-hero-visual{
  /* 310px 자리에 셋을 옆으로 세우면 한 칸이 97px 이라 '1080p · 4K 생성'
     같은 말이 석 줄로 쪼개진다. 위아래로 쌓으면 한 줄에 다 들어간다.
     원래도 '무엇으로 갈리는가' 를 늘어놓는 자리라 목록이 더 맞다. */
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-rows:auto!important;
  gap:9px!important;
  align-content:center!important;
  align-self:center!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* 글 칸이 561px 밖에 안 돼 82px 제목이 넉 줄로 쪼개졌다.
   읽는 쪽에 자리를 더 주고, 제목도 한 뼘 줄인다. */
html body.pricing-page:not(#nope):not(#_) .pricing-hero{
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr)!important;
  align-items:center!important;
}
html body.pricing-page:not(#nope):not(#_) .pricing-hero h1{
  max-width:none!important;
  font-size:clamp(38px,4.6vw,64px)!important;
  line-height:1.06!important;
  text-wrap:balance;
  word-break:keep-all;
}

/* ── ④ '크레딧만 충전' — 닫혀 있어도 값이 보이게 ────────
   접힌 서랍이라 닫아 두면 카드가 텅 빈다. 무엇을 얼마에 파는지
   한 줄로 미리 알려 주고, 열고 닫는 것임을 손이 알게 한다. */
html body.pricing-page:not(#nope):not(#_) .pricing-topup summary > span::after{
  content:" · 500 / 900 / 1,300 크레딧";   /* 2026-08-28 충전 상품 개편 값. 예전 1,500/3,000 이 남아 있었다 */
  color:#4a6380;
}
html[data-theme="dark"] body.pricing-page:not(#nope):not(#_) .pricing-topup summary > span::after{ color:#aab8c9; }
html body.pricing-page:not(#nope):not(#_) .pricing-topup summary i{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.86)!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.6)!important;
  color:#2f6ec9!important;
  font-style:normal;
  transition:transform .18s;
}
html body.pricing-page:not(#nope):not(#_) .pricing-topup[open] summary i{
  transform:rotate(45deg);
}

/* ── ⑤ 안심 문구 셋을 한 줄로 ──────────────────────────*/
html body.pricing-page:not(#nope):not(#_) .pricing-assurance{
  display:flex!important;
  align-items:center!important;
  justify-content:space-around!important;
  gap:14px!important;
  flex-wrap:wrap!important;
}
html body.pricing-page:not(#nope):not(#_) .pricing-assurance span{
  flex:0 1 auto!important;
  white-space:nowrap;
}
html body.pricing-page:not(#nope):not(#_) .pricing-assurance i{
  background:linear-gradient(180deg,rgba(219,233,252,.98),rgba(196,220,250,.94))!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.6)!important;
  color:#2f6ec9!important;
}

/* ── 붙박이 메뉴에 제목이 가리지 않게 ──────────────────
   '#plans' 같은 자리로 뛰면 제목이 메뉴 뒤로 들어가 무엇을
   눌렀는지 알 수 없었다. */
html body.pricing-page:not(#nope):not(#_) :is(#plans,#credit-topup,.pricing-fit,.pricing-credit-guide-v321){
  scroll-margin-top:96px;
}

@media(max-width:980px){
  /* 원본은 이 구간에서 히어로 판을 통째로 감췄다.
     이제 읽을 거리가 생겼으니 아래로 내려 보여 준다. */
  html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-hero-visual{display:grid!important}
}
@media(max-width:620px){
  html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-hero-visual{
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body.pricing-page:not(#nope):not(#_) .pricing-assurance{
    justify-content:flex-start!important;
  }
}

/* ============================================================
   v1330 — 누르는 것들이 손에 반응하게 (2026-08-22 사장님 지시)
     "선택했으면 빛이 나거나, 마우스를 올리거나 클릭할 때
      뭔가 반응해 줘야 한다" — 요금 화면의 모든 손잡이에
      ① 올리면 뜨고 ② 누르면 눌리고 ③ 골랐으면 빛나는 셋을 준다.
   ============================================================ */

/* ── 월간 / 연간 갈림 단추 ───────────────────────────── */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-cycle button{
  transition:transform .16s cubic-bezier(.4,0,.2,1),box-shadow .16s,background .16s,color .16s!important;
  /* 이 단추는 flex 인데 가운데로 모으라는 말이 없어 글이 왼쪽에 붙어 있었다.
     (text-align 은 flex 통 안에서는 아무 일도 하지 않는다 — 실측으로 걸렸다.) */
  justify-content:center!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-cycle button:not(.active):hover{
  background:rgba(255,255,255,.8)!important;
  color:#16324f!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.65),0 6px 12px -8px rgba(20,45,90,.4)!important;
  transform:translateY(-1px);
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-cycle button:active{
  transform:translateY(1px) scale(.985);
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-cycle button.active{
  background:
    radial-gradient(92% 58% at 50% 4%,rgba(255,255,255,.85),rgba(234,241,250,.38) 36%,rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(112,168,244,.95),rgba(28,86,190,.97) 82%,rgba(64,124,214,.97))!important;
  color:#fff!important;
  box-shadow:
    inset 0 2px 1px -1px rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 3px 4px -2px rgba(12,40,96,.4),
    0 10px 18px -9px rgba(12,40,96,.55),
    0 0 0 3px rgba(91,155,236,.28)!important;   /* 골랐다는 빛 테 */
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-cycle button.active em{
  background:rgba(255,255,255,.22)!important;
  color:#fff!important;
}

/* ── 플랜 카드 — 올리면 뜨고, 추천이 정해지면 빛난다 ──── */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-card{
  transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s,outline-color .22s!important;
  outline:2px solid rgba(91,155,236,0);
  outline-offset:2px;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-card:hover{
  transform:translateY(-7px)!important;
  box-shadow:
    inset 0 1.5px 1px -1px rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(160,196,244,.66),
    0 24px 44px -22px rgba(20,45,90,.55),
    0 12px 22px -14px rgba(72,136,230,.5)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-card.is-fit{
  outline-color:rgba(47,110,201,.85);
  box-shadow:
    inset 0 1.5px 1px -1px rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(160,196,244,.66),
    0 0 0 6px rgba(91,155,236,.18),
    0 24px 44px -20px rgba(28,86,190,.5)!important;
  transform:translateY(-5px);
}

/* ── '어떤 플랜이 맞나요' 알갱이 단추 ─────────────────── */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-fit nav button{
  transition:transform .16s cubic-bezier(.4,0,.2,1),box-shadow .16s,background .16s,color .16s!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-fit nav button:not(.active):hover{
  color:#16324f!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.7),0 8px 14px -9px rgba(20,45,90,.5)!important;
  transform:translateY(-2px);
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-fit nav button:active{
  transform:translateY(1px) scale(.985);
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-fit nav button.active{
  background:
    radial-gradient(92% 58% at 50% 4%,rgba(255,255,255,.85),rgba(234,241,250,.38) 36%,rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(112,168,244,.95),rgba(28,86,190,.97) 82%,rgba(64,124,214,.97))!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:
    inset 0 2px 1px -1px rgba(255,255,255,.85),
    0 3px 4px -2px rgba(12,40,96,.4),
    0 0 0 3px rgba(91,155,236,.26)!important;
}

/* ── 카드 안 '시작' 단추 — 올리면 밝아지고 누르면 눌린다 ── */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-card-cta{
  transition:transform .16s cubic-bezier(.4,0,.2,1),box-shadow .16s,filter .16s!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-card-cta:hover{
  transform:translateY(-2px)!important;
  filter:brightness(1.06);
  box-shadow:
    inset 0 2px 1px -1px rgba(255,255,255,.85),
    0 14px 26px -12px rgba(12,40,96,.6),
    0 0 0 3px rgba(91,155,236,.22)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .pricing-card-cta:active{
  transform:translateY(1px)!important;
  filter:brightness(.97);
}
/* 키보드로 다녀도 어디에 있는지 보이게 */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) :is(.pricing-card-cta,.pricing-cycle button,.pricing-fit nav button):focus-visible{
  outline:2px solid #2f6ec9!important;
  outline-offset:2px!important;
}

/* ============================================================
   v1340 — 플랜 확인 창을 밝은 유리로 (2026-08-23 사장님 지시)
     '프로 시작'을 누르면 뜨는 확인 창(plan-review-v308)이 어두운
     시절 남색 판 그대로였다. 로그인·요금 화면과 같은 결로 맞춘다.
   ============================================================ */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-backdrop-v308{
  background:rgba(16,32,54,.5)!important;
  backdrop-filter:blur(10px) saturate(1.05)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.05)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-dialog-v308{
  border:1px solid rgba(160,196,244,.65)!important;
  background:
    radial-gradient(96% 60% at 50% 0%,#fff,rgba(244,248,254,.94) 44%,rgba(228,238,250,.92))!important;
  box-shadow:inset 0 1.5px 1px -1px #fff,0 30px 70px -30px rgba(20,45,90,.55)!important;
  color:#16324f!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-dialog-v308>header{
  border-bottom:1px solid rgba(160,196,244,.45)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-dialog-v308>header small{color:#2f6ec9!important}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-dialog-v308 h2{color:#14202e!important}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-close-v308{
  border:1px solid rgba(150,180,225,.6)!important;
  background:linear-gradient(180deg,#fff,rgba(233,240,250,.9))!important;
  box-shadow:0 6px 12px -8px rgba(20,45,90,.5)!important;
}
/* X 막대 두 개를 여기서 처음부터 다시 그린다 — 유리판 시트가 ::before 를
   제 광택으로 빼앗아 가 한 줄만 남고, 남은 자리가 검은 점으로 보였다(실측). */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-close-v308:before,
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-close-v308:after{
  content:""!important;
  position:absolute!important;
  inset:auto!important;
  left:50%!important;top:50%!important;
  width:15px!important;height:2px!important;
  border-radius:2px!important;
  margin:0!important;padding:0!important;
  background:#22334a!important;
  box-shadow:none!important;
  transform:translate(-50%,-50%) rotate(45deg)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-close-v308:after{
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-plan-v308{
  border:1px solid rgba(140,170,215,.5)!important;
  background:rgba(255,255,255,.72)!important;
}
/* 플랜 머리글자 칸 — 회사 파랑 물방울 */
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-core-v308{
  border:0!important;
  background:
    radial-gradient(92% 58% at 50% 4%,rgba(255,255,255,.85),rgba(234,241,250,.38) 36%,rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(112,168,244,.95),rgba(28,86,190,.97) 82%,rgba(64,124,214,.97))!important;
  color:#fff!important;
  box-shadow:inset 0 2px 1px -1px rgba(255,255,255,.85),0 3px 4px -2px rgba(12,40,96,.4)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-plan-v308 small{color:#2f6ec9!important}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-plan-v308 strong{color:#14202e!important}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-price-v308 b{color:#14202e!important}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-price-v308 span{color:#4a6380!important}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-credit-v308{
  border:1px solid rgba(91,155,236,.4)!important;
  background:rgba(219,233,252,.55)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-credit-v308 span{color:#4a5870!important}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-credit-v308 strong{color:#2f6ec9!important}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-rule-v308{color:#4a5870!important}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-rule-v308 i{
  border:1px solid rgba(91,155,236,.5)!important;
  background:rgba(219,233,252,.8)!important;
  color:#2f6ec9!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-dialog-v308>footer{
  border-top:1px solid rgba(160,196,244,.45)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-dialog-v308>footer button{
  border:1px solid rgba(150,180,225,.55)!important;
  background:linear-gradient(180deg,#fff,rgba(233,240,250,.9))!important;
  color:#22334a!important;
  box-shadow:0 6px 12px -8px rgba(20,45,90,.45)!important;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-dialog-v308>footer a{
  border:0!important;
  background:
    radial-gradient(92% 58% at 50% 4%,rgba(255,255,255,.85),rgba(234,241,250,.38) 36%,rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(112,168,244,.95),rgba(28,86,190,.97) 82%,rgba(64,124,214,.97))!important;
  color:#fff!important;
  box-shadow:inset 0 2px 1px -1px rgba(255,255,255,.85),0 10px 18px -9px rgba(12,40,96,.55)!important;
  transition:transform .16s,filter .16s;
}
html body.pricing-page:not(#nope):not(#_):not(#__):not(#___) .plan-review-dialog-v308>footer a:hover{
  transform:translateY(-2px);filter:brightness(1.06);
}

/* 2026-09-05 — 카드 아무 데나 눌러 플랜을 고를 수 있다. 손이 알게 커서를 바꾸고, 키보드 초점 테를 준다. */
html body.pricing-page:not(#nope):not(#_) .pricing-card.pricing-card-pick-v370{cursor:pointer}
html body.pricing-page:not(#nope):not(#_) .pricing-card.pricing-card-pick-v370 :is(a,button,summary){cursor:pointer}
html body.pricing-page:not(#nope):not(#_) .pricing-card.pricing-card-pick-v370:focus-visible{outline:2px solid #3d78e4!important;outline-offset:3px}