@media screen and (max-width: 600px) {
  /* styles for screens smaller than 600px */
}

* {
  list-style: none;
  text-decoration: none;
  border-collapse: collapse;
  margin: 0px;
  padding: 0px;
  color: black;
  font-size: 14px;
}

#main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
}

.expand_bar {
  display: none;
}

/* dropdown css */

#overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  z-index: 900;           /* 딤 레이어 */
}

/* 드롭다운 박스 */
.dropdown-menu-top{
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f3f3f3;
  border-bottom: 1px solid #d8d8d8;
}

.side-auth-btn{
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  color: #222;
  font-weight: 600;
  letter-spacing: -0.2px;
  border-right: 1px solid #d8d8d8;
  box-sizing: border-box;
  padding: 8px;
  line-height: 14px;
}

.side-auth-btn span {
  font-size: 12px;
}

#headerImage {
  -webkit-tap-highlight-color: transparent;
}

.dropdown{
  display: none;
  position: absolute;           /* 현재 쓰는 위치에 맞게 */
  top: 48px; left: 12px;        /* 예시 */
  width: 220px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  z-index: 1000;
}

/* 공통 아이템 */
.dd-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: #111;
  font-size: 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  box-sizing: border-box;  /* padding 포함해서 100% */
  border-bottom: 1px solid #d8d8d8;
}

/* hover 느낌 */
.dd-item:hover{
  background: rgba(0,0,0,0.05);
}

/* 서브메뉴 */
.dd-sub{
  margin: 4px 0 8px;
  padding-left: 10px;
  border-left: 2px solid rgba(0,0,0,0.08);
}

.dd-sub a{
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #222;
  font-size: 13px;
}

.dd-sub a:hover{
  background: rgba(0,0,0,0.05);
}

/* 화살표(▾) 만들어서 회전시키기 */
.dd-caret{
  width: 10px; height: 10px;
  display: inline-block;
  border-right: 2px solid rgba(0,0,0,0.55);
  border-bottom: 2px solid rgba(0,0,0,0.55);
  transform: rotate(45deg);         /* 기본은 아래 방향 */
  transition: transform .15s ease;
}

/* 열렸을 때 caret 위로(▲ 느낌) */
.dd-toggle[aria-expanded="true"] .dd-caret{
  transform: rotate(-135deg);
}

.dd-item:hover{
  background: #f3f6ff;
  color: #2b6cff;
}

.dd-sub{
  border-left: 3px solid #2b6cff;
}

.dd-item.active{
  background: #edf2ff;
  color: #2b6cff;
  font-weight: 600;
}

/* dropdown css */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


.intro {
  margin: auto;
  width: 1050px;
  margin-top: 0;
}
.main_left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.main_right{
  display: flex;
  gap:4px
}
.main_left_title {
  text-decoration: none;
  font-size: 45px;
  font-weight: bolder;
  letter-spacing: 3px;
  font-family: Arial, Helvetica, sans-serif;
}

.alerts{
  background:#ffebee; 
  color:#c62828;
  border:1px solid #ffcdd2;
  font-size: 12px;       
  border-radius: 10px; 
  display: inline-block;
  padding: 0px 4px;
}

.header_ad {
  float: right;
  width: 300px;
  height: 50px;
  border: 1px solid #ddd;
}

.header {
  background: white;
  margin-bottom: 10px;
}

.header_up {
  justify-content: end;
  display: flex;
  height: 20px;
  margin-top: 10px;
  border-bottom: 1px solid #ddd;
  padding: 5px;
  align-items: center;
}

.header_up li {
  float: right;
}
.nav-mobile {
  display: none;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  width: auto;
  list-style: none;
  margin: 0;
  padding: 0 16px;
  background-color: #5985dd;
  column-gap: 32px;
  row-gap: 0;
}

.nav li {
  text-align: center;
  height: 40px;
  line-height: 40px;
  position: relative;
}

.nav a {
  width: 100%;
  height: 40px;
  display: block;
  line-height: 40px;
  font-weight: 500;
  font-size: 14px;
  transition: background-color 0.5s ease;
}

.nav li a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.board_ad {
  width: 728px;
  height: 90px;
  border: 1px solid #ddd;
  display: none;
}
.pc_top_banner {
  padding-left: 4px;
}
.phone_ad {
  width: 300px;
  height: 50px;
  border: 1px solid #ddd;
  display: none;
}

.level-badge {
  display: inline-block;
  background-color: #e8e8e8;
  color: #000;
  padding: 1px 3px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: bold;
  margin-left: 2px;
  margin-right: 2px;
  line-height: 13px;
  border: 1px solid #9e9e9e;
  margin-top: 1px;
}

/* 레벨별 배경색 */
.level-0-20  { color: #000000; } 
.level-21-40 { color: #0109ff; background: #DDE1FF;}  
.level-41-60 { color: #0109ff; background: #FFF0D6}  
.level-61-80 { color: #ee1e07; background: #FFF0D6;}  
.level-81-99 { color: #ee1e07; background: #FFD966; font-size: 12px; }  

.jpbit {
  justify-content: space-between;
  display: flex;
  margin-bottom: 20px;
}
.jpbit_left {
  width: 750px;
}
.jpbit_right {
  width: 300px;
}
.tracking {
  width: 300px;
  height: 500px;
  border: 1px solid #ddd;
  margin-top: 5px;
}
.price_board {
  width: 98%;
  margin-bottom: 6px;
}

.coin-ic{
  width:12px;
  height:12px;
  display:inline-block;
  vertical-align:-2px; /* 필요하면 -1~-3 사이로 조절 */
  flex:0 0 auto;
}

.dominanceLabel {
  font-size: 11px;
  font-weight: 700;
  color: #222;
  line-height: 1;
}

.dominanceValue {
  font-size: 11px;
  line-height: 1;
}

.dominance_board {
  display: flex;
  font-size: 11px;
  align-items: center;
  gap: 10px;
  padding-left: 4px;
}

.dominance_exchange_board {
  width: 98%;
  display: flex;
  justify-content: space-between;
}

.exchange_board {
  display: flex;
  font-size: 11px;
  gap:2px;
  min-width: 82px;
  padding-right: 4px;
}

.price_board_tap {
  display: flex;
  margin-right: 20px;
}

.price_board_tap_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

#openModal {
  border: none;
  cursor: pointer;
  background-color: transparent;
  margin-right: 8px;
  height: 22px;
  font-size: 15px;
}

.price_board_tap li {
  width: 50px;
  height: 22px;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
  margin-right: 1px;
  cursor: pointer;
  text-align: center;
}

.price_board_tap a {
  display: block;
  text-decoration: none;
  color: #333;
}

/* 테이블 스타일 */
.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table,
.custom-table th,
.custom-table td {
  border-bottom: 1px solid #e7e7e7;
  height: 32px;
  line-height: 32px;
}

.coinTable th,
.coinTable td {
  font-size: 14px;
  vertical-align: middle;
}
.custom-table_th1,
.custom-table_td1 {
  width: 15%;
  text-align: center;
}
.custom-table_th2,
.custom-table_td2 {
  width: 22%;
  text-align: center;
}
.custom-table_th3,
.custom-table_td3 {
  width: 15%;
  text-align: center;
}
.custom-table_th4,
.custom-table_td4 {
  width: 28%;
  text-align: center;
}
.th-inner {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.custom-table_th5,
.custom-table_td5 {
  width: 20%;
  text-align: center;
}

.custom-table th {
  background-color: #e9efff;
}

.custom-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}

.custom-modal.show {
  display: flex;
}

.custom-modal-box {
  background: white;
  width: 80%;
  max-width: 420px;
  border-radius: 12px;
  padding: 16px;
}

.custom-close {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  gap: 8px;
}

#coinGrowthModal .modal-date {
  padding-top: 10px;
  font-size: 15px;
  color: #0e5dff;
  text-align: center;
}

.growth-date {
  color: #0e5dff;
  cursor: pointer;
}

.modalButton {
  background: none;
  border: 1px solid #ddd;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
}

.active {
  display: block;
}
a.active {
  height: 100%;
  color: #fff;
  background: #3457B2;
}
#photo_table, #main-tabs {
  width: 98%; /* 원하는 폭 설정 */
  margin-bottom: 10px;
}

.photo_table_head {
  display: flex;
  background: #e9efff;
  font-weight: bold;
  justify-content: space-between;
  align-items: center;
}

.best_table_head {
  padding-left: 0; 
  background: #e9efff;
}

.gallery_active {
  display: flex;
  margin-top: 10px;
  justify-content: space-evenly;
  gap: 50px;
  padding-left: 30px;
  padding-right: 30px;
  overflow: hidden;
}

.gallery1_content {
  overflow: hidden;
  flex: 1;
  max-width: 200px;
}

#gallery_title, #gallery_title_mobile {
  display: flex;
  margin-top: 5px;
  justify-content: space-evenly;
  gap: 50px;
  padding-left: 30px;
  padding-right: 30px;
}

.gallery_title_content {
  flex: 1;
  width: 100%;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;   
}

.gallery_title_content_p {
  text-align: center;
  overflow: visible; /* 텍스트가 div를 벗어날 경우 일부분은 보이게 함 */
  white-space: pre-wrap; /* 텍스트 줄 바꿈을 허용 */
  word-wrap: break-word; /* 긴 단어를 강제로 줄 바꿈하여 보여줌 */
  font-size: 15px;
}

#gallery1_mobile {
  display: none;
}

#gallery1 {
  display: flex;
}

#gallery_title_mobile {
  display: none;
}

#gallery_title {
  display: flex;
}

.main1 {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}

.main2 {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}

.main_table {
  width: 98%;
}

.rec_program_content {
  width: 50%;
}

.rec_program_head {
  display: flex;
  margin-left: 10px;
}

.rec_program_head2 {
  display: flex;
  margin-left: 10px;
}

.rec_program,
.rec_program2 {
  width: 400px;
  height: 50px;
  display: flex;
  line-height: 50px;
  border-bottom: 1px solid gray;
  font-weight: bold;
}

.rec_program li {
  flex: 1;
  margin-left: 10px;
}

.rec_program2 li:nth-child(1) {
  flex: 1;
  margin-left: 10px;
}

.rec_program2 li:nth-child(2) {
  flex: 1;
  margin-left: 10px;
}

.more {
  margin-left: 140px;
  font-size: 12px;
}

.rec_table_head {
  display: flex;
}
.rec_table {
  display: flex;
  width: 200px;
  height: 150px;
}

.rec_table li {
  flex: 1;
  display: flex;
}

.rec_table li a {
  margin: 10px;
}
.rec_program_content img {
  width: 95%;
  height: 130px;
  margin-top: 10px;
}

.rec_name,
.rec_price {
  display: flex;
  text-align: center;
}

.rec_name li,
.rec_price li {
  flex: 1;
  font-size: 14px;
}

.rec_price li {
  font-weight: bold;
}

.main_table2,
.main_table3 {
  width: 98%;
}
.board,
.board2 {
  background: #e7e7e7;
  height: 50px;
  display: flex;
  line-height: 50px;
}

.board_f {
  text-align: center;
  font-weight: bold;
  border: 1px solid #ddd;
  flex: 1;
}
.board_s {
  text-align: center;
  font-weight: bold;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  flex: 1;
}

.board li a,
.board2 li a {
  display: block;
  height: 49px;
  border: none;
}

.on {
  background: #cfcfcf;
}
.board_list,
.board_list2 {
  background: white;
  width: 100%;
  height: auto;
  table-layout: fixed;
}

.board_list tr {
  height: 35px;
  border-bottom: 1px solid #ddd;
  padding: 2px;
  text-align: left;
}

.board_table_td3 {
  text-align: center;
}

.board_list td a {
  margin-left: 5px;
  display: flex; /* 또는 inline-block */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  height: 100%;
  line-height: 40px;
  align-items: center;
}
.board_table_title {
  display: flex;
}
.board_table_title_subject {
   overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.board_table_td1 {
  width: 80%;
}

.board_table_td2 {
  width: 20%;
  padding-left: 8px;
}

.board_table_td3 {
  width: 13%;
}

#subject_img {
  color: red;
  font-size: 11px;
}
#subject_img_emo {
  width: 5px;
  height: 5px;
  align-items: center;
}

.right_table1 {
  margin-top: 5px;
  display: flex; /* 또는 display: grid; */
  justify-content: space-between; /* 아이템들을 좌우로 정렬 */
  align-items: center;
}
.right_table1-m {
  display: none;
}

.login_register {
  text-align: center;
}

.user_info {
  border: 1px solid #ddd;
  padding: 16px;
  background-color: #fdfdfd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-family: 'Segoe UI', sans-serif;
}

.user_info > div:first-child {
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  margin-bottom: 16px;
  color: #222;
  border-bottom: 2px solid #eee;
  padding-bottom: 6px;
}

.user_info .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 8px;
}

.info-cell {
  text-align: center;
}

.info-cell div:first-child {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 2px;
}

.info-cell div:last-child, .info-cell a {
  font-size: 16px;
  font-weight: 600;
  color: #111;
}


.login {
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  display: block;
  text-align: center;
  border: 1px solid #ddd;
  font: bold;
  margin-bottom: 5px;
}

.login a {
  width: 300px;
  height: 40px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  letter-spacing: 5px;
  font-weight: bold;
  display: block;
}

.login a:hover {
  width: 300px;
  height: 40px;
  background: #ddd;
}

.cs_center {
  width: 120px;
  height: 60px;

  cursor: pointer;
  margin-left: 20px;
  text-align: center;
  line-height: 60px;
}

.cs_center:hover {
  width: 120px;
  height: 60px;
  height: gray;
}

.right_table2 {
  height: 240px;
  display: flex;
  justify-content: space-around;
}

.board_list li,
.board_list2 li {
  font-size: 15px;
  line-height: 30px;
  margin-left: 10px;
}

/* 검색결과 리스트 */

ul.search-results li {
  padding: 8px 8px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mini-pagination{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  padding:8px 10px 0 10px;
}

.mini-pagination button{
  border:1px solid #ddd;
  background:#fff;
  padding:4px 8px;
  cursor:pointer;
  border-radius:4px;
}

.mini-pagination button:disabled{
  opacity:.4;
  cursor:default;
}

.gallery-tab-pagination{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  padding:8px 10px 0 10px;
  font-size:14px;
}

.gallery-tab-pagination button{
  border:1px solid #ddd;
  background:#fff;
  padding:2px 8px;
  border-radius:3px;
  cursor:pointer;
}

.gallery-tab-pagination button:disabled{
  opacity:.4;
  cursor:default;
}

.chip_basic {
  margin-right: 4px;
  line-height: 1;
  background: #f2f2f2;
  font-weight: 500;
}

.chip_blue {
  margin-right: 4px;
  line-height: 1;
  font-weight: 500;
  background:#f5f8ff;
  color: #2a5bd7;
}

.chip_red {
  margin-right: 4px;
  line-height: 1;
  font-weight: 500;
  background:#fff4f4;
  color:#c62828;
}

/* 게시판 이름 태그 스타일 */
.tag {
  display: inline-block;
  background-color: #f2f4f6;
  color: #333;
  font-weight: bold;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 12px;
  margin-right: 8px;
  border: 1px solid #999;
  line-height: 1;
}

.tag_gallery {
  display: inline-block;
  background-color: #f2f4f6;
  color: #333;
  font-weight: bold;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 12px;
  margin-right: 8px;
  border: 1px solid #999;
  line-height: 1;
}

/* 제목 링크 */
.search-link {
  color: #222;
  text-decoration: none;
  max-width: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.has_video svg {
  vertical-align: middle;
}

.search-link-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  line-height: 1;
}

.search-link-content-news {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* 2줄로 제한 */
  -webkit-box-orient: vertical;
}

.v-badge-icon{
  width:14px;
  height:12px;
  vertical-align:-2px;
}
.v-badge-icon circle{ fill:#1DA1F2; }
.v-badge-icon path{ stroke:#fff; }


/* 작성자, 날짜 */
.search-meta {
  color: #777;
  font-size: 12px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  line-height: 1;
}

.search_filter {
  height: 100%;
  border-color: #ddd;
}

.search_filter_bar_left {
  display: flex; 
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  margin-left: 4px;
  margin-right: 4px;
  width: 100%;
}

.search_filter,
.search_keyword,
.search_btn {
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.search_keyword {
  width: 100%;
}

.search_btn {
  -webkit-appearance: none; /* iOS 기본 버튼 스타일 제거 */
  appearance: none;
  background: #f0f0f0;         
  color: inherit;          
  font: inherit;            
  cursor: pointer;
}

.search_filter_bar {
  height: 40px;
  display: flex;
  justify-content: center;
}

.search_filter_bar ul {
  display: flex;
  height: 38px;
  line-height: 40px;
  margin-left: 4px;
  border: 1px solid #ddd;
}

.search_filter_bar li {
  width: 38px;
  height: 38px;
  text-align: center;
}

.search_filter_bar li a {
  width: 40px;
  height: 38px;
  display: block;
}

.bottom {
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px 0px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.bottom_top {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.footer_brand {
  font-weight: bold;
  font-size: 13px;
  color: #666;
}

.footer_contact {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.footer_links {
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  line-height: 1;
}

.footer_links a {
  color: #666;
  text-decoration: none;
}

.footer_links a:hover {
  text-decoration: underline;
}

.bottom_text {
  margin: 0 5px;
  color: #666;
}

.copyright {
  margin-top: 12px;
  font-size: 12px;
  color: #999;
}

.page-wrapper {
  min-height: 100vh;       /* 화면 높이 전체 */
  display: flex;
  flex-direction: column;  /* 세로 배치 */
  justify-content: flex-start;
}

.top_10 {
  margin-top: 10px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 8px;
}

.top_10_title {
  width: 100%;
  height: 20px;
  text-align: center;
  padding-top: 5px;
  margin-top: 2px;
  font-weight: bold;
}

.top_10_search {
  display: flex;
  padding: 7px;
}

.coinTable {
  width: 90%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.coinTable th,
.coinTable td {
  padding: 2px;
  text-align: center;
  border-bottom: 1px solid #e7e7e7;
  font-size: 12px;
  height: 28px;
}

.coinTable th {
  background-color: #e7e7e7;
}

#datepicker {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 180px;
}

/* CSS for the submit button */
.top_10_submit, .top_with_submit,.vote-btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 5px;
  -webkit-appearance: none; /* iOS 기본 버튼 스타일 제거 */
  appearance: none;
  background: #f0f0f0;         
  color: inherit;          
  font: inherit;            
  cursor: pointer;
}

.poll-result-link, .poll-result-link-unlogin {
  margin-top: 4px;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
  -webkit-appearance: none; /* iOS 기본 버튼 스타일 제거 */
  appearance: none;
  background: #f0f0f0;         
  color: inherit;          
  font: inherit;            
  cursor: pointer;
}

.coinTable th:first-child,
.coinTable td:first-child {
  width: 40%;
}

.coinTable td:first-child {
  text-align: left;
  padding-left: 8px;
}

.coinTable th:last-child,
.coinTable td:last-child {
  width: 20%;
  text-align: center;
}

.coinTable th:nth-child(2),
.coinTable td:nth-child(2) {
  width: 20%;
}

.text-muted {
  text-align: center;
}

.tabs {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.tab, .tab-link {
  cursor: pointer;
  padding: 4px 8px;
}

.active {
  color: white;
}



.right_ad {
  width: 100%;
  margin-top: 5px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trade_king {
  width: 90%;
  margin-top: 7px;
  margin-bottom: 10px;
}

.chart-container {
  display: none;
}

.chart-start {
  margin-top: 5px;
  border: 1px solid #ddd;
  height: 238px;
}
.modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: white;
  width: 80%;
  max-width: 420px;
  border-radius: 12px;
  padding: 16px;
}

/* crypto_table을 회색 배경으로 변경 */
.loading {
  background-color: rgba(245, 245, 245, 0.85); /* 회색 반투명 */
  pointer-events: none; /* 클릭 방지 */
}

/* 로딩 아이콘 스타일 */
.loader {
  border: 4px solid #f3f3f3; /* Light gray */
  border-top: 4px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.freq-summary{
  margin:0 0 10px;
  padding:8px 10px;
  background:#ffffff;
  border:1px solid #eee;
  border-radius:8px;
  font-size:13px;
}
.freq-title {
  font-size: 14px;
  margin-bottom: 2px;
}

.freq-sub {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.freq-list {
  font-size: 13px;
  font-weight: 500;
}

.search-coin-tab.on {
    background-color: #eee;
    font-weight: bold;
  }
  .search-coin-tab-content {
    display: none;
  }
  .search-coin-tab-content.select {
    display: block;
  }

#search-summary {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  width: 90%;
}

#search-summary .coin-block {
  margin-bottom: 10px;
}

#search-summary .coin-name {
  font-weight: bold;
  font-size: 15px;
  color: #333;
}

#search-summary .coin-date {
  margin-left: 10px;
  font-size: 13px;
  color: #666;
}

/* 탭 전체 라인 */
#tabs {
  display: flex;
  margin-bottom: 10px;
  padding-left: 10px;
}

/* 탭 버튼 */
.search-coin-tab {
  padding: 6px 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px 4px 0 0;
  background-color: #f3f3f3;
  margin-right: 5px;
  font-size: 13px;
}

.search-coin-tab.on {
  background-color: #fff;
  border-bottom: 1px solid white;
  font-weight: bold;
}

/* 탭 콘텐츠 */
.search-coin-tab-content {
  border-top: none;
  padding: 10px;
  background-color: #f9f9f9;
  font-size: 14px;
  line-height: 1.6;
}

/* 각 코인 설명 라인 */
.search-coin-entry {
  margin-bottom: 8px;
  border-bottom: 1px solid #ccc;
}

.tab-wrapper {
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-top: 10px;
  overflow: hidden;
  font-family: 'Noto Sans KR', sans-serif;
  width: 90%;
}

#coinInput {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 80%;
}

.medal {
    font-size: 18px !important;
    line-height: 18px;
    display: inline-block;
}


/* 탭 스타일 */
.hot-tab {
  font-size: 14px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

.hot-tab + .hot-tab {
  margin-left: 4px;
}

.user-ico {
  width: 16px;
  height: 14px;
  fill: #8a8f98;
  flex-shrink: 0;
}

.index-title {
  background: #3457B2;
  color: #fff;
  height: auto;
  padding: 6px;
}
.index-title-right{
  background-color: #fff;
  color: #000;
}

.latest-board {
  width: 98%;
  margin-bottom: 10px;
}

/* HOT 게시글 헤더 라인 정렬 */

.latest-board-content{
  display: flex;
  justify-content: space-between;  /* 왼쪽: 제목, 오른쪽: 탭 */
  align-items: center;
  height: 32px;
  line-height: 40px;
  background-color: #e9efff; 
  font-weight: bold; 
  padding-left: 8px;
}

.kimchi-card{
  margin:10px 0;
  width: 98%;
}
.top3-card-out-wrapper {
  width: 98%;
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.top3-card-wrapper {
  display: flex; 
  width: 98%; 
  gap: 4px;
}

.upbit-card, .bithumb-card, .binance-card {
  margin:1px 0;
  width: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  flex: 1;
}

.kimchi-wrapper {
  background:#fff;
  border:1px solid #e8edf5;
  border-radius:10px;
  width: 100%;
}

.upbit-top3-wrapper,.bithumb-top3-wrapper, .binance-top3-wrapper {
  background:#fff;
  border-radius:10px;
  width: 100%;
}

.kimchi-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px;
}

.upbit-top3-header-left, .bithumb-top3-header-left, .binance-top3-header-left{
  padding: 2px 0px;
  font-weight: 600;
  color: #111;
  margin-bottom: 2px;
  font-size: 10px;
}

.upbit-top3-header-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kimchi-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.top3-coin{
  font-size: 8px;
}

.top3-value{
  font-size:10px;
  border-radius:999px;
  white-space:nowrap;
  max-width: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  margin-bottom: 4px;
  padding: 1px 1px;
}

.top3-value.pos{
  color:#0a7a3d;
  font-weight: bold;
}

.top3-value.neg{
  color:#c0392b;
  font-weight: bold;
}

/* 토글 버튼 */
.kimchi-toggle{
  border:1px solid #d9e2f1;
  background:#f6f8fc;
  color:#222;
  font-weight:700;
  font-size:10px;
  padding: 2px 4px;
  border-radius:8px;
  cursor:pointer;
}

.kimchi-toggle:hover{
  background:#eef3fb;
}

.kimchi-arrow{
  font-size:12px;
  transform:translateY(1px);
}

.kimchi-body{
  margin-top:10px;
}

/*에어드랍 tge 이벤트 캘린더*/
.weekbar{display:flex;justify-content: space-evenly; gap:2px; width: 98%;padding: 10px 2px 6px;}
.day{border:1px solid #ddd;border-radius:12px;padding:6px;cursor:pointer;background:#fff;flex:0 0 68px}
.dow{font-size:12px;text-align: center;}
.date{font-size:14px;font-weight:800;margin-top:2px}
.count{margin-top:8px;font-size:12px;text-align: center;}
.event-pill{display:inline-flex;align-items:center;font-weight:600;line-height:1;border:1px solid rgba(10,122,61,0.18);border-radius:999px;padding:4px 4px;font-size: 11px;}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:16px;z-index: 1;}
.modal-cal{max-height:80%;width:min(760px,100%);background:#fff;border-radius:14px;overflow:hidden}
.mh{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #eee;font-weight:800}
.mb{padding:14px;max-height:400px;overflow:auto}
.row{padding:10px 0;border-bottom:1px solid #f2f2f2}
.meta{font-size:12px;opacity:.8;margin-top:4px}
.btn{border:0;background:#f3f3f3;padding:7px 10px;border-radius:10px;cursor:pointer;display: inline-flex;gap: 2px;font-size: 11px; align-items: center;}
.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:12px}
/*---------------------- */

.adsense_pc {
  display: flex; justify-content: center; align-items: center; width: 98%;
}

.adsense_mb {
  display: none;
}

/*-트레이딩 참가 신청 후 모달-*/
.trading-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.trading-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.trading-guide-dialog {
  position: relative;
  width: min(92vw, 720px);
  max-height: 80vh;
  overflow-y: auto;
  margin: 4vh auto 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.22);
  padding: 22px 18px 18px;
  z-index: 1;
}

.trading-guide-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}

.trading-guide-header {
  text-align: center;
  margin-bottom: 18px;
}

.trading-guide-header h3 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 800;
  color: #111;
}

.trading-guide-header p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}

.trading-guide-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.guide-step {
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  padding: 14px;
  background: #fafafa;
}

.guide-step-label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #356dff;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.guide-step-text {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: #222;
  word-break: keep-all;
}

.guide-step-image {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  background: #fff;
}

.trading-guide-footer {
  margin-top: 20px;
  text-align: center;
}

.guide-confirm-btn {
  min-width: 140px;
  height: 46px;
  border: 0;
  border-radius: 10px;
  background: #356dff;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.guide-confirm-btn:hover {
  opacity: 0.95;
}

body.modal-open {
  overflow: hidden;
}
/*-트레이딩 참가 신청 완료-*/

@media (max-width: 480px) {
  .trading-guide-dialog {
    width: 94vw;
    padding: 18px 14px 14px;
    margin-top: 3vh;
    border-radius: 14px;
  }

  .trading-guide-header h3 {
    font-size: 20px;
  }

  .trading-guide-header p,
  .guide-step-text {
    font-size: 13px;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Default styles for all screens */

/* Add your default styles here */

/* Media query for screens smaller than 600px (mobile devices) */
@media screen and (max-width: 700px) {
  .adsense_pc {
    display: none;
  }

  .adsense_mb {
    display: flex; justify-content: center; align-items: center;
  }

  .modal-content {
    width: 80%;
  }
  /* Styles for screens smaller than 600px (mobile devices) */
  .intro {
    width: 100%;
    margin-left: 0;
    height: auto;
  }
  /* Update styles for the header and navigation */
 .expand_bar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .expand_bar_img {
    cursor: pointer;
    margin-left: 2px;
  }
  .header {
    width: 100%;
  }
  .header_up {
    justify-content: space-between;
  }
  .header_ad {
    display: none;
  }
  .price_board_tap {
    width: 83%;
  }
  .custom-table {
    width: 100%;
  }
  .rec_program,
  .rec_program2 {
    width: 100%;
  }
  .rec_table img {
    width: 100%;
    height: 100%;
  }
  #main {
    height: auto;
    margin: 2px 0;
    padding: 0 4px
  }

  .main_left_title {
    font-size: 30px; /* Reduce the font size of the logo for mobile */
  }
  .red {
    font-size: 30px;
    color: red;
  }

  .blue {
    font-size: 30px;
    color: blue;
  }
  .nav-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    background-color: #5985dd;
    margin-bottom: 5px;
  }
  .nav-mobile li {
    flex: 1;
    text-align: center;
    height: 28px;
    line-height: 28px;
    position: relative;
  }
  .pc_top_banner {
    display: none;
  }
  .phond_ad {
    display: block;
  }
  .nav-mobile a {
    width: 100%;
    height: 28px;
    display: block;
    line-height: 28px;
    font-weight: bold;
    transition: background-color 0.5s ease;
  }

  .nav-mobile li a {
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 13px;
  }
  .nav {
    display: none;
  }
  .submenu {
    display: none; /* Display the submenus as normal links in mobile */
  }
  .jpbit {
    display: block;
    margin-bottom: 30px;
  }
  .jpbit_left {
    width: 100%;
  }
  .jpbit_right {
    width: 100%;
  }
  .price_board {
    width: 100%;
  }
  #photo_table, #main-tabs {
  width: 100%; /* 원하는 폭 설정 */
  padding: 10px 0;
  }
  .board_ad {
    width: 96%;
    margin: auto;
    height: 90px;
  }
  .jpbit_right {
    width: 100%;
  }
  .tracking {
    width: 90%;
    margin: auto;
  }
  .gallery_active {
  display: flex;
  margin-top: 10px;
  justify-content: space-evenly;
  gap: 10px;
  padding-left: 10px;
  padding-right: 10px;
  overflow: hidden;
  }

  .gallery1_content {
    overflow: hidden;
    flex: 1;
    max-width: 120px;
  }

  #gallery_title, #gallery_title_mobile {
    display: flex;
    margin-top: 5px;
    justify-content: space-evenly;
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
  }

  .gallery_title_content {
    flex: 1;
    width: 100%;
    text-align: center;
  }

  #gallery1_mobile {
    display: flex;
    padding-top: 8px;
  }
  
  #gallery1 {
    display: none;
  }

  #gallery_title_mobile {
    display: flex;
  }
  
  #gallery_title {
    display: none;
  }

  .rec_table {
    width: 100%;
    height: 100px;
  }
  .rec_table li {
    text-align: center; /* Center the recommended items horizontally */
    flex: 1;
    display: flex;
  }
  .rec_program_content img {
    width: 90%;
    height: 130px;
    margin: 10px;
  }
  .rec_program_head2,
  .rec_program_head {
    margin-left: 0;
  }
  .rec_program li,
  .rec_program2 li {
    flex: 1;
    margin-left: 10px;
    font-size: 12px;
  }
  .rec_program2 li:nth-child(1) {
    flex: 1;
    margin-left: 10px;
  }
  .rec_table li a {
    margin: 10px;
  }
  .rec_name,
  .rec_price {
    width: 100%;
  }
  .rec_name li,
  .rec_price li {
    font-size: 12px; /* Reduce the font size of recommended item names in mobile */
    text-align: center; /* Center the text of recommended item names and prices in mobile */
  }

  .more {
    margin-left: 0;
    font-size: 12px;
  }
  .right_table1 {
    display: none;
  }

  .right_table2 {
    display: none;
  }

  .vedio {
    display: none;
  }
  .on {
    background: white;
    background: #cfcfcf;
  }
  .board_list,
  .board_list2 {
    width: 100%; /* Make the board lists take the full width on mobile */
    margin-left: 0;
  }
  .main1 {
    display: block;
  }
  .main2 {
    display: block;
  }
  .price_board_left {
    display: none;
  }
  .price_board_right {
    display: none;
  }
  .main_table2,
  .main_table3 {
    width: 100%;
  }
  .board,
  .board2 {
    width: 100%;
    margin-left: 0;
    height: 40px;
  }
  .board_list tr,
  .board_list td,
  .board_list2 tr,
  .board_list2 td {
    font-size: 14px; /* Reduce the font size of table elements on mobile */
  }
  .board li,
  .board2 li {
    border: none;
  }
  .board li a,
  .board2 li a {
    display: block;
    height: 40px;
    border: none;
    line-height: 40px;
  }
  .main_table {
    width: 100%;
  }
  .start {
    display: block;
  }
   .footer_section {
    gap: 6px;
  }
  .right_table1-m {
    display: block;
  }
  .iframe {
    border: none;
  }
  .top_10 {
    width: 100%;
    margin: auto;
    border: none;
    height: auto;
    outline: 10px solid #F2F4F7;
    padding: 10px 0;
    margin-bottom: 10px;
  }
  .chart-start {
    display: none;
  }
  .login {
    display: none;
  }
  .intro-r {
    width: 100%;
  }
  .top_10_search {
    width: 90%;
  }
  .coinTable {
    width: 90%;
  }
  #datepicker {
    width: 80%;
  }
  .top_10_title {
    line-height: 32px;
    padding-top: 0;
    height: 32px;
    text-align: left;
    margin-bottom: 10px;
  }
  .coinTable th,
  .coinTable td {
    font-size: 14px;
  }
  .custom-table_th1,
  .custom-table_td1 {
    width: 12%;
  }
  .custom-table_th2,
  .custom-table_td2 {
    width: 22%;
  }
  .custom-table_th3,
  .custom-table_td3 {
    width: 14%;
  }
  .custom-table_th4,
  .custom-table_td4 {
    width: 28%;
  }
  .custom-table_th5,
  .custom-table_td5 {
    display: none;
  }
  .right_ad {
    border: none;
  }
  .top5_trader_head {
    display: none;
  }
  a.active {
    color: #000;
    background-color: #fff;
    border-bottom: 2px solid #3457B2;
  }
  .price_board_tap a.active {
    height: 100%;
    color: #fff;
    background: #3457B2;
  }
  .hot-tab {
    font-size: 15px;
  }
  .index-title {
    border-bottom: 2px solid #3457B2;
    padding: 4px 8px;
    background-color: #fff;
    color:#000;
    font-size: 16px;
  }
  .index-title-right {
    border-bottom: 2px solid #3457B2;
    padding: 4px 8px;
    background-color: #fff;
    color:#000;
    font-size: 16px;
  }
  .latest-board {
    width: 100%;
    outline: 10px solid #F2F4F7;
    padding: 10px 0;
  }
  .latest-board-content, .best_table_head, .photo_table_head {
    background-color: #fff;
    margin-bottom: 8px;
  }
  .tab{
    font-size: 16px;
  }
  .search-link {
    max-width: 74%;
  }
  .search-link-news {
    max-width: 80%;
  }
  .level-badge{
    font-size: 8px;
    line-height: 10px;
    margin-top: 0;
  }
  .kimchi-card{
    margin:4px 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .kimchi-wrapper {
    background:#fff;
    border:1px solid #e8edf5;
    border-radius:8px;
    width: 94%;
  }

  .upbit-card, .bithumb-card, .binance-card {
    padding: 4px;
    min-height: 66px;
    min-width: 84px;
  }
  .top3-card-out-wrapper {
    width: 100%;
  }

  .top3-card-wrapper {
    justify-content: center;
  }

  .upbit-top3-header-right, .bithumb-top3-header-right, .binance-top3-header-right{
    display:block;
  }

  .weekbar-wrapper {
    padding-left: 8px;
  }
  /*에어드랍 tge 캘린더*/
  .weekbar{
    display:flex;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .day{
    flex:0 0 80px;           /* 카드 폭 고정 */
    padding:8px;
    scroll-snap-align:start;
  }
  .dow{font-size:12px;text-align: center;}
  .date{font-size:16px}
  .count{margin-top:10px;text-align: center;}
  .event-pill{font-size:11x}

  .dominance_exchange_board {
    width: 100%;
  }

  .domi_eth, .domi_alt {
    display: none;
  }
}