#wrap-center-box {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    min-width: 320px;
    box-sizing: border-box;
    padding:0px 16px;
}
#wrap-center-box .haeder {
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
}

#wrap-center-box .haeder .group-search {
    width: 50%;
    display: flex;
    align-items: center;
}

.main-logo{
  display:flex; align-items:center;
  gap: clamp(4px, 0.9vw, 4px);
  color: var(--brand-500, #7C5CFF);
  white-space: nowrap;
}

.logo-img{
 width: 24px;
 height: 24px;
}

.main-logo-icon{
  width:  clamp(22px, 3.2vw, 30px);
  height: clamp(22px, 3.2vw, 30px);
  display:block;
  margin-top: 0;          /* 모바일에서 살짝 내려가던 거 보정 */
  aspect-ratio: 1 / 1;    /* 선명하게 */
}
.main-logo-word,
.mian-logo-word{          /* 오타 대응 */
  font-size: clamp(18px, 2.6vw, 20px);
  line-height: 1;
  font-weight: 800;
}

/* 좁은 단말 하드 컷 (아주 작은 화면에서 한 단계 더 축소) */
@media (max-width: 480px){
  .main-logo{ gap: 6px; }
  .main-logo-icon{ width:24px; height:24px; }
  .main-logo-word, .mian-logo-word{ font-size:20px; }
}
@media (max-width: 360px){
  .main-logo-icon{ width:22px; height:22px; }
  .main-logo-word, .mian-logo-word{ font-size:18px; 


}
}

.header-box {

    border-bottom: 1px solid var(--border-light);
    padding: 20px 0;
    position: relative;
    z-index: 5000;
}

.header-inner {
    max-width: 1280px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding:0px 24px;
    gap: 24px;
}

.logo {
    margin-top:6px;
    font-weight: bold;
    font-size: 1.5rem;
}





.introducing-ontent-updates{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.introducing-ontent-updates .icu-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 36px;
  box-sizing: border-box;
}

.introducing-ontent-updates .icu-head{
  text-align: center;
  margin-bottom: 26px;
}

.introducing-ontent-updates .icu-title{
  margin: 0;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text, #fff);
}

.introducing-ontent-updates .icu-sub{
  margin: 10px 0 0 0;
  font-size: .98rem;
  line-height: 1.25;
  color: var(--text-sub, rgba(255,255,255,.65));
}

.introducing-ontent-updates .icu-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* Card */
.introducing-ontent-updates .icu-card{
  display: block;
  text-decoration: none;
  color: inherit;

  border-radius: 18px;
  background: var(--surface-2, rgba(255,255,255,.03));
  border: 1px solid var(--border-medium, rgba(255,255,255,.08));
  overflow: hidden;

  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.introducing-ontent-updates .icu-card:hover{
  transform: translateY(-3px);
  border-color: rgba(124,92,255,.45);
  background: var(--surface-2, rgba(255,255,255,.045));
}

.introducing-ontent-updates .icu-media{
  width: 100%;
  aspect-ratio: 1 / 0; /* 캡쳐처럼 정사각 느낌 */
  background: var(--surface-3, rgba(255,255,255,.05));
}

.introducing-ontent-updates .icu-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .2s ease;
}

.introducing-ontent-updates .icu-card:hover .icu-media img{
  transform: scale(1.03);
}

.introducing-ontent-updates .icu-body{
  padding: 16px 16px 18px;
}

.introducing-ontent-updates .icu-card-title{
  margin: 0 0 10px 0;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.25;
  color: var(--text, #fff);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.introducing-ontent-updates .icu-card-desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-sub, rgba(255,255,255,.68));

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}


.cj-community-board-static-v1{
  width:100%;
  max-width:1920px;
  margin:0 auto;
}

.cj-community-board-static-v1 *,
.cj-community-board-static-v1 *::before,
.cj-community-board-static-v1 *::after{
  box-sizing:border-box;
}

.cj-community-board-static-v1__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.cj-community-board-static-v1__card{
  min-width:0;
  background:var(--surface-1);
  border:1px solid var(--border-light);
  border-radius:18px;
  overflow:hidden;
  transition:background-color .18s ease,border-color .18s ease;
}

.cj-community-board-static-v1__card:hover{
  background:color-mix(in srgb, var(--surface-1) 96%, var(--bg) 4%);
  border-color:var(--border-medium);
}

.cj-community-board-static-v1__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
}

.cj-community-board-static-v1__tabs{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.cj-community-board-static-v1__tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border:1px solid var(--border-medium);
  border-radius:999px;
  background:var(--btn-secondary-bg);
  color:var(--text-md);
  font-size:14px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.cj-community-board-static-v1__tab.is-active{
  background:color-mix(in srgb, var(--brand-500) 12%, transparent);
  border-color:color-mix(in srgb, var(--brand-500) 28%, var(--border-medium));
  color:var(--brand-500);
}

.cj-community-board-static-v1__more{
  flex:0 0 auto;
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
}

.cj-community-board-static-v1__more:hover{
  color:var(--brand-500);
}

.cj-community-board-static-v1__list{
  list-style:none;
  margin:0;
  padding:0;
}

.cj-community-board-static-v1__item{
  border-top:1px solid var(--border-light);
}

.cj-community-board-static-v1__link{
  display:block;
  padding:16px;
  text-decoration:none;
  color:inherit;
  transition:background-color .15s ease;
}

.cj-community-board-static-v1__link:hover{
  background:color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.cj-community-board-static-v1__cate{
  display:inline-block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:var(--brand-500);
}

.cj-community-board-static-v1__subject{
  margin:0 0 4px;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:keep-all;
}

.cj-community-board-static-v1__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  font-size:13px;
  line-height:1.4;
  color:var(--text-sub);
}

@media (max-width:1280px){
  .cj-community-board-static-v1__grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){

  .cj-community-board-static-v1__head{
    padding:12px;
    gap:10px;
  }

  .cj-community-board-static-v1__tabs{
    gap:6px;
  }

  .cj-community-board-static-v1__tab{
    min-height:28px;
    padding:0 8px;
    font-size:14px;
  }

  .cj-community-board-static-v1__link{
    padding:12px;
  }

  .cj-community-board-static-v1__subject{
    font-size:14px;
    margin-bottom:2px;
  }

  .cj-community-board-static-v1__meta{
    gap:8px 12px;
    font-size:12px;
  }
}


/* CTA bottom-center */
.introducing-ontent-updates .icu-cta{
  margin-top: 18px;
  text-align: center;
}

.introducing-ontent-updates .icu-cta-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 900;
  text-decoration: none;
  color: var(--text-sub, rgba(255,255,255,.78));
  transition: color .18s ease, transform .18s ease;
}

.introducing-ontent-updates .icu-cta-link:hover{
  color: var(--brand-600, #7C5CFF);
  transform: translateX(2px);
}

.introducing-ontent-updates .icu-cta-arrow{
  font-weight: 900;
}

/* Responsive */
@media (max-width: 1024px){
  .introducing-ontent-updates .icu-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .introducing-ontent-updates .icu-inner{
    padding: 34px 16px 28px;
  }
  .introducing-ontent-updates .icu-title{
    font-size: 1.85rem;
  }
  .introducing-ontent-updates .icu-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .introducing-ontent-updates .icu-media{
    aspect-ratio: 16 / 10; /* 모바일에서 높이 과도해지는 것 방지 */
  }
  .introducing-ontent-updates .icu-card-title{
    -webkit-line-clamp: 2;
  }
  .introducing-ontent-updates .icu-card-desc{
    -webkit-line-clamp: 2;
  }
}

/* =========================================================
   Coinjura Header Nav / Search Responsive Rebuild
   - 1차 메뉴: 인사이트 / 커뮤니티
   - 모바일: 메뉴 텍스트 유지 + 검색창 아래줄 전체폭
   ========================================================= */
.cj-nav{
  --_bg: var(--surface-1);
  --_text: var(--text);
  --_subtext: var(--text-sub);
  --_bd: var(--border-medium);
  --_active: var(--brand-600, #7C5CFF);
  --_shadow: 0 14px 36px rgba(0,0,0,.22);

  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  z-index: 5100;
}

.cj-nav__hamburger,
.hamburger{
  display: none !important;
}

.menu{
  display: flex;
  align-items: center;
  min-width: 0;
}

.join-menu-box{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  min-width:0;
}

.cj-head-member-actions-v1{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
}

.join-menu-box ul{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.join-menu-box li,
.join-menu-box .tnb_admin{
  margin:0;
  padding:0;
  list-style:none;
}

.join-menu{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 8px;
  border-radius:999px;
  color:var(--text-sub);
  background:transparent;
  font-size:12px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
}

.join-menu:hover{
  color:var(--brand-500);
  background:color-mix(in oklab, var(--brand-500) 8%, transparent);
}

.join-menu + .join-menu::before{
  display:none;
}

.join-menu--admin,
.join-menu-box .tnb_admin > a{
  color:var(--brand-500);
  font-weight:800;
}

.join-menu-box .oc-theme-switch{
  flex:0 0 32px;
  width:32px;
  height:32px;
}

/* 1차 메뉴 */
.cj-nav__list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
}

.cj-nav__item{
  position:relative;
}

.cj-nav__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  height:40px;
  padding:0 16px;
  border:1px solid var(--border-light);
  border-radius:999px;
  background:var(--surface-1);
  color:var(--_text);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}

.cj-has-sub:hover > .cj-nav__link,
.cj-has-sub.cj-open > .cj-nav__link,
.cj-nav__item .cj-nav__link.is-active{
  color:var(--_active);
  border-color:color-mix(in oklab, var(--brand-500) 32%, var(--border-light));
  background:color-mix(in oklab, var(--surface-1) 88%, var(--brand-500) 12%);
}

/* 드롭다운 공통 */
.cj-nav-submenu{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  max-width:720px;
  /* min-width:720px; */
  width:max-content;
  /* max-width:min(92vw, 840px); */
  margin:0;
  padding:14px;
  list-style:none;
  background:var(--surface-1);
  border:1px solid var(--border-light);
  border-radius:20px;
  box-shadow:var(--_shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:5200;
}

.cj-nav__item:last-child > .cj-nav-submenu{
  left:auto;
  right:0;
}

/* PC 넓은 화면: 커뮤니티 메뉴가 왼쪽으로 밀리지 않게 버튼 아래 기준 */
@media (min-width:1201px){
  .cj-nav__item:last-child > .cj-nav-submenu{
    left:0;
    right:auto;
  }
}

.cj-has-sub:hover > .cj-nav-submenu,
.cj-has-sub.cj-open > .cj-nav-submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.cj-nav-submenu--mega{
  display:grid;
  grid-template-columns:repeat(3, minmax(180px, 1fr));
  gap:12px;
}

.cj-nav-submenu--mega.cj-nav-submenu--single,
.cj-nav-submenu--mega:has(> .cj-nav-submenu__section:only-child){
  grid-template-columns:1fr;
  width:min(240px, calc(100vw - 48px));
  max-width:calc(100vw - 48px);
}

.cj-nav-submenu__section{
  margin:0;
  padding:14px;
  border:1px solid var(--border-light);
  border-radius:16px;
  background:color-mix(in oklab, var(--surface-1) 90%, var(--surface-2) 10%);
}

.cj-nav-submenu__section-title{
  display:block;
  margin:0 0 12px;
  color:var(--text-sub);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-0.01em;
}

.cj-nav-submenu__section-links{
  display:grid;
  gap:8px;
}

.cj-nav-submenu__section-link{
  display:flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border-radius:12px;
  color:var(--_text);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  transition:background-color .16s ease, color .16s ease;
}

.cj-nav-submenu__section-link:hover{
  background:color-mix(in oklab, var(--surface-2) 76%, var(--brand-500) 24%);
  color:var(--_active);
}

/* 검색 */
.search-bar{
  display:flex;
  align-items:center;
  position:relative;
  min-width:0;
  margin:0 0 0 auto;
}

.search-bar form{
  position:relative;
  width:260px;
  max-width:260px;
}

.search-bar input{
  width:100%;
  height:42px;
  padding:0 44px 0 14px;
  border:1px solid var(--border-light);
  border-radius:999px;
  background:var(--surface-1);
  color:var(--text);
  font-size:14px;
  line-height:42px;
}

.search-bar input::placeholder{
  font-size:14px;
  line-height:42px;
  color:var(--text-sub);
}

.search-bar button{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}

/* 태블릿 이하 */
@media (max-width: 1200px){
  .header-inner{
    flex-wrap:wrap;
    align-items:center;
    gap:12px 14px;
  }

  .header-inner .main-logo,
  .header-inner .logo{
    order:1;
    flex:0 0 auto;
  }

  .join-menu-box{
    order:1;
    margin-left:auto;
    align-self:center;
  }

  .menu{
    order:2;
    flex:0 0 100%;
    width:100%;
  }

  .search-bar{
    order:3;
    flex:0 0 100%;
    width:100%;
    margin:0;
  }

  .search-bar form{
    width:100%;
    max-width:none;
  }

  .cj-nav{
    width:100%;
  }

  .cj-nav__list{
    width:100%;
    gap:8px;
  }

  .cj-nav__item{
    flex:1 1 0;
  }

  .cj-nav__link{
    width:100%;
    min-width:0;
  }

  .cj-nav-submenu{
    min-width:0;
    width:min(calc(100vw - 48px), 760px);
    max-width:calc(100vw - 48px);
  }

  .cj-nav-submenu--mega{
    grid-template-columns:1fr;
    gap:8px;
  }

  .cj-nav-submenu--mega.cj-nav-submenu--single,
  .cj-nav-submenu--mega:has(> .cj-nav-submenu__section:only-child){
    width:100%;
    max-width:none;
    grid-template-columns:1fr;
  }
}


@media (hover:hover) and (pointer:fine){
  .cj-has-sub::after{
    content:"";
    position:absolute;
    left:-14px;
    right:-14px;
    top:100%;
    height:16px;
    display:none;
    z-index:39;
  }

  .cj-has-sub:hover::after,
  .cj-has-sub.cj-open::after{
    display:block;
  }
}

/* 모바일 */
@media (max-width: 767px){
  .header-box{
    padding:14px 0 12px;
  }

  .header-inner{
    padding:0 16px;
    gap:10px;
  }

  .menu{
    order:2;
    flex:0 0 100%;
    width:100%;
  }
.cj-nav__list{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"insight community";
    gap:8px;
    width:100%;
    align-items:start;
  }

  .cj-nav__item{
    display:contents;
    min-width:0;
  }

  .cj-nav__item:nth-child(1) > .cj-nav__link{
    grid-area:insight;
  }

  .cj-nav__item:nth-child(2) > .cj-nav__link{
    grid-area:community;
  }

  .cj-nav__link{
    position:relative;
    width:100%;
    min-width:0;
    height:40px;
    padding:0 30px 0 12px;
    font-size:14px;
  }

  .cj-nav__link::after{
    content:"";
    position:absolute;
    right:14px;
    top:50%;
    width:7px;
    height:7px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:translateY(-65%) rotate(45deg);
    opacity:.65;
    transition:transform .16s ease;
  }

  .cj-has-sub.cj-open > .cj-nav__link::after{
    transform:translateY(-35%) rotate(225deg);
  }

  .cj-nav-submenu{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    min-width:0;
    width:100%;
    max-width:none;
    max-height:min(70vh, 560px);
    margin:0;
    padding:10px;
    overflow-y:auto;
    box-shadow:0 18px 38px rgba(0,0,0,.24);
    border-radius:18px;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
    z-index:1200;
    -webkit-overflow-scrolling:touch;
  }

  .cj-has-sub:hover > .cj-nav-submenu{
    display:none;
  }

  .cj-has-sub.cj-open > .cj-nav-submenu,
  .cj-has-sub.cj-open > .cj-nav-submenu.cj-nav-submenu--mega{
    display:grid;
  }

  .cj-nav-submenu--mega{
    grid-template-columns:1fr;
    gap:8px;
  }

  .cj-nav-submenu__section{
    padding:12px;
    border-radius:14px;
  }

  .cj-nav-submenu__section-title{
    margin-bottom:8px;
    font-size:11px;
  }

  .cj-nav-submenu__section-links{
    gap:4px;
  }

  .cj-nav-submenu__section-link{
    min-height:36px;
    padding:0 10px;
    font-size:13px;
    border-radius:10px;
  }

  .join-menu{
    font-size:12px;
  }

  .join-menu + .join-menu::before{
    margin:0 8px;
  }

  .search-bar input{
    height:42px;
    padding:0 44px 0 14px;
    line-height:42px;
  }

  .search-bar input::placeholder{
    font-size:13px;
    line-height:42px;
  }
}

@media (max-width: 420px){

  .join-menu-box{
    gap:4px;
  }

  .join-menu-box ul{
    gap:2px;
  }

  .join-menu{
    height:26px;
    padding:0 5px;
    font-size:11px;
  }

  .join-menu-box .oc-theme-switch{
    flex:0 0 30px;
    width:30px;
    height:30px;
  }

  .join-menu{
    font-size:11px;
  }

  .cj-nav__link{
    font-size:13px;
  }
}


.main-content-box{
    padding-top:24px;
}







.footer {
    margin-top:40px;
    background-color: #333;
    color: #fff;
    padding: 2rem 1rem;
    font-size: 14px;
    text-align: center;
}

.footer a {
    color: #ccc;
    text-decoration: none;
}

.footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-links {
    margin: 0.5rem 0 1rem;
    padding: 0;
    list-style: none;
    display: inline-flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-contact,
.footer-license {
    margin-top: 0.5rem;
    font-size: 13px;
    color: #bbb;
    line-height: 1.6;
}

.footer-license {
    max-width: 1280px;
    margin: 1rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #c7c7c7;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.footer-license span {
    display: block;
}

.footer-license span + span {
    margin-top: 0.2rem;
}

@media (max-width: 640px) {
    .footer-license {
        font-size: 12px;
        line-height: 1.7;
    }
}




/* view custom */

.board-view-container {
    position: relative;
padding:40px 0;

display: flex;
flex-wrap: wrap;
      align-items: flex-start;
  width: 100%;
  margin: 0 auto;
  gap: 40px;
}

.board-view-content {
  max-width: 860px;
  margin: 0 auto;
  flex:1;
}


.sub_content_left_banner{

    position: sticky;
    top:40px;
    display: flex;
    flex-direction: column;
}

.sub_content_right_community{

        position: sticky;
    top:40px;
    display: flex;
    flex-direction: column;
}


/* 모바일에서는 스티키 해제 */
@media (max-width: 1024px){
  .board-view-container{ display:block; }
  .sub_content_left_banner,
  .sub_content_right_community{ position: static; 
width: 100%;
}
}





.board-view-breadcrumb {
  font-size: 14px;
  color: #888;
  margin-bottom: 10px;
}

.board-view-post-title {
  font-size: 2.5rem;
  margin-bottom: 20px;
}



.board-view-cover-image img,
.board-view-image-block img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
  object-fit: cover;
}

.board-view-post-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:13px; color:var(--text-md);
}

.board-view-post-meta svg{
  width:16px; height:16px; stroke-width:1.6; opacity:.7;
  vertical-align:-2px;
}

/* 구분 점 */
.board-view-post-meta .meta-dot{
  width:4px; height:4px; border-radius:50%;
  background:var(--surface-2);
}

.board-view-post-meta svg { margin-right: 4px; }

/* 작성자 */
.board-view-post-meta .author-list{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--text); font-weight:600;
}
.board-view-post-meta .author-list img{
  width:24px; height:24px; border-radius:50%; object-fit:cover;
}
.board-view-post-meta .author-name{ line-height:1; }

/* 날짜/조회수 톤 다운 */
.board-view-post-meta .date,
.board-view-post-meta .view-eye{ font-size:13px; color:var(--text-md); display: flex; align-items: center;}


.board-view-container .share-btn-box{
    display: flex;
    margin-bottom:20px;
}

.board-view-container .share-btn-box span{
    color:var(--text-md);
}

.board-view-container .share-btn-box svg{
    width:16px;
    height:16px;
}
.board-view-container .share-btn {
  margin-left: auto; /* 오른쪽 정렬 */
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 13px;
  padding: 8px 6px;
  border-radius: var(--radius-md, 8px);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

.board-view-container .share-btn:hover {
  background: var(--btn-secondary-bg-hover);
}

.board-view-post-section h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.board-view-post-section #bo_v_con .article-content .article-body > p {
  line-height: 1.8;
  font-size: 18px;
  color: #222;
  margin-bottom: 24px;
  word-break: keep-all;
}


#bo_v_con p{ font-size: 18px; line-height: 1.7; }
/* 태블릿/모바일 */
@media (max-width: 1024px){
  #bo_v_con p{
    font-size: 18px;
    line-height: 1.75;
  }
}

/* 작은 폰(선택) */
@media (max-width: 480px){
  #bo_v_con p{
    font-size: 16.5px;
        line-height: 1.6;
  }
}


.author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.author-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.author-name {
  font-size: 16px;
  font-weight: 600;
}

.btn-follow {
  padding: 4px 10px;
  font-size: 13px;
  border: none;
  background: #007bff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.tag-list span {
  display: inline-block;
  background: #eee;
  color: #555;
  padding: 5px 10px;
  margin: 5px 5px 0 0;
  border-radius: 5px;
  font-size: 13px;
}

.board-view-top-posts ul {
  padding-left: 20px;
}

/* Tags block (theme-aware) */
.board-view-content-tags{
  margin-top: 2rem;
  padding: 1rem 0 40px;                  /* 하단 여백 유지 */
  border-top: 1px solid var(--border-medium);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: 14px;                       /* 폰트는 전역 상속 */
  color: var(--text);
}

.board-view-content-tags .tags-label{
  font-weight: 600;
  margin-top: 6px;
  white-space: nowrap;
  color: var(--text-md);
}

.board-view-content-tags .tags-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* chip */
.board-view-content-tags .tag-link,
.board-view-content-tags .tags-list .no-tags{
  --chip-bg: var(--surface-2);
  --chip-br: var(--border-medium);
  --chip-text: var(--text);

  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--chip-br);
  background: var(--chip-bg);
  color: var(--chip-text);
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  transition: border-color .18s, background-color .18s, transform .18s;
}

.board-view-content-tags .tag-link:hover{
  border-color: var(--brand-500);
  background: color-mix(in oklab, var(--brand-500) 8%, var(--surface-2));
}

.board-view-content-tags .tag-link:active{
  transform: translateY(1px);
}

/* 활성화(선택된) 상태가 필요할 때 */
.board-view-content-tags .tag-link.is-active{
  border-color: var(--brand-600, var(--brand-500));
  background: color-mix(in oklab, var(--brand-500) 16%, var(--surface-2));
  color: var(--text);
}

.board-view-content-tags .tag-link:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--brand-500) 60%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .board-view-content-tags .tag-link{ transition: none; }
}



.cj-like-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md, 8px);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  line-height: 1.4;
  transition: background .2s ease, color .2s ease;
}

.cj-like-btn:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--text-md);
}

.cj-like-btn:active {
  background: var(--btn-secondary-bg-active);
}

.cj-like-btn svg {
  width: 18px; height: 18px;
   flex-shrink: 0;
}

.cj-like-btn .count {
  font-weight: 700;
  color: var(--brand-500);
}



  .board-view-post-title {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 16px;
  }

  .board-view-post-section h2 {
    font-size: 18px;
  }


.fancybox-image {
  transform: scale(1.3);
  transition: transform 0.3s ease;
}


/* 툴팁 */
.tooltip-keyword {
    position:relative;
  cursor: help;
  display: inline;
}

.tooltip-keyword::before{
    position:absolute;
    content:"";
    width:100%;
    bottom:-2px;
    height:2px;
    background:rgba(255, 0, 0, 0.2);
}
    .lucide-info {
      width: 14px;
      height: 14px;
      stroke-width: 2;
    }
    .tooltip-content {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: 250px;
}
    .tooltip-content p {
      margin: 0 0 6px;
      font-size: 14px;
      font-weight: 400 !important;
      
    }
    .tooltip-content a {
      font-size: 12px;
      color: #969696 !important;
      text-decoration: underline;
    }




/* 버튼 박스 스타일 개선 */
.history-card .btn-box {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}
.history-card .btn-box button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
  cursor: pointer;
  transition: background 0.2s ease;
}
.history-card .btn-box button:hover {
  background: #ddd;
}
.delete-btn svg,
.share-icon svg {
  width: 16px;
  height: 16px;
  color: #333;
}

.share-icon {
  background: #fae100 !important;
}
.share-icon:hover {
  background: #f4d000 !important;
}

@media (max-width: 768px) {
  .breakdown-container { display: block; }
  .breakdown-card {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 16px;
    margin-bottom: 8px;
  }
  .breakdown-card h4, .breakdown-card p { margin: 0; }

}



.top-content-all-box{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 좌:상승률 / 중:시세 / 우:인사이트 */
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.top-content-all-box > .highlight-card,
.top-content-all-box > .metrics-card{
  min-width: 0;      /* 넘침으로 인한 밀림 방지 */
  height: 100%;
}
@media (max-width: 1080px){
  .top-content-all-box{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .top-content-all-box{ grid-template-columns: 1fr; }
}

/* ===== Highlight Card (14px 기준 + 컴팩트 + 반응형) ===== */

/* 컨테이너 */
.highlight-card{
  font-size:14px;                 /* 기준 폰트 */
  border-radius:16px;
  padding:20px;                   /* 14 → 12 로 컴팩트 */
  color:var(--text);
  border:1px solid var(--border-medium);
  background:var(--surface-1);
}

/* 부제 */
.highlight-subdesc{
margin-left:4px;
  font-size:13px;                 
  color:var(--text-sub);
  font-weight:600;
}
@media (max-width:560px){
  .highlight-subdesc{
margin-left:4px;
  font-size:12px;                 
  color:var(--text-sub);
  font-weight:600;
}
}

/* 헤더 */
.highlight-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:20px;              /* 8 → 6 */
}
.highlight-title-row{display:flex; align-items:center; gap:6px}
.highlight-title{font-weight:800; font-size:16px} /* 제목 크게 */
.highlight-link{color:var(--text-sub); font-weight:700}
.highlight-link:hover{color:var(--text-md)}
.highlight-actions{display:flex; align-items:center; gap:6px} /* 8 → 6 */

/* 작은 pill 버튼 */
.highlight-pill{
  width:30px; height:30px; padding:0; border-radius:10px; /* 32 → 30 */
  background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--text-md);
}
.highlight-pill:hover{background:var(--btn-bg-hover)}
.highlight-pill i{width:16px; height:16px}


.global-type-tab-box{
padding:16px 0;
  display: flex;
  align-items: center;
}

.country-type-box{
    padding:4px;
    box-sizing: border-box;
    display: flex;
    gap: 4px;
    background: var(--surface-1);
    border-radius: 8px;
}
.global-type-tab-btn{
padding:8px;
font-size:14px;
border-radius: 8px;
background: var(--surface-1);
transition: all 0.2s;
}

.global-type-tab-btn:hover{
    color: var(--color-pr-op);
    background: var(--surface-2);
    transition: all 0.2s;
}

.global-type-tab-btn.is-active{
    background: var(--surface-2);
    color: #7C5CFF;
}


/* 탭 (작은 폰트 + 컴팩트 패딩) */
.highlight-tabs{
    display: flex;
    gap:16px;
}
.highlight-tab{
    
    position: relative;
    border-radius:8px;
    font-size:14px;
background: var(--surface-1);
transition: all 0.2s;
    min-height:auto;
    color: var(--text-sub);
}

.highlight-tab.is-active{
    color: var(--text);
    font-weight: 700;
  }

.highlight-tab.is-active::before{
    content:"";
    position: absolute;
    bottom:-6px;
    width: 100%;
    height:2px;
    background: #7C5CFF;
  }


  .highlight-tab[hidden],
.metrics-tab[hidden],
[data-panel][hidden] {
  display: none !important;
}





/* 바디/리스트 */
.highlight-panel.is-hidden{display:none}
.highlight-list{list-style:none; margin:0; display:flex; flex-direction:column;}


/* 행 (컴팩트) */
.highlight-row{
  border-radius:10px;
  min-height:40px;
  display:grid;
  grid-template-columns:28px 60px 1fr 1fr 1fr;
  align-items:center; gap:20px;
}



.highlight-rank{color:var(--text-sub); text-align:center; font-size:14px}
.highlight-logo{width:24px; height:24px; border-radius:50%; box-sizing: border-box; border:var(--border-light); overflow: hidden;}
.highlight-logo img{width:100%; height:100%; object-fit:cover}
.highlight-name{font-weight:700; font-size:14px; position: relative;}
.highlight-price{justify-self:end; font-weight:700; color:var(--text); font-size:14px}
.highlight-change{justify-self:end; font-weight:800; font-size:14px}
/* === 색상 규칙: 상승=초록, 하락=빨강 === */
.highlight-change.up,
.is-up{ color: var(--color-green); }
.highlight-change.down,
.is-down{ color: var(--color-red); }


/* 거래량 패널 레이아웃 */
.highlight-card[id^="cj-tops-"] .highlight-panel[data-panel="volume"] .highlight-row{
  display:grid;
  grid-template-columns:28px 60px 1fr 1fr 30px;
  gap:20px;
  align-items:center;
}

.highlight-card[id^="cj-tops-"] .highlight-panel[data-panel="volume"] .highlight-row .num{
  text-align:right;
}

.highlight-card[id^="cj-tops-"] .highlight-panel[data-panel="volume"] .highlight-row .unit{
  text-align:right;
}

.highlight-card[id^="cj-tops-"] .highlight-panel[data-panel="volume"] .highlight-row .unit .cj-hl-unitprefix{
  font-size:12px;
  color:var(--text-sub2);
  font-style:normal;
}

.vol-bar{
  position:relative; display:inline-block;
  width: 100%;
  max-width:100px; height:20px; line-height:20px;
  border-radius:10px; overflow:hidden; vertical-align:middle;
  background:#333;
}
.vol-bar::after{
  content:""; position:absolute; inset:0;
  transform-origin:left; transform:scaleX(var(--r,0));
  background:linear-gradient(90deg,#38bdf8,#3b82f6);
}
.vol-bar__text{
  position:relative; z-index:1; display:block;
  text-align:center; font-weight:700; font-size:11px; color:rgba(255, 255, 255, 0.8);
}

.highlight-logo{position:relative}
.ex-badges{ display:flex; gap:2px}

.ex-badges .ex-src-gl{display: flex;}


.ex-badge{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:10px; text-align:center; font-weight:700;
  font-style: normal;
  padding:1px 3px; border-radius:4px; font-size:9px; line-height:1
}
.highlight-name{display:flex; align-items:center; gap:6px}
.ex-badge{padding:1px 3px; border-radius:4px; font-size:9px; display: flex; justify-content: center;}
.ex-u{background:#2b6cff;border-color:#325eea;color:#fff} /* Upbit */
.ex-b{background:#ff7a00;border-color:#e96a00;color:#fff} /* Bithumb */
.ex-bn{background:#cfaf30;border-color:#c4a93f;color:#fff} /* Upbit */
.ex-bt{background:#0f2550;border-color:#0c214b;color:#fff; letter-spacing: 1;} /* Bithumb */

/* ── 김프(KIMP) 전용: 충돌 수정본 ── */
.highlight-card[id^="cj-tops-"] .highlight-kimchi{
  grid-template-columns: 12px 26px 200px 88px 66px 1fr;
}

.highlight-card[id^="cj-tops-"] .k-col{
  justify-self: end;
  display: flex;
  flex-direction: column;     /* 위: 퍼센트 / 아래: 금액 */
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.highlight-card[id^="cj-tops-"] .k-pct{
    justify-self: end;
  font-weight: 800;
  font-size: 12px;
}

.highlight-card[id^="cj-tops-"] .k-amt{
    justify-self: end;
    display:flex;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 2px;
}

.highlight-spark{
    justify-self:end;
    display:block;
    height:30px;
}

/* 김프 행에서는 스파크라인 숨김 */
.highlight-card[id^="cj-tops-"] .highlight-kimchi .highlight-spark{ display: none !important; }


.highlight-spark svg{
    width:100%;
    height:100%;
    display:block;
}


  .metrics-tabs{display:flex; gap:16px;}
  .metrics-tab{
    position: relative;
    border-radius:8px;
    font-size:14px;
background: var(--surface-1);
transition: all 0.2s;
    min-height:auto;
    color: var(--text-sub);
  }
  .metrics-tab.is-active{
    color: var(--text);
    font-weight: 700;
  }
  .metrics-tab.is-active::before{
    content:"";
    position: absolute;
    bottom:-6px;
    width: 100%;
    height:2px;
    background: #7C5CFF;
    
  }

  .metrics-panel.is-hidden{display:none}
  .metrics-toolbar{display:flex; align-items:center; gap:8px; margin:4px 0 8px}
  .metrics-select{
    height:23px;
    padding:0px !important; border:1px solid var(--border-medium); border-radius:8px;
    background:var(--surface-2); color:var(--text); font-weight:600; font-size:12px;
  }

  


.metrics-head-controls{display:flex; align-items:center; gap:6px}
.metrics-inline-controls.is-hidden{display:none}
.metrics-inline-select{padding:2px 6px; font-size:12px; height:24px; border-radius:8px}
@media (max-width:560px){ .metrics-inline-select{max-width:74px} }

  /* 김프 전용 보조 정렬(기존 규칙 활용) */
  .highlight-card[id^="cj-tops-"] .highlight-kimchi .k-col{justify-self:end; font-variant-numeric:tabular-nums}
  .highlight-card[id^="cj-tops-"] .highlight-kimchi .k-lab{color:var(--text-sub); font-size:12px; margin-right:4px}


/* Insights (FG + Altseason) */

.cj-insights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media (max-width:720px){.cj-insights-grid{grid-template-columns:1fr;}}

/* Compact */


/* 추천/신고 액션바 */
.cj-action-bar {
  display: flex;
  justify-content: center; /* 중앙 정렬 */
  align-items: center;
  gap: 14px; /* 버튼 사이 간격 */
  margin: 20px 0;
}

/* 버튼 공통 */
.cj-action-bar .btn {
  display: flex;
  gap:4px;
  min-width: 100px;         /* 버튼 폭 일정하게 */
  justify-content: center;  /* 아이콘+텍스트 중앙 정렬 */
  text-align: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

/* 아이콘 크기 */
.cj-action-bar .btn svg {
  width: 16px;
  height: 16px;
}

.cj-action-bar .btn:hover{
  color: var(--text);
}

.cj-action-bar .btn:first-child:hover{
  color: white;
}


/* 링크형 더보기: 탭과 시각적으로 분리 */
.cj-more-link{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 6px;
  color: var(--text-sub);
  font-size:.84rem; line-height:1;;
    text-decoration:none;
  transition:transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.cj-more-link svg{width:16px; height:16px;}  /* i 태그 기울임 해제 */

/* ─ 상단 인사이트 바 ─ */
.cj-insights-bar {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.cj-insights-bar__row {
  width: 100%;
  max-width: 1160px; /* 상단 카드 폭에 맞춰 조정 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}



.cj-insights-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding:8px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  font-size: .88rem;
  line-height: 1.4;
  white-space: nowrap;
}

.cj-insights-chip .k {
font-size: 12px;
  color: var(--text-sub);
  font-weight: 500;
  line-height: 1;
}

.cj-insights-chip .v {
  color: var(--text);
  font-weight: 700;
}

.cj-insights-bar__more {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.cj-insights-bar .sep {
  color: var(--text-sub);
  opacity: .5;
}

/* ─ 모바일 (칩 가로 스크롤) ─ */
@media (max-width: 768px){
  .cj-insights-bar {
    margin-top: .5rem;
    padding: .15rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cj-insights-bar__row {
    flex-wrap: nowrap;
    gap: .4rem;
  }

  .cj-insights-chip {
    flex: 0 0 auto;
    padding: .18rem .6rem;
    font-size: .83rem;
  }
}




/* 김프/역프 Top5 한 줄 포맷 */
.highlight-card[id^="cj-tops-"] .highlight-row--kimchi {
   grid-template-columns:28px 120px 1fr 120px 80px;
}

.highlight-card[id^="cj-tops-"] .highlight-kimchi-line {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.86rem;
  white-space: nowrap;
}

.highlight-card[id^="cj-tops-"] .highlight-kimchi-base {
  opacity: 0.9;
}

.highlight-card[id^="cj-tops-"] .highlight-kimchi-diff,
.highlight-card[id^="cj-tops-"] .highlight-kimchi-pct {
  font-weight: 500;
    text-align: right;
}

.highlight-card[id^="cj-tops-"] .highlight-kimchi-diff.up,
.highlight-card[id^="cj-tops-"] .highlight-kimchi-pct.up {
  color: var(--color-green);
}

.highlight-card[id^="cj-tops-"] .highlight-kimchi-diff.down,
.highlight-card[id^="cj-tops-"] .highlight-kimchi-pct.down {
  color: var(--color-red);
}


/* 시총 탭: 순위 / 순위변동 영역 */
.highlight-card[id^="cj-tops-"] .highlight-row .highlight-rank-wrap {
  display: flex;
  gap: 2px;
  min-width: 40px;
}

.highlight-card[id^="cj-tops-"] .highlight-row .cj-rank-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub, #a6a6b3);
}

.highlight-card[id^="cj-tops-"] .highlight-row .cj-rank-diff {
display: flex;
justify-content: center;
  font-size: 11px;
}

/* 상승(▲): 녹색 */
.highlight-card[id^="cj-tops-"] .highlight-row .cj-rank-diff.cj-rank-up {
  color: var(--up-color, #00c853);
}

/* 하락(▼): 빨강 */
.highlight-card[id^="cj-tops-"] .highlight-row .cj-rank-diff.cj-rank-down {
  color: var(--down-color, #ff5252);
}

/* 변동 없음(-): 보라 (브랜드 컬러) */
.highlight-card[id^="cj-tops-"] .highlight-row .cj-rank-diff.cj-rank-flat {
  color: var(--brand-500, #7C5CFF);
}

.highlight-card[id^="cj-tops-"] .cj-rank-col {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 64px;
  font-size: 11px;
}

/* 현재 시총 순위 숫자 */
.highlight-card[id^="cj-tops-"] .cj-rank-num {
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, #333);
  color: var(--text-sub, #aaaaaa);
}

/* 슬래시 구분자 */
.highlight-card[id^="cj-tops-"] .cj-rank-slash {
    padding:0px 8px;
  color: var(--text-sub, #777);
}

/* 변동 방향 텍스트 (▲2 / ▼1 / -) */
.highlight-card[id^="cj-tops-"] .cj-rank-diff {
  min-width: 24px;
  text-align: right;
}

/* 색상: 상승 / 하락 / 제자리 */
.highlight-card[id^="cj-tops-"] .cj-rank-up {
  color: #25c26e; /* 기존 상승 색과 비슷하게 */
}

.highlight-card[id^="cj-tops-"] .cj-rank-down {
  color: #ff4b4b; /* 기존 하락 색과 비슷하게 */
}

.highlight-card[id^="cj-tops-"] .cj-rank-flat {
  color: var(--brand-500, #7C5CFF); /* 제자리 = 보라 계열 */
}



/* 상단 카드 표시 제어 */
/* 상단 카드 제어 */
.cj-topbox-control-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cj-topbox-control-desktop,
.cj-topbox-control-mobile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cj-topbox-control-mobile {
  display: none;
}

.cj-topbox-toggle-btn {
    
  appearance: none;
  border: 1px solid var(--border-light);
  background: var(--surface-1);
  color: var(--text-sub);
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}


.cj-topbox-toggle-btn.is-active {
    background: var(--surface-1);
    color: #7C5CFF;
}

.cj-topbox-toggle-btn--desktop {
  min-width: 72px;
}

.cj-topbox-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .cj-topbox-control-desktop {
    display: none;
  }

  .cj-topbox-control-mobile {
    display: flex;
  }

  .cj-topbox-toggle-btn {
    height: 30px;
    padding: 0 11px;
    font-size: 12px;
  }
}

.cj-topbox-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.cj-topbox-toggle-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke-width: 2.4;
  transition: transform .16s ease;
}

.cj-topbox-toggle-btn.is-active .cj-topbox-toggle-icon {
  transform: rotate(180deg);
}

.cj-topbox-toggle-btn:not(.is-active) {
  opacity: .72;
}

@media (min-width: 769px) {
  .cj-topbox-control-desktop {
    display: flex;
  }

  .cj-topbox-control-mobile {
    display: none;
  }
}


/* 거래량 게이지 */
/* volume rank + top5 share gauge */
.highlight-card[id^="cj-tops-"] .highlight-row--volume-rankshare {
  grid-template-columns: 24px 60px 1fr 1fr 30px;
  column-gap: 20px;
  align-items: center;
}

.highlight-card[id^="cj-tops-"] .highlight-row--volume-rankshare .highlight-logo {
  width: 24px;
  min-width: 24px;
  height: 24px;
}

.highlight-card[id^="cj-tops-"] .highlight-row--volume-rankshare .highlight-name {
  min-width: 0;
}

.highlight-card[id^="cj-tops-"] .highlight-row--volume-rankshare .num {
  justify-self: end;
  text-align: right;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.highlight-card[id^="cj-tops-"] .highlight-row--volume-rankshare .price {
  justify-self: end;
  text-align: right;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--text-sub);
}

.highlight-card[id^="cj-tops-"] .highlight-volume-rankshare-wrap {
  display: grid;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.highlight-card[id^="cj-tops-"] .highlight-volume-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  width: 30px;
  border-radius: 999px;
  background: var(--surface-1);
  border:solid 1px var(--border-medium);
  color: var(--color);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.highlight-card[id^="cj-tops-"] .highlight-volume-sharegauge {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in oklab, var(--surface-1) 72%, var(--surface-2) 28%);
  border: 1px solid color-mix(in oklab, var(--border-light) 82%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.highlight-card[id^="cj-tops-"] .highlight-volume-sharegauge-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  min-width: 12px;
  max-width: 100%;
  border-radius: inherit;
  background: var(--brand-700);
  opacity: 0.5;
}

.highlight-card[id^="cj-tops-"] .highlight-volume-sharegauge-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 10px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  color: color-mix(in oklab, var(--text) 82%, var(--text-sub) 18%);
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.02em;
  pointer-events: none;
}

.highlight-card[id^="cj-tops-"] .highlight-volume-sharegauge-text .cj-hl-unitprefix {
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-sub2);
  letter-spacing: 0;
}

/* =========================================================
   코인주라 Top Highlight Mobile Stable Final
   - 급등/급락: #side-metrics-card 전용
   - 거래량/시총/김프: .highlight-card[id^="cj-tops-"] 전용
   - PC 레이아웃 변경 없음
========================================================= */
@media (max-width:768px){
  .top-content-all-box{
    grid-template-columns:1fr;
    gap:16px;
  }

  #side-metrics-card.metrics-card,
  .highlight-card[id^="cj-tops-"]{
    overflow:hidden;
    padding:16px;
  }

  #side-metrics-card.metrics-card .highlight-body,
  #side-metrics-card.metrics-card .metrics-body,
  #side-metrics-card.metrics-card .metrics-panel,
  #side-metrics-card.metrics-card .highlight-list,
  .highlight-card[id^="cj-tops-"] .highlight-body,
  .highlight-card[id^="cj-tops-"] .highlight-panel,
  .highlight-card[id^="cj-tops-"] .highlight-list{
    min-width:0;
  }

  #side-metrics-card.metrics-card .highlight-list,
  .highlight-card[id^="cj-tops-"] .highlight-list{
    gap:8px;
    padding:0;
  }

  #side-metrics-card.metrics-card .highlight-row,
  .highlight-card[id^="cj-tops-"] .highlight-row{
    width:100%;
    min-width:0;
    box-sizing:border-box;
    overflow:hidden;
  }

  #side-metrics-card.metrics-card .highlight-logo,
  .highlight-card[id^="cj-tops-"] .highlight-logo{
    width:24px;
    height:24px;
    min-width:24px;
    flex:0 0 24px;
  }

  #side-metrics-card.metrics-card .highlight-logo img,
  .highlight-card[id^="cj-tops-"] .highlight-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  #side-metrics-card.metrics-card .highlight-name,
  .highlight-card[id^="cj-tops-"] .highlight-name{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:13px;
    font-weight:800;
  }

  #side-metrics-card.metrics-card .highlight-name span,
  #side-metrics-card.metrics-card .highlight-name b,
  .highlight-card[id^="cj-tops-"] .highlight-name span,
  .highlight-card[id^="cj-tops-"] .highlight-name b{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  #side-metrics-card.metrics-card .highlight-price,
  #side-metrics-card.metrics-card .highlight-change,
  .highlight-card[id^="cj-tops-"] .highlight-price,
  .highlight-card[id^="cj-tops-"] .highlight-change,
  .highlight-card[id^="cj-tops-"] .num,
  .highlight-card[id^="cj-tops-"] .price,
  .highlight-card[id^="cj-tops-"] .unit{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:right;
    justify-self:end;
    letter-spacing:-.03em;
  }

  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-list > .highlight-row,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-list > .highlight-row{
    display:grid;
    grid-template-columns:24px minmax(0,1fr) minmax(56px,auto) minmax(54px,auto) 54px;
    grid-template-areas:"logo name price change spark";
    align-items:center;
    column-gap:8px;
    min-height:40px;
  }

  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-rank,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-rank{
    display:none;
  }

  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-logo,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-logo{
    grid-area:logo;
  }

  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-name,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-name{
    grid-area:name;
  }

  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-price,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-price{
    grid-area:price;
    max-width:64px;
    font-size:12px;
    font-weight:800;
  }

  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-change,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-change{
    grid-area:change;
    max-width:60px;
    font-size:12px;
    font-weight:900;
  }

  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-spark,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-spark{
    grid-area:spark;
    display:block;
    justify-self:end;
    width:54px;
    max-width:54px;
    height:22px;
    min-width:0;
    overflow:hidden;
  }

  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-spark svg,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-spark svg{
    display:block;
    width:100%;
    height:100%;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-list > .highlight-row,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-row--volume-rankshare{
    display:grid;
    grid-template-columns:24px minmax(0,1fr) minmax(66px,auto) minmax(20px,auto);
    grid-template-areas:
      "logo name num unit"
      "share share share share";
    align-items:center;
    column-gap:8px;
    row-gap:6px;
    min-height:54px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-rank{
    display:none;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-logo{
    grid-area:logo;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-name{
    grid-area:name;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-name br,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-name .highlight-chain{
    display:none;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .num{
    grid-area:num;
    max-width:86px;
    font-size:12px;
    font-weight:800;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .unit{
    grid-area:unit;
    max-width:28px;
    font-size:11px;
    font-weight:700;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .price,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-price{
    display:none;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-volume-rankshare-wrap{
    grid-area:share;
    display:grid;
    grid-template-columns:minmax(0,1fr) 34px;
    grid-template-areas:"gauge rank";
    align-items:center;
    justify-self:stretch;
    width:100%;
    max-width:none;
    min-width:0;
    gap:6px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-volume-sharegauge{
    grid-area:gauge;
    width:100%;
    min-width:0;
    height:20px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-volume-sharegauge-text{
    inset:0 6px;
    padding:0;
    font-size:9px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-volume-sharegauge-text .cj-hl-unitprefix{
    font-size:8px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-volume-rank{
    grid-area:rank;
    justify-self:end;
    width:32px;
    min-width:32px;
    height:18px;
    padding:0 5px;
    font-size:9px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-list > .highlight-row,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-row--mcap-simple{
    display:grid;
    grid-template-columns:24px minmax(0,1fr) minmax(82px,auto) 42px;
    grid-template-areas:"logo name value rank";
    align-items:center;
    column-gap:8px;
    min-height:42px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-logo{
    grid-area:logo;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-name{
    grid-area:name;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .num,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-price{
    grid-area:value;
    max-width:96px;
    font-size:12px;
    font-weight:800;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .price{
    display:none;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-volume-rank,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .cj-rank-col,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-rank-wrap{
    grid-area:rank;
    justify-self:end;
    justify-content:flex-end;
    max-width:42px;
    min-width:0;
    font-size:10px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-volume-rank{
    width:auto;
    min-width:34px;
    height:18px;
    padding:0 6px;
justify-content:center;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .cj-rank-num{
    padding:1px 5px;
    font-size:10px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .cj-rank-slash,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .cj-rank-diff{
    display:none;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-list > .highlight-row,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-row--kimchi,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-kimchi{
    display:grid;
    grid-template-columns:24px minmax(0,1fr) minmax(50px,auto) minmax(64px,auto);
    grid-template-areas:"logo name pct diff";
    align-items:center;
    column-gap:8px;
    min-height:42px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-logo{
    grid-area:logo;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-name{
    grid-area:name;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-kimchi-line{
    display:contents;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-kimchi-base{
    display:none;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-kimchi-pct,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .k-pct{
    grid-area:pct;
    justify-self:end;
    max-width:58px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:right;
    font-size:12px;
    font-weight:900;
    letter-spacing:-.03em;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-kimchi-diff,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .k-amt{
    grid-area:diff;
    justify-self:end;
    max-width:74px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:right;
    font-size:11px;
    font-weight:800;
    letter-spacing:-.03em;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .k-col{
    grid-area:pct;
    justify-self:end;
    max-width:74px;
    min-width:0;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-spark{
    display:none;
  }
}

@media (max-width:420px){
  #side-metrics-card.metrics-card,
  .highlight-card[id^="cj-tops-"]{
    padding:14px;
  }

  #side-metrics-card.metrics-card .highlight-logo,
  .highlight-card[id^="cj-tops-"] .highlight-logo{
    width:23px;
    height:23px;
    min-width:23px;
    flex-basis:23px;
  }

  #side-metrics-card.metrics-card .highlight-name,
  .highlight-card[id^="cj-tops-"] .highlight-name{
    font-size:12px;
  }

  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-list > .highlight-row,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-list > .highlight-row{
    grid-template-columns:23px minmax(0,1fr) 52px 50px 42px;
    column-gap:6px;
  }

  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-price,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-price,
  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-change,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-change{
    font-size:11px;
  }

  #side-metrics-card.metrics-card #cj-metrics-gainers.metrics-panel .highlight-spark,
  #side-metrics-card.metrics-card #cj-metrics-losers.metrics-panel .highlight-spark{
    width:42px;
    max-width:42px;
    height:21px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-list > .highlight-row,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-row--volume-rankshare{
    grid-template-columns:23px minmax(0,1fr) minmax(58px,auto) minmax(18px,auto);
    column-gap:7px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .num{
    max-width:70px;
    font-size:11px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .unit{
    max-width:24px;
    font-size:10px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-volume-rankshare-wrap{
    grid-template-columns:minmax(0,1fr) 31px;
    gap:5px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-volume-rank{
    width:31px;
    min-width:31px;
    font-size:8px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-volume-sharegauge-text{
    inset:0 5px;
    font-size:8px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-list > .highlight-row,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-row--mcap-simple{
    grid-template-columns:23px minmax(0,1fr) minmax(74px,auto) 36px;
    column-gap:7px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .num,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-price{
    max-width:78px;
    font-size:11px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-mcap-"] .highlight-volume-rank{
    min-width:32px;
    height:17px;
    padding:0 5px;
    font-size:8px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-list > .highlight-row,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-row--kimchi,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-kimchi{
    grid-template-columns:23px minmax(0,1fr) 46px 58px;
    column-gap:6px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-kimchi-pct,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .k-pct{
    max-width:46px;
    font-size:11px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .highlight-kimchi-diff,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-kimchi-"] .k-amt{
    max-width:58px;
    font-size:10px;
  }
}


/* =========================================================
   코인주라 Mobile Volume List Final Override
   - 기존 768/420 중복 모바일 거래량 CSS 최종 덮어쓰기
   - PC 영향 없음
========================================================= */
@media (max-width:768px){
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-list > .highlight-row,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-row--volume-rankshare{
    display:grid !important;
    grid-template-columns:24px minmax(0,1fr) minmax(86px,max-content) 34px !important;
    grid-template-areas:
      "cjvol_logo cjvol_name cjvol_amount cjvol_amount"
      ".          cjvol_share cjvol_share  cjvol_rank";
    align-items:center;
    column-gap:8px;
    row-gap:2px;
    min-height:50px;
    overflow:hidden;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-row--volume-rankshare > .highlight-logo,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-list > .highlight-row > .highlight-logo{
    grid-area:cjvol_logo !important;
    align-self:start;
    margin-top:1px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-row--volume-rankshare > .highlight-name,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-list > .highlight-row > .highlight-name{
    grid-area:cjvol_name !important;
    align-self:start;
    min-width:0;
    max-width:100%;
    height:23px;
    line-height:23px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-name br,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-name .highlight-chain{
    display:none !important;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-row--volume-rankshare > .num,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-list > .highlight-row > .num{
    grid-area:cjvol_amount !important;
    justify-self:end !important;
    align-self:start;
    max-width:none !important;
    min-width:0;
    height:23px;
    line-height:23px;
    font-size:12px;
    font-weight:800;
    text-align:right;
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-row--volume-rankshare > .price,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-list > .highlight-row > .price,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-row--volume-rankshare > .highlight-price,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-list > .highlight-row > .highlight-price{
    display:none !important;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-row--volume-rankshare > .highlight-volume-rankshare-wrap,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-list > .highlight-row > .highlight-volume-rankshare-wrap{
    grid-area:cjvol_share !important;
    display:block !important;
    width:100%;
    max-width:none;
    min-width:0;
    justify-self:stretch;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-volume-sharegauge{
    width:100%;
    max-width:none;
    min-width:0;
    height:20px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-volume-sharegauge-text{
    inset:0 6px;
    padding:0;
    font-size:9px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-volume-sharegauge-text .cj-hl-unitprefix{
    font-size:8px;
  }

  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-row--volume-rankshare > .highlight-volume-rank,
  .highlight-card[id^="cj-tops-"] [id^="cj-top-volume-"] .highlight-list > .highlight-row > .highlight-volume-rank{
    grid-area:cjvol_rank !important;
    display:inline-flex !important;
    justify-self:end;
    align-self:center;
    width:32px;
    min-width:32px;
    height:18px;
    padding:0 5px;
    font-size:9px;
    line-height:1;
  }
}