*{
  box-sizing:border-box
}

:root{
  --bg:#070a11;
  --panel:#0e1420;
  --panel2:#121a29;
  --line:#202b3e;
  --text:#f4f7ff;
  --muted:#8e9ab3;
  --accent:#ff3158;
  --blue:#5b8cff;
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:
    radial-gradient(circle at 50% -20%,#17213b 0,transparent 38%),
    var(--bg);
  color:var(--text);
  font-family:Inter,Pretendard,system-ui,-apple-system,sans-serif
}

button,
select,
input{
  font:inherit
}

button{
  cursor:pointer
}

button:disabled{
  opacity:.55;
  cursor:not-allowed
}

.hidden{
  display:none!important
}

/* 상단 */

.topbar{
  min-height:82px;
  padding:18px 4%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-bottom:1px solid var(--line);
  background:rgba(7,10,17,.88);
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(14px)
}

.brand h1{
  margin:0;
  font-size:23px
}

.brand p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px
}

.account{
  display:flex;
  align-items:center;
  gap:9px
}

.account button,
#refresh,
#proBtn{
  border:1px solid #33415b;
  border-radius:10px;
  padding:10px 14px;
  color:white;
  background:#182238
}

.account button:not(.ghost),
#refresh,
#proBtn{
  border-color:transparent;
  background:linear-gradient(135deg,#ff3158,#ff6545);
  font-weight:800
}

.ghost{
  background:transparent!important
}

.plan-badge{
  padding:5px 9px;
  border-radius:999px;
  background:#263044;
  color:#b8c4da;
  font-size:11px;
  font-weight:900;
  letter-spacing:.7px
}

.plan-badge.pro{
  background:#5936d8;
  color:#fff
}

#userName{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  color:#c8d2e5
}

/* 본문 */

main{
  width:min(1500px,94%);
  margin:0 auto
}

.hero{
  min-height:330px;
  padding:65px 15px 45px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px
}

.eyebrow{
  color:#ff5b78;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.5px
}

.hero h2{
  margin:12px 0;
  font-size:clamp(34px,5vw,62px);
  line-height:1.05;
  letter-spacing:-2px
}

.hero p,
.upgrade p{
  max-width:680px;
  color:var(--muted);
  line-height:1.7
}

.hero-stats{
  min-width:370px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:rgba(15,21,34,.8)
}

.hero-stats div{
  padding:27px 16px;
  text-align:center;
  border-right:1px solid var(--line)
}

.hero-stats div:last-child{
  border-right:0
}

.hero-stats strong{
  display:block;
  font-size:23px
}

.hero-stats span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px
}

/* 광고 자리 */

.ad-slot{
  min-height:85px;
  margin-bottom:22px;
  border:1px dashed #344057;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:#0b101a;
  color:#647089
}

.ad-slot span{
  font-size:9px;
  letter-spacing:2px
}

.ad-slot p{
  margin:5px 0 0;
  font-size:12px
}

/* 필터 */

.toolbar{
  padding:14px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--panel)
}

.controls{
  display:grid;
  grid-template-columns:
    minmax(160px,1.2fr)
    minmax(120px,.8fr)
    minmax(150px,1fr)
    minmax(120px,.7fr)
    minmax(200px,1.5fr)
    auto;
  gap:9px
}

.controls select,
.controls input{
  min-width:0;
  padding:12px 13px;
  border:1px solid #2a354b;
  border-radius:9px;
  outline:none;
  background:#111827;
  color:#fff
}

.controls select:focus,
.controls input:focus,
.auth-field:focus{
  border-color:#668cff;
  box-shadow:0 0 0 3px rgba(102,140,255,.12)
}

#status{
  margin:14px 0;
  padding:11px 14px;
  border:1px solid #192336;
  border-radius:9px;
  background:#0c121d;
  color:#8d9bb5;
  font-size:13px
}
}

/* 영상 / 채널 랭킹 전환 탭 */
.ranking-tabs{
  display:flex;
  gap:10px;
  margin:22px 0 8px;
}

.ranking-tab{
  padding:11px 18px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0b1019;
  color:var(--muted);
  font-weight:700;
  cursor:pointer;
  transition:.15s ease;
}

.ranking-tab:hover{
  border-color:#4b5870;
  color:#fff;
}

.ranking-tab.active{
  background:#ff4655;
  border-color:#ff4655;
  color:#fff;
}


.ranking-head{
  margin:27px 0 8px;
  display:flex;
  justify-content:space-between;
  align-items:end
}

.ranking-head h3{
  margin:0;
  font-size:21px
}

.ranking-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px
}

/* 랭킹 */

#list{
  border:1px solid var(--line);
  border-radius:15px;
  overflow:hidden;
  background:#0b1019
}

.card{
  display:grid;
  grid-template-columns:
    55px
    155px
    minmax(220px,1fr)
    repeat(6,minmax(80px,105px));
  gap:12px;
  align-items:center;
  padding:12px;
  border-bottom:1px solid #1b2433;
  transition:.15s ease
}

.card:last-child{
  border-bottom:0
}

.card:hover{
  background:#101827
}

.rank{
  text-align:center;
  font-size:20px;
  font-weight:900;
  color:#dce5f7
}

.thumb-link{
  display:block
}

.thumb{
  display:block;
  width:155px;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:8px;
  background:#151d2b
}

.video-info{
  min-width:0
}

.title{
  display:block;
  color:#f5f7fc;
  text-decoration:none;
  font-weight:750;
  line-height:1.4;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical
}

.title:hover{
  color:#8faaff
}

.sub,
.muted{
  color:var(--muted);
  font-size:12px
}

.sub{
  margin-top:7px
}

.num{
  text-align:right;
  font-variant-numeric:tabular-nums
}

.num span{
  display:block;
  margin-bottom:5px
}

.num strong{
  font-size:14px
}

.hot{
  color:#ff5571
}

.empty{
  padding:60px 20px;
  text-align:center;
  color:var(--muted)
}

/* PRO */

.upgrade{
  margin:35px 0 70px;
  padding:32px;
  border:1px solid #332c56;
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(83,53,182,.18),rgba(255,49,88,.08));
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px
}

.upgrade h2{
  margin:8px 0;
  font-size:25px
}

#proBtn{
  white-space:nowrap
}

/* 로그인 */

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(7px)
}

.modal-card{
  position:relative;
  width:min(430px,100%);
  padding:30px;
  border:1px solid #2c3850;
  border-radius:18px;
  background:#101724;
  box-shadow:0 30px 90px rgba(0,0,0,.55)
}

.modal-card h2{
  margin:0 0 6px
}

.modal-desc{
  margin:0 0 22px;
  color:var(--muted);
  font-size:13px
}

.modal-close{
  position:absolute;
  top:12px;
  right:14px;
  border:0;
  background:transparent;
  color:#9ba8bf;
  font-size:25px
}

.auth-field{
  width:100%;
  margin-bottom:10px;
  padding:13px;
  border:1px solid #2b3850;
  border-radius:9px;
  outline:none;
  background:#0b111c;
  color:#fff
}

.auth-submit{
  width:100%;
  margin-top:8px;
  padding:13px;
  border:0;
  border-radius:9px;
  background:linear-gradient(135deg,#ff3158,#ff6545);
  color:#fff;
  font-weight:900
}

.auth-switch{
  width:100%;
  margin-top:10px;
  padding:10px;
  border:0;
  background:transparent;
  color:#91a8df
}

#authMessage{
  min-height:20px;
  color:#ff6680;
  font-size:12px
}

/* 하단 */

footer{
  padding:30px 5%;
  border-top:1px solid var(--line);
  background:#080c13;
  color:#758199;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  font-size:12px
}

footer strong{
  color:#cbd5e7
}

footer small{
  width:100%;
  color:#59657b
}

/* 태블릿 */

@media(max-width:1150px){
  .hero{
    flex-direction:column;
    align-items:flex-start
  }

  .hero-stats{
    width:100%;
    min-width:0
  }

  .controls{
    grid-template-columns:repeat(3,1fr)
  }

  .card{
    grid-template-columns:45px 125px minmax(200px,1fr) repeat(2,90px)
  }

  .thumb{
    width:125px
  }

  .num:nth-last-child(-n+3){
    display:none
  }
}

/* 모바일 */

@media(max-width:720px){
  .topbar{
    position:relative;
    align-items:flex-start;
    flex-direction:column
  }

  .account{
    width:100%;
    flex-wrap:wrap
  }

  .hero{
    padding:38px 5px 28px;
    min-height:auto
  }

  .hero h2{
    font-size:38px;
    letter-spacing:-1.5px
  }

  .hero-stats{
    grid-template-columns:1fr 1fr 1fr
  }

  .hero-stats div{
    padding:18px 7px
  }

  .hero-stats strong{
    font-size:17px
  }

  .controls{
    grid-template-columns:1fr 1fr
  }

  .controls input,
  #refresh{
    grid-column:1/-1
  }

  .card{
    grid-template-columns:34px 105px 1fr;
    gap:9px;
    padding:10px 7px
  }

  .thumb{
    width:105px
  }

  .num{
    display:none
  }

  .title{
    font-size:13px
  }

  .sub{
    font-size:10px
  }

  .upgrade{
    align-items:flex-start;
    flex-direction:column
  }

  #proBtn{
    width:100%
  }
}
/* ================================
   CHANNEL DETAIL ANALYSIS
================================ */

.channel-analysis{
  margin:24px 0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#0b1019;
}

.analysis-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.analysis-head h2{
  margin:6px 0;
  font-size:24px;
}

.analysis-head p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

#closeAnalysis{
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#111827;
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
}

#closeAnalysis:hover{
  border-color:#ff4655;
}

.analysis-summary{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
}

.analysis-stat{
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0c121d;
}

.analysis-stat span{
  display:block;
  margin-bottom:7px;
  color:var(--muted);
  font-size:12px;
}

.analysis-stat strong{
  font-size:18px;
}

.analysis-periods{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.analysis-period{
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0c121d;
}

.analysis-period-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:14px;
}

.analysis-period-title strong{
  font-size:16px;
}

.analysis-period-value{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid #192336;
}

.analysis-period-value:last-child{
  border-bottom:0;
}

.analysis-period-value span{
  color:var(--muted);
  font-size:12px;
}

.analysis-period-value strong{
  font-size:13px;
}

.analysis-pending{
  padding:3px 7px;
  border-radius:999px;
  background:#192336;
  color:var(--muted);
  font-size:10px;
}

.analysis-note{
  margin:14px 0 0;
  color:var(--muted);
  font-size:11px;
}

.channel-analysis-btn{
  margin-top:10px;
  padding:7px 11px;
  border:1px solid #2c3950;
  border-radius:8px;
  background:#111827;
  color:#dbe7ff;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.channel-analysis-btn:hover{
  border-color:#ff4655;
  color:#fff;
}

@media(max-width:900px){
  .analysis-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .analysis-periods{
    grid-template-columns:1fr;
  }

  .analysis-head{
    flex-direction:column;
  }

  #closeAnalysis{
    width:100%;
  }
}
/* =================================
   CHANNEL TOP 500 RANKING TABLE
================================= */

.channel-ranking-table{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:#0b1019;
}

.channel-ranking-row{
  display:grid;
  grid-template-columns:
    55px
    minmax(190px,1.7fr)
    125px
    90px
    90px
    90px
    100px
    100px
    145px
    90px
    170px
    90px;

  align-items:center;
  min-width:1350px;
  border-bottom:1px solid var(--line);
}

.channel-ranking-row:last-child{
  border-bottom:0;
}

.channel-ranking-row > div{
  padding:14px 10px;
}

.channel-ranking-header{
  position:sticky;
  top:0;
  z-index:2;
  background:#111827;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.channel-ranking-header > div{
  white-space:nowrap;
}

.channel-rank{
  text-align:center;
  font-size:17px;
  font-weight:800;
}

.channel-name-cell{
  min-width:0;
}

.channel-name-cell strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
}

.channel-number{
  text-align:right;
  white-space:nowrap;
  font-size:14px;
  font-weight:700;
}

.channel-growth{
  text-align:right;
  white-space:nowrap;
  color:#65e6a5;
  font-size:14px;
  font-weight:800;
}

.channel-revenue{
  text-align:right;
  white-space:nowrap;
  font-size:14px;
  font-weight:700;
}

.channel-ranking-row:hover:not(.channel-ranking-header){
  background:#0f1724;
}

.channel-ranking-row .channel-analysis-btn{
  margin:0;
  width:100%;
}


/* =================================
   TABLE SCROLLBAR
================================= */

.channel-ranking-table::-webkit-scrollbar{
  height:10px;
}

.channel-ranking-table::-webkit-scrollbar-track{
  background:#080d15;
}

.channel-ranking-table::-webkit-scrollbar-thumb{
  background:#263349;
  border-radius:999px;
}


/* =================================
   MOBILE CHANNEL RANKING
================================= */

@media(max-width:700px){

  .channel-ranking-table{
    overflow:visible;
    border:0;
    background:transparent;
  }

  .channel-ranking-header{
    display:none;
  }

  .channel-ranking-row{
    display:grid;
    grid-template-columns:
      42px
      1fr
      1fr;

    min-width:0;
    margin-bottom:12px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#0b1019;
  }

  .channel-ranking-row > div{
    padding:7px;
  }

  .channel-rank{
    grid-row:1 / 4;
    align-self:start;
    padding-top:10px !important;
  }

  .channel-name-cell{
    grid-column:2 / 4;
  }

  .channel-name-cell strong{
    font-size:14px;
  }

  .channel-number,
  .channel-growth,
  .channel-revenue{
    text-align:left;
    font-size:13px;
  }

  .channel-growth::before{
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:9px;
  }

  .channel-ranking-row .channel-analysis-btn{
    min-height:36px;
  }
}
.channel-category{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}

.china-controls{
  display:grid;
  grid-template-columns:180px 220px minmax(260px,1fr);
  gap:10px;
  margin:14px 0 18px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#0d1422;
}

.china-controls select,
.china-controls input{
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#111a2b;
  color:var(--text);
  font-size:14px;
}

.china-controls input::placeholder{
  color:var(--muted);
}

.china-controls.hidden{
  display:none;
}

@media(max-width:800px){
  .china-controls{
    grid-template-columns:1fr;
  }
}

.china-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  margin-left:6px;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  vertical-align:middle;
}

.china-category-badge{
  color:#ff9aaa;
  background:rgba(255,77,101,.12);
  border-color:rgba(255,77,101,.35);
}

.china-platform-badge{
  color:#93c5fd;
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.35);
}

@media(max-width:720px){
  .china-badge{
    margin-top:4px;
    margin-left:4px;
    padding:2px 7px;
    font-size:10px;
  }
}

/* OWNER 회원 관리 */
.owner-admin-card{
  width:min(920px,94vw);
  max-height:88vh;
  overflow-y:auto;
}

.owner-admin-section,
.owner-member-list-section{
  margin-top:18px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
}

.owner-admin-section h3,
.owner-member-list-section h3{
  margin:0 0 12px;
}

.owner-user-panel{
  margin-top:16px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
}

.owner-user-info{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.owner-user-info span{
  color:var(--muted);
}

.owner-admin-field{
  margin-bottom:12px;
}

.owner-admin-field label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  color:var(--muted);
}

.owner-special-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.owner-special-actions button{
  min-height:42px;
  border-radius:10px;
}

.owner-member-list-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

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

.owner-member-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(220px,2fr) 110px 110px 120px;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.owner-member-row:hover{
  transform:translateY(-1px);
}

.owner-member-main{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.owner-member-main strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.owner-member-main small{
  margin-top:3px;
  color:var(--muted);
}

#specialMessage{
  margin:10px 0;
  min-height:20px;
}

@media(max-width:720px){
  .owner-member-row{
    grid-template-columns:1fr;
  }

  .owner-special-actions{
    grid-template-columns:1fr;
  }

  .owner-user-info{
    flex-direction:column;
    gap:4px;
  }
}

.published-time{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

@media (max-width: 720px) {
  .channel-ranking-table {
    overflow: visible;
  }

  .channel-ranking-header {
    display: none;
  }

  .channel-ranking-row:not(.channel-ranking-header) {
    min-width: 0;
    width: 100%;

    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0 12px;

    margin-bottom: 14px;
    padding: 14px;

    border: 1px solid var(--line);
    border-radius: 16px;
    background: #0b1019;
  }

  .channel-ranking-row:not(.channel-ranking-header) > div {
    padding: 9px 0;
  }

  .channel-ranking-row .channel-rank {
    grid-column: 1;
    grid-row: 1;
    align-self: start;

    font-size: 22px;
    font-weight: 800;
    text-align: center;
  }

  .channel-ranking-row .channel-name-cell {
    grid-column: 2;
    grid-row: 1;

    min-width: 0;
    padding-top: 5px;
    padding-bottom: 14px;
  }

  .channel-ranking-row:not(.channel-ranking-header) > [data-label] {
    grid-column: 2;

    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    border-top: 1px solid var(--line);
  }

  .channel-ranking-row:not(.channel-ranking-header) > [data-label]::before {
    content: attr(data-label);

    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  .channel-ranking-row .channel-number,
  .channel-ranking-row .channel-growth,
  .channel-ranking-row .channel-revenue {
    text-align: right;
  }

  .channel-ranking-row [data-label="분석"] {
    display: block;
  }

  .channel-ranking-row [data-label="분석"]::before {
    display: none;
  }

  .channel-ranking-row .channel-analysis-btn {
    width: 100%;
    min-height: 42px;
  }
}

/* =========================
   PRICING PAGE
========================= */

.pricing-page{
  min-height:100vh;
  background:#070c16;
}

.pricing-topbar{
  position:sticky;
  top:0;
  z-index:20;
}

.pricing-back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;

  border:1px solid var(--line);
  border-radius:10px;

  color:var(--text);
  text-decoration:none;
  font-weight:700;

  background:#101827;
}

.pricing-back-btn:hover{
  transform:translateY(-1px);
}


.pricing-main{
  width:min(1500px, calc(100% - 32px));
  margin:0 auto;
  padding:58px 0 70px;
}


.pricing-hero{
  text-align:center;
  margin-bottom:34px;
}

.pricing-hero .eyebrow{
  display:inline-block;
  margin-bottom:10px;

  color:#ff5167;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}

.pricing-hero h2{
  margin:0;
  font-size:36px;
  line-height:1.2;
}

.pricing-hero p{
  margin:12px auto 0;
  max-width:650px;

  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}


/* 요금제 카드 */

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

.pricing-card{
  position:relative;

  display:flex;
  flex-direction:column;

  min-width:0;
  min-height:520px;
  padding:24px 20px 20px;

  border:1px solid var(--line);
  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.005)
    ),
    #0d1422;
}

.pricing-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.22);
}


.pricing-plan-name{
  font-size:24px;
  font-weight:900;
  letter-spacing:.02em;
}

.pricing-plan-desc{
  min-height:48px;
  margin:8px 0 18px;

  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}


.pricing-price{
  margin-bottom:22px;

  font-size:24px;
  font-weight:900;
}

.pricing-price small{
  display:block;
  margin-top:6px;

  color:var(--muted);
  font-size:12px;
  font-weight:600;
}


.pricing-features{
  flex:1;

  margin:0 0 22px;
  padding:0;

  list-style:none;
}

.pricing-features li{
  padding:8px 0;

  border-bottom:1px solid rgba(255,255,255,.055);

  font-size:13px;
  line-height:1.45;
}

.pricing-features li:last-child{
  border-bottom:0;
}


/* 버튼 */

.pricing-action{
  width:100%;
  min-height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:auto;

  border:0;
  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #ff3158,
      #ff6848
    );

  color:white;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
}

.pricing-action:disabled{
  opacity:.72;
  cursor:not-allowed;
}

.pricing-action-free{
  background:#64748b;
}

.pricing-owner-btn{
  color:#181100;
  background:#f6c944;
}


/* PRO */

.pricing-pro{
  border-color:rgba(59,130,246,.65);

  background:
    linear-gradient(
      180deg,
      rgba(37,99,235,.18),
      rgba(13,20,34,.95)
    );
}

.pricing-pro .pricing-plan-name{
  color:#74b9ff;
}


/* PRO PLUS */

.pricing-pro-plus{
  border-color:rgba(168,85,247,.75);

  background:
    linear-gradient(
      180deg,
      rgba(126,34,206,.22),
      rgba(13,20,34,.95)
    );
}

.pricing-pro-plus .pricing-plan-name{
  color:#c084fc;
}

.pricing-recommend{
  position:absolute;
  top:14px;
  right:14px;

  padding:4px 9px;

  border-radius:999px;

  background:#9333ea;
  color:white;

  font-size:10px;
  font-weight:900;
}


/* BUSINESS */

.pricing-business{
  border-color:rgba(16,185,129,.65);

  background:
    linear-gradient(
      180deg,
      rgba(5,150,105,.20),
      rgba(13,20,34,.95)
    );
}

.pricing-business .pricing-plan-name{
  color:#4ade80;
}


/* OWNER */

.pricing-owner{
  border-color:rgba(234,179,8,.7);

  background:
    linear-gradient(
      180deg,
      rgba(202,138,4,.20),
      rgba(13,20,34,.95)
    );
}

.pricing-owner .pricing-plan-name{
  color:#facc15;
}


/* 하단 안내 */

.pricing-note{
  margin-top:28px;
  padding:22px;

  border:1px solid var(--line);
  border-radius:16px;

  background:#0d1422;
}

.pricing-note h3{
  margin:0 0 10px;
}

.pricing-note p{
  margin:6px 0;

  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}


/* 태블릿 */

@media(max-width:1200px){
  .pricing-grid{
    grid-template-columns:
      repeat(3, minmax(0,1fr));
  }
}


/* 모바일 */

@media(max-width:720px){

  .pricing-main{
    width:min(100% - 28px, 620px);
    padding:32px 0 50px;
  }

  .pricing-hero{
    margin-bottom:24px;
  }

  .pricing-hero h2{
    font-size:29px;
  }

  .pricing-hero p{
    font-size:14px;
  }

  .pricing-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .pricing-card{
    min-height:0;
    padding:22px 18px;
  }

  .pricing-plan-desc{
    min-height:0;
  }

  .pricing-plan-name{
    font-size:25px;
  }

  .pricing-price{
    font-size:23px;
  }

  .pricing-back-btn{
    width:100%;
  }
}