/* ═══════════════════════════════════════════════════════════
   nocappov — 회원 등급 이펙트 강화 + 등급 사다리 (2026-08-27)

   적용   /var/www/nocappov/ 에 업로드 후 nocappov_mypage.html 의
          </head> 앞에  <link rel="stylesheet" href="/nocappov_tiers.css">
          </body> 앞에  <script src="/nocappov_tiers.js" defer></script>
   롤백   그 두 줄만 지우면 끝. 원본 마크업은 건드리지 않는다.

   설계   위 등급은 아래 등급의 효과를 전부 가진 채 하나씩 더한다.
          나란히 놓으면 계단이 눈에 보이게.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&display=swap');

:root{
  --ncpt-gold:#F2B33D;
  --ncpt-gold-lt:#FFE7A8;
  --ncpt-cyan:#2FE8D0;
  --ncpt-pink:#FF4D8D;
  --ncpt-purple:#A98CF2;
  --ncpt-red:#FF5B72;
  --ncpt-blue:#38BDF8;
  --ncpt-up:#2BE38A;
  --ncpt-d:"Chakra Petch",system-ui,sans-serif;
}

@property --ncptAngle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes ncptSpin{ to{ --ncptAngle:360deg; } }
@keyframes ncptSpinT{ to{ transform:rotate(360deg); } }
@keyframes ncptSheen{ 0%{ transform:translateX(-140%); } 55%,100%{ transform:translateX(140%); } }
@keyframes ncptRise{ 0%{opacity:0;transform:translateY(10px) scale(.5);} 25%{opacity:.95;} 100%{opacity:0;transform:translateY(-24px) scale(1);} }
@keyframes ncptPrism{ to{ background-position:250% 0; } }
@keyframes ncptHolo{ to{ background-position:240px 0; } }


/* ───────── 1. 프로필 카드 — 등급별 효과 누적 ───────── */

/* LV4 이상: 카드 위를 훑고 지나가는 빛 */
.profile-card.tier-founder::after,
.profile-card.tier-founder-elite::after,
.profile-card.tier-founder-legacy::after,
.profile-card.tier-founder-genesis::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.15) 47%, transparent 60%);
  transform:translateX(-140%);
  animation:ncptSheen 5s ease-in-out infinite;
}

/* LV5 ELITE: 회전 테두리 */
.profile-card.tier-founder-elite{ border-color:transparent !important; }
.profile-card.tier-founder-elite::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:0;
  background:conic-gradient(from var(--ncptAngle), var(--ncpt-gold), #FFF3D6, var(--ncpt-cyan), var(--ncpt-gold));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ncptSpin 4.5s linear infinite;
}

/* LV6 LEGACY: 회전 테두리 + 각인 텍스처 */
.profile-card.tier-founder-legacy{
  border-color:transparent !important;
  background:
    repeating-linear-gradient(62deg, rgba(255,255,255,0.028) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, rgba(242,179,61,0.16), rgba(255,77,141,0.05), var(--ink-2)) !important;
}
.profile-card.tier-founder-legacy::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:0;
  background:conic-gradient(from var(--ncptAngle), var(--ncpt-gold), #FFF3D6, var(--ncpt-pink), var(--ncpt-gold));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ncptSpin 3.6s linear infinite;
}

/* LV7 GENESIS: 프리즘 테두리 + 홀로그램 + 최대 발광 */
.profile-card.tier-founder-genesis{
  background:
    repeating-linear-gradient(118deg, transparent 0 8px, rgba(255,255,255,0.05) 8px 10px, transparent 10px 20px),
    repeating-linear-gradient(62deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, rgba(124,247,255,0.12), rgba(242,179,61,0.16), var(--ink-2)) !important;
  background-size:240px 100%, auto, auto !important;
  animation:ncptHolo 6s linear infinite;
  box-shadow:0 0 46px -2px rgba(242,179,61,0.8), 0 0 70px -10px rgba(124,247,255,0.5) !important;
}
.profile-card.tier-founder-genesis::before{
  background:conic-gradient(from var(--ncptAngle),
    #7CF7FF, #FFFFFF 14%, var(--ncpt-gold) 34%, var(--ncpt-pink) 58%, #7CF7FF 82%, #FFFFFF);
  animation:ncptSpin 2.8s linear infinite;
}

/* 등급 이름 — GENESIS 만 무지개로 흐른다 */
.profile-card.tier-founder-genesis .tb-label{
  background:linear-gradient(92deg, #7CF7FF, #FFFFFF 26%, var(--ncpt-gold) 52%, var(--ncpt-pink) 76%, #7CF7FF);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:ncptPrism 5s linear infinite;
}

/* 등급 배지 육각형 — 위로 갈수록 강해진다 */
.profile-card.tier-founder .tier-hex{ box-shadow:0 0 16px rgba(242,179,61,0.55); }
.profile-card.tier-founder-elite .tier-hex{ box-shadow:0 0 20px rgba(242,179,61,0.7), 0 0 34px -6px var(--ncpt-cyan); }
.profile-card.tier-founder-legacy .tier-hex{ box-shadow:0 0 24px rgba(242,179,61,0.8), 0 0 38px -6px var(--ncpt-pink); }
.profile-card.tier-founder-genesis .tier-hex{
  box-shadow:0 0 28px rgba(124,247,255,0.8), 0 0 46px -4px var(--ncpt-pink);
  animation:ncptSpinT 14s linear infinite;
}


/* ───────── 2. 등급 사다리 ───────── */

.ncpt-ladder{margin:0 0 12px;}
.ncpt-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:2px 2px 9px;
}
.ncpt-head h2{
  margin:0;font-family:var(--ncpt-d);font-size:13px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);
}
.ncpt-head span{font-size:11.5px;color:var(--text-faint);font-weight:600;}

.ncpt-list{display:flex;flex-direction:column;gap:8px;}

.ncpt-row{
  position:relative;padding:1px;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,0.09);
  --t1:#38BDF8; --t2:#0EA5E9;
}
.ncpt-in{
  position:relative;z-index:2;display:flex;align-items:center;gap:12px;
  padding:11px 13px;border-radius:13px;
  background:linear-gradient(160deg, rgba(19,28,51,0.96), rgba(12,17,28,0.96));
}
.ncpt-row .ncpt-ring,
.ncpt-row .ncpt-sheen,
.ncpt-row .ncpt-spark{display:none;}

.ncpt-hex{
  position:relative;width:36px;height:36px;flex-shrink:0;
  display:grid;place-items:center;font-size:15px;
  clip-path:polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background:rgba(255,255,255,0.05);
}
.ncpt-txt{flex:1;min-width:0;}
.ncpt-rank{font-family:var(--ncpt-d);font-size:9.5px;letter-spacing:.14em;color:var(--text-faint);}
.ncpt-name{
  font-family:var(--ncpt-d);font-size:13.5px;font-weight:700;letter-spacing:.08em;
  line-height:1.25;color:var(--t1);
}
.ncpt-perk{font-size:11.5px;color:var(--text-faint);line-height:1.45;margin-top:1px;}
.ncpt-state{
  flex-shrink:0;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  padding:4px 8px;border-radius:8px;
  border:1px solid var(--border);color:var(--text-faint);
}
.ncpt-state.have{color:var(--ncpt-up);border-color:rgba(43,227,138,0.4);background:rgba(43,227,138,0.09);}
.ncpt-state.now{color:#1A1206;background:var(--ncpt-gold);border-color:var(--ncpt-gold);}

/* 색 토큰 */
.ncpt-row.lv1{--t1:#38BDF8;--t2:#0EA5E9;}
.ncpt-row.lv2{--t1:#FF5B72;--t2:#B01234;}
.ncpt-row.lv3{--t1:#A98CF2;--t2:#6D28D9;}
.ncpt-row.lv4{--t1:#F2B33D;--t2:#8A5406;}
.ncpt-row.lv5{--t1:#FFD24A;--t2:#2FE8D0;}
.ncpt-row.lv6{--t1:#F2B33D;--t2:#FF4D8D;}
.ncpt-row.lv7{--t1:#7CF7FF;--t2:#FF4D8D;}

/* LV1 무광 */
.ncpt-row.lv1{background:rgba(56,189,248,0.3);}
.ncpt-row.lv1 .ncpt-hex{background:rgba(56,189,248,0.08);box-shadow:inset 0 0 0 1px rgba(56,189,248,0.3);}

/* LV2 + 발광 */
.ncpt-row.lv2{background:linear-gradient(150deg,var(--t1),rgba(255,255,255,.08) 60%);filter:drop-shadow(0 0 9px rgba(255,91,114,0.22));}
.ncpt-row.lv2 .ncpt-hex{background:rgba(255,91,114,0.1);box-shadow:inset 0 0 0 1px rgba(255,91,114,0.38);}

/* LV3 + 오라 */
.ncpt-row.lv3{background:linear-gradient(150deg,var(--t1),rgba(255,255,255,.08) 60%);filter:drop-shadow(0 0 14px rgba(169,140,242,0.3));}
.ncpt-row.lv3 .ncpt-in{background:radial-gradient(120% 150% at 12% 50%, rgba(169,140,242,0.18), transparent 58%),linear-gradient(160deg, rgba(19,28,51,0.96), rgba(12,17,28,0.96));}
.ncpt-row.lv3 .ncpt-hex{background:rgba(169,140,242,0.14);box-shadow:inset 0 0 0 1px rgba(169,140,242,0.48), 0 0 14px rgba(169,140,242,0.32);}

/* LV4 + 셔머 */
.ncpt-row.lv4{background:linear-gradient(150deg,var(--t1),rgba(255,255,255,.08) 60%);filter:drop-shadow(0 0 16px rgba(242,179,61,0.32));}
.ncpt-row.lv4 .ncpt-in{background:radial-gradient(120% 150% at 12% 50%, rgba(242,179,61,0.18), transparent 58%),linear-gradient(160deg, rgba(26,26,34,0.96), rgba(12,17,28,0.96));}
.ncpt-row.lv4 .ncpt-hex{background:linear-gradient(150deg,rgba(242,179,61,0.34),rgba(242,179,61,0.07));box-shadow:inset 0 0 0 1px rgba(242,179,61,0.58), 0 0 16px rgba(242,179,61,0.38);}
.ncpt-row.lv4 .ncpt-sheen,
.ncpt-row.lv5 .ncpt-sheen,
.ncpt-row.lv6 .ncpt-sheen,
.ncpt-row.lv7 .ncpt-sheen{
  display:block;position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:14px;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.17) 47%, transparent 60%);
  transform:translateX(-140%);animation:ncptSheen 5s ease-in-out infinite;
}

/* LV5 + 회전 테두리 */
.ncpt-row.lv5 .ncpt-ring,
.ncpt-row.lv6 .ncpt-ring,
.ncpt-row.lv7 .ncpt-ring{
  display:block;position:absolute;inset:-80%;z-index:1;
  background:conic-gradient(from 0deg, transparent 0 48%, var(--t1) 66%, var(--t2) 80%, transparent 92%);
  animation:ncptSpinT 6s linear infinite;
}
.ncpt-row.lv5{filter:drop-shadow(0 0 20px rgba(255,210,74,0.32));}
.ncpt-row.lv5 .ncpt-in{background:radial-gradient(120% 150% at 12% 50%, rgba(255,210,74,0.17), transparent 58%),linear-gradient(160deg, rgba(26,26,34,0.96), rgba(12,17,28,0.96));}
.ncpt-row.lv5 .ncpt-hex{background:linear-gradient(150deg,rgba(255,210,74,0.38),rgba(47,232,208,0.12));box-shadow:inset 0 0 0 1px rgba(255,210,74,0.62), 0 0 18px rgba(255,210,74,0.42);}

/* LV6 + 파티클 + 각인 */
.ncpt-row.lv6{filter:drop-shadow(0 0 24px rgba(255,77,141,0.3));}
.ncpt-row.lv6 .ncpt-ring{animation-duration:4.6s;}
.ncpt-row.lv6 .ncpt-in{
  background:
    repeating-linear-gradient(62deg, rgba(255,255,255,0.024) 0 2px, transparent 2px 8px),
    radial-gradient(130% 150% at 10% 50%, rgba(242,179,61,0.2), transparent 56%),
    linear-gradient(160deg, rgba(28,24,34,0.96), rgba(12,17,28,0.96));
}
.ncpt-row.lv6 .ncpt-hex{background:linear-gradient(150deg,rgba(242,179,61,0.42),rgba(255,77,141,0.18));box-shadow:inset 0 0 0 1px rgba(242,179,61,0.72), 0 0 22px rgba(255,77,141,0.46);}
.ncpt-row.lv6 .ncpt-spark,
.ncpt-row.lv7 .ncpt-spark{
  display:block;position:absolute;width:3px;height:3px;border-radius:50%;z-index:3;
  background:var(--t1);box-shadow:0 0 9px var(--t1);opacity:0;
  animation:ncptRise 4.2s ease-in-out infinite;
}

/* LV7 + 홀로그램 + 광선 + 프리즘 글자 */
.ncpt-row.lv7{filter:drop-shadow(0 0 28px rgba(124,247,255,0.36)) drop-shadow(0 0 18px rgba(255,77,141,0.28));}
.ncpt-row.lv7 .ncpt-ring{
  animation-duration:3.2s;
  background:conic-gradient(from 0deg, #7CF7FF, var(--ncpt-pink) 25%, var(--ncpt-gold) 50%, #7CF7FF 75%, var(--ncpt-pink));
}
.ncpt-row.lv7 .ncpt-in{
  background:
    repeating-linear-gradient(118deg, transparent 0 7px, rgba(255,255,255,0.07) 7px 9px, transparent 9px 18px),
    radial-gradient(140% 170% at 8% 50%, rgba(124,247,255,0.22), transparent 52%),
    radial-gradient(120% 150% at 92% 50%, rgba(255,77,141,0.18), transparent 55%),
    linear-gradient(160deg, rgba(20,28,43,0.96), rgba(12,17,28,0.96));
  background-size:240px 100%, auto, auto, auto;
  animation:ncptHolo 6s linear infinite;
}
.ncpt-row.lv7 .ncpt-hex{
  background:conic-gradient(from 210deg, rgba(124,247,255,0.55), rgba(255,77,141,0.45), rgba(242,179,61,0.55), rgba(124,247,255,0.55));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.55), 0 0 26px rgba(124,247,255,0.55);
}
.ncpt-row.lv7 .ncpt-hex::after{
  content:"";position:absolute;inset:-13px;z-index:-1;
  background:conic-gradient(from 0deg, transparent 0 6%, rgba(255,255,255,0.34) 8%, transparent 10% 22%, rgba(255,255,255,0.34) 24%, transparent 26% 39%, rgba(255,255,255,0.34) 41%, transparent 43% 56%, rgba(255,255,255,0.34) 58%, transparent 60% 73%, rgba(255,255,255,0.34) 75%, transparent 77% 90%, rgba(255,255,255,0.34) 92%, transparent 94%);
  -webkit-mask-image:radial-gradient(closest-side, transparent 42%, #000 58%, transparent 82%);
  mask-image:radial-gradient(closest-side, transparent 42%, #000 58%, transparent 82%);
  animation:ncptSpinT 14s linear infinite;
}
.ncpt-row.lv7 .ncpt-name{
  background:linear-gradient(92deg, #7CF7FF, #FFFFFF 26%, var(--ncpt-gold) 52%, var(--ncpt-pink) 76%, #7CF7FF);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ncptPrism 5s linear infinite;
}

/* 아직 못 가진 등급은 살짝만 죽인다 — 이펙트는 다 보여야 갖고 싶어진다 */
.ncpt-row.locked .ncpt-in{opacity:.88;}
.ncpt-row.locked .ncpt-perk{color:rgba(255,255,255,0.34);}

@media (prefers-reduced-motion:reduce){
  .profile-card::after,.profile-card::before,
  .ncpt-sheen,.ncpt-ring,.ncpt-spark,.ncpt-hex,.ncpt-name{animation:none !important;}
  .profile-card.tier-founder-genesis{animation:none !important;}
  .ncpt-row.lv7 .ncpt-name{color:var(--t1);-webkit-text-fill-color:currentColor;}
}


/* ───────── 3. 마이페이지용 한 줄 요약 ───────── */

@keyframes ncptGemPulse{
  0%,100%{ filter:drop-shadow(0 0 5px var(--pt)); }
  50%    { filter:drop-shadow(0 0 13px var(--pt)) drop-shadow(0 0 26px var(--pt)); }
}
@keyframes ncptGemShine{ 0%{ transform:translateX(-170%); } 45%,100%{ transform:translateX(170%); } }
@keyframes ncptStripSheen{ 0%{ transform:translateX(-130%); } 60%,100%{ transform:translateX(130%); } }

.ncpt-strip{
  position:relative;overflow:hidden;
  display:block;text-decoration:none;color:inherit;
  margin:0 0 10px;padding:13px 15px;border-radius:14px;
  border:1px solid var(--border);
  background:
    radial-gradient(120% 180% at 50% 120%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(160deg, rgba(19,28,51,0.92), rgba(12,17,28,0.92));
  transition:border-color .2s ease, transform .2s ease;
}
.ncpt-strip::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,0.09) 48%, transparent 60%);
  transform:translateX(-130%);
  animation:ncptStripSheen 6s ease-in-out infinite;
}
.ncpt-strip:hover{border-color:var(--cur,#F2B33D);transform:translateY(-1px);}
.ncpt-strip > *{position:relative;z-index:1;}

.ncpt-strip-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.ncpt-strip-lbl{
  font-family:var(--ncpt-d);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);
}
.ncpt-strip-cnt{font-family:var(--ncpt-d);font-size:11px;font-weight:700;color:var(--text-faint);}

/* ── 진행 표시 ── */
.ncpt-pips{display:flex;align-items:center;gap:0;margin:11px 0 10px;min-height:34px;}

.ncpt-pips i{
  flex:0 0 auto;width:14px;height:16px;
  clip-path:polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background:rgba(255,255,255,0.10);
}
.ncpt-pips i.on{
  background:linear-gradient(155deg, rgba(255,255,255,0.7), var(--pt) 55%);
  filter:drop-shadow(0 0 5px var(--pt));
}
.ncpt-pips b{flex:1;height:2px;background:rgba(255,255,255,0.08);}
.ncpt-pips b.on{background:linear-gradient(90deg, var(--pf), var(--pt));box-shadow:0 0 7px -1px var(--pt);}

/* ── 현재 위치 = 보석 ── */
.ncpt-cur{
  position:relative;flex:0 0 auto;
  width:32px;height:34px;display:grid;place-items:center;margin:0 3px;
}
.ncpt-cur .r{
  position:absolute;inset:-5px;
  background:conic-gradient(from 0deg, transparent 0 50%, var(--pt) 70%, #FFFFFF 80%, transparent 90%);
  -webkit-mask-image:radial-gradient(closest-side, transparent 54%, #000 64%, #000 88%, transparent 97%);
  mask-image:radial-gradient(closest-side, transparent 54%, #000 64%, #000 88%, transparent 97%);
  animation:ncptSpinT 3.4s linear infinite;
}
.ncpt-cur .g{
  position:relative;width:22px;height:25px;overflow:hidden;
  clip-path:polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background:linear-gradient(155deg, rgba(255,255,255,0.95) 0%, var(--pt) 42%, rgba(0,0,0,0.32) 100%);
  animation:ncptGemPulse 2.2s ease-in-out infinite;
}
.ncpt-cur .g::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.9) 50%, transparent 60%);
  transform:translateX(-170%);
  animation:ncptGemShine 3.6s ease-in-out infinite;
}

.ncpt-pips i.lv1,.ncpt-cur.lv1{--pt:#38BDF8;} .ncpt-pips i.lv2,.ncpt-cur.lv2{--pt:#FF5B72;}
.ncpt-pips i.lv3,.ncpt-cur.lv3{--pt:#A98CF2;} .ncpt-pips i.lv4,.ncpt-cur.lv4{--pt:#F2B33D;}
.ncpt-pips i.lv5,.ncpt-cur.lv5{--pt:#FFD24A;} .ncpt-pips i.lv6,.ncpt-cur.lv6{--pt:#F2B33D;}
.ncpt-pips i.lv7,.ncpt-cur.lv7{--pt:#7CF7FF;}

.ncpt-strip-bot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ncpt-strip-name{
  font-family:var(--ncpt-d);font-size:14px;font-weight:700;letter-spacing:.09em;
  color:var(--cur,#F2B33D);
  text-shadow:0 0 14px var(--cur,#F2B33D);
}
.ncpt-strip-next{font-size:11px;font-weight:600;color:var(--text-faint);}

/* 사다리 위 안내문 */
.ncpt-note{margin:0 2px 10px;font-size:11.5px;line-height:1.55;color:var(--text-faint);}
.ncpt-note b{color:var(--text-dim);font-weight:600;}

@media (prefers-reduced-motion:reduce){
  .ncpt-strip::after,.ncpt-cur .r,.ncpt-cur .g,.ncpt-cur .g::after{animation:none;}
}